/* Theme Name: Acero Author: ISS Version: 1.8 Text Domain: acero */
/* ================== Webフォント ================== */
@import url("https://fonts.googleapis.com/css2?family=Aboreto&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');
/* 自前のA-OTFを同梱して使う場合（任意） */
@font-face {
  font-family: 'AOTFShueiMinchoPro';
  src: url('fonts/AOTFShueiMinchoPro.woff2') format('woff2'), url('fonts/AOTFShueiMinchoPro.woff') format('woff');
  font-display: swap;
}

/* h2はAboreto。日本語は明朝にフォールバック */
h2 {
  font-family: "Aboreto", "A-OTF Shuei Mincho Pro", "AOTFShueiMinchoPro", "Hiragino Mincho ProN", "Yu Mincho", "HGS明朝E", serif !important;
  font-weight: 400;
}

/* ========== 基本設定 ========== */
:root {
  --bg: #D8DAD2;
  --ink: #2a2f2c;
  --muted: #6f7a74;
  --line: #cfd6cc;
  --brand: #3f5a49;
  --brand-deep: #103126;
  --btn-bg: #e9e5da;
  --container: 1080px;
  --header-h: 80px;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: "A-OTF Shuei Mincho Pro", "AOTFShueiMinchoPro", "Hiragino Mincho ProN", "Yu Mincho", "HGS明朝E", "MS Mincho", serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.9;
  letter-spacing: .02em;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  padding: 0;
  margin: 0 10vw;
}

.ui-sans {
  font-family: system-ui, Roboto, "Noto Sans JP", "Yu Gothic", sans-serif
}

/* ========== header / nav ========== */
.site-header {
  padding: 20px 0;
  background: transparent;
  position: relative;
  z-index: 10
}

.site-header.overlay {
  position: fixed;
  /* ← absolute だと下要素に隠れやすい */
  inset: 20px 0 auto 0;
  /* top:0; left:0; right:0; */
  background: transparent;
  z-index: 1000;
  padding-top: max(20px, env(safe-area-inset-top));
  /* iOSノッチ対策 */
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between; 
}

.logo {
  order: 1;
}

.logo img {
  height: 40px;
  width: auto;
  display: block;
}

.hamburger {
  align-items: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  height: 44px;
  justify-content: space-between;
  margin-left: auto;
  order: 3;
  padding: 10px;
  position: relative;
  width: 50px;
  z-index: 10001;
  transform: scale(0.8);          /* 全体を3割小さく（70％表示） */
  transform-origin: center right; /* 右上に寄ったまま縮小 */
}

.hamburger span {
  height: 2px;
  background: var(--ink);
  display: block;
  border-radius: 2px;
  transition: .25s;
}

.hamburger>span:not(.hamburger__text) {
  background: currentColor;
  border-radius: 4px;
  box-sizing: border-box;
  display: inline-block;
  height: 4px;
  left: 0;
  position: absolute;
  transition: .25s;
  width: 100%;
}


.gnav-list {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0
}

.gnav-list a {
  text-decoration: none;
  color: var(--ink)
}


.nav-open #navOverlay[hidden] {
  display: block;
}

/* === 1) PC/SP共通の暗幕を有効化 === */
#navOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 9998;        /* ドロワー(9999)の一歩下、ヘッダーより上 */
  display: none;
}
.nav-open #navOverlay { display: block; }


/* 背景写真上のナビ配色 */
.site-header.header-on-photo .gnav-list a {
  color: #fff;          /* 写真の上ではメニュー文字を白に */
}

/* ハンバーガーメニューの色切り替え */
/* 背景写真あり（header-on-photo付き）→ 白 */
.site-header.header-on-photo .hamburger {
  color: #fff;
}

/* 背景写真なし → 黒（通常カラー） */
.site-header:not(.header-on-photo) .hamburger {
  color: var(--ink);
}

/* ドロワーメニューを開いている間は必ず黒 */
body.nav-open .hamburger {
  color: var(--ink) !important;
}
/* スクロール固定＋“ロゴが動く”対策 */
html {
  scrollbar-gutter: stable both-edges;
  /* 対応ブラウザならこれで横揺れほぼゼロ */
}

body.no-scroll {
  overflow: hidden;
}

/* ヘッダー左右端寄せ（端	に少し余白を残す） */
.site-header .header-inner {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: flex-start;
  max-width: none;
  padding-inline: clamp(12px, 3vw, 24px);
  width: 100%;
}
.footer-links{
  display: grid;
  gap: 10px;            /* 行間 */
}

.footer-links__row{
  display: flex;
  justify-content: center; /* 横中央 */
  align-items: center;     /* 縦もセンター */
  gap: 80px;               /* アイコン間の余白 */
  
}

/* 念のためアイコンのベースライン崩れ対策 */
.sns__link img{ display:block; width:32px; height:auto; }

/* ========== hero / titles ========== */
.hero {
  position: relative;
  min-height: 72svh;
  display: grid;
  place-items: center;
  overflow: hidden
}

.hero.unified-hero {
  min-height: calc(120svh + var(--header-h));
  padding-top: var(--header-h);
  background-size: cover;
  background-position: center var(--hero-y, top);
  position: relative;
  overflow: hidden;
  background-image: var(--img);
}

.title {
  font-size: 45px;
  margin-block-end: 0;
}

.title-line {
  height: 2px;
  background: var(--ink);
  width: 140px;
  margin-top: 12px;
  opacity: .5
}

/* 見出しとラインを横並びに（バーは中央まで） */
.page-title {
  --gap: 12px;
  margin-top: 10vh;
  margin-bottom: 5vh;
}

.page-title .container {
  display: flex;
  align-items: center;
  gap: var(--gap);
  position: relative;
  margin: 0 10vw;
}

.page-title .title {
  margin: 0;
  line-height: 1;
  white-space: nowrap;
}

.page-title .title-line {
  height: 2px;
  background: var(--ink);
  opacity: .5;
  flex: 1 1 auto;
  max-width: calc(30% - var(--gap));
  align-self: center;
  border-radius: 1px;
}



/* ========== full-bleed helper ========== */
.full-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-top: 10vw;
  margin-left: -50vw;
  margin-right: -50vw;
}

.img-full {
  display: block;
  width: 100%;
  height: auto
}

/* ===== PHILOSOPHY：画像6 / テキスト4 ===== */
.philosophy {
  margin-inline: auto;
}

/* 共通行（デフォ：左=画像60 / 右=テキスト40） */
.split-row {
  display: grid;
  grid-template-columns: 6fr 4fr;
  /* 左=画像 右=テキスト をデフォルトに */
  grid-template-areas: "media text";
  column-gap: 5vw;
  align-items: center;
  overflow: visible;
}

/* テキストが長い時の縦落ち防止 */
.split-row>* {
  min-width: 0;
}

/* 右画像（上段）：左=テキスト40 / 右=画像60 */
.split-row.split--img-right {
  grid-template-columns: 4fr 6fr;
  grid-template-areas: "text media";
  margin-bottom: 15vw;
}

/* 左画像（下段）：左=画像60 / 右=テキスト40 */
.split-row.split--img-left {
  grid-template-columns: 6fr 4fr;
  grid-template-areas: "media text";
  gap: 5vw;
}

/* エリア割り当て */
.split-row__media {
  grid-area: media;
  position: relative;
  overflow: visible;
}

.split-row__text {
  grid-area: text;
}

/* テキスト側の余白（左右で出し分け） */
.split--img-right .split-row__text {
  margin-left: 10vw;
}

.split--img-left .split-row__text {
  margin-right: 10vw;
}

/* 画像の基本 */
.split-row__media img {
  display: block;
  height: auto;
}

/* 単枚画像だけを100%に（.is-layered には当てない） */
.split-row__media:not(.is-layered)>img {
  display: block;
  width: 100%;
  height: auto;
}

/* レイヤー構成のときは個別制御（幅は変数で調整） */
.split-row__media.is-layered>img {
  display: block;
  height: auto;
}

/* 2枚重ね用（カスタムプロパティはHTMLのstyleで上書き可） */
.is-layered {
  --base-scale: 1.5;
  --base-shift-x: 0;
  --base-shift-y: 0;
  --top-scale: 0.2;
  --top-offset-x: -19vw;
  --top-offset-y: -16vw;
}

.media-base {
  display: block;
  height: auto;
  left: var(--base-shift-x, 0);
  position: relative;
  top: var(--base-shift-y, 0);
  width: calc(100% * var(--base-scale, 1));
  /* ← ここでベースサイズ */
  z-index: 1;
}

/* 反転は必要なときだけ */
.media-base.is-flipped {
  transform: scale(-1, 1);
  height: 150%;
}

/*木目*/
.media-top {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  top: -14vw;
  left: -19vw;
  width: calc(100% * var(--top-scale));
  /* ← 木目の大きさ */
  height: auto;
  transform-origin: top left;
  opacity: var(--top-opacity, 0.45);
  /* ← 透明度(0〜1) */
}

/* ボタン（そのまま流用） */
.btn-outline-PHILOSOPHY {
  display: block;
  padding: 12px 40px;
  border: 1px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
  border-radius: 4px;
  text-align: center;
  margin-top: 5vw;
}
.btn-outline-PHILOSOPHY:hover {
  background: #28332e;
  color: #fff;
}


/* ========== NEWS list ========== */
.news-list {
  padding: 24px 0 56px
}

.news-item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  padding: 22px 0;
}

.news-date {
  color: var(--muted);
  display: flex;
  align-items: center;
}

.news-title {
  margin: 0 0 4px
}

.btn-outline {
  display: inline-block;
  padding: 12px 40px;
  border: 1px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
  border-radius: 4px;
  width: 45%;
  text-align: center;
}
.btn-outline:hover {
  background: #28332e;
  color: #fff;
}

.more-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5vw !important;
}

.news-block {
  margin: 0 10vw;
}



/* ========== FAQ ========== */
/* リスト全体：上だけ線、行で区切り。gapは使わない */
.faq-list {
  margin: 0px;
  padding: 0;
  display: block;
  border-top: 1px solid var(--faq-line);
}

/* 各行（details） */
.faq-list .faq {
  background: var(--faq-bg);
  height: auto;
  border-bottom: 0.5px solid #9c9283;
  /* ← 行の一番下に線 */
  position: relative;
}

/* タイトル行（summary） */
.faq-list .faq>summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 12px 44px 1vw 0;
  /* 右はアイコン分の余白 */
  list-style: none;
  cursor: pointer;
}

/* ブラウザの三角を消す（全ブラウザ） */
.faq-list .faq>summary::-webkit-details-marker {
  display: none;
}

.faq-list .faq>summary::marker {
  content: "";
  border: 0;
}

/* 左の “Q” */
.faq-list .faq>summary::before {
  content: "Q";
  color: #a58400;
  font-weight: 700;
  margin-right: .1rem;
  border: 0;
  display: inline-grid;
  /* 行頭で確実に幅を確保して折返しも綺麗に */
  place-items: center;
  width: 1.4em;
  /* 必要なら 1.2–1.6em で調整 */
}

/* 右の ＋／−（JS不要） */
.faq-list .faq>summary::after {
  content: "+";
  color: var(--faq-icon);
  font-size: 18px;
  line-height: 1;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform .600s;
}

.faq-list .faq[open]>summary::after {
  content: "−";
  /* U+2212 のマイナスで綺麗 */
}

/* 回答（本文）—滑らか開閉 */
.faq-list .faq .faq-a {
  margin: 0;
  padding: 10px 16px 14px 0;
  display: block;
  overflow: hidden;
  /* ← 初期状態（閉） */
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height .60s ease, opacity .25s ease, transform .35s ease;
}

/* 開いた時の状態 */
.faq-list .faq[open] .faq-a {
  max-height: 1000px;
  /* 中身より十分大きく */
  opacity: 1;
  transform: translateY(0);
}

/* アクセシビリティ（任意） */
.faq-list .faq>summary:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 3px #a9c6ff66;
  border-radius: 4px;
}

.faq-list .faq>summary:hover {
  background: #e1e8de;
}

/* ========== 12カラムユーティリリティ ========== */
.grid-12 {
  --gap: 32px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
  align-items: center;
}

.grid-12.items-start {
  align-items: start;
}

.col {
  grid-column: var(--start, 1) / span var(--span, 12);
}

.col img {
  width: 100%;
  height: auto;
  display: block;
}

.jp-mincho {
  font-family: inherit;
}

.vstack {
  gap: 28px;
}

/* ========== Intro split ========== */
.intro-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  /* 横2列 */
  gap: clamp(20px, 3vw, 40px);
  align-items: stretch;
  width: 100vw;
  margin: 15vh calc(50% - 50vw) 0;
  overflow-x: clip;
  position: relative;
}

/* ← これが無いと長文で列が押し広がり、縦に落ちやすい */
.intro-split>* {
  min-width: 0;
}

/* 画像（左カラム） */
.intro-split__image {
  /* columnいっぱいにぴったり収める */
  min-height: clamp(360px, 46vw, 720px);
  background: var(--img) center center / cover no-repeat;
  /* contain→cover に変更 */
}

/* 右カラム：12カラムグリッド */
.intro-split__content {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  align-content: center;
  /* テキストを縦中央寄せ気味に */
  padding: 0 24px 24px;
  z-index: 1;
  /* デコより上に */
}

/* デコ（位置は左下に出したい想定。右下なら left→right に戻してOK） */
.intro-split.has-decor {
  overflow: visible;
}

.intro-split.has-decor::after {
  content: "";
  position: absolute;
  right: -267px;
  /* ← 右下にしたい場合は right:0 に */
  bottom: -250px;
  width: min(80vw, 1000px);
  aspect-ratio: 2/1;
  background: var(--decor) no-repeat left bottom / contain;
  pointer-events: none;
  z-index: 0;
}

/* 縦書き */
.v-head {
  writing-mode: vertical-rl;
  text-orientation: upright;
  line-height: 2.4;
  letter-spacing: .18em;
  margin: 0;
  font-size: clamp(20px, 2.4vw, 28px);
}

.v-copy {
  writing-mode: vertical-rl;
  text-orientation: upright;
  line-height: 3;
  letter-spacing: .12em;
  margin: 0;
  color: #1F1B13;
  font-size: clamp(12px, 1.4vw, 16px);
}

/* 子要素の配置（--start / --span を使う） */
.intro-split__content>.col {
  grid-column: var(--start) / span var(--span);
}


/* ========== 縦並び・中央揃え ========== */
.stack-center {
  padding: clamp(20px, 3vw, 32px) 0;
}

.stack-center .stack-inner {
  max-width: min(900px, 92vw);
  margin-inline: auto;
  display: grid;
  gap: clamp(16px, 3vw, 28px);
  justify-items: center;
}

.stack-center img {
  display: block;
  height: auto;
  width: min(820px, 100%);
}

/* ========== footer ========== */
.site-footer {
  background: var(--brand-deep);
  color: #cfe0d5;
}

.footer-top {
  padding: 48px 24px;
  text-align: center
}

.footer-bottom {
  padding: 14px 24px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  text-align: center
}

/* ========== Hamburger trigger（移植 & 既存構成に最適化） ========== */



/* 位置（1本目=上 / 2本目=中央 / 3本目=下） */
.hamburger>span:nth-of-type(1) {
  top: 0;
}

.hamburger>span:nth-of-type(2) {
  top: 20px;
}

.hamburger>span:nth-of-type(3) {
  bottom: 0;
}


/* 開いたらインク色＆X化（#btn01.active を aria 属性に読み替え） */
.hamburger[aria-expanded="true"] {
  color: var(--ink);
}

.hamburger[aria-expanded="true"]>span:nth-of-type(1) {
  transform: translateY(20px) rotate(-45deg);
}

.hamburger[aria-expanded="true"]>span:nth-of-type(2) {
  opacity: 0;
}

.hamburger[aria-expanded="true"]>span:nth-of-type(3) {
  transform: translateY(-20px) rotate(45deg);
}

/* 任意：テキスト「メニュー」を出す場合 */
.hamburger .hamburger__text {
  position: absolute;
  left: 56px;
  /* アイコンの右に表示 */
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  letter-spacing: .08em;
  color: currentColor;
  /* 開閉で色が連動 */
  user-select: none;
  pointer-events: none;
}

/* gnavをドロワーとして使う */
.gnav.drawer[hidden] {
  display: none;
}

.gnav.drawer {
  position: fixed;
  inset: 0;                 /* 画面全体をカバー */
  z-index: 9999;
  pointer-events: none;     /* 閉時はクリック不可（open時だけ許可） */
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  /* 旧式のtranslateXを無効化 */
}


.gnav .drawer__panel {
  position: absolute;
  inset: 0 0 0 auto;
  width: var(--drawer-w); 
  background: #E6E9E0;
  color: #222;
  transform: translateX(100%);
  transition: transform .3s ease;
  display: flex;
  flex-direction: column;
  z-index: 2;
  box-shadow: -12px 0 30px rgba(0,0,0,.18);  /* 好みで強さ調整 */

}

body.nav-open .gnav.drawer {
  transform: none !important;
  pointer-events: auto;  /* 閉時は none、開時は auto */
}

body.nav-open .gnav .drawer__panel {
  transform: translateX(0);
}

body.nav-open .gnav .drawer__backdrop {
  opacity: 1;
}

.gnav .drawer__head {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 18px 14px;
  position:relative;
}

.gnav .drawer__close {
  appearance: none;
  border: 0;
  background: none;
  font-size: 28px;
  cursor: pointer;
}

.gnav .drawer__body {
  padding: 8px 18px 24px;
  overflow: auto;
}

.gnav .nav-link,
.gnav .nav-acc {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 16px 8px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.gnav .nav-link .nav-en,
.gnav .nav-acc .nav-en {
  letter-spacing: .14em;
  font-size: 14px;
}

.gnav .nav-ja {
  display: block;
  font-size: 11px;
  color: #666;
  margin-top: 2px;
}

.gnav .nav-group {
  margin-top: 4px;
}

.gnav .nav-acc {
  position: relative;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 16px 28px 8px 8px; /* 右は矢印分 */
}

.gnav .nav-acc .chev {
  position: absolute;
  right: 8px;
  top: 50%;
  width: 16px;
  height: 16px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  transform-origin: 50% 50%;
  transition: transform .2s ease;
  opacity: .9; 
}

.gnav .nav-acc[aria-expanded="true"] .chev {
  transform: translateY(-50%) rotate(-135deg);
}
/* ariaで開いたら表示（JSが hidden を外す） */
.gnav .nav-acc[aria-expanded="true"] + .nav-children{
  max-height: 800px;   /* 中身より大きめでOK */
  padding: 6px 0 6px 8px;
  opacity: 1;
}
.gnav .nav-children {
  max-height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .4s ease, opacity .25s ease, padding .25s ease;
}

.gnav .nav-child {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 8px 12px 2px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.gnav .nav-child .dash {
  display: inline-block;
  width: 16px;
  margin-top: 3px;
  border-top: 2px solid #777;
}

.gnav .nav-child b {
  font-size: 13px;
  letter-spacing: .08em;
  display: block;
}

.gnav .nav-child small {
  display: block;
  font-size: 11px;
  color: #666;
}

.gnav .btn-cta {
  display: block;
  margin: 24px 0 8px;
  text-align: center;
  text-decoration: none;
  background: #50604d;
  color: #fff;
  padding: 14px 16px;
  border-radius: 2px;
}

.gnav .drawer__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 8px 0;
}

.gnav .policy {
  font-size: 12px;
  color: #333;
  text-decoration: none;
}

.gnav .sns a {
  margin-left: 14px;
  text-decoration: none;
  font-size: 18px;
}

/* ====== Drawer Nav: フォント指定 ====== */
/* 英字の見出し（大きい文字） */
.gnav .nav-en,
.gnav .nav-child b {
  font-family: "Aboreto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  letter-spacing: .12em;      /* お好みで */
  font-size: 16px;   /* 大きい方 */
  line-height: 1.3;
}

/* 日本語サブ（小さい文字） */
.gnav .nav-ja,
.gnav .nav-child small {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-weight: 500;           /* 400～500で調整 */
  font-size: 11px;   /* 小さい方 */
  line-height: 1.6;
}

/* ついでに行間を少し整える（任意） */
.gnav .nav-link,
.gnav .nav-acc,
.gnav .nav-child {
  line-height: 1.6;
}
/* ========== Responsive（スマホ共通） ========== */
/* ===============================
   1024px以下（タブレット＋スマホ）
   =============================== */
@media (max-width:959.98px) {
  :root {
    --drawer-w: 100vw;
  }
  .container h1 {
    font-family:"A-OTF Shuei Mincho Pro", "AOTFShueiMinchoPro", "Hiragino Mincho ProN", "Yu Mincho", "HGS明朝E", serif !important;
  }
}
/* PC=1/4幅、スマホ=全幅 */
@media (min-width:960px) {
  :root {
    --drawer-w: 25vw;
  }
}
@media (max-width:900px) {
  .gnav-list {
    flex-direction: column;
    gap: 18px;
  }

  /* 三本線の基本位置（閉じてるとき） */
  .hamburger {
    width: 32px;
    height: 24px;
    padding: 10px;
    position: relative;
  }

  .hamburger > span:not(.hamburger__text) {
    left: 0;
    right: 0;
    margin: 0 auto;
  }

  .hamburger span:nth-child(1) {
    top: 0px;
  }

  .hamburger span:nth-child(2) {
    top: 11px;
  }

  .hamburger span:nth-child(3) {
    top: 23px;
  }

  /* 開いたとき：1本目と3本目を真ん中に集めて×にする */
  .nav-open .hamburger span:nth-child(1),
  .nav-open .hamburger span:nth-child(3) {
    top: 50%;
  }

  .nav-open .hamburger span:nth-child(1) {
    transform: translateY(-50%) rotate(45deg);
  }

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

  .nav-open .hamburger span:nth-child(3) {
    transform: translateY(-50%) rotate(-45deg);
  }

  #siteNav {
    height: 100dvh;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  .tiles {
    grid-template-columns: 1fr;
    margin: 0 7vw;
  }

  .news-item {
    grid-template-columns: 90px 1fr;
    gap: 0px;
  }

  .grid-12 {
    grid-template-columns: 1fr;
    --gap: 20px;
  }

  .col {
    grid-column: 1 / -1;
  }
}
/* ===============================
   768px以下（スマホ）
   =============================== */
/* スマホ */
@media (max-width: 768px) {
  .intro-split {
    grid-template-columns: 1fr;
    width: 100%;
    margin: 15vh 0 0;  /* 上の余白だけ残す */
    left: auto;
    right: auto;
  }

  .intro-split__image {
    min-height: 62vw;
  }

  .intro-split__content {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 30px;
  }
  .v-head {
    margin-right: 24px;  /* 右側に余白を足す＝本文との間が広がる */
  }
  /* 1つ目の.col（本文） → 左寄せ＆広めに取る */
  .intro-split__content > .col:nth-of-type(1) {
    --start: 1;  /* 1列目から */
    --span: 7;   /* 7/12 幅（6でもOK） */
    margin-left: -20px;
  }

  /* 2つ目の.col（タイトル） → 右側に固定 */
  .intro-split__content > .col:nth-of-type(2) {
    --start: 9;  /* 9列目から */
    --span: 2;   /* 2/12 幅 */
  }
  .split-row {
  }
  .split-row.split--img-left {
    grid-template-columns: 1fr;  /* 1カラム */
    grid-template-areas:
      "media"                    /* 上が画像、下がテキスト */
      "text";
    margin: 0 7vw 0 0;
  }
  .split-row__media is-layered {
    display: grid;               /* グリッドのままでOK */
    grid-template-columns: 1fr;  /* 1カラム */
    grid-template-areas:
      "text"
      "media";                    /* 上が画像、下がテキスト */
    margin: 0 7vw 0 0;
    gap: 0;
  }
  .btn-outline-PHILOSOPHY{
    margin: 7vw 0 15vw 0;
  }

  .split--img-right .split-row__text{
    margin: 16px 7vw 0 0;
  }
  .split--img-left .split-row__text {
    margin: 16px 0 0 7vw;
  }
  .media-top {
    display: none !important;;
  }
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }
  .full-bleed {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    left: auto;
    right: auto;
  }
  .site-header .header-inner {
    position: relative;
    justify-content: center;  /* 真ん中基準に */
  }

  /* ★ロゴ（左アイコン）を中央寄せ */
  .logo {
    margin: 0 auto;
  }

  /* ★ハンバーガーは右上に固定しておく */
  .hamburger {
    position: absolute;
    right: clamp(12px, 3vw, 24px); /* 右からの余白（好みで16pxとかでもOK） */
    top: 50%;
    transform: translateY(-50%) scale(0.7); /* 真ん中に合わせつつ縮小 */
    margin-left: 0;                            /* PC用の auto を打ち消す */
  }
  .intro-split__image{
    width: 80%;
    height: auto;
  }
  .v-copy {
    margin: 25px 0 0 0;
  }
  .full-bleed .img-full {
    width: 100%;
    min-height: 300px;   /* 好きな高さに調整 */
    object-fit: cover;   /* はみ出した分はトリミング */
    display: block;
  }
  /* intro-split のデコ画像をスマホで中央に */
  .intro-split.has-decor::after {
    left: 58%;          /* 中央基準にして */
    right: auto;        /* PC用 right を無効に */
    bottom: -20vw;      /* 縦位置はざっくり。あとで好きに調整してOK */
    transform: translateX(-50%);  /* 左右のど真ん中に */
    width: 120%;        /* 画面の8割くらいの幅 */
    aspect-ratio: 2 / 1;
    background: var(--decor) no-repeat center bottom / contain;
  }
  .split-row__media {
  }
   .split-row.split--img-right {
    display: grid;               /* グリッドのままでOK */
    grid-template-columns: 1fr;  /* 1カラム */
    grid-template-areas:
      "media"
      "text";                    /* 上が画像、下がテキスト */
    margin: 0 0 0 7vw;
  }
  .news-block {
    margin: 0 7vw;
  }
  .news-date {
    color: var(--muted);
    display: flex;
    align-items: normal;
  }
}

@media (max-width:600px) {
  .page-title .container {
  }

  .page-title .title-line {
    max-width: 40%;
  }
}
@media (max-width: 480px) {
  body {
    font-size: 14px;
  }

  .container {
    margin: 0 7vw;
    padding: 0;
  }

  .page-title {
    margin: 5vw 2vw 10vw 2vw;
  }

  .page-title .container {
    margin: 0 5vw;
    gap: 10px;
  }

  .title {
    font-size: 30px;
    margin-block-end: 0;
  }

  .hero {
    min-height: 70svh;
  }

  .hero.unified-hero {
    min-height: calc(100svh + var(--header-h));
  }

  .btn-outline {
    width: 100%;
    margin: 5vw;
  }
}