@charset "UTF-8";

html,body{font-size: 16px;}
article{font-family: YakuHanJP,'Noto Sans JP', sans-serif;letter-spacing: 0.05em;}

@media screen and (min-width: 769px) and (max-width: 1064px) {
html,body{font-size: 1.5vw;}
}

@media screen and (max-width: 768px) {
html,body{font-size: 13px;}
}

/* メイン */
main figure img{width: 100%;}
.main_item{position: absolute;right: 6%;bottom: 16%;font-size: 1.46vw;display: flex;flex-wrap: wrap;justify-content: space-around;width: 35%;opacity: 0;animation: 3s fadeIn 0.5s forwards;}
.main_item h2{width: 100%;}
.main_item h2 + p{margin-top: 1em;text-align: center;line-height: 1.7;}
.main_item a{width: 45%;margin-top: 1em;text-align: center;border-radius: 0.5em;color: #fff;font-size: 0.85em;padding: 0.5em 0 0.7em;}
.main_item a::after{content: "";width: 0.8em;height: 0.8em;border-right: 3px solid #fff;border-bottom: 3px solid #fff;display: block;margin: 0 auto;transform: rotate(45deg);transition: 0.3s all;}
.main_item a:nth-of-type(1){background: #e5834d;}
.main_item a:nth-of-type(2){background: #82bc5a;}


@media screen and (min-width: 769px) {
.main_item a:hover::after{transform: translateY(0.2em) rotate(45deg);}
}

@media screen and (max-width: 768px) {
main{height: 100vw;overflow: hidden;}
main figure{height: 100%;}
main figure img{width: auto;height: 100%;left: 60%;transform: translateX(-50%);max-width: none;}
.main_item{font-size: 3.5vw;width: 56%;right: 3%;}
.main_item h2{filter: drop-shadow(0 0 0.2em #fff);}
.main_item h2 + p{text-shadow: 0 0 0.2em #fff,0 0 0.2em #fff;}
.main_item a{width: 80%;}
.main_item a::after{border-right: 2px solid #fff;border-bottom: 2px solid #fff;}
}


/* コンテンツ共通 */
.contents_main h2{font-size: 4.17vw;text-align: center;color: #fff;position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: 100%;line-height: 1.4;z-index: 1;animation-name: fadeIn;animation-delay: 1.5s;}/* font-size: 80px; */
.contents_main h2 small{font-size: 0.7em;font-weight: 400;display: block;text-shadow: 0 0 0.1em rgba(0,0,0,0.5),0 0 0.1em rgba(0,0,0,0.5),0 0 0.1em rgba(0,0,0,0.5);font-family: "EB Garamond", serif;}
.contents_main h2 span{font-weight: 500;}
.contents_main figure img{width: 100%;}
.contents_main i{display: block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;background: rgba(255,255,255,0.7);animation-name: fadeIn;animation-duration: 3s;}

.intro{animation-name: fadeInUp;}
.intro_main h2{animation-name: fadeInRight;position: absolute;right: 5%;top: 17%;animation-delay: 0.5s;}
.intro_main h2 img{height: 6.25vw;}
.intro_main figure img{width: 100%;}
.intro_main i{display: block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;background: linear-gradient(35deg,transparent 70%,#fff 80%);animation-name: fadeIn;animation-duration: 2s;}

.check_item{animation-name: fadeInUp;margin-top: 3.4rem;}
.check_tit{padding: 0.4em 0;color: #fff;font-size: 2.25rem;}
.check_tit div{line-height: 1;border-bottom: 1px solid #fff;text-align: center;letter-spacing: 0.1em;overflow: hidden;padding-top: 0.3em;}
.check_tit div::before{content: "";position: absolute;left: 10%;bottom: -1px;width: 2.7em;height: 1.3em;background: url("../img/check.svg") no-repeat center center/contain;display: block;}
.check_tit div span{display: inline-block;animation-name: fadeInUp;animation-delay: 0.2s;font-size: 1em;}
.check_point{padding: 1.2em 0.5em;text-align: center;font-size: 1.5rem;animation-name: fadeInUp;}/* font-size: 24px; */
.check_point ul{display: inline-block;}
.check_point ul li{text-align: left;padding-left: 0.7em;border-left: 0.4em solid;}
.check_point ul li:nth-of-type(n+2){margin-top: 1em;}
.check_point + *{margin-top: 2rem;}

.point_main{font-size: 2.76vw;overflow: hidden;margin-top: 5.625rem;}/* font-size: 53px; */
.point_main h3{position: absolute;left: 3%;bottom: 9.5%;animation-name: fadeInLeft;}
.point_main h3 small{font-size: 0.8em;color: #fff;text-shadow: 0 0 0.2em rgba(0,0,0,0.5),0 0 0.2em rgba(0,0,0,0.5),0 0 0.2em rgba(0,0,0,0.5);display: block;font-family: "EB Garamond", serif;}
.point_main h3 span{font-size: 1em;color: #333;text-shadow: 0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff,0 0 0.2em #fff;}
.point_contents{animation-name: fadeInUp;}
.point_contents_tit{font-size: 1.5rem;padding: 0.5em 0 0.5em 1em;border-left: 0.4em solid;text-align: left;}/* font-size: 24px; */
.point_contents_tit::before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;clip-path: polygon(0 0, 100% 0, 0 100%);}
.point_contents_tit span{z-index: 1;}
.point_contents_wrap{display: inline-block;margin-top: 1.5rem;}
.point_contents_wrap img{width: 600px;}

figure + p{margin-top: 1em;}

@media screen and (max-width: 768px) {
.contents_main{overflow: hidden;height: 70vw;}
.contents_main h2{font-size: 8vw;}
.contents_main figure{height: 100%;}
.contents_main figure img{width: auto;height: 100%;left: 50%;transform: translateX(-50%);max-width: none;}

.intro_main{overflow: hidden;height: 70vw;}
.intro_main h2{right: 3%;top: 10%;}
.intro_main h2 img{height: 12vw;}
.intro_main figure{height: 100%;}
.intro_main figure img{width: auto;height: 100%;left: 50%;transform: translateX(-50%);max-width: none;}
.intro_main i{background: linear-gradient(35deg,transparent 50%,#fff 80%);}

.check_item{margin-top: 2.5rem;}
.check_tit{padding: 0.6em 0;color: #fff;font-size: 1.6rem;}
.check_tit div{text-align: left;padding: 0.2em 0 0 5rem;}
.check_tit div::before{left: 2%;font-size: 0.8em;}
.check_point{font-size: 1.15rem;}

.point_main{font-size: 4.5vw;overflow: hidden;margin-top: 3rem;height: 70vw;}
.point_main h3{bottom: 7%;}
.point_main figure{height: 100%;}
.point_main figure img{width: auto;height: 100%;left: 50%;transform: translateX(-50%);max-width: none;}
.point_contents_tit{font-size: 1.2rem;padding: 0.5em 0 0.5em 0.7em;}
.point_contents_wrap{margin-top: 1.5rem;}

figure + p{margin-top: 1em;}
}


/* 夏涼しく冬暖かい家 */
#cool_summer{padding-top: 0;margin-top: 5rem;}
#cool_summer .contents_main h2 span{text-shadow: 0 0 0.17em #e5834d,0 0 0.17em #e5834d,0 0 0.17em #e5834d,0 0 0.17em #e5834d;}
#cool_summer .check_tit{background: #e5834d;}
#cool_summer .check_point{background: #fae3d8;}
#cool_summer .check_point ul li{border-left-color: #e5834d;}
#cool_summer .point_contents{padding: 3.125em 0;background: #f7f7f7;}
#cool_summer .point_contents_tit{background: #f4c6ae;border-left-color: #e5834d;}
#cool_summer .point_contents_tit::before{background: #fae3d8;}
#cool_summer .point_contents > ul{display: flex;flex-wrap: wrap;justify-content: space-between;}
#cool_summer .point_contents > ul li{width: 46.875%;animation-name: fadeInUp;text-align: center;}
#cool_summer .point_contents > ul li p{width: 92%;margin: 1.2rem auto 0;text-align: left;}
#cool_summer .point_contents > ul li p strong{color: #d8a402;}
#cool_summer .point_contents > ul li figure{display: inline-block;margin-top: 1.2rem;}
#cool_summer .point_contents > ul li:nth-of-type(n+3){margin-top: 3.125rem;}
#cool_summer .argon_gas .note{position: absolute;left: 0;top: 50%;width: 45%;}
.insulation_merit{display: flex;justify-content: space-between;margin-top: 3.125rem;}
.insulation_merit > li{margin: 0 0.2em;animation-name: fadeInUp;}
.insulation_merit > li p{font-size: 1.25rem;margin-top: 1em;text-align: center;min-height: 3em;display: flex;justify-content: center;align-items: center;}/* font-size: 20px; */

@media screen and (min-width: 769px) {
#cool_summer .point_contents > ul li:nth-of-type(even){animation-delay: 0.3s;}
.insulation_merit > li:nth-of-type(2){animation-delay: 0.3s;}
.insulation_merit > li:nth-of-type(3){animation-delay: 0.6s;}
.insulation_merit > li:nth-of-type(4){animation-delay: 0.9s;}
}

@media screen and (max-width: 768px) {
#cool_summer{margin-top: 4rem;}
#cool_summer .point_main figure img{left: 55%;}
#cool_summer .point_contents{padding: 2.5em 0;}
#cool_summer .point_contents > ul li{width: 100%;}
#cool_summer .point_contents > ul li p{width: 100%;margin: 1rem auto 0;}
#cool_summer .point_contents > ul li figure{margin-top: 1rem;}
#cool_summer .point_contents > ul li:nth-of-type(n+2){margin-top: 2rem;}
#cool_summer .argon_gas .note{top: 45%;}
.insulation_merit{flex-wrap: wrap;justify-content: space-around; margin-top: 2.5rem;}
.insulation_merit > li{margin: 0 0.2em;width: 41%;}
.insulation_merit > li:nth-of-type(even){animation-delay: 0.3s;}
.insulation_merit > li:nth-of-type(n+3){margin-top: 2rem;}
.insulation_merit > li p{font-size: 1rem;margin-top: 0.7em;min-height: auto;}
}



/* 地震・災害に強い家 */
#resistant{padding: 0;margin-top: 5rem;background: none;}
#resistant .contents_main h2 span{text-shadow: 0 0 0.17em #82bc5a,0 0 0.17em #82bc5a,0 0 0.17em #82bc5a,0 0 0.17em #82bc5a;}
#resistant .check_tit{background: #82bc5a;}
#resistant .check_point{background: #dbecd0;}
#resistant .check_point ul li{border-left-color: #82bc5a;}
#resistant .point_contents_tit{background: #c0deac;border-left-color: #82bb5a;}
#resistant .point_contents_tit::before{background: #dcecd1;}
.earthquake_fig{padding: 2rem;background: #f7f7f7;text-align: center;}
.disaster_wrap{background: #f7f7f7;padding: 0 1.25rem 1.25rem 1.25rem;animation-name: fadeInUp;}
.disaster_tit{background: #414141;text-align: center;font-size: 1.5rem;padding: 0.3em;color: #fff;width: calc(100% + 2.5rem);margin: 0 -1.25rem;}/* font-size: 24px; */
.disaster_tit + p{margin-top: 1em;}
.disaster_item{display: flex;justify-content: space-between;margin-top: 1.5rem;}
.disaster_item li{width: 48.8%;animation-name: fadeInUp;}
.disaster_item li figure{margin-top: 0.8rem;}
#resistant .point_contents{margin-top: 3.125em;text-align: center;}
#resistant .point_contents p{text-align: left;}
.eco_area{margin-top: 2rem;border: 2px solid #86bb5f;border-radius: 1rem;display: flex;justify-content: space-between;padding: 1.5rem;}
.eco_area > li{width: 48%;}
.eco_tit{background: #c0deac;font-size: 1.25rem;padding: 0.5em 0.9em;}/* font-size: 20px; */
.eco_tit + p{margin-top: 1em;font-size: 1.125em;}
.eco_area > li figure{margin-top: 1.2rem;text-align: center;}

@media screen and (min-width: 769px) {
.disaster_item li:nth-of-type(2){animation-delay: 0.3s;}
}

@media screen and (max-width: 768px) {
#resistant{margin-top: 3rem;}
.earthquake_fig{padding: 0.5rem;}
.disaster_wrap{padding: 0 1rem 1rem 1rem;}
.disaster_tit{font-size: 1.2rem;width: calc(100% + 2rem);margin: 0 -1rem;}
.disaster_item{flex-wrap: wrap;margin-top: 1.3rem;}
.disaster_item li{width: 100%;}
.disaster_item li:nth-of-type(2){margin-top: 1.5rem;}
.disaster_item li figure{margin-top: 0.8rem;}
#resistant .point_contents{margin-top: 2.5em;}
.eco_area{margin-top: 1.5rem;padding: 1rem;flex-wrap: wrap;}
.eco_area > li{width: 100%;}
.eco_area > li:nth-of-type(2){margin-top: 1.5rem;}
.eco_tit{font-size: 1.1rem;}
.eco_tit + p{margin-top: 1em;font-size: 1em;}
.eco_area > li figure{margin-top: 1rem;}
}

span.marker {background: linear-gradient(transparent 75%, #fff799 75%);font-weight: bold; }