/*
Theme Name: 長唄三味線教室 弥三音
Theme URI: 
Author: 
Description: 杵屋弥三音 長唄三味線教室のオリジナルテーマ（1ページ構成）
Version: 1.0
*/

  :root{
    --bg: #12141B;
    --bg-deep: #0A0B10;
    --panel: #181B24;
    --ivory: #EFE8D8;
    --ivory-soft: #A79F8C;
    --gold: #C4A15C;
    --gold-dim: rgba(196,161,92,0.28);
    --seal: #B23B45;
    --seal-glow: rgba(178,59,69,0.35);
  }

  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; }

  body{
    background:var(--bg);
    color:var(--ivory);
    font-family:'Noto Sans JP', sans-serif;
    font-weight:300;
    line-height:1.95;
    letter-spacing:0.02em;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  .mincho{ font-family:'Shippori Mincho', serif; }

  a{ color:inherit; text-decoration:none; }

  /* ---------- ambient texture ---------- */
  body::before{
    content:"";
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(ellipse 60% 40% at 15% 0%, rgba(196,161,92,0.07), transparent 60%),
      radial-gradient(ellipse 50% 50% at 100% 30%, rgba(178,59,69,0.06), transparent 60%),
      radial-gradient(ellipse 70% 60% at 50% 100%, rgba(196,161,92,0.04), transparent 60%);
  }
  body::after{
    content:"";
    position:fixed; inset:0; z-index:0; pointer-events:none;
    opacity:0.035;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* ---------- header ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:24px 6vw;
    background:rgba(18,20,27,0.72);
    backdrop-filter:blur(10px);
    border-bottom:1px solid transparent;
    transition:border-color .4s, background .4s;
  }
  header.scrolled{ border-bottom-color:var(--gold-dim); background:rgba(10,11,16,0.85); }

  .brand{
    display:flex; align-items:center; gap:12px;
    font-family:'Shippori Mincho', serif;
    font-size:15px; letter-spacing:0.14em; color:var(--ivory);
  }
  .brand .seal-mini{
    width:24px; height:24px;
    border-radius:2px;
    overflow:hidden;
    filter:drop-shadow(0 0 6px var(--seal-glow));
  }
  .seal-mini img{
    display:block;
    width:100%; height:100%;
    object-fit:contain;
  }

  nav{ display:flex; gap:40px; font-size:12.5px; letter-spacing:0.1em; }
  nav a{ position:relative; padding-bottom:5px; color:var(--ivory-soft); transition:color .3s; }
  nav a::after{
    content:""; position:absolute; left:0; bottom:0;
    width:0; height:1px; background:var(--gold);
    transition:width .35s cubic-bezier(.16,1,.3,1);
  }
  nav a:hover{ color:var(--ivory); }
  nav a:hover::after{ width:100%; }

  /* ---------- hero ---------- */
  .hero{
    min-height:100svh;
    display:flex; align-items:center; justify-content:center;
    position:relative;
    padding:140px 6vw 80px;
    overflow:hidden;
  }

  .strings{
    position:absolute; inset:0; z-index:0;
    width:100%; height:100%;
  }
  .strings path{
    fill:none;
    stroke:url(#stringGradient);
    stroke-linecap:round;
    stroke-dasharray:1600;
    stroke-dashoffset:1600;
    animation:draw 2.6s cubic-bezier(.16,1,.3,1) forwards;
    filter:drop-shadow(0 0 6px rgba(196,161,92,0.25));
  }
  .strings path:nth-child(1){ stroke-width:1; animation-delay:.15s; opacity:.55; }
  .strings path:nth-child(2){ stroke-width:1.6; animation-delay:.4s; opacity:.75; }
  .strings path:nth-child(3){ stroke-width:2.4; animation-delay:.65s; opacity:.9; }
  @keyframes draw{ to{ stroke-dashoffset:0; } }

  .hero-inner{
    display:flex; align-items:center; gap:7vw;
    max-width:1140px; width:100%;
    position:relative; z-index:2;
  }

  .hero-scroll{
    writing-mode:vertical-rl;
    text-orientation:upright;
    font-family:'Shippori Mincho', serif;
    font-weight:700;
    font-size:clamp(42px, 7.2vw, 88px);
    letter-spacing:0.2em;
    line-height:1.1;
    background:linear-gradient(180deg, #F4EBD0 0%, #C4A15C 55%, #8A6C34 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    opacity:0;
    transform:translateY(24px);
    animation:riseIn 1.2s cubic-bezier(.16,1,.3,1) .5s forwards;
  }

  .hero-text{
    flex:1;
    opacity:0;
    transform:translateY(20px);
    animation:riseIn 1.2s cubic-bezier(.16,1,.3,1) .9s forwards;
  }

  .hero-eyebrow{
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    font-size:17px; letter-spacing:0.15em; color:var(--gold);
    margin-bottom:24px;
    display:flex; align-items:center; gap:12px;
  }
  .hero-eyebrow::before{ content:""; width:32px; height:1px; background:var(--gold); }

  .hero-text h1{
    font-family:'Shippori Mincho', serif;
    font-weight:700;
    font-size:clamp(31px, 4vw, 48px);
    line-height:1.6;
    margin-bottom:28px;
    color:var(--ivory);
  }
  .hero-text h1 .line-small{
    display:block;
    font-size:0.4em;
    font-weight:500;
    letter-spacing:0.12em;
    color:var(--gold);
    margin-bottom:14px;
  }
  .hero-text h1 .line-name{
    display:block;
    font-size:0.62em;
    font-weight:500;
    letter-spacing:0.08em;
    color:var(--ivory-soft);
    margin-top:16px;
  }

  .hero-text p{
    color:var(--ivory-soft);
    font-size:17px;
    max-width:42ch;
    margin-bottom:38px;
  }

  .hero-meta{ display:flex; gap:30px; font-size:12.5px; letter-spacing:0.06em; color:var(--ivory-soft); }
  .hero-meta div{ padding-left:18px; border-left:1px solid var(--gold-dim); }
  .hero-meta span{ display:block; color:var(--gold); font-family:'Shippori Mincho', serif; font-size:16px; margin-bottom:4px; }

  @keyframes riseIn{ to{ opacity:1; transform:translateY(0); } }

  .hero-seal{
    position:absolute; right:6vw; bottom:64px; z-index:2;
    width:84px; height:84px;
    border-radius:4px;
    overflow:hidden;
    filter:drop-shadow(0 0 20px var(--seal-glow));
  }
  .hero-seal img{
    display:block;
    width:100%; height:100%;
    object-fit:contain;
  }

  .scroll-cue{
    position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:10px;
    font-size:10.5px; letter-spacing:.25em; color:var(--ivory-soft);
    z-index:2;
  }
  .scroll-cue .line{ width:1px; height:34px; background:linear-gradient(var(--gold), transparent); animation:pulse 2.2s ease-in-out infinite; }
  @keyframes pulse{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }

  /* ---------- sections ---------- */
  section{
    position:relative; z-index:1;
    max-width:1140px; margin:0 auto;
    padding:130px 6vw;
    border-bottom:1px solid var(--gold-dim);
  }
  section:last-of-type{ border-bottom:none; }

  .section-head{ display:flex; align-items:baseline; gap:20px; margin-bottom:60px; }
  .section-num{
    font-family:'Shippori Mincho', serif;
    color:var(--bg);
    background:var(--gold);
    font-size:13px; width:28px; height:28px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    box-shadow:0 0 16px var(--gold-dim);
  }
  .section-head h2{
    font-family:'Shippori Mincho', serif; font-weight:700;
    font-size:clamp(23px, 2.7vw, 32px); letter-spacing:0.07em; color:var(--ivory);
  }
  .section-head .en{
    font-family:'Cormorant Garamond', serif; font-style:italic;
    font-size:14px; letter-spacing:.1em; color:var(--gold); margin-left:auto;
  }

  .reveal{ opacity:0; transform:translateY(30px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
  .reveal.in{ opacity:1; transform:translateY(0); }

  /* ---- about ---- */
  .about-grid{ display:grid; grid-template-columns:230px 1fr; gap:64px; align-items:start; }
  .about-portrait{
    width:230px; height:296px;
    background:linear-gradient(160deg, var(--panel), var(--bg-deep));
    border:1px solid var(--gold-dim);
    display:flex; align-items:center; justify-content:center;
    position:relative;
    overflow:hidden;
  }
  .about-portrait img{
    width:100%; height:100%;
    object-fit:cover;
    object-position:top center;
    filter:saturate(0.94) contrast(1.03);
  }
  .about-portrait::after{ content:""; position:absolute; inset:13px; border:1px solid rgba(239,232,216,0.35); pointer-events:none; z-index:2; }
  .about-name{ font-family:'Shippori Mincho', serif; font-size:28px; font-weight:700; letter-spacing:.08em; color:var(--ivory); }
  .about-name small{ display:block; font-family:'Noto Sans JP',sans-serif; font-weight:400; font-size:12.5px; color:var(--gold); letter-spacing:.14em; margin-top:10px; }
  .about-role{
    font-family:'Cormorant Garamond', serif; font-style:italic;
    font-size:14px; letter-spacing:.12em; color:var(--ivory-soft);
    margin-top:12px; padding-top:12px; border-top:1px solid var(--gold-dim);
    max-width:fit-content;
  }
  .about-body{ color:var(--ivory-soft); font-size:15px; max-width:62ch; margin-top:26px; }
  .about-body p + p{ margin-top:18px; }
  .about-body .credentials{
    font-size:13px; letter-spacing:.03em; line-height:2;
    padding:16px 20px;
    background:rgba(196,161,92,0.06);
    border-left:2px solid var(--gold);
  }
  .about-body .note{
    margin-top:24px; padding:16px 20px;
    background:rgba(196,161,92,0.06);
    border-left:2px solid var(--gold);
    font-size:12.5px; color:var(--ivory-soft); letter-spacing:.03em;
  }

  /* ---- lessons ---- */
  .lesson-row{ display:grid; grid-template-columns:150px 1fr; gap:36px; padding:30px 0; border-top:1px solid var(--gold-dim); }
  .lesson-row:last-child{ border-bottom:1px solid var(--gold-dim); }
  .lesson-label{ font-family:'Shippori Mincho', serif; font-size:15px; letter-spacing:.1em; color:var(--gold); }
  .lesson-detail h3{ font-size:16px; font-weight:500; margin-bottom:9px; letter-spacing:.03em; color:var(--ivory); }
  .lesson-detail p{ font-size:13.5px; color:var(--ivory-soft); max-width:52ch; }

  /* ---- access ---- */
  .access-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:64px; }
  .station-card{ padding:28px 0 28px 28px; border-left:2px solid var(--gold-dim); position:relative; }
  .station-card::before{ content:""; position:absolute; left:-5px; top:32px; width:8px; height:8px; border-radius:50%; background:var(--seal); box-shadow:0 0 12px var(--seal-glow); }
  .station-card h3{ font-family:'Shippori Mincho', serif; font-size:20px; margin-bottom:12px; letter-spacing:.05em; color:var(--ivory); }
  .station-card p{ font-size:13.5px; color:var(--ivory-soft); }
  .access-note{ font-size:13px; color:var(--ivory-soft); margin-top:38px; line-height:2.1; }

  /* ---- contact ---- */
  .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:44px; }
  .contact-card{
    border:1px solid var(--gold-dim);
    padding:36px 32px;
    background:linear-gradient(160deg, var(--panel), var(--bg));
    transition:border-color .3s, transform .3s;
  }
  .contact-card:hover{ border-color:var(--gold); transform:translateY(-3px); }
  .contact-card .kind{ font-family:'Cormorant Garamond', serif; font-style:italic; font-size:14px; letter-spacing:.15em; color:var(--gold); margin-bottom:16px; }
  .contact-card .value{ font-family:'Shippori Mincho', serif; font-size:20px; letter-spacing:.03em; color:var(--ivory); word-break:break-all; }
  .contact-card .sub{ font-size:12px; color:var(--ivory-soft); margin-top:12px; }
  .contact-hours{ margin-top:38px; font-size:13px; color:var(--ivory-soft); display:flex; gap:16px; align-items:baseline; }
  .contact-hours span{ font-family:'Shippori Mincho', serif; color:var(--gold); font-size:14px; }

  /* ---------- footer ---------- */
  footer{ padding:56px 6vw 44px; text-align:center; position:relative; z-index:1; }
  footer .seal-mini{
    width:28px; height:28px; margin:0 auto 16px;
    border-radius:2px;
    overflow:hidden;
    filter:drop-shadow(0 0 8px var(--seal-glow));
  }
  footer p{ font-family:'Cormorant Garamond', serif; font-style:italic; font-size:12.5px; letter-spacing:.12em; color:var(--ivory-soft); }

  /* ---- trial lesson ---- */
  .trial-box{
    display:flex; align-items:center; justify-content:space-between; gap:48px;
    padding:44px 48px;
    background:linear-gradient(160deg, rgba(178,59,69,0.1), var(--panel) 60%);
    border:1px solid var(--gold-dim);
    position:relative; overflow:hidden;
  }
  .trial-box::before{
    content:""; position:absolute; right:-40px; top:-40px;
    width:160px; height:160px; border-radius:50%;
    background:radial-gradient(circle, var(--seal-glow), transparent 70%);
    pointer-events:none;
  }
  .trial-copy{ position:relative; z-index:1; }
  .trial-catch{
    font-family:'Shippori Mincho', serif; font-weight:700;
    font-size:clamp(20px, 2.4vw, 27px); letter-spacing:.05em;
    color:var(--ivory); line-height:1.7;
    margin-bottom:18px;
  }
  .trial-catch .trial-price{
    display:inline-block; margin-top:6px;
    color:var(--seal); font-size:1.28em;
    text-shadow:0 0 20px var(--seal-glow);
  }
  .trial-catch .trial-price em{ font-style:normal; font-size:.62em; margin-right:2px; }
  .trial-catch small{
    display:inline-block; margin-left:10px;
    font-family:'Noto Sans JP', sans-serif; font-weight:400;
    font-size:13px; color:var(--ivory-soft); letter-spacing:.04em;
  }
  .trial-desc{ position:relative; z-index:1; font-size:13.5px; color:var(--ivory-soft); max-width:52ch; }

  .btn-trial{
    position:relative; z-index:1; flex-shrink:0;
    display:inline-flex; align-items:center; gap:12px;
    padding:18px 38px;
    font-family:'Shippori Mincho', serif; font-weight:600;
    font-size:15px; letter-spacing:.1em;
    color:var(--bg-deep);
    background:linear-gradient(135deg, #D98A6A, var(--seal));
    border-radius:2px;
    box-shadow:0 10px 30px var(--seal-glow);
    transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
    white-space:nowrap;
  }
  .btn-trial::after{ content:"→"; transition:transform .3s; }
  .btn-trial:hover{ transform:translateY(-3px); box-shadow:0 16px 36px var(--seal-glow); }
  .btn-trial:hover::after{ transform:translateX(5px); }

  /* ---- faq ---- */
  .faq-list{ display:flex; flex-direction:column; }
  .faq-item{ border-top:1px solid var(--gold-dim); padding:26px 0; }
  .faq-item:last-child{ border-bottom:1px solid var(--gold-dim); }
  .faq-item summary{
    cursor:pointer; list-style:none;
    display:flex; align-items:center; justify-content:space-between; gap:18px; width:100%;
    font-family:'Shippori Mincho', serif; font-size:16px; letter-spacing:.03em; color:var(--ivory);
  }
  .faq-item summary .faq-q-text{ flex:1; }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary::before{
    content:"Q"; flex-shrink:0;
    width:28px; height:28px; border-radius:50%;
    background:var(--gold); color:var(--bg);
    font-family:'Shippori Mincho', serif; font-size:13px;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 16px var(--gold-dim);
  }
  .faq-item summary::after{
    content:"+"; flex-shrink:0;
    font-size:20px; font-weight:300; color:var(--gold);
    transition:transform .35s cubic-bezier(.16,1,.3,1);
  }
  .faq-item[open] summary::after{ transform:rotate(135deg); }
  .faq-item p{
    display:flex; gap:18px;
    margin-top:16px; padding-left:0;
    font-size:13.5px; color:var(--ivory-soft); max-width:56ch;
  }
  .faq-item p::before{
    content:"A"; flex-shrink:0;
    width:28px; height:28px; border-radius:50%;
    border:1px solid var(--seal); color:var(--seal);
    font-family:'Shippori Mincho', serif; font-size:12px;
    display:flex; align-items:center; justify-content:center;
  }

  /* ---- contact form (Contact Form 7) ---- */
  .contact-form-wrap{ margin-top:64px; padding-top:56px; border-top:1px solid var(--gold-dim); }
  .contact-form-title{
    font-family:'Shippori Mincho', serif; font-weight:600;
    font-size:19px; letter-spacing:.05em; color:var(--ivory);
    margin-bottom:14px;
  }
  .contact-form-lead{ font-size:13px; color:var(--ivory-soft); max-width:56ch; margin-bottom:32px; }
  .contact-form-fallback{ font-size:13.5px; color:var(--ivory-soft); }

  .wpcf7-form{ max-width:640px; }
  .wpcf7-form label{
    display:block; font-size:12.5px; letter-spacing:.08em; color:var(--gold);
    margin-bottom:8px; font-family:'Shippori Mincho', serif;
  }
  .wpcf7-form p{ margin-bottom:22px; }
  .wpcf7-form .wpcf7-form-control-wrap{ display:block; }
  .wpcf7-form input.wpcf7-form-control,
  .wpcf7-form textarea.wpcf7-form-control{
    width:100%;
    background:var(--bg-deep);
    border:1px solid var(--gold-dim);
    border-radius:2px;
    padding:14px 16px;
    font-family:'Noto Sans JP', sans-serif;
    font-size:14px; color:var(--ivory);
    transition:border-color .3s, box-shadow .3s;
  }
  .wpcf7-form input.wpcf7-form-control::placeholder,
  .wpcf7-form textarea.wpcf7-form-control::placeholder{ color:var(--ivory-soft); opacity:.6; }
  .wpcf7-form input.wpcf7-form-control:focus,
  .wpcf7-form textarea.wpcf7-form-control:focus{
    outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-dim);
  }
  .wpcf7-form input[type="submit"]{
    display:inline-flex; align-items:center; gap:10px;
    padding:16px 40px;
    font-family:'Shippori Mincho', serif; font-weight:600;
    font-size:14.5px; letter-spacing:.1em;
    color:var(--bg-deep);
    background:linear-gradient(135deg, var(--gold), #8A6C34);
    border:none; border-radius:2px; cursor:pointer;
    box-shadow:0 8px 24px var(--gold-dim);
    transition:transform .3s, box-shadow .3s;
  }
  .wpcf7-form input[type="submit"]:hover{ transform:translateY(-2px); box-shadow:0 12px 28px var(--gold-dim); }
  .wpcf7-form input[type="submit"]:disabled{ opacity:.6; cursor:progress; }
  .wpcf7-spinner{ margin-left:12px; }
  .wpcf7-not-valid-tip{
    display:block; margin-top:8px;
    font-size:12px; color:var(--seal); letter-spacing:.03em;
  }
  .wpcf7-form-control-wrap .wpcf7-not-valid-tip{ margin-top:6px; }
  .wpcf7-response-output{
    margin-top:24px !important;
    padding:16px 20px !important;
    border-radius:2px;
    font-size:13px; letter-spacing:.03em;
    border:1px solid var(--gold-dim) !important;
    color:var(--ivory-soft);
  }
  .wpcf7-form.sent .wpcf7-response-output{ border-color:var(--gold) !important; color:var(--gold); }
  .wpcf7-form.failed .wpcf7-response-output,
  .wpcf7-form.aborted .wpcf7-response-output,
  .wpcf7-form.spam .wpcf7-response-output{ border-color:var(--seal) !important; color:var(--seal); }

  @media (max-width: 760px){
    nav{ display:none; }
    .hero-inner{ flex-direction:column; align-items:flex-start; gap:38px; }
    .hero-scroll{ writing-mode:horizontal-tb; font-size:clamp(36px,11vw,54px); }
    .hero-seal{ display:none; }
    .about-grid, .access-wrap, .contact-grid{ grid-template-columns:1fr; }
    .about-portrait{ width:150px; height:190px; }
    .lesson-row{ grid-template-columns:1fr; gap:9px; }
    .trial-box{ flex-direction:column; align-items:flex-start; padding:32px 28px; }
    .btn-trial{ width:100%; justify-content:center; }
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
  }