/* ============================================================
   style.css — ED サイト（メンズライフオンライン）専用の基本スタイル
   2026-09-28：テストステロン外来の共通 /css/style.css から、ED の各ページ（ed/ 配下の PHP）で
   使っているセレクタだけを残して切り出したもの。以後はテストステロン側とは別管理。
   配色は ed.css 側の body.ed-site で上書きしているため、:root の値はテストステロン時代のまま。
   JS が付け外しする状態クラス（.reveal.in / .faq-item.open / header.open）は残している。
   ============================================================ */
  :root{
    --ink:#141a44;        /* deep navy : hero-bar / dark sections */
    --pine:#1f2a6e;       /* secondary dark navy */
    --paper:#ededf6;      /* brand light blue-grey bg */
    --paper-2:#e0e2f0;    /* slightly deeper panel */
    --accent:#2430a5;     /* brand navy : accents on light */
    --accent-bright:#aab2ec;/* light periwinkle : accents on dark */
    --bronze:#B67836;     /* CTA only : burnished amber-bronze */
    --bronze-bright:#E0A354;/* CTA glow */
    --text:#1a1f3d;       /* text on light */
    --text-inv:#eef0fa;   /* text on dark */
    --muted:#5c6180;      /* secondary text on light */
    --muted-inv:#a9b0d6;  /* secondary text on dark */
    --line:#d3d5e6;       /* hairline on light */
    --line-inv:#33407e;   /* hairline on dark */
    --maxw:1160px;
    --disp:"Shippori Mincho B1",serif;
    --body:"Zen Kaku Gothic New",sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:var(--body);
    background:var(--paper);
    color:var(--text);
    font-size:18px;
    line-height:1.95;
    -webkit-font-smoothing:antialiased;
    letter-spacing:.01em;
    overflow-x:hidden;
  }
  h1,h2,h3{font-family:var(--disp);font-weight:700;line-height:1.35;letter-spacing:.02em}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

  /* ---------- eyebrow / labels ---------- */

  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:12px;
    font-family:var(--body);font-weight:700;font-size:16px;letter-spacing:.04em;
    padding:19px 38px;border-radius:100px;border:1px solid transparent;
    transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
    cursor:pointer;min-height:60px;
  }
  .btn-ghost{background:transparent;border-color:currentColor;color:var(--text-inv)}
  .btn-ghost:hover{background:rgba(255,255,255,.08)}
  .final .btn-ghost{color:var(--text-inv)}

  /* ---------- header ---------- */
  header{
    position:sticky;top:0;z-index:60;
    background:rgba(20,26,68,.92);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line-inv);
  }
  .nav{display:flex;align-items:center;justify-content:space-between;height:76px}
  .brand{display:flex;flex-direction:column;line-height:1.2}
  .brand b{font-family:var(--disp);font-weight:700;color:var(--text-inv);font-size:19px;letter-spacing:.06em}
  .brand span{font-size:10px;letter-spacing:.3em;color:var(--accent-bright);text-transform:uppercase;margin-top:3px}
  .nav-links{display:flex;gap:30px;align-items:center}
  .nav-links a{color:var(--muted-inv);font-size:14px;font-weight:500;transition:color .2s}
  .nav-links a:hover{color:var(--text-inv)}
  .nav-links .nav-cta{background:var(--bronze);color:#fff;padding:11px 24px;border-radius:100px;font-size:14px;font-weight:700;transition:background .2s}
  .nav-links .nav-cta:hover{background:#a56c30;color:#fff}
  .menu-btn{display:none;background:none;border:0;color:var(--text-inv);font-size:26px;cursor:pointer}
  @media(max-width:960px){
    .nav-links{display:none}
    .menu-btn{display:block}
  }

  /* ---------- hero ---------- */
  .btn-ghost-light{background:rgba(36,48,165,.78);border:1.5px solid rgba(255,255,255,.85);color:#fff;font-weight:700}
  .btn-ghost-light:hover{background:rgba(36,48,165,.82);border-color:#fff}
  /* reusable bronze offset frame (echoes the source assets' offset-frame motif) */

  /* ---------- section base ---------- */
  section{padding:96px 0}
  .sec-head{max-width:720px;margin-bottom:56px}
  .sec-head h2{font-size:clamp(27px,3.6vw,40px);margin-top:6px}
  .sec-head p{margin-top:22px;color:var(--muted);font-size:16px;line-height:2}
  .on-dark{background:var(--ink);color:var(--text-inv)}
  .on-dark .sec-head p{color:var(--muted-inv)}
  .on-dark h2,.on-dark h3{color:var(--text-inv)}
  .panel{background:var(--paper-2)}

  /* reveal */
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
  .reveal.in{opacity:1;transform:none}

  /* ---------- symptoms ---------- */
  .sym-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
  .sym{background:var(--paper);padding:28px 30px}
  .sym .n{font-family:var(--disp);color:var(--accent);font-size:15px;letter-spacing:.16em;margin-right:10px}
  .sym h3{display:inline;font-size:20px}
  .sym p{color:var(--muted);font-size:15.5px;line-height:1.9;margin-top:10px}
  @media(max-width:820px){.sym-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:520px){.sym-grid{grid-template-columns:1fr}}

  /* ---------- self check ---------- */
  .disclaimer{font-size:12px;color:var(--muted-inv);margin-top:16px;line-height:1.7}

  /* ---------- decline / graph ---------- */

  /* ---------- changes ---------- */
  .change{border:1px solid var(--line);border-radius:3px;padding:30px 30px;transition:border-color .3s,transform .3s;
    display:flex;flex-wrap:wrap;align-items:center;column-gap:18px;background:var(--paper)}
  .change:hover{border-color:var(--accent);transform:translateY(-3px)}
  .change h3{font-size:20px;margin:0;flex:1;min-width:0}
  .change p{color:var(--muted);font-size:16.5px;line-height:1.9;flex-basis:100%;margin-top:16px}

  /* ---------- reasons ---------- */

  /* ---------- menu ---------- */

  /* ---------- pricing ---------- */

  /* ---------- flow ---------- */
  .flow{position:relative}
  .flow-step{display:grid;grid-template-columns:90px 1fr;gap:28px;padding-bottom:44px;position:relative}
  .flow-step::before{content:"";position:absolute;left:26px;top:56px;bottom:-4px;width:1px;background:var(--line)}
  .flow-step:last-child::before{display:none}
  .flow-num{width:54px;height:54px;border-radius:50%;background:var(--ink);color:#fff;
    font-family:var(--disp);font-size:20px;display:flex;align-items:center;justify-content:center;position:relative;z-index:2}
  .flow-body h3{font-size:20px;margin-bottom:8px}
  .flow-body p{color:var(--muted);font-size:15px;line-height:1.9}
  @media(max-width:600px){.flow-step{grid-template-columns:54px 1fr;gap:18px}.flow-step::before{left:26px}}

  /* ---------- doctor ---------- */
  .doctor{display:grid;grid-template-columns:320px 1fr;gap:48px;align-items:center}
  .doctor p{color:var(--muted-inv);font-size:15px;line-height:1.95;margin-top:18px}
  @media(max-width:760px){.doctor{grid-template-columns:1fr;gap:30px}}

  /* ---------- risk ---------- */
  .caution li{list-style:none;padding:14px 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:14.5px;line-height:1.8}
  .caution li b{color:var(--text);display:block;margin-bottom:2px;font-family:var(--disp)}

  /* ---------- faq ---------- */
  .faq-item{border-bottom:1px solid var(--line)}
  .faq-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:26px 44px 26px 0;
    font-family:var(--disp);font-size:18px;color:var(--text);position:relative;line-height:1.6}
  .faq-q .qmark{color:var(--accent);margin-right:14px;font-weight:700}
  .faq-q::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:26px;color:var(--accent);font-family:var(--body);transition:transform .3s}
  .faq-item.open .faq-q::after{content:"−"}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease}
  .faq-a-inner{padding:0 0 26px;color:var(--muted);font-size:15px;line-height:1.95}
  .faq-a-inner ul{margin:10px 0 0 20px;color:var(--muted)}

  /* ---------- access ---------- */
  .clinic{background:var(--paper);border:1px solid var(--line);border-radius:3px;overflow:hidden}
  .clinic .map{aspect-ratio:16/10;background:#dcdcd2;overflow:hidden}
  .clinic .map iframe{width:100%;height:100%;border:0;display:block}
  .clinic .body{padding:26px 26px 30px}
  .clinic h3{font-size:21px;margin-bottom:6px}
  .clinic .area{color:var(--accent);font-size:12px;letter-spacing:.16em;margin-bottom:16px}
  .clinic dl{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:14px;color:var(--muted)}
  .clinic dt{color:var(--text);font-weight:500}

  /* ---------- final cta ---------- */
  .final{position:relative;overflow:hidden;text-align:center;padding:120px 0}
  .final h2{font-size:clamp(28px,4.4vw,48px);color:var(--text-inv);line-height:1.4}
  .final p{color:#dce1f6;margin:24px auto 38px;max-width:560px;font-size:16.5px;line-height:2}
  .final .btn{font-size:17px;padding:22px 46px}
  .final-curve{position:absolute;left:0;right:0;bottom:0;width:100%;opacity:.5}

  /* ---------- footer ---------- */
  footer{background:#0f1436;color:var(--muted-inv);padding:64px 0 40px;font-size:13.5px}
  .foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid var(--line-inv)}
  .foot-top .brand b{color:var(--text-inv);font-size:20px}
  .foot-top p{margin-top:16px;line-height:1.9;max-width:340px}
  .foot-col h4{color:var(--text-inv);font-size:13px;letter-spacing:.14em;margin-bottom:16px;font-weight:700}
  .foot-col a{display:block;padding:6px 0;color:var(--muted-inv);transition:color .2s}
  .foot-col a:hover{color:var(--accent-bright)}
  .foot-bottom{padding-top:28px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12px}
  .foot-note{max-width:820px;margin-top:20px;font-size:11.5px;line-height:1.8;color:#6c7b73}
  @media(max-width:760px){.foot-top{grid-template-columns:1fr;gap:30px}}

  /* ---------- LINE CTA ---------- */
  .line-cta{background:var(--paper-2);padding:40px 0}
  .line-cta h3{font-size:22px;margin-bottom:8px}
  .btn-line{background:#06C755;color:#fff;flex-shrink:0}
  .btn-line:hover{background:#05a648;color:#fff}
  @media(max-width:760px){.btn-line{width:100%}}

  /* ---------- mobile sticky cta ---------- */
  .mcta{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
    background:rgba(21,33,29,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line-inv);
    padding:12px 16px;gap:10px}
  .mcta .btn{flex:1;padding:16px;min-height:54px;font-size:15px}
  @media(max-width:960px){.mcta{display:flex}body{padding-bottom:80px}}

  /* ---------- check mini result bar (mobile, on /check/ only) ---------- */

  /* ---------- cases / 相談例 ---------- */

  /* ---------- mobile readability (larger type for older users) ---------- */
  @media(max-width:640px){
    body{font-size:18.5px;line-height:2}
    .sec-head{margin-bottom:40px}
    .sec-head h2{font-size:29px}
    .sec-head p{font-size:17.5px}
    .sym{padding:24px 24px}
    .sym .n{font-size:16px}
    .sym h3{font-size:21px}
    .sym p{font-size:17px}
    .disclaimer{font-size:14px}
    .change{padding:26px 24px}
    .change h3{font-size:21px}
    .change p{font-size:17.5px}
    .flow-body h3{font-size:22px}
    .flow-body p{font-size:17px}
    .doctor p{font-size:17px}
    .caution li{font-size:16.5px}
    .faq-q{font-size:19px;padding:24px 40px 24px 0}
    .faq-a-inner{font-size:17px}
    .clinic h3{font-size:23px}
    .clinic dl{font-size:16.5px}
    footer{font-size:15.5px}
    .foot-top p{font-size:15.5px}
    .foot-col a{font-size:16px}
    .foot-note{font-size:13.5px}
    .btn{font-size:17px}
    .final p{font-size:17.5px}
    .mcta .btn{font-size:17px}
  }

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

  /* ---------- sub-page hero / breadcrumb ---------- */
  .page-hero{background:var(--ink);color:var(--text-inv);padding:54px 0 46px}
  .breadcrumb{font-size:13px;color:var(--muted-inv);margin-bottom:16px;letter-spacing:.04em}
  .breadcrumb a{color:var(--muted-inv)}
  .breadcrumb a:hover{color:var(--accent-bright)}
  .breadcrumb span{margin:0 9px;opacity:.55}
  .page-hero h1{font-size:clamp(27px,4vw,40px);color:var(--text-inv)}
  .page-hero p{color:var(--muted-inv);margin-top:16px;max-width:640px;line-height:1.9}
  /* ---------- clinic list card link ---------- */
  .clinic .body h3 a{color:inherit;transition:color .2s}
  .clinic .body h3 a:hover{color:var(--accent)}
  /* ---------- clinic detail ---------- */
  /* ---------- mobile menu ----------
     リンクのタップ領域がテキスト幅だけに限られていた（右手操作だと押しにくい）ため、
     各リンクを行全体に広げ、面でタップできるようにする。CTAボタンだけは元の
     ピル形状（自動幅）を保つため align-self:flex-start を指定。 */
  @media(max-width:960px){
    header.open .nav-links{display:flex;flex-direction:column;align-items:stretch;gap:2px;
      position:absolute;top:76px;left:0;right:0;background:var(--ink);padding:14px 12px 20px;border-bottom:1px solid var(--line-inv)}
    header.open .nav-links a{display:block;padding:13px 12px;font-size:16px;border-radius:8px;transition:background .15s}
    header.open .nav-links a:not(.nav-cta):active,
    header.open .nav-links a:not(.nav-cta):hover{background:rgba(255,255,255,.08)}
    header.open .nav-links .nav-cta{align-self:flex-start;margin-top:8px;padding:12px 22px}
  }

  /* ---------- clinic page: gallery / access / placeholders ---------- */

  /* ---------- treatment menu: single card + note ---------- */

  /* ---------- column list ---------- */
  .article-list{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
  .art-card{display:block;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--paper);transition:transform .3s,box-shadow .3s}
  .art-card:hover{transform:translateY(-4px);box-shadow:0 20px 44px -22px rgba(21,33,29,.4)}
  .art-thumb{aspect-ratio:16/9;background:var(--paper-2);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;letter-spacing:.1em}
  .art-card .art-meta{display:flex;align-items:center;gap:10px;padding:18px 20px 0}
  .art-card h3{font-size:17px;line-height:1.6;padding:10px 20px 22px;margin:0}
  .art-meta .cat{display:inline-block;background:var(--accent);color:#fff;font-size:11.5px;font-weight:700;padding:4px 12px;border-radius:100px;letter-spacing:.04em}
  .art-meta .d{color:var(--muted);font-size:12.5px}
  @media(max-width:820px){.article-list{grid-template-columns:1fr 1fr}}
  @media(max-width:520px){.article-list{grid-template-columns:1fr}}

  .article-table{width:100%;border-collapse:collapse;margin:0 0 26px;font-size:14.5px}
  .article-table th,.article-table td{border:1px solid var(--line);padding:12px 14px;text-align:left;vertical-align:top;line-height:1.7}
  .article-table th{background:var(--pine);color:var(--text-inv);font-weight:500;font-family:var(--disp)}
  .article-table tbody tr:nth-child(even) td{background:var(--paper-2)}
  .article-cta{text-align:center;background:var(--ink);border-radius:10px;padding:40px 30px;margin:48px 0}
  .article-cta p{color:var(--text-inv);font-family:var(--disp);font-size:20px;margin-bottom:22px}
  .supervisor{display:grid;grid-template-columns:120px 1fr;gap:26px;align-items:start;background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:28px 30px;margin:44px 0}
  .supervisor .role{color:var(--accent);font-size:13px;letter-spacing:.08em}
  .supervisor h3{font-size:20px;margin:4px 0 16px}
  .supervisor .career{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14px;color:var(--muted);line-height:1.8}
  .supervisor .career dt{color:var(--text);font-weight:500;font-family:var(--disp);white-space:nowrap}
  .supervisor .career dd{margin:0}


  @media(max-width:600px){.supervisor{grid-template-columns:1fr;justify-items:center;text-align:center}.supervisor .career{justify-items:center}}

  /* ---------- article images (shared) ---------- */
  .supervisor img{width:120px;height:120px;border-radius:50%;object-fit:cover;display:block}
  .supervisor h3 img{width:auto;height:20px;border-radius:0;object-fit:contain;display:inline-block}
  .art-thumb img{width:100%;height:100%;object-fit:cover;display:block}

  /* ---------- section "more" link ---------- */
  .more-link{text-align:center;margin-top:36px}
  .more-link a{display:inline-flex;align-items:center;gap:8px;color:var(--bronze);font-weight:700;font-size:15px;
    border:1px solid var(--bronze);border-radius:100px;padding:13px 32px;transition:all .2s}
  .more-link a:hover{background:var(--bronze);color:#fff}

  /* ---------- clinic gallery figures (with caption) ---------- */
  /* ---------- route photos (step-by-step with images) ---------- */

  /* ---------- carousel (route photos, many images) ---------- */

  /* mobile section rhythm : reduce large vertical whitespace on small screens */
  @media(max-width:820px){ section{padding:64px 0} .sec-head{margin-bottom:40px} }
  @media(max-width:560px){ section{padding:44px 0} .sec-head{margin-bottom:26px} }

  /* ---- digest top (lead + cards) ---- */
  .btn-outline{background:transparent;border-color:var(--accent);color:var(--accent)}
  .btn-outline:hover{background:var(--accent);color:#fff}
  .digest-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .digest-card{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:24px 20px;color:var(--text);transition:transform .18s,box-shadow .18s,border-color .18s}
  .digest-card:hover{border-color:var(--accent);box-shadow:0 12px 28px -16px rgba(20,26,68,.45);transform:translateY(-2px)}
  .digest-card .dc-h{font-family:var(--disp);font-size:18px;font-weight:700;color:var(--accent)}
  .digest-card p{font-size:13.5px;color:var(--muted);line-height:1.85;flex:1;margin:0}
  .digest-card .dc-more{font-size:13px;font-weight:700;color:var(--bronze)}
  @media(max-width:820px){.digest-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:520px){.digest-grid{grid-template-columns:1fr}}

  /* symptom/long-form prose block */

  /* symptom page inline photo */

/* --- HTMLサイトマップ（/sitemap/） --- */