@charset "UTF-8";

/* ==================================================
    1. 変数定義
================================================== */
:root {
    --color-main: #FFDA34;         /* 濃い黄色 */
    --color-text: #213548;         /* 濃紺テキスト */
    --color-bg-yellow: #FFFBE6;    /* 薄い黄色 */
    --color-bg-blue: #E5FFFF;
    --color-bg-gray: #F0F4F9;
    --color-white: #FFFFFF;
    --color-hover: #FFFBE6;

    /* 少し黄色味を強めたマーカー用オレンジ */
    --color-marker-orange: #FFB000;

    --font-base: 'Noto Sans JP', sans-serif;
    --fw-normal: 500;
    --fw-bold: 700;

    --height-header-sp: 56px;
    --height-header-pc: 100px;

    /* ファーストビュー上余白（ページ最上部から・Figma準拠） */
    --page-top-gap-sp: 84px;
    --page-top-gap-pc: 126px;

    /* 見出しマーカー引きアニメーション */
    --marker-draw-duration-h2: 0.8s;
    --marker-draw-duration-h1: 1.2s;
    --marker-draw-delay: 0.4s;
    --marker-draw-easing: cubic-bezier(0.65, 0, 0.35, 1);

    /* マーカー（下線）グラデーション */
    --marker-h2: linear-gradient(transparent 70%, var(--color-main) 70%, var(--color-main) 98%, transparent 98%);
    --marker-h2-white: linear-gradient(transparent 70%, var(--color-white) 70%, var(--color-white) 98%, transparent 98%);
    --marker-default: linear-gradient(transparent 75%, var(--color-main) 75%, var(--color-main) 92%, transparent 92%);
    --marker-name: linear-gradient(transparent 90%, var(--color-main) 90%, var(--color-main) 100%, transparent 100%);
    --marker-small: linear-gradient(transparent 80%, var(--color-main) 80%, var(--color-main) 95%, transparent 95%);
    --marker-orange: linear-gradient(transparent 70%, var(--color-marker-orange) 70%, var(--color-marker-orange) 98%, transparent 98%);

    --color-bg-placeholder: #eeeeee;

    /* レイアウト：SP=セクション余白内100% / 700px以上=480px */
    --section-padding-x: 20px;
    --content-max: 100%;
}

/* ==================================================
    2. リセット & 基本設定
================================================== */
/* 1. 余白（padding）や線を指定しても、箱のサイズ（100%）を膨張させない */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 2. 万が一はみ出した要素があっても、画面外への横スクロールを強制的にブロックする */
html,
body {
    max-width: 100%;
    overflow-x: hidden; /* スマホレイアウト崩れを防ぐ最強の保険 */
    /* システムのフォントサイズ設定による自動拡大を抑制 */
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

/* 3. 長すぎるURLや英単語の連続を、画面端で強制的に折り返す */
body {
    overflow-wrap: break-word;
    word-wrap: break-word; /* 古いブラウザ用の念押し */
}

/* 4. 画像や動画などのメディア要素を「箱（ブロック）」として扱い、はみ出しを防ぐ */
img,
picture,
video,
iframe,
figure,
svg {
    display: block;
    max-width: 100%;
    width: 100%;
    height: auto;
}

body {
    margin: 0;
    padding: 0;
    /* ページ最上部から白アーチ／ヒーロー上端まで（SP 84px / タブレット以上 126px） */
    padding-top: var(--page-top-gap-sp);
    font-family: var(--font-base);
    font-weight: var(--fw-normal);
    color: var(--color-text);
    background-color: var(--color-main);
    -webkit-font-smoothing: antialiased;
}

/* 静的HTML同様：main内にサイトマップまで含め、マージン崩壊で黄色が見えないようにする */
main {
    display: flow-root;
}

@media screen and (min-width: 700px) {
    body {
        padding-top: var(--page-top-gap-pc);
    }
}

/* WordPress：管理バー表示時もページ最上部基準の余白がずれないよう補正 */
html.admin-bar-margin,
html.admin-bar {
    margin-top: 0 !important;
}

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

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ==================================================
    3. 共通パーツ & 改行コントロール
================================================== */

/* 画面には表示せず、読み上げ・SEO用のテキスト */
.u-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

p {
    font-size: 15px;
    line-height: 1.6;
    margin: 0 auto 8px auto;
    text-align: left;
    width: 100%;
    max-width: 100%;
}

.c-sub-catch {
    display: block;
    font-size: 16px;
    font-weight: var(--fw-normal);
    letter-spacing: 0.1em;
    text-align: center;
    padding-top: 80px;
    margin-bottom: 10px;
    width: 100% ;
}

/* 太字にするだけのクラス */
.c-bold {
    font-weight: var(--fw-bold) !important;
}

/* 注意書き（※マーク付きテキスト） */
.c-note {
    font-size: 14px;
    line-height: 1.6;
    padding-left: 1em;  /* 全体を1文字分右にズラす */
    text-indent: -1em;  /* 1行目だけ1文字分左に戻す */
    width: 100%;
    max-width: 100%;
}

/* 警告アイコン（上余白は親 .l-section-common__arc の padding-top で制御） */
.c-icon-warning {
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto;
}

@media (min-width: 700px) {
    .c-icon-warning {
        width: 96px;
        height: 96px;
    }
}

h2 {
    font-size: 24px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.1em;
    text-align: center;
    margin: 0 0 40px 0;
}

/* ==============================================
   h2 アニメーション＆マーカー設定
   ============================================== */

/* 1. h1/h2全体の待機状態（透明＋下がり） */
h1.js-anim-h2,
h2.js-anim-h2 {
    font-size: 24px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.1em;
    text-align: center;
    margin: 0 0 40px 0;
    opacity: 0;
    transform: translateY(20px);
    will-change: opacity, transform;
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 2. h1/h2全体の表示状態 */
h1.js-anim-h2.is-animated,
h2.js-anim-h2.is-animated {
    opacity: 1;
    transform: translateY(0);
}

/* 3. マーカー（span）の基本設定（メインカラー） */
h1.js-anim-h2 span,
h2.js-anim-h2 span {
    display: inline;
    
    background-image: var(--marker-h2);
    background-repeat: no-repeat;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;

    /* アニメーション用 */
    background-size: 0% 100%; /* 初期は幅0（見えない状態） */
    background-position: left bottom; /* 左から右へ引く起点 */
}

/* h1は文字数が短いため、引く速度（秒数）を長めにして h2 に近い見え方に */
h1.js-anim-h2 span {
    transition: background-size var(--marker-draw-duration-h1) var(--marker-draw-easing) var(--marker-draw-delay);
}

/* h2の動き(0.8s)から 0.4秒遅れて マーカーを引き始める */
h2.js-anim-h2 span {
    transition: background-size var(--marker-draw-duration-h2) var(--marker-draw-easing) var(--marker-draw-delay);
}

/* 4. オレンジ色マーカーの個別設定 */
.c-marker--yellow-orange span {
    font-weight: var(--fw-bold);
    color: var(--color-white); /* 白文字固定を維持 */
    
    background-image: var(--marker-orange) !important;
}

/* 5. 画面に入った瞬間、すべてのマーカーを100%まで引く */
h1.js-anim-h2.is-animated span,
h2.js-anim-h2.is-animated span {
    background-size: 100% 100%;
}

h3 {
    display: block;
    font-size: 16px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.1em;
    text-align: center;
    margin-bottom: 20px;
}

.bg-white {
    background-color: var(--color-white);
}

.bg-paleYellow {
    background-color: var(--color-bg-yellow);
}

.bg-gray {
    background-color: var(--color-bg-gray) ;
}

.bg_navy {
    background-color: var(--color-text);
    color: var(--color-white);
}

.bg_navy .c-note {
    color: var(--color-white);
}

.bg-lightBlue {
    background-color: var(--color-bg-blue);
}

.bg-main {
    background-color: var(--color-main);
}

section {
    width: 700px;
    max-width: 100%;
    padding: 0 var(--section-padding-x);
    margin: 0 auto;
}

/* ==================================================
    レイアウト共通（コンテンツ幅）
    SP：セクション余白内100%（320px→280 / 375px→335）
    700px以上：最大480px
================================================== */
.l-section-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

section.padding_LR-0 .l-section-inner {
    padding-inline: var(--section-padding-x);
}

.c-content-max {
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    box-sizing: border-box;
}

.c-content-max p,
.c-content-max .c-note,
.c-content-max .c-list-check {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

@media screen and (min-width: 700px) {
    :root {
        --content-max: 480px;
    }
}

/*
  セクション別の幅ルール（共通ルールの例外）
  ─ 譲渡のお約束（アーチ内）… SP min(300px, 画面−40px)・700px以上 480px
  ─ ご支援のお願い … SP 240px列（375px〜280px）→ .l-support__text
  ─ サイトマップ … SP 240px列 → .l-sitemap__columns
  ─ 里親応募の流れ … section padding:0 のため .l-flow .c-content-max に左右20px
  ─ スライダー（流れ・声）… l-section-inner を使わず全幅で配置
*/

/* アーチのセクション */
.l-section-common__arc {
    position: relative;
    width: 100%;
    border-radius: 50% 50% 0 0 / 50vw 50vw 0 0;
    border: none;

    /* 2. 幅を親要素よりも広くして、左右の線を外側に押し出す */
    /* calc() を使って、左右20pxずつ（計40px）広くします */
    width: calc(100% + 40px); 

    /* 3. 広げた分だけ左にズラして、中央に配置し直す */
    margin-left: -20px;
    padding-top: 56px;
    padding-left: 0;
    padding-right: 0;
    overflow: visible;
}

/* テキスト類だけ左右余白（画像・リスト・注釈は各セクションで幅を制御） */
.l-section-common__arc > :not(.img_wrapper-radiusTop):not(.img_wrapper-radiusbottom):not(.l-closing__cat-circle):not(.l-responsibility__img):not(.c-icon-warning):not(.c-content-max):not(.c-list-check):not(.c-note),
.l-closing__arc > :not(.img_wrapper-radiusTop):not(.img_wrapper-radiusbottom):not(.l-closing__cat-circle):not(.c-content-max) {
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
}

.l-section-common__arc > .c-content-max,
.l-closing__arc > .c-content-max {
    padding-inline: var(--section-padding-x);
}

/* 黄色い線：左右は外側、上は親の上端に合わせて欠けを防ぐ */
.l-section-common__arc::after,
.l-closing__arc::after {
    content: "";
    position: absolute;
    top: 0;
    left: -8px;
    right: -8px;
    bottom: 0;
    border: 8px solid var(--color-main);
    border-bottom: none;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}
  
  /* タブレット・PCでの幅固定 */
  @media (min-width: 700px) {
    .l-section-common__arc {
        width: 700px;
        margin-left: auto;
        margin-right: auto;
        padding-top: 84px;
        border-radius: 50% 50% 0 0 / 350px 350px 0 0;
    }

    .l-section-common__arc > :not(.img_wrapper-radiusTop):not(.img_wrapper-radiusbottom):not(.l-closing__cat-circle):not(.l-responsibility__img):not(.c-icon-warning):not(.c-content-max):not(.c-list-check):not(.c-note) {
        padding-left: 0;
        padding-right: 0;
    }

    .l-section-common__arc > .c-content-max,
    .l-closing__arc > .c-content-max {
        padding-inline: 0;
    }
}

.padding_B-80to120 {
    padding-bottom: 80px;
}

.padding_T-80to120 {
    padding-top: 80px;
}

.margin_B-60to90 {
    margin-bottom: 60px;
}

.margin_B-40to60 {
    margin-bottom: 40px;
}

.margin_B-20to30 {
    margin-bottom: 20px ;
}

.margin-0_auto {
    margin: 0 auto ;
}

.padding_LR-0 {
    padding: 0 ;
}

.padding_B-0 {
    padding-bottom: 0;
}

.padding_T-0 {
    padding-top: 0 ;
}

.padding_T-20to30 {
    padding-top: 20px;
}

/* セクション境目の角丸写真
   aspect-ratio 2/1 は実画像（例: 1440×692）より高くなり、
   差分に body 黄色が見える。箱の高さは画像の実寸比に合わせる。 */
.img_wrapper-radiusTop {
  display: block;
  line-height: 0;
  font-size: 0;
  border-radius: 90px 90px 0 0;
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
}

.img_wrapper-radiusbottom {
  display: block;
  line-height: 0;
  font-size: 0;
  border-radius: 0 0 90px 90px;
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
}

.img_wrapper-radiusTop img,
.img_wrapper-radiusbottom img,
.l-closing__bottom-img img {
  width: 100% !important;
  height: auto !important;
  object-fit: unset !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: top;
}

/* 先祖返り防止：aspect-ratio 2/1 を確実に無効化 */
.img_wrapper-radiusTop,
.img_wrapper-radiusbottom,
.l-closing__bottom-img {
  aspect-ratio: unset !important;
  height: auto !important;
}

/* 角丸写真セクション：端まで・上下の body 黄色を出さない */
section.l-flow,
section.l-responsibility,
section.l-closing,
section.l-news {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}

/* l-news は section の左右余白を 0 にしているため、内側で 20px を確保（流れセクションと同型） */
section.l-news .l-section-inner {
  padding-inline: var(--section-padding-x);
  box-sizing: border-box;
}

section.l-news-page__archive .l-section-inner {
  padding-inline: var(--section-padding-x);
  box-sizing: border-box;
}

/* main 内のマージン崩壊で body 黄色が見えないよう各セクションを独立 */
main > section {
  display: flow-root;
}

/* ==================================================
  黄色すき間：強制除去（実画像1440×692 と 2:1 の差）
  SP: 100vw×0.019444 ≒ 7.6px（390px幅）→ 見た目はやや広いため -16px
  PC: 700×0.019444 ≒ 13.6px → -14px
================================================== */
:root {
  --seam-pull-sp: -16px;
  --seam-pull-pc: -14px;
  /* そのほかのご案内（共通フッター）直上：フォロー等の直後はやや広く見えるため多めに食い込む */
  --seam-pull-more-sp: -20px;
  --seam-pull-more-pc: -16px;
}

.img_wrapper-radiusTop,
.img_wrapper-radiusbottom,
.l-closing__bottom-img {
  margin-bottom: var(--seam-pull-sp) !important;
}

section.l-cats + section.l-flow,
section.l-flow + section.l-responsibility,
section.l-news + section.l-closing,
section.l-closing + section.l-sitemap,
section.l-cafe-page__more + section.l-sitemap {
  margin-top: var(--seam-pull-sp) !important;
}

/* 共通フッター「そのほかのご案内」直上（活動理念のフォロー、猫詳細の責任 等） */
main > section + section.l-cafe-page__more,
section.l-section-arc + section.l-cafe-page__more,
section.l-responsibility + section.l-cafe-page__more,
section.l-responsibility + section.bg-lightBlue,
section.l-news-page__archive + section.l-cafe-page__more,
section.bg-gray + section.l-cafe-page__more {
  margin-top: var(--seam-pull-more-sp) !important;
}

.l-mission-page .l-content-share,
.l-support-page .l-content-share {
  margin-bottom: 0;
}

@media screen and (min-width: 700px) {
  .img_wrapper-radiusTop,
  .img_wrapper-radiusbottom,
  .l-closing__bottom-img {
    margin-bottom: var(--seam-pull-pc) !important;
  }

  section.l-cats + section.l-flow,
  section.l-flow + section.l-responsibility,
  section.l-news + section.l-closing,
  section.l-closing + section.l-sitemap,
  section.l-cafe-page__more + section.l-sitemap {
    margin-top: var(--seam-pull-pc) !important;
  }

  main > section + section.l-cafe-page__more,
  section.l-section-arc + section.l-cafe-page__more,
  section.l-responsibility + section.l-cafe-page__more,
  section.l-responsibility + section.bg-lightBlue,
  section.l-news-page__archive + section.l-cafe-page__more,
  section.bg-gray + section.l-cafe-page__more {
    margin-top: var(--seam-pull-more-pc) !important;
  }
}

  
/* 【重要】改行タグをPC版（1000px〜）のみ有効にする */
.br-pc {
    display: none;
}

@media screen and (min-width: 700px) {
    p {
        font-size: 18px;
        width: 400px;
    }
    h2 {
        font-size: 36px;
        margin-bottom: 60px;
    }

    h1.js-anim-h2,
    h2.js-anim-h2 {
        font-size: 36px;
        margin-bottom: 60px;
    }
    h3 {
        font-size: 24px;
        margin-bottom: 30px;
    }
    .c-sub-catch {
        font-size: 24px;
        padding-top: 120px;
    }
    .c-note {
        font-size: 16px;
        width: 400px;
    }
    .padding_B-80to120 {
        padding-bottom: 120px;
    }

    .padding_T-80to120 {
        padding-top: 120px;
    }
    .margin_B-60to90 {
        margin-bottom: 90px;
    }
    .margin_B-40to60 {
        margin-bottom: 60px;
    }
    .margin_B-20to30 {
        margin-bottom: 30px ;
    }
    .padding_B-0 {
        padding-bottom: 0;
    }
    .padding_T-20to30 {
        padding-top: 30px;
    }
    .img_wrapper-radiusTop {
        border-radius: 145px 145px 0 0;
    }
    .img_wrapper-radiusbottom {
        border-radius: 0 0 145px 145px;
    }
}

@media screen and (min-width: 1000px) {
    .br-pc {
        display: block;
    }
}

/* ==================================================
  共通コンポーネント（テキスト装飾）
================================================== */
/* 太字＋黄色マーカー */
.c-marker {
    display: inline;
    font-weight: var(--fw-bold); /* 変数を使って太字にする */
    
    background-image: var(--marker-default);
    background-repeat: no-repeat;

    /* 改行された際、各行にマーカーを綺麗に分割して引く魔法の記述 */
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* ==================================================
  共通コンポーネント（チェックボックス付きリスト）
================================================== */
.c-list-check {
    /* 標準の黒丸を消す */
    list-style-type: none;
    font-size: 16px;
    padding-left: 0;
    width: 100%;
    max-width: 100%;
    margin: 0 auto 30px ;
}

.c-list-check li {
    position: relative; /* 疑似要素の基準位置とするため */
    padding-left: 1.6em; /* チェックボックスを置くための左側の余白 */
    margin-bottom: 0.6em;
    line-height: 1.6;
    text-align: left;
}

/* 最後の項目の下の余白は消す */
.c-list-check li:last-child {
    margin-bottom: 0;
}

/* ::before疑似要素でチェックボックスのアイコンを表示 */
.c-list-check li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.25em; /* テキストの高さに合わせて微調整 */
    width: 1.2em;
    height: 1.2em;

    /* ご希望の「白抜き枠線タイプ」のSVGデータ */
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2.5" fill="none" stroke="%23213548" stroke-width="3"/><path d="M7 12.5l3.5 3.5l7.5-8" fill="none" stroke="%23213548" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    
    background-size: contain;
    background-repeat: no-repeat;
}

@media screen and (min-width: 700px) {
    .c-list-check {
        font-size: 24px;
        max-width: var(--content-max);
        margin: 0 auto 40px ;
    }
}

/* ==================================================
  共通パーツ：リンクボタン (.c-btn-link)
================================================== */

/* 1. ボタン本体の基本設定 */
.c-btn-link {
    display: flex;
    align-items: center;
    justify-content: space-between;    
    width: 240px;
    /* OSの文字拡大時にテキストがボタンから溢れるのを防ぐため、min-heightに変更 */
    min-height: 66px; 
    font-size: 14px;
    font-weight: 500;
    padding: 1.5em;
    color: var(--color-text);
    text-decoration: none;
    background-color: transparent;
    border: 2px solid var(--color-text);
    border-radius: 8px 25px 25px 8px; 
    margin-inline: auto;
    
    /* アニメーションのトランジション設定（ホバー・アクティブ用） */
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
                background-color 0.3s ease, 
                opacity 0.2s ease;
}

/* 2. アロー（矢印）の基本設定 */
.c-btn-link::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 12px;
    background-color: currentColor;
    
    /* SVGマスク（形状は元のまま完全維持） */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cpolyline points='14 6 20 12 14 18'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cpolyline points='14 6 20 12 14 18'/%3E%3C/svg%3E");
    
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;

    /* 矢印が動くためのトランジション */
    transition: transform 0.3s ease;
}

/* 3. スマホ・PC共通のタップ（クリック）時のアクション */
.c-btn-link:active {
    transform: scale(0.96); /* 物理ボタンのように沈み込む */
    opacity: 0.8;
}

.c-btn-link:active::after {
    transform: translateX(0); /* 押し込んだ瞬間は矢印の動きを止める */
}

/* 4. PC（マウス操作）ホバー時のアクション */
@media (hover: hover) {
    .c-btn-link:hover {
        background-color: rgba(33, 53, 72, 0.08); /* 濃紺の透明度8% */
    }
    
    .c-btn-link:hover::after {
        transform: translateX(6px); /* 矢印が右にスッと動く */
    }
}

/* ==================================================
  リンクボタン：白抜きバリエーション (.c-btn-link--white)
================================================== */
.c-btn-link.c-btn-link--white {
    color: var(--color-white);
    border-color: var(--color-white);
}

@media (hover: hover) {
    .c-btn-link.c-btn-link--white:hover {
        background-color: rgba(255, 255, 255, 0.15); /* 白の透明度15% */
    }
}

/* ==================================================
  タブレット以上（700px〜）のサイズ追従
================================================== */
@media screen and (min-width: 700px) {
    .c-btn-link {
        width: 360px;
        min-height: 99px;
        font-size: 21px;
        border-radius: 12px 37.5px 37.5px 12px;
    }
    
    .c-btn-link::after {
        width: 24px;
        height: 24px;
        margin-left: 18px;
    }
}

/* ==================================================
    4. ヘッダー (共通・ロゴ・ハンバーガー)
================================================== */
.header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    pointer-events: none;
}

.header__nav-toggle {
    display: none;
}

.header__inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* --------------------------------------------------
   ロゴエリア
-------------------------------------------------- */
.header__logo-area {
    background-color: var(--color-white);
    border-radius: 0 0 9999px 0;
    height: var(--height-header-sp);
    padding: 0 30px 0 10px;
    display: flex;
    align-items: center;
    pointer-events: auto;
}

.header__logo-link {
    display: flex;
    align-items: center;
    gap: 5px;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

.header__logo-img-wrap {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #f0f0f0;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

.header__logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.header__logo-en {
    font-size: 11px;
    font-weight: var(--fw-normal);
    line-height: 1.1;
    margin-bottom: 2px;
}

.header__logo-ja {
    font-size: 15px;
    font-weight: var(--fw-bold);
    line-height: 1;
}

.header__logo-link:active {
    transform: scale(0.95);
    opacity: 0.8;
}

@media (hover: hover) {
    .header__logo-link:hover .header__logo-img-wrap {
        transform: translateY(-2px) scale(1.05);
    }
    .header__logo-link:hover .header__logo-text {
        opacity: 0.8;
    }
}

@media screen and (min-width: 700px) {
    .header__logo-area {
        height: var(--height-header-pc);
        padding: 0 60px 0 20px;
    }
    .header__logo-img-wrap {
        width: 80px;
        height: 80px;
    }
    .header__logo-en {
        font-size: 20px;
    }
    .header__logo-ja {
        font-size: 30px;
    }
}

/* --------------------------------------------------
   ハンバーガーボタン
-------------------------------------------------- */
.header__nav-area {
    pointer-events: auto;
}

.header__hamburger {
    background-color: var(--color-white);
    border-radius: 0 0 0 9999px;
    height: var(--height-header-sp);
    padding: 0 10px 0 30px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    position: relative;
    z-index: 1001;
    transition: background-color 0.3s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.header__hamburger-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.header__hamburger-en {
    font-size: 11px;
    font-weight: var(--fw-normal);
    line-height: 1.1;
    margin-bottom: 2px;
}

.header__hamburger-ja {
    font-size: 15px;
    font-weight: var(--fw-bold);
    line-height: 1.1;
}

.header__hamburger-lines {
    width: 24px;
    height: 16px;
    position: relative;
}

.header__hamburger-line {
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: var(--color-text);
    border-radius: 2px;
    transition: transform 0.3s ease, width 0.3s ease, opacity 0.3s ease;
}

.header__hamburger-line:nth-of-type(1) { top: 0; }
.header__hamburger-line:nth-of-type(2) { top: 7px; }
.header__hamburger-line:nth-of-type(3) { bottom: 0; }

.header__hamburger:active {
    transform: scale(0.92);
    background-color: rgba(0, 0, 0, 0.05);
}

@media (hover: hover) {
    .header__hamburger:hover {
        background-color: var(--color-bg-gray);
    }
    .header__hamburger:hover .header__hamburger-line:nth-of-type(2) {
        width: 80%;
    }
    .header__nav-toggle:checked ~ .header__inner .header__hamburger:hover .header__hamburger-line:nth-of-type(2) {
        width: 100%;
    }
}

.header__nav-toggle:checked ~ .header__inner .header__hamburger-line:nth-of-type(1) {
    transform: translateY(7px) rotate(45deg);
}
.header__nav-toggle:checked ~ .header__inner .header__hamburger-line:nth-of-type(2) {
    opacity: 0;
}
.header__nav-toggle:checked ~ .header__inner .header__hamburger-line:nth-of-type(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media screen and (min-width: 700px) {
    .header__hamburger {
        height: var(--height-header-pc);
        padding: 0 30px 0 60px;
    }
    .header__hamburger-en {
        font-size: 20px;
    }
    .header__hamburger-ja {
        font-size: 30px;
    }
    .header__hamburger-lines {
        width: 40px;
        height: 28px;
    }
    .header__hamburger-line {
        height: 4px;
    }
    .header__hamburger-line:nth-of-type(2) {
        top: 12px;
    }
}

@media screen and (min-width: 1000px) {
    .header__hamburger {
        display: none;
    }
}

/* ==================================================
    5. ナビゲーション (SPドロワー & PC横並び)
================================================== */
/* --------------------------------------------------
   SP ドロワーナビゲーション (デフォルト)
-------------------------------------------------- */
.header__nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 240px;
    height: 100svh;
    background-color: var(--color-white);
    transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    padding-top: var(--height-header-sp);
    overflow-y: auto;
    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.08);
}

.header__nav-toggle:checked ~ .header__inner .header__nav {
    right: 0;
}

/* ドロワー内：メインメニュー */
.header__nav-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    background-color: var(--color-main);
}

.header__nav-link {
    display: block;
    padding: 18px 60px 18px 20px;
    font-size: 16px;
    font-weight: var(--fw-bold);
    line-height: 1.4;
    position: relative;
    transition: background-color 0.2s ease, padding-left 0.3s ease, opacity 0.2s ease;
}

.header__nav-link::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23213548' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='20' y2='12'%3E%3C/line%3E%3Cpolyline points='13 5 20 12 13 19'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.9;
    transition: transform 0.3s ease;
}

/* ドロワー内：サブメニュー */
.header__sub-nav {
    background-color: var(--color-bg-yellow);
    padding: 5px 0;
}

.header__sub-link {
    display: block;
    padding: 12px 60px 12px 35px;
    font-size: 14px;
    line-height: 1.4;
    position: relative;
    transition: background-color 0.2s ease, padding-left 0.3s ease, opacity 0.2s ease;
}

.header__sub-link::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23213548" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3v10a2 2 0 0 0 2 2h10"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.6;
}

.header__sub-link::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23213548' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='20' y2='12'%3E%3C/line%3E%3Cpolyline points='13 5 20 12 13 19'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.6;
    transition: transform 0.3s ease;
}

/* ドロワー内のホバー＆アクティブ */
.header__nav-link:active,
.header__sub-link:active {
    opacity: 0.6; 
}

@media (hover: hover) {
    .header__nav-link:hover {
        background-color: rgba(255, 255, 255, 0.4);
        padding-left: 25px;
    }
    .header__nav-link:hover::after {
        transform: translateY(-50%) translateX(4px);
    }
    .header__sub-link:hover {
        background-color: rgba(255, 255, 255, 0.5);
        padding-left: 40px;
    }
    .header__sub-link:hover::after {
        transform: translateY(-50%) translateX(4px);
    }
}

@media screen and (min-width: 700px) {
    .header__nav {
        padding-top: var(--height-header-pc);
        width: 450px;
    }
    .header__nav-link {
        font-size: 24px;
        padding: 25px 80px 25px 35px;
    }
    .header__sub-link {
        font-size: 18px;
        padding: 15px 80px 15px 55px;
    }
    .header__nav-link::after {
        width: 32px;
        height: 22px;
        right: 35px;
    }
    .header__sub-link::after {
        width: 24px;
        height: 18px;
        right: 35px;
    }
    .header__sub-link::before {
        left: 35px;
        width: 10px;
    }
}

/* --------------------------------------------------
   PC 横並びナビゲーション (1000px〜)
   ※SPドロワーのスタイルを上書きして横並びに変更
-------------------------------------------------- */
/* ==================================================
    7. PC横並びナビゲーション (1000px〜)
================================================== */
@media screen and (min-width: 1000px) {
    .header__hamburger {
        display: none;
    }

    .header__nav {
        position: static;
        width: auto;
        height: var(--height-header-pc);
        background-color: var(--color-white);
        border-radius: 0 0 0 9999px;
        padding: 0 50px 0 70px;
        display: flex;
        align-items: center;
        box-shadow: none;
        overflow: visible;
    }

    .header__nav-list {
        display: flex;
        gap: 40px;
        align-items: center;
    }

    .header__nav-item {
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
        background-color: transparent;
    }

    /* --------------------------------------------------
       メインリンク (親)
    -------------------------------------------------- */
    .header__nav-link {
        padding: 0;
        font-size: 15px;
        line-height: 1.4;
        text-align: center;
        position: relative;
        color: var(--color-text);
        transition: color 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    }

    /* SPの矢印を消去 */
    .header__nav-link::after {
        content: none !important;
        display: none !important;
    }

    /* ホバー時の黄色マーカー準備 */
    .header__nav-link::before {
        content: "";
        position: absolute;
        bottom: -4px;
        left: 0;
        width: 0;
        height: 6px;
        background-color: var(--color-main);
        border-radius: 3px;
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: -1;
        opacity: 0.6;
    }

    /* --------------------------------------------------
       ドロップダウンメニュー (子)
    -------------------------------------------------- */
    .header__sub-nav {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 260px;
        background-color: var(--color-bg-yellow);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
        border-radius: 12px;
        padding: 15px 0;
        opacity: 0;
        visibility: hidden;
        transition: 0.25s ease;
        z-index: 2000;
    }

    /* 親ホバーで子を表示 */
    .header__nav-item:hover .header__sub-nav {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(10px);
    }

    /* サブリンク */
    .header__sub-link {
        display: block;
        /* L字アイコンと文字が被らないよう padding-left を確保 */
        padding: 12px 45px 12px 45px; 
        font-size: 14px;
        text-align: left;
        line-height: 1.5;
        background-color: transparent;
        transition: background-color 0.2s ease, padding-left 0.3s ease;
        position: relative;
    }

    /* サブリンク：L字アイコン */
    .header__sub-link::before {
        content: "";
        position: absolute;
        /* アイコンの左位置を調整 */
        left: 20px; 
        top: 50%;
        transform: translateY(-50%);
        width: 14px;
        height: 14px;
        background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23213548" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3v10a2 2 0 0 0 2 2h10"/></svg>');
        background-size: contain;
        background-repeat: no-repeat;
        opacity: 0.6;
    }

    /* サブリンク：右矢印 */
    .header__sub-link::after {
        content: "";
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        width: 18px;
        height: 12px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23213548' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='20' y2='12'%3E%3C/line%3E%3Cpolyline points='13 5 20 12 13 19'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        opacity: 0.6;
        transition: transform 0.3s ease;
    }

    /* --------------------------------------------------
       PC専用：ホバーアクション設定
    -------------------------------------------------- */
    @media (hover: hover) {
        /* ロゴホバー */
        .header__logo-link:hover .header__logo-img-wrap {
            transform: translateY(-2px) scale(1.05);
        }
        .header__logo-link:hover .header__logo-text {
            opacity: 0.8;
        }
        
        /* ハンバーガーホバー */
        .header__hamburger:hover {
            background-color: var(--color-bg-gray);
        }
        .header__hamburger:hover .header__hamburger-line:nth-of-type(2) {
            width: 80%;
        }
        .header__nav-toggle:checked ~ .header__inner .header__hamburger:hover .header__hamburger-line:nth-of-type(2) {
            width: 100%;
        }

        /* 親ナビホバー時の維持（案1：浮上＋黄色マーカー） */
        .header__nav-item:hover .header__nav-link {
            background-color: transparent;
            padding-left: 0;
            transform: translateY(-2px);
            opacity: 0.8;
        }
        .header__nav-item:hover .header__nav-link::before {
            width: 100%;
        }

        /* サブリンクホバー */
        .header__sub-link:hover {
            background-color: rgba(255, 255, 255, 0.5);
            /* ホバー時に右へスライド */
            padding-left: 50px; 
        }
        .header__sub-link:hover::after {
            transform: translateY(-50%) translateX(4px);
        }
    }
}

/* ==================================================
    6. ヒーロービュー
    ※ナビゲーションのスタイルに干渉されないよう後ろに配置
================================================== */
@keyframes fadeDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero {
    width: 100%;
    text-align: center;
    overflow: hidden;
}

.hero__top-text-sp {
    padding-top: 0;
    margin-bottom: 20px;
}

.hero__top-sub {
    display: block;
    font-size: 16px;
    font-weight: var(--fw-normal);
    letter-spacing: 0.1em;
    margin-bottom: 5px;
}

.hero__top-main {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    text-align: center;
    font-size: 32px;
    font-weight: var(--fw-bold);
    color: var(--color-white);
    line-height: 1;
    letter-spacing: 0.2em;
    margin: 0;
}

.hero__top-main::before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -1;
    -webkit-text-stroke: 4px var(--color-text);
}

.hero__inner {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
}

/* 375px前後のスマホ：イラストと縦書きの間隔を少し広げる */
@media screen and (min-width: 375px) and (max-width: 699px) {
    .hero__inner {
        gap: 20px;
    }
}

.hero__vertical-text {
    writing-mode: vertical-rl;
    font-size: 16px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.4em;
    line-height: 1.4;
    padding-top: 20px;
    opacity: 0;
    animation-fill-mode: forwards;
    animation-duration: 1s;
}

.hero__vertical-text--right {
    animation-name: fadeDown;
    animation-delay: 0.2s;
}

.hero__vertical-text--left {
    animation-name: fadeUp;
    animation-delay: 0.8s;
}

.hero__image-wrap {
    width: 224px;
    height: 388px;
    border-radius: 120px 120px 0 0;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    margin-bottom: 20px;
}

.hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__overlay-pc {
    display: none;
}

@media screen and (min-width: 700px) {
    .hero__top-text-sp {
        display: none !important;
    }
    .hero__inner {
        padding-top: 0;
        gap: 50px;
        margin-bottom: 60px;
    }
    .hero__vertical-text {
        font-size: 24px;
        padding-top: 40px;
    }
    .hero__image-wrap {
        width: 560px;
        height: 720px;
        border-radius: 280px 280px 0 0;
    }
    .hero__overlay-pc {
        display: block;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        text-align: center;
        pointer-events: none;
    }
    .hero__overlay-sub {
        position: relative;
        z-index: 1;
        display: inline-block;
        font-size: 32px;
        font-weight: var(--fw-normal);
        letter-spacing: 0.1em;
        color: var(--color-text);
        margin-bottom: 15px;
    }
    .hero__overlay-sub::before {
        content: attr(data-text);
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        z-index: -1;
        -webkit-text-stroke: 3px var(--color-white);
    }
    .hero__overlay-main {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 100%;
        text-align: center;
        font-size: 64px;
        font-weight: var(--fw-bold);
        color: var(--color-white);
        letter-spacing: 0.2em;
        line-height: 1;
        padding-top: 0;
        margin: 0;
    }
    .hero__overlay-main::before {
        content: attr(data-text);
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        z-index: -1;
        -webkit-text-stroke: 8px var(--color-text);
    }
}

/* ==================================================
  導入文 (.l-intro)
================================================== */

/* 外枠：背景色と、円のはみ出しをカットする役割 */
.l-section-container {
    overflow: hidden; 
  }
  
/* 大枠のセクション本体（上部を半円に切り抜く） */
.l-section-arc {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background-color: var(--color-white);
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50% 50% 0 0 / 50vw 50vw 0 0;
}

.l-section-arc__inner {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
  
/* 下層ページ：ファーストビュー上余白は body の --page-top-gap で制御 */
.l-section-arc--page {
    margin-top: 0;
}

.l-section-arc--page .c-sub-catch {
    padding-top: 0;
}

  /* タブレット・PCでの幅固定 */
  @media (min-width: 700px) {
    .l-section-arc {
        width: 700px;
        margin-left: auto;
        margin-right: auto;
        border-radius: 50% 50% 0 0 / 350px 350px 0 0;
        margin-top: -240px;
        position: relative;
        z-index: 10;
    }

    .l-section-arc--page {
        margin-top: 0;
    }
}
  
.l-intro__visual {
     display: flex; justify-content: center; align-items: center; gap: 10px; margin: 40px 0; }
.l-intro__circle-unit {
     display: flex; flex-direction: column; align-items: center; gap: 4px; }
.l-intro__circle-label {
     font-size: 13px; font-weight: var(--fw-bold); text-align: center; }

.m-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-main);
    flex-shrink: 0;
}
.m-circle__text {
    font-size: 12px;
    text-align: center;
    line-height: 1.4;
    padding-top: 8px;
}

.m-circle--video {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--color-bg-placeholder);
}
.m-circle__video-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
}
.m-circle--video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

     @media (min-width: 700px) {
        .l-intro__visual {
            width: var(--content-max);
            max-width: 100%;
            margin: 60px auto;
            gap: 0;
            justify-content: space-between;
        }

        /* シェルター／カフェ：ラベル・黄丸・中の文字を1.5倍（中央動画は対象外） */
        .l-intro__circle-unit {
            gap: 6px;
        }

        .l-intro__circle-label {
            font-size: 19.5px;
        }

        .m-circle--sub {
            width: 108px;
            height: 108px;
        }

        .l-intro__circle-unit .m-circle__text {
            font-size: 18px;
            padding-top: 12px;
        }
        
        .m-circle--video {
            width: 210px; height: 210px;
        }
    }

/* ==================================================
  里親募集中の猫 (.l-cats)
================================================== */

/* --- リストレイアウト --- */
.l-cats__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 横余白は固定16pxのままでも、中身が可変なので320pxでも破綻しません */
  gap: 48px 16px; 
}

/* --- リンクとホバーアクション --- */
.l-cats__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 共通設定の a タグにある color と text-decoration は重複のため削除 */
  transition: transform 0.3s ease;
}

/* PCホバー時：拡大（スマホでタップ時にhoverが残り続けるバグを防止） */
@media (hover: hover) {
  .l-cats__link:hover {
      transform: scale(1.05);
  }
}

/* スマホタップ時：沈み込み */
.l-cats__link:active {
  transform: scale(0.95);
}

/* --- 画像（流動的・正円マスク） --- */
.l-cats__img-wrap {
  width: 100%;          /* Gridの幅(1fr)に合わせて柔軟に伸縮 */
  max-width: 140px;     /* ただしデザイン上限の140pxでピタッと止める */
  aspect-ratio: 1 / 1;  /* height固定を廃止。これで常に完璧な正方形を維持 */
  border-radius: 50%;
  overflow: hidden;
  margin: 0 0 8px;   
  background-color: rgba(255, 255, 255, 0.1);
}

.l-cats__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- 名前のマーカー装飾 --- */
.l-cats__name {
  font-size: 16px;
  font-weight: var(--fw-bold);
  margin: 0;
  text-align: center;
  overflow-wrap: anywhere; /* 異常拡大時に枠を突き破るのを防ぐ最終保険 */
}

.l-cats__name span {
  display: inline;
  background-image: var(--marker-name);
  background-repeat: no-repeat;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ==================================================
   タブレット〜PC対応（700px〜）
================================================== */
@media screen and (min-width: 700px) {
    .l-cats {
        padding-top: 100px;
        padding-bottom: 120px;
    }

    /* セクション側の余白と重複しないよう内側のユーティリティを解除 */
    .l-cats .c-sub-catch {
        padding-top: 0;
    }

    .l-cats .padding_B-80to120 {
        padding-bottom: 0;
    }

    .l-cats__list {
        width: 480px;
        max-width: 100%;
        margin: 0 auto 90px;
        padding: 0;
        gap: 60px 24px;
        box-sizing: border-box;
    }

    .l-cats__item {
        min-width: 0;
    }

    .l-cats__img-wrap {
        max-width: 100%;
        margin-bottom: 20px;
    }

    .l-cats__name {
        font-size: 20px;
        white-space: nowrap;
        overflow-wrap: normal;
    }
}

/* ==============================================
   保護猫カード：スタッガード（時間差）アニメーション
   ============================================== */

/* カードの初期状態（透明 ＋ 下に30px配置） */
.js-stagger-card {
    opacity: 0;
    transform: translateY(30px);
    will-change: opacity, transform;
}

/* カードが表示された時の状態 */
.js-stagger-card.is-animated {
    opacity: 1;
    transform: translateY(0);
}

/* ==================================================
  里親応募の流れ (.l-flow) 
================================================== */
.l-flow {
    padding: 0;
    background-color: var(--color-bg-blue);
    text-align: center;
  }

/* 上部画像は端まで・説明文は左右20px（section padding:0 の打ち消し） */
.l-flow .c-content-max {
    padding-inline: var(--section-padding-x);
    box-sizing: border-box;
  }
  
  .l-flow__slider-wrap {
    position: relative;
    width: 100%;
    max-width: 650px; /* 利用者の声のスマホ版 max-width と共通化 */
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
  }
  
  .swiper-flow {
    width: 100%; 
    margin: 0 auto;
    overflow: hidden; 
    padding-bottom: 40px;
  }
  
  .l-flow__item {
    display: flex;
    flex-direction: column;
    height: auto; 
    padding: 0 40px; /* ここで左右に余白を作り、矢印のスペースを確保する */
    box-sizing: border-box;
  }
  
  /* カードの装飾は変更なし */
  .l-flow__card {
    position: relative;
    width: 100%;
    background-color: var(--color-white);
    border: 6px solid var(--color-main); 
    border-radius: 140px 140px 0 0;
    padding: 16px;
    height: auto; 
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }
  
  /* テキスト・画像要素の装飾（変更なし） */
  .l-flow__step-num { font-size: 72px; font-weight: var(--fw-bold); color: var(--color-main); line-height: 1; margin-bottom: 10px; }
  .l-flow__step-title { font-size: 20px; font-weight: var(--fw-bold); letter-spacing: 0.1em; margin-bottom: 20px; color: var(--color-text); }
  .l-flow__visual {
     width: 100%; 
     height: auto; 
    }
  .l-flow__visual img { border-radius: 16px; object-fit: cover; }
  .l-flow__desc h4 { margin-bottom: 10px; font-size: 16px; letter-spacing: 0.1em; }
  .l-flow__desc h4 span { background-image: var(--marker-small); }
  .l-flow__desc p {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
  }
  
  .l-flow__page {
    margin-top: auto;
    padding-top: 20px;
    font-size: 14px;
    font-weight: var(--fw-bold);
    color: var(--color-text);
  }
  
  /* ==================================================
    タブレット〜PC対応（700px〜）
  ================================================== */
  @media screen and (min-width: 700px) {
    .l-flow__slider-wrap { 
      max-width: 560px; /* 利用者の声と一致 */
    }
    
    .l-flow__item { 
      width: 440px; /* 利用者の声と一致 */
      margin: 0 auto; 
      padding: 0; /* paddingを解除する動きも一致 */
    }
    
    /* カード内部の巨大化装飾（変更なし） */
    .l-flow__card { border-radius: 210px 210px 0 0; border-width: 12px; padding: 45px 30px; }
    .l-flow__step-num { font-size: 108px; }
    .l-flow__step-title { font-size: 30px; margin-bottom: 30px; }
    .l-flow__desc h4 { font-size: 24px; }
    .l-flow__desc p { font-size: 18px; }
    .l-flow__page { font-size: 24px; }
  }

/* ==================================================
  里親になる、その責任 (.l-responsibility)
================================================== */

.l-responsibility {
    /* 1. はみ出したアーチの左右の線をここでスパッと隠す */
    overflow: hidden;
}

@media screen and (min-width: 700px) {
    /* 枠線を外側描きにした分、タブレット以上では切らない */
    .l-responsibility {
        overflow: visible;
    }
}

.l-responsibility__img {
    width: 200px;
    max-width: 100%;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 40px;
}

.l-responsibility__img img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

/* アーチ内：SPは最大300px・狭い端末は画面余白内で縮む（はみ出し防止） */
.l-responsibility .l-section-common__arc > .c-list-check,
.l-responsibility .l-section-common__arc > .c-note {
    width: 100%;
    max-width: min(300px, calc(100vw - 2 * var(--section-padding-x)));
    margin-inline: auto;
    padding-right: 0;
    box-sizing: border-box;
}

/* ※注釈：左インデントのみ（右は0でリストと幅300pxを揃える） */
.l-responsibility .l-section-common__arc > .c-note {
    padding-left: 1em;
    text-indent: -1em;
}

@media screen and (min-width: 700px) {
    .l-responsibility .l-section-common__arc > .c-list-check,
    .l-responsibility .l-section-common__arc > .c-note {
        max-width: var(--content-max);
    }

    .l-responsibility__img {
        width: 300px;
        border-radius: 50% ;
        margin: 0 auto 60px;
    }
}

/* ==================================================
  FAQアコーディオン
================================================== */
/* リスト全体の幅と一番上の線 */
.c-faq-list {
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
  }
  
  /* 各項目の下側の線 */
  .c-accordion {
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  }
  
  /* --- サマリー（質問部分） --- */
  .c-accordion__summary {
    display: flex;
    align-items: center; /* ズレを直し、全てを罫線の中央に揃える */
    padding: 20px 0;
    cursor: pointer;
    list-style: none;
  }
  .c-accordion__summary::-webkit-details-marker {
    display: none;
  }
  
  /* --- QとAのアイコン --- */
  .c-accordion__q-icon,
  .c-accordion__a-icon {
    color: var(--color-main);
    font-weight: var(--fw-normal); /* 500 */
    font-size: 20px;
    line-height: 1; /* 余計な上下余白を消滅させる */
    
    width: 24px; 
    flex-shrink: 0; 
    text-align: center; 
    margin-right: 16px;
  }
  
  /* --- テキスト部分 --- */
  .c-accordion__title,
  .c-accordion__text {
    flex: 1; 
    font-weight: var(--fw-normal); /* 500 */
    font-size: 15px;
    line-height: 1.6;
  }
  .c-accordion__title {
    padding-right: 20px;
  }
  
  /* --- ＋/－ アニメーションアイコン --- */
  .c-accordion__icon {
    position: relative;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
  }
  .c-accordion__icon::before,
  .c-accordion__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-white);
    transition: transform 0.3s ease;
  }
  .c-accordion__icon::after {
    transform: translateY(-50%) rotate(90deg);
  }
  .c-accordion__icon::before {
    transform: translateY(-50%);
  }
  .c-accordion.is-open .c-accordion__icon::after {
    transform: translateY(-50%) rotate(0deg);
  }
  
  /* --- コンテンツ（回答部分） --- */
  .c-accordion__content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
  }
  .c-accordion.is-open .c-accordion__content {
    grid-template-rows: 1fr;
  }
  .c-accordion__content-inner {
    overflow: hidden;
  }
  .c-accordion__box {
    display: flex;
    align-items: flex-start;
    padding: 0 0 20px 0;
    border-top: 1px dotted rgba(255, 255, 255, 0.4);
    padding-top: 20px;
  }
  
  /* --- タブレット〜PCのサイズ・位置調整 --- */
  @media screen and (min-width: 700px) {
    
    .c-accordion__q-icon,
    .c-accordion__a-icon {
      font-size: 30px;
      width: 40px; 
      margin-right: 20px;
    }
    
    .c-accordion__title,
    .c-accordion__text {
      font-size: 18px;
    }
  }

/* ==================================================
  ご利用者さまの声（Testimonials）
================================================== */
.swiper-testimonials {
    position: relative;
    width: 100%;
    max-width: 650px;
    margin: 0 auto;
    padding-bottom: 50px;
    box-sizing: border-box;
    overflow: hidden;
  }

/* padding_LR-0 セクション：見出しだけ左右余白を確保 */
.l-testimonials__head {
    padding-inline: var(--section-padding-x);
    box-sizing: border-box;
  }
  
  /* --- カード全体 --- */
  .l-testimonial {
    display: flex;
    flex-direction: column;
    padding: 0 40px; 
  }
  
  /* --- 吹き出し --- */
  .l-testimonial__bubble {
    position: relative;
    background-color: var(--color-white);
    border: 6px solid var(--color-main); 
    border-radius: 32px; 
    padding: 16px; 
    margin-bottom: 60px; 
    text-align: center; 
    z-index: 1; 
  }
  
  /* 吹き出しの「しっぽ」 */
  .l-testimonial__bubble::after {
    content: "";
    position: absolute;
    bottom: -70px; 
    /* スマホ写真(120px)の中央に合わせるため 80px に調整 */
    left: 80px; 
    border-top: 70px solid var(--color-main);
    border-right: 50px solid transparent;
  }
  
  /* ダブルクォーテーションのアイコン */
  .l-testimonial__quote {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 60px; 
    height: 60px;
    fill: var(--color-main);
    opacity: 0.4; 
    z-index: 0; 
  }
  
  /* 見出し */
  .l-testimonial__catch {
    font-size: 18px;
    font-weight: var(--fw-bold);
    line-height: 1.8;
    margin-bottom: 25px;
    position: relative;
    z-index: 1; 
  }
  
  /* 本文 */
  .l-testimonial__text {
    font-size: 14px;
    line-height: 1.8;
    text-align: left; 
    position: relative;
    z-index: 1; 
  }
  
  /* --- プロフィール部分 --- */
  .l-testimonial__profile {
    display: flex;
    align-items: center;
  }
  
  .l-testimonial__image {
    width: 120px; 
    height: 120px;
    border-radius: 50%; 
    object-fit: cover; 
    margin-right: 15px; 
  }
  
  .l-testimonial__history {
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 8px;
  }
  .l-testimonial__name {
    font-size: 18px; 
    font-weight: var(--fw-bold);
  }
  
  /* --- Swiper カスタムUI（ページネーション） --- */
  .testi-pagination {
    bottom: 0 !important;
    font-size: 16px; 
    font-weight: var(--fw-bold);
    letter-spacing: 0.1em;
    color: var(--color-text);
  }
  
  /* ==================================================
    Swiper 共通の矢印カスタマイズ（声・流れ 共通）
  ================================================== */
  /* ① ベースの色指定（どちらも濃紺） */
  .testi-prev, .testi-next,
  .flow-prev, .flow-next {
    color: var(--color-text) !important;
  }
  
  /* ② 矢印の大きさ・太さの指定（スマホ用） */
  .testi-prev::after, .testi-next::after,
  .flow-prev::after, .flow-next::after {
    font-size: 24px !important;
    font-weight: 900 !important;
    -webkit-text-stroke: 1px var(--color-text); /* 1pxの縁取りを足してさらに太く */
  }
  
  /* ③ それぞれの垂直位置（高さ）の微調整 */
  .testi-prev,
  .testi-next {
    top: 45% !important; 
  }
  .flow-prev,
  .flow-next {
    top: 50% !important; 
  }
  
  /* ==================================================
    タブレット〜PCのレスポンシブ対応
  ================================================== */
  @media screen and (min-width: 700px) {
    .swiper-testimonials {
      max-width: 560px; 
    }
  
    .l-testimonial {
      width: 440px;
      margin: 0 auto;
      padding: 0; 
    }
  
    .l-testimonial__bubble {
      padding: 40px 30px;
      border-radius: 48px; 
    }
  
    /* しっぽの位置をタブレット写真(180px)の中央に合わせる */
    .l-testimonial__bubble::after {
      left: 110px;
    }
  
    /* 巨大化したダブルクォーテーション */
    .l-testimonial__quote {
      width: 120px;
      height: 120px;
      top: 10px;
      left: 10px;
    }
  
    .l-testimonial__catch {
      font-size: 27px; 
    }
  
    .l-testimonial__text {
      font-size: 18px; 
    }
  
    .l-testimonial__image {
      width: 180px;
      height: 180px;
      margin-right: 30px; 
    }
  
    .l-testimonial__history {
      font-size: 18px;
      line-height: 1.6;
      margin-bottom: 12px;
    }
  
    .l-testimonial__name {
      font-size: 24px;
    }
  
    /* 共通矢印のレスポンシブ */
    .testi-prev::after, .testi-next::after,
    .flow-prev::after, .flow-next::after {
      font-size: 36px !important;
      -webkit-text-stroke: 2px var(--color-text);
    }
    .testi-pagination {
        font-size: 24px !important; /* 16px × 1.5 */
      }
  }

/* ==================================================
  ご支援のお願い (.l-support)
================================================== */

/* 【SP：フラット設計】
   余白の白を消し、角丸をなくし、背景を白にする */
   .l-support {
    width: 100%;
    background-color: transparent; /* 外側の白い余白を完全消去 */
    margin: 0 auto;
    padding: 0;                   /* 余計なパディングを排除 */
    box-sizing: border-box;
  }
  
  .l-support__card {
    width: 100%;
    margin: 0 auto;
    background-color: var(--color-white); /* カードの中を白に変更 */
    box-shadow: inset 0 0 0 15px var(--color-main); /* 黄色の枠線のみ残す */
    border-radius: 0;                     /* 角丸を完全消去 */
    padding: 20px;
    padding-bottom: 60px;
    text-align: left;                     /* テキストを左寄せ */
    box-sizing: border-box;
  }

  /* SP：上下余白を他セクション（80px）より狭く */
  .l-support .c-sub-catch {
    padding-top: 60px;
  }
  

  .l-support__visual{
    width: 200px; 
    margin: 0 auto;
  }
  .l-support__image {
    border-radius: 40px;
    object-fit: cover;
    margin: 40px auto; /* 画像のみ中央寄せ */
  }
  
  .l-support__p {
    width: 100%;
  }

  /* スマホ：他セクションより狭いテキスト列（240px） */
  .l-support__text {
    max-width: 240px;
  }

  /* 375px前後：テキスト列を280pxに */
  @media screen and (min-width: 375px) and (max-width: 699px) {
    .l-support__text {
      max-width: 280px;
    }
  }
  
  /* ボタンの中央配置 */
  .l-support .c-btn-link {
    margin-left: auto;
    margin-right: auto;
  }
  
  /* ==================================================
    タブレット・PC以上 (700px〜)
  ================================================== */
  @media screen and (min-width: 700px) {
    /* 【PC：入れ子・カード設計】
       700pxの白い道の中に、620pxの薄黄色いカードを浮かす */
  
    .l-support {
      width: 700px;
      background-color: var(--color-white);
      padding: 120px 0;
    }
  
    .l-support__card {
      width: 620px;
      padding-bottom: 120px;
      background-color: var(--color-bg-yellow); /* PCのみ薄黄色に戻す */
      box-shadow: inset 0 0 0 15px var(--color-main);
      border-radius: 80px;
      text-align: left;                          /* PCも左寄せを維持 */
    }
  
    .l-support__visual{
        width: 360px; 
      }

    .l-support__image {
      border-radius: 60px;
    }
  
    .l-support__p {
      font-size: 18px;
    }

    .l-support__text {
      max-width: 440px;
    }
  }

/* ==================================================
  お知らせセクション（.l-news）／一覧（.l-news__list）
================================================== */
.l-news__list {
    display: flex;
    flex-direction: column;
    gap: 20px; 
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  /* ==================================================
    お知らせカード（.l-news__card）
  ================================================== */
  .l-news__card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
    background-color: var(--color-white);
    border-radius: 12px; 
    overflow: hidden; 
    text-decoration: none; 
    color: var(--color-text); 
    width: 100%;
    max-width: 300px; 
    margin: 0 auto;
    height: 100%;
  }
  
  /* ==================================================
    カード内要素
  ================================================== */
  .l-news__header {
    display: flex;
    justify-content: space-between; 
    align-items: flex-end;
  }
  
  /* カテゴリラベル */
  .l-news__label {
    background-color: var(--color-main);
    color: var(--color-text);
    font-family: var(--font-base);
    font-size: 12px; 
    font-weight: var(--fw-bold);
    line-height: 1.5; 
    padding: 6px 12px; 
  }
  
  /* 日付 */
  .l-news__date {
    font-family: var(--font-base);
    font-size: 12px; 
    font-weight: var(--fw-normal);
    color: var(--color-text);
    line-height: 1;
    padding-right: 20px; 
    padding-bottom: 0;
  }
  
  /* タイトル */
  .l-news__title {
    font-family: var(--font-base);
    font-size: 15px; 
    font-weight: var(--fw-bold); 
    text-align: left; 
    line-height: 1.6;
    margin: 0;
    padding: 10px 20px 20px 20px; 
  }
  
  /* ==================================================
    タブレット対応（700px以上）
  ================================================== */
  @media screen and (min-width: 700px) {
    .l-news__list {
      gap: 30px; 
    }
  
    .l-news__card {
      max-width: var(--content-max);
    }
  
    .l-news__label {
      font-size: 14px; 
      padding: 8px 16px;
    }
  
    .l-news__date {
      font-size: 14px; 
      padding-right: 30px;
      padding-bottom: 0;
    }
  
    .l-news__title {
      font-size: 18px; 
      padding: 16px 30px 30px 30px; 
    }
  }

/* ==================================================
  クロージングセクション (.l-closing)
================================================== */
.l-closing {
    background-color: var(--color-main); /* サイドバーの色 */
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  
  /* 前セクションのグレーを「アーチの肩」の高さに合わせて正確に配置 */
  .l-closing::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-bg-gray);
    width: 100%;
    height: 50vw; /* 半径と一致させる */
    z-index: 0;
  }
  
  .l-closing__arc {
    position: relative;
    z-index: 1;
    /* 1. 他のアーチと共通の「ハミ出し」設定 */
    width: calc(100% + 40px);
    margin-left: -20px;

    /* アーチの形を作る指定 */
    border-radius: 50% 50% 0 0 / 50vw 50vw 0 0; 
    
    /* 3. 他のアーチと共通の背景（線は ::after で重ね描き） */
    border: none;
    background-color: var(--color-bg-yellow);
    
    padding-top: 80px;
    text-align: center;
    box-sizing: border-box;

    padding-left: 0;
    padding-right: 0;
    overflow: visible;
}
  
  h2.js-anim-h2.l-closing__title {
    font-size: 20px;
    font-weight: var(--fw-bold);
    line-height: 1.8;
    margin-bottom: 40px;
  }
  
  .l-closing__cat-circle {
    width: 180px;
    height: 180px;
    margin: 0 auto 40px;
    border-radius: 50%;
    overflow: hidden;
  }
  
  .l-closing__cat-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* リスト（手直しいただいた値を反映） */
  .l-closing__list {
    list-style-type: none;
    padding-left: 0;
    width: fit-content; 
    margin: 0 auto;
    font-size: 17px;
  }
  
  .l-closing__list li {
    position: relative;
    padding-left: 1.8em;
    margin-bottom: 1em;
    line-height: 1.5;
    text-align: left;
  }
  
  .l-closing__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15em; /* 18pxに合わせて微調整 */
    width: 1.4em;
    height: 1.4em;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2.5" fill="none" stroke="%23213548" stroke-width="2"/><path d="M7 12.5l3.5 3.5l7.5-8" fill="none" stroke="%23213548" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
  }
  
  .l-closing__marker {
    display: inline;
    font-weight: var(--fw-bold);
    
    background-image: var(--marker-h2);
    background-repeat: no-repeat;
  
    /* 改行時も各行にマーカーを維持 */
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
  
  .l-closing__message {
    margin: 60px auto 80px;
    font-size: 17px;
    font-weight: var(--fw-bold);
    text-align: center;
    line-height: 1.8;
  }
  
 
  /* ==================================================
    タブレット対応（700px以上）
  ================================================== */
  @media screen and (min-width: 700px) {
    .l-closing::before {
        width: 700px;
        height: 350px; /* 半径(700/2)と一致させる */
      }
    
      .l-closing__arc {
        width: 700px;
        margin-left: auto;
        margin-right: auto;
        /* PC版のアーチ半径 */
        border-radius: 50% 50% 0 0 / 350px 350px 0 0;
    }

    .l-closing__arc > :not(.img_wrapper-radiusTop):not(.img_wrapper-radiusbottom):not(.l-closing__cat-circle):not(.c-content-max) {
        padding-left: 0;
        padding-right: 0;
    }

    .l-closing__arc > .c-content-max {
        padding-inline: 0;
    }
  
    h2.js-anim-h2.l-closing__title {
      font-size: 32px;
      margin-bottom: 60px;
    }
  
    .l-closing__cat-circle {
      width: 320px;
      height: 320px;
      margin-bottom: 60px;
    }
  
    .l-closing__list {
      font-size: 27px;
    }
  
    .l-closing__message {
      margin: 90px auto 120px;
      font-size: 27px;
      width: 100%;
      max-width: var(--content-max);
    }

  }

/* クロージング末尾の猫写真：PC幅で中央寄せ（高さは共通クラスで画像実寸比） */
.l-closing__bottom-img {
  width: 100%;
}

/* ==================================================
  サイトマップ (.l-sitemap)
================================================== */

/* 外枠：背景色を敷き詰める */
.l-sitemap {
    width: 100%;
    max-width: 100%;
    background-color: var(--color-text); /* 濃紺 */
    color: var(--color-white);
    margin: 0 auto;
    padding: 80px 0; /* 内部コンテナが315pxなので、左右パディングは0にリセット */
    box-sizing: border-box;
  }

/* フッター共通：全幅ブロック（汎用 section の700px幅を上書き） */
section.l-cafe-page__more,
section.l-sitemap,
section.l-store {
  width: 100%;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

  
  /* タイトル：白文字（マーカー設定は共通のものが適用されます） */
  .l-sitemap__title {
    color: var(--color-white);
  }
  
  /* SP：240px固定・中央配置（デザイン準拠） */
  .l-sitemap__columns {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 240px;
    max-width: 100%;
    margin: 0 auto;
  }
  
  /* メイン項目 */
  .l-sitemap__item {
    margin-bottom: 24px;
  }
  
  .l-sitemap__item:last-child {
    margin-bottom: 0;
  }
  
  .l-sitemap__item > a {
    display: inline-block;
    font-size: 16px;
    font-weight: var(--fw-bold);
    margin-bottom: 12px;
    transition: all 0.3s ease;
  }
  
  /* サブ項目 */
  .l-sitemap__sublist {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  
  .l-sitemap__subitem > a {
    position: relative;
    display: inline-block;
    font-size: 14px;
    padding-left: 3.5em;
    transition: all 0.3s ease;
  }
  
  /* サブ項目の「L字」SVGアイコン（白） */
  .l-sitemap__subitem > a::before {
    content: "";
    position: absolute;
    left: 2em;
    top: 0.1em;
    width: 14px;
    height: 14px;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3v10a2 2 0 0 0 2 2h10"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.8;
  }
  
  /* インタラクション：スマホでのタップ時の押し心地 */
  .l-sitemap__item > a:active,
  .l-sitemap__subitem > a:active {
    opacity: 0.5;
  }
  
  /* インタラクション：PCホバー時の黄色化＋右スライド */
  @media (hover: hover) {
    .l-sitemap__item > a:hover,
    .l-sitemap__subitem > a:hover {
      color: var(--color-main);
      transform: translateX(5px);
    }
    
    .l-sitemap__subitem > a:hover::before {
      background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23FFDA34" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3v10a2 2 0 0 0 2 2h10"/></svg>');
    }
  }
  
  /* ==================================================
    タブレット・PC以上 (700px〜)
  ================================================== */
  @media screen and (min-width: 700px) {
    
    /* 外枠を700pxの箱にし、bodyの黄色を露出させる（section の全幅上書きより詳細度を上げる） */
    section.l-cafe-page__more,
    section.l-sitemap,
    section.l-store {
      width: 700px;
      max-width: 700px;
      margin-left: auto;
      margin-right: auto;
    }

    section.l-sitemap {
      padding: 100px 0;
    }

    .l-closing__bottom-img {
      width: 700px;
      margin-left: auto;
      margin-right: auto;
      border-radius: 145px 145px 0 0;
    }
  
    .l-sitemap__title {
      margin-bottom: 60px;
    }
  
    /* 2列合計の幅を480pxに固定 */
    .l-sitemap__columns {
      flex-direction: row;
      width: 100%;
      max-width: var(--content-max);
      justify-content: space-between;
      gap: 0;
    }
  
    /* 文字の折り返しを防ぐため、左右の列にそれぞれ45%程度の幅を持たせる */
    .l-sitemap__list {
      width: 45%; 
    }
  
    .l-sitemap__item > a {
      font-size: 18px;
    }
    
    .l-sitemap__subitem > a {
      font-size: 16px;
    }
  }

/* ==================================================
  店舗情報 (.l-store)
================================================== */
.l-store {
    width: 100%;
    padding: 80px 0 0 ;
    background-color: var(--color-main);
    color: var(--color-text);
    font-family: var(--font-base);
  }
  
  /* SP版：コンテナ幅 100%（左右余白 20px） */
  .l-store__inner {
    width: 100%;
    padding: 0 20px;
    margin: 0 auto;
  }

  /* 黄色背景のため、下線マーカーは白 */
  h2.l-store__title span {
    background-image: var(--marker-h2-white);
  }
  
 
  .l-store__address-main {
    font-size: 14px;
    font-weight: var(--fw-bold);
    margin-bottom: 12px;
    line-height: 1.4;
  }
  
  .l-store__address-sub {
    font-size: 14px;
    line-height: 1.6;
    margin: 0 auto;
  }
  
  /* 横並び：フレックスボックス */
  .l-store__info-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: 0 auto;
    width: 300px;
    max-width: 100%;
    margin-bottom: 60px;
  }
  
  /* 左側：幅を流動的に（はみ出し防止） */
  .l-store__info-text {
    flex: 1;
    min-width: 0;
  }
  
  .l-store__detail {
    font-size: 15px;
    font-weight: var(--fw-normal);
    line-height: 1;
  }
  
  .l-store__tel {
    display: flex;
    align-items: baseline;
    margin-bottom: 28px;
  }
  
  .l-store__tel-label {
    font-size: 13px;
    font-weight: var(--fw-bold);
    margin-right: 4px;
  }
  
  .l-store__tel-num {
    font-size: 18px;
    font-weight: var(--fw-bold);
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
  }
  
  /* SNS */
  .l-store__sns {
    display: flex;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  .c-icon-sns {
    display: block;
    width: 36px;
    height: 36px;
    color: var(--color-text);
  }
  
  /* 看板画像：SPサイズ 122px */
  .l-store__info-image {
    width: 122px;
    flex-shrink: 0;
  }
  
  .l-store__img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
  }
  
  .l-store__map {
    width: 100%;
    height: 300px;
    border-radius: 16px;
    overflow: hidden;
  }
  
  .l-store__map iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
  }
  

  
  /* ==================================================
    タブレット・PC以上 (700px〜)
  ================================================== */
  @media screen and (min-width: 700px) {
    /* セクション幅700px */
    section.l-store {
      width: 700px;
      max-width: 700px;
      margin: 0 auto;
      background-color: var(--color-bg-yellow);
      padding: 120px 0;
    }
  
    /* インナー幅 */
    .l-store__inner {
      width: 100%;
      max-width: var(--content-max);
      padding: 0;
    }
  
  
    .l-store__address-main {
        width: 100% ;
      font-size: 24px;
      margin-bottom: 12px;
    }
  
    .l-store__address-sub {
        width: 100% ;
      font-size: 18px;
    }
  
    /* 横並びエリア */
    .l-store__info-wrapper {
        width: 100%;
      margin: 0 auto;
      margin-bottom: 90px;
    }
  
    /* 左カラム：267px固定 */
    .l-store__info-text {
      width: 267px;
      flex: none;
    }
  
    .l-store__detail {
      font-size: 18px;
      margin-bottom: 12px;
    }
  
    .l-store__tel {
        margin-bottom: 45px;
      }

    .l-store__tel-label {
      font-size: 18px;
    }
  
    .l-store__tel-num {
      font-size: 32px;
    }
  
    .l-store__sns {
        gap: 32px;
      }

    .c-icon-sns {
      width: 44px;
      height: 44px;
    }
  
    /* 看板画像：183px */
    .l-store__info-image {
      width: 183px;
    }
  
    .l-store__map {
      height: 480px;
    }
  }

/* ==================================================
    フッター全体
================================================== */
.l-footer {
  width: 100%;
  padding: 20px 0;
  background-color: var(--color-main);
  position: relative;
  z-index: 10;
}

.l-footer__inner {
  width: 100%;
  max-width: 100%; /* 全幅を確保 */
  padding: 0 20px;
  margin: 0 auto;
  position: relative;
}

/* クレジット表記：ここを確実に中央へ */
.l-footer__copy {
  display: block;
  width: 100%;
  text-align: center; /* 指示通り中央揃え */
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--color-text);
  margin: 0 auto;
}

/* トップへ戻るボタン */
.c-pagetop {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* 色の強制固定 */
  background-color: var(--color-text) !important; 
  color: var(--color-white);
  
  width: 48px;
  height: 48px;
  border-radius: 50%;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

/* ホバー時：オレンジ */
.c-pagetop:hover {
  background-color: var(--color-marker-orange) !important;
  transform: translateY(calc(-50% - 3px));
}

/* アイコンサイズ調整（スマホ版） */
.c-pagetop__arrow {
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 21px;
  height: 8px;
}

.c-pagetop__paw {
  width: 24px;
  height: 24px;
  margin-top: 4px;
}

/* タブレット・PC */
@media screen and (min-width: 700px) {
  
  .l-footer {
    padding: 40px 0;
  }
  
  .l-footer__copy {
    font-size: 16px; /* クレジット表記の文字サイズも調整 */
  }

  /* ボタン本体：48 * 1.5 = 72px */
  .c-pagetop {
    width: 72px;
    height: 72px;
    right: 30px;
  }

  /* 矢印：21 * 1.5 = 31.5px / 位置：7 * 1.5 = 10.5px */
  .c-pagetop__arrow {
    width: 31.5px;
    height: 12px;
    top: 10.5px;
  }

  /* 肉球：24 * 1.5 = 36px / 隙間：4 * 1.5 = 6px */
  .c-pagetop__paw {
    width: 36px;
    height: 36px;
    margin-top: 6px;
  }

}

/* ==================================================
  共通：画像プレースホルダー (.c-img-placeholder)
================================================== */
.c-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg-placeholder);
    color: var(--color-text);
    font-size: 12px;
    text-align: center;
    overflow: hidden;
}

.c-img-placeholder::after {
    content: "画像準備中";
}

.c-img-placeholder--circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin: 0 auto 40px;
}

.c-img-placeholder--wide {
    width: 100%;
    max-width: var(--content-max);
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    margin-inline: auto;
}

.c-img-placeholder--snack {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    flex-shrink: 0;
}

.c-img-placeholder--banner {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    flex-shrink: 0;
}

.c-img-placeholder--sign {
    width: 100%;
    max-width: 120px;
    aspect-ratio: 3 / 4;
    border-radius: 8px;
    margin-inline: auto;
}

.c-img-placeholder--sign::after {
    content: none;
}

@media screen and (min-width: 700px) {
    .c-img-placeholder {
        font-size: 14px;
    }

    .c-img-placeholder--circle {
        width: 300px;
        height: 300px;
        margin-bottom: 60px;
    }

    .c-img-placeholder--wide {
        max-width: 480px;
    }

    .c-img-placeholder--snack {
        width: 120px;
        height: 120px;
    }

    .c-img-placeholder--banner {
        width: 150px;
        height: 150px;
    }

    .c-img-placeholder--sign {
        max-width: 180px;
    }
}

/* ==================================================
  共通：料金表 (.c-price-table)
  Figma：角丸ピル型セル・3色・セル間に隙間
================================================== */
.c-price-table {
    width: 100%;
    max-width: 315px;
    margin-inline: auto;
    border-collapse: separate;
    border-spacing: 10px 8px;
    font-size: 14px;
    table-layout: fixed;
}

.c-price-table th,
.c-price-table td {
    padding: 8px;
    text-align: center;
    vertical-align: middle;
    font-weight: var(--fw-bold);
    line-height: 1.4;
    border: none;
    border-radius: 8px;
}

.c-price-table__cell--main {
    background-color: var(--color-main);
}

.c-price-table__cell--pale {
    background-color: var(--color-bg-yellow);
}

.c-price-table__cell--blue {
    background-color: var(--color-bg-blue);
}

.c-price-table--basic col:nth-child(1) {
    width: 37%;
}

.c-price-table--basic col:nth-child(2) {
    width: 33%;
}

.c-price-table--basic col:nth-child(3) {
    width: 30%;
}

.c-price-table--basic .c-price-table__cell--blue[rowspan] {
    vertical-align: middle;
}

.c-price-table--estimate col:nth-child(1) {
    width: 24%;
}

.c-price-table--estimate col:nth-child(2) {
    width: 38%;
}

.c-price-table--estimate col:nth-child(3) {
    width: 38%;
}

@media screen and (min-width: 700px) {
    .c-price-table {
        max-width: 480px;
        font-size: 16px;
        border-spacing: 12px 10px;
    }

    .c-price-table th,
    .c-price-table td {
        padding: 10px 12px;
    }
}

/* ==================================================
  アコーディオン：メニュー用 (.c-accordion--menu)
================================================== */
.c-accordion--menu .c-accordion__box--menu {
    display: block;
    border-top: 1px dotted rgba(255, 255, 255, 0.4);
    padding-top: 16px;
}

.c-accordion__menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.c-accordion__menu-list li {
    font-size: 14px;
    line-height: 1.8;
    text-align: left;
}

@media screen and (min-width: 700px) {
    .c-accordion__menu-list li {
        font-size: 16px;
    }
}

/* ==================================================
  猫カフェページ (.l-cafe-page)
  レイアウト共通は :root / .c-content-max / .l-section-inner を使用
================================================== */

main.l-cafe-page {
    background-color: var(--color-main);
    --table-gap: 8px;
}

/* セクション内ラッパー：デザインどおり中央のコンテンツ列 */
.l-cafe-page .l-section-arc__inner,
.l-cafe-page__menu-inner,
.l-cafe-page__flow-inner,
.l-cafe-page__more-inner,
.l-cafe-page__estimate-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

/* padding_LR-0 のセクション（ヒーロー）は内側で左右20px確保 */
.l-cafe-page .l-section-arc__inner {
    padding-inline: var(--section-padding-x);
}

/* 料金表：c-content-max 内で中央配置 */
.l-cafe-page .c-price-table.c-content-max {
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    border-spacing: var(--table-gap);
    table-layout: fixed;
}

/* ご利用のお願い：アーチ内コンテンツを中央列に */
.l-cafe-page__rules .l-section-common__arc {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.l-cafe-page__rules .l-section-common__arc > .l-cafe-page__rules-body {
    padding-left: 0;
    padding-right: 0;
}

.l-cafe-page__rules-body .c-sub-catch {
    padding-top: 0;
}

/* アーチが calc(100% + 40px) のため、100% だと画面端まで届く → 100vw 基準で左右20px確保 */
.l-cafe-page__rules .l-cafe-page__rules-body.c-content-max {
    width: calc(100vw - 2 * var(--section-padding-x));
    max-width: 100%;
    margin-inline: auto;
    padding-inline: 0;
    box-sizing: border-box;
}

/* ご利用のお願い：※注釈のインデント（.c-note 共通） */
.l-cafe-page__rules-body .c-note {
    padding-left: 1em;
    text-indent: -1em;
    width: 100%;
    text-align: left;
}

.l-cafe-page__rules {
    scroll-margin-top: var(--height-header-sp);
}

/* ヒーローアーチ余白（アーチ内上 80px） */
.l-cafe-page .l-section-arc--page .l-section-arc__inner {
    padding-top: 80px;
}

.l-cafe-page .l-section-arc--page .c-sub-catch {
    padding-top: 0;
    margin-bottom: 10px;
}

/* 入店の流れ：親の padding_T と c-sub-catch の上余白が二重にならないよう */
.l-cafe-page__flow-inner .c-sub-catch {
    padding-top: 0;
    margin-bottom: 10px;
}

/* ヒーロー円形画像（トップページ .l-responsibility__img と同じ 200/300px 基準・SPはやや大きめ） */
.l-cafe-page .l-responsibility__img.c-content-max {
    width: 280px;
    max-width: 280px;
    margin-top: 0;
    margin-bottom: 20px;
}

/* 料金リード文（Figma：中央揃え・900を24pxで強調） */
.l-cafe-page__price-lead {
    text-align: center;
    font-size: 15px;
    font-weight: var(--fw-bold);
    line-height: 1.6;
}

.l-cafe-page__price-num {
    font-size: 24px;
    letter-spacing: 0.1em;
    line-height: 1.5;
}

/* 猫カフェページ：基本料金表 */
.l-cafe-page__hero-inner .c-price-table--basic th,
.l-cafe-page__hero-inner .c-price-table--basic td {
    line-height: 1.2;
    padding: 8px;
}

/* ヒーロー内の要素間余白をFigmaに合わせて調整 */
.l-cafe-page__hero-inner h1.js-anim-h2 {
    margin-bottom: 20px;
}

.l-cafe-page__hero-inner h3 {
    margin-bottom: 0;
}

.l-cafe-page__hero-inner .c-note {
    padding-left: 0;
    text-indent: 0;
    text-align: center;
}

/* メニュー紺セクション（Figma準拠） */

.l-cafe-page__menu-title {
    display: block;
    font-size: 16px;
    font-weight: var(--fw-normal);
    letter-spacing: 0.1em;
    line-height: 1.5;
    text-align: center;
    color: var(--color-white);
}

.l-cafe-page__menu-list.c-faq-list {
    margin-bottom: 0;
    border-top: 1px solid var(--color-white);
}

.l-cafe-page__menu-inner .c-accordion {
    border-bottom: 1px solid var(--color-white);
}

/* Figma：罫線間の高さ67px、文字と＋を縦中央揃え */
.l-cafe-page__menu-inner .c-accordion__summary {
    padding: 0;
    min-height: 67px;
}

.l-cafe-page__menu-inner .c-accordion__title {
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
}

.l-cafe-page__menu-note {
    margin: 30px auto 0;
    color: var(--color-white);
    font-size: 13px;
    line-height: 1.5;
}

/* 料金の目安 */
.l-cafe-page__estimate {
    padding-bottom: 0;
}

.l-cafe-page__estimate-inner h3 {
    margin-bottom: 28px;
}

.l-cafe-page__estimate .c-price-table--estimate th,
.l-cafe-page__estimate .c-price-table--estimate td {
    height: auto;
    min-height: 29px;
    padding: 8px;
    line-height: 1.2;
}

.l-cafe-page__flow-card {
    padding: 16px;
    background-color: var(--color-white);
    border-radius: 8px;
}

.l-cafe-page__flow-list {
    margin: 0;
    padding: 0 0 0 1.2em;
    list-style: decimal;
    font-size: 15px;
    line-height: 1.6;
    text-align: left;
}

.l-cafe-page__flow-list li {
    margin-bottom: 8px;
    width: auto;
    text-align: left;
}

.l-cafe-page__flow-list li:last-child {
    margin-bottom: 0;
}

/* ねこのおやつ＋関連写真 */
.l-cafe-page__snack-area {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    padding-top: 80px;
    padding-bottom: 0;
}

.l-cafe-page__snack-block {
    width: 100%;
}

/* ── スマホ（〜699px） ── */
.l-cafe-page__snack {
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-bottom: 0;
    padding: 20px;
    background-color: var(--color-main);
    border-radius: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.l-cafe-page__snack-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.l-cafe-page__snack-card {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    height: 140px;
    padding: 10px 12px 10px 8px;
    background-color: var(--color-white);
    border-radius: 70px;
    box-sizing: border-box;
    overflow: hidden;
}

.l-cafe-page__snack-img {
    width: 120px;
    height: 120px;
    max-width: 120px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    align-self: center;
}

.l-cafe-page__snack-body {
    flex: 1;
    min-width: 0;
    max-width: 140px;
    padding-left: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.l-cafe-page__snack-catch {
    font-size: 15px;
    margin: 0 0 6px;
    width: 100%;
    line-height: 1.4;
    text-align: center;
}

.l-cafe-page__snack-box {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.l-cafe-page__snack-label {
    margin: 0;
    padding: 6px 8px;
    font-size: 14px;
    font-weight: var(--fw-bold);
    line-height: 1.4;
    background-color: var(--color-main);
    border-radius: 8px 8px 0 0;
    text-align: center;
    box-sizing: border-box;
}

.l-cafe-page__snack-price {
    margin: 0;
    padding: 6px 8px;
    font-size: 14px;
    font-weight: var(--fw-bold);
    line-height: 1.4;
    background-color: var(--color-bg-yellow);
    border-radius: 0 0 8px 8px;
    text-align: center;
    box-sizing: border-box;
}

.l-cafe-page__snack-price-num {
    font-size: 24px;
    letter-spacing: 0.05em;
    line-height: 1.3;
}

/* おやつ写真（スマホ：画面幅100%・角丸なし・余白なし）
   ※figure のブラウザ標準 margin と img/figure の max-width:100% を上書き */
.l-cafe-page__snack-photo {
    display: block;
    width: 100vw;
    max-width: none;
    margin: 0;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0;
    aspect-ratio: 375 / 280;
    height: auto;
    overflow: hidden;
    border-radius: 0;
    line-height: 0;
}

.l-cafe-page__snack-photo img {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    object-fit: cover;
}

/* 320px付近：料金表・白ピル内に収める */
@media screen and (max-width: 374px) {
    main.l-cafe-page {
        --table-gap: 6px;
    }

    .l-cafe-page__hero-inner .c-price-table--basic th,
    .l-cafe-page__hero-inner .c-price-table--basic td {
        padding: 8px 4px;
        font-size: 13px;
    }

    .l-cafe-page__hero-inner .c-price-table--basic thead th {
        font-size: 12px;
    }

    .l-cafe-page__estimate .c-price-table--estimate th,
    .l-cafe-page__estimate .c-price-table--estimate td {
        padding: 8px 4px;
        font-size: 13px;
    }

    .l-cafe-page__estimate .c-price-table--estimate thead th {
        font-size: 12px;
    }

    .l-cafe-page__snack-card {
        gap: 8px;
        padding: 10px 12px 10px 8px;
    }

    .l-cafe-page__snack-img {
        width: 100px;
        height: 100px;
        max-width: 100px;
    }

    .l-cafe-page__snack-body {
        max-width: 120px;
        padding-left: 6px;
    }

    .l-cafe-page__snack-catch {
        font-size: 13px;
        margin-bottom: 4px;
    }

    .l-cafe-page__snack-label {
        padding: 5px 6px;
        font-size: 12px;
    }

    .l-cafe-page__snack-price {
        padding: 5px 6px;
        font-size: 12px;
    }

    .l-cafe-page__snack-price-num {
        font-size: 20px;
    }
}

.l-cafe-page__label {
    font-size: 16px;
    font-weight: var(--fw-bold);
    line-height: 1.4;
    text-align: center;
    background-color: var(--color-main);
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 4px 16px;
    border-radius: 8px;
    margin: 0 auto 24px;
}

/* そのほかのご案内 */
/* padding_LR-0 で背景は全幅・見出しとバナーは左右20px */
.l-cafe-page__more-inner {
    padding-inline: var(--section-padding-x);
}

.l-cafe-page__banners {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.l-cafe-page__banners a {
    display: block;
    border-radius: 16px;
    overflow: hidden;
}

/* お知らせバナーのみ罫線（Figma準拠） */
.l-cafe-page__banners a.l-cafe-page__banner--news {
    border: 2px solid var(--color-text);
}

.l-cafe-page__banners img {
    width: 100%;
    height: auto;
    display: block;
}

@media screen and (min-width: 700px) {
    main.l-cafe-page {
        --table-gap: 12px;
    }

    .l-cafe-page__rules .l-cafe-page__rules-body.c-content-max {
        max-width: var(--content-max);
        padding-inline: 0;
    }

    .l-cafe-page__rules-body .c-list-check {
        font-size: 20px;
    }

    .l-cafe-page__rules {
        scroll-margin-top: var(--height-header-pc);
    }

    .l-cafe-page__hero-inner .c-price-table--basic th,
    .l-cafe-page__hero-inner .c-price-table--basic td {
        padding: 10px 12px;
    }

    .l-cafe-page .l-responsibility__img.c-content-max {
        width: 300px;
        max-width: 300px;
        margin-top: 0;
        margin-bottom: 30px;
    }

    .l-cafe-page__price-lead {
        font-size: 18px;
    }

    .l-cafe-page__price-num {
        font-size: 36px;
    }

    .l-cafe-page .l-section-arc--page .l-section-arc__inner {
        padding-top: 120px;
    }

    .l-cafe-page__hero-inner h1.js-anim-h2 {
        margin-bottom: 30px;
    }

    .l-cafe-page__hero-inner .c-note {
        padding-left: 0;
    }

    .l-cafe-page__menu-title {
        font-size: 24px;
    }

    .l-cafe-page__menu-inner .c-accordion__summary {
        min-height: 101px;
    }

    .l-cafe-page__menu-inner .c-accordion__title {
        font-size: 16px;
    }

    .l-cafe-page__menu-note {
        font-size: 16px;
        margin-top: 45px;
    }

    .l-cafe-page__estimate-inner h3 {
        margin-bottom: 42px;
    }

    .l-cafe-page__estimate .c-price-table--estimate th,
    .l-cafe-page__estimate .c-price-table--estimate td {
        min-height: 44px;
        padding: 10px 12px;
        line-height: 1.2;
    }

    .l-cafe-page__flow-card {
        padding: 24px;
    }

    .l-cafe-page__flow-list {
        font-size: 18px;
    }

    /* ── タブレット以上（700px〜）：480pxブロック・32px角丸 ── */
    .l-cafe-page__snack-area {
        align-items: center;
        padding-top: 80px;
        padding-bottom: 120px;
    }

    .l-cafe-page__snack-block {
        max-width: 480px;
    }

    .l-cafe-page__snack {
        width: 100%;
        margin-left: 0;
        padding: 20px;
        border-radius: 32px 32px 0 0;
    }

    .l-cafe-page__snack-card {
        width: calc(100% - 16px);
        max-width: 400px;
        height: 160px;
        gap: 16px;
        padding: 10px 20px 10px 12px;
    }

    .l-cafe-page__snack-img {
        width: 140px;
        height: 140px;
        max-width: 140px;
    }

    .l-cafe-page__snack-body {
        max-width: none;
        padding-left: 4px;
        padding-right: 8px;
    }

    .l-cafe-page__snack-photo {
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 0 0 32px 32px;
        line-height: normal;
    }

    .l-cafe-page__snack-photo img {
        max-width: 100%;
        margin: 0;
    }

    .l-cafe-page__label {
        font-size: 20px;
        padding: 6px 20px;
        margin-bottom: 36px;
    }
}

/* ==================================================
  保護猫一覧ページ (.l-cats-page)
  このページ固有：ヒーロー・一覧カードのみ
  ※共通セクション（.l-flow 以降）は index と同じ見た目のまま。上書きしない
================================================== */

.l-cats-page .l-section-arc__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding-inline: var(--section-padding-x);
}

.l-cats-page__hero-inner {
    padding-top: 80px;
    padding-bottom: 40px;
}

.l-cats-page__hero-inner h1.js-anim-h2 {
    margin-bottom: 30px;
}

.l-cats-page .l-section-arc--page .c-sub-catch {
    padding-top: 0;
    margin-bottom: 10px;
    line-height: 1.5;
}

.l-cats-page__hero-inner .c-note {
    margin-top: 20px;
}

.l-cats-page__archive-inner {
    padding-top: 80px;
}

.l-cats-page__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.l-cat-card__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    color: var(--color-white);
    text-decoration: none;
    transition: transform 0.3s ease;
}

@media (hover: hover) {
    .l-cat-card__link:hover {
        transform: scale(1.03);
    }
}

.l-cat-card__link:active {
    transform: scale(0.97);
}

.l-cat-card__img-wrap {
    width: 100%;
    max-width: 140px;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 12px;
    background-color: rgba(255, 255, 255, 0.1);
}

.l-cat-card__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.l-cat-card__name {
    font-size: 15px;
    font-weight: var(--fw-bold);
    text-align: center;
    margin: 0 0 8px;
    line-height: 1.4;
}

.l-cat-card__name span {
    display: inline-block;
    border-bottom: 4px solid var(--color-main);
    padding-bottom: 2px;
}

.l-cat-card__info {
    width: 100%;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
    font-size: 11px;
    line-height: 1.7;
    text-align: left;
}

.l-cat-card__info li::before {
    content: "・";
}

.l-cat-card__meet {
    width: 100%;
    margin: 0 0 10px;
    font-size: 11px;
    line-height: 1.6;
    text-align: center;
}

.l-cat-card__status {
    display: inline-block;
    font-size: 14px;
    font-weight: var(--fw-bold);
    line-height: 1.4;
    padding: 6px 16px;
    border-radius: 999px;
    margin: 0 0 10px;
    text-align: center;
    background-color: var(--color-main);
    color: var(--color-text);
}

.l-cat-card__status[data-status="trial"] {
    background-color: #b8e4e8;
    color: var(--color-text);
}

.l-cat-card__status[data-status="graduated"] {
    background-color: rgba(255, 255, 255, 0.2);
    color: var(--color-white);
}

.l-cat-card__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    font-size: 11px;
    font-weight: var(--fw-bold);
    padding: 0.65em 0.85em;
    border: 1px solid var(--color-white);
    border-radius: 6px 18px 18px 6px;
    box-sizing: border-box;
}

.l-cat-card__btn::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    margin-left: 6px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cpolyline points='14 6 20 12 14 18'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cpolyline points='14 6 20 12 14 18'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.l-cats-page__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 40px;
}

.l-cats-page__pagination-prev,
.l-cats-page__pagination-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    min-height: 44px;
    padding: 0.5em 0.75em;
    border: 1px solid var(--color-white);
    border-radius: 999px;
    color: var(--color-white);
    font-size: 13px;
    font-weight: var(--fw-bold);
    text-decoration: none;
    box-sizing: border-box;
}

.l-cats-page__pagination-prev.is-disabled,
.l-cats-page__pagination-prev[aria-disabled="true"] {
    opacity: 0.35;
    pointer-events: none;
}

.l-cats-page__pagination-list {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.l-cats-page__pagination-list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 0.5em;
    border: 1px solid var(--color-white);
    border-radius: 50%;
    color: var(--color-white);
    font-size: 14px;
    font-weight: var(--fw-bold);
    text-decoration: none;
    box-sizing: border-box;
}

.l-cats-page__pagination-list a.is-current,
.l-cats-page__pagination-list a[aria-current="page"] {
    background-color: var(--color-main);
    border-color: var(--color-main);
    color: var(--color-text);
}

@media screen and (min-width: 700px) {
    .l-cats-page__hero-inner {
        padding-top: 120px;
        padding-bottom: 60px;
    }

    .l-cats-page__hero-inner h1.js-anim-h2 {
        margin-bottom: 45px;
    }

    .l-cats-page__archive-inner {
        padding-top: 120px;
    }

    .l-cats-page__list {
        grid-template-columns: repeat(2, minmax(0, 200px));
        justify-content: center;
        gap: 90px 80px;
    }

    .l-cat-card__link {
        max-width: 200px;
        margin-inline: auto;
    }

    .l-cat-card__img-wrap {
        max-width: 200px;
        margin-bottom: 16px;
    }

    .l-cat-card__name {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .l-cat-card__name span {
        border-bottom-width: 5px;
    }

    .l-cat-card__info,
    .l-cat-card__meet {
        font-size: 16px;
    }

    .l-cat-card__info {
        margin-bottom: 10px;
    }

    .l-cat-card__status {
        font-size: 18px;
        line-height: 1.2;
        padding: 4px 24px;
        margin-bottom: 14px;
    }

    .l-cat-card__btn {
        min-height: 56px;
        font-size: 16px;
        padding: 0.85em 0.9em;
        border-radius: 8px 22px 22px 8px;
    }

    .l-cat-card__btn::after {
        width: 16px;
        height: 16px;
    }

    .l-cats-page__pagination {
        margin-top: 60px;
        gap: 16px;
    }

    .l-cats-page__pagination-prev,
    .l-cats-page__pagination-next {
        min-width: 64px;
        min-height: 48px;
        font-size: 14px;
    }

    .l-cats-page__pagination-list a {
        min-width: 48px;
        min-height: 48px;
        font-size: 15px;
    }
}

/* ==================================================
  保護猫詳細ページ (.l-cat-detail-page)
  このページ固有：ヒーロー・スペック・本文・ギャラリー・シェアのみ
  ※共通セクション（.l-flow 以降）は上書きしない
================================================== */

.l-cat-detail-page .l-section-arc--page .l-section-arc__inner {
    padding-top: 80px;
}

.l-cat-detail-page .l-section-arc--page .c-sub-catch {
    padding-top: 0;
    margin-bottom: 10px;
}

.l-cat-detail-page__hero-inner {
    padding-bottom: 0;
}

.l-cat-detail-page__hero-inner h1.js-anim-h2 {
    margin-bottom: 20px;
}

/* ヒーロー円形画像（カフェページと同じ基準） */
.l-cat-detail-page .l-responsibility__img.c-content-max {
    width: 280px;
    max-width: 280px;
    margin-top: 0;
    margin-bottom: 20px;
}

/* スペック（Figma：上下黄色ライン・幅200px） */
.l-cat-detail__spec {
    width: 100%;
    max-width: 200px;
    margin-inline: auto;
    padding: 16px 0;
    border-top: 3px solid var(--color-main);
    border-bottom: 3px solid var(--color-main);
    box-sizing: border-box;
}

.l-cat-detail__spec-list {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    font-size: 15px;
    line-height: 1.6;
    text-align: left;
}

.l-cat-detail__spec-list li::before {
    content: "・";
}

.l-cat-detail__meet {
    width: 100%;
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.6;
    text-align: center;
}

.l-cat-detail__status {
    display: block;
    font-size: 14px;
    font-weight: var(--fw-bold);
    line-height: 1.4;
    padding: 6px 16px;
    border-radius: 999px;
    text-align: center;
    background-color: var(--color-main);
    color: var(--color-text);
}

.l-cat-detail__status[data-status="trial"] {
    background-color: #b8e4e8;
}

.l-cat-detail__status[data-status="graduated"] {
    background-color: var(--color-bg-gray);
    color: var(--color-text);
}

/* 本文エリア：スペック下から60px（タブレット以上90px） */
.l-cat-detail__article-inner {
    padding-top: 60px;
}

/* --------------------------------------------------
   投稿本文：保護猫詳細・お知らせ詳細 共通
-------------------------------------------------- */
.l-cat-detail-page .entry-content,
.l-news-detail-page .entry-content {
    width: 100%;
    color: var(--color-text);
    font-size: 16px;
    line-height: 1.8;
}

.l-cat-detail-page .entry-content > *:first-child,
.l-news-detail-page .entry-content > *:first-child {
    margin-top: 0;
}

.l-cat-detail-page .entry-content > *:last-child,
.l-news-detail-page .entry-content > *:last-child {
    margin-bottom: 0;
}

.l-cat-detail-page .entry-content a,
.l-news-detail-page .entry-content a {
    color: var(--color-text);
    text-decoration: underline;
    text-decoration-color: var(--color-main);
    text-underline-offset: 0.25em;
    text-decoration-thickness: 2px;
}

/* 外部リンク：別サイトであることが分かるアイコン */
.l-cat-detail-page .entry-content a[target="_blank"]::after,
.l-news-detail-page .entry-content a[target="_blank"]::after {
    content: "";
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    margin-left: 0.25em;
    vertical-align: -0.05em;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23213548" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}

.l-cat-detail-page .entry-content h3,
.l-news-detail-page .entry-content h3 {
    font-size: 16px;
    font-weight: var(--fw-bold);
    line-height: 1.6;
    text-align: left;
    margin: 1.5em 0 0.75em;
}

.l-cat-detail-page .entry-content ul,
.l-news-detail-page .entry-content ul,
.l-cat-detail-page .entry-content ul.wp-block-list,
.l-news-detail-page .entry-content ul.wp-block-list {
    list-style: none;
    padding-left: 0;
    margin: 0 0 1.5em;
    text-align: left;
}

.l-cat-detail-page .entry-content ul li,
.l-news-detail-page .entry-content ul li {
    position: relative;
    padding-left: 1.6em;
    margin-bottom: 0.6em;
    line-height: 1.6;
}

.l-cat-detail-page .entry-content ul li:last-child,
.l-news-detail-page .entry-content ul li:last-child {
    margin-bottom: 0;
}

.l-cat-detail-page .entry-content ul li::before,
.l-news-detail-page .entry-content ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.25em;
    width: 1.2em;
    height: 1.2em;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2.5" fill="none" stroke="%23213548" stroke-width="3"/><path d="M7 12.5l3.5 3.5l7.5-8" fill="none" stroke="%23213548" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}

.l-cat-detail-page .entry-content ol,
.l-news-detail-page .entry-content ol,
.l-cat-detail-page .entry-content ol.wp-block-list,
.l-news-detail-page .entry-content ol.wp-block-list {
    margin: 0 0 1.5em;
    padding-left: 1.5em;
    text-align: left;
}

.l-cat-detail-page .entry-content ol li + li,
.l-news-detail-page .entry-content ol li + li {
    margin-top: 0.35em;
}

.l-cat-detail-page .entry-content blockquote,
.l-cat-detail-page .entry-content .wp-block-quote,
.l-news-detail-page .entry-content blockquote,
.l-news-detail-page .entry-content .wp-block-quote {
    margin: 1.5em 0;
    padding: 18px 22px;
    border: none;
    border-radius: 16px;
    background-color: var(--color-bg-yellow);
}

.l-cat-detail-page .entry-content blockquote p,
.l-news-detail-page .entry-content blockquote p {
    margin: 0;
    font-weight: var(--fw-bold);
    line-height: 1.7;
}

.l-cat-detail-page .entry-content hr,
.l-news-detail-page .entry-content hr {
    margin: 2em 0;
    border: 0;
    border-top: 1px solid rgba(33, 53, 72, 0.15);
}

.l-cat-detail-page .entry-content .wp-block-image,
.l-news-detail-page .entry-content .wp-block-image,
.l-cat-detail-page .entry-content figure:has(> img),
.l-news-detail-page .entry-content figure:has(> img) {
    margin-top: 3em;
    margin-bottom: 3em;
    margin-inline: 0;
}

/* 連続画像：写真と写真の間は 1em のみ（上下3emは重ねない） */
.l-cat-detail-page .entry-content .wp-block-image + .wp-block-image,
.l-news-detail-page .entry-content .wp-block-image + .wp-block-image,
.l-cat-detail-page .entry-content figure:has(> img) + figure:has(> img),
.l-news-detail-page .entry-content figure:has(> img) + figure:has(> img) {
    margin-top: 1em;
}

.l-cat-detail-page .entry-content .wp-block-image:has(+ .wp-block-image),
.l-news-detail-page .entry-content .wp-block-image:has(+ .wp-block-image),
.l-cat-detail-page .entry-content figure:has(> img):has(+ figure:has(> img)),
.l-news-detail-page .entry-content figure:has(> img):has(+ figure:has(> img)) {
    margin-bottom: 0;
}

.l-cat-detail-page .entry-content .wp-block-image img,
.l-news-detail-page .entry-content .wp-block-image img,
.l-cat-detail-page .entry-content figure img,
.l-news-detail-page .entry-content figure img,
.l-cat-detail-page .entry-content img,
.l-news-detail-page .entry-content img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 16px;
    margin: 0;
}

.l-cat-detail-page .entry-content p:has(> img:only-child),
.l-news-detail-page .entry-content p:has(> img:only-child) {
    margin-top: 3em;
    margin-bottom: 3em;
}

.l-cat-detail-page .entry-content p:has(> img:only-child) + p:has(> img:only-child),
.l-news-detail-page .entry-content p:has(> img:only-child) + p:has(> img:only-child) {
    margin-top: 1em;
}

.l-cat-detail-page .entry-content p:has(> img:only-child):has(+ p:has(> img:only-child)),
.l-news-detail-page .entry-content p:has(> img:only-child):has(+ p:has(> img:only-child)) {
    margin-bottom: 0;
}

.l-cat-detail-page .entry-content p:has(> img:only-child) img,
.l-news-detail-page .entry-content p:has(> img:only-child) img {
    margin: 0;
}

/* 猫詳細：見出し h2 は中央寄せ */
.l-cat-detail-page .entry-content h2 {
    font-size: 18px;
    font-weight: var(--fw-bold);
    line-height: 1.5;
    text-align: center;
    margin: 0 auto 20px;
}

/* ギャラリー：本文下60px（タブレット以上90px）・角丸32/48 */
.l-cat-detail__gallery {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 60px 0 0;
    padding: 0;
    list-style: none;
}

.l-cat-detail__gallery img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 32px;
}

/* シェア：ギャラリー（または本文）下80px（タブレット以上120px） */
.l-cat-detail__share {
    margin-top: 80px;
    text-align: center;
}

.l-cat-detail__share-title {
    margin-bottom: 24px;
}

.l-cat-detail__share-list {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.l-cat-detail__share-list .c-icon-sns {
    width: 44px;
    height: 44px;
}

@media screen and (min-width: 700px) {
    .l-cat-detail-page .l-section-arc--page .l-section-arc__inner {
        padding-top: 120px;
    }

    .l-cat-detail-page__hero-inner h1.js-anim-h2 {
        margin-bottom: 30px;
    }

    .l-cat-detail-page .l-responsibility__img.c-content-max {
        width: 300px;
        max-width: 300px;
        margin-bottom: 30px;
    }

    .l-cat-detail__spec-list {
        font-size: 16px;
    }

    .l-cat-detail__meet {
        font-size: 16px;
    }

    .l-cat-detail__status {
        font-size: 18px;
        padding: 4px 24px;
    }

    .l-cat-detail__article-inner {
        padding-top: 90px;
    }

    .l-cat-detail-page .entry-content h2 {
        font-size: 22px;
        margin-bottom: 30px;
    }

    .l-cat-detail-page .entry-content ul,
    .l-news-detail-page .entry-content ul {
        font-size: 24px;
    }

    .l-cat-detail-page .entry-content blockquote,
    .l-cat-detail-page .entry-content .wp-block-quote,
    .l-news-detail-page .entry-content blockquote,
    .l-news-detail-page .entry-content .wp-block-quote {
        margin: 2em 0;
        padding: 22px 28px;
        border-radius: 16px;
    }

    .l-cat-detail__gallery {
        gap: 30px;
        margin-top: 90px;
    }

    .l-cat-detail__gallery img {
        border-radius: 48px;
    }

    .l-cat-detail__share {
        margin-top: 120px;
    }

    .l-cat-detail__share-title {
        margin-bottom: 30px;
    }

    .l-cat-detail__share-list {
        gap: 40px;
    }

    .l-cat-detail__share-list .c-icon-sns {
        width: 48px;
        height: 48px;
    }
}

/* ==================================================
  活動理念・内容ページ (.l-mission-page)
  このページ固有：ヒーロー・代表テキスト・本文のみ
  ※共通セクション（.l-cafe-page__more 以降）は上書きしない
================================================== */

.l-mission-page .l-section-arc__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding-inline: var(--section-padding-x);
}

.l-mission-page .l-section-arc--page .l-section-arc__inner {
    padding-top: 80px;
}

.l-mission-page .l-section-arc--page .c-sub-catch {
    padding-top: 0;
    margin-bottom: 10px;
    line-height: 1.5;
}

.l-mission-page__inner h1.js-anim-h2 {
    margin-bottom: 20px;
}

.l-mission-page .l-responsibility__img.c-content-max {
    width: 280px;
    max-width: 280px;
    margin-top: 0;
    margin-bottom: 20px;
}

.l-mission-page__representative {
    margin: 0 auto 60px;
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
    color: var(--color-text);
}

.l-mission-page__representative-name {
    font-size: 20px;
    letter-spacing: 0.2em;
}

.l-mission-page .entry-content {
    width: 100%;
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.8;
    text-align: left;
}

.l-mission-page .entry-content > *:first-child {
    margin-top: 0;
}

.l-mission-page .entry-content > *:last-child {
    margin-bottom: 0;
}

.l-mission-page .entry-content p {
    margin: 0 0 1.2em;
}

.l-mission-page .entry-content p.is-style-lead {
    margin-bottom: 1.5em;
}

.l-mission-page .entry-content h2 {
    font-size: 16px;
    font-weight: var(--fw-bold);
    line-height: 1.6;
    text-align: left;
    text-decoration: underline;
    text-decoration-color: var(--color-main);
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
    margin: 40px 0 20px;
}

.l-mission-page .entry-content h2:first-child {
    margin-top: 0;
}

.l-mission-page .entry-content ul,
.l-mission-page .entry-content ul.wp-block-list {
    list-style: none;
    padding-left: 0;
    margin: 0 0 1.2em;
}

.l-mission-page .entry-content ul li {
    position: relative;
    padding-left: 1.6em;
    margin-bottom: 0.5em;
    line-height: 1.7;
}

.l-mission-page .entry-content ul li:last-child {
    margin-bottom: 0;
}

/* 通常リスト：丸印 */
.l-mission-page .entry-content ul:not(.c-list-check) li::before {
    content: "";
    position: absolute;
    left: 0.45em;
    top: 0.7em;
    width: 0.35em;
    height: 0.35em;
    border-radius: 50%;
    background-color: var(--color-text);
}

/* チェックリスト：本文と同じサイズ（共通 .c-list-check の拡大を打ち消す） */
.l-mission-page .entry-content ul.c-list-check {
    margin-bottom: 1.5em;
    font-size: inherit;
    max-width: none;
}

.l-mission-page .entry-content ul.c-list-check li {
    font-size: inherit;
    line-height: 1.7;
}

.l-mission-page .entry-content ul.c-list-check li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 1.2em;
    height: 1.2em;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2.5" fill="none" stroke="%23213548" stroke-width="3"/><path d="M7 12.5l3.5 3.5l7.5-8" fill="none" stroke="%23213548" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 0;
    background-color: transparent;
}

.l-mission-page .entry-content blockquote,
.l-mission-page .entry-content .wp-block-quote {
    margin: 1.5em 0;
    padding: 18px 22px;
    border: none;
    border-radius: 16px;
    background-color: var(--color-bg-yellow);
}

.l-mission-page .entry-content blockquote p {
    margin: 0;
    font-weight: var(--fw-bold);
    line-height: 1.7;
}

.l-mission-page .entry-content hr,
.l-mission-page .entry-content .wp-block-separator {
    margin: 36px auto;
    border: 0;
    border-top: 1px solid rgba(33, 53, 72, 0.12);
    max-width: 80px;
}

/* シェア：本文下80px（タブレット以上120px） */
.l-content-share {
    margin-top: 80px;
    text-align: center;
}

.l-content-share__title {
    margin-bottom: 24px;
}

.l-content-share__list {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.l-content-share__list .c-icon-sns {
    width: 44px;
    height: 44px;
}

/* フォロー：本文下80px（タブレット以上120px） */
.l-mission-page__follow {
    margin-top: 80px;
    margin-bottom: 0;
    text-align: center;
}

.l-mission-page__follow-title {
    margin-bottom: 24px;
}

.l-mission-page__follow-list {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.l-mission-page__follow-list .c-icon-sns {
    width: 44px;
    height: 44px;
}

@media screen and (min-width: 700px) {
    .l-mission-page .l-section-arc--page .l-section-arc__inner {
        padding-top: 120px;
    }

    .l-mission-page__inner h1.js-anim-h2 {
        margin-bottom: 30px;
    }

    .l-mission-page .l-responsibility__img.c-content-max {
        width: 300px;
        max-width: 300px;
        margin-bottom: 30px;
    }

    .l-mission-page__representative {
        margin-bottom: 90px;
        font-size: 14px;
    }

    .l-mission-page__representative-name {
        font-size: 22px;
    }

    .l-mission-page .entry-content {
        font-size: 16px;
    }

    .l-mission-page .entry-content h2 {
        font-size: 24px;
        margin: 60px 0 30px;
    }

    .l-mission-page .entry-content h2:first-child {
        margin-top: 0;
    }

    .l-mission-page .entry-content blockquote,
    .l-mission-page .entry-content .wp-block-quote {
        margin: 2em 0;
        padding: 22px 28px;
        border-radius: 16px;
    }

    .l-mission-page .entry-content hr,
    .l-mission-page .entry-content .wp-block-separator {
        margin: 48px auto;
    }

    .l-content-share {
        margin-top: 120px;
    }

    .l-content-share__title {
        margin-bottom: 30px;
    }

    .l-content-share__list {
        gap: 40px;
    }

    .l-content-share__list .c-icon-sns {
        width: 48px;
        height: 48px;
    }

    .l-mission-page__follow {
        margin-top: 120px;
    }

    .l-mission-page__follow-title {
        margin-bottom: 30px;
    }

    .l-mission-page__follow-list {
        gap: 40px;
    }

    .l-mission-page__follow-list .c-icon-sns {
        width: 48px;
        height: 48px;
    }
}

/* ==================================================
  口座表（2列）— 支援ページなど
================================================== */
.c-price-table--account col:nth-child(1) {
    width: 40%;
}

.c-price-table--account col:nth-child(2) {
    width: 60%;
}

/* ==================================================
  支援のお願いページ (.l-support-page)
  このページ固有：ヒーロー・本文・支援の方法・支援のお礼のみ
  ※共通セクション（.l-cafe-page__more 以降）は上書きしない
================================================== */

.l-support-page .l-section-arc__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding-inline: var(--section-padding-x);
}

.l-support-page .l-section-arc--page .l-section-arc__inner {
    padding-top: 80px;
}

.l-support-page .l-section-arc--page .c-sub-catch {
    padding-top: 0;
    margin-bottom: 10px;
    line-height: 1.5;
}

.l-support-page__inner h1.js-anim-h2 {
    margin-bottom: 20px;
}

.l-support-page .l-responsibility__img.c-content-max {
    width: 280px;
    max-width: 280px;
    margin-top: 0;
    margin-bottom: 60px;
}

.l-support-page .entry-content {
    width: 100%;
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.8;
    text-align: left;
}

.l-support-page .entry-content > *:first-child {
    margin-top: 0;
}

.l-support-page .entry-content > *:last-child {
    margin-bottom: 0;
}

.l-support-page .entry-content p {
    margin: 0 0 1.2em;
}

.l-support-page .entry-content p.is-style-lead {
    margin-bottom: 1.5em;
}

.l-support-page .entry-content h2 {
    font-size: 16px;
    font-weight: var(--fw-bold);
    line-height: 1.6;
    text-align: left;
    text-decoration: underline;
    text-decoration-color: var(--color-main);
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
    margin: 40px 0 20px;
}

.l-support-page .entry-content h2:first-child {
    margin-top: 0;
}

.l-support-page .entry-content ul,
.l-support-page .entry-content ul.wp-block-list {
    list-style: none;
    padding-left: 0;
    margin: 0 0 1.2em;
}

.l-support-page .entry-content ul li {
    position: relative;
    padding-left: 1.6em;
    margin-bottom: 0.5em;
    line-height: 1.7;
}

.l-support-page .entry-content ul li:last-child {
    margin-bottom: 0;
}

.l-support-page .entry-content ul:not(.c-list-check) li::before {
    content: "";
    position: absolute;
    left: 0.45em;
    top: 0.7em;
    width: 0.35em;
    height: 0.35em;
    border-radius: 50%;
    background-color: var(--color-text);
}

.l-support-page .entry-content ul.c-list-check {
    margin-bottom: 1.5em;
    font-size: inherit;
    max-width: none;
}

.l-support-page .entry-content ul.c-list-check li {
    font-size: inherit;
    line-height: 1.7;
}

.l-support-page .entry-content ul.c-list-check li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 1.2em;
    height: 1.2em;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2.5" fill="none" stroke="%23213548" stroke-width="3"/><path d="M7 12.5l3.5 3.5l7.5-8" fill="none" stroke="%23213548" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 0;
    background-color: transparent;
}

.l-support-page .entry-content blockquote,
.l-support-page .entry-content .wp-block-quote {
    margin: 1.5em 0;
    padding: 18px 22px;
    border: none;
    border-radius: 16px;
    background-color: var(--color-bg-yellow);
}

.l-support-page .entry-content blockquote p {
    margin: 0;
    font-weight: var(--fw-bold);
    line-height: 1.7;
}

.l-support-page .entry-content hr,
.l-support-page .entry-content .wp-block-separator {
    margin: 36px auto;
    border: 0;
    border-top: 1px solid rgba(33, 53, 72, 0.12);
    max-width: 80px;
}

.l-support-page__methods-inner,
.l-support-page__thanks-inner {
    text-align: center;
}

.l-support-page__methods .c-sub-catch,
.l-support-page__thanks .c-sub-catch {
    padding-top: 0;
}

/* 口座表：値セルは白（ラベル列は黄色のまま） */
.l-support-page .c-price-table--account .c-price-table__cell--pale {
    background-color: var(--color-white);
}

.l-support-page__thanks-inner .c-content-max > p:not(.c-sub-catch) {
    text-align: left;
}

.l-support-page__methods-heading {
    font-size: 15px;
    font-weight: var(--fw-bold);
    line-height: 1.6;
    text-align: center;
}

.l-support-page__methods-lead {
    font-size: 15px;
    line-height: 1.6;
    text-align: left;
    margin-bottom: 40px;
}

.l-support-page__methods .c-note {
    text-align: center;
}

@media screen and (min-width: 700px) {
    .l-support-page .l-section-arc--page .l-section-arc__inner {
        padding-top: 120px;
    }

    .l-support-page__inner h1.js-anim-h2 {
        margin-bottom: 30px;
    }

    .l-support-page .l-responsibility__img.c-content-max {
        width: 300px;
        max-width: 300px;
        margin-bottom: 90px;
    }

    .l-support-page .entry-content {
        font-size: 16px;
    }

    .l-support-page .entry-content h2 {
        font-size: 24px;
        margin: 60px 0 30px;
    }

    .l-support-page .entry-content h2:first-child {
        margin-top: 0;
    }

    .l-support-page .entry-content blockquote,
    .l-support-page .entry-content .wp-block-quote {
        margin: 2em 0;
        padding: 22px 28px;
        border-radius: 16px;
    }

    .l-support-page .entry-content hr,
    .l-support-page .entry-content .wp-block-separator {
        margin: 48px auto;
    }

    .l-support-page__methods-heading {
        font-size: 16px;
    }

    .l-support-page__methods-lead {
        font-size: 16px;
        margin-bottom: 60px;
    }
}

/* ==================================================
  お知らせ一覧ページ (.l-news-page)
  一覧カードは .l-news__list を流用
  ページャーは保護猫一覧と同型（グレー背景用の色のみ変更）
================================================== */

.l-news-page .l-section-arc__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding-inline: var(--section-padding-x);
}

.l-news-page .l-section-arc--page .l-section-arc__inner {
    padding-top: 80px;
}

.l-news-page .l-section-arc--page .c-sub-catch {
    padding-top: 0;
    margin-bottom: 10px;
    line-height: 1.5;
}

.l-news-page__hero-inner h1.js-anim-h2 {
    margin-bottom: 20px;
}

.l-news-page__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 0;
}

.l-news-page__pagination-prev,
.l-news-page__pagination-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    min-height: 44px;
    padding: 0.5em 0.75em;
    border: 1px solid var(--color-text);
    border-radius: 999px;
    color: var(--color-text);
    font-size: 13px;
    font-weight: var(--fw-bold);
    text-decoration: none;
    box-sizing: border-box;
}

.l-news-page__pagination-prev.is-disabled,
.l-news-page__pagination-prev[aria-disabled="true"] {
    opacity: 0.35;
    pointer-events: none;
}

.l-news-page__pagination-list {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.l-news-page__pagination-list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 0.5em;
    border: 1px solid var(--color-text);
    border-radius: 50%;
    color: var(--color-text);
    font-size: 14px;
    font-weight: var(--fw-bold);
    text-decoration: none;
    box-sizing: border-box;
}

.l-news-page__pagination-list a.is-current,
.l-news-page__pagination-list a[aria-current="page"] {
    background-color: var(--color-main);
    border-color: var(--color-main);
    color: var(--color-text);
}

@media screen and (min-width: 700px) {
    .l-news-page .l-section-arc--page .l-section-arc__inner {
        padding-top: 120px;
    }

    .l-news-page__hero-inner h1.js-anim-h2 {
        margin-bottom: 30px;
    }

    .l-news-page__pagination {
        gap: 16px;
    }

    .l-news-page__pagination-prev,
    .l-news-page__pagination-next {
        min-width: 64px;
        min-height: 48px;
        font-size: 14px;
    }

    .l-news-page__pagination-list a {
        min-width: 48px;
        min-height: 48px;
        font-size: 16px;
    }
}

/* ==================================================
  お知らせ詳細ページ (.l-news-detail-page)
  猫詳細ページと同型：ヒーロー・本文・シェアのみ
  ※共通セクション（.l-cafe-page__more 以降）は上書きしない
================================================== */

.l-news-detail-page .l-section-arc__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding-inline: var(--section-padding-x);
}

.l-news-detail-page .l-section-arc--page .l-section-arc__inner {
    padding-top: 80px;
}

.l-news-detail-page .l-section-arc--page .c-sub-catch {
    padding-top: 0;
    margin-bottom: 10px;
    line-height: 1.5;
}

.l-news-detail-page__hero-inner h1.js-anim-h2 {
    margin-bottom: 40px;
}

/*
  縦余白（Figma node 162-620）
  ・h1下 → 写真：h1 margin-bottom 40px（タブレット以上 48px）
  ・写真 → 記事タイトル：40px（タブレット以上 60px＝1.5倍）
  ・記事タイトル → 本文：20px（タブレット以上 24px）
*/
.l-news-detail__eyecatch {
    width: 100%;
    margin: 0 0 40px;
    border-radius: 32px;
    overflow: hidden;
}

.l-news-detail__eyecatch img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

/* 投稿タイトル：一覧カード .l-news__title と同系統 */
.l-news-detail__post-title {
    font-size: 16px;
    font-weight: var(--fw-bold);
    line-height: 1.6;
    text-align: left;
    margin: 0 0 20px;
}

.l-news-detail-page .entry-content h2 {
    font-size: 16px;
    font-weight: var(--fw-bold);
    line-height: 1.6;
    text-align: left;
    margin: 1.5em 0 0.75em;
}

.l-news-detail__share {
    margin-top: 80px;
    text-align: center;
}

.l-news-detail__share-title {
    margin-bottom: 24px;
}

.l-news-detail__share-list {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.l-news-detail__share-list .c-icon-sns {
    width: 44px;
    height: 44px;
}

@media screen and (min-width: 700px) {
    .l-news-detail-page .l-section-arc--page .l-section-arc__inner {
        padding-top: 120px;
    }

    .l-news-detail-page__hero-inner h1.js-anim-h2 {
        margin-bottom: 48px;
    }

    .l-news-detail__eyecatch {
        margin-bottom: 60px;
        border-radius: 48px;
    }

    .l-news-detail__post-title {
        font-size: 20px;
        margin-bottom: 24px;
    }

    .l-news-detail__share {
        margin-top: 120px;
    }

    .l-news-detail__share-title {
        margin-bottom: 30px;
    }

    .l-news-detail__share-list {
        gap: 40px;
    }

    .l-news-detail__share-list .c-icon-sns {
        width: 48px;
        height: 48px;
    }
}