@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap');

  /* ===== アンプレシティ公式デザインシステム ===== */
  :root{
    --navy:    #0F172A;   /* メイン文字・プライマリボタン */
    --blue:    #8EC5F7;   /* セカンダリ（＝永野ヨウの色） */
    --blue-bg: #EAF4FE;   /* 水色の薄い背景 */
    --yellow:  #FFC83D;   /* アクセント */
    --gray-bg: #F2F4F7;   /* ページ背景 */
    --ink:     #334155;   /* 本文 */
    --ink-sub: #475569;   /* 補足文字 */
    --soft:    #94A3B8;   /* 控えめ文字 */
    --line:    #E2E8F0;   /* 罫線 */
    --white:   #FFFFFF;
    --blue-dk: #3B82C4;
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  body{
    background:var(--gray-bg);
    color:var(--ink);
    font-family:'Noto Sans JP',sans-serif;
    line-height:1.9;
    -webkit-font-smoothing:antialiased;
  }
  .lp{max-width:640px; margin:0 auto; background:var(--white);}
  h1,h2,h3,.serif{font-family:'Noto Serif JP',serif;}

  .pr-tag{text-align:center; font-size:12px; color:var(--soft); padding:16px 0 4px;}
  .pr-tag span{border:1px solid var(--line); border-radius:4px; padding:2px 8px;}

  /* ヒーロー */
  .hero{padding:36px 28px 44px; background:linear-gradient(180deg, var(--blue-bg) 0%, var(--white) 100%); text-align:center;}
  .hero .catch{font-size:14px; color:var(--blue-dk); font-weight:500; letter-spacing:.08em;}
  .hero h1{font-size:clamp(28px,7vw,38px); font-weight:700; color:var(--navy); line-height:1.5; margin:14px 0; letter-spacing:.02em;}
  .hero .by{font-size:13px; color:var(--ink-sub); margin-top:16px;}

  /* 漫画コマ */
  .panels{padding:8px 24px 0;}
  /* スクロールで見えたときにふわっと表示。初期は少し下＆透明 */
  .panel{margin:0 auto 40px;}
  .panel.reveal{opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s ease;}
  .panel.reveal.is-visible{opacity:1; transform:translateY(0);}
  .panel img{display:block; width:100%; height:auto; border-radius:12px; background:var(--gray-bg); box-shadow:0 6px 20px rgba(15,23,42,.08);}
  .placeholder{aspect-ratio:3/4; border:2px dashed var(--line); border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--soft); background:var(--gray-bg); text-align:center; padding:20px;}
  .placeholder b{font-size:28px; color:var(--blue); font-family:'Noto Serif JP',serif;}
  .placeholder small{font-size:12px;}
  /* アニメーションを好まない設定の人には動きを出さない（アクセシビリティ配慮） */
  @media (prefers-reduced-motion: reduce){
    .panel.reveal{opacity:1; transform:none; transition:none;}
  }

  /* 略歴 */
  .profile{margin:8px 24px 40px; padding:28px 24px; background:var(--blue-bg); border-radius:16px;}
  .profile .head{display:flex; align-items:center; gap:16px; margin-bottom:18px;}
  .profile .avatar{width:72px; height:72px; border-radius:50%; flex-shrink:0; object-fit:cover; border:3px solid var(--white); box-shadow:0 4px 12px rgba(15,23,42,.1); background:var(--blue);}
  .profile .who .name{font-family:'Noto Serif JP',serif; font-size:19px; font-weight:600; color:var(--navy);}
  .profile .who .role{font-size:13px; color:var(--ink-sub); margin-top:2px;}
  .profile .bio{font-size:14px; color:var(--ink); line-height:1.95;}
  .profile .bio b{color:var(--navy); font-weight:700;}
  .badges{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;}
  .badge{font-size:12px; background:var(--white); color:var(--ink-sub); border-radius:20px; padding:5px 12px; border:1px solid var(--line);}
  .badge b{color:var(--blue-dk);}

  /* ベネフィット */
  .benefit{padding:40px 24px; background:var(--white);}
  .benefit > h2{text-align:center; font-size:22px; font-weight:700; color:var(--navy); margin-bottom:6px; line-height:1.5;}
  .benefit > .lead{text-align:center; font-size:14px; color:var(--ink-sub); margin-bottom:28px;}
  .ba-card{border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-bottom:14px;}
  .ba-before{background:var(--gray-bg); padding:14px 18px 14px 46px; font-size:14px; color:var(--ink-sub); position:relative;}
  .ba-before::before{content:"今"; position:absolute; left:16px; top:14px; font-size:12px; font-weight:700; color:var(--soft); border:1px solid var(--line); border-radius:50%; width:22px; height:22px; display:flex; align-items:center; justify-content:center; background:var(--white);}
  .ba-arrow{text-align:center; font-size:16px; color:var(--yellow); background:var(--gray-bg); padding-bottom:8px; line-height:.6;}
  .ba-after{background:var(--blue-bg); padding:16px 18px 16px 46px; font-size:15px; color:var(--navy); font-weight:500; position:relative;}
  .ba-after::before{content:"→"; position:absolute; left:15px; top:15px; font-size:13px; font-weight:700; color:var(--white); border-radius:50%; width:22px; height:22px; display:flex; align-items:center; justify-content:center; background:var(--blue-dk);}

  /* このセッションの先にあるもの */
  .about{margin:0 24px 24px; padding:26px; border-radius:14px; background:var(--gray-bg); border:1px solid var(--line);}
  .about h2{font-size:17px; font-weight:600; margin-bottom:12px; text-align:center; color:var(--navy);}
  .about p{font-size:14px; color:var(--ink-sub); line-height:1.95;}

  /* CTA */
  .cta{margin:0 24px; padding:40px 28px; text-align:center; background:var(--blue-bg); border-radius:16px;}
  .cta .msg{font-family:'Noto Serif JP',serif; font-size:clamp(19px,5vw,23px); font-weight:600; color:var(--navy); line-height:1.7; margin-bottom:6px; white-space:pre-line;}
  .cta .sub{font-size:14px; color:var(--ink-sub); margin:16px 0 28px; white-space:pre-line;}
  .btn{display:inline-flex; align-items:center; gap:10px; background:linear-gradient(135deg, #FFD24D 0%, #F5A623 100%); color:var(--navy); text-decoration:none; font-size:16px; font-weight:700; padding:18px 34px; border-radius:12px; box-shadow:0 8px 22px rgba(245,166,35,.45); transition:transform .2s ease, box-shadow .2s ease;}
  .btn:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(245,166,35,.55);}
  .btn .arw{font-size:18px;}
  .btn .small{display:block; font-size:11px; font-weight:500; opacity:.7; margin-top:3px;}

  /* Q&A */
  .qa{padding:36px 24px 8px;}
  .qa h2{font-size:18px; font-weight:600; text-align:center; margin-bottom:20px; color:var(--navy);}
  .qa-item{background:var(--gray-bg); border-radius:12px; margin-bottom:12px; overflow:hidden;}
  .qa-item summary{list-style:none; cursor:pointer; font-family:'Noto Serif JP',serif; font-size:15px; font-weight:600; color:var(--navy); padding:18px 50px 18px 22px; position:relative; line-height:1.6; user-select:none;}
  .qa-item summary::-webkit-details-marker{display:none;}
  .qa-item summary::after{content:"+"; position:absolute; right:20px; top:50%; transform:translateY(-50%); font-size:22px; font-weight:400; color:var(--blue-dk); transition:transform .25s ease;}
  .qa-item[open] summary::after{transform:translateY(-50%) rotate(45deg);}
  .qa-item .a{font-size:14px; color:var(--ink); line-height:1.95; padding:0 22px 20px; white-space:pre-line;}

  /* ===== 発信者リンク＋AI注記 ===== */
  .author-link{
    margin:8px 24px 0; padding:22px 24px; text-align:center;
    background:var(--blue-bg); border-radius:14px;
  }
  .author-link a{
    display:inline-block; color:var(--navy); font-weight:700; font-size:15px;
    text-decoration:none; border-bottom:2px solid var(--blue);
    padding-bottom:2px; transition:opacity .2s ease;
  }
  .author-link a:hover{opacity:.7;}
  .ai-note{
    margin:14px 24px 0; padding:0 8px; text-align:center;
    font-size:12px; color:var(--soft); line-height:1.8;
  }
  .ai-note a{color:var(--blue-dk); text-decoration:underline;}

  .foot{text-align:center; font-size:12px; color:var(--soft); padding:24px 24px 40px; line-height:1.9;}

  /* ============================================ */
  /* 【お客様の声】セクション                       */
  /* ============================================ */
  .voice-section{ max-width:760px; margin:0 auto; padding:56px 20px; }
  .voice-eyebrow{ text-align:center; font-size:13px; letter-spacing:.16em; color:var(--soft); font-weight:700; margin-bottom:6px; }
  .voice-title{ text-align:center; font-size:26px; line-height:1.5; color:var(--navy); font-weight:800; font-family:'Noto Serif JP',serif; margin-bottom:8px; }
  .voice-lead{ text-align:center; font-size:15px; color:var(--ink-sub); line-height:1.8; margin-bottom:36px; }
  .voice-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  @media (max-width:640px){ .voice-grid{ grid-template-columns:1fr; } }
  .voice-card{ background:var(--white); border:1px solid var(--line); border-radius:16px; padding:26px 24px 22px; position:relative; box-shadow:0 6px 20px rgba(15,23,42,.05); }
  .voice-card::before{ content:"\201C"; position:absolute; top:6px; left:18px; font-family:Georgia,serif; font-size:64px; line-height:1; color:var(--blue); opacity:.5; }
  .voice-quote{ position:relative; font-size:15.5px; line-height:2; color:var(--ink); margin:14px 0 18px; white-space:pre-line; }
  .voice-meta{ display:flex; align-items:center; border-top:1px solid var(--line); padding-top:14px; }
  .voice-name{ font-size:13px; color:var(--ink-sub); font-weight:700; position:relative; padding-left:24px; }
  .voice-name::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:14px; height:2px; background:var(--blue); }
  .voice-note{ text-align:center; font-size:12px; color:var(--soft); margin-top:26px; line-height:1.8; }

  /* ============================================ */
  /* 第1CTA：漫画直後のソフトな入口                 */
  /* ============================================ */
  .cta-soft{
    margin:4px 24px 8px;
    padding:32px 24px;
    background:linear-gradient(180deg, var(--blue-bg) 0%, var(--white) 100%);
    border-radius:16px;
    text-align:center;
  }
  .cta-soft-lead{
    font-family:'Noto Serif JP',serif;
    font-size:20px;
    font-weight:700;
    color:var(--navy);
    margin-bottom:12px;
    letter-spacing:.02em;
  }
  .cta-soft-sub{
    font-size:14.5px;
    color:var(--ink-sub);
    line-height:1.9;
    margin-bottom:22px;
  }
  .btn-soft{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:15px 30px;
    background:var(--white);
    color:var(--navy);
    border:2px solid var(--blue);
    border-radius:999px;
    font-size:16px;
    font-weight:700;
    text-decoration:none;
    box-shadow:0 4px 14px rgba(142,197,247,.35);
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .btn-soft:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(142,197,247,.5);
  }
  .btn-soft .arw{ color:var(--blue-dk); }

  /* 最終CTAの上の余白を少し広く */
  .cta-final{ margin-top:8px; }