@charset "UTF-8";
/* ----------------------------------------------
　PC設定
------------------------------------------------*/
@media all and (min-width: 769px) {
  #container .breadcrumb_area {
    margin-bottom: var(--m150);
  }
  #container #contents .common_area {
    margin-bottom: var(--m150);
    padding: var(--s32_100) var(--s20_60);
    background-color: var(--gray09);
  }
  #container #contents .common_area .title {
    margin-bottom: 1.25em;
    font-size: var(--s18_24);
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
    grid-gap: 0 var(--s8_16);
  }
  #container #contents .common_area .title::before, #container #contents .common_area .title::after {
    content: "";
    display: inline-block;
    flex: auto;
    height: 1px;
    background-color: var(--brown01);
  }
  #container #contents .capabilities_area {
    margin-bottom: var(--m120);
  }
  #container #contents .capabilities_area .capabilities_dl {
    border-right: 1px solid var(--brown01);
  }
  #container #contents .capabilities_area .capabilities_dl .row {
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }
  #container #contents .capabilities_area .capabilities_dl .row dt {
    padding: var(--s8_20);
    width: 20%;
    font-size: var(--s16_18);
    color: #fff;
    background-color: var(--black01);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #container #contents .capabilities_area .capabilities_dl .row dd {
    padding: 10px;
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    border-bottom: 1px solid var(--brown01);
  }
  #container #contents .capabilities_area .capabilities_dl .row dd .capabilities_txt {
    font-size: var(--s14_16);
    padding: 10px;
    width: 30%;
    background-color: var(--brown01);
    border-radius: 5px;
    text-align: center;
  }
  #container #contents .capabilities_area .capabilities_dl .row:not(:last-of-type) dt {
    border-bottom: 1px solid #fff;
  }
  #container #contents .capabilities_area .capabilities_dl .row:not(:last-of-type) dd {
    border-top: 1px solid var(--brown01);
  }
  #container #contents .strengths_area .strengths_row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
    grid-gap: var(--s16_24);
  }
  #container #contents .strengths_area .strengths_box {
    width: 31%;
    border: 1px solid var(--brown01);
    border-top: unset;
    background-color: #fff;
  }
  #container #contents .strengths_area .strengths_box dt {
    padding: var(--s10_12);
    display: flex;
    align-items: baseline;
    justify-content: center;
    grid-gap: 0.35em;
    width: 100%;
    background-color: var(--black01);
    font-size: var(--s14_18);
    color: #fff;
  }
  #container #contents .strengths_area .strengths_box dt .num {
    font-size: var(--s24_36);
    color: #fff;
    font-weight: bold;
    line-height: 1;
  }
  #container #contents .strengths_area .strengths_box dd {
    padding: var(--s8_42);
  }
  #container #contents .strengths_area .strengths_box dd .catch {
    font-size: var(--s16_20);
    padding-bottom: 0.5em;
    margin-bottom: 1.25em;
    border-bottom: var(--brown01) solid 2px;
    display: block;
    text-align: center;
  }
  #container #contents .strengths_area .strengths_box dd .text span {
    font-size: var(--s14_16);
  }
  #container #contents .strengths_area .strengths_box dd .text .strong {
    font-weight: bold;
  }
  #container #contents .main_section {
    margin-bottom: var(--m40);
  }
  #container #contents .main_section .accordion {
    cursor: pointer;
    padding: var(--s20_60);
    list-style: none;
    background-position: top 20% center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
    transition: background-size 0.5s;
  }
  #container #contents .main_section .accordion::after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
    background-color: var(--black01);
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: opacity 0.5s;
  }
  #container #contents .main_section .accordion .button {
    font-size: var(--s18_24);
    color: #fff;
    text-align: center;
  }
  #container #contents .main_section .accordion .button::before, #container #contents .main_section .accordion .button::after {
    content: "";
    display: inline-block;
    width: var(--s18_32);
    height: 2px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: var(--s8_32);
    transition: transform 0.5s;
  }
  #container #contents .main_section .accordion .button::after {
    transform: rotate(90deg);
  }
  #container #contents .main_section .accordion:hover {
    background-size: 110% auto;
  }
  #container #contents .main_section .accordion:hover::after {
    opacity: 0.8;
  }
  #container #contents .main_section[open] .accordion {
    margin-bottom: var(--m150);
  }
  #container #contents .main_section[open] .accordion .button::after {
    transform: rotate(0deg);
  }
  #container #contents .main_section.exterior .accordion {
    background-image: url(/images/exterior/sec01_exterior.jpg);
  }
  #container #contents .main_section.wall .accordion {
    background-image: url(/images/exterior/sec02_wall.jpg);
    background-position: bottom 30% center;
  }
  #container #contents .main_section.sun .accordion {
    background-image: url(/images/exterior/sec03_sun.jpg);
    background-position: bottom 35% center;
  }
  #container #contents .main_section.full .accordion {
    background-image: url(/images/interior/sec01_full.jpg);
    background-position: bottom 40% center;
  }
  #container #contents .main_section.contents .accordion {
    background-image: url(/images/interior/sec02_contents.jpg);
    background-position: bottom 40% center;
  }
  #container #contents .main_section.mizumawari .accordion {
    background-image: url(/images/interior/sec03_mizumawari.jpg);
    background-position: top 45% center;
  }
  #container #contents .main_section .title {
    margin-bottom: var(--m150);
  }
  #container #contents .main_section .title.mb {
    margin-bottom: var(--m90);
  }
  #container #contents .main_section .title .br {
    font-size: var(--s18_24);
    text-align: center;
    line-height: 1.75;
    letter-spacing: 3px;
  }
  #container #contents .main_section .features {
    margin: 0 auto;
    max-width: 1080px;
  }
  #container #contents .main_section .features .features_box {
    margin-bottom: var(--m250);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #container #contents .main_section .features .features_box:nth-of-type(even) {
    flex-direction: row-reverse;
  }
  #container #contents .main_section .features .features_box .text_area {
    width: 35.7%;
  }
  #container #contents .main_section .features .features_box .text_area .features_title {
    margin-bottom: var(--m50);
  }
  #container #contents .main_section .features .features_box .text_area .features_title .txt {
    font-size: var(--s16_20);
  }
  #container #contents .main_section .features .features_box .text_area .title_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    grid-gap: 0 var(--m50);
    margin-bottom: var(--m50);
  }
  #container #contents .main_section .features .features_box .text_area .title_row::after {
    content: "";
    display: inline-block;
    flex: auto;
    height: 1px;
    background-color: var(--brown01);
  }
  #container #contents .main_section .features .features_box .text_area .title_row .tit {
    display: flex;
    flex-direction: column;
    grid-gap: var(--s8_16);
  }
  #container #contents .main_section .features .features_box .text_area .title_row .tit img:nth-of-type(1) {
    width: var(--s100_140);
  }
  #container #contents .main_section .features .features_box .text_area .title_row .tit img:nth-of-type(2) {
    width: var(--s64_72);
  }
  #container #contents .main_section .features .features_box .text_area .text .br {
    font-size: var(--s14_16);
    line-height: 2;
    letter-spacing: 1px;
  }
  #container #contents .main_section .features .features_box .text_area .text .button {
    margin-top: var(--s16_24);
    max-width: -moz-fit-content;
    max-width: fit-content;
  }
  #container #contents .main_section .features .features_box .text_area .text .button a {
    position: relative;
    padding-right: var(--s16_42);
  }
  #container #contents .main_section .features .features_box .text_area .text .button a::before {
    content: "";
    background: var(--black01);
    width: 100%;
    height: 1px;
    transition: transform 0.5s cubic-bezier(0.8, 0, 0.2, 1) 0s;
    transform-origin: left top;
    transform: scale(1, 1);
    position: absolute;
    bottom: 0;
    left: 0;
  }
  #container #contents .main_section .features .features_box .text_area .text .button a::after {
    content: "";
    display: inline-block;
    width: var(--s14_16);
    height: 1px;
    background-color: var(--black01);
    position: absolute;
    bottom: 0;
    right: 0;
    transform-origin: bottom right;
    rotate: 45deg;
  }
  #container #contents .main_section .features .features_box .text_area .text .button a .txt {
    font-size: var(--s16_24);
    font-weight: 500;
  }
  #container #contents .main_section .features .features_box .text_area .text .button a:hover::before {
    transform: scale(0, 1);
    transform-origin: right top;
  }
  #container #contents .main_section .features .features_box .img {
    width: 57.4%;
  }
  #container #contents .main_section .common_list {
    margin-bottom: var(--m40);
  }
  #container #contents .main_section .capabilities {
    margin: 0 auto var(--m250);
    max-width: 1080px;
  }
  #container #contents .main_section .capabilities.mb {
    margin-bottom: var(--m100);
  }
  #container #contents .main_section .capabilities .title {
    font-size: var(--s18_24);
    color: #fff;
    background-color: var(--mainCol);
    text-align: center;
    padding: var(--s6_10) var(--s16_32);
    margin-bottom: var(--m40);
  }
  #container #contents .main_section .capabilities .capabilities_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    grid-gap: var(--m30) 4%;
    margin-bottom: var(--m24);
  }
  #container #contents .main_section .capabilities .capabilities_list li {
    width: 30.5%;
    font-size: var(--s14_16);
    padding: 0.5em 0.5em;
    text-align: center;
    background-color: var(--green01);
  }
  #container #contents .main_section .capabilities .txt {
    font-size: var(--s18_24);
    text-align: right;
    display: block;
  }
  #container #contents .main_section .other_list {
    display: flex;
    flex-wrap: wrap;
  }
  #container #contents .main_section .other_list dt {
    margin-bottom: var(--m40);
    width: 100%;
    font-size: var(--s16_20);
    color: var(--mainCol);
    display: flex;
    align-items: center;
    justify-content: space-between;
    grid-gap: 0 var(--s8_16);
    line-height: 1;
  }
  #container #contents .main_section .other_list dt::before, #container #contents .main_section .other_list dt::after {
    content: "";
    display: inline-block;
    flex: auto;
    height: 2px;
    background-color: var(--mainCol);
  }
  #container #contents .main_section .other_list dd {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    grid-gap: var(--m30) 4%;
  }
  #container #contents .main_section .other_list dd:not(:last-of-type) {
    margin-bottom: var(--m55);
  }
  #container #contents .main_section .other_list dd .br {
    width: 30.5%;
    font-size: var(--s14_16);
    padding: 0.5em 0.5em;
    text-align: center;
    background-color: var(--green01);
  }
  #container #contents .main_section .question_area {
    margin-bottom: var(--m150);
  }
  #container #contents .main_section .question_area .title {
    margin-bottom: var(--m80);
  }
  #container #contents .main_section .question_area .question_flex {
    padding: var(--s20_60) var(--s28_80);
    background-color: var(--gray09);
    display: flex;
    flex-wrap: wrap;
  }
  #container #contents .main_section .question_area .quetion_box {
    width: 50%;
    padding: var(--s16_42);
    background-color: #fff;
  }
  #container #contents .main_section .question_area .quetion_box:nth-of-type(1), #container #contents .main_section .question_area .quetion_box:nth-of-type(4) {
    background-color: var(--brown03);
  }
  #container #contents .main_section .question_area .quetion_box:nth-of-type(1) .tit::after, #container #contents .main_section .question_area .quetion_box:nth-of-type(4) .tit::after {
    background-color: var(--black01);
  }
  #container #contents .main_section .question_area .quetion_box .tit {
    display: flex;
    align-items: center;
    grid-gap: var(--s16_32);
    margin-bottom: var(--s32_64);
    position: relative;
  }
  #container #contents .main_section .question_area .quetion_box .tit::after {
    content: "";
    display: inline-block;
    width: var(--m62);
    height: var(--s3_6);
    background-color: var(--brown01);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 400%);
  }
  #container #contents .main_section .question_area .quetion_box .tit .num_area {
    display: flex;
    align-items: center;
    flex-direction: column;
    grid-gap: var(--s10_16);
  }
  #container #contents .main_section .question_area .quetion_box .tit .num_area img:nth-of-type(1) {
    width: var(--s80_100);
  }
  #container #contents .main_section .question_area .quetion_box .tit .num_area img:nth-of-type(2) {
    width: var(--s42_64);
  }
  #container #contents .main_section .question_area .quetion_box .tit .txt .br {
    font-size: var(--s16_18);
  }
  #container #contents .main_section .question_area .quetion_box .text .br {
    font-size: var(--s14_16);
    line-height: 2;
  }
  #container #contents .main_section .button_flex {
    margin-bottom: var(--m200);
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  #container #contents .main_section .button_flex .button {
    width: 30%;
    min-width: -moz-fit-content;
    min-width: fit-content;
  }
  #container #contents .main_section .button_flex .button a {
    position: relative;
    padding-right: var(--s16_42);
  }
  #container #contents .main_section .button_flex .button a::before {
    content: "";
    background: var(--black01);
    width: 100%;
    height: 1px;
    transition: transform 0.5s cubic-bezier(0.8, 0, 0.2, 1) 0s;
    transform-origin: left top;
    transform: scale(1, 1);
    position: absolute;
    bottom: 0;
    left: 0;
  }
  #container #contents .main_section .button_flex .button a::after {
    content: "";
    display: inline-block;
    width: var(--s14_16);
    height: 1px;
    background-color: var(--black01);
    position: absolute;
    bottom: 0;
    right: 0;
    transform-origin: bottom right;
    rotate: 45deg;
  }
  #container #contents .main_section .button_flex .button a .txt {
    font-size: var(--s16_24);
    font-weight: 500;
  }
  #container #contents .main_section .button_flex .button a:hover::before {
    transform: scale(0, 1);
    transform-origin: right top;
  }
  #container #contents .main_section .button_flex .button:nth-of-type(2) a img {
    width: var(--s24_48);
  }
  #container #contents .main_section .close {
    display: block;
    max-width: -moz-fit-content;
    max-width: fit-content;
    margin: 0 auto var(--m120);
    position: relative;
    font-size: var(--s16_24);
    color: #fff;
    background-color: var(--black01);
    padding: var(--s4_8) var(--m70);
    cursor: pointer;
    transition: background-color 0.5s;
  }
  #container #contents .main_section .close:hover {
    background-color: var(--mainBl_hov);
  }
  #container #contents .main_section .close::before, #container #contents .main_section .close::after {
    content: "";
    display: inline-block;
    width: var(--s18_24);
    height: 2px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: var(--s8_32);
    transition: transform 0.5s;
    transform: rotate(45deg);
  }
  #container #contents .main_section .close::after {
    transform: rotate(-45deg);
  }
  #container #contents .main_section .attention {
    margin-bottom: var(--m200);
    border: 2px dashed var(--mainCol);
    border-top: unset;
  }
  #container #contents .main_section .attention .attention_tit {
    font-size: var(--s18_24);
    text-align: center;
    color: var(--mainCol);
    transform: translateY(-60%);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  #container #contents .main_section .attention .attention_tit::before, #container #contents .main_section .attention .attention_tit::after {
    content: "";
    display: inline-block;
    width: 15%;
    height: 1px;
    border-bottom: 2px dashed var(--mainCol);
  }
  #container #contents .main_section .attention .txt {
    padding: var(--m21) var(--m40) var(--m40);
    font-size: var(--s14_16);
    color: var(--mainCol);
    line-height: 1.75;
  }
  #container #contents .main_section .merit {
    margin: 0 auto var(--m200);
    max-width: 1080px;
  }
  #container #contents .main_section .merit .title {
    font-size: var(--s18_24);
    color: var(--green01);
    background-color: var(--mainCol);
    text-align: center;
    padding: var(--s6_10) var(--s16_32);
    margin-bottom: var(--m40);
  }
  #container #contents .main_section .merit .merit_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    grid-gap: var(--m30) 4%;
    margin-bottom: var(--m24);
  }
  #container #contents .main_section .merit .merit_list li {
    width: 30.5%;
    font-size: var(--s16_18);
    padding: 0.5em 0.5em;
    border-bottom: 2px dotted var(--black03);
  }
  #container #contents .main_section .merit .txt {
    font-size: var(--s18_24);
    text-align: right;
    display: block;
  }
  #container #contents .main_section .simulation_area {
    margin: 0 auto var(--m200);
    max-width: 1080px;
    background-color: #fff;
  }
  #container #contents .main_section .simulation_area .title {
    font-size: var(--s18_24);
    color: var(--mainCol);
    background-color: var(--green01);
    text-align: center;
    padding: var(--s6_10) var(--s16_32);
    margin-bottom: var(--m40);
  }
  #container #contents .main_section .simulation_area picture {
    padding: var(--s16_42) var(--s24_80);
  }
  #container #contents .main_section .flow_area {
    margin: 0 auto var(--m200);
    max-width: 1080px;
  }
  #container #contents .main_section .flow_area .title {
    font-size: var(--s18_24);
    color: var(--mainCol);
    background-color: var(--green01);
    text-align: center;
    padding: var(--s6_10) var(--s16_32);
    margin-bottom: var(--m40);
  }
  #container #contents .main_section .flow_area figure {
    margin-bottom: var(--s24_32);
  }
  #container #contents .main_section .flow_area .bottom_area {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  #container #contents .main_section .flow_area .bottom_area .required {
    width: 37%;
    padding: var(--s10_18);
    border: 2px solid var(--mainCol);
  }
  #container #contents .main_section .flow_area .bottom_area .required dt {
    width: 100%;
    font-size: var(--s16_20);
    color: var(--mainCol);
  }
  #container #contents .main_section .flow_area .bottom_area .required .list {
    margin-bottom: var(--s8_16);
  }
  #container #contents .main_section .flow_area .bottom_area .required .list .br {
    font-size: var(--s14_18);
  }
  #container #contents .main_section .flow_area .bottom_area .required .attent .br {
    font-size: var(--s14_16);
  }
  #container #contents .main_section .flow_area .bottom_area .image_area {
    width: 28%;
    position: relative;
  }
  #container #contents .main_section .flow_area .bottom_area .image_area::before {
    content: "";
    display: inline-block;
    width: var(--s28_42);
    aspect-ratio: 2/1;
    background-color: var(--mainCol);
    -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    position: absolute;
    top: 0;
    left: var(--s16_24);
    transform: translateY(-98%);
  }
  #container #contents .main_section .flow_area .bottom_area .image_area .inner {
    aspect-ratio: 36/23;
    overflow: hidden;
    border: 2px solid var(--mainCol);
    margin-bottom: 0.5rem;
    width: 90%;
    max-width: 270px;
  }
  #container #contents .main_section .flow_area .bottom_area .image_area figcaption {
    font-size: var(--s14_16);
  }
  #container #contents .main_section .flow_area .bottom_area .image_area.img02 {
    width: 30%;
  }
}
/* ----------------------------------------------
　PAD以下設定
------------------------------------------------*/
@media all and (max-width: 768px) {
  #container .breadcrumb_area {
    margin-bottom: var(--m150);
  }
  #container #contents .common_area {
    margin-bottom: var(--m150);
    padding: var(--s32_100) var(--s20_60);
    background-color: var(--gray09);
  }
  #container #contents .common_area .title {
    margin-bottom: 1.25em;
    font-size: var(--s18_24);
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
    grid-gap: 0 var(--s8_16);
  }
  #container #contents .common_area .title::before, #container #contents .common_area .title::after {
    content: "";
    display: inline-block;
    flex: auto;
    height: 1px;
    background-color: var(--brown01);
  }
  #container #contents .capabilities_area {
    margin-bottom: var(--m120);
  }
  #container #contents .capabilities_area .capabilities_dl .row {
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }
  #container #contents .capabilities_area .capabilities_dl .row dt {
    padding: var(--s8_24);
    width: 100%;
    font-size: var(--s16_18);
    color: #fff;
    background-color: var(--black01);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #container #contents .capabilities_area .capabilities_dl .row dd {
    padding: 10px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    border: 1px solid var(--brown01);
  }
  #container #contents .capabilities_area .capabilities_dl .row dd .capabilities_txt {
    font-size: var(--s14_16);
    padding: 10px;
    width: 30%;
    background-color: var(--brown01);
    border-radius: 5px;
    text-align: center;
  }
  #container #contents .strengths_area .strengths_row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    grid-gap: var(--s16_24) 5%;
  }
  #container #contents .strengths_area .strengths_box {
    width: 47.5%;
    border: 1px solid var(--brown01);
    border-top: unset;
    background-color: #fff;
  }
  #container #contents .strengths_area .strengths_box dt {
    padding: var(--s10_12);
    display: flex;
    align-items: baseline;
    justify-content: center;
    grid-gap: 0.35em;
    width: 100%;
    background-color: var(--black01);
    font-size: var(--s14_18);
    color: #fff;
  }
  #container #contents .strengths_area .strengths_box dt .num {
    font-size: var(--s24_36);
    color: #fff;
    font-weight: bold;
    line-height: 1;
  }
  #container #contents .strengths_area .strengths_box dd {
    padding: var(--s8_42);
  }
  #container #contents .strengths_area .strengths_box dd .catch {
    font-size: var(--s16_20);
    padding-bottom: 0.5em;
    margin-bottom: 1.25em;
    border-bottom: var(--brown01) solid 2px;
    display: block;
    text-align: center;
  }
  #container #contents .strengths_area .strengths_box dd .text span {
    font-size: var(--s14_16);
  }
  #container #contents .strengths_area .strengths_box dd .text .strong {
    font-weight: bold;
  }
  #container #contents .main_section {
    margin-bottom: var(--m40);
  }
  #container #contents .main_section .accordion {
    cursor: pointer;
    padding: var(--s20_60);
    list-style: none;
    background-position: top 20% center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
    transition: background-size 0.5s;
  }
  #container #contents .main_section .accordion::after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
    background-color: var(--black01);
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: opacity 0.5s;
  }
  #container #contents .main_section .accordion .button {
    font-size: var(--s18_24);
    color: #fff;
    text-align: center;
  }
  #container #contents .main_section .accordion .button::before, #container #contents .main_section .accordion .button::after {
    content: "";
    display: inline-block;
    width: var(--s18_32);
    height: 2px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: var(--s8_32);
    transition: transform 0.5s;
  }
  #container #contents .main_section .accordion .button::after {
    transform: rotate(90deg);
  }
  #container #contents .main_section .accordion:hover {
    background-size: 110% auto;
  }
  #container #contents .main_section .accordion:hover::after {
    opacity: 0.8;
  }
  #container #contents .main_section[open] .accordion {
    margin-bottom: var(--m150);
  }
  #container #contents .main_section[open] .accordion .button::after {
    transform: rotate(0deg);
  }
  #container #contents .main_section.exterior .accordion {
    background-image: url(/images/exterior/sec01_exterior.jpg);
  }
  #container #contents .main_section.wall .accordion {
    background-image: url(/images/exterior/sec02_wall.jpg);
    background-position: bottom 30% center;
  }
  #container #contents .main_section.sun .accordion {
    background-image: url(/images/exterior/sec03_sun.jpg);
    background-position: bottom 35% center;
  }
  #container #contents .main_section.full .accordion {
    background-image: url(/images/interior/sec01_full.jpg);
    background-position: bottom 40% center;
  }
  #container #contents .main_section.contents .accordion {
    background-image: url(/images/interior/sec02_contents.jpg);
    background-position: bottom 40% center;
  }
  #container #contents .main_section.mizumawari .accordion {
    background-image: url(/images/interior/sec03_mizumawari.jpg);
    background-position: top 45% center;
  }
  #container #contents .main_section .title {
    margin-bottom: var(--m150);
  }
  #container #contents .main_section .title.mb {
    margin-bottom: var(--m90);
  }
  #container #contents .main_section .title .br {
    font-size: var(--s18_24);
    text-align: center;
    line-height: 1.75;
    letter-spacing: 3px;
  }
  #container #contents .main_section .features {
    margin: 0 auto;
    max-width: 1080px;
  }
  #container #contents .main_section .features .features_box {
    margin-bottom: var(--m250);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #container #contents .main_section .features .features_box:nth-of-type(even) {
    flex-direction: row-reverse;
  }
  #container #contents .main_section .features .features_box .text_area {
    width: 50%;
  }
  #container #contents .main_section .features .features_box .text_area .features_title {
    margin-bottom: var(--m50);
  }
  #container #contents .main_section .features .features_box .text_area .features_title .txt {
    font-size: var(--s16_20);
  }
  #container #contents .main_section .features .features_box .text_area .title_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    grid-gap: 0 var(--m50);
    margin-bottom: var(--m50);
  }
  #container #contents .main_section .features .features_box .text_area .title_row::after {
    content: "";
    display: inline-block;
    flex: auto;
    height: 1px;
    background-color: var(--brown01);
  }
  #container #contents .main_section .features .features_box .text_area .title_row .tit {
    display: flex;
    flex-direction: column;
    grid-gap: var(--s8_16);
  }
  #container #contents .main_section .features .features_box .text_area .title_row .tit img:nth-of-type(1) {
    width: var(--s100_140);
  }
  #container #contents .main_section .features .features_box .text_area .title_row .tit img:nth-of-type(2) {
    width: var(--s64_72);
  }
  #container #contents .main_section .features .features_box .text_area .text .br {
    font-size: var(--s14_16);
    line-height: 2;
    letter-spacing: 1px;
  }
  #container #contents .main_section .features .features_box .text_area .text .button {
    margin-top: var(--s16_24);
    max-width: -moz-fit-content;
    max-width: fit-content;
  }
  #container #contents .main_section .features .features_box .text_area .text .button a {
    position: relative;
    padding-right: var(--s16_42);
  }
  #container #contents .main_section .features .features_box .text_area .text .button a::before {
    content: "";
    background: var(--black01);
    width: 100%;
    height: 1px;
    transition: transform 0.5s cubic-bezier(0.8, 0, 0.2, 1) 0s;
    transform-origin: left top;
    transform: scale(1, 1);
    position: absolute;
    bottom: 0;
    left: 0;
  }
  #container #contents .main_section .features .features_box .text_area .text .button a::after {
    content: "";
    display: inline-block;
    width: var(--s14_16);
    height: 1px;
    background-color: var(--black01);
    position: absolute;
    bottom: 0;
    right: 0;
    transform-origin: bottom right;
    rotate: 45deg;
  }
  #container #contents .main_section .features .features_box .text_area .text .button a .txt {
    font-size: var(--s16_24);
    font-weight: 500;
  }
  #container #contents .main_section .features .features_box .text_area .text .button a:hover::before {
    transform: scale(0, 1);
    transform-origin: right top;
  }
  #container #contents .main_section .features .features_box .img {
    width: 47%;
  }
  #container #contents .main_section .common_list {
    margin-bottom: var(--m40);
  }
  #container #contents .main_section .capabilities {
    margin: 0 auto var(--m250);
    max-width: 1080px;
  }
  #container #contents .main_section .capabilities.mb {
    margin-bottom: var(--m100);
  }
  #container #contents .main_section .capabilities .title {
    font-size: var(--s18_24);
    color: #fff;
    background-color: var(--mainCol);
    text-align: center;
    padding: var(--s6_10) var(--s16_32);
    margin-bottom: var(--m40);
  }
  #container #contents .main_section .capabilities .capabilities_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    grid-gap: var(--m30) 4%;
    margin-bottom: var(--m24);
  }
  #container #contents .main_section .capabilities .capabilities_list li {
    width: 48%;
    font-size: var(--s14_16);
    padding: 0.5em 0.5em;
    text-align: center;
    background-color: var(--green01);
  }
  #container #contents .main_section .capabilities .txt {
    font-size: var(--s18_24);
    text-align: right;
    display: block;
  }
  #container #contents .main_section .other_list {
    display: flex;
    flex-wrap: wrap;
  }
  #container #contents .main_section .other_list dt {
    margin-bottom: var(--m40);
    width: 100%;
    font-size: var(--s16_20);
    color: var(--mainCol);
    display: flex;
    align-items: center;
    justify-content: space-between;
    grid-gap: 0 var(--s8_16);
    line-height: 1;
  }
  #container #contents .main_section .other_list dt::before, #container #contents .main_section .other_list dt::after {
    content: "";
    display: inline-block;
    flex: auto;
    height: 2px;
    background-color: var(--mainCol);
  }
  #container #contents .main_section .other_list dd {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    grid-gap: var(--m30) 4%;
  }
  #container #contents .main_section .other_list dd:not(:last-of-type) {
    margin-bottom: var(--m55);
  }
  #container #contents .main_section .other_list dd .br {
    width: 48%;
    font-size: var(--s14_16);
    padding: 0.5em 0.5em;
    text-align: center;
    background-color: var(--green01);
  }
  #container #contents .main_section .question_area {
    margin-bottom: var(--m150);
  }
  #container #contents .main_section .question_area .title {
    margin-bottom: var(--m80);
  }
  #container #contents .main_section .question_area .question_flex {
    padding: var(--s20_60) var(--s28_80);
    background-color: var(--gray09);
    display: flex;
    flex-wrap: wrap;
  }
  #container #contents .main_section .question_area .quetion_box {
    width: 50%;
    padding: var(--s16_42);
    background-color: #fff;
  }
  #container #contents .main_section .question_area .quetion_box:nth-of-type(1), #container #contents .main_section .question_area .quetion_box:nth-of-type(4) {
    background-color: var(--brown03);
  }
  #container #contents .main_section .question_area .quetion_box:nth-of-type(1) .tit::after, #container #contents .main_section .question_area .quetion_box:nth-of-type(4) .tit::after {
    background-color: var(--black01);
  }
  #container #contents .main_section .question_area .quetion_box .tit {
    display: flex;
    align-items: center;
    grid-gap: var(--s16_32);
    margin-bottom: var(--s32_64);
    position: relative;
  }
  #container #contents .main_section .question_area .quetion_box .tit::after {
    content: "";
    display: inline-block;
    width: var(--m62);
    height: var(--s3_6);
    background-color: var(--brown01);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 400%);
  }
  #container #contents .main_section .question_area .quetion_box .tit .num_area {
    display: flex;
    align-items: center;
    flex-direction: column;
    grid-gap: var(--s10_16);
  }
  #container #contents .main_section .question_area .quetion_box .tit .num_area img:nth-of-type(1) {
    width: var(--s72_100);
  }
  #container #contents .main_section .question_area .quetion_box .tit .num_area img:nth-of-type(2) {
    width: var(--s32_64);
  }
  #container #contents .main_section .question_area .quetion_box .tit .txt .br {
    font-size: var(--s16_18);
  }
  #container #contents .main_section .question_area .quetion_box .text .br {
    font-size: var(--s14_16);
    line-height: 2;
  }
  #container #contents .main_section .button_flex {
    margin-bottom: var(--m200);
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    grid-gap: 1rem;
  }
  #container #contents .main_section .button_flex .button {
    width: 30%;
    min-width: -moz-fit-content;
    min-width: fit-content;
  }
  #container #contents .main_section .button_flex .button a {
    position: relative;
    padding-right: var(--s16_42);
  }
  #container #contents .main_section .button_flex .button a::before {
    content: "";
    background: var(--black01);
    width: 100%;
    height: 1px;
    transition: transform 0.5s cubic-bezier(0.8, 0, 0.2, 1) 0s;
    transform-origin: left top;
    transform: scale(1, 1);
    position: absolute;
    bottom: 0;
    left: 0;
  }
  #container #contents .main_section .button_flex .button a::after {
    content: "";
    display: inline-block;
    width: var(--s14_16);
    height: 1px;
    background-color: var(--black01);
    position: absolute;
    bottom: 0;
    right: 0;
    transform-origin: bottom right;
    rotate: 45deg;
  }
  #container #contents .main_section .button_flex .button a .txt {
    font-size: var(--s16_24);
    font-weight: 500;
  }
  #container #contents .main_section .button_flex .button a:hover::before {
    transform: scale(0, 1);
    transform-origin: right top;
  }
  #container #contents .main_section .button_flex .button:nth-of-type(2) a img {
    width: var(--s24_48);
  }
  #container #contents .main_section .close {
    display: block;
    max-width: -moz-fit-content;
    max-width: fit-content;
    margin: 0 auto var(--m120);
    position: relative;
    font-size: var(--s16_24);
    color: #fff;
    background-color: var(--black01);
    padding: var(--s4_8) var(--m70);
    cursor: pointer;
    transition: background-color 0.5s;
  }
  #container #contents .main_section .close:hover {
    background-color: var(--mainBl_hov);
  }
  #container #contents .main_section .close::before, #container #contents .main_section .close::after {
    content: "";
    display: inline-block;
    width: var(--s18_24);
    height: 2px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: var(--s8_32);
    transition: transform 0.5s;
    transform: rotate(45deg);
  }
  #container #contents .main_section .close::after {
    transform: rotate(-45deg);
  }
  #container #contents .main_section .attention {
    margin-bottom: var(--m200);
    border: 2px dashed var(--mainCol);
    border-top: unset;
  }
  #container #contents .main_section .attention .attention_tit {
    font-size: var(--s18_24);
    text-align: center;
    color: var(--mainCol);
    transform: translateY(-60%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    grid-gap: 0 0.5rem;
    white-space: nowrap;
  }
  #container #contents .main_section .attention .attention_tit::before, #container #contents .main_section .attention .attention_tit::after {
    content: "";
    display: inline-block;
    width: 15%;
    height: 1px;
    border-bottom: 2px dashed var(--mainCol);
  }
  #container #contents .main_section .attention .txt {
    padding: var(--m21) var(--m40) var(--m40);
    font-size: var(--s14_16);
    color: var(--mainCol);
    line-height: 1.75;
  }
  #container #contents .main_section .merit {
    margin: 0 auto var(--m200);
    max-width: 1080px;
  }
  #container #contents .main_section .merit .title {
    font-size: var(--s18_24);
    color: var(--green01);
    background-color: var(--mainCol);
    text-align: center;
    padding: var(--s6_10) var(--s16_32);
    margin-bottom: var(--m40);
  }
  #container #contents .main_section .merit .merit_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    grid-gap: var(--m30) 4%;
    margin-bottom: var(--m24);
  }
  #container #contents .main_section .merit .merit_list li {
    width: 48%;
    font-size: var(--s16_18);
    padding: 0.5em 0.5em;
    border-bottom: 2px dotted var(--black03);
  }
  #container #contents .main_section .merit .txt {
    font-size: var(--s18_24);
    text-align: right;
    display: block;
  }
  #container #contents .main_section .simulation_area {
    margin: 0 auto var(--m200);
    max-width: 1080px;
    background-color: #fff;
  }
  #container #contents .main_section .simulation_area .title {
    font-size: var(--s18_24);
    color: var(--mainCol);
    background-color: var(--green01);
    text-align: center;
    padding: var(--s6_10) var(--s16_32);
    margin-bottom: var(--m40);
  }
  #container #contents .main_section .simulation_area picture {
    padding: var(--s16_42) var(--s24_80);
  }
  #container #contents .main_section .flow_area {
    margin: 0 auto var(--m200);
    max-width: 1080px;
  }
  #container #contents .main_section .flow_area .title {
    font-size: var(--s18_24);
    color: var(--mainCol);
    background-color: var(--green01);
    text-align: center;
    padding: var(--s6_10) var(--s16_32);
    margin-bottom: var(--m40);
  }
  #container #contents .main_section .flow_area figure {
    margin-bottom: var(--s24_32);
  }
  #container #contents .main_section .flow_area .bottom_area {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  #container #contents .main_section .flow_area .bottom_area .required {
    width: 37%;
    padding: var(--s10_18);
    border: 2px solid var(--mainCol);
  }
  #container #contents .main_section .flow_area .bottom_area .required dt {
    width: 100%;
    font-size: var(--s16_20);
    color: var(--mainCol);
  }
  #container #contents .main_section .flow_area .bottom_area .required .list {
    margin-bottom: var(--s8_16);
  }
  #container #contents .main_section .flow_area .bottom_area .required .list .br {
    font-size: var(--s14_18);
  }
  #container #contents .main_section .flow_area .bottom_area .required .attent .br {
    font-size: var(--s14_16);
  }
  #container #contents .main_section .flow_area .bottom_area .image_area {
    width: 28%;
    position: relative;
  }
  #container #contents .main_section .flow_area .bottom_area .image_area::before {
    content: "";
    display: inline-block;
    width: var(--s28_42);
    aspect-ratio: 2/1;
    background-color: var(--mainCol);
    -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    position: absolute;
    top: 0;
    left: var(--s16_24);
    transform: translateY(-98%);
  }
  #container #contents .main_section .flow_area .bottom_area .image_area .inner {
    aspect-ratio: 36/23;
    overflow: hidden;
    border: 2px solid var(--mainCol);
    margin-bottom: 0.5rem;
    width: 90%;
    max-width: 270px;
  }
  #container #contents .main_section .flow_area .bottom_area .image_area figcaption {
    font-size: var(--s14_16);
  }
  #container #contents .main_section .flow_area .bottom_area .image_area.img02 {
    width: 30%;
  }
}
/* ----------------------------------------------
　SP調整
------------------------------------------------*/
@media all and (max-width: 620px) {
  #container #contents .common_area {
    padding: var(--s32_100) 14px;
  }
  #container #contents .capabilities_area .capabilities_dl .row dd {
    grid-gap: 0.5rem;
  }
  #container #contents .capabilities_area .capabilities_dl .row dd .capabilities_txt {
    width: 100%;
  }
  #container #contents .strengths_area .strengths_box {
    width: 100%;
  }
  #container #contents .main_section .features .features_box {
    flex-wrap: wrap;
    grid-gap: 2rem;
  }
  #container #contents .main_section .features .features_box .text_area {
    width: 100%;
  }
  #container #contents .main_section .features .features_box .text_area .title_row {
    justify-content: center;
  }
  #container #contents .main_section .features .features_box .text_area .title_row .tit {
    flex-direction: row;
    align-items: baseline;
  }
  #container #contents .main_section .features .features_box .text_area .title_row::after {
    content: unset;
  }
  #container #contents .main_section .features .features_box .text_area .features_title .txt {
    text-align: center;
  }
  #container #contents .main_section .features .features_box .text_area .text .br {
    letter-spacing: 0;
  }
  #container #contents .main_section .features .features_box .text_area .text .button {
    margin: var(--s16_24) auto 0;
  }
  #container #contents .main_section .features .features_box .img {
    width: 100%;
  }
  #container #contents .main_section .capabilities .capabilities_list li {
    width: 100%;
  }
  #container #contents .main_section .other_list dd .br {
    width: 100%;
  }
  #container #contents .main_section .question_area .question_flex {
    padding: 16px 12px;
  }
  #container #contents .main_section .question_area .question_flex .quetion_box {
    width: 100%;
  }
  #container #contents .main_section .question_area .question_flex .quetion_box:nth-of-type(odd) {
    background-color: var(--brown03);
  }
  #container #contents .main_section .question_area .question_flex .quetion_box:nth-of-type(even) {
    background-color: #fff;
  }
  #container #contents .main_section .question_area .question_flex .quetion_box .tit {
    flex-direction: column;
    align-items: center;
  }
  #container #contents .main_section .question_area .question_flex .quetion_box .tit .num_area {
    flex-direction: row;
  }
  #container #contents .main_section .question_area .question_flex .quetion_box .tit .txt .br {
    display: inline;
  }
  #container #contents .main_section .attention .attention_tit {
    white-space: wrap;
  }
  #container #contents .main_section .attention .txt {
    margin-top: -2em;
  }
  #container #contents .main_section .merit .merit_list li {
    width: 100%;
  }
  #container #contents .main_section .simulation_area picture {
    padding: var(--s16_42) 0;
  }
  #container #contents .main_section .flow_area .scroll {
    width: 100%;
  }
  #container #contents .main_section .flow_area .scroll figure, #container #contents .main_section .flow_area .scroll .bottom_area {
    min-width: 620px;
  }
}