/* ============================================
   HIKARU SNS Marketing Studio — 2026 デザイン
   共通スタイル（全ページ共有）
   ============================================ */

:root{
  --ink:#2A2A33; --ink-soft:#4A4A56; --mute:#7E7E8A;
  --green:#4E9E73; --green-deep:#3D8560; --green-soft:#EAF6EF;
  --yellow:#F5E85C; --yellow-soft:#FFFBE2;
  --coral:#FF7D93; --coral-soft:#FFF3F5;
  --sky:#4FC1D2; --sky-soft:#EDF9FB;
  --purple:#9B8BF0; --purple-soft:#F3F0FF;
  --bg:#FFFFFF; --line:#EDEDF2;
  --jp:'Zen Kaku Gothic New',sans-serif;
  --en:'Poppins',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--jp);color:var(--ink);background:var(--bg);line-height:1.95;font-size:15px;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}

/* ── レイアウト ── */
.container{max-width:1080px;margin:0 auto;padding:0 24px;}
.narrow{max-width:800px;margin:0 auto;padding:0 24px;}
section{padding:110px 0;position:relative;}
.bg-green{background:var(--green-soft);}
.bg-coral{background:var(--coral-soft);}
.bg-sky{background:var(--sky-soft);}
.bg-yellow{background:var(--yellow-soft);}
.bg-purple{background:var(--purple-soft);}

/* ── 見出し ── */
.eyebrow{font-family:var(--en);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;display:inline-block;margin-bottom:14px;}
.eyebrow.g{color:var(--green);} .eyebrow.c{color:var(--coral);}
.eyebrow.s{color:var(--sky);} .eyebrow.p{color:var(--purple);}
h1{font-size:clamp(30px,5vw,50px);font-weight:900;line-height:1.42;}
h2{font-size:clamp(25px,3.6vw,36px);font-weight:900;line-height:1.55;letter-spacing:.01em;margin-bottom:20px;}
h1,h2,h3,.faq-q{text-wrap:balance;}
p,li,.lead{text-wrap:pretty;}
h3{font-size:19px;font-weight:700;line-height:1.6;margin-bottom:12px;}
p{color:var(--ink-soft);}
.sec-head{text-align:center;margin-bottom:60px;}
.sec-head p{color:var(--mute);font-size:14.5px;}
.mark{background:linear-gradient(transparent 60%,var(--yellow) 60%);padding:0 .08em;white-space:nowrap;}
.mark-c{background:linear-gradient(transparent 60%,#FFD9E1 60%);padding:0 .08em;}

/* スマホだけで改行する */
.br-sp{display:none;}
@media (max-width:860px){.br-sp{display:inline;}}

/* ── 装飾 ── */
.blob{border-radius:58% 42% 47% 53% / 45% 52% 48% 55%;overflow:hidden;}
.blob2{border-radius:44% 56% 62% 38% / 55% 44% 56% 45%;overflow:hidden;}
.deco{position:absolute;border-radius:50%;filter:blur(2px);opacity:.55;pointer-events:none;z-index:0;}
.star{position:absolute;pointer-events:none;z-index:1;}

/* ── ボタン ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;padding:17px 34px;font-size:14.5px;font-weight:700;letter-spacing:.02em;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s,color .2s;}
.btn svg{width:17px;height:17px;stroke-width:2;flex:0 0 auto;}
.btn-green{background:var(--green);color:#fff;box-shadow:0 8px 20px rgba(78,158,115,.28);}
.btn-green:hover{background:var(--green-deep);transform:translateY(-2px);}
.btn-yellow{background:var(--yellow);color:var(--ink);box-shadow:0 8px 20px rgba(214,200,60,.3);}
.btn-yellow:hover{transform:translateY(-2px);}
.btn-dark{background:var(--ink);color:#fff;}
.btn-dark:hover{transform:translateY(-2px);}
.btn-ghost{color:var(--ink);border:2px solid var(--line);background:#fff;}
.btn-ghost:hover{border-color:var(--green);color:var(--green);}
.btn-sm{padding:13px 26px;font-size:13.5px;}

/* ── ヘッダー ── */
header{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);}
.header-inner{max-width:1140px;margin:0 auto;padding:0 24px;height:70px;display:flex;align-items:center;justify-content:space-between;}
.logo{font-family:var(--en);font-size:19px;font-weight:700;letter-spacing:.04em;line-height:1.2;display:inline-flex;flex-direction:column;justify-content:center;min-height:46px;}
.logo i{font-style:normal;color:var(--green);}
.logo span{display:block;font-size:8.5px;letter-spacing:.16em;color:var(--mute);font-weight:500;}
nav ul{display:flex;gap:30px;align-items:center;}
nav a{font-size:13.5px;font-weight:500;transition:color .25s;display:inline-flex;align-items:center;min-height:44px;}
nav a:hover{color:var(--green);}
.nav-cta{background:var(--yellow);border-radius:999px;padding:11px 22px;font-size:13.5px;font-weight:700;transition:transform .2s;}
.nav-cta:hover{transform:translateY(-1px);color:var(--ink);}
.menu-btn{display:none;background:none;border:0;cursor:pointer;padding:11px;width:46px;height:46px;align-items:center;justify-content:center;flex-direction:column;}
.menu-btn span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px;transition:.3s;}
.menu-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-btn.open span:nth-child(2){opacity:0;}
.menu-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-nav{display:none;position:fixed;top:70px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);z-index:59;padding:10px 24px 22px;box-shadow:0 12px 24px rgba(0,0,0,.06);}
.mobile-nav.open{display:block;}
.mobile-nav a{display:block;padding:13px 4px;font-size:15px;font-weight:700;border-bottom:1px solid var(--line);}
.mobile-nav a:last-child{border-bottom:0;}

/* ── FAQ ── */
.faq-item{background:#fff;border-radius:18px;margin-bottom:14px;overflow:hidden;}
.faq-q{display:flex;gap:14px;align-items:flex-start;padding:24px 28px;cursor:pointer;font-size:15px;font-weight:700;}
.faq-q::before{content:'Q';font-family:var(--en);color:var(--sky);font-weight:700;flex:0 0 auto;}
.faq-q::after{content:'';flex:0 0 auto;margin-left:auto;width:10px;height:10px;border-right:2.5px solid var(--mute);border-bottom:2.5px solid var(--mute);transform:rotate(45deg);transition:transform .3s;margin-top:6px;}
.faq-item.open .faq-q::after{transform:rotate(-135deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.faq-a div{padding:0 28px 26px 56px;font-size:14px;line-height:2.05;color:var(--ink-soft);}

/* ── CTA帯 ── */
.cta{background:var(--yellow);text-align:center;overflow:hidden;}
.cta h2{font-size:clamp(26px,4.2vw,40px);}
.cta p{color:var(--ink-soft);font-size:15px;margin-bottom:34px;}
.cta-sub{margin-top:24px;font-size:13px;color:#7A7040;}
.cta-sub a{border-bottom:1.5px solid rgba(42,42,51,.3);font-weight:700;}

/* ── フッター ── */
footer{background:var(--ink);color:#fff;padding:64px 0 30px;}
.footer-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:44px;}
footer .logo{color:#fff;}
footer .logo i{color:var(--yellow);}
footer .logo span{color:rgba(255,255,255,.5);}
.footer-links{display:flex;gap:28px;flex-wrap:wrap;}
.footer-links a{font-size:13px;color:rgba(255,255,255,.72);transition:color .25s;display:inline-flex;align-items:center;min-height:44px;}
.footer-links a:hover{color:var(--yellow);}
.copy{font-family:var(--en);font-size:11.5px;color:rgba(255,255,255,.4);border-top:1px solid rgba(255,255,255,.12);padding-top:22px;letter-spacing:.06em;}

/* ── フェードイン ── */
.fade{opacity:0;transform:translateY(18px);transition:opacity .75s ease,transform .75s ease;}
.fade.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.fade{opacity:1;transform:none;}}

/* ── スマホ ── */
@media (max-width:860px){
  section{padding:76px 0;}
  nav{display:none;}
  .menu-btn{display:flex;}
  .sec-head{margin-bottom:44px;}
  .faq-q{padding:20px;font-size:14.5px;}
  .faq-a div{padding:0 20px 22px 40px;}
  .deco{display:none;}
  .footer-links{gap:6px 20px;}
}