@charset "UTF-8";
/* ----------------------------------------------
　PC設定
------------------------------------------------*/
@media all and (min-width: 769px) {
  #container .breadcrumb_area {
    margin-bottom: var(--m150);
  }
  #container #contents .title {
    margin-bottom: var(--s24_64);
    padding-bottom: var(--s42_80);
    font-size: var(--s24_36);
    text-align: center;
    border-bottom: 1px solid var(--brown04);
    font-weight: bold;
  }
  #container #contents .top_text {
    margin-bottom: var(--s32_80);
  }
  #container #contents .top_text .catch {
    font-size: var(--s18_26);
    margin-bottom: var(--s24_56);
    text-align: center;
  }
  #container #contents .top_text .br {
    font-size: var(--s14_18);
    text-align: center;
    line-height: 2.5;
  }
  #container #contents .service_sec {
    margin-bottom: var(--s32_48);
    padding: var(--s8_36) var(--s8_32) var(--s16_42);
    background-color: var(--brown02);
  }
  #container #contents .service_sec:last-of-type {
    margin-bottom: var(--s20_36);
  }
  #container #contents .service_sec .sec_tit {
    display: flex;
    align-items: baseline;
    padding: 0 var(--s8_36) var(--s16_20);
    margin-bottom: var(--s16_20);
    border-bottom: 1px solid var(--mainBl);
    grid-gap: var(--s8_16);
  }
  #container #contents .service_sec .sec_tit .num {
    aspect-ratio: 1/1;
    padding: var(--s4_8) var(--s8_14);
    display: inline-block;
    background-color: var(--mainBl);
    font-size: var(--s18_22);
    color: #fff;
    line-height: 1;
  }
  #container #contents .service_sec .sec_tit .txt {
    font-size: var(--s18_24);
  }
  #container #contents .service_sec .text_area {
    padding: 0 var(--s8_36);
  }
  #container #contents .service_sec .text_area .br:not(:last-of-type) {
    margin-bottom: var(--s14_16);
  }
  #container #contents .service_sec .text_area .br::before {
    content: "";
    display: inline-block;
    width: var(--s20_24);
    aspect-ratio: 25/15;
    background: url(/images/after/arrow_a_service.svg) center/100% no-repeat;
    margin-right: 1em;
  }
  #container #contents .service_sec .text_area .br .txt {
    font-size: var(--s14_16);
  }
  #container #contents .service_sec .about_text {
    padding: 0 var(--s8_36);
    font-size: var(--s14_16);
    margin-bottom: 1.25em;
  }
  #container #contents .service_sec .detail_text {
    padding: var(--s8_24);
    background-color: #fff;
  }
  #container #contents .service_sec .detail_text dt {
    font-size: var(--s14_16);
    color: #fff;
    padding: 0.5em 1.25em;
    background-color: var(--mainBl);
    margin-bottom: 1em;
  }
  #container #contents .service_sec .detail_text dd {
    font-size: 14px;
  }
  #container #contents .service_sec .detail_text dd.flex {
    display: flex;
    flex-wrap: wrap;
    grid-gap: var(--s10_16) 3%;
  }
  #container #contents .service_sec .detail_text dd.flex .txt {
    width: 65%;
    font-size: 14px;
  }
  #container #contents .service_sec .detail_text dd.flex .img {
    aspect-ratio: 33/18;
    width: 32%;
    overflow: hidden;
    border-radius: 10px;
  }
  #container #contents .service_sec .detail_flex {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    grid-gap: var(--s16_32) 1.85%;
  }
  #container #contents .service_sec .detail_flex .detail_left {
    width: 49.075%;
  }
  #container #contents .service_sec .detail_flex .detail_left .detail_text:not(:last-of-type) {
    margin-bottom: var(--s16_32);
  }
  #container #contents .service_sec .detail_flex .img_area {
    width: 49.075%;
    background-color: #fff;
    padding: var(--s10_20);
  }
  #container #contents .attention {
    margin-bottom: var(--s32_48);
    padding: var(--s16_32) var(--s20_60);
    border: 1px solid var(--mainCol);
    position: relative;
    z-index: 1;
  }
  #container #contents .attention::before {
    content: "";
    display: inline-block;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    border: 1px solid var(--mainCol);
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: -1;
  }
  #container #contents .attention dt {
    font-size: var(--s14_16);
    color: #fff;
    padding: 0.5em 1.25em;
    background-color: var(--mainCol);
    margin-bottom: 1em;
    text-align: center;
  }
  #container #contents .attention dd ul {
    margin: 1em 0;
  }
  #container #contents .attention dd .br, #container #contents .attention dd li {
    font-size: 14px;
    color: var(--mainCol);
  }

  #container #contents .contact {
    margin-bottom: var(--m320); 
  }
  #container #contents .contact .bar_title {
    font-size: var(--s18_26);
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    grid-gap: 0 16px;
  }
  #container #contents .contact .bar_title::before ,
  #container #contents .contact .bar_title::after {
    content: "";
    display: inline-block;
    flex: auto;
    height: 2px;
    background-color: var(--mainBl);
  }
  #container #contents .contact .customer_box {
    margin-top: calc(var(--s14_18) * -1);
    padding: var(--s20_42) var(--s8_32) var(--s8_32);
    border: 2px solid var(--mainBl);
    border-top: unset;
  }
  #container #contents .contact .customer_box .text {
    margin-bottom: var(--s20_42);
    text-align: center;
    font-size: var(--s14_18);
  }
  #container #contents .contact .customer_box .contact_flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    grid-gap: var(--s16_24) 4%;
  }
  #container #contents .contact .customer_box .contact_flex .contact_box {
    width: 48%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #container #contents .contact .customer_box .contact_flex .contact_box .tit {
    font-size: var(--s16_18);
    font-weight: bold;
    text-align: center;
    margin-bottom: .75em;
  }
  #container #contents .contact .customer_box .contact_flex .contact_box .tel_box {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-gap: .5rem;
    margin-bottom: var(--s8_12);
  }
  #container #contents .contact .customer_box .contact_flex .contact_box .tel_box img {
    width: var(--s24_32);
  }
  #container #contents .contact .customer_box .contact_flex .contact_box .tel_box .txt {
    font-size: var(--s20_36);
    line-height: 1;
    font-weight: bold;
  }
  #container #contents .contact .customer_box .contact_flex .contact_box .time {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  #container #contents .contact .customer_box .contact_flex .contact_box .button a {
    background-color: var(--mainCol);
  }
  #container #contents .contact .customer_box .contact_flex .contact_box .button a img {
    width: var(--s20_24);
  }
  #container #contents .contact .customer_box .contact_flex .contact_box .button a .txt {
    color: #fff;
    font-size: var(--s16_18);
  }
  #container #contents .contact .customer_box .contact_flex .contact_box .button a .arrow {
    position: relative;
    transform: unset;
    background: url(/images/common/arrow_w.svg) center/100% no-repeat;
  }
}
@media all and (min-width: 769px) and (max-width: 1080px) {
  #container #contents .maker_list li {
    width: 31.6%;
  }
}
/* ----------------------------------------------
　PAD以下設定
------------------------------------------------*/
@media all and (max-width: 768px) {
  #container .breadcrumb_area {
    margin-bottom: var(--m150);
  }
  #container #contents .title {
    margin-bottom: var(--s24_64);
    padding-bottom: var(--s42_80);
    font-size: var(--s24_36);
    text-align: center;
    border-bottom: 1px solid var(--brown04);
    font-weight: bold;
  }
  #container #contents .top_text {
    margin-bottom: var(--s32_80);
  }
  #container #contents .top_text .catch {
    font-size: var(--s18_26);
    margin-bottom: var(--s24_56);
    text-align: center;
  }
  #container #contents .top_text .br {
    font-size: var(--s14_18);
    text-align: center;
    line-height: 2.5;
  }
  #container #contents .service_sec {
    margin-bottom: var(--s32_48);
    padding: var(--s8_36) var(--s8_32) var(--s16_42);
    background-color: var(--brown02);
  }
  #container #contents .service_sec:last-of-type {
    margin-bottom: var(--s20_36);
  }
  #container #contents .service_sec .sec_tit {
    display: flex;
    align-items: baseline;
    padding: 0 var(--s8_36) var(--s16_20);
    margin-bottom: var(--s16_20);
    border-bottom: 1px solid var(--mainBl);
    grid-gap: var(--s8_16);
  }
  #container #contents .service_sec .sec_tit .num {
    aspect-ratio: 1/1;
    padding: var(--s4_8) var(--s8_14);
    display: inline-block;
    background-color: var(--mainBl);
    font-size: var(--s18_22);
    color: #fff;
    line-height: 1;
  }
  #container #contents .service_sec .sec_tit .txt {
    font-size: var(--s18_24);
  }
  #container #contents .service_sec .text_area {
    padding: 0 var(--s8_36);
  }
  #container #contents .service_sec .text_area .br:not(:last-of-type) {
    margin-bottom: var(--s14_16);
  }
  #container #contents .service_sec .text_area .br::before {
    content: "";
    display: inline-block;
    width: var(--s20_24);
    aspect-ratio: 25/15;
    background: url(/images/after/arrow_a_service.svg) center/100% no-repeat;
    margin-right: 0.3em;
  }
  #container #contents .service_sec .text_area .br .txt {
    font-size: var(--s14_16);
  }
  #container #contents .service_sec .about_text {
    padding: 0 var(--s8_36);
    font-size: var(--s14_16);
    margin-bottom: 1.25em;
  }
  #container #contents .service_sec .detail_text {
    padding: var(--s8_24);
    background-color: #fff;
  }
  #container #contents .service_sec .detail_text dt {
    font-size: var(--s14_16);
    color: #fff;
    padding: 0.5em 1.25em;
    background-color: var(--mainBl);
    margin-bottom: 1em;
  }
  #container #contents .service_sec .detail_text dd {
    font-size: 14px;
  }
  #container #contents .service_sec .detail_text dd.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    grid-gap: var(--s10_16) 3%;
  }
  #container #contents .service_sec .detail_text dd.flex .txt {
    width: 100%;
    font-size: 14px;
  }
  #container #contents .service_sec .detail_text dd.flex .img {
    aspect-ratio: 33/18;
    width: 100%;
    max-width: 500px;
    overflow: hidden;
    border-radius: 10px;
  }
  #container #contents .service_sec .detail_flex {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    grid-gap: var(--s16_32) 1.85%;
  }
  #container #contents .service_sec .detail_flex .detail_left {
    width: 100%;
  }
  #container #contents .service_sec .detail_flex .detail_left .detail_text:not(:last-of-type) {
    margin-bottom: var(--s16_32);
  }
  #container #contents .service_sec .detail_flex .img_area {
    width: 100%;
    max-width: 500px;
    background-color: #fff;
    padding: var(--s10_20);
  }
  #container #contents .attention {
    margin-bottom: var(--s32_48);
    padding: var(--s16_32) var(--s20_60);
    border: 1px solid var(--mainCol);
    position: relative;
    z-index: 1;
  }
  #container #contents .attention::before {
    content: "";
    display: inline-block;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    border: 1px solid var(--mainCol);
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: -1;
  }
  #container #contents .attention dt {
    font-size: var(--s14_16);
    color: #fff;
    padding: 0.5em 1.25em;
    background-color: var(--mainCol);
    margin-bottom: 1em;
    text-align: center;
  }
  #container #contents .attention dd ul {
    margin: 1em 0;
  }
  #container #contents .attention dd .br, #container #contents .attention dd li {
    font-size: 14px;
    color: var(--mainCol);
  }
  #container #contents .contact {
    margin-bottom: var(--m320); 
  }
  #container #contents .contact .bar_title {
    font-size: var(--s18_26);
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    grid-gap: 0 16px;
  }
  #container #contents .contact .bar_title::before ,
  #container #contents .contact .bar_title::after {
    content: "";
    display: inline-block;
    flex: auto;
    height: 2px;
    background-color: var(--mainBl);
  }
  #container #contents .contact .customer_box {
    margin-top: calc(var(--s14_18) * -1);
    padding: var(--s32_42) var(--s8_32) 2rem;
    border: 2px solid var(--mainBl);
    border-top: unset;
  }
  #container #contents .contact .customer_box .text {
    margin-bottom: var(--s20_42);
    text-align: center;
    font-size: var(--s14_18);
  }
  #container #contents .contact .customer_box .contact_flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    grid-gap: 24px 4%;
  }
  #container #contents .contact .customer_box .contact_flex .contact_box {
    width: 48%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #container #contents .contact .customer_box .contact_flex .contact_box .tit {
    font-size: var(--s16_18);
    font-weight: bold;
    text-align: center;
    margin-bottom: .75em;
  }
  #container #contents .contact .customer_box .contact_flex .contact_box .tel_box {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-gap: .5rem;
    margin-bottom: var(--s8_12);
  }
  #container #contents .contact .customer_box .contact_flex .contact_box .tel_box img {
    width: var(--s24_32);
  }
  #container #contents .contact .customer_box .contact_flex .contact_box .tel_box .txt {
    font-size: var(--s20_36);
    line-height: 1;
    font-weight: bold;
  }
  #container #contents .contact .customer_box .contact_flex .contact_box .time {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  #container #contents .contact .customer_box .contact_flex .contact_box .button a {
    background-color: var(--mainCol);
  }
  #container #contents .contact .customer_box .contact_flex .contact_box .button a img {
    width: var(--s20_24);
  }
  #container #contents .contact .customer_box .contact_flex .contact_box .button a .txt {
    color: #fff;
    font-size: var(--s16_18);
  }
  #container #contents .contact .customer_box .contact_flex .contact_box .button a .arrow {
    position: relative;
    transform: unset;
    background: url(/images/common/arrow_w.svg) center/100% no-repeat;
  }
}
/* ----------------------------------------------
　SP調整
------------------------------------------------*/
@media all and (max-width: 620px) {
  #container #contents .maker_list li {
    width: 48.75%;
  }
  #container #contents .maker_list .midashi {
    min-height: 3em;
  }
  #container #contents .contact .customer_box .contact_flex .contact_box {
    width: 100%;
  }
}