/* Social Dancing Club TEAM 提案試作 ── 英国式ボールルームの正装（深紺×金×明朝） */
:root{
  --night:#10141f; --night2:#1a2030; --panel:#222a3d;
  --gold:#c9a55c; --gold-l:#e3c98f; --ink:#f4f2ec; --sub:#a8adbd;
  --serif:'Noto Serif JP',serif; --sans:'Noto Sans JP',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--night);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.85}
a{color:var(--gold-l);text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
/* ナビ */
nav{position:sticky;top:0;background:rgba(16,20,31,.92);backdrop-filter:blur(8px);border-bottom:1px solid rgba(201,165,92,.25);z-index:10}
nav .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 24px}
.logo{font-family:var(--serif);font-size:18px;letter-spacing:.18em;color:var(--ink)}
.logo small{display:block;font-size:10px;color:var(--gold);letter-spacing:.3em}
nav ul{display:flex;gap:26px;list-style:none}
nav ul a{font-size:13px;letter-spacing:.12em;color:var(--sub)}
nav ul a:hover,nav ul a.on{color:var(--gold-l)}
/* ヒーロー */
.hero{min-height:78vh;display:flex;align-items:center;position:relative;overflow:hidden;
  background:radial-gradient(90% 130% at 80% -10%, rgba(201,165,92,.16) 0%, transparent 55%), linear-gradient(165deg,#161c2c 0%,#10141f 70%)}
.hero::after{content:'';position:absolute;inset:0;background-image:
  radial-gradient(1.6px 1.6px at 82% 30%, rgba(227,201,143,.9) 50%, transparent 51%),
  radial-gradient(1px 1px at 68% 62%, rgba(227,201,143,.5) 50%, transparent 51%),
  radial-gradient(1.3px 1.3px at 90% 72%, rgba(227,201,143,.7) 50%, transparent 51%),
  radial-gradient(1px 1px at 74% 14%, rgba(227,201,143,.6) 50%, transparent 51%);pointer-events:none}
.hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(34px,6vw,58px);line-height:1.4;letter-spacing:.06em}
.hero h1 em{font-style:normal;color:var(--gold-l)}
.hero p.lead{margin-top:22px;color:var(--sub);font-size:17px;letter-spacing:.06em}
.hero .en{color:var(--gold);font-size:12px;letter-spacing:.5em;margin-bottom:18px}
/* 共通 */
section{padding:88px 0}
.sec-en{color:var(--gold);font-size:12px;letter-spacing:.45em}
h2{font-family:var(--serif);font-size:32px;letter-spacing:.1em;margin:10px 0 18px}
.lead2{color:var(--sub);max-width:640px}
.gold-line{width:56px;height:1.5px;background:var(--gold);margin:26px 0}
/* カード */
.grid{display:grid;gap:22px}
.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--night2);border:1px solid rgba(201,165,92,.22);border-radius:4px;padding:30px 28px;transition:.25s}
.card:hover{border-color:rgba(227,201,143,.6);transform:translateY(-3px)}
.card h3{font-family:var(--serif);font-size:20px;letter-spacing:.08em;color:var(--gold-l);margin-bottom:10px}
.card p{font-size:14px;color:var(--sub)}
/* 写真枠（実写真に差し替え） */
.photo{aspect-ratio:3/2;border:1px solid rgba(201,165,92,.35);border-radius:4px;position:relative;overflow:hidden;
  background:linear-gradient(150deg,#232b40 0%,#161c2c 100%);display:flex;align-items:center;justify-content:center}
.photo span{color:rgba(201,165,92,.55);font-size:11px;letter-spacing:.35em}
.photo.portrait{aspect-ratio:3/4}
/* 講師 */
.staff{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:22px}
.staff figure{text-align:center}
.staff figcaption{margin-top:14px;font-family:var(--serif);font-size:17px;letter-spacing:.12em}
.staff small{display:block;color:var(--sub);font-size:12px;margin-top:4px;letter-spacing:.06em}
/* ボタン */
.btn{display:inline-block;background:var(--gold);color:#10141f;font-weight:700;letter-spacing:.14em;
  padding:16px 42px;border-radius:2px;font-size:15px;border:none;cursor:pointer}
.btn:hover{background:var(--gold-l)}
.btn-ghost{background:transparent;color:var(--gold-l);border:1px solid var(--gold)}
/* 帯 */
.band{background:linear-gradient(120deg,#1a2030 0%,#10141f 80%);border-top:1px solid rgba(201,165,92,.25);border-bottom:1px solid rgba(201,165,92,.25);text-align:center}
footer{padding:46px 0;text-align:center;color:var(--sub);font-size:12px;letter-spacing:.1em;border-top:1px solid rgba(201,165,92,.18)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{border-bottom:1px solid rgba(201,165,92,.18);padding:14px 10px;text-align:left}
th{color:var(--gold-l);font-weight:500;letter-spacing:.08em}
@media(max-width:760px){nav ul{gap:14px;flex-wrap:wrap}section{padding:60px 0}}

/* ヒーロー：動画→画像トランジション（hero.mp4 を置けば実動画・無ければデモ演出） */
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-media video,.hero-media .hero-img,.hero-media .hero-demo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-img{background:
  radial-gradient(70% 100% at 30% 60%, rgba(201,165,92,.14) 0%, transparent 60%),
  linear-gradient(150deg,#1d2438 0%,#10141f 75%)}
.hero-img::after{content:'PHOTO ── メイン実写真に差し替え';position:absolute;right:18px;bottom:14px;
  color:rgba(201,165,92,.5);font-size:10px;letter-spacing:.3em}
.hero-demo{background:linear-gradient(115deg, transparent 30%, rgba(227,201,143,.20) 46%, rgba(227,201,143,.42) 50%, rgba(227,201,143,.20) 54%, transparent 70%),
  linear-gradient(150deg,#232c44 0%,#131827 80%);
  background-size:280% 100%,100% 100%;animation:sweep 3.2s ease-in-out 1}
@keyframes sweep{0%{background-position:120% 0,0 0}100%{background-position:-60% 0,0 0}}
.hero-media .fadeout{opacity:0;transition:opacity 1.6s ease}
.hero-media video,.hero-media .hero-demo{opacity:1;transition:opacity 1.6s ease}
.hero .wrap{position:relative;z-index:2}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,20,31,.88) 0%,rgba(16,20,31,.55) 55%,rgba(16,20,31,.25) 100%);z-index:1}

/* ── エレガント仕上げ（2026/6/13）── */
.photo-real{border:1px solid rgba(201,165,92,.4);border-radius:3px;overflow:hidden;position:relative}
.photo-real img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease}
.photo-real:hover img{transform:scale(1.04)}
.photo-real::after{content:'';position:absolute;inset:8px;border:1px solid rgba(227,201,143,.28);pointer-events:none}
.serif-en{font-family:var(--serif);font-style:italic;color:var(--gold-l);letter-spacing:.08em}
/* 実績帯 */
.honors{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2px;background:rgba(201,165,92,.25);border:1px solid rgba(201,165,92,.25)}
.honors div{background:var(--night);padding:30px 20px;text-align:center}
.honors strong{display:block;font-family:var(--serif);font-size:18px;color:var(--gold-l);letter-spacing:.08em;line-height:1.6}
.honors span{display:block;color:var(--sub);font-size:11.5px;letter-spacing:.18em;margin-top:8px}
/* ギャラリー帯（横に流れる） */
.gallery{display:flex;gap:14px;overflow-x:auto;padding:6px 2px 18px;scroll-snap-type:x mandatory}
.gallery .photo-real{flex:0 0 300px;aspect-ratio:3/4;scroll-snap-align:start}
.gallery::-webkit-scrollbar{height:5px}.gallery::-webkit-scrollbar-thumb{background:rgba(201,165,92,.4);border-radius:3px}
/* チェックリスト */
.checks{list-style:none;display:grid;gap:12px;max-width:620px}
.checks li{padding-left:30px;position:relative;color:var(--ink);font-size:15px}
.checks li::before{content:'✦';position:absolute;left:4px;color:var(--gold);font-size:13px}
.q{font-family:var(--serif);color:var(--gold-l);font-size:18px;letter-spacing:.06em;margin:26px 0 8px}

/* 読みやすさ：スマホで全グリッドを1列に・肩書は行で積む */
@media(max-width:760px){ .grid{grid-template-columns:1fr !important} .honors div{padding:22px 14px} }
.creds{display:grid;gap:6px;margin-top:4px}
.creds span{display:block;color:var(--gold-l);font-size:14px;letter-spacing:.05em;line-height:1.7}
.profile-link{display:inline-block;margin-top:10px;font-size:13px;color:var(--gold-l);border-bottom:1px solid rgba(201,165,92,.5);padding-bottom:2px}

/* ══ 明るいエレガント版（2026/6/13 ちとせさん指示：年配層に黒は見にくい・スタンダードの先生＝明るくエレガントに）══ */
:root{
  --night:#faf7f0; --night2:#ffffff; --panel:#f3ede0;
  --gold:#a8853e; --gold-l:#8a6c2e; --ink:#2b2e3b; --sub:#6c6f7d;
}
body{background:var(--night);color:var(--ink)}
nav{background:rgba(250,247,240,.94);border-bottom:1px solid rgba(168,133,62,.3)}
.logo{color:var(--ink)} nav ul a{color:var(--sub)} nav ul a:hover{color:var(--gold-l)}
.hero{background:linear-gradient(165deg,#f6f1e6 0%,#faf7f0 70%)}
.hero::after{background-image:
  radial-gradient(1.6px 1.6px at 82% 30%, rgba(168,133,62,.5) 50%, transparent 51%),
  radial-gradient(1px 1px at 68% 62%, rgba(168,133,62,.3) 50%, transparent 51%),
  radial-gradient(1.3px 1.3px at 90% 72%, rgba(168,133,62,.4) 50%, transparent 51%),
  radial-gradient(1px 1px at 74% 14%, rgba(168,133,62,.35) 50%, transparent 51%)}
.hero-scrim{background:linear-gradient(90deg,rgba(250,247,240,.94) 0%,rgba(250,247,240,.72) 50%,rgba(250,247,240,.18) 100%)}
.hero h1{color:#232636}.hero h1 em{color:var(--gold-l)}
.hero p.lead{color:#565a68}
.hero-demo{background:linear-gradient(115deg, transparent 30%, rgba(168,133,62,.14) 46%, rgba(168,133,62,.30) 50%, rgba(168,133,62,.14) 54%, transparent 70%),linear-gradient(150deg,#f2ecdf 0%,#faf7f0 80%)}
.card{background:#fff;border:1px solid rgba(168,133,62,.28);box-shadow:0 1px 10px rgba(43,46,59,.05)}
.card:hover{box-shadow:0 8px 26px rgba(168,133,62,.18)}
.card h3{color:var(--gold-l)} .card p{color:#5d6070}
.honors{background:rgba(168,133,62,.3);border-color:rgba(168,133,62,.3)}
.honors div{background:#fff}
.honors strong{color:#232636}.honors span{color:var(--gold)}
.band{background:linear-gradient(120deg,#f4eee1 0%,#faf7f0 85%);border-color:rgba(168,133,62,.28)}
.btn{background:#a8853e;color:#fff}
.btn:hover{background:#8a6c2e}
.btn-ghost{background:transparent;color:#8a6c2e;border:1px solid #a8853e}
.pv-badge{}
.photo{background:linear-gradient(150deg,#efe8d8 0%,#f8f4ea 100%);border-color:rgba(168,133,62,.4)}
.photo span{color:rgba(138,108,46,.65)}
.photo-real{border-color:rgba(168,133,62,.45)}
.photo-real::after{border-color:rgba(168,133,62,.3)}
.serif-en{color:var(--gold-l)}
.checks li{color:#3a3d4a}
.q{color:#8a6c2e}
th{color:#8a6c2e} th,td{border-bottom:1px solid rgba(168,133,62,.25)}
footer{color:#85889a;border-top:1px solid rgba(168,133,62,.25)}
.gallery::-webkit-scrollbar-thumb{background:rgba(168,133,62,.45)}
.creds span{color:#8a6c2e}
.profile-link{color:#8a6c2e;border-bottom-color:rgba(168,133,62,.5)}
.hero-img{background:linear-gradient(150deg,#efe8d8 0%,#f8f4ea 100%)}

/* ══ 50万級 仕上げ（2026/6/17）：レッスン写真＋スクロール演出（追加のみ）══ */
.card-img{margin:-30px -28px 20px;aspect-ratio:16/10;overflow:hidden;position:relative}
.card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s ease}
.card:hover .card-img img{transform:scale(1.06)}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important}}