/* ===== page-reptile-care 専用CSS =====
   :root変数・.container・.skip-link・header/footerのCSSは assets/css/common.css に実装済みのため、
   ここには含めない。
*/

/* 汎用パーツ(.section / .eyebrow / .section-head / .btn)と、グローバルな prefers-reduced-motion
   ブロックは assets/css/common.css に集約済みのため、ここには記述しない。
   ここにはページ固有のスタイルと、汎用パーツに対する差分の上書きのみを書く。 */

/* リード文はこのページだけ大きい(common.cssの .section-head p への上書き) */
.section-head p {
  font-size: clamp(1rem, 1rem + 0.05rem * ((100vw - 375px) / (768px - 375px)), 1.05rem);
}
@media (width >= 768px) {
  .section-head p { font-size: clamp(1.05rem, 1.05rem + 0.08rem * ((100vw - 768px) / (1440px - 768px)), 1.13rem); }
}

/* ===== ページタイトルは common.css の .page-title に集約済み(値の重複なし) ===== */

/* ===== 対応動物種・アンカーナビ ===== */
.anchor-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (width >= 768px) { .anchor-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
/* アイコン上・テキスト下の中央揃え構図。横並び(アイコン+ラベル/ステータス+右端シェブロン)ではなく
   縦並び中央揃えとする。アンカーメニュー自体のグリッド構図(.anchor-grid)とは別の話 */
.anchor-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 20px 12px;
  color: var(--color-text);
  transition: color 0.2s ease;
}
/* ホバーで文字色を --color-main に変化させる。枠線・背景は使わない。
   アイコンも連動して色を変えるため、<img>(ラスターwebp)から mask-image方式(下記.anchor-box__icon)へ
   差し替え、currentColorで着色できるようにした */
a.anchor-box:hover { color: var(--color-main); }
.anchor-box--disabled { color: var(--color-text-mute); }
/* アイコンをmask-imageで塗りつぶし表示にする。webp画像は単色シルエット(透過背景+黒塗り)のため、
   アルファチャンネルをマスク形状として使い、background-color(currentColor)で着色する。
   これにより.anchor-boxのcolor変化(通常時--color-text/ホバー時--color-main)にアイコンも追従する。
   個別の画像パスは各要素のインラインカスタムプロパティ(--icon-mask)で指定する(PHP側で出力)。
   アイコン:ラベル文字 ≒ 3.3:1の比率に合わせ46pxとする */
.anchor-box__icon {
  display: inline-block;
  width: 46px;
  height: 46px;
  background-color: currentColor;
  -webkit-mask-image: var(--icon-mask);
  mask-image: var(--icon-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.anchor-box__text { display: flex; flex-direction: column; gap: 2px; transition: transform 0.2s ease; }
/* ホバーでアイコン・テキストをわずかに拡大し、クリックできる感を出す。
   ボックス自体(.anchor-box)は出現アニメーションのtransformと競合するためスケールさせない */
a.anchor-box:hover .anchor-box__icon,
a.anchor-box:hover .anchor-box__text {
  transform: scale(1.1);
}
.anchor-box__label { font-size: 0.88rem; font-weight: 700; }
.anchor-box__status { font-size: 0.88rem; color: var(--color-text-mute); }
.anchor-note { margin-top: 16px; font-size: 0.88rem; color: var(--color-text-mute); }

/* ===== アンカーナビ: 出現アニメーション(弱。ボックスは0.06s刻みで等倍へ) ===== */
.anchor-box--anim-init { opacity: 0; transform: scale(0.97); }
.anchor-box--anim-init.is-in-view {
  opacity: 1;
  transform: scale(1);
  /* colorも含めないと、この transition 宣言が .anchor-box 側の
     transition: color 0.2s ease; を上書きしてしまい、is-in-view付与後(=通常の閲覧時)は
     ホバーの文字色変化が瞬時切り替えになってしまう(2026-09-25の検証で発覚) */
  transition: opacity 0.5s ease-out, transform 0.5s ease-out, color 0.2s ease;
}
.anchor-grid .anchor-box--anim-init:nth-child(1) { transition-delay: 0s; }
.anchor-grid .anchor-box--anim-init:nth-child(2) { transition-delay: 0.06s; }
.anchor-grid .anchor-box--anim-init:nth-child(3) { transition-delay: 0.12s; }
.anchor-grid .anchor-box--anim-init:nth-child(4) { transition-delay: 0.18s; }
/* ホバーのtransformとの競合を避けるため、出現後はscaleを持たせない */
.anchor-box--anim-init.is-in-view:hover { transform: scale(1); }

/* ===== 動物種別の症状解説 ===== */
.symptom-group + .symptom-group {
  margin-top: 48px;
  padding-top: 48px;
  border-top: 1px solid var(--color-border);
}
.symptom-group__heading {
  font-family: var(--font-heading-jp);
  font-weight: 700;
  font-size: 1.13rem;
  margin-bottom: 20px;
  color: var(--color-text);
  scroll-margin-top: 80px; /* アンカー移動先。Lenis未使用時(reduce環境等)の着地位置を確保する */
}
.symptom-group__body { display: flex; flex-direction: column; gap: 20px; }
.symptom-list { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.symptom-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-border);
}
.symptom-row:first-child { border-top: 1px solid var(--color-border); }
.symptom-row dt { font-size: 0.94rem; font-weight: 700; color: var(--color-text); }
.symptom-row dd { font-size: 0.88rem; color: var(--color-text-sub); line-height: 1.7; }
.symptom-group__photo { order: -1; flex: 0 0 auto; max-width: 260px; margin-inline: auto; }
.symptom-group__photo img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; }
@media (width >= 768px) {
  .symptom-row { grid-template-columns: 220px 1fr; gap: 24px; align-items: baseline; padding: 22px 0; }
  .symptom-row dd { border-left: 1px solid var(--color-border); padding-left: 24px; }
  .symptom-group__body { flex-direction: row; align-items: flex-start; gap: 32px; }
  .symptom-group__photo { order: 0; flex: 0 0 220px; max-width: none; margin-inline: 0; }
}
@media (width >= 1440px) {
  .symptom-group__photo { flex: 0 0 260px; }
}

/* ===== 症状解説: 出現アニメーション(弱。見出し→各行を0.06s刻み、写真は右から) ===== */
.symptom-group__heading--anim-init,
.symptom-row--anim-init {
  opacity: 0;
  transform: translateY(12px);
}
.symptom-group__heading--anim-init.is-in-view,
.symptom-row--anim-init.is-in-view {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.symptom-list .symptom-row--anim-init:nth-of-type(1) { transition-delay: 0.06s; }
.symptom-list .symptom-row--anim-init:nth-of-type(2) { transition-delay: 0.12s; }
.symptom-list .symptom-row--anim-init:nth-of-type(3) { transition-delay: 0.18s; }
.symptom-group__photo--anim-init { opacity: 0; transform: translateX(12px); }
.symptom-group__photo--anim-init.is-in-view {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* ===== 症例紹介(横スクロールカルーセル) ===== */
.case-carousel {
  width: 100%;
  /* カード幅は max-width: 320px を min() で内包する(カードへ個別に max-width を
     付けると両端の空きの計算とずれ、1枚目・最後のカードが中央からずれるため) */
  --case-carousel-card-width: min(78%, 320px);
  --case-carousel-gap: var(--gutter);
  --case-carousel-border-color: var(--color-border);
  --case-carousel-active-color: var(--color-main);
  --case-carousel-dot-duration: 0.3s;
}
@media (width >= 768px) { .case-carousel { --case-carousel-card-width: min(42%, 320px); } }
@media (width >= 1440px) { .case-carousel { --case-carousel-card-width: min(30%, 320px); } }

.case-carousel__track {
  position: relative; /* JSがカードの位置(offsetLeft)を測る基準 */
  display: flex;
  gap: var(--case-carousel-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  padding-bottom: 8px;
}
.case-carousel__card {
  flex: 0 0 var(--case-carousel-card-width);
  min-width: 0;
  scroll-snap-align: center;
}
/* 両端の空き(1枚目・最後のカードも中央に揃えられるようにする)。paddingにするとカード幅の%の基準が変わるため疑似要素で作る。
   この空きを「1枚ごと中央揃えのまま」縮小する対応を2パターン試した(min()で上限/
   768px以上で0+start揃え)が、いずれも1440px等の複数枚同時表示幅で「今のカード」判定・ナビが
   正しく動かなくなることを検証で確認し、両方ともrevertした。
   767px以下・768〜1439pxはこの計算式のまま変更していない。
   1440px以上は下の@mediaで「ページ単位モード」(page-reptile-care.js参照)に切り替え、
   空きも0にしている(この場合はjs側のロジックも「1枚ごと」から「ページ単位」に変えているため、
   前述の失敗パターンとは異なりナビが壊れない) */
.case-carousel__track::before,
.case-carousel__track::after {
  content: "";
  flex: 0 0 max(0px, calc((100% - var(--case-carousel-card-width)) / 2 - var(--case-carousel-gap)));
}
@media (width >= 1440px) {
  .case-carousel__card { scroll-snap-align: start; }
  .case-carousel__track::before,
  .case-carousel__track::after {
    flex: 0 0 0;
  }
}
.case-carousel__photo { position: relative; }
.case-carousel__image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.case-carousel__number {
  position: absolute;
  right: 10px;
  bottom: -6px;
  z-index: 2;
  font-family: var(--font-heading-en);
  font-size: 3.25rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 2px 10px rgba(30, 42, 34, 0.4);
}
.case-carousel__eyebrow {
  display: block;
  font-family: var(--font-heading-en);
  font-size: 0.69rem;
  letter-spacing: 0.1em;
  color: var(--color-text-mute);
  margin: 20px 0 6px;
}
.case-carousel__title {
  font-family: var(--font-heading-jp);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text);
}
.case-carousel__text { font-size: 0.81rem; color: var(--color-text-sub); line-height: 1.7; }

.case-carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}
/* display: flex がブラウザ標準の hidden より優先されるため、hidden属性の非表示を明示する */
.case-carousel__nav[hidden] { display: none; }
.case-carousel__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--case-carousel-border-color);
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
  transition: border-color 0.2s ease;
}
.case-carousel__arrow:hover { border-color: var(--case-carousel-active-color); }
/* 先頭・末尾で押せない矢印(キーボードのフォーカスを失わせないため disabled 属性ではなく aria-disabled を使う) */
.case-carousel__arrow[aria-disabled="true"] { opacity: 0.4; cursor: default; pointer-events: none; }
.case-carousel__dots { display: flex; }
/* ボタン自体は押しやすい24×24px、見える丸は ::before の6px */
.case-carousel__dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: none;
  background: none;
}
.case-carousel__dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--case-carousel-border-color);
  transition: background-color var(--case-carousel-dot-duration) ease;
}
.case-carousel__dot.is-active::before { background-color: var(--case-carousel-active-color); }
.case-carousel__track:focus-visible,
.case-carousel__arrow:focus-visible,
.case-carousel__dot:focus-visible {
  outline: 2px solid var(--case-carousel-active-color);
  outline-offset: 2px;
}
/* ===== 症例紹介: 出現アニメーション(弱。カードは右から0.08s刻み)
   出現演出はカード内側の __card-inner に付ける。カード自体(.case-carousel__card)を transform すると
   scroll-snapの吸着位置がtransform分ずれ、JSが位置計算に使う offsetLeft(transformを含まない)と
   食い違って、送り先・アクティブなドットが1つずれる(実機で12pxのずれを確認済み) ===== */
.case-carousel__card-inner--anim-init { opacity: 0; transform: translateX(12px); }
/* カルーセル全体が画面に入った時点で3枚まとめて再生する(.case-carousel--anim-init は状態を持つだけで
   自身は非表示にしない)。カード個別の交差でも発火できるよう、両方のセレクタを併記する */
.case-carousel--anim-init.is-in-view .case-carousel__card-inner--anim-init,
.case-carousel__card-inner--anim-init.is-in-view {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.case-carousel__card:nth-of-type(1) .case-carousel__card-inner--anim-init { transition-delay: 0s; }
.case-carousel__card:nth-of-type(2) .case-carousel__card-inner--anim-init { transition-delay: 0.08s; }
.case-carousel__card:nth-of-type(3) .case-carousel__card-inner--anim-init { transition-delay: 0.16s; }
.case-carousel__card:nth-of-type(4) .case-carousel__card-inner--anim-init { transition-delay: 0.24s; }
.case-carousel__card:nth-of-type(5) .case-carousel__card-inner--anim-init { transition-delay: 0.32s; }

/* ===== 料金目安は common.css の .price-list に集約済み。
   .table-note のみ、このページの表示幅文脈(中央寄せ)に合わせて個別に定義する ===== */
.table-note { margin-top: 20px; font-size: 0.75rem; color: var(--color-text-mute); text-align: center; }

/* ===== 料金目安: 出現アニメーション(弱、フェードのみ。各行のnth-of-type遅延はcommon.cssに集約済み) ===== */
.price .section-head--anim-init { transform: none; }

/* ===== CTAは common.css の .cta-band に集約済み(値の重複なし) ===== */

/* ===== セクション見出しの出現アニメーション(弱。各セクション共通) ===== */
.section-head--anim-init { opacity: 0; transform: translateY(12px); }
.section-head--anim-init.is-in-view {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}