@charset "UTF-8";
/* ===================================================================
   株式会社T-with コーポレートサイト
   Figma: T-with様サイト制作-2
     トップページ SP        : 2051:14675 (375 × 5984)
     デスクトップ背景フレーム: 2051:15127 (1440 × 1024)
     メニュー展開           : 262:370   (375 × 775)
   数値はすべてFigmaの実数値。丸めなし。
   =================================================================== */

/* -------------------------------------------------------------------
   1. フォント
   ------------------------------------------------------------------- */
@font-face {
  font-family: 'BD Script';
  src: url('../fonts/BDScript-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 2026-09 先方よりWebライセンス取得済みのフォントファイルをご支給いただき、正式導入。
   D-1の確認事項は解決。BD Scriptはフォント読み込み失敗時のフォールバックとして残す。 */
@font-face {
  font-family: 'Antro Vectra';
  src: url('../fonts/AntroVectra-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------------------
   2. 変数
   ------------------------------------------------------------------- */
:root {
  /* 色（Figma実値） */
  --c-blue: #103673;            /* T-with blue */
  --c-placeholder: #8fa4c6;
  --c-field: #e4ecf8;
  --c-red: #ca0508;
  --c-white: #fff;
  --c-footer-overlay: rgba(49, 78, 109, 0.8);
  --c-hero-screen: #d6d2d2;
  --c-menu-bg: #103673;

  /* 書体 */
  --f-ja: 'Zen Old Mincho', serif;
  --f-en: 'Antro Vectra', 'BD Script', 'Zen Old Mincho', serif;  /* Figma指定どおり Antro Vectra を正式採用 */

  /* 主要寸法（SPフレーム 375px 基準） */
  --w-frame: 375px;             /* SPフレーム幅 */
  --w-content: 311px;           /* 本文カラム幅 = 375 - 32*2 */
  --pad-side: 32px;             /* 左右余白 */
  --w-navlist: 336px;           /* フッター／メニューのリスト幅 */
  --radius-top: 30px;           /* コンテンツカラム上端の角丸 */
  --pc-top-gap: 56px;           /* PC時のページ上端余白 */
  --pc-min: 1000px;             /* PCレイアウト開始幅（下部に算出根拠） */
}

/* -------------------------------------------------------------------
   3. ベース
   ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-blue);
  font-family: var(--f-ja);
  font-weight: 700;
  line-height: 1;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, p, figure, dl, dd { margin: 0; }

button { font: inherit; color: inherit; }

/* 下層ページのFigmaフレームは上端が角丸ではないため、シェルの角丸を解除する版 */
.page--square { border-radius: 0; }

.page {
  position: relative;
  z-index: 1;
  width: 100%;
  /* max-width: var(--w-frame) はPC版のみ（下の @media (min-width: 1000px) を参照）。
     SP/タブレット幅では100%表示にして、画面幅がFigmaの375pxより広い端末
     （390/393/412/428pxなど）でも左右に背景色が数px見えないようにする。 */
  margin: 0 auto;
  overflow: hidden;                 /* Figmaフレームのクリップを再現 */
  border-radius: var(--radius-top) var(--radius-top) 0 0;
  background: var(--c-white);
}

/* -------------------------------------------------------------------
   4. 共通：セクション見出し
      Figma: 日本語(24px) → 下線SVG(154×3) → 英語サブ(24px)
      縦の並び = 0px / 47px / 62px（gap 12px の縦積み）
   ------------------------------------------------------------------- */
.sechead { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

.sechead__ja {
  font-size: 24px;
  font-weight: 700;
  line-height: 35px;
  color: var(--c-blue);
  white-space: nowrap;
}

/* Figma: 高さ3pxの枠に対し、SVG(154×6)が上下1.5pxずつはみ出して配置されている。
   縦につぶすと線幅が変わるため、SVGは実寸6pxで描き、負マージンで占有高を3pxに戻す。 */
.sechead__line { width: 154px; height: 6px; margin-top: -1.5px; margin-bottom: -1.5px; }

.sechead__en {
  font-family: var(--f-en);
  font-size: 24px;
  font-weight: 400;
  line-height: 39px;
  color: var(--c-blue);
  white-space: nowrap;
}

/* -------------------------------------------------------------------
   4-2. 共通：アイコン付き見出し（下層ページ共通 / Figma "Frame 19" 311×60）
        花丸アイコン + 日本語見出し → 下線SVG(311×4) → 小見出し(12px)
   ------------------------------------------------------------------- */
.sechead2 { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

.sechead2__row { display: flex; align-items: center; gap: 8px; width: 248px; }

.sechead2__icon { flex: 0 0 auto; width: 20px; height: 20.667px; }

.sechead2__ja {
  /* Figmaは1つのテキストノード（24px＋12px混在）で高さ24px。
     CSSの通常のインラインでは12px側が行ボックスを押し広げて29pxになるため、
     flex＋ベースライン揃えにして行ボックスを24pxに保つ。 */
  display: flex;
  align-items: baseline;
  font-size: 24px;
  font-weight: 700;
  line-height: 24px;
  color: var(--c-blue);
  white-space: nowrap;
}

/* 枠は311×4、SVG(311×6)は上に2pxはみ出す */
.sechead2__line { width: 100%; max-width: var(--w-content); height: 6px; margin-top: -2px; }

.sechead2__note {
  font-size: 12px;
  font-weight: 700;
  line-height: 8px;
  color: var(--c-blue);
  white-space: nowrap;
}

/* -------------------------------------------------------------------
   4-3. 共通：下層ページの先頭ブロック（Figma "Frame 91" 375×390）
        上余白120px／下余白72px、見出し＋154pxの下線＋英字サブ(12px)＋写真311×100
   ------------------------------------------------------------------- */
.pagehead {
  position: relative;
  padding: 120px var(--pad-side) 72px;
  overflow: hidden;
}
.pagehead__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.pagehead__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

/* 英字サブ見出しはトップページ(24px)と異なり12px */
.pagehead .sechead__en { font-size: 12px; line-height: 20px; }
/* 英文が長いページは Figma上も本文幅(311px)を超えて336pxで組まれている */
.sechead__en--wide { width: 336px; max-width: calc(100% + 25px); white-space: normal; }

.pagehead__photo {
  width: 100%;
  height: 100px;
  border-radius: 4px;
  object-fit: cover;
}

/* -------------------------------------------------------------------
   4-4. 共通：90度回転の英字縦ラベル
        Figma: 幅24pxの枠の中に rotate-90 したテキストを配置
   ------------------------------------------------------------------- */
.vlabel { flex: 0 0 24px; width: 24px; display: flex; align-items: center; justify-content: center; }
.vlabel > span {
  flex: none;
  transform: rotate(90deg);
  white-space: nowrap;
  font-weight: 700;
  line-height: 24px;
}

/* -------------------------------------------------------------------
   5. ヒーロー（Figma 2051:14676 / 0–749）
   ------------------------------------------------------------------- */
.hero {
  position: relative;
  height: 749px;
  isolation: isolate;               /* mix-blend-mode をヒーロー内に閉じる */
  overflow: hidden;
}

.hero__photo {                      /* Rectangle 1 : 375×749 */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__texture {                    /* 177 1 : 1070×713 at x=-196。Figmaは枠に合わせて伸長（cropではない） */
  position: absolute;
  top: -0.3565px;                   /* 713 × -0.05% */
  left: -52.2667%;                  /* -196 / 375 */
  width: 285.3333%;                 /* 1070 / 375 */
  height: 713.642px;                /* 713 × 100.09% */
  max-width: none;
  object-fit: fill;
}

.hero__screen {                     /* Rectangle 4 : #d6d2d2 / mix-blend-mode: screen */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 713px;
  background: var(--c-hero-screen);
  mix-blend-mode: screen;
}

/* --- ヘッダー（Figma 2051:14995 / 323×62 at 26,32）※スクロール追従 --- */
.header {
  position: fixed;
  top: 32px;                        /* Figma: フレーム上端から32px（PCは +56px は下の @media で） */
  left: 50%;
  transform: translateX(-50%);
  width: 323px;                     /* 375 - 26×2 */
  max-width: calc(100% - 52px);     /* 375px未満でも左右26pxを維持 */
  height: 62px;
  z-index: 50;
}

/* ▼Figmaにない追加要素（要承認）
   ヘッダーを固定したため、濃色セクションの上でロゴ・ハンバーガーが判読不能になる。
   その対策として、ヒーローを抜けた後だけ中央カラム幅(375px)の白帯をフェードインさせる。
   ページ最上部ではopacity:0なので、Figmaと同じ見えのまま。
   不要な場合は この .header::before 2ブロックと main.js の該当ブロックを削除すれば元に戻ります。 */
.header::before {
  content: "";
  position: absolute;
  top: -32px;                       /* カラム上端まで */
  right: -26px;
  bottom: -16px;
  left: -26px;                      /* 323 + 26×2 = 375 */
  /* SP表示では角丸なし（ご要望により削除）。PC版のみ下の @media で角丸を復活。 */
  border-radius: 0;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
body.is-scrolled .header::before { opacity: 1; }
/* ▲追加要素ここまで */

.header__logo { position: absolute; top: 0; left: 0; }
.header__logo img { width: 90.4977px; height: 62px; }

.header__contact {                  /* 88×32 at x=183（右端から52px）/ 角丸4px */
  position: absolute;
  top: 13px;
  right: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 32px;
  border-radius: 4px;
  background: var(--c-blue);
  color: var(--c-white);
  font-family: var(--f-ja);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.header__menubtn {                  /* 44×44 at x=279（右端から0）*/
  position: absolute;
  top: 7px;
  right: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.header__menubtn img { width: 44px; height: 44px; }

/* --- ヒーローコピー（Figma 2051:14680 / 283×254 at 32,162） --- */
.hero__copy {
  position: absolute;
  top: 162px;
  left: var(--pad-side);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 283px;
  max-width: calc(100% - var(--pad-side) * 2);
  color: var(--c-blue);
}

.hero__title {
  font-size: 44px;
  font-weight: 700;
  line-height: 64px;                /* Figma: 3行で192px */
  letter-spacing: 3.52px;           /* Figma: tracking 3.52px */
  /* CSSは行末にも字間を加算するため、Figmaと同じ283pxで折り返さないよう末尾分を相殺 */
  margin-right: -3.52px;
}

.hero__lead {
  font-size: 16px;
  font-weight: 700;
  line-height: 23px;                /* Figma: 2行で46px */
}

/* --- Topへ（Figma 2051:14997 / 40×44）※スクロール追従 ---
   Figmaでは静止ページ上の 303,567 に1つだけ配置。追従型にするため、
   横位置はFigmaどおり中央カラム右端から32px、縦位置は下端から32px（Figmaの左右余白と同値）。 */
.totop {
  position: fixed;
  bottom: var(--pad-side);
  /* SP/タブレットは.pageが100%表示になったため、画面右端からの固定余白にする。
     PC版の中央カラム基準の位置は下の @media (min-width: 1000px) で上書き。 */
  right: var(--pad-side);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: 60px;                      /* 中身40px + 左右padding 10px */
  /* ▼Figmaにない追加要素（承認済み）
     下に重なった要素と干渉しないよう、白の角丸背景を敷く。
     角丸4pxはメニューの閉じるボタン（Figma 262:396／44×44・白・角丸4px）に合わせた。
     淡い背景の上でも輪郭が見えるよう、ごく薄い影のみ追加。 */
  padding: 10px;
  border-radius: 4px;
  background: var(--c-white);
  box-shadow: 0 2px 8px rgba(16, 54, 115, .15);
  /* ▲追加要素ここまで */
}
.totop__arrow { width: 10px; height: 5px; }
.totop__label { font-size: 16px; font-weight: 400; line-height: 23px; white-space: nowrap; }  /* Figma: 43×23 */
.totop__line { width: 40px; height: 6px; margin-top: -2px; margin-bottom: -2px; }  /* 枠2px / SVG 40×6 */

/* -------------------------------------------------------------------
   6. 写真ストリップ（Figma 2051:14732 / 375×391 at y=622）
      ヒーロー(0–749)と127px重なる
   ------------------------------------------------------------------- */
.strip {
  position: relative;
  z-index: 2;
  height: 391px;
  margin-top: -127px;               /* 622 - 749 */
  isolation: isolate;
  overflow: hidden;                 /* ループスクロールする写真列をフレーム幅でクリップ */
}

.strip__grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(37, 91, 178, 0) 0%,
    rgb(69, 113, 183) 25%,
    rgb(53, 87, 141) 75%,
    rgba(16, 39, 76, 0) 100%);
}

.strip__texture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: color-burn;
}

/* Frame 15（968×210＝写真6枚＋間隔40px×5）を先方指示により無限ループのスクロール表示に変更。
   同じ並びを2セット連結し、ちょうど1セット分（968+40px）だけ左へ動かしたところで
   0地点に戻すことで、継ぎ目のないループにしている。 */
.strip__track {
  position: absolute;
  top: 91px;                        /* 713 - 622 */
  left: 0;
  display: flex;
  gap: 40px;
  height: 210px;
  width: max-content;
  animation: stripScroll 26s linear infinite;
}

@keyframes stripScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-1008px); }   /* -(968px + gap 40px) */
}

.strip__group { display: flex; gap: 40px; flex: 0 0 auto; }

.strip__cell { flex: 0 0 128px; display: flex; height: 210px; justify-content: center; }
.strip__cell--top { align-items: flex-start; }
.strip__cell--bottom { align-items: flex-end; }

.strip__cell img {
  width: 128px;
  height: 152px;
  border-radius: 16px;
  object-fit: cover;
}

/* -------------------------------------------------------------------
   7. T-withとは（Figma 2051:14683 / 375×900 at y=943）
      ストリップ帯(622–1013)と70px重なる
   ------------------------------------------------------------------- */
.about {
  position: relative;
  z-index: 1;
  min-height: 900px;                /* Figma: 900px。狭い画面で文章が増えても切れないよう min */
  margin-top: -70px;                /* 943 - 1013 */
  background: var(--c-white);
  overflow: hidden;
}

.about__texture {                   /* Rectangle 7 のテクスチャ : 不透明度10% */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.1;
}

.about__inner {
  position: relative;
  padding: 149px var(--pad-side) 0;  /* 1092 - 943 = 149 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 88px;
}

.about__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}

.about__logo { width: 90.4977px; height: 62px; }

.about__texts { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; }

.about__lead { font-size: 18px; font-weight: 700; line-height: 32px; }   /* Figma: 4行 = 128px */
.about__text { font-size: 14px; font-weight: 700; line-height: 24px; }   /* Figma: 8行 = 192px */

.about__flower { width: 30px; height: 31px; }

.about__link { font-size: 14px; font-weight: 700; line-height: 24px; }
.about__link a { display: inline-block; transition: transform .2s ease; }
.about__link a:hover { transform: scale(1.08); }

/* -------------------------------------------------------------------
   8. 帯（Figma 2051:14738 / 375×540 at y=1843）
   ------------------------------------------------------------------- */
.band {
  position: relative;
  z-index: 1;
  height: 540px;
  overflow: hidden;
}
.band__img {
  position: absolute;
  top: 0;
  left: -37.6%;
  width: 216%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* -------------------------------------------------------------------
   9. 事業紹介（Figma 2051:14739 / 375×1936 at y=2361）
      帯(1843–2383)と22px重なる
   ------------------------------------------------------------------- */
.business {
  position: relative;
  z-index: 2;
  margin-top: -22px;                /* 2361 - 2383 */
  padding: 112px var(--pad-side);
  overflow: hidden;
}

.business__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.business__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
}

.business__list { display: flex; flex-direction: column; gap: 101px; width: 100%; }

.card { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; }

.card__head { position: relative; height: 41px; width: 100%; }

.card__flower {                     /* 20×20.667 at (0,4) / 2〜4枚目は (0,5) */
  position: absolute;
  top: 4px;
  left: 0;
  width: 20px;
  height: 20.667px;
}
.card__flower--lower { top: 5px; }

.card__title {                      /* 20px Bold at x=28 */
  position: absolute;
  top: 0;
  left: 28px;
  font-size: 20px;
  font-weight: 700;
  line-height: 29px;
  white-space: nowrap;
}

.card__line {                       /* 枠は311×4 (y=37)。SVG(311×6)は上に2pxはみ出す */
  position: absolute;
  top: 35px;
  left: 0;
  width: 100%;
  height: 6px;
}

.card__thumb {
  width: 100%;
  height: 100px;
  border-radius: 4px;
  overflow: hidden;
}
.card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Figmaのトリミング位置を再現（枠高100px基準の％をpxに換算。
   CSSの margin の％は「幅」基準で解決されるため、％のままでは合わない） */
.card__thumb img.crop-shisan { height: 161.89px; margin-top: -9.43px; }
.card__thumb img.crop-kukan  { height: 207.36px; margin-top: -34.41px; }

.card__text { font-size: 18px; font-weight: 700; line-height: 32px; }  /* Figma: 2行 = 64px */

.card__btns { display: flex; gap: 8px; }  /* 151px + 8px = 次のボタン開始 159px */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 151px;
  height: 30px;
  border-radius: 50px;
  font-family: var(--f-ja);
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  white-space: nowrap;
  transition: opacity .2s ease;
}
.btn:hover { opacity: .8; }
.btn--fill { background: var(--c-blue); color: var(--c-white); }
.btn--outline { border: 1px solid var(--c-blue); color: var(--c-blue); }

/* -------------------------------------------------------------------
   10. お問い合わせ（Figma 2051:14927 / 375×917 at y=4297）
   ------------------------------------------------------------------- */
.contact {
  position: relative;
  z-index: 2;
  padding: 112px var(--pad-side) 146px;  /* 917 - 112 - 659 = 146 */
  background: var(--c-white);
}

.contact__inner { display: flex; flex-direction: column; align-items: flex-start; }

.form {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 30px;                 /* 見出しブロック101px → 131px */
}

.field { display: flex; flex-direction: column; gap: 4px; }
.field + .field { margin-top: 20px; }   /* ラベル間 96px = 32 + 4 + 40 + 20 */

.field__label { font-size: 15px; font-weight: 700; line-height: 32px; color: var(--c-blue); }

.field__input {
  width: 100%;
  height: 40px;
  padding: 4px 20px;
  border: 0;
  border-radius: 10px;
  background: var(--c-field);
  box-shadow: inset 1px 2px 4px rgba(0, 0, 0, .25);
  color: var(--c-blue);
  font-family: var(--f-ja);
  font-size: 15px;
  font-weight: 700;
  line-height: 32px;
}
.field__input--area { height: 100px; padding: 10px 20px; line-height: normal; resize: vertical; }
.field__input::placeholder { color: var(--c-placeholder); opacity: 1; }

.agree { position: relative; display: flex; align-items: center; gap: 12px; height: 32px; margin-top: 16px; }

.agree__box {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 0;
  border-radius: 4px;
  background: var(--c-field);
  box-shadow: inset 1px 1px 4px rgba(0, 0, 0, .25);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.agree__box:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--c-blue);
  border-bottom: 2px solid var(--c-blue);
  transform: rotate(-45deg);
}
.agree__label { font-size: 15px; font-weight: 700; line-height: 32px; color: var(--c-blue); }
.agree__label a { color: var(--c-red); text-decoration: underline; text-underline-position: from-font; }

.submit {
  width: 100%;
  height: 40px;
  margin-top: 16px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--c-blue);
  box-shadow: inset 1px 2px 4px rgba(0, 0, 0, .25);
  color: var(--c-white);
  font-family: var(--f-ja);
  font-size: 15px;
  font-weight: 700;
  line-height: 32px;
  cursor: pointer;
}

/* -------------------------------------------------------------------
   11. フッター（Figma 2051:14996 / 375×770 at y=5214）
   ------------------------------------------------------------------- */
.footer {
  position: relative;
  z-index: 2;
  min-height: 770px;
  color: var(--c-white);
  overflow: hidden;
}
.footer__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.footer__overlay { position: absolute; inset: 0; background: var(--c-footer-overlay); }

.footer__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 35px;
  padding: 50px 19.5px 20px;        /* 375 - 336 = 39 → 左右19.5pxでリスト336pxがぴたりと収まる */
}

.footer__logo { width: 127.907px; height: 62.5114px; }

.footer__name {
  font-size: 20.465px;
  font-weight: 700;
  line-height: 26.861px;
  text-align: center;
}

.footer__navwrap { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%; }

.footer__copy { font-size: 14px; font-weight: 700; line-height: 32px; text-align: center; }

/* フッター内リンクのみホバーで少し薄く（.navlistはSPメニューと共通のため.footer配下に限定）
   薄くなる度合い・速度はStudio版の実装値（opacity 0.3 / 160ms）に合わせている */
.footer a { transition: opacity .16s cubic-bezier(.4,.4,0,1); }
.footer a:hover { opacity: .3; }

/* -------------------------------------------------------------------
   12. ナビリスト（フッター／SPメニュー 共通・Figma 336px幅）
   ------------------------------------------------------------------- */
.navlist {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: var(--w-navlist);
}

.navlist__group { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: var(--w-navlist); }

.navlist__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
  width: 100%;
}
.navlist__row--head { justify-content: flex-start; }
.navlist__row--center { justify-content: center; }

.navlist__sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 26px;
  width: 100%;
}
.navlist__subinner { display: flex; align-items: center; gap: 8px; }

.navlist__label { font-size: 18px; font-weight: 700; line-height: 32px; }
.navlist__sub .navlist__label { line-height: 26px; }
.navlist__sm { font-size: 14px; }

.navlist__hr { width: 100%; height: 1px; }
.navlist__dash { flex: 0 0 auto; width: 10px; height: 1px; }
.navlist__chev { flex: 0 0 auto; width: 6px; height: 12.001px; }
.navlist__ext { flex: 0 0 auto; width: 15px; height: 15px; }

/* -------------------------------------------------------------------
   13. ハンバーガーメニュー展開（Figma 262:370 / 375×775）
   ------------------------------------------------------------------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--c-menu-bg);
  isolation: isolate;
}
.menu[hidden] { display: none; }

/* 紙のテクスチャ画像を #103673 の上に乗算（Figma Rectangle 22 の見えを再現） */
.menu__texture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }

.menu__close {                      /* 44×44 at x=311, y=39（375幅で右から20px） */
  position: absolute;
  top: 39px;
  right: max(12px, calc(50% - 167.5px));
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: var(--c-white);
  cursor: pointer;
}
.menu__close img { width: 16.9707px; height: 16.7635px; }

.menu__logo {                       /* 200×200 中央 / y=37 */
  position: absolute;
  top: 37px;
  left: 50%;
  width: 200px;
  height: 200px;
  transform: translateX(-50%);
}
.menu__logo img { width: 200px; height: 200px; max-width: none; }

.menu__navwrap {                    /* 336×317 at y=222 */
  position: absolute;
  top: 222px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  width: var(--w-navlist);
  max-width: calc(100% - 24px);
  padding-bottom: 40px;
  color: var(--c-white);
}

.menu__line { width: 187.82px; height: 6px; margin-top: -2px; margin-bottom: -2px; }  /* 枠2px / SVG 187.82×6 */

.menu__lists { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%; }

body.is-menu-open { overflow: hidden; }

/* -------------------------------------------------------------------
   14. PC時の固定背景（Figma 2051:15127 / 1440×1024）
       ・背景画像 bg-desktop.jpg（2026-09 差し替え：先方支給の写真に変更）
       ・左：ロゴ 240×164／右：メニュー（20px・行高32px）
       ・右端の縦組み英文は元々背景画像への焼き込みだったが、途中で切れる／文言相違の
         指摘を受け、実テキストによる無限ループのスクロール表示に変更（.deskbg__vtext）。
   ------------------------------------------------------------------- */
.deskbg { display: none; }

.deskmenu__icon { flex: 0 0 auto; width: 20px; height: 20.667px; }

@media (min-width: 1000px) {
  .deskbg {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    /* Figmaはフレーム(1440×1024)いっぱいに伸長するため 100% 100% で全体を表示する。 */
    background: url('../images/bg-desktop.jpg') center / 100% 100% no-repeat;
  }

  /* 右端の縦組み英文（ループスクロール）。Figma上は画像に焼き込まれた装飾のため
     実座標データが無く、元画像の見え方（右端からの余白・書体・色味）を目視で再現。
     ナビ（.deskbg__side--right）と横並びのflex項目にして、狭いPC幅でも
     文字列が右メニューに重ならないようにしている。
     ※縦組み(writing-mode)の1文字ずつ独立した向きではなく、先方指示により
       「横書きのテキストを90度回転させたもの」として実装（.vlabelと同じ考え方）。 */
  .deskbg__vtext {
    flex: 0 0 64px;                 /* 回転後の行の太さ + 余白 */
    position: relative;
    overflow: hidden;
    pointer-events: none;
  }
  /* 100vh × 64px の帯を中心基準で90度回転させ、.deskbg__vtext の縦の範囲いっぱいに敷く。 */
  .deskbg__vrotate {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vh;
    height: 64px;
    margin-top: -32px;   /* -height/2 */
    margin-left: -50vh;  /* -width/2 */
    transform: rotate(90deg);
    overflow: hidden;
  }
  .deskbg__vtrack {
    position: absolute;
    top: 0;
    left: 0;
    height: 64px;
    margin: 0;
    display: flex;
    align-items: center;
    white-space: nowrap;
    /* ここは先方指定によりスクリプト系（Antro Vectra／BD Script）は使わず、
       セリフ系（明朝系）で指定。サイトに同梱済みの Zen Old Mincho を流用している。 */
    font-family: 'Zen Old Mincho', serif;
    font-size: 40px;
    line-height: 1;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, .82);
    animation: deskbgVScroll 42s linear infinite;
  }
  /* 文言を2回連結して配置し、ちょうど半分（＝1回分）移動させたところで
     ループさせることで継ぎ目のない無限スクロールにしている。回転後は
     ローカルのX軸マイナス方向＝画面上で上向きに流れる（変更前と同じ見え方）。 */
  @keyframes deskbgVScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  .deskbg__row { display: flex; align-items: stretch; height: 100%; }

  .deskbg__side { flex: 1 0 0; min-width: 0; display: flex; align-items: center; justify-content: center; }
  .deskbg__center { flex: 0 0 var(--w-frame); width: var(--w-frame); }

  /* ホバー時の拡大率・速度はStudio版（参照元）の実装値（scale 1.1 / 300ms ease-in-out）に合わせている */
  .deskbg__logo { display: block; width: 240px; height: 164px; object-fit: cover; transition: transform .3s ease-in-out; }
  a.deskbg__logo-link { display: inline-block; }
  a.deskbg__logo-link:hover .deskbg__logo { transform: scale(1.1); }

  .deskmenu { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 16px; }

  .deskmenu__item { display: flex; align-items: center; gap: 8px; }
  .deskmenu__item--tight { gap: 0; }
  .deskmenu__item--head { gap: 4px; }
  .deskmenu__group { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
  .deskmenu__sublist { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
  .deskmenu__sub { display: flex; align-items: center; gap: 4px; }

  .deskmenu span {
    font-size: 20px;
    font-weight: 700;
    line-height: 32px;
    color: var(--c-blue);
    text-align: left;
    white-space: nowrap;
  }
  /* ホバー時の拡大率・速度はStudio版に合わせている：通常項目はscale 1.1 / 300ms ease-in-out、
     「お問い合わせ」項目（ボタン的な扱いのためStudio側でも控えめ）はscale 1.02。 */
  .deskmenu a { transition: transform .3s ease-in-out; transform-origin: left center; }
  .deskmenu a:hover { transform: scale(1.1); }
  .deskmenu a:hover span { opacity: .7; }
  .deskmenu a.deskmenu__item--tight:hover { transform: scale(1.02); }

  /* ページ上端に56pxの余白 → その内側（＝ヘッダー上端）が角丸30px */
  /* PC版のみ、中央カラムをFigmaどおり375px幅に戻す（SP/タブレットは上の .page で100%表示） */
  .page { max-width: var(--w-frame); margin-top: var(--pc-top-gap); }

  /* PC版のみ、Topへボタンを中央カラム（375px）基準の位置に戻す */
  .totop { right: max(24px, calc(50% - 155.5px)); }   /* 187.5 - 32 = 155.5 */

  /* 固定ヘッダーもFigmaどおり 56 + 32 = 88px の位置に置く */
  .header { top: calc(var(--pc-top-gap) + 32px); }

  /* PC版のみ、追従ヘッダー背景の角丸を復活 */
  .header::before { border-radius: var(--radius-top) var(--radius-top) 0 0; }

  /* PC版ヘッダー：ロゴ・Contact・ハンバーガーにホバーアニメーションを追加
     （拡大率・回転角・速度はStudio版の実装値 scale 1.1 / rotate 180deg / 300ms ease-in-out に合わせている） */
  .header__logo img { transition: transform .3s ease-in-out; }
  .header__logo:hover img { transform: scale(1.1); }

  .header__contact { transition: transform .3s ease-in-out; }
  .header__contact:hover { transform: scale(1.1); }

  .header__menubtn img { transition: transform .3s ease-in-out; }
  .header__menubtn:hover img { transform: rotate(180deg); }

  body { background: none; }
}

/*
  ブレークポイント 1000px の根拠（慣習ではなくFigmaの構成から算出）
    中央カラム              375px（Figma 2054:15412）
    右メニュー最大幅        20px(アイコン) + 4px(gap) + 「供養関連事業の設計・運営」20px×12字 = 264px
    左ロゴ                  240px
    左右セルは flex:1 の等幅 → 必要幅 ≒ 375 + 264×2 ≒ 903px
    余白を見て 1000px 未満ではPC背景を出さず、SPレイアウトのまま中央寄せとする。
*/

/* -------------------------------------------------------------------
   15. アクセシビリティ
   ------------------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }
.menu :focus-visible, .footer :focus-visible { outline-color: var(--c-white); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}