/*
Theme Name: Kyokushin Kagawa Okayama-Nishi
Theme URI: https://example.com/
Author: Kyokushinkaikan Kagawa / Okayama-Nishi Branch
Description: 極真会館 香川支部・岡山西支部 公式サイト用オリジナルテーマ。集客特化LP構成+新着情報機能。
Version: 1.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: kyokushin-kagawa
*/
:root{
--sumi:#1B1B1B;
--kinari:#F6F3EC;
--shu:#C1272D;
--shu-dark:#9E1B21;
--gray:#6E6A63;
--line:#E2DDD2;
--serif:'Noto Serif JP',serif;
--sans:'Noto Sans JP',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--sans);color:var(--sumi);background:var(--kinari);line-height:1.9;font-size:16px;padding-bottom:76px;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:960px;margin:0 auto;padding:0 20px;}
/* ===== Header ===== */
header{background:var(--sumi);color:#fff;padding:14px 0;position:sticky;top:0;z-index:50;}
.header-inner{display:flex;align-items:center;justify-content:space-between;max-width:960px;margin:0 auto;padding:0 20px;}
.logo{font-family:var(--serif);font-weight:800;font-size:15px;line-height:1.4;letter-spacing:.06em;}
.logo small{display:block;font-size:10px;font-weight:600;opacity:.7;letter-spacing:.2em;}
.header-cta{background:var(--shu);color:#fff;font-weight:700;font-size:13px;padding:9px 18px;border-radius:3px;letter-spacing:.05em;white-space:nowrap;transition:background .2s;}
.header-cta:hover{background:var(--shu-dark);}
/* ===== Hero ===== */
.hero{background:linear-gradient(rgba(20,18,16,.55),rgba(20,18,16,.68));background-size:cover;background-position:center;color:#fff;position:relative;overflow:hidden;}
.hero-inner{max-width:960px;margin:0 auto;padding:72px 20px 64px;display:flex;gap:48px;align-items:center;justify-content:space-between;}
.hero-copy h1{font-family:var(--serif);font-weight:900;font-size:clamp(26px,5vw,42px);line-height:1.6;letter-spacing:.08em;}
.hero-copy h1 .accent{color:#E8B34B;}
.hero-lede{margin-top:20px;font-size:15px;line-height:2;opacity:.92;}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;}
.badge{border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:5px 16px;font-size:12.5px;font-weight:700;letter-spacing:.08em;}
.hero-cta-group{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.btn-primary{background:var(--shu);color:#fff;font-weight:900;font-size:17px;padding:16px 36px;border-radius:4px;letter-spacing:.1em;box-shadow:0 4px 14px rgba(193,39,45,.45);transition:transform .15s,background .2s;display:inline-block;}
.btn-primary:hover{background:var(--shu-dark);transform:translateY(-2px);}
.btn-primary small{display:block;font-size:11px;font-weight:700;letter-spacing:.2em;opacity:.85;}
.hero-tel{font-size:13px;opacity:.85;}
.hero-tel strong{font-size:20px;letter-spacing:.05em;}
/* 縦書きシグネチャー */
.tategaki{writing-mode:vertical-rl;font-family:var(--serif);font-weight:800;font-size:clamp(18px,2.6vw,24px);letter-spacing:.4em;line-height:2;color:rgba(255,255,255,.85);border-right:1px solid rgba(255,255,255,.3);padding-right:18px;flex-shrink:0;height:300px;}
/* ===== Sections ===== */
section{padding:64px 0;}
.sec-label{font-family:var(--serif);font-weight:800;font-size:12px;letter-spacing:.35em;color:var(--shu);margin-bottom:10px;}
h2{font-family:var(--serif);font-weight:800;font-size:clamp(22px,3.6vw,30px);letter-spacing:.06em;line-height:1.6;margin-bottom:28px;}
/* ===== 共感 ===== */
.empathy{background:#fff;}
.empathy-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-bottom:32px;}
.empathy-item{background:var(--kinari);border-left:3px solid var(--shu);padding:16px 18px;font-weight:500;font-size:15px;}
.empathy-answer{font-family:var(--serif);font-weight:800;font-size:clamp(18px,2.8vw,23px);text-align:center;line-height:2;}
.empathy-answer em{font-style:normal;background:linear-gradient(transparent 60%,#F3D9A4 60%);}
/* ===== 写真枠(共通) ===== */
.ph{background:linear-gradient(160deg,#35312C,#211E1B);color:rgba(255,255,255,.45);display:flex;align-items:center;justify-content:center;font-size:11.5px;letter-spacing:.12em;font-weight:700;text-align:center;line-height:1.7;padding:8px;}
.ph::before{content:"PHOTO";display:block;position:absolute;font-family:var(--serif);font-size:10px;letter-spacing:.3em;opacity:.35;transform:translateY(-22px);}
.ph{position:relative;}
/* ===== ギャラリー帯 ===== */
.gallery{background:var(--sumi);padding:0;}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;}
.gallery-grid .ph{aspect-ratio:4/3;}
@media(max-width:720px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}
/* ===== クラス写真 ===== */
.class-card .ph{aspect-ratio:16/9;margin:-24px -20px 16px;width:calc(100% + 40px);}
/* ===== 後押し写真 ===== */
.push{background:#fff;padding-bottom:0;}
.push-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center;}
.push .ph{aspect-ratio:3/2;}
.push img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;}
.push-text{font-family:var(--serif);font-weight:800;font-size:clamp(17px,2.6vw,22px);line-height:2;}
.push-text small{display:block;font-family:var(--sans);font-weight:500;font-size:13.5px;color:var(--gray);margin-top:12px;line-height:2;}
@media(max-width:720px){.push-grid{grid-template-columns:1fr;}}
/* ===== 理由 ===== */
.reasons{background:var(--sumi);color:#fff;}
.reasons .sec-label{color:#E8B34B;}
.reason-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;}
.reason{border:1px solid rgba(255,255,255,.18);padding:28px 24px;}
.reason h3{font-family:var(--serif);font-weight:800;font-size:18px;letter-spacing:.05em;margin-bottom:12px;line-height:1.6;}
.reason h3 span{display:block;font-size:11px;color:#E8B34B;letter-spacing:.3em;margin-bottom:8px;font-family:var(--sans);font-weight:700;}
.reason p{font-size:14px;line-height:2;opacity:.9;}
/* ===== クラス ===== */
.classes{background:#fff;}
.class-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;}
.class-card{border:1px solid var(--line);background:var(--kinari);padding:24px 20px;overflow:hidden;}
.class-card h3{font-family:var(--serif);font-weight:800;font-size:17px;border-bottom:2px solid var(--sumi);padding-bottom:10px;margin-bottom:12px;letter-spacing:.05em;}
.class-card .target{font-size:12px;font-weight:700;color:var(--shu);letter-spacing:.05em;margin-bottom:8px;}
.class-card p{font-size:13.5px;line-height:1.9;color:#3A3831;}
/* ===== 道場一覧 ===== */
.dojo-area{margin-bottom:30px;}
.dojo-area h3{font-family:var(--serif);font-weight:800;font-size:17px;letter-spacing:.08em;margin-bottom:14px;padding-left:12px;border-left:4px solid var(--shu);}
.dojo-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;}
.dojo-item{background:#fff;border:1px solid var(--line);padding:13px 16px;font-size:14px;font-weight:500;}
.dojo-item small{display:block;font-size:11.5px;color:var(--gray);font-weight:400;margin-top:2px;}
.dojo-note{margin-top:18px;font-size:13px;color:var(--gray);}
/* ===== 師範 ===== */
.shihan{background:#fff;}
.shihan-box{display:flex;gap:32px;align-items:flex-start;flex-wrap:wrap;}
img.shihan-photo{object-fit:cover;object-position:center 35%;}
.shihan-photo{width:300px;height:225px;background:linear-gradient(160deg,#2B2825,#191715);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.4);font-size:12px;letter-spacing:.15em;font-weight:700;object-fit:cover;}
.shihan-text{flex:1;min-width:260px;}
.shihan-text .title{font-size:13px;font-weight:700;color:var(--shu);letter-spacing:.1em;}
.shihan-text .name{font-family:var(--serif);font-weight:900;font-size:26px;letter-spacing:.12em;margin:4px 0 16px;}
.shihan-text p{font-size:14.5px;line-height:2;}
.shihan-quote{font-family:var(--serif);font-weight:800;font-size:17px;margin-bottom:14px;line-height:1.8;}
/* ===== 流れ ===== */
.flow-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;}
.step{background:#fff;border:1px solid var(--line);padding:26px 22px;position:relative;}
.step .num{font-family:var(--serif);font-weight:900;font-size:13px;letter-spacing:.2em;color:var(--shu);margin-bottom:10px;}
.step h3{font-weight:900;font-size:16.5px;margin-bottom:10px;letter-spacing:.05em;}
.step p{font-size:13.5px;line-height:1.9;color:#3A3831;}
/* ===== FAQ ===== */
.faq{background:#fff;}
.faq details{border-bottom:1px solid var(--line);padding:18px 4px;}
.faq summary{font-weight:700;font-size:15px;cursor:pointer;list-style:none;display:flex;gap:12px;align-items:baseline;}
.faq summary::before{content:"Q.";font-family:var(--serif);font-weight:900;color:var(--shu);flex-shrink:0;}
.faq details p{margin-top:10px;font-size:14px;line-height:2;color:#3A3831;padding-left:32px;}
/* ===== CTA ===== */
.cta{background:linear-gradient(rgba(150,20,25,.92),rgba(120,14,18,.94)),url('data:image/svg+xml,');background-size:cover,80px 80px;color:#fff;text-align:center;padding:70px 20px;}
.cta h2{margin-bottom:14px;}
.cta p{font-size:15px;margin-bottom:30px;opacity:.95;}
.cta .btn-white{background:#fff;color:var(--shu);font-weight:900;font-size:18px;padding:18px 48px;border-radius:4px;letter-spacing:.1em;display:inline-block;transition:transform .15s;box-shadow:0 4px 16px rgba(0,0,0,.3);}
.cta .btn-white:hover{transform:translateY(-2px);}
.cta .tel-block{margin-top:26px;font-size:13px;}
.cta .tel-block a{font-size:26px;font-weight:900;letter-spacing:.05em;display:block;margin-top:4px;}
/* ===== Footer ===== */
footer{background:var(--sumi);color:rgba(255,255,255,.85);padding:44px 0 40px;font-size:13px;}
.footer-grid{display:flex;flex-wrap:wrap;gap:36px;justify-content:space-between;}
.footer-org .name{font-family:var(--serif);font-weight:800;font-size:16px;color:#fff;margin-bottom:12px;letter-spacing:.06em;}
.footer-org p{line-height:2;}
.copyright{margin-top:36px;padding-top:18px;border-top:1px solid rgba(255,255,255,.15);font-size:11.5px;opacity:.6;text-align:center;letter-spacing:.05em;}
/* ===== LINEボタン ===== */
.btn-line{background:#06C755;color:#fff;font-weight:900;font-size:15px;padding:14px 28px;border-radius:4px;letter-spacing:.06em;display:inline-flex;align-items:center;gap:8px;box-shadow:0 4px 14px rgba(6,199,85,.35);transition:transform .15s,background .2s;}
.btn-line:hover{background:#05A947;transform:translateY(-2px);}
.btn-line .line-mark{font-family:var(--sans);font-weight:900;font-size:11px;border:2px solid #fff;border-radius:4px;padding:1px 5px;letter-spacing:.05em;}
.cta-note{font-size:12.5px;opacity:.85;margin-top:10px;}
/* ===== 固定CTAバー ===== */
.fixed-cta{position:fixed;bottom:0;left:0;right:0;background:rgba(27,27,27,.97);display:flex;z-index:100;box-shadow:0 -4px 16px rgba(0,0,0,.25);}
.fixed-cta a{flex:1;text-align:center;padding:13px 6px;font-weight:900;font-size:13px;letter-spacing:.04em;color:#fff;line-height:1.4;}
.fixed-cta a small{display:block;font-size:9.5px;font-weight:700;opacity:.75;letter-spacing:.12em;}
.fixed-cta .f-tel{background:transparent;border-right:1px solid rgba(255,255,255,.2);}
.fixed-cta .f-line{background:#06C755;}
.fixed-cta .f-line:hover{background:#05A947;}
.fixed-cta .f-form{background:var(--shu);}
.fixed-cta .f-form:hover{background:var(--shu-dark);}
@media(max-width:720px){
.hero-inner{flex-direction:column-reverse;padding:48px 20px 52px;gap:28px;}
.tategaki{height:auto;writing-mode:horizontal-tb;border-right:none;border-bottom:1px solid rgba(255,255,255,.3);padding:0 0 12px;letter-spacing:.25em;font-size:15px;}
.shihan-photo{width:100%;height:auto;aspect-ratio:4/3;}
section{padding:48px 0;}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto;}
*{transition:none!important;}
}
/* ===== グローバルナビ ===== */
.gnav{display:flex;gap:2px;flex-wrap:wrap;}
.gnav a{font-size:12.5px;font-weight:700;letter-spacing:.06em;padding:8px 12px;color:rgba(255,255,255,.85);transition:color .2s;}
.gnav a:hover,.gnav a.current{color:#E8B34B;}
.nav-toggle{display:none;background:none;border:1px solid rgba(255,255,255,.4);color:#fff;font-size:11px;font-weight:700;letter-spacing:.15em;padding:8px 12px;border-radius:3px;cursor:pointer;}
@media(max-width:860px){
.nav-toggle{display:block;}
.gnav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--sumi);flex-direction:column;gap:0;padding:8px 0 14px;border-top:1px solid rgba(255,255,255,.15);}
.gnav.open{display:flex;}
.gnav a{padding:12px 24px;font-size:14px;}
.header-cta{display:none;}
}
/* ===== 下層ページ共通 ===== */
.page-hero{background:linear-gradient(rgba(20,18,16,.78),rgba(20,18,16,.82)),url('data:image/svg+xml,');background-size:cover,80px 80px;color:#fff;text-align:center;padding:56px 20px;}
.page-hero .en{font-family:var(--serif);font-size:11px;letter-spacing:.4em;color:#E8B34B;font-weight:800;}
.page-hero h1{font-family:var(--serif);font-weight:900;font-size:clamp(24px,4.4vw,36px);letter-spacing:.1em;margin-top:8px;}
.breadcrumb{font-size:11.5px;color:var(--gray);padding:14px 0;}
.breadcrumb a{text-decoration:underline;}
.lead{font-size:15.5px;line-height:2.2;margin-bottom:36px;}
/* 理念ページ */
.philosophy-box{background:var(--sumi);color:#fff;padding:44px 32px;text-align:center;margin:36px 0;}
.philosophy-box .t{font-family:var(--serif);font-weight:900;font-size:clamp(19px,3vw,26px);letter-spacing:.15em;line-height:2.2;}
.philosophy-box .s{font-size:13.5px;opacity:.85;margin-top:14px;line-height:2;}
.motto{font-family:var(--serif);font-weight:800;font-size:clamp(17px,2.6vw,22px);text-align:center;margin:32px 0;line-height:2;}
.motto em{font-style:normal;background:linear-gradient(transparent 60%,#F3D9A4 60%);}
/* 指導員一覧 */
.inst-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-top:24px;}
.inst-card{background:#fff;border:1px solid var(--line);padding:22px 20px;}
.inst-card .role{font-size:11.5px;font-weight:700;color:var(--shu);letter-spacing:.08em;}
.inst-card .nm{font-family:var(--serif);font-weight:900;font-size:19px;letter-spacing:.1em;margin:4px 0 2px;}
.inst-card .rank{font-size:12.5px;color:var(--gray);}
.inst-featured{display:flex;gap:28px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);padding:30px;margin-bottom:28px;}
.inst-featured .ph{width:300px;height:225px;flex-shrink:0;}
.inst-featured .ph img,.inst-featured>img{width:300px;height:225px;object-fit:cover;object-position:center 35%;display:block;}
@media(max-width:720px){.inst-featured .ph,.inst-featured .ph img{width:100%;height:auto;aspect-ratio:4/3;}}
.inst-featured .body{flex:1;min-width:250px;}
/* クラス詳細 */
.class-detail{background:#fff;border:1px solid var(--line);margin-bottom:32px;}
.class-detail .ph{aspect-ratio:21/9;}
.class-detail .inner{padding:28px;}
.class-detail h2{margin-bottom:6px;}
.class-detail .target-tag{display:inline-block;background:var(--sumi);color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;padding:4px 14px;border-radius:999px;margin-bottom:16px;}
.class-detail p{font-size:14.5px;line-height:2.1;}
.point-list{margin:16px 0 0;padding:0;list-style:none;}
.point-list li{position:relative;padding-left:24px;font-size:14px;line-height:2;font-weight:500;}
.point-list li::before{content:"押";position:absolute;left:0;top:6px;font-family:var(--serif);font-size:11px;font-weight:900;color:#fff;background:var(--shu);width:17px;height:17px;display:flex;align-items:center;justify-content:center;border-radius:2px;line-height:1;}
/* 道場詳細 */
.dojo-detail{background:#fff;border:1px solid var(--line);padding:24px;margin-bottom:14px;}
.dojo-detail h3{font-family:var(--serif);font-weight:800;font-size:18px;letter-spacing:.06em;border-bottom:2px solid var(--sumi);padding-bottom:10px;margin-bottom:14px;}
.dojo-detail h3 .tag{font-family:var(--sans);font-size:10.5px;font-weight:700;color:#fff;background:var(--shu);border-radius:2px;padding:2px 8px;vertical-align:middle;margin-left:10px;letter-spacing:.1em;}
.dojo-detail table{width:100%;border-collapse:collapse;font-size:13.5px;}
.dojo-detail th{text-align:left;width:96px;color:var(--gray);font-weight:700;padding:7px 8px 7px 0;vertical-align:top;white-space:nowrap;}
.dojo-detail td{padding:7px 0;line-height:1.8;}
/* 料金表 */
.price-table{width:100%;border-collapse:collapse;background:#fff;font-size:14px;margin:18px 0 8px;}
.price-table th,.price-table td{border:1px solid var(--line);padding:13px 16px;text-align:left;}
.price-table th{background:var(--sumi);color:#fff;font-weight:700;letter-spacing:.05em;}
.price-table td:last-child{font-weight:700;}
.note{font-size:12.5px;color:var(--gray);}
/* CTAミニバナー(下層ページ用) */
.mini-cta{background:#fff;border:2px solid var(--shu);padding:28px 24px;text-align:center;margin:48px 0 0;}
.mini-cta p{font-family:var(--serif);font-weight:800;font-size:17px;margin-bottom:16px;}
.mini-cta .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
/* ===== ロゴマーク ===== */
.logo{display:flex;align-items:center;gap:11px;}
.logo-mark{width:42px;height:42px;min-width:42px;flex-shrink:0;display:block;object-fit:contain;}
.footer-mark{width:52px;height:52px;margin-bottom:12px;}
@media(max-width:860px){.logo-mark{width:36px;height:36px;min-width:36px;}}
/* ===== ギャラリー実写真 ===== */
.gallery-grid img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
/* ===== クラス実写真 ===== */
.class-card > img{display:block;width:auto;margin:-24px -20px 16px;max-width:none;box-sizing:content-box;padding:0;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center 30%;}
.class-card > img{width:calc(100% + 40px);}
.class-detail > img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 30%;display:block;}
/* ===== 新着情報(トップ) ===== */
.news-strip{background:#fff;border-bottom:1px solid var(--line);padding:26px 0;}
.news-strip .inner{max-width:960px;margin:0 auto;padding:0 20px;display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;}
.news-strip .hd{font-family:var(--serif);font-weight:800;font-size:15px;letter-spacing:.2em;color:var(--shu);white-space:nowrap;padding-top:6px;}
.news-list{flex:1;min-width:260px;}
.news-list a{display:flex;gap:16px;align-items:baseline;padding:7px 0;border-bottom:1px dashed var(--line);font-size:14px;line-height:1.7;}
.news-list a:hover{color:var(--shu);}
.news-list time{font-size:12px;color:var(--gray);white-space:nowrap;font-weight:700;}
.news-more{font-size:12.5px;font-weight:700;letter-spacing:.05em;white-space:nowrap;padding-top:8px;}
.news-more a{color:var(--shu);text-decoration:underline;}
/* ===== お知らせ一覧・記事 ===== */
.post-list .news-item{background:#fff;border:1px solid var(--line);padding:20px 24px;margin-bottom:12px;display:block;}
.post-list .news-item:hover{border-color:var(--shu);}
.post-list .news-item time{font-size:12px;color:var(--gray);font-weight:700;}
.post-list .news-item .t{font-weight:700;font-size:16px;margin-top:4px;}
.single-body{background:#fff;border:1px solid var(--line);padding:32px 28px;font-size:15px;line-height:2.1;}
.single-body h2{font-size:20px;margin:28px 0 12px;}
.single-body h3{font-family:var(--serif);font-weight:800;font-size:17px;margin:24px 0 10px;}
.single-body p{margin-bottom:1em;}
.single-body img{height:auto;margin:12px 0;}
.single-meta{margin-bottom:18px;}
.single-meta time{font-size:13px;color:var(--gray);font-weight:700;}
.pagination{margin-top:24px;text-align:center;font-size:14px;}
.pagination .page-numbers{display:inline-block;padding:8px 14px;background:#fff;border:1px solid var(--line);margin:0 3px;}
.pagination .current{background:var(--sumi);color:#fff;}