/* TOP page — 詳細指示書/トップ.docx 完全準拠フォントサイズ
 * 仕様: 全てのフォントサイズ・行間を詳細指示書通りに
 */

/* ============ Section 1: HERO KV ============ */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  color: var(--c-white);
}
.hero__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.6s ease-in-out;
}
.hero__slide.is-active { opacity: 1; }

/* KV title (キャプション) — 仕様: 48px/48 desktop, 32px/32 mobile, 白文字・ドロップシャドウ
 * No.3 対応: 右端バーへの重なり回避のため \n を改行として解釈する (pre-line) */
.hero__caption {
  position: absolute;
  left: clamp(40px, 6vw, 100px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  white-space: pre-line;
  max-width: min(60vw, calc(100vw - 220px));
  font-family: var(--f-en-serif);
  font-weight: 500;
  font-style: normal;
  font-size: clamp(32px, 3.5vw, 48px);
  line-height: 1.15;
  color: var(--c-white);
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
  letter-spacing: 0.01em;
}
@media (max-width: 768px) {
  .hero__caption { white-space: normal; font-size: 32px; line-height: 32px; max-width: 80%; }
}

/* ============ Section 2: HERO TITLE BLOCK (メインコピー＋リード文) ============ */
/* 仕様: KVタイトル 116/94 D, 48/44 M */
.hero-title {
  padding: clamp(30px, 12vw, 45px) 0 0;
  background: var(--c-white);
  color: var(--c-text);
  overflow: hidden;
}
.hero-title__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);   /* R83 (2026-09-15): was minmax(0,1.27fr) minmax(0,1fr) — a fr-based
    track keeps growing with the viewport even after the text (fit-content,
    font-size capped by clamp()) stops growing, opening an ever-widening gap
    between text and image on wide screens. auto sizes the column to the
    text's actual content width, so extra space on wide viewports goes to
    the image column instead. */
  gap: 64px;   /* R84 (2026-09-15): was clamp(40px, 9vw, 116px) — fixed so it never grows with viewport width */
  align-items: start;
  padding-left: clamp(24px, 4.3vw, 56px);   /* モック: タイトル左端 x55 */
}
.hero-title__text {
  width: fit-content;          /* #13: 見出し幅にフィット → 右端＝タイトル右端 */
  padding-top: clamp(5px, 9vw, 30px);
}
.hero-title__heading {
  font-family: var(--f-en-serif);
  font-weight: 600;
  font-size: clamp(56px, 9vw, 120px); 
  line-height: clamp(51px, 7.3vw, 105px);
  letter-spacing: -0.005em;
  color: var(--c-text);
  white-space: nowrap;
  padding-left: 1ch;          /* #13: タイトルを1文字分右にずらす */
}
.hero-title__visual {
  position: relative;
  align-self: stretch;   /* R85 (2026-09-15): removed max-width:520px + margin-left:auto —
    the image was capped at 520px and right-aligned within its (viewport-
    growing) 1fr column via margin-left:auto, leaving empty space between
    the text and the image itself, on top of the fixed gap. Now the image
    fills its whole column. */
}
.hero-title__visual img {
  width: 100%;
  height: 100%;   /* R83 (2026-09-15): was height:auto + aspect-ratio:500/652,
    which sized the image purely by its own ratio, independent of the text
    column's height — so it never actually matched .hero-title__cta's
    bottom edge. Now fills the stretched container (which already matches
    the row height via align-self:stretch above) and crops via object-fit. */
  object-fit: cover;
  display: block;
}
/* CTA 矢印付きリンク — 仕様: EN 32 D 20 M, JP 32 D 16 M */
/* #13: CTA を見出しの下に・テキスト右端をタイトル右端に揃え・ボタンはテキストの右隣 */
/* [2026-09 再修正] ボタンを position:absolute から通常の flex子要素に変更。
   absoluteだとグリッドの幅計算にボタン分の幅が一切反映されず、見出しが
   横長になる画面幅でボタンが右カラムの画像に食い込んでいた(magic numberの
   オフセット調整では根本解決しない)。flexにすることでボタンの幅もこの
   要素自身の幅に正しく算入され、fit-contentの親(.hero-title__text)経由で
   グリッド側が自動的に必要な余白を確保するようになる。 */
.hero-title__cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(16px, 2vw, 24px);
  width: 100%;
  margin: clamp(40px, 6vw, 100px) 0 0 0;
  padding-bottom: clamp(20px, 6vw, 40px)!important;
  font-family: var(--f-jp-mincho);
  font-size: clamp(1rem, 2.6vw, 1.25rem)!important;
  line-height: 1;
  color: var(--c-text);
  letter-spacing: 0.04em;
  border: 0;
  padding: 0;
  transition: opacity var(--t-base);
}
.hero-title__cta .cta-arrow__box {
  flex-shrink: 0;
}

.hero-title__cta:hover { opacity: 0.7; background: transparent; color: var(--c-text); border: 0; }
.cta-arrow__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(50px, 5vw, 70px);
  height: clamp(75px, 5vw, 140px);
  border: var(--line-thin) solid var(--c-text);
  font-size: clamp(20px, 2.5vw, 32px);
  transition: background var(--t-base), color var(--t-base);
}
.hero-title__cta:hover .cta-arrow__box {
  background: var(--c-black);
  color: var(--c-white);
}

@media (max-width: 900px) {
  .hero-title__inner { grid-template-columns: 1fr; padding-left: 0; padding-inline: clamp(20px, 5vw, 40px); }
  .hero-title__heading { font-size: 48px; line-height: 44px; }
  .hero-title__visual img { min-height: 280px; }
}

/* ============ Section 3: BRAND STATEMENT (KVリード文 15/31) ============ */
.brand-statement {
  padding: clamp(80px, 8vw, 180px) clamp(20px, 4vw, 60px) clamp(60px, 8vw, 125px);
  background: var(--c-white);
  text-align: center;
}
.brand-statement__inner {
  max-width: 720px;
  margin: 0 auto;
  font-family: var(--f-jp-mincho);
  font-size: 1.05rem;
  line-height: 31px;
  letter-spacing: 0.04em;
  color: var(--c-text);
}
.brand-statement__inner p {
  margin-bottom: clamp(20px, 2.5vw, 36px);
  font-size: clamp(1rem, 2.5vw, 1.1rem);
  line-height: clamp(2rem, 4.8vw, 2.8rem);
}
.brand-statement__inner p:last-child { margin-bottom: 0; }

/* Batch3 item4: mobile TOP text below hero image → left align (JP+EN, overrides inline style on EN) */
@media (max-width: 767px) {
  .brand-statement,
  .brand-statement__inner,
  .brand-statement__inner p {
    text-align: left !important;
  }
}

/* ============ Section 4: OUR COMMITMENT ============ */
/* 仕様: セクションタイトル 64/56 D, 36/31 M (中央揃え) */
/* Batch3 item3: reduce top padding — was clamp(80px, 10vw, 160px) */
.commitment {
  padding: clamp(60px, 5vw, 120px) 0 clamp(60px, 12vw, 150px);
  background: var(--c-white);
  text-align: center;
}
.commitment__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0px, 4vw, 12px);
  margin-bottom: clamp(60px, 8vw, 120px);
}
.commitment__title {
  font-family: var(--f-en-serif);
  font-weight: 700;
  font-size: clamp(2rem, 4.8vw, 4.5rem);
  line-height: 0.8em;
  letter-spacing: 0.02em;
}
.commitment__title::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: var(--c-text);
  opacity: 0.6;
  margin-top: clamp(8px, 2vw, 10px);
}
/* 仕様: JPサブタイトル 26/42 D, 15/31 M */
.commitment__subtitle {
  font-family: var(--f-jp-mincho);
  font-weight: 500;
  font-size: clamp(0.9rem, 2vw, 1.35rem);
  line-height: clamp(31px, 3.3vw, 42px);
  letter-spacing: 0.06em;
}

.hr-decorative {
  display: block;
  width: calc(100% +38px);
  height: 1px;
  background: var(--c-text);
  opacity: 0.7;
}
.hr-decorative--small {
  width: clamp(40px, 6vw, 80px);
  margin: 16px auto;
}

/* 仕様: 画像 290x390 D, 320x240 M */
.commitment__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(30px, 4vw, 60px);
  padding-inline: clamp(40px, 6vw, 100px);
}
.commitment-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.commitment-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 290 / 390;
  margin-bottom: 56px;
}
.commitment-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.commitment-card__icon {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.commitment-card__icon img {
  display: block;
  width: clamp(56px, 5.2vw, 70px);
  height: clamp(56px, 5.2vw, 70px);
}
/* 仕様: アイコン下タイトル 36/36 D, 28/28 M */
.commitment-card__title {
  font-family: var(--f-en-serif);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 36px);
  line-height: clamp(28px, 3vw, 36px);
  letter-spacing: 0.02em;
  margin-top: 8px;
  min-height: clamp(56px, 6vw, 72px);   /* R95 (2026-09-15): reserve 2 lines (line-height × 2) so a
    1-line title (e.g. "Beyond Luxury") aligns with 2-line titles (e.g. "Inner Transformation") */
  display: flex;
  align-items: flex-end;   /* R97 (2026-09-15): was align-items:center + justify-content:flex-end —
    wrong axis. This is a row-direction flex container, so vertical position is controlled by
    align-items (cross-axis), not justify-content (horizontal/main-axis). flex-end bottom-aligns
    the title text so its last line (and the underline right after it) lands at the same Y for
    every card, whether the title is 1 or 2 lines. */
  justify-content: center;
}
/* 仕様: アイコン下本文 15/24 D/M */
.commitment-card__body {
  font-family: var(--f-jp-mincho);
  font-size: 15px;
  line-height: 24px;
  margin-top: 6px;
}

@media (max-width: 900px) {
  .commitment__cards { grid-template-columns: 1fr; gap: clamp(56px, 10vw, 80px); padding-inline: clamp(20px, 6vw, 40px); }
}

/* ============ Section 5: OUR PHILOSOPHY (モック準拠: 2列独立配置) ============
 *  - 左カラム: 縦長写真 → welcome+ABOUT US (縦に独立スタック)
 *  - 右カラム: タイトル+柱 → 機織り画像 (縦に独立スタック)
 *  - 列が独立しているので、右画像の上辺が左画像の下辺より高い位置にくる
 */
.philosophy {
  background: var(--c-white);
  padding: 0 0 clamp(60px, 8vw, 150px) 0;
  display: grid;
  /* モック実測: 左カラム(写真) 512/1280=40%, gap ≈ 38px, 右カラム 730/1280=57% */
  grid-template-columns: minmax(0, 40fr) minmax(0, 57fr);
  column-gap: clamp(16px, 3vw, 38px);
  align-items: stretch;
}
.philosophy__col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(40px, 5vw, 80px);
}
.philosophy__col--right {
  gap: clamp(28px, 4vw, 56px);
}
.philosophy__photo {
  width: 100%;
}
.philosophy__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1.88;       /* モック実測: 512w × 960h ≈ 1:1.88 */
  object-fit: cover;
}
.philosophy__content {
  padding-top: clamp(40px, 6vw, 100px);
  text-align: left;
}
/* 仕様: セクションタイトル 64/56 D, 36/31 M */
.philosophy__title {
  font-family: var(--f-en-serif);
  font-weight: 700;
  font-size: clamp(2rem, 4.8vw, 4.5rem);
  line-height: 0.8em;
  letter-spacing: 0.02em;
  text-align: right;
  padding-right: clamp(30px, 4vw, 60px);
}
/* hr ライン: 写真右辺〜ページ右端まで横一直線 */
.philosophy__content .hr-decorative {
  display: block;
  width: calc(100% + clamp(16px, 3vw, 38px));   /* R84 (2026-09-15): extend left across the column-gap to touch the photo */
  margin-left: calc(-1 * clamp(16px, 3vw, 38px));
  height: 1px;
  background: var(--c-text);
  opacity: 0.6;
  margin-top: 3px;
}
/* #10 P2: 仕様 EN 32/42 D, 17/31 M（右寄せ） — トップ.docx P93
   元値 clamp(17,2.2vw,28) / lh clamp(28,2.8vw,38) は desktop max が -13% (28 < 32) だった。
   テキスト "Beyond Luxury" は JP/EN 共通で英語表記のため、EN serif italic で 17→32 / lh 31→42 に統一。 */
.philosophy__sub {
  font-family: var(--f-en-serif);
  font-style: normal;
  font-size: clamp(17px, 2.2vw, 32px);
  line-height: clamp(31px, 2.9vw, 42px);
  text-align: right;
  padding-right: clamp(35px, 4.4vw, 70px);
  margin-top: clamp(10px, 1.4vw, 18px);
  margin-bottom: clamp(36px, 5vw, 72px);
  color: var(--c-text);
}
.philosophy__pillars {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vw, 32px);
  text-align: left;
  padding-left: clamp(20px, 9vw, 130px);
  padding-right: clamp(20px, 4vw, 60px);
  margin-bottom: clamp(20px, 4vw, 60px);
}
/* 仕様: 本文内タイトル 24/31 D/M */
.philosophy__pillar h3 {
  font-family: var(--f-en-serif);
  font-weight: 700;
  font-size: clamp(1.3rem, 20vw, 1.8rem);
  letter-spacing: 0.02em;
}
/* 仕様: 本文 15/31 D/M */
.philosophy__pillar p {
  font-family: var(--f-jp-mincho);
  line-height: 31px;
  margin-top: 6px;
}

.philosophy__welcome-block {
  /* モック実測: 左コラム端から約 64px 右にインデント */
  padding: clamp(20px, 3vw, 40px) 0 clamp(20px, 3vw, 40px) clamp(28px, 8vw, 120px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  gap: clamp(24px, 3.5vw, 40px);
}
/* 仕様: Welcome EN 24/31 D, 22/28 M */
.philosophy__welcome {
  font-family: var(--f-jp-mincho);
  font-style: normal;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  letter-spacing: 0.04em;
}
/* 仕様: Welcome JP 20/31 D, 16/31 M */
.philosophy__welcome-jp {
  font-family: var(--f-jp-mincho);
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 31px;
}
/* 仕様: About us ボタン 20 D, 15 M */
.philosophy__about-btn {
  padding: clamp(16px, 2vw, 22px) clamp(40px, 5vw, 64px);
  background: var(--c-navy);
  color: var(--c-white);
  font-family: var(--f-en-serif);
  font-weight: 500;
  font-size: clamp(15px, 1.6vw, 20px);
  letter-spacing: 0.08em;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  transition: background var(--t-base);
}
.philosophy__about-btn:hover { background: var(--c-red); }
.philosophy__about-btn .arrow { transition: transform var(--t-base); }
.philosophy__about-btn:hover .arrow { transform: translateX(8px); }
.philosophy__weaving {
  width: 100%;
  overflow: hidden;
}
.philosophy__weaving img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.37 / 1;       /* モデル実測: 673w × 490h ≈ 1.37:1 (横長)。モバイル/フォールバック用 */
  object-fit: cover;
}
@media (min-width: 901px) {
  .philosophy__weaving {
    height: 100%;   /* 親.philosophy__weaving自体もflex-growで可変高さになるので追従 */
  }
  .philosophy__weaving img {
    height: 100%;         /* flex-growで決まった枠いっぱいに(aspect-ratio固定をやめる) */
    aspect-ratio: auto;
  }
}
/* weaving 画像: フロントはマークアップ上 .philosophy__content の中(sub と pillars の間)。
   ABOUTは .philosophy__content の外、.philosophy__col--right の直接の子(contentの隣)。
   構造が違うので両方のセレクタを用意し、どちらのページでも効くようにする。 */
@media (min-width: 901px) {
  .philosophy__content:has(> .philosophy__weaving) {
    display: flex;
    flex-direction: column;
    height: 100%;   /* col--right(gridでstretch済み=左カラムと同じ高さ)いっぱいに。
                       weavingが直接の子として中に入っている構造(フロント)の時だけ適用。
                       ABOUT側はweavingがcontentの外(col--rightの子)にあるので対象外
                       (対象外だとcontentが100%高さを取ってweaving用の余白が消えてしまう)。 */
  }
  .philosophy__content > .philosophy__weaving {
    order: 2;
    margin-top: clamp(28px, 4vw, 56px);
    /* KVと同じ考え方: 右画像(織物写真)が左テキストの下端まで自動で伸びる。
       flex-growで残りの縦スペースをすべて埋める(縮みすぎ防止のmin-heightあり)。 */
    flex: 1 1 auto;
    min-height: 220px;
  }
  /* ABOUT側の構造(.philosophy__col--right の直接の子)向け。上と同じ考え方。 */
  .philosophy__col--right {
    justify-content: flex-start;  /* 継承されるspace-betweenを打ち消し、flex-growに委ねる */
  }
  .philosophy__col--right > .philosophy__weaving {
    margin-top: clamp(28px, 4vw, 56px);
    flex: 1 1 auto;
    min-height: 220px;
  }
}
@media (max-width: 900px) {
  .philosophy__content > .philosophy__weaving {
    width: auto;   /* content の左右 padding を打ち消して全幅(左右対称)に */
    margin-inline: calc(-1 * clamp(20px, 6vw, 40px));
    margin-block: clamp(24px, 5vw, 40px);
  }
  /* Task #16A: モバイルは OUR PHILOSOPHY タイトルを weaving 画像の下に配置
   * (mock 0619_トップページ_mobile.pdf 準拠 — 画像 → タイトル の順) */
  .philosophy__content { display: flex; flex-direction: column; }
  .philosophy__content > .philosophy__weaving { order: -1; margin-top: 0; }
}

@media (max-width: 900px) {
  .philosophy { grid-template-columns: 1fr; row-gap: clamp(40px, 8vw, 80px); }
  .philosophy__content { padding-inline: clamp(20px, 6vw, 40px); text-align: left; }
  .philosophy__pillars { padding-left: 0; }
}

/* ============ Section 6: BEYOND THE GUIDEBOOK ============ */
.guidebook {
  background: var(--c-white);
}
.guidebook__hero-photo {
  width: 100%;

}
.guidebook__hero-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  display: block;
}
.guidebook__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2.5vw, 32px);
  text-align: center;
  padding-inline: clamp(20px, 5vw, 60px);
  padding-top: clamp(60px, 10vw, 110px);
}
/* 仕様: セクションタイトル 64/56 D, 36/31 M (中央揃え) */
.guidebook__title {
  font-family: var(--f-en-serif);
  font-weight: 700;
  font-size: clamp(2rem, 4.8vw, 4.5rem);
  line-height: 0.8em;
  letter-spacing: 0.02e
}
  
.guidebook__title::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: var(--c-text);
  opacity: 0.6;
  margin-top: clamp(8px, 2vw, 10px);
}

/* 仕様: JPサブタイトル 26/42 D, 15/31 M */
.guidebook__subtitle {
  font-family: var(--f-jp-mincho);
  font-size: clamp(15px, 2vw, 26px);
  line-height: clamp(31px, 3.3vw, 42px);
  letter-spacing: 0.06em;
}
/* [2026-09] フォント指定(family/size/line-height/letter-spacing)は base.css の
   .t-body(JP16px) / body.is-en .t-body(EN18px, en-serif) に一本化
   (PHP側で .t-body クラスを併記)。ここではレイアウトのみ。
   これで ABOUT/GUIDE/フロントとも1箇所(base.css)を直せば全て反映される。 */
.guidebook__lead {
  max-width: 760px;
  margin-top: 8px;
}

.guidebook__tabs-wrap {
  max-width: none;   /* パネルを画面端まで full-bleed させる (タブは中央寄せのまま) */
  padding: clamp(80px, 10vw, 160px) 0 clamp(80px, 6vw, 120px);
}
.guidebook__tabs { padding: 0; }
.guidebook__tab-list {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 2.3vw, 30px);   /* モック: タブ間隔 約30px */
  border-bottom: 1px solid rgba(20, 20, 19, 0.3);  /* モック: タブ直下の全幅罫線 */
  margin-bottom: clamp(56px, 9.5vw, 122px);        /* モック: 罫線→パネル ~122px */
}
/* 仕様: タブ 24 D, 20 M */
.guidebook__tab {
  padding: 20px clamp(20px, 3vw, 48px);
  min-width: clamp(160px, 20.7vw, 265px);  /* モック: ピル幅 均一 265px */
  background: var(--c-gray);
  color: var(--c-white);
  font-family: var(--f-jp-mincho);
  font-size: clamp(1.15rem, 2vw, 1.25rem);
  line-height: 1;
  letter-spacing: 0.06em;
  text-align: center;
  border: 0;
  cursor: pointer;
  transition: background var(--t-base);
  white-space: nowrap;
}

.guidebook__tab.is-active { background: var(--c-navy); }
.guidebook__tab:not(.is-active):hover { background: #a8a8a8; }

.guidebook__panel { display: none; }
.guidebook__panel.is-active { display: block; }
/* モック準拠 (TOPページ guidebook パネル, 0619_トップページ_Desktop.pdf 実測):
 *   フルブリード: 左画像 535×800 を画面左端 flush / 右画像 700×960 を画面右端 flush
 *   左上: 見出し+本文 (左インデント ~112px, 本文幅 ~368px で折返し)
 *   右下: VIEW MORE (右画像の下・右インデント ~86px)
 *   中央 gap ≈ 45px
 */
.guidebook__panels {
  width: 100%;   /* 親(tabs-wrap)が full 幅なのでそのまま画面端まで */
}
.guidebook__panel-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 535fr) minmax(0, 700fr);
  gap: clamp(24px, 3.3vw, 45px);  /* モック仕様の中央gap ≈45pxを実際に反映(旧: 0) */
  align-items: stretch;
}
.guidebook__panel-left {
  display: flex;
  flex-direction: column;
}
.guidebook__panel-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;   /* 右画像・ボタンを画面右端へ */
}
.guidebook__panel-cta {
  align-self: flex-end;
  flex-shrink: 0;
  margin-top: clamp(40px, 8.8vw, 113px);   /* モック: 右画像の下に ~113px ギャップ */
  margin-right: clamp(20px, 6.6vw, 84px);  /* モック: 右インデント ~84px */
  min-width: clamp(200px, 20.7vw, 265px);  /* モック: ボタン幅 265px */
  padding: clamp(20px, 2.2vw, 28px) clamp(24px, 3vw, 40px);  /* モック: 高さ ~74px */
  font-size: clamp(15px, 1.4vw, 17px);
  letter-spacing: 0.08em;
  text-align: center;
}
/* 左画像: 535 × 800、画面左端 flush。KVと同じ考え方: gapは変えず(0のまま)、
   画像は自トラック幅に100%追従させる(min(535px,100%)の頭打ちをやめる)。
   これにより広い画面での謎の余白/狭い画面での重なりが解消する。
   高さはaspect-ratio(535/800)のまま変更なし。 */
.guidebook__panel-img-small {
  display: block;
  width: 100%;
  aspect-ratio: 535 / 800;
  object-fit: cover;
  align-self: flex-start;
  margin-top: auto;        /* テキストの下・左カラム下端へ */
}
/* 右画像: 700 × 960、画面右端 flush。同上、100%追従に変更。 */
.guidebook__panel-img-large {
  display: block;
  width: 100%;
  aspect-ratio: 700 / 960;
  object-fit: cover;
}
@media (max-width: 900px) {
  .guidebook__panels { width: auto; margin-left: 0; }
  .guidebook__panel-inner { grid-template-columns: 1fr; gap: clamp(24px, 4vw, 40px); align-items: start; }
  .guidebook__panel-right { align-items: stretch; }
  .guidebook__panel-img-small { width: 100%; margin-top: clamp(20px, 4vw, 32px); aspect-ratio: 535 / 800; }
  .guidebook__panel-img-large { width: 100%; aspect-ratio: 700 / 960; }
  .guidebook__panel-cta { align-self: flex-start; margin-right: 0; margin-top: clamp(20px, 4vw, 32px); }
}
/* 仕様: タブ内タイトル 32/31 D, 24/31 M */
.guidebook__panel-title {
  font-family: var(--f-en-serif);
  font-weight: 700;
  font-size: clamp(1.15rem, 20vw, 1.4rem);
  line-height: 31px;
  letter-spacing: 0.02em;
  margin-left: clamp(24px, 8.75vw, 112px);   /* モック: テキスト左インデント ~112px */
  max-width: clamp(280px, 29vw, 372px);
}
body.is-en .guidebook__panel-title {
  font-size: clamp(1.3rem, 20vw, 1.8rem);
  line-height: 31px;
  letter-spacing: 0.02em;
  margin-left: clamp(24px, 8.75vw, 112px);
  max-width: clamp(280px, 29vw, 372px);
}
/* 仕様: タブ内本文 15/31 D/M */
.guidebook__panel-body {
  margin-top: 20px;
  margin-left: clamp(24px, 8.75vw, 112px);
  max-width: clamp(280px, 29vw, 372px);      /* モック: 本文幅 ~368px で折返し */
  font-family: var(--f-jp-mincho);
  font-size: clamp(0.95rem, 29vw, 1rem); 
  line-height: 31px;
}

@media (max-width: 900px) {
  .guidebook__tab-list { flex-direction: column; align-items: center; }
  /* Batch3-item7: mobile — buttons ~265px wide (70% of 375 viewport) per mockup, centered */
  .guidebook__tab { width: min(265px, 70%); max-width: 265px; }
  .guidebook__panel-inner { grid-template-columns: 1fr; }
}

/* ============ Section 7: JOURNAL ============ */
.journal {
  padding: clamp(10px, 10vw, 60px) 0 clamp(100px, 12vw, 200px);
  background: var(--c-white);
  text-align: center;
}
.journal__heading-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 60px);
}
.journal__deco {
  flex: 0 0 auto;
  width: clamp(100px, 20vw, 500px);   /* R83 (2026-09-15): enlarged from clamp(80px,11vw,160px) */
  height: auto;
  color: var(--c-navy);
  opacity: 0.78;
  display: block;
  position: relative;   /* R84 (2026-09-15): sit above the line's slight overlap into the books */
  z-index: 1;
}
/* Item 3 (2026-07-04): bookstand-left.png / bookstand-right.png are proper
   left/right pair images; no horizontal flip needed. */
/* 仕様: セクションタイトル 64/56 D, 36/31 M */
.journal__title {
  position: relative;
  font-family: var(--f-en-serif);
  font-weight: 700;
  font-size: clamp(2rem, 4.8vw, 4.5rem);
  line-height: 0.8em;
  letter-spacing: 0.02em;
}
.journal__title::after {
  /* R84 (2026-09-15): back to a title-anchored line (not full row width),
     extended a little past the title's own edges so it just grazes/overlaps
     the books on each side instead of running the full row width or
     crossing through the title text. */
  content: "";
  position: absolute;
  left: clamp(-80px, 4.8vw, -60px);
  right: -60px;
  bottom: clamp(-21px, -1.6vw, -5px);
  height: 1px;
  background: var(--c-text);
  opacity: 0.6;
  z-index: 0;
}

/* 仕様: サブタイトル JP 26/42 D, 15/28 M (※ Mobile行間は28) */
.journal__lead {
  margin: clamp(30px, 4vw, 50px) 0 clamp(60px, 10vw, 100px) 0; 
  font-family: var(--f-jp-mincho);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 2.2;
}
.journal__cards {
  margin-top: clamp(48px, 6vw, 80px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(40px, 5vw, 64px) clamp(18px, 3.6vw, 40px);   /* R98 (2026-09-15): matched to .archive-grid--3col (was a single clamp(40-64px) for both axes) */
  text-align: left;
  max-width: calc(1085px + 2 * clamp(20px, 4vw, 60px));   /* R98 (2026-09-15): matched to .archive-grid--3col so both grids land on the same edges */
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 60px);   /* R98 (2026-09-15): was clamp(40px,6vw,100px) — matched to .archive-grid--3col */
}
/* R99 (2026-09-15): .journal-card / .journal-card > a / .journal-card__body /
   .journal-card__more(+::after,.arrow) / .journal-card__title(JP) / .journal-card__img
   は全部 pages.css 側の .archive-card__* に統合済み(front-page.php / page-en-top.php の
   マークアップ自体を archive-card archive-card--journal に統一したため、このファイルの
   .journal-card__* セレクタはもう何にもマッチしない)。
   1枚目の画像位置調整だけ、ページ固有(body.is-front)なのでここに残す。 */
body.is-front .archive-grid--3col .archive-card--journal:first-child .archive-card__img img {
  object-position: 30% center;
}
/* R99 (2026-09-15): .journal-card:hover hover-scale removed — .archive-card:hover
   .archive-card__img img (pages.css) already covers this now that the classes match. */

/* R99 (2026-09-15): .journal-card__{date,title,body,more} color/hover block removed —
   dead now that the markup uses .archive-card__* (see pages.css for the shared rule). */

.journal__viewmore { margin-top: clamp(60px, 10vw, 100px); }

@media (max-width: 900px) {
  .journal__cards { grid-template-columns: repeat(2, 1fr); padding-inline: clamp(20px, 5vw, 32px); }
}
@media (max-width: 560px) {
  /* #71: モバイルもサムネは2列レイアウト */
  .journal__cards { grid-template-columns: repeat(2, 1fr); gap: clamp(12px, 4vw, 20px); }
}

/* ============ Section 8: CONCIERGE (モック準拠) ============
 * 画像をフル幅背景、紺の帯を中央オーバーレイ
 */
.concierge {
  position: relative;
  min-height: clamp(420px, 50vw, 620px);
  overflow: hidden;
  display: flex;
  align-items: stretch;                      /* 紺帯を全高に */
  justify-content: flex-start;
  padding-left: clamp(40px, 16vw, 240px);    /* 帯を少し左へ */
  background: #000;
}
.concierge__bg {
  position: absolute;
  inset: 0;
  background-image: url("../images/top/concierge.jpg");
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.concierge__box {
  position: relative;
  z-index: 2;
  background: var(--c-navy);
  color: var(--c-white);
  padding: clamp(36px, 4vw, 56px) clamp(40px, 4.5vw, 64px);
  text-align: left;                          /* #89-93: タイトル/本文は左寄せ */
  width: clamp(360px, 44vw, 600px);          /* 帯を少し広げる（タイトル1行に） */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;                   /* 中身を縦中央 */
  gap: clamp(14px, 1.8vw, 22px);
}
/* Backward compatibility (旧構造) */
.concierge__text {
  padding: clamp(50px, 7vw, 100px) clamp(40px, 6vw, 100px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  position: relative;
  z-index: 2;
}
/* 仕様: タイトル EN 32/46 D, 20/26 M */
.concierge__title {
  font-family: var(--f-en-serif);
  font-weight: 500;
  font-size: clamp(20px, 2.5vw, 32px);
  line-height: clamp(26px, 3.6vw, 46px);
  letter-spacing: 0.02em;
}
/* 仕様: タイトル JP 28/46 D, 22/36 M */
.concierge__title-jp {
  font-family: var(--f-jp-mincho);
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: clamp(36px, 3.6vw, 46px);
  white-space: nowrap;          /* 改行なし（1行） */
}
/* 仕様: 本文 EN 18/31 D, 15/20 M (※JP 15/26 D/M) */
.concierge__body {
  font-family: var(--f-jp-mincho);
  font-size: 15px;
  line-height: 26px;
}
/* 仕様: お問い合わせアイコン JP 20 D, 15 M */
.concierge__cta {
  margin-top: 8px;
  align-self: flex-end;            /* #89-93: ボタンは右寄せ */
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 36px;
  background: transparent;
  color: var(--c-white);
  border: var(--line-thin) solid var(--c-white);
  font-family: var(--f-jp-mincho);
  font-size: clamp(15px, 1.6vw, 20px);
  letter-spacing: 0.04em;
  white-space: nowrap;             /* CTA は1行（末尾1文字の折返し防止） */
  transition: background var(--t-base), color var(--t-base);
}
.concierge__cta:hover { background: var(--c-white); color: var(--c-navy); }
.concierge__cta .arrow { transition: transform var(--t-base); }
.concierge__cta:hover .arrow { transform: translateX(8px); }
.concierge__visual {
  /* 旧構造: モック準拠の背景画像方式に統合済 */
  display: none;
}

@media (max-width: 768px) {
  .concierge__box { width: clamp(260px, 80vw, 360px); padding: clamp(30px, 5vw, 50px) clamp(28px, 5vw, 48px); }
}




/* Concierge お問い合わせ JP: 20 D, 15 M (現状OK clamp(15,1.6vw,20)) */

/* === BP #7 (v0.8.21): mobile-small / mobile / desktop additions ===
 * 仕様 (基本設計_共通パーツ P21-27): 320px まで崩れなしの保証。
 * 監査で 320px 時に .philosophy の左 padding (clamp 0-60px / 4vw) と
 * 子要素の幅 100% + 各セクションの padding-inline が組み合わさり
 * scrollWidth が viewport を +15〜24px 超過していた。
 * mobile-small(370) 以下で section padding-left を 0 に折り畳む。
 */
@media (max-width: 370px) {
  .philosophy {
    /* 左 padding を完全に 0 に。column gap も最小化して 320px に収める */
    padding-left: 0;
    padding-right: 0;
    column-gap: 0;
  }
  .philosophy__content {
    /* 900px BP で既に grid-template-columns: 1fr に切替済なので
       padding-inline を縮小して右端の overflow を解消 */
    padding-inline: 12px;
  }
  .philosophy__title {
    /* 元: padding-left: clamp(40px, 16vw, 240px) — 320px では 51.2px。
       右寄せの装飾余白を縮めて overflow 回避 */
    padding-left: 0;
    padding-right: 0;
  }
  .philosophy__pillars {
    padding-left: 0;
    padding-right: 0;
  }
  .philosophy__welcome-block {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* TOP の JOURNAL 見出し: 左右の装飾画像 80px + gap 20px + タイトル文字幅で
     320px 超過 (実測: deco.right=343.5px)。装飾画像を 60px 級に縮小 +
     gap も縮めて 320px 内に収める */
  .journal__deco {
    width: 56px;
  }
  .journal__heading-row {
    gap: 10px;
    padding-inline: 8px;
  }
}
/* === END BP #7 === */

/* ============================================================
 * === Wave A fixes (2026-07-02): No.52/84/108/110/111/112/114/115
 * ============================================================
 * - No.84 desktop: OUR COMMITMENT 一番右のカードの hr-decorative 縦位置揃え
 * - No.108 mobile: KV 2枚目 (hero-title__visual) の縦長解消
 * - No.110 mobile: OUR COMMITMENT カード画像を仕様 320x240 (4:3 横長) に
 * - No.52/111 mobile: OUR PHILOSOPHY を写真より上に配置 (title/pillars 先)
 * - No.111/112 mobile: OUR PHILOSOPHY 画像の縦長解消
 * - No.114 mobile: BEYOND THE GUIDEBOOK パネル順序 (title → 画像 → 本文 → 画像)
 * - No.115 mobile: BEYOND THE GUIDEBOOK 画像の縦長解消 + VIEW MORE 右寄せ余白
 */

/* --- No.84 (desktop): commitment カード 3列の hr-decorative 縦位置揃え ---
 * "Beyond Luxury" は 1 行、他 2 枚は 2 行なので、右カードの hr が上ずれていた。
 * title に 2 行分の min-height を確保し、単行タイトルも 2 行分の高さを取ることで
 * 続く hr-decorative--small の縦位置を 3 カード間で揃える。 */
@media (min-width: 901px) {
  .commitment-card__title {
    min-height: calc(2 * clamp(28px, 3vw, 36px));
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
  }
}

/* --- No.108 (mobile): KV 2枚目 = hero-title__visual の縦長解消 ---
 * デスクトップは aspect-ratio 500/652 = 0.77 (縦長)。モバイル 1 列で全幅になると
 * 画面高を大きく占有していた。モバイルでは 4:3 に緩和 + max-height で天井を設定。 */
@media (max-width: 900px) {
  .hero-title__visual {
    max-width: 100%;
    margin-left: 0;
  }
  .hero-title__visual img {
    aspect-ratio: 4 / 3;
    max-height: 60vh;
    min-height: 0;
  }
}

/* --- No.110 + Task #17 (mobile): OUR COMMITMENT カード ---
 * カード画像は 320x240 (4:3 横長) に + Task #17: アイコンは画像の下ではなく左に配置
 * (mock 0619_トップページ_mobile.pdf: [icon]  [image] 横並び)
 * デスクトップの絶対配置 (画像下中央にオーバーラップ) は @media の外で維持。 */
@media (max-width: 900px) {
  .commitment-card__media {
    /* Task #17: 画像と横並びレイアウトへ変更 */
    display: flex;
    align-items: center;
    gap: clamp(14px, 4vw, 22px);
    aspect-ratio: auto;      /* 子要素で個別指定 */
    margin-bottom: 24px;     /* アイコンが画像下にはみ出さないので余白圧縮 */
    max-width: 380px;
    width: 100%;
    margin-inline: auto;
  }
  .commitment-card__icon {
    /* Task #17: デスクトップの absolute + 半分下オーバーラップを解除、左に静的配置 */
    position: static;
    transform: none;
    order: -1;               /* 画像より左に */
    flex: 0 0 auto;
  }
  .commitment-card__img {
    flex: 1 1 auto;
    height: auto;
    aspect-ratio: 4 / 3;     /* 画像自体は 4:3 横長を維持 */
    min-width: 0;
  }
  .commitment-card__title {
    font-size: 28px;
    line-height: 28px;
    margin-top: 12px;
  }
}

/* --- Batch3 item5 (mobile): OUR COMMITMENT 画像の左端をアイコンの中央に合わせる ---
 * mock 0619_トップページ_mobile.pdf: image left edge = icon centerX (image overlaps icon).
 * 元の flex 横並び (gap) を position:relative に切り替え、icon を画像の左端に
 * 半分オーバーラップさせる。画像は wrapper 右端まで拡張して大きくする。 */
@media (max-width: 900px) {
  .commitment-card__media {
    display: block !important;
    position: relative !important;
    gap: 0 !important;
    max-width: none !important;
    padding-left: 28px !important; /* half of 56px icon: icon centerX = padding-left */
    margin-bottom: 32px !important;
    aspect-ratio: auto !important;
  }
  .commitment-card__icon {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 56px !important;
    height: 56px !important;
    z-index: 2 !important;
    order: initial !important;
    flex: initial !important;
  }
  .commitment-card__img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    flex: initial !important;
    min-width: 0 !important;
    height: auto !important;
  }
}

/* --- No.52 / No.111 (mobile): OUR PHILOSOPHY 順序反転 ---
 * DOM: col--left (写真 + welcome + ABOUT US) → col--right (title + Beyond Luxury +
 * weaving + pillars) の順。モバイルでは PHILOSOPHY テキスト部を先に表示する。 */
@media (max-width: 900px) {
  .philosophy__col--left { order: 2; }
  .philosophy__col--right { order: 1; }
}

/* --- No.111 / No.112 (mobile): OUR PHILOSOPHY 画像の縦長解消 --- */
@media (max-width: 900px) {
  .philosophy__photo img {
    aspect-ratio: 4 / 3;     /* was 1 / 1.88 (極端な縦長) */
    max-height: 70vh;
  }
  .philosophy__weaving img {
    aspect-ratio: 16 / 9;    /* was 1.37 / 1 → やや横長で高さ制限 */
    max-height: 50vh;
  }
}

/* --- No.114 (mobile): BEYOND THE GUIDEBOOK パネル順序変更 ---
 * DOM: panel-left = title → body → small_img, panel-right = large_img → CTA。
 * モバイルでは flex order で title → small_img → body の順に並べ替え、
 * 続く panel-right は large_img → CTA なので全体で title → 画像 → 本文 → 画像 (→ CTA)。 */
@media (max-width: 900px) {
  .guidebook__panel-title { order: 1; }
  .guidebook__panel-img-small { order: 2; }
  .guidebook__panel-body { order: 3; }
}

/* --- No.115 (mobile): BEYOND THE GUIDEBOOK 画像の縦長解消 + VIEW MORE 右寄せ余白 ---
 * 元は small=535/800, large=700/960 (どちらも縦長) → モバイル全幅で極端に伸びる。
 * 4:3 横長へ、かつ max-height で頭打ち。CTA は左寄せ→右寄せに変更し右余白を確保。 */
@media (max-width: 900px) {
  .guidebook__panel-img-small,
  .guidebook__panel-img-large {
    aspect-ratio: 4 / 3;
    max-height: 60vh;
    width: 100%;
  }
  .guidebook__panel-img-small {
    margin-top: clamp(16px, 4vw, 24px);
  }
  .guidebook__panel-cta {
    align-self: flex-end;
    margin-right: clamp(16px, 5vw, 32px);
    margin-top: clamp(24px, 5vw, 40px);
  }
}
/* === END Wave A === */

/* --- Task #16B (mobile): 責任範囲限定のレスポンシブ改行ユーティリティ ---
 * 用途: concierge 見出し「旅のご相談はぜひお気軽に。」のモバイル改行
 * (mock 0619_トップページ_mobile.pdf: 「旅のご相談はぜひ / お気軽に。」)
 * デスクトップでは display:none で br を無効化し 1 行を維持。 */
.br-sp { display: none; }
@media (max-width: 400px) {
  .br-sp { display: inline; }
}

/* === Task Q5 (mobile): OUR PHILOSOPHY レイアウト — mockup 準拠 =========
 * mock 0619_トップページ_mobile.pdf p1 seg-03 に完全一致:
 *   Row 1: 縦長写真 (LEFT ~62%) + 縦書きタイトル "OUR PHILOSOPHY / Beyond Luxury" (RIGHT ~38%)
 *   Row 2: 3 pillars (Authenticity / Sustainability / Rejuvenation) 全幅
 *   Row 3: 織物画像 (横長・edge-to-edge)
 *   Row 4: welcome テキスト + ABOUT US ボタン
 * 既存 mobile 順序制御 (No.52/16A/111/112) を fully override。
 * ============================================================== */
@media (max-width: 900px) {
  .philosophy {
    display: grid;
    /* Task #28: モック 0619_トップページ_mobile.pdf 実測
     *   写真幅 = 295.6pt / 375pt = 78.8% (viewport 左端 bleed)
     *   縦書きタイトル列 = 21.2% (~75-80pt)
     * 従前 62/38 は写真が狭すぎ、左に padding 22.5px 残っていた。
     * 対応: 水平 padding=0 + grid を 78.8/21.2 + 個別行に padding-inline を付与 */
    grid-template-columns: minmax(0, 78.8%) minmax(0, 21.2%);
    /* Task #30: row 1 分割 (1a=title / 1b=sub) — 写真が両方を span、
     * 右列で title(上) → sub(下) に縦書きスタック配置 */
    grid-template-rows: auto auto auto auto auto;
    column-gap: 0;
    row-gap: clamp(28px, 6vw, 44px);
    padding: clamp(48px, 10vw, 80px) 0;
    align-items: start;
  }
  /* col--left / col--right / content の入れ子を平坦化 → 孫要素が philosophy grid の直接子に */
  .philosophy__col--left,
  .philosophy__col--right,
  .philosophy__content {
    display: contents;
  }

  /* Row 1-2 col 1: 縦長写真 (viewport 左端 bleed) — title と sub 両行を span */
  .philosophy__photo {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    width: 100%;
  }
  .philosophy__photo img {
    /* Task #28: モック実測 295.6pt × 526.6pt → aspect 1:1.78 (≈9/16) */
    aspect-ratio: 1 / 1.78;
    max-height: none;
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }

  /* Row 1 col 2: 縦書きタイトル (写真右上, 右端揃え)
   * Task #30 verifier: font 28→36px, distFromRight 82→25px, layout stack title/sub */
  .philosophy__title {
    grid-column: 2 / 3;
    grid-row: 1;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: var(--f-en-serif);
    font-weight: 500;
    font-size: clamp(30px, 9.3vw, 38px);
    line-height: 1;
    letter-spacing: 0.02em;
    padding: clamp(16px, 4vw, 28px) 0 0 0;
    margin: 0 clamp(24px, 7.5vw, 32px) 0 0;
    text-align: left;
    align-self: start;
    justify-self: end;
    color: var(--c-text);
  }
  /* Row 2 col 2: サブタイトル (title の下, 同一右端揃え)
   * Task #30 verifier: font 12→20px, layout stacked below title */
  .philosophy__sub {
    grid-column: 2 / 3;
    grid-row: 2;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: var(--f-en-serif);
    font-style: normal;
    font-size: clamp(18px, 5.3vw, 22px);
    line-height: 1;
    letter-spacing: 0.02em;
    padding: clamp(8px, 2vw, 12px) 0 0 0;
    margin: 0 clamp(24px, 7.5vw, 32px) 0 0;
    text-align: left;
    align-self: start;
    justify-self: end;
    color: var(--c-text);
  }
  /* 水平線: 縦書きタイトル列の頂部から右端まで */
  .philosophy__content .hr-decorative {
    grid-column: 2 / 3;
    grid-row: 1;
    align-self: start;
    justify-self: stretch;
    display: block;
    width: 100%;
    height: 1px;
    margin: 0;
    background: var(--c-text);
    opacity: 0.6;
  }

  /* Row 3: pillars (全幅) */
  .philosophy__pillars {
    grid-column: 1 / -1;
    grid-row: 3;
    /* Task #28: 親 padding=0 化に伴い個別行で水平 padding 補償 */
    padding-inline: clamp(20px, 6vw, 40px);
    gap: clamp(20px, 4vw, 32px);
  }

  /* Row 4: 織物画像 (全幅・edge-to-edge)
   * Task #28: 親 padding=0 化により negative margin 不要 */
  .philosophy__content > .philosophy__weaving {
    grid-column: 1 / -1;
    grid-row: 4;
    width: 100%;
    margin-inline: 0;
    margin-block: 0;
  }
  .philosophy__weaving img {
    aspect-ratio: 16 / 9;
    max-height: 50vh;
    width: 100%;
    display: block;
    object-fit: cover;
  }

  /* Row 5: welcome + ABOUT US (全幅)
   * Task #28: 親 padding=0 化に伴い個別行で水平 padding 補償 */
  .philosophy__welcome-block {
    grid-column: 1 / -1;
    grid-row: 5;
    padding: 0 clamp(20px, 6vw, 40px);
    align-items: flex-start;
  }
}
/* === END Task Q5 ===================================================== */