@charset "UTF-8";
main{ width: 100%; }
body{ font-family: noto-sans-cjk-jp, sans-serif; }

/* ===== 共通変数的な色 ===== */
/* アクセント: #B96A28（con01ボタンのオレンジ系） / テキスト: #1A1A1A */

/* =====================================================================
   PC
===================================================================== */
@media screen and (min-width: 768px),print {

/* ---- h1 ---- */
/* PC用h1.jpgは「性能」文字が焼き込み済みのためHTMLテキストは非表示 */
#performance h1.main-title{ width: 100%; min-width: 1100px; min-height: 430px; background: url(../images/performance/h1.jpg) no-repeat top center; color: #000; padding: 180px 0 150px; text-align: center; background-size: cover;}
#performance h1.main-title .en { display: none;}
#performance h1.main-title .jp { display: none;}

/* ---- con01 ヒーロー＋アンカーナビ ---- */
#con01{ margin-bottom: 160px; }
#con01 .hero{ width: 100%; max-width: 1200px; margin: 0 auto 55px; }
#con01 .hero img{ width: 100%; height: auto; display: block; }
#con01 .anchor-nav{ width: 1100px; margin: 0 auto; display: flex; justify-content: center; gap: 40px; }
#con01 .anchor-nav li{ width: 340px; }
#con01 .anchor-nav li a{ display: block; transition: opacity .3s; }
#con01 .anchor-nav li a:hover{ opacity: .75; }
#con01 .anchor-nav li img{ width: 100%; height: auto; display: block; }

/* ---- con02 断熱性能 ---- */
#con02{ position: relative; background: #B4A287; min-width: 1100px; margin-top: 33px; padding: 187px 0 150px; }
#con02 .sec-ttl{ position: absolute; top: -71px; left: 50%; transform: translateX(-50%); width: 495px; }
#con02 .sec-ttl img{ width: 100%; height: auto; display: block; }
#con02 .catch{ text-align: center; font-size: 36px; font-weight: 700; color: #fff; letter-spacing: 1.8px; margin-bottom: 15px; }
#con02 .lead{ text-align: center; font-size: 18px; color: #fff; line-height: 1.9; letter-spacing: 0.9px; }

#con02 .point-bx{ width: 1200px; margin: 90px auto 0; background: #A58F6F; padding: 110px 120px 100px; box-sizing: border-box; }
#con02 .point-head{ display: flex; align-items: center; margin-bottom: 30px; }
#con02 .point-head .num{ flex-shrink: 0; margin-right: 45px; }
#con02 .point-head .num img{ display: block; height: 72px; width: auto; }
#con02 .point-head .point-ttl{ font-size: 36px; font-weight: 700; color: #fff; letter-spacing: 1.8px; line-height: 1.4; }
#con02 .cols{ position: relative; }
#con02 .cols .pic{ float: left; width: 424px; }
#con02 .cols .pic img{ max-width: 100%; height: auto; display: block; }
#con02 .cols .txt{ float: right; width: 480px; font-size: 16px; color: #fff; line-height: 2; letter-spacing: 0.8px; }

#con02 .white-bx{ position: relative; clear: both; background: #fff; margin-top: 70px; box-sizing: border-box; }
#con02 .wb01{ margin-top: 35px; }
#con02 .white-bx .icon{ position: absolute; top: -20px; left: 14px; width: 127px; }
#con02 .white-bx .icon img{ width: 100%; height: auto; display: block; }
#con02 .white-bx .l-col{ width: 445px; }
#con02 .white-bx .wb-ttl{ font-size: 22px; font-weight: 500; color: #1A1A1A; letter-spacing: 1.1px; margin-bottom: 12px; }
#con02 .white-bx .wb-ttl2{ font-size: 30px; font-weight: 500; color: #1A1A1A; letter-spacing: 1.5px; margin-bottom: 15px; }
#con02 .white-bx .txt{ font-size: 16px; color: #1A1A1A; line-height: 1.9; letter-spacing: 0.8px; margin-bottom: 15px; }
#con02 .white-bx .txt:last-child{ margin-bottom: 0; }
#con02 .white-bx .pic{ position: absolute; top: 50%; transform: translateY(-50%); }
#con02 .white-bx .pic img{ max-width: 100%; height: auto; display: block; }

#con02 .wb01{ min-height: 240px; padding: 70px 480px 40px 54px; }
#con02 .wb01 .pic{ right: 37px; width: 411px; }
#con02 .wb02{ min-height: 315px; padding: 85px 480px 45px 50px; }
#con02 .wb02 .pic{ right: 47px; width: 390px; }
#con02 .wb03{ min-height: 606px; padding: 87px 440px 50px 50px; }
#con02 .wb03 .pic{ right: 74px; width: 363px; }
#con02 .wb04{ min-height: 687px; padding: 87px 440px 50px 50px; }
#con02 .wb04 .pic{ right: 53px; width: 390px; }

/* ---- con03 耐震性能 ---- */
#con03{ position: relative; min-width: 1100px; padding: 212px 0 200px; }
#con03 .sec-ttl{ position: absolute; top: -73px; left: 50%; transform: translateX(-50%); width: 503px; }
#con03 .sec-ttl img{ width: 100%; height: auto; display: block; }
#con03 .catch{ width: 846px; margin: 0 auto; }
#con03 .catch img{ width: 100%; height: auto; display: block; }

#con03 .p-head{ display: flex; align-items: center; margin-bottom: 25px; }
#con03 .p-head .num{ flex-shrink: 0; width: 55px; margin-right: 35px; }
#con03 .p-head .num img{ display: block; height: 72px; width: auto; }
#con03 .p-head .p-ttl{ font-size: 36px; font-weight: 700; color: #1A1A1A; letter-spacing: 1.8px; line-height: 1.3; }
#con03 .txt{ font-size: 16px; color: #1A1A1A; line-height: 1.9; letter-spacing: 0.8px; margin-bottom: 20px; }
#con03 .txt:last-child{ margin-bottom: 0; }
#con03 .pic img{ max-width: 100%; height: auto; display: block; margin: 0 auto; }
#con03 .label{ display: inline-block; background: #4D3523; color: #fff; font-size: 18px; font-weight: 500; letter-spacing: 0.9px; line-height: 1; padding: 15px 20px; margin-bottom: 12px; }

#con03 .point01{ width: 960px; margin: 140px auto 0; }
#con03 .point01 .p-head{ margin-left: -94px; }
#con03 .point01 .pic{ margin: 45px auto 40px; width: 402px; }

/* 1〜7の区切り線（横: 行間 / 縦: 列間） */
#con03 .grid-row{ position: relative; width: 1200px; margin: 70px auto 0; padding-top: 130px; border-top: 1px solid #B4B4B4; display: flex; justify-content: space-between; }
#con03 .grid-row + .grid-row{ margin-top: 110px; }
#con03 .grid-row::after{ content: ''; position: absolute; left: 50%; top: 90px; bottom: 0; width: 1px; background: #B4B4B4; }
#con03 .grid-row .cell{ width: 510px; }
#con03 .cell .pic{ margin-bottom: 30px; }
#con03 .cell .p-head + .txt{ margin-bottom: 25px; }
/* P5の図は縦100pxと低く、隣のP4と本文位置を揃えるため上下に余白（デザイン実測: 上95px/下105px） */
#con03 .cell .pic.pic-p5{ margin: 95px 0 105px; }

/* ---- con04 省エネ ---- */
#con04{ position: relative; background: #B4A287; min-width: 1100px; padding: 214px 0 157px; }
#con04 .sec-ttl{ position: absolute; top: -71px; left: 50%; transform: translateX(-50%); width: 495px; }
#con04 .sec-ttl img{ width: 100%; height: auto; display: block; }
#con04 .catch{ text-align: center; font-size: 36px; font-weight: 700; color: #fff; letter-spacing: 1.8px; margin-bottom: 15px; }
#con04 .lead{ text-align: center; font-size: 18px; color: #fff; line-height: 1.9; letter-spacing: 0.9px; }

#con04 .white-bx{ position: relative; background: #fff; width: 960px; margin: 70px auto 0; box-sizing: border-box; min-height: 528px; padding: 85px 480px 45px 50px; }
#con04 .eb01{ margin-top: 100px; min-height: 576px; }
#con04 .eb03{ min-height: 462px; }
#con04 .white-bx .icon{ position: absolute; top: -20px; left: 14px; width: 127px; }
#con04 .white-bx .icon img{ width: 100%; height: auto; display: block; }
#con04 .white-bx .l-col{ width: 445px; }
#con04 .white-bx .wb-ttl2{ font-size: 30px; font-weight: 500; color: #1A1A1A; letter-spacing: 1.5px; margin-bottom: 15px; }
#con04 .white-bx .txt{ font-size: 16px; color: #1A1A1A; line-height: 1.9; letter-spacing: 0.8px; margin-bottom: 15px; }
#con04 .white-bx .txt:last-child{ margin-bottom: 0; }
#con04 .white-bx .pic{ position: absolute; top: 50%; transform: translateY(-50%); right: 47px; width: 390px; }
#con04 .eb03 .pic{ right: 37px; }
#con04 .white-bx .pic img{ max-width: 100%; height: auto; display: block; }

/* ---- con05 クロージング ---- */
#con05{ min-width: 1100px; height: 787px; background: url(../images/performance/con05-bg01.png) no-repeat center center; background-size: cover; display: flex; align-items: center; justify-content: center; }
#con05 .msg-bx{ width: 890px; min-height: 351px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-sizing: border-box; padding: 40px; }
#con05 .msg-bx .ttl{ font-size: 36px; font-weight: 700; color: #4D3523; letter-spacing: 1.8px; margin-bottom: 20px; }
#con05 .msg-bx .txt{ font-size: 18px; color: #4D3523; line-height: 1.9; letter-spacing: 0.9px; }

/* ---- con06 CVバナー ---- */
#con06{ min-width: 1100px; background: #E8E3D2; height: 499px; }
#con06 .inner{ position: relative; width: 1200px; height: 100%; margin: 0 auto; }
#con06 .bnr{ position: absolute; width: 480px; }
#con06 .bnr img{ width: 100%; height: auto; display: block; }
#con06 .bnr a{ display: block; transition: opacity .3s; }
#con06 .bnr a:hover{ opacity: .75; }
#con06 .bnr01{ left: 97px; top: 86px; }
#con06 .bnr02{ left: 622px; top: 86px; }
#con06 .bnr03{ left: 360px; top: 275px; }

}

/* =====================================================================
   SP
===================================================================== */
@media screen and (max-width: 767px) {

/* ---- h1 ---- */
/* SP用sp-h1.jpgは文字なしのため他ページ同様HTMLテキストを重ねる */
#performance h1.main-title{ width: 100%; background: url(../images/performance/sp-h1.jpg) no-repeat top center; color: #000; padding: 15vw 0; text-align: center; background-size: cover;}
#performance h1.main-title .en { display: none;}
#performance h1.main-title .jp { display: inline-block; font-size: 6vw; font-weight: bold; border: solid 3px #000; padding: 1vw 3vw 0.3vw; background: #fff;}

/* ---- con01 ヒーロー＋アンカーナビ ---- */
#con01{ margin-bottom: 18vw; }
#con01 .hero{ width: 89.4%; margin: 0 auto 6vw; }
#con01 .hero img{ width: 100%; height: auto; display: block; }
#con01 .anchor-nav{ width: 89.4%; margin: 0 auto; display: flex; justify-content: space-between; }
#con01 .anchor-nav li{ width: 32.4%; }
#con01 .anchor-nav li a{ display: block; }
#con01 .anchor-nav li img{ width: 100%; height: auto; display: block; }

/* ---- con02 断熱性能 ---- */
#con02{ position: relative; background: #B4A287; margin-top: 3.4vw; padding: 21.5vw 0 16vw; }
#con02 .sec-ttl{ position: absolute; top: -7.8vw; left: 50%; transform: translateX(-50%); width: 57.7vw; }
#con02 .sec-ttl img{ width: 100%; height: auto; display: block; }
#con02 .catch{ font-size: 6.3vw; font-weight: 700; color: #fff; letter-spacing: 0.3vw; line-height: 1.4; margin: 0 6vw 3vw; }
#con02 .lead{ font-size: 3.86vw; color: #fff; line-height: 1.8; letter-spacing: 0.15vw; margin: 0 6vw; }

#con02 .point-bx{ width: 100%; margin-top: 5vw; background: #A58F6F; padding: 12vw 0 5vw; }
#con02 .point-head{ display: flex; align-items: center; margin: 0 7.7vw 5vw; }
#con02 .point-head .num{ flex-shrink: 0; margin-right: 4.3vw; }
#con02 .point-head .num img{ display: block; height: 8.8vw; width: auto; }
#con02 .point-head .point-ttl{ font-size: 5.8vw; font-weight: 700; color: #fff; letter-spacing: 0.25vw; line-height: 1.45; }
#con02 .cols .pic{ width: 84.5%; margin: 0 auto 5vw; }
#con02 .cols .pic img{ width: 100%; height: auto; display: block; }
#con02 .cols .txt{ font-size: 3.4vw; color: #fff; line-height: 1.9; letter-spacing: 0.24vw; margin: 0 7.7vw; }

#con02 .white-bx{ position: relative; background: #fff; width: 89.4%; margin: 7vw auto 0; box-sizing: border-box; padding: 12vw 6vw 6vw; }
#con02 .wb01{ margin-top: 10vw; padding-top: 12.5vw; }
#con02 .white-bx .icon{ position: absolute; top: -2.4vw; left: 5.5vw; width: 30.4vw; }
#con02 .white-bx .icon img{ width: 100%; height: auto; display: block; }
#con02 .white-bx .wb-ttl{ font-size: 4.35vw; font-weight: 500; color: #1A1A1A; letter-spacing: 0.2vw; text-align: center; margin-bottom: 3vw; }
#con02 .white-bx .wb-ttl2{ font-size: 5.3vw; font-weight: 500; color: #1A1A1A; letter-spacing: 0.25vw; text-align: center; margin-bottom: 3.5vw; }
#con02 .white-bx .txt{ font-size: 3.4vw; color: #1A1A1A; line-height: 1.9; letter-spacing: 0.24vw; margin-bottom: 3.5vw; }
#con02 .white-bx .txt:last-child{ margin-bottom: 0; }
#con02 .white-bx .pic{ margin: 5vw auto 0; }
#con02 .white-bx .pic img{ width: 100%; height: auto; display: block; }
#con02 .wb01 .pic{ width: 46.4vw; }
#con02 .wb02 .pic{ width: 68.6vw; }
#con02 .wb03 .pic{ width: 73.2vw; }
#con02 .wb04 .pic{ width: 68.6vw; }

/* ---- con03 耐震性能 ---- */
#con03{ position: relative; padding: 17.4vw 0 20vw; }
#con03 .sec-ttl{ position: absolute; top: -7.8vw; left: 50%; transform: translateX(-50%); width: 57.7vw; }
#con03 .sec-ttl img{ width: 100%; height: auto; display: block; }
#con03 .catch{ width: 90.6%; margin: 0 auto; }
#con03 .catch img{ width: 100%; height: auto; display: block; }

#con03 .p-head{ display: flex; align-items: center; margin: 0 5.3vw 4vw; }
#con03 .p-head .num{ flex-shrink: 0; margin-right: 3.5vw; }
#con03 .p-head .num img{ display: block; height: 8.8vw; width: auto; }
#con03 .p-head .p-ttl{ font-size: 5.8vw; font-weight: 700; color: #1A1A1A; letter-spacing: 0.5vw; line-height: 1.35; }
#con03 .txt{ font-size: 3.4vw; color: #1A1A1A; line-height: 1.9; letter-spacing: 0.24vw; margin: 0 5.3vw 4vw; }
#con03 .label{ display: inline-block; background: #4D3523; color: #fff; font-size: 3.86vw; font-weight: 500; letter-spacing: 0.15vw; line-height: 1; padding: 2.9vw 4.8vw; margin: 0 0 2.5vw 5.3vw; }
#con03 .pic{ margin: 0 auto 4.5vw; }
#con03 .pic img{ width: 100%; height: auto; display: block; }

#con03 .point{ margin-top: 16vw; }
#con03 .point01 .pic{ width: 92%; }
#con03 .grid-row .cell{ margin-top: 13vw; }
#con03 .cell .pic{ width: 89.4%; }
#con03 .point01 .txt + .pic{ margin-top: 6vw; }
#con03 .cell .pic.pic-s{ width: 66.2%; }

/* 1〜7の区切り線（各ポイント間） */
#con03 .point01, #con03 .cell{ position: relative; padding-bottom: 9vw; }
#con03 .point01::after, #con03 .cell::after{ content: ''; position: absolute; bottom: 0; left: 5.3%; right: 5.3%; height: 1px; background: #B4B4B4; }
#con03 .grid-row:last-child .cell:last-child{ padding-bottom: 0; }
#con03 .grid-row:last-child .cell:last-child::after{ display: none; }

/* ---- con04 省エネ ---- */
#con04{ position: relative; background: #B4A287; padding: 22.7vw 0 12.5vw; }
#con04 .sec-ttl{ position: absolute; top: -7.8vw; left: 50%; transform: translateX(-50%); width: 57.7vw; }
#con04 .sec-ttl img{ width: 100%; height: auto; display: block; }
#con04 .catch{ font-size: 6.3vw; font-weight: 700; color: #fff; letter-spacing: 0.3vw; line-height: 1.4; margin: 0 5.3vw 3vw; }
#con04 .lead{ font-size: 3.86vw; color: #fff; line-height: 1.8; letter-spacing: 0.15vw; margin: 0 5.3vw; }

#con04 .white-bx{ position: relative; background: #fff; width: 89.4%; margin: 7vw auto 0; box-sizing: border-box; padding: 12vw 6vw 8vw; }
#con04 .eb01{ margin-top: 12vw; }
#con04 .white-bx .icon{ position: absolute; top: -4.4vw; left: 5.5vw; width: 30.4vw; }
#con04 .white-bx .icon img{ width: 100%; height: auto; display: block; }
#con04 .white-bx .wb-ttl2{ font-size: 5.3vw; font-weight: 500; color: #1A1A1A; letter-spacing: 0.25vw; text-align: center; margin-bottom: 3.5vw; }
#con04 .white-bx .txt{ font-size: 3.4vw; color: #1A1A1A; line-height: 1.9; letter-spacing: 0.24vw; margin-bottom: 3.5vw; }
#con04 .white-bx .txt:last-child{ margin-bottom: 0; }
#con04 .white-bx .pic{ width: 100%; margin: 5vw auto 0; }
#con04 .white-bx .pic img{ width: 100%; height: auto; display: block; }

/* ---- con05 クロージング ---- */
#con05{ height: 122.7vw; background: url(../images/performance/sp-con05-bg01.png) no-repeat center center; background-size: cover; display: flex; align-items: center; justify-content: center; }
#con05 .msg-bx{ width: 83.6%; min-height: 77.3vw; background: #fff; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; box-sizing: border-box; padding: 6vw 6.8vw; }
#con05 .msg-bx .ttl{ font-size: 5.8vw; font-weight: 700; color: #4D3523; letter-spacing: 0.25vw; line-height: 1.5; margin-bottom: 4vw; text-align: left; }
#con05 .msg-bx .txt{ font-size: 3.4vw; color: #4D3523; line-height: 1.9; letter-spacing: 0.24vw; text-align: left; }

/* ---- con06 CVバナー ---- */
#con06{ background: #E8E3D2; padding: 8.9vw 0 11.6vw; }
#con06 .inner{ width: 90.3%; margin: 0 auto; }
#con06 .bnr{ margin-bottom: 7.2vw; }
#con06 .bnr:last-child{ margin-bottom: 0; }
#con06 .bnr a{ display: block; }
#con06 .bnr img{ width: 100%; height: auto; display: block; }

}