/* =======================================================================
   cotohana — app.css (clean, floating CTA, hero, magazine, about)
   ※ フッターボタン=全幅フィット / About=決定版Timeline
   ======================================================================= */

/* =========================================================
   TOKENS — 色 / 余白 / タイポ / 角丸 / 影 / サイズ
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap');

:root{
  /* Colors */
  --c-beige:#F0EAE0; --c-yellow:#FDE23D; --c-pink:#F5C0BF;
  --c-green:#5AC783; --c-lightblue:#38B6FF; --c-black:#000;
  --c-text:var(--c-black); --c-muted:rgba(0,0,0,.6); --c-border:rgba(0,0,0,.08);

  /* Radius / Shadow */
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-pill:9999px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 6px 16px rgba(0,0,0,.08);

  /* Spacing */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;

  /* Typography */
  --fz-base:clamp(15px,1.6vw,17px);
  --lh-base:1.75;


  /* Fonts */
  --ff-title:"Kiwi Maru","Hiragino Mincho ProN","Yu Mincho",serif;
  --ff-key:"Zen Maru Gothic","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --ff-body:"Kiwi Maru","Hiragino Mincho ProN","Yu Mincho",serif;
  --ff-table:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","Meiryo","Noto Sans JP",sans-serif;

  /* Non-TOP HERO fonts */
  --ff-hero-en:"Montserrat","Suez One","Times New Roman",serif;
  --ff-hero-ja:"Kiwi Maru","Hiragino Mincho ProN","Yu Mincho",serif;

  /* Sizes */
  --logo-h-mb:42px; --logo-h-pc:72px;
  --hero-h: clamp(320px, 60vh, 560px);
  --float-cta-size: clamp(80px, 11vw, 120px);
  --float-cta-top: 10px; --float-cta-right:12px;
  --gutter-mobile:max(18px,6vw); 
  --stickynav-safe:50px; --stickynav-h:64px;
  --anchor-offset: clamp(72px, 10vw, 120px);
  --post-img-radius:0px;
}

/* =========================================================
   BASE
   ========================================================= */
html,body{height:100%;color:#000;}
html,body{margin:0!important;padding:0!important;}
html{margin-top:0!important;} /* WP管理バーの押し下げ無効の保険 */

body{
  font-family:var(--ff-body);
  font-size:var(--fz-base);
  line-height:var(--lh-base);
  color:var(--c-text);
  background:#fff;
  text-rendering:optimizeLegibility;
  padding-bottom: var(--stickynav-safe); /* ← フッターボタン安全余白 */
}
body > *:first-child{ margin-top:0!important; }

a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;vertical-align:middle;display:block;}
figure{margin:0;}
h1,h2,h3,h4{
  font-family:var(--ff-title);
  letter-spacing:.02em;color:var(--c-text);margin:0 0 .6em;text-align:justify;
}
.l-container{width:min(1200px,92vw);margin-inline:auto;text-align:center;}
.is-fullbleed{width:100vw;margin-inline:calc(50% - 50vw);}
.c-section{padding:clamp(16px,3vw,36px) 0;}

.c-section__title,
.c-section > .l-container > .c-section__title,
.c-section .c-section__title,
.l-container > h2.c-section__title,
h2.c-section__title{
  font-size:clamp(22px,2.6vw,34px);
  text-align:center!important;display:block!important;width:fit-content;
  margin:0 auto clamp(18px,3.6vw,30px)!important;position:relative; width:auto;
}
.c-section__title::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:120px;height:3px;background:var(--c-yellow);border-radius:2px;
}
.c-section__lead{font-family:var(--ff-key);color:var(--c-muted);max-width:62ch;margin:.5em auto 0;text-align:justify;}

.c-hr{width:86px;height:2px;background:#000;opacity:.2;margin:8px auto 16px;}
@media (min-width:1024px){ .c-hr{width:120px;} }

.u-center{text-align:center;}
.u-mt-6{margin-top:var(--sp-6);} .u-mb-6{margin-bottom:var(--sp-6);}
.u-justify-center{text-align:justify;text-justify:inter-ideograph;}

@media (max-width:767.98px){
  .l-container{padding-inline:var(--gutter-mobile);}
  /*.entry-content,.post-content,.page .l-container,.cf-links__inner,.ch-inner{padding-inline:var(--gutter-mobile);} */
  body{line-height:1.85;}
  p,.wp-block-paragraph{line-height:1.9;letter-spacing:.01em;margin-bottom:1em;}
  h1,h2,h3,h4{line-height:1.35;margin:.8em 0 .4em;}
}

/* =========================================================
   GENERIC UI
   ========================================================= */
.c-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:6px 18px;border-radius:var(--radius-pill);font-weight:700;
  border:1px solid transparent;box-shadow:var(--shadow-sm);
  transition:transform .08s ease,box-shadow .2s ease,background-color .2s;
  font-family:var(--ff-key); font-size:14px;
}
.c-btn--primary{background:var(--c-green);color:#fff;}
.c-btn--accent{background:var(--c-yellow);color:#3a3100;}
.c-btn--info{background:var(--c-lightblue);color:#063a5a;}
.c-btn--ghost{background:#fff;border-color:var(--c-border);}
.c-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);}
.c-btn--more span{display:inline-block;transform:translateY(1px);}

.c-badge{
  display:inline-block;padding:6px 12px;border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--c-green) 20%,#fff);color:#124e34;
  font-weight:600;font-size:12px;
}

/* Cards */
.cards{display:grid;gap:clamp(12px,2vw,24px);grid-template-columns:1fr;}
@media (min-width:768px){.cards{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1024px){.cards{grid-template-columns:repeat(3,1fr);gap:20px;}}
@media (min-width:1280px){.cards{grid-template-columns:repeat(4,1fr);}}
.card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--c-border);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);
}
.card__thumb img{width:100%;aspect-ratio:16/9;object-fit:cover;}
.card__body{padding:clamp(10px,2vw,16px);}
.card__title{font-family:var(--ff-title);font-size:clamp(16px,1.8vw,18px);margin:0 0 .5em;}
.card__meta{font-size:12px;color:var(--c-muted);margin-bottom:.5em;}

/* Table */
.wp-block-table,.c-table,.c-table th,.c-table td{font-family:var(--ff-table);}
.c-table{
  width:100%;border-collapse:collapse;font-size:14px;background:#fff;
  border:1px solid var(--c-border);border-radius:var(--radius-md);overflow:hidden;
}
.c-table th,.c-table td{padding:10px 12px;border-bottom:1px solid var(--c-border);vertical-align:top;}
.c-table tr:nth-child(even){background:rgba(0,0,0,.02);}

/* =========================================================
   HEADER
   ========================================================= */
.ch-tape{display:block;}
.ch-tape::before{
  content:"";display:block;height:12px;
  background:repeating-linear-gradient(-45deg,#fde23d9e 0 8px,transparent 8px 16px);
}
@media (min-width:1024px){ .ch-tape::before{height:14px;} }

.ch-bar{background:#fff;color:#000;box-shadow:0 2px 8px rgba(0,0,0,.06);min-height:56px;}
@media (min-width:1024px){ .ch-bar{min-height:64px;} }

.ch-inner{
  width:min(1200px,92vw);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;
}
.ch-actions{display:flex;align-items:center;gap:12px;margin-left:auto;}
.ch-brand__img{display:block;height:var(--logo-h-mb);width:auto;}
@media (min-width:1024px){ .ch-brand__img{height:var(--logo-h-pc);} }
.ch-sns{display:flex;align-items:center;gap:12px;}
.ch-sns__item img{display:block;width:28px;height:28px;}
@media (max-width:420px){ .ch-sns__item img{width:24px;height:24px;} }
.ch-menu-toggle{
  width:42px;height:36px;display:inline-grid;place-content:center;gap:5px;
  border:none;background:transparent;box-shadow:none;cursor:pointer;
}
.ch-menu-toggle span{display:block;width:22px;height:3px;background:#000;border-radius:2px;}
.ch-actions .ch-cta--img{display:none!important;}

/* Drawer */
.ch-drawer{
  position:fixed;inset:0 0 0 auto;width:min(86vw,360px);
  background:#fff;color:#000;box-shadow:-16px 0 40px rgba(0,0,0,.18);
  transform:translateX(100%);transition:transform .25s ease;z-index:1000;padding:20px;
}
.ch-drawer__inner{height:100%;overflow:auto;}
.ch-menu{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.ch-menu a{display:block;padding:12px 10px;border-radius:12px;color:#000;text-decoration:none;}
.ch-drawer__overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:999;}
body.is-ch-open #ch-drawer{transform:translateX(0);}
body.is-ch-open .ch-drawer__overlay{display:block;}

/* =========================================================
   FOOTER
   ========================================================= */
.cf-footer{margin-top:var(--sp-6);padding-bottom:calc(var(--stickynav-safe) + 8px);}
.cf-links{
  background:
    repeating-linear-gradient(-45deg,#fde23d9e 0 8px,transparent 8px 16px),
    #fff;
}
.cf-links__inner{display:grid;gap:24px;grid-template-columns:1fr;padding:clamp(24px,6vw,56px) 0 clamp(28px,6vw,64px);}
@media (min-width:1024px){.cf-links__inner{grid-template-columns:1fr 1fr;}}
.cf-menu{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.cf-menu a{color:#666;font-weight:700;text-decoration:none;padding:.2em 0;}
.cf-menu a:hover{text-decoration:underline;}
.cf-copy{background:#fff;border-top:1px solid var(--c-border);color:var(--c-muted);font-size:14px;padding:10px 0 18px;}
.cf-copy,.cf-copy .l-container,.cf-copy p{ text-align:center!important; }
.cf-copy .l-container{ display:flex;justify-content:center;align-items:center; }
.cf-copy p{ margin:0; }

/* =========================================================
   Sticky 3 Buttons（画面幅フィット）
   ========================================================= */
.stickynav{
  position:fixed;inset:auto 0 0 0;width:100vw;z-index:999;
  box-sizing:border-box;padding:0 clamp(12px,4vw,20px);
  display:grid!important;grid-template-columns:1fr 1fr clamp(56px,13vw,64px);
  gap:clamp(8px,2.6vw,14px);
  bottom:max(0px, env(safe-area-inset-bottom));
}
.stickynav__btn{
  min-width:0;height:var(--stickynav-h)!important;padding:0 clamp(12px,2.8vw,18px);
  line-height:1.15;display:flex;align-items:center;justify-content:center;gap:12px;
  border:none;border-radius:16px;font-weight:800;font-size:clamp(14px,3.4vw,18px);color:#fff;
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}
.stickynav__btn img{width:24px;height:24px;display:block;}
.stickynav__btn.is-support,.stickynav__btn.is-navi{background:var(--c-lightblue);}
.stickynav__btn.is-menu{
  min-height:var(--stickynav-h)!important;justify-content:center;background:var(--c-green);
  border-bottom-left-radius:0;border-bottom-right-radius:0;
}
.stickynav__btn:not(.is-menu){
  border-bottom-left-radius:0!important;border-bottom-right-radius:0!important;
  box-shadow:0 6px 14px rgba(0,0,0,.10);
}
@media (max-width:480px){:root{--stickynav-h:60px;}}
@media (max-width:360px){
  :root{--stickynav-h:56px;}
  .stickynav{grid-template-columns:1fr 1fr 52px;gap:8px;}
  .stickynav__btn{height:var(--stickynav-h)!important;}
}

/* 右メニューボタンの細かな補正 */
.stickynav__btn.is-menu{
  writing-mode: horizontal-tb !important;
  white-space: nowrap;
}
.stickynav__btn.is-menu .label{ display:none !important; }
.stickynav__hamb{ display:inline-grid; gap:4px; }
.stickynav__hamb i{ width:26px; height:4px; background:#fff; border-radius:2px; display:block; }
.stickynav__btn.is-menu :is(img,svg){ width:24px; height:24px; display:block; margin:0 auto; }

/* --- Visual Viewport 対策: 下ツールバーぶん持ち上げる --- */
:root { --vvb: 0px; }

/* フッターボタン本体を“常に”ツールバーの上に */
.stickynav { bottom: max(var(--vvb, 0px), env(safe-area-inset-bottom)); }

/* 必要に応じて、コンテンツ側の確保量も増やす（TOPだけに効かせたいなら .home に） */
.home .cf-footer { padding-bottom: calc(var(--stickynav-safe) + 8px + var(--vvb, 0px)); }

/* =========================================================
   HSNAP（横スワイプ）＆ドット
   ========================================================= */
.hsnap{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.hsnap::-webkit-scrollbar{display:none;}
.hsnap__item{flex:0 0 100%;scroll-snap-align:center;position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);background:#fff;}
.dots{display:flex;gap:8px;justify-content:center;align-items:center;padding:10px 0;}
.dot{width:8px;height:8px;border-radius:9999px;background:rgba(0,0,0,.2);}
.dot.is-active{background:var(--c-green);}

/* =========================================================
   HERO（トップ）
   ========================================================= */
.hero{position:relative;}
.hero .hsnap{
  display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;height:var(--hero-h);
}
.hero .hsnap > *{
  flex:0 0 100%;scroll-snap-align:center;height:var(--hero-h);border-radius:0;overflow:hidden;
}
.hero .hsnap img{width:100%;height:100%;object-fit:cover;object-position:center;}

/* PC：高さ上限（4:3換算思考） */
.hero.hero--4x3{ --hero-h: min(75vw, 82vh); }
@media (min-width:1024px){ .hero.hero--4x3{ --hero-h: min(75vw, 72vh); } }

/* SP：16:9表示 */
@media (max-width:767.98px){
  .hero.hero--4x3 .hsnap,
  .hero.hero--4x3 .hsnap > *{ height:auto!important; aspect-ratio:16/9; border-radius:0; }
  .hero.hero--4x3 .hsnap img{ width:100%!important; height:100%!important; object-fit:cover!important; }
}

/* HERO ナビ */
.hero__nav{position:absolute;inset:0;pointer-events:none;}
.hero .dots{position:absolute;left:50%;transform:translateX(-50%);bottom:10px;margin-top:0;}
.navbtn{
  position:absolute;top:50%;transform:translateY(-50%);
  display:block!important;width:46px;height:46px;border-radius:9999px;background:rgba(255,255,255,.96);
  border:1px solid var(--c-border);box-shadow:var(--shadow-sm);font-size:0;line-height:0;color:transparent;overflow:hidden;
}

/* =========================================================
   FLOATING CTA
   ========================================================= */
.ch-cta--float{
  position:fixed;top:var(--float-cta-top);right:var(--float-cta-right);
  width:var(--float-cta-size);height:var(--float-cta-size);z-index:1001;background:transparent;border:0;border-radius:9999px;box-shadow:var(--shadow-sm);overflow:hidden;
}
.ch-cta--float img{width:100%;height:100%;object-fit:contain;}
body.is-ch-open .ch-cta--float{opacity:0;pointer-events:none;}
body.admin-bar .ch-cta--float{top:calc(var(--float-cta-top) + 32px);}
@supports (padding:max(0px)){.ch-cta--float{top:max(var(--float-cta-top), env(safe-area-inset-top));}}

/* =========================================================
   WEBマガジン（PC=4列 / SP=カルーセル）
   ========================================================= */
.only-sp{display:none;} .only-pc{display:block;}
@media (max-width:767.98px){.only-sp{display:block!important;}.only-pc{display:none!important;}}

.mag-grid{display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr));}
.mag-card{background:#fff;border:2px solid var(--c-yellow);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);}
.mag-card__thumb img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-bottom:1px solid var(--c-border);}
.mag-card__body{padding:12px 14px 14px;}
.mag-chip{
  display:inline-block;padding:4px 10px;margin-bottom:8px;border-radius:9999px;font-size:12px;font-weight:700;
  background:color-mix(in srgb,var(--c-yellow) 45%,#fff);color:#3a3100;
}
.mag-card__title{font-family:var(--ff-title);font-size:clamp(16px,1.8vw,18px);margin:0;}

/* SPカルーセル */
.is-magazine .mag-spwrap{position:relative;}
#mag-snap.hsnap{gap:16px;}
#mag-snap .mag-card{flex:0 0 100%;}
#mag-snap .mag-card__thumb img{aspect-ratio:4/3;object-fit:cover;}
@media (max-width:767.98px){
  .is-magazine .mag__nav{position:absolute;inset:0;pointer-events:none;}
  .is-magazine .mag__nav .navbtn{pointer-events:auto;top:50%;transform:translateY(-50%);}
  #mag-dots{position:static!important;transform:none!important;bottom:auto!important;margin:12px auto 0!important;}
  .is-magazine .mag-card__body{padding:12px 8px 12px;}
}

/* =========================================================
   活動 / News — 横長リスト
   ========================================================= */
.list{display:flex;flex-direction:column;gap:14px;}
.listitem{
  display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--c-border);
  border-radius:16px;padding:12px;box-shadow:var(--shadow-sm);transition:box-shadow .2s ease,transform .06s ease;
}
.listitem:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);}
.listitem__thumb{display:block;flex:0 0 112px;border-radius:12px;overflow:hidden;}
.listitem__thumb img{width:112px;height:112px;object-fit:cover;display:block;}
.listitem__body{flex:1 1 auto;min-width:0;text-align:justify;}
.listitem__chip{
  display:inline-block;padding:6px 12px;margin-bottom:6px;border-radius:9999px;font-size:12px;font-weight:700;
  background:color-mix(in srgb,var(--c-yellow) 45%,#fff);color:#3a3100;
}
.listitem__title{font-family:var(--ff-title);font-size:clamp(16px,1.8vw,18px);margin:0;line-height:1.45;}

/* 活動パーツ */
.act-list{display:flex;flex-direction:column;gap:14px;margin:0;padding:0;list-style:none;}
.act-link{
  display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--c-border);
  border-radius:16px;padding:12px;box-shadow:var(--shadow-sm);transition:box-shadow .2s ease,transform .06s ease;
}
.act-link:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);}
.act-thumb{flex:0 0 112px;border-radius:12px;overflow:hidden;}
.act-thumb img{width:112px;height:112px;object-fit:cover;display:block;}
.act-body{flex:1 1 auto;min-width:0;display:grid;}
.act-chip{
  display:inline-block;padding:6px 12px;margin-bottom:6px;border-radius:9999px;font-size:12px;font-weight:700;
  background:color-mix(in srgb,var(--c-yellow) 45%,#fff);color:#3a3100;
}
.act-title{font-family:var(--ff-title);font-size:clamp(16px,1.8vw,18px);line-height:1.45;margin:0;}

/* ラベルは中身幅 */
.act-chip,.mag-chip,.listitem__chip{display:inline-block;width:max-content;max-width:100%;justify-self:start;}

/* タイトルクランプ */
@media (min-width:768px){
  .act-title,.listitem__title,.listitem__title a{
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;
  }
}
@media (max-width:767.98px){
  .listitem{min-height:100px;padding:10px 12px;gap:12px;}
  .listitem__thumb{flex-basis:100px;}
  .listitem__thumb img{width:100px;height:100px;object-fit:cover;}
  .listitem__title{font-size:12px!important;}
  .act-link{min-height:100px;padding:10px 12px;gap:12px;}
  .act-thumb{flex-basis:100px;}
  .act-thumb img{width:100px;height:100px;object-fit:cover;}
  .act-title{font-size:12px!important;}
  .act-chip,.listitem__chip,.mag-chip{font-size:10px!important;height:24px;line-height:24px;border-radius:9999px;}
  .c-btn--more{font-size:10px!important;min-height:30px;display:inline-flex;align-items:center;justify-content:center;}
}

/* =========================================================
   About — HERO / 事業紹介 / スタッフ / 概要
   ========================================================= */
.ab-hero{background:#fff;padding:clamp(36px,10vw,96px) 0 clamp(28px,6vw,56px);}
.ab-hero__inner{text-align:center;}
.ab-hero .ab-hero__bee :is(svg,img){width:36px;height:36px;margin:0 auto 8px;display:block;}
/* Aboutの見出しは non-TOP HEROフォントで統一 */
.ab-hero .ab-hero__title{
  font-family: var(--ff-hero-en)!important;font-weight:400;text-transform:uppercase;
  letter-spacing:.02em;line-height:1;font-size:clamp(32px,8vw,72px);
  color: color-mix(in srgb, var(--c-beige) 60%, #000);
}
.ab-hero .ab-hero__lead{
  font-family: var(--ff-hero-ja)!important;font-weight:700;letter-spacing:.04em;color:var(--c-green);margin:0;
}

/* 事業紹介カード */
.biz-grid{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr));}
@media (min-width:840px){.biz-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
.biz-card{background:#fff;border:1px solid var(--c-border);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;height:100%;}
.biz-card__thumb{position:relative;display:block;overflow:hidden;}
.biz-card__thumb img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.biz-chip{position:absolute;left:10px;top:10px;padding:4px 10px;border-radius:9999px;font-size:12px;font-weight:700;background:color-mix(in srgb,var(--c-yellow) 45%,#fff);color:#3a3100;}
.biz-card__body{padding:12px 14px 16px;display:grid;gap:8px;}
.biz-card__text{margin:0;color:var(--c-muted);font-size:14px;}

/* スタッフ */
.staff-grid{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr));}
@media (min-width:760px){.staff-grid{grid-template-columns:repeat(6,minmax(0,1fr));}}
.staff-card{appearance:none;border:0;background:transparent;padding:0;cursor:pointer;display:grid;gap:8px;justify-items:center;}
.staff-card__ph{width:96px;height:96px;border-radius:9999px;background:#eee center/cover no-repeat;box-shadow:0 4px 12px rgba(0,0,0,.08);}
.staff-card__name{font-weight:700;font-size:13px;}

/* スタッフ モーダル */
.modal[hidden]{display:none;}
.modal{position:fixed;inset:0;z-index:1000;}
.modal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.45);}
.modal__panel{
  position:absolute;inset:auto 0 0 0;margin:auto;width:min(920px,92vw);max-height:90vh;overflow:auto;
  background:#f2ebe3;border-radius:18px;padding:clamp(16px,3vw,28px);box-shadow:0 20px 60px rgba(0,0,0,.25);top:5vh;
}
.modal__close{
  position:absolute;right:10px;top:8px;width:40px;height:40px;border-radius:9999px;border:1px solid var(--c-border);
  background:#fff;font-size:22px;line-height:1;cursor:pointer;
}
.staff-modal__head{display:grid;justify-items:center;gap:10px;margin-bottom:16px;}
.staff-modal__ph{width:180px;height:180px;border-radius:9999px;background:#ddd center/cover no-repeat;box-shadow:0 12px 28px rgba(0,0,0,.12);display:block;}
.staff-modal__name{font-family:var(--ff-title);font-size:32px;margin:.2em 0 0;}
.staff-modal__role{color:var(--c-muted);margin:0;}
.staff-modal__sec{background:#fff;border-radius:14px;padding:14px 16px;box-shadow:var(--shadow-sm);margin:12px 0;text-align:justify;}
.staff-modal__label{
  display:inline-block;margin:0 0 8px;padding:6px 12px;border-radius:9999px;font-size:12px;font-weight:700;
  background:color-mix(in srgb,var(--c-yellow) 45%,#fff);color:#3a3100;
}

/* 団体概要：点線区切り */
.ab-outline .outline{display:grid;gap:0;}
.ab-outline .outline > div{
  display:grid;grid-template-columns:80px 1fr;align-items:start;column-gap:16px;row-gap:6px;
  background:transparent;border:0;border-radius:0;padding:18px 0;border-bottom:2px dashed rgba(0,0,0,.25);
}
.ab-outline .outline > div:last-child{border-bottom:0;}
.ab-outline .outline dt{color:#000;font-weight:700;margin:auto;}
.ab-outline .outline dd{color:#000;margin:0;text-align:justify;}
@media (max-width:480px){.ab-outline .outline > div{padding:16px 0;}}

/* =========================================================
   🎯 About｜沿革（Timeline）— single source of truth
   ========================================================= */

.ab-history .tl{
  --tl-dot:   32px;   /* 丸の直径 */
  --tl-line-w: 6px;   /* 縦線の太さ */
  --tl-line-x: 24px;  /* 縦線（＝丸の中心）のX位置（左から） */
  --tl-gap:     6px;  /* 丸右端〜本文の隙間 */
  --tl-pad:    14px;  /* ボックス内側余白 */

  position: relative;
  margin: 0; list-style: none;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 16px; background:#fff;

  /* 本文が丸に重ならないように、左だけ“軸＋半径＋隙間”ぶん逃がす */
  padding: var(--tl-pad);
  padding-left: calc(var(--tl-pad) + var(--tl-line-x) + (var(--tl-dot)/2) + var(--tl-gap));
}

/* 縦線：デフォルトでも半径分だけ内側から開始。JSが来れば --tl-line-top/bottom を上書き */
.ab-history .tl::before{
  content:"";
  position:absolute;
  left: var(--tl-line-left, 38px);
  transform: translateX(-50%);          /* ← “中心X”を指定して中央揃え */
  top: var(--tl-line-top, 0px);          /* 始点 = 最初の円の中心Y */
  height: var(--tl-line-h, 100%);        /* 終点までの距離（最後の円の中心Y - 最初の円の中心Y） */
  width: var(--tl-line-w, 6px);
  background: var(--c-yellow);
  border-radius: 999px;
  /* bottom: auto; ← 以前 bottom を使っていたら無効化 */
}

.ab-history .tl__item{ position:relative; padding:14px 0; }
.ab-history .tl__time{
  color:#000; font-size:calc(var(--fz-base) + 2px); font-weight:700; line-height:1.3; margin:0 0 6px;text-align:start;
}
.ab-history .tl__body{ color:var(--c-text); text-align:justify;}
.ab-history .tl__body + .tl__body{ margin-top:.45em; text-align:justify;}

/* 丸：各 li の本文開始位置を原点に、(半径+隙間) だけ左へ置いて“中心”を線に合わせる */
.ab-history .tl__dot{
  position:absolute;
  left: calc(-1 * ((var(--tl-dot)/2) + var(--tl-gap))); /* ← この left が丸の中心座標 */
  top: 1.35em; transform: translate(-50%,-50%);
  width:var(--tl-dot); height:var(--tl-dot); border-radius:50%; background:var(--c-yellow);
}

/* 円の中心Yを --dot-cy で受け取る。無い時は従来値でフォールバック */
.ab-history .tl__dot{
  top: var(--dot-cy, 1.35em);
}

@media (max-width:480px){
  .ab-history .tl{ --tl-gap:4px; }
}

/* =========================================================
   画像ライトボックス（共通）
   ========================================================= */
.entry-content img:not(a img){cursor:zoom-in;}
.entry-content img.nozoom{cursor:auto;}
.imgbox{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:rgba(0,0,0,.65);animation:imgbox-fade .15s ease;}
.imgbox__overlay{position:absolute;inset:0;}
.imgbox__panel{position:relative;max-width:96vw;max-height:92vh;}
.imgbox__img{max-width:96vw;max-height:92vh;background:#fff;border-radius:12px;box-shadow:0 18px 60px rgba(0,0,0,.25);}
.imgbox__close{
  position:absolute;right:-12px;top:-12px;width:36px;height:36px;border-radius:9999px;border:1px solid var(--c-border);background:#fff;
  display:grid;place-items:center;font-size:22px;line-height:1;cursor:pointer;box-shadow:var(--shadow-sm);
}
@keyframes imgbox-fade{from{opacity:0;}to{opacity:1;}}

/* =========================================================
   Single（SP）：本文中の画像は横幅いっぱい
   ========================================================= */
@media (max-width:767.98px){
  .single .entry-content .wp-block-image,
  .single .post-content .wp-block-image,
  .single .entry-content figure,
  .single .post-content figure{margin-left:0;margin-right:0;}
  .single .entry-content img,
  .single .post-content img{width:100%!important;height:auto!important;display:block;}
  .single .entry-content .alignleft,
  .single .entry-content .alignright,
  .single .post-content .alignleft,
  .single .post-content .alignright{float:none;margin-left:auto;margin-right:auto;}
}

/* =========================================================
   About > Mission：本文フォント
   ========================================================= */
.ab-mission .entry-content{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  font-weight:300;font-size:14px;line-height:var(--lh-base);font-synthesis-weight:none;color:#000!important;
}
.ab-mission .entry-content :is(p,li,dt,dd){font:inherit;color:inherit!important;text-align:justify;}

/* =========================================================
   TOPなど“カード内の記事名”の体裁を統一（12px/500/黒）
   ========================================================= */
.mag-card__title,
.act-title,
.listitem__title,
.card__title{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif!important;
  font-weight:500!important;font-size:14px!important;line-height:1.45;color:#000!important;letter-spacing:.01em;
  text-align:justify;
}
.mag-card__title a,
.act-title a,
.listitem__title a,
.card__title a{font:inherit!important;color:inherit!important;text-decoration:none;}

/* =========================================
   TOP｜WEBマガジン（カード余白＋テキスト開始位置）
   ========================================= */
.home .mag-card{padding:14px!important;border-radius:16px;overflow:hidden;}
.home .mag-card__thumb{margin:0!important;}
.home .mag-card__thumb img{
  width:100%!important;height:auto!important;aspect-ratio:4/3!important;object-fit:cover!important;
  display:block;border-radius:12px;border-bottom:0!important;
}
.home .mag-card__body{padding:12px 0 0!important;text-align:justify;}

/* =========================================
   TOP｜NEWS／活動（サムネ 4:3）
   ========================================= */
.home .listitem__thumb,.home .act-thumb{flex:0 0 112px!important;}
.home .listitem__thumb img,.home .act-thumb img{
  width:100%!important;height:auto!important;aspect-ratio:4/3!important;object-fit:cover!important;display:block;border-radius:12px;
}
@media (max-width:767.98px){
  .home .listitem__thumb,.home .act-thumb{flex-basis:100px!important;}
  .home .listitem__thumb img,.home .act-thumb img{aspect-ratio:4/3!important;height:auto!important;}
  .home .listitem,.home .act-link{min-height:auto!important;}
}

/* =========================================================
   SINGLE：本文画像 4:3＋角丸（2枚目以降）
   ========================================================= */
body.single :is(#postContent,.post-content__body,.post-content,.entry-content)
  :is(figure.wp-block-image,figure.wp-caption):not(:first-of-type),
body.single :is(#postContent,.post-content__body,.post-content,.entry-content)
  .wp-block-gallery figure{
  border-radius:var(--post-img-radius)!important;overflow:hidden!important;max-width:100%;
}
body.single :is(#postContent,.post-content__body,.post-content,.entry-content)
  :is(figure.wp-block-image,figure.wp-caption):not(:first-of-type) img,
body.single :is(#postContent,.post-content__body,.post-content,.entry-content)
  .wp-block-gallery figure img{
  width:100%!important;height:auto!important;aspect-ratio:4/3!important;object-fit:cover!important;border-radius:inherit!important;display:block;
}
body.single :is(#postContent,.post-content__body,.post-content,.entry-content)
  :is(figure.wp-block-image,figure.wp-caption) figcaption{margin-top:.45em; text-align:justify; }
body.single :is(#postContent,.post-content__body,.post-content,.entry-content)
  img[class*="wp-image"]:not(:first-of-type){
  width:100%!important;height:auto!important;aspect-ratio:4/3!important;object-fit:cover!important;border-radius:var(--post-img-radius)!important;display:block;
}
/* 任意の除外 */
body.single :is(#postContent,.post-content__body,.post-content,.entry-content) .no-crop,
body.single :is(#postContent,.post-content__body,.post-content,.entry-content) .no-crop img{
  aspect-ratio:auto!important;object-fit:initial!important;border-radius:0!important;
}

/* =========================================================
   非TOPページ共通 HERO（スクショ風）— .p-hero
   ========================================================= */
.p-hero{background:#fff;padding:clamp(56px,12vw,128px) 0 clamp(24px,6vw,64px);}
.p-hero .l-container{width:min(1200px,92vw);margin-inline:auto;}
.p-hero .ab-hero__inner{text-align:center;}
.p-hero .ab-hero__bee :is(svg,img){
  width:clamp(30px,4vw,40px);height:auto;margin:0 auto clamp(8px,1.4vw,12px);display:block;
}
.p-hero .ab-hero__title{
  font-family:var(--ff-hero-en)!important;font-weight:800;text-transform:uppercase;letter-spacing:.02em;line-height:1;
  margin:0 0 .25em;font-size:clamp(44px,8vw,80px);color:color-mix(in srgb,var(--c-beige) 86%,#000 14%);
}
.p-hero .ab-hero__lead{
  font-family:var(--ff-hero-ja)!important;margin:0;font-weight:700;letter-spacing:.04em;font-size:clamp(16px,2.4vw,22px);color:var(--c-green);
}
@media (max-width:360px){.p-hero .ab-hero__title{letter-spacing:.01em;}}

/* === About｜ページ内ジャンプ（チェック風）— 復旧 === */
.about-toc{ margin:clamp(10px,3vw,18px) 0; }

.about-toc .about-toc__list{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,max-content));
  justify-content:center; align-items:center;
  column-gap:clamp(16px,5vw,36px);
  row-gap:clamp(8px,2.4vw,14px);
  text-align:-webkit-auto;
}

.about-toc .about-toc__link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--ff-key);
  font-weight:700; 
  font-size:clamp(14px,2.4vw,16px);
  color:#666 !important;              /* 他の a スタイルに負けないように */
  text-decoration:none; white-space:nowrap;
}

.about-toc .about-toc__link::before{
  content:""; width:16px; height:10px; display:inline-block;
  border-bottom:3px solid var(--c-green);
  border-left: 3px solid var(--c-green);
  transform:rotate(-45deg) translateY(-1px);
  border-radius:1px;
}

.about-toc .about-toc__link:hover,
.about-toc .about-toc__link.is-active{ color:#333 !important; }
.about-toc .about-toc__link:hover::before,
.about-toc .about-toc__link.is-active::before{ border-color:var(--c-green); }

/* 小さめバリエーション（about-toc--checks を付けた時） */
.about-toc--checks .about-toc__link{ font-size:12px; gap:6px; }
.about-toc--checks .about-toc__link::before{
  width:1em; height:.6em;
  border-bottom:.18em solid var(--c-green);
  border-left: .18em solid var(--c-green);
  border-radius:.12em;
  transform:rotate(-45deg) translateY(-.05em);
}

/* アンカーのスクロール位置（ヘッダー分の余白） */
.anchor-target{ scroll-margin-top: var(--anchor-offset); }

/* ========== 共通：テープ背景ユーティリティ ========== */
/* ========== テープ（黄色を薄く／ピッチ細く） ========== */
/* ========== 共通：テープ背景ユーティリティ（細め＆薄め） ========== */
:root{
  /* ストライプの黄色を少し白寄りに（数値を小さくするとさらに薄くできます） */
  --tape-yellow: color-mix(in srgb, var(--c-yellow) 40%, #fff 60%);
  /* ストライプの幅（細くする） */
  --tape-w: 10px;
  /* 斜めストライプ */
  --tape-bg: repeating-linear-gradient(
    -45deg,
    var(--tape-yellow) 0 var(--tape-w),
    #fff            var(--tape-w) calc(var(--tape-w) * 1.6)
  );
}
.tape-bg{ background: var(--tape-bg); }

/* ========== 事業紹介（リンク無効＋タイトルをカード上部のテープへ） ========== */
/* タイトル帯を上部へ（既存レイアウトのままでも使える） */
.biz-card{ position:relative; }

/* ========== スタッフ紹介（2×2グリッド＋円内1/4のテープ帯にタイトル） ========== */
.staff-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
@media (min-width:760px){
  .staff-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
}

.staff-card{ justify-items:center; gap:10px; }
.staff-card__ph{
  --staff-size: 120px;
  width:var(--staff-size); height:var(--staff-size);
  border-radius:9999px; position:relative; overflow:hidden;
  background:#eee center/cover no-repeat; box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* 既存の名前テキストを下で表示するならそのまま / 中に入れるなら非表示 */
.staff-card--name-inside .staff-card__name{ display:none; }

/* ========== メディア掲載（画像なし/リンクなし/点線区切り/もっとみる） ========== */
.media{ margin:0; }
.media-list{ list-style:none; margin:0; padding:0; }
.media-item{
  padding:18px 0;
  border-bottom:2px dotted rgba(0,0,0,.28);
}
.media-item:last-child{ border-bottom:0; }

/* 画像・リンクを使っていても見た目上無効化 */
.media-item img{ display:none!important; }
.media-item a{ pointer-events:none; color:inherit; text-decoration:none; }

/* タイポは ZEN KAKU 統一＋黒 */
.media-title{
  margin:0 0 6px;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  font-weight:500; font-size:16px; line-height:1.65; color:#000;
}
.media-date{
  margin:0;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  font-weight:400; font-size:14px; color:#000;
}

/* もっとみるボタン（既存の .c-btn を流用） */
.media-more{ margin-top:14px; display:flex; justify-content:center; }

/* 事業紹介：タイトル帯（上部に長方形・周囲に余白） */
.ab-biz .biz-card .biz-card__body{
  position:relative;
  padding-top:64px;      /* 帯の分だけ本文の開始位置を下げる */
}

/* サムネに外側余白＋画像自体に角丸 */
.ab-biz .biz-card__thumb img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:0px 0px 12px 12px; display:block;
  border-bottom:0!important;
}

/* 円の中に“内側に余白を取った長方形の帯”を敷く */
.ab-staff .staff-card__ph{ position:relative; overflow:hidden; }
.ab-staff .staff-card__badge{
  position:absolute;
  left:10px; right:10px; bottom:10px;   /* ← 円の内側に余白 */
  height:calc(20% + 2px);               /* 円の高さの約1/4（お好みで） */
  display:grid; place-items:center; padding:4px 8px;
  color:#3a3100; font-family:var(--ff-key); font-weight:700; font-size:16px;
  line-height:1.2; text-align:center;
  border-radius:12px;                    /* 長方形帯の角丸 */
}

/* 2×2 グリッド指定はそのまま（既に適用済み） */

/* 事業紹介：カードの体裁 */
.biz-card{
  position:relative;
  background:#fff; border:1px solid var(--c-border);
  border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm);
}

/* 画像の四辺に余白＋角丸 */
.biz-card__thumb img{
  width:100%; height:auto; display:block;
  border-radius:14px; /* 画像自体の角丸 */
}

/* 既存のチップ等は今回は非表示にしておく */
.biz-chip{ display:none!important; }
.biz-card__body{ display:none; } /* 上部帯と画像のみのレイアウトに寄せる場合 */

/* 2×2 グリッドはすでに指定済み（前回のCSS） */

.staff-card{ justify-items:center; gap:10px; }
.staff-card__ph{
  --staff-size: 160px;         /* ちょっと大きめにしました。お好みで */
  width:var(--staff-size); height:var(--staff-size);
  border-radius:9999px; position:relative; overflow:hidden;
  background:#eee center/cover no-repeat; box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* 名前を円の中に入れるときは下のテキストを非表示 */
.staff-card--name-inside .staff-card__name{ display:none; }

/* 吹き出し（profile-icon.svg）を右上に重ねる */
.staff-card__ph::after{
  content:"";
  position:absolute; right:-8px; top:-10px;
  width:72px; height:72px;
  background-image: var(--staff-bubble-url);  /* 変数に url('...') を入れます（後述） */
  background-size:contain; background-repeat:no-repeat; background-position:center;
  pointer-events:none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.2));
}

/* === Stripes（黄＋透明に白半透明を上から被せる / 長方形） === */
:root{
  --stripe-yellow:#FDE23D;     /* 黄色の濃さはここで調整 */
  --stripe-w:5px;             /* ストライプ幅（細くしたい=小さく） */
  --stripe-whiten:.1;         /* 白の被せ具合 0〜1（大きいほど白っぽい） */
}

/* スタッフ名バッジのストライプにも適用（幅・色・白ヴェール） */
.staff-card__badge.stripe-rect{
  --stripe-unit: var(--stripe-w);
  --stripe-yellow: var(--stripe-yellow);
  --stripe-overlay: rgba(255,255,255, var(--stripe-whiten));
}

/* === 事業紹介：上部のタイトル帯をストライプ長方形に、画像に余白＋角丸 === */
.biz-card__thumb img{ width:100%; height:auto; display:block; border-radius:14px; }
.biz-chip{ display:none !important; }  /* 使わないなら非表示 */

/* === スタッフ：2×2、円内下1/4に長方形帯、吹き出しは円の外に“浮かせる” === */
.staff-grid{ display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
@media (min-width:760px){ .staff-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }

.staff-card{ position:relative; display:grid; gap:10px; justify-items:center; appearance:none; border:0; background:transparent; padding:0; cursor:pointer; }
.staff-card__ph{
  --staff-size:160px;
  width:var(--staff-size); height:var(--staff-size);
  border-radius:9999px; overflow:hidden;
  background:#eee center/cover no-repeat;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}
/* 帯の見た目は .stripe-rect で付与 */

/* 吹き出し（SVG画像）を“円の外”に出す：親(.staff-card)基準で右上に配置 */
.staff-card__bubble{
  position:absolute; right:-10px; top:-8px;
  width:80px; height:auto; pointer-events:none; z-index:2;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.20));
}
@media (max-width:480px){
  .staff-card__bubble{ right:-6px; top:-6px; width:70px; }
}

/* 円の中にも名前を出すので、下の名前は消す場合 */
.staff-card--name-inside .staff-card__name{ display:none; }

/* === メディア：画像・リンク無し、点線区切り、ZEN KAKU === */
.media-list{ list-style:none; margin:0; padding:0; }
.media-item{ padding:18px 0; border-bottom:2px dotted rgba(0,0,0,.28); }
.media-item:last-child{ border-bottom:0; }
.media-item img{ display:none !important; }
.media-item a{ pointer-events:none; color:inherit; text-decoration:none; }
.media-title{
  margin:0 0 6px;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  font-weight:500; font-size:16px; line-height:1.65; color:#000;
  text-align:justify;
}
.media-date{
  margin:0;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  font-weight:400; font-size:14px; color:#000;
  text-align:left;
}
.media-more{ margin-top:14px; display:flex; justify-content:center; }

/* =========================================================
   共通：ストライプ長方形（黄＋透明）＋上から半透明白
   ========================================================= */
:root{
  --stripe-angle: -45deg;
  --stripe-unit: 8px;                 /* ストライプのピッチ（事業紹介と共通） */
  --stripe-yellow: rgba(253,226,61,.60);  /* 少し薄い黄色 */
  --stripe-overlay: rgba(255,255,255,.72);/* テキストを読みやすくする白膜 */
}

/* =========================================================
   スタッフ紹介：4カラム化／バッジのサイズ・位置／吹き出しの位置
   ========================================================= */

/* 2→4カラム（PC） */
.staff-grid{
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 26px 18px;
}
@media (min-width: 768px){
  .staff-grid{ grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 34px 24px; }
}

/* 顔写真（円）サイズは可変のまま */
.staff-card__ph{
  --staff-size: clamp(150px, 15vw, 150px);
  position: relative;                 /* 吹き出しとバッジの基準 */
}

/* 吹き出し（右上に近づける＆ドロップシャドウ） */
.staff-card__bubble{
  position:absolute;
  right:-8px; top:-8px;               /* 近づけたい/離したい時はここを微調整 */
  width: clamp(44px, 6.5vw, 64px);
  height:auto; pointer-events:none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.12));
}
@media (max-width: 767.98px){
  .staff-card__bubble{ right:-6px; top:-6px; width:48px; }
}

/* 名前バッジ：横80–100px／縦25–30px。円の“横センター”に配置 */
.staff-card__badge{
  --stripe-unit: 6px;                 /* スタッフも事業紹介と同じピッチ感 */
  position:absolute;
  left:50%; transform:translateX(-50%);
  bottom: 10px;
  width: clamp(80px, 12vw, 100px);
  height: clamp(25px, 3.2vw, 30px);
  border-radius: 4px;                  /* 角丸少しだけ（不要なら0で） */
  display:grid; place-items:center;
  padding: 0 6px;
  font-family: var(--ff-key);
  font-weight:700; font-size: clamp(11px, 1.4vw, 12px);
  color:#333;
}
.staff-card--name-inside .staff-card__name{ display:none; } /* 円の外側の名前は非表示 */

/* =========================================================
   事業紹介：タイトル帯をテキストにぴったり＆中央寄せ
   ========================================================= */

/* ========== スタッフ：名前バッジ中央下に固定 & 吹き出し近接 ========== */
.staff-grid{ gap:26px 18px; }
@media (min-width:768px){ .staff-grid{ grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:34px 24px; } }

.staff-card__ph{ position:relative; }

/* 吹き出し（右上寄せ） */
.staff-card__bubble{
  position:absolute; right:-8px; top:-8px;
  width: clamp(44px, 6.5vw, 64px); height:auto;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.12)); pointer-events:none;
}
@media (max-width:767.98px){ .staff-card__bubble{ right:-6px; top:-6px; width:48px; } }

/* 名前バッジ（横80〜100・縦25〜30、円の横中央に） */
.staff-card__badge{
  --stripe-unit: 6px;                    /* ピッチを事業紹介と揃える */
  position:absolute!important;
  left:50%!important; transform:translateX(-50%)!important;
  bottom:10px!important;
  width:clamp(80px, 12vw, 100px);
  min-height:clamp(25px, 3.2vw, 30px);   /* テキストが増えたら高さが伸びる */
  display:grid; place-items:center; padding:2px 6px;
  font-family:var(--ff-key); font-weight:700; font-size:12px; color:#333;
  border-radius:4px;
}
.staff-card--name-inside .staff-card__name{ display:none; } /* 外の名前は隠す */

/* ========== モーダル：最前面 & 閉じるボタン強調 & 蜂アイコン ========== */
.modal{ z-index:2000; } /* 浮遊ボタン(1001)より上に */
body.is-modal-open .ch-cta--float{ opacity:0; pointer-events:none; }

.modal__close{
  position:absolute; right:10px; top:10px;
  width:44px; height:44px; font-size:26px; line-height:1;
  border:1px solid var(--c-border); border-radius:9999px; background:#fff;
  box-shadow:var(--shadow-sm); cursor:pointer;
}

/* 「プロフィール」左に蜂（URLは style の --bee-url で受け取る） */
.staff-modal__label--profile{ position:relative; padding-left:40px; }

/* === モーダルの蜂（SVG）を表示 & モーダルを最前面に === */
.modal{ z-index: 2002; } /* 右上丸ボタン(1001)より上に */
.staff-modal__label--profile{ position:relative; padding-left:38px; }
.staff-modal__label--profile::before{
  content:""; position:absolute; left:-20px; top:40%; transform:translateY(-50%);
  width:40px; height:40px;
  background: var(--bee-url) center/contain no-repeat;
  filter: drop-shadow(0 2px 1px rgba(0,0,0,.08));
}

/* === About: 事業紹介（ストライプ帯の収まり＆タイトル整列） === */
.page-template-page-about .biz-card{
  border-radius:16px;
  overflow:hidden; /* ストライプ背景のはみ出し防止（PCで必須） */
}

/* タイトルの行間・サイズを調整して帯内に収める */
.page-template-page-about .biz-card__title{
  margin:0;
  font-family:var(--ff-key);
  font-weight:700;
  line-height:1.35;
  font-size:clamp(14px, 1.4vw, 14px);
  text-wrap:balance; /* 自然な改行で2行まで綺麗に */
}

/* === Staff Modal: 「プロフィール」ラベルの蜂アイコン位置補正 === */
/* 使う外側コンテナを環境に合わせて残す（例：.staff-modal / .member-modal / .modal--staff） */
.staff-modal .label,
.member-modal .label,
.modal--staff .label{
  position: relative;             /* アイコンの絶対配置用 */
  --bee-size: 28px;               /* だいたい1.5倍（元が18-20px想定） */
  padding-left: calc(12px + var(--bee-size)*0.75); /* 文字が蜂と重ならないよう余白を確保 */
}

/* ラベル内の最初の画像を“蜂”として扱う */
.staff-modal .label > img:first-child,
.member-modal .label > img:first-child,
.modal--staff .label > img:first-child{
  position: absolute;
  left: -10px;                    /* 左端から少しはみ出させて重ねる */
  top: 50%;
  width: var(--bee-size);
  height: auto;
  transform: translateY(-50%);
  pointer-events: none;           /* タップをブロックしない */
  z-index: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.12)); /* ほんのり浮かせる：任意 */
}

/* 画面がかなり小さい時は少しだけ縮める */
@media (max-width: 420px){
  .staff-modal .label,
  .member-modal .label,
  .modal--staff .label{ --bee-size: 24px; padding-left: calc(10px + var(--bee-size)*0.75); }
}

/* === Playground: TOC & Modal === */
.pg-toc .about-toc__link.is-disabled{ opacity:.35; pointer-events:none; filter:grayscale(1); }

.pg-modal{ position:fixed; inset:0; display:none; z-index:1000; }
.pg-modal.is-open{ display:block; }
.pg-modal__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.45); backdrop-filter:saturate(120%) blur(2px); }
.pg-modal__panel{ position:relative; max-width:min(960px, 96vw); max-height:92vh; margin:20px auto; padding:16px; background:#fff; border-radius:20px; overflow:auto; box-shadow:0 20px 60px rgba(0,0,0,.25); }
.pg-modal__body{ padding:18px 18px 22px; text-align:justify;}
.pg-modal__close{ position:sticky; left:calc(100% - 56px); top:12px; width:36px; height:36px; border-radius:999px; border:1px solid rgba(0,0,0,.12); display:grid; place-items:center; background:#fff; box-shadow:0 4px 14px rgba(0,0,0,.14); }
@media (max-width:480px){ .pg-modal__body{ padding:14px; } }

/* ===== Playground Cards ===== */
/* 4カラム（PC）→ 2カラム（SP） */
.pg-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px; margin-top:18px;
}
@media (max-width:1024px){ .pg-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:767.98px){ .pg-grid{ grid-template-columns:repeat(2,1fr); } }

/* 画像は常に 4:3（既存 r-4x3 を利用） */
.pg-card .card__thumb.r-4x3{ aspect-ratio:4/3; }
.pg-card .card__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* 施設名＝12px＋ストライプ背景（町見出しと同柄） */
.pg-card__title.stripe-rect{
  display:inline-block;
  font-size:12px;
  line-height:1.6;
  padding:6px 10px;
  border-radius:8px;
  margin-top:4px;
}

/* ===== Playground Modal ===== */
/* タイトル（ストライプ） */
.pg-modal__title.stripe-rect{
  display:inline-block;
  padding:6px 12px;
  border-radius:10px;
  margin:0 0 12px;
  font-size:16px;
  line-height:1.6;
}
.pg-modal__thumb{ margin:0 0 14px; }
.pg-modal__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* 項目：横並び＋点線区切り＋余白 */
.pg-facts{ display:grid; gap:0; margin:0 0 12px; }
.pg-facts__row{
  display:grid;
  grid-template-columns: 10em 1fr;
  gap:12px;
  padding:12px 0;
  border-bottom:1px dotted rgba(0,0,0,.25);
  text-align:justify;
}
@media (max-width:480px){
  .pg-facts__row{ grid-template-columns: 8.5em 1fr; }
}

/* 見出し：Zen Kaku 700、値：400（無ければ既存フォントにフォールバック） */
.pg-facts__name{
  font-family:"Noto Sans JP", var(--ff-jp);
  font-weight:700;
  color:#000;
}
.pg-facts__val{
  font-family:"Noto Sans JP", var(--ff-jp);
  font-weight:400;
  color:#000;
}

/* リンクは青＆下線で“押せる”を明示 */
.pg-facts__val a{ color:#2563eb; text-decoration:underline; }

/* Google Map ボタン（“もっと見る”風） */
.btn--map{
  display:inline-grid; grid-auto-flow:column; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px; border:1px solid var(--c-border);
  box-shadow:var(--shadow-1); background:#fff;
}
.btn--map:hover{ text-decoration:none; }

/* モーダル内の画像：1枚=1カラム、2枚=2カラム（4:3） */
.pg-modal__pics.grid-1{ display:grid; gap:12px; }
.pg-modal__pics.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pg-modal__pics img{ width:100%; height:100%; object-fit:cover; display:block; }

/* × ボタンをスタッフモーダルに合わせて大きく */
.pg-modal__close{
  width:44px; height:44px; font-size:24px;
  border-radius:999px; border:1px solid rgba(0,0,0,.12);
  display:grid; place-items:center; background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.16);
}

/* ===== Playground Modal 微修正 ===== */

/* 1) 見出し：サイズUP＋×と同じYで固定（フォントタイプは継承） */
.pg-modal__title.stripe-rect{
  position: sticky;           /* パネル内のスクロールに追従 */
  top: 12px;                  /* ×ボタン(.pg-modal__close)と同じ */
  z-index: 2;
  margin: 0 0 14px;
  padding: 8px 14px;
  font-size: clamp(18px, 2.6vw, 22px);  /* 以前:16px → 少し大きく */
  line-height: 1.6;
  font-family: inherit;       /* フォントタイプは変更しない */
}

/* 2) モーダル画像：常に 4:3 でトリミング */
.r-4x3{ aspect-ratio: 4 / 3; }               /* 汎用の 4:3 ユーティリティ */
.pg-modal__thumb.r-4x3{ aspect-ratio: 4 / 3; }
.pg-modal__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pg-modal__pics .frame.r-4x3{ aspect-ratio: 4 / 3; }
.pg-modal__pics img{ width:100%; height:100%; object-fit:cover; display:block; }

/* 3) Google Map ボタン：青リンクの除外（通常リンクは青のまま） */
.pg-facts__val a:not(.btn--map){ color:#2563eb; text-decoration:underline; }
.btn--map{ color:#000 !important; text-decoration:none !important; }

/* 4) ×ボタンはスタッフモーダルと同等サイズ（既存より優先） */
.pg-modal__close{
  position: sticky;
  top: 12px;
  left: calc(100% - 56px);
  width: 44px;
  height: 44px;
  font-size: 26px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  display: grid;
  place-items: center;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.16);
}

/* 施設名バッジ（カード/モーダル共通の見た目調整が必要ならお好みで）
.pg-card__title.stripe-rect,
.pg-modal__title.stripe-rect{ --stripe-unit: 8px; } */

/* ===== Playground Modal: title/layout fixes ===== */

/* 見出し：×と同じラインに固定＆サイズUP（書体は継承＝変更しない） */
.pg-modal .pg-modal__title.stripe-rect{
  position: sticky;
  top: 12px !important;     /* ×ボタン(.pg-modal__close)と揃える */
  z-index: 3;
  margin: 0 0 16px;
  padding: 10px 16px;
  font-size: clamp(20px, 3vw, 26px);  /* 以前より大きく */
  line-height: 1.5;
  font-family: inherit !important;    /* 書体は既定をそのまま */
  text-align: center;
}

/* ×ボタン：スタッフモーダル相当のサイズと位置を再度強制 */
.pg-modal .pg-modal__close{
  position: sticky;
  top: 12px;
  left: calc(100% - 56px);
  width: 44px; height: 44px; font-size: 26px;
  border-radius: 999px; background:#fff;
  border:1px solid rgba(0,0,0,.12);
  display:grid; place-items:center;
  box-shadow:0 6px 18px rgba(0,0,0,.16);
  z-index: 4;
}

/* メイン画像とギャラリー画像：必ず4:3でトリミング（古ブラウザでも安定） */
.pg-modal__thumb.r-4x3,
.pg-modal__pics .frame.r-4x3{
  position: relative; overflow: hidden;
}
.pg-modal__thumb.r-4x3::before,
.pg-modal__pics .frame.r-4x3::before{
  content:""; display:block; padding-top: 75%; /* 4:3 = 3/4=75% */
}
.pg-modal__thumb.r-4x3 > img,
.pg-modal__pics .frame.r-4x3 > img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}

/* 画像が1枚の時は固定サイズ（150×120px） */
.pg-modal__pics.grid-1{
  display:grid; justify-content:center;
}
.pg-modal__pics.grid-1 .frame.r-4x3{
  width:150px; height:120px;      /* ＝4:3 */
}
.pg-modal__pics.grid-1 .frame.r-4x3::before{ display:none; } /* 固定サイズなので不要 */

/* Google Map は“ボタン”の色を黒／下線なしに。通常リンクは青のまま */
.pg-facts__val a:not(.btn--map){ color:#2563eb; text-decoration:underline; }
.btn--map{ color:#000 !important; text-decoration:none !important; }

/* 項目行：余白を拡張＋読みやすく */
.pg-facts{ display:grid; gap:0; margin: 4px 0 16px; }
.pg-facts__row{
  display:grid;
  grid-template-columns: 11em 1fr;     /* 少し広めに */
  gap:14px;
  padding:16px 0;                      /* 以前より余白UP */
  border-bottom:1px dotted rgba(0,0,0,.28);
}
@media (max-width:480px){
  .pg-facts__row{ grid-template-columns: 9em 1fr; gap:10px; padding:14px 0; }
}

/* ラベル/値の書体指定（既存のZen Kakuをキープ） */
.pg-facts__name{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif !important;
  font-weight:700; color:#000;
}
.pg-facts__val{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif !important;
  font-weight:400; color:#000;
}

/* TOC: 4列×2段（8項目） */
.pg-toc .about-toc__list{
  grid-template-columns: repeat(4, 1fr) !important;
  justify-items: center;
  column-gap: 10px; row-gap: 10px;
}
.pg-toc .about-toc__link{ font-size:14px; } /* 見やすさ調整 */

/* 施設名は常に黒 (#000) */
.pg-card__title.stripe-rect,
.pg-card__title.stripe-rect span,
.pg-modal__title.stripe-rect,
.pg-modal__title.stripe-rect span{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  font-weight:700;
  width:85%;
}

/* タイトル帯は通常フローのまま（固定ヘッダーを無効化する保険） */
.pg-modal__title.stripe-rect{
  position: static; display:inline-grid; place-items:center;
  margin: 0 0 12px; padding: 6px 12px;
}

/* モーダル画像：4:3維持／1枚の時は 150×120 固定（既存指定を保持） */
.pg-modal__thumb.frame.r-4x3{ aspect-ratio:4/3; }
.pg-modal__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.pg-modal__pics.grid-1{ display:grid; justify-content:flex-start; gap:12px; }
.pg-modal__pics.grid-1 .frame{ width:150px; height:120px; aspect-ratio:auto !important; }
.pg-modal__pics.grid-1 .frame img{ width:100%; height:100%; object-fit:cover; }

/* モーダル内スクロールは panel 側でOK（既存のままでOK） */
.pg-modal__panel{ overflow:auto; }

/* 先頭に固定されるヘッダー */
.pg-modal__head{
  position: sticky;
  top: 0;
  z-index: 5;
  background:#fff;
  padding: 12px 18px 8px;
  text-align:center;
}

/* タイトルの体裁（色=黒、フォント=Zen Kaku、少し大きめ） */
.pg-modal__title{
  margin:0;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  font-weight:700;
  font-size: clamp(18px, 2.4vw, 22px);
  color:#000;
}

/* ===== SUPPORT: リード文（ヒーロー直下） ===== */
.sup-lead{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  font-weight:300;  /* LIGHT 300 */
  font-size:14px;
  color:#000;
  line-height:var(--lh-base);
  text-align:justify;
  letter-spacing:1px;
}

/* ===== SUPPORT: ジャンプリンク（新UI） ===== */
.sup-toc{ margin: clamp(10px,3vw,18px) 0; }
.sup-toc__list{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:12px;
  justify-items:center;
}
.sup-toc__link{
  display:inline-grid; grid-auto-flow:column; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--c-border); box-shadow:var(--shadow-sm);
  border-radius:9999px; padding:10px 14px; text-decoration:none;
  font-family:var(--ff-key); font-weight:700; color:#333;
}
.sup-toc__link img, .sup-toc__link svg{ width:24px; height:24px; display:block; }
.sup-toc__link:hover{ box-shadow:var(--shadow-md); transform:translateY(-1px); }

/* ===== SUPPORT: Syncable ボタン（ロゴだけの大きめ） ===== */
.sup-btn--syncable{
  display:inline-grid; place-items:center;
  width:min(280px,70vw); height:64px;
  background:#fff; border:1px solid var(--c-border); border-radius:12px;
  box-shadow:var(--shadow-sm);
}
.sup-btn--syncable img, .sup-btn--syncable svg{ max-height:40px; width:auto; }

/* ===== SUPPORT: カード型ボタン（ロゴ＋テキスト） ===== */
.sup-cardbtn{
  display:inline-grid; grid-auto-flow:column; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--c-border); border-radius:14px;
  padding:10px 14px; textDecoration:none; color:#000; box-shadow:var(--shadow-sm);
}
.sup-cardbtn:hover{ box-shadow:var(--shadow-md); transform:translateY(-1px); }
.sup-cardbtn img{ width:40px; height:40px; border-radius:8px; object-fit:contain; }

/* ===== SUPPORT: 仕様テーブル ===== */
.sup-subttl{
  margin: 0 0 8px; text-align:left;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  font-weight:700; font-size:16px; color:#000;
}
.sup-table{
  width:100%; border:1px solid var(--c-border); border-radius:12px; overflow:hidden;
  background:#fff; border-collapse:separate; border-spacing:0;
  box-shadow:var(--shadow-sm);
}
.sup-table th, .sup-table td{
  padding:12px; border-bottom:1px solid var(--c-border); text-align:left; vertical-align:top;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  color:#000; font-size:14px;
}
.sup-table th{ width:32%; background:rgba(0,0,0,.03); font-weight:700; }
.sup-table tr:last-child th, .sup-table tr:last-child td{ border-bottom:0; }

/* ===== SUPPORT: グッズ（丸型サムネ） ===== */
.sup-goods{
  margin:18px auto 0; display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
}
.sup-goods__item{ text-decoration:none; color:#333; width:112px; text-align:center; }
.sup-goods__ph{
  display:block; width:100px; height:100px; margin:0 auto 8px;
  border-radius:9999px; background:#eee center/cover no-repeat;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.sup-goods__cap{
  display:block; font-size:12px; line-height:1.4; text-align:center;
}

/* アンカー位置のずれ対策（共通の .anchor-target がある場合はそちらでOK） */
.anchor-target{ scroll-margin-top: var(--anchor-offset); }

/* ===== Support page: headings underline color ===== */
.page-template-page-support .c-section__title::after,
.page-template-page-support .sup-subttl::after{
  background: var(--c-green) !important;
}

/* ===== Support page: goods section ===== */
.sup-goods .lead {
  font-family: "Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  font-weight:300; font-size:14px; color:#000; text-align:center;
  line-height:1.9; letter-spacing:.01em; margin:10px auto 18px;
}

.sup-goods .goods-list{
  display:grid; gap:18px; justify-content:center;
  grid-template-columns: repeat(3, minmax(100px, 140px));
  margin: 6px auto 18px;
}
@media (max-width:480px){
  .sup-goods .goods-list{ grid-template-columns: repeat(3, 1fr); gap:14px; }
}
.sup-goods .goods-item{
  width:100%; aspect-ratio:1/1; border-radius:9999px; overflow:hidden;
  border:3px solid var(--c-yellow);              /* 黄色の丸枠 */
  box-shadow: var(--shadow-sm); background:#fff;
  display:block;
}
.sup-goods .goods-item img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* SUZURI カードボタン（既存カードスタイルに寄せる） */
.sup-suzuri-btn{
  display:flex; align-items:center; gap:10px; justify-content:center;
  margin: 8px auto 0; padding:14px 18px; width:min(440px, 92%);
  background:#fff; border:1px solid var(--c-border); border-radius:16px;
  box-shadow:var(--shadow-sm); font-weight:700; text-decoration:none;
}
.sup-suzuri-btn img{ width:28px; height:auto; display:block; }

/* ===== Support page: SNS follow & share ===== */
.sup-sns .sup-sns__title span{ display:block; } /* 強制2行 */
.sup-sns .lead{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  font-weight:300; font-size:14px; color:#000;
  line-height:1.9; letter-spacing:.01em;
  text-align:justify; text-align-last:center;
  margin: 10px auto 18px; max-width: 60ch;
}
.sup-sns .sns-row{
  display:grid; grid-auto-flow:column; justify-content:center; align-items:center;
  gap: clamp(16px, 5vw, 28px); margin-top: 12px;
}
.sup-sns .sns-link{
  display:inline-grid; place-items:center; width: clamp(56px, 11vw, 84px); aspect-ratio:1/1;
}
.sup-sns .sns-link img{ width:100%; height:100%; object-fit:contain; display:block; }

/* 下線は緑（Support専用）※以前の設定と同じ方針で念押し */
.page-template-page-support .c-section__title::after{ background: var(--c-green) !important; }

/* =========================
   SUPPORT：小見出し＆説明文
   ========================= */

/* 「掲載媒体に関する仕様」「イメージ図」の見出しを 12px・左寄せ */
#ads .sup-sec__subtitle{
  font-size:12px;               /* 指定どおり 12px */
  text-align:center;              /* 左寄せ */
  margin:14px 0 8px;
}
#ads .sup-sec__subtitle::after{
  background: var(--c-green);   /* 既存の緑下線のまま */
}

/* 表本体・イメージ図の左寄せ（親 .u-center の中央寄せを打ち消す） */
#ads .sup-table{ text-align:left; }   /* テキスト左寄せ */
#ads .sup-figure{ text-align:left; margin:12px 0 0; }

/* グッズ／SNS の説明文は <p> を Kiwi Maru + 黒 で */
.sup-goods > .l-container > p:first-of-type,
.sup-sns   > .l-container > p:first-of-type{
  font-family:"Kiwi Maru","Hiragino Mincho ProN","Yu Mincho",serif !important;
  font-weight:400;
  font-size:14px;               /* ご指定どおり 14px を維持 */
  line-height: var(--lh-base);
  color:#666; text-align:justify;
}

/* ===== Support：寄付（タイポ＆ボタン＆注記） ===== */
.page-template-page-support #donate p{
  font-family:"Kiwi Maru","Hiragino Mincho ProN","Yu Mincho",serif;
  font-weight:300;
  font-size:14px;
  line-height:1.85;
  color:#666;                 /* Kiwi Maru でも黒で */
}

/* ロゴボタン（白カード＋薄い影） */
.page-template-page-support .sup-btn--syncable{
  display:inline-grid; place-items:center;
  padding:12px 16px;
  background:#fff;
  border:1px solid var(--c-border);
  border-radius:14px;
  box-shadow:var(--shadow-sm);
}
.page-template-page-support .sup-btn--syncable img{
  width:min(560px, 75vw);
  height:auto; display:block;
}

/* 注記（10px） */
.page-template-page-support .sup-note{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  font-size:10px;
  line-height:1.6;
  color:#000;
  text-align:left;
}

/* Support：広告協賛テキストだけ14pxに */
.page-template-page-support #ads p{
  font-size:14px !important;
  line-height:1.85;color:#666;
}

/* ===== Support TOC：縦ピル＋右にSVG ===== */
.sup-toc--pills { margin-top: clamp(8px, 3vw, 18px); }
.sup-toc--pills .sup-toc__inner{
  display:grid; gap: clamp(12px, 3vw, 26px);
  grid-template-columns: 1fr minmax(200px, 34%);
  align-items:center;
}
@media (max-width: 900px){
  .sup-toc--pills .sup-toc__inner{ grid-template-columns: 1fr; }
}

.sup-toc--pills .sup-toc__list{
  list-style:none; margin:0; padding:0;
  display:grid; gap: clamp(12px, 2.6vw, 16px);
}

.sup-toc--pills .sup-toc__pill{
  /* 緑の大きな角丸ボタン */
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background: var(--c-green); color:#fff;
  padding: clamp(16px, 2.8vw, 22px) clamp(18px, 3.4vw, 26px);
  border-radius: 9999px;
  text-decoration:none; box-shadow: var(--shadow-sm);
  font-family: var(--ff-key); font-weight:700;
  font-size: clamp(16px, 2.6vw, 24px); line-height:1.15;
  transition: transform .06s ease, box-shadow .2s ease, opacity .2s ease;
}
.sup-toc--pills .sup-toc__pill:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  opacity: .98;
}

/* 右端の矢印（白） */
.sup-toc--pills .sup-toc__pill > i{
  position:relative; width:1.3em; height:1.3em; flex:0 0 auto;
}
.sup-toc--pills .sup-toc__pill > i::before{
  content:""; position:absolute; left:50%; top:50%;
  width:.55em; height:.55em;
  border-right: .15em solid #fff; border-top: .15em solid #fff;
  transform: translate(-40%,-50%) rotate(45deg);
  border-radius:1px;
}

/* 右側のイラスト（薄めに） */
.sup-toc--pills .sup-toc__illust{
  display:grid; place-items:center;
  opacity: 1;
  filter: none;
}
@media (max-width: 900px){
  .sup-toc--pills .sup-toc__illust{ order:2; margin-top:8px; }
}

/* ===== Support TOC（薄い緑・左端開始・高さ20px固定・2カラム） ===== */

/* リストは左端から開始（幅はコンテナ幅に合わせる） */
.sup-toc--pills .sup-toc__list{
  list-style:none; margin:0; padding:0;
  display:grid; gap: clamp(10px,2.4vw,14px);
  justify-items:start;              /* ← 左端開始 */
  width:100%;
}
.sup-toc--pills .sup-toc__list > li{ width:100%; }

/* ピル本体：薄い緑・高さ20px固定・左端から全幅 */
.sup-toc--pills .sup-toc__pill{
  /* 色を“薄く”：ベース緑に白を40%混ぜる */
  --pill-bg: color-mix(in srgb, var(--c-green) 60%, #fff 40%);

  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%;
  height:20px;                       /* ← ご指定：高さ20pxで固定 */
  padding-inline: clamp(16px,3.2vw,24px);
  border-radius:9999px;
  background:var(--pill-bg);
  color:#fff; text-decoration:none; box-shadow:var(--shadow-sm);

  font-family:var(--ff-key);
  font-weight:700;
  font-size:clamp(13px,1.8vw,16px);  /* 20pxに収まるサイズに調整 */
  line-height:20px;                  /* 高さ=行高で中央寄せ */
  transition:transform .06s ease, box-shadow .2s ease, opacity .2s ease, background .2s ease;
}
.sup-toc--pills .sup-toc__pill:hover{
  background: color-mix(in srgb, var(--c-green) 54%, #fff 46%);
  transform: translateY(-1px); box-shadow:var(--shadow-md);
}

/* 右端の矢印（白） */
.sup-toc--pills .sup-toc__pill > i{
  position:relative; width:1.1em; height:1.1em; flex:0 0 auto;
}
.sup-toc--pills .sup-toc__pill > i::before{
  content:""; position:absolute; left:50%; top:50%;
  width:.5em; height:.5em;
  border-right:.14em solid #fff; border-top:.14em solid #fff;
  transform: translate(-40%,-50%) rotate(45deg);
  border-radius:1px;
}

/* 右側イラスト（9913）を横に。モバイルは下に回す */
.sup-toc--pills .sup-toc__illust{ display:grid; place-items:center; }
.sup-toc--pills .sup-toc__illust img{ max-width:min(520px, 90%); height:auto; display:block; }

/* ===== Support TOC：スマホでも横並び（常時2カラム） ===== */
.sup-toc--pills .sup-toc__inner{
  display:grid;
  gap: clamp(12px, 3vw, 26px);
  /* ← 常に2カラム（左=ボタン、右=イラスト） */
  grid-template-columns: 1fr minmax(110px, 40%);
  align-items:center;
}

/* 左のボタン群は左端スタート＆全幅 */
.sup-toc--pills .sup-toc__list{
  list-style:none; margin:0; padding:0;
  display:grid; gap: clamp(10px,2.4vw,14px);
  justify-items:start; width:100%;
}
.sup-toc--pills .sup-toc__list > li{ width:100%; }

/* ピル（薄い緑/高さ20px固定）は前の設定のままでOK
   ここに入れていた .sup-toc--pills .sup-toc__pill の指定は変更不要 */

/* 右側のイラスト（9913）：横に並べ、サイズは列幅にフィット */
.sup-toc--pills .sup-toc__illust{ 
  display:grid; place-items:center; 
}
.sup-toc--pills .sup-toc__illust :is(img,svg){
  width:100%; height:auto; max-width:320px; display:block;
}

/* 以前入れていた“モバイルは1カラム”のメディアクエリを削除 or 無効化 */
@media (min-width:768px){
  /* ここに .sup-toc__inner の grid-template-columns を
     上書きしていたら丸ごと削除してください */
}

/* ===== Web Magazine: Filter ===== */
.mag-filter{
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:flex-start; margin:6px 0 16px;
}
.mag-filter__btn{
  display:inline-grid; grid-auto-flow:column; align-items:center; gap:6px;
  padding:6px 12px; border-radius:9999px; font-family:var(--ff-key);
  font-weight:700; font-size:12px; text-decoration:none;
  color:#333; background:#ddd; border:1px solid rgba(0,0,0,.08);
}
/* ← クラス名を現行HTML（.mag-filter__check）に合わせて修正 */
.mag-filter__check{ font-size:12px; opacity:0; transform:translateY(-1px); }
.mag-filter__btn.is-on{ background: color-mix(in srgb, var(--c-green) 88%, #fff); color:#fff; }
.mag-filter__btn.is-on .mag-filter__check{ opacity:1; }

/* ===== Card refine ===== */
.mag-card{ border:1px solid var(--c-border); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm); background:#fff; }
.mag-card__thumb{ display:block; }
.mag-card__thumb img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block; }
.mag-card__body{ padding:12px 12px 14px;text-align:justify; }
.mag-card__meta{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin:0 0 6px;
}
.mag-card__date{ font-size:12px; color:#000; font-family:var(--ff-table); }
.mag-label{
  display:inline-block; padding:6px 10px; border-radius:9999px; font-size:12px; font-weight:700;
  background: color-mix(in srgb, var(--c-yellow) 45%, #fff); color:#3a3100; white-space:nowrap;
  text-align:justify;font-size:10px;
}

/* タイトルは1行省略（既存の共通指定があっても上書き） */
.mag-card__title,
.mag-card__title a{
  font-family: var(--ff-title);
  font-size: 14px;
  color:#000;
  display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ===== Pagination (chips + arrows + dots) ===== */
.mag-pager{ margin:12px 0 0; }
.mag-pager ul{ list-style:none; padding:0; margin:0; display:flex; gap:8px; justify-content:center; align-items:center; }
.mag-pager li a,
.mag-pager li span{
  display:grid; place-items:center; width:28px; height:28px; border-radius:999px;
  background:#e7e7e7; color:#333; font-size:12px; text-decoration:none; padding:0 8px;
}
.mag-pager li .current{ background: var(--c-green); color:#fff; }
.mag-pager li a:hover{ filter:brightness(.96); }

/* ページ数が文字列(…など)のときも芯をそろえる */
.mag-pager li span.dots{ background:transparent; color:#888; width:auto; padding:0 6px; }

/* ===== Grid（2列:SP、3列:PC） ===== */
.mag-grid{ display:grid; gap:16px; grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (min-width:1024px){
  .mag-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
}

/* 画像右上の縦ラベル */
.mag-card__thumb{ position:relative; overflow:hidden; border-radius:12px; }
.mag-card__vlabel{
  position:absolute; top:0; right:0;
  writing-mode: vertical-rl; text-orientation: upright; /* 縦書き */
  font-size: 12px; line-height: 1; letter-spacing: .05em;
  background: var(--color-primary, #67c997); color:#333;
  padding: 6px 4px 8px; border-bottom-left-radius: 6px;
  box-shadow: 0 1px 0 rgba(0,0,0,.06) inset;
}
.mag-card__vlabel.is-ended{ background:#d9d9d9; color:#333; }

/* 土台 */
.mag-pager, .pagination, .nav-links ul.page-numbers{ display:flex; gap:10px; justify-content:center; align-items:center; }

/* 数字の玉 */
.page-numbers:not(.prev):not(.next):not(.dots){
  display:inline-flex; justify-content:center; align-items:center;
  width:32px; height:32px; border-radius:9999px;
  background:#e9e9e9; color:#333; text-decoration:none;
  white-space:nowrap; /* 改行しない */
}

/* 現在ページ */
.page-numbers.current{ background:var(--color-primary, #67c997); color:#fff; }

/* 省略記号や矢印は丸なし */
.page-numbers.prev, .page-numbers.next, .page-numbers.dots{
  background:transparent; width:auto; height:auto; border-radius:0; padding:0 4px;
}

/* 2桁でも収まるよう微調整（念のため） */
.page-numbers.num-2d{ font-size:12px; }

/* 出力が <ul class="page-numbers"> の場合のリスト余白を抑える */
ul.page-numbers{ list-style:none; padding:0; margin:24px 0 0; display:flex; gap:10px; justify-content:center; }
ul.page-numbers li{ margin:0; }

/* ==== Web Magazine tweaks ==== */

/* フィルター：段落ち時の上下間隔 */
.mag-filter__list{
  display:flex; flex-wrap:wrap;
  column-gap:14px; row-gap:12px;   /* ← 上段・下段の余白 */
}

/* カード内チップ（黄色の丸角ラベル） */
.mag-chip{
  display:inline-flex; align-items:center; justify-content:center; background:#F7E69A; color:#333;
  border-radius:9999px; padding:4px 10px; font-weight:600; line-height:1; font-size:12px;
}
@media (max-width: 767px){
  .mag-chip{ font-size:10px; padding:3px 8px; }
}

/* 画像上：開催ステータス（縦ラベル） */
.mag-card__thumb{ position:relative; overflow:hidden; border-radius:12px; }

/* メタ行は左寄せ */
.mag-card__meta{ text-align:left; }

/* タイトルをSPで 14px に */
@media (max-width:767px){
  .mag-card__title{ font-size:14px; }
}

/* ページネーション：重なり/強調の修正 */
.mag-pager{ display:flex; align-items:center; justify-content:center; gap:12px; }
.mag-pager .page-numbers{
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#E9E9E9; color:#333; text-decoration:none;
}
.mag-pager .page-numbers.current{ background:var(--ch-green,#4DBA87); color:#fff; }
.mag-pager .page-numbers.prev,
.mag-pager .page-numbers.next{ background:transparent; width:auto; height:auto; }
.mag-pager .page-numbers.is-two{ font-size:12px; } /* 10,11.. を1行で */

/* タイトル（SPは14pxに） */
.magz-title{font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;line-height:1.45;margin:0;color:#000;}
@media (max-width:767.98px){ .magz-title{font-size:14px;} }

/* ラベル右の日時 */
.mag-card__meta{display:flex;align-items:center;gap:10px;justify-content:flex-start;text-align:left;}
.mag-date{font-size:12px;font-family:var(--ff-table);color:#000;}

/* 画像上の縦ラベル（右上に10pxオフセット／色） */
.mag-card__thumb{ position:relative; overflow:hidden; border-radius:12px 12px 0px 0px; }
.mag-status{
  position:absolute; left:10px; top:auto;            /* ← 10px 左に寄せる */
  writing-mode:vertical-rl; text-orientation:upright;
  padding:6px 5px; border-radius:0px 0px 6px 6px;
  font-size:12px; font-weight:700; color:#333;
  margin-left:auto; width:30px
}
.mag-status--upcoming{background:#FFF4B5;} /* 開催前：薄黄 */
.mag-status--past{background:#D9D9D9;}     /* 開催終了：グレー */

/* ページネーションの2桁縮小 */
.page-numbers.is-two{font-size:12px;}

/* ===== Web Magazine: fixes (pagination & event date badge) ===== */

/* 開催日バッジ（サムネ左上 10px） */
.mag-date-badge{
  position:absolute; left:10px; top:10px;
  padding:4px 8px; border-radius:9999px;
  background:rgba(255,255,255,.95); color:#000;
  font-size:12px; font-family:var(--ff-table);
  box-shadow: var(--shadow-sm);
}

/* 現在ページは必ず緑（最後に置いて勝つ） */
.mag-pager .page-numbers.current{
  background: var(--c-green) !important;
  color:#fff !important;
}

/* ドットは“完全に”丸スタイルから除外（背景なし・幅自動） */
.mag-pager .page-numbers.dots{
  background: transparent !important;
  width: auto !important; height: auto !important;
  border-radius: 0 !important; padding: 0 6px !important;
  box-shadow: none !important;
}

/* 数字の丸は current と dots を除外してグレーに */
.mag-pager .page-numbers:not(.prev):not(.next):not(.dots):not(.current){
  background:#E9E9E9;
}

.mag-datebox{ display:grid; gap:2px; text-align:right; }
.mag-date-label{ font-size:10px; line-height:1; color:#666; opacity:.9; text-align:justify;}

/* Web Magazine — カードタイトルは3行で省略（…） */
.magz-title{
  line-height:1.45;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;  /* 3行でカット */
  overflow:hidden;
  max-height:calc(1.45em * 3); /* 非WebKit系のフォールバック */
  word-break:break-word;
}
/* 念のため、1行用のnowrap指定を打ち消す（他所で .mag-card__title を使ってる場合） */
.mag-card__title,
.mag-card__title a{ white-space:normal !important; }

/* ===== Pagination: dot を“アイコン表示”に（最後に置く） ===== */
.mag-pager.is-doticon .page-numbers.dots{
  position:relative;
  width:32px; height:32px;              /* 数字チップと同じ“丸枠”サイズに合わせる */
  background:transparent !important; 
  border-radius:50%;
  padding:0 !important;
  color:#888;
  font-size:0;                           /* 「…」文字は消す */
}

/* ●●● を CSSだけで描く（画像なし） */
.mag-pager.is-doticon .page-numbers.dots::before{
  content:"";
  position:absolute; left:50%; top:50%;
  width:4px; height:4px; border-radius:50%;
  background: currentColor;
  transform: translate(-50%, -50%);
  /* 左右に2コ複製して3点リーダーに */
  box-shadow: -8px 0 0 0 currentColor, 8px 0 0 0 currentColor;
}

/* “数字の丸”と“矢印/ドット”の役割をはっきり分ける（競合の最終リセット） */
.mag-pager.is-doticon .page-numbers:not(.prev):not(.next):not(.dots){
  display:inline-flex; justify-content:center; align-items:center;
  width:32px; height:32px; border-radius:9999px;
  background:#E9E9E9; color:#333; text-decoration:none;
}
.mag-pager.is-doticon .page-numbers.current{
  background:var(--c-green) !important; color:#fff !important;
}
.mag-pager.is-doticon .page-numbers.prev,
.mag-pager.is-doticon .page-numbers.next{
  background:transparent !important; width:auto !important; height:auto !important; 
  border-radius:0 !important; padding:0 6px !important;
}

/* ===== Meta row: 1行固定＋スラッグ側を省略（…） ===== */
.mag-card__meta{
  display:flex; align-items:center; gap:8px;
  flex-wrap:nowrap;                     /* 折り返し禁止 */
}

/* 日付は縮まない・必ず1行 */
.mag-card__meta .mag-date{
  flex:0 0 auto;
  white-space:nowrap;
}

/* スラッグ（黄色いピル）は“可変”にしてはみ出したら省略 */
.mag-card__meta .mag-label{
  min-width:0;           /* ← これが超重要（ellipsisの前提） */
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%;                        /* 念のためのリミット */
}

/* ===== PC: 開催ステータスのサイズUP ===== */
@media (min-width:1024px){
  .mag-status,
  .mag-card__vlabel{
    font-size:16px;         /* 文字サイズUP */
    width:40px;             /* 帯の幅UP（縦書きなので“横幅”を広げる） */
    padding:8px 6px;        /* 見た目のバランス微調整（任意） */
  }
}

/* ===== Split pagination：ドットを<li>から外す版 ===== */
.mag-pager.mag-pager--split{
  display:flex; align-items:center; justify-content:center; gap:10px;
}

/* 数字グループのUL（.page-numbersはWPのA/SPAN用。ULは .mag-pages に） */
.mag-pages{ list-style:none; margin:0; padding:0; display:flex; gap:10px; }
.mag-pages li{ margin:0; }

/* セパレータ（独立ノードなので丸スタイル等の影響を受けない） */
.mag-sep{
  display:inline-flex; align-items:center; justify-content:center;
  margin-inline: clamp(12px, 3.2vw, 24px);  /* ← ドット左右の余白 */
  font-size: 18px; line-height:1; color:#888;
}

/* 既存の“すべての .mag-pager .page-numbers に丸背景”を打ち消し（保険） */
.mag-pager .page-numbers.dots{ all: unset; } /* もし残っていたら無効化 */
.mag-pager .page-numbers.prev,
.mag-pager .page-numbers.next{
  background:transparent !important; width:auto !important; height:auto !important;
  border-radius:0 !important; padding:0 6px !important; color:#bbb; font-size:20px;
}

/* 数字の玉（prev/next 以外）— 既存指定があればそれが優先でOK */
.mag-pager .page-numbers:not(.prev):not(.next){
  display:inline-flex; justify-content:center; align-items:center;
  width:32px; height:32px; border-radius:9999px;
  background:#E9E9E9; color:#333; text-decoration:none;
}
.mag-pager .page-numbers.current{ background:var(--c-green); color:#fff; }
.mag-pager .page-numbers.is-two{ font-size:12px; } /* 10,11..対策 */

/* Pagination：ドット(… )を“3点アイコン”に強制 */
.mag-pager.is-doticon .page-numbers.dots{
  position:relative;
  width:32px !important;
  height:32px !important;
  border-radius:50% !important;
  padding:0 !important;
  background:transparent !important;
  color:#888 !important;
  font-size:0 !important;         /* 文字の … は非表示 */
}
.mag-pager.is-doticon .page-numbers.dots::before{
  content:"";
  position:absolute; left:50%; top:50%;
  width:4px; height:4px; border-radius:50%;
  background:currentColor;
  transform:translate(-50%,-50%);
  /* 左右に複製して3点に */
  box-shadow:-8px 0 0 0 currentColor, 8px 0 0 0 currentColor;
}

/* ========== Pager (split) 基本整形 ========== */
.mag-pager--split{
  display:flex; align-items:center; justify-content:center; gap:12px;
}
.mag-pager--split .mag-pages{
  list-style:none; margin:0; padding:0;
  display:flex; gap:10px;
}
.mag-pager--split .mag-pages li{ margin:0; }

/* 前後矢印は丸玉スタイルの対象外にして薄グレー */
.mag-pager--split .page-numbers.prev,
.mag-pager--split .page-numbers.next{
  background:transparent !important;
  width:auto; height:auto; padding:0 6px;
  font-size:20px; color:#bbb;
}

/* ========== 中央の区切り（●→3点表示） ========== */
.mag-sep{
  position:relative;
  display:inline-block; width:32px; height:32px;   /* 数字チップと同じ高さ感 */
  background:transparent; border-radius:0;
  font-size:0;                                      /* 中の「•」は消す */
  margin:0 2px;                                     /* 左右に少し余白 */
}
.mag-sep::before{
  content:"";
  position:absolute; left:50%; top:50%;
  width:4px; height:4px; border-radius:50%;
  background:#888; transform:translate(-50%,-50%);
  /* 左右に複製して“3つの点”に */
  box-shadow:-8px 0 0 0 currentColor, 8px 0 0 0 currentColor;
}

/* ===== Magazine UI: ratio & thumbnail safety (append-only) ===== */

/* 比率フレーム（汎用） */
.frame{ position:relative; overflow:hidden; }
.frame.r-4x3{ aspect-ratio:4/3; }
.frame.r-5x7{ aspect-ratio:5/7; }

/* フレーム内の画像は縦横フィット。以前の“imgにaspect-ratio固定”を打ち消す */
.mag-card__thumb.frame > img{
  width:100%; height:100%; object-fit:cover; display:block;
  aspect-ratio:auto !important;
}

/* ページャ（split版の3点ドット）— 念押しで置いておく */
.mag-sep{
  position:relative; display:inline-block; width:32px; height:32px;
  font-size:0; background:transparent; margin:0 2px;
}
.mag-sep::before{
  content:""; position:absolute; left:50%; top:50%;
  width:4px; height:4px; border-radius:50%; background:#888; transform:translate(-50%,-50%);
  box-shadow:-8px 0 0 0 currentColor, 8px 0 0 0 currentColor;
}

/* ===== Web Magazine Main（このテンプレ専用の微調整）===== */

/* ジャンプリンク：SPで横スクロールしないよう可変幅に */
.page-template-page-magazine-main .about-toc .about-toc__list{
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
  justify-items: stretch !important;
}
.page-template-page-magazine-main .about-toc .about-toc__link{ width:100%; }

/* リスト：横はみ出し防止＆ラベル→タイトルを縦積み */
.page-template-page-magazine-main .listitem{ max-width:100%; overflow:hidden; }
.page-template-page-magazine-main .listitem__body{
  display:grid; gap:6px; min-width:0;   /* ← ここで縦並び＆はみ出し防止 */
  text-align:justify;
}
.page-template-page-magazine-main .listitem__chip{
  display:inline-block; width:max-content; max-width:100%;
}
.page-template-page-magazine-main .listitem__title{
  display:block; overflow-wrap:anywhere; /* 日本語でも安全に改行 */
}

/* サムネ：event-information のときだけ 5:7 */
.page-template-page-magazine-main .listitem__thumb img.is-5x7{
  width:112px; height:auto; aspect-ratio:5 / 7; object-fit:cover;
}

/* 「もっと見る」：他ページと完全同一の見た目に寄せる（保険） */
.page-template-page-magazine-main .c-btn.c-btn--ghost.c-btn--more{
  /* 既存 .c-btn 系のままでOK。差異がある環境向けに軽く保険 */
  text-decoration:none; font-weight:700;
}

/* ===== Web Magazine MAIN（このテンプレ専用）: ジャンプリンクの折返し＆カラム ===== */
.page-template-page-magazine-main .about-toc .about-toc__list,
.page-template-page-magazine-main-php .about-toc .about-toc__list{
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  justify-items: center;
}

.page-template-page-magazine-main .about-toc .about-toc__link,
.page-template-page-magazine-main-php .about-toc .about-toc__link{
  white-space: normal !important;       /* ← nowrapを解除して折返しOKに */
  overflow-wrap: anywhere;               /* 長い語でも強制改行の保険 */
  line-height: 1.4;
}

/* ===== Web Magazine MAIN（このテンプレ専用）: リストカードのサムネを4:3に ===== */
.page-template-page-magazine-main .listitem__thumb img,
.page-template-page-magazine-main-php .listitem__thumb img,
.page-template-page-magazine-main .act-thumb img,
.page-template-page-magazine-main-php .act-thumb img{
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;   /* 4:3 に固定 */
  object-fit: cover !important;     /* はみ出し分はトリミング */
  display: block;
}

/* サムネ枠の幅だけ軽く確保（お好みで） */
.page-template-page-magazine-main .listitem__thumb,
.page-template-page-magazine-main-php .listitem__thumb{
  flex: 0 0 112px;   /* 既存デザインに合わせる。数値は調整可 */
}

/* ===== Web Magazine MAIN：ジャンプリンクを 3+1（上段3・下段1）に ===== */
/* body クラスは WP が page-template-[filename]-php を付けるので両対応 */
.page-template-page-magazine-main .about-toc .about-toc__list,
.page-template-page-magazine-main-php .about-toc .about-toc__list{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 上段を3カラムに固定 */
  justify-items: center;                            /* 中央寄せ */
  column-gap: clamp(16px, 5vw, 36px);
  row-gap: clamp(8px, 2.4vw, 14px);
}

/* 4つ目だけを2列目の中央（2カラム目）に置く＝下段1個センター */
.page-template-page-magazine-main .about-toc .about-toc__list > li:nth-child(4),
.page-template-page-magazine-main-php .about-toc .about-toc__list > li:nth-child(4){
  grid-column: 2 / span 1;
}

/* はみ出し防止（長い文言を折り返す） */
.page-template-page-magazine-main .about-toc .about-toc__link,
.page-template-page-magazine-main-php .about-toc .about-toc__link{
  white-space: normal !important;
  overflow-wrap: anywhere;
  line-height: 1.4;
}

/* ===== Web Magazine Main 固有 ===== */
.page-template-page-magazine-main,
.page-template-page-magazine-main-php{}

/* 3+1 のジャンプリンク（上3 / 下1を中央） */
.page-template-page-magazine-main  .about-toc .about-toc__list,
.page-template-page-magazine-main-php .about-toc .about-toc__list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  justify-items:center;
  column-gap:clamp(16px,5vw,36px);
  row-gap:clamp(8px,2.4vw,14px);
}
.page-template-page-magazine-main  .about-toc .about-toc__list > li:nth-child(4),
.page-template-page-magazine-main-php .about-toc .about-toc__list > li:nth-child(4){
  grid-column:2 / span 1;     /* 下段1個を中央に */
}
.page-template-page-magazine-main  .about-toc .about-toc__link,
.page-template-page-magazine-main-php .about-toc .about-toc__link{
  white-space:normal!important;
  overflow-wrap:anywhere;
  line-height:1.4;
}

/* 横はみ出し保険：このテンプレ内ではコンテンツを確実に折り返す */
.page-template-page-magazine-main  .listitem__chip,
.page-template-page-magazine-main-php .listitem__chip{
  max-width:100%;
  white-space:normal;
  overflow-wrap:anywhere;
}

/* リストカードのサムネ：既存の 112x112 固定を“4:3”に上書き */
.page-template-page-magazine-main  .listitem__thumb,
.page-template-page-magazine-main-php .listitem__thumb{
  flex:0 0 clamp(120px, 28vw, 170px);
  border-radius:12px; overflow:hidden;
}
.page-template-page-magazine-main  .listitem__thumb img,
.page-template-page-magazine-main-php .listitem__thumb img{
  width:100%!important;
  height:auto!important;
  aspect-ratio:4 / 3!important;
  object-fit:cover!important;
  display:block;
}
/* スラッグが event-information の投稿は 5:7 に */
.page-template-page-magazine-main  .listitem__thumb img.is-5x7,
.page-template-page-magazine-main-php .listitem__thumb img.is-5x7{
  aspect-ratio:5 / 7!important;
}

/* SP時の幅調整（はみ出し防止） */
@media (max-width:767.98px){
  .page-template-page-magazine-main  .listitem__thumb,
  .page-template-page-magazine-main-php .listitem__thumb{
    flex-basis:120px;
  }
}

/* ===== Web Magazine Main：ジャンプリンク（上段3／下段1） ===== */
.page-template-page-magazine-main .about-toc__list,
.page-template-page-magazine-main-php .about-toc__list{
  display:grid;
  grid-template-columns: repeat(3, minmax(130px, max-content)); /* 上段は3カラム */
  justify-content:center;    /* 全体を中央寄せ */
  justify-items:center;      /* 各項目を中央寄せ */
  column-gap: clamp(16px, 5vw, 36px);
  row-gap: clamp(8px, 2.4vw, 14px);
}
/* 4番目（子育てを〜）だけ下段に単独配置＆中央寄せ */
.page-template-page-magazine-main .about-toc__list > li:nth-child(4),
.page-template-page-magazine-main-php .about-toc__list > li:nth-child(4){
  grid-column: 1 / -1;       /* 3カラムの“1行”を丸ごと占有＝中央に来る */
}

/* SPは2カラムに落として、4番目は左右2列ぶち抜きで1段だけ表示 */
@media (max-width: 640px){
  .page-template-page-magazine-main .about-toc__list,
  .page-template-page-magazine-main-php .about-toc__list{
    grid-template-columns: 1fr 1fr;
    justify-items: stretch;  /* ボタンを端まで伸ばすなら stretch、中央なら center */
  }
  .page-template-page-magazine-main .about-toc__list > li:nth-child(4),
  .page-template-page-magazine-main-php .about-toc__list > li:nth-child(4){
    grid-column: 1 / 3;      /* 2列を横断＝1つだけの段 */
  }
}

/* Web Magazine Main：ジャンプリンク → リード文の間の余白 */
.page-template-page-magazine-main .about-toc{
  margin-bottom: clamp(16px, 4vw, 36px);
}

/* もし効きが弱い場合は ↓ を使う */
/* .page-template-page-magazine-main .about-toc.about-toc--checks{ margin-bottom: clamp(16px,4vw,36px) !important; } */

/* ================================
   Web Magazine Main — ジャンプリンク 3+1 & 余白（強制上書き）
   ================================ */

/* 3カラム固定（上段3）※ auto-fit の !important を打ち消す */
.page-template-page-magazine-main nav.about-toc.about-toc--checks > ul.about-toc__list,
.page-template-page-magazine-main-php nav.about-toc.about-toc--checks > ul.about-toc__list{
  display:grid !important;
  grid-template-columns: repeat(2, minmax(180px, 1fr)) !important;
  justify-content:center !important;
  column-gap: clamp(16px, 5vw, 36px) !important;
  row-gap: clamp(16px, 3.6vw, 16px) !important;
}

/* 4つ目だけ下段の中央に配置（3列の“2列目”） */
.page-template-page-magazine-main nav.about-toc.about-toc--checks > ul.about-toc__list > li:nth-child(4),
.page-template-page-magazine-main-php nav.about-toc.about-toc--checks > ul.about-toc__list > li:nth-child(4){
  grid-column: 2 / span 1 !important;
}

/* SPは2カラムに落として、4つ目は2列ぶち抜きで1段だけ表示 */
@media (max-width: 640px){
  .page-template-page-magazine-main nav.about-toc.about-toc--checks > ul.about-toc__list,
  .page-template-page-magazine-main-php nav.about-toc.about-toc--checks > ul.about-toc__list{
    grid-template-columns: 1fr 1fr !important;
    justify-items:stretch !important;
  }
  .page-template-page-magazine-main nav.about-toc.about-toc--checks > ul.about-toc__list > li:nth-child(4),
  .page-template-page-magazine-main-php nav.about-toc.about-toc--checks > ul.about-toc__list > li:nth-child(4){
    grid-column: 1 / -1 !important; /* 2列ぶち抜き＝中央に見える */
  }
}

/* ジャンプリンク → リード文の間にしっかり余白 */
.page-template-page-magazine-main nav.about-toc.about-toc--checks,
.page-template-page-magazine-main-php nav.about-toc.about-toc--checks{
  margin-bottom: clamp(16px, 4vw, 36px) !important;
}
/* 念のため、リード側にも上マージン（二重になっても見た目は自然） */
.page-template-page-magazine-main .sup-lead,
.page-template-page-magazine-main-php .sup-lead{
  margin-top: clamp(8px, 2.2vw, 18px) !important;
}

.frame{ position:relative; overflow:hidden; }
.frame.r-5x7{ aspect-ratio:5 / 7; }
.mag-card__thumb.frame > img{
  width:100%; height:100%; object-fit:cover; display:block;
  aspect-ratio:auto !important;
}

/* Event Information 専用のリード文 */
.ev-lead{
  font-family:"Kiwi Maru","Hiragino Mincho ProN","Yu Mincho",serif;
  font-weight:400;           /* ご指定：KIWI MARU／12px */
  font-size:12px;
  line-height:var(--lh-base);
  color:#000;
  text-align:justify;
  margin: 8px auto 0;        /* お好みで微調整OK */
}

/* モーダル本文に含まれるタイトルは重複防止で隠す */
.pg-modal__content .pg-modal__title { display: none; }

/* ヘッダーに差し替えたタイトルは表示 */
.pg-modal__head .pg-modal__title {
  display: block;
  margin: 0 0 16px;
}

/* 補助：点線区切りがヘッダー直下から始まる余白調整（必要なら） */
.pg-modal__head { margin-bottom: 12px; }

/* ===== Modal: タイトルは固定表示をやめ、通常フローでスクロールさせる ===== */
/* ヘッダー（JSが挿入する .pg-modal__head）を非stickyに */
.pg-modal__head{
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  background: transparent !important;
  padding: 0 0 12px !important; /* 余白はお好みで */
  text-align: center !important;
}

/* タイトル自体も非stickyにして通常ブロックに */
.pg-modal .pg-modal__title{
  position: static !important;
  margin: 0 0 12px !important;
  font-size:24px;
}

order-radius: 0 !important;
}

/* （任意）閉じるボタンは今のまま“常に見える”でOK。
   もしボタンもスクロールで一緒に流したい場合は下を有効化：
.pg-modal .pg-modal__close{
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
}
*/

/* 7:10 フレーム */
.frame.r-7x10{ aspect-ratio: 7 / 10; }

/* publication カード（枠線なし） */
.pub-card{ display:grid; gap:8px; justify-items:center; }
.pub-card__thumb{ display:block; width:min(220px, 70vw); border:0; }
.pub-card__thumb img{ width:100%; height:100%; object-fit:cover; display:block; border:0; }

/* 見出し：ZEN KAKU、PC=12px / SP=10px、枠線なし */
.pub-card__title{
  margin:0; text-align:center; border:0;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  font-weight:500; font-size:12px; color:#000; line-height:1.5;
}
@media (max-width:767.98px){ .pub-card__title{ font-size:10px; } }

/* ===== Publication（情報誌アーカイブ） ===== */
.pub-carousel{ position:relative; }
#pub-snap.hsnap{ gap:14px; }

/* アイテム幅：SP=1枚, PC=3枚 */
#pub-snap .pub-item{ flex:0 0 100%; }
@media (min-width:1024px){
  /* 3枚 + 2ギャップ(14px*2) を概ね均等に */
  #pub-snap .pub-item{ flex:0 0 calc((100% - 28px)/3); }
}

/* カード体裁：枠線/影なし */
.pub-card{ background:transparent; border:0; box-shadow:none; }
.pub-card__thumb img{ width:100%; height:auto; aspect-ratio:7/10; object-fit:cover; display:block; }
.pub-card__title{
  margin:.45em 0 0; text-align:center;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  font-weight:700; color:#000; font-size:14px; line-height:1.45;
}
@media (max-width:767.98px){
  .pub-card__title{ font-size:10px; }
}

/* =========================
   NEWS（topics）横長カード：コンパクト版
   - 日付とラベルは固定幅＆1行
   - タイトルは残り幅で1行省略
   - 縦中央揃え＆高さを詰める
   ========================= */

/* どちらのボディクラスでも効くように2つ用意 */
.page-template-page-news .list,
.page-template-page-news-php .list{ gap:10px; }

.page-template-page-news .listitem,
.page-template-page-news-php .listitem{
  display:flex;
  align-items:center;            /* 縦中央揃え */
  gap:12px;
  padding:8px 12px;              /* 高さを詰める */
  min-height:52px;               /* 行の最低高さ */
}

/* 日付：固定幅・1行（数字を等幅で揃える） */
.page-template-page-news .listitem .mag-date,
.page-template-page-news-php .listitem .mag-date{
  flex:0 0 64px;                 /* ★ 固定幅：PC基準 */
  white-space:nowrap;            /* 1行固定 */
  text-align:left;
  font-variant-numeric: tabular-nums; /* 桁ズレ防止（対応ブラウザで等幅） */
}

/* ラベル：固定幅・1行・中央寄せ（既存の黄色ピルを流用） */
.page-template-page-news .listitem__chip,
.page-template-page-news-php .listitem__chip{
  flex:0 0 64px;                 /* ★ 固定幅：PC基準 */
  display:flex; align-items:center; justify-content:center;
  height:26px; line-height:26px; padding:0 10px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* タイトル：残り幅いっぱい・1行省略（…） */
.page-template-page-news .listitem__title,
.page-template-page-news-php .listitem__title{
  flex:1 1 auto; min-width:0;
  margin:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* 既存の “3行クランプ” 指定を打ち消し（NEWSは常に1行） */
@media (min-width:768px){
  .page-template-page-news  .listitem__title,
  .page-template-page-news  .listitem__title a,
  .page-template-page-news-php .listitem__title,
  .page-template-page-news-php .listitem__title a{
    display:block !important;
    -webkit-line-clamp:unset !important;
    -webkit-box-orient:initial !important;
    line-clamp:unset !important;
  }
}

/* スマホは少しだけ幅を縮める */
@media (max-width:480px){
  .page-template-page-news .listitem,
  .page-template-page-news-php .listitem{
    padding:8px 10px; min-height:46px; gap:10px;
  }
  .page-template-page-news .listitem .mag-date,
  .page-template-page-news-php .listitem .mag-date{
    flex-basis:50px;             /* ★ SPの固定幅 */
  }
  .page-template-page-news .listitem__chip,
  .page-template-page-news-php .listitem__chip{
    flex-basis:50px;             /* ★ SPの固定幅 */
    font-size:10px; height:24px; line-height:24px; padding:0 8px;
  }
}

/* ============================
   NEWS（topics）SP専用レイアウト
   - タイトル：2行まで＋省略、1行でも2行分の高さを確保
   - 日付/ラベル：固定幅・1行
   - 行全体：縦中央
   ============================ */
@media (max-width: 767.98px){
  /* 行全体をコンパクト＆縦中央 */
  .page-template-page-news .listitem,
  .page-template-page-news-php .listitem{
    display:flex;
    align-items:center;         /* ← 縦中央揃え */
    gap:10px;
    padding:8px 10px;
    min-height:auto;            /* タイトル2行ぶんで決まる */
  }

  /* （念のため）本文ブロックがある場合は横並び＆縦中央 */
  .page-template-page-news .listitem__body,
  .page-template-page-news-php .listitem__body{
    display:flex;
    align-items:center;         /* ← タイトルとラベルも縦中央に */
    gap:10px;
    min-width:0;                /* タイトルの省略が効くように */
  }

  /* 日付：固定幅・1行 */
  .page-template-page-news .mag-date,
  .page-template-page-news-php .mag-date{
    flex:0 0 88px;              /* 幅はお好みで微調整可 */
    white-space:nowrap;
  }

  /* ラベル：固定幅・1行（はみ出しは…） */
  .page-template-page-news .listitem__chip,
  .page-template-page-news-php .listitem__chip{
    flex:0 0 50px;              /* 幅はお好みで微調整可 */
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-align:center;
  }

  /* タイトル：2行まで＋省略／常に2行ぶんの高さを確保 */
  .page-template-page-news .listitem__title,
  .page-template-page-news .listitem__title a,
  .page-template-page-news-php .listitem__title,
  .page-template-page-news-php .listitem__title a{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;       /* 2行でカット */
    overflow:hidden;
    line-height:1.45;           /* 既存に合わせる */
    min-height:calc(2 * 1.45em);
    max-height:calc(2 * 1.45em);/* ← 1行でも“2行分”の高さを維持 */
    white-space:normal;
    word-break:break-word;
  }
}

/* ============================
   NEWS（topics）SP：1行でも縦センター
   ============================ */
@media (max-width: 767.98px){
  /* タイトル親：高さ=2行ぶんの箱＋縦中央 */
  .page-template-page-news .listitem__title,
  .page-template-page-news-php .listitem__title{
    display:flex;
    align-items:center;                /* ← 1行でも中央に来る */
    min-height:calc(2 * 1.45em);
    max-height:calc(2 * 1.45em);       /* “常に2行ぶん”を維持 */
    line-height:1.45;                  /* 既存と合わせる */
    min-width:0;                       /* 省略の前提 */
  }

  /* 中のリンクだけを2行クランプ（親はフレックスのまま） */
  .page-template-page-news .listitem__title a,
  .page-template-page-news-php .listitem__title a{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;              /* 2行で省略… */
    overflow:hidden;
    white-space:normal;
    word-break:break-word;
    width:100%;
  }

  /* （保険）本文コンテナも縦中央＆省略が効くように */
  .page-template-page-news .listitem__body,
  .page-template-page-news-php .listitem__body{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
  }
}

/* ============================
   NEWS（SP）タイトル省略の最終調整
   - 親(.listitem__title)の clamp/overflow を解除
   - 子(<a>)だけに 2行クランプを適用
   ============================ */
@media (max-width: 767.98px){
  /* 親は“2行ぶんの高さのフレックス箱”＋縦中央。clampは外す */
  .page-template-page-news .listitem__title,
  .page-template-page-news-php .listitem__title{
    display:flex !important;
    align-items:center !important;
    min-height:calc(2 * 1.45em) !important;
    max-height:calc(2 * 1.45em) !important;
    line-height:1.45 !important;

    /* ← ここがポイント：親の省略系は無効化 */
    overflow:visible !important;
    -webkit-line-clamp:unset !important;
    line-clamp:unset !important;
    -webkit-box-orient:initial !important;
  }

  /* 子リンクにだけ 2行クランプ＋省略を適用 */
  .page-template-page-news .listitem__title a,
  .page-template-page-news-php .listitem__title a{
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;   /* 2行でカット（…）*/
    overflow:hidden !important;
    white-space:normal !important;
    word-break:break-word !important;
    width:100%;
    min-height:calc(2 * 1.45em);       /* 1行でも2行分の高さを維持 */
    max-height:calc(2 * 1.45em);
  }

  /* （保険）タイトル周りのフレックス行で省略が効くように */
  .page-template-page-news .listitem__body,
  .page-template-page-news-php .listitem__body{
    min-width:0 !important;
  }
}

/* ===== NEWS（SP）タイトル：常に2行ぶん高さ＋2行クランプ（…）＋縦センター ===== */
@media (max-width: 767.98px){
  /* 行（カード）内：タイトルが縮められるように */
  .page-template-page-news .listitem,
  .page-template-page-news-php .listitem{
    align-items: center;
    min-width: 0; /* 省略系が効く前提 */
    gap: 10px;
    padding: 8px 10px;
  }

  /* 日付/ラベルは固定幅＋1行（そのまま） */
  .page-template-page-news .mag-date,
  .page-template-page-news-php .mag-date{
    flex: 0 0 88px;
    white-space: nowrap;
  }
  .page-template-page-news .listitem__chip,
  .page-template-page-news-php .listitem__chip{
    flex: 0 0 56px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
  }

  /* 親：2行ぶんの“器”＋縦センター（省略は親ではしない） */
  .page-template-page-news .listitem__title,
  .page-template-page-news-php .listitem__title{
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    display: flex !important;
    align-items: center !important;
    line-height: 1.45;
    min-height: calc(2 * 1.45em);
    max-height: calc(2 * 1.45em);

    /* ← 以前の指定を打ち消し（重要） */
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    -webkit-box-orient: initial !important;
    white-space: normal !important;
  }

  /* 子：実際の2行クランプ（…）を掛ける本体 */
  .page-template-page-news .listitem__titleText,
  .page-template-page-news-php .listitem__titleText{
    width: 100%;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;  /* 2行で省略 */
    overflow: hidden !important;
    white-space: normal !important;
    word-break: break-word !important;
  }
}

/* ========= Single: magazine 記事だけのレイアウト ========= */
.single.is-magazine-article .mag-article__eyebrow{
  font-family: var(--ff-key);
  font-weight:700;
  letter-spacing:.06em;
  color:#666;
  margin: 0 0 8px;
}

.single.is-magazine-article .mag-article__title{
  font-family: var(--ff-title);
  font-size: clamp(22px, 5.2vw, 36px);
  line-height:1.25;
  margin: 0 0 12px;
  color:#000;
}

/* リード枠（ベージュの箱） */
.single.is-magazine-article .mag-hero{
  background: color-mix(in srgb, var(--c-beige) 100%, #fff 0%);
  border-radius: 16px;
  padding: clamp(12px, 3.2vw, 18px);
  display: grid;
  gap: clamp(10px, 2.6vw, 14px);
}
@media (min-width: 768px){
  .single.is-magazine-article .mag-hero{
    grid-template-columns: 1fr 1.2fr;   /* 画像 : リード文 */
    align-items: center;
  }
}

.single.is-magazine-article .mag-hero__thumb{
  border-radius: 12px; overflow: hidden;
}
.single.is-magazine-article .mag-hero__thumb img{
  width:100%; height:auto; aspect-ratio: 4 / 3; object-fit: cover; display:block;
}

/* リード文（Zen Kaku寄りの読み物トーン） */
.single.is-magazine-article .mag-hero__lead{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  font-weight:400;
  line-height:1.9;
  color:#000;
  text-align:justify;
}
.single.is-magazine-article .mag-hero__lead p{ margin:0 0 .9em; }

/* 2枚目の小画像（任意） */
.single.is-magazine-article .mag-hero__subimg{
  margin-top: 10px;
}
.single.is-magazine-article .mag-hero__subimg img{
  width:100%; height:auto; display:block; border-radius:8px;
}

/* 日付などの軽いメタ */
.single.is-magazine-article .mag-article__meta{
  margin: 8px 0 0; color:#666; font-size:14px; font-family:var(--ff-table);
}

/* ========= 本文 H2：黄色の縦線＋サイズ14px ========= */
.single.is-magazine-article .entry-content h2{
  position: relative;
  margin: 18px 0 8px;
  padding-left: 14px;              /* 線ぶんの内側余白 */
  font-size: 14px;
  line-height: 1.6;
  font-weight: 700;
  color: #333;
}

/* ===== Magazine single: eyebrow left & beige fullbleed ===== */
.single.is-magazine-article .mag-article__eyebrow{
  margin: 10px 0 6px;
  text-align: left !important;
  font-family: var(--ff-hero-en, "Suez One", serif);
  letter-spacing: .04em;
  opacity:.9;
}

/* ベージュBOXを画面横いっぱい＋内側はコンテナで整列 */
.single.is-magazine-article .mag-hero{
  background: var(--c-beige);
}
.single.is-magazine-article .mag-hero.is-fullbleed{
  width:100vw; margin-inline: calc(50% - 50vw); /* fullbleed */
}
.single.is-magazine-article .mag-hero__inner{
  padding: clamp(14px, 3.6vw, 24px) 0;
  display: grid; gap: clamp(10px, 2.8vw, 16px);
}

/* タイトル → 画像 → リード の見た目 */
.single.is-magazine-article .mag-article__title{
  margin: 0;
  font-family: var(--ff-title);
  line-height: 1.35;
}
.single.is-magazine-article .mag-hero__subimg{
  margin: 0;
  border-radius: 12px; overflow: hidden;
}
.single.is-magazine-article .mag-hero__subimg img{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block;
}
.single.is-magazine-article .mag-hero__lead{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  font-weight:300; font-size:14px; color:#000; line-height: var(--lh-base,1.85);
  text-align: justify;
}

/* ===== 本文タイポ（magazine 専用） ===== */
.single.is-magazine-article .entry-content h2{
  position: relative;
  margin: 1.2em 0 .6em;
  padding-left: 12px;                 /* 黄色バーを本文に近づける */
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  font-weight:500;
  font-size:16px;
  line-height:1.5;
  text-align:justify;
  color:#333;
}

.single.is-magazine-article .entry-content p{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  font-weight:300;
  font-size:14px;
  line-height: var(--lh-base,1.85);
  color:#000;
  text-align: justify;
}

/* ベージュ背景＝横幅いっぱい／角丸なし */
.single.is-magazine-article .mag-hero{
  background: var(--c-beige);
  border-radius: 0 !important;   /* ← 明示的に“角丸なし” */
}

/* =========================================================
   Web Magazine（single）専用スタイル（スコープ限定）
   ========================================================= */
.single.is-magazine-article .mag-article__eyebrow{
  display:block;
  text-align:left;            /* 左端に */
  font-family: var(--ff-key, "Noto Sans JP", system-ui, sans-serif);
  font-weight:700;
  font-size:12px;
  color:#000;
  margin: 10px 0 8px;
}

/* ベージュ背景＝横幅いっぱい／角丸なし（.is-fullbleed は既存ユーティリティ） */
.single.is-magazine-article .mag-hero{
  background: var(--c-beige, #F0EAE0);
  border-radius: 0 !important;     /* 角丸なし */
  padding: clamp(18px, 4vw, 28px) 0;
}
.single.is-magazine-article .mag-hero__inner{
  text-align:left;                 /* 既存 .l-container の center を打ち消し */
}

/* タイトル */
.single.is-magazine-article .mag-article__title{
  margin: 0 0 12px;
  font-family: var(--ff-title);
  line-height: 1.35;
  color:#000;
}

/* サブ画像（ACF / アイキャッチ） */
.single.is-magazine-article .mag-hero__subimg{
  margin: 0 0 12px;
}
.single.is-magazine-article .mag-hero__subimg img{
  width: 100%;
  height: auto;
  display:block;
  border-radius: 12px;             /* 画像は角丸のまま（お好みで0に） */
  object-fit: cover;
}

/* リード文 */
.single.is-magazine-article .mag-hero__lead p{
  margin: 0 0 .9em;
  font-family: "Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  font-weight:300;                 /* LIGHT 300 */
  font-size:14px;
  line-height: var(--lh-base, 1.85);
  color:#000;
  text-align:justify;
}

/* ===== 記事本文：タイポ指定 ===== */
/* h2：ZEN KAKU / 500 / 16px ＋ 黄色の縦バー（本文に近づけ） */
.single.is-magazine-article .entry-content h2{
  position:relative;
  margin: 1.4em 0 .6em;
  padding-left: 14px;              /* バーと本文の距離を最小限に */
  font-family: "Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif !important;
  font-weight:500 !important;
  font-size:16px !important;
  line-height:1.5;
  color:#333;
}

/* Eyebrow を左端に */
.single.is-magazine-article .mag-article__eyebrow{
  display:block;
  text-align:left;
  font-family: var(--ff-key, "Noto Sans JP", system-ui, sans-serif);
  font-weight:700;
  font-size:12px;
  color:#000;
  margin: 10px 0 8px;
}

/* ベージュ帯（横幅いっぱい / 角丸なし / タイトル〜画像〜リード文） */
.single.is-magazine-article .mag-hero{
  background: var(--c-beige, #F0EAE0);
  border-radius: 0 !important;
  padding: clamp(18px, 4vw, 28px) 0;
}
/* 中身は本文と同じ左右パディング（.l-container を継承） */
.single.is-magazine-article .mag-hero__inner{
  text-align:left;
}

/* タイトル */
.single.is-magazine-article .mag-article__title{
  margin: 0 0 12px;
  font-family: var(--ff-title);
  line-height: 1.35;
  color:#000;
}

/* 画像：SPは“高さMAX=400px”で全体表示（縦横比保持） */
.single.is-magazine-article .mag-hero__subimg{
  margin: 0 0 12px;
  display:flex; justify-content:center; align-items:center;
}
.single.is-magazine-article .mag-hero__subimg img{
  /* PCでも縦横比は保持（height:auto / width:100%でOK） */
  max-width:100%;
  height:auto;
  display:block;
  object-fit:contain;  /* 保険：heightを与えた時だけ効く */
  border-radius: 0;    /* ヒーロー内は角丸なしに統一 */
}
@media (max-width: 767.98px){
  .single.is-magazine-article .mag-hero__subimg img{
    max-height:400px;     /* ← SPだけ高さ上限 */
    width:auto;           /* 幅は高さに合わせて自動 */
    max-width:100%;       /* それでも横はみ出さない */
    height:auto;          /* 比率維持 */
    object-fit:contain;   /* 全体表示（トリミングなし） */
  }
}

/* リード文（本文と同じ系統のタイポ） */
.single.is-magazine-article .mag-hero__lead p{
  margin: 0 0 .9em;
  font-family: "Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  font-weight:300;    /* LIGHT 300 */
  font-size:14px;
  line-height: var(--lh-base, 1.85);
  color:#000;
  text-align:justify;
}

/* ===== 記事本文：タイポ指定 ===== */
.single.is-magazine-article .entry-content p{
  font-weight:300 !important;
  font-size:14px !important;
  line-height: var(--lh-base, 1.85) !important;
  color:#000 !important;
  text-align:justify;
}
/* h2：黄色バーを本文に近づけ、サイズはフォント比で可変 */
.single.is-magazine-article .entry-content h2{
  position:relative;
  margin: 1.4em 0 .6em;
  padding-left: 12px;  /* 近づける */
  padding-bottom: 16px;
  font-weight:500 !important;
  font-size:16px !important;
  line-height:1.5;
  color:#333;
}

/* ===== Fix: Web Magazine（single）横幅・並び・画像比率の競合をリセット ===== */

/* 1) ベージュ帯：横いっぱい & 角丸なし & 縦並びに強制 */
.single.is-magazine-article .mag-hero{
  width:100vw;                    /* fullbleed */
  margin-inline: calc(50% - 50vw);
  background: var(--c-beige);
  border-radius: 0 !important;    /* 角丸なしを強制 */
  display: block !important;      /* ← 以前の grid 2カラムを無効化 */
  padding: clamp(18px, 4vw, 28px) 0 !important;
}

/* 2) 内側は本文と同じ横幅／左右パディング（SPのみ）＋左寄せ */
.single.is-magazine-article .mag-hero__inner{
  text-align: left !important;    /* .l-container の center を打ち消す */
}
@media (max-width: 767.98px){
  .single.is-magazine-article .mag-hero__inner{
    padding-inline: var(--gutter-mobile) !important;  /* ← .entry-content と揃える */
  }
}

/* 3) Eyebrow を左端に固定 */
.single.is-magazine-article .mag-article__eyebrow{
  text-align: left !important;
  margin: 10px 0 6px !important;
}

/* 4) 並び順：タイトル → サブ画像 → リード文（マークアップ順のまま） */
.single.is-magazine-article .mag-article__title{ margin: 0 0 12px !important; padding-bottom:24px; text-align:justify; }

/* 5) 画像：比率維持で全体表示。SPは高さ最大400px。PCはおまかせ（トリミング禁止） */
.single.is-magazine-article .mag-hero__subimg{
  margin: 0 0 12px !important;
  border-radius: 0 !important;   /* 画像の角丸も不要なら 0 に */
  overflow: visible !important;
}
.single.is-magazine-article .mag-hero__subimg img{
  width: auto !important;        /* 幅は自動（はみ出し防止は下で） */
  max-width: 100% !important;    /* 親よりは大きくしない */
  height: auto !important;       /* 比率維持 */
  aspect-ratio: auto !important; /* 既存の 4:3 固定を解除 */
  object-fit: contain !important;/* 全体表示（トリミングしない） */
  object-position: center !important;
  display: block;
}
@media (max-width: 767.98px){
  .single.is-magazine-article .mag-hero__subimg img{
    max-height: 400px !important; /* ← SPだけ高さ上限 */
  }
}

/* 6) リード文：本文系のタイポ */
.single.is-magazine-article .mag-hero__lead{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  font-weight:300; font-size:14px; line-height:var(--lh-base,1.85);
  color:#000; text-align:justify;
}
.single.is-magazine-article .mag-hero__lead p{ margin:0 0 .9em; }

.single.is-magazine-article .entry-content h2::before{
  content:""; position:absolute; left:0; top:40%; transform:translateY(-50%);
  width:6px; height:2.8em; background:var(--c-yellow); border-radius:2px;
}

/* 8) 本文 p：Zen Kaku 300 / 14px（念のため強制） */
.single.is-magazine-article .entry-content p{
  font-weight:300 !important; font-size:14px !important; line-height:var(--lh-base,1.85) !important;
  color:#333 !important; text-align:justify;
}

/* =========================
   Site-wide: PCは横幅を “60%” に
   ※ TOPスライダーは除外
   ========================= */
@media (min-width:1024px){
  /* 基本コンテナを60vwに（最大1200pxは維持） */
  .l-container{
    width: min(1200px, 45.5vw) ;
  }
}

/* ===== TOPスライダーを除外（全幅のまま） ===== */
/* スライダー自体は .hero が全幅設計だけど、
   念のため内部に .l-container を使っていても広く保てるよう保険を置く */
.home .hero,
.home .hero .l-container{
  width: 100vw !important;
  max-width: none !important;
  margin-inline: calc(50% - 50vw) !important; /* 画面端まで伸ばす */
}

/* スライド列（念のため横幅を確実に全幅に） */
.home .hero .hsnap,
.home .hero .hsnap > *{
  width: 100% !important;
  max-width: none !important;
}

/* =========================
   Sticky 3 Buttons：PCは横幅60%で中央寄せ
   ========================= */
@media (min-width:1024px){
  .stickynav{
    /* 元の inset:auto 0 0 0 を上書きして中央配置 */
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    width: min(60vw, 1200px) !important;   /* サイト全体の60%方針に合わせる */
    /* 既存の下パディング・セーフエリアはそのまま効きます */
  }
}

/* =========================================================
   PC可読性UP｜Web Magazine 単一記事（行間・段落・余白）
   ========================================================= */
@media (min-width:1024px){
  /* リード文（ベージュ帯内） */
  .single.is-magazine-article .mag-hero__lead p{
    line-height:1.95;
    margin:0 0 1.05em;
    letter-spacing:.01em;
  }

  /* 本文：P をゆったり（既存の !important を上書き） */
  .single.is-magazine-article .entry-content p{
    line-height:1.95 !important;
    margin:0 0 1.05em !important;
    letter-spacing:1px;
  }

  /* 見出し：上に余白、下はやや詰めて流れよく（黄色バーの近さは維持） */
  .single.is-magazine-article .entry-content h2{
    margin:1.8em 0 .7em !important;
  }
  .single.is-magazine-article .entry-content h3{
    margin:1.4em 0 .6em;
    line-height:1.6;
  }

  /* リスト：段落感と読みやすさ */
  .single.is-magazine-article .entry-content ul,
  .single.is-magazine-article .entry-content ol{
    padding-left:1.2em;
    margin:0 0 1.1em;
  }
  .single.is-magazine-article .entry-content li{
    line-height:1.9;
  }
  .single.is-magazine-article .entry-content li + li{
    margin-top:.45em;
  }

  /* 画像や図版の上下に呼吸スペース */
  .single.is-magazine-article .entry-content figure,
  .single.is-magazine-article .entry-content .wp-block-image{
    margin:1.2em 0 1.4em;
  }

  /* 引用を読みやすく（淡色ボーダー＋薄ベージュ背景） */
  .single.is-magazine-article .entry-content blockquote{
    margin:1.3em 0;
    padding:.1em 1em .1em 1.2em;
    border-left:4px solid var(--c-beige);
    background:#faf7f1;
  }
}

.pg-modal__head-title {
  /* 既存の .pg-modal__title に近い見た目に */
  font-size: 1.25rem;
  line-height: 1.4;
  margin: 0;
  /* 必要なら装飾など */
}

/* ===== Medical 固有の色 ===== */
.stripe-rect--mint { 
  /* カードタイトル帯（一覧のみ）を #6DD4C7 に */
  background-image: repeating-linear-gradient(
    135deg, #6DD4C7, #6DD4C7 8px, rgba(255,255,255,.0) 8px, rgba(255,255,255,.0) 16px
  );
  color: #333;
}

/* ===== 見出しボックス（緑の長方形・14px・Zen Kaku） ===== */
.md-box { margin-top: 20px; }
.md-h{
  display:inline-block;
  background:#6DD4C7;
  color:#fff;
  font-family:"Noto Sans JP", sans-serif;
  font-weight:500; /* 500 */
  font-size:14px;
  line-height:1;
  padding:10px 14px;
  border-radius:8px;
}
.md-txt{
  margin-top:0px; padding-bottom:16px; font-family:"Noto Sans JP", sans-serif; font-weight:300; /* 300 */ font-size:14px; color:#222;
  line-height:1.9; text-align:justify;
}
.md-alert{ color:#E53935; font-weight:500; }

/* ===== オンライン診療：STEP UI ===== */
.tm-step{ display:flex; align-items:flex-start; gap:14px; position:relative; }
.tm-step + .tm-step{ margin-top:18px; }
.tm-step__badge{
  width:64px; height:64px; border-radius:999px;
  background:#6DD4C7; color:#fff; display:flex; flex-direction:column;
  align-items:center; justify-content:center; font-family:"Noto Sans JP", sans-serif;
}
.tm-step__badge span{ font-size:10px; line-height:1; }
.tm-step__badge b{ font-size:18px; line-height:1.1; }
.tm-step__card{
  flex:1; background:#fff; border:1px solid #E6E6E6; border-radius:12px; padding:12px 14px;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.tm-step__title{ font-family:"Noto Sans JP", sans-serif; font-weight:500; font-size:12px; margin-bottom:6px; }
.tm-step__text{ font-family:"Noto Sans JP", sans-serif; font-weight:300; font-size:14px; }

/* ▼（下向き三角形） */
.tm-step__arrow{
  position:absolute; left:32px; bottom:-14px; width:0; height:0;
  border-left:10px solid transparent; border-right:10px solid transparent;
  border-top:14px solid #6DD4C7;
}
.tm-step:last-of-type .tm-step__arrow{ display:none; }

/* ---- Telemedicine modal tweaks ---- */
/* STEP 矢印をモーダル中央に＆上下余白 */
.pg-modal .tm-step__arrow{
  margin: 16px auto;
  display: block;
}
@media (min-width: 768px){
  .pg-modal .tm-step__arrow{ margin: 24px auto; }
}

/* 「アプリ登録のQRコード」だけ 1カラム表示（項目名→本文の縦積み） */
.pg-facts__row--onecol{ display:block; }
.pg-facts__row--onecol .pg-facts__name{ margin-bottom: 8px; }

/* 利用方法の末尾に出す赤字注記 */
.tm-rednote{ color:#c00; font-weight:700; }

/* 関連記事：横長カード（角丸・画像・タイトル） */
.pg-relcard{
  display:flex; gap:12px; align-items:center;
  padding:12px; border:1px solid #eee; border-radius:12px;
  background:#fff; text-decoration:none;
  transition: box-shadow .2s ease;
}
.pg-relcard:hover{ box-shadow:0 6px 18px rgba(0,0,0,.08); }
.pg-relcard__thumb{ width:180px; max-width:40%; flex:0 0 auto; overflow:hidden; border-radius:10px; }
.pg-relcard__body{ flex:1 1 auto; min-width:0; }
.pg-relcard__title{ font-weight:700; line-height:1.5; }

/* -------------------------------------------------------
   Modal: 1カラム統一（event/asobiba/medical 全て）
   ※ 全モーダルで .pg-facts__row を縦積みにする
------------------------------------------------------- */
.pg-modal .pg-facts__row { display:block; }
.pg-modal .pg-facts__name { margin-bottom:8px; }
.pg-modal .pg-facts__val { margin:0; }

/* 既存の2カラム指定がある場合の保険 */
.pg-modal .pg-facts__row > * { width:auto !important; }

/* -------------------------------------------------------
   Telemedicine: QR 行のみ明示的に1カラム＆画像を横中央
------------------------------------------------------- */
.pg-facts__row--onecol { display:block; }
.pg-facts__row--onecol .pg-facts__name { margin-bottom:8px; }
.pg-modal .pg-facts__row--onecol .frame { margin-left:auto; margin-right:auto; }

/* 「アプリ登録QRコード」の説明文も中央寄せにしたい場合（必要なら有効化）
.pg-modal .pg-facts__row--onecol .md-txt { text-align:center; }
*/

/* -------------------------------------------------------
   “診療までの流れ”：ワンカラム＆中央寄せ
   ▼（矢印）も中央・上下余白
------------------------------------------------------- */
.tm-section .tm-step{
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.tm-section .tm-step__card{
  width:100%; max-width:720px;
}
.pg-modal .tm-step__arrow{
  display:block; margin:16px auto;
}
@media (min-width: 768px){
  .pg-modal .tm-step__arrow{ margin:24px auto; }
}

/* -------------------------------------------------------
   “診療までの流れ”／“関連記事”のフォント指定
   ※ Noto Sans JP がテーマで読み込まれている前提
   （未読込ならテーマ側で enqueue をお願いします）
------------------------------------------------------- */
.tm-section,
.rel-section,
.tm-section *:not(svg):not(i),
.rel-section *:not(svg):not(i){
  font-family: "Noto Sans JP","Noto Sans JP",sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1.8;
}

/* 関連記事：横長カード（角丸・画像・タイトル） */
.pg-relcard{
  display:flex; gap:12px; align-items:center;
  padding:12px; border:1px solid #eee; border-radius:12px;
  background:#fff; text-decoration:none;
  transition: box-shadow .2s ease;
}
.pg-relcard:hover{ box-shadow:0 6px 18px rgba(0,0,0,.08); }
.pg-relcard__thumb{ width:180px; max-width:40%; flex:0 0 auto; overflow:hidden; border-radius:10px; }
.pg-relcard__body{ flex:1 1 auto; min-width:0; }
.pg-relcard__title{ font-weight:500; line-height:1.6; }

/* 利用方法の末尾に出す赤字注記 */
.tm-rednote{ color:#c00; font-weight:700; }

/* ===== Modal: 1カラム統一（event/asobiba/medical 共通） ===== */
.pg-modal .pg-facts__row { display:block; }
.pg-modal .pg-facts__name { margin-bottom:8px; }
.pg-modal .pg-facts__val { margin:0; }
.pg-modal .pg-facts__row > * { width:auto !important; }

/* ===== Telemedicine: QR 行（1カラム & 画像を横中央） ===== */
.pg-facts__row--onecol { display:block; }
.pg-facts__row--onecol .pg-facts__name { margin-bottom:8px; }
.pg-modal .pg-facts__row--onecol .frame { margin-left:auto; margin-right:auto; }

/* ===== “診療までの流れ”：STEP をワンカラム縦積み、矢印は中央 ===== */
.tm-section .tm-step{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0px;
}
.tm-section .tm-step__card{
  width:100%;
  max-width:720px;
}

/* STEPカード内：見出し／本文の2カラム化（SPは1カラム） */
.tm-section .tm-step__card{
  display:grid;
  grid-template-columns: 1fr;
  gap: 8px 16px;
}
@media (min-width:768px){
  .tm-section .tm-step__card{
    grid-template-columns: 240px 1fr; /* 左：見出し / 右：本文 */
    align-items:start;
  }
}

/* 見出しと本文のウエイト指定 */
.tm-section,
.tm-section *:not(svg):not(i){
  font-family: "Noto Sans JP","Noto Sans JP",sans-serif;
  font-size: 14px;
  line-height: 1.8;
}
.tm-section .tm-step__title{ font-weight: 500; }
.tm-section .tm-step__text{ font-weight: 300; }

/* ▼矢印：中央＆上下余白 */
.pg-modal .tm-step__arrow{
  display:block; margin:16px auto;
}
@media (min-width:768px){
  .pg-modal .tm-step__arrow{ margin:24px auto; }
}

/* ===== 関連記事カード（既存） ===== */
.rel-section,
.rel-section *:not(svg):not(i){
  font-family: "Noto Sans JP","Noto Sans JP",sans-serif;
  font-size: 14px;
  line-height: 1.8;
}
.pg-relcard{
  display:flex; gap:12px; align-items:center;
  padding:12px; border:1px solid #eee; border-radius:12px;
  background:#fff; text-decoration:none;
  transition: box-shadow .2s ease;
}
.pg-relcard:hover{ box-shadow:0 6px 18px rgba(0,0,0,.08); }
.pg-relcard__thumb{ width:180px; max-width:40%; flex:0 0 auto; overflow:hidden; border-radius:10px; }
.pg-relcard__body{ flex:1 1 auto; min-width:0; }
.pg-relcard__title{ font-weight:500; line-height:1.6; }

/* 利用方法の末尾に出す赤字注記（据え置き） */
.tm-rednote{ color:#c00; font-weight:700; }

/* ===== Telemedicine: 診療までの流れ（モーダル内） ===== */
.pg-modal .tm-step { margin-bottom: 0; }

/* カード本体：左が◯アイコン / 右が見出し+テキスト（縦積み） */
.pg-modal .tm-step__card{
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: start;
  padding: 16px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* ◯アイコン（STEPバッジ） */
.pg-modal .tm-step__icon{
  width: 48px; height: 48px; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  background: #6DD4C7; color: #fff;
  font-size: 10px; line-height: 1;
  flex-shrink: 0;
}
.pg-modal .tm-step__icon span{ display:block; font-weight: 500; letter-spacing: .02em; }
.pg-modal .tm-step__icon b{ display:block; font-size: 14px; font-weight: 700; letter-spacing: .02em; }

/* タイトル＆テキストを縦に */
.pg-modal .tm-step__content{ display: flex; flex-direction: column; gap: 6px; }

/* 指定フォント＆ウェイト */
.pg-modal .tm-step__title{
  font-family: "Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 500; /* 見出しは500 */
  font-size: 14px; line-height: 1.6;
}
.pg-modal .tm-step__text{
  font-family: "Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 300; /* テキストは300 */
  font-size: 14px; line-height: 1.9;
  word-break: break-word;
}

/* ▼はカードの“下”に独立配置して中央寄せ */
.pg-modal .tm-step__arrow{
  display: block;
  margin: 14px auto 24px; /* 上下に余白を確保して中央へ */
  width: 0; height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 12px solid #6DD4C7; /* ▼ */
}

/* 768px未満は余白を少しタイトに */
@media (max-width: 767px){
  .pg-modal .tm-step__card{ grid-template-columns: 40px 1fr; padding: 12px; gap: 10px; }
  .pg-modal .tm-step__icon{ width: 40px; height: 40px; }
  .pg-modal .tm-step__title{ font-size: 14px; }
  .pg-modal .tm-step__text{ font-size: 14px; }
}

/* ===== Telemedicine｜診療までの流れ（モーダル）調整 ===== */

/* 1) カード本体：左=◯アイコン / 右=見出し+本文(縦積み) */
.pg-modal .tm-step__card{
  display:grid;
  grid-template-columns: 56px 1fr;   /* ← アイコン少し大きめ */
  gap:12px;
  align-items:start;
  padding:16px;
  border-radius:16px;
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  overflow:visible;                  /* ▼がはみ出しても見えるように */
}

/* 2) ◯バッジ：上=STEP / 下=番号（縦2行） */
.pg-modal .tm-step__icon{
  width:56px; height:56px; border-radius:9999px;
  background:#6DD4C7; color:#fff; flex-shrink:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;margin:auto;
  line-height:1; gap:2px;
}
.pg-modal .tm-step__icon span{              /* 上段：STEP */
  display:block; font-size:10px; font-weight:600; letter-spacing:.06em;
  transform:translateY(1px);
}
.pg-modal .tm-step__icon b{                 /* 下段：番号 */
  display:block; font-size:18px; font-weight:800;
  transform:translateY(-1px);
}

/* 3) 右側：見出し=500 / テキスト=300（Zen Kaku 14px） */
.pg-modal .tm-step__content{ display:flex; flex-direction:column; gap:3px; }
.pg-modal .tm-step__title{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  font-weight:500; font-size:14px; line-height:1.6; color:#000;
}
.pg-modal .tm-step__text{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  font-weight:300; font-size:14px; line-height:1.85; color:#000;
  word-break:break-word;
}

/* 4) ▼：カードの“外”に出して中央／サイズ1.5倍 */
.pg-modal .tm-step__arrow{
  position:relative; left:5%; transform:translateX(-50%);
  margin:16px auto 16px;            /* 上下に余白 */
  width:0; height:0; display:block;
  border-left:15px solid transparent;      /* ← 1.5倍 */
  border-right:15px solid transparent;
  border-top:18px solid #6DD4C7;
}

/* 5) 最終STEPの下に余白＋ドット区切り線 */
.pg-modal .tm-step:last-of-type{ margin-bottom:18px; padding-bottom:6px; }
.pg-modal .tm-step:last-of-type::after{
  content:""; display:block; margin-top:16px; width:100%;
  border-bottom:2px dotted rgba(0,0,0,.28);
}

/* 6) モーダル全体：見出し=500 / テキスト=300（14px）に統一 */
.pg-modal{
  font-synthesis-weight:none; /* ブラウザの疑似ウェイト生成を抑止 */
}
.pg-modal :is(h2,h3,h4,.pg-subttl,.tm-step__title){
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif !important;
  font-weight:500 !important;
}
.pg-modal :is(p,li,dd,.tm-step__text){
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif !important;
  font-weight:300 !important; font-size:14px !important; color:#000;
}
/* 施設情報のラベル(700)はそのままにしたいので除外 */
.pg-modal .pg-facts__name{ font-weight:700 !important; }

/* SP微調整 */
@media (max-width:767px){
  .pg-modal .tm-step__card{ grid-template-columns:48px 1fr; padding:12px; gap:20px; }
  .pg-modal .tm-step__icon{ width:56px; height:56px; }
}

/* ==============================
   Stripe v2.1（共通・上書き用）
   ============================== */
:root{
  --stripe-thick: 5px;      /* 線の太さ（整数pxでジャギー防止） */
  --stripe-gap:   5px;      /* 線の間隔（整数px） */
  --stripe-angle: -45deg;
  --stripe-veil:  .38;       /* 白ベールを薄めに（0〜1） */
}

/* インライン版（行の長さに追従） */
.u-stripe{
  --stripe-color: #FDE23D; /* 既定：黄 */
  display:inline;
  padding:.12em .38em;
  border-radius:6px;
  background-image:
    linear-gradient(
      rgba(255,255,255,var(--stripe-veil)),
      rgba(255,255,255,var(--stripe-veil))
    ),
    repeating-linear-gradient(
      var(--stripe-angle),
      var(--stripe-color) 0 calc(var(--stripe-thick)),
      transparent          calc(var(--stripe-thick)) calc(var(--stripe-thick) + var(--stripe-gap))
    );
  background-origin: padding-box;
  background-clip: padding-box;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  position:relative; z-index:0;
}
.u-stripe::before,.u-stripe::after{ content:none !important; }

/* ブロック版：横幅“親の80%”を強制＋中央寄せ */
.u-stripe--block{
  display:block;
  inline-size:80%;
  max-inline-size:80%;
  margin-inline:auto;
}

/* 見出し（サイズ＆上下マージン） */
.u-stripe--heading{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  font-weight:700;
  font-size:20px;                   /* PC */
  margin: clamp(8px,2.4vw,14px) auto clamp(14px,4vw,24px); /* ← カードとの間隔 */
}
@media (max-width:767.98px){
  .u-stripe--heading{ font-size:16px; }
}

/* カード内専用：白ベールを外して“文字の下が白くならない”版 */
.u-stripe--card{
  background-image:
    repeating-linear-gradient(
      var(--stripe-angle),
      color-mix(in srgb, var(--stripe-color) 72%, transparent) 0 calc(var(--stripe-thick)),
      transparent calc(var(--stripe-thick)) calc(var(--stripe-thick) + var(--stripe-gap))
    );
}

/* 色バリエーション（黄色が混ざらないよう完全切替） */
.u-stripe.is-yellow{ --stripe-color:#FDE23D; }
.u-stripe.is-teal  { --stripe-color:#6DD4C7; }
.u-stripe.is-pink  { --stripe-color:#F5C0BF; }
.u-stripe.is-green { --stripe-color:#5AC783; }

/* page-medical-facility.php ではカード内を #6DD4C7 に */
.page-template-page-medical-facility .u-stripe--card,
.page-template-page-medical-facility-php .u-stripe--card{
  --stripe-color:#6DD4C7;
}

/* 旧 .stripe-rect を新仕様へ寄せる（互換パッチ） */
.stripe-rect{
  all:unset;
  --stripe-color:#FDE23D;
  display:block;
  margin-inline:auto;
  padding:.12em .38em;
  border-radius:6px;
  background-color:#fff;
  background-image:
    linear-gradient(rgba(255,255,255,var(--stripe-veil)), rgba(255,255,255,var(--stripe-veil))),
    repeating-linear-gradient(
      var(--stripe-angle),
      var(--stripe-color) 0 calc(var(--stripe-thick)),
      transparent          calc(var(--stripe-thick)) calc(var(--stripe-thick) + var(--stripe-gap))
    );
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.stripe-rect::before,.stripe-rect::after{ content:none !important; }

.biz-card__head .stripe-rect{
  height:60px;
}
.biz-card__head .stripe-rect.is-yellow{ --stripe-color:#FDE23D; }
.biz-card__head .stripe-rect.is-teal  { --stripe-color:#6DD4C7; }
.biz-card__head .stripe-rect.is-pink  { --stripe-color:#F5C0BF; }
.biz-card__head .stripe-rect.is-green { --stripe-color:#5AC783; }

/* スタッフ名バッジ（.staff-card__badge.stripe-rect）＝ “カード版”＝白ベールなし */
.staff-card__badge.stripe-rect{
  --stripe-color:#FDE23D;   /* 必要に応じて is-teal 等で上書き可 */
  display:inline-grid; place-items:center;
  inline-size:95%;
  padding:.12em .38em;
  border-radius:4px;
  background-origin: padding-box;
  background-clip: padding-box;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.staff-card__badge.stripe-rect.is-yellow{ --stripe-color:#FDE23D; }
.staff-card__badge.stripe-rect.is-teal  { --stripe-color:#6DD4C7; }
.staff-card__badge.stripe-rect.is-pink  { --stripe-color:#F5C0BF; }
.staff-card__badge.stripe-rect.is-green { --stripe-color:#5AC783; }

/* medical-facility ではスタッフ名バッジを自動で #6DD4C7 に */
.page-template-page-medical-facility .staff-card__badge.stripe-rect,
.page-template-page-medical-facility-php .staff-card__badge.stripe-rect{
  --stripe-color:#6DD4C7;
}

/* page-medical-facility 専用：カードとモーダルの帯をミント(#6DD4C7)に */
.page-template-page-medical-facility .pg-card__title.stripe-rect,
.page-template-page-medical-facility .pg-modal__title.stripe-rect{
  --stripe-color: #6DD4C7;
}

/* SP/PCのタイトル文字サイズ（任意。必要であれば） */
@media (min-width: 769px){
  .page-template-page-medical-facility .pg-modal__title{ font-size: 32px; }
}
@media (max-width: 768px){
  .page-template-page-medical-facility .pg-modal__title{ font-size: 24px; }
}

.page-template-page-medical-facility .pg-modal__title.stripe-rect{
  display:block;
  inline-size: auto;
  margin-inline: auto; /* 中央寄せ */
}

/* モーダルのタイトルをミント色のストライプに */
.pg-modal__title.stripe-rect{
  --stripe-color: #6DD4C7;     /* ストライプ色 */
  display: inline-block;
  padding: .18em .5em;
  border-radius: 6px;
}

/* フォントサイズ：SP16px / PC20px */
.pg-modal__title{ font-size:16px; line-height:1.4; }
@media (min-width: 769px){
  #pg-modal .pg-modal__title{ font-size:20px; }
}

@media (min-width: 1024px){
  #pg-modal .pg-modal__panel{
    width: clamp(480px, 40vw, 960px); /* 最小480px〜最大960pxの範囲で40% */
    margin-inline: auto;
    box-sizing: border-box;
  }
}

/* ▼ 既存の stripe-rect が var(--stripe-color) を参照している前提
   （そうでない場合は、その定義に var(--stripe-color) を使うよう1行追加してください） */

/* デフォルト（必要なら） */
.pg-modal__head .pg-modal__title.stripe-rect {
  --stripe-color: #FDE23D; /* 任意 */
}

/* 医療ページ（ミント） */
.tpl-stripe-mint .pg-modal__head .pg-modal__title.stripe-rect {
  --stripe-color: #6DD4C7;
}

/* イベント情報＆あそび場（黄色） */
.tpl-stripe-yellow .pg-modal__head .pg-modal__title.stripe-rect {
  --stripe-color: #FFD95A;
}

/* ★ 子育て支援ページ（オレンジ）— モーダル見出し & カード見出し */
.tpl-stripe-orange .pg-modal__head .pg-modal__title.stripe-rect,
.tpl-stripe-orange .pg-card__title.stripe-rect {
  --stripe-color:  #FFA500;  /* あなたの書き方を踏襲 */
  --stripe-yellow: #FFA500;  /* .stripe-rect が参照する変数も同時に上書き */
}

.tpl-stripe-pink .pg-modal__head .pg-modal__title.stripe-rect,
.tpl-stripe-pink .pg-card__title.stripe-rect{
  --stripe-color:  #F78FA7;  /* あなたの書き方を踏襲 */
  --stripe-yellow: #F78FA7;  /* .stripe-rect が参照する変数も同時に上書き */
}

/* モーダル用ドット区切り */
.pg-modal .pg-sep--dots{
  border-bottom:2px dotted rgba(0,0,0,.28);
  margin:16px 0;
}

/* モーダルのスクロールが親へ伝播しないように */
.pg-modal__body{
  overscroll-behavior: contain;     /* Chrome/Firefox/Safari16+ */
  -webkit-overflow-scrolling: touch;/* 慣性スクロール維持(iOS) */
}

/* 背景ロック用のフラグ（JSでposition固定するのでCSS側はoverflowだけ） */
body.is-modal-open{
  overflow: hidden;
}

/* 下の3つの注意文：軽めのウェイト＆14px */
.cc-bullets .md-txt {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.9;
  margin: 0;
}
.cc-bullets .md-txt + .md-txt { margin-top: .4rem; }

/* モーダルの注意枠（グレー角丸） */
.md-note.md-note--gray {
  background: #ECECEC;
  border-radius: 10px;
  padding: 12px 14px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.8;
  margin: 12px 0 16px;
}
.md-note p { margin: 0; }
.md-note p + p { margin-top: .3rem; }

/* Child Care テンプレだけカード＆モーダルのストライプ色を #FFA500 に */
.page-template-page-child-care .pg-card__title.stripe-rect,
.page-template-page-child-care .pg-modal__title.stripe-rect,
.page-template-page-child-care-php .pg-card__title.stripe-rect,
.page-template-page-child-care-php .pg-modal__title.stripe-rect{
  --stripe-yellow: #FFA500 !important;
}

/* .stripe-rect の色は --stripe-color があればそれを、無ければ --stripe-yellow を使う */
.stripe-rect::before{
  background: repeating-linear-gradient(
    var(--stripe-angle),
    var(--stripe-color, var(--stripe-yellow)) 0 calc(var(--stripe-unit)),
    transparent                                calc(var(--stripe-unit)) calc(var(--stripe-unit)*2)
  );
}

/* =========================================================
   cotohana — Forms polish (event/contact)
   - 見た目: 余白/角丸/影/フォーカスリング
   - 検証: HTML5バリデーションの :invalid / :valid を活用
   - アクセシビリティ配慮: focus-visible / accent-color
   - 既存の .md-h .md-txt .btn などに馴染む控えめデザイン
   ========================================================= */

:root{
  --form-acc: #6DD4C7;   /* アクセント（サイト基調のミント） */
  --form-ok:  #13A10E;   /* バリデーションOK */
  --form-ng:  #E54D2E;   /* バリデーションNG */
  --form-bd:  #E5E7EB;   /* ボーダー */
  --form-txt: #111827;   /* テキスト */
  --form-mt:  #6B7280;   /* 補助テキスト */
  --focus-r:  6px;       /* 角丸 */
  --ring: 0 0 0 3px rgba(109,212,199,.35);
}

/* ラッパの余白（固定ページ共通セクション内） */
.c-section .l-container form{
  max-width: 920px;
}

/* ラベル＆項目の縦リズム */
.c-section form .md-txt{
  display:block;
  line-height:1.6;
}

/* 入力系の共通外観 */
.c-section form input[type="text"],
.c-section form input[type="email"],
.c-section form input[type="url"],
.c-section form input[type="tel"],
.c-section form input[type="number"],
.c-section form input[type="date"],
.c-section form textarea,
.c-section form select{
  appearance:none;
  width:100%;
  box-sizing:border-box;
  padding:12px 14px;
  border:1px solid var(--form-bd);
  border-radius: var(--focus-r);
  background:#fff;
  color:var(--form-txt);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

/* プレースホルダ */
.c-section form ::placeholder{ color:#9CA3AF; }

/* フォーカス */
.c-section form input:focus,
.c-section form textarea:focus,
.c-section form select:focus{
  border-color: var(--form-acc);
  box-shadow: var(--ring);
}

/* セレクトの矢印（SVG） */
.c-section form select{
  background-image:
    linear-gradient(#fff,#fff),
    url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%236B7280' d='M5.5 7l4.5 5 4.5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat, no-repeat;
  background-position: right 12px center, right 12px center;
  background-size: auto, 20px 20px;
  padding-right: 40px;
}

/* ラジオ／チェック：モダンに */
.c-section form input[type="radio"],
.c-section form input[type="checkbox"]{
  accent-color: var(--form-acc);
  transform: translateY(1px);
}

/* ファイル入力のボタン */
.c-section form input[type="file"]{
  width:100%;
}
.c-section form input[type="file"]::file-selector-button{
  margin-right:12px;
  padding:10px 14px;
  border:1px solid var(--form-bd);
  border-radius:999px;
  background:#fff;
  cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.c-section form input[type="file"]::file-selector-button:hover{
  border-color: var(--form-acc);
  box-shadow: var(--ring);
}

/* セクション間の水平線 */
.c-section form hr{
  border:none;
  border-top:1px dashed #D1D5DB;
  margin: 20px 0;
}

/* ボタンの強化（既存 .btn に寄り添って上品に） */
.c-section form .btn{
  border-radius: 999px;
  padding: 12px 22px;
  line-height: 1.2;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  transition: transform .06s ease, box-shadow .15s ease, background .15s ease;
}
.c-section form .btn:focus-visible{
  outline: none;
  box-shadow: var(--ring);
}
.c-section form .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

/* ちょいヒント */
.c-section form .hint{ color:var(--form-mt); font-size: .92rem; }

/* -------------------------
   バリデーションの見た目
   ------------------------- */

/* 初期状態では :invalid を見せない工夫
   - placeholder が無い type は :user-invalid (将来) 代替として :focus-within や .was-validated を併用
*/
.c-section form input:invalid:not(:focus):not(:placeholder-shown),
.c-section form textarea:invalid:not(:focus):not(:placeholder-shown),
.c-section form select:invalid:not(:focus){
  border-color: var(--form-ng);
}

/* 送信後や任意のJSで .was-validated が付いた場合は、未入力/不正を強調 */
.c-section form.was-validated input:invalid,
.c-section form.was-validated textarea:invalid,
.c-section form.was-validated select:invalid{
  border-color: var(--form-ng);
  box-shadow: 0 0 0 3px rgba(229,77,46,.15);
}

/* OK 表示（入力済み・正規の型判定OK）*/
.c-section form input:valid:not(:placeholder-shown),
.c-section form textarea:valid:not(:placeholder-shown),
.c-section form select:valid{
  border-color: var(--form-acc);
}

/* ラベルにエラーの赤い点アイコンを表示（:has() 対応ブラウザで強化表示） */
@supports(selector(:has(*))){
  .c-section form label.md-txt:has(> input:invalid:not(:focus):not(:placeholder-shown)),
  .c-section form label.md-txt:has(> textarea:invalid:not(:focus):not(:placeholder-shown)),
  .c-section form label.md-txt:has(> select:invalid:not(:focus)){
    position: relative;
  }
  .c-section form label.md-txt:has(:invalid) b::after{
    content: "・入力エラー";
    font-weight: 500;
    color: var(--form-ng);
    margin-left: .5em;
    font-size: .9rem;
  }
}

/* エラーメッセージの仕組み（任意）：
   - ラベル直下に .field-msg を置けば、:invalid のときだけ表示されます（JS不要）
   - 例） <label>...<input required> <small class="field-msg">この項目は必須です</small></label>
*/
.c-section form .field-msg{
  display:none;
  color: var(--form-ng);
  margin-top:6px;
  font-size:.92rem;
}
.c-section form label.md-txt > input:invalid ~ .field-msg,
.c-section form label.md-txt > textarea:invalid ~ .field-msg,
.c-section form label.md-txt > select:invalid ~ .field-msg{
  display:block;
}

/* 成功/エラーの通知ブロックの磨き */
.md-note.md-note--gray{
  border-radius: var(--focus-r);
  background: #F3F4F6;
  padding: 14px 16px;
}

.md-alert .md-txt{ margin:0; }
.md-alert .md-txt li + li{ margin-top:.25em; }

/* 行間＆段落の詰め過ぎ防止 */
.stack-8 > .md-txt + .md-txt{ margin-top: .75rem; }
.stack-12 > .md-txt + .md-txt{ margin-top: 1rem; }

/* 2カラム化（横幅広いとき） */
@media (min-width: 900px){
  .form-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
  }
  .form-grid .span-2{ grid-column: span 2; }
}

/* URL説明の行間など微調整（イベントフォームの注意書き） */
.c-section p.md-txt + .stack-12{ margin-top: 12px; }

/* 送信ボタンの行中央寄せ（お好みで） */
.c-section form .btn-row{
  gap:12px; align-items:center; justify-content:flex-start;
}

/* c-section__title のバリエーション */
.c-section__title--sm{
  font-size: clamp(18px, 2.1vw, 24px);
}
.c-section__title--sm::after{
  width: 90px;
  height: 2px;
  opacity: .95;
}

/* 左寄せにしたい場合（必要な見出しに併用） */
.c-section__title--left{
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.c-section__title--left::after{
  left: 0;
  transform: none;
}

/* 初期は :invalid を出さない */
.c-section form :is(input, textarea, select):invalid{
  border-color: var(--form-bd) !important;
  box-shadow: none !important;
}

/* 触った or 送信後だけ出す */
.c-section form.was-validated :is(input, textarea, select):invalid,
.c-section form :is(input.is-touched, textarea.is-touched, select.is-touched):invalid{
  border-color: var(--form-ng) !important;
  box-shadow: 0 0 0 3px rgba(229,77,46,.15) !important;
}

/* .field-msg の表示も同じ条件に */
.c-section form label.md-txt > :is(input,textarea,select) ~ .field-msg{ display:none; }
.c-section form.was-validated :is(input,textarea,select):invalid ~ .field-msg,
.c-section form :is(input.is-touched,textarea.is-touched,select.is-touched):invalid ~ .field-msg{
  display:block;
}

/* ===== 必須アスタリスクを自動付与＆赤色（★既存の「*」文字は外すのがオススメ） ===== */
.cc-form label:has(:required) > b::after{
  content: ' *';
  color: var(--form-ng, #E54D2E);
}

/* ===== 初期は :invalid を出さない／触った or 送信後だけ表示 ===== */
.cc-form :is(input, textarea, select):invalid{
  border-color: var(--form-bd) !important;
  box-shadow: none !important;
}
.cc-form.was-validated :is(input, textarea, select):invalid,
.cc-form :is(input.is-touched, textarea.is-touched, select.is-touched):invalid{
  border-color: var(--form-ng) !important;
  box-shadow: 0 0 0 3px rgba(229,77,46,.15) !important;
}
/* CF7のtipも同条件で表示 */
.cc-form .wpcf7-not-valid-tip{ display:none; }
.cc-form.was-validated .wpcf7-not-valid-tip,
.cc-form :is(input.is-touched, textarea.is-touched, select.is-touched) ~ .wpcf7-not-valid-tip{
  display:block;
}

/* ===== プライバシーポリシーの同意（チェックを左・大きく／テキスト16px／リンク下線） ===== */
/* CF7 の acceptance はこの構造： .wpcf7-acceptance .wpcf7-list-item > label */
.cc-form .wpcf7-acceptance .wpcf7-list-item > label{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  line-height: 1.8;
}
.cc-form .wpcf7-acceptance input[type="checkbox"]{
  width: 22px;
  height: 22px;
  accent-color: var(--brand, #333);
  transform: translateY(2px);
}
.cc-form .wpcf7-acceptance a{
  text-decoration: underline;
}

/* もし acceptance を label.md-txt の中に直書きしている場合のフォールバック */
.cc-form label.md-txt:has(> input[type="checkbox"]){
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  line-height: 1.8;
}
.cc-form label.md-txt > input[type="checkbox"]{
  width: 22px;
  height: 22px;
  accent-color: var(--brand, #333);
  transform: translateY(2px);
}
.cc-form label.md-txt a{ text-decoration: underline; }

/* ===== ラジオボタン（料金）の押しやすさ改善 ===== */
.cc-form .wpcf7-radio .wpcf7-list-item > label{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;         /* クリック領域を広げる */
  border-radius: 8px;
  cursor: pointer;
}
.cc-form input[type="radio"]{
  width: 20px;
  height: 20px;
  accent-color: var(--brand, #333);
}
/* ヘッダー直下のアンカー（新規） */
.ch-cta-anchor{
  position: relative;
  z-index: 6;            /* ヒーロー等より上、ドロワーより下 */
}

/* ===== [PATCH] Float CTA: ヘッダー直下アンカーに絶対配置する ===== */

/* アンカーを基準にする＆SPでは .ch-inner と同じ横paddingを付与 */
.ch-cta-float{
  position: relative;
  z-index: 600;
  pointer-events: none; /* ラッパは透過（リンクは下で有効化） */
}
@media (max-width: 767.98px){
  .ch-cta-float{ padding-inline: var(--gutter-mobile); }
}

/* 本体：fixedを打ち消して absolute に。縦=ヘッダー直下（=アンカー先頭） */
.ch-cta-float .ch-cta--float{
  position: absolute !important;  /* ← 既存 fixed を上書き */
  top: 0 !important;
  right: var(--cta-right, 12px);
  width: var(--cta-size, 92px) !important;
  height: var(--cta-size, 92px) !important;
  pointer-events: auto;
  z-index: 1;
}
@media (min-width: 1024px){
  .ch-cta-float .ch-cta--float{
    width: 120px !important;
    height: 120px !important;
  }
}
.ch-cta-float .ch-cta--float img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  display: block;
}

/* アンカーの外にはみ出しても表示されるように（PCで負の right を許容） */
.ch-cta-float{ overflow: visible; }

/* c-section__title をストライプ帯にした時は“下線”を無効化 */
.c-section__title.stripe-rect::after{ content:none; }

/* c-section__title 用の帯色（既定=黄色） */
.c-section__title.stripe-rect{ --stripe-color: var(--c-yellow);}
/* 文字サイズ/フォントは既存の c-section__title が持っているので触らない */

/* ===== Sticky Footer：右ボタンをTOP化（上下左右ど真ん中揃え） ===== */
.stickynav__btn.is-top{
  display:flex;
  flex-direction:column;
  align-items:center;      /* 左右中央 */
  justify-content:center;  /* 上下中央 */
  gap:4px;
  text-decoration:none;
  background: var(--c-green, #2fb57f); /* 既存の右ボタン色に合わせる */
  color:#fff;
}

/* ▲アイコン（角をやや丸めた三角をSVGで） */
.stickynav__btn.is-top .topicon{
  width:20px; height:20px; display:block;
  background:center/contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 24'%3E%3Cpath d='M14 2 L26 22 L2 22 Z' fill='%23fff' stroke='%23fff' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* “TOP”のラベル（Zen Kaku 500 想定） */
.stickynav__btn.is-top .toplabel{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  font-weight:500;
  font-size:12px;
  line-height:1;
  color:#fff;
}

.c-section__title:not(.stripe-rect){
  position: relative;
  padding-bottom: 14px;  /* ← 下線の上に 14px の余白 */
}

/* ===== ナビボタン：円のど真ん中に矢印を固定 ===== */
.hero__nav .navbtn,
.mag__nav  .navbtn{
  --navbtn-size: 56px;   /* 直径(PC) */
  --arrow-w: 14px;       /* 矢印の一辺 */
  --arrow-bw: 3px;       /* 線の太さ */
  display: inline-grid;
  place-items: center;   /* 中央寄せ（ボタン自体の中身） */
  width: var(--navbtn-size);
  height: var(--navbtn-size);
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  color: #111;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  border: none;
  position: relative;
  font-size: 0;          /* ‹›テキストは視覚非表示（SR向けに aria-label は残す） */
  cursor: pointer;
}

/* 擬似要素：中心へ固定、右向きがデフォルト */
.hero__nav .navbtn::before,
.mag__nav  .navbtn::before{
  content: "";
  position: absolute;
  left: 45%; top: 50%;
  width: var(--arrow-w); height: var(--arrow-w);
  border-top: var(--arrow-bw) solid currentColor;
  border-right: var(--arrow-bw) solid currentColor;
  transform: translate(-50%, -50%) rotate(45deg); /* → */
  border-radius: 2px; /* 少し丸み */
}

/* 左向き（←）は回転だけ変える */
.hero__nav .navbtn--prev::before,
.mag__nav  .navbtn--prev::before{
  transform: translate(-50%, -50%) rotate(225deg);
  left:55%;
}

/* SPは少し小さめに */
@media (max-width: 767.98px){
  .hero__nav .navbtn,
  .mag__nav  .navbtn{ --navbtn-size: 44px; --arrow-w: 12px; --arrow-bw: 2.5px; }
}

/* --- Slider arrows: place left & right, center vertically --- */
.hero__nav,
.is-magazine .mag__nav{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* ボタンはオーバーレイ上でクリック可能にして左右へ配置 */
.hero__nav .navbtn,
.is-magazine .mag__nav .navbtn{
  position: absolute !important;   /* ← 相反ルールを確実に打ち消す */
  top: 50%;
  transform: translateY(-50%);
  pointer-events: auto;
  z-index: 2;
}

/* 左右の位置（端からの距離は環境に応じて可変） */
.hero__nav .navbtn--prev,
.is-magazine .mag__nav .navbtn--prev{ left: clamp(10px, 2vw, 20px); }

.hero__nav .navbtn--next,
.is-magazine .mag__nav .navbtn--next{ right: clamp(10px, 2vw, 20px); }

/* 中心に矢印（既存の ::before 実装を活かす前提）。必要ならここも残してOK
.hero__nav .navbtn::before,
.is-magazine .mag__nav .navbtn::before{
  content:"";
  position:absolute; left:50%; top:50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.hero__nav .navbtn--prev::before,
.is-magazine .mag__nav .navbtn--prev::before{ transform: translate(-50%,-50%) rotate(225deg); }
*/


/* About｜団体理念（本文タイポ）*/
.ab-mission .mission-text{
  font-family: var(--ff-body, "Noto Sans JP", system-ui, sans-serif);
  font-weight: 300;
  letter-spacing: .06em;   /* 字間 */
  line-height: 2.2;        /* 行間 */
  font-size: 18px;
}
@media (max-width: 767.98px){
  .ab-mission .mission-text{ font-size: 16px; line-height: 2.1; letter-spacing: .05em; }
}

/* ラベルを基準にアイコンを外側へオフセット */
.staff-modal__label--profile{
  position: relative;
  padding: 6px 12px; 
}

/* ====== About｜ページ内ジャンプのアイコンを「∨」に差し替え ====== */
.about-toc .about-toc__link{
  position: relative;
  padding-left: 26px; /* アイコン分の左余白 */
}

/* 既存のチェック風スタイルを無効化 */
.about-toc .about-toc__link::before{
  content: none !important;
  border: none !important;
  transform: none !important;
}

/* V字（右腕）：:before を再利用 */
.about-toc .about-toc__link::before{
  content:"";
  position:absolute; left:14px; top:50%;
  width:14px; height:3px;
  background: var(--c-green);
  border-radius: 999px;
  transform: translateY(-50%) rotate(-32deg);
}

/* 小さめバリエーション（about-toc--checks） */
.about-toc--checks .about-toc__link{ padding-left: 22px; }
.about-toc--checks .about-toc__link::after,
.about-toc--checks .about-toc__link::before{
  width:12px; height:2.5px;
  left:5px;
}
.about-toc--checks .about-toc__link::before{ left:12px; }

/* 末尾に置くか、セレクタを強めて後勝ちに */
body .about-toc .about-toc__list{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  max-width:min(480px, 100%); margin:auto;
  @media (max-width: 767.98px){
  max-width:min(920px, 100%); margin:0 20px auto; }
}

/* ∨アイコン（記号不使用・角丸の広角シェブロン） */
.about-toc .about-toc__link{
  position:relative; padding-left:28px;
}
.about-toc .about-toc__link::before{
  content:"";
  position:absolute; left:4px; top:50%; transform:translateY(-50%) rotate(45deg);
  width:12px; height:12px; border:2px solid currentColor; border-top:0; border-left:0; border-radius:3px;
}

/* ===== fix pack (append at end of app.css) ===== */

/* ① ジャンプリンク：左右に“∨”アームを必ず出す（古いチェック型を打ち消し） */
.about-toc .about-toc__link{ position:relative; padding-left:32px; padding-right:12px; }
.about-toc .about-toc__link::before,
.about-toc .about-toc__link::after{
  content:"";
  position:absolute; top:50%;
  width:10px; height:10px;               /* 角度ひろめ */
  transform:translateY(-60%) rotate(-315deg);
  border-bottom:3px solid var(--c-green);  /* 丸み */
  border-right:3px solid var(--c-green);
  border-radius:3px;
}
/* 左アーム */
.about-toc .about-toc__link::before{ left:10px; transform:translateY(-50%) rotate(-45deg); }

/* 片側だけの“チェック”を再定義していた古いブロックを無効化 */
.about-toc--checks .about-toc__link::before{ border-left:none!important; border-top:none!important; }

/* 事業紹介モーダル：画像と本文の間に 24px 余白（PC/SP 共通） */
.pg-detail .frame + .md-txt,
.pg-modal__content .wp-block-image + .md-txt,
.pg-modal__content figure + .md-txt{ margin-top:24px; }

/* ===== Validation (scoped) ===== */
.vf .vf-alert{
  display:none;
  margin-top:6px;
  padding:8px 10px;
  font-size:13px;
  line-height:1.45;
  color:#E85163;                    /* エラー色 */
  background:rgba(232,81,99,.08);
  border-left:3px solid #E85163;
  border-radius:8px;
}

/* 送信後やフォーカスアウト後にエラーを出す仕組み：
   フォーム要素が .is-validated を持ち、かつ :invalid の直後の .vf-alert を表示 */
.vf.is-validated :is(input,textarea,select):invalid + .vf-alert{
  display:block;
}

/* エラー枠 */
.vf.is-validated :is(input,textarea,select):invalid{
  outline:2px solid color-mix(in srgb, #E85163 55%, #fff);
  outline-offset:1px;
}

/* 参考：チェック/ラジオの行内エラー（構造によって調整） */
.vf.is-validated .vf-field:has(:invalid) .vf-alert{ display:block; }

/* ===== SP：投稿フォーム／お問い合わせフォームを横幅80%に ===== */
@media (max-width: 768px) {
  /* テンプレート判定（page-event-form.php / page-contact-form.php） */
  .page-template-page-event-form .cc-form,
  .page-template-page-contact-form .cc-form {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
  }

  /* 念のため、フォーム外枠の横スクロール抑止 */
  .page-template-page-event-form .wpcf7-wrap,
  .page-template-page-contact-form .wpcf7-wrap {
    overflow: visible;
  }
}

/* ===== SP：フォーム系テンプレの .md-txt を80%（中央寄せ） ===== */
@media (max-width: 768px) {
  /* 対象テンプレ（page-event-form.php / page-contact-form.php） */
  .page-template-page-event-form .md-txt,
  .page-template-page-contact-form .md-txt {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    display: block;          /* 念のためブロック化 */
  }

  /* フォーム内部は既に .cc-form が80%なので .md-txt は100%維持（二重に細くしない） */
  .page-template-page-event-form .cc-form .md-txt,
  .page-template-page-contact-form .cc-form .md-txt {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* ================================
   Web Magazine Main 専用調整
   （テンプレは page-magazine-main.php のまま）
   ================================ */

/* 1) ジャンプリンク：他ページの見た目を踏襲しつつ、PCは2×2固定 */
.page-template-page-magazine-main .about-toc .about-toc__list {
  /* 既存の装飾は活かす。PCだけ2列グリッド化 */
}
@media (min-width: 960px) {
  .page-template-page-magazine-main .about-toc .about-toc__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 12px 16px; /* 行×列の間隔。必要に応じて調整 */
    justify-items: center; /* 各リンクを中央に */
  }
  /* 長文リンクは1行固定で省略記号（他ページの見た目は壊さない） */
  .page-template-page-magazine-main .about-toc .about-toc__link {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
}

/* 2) ジャンプリンクの下のリード文：上下24pxの余白（SP/PC共通） */
.page-template-page-magazine-main .sup-lead--mag {
  padding-top: 24px;
  padding-bottom: 24px; /* ←“下にも”欲しければ残す。不要なら削除OK */
}

/* 3) カード：ラベルの“右”に公開日、その下にタイトル（マークアップ変更なし） */
.page-template-page-magazine-main .listitem__body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 10px;               /* ラベルと日付の横スペース */
}

/* ラベル直後の日時を同一行へ */
.page-template-page-magazine-main .listitem__chip {
  margin-right: 0;
  line-height: 1.2;
}

/* 公開日：ラベルの右に並べる */
.page-template-page-magazine-main .listitem__date {
  align-self: center;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  line-height: 1.2;
  /* SP/PCでサイズを出し分け */
  font-size: 12px;
}
@media (min-width: 768px) {
  .page-template-page-magazine-main .listitem__date { font-size: 14px; }
}

/* タイトルは次の行（幅100%） */
.page-template-page-magazine-main .listitem__title {
  flex-basis: 100%;
  margin-top: 6px;
}
@media (min-width: 768px) {
  /* 既存のimport指定を上書きしたいので !important を付与 */
  .page-template-page-magazine-main .listitem__title {
    font-size: 18px !important;
  }
}

/* Magazine Main 限定：ジャンプリンクをPCで2×2に固定 */
.page-template-page-magazine-main .mag-toc-bridge .about-toc__list{
  grid-template-columns: repeat(2, max-content); /* 2列固定 */
  justify-content: center;
}
.page-template-page-magazine-main .mag-toc-bridge .about-toc__link{
  white-space: nowrap; /* 「子育てを応援する地域のヒト・モノ・コト」を改行させない */
}

/* SPは既存挙動のままにしたい場合は上書きしない（=このブロックだけでOK）*/

/* Magazine Main 限定：ラベル＋日付の整列（右寄せ） */
.page-template-page-magazine-main .listitem__meta{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.page-template-page-magazine-main .listitem__chip{
  white-space: nowrap; /* ラベルは1行キープ */
}
.page-template-page-magazine-main .listitem__date{
  margin-left: auto;                 /* 右端へ */
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
}
@media (max-width: 767.98px){
  .page-template-page-magazine-main .listitem__date{ font-size: 12px; }
}

/* ============ Magazine Main だけ ============ */
.page-template-page-magazine-main .about-toc__list{
  /* PCは2×2固定。元のaboutスタイルを活かしたまま列数だけ上書き */
  display: grid !important;
  grid-auto-flow: row;
  grid-template-columns: repeat(2, max-content);
  justify-content: center;
  column-gap: 32px;
  row-gap: 12px;
}

.page-template-page-magazine-main .about-toc__link{
  /* 長文を必ず1行に（折り返さない） */
  white-space: nowrap;
  /* もし既存CSSで block 幅100%になっていて横並びが崩れる場合に備え */
  display: inline-flex !important;
  align-items: center;
}

/* SPは既存レイアウトのままにしたいので、PCのみ強制（必要なら幅は調整OK） */
@media (max-width: 1023.98px){
  .page-template-page-magazine-main .about-toc__list{
    display: grid !important;         /* 念のため競合排除 */
    grid-template-columns: 1fr;       /* SPは従来通り1列 */
    justify-items: stretch;
  }
  .page-template-page-magazine-main .about-toc__link{
    display: flex !important;         /* 競合の保険 */
    white-space: normal;              /* SPでは折り返し許可でもOKなら外してもよい */
  }
}

/* ===== Generic article adjustments (非magazine用) ===== */
.single.is-generic-article .mag-article__title{
  /* タイトルの上に24pxの内側余白（指定どおり padding で） */
  padding-top: 24px;
  margin-top: 0; /* 念のため二重余白防止 */
  text-align:justify;
}

/* 本文を両端揃え（日本語向けの字詰めヒントも） */
.single.is-generic-article .entry-content{
  text-align: justify;
  text-justify: inter-ideograph;
}

/* 段落の標準マージン（必要ならお好みで） */
.single.is-generic-article .entry-content p{
  margin: 0 0 1.8em;
}

/* 本文内の画像・図版に上下余白（WPブロック/クラシック双方をケア） */
.single.is-generic-article .entry-content figure,
.single.is-generic-article .entry-content img{
  display: block;
  margin: 0px auto 16px auto;   /* 上下24px、左右は自動（中央寄せ） */
  max-width: 100%;
  height: auto;
}

/* アイキャッチの上下余白も24pxで揃える */
.single.is-generic-article .entry-thumb{
  margin: 24px 0;
}

/* WPの画像配置ユーティリティにも程よい余白を */
.single.is-generic-article .entry-content .aligncenter{ margin:24px auto; }
.single.is-generic-article .entry-content .alignleft { margin:12px 24px 12px 0; }
.single.is-generic-article .entry-content .alignright{ margin:12px 0 12px 24px; }

/* 画像キャプション（Gutenberg & Classic双方対応） */
figure.wp-block-image > figcaption,
figure.wp-caption > figcaption,
.wp-caption .wp-caption-text{
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0;          /* 必要なら微調整 */
  margin-top: 4px;            /* 画像直下4px */
  display: block;             /* ブロックに統一 */
  text-align: center;         /* 基本は中央揃え */
  color: inherit;             /* 親の色を継承（任意で #666 などに変更可） */
}

/* もしデフォルトCSSの余白が強い場合の保険（上書き） */
figure.wp-block-image figcaption,
figure.wp-caption figcaption{
  margin-bottom: 0;
  padding: 0;
}

/* 記事本文内に限定したい場合（安全スコープ版） */
.single .entry-content figure.wp-block-image > figcaption,
.single .entry-content figure.wp-caption > figcaption,
.single .entry-content .wp-caption .wp-caption-text{
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 1.6;
  margin-top: 4px;
  text-align: center;
  color:#898989;
}

/* 画像：本文内（Gutenberg／Classic 共通） */
.single .entry-content figure.wp-block-image img,
.single .entry-content figure.wp-caption img,
.single .entry-content .wp-caption img{
  display: block;
  width: 100%;
  height: auto;
  padding-top: 8px;     /* 画像の上だけ常に 8px */
  padding-bottom: 0;    /* デフォは 0 にしておく */
}

/* キャプションがある figure のときだけ、画像の下に 4px 追加（要 :has 対応ブラウザ） */
.single .entry-content figure.wp-block-image:has(> figcaption) img,
.single .entry-content figure.wp-caption:has(> figcaption) img{
  padding-bottom: 4px;
}

/* キャプション自体の余白は 4px（既存指定があれば上書きOK） */
.single .entry-content figure.wp-block-image > figcaption,
.single .entry-content figure.wp-caption > figcaption,
.single .entry-content .wp-caption .wp-caption-text{
  margin-top: 4px;
}

/* 見出し(h2)：下に 12px 空ける */
.single .entry-content h2{
  margin-bottom: 12px;
}

/* ====== 共通：記事タイポだけ共有（UIは各テンプレに任せる） ====== */
.is-article-typo .entry-content{
  font-family: "Noto Sans JP", system-ui, -apple-system, sans-serif;
  font-weight: 300;
  letter-spacing: .02em;
  line-height: 2;
  font-size: 16px; /* magazine と同じ値に */
  text-align:justify;
}

.is-article-typo .entry-content h2{
  /* magazine の h2設定をそのまま複製（数値はサイトに合わせて） */
  font-family: "Kiwi Maru", serif;
  font-weight: 500;
  line-height: 1.5;
  font-size: clamp(18px, 2vw, 20px);
  margin-bottom: 12px; /* 依頼どおり */
  text-align: justify; /* 依頼どおり */
}

/* 画像とキャプション（magazineの指定を転写） */
.is-article-typo figure.wp-block-image,
.is-article-typo figure.wp-caption{
  padding-top: 8px;
  margin: 0; /* WordPressデフォの余白を打ち消し */
}

.is-article-typo figure.wp-block-image figcaption,
.is-article-typo figure.wp-caption figcaption,
.is-article-typo figure.wp-caption .wp-caption-text{
  font-family: "Noto Sans JP", system-ui, -apple-system, sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 1.6;
  margin-top: 4px;   /* 画像との間を4px */
  color: #444;
}

/* 「キャプションがある時だけ下が4px」— :has()対応ブラウザで最小限に */
@supports(selector(:has(*))){
  .is-article-typo figure.wp-block-image:has(figcaption){
    padding-bottom: 4px;
  }
}

/* === 記事タイトルの上に24px余白 === */
.is-article-typo .mag-article__title,
.is-article-typo .article__title,
.is-article-typo .entry-title{
  margin-top: 24px;
}

/* === 画像の下（キャプションがある場合はその下）に16px余白 === */
/* 図版ブロック自体の下マージンで実現（キャプション有無どちらもOK） */
.is-article-typo figure.wp-block-image,
.is-article-typo figure.wp-caption,
.is-article-typo .wp-caption{
  margin: 0 0 16px;
  padding-top: 8px; /* ご指定どおり上は8px */
}

/* キャプションの体裁（参考：前設定を踏襲） */
.is-article-typo figure.wp-block-image figcaption,
.is-article-typo figure.wp-caption figcaption,
.is-article-typo .wp-caption .wp-caption-text{
  font-family: "Noto Sans JP", system-ui, -apple-system, sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 1.6;
  margin-top: 4px; /* 画像とキャプションの間は4px */
  color: #444;
}

/* キャプションがある時だけ、figureの内側に4pxの余白を足す（対応ブラウザ） */
@supports(selector(:has(*))){
  .is-article-typo figure.wp-block-image:has(figcaption){
    padding-bottom: 4px;
  }
}
/* カテゴリ/アーカイブの記事一覧のサムネを4:3で統一 */
:where(.archive, .category) .o--postlist-item .c--post-image,
:where(.archive, .category) .o--postlist-item .c--post-image > a {
  /* 親に比率を持たせる */
  aspect-ratio: 4 / 3;
  display: block;
  width: 100%;
  overflow: hidden;
  position: relative; /* 念のため */
}

/* 画像は“高さ100% + cover”。autoは使わない */
:where(.archive, .category) .o--postlist-item .c--post-image img {
  width: 100%;
  height: 100% !important;      /* ← これがポイント。autoだと消える元 */
  object-fit: cover;
  display: block;
  /* テーマ側で absolute 指定があっても大丈夫だが、念のため両対応 */
  inset: 0;                     /* absolute時は全面フィット */
  max-width: none;
  aspect-ratio: auto;           /* 念のため、画像側の比率指定を無効化 */
}

/* もし“画像に height:auto!important;”を当てている既存ルールがある場合に勝つための保険 */
:where(.archive, .category) .o--postlist-item .c--post-image img {
  height: 100% !important;
}

/* single-article（is-article-typo）だけ、ヘッダー直下に余白を作る */
.is-article-typo main.site-main {
  /* 画面に応じて 24〜48px の間で可変 */
  padding-top: clamp(48px, 4vw, 72px);
}

/* もし「marginで取りたい」場合はこちらに差し替え（片方だけ使う） */
/*
.is-article-typo main.site-main {
  margin-top: clamp(48px, 4vw, 72px);
}
*/

/* SPだけ2行で省略（…）にする */
@media (max-width: 767px){
  .act-list .act-title{
    display: -webkit-box;
    -webkit-line-clamp: 2;        /* ←2行で切る */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;        /* 長い単語のときの保険 */
  }
  /* タイトルがリンクになっているパターンにも効かせる保険 */
  .act-list .act-title a{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* 既存の記号は隠す（残っていてもOK） */
.c-btn--more > span[aria-hidden="true"]{
  display: none !important;
}

/* 右矢印（CSSで描画） */
.c-btn--more{
  position: relative;
  padding-right: 2.6em;             /* 右にスペースを確保（矢印分） */
  --more-arrow-size: 6px;          /* 矢印サイズ（好みで調整） */
  --more-arrow-weight: 1px;         /* 矢印の線の太さ */
  font-family:var(--ff-body);
  color:#888;
  letter-spacing:0.1rem;
}
.c-btn--more::after{
  content: "";
  position: absolute;
  right: 1.4em;                     /* ボタン右端からの距離 */
  top: 54.5%;
  width: var(--more-arrow-size);
  height: var(--more-arrow-size);
  border: solid #888;
  border-width: 0 var(--more-arrow-weight) var(--more-arrow-weight) 0;
  transform: translateY(-50%) rotate(-45deg);  /* 縦中央＆「＞」形に回転 */
  pointer-events: none;
}

.front .c-btn--more{ --more-arrow-size:10px; --more-arrow-weight:10px; }

/* ===== About系ジャンプリンクの横幅とセンタリング ===== */
/* PC時は 60% に */
@media (min-width: 768px){
  .about-toc {
    width: 100%;
    margin:auto;
  }
}

:where(.archive, .category) .o--postlist-item .c--post-image img{border-radius:10px;}

/* ===== Single（is-article-typo）でも magazine と同じ h2 デザインに統一 ===== */
.is-article-typo .entry-content h2,
.is-article-typo .entry-content h2.wp-block-heading{
  position: relative;
  /* フォント（magazine踏襲） */
  font-family: "Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif !important;
  font-weight: 500 !important;
  font-size: 18px !important;     /* PC想定。必要なら @media でSP調整 */
  letter-spacing: .02em !important;
  line-height: 1.8 !important;

  /* 余白（前に入れていたルールを上書き） */
  margin: 24px 0 12px !important;
  padding-left: 16px;              /* 左の黄色バー分の余白 */
}

/* 左の黄色バー（magazine踏襲） */
.is-article-typo .entry-content h2::before{
  content: "";
  position: absolute;
  left: 0;
  top: .2em;
  bottom: .2em;                    /* 見出しの高さに比例して伸縮 */
  width: 6px;                      /* バーの太さ */
  background: var(--c-yellow, #FDE23D);
  border-radius: 2px;
}

/* ドロワー表示中は背面スクロール抑止（iOS対策含む） */
html.is-drawer-open, body.is-drawer-open { overflow: hidden; }
html.is-drawer-open { touch-action: none; overscroll-behavior: contain; }

/* Drawer 基本 */
.ch-drawer {
  position: fixed;
  inset: 0 0 0 auto;             /* 右側スライドイン */
  width: min(84vw, 360px);
  max-width: 100%;
  height: 100dvh;
  background: #F0EAE0;
  transform: translateX(100%);
  transition: transform .25s ease;
  z-index: 1002;
}
html.is-drawer-open #ch-drawer { transform: translateX(0); }

.ch-drawer__inner { height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; padding: 16px; }

/* Overlay */
.ch-drawer__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 1001;
}

/* メニュー（wp_nav_menuが出すul/li） */
.ch-menu { list-style: none; padding: 0; margin: 0; }
.ch-menu > li { border-bottom: 1px solid #999; }
.ch-menu a {
  display: block;
  padding: 14px 12px;
  text-decoration: none;
  color: #666;
  font-weight: 500;
}
.ch-menu .sub-menu { list-style: none; padding: 0 0 0 14px; margin: 0; }
.ch-menu .sub-menu a { padding: 12px; font-weight: 400; }

/* 共通の下地（念のため） */
.cf-links__inner {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  text-align:justify;
}
.cf-col { /* 左右のナビブロック */
  flex: 1 1 320px; /* PCは自然に左右並び */
}
.cf-menu { /* WPメニューUL */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ===== SPでも左右並び（2カラム）— 安全版(Grid) ===== */
@media (max-width: 767.98px) {
  .cf-links__inner{
    display:grid;
    grid-template-columns: 1fr 1fr; /* 2カラム */
    gap: 8px 24px;
    align-items:start;
    padding-inline:var(--gutter-mobile);
  }
  .cf-links__inner > .cf-col{ min-width:0; } /* はみ出し防止 */

  /* テキストサイズ */
  .cf-menu{ font-size:12px; line-height:1.6; }
  .cf-menu a{ display:inline-block; padding:6px 0; }
}

/* 下部の“重なり”を常に回避（sticky ナビ分の安全域） */
.cf-footer{
  padding-bottom: calc(var(--stickynav-safe, 0px) + 8px + var(--vvb, 0px));
}

/* ===== Drawer: right slide-in + overlay fade ===== */
#ch-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;           /* iOS対応 */
  width: min(86vw, 360px);  /* SPは8〜9割幅、PCはやや細め */
  background: #F0EAE0;
  box-shadow: -12px 0 24px rgba(0,0,0,.08);
  transform: translateX(100%);   /* 初期：画面外（右） */
  transition: transform .36s ease;
  z-index: 1400;
  /* hidden が付いている間は display:none。外れた後にアニメ開始 */
}

#ch-drawer.is-open {
  transform: translateX(0);
}

.ch-drawer__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 1300;
  /* hidden 中は display:none、外れた後にフェード */
}
.ch-drawer__overlay.is-open { opacity: 1; }

/* 背景スクロールロック */
body.is-ch-open { overflow: hidden; }

/* お好み：メニュー内の余白など */
#ch-drawer .ch-menu { padding: 20px 20px 28px; }

/* 低速・無効化したい人向け */
@media (prefers-reduced-motion: reduce) {
  #ch-drawer { transition: none; }
  .ch-drawer__overlay { transition: none; }
}

/* ===== Playground/Medical など共通モーダルのスクロール安定化 ===== */

/* パネルは“器”として縦方向レイアウトにし、はみ出しは子(.pg-modal__body)に任せる */
.pg-modal__panel{
  display:flex;
  flex-direction:column;
  /* ツールバーのあるSPでも破綻しないよう 100dvh を使用 */
  max-height: calc(100dvh - 32px);
  overflow: hidden; /* ← ここは隠す。スクロールは子へ */
}

/* 実際にスクロールさせる領域 */
.pg-modal__body{
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch; /* iOS慣性スクロール */
  overscroll-behavior: contain;      /* 端で背面に抜けない */
}

/* 予防：他モーダル実装（スタッフ等）にも効かせたい場合のフォールバック */
.modal__body{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* 背景ロック時の挙動を安定化（JSで付けている .is-modal-open に合わせる） */
body.is-modal-open{
  position: fixed;
  width: 100%;
  left: 0; right: 0;
  overscroll-behavior: none;
}

/* パネルは相対配置（× ボタンの absolute 基準に） */
.pg-modal__panel{
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 32px);
  overflow: hidden; /* スクロールは .pg-modal__body 側 */
}

/* スクロール領域 */
.pg-modal__body{
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* 見出しは通常フロー（sticky無効化の保険） */
.pg-modal__head{ position: static; }

/* 閉じるボタンを“正円”に固定 */
.pg-modal__close{
  position: absolute; top: 8px; right: 8px;
  width: 36px; height: 36px; /* ← 明示的に同値 */
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; /* flex伸長の無効化（保険） */
}

/* =========================
   Playground/Medical 共通モーダル：
   追従ヘッダーは透明化し、×ボタンだけ浮かせる
   ========================= */

/* 追従しているヘッダー帯を完全に透明化（影や装飾もOFF） */
.pg-modal__head{
  background: transparent !important;
  box-shadow: none !important;
  /* ヘッダー帯自体はクリックを透過させる（×ボタンは個別で有効化） */
  pointer-events: none;
}

/* 万一、擬似要素で白やグラデが乗っている場合の保険 */
.pg-modal__head::before,
.pg-modal__head::after{
  display: none !important;
}

/* タイトルが入っている場合は読みやすさ用に軽い影（好みで） */
.pg-modal__head .pg-modal__title{
  text-shadow: 0 1px 2px rgba(0,0,0,.05);
}

/* ×ボタンは “だけ” クリック可能＆丸いまま固定表示 */
.pg-modal__close{
  /* 追従させたい場合は sticky。固定のままで良ければ absolute でも可 */
  position: sticky;
  top: 12px;                 /* 追従オフセット */
  margin-left: auto;         /* 右寄せ（flex内でもOK） */
  z-index: 5;

  /* クリック有効（親で pointer-events:none にしているため） */
  pointer-events: auto;

  /* 正円を強制（楕円化対策） */
  width: 40px;
  height: 40px;
  aspect-ratio: 1 / 1;
  border-radius: 9999px;

  display: inline-grid;      /* アイコンを中央に */
  place-items: center;
  flex: 0 0 auto;            /* flex で伸びないように */
  align-self: flex-start;

  /* 見た目（必要なら調整） */
  background: rgba(255,255,255,0.98);
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  border: 0;
}

/* ×ボタンの中の文字（×）がズレる時の微調整 */
.pg-modal__close{ line-height: 1; font-size: 20px; }

/* もしタイトルまで追従してしまう場合は、ヘッダーを固定（追従解除） */
.pg-modal__he

/* ===== About>事業紹介：ストライプ内タイトルを縦横センター ===== */
.page-template-page-about .biz-card__head{ 
  display:flex; justify-content:center; align-items:center;
}

.page-template-page-about .biz-card__head .stripe-rect{
  /* 競合を断ち切るため “中央寄せレイアウト” を強制 */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:60px;          /* SPでもPCでも成立する高さ。必要なら調整OK */
  min-width:90%;
  padding:.12em .6em;       /* ちょい広めに */
  @media (max-width:767.98px){
    min-width:85%;
  }
  @media (max-width:412px){
    min-width:85%;
  }
}

.page-template-page-about .biz-card__title{
  margin:0;                 /* 余白のせいでズレるのを防ぐ */
  line-height:1.1;
  text-align:center;
}

/* Web Magazine 一覧（page-magazine.php） */
.is-magazine .mag-card__meta{
  display: grid;
  row-gap: 10px;          /* ラベルと日付の間を最小に */
  align-content: start;
}

.is-magazine .mag-chip{
  margin: 0;             /* 余白を詰める */
}

.is-magazine .mag-datebox{  /* イベント用（「開催日」ラベル＋日付） */
  display: grid;
  row-gap: 2px;
}

.is-magazine .mag-date-label{
  font-size: 11px;
  line-height: 1;
  opacity: .7;
  /* padding-left:10px; */
}

.is-magazine .mag-date{      /* 通常の公開日 */
  display: block;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.3;
  color: var(--c-muted, #666);
  /* padding-left:10px; */
  text-align:justify;
}

/* タイトル（.magz-title をカード見出しと同等に扱う） */
.is-magazine .magz-title{
  margin-top: 8px;
  font-weight: 700;
  line-height: 1.5;
}

/* 右カラム：メタを横並び→縦積みに変更（既存flexを上書き） */
.page-template-page-magazine-main .listitem__meta{
  display: grid;
  row-gap: 4px;
  align-content: start;
}
.page-template-page-magazine-main .listitem__chip{ white-space: nowrap; }
.page-template-page-magazine-main .listitem__date{
  margin-left: 0;  /* 既存の右寄せを解除 */
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.3;
  color: var(--c-muted, #666);
  /* padding-left:14px; */
}

/* アイテム全体をCSS Gridにして、左画像を縦中央 or 可能なら拡大 */
.page-template-page-magazine-main .listitem{
  display: grid;
  grid-template-columns: auto 1fr; /* 左は自動（後述の aspect-ratio で幅が決まる） */
  column-gap: 16px;
  align-items: stretch;            /* 右カラムの高さに合わせる */
}

/* 左画像：可能なら右カラムの高さに追従しつつ 4:3 を保持して拡大 */
.page-template-page-magazine-main .listitem__thumb{
  aspect-ratio: 4 / 3;    /* 4:3 を維持 */
  align-self: center;     /* 内容が高すぎて伸ばせないときは縦中央に */
  max-width: 100px;       /* 伸びすぎ防止のキャップ（必要に応じて調整） */
}
.page-template-page-magazine-main .listitem__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;      /* はみ出しをトリミングして4:3を維持 */
  border-radius: 12px;
}

/* 右カラム：縦方向の密度を高める */
.page-template-page-magazine-main .listitem__body{
  display: grid;
  align-content: start;
}

/* タイトル行（既存サイズ指定の確認＆軽く余白調整） */
.page-template-page-magazine-main .listitem__title{
  margin-top: 6px;
}
@media (min-width: 768px){
  .page-template-page-magazine-main .listitem__title{ font-size: 18px !important; }
}

/* Web Magazine（page-magazine.php）タイトルを2行で省略 */
.page-template-page-magazine-main .listitem__title{
  /* ベース */
  --lh: 1.5;
  line-height: var(--lh);
  margin-top: 8px;

  /* 2行省略（マルチラインの省略記号）*/
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;   /* ← ここが行数 */
  overflow: hidden;

  /* フォールバック/日本語の長い語対策（効き目は弱いけど保険） */
  word-break: break-word;
  overflow-wrap: anywhere;
  /* 古いブラウザ向けの高さ上限（見た目揃え用） */
  max-height: calc(var(--lh) * 2em);
}

html { scroll-behavior: smooth; }

/* ==== Event Information：カードタイトルは2行で省略 ==== */
/* ページテンプレート名にひもづけ（安全寄り） */
.page-template-page-event-information .card .magz-title,
.page-template-page-event-information .card .mag-card__title,
.page-template-page-event-information .card .listitem__title,
.page-template-page-event-information .ei-card__title,
.page-template-page-event-information .evi-title,
.page-template-page-event-information .card .magz-title a,
.page-template-page-event-information .card .mag-card__title a,
.page-template-page-event-information .card .listitem__title a,
.page-template-page-event-information .ei-card__title a,
.page-template-page-event-information .evi-title a {
  display: -webkit-box;            /* マルチライン省略の要 */
  -webkit-box-orient: vertical;    /* 同上 */
  -webkit-line-clamp: 2;           /* 2行でカット */
  overflow: hidden;                /* はみ出し隠す */
  line-height: 1.6;                /* 行高（お好みで） */
  max-height: calc(1em * 1.6 * 2); /* ざっくりフォールバック */
  /* 長い英単語などの折返しケア（必要なら） */
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ===== 関連カード：横長レイアウト ===== */
.pg-rel .rel-hlist {
  display: grid;
  grid-template-columns: 1fr; /* 1列で縦積み（モーダル幅に合わせて読みやすく） */
  gap: 12px;
  margin-top: 12px;
}

.pg-rel .rel-hitem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--c-border, #e6e6e6);
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .2s ease, transform .2s ease;
}

.pg-rel .rel-hitem:hover {
  box-shadow: 0 3px 14px rgba(0,0,0,.09);
  transform: translateY(-1px);
}

/* 左サムネ（4:3固定） */
.pg-rel .rel-hthumb {
  flex: 0 0 120px;              /* SP: 120px */
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: #f5f5f5;
}
@media (min-width: 768px) {
  .pg-rel .rel-hthumb { flex-basis: 160px; } /* PC: 160px */
}
.pg-rel .rel-hthumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 右側：タイトルのみ */
.pg-rel .rel-hbody {
  min-width: 0; /* line-clamp のために必要：子の幅計算を正しく */
  flex: 1 1 auto;
}

/* タイトル：SP14px / PC16px、2行で省略（…） */
.pg-rel .rel-htitle {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 600; /* ZEN KAKU 500〜600相当 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
          line-clamp: 2;      /* 近年のブラウザ */
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
@media (min-width: 768px) {
  .pg-rel .rel-htitle { font-size: 18px; }
}

/* Safari/Chrome は上記で「…」表示。Firefox でも徐々に対応中 */

/* ===== 関連する情報：上部ドット区切り線 ===== */
.pg-rel {
  /* 好みで調整できるカスタムプロパティ */
  --dot-color: #bdbdbd;
  --dot-radius: 1px;   /* ドット半径 */
  --dot-gap: 10px;     /* ドット間隔 */
  position: relative;
  padding-top: 16px;   /* 線と見出しの間隔 */
}

/* フォールバック：単純な点線 */
.pg-rel::before {
  content: "";
  display: block;
  height: 0;
  margin-bottom: 12px;
  border-top: 2px dotted var(--dot-color);
}

/* モダンブラウザ用：丸いドットの連続線 */
@supports (background: radial-gradient(circle, #000 2px, transparent 3px)) {
  .pg-rel::before {
    border-top: 0;
    height: calc(var(--dot-radius) * 2);
    margin-bottom: 12px;
    background:
      radial-gradient(circle, var(--dot-color) var(--dot-radius), transparent calc(var(--dot-radius) + 1px))
      left center / var(--dot-gap) 100% repeat-x;
  }
}

/* === Related cards: vertical spacing only === */
.pg-modal .rel-section .pg-relcard + .pg-relcard {
  margin-top: 14px;
}
@media (min-width: 768px) {
  .pg-modal .rel-section .pg-relcard + .pg-relcard { margin-top: 16px; }
}
@media (min-width: 1200px) {
  .pg-modal .rel-section .pg-relcard + .pg-relcard { margin-top: 20px; }
}

/* （もし .pg-relrow でラップしている版を使っている場合はこちらも） */
.pg-modal .rel-section .pg-relrow {
  display: grid;
  row-gap: 14px;
}
@media (min-width: 768px) {
  .pg-modal .rel-section .pg-relrow { row-gap: 16px; }
}
@media (min-width: 1200px) {
  .pg-modal .rel-section .pg-relrow { row-gap: 20px; }
}

/* =========================
   Single 記事まわりの調整（mag/standard 共通）
   ========================= */

/* 1) MAG HERO と次セクションの間隔（PC/SPとも 40〜48px） */
section.mag-hero{ margin-bottom: clamp(40px, 5vw, 48px); }

/* 2) 記事本文の本文用フォント（Noto Sans JP） */
:root{
  --ff-article-body: "Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",system-ui,-apple-system,sans-serif;
  --c-link-orange: #f4ae36; /* 記事中のリンク用（お好みで調整可） */
}
.is-magazine-article .entry-content,
.is-article-typo   .entry-content{
  font-family: var(--ff-article-body);
}
.is-magazine-article .entry-content :is(p, li, dt, dd, blockquote, table, th, td, figcaption),
.is-article-typo   .entry-content :is(p, li, dt, dd, blockquote, table, th, td, figcaption){
  font-family: inherit !important;
}

/* 3) 画像・キャプションと次要素の間に 20〜24px の余白 */
.single .entry-content :is(figure.wp-block-image, figure.wp-caption, .wp-block-gallery){
  margin-bottom: clamp(20px, 3vw, 24px) !important;
}
/* 単独で挿入された画像にも適用（figure外の画像） */
.single .entry-content img[class*="wp-image"]{
  margin-bottom: clamp(20px, 3vw, 24px) !important;
}

/* 4) “本文中の画像 4:3 固定”を解除（mag-hero 以外。自然比表示） */
body.single :is(#postContent,.post-content__body,.post-content,.entry-content)
  :is(figure.wp-block-image,figure.wp-caption):not(:first-of-type) img,
body.single :is(#postContent,.post-content__body,.post-content,.entry-content)
  .wp-block-gallery figure img,
body.single :is(#postContent,.post-content__body,.post-content,.entry-content)
  img[class*="wp-image"]:not(:first-of-type){
  aspect-ratio: auto !important;
  object-fit: initial !important;
  /* 角丸は残したい場合はこのまま、不要なら次行をコメントアウト */
  border-radius: var(--post-img-radius) !important;
}

/* 5) 記事本文内の a をオレンジ＋下線に（見分けやすく） */
.single .entry-content a:not(.btn):not(.button){
  color: var(--c-link-orange) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}
.single .entry-content a:not(.btn):not(.button):hover{
  opacity: .9;
}

/* 画像にキャプションがある場合は “画像→キャプション” の隙間だけ詰める */
:root{
  --cap-gap: 6px; /* ここを 4〜8px などお好みで */
}

/* WordPress ブロック画像（キャプション付き） */
.single .entry-content figure.wp-block-image > img{
  margin-bottom: 0 !important;   /* 画像とキャプションの間の余白をゼロに */
  display: block;                /* 変な隙間防止 */
}
.single .entry-content figure.wp-block-image > figcaption{
  margin-top: var(--cap-gap) !important; /* 詰める量 */
}

/* 旧来の .wp-caption（クラシックエディター等）にも対応 */
.single .entry-content figure.wp-caption img,
.single .entry-content .wp-caption img{
  margin-bottom: 0 !important;
  display: block;
}
.single .entry-content figure.wp-caption > figcaption,
.single .entry-content .wp-caption .wp-caption-text{
  margin-top: var(--cap-gap) !important;
}

/* ====== HERO同期（Project基準で他ページも統一） ====== */
.p-hero,
.ab-hero{
  padding: clamp(56px,12vw,128px) 0 clamp(24px,6vw,64px);
}
.p-hero .ab-hero__title,
.ab-hero .ab-hero__title{
  letter-spacing: .02em;
  line-height: 1;
  text-align: center;
}
.p-hero .ab-hero__lead,
.ab-hero .ab-hero__lead{
  letter-spacing: .04em;
}

/* ====== Magazine Main：SPジャンプリンクの縦間隔を About と同値に ====== */
.page-template-page-magazine-main .about-toc .about-toc__list{
  column-gap: clamp(16px,5vw,36px);
  row-gap: clamp(8px,2.4vw,14px);
}

/* About のジャンプリンク：PCで 3列 × 2行に */
@media (min-width: 1024px){
  .page-template-page-about .about-toc .about-toc__list{
    display: grid !important;                /* 既存がflexでも上書き */
    grid-template-columns: repeat(3, 1fr);   /* 3列 */
    column-gap: 16px;                        /* 横の間隔 */
    row-gap: 16px;                           /* 縦の間隔（SPと揃えるなら好みで調整） */
    list-style: none;
    margin: auto;
    padding: 0;
  }
  /* 各リンクをグリッドのセルいっぱいに広げる（幅指定があれば打ち消す） */
  .page-template-page-about .about-toc .about-toc__link{
    display: block;
    width: 100% !important;
  }
}

/* Magazine のジャンプリンク：PCで1行固定（収まらなければ横スクロール） */
@media (min-width: 1024px){
  .page-template-page-magazine .mag-filter__list{
    display: flex;            /* 念のため明示 */
    flex-wrap: nowrap;        /* 折り返し禁止＝1行 */
    gap: 16px;                /* 既存値に合わせて調整 */
    overflow-x: auto;         /* はみ出したら横スクロール */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;    /* Firefox */
  }
  /* ボタン要素の横幅が広がりすぎないよう保護（必要に応じて） */
  .page-template-page-magazine .mag-filter__list > *{
    flex: 0 0 auto;           /* 幅は内容分、圧縮しない */
    white-space: nowrap;      /* ラベル内で改行しない */
  }
}

/* 中央寄せにしたい場合（オプション、どちらか好みで） */
@media (min-width: 1024px){
  .page-template-page-magazine .mag-filter__list{
    justify-content: center;
  }
}

/* Drawer close (×) button */
.ch-drawer { position: relative; }

.ch-drawer__close{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 3;
  color: #333;
}
@media (prefers-color-scheme: dark){
  .ch-drawer__close{ color:#f2f2f2; }
}

/* ×アイコン（CSS） */
.ch-drawer__close::before,
.ch-drawer__close::after{
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  transform-origin: center;
}
.ch-drawer__close::before { transform: rotate(45deg); }
.ch-drawer__close::after  { transform: rotate(-45deg); }

.ch-drawer__close:hover{ opacity: .85; }
.ch-drawer__close:focus{ outline: 2px solid #0aa; outline-offset: 2px; }

/* 視覚的に隠すけど読み上げる */
.u-visually-hidden{
  position:absolute!important;
  width:1px;height:1px;margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  overflow:hidden;white-space:nowrap;
}

/* クリック領域（お好みで） */
.ch-drawer__close{
  position: absolute;
  top: 24px; right: 24px;
  width: 40px; height: 40px;
  background: transparent; border: 0; cursor: pointer;
  color: #333; /* currentColor を使う */
}
@media (prefers-color-scheme: dark){
  .ch-drawer__close{ color:#f2f2f2; }
}

/* ←ここが肝：中心に置いて回転させる */
.ch-drawer__close::before,
.ch-drawer__close::after{
  --x-size: 22px;   /* 線の長さ */
  --x-thick: 2px;   /* 線の太さ（端末により 2.5px も綺麗） */
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: var(--x-size);
  height: var(--x-thick);
  background: currentColor;
  border-radius: 999px;            /* 端を丸くして見栄えUP */
  transform-origin: 50% 50%;       /* 中心を回転の軸に */
  transform: translate(-50%, -50%) rotate(45deg);
  pointer-events: none;            /* クリックはボタンに通す */
}
.ch-drawer__close::after{
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ホバー/フォーカスはお好みで */
.ch-drawer__close:hover { opacity: .85; }
.ch-drawer__close:focus { outline: 2px solid #0aa; outline-offset: 2px; }

/* ===== Narrow layout (template-scoped) ===== */
.is-narrow .l-container {            /* 既存レイアウトの共通コンテナ名に合わせて */
  max-width: 840px;                  /* PC幅：お好みで (例) 840〜960px */
  margin-inline: auto;
}

.is-narrow .post-content,
.is-narrow .entry-content,
.is-narrow .post-content__body {
  max-width: 60ch;                   /* 文字の読みやすい行長をキープ（任意） */
  margin-inline: auto;
}

@media (max-width: 767.98px){
  .is-narrow .l-container {
    width: 96%;                      /* SPは左右に余白を確保 */
    max-width: 560px;                /* お好みで上限も設定 */
  }
  .is-narrow .post-content,
  .is-narrow .entry-content,
  .is-narrow .post-content__body {
    max-width: 96%;
  }
}

/* 画面外に退避（display:none は使わない：LBが拾えるように） */
.u-offscreen{
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* 「広告掲載イメージ図はこちら」— リンクらしく見せる */
.sup-link--btn{
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .2em .1em;
  border-bottom: 2px solid currentColor;
  text-underline-offset: .15em;
  font-weight: 700;
}
.sup-link--btn::after{
  content: "🔍";
  font-size: .95em;
  line-height: 1;
}

/* ---------- 支援ページ：リンク見た目（虫眼鏡=マテリアル風） ---------- */
.sup-link--btn{
  display:inline-flex; align-items:center; gap:.45em;
  padding:.2em .1em; font-weight:700;
  border-bottom:2px solid currentColor; text-underline-offset:.15em;
}
.sup-link--btn::after{
  content:""; width:1.05em; height:1.05em; display:inline-block;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M15.5 14h-.79l-.28-.27a6.471 6.471 0 0 0 1.57-4.23 6.5 6.5 0 1 0-6.5 6.5 6.471 6.471 0 0 0 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zM6.5 9.5C6.5 7.57 8.07 6 10 6s3.5 1.57 3.5 3.5S11.93 13 10 13 6.5 11.43 6.5 9.5z'/>\
</svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M15.5 14h-.79l-.28-.27a6.471 6.471 0 0 0 1.57-4.23 6.5 6.5 0 1 0-6.5 6.5 6.471 6.471 0 0 0 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zM6.5 9.5C6.5 7.57 8.07 6 10 6s3.5 1.57 3.5 3.5S11.93 13 10 13 6.5 11.43 6.5 9.5z'/>\
</svg>") center / contain no-repeat;
}

/* ---------- 軽量拡大ビュー（オーバーレイ＋閉じる） ---------- */
.adimg-veil{
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.72);
  display: flex; align-items: center; justify-content: center;
  padding: 4vmin;
}
.adimg-panel{
  position: relative; max-width: min(96vw, 1000px); max-height: 92vh;
  display: grid; place-items: center;
}
.adimg-panel img{
  max-width: 100%; max-height: 92vh; width: auto; height: auto; display: block;
  border-radius: 8px; box-shadow: 0 10px 32px rgba(0,0,0,.35);
}

/* 閉じるボタン（マテリアルの close アイコン） */
.adimg-close{
  position: absolute; top: -14px; right: -14px;
  width: 40px; height: 40px; border-radius: 9999px;
  border: none; cursor: pointer; background: rgba(255,255,255,.92);
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.adimg-close::before{
  content:""; display:block; width:24px; height:24px; margin:8px auto;
  background-color: #222;
  -webkit-mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 \
12 13.41 17.59 19 19 17.59 13.41 12z'/>\
</svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 \
12 13.41 17.59 19 19 17.59 13.41 12z'/>\
</svg>") center / contain no-repeat;
}
.adimg-close:hover{ background: #fff; }

/* ========== cotohana-navi 専用 ========== */

/* セクション余白（全体） */
.is-navi .c-section{
  padding: clamp(18px, 4vw, 36px) 0;
}

/* リード文：Kiwi Maru 指定 */
.is-navi .c-section__lead.is-kiwi{
  font-family: "Kiwi Maru","Hiragino Mincho ProN","Yu Mincho",serif;
  font-weight: 400;
}

/* カード（ベージュ背景＋角丸＋影） */
.is-navi .navi-card{
  position: relative;
  background: var(--c-beige);
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
  padding: clamp(18px, 4vw, 28px);
  overflow: visible;
}

/* グリッド：SP=2列 / PC=3列 */
.is-navi .navi-grid{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(16px, 3vw, 24px);
  grid-template-columns: repeat(2, minmax(0,1fr));
  justify-items: center;
}
@media (min-width: 1024px){
  .is-navi .navi-grid{
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

/* 丸ボタン */
.is-navi .navi-btn{
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 10px;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.is-navi .navi-btn:hover{
  transform: translateY(-2px);
}

/* 丸いサムネホルダー */
.is-navi .navi-btn__ph{
  width: clamp(72px, 11vw, 104px);
  height: clamp(72px, 11vw, 104px);
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 9999px;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.08));
}
.is-navi .navi-btn__ph img{
  width: 100%;
  height: auto;
  display: block;
}

/* ラベル（Noto Sans JP 600）— 改行は <br> のみ有効にする */
.is-navi .navi-btn__label{
  display: inline-block;
  font-family: "Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  font-weight: 600;       /* SemiBold 600 */
  line-height: 1.35;
  color: #000;
  letter-spacing: .01em;
  white-space: normal;     /* ← pre-line を使わない（余計な空行を防止） */
  font-size: clamp(14px, 1.9vw, 18px);
  margin: 0;
}

/* 行間を少し詰めたいラベル用（例：「一時預かり」「ファミリーサポート」） */
.is-navi .navi-btn__label.is-tight{
  line-height: 1.2;
}

/* CRAM SCHOOL（塾・習い事）タイトル帯 */
.tpl-stripe-purple .pg-card__title.stripe-rect span {
  background-color: #CC66CC;
}

/* === TOP：地域イベント情報バナー ============================== */

.top-event-banner-wrap {
  margin-top: 32px;
}

.top-event-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 0px;
  text-decoration: none;
  /* 垂直ストライプ（白 / #38b6ff） */
  background-image: repeating-linear-gradient(
    90deg,
    #ffffff 0,
    #ffffff 4px,
    #38b6ff1c 4px,
    #38b6ff1c 8px
  );
}

/* 左：蜂アイコン（PC基準） */
.top-event-banner__bee img {
  display: block;
  width: 72px;
  height: auto;
}

/* テキスト：Kiwi Maru＋袋文字（白）＋カラー #47c8bf */
.top-event-banner__text {
  flex: 1 1 auto;
  text-align: center;
  font-weight: 700;
  font-size: 3.0rem;
  color: #47c8bf;
  /* 簡易アウトライン（袋文字） */
  text-shadow:
    -1px -1px 0 #ffffff,
     1px -1px 0 #ffffff,
    -1px  1px 0 #ffffff,
     1px  1px 0 #ffffff,
     0   0   2px #ffffff;
}

/* 右：円形アイコン */
.top-event-banner__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #47c8bf;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 中身：CSSで描画した太めの矢印 */
.top-event-banner__icon-arrow {
  position: relative;
  width: 18px;
  height: 18px;
  font-size: 0; /* テキストは使わないので消す */
}

.top-event-banner__icon-arrow::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  top: 50%;
  left: 30%;
  /* 視覚的に円のど真ん中に来るように少し調整 */
  transform: translate(-45%, -50%) rotate(45deg);
  border-right: 3px solid #ffffff;
  border-top: 3px solid #ffffff;
}

/* SP 調整 */
@media (max-width: 767px) {
  .top-event-banner {
    padding: 10px 20px;
    gap: 10px;
  }

  .top-event-banner__bee img {
    width: 54px;
  }

  .top-event-banner__text {
    /* 画面幅に応じて 1.6rem〜2.0rem の間で自動調整 */
    font-size: clamp(2.0rem, 4.8vw, 3.0rem);
    line-height: 1.25;
    /* できるだけ余計な改行が入らないように */
    word-break: keep-all;
    line-height:normal;
  }

  .top-event-banner__icon {
    width: 38px;
    height: 38px;
  }

  .top-event-banner__icon-arrow {
    width: 16px;
    height: 16px;
  }

  .top-event-banner__icon-arrow::before {
    width: 11px;
    height: 11px;
    border-right-width: 3px;
    border-top-width: 3px;
  }

  /* ▼ SP時：ハチを少しテキスト側（右）に寄せる */
  .top-event-banner__bee {
    transform: translateX(8px); /* 数値は好みで 6〜12px くらい調整OK */
  }
}

/* === PROJECT：コトハナの取り組み カード内ラベル＋日付を縦積み ========== */

/* ラベル＋日付を縦方向に並べる（他の .mag-card__meta には影響しないように別クラスで） */
.mag-card__meta--stack {
  display: inline-flex;          /* ラベルの横幅はテキストに応じて可変 */
  flex-direction: column;        /* 縦に並べる */
  align-items: flex-start;
  gap: 2px;                      /* ラベルと日付の間の余白 */
}

/* もし日付を少しだけ小さくしたければ（お好みで） */
.mag-card__meta--stack .mag-date {
  font-size: 0.7em;
  color:#666;
}

/* === Playground HERO：SP で「PLAYGROUND」を必ず1行に寄せる ================= */

/* page-asobiba テンプレート用（HEROタイトル） */
@media (max-width: 767px) {
  .page-template-page-asobiba .p-hero .ab-hero__title {
    /* 画面幅に応じて 2.2rem〜3.2rem の間で自動調整 */
    font-size: clamp(2.2rem, 11vw, 3.8rem);
    line-height: 1.1;
    white-space: nowrap;      /* 改行させない */
    word-break: keep-all;     /* 変なところで折らない */
  }
}