/* 士業テンプレ 本体スタイル（自前実装）。
   正本の説明は templates/docs/design.md「CSS の組み方」節。

   前身は templates/shigyo_editorial/assets/css/style.css（原本サイトの再現物）と
   バイト一致だった。クラス名・セレクタ名・節の役割は HTML と JS の契約なのでそのまま、
   **書き方の層だけ**をここで組み直してある＝値はトークンへ寄せ、宣言の並び・
   ショートハンドの使い分け・コメント・ブレークポイントの置き方は下記の規約による。

   この CSS の規約:
   1. 値は :root のトークンだけを参照する。生の px を直に書くのは、HTML/JS/ビルド側と
      噛み合っている寸法（ロゴの矩形など）と、1回しか出ない座標だけ。
   2. 余白は 4px の倍数（--sp-*）。行間・字送り・文字サイズも段階名で呼ぶ。
   3. 宣言の並びは固定で「配置 → 箱 → 文字 → 塗り → 動き」。
      （position/inset/display/grid/flex → width/height/margin/padding →
        font/line-height/letter-spacing/text-* → color/background/border →
        transition/animation/transform）
   4. **ブレークポイントは部品ごとに置く**（原本は 560/960/1201/1601 の大きな塊に
      全部品の上書きを集めていた）。1つの部品の応答は1か所で読み切れる。
   5. 節の区切りは二重線の罫のコメント1行。部品名は HTML の節 id と合わせる。

   原本から落とした規則（出力 HTML に該当要素が1つも無いのを実測で確認・2026-10-21）:
     .intermission / .carousel / .carousel-controls（横スクロール節は 2026-10-19 に撤去）
     .more / .section-link（撤去した節の導線ボタン）
     .person（原本の執筆者クレジット）
     .instagram / .privacy（原本サイト固有のフッター導線）
     .mobile-break（原本の本文にあった改行制御）
   撤去した節を戻すときは templates/shigyo/retired/ の対が正本。
   .intermission を落としたので ../images/intermission-bg-logo.svg は
   どこからも参照されなくなった。 */

/* ══ トークン ══════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* 書体。この2つの名前は fonts.css の @font-face が見ている。 */
  --serif: 'YakuHanMPs_Noto', 'Noto Serif JP', serif;
  --latin: 'HPJ Baskerville', 'Noto Serif JP', serif;

  /* 色。--accent はリードごとに accent.css が後から差す。 */
  --ink: #111;              /* 本文 */
  --paper: #f5f5f5;         /* 淡い地（Story 節・メニュー） */
  --band: #303030;          /* 暗い帯（お知らせ）の下地 */
  --on-dark: #fff;
  --muted: #999;            /* フッターの添え字 */
  --dim: #888;              /* 見出しのホバー */
  --rule: #b2b2b2;          /* 罫（行き先カード） */
  --hairline: #e8e8e8;      /* 見出し脇の細い横線 */
  --focus: #a67538;         /* キーボード操作の輪郭 */
  --veil: #ffffffa0;        /* 写真の上に引く点線 */

  /* 余白＝4px の倍数。名前の数字がそのまま 4px の個数。 */
  --sp-1: 4px;    --sp-2: 8px;    --sp-3: 12px;   --sp-4: 16px;
  --sp-5: 20px;   --sp-6: 24px;   --sp-8: 32px;   --sp-9: 36px;
  --sp-10: 40px;  --sp-11: 44px;  --sp-12: 48px;
  --sp-15: 60px;  --sp-16: 64px;  --sp-18: 72px;  --sp-20: 80px;
  --sp-22: 88px;  --sp-24: 96px;  --sp-28: 112px; --sp-30: 120px;
  --sp-32: 128px; --sp-42: 168px; --sp-50: 200px; --sp-65: 260px;

  /* 文字サイズ。和文の本文を 14px に置き、そこから上下へ段を取る。 */
  --fs-caption: 10px;   /* 著作権表記・添え字 */
  --fs-label: 11px;     /* 欧文の小ラベル */
  --fs-meta: 12px;      /* 分類チップ・タグライン(SP) */
  --fs-note: 13px;      /* 補足の文章 */
  --fs-body: 14px;      /* 本文 */
  --fs-body-l: 16px;    /* 本文（広い画面） */
  --fs-lead: 18px;      /* リード文 */
  --fs-ttl-s: 20px;
  --fs-ttl: 22px;
  --fs-ttl-l: 24px;
  --fs-head-s: 28px;
  --fs-head: 32px;

  /* 行間。和文の明朝は広めに取る。 */
  --lh-flush: 1;        /* 罫と重ねる欧文 */
  --lh-tight: 1.4;
  --lh-snug: 1.6;
  --lh-body: 1.8;
  --lh-airy: 2.2;
  --lh-prose: 2.4;      /* 長い本文（狭い画面） */
  --lh-loose: 2.6;      /* 長い本文（広い画面） */

  /* 字送り。 */
  --ls-flat: .01em;     /* 欧文 */
  --ls-base: .06em;     /* 和文の既定 */
  --ls-wide: .08em;
  --ls-vert: .22em;     /* 縦組みのキャッチ */

  /* 動き。 */
  --ease: ease-out;
  --t-fast: .2s;
  --t-slow: .75s;

  /* 部品の寸法。 */
  --nav-h: 60px;        /* 追従ヘッダーの帯の高さ */
  --nav-line: 24px;     /* その中のリンク1行ぶん */
  --gutter: 8%;         /* 本文の左右の余白 */
  --measure: 85%;       /* 中央寄せの読み幅 */
  --max-w: 1800px;
}

/* ══ 土台 ══════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-base);
  color: var(--ink);
  background: #fff;
}

/* 見出しと段落の既定は全部ここで潰し、節ごとに付け直す
   ＝ブラウザ既定の太字と大きさを各所で打ち消さずに済む。 */
h1,
h2,
h3,
p {
  margin: 0;
  font-size: inherit;
  font-weight: 400;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}

a:hover {
  opacity: .65;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: var(--sp-2);
}

nav {
  font-family: var(--latin);
}

/* ══ 共通部品 ══════════════════════════════════════════════════════ */

/* 本文へ飛ばす導線。見えないがフォーカスで降りてくる。 */
.skip-link {
  position: fixed;
  top: 0;
  left: var(--sp-5);
  z-index: 50;
  padding: var(--sp-3) var(--sp-5);
  background: #fff;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* 長い本文。 */
.prose {
  font-size: var(--fs-note);
  line-height: var(--lh-prose);
}

.prose p + p {
  margin-top: var(--sp-6);
}

@media (min-width: 960px) {
  .prose {
    font-size: var(--fs-body);
    line-height: var(--lh-loose);
  }
}

/* カードの抜粋。 */
.excerpt {
  font-size: var(--fs-note);
  line-height: var(--lh-prose);
}

/* 節の添え書き。下に点線を引く。原本は背景のグラデーションで点を描いていたが、
   点線は border で引ける＝描画の指定を1行に畳む。色は accent.css が差す。 */
.tagline {
  font-size: var(--fs-meta);
}

.tagline span {
  display: inline-block;
  padding-bottom: var(--sp-1);
  border-bottom: 1px dotted currentColor;
}

@media (min-width: 960px) {
  .tagline {
    font-size: var(--fs-body-l);
  }
}

/* 通し番号（Vol.01）。下線は太さを変えたいので ::after で引く。 */
.volume {
  font-family: var(--latin);
  font-size: var(--fs-label);
  line-height: var(--lh-flush);
  text-align: right;
}

.volume span {
  position: relative;
  display: inline-block;
  padding-bottom: var(--sp-2);
}

.volume span::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: currentColor;
}

.volume b {
  font-size: var(--fs-body-l);
  font-weight: 400;
}

/* 記事カード（お知らせ）。 */
.article-card a {
  display: block;
}

.article-photo {
  margin-bottom: var(--sp-5);
}

.article-card h3 {
  margin: var(--sp-2) 0 var(--sp-3);
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
}

.article-card .excerpt {
  font-size: var(--fs-meta);
  line-height: var(--lh-airy);
}

/* メタ行＝分類チップ（任意）と日付（任意）。日付はチップの行へ重ねる。 */
.article-meta {
  position: relative;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.article-meta > span {
  display: inline-block;
  line-height: var(--lh-flush);
  border: 1px solid currentColor;
}

/* チップの字は枠に対して小さくしたいが、font-size を下げると枠まで痩せる
   ＝字だけ縮める。 */
.article-meta > span > span {
  display: inline-block;
  padding: 0 var(--sp-1) var(--sp-1);
  font-size: var(--fs-caption);
  line-height: var(--lh-flush);
  letter-spacing: var(--ls-flat);
  transform: scale(.9);
}

.article-meta time {
  position: absolute;
  top: var(--sp-1);
  right: 0;
  font-family: var(--latin);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-base);
}

@media (min-width: 960px) {
  .article-photo {
    margin-bottom: var(--sp-6);
  }

  .article-card .excerpt {
    font-size: var(--fs-body);
  }

  .article-meta > span > span {
    padding: 1px var(--sp-2) 2px;
    font-size: var(--fs-label);
    transform: none;
  }

  .article-meta time {
    font-size: var(--fs-label);
  }
}

/* スクロールで現れる要素。動かすのは main.js（GSAP）で、
   ここが持つのは**動く前の姿**と、GSAP が無いときの素の遷移だけ。 */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
}

.js .reveal.visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}

.concept-copy,
.story-copy {
  --reveal-delay: .16s;
}

@media (min-width: 560px) {
  .story-card:nth-child(even) {
    --reveal-delay: .3s;
  }
}

/* ══ ヒーロー ══════════════════════════════════════════════════════ */

.hero {
  position: relative;
  height: 100svh;
  min-height: 480px;
  color: var(--on-dark);
}

/* 左右の半分に別々の写真を流す。row-reverse なので DOM 順の1枚目が右。 */
.hero-images {
  display: flex;
  flex-direction: row-reverse;
  height: 100%;
}

.hero-half {
  position: relative;
  width: 50%;
  height: 100%;
  overflow: hidden;
}

/* 重ねた写真を透明度だけで入れ替える（main.js が .active を回す）。 */
.hero-frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 4s var(--ease);
}

.hero-frame.active {
  opacity: 1;
}

.hero-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.logo {
  position: absolute;
  top: var(--sp-6);
  left: var(--sp-6);
  z-index: 2;
  width: clamp(9.5rem, 36vw, 17.5rem);
}

/* 縦組みのキャッチ3本。右から左へ並び、1本ずつ下げて階段にする。 */
.hero-copy {
  position: absolute;
  top: 54%;
  left: 25%;
  display: flex;
  flex-direction: row-reverse;
  margin: 0;
  line-height: 2.2;
  transform: translate(-50%, -50%);
}

.hero-copy > span {
  position: relative;
  font-size: var(--fs-body-l);
  letter-spacing: var(--ls-vert);
  writing-mode: vertical-rl;
}

/* 各行の右に点線の罫。 */
.hero-copy > span::before {
  content: '';
  position: absolute;
  top: 0;
  right: var(--sp-1);
  height: 11em;
  border-right: 1px dotted var(--veil);
}

.hero-copy > span:nth-child(2) {
  margin-top: 1.3em;
}

.hero-copy > span:nth-child(3) {
  margin-top: 2.6em;
}

/* 縦書きの著作権表記（広い画面だけ）。 */
.hero-copyright {
  display: none;
}

@media (560px <= width < 960px) {
  .logo {
    top: var(--sp-10);
    left: var(--sp-10);
  }

  .hero-copy {
    line-height: 2.5;
  }

  .hero-copy > span {
    font-size: var(--fs-lead);
  }
}

@media (min-width: 960px) {
  .hero {
    height: 100vh;
  }

  .logo {
    top: 60px;
    left: 70px;
    width: 330px;
  }

  /* 縦組みは中身の高さが読めないので、translate ではなく em の負マージンで置く
     ＝字の大きさが変わっても位置の見え方が揃う。 */
  .hero-copy {
    top: 50%;
    left: 25%;
    margin: -12em 0 0 -7em;
    line-height: 2.7;
    transform: none;
  }

  .hero-copy > span {
    font-size: var(--fs-ttl);
    letter-spacing: .2em;
  }

  .hero-copy > span::before {
    right: var(--sp-2);
    height: 10.5em;
  }

  .hero-copyright {
    display: block;
    position: absolute;
    top: 50%;
    right: var(--sp-10);
    font: var(--fs-caption) var(--latin);
    letter-spacing: var(--ls-base);
    writing-mode: vertical-rl;
    opacity: .7;
    transform: translateY(-65%);
  }
}

/* ══ オープニングの幕 ══════════════════════════════════════════════
   html.opening が付いている間だけ出る（index.html の先頭の 1 行が付け、
   main.js が外す）。reduce のときは最後の節で丸ごと消える。 */

.opening-screen {
  display: none;
}

.opening .opening-screen {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: #fff;
  pointer-events: none;
  animation: opening-out .45s var(--ease) 1.25s both;
}

.opening-screen img {
  width: 160px;
  height: auto;
  animation: opening-mark .8s var(--ease) .12s both;
}

.opening .hero-images {
  animation: opening-photo .9s var(--ease) 1.05s both;
}

/* 幕が開いたあと、ロゴ → キャッチの順に差し込む。 */
.opening .logo,
.opening .hero-nav {
  animation: opening-mark .7s var(--ease) 1.55s both;
}

.opening .hero-copy > span {
  animation: opening-mark .7s var(--ease) 1.85s both;
}

.opening .hero-copy > span:nth-child(2) {
  animation-delay: 2.1s;
}

.opening .hero-copy > span:nth-child(3) {
  animation-delay: 2.35s;
}

@media (min-width: 960px) {
  .opening-screen img {
    width: 200px;
  }
}

@keyframes opening-mark {
  from { opacity: 0; transform: translateY(var(--sp-2)); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes opening-photo {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes opening-out {
  from { opacity: 1; visibility: visible; }
  to   { opacity: 0; visibility: hidden; }
}

/* ══ ナビゲーション ════════════════════════════════════════════════
   狭い画面＝右上のハンバーガー＋全面ダイアログ。
   560px 以上＝ヒーローの下端に貼り付いて追従する帯。
   両者は排他で、片方を display:none にして切り替える。 */

.hero-nav {
  display: none;
}

.menu-toggle {
  position: fixed;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 31;
  width: var(--sp-12);
  height: var(--sp-12);
  color: var(--on-dark);
  background: transparent;
  border: 0;
}

/* 2 本の棒。閉じているときは平行、開くと交差して × になる。 */
.menu-toggle span {
  display: block;
  position: absolute;
  top: 21px;
  left: var(--sp-3);
  width: var(--sp-6);
  height: 1px;
  background: currentColor;
  transition: transform var(--t-fast) var(--ease);
}

.menu-toggle span + span {
  top: 27px;
}

/* ヒーローを抜けたら白地になるので字を黒へ（main.js が .dark を付ける）。 */
.menu-toggle.dark,
.menu-toggle[aria-expanded='true'] {
  color: var(--ink);
}

.menu-toggle[aria-expanded='true'] span:first-child {
  transform: translateY(3px) rotate(45deg);
}

.menu-toggle[aria-expanded='true'] span + span {
  transform: translateY(-3px) rotate(-45deg);
}

.menu-toggle:hover {
  background: transparent;
  opacity: .6;
}

/* <dialog> の既定（中央の小さな箱）を全面へ広げる。 */
.mobile-menu {
  position: fixed;
  inset: 0;
  width: calc(100% - var(--sp-5));
  max-width: none;
  height: calc(100% - var(--sp-5));
  max-height: none;
  margin: auto;
  padding: 0;
  color: var(--ink);
  background: var(--paper);
  border: 0;
  overflow: auto;
}

.mobile-menu::backdrop {
  background: #0001;
}

.mobile-menu nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  min-height: 100%;
  padding: var(--sp-16) var(--sp-6);
}

.mobile-menu nav a {
  font-size: var(--fs-body);
}

body.menu-open {
  overflow: hidden;
}

body.menu-open .menu-toggle {
  position: fixed;
}

@media (min-width: 560px) {
  .menu-toggle,
  .mobile-menu {
    display: none;
  }

  /* 負のマージンでヒーローへ食い込ませてから sticky で貼る
     ＝ヒーローは 100svh のまま、帯はその下端に重なって出る。 */
  .hero-nav {
    display: block;
    position: sticky;
    top: 0;
    z-index: 20;
    width: 100%;
    height: var(--nav-h);
    margin: calc(var(--nav-h) * -1) 0 0 auto;
    padding: var(--sp-5) 6%;
    color: var(--ink);
    background: #fff;
    transition: background-color .3s var(--ease);
  }

  .hero-nav.stuck {
    background: #ffffffb3;
    -webkit-backdrop-filter: blur(var(--sp-2));
    backdrop-filter: blur(var(--sp-2));
  }

  .hero-nav nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3%;
    font-size: var(--fs-label);
    white-space: nowrap;
  }

  .hero-nav nav a {
    line-height: var(--nav-line);
  }
}

@media (min-width: 960px) {
  .hero-nav {
    --nav-h: 72px;

    padding: var(--sp-6) var(--sp-5);
  }

  .hero-nav nav {
    justify-content: center;
    gap: 6%;
    font-size: var(--fs-note);
  }
}

/* ══ Concept（事務所案内） ═════════════════════════════════════════ */

.concept {
  margin-bottom: var(--sp-30);
  padding-top: var(--sp-28);
  overflow: clip;      /* 見出し背後の輪郭英字がはみ出すのを切る */
}

.concept-copy {
  padding: 0 var(--gutter);
}

.concept h2 {
  position: relative;
  margin-bottom: var(--sp-9);
  font-size: var(--fs-ttl-l);
  line-height: var(--lh-snug);
  isolation: isolate;  /* ::before を z-index:-1 で敷いても親より後ろへ抜けない */
}

/* 見出しの背後に敷く輪郭だけの英字。
   縦横比を aspect-ratio で固定し、各ブレークポイントでは幅だけ渡す。 */
.concept h2::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -10%;
  z-index: -1;
  width: 105%;
  height: 100px;
  background: url('../images/concept-typo_sp.svg') left top / 100% 100% no-repeat;
}

.concept .prose {
  margin-bottom: var(--sp-24);
}

/* 2 枚の写真を少しずらして重ねる。 */
.concept-photos img:first-child {
  width: 76%;
  margin-left: 24%;
}

.concept-photos img + img {
  position: relative;
  width: 52%;
  margin-top: -50px;
}

@media (min-width: 560px) {
  /* 本文と写真を左右に割る。 */
  .concept {
    display: flex;
    margin-bottom: var(--sp-28);
    padding-top: var(--sp-28);
  }

  .concept-copy {
    width: 50%;
    margin: 0;
    padding: var(--sp-15) 4% 0 6%;
  }

  .concept-photos {
    width: 50%;
  }

  .concept h2 {
    margin-bottom: var(--sp-8);
    font-size: var(--fs-ttl);
  }

  .concept h2::before {
    top: -36px;
    right: auto;
    left: -16px;
    width: 42vw;
    height: auto;
    aspect-ratio: 4 / 1;
    background-image: url('../images/concept-typo_pc.svg');
  }

  .concept-photos img:first-child {
    width: 83%;
    margin-left: 17%;
  }

  .concept-photos img + img {
    width: 52%;
    margin-top: -40px;
    margin-left: 0;
  }
}

/* 中くらいの画面だけ本文を詰める（左右 2 分割で段の高さが揃わないため）。
   上下どちらの幅でも効かせたくないので範囲指定で閉じる。 */
@media (560px <= width < 960px) {
  .concept .prose {
    margin-bottom: 0;
    line-height: var(--lh-airy);
  }
}

@media (min-width: 960px) {
  .concept {
    max-width: var(--max-w);
    margin: 0 auto var(--sp-50);
    padding-top: var(--sp-42);
  }

  .concept-copy {
    padding: var(--sp-32) var(--gutter) 0 11%;
  }

  .concept h2 {
    margin-bottom: var(--sp-9);
    font-size: var(--fs-head-s);
  }

  .concept h2::before {
    top: -60px;
    left: -40px;
    width: 440px;
  }

  /* 輪郭英字の右端から伸びる細い横線。 */
  .concept h2::after {
    content: '';
    position: absolute;
    top: -4px;
    left: 460px;
    width: 10vw;
    height: 1px;
    background: var(--hairline);
  }

  .concept-photos img + img {
    margin-top: -80px;
  }
}

@media (min-width: 1200px) {
  .concept h2::before {
    top: -72px;
    width: 500px;
  }

  .concept h2::after {
    top: -8px;
    left: 560px;
    width: 11vw;
  }
}

@media (min-width: 1600px) {
  .concept h2::after {
    left: 620px;
    width: 14vw;
  }
}

/* ══ Story（取扱分野） ═════════════════════════════════════════════ */

.story {
  margin-bottom: var(--sp-18);
  padding-bottom: var(--sp-20);
  background: var(--paper);
}

.story-intro {
  margin-bottom: var(--sp-15);
}

/* 写真の上半分にだけ白を敷き、淡い地から写真が立ち上がって見せる。 */
.story-intro-photo {
  position: relative;
  background: linear-gradient(to bottom, #fff 50%, transparent 0);
}

.story-intro-photo img {
  width: 84%;
}

.story-copy {
  padding: var(--sp-24) var(--gutter) 0;
}

.story h2 {
  position: relative;
  margin-bottom: var(--sp-8);
  font-size: var(--fs-head-s);
  isolation: isolate;
}

.story h2::before {
  content: '';
  position: absolute;
  top: -50px;
  left: -5%;
  z-index: -1;
  width: 78%;
  height: 100px;
  background: url('../images/story-typo_sp.svg') 0 0 / 100% 100% no-repeat;
}

.story-tagline {
  margin-bottom: var(--sp-6);
  font-size: var(--fs-lead);
}

.story-grid {
  width: var(--measure);
  margin: 0 auto;
}

.story-card {
  margin-bottom: var(--sp-12);
}

.story-card:last-child {
  margin-bottom: 0;
}

.story-card a {
  display: block;
}

/* カード全体のホバーは見出しの色だけで示す（箱ごと薄くしない）。 */
.story-card a:hover {
  opacity: 1;
}

.story-card a:hover h3 {
  color: var(--dim);
}

/* 写真の対角に飾りの隅。 */
.story-photo {
  position: relative;
}

.story-photo::before,
.story-photo::after {
  content: '';
  position: absolute;
  z-index: 1;
  width: var(--sp-11);
  height: var(--sp-11);
  background-size: 100%;
}

.story-photo::before {
  top: -8px;
  left: -8px;
  background-image: url('../images/photo-corner-top-gray_sp.png');
}

.story-photo::after {
  right: -8px;
  bottom: -8px;
  background-image: url('../images/photo-corner-bottom-gray_sp.png');
}

/* 見出しは写真へ食い込ませ、地色の背景で写真を抜く。 */
.story-card h3 {
  position: relative;
  display: inline-block;
  max-width: 85%;
  margin-top: -20px;
  margin-bottom: var(--sp-5);
  padding: var(--sp-8) var(--sp-9) 0 0;
  font-size: var(--fs-ttl-s);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
  background: var(--paper);
}

.story-card .excerpt {
  padding: 0 3px;
}

@media (min-width: 560px) {
  .story {
    margin-bottom: var(--sp-24);
  }

  .story-intro {
    display: flex;
    position: relative;
    background: linear-gradient(to bottom, #fff 21vw, transparent 0);
  }

  .story-intro-photo {
    width: 50%;
    background: none;
  }

  .story-intro-photo img {
    width: 100%;
  }

  .story-copy {
    position: relative;
    width: 50%;
    padding: 13% 5% 0 6%;
  }

  .story h2 {
    position: static;
    margin-bottom: var(--sp-6);
    font-size: var(--fs-ttl-l);
  }

  .story h2::before {
    top: calc(13vw - 40px);
    left: -24px;
    width: 40vw;
    height: auto;
    aspect-ratio: 377 / 146;
    background-image: url('../images/story-typo_pc.svg');
  }

  .story-tagline {
    margin-bottom: var(--sp-5);
    font-size: var(--fs-body-l);
  }

  /* 2 列。列幅は 1fr 任せにして、間隔だけ % で渡す。 */
  .story-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 9%;
  }
}

/* Concept と同じ理由で、中くらいの画面だけ本文を詰める。 */
@media (560px <= width < 960px) {
  .story-copy .prose {
    line-height: var(--lh-airy);
  }
}

@media (min-width: 960px) {
  .story {
    margin-bottom: var(--sp-42);
    padding-bottom: var(--sp-30);
  }

  .story-intro {
    margin-bottom: var(--sp-32);
    background: linear-gradient(to bottom, #fff 52%, transparent 0);
  }

  .story-copy {
    padding: 13% 10% 0;
  }

  .story h2 {
    margin-bottom: var(--sp-9);
    font-size: var(--fs-head);
  }

  .story h2::before {
    top: 14%;
    left: -38px;
    width: 370px;
  }

  .story h2::after {
    content: '';
    position: absolute;
    top: 156px;
    left: 400px;
    width: min(100px, calc(100% - 400px));
    height: 1px;
    background: var(--hairline);
  }

  .story-tagline {
    margin-bottom: var(--sp-6);
    font-size: var(--fs-ttl-l);
  }

  .story-grid {
    width: 80%;
    max-width: var(--max-w);
  }

  .story-card,
  .story-card:last-child {
    margin-bottom: var(--sp-20);
  }

  .story-photo::before,
  .story-photo::after {
    width: var(--sp-16);
    height: var(--sp-16);
  }

  .story-photo::before {
    top: -12px;
    left: -12px;
    background-image: url('../images/photo-corner-top-gray_pc.png');
  }

  .story-photo::after {
    right: -12px;
    bottom: -12px;
    background-image: url('../images/photo-corner-bottom-gray_pc.png');
  }

  .story-card h3 {
    margin-top: -36px;
    margin-bottom: var(--sp-8);
    padding: var(--sp-10) var(--sp-11) 0 0;
    font-size: var(--fs-ttl-l);
  }

  .excerpt {
    font-size: var(--fs-body);
    line-height: var(--lh-airy);
  }

  .volume {
    font-size: 15px;
  }

  .volume span {
    padding-bottom: var(--sp-4);
  }

  .volume b {
    font-size: var(--fs-ttl-s);
  }
}

@media (min-width: 1200px) {
  .story h2::after {
    width: 130px;
  }
}

@media (min-width: 1600px) {
  .story h2::after {
    top: 196px;
  }
}

/* ══ お知らせ（暗い帯） ════════════════════════════════════════════
   .thoughts が帯、.band-news は中身がお知らせであることの印（variants.css が使う）。 */

.thoughts {
  color: var(--on-dark);
  background: var(--band) url('../images/sikou-bg_sp.jpg') left center / cover;
  overflow: clip;
}

.thoughts-inner {
  width: 84%;
  margin: auto;
  padding: var(--sp-28) 0 var(--sp-20);
}

.thoughts h2 {
  position: relative;
  margin-bottom: var(--sp-4);
  font-family: var(--latin);
  font-size: var(--fs-head-s);
  line-height: var(--lh-tight);
  isolation: isolate;
}

/* 見出しの背後の、輪郭だけの大きな英字。 */
.thoughts-word {
  position: absolute;
  top: -50px;
  left: 0;
  z-index: -1;
  font-size: clamp(3rem, 11vw, 6rem);
  line-height: var(--lh-flush);
  letter-spacing: var(--ls-flat);
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px var(--on-dark);
  opacity: .15;
  pointer-events: none;
}

.thoughts .tagline {
  margin-bottom: var(--sp-10);
}

.thoughts .article-card {
  margin-bottom: var(--sp-12);
}

.thoughts .article-card:last-child {
  margin-bottom: 0;
}

.thoughts .article-card h3 {
  margin: var(--sp-3) 0;
  font-size: var(--fs-ttl-s);
}

/* 暗い地ではチップの枠と字の行送りを詰める。 */
.thoughts .article-meta > span,
.thoughts .article-meta > span > span {
  line-height: var(--lh-flush);
}

@media (min-width: 560px) {
  .thoughts {
    background-image: url('../images/sikou-bg_pc.jpg');
  }

  .thoughts-inner {
    width: 90%;
    padding: var(--sp-32) 0 var(--sp-22);
  }

  /* 3 列。列幅は 1fr 任せ＝間隔を変えても足し算が合う。 */
  .thoughts-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4%;
  }

  .thoughts .article-card {
    margin-bottom: 0;
  }
}

@media (min-width: 960px) {
  .thoughts-inner {
    position: relative;
    width: 82%;
    max-width: var(--max-w);
    padding: var(--sp-65) 0 var(--sp-50);
  }

  .thoughts h2 {
    margin-bottom: var(--sp-18);
    font-size: var(--fs-head);
  }

  .thoughts-word {
    top: -64px;
    font-size: 6rem;
  }

  /* 添え書きは見出しの右肩へ逃がす。 */
  .thoughts .tagline {
    position: absolute;
    top: 244px;
    right: 0;
    margin: 0;
  }

  .thoughts-grid {
    gap: 5%;
  }

  .thoughts .article-card {
    margin: 0;
  }

  .thoughts .article-card h3 {
    margin: var(--sp-3) 0 var(--sp-4);
    font-size: var(--fs-ttl);
  }

  .thoughts .article-photo {
    margin-bottom: var(--sp-8);
  }

  .thoughts .article-meta > span > span {
    padding: 2px var(--sp-2) 3px;
  }
}

/* ══ ギャラリー（横に流れる帯） ════════════════════════════════════ */

.gallery {
  overflow: hidden;
}

/* 同じ並びを 2 組置き、半分ずらして無限に流す。 */
.gallery-track {
  display: flex;
  width: max-content;
  animation: gallery-drift 80s linear infinite;
}

.gallery-group {
  display: flex;
}

.gallery img {
  flex: 0 0 250px;
  width: 250px;
  height: auto;
  object-fit: cover;
}

@media (min-width: 560px) {
  .gallery img {
    flex-basis: 320px;
    width: 320px;
  }
}

@media (min-width: 960px) {
  .gallery-track {
    animation-duration: 160s;
  }

  .gallery img {
    flex-basis: 560px;
    width: 560px;
  }
}

@keyframes gallery-drift {
  to { transform: translateX(-50%); }
}

/* ══ 行き先カード ══════════════════════════════════════════════════ */

.destinations {
  display: grid;
  gap: var(--sp-5);
  width: 86%;
  margin: var(--sp-18) auto 0;
}

/* 角を空けた囲み罫。上下の罫と左右の罫を別々の擬似要素に持たせ、
   それぞれ両端を --rule-gap だけ引っ込める（原本は 4 本のグラデーション背景だった）。 */
.destinations a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-12) var(--sp-10);
}

.destinations a::before,
.destinations a::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.destinations a::before {
  inset: 0 var(--rule-gap, 12px);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.destinations a::after {
  inset: var(--rule-gap, 12px) 0;
  border-right: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}

.destinations span {
  font-family: var(--latin);
  font-size: var(--fs-ttl-l);
  line-height: var(--lh-flush);
  letter-spacing: var(--ls-flat);
}

.destinations small {
  margin-top: var(--sp-1);
  font-size: var(--fs-caption);
}

@media (min-width: 560px) {
  .destinations {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-12);
    max-width: 800px;
    margin-top: var(--sp-22);
  }

  .destinations span {
    font-size: var(--fs-ttl);
  }
}

@media (min-width: 960px) {
  .destinations {
    --rule-gap: 15px;

    gap: var(--sp-16);
    width: calc(100% - var(--sp-20));
    max-width: 1140px;
    margin-top: var(--sp-32);
  }

  .destinations a {
    padding: var(--sp-22) 0 var(--sp-24) var(--sp-24);
  }

  .destinations span {
    font-size: 35px;
  }

  .destinations small {
    margin-top: var(--sp-4);
    font-size: var(--fs-note);
  }
}

/* ══ フッター ══════════════════════════════════════════════════════ */

.footer {
  position: relative;
  padding: var(--sp-42) 0 var(--sp-8);
  text-align: center;
}

.footer nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--sp-18);
  font-size: var(--fs-note);
}

.footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--nav-line);
  margin-bottom: var(--sp-5);
  line-height: var(--lh-tight);
}

.footer nav a:last-child {
  margin-bottom: 0;
}

.footer-logo {
  display: block;
  width: 140px;
  margin: 0 auto var(--sp-10);
}

/* 所在地と電話は問い合わせに使うので、スマホでも添え字（10px）にしない。 */
.footer address {
  padding: 0 var(--gutter);
  font-size: var(--fs-note);
  font-style: normal;
  line-height: 2;
  letter-spacing: 0;
  color: var(--muted);
}

.footer address span {
  display: inline-block;
  margin: 0 var(--sp-3);
}

.copyright {
  display: block;
  margin-top: var(--sp-15);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-flat);
  color: var(--muted);
}

@media (min-width: 960px) {
  .footer {
    padding: var(--sp-50) 0 var(--sp-12);
  }

  .footer nav {
    flex-direction: row;
    justify-content: center;
    gap: 3%;
    margin-bottom: var(--sp-24);
    font-size: var(--fs-body);
  }

  .footer nav a {
    margin-bottom: 0;
  }

  .footer-logo {
    width: 214px;
    margin-bottom: var(--sp-9);
  }

  .copyright {
    margin-top: var(--sp-16);
  }
}

/* ══ 動きを止める ══════════════════════════════════════════════════
   最後に置くのは、上の全規則を打ち消す必要があるため。 */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .opening .opening-screen {
    display: none;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}