
:root {
  --color-bg: #0f0d0b;
  --color-bg-soft: #18130f;
  --color-panel: #211812;
  --color-text: #f7f1e7;
  --color-muted: #c9bca9;
  --color-gold: #c7a24b;
  --color-gold-light: #e7c76d;
  --color-red: #7a1712;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  --font-gyosho: "Yuji Syuku", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --font-kyokasho: "Zen Kyoiku New", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  --max-width: 1120px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-kyokasho);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.8;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(15,13,11,.88); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(199,162,75,.22);
}
.header-inner {
  max-width: var(--max-width); margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.logo { font-family: var(--font-gyosho); display:flex; align-items:center; gap:12px; letter-spacing:.08em; font-weight:700; }
.logo-mark {
  width:42px; height:42px; border:1px solid var(--color-gold); border-radius:50%;
  display:grid; place-items:center; color:var(--color-gold-light); font-size:18px;
  background: radial-gradient(circle, rgba(199,162,75,.14), rgba(122,23,18,.18));
}
.logo-text-main { display:block; font-size:18px; line-height:1.2; }
.logo-text-sub { display:block; color:var(--color-muted); font-size:11px; letter-spacing:.12em; font-family:Georgia, serif; }
.nav-area { display:flex; align-items:center; gap:18px; }
.nav-links { display:flex; align-items:center; gap:18px; color:var(--color-muted); font-size:14px; }
.nav-links a:hover, .nav-links a.current { color: var(--color-gold-light); }
.lang-switch { display:flex; border:1px solid rgba(199,162,75,.45); border-radius:999px; overflow:hidden; font-family:Arial,sans-serif; }
.lang-button { border:0; padding:7px 10px; background:transparent; color:var(--color-muted); cursor:pointer; font-size:12px; }
.lang-button.active { background:var(--color-gold); color:#1a120c; font-weight:700; }
.menu-button { display:none; width:42px; height:42px; border:1px solid rgba(199,162,75,.45); border-radius:8px; background:transparent; color:var(--color-text); font-size:22px; cursor:pointer; }
.hero, .page-hero {
  padding: 150px 20px 84px; min-height: 520px; display:grid; place-items:center;
  position:relative; overflow:hidden; background:
  linear-gradient(120deg, rgba(15,13,11,.96), rgba(15,13,11,.72), rgba(15,13,11,.94)),
  radial-gradient(circle at 70% 20%, rgba(199,162,75,.18), transparent 30%),
  #100d0b;
}
.hero { min-height:100vh; padding-top:120px; }
.hero::before, .page-hero::before {
  content: attr(data-bg-text); position:absolute; right:5%; top:120px; writing-mode:vertical-rl;
  font-family:var(--font-gyosho); font-size:clamp(92px,14vw,190px); color:rgba(199,162,75,.08);
  letter-spacing:.18em; pointer-events:none;
}
.hero-inner, .page-hero-inner { width:100%; max-width:var(--max-width); position:relative; z-index:1; }
.hero-inner { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr); gap:44px; align-items:center; }
.breadcrumb { color:var(--color-muted); font-size:13px; margin-bottom:22px; }
.breadcrumb a { color:var(--color-gold-light); }
.eyebrow { display:inline-flex; align-items:center; gap:10px; color:var(--color-gold-light); letter-spacing:.16em; font-size:13px; margin-bottom:18px; text-transform:uppercase; font-family:Georgia,serif; }
.eyebrow::before { content:""; width:42px; height:1px; background:var(--color-gold); }
.hero-title, .page-title { font-family:var(--font-gyosho); margin:0 0 18px; font-size:clamp(44px,7vw,82px); line-height:1.12; letter-spacing:.1em; text-shadow:0 10px 30px rgba(0,0,0,.35); }
.hero-title span { display:block; color:var(--color-gold-light); font-size:clamp(28px,4vw,48px); margin-top:4px; }
.hero-copy, .page-lead { max-width:760px; color:var(--color-muted); font-size:18px; margin:0 0 32px; }
.page-lead { margin-bottom:0; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:30px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 22px; border-radius:999px; font-weight:700; letter-spacing:.06em; transition:transform .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background:linear-gradient(135deg,var(--color-gold-light),var(--color-gold)); color:#1b130d; }
.button-secondary { border:1px solid rgba(199,162,75,.65); color:var(--color-gold-light); background:rgba(15,13,11,.35); }
.tags { display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:0; list-style:none; }
.tags li { border:1px solid rgba(199,162,75,.32); color:var(--color-muted); border-radius:999px; padding:6px 12px; font-size:13px; background:rgba(33,24,18,.7); }
.hero-card, .panel, .card, .cta-panel, .intro-panel, .notice-panel, .instagram-panel {
  background:rgba(33,24,18,.86); border:1px solid rgba(199,162,75,.22); border-radius:28px; padding:30px; box-shadow:var(--shadow);
}
.image-placeholder, .photo-placeholder, .instagram-placeholder {
  min-height:320px; border-radius:22px; border:1px dashed rgba(199,162,75,.45);
  background:linear-gradient(135deg,rgba(122,23,18,.38),rgba(199,162,75,.14)), radial-gradient(circle at 30% 20%, rgba(255,255,255,.12), transparent 32%), #15100d;
  display:grid; place-items:center; text-align:center; padding:28px; color:var(--color-muted);
}
.placeholder-kanji { font-family:var(--font-gyosho); display:block; color:rgba(231,199,109,.95); font-size:54px; letter-spacing:.1em; margin-bottom:8px; }
.section { padding:88px 20px; }
.section-alt { background:linear-gradient(180deg,rgba(122,23,18,.14),rgba(15,13,11,0)), var(--color-bg-soft); }
.section-inner { max-width:var(--max-width); margin:0 auto; }
.section-heading { margin-bottom:40px; text-align:center; }
.section-kicker { color:var(--color-gold-light); letter-spacing:.16em; font-size:13px; font-family:Georgia,serif; text-transform:uppercase; }
.section-title, .card h3, .panel h2, .panel h3, .intro-panel h2, .cta-panel h2, .notice-panel h2 { font-family:var(--font-gyosho); letter-spacing:.08em; }
.section-title { margin:8px 0 0; font-size:clamp(30px,4vw,44px); }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.card { min-height:190px; }
.card h3 { margin:10px 0; font-size:22px; }
.card p, .panel p, .intro-panel p, .cta-panel p, .notice-panel li { color:var(--color-muted); margin:0; }
.number { color:var(--color-gold-light); font-family:Georgia,serif; font-size:18px; }
.overview-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.85fr); gap:28px; }
.schedule-wrap { overflow-x:auto; border-radius:24px; border:1px solid rgba(199,162,75,.22); box-shadow:var(--shadow); }
.schedule-table { width:100%; border-collapse:collapse; min-width:720px; background:rgba(33,24,18,.86); }
.schedule-table th,.schedule-table td { padding:18px 20px; text-align:left; border-bottom:1px solid rgba(199,162,75,.15); vertical-align:top; }
.schedule-table th { color:var(--color-gold-light); background:rgba(122,23,18,.24); white-space:nowrap; }
.schedule-table td { color:var(--color-muted); }
.map-frame { width:100%; height:310px; border:0; border-radius:20px; }
.instructor-card { display:grid; grid-template-columns:360px minmax(0,1fr); gap:30px; }
.role-label { display:inline-flex; align-self:flex-start; border:1px solid rgba(199,162,75,.45); color:var(--color-gold-light); border-radius:999px; padding:6px 14px; font-size:13px; letter-spacing:.08em; margin-bottom:18px; background:rgba(15,13,11,.35); }
.instructor-name { font-family:var(--font-gyosho); margin:0; font-size:clamp(34px,5vw,56px); line-height:1.18; letter-spacing:.12em; }
.instructor-kana { color:var(--color-muted); margin:8px 0 22px; letter-spacing:.12em; }
.profile-list { margin:0; padding:0; list-style:none; display:grid; gap:12px; }
.profile-list li { display:grid; grid-template-columns:130px 1fr; gap:16px; padding-bottom:12px; border-bottom:1px solid rgba(199,162,75,.16); color:var(--color-muted); }
.profile-list strong { color:var(--color-gold-light); }
.price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.price-card { background:rgba(33,24,18,.86); border:1px solid rgba(199,162,75,.22); border-radius:28px; padding:30px; box-shadow:var(--shadow); text-align:center; min-height:260px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.price-card.main { border-color:rgba(231,199,109,.52); background:linear-gradient(145deg,rgba(122,23,18,.36),rgba(33,24,18,.94)); transform:translateY(-10px); }
.price-card-inner { position:relative; z-index:1; width:100%; min-height:200px; display:grid; grid-template-rows:auto 1fr auto; align-items:center; }
.price-label { color:var(--color-gold-light); letter-spacing:.12em; font-size:14px; margin-bottom:12px; align-self:start; }
.price-value { font-family:var(--font-gyosho); font-size:clamp(42px,6vw,64px); line-height:1.15; letter-spacing:.05em; margin:0; color:var(--color-text); align-self:center; }
.price-value small { font-family:var(--font-kyokasho); font-size:18px; color:var(--color-muted); }
.price-note { color:var(--color-muted); margin:16px 0 0; font-size:14px; }
.contact-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.contact-card { min-height:310px; display:flex; flex-direction:column; justify-content:space-between; text-align:center; }
.contact-icon { width:74px; height:74px; border-radius:24px; border:1px solid rgba(199,162,75,.58); display:grid; place-items:center; color:var(--color-gold-light); font-size:34px; margin:0 auto 22px; background:rgba(15,13,11,.36); }
.placeholder-link { display:inline-flex; align-items:center; justify-content:center; min-height:48px; width:100%; padding:12px 18px; border-radius:999px; border:1px solid rgba(199,162,75,.55); color:var(--color-gold-light); background:rgba(15,13,11,.35); font-weight:700; }
.notice-list { margin:0; padding:0; list-style:none; display:grid; gap:12px; }
.notice-list li { padding-left:1.4em; position:relative; }
.notice-list li::before { content:"・"; position:absolute; left:0; color:var(--color-gold-light); }
.site-footer { padding:28px 20px; background:#090807; border-top:1px solid rgba(199,162,75,.18); color:var(--color-muted); font-size:13px; text-align:center; }
[data-lang="en"] { display:none; }
body.lang-en [data-lang="ja"] { display:none; }
body.lang-en [data-lang="en"] { display:revert; }
body.lang-en .nav-links [data-lang="en"] { display:flex; }
@media (max-width:900px) {
  .menu-button { display:block; }
  .nav-links { position:absolute; top:72px; left:16px; right:16px; display:none; flex-direction:column; align-items:stretch; gap:0; background:rgba(15,13,11,.98); border:1px solid rgba(199,162,75,.25); border-radius:18px; padding:10px; box-shadow:var(--shadow); }
  .nav-links.open { display:flex; }
  .nav-links a { padding:12px 14px; border-bottom:1px solid rgba(199,162,75,.12); }
  .hero-inner, .overview-grid, .instructor-card { grid-template-columns:1fr; }
  .grid-3, .grid-2, .price-grid, .contact-grid { grid-template-columns:1fr; }
  .price-card.main { transform:none; }
}
@media (max-width:640px) {
  .header-inner { padding:12px 14px; }
  .logo-mark { width:38px; height:38px; }
  .logo-text-main { font-size:16px; }
  .logo-text-sub { font-size:10px; }
  .hero, .page-hero { padding:122px 16px 64px; min-height:460px; }
  .hero-copy, .page-lead { font-size:16px; }
  .section { padding:64px 16px; }
  .hero-actions { flex-direction:column; }
  .button { width:100%; }
}

/* ===== Photo replacement styles ===== */
.site-photo {
  width: 100%;
  height: 360px;
  object-fit: cover;
  object-position: center;
  border-radius: 22px;
  border: 1px solid rgba(199, 162, 75, 0.35);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

.profile-photo {
  width: 100%;
  height: 360px;
  object-fit: cover;
  object-position: center top;
  border-radius: 24px;
  border: 1px solid rgba(199, 162, 75, 0.35);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

@media (max-width: 640px) {
  .site-photo {
    height: 260px;
  }

  .profile-photo {
    height: 300px;
  }
}


/* ===== Instagram embed + button styles ===== */
.instagram-latest-box {
  display: grid;
  grid-template-columns: minmax(280px, 540px) minmax(260px, 1fr);
  gap: 24px;
  align-items: center;
}

.instagram-embed-area {
  min-height: 420px;
  padding: 16px;
  border-radius: 22px;
  background: rgba(15, 13, 11, 0.35);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.instagram-embed-area .instagram-media {
  margin: 0 auto !important;
  max-width: 540px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.instagram-button-area {
  padding: 24px;
  border-radius: 22px;
  border: 1px solid rgba(199, 162, 75, 0.22);
  background: rgba(15, 13, 11, 0.35);
  text-align: center;
}

.instagram-button-area p {
  color: var(--color-muted);
  margin: 0 0 18px;
}

@media (max-width: 900px) {
  .instagram-latest-box {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .instagram-embed-area {
    min-height: 360px;
    padding: 10px;
  }

  .instagram-button-area {
    padding: 20px;
  }
}
