/* ===== FAVTOWN 共通ベース (全LP共有) ===== */

/* ===== Design Tokens (FAVTOWN Design System) ===== */
:root{
  /* カラートークン */
  --primary:        #FDE04B;
  --primary-light:  #FFF9D7;
  --secondary:      #FC5527;
  --secondary-light:#FFEAE5;
  --accent:         #13C285;
  --accent-light:   #EDFFF8;
  --attention:      #FF3A4D;
  --attention-light:#FFDCDF;
  --black:          #000000;
  --dark-gray:      #777777;
  --middle-gray:    #DDE4E7;
  --light-gray:     #F2F4F6;
  --white:          #FFFFFF;

  /* セマンティック */
  --bg:        var(--white);
  --bg-soft:   var(--light-gray);
  --ink:       var(--black);
  --muted:     var(--dark-gray);
  --line:      var(--middle-gray);

  /* hover時の濃色 */
  --primary-hover:   #fcd418;
  --accent-hover:    #0ea372;
  --secondary-hover: #e84212;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: "Mulish", "Zen Kaku Gothic New", sans-serif;
  font-weight:500;
  font-size:17px;
  background:var(--bg);
  color:var(--ink);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}

/* Material Symbols 共通 */
.material-symbols-rounded{
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  vertical-align:middle;
  line-height:1;
}

/* ===== Header ===== */
.header{
  position:sticky;top:0;z-index:50;
  background:var(--white);
  border-bottom:1px solid var(--line);
  transition:transform .3s ease;
  will-change:transform;
}
.header.is-hidden{transform:translateY(-100%)}
.header-inner{
  display:flex;align-items:center;
  padding:10px 40px;
}
.logo{
  display:inline-flex;align-items:center;
  text-decoration:none;
  margin-right:auto;
}
.logo img{
  display:block;height:44px;width:auto;
}
.nav{display:flex;gap:24px;font-size:16px;font-weight:700;color:var(--ink)}
.nav a{
  text-decoration:none;padding:6px 4px;
  white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:border-color .15s ease;
}
.nav a:hover{border-bottom-color:var(--secondary)}
.header-cta{
  margin-left:28px;
  background:var(--primary);color:var(--ink);
  padding:11px 32px;border-radius:999px;
  white-space:nowrap;
  font-size:16px;font-weight:700;
  text-decoration:none;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  transition:background .15s ease, box-shadow .15s ease;
}
.header-cta:hover{
  background:var(--primary-hover);
  box-shadow:0 4px 10px rgba(0,0,0,.10);
}

/* ===== セクション共通 ===== */
section{padding:96px 24px}
.container{max-width:1120px;margin:0 auto}
.eyebrow{
  font-family:"Mulish",sans-serif;
  color:var(--secondary);font-size:13px;font-weight:700;
  letter-spacing:.18em;text-align:center;margin-bottom:10px;
}
h1.section-title,
h2.section-title{
  font-weight:700;
  font-size:38px;text-align:center;margin:0 0 10px;
  color:var(--ink);letter-spacing:.02em;line-height:1.4;
}
.section-title .accent{color:var(--secondary)}
.section-title .name-sub{
  font-size:0.55em;
  font-weight:700;
  color:var(--ink);
  letter-spacing:0;
  margin:0 2px;
}
.section-sub{text-align:center;color:var(--ink);margin:0 0 56px;font-size:16px}
.sp-br{display:none}

/* ===== 共通CTAボタン ===== */
.cta-primary{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--primary);color:var(--ink);text-decoration:none;
  padding:20px 36px;border-radius:999px;
  font-weight:700;font-size:17px;
  box-shadow:0 6px 16px rgba(0,0,0,.10);
  transition:background .15s ease, box-shadow .15s ease;
}
.cta-primary:hover{
  background:var(--primary-hover);
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}
.cta-primary .material-symbols-rounded{font-size:22px}

/* ===== Footer ===== */
.footer{
  background:var(--ink);color:rgba(255,255,255,.6);padding:64px 24px 28px;
  border-top:1px solid rgba(255,255,255,.08);
}
.footer-inner{
  max-width:1120px;margin:0 auto;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;
}
.footer .footer-heading{
  color:var(--white);font-size:14px;margin:0 0 18px;
  font-family:"Mulish",sans-serif;font-weight:700;letter-spacing:.08em;
}
.footer ul{list-style:none;padding:0;margin:0;font-size:14px}
.footer li{padding:6px 0;white-space:nowrap}
.footer a{
  text-decoration:none;color:inherit;
  transition:color .15s ease;
}
.footer a:hover{color:var(--white)}
.footer-brand p{margin:0 0 4px;font-size:16px;line-height:1.7;font-weight:700;color:rgba(255,255,255,.85)}
.footer-logo{display:block;height:80px;width:auto;margin-bottom:24px}
.footer .copy{
  max-width:1120px;margin:44px auto 0;padding-top:28px;
  border-top:1px solid rgba(255,255,255,.1);
  font-family:"Mulish",sans-serif;
  font-size:13px;text-align:center;letter-spacing:.04em;
}

/* ===== Responsive (共通: ヘッダー/フッター/共通ユーティリティ) ===== */
@media (max-width:840px){
  .sp-br{display:inline}
  .pc-br{display:none}
  body{font-size:15px}
  .section-sub{font-size:13px;margin-bottom:28px}
  section{padding:56px 16px}
  h1.section-title,h2.section-title{font-size:28px}
  .nav{display:none}
  .header-inner{padding:8px 16px}
  .logo img{height:32px}
  .header-cta{padding:8px 18px;font-size:13px}
  .footer{padding:48px 16px 24px}
  .footer-inner{grid-template-columns:repeat(2,1fr);gap:24px 16px}
  .footer-brand{grid-column:1/-1}
  .footer .footer-heading{font-size:12px;margin-bottom:12px}
  .footer ul{font-size:12px}
  .footer li{padding:4px 0}
  .footer-brand p{font-size:13px}
  .footer-logo{height:56px;margin:0 auto 16px}
  .footer-brand{text-align:center}
  .footer .copy{font-size:11px;margin-top:32px;padding-top:20px}
}