/* ══════════════════════════════════════
   common.css — 全ページ共通スタイル
   宮崎友花 Official Website
══════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --pink:#FF4FA3; --coral:#FF6B6B; --orange:#FF9340; --yellow:#FFD740;
  --lime:#A8E63D; --teal:#00D4B4; --sky:#3DBFFF; --purple:#B06EFF;
  --white:#FFFFFF; --offwhite:#FBF9FF; --text:#1E1038; --muted:#6B5F82;
  --mid:#4A4A4A;
}
html{scroll-behavior:smooth;}
body{font-family:'Noto Sans JP',sans-serif;background:var(--offwhite);color:var(--text);overflow-x:hidden;}

/* ── NAV ── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:300;
  display:flex;align-items:center;justify-content:space-between;
  padding:0.85rem 3.5rem;
  background:rgba(255,255,255,0.95);backdrop-filter:blur(20px);
  border-bottom:4px solid transparent;
  border-image:linear-gradient(90deg,var(--pink),var(--orange),var(--yellow),var(--lime),var(--teal),var(--sky),var(--purple)) 1;
  box-shadow:0 2px 16px rgba(0,0,0,0.07);
  transition:box-shadow 0.3s;
}
.nav-logo img{height:52px;width:auto;display:block;}
.nav-links{display:flex;gap:1.4rem;list-style:none;}
.nav-links a{font-size:0.82rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color 0.2s;white-space:nowrap;}
.nav-links a:hover,.nav-links a.active{color:var(--pink);}
.nav-cta{display:flex;gap:0.7rem;}
.pill{display:inline-block;font-size:0.65rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;padding:0.5rem 1.2rem;border-radius:100px;text-decoration:none;transition:all 0.22s;white-space:nowrap;}
.pill-purple{background:var(--purple);color:#fff;box-shadow:0 3px 14px rgba(176,110,255,0.4);}
.pill-purple:hover{background:#9050e8;transform:translateY(-1px);}
.pill-pink{background:var(--pink);color:#fff;box-shadow:0 3px 14px rgba(255,79,163,0.4);}
.pill-pink:hover{background:#e8008a;transform:translateY(-1px);}

/* ── HAMBURGER ── */
.hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:40px;height:40px;background:none;border:none;cursor:pointer;padding:4px;border-radius:8px;transition:background 0.2s;z-index:400;}
.hamburger:hover{background:rgba(176,110,255,0.1);}
.hamburger span{display:block;width:24px;height:2.5px;background:var(--text);border-radius:2px;transition:transform 0.35s ease,opacity 0.25s ease;transform-origin:center;}
.hamburger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0);}
.hamburger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}
.mobile-menu{display:none;position:fixed;top:0;left:0;right:0;background:#fff;z-index:250;box-shadow:0 8px 32px rgba(0,0,0,0.12);transform:translateY(-100%);transition:transform 0.4s cubic-bezier(0.4,0,0.2,1);border-bottom:4px solid transparent;border-image:linear-gradient(90deg,var(--pink),var(--orange),var(--yellow),var(--teal),var(--sky),var(--purple)) 1;}
.mobile-menu.open{transform:translateY(0);}
.mobile-menu-inner{padding:5.5rem 2rem 2rem;display:flex;flex-direction:column;gap:0;}
.mobile-menu a{display:block;font-size:1.1rem;font-weight:700;letter-spacing:0.06em;color:var(--text);text-decoration:none;padding:1rem 0.5rem;border-bottom:1px solid rgba(0,0,0,0.06);transition:color 0.2s,padding-left 0.2s;}
.mobile-menu a:hover{color:var(--pink);padding-left:1rem;}
.mobile-menu-cta{display:flex;gap:0.8rem;margin-top:1.4rem;padding-top:0.5rem;}

/* ── PAGE HERO (共通) ── */
.page-hero{padding:8rem 4rem 4rem;}
.breadcrumb{display:flex;align-items:center;gap:0.5rem;font-size:0.72rem;font-weight:700;letter-spacing:0.1em;color:var(--muted);margin-bottom:1.2rem;text-transform:uppercase;}
.breadcrumb a{color:var(--muted);text-decoration:none;transition:color 0.2s;}
.breadcrumb-sep{color:#ccc;font-size:0.8rem;}
.page-title{font-family:'Unbounded',sans-serif;font-size:clamp(2.2rem,5vw,3.8rem);font-weight:900;letter-spacing:-0.02em;line-height:1;color:var(--text);}
.page-subtitle{font-size:0.88rem;color:var(--muted);margin-top:0.8rem;font-weight:500;}

/* ── SECTION LABELS ── */
.section-label{display:inline-block;font-size:0.62rem;font-weight:800;letter-spacing:0.2em;text-transform:uppercase;padding:0.35rem 1rem;border-radius:100px;margin-bottom:0.8rem;}
.lbl-pink  {background:rgba(255,79,163,0.15);color:var(--pink);}
.lbl-sky   {background:rgba(61,191,255,0.15);color:#0094d4;}
.lbl-teal  {background:rgba(0,212,180,0.15); color:#009e87;}
.lbl-purple{background:rgba(176,110,255,0.15);color:var(--purple);}
.lbl-orange{background:rgba(255,147,64,0.15);color:#c85000;}
.section-title{font-family:'Unbounded',sans-serif;font-size:clamp(1.8rem,3vw,2.6rem);font-weight:900;letter-spacing:-0.02em;line-height:1.1;color:var(--text);}

/* ── FOOTER ── */
footer{
  background:#1E1038;padding:2.8rem 4rem;
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:2rem;
  border-top:4px solid transparent;
  border-image:linear-gradient(90deg,var(--pink),var(--orange),var(--yellow),var(--teal),var(--sky),var(--purple)) 1;
}
.footer-logo img{height:34px;width:auto;display:block;filter:brightness(0) invert(1);opacity:0.65;}
.footer-company{text-align:center;font-size:0.6rem;letter-spacing:0.1em;color:rgba(255,255,255,0.28);line-height:2;}
.footer-company strong{color:rgba(255,255,255,0.5);display:block;margin-bottom:0.15rem;}
.footer-links{display:flex;gap:1.8rem;list-style:none;justify-content:flex-end;}
.footer-links a{font-size:0.6rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:rgba(255,255,255,0.3);text-decoration:none;transition:color 0.2s;}
.footer-links a:hover{color:var(--pink);}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .nav-links,.nav-cta{display:none;}
  .hamburger{display:flex;}
  .mobile-menu{display:block;}
  nav{padding:0.85rem 1.5rem;}
  .page-hero{padding:7rem 1.5rem 3rem;}
  footer{grid-template-columns:1fr;text-align:center;padding:2.5rem 1.5rem;gap:1.4rem;}
  .footer-logo{display:flex;justify-content:center;}
  .footer-links{justify-content:center;}
}
