@charset "UTF-8";

/* ===== Reset / Base ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Kozuka Gothic Pro", "小塚ゴシック Pro", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "YuGothic", sans-serif;
  color: #333;
  text-align: left; /* /ie/common/v3/css/reset.css の body{text-align:center} を打ち消す */
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* ===== PC/SP 出し分け ===== */
.is_sp { display: none; }

@media screen and (max-width: 750px) {
  .is_sp { display: inline; }
}

/* ===== Scroll fade-in（余裕のある出現：長めのease-out + 大きめの移動） ===== */
.is_hidden {
  transform: translate(0, 60px);
  opacity: 0;
}
.is_show {
  transition: opacity 2.4s cubic-bezier(0.22, 1, 0.36, 1), transform 2.4s cubic-bezier(0.22, 1, 0.36, 1);
  transform: translate(0, 0);
  opacity: 1;
  transition-delay: .2s;
}

/* ヘッダーは左から順に、少しずつ遅らせて出す */
.header--static .header_logo.is_show {
  transition-delay: 0.08s;
}
.header--static .header_nav_item.is_show {
  /* 出現の遅延はopacity/transformだけ。width/heightはホバー時に遅れないよう0s */
  transition:
    opacity 2.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 2.4s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.25s ease 0s,
    height 0.25s ease 0s;
}
.header--static .header_nav_item:nth-child(1).is_show {
  transition:
    opacity 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.18s,
    transform 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.18s,
    width 0.25s ease 0s,
    height 0.25s ease 0s;
}
.header--static .header_nav_item:nth-child(2).is_show {
  transition:
    opacity 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.28s,
    transform 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.28s,
    width 0.25s ease 0s,
    height 0.25s ease 0s;
}
.header--static .header_nav_item:nth-child(3).is_show {
  transition:
    opacity 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.38s,
    transform 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.38s,
    width 0.25s ease 0s,
    height 0.25s ease 0s;
}
.header--static .header_nav_item:nth-child(4).is_show {
  transition:
    opacity 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.48s,
    transform 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.48s,
    width 0.25s ease 0s,
    height 0.25s ease 0s;
}
.header--static .header_nav_item:nth-child(5).is_show {
  transition:
    opacity 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.58s,
    transform 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.58s,
    width 0.25s ease 0s,
    height 0.25s ease 0s;
}
.header--static .header_nav_item:nth-child(6).is_show {
  transition:
    opacity 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.68s,
    transform 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.68s,
    width 0.25s ease 0s,
    height 0.25s ease 0s;
}
.header--static .header_catalog_btn.is_show {
  transition:
    opacity 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.82s,
    transform 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.82s;
}
.header--static .header_brand.is_show { transition-delay: 0.94s; }
.header--static .sp_header_brand.is_show { transition-delay: 0.1s; }
.header--static .sp_ham_btn.is_show { transition-delay: 0.28s; }

/* ===== mv枠 出現アニメーション（現在地タブから緑の枠線が伸びてKVを囲む） ===== */
.mv_grow_line {
  position: absolute;
  z-index: 60;
  pointer-events: none;
}

/* JSで明示的にis_showを付与するため、既定の.5s遅延はキャンセルする */
.mv_inner.is_show {
  transition-delay: 0s;
}

/* 画像を含むリンク：ホバーで画像を0.75に（出現アニメのopacityと分離） */
a > img,
a > picture img {
  transition: opacity 0.3s ease;
}
a:hover > img,
a:hover > picture img {
  opacity: 0.75;
}

/* カタログ請求・詳しく見るなどのボタンリンク */
.sec04_card_btn,
.sec04_interview_btn,
.sp_drawer_catalog a,
.doc_btn {
  transition: opacity 0.3s ease;
}
.header_catalog_btn:hover,
.header--static .header_catalog_btn.is_show:hover,
.sec05_btn:hover,
.sec05_btn.is_show:hover,
.sec04_card_btn:hover,
.sec04_interview_btn:hover,
.sp_drawer_catalog a:hover,
.doc_btn:hover {
  opacity: 0.75;
  transition: opacity 0.3s ease;
  transition-delay: 0s;
}

/* ===== sec01 (トップページ MV) ===== */
.sec01 {
  position: relative;
  margin-top: calc(-1 * var(--header-h));
  background-image: url('../img/pc/sec01_bg.png');
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top center;
  background-color: #eee9e2;
  padding: calc(3.7vw + var(--header-h)) 0 8.5vw;
  text-align: center;
}

.sec01_house {
  width: 22.1vw;
  margin: 0 auto;
}

.sec01_house img {
  width: 100%;
  display: block;
}

.sec01_text {
  margin-top: 0vw;
}

.sec01_lead {
  font-family: "Kozuka Gothic Pro", "小塚ゴシック Pro", "Noto Sans JP", "Hiragino Kaku Gothic Pro", sans-serif;
  font-size: 2vw;
  color: #754424;
  letter-spacing: 0.1em;
  margin-bottom: 0vw;
  text-shadow: 0.15vw 0.15vw 0.3vw rgba(117, 68, 36, 0.25);
}

.sec01_ttl {
  font-family: "Kozuka Gothic Pro", "小塚ゴシック Pro", "Noto Sans JP", "Hiragino Kaku Gothic Pro", sans-serif;
  font-size: 3.6vw;
  font-weight: 500;
  color: #754424;
  letter-spacing: 0.1em;
  text-shadow: 0.2vw 0.2vw 0.4vw rgba(117, 68, 36, 0.25);
}

/* ===== sec02（知っておきたい、災害の今） ===== */
.sec02 {
  background: rgba(198, 177, 152, 0.1);
  padding: 0 0 6vw;
  text-align: center;
}

.sec02_ttl_band {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 8.96vw;
  padding-top: 0.7vw;
  background: #fdfcf8;
}

.sec02_ttl {
  display: inline-block;
  position: relative;
  font-family: "Kozuka Gothic Pro", "小塚ゴシック Pro", "Noto Sans JP", "Hiragino Kaku Gothic Pro", sans-serif;
  font-size: 2.2vw;
  font-weight: 500;
  color: #482414;
  letter-spacing: 0.15em;
  padding: 0 3vw;
}

.sec02_ttl::before,
.sec02_ttl::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 15vw;
  height: 2px;
  background: #482414;
}

.sec02_ttl::before { right: 100%; }

.sec02_ttl_first {
  font-size: 2.34375vw;
  font-weight: 700;
}

.sec02_ttl_bold {
  font-weight: 700;
}
.sec02_ttl::after { left: 100%; }

.sec02_item {
  margin-top: 2.4vw;
}

.sec02_item:nth-child(3) {
  margin-top: 5.4vw;
}

.sec02_box {
  width: 40.5vw;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0.2vw 2vw 0.9vw;
  border-style: solid;
  border-width: 1.5625vw;
  border-image-source: url('../img/pc/sec02_box_frame.png');
  border-image-slice: 60;
  border-image-width: 1.5625vw;
  border-image-outset: 0;
}

.sec02_box p {
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 1.5625vw;
  line-height: 2.34375vw;
  color: #754424;
  letter-spacing: 0.04em;
}

.sec02_num {
  font-size: 3.125vw;
  font-weight: 700;
  color: #c0272d;
  padding: 0 0.15em;
}

.sec02_asterisk {
  font-size: 0.9375vw;
  vertical-align: top;
}

.sec02_em_line {
  white-space: nowrap;
}

.sec02_em {
  display: inline-block;
  font-size: 2.604vw;
  line-height: 2.083vw;
  letter-spacing: 0.04em;
  font-weight: 700;
}

.sec02_chart {
  width: 26.2vw;
  margin: 2.4vw auto 0;
}

.sec02_item:nth-child(3) .sec02_chart {
  width: 51.7vw;
  margin-top: 3.4vw;
}

.sec02_item:nth-child(3) .sec02_box {
  border-image-source: url('../img/pc/sec02_box_frame2.png');
}

.sec02_item:nth-child(3) .sec02_note {
  width: 40.1042vw;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.sec02_chart img {
  width: 100%;
  display: block;
}

.sec02_note {
  margin-top: 1.5vw;
  text-align: center;
  font-family: "Kozuka Gothic Pr6N", "小塚ゴシック Pr6N", "Kozuka Gothic Pro", "Noto Sans JP", "Hiragino Kaku Gothic Pro", sans-serif;
  font-weight: 300;
  font-size: 0.885vw;
  line-height: 1.5104vw;
  color: #666;
  letter-spacing: 0;
}

.sec02_note_bold {
  text-align: center;
  font-family: "Kozuka Gothic Pro", "小塚ゴシック Pro", "Noto Sans JP", "Hiragino Kaku Gothic Pro", sans-serif;
  font-weight: 700;
  font-size: 0.9896vw;
  line-height: 1.8229vw;
  letter-spacing: 0;
  color: #482414;
}

.sec02_note_em {
  font-size: 1.1458vw;
}

.sec02_lead {
  margin-top: 5vw;
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 1.9010vw;
  font-weight: 500;
  color: #754424;
  letter-spacing: 0.11em;
  line-height: 4.1667vw;
}

/* ===== sec03（住友林業と一緒に考える、防災の家づくり） ===== */
.sec03 {
  background-image: url('../img/pc/sec03_bg.png');
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top center;
  background-color: #e9e6e1;
  padding: 4vw 0 4vw;
  text-align: center;
}

.sec03_ttl {
  width: 24.8vw;
  margin: 0 auto;
}

.sec03_ttl img {
  width: 100%;
  display: block;
}

.sec03_lead {
  margin-top: -4vw;
  font-family: "Kozuka Gothic Pro", "小塚ゴシック Pro", "Noto Sans JP", "Hiragino Kaku Gothic Pro", sans-serif;
  font-size: 1.0417vw;
  color: #754424;
  letter-spacing: 0.1em;
  line-height: 2.6042vw;
}

/* ===== sec04（4カード + スペシャルインタビュー） ===== */
.sec04 {
  background: #fcf9f2;
  padding: 4vw 0 6vw;
}

.sec04_cards {
  display: flex;
  justify-content: center;
  gap: 0.9375vw;
  list-style: none;
}

.sec04_card {
  width: 14.219vw;
  height: 27.552vw;
  display: flex;
  flex-direction: column;
}

.sec04_card.tab-sekkei       { background: #a9cb03; }
.sec04_card.tab-kouzou       { background: #754424; }
.sec04_card.tab-setsubi      { background: #235a9f; }
.sec04_card.tab-kigyouryoku  { background: #00ab84; }

.sec04_card_hd {
  padding: 1.4vw 1vw 0.9vw;
  text-align: center;
}

.sec04_card_hd_sub {
  font-family: "Kozuka Gothic Pr6N", "小塚ゴシック Pr6N", "Kozuka Gothic Pro", "Noto Sans JP", "Hiragino Kaku Gothic Pro", sans-serif;
  font-weight: 500;
  font-size: 1.0932vw;
  color: #fff;
  letter-spacing: 0.1em;
  margin-bottom: 0.5vw;
}

.sec04_card_hd_main {
  display: inline-block;
  font-family: "Kozuka Gothic Pro", "小塚ゴシック Pro", "Noto Sans JP", "Hiragino Kaku Gothic Pro", sans-serif;
  font-size: 1.15vw;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.1em;
  border: 1px solid #fff;
  padding: 0.4vw 0.8vw;
}

.sec04_card_photo {
  width: 100%;
  aspect-ratio: 273 / 237;
  overflow: hidden;
}

.sec04_card_photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sec04_card_ft {
  flex: 1;
  padding: 1.2vw 1vw 0;
  font-family: "Kozuka Gothic Pr6N", "小塚ゴシック Pr6N", "Kozuka Gothic Pro", "Noto Sans JP", "Hiragino Kaku Gothic Pro", sans-serif;
  font-weight: 500;
  font-size: 0.9896vw;
  color: #fff;
  text-align: center;
  letter-spacing: 0.1em;
  line-height: 1.375vw;
}

.sec04_card_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 11.875vw;
  height: 1.7708vw;
  margin: 1vw auto 1.4vw;
  background: #fff;
  text-align: center;
  text-decoration: none;
  font-family: "Kozuka Gothic Pr6N", "小塚ゴシック Pr6N", "Kozuka Gothic Pro", "Noto Sans JP", "Hiragino Kaku Gothic Pro", sans-serif;
  font-weight: 500;
  font-size: 0.8333vw;
  line-height: 1.0417vw;
  letter-spacing: 0.1em;
}

.sec04_card.tab-sekkei .sec04_card_btn      { color: #a9cb03; }
.sec04_card.tab-kouzou .sec04_card_btn      { color: #754424; }
.sec04_card.tab-setsubi .sec04_card_btn     { color: #235a9f; }
.sec04_card.tab-kigyouryoku .sec04_card_btn { color: #00ab84; }

.sec04_card_btn span {
  margin-left: 0.4em;
  font-size: 0.8em;
}

.sec04_interview {
  position: relative;
  width: 37.2vw;
  height: 9.6vw;
  margin: 2.5vw auto 0;
  background: #f2e3d3;
  overflow: hidden;
}

.sec04_interview_bg {
  position: absolute;
  right: 0;
  top: 0;
  width: 15.36vw;
  height: 8.93vw;
}

.sec04_interview_tag {
  position: absolute;
  left: 0;
  top: 0;
  background: #666;
  color: #fff;
  font-size: 0.85vw;
  letter-spacing: 0.1em;
  padding: 0.5vw 1vw;
}

.sec04_interview_body {
  position: absolute;
  left: 1.4vw;
  top: 3vw;
  text-align: left;
}

.sec04_interview_role {
  font-size: 0.75vw;
  color: #333;
  letter-spacing: 0.05em;
  margin-bottom: 0.3vw;
}

.sec04_interview_name {
  font-family: "Kozuka Gothic Pro", "小塚ゴシック Pro", "Noto Sans JP", "Hiragino Kaku Gothic Pro", sans-serif;
  font-size: 1.12vw;
  font-weight: 700;
  color: #333;
  letter-spacing: 0.1em;
}

.sec04_interview_copy {
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 1vw;
  color: #333;
  letter-spacing: 0.1em;
  margin-top: 0.3vw;
}

.sec04_interview_photo {
  position: absolute;
  left: 14vw;
  top: 0.7vw;
  width: 6.48vw;
  height: 8.23vw;
}

.sec04_interview_photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sec04_interview_btn {
  position: absolute;
  right: 1.1vw;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 11.875vw;
  height: 1.7708vw;
  background: #fff;
  text-decoration: none;
  color: #666;
  font-family: "Kozuka Gothic Pr6N", "小塚ゴシック Pr6N", "Kozuka Gothic Pro", "Noto Sans JP", "Hiragino Kaku Gothic Pro", sans-serif;
  font-weight: 500;
  font-size: 0.8333vw;
  line-height: 1.0417vw;
  letter-spacing: 0.1em;
}

.sec04_interview_btn span {
  margin-left: 0.4em;
  font-size: 0.8em;
}

/* ===== sec05（資料請求CTA） ===== */
.sec05 {
  background: #fcf9f2;
  padding: 6vw 0;
  text-align: center;
}

/* 下層ページ（トップページ以外）は背景白 */
body:not(.page-top) .sec05 {
  background: #fff;
}

.sec05_top_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14.219vw;
  height: 3.6979vw;
  margin: 0 auto;
  background: var(--brown-mid);
  color: #fff;
  text-decoration: none;
  font-family: "Kozuka Gothic Pro", "小塚ゴシック Pro", "Noto Sans JP", "Hiragino Kaku Gothic Pro", sans-serif;
  font-weight: 400;
  font-size: 1.5625vw;
  line-height: 3.4375vw;
  letter-spacing: 0.11em;
}

.sec05_lead {
  margin-top: 2.8vw;
  font-family: "Kozuka Gothic Pro", "小塚ゴシック Pro", "Noto Sans JP", "Hiragino Kaku Gothic Pro", sans-serif;
  font-weight: 500;
  font-size: 1.329vw;
  color: #754424;
  letter-spacing: 0.11em;
  line-height: 3.1271vw;
}

.sec05_lead_em {
  display: inline-block;
  margin-top: 0.4vw;
  font-family: "Kozuka Gothic Pro", "小塚ゴシック Pro", "Noto Sans JP", "Hiragino Kaku Gothic Pro", sans-serif;
  font-size: 2.0326vw;
  line-height: 4.3673vw;
  letter-spacing: 0.11em;
  font-weight: 500;
}

.sec05_catalog {
  width: 39.84vw;
  margin: 3vw auto 0;
}

.sec05_catalog img {
  width: 100%;
  display: block;
}

.sec05_closing {
  margin-top: 0vw;
  font-family: "Kozuka Gothic Pr6N", "小塚ゴシック Pr6N", "Kozuka Gothic Pro", "Noto Sans JP", "Hiragino Kaku Gothic Pro", sans-serif;
  font-weight: 400;
  font-size: 1.0417vw;
  color: #754424;
  letter-spacing: 0.1em;
  line-height: 2.6042vw;
}

.sec05_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20.156vw;
  height: 3.6979vw;
  margin: 2vw auto 0;
  border: 2px solid #8b6b4a;
  text-decoration: none;
  color: #754424;
  font-family: "Kozuka Gothic Pr6N", "小塚ゴシック Pr6N", "Kozuka Gothic Pro", "Noto Sans JP", "Hiragino Kaku Gothic Pro", sans-serif;
  font-weight: 400;
  font-size: 1.0417vw;
  line-height: 3.0422vw;
  letter-spacing: 0.3em;
}

.sec05_btn:link,
.sec05_btn:visited {
  color: #754424;
}

.sec05_btn span {
  margin-left: 0.4em;
  font-size: 0.8em;
}

/* ===== Header =====
   色・比率は bousai_PC_0822.pdf のヘッダー実測値から algorithm 抽出。
   タブ配色: トップ=茶 / 設計=黄緑 / 構造=ブラウン / 設備=青 / 企業=ティール / インタビュー=グレー
   現在ページのタブのみ拡大表示（is-current）。
*/
:root {
  --header-h: 15vw;
  --brown-dark: #482414;   /* アクセント・ハンバーガー */
  --brown-mid: #754c24;    /* ロゴ枠・カタログボタン */
  --tab-top-edge: #482414;    --tab-top-main: #c59b6d;
  --tab-sekkei-edge: #a1bf03; --tab-sekkei-main: #a9cb03;
  --tab-kouzou-edge: #6f4021; --tab-kouzou-main: #754424;
  --tab-setsubi-edge: #215592; --tab-setsubi-main: #235a9f;
  --tab-kigyouryoku-edge: #00a079; --tab-kigyouryoku-main: #00ab84;
  --tab-interview-edge: #666666; --tab-interview-main: #808080;
  --brand-green: #009145;
}

.header {
  width: 100%;
  height: var(--header-h);
}

.header--static {
  position: relative;
  z-index: 100;
  background: none;
}

.header--sticky {
  position: fixed;
  background-color: #f1efec;
  top: 0;
  left: 0;
  z-index: 200;
  height: 9.375vw; /* is-currentなしのため、通常タブ高さに合わせる */
  transform: translateY(-100%);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 下層ページ（トップページ以外）はヘッダー高さをis-currentタブの高さに合わせる */
body:not(.page-top) {
  --header-h: 13.18vw;
}

/* 下層ページ（トップページ以外）のヘッダー背景色 */
body:not(.page-top) .header--static {
  background: #eae7e2;
}

body:not(.page-top) .header--sticky {
  background-color: #eae7e2;
}

.header--sticky.is-visible {
  transform: translateY(0);
}

.header_inner {
  position: relative;
  display: flex;
  align-items: stretch;
  height: 100%;
}

.header_logo {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  flex-shrink: 0;
  width: 27.19vw;
  height: 9.375vw;
  background: var(--brown-mid);
}

.header_logo img {
  display: block;
  width: 14.69vw;
  height: auto;
}

.header_nav {
  flex: 1;
  display: flex;
  align-items: flex-start;
  padding: 0 1vw 0 4.1667vw;
  overflow: hidden;
}

.header_nav_list {
  display: flex;
  align-items: flex-start;
  list-style: none;
  gap: 1.25vw;
  height: 100%;
}

.header_nav_item {
  width: 4.32vw;
  height: 9.375vw;
  flex-shrink: 0;
  transition: width 0.25s ease, height 0.25s ease;
}

.header_nav_item.is-current {
  width: 6.15vw;
  height: 13.18vw;
}

.header_nav_item a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding-left: 0.3em;
  box-sizing: border-box;
  writing-mode: vertical-rl;
  text-decoration: none;
  color: #fff;
  font-family: "Kozuka Gothic Pro", "小塚ゴシック Pro", "Noto Sans JP", "Hiragino Kaku Gothic Pro", sans-serif;
  letter-spacing: 0.05em;
  font-weight: 400;
  transition: font-size 0.25s ease, letter-spacing 0.25s ease;
}

.header_nav_item.is-current a {
  letter-spacing: 0.12em;
}

/* フォントサイズはPDF実測（各ラベルの縦書き文字高さ）から算出。
   長いラベル（防災家づくりトップ／スペシャルインタビュー）は縮小フィットされている。 */
.header_nav_item.tab-top a          { font-size: 0.821vw; }
.header_nav_item.tab-sekkei a       { font-size: 1.116vw; }
.header_nav_item.tab-kouzou a       { font-size: 1.091vw; }
.header_nav_item.tab-setsubi a      { font-size: 1.067vw; }
.header_nav_item.tab-kigyouryoku a  { font-size: 1.070vw; }
.header_nav_item.tab-interview a    { font-size: 0.717vw; }

.header_nav_item.tab-top.is-current a          { font-size: 1.154vw; }
.header_nav_item.tab-sekkei.is-current a       { font-size: 1.569vw; }
.header_nav_item.tab-kouzou.is-current a       { font-size: 1.533vw; }
.header_nav_item.tab-setsubi.is-current a      { font-size: 1.500vw; }
.header_nav_item.tab-kigyouryoku.is-current a  { font-size: 1.504vw; }
.header_nav_item.tab-interview.is-current a    { font-size: 1.008vw; }

/* 先頭ヘッダーのタブはホバーでも現在地と同じ大きさに伸びる */
.header--static .header_nav_item:hover {
  width: 6.15vw;
  height: 13.18vw;
}
.header--static .header_nav_item:hover a {
  letter-spacing: 0.12em;
}
.header--static .header_nav_item.tab-top:hover a          { font-size: 1.154vw; }
.header--static .header_nav_item.tab-sekkei:hover a       { font-size: 1.569vw; }
.header--static .header_nav_item.tab-kouzou:hover a       { font-size: 1.533vw; }
.header--static .header_nav_item.tab-setsubi:hover a      { font-size: 1.500vw; }
.header--static .header_nav_item.tab-kigyouryoku:hover a  { font-size: 1.504vw; }
.header--static .header_nav_item.tab-interview:hover a    { font-size: 1.008vw; }

/* 追従ナビでは現在地タブを拡大しない（ページ先頭のstaticのみ拡大） */
.header--sticky .header_nav_item.is-current {
  width: 4.32vw;
  height: 9.375vw;
}
.header--sticky .header_nav_item.is-current a {
  letter-spacing: 0.05em;
}
.header--sticky .header_nav_item.tab-top.is-current a          { font-size: 0.821vw; }
.header--sticky .header_nav_item.tab-sekkei.is-current a       { font-size: 1.116vw; }
.header--sticky .header_nav_item.tab-kouzou.is-current a       { font-size: 1.091vw; }
.header--sticky .header_nav_item.tab-setsubi.is-current a      { font-size: 1.067vw; }
.header--sticky .header_nav_item.tab-kigyouryoku.is-current a  { font-size: 1.070vw; }
.header--sticky .header_nav_item.tab-interview.is-current a    { font-size: 0.717vw; }

.header--sticky .header_nav_item {
  transition: opacity 0.3s ease;
}
.header--sticky .header_nav_item:hover {
  opacity: 0.75;
}

.header_nav_item.tab-top a       { background: linear-gradient(to right, var(--tab-top-edge) 0 26%, var(--tab-top-main) 26% 100%); }
.header_nav_item.tab-sekkei a    { background: linear-gradient(to right, var(--tab-sekkei-edge) 0 26%, var(--tab-sekkei-main) 26% 100%); }
.header_nav_item.tab-kouzou a    { background: linear-gradient(to right, var(--tab-kouzou-edge) 0 26%, var(--tab-kouzou-main) 26% 100%); }
.header_nav_item.tab-setsubi a   { background: linear-gradient(to right, var(--tab-setsubi-edge) 0 26%, var(--tab-setsubi-main) 26% 100%); }
.header_nav_item.tab-kigyouryoku a { background: linear-gradient(to right, var(--tab-kigyouryoku-edge) 0 26%, var(--tab-kigyouryoku-main) 26% 100%); }
.header_nav_item.tab-interview a { background: linear-gradient(to right, var(--tab-interview-edge) 0 26%, var(--tab-interview-main) 26% 100%); }

.header_catalog_btn {
  position: absolute;
  left: 68.59vw;
  top: 0.625vw;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
  background: var(--brown-mid);
  font-family: "Kozuka Gothic Pro", "小塚ゴシック Pro", "Noto Sans JP", "Hiragino Kaku Gothic Pro", sans-serif;
  font-size: 1.1307vw;
  letter-spacing: 0.3em;
  white-space: nowrap;
  width: 12.135vw;
  height: 2.448vw;
  border-radius: 2px;
}

.header_catalog_btn:link,
.header_catalog_btn:visited {
  color: #fff;
}

.header_brand {
  position: absolute;
  left: 85.94vw;
  top: 0.156vw;
  width: 9.32vw;
}

.header_brand img {
  width: 100%;
  display: block;
}

.header_nav_item a:link,
.header_nav_item a:visited {
  color: #fff;
}

.sp_header_brand,
.sp_ham_btn,
.sp_drawer,
.sp_overlay {
  display: none;
}

/* ===== sec_footer ===== */
.sec_footer_nav {
  background: #fcf9f2;
  padding: 3.13vw 0 6.25vw;
  text-align: center;
}

/* 下層ページ（トップページ以外）は背景白 */
body:not(.page-top) .sec_footer_nav {
  background: #fff;
}

.sec_footer_nav_list {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 1.0417vw;
}

.sec_footer_nav_list li {
  width: 11.48vw;
}

.sec_footer_nav_list li a {
  display: block;
}

.sec_footer_nav_list li img {
  width: 100%;
  display: block;
}

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

  /* Header */
  body.page-top {
    --header-h: 15.4vw;
  }

  .header--sticky {
    height: var(--header-h);
  }

  .header_inner {
    position: relative;
    align-items: flex-start;
    justify-content: center;
  }

  .header_logo,
  .header_nav,
  .header_catalog_btn,
  .header_brand {
    display: none;
  }

  .sp_header_brand {
    display: block;
  }

  .sp_header_brand img {
    display: block;
    width: 22.74vw;
    height: auto;
  }

  .sp_ham_btn {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.79vw;
    width: 7.69vw;
    height: 7.69vw;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    position: absolute;
    right: 5.556vw;
    top: 50%;
    transform: translateY(-50%);
  }

  /* is_hidden の translateY が縦中央寄せを上書きしないよう、フェードのみにする */
  .sp_ham_btn.is_hidden {
    transform: translateY(-50%);
    opacity: 0;
  }
  .sp_ham_btn.is_show {
    transform: translateY(-50%);
    opacity: 1;
    transition: opacity 2.4s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0.28s;
  }

  .sp_ham_btn span {
    display: block;
    width: 100%;
    height: 0.51vw;
    background: var(--brown-dark);
    transition: all 0.3s ease-in-out;
    transform-origin: center;
  }

  .sp_ham_btn.open span:nth-child(1) {
    transform: translateY(2.3vw) rotate(45deg);
  }

  .sp_ham_btn.open span:nth-child(2) {
    opacity: 0;
  }

  .sp_ham_btn.open span:nth-child(3) {
    transform: translateY(-2.3vw) rotate(-45deg);
  }

  .sp_drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100dvh;
    background: #fff;
    z-index: 99;
    transition: right 0.5s ease;
    display: flex;
    flex-direction: column;
    padding-top: 20.51vw;
    overflow-y: auto;
  }

  .sp_drawer.open {
    right: 0;
  }

  .sp_drawer_list {
    list-style: none;
  }

  .sp_drawer_list li {
    border-bottom: 1px solid #e5e5e5;
    border-left: 1.5vw solid var(--tab-main, #ccc);
  }

  .sp_drawer_list li.tab-top       { --tab-main: var(--tab-top-main); }
  .sp_drawer_list li.tab-sekkei    { --tab-main: var(--tab-sekkei-main); }
  .sp_drawer_list li.tab-kouzou    { --tab-main: var(--tab-kouzou-main); }
  .sp_drawer_list li.tab-setsubi   { --tab-main: var(--tab-setsubi-main); }
  .sp_drawer_list li.tab-kigyouryoku { --tab-main: var(--tab-kigyouryoku-main); }
  .sp_drawer_list li.tab-interview { --tab-main: var(--tab-interview-main); }

  .sp_drawer_list li a {
    display: block;
    padding: 5.13vw 8.97vw;
    font-family: "Shippori Mincho", "Noto Serif JP", serif;
    font-size: 4.2vw;
    font-weight: 500;
    color: #333;
    text-decoration: none;
    letter-spacing: 0.15em;
  }

  .sp_drawer_catalog {
    padding: 10.26vw 8.97vw;
    text-align: center;
  }

  .sp_drawer_catalog a {
    display: block;
    width: 60vw;
    margin: 0 auto;
    background: var(--brown-mid);
    color: #fff;
    font-family: "Shippori Mincho", "Noto Serif JP", serif;
    font-size: 3.8vw;
    letter-spacing: 0.2em;
    padding: 3.5vw 0;
    text-decoration: none;
    text-align: center;
  }

  .sp_overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 98;
  }

  .sp_overlay.open {
    display: block;
  }

  .sec_footer_nav {
    padding: 3.13vw 0 19.25vw;
  }

  .sec_footer_nav_list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    gap: 1.5vw;
  }

  .sec_footer_nav_list li {
    width: 39.74vw;
  }

  .sec_footer_nav_list li:nth-child(odd) {
    justify-self: end;
  }

  .sec_footer_nav_list li:nth-child(even) {
    justify-self: start;
  }

  .sec01 {
    margin-top: calc(-1 * var(--header-h));
    background-image: url('../img/sp/sec01_bg.png');
    background-size: cover;
    padding: calc(3.5vw + var(--header-h)) 0 17.8vw;
  }

  .sec01_house {
    width: 45vw;
  }

  .sec01_text {
    margin-top: 2vw;
  }

  .sec01_lead {
    font-family: "Kozuka Gothic Pro", "小塚ゴシック Pro", "Noto Sans JP", sans-serif;
    font-weight: 500;
    font-size: 3vw;
    color: #000;
    letter-spacing: 0.05em;
    margin-bottom: 1.46vw;
  }

  .sec01_ttl {
    font-family: "Kozuka Gothic Pro", "小塚ゴシック Pro", "Noto Sans JP", sans-serif;
    font-size: 5.4vw;
    font-weight: 500;
    color: #000;
    letter-spacing: 0.05em;
  }

  /* sec02 / sec03 : SPデザイン未確認のため暫定レイアウト */
  .sec02 {
    padding: 0vw 5vw 17vw;
  }

  .sec02_ttl_band {
    height: 16.9231vw;
    padding-top: 0;
    margin: 0 -5vw;
  }

  .sec02_ttl {
    font-size: 3.4188vw;
    font-weight: 400;
    letter-spacing: 0;
    padding: 0 1.8803vw;
  }

  .sec02_ttl_first {
    font-size: 3.4188vw;
  }

  .sec02_ttl::before,
  .sec02_ttl::after {
    width: 22.6496vw;
  }

  .sec02_item,
  .sec02_item:nth-child(3) {
    margin-top: 16vw;
  }

  .sec02_box {
    width: 79.83vw;
    padding: 1.7vw 3vw;
    border-width: 3.08vw;
    border-image-width: 3.08vw;
  }

  .sec02_box p {
    font-size: 3.76vw;
    line-height: 5.47vw;
  }

  .sec02_num {
    font-size: 5.98vw;
  }

  .sec02_asterisk {
    font-size: 1.79vw;
  }

  .sec02_em {
    font-size: 4.5vw;
    line-height: 3.5vw;
  }

  .sec02_chart,
  .sec02_item:nth-child(3) .sec02_chart {
    width: 59.06vw;
    margin-top: 12.99vw;
  }

  .sec02_note {
    margin-top: 5.9vw;
    font-size: 2.39vw;
    line-height: 4.1vw;
  }

  .sec02_note_bold {
    font-size: 2.2vw;
    line-height: 4.6vw;
  }

  .sec02_note_em {
    font-size: 3.1vw;
  }

  .sec02_item:nth-child(3) .sec02_note {
    width: 100%;
    text-align: left;
  }

  .sec02_item:nth-child(3) .sec02_chart {
    width: 89.74vw;
  }

  .sec02_lead {
    margin-top: 14.7vw;
    font-size: 5.15vw;
    line-height: 11.29vw;
  }

  .sec03 {
    background-image: url('../img/sp/sec03_bg.png');
    background-size: cover;
    padding: 8vw 5vw 15vw;
  }

  .sec03_ttl {
    width: 62vw;
    margin: 0 auto;
  }

  .sec03_lead {
    margin-top: -8vw;
    font-size: 2.9vw;
    line-height: 5.3vw;
  }

  /* sec04 : 2x2グリッド + インタビューバナー(SPデザイン実測) */
  .sec04 {
    padding: 0 0 8vw;
  }

  .sec04_cards {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0;
  }

  .sec04_card {
    width: 50vw;
    height: auto;
    padding-bottom: 4vw;
  }

  .sec04_card_hd {
    padding: 4.27vw 3vw 2.5vw;
  }

  .sec04_card_hd_sub {
    font-size: 3.6vw;
    font-weight: 400;
  }

  .sec04_card_hd_main {
    font-size: 4.6vw;
    font-weight: 400;
    width: 41.71vw;
    height: 8.21vw;
    box-sizing: border-box;
    padding: 0;
    margin: 2vw auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sec04_card_photo {
    width: 48.29vw;
    aspect-ratio: 565 / 450;
    margin: 3vw auto 0px;
  }

  .sec04_card_ft {
    font-size: 2.54vw;
    line-height: 3.63vw;
    text-align: center;
    padding: 3vw 1vw 0;
  }

  .sec04_card_btn {
    width: 41.37vw;
    height: 6.32vw;
    font-size: 3.6vw;
    margin: 3vw auto 0;
  }

  .sec04_interview {
    position: relative;
    width: 100%;
    height: 37.01vw;
    margin-top: 10vw;
    overflow: hidden;
  }

  .sec04_interview_bg {
    width: 60vw;
    height: 37.01vw;
  }

  .sec04_interview_tag {
    width: 50.43vw;
    height: 7.6vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.2vw;
    padding: 0 3vw;
  }

  .sec04_interview_body {
    text-align: center;
    left: 7.7vw;
    top: 9.9vw;
  }

  .sec04_interview_role {
    font-size: 2.95vw;
    line-height: 3.69vw;
    margin-top: 1.8vw;
  }

  .sec04_interview_name {
    font-size: 4.87vw;
    line-height: 6.09vw;
    margin-top: 3vw;
    font-weight: 500;
  }

  .sec04_interview_copy {
    font-size: 4.26vw;
    line-height: 7.03vw;
    margin-top: 1vw;
  }

  .sec04_interview_photo {
    left: 52.82vw;
    top: 0;
    width: 22.05vw;
    height: 28.93vw;
  }

  .sec04_interview_btn {
    display: none;
  }

  /* sec05 : SPデザイン実測 */
  .sec05 {
    padding: 17.95vw 5vw 23.16vw;
  }

  .sec05_top_btn {
    width: 37.26vw;
    height: 9.74vw;
    margin: 0 auto;
    font-size: 3.8vw;
  }

  .sec05_lead {
    margin-top: 18.38vw;
    font-size: 4.7vw;
    line-height: 6.5vw;
  }

  .sec05_lead_em {
    margin-top: 5.9vw;
    font-size: 7.14vw;
    line-height: 8vw;
  }

  .sec05_catalog {
    width: 93.93vw;
    margin-top: 18.8vw;
  }

  .sec05_closing {
    margin-top: 15.64vw;
    font-size: 3.42vw;
    line-height: 10.26vw;
  }

  .sec05_btn {
    width: 81.79vw;
    height: 14.27vw;
    margin: 17.18vw auto 0;
    font-size: 4.2vw;
    border: 1px solid #8b6b4a;
  }
}