/* top の CSS（https://gno-inc.jp/s/kobe-fighting/test.html の <style> をそのまま。画像の場所だけテーマ内に変更）*/

/* ===========================================================
   club-fight（複数ページ版）── 神戸格闘技サークル 専用
   配色は先方指定「イメージカラー＝雲と森、ポイントで畳」。
   面は雲（オフホワイト）、締めは森（深緑）、差し色だけ畳（い草色）。
   赤基調だった1枚もの版 templates/club-fight.html とは別物。
   =========================================================== */
*,*::before,*::after{box-sizing:border-box}
:root{
  --ink:#1b211e;        /* 本文 */
  --ink-2:#535e57;      /* 副文 */
  --line:#dee3dd;
  --bg:#ffffff;         /* 地＝白。gno-inc.jp/portfolio と揃えた */
  --surface:#f7f9f7;    /* 面を割るときの薄い色 */
  --forest:#24382e;     /* 森（濃）＝暗部の面 */
  --accent:#2f6b4f;     /* 森 */
  --accent-dark:#23543e;
  --tatami:#c0a866;     /* 畳（い草）＝ポイントのみ */
  --display:"Barlow Condensed","Arial Narrow",sans-serif;
  --radius:12px;
  --wrap:1280px;
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Noto Serif JP","Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho",YuMincho,"MS PMincho",serif;
  font-size:16px;line-height:1.85;letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}

/* --- デモバー --- */
.demo-bar{background:#22302a;color:#fff;font-size:12px;line-height:1.6;padding:9px 16px;text-align:center;letter-spacing:.03em}
.demo-bar strong{color:var(--tatami)}

/* --- ヘッダー --- */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0}
.logo{font-weight:800;font-size:16px;letter-spacing:.03em;line-height:1.3;text-decoration:none}
.logo small{display:block;font-size:9.5px;font-weight:600;color:var(--ink-2);letter-spacing:.13em;margin-top:2px}
.nav-right{display:flex;align-items:center;gap:14px}
.nav-cta{background:var(--accent);color:#fff;text-decoration:none;font-weight:700;font-size:13px;padding:10px 18px;border-radius:999px;white-space:nowrap;box-shadow:0 2px 10px rgba(0,0,0,.10)}
.nav-cta:hover{background:var(--accent-dark)}
/* 下段のページ切り替え。5ページあるのでハンバーガーにせず、横スクロールで全部見せる */
.subnav{border-bottom:1px solid var(--line);background:rgba(255,255,255,.94)}
.subnav ul{display:flex;gap:2px;margin:0;padding:0;list-style:none;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.subnav ul::-webkit-scrollbar{display:none}
.subnav a{display:block;padding:12px 15px;font-size:13.5px;font-weight:700;text-decoration:none;color:var(--ink-2);white-space:nowrap;border-bottom:2px solid transparent}
.subnav a:hover{color:var(--ink)}
.subnav a.on{color:var(--accent);border-bottom-color:var(--accent)}
@media(max-width:640px){.logo{font-size:14px}.subnav a{padding:11px 12px;font-size:13px}}

/* --- ヒーロー（TOP） --- */
.hero{position:relative;color:#fff;overflow:hidden;background:var(--forest)}
.hero-bg{position:absolute;inset:0;background-image:url("../img/hero-top-hd.jpg");background-size:cover;background-position:center 46%;transform:scale(1.04);filter:saturate(.98)}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,40,32,.86) 0%,rgba(23,40,32,.58) 42%,rgba(23,40,32,.90) 100%)}
/* 2026-10-13 ロゴ */
.kk-mark{display:block;width:64px;height:64px;margin:0 0 16px}
.hero-inner{position:relative;z-index:2;padding:88px 0 74px;max-width:720px}
/* 縦に倒した袋文字。情報ではなく、面を死なせないための装置 */
.hero::after{content:"KOBE / 2012";position:absolute;right:-46px;top:36%;font:900 clamp(64px,11vw,124px)/1 var(--display);letter-spacing:.03em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.2);transform:rotate(90deg);pointer-events:none;z-index:0}
@media(max-width:700px){.hero::after{right:-84px;font-size:66px}}
.hero-meta{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.15em;border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:5px 14px;margin:0 0 22px}
.hero h1{font-size:clamp(34px,8vw,74px);line-height:1.16;letter-spacing:-.045em;margin:0 0 22px;font-weight:900;text-shadow:0 2px 24px rgba(0,0,0,.34)}
.hero p{font-size:clamp(14px,2.2vw,16.5px);line-height:1.9;margin:0 0 30px;color:#e6ebe6}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}

/* --- ページヘッダー（下層） --- */
.page-head{background:var(--forest);color:#fff;padding:52px 0 46px;position:relative;overflow:hidden}
.page-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--tatami)}
.page-head .eyebrow{color:var(--tatami);margin:0 0 8px}
.page-head h1{font-size:clamp(26px,5.4vw,46px);font-weight:900;margin:0 0 14px;line-height:1.22;letter-spacing:-.035em}
.page-head p{margin:0;color:#cdd6cf;font-size:15px;max-width:64ch}

/* --- ボタン --- */
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;padding:15px 30px;border-radius:999px;font-size:15px;box-shadow:0 6px 22px rgba(20,40,30,.22);transition:transform .15s,background .15s}
.btn:hover{background:var(--accent-dark);transform:translateY(-1px)}
.btn-ghost{display:inline-block;border:1.5px solid rgba(255,255,255,.6);color:#fff;text-decoration:none;font-weight:700;padding:14px 26px;border-radius:999px;font-size:15px}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-line{display:inline-flex;align-items:center;gap:10px;background:#06c755;color:#fff;text-decoration:none;font-weight:800;padding:15px 30px;border-radius:999px;font-size:15.5px;box-shadow:0 6px 22px rgba(6,199,85,.28)}
.btn-line:hover{background:#05b04c}
.btn-line svg{width:22px;height:22px;fill:currentColor;flex:none}

/* --- 数字バンド --- */
.stats{background:var(--forest);color:#fff;border-top:1px solid rgba(255,255,255,.09)}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.stat{padding:34px 12px 30px;text-align:center;border-left:1px solid rgba(255,255,255,.09)}
.stat:first-child{border-left:0}
.stat .v{font-family:var(--display);font-size:clamp(34px,7.4vw,58px);font-weight:900;line-height:.96;letter-spacing:.01em}
.stat .v span{font-family:inherit;font-size:.42em;font-weight:800;margin-left:3px}
.stat .l{font-size:11.5px;color:#aab6ad;margin-top:7px;letter-spacing:.05em}

/* --- 汎用セクション --- */
.section{padding:70px 0}
.section.tint{background:#f7f9f7}
.section.tight{padding:52px 0}
/* 節番号。数字だけ英字のコンデンスト体にして、横に短い畳色の線を引く */
.eyebrow{display:flex;align-items:center;gap:11px;font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--accent);margin:0 0 14px;text-transform:uppercase}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--tatami);flex:none}
.eyebrow i{font:900 15px/1 var(--display);font-style:normal;letter-spacing:.06em;color:var(--tatami)}
.center .eyebrow{justify-content:center}
/* 見出しを大きくする。日本語のまま大きくするのが要点で、英語に逃げない */
.h2{font-size:clamp(26px,5.2vw,48px);font-weight:900;line-height:1.22;letter-spacing:-.035em;margin:0 0 22px}
.lead{color:var(--ink-2);margin:0 0 38px;font-size:15px;max-width:70ch}
.center{text-align:center}
.center .lead{margin-inline:auto}

/* --- コンセプト（畳の帯） --- */
.concept{background:#fff;border:1px solid var(--line);border-left:5px solid var(--tatami);border-radius:var(--radius);padding:34px 32px}
.concept .kicker{font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--tatami);margin:0 0 12px}
.concept p{margin:0 0 14px;font-size:16.5px;line-height:1.95}
.concept p:last-child{margin-bottom:0}
.concept .words{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.concept .words span{background:var(--surface);border-radius:999px;padding:7px 16px;font-size:13.5px;font-weight:700;color:var(--ink-2)}

/* --- カード --- */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px}
.card .no{font-family:var(--display);font-size:44px;font-weight:900;line-height:.9;letter-spacing:.02em;color:var(--tatami);margin-bottom:14px}
.card h3{font-size:17px;font-weight:800;margin:0 0 10px;line-height:1.5}
.card p{margin:0;font-size:14.5px;color:var(--ink-2)}

/* --- 活動内容（種目） --- */
.disciplines{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.disc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px}
.disc .en{font-family:var(--display);font-size:24px;letter-spacing:.02em;color:var(--tatami);font-weight:900;line-height:1;margin:0 0 8px;text-transform:uppercase}
.disc h3{margin:0 0 8px;font-size:16px;font-weight:800}
.disc p{margin:0;font-size:14px;color:var(--ink-2)}

/* --- 初めての方へ（手順） --- */
.steps{counter-reset:s;display:grid;gap:14px}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 26px 24px 76px;position:relative}
.step::before{counter-increment:s;content:"0" counter(s);position:absolute;left:22px;top:19px;font-family:var(--display);font-size:38px;font-weight:900;line-height:1;color:var(--tatami)}
.step h3{margin:0 0 6px;font-size:16px;font-weight:800}
.step p{margin:0;font-size:14.5px;color:var(--ink-2)}

/* --- 練習日程 --- */
.sched{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.day{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 14px;text-align:center}
.day .m{font-size:11.5px;color:var(--ink-2);letter-spacing:.08em}
.day .d{font-family:var(--display);font-size:52px;font-weight:900;line-height:.92;margin:4px 0 6px;letter-spacing:.01em}
.day .w{display:inline-block;font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 11px;background:var(--surface);color:var(--ink-2)}
.day .t{font-size:12.5px;color:var(--ink-2);margin-top:10px}
.sched-note{margin:22px 0 0;font-size:13px;color:var(--ink-2)}

/* --- 料金（ここだけ面の色を変えてページを割る） --- */
.section.price-band{background:#ddd3b6;color:var(--forest)}
.section.price-band .eyebrow{color:var(--forest)}
.section.price-band .eyebrow::before{background:var(--forest)}
.section.price-band .eyebrow i{color:var(--forest)}
.section.price-band .lead{color:#4a5c4e}
.section.price-band .price-list{background:rgba(255,255,255,.62);border-color:rgba(32,56,44,.2)}
.section.price-band .price-item{border-top-color:rgba(32,56,44,.2)}
.section.price-band .price-item .desc{color:#4a5c4e}
.section.price-band .price-item .price{font-family:var(--display);font-size:34px;font-weight:900;color:var(--forest)}
/* --- 料金 --- */
.price-list{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.price-item{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 26px;border-top:1px solid var(--line)}
.price-item:first-child{border-top:0}
.price-item .name{font-weight:800;font-size:16px}
.price-item .desc{font-size:13px;color:var(--ink-2);margin-top:3px}
.price-item .price{font-weight:800;font-size:19px;white-space:nowrap;color:var(--accent-dark)}
@media(max-width:560px){.price-item{flex-direction:column;align-items:flex-start;gap:6px}.price-item .price{font-size:21px}}

/* --- 写真 --- */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.gallery img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
.nomikai-gallery{margin:22px 0 26px}
.nomikai-gallery img{height:auto;aspect-ratio:4/3;object-fit:cover}
.next-practice{margin:14px 0 0;font-size:14px;font-weight:700;color:#fff;background:rgba(0,0,0,.45);display:inline-block;padding:6px 12px;border-radius:8px}
.photo-note{margin:18px 0 0;font-size:12.5px;color:var(--ink-2)}

/* --- クチコミ --- */
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:20px}
.review{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;position:relative}
.review::before{content:"\201C";position:absolute;top:6px;left:20px;font-size:56px;line-height:1;color:var(--accent);opacity:.15;font-family:Georgia,serif}
.review p{margin:0;font-size:14.5px;position:relative}
.review .by{margin-top:16px;font-size:12px;color:var(--ink-2)}
.review-src{margin:24px 0 0;font-size:12px;color:var(--ink-2);text-align:center}
.review-map{margin:24px auto 0;max-width:820px}
.media{margin:34px auto 0;max-width:820px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 26px}
.media h3{margin:0 0 12px;font-size:16px;font-weight:800}
.media ul{margin:0;padding:0;list-style:none}
.media li{display:flex;gap:16px;padding:8px 0;border-top:1px solid var(--line);font-size:14.5px}
.media li:first-child{border-top:0}
.media .d{flex:none;width:7.5em;color:var(--ink-2);font-size:13px;padding-top:2px}
@media(max-width:560px){.media li{flex-direction:column;gap:2px}}
.review-map iframe{display:block;width:100%;aspect-ratio:16/9;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
@media(max-width:600px){.review-map iframe{aspect-ratio:4/3}}
.rating{display:inline-flex;align-items:baseline;gap:12px;margin:0 auto 26px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:12px 28px}
.rating .score{font-family:var(--display);font-size:44px;font-weight:900;line-height:1;color:var(--accent-dark)}
.rating .stars{color:var(--tatami);font-size:15px;letter-spacing:.1em}
.rating .count{font-size:12.5px;color:var(--ink-2)}

/* --- FAQ --- */
.faq{max-width:820px;margin-inline:auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;overflow:hidden}
.faq summary{cursor:pointer;padding:19px 52px 19px 24px;font-weight:700;font-size:15.5px;list-style:none;position:relative;line-height:1.6}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:21px;font-weight:400;color:var(--accent);line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq .a{padding:0 24px 22px;color:var(--ink-2);font-size:14.5px}

/* --- アクセス --- */
.info{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
@media(max-width:860px){.info{grid-template-columns:1fr;gap:28px}}
.info-table{width:100%;border-collapse:collapse;font-size:14.5px}
.info-table th,.info-table td{text-align:left;vertical-align:top;padding:15px 0;border-bottom:1px solid var(--line)}
.info-table th{width:104px;color:var(--ink-2);font-weight:700;white-space:nowrap;font-size:13.5px}
.info-table a{font-weight:700}
.map{width:100%;aspect-ratio:4/3;border:0;border-radius:var(--radius)}
.routes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.route{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px}
.route h3{margin:0 0 6px;font-size:17px;font-weight:800;display:flex;align-items:center;gap:9px}
.route h3 .ic{width:30px;height:30px;border-radius:50%;background:var(--surface);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:14px;flex:none}
.route ol{margin:14px 0 0;padding-left:20px;font-size:14.5px;color:var(--ink-2)}
.route ol li{margin-bottom:7px}
.route .note{margin:14px 0 0;font-size:13px;color:var(--ink-2);background:var(--surface);border-radius:10px;padding:12px 14px}

/* --- 問い合わせ（LINE主・メール電話は併記） --- */
.contact-main{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:38px 32px;text-align:center}
.contact-main h3{margin:0 0 10px;font-size:20px;font-weight:800}
.contact-main p{margin:0 auto 24px;max-width:56ch;font-size:14.5px;color:var(--ink-2)}
.contact-sub{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:16px}
.contact-sub a{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;text-decoration:none}
.contact-sub .k{font-size:11.5px;font-weight:800;letter-spacing:.12em;color:var(--ink-2)}
.contact-sub .v{font-size:17px;font-weight:800;margin-top:5px;word-break:break-all}

/* --- メンバー --- */
.members{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.member{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.member .ph{aspect-ratio:4/3;background:var(--surface);display:flex;align-items:center;justify-content:center;color:#a3ada5;font-size:12.5px;letter-spacing:.06em;text-align:center;padding:16px}
.member .ph img{width:100%;height:100%;object-fit:cover}
.member .body{padding:24px 24px 26px;flex:1;display:flex;flex-direction:column}
.member .role{font-size:11px;font-weight:800;letter-spacing:.13em;color:var(--tatami);margin:0 0 6px}
.member h3{margin:0 0 4px;font-size:19px;font-weight:800}
.member .meta{font-size:12.5px;color:var(--ink-2);margin:0 0 14px}
.member dl{margin:0 0 14px}
.member dt{font-size:13px;font-weight:800;color:var(--accent);margin-bottom:3px}
.member dd{margin:0 0 12px;font-size:14.5px;color:var(--ink-2)}
.todo{background:repeating-linear-gradient(135deg,var(--surface),var(--surface) 10px,#e3e7e0 10px,#e3e7e0 20px);border:1px dashed #b9c2ba;border-radius:10px;padding:16px 18px;font-size:13.5px;color:var(--ink-2);line-height:1.75}
.todo b{color:var(--ink)}

/* --- 練習風景（日付ごとの記録） --- */
.log{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:26px}
.log-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:22px 26px 14px}
.log-date{font-size:13px;font-weight:800;letter-spacing:.06em;color:#fff;background:var(--accent);border-radius:999px;padding:4px 14px;flex:none}
.log-head h3{margin:0;font-size:18px;font-weight:800;line-height:1.5}
.log-body{padding:0 26px 18px;font-size:14.5px;color:var(--ink-2)}
/* 横スクロールのスライド。ライブラリを足さずに指で送れる形にしてある */
.slides{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:0 26px 22px}
.slides::-webkit-scrollbar{height:6px}
.slides::-webkit-scrollbar-thumb{background:#cdd4cc;border-radius:3px}
.slides img,.slides iframe{flex:0 0 min(78%,420px);scroll-snap-align:start;border-radius:10px;aspect-ratio:4/3;object-fit:cover;background:var(--surface);border:0}
.slide-hint{font-size:12px;color:var(--ink-2);padding:0 26px 20px;margin:0}
.log-empty{border:1px dashed #b9c2ba;background:var(--surface);border-radius:var(--radius);padding:30px 28px;font-size:14.5px;color:var(--ink-2)}

/* ===========================================================
   練習会日記（ブログ）── 雑誌の見開きに寄せた組み
   ①写真が主役。見出しと日付は写真の邪魔をしない位置に置く
   ②先頭の1本だけ大きく扱う。全部同じ大きさにすると目が滑る
   ③縦写真が多いので、一覧のカードは 3:4 で受ける（横に切ると顔が欠ける）
   =========================================================== */
.ed-head{padding:74px 0 40px;border-bottom:1px solid var(--line)}
.ed-head .kicker{display:flex;align-items:center;gap:11px;font-size:11px;font-weight:800;letter-spacing:.26em;color:var(--accent);margin:0 0 20px}
.ed-head .kicker::before{content:"";width:34px;height:2px;background:var(--tatami);flex:none}
.ed-head h1{font-size:clamp(29px,6.2vw,54px);font-weight:800;line-height:1.26;margin:0 0 22px;letter-spacing:.005em}
.ed-head p{margin:0;max-width:54ch;color:var(--ink-2);font-size:15.5px;line-height:2}
.ed-head .count{margin-top:28px;font-size:11.5px;letter-spacing:.16em;color:var(--ink-2)}

.dateline{display:flex;align-items:center;gap:13px;font-size:11.5px;font-weight:700;letter-spacing:.18em;color:var(--ink-2)}
.dateline::after{content:"";height:1px;width:40px;background:var(--tatami)}

.feature{display:block;text-decoration:none;color:inherit;padding:54px 0 58px;border-bottom:1px solid var(--line)}
.feature .ph{aspect-ratio:16/9;overflow:hidden;border-radius:3px;background:var(--surface)}
.feature .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.feature:hover .ph img{transform:scale(1.035)}
.feature .txt{max-width:62ch;margin-top:32px}
.feature h2{font-size:clamp(21px,3.7vw,34px);font-weight:800;line-height:1.45;margin:15px 0 16px}
.feature .ex{margin:0;color:var(--ink-2);font-size:15.5px;line-height:2.1}
.readmore{display:inline-flex;align-items:center;gap:9px;margin-top:24px;font-size:13.5px;font-weight:800;color:var(--accent);letter-spacing:.05em}
.readmore::after{content:"92";transition:transform .28s}
.feature:hover .readmore::after,.pcard:hover .readmore::after{transform:translateX(6px)}

.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 34px;padding:56px 0 4px}
.pcard{display:block;text-decoration:none;color:inherit}
.pcard .ph{aspect-ratio:3/4;overflow:hidden;border-radius:3px;background:var(--surface)}
.pcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.pcard:hover .ph img{transform:scale(1.045)}
.pcard h3{font-size:17px;font-weight:800;line-height:1.62;margin:18px 0 10px}
.pcard .ex{margin:0;color:var(--ink-2);font-size:13.8px;line-height:1.95;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* 古いものは写真を出さず行で並べる。量があることだけ伝わればよい */
.arch{border-top:1px solid var(--line);margin-top:64px;padding-top:38px}
.arch h2{font-size:12px;font-weight:800;letter-spacing:.2em;color:var(--ink-2);margin:0 0 6px}
.arch a,.arch span{display:flex;align-items:baseline;gap:18px;padding:19px 2px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;transition:padding-left .25s}
.arch a:hover{padding-left:10px}
.arch time{flex:none;font-size:11.5px;font-weight:700;letter-spacing:.12em;color:var(--ink-2);width:8.5em}
.arch b{font-weight:700;font-size:15px;line-height:1.6}

@media(max-width:900px){.pgrid{grid-template-columns:repeat(2,1fr);gap:40px 26px}}
@media(max-width:600px){
  .pgrid{grid-template-columns:1fr;gap:42px;padding:42px 0 4px}
  .pcard .ph{aspect-ratio:4/3}
  .ed-head{padding:52px 0 32px}
  .feature{padding:38px 0 42px}
  .feature .txt{margin-top:24px}
  .arch time{width:auto;display:block}
  .arch a,.arch span{display:block}
  .arch b{display:block;margin-top:5px}
}

/* --- 記事ページ --- */
.post-hero{height:min(58vh,520px);overflow:hidden;background:var(--forest)}
.post-hero img{width:100%;height:100%;object-fit:cover}
.post-title{padding:54px 0 0}
.post-title h1{font-size:clamp(24px,4.7vw,42px);font-weight:800;line-height:1.4;margin:16px 0 0;max-width:24ch}
.post-body{max-width:34em;margin:0 auto;padding:44px 0 8px;font-size:16.5px;line-height:2.2;letter-spacing:.015em}
.post-body p{margin:0 0 1.9em}
.post-body p:last-child{margin-bottom:0}
.post-fig{margin:52px 0}
.post-fig img{width:100%;border-radius:3px;display:block}
.post-fig figcaption{font-size:12px;color:var(--ink-2);margin-top:11px;letter-spacing:.05em}
.post-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;margin:46px auto;max-width:38em}
.post-box h3{margin:0 0 16px;font-size:13px;font-weight:800;letter-spacing:.14em;color:var(--accent)}
.post-box ul{margin:0;padding-left:1.15em}
.post-box li{margin-bottom:9px;font-size:14.5px;color:var(--ink-2);line-height:1.9}
.post-box li:last-child{margin-bottom:0}
.days{display:flex;flex-wrap:wrap;gap:8px}
.days span{background:var(--surface);border-radius:7px;padding:9px 15px;font-size:14px;font-weight:700}
.post-foot{border-top:1px solid var(--line);margin-top:62px;padding-top:34px}

/* --- Instagram（実投稿の埋め込み） ---
   公式の embed を iframe で直に叩いている。
   トークンもプラグインも要らないので、今日から動く。
   重い（1枚600KB前後）ので必ずページ下部・ lazy で読む。 */
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:34px 0 0}
.ig-grid iframe{width:100%;aspect-ratio:9/13;border:1px solid var(--line);border-radius:3px;background:#fff;display:block}
@media(max-width:900px){.ig-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.ig-grid{grid-template-columns:1fr;gap:16px}.ig-grid iframe{aspect-ratio:9/12}}

/* --- 最終CTA --- */
.cta{background:var(--forest);color:#fff;text-align:center;padding:78px 0;position:relative}
.cta::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--tatami)}
.cta h2{font-size:clamp(21px,4vw,32px);font-weight:800;margin:0 0 16px;line-height:1.45}
.cta p{color:#c9d3cb;margin:0 auto 32px;max-width:60ch;font-size:15px}
.cta .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* --- フッター --- */
footer{background:#161f1a;color:#8e9a92;padding:44px 0 96px;font-size:13px}
.nap{color:#e3e8e4;font-weight:700;line-height:1.9;margin-bottom:14px}
.foot-nav{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:22px}
.foot-nav a{color:#c3ccc5;text-decoration:none;font-weight:700;font-size:13.5px}
.foot-nav a:hover{color:#fff}

/* --- 追従CTA（スマホ） --- */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:10px;padding:10px 14px;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
.sticky-cta a{flex:1;text-align:center;text-decoration:none;font-weight:800;font-size:14.5px;padding:14px 8px;border-radius:999px}
.sticky-cta .tel{background:#fff;border:1.5px solid var(--ink);color:var(--ink)}
.sticky-cta .book{background:#06c755;color:#fff}
@media(max-width:768px){.sticky-cta{display:flex}body{padding-bottom:74px}}

/* 2026-09-04: PCでヒーローだけ左端がずれていたのを、ヘッダー・本文・フッターに揃える */
.hero-inner{max-width:none;margin-inline:auto}
.hero-inner>*{max-width:720px}
/* 2026-09-04: セクション末尾のボタンを中央に置くための指定 */
.cta-center{margin-top:32px;text-align:center}
/* 2026-09-04: 直前のCTAが中央なので、フッターも中央に揃える */
footer .wrap{text-align:center}
footer .foot-nav{justify-content:center}
/* 2026-09-04: サブナビの1つ目だけ左パディングを外し、ロゴと左端を揃える */
.subnav li:first-child a{padding-left:0}

/* ── 2026-09-04 仁さんのご要望：ページ全体の背景を白でなく畳にする ──
   本文は白いカラムのまま畳の上に置く。PCでは左右の余白に畳が見える。
   🚨 本文まで畳にすると文字が読めなくなるので、白い紙を敷く形にしてある。 */
body{
  background:#cfd2c4; /* 2026-09-08：実体は末尾の body::before（畳レイヤー）へ移した */
}
/* 既定で .wrap を白い紙にする */
.wrap{background:var(--bg)}
/* 濃い背景の上に乗っている .wrap は透明のまま */
header .wrap,.hero .wrap,.stats .wrap,.cta .wrap,footer .wrap,.page-head .wrap,.subnav .wrap{background:transparent}
/* セクションの背景色は紙のほうへ移す */
.section{background:transparent;padding:0}
.section>.wrap{padding:70px 32px}
.section.tint>.wrap{background:#f7f9f7}
/* iOSで fixed 背景がガタつくのでスマホは通常スクロールに戻す */
@media(max-width:768px){
  .section>.wrap{padding:56px 20px}
}
/* セクション側の背景色を紙（.wrap）へ移す。.section.tint / .section.price-band は .section より詳細度が高いので個別に打ち消す */
.section.tint,.section.price-band{background:transparent}
.section.price-band>.wrap{background:#ddd3b6}
/* 2026-09-04: 畳の見える面積を増やす。紙をセクションごとに切り離し、間に畳を通す。
   🚨 左右の幅は動かさない（ヘッダー・ヒーローと左端が揃わなくなるため）。増やすのは上下。 */
.section{padding:16px 0}
.section>.wrap{padding:58px 32px;border-radius:8px;box-shadow:0 3px 20px rgba(0,0,0,.14)}
@media(max-width:768px){
  .section{padding:10px 0}
  .section>.wrap{padding:48px 20px;border-radius:6px}
}
/* 2026-09-05: 数字の帯を軽くする。濃緑の全幅ベタだと背景（青空・畳）から浮くので、
   他のセクションと同じ「白い紙」に載せて、文字色を反転させる。 */
.stats{background:transparent;color:var(--ink);border-top:0;padding:16px 0}
.stats>.wrap{background:var(--bg);border-radius:8px;box-shadow:0 3px 20px rgba(0,0,0,.14);overflow:hidden}
.stats .stat{border-left:1px solid rgba(32,56,44,.10)}
.stats .stat:first-child{border-left:0}
.stats .stat .v{color:var(--forest)}
.stats .stat .l{color:var(--ink-2)}
/* 2026-09-05: ロゴマークを追加（マークはChatGPT生成／文字はここで組む）。
   画像に文字を焼くと後から直せないので、マークだけ画像・文字はHTMLのまま。 */
.logo{display:inline-flex;align-items:center;gap:11px;text-decoration:none}
.logo-mark{width:36px;height:auto;flex:0 0 auto;display:block}
.logo-txt{display:block;line-height:1.3}
@media(max-width:640px){ .logo-mark{width:30px} .logo{gap:9px} }
/* 2026-09-05: SPで3カラムのまま潰れていたのを縦積みにする。
   🚨 .stats-grid は repeat(3,1fr) 固定でブレークポイントが無かった。
   .cols も minmax(255px) だと狭い画面で2〜3列に残るので、SPでは1列に固定する。 */
@media(max-width:768px){
  /* 🚨 2026-09-05夜 差し戻し：仁さん 9:26「もともとの横のが良かった」＝SPでも3列の横並びを維持する。
     縦積みにすると「元プロ在籍」が下に落ちて、ひと目で3つ見えなくなるのが理由と解釈した。 */
  .stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stats .stat .l{overflow-wrap:anywhere;word-break:auto-phrase}
  .stats .stat{border-left:1px solid rgba(32,56,44,.10);border-top:0;padding:20px 6px 18px}
  .stats .stat:first-child{border-left:0}
  .stats .stat .v{font-size:clamp(19px,5.4vw,30px);letter-spacing:-.01em}
  .stats .stat .v span{font-size:.46em}
  .stats .stat .l{font-size:9.5px;line-height:1.5;margin-top:5px;letter-spacing:0}
  .cols{grid-template-columns:1fr;gap:14px}
}
/* 2026-09-05: 集合写真は本文に置く。表示幅が小さいので、元データが低解像度でも粗が出ない。 */
.photo-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
.photo-row figure{margin:0;border-radius:8px;overflow:hidden;background:#e9ece9;box-shadow:0 2px 12px rgba(0,0,0,.10)}
.photo-row img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.photo-cap{margin-top:12px;font-size:12.5px;color:var(--ink-2);text-align:center}
@media(max-width:768px){ .photo-row{grid-template-columns:1fr;gap:12px} }
/* 2026-09-05: 種目カードに写真を入れる（miyuさん「MMAとかグラップリングは聞き慣れないので
   イメージ写真があったほうが参加後のイメージがしやすい」）。説明も1行から3〜4行に増やした。 */
.disc .disc-ph{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;margin-bottom:14px;background:#e9ece9}
.disc p.note{margin-top:10px;font-size:12.5px;color:var(--ink-2)}
/* 2026-09-05: GLOVE KARATE だけ英字が2行に折れてカードの高さが揃わなかったので、
   1行に収まる大きさに詰める。折れないことを優先し、はみ出す場合は自動で縮める。 */
.disc .en{font-size:clamp(15px,1.45vw,21px);white-space:nowrap;overflow:hidden;text-overflow:clip}
.disciplines{align-items:stretch}
.disc{display:flex;flex-direction:column}
.disc .note{margin-top:auto;padding-top:10px}
@media(max-width:768px){ .disc .en{font-size:20px} }

/* ══ 2026-09-05 夜：LINEでいただいたご指摘の反映 ══════════════════════
   仁さん 9:09 畳の色／9:10 TOP画／9:14 種目の分け方／9:17・9:20 横並びと横幅
   miyuさん 13:37 広い畳／13:39 アクセス文／仁さん 9:51 飲み会・15:00 写真に文字を重ねる
   🚨 畳の色（緑のプラスチック畳）とTOP画は画像側で差し替え済み。ここはレイアウトだけ。 */

/* 仁さん 9:20「横幅は最大限使いたい」＝紙を 1080→1280px に広げた。
   広げたぶん内側の余白を足して、1行が長くなりすぎないようにする。 */
.section>.wrap{padding:62px 48px}
@media(max-width:900px){ .section>.wrap{padding:48px 20px} }

/* 出身ジム。仁さん 9:26「行を変えて載せてください」 */
.origins{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.origins li{position:relative;padding-left:18px;font-weight:800;font-size:15.5px}
.origins li::before{content:"";position:absolute;left:0;top:.72em;width:9px;height:2px;background:var(--tatami)}

/* 種目＝3カラムの縦カードをやめ、写真と文章の「横並び」にする。
   仁さん 9:17「横並びにしてかつ単調にならないように」／9:20「写真を縦ではなく横にも」。
   1枚ずつ全幅で使い、写真の左右を1枚おきに入れ替えて単調さを消す。 */
.disciplines{grid-template-columns:1fr;gap:18px}
.disc{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);gap:0;padding:0;overflow:hidden;align-items:stretch}
.disc .disc-ph{margin:0;width:auto;aspect-ratio:auto;border-radius:0;background:#e9ece9;overflow:hidden}
.disc .disc-ph img{width:100%;height:100%;min-height:240px;object-fit:cover;display:block}
.disc .disc-tx{padding:30px 34px 28px;display:flex;flex-direction:column;justify-content:center}
.disc .disc-tx p{margin:0 0 10px;font-size:14.5px;line-height:1.9}
.disc h3{font-size:20px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.disc h3 .sub{font-size:11.5px;font-weight:800;letter-spacing:.08em;color:#fff;background:var(--accent);border-radius:999px;padding:3px 11px}
.disc .note{margin:12px 0 0!important;padding-top:0}
.disc:nth-child(even) .disc-ph{order:2}
@media(max-width:820px){
  .disc{grid-template-columns:1fr}
  .disc:nth-child(even) .disc-ph{order:0}
  .disc .disc-ph img{min-height:0;aspect-ratio:16/9}
  .disc .disc-tx{padding:24px 22px}
}

/* 写真の上に文字を重ねる帯。仁さん 15:00「こんなふうに重ねるのはありだと思います」
   ／miyuさん 13:37「広々した畳で安全に快適に練習出来るのもアピール出来たら」 */
.photo-band{position:relative;width:min(100% - 40px,var(--wrap));margin:16px auto;border-radius:8px;overflow:hidden;
  box-shadow:0 3px 20px rgba(0,0,0,.14);min-height:340px;display:flex;align-items:flex-end;background:#1e2620}
.photo-band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.95)}
.photo-band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,34,27,.12) 0%,rgba(20,34,27,.60) 55%,rgba(20,34,27,.88) 100%)}
.photo-band-tx{position:relative;z-index:2;color:#fff;padding:40px 48px 42px;max-width:780px}
.photo-band-tx .eyebrow{color:#fff;margin-bottom:10px}
.photo-band-tx .eyebrow i{color:var(--tatami)}
.photo-band-tx h2{font-size:clamp(22px,3.6vw,36px);font-weight:900;line-height:1.26;letter-spacing:-.03em;margin:0 0 12px}
.photo-band-tx p{margin:0;font-size:14.5px;line-height:1.9;color:#dde4de}
@media(max-width:820px){ .photo-band{min-height:270px} .photo-band-tx{padding:28px 20px 30px} }

/* セクションの背景に写真を敷いてぼかす。仁さん 9:17「背景に写真を入れるとかぼかすとか」。
   🚨 紙は残す（透過を強くすると本文が読めなくなる）。写真は紙の外側とうっすら奥に見える。 */
.section.has-bg{position:relative;isolation:isolate;overflow:hidden}
.section.has-bg .sect-bg{position:absolute;inset:0;background-size:cover;background-position:center 40%;filter:blur(6px) saturate(.9);transform:scale(1.08);z-index:-1}
.section.has-bg>.wrap{background:rgba(255,255,255,.91)}

/* 飲み会＝文章と写真を横に並べる（仁さん 9:32「写真など入れてデザインUP」） */
.drink{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,36%);gap:30px;align-items:start}
.drink-tx p{margin:0 0 12px;font-size:15.5px;line-height:1.95}
.drink-tx p.note{font-size:13px;color:var(--ink-2);margin-top:16px}
.drink-ph{border-radius:8px;overflow:hidden;background:#e9ece9}
.drink-ph img{width:100%;height:auto;object-fit:cover;aspect-ratio:4/5;display:block}
@media(max-width:820px){ .drink{grid-template-columns:1fr;gap:18px} .drink-ph img{aspect-ratio:16/10} }
.join-note{margin:12px 0 0;text-align:center;font-size:13px;color:var(--ink-2)}
.btn-ghost-dark{display:inline-block;border:1px solid rgba(32,56,44,.35);color:var(--forest);text-decoration:none;font-weight:700;padding:13px 26px;border-radius:999px;font-size:14.5px}
.btn-ghost-dark:hover{background:rgba(32,56,44,.07)}

/* 🚨 .words は .concept 配下にスコープされているので、交流セクションで使うと素のテキストになる。
   （交流会ページで一度踏んだのと同じ罠）→ ここで単体でも効くように定義しておく。 */
.words{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.words span{background:var(--surface);border-radius:999px;padding:7px 16px;font-size:13.5px;font-weight:700;color:var(--ink-2)}

/* 種目カード：写真が縦位置（b4/b5＝360x480）だと行の高さが写真に引っ張られて間延びする。
   写真を絶対配置にして、行の高さは文章側で決める。 */
.disc .disc-ph{position:relative;min-height:270px}
.disc .disc-ph img{position:absolute;inset:0;width:100%;height:100%;min-height:0;object-fit:cover}
@media(max-width:820px){ .disc .disc-ph{min-height:0;aspect-ratio:16/9} }

/* ヒーロー：仁さん 9:10 で集合写真に差し替えたので、人が見える濃さまで覆いを薄くする。 */
.hero-bg::after{background:linear-gradient(180deg,rgba(23,40,32,.72) 0%,rgba(23,40,32,.40) 42%,rgba(23,40,32,.82) 100%)}

/* 飲み会の写真は横位置寄りにして、文章との高さ差を詰める。 */
.drink-ph img{aspect-ratio:4/3}

/* ══ 2026-09-05 夜2：LINEのスクショ4枚で判明した分 ══════════════════
   仁さん 9:09「背景はこのようなイメージ」＝参考は jin2012.jp の“実写のテクスチャ”。
   → 手で描いた無地の畳をやめ、**実物の柔道場の畳の写真**を地にした。
   写真＝miyuさんがご指定の 王子スポーツセンター 柔道場（2026-09-05 13:41）。 */
body{background:#cfd2c4}

/* 写真を背景に敷いて文字を重ねる帯（仁さん 9:19「こんなふうに背景がいいかと思います」＝
   jin2012.jp の「創作鞄槌井が選ばれるには理由があります。」と同じ形）。
   🔑 写真は img で置いてあるので、差し替えは1行の src を替えるだけ＝「入れ替え可能ですか？」の答えは可能。 */
.hero-band{position:relative;width:min(100% - 40px,var(--wrap));margin:16px auto;border-radius:8px;overflow:hidden;
  box-shadow:0 3px 20px rgba(0,0,0,.16);background:#1e2620;display:flex;align-items:center;min-height:420px}
.hero-band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%}
.hero-band::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(18,30,24,.90) 0%,rgba(18,30,24,.80) 46%,rgba(18,30,24,.42) 100%)}
.hero-band-tx{position:relative;z-index:2;color:#fff;padding:46px 48px;max-width:660px}
.hero-band-tx .eyebrow-w{margin:0 0 12px;font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--tatami)}
.hero-band-tx h2{font-size:clamp(22px,3.4vw,34px);font-weight:900;line-height:1.3;letter-spacing:-.03em;margin:0 0 18px}
.hero-band-tx p{margin:0 0 12px;font-size:14.5px;line-height:1.95;color:#e2e8e3}
.hero-band-tx p.strong{margin-top:18px;margin-bottom:0;font-weight:800;color:#fff;font-size:15.5px}
@media(max-width:820px){ .hero-band{min-height:0} .hero-band-tx{padding:32px 22px;max-width:none}
  .hero-band::after{background:linear-gradient(180deg,rgba(18,30,24,.72) 0%,rgba(18,30,24,.90) 100%)} }

/* 2026-09-05夜3: 最後の見学CTAも写真の上に置く（仁さん 9:19 の参考＝jin2012.jp と同じ形）。 */
.cta-photo{position:relative;overflow:hidden;background:#1a271f}
.cta-photo .cta-bg{position:absolute;inset:0;background:url("../img/g3-hd.jpg") center 30%/cover;transform:scale(1.05)}
.cta-photo .cta-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,34,27,.86) 0%,rgba(20,34,27,.78) 100%)}
.cta-photo>.wrap{position:relative;z-index:2}

/* ── 2026-09-08 仁さんのご要望①「背景を畳全面で」 ──
   これまでの ../img/tatami.jpg は柔道場の"部屋全体"の写真で、天井・窓・壁が2/3を占め、
   畳は下1/3しか写っていなかった。畳だけを切り出した ../img/tatami-floor.jpg に差し替える。
   ── ご要望②「背景の縦長を直したい」 ──
   🚨 原因：body に直接 background を敷くと、背景の描画領域が"ページ全体の高さ"（数千px）
      になるため cover が縦に引き伸ばされる。SPで background-attachment:scroll に
      戻していたのがまさにこれ。position:fixed の擬似要素を1枚敷けば常にビューポート基準に
      なり、伸びも繰り返しも起きない。iOSで壊れる background-attachment:fixed も使わない。
   🚨 z-index:-1 は body の子。body は stacking context を作らないので本文より必ず後ろに入る。 */
/* 🚨 2026-09-08 併せて修正：<section class="wrap ed-head"> は .wrap 自身が白い紙なのに
   .ed-head の padding が上下だけ（左右0）で、見出しが紙の左端に張り付き、
   大きい字だと1文字目がはみ出して切れていた。他のセクションと同じ左右余白を入れる。 */
.wrap.ed-head{padding-left:32px;padding-right:32px}
@media(max-width:768px){ .wrap.ed-head{padding-left:20px;padding-right:20px} }
html{background:#cfd2c4}
body{background:transparent}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    /* 🚨 畳の写真は赤い帯が強い。い草色の覆いを1枚かけて赤を沈め、
       同時に「畳＝緑」に見えるようにする。覆いを濃くしすぎると灰色になって
       畳に見えなくなるので、透過は3割まで。 */
    linear-gradient(180deg, rgba(124,138,92,.34) 0%, rgba(124,138,92,.24) 45%, rgba(110,124,82,.40) 100%),
    url("../img/tatami-floor.jpg") center center/cover no-repeat;
  background-color:#96a37a;
  filter:saturate(.78);
}

/* ══════════════════════════════════════════════════════════════
   2026-09-08 仁さんのご要望④「白いところも無くしたい。カバン屋みたいに」
   jin2012.jp（創作鞄槌井）は濃い木目の地に白抜き文字で、白い面が1つも無い。
   同じ引き算をここでもやる：白い紙・白いカードを全部やめ、地を暗く落として
   文字を白抜きにする。
   🚨 打ち消しの塊なので、必ずスタイルシートの一番最後に置くこと。
   🔑 白い紙のレイアウトに戻したいときは、このブロックごと消せば戻る。
   ══════════════════════════════════════════════════════════════ */

/* 1) 色の土台をひっくり返す。
   🔑 --bg を transparent にすると .wrap と .stats>.wrap の「白い紙」が
      自動的に消える＝1つずつ打ち消さなくて済む。 */
:root{
  --bg:transparent;
  --ink:#f2efe4;
  --ink-2:#c0c4b6;
  --line:rgba(255,255,255,.17);
  --surface:rgba(255,255,255,.09);
}

/* 2) 紙の演出（角丸・影）も外す。面が無いのに影だけ残ると宙に浮いて見える。 */
.section>.wrap,.stats>.wrap{box-shadow:none;border-radius:0}

/* 3) 白ベタのカード類 → うっすら明るいだけの面にする */
.concept,.card,.disc,.step,.day,.price-list,.review,.rating,.faq details,
.route,.contact-main,.contact-sub a,.member,.log,.post-box{
  background:rgba(255,255,255,.06);
}
.log-empty{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.24)}
.todo{
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.08) 10px,rgba(255,255,255,.03) 10px,rgba(255,255,255,.03) 20px);
  border-color:rgba(255,255,255,.24);
}
.section.tint>.wrap,.section.has-bg>.wrap{background:rgba(255,255,255,.05)}

/* 4) 料金の帯：ベージュのベタ → 金の透け面。中の濃い文字も白抜きに戻す。 */
.section.price-band>.wrap{background:rgba(192,168,102,.13)}
.section.price-band{color:var(--ink)}
.section.price-band .eyebrow,.section.price-band .eyebrow i{color:var(--tatami)}
.section.price-band .eyebrow::before{background:var(--tatami)}
.section.price-band .lead,.section.price-band .price-item .desc{color:var(--ink-2)}
.section.price-band .price-list{background:rgba(255,255,255,.07);border-color:var(--line)}
.section.price-band .price-item{border-top-color:var(--line)}
.section.price-band .price-item .price{color:var(--tatami)}

/* 5) 細い緑文字は暗い地だと沈む。差し色は金（畳の縁）に寄せる。 */
.eyebrow,.ed-head .kicker,.readmore,.route h3 .ic{color:var(--tatami)}
.eyebrow::before,.ed-head .kicker::before{background:var(--tatami)}
.faq summary::after{color:var(--tatami)}
.stats .stat .v{color:var(--tatami)}

/* 6) 暗い地の上のゴーストボタン */
.btn-ghost-dark{border-color:rgba(255,255,255,.45);color:var(--ink)}
.btn-ghost-dark:hover{background:rgba(255,255,255,.10)}

/* 7) 写真が入る前の空き枠。明るいグレーのままだと白い面として見えてしまう。 */
.member .ph,.feature .ph,.pcard .ph,.slides img,.slides iframe{background:rgba(255,255,255,.07)}
/* 🚨 Instagram の埋め込みだけは中身が向こう持ちなので白いまま。枠だけ合わせる。 */
.ig-grid iframe{background:transparent;border-color:var(--line)}

/* 8) 地：畳を暗く落とす。白い紙が無くなったぶん、地が明るいままだと本文が読めない。
   畳の質感は残したいので、覆いは黒ではなく深い緑にする。 */
html{background:#141a12}
body::before{
  background:
    linear-gradient(180deg, rgba(18,26,16,.84) 0%, rgba(18,26,16,.78) 45%, rgba(14,20,13,.88) 100%),
    url("../img/tatami-floor.jpg") center center/cover no-repeat;
  background-color:#141a12;
  filter:saturate(.72);
}
/* 9) 白かった帯（ヘッダー・サブナビ・スマホ下部バー）。ここが一番目につく。 */
header{background:rgba(18,24,16,.88);border-bottom-color:var(--line)}
.subnav{background:rgba(18,24,16,.70);border-bottom-color:var(--line)}
.sticky-cta{background:rgba(18,24,16,.94);border-top-color:var(--line)}
.sticky-cta .tel{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}

/* 10) サブナビの現在地。緑（--accent）だと暗い地に沈むので金に。 */
.subnav a.on{color:var(--tatami);border-bottom-color:var(--tatami)}
/* 11) 🚨 Googleマップと Instagram の埋め込みだけは、中身が向こう持ちなので白いまま。
   ここは CSS では消せない＝白ゼロにできない唯一の場所。枠だけ地に馴染ませる。 */
.map{border:1px solid var(--line)}

/* ══════════════════════════════════════════════════════════════
   2026-09-08 ご要望⑤「ずっと往復ではなく、長いペラで少しずつデザインを変える」
   ページ構成は5ページのまま（原口さん確認済み）。縦に読み進めると地が変わる作りにする。
   🔑 HTMLは1行も触らない。既にある section の種類
      （素 / .tint / .price-band / .has-bg / .nomikai-box）に地を割り当てるだけで、
      下へ進むごとにテイストが切り替わる。
   帯の並び：畳（素）→ 深緑（.tint）→ 畳 → 写真（.photo-band）→ 金（料金）→ 濃茶（飲み会）
   ══════════════════════════════════════════════════════════════ */

/* A) 素の .section は地の畳をそのまま見せる（透過のまま・指定なし） */

/* B) .section.tint ＝ 深緑のベタ帯。全幅で切り替わるので「変わった」が伝わる。
   🚨 .section の padding を 0 にして margin に置き換える。padding のままだと
      帯の中に余白が入って、帯どうしがくっついて畳の隙間が出ない。 */
.section.tint{
  padding:0;
  margin:18px 0;
  background:linear-gradient(180deg,#1d2b21 0%,#16211a 100%);
  border-top:1px solid rgba(192,168,102,.30);
  border-bottom:1px solid rgba(192,168,102,.30);
}
.section.tint>.wrap{background:transparent;border-radius:0;box-shadow:none}

/* B') 深緑が2つ続いたら濃茶に振る。アクセスページは .tint が連続するため、
   同じ色が並んで「変わっていない」ように見えるのを防ぐ。 */
.section.tint + .section.tint{
  background:linear-gradient(180deg,#2a1c11 0%,#1e1309 100%);
}

/* C) 料金 ＝ 金のベール。下の畳が透ける。 */
.section.price-band{
  padding:0;
  margin:18px 0;
  background:rgba(192,168,102,.16);
  border-top:1px solid rgba(192,168,102,.45);
  border-bottom:1px solid rgba(192,168,102,.45);
}
.section.price-band>.wrap{background:transparent;border-radius:0;box-shadow:none}

/* D) 飲み会まわり ＝ 濃茶。koryu.html と地を揃えて「あちら側の話」だと分かるようにする。 */
.section.has-bg>.wrap{background:rgba(27,17,9,.74)}
/* 🚨 .nomikai-box の中身は #f7f9f7 の白い箱のままだった（白ゼロの取りこぼし）。 */
.nomikai-box .wrap{
  background:linear-gradient(180deg,rgba(42,28,17,.94) 0%,rgba(30,19,9,.94) 100%);
  border-color:rgba(216,188,142,.35);
  box-shadow:none;
}
.nomikai-box h2{color:var(--ink)}

/* ══════════════════════════════════════════════════════════════
   2026-09-08 ご要望⑥「サークルのほうは青空」
   地を「暗い畳」から「青空」に差し替える。飲み会（koryu.html）は濃茶のまま。
   🔑 配色は 2026-09-05 に飲み会ページ用に作った青空そのもの＝仁さんが一度見ている色。
   🚨 白ゼロは維持する。地が明るくなったので、本文は濃い半透明の面に載せて白抜きを保つ。
      --bg を「透明」から「濃い半透明」に戻すだけで、.wrap 系が一括で面を持つ。
   🔑 畳に戻したいときは、このブロックを消せば直前の暗い畳に戻る
      （../img/tatami-floor.jpg はサーバに置いたままにしてある）。
   ══════════════════════════════════════════════════════════════ */
html{background:#7ab8e8}
body::before{
  background:
    radial-gradient(120% 60% at 18% 12%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(90% 45% at 78% 26%, rgba(255,255,255,.78) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(70% 40% at 45% 6%, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 65%),
    linear-gradient(180deg,#4f9ede 0%,#7ab8e8 38%,#a9d5f2 68%,#dbecf8 100%);
  background-color:#7ab8e8;
  filter:none;
}
/* 本文の面。青空の上に濃い面を置き、文字は白抜きのまま（白い紙には戻さない）。 */
:root{ --bg:rgba(16,26,20,.66) }
.section>.wrap,.stats>.wrap,.wrap.ed-head{
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
}
/* 帯（深緑・金・濃茶）の中は面を持たない。帯そのものが地なので二重になる。 */
.section.tint>.wrap,.section.price-band>.wrap{background:transparent;border:0}
/* ヘッダーは空に対して締める */
header{background:rgba(16,26,20,.90)}
.subnav{background:rgba(16,26,20,.78)}

/* ══════════════════════════════════════════════════════════════
   2026-09-09 ご要望「スクロールしたら動く感じ」
   出典＝仁さんの本業サイト jin2012.jp（自作テーマ tsuchii の
   assets/js/common.js と assets/css/style.css）。あちらの数値をそのまま持ってきた：
     ・下から 15px 上がりながらフェード（fadeUp）
     ・写真は scale(1.1) から scale(1) へゆっくり引く（fadeAway）
     ・横に並んでいるものは 0.3秒ずつ遅れて出る（fadeul li:nth-child）
     ・発火位置＝要素が画面下から 1/6 だけ入ったところ（rootMargin -16%）
   🚨 JSが動かない環境で中身が消えないように、opacity:0 は html.js-anim が
      付いているときだけ効かせる。js-anim を付けるのはJS自身なので、
      JSが読めない・落ちた場合は全部見えたまま残る。
   🚨 動きが苦手な人の設定（prefers-reduced-motion: reduce）では一切動かさない。
   🚨 写真のズームは、はみ出すと崩れるので overflow:hidden を持つ箱の中だけに付ける
      （disc-ph / ph / figure / log / post-hero）。JS側で rv-zoom を付けている。
   🔑 やめたくなったら、このブロックとページ末尾のスクリプトを消せば元に戻る。
   ══════════════════════════════════════════════════════════════ */
/* 🚨 animation ではなく transition を使う理由（2026-09-09 実測して変更）
   animation に fill-mode:both を付けると、タブが裏にあるなどでアニメが走らない間、
   要素は「0%の状態＝透明」で固定される。つまり中身が見えないまま止まる。
   transition なら走らなくても最終状態（見える）になる。動きより中身を優先する。 */
@media (prefers-reduced-motion: no-preference){
  html.js-anim .rv{
    opacity:0;transform:translateY(15px);
    transition:opacity .5s ease-out, transform .5s cubic-bezier(.22,.61,.36,1);
    transition-delay:var(--rvd,0s);
  }
  html.js-anim .rv.rv-in{opacity:1;transform:none}
  html.js-anim .rv-zoom{transform:scale(1.1);transition:transform .9s cubic-bezier(.22,.61,.36,1);transition-delay:var(--rvd,0s)}
  html.js-anim .rv-in .rv-zoom{transform:scale(1)}
}

/* ══════════════════════════════════════════════════════════════
   2026-09-09 Rick「カバンと同じにして」
   実測した jin2012.jp（創作鞄槌井）の正体は、この2つだった：
     ① body に background-attachment:fixed ＝ 地のテクスチャが固定され、
        その上をコンテンツが流れる（これが仁さんの言う「背景を固定」）
     ② 左に 220px の縦長サイドバーが position:fixed。ロゴ・ナビ・電話・
        問い合わせ・SNSが全部そこに入っていて、スクロールしても動かない
   ここでは同じ構造にする。ただし素材は木目にしない＝畳のまま。
   🔑 理由＝仁さんご本人が 9/4 の電話で「行った時の雰囲気とホームページの
      雰囲気が一致していることが大事」と言っている（鞄屋が木の店舗だから
      サイトも木、という話）。会場は畳なので、ここは畳が正解。木目にすると
      鞄屋のコピーになる。
   🔑 元に戻したいときは、このブロックごと消せば直前の状態に戻る。
   ══════════════════════════════════════════════════════════════ */

/* ① 地＝暗い畳。position:fixed の1枚レイヤーなので、スクロールしても動かない。
   （iOSで壊れる background-attachment:fixed は使わない。見え方は同じ） */
html{background:#141a12}
body::before{
  background:
    linear-gradient(180deg, rgba(18,26,16,.84) 0%, rgba(18,26,16,.78) 45%, rgba(14,20,13,.88) 100%),
    url("../img/tatami-floor.jpg") center center/cover no-repeat;
  background-color:#141a12;
  filter:saturate(.72);
}
/* 面は持たせない＝地の畳がそのまま透ける。カバンのサイトと同じ考え方 */
:root{ --bg:transparent }
.section>.wrap,.stats>.wrap,.wrap.ed-head{border:0;border-radius:0}

/* ══════════════════════════════════════════════════════════════
   2026-09-09 復旧ブロック（⑤〜⑭をまとめ直したもの）
   🚨 事故の記録：.spot を消すための正規表現が、**CSSコメントの中に書いた
      説明文（divタグの例）にも一致し**、そこから本文の最初の
      閉じdivタグまでを丸ごと削除した（スタイルの閉じタグ・body開始タグ・ヘッダーが消えた）。
      → **HTMLのタグ文字列をコメントに書かない。**
        置換の前後で スタイル閉じタグ・body開始タグ の個数を必ず assert する。
   復旧＝壊れた範囲は連続1箇所だったので、ヘッダーは 9/8 のバックアップから継ぎ、
   失われたCSSは「最終形だけ」を入れ直した（途中で上書きされた版は入れていない）。
   ══════════════════════════════════════════════════════════════ */

/* ── 写真の3枚並び（丸が付かなかった＝余白を作らないので残す） ── */
.strip{
  width:min(100% - 40px, var(--wrap));
  margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);
  gap:10px;padding:6px 0 30px;
}
.strip img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid rgba(27,37,22,.18);display:block}
@media(max-width:640px){ .strip{gap:6px;padding:0 0 22px} }

/* ── 地：会場の実測色（淡いセージ #b7c599）に合わせた畳。固定・タイル ── */
html{background:#b7c599}
body::before{
  background:
    linear-gradient(rgba(180,190,168,.68), rgba(172,182,160,.70)),
    url("../img/tatami-green.jpg") top left/900px auto repeat;
  background-color:#b7c599;
  filter:none;
}
@media(max-width:640px){
  body::before{
    background:
      linear-gradient(rgba(180,190,168,.68), rgba(172,182,160,.70)),
      url("../img/tatami-green.jpg") top left/440px auto repeat;
    background-color:#b7c599;
  }
}

/* ── 地が明るいので文字は濃色。暗い帯の中だけ変数を白に戻す ── */
:root{
  --ink:#1b2516; --ink-2:#4b5741;
  --line:rgba(27,37,22,.24); --surface:rgba(27,37,22,.06);
  --tatami:#6d5a18;
}
body{color:var(--ink)}
header, .subnav, .sticky-cta, .hero, .stats, .page-head, .cta,
.photo-band, .hero-band, .section.tint, .section.has-bg, .nomikai-box, footer{
  --ink:#f2efe4; --ink-2:#c0c4b6; --line:rgba(255,255,255,.17); --tatami:#c0a866;
  color:var(--ink);
}
.card,.disc,.step,.route,.review,.member,.log,.post-box,.faq details,.price-list{
  border-top-color:rgba(27,37,22,.22);
}
.concept{border-left-color:rgba(27,37,22,.22)}
.days span,.words span{background:rgba(27,37,22,.07);color:var(--ink)}
.section>.wrap,.stats>.wrap,.wrap.ed-head{border-color:rgba(27,37,22,.14)}
.btn-ghost{border-color:rgba(27,37,22,.5);color:var(--ink)}
.btn-ghost:hover{background:rgba(27,37,22,.08)}
.hero .btn-ghost,.cta .btn-ghost,.page-head .btn-ghost{border-color:rgba(255,255,255,.6);color:#f2efe4}

/* 🚨 明るい地にすると白文字が飛ぶ2箇所。濃い面を戻す（実測で発見） */
.stats{
  background:linear-gradient(180deg,#1d2b21 0%,#16211a 100%);
  border-top:1px solid rgba(192,168,102,.30);
  border-bottom:1px solid rgba(192,168,102,.30);
}
.section.has-bg>.wrap{background:rgba(24,16,9,.86)}
/* 写真待ちの空き枠も飛ぶ */
.member .ph,.feature .ph,.pcard .ph,.slides img,.slides iframe{background:rgba(27,37,22,.07);color:#4b5741}
.log-empty{background:rgba(27,37,22,.05);border-color:rgba(27,37,22,.24);color:#4b5741}

/* ── 「分断しない」＝色の帯をやめ、地をひと続きに通す ── */
.section.tint, .section.price-band, .section.has-bg, .stats{
  background:transparent !important;
  background-image:none !important;
  border-top:0 !important; border-bottom:0 !important;
  margin:0 !important; padding:78px 0 !important;
}
.section.tint>.wrap, .section.price-band>.wrap, .section.has-bg>.wrap,
.stats>.wrap, .nomikai-box .wrap{
  background:transparent !important; border:0 !important; box-shadow:none !important;
}
.section.has-bg .sect-bg{display:none}
.section.tint, .section.price-band, .section.has-bg, .stats, .nomikai-box{
  --ink:#1b2516; --ink-2:#4b5741; --line:rgba(27,37,22,.24); --tatami:#6d5a18;
  color:var(--ink);
}
.stats .stat{border-left-color:rgba(27,37,22,.18)}
.stats .stat .v{color:#6d5a18}
.section.price-band .price-item .price{color:#6d5a18}
.section + .section > .wrap{border-top:1px solid rgba(27,37,22,.14);padding-top:74px}

/* ── ワンポイントは1箇所だけ・行は追加しない（Rick 2026-09-09） ── */
.spot{display:none}
.gear{
  position:relative; height:0; padding:0; margin:0 auto;
  width:min(100% - 40px, var(--wrap));
  overflow:visible; pointer-events:none;
}
.gear img{ position:absolute; right:0; top:-186px; width:min(250px,30vw); height:auto; display:block }
@media(max-width:900px){ .gear img{ top:-150px; width:min(190px,34vw) } }
@media(max-width:640px){ .gear img{ top:-118px; width:min(140px,36vw) } }

/* ── 2026-09-09 Rick「ヘッダーのメニューのとこはPCね！左寄りになってるからあわせて」
   実測＝上の行は 20〜1229px を使う（ロゴが左端／CTAが右端）のに、
   メニューは 20〜557px で止まり、右に約670pxの空きができていた。
   → PCではメニューを**右端に寄せて、CTAの右端と縦にそろえる**。
   🚨 スマホは項目が入りきらないので、今までどおり左詰めの横スクロールのまま
     （右寄せにすると先頭の項目が画面外に出る）。 */
@media(min-width:1000px){
  .subnav ul{ justify-content:flex-end; gap:6px }
  .subnav a{ padding:12px 16px }
  .subnav li:last-child a{ padding-right:0 }
}

/* ══════════════════════════════════════════════════════════════
   2026-09-14 仁さん電話（GNO-D530 / D532）
   🔑 やめたくなったら、このブロックごと消せば 9/13 の見た目に戻る。
   ══════════════════════════════════════════════════════════════ */
/* D530：枠の無いセクションは横幅をもっと使う。
   これまでは枠あり・枠なしで同じ内側余白（PC 48px／スマホ 20px）＋ .lead が 70ch で止まっていた。 */
.lead{max-width:none}
.section>.wrap{padding-left:16px;padding-right:16px}
@media(max-width:900px){ .section>.wrap{padding-left:0;padding-right:0} }
/* 枠のある箱（コンセプト）は、スマホで内側を詰めて文字幅を確保する */
@media(max-width:768px){ .concept{padding:26px 20px} }

/* D532-1：数字の帯＝地と同じ色をやめ、全幅の畳色の帯にする（変わったと分かる） */
.stats{
  background:linear-gradient(180deg,#d3bf83 0%,#c3aa67 100%) !important;
  padding:40px 0 !important;
  border-top:0 !important; border-bottom:0 !important;
  --ink:#1b2516; --ink-2:#3b4632; --tatami:#24382e;
  color:var(--ink);
}
.stats .stat{border-left-color:rgba(27,37,22,.22)}
.stats .stat .v{color:#24382e}
.stats .stat .l{color:#3b4632;font-weight:700}
@media(max-width:768px){ .stats{padding:26px 0 !important} }

/* D532-2：「楽しく運動できる場所を」の箱＝地と同じ色の細い箱をやめ、生成り色の紙にする */
.concept{
  background:#fbf8ef;
  border:1px solid rgba(27,37,22,.12);
  border-left:6px solid #b39a52;
  box-shadow:0 8px 28px rgba(27,37,22,.14);
  --ink:#1b2516; --ink-2:#4b5741; --tatami:#6d5a18;
  color:var(--ink);
}
.concept .words span{background:#efe8d3;color:#1b2516}
.stat-link{display:block;text-decoration:none;color:inherit}
.stat-link .l b{color:var(--accent);font-weight:800}
.stat-link:hover .v{opacity:.8}
.kslide{position:relative;max-width:var(--maxw,1100px);margin:16px auto;aspect-ratio:16/9;overflow:hidden;border-radius:8px;box-shadow:0 3px 20px rgba(0,0,0,.14)}
.kslide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s}
.kslide img.on{opacity:1}
.kdots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:8px}
.kdots button{width:10px;height:10px;border-radius:50%;border:0;background:rgba(255,255,255,.55);padding:0;cursor:pointer}
.kdots button.on{background:#fff}
@media(max-width:768px){.kslide{margin:10px 12px;aspect-ratio:4/3}}
.fukidashi{position:relative;display:inline-block;margin:12px 0 0;padding:8px 14px;background:#fff8e1;border:1px solid #e5c97a;border-radius:10px;font-weight:800;font-size:14px;line-height:1.6}
.fukidashi:before{content:"";position:absolute;top:-8px;left:22px;border:8px solid transparent;border-top:0;border-bottom-color:#e5c97a}
.stats .stat .v span{display:inline}
.hero-old{background:#000 !important}.hero-old .old-main{max-width:760px;margin:0 auto;padding:28px 16px 0}.hero-old .old-main img{width:100%;height:auto;display:block;border-radius:6px;background:#fff}.hero-old .hero-inner{text-align:center}.hero-old .hero-cta{justify-content:center}

/* ══ 2026-10-05b 仁さん 10:47「飲み会イベントのセクション全体の背景を、前の畳みたいなものに」
   前の畳＝交流会ページ(koryu.html)の茶色の畳 ../img/tatami-brown.jpg を、そのまま同じ覆いで流用。
   🔑 やめるときはこのブロックを消すだけ。 */
.section.nomikai-box{
  background:
    linear-gradient(rgba(214,196,168,.62), rgba(206,188,160,.66)),
    url('../img/tatami-brown.jpg') top left/900px auto repeat !important;
  background-color:#c4b08a !important;
  margin:0 !important; padding:72px 0 !important;
  border-top:1px solid rgba(80,55,20,.25); border-bottom:1px solid rgba(80,55,20,.25);
  --ink:#2a1d0e; --ink-2:#4e3c24; --line:rgba(60,40,15,.25); --tatami:#6d4a18;
  color:var(--ink);
}
.section.nomikai-box h2,.section.nomikai-box p{color:#2a1d0e}
@media(max-width:640px){
  .section.nomikai-box{
    background:
      linear-gradient(rgba(214,196,168,.62), rgba(206,188,160,.66)),
      url('../img/tatami-brown.jpg') top left/440px auto repeat !important;
    padding:52px 0 !important;
  }
}

/* ══ 2026-10-05b #1 口コミ(5.0)の帯の直下に地図 */
.top-map{width:min(100% - 40px,1100px);margin:16px auto 0}
.top-map iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:8px;box-shadow:0 3px 20px rgba(0,0,0,.14);background:#e9e6dc}
@media(max-width:768px){.top-map{width:auto;margin:10px 12px 0}.top-map iframe{aspect-ratio:4/3}}

/* ══ 2026-10-05b #10 #11 初めての方へ（写真2枠＋文章） */
.firstpts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:8px}
.fp{background:#fbf8ef;border:1px solid rgba(27,37,22,.12);border-radius:10px;overflow:hidden;box-shadow:0 6px 22px rgba(27,37,22,.12);color:#1b2516}
.fp-ph{aspect-ratio:4/3;background:rgba(27,37,22,.08);display:flex;align-items:center;justify-content:center;color:#4b5741;font-size:13px;letter-spacing:.08em}
.fp-ph img{width:100%;height:100%;object-fit:cover;display:block}
.fp-tx{margin:0;padding:18px 22px 20px;font-size:16px;font-weight:700;line-height:1.8;color:#1b2516}
@media(max-width:640px){.firstpts{grid-template-columns:1fr;gap:16px}}

/* ══ 2026-10-05b #8 メディア掲載＝生成りのカード＋上に畳色の線＋見出しの両側に罫 */
.media{
  max-width:820px;margin:40px auto 0;
  background:#fbf8ef;border:1px solid rgba(27,37,22,.14);border-top:4px solid #b39a52;border-radius:10px;
  box-shadow:0 8px 28px rgba(27,37,22,.14);padding:30px 34px 22px;
  --ink:#1b2516;--ink-2:#4b5741;color:#1b2516;text-align:left;
}
.media .media-kicker{margin:0 0 4px;text-align:center;font-family:var(--display);font-size:13px;font-weight:800;letter-spacing:.32em;color:#8a7130}
.media h3{display:flex;align-items:center;gap:14px;margin:0 0 16px;font-size:19px;font-weight:800;color:#1b2516}
.media h3::before,.media h3::after{content:"";flex:1;height:1px;background:rgba(27,37,22,.22)}
.media li{border-top:1px dashed rgba(27,37,22,.2);padding:12px 0;font-size:15px;align-items:baseline}
.media .d{display:inline-block;width:auto;min-width:6.8em;text-align:center;background:#24382e;color:#f2efe4;border-radius:999px;padding:2px 12px;font-size:12.5px;font-weight:700}
@media(max-width:560px){.media{padding:24px 18px 16px}.media h3{font-size:17px}.media li{gap:6px}.media .d{align-self:flex-start}}

/* ══ 2026-10-07 #8 メディア掲載＝額縁。参考＝jin2012.jp の写真の額（濃い木の太枠＋影）。
   素材画像は使わずCSSだけで描く。中身（掲載2件）は変えていない。 */
.media{
  border:14px solid transparent;border-radius:6px;
  background:
    linear-gradient(#fbf8ef,#fbf8ef) padding-box,
    linear-gradient(135deg,#5a4029 0%,#2e2014 28%,#46311f 52%,#2a1c11 76%,#4a3421 100%) border-box;
  background-color:#2b1e12;
  box-shadow:inset 0 0 0 1px rgba(179,154,82,.75),inset 0 0 0 5px #fbf8ef,inset 0 0 0 6px rgba(179,154,82,.45),
             0 0 0 1px #1a1009,0 14px 30px rgba(20,12,4,.38);
  padding:34px 38px 24px;
}
@media(max-width:560px){.media{border-width:10px;padding:26px 18px 16px}}
  /* kk-toc: ページ先頭の目次（2026-10-13） */
  .kk-toc{max-width:1100px;margin:18px auto 0;padding:14px 22px;border:1px solid var(--line,rgba(127,127,127,.35));border-radius:12px;background:rgba(127,127,127,.07);font-size:14px;line-height:1.6;box-sizing:border-box}
  .kk-toc b{display:block;font-size:13px;letter-spacing:.08em;opacity:.8;margin-bottom:6px}
  .kk-toc ol{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:4px 18px}
  .kk-toc a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(127,127,127,.6)}
  .kk-toc a:hover{text-decoration-color:currentColor}
  h2[id^="kk-s"]{scroll-margin-top:90px}
  @media (max-width:640px){.kk-toc{margin:14px 14px 0;padding:12px 16px}.kk-toc ol{display:block}.kk-toc li{margin:5px 0}}

/* ══════════════════════════════════════════════════════════════
   2026-10-19 槌井様 電話の修正（テストページ）
   🔑 やめるときはこのブロックを消し、HTML側の kk-menu / kk-quick / kk-cal を戻す
   ══════════════════════════════════════════════════════════════ */
/* #5 メニュー：英字の小見出し＋日本語。PCは1列で中央、スマホは3列×2段（横スクロールで隠れない） */
.kk-menu{background:rgba(16,26,20,.92);border-bottom:1px solid rgba(192,168,102,.35)}
.kk-menu ul{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));max-width:1100px}
.kk-menu li{border-left:1px solid rgba(255,255,255,.10)}
.kk-menu li:last-child{border-right:1px solid rgba(255,255,255,.10)}
.kk-menu a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 6px 11px;text-decoration:none;color:#f2efe4;font-size:13.5px;font-weight:700;letter-spacing:.04em;line-height:1.3;text-align:center;position:relative;transition:background .2s}
.kk-menu a i{font-style:normal;font-family:var(--display);font-size:11px;font-weight:800;letter-spacing:.16em;color:#c0a866}
.kk-menu a:hover{background:rgba(255,255,255,.06)}
.kk-menu a.on{background:rgba(192,168,102,.14)}
.kk-menu a.on::after{content:"";position:absolute;left:22%;right:22%;bottom:0;height:3px;border-radius:3px 3px 0 0;background:#c0a866}
@media(max-width:760px){
  .kk-menu .wrap{padding:0}
  .kk-menu ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kk-menu li{border-left:0;border-right:1px solid rgba(255,255,255,.10)!important;border-bottom:1px solid rgba(255,255,255,.10)}
  .kk-menu li:nth-child(3n){border-right:0!important}
  .kk-menu a{font-size:12px;padding:9px 2px 8px;letter-spacing:0}
  .kk-menu a i{font-size:10px;letter-spacing:.12em}
}
/* #5 ページ先頭：日程と技術動画をはっきり分けた2枚のカード＋このページの内容 */
.kk-quick{max-width:1100px;margin:22px auto 0;padding:0 20px}
.kq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.kq-card{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:12px;text-decoration:none;color:#f2efe4;background:#1d2e24;border:1px solid rgba(192,168,102,.45);box-shadow:0 6px 20px rgba(16,26,20,.18);transition:transform .2s,box-shadow .2s}
.kq-card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(16,26,20,.26)}
.kq-video{background:#2b2418;border-color:rgba(214,170,90,.5)}
.kq-ic{flex:0 0 52px;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(192,168,102,.16)}
.kq-ic svg{width:28px;height:28px;fill:none;stroke:#e2c97e;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kq-ic svg .fill{fill:#e2c97e;stroke:none}
.kq-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.kq-tx i{font-style:normal;font-family:var(--display);font-size:12px;font-weight:800;letter-spacing:.18em;color:#c0a866}
.kq-tx b{font-size:19px;letter-spacing:.04em;color:#fff}
.kq-tx small{font-size:12.5px;line-height:1.6;color:#d4d7cb}
.kq-go{font-size:20px;color:#c0a866}
.kq-tx .nw{white-space:nowrap}
.kq-chips{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.kq-chips a{display:inline-block;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.78);border:1px solid rgba(27,37,22,.18);color:#1b2516;font-size:13px;font-weight:700;text-decoration:none}
.kq-chips a:hover{background:#fff}
@media(max-width:760px){
  .kk-quick{margin-top:14px;padding:0 14px}
  .kq-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .kq-card{padding:14px 14px;gap:12px}
  .kq-ic{flex-basis:44px;width:44px;height:44px}
  .kq-ic svg{width:24px;height:24px}
  .kq-tx b{font-size:17px}
  .kq-chips{gap:6px}
  .kq-chips a{font-size:12px;padding:5px 11px}
}
/* #1 口コミ：Googleマップの口コミであることを文字で */
.stats .stat-link .l{display:block;margin-top:6px;font-size:12px;font-weight:700;letter-spacing:.02em}
.gmap-label{display:inline-flex;align-items:center;gap:6px;margin:0 auto 14px;padding:6px 16px;border-radius:999px;background:#fff;border:1px solid rgba(27,37,22,.18);font-size:14px;font-weight:700;color:#1b2516}
.gmap-label svg{width:18px;height:18px;fill:#d93025}
/* #2 写真待ちの枠 */
.fp-wait{border:2px dashed rgba(27,37,22,.30);background:rgba(255,255,255,.55)!important}
.fp-wait span,.kk-wait-note{font-weight:700;color:#7a5a12;letter-spacing:.08em}
.kk-wait-note{display:inline-block;margin:0 0 10px;padding:4px 12px;border:2px dashed rgba(122,90,18,.5);border-radius:8px;background:rgba(255,255,255,.6);font-size:13px}
/* #3 飲み会の背景＝雲（交流会ページの青空の写真 ../img/sky-bg.jpg） */
.section.nomikai-box{
  background:linear-gradient(rgba(255,255,255,.40),rgba(255,255,255,.55)),url('../img/sky-bg.jpg') center/cover no-repeat !important;
  background-color:#9cc6ea !important;
  border-top:1px solid rgba(30,70,110,.2);border-bottom:1px solid rgba(30,70,110,.2);
  --ink:#14263a;--ink-2:#2f4458;--line:rgba(20,40,60,.22);--tatami:#1f4f7a;
}
.section.nomikai-box h2,.section.nomikai-box p{color:#14263a}
@media(max-width:640px){.section.nomikai-box{background:linear-gradient(rgba(255,255,255,.40),rgba(255,255,255,.55)),url('../img/sky-bg.jpg') center/cover no-repeat !important}}
/* #4 10月のカレンダー */
.kk-cal{max-width:760px;margin:26px auto 30px;padding:22px 22px 18px;background:#fbf8ef;border:1px solid rgba(27,37,22,.14);border-radius:12px;box-shadow:0 6px 22px rgba(27,37,22,.12);color:#1b2516}
.cal-head{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.cal-en{margin:0;font-family:var(--display);font-weight:800;font-size:14px;letter-spacing:.18em;color:#6d5a18}
.kk-cal h3{margin:0;font-size:20px;color:#1b2516}
.kk-cal ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal-w li{text-align:center;font-size:12px;font-weight:700;padding:4px 0;color:#4b5741}
.cal-w .sun,.cal-d .sun .n{color:#b3261e}
.cal-w .sat,.cal-d .sat .n{color:#1f5fa8}
.cal-d li{min-height:58px;padding:6px 4px;border-radius:8px;background:#fff;border:1px solid rgba(27,37,22,.08);display:flex;flex-direction:column;align-items:center;gap:2px}
.cal-d li.e{background:transparent;border:0}
.cal-d .n{font-size:15px;font-weight:700;line-height:1.2}
.cal-d .p{background:#24382e;border-color:#24382e}
.cal-d .p .n{color:#fff!important;font-size:17px}
.cal-d .p .t{font-size:11px;font-weight:700;color:#e2c97e;white-space:nowrap}
.cal-d .p.done{background:#b9bcb4;border-color:#b9bcb4}
.cal-d .p.done .t{color:#fff}
.cal-legend{margin:12px 0 0;font-size:12.5px;color:#4b5741;display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px}
.cal-legend .lg{display:inline-block;width:14px;height:14px;border-radius:3px;margin-left:6px}
.cal-legend .lg:first-child{margin-left:0}
.lg-p{background:#24382e}.lg-done{background:#b9bcb4}
.cal-note{margin:8px 0 0;font-size:13px;line-height:1.7;color:#3b4632}
@media(max-width:640px){
  .kk-cal{padding:16px 10px 14px;margin:20px 0 24px}
  .kk-cal ol{gap:3px}
  .cal-d li{min-height:50px;padding:5px 1px}
  .cal-d .p .t{font-size:9.5px;letter-spacing:-.02em}
  .cal-d .n{font-size:14px}
}

/* ══════════════════════════════════════════════════════════════
   2026-10-22 仁さん「今お願いしてて出来てない所」7件（テストページ）
   🔑 やめるときはこのブロックと、HTML側の kk-lang / voice-map / kk-concept-sec / kk-media を戻す
   ══════════════════════════════════════════════════════════════ */
html,body{color-scheme:light}
/* #7 言語切替 */
.kk-lang{display:inline-flex;border:1px solid rgba(192,168,102,.65);border-radius:999px;overflow:hidden;flex:none}
.kk-lang button{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:#f2efe4;font-family:inherit;font-weight:700;font-size:12px;line-height:1;padding:8px 11px;cursor:pointer}
.kk-lang button.on{background:#c0a866;color:#16211a}
@media(max-width:640px){
  .nav{gap:8px}
  .nav-right{gap:8px}
  .nav-cta{padding:8px 11px;font-size:11.5px}
  .kk-lang button{padding:7px 8px;font-size:11px}
}
@media(max-width:420px){.nav-cta{padding:8px 9px;font-size:11px;letter-spacing:-.02em}.kk-lang button{padding:7px 7px}.logo{font-size:13px}.logo small{font-size:8.5px;letter-spacing:.08em}}
@media(max-width:360px){.logo{font-size:12px}.nav-cta{font-size:10.5px;padding:7px 7px}}
/* #1 5.0の真下に地図 */
.voice-map{max-width:900px;margin:0 auto 34px}
.voice-map iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:10px;box-shadow:0 6px 22px rgba(27,37,22,.18);background:#e9e6dc}
.voice-map-link{display:inline-block;margin-top:10px;padding:6px 14px;border-radius:999px;background:#fff;border:1px solid rgba(27,37,22,.18);font-weight:700;font-size:13.5px;color:#1b2516;text-decoration:none}
@media(max-width:640px){.voice-map{margin-bottom:26px}.voice-map iframe{aspect-ratio:4/3}}
/* #4 コンセプトの背景＝写真でも白でもない：濃い緑の地＋斜めの細線＋金の光＋小物（ミット・バンテージ・レガース） */
.section.kk-concept-sec{
  position:relative;overflow:hidden;margin:0 !important;padding:84px 0 !important;
  background:
    radial-gradient(ellipse at 12% 8%, rgba(192,168,102,.24), transparent 55%),
    radial-gradient(ellipse at 92% 96%, rgba(192,168,102,.18), transparent 50%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 14px),
    linear-gradient(160deg,#20362a 0%,#16231b 60%,#0f1913 100%) !important;
  --ink:#f2efe4;--ink-2:#c9cdbf;--tatami:#d8bc7a;color:var(--ink);
}
.section.kk-concept-sec>.wrap{background:transparent !important;border:0 !important;box-shadow:none !important;position:relative;z-index:2}
.kk-concept-sec .h2{color:#f7f3e6}
.kk-concept-sec .eyebrow,.kk-concept-sec .eyebrow i{color:#d8bc7a}
.kk-concept-sec .eyebrow::before{background:#d8bc7a}
.kc-deco{position:absolute;inset:0;pointer-events:none;z-index:1}
.kc-g{position:absolute;height:auto;display:block;filter:drop-shadow(0 12px 18px rgba(0,0,0,.5))}
.kc-g1{right:-26px;top:26px;width:min(250px,24vw);transform:rotate(12deg)}
.kc-g2{left:-36px;bottom:60px;width:min(230px,22vw);transform:rotate(-14deg)}
.kc-g3{right:3%;bottom:-26px;width:min(210px,20vw);transform:rotate(-6deg)}
.kc-word{position:absolute;left:3%;top:20px;font:900 clamp(44px,9vw,120px)/1 var(--display);letter-spacing:.04em;color:transparent;-webkit-text-stroke:1px rgba(216,188,122,.30);white-space:nowrap}
.kk-concept-sec .concept{position:relative;z-index:2}
@media(max-width:760px){
  .section.kk-concept-sec{padding:58px 0 70px !important}
  .kc-g1{width:92px;right:-14px;top:10px;opacity:.9}
  .kc-g2{display:none}
  .kc-g3{width:104px;right:-8px;bottom:-12px}
  .kc-word{top:12px}
}
/* #6 メディア掲載＝全幅・マウスを乗せると説明が出る（創作鞄槌井のInstagram欄と同じ出方） */
.kk-media{position:relative;width:100%;margin:0;padding:58px 0 0;background:#1a120b;color:#f2efe4}
.km-head{text-align:center;padding:0 16px 26px}
.km-kicker{margin:0 0 6px;font:800 13px/1 var(--display);letter-spacing:.36em;color:#d8bc8e}
.kk-media h2{margin:0;font-size:clamp(22px,4vw,34px);font-weight:900;color:#f7f0e2;letter-spacing:.02em;line-height:1.35}
.km-hint{margin:10px 0 0;font-size:12.5px;color:#cbbfa9}
.km-hint-sp{display:none}
@media (hover:none){.km-hint-pc{display:none}.km-hint-sp{display:inline}}
.km-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
.km-tile{position:relative;overflow:hidden;aspect-ratio:16/10;cursor:pointer;outline:none;background:#000}
.km-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.km-tile:hover img,.km-tile:focus-visible img,.km-tile.open img{transform:scale(1.07)}
.km-base{position:absolute;left:0;right:0;bottom:0;padding:48px 24px 22px;background:linear-gradient(180deg,rgba(16,10,5,0),rgba(16,10,5,.85));display:flex;flex-direction:column;gap:8px;transition:opacity .3s}
.km-cat{align-self:flex-start;font:800 11px/1 var(--display);letter-spacing:.24em;color:#1a120b;background:#d8bc8e;padding:5px 10px}
.km-base b{font-size:clamp(17px,2.2vw,24px);color:#fff;line-height:1.35}
.km-over{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:10px;padding:28px;background:rgba(23,2,2,.72);opacity:0;transition:opacity .3s ease-out}
.km-over::before{content:"";position:absolute;inset:14px;border:1px solid rgba(216,188,142,.6);pointer-events:none}
.km-tile:hover .km-over,.km-tile:focus-visible .km-over,.km-tile.open .km-over{opacity:1}
.km-tile:hover .km-base,.km-tile:focus-visible .km-base,.km-tile.open .km-base{opacity:0}
.km-d{font:800 14px/1 var(--display);letter-spacing:.2em;color:#d8bc8e}
.km-over b{font-size:clamp(18px,2.4vw,26px);color:#fff;line-height:1.4}
.km-over p{margin:0;font-size:14.5px;line-height:1.8;color:#eee3cf}
@media(max-width:640px){.kk-media{padding-top:44px}.km-grid{grid-template-columns:1fr}.km-tile{aspect-ratio:4/3}}

/* ══════════════════════════════════════════════════════════════
   2026-10-22 ヘッダー → 2026-10-26 test.html に統合（仁さん「上にのせたら出るカッコいいデザイン・右余白なし」）
   ・ヘッダーとメニューを画面の端から端まで（左右の余白なし）
   ・PC：項目にマウスを乗せると、金の線が中央から伸び、下に小メニューがすっと出る（jin2012.jp と同じ出方）
   ・スマホ：今まで通り3列×2段。小メニューは出さない（タップでそのページへ）
   ══════════════════════════════════════════════════════════════ */
header .wrap.nav{width:100%;max-width:none;padding-left:clamp(14px,2.4vw,36px);padding-right:clamp(14px,2.4vw,36px)}
.kk-menu2>ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));max-width:none;width:100%}
.kk-menu2>ul>li{position:relative;border-left:1px solid rgba(255,255,255,.10)}
.kk-menu2>ul>li:first-child{border-left:0}
.kk-menu2>ul>li:last-child{border-right:0}
.kk-menu2 .kk-top{padding:14px 6px 13px;transition:background .25s,color .25s}
.kk-menu2 .kk-top::before{content:"";position:absolute;left:50%;right:50%;bottom:0;height:3px;background:#c0a866;transition:left .3s ease,right .3s ease}
.kk-menu2 li:hover>.kk-top::before,.kk-menu2 li:focus-within>.kk-top::before{left:14%;right:14%}
.kk-menu2 li:hover>.kk-top{background:rgba(192,168,102,.12)}
.kk-menu2 .has-sub>.kk-top::after{content:"";position:static;display:block;width:7px;height:7px;margin-top:2px;border-right:1.5px solid #c0a866;border-bottom:1.5px solid #c0a866;transform:rotate(45deg);background:none;border-radius:0;opacity:.8}
.kk-menu2 .has-sub>.kk-top.on::after{position:static;left:auto;right:auto;height:7px}
.kk-sub{list-style:none;margin:0;padding:8px 0;position:absolute;top:100%;left:0;right:0;min-width:200px;background:rgba(14,22,17,.97);border-top:2px solid #c0a866;box-shadow:0 14px 30px rgba(0,0,0,.35);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s;z-index:60}
.kk-menu2 li:hover>.kk-sub,.kk-menu2 li:focus-within>.kk-sub{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .25s ease,transform .25s ease,visibility 0s}
.kk-menu2 .kk-sub{display:block;grid-template-columns:none;max-width:none;width:auto}
.kk-menu2 .kk-sub li{border:0!important}
.kk-sub a{display:block;padding:11px 20px;color:#f2efe4;text-decoration:none;font-size:13.5px;font-weight:600;letter-spacing:.04em;text-align:left;transition:background .2s,padding-left .2s,color .2s}
.kk-sub a:hover{background:rgba(192,168,102,.16);color:#fff;padding-left:26px}
@media(max-width:760px){
  .kk-menu2>ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kk-menu2>ul>li{border-left:0;border-right:1px solid rgba(255,255,255,.10);border-bottom:1px solid rgba(255,255,255,.10)}
  .kk-menu2>ul>li:nth-child(3n){border-right:0}
  .kk-menu2 .kk-top{padding:9px 2px 8px}
  .kk-menu2 .kk-sub,.kk-menu2 .has-sub>.kk-top::after{display:none}
}

/* 2026-10-25 #6 スマホのトップ（仁さん 10/22「スマホのトップをカッコいいデザインに・上にのせたら出るメニュー・右余白なし」）
   スマホ＝MENUボタンで開くメニュー（画面の端から端まで）＋トップを写真から始める。PCは変えていない
   🔑 やめるときはこのブロックと、HTMLの .kk-mbtn と、末尾の kk-mobile-top スクリプトを消す */
.kk-mbtn{display:none}
@media(max-width:640px){
  .nav-cta{display:none}
  .kk-mbtn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 13px;border:1px solid #c0a866;border-radius:999px;background:transparent;color:#f2efe4;font:800 11px/1 var(--display);letter-spacing:.16em;cursor:pointer}
  .kk-mbtn span{position:relative;width:16px;height:2px;background:#c0a866;transition:background .2s}
  .kk-mbtn span::before,.kk-mbtn span::after{content:"";position:absolute;left:0;width:16px;height:2px;background:#c0a866;transition:transform .25s}
  .kk-mbtn span::before{top:-5px}.kk-mbtn span::after{top:5px}
  header.kk-open .kk-mbtn span{background:transparent}
  header.kk-open .kk-mbtn span::before{transform:translateY(5px) rotate(45deg)}
  header.kk-open .kk-mbtn span::after{transform:translateY(-5px) rotate(-45deg)}
  .nav-right{gap:8px}
  .kk-menu{display:none;position:absolute;left:0;right:0;top:100%;background:rgba(14,22,17,.97);border-bottom:2px solid #c0a866;box-shadow:0 14px 30px rgba(0,0,0,.45)}
  header.kk-open .kk-menu{display:block;animation:kkDrop .25s ease-out}
  @keyframes kkDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  .kk-menu .wrap{width:100%;max-width:none;margin:0;padding:0}
  .kk-menu ul{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}
  .kk-menu li,.kk-menu li:nth-child(3n){border-right:1px solid rgba(255,255,255,.10)!important}
  .kk-menu li:nth-child(2n){border-right:0!important}
  .kk-menu a{font-size:14px;padding:17px 4px 15px}
  .kk-menu a i{font-size:10.5px}
  .kk-menu,header.kk-open .kk-menu{background:#0e1611!important;backdrop-filter:none}
  header .logo{white-space:nowrap;font-size:15px}
  header .logo small{display:none}
  .hero-old .old-main{max-width:none;padding:0}
  .hero-old .old-main img{border-radius:0}
}
/* 2026-10-26 初めての方へ＝3枚（バンテージ／立ち方／休憩） */
.firstpts.fp3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fp-ph.fp-gear{background:radial-gradient(ellipse at 50% 45%,#e9efe0 0%,#cfdcc4 100%)}
.fp-ph.fp-gear img{object-fit:contain;padding:9% 12%;box-sizing:border-box;filter:drop-shadow(0 10px 14px rgba(27,37,22,.28))}
.fp-n{display:block;margin-bottom:4px;font:800 11px/1 var(--display);letter-spacing:.2em;color:#9a7b2f}
@media(max-width:900px){.firstpts.fp3{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 2026-10-26 統合：スマホ（640px以下）は 10/25 の MENU ボタン＋2列のメニューを優先する */
@media(max-width:640px){
  .kk-menu2>ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kk-menu2>ul>li{border-left:0}
  .kk-menu2 .kk-top{padding:17px 4px 15px}
  .kk-menu2 .kk-sub,.kk-menu2 .has-sub>.kk-top::after{display:none}
}


.kk-closing{display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);gap:22px;align-items:center;margin-top:34px;padding:18px;border:1px solid var(--line,#d9ddd9);border-radius:14px;background:#fff}
.kk-closing figure{margin:0;border-radius:10px;overflow:hidden;background:#e9ece9}
.kk-closing img{display:block;width:100%;height:auto}
.kk-closing h3{margin:0 0 8px;font-size:18px;font-weight:800}
.kk-closing p{margin:0 0 8px;font-size:14.5px;line-height:1.85;color:var(--ink-2,#444)}
.kk-closing p:last-child{margin-bottom:0}
@media (max-width:640px){.kk-closing{grid-template-columns:1fr;padding:14px}}
.step .kk-closing{margin-top:0}