/*
Theme Name: Naomi.Spring
Theme URI: https://naomi-spring.com/
Author: Naomi.Spring
Description: Naomi.Spring（伊野奈緒美）公式サイト用のカスタムテーマ。ナビ・CTA・フッターなど全ページ共通のスタイルはこのファイルに集約し、
各ページ固有の追加スタイルは各テンプレートのインラインstyle（$page_css）で補う。
Version: 1.0.0
Text Domain: naomi-spring
*/

  :root{
    --c-bg:      #FFFFFF;
    --c-surface: #FFFFFF;
    --c-surface2:#F1ECE0;
    --c-text:    #3A3A38;
    --c-text-soft:#6B6A63;
    --c-primary: #154060;
    --c-primary-ink:#FFFFFF;
    --c-sage:    #8A9A82;
    --c-terracotta:#F2B5A6;
    --c-border:  #E4E0D6;
  }
  :root{
    --bg: var(--c-bg); --surface: var(--c-surface); --surface2: var(--c-surface2);
    --text: var(--c-text); --text-soft: var(--c-text-soft);
    --primary: var(--c-primary); --primary-ink: var(--c-primary-ink);
    --accent2: var(--c-sage); --accent3: var(--c-terracotta); --border: var(--c-border);
    --energy: var(--c-terracotta);
  }

  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:"Noto Sans JP", "Hiragino Sans", sans-serif;
    font-size:16px;
    -webkit-font-smoothing:antialiased;
    padding-inline:0;
    padding-bottom:64px;
  }
  h1,h2,h3{
    font-family:"Zen Old Mincho","Hiragino Mincho ProN",serif;
    font-weight:600;
    text-wrap:balance;
    margin:0;
  }
  .eyebrow{
    font-family:"Cormorant Garamond", serif;
    font-style:italic;
    font-size:15px;
    letter-spacing:.14em;
    color:var(--primary);
    text-transform:uppercase;
  }
  a{color:inherit;}
  img{max-width:100%;}

  /* ---- ナビ ---- */
  .sticky-head{
    position:sticky; top:0; z-index:50;
    background:var(--bg);
    border-bottom:1px solid var(--border);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px clamp(16px,5vw,64px);
    max-width:1280px; margin:0 auto;
  }
  .logo{
    font-family:"Cormorant Garamond",serif;
    font-size:22px;
    letter-spacing:.03em;
    text-decoration:none;
    color:var(--text);
  }
  .logo b{font-weight:600;}
  .nav-right{display:flex; align-items:center; gap:28px;}
  .navlinks{display:flex; gap:28px; font-size:14px; list-style:none; padding:0; margin:0;}
  .navlinks > li{position:relative; padding:8px 0; cursor:default;}
  .navlinks > li.current{color:var(--primary); font-weight:600;}
  .navlinks a{text-decoration:none; color:inherit;}
  .navlinks .care{font-size:10px; margin-left:3px; color:var(--text-soft); display:inline-block; transition:transform .2s ease;}
  .navlinks li:hover .care{transform:rotateX(180deg);}
  .dropdown{
    list-style:none; margin:0; padding:8px;
    position:absolute; top:100%; left:50%; transform:translateX(-50%);
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:4px;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    min-width:180px;
    display:grid; gap:2px;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .18s ease;
    z-index:40;
  }
  .navlinks li:hover .dropdown,
  .navlinks li:focus-within .dropdown{ opacity:1; visibility:visible; pointer-events:auto; }
  .dropdown li{
    padding:9px 12px; border-radius:3px;
    font-size:13px; color:var(--text-soft);
    white-space:nowrap;
  }
  .dropdown li:hover{background:var(--surface2); color:var(--text);}
  .nav-cta{font-size:13px; padding:10px 22px;}
  @media (max-width:760px){ .navlinks, .nav-cta{display:none;} }

  .btn{
    display:inline-block;
    background:var(--primary);
    color:var(--primary-ink);
    font-size:14px; font-weight:500;
    padding:14px 30px;
    border-radius:4px;
    text-decoration:none;
    letter-spacing:.02em;
    transition:opacity .2s ease;
  }
  .btn:hover{opacity:.85;}

  section{max-width:1280px; margin:0 auto; padding:0 clamp(16px,5vw,64px);}

  /* ---- ページヒーロー ---- */
  .page-hero-band{
    max-width:none; margin:0; padding:0;
    background:var(--surface2);
  }
  .page-hero{
    max-width:820px; margin:0 auto; text-align:center;
    padding:clamp(32px,6vw,48px) clamp(16px,5vw,64px) clamp(56px,8vw,84px);
    display:grid; gap:20px; justify-items:center;
  }
  .breadcrumb-bar{ background:var(--bg); }
  .breadcrumb{
    max-width:1280px; margin:0 auto;
    padding:14px clamp(16px,5vw,64px);
    font-size:12px; color:var(--text-soft);
    display:flex; gap:6px; align-items:center;
  }
  .breadcrumb a{color:var(--text-soft); text-decoration:none;}
  .breadcrumb a:hover{color:var(--primary);}
  .page-hero h1{
    font-size:clamp(30px,4.6vw,46px);
    line-height:1.55;
    color:var(--text);
    margin-top:6px;
  }
  .page-hero .lead{
    max-width:56ch;
    font-size:16.5px; line-height:2;
    color:var(--text-soft);
    margin:0;
  }

  .section-head{
    margin-bottom:32px; text-align:center;
    display:grid; justify-items:center; gap:8px;
  }
  .section-head h2{font-size:clamp(24px,3.2vw,32px);}
  .section-head.left{text-align:left; justify-items:start;}

  /* ---- CTA ---- */
  .cta-band{
    position:relative;
    overflow:hidden;
    margin-top:20px;
    background:linear-gradient(135deg,
      color-mix(in srgb, var(--surface2) 100%, white) 0%,
      var(--surface2) 55%,
      color-mix(in srgb, var(--surface2) 90%, black) 100%);
    color:var(--text);
  }
  .cta-band::before{
    content:"";
    position:absolute; inset:0;
    background:
      radial-gradient(120% 140% at 88% -10%, color-mix(in srgb, var(--energy) 30%, transparent), transparent 60%),
      radial-gradient(90% 120% at -8% 118%, color-mix(in srgb, var(--accent2) 25%, transparent), transparent 55%);
    opacity:.65;
  }
  .cta-band::after{
    content:"Naomi.Spring";
    position:absolute; right:clamp(12px,4vw,56px); bottom:-0.15em;
    font-family:"Allura",cursive;
    font-size:clamp(52px,10vw,132px);
    color:var(--primary);
    opacity:.08;
    white-space:nowrap;
    pointer-events:none;
  }
  .cta-inner{
    position:relative; z-index:1;
    max-width:1280px; margin:0 auto;
    padding:clamp(44px,7vw,76px) clamp(16px,5vw,64px);
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px;
  }
  .cta-inner .eyebrow{color:var(--primary);}
  .cta-inner h2{color:var(--text); font-size:clamp(24px,3vw,32px); margin-top:10px;}
  .cta-inner .btn{background:var(--primary); color:var(--primary-ink);}
  .cta-genres{font-size:13px; color:var(--text-soft); opacity:1; margin-top:10px;}
  .cta-actions{display:flex; gap:14px; flex-wrap:wrap; align-items:center;}
  .cta-secondary{
    display:inline-block;
    border:1px solid color-mix(in srgb, var(--text) 35%, transparent);
    color:var(--text);
    font-size:14px; font-weight:500;
    padding:13px 28px;
    border-radius:4px;
    text-decoration:none;
    letter-spacing:.02em;
    transition:background .2s ease, border-color .2s ease;
  }
  .cta-secondary:hover{
    background:color-mix(in srgb, var(--text) 8%, transparent);
    border-color:color-mix(in srgb, var(--text) 55%, transparent);
  }

  footer{
    padding:26px clamp(16px,5vw,64px) 44px;
    max-width:1280px; margin:0 auto;
    font-size:12px; color:var(--text-soft);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  }

  /* ---- フェードイン ---- */
  .reveal{opacity:0; transform:translateY(16px); transition:opacity .8s ease, transform .8s ease;}
  .reveal.in-view{opacity:1; transform:translateY(0);}