/* ============================================================
   MJ企画 和太鼓体験 — ワイヤーフレーム共通スタイル
   方針: ワイヤー自体をレスポンシブに。ブラウザ幅で PC / スマホ表示が切り替わる。
   デスクトップファースト（max-width で上書き）。
   ============================================================ */
:root{
  --ink:#2b2b2b; --line:#333; --soft:#bbb; --faint:#888;
  --ph1:#efefef; --ph2:#e6e6e6; --bar:#dcdcdc; --bg:#eceae7; --card:#fff;
  --brand-red:#c8161d;
  --sans:"Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --mono:ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  line-height:1.7;font-size:15px;-webkit-font-smoothing:antialiased;}
a{color:inherit;}

/* ---- ワイヤー間ナビ（レビュー用・サイト外） ---- */
.wfnav{position:sticky;top:0;z-index:60;display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;
  background:#1f1f1f;border-bottom:2px solid #000;padding:9px 16px;}
.wfnav a{font-family:var(--mono);font-size:11px;text-decoration:none;color:#ddd;
  border:1px solid #555;border-radius:4px;padding:3px 9px;}
.wfnav a.here{background:#fff;color:#000;border-color:#fff;}
.wfnav .home{font-weight:700;}
.wfhint{max-width:1120px;margin:14px auto 0;padding:0 24px;font-size:12px;color:var(--faint);}
.wfhint b{color:#444;}

/* ============================================================
   サイト本体（レスポンシブ）
   ============================================================ */
.site{background:var(--card);max-width:1280px;margin:18px auto;border:1px solid var(--soft);
  border-radius:8px;overflow:hidden;box-shadow:0 1px 10px rgba(0,0,0,.06);}
.inner{max-width:1120px;margin:0 auto;padding:0 clamp(20px,5vw,40px);}

/* ヘッダー（PC: 横並び / SP: ハンバーガー） */
.site-head{position:sticky;top:38px;z-index:40;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px clamp(20px,5vw,40px);background:rgba(255,255,255,.95);
  backdrop-filter:blur(4px);border-bottom:1px solid var(--soft);}
.site-logo{font-weight:700;font-size:clamp(16px,2vw,18px);white-space:nowrap;color:inherit;text-decoration:none;}
.gnav{display:flex;align-items:center;gap:clamp(12px,1.6vw,22px);}
.gnav a{font-size:13px;font-weight:500;text-decoration:none;}
.gnav .lang{font-family:var(--mono);font-size:11px;color:var(--faint);border:1px solid var(--soft);border-radius:4px;padding:2px 6px;}
.gnav .head-cta{border:1.5px solid var(--line);border-radius:999px;padding:6px 14px;font-size:11px;font-weight:700;white-space:nowrap;text-decoration:none;}
.burger{display:none;flex-direction:column;gap:4px;padding:6px;}
.burger i{width:22px;height:2px;background:var(--line);display:block;}
@media(max-width:860px){
  .gnav{display:none;}
  .burger{display:flex;}
}

/* セクション */
.s{padding:clamp(40px,6vw,72px) 0;border-bottom:1px dashed var(--soft);position:relative;}
.s:last-child{border-bottom:none;}
.s.shade{background:#f3f2ef;}
.s.cta{background:#e4e3e0;}
.s.foot{background:#1f1f1f;color:#cfcfcf;padding:clamp(32px,4vw,48px) 0;}
.s.foot .tag{background:#444;}
.s.foot a{color:#cfcfcf;}

/* ヒーロー（全幅・流体高さ） */
/* ヒーロー: 高さは min-height（中身で伸びる）。背景は .ph を絶対配置で敷き、テキストは通常フロー＝はみ出して切れない */
.hero{padding:0;border-bottom:1px dashed var(--soft);}
.hero-wrap{position:relative;display:flex;align-items:center;justify-content:center;
  min-height:clamp(340px,62svh,560px);overflow:hidden;text-align:center;color:#fff;
  padding:clamp(72px,12vw,120px) clamp(20px,5vw,40px);}
.hero .ph{position:absolute;inset:0;z-index:0;height:auto;border:none;border-radius:0;}
.hero .over{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  gap:clamp(12px,2vw,18px);max-width:760px;}
.hero .tag{position:absolute;top:12px;left:12px;z-index:2;}

/* グリッド（デスクトップファースト → md で1カラム） */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,36px);align-items:center;}
.g2.top{align-items:start;}
.g2.cal{grid-template-columns:1.1fr 1fr;}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,24px);}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.sidebar{display:grid;grid-template-columns:1fr 280px;gap:32px;align-items:start;}
@media(max-width:860px){
  .g2,.g2.cal,.g3,.g4,.sidebar,.feat,.steps{grid-template-columns:1fr;}
}
@media(max-width:1100px) and (min-width:861px){
  .g4{grid-template-columns:repeat(2,1fr);}
}

/* スライダー（PC:3枚 / SP:横スクロール） */
/* スライダー（矢印で選択可＋無限ループ。前後にクローンを足して継ぎ目なく回す＝wf.js） */
.slider-wrap{position:relative;overflow:hidden;}
.slider{display:flex;gap:clamp(14px,2vw,20px);will-change:transform;}
.slider>*{flex:0 0 clamp(220px,30vw,320px);}
.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:38px;height:38px;
  border:1px solid var(--soft);border-radius:50%;background:rgba(255,255,255,.9);color:var(--ink);
  cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;
  box-shadow:0 1px 6px rgba(0,0,0,.12);}
.slider-arrow--prev{left:6px;}
.slider-arrow--next{right:6px;}
@media(max-width:860px){ .slider>*{flex:0 0 78%;} }

/* ============================================================
   atoms
   ============================================================ */
.tag{font-family:var(--mono);font-size:10px;background:var(--line);color:#fff;
  padding:2px 7px;letter-spacing:.06em;display:inline-block;margin-bottom:12px;}
.tag.core{background:#000;}
.tag.core::after{content:" ★核";}

.head-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}

.ttl{font-weight:700;font-size:clamp(15px,1.6vw,17px);margin:6px 0;}
.ttl.big{font-size:clamp(18px,2.4vw,24px);}
.ttl.xl{font-size:clamp(24px,4vw,40px);line-height:1.3;}
.small{font-size:13px;color:var(--faint);}
.center{text-align:center;}
.mt12{margin-top:12px;}

.ph{display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,var(--ph1) 0 11px,var(--ph2) 11px 22px);
  border:1px solid #ccc;color:#9a9a9a;font-family:var(--mono);font-size:11px;letter-spacing:.08em;}
.ph.sq{aspect-ratio:4/3;}
.ph.tall{aspect-ratio:3/4;max-height:320px;}
.ph.card{aspect-ratio:4/3;}
.ph.thumb{height:72px;}
.ph.wide{aspect-ratio:16/7;}

.bar{height:9px;background:var(--bar);border-radius:4px;margin:7px 0;}
.bar.w95{width:95%;}.bar.w90{width:90%;}.bar.w75{width:75%;}.bar.w60{width:60%;}.bar.w40{width:40%;}
.bar.cen{margin-inline:auto;}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1.5px solid var(--line);border-radius:999px;padding:9px 20px;font-size:13px;font-weight:700;text-decoration:none;}
.btn.fill{background:var(--line);color:#fff;}
.btn.lg{padding:12px 26px;}
.btn.block{display:flex;width:100%;}

.btn-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}

.list-item{display:flex;gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid #eee;}
.list-item .date{font-family:var(--mono);font-size:11px;color:var(--faint);white-space:nowrap;}
.chip{display:inline-block;border:1px solid var(--soft);border-radius:4px;padding:2px 8px;font-size:11px;color:var(--faint);margin:2px 4px 2px 0;}

.cal{border:1px solid var(--soft);border-radius:6px;padding:clamp(10px,1.5vw,16px);}
.cal-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--faint);margin-bottom:10px;}
.grid7{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.cell{aspect-ratio:1/1;border:1px solid #e5e5e5;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:clamp(9px,1.1vw,12px);color:#bbb;}
.cell.open{background:#e9e9e9;border-color:var(--soft);color:#555;font-weight:700;}
.cell.pick{background:var(--line);color:#fff;border-color:var(--line);}

.slots{display:flex;flex-direction:column;gap:7px;}
.slot{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--soft);border-radius:6px;padding:9px 12px;font-size:13px;}
.slot .badge{font-family:var(--mono);font-size:10px;border:1px solid var(--soft);border-radius:3px;padding:1px 6px;color:var(--faint);}
.slot.full{opacity:.45;}

.field{border:1px solid var(--soft);border-radius:6px;padding:11px 13px;font-size:12px;color:#aaa;background:#fbfbfb;margin:8px 0;}
.field.area{height:88px;}

/* FAQ アコーディオン */
.acc{border:1px solid var(--soft);border-radius:6px;margin:8px 0;overflow:hidden;}
.acc__q{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;
  padding:11px 14px;font:inherit;font-size:13px;color:inherit;background:none;border:0;cursor:pointer;text-align:left;}
.acc .pm{color:var(--faint);font-family:var(--mono);transition:transform .2s ease;}
.acc.is-open .pm{transform:rotate(45deg);}
.acc__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease;}
.acc.is-open .acc__a{grid-template-rows:1fr;}
.acc__a-in{overflow:hidden;padding:0 14px;}
.acc.is-open .acc__a-in{padding-bottom:12px;}

.kv{width:100%;border-collapse:collapse;font-size:13px;}
.kv th,.kv td{border:1px solid var(--soft);padding:9px 13px;text-align:left;vertical-align:top;}
.kv th{background:#f1f1f1;width:34%;font-weight:700;color:#555;}
@media(max-width:560px){ .kv th{width:40%;} }

.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,24px);}
.feat .it{text-align:center;}
.feat .ic{width:52px;height:52px;border:1px solid var(--soft);border-radius:50%;margin:0 auto 10px;
  display:flex;align-items:center;justify-content:center;color:var(--faint);font-family:var(--mono);font-size:9px;}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.step{border:1px solid var(--soft);border-radius:6px;padding:12px;font-size:13px;}
.step .no{font-family:var(--mono);font-size:10px;color:var(--faint);display:block;margin-bottom:4px;}

.consent{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:#555;
  border:1px dashed var(--soft);border-radius:6px;padding:10px 12px;margin:8px 0;}
.consent .box{width:15px;height:15px;border:1px solid var(--line);border-radius:2px;flex:0 0 auto;margin-top:2px;}

.ostack{display:flex;flex-direction:column;gap:7px;}
.ostack .b{border:1px dashed var(--soft);border-radius:5px;padding:8px 11px;font-size:12.5px;background:#fafafa;}

/* annotation */
.note{font-size:12px;color:var(--faint);margin:12px 0 0;padding-left:15px;position:relative;}
.note::before{content:"▸";position:absolute;left:0;color:#aaa;}
.note b{color:#555;font-weight:700;}

/* ============================================================
   サイトマップ（index）
   ============================================================ */
.doc{max-width:1120px;margin:0 auto;padding:0 24px 100px;}
.masthead{padding:26px 0 0;}
.masthead h1{font-size:23px;margin:0 0 6px;font-weight:700;}
.masthead p{margin:4px 0;color:var(--faint);font-size:13px;}
.block-h{font-size:15px;font-weight:700;margin:40px 0 4px;}
.block-h .n{font-family:var(--mono);color:var(--faint);margin-right:8px;font-size:12px;}
.block-sub{color:var(--faint);font-size:12px;margin:0 0 16px;}
.legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:14px;font-size:11.5px;color:var(--faint);}
.legend span{display:inline-flex;align-items:center;gap:6px;}
.lg-tag{font-family:var(--mono);font-size:9.5px;background:var(--line);color:#fff;padding:1px 5px;}
.lg-ph{width:18px;height:12px;border:1px solid #ccc;background:repeating-linear-gradient(45deg,var(--ph1) 0 6px,var(--ph2) 6px 12px);}
.lg-bar{width:22px;height:7px;background:var(--bar);border-radius:3px;}

.map{margin:8px 0 10px;}
.map__top{display:block;width:220px;margin:0 auto;text-align:center;border:1.5px solid var(--line);
  border-radius:6px;padding:12px;background:#fff;font-weight:700;text-decoration:none;}
.map__top .u{font-family:var(--mono);font-size:11px;color:var(--faint);font-weight:400;margin-left:6px;}
.map__stem{width:1px;height:22px;background:var(--soft);margin:0 auto;}
.map__bar{height:1px;background:var(--soft);margin:0 6%;}
.map__row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:22px;}
.map__node{flex:0 0 auto;width:160px;border:1.5px solid var(--line);border-radius:6px;
  background:#fff;padding:11px 12px;text-decoration:none;display:block;}
.map__node .nm{font-weight:700;font-size:13px;}
.map__node .u{font-family:var(--mono);font-size:10px;color:var(--faint);display:block;margin-top:2px;}
.map__node .sub{margin-top:8px;border-top:1px dashed var(--soft);padding-top:6px;font-size:10.5px;color:var(--faint);}
.map__node:hover{background:#f1f1f1;}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px;}
.lcard{border:1px solid var(--soft);border-radius:6px;background:#fff;padding:14px 16px;text-decoration:none;display:block;}
.lcard:hover{background:#f1f1f1;}
.lcard h4{margin:0 0 3px;font-size:14px;}
.lcard .u{font-family:var(--mono);font-size:10.5px;color:var(--faint);}
.lcard p{margin:8px 0 0;font-size:11.5px;color:var(--faint);}
@media(max-width:760px){ .cards,.map__node{width:auto;} .cards{grid-template-columns:1fr;} }

/* ===== インタラクション（wf.js 連動） ===== */
/* ハンバーガー → X */
.burger{cursor:pointer;}
.burger i{transition:transform .25s ease, opacity .25s ease;}
.site-head.nav-open .burger i:nth-child(1){transform:translateY(6px) rotate(45deg);}
.site-head.nav-open .burger i:nth-child(2){opacity:0;}
.site-head.nav-open .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* SP ドロワー（ハンバーガー押下で全画面メニュー） */
@media(max-width:860px){
  .site-head.nav-open .gnav{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
    position:fixed;inset:0;z-index:39;background:rgba(255,255,255,.97);font-size:18px;
  }
  .site-head.nav-open .gnav .head-cta{font-size:14px;}
}

/* スクロールでふわっと表示（JS 実行時のみ初期非表示にして FOUC を防ぐ） */
.js-reveal .s:not(.hero){opacity:0;transform:translateY(24px);transition:opacity .6s ease, transform .6s ease;}
.js-reveal .s.is-in{opacity:1;transform:none;}

/* ===== 配色の雰囲気（白グレー基調 ＋ 赤アクセント ＋ 黒）。控えめに乗せる ===== */
/* 主要CTA・ヘッダーCTAは赤 */
.btn.fill{background:var(--brand-red);border-color:var(--brand-red);color:#fff;}
.gnav .head-cta{background:var(--brand-red);border-color:var(--brand-red);color:#fff;}
/* 「★核」タグ・予約カレンダーの選択中を赤に */
.tag.core{background:var(--brand-red);}
.cell.pick{background:var(--brand-red);border-color:var(--brand-red);color:#fff;}
/* ヒーローは濃色＋赤のにじみ、文字は白（実際の和の濃色FVの雰囲気） */
.hero .ph{border:none;color:rgba(255,255,255,.5);align-items:flex-start;padding-top:14px;
  background:linear-gradient(160deg,#1c1c1c 0%,#1c1c1c 52%,rgba(200,22,29,.55) 135%);}
.hero .over{color:#fff;}
.hero .over .small{color:rgba(255,255,255,.82);}

/* フッター内リンク（ナビ等）は下線なし */
.s.foot a{text-decoration:none;}

.footnote{margin:40px auto 0;max-width:1120px;padding:14px 24px 0;border-top:1px solid var(--soft);font-size:12.5px;color:var(--faint);}
.footnote b{color:#555;}