:root{
    color-scheme: light;
    --bg:#f4f4f2;
    --panel:#ffffff;
    --ink:#212121;
    --ink-soft:#5f6265;
    --ink-faint:#9a9da0;
    --line:#e2e2de;
    --accent:#00a4bb;
    --accent-deep:#00798f;
    --accent-soft:#e0f4f7;
    --dark:#26262a;
    --line-green:#06c755;
    --gold:#a8853f;
    --memo-bg:#fdf6e0;
    --shadow:0 16px 40px rgba(33,33,33,.10);
    --r-lg:22px;
    --ease:cubic-bezier(.22,.61,.36,1);
    --grad:linear-gradient(100deg,#00a4bb 0%,#2dd4bf 48%,#06c755 100%);
    --grad-soft:linear-gradient(120deg,rgba(0,164,187,.16),rgba(45,212,191,.12) 50%,rgba(6,199,85,.10));
    --glass:rgba(255,255,255,.72);
    --ring:0 0 0 1px rgba(0,164,187,.22), 0 18px 44px rgba(0,121,143,.14);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth;scroll-padding-top:26px}
  body{
    margin:0;background:var(--bg);color:var(--ink);
    font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
    font-size:16px;line-height:1.9;letter-spacing:.02em;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  body.locked{overflow:hidden}
  img{max-width:100%;display:block}
  a{color:var(--accent-deep)}
  .en{font-family:"M PLUS Rounded 1c","Zen Kaku Gothic New",sans-serif;font-weight:800}
  main{display:block}
  section{position:relative}

  /* ---------- reveal motion（JS無効時は常時表示） ---------- */
  html.js [data-reveal]{
    opacity:0;transform:translateY(36px);filter:blur(10px);
    transition:opacity .95s ease,transform .95s var(--ease),filter .95s ease;
    transition-delay:var(--rd,0s);
  }
  html.js [data-reveal].in{opacity:1;transform:none;filter:blur(0)}

  /* ---------- floating HUD（中央ピル＋右ピル） ---------- */
  .hud{
    position:fixed;top:12px;left:0;right:0;z-index:90;
    display:flex;justify-content:center;padding:0 10px;pointer-events:none;
  }
  .hud-pill{
    pointer-events:auto;display:flex;align-items:center;gap:4px;
    background:rgba(43,43,48,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-radius:19px;padding:5px;box-shadow:0 14px 34px rgba(20,20,20,.22);
  }
  .hud-logo{
    background:#fff;border-radius:14px;padding:9px 15px;
    display:flex;align-items:center;gap:8px;
    font-weight:900;font-size:.88rem;color:var(--ink);text-decoration:none;line-height:1.2;white-space:nowrap;
  }
  .hud-logo i{width:9px;height:9px;border-radius:50%;background:var(--accent);flex-shrink:0}
  .hud-menu-btn{
    appearance:none;border:0;background:transparent;color:#fff;cursor:pointer;
    font-family:inherit;font-weight:700;font-size:.92rem;letter-spacing:.04em;
    padding:10px 18px 10px 12px;min-height:44px;display:flex;align-items:center;gap:9px;border-radius:14px;
    transition:background .25s ease;
  }
  .hud-menu-btn:hover{background:rgba(255,255,255,.14)}
  .hud-menu-btn::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff}
  .hud-side{
    pointer-events:auto;position:absolute;right:12px;top:0;
    display:none;align-items:center;gap:11px;text-decoration:none;color:var(--ink);
    background:#fff;border-radius:19px;padding:5px 18px 5px 5px;
    box-shadow:0 14px 34px rgba(20,20,20,.16);
    transition:transform .25s var(--ease), box-shadow .25s ease;
  }
  .hud-side:hover{transform:translateY(-2px);box-shadow:0 20px 40px rgba(20,20,20,.2)}
  .hud-side img{width:48px;height:48px;object-fit:cover;border-radius:14px}
  .hud-side .t1{display:block;font-weight:900;font-size:.84rem;line-height:1.3}
  .hud-side .t2{display:block;font-size:.68rem;color:var(--accent-deep);line-height:1.3}
  @media(min-width:680px){.hud-side{display:flex}}

  /* ---------- full-screen menu ---------- */
  .menu{
    position:fixed;inset:0;z-index:120;background:var(--bg);
    padding:104px max(22px,6vw) 44px;overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .38s ease,transform .38s var(--ease),visibility 0s linear .38s;
  }
  .menu.open{opacity:1;visibility:visible;transform:none;transition:opacity .38s ease,transform .38s var(--ease)}
  .menu-close-row{display:flex;justify-content:center;margin-bottom:34px}
  .menu nav{display:grid;max-width:860px;margin:0 auto}
  .menu nav a{
    display:flex;align-items:baseline;justify-content:space-between;gap:16px;
    padding:15px 4px;border-bottom:1px solid var(--line);
    color:var(--ink);text-decoration:none;
    transition:padding-left .25s var(--ease),color .25s ease;
  }
  .menu nav a:hover{padding-left:12px;color:var(--accent-deep)}
  .menu nav a .en{font-size:clamp(1.45rem,4.6vw,2.1rem);line-height:1.25}
  .menu nav a .jp{font-size:.78rem;color:var(--ink-faint);font-weight:700;white-space:nowrap}
  .menu-cta{max-width:860px;margin:36px auto 0;text-align:center}

  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    min-height:52px;padding:13px 30px;border-radius:999px;white-space:nowrap;
    font-weight:700;font-size:.97rem;text-decoration:none;border:1.5px solid transparent;
    transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s ease, color .2s ease, border-color .2s ease;
  }
  .btn:active{transform:scale(.97)}
  .btn .arr{
    width:26px;height:26px;border-radius:50%;flex-shrink:0;
    display:inline-flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.25);font-size:.85rem;font-weight:900;
    transition:transform .25s var(--ease);
  }
  .btn:hover .arr{transform:translateX(4px)}
  .btn-line{background:var(--line-green);color:#fff;box-shadow:0 10px 26px rgba(6,199,85,.3)}
  .btn-line:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(6,199,85,.42)}
  .btn-dark{background:var(--ink);color:#fff}
  .btn-dark .arr{background:rgba(255,255,255,.2)}
  .btn-dark:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(33,33,33,.3)}
  .btn-white{background:#fff;color:var(--ink);border-color:var(--line)}
  .btn-white:hover{transform:translateY(-2px);border-color:var(--accent);color:var(--accent-deep)}
  .btn-sm{min-height:46px;padding:9px 20px;font-size:.88rem}

  /* 「View →」型テキストリンク */
  .view-link{
    display:inline-flex;align-items:center;gap:12px;color:#fff;text-decoration:none;
    font-size:clamp(1.35rem,4.4vw,2.2rem);line-height:1.15;
    border-bottom:2px solid rgba(255,255,255,.9);padding-bottom:6px;
  }
  .view-link .arr{
    width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.28);flex-shrink:0;
    display:inline-flex;align-items:center;justify-content:center;font-size:.95rem;
    transition:transform .25s var(--ease),background .25s ease;
  }
  a:hover .view-link .arr,.view-link:hover .arr{transform:translateX(4px);background:var(--accent)}

  /* ---------- HERO：画面いっぱいの写真パネル ---------- */
  .hero{
    margin:8px;border-radius:var(--r-lg);overflow:hidden;position:relative;
    min-height:calc(100svh - 16px);background:#3d4a42;
  }
  .hero>img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
    will-change:transform;
  }
  .hero::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(185deg, rgba(24,34,29,.34) 0%, rgba(24,34,29,0) 30%, rgba(24,34,29,.06) 55%, rgba(24,34,29,.66) 100%);
  }
  .hero-in{
    position:absolute;inset:0;z-index:2;color:#fff;
    display:flex;flex-direction:column;justify-content:flex-end;
    padding:100px clamp(20px,4.5vw,54px) clamp(22px,4vw,44px);
  }
  .hero-label{
    position:absolute;top:92px;left:clamp(20px,4.5vw,54px);margin:0;
    font-weight:900;font-size:clamp(.92rem,2.6vw,1.15rem);letter-spacing:.06em;
    text-shadow:0 2px 14px rgba(20,30,25,.4);
  }
  .hero-label .hl-main{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
  .hero-label .hl-main::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent);flex-shrink:0}
  .hero-label small{display:block;margin:5px 0 0 19px;font-weight:700;font-size:.7rem;letter-spacing:.14em;opacity:.92}
  .hero-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap}
  h1{
    margin:0;font-weight:900;letter-spacing:.01em;
    font-size:clamp(1.95rem,8vw,6.3rem);line-height:1.32;
    text-shadow:0 3px 34px rgba(20,30,25,.35);
  }
  .h-line{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
  .h-line>span{display:block}
  html.js .h-line>span{animation:riseIn 1.05s var(--ease) both;animation-delay:calc(var(--i)*.15s + .1s)}
  @keyframes riseIn{from{transform:translateY(112%)}to{transform:translateY(0)}}
  .hero-en{margin-left:auto;padding-bottom:.35em}
  @media(max-width:919px){
    .hero>img{object-position:63% 50%}
    .hero-in{padding-bottom:108px}
  }

  /* ---------- 写真パネル（セクション入口） ---------- */
  .panel{
    margin:8px;border-radius:var(--r-lg);overflow:hidden;position:relative;
    display:block;text-decoration:none;color:#fff;background:#3d4a42;
    min-height:min(560px,74svh);
  }
  .panel>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
  .panel::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(185deg, rgba(24,34,29,.30) 0%, rgba(24,34,29,0) 32%, rgba(24,34,29,.05) 55%, rgba(24,34,29,.62) 100%);
  }
  .panel-in{
    position:relative;z-index:2;min-height:inherit;
    display:flex;flex-direction:column;justify-content:flex-end;
    padding:26px clamp(20px,4.5vw,54px) clamp(22px,4vw,40px);
  }
  .panel-label{
    position:absolute;top:24px;left:clamp(20px,4.5vw,54px);
    font-weight:900;font-size:clamp(.9rem,2.4vw,1.05rem);letter-spacing:.06em;
    display:flex;align-items:center;gap:9px;text-shadow:0 2px 14px rgba(20,30,25,.4);
  }
  .panel-label::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent);flex-shrink:0}
  .panel-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap}
  .panel h3{
    margin:0;font-weight:900;letter-spacing:.01em;
    font-size:clamp(1.65rem,6.6vw,3.4rem);line-height:1.4;
    text-shadow:0 3px 30px rgba(20,30,25,.35);max-width:15em;
  }

  /* ---------- セクション共通（グレーの地＋巨大英字） ---------- */
  .sec{padding:92px max(20px,5vw) 84px}
  .sec.tight{padding-top:56px}
  .kicker{
    display:flex;align-items:center;gap:9px;
    font-weight:900;font-size:.95rem;letter-spacing:.05em;margin:0;
  }
  .kicker::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent);flex-shrink:0}
  .en-big{
    font-family:"M PLUS Rounded 1c","Zen Kaku Gothic New",sans-serif;font-weight:800;
    font-size:clamp(2.7rem,8.5vw,4.9rem);line-height:1.08;letter-spacing:.005em;margin:12px 0 0;
  }
  .jp-head{
    font-weight:900;font-size:clamp(1.5rem,4.6vw,2.3rem);line-height:1.5;margin:14px 0 0;letter-spacing:.01em;
  }
  .lead{max-width:740px;color:var(--ink-soft);margin:20px 0 0}
  .lead strong{color:var(--ink)}
  .split{display:grid;gap:30px}
  @media(min-width:920px){.split{grid-template-columns:1.05fr 1fr;gap:64px;align-items:start}}
  .dots{
    height:190px;margin-top:34px;border-radius:14px;
    background-image:radial-gradient(rgba(33,33,33,.38) 1.3px, transparent 1.45px);
    background-size:13px 13px;background-position:0 0;
    -webkit-mask-image:linear-gradient(155deg,#000 25%,transparent 80%);
    mask-image:linear-gradient(155deg,#000 25%,transparent 80%);
  }

  /* ---------- 白カード（ニュースカード型） ---------- */
  .cards{display:grid;gap:14px}
  @media(min-width:760px){.cards.c2,.cards.c4{grid-template-columns:1fr 1fr}}
  @media(min-width:920px){.cards.c4{grid-template-columns:repeat(4,1fr)}.cards.c3{grid-template-columns:repeat(3,1fr)}}
  .card{
    background:var(--panel);border-radius:16px;padding:26px 24px;position:relative;
    transition:transform .3s var(--ease), box-shadow .3s ease;
  }
  .card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
  .card .arr-c{
    position:absolute;top:18px;right:18px;width:34px;height:34px;border-radius:50%;
    background:var(--bg);color:var(--ink);
    display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.9rem;
    transition:background .25s ease,color .25s ease,transform .25s var(--ease);
  }
  .card:hover .arr-c{background:var(--accent);color:#fff;transform:translateX(3px)}
  .card .cat{font-weight:900;font-size:.8rem;letter-spacing:.05em}
  .card .date{display:block;font-size:.74rem;color:var(--ink-faint);letter-spacing:.08em;margin-top:1px}
  @media(min-width:920px){
    .cards.stagger .card:nth-child(2){transform:translateY(30px)}
    .cards.stagger .card:nth-child(3){transform:translateY(60px)}
    .cards.stagger .card:nth-child(4){transform:translateY(30px)}
    .cards.stagger .card:hover{transform:translateY(-5px)}
    .cards.stagger .card:nth-child(2):hover{transform:translateY(25px)}
    .cards.stagger .card:nth-child(3):hover{transform:translateY(55px)}
    .cards.stagger .card:nth-child(4):hover{transform:translateY(25px)}
    .cards.stagger{padding-bottom:60px}
  }

  /* facts */
  .fact b{display:block;font-weight:900;font-size:1.08rem;line-height:1.55;margin:12px 0 4px;padding-right:30px}
  .fact b em{font-style:normal;color:var(--accent-deep)}
  .fact span{font-size:.85rem;color:var(--ink-soft)}

  /* worries */
  .worries{display:grid;gap:12px;margin:30px 0 0;padding:0;list-style:none}
  @media(min-width:760px){.worries{grid-template-columns:1fr 1fr}}
  .worries li{
    background:var(--panel);border-radius:14px;padding:17px 18px 17px 52px;position:relative;
    font-size:.95rem;font-weight:500;
    transition:transform .25s var(--ease), box-shadow .25s ease;
  }
  .worries li:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
  .worries li::before{
    content:"✓";position:absolute;left:16px;top:50%;transform:translateY(-50%);
    width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;
    font-size:.74rem;font-weight:900;display:flex;align-items:center;justify-content:center;
  }

  /* services */
  .svc-num{
    font-family:"M PLUS Rounded 1c",sans-serif;font-weight:800;
    font-size:2.5rem;line-height:1;color:var(--accent);
  }
  .svc-card h3{font-weight:900;font-size:1.22rem;margin:14px 0 8px;line-height:1.55}
  .svc-card p{margin:0;color:var(--ink-soft);font-size:.94rem}
  .svc-card p b{color:var(--ink)}
  .fig-note{font-size:.82rem;color:var(--ink-soft);margin:14px 4px 0;max-width:720px}

  /* ---------- 白パネルセクション ---------- */
  .sec-panel{
    background:var(--panel);margin:8px;border-radius:var(--r-lg);
    padding:84px max(22px,5vw) 78px;
  }
  .method-quote{
    font-weight:900;font-size:clamp(1.45rem,4.8vw,2.15rem);line-height:1.85;letter-spacing:.01em;
    margin:36px 0 8px;max-width:900px;
  }
  .method-quote .hl{color:var(--accent-deep)}
  .switch-list{display:grid;gap:14px;margin-top:30px}
  @media(min-width:820px){.switch-list{grid-template-columns:repeat(3,1fr)}}
  .switch{
    background:var(--bg);border-radius:16px;padding:24px 22px;
    transition:transform .3s var(--ease), box-shadow .3s ease;
  }
  .switch:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
  .switch .from{color:var(--ink-soft);font-size:.9rem;text-decoration:line-through;text-decoration-color:var(--accent);text-decoration-thickness:2px}
  .switch .arrow{color:var(--accent-deep);font-weight:900;margin:9px 0;font-size:.85rem}
  .switch .to{font-weight:900;font-size:1.07rem;line-height:1.6}

  /* ---------- 黒パネル（カウンセラー／コンタクト） ---------- */
  .panel-dark{
    margin:8px;border-radius:var(--r-lg);background:var(--dark);color:#fff;
    padding:84px max(22px,5vw) 76px;position:relative;overflow:hidden;
  }
  .panel-dark::before{
    content:"";position:absolute;left:-22%;top:-38%;width:75%;aspect-ratio:1;border-radius:50%;
    background:rgba(255,255,255,.045);pointer-events:none;
  }
  .panel-dark .kicker{color:#fff;position:relative}
  .panel-dark .en-big{color:#fff;position:relative}
  .c-photos{position:relative;margin-top:38px;display:flex;justify-content:center}
  .c-main{
    width:min(560px,90vw);border-radius:16px;overflow:hidden;position:relative;z-index:2;
    box-shadow:0 24px 50px rgba(0,0,0,.4);
  }
  .c-main img{width:100%;height:auto}
  .c-sub{display:none}
  @media(min-width:920px){
    .c-sub{
      display:block;position:absolute;right:2%;top:-8px;width:250px;border-radius:16px;overflow:hidden;
      box-shadow:0 24px 50px rgba(0,0,0,.4);opacity:.96;
    }
    .c-sub img{width:100%;height:auto}
  }
  .c-catch{
    position:relative;text-align:center;font-weight:900;letter-spacing:.01em;
    font-size:clamp(1.55rem,5.6vw,2.9rem);line-height:1.6;margin:40px auto 0;max-width:820px;
  }
  .c-cap{position:relative;text-align:center;font-size:.78rem;color:#b9bbbe;margin-top:14px}
  .c-name{font-size:1.75rem;font-weight:900;margin:0 0 2px}
  .c-role{color:var(--accent-deep);font-weight:900;font-size:.88rem;letter-spacing:.08em;margin:0 0 18px}
  .timeline{list-style:none;margin:34px 0 0;padding:0}
  .timeline li{
    display:grid;gap:2px;padding:20px 2px;border-bottom:1px solid var(--line);
  }
  @media(min-width:760px){.timeline li{grid-template-columns:130px 1fr;gap:22px;align-items:baseline}}
  .timeline .age{
    font-family:"M PLUS Rounded 1c",sans-serif;font-weight:800;
    font-size:1.55rem;color:var(--accent-deep);line-height:1.2;
  }
  .timeline b{font-weight:900;font-size:1.03rem}
  .timeline p{margin:3px 0 0;color:var(--ink-soft);font-size:.93rem}

  /* flow */
  .flow-card .n{
    font-family:"M PLUS Rounded 1c",sans-serif;font-weight:800;
    font-size:2.3rem;line-height:1;color:var(--ink);
  }
  .flow-card .n em{font-style:normal;color:var(--accent)}
  .flow-card h3{font-size:1.02rem;margin:13px 0 6px;font-weight:900}
  .flow-card p{margin:0;font-size:.87rem;color:var(--ink-soft)}

  /* plans */
  .plans{display:grid;gap:16px;margin-top:34px}
  @media(min-width:920px){.plans{grid-template-columns:repeat(3,1fr);align-items:stretch}}
  .plan{
    background:var(--panel);border-radius:18px;padding:34px 26px;
    display:flex;flex-direction:column;position:relative;
    transition:transform .3s var(--ease), box-shadow .3s ease;
  }
  .plan:hover{transform:translateY(-7px);box-shadow:var(--shadow)}
  .plan .p-en{
    font-family:"M PLUS Rounded 1c",sans-serif;font-weight:800;font-size:.8rem;
    letter-spacing:.14em;color:var(--ink-faint);text-align:center;text-transform:uppercase;
  }
  .plan h3{font-weight:900;font-size:1.18rem;margin:4px 0 12px;text-align:center}
  .price{text-align:center;margin-bottom:18px}
  .price .yen{
    font-family:"M PLUS Rounded 1c","Zen Kaku Gothic New",sans-serif;font-weight:800;
    font-size:2.25rem;letter-spacing:.01em;line-height:1.2;
  }
  .price small{color:var(--ink-soft);font-size:.8rem}
  .plan ul{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:9px;font-size:.9rem}
  .plan li{padding-left:25px;position:relative}
  .plan li::before{content:"✓";position:absolute;left:2px;color:var(--accent-deep);font-weight:900}
  .plan li.off{color:var(--ink-faint)}
  .plan li.off::before{content:"―";color:var(--line)}
  .plan .btn{margin-top:auto}
  .plan.reco{background:var(--dark);color:#fff;box-shadow:0 24px 50px rgba(33,33,33,.28)}
  .plan.reco .p-en{color:#8f9296}
  .plan.reco .price small{color:#b9bbbe}
  .plan.reco li.off{color:#7e8083}
  .plan.reco li::before{color:var(--accent)}
  .plan .tag{
    position:absolute;top:-14px;left:50%;transform:translateX(-50%);
    background:var(--accent);color:#fff;font-size:.76rem;font-weight:900;letter-spacing:.12em;
    padding:5px 18px;border-radius:999px;white-space:nowrap;
  }
  .plan-notes{font-size:.82rem;color:var(--ink-soft);margin-top:20px;display:grid;gap:4px}
  .trial{
    margin-top:22px;background:var(--accent);color:#fff;border-radius:18px;padding:28px;
    display:grid;gap:10px;
  }
  @media(min-width:760px){.trial{grid-template-columns:1fr auto;align-items:center}}
  .trial h3{font-weight:900;margin:0;font-size:1.18rem}
  .trial p{margin:0;font-size:.9rem;color:#e6f7fa}
  .trial .t-price{
    font-family:"M PLUS Rounded 1c","Zen Kaku Gothic New",sans-serif;font-weight:800;font-size:1.5rem;
  }
  .trial small{color:#cdeef3}

  /* area */
  .area-card h3{
    font-family:"M PLUS Rounded 1c","Zen Kaku Gothic New",sans-serif;font-weight:800;
    font-size:1.9rem;line-height:1.25;margin:10px 0 2px;
  }
  .area-card .jp{font-weight:900;font-size:1.02rem}
  .area-card p{margin:8px 0 0;font-size:.88rem;color:var(--ink-soft)}

  /* voices */
  .voices-empty{
    border:2px dashed #cfd4d2;border-radius:18px;padding:40px 26px;text-align:center;
    color:var(--ink-soft);background:var(--panel);
  }
  .voices-empty b{font-weight:900;color:var(--ink);display:block;font-size:1.07rem;margin-bottom:6px}

  /* faq */
  .faq{display:grid;gap:10px;margin-top:34px}
  .faq details{background:var(--panel);border-radius:14px;overflow:hidden}
  .faq summary{
    cursor:pointer;list-style:none;padding:19px 62px 19px 22px;position:relative;
    font-weight:700;font-size:.97rem;min-height:54px;display:flex;align-items:center;
  }
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{
    content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);
    width:34px;height:34px;border-radius:50%;background:var(--bg);color:var(--ink);
    display:flex;align-items:center;justify-content:center;
    font-size:1.3rem;font-weight:700;transition:transform .25s var(--ease),background .25s ease,color .25s ease;
  }
  .faq details[open ] summary::after{transform:translateY(-50%) rotate(45deg);background:var(--accent);color:#fff}
  .faq .a{padding:0 22px 20px;color:var(--ink-soft);font-size:.93rem}

  /* contact dark panel */
  .contact-in{position:relative;text-align:center}
  .contact-in h2{
    font-weight:900;font-size:clamp(1.6rem,5.4vw,2.6rem);line-height:1.65;margin:18px 0 16px;letter-spacing:.01em;
  }
  .contact-in p{color:#c9cbcd;max-width:580px;margin:0 auto 28px;font-size:.95rem}
  .contact-in .fine{font-size:.78rem;color:#9fa1a4;margin-top:16px}
  .disclaimer{font-size:.8rem;color:var(--ink-soft);margin-top:26px;display:grid;gap:10px}
  .disclaimer .crisis{background:var(--panel);border-radius:14px;padding:17px 19px;color:var(--ink)}
  .disclaimer .crisis b{color:var(--accent-deep)}

  /* memo (rough-only) */
  .memo{
    margin:8px;border:1.5px dashed var(--gold);background:var(--memo-bg);border-radius:18px;
    padding:32px max(22px,4vw);
  }
  .memo h2{font-weight:900;font-size:1.2rem;margin:0 0 6px}
  .memo .memo-sub{font-size:.82rem;color:var(--ink-soft);margin:0 0 8px}
  .memo h3{font-size:.95rem;margin:22px 0 8px;color:var(--accent-deep)}
  .memo ul{margin:0;padding-left:20px;font-size:.9rem;color:var(--ink-soft);display:grid;gap:6px}
  .memo ul b{color:var(--ink)}

  /* ---------- footer（巨大英字ナビリスト） ---------- */
  footer.site{
    background:var(--panel);margin:8px;border-radius:var(--r-lg);
    padding:64px max(22px,5vw) 36px;
  }
  .foot-grid{display:grid;gap:36px}
  @media(min-width:920px){.foot-grid{grid-template-columns:290px 1fr;gap:64px;align-items:start}}
  .foot-photo{border-radius:14px;overflow:hidden}
  .foot-photo img{width:100%;height:190px;object-fit:cover}
  @media(min-width:920px){.foot-photo img{height:100%;min-height:340px}}
  .foot-nav{display:grid}
  .foot-nav a{
    display:flex;align-items:baseline;justify-content:space-between;gap:16px;
    padding:13px 2px;border-bottom:1px solid var(--line);
    color:var(--ink);text-decoration:none;
    transition:padding-left .25s var(--ease),color .25s ease;
  }
  .foot-nav a:hover{padding-left:10px;color:var(--accent-deep)}
  .foot-nav a .en{font-size:clamp(1.35rem,3.6vw,1.95rem);line-height:1.3}
  .foot-nav a .jp{font-size:.76rem;color:var(--ink-faint);font-weight:700;white-space:nowrap}
  .foot-bottom{
    margin-top:44px;display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between;
    font-size:.78rem;color:var(--ink-soft);
  }
  .foot-bottom b{color:var(--ink)}

  /* ---------- sticky CTA（浮遊カプセル） ---------- */
  .sticky-cta{
    position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:80;
    display:flex;gap:6px;padding:6px;border-radius:999px;
    background:rgba(38,38,42,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    box-shadow:0 18px 40px rgba(20,20,20,.3);
  }
  .sticky-cta .btn{flex:1;min-height:50px;padding:10px 12px}
  .sticky-cta .btn-line{flex:1.35;box-shadow:none}
  @media(min-width:920px){.sticky-cta{display:none}}
  @media(max-width:919px){footer.site{margin-bottom:86px}}

  /* ---------- 写真ナビカード（トップ） ---------- */
  .photo-nav{display:grid;gap:14px;margin-top:44px}
  @media(min-width:760px){.photo-nav{grid-template-columns:1fr 1fr}}
  @media(min-width:1100px){.photo-nav{grid-template-columns:repeat(4,1fr)}}
  .pnav{
    background:var(--panel);border-radius:16px;overflow:hidden;text-decoration:none;color:var(--ink);
    display:flex;flex-direction:column;
    transition:transform .3s var(--ease), box-shadow .3s ease;
  }
  .pnav:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
  .pnav .ph{height:158px;overflow:hidden}
  .pnav .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
  .pnav:hover .ph img{transform:scale(1.05)}
  .pnav .pb{padding:18px 20px 20px;display:flex;flex-direction:column;gap:5px;flex:1}
  .pnav .cat{font-weight:900;font-size:.74rem;letter-spacing:.1em;color:var(--accent-deep)}
  .pnav b{font-weight:900;font-size:1.06rem;line-height:1.5}
  .pnav p{margin:0;font-size:.85rem;color:var(--ink-soft)}
  .more-link{
    margin-top:auto;padding-top:12px;display:inline-flex;align-items:center;gap:9px;
    font-weight:900;font-size:.88rem;color:var(--accent-deep);
  }
  .more-link .arr{
    width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent-deep);flex-shrink:0;
    display:inline-flex;align-items:center;justify-content:center;font-size:.8rem;
    transition:transform .25s var(--ease),background .25s ease,color .25s ease;
  }
  a:hover .more-link .arr,.more-link:hover .arr{transform:translateX(4px);background:var(--accent);color:#fff}

  /* ---------- 写真フレーム ---------- */
  .photo-frame{border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
  .photo-frame img{width:100%;height:100%;object-fit:cover;min-height:260px}
  .photo-cap{font-size:.76rem;color:var(--ink-faint);margin-top:8px}

  /* ---------- 考え方カード ---------- */
  .kfan{
    display:flex;justify-content:center;align-items:flex-end;gap:0;
    padding:38px 6px 8px;overflow:visible;
  }
  .kcard{
    background:#fff;border-radius:14px;box-shadow:0 14px 34px rgba(33,33,33,.14);
    padding:20px 18px;width:196px;min-height:238px;flex-shrink:0;
    display:flex;flex-direction:column;position:relative;
    transition:transform .35s var(--ease);
  }
  .kfan .kcard:nth-child(1){transform:rotate(-7deg) translateY(14px);z-index:1}
  .kfan .kcard:nth-child(2){transform:rotate(-2.5deg);z-index:2;margin-left:-26px}
  .kfan .kcard:nth-child(3){transform:rotate(2.5deg);z-index:3;margin-left:-26px}
  .kfan .kcard:nth-child(4){transform:rotate(7deg) translateY(14px);z-index:2;margin-left:-26px}
  .kfan .kcard:hover{transform:rotate(0) translateY(-10px);z-index:5}
  @media(max-width:759px){
    .kfan{flex-wrap:wrap;gap:14px}
    .kfan .kcard{margin-left:0 !important;width:min(44vw,196px);min-height:210px}
    .kfan .kcard:nth-child(1){transform:rotate(-3deg)}
    .kfan .kcard:nth-child(2){transform:rotate(2deg)}
    .kfan .kcard:nth-child(3){transform:rotate(-2deg)}
    .kfan .kcard:nth-child(4){transform:rotate(3deg)}
  }
  .kcard .no{
    font-family:"M PLUS Rounded 1c",sans-serif;font-weight:800;font-size:.72rem;
    letter-spacing:.14em;color:var(--accent-deep);
    display:flex;align-items:center;gap:7px;
  }
  .kcard .no::after{content:"";flex:1;height:1px;background:var(--line)}
  .kcard .word{
    font-weight:900;font-size:1.16rem;line-height:1.75;letter-spacing:.01em;
    margin:auto 0;padding:14px 0;
  }
  .kcard .foot{font-size:.7rem;color:var(--ink-faint);letter-spacing:.06em}
  .kcard-grid{display:grid;gap:14px;margin-top:30px}
  @media(min-width:760px){.kcard-grid{grid-template-columns:1fr 1fr}}
  @media(min-width:1100px){.kcard-grid{grid-template-columns:repeat(4,1fr)}}
  .kcard-grid .kcard{width:auto;min-height:190px}
  .kcard-grid .kcard .word{font-size:1.05rem}
  .month-card{
    margin-top:26px;background:var(--dark);color:#fff;border-radius:18px;
    padding:32px 28px;display:grid;gap:22px;position:relative;overflow:hidden;
  }
  @media(min-width:820px){.month-card{grid-template-columns:250px 1fr;align-items:center}}
  .month-card::before{
    content:"";position:absolute;right:-16%;top:-46%;width:56%;aspect-ratio:1;border-radius:50%;
    background:rgba(255,255,255,.05);pointer-events:none;
  }
  .month-card .kcard{transform:rotate(-3deg);margin:0 auto}
  .month-card h3{font-weight:900;font-size:1.25rem;margin:0 0 10px;position:relative}
  .month-card p{margin:0;color:#d7d9db;font-size:.94rem;position:relative}
  .month-card .mc-label{
    font-family:"M PLUS Rounded 1c",sans-serif;font-weight:800;font-size:.74rem;
    letter-spacing:.16em;color:var(--accent);margin-bottom:12px;position:relative;
  }
  .how-list{display:grid;gap:14px;margin-top:30px;counter-reset:how}
  @media(min-width:820px){.how-list{grid-template-columns:repeat(3,1fr)}}
  .how{
    background:var(--panel);border-radius:16px;padding:24px 22px;position:relative;
    transition:transform .3s var(--ease), box-shadow .3s ease;
  }
  .how:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
  .how .n{
    font-family:"M PLUS Rounded 1c",sans-serif;font-weight:800;font-size:2rem;line-height:1;color:var(--accent);
  }
  .how h3{font-weight:900;font-size:1.05rem;margin:12px 0 6px}
  .how p{margin:0;font-size:.9rem;color:var(--ink-soft)}

  /* ---------- 料金サマリー（トップ） ---------- */
  .price-sum{display:grid;gap:14px;margin-top:34px}
  @media(min-width:820px){.price-sum{grid-template-columns:1fr 1fr}}
  .psum{
    background:var(--panel);border-radius:18px;padding:28px 26px;position:relative;
    transition:transform .3s var(--ease), box-shadow .3s ease;
  }
  .psum:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
  .psum.opt{background:var(--dark);color:#fff}
  .psum .p-en{
    font-family:"M PLUS Rounded 1c",sans-serif;font-weight:800;font-size:.76rem;
    letter-spacing:.14em;color:var(--ink-faint);text-transform:uppercase;
  }
  .psum.opt .p-en{color:#8f9296}
  .psum h3{font-weight:900;font-size:1.15rem;margin:4px 0 10px}
  .psum .yen{
    font-family:"M PLUS Rounded 1c","Zen Kaku Gothic New",sans-serif;font-weight:800;
    font-size:2.1rem;line-height:1.2;
  }
  .psum .yen small{font-size:.82rem;font-weight:700;color:var(--ink-soft)}
  .psum.opt .yen small{color:#b9bbbe}
  .psum p{margin:10px 0 0;font-size:.9rem;color:var(--ink-soft)}
  .psum.opt p{color:#c9cbcd}
  .psum .tag{
    position:absolute;top:-13px;left:24px;background:var(--accent);color:#fff;
    font-size:.74rem;font-weight:900;letter-spacing:.1em;padding:4px 16px;border-radius:999px;
  }

  /* ---------- プラン詳細（2本立て） ---------- */
  .plans2{display:grid;gap:18px;margin-top:36px}
  @media(min-width:920px){.plans2{grid-template-columns:1.15fr 1fr;align-items:stretch}}
  .plan2{
    background:var(--panel);border-radius:18px;padding:36px 30px;position:relative;
    display:flex;flex-direction:column;
    transition:transform .3s var(--ease), box-shadow .3s ease;
  }
  .plan2:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
  .plan2.main{border:2.5px solid var(--accent)}
  .plan2 .p-en{
    font-family:"M PLUS Rounded 1c",sans-serif;font-weight:800;font-size:.78rem;
    letter-spacing:.14em;color:var(--ink-faint);text-transform:uppercase;
  }
  .plan2 h3{font-weight:900;font-size:1.3rem;margin:4px 0 6px}
  .plan2 .sub{font-size:.9rem;color:var(--ink-soft);margin:0 0 16px}
  .plan2 .price{text-align:left;margin-bottom:20px}
  .plan2 .price .yen{font-size:2.6rem}
  .plan2 ul{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px;font-size:.93rem}
  .plan2 li{padding-left:26px;position:relative}
  .plan2 li::before{content:"✓";position:absolute;left:2px;color:var(--accent-deep);font-weight:900}
  .plan2 .btn{margin-top:auto}
  .plan2 .tag{
    position:absolute;top:-14px;left:26px;background:var(--accent);color:#fff;
    font-size:.76rem;font-weight:900;letter-spacing:.1em;padding:5px 18px;border-radius:999px;white-space:nowrap;
  }
  .first-step{
    margin-top:22px;background:var(--accent-soft);border-radius:18px;padding:28px;
    display:grid;gap:12px;
  }
  @media(min-width:760px){.first-step{grid-template-columns:1fr auto;align-items:center}}
  .first-step h3{font-weight:900;margin:0;font-size:1.15rem;color:var(--ink)}
  .first-step p{margin:4px 0 0;font-size:.9rem;color:var(--ink-soft)}

  /* ---------- NEXT-GEN layer（最先端デザイン） ---------- */
  .progress{
    position:fixed;top:0;left:0;right:0;height:3px;z-index:200;pointer-events:none;
  }
  .progress i{display:block;height:100%;width:0;background:var(--grad);border-radius:0 3px 3px 0}
  body{
    background:
      radial-gradient(720px 460px at 108% -60px, rgba(0,164,187,.10), transparent 62%),
      radial-gradient(620px 420px at -120px 38%, rgba(45,212,191,.07), transparent 60%),
      var(--bg);
  }
  /* hero aurora — ゆっくり漂う光 */
  .hero::before{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:
      radial-gradient(46% 34% at 78% 16%, rgba(45,212,191,.34), transparent 70%),
      radial-gradient(38% 30% at 12% 78%, rgba(0,164,187,.26), transparent 70%);
    mix-blend-mode:screen;animation:aurora 14s ease-in-out infinite alternate;
  }
  @keyframes aurora{
    from{opacity:.55;transform:scale(1) translateY(0)}
    to{opacity:1;transform:scale(1.12) translateY(-14px)}
  }
  .hero-badge{
    display:inline-flex;align-items:center;gap:8px;
    background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.42);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    color:#fff;border-radius:999px;padding:6px 14px 6px 10px;
    font-size:.76rem;font-weight:900;letter-spacing:.1em;line-height:1.4;
  }
  .hero-badge b{
    background:#fff;color:var(--accent-deep);border-radius:999px;padding:2px 10px;
    font-size:.74rem;letter-spacing:.08em;
  }
  /* horizontal sliders（新着情報・豆知識） */
  .slider-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
  .slider-nav{display:flex;gap:8px}
  .slider-btn{
    appearance:none;width:48px;height:48px;border-radius:50%;cursor:pointer;
    border:1px solid var(--line);background:var(--panel);color:var(--ink);
    font-size:1.05rem;font-weight:900;line-height:1;
    display:flex;align-items:center;justify-content:center;
    transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s var(--ease);
  }
  .slider-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-2px)}
  .hslider{
    display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;scroll-padding-left:2px;
    padding:6px max(20px,5vw) 16px 2px;margin-top:26px;
    margin-right:calc(-1 * max(20px,5vw));
    scrollbar-width:thin;scrollbar-color:#c3d6d9 transparent;
    -webkit-overflow-scrolling:touch;
  }
  .hslider::-webkit-scrollbar{height:6px}
  .hslider::-webkit-scrollbar-thumb{background:#c3d6d9;border-radius:999px}
  .hslider::-webkit-scrollbar-track{background:transparent}
  /* Wantedly式カード：カテゴリ＋日付 → サムネイル → タイトル */
  .hcard{
    flex:0 0 min(82vw,330px);scroll-snap-align:start;
    background:var(--panel);border-radius:18px;
    text-decoration:none;color:var(--ink);display:flex;flex-direction:column;
    padding:22px 20px 24px;
    box-shadow:0 4px 18px rgba(33,33,33,.05);
    transition:transform .3s var(--ease),box-shadow .3s ease;
  }
  .hcard:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
  .hcard-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
  .hcard-top>span:first-child{display:block}
  .hcard .cat{display:block;font-weight:900;font-size:.92rem;letter-spacing:.03em;line-height:1.5}
  .hcard .date{display:block;font-size:.78rem;color:var(--ink-faint);letter-spacing:.05em;margin-top:1px}
  .hcard .ext{
    flex-shrink:0;font-size:1rem;line-height:1;color:var(--ink);padding-top:3px;
    transition:transform .25s var(--ease),color .25s ease;
  }
  .hcard:hover .ext{transform:translate(2px,-2px);color:var(--accent-deep)}
  .hcard .thumb{margin-top:18px;height:176px;border-radius:12px;overflow:hidden;flex-shrink:0}
  .hcard .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
  .hcard:hover .thumb img{transform:scale(1.05)}
  .hcard h3{font-size:1.06rem;font-weight:900;line-height:1.65;margin:18px 0 0}
  /* Wantedly式タブ見出し（News | Tips） */
  .tab-head{display:flex;align-items:center;gap:clamp(15px,3.2vw,30px)}
  .tab-head .t-word{
    font-family:"M PLUS Rounded 1c","Zen Kaku Gothic New",sans-serif;font-weight:800;
    font-size:clamp(2.6rem,8.5vw,4.6rem);line-height:1.1;letter-spacing:.01em;margin:0;
  }
  .tab-head .t-active{color:var(--ink);position:relative}
  .tab-head .t-active::before{
    content:"";position:absolute;top:-9px;left:34%;
    width:10px;height:10px;border-radius:50%;background:var(--accent);
  }
  .tab-head .t-inactive{color:#c7c9cb;text-decoration:none;transition:color .25s ease}
  .tab-head .t-inactive:hover{color:var(--ink-soft)}
  .tab-head .t-sep{width:1.5px;height:clamp(2.1rem,6.8vw,3.7rem);background:#d8d8d4;flex-shrink:0}
  /* ghost outline behind section titles */
  .sec,.sec-panel{isolation:isolate}
  .en-big{position:relative;z-index:1}
  /* glass + gradient border for featured plan */
  .plan2.main{
    border:none;box-shadow:var(--ring);
    background:
      linear-gradient(#fff,#fff) padding-box,
      var(--grad) border-box;
    border:2.5px solid transparent;
  }
  .psum:first-child{box-shadow:var(--ring)}
  /* card shine sweep（タグがはみ出す .psum / .plan2 には overflow:hidden を掛けない＝見切れ防止） */
  .card,.pnav{overflow:hidden}
  .card::after,.pnav::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);
    transform:translateX(-130%);transition:transform .8s var(--ease);
  }
  .card:hover::after,.pnav:hover::after{transform:translateX(130%)}
  .pnav::after{z-index:2}
  /* button gradient sheen */
  .btn-line{position:relative;overflow:hidden}
  .btn-line::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);
    transform:translateX(-130%);transition:transform .7s var(--ease);
  }
  .btn-line:hover::after{transform:translateX(130%)}
  /* kicker pill — spec chip */
  .kicker{
    display:inline-flex;background:var(--glass);border:1px solid var(--line);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    border-radius:999px;padding:6px 14px 6px 11px;
  }
  .panel-dark .kicker{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
  /* HUD upgrade */
  .hud-pill{border:1px solid rgba(255,255,255,.22)}
  .hud-side{border:1px solid rgba(255,255,255,.65)}
  /* dark panels: aurora ring glow */
  .panel-dark::after{
    content:"";position:absolute;right:-18%;bottom:-52%;width:64%;aspect-ratio:1;border-radius:50%;
    background:radial-gradient(circle,rgba(0,164,187,.22),transparent 68%);pointer-events:none;
  }
  .month-card{box-shadow:0 24px 54px rgba(33,33,33,.22)}
  .kcard{border:1px solid rgba(226,226,222,.9)}

  /* ---------- 3プラン＋キャンペーン価格＋背景レイヤー ---------- */
  .price .was,.psum .was{
    display:block;font-size:.88rem;font-weight:700;color:var(--ink-faint);
    text-decoration:line-through;text-decoration-thickness:1.5px;
  }
  .psum .was{margin-top:3px}
  .psum.opt .was{color:#a7a9ac}
  .camp-chip{
    display:inline-block;background:var(--grad);color:#fff;
    font-size:.72rem;font-weight:900;letter-spacing:.08em;
    padding:3px 12px;border-radius:999px;margin-bottom:9px;
  }
  .camp-banner{
    margin-top:30px;border-radius:18px;padding:22px 26px;background:var(--grad);color:#fff;
    display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;
    box-shadow:0 18px 40px rgba(0,121,143,.22);
  }
  .camp-banner b{font-size:1.12rem;font-weight:900;letter-spacing:.02em}
  .camp-banner span{font-size:.88rem;color:#eafcff}
  @media(min-width:1080px){
    .price-sum{grid-template-columns:repeat(3,1fr)}
    .plans2{grid-template-columns:repeat(3,1fr)}
  }
  /* 背景に写真をうっすら＋グラデーションで覆う */
  #about{
    background-image:linear-gradient(rgba(244,244,242,.94),rgba(244,244,242,.90)),url(assets/park-talk.webp);
    background-size:cover;background-position:center;
  }
  #plans{
    background-image:linear-gradient(rgba(244,244,242,.95),rgba(244,244,242,.92)),url(assets/hero-walk.webp);
    background-size:cover;background-position:center;
  }
  #contact{
    background-image:linear-gradient(rgba(38,38,42,.90),rgba(38,38,42,.95)),url(assets/online.webp);
    background-size:cover;background-position:center;
  }

  /* ---------- 豆知識 記事 ---------- */
  .articles-head{max-width:780px}
  .article{
    background:var(--panel);border-radius:22px;margin-top:26px;overflow:hidden;
    box-shadow:0 10px 34px rgba(33,33,33,.06);border:1px solid rgba(226,226,222,.9);
    scroll-margin-top:26px;
  }
  .article-hero{height:clamp(200px,38vw,340px);overflow:hidden;position:relative}
  .article-hero img{width:100%;height:100%;object-fit:cover}
  .article-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(20,28,24,.28))}
  .article-in{padding:30px clamp(20px,4.5vw,52px) 40px}
  .art-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .art-cat{background:var(--accent);color:#fff;font-weight:900;font-size:.74rem;letter-spacing:.08em;padding:4px 13px;border-radius:999px}
  .art-cat.alt{background:var(--dark)}
  .art-date,.art-read{font-size:.78rem;color:var(--ink-faint);font-weight:700;letter-spacing:.04em}
  .article h3.art-title{font-weight:900;font-size:clamp(1.45rem,4.2vw,2rem);line-height:1.55;margin:16px 0 0;letter-spacing:.01em}
  .article h3.art-title em{font-style:normal;color:var(--accent-deep)}
  .art-lead{color:var(--ink-soft);margin:16px 0 0;font-size:.99rem}
  .art-lead strong{color:var(--ink)}
  .art-slug{font-size:.74rem;color:var(--ink-faint);margin-top:10px;letter-spacing:.03em}
  .art-slug code{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:1px 7px;font-size:.74rem}
  /* おしゃれな目次 */
  .toc{
    margin-top:26px;border-radius:16px;padding:22px 22px 10px;position:relative;
    background:linear-gradient(#fbfdfd,#fbfdfd) padding-box,var(--grad) border-box;border:1.5px solid transparent;
  }
  .toc-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
  .toc-head .toc-en{font-family:"M PLUS Rounded 1c",sans-serif;font-weight:800;letter-spacing:.14em;font-size:.78rem;color:var(--accent-deep);text-transform:uppercase}
  .toc-head::after{content:"";flex:1;height:1px;background:var(--line)}
  .toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
  .toc li{counter-increment:toc;border-bottom:1px dashed var(--line)}
  .toc li:last-child{border-bottom:none}
  .toc a{
    display:flex;gap:13px;align-items:baseline;padding:10px 2px;color:var(--ink);text-decoration:none;
    font-weight:700;font-size:.93rem;line-height:1.6;transition:color .2s ease,padding-left .25s var(--ease);
  }
  .toc a:hover{color:var(--accent-deep);padding-left:8px}
  .toc a::before{
    content:counter(toc,decimal-leading-zero);font-family:"M PLUS Rounded 1c",sans-serif;font-weight:800;
    color:var(--accent);font-size:.86rem;flex-shrink:0;
  }
  .art-body{margin-top:8px}
  .art-body h4{
    font-weight:900;font-size:1.16rem;line-height:1.6;margin:36px 0 10px;
    display:flex;gap:12px;align-items:flex-start;scroll-margin-top:26px;
  }
  .art-body h4 .no{
    font-family:"M PLUS Rounded 1c",sans-serif;font-weight:800;color:#fff;background:var(--accent);
    font-size:.78rem;line-height:1;width:30px;height:30px;border-radius:10px;flex-shrink:0;
    display:inline-flex;align-items:center;justify-content:center;margin-top:3px;
  }
  .art-body p{margin:0 0 14px;color:#3c3f41;font-size:.97rem}
  .art-body p strong{color:var(--ink)}
  .art-fig{margin:22px 0;border-radius:14px;overflow:hidden}
  .art-fig img{width:100%;height:230px;object-fit:cover}
  .art-fig figcaption{font-size:.76rem;color:var(--ink-faint);margin-top:7px}
  .pull{
    margin:22px 0;border-radius:14px;background:var(--accent-soft);padding:22px 22px 20px;position:relative;
  }
  .pull::before{content:"“";position:absolute;top:2px;left:14px;font-size:2.6rem;font-weight:900;color:var(--accent);opacity:.5;line-height:1}
  .pull p{margin:0;font-weight:900;font-size:1.05rem;line-height:1.8;color:var(--ink)}
  .pull small{display:block;margin-top:8px;font-weight:700;color:var(--accent-deep);font-size:.78rem;letter-spacing:.06em}
  .check-box{background:var(--bg);border-radius:14px;padding:20px 22px;margin:20px 0}
  .check-box b.t{display:block;font-weight:900;font-size:.95rem;margin-bottom:10px}
  .check-box ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.93rem}
  .check-box li{padding-left:26px;position:relative}
  .check-box li::before{content:"✓";position:absolute;left:2px;color:var(--accent-deep);font-weight:900}
  .warn-box{border:1.5px solid #e8d9a8;background:#fffaf0;border-radius:14px;padding:18px 20px;margin:20px 0;font-size:.9rem;color:#5b5335}
  .warn-box b{color:var(--ink)}
  .counselor-note{
    margin-top:28px;border-top:1px solid var(--line);padding-top:22px;display:grid;gap:14px;
  }
  @media(min-width:760px){.counselor-note{grid-template-columns:52px 1fr}}
  .counselor-note .av{width:52px;height:52px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.8rem;letter-spacing:.04em}
  .counselor-note .who{font-weight:900;font-size:.86rem;margin:0}
  .counselor-note p{margin:4px 0 0;font-size:.93rem;color:var(--ink-soft)}
  .art-cta{margin-top:26px;background:var(--dark);color:#fff;border-radius:16px;padding:24px;display:grid;gap:14px}
  @media(min-width:760px){.art-cta{grid-template-columns:1fr auto;align-items:center}}
  .art-cta b{font-weight:900;font-size:1.02rem;display:block}
  .art-cta span{font-size:.88rem;color:#c9cbcd}
  .art-footnav{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
  .art-footnav a{
    font-size:.84rem;font-weight:900;color:var(--accent-deep);text-decoration:none;
    border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 16px;
    transition:border-color .2s ease,background .2s ease;
  }
  .art-footnav a:hover{border-color:var(--accent);background:var(--accent-soft)}
  .tag-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
  .tag-row span{font-size:.74rem;font-weight:700;color:var(--ink-soft);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px 11px}
  @media(max-width:759px){.art-fig img{height:190px}}

  /* ---------- 豆知識：独立した記事ページ ---------- */
  /* トップ（ホーム表示）では記事全文は出さず、一覧から各記事の専用ページへ進む */
  #tips-articles .article{display:none}
  .art-index{display:grid;gap:14px;margin-top:30px}
  .art-row{
    display:grid;grid-template-columns:168px 1fr;gap:20px;align-items:stretch;
    background:var(--panel);border:1px solid rgba(226,226,222,.9);border-radius:18px;
    padding:16px;text-decoration:none;color:var(--ink);
    box-shadow:0 4px 18px rgba(33,33,33,.05);
    transition:transform .3s var(--ease),box-shadow .3s ease;
  }
  .art-row:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
  .art-row .th{border-radius:12px;overflow:hidden;min-height:118px}
  .art-row .th img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
  .art-row:hover .th img{transform:scale(1.05)}
  .art-row .tx{display:flex;flex-direction:column;padding:4px 2px}
  .art-row .meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .art-row h3{font-weight:900;font-size:1.05rem;line-height:1.6;margin:9px 0 0}
  .art-row p{margin:6px 0 0;font-size:.86rem;color:var(--ink-soft)}
  .art-row .go{
    margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:8px;
    font-weight:900;font-size:.85rem;color:var(--accent-deep);
  }
  .art-row .go .arr{
    width:24px;height:24px;border-radius:50%;background:var(--accent-soft);color:var(--accent-deep);flex-shrink:0;
    display:inline-flex;align-items:center;justify-content:center;font-size:.75rem;
    transition:transform .25s var(--ease),background .25s ease,color .25s ease;
  }
  .art-row:hover .go .arr{transform:translateX(4px);background:var(--accent);color:#fff}
  @media(max-width:640px){
    .art-row{grid-template-columns:104px 1fr;gap:13px;padding:12px}
    .art-row .th{min-height:96px}
    .art-row h3{font-size:.95rem}
    .art-row p{display:none}
  }
  /* 記事ページビュー：他のセクションを隠し、対象記事だけを1ページとして表示 */
  body.art-view main>*:not(#tips-articles){display:none !important}
  body.art-view #tips-articles{padding-top:104px}
  body.art-view #tips-articles .articles-head,
  body.art-view #tips-articles .art-index,
  body.art-view #tips-articles .tips-more{display:none}
  body.art-view #tips-articles .article.active{display:block;margin-top:20px}
  .art-pagebar{display:none}
  body.art-view .art-pagebar{display:block}
  /* 一覧ページビュー：トップの5件の下のボタンから進む、豆知識だけの専用ページ */
  .list-pagebar{display:none}
  body.list-view .list-pagebar{display:block}
  body.list-view main>*:not(#tips-articles){display:none !important}
  body.list-view #tips-articles{padding-top:104px}
  body.list-view #tips-articles .article{display:none !important}
  body.list-view #tips-articles .tips-more{display:none}
  .tips-more{margin-top:28px;text-align:center}
  .tips-more p{font-size:.84rem;color:var(--ink-soft);margin:12px 0 0}
  .crumbs{display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-size:.8rem;font-weight:700;color:var(--ink-soft)}
  .crumbs a{color:var(--accent-deep);text-decoration:none}
  .crumbs a:hover{text-decoration:underline}
  .crumbs .sep{color:var(--ink-faint)}
  .crumbs .cur{color:var(--ink);font-weight:900}
  .art-pagetag{
    display:inline-flex;align-items:center;gap:8px;margin:16px 0 0;
    background:var(--glass);border:1px solid var(--line);border-radius:999px;padding:5px 14px 5px 11px;
    font-weight:900;font-size:.76rem;letter-spacing:.08em;color:var(--ink-soft);
  }
  .art-pagetag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
  .art-pagetag code{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:0 7px;font-size:.74rem;letter-spacing:.02em}

  /* ---------- reduced motion ---------- */
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    html.js [data-reveal]{opacity:1;transform:none;transition:none}
    html.js .h-line>span{animation:none}
    .hero::before{animation:none}
    html.js [data-reveal]{filter:none}
    .menu{transition:none}
    *,*::before,*::after{transition-duration:.01ms !important}
  }
/* ============================================================
   WordPress adaptation overrides (added for the WP theme)
   - In the rough, .article elements were SPA views toggled by
     body.art-view / body.list-view. In WordPress each article is
     a real post page, so the single-post article is always shown.
   - Page top padding for templates without the hero (single /
     archive / page), so content clears the floating HUD header.
   ============================================================ */
.sl-page{padding-top:112px}
.sl-page .article{display:block}
body.single-post .site-main, body.archive .site-main, body.page .site-main{display:block}
.crumbs{font-size:.82rem;color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumbs a{color:var(--ink-soft);text-decoration:none}
.crumbs a:hover{color:var(--accent-deep)}
.crumbs .sep{color:var(--ink-faint)}
.crumbs .cur{color:var(--ink);font-weight:700}
.sl-pagenav{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;margin-top:34px}
.sl-pagenav a{flex:1 1 220px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 20px;text-decoration:none;color:var(--ink);font-weight:700;box-shadow:var(--shadow)}
.sl-pagenav a small{display:block;font-weight:500;color:var(--ink-soft);font-size:.78rem;margin-bottom:4px}
.sl-pagenav .next{text-align:right}
.sl-pagination{display:flex;gap:8px;justify-content:center;margin:36px 0 8px;flex-wrap:wrap}
.sl-pagination .page-numbers{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:999px;background:var(--panel);border:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:700}
.sl-pagination .page-numbers.current{background:var(--accent);border-color:var(--accent);color:#fff}
.sl-pagebody{max-width:860px;margin:0 auto;padding:0 max(20px,5vw) 30px}
.sl-pagebody h1{font-weight:900;font-size:clamp(1.6rem,4.6vw,2.3rem);line-height:1.5;margin:18px 0 10px}
.sl-pagebody .entry-content{margin-top:18px}
.sl-line-note{font-size:.8rem;color:var(--ink-soft);margin-top:12px}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
img.alignleft{float:left;margin:0 18px 12px 0}
img.alignright{float:right;margin:0 0 12px 18px}
.wp-caption{max-width:100%}

/* --- WP adaptation #2: single/archive visibility + h1 title ---
   In the rough, .article and the page bars were shown only in the SPA
   article/list views (body.art-view / body.list-view). In WordPress the
   single-post and archive templates are real pages, so force them open. */
body.single-post #tips-articles .article{display:block}
.sl-show{display:block !important}
.article h1.art-title{font-weight:900;font-size:clamp(1.45rem,4.2vw,2rem);line-height:1.55;margin:16px 0 0;letter-spacing:.01em}
.article h1.art-title em{font-style:normal;color:var(--accent-deep)}