@charset "utf-8";
/* =========================================================
   ラーテル犬舎 — 投稿ページ用CSS（SWELL 子テーマから読み込む）

   ★このファイルは自動生成です。直接編集しないでください。
     元: css/style.css ＋ css/article.css
     生成: python3 wp-child/build.py

   静的ページ（トップ・犬舎について 等）と同じ style.css を丸ごと入れている。
   single.php のヘッダー・フッター・本文コンテナは、すべてこの中の
   .l-header / .l-nav / .post / .l-footer などに依存している。
   ========================================================= */

/* =========================================================
   ラーテル犬舎 HP — デザインの正本
   ここで定義した変数・タイポ・ヘッダー/フッターを
   記事ページ（SSG生成）側からも同じファイルを読み込んで共有する。
   ========================================================= */

:root {
  /* くすみブルー ＋ くすみアースカラー。
     現行 rsratel.com のくすんだ青（#5c849e）を軸に、
     黄み寄りだったベージュ系を灰み寄りへ振り、全体の彩度を落としている。 */
  --paper:  #f6f4ef;   /* 生成り。わずかに灰を含ませて黄みを抜いた */
  /* 白いスピッツを乗せるのはこの背景。明るすぎると犬が埋もれるので、
     生成り(--paper)とはっきり差がつく濃さにしている。 */
  --paper2: #ddd7c9;   /* くすみベージュ（旧 #e9dfcc より灰寄り） */
  --ink:    #3b3936;
  --ink-mute: #7c7872;
  --main:   #62869d;   /* くすみブルー。全体の軸 */
  --main-dark: #486a80;
  --accent: #a97b60;   /* くすみテラコッタ。旧 #c47222 は彩度が高く浮いていた */
  --honey:  #c4a678;   /* くすみサンド。旧 #d9a441 を落ち着かせた */
  --line:   #d8d2c7;

  /* 章ごとの背景（トップ）。朝の土 → 昼 → 夕の海 → また朝へ。
     05「見送る」だけ青に寄せている（湘南の海での海洋葬なので、
     時間の推移と内容が同じ方向を向く）。06 は 01 と同色で円環を閉じる。 */
  --stage-1: #f0eee7;
  --stage-2: #e6e1d5;
  --stage-3: #dbd4c5;
  --stage-4: #cfc9bb;
  --stage-5: #c0c5c8;
  --stage-6: #f0eee7;

  /* 犬舎の一日（下層ページ）。朝 → 夜。最後だけ青寄り */
  --day-1: #f6f4ef;
  --day-2: #efece3;
  --day-3: #e7e2d5;
  --day-4: #ddd7c7;
  --day-5: #d1ccbd;
  --day-6: #c2c6c9;

  /* 章とびらの空（トップ）。stage-* より一段はっきり時間を動かす。
     朝焼け → 朝 → 昼 → 午後 → 夕（海へ沈む）→ 翌朝（円環）。
     各グラデーションの下端色は、そのとびらに続くセクションの --stage-N と
     同じ色にしてある。本文の波がとびらを覆うとき、色が地続きに繋がるため。 */
  --sky-1: linear-gradient(180deg, #ded9cc 0%, #ecdfc8 58%, #f0eee7 100%);
  --sky-2: linear-gradient(180deg, #d2d8d6 0%, #e4decf 62%, #e6e1d5 100%);
  --sky-3: linear-gradient(180deg, #c9d3d6 0%, #dcd6c8 62%, #dbd4c5 100%);
  --sky-4: linear-gradient(180deg, #ccd0c8 0%, #d6cab5 62%, #cfc9bb 100%);
  --sky-5: linear-gradient(180deg, #a9b2bd 0%, #c1ac97 55%, #c0c5c8 100%);
  --sky-6: var(--sky-1);

  /* お迎えの流れ（7ステップ）。--day-* と同じ考え方で、
     最初の問い合わせ（生成り）から お迎え日当日（青寄り）へ進む。
     最後だけ青に振ることで「新しい生活の始まり」を色でも示す。 */
  --step-1: #f6f4ef;
  --step-2: #f1eee6;
  --step-3: #ebe7db;
  --step-4: #e4dfd0;
  --step-5: #dcd6c6;
  --step-6: #d2ccbe;
  --step-7: #c2c6c9;

  --font-round: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  /* 本文は端末標準フォント。Webフォントを読まない。
     Windows の Yu Gothic は Regular が細すぎるため Medium を先に指定する。 */
  --font-body:  -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
                "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "Yu Gothic",
                "Noto Sans CJK JP", "Meiryo", sans-serif;

  --contents: min(1120px, 88vw);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");

  /* セクション区切りの波形。上下で別の形にして繰り返し感を消す */
  --wave-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,80 L0,34 C120,10 240,4 360,18 C480,32 600,66 720,68 C840,70 960,40 1080,26 C1200,12 1320,14 1440,30 L1440,80 Z' fill='%23000'/%3E%3C/svg%3E");
  --wave-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,80 L1440,80 L1440,26 C1310,52 1180,64 1040,56 C900,48 780,18 640,14 C500,10 380,36 250,50 C170,58 80,58 0,46 Z' fill='%23000'/%3E%3C/svg%3E");
  /* c-wave-top--b 用。wave-a と同じ「上向き」だが山の位置が逆 */
  --wave-b2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,80 L0,26 C130,52 260,66 400,58 C540,50 660,16 800,12 C940,8 1070,38 1200,52 C1280,60 1360,58 1440,44 L1440,80 Z' fill='%23000'/%3E%3C/svg%3E");
}

/* =========================================================
   View Transitions
   参考サイト（たんぽぽ園）は barba.js でページ遷移を繋いでいるが、
   同じことを依存ライブラリなしで実現する。
   - navigation: auto … ページ間の遷移（遷移先も同じ宣言を持つ必要がある）
   - ::view-transition-* … 既定のクロスフェードを少し遅く、動きを添える
   ========================================================= */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .45s;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* ヘッダーは遷移中に動かさない（ちらつき防止） */
.l-header { view-transition-name: site-header; }

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

html { font-size: 62.5%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.6rem;
  line-height: 1.9;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}

body.is-locked,
body.is-nav-open { overflow: hidden; height: 100vh; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }

/* 紙の質感 — 外部画像を使わず SVG ノイズで敷く。
   ::before ではなく background-image で敷いている。
   波形の区切り（.c-wave-top::before）と疑似要素を奪い合って、
   波形のあるセクションからテクスチャが消える不具合があったため。 */
.c-texture {
  position: relative;
  background-image: var(--noise);
  background-blend-mode: multiply;
  /* タイルを波形の高さ（8rem）と揃える。
     揃えないと、波形の疑似要素と本体でノイズの位相がずれ、境目に線が見える */
  background-size: 8rem 8rem;
}

/* 有機的な輪郭 — 手でちぎった紙のようなマスク */
.c-organic  { border-radius: 62% 38% 55% 45% / 50% 58% 42% 50%; overflow: hidden; }
.c-organic2 { border-radius: 42% 58% 38% 62% / 60% 45% 55% 40%; overflow: hidden; }

/* 波形のセクション区切り
   入口（c-wave-top）だけでなく出口（c-wave-bottom）にも形をつける。
   直線で終わると、せっかく入口を波形にしても切り替わりが硬く見えるため。
   上下で違う波形を使い、同じ形の繰り返しに見えないようにしている。 */
.c-wave-top {
  position: relative;
  padding-top: 12rem;
}
.c-wave-top::before,
.c-wave-bottom::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 0;
  pointer-events: none;
}

/* 入口: このセクションの色を、前のセクションへせり出させる。
   ステージを連ねると、色の変化がそのまま丘の連なりになる */
.c-wave-top::before {
  /* top を -1px にするとノイズのタイル位相が1pxずれ、境目に線が出る。
     高さ 8rem＝タイル1枚ぶんなので、0 にすると本体と位相が揃う */
  top: 0;
  height: 8rem;
  /* セクション本体と同じ「色＋紙テクスチャ」にしないと、境目に色差の線が出る */
  background-color: var(--bg, var(--paper));
  background-image: var(--noise);
  background-blend-mode: multiply;
  background-size: 8rem 8rem;
  -webkit-mask: var(--wave-a) no-repeat center / 100% 100%;
          mask: var(--wave-a) no-repeat center / 100% 100%;
  transform: translateY(-100%);
}
/* 連続したときに同じ形が繰り返さないよう、1つおきに別の波形を使う */
.c-wave-top--b::before {
  -webkit-mask-image: var(--wave-b2);
          mask-image: var(--wave-b2);
}

/* 出口: 次のセクション（生成り）の色を、このセクションの下端に重ねる */
.c-wave-bottom { position: relative; }
.c-wave-bottom::after {
  bottom: -1px;
  height: 7rem;
  background: var(--paper);
  -webkit-mask: var(--wave-b) no-repeat center / 100% 100%;
          mask: var(--wave-b) no-repeat center / 100% 100%;
}

/* 装飾（犬・草）は波形より前に出す。丘の上に立っているように見せるため */
.deco-layer { z-index: 1; }
.l-inner    { z-index: 2; }

.l-inner { width: var(--contents); margin-inline: auto; position: relative; z-index: 1; }

/* =========================================================
   装飾レイヤー
   参考サイト（はばたき農場）は手描きイラストを写真とは別レイヤーで
   画面に散らしている。イラスト素材が用意できるまでの間、
   足あと・雲・草を SVG で代替している。
   ========================================================= */

.deco-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.deco {
  position: absolute;
  display: block;
  fill: currentColor;
}

/* 犬イラストの位置は CSS 変数で受ける。
   インラインの top/left で直接指定すると画面幅ごとに置き直せないため。 */
.deco--dog {
  width:  var(--w);
  top:    var(--t, auto);
  right:  var(--r, auto);
  bottom: var(--b, auto);
  left:   var(--l, auto);
  opacity: .95;
}

/* 白い日本スピッツは背景に溶けやすい。柔らかい影で輪郭を立てる。 */
.deco--dog-white {
  filter: drop-shadow(0 .4rem 1rem rgba(58, 54, 50, .22));
}
.deco--paw   { color: var(--accent); opacity: .13; }
.deco--cloud { color: #fff;          opacity: .85; }
.deco--grass { color: var(--main);   opacity: .16; }

/* ふわふわ漂う雲 */
@keyframes deco-float {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(1.4rem, -.8rem); }
}
.deco--cloud { animation: deco-float 14s ease-in-out infinite; }
.deco--cloud:nth-of-type(even) { animation-duration: 19s; animation-direction: reverse; }

@media (prefers-reduced-motion: reduce) {
  .deco--cloud { animation: none; }
}

@media (max-width: 700px) {
  .deco { transform: scale(.7); }
}

/* 900px 未満は1カラムになり左右の余白が消えるため、
   PC の座標のままだとカードの裏に隠れる。
   セクション下部の padding（最小 8rem）の中に小さく置き直す。 */
@media (max-width: 900px) {
  /* 位置は PC と同じ（セクション下部）。画面が狭いぶん幅だけ落とす。
     インラインの --w より強くするため !important が要る。 */
  .deco--dog {
    --w: 9.5rem !important;
    opacity: 1;
  }
  .deco--dog { transform: none; }
}

/* =========================================================
   オープニング — 9枚が中央で重なり、扇状に散開する
   ========================================================= */

.opening {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--paper);
  overflow: hidden;
}
.opening.is-done { pointer-events: none; }

.opening__stage {
  position: absolute;
  inset: 0;
}

.opening__card {
  position: absolute;
  top: 50%; left: 50%;
  width: clamp(180px, 22vw, 300px);
  aspect-ratio: 3 / 2;
  margin: 0;
  opacity: 0;
  /* --tx/--ty/--tr は JS が散開先として流し込む */
  transform: translate(-50%, -50%) rotate(var(--r0, 0deg)) scale(.86);
  border-radius: .6rem;
  overflow: hidden;
  box-shadow: 0 1.2rem 3rem rgba(58, 54, 50, .18);
  background: #fff;
  padding: .6rem .6rem 2.2rem;
  will-change: transform, opacity;
}
.opening__card img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: .3rem;
}

/* 中央に束として集まった状態 */
.opening__card.is-stacked {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(var(--r0, 0deg)) scale(1);
  transition: opacity .5s var(--ease-out), transform .7s var(--ease-out);
}

/* 扇状に散開した状態 */
.opening__card.is-spread {
  opacity: 1;
  transform:
    translate(calc(-50% + var(--tx)), calc(-50% + var(--ty)))
    rotate(var(--tr))
    scale(var(--ts, 1));
  transition: transform 1.15s var(--ease-out), opacity .6s ease;
}

/* 横位置は left:50% + translateX(-50%) ではなく
   「left:0 + right:0 + width:max-content + margin auto」で取る。
   前者だと絶対配置の幅の自動計算で**コンテナの左半分しか使えず**、
   375px幅で「ラーテル犬舎」（要 186px）が 187px に収まらず2行に折り返していた
   （2026-07-31 に実機で発生）。この書き方なら全幅を使って中央に置ける。

   半透明の紙＋ぼかしを敷いているのは、**狭い画面では散開後も中央が空かない**ため。
   カード幅が clamp の下限（180px）に張り付く一方で散開半径は 33vw しかなく、
   375px では 43vw のカードが 124px しか離れられずロゴに2枚重なる（実測）。
   PC では背景と同色なのでこの板はほぼ見えない（1440px では重なり0枚）。
   KV のキャッチコピー（.kv__catch）と同じ処理。 */
.opening__logo {
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  width: max-content;
  max-width: calc(100% - 3.2rem);
  margin-inline: auto;
  padding: clamp(2.4rem, 5vw, 3.2rem) clamp(3rem, 8vw, 4.4rem);
  background: rgba(246, 244, 239, .86);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  /* 真円に近い楕円にすると下側が細くなり「RATEL KENNEL」が板からはみ出す。
     角丸を弱めて有機的な四角に寄せ、下端でも幅を使えるようにする
     （.kv__catch のスマホ用と同じ考え方） */
  border-radius: 38% 36% 34% 40% / 30% 32% 28% 30%;
  transform: translateY(-50%) scale(.94);
  text-align: center;
  opacity: 0;
  transition: opacity .9s ease, transform 1.1s var(--ease-out);
  z-index: 5;
}
.opening__logo.is-shown { opacity: 1; transform: translateY(-50%) scale(1); }

.opening__logo-ja {
  font-family: var(--font-round);
  font-size: clamp(2.8rem, 5vw, 5.2rem);
  font-weight: 700;
  letter-spacing: .18em;
  margin: 0;
  color: var(--ink);
}
.opening__logo-en {
  display: block;
  margin-top: .8rem;
  font-size: clamp(1.1rem, 1.4vw, 1.4rem);
  letter-spacing: .42em;
  color: var(--main);
}

.opening.is-hiding {
  opacity: 0;
  transition: opacity .8s ease;
}

/* =========================================================
   ヘッダー
   ========================================================= */

/* ドロワー（.l-nav）は .l-header の子だが、position:fixed でビューポート全面を覆う。
   **transform / filter / backdrop-filter は position:fixed の子孫に対して
   「含みブロック」を作る**ため、.l-header 自身がそれらを持つと
   ドロワーの inset:0 がヘッダーの枠（高さ97px）に対して解決されてしまい、
   メニューが背景透過で崩れる（2026-07-31 に実機で発生）。
   そのため、このヘッダーには transform も backdrop-filter も直接持たせない。 */
.l-header {
  position: fixed;
  /* 出現アニメは transform ではなく top で行う（transform は含みブロックを作るため） */
  top: -1.2rem;
  left: 0;
  width: 100%;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem clamp(2rem, 4vw, 4.4rem);
  opacity: 0;
  transition: opacity .8s ease, top .8s var(--ease-out);
}
body.is-ready .l-header { opacity: 1; top: 0; }

/* スクロール後の背景・ぼかし・影は疑似要素が持つ。
   ヘッダー自身は含みブロックを作らないままにしておく。
   .l-header は position:fixed + z-index:900 で重ね合わせ文脈を作るので、
   z-index:-1 でもページ本文より前・ヘッダーの中身より後ろに収まる。 */
.l-header.is-scrolled::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(250, 247, 242, .92);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow: 0 .2rem 2rem rgba(58, 54, 50, .07);
  transition: opacity .3s ease;
}
.l-header.is-scrolled { padding-block: 1.2rem; }

.l-header__logo {
  font-family: var(--font-round);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: .16em;
  margin: 0;
}
.l-header__logo small {
  display: block;
  font-size: 1rem;
  letter-spacing: .34em;
  color: var(--main);
  font-weight: 400;
}

.l-nav ul { display: flex; gap: clamp(1.6rem, 2.6vw, 3.2rem); align-items: center; }
.l-nav a {
  font-size: 1.4rem;
  letter-spacing: .08em;
  position: relative;
  padding-block: .4rem;
}
.l-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--main);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease-out);
}
.l-nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.l-nav .is-cta {
  background: var(--main);
  color: #fff;
  padding: .9rem 2rem;
  border-radius: 999px;
  transition: background .3s ease;
}
.l-nav .is-cta::after { display: none; }
.l-nav .is-cta:hover { background: var(--main-dark); }

/* --- サブメニュー（PC） ------------------------------------------------
   横並びの親項目は 920px で既に余白が尽きているため、増やすぶんは
   ここに逃がす。親にホバー／フォーカスで下に開く。
   ホバーが無い環境（タブレット）でも :focus-within で開ける。 */
.l-nav__group { position: relative; }

/* ★ セレクタを `.l-nav .l-nav__sub` にしているのは、443行の `.l-nav ul` の
   `display:flex` に詳細度で勝つため。`.l-nav__sub` 単独 (0,1,0) では
   `.l-nav ul` (0,1,1) に負けて、サブ項目が横一列に並んでしまう。 */
.l-nav .l-nav__sub {
  position: absolute;
  top: 100%; left: 50%;
  translate: -50% 0;
  display: block;                      /* .l-nav ul の flex を打ち消す */
  min-width: 17rem;
  margin-top: 1.2rem;
  padding: 1rem 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 1.2rem;
  box-shadow: 0 1.2rem 2.8rem rgba(59, 57, 54, .12);
  opacity: 0;
  visibility: hidden;
  translate: -50% .6rem;
  transition: opacity .3s var(--ease-out), translate .3s var(--ease-out), visibility .3s;
  z-index: 20;
}
/* 親とサブの間に隙間があるとホバーが切れるので、透明な橋を渡す */
.l-nav__sub::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1.2rem;
  height: 1.2rem;
}
.l-nav__group:hover .l-nav__sub,
.l-nav__group:focus-within .l-nav__sub {
  opacity: 1;
  visibility: visible;
  translate: -50% 0;
}
.l-nav__sub li { display: block; }
.l-nav__sub a {
  display: block;
  padding: .8rem 1.8rem;
  font-size: 1.3rem;
  white-space: nowrap;
  transition: background .25s ease;
}
.l-nav__sub a::after { display: none; }   /* 下線アニメは親だけに残す */
.l-nav__sub a:hover { background: var(--paper2); }

/* ハンバーガー（900px 未満でのみ出す） */
.l-burger {
  display: none;
  position: relative;
  z-index: 950;
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(250, 247, 242, .9);
  box-shadow: 0 .2rem 1.2rem rgba(58, 54, 50, .12);
  cursor: pointer;
}
.l-burger span {
  display: block;
  position: absolute;
  left: 50%;
  width: 2rem;
  height: 2px;
  margin-left: -1rem;
  background: var(--ink);
  transition: transform .4s var(--ease-out), opacity .3s ease;
}
.l-burger span:nth-child(1) { top: 1.5rem; }
.l-burger span:nth-child(2) { top: 2.1rem; }
.l-burger span:nth-child(3) { top: 2.7rem; }

body.is-nav-open .l-burger span:nth-child(1) { transform: translateY(.6rem) rotate(35deg); }
body.is-nav-open .l-burger span:nth-child(2) { opacity: 0; }
body.is-nav-open .l-burger span:nth-child(3) { transform: translateY(-.6rem) rotate(-35deg); }

@media (max-width: 900px) {
  .l-burger { display: block; }

  /* PC の横並びメニューを、そのままドロワーに転用する（リンクを二重に持たない） */
  .l-nav {
    position: fixed;
    inset: 0;
    z-index: 940;
    display: grid;
    place-items: center;
    background: var(--paper);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-1.2rem);
    transition: opacity .4s ease, transform .5s var(--ease-out), visibility .4s;
  }
  body.is-nav-open .l-nav {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .l-nav ul {
    flex-direction: column;
    gap: 2.8rem;
    text-align: center;
  }
  .l-nav a { font-size: 1.7rem; letter-spacing: .12em; }
  .l-nav .is-cta { display: inline-block; padding: 1.2rem 3rem; font-size: 1.5rem; }

  /* ドロワーでは開閉させず、親の下にそのまま並べる。
     タップ数を増やさないほうが速く辿り着けるため。 */
  .l-nav .l-nav__sub {
    position: static;
    translate: none;
    opacity: 1;
    visibility: visible;
    margin-top: 1.4rem;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
  }
  .l-nav__sub::before { display: none; }
  .l-nav__sub a {
    padding: 0;
    font-size: 1.4rem;
    color: var(--main-dark);
  }
  .l-nav__sub a:hover { background: none; }
}

/* =========================================================
   キービジュアル — 散開後に無限横スライドへ
   ========================================================= */

.kv {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--paper);
}

.kv__slides {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.4rem;
  opacity: 0;
  transition: opacity 1s ease;
}
.kv__slides.is-shown { opacity: 1; }

.kv__row { display: flex; width: max-content; gap: 2.4rem; }
.kv__row--a { animation: slide-left 48s linear infinite; }
.kv__row--b { animation: slide-right 56s linear infinite; }

@keyframes slide-left  { from { transform: translateX(0);    } to { transform: translateX(-50%); } }
@keyframes slide-right { from { transform: translateX(-50%); } to { transform: translateX(0);    } }

@media (prefers-reduced-motion: reduce) {
  .kv__row--a, .kv__row--b { animation: none; }
}

.kv__slide {
  width: clamp(220px, 26vw, 380px);
  aspect-ratio: 3 / 2;
  border-radius: .8rem;
  overflow: hidden;
  flex: none;
  box-shadow: 0 .8rem 2.4rem rgba(58, 54, 50, .12);
}
.kv__slide img { width: 100%; height: 100%; object-fit: cover; }

.kv__catch {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: clamp(3rem, 6vw, 6rem) clamp(3rem, 7vw, 8rem);
  background: rgba(250, 247, 242, .82);
  backdrop-filter: blur(10px);
  border-radius: 50% 50% 48% 52% / 46% 44% 56% 54%;
  opacity: 0;
  transform: translateY(2rem) scale(.96);
  transition: opacity 1s ease, transform 1.2s var(--ease-out);
}
.kv__catch.is-shown { opacity: 1; transform: none; }

/* h1 はSEO上ページに1つ。キャッチと犬種名を1つの h1 に同居させている */
.kv__catch h1 { margin: 0; }

.kv__lead {
  display: block;
  font-family: var(--font-round);
  font-size: clamp(2.4rem, 4.4vw, 4.4rem);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .1em;
}
.kv__lead em { font-style: normal; color: var(--main); }

.kv__sub {
  display: block;
  margin-top: 1.6rem;
  font-family: var(--font-body);
  font-size: clamp(1.3rem, 1.6vw, 1.6rem);
  font-weight: 400;
  color: var(--ink-mute);
  letter-spacing: .06em;
  line-height: 1.9;
}

/* 「家族未満。」が行末で割れないようにする */
.u-nowrap { white-space: nowrap; }
.u-sp-only { display: none; }
.u-pc-only { display: inline; }

@media (max-width: 900px) {
  /* 画面いっぱいに広がって楕円が切れて見えるので、幅を抑えて形を保つ */
  .kv { min-height: 76svh; }
  .kv__catch {
    width: 88vw;
    padding: clamp(3rem, 8vw, 4.4rem) clamp(2rem, 5vw, 3rem);
    /* 真円に近い楕円だと下側が細く、長い行がはみ出す。
       角丸を弱めて有機的な四角に寄せ、下端でも幅を使えるようにする */
    border-radius: 36% 34% 32% 38% / 26% 28% 24% 26%;
  }
  .kv__lead { font-size: clamp(2.2rem, 7.4vw, 3.2rem); }
  .kv__sub  { font-size: 1.2rem; line-height: 1.85; margin-top: 1.2rem; }
  .kv__slide { width: clamp(180px, 52vw, 240px); }
  .u-sp-only { display: block; }
  .u-pc-only { display: none; }
}

.kv__scroll {
  position: absolute;
  bottom: 3rem; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-size: 1rem;
  letter-spacing: .3em;
  color: var(--ink-mute);
  writing-mode: vertical-rl;
  opacity: 0;
  transition: opacity .8s ease;
}
body.is-ready .kv__scroll { opacity: 1; }
.kv__scroll::after {
  content: "";
  display: block;
  width: 1px; height: 5rem;
  margin: 1rem auto 0;
  background: linear-gradient(var(--ink-mute), transparent);
}

/* =========================================================
   共通セクション
   ========================================================= */

/* 背景色は各 section の style="--bg:…" で渡す（時間の推移を表す） */
.section {
  padding-block: clamp(8rem, 12vw, 14rem);
  position: relative;
  /* shorthand にすると .c-texture の background-image を打ち消すので color だけ指定する */
  background-color: var(--bg, var(--paper));
}

/* 犬イラストはどの画面幅でもセクション下部の余白に立たせる。
   本文の左右に置くと --contents が 88vw のため余白が足りず、カードの裏に潜る。
   犬は最大 12rem、下オフセット最大 1.6rem なので 13.6rem 使う。余白は 14rem 確保する。
   （このルールは .section の後に置くこと。先に書くと上の padding-block に負ける） */
.section { padding-bottom: max(14rem, 12vw); }

/* 波形が 8rem せり出すぶん、上を広げて見出しと重ならないようにする。
   .c-wave-top 側に書くと、後から来る .section の padding-block に負けるのでここに置く */
.section.c-wave-top { padding-top: max(13rem, 12vw); }
.section--paper2 { background: var(--paper2); }

.section__head { text-align: center; margin-bottom: clamp(4rem, 6vw, 7rem); }
.section__en {
  display: block;
  font-size: 1.2rem;
  letter-spacing: .4em;
  color: var(--main);
  margin-bottom: 1.2rem;
}
/* 見出しは角ゴシックのテキスト。
   当初は手書き文字の画像にしていたが（参考2サイトと同じ方式）、
   ゴシック体に変更した。フォントは端末標準の角ゴシックを使う
   （Webフォントを足すと本文用に削った約786KBが戻ってしまうため）。
   テキストなので検索エンジンにもそのまま届く。 */
.section__ja,
.stage__ja {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(2.4rem, 3.8vw, 3.6rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .12em;
  color: var(--ink);
}
.section__head { text-align: center; }

/* スクロールで浮き上がる */
.js-reveal {
  opacity: 0;
  transform: translateY(3rem);
  transition: opacity .9s ease, transform 1.1s var(--ease-out);
}
.js-reveal.is-shown { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal { opacity: 1; transform: none; transition: none; }
}

/* 犬舎について */
.about__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 7rem);
  align-items: center;
}
@media (max-width: 860px) { .about__body { grid-template-columns: 1fr; } }

.about__pic { aspect-ratio: 4 / 3; }
.about__pic img { width: 100%; height: 100%; object-fit: cover; }

.about__lead {
  font-family: var(--font-round);
  font-size: clamp(1.8rem, 2.4vw, 2.4rem);
  line-height: 2;
  margin: 0 0 2.4rem;
}
.about__text { margin: 0 0 1.8rem; color: var(--ink-mute); }

/* 事業カード */
.works {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(2.4rem, 4vw, 4rem);
}
.works__card { text-align: center; }
.works__pic {
  aspect-ratio: 1 / 1;
  margin-bottom: 2rem;
  transition: transform .8s var(--ease-out);
}
.works__card:hover .works__pic { transform: rotate(-2deg) scale(1.03); }
.works__pic img { width: 100%; height: 100%; object-fit: cover; }
.works__title {
  font-family: var(--font-round);
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 .8rem;
  letter-spacing: .08em;
}
.works__text { font-size: 1.4rem; color: var(--ink-mute); margin: 0; }

/* お知らせ（WP REST から取得） */
.news__list { border-top: 1px solid var(--line); }
.news__item { border-bottom: 1px solid var(--line); }
.news__link {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 2rem;
  align-items: baseline;
  padding: 2.4rem .8rem;
  transition: background .3s ease, padding-left .3s var(--ease-out);
}
.news__link:hover { background: rgba(92, 132, 158, .06); padding-left: 2rem; }
.news__date { font-size: 1.3rem; color: var(--main); letter-spacing: .08em; }
.news__title { font-size: 1.6rem; margin: 0; font-weight: 500; }
@media (max-width: 640px) {
  .news__link { grid-template-columns: 1fr; gap: .4rem; }
}

.news__empty, .news__error {
  padding: 3rem 0;
  text-align: center;
  color: var(--ink-mute);
  font-size: 1.4rem;
}

/* お知らせの帯（トップ・KV直下）。
   プロローグ→6章の物語の入りを邪魔しないよう、.section（余白が大きく
   犬の置き場も確保する）は使わず軽量にしている。
   リストの見た目は上の .news__* をそのまま共有する。 */
.news-band {
  position: relative;
  padding-block: clamp(4.4rem, 7vw, 7rem);
  background-color: var(--paper);
}
.news-band__inner {
  width: min(76rem, 88vw);
  margin-inline: auto;
}
.news-band__head {
  text-align: center;
  margin-bottom: clamp(2rem, 3vw, 3rem);
}
.news-band__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(2rem, 2.8vw, 2.6rem);
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--ink);
}
.news-band__more { margin: 0; text-align: center; }
.news-band__more .c-more { margin-top: clamp(2.4rem, 4vw, 3.2rem); }

/* リンクボタン
   もとは「文字＋横線」だったが、押せる場所として認識されなかったため作り直した。
   面（背景）・縁・矢印の3つで押せることを示す。 */
.c-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-top: 4rem;
  padding: 1.4rem 6rem 1.4rem 2.8rem;   /* 右は矢印ぶん空ける */
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 .4rem 1.4rem rgba(58, 54, 50, .07);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--ink);
  text-align: left;
  transition: transform .4s var(--ease-out), box-shadow .4s ease,
              background-color .3s ease, border-color .3s ease, color .3s ease;
}

/* 矢印の丸 */
.c-more::before {
  content: "";
  position: absolute;
  top: 50%; right: 1rem;
  width: 3rem; height: 3rem;
  margin-top: -1.5rem;
  border-radius: 50%;
  background: var(--main);
  transition: background-color .3s ease, transform .45s var(--ease-out);
}
/* 矢印そのもの */
.c-more::after {
  content: "";
  position: absolute;
  top: 50%; right: 2.25rem;
  width: .7rem; height: .7rem;
  margin-top: -.4rem;
  border-top: 1.5px solid #fff;
  border-right: 1.5px solid #fff;
  transform: rotate(45deg);
  transition: transform .45s var(--ease-out), border-color .3s ease;
}

.c-more:hover {
  transform: translateY(-.3rem);
  box-shadow: 0 1rem 2.4rem rgba(58, 54, 50, .14);
  border-color: var(--main);
}
.c-more:hover::before { transform: scale(1.08); }
.c-more:hover::after  { transform: rotate(45deg) translate(.2rem, -.2rem); }

.c-more:focus-visible {
  outline: 2px solid var(--main);
  outline-offset: 3px;
}

/* 閉じる操作用。右向きの矢印は「次へ進む」に見えて意味が食い違うので、
   丸の中を ✕ に差し替える（+ を45度回して作る）。
   ホバーの transform も上書きしないと、基底の rotate(45deg) と二重にかかる。 */
.c-more--close::after {
  right: 2.05rem;
  width: 1.2rem;
  height: 1.2rem;
  margin-top: -.6rem;
  border: 0;
  background:
    linear-gradient(#fff, #fff) center / 100% 1.5px no-repeat,
    linear-gradient(#fff, #fff) center / 1.5px 100% no-repeat;
  transform: rotate(45deg);
}
.c-more--close:hover::after { transform: rotate(45deg) scale(1.12); }

/* 章の主導線。塗りつぶして他と差をつける */
.c-more--primary {
  background: var(--main);
  border-color: var(--main);
  color: #fff;
}
.c-more--primary::before { background: #fff; }
.c-more--primary::after  { border-color: var(--main); }
.c-more--primary:hover   { background: var(--main-dark); border-color: var(--main-dark); }
.c-more--primary:hover::after { border-color: var(--main-dark); }

/* カード内に置く場合は、カード自体がリンクなので浮かせない */
.breeds__card .c-more { margin-top: 0; }
.breeds__card:hover .c-more {
  border-color: var(--main);
  box-shadow: 0 1rem 2.4rem rgba(58, 54, 50, .14);
}

/* =========================================================
   Concept — 一生に向き合うとは
   ========================================================= */

/* =========================================================
   ステージ（犬の一生）
   トップの背骨。01 生まれる → 06 めぐる の時間軸で進み、
   背景色が朝 → 昼 → 夕 と推移して、06 で 01 の色に戻る（円環）。
   色は各 section の style="--bg:…" で渡す。
   ========================================================= */

/* 背景色は .section 側で background-color として指定済み。
   ここで shorthand を書くと .c-texture の背景画像を消してしまうので書かない。 */

.stage__head {
  text-align: center;
  margin-bottom: clamp(4rem, 6vw, 7rem);
}

.stage__no {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  font-family: var(--font-body);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--accent);
}
/* 「/ 06」で全体が6章であることを示す。
   写真が大きいと章の間隔が開き、順番を追っている感覚が消えるため、
   現在地と総数をここで明示している */
.stage__of {
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--ink-mute);
}
/* 章番号と英字ラベルの間に伸びる線。章から章へ辿っている感じを出す。
   （.stage__no は inline-flex なので、線は次の要素 .stage__en 側に持たせる） */
.stage__en::before {
  content: "";
  display: block;
  width: 1px;
  height: 2.8rem;
  margin: .9rem auto 1.4rem;
  background: linear-gradient(var(--accent), transparent);
  opacity: .5;
}

.stage__en {
  display: block;
  font-size: 1.15rem;
  letter-spacing: .4em;
  color: var(--main);
  margin-bottom: 1.4rem;
}

/* 見出しを画像にしているぶん、キーワードを含む本文をここに置いて検索側へ渡す */
.stage__lead {
  margin: 2rem auto 0;
  max-width: 42em;
  font-size: clamp(1.4rem, 1.8vw, 1.7rem);
  color: var(--ink-mute);
  letter-spacing: .04em;
}

.stage__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 7rem);
  align-items: center;
}
.stage__body--rev .stage__pic { order: 2; }
@media (max-width: 860px) {
  .stage__body { grid-template-columns: 1fr; gap: 3rem; }
  .stage__body--rev .stage__pic { order: 0; }
}

/* スマホでは写真を小さくする。
   全幅 4:3 だと1枚で画面の1/3を占め、章の見出しと見出しの間隔が開いて
   「順番にたどっている」感覚が消えてしまう（実機で指摘あり） */
@media (max-width: 700px) {
  .stage__pic {
    width: 80%;
    margin-inline: auto;
    aspect-ratio: 3 / 2;
  }
  .greeting__pic {
    width: 62%;
    margin-inline: auto;
  }
}

.stage__pic { aspect-ratio: 4 / 3; }
.stage__pic img { width: 100%; height: 100%; object-fit: cover; }

.stage__text { margin: 0 0 1.8rem; color: var(--ink-mute); }

.stage__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(2rem, 4vw, 4rem);
}

/* 04章のようにテキスト段の中へ置く場合。中央寄せだと本文の左端と軸がずれる。
   段幅が狭くボタンが折り返すため、gap も縦方向は詰める */
.stage__actions--start {
  justify-content: flex-start;
  gap: 1.6rem clamp(2rem, 4vw, 4rem);
  margin-top: 4rem;
}
.stage__actions--start .c-more { margin-top: 0; }

/* =========================================================
   章とびら — 絵本のページ送り（2026-08-03）
   各章の頭に置く全画面の「とびら」。position:sticky で画面上部に
   貼り付き、後続の本文セクションが波形ごと上に覆いかぶさって
   「ページをめくる」動きになる。JSはゼロ。

   ★重なり順は DOM 順だけで作っている（load-bearing）。
     tobira も .section も「positioned ＋ z-index:auto」なので、
     DOM で後のものが上に描画される:
       とびら01 < 本文01 < とびら02 < 本文02 < …
     これにより、とびらの上端の波（::before）は前章の本文の上に乗り、
     自章の本文はとびらを覆える。
     **tobira / .chapter / .section に z-index を付けないこと。**
     どれかに付けた瞬間、どこかの重なりが壊れる。
   ★.chapter や祖先に overflow を付けないこと（sticky が死ぬ）。
   ========================================================= */

.tobira {
  position: sticky;
  top: 0;
  /* z-index:0 は auto と同じ描画順（DOM順）のまま、
     とびらを stacking context にするために付けている。
     これが無いと .tobira__inner の z-index:1 が root へ漏れて、
     本文がとびらを覆った後もテキストだけが前面に残る。
     0 以外の値に変えないこと（DOM順の重なりが壊れる）。 */
  z-index: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  background-color: var(--paper);
  /* 紙テクスチャ × 空のグラデーション。c-texture と同じ見た目を
     multiply の多層背景で作る（c-texture を併用すると背景が競合する） */
  background-image: var(--noise), var(--sky, none);
  background-size: 8rem 8rem, auto;
  background-blend-mode: multiply, normal;
}

/* とびら上端の波。前章の本文へせり出して丘になる。
   本文側の波（wave-a）と形を変えるため wave-b2 を使う。
   ピン留め中は画面外に出るので、近づくときだけ見える。 */
.tobira::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8rem;
  transform: translateY(-100%);
  background-color: var(--sky-top, var(--paper));
  background-image: var(--noise);
  background-size: 8rem 8rem;
  background-blend-mode: multiply;
  -webkit-mask: var(--wave-b2) no-repeat center / 100% 100%;
          mask: var(--wave-b2) no-repeat center / 100% 100%;
  pointer-events: none;
}

/* 太陽。章ごとに位置が動き、05 で海へ沈み、06 で 01 と同じ位置に戻る。
   位置と色はとびらの inline style（--sun-x / --sun-y / --sun-c）で渡す */
.tobira__sun {
  position: absolute;
  left: var(--sun-x, 50%);
  top: var(--sun-y, 30%);
  width: clamp(9rem, 14vw, 14rem);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--sun-c, rgba(214, 186, 130, .9)) 0%,
    var(--sun-c2, rgba(214, 186, 130, .26)) 52%,
    transparent 72%
  );
  pointer-events: none;
}

.tobira__inner {
  position: relative;
  z-index: 1;                       /* 太陽より前。とびらの中で閉じる */
  text-align: center;
  padding: 2.4rem;
}
.tobira__no {
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: .6rem;
  font-size: clamp(4rem, 8vw, 7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .08em;
  color: var(--accent);
}
.tobira__of {
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--ink-mute);
}
.tobira__en {
  display: block;
  margin-top: 1.8rem;
  font-size: 1.2rem;
  letter-spacing: .5em;
  color: var(--main);
}
.tobira__ja {
  margin: 1rem 0 0;
  font-family: var(--font-body);
  font-size: clamp(3.6rem, 7vw, 6.4rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .14em;
  color: var(--ink);
}
.tobira__copy {
  margin: 2.6rem auto 0;
  max-width: 34em;
  padding-inline: 2rem;
  font-size: clamp(1.35rem, 1.8vw, 1.6rem);
  line-height: 2;
  letter-spacing: .05em;
  color: var(--ink-mute);
}

/* =========================================================
   アルバム写真 — 白フチ＋テープ＋手書き風キャプション（2026-08-03）
   オープニングのポラロイドの言語を本文へ引き継ぐ。
   c-organic（有機マスク）の代わりに使う。
   ========================================================= */

.stage__pic--album {
  position: relative;
  aspect-ratio: auto;               /* .stage__pic の 4/3 を解除（フチ＋キャプション分伸びる） */
  margin: 0;
  padding: 1.1rem 1.1rem .2rem;
  background: #fff;
  border-radius: .5rem;
  box-shadow: 0 1rem 2.8rem rgba(58, 54, 50, .15);
  rotate: var(--tilt, -1.6deg);
}
.stage__pic--album img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: .3rem;
}
/* マスキングテープ */
.stage__pic--album::before {
  content: "";
  position: absolute;
  top: -1.2rem;
  left: 50%;
  width: 9.5rem;
  height: 2.8rem;
  translate: -50%;
  rotate: -2deg;
  background: rgba(224, 206, 168, .62);
  box-shadow: 0 .2rem .5rem rgba(58, 54, 50, .08);
}
.stage__pic--album figcaption {
  padding: 1.1rem .4rem 1rem;
  text-align: center;
  font-family: var(--font-round);
  font-size: 1.35rem;
  letter-spacing: .14em;
  color: var(--ink-mute);
}

/* =========================================================
   進行レール — いま一生のどこにいるか（2026-08-03）
   画面右端に 01-06 の点を固定表示。現在章は js/main.js の
   lifeRail()（IntersectionObserver）が .is-current を付ける。
   IOが動かない環境ではハイライトされないだけで、点とジャンプは生きる。
   ========================================================= */

.life-rail {
  position: fixed;
  right: clamp(1rem, 2.4vw, 2.6rem);
  top: 50%;
  translate: 0 -50%;
  z-index: 800;                     /* ヘッダー(900)より下、本文より上 */
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .8s ease;
}
body.is-ready .life-rail { opacity: 1; pointer-events: auto; }
body.is-nav-open .life-rail { opacity: 0; pointer-events: none; }

.life-rail a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .9rem;
}
.life-rail__label {
  font-size: 1.1rem;
  letter-spacing: .1em;
  color: var(--ink-mute);
  opacity: 0;
  translate: .4rem 0;
  transition: opacity .3s ease, translate .3s var(--ease-out);
}
.life-rail__dot {
  width: .9rem;
  height: .9rem;
  border-radius: 50%;
  border: 1.5px solid var(--main);
  transition: background .3s ease, border-color .3s ease, scale .3s var(--ease-out);
}
.life-rail a:hover .life-rail__label,
.life-rail a.is-current .life-rail__label { opacity: 1; translate: 0 0; }
.life-rail a.is-current .life-rail__dot {
  background: var(--accent);
  border-color: var(--accent);
  scale: 1.35;
}

@media (max-width: 900px) {
  .life-rail { right: .7rem; gap: 1.3rem; }
  .life-rail__dot { width: .7rem; height: .7rem; }
  .life-rail__label { display: none; }   /* 狭い画面では点だけ */
}

/* LINE 先行案内（最優先CV）
   募集中の子がいない時期に離脱させないための受け皿。
   色で浮かせず、囲みと余白で「別扱い」にしている */
.line-cta {
  margin-top: clamp(5rem, 8vw, 8rem);
  padding: clamp(3.4rem, 6vw, 5rem) clamp(2.4rem, 5vw, 5rem);
  max-width: 56rem;
  margin-inline: auto;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 2.4rem;
  box-shadow: 0 .8rem 2.6rem rgba(58, 54, 50, .08);
}
.line-cta__title {
  font-family: var(--font-round);
  font-size: clamp(1.7rem, 2.2vw, 2.1rem);
  font-weight: 700;
  letter-spacing: .08em;
  margin: 0 0 1.4rem;
}
.line-cta__text {
  margin: 0;
  font-size: 1.4rem;
  line-height: 2;
  color: var(--ink-mute);
}
.line-cta .c-more { margin-top: 2.8rem; }
.line-cta__note {
  margin: 1.8rem 0 0;
  font-size: 1.25rem;
  color: var(--ink-mute);
}

/* 06 めぐる — 円環を閉じる */
.circle { text-align: center; max-width: 46em; margin-inline: auto; }
.circle__text {
  font-size: clamp(1.5rem, 1.9vw, 1.8rem);
  line-height: 2.1;
  color: var(--ink-mute);
  margin: 0 0 1.8rem;
}

/* 円環を閉じるボタン。.c-more と同じ「押せる見え方」に揃える */
.c-back {
  display: inline-flex;
  align-items: center;
  gap: 1.4rem;
  margin-top: 4rem;
  padding: 1.4rem 3.2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 .4rem 1.4rem rgba(58, 54, 50, .07);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--ink);
  transition: transform .4s var(--ease-out), box-shadow .4s ease,
              border-color .3s ease;
}
/* 矢印ではなく回る円。時間が一周して戻ることを示す */
.c-back::before {
  content: "";
  width: 1.8rem; height: 1.8rem;
  border: 1.5px solid var(--main);
  border-right-color: transparent;
  border-radius: 50%;
  transition: transform .7s var(--ease-out);
}
.c-back:hover {
  transform: translateY(-.3rem);
  box-shadow: 0 1rem 2.4rem rgba(58, 54, 50, .14);
  border-color: var(--main);
}
.c-back:hover::before { transform: rotate(-320deg); }
.c-back:focus-visible { outline: 2px solid var(--main); outline-offset: 3px; }

/* =========================================================
   Concept
   ========================================================= */

.concept { text-align: center; }

.concept__guide {
  margin: 4.4rem 0 0;
  font-size: 1.35rem;
  letter-spacing: .16em;
  color: var(--main);
}
.concept__guide::after {
  content: "";
  display: block;
  width: 1px; height: 4rem;
  margin: 1.4rem auto 0;
  background: linear-gradient(var(--main), transparent);
}

.concept__body {
  font-family: var(--font-round);
  font-size: clamp(1.7rem, 2.3vw, 2.4rem);
  line-height: 2.4;
  letter-spacing: .08em;
  margin: 0;
}
.concept__body strong {
  font-weight: 700;
  color: var(--main);
  position: relative;
}
.concept__body strong::after {
  content: "";
  position: absolute;
  left: 0; bottom: .1em;
  width: 100%; height: .28em;
  background: var(--honey);
  opacity: .35;
  z-index: -1;
}

/* =========================================================
   Our Services — 犬舎 / ホテル / イベント / 海洋葬
   ========================================================= */

.services {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.6rem, 3vw, 3.2rem);
}
/* スマホでも2列を保つ。1列にすると正方形画像が縦に4つ並び、
   このセクションだけで 2000px 超になってスクロールが終わらなくなる。 */
@media (max-width: 900px) { .services { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .services__title { font-size: 1.6rem; }
  .services__text  { font-size: 1.25rem; line-height: 1.8; }
}

.services__card { text-align: center; }
.services__pic {
  aspect-ratio: 1 / 1;
  margin-bottom: 1.8rem;
  transition: transform .8s var(--ease-out);
}
.services__card:hover .services__pic { transform: rotate(-2deg) scale(1.03); }
.services__pic img { width: 100%; height: 100%; object-fit: cover; }
.services__title {
  font-family: var(--font-round);
  font-size: 1.9rem;
  font-weight: 700;
  margin: 0 0 .8rem;
  letter-spacing: .1em;
}
.services__text { font-size: 1.35rem; color: var(--ink-mute); margin: 0; line-height: 1.9; }

/* =========================================================
   Ready for a Family — ご家族を探している子たち
   ========================================================= */

.puppy__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(2rem, 3vw, 3.2rem);
}

/* 犬種ごとの塊（/puppy/）。探している犬種は決まっていることが多いので、
   イタグレとスピッツを1つのグリッドに混ぜない */
.breed-group + .breed-group { margin-top: clamp(3.4rem, 5vw, 4.8rem); }
.breed-group__label {
  font-family: var(--font-round);
  font-size: clamp(1.6rem, 2.2vw, 1.9rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .06em;
  color: var(--main-dark);
  margin: 0 0 clamp(1.6rem, 2.6vw, 2.2rem);
  padding-left: 1.4rem;
  border-left: 3px solid var(--main);
}
.puppy__card {
  background: #fff;
  border-radius: 1.2rem;
  overflow: hidden;
  box-shadow: 0 .6rem 2rem rgba(58, 54, 50, .08);
  transition: transform .5s var(--ease-out), box-shadow .5s ease;
}
.puppy__card:hover {
  transform: translateY(-.6rem);
  box-shadow: 0 1.4rem 3.2rem rgba(58, 54, 50, .14);
}
.puppy__pic { aspect-ratio: 4 / 3; overflow: hidden; }
.puppy__pic img { width: 100%; height: 100%; object-fit: cover; }
.puppy__body { padding: 1.8rem 2rem 2.2rem; }
.puppy__name {
  font-family: var(--font-round);
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0 0 .6rem;
  letter-spacing: .06em;
}
.puppy__meta { font-size: 1.3rem; color: var(--ink-mute); margin: 0; }

@media (max-width: 700px) {
  /* minmax(240px) だと1列に落ちて縦に伸びすぎるため、2列で固定する */
  .puppy__grid { grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
  .puppy__body { padding: 1.2rem 1.4rem 1.6rem; }
  .puppy__name { font-size: 1.5rem; }
  .puppy__meta { font-size: 1.2rem; }
}

.puppy__loading, .puppy__error {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--ink-mute);
  font-size: 1.4rem;
  padding: 3rem 0;
}
/* 犬種で分けたグリッドでは、直前の見出しが左寄せなので中央だと座りが悪い。
   罫線ぶん（1.4rem）下げて見出しの文字と頭を揃える */
.breed-group .puppy__loading,
.breed-group .puppy__error {
  text-align: left;
  padding-left: 1.4rem;
}

/* =========================================================
   モーダル（js/main.js の puppyModal() / newsModal() が生成する）

   - 子犬カード … 要点だけのプレビュー。表の項目と画像を汎用的に拾って出し、
     全部見たい人は元のWPページへ誘導する（詳細はJS側のコメント参照）
   - お知らせ … content.rendered をそのまま .article で包んで描く

   外枠・ヘッダ・閉じるボタン・本文スクロールの4つは同じ見た目にしたいので、
   セレクタを並べて共有している。中身の作りだけ
   .dogmodal__* / .newsmodal__* で分ける。
   ========================================================= */

.dogmodal-overlay,
.newsmodal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: clamp(1.6rem, 4vw, 4rem);
  background: rgba(59, 54, 50, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.dogmodal-overlay.is-open,
.newsmodal-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease, visibility 0s;
}

.dogmodal,
.newsmodal {
  display: flex;
  flex-direction: column;
  width: min(60rem, 100%);
  max-height: 88vh;
  background: var(--paper);
  border-radius: 1.8rem;
  overflow: hidden;
  box-shadow: 0 2rem 5rem rgba(58, 54, 50, .28);
  transform: translateY(1.4rem) scale(.98);
  transition: transform .35s var(--ease-out);
}
.dogmodal-overlay.is-open .dogmodal,
.newsmodal-overlay.is-open .newsmodal { transform: none; }

/* お知らせは本文が長いので、子犬モーダルより少し広く取る */
.newsmodal { width: min(72rem, 100%); max-height: 90vh; }

@media (prefers-reduced-motion: reduce) {
  .dogmodal-overlay, .dogmodal,
  .newsmodal-overlay, .newsmodal { transition: none; }
}

/* 見出しと閉じるボタンは固定。本文（画像・表）だけがスクロールする。
   .dogmodal__name に flex:1 を持たせて余白を吸収させ、
   戻るボタンの有無に関わらず 閉じるボタンは常に右端に収まる。 */
.dogmodal__head,
.newsmodal__head {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex: none;
  padding: 1.8rem 2rem;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.dogmodal__name {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--font-round);
  font-size: clamp(1.9rem, 2.6vw, 2.3rem);
  font-weight: 700;
  letter-spacing: .06em;
}

.dogmodal__close,
.dogmodal__back,
.newsmodal__close {
  position: relative;
  flex: none;
  width: 3.6rem;
  height: 3.6rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: border-color .3s ease;
}
.dogmodal__close::before,
.dogmodal__close::after,
.newsmodal__close::before,
.newsmodal__close::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 1.4rem; height: 1.5px;
  background: var(--ink);
}
.dogmodal__close::before,
.newsmodal__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.dogmodal__close::after,
.newsmodal__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.dogmodal__close:hover,
.dogmodal__back:hover,
.newsmodal__close:hover { border-color: var(--main); }
.dogmodal__close:focus-visible,
.dogmodal__back:focus-visible,
.newsmodal__close:focus-visible { outline: 2px solid var(--main); outline-offset: 2px; }

/* 戻る（親犬を覗いているときだけ表示）。carousel の矢印と同じ山形を使う */
.dogmodal__back::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: .8rem; height: .8rem;
  margin: -.5rem 0 0 -.3rem;
  border-top: 1.5px solid var(--main);
  border-right: 1.5px solid var(--main);
  transform: rotate(-135deg);
}

.dogmodal__body,
.newsmodal__body {
  overflow-y: auto;
  padding: 2rem clamp(2rem, 3vw, 2.8rem) clamp(2.6rem, 4vw, 3.2rem);
  overscroll-behavior: contain;   /* 端まで来ても背面へスクロールを渡さない */
}

/* --- お知らせモーダル固有 --- */

/* 日付を上、タイトルを下。閉じるボタンが右端に収まるよう幅を吸収させる */
.newsmodal__heading { flex: 1; min-width: 0; }
.newsmodal__date {
  display: block;
  margin-bottom: .4rem;
  font-size: 1.2rem;
  letter-spacing: .1em;
  color: var(--main);
}
.newsmodal__title {
  margin: 0;
  font-family: var(--font-round);
  font-size: clamp(1.6rem, 2.2vw, 1.9rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .04em;
}

/* article.css は .article をページの本文として組んである（1.65rem / 行間2.05）。
   モーダルは横幅が狭いので少し詰め、先頭と末尾の余白だけ落とす */
.newsmodal__body .article { font-size: 1.5rem; }
.newsmodal__body .article > :first-child { margin-top: 0; }
.newsmodal__body .article > :last-child { margin-bottom: 0; }

.newsmodal__more {
  margin: 2.8rem 0 0;
  padding-top: 2.4rem;
  border-top: 1px solid var(--line);
  text-align: center;
}
.newsmodal__empty {
  margin: 0;
  padding: 3rem 0;
  text-align: center;
  font-size: 1.4rem;
  line-height: 2;
  color: var(--ink-mute);
}

/* お知らせのタイトルは長い（実測40文字）。375px では3行になり、
   ヘッダだけでモーダルの2割弱（136px）を占めて本文が読みにくくなる。
   狭い画面では2行で打ち切る。全文は本文と「元のページで見る」で追える。 */
@media (max-width: 600px) {
  .newsmodal__head { padding: 1.4rem 1.6rem; }
  .newsmodal__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}

.dogmodal__main-pic {
  aspect-ratio: 4 / 3;
  border-radius: 1.2rem;
  overflow: hidden;
  margin-bottom: 1.4rem;
  background: var(--paper2);
}
.dogmodal__main-pic img { width: 100%; height: 100%; object-fit: cover; }

.dogmodal__strip {
  display: flex;
  gap: .8rem;
  overflow-x: auto;
  padding-bottom: .4rem;
  margin-bottom: 2rem;
  scrollbar-width: none;
}
.dogmodal__strip::-webkit-scrollbar { display: none; }
.dogmodal__strip img {
  width: 6.4rem;
  height: 6.4rem;
  flex: none;
  object-fit: cover;
  border-radius: .8rem;
  cursor: pointer;
  opacity: .6;
  transition: opacity .2s ease;
}
.dogmodal__strip img:hover,
.dogmodal__strip img.is-active { opacity: 1; }

/* 「総額：◯◯円（税込）」。表とは別枠で拾っているので、価格だとひと目でわかるよう強調する */
.dogmodal__price {
  margin: 0 0 1.8rem;
  font-family: var(--font-round);
  font-size: clamp(1.7rem, 2.4vw, 2.1rem);
  font-weight: 700;
  color: var(--main-dark);
}

.dogmodal__facts { margin: 0 0 2rem; border-top: 1px solid var(--line); }
.dogmodal__fact { padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
.dogmodal__fact dt {
  margin: 0 0 .4rem;
  font-size: 1.15rem;
  letter-spacing: .1em;
  color: var(--main-dark);
}
.dogmodal__fact dd { margin: 0; font-size: 1.4rem; line-height: 1.8; }

/* 両親犬紹介（子犬ページのみ。成犬・引退犬ページには存在しない） */
.dogmodal__parents {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin: 0 0 2rem;
}
.dogmodal__parent {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex: 1 1 16rem;
  min-width: 0;
  padding: 1rem 1.4rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 1.2rem;
  /* ページ遷移ではなく同じモーダル内で切り替えるため <button> にしている。
     ボタンの既定スタイル（フォント・カーソル・文字寄せ）をリセットする */
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .3s ease;
}
.dogmodal__parent:hover,
.dogmodal__parent:focus-visible { border-color: var(--main); }
.dogmodal__parent:focus-visible { outline: 2px solid var(--main); outline-offset: 2px; }
.dogmodal__parent-pic {
  width: 4.6rem;
  height: 4.6rem;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: var(--paper2);
}
.dogmodal__parent-pic img { width: 100%; height: 100%; object-fit: cover; }
.dogmodal__parent-text { min-width: 0; }
.dogmodal__parent-label {
  display: block;
  font-size: 1.1rem;
  letter-spacing: .12em;
  color: var(--main);
}
.dogmodal__parent-name {
  display: block;
  font-family: var(--font-round);
  font-size: 1.5rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dogmodal__empty {
  margin: 0 0 2rem;
  font-size: 1.4rem;
  color: var(--ink-mute);
  text-align: center;
  padding: 2rem 0;
}

.dogmodal__actions { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.dogmodal__actions .c-more { margin-top: 0; }

/* =========================================================
   犬種を知る（ピラーページへの導線）
   ========================================================= */

.breeds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
}
@media (max-width: 760px) { .breeds { grid-template-columns: 1fr; } }

.breeds__card {
  position: relative;
  display: block;
  padding: clamp(3rem, 4vw, 4.4rem);
  background: #fff;
  border-radius: 1.6rem;
  overflow: hidden;
  transition: transform .5s var(--ease-out);
}
.breeds__card:hover { transform: translateY(-.6rem); }
.breeds__card::after {
  content: "";
  position: absolute;
  right: -6rem; bottom: -6rem;
  width: 18rem; height: 18rem;
  border-radius: 50%;
  background: var(--honey);
  opacity: .12;
}
.breeds__en {
  display: block;
  font-size: 1.1rem;
  letter-spacing: .3em;
  color: var(--main);
  margin-bottom: 1rem;
}
.breeds__name {
  font-family: var(--font-round);
  font-size: clamp(2rem, 2.6vw, 2.6rem);
  font-weight: 700;
  margin: 0 0 1.2rem;
  letter-spacing: .06em;
}
.breeds__text { font-size: 1.4rem; color: var(--ink-mute); margin: 0 0 2rem; line-height: 1.9; }

/* =========================================================
   代表挨拶
   ========================================================= */

.greeting__body {
  display: grid;
  grid-template-columns: 38% 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
}
@media (max-width: 860px) { .greeting__body { grid-template-columns: 1fr; } }

.greeting__pic { aspect-ratio: 1 / 1; }
.greeting__pic img { width: 100%; height: 100%; object-fit: cover; }

.greeting__title {
  font-family: var(--font-round);
  font-size: clamp(2rem, 2.8vw, 2.8rem);
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: .06em;
  margin: 0 0 2.4rem;
}
.greeting__text { margin: 0 0 1.8rem; color: var(--ink-mute); }
.greeting__sign {
  margin-top: 3rem;
  font-family: var(--font-round);
  font-size: 1.5rem;
  letter-spacing: .08em;
  text-align: right;
}
.greeting__sign strong { font-size: 1.9rem; font-weight: 700; margin-left: .6rem; }

/* =========================================================
   ブログ
   ========================================================= */

.blog__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: clamp(3rem, 5vw, 4.4rem);
}
.blog__tab {
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 999px;
  padding: .9rem 2.2rem;
  font-family: var(--font-body);
  font-size: 1.35rem;
  letter-spacing: .08em;
  color: var(--ink-mute);
  cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.blog__tab:hover { border-color: var(--main); color: var(--main); }
.blog__tab.is-active {
  background: var(--main);
  border-color: var(--main);
  color: #fff;
}

.blog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(2rem, 3vw, 3.2rem);
  min-height: 20rem;
}
.blog__card { display: block; }
.blog__pic {
  aspect-ratio: 16 / 10;
  border-radius: 1rem;
  overflow: hidden;
  margin-bottom: 1.4rem;
  background: var(--paper2);
}
.blog__pic img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease-out);
}
.blog__card:hover .blog__pic img { transform: scale(1.06); }
.blog__date { font-size: 1.2rem; color: var(--main); letter-spacing: .08em; }
.blog__title {
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1.75;
  margin: .6rem 0 0;
}
@media (max-width: 700px) {
  /* 1列だと縦に長すぎるため2列にする（2026-08-03 西山指示）。
     2列なら6件でも3行で収まるので、旧「4件に絞る」対応は廃止した */
  .blog__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.6rem; }
  .blog__pic { margin-bottom: 1rem; border-radius: .8rem; }
  .blog__date { font-size: 1.1rem; }
  .blog__title {
    font-size: 1.3rem;
    line-height: 1.6;
    /* 2列幅では長いタイトルで行数が暴れるため、3行で省略する */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .blog__tab { padding: .7rem 1.6rem; font-size: 1.25rem; }
}

.blog__loading, .blog__error {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--ink-mute);
  font-size: 1.4rem;
  padding: 3rem 0;
}

/* =========================================================
   アクセス
   ========================================================= */

.access__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 860px) { .access__body { grid-template-columns: 1fr; } }

.access__map {
  aspect-ratio: 4 / 3;
  border-radius: 1.6rem;
  overflow: hidden;
  background: var(--paper2);
}
.access__map iframe { width: 100%; height: 100%; border: 0; display: block; }

.access__name {
  font-family: var(--font-round);
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0 0 1.6rem;
  letter-spacing: .06em;
}
.access__dl { margin: 0 0 2.4rem; }
.access__dl dt {
  font-size: 1.2rem;
  letter-spacing: .16em;
  color: var(--main);
  margin-top: 1.6rem;
}
.access__dl dd { margin: .4rem 0 0; font-size: 1.5rem; }
.access__note { font-size: 1.4rem; color: var(--ink-mute); line-height: 2; margin: 0; }

/* =========================================================
   固定ページ共通
   「犬舎について」以降の固定ページで使い回す部品。
   ========================================================= */

/* 見出しを画像にしないパターン（手書き画像を作っていない見出し用） */
/* （旧 .section__ja--text は .section__ja がテキスト見出しになったため廃止） */

/* パンくず */
.c-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 1.2rem;
  letter-spacing: .06em;
  color: var(--ink-mute);
  margin-bottom: clamp(3rem, 5vw, 5rem);
}
.c-breadcrumb a { color: var(--main-dark); text-decoration: underline; text-underline-offset: .3em; }
.c-breadcrumb span[aria-hidden] { opacity: .4; }

/* ページヒーロー */
.page-hero {
  position: relative;
  padding-block: max(15rem, 15vw) clamp(6rem, 10vw, 10rem);
  background-color: var(--bg, var(--paper));
}
.page-hero__head { text-align: center; }
.page-hero__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(2.8rem, 5vw, 4.4rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .12em;
  color: var(--ink);
}
.page-hero__sub {
  display: block;
  margin-top: 2.4rem;
  font-family: var(--font-body);
  font-size: clamp(1.4rem, 1.8vw, 1.7rem);
  font-weight: 400;
  line-height: 2;
  letter-spacing: .04em;
  color: var(--ink-mute);
}
.page-hero__pic {
  width: min(64rem, 100%);
  margin: clamp(4rem, 7vw, 7rem) auto 0;
  aspect-ratio: 16 / 10;
}
.page-hero__pic img { width: 100%; height: 100%; object-fit: cover; }

/* セクションの途中で使うとき。ヒーローと同じ 64rem だと写真がその章の主役になってしまい、
   本来見せたいカード（募集中の子）が小さく見える。幅を絞り、下にも余白を持たせる */
.section .page-hero__pic {
  width: min(46rem, 100%);
  margin-top: clamp(3rem, 5vw, 4.4rem);
  margin-bottom: clamp(3rem, 5vw, 4.4rem);
}

@media (max-width: 700px) {
  .page-hero__pic { width: 86%; aspect-ratio: 4 / 3; }
  /* 上の 1 クラス指定では .section .page-hero__pic（2クラス）に詳細度で負けるため、
     セクション内の写真にも同じ幅を明示する。無いとスマホでヒーローより大きくなる */
  .section .page-hero__pic { width: 86%; }
}

/* =========================================================
   私たちの考え
   ========================================================= */

.stance { max-width: 52rem; margin-inline: auto; text-align: center; }
.stance__catch {
  font-family: var(--font-round);
  font-size: clamp(2.2rem, 3.6vw, 3.2rem);
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.7;
  margin: 0;
}
.stance__catch em { font-style: normal; color: var(--main); }
.stance__note {
  margin: 1.4rem 0 0;
  font-size: 1.3rem;
  color: var(--ink-mute);
  letter-spacing: .08em;
}
.stance__body {
  margin-top: clamp(3.4rem, 5vw, 5rem);
  text-align: left;
}
.stance__body p { margin: 0 0 2rem; color: var(--ink-mute); }
.stance__body p:last-child { margin-bottom: 0; }
/* 本文の「一頭の命」に写真で答える（2026-08-06）。
   .stance（52rem）の内側なので幅は本文と同じ。ここを本文より広げたいときは
   .stance の外（.l-inner 直下）へ出すこと。中に置いたまま値を大きくしても効かない */
.stance__pic {
  width: 100%;
  margin: clamp(3.6rem, 6vw, 6rem) auto 0;
  aspect-ratio: 16 / 9;
}
.stance__pic img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 700px) {
  .stance__pic { width: 88%; aspect-ratio: 4 / 3; }
}

/* =========================================================
   ブリーダーの約束
   番号の書式はトップの章番号（01 / 06）と揃えている
   ========================================================= */

/* =========================================================
   横スクロールのカルーセル（汎用）
   縦に積むと読む前に疲れるため、横スワイプで1枚ずつ送る形にしている。
   スクロールは CSS の scroll-snap。JSは矢印とカウンターの同期だけ。
   ========================================================= */

.carousel { position: relative; }

.carousel__track {
  display: flex;
  gap: clamp(1.6rem, 2.5vw, 2.4rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  list-style: none;
  margin: 0;
  /* 影が切れないよう上下に余白を取る */
  padding: 1rem .4rem 2rem;
  /* スクロールバーは隠す（矢印とカウンターで位置を示す） */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carousel__track::-webkit-scrollbar { display: none; }

.carousel__item {
  /* 次のカードが少し見える幅にして、横に動くことを分かるようにする */
  flex: 0 0 min(38rem, 84%);
  scroll-snap-align: start;
  display: flex;
}

.carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}

.carousel__btn {
  position: relative;
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 .3rem 1.2rem rgba(58, 54, 50, .07);
  cursor: pointer;
  transition: transform .35s var(--ease-out), border-color .3s ease, opacity .3s ease;
}
.carousel__btn::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: .8rem; height: .8rem;
  margin: -.45rem 0 0 -.5rem;
  border-top: 1.5px solid var(--main);
  border-right: 1.5px solid var(--main);
  transform: rotate(45deg);
}
.carousel__btn[data-dir="-1"]::before {
  margin-left: -.3rem;
  transform: rotate(-135deg);
}
.carousel__btn:hover { border-color: var(--main); transform: translateY(-.2rem); }
.carousel__btn:disabled { opacity: .3; cursor: default; transform: none; }
.carousel__btn:focus-visible { outline: 2px solid var(--main); outline-offset: 3px; }

.carousel__count {
  margin: 0;
  min-width: 6rem;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--accent);
}
.carousel__count small {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ink-mute);
  letter-spacing: .1em;
}

/* =========================================================
   ブリーダーの約束
   ========================================================= */

.promise__item {
  position: relative;
  width: 100%;
  padding: clamp(2.8rem, 4vw, 3.6rem) clamp(2.4rem, 4vw, 3.4rem);
  background: #fff;
  border-radius: 1.6rem;
  box-shadow: 0 .6rem 2rem rgba(58, 54, 50, .07);
}
.promise__no {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--accent);
}
.promise__of {
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--ink-mute);
}
.promise__title {
  font-family: var(--font-round);
  font-size: clamp(1.7rem, 2.3vw, 2.1rem);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .04em;
  margin: 1rem 0 1.4rem;
}
.promise__text { margin: 0; font-size: 1.5rem; line-height: 2; color: var(--ink-mute); }
/* 見出しとカルーセルの間に置く導入写真。カルーセルは1枚ずつしか見えないので、
   何の話をしているのか（＝生まれてくる命への責任）を先に絵で示す（2026-08-06） */
.promise__pic {
  width: min(52rem, 100%);
  margin: clamp(3rem, 5vw, 4.4rem) auto clamp(1rem, 2vw, 2rem);
  aspect-ratio: 3 / 2;
}
.promise__pic img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 700px) {
  .promise__pic { width: 88%; }
}

/* =========================================================
   犬舎の一日
   朝 → 夜 で各カードの地色が少しずつ濃くなる（--tone で渡す）
   ========================================================= */

/* 「約束」は6項目が独立しているので横送りにしたが、こちらは 朝→夜 の流れ自体が中身。
   横送りにすると順番の意味が消え、同じUIが2回続いて飽きるため、
   縦を活かした時間軸（タイムライン）にしている。
   縦スクロールが「一日が流れていく」意味になる。

   縦線＋節目の丸は「お迎えの流れ」（.flow）と共有する。
   どちらも "順番に意味がある" 内容なので同じ見え方でよい。 */
.oneday,
.flow {
  position: relative;
  display: grid;
  gap: clamp(2.4rem, 4vw, 3.4rem);
  padding-left: var(--line-x, 3.4rem);
}
/* 全体を貫く縦の線 */
.oneday::before,
.flow::before {
  content: "";
  position: absolute;
  top: .8rem;
  bottom: 4rem;
  left: calc(var(--line-x, 3.4rem) / 2 - .5px);
  width: 1px;
  background: linear-gradient(var(--accent), var(--main));
  opacity: .35;
}

.oneday__item,
.flow__item {
  position: relative;
  display: grid;
  gap: clamp(1.4rem, 2.5vw, 2.4rem);
  align-items: center;
  padding: clamp(2rem, 3vw, 3rem);
  background: var(--tone, #fff);
  border-radius: 1.4rem;
}
/* 線の上に置く節目の丸 */
.oneday__item::before,
.flow__item::before {
  content: "";
  position: absolute;
  top: clamp(2.4rem, 3.4vw, 3.4rem);
  left: calc(var(--line-x, 3.4rem) / -2 - .55rem);
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--accent);
}

@media (min-width: 760px) {
  .oneday { --line-x: 4.6rem; }
  /* 時刻 | 見出し＋本文 | 写真 の3列。
     時刻と写真は2行ぶんにまたがらせる */
  .oneday__item {
    grid-template-columns: 9rem 1fr 22rem;
    grid-template-areas:
      "time title pic"
      "time text  pic";
    align-items: start;
  }
  .oneday__time  { grid-area: time; }
  .oneday__title { grid-area: title; margin-top: 0; align-self: end; }
  .oneday__text  { grid-area: text; }
  .oneday__pic   { grid-area: pic; align-self: center; }
}

.oneday__time {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .26em;
  color: var(--accent);
}
.oneday__title {
  font-family: var(--font-round);
  font-size: clamp(1.7rem, 2.2vw, 2rem);
  font-weight: 700;
  line-height: 1.7;
  margin: 1.4rem 0 1.2rem;
}
.oneday__text { margin: 0; font-size: 1.45rem; line-height: 2; color: var(--ink-mute); }
.oneday__pic { aspect-ratio: 4 / 3; }
.oneday__pic img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 759px) {
  /* タイムラインで左に寄るぶん、写真をさらに小さくして密度を上げる */
  .oneday { --line-x: 2.8rem; }
  .oneday__pic { width: 64%; margin-inline: auto; aspect-ratio: 3 / 2; }
  .oneday__title { font-size: 1.6rem; margin: 1rem 0 .8rem; }
  .oneday__text  { font-size: 1.4rem; line-height: 1.95; }
}

/* =========================================================
   犬舎のこと
   ========================================================= */

/* もとは「ラベル14rem｜値1fr」の横並び表だった。
   PCだとラベルが値から遠く、値が2行に折り返すと余計に対応が追いにくく
   「見づらい」と指摘された（2026-07-30・実機フィードバック）。
   ラベルを値の真上に置くカードへ変更し、複数枚をグリッドで並べる方式にした
   （.panel と同系統の見え方に揃えている）。 */
.facts {
  display: grid;
  /* 28rem にしているのは、l-inner の幅（最大1120px）で4列になると
     6枚のときに最終行が2枚だけ余って据わりが悪いため。3列止まりにして
     6枚=3+3、5枚=3+2で揃う */
  grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
  gap: clamp(1.6rem, 2.5vw, 2.4rem);
}
.facts__row {
  padding: clamp(2.2rem, 3vw, 2.6rem) clamp(2rem, 3vw, 2.4rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 1.4rem;
  box-shadow: 0 .4rem 1.4rem rgba(58, 54, 50, .06);
}
.facts dt {
  display: block;
  margin-bottom: .8rem;
  font-size: 1.2rem;
  letter-spacing: .14em;
  color: var(--main);
}
.facts dd { margin: 0; font-size: 1.5rem; line-height: 1.9; }
.facts__note { display: block; margin-top: .6rem; font-size: 1.25rem; color: var(--ink-mute); }

/* =========================================================
   次に読むなら
   ========================================================= */

.next-pages {
  display: grid;
  gap: clamp(1.6rem, 3vw, 2.4rem);
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
}
/* LINE の囲みの直後に置くページ（ceremony / ratelhotel）だけ、間を空けて切り離す。
   隣接セレクタにしてあるので、単独で使っている他ページの余白は変わらない */
.line-cta + .next-pages { margin-top: clamp(4.4rem, 7vw, 7.2rem); }
.next-pages__card {
  display: block;
  padding: clamp(2.4rem, 3.5vw, 3.2rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 1.6rem;
  box-shadow: 0 .4rem 1.4rem rgba(58, 54, 50, .06);
  transition: transform .4s var(--ease-out), box-shadow .4s ease, border-color .3s ease;
}
.next-pages__card:hover {
  transform: translateY(-.4rem);
  box-shadow: 0 1rem 2.4rem rgba(58, 54, 50, .13);
  border-color: var(--main);
}
.next-pages__en {
  display: block;
  font-size: 1.1rem;
  letter-spacing: .3em;
  color: var(--main);
  margin-bottom: .8rem;
}
.next-pages__ja {
  display: block;
  font-family: var(--font-round);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: .06em;
  margin-bottom: 1rem;
}
.next-pages__text { display: block; font-size: 1.35rem; line-height: 1.9; color: var(--ink-mute); }

/* =========================================================
   お迎えの流れ（STEP タイムライン）
   縦線と節目の丸は .oneday と共有している（上のブロックを参照）。
   基本はSTEP番号と本文だけの2列で、意味の合うステップにだけ写真を足す（.flow__pic）。
   ========================================================= */

/* 行の間隔は各要素の margin だけで作る。
   .oneday と共有している gap をそのまま使うと margin と二重になる */
.flow__item {
  row-gap: 0;
  align-items: start;
}

@media (min-width: 760px) {
  .flow { --line-x: 4.6rem; }
  .flow__item {
    grid-template-columns: 10rem 1fr;
    column-gap: clamp(2rem, 3vw, 3rem);
  }
  /* 番号だけ左列の1行目に固定し、見出し・本文・ボタンは右列へ順に流す。
     grid-template-areas で "text" という名前を共有させると、
     **複数ある .flow__text が同じセルに重なる**（実際に段落が重なった）。
     .oneday は本文が1つなので気付けなかった。 */
  .flow__no { grid-column: 1; grid-row: 1; }
  .flow__title,
  .flow__text,
  .flow__item .c-more { grid-column: 2; }
  .flow__title { margin-top: 0; }
  .flow__item .c-more { justify-self: start; }
}
@media (max-width: 759px) { .flow { --line-x: 2.8rem; } }

.flow__no {
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--accent);
}
.flow__of { font-size: 1.1rem; font-weight: 500; letter-spacing: .1em; color: var(--ink-mute); }
.flow__title {
  font-family: var(--font-round);
  font-size: clamp(1.7rem, 2.2vw, 2.1rem);
  font-weight: 700;
  line-height: 1.7;
  margin: 1.2rem 0 1.2rem;
}
.flow__text { margin: 0; font-size: 1.45rem; line-height: 2; color: var(--ink-mute); }
.flow__text + .flow__text { margin-top: 1.2rem; }
.flow__item .c-more { margin-top: 2rem; }

/* 写真を持つステップと持たないステップが混在するため、.oneday のように
   写真を3列目に出す作りにはしていない。列構成をステップごとに変えると、
   本文の折り返し幅が揃わなくなるため。本文の下に流す。 */
/* 角丸は .c-organic / .c-organic2（手でちぎった輪郭）に任せる。
   ここで border-radius を持つと、後ろに書いてあるぶんユーティリティ側に勝ってしまい、
   .oneday の写真と見え方がずれる */
.flow__pic {
  margin: 2.2rem 0 0;
  width: min(32rem, 100%);
  aspect-ratio: 16 / 10;
}
.flow__pic img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 760px) { .flow__pic { grid-column: 2; } }

@media (max-width: 759px) {
  .flow__title { font-size: 1.6rem; margin: 1rem 0 .8rem; }
  .flow__text  { font-size: 1.4rem; line-height: 1.95; }
}

/* =========================================================
   パネル（白い囲みの説明ブロック）
   費用・引退犬・ホテルなど「読ませる補足」に使う汎用部品。
   ========================================================= */

.panel-pair {
  display: grid;
  gap: clamp(2rem, 3vw, 2.8rem);
  grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
  align-items: start;
}

.panel {
  padding: clamp(2.8rem, 4vw, 4rem) clamp(2.4rem, 4vw, 3.6rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 2rem;
  box-shadow: 0 .6rem 2rem rgba(58, 54, 50, .07);
}
.panel__en {
  display: block;
  font-size: 1.1rem;
  letter-spacing: .3em;
  color: var(--main);
  margin-bottom: 1rem;
}
.panel__title {
  font-family: var(--font-round);
  font-size: clamp(1.8rem, 2.4vw, 2.2rem);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.7;
  margin: 0 0 1.8rem;
}
/* 金額は「隠していない」ことが伝わるよう、はっきり大きく出す */
.panel__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .2rem .8rem;
  margin: 0 0 1.8rem;
  font-family: var(--font-round);
  color: var(--main-dark);
}
.panel__price b {
  font-size: clamp(3rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .02em;
}
.panel__price small {
  font-family: var(--font-body);
  font-size: 1.3rem;
  color: var(--ink-mute);
  letter-spacing: .06em;
}
.panel__text { margin: 0 0 1.6rem; font-size: 1.45rem; line-height: 2; color: var(--ink-mute); }
.panel__text:last-child { margin-bottom: 0; }
.panel .c-more { margin-top: 1.4rem; }

/* =========================================================
   オーナー様の声
   件数が多いのでカルーセルにはせず、拾い読みできるカードで並べる。
   （カルーセルは1枚ずつしか見えないため、量そのものが説得材料になる
     この内容には向かない）
   ========================================================= */

.reviews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
  gap: clamp(2rem, 3vw, 2.8rem);
  align-items: start;
}

/* 25件を全部出すとスマホで 18,000px を超えるため、初期表示は6件に絞る。
   絞り込みは JS が is-clamped を付けて行う。JSが動かない環境では
   全件そのまま出る（読めなくならないようにするため）。
   件数を変えるときは js/main.js の REVIEWS_SHOWN も合わせる。 */
.reviews.is-clamped .review:nth-child(n + 7) { display: none; }

/* .c-more をボタン要素で使う場合の差分 */
button.c-more { font-family: var(--font-body); cursor: pointer; }

.review {
  position: relative;
  padding: clamp(2.6rem, 3.5vw, 3.2rem) clamp(2.2rem, 3.5vw, 3rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 1.6rem;
  box-shadow: 0 .5rem 1.8rem rgba(58, 54, 50, .06);
}
/* 引用符。低彩度の面に馴染むよう蜂蜜色を薄く敷く */
.review::before {
  content: "”";
  position: absolute;
  top: 1.2rem; right: 2rem;
  font-family: var(--font-round);
  font-size: 5rem;
  line-height: 1;
  color: var(--honey);
  opacity: .32;
  pointer-events: none;
}
/* オーナー様からお送りいただいた写真。無い方もいるので任意 */
.review__pic {
  margin: 0 0 2rem;
  aspect-ratio: 4 / 3;
  border-radius: 1.2rem;
  overflow: hidden;
  background: var(--paper2);
}
.review__pic img { width: 100%; height: 100%; object-fit: cover; }

.review__meta {
  margin: 0 0 1.6rem;
  font-size: 1.25rem;
  letter-spacing: .1em;
  color: var(--main-dark);
}
.review__area { color: var(--ink-mute); margin-right: .8rem; }
.review__text { margin: 0; font-size: 1.4rem; line-height: 2.05; color: var(--ink-mute); }
.review__text + .review__text { margin-top: 1.2rem; }
/* お迎えから数ヶ月後の追記。時間が経ってからの声は価値が違うので区切って見せる */
.review__add {
  margin-top: 1.8rem;
  padding-top: 1.6rem;
  border-top: 1px dashed var(--line);
}
.review__add-label {
  display: block;
  font-size: 1.2rem;
  letter-spacing: .1em;
  color: var(--accent);
  margin-bottom: .8rem;
}

/* =========================================================
   よくある質問
   ========================================================= */

.faq__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: clamp(3.4rem, 5vw, 4.4rem);
}
.faq__navlink {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .9rem 2.2rem;
  background: #fff;
  font-size: 1.35rem;
  letter-spacing: .08em;
  color: var(--ink-mute);
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.faq__navlink:hover { border-color: var(--main); color: var(--main); }
.faq__navlink:focus-visible { outline: 2px solid var(--main); outline-offset: 3px; }

.faq {
  max-width: 76rem;
  margin-inline: auto;
  border-top: 1px solid var(--line);
}
.faq__item { border-bottom: 1px solid var(--line); }

.faq__q {
  position: relative;
  display: block;
  padding: 2.2rem 4.4rem 2.2rem .4rem;
  font-family: var(--font-round);
  font-size: clamp(1.5rem, 1.9vw, 1.7rem);
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: .02em;
  cursor: pointer;
  list-style: none;
  transition: color .3s ease;
}
/* Safari は summary のマーカーを別経路で出すため、両方消す */
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--main-dark); }
.faq__q:focus-visible { outline: 2px solid var(--main); outline-offset: 2px; }

/* ＋ / − の記号。開いたら縦棒だけを回して消す */
.faq__q::before,
.faq__q::after {
  content: "";
  position: absolute;
  top: 50%;
  background: var(--main);
  transition: transform .35s var(--ease-out), opacity .3s ease;
}
.faq__q::before { right: 1rem;   width: 1.4rem; height: 1.5px; margin-top: -.75px; }
.faq__q::after  { right: 1.7rem; width: 1.5px; height: 1.4rem; margin-top: -.7rem; }
.faq__item[open] .faq__q::after { transform: rotate(90deg); opacity: 0; }

.faq__a { padding: 0 .4rem 2.6rem; }
.faq__a p { margin: 0 0 1.2rem; font-size: 1.45rem; line-height: 2.05; color: var(--ink-mute); }
.faq__a p:last-child { margin-bottom: 0; }
.faq__a a { color: var(--main-dark); text-decoration: underline; text-underline-offset: .3em; }
.faq__a strong { color: var(--ink); font-weight: 700; }

/* =========================================================
   記事ページの外枠（本文そのものは article.css）
   ========================================================= */

.post {
  /* 固定ヘッダーが約97px あるため、上は必ずそれ以上あける */
  padding-block: max(14rem, 14vw) clamp(6rem, 10vw, 10rem);
  background-color: var(--paper);
}
.post__inner { width: min(76rem, 88vw); margin-inline: auto; }

.post__head { text-align: center; margin-bottom: clamp(3rem, 5vw, 4.4rem); }

.post__cats { margin: 0 0 1.8rem; display: flex; justify-content: center; gap: .8rem; flex-wrap: wrap; }
.post__cat {
  display: inline-block;
  padding: .5rem 1.4rem;
  border-radius: 999px;
  background: rgba(92, 132, 158, .12);
  color: var(--main-dark);
  font-size: 1.2rem;
  letter-spacing: .06em;
}

.post__title {
  font-family: var(--font-round);
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: .04em;
  margin: 0 0 1.6rem;
}
.post__date { font-size: 1.3rem; letter-spacing: .1em; color: var(--main); }

.post__thumb {
  margin: 0 0 clamp(3rem, 5vw, 5rem);
  border-radius: 1.6rem;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.post__thumb img { width: 100%; height: 100%; object-fit: cover; }

.post__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.6rem, 3vw, 3rem);
  margin-top: clamp(5rem, 8vw, 8rem);
  padding-top: clamp(4rem, 6vw, 6rem);
  border-top: 1px solid var(--line);
}

/* =========================================================
   海洋葬（/ceremony/）

   トップの 05「見送る」の続きとして、青寄りの配色でまとめる。
   写真3枚で「走っていた日々 → 残る足あと → 還る海」の順に見せる。
   写真は本番のメディアライブラリを参照している（差し替えやすいように）。

   ■ 世界観の作り方（2026-08-05 西山フィードバック「質素。もっと世界観を」）
     1. **浜辺から沖へ**  背景色が浅瀬 → 深い海 → 夕 → 翌朝と推移する（--sea-1〜6）。
        トップの「一生」と同じで、最後は最初の色に戻して円環を閉じる
     2. **波で区切る**    セクション境界は既存の波形（c-wave-top）を流用
     3. **静寂の間**      章と章のあいだに、一行だけの余白セクション（.sea-quiet）を挟む。
                         情報を詰めず「間」を置くことがこのページでは意味を持つ
     4. **思い出として**  走る犬の写真はアルバム仕立て（白フチ・傾き・テープ）
   ========================================================= */

:root {
  /* 浜辺 → 沖 → 夕 → 翌朝。最後は最初へ戻す */
  --sea-1: #eaeef0;   /* 波打ち際 */
  --sea-2: #dfe6ea;   /* 浅瀬 */
  --sea-3: #d2dde3;   /* 沖へ */
  --sea-4: #c6d3db;   /* 深い海 */
  --sea-5: #c0c5c8;   /* 夕（トップの 05 見送る と同色） */
  /* 締め。初稿は var(--sea-1) にして「また朝が来る」＝時間が一周する円環にしていたが、
     前を向かせる圧になるため取りやめた（2026-08-06 西山指示）。
     FAQ を読ませる明るさは要るので薄いままだが、冒頭とは別の色にして「戻った」感を消している。 */
  --sea-6: #e3e7e9;
}

/* ---------- 静寂の間 ----------
   一行だけを置く余白のセクション。トップの章とびらの軽量版。
   ここで情報を足さないことが、このページでは効く。 */

.sea-quiet {
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: clamp(9rem, 16vw, 16rem);
  background: var(--bg, var(--sea-1));
}
.sea-quiet__line {
  font-family: var(--font-round);
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  font-weight: 700;
  line-height: 2.2;
  letter-spacing: .14em;
  color: var(--main-dark);
  margin: 0;
}
.sea-quiet__sub {
  font-size: clamp(1.3rem, 1.8vw, 1.5rem);
  line-height: 2.2;
  letter-spacing: .08em;
  color: var(--ink-mute);
  margin: 1.8rem 0 0;
}
/* 水平線。海の“遠く”を示す細い線 */
.sea-quiet__horizon {
  display: block;
  width: min(28rem, 60%);
  height: 1px;
  margin: clamp(3rem, 5vw, 4.4rem) auto 0;
  background: linear-gradient(90deg, transparent, var(--main), transparent);
  opacity: .45;
}

/* ---------- ヒーロー ---------- */

.sea-hero {
  position: relative;
  min-height: min(92svh, 78rem);
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}
.sea-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* 文字を読ませるための膜。海の色は残す */
.sea-hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(35, 48, 58, .52) 0%, rgba(35, 48, 58, .22) 42%, rgba(246, 244, 239, .92) 100%);
}
.sea-hero__inner {
  width: var(--contents);
  margin-inline: auto;
  text-align: center;
  padding-block: clamp(12rem, 18vw, 16rem) clamp(8rem, 12vw, 12rem);
}
.sea-hero__en {
  font-size: 1.25rem;
  letter-spacing: .3em;
  color: #fff;
  opacity: .9;
  margin: 0 0 1.8rem;
}
.sea-hero__title { margin: 0; }
.sea-hero__catch {
  display: block;
  font-family: var(--font-round);
  font-size: clamp(2.8rem, 6.4vw, 5.2rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .06em;
  color: #fff;
  text-shadow: 0 .2rem 1.6rem rgba(20, 30, 38, .45);
}
.sea-hero__sub {
  display: block;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  line-height: 2;
  letter-spacing: .04em;
  color: #fff;
  text-shadow: 0 .1rem 1rem rgba(20, 30, 38, .5);
}
.sea-hero__sub strong { font-weight: 700; }

/* 要点3つ。検索から来た方が最初に知りたいこと */
.sea-hero__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 2.4vw, 2.4rem);
  margin: clamp(2.8rem, 5vw, 4rem) 0 0;
}
.sea-hero__facts > div {
  background: rgba(255, 255, 255, .86);
  border-radius: 1rem;
  padding: 1.1rem 1.8rem;
  backdrop-filter: blur(6px);
}
.sea-hero__facts dt {
  font-size: 1.1rem;
  letter-spacing: .16em;
  color: var(--main);
  margin-bottom: .3rem;
}
.sea-hero__facts dd {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 500;
  color: var(--ink);
}
.sea-hero__facts small { font-size: .8em; opacity: .7; }

.sea-hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.2rem, 2.4vw, 2rem);
  margin: 0;
}
/* ボタン**群**の上に空ける。.c-more の基底が持つ margin-top:4rem を残したままだと、
   スマホで縦積みになったとき2つ目にも 4rem が乗り、gap と二重になって開きすぎる */
.sea-hero__cta { margin-top: clamp(3rem, 5vw, 4rem); }
.sea-hero__cta .c-more { margin-top: 0; }

.sea-hero__scroll {
  position: absolute;
  bottom: 2.4rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 5rem;
  background: rgba(72, 106, 128, .3);
  overflow: hidden;
}
.sea-hero__scroll span {
  display: block;
  width: 100%;
  height: 40%;
  background: var(--main-dark);
  animation: sea-scroll 2.4s var(--ease-out) infinite;
}
@keyframes sea-scroll {
  0%   { transform: translateY(-100%); }
  60%, 100% { transform: translateY(250%); }
}

@media (max-width: 700px) {
  .sea-hero { min-height: min(88svh, 64rem); }
  /* 縦に3つ積むと220pxも取るので、ラベルと値を横に並べた行にする */
  .sea-hero__facts { flex-direction: column; gap: .6rem; }
  .sea-hero__facts > div {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    width: 100%;
    padding: .7rem 1.4rem;
    text-align: left;
  }
  .sea-hero__facts dt { flex: none; width: 5.4rem; margin: 0; }
  .sea-hero__facts dd { font-size: 1.3rem; }
  .sea-hero__cta .c-more { width: 100%; justify-content: center; }
}

/* ヒーローが暗い写真のページ（/ceremony/）。
   ヘッダーは最上部では is-scrolled が外れて透明になるため、
   そのままだと黒いロゴが海に埋もれる。**スクロール前だけ**白に反転させる
   （スクロール後は白い磨りガラスが入るので元の色でよい）。 */
.has-hero-dark .l-header:not(.is-scrolled) .l-header__logo a { color: #fff; }
.has-hero-dark .l-header:not(.is-scrolled) .l-header__logo small { color: rgba(255, 255, 255, .74); }
.has-hero-dark .l-header:not(.is-scrolled) .l-burger span { background: #fff; }

@media (min-width: 901px) {
  .has-hero-dark .l-header:not(.is-scrolled) .l-nav a:not(.is-cta) { color: #fff; }
}

/* 章番号（.stage__no）はトップから流用。海洋葬では中央寄せのセクション見出しでも使う */
.section__head .stage__no { margin: 0 0 1.4rem; }
.sea-chapter__body .stage__no { margin: 0 0 1.2rem; }

/* ---------- 01 いた日々（写真 + Message） ---------- */

.sea-chapter__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
}
.sea-chapter__pic { margin: 0; aspect-ratio: 4 / 3; }
.sea-chapter__pic img { width: 100%; height: 100%; object-fit: cover; }

/* アルバム2枚。2枚目は縦位置なので 4/3 を解除し、右下に食い込ませて重ねる。
   縦に素直に並べると左カラムだけが極端に高くなり、右の本文と釣り合わなくなる。 */
.sea-chapter__pics { position: relative; }
.sea-chapter__pic--sub {
  position: relative;
  z-index: 2;
  width: 56%;
  margin: -20% -4% 0 auto;   /* 右はカラム間の余白へ少し逃がす */
}
/* height は .sea-chapter__pic img の 100% を打ち消す。残すと aspect-ratio が効かない */
.sea-chapter__pic--sub img { aspect-ratio: 3 / 4; height: auto; }
.sea-chapter__pic--sub::before { width: 7rem; }
/* 写真が小さいぶんキャプションも詰める。既定のままだとスマホで2行に割れる */
.sea-chapter__pic--sub figcaption { font-size: 1.2rem; letter-spacing: .1em; }
/* 2枚目が右下に重なるので、1枚目のキャプションは左へ逃がす（中央のままだと隠れる） */
.sea-chapter__pics > .sea-chapter__pic:not(.sea-chapter__pic--sub) figcaption {
  text-align: left;
  padding-left: 1.2rem;
  padding-right: 48%;
}
.sea-chapter__body p {
  font-size: clamp(1.5rem, 1.9vw, 1.65rem);
  line-height: 2.15;
  margin: 0 0 1.8rem;
}
.sea-chapter__body > :last-child { margin-bottom: 0; }
.sea-chapter__body .section__ja { text-align: left; }
.sea-chapter__body .section__en { display: block; text-align: left; }

@media (max-width: 860px) {
  .sea-chapter__grid { grid-template-columns: 1fr; }
  .sea-chapter__body .section__ja,
  .sea-chapter__body .section__en { text-align: center; }
  /* 幅が足りずキャプションを逃がしきれないので、重ねずに縦へ並べる */
  .sea-chapter__pic--sub { margin: 1.8rem 0 0 auto; }
  .sea-chapter__pics > .sea-chapter__pic:not(.sea-chapter__pic--sub) figcaption {
    text-align: center;
    padding-left: .4rem;
    padding-right: .4rem;
  }
}

/* ---------- 02 残るもの（足あとの写真を全幅に敷く） ---------- */

.sea-trace {
  position: relative;
  isolation: isolate;
  padding-block: clamp(9rem, 14vw, 14rem);
  overflow: hidden;
}
.sea-trace__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.sea-trace__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(246, 244, 239, .84);
}
.sea-trace__inner { position: relative; }

.sea-reasons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
  gap: clamp(2rem, 3.4vw, 3.2rem);
}
.sea-reason {
  background: rgba(255, 255, 255, .9);
  border-radius: 1.4rem;
  padding: clamp(2.4rem, 4vw, 3.4rem) clamp(2rem, 3vw, 2.8rem);
  box-shadow: 0 .6rem 2rem rgba(58, 54, 50, .08);
}
.sea-reason__no {
  display: block;
  font-family: var(--font-round);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--main);
  opacity: .5;
  line-height: 1;
  margin-bottom: 1.2rem;
}
.sea-reason__title {
  font-family: var(--font-round);
  font-size: clamp(1.7rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.6;
  color: var(--main-dark);
  margin: 0 0 1.4rem;
}
.sea-reason p { font-size: 1.45rem; line-height: 2.1; margin: 0; }

/* ---------- 03 プラン ---------- */

.sea-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  gap: clamp(2.4rem, 4vw, 3.6rem);
  align-items: start;
}
.sea-plan {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 1.6rem;
  padding: clamp(2.8rem, 4.4vw, 4rem) clamp(2.2rem, 3.4vw, 3.2rem);
  text-align: center;
  box-shadow: 0 .6rem 2rem rgba(58, 54, 50, .07);
}
/* 主力プランを一段強くする */
.sea-plan--main { border-color: var(--main); box-shadow: 0 .8rem 2.6rem rgba(72, 106, 128, .16); }

.sea-plan__label {
  display: inline-block;
  font-size: 1.15rem;
  letter-spacing: .2em;
  color: #fff;
  background: var(--main);
  border-radius: 999px;
  padding: .4rem 1.4rem;
  margin: 0 0 1.6rem;
}
.sea-plan__name {
  font-family: var(--font-round);
  font-size: clamp(1.9rem, 2.8vw, 2.3rem);
  font-weight: 700;
  margin: 0 0 1.2rem;
  letter-spacing: .04em;
}
.sea-plan__lead { font-size: 1.4rem; line-height: 2; color: var(--ink-mute); margin: 0 0 2rem; }

.sea-plan__price {
  font-family: var(--font-round);
  color: var(--main-dark);
  margin: 0;
  line-height: 1.1;
}
.sea-plan__price b { font-size: clamp(3.4rem, 6vw, 4.6rem); font-weight: 700; font-variant-numeric: tabular-nums; }
.sea-plan__price small { font-size: 1.5rem; margin-left: .2rem; }
.sea-plan__note { font-size: 1.3rem; color: var(--ink-mute); margin: .8rem 0 2.4rem; }

.sea-plan__list {
  list-style: none;
  margin: 0 0 2.8rem;
  padding: 2rem 0 0;
  border-top: 1px solid var(--line);
  text-align: left;
}
.sea-plan__list li {
  position: relative;
  padding-left: 2.4rem;
  font-size: 1.4rem;
  line-height: 1.9;
  margin-bottom: 1rem;
}
.sea-plan__list li::before {
  content: "";
  position: absolute;
  left: .4rem;
  top: .7em;
  width: .9rem;
  height: .5rem;
  border-left: 2px solid var(--main);
  border-bottom: 2px solid var(--main);
  transform: rotate(-45deg);
}
.sea-plan .c-more { margin-top: 0; }

.sea-note {
  text-align: center;
  font-size: 1.4rem;
  color: var(--ink-mute);
  margin: clamp(3rem, 5vw, 4rem) 0 0;
}

/* ラーテル出身の子だけの枠（2026-08-06）
   .sea-plans のグリッドに入れると PC で3枚目のプランとして横に並び、
   「もう一段安いプラン」に見えてしまう。グリッドの外の全幅の帯にして、
   料金表ではなく“出身の子向けの別枠”として読ませる。
   左の縦線だけ --accent にして、白いプランカードと種類が違うことを示す。 */
.sea-own {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(2rem, 4vw, 3.6rem);
  margin-top: clamp(3rem, 5vw, 4.4rem);
  padding: clamp(2.4rem, 4vw, 3.2rem) clamp(2.2rem, 3.6vw, 3.4rem);
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 1.6rem;
  box-shadow: 0 .6rem 2rem rgba(58, 54, 50, .07);
}
.sea-own__head {
  font-family: var(--font-round);
  font-size: clamp(1.7rem, 2.2vw, 2rem);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--accent);
  margin: 0 0 .8rem;
}
.sea-own__text { margin: 0; font-size: 1.4rem; line-height: 2; color: var(--ink-mute); }
.sea-own .c-more { flex: none; margin-top: 0; }

@media (max-width: 720px) {
  .sea-own { flex-direction: column; align-items: stretch; text-align: center; }
}

/* ---------- 04 流れ（タブ） ---------- */

.sea-tabs { max-width: 82rem; margin-inline: auto; }
.sea-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: clamp(3rem, 5vw, 4rem);
}
.sea-tab {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 1rem 2.4rem;
  font-family: var(--font-body);
  font-size: 1.4rem;
  letter-spacing: .06em;
  color: var(--ink-mute);
  cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.sea-tab:hover { border-color: var(--main); color: var(--main); }
.sea-tab.is-active { background: var(--main); border-color: var(--main); color: #fff; }
.sea-tab:focus-visible { outline: 2px solid var(--main-dark); outline-offset: 2px; }

.sea-steps { counter-reset: sea-step; list-style: none; margin: 0; padding: 0; }
.sea-step {
  counter-increment: sea-step;
  position: relative;
  padding: 0 0 clamp(2.8rem, 4.4vw, 3.8rem) clamp(5rem, 7vw, 6.8rem);
}
.sea-step::before {
  content: counter(sea-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(3.4rem, 5vw, 4.4rem);
  height: clamp(3.4rem, 5vw, 4.4rem);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--main);
  color: #fff;
  font-family: var(--font-round);
  font-size: 1.4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* 縦線。朝のテラコッタから夜の青へ（.oneday と同じ考え方） */
.sea-step::after {
  content: "";
  position: absolute;
  left: calc(clamp(3.4rem, 5vw, 4.4rem) / 2 - 1px);
  top: clamp(3.4rem, 5vw, 4.4rem);
  bottom: 0;
  width: 2px;
  background: linear-gradient(var(--accent), var(--main));
  opacity: .45;
}
.sea-step:last-child { padding-bottom: 0; }
.sea-step:last-child::after { display: none; }
.sea-step h3 {
  font-family: var(--font-round);
  font-size: clamp(1.7rem, 2.4vw, 2rem);
  font-weight: 700;
  color: var(--main-dark);
  margin: .4rem 0 1rem;
  line-height: 1.6;
}
.sea-step p { font-size: 1.45rem; line-height: 2.1; margin: 0; }

/* ---------- 05 お渡しするもの ---------- */

.sea-keeps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
  gap: clamp(2rem, 3.4vw, 3rem);
}
.sea-keep {
  background: #fff;
  border-radius: 1.4rem;
  padding: clamp(2.4rem, 4vw, 3.2rem) clamp(2rem, 3vw, 2.6rem);
  box-shadow: 0 .4rem 1.6rem rgba(58, 54, 50, .07);
}
.sea-keep h3 {
  font-family: var(--font-round);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--main-dark);
  margin: 0 0 1.2rem;
}
.sea-keep p { font-size: 1.42rem; line-height: 2.05; margin: 0; }
.sea-keep b { color: var(--main-dark); font-weight: 700; }

/* =========================================================
   ラーテルホテル（/ratelhotel/）

   海洋葬とは性格が違う。あちらは「別れ」で青、こちらは「いつもの一日」なので
   トップの「犬舎の一日」と同じ --day-1〜6（朝→夜）を使う。
   ヒーローの骨格（.sea-hero）は海洋葬と共用する。
   ========================================================= */

/* ヒーローの膜。夕焼けの色を殺さないよう、海洋葬より薄くする */
.hotel-hero .sea-hero__veil {
  background:
    linear-gradient(180deg, rgba(38, 32, 28, .46) 0%, rgba(38, 32, 28, .16) 40%, rgba(246, 244, 239, .92) 100%);
}

/* ---------- 一般的なホテルとの対比 ---------- */

.hotel-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
  gap: clamp(2rem, 3.4vw, 3rem);
  margin-bottom: clamp(3rem, 5vw, 4.4rem);
}
.hotel-compare__col {
  border-radius: 1.4rem;
  padding: clamp(2.2rem, 3.4vw, 3rem) clamp(2rem, 3vw, 2.6rem);
}
.hotel-compare__col--other {
  background: rgba(58, 54, 50, .05);
  border: 1px dashed var(--line);
}
.hotel-compare__col--ratel {
  background: #fff;
  border: 1px solid var(--main);
  box-shadow: 0 .6rem 2rem rgba(72, 106, 128, .14);
}
.hotel-compare__label {
  font-family: var(--font-round);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .06em;
  margin: 0 0 1.6rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
}
.hotel-compare__col--other .hotel-compare__label { color: var(--ink-mute); }
.hotel-compare__col--ratel .hotel-compare__label { color: var(--main-dark); }

.hotel-compare ul { list-style: none; margin: 0; padding: 0; }
.hotel-compare li {
  position: relative;
  padding-left: 2.4rem;
  font-size: 1.42rem;
  line-height: 2;
  margin-bottom: 1.1rem;
}
.hotel-compare li:last-child { margin-bottom: 0; }
/* 左：うつむき／右：チェック。同じ形にしないことで対比が伝わる */
.hotel-compare__col--other li::before {
  content: "";
  position: absolute;
  left: .5rem;
  top: .95em;
  width: 1rem;
  height: 1px;
  background: var(--ink-mute);
  opacity: .6;
}
.hotel-compare__col--ratel li::before {
  content: "";
  position: absolute;
  left: .4rem;
  top: .7em;
  width: .9rem;
  height: .5rem;
  border-left: 2px solid var(--main);
  border-bottom: 2px solid var(--main);
  transform: rotate(-45deg);
}

.hotel-lead {
  text-align: center;
  font-size: clamp(1.45rem, 1.9vw, 1.6rem);
  line-height: 2.2;
  margin: 0;
}
.hotel-lead strong { color: var(--main-dark); font-weight: 700; }
/* .hotel-lead は margin:0 なので、2つ続けて置くときは間を自分で空ける */
.hotel-lead + .hotel-lead { margin-top: clamp(2rem, 3vw, 2.8rem); }

/* ---------- 過ごし方（.oneday を流用） ---------- */

/* 縦写真（600×800）なので、犬舎の一日の 4:3 ではなく縦長で見せる */
.hotel-stay .oneday__pic { aspect-ratio: 3 / 4; }

/* 白枠のひとこと箱。2箇所で使う（料金カードと同じ見え方に揃えている）
   .hotel-target … 01 の「お預かりできる子」（対象の限定）
   .hotel-usual  … 02 の「おうちのやり方に合わせます」。
                   3枚のカードが「どこで過ごすか」なのに対し、こちらは「どう過ごすか」 */
.hotel-usual,
.hotel-target {
  max-width: 62rem;
  margin: clamp(3.4rem, 5vw, 5rem) auto 0;
  background: #fff;
  border-radius: 1.4rem;
  padding: clamp(2.4rem, 3.6vw, 3.2rem) clamp(2.2rem, 3vw, 3rem);
  text-align: center;
  box-shadow: 0 .6rem 2rem rgba(58, 54, 50, .08);
}
.hotel-usual h3,
.hotel-target h3 {
  font-family: var(--font-round);
  font-size: clamp(1.6rem, 2.2vw, 1.9rem);
  font-weight: 700;
  color: var(--main-dark);
  margin: 0 0 1.4rem;
}
.hotel-usual p,
.hotel-target p {
  margin: 0;
  font-size: 1.45rem;
  line-height: 2.15;
  color: var(--ink-mute);
}

/* 01 の対象条件。青の細枠を足して「読み飛ばさせない」ようにしている */
.hotel-target {
  border: 1px solid var(--main);
  margin-top: clamp(3.4rem, 5vw, 4.4rem);
}

/* ---------- 料金 ---------- */

.hotel-price {
  max-width: 58rem;
  margin-inline: auto;
  background: #fff;
  border-radius: 1.6rem;
  padding: clamp(2.8rem, 4.4vw, 4rem) clamp(2.2rem, 3.4vw, 3.4rem);
  text-align: center;
  box-shadow: 0 .6rem 2rem rgba(58, 54, 50, .08);
}
.hotel-price__main {
  font-family: var(--font-round);
  color: var(--main-dark);
  margin: 0;
  line-height: 1.1;
}
.hotel-price__main b {
  font-size: clamp(4rem, 8vw, 5.6rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hotel-price__main small { font-size: 1.6rem; margin-left: .4rem; }
.hotel-price__note {
  font-size: 1.45rem;
  line-height: 2.1;
  color: var(--ink-mute);
  margin: 1.8rem 0 2.6rem;
}
.hotel-price__note strong { color: var(--accent); font-weight: 700; }

.hotel-price__table {
  width: min(34rem, 100%);
  margin: 0 auto;
  border-collapse: collapse;
  font-size: 1.5rem;
}
.hotel-price__table th,
.hotel-price__table td {
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--line);
}
.hotel-price__table th { text-align: left; color: var(--ink-mute); font-weight: 500; }
.hotel-price__table td { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.hotel-price__small { font-size: 1.25rem; color: var(--ink-mute); margin: 1.6rem 0 0; }

/* dog CPT の本文の後に置く導線。
   本文から落とした定型（お迎えまでの流れ／よくある質問／オーナー様の声）の代わりに、
   それぞれの専用ページへ送る。single-dog.php が使う。 */
.dog-next {
  margin-top: clamp(5rem, 8vw, 8rem);
  padding-top: clamp(4rem, 6vw, 6rem);
  border-top: 1px solid var(--line);
}
.dog-next__lead {
  text-align: center;
  font-size: 1.5rem;
  color: var(--ink-mute);
  letter-spacing: .04em;
  margin: 0 0 clamp(2.4rem, 4vw, 3.4rem);
}
.dog-next__back { text-align: center; margin: 0; }

/* フッター */
.l-footer {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(6rem, 8vw, 9rem) 3rem;
  text-align: center;
}
.l-footer__logo {
  font-family: var(--font-round);
  font-size: 2.4rem;
  letter-spacing: .16em;
  margin: 0 0 1.2rem;
}
/* サイトマップ（2026-08-05 追加）。
   グローバルナビが5項目しか持てないので、全ページへの入口をここで担保する。
   これが無いと /b/ /tokushoho/ /privacy-policy/ /disclaimer-2/ がどこからも辿れなかった。 */
.l-footer__map {
  width: var(--contents);
  margin: 0 auto clamp(4rem, 7vw, 6rem);
  padding-bottom: clamp(3.4rem, 5vw, 4.4rem);
  border-bottom: 1px solid rgba(246, 244, 239, .16);
  text-align: left;
}
.footer-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(2.4rem, 4vw, 3.4rem);
}
.footer-nav__head {
  font-family: var(--font-round);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--paper);
  opacity: .95;
  margin: 0 0 1.4rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid rgba(246, 244, 239, .18);
}
.footer-nav ul { list-style: none; margin: 0; padding: 0; }
.footer-nav li { margin-bottom: .9rem; }
.footer-nav a {
  font-size: 1.3rem;
  line-height: 1.8;
  color: var(--paper);
  opacity: .72;
  transition: opacity .3s ease, padding-left .3s ease;
}
.footer-nav a:hover { opacity: 1; padding-left: .4rem; }

/* 法務系。義務表示なので必ず出す */
.l-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2rem;
  margin: 0 0 2rem;
}
.l-footer__legal a {
  font-size: 1.2rem;
  color: var(--paper);
  opacity: .6;
  text-decoration: underline;
  text-underline-offset: .3em;
  transition: opacity .3s ease;
}
.l-footer__legal a:hover { opacity: .95; }

.l-footer__info { font-size: 1.3rem; line-height: 2.2; opacity: .8; margin: 0 0 3rem; }
.l-footer__sns { display: flex; justify-content: center; gap: 2.4rem; margin-bottom: 4rem; }
.l-footer__sns a { font-size: 1.3rem; letter-spacing: .12em; opacity: .8; transition: opacity .3s ease; }
.l-footer__sns a:hover { opacity: 1; }
.l-footer__copy { font-size: 1.1rem; opacity: .5; letter-spacing: .08em; }

/* =========================================================
   記事一覧（/kennelblog/）
   犬種 × テーマの2軸で絞り込む。全件を1回で取得し、
   絞り込みはブラウザ側で行うのでページ遷移が起きない。

   ★ .blog__* （トップのブログセクション）とは別部品にしてある。
     トップは6件固定・スマホ2列なのに対し、こちらは全件・抜粋つきで、
     スマホでは横並びのリスト型に変わるため。共用すると両方が壊れる。
   ========================================================= */

.archive { position: relative; }

/* --- 検索 --- */
.archive__search {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 48rem;
  margin: 0 auto clamp(2.4rem, 4vw, 3.6rem);
}
.archive__search-icon {
  position: absolute;
  left: 1.6rem;
  width: 1.8rem;
  height: 1.8rem;
  fill: none;
  stroke: var(--main);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}
.archive__search-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1.5rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1.3rem 4.4rem 1.3rem 4.4rem;
  transition: border-color .3s ease, box-shadow .3s ease;
  /* iOS の検索入力に付く装飾を消す */
  -webkit-appearance: none;
  appearance: none;
}
.archive__search-input::-webkit-search-cancel-button { display: none; }
.archive__search-input::placeholder { color: var(--ink-mute); opacity: .7; }
.archive__search-input:focus {
  outline: none;
  border-color: var(--main);
  box-shadow: 0 0 0 3px rgba(98, 134, 157, .16);
}
.archive__search-clear {
  position: absolute;
  right: 1.4rem;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--line);
  color: var(--ink);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background .3s ease;
}
.archive__search-clear:hover { background: var(--main); color: #fff; }

/* --- 絞り込みチップ --- */
.archive__filters {
  display: grid;
  gap: 1.4rem;
  margin-bottom: clamp(2.4rem, 4vw, 3.2rem);
}
.archive__filter {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  align-items: start;
  gap: 1.2rem;
}
.archive__filter-label {
  font-size: 1.2rem;
  letter-spacing: .16em;
  color: var(--main);
  padding-top: 1rem;
}
.archive__chips { display: flex; flex-wrap: wrap; gap: .8rem; }

.archive__chip {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: .8rem 1.8rem;
  font-family: var(--font-body);
  font-size: 1.3rem;
  letter-spacing: .06em;
  color: var(--ink-mute);
  cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease, opacity .3s ease;
}
.archive__chip:hover:not(:disabled) { border-color: var(--main); color: var(--main); }
.archive__chip.is-active {
  background: var(--main);
  border-color: var(--main);
  color: #fff;
}
.archive__chip:focus-visible { outline: 2px solid var(--main-dark); outline-offset: 2px; }
/* その時点の絞り込みでは1件も出ない組み合わせ。押せなくする */
.archive__chip:disabled { opacity: .35; cursor: default; }
.archive__chip-n {
  font-size: 1.1rem;
  opacity: .7;
  margin-left: .5rem;
  font-variant-numeric: tabular-nums;
}

/* --- 件数と解除 --- */
.archive__status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.4rem;
  margin-bottom: clamp(2.4rem, 4vw, 3.4rem);
  border-bottom: 1px solid var(--line);
}
.archive__count { margin: 0; font-size: 1.35rem; color: var(--ink-mute); }
.archive__count b {
  font-size: 1.9rem;
  color: var(--main-dark);
  font-weight: 700;
  margin-right: .2rem;
  font-variant-numeric: tabular-nums;
}
.archive__reset {
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: 1.3rem;
  color: var(--main-dark);
  text-decoration: underline;
  text-underline-offset: .3em;
  cursor: pointer;
  padding: 0;
}
.archive__reset:hover { color: var(--accent); }

/* --- 一覧 --- */
.archive__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
  gap: clamp(2.4rem, 3.4vw, 3.6rem);
  min-height: 20rem;
}

.archive__card { display: block; }
.archive__pic {
  aspect-ratio: 16 / 10;
  border-radius: 1rem;
  overflow: hidden;
  margin-bottom: 1.2rem;
  background: var(--paper2);
}
.archive__pic img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease-out);
}
.archive__card:hover .archive__pic img { transform: scale(1.06); }

.archive__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem;
  margin-bottom: .6rem;
}
.archive__cat {
  font-size: 1.1rem;
  letter-spacing: .06em;
  color: var(--main-dark);
  background: rgba(98, 134, 157, .12);
  border-radius: 999px;
  padding: .3rem 1rem;
}
.archive__date {
  font-size: 1.2rem;
  color: var(--main);
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}
.archive__title {
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1.75;
  margin: 0;
  transition: color .3s ease;
}
.archive__card:hover .archive__title { color: var(--main-dark); }
.archive__excerpt {
  font-size: 1.3rem;
  line-height: 1.9;
  color: var(--ink-mute);
  margin: .8rem 0 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.archive__more { margin: 0; text-align: center; }
.archive__more .c-more { margin-top: clamp(3.4rem, 5vw, 4.8rem); }

.archive__loading, .archive__empty, .archive__error {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--ink-mute);
  font-size: 1.4rem;
  padding: 4rem 0;
  line-height: 2;
}

/* --- スマホは横並びのリスト型 ---
   カード型のまま1列にすると1件340pxで縦に伸びすぎ、
   2列にすると幅157pxで抜粋が読めない。写真を左に寄せて行にする。 */
@media (max-width: 700px) {
  .archive__grid { grid-template-columns: 1fr; gap: 0; }

  .archive__card {
    display: grid;
    grid-template-columns: 10.5rem 1fr;
    gap: 1.4rem;
    align-items: center;
    padding: 1.6rem 0;
    border-bottom: 1px solid var(--line);
  }
  .archive__grid > .archive__card:first-child { padding-top: 0; }

  .archive__pic {
    margin-bottom: 0;
    border-radius: .8rem;
    aspect-ratio: 4 / 3;
  }
  .archive__meta { gap: .6rem; margin-bottom: .4rem; }
  .archive__cat  { font-size: 1rem; padding: .2rem .8rem; }
  .archive__date { font-size: 1.1rem; }
  .archive__title {
    font-size: 1.35rem;
    line-height: 1.65;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  /* 抜粋はこの幅では読ませない（タイトルで判断してもらう） */
  .archive__excerpt { display: none; }

  .archive__filter { grid-template-columns: 1fr; gap: .6rem; }
  .archive__filter-label { padding-top: 0; }
  .archive__chip { padding: .7rem 1.4rem; font-size: 1.25rem; }
  .archive__search-input { font-size: 1.6rem; } /* iOS の自動ズームを防ぐ */
}

/* =========================================================
   ユーティリティ（追加）
   ========================================================= */

/* hidden 属性は「display の初期値を none にする」だけなので、
   クラス側で display を明示している要素には効かない。
   .c-more は display:inline-flex を持つため、hidden を付けても消えなかった
   （記事一覧の「もっと見る」「検索クリア」、reviews.html の「すべてのお声を読む」が該当）。
   属性が付いていたら必ず消えるようにする。 */
[hidden] { display: none !important; }

/* 画面には出さず、スクリーンリーダーには読ませる */
.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* =========================================================
   記事本文（WordPress の content.rendered をそのまま流し込む）

   全61記事のクラスを実測した結果、SWELL 独自ブロックはほぼ使われておらず
   標準 Gutenberg ブロックだけで構成されている。ここではそれらを実装する。

   実測した出現数:
     paragraph 4813 / heading 981（h2:457 h3:511 h4:13）/ separator 349
     list 315 / quote 40 / image 35 / table 29 / group 5
     embed 1 / preformatted 1 / swl-marker 1

   色・フォントは style.css の変数を使う。単体では使わず style.css と併読する。
   ========================================================= */

.article {
  font-size: 1.65rem;
  line-height: 2.05;
  color: var(--ink);
  letter-spacing: .02em;
  /* 参考文献に貼られた長いURLなど、途中で改行できない文字列が
     スマホでページごと横に押し広げてしまうため折り返す
     （実測: 375px幅で本文が450pxになり横スクロールが発生した）。
     break-all ではなく anywhere にして、日本語の行組みは崩さない。 */
  overflow-wrap: anywhere;
}

/* ---------- 段落 ---------- */

.article p {
  margin: 0 0 2.2rem;
}
.article strong {
  font-weight: 700;
  color: var(--ink);
}

/* SWELL のマーカー。1記事でしか使われていないが、消えると意図が伝わらないので実装する */
.article .swl-marker {
  background: linear-gradient(transparent 62%, rgba(217, 164, 65, .45) 62%);
  font-weight: 500;
}

/* ---------- リンク ---------- */

.article a {
  color: var(--main-dark);
  text-decoration: underline;
  text-underline-offset: .3em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(92, 132, 158, .45);
  transition: text-decoration-color .3s ease, color .3s ease;
}
.article a:hover {
  color: var(--main);
  text-decoration-color: currentColor;
}

/* 目次から飛んだ見出しが、position:fixed のヘッダー（97px）の下に潜るのを防ぐ。
   これが無いと「押しても見出しが見えない」状態になる。
   目次そのものの見た目は下の「目次」セクションで作っている。 */
.article :is(h2, h3, h4)[id] { scroll-margin-top: 11rem; }
@media (max-width: 700px) {
  .article :is(h2, h3, h4)[id] { scroll-margin-top: 9rem; }
}

/* ---------- 見出し ----------
   本文中の最上位は h2（記事タイトルが h1 のため）。
   見出しは画像にせず実テキストのままにする（本文の検索評価に効くため） */

.article h2 {
  font-family: var(--font-round);
  font-size: clamp(2.1rem, 3vw, 2.7rem);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .04em;
  margin: 6rem 0 2.6rem;
  padding-bottom: 1.4rem;
  position: relative;
}
/* 下線は直線ではなく、区切りの波形と揃えた有機的な形にする */
.article h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 6px;
  background: var(--main);
  opacity: .28;
  -webkit-mask: var(--wave-a) no-repeat center / 100% 100%;
          mask: var(--wave-a) no-repeat center / 100% 100%;
}

.article h3 {
  font-family: var(--font-round);
  font-size: clamp(1.8rem, 2.3vw, 2.15rem);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .04em;
  margin: 4.4rem 0 1.8rem;
  padding-left: 1.6rem;
  border-left: 4px solid var(--accent);
}

.article h4 {
  font-family: var(--font-round);
  font-size: clamp(1.65rem, 2vw, 1.85rem);
  font-weight: 700;
  margin: 3.4rem 0 1.4rem;
  color: var(--main-dark);
}

/* 見出し直後の余白は詰める */
.article h2 + p,
.article h3 + p,
.article h4 + p { margin-top: 0; }

/* ---------- リスト ---------- */

.article ul,
.article ol {
  margin: 0 0 2.4rem;
  padding-left: 0;
  list-style: none;
}
.article li {
  position: relative;
  padding-left: 2.4rem;
  margin-bottom: 1rem;
}
.article ul > li::before {
  content: "";
  position: absolute;
  left: .4rem; top: .78em;
  width: .8rem; height: .8rem;
  border-radius: 50%;
  background: var(--main);
  opacity: .55;
}
.article ol { counter-reset: li; }
.article ol > li { counter-increment: li; }
.article ol > li::before {
  content: counter(li);
  position: absolute;
  left: 0; top: .28em;
  width: 1.9rem; height: 1.9rem;
  border-radius: 50%;
  background: var(--main);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.9rem;
  text-align: center;
}
/* 入れ子 */
.article li > ul,
.article li > ol { margin: 1rem 0 0; }

/* ---------- 引用 ---------- */

.article blockquote {
  position: relative;
  margin: 3.2rem 0;
  padding: 2.8rem 2.8rem 2.8rem 3.4rem;
  background: rgba(255, 255, 255, .6);
  border: 1px solid var(--line);
  border-left: 4px solid var(--main);
  border-radius: .4rem 1.6rem 1.6rem .4rem;
}
.article blockquote p:last-child { margin-bottom: 0; }
.article blockquote cite {
  display: block;
  margin-top: 1.4rem;
  font-size: 1.3rem;
  font-style: normal;
  color: var(--ink-mute);
}

/* ---------- 区切り線 ---------- */

.article hr {
  height: 2px;
  margin: 5rem auto;
  border: 0;
  background: var(--ink-mute);
  opacity: .28;
  -webkit-mask: var(--wave-b) no-repeat center / 100% 100%;
          mask: var(--wave-b) no-repeat center / 100% 100%;
}
.article hr.is-style-dots {
  height: auto;
  mask: none; -webkit-mask: none;
  background: none;
  text-align: center;
  opacity: 1;
}
.article hr.is-style-dots::before {
  content: "・・・";
  color: var(--ink-mute);
  letter-spacing: 1em;
}

/* ---------- 画像 ---------- */

.article figure { margin: 3.4rem 0; }

.article .wp-block-image { text-align: center; }
.article .wp-block-image img {
  /* 本文には style="width:460px" のようなインライン幅を持つ画像がある。
     max-width で必ず折り返す（インライン width より max-width が優先される） */
  max-width: 100%;
  height: auto;
  border-radius: 1rem;
  display: inline-block;
}
.article .wp-block-image.alignleft  { text-align: left; }
.article .wp-block-image.alignright { text-align: right; }

.article figcaption,
.article .wp-element-caption {
  margin-top: 1rem;
  font-size: 1.3rem;
  line-height: 1.8;
  color: var(--ink-mute);
  text-align: center;
}

/* ---------- 表 ----------
   本文の表は inline style で border-color / border-width が入っている。
   打ち消さず、その上に配色と縞模様を足す。 */

.article .wp-block-table {
  margin: 3.4rem 0;
  /* スマホで横に長い表がはみ出すので、表だけ横スクロールさせる */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.article table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.45rem;
  line-height: 1.8;
  background: #fff;
}
.article table.has-fixed-layout { table-layout: fixed; }
.article th,
.article td {
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--line);
  vertical-align: top;
  text-align: left;
}
.article thead th {
  background: var(--main);
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}
/* 縞模様（is-style-stripes） */
.article .is-style-stripes tbody tr:nth-child(odd) { background: rgba(92, 132, 158, .07); }
.article .is-style-stripes tbody tr:nth-child(even) { background: #fff; }

@media (max-width: 600px) {
  .article table { font-size: 1.35rem; }
  .article th, .article td { padding: 1rem; }
  /* fixed だと狭い画面で潰れるため、横スクロールに切り替える */
  .article table.has-fixed-layout { table-layout: auto; min-width: 52rem; }
}

/* ---------- グループ ---------- */

.article .wp-block-group.has-background {
  padding: 2.4rem 2.6rem;
  border-radius: 1.2rem;
  margin: 3rem 0;
}
.article .wp-block-group > :last-child { margin-bottom: 0; }

/* ---------- 埋め込み（YouTube など） ---------- */

.article .wp-block-embed__wrapper {
  position: relative;
  padding-top: 56.25%;
  border-radius: 1rem;
  overflow: hidden;
}
.article .wp-block-embed__wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- 整形済みテキスト ---------- */

.article .wp-block-preformatted,
.article pre {
  margin: 2.8rem 0;
  padding: 2rem 2.2rem;
  background: var(--paper2, #f2ece2);
  border-radius: .8rem;
  font-size: 1.4rem;
  line-height: 1.9;
  white-space: pre-wrap;
  overflow-x: auto;
}

/* ---------- 目次（本文冒頭の .p-toc） ----------
   **SWELL が PHP で出すのは殻だけ**（`<div class="p-toc"><span class="p-toc__ttl">目次</span></div>`）。
   リストの生成と見出しへの id 付与は SWELL の main.js がやっており、その JS を
   dequeue しているため中身が空になっていた（2026-08-06 発覚）。
   いまは main.js の toc() が同じ構造を組み立てる:
     .p-toc > .p-toc__ttl + ol.p-toc__list > li > a

   タイトルのクラスは **`__ttl`**（`__title` ではない）。実際の出力に合わせること。 */

.article .p-toc {
  margin: 3.4rem 0 4.2rem;
  padding: 2.4rem 2.6rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 1.4rem;
}
.article .p-toc__ttl,
.article .p-toc__title {
  display: block;
  margin: 0 0 1.4rem;
  font-family: var(--font-round);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center;
  color: var(--ink);
}
.article .p-toc__list,
.article .p-toc ol,
.article .p-toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}
.article .p-toc li { margin: 0; padding: 0; }
.article .p-toc li::before { content: none; }   /* 本文リストの装飾を打ち消す */

.article .p-toc a {
  display: block;
  padding: .7rem 0 .7rem 2.4rem;
  position: relative;
  font-size: 1.4rem;
  line-height: 1.8;
  color: var(--ink);
  text-decoration: none;
}
.article .p-toc a::before {
  content: "";
  position: absolute;
  left: .6rem;
  top: 1.5rem;
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: var(--main);
  opacity: .5;
}
.article .p-toc a:hover { color: var(--main-dark); }

/* 入れ子（h3 レベル）は一段下げて小さく */
.article .p-toc ol ol a,
.article .p-toc ul ul a {
  padding-left: 4rem;
  font-size: 1.3rem;
  color: var(--ink-mute);
}
.article .p-toc ol ol a::before { left: 2.2rem; opacity: .3; }

/* 折りたたみ。h2 だけ見せ、h3 はボタンで開く（main.js の toc() が付ける）。
   畳むのは項目が9件以上ある記事だけなので、短い記事にボタンは出ない。 */
.article .p-toc.is-collapsed:not(.is-open) .p-toc__childList { display: none; }

.article .p-toc__toggle {
  display: block;
  width: 100%;
  margin: 1.6rem 0 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: 1.3rem;
  letter-spacing: .06em;
  color: var(--ink-mute);
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.article .p-toc__toggle:hover {
  background: var(--paper);
  border-color: var(--main);
  color: var(--main-dark);
}
.article .p-toc__toggle:focus-visible {
  outline: 2px solid var(--main);
  outline-offset: 2px;
}
/* 開いているときは「閉じる」向きの矢印にする */
.article .p-toc__toggle::after {
  content: "";
  display: inline-block;
  width: .7rem;
  height: .7rem;
  margin-left: .8rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-.2rem) rotate(45deg);
  transition: transform .3s ease;
}
.article .p-toc.is-open .p-toc__toggle::after {
  transform: translateY(.1rem) rotate(-135deg);
}

/* SWELL 本来の開閉ボタン・広告枠は、生成する JS が無いので出さない */
.article .p-toc__switch,
.article .p-toc__ad { display: none; }

/* ---------- ブログカード（SWELL の「関連記事」ブロック） ----------
   本文中に 77 件ある（実測）。SWELL の CSS を外すとスタイルが無くなるため、
   ここで自前に作り直す。DOM は SWELL が出力するものをそのまま使う:

     .p-blogCard > .p-blogCard__inner
        ├ .p-blogCard__caption   … 「関連記事」「Sire」などのラベル
        ├ .p-blogCard__thumb     … サムネイル
        └ .p-blogCard__body > a.p-blogCard__title

   SWELL の JS（カード全体をクリック可能にする）も外れるので、
   タイトルのリンクだけが押せる。面全体が押せるように見えないよう、
   タイトルを主役にしたレイアウトにしている。 */

.article .swell-block-postLink { margin: 3rem 0; }

.article .p-blogCard {
  border: 1px solid var(--line);
  border-radius: 1.2rem;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 .4rem 1.4rem rgba(58, 54, 50, .06);
  transition: border-color .3s ease, box-shadow .4s ease;
}
.article .p-blogCard:hover {
  border-color: var(--main);
  box-shadow: 0 .8rem 2.2rem rgba(58, 54, 50, .12);
}

.article .p-blogCard__inner {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 0 1.6rem;
  align-items: center;
  padding: 1.4rem 1.8rem 1.4rem 1.4rem;
}

/* ラベルは右側の本文カラムの上に置く */
.article .p-blogCard__caption {
  grid-column: 2;
  font-size: 1.1rem;
  letter-spacing: .16em;
  color: var(--main);
}

.article .p-blogCard__thumb {
  grid-column: 1;
  grid-row: 1 / span 2;
  aspect-ratio: 16 / 10;
  border-radius: .8rem;
  overflow: hidden;
  background: var(--paper2);
}
.article .p-blogCard__thumb img,
.article .p-blogCard__thumb figure {
  width: 100%;
  height: 100%;
  margin: 0;
}
.article .p-blogCard__thumb img { object-fit: cover; }

.article .p-blogCard__body { grid-column: 2; min-width: 0; }

.article .p-blogCard__title {
  display: block;
  font-family: var(--font-round);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.65;
  color: var(--ink);
  text-decoration: none;
}
.article .p-blogCard__title:hover { color: var(--main-dark); }

/* 抜粋やURLなど、カード内の余分な要素は出さない */
.article .p-blogCard__excerpt,
.article .p-blogCard__url { display: none; }

@media (max-width: 600px) {
  .article .p-blogCard__inner {
    grid-template-columns: 8.5rem 1fr;
    gap: 0 1.2rem;
    padding: 1.1rem 1.3rem;
  }
  .article .p-blogCard__title { font-size: 1.35rem; }
}

/* ---------- 配置ユーティリティ ---------- */

.article .aligncenter { margin-inline: auto; }
.article .alignwide   { width: 100%; }

@media (max-width: 600px) {
  .article { font-size: 1.55rem; line-height: 1.95; }
  .article h2 { margin-top: 4.6rem; }
  .article blockquote { padding: 2rem 1.8rem 2rem 2.2rem; }
}

/* =========================================================
   dog CPT（犬たち紹介）で使われるブロック

   投稿には出てこないが dog CPT の固有部分に残るもの。
   本文の「お迎えまでの流れ」以降（＝全ページ共通の定型文）は
   single-dog.php が切り落とすので、定型側にしか出てこない
   ステップ・FAQ・吹き出しは実装しない。

   実測（切り落とし後に残る数・30件合計）:
     swell-block-column 102 / columns 46 / postLink 32 / fullWide 30 / button 11
     wp-block-image 101 / gallery 16 / cover 14 / table 30
   p-blogCard（両親犬カード）は投稿用に実装済みなので、ここには書かない。
   ========================================================= */

/* ---------- カラム ---------- */

.article .swell-block-columns { margin-block: clamp(2.4rem, 4vw, 3.4rem); }

.article .swell-block-columns__inner {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.6rem, 3vw, 3rem);
}
.article .swell-block-column {
  flex: 1 1 24rem;
  /* これが無いと中の表や画像がカラムを押し広げて横溢れする */
  min-width: 0;
}
.article .swell-block-column > :last-child { margin-bottom: 0; }

/* 影付きカラム（両親犬紹介で使われている） */
.article .swell-block-columns.is-style-clmn-shadow .swell-block-column {
  background: #fff;
  border-radius: 1.2rem;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  box-shadow: 0 .4rem 1.4rem rgba(58, 54, 50, .07);
}

@media (max-width: 700px) {
  .article .swell-block-column { flex: 1 1 100%; }
}

/* ---------- 全幅ブロック ----------
   ★ alignfull だが、本文幅を突き抜けさせない。
     margin-inline: calc(50% - 50vw) は縦スクロールバーのぶんだけ
     横溢れを起こしやすく、これまで何度も踏んでいるため
     （PROJECT.md「ハマりどころ」）。背景付きの囲みとして扱う。 */

.article .swell-block-fullWide {
  border-radius: 1.2rem;
  padding: clamp(2rem, 4vw, 3.2rem) clamp(1.6rem, 3vw, 2.6rem);
  margin-block: clamp(3rem, 5vw, 4.6rem);
}
.article .swell-block-fullWide__inner > :first-child { margin-top: 0; }
.article .swell-block-fullWide__inner > :last-child  { margin-bottom: 0; }
/* 背景画像付きのものは読めなくなるので背景を殺す */
.article .swell-block-fullWide.has-bg-img { background-image: none !important; }

/* ---------- ボタン ---------- */

.article .swell-block-button {
  margin-block: clamp(2rem, 3.4vw, 2.8rem);
  text-align: center;
}
.article .swell-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  background: var(--main);
  color: #fff;
  border: 1px solid var(--main);
  border-radius: 999px;
  padding: 1.3rem 3rem;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.5;
  box-shadow: 0 .4rem 1.4rem rgba(58, 54, 50, .1);
  transition: background-color .3s ease, transform .4s var(--ease-out);
}
.article .swell-block-button__link:hover {
  background: var(--main-dark);
  border-color: var(--main-dark);
  transform: translateY(-.2rem);
}
.article .swell-block-button__link svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  flex: none;
}

/* ---------- ギャラリー ---------- */

.article .wp-block-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
  margin-block: clamp(1.6rem, 3vw, 2.4rem);
}
/* 入れ子の figure は .article figure の余白を持たせない */
.article .wp-block-gallery figure { margin: 0; }
.article .wp-block-gallery .wp-block-image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: .8rem;
}

/* ---------- カバー画像 ---------- */

.article .wp-block-cover {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(22rem, 40vw, 34rem);
  padding: clamp(2rem, 4vw, 3.4rem);
  overflow: hidden;
  border-radius: 1.2rem;
  margin-block: clamp(2.4rem, 4vw, 3.4rem);
}
.article .wp-block-cover__image-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
}
.article .wp-block-cover__background {
  position: absolute;
  inset: 0;
}
.article .wp-block-cover__inner-container {
  position: relative;
  z-index: 1;
  color: #fff;
  text-align: center;
  text-shadow: 0 .1rem .6rem rgba(0, 0, 0, .45);
}
.article .wp-block-cover__inner-container > :last-child { margin-bottom: 0; }

/* ---------- SWELL のインライン指定 ----------
   総額の見出しなどで使われている。無いと文字サイズが揃ってしまい
   「300,000」の強調が消える。 */

.article .swl-fz.u-fz-xl { font-size: 1.6em; }
.article .swl-fz.u-fz-l  { font-size: 1.35em; }
.article .swl-fz.u-fz-s  { font-size: .9em; }
.article .swl-fz.u-fz-xs { font-size: .78em; }
/* ステップの見出しなどに付く。文字サイズだけの指定なので swl-fz が無い形もある */
.article .u-fz-xl:not(.swl-fz) { font-size: 1.35em; }

.article .u-mb-0  { margin-bottom: 0 !important; }
.article .u-mb-10 { margin-bottom: 1rem !important; }

/* SWELL の表示切り替え。dog ページで写真の出し分けに使われている */
@media (max-width: 600px) { .article .pc_only { display: none !important; } }
@media (min-width: 601px) { .article .sp_only { display: none !important; } }

/* =========================================================
   固定ページで使われる SWELL 独自ブロック

   /ratelhotel/ /ceremony/ /event/ が使っているもの。
   これらを実装すると、本文を作り直さずに the_content() のまま
   新デザインで出せる（静的HTMLへの作り直しが要らない）。

   実測（2026-08-05）:
     ceremony  … ステップ46 / 全幅16 / アコーディオン12 / カラム7 / FAQ6 / ボタン4 / capbox2
     ratelhotel… ステップ17 / 全幅8 / カラム3 / capbox1
     event     … 全幅10 / カラム6 / ボタン6
   ========================================================= */

/* ---------- ステップ ----------
   番号は CSS の counter で振る。HTML 側は「STEP」の文字しか持っていない。 */

.article .swell-block-step {
  counter-reset: ratel-step;
  margin-block: clamp(3rem, 5vw, 4.4rem);
}
.article .swell-block-step__item {
  counter-increment: ratel-step;
  position: relative;
  padding: 0 0 clamp(2.4rem, 4vw, 3.4rem) clamp(4.6rem, 7vw, 6.4rem);
}
/* 縦線（最後の項目には引かない） */
.article .swell-block-step__item::before {
  content: "";
  position: absolute;
  left: clamp(1.7rem, 2.6vw, 2.4rem);
  top: 3.4rem;
  bottom: 0;
  width: 2px;
  background: linear-gradient(var(--accent), var(--main));
  opacity: .5;
}
.article .swell-block-step__item:last-child { padding-bottom: 0; }
.article .swell-block-step__item:last-child::before { display: none; }

.article .swell-block-step__number {
  position: absolute;
  left: 0;
  top: .2rem;
  width: clamp(3.4rem, 5.2vw, 4.8rem);
  height: clamp(3.4rem, 5.2vw, 4.8rem);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--main);
  color: #fff;
  font-size: 1.1rem;
  letter-spacing: .04em;
  line-height: 1.1;
  text-align: center;
}
/* 「STEP」の文字は小さく、その下に連番を出す */
.article .swell-block-step__number .__label { font-size: .82em; opacity: .85; }
.article .swell-block-step__number::after {
  content: counter(ratel-step);
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  margin-top: .1rem;
}

.article .swell-block-step__title {
  font-family: var(--font-round);
  font-size: clamp(1.7rem, 2.6vw, 2rem);
  font-weight: 700;
  line-height: 1.6;
  color: var(--main-dark);
  margin-bottom: 1rem;
  padding-top: .6rem;
}
.article .swell-block-step__body > :last-child { margin-bottom: 0; }

/* ---------- FAQ ---------- */

.article .swell-block-faq { margin-block: clamp(3rem, 5vw, 4.4rem); }
.article .swell-block-faq dl { margin: 0; }
.article .swell-block-faq__item {
  border-bottom: 1px solid var(--line);
  padding: clamp(1.6rem, 3vw, 2.2rem) 0;
}
.article .swell-block-faq__item:first-child { border-top: 1px solid var(--line); }

.article .swell-block-faq .faq_q,
.article .swell-block-faq .faq_a {
  position: relative;
  margin: 0;
  padding-left: 3.4rem;
}
.article .swell-block-faq .faq_q {
  font-weight: 700;
  color: var(--ink);
  line-height: 1.8;
}
.article .swell-block-faq .faq_a { margin-top: 1rem; color: var(--ink-mute); }
.article .swell-block-faq .faq_a > :last-child { margin-bottom: 0; }

.article .swell-block-faq .faq_q::before,
.article .swell-block-faq .faq_a::before {
  position: absolute;
  left: 0;
  top: .1em;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: 700;
  font-family: var(--font-round);
}
.article .swell-block-faq .faq_q::before {
  content: "Q";
  background: var(--main);
  color: #fff;
}
.article .swell-block-faq .faq_a::before {
  content: "A";
  background: rgba(169, 123, 96, .16);
  color: var(--accent);
}

/* ---------- アコーディオン ----------
   <details>/<summary> なので開閉自体は JS なしで動く。
   SWELL のアイコンフォント（icon-caret-down）は読み込んでいないので、
   三角は自前で描く。 */

.article .swell-block-accordion { margin-block: clamp(2.4rem, 4vw, 3.4rem); }
.article .swell-block-accordion__item {
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: #fff;
  margin-bottom: 1.2rem;
  overflow: hidden;
}
.article .swell-block-accordion__title {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: clamp(1.4rem, 2.6vw, 1.9rem) clamp(1.6rem, 3vw, 2.2rem);
  cursor: pointer;
  font-weight: 700;
  line-height: 1.7;
  list-style: none;
  transition: background-color .3s ease;
}
.article .swell-block-accordion__title::-webkit-details-marker { display: none; }
.article .swell-block-accordion__title:hover { background: rgba(98, 134, 157, .06); }
.article .swell-block-accordion__label { flex: 1; }

/* SWELL のアイコン i 要素は隠し、疑似要素で三角を出す */
.article .swell-block-accordion__icon i { display: none; }
.article .swell-block-accordion__icon {
  flex: none;
  position: relative;
  width: 2rem;
  height: 2rem;
}
.article .swell-block-accordion__icon::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: .8rem; height: .8rem;
  margin: -.6rem 0 0 -.4rem;
  border-right: 2px solid var(--main);
  border-bottom: 2px solid var(--main);
  transform: rotate(45deg);
  transition: transform .3s var(--ease-out);
}
.article .swell-block-accordion__item[open] .swell-block-accordion__icon::before {
  transform: rotate(-135deg);
  margin-top: -.2rem;
}

.article .swell-block-accordion__body {
  padding: 0 clamp(1.6rem, 3vw, 2.2rem) clamp(1.6rem, 3vw, 2.2rem);
  border-top: 1px solid var(--line);
  padding-top: clamp(1.4rem, 2.6vw, 1.8rem);
}
.article .swell-block-accordion__body > :last-child { margin-bottom: 0; }

/* ---------- キャプションボックス ---------- */

.article .swell-block-capbox {
  margin-block: clamp(2.4rem, 4vw, 3.4rem);
  border: 1px solid var(--main);
  border-radius: 1.2rem;
  overflow: hidden;
  background: #fff;
}
.article .swell-block-capbox .cap_box_ttl {
  background: var(--main);
  color: #fff;
  padding: 1.1rem clamp(1.6rem, 3vw, 2.2rem);
  font-family: var(--font-round);
  font-weight: 700;
  line-height: 1.6;
}
.article .swell-block-capbox .cap_box_ttl strong { color: inherit; }
.article .swell-block-capbox .cap_box_content {
  padding: clamp(1.8rem, 3vw, 2.4rem) clamp(1.6rem, 3vw, 2.2rem);
}
.article .swell-block-capbox .cap_box_content > :last-child { margin-bottom: 0; }

/* ---------- Contact Form 7 ----------
   プラグインの CSS は残しているが、入力欄の見た目は SWELL が当てていた。
   外したぶんを自前で描く。 */

.article .wpcf7 { margin-block: clamp(2rem, 4vw, 3rem); }
.article .wpcf7 p { margin-bottom: 1.8rem; }
.article .wpcf7 label { display: block; font-weight: 500; line-height: 2; }
.article .wpcf7-form-control-wrap { display: block; margin-top: .4rem; }

.article .wpcf7 input[type="text"],
.article .wpcf7 input[type="email"],
.article .wpcf7 input[type="tel"],
.article .wpcf7 input[type="url"],
.article .wpcf7 input[type="date"],
.article .wpcf7 input[type="number"],
.article .wpcf7 select,
.article .wpcf7 textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1.6rem;   /* iOS の自動ズームを防ぐ */
  line-height: 1.7;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: .8rem;
  padding: 1.1rem 1.3rem;
  transition: border-color .3s ease, box-shadow .3s ease;
  -webkit-appearance: none;
  appearance: none;
}
.article .wpcf7 textarea { min-height: 14rem; resize: vertical; }
.article .wpcf7 select {
  /* 自前の下向き三角。appearance:none で標準の矢印が消えるため */
  background-image: linear-gradient(45deg, transparent 50%, var(--main) 50%),
                    linear-gradient(135deg, var(--main) 50%, transparent 50%);
  background-position: calc(100% - 1.8rem) 50%, calc(100% - 1.3rem) 50%;
  background-size: .5rem .5rem, .5rem .5rem;
  background-repeat: no-repeat;
  padding-right: 3.4rem;
}
.article .wpcf7 :is(input, select, textarea):focus {
  outline: none;
  border-color: var(--main);
  box-shadow: 0 0 0 3px rgba(98, 134, 157, .16);
}

.article .wpcf7 input[type="checkbox"],
.article .wpcf7 input[type="radio"] { margin-right: .5rem; accent-color: var(--main); }
.article .wpcf7 .wpcf7-list-item { display: inline-block; margin: 0 1.6rem .6rem 0; }

.article .wpcf7 input[type="submit"] {
  display: block;
  margin: clamp(2.4rem, 4vw, 3.4rem) auto 0;
  min-width: min(28rem, 100%);
  font-family: var(--font-body);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: #fff;
  background: var(--main);
  border: 1px solid var(--main);
  border-radius: 999px;
  padding: 1.4rem 3rem;
  cursor: pointer;
  box-shadow: 0 .4rem 1.4rem rgba(58, 54, 50, .1);
  transition: background-color .3s ease, transform .4s var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.article .wpcf7 input[type="submit"]:hover {
  background: var(--main-dark);
  border-color: var(--main-dark);
  transform: translateY(-.2rem);
}

/* 必須マーク・エラー表示 */
.article .wpcf7 .wpcf7-not-valid { border-color: #c0562f; }
.article .wpcf7 .wpcf7-not-valid-tip {
  display: block;
  margin-top: .5rem;
  font-size: 1.3rem;
  color: #c0562f;
}
.article .wpcf7 .wpcf7-response-output {
  margin: 2rem 0 0;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: .8rem;
  font-size: 1.45rem;
  line-height: 1.9;
}
.article .wpcf7 .wpcf7-spinner { margin: 0 auto; display: block; }

/* ---------- 犬の情報表はスマホでも収める ----------
   投稿の表は列が多く、狭い画面では横スクロールに逃がしている（上の .article table）。
   dog の表は「項目名｜値」の2列で内容も短く、しかも誕生日・性別・毛色という
   いちばん見たい情報なので、横に流さず画面内に収める。
   .article--dog は functions.php が dog CPT のときだけ付ける。 */

@media (max-width: 600px) {
  .article--dog table,
  .article--dog table.has-fixed-layout {
    table-layout: fixed;
    min-width: 0;
    font-size: 1.3rem;
  }
  .article--dog th,
  .article--dog td { padding: .9rem 1rem; }
  .article--dog th { width: 36%; }
  /* 「体重：5kg前後」のような値が途中で切れないように */
  .article--dog td { overflow-wrap: anywhere; }
}