@charset "UTF-8";

.layer_rich_main figure::after{background: linear-gradient(to right,rgba(137,97,41,0.8) 20%,transparent 50%);}

#contents{}
#contents > div:nth-of-type(n+2){margin-top: 3.5em;}
.item_tit{font-size: 1em;font-weight: 600;line-height: 1.3;animation-name: fadeInUp;}
.item_tit + p{font-size: 0.75em;animation-name: fadeInUp;}
.item_tit + *{margin-top: 0.8em;}

.performance_item{display: flex;justify-content: space-between;flex-wrap: wrap;gap: 1.5em 0;}
.performance_item > li{width: 25em;background: #e4ede9;animation-name: fadeInUp;}
.performance_item > li dl{display: flex;flex-wrap: wrap;justify-content: space-between;}
.performance_item > li dt{background: #007774;font-size: 1em;letter-spacing: 0.05em;padding: 0.5em 0;color: #fff;width: 5.5em;display: flex;justify-content: center;align-items: center;text-align: center;}
.performance_item > li dt big{font-size: 2.4em;font-family: "Public Sans", sans-serif;font-weight: 600;line-height: 1;vertical-align: -0.2em;margin-left: 0.1em;}
.performance_item > li dt p{color: #fff462;letter-spacing: 0;}
.performance_item > li dd:nth-of-type(1){width: calc(100% - 6.2em);align-self: center;}
.performance_item > li dd:nth-of-type(1) strong{font-size: 1.3em;font-weight: 600;display: block;line-height: 1.1;}
.performance_item > li dd:nth-of-type(1) strong small{font-size: 0.6em;font-weight: 300;display: block;margin-top: 0.2em;}
.performance_item > li dd:nth-of-type(1) p{font-size: 0.65em;margin-top: 0.3em;}
.performance_item > li dd:nth-of-type(2){font-size: 0.75em;padding: 1em;}
.insulation_item{display: grid;grid-template-columns: 25em 25em;justify-content: space-between;gap: 1em 0;}
.insulation_item > li{background: #e4ede9;padding: 1em;animation-name: fadeInUp;}
.insulation_item > li.low-e{display: flex;justify-content: space-between;}
.insulation_item > li.low-e .item_tit{width: 10em;}
.insulation_item > li.low-e figure{width: 12.5em;padding: 1.5em 0}
.insulation_item > li.low-e figure .cap_b{right: 0;bottom: 0;}
.insulation_item > li.low-e div{font-size: 0.87em; width: 11.5em;position: absolute;left: 1em;bottom: 1em;color: #fff;background: #62885e;padding: 0.5em;text-align: center;}
.insulation_item > li.low-e div small{font-size: 0.8em;display: block;}
.insulation_item > li.low-e div > big{font-size: 1.2em;display: inline-block;}
.insulation_item > li.low-e div > big strong{color: #fff462;}
.insulation_item > li.low-e div > big strong big{font-size: 1.17em;line-height: 1;}
.insulation_item > li.low-e div > big [data-ruby]{position: relative;}
.insulation_item > li.low-e div > big [data-ruby]::before{content: attr(data-ruby);position: absolute;top: -1.2em;right: 0;font-size: 0.4em;}
.insulation_item > li.bath .bath_item{display: flex;justify-content: space-between;}
.insulation_item > li.bath .bath_item > *{width: 48%;display: flex;flex-direction: column;align-content: flex-start;}
.insulation_item > li.bath .bath_item > * h6{font-size: 0.9em;background: #fff;padding: 0.3em;text-align: center;width: 100%;}
.insulation_item > li.bath .bath_item > dd h6{color: #e60012;}
.insulation_item > li.bath .bath_item > * h6 + p{font-size: 0.75em;margin: 1em 0 1em;width: 100%;text-align: center;}
.insulation_item > li.bath .bath_item > * figure{width: 10.05em;margin: auto auto 0 auto;}
.insulation_item > li.sash{grid-row: 1/3;grid-column: 2/3;}
.insulation_item > li.sash .sash_img{display: flex;justify-content: center;align-items: center;gap: 0 2em;}
.insulation_item > li.sash .sash_img > figure:nth-of-type(1){width: 3.05em;margin: 2em -2em 0 0;}
.insulation_item > li.sash .sash_img > figure:nth-of-type(2){width: 4.9em;}
.insulation_item > li.sash .sash_img > figure:nth-of-type(3){width: 13em;}
.insulation_item > li.sash .sash_item{display: flex;justify-content: space-between;margin-top: 1.5em;}
.insulation_item > li.sash .sash_item dt{width: 11em;}
.insulation_item > li.sash .sash_item .item_tit + p strong{color: #d8a400;}
.insulation_item > li.sash .sash_item dd{width: 11em;}
.evaluation_item{display: flex;justify-content: space-between;}
.evaluation_item > dt{width: 14em;animation-name: fadeInUp;}
.evaluation_item > dt .item_tit{text-align: center;}
.evaluation_item > dt figure{width: 9.75em;margin-inline: auto;}
.evaluation_item > dt p{font-size: 0.75em;margin-top: 0.8em;}
.evaluation_item > dd{width: 35em;background: #e4ede9;padding: 1em;animation-name: fadeInUp;}
.evaluation_item > dd h5{font-size: 1.2em;color: #fff;text-align: center;padding: 0.1em;background: #62885e;}
.evaluation_item > dd .merit_item{display: flex;justify-content: space-between;flex-wrap: wrap;gap: 0.7em 0; margin-top: 0.8em;}
.evaluation_item > dd .merit_item li{width: 100%;}
.evaluation_item > dd .merit_item li h6 span{font-size: 1em;font-weight: 600;padding-left: 2.2em;}
.evaluation_item > dd .merit_item li h6 i{position: absolute;left: 0;top: -0.1em; line-height: 1;color: #b28500;font-weight: 400;font-family: "Oswald", sans-serif;font-style: italic;font-size: 3em;}
.evaluation_item > dd .merit_item li h6 + p{font-size: 0.75em;margin: 0.3em 0 0 3em;}
#jio_jhs{background: #f7f7f7;padding: 3.5em 0;}
.jio_logo{width: 30em;margin-inline: auto;}
.jio_item{display: flex;justify-content: space-between;align-items: center; margin-top: 1.5em;}
.jio_item > dt{width: 23em;animation-name: fadeInUp;}
.jio_item > dd{width: 26.5em;animation-name: fadeInUp;}
.jhs_logo{width: 35em;margin: 3em auto 0;mix-blend-mode: multiply;}
.jhs_item{display: flex;justify-content: space-between;margin-top: 2em;}
.jhs_item > dt{width: 20em;animation-name: fadeInUp;}
.jhs_item > dd{width: 30em;animation-name: fadeInUp;background: #e4ede9;padding: 1em;}
.jhs_item > dd h6{font-size: 1.2em;color: #fff;text-align: center;padding: 0.1em;background: #62885e;}
.jhs_item > dd figure{width: 28em;margin: 0.8em auto 0;}
.afterfollow_img{margin: 1.5em auto 0;width: 82em;padding: 0 1em;animation-name: fadeInUp;}

@media screen and (min-width: 769px) {
.performance_item > li:nth-of-type(even){animation-delay: 0.3s;}
.insulation_item > li.sash{animation-delay: 0.3s;}
.evaluation_item > dd{animation-delay: 0.6s;}
.jio_item > dd{animation-delay: 0.3s;}
.jhs_item > dd{animation-delay: 0.3s;}
}

@media screen and (min-width: 769px) and (max-width: 1640px) {
.afterfollow_img{width: 100%;}
}

@media screen and (max-width: 768px) {
#contents > div:nth-of-type(n+2){margin-top: 10vw;}
.item_tit{font-size: 3.7vw;}
.item_tit + p{font-size: 3.5vw;}

.performance_item{flex-wrap: wrap;gap: 3vw 0;}
.performance_item > li{width: 49%;}
.performance_item > li dt{font-size: 3.1vw;letter-spacing: 0em;width: 38%;}
.performance_item > li dd:nth-of-type(1){width: 61%;}
.performance_item > li dd:nth-of-type(1) strong{font-size: 3.8vw;}
.performance_item > li dd:nth-of-type(1) p{font-size: 2.2vw;line-height: 1.3;}
.performance_item > li dd:nth-of-type(2){font-size: 0.75em;padding: 1em;}
.insulation_item{display: flex;flex-wrap: wrap;gap: 1em 0;}
.insulation_item > li.low-e{flex-wrap: wrap;justify-content: flex-end;}
.insulation_item > li.low-e .item_tit{width: 100%;}
.insulation_item > li.low-e figure{width: 55%;margin-top: 3vw;padding: 0;}
.insulation_item > li.low-e div{padding: 0.5em 0.2em;width: auto;}
.insulation_item > li.sash{}
.insulation_item > li.sash .sash_img{gap: 0 2em;font-size: 3.3vw;}
.insulation_item > li.sash .sash_item dt{width: 55%;}
.insulation_item > li.sash .sash_item .item_tit{white-space: nowrap;}
.insulation_item > li.sash .sash_item dd{width: 43%;align-self: center;}
.evaluation_item{flex-wrap: wrap;}
.evaluation_item > dt{width: 100%;display: grid;grid-template-columns: 50% 47%;justify-content: space-between;}
.evaluation_item > dt figure{grid-row: 1/3;grid-column: 2/3;margin-top: 0!important;}
.evaluation_item > dd{width: 100%;margin-top: 3vw;}
.evaluation_item > dd h5{font-size: 4.2vw;}
.evaluation_item > dd .merit_item{flex-wrap: wrap;gap: 3vw 0;}
.evaluation_item > dd .merit_item li{width: 100%;}
#jio_jhs{padding: 10vw 0;}
.jio_logo{width: 80vw;}
.jio_item{justify-content: center;flex-wrap: wrap;gap: 3vw 0;margin-top: 3vw;}
.jio_item > dt{width: 100%;}
.jio_item > dd{width: 100%;}
.jhs_logo{width: 80vw;margin: 10vw auto 0;}
.jhs_item{justify-content: center;flex-wrap: wrap;gap: 3vw 0;margin-top: 3vw;}
.jhs_item > dt{width: 100%;}
.jhs_item > dd{width: 100%;}
.jhs_item > dd h6{font-size: 4.2vw;}
.jhs_item > dd figure{width: 100%;}
.afterfollow_img{margin: 3vw auto 0;width: calc(100vw - 8vw);padding: 0;}
.afterfollow_img img{height: 70vw;max-width: none;}
}