/*
Theme Name: Kohnan FC
Theme URI: https://kohnanfc.jp
Author: Kohnan FC
Description: 港南FC 公式サイト カスタムテーマ
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: kohnan-fc
*/

/* =========================================
   Variables & Base
========================================= */
:root {
  --color-navy: #112238;
  --color-navy-light: #1a3350;
  --color-red: #e60012;
  --color-bg-light: #f4f7f9;
  --color-text: #333;
  --font-en: 'Oswald', sans-serif;
  --font-jp: 'Noto Sans JP', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-jp);
  color: var(--color-text);
  line-height: 1.8;
  background-color: var(--color-bg-light);
}
html, body {
  overflow-x: hidden;
  width: 100%;
}
a { text-decoration: none; color: inherit; transition: 0.3s; }
img { max-width: 100%; height: auto; display: block; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 2; }

/* Utility */
.text-center { text-align: center; }
.text-red { color: var(--color-red); }
.mb-20 { margin-bottom: 20px; }
.mb-40 { margin-bottom: 40px; }
.mb-60 { margin-bottom: 60px; }
p, h1, h2, h3, h4, h5, h6 {
  word-break: auto-phrase;
}
/* =========================================
   デバイスごとの改行コントロール用クラス
========================================= */

/* 1. PCでのみ改行する（基本は表示、スマホで消す） */
.br-pc {
  display: block; /* ※brタグなので display: inline; でもOKです */
}

/* 2. スマホでのみ改行する（基本は消しておき、スマホで表示する） */
.br-sp {
  display: none;
}
/* 途中で改行させない「文節のカタマリ」を作る */
.ib {
  display: inline-block;
}
/* =========================================
   スマホサイズ（768px以下）の時の切り替え
========================================= */
@media screen and (max-width: 768px) {
  
  /* スマホではPC用の改行を無効化（非表示） */
  .br-pc { 
    display: none; 
  }
  
  /* スマホではスマホ用の改行を有効化（表示） */
  .br-sp { 
    display: block; 
  }
  
}

/* =========================================
   Header & Mobile Menu
========================================= */
header {
  position: fixed; top: 0; left: 0; width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  padding: 15px 40px;
  background: rgba(17, 34, 56, 0.95);
  backdrop-filter: blur(10px);
  z-index: 1000;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.brand { display: flex; align-items: center; gap: 15px; position: relative; z-index: 1001; }
.brand-logo-img { width: 45px; height: 45px; object-fit: contain; background-color: #fff; border-radius: 50%; padding: 4px; }
.brand-name { font-family: var(--font-en); color: #fff; font-size: 1.4rem; font-weight: 700; letter-spacing: 2px; }
.brand-name span { color: var(--color-red); }

.nav-links { display: flex; gap: 30px; }
.nav-item { display: flex; flex-direction: column; align-items: center; color: rgba(255,255,255,0.6); }
.nav-item:hover, .nav-item.current { color: #fff; }
.nav-en { font-family: var(--font-en); font-size: 0.95rem; font-weight: 700; letter-spacing: 1px; line-height: 1; }
.nav-jp { font-size: 0.6rem; font-weight: 700; margin-top: 4px; opacity: 0.8; }
.nav-item.contact { color: var(--color-red); }
.nav-item.contact:hover { color: #ff3344; }

.hamburger { display: none; flex-direction: column; gap: 6px; cursor: pointer; z-index: 1001; background: transparent; border: none; padding: 10px; }
.hamburger span { display: block; width: 30px; height: 3px; background: #fff; transition: 0.3s; }

.mobile-menu {
  position: fixed; top: 0; right: -100%; width: 100%; 
  /* 100vhではなく、新しい単位（svh）を使いつつ、非対応ブラウザ用に100%も指定 */
  height: 100%; height: 100svh; 
  background: rgba(17, 34, 56, 0.98); z-index: 999;
  display: flex; flex-direction: column; align-items: center; gap: 30px;
  /* 上下中央揃えをやめ、上から順に配置し、パディングで余白を作る */
  padding: 100px 0 50px; /* 上の余白を多めに取ってヘッダーと被らないようにする */
  /* 画面内に収まらない場合はスクロールを許可する */
  overflow-y: auto;
  transition: 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}
.mobile-menu.active { right: 0; }
.mobile-menu .nav-item { font-size: 1.5rem; color: #fff; }
.mobile-menu .nav-en { font-size: 2rem; }
.mobile-menu .nav-jp { font-size: 0.9rem; color: var(--color-red); }
.hamburger.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
  header { padding: 15px 20px; }
}

/* =========================================
   Hero Section (Front Page)
========================================= */
/* =========================================
   ファーストビュー：スラッシュ・ワイプスライダー
========================================= */
.hero {
  position: relative; height: 100vh; min-height: 700px;
  display: flex; align-items: center;
  color: #fff; overflow: hidden; background-color: var(--color-navy);
}

.hero-slider-wrap { 
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; 
}

/* 1. 画質誤魔化し：カラーグラデーションを重ねて色を沈める */
.hero-slider-wrap::before {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(135deg, rgba(17,34,56,0.7) 0%, rgba(230,0,18,0.4) 100%);
  pointer-events: none;
}

/* 2. 画質誤魔化し：ドットパターン（網点）を重ねてポスター調にする */
.hero-slider-wrap::after {
  content: "";
  position: absolute; inset: 0; z-index: 3;
  /* 3pxの黒いドットを敷き詰める */
  background-image: radial-gradient(rgba(0,0,0,0.35) 1px, transparent 1px);
  background-size: 3px 3px;
  pointer-events: none;
}

.hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  /* 画像自体の彩度を少し落とし、コントラストを上げる */
  filter: grayscale(30%) contrast(1.2);
  opacity: 0;
  /* 初期状態は斜めに隠しておく */
  clip-path: polygon(0 0, 0 0, -20% 100%, 0 100%); 
  /* 18秒で1周（3枚×6秒）のアニメーション */
  animation: slashWipe 18s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

/* 画像の読み込み指定 */
.hero-slide:nth-child(1) { background-image: url('/wp-content/themes/kohnan-fc-theme/assets/images/mv01.webp'); animation-delay: 0s; }
.hero-slide:nth-child(2) { background-image: url('/wp-content/themes/kohnan-fc-theme/assets/images/mv02.webp'); animation-delay: 6s; }
.hero-slide:nth-child(3) { background-image: url('/wp-content/themes/kohnan-fc-theme/assets/images/mv03.webp'); animation-delay: 12s; }

/* SP用画像の出し分け（ここでSP用のスライス画像を読み込みます） */
@media screen and (max-width: 768px) {
  .hero-slide:nth-child(1) { background-image: url('/wp-content/themes/kohnan-fc-theme/assets/images/mv01-sp.webp'); }
  .hero-slide:nth-child(2) { background-image: url('/wp-content/themes/kohnan-fc-theme/assets/images/mv02-sp.webp'); }
  .hero-slide:nth-child(3) { background-image: url('/wp-content/themes/kohnan-fc-theme/assets/images/mv03-sp.webp'); }
}

/* 3. 斬新なアニメーション：斜めワイプ＋ゆっくりズームアウト */
@keyframes slashWipe {
  0% { 
    opacity: 1; 
    clip-path: polygon(0 0, 0 0, -20% 100%, 0 100%); /* 画面左下に隠れている */
    transform: scale(1.1);
  }
  10% { 
    clip-path: polygon(0 0, 120% 0, 100% 100%, 0 100%); /* 右上に向かってバサッと展開 */
    transform: scale(1.05);
  }
  30% { 
    opacity: 1;
    clip-path: polygon(0 0, 120% 0, 100% 100%, 0 100%); /* 展開したままキープ */
    transform: scale(1);
  }
  36% {
    opacity: 1;
    clip-path: polygon(120% 0, 120% 0, 100% 100%, 120% 100%); /* さらに右へスライドして消える */
  }
  37%, 100% {
    opacity: 0;
    clip-path: polygon(120% 0, 120% 0, 100% 100%, 120% 100%);
    transform: scale(1);
  }
}

.hero-content {
  position: relative; z-index: 2; padding-left: 5%; max-width: 1000px;
  animation: fadeInUp 1.5s forwards; opacity: 0; transform: translateY(30px);
}
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

.hero-sub-tag {
  display: inline-block; background: var(--color-red); padding: 6px 20px;
  font-size: 0.9rem; font-weight: 900; letter-spacing: 2px; margin-bottom: 25px;
  font-family: var(--font-en);
}
.hero-catch { font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 900; line-height: 1.2; margin-bottom: 25px; letter-spacing: -0.02em; }
.hero-desc { font-size: 1.15rem; font-weight: 700; margin-bottom: 50px; line-height: 1.9; opacity: 0.9; }
/* =========================================
   遊び心：テキストのポップアップアニメーション
========================================= */
/* JSで分割された1文字ずつの装飾 */
.hero-catch .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) rotate(10deg);
  animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes popIn {
  to {
    opacity: 1;
    transform: translateY(0) rotate(0);
  }
}

/* =========================================
   遊び心：ボタンホバー時のシュートアクション
========================================= */
.btn-cta .material-icons-outlined {
  display: inline-block;
  transition: 0.3s;
}

/* ホバーするとボールが回転しながら飛んでいき、左から戻ってくる */
.btn-cta:hover .material-icons-outlined {
  animation: shootBall 0.6s ease forwards;
}

@keyframes shootBall {
  0%   { transform: translateX(0) rotate(0deg); opacity: 1; }
  40%  { transform: translateX(30px) rotate(360deg); opacity: 0; }
  50%  { transform: translateX(-30px) rotate(0deg); opacity: 0; }
  100% { transform: translateX(0) rotate(360deg); opacity: 1; }
}
.btn-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--color-red); color: #fff; font-weight: 900; padding: 20px 50px;
  font-size: 1.2rem; transition: 0.3s;
}
.btn-cta:hover { background: #c40010; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(230,0,18,0.3); }

.scroll-indicator {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; color: rgba(255,255,255,0.5);
  font-family: var(--font-en); font-size: 0.8rem; letter-spacing: 2px; font-weight: 700;
  animation: fadeIn 2s ease-in forwards 1.5s; opacity: 0;
}
.scroll-indicator::after {
  content: ''; display: block; width: 1px; height: 50px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.5) 50%, transparent 50%);
  background-size: 100% 200%; margin-top: 15px; animation: scrollLine 1.5s linear infinite;
}
@keyframes scrollLine { 0% { background-position: 0 -100%; } 100% { background-position: 0 100%; } }
@keyframes fadeIn { to { opacity: 1; } }

/* =========================================
   Marquee
========================================= */
.marquee {
  background: var(--color-navy); padding: 20px 0; overflow: hidden;
  display: flex; white-space: nowrap; user-select: none;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.marquee-content {
  font-family: var(--font-en); font-size: 3rem; font-weight: 900;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.1);
  display: inline-block; animation: scrollMarquee 30s linear infinite;
}
.marquee-content span { margin-right: 60px; color: rgba(255,255,255,0.05); -webkit-text-stroke: 0; }
@keyframes scrollMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* =========================================
   Manifesto
========================================= */
.manifesto {
  position: relative; padding: 100px 0; color: #fff; text-align: center;
  background: linear-gradient(rgba(17,34,56,0.95), rgba(17,34,56,0.95)),
              url('/wp-content/themes/kohnan-fc-theme/assets/images/intro-bg.png') center/cover fixed;
}
.manifesto-icon { font-size: 5rem; color: var(--color-red); margin-bottom: 30px; }
.manifesto-lead { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; line-height: 1.3; margin-bottom: 40px; color: #fff; opacity: 0;}
.manifesto-lead .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px) scale(0.9);
}

/* 通常文字：じわっと力強く現れる */
@keyframes revealIn {
  0%   { opacity: 0; transform: translateY(30px) scale(0.9); filter: blur(5px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* 強調文字：遅れて、大きく脈動して現れる */
@keyframes highlightPulse {
  0%   { opacity: 0; transform: translateY(30px) scale(0.9); filter: blur(5px); }
  60%  { opacity: 1; transform: translateY(-10px) scale(1.1); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.manifesto-hl { color: var(--color-red); position: relative; }
.manifesto-hl::after { content: none; }
.manifesto-text { font-size: 1.15rem; color: rgba(255,255,255,0.8); line-height: 2; font-weight: 700; max-width: 900px; margin: 0 auto; }

/* =========================================
   Common Section Styles
========================================= */
.section { padding: 100px 0; position: relative; }
.sec-header-modern { text-align: center; margin-bottom: 80px; position: relative; }
@media (max-width: 768px) {
	.sec-header-modern { margin-bottom: 40px;
	}
}
.sec-bg-text {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-en); font-size: clamp(3.5rem, 10vw, 8rem); font-weight: 900;
  color: transparent; -webkit-text-stroke: 1px rgba(17,34,56,0.15);
  white-space: nowrap; z-index: 0; user-select: none;
}
.sec-bg-text.light { -webkit-text-stroke: 1px rgba(255,255,255,0.1); }
.sec-title-main { position: relative; z-index: 1; font-size: clamp(1.8rem, 3vw, 2.2rem); font-weight: 900; color: var(--color-navy); letter-spacing: 0.05em; }
.sec-title-main.light { color: #fff; }
.sec-header.center .sec-title-en {
    left: 50%;
    transform: translate(-50%, -50%);
}
.sec-lead { text-align: center; font-size: 1.1rem; color: #444; font-weight: 700; margin-bottom: 60px; line-height: 1.8; position: relative; z-index: 1; max-width: 800px; margin-left: auto; margin-right: auto; }
@media (max-width: 768px) {
	.sec-lead {
		margin-bottom: 30px;
	}
}
.sec-lead.light { color: rgba(255,255,255,0.9); }

/* =========================================
   NEWS Section
========================================= */
.news-section { background: #fff; border-top: 1px solid #eee; }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-bottom: 50px; }
.news-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #eee; transition: 0.3s; }
.news-card:hover { background: var(--color-bg-light); border-color: var(--color-navy); }
.card-thumb { position: relative; height: 200px; overflow: hidden; background: var(--color-navy); }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(20%); transition: 0.4s; }
.news-card:hover .card-thumb img { filter: grayscale(0%); transform: scale(1.05); }
.card-cat { position: absolute; top: 15px; left: 15px; background: var(--color-red); color: #fff; font-size: 0.75rem; font-weight: 900; padding: 4px 12px; font-family: var(--font-en); letter-spacing: 1px; }
.card-body { padding: 25px; display: flex; flex-direction: column; flex-grow: 1; }
.card-date { font-size: 0.9rem; color: var(--color-navy); font-weight: 700; margin-bottom: 10px; font-family: var(--font-en); }
.card-title { font-size: 1.1rem; font-weight: 900; line-height: 1.5; color: var(--color-navy); transition: 0.3s; margin-bottom: 20px; }
.news-card:hover .card-title { color: var(--color-red); }
.card-arrow { margin-top: auto; align-self: flex-end; color: #ccc; transition: 0.3s; }
.news-card:hover .card-arrow { color: var(--color-red); transform: translateX(5px); }

/* =========================================
   Courses
========================================= */
.course-bg { background: var(--color-bg-light); }
.course-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; }
.course-item {
  display: flex; flex-direction: column; min-height: 100%; color: inherit;
  transition: 0.4s; position: relative; background: #fff; border: 1px solid #eee;
  overflow: hidden; box-shadow: 0 5px 15px rgba(17,34,56,0.05);
}
.course-item:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(17,34,56,0.1); border-color: var(--color-navy); }
.course-img-wrap { width: 100%; overflow: hidden; position: relative; background: var(--color-navy); }
.course-img-wrap img { width: 100%; height: 100%; transition: 0.4s; }
.course-item:hover .course-img-wrap img { filter: grayscale(0%); transform: scale(1.05); }
.course-text-wrap { padding: 24px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.course-label { display: inline-block; width: fit-content; margin-bottom: 14px; padding: 6px 10px; background: var(--color-bg-light); color: var(--color-navy); font-family: var(--font-en); font-size: 0.78rem; font-weight: 900; letter-spacing: 1.2px; line-height: 1; }
.course-name { font-family: var(--font-en); font-size: 2.2rem; font-weight: 900; color: var(--color-navy); line-height: 1; margin-bottom: 8px; transition: 0.3s; }
.course-item:hover .course-name { color: var(--color-red); }
.course-jp { font-size: 0.95rem; font-weight: 900; color: #666; margin-bottom: 15px; line-height: 1.6; }
.course-desc { margin-bottom: 20px; font-size: 0.92rem; color: #555; font-weight: 700; line-height: 1.8; }
.course-action { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border: 1px solid var(--color-navy); background: #fff; color: var(--color-navy); font-weight: 900; font-size: 0.95rem; transition: 0.3s; }
.course-item:hover .course-action { background: var(--color-navy); color: #fff; }

/* =========================================
   Philosophy
========================================= */
.philosophy {
  position: relative; margin-top: 100px; color: #fff; padding: 180px 0;
  background: linear-gradient(rgba(17,34,56,0.9), rgba(17,34,56,0.9)),
              url('/wp-content/themes/kohnan-fc-theme/assets/images/intro-bg.png') center/cover fixed;
}
.phil-inner { max-width: 90%; margin: 0 auto; text-align: center; }
.phil-heading { font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 900; line-height: 1.5; margin-bottom: 40px; }
.phil-heading span { color: var(--color-red); position: relative; display: inline-block; }
.phil-heading span::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 4px; background: var(--color-red); }
.quote-box { font-size: 1.2rem; font-weight: 900; color: var(--color-red); margin-bottom: 30px; letter-spacing: 1px; }
.phil-desc { font-size: 1rem; font-weight: 700; color: rgba(255,255,255,0.8); line-height: 1.8; margin-bottom: 20px; }

/* =========================================
   Message Section
========================================= */
.message-section { padding: 120px 0; background: var(--color-bg-light); }
.message-layout { display: flex; align-items: stretch; gap: 0; background: #fff; border: 1px solid #eee; }
.message-img { flex: 1; min-height: 400px; background: url('/wp-content/themes/kohnan-fc-theme/assets/images/ceo.avif') center/cover no-repeat;}
.message-text { flex: 1.2; padding: 60px; display: flex; flex-direction: column; justify-content: center; }
.m-catch { font-size: clamp(1.4rem, 2.5vw, 1.8rem); font-weight: 900; color: var(--color-navy); margin-bottom: 30px; line-height: 1.5; }
.m-body { font-size: 0.95rem; font-weight: 700; color: #555; margin-bottom: 20px; line-height: 1.8; }
.m-sign { font-size: 1.1rem; font-weight: 900; color: var(--color-navy); text-align: right; margin-top: 40px; padding-top: 20px; border-top: 2px solid var(--color-navy); }

/* =========================================
   Style Section
========================================= */
.style-section { background: #fff; padding: 120px 0 150px; position: relative; overflow: hidden; }
@media (max-width: 768px) {
	.style-section { padding: 80px 0 60px;
	}
}
.style-grid { display: flex; flex-direction: column; gap: 60px; max-width: 1000px; margin: 0 auto; position: relative; z-index: 2; }
.style-item { display: flex; align-items: stretch; gap: 0; background: #fff; border: 1px solid #eee; box-shadow: 0 15px 40px rgba(0,0,0,0.03); }
.style-item:nth-child(even) { flex-direction: row-reverse; }
.style-img { flex: 1; min-height: 350px; background-size: cover; background-position: center; }
.style-text { flex: 1.2; padding: 60px; display: flex; flex-direction: column; justify-content: center; position: relative; background: #fff; }
.s-num { position: absolute; top: -30px; left: -20px; font-family: var(--font-en); font-size: 8rem; font-weight: 900; color: rgba(17,34,56,0.1); line-height: 1; z-index: 0; pointer-events: none; }
.style-item:nth-child(even) .s-num { left: auto; right: -20px; }
.s-title { font-size: 1.6rem; font-weight: 900; margin-bottom: 20px; color: var(--color-navy); position: relative; z-index: 1; }
.s-text { font-size: 1.05rem; color: #555; font-weight: 700; line-height: 1.8; position: relative; z-index: 1; }

/* =========================================
   Final CTA
========================================= */
.final-cta {
  position: relative; padding: 120px 20px; text-align: center; color: #fff;
  background: linear-gradient(rgba(17,34,56,0.9), rgba(17,34,56,0.95)),url('/wp-content/themes/kohnan-fc-theme/assets/images/top-contact.png') center/cover fixed;
}
.final-cta-inner { position: relative; z-index: 2; max-width: 100%; margin: 0 auto; }
.final-cta-h { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; margin-bottom: 20px; line-height: 1.3; }
.final-cta-p { max-width: 90%; margin: 0 auto 40px auto; font-size: 1.1rem; font-weight: 700; opacity: 0.9; }

/* =========================================
   Buttons
========================================= */
.btn-outline { display: inline-flex; align-items: center; gap: 5px; padding: 18px 40px; border: 2px solid var(--color-navy); color: var(--color-navy); font-weight: 900; transition: 0.3s; }
.btn-outline:hover { background: var(--color-navy); color: #fff; }
.btn-outline-white { display: inline-flex; align-items: center; gap: 5px; padding: 18px 40px; border: 2px solid #fff; color: #fff; font-weight: 900; transition: 0.3s; }
.btn-outline-white:hover { background: #fff; color: var(--color-navy); }
.btn-solid-white { display: inline-flex; align-items: center; gap: 10px; background: var(--color-red); color: #fff; font-weight: 900; padding: 20px 50px; font-size: 1.2rem; transition: 0.3s; }
.btn-solid-white:hover { background: #c40010; transform: translateY(-3px); }
.btn-primary { display: inline-flex; align-items: center; justify-content: center; background: var(--color-red); color: #fff; font-size: 1.1rem; font-weight: 900; padding: 18px 50px; border-radius: 4px; letter-spacing: 1px; transition: 0.3s; }
@media (max-width: 768px) {
	.btn-primary {
		padding: 18px 30px;
	}
}
.btn-primary:hover { background: #c40010; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(230,0,18,0.3); }

/* =========================================
   Footer
========================================= */
footer { background: #08111c; color: #fff; padding: 120px 0 40px; text-align: center; }
.footer-logo-wrap a{ display: flex; align-items: center; justify-content: center; gap: 15px; margin-bottom: 30px; }
.footer-logo-img { width: 60px; border-radius: 50%; }
.footer-logo-text { font-family: var(--font-en); font-size: 1.2rem; color: rgba(255,255,255,0.5); letter-spacing: 2px; }
.footer-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin-bottom: 40px; margin-top: 30px; }
.footer-nav a { font-size: 0.9rem; color: rgba(255,255,255,0.5); font-weight: 700; transition: 0.3s; }
.footer-nav a:hover { color: #fff; }
.footer-contact { font-size: 0.9rem; opacity: 0.7; margin-bottom: 40px; line-height: 2; }
.copyright { font-size: 0.75rem; opacity: 0.3; padding-top: 40px; border-top: 1px solid rgba(255,255,255,0.05); }

/* =========================================
   Page Hero (Inner Pages)
========================================= */
.page-hero {
  position: relative; height: 400px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(to right, var(--color-navy) 0%, rgba(17,34,56,0.3) 100%),
              url('https://images.unsplash.com/photo-1518091043644-c1d4457512c6?q=80&w=1920&auto=format&fit=crop');
  background-size: cover; background-position: center;
  color: #fff; text-align: center; margin-top: 70px;
  border-bottom: 2px solid var(--color-red); overflow: hidden;
}
.page-hero, section {
  overflow-x: hidden;
}
.page-hero-bg-text {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-en); font-size: 10vw; font-weight: 900; color: rgba(255,255,255,0.15);
  white-space: nowrap; pointer-events: none; z-index: 1; letter-spacing: 5px;
}
.hero-inner { position: relative; z-index: 2; animation: fadeInUp 1s forwards; }
.page-title-en { font-family: var(--font-en); font-size: clamp(3rem, 5vw, 4.5rem); letter-spacing: 2px; line-height: 1; font-weight: 900; text-shadow: 2px 2px 10px rgba(0,0,0,0.5); }
.page-title-jp { font-size: 1.1rem; font-weight: 700; color: #fff; letter-spacing: 2px; display: inline-block; margin-top: 10px; border-top: 1px solid var(--color-red); padding-top: 10px; text-shadow: 1px 1px 5px rgba(0,0,0,0.5); }

/* Breadcrumb */
.breadcrumb { background: var(--color-navy); padding: 15px 0; font-size: 0.85rem; color: rgba(255,255,255,0.6); border-bottom: 1px solid rgba(255,255,255,0.05); }
.breadcrumb-container { display: flex; align-items: center; gap: 10px; }
.breadcrumb a:hover { color: var(--color-red); }

/* =========================================
   About Page
========================================= */
.sec-header { margin-bottom: 60px; text-align: left; border-left: 8px solid var(--color-red); padding-left: 20px; position: relative; }
.sec-header.center { text-align: center; border-left: none; padding-left: 0; }
.sec-title-en { font-family: var(--font-en); font-size: 3.5rem; color: var(--color-navy); line-height: 1; font-weight: 900; display: block; opacity: 0.1; position: absolute; transform: translateY(-50%); z-index: -1; }
.sec-title-jp { font-size: 2rem; font-weight: 900; color: var(--color-navy); position: relative; z-index: 1; }

.philosophy-wrap { display: flex; gap: 60px; align-items: center; }
.phi-img { flex: 1; position: relative; }
.phi-img img { border-radius: 8px; box-shadow: 20px 20px 0 var(--color-navy); width: 100%; object-fit: cover; }
.phi-text { flex: 1.2; }
.phi-lead { font-size: 2rem; font-weight: 900; line-height: 1.6; margin-bottom: 30px; color: var(--color-navy); }
.phi-lead span { color: var(--color-red); border-bottom: 4px solid var(--color-red); padding-bottom: 2px; }
.phi-desc { font-size: 1.05rem; color: #444; margin-bottom: 20px; line-height: 1.8; font-weight: 700; }

/* Manifesto Fullscreen */
.manifesto-fullscreen {
  position: relative; width: 100%; padding: 160px 10px; color: #fff; text-align: center;
  background: linear-gradient(135deg, rgba(17,34,56,0.95) 0%, rgba(17,34,56,0.7) 100%),
              url('/wp-content/themes/kohnan-fc-theme/assets/images/about-bg.png') center/cover fixed;
  display: flex; justify-content: center; align-items: center;
}
.manifesto-inner { position: relative; z-index: 2; max-width: 1000px; display: flex; flex-direction: column; align-items: center; }
.manifesto-h { font-size: clamp(1.8rem, 3.5vw, 3rem); font-weight: 900; line-height: 1.4; margin-bottom:34px;}
.manifesto-highlight { color: #fff; position: relative; display: inline-block; z-index: 1; }
.manifesto-highlight::after { content: ''; position: absolute; bottom: 5px; left: -2%; width: 104%; height: 12px; background: var(--color-red); z-index: -1; transform: skewX(-15deg); }
.manifesto-bar { width: 80px; height: 4px; background: var(--color-red); margin: 40px 0; }
.manifesto-p { font-size: 1.1rem; line-height: 2; color: rgba(255,255,255,0.9); font-weight: 700; }

/* Policy Section */
.policy-section { padding: 100px 0 150px; background: var(--color-bg-light); position: relative; }
.modern-policy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px; position: relative; z-index: 2; }
.m-policy-card { background: #fff; padding: 50px 40px; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.05); transition: 0.4s; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.m-policy-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--color-navy-light); transition: 0.4s; }
.m-policy-icon { color: var(--color-navy); margin-bottom: 5px; transition: 0.4s; text-align: center;}
.m-policy-icon .material-icons-outlined { font-size: 3.5rem; }
.m-policy-h { font-size: 1.4rem; font-weight: 900; color: var(--color-navy); margin-bottom: 20px; text-align: center;}
.m-policy-p { font-size: 0.95rem; color: #555; line-height: 1.8; font-weight: 700; flex-grow: 1; }
.juku-action-board { margin-top: 30px; display: flex; align-items: center; justify-content: space-between; padding: 20px; background: var(--color-bg-light); text-decoration: none; border-radius: 6px; transition: 0.3s; border: 1px solid transparent; }
.juku-action-board:hover { background: #fff; border-color: var(--color-red); transform: translateY(-3px); }
.juku-info { display: flex; flex-direction: column; }
.juku-label { font-size: 0.65rem; font-weight: 900; color: var(--color-red); letter-spacing: 0.1em; margin-bottom: 2px; }
.juku-name { font-size: 0.9rem; font-weight: 900; color: var(--color-navy); }

/* Recruit Section */
.recruit-fullscreen { position: relative; width: 100%; padding: 120px 20px; background: #fff; clip-path: polygon(0 4vw, 100% 0, 100% calc(100% - 4vw), 0 100%); margin-top: -4vw; margin-bottom: -4vw; }
.recruit-layout { display: flex; align-items: center; justify-content: space-between; gap: 60px; max-width: 1000px; margin: 0 auto; }
.recruit-head { flex: 1; }
.recruit-en { clip-path: inset(0 100% 0 0); /* 最初は右側を100%切り取って隠す */
  transition: clip-path 1s cubic-bezier(0.165, 0.84, 0.44, 1);
	font-family: var(--font-en); font-size: clamp(3rem, 5vw, 4.5rem); font-weight: 900; color: var(--color-navy); line-height: 1; display: block; margin-bottom: 20px; }
.recruit-fullscreen.is-active .recruit-en {
  clip-path: inset(0 0 0 0); /* スクロール到達で全開 */
}
.recruit-jp { font-size: clamp(1.4rem, 2.5vw, 1.8rem); font-weight: 900; color: var(--color-navy); line-height: 1.6; }
.recruit-list-wrap { flex: 1; }
.recruit-solid-list { list-style: none; padding: 0; margin: 0; border-top: 3px solid var(--color-navy); }
.recruit-solid-list li { opacity: 0;
  transform: translateX(-30px);
	font-size: 1.1rem; font-weight: 900; color: var(--color-navy); padding: 20px 0; border-bottom: 1px solid rgba(17,34,56,0.1); display: flex; align-items: center; letter-spacing: 0.05em; }
.recruit-fullscreen.is-active .recruit-solid-list li {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.5s ease, transform 0.5s ease, padding-left 0.3s ease, color 0.3s ease;
}
.recruit-fullscreen.is-active .recruit-solid-list li:nth-child(1) { transition-delay: 0.2s; }
.recruit-fullscreen.is-active .recruit-solid-list li:nth-child(2) { transition-delay: 0.3s; }
.recruit-fullscreen.is-active .recruit-solid-list li:nth-child(3) { transition-delay: 0.4s; }
.recruit-fullscreen.is-active .recruit-solid-list li:nth-child(4) { transition-delay: 0.5s; }
.recruit-fullscreen.is-active .recruit-solid-list li:nth-child(5) { transition-delay: 0.6s; }
.recruit-solid-list li::before { content: '/'; color: var(--color-red); font-family: var(--font-en); font-weight: 900; font-size: 1.5rem; margin-right: 15px; }
/* 3. マウスホバー時の「踏み込み」アクション */
.recruit-fullscreen.is-active .recruit-solid-list li:hover {
  padding-left: 10px; /* 右に踏み込む */
  color: var(--color-red);
  transition-delay: 0s !important; /* ホバー時は即時反応させる */
}
.recruit-solid-list li::before {
  display: inline-block;
  transition: transform 0.3s ease, margin-right 0.3s ease;
}
.recruit-fullscreen.is-active .recruit-solid-list li:hover::before {
  transform: rotate(15deg) scale(1.2); /* スラッシュが前のめりになる */
  margin-right: 20px;
}
/* =========================================
   ギャラリーセクション (JS連動の堅牢版)
========================================= */
.gallery-section { padding: 60px 0; background: #fff; overflow: hidden; border-top: 1px dashed #ddd; border-bottom: 1px dashed #ddd; }
.gallery-lead { text-align: center; font-size: 1.5rem; font-weight: 900; color: var(--color-navy); margin-bottom: 40px; }
.gallery-lead span { color: var(--color-red); }

.gallery-track-wrap { display: flex; flex-direction: column; gap: 20px; width: 100vw; overflow: hidden; }

.gallery-track { 
  display: flex; 
  gap: 20px; 
  width: max-content; 
  will-change: transform;
  /* GPUアクセラレーション */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.gallery-track img { 
  height: 250px; 
  width: auto; 
  border-radius: 8px; 
  object-fit: cover; 
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  /* JSで計算する際のノイズになるドラッグ操作を防止 */
  user-select: none;
  -webkit-user-drag: none;
}
/* Identity Section */
.identity-section { background: var(--color-navy); color: #fff; padding: 120px 0; position: relative; overflow: hidden; }
.identity-bg-logo { position: absolute; top: 50%; right: -10%; transform: translateY(-50%) rotate(-10deg); width: 60%; opacity: 0.05; pointer-events: none; }
.identity-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; position: relative; z-index: 2; margin-top: 40px; }
.emblem-display { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.emblem-img-wrap { width: 280px; height: 280px; background-color: #fff; display: flex; justify-content: center; align-items: center; margin-bottom: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); padding: 30px; }
.emblem-img { width: 100%; height: 100%; object-fit: contain; }
.colors-wrap { display: flex; gap: 20px; }
.color-chip { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; font-family: var(--font-en); font-weight: 700; border: 2px solid rgba(255,255,255,0.2); font-size: 0.9rem; }
.color-chip span { font-family: var(--font-jp); font-size: 0.7rem; opacity: 0.8; }
.chip-red { background: var(--color-red); color: #fff; }
.chip-blue { background: var(--color-navy-light); color: #fff; }
.identity-content h3 { font-family: var(--font-en); font-size: 2.5rem; margin-bottom: 20px; font-weight: 900; }
.identity-content h3 span { color: var(--color-red); }
.identity-desc { color: rgba(255,255,255,0.8); margin-bottom: 30px; line-height: 1.8; font-weight: 700; }
.feature-list { list-style: none; }
.feature-list li { margin-bottom: 15px; padding-left: 25px; position: relative; font-weight: 700; color: #fff; }
.feature-list li::before { content: '>'; position: absolute; left: 0; color: var(--color-red); font-family: var(--font-en); font-weight: 900; }

/* Uniform Section */
.uniform-section { background: var(--color-bg-light); border-bottom: 1px solid #ddd; }
.uniform-container { display: flex; justify-content: center; gap: 50px; flex-wrap: wrap; margin-top: 50px; }
.uniform-box { text-align: center; width: 300px; }
.kit-image { width: 100%; height: 350px; background: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.kit-label { font-family: var(--font-en); font-size: 1.5rem; font-weight: 900; color: var(--color-navy); }
.kit-desc { font-size: 0.9rem; color: #666; font-weight: 700; }
.kit-1st .kit-image { border-bottom: 5px solid var(--color-red); }
.kit-2nd .kit-image { border-bottom: 5px solid var(--color-navy); }

/* History Timeline */
.history-section { background: var(--color-bg-light); }
.timeline { position: relative; max-width: 800px; margin: 0 auto; padding: 40px 0; }
.timeline::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: rgba(17,34,56,0.1); transform: translateX(-50%); }
.timeline-item { display: flex; justify-content: flex-end; padding-bottom: 60px; position: relative; width: 50%; clear: both; }
.timeline-item:nth-child(even) { flex-direction: row-reverse; align-self: flex-end; margin-left: 50%; }
.timeline-item:nth-child(odd) { margin-right: 50%; }
.timeline-year { position: absolute; top: 0; right: -25px; width: 50px; height: 50px; background: var(--color-red); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-en); font-weight: 700; z-index: 2; border: 4px solid var(--color-bg-light); }
.timeline-item:nth-child(even) .timeline-year { right: auto; left: -25px; }
.timeline-content { background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); width: 85%; position: relative; border-left: 4px solid var(--color-navy); }
.timeline-item:nth-child(even) .timeline-content { border-left: none; border-right: 4px solid var(--color-navy); }
.timeline-content h4 { color: var(--color-navy); font-weight: 900; margin-bottom: 10px; font-size: 1.2rem; }
.timeline-content p { font-size: 0.95rem; color: #555; line-height: 1.6; font-weight: 700; }

/* Overview Table */
.overview-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 4px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.05); margin-bottom: 80px; }
.overview-table th { background: var(--color-bg-light); color: var(--color-navy); padding: 25px; width: 30%; text-align: left; font-weight: 900; border-bottom: 1px solid #eee; }
.overview-table td { padding: 25px; border-bottom: 1px solid #eee; color: #444; font-weight: 700; }
.map-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.map-card { background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); }
.map-iframe { width: 100%; height: 250px; background: #f0f0f0; margin-bottom: 20px; border-radius: 4px; overflow: hidden; }
.map-title { font-weight: 900; color: var(--color-navy); margin-bottom: 8px; font-size: 1.1rem; }
.map-addr { font-size: 0.9rem; color: #666; display: flex; align-items: center; font-weight: 700; }
.map-addr::before { content: '📍'; margin-right: 5px; }

/* =========================================
   Staff Page
========================================= */
.philosophy-section { background: var(--color-bg-light); }
.step-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; max-width: 1000px; margin: 80px auto 0; }
.step-item { position: relative; padding-top: 40px; border-top: 2px solid var(--color-navy); }
.step-num { position: absolute; top: -45px; left: 0; font-family: var(--font-en); font-size: 5rem; font-weight: 900; color: var(--color-navy); opacity: 0.1; line-height: 1; }
.step-target { font-family: var(--font-en); font-size: 0.9rem; font-weight: 900; color: var(--color-red); letter-spacing: 1px; margin-bottom: 5px; }
.step-h { font-size: 1.3rem; font-weight: 900; color: var(--color-navy); margin-bottom: 15px; }
.step-p { font-size: 0.95rem; color: #555; line-height: 1.7; font-weight: 700; }
.staff-fullscreen { position: relative; width: 100%; padding: 180px 20px 120px; background: var(--color-navy); clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%); margin-top: -5vw; margin-bottom: -5vw; }
.group-title-wrap { display: flex; align-items: center; gap: 20px; margin: 60px 0 40px; max-width: 1100px; margin-left: auto; margin-right: auto; }
.group-title-wrap::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.1); }
.group-title { font-family: var(--font-en); font-size: 2.2rem; font-weight: 900; color: #fff; letter-spacing: 2px; }
.staff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px; max-width: 1100px; margin: 0 auto; }
.m-staff-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); display: flex; flex-direction: column; }
.m-staff-card.director { border-top: 4px solid var(--color-red); }
.s-img { width: 100%; height: 350px; background: #000; position: relative; }
.s-img img { width: 100%; height: 100%; object-fit: cover;}
.s-info { padding: 30px; display: flex; flex-direction: column; flex-grow: 1; }
.s-role-wrap { margin-bottom: 10px; }
.s-role { display: inline-block; padding: 3px 10px; font-size: 0.75rem; font-weight: 900; letter-spacing: 1px; }
.s-role.red-badge { background: var(--color-red); color: #fff; }
.s-role.white-badge { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.2); }
.s-name { font-size: 1.5rem; font-weight: 900; color: #fff; line-height: 1.2; margin-bottom: 15px; }
.s-name-en { display: block; font-family: var(--font-en); font-size: 0.85rem; font-weight: 400; color: rgba(255,255,255,0.5); letter-spacing: 1px; margin-top: 2px; }
.s-career-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.s-career-tag { font-size: 0.75rem; font-weight: 700; color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.2); padding: 3px 10px; border-radius: 50px; }
.s-msg { font-size: 0.95rem; line-height: 1.7; color: rgba(255,255,255,0.7); font-weight: 700; margin-top: auto; }

/* =========================================
   News List Page
========================================= */
.news-list { border-top: 3px solid var(--color-navy); display: flex; flex-direction: column; }
.news-item { display: flex; align-items: center; gap: 30px; padding: 30px 20px; border-bottom: 1px solid #eee; transition: 0.4s; background: #fff; }
.news-item:hover { background: var(--color-bg-light); }
.news-thumb { flex: 0 0 180px; height: 120px; background: var(--color-navy); border-radius: 4px; overflow: hidden; }
.news-thumb img { width: 100%; height: 100%; object-fit: cover; transition: 0.4s; }
.news-item:hover .news-thumb img { transform: scale(1.05);}
.news-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.news-meta { display: flex; align-items: center; gap: 15px; margin-bottom: 10px; }
.news-date { font-family: var(--font-en); font-size: 1rem; color: var(--color-navy); font-weight: 700; letter-spacing: 1px; }
.news-cat { display: inline-block; font-size: 0.75rem; color: #fff; padding: 3px 12px; border-radius: 2px; font-weight: 900; letter-spacing: 1px; font-family: var(--font-en); }
.cat-match { background-color: var(--color-red); }
.cat-info { background-color: var(--color-navy-light); }
.cat-blog { background-color: #888; }
.cat-important { background: transparent; border: 2px solid var(--color-red); color: var(--color-red); }
.news-title { font-size: 1.2rem; font-weight: 900; line-height: 1.5; color: var(--color-navy); transition: 0.3s; }
.news-item:hover .news-title { color: var(--color-red); }
.news-arrow { flex: 0 0 40px; text-align: right; color: #ccc; transition: 0.4s; display: flex; justify-content: flex-end; }
.news-arrow .material-icons-outlined { font-size: 2rem; }
.news-item:hover .news-arrow { color: var(--color-red); transform: translateX(10px); }
.badge-new { color: var(--color-red); font-family: var(--font-en); font-size: 0.8rem; font-weight: 900; margin-left: 10px; border: 1px solid var(--color-red); padding: 2px 6px; border-radius: 2px; }
.category-filter { display: flex; justify-content: center; gap: 15px; margin-bottom: 60px; flex-wrap: wrap; }

@media (max-width: 768px) {
	.category-filter {
		gap: 10px;
	}
}
.cat-btn { display: inline-block; padding: 10px 25px; border: 1px solid rgba(17,34,56,0.2); border-radius: 4px; font-size: 0.9rem; font-weight: 900; color: var(--color-navy); transition: 0.3s; background: #fff; cursor: pointer; text-decoration: none; }
@media (max-width: 768px) {
	.cat-btn {
		padding: 10px 15px;
	}
}
.cat-btn:hover, .cat-btn.active { background: var(--color-navy); color: #fff; border-color: var(--color-navy); }
.pagination { display: flex; justify-content: center; gap: 10px; margin-top: 80px; }
.page-num { width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; border: 1px solid #ccc; color: var(--color-navy); font-family: var(--font-en); font-weight: 900; transition: 0.3s; border-radius: 4px; font-size: 1.1rem; }
.page-num:hover, .page-num.current { background: var(--color-navy); color: #fff; border-color: var(--color-navy); }
.wp-pagenavi { display: flex; justify-content: center; gap: 10px; margin-top: 80px; flex-wrap: wrap; }
.wp-pagenavi a, .wp-pagenavi span { width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; border: 1px solid #ccc; color: var(--color-navy); font-family: var(--font-en); font-weight: 900; transition: 0.3s; border-radius: 4px; font-size: 1.1rem; }
.wp-pagenavi a:hover, .wp-pagenavi span.current { background: var(--color-navy); color: #fff; border-color: var(--color-navy); }

/* =========================================
   Single Post
========================================= */
.article-section { padding: 80px 0 120px; background: #fff; min-height: 80vh; }
.article-container { max-width: 800px; margin: 0 auto; padding: 0 20px; }
.post-header { margin-bottom: 40px; }
.post-meta { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.post-date { font-family: var(--font-en); font-size: 1.1rem; color: var(--color-navy); font-weight: 700; letter-spacing: 1px; }
.post-cat { display: inline-block; font-size: 0.75rem; color: #fff; padding: 3px 12px; border-radius: 2px; font-weight: 900; letter-spacing: 1px; font-family: var(--font-en); background-color: var(--color-red); }
.post-title { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 900; line-height: 1.4; color: var(--color-navy); margin-bottom: 30px; }
.post-eyecatch { margin-bottom: 50px; }
.post-eyecatch img { width: 100%; height: auto; border-radius: 4px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.post-body { font-size: 1.05rem; line-height: 2; color: #333; margin-bottom: 80px; }
.post-body h2 { font-size: 1.6rem; font-weight: 900; color: var(--color-navy); border-bottom: 3px solid var(--color-navy); border-left: 8px solid var(--color-red); padding: 12px 15px; margin: 60px 0 30px; line-height: 1.3; }
.post-body h3 { font-size: 1.3rem; font-weight: 900; color: var(--color-navy); border-bottom: 1px solid #ccc; padding-bottom: 10px; margin: 50px 0 25px; position: relative; }
.post-body h3::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 60px; height: 3px; background: var(--color-red); }
.post-body h4 { font-size: 1.1rem; font-weight: 900; color: var(--color-navy); margin: 40px 0 20px; display: flex; align-items: center; gap: 10px; }
.post-body h4::before { content: '■'; color: var(--color-red); font-size: 0.8em; }
.post-body p { margin-bottom: 25px; }
.post-body img { max-width: 100%; height: auto; border-radius: 4px; margin: 30px 0; border: 1px solid #eee; }
.post-body blockquote { border-left: 5px solid var(--color-red); margin: 40px 0; padding: 25px 30px; color: #555; font-weight: 700; background: var(--color-bg-light); border-radius: 0 4px 4px 0; }
.post-body ul, .post-body ol { margin-bottom: 30px; padding-left: 0; list-style: none; }
.post-body ul li { margin-bottom: 15px; padding-left: 25px; position: relative; font-weight: 700; border-bottom: 1px dashed #eee; padding-bottom: 10px; }
.post-body ul li::before { content: '/'; position: absolute; left: 0; top: 0; color: var(--color-red); font-family: var(--font-en); font-weight: 900; }
.post-nav { display: flex; justify-content: space-between; gap: 20px; border-top: 3px solid var(--color-navy); padding-top: 40px; }
.nav-link { flex: 1; display: flex; flex-direction: column; text-decoration: none; padding: 30px; background: #fff; border: 1px solid #eee; transition: 0.3s; max-width: 48%; position: relative; }
.nav-link:hover { background: var(--color-navy); border-color: var(--color-navy); }
.nav-link:hover * { color: #fff !important; }
.nav-label { display: flex; align-items: center; gap: 5px; font-size: 0.8rem; color: #888; font-weight: 900; margin-bottom: 10px; font-family: var(--font-en); letter-spacing: 1px; }
.nav-link.next .nav-label { justify-content: flex-end; }
.nav-title { font-size: 1rem; font-weight: 900; color: var(--color-navy); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.back-btn-wrap { text-align: center; margin-top: 80px; }
.btn-back { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 50px; border: 2px solid var(--color-navy); color: var(--color-navy); font-weight: 900; transition: 0.3s; font-family: var(--font-jp); }
.btn-back:hover { background: var(--color-navy); color: #fff; }

/* =========================================
   Sponsor Page
========================================= */
.partner-section { padding-top: 60px; background: var(--color-bg-light); }
.partner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 30px; max-width: 1100px; margin: 0 auto; }
.partner-card { background: #fff; border-radius: 4px; overflow: hidden; border: 1px solid #eee; display: flex; flex-direction: column; height: 100%; transition: 0.4s; position: relative; }
.partner-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(17,34,56,0.08); border-color: var(--color-navy); }
.partner-img-area { width: 100%; aspect-ratio: 16/9; background: #fff; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #f0f0f0; padding: 20px; }
.partner-img-area img { max-width: 100%; max-height: 100%; object-fit: contain; transition: 0.4s; }
.partner-card:hover .partner-img-area img { transform: scale(1.05); }
.partner-info { padding: 25px 20px; flex-grow: 1; display: flex; flex-direction: column; }
.partner-name { font-size: 1.1rem; font-weight: 900; color: var(--color-navy); margin-bottom: 10px; line-height: 1.4; }
.partner-desc { font-size: 0.85rem; color: #666; margin-bottom: 20px; line-height: 1.6; font-weight: 700; flex-grow: 1; }
.partner-link { display: flex; align-items: center; gap: 5px; font-size: 0.85rem; color: #ccc; font-weight: 900; font-family: var(--font-en); letter-spacing: 1px; transition: 0.4s; }
.partner-card:hover .partner-link { color: var(--color-red); }
.recruit-dummy-card { background: rgba(17,34,56,0.02); justify-content: center; align-items: center; text-align: center; border: 1px solid rgba(17,34,56,0.1); }
.recruit-dummy-card:hover { background: #fff; }
.recruit-dummy-inner { padding: 40px 20px; display: flex; flex-direction: column; align-items: center; }
.recruit-dummy-icon { color: rgba(17,34,56,0.2); margin-bottom: 15px; transition: 0.4s; }
.recruit-dummy-icon .material-icons-outlined { font-size: 3rem; }
.recruit-dummy-card:hover .recruit-dummy-icon { color: var(--color-red); }
.recruit-dummy-h { color: var(--color-navy); font-weight: 900; font-size: 1.2rem; margin-bottom: 10px; }
.recruit-dummy-p { font-size: 0.85rem; color: #666; font-weight: 700; }
.recruit-section { position: relative; width: 100%; padding: 160px 20px 140px; background: var(--color-navy); clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%); margin-top: 100px; margin-bottom: -5vw; }
.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; max-width: 1100px; margin: 60px auto 80px; }
.benefit-item { background: rgba(255,255,255,0.03); padding: 40px 30px; border-top: 4px solid var(--color-red); text-align: center; }
.ben-icon { color: #fff; margin-bottom: 20px; }
.ben-icon .material-icons-outlined { font-size: 3.5rem; }
.ben-title { font-size: 1.2rem; font-weight: 900; color: #fff; margin-bottom: 15px; }
.ben-text { font-size: 0.95rem; color: rgba(255,255,255,0.7); line-height: 1.7; font-weight: 700; text-align: left; }
.recruit-action-area { text-align: center; }
.recruit-action-text { color: #fff; font-size: 1.1rem; font-weight: 700; margin-bottom: 30px; }

/* =========================================
   CONTACT Page Styles & CF7 Custom
========================================= */
/* FLOW Section */
.flow-fullscreen { background: var(--color-navy); padding: 120px 0; color: #fff; }
.flow-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; max-width: 1000px; margin: 0 auto; }
.flow-step { position: relative; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); padding: 40px 20px 30px; border-top: 3px solid var(--color-red); text-align: center; }
.flow-num { position: absolute; top: -20px; left: 20px; font-family: var(--font-en); font-size: 4rem; font-weight: 900; color: rgba(255,255,255,0.05); line-height: 1; pointer-events: none; }
.flow-icon { color: #fff; margin-bottom: 20px; }
.flow-icon .material-icons-outlined { font-size: 3rem; }
.flow-h { font-size: 1.1rem; font-weight: 900; color: #fff; margin-bottom: 15px; }
.flow-p { font-size: 0.85rem; color: rgba(255,255,255,0.7); line-height: 1.6; font-weight: 700; text-align: center; }

/* FORM Section Base */
.form-section { padding: 100px 0; background: var(--color-bg-light); }
.form-container { max-width: 800px; margin: 0 auto; background: #fff; padding: 60px 50px; border: 1px solid #eee; border-top: 5px solid var(--color-navy); }
.tel-contact-area { text-align: center; margin-bottom: 50px; padding-bottom: 40px; border-bottom: 1px solid #eee; }
.tel-label { font-size: 0.95rem; font-weight: 700; color: #555; margin-bottom: 10px; }
.tel-link { font-family: var(--font-en); font-size: 2.2rem; font-weight: 900; color: var(--color-navy); transition: 0.3s; display: inline-flex; align-items: center; gap: 10px; }
.tel-link:hover { color: var(--color-red); }
.tel-note { font-size: 0.8rem; color: #888; font-weight: 700; margin-top: 5px; }

/* Form Fields */
.form-group { margin-bottom: 35px; }
.form-label { display: flex; align-items: center; gap: 12px; font-weight: 900; margin-bottom: 15px; color: var(--color-navy); font-size: 1.05rem; }
.tag-required, .tag-any { font-size: 0.75rem; font-weight: 900; padding: 4px 10px; border-radius: 2px; letter-spacing: 1px; }
.tag-required { background: var(--color-red); color: #fff; }
.tag-any { background: #e0e0e0; color: #555; }
.form-control { width: 100%; padding: 18px 20px; font-size: 1rem; border: 1px solid #ccc; border-radius: 4px; background-color: #fafafa; font-family: inherit; font-weight: 700; transition: 0.3s; }
.form-control::placeholder { color: #aaa; font-weight: 400; }
.form-control:focus { background-color: #fff; border-color: var(--color-navy); outline: none; box-shadow: inset 0 0 0 1px var(--color-navy); }
textarea.form-control { min-height: 150px; }

/* Contact Form 7 Radio Customization (タブ風) */
.radio-group-cf7 .wpcf7-form-control { display: flex; flex-wrap: wrap; gap: 15px; }
.radio-group-cf7 .wpcf7-list-item { margin: 0; flex: 1; min-width: calc(50% - 15px); }
.radio-group-cf7 input[type="radio"] { display: none; } /* デフォルトの丸ボタンを消す */
.radio-group-cf7 .wpcf7-list-item-label { display: block; text-align: center; padding: 15px 10px; background: #fff; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; font-weight: 900; color: #555; transition: 0.3s; font-size: 0.95rem; }
.radio-group-cf7 .wpcf7-list-item-label:hover { background: var(--color-bg-light); border-color: var(--color-navy); }
/* 選択時の色変え */
.radio-group-cf7 input[type="radio"]:checked + .wpcf7-list-item-label { background: var(--color-navy); color: #fff; border-color: var(--color-navy); }

/* Submit Button */
.submit-area { text-align: center; margin-top: 60px; }
.btn-submit { background: var(--color-red); color: #fff; border: none; padding: 20px 80px; font-size: 1.2rem; font-weight: 900; font-family: inherit; border-radius: 4px; cursor: pointer; transition: 0.3s; width: 100%; max-width: 400px; letter-spacing: 2px; }
.btn-submit:hover { background: #c40010; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(230, 0, 18, 0.2); }
.wpcf7-form input,
.wpcf7-form select,
.wpcf7-form textarea {
  max-width: 100%;
  box-sizing: border-box;
}
/* CF7 Alerts */
.wpcf7-not-valid-tip { font-size: 0.85rem; font-weight: 700; color: var(--color-red); margin-top: 5px; }
.wpcf7-response-output { font-weight: 700; border-radius: 4px !important; margin-top: 40px !important; }

/* FAQ Section */
.faq-section { padding: 100px 0 120px; background: #fff; border-top: 1px solid #eee; }
.faq-list { max-width: 800px; margin: 0 auto; border-top: 3px solid var(--color-navy); }
.faq-item { border-bottom: 1px solid #eee; padding: 30px 0; }
.faq-q { font-weight: 900; color: var(--color-navy); font-size: 1.1rem; display: flex; gap: 15px; margin-bottom: 15px; line-height: 1.5; }
.faq-q::before { content: 'Q.'; color: var(--color-red); font-family: var(--font-en); font-size: 1.4rem; font-weight: 900; line-height: 1; }
.faq-a { color: #444; font-weight: 700; line-height: 1.8; display: flex; gap: 15px; }
.faq-a::before { content: 'A.'; color: var(--color-navy); font-family: var(--font-en); font-size: 1.4rem; font-weight: 900; line-height: 1; opacity: 0.2; }
.faq-a-text { flex: 1; }

@media (max-width: 768px) {
  .form-container { padding: 40px 20px; }
  .radio-group-cf7 .wpcf7-list-item { min-width: 100%; }
  .btn-submit { width: 100%; max-width: 100%; }
  .faq-q, .faq-a { flex-direction: column; gap: 5px; }
}

.course-detail-section { padding: 100px 0; }
.course-detail-section:nth-child(even) { background: #fff; }
.course-detail-section:nth-child(odd) { background: var(--color-bg-light); }
.course-detail-inner { display: flex; gap: 60px; align-items: center; max-width: 1100px; margin: 0 auto; }
.course-detail-inner.reverse { flex-direction: row-reverse; }
.course-detail-img { flex: 1; }
.course-detail-img img { width: 100%; border-radius: 4px; box-shadow: 10px 10px 0 var(--color-navy); }
.course-detail-body { flex: 1.2; }
.course-tag { display: inline-block; font-family: var(--font-en); font-size: 0.85rem; font-weight: 900; letter-spacing: 2px; background: var(--color-red); color: #fff; padding: 6px 16px; margin-bottom: 20px; }
.course-heading { font-family: var(--font-en); font-size: clamp(3rem, 6vw, 5rem); font-weight: 900; color: var(--color-navy); line-height: 1; margin-bottom: 10px; }
.course-sub { font-size: 1.1rem; font-weight: 900; color: #666; margin-bottom: 30px; }
.course-detail-text { font-size: 1rem; color: #444; font-weight: 700; line-height: 1.8; margin-bottom: 30px; }
.fee-table { width: 100%; border-collapse: collapse; background: #fff; margin-bottom: 30px; border: 1px solid #eee; }
.fee-table th { background: var(--color-navy); color: #fff; padding: 15px 20px; text-align: left; font-weight: 900; font-size: 0.9rem; }
.fee-table td { padding: 15px 20px; border-bottom: 1px solid #eee; font-weight: 700; color: #333; }
.fee-table tr:last-child td { border-bottom: none; }
.practice-info { background: var(--color-navy); color: #fff; padding: 25px; margin-top: 20px; }
.practice-info h4 { font-size: 0.8rem; font-family: var(--font-en); letter-spacing: 2px; color: var(--color-red); margin-bottom: 15px; }
.practice-item { display: flex; gap: 15px; align-items: flex-start; margin-bottom: 10px; font-size: 0.9rem; font-weight: 700; color: rgba(255,255,255,0.9); }
.practice-item::before { content: '→'; color: var(--color-red); font-family: var(--font-en); font-weight: 900; }
@media (max-width: 900px) {
    .course-detail-inner, .course-detail-inner.reverse { flex-direction: column; }
    .course-detail-img img { box-shadow: 5px 5px 0 var(--color-navy); }
}

/* =========================================
   Responsive
========================================= */
@media (max-width: 900px) {
  .hero-catch { font-size: 8.3vw; }
  .hero-desc{
    font-size:1rem;
  }
  .message-layout { flex-direction: column; }
  .message-img { width: 100%; }
  .message-text { padding: 40px 20px; }
  .philosophy { clip-path: polygon(0 8vw, 100% 0, 100% calc(100% - 8vw), 0 100%); padding: 140px 0; margin-top: -8vw; margin-bottom: -8vw; }
  .style-item, .style-item:nth-child(even) { flex-direction: column; }
  .style-img { width: 100%; }
  .style-text { padding: 40px 20px; }
  .manifesto { padding: 140px 0; }
  .phil-inner { max-width: 100%;}
  .btn-solid-white {
    padding: 20px 15px;
    font-size: 1.1rem;
  }
}

@media (max-width: 768px) {
/* .philosophy-wrap 用の記述は残し、.identity-grid は分離する */
  .philosophy-wrap { 
    flex-direction: column; 
  }
  
  /* .identity-grid を1列（縦積み）に変更 */
  .identity-grid { 
    grid-template-columns: 1fr; 
    gap: 40px; /* 必要に応じて縦の余白を調整してください（PC時は80pxになっています） */
  }
  .gallery-track img { height: 180px; }
  .timeline::before { left: 20px; }
  .timeline-item { width: 100%; margin-left: 0 !important; margin-right: 0 !important; padding-left: 50px; justify-content: flex-start; }
  .timeline-item:nth-child(even) { flex-direction: row; }
  .timeline-year { left: -5px !important; right: auto !important; }
  .timeline-content { width: 100%; }
  .overview-table th, .overview-table td { display: block; width: 100%; padding: 15px 20px; }
  .staff-fullscreen { clip-path: polygon(0 8vw, 100% 0, 100% calc(100% - 8vw), 0 100%); padding: 120px 20px; }
  .s-img { height: 300px; }
  .recruit-fullscreen { padding: 100px 20px 20px; clip-path: polygon(0 8vw, 100% 0, 100% calc(100% - 8vw), 0 100%); margin-top: -8vw; margin-bottom: -8vw; }
  .recruit-layout { flex-direction: column; align-items: flex-start; gap: 40px; }
  .news-item { flex-direction: column; align-items: flex-start; gap: 15px; padding: 25px 15px; }
  .news-thumb { width: 100%; height: 180px; flex: none; }
  .news-arrow { display: none; }
  .form-container { padding: 40px 20px; }
  .radio-panel { min-width: 100%; }
  .post-nav { flex-direction: column; }
  .nav-link { max-width: 100%; padding: 20px; }
  .recruit-section { clip-path: polygon(0 8vw, 100% 0, 100% calc(100% - 8vw), 0 100%); padding: 120px 20px; margin-bottom: -8vw; }
}

/* =========================================
   ACADEMY Page Styles (コース・料金)
========================================= */
/* Page Navigation (Sticky) */
.page-nav { background: var(--color-navy); position: sticky; top: 76px; z-index: 900; box-shadow: 0 4px 10px rgba(0,0,0,0.1); overflow-x: auto; white-space: nowrap; }
.page-nav::-webkit-scrollbar { display: none; }
.page-nav-list { display: flex; justify-content: center; list-style: none; min-width: max-content; }
.page-nav-item a { display: block; padding: 15px 30px; font-weight: 900; color: rgba(255,255,255,0.6); font-family: var(--font-en); letter-spacing: 1px; text-transform: uppercase; font-size: 1rem; border-bottom: 3px solid transparent; transition: 0.3s; }
.page-nav-item a:hover, .page-nav-item a.active { color: #fff; border-bottom-color: var(--color-red); background: rgba(255,255,255,0.05); }

/* Activity Badges */
.activity-badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 60px; position: relative; z-index: 1; }
.activity-badge { background: rgba(17,34,56,0.05); color: var(--color-navy); padding: 5px 15px; border-radius: 50px; font-size: 0.85rem; font-weight: 900; border: 1px solid rgba(17,34,56,0.1); }
.activity-badges.light .activity-badge { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.2); }

/* U-12 Section */
.u12-section { background: var(--color-bg-light); }
.course-cards-wrap { display: flex; flex-direction: column; gap: 40px; max-width: 1000px; margin: 0 auto; }
.c-course-row { display: flex; background: #fff; border: 1px solid #eee; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); overflow: hidden; }
.c-course-media { flex: 0 0 35%; position: relative; background-color: var(--color-navy); }
.c-course-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.2; }
.c-course-head { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; text-align: center; width: 100%; padding: 20px; }
.c-course-en { font-family: var(--font-en); font-size: 1rem; font-weight: 700; letter-spacing: 1px; display: block; }
.c-course-jp { font-size: 1.8rem; font-weight: 900; margin: 5px 0; line-height: 1.2; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.c-course-sub { font-size: 0.85rem; font-weight: 700; background: var(--color-red); padding: 2px 10px; display: inline-block; margin-top: 10px; }
.c-course-body { flex: 1; padding: 40px 30px; }
.c-course-desc { font-weight: 700; color: #444; margin-bottom: 25px; line-height: 1.7; font-size: 0.95rem; }
.clean-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.clean-table th, .clean-table td { padding: 15px 0; border-bottom: 1px solid #eee; text-align: left; vertical-align: top; }
.clean-table th { font-weight: 700; color: var(--color-navy); width: 45%; }
.clean-table td { font-weight: 900; color: var(--color-red); }
.clean-table .note { display: block; font-size: 0.75rem; color: #888; font-weight: 400; margin-top: 5px; line-height: 1.4; }
.info-alert { background: #fdf2f2; border-left: 4px solid var(--color-red); padding: 12px 20px; font-size: 0.85rem; font-weight: 700; color: #333; margin-top: 20px; display: inline-block; }

/* U-15 Section */
.u15-section { background: var(--color-navy); color: #fff; }
.u15-layout { display: flex; gap: 50px; max-width: 1100px; margin: 0 auto 80px; align-items: center; }
.u15-media { flex: 1; position: relative; }
.u15-media img { border-radius: 8px; box-shadow: 20px 20px 0 rgba(230,0,18,0.5); }
.u15-info { flex: 1.2; }
.solid-spec-table { width: 100%; border-collapse: collapse; }
.solid-spec-table th, .solid-spec-table td { padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,0.1); text-align: left; }
.solid-spec-table th { width: 35%; font-family: var(--font-en); font-weight: 900; color: var(--color-red); letter-spacing: 1px; font-size: 1rem; }
.solid-spec-table td { width: 65%; font-weight: 700; font-size: 0.95rem; }
.solid-spec-table tr:last-child th, .solid-spec-table tr:last-child td { border-bottom: none; }
.price-display { font-family: var(--font-en); font-size: 2.5rem; font-weight: 900; color: #fff; line-height: 1; }
.price-display small { font-size: 1rem; font-weight: 700; font-family: var(--font-jp); opacity: 0.7; }

/* OB Voices */
.career-section { margin-top: 80px; }
.career-title { text-align: center; color: #fff; margin-bottom: 50px; font-size: 1.5rem; font-weight: 900; font-family: var(--font-en); letter-spacing: 2px; }
.career-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; max-width: 1000px; margin: 0 auto; }
.career-card { background: rgba(255,255,255,0.03); padding: 30px; border-left: 4px solid var(--color-red); display: flex; flex-direction: column; }
.c-comment { font-size: 0.95rem; line-height: 1.8; color: rgba(255,255,255,0.9); font-weight: 700; margin-bottom: 25px; position: relative; flex-grow: 1; }
.c-comment::before { content: '“'; font-family: var(--font-en); font-size: 4rem; color: rgba(230,0,18,0.2); position: absolute; top: -30px; left: -15px; line-height: 1; z-index: -1; }
.c-player { display: flex; align-items: center; gap: 15px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; }
.c-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 1px solid var(--color-red); }
.c-info { display: flex; flex-direction: column; }
.c-name { font-weight: 900; font-size: 1.05rem; color: #fff; }
.c-dest { font-size: 0.8rem; color: var(--color-red); font-weight: 900; margin-top: 2px; }

/* TOP TEAM Section */
.top-section { position: relative; width: 100%; padding: 160px 20px; background: linear-gradient(rgba(17, 34, 56, 0.9), rgba(17, 34, 56, 0.9)), url('/wp-content/themes/kohnan-fc-theme/assets/images/syakaijin.png') center/cover fixed; clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%); margin-top: -5vw; margin-bottom: -5vw; text-align: center; color: #fff; }
.top-inner { position: relative; z-index: 2; }
.top-en { font-family: var(--font-en); font-size: clamp(3rem, 6vw, 5rem); font-weight: 900; opacity: 0.1; display: block; line-height: 1; }
.top-jp { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; margin-bottom: 30px; margin-top: -20px; }
.top-desc { font-size: 1.1rem; font-weight: 700; line-height: 1.8; margin-bottom: 40px; color: rgba(255,255,255,0.8); }
.top-tags { display: flex; justify-content: center; gap: 20px; margin-bottom: 40px; flex-wrap: wrap; }
.top-tag { border: 2px solid var(--color-red); padding: 12px 30px; font-weight: 900; font-size: 1.1rem; }

/* ANNUAL FEES Section */
.fees-section { background: var(--color-bg-light); padding-top: 150px; }
.fees-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; max-width: 1000px; margin: 0 auto; }
.fee-card { border: 1px solid #eee; padding: 40px 30px; text-align: center; border-top: 4px solid var(--color-navy); background: #fff; }
.fee-icon { color: var(--color-navy); margin-bottom: 20px; }
.fee-icon .material-icons-outlined { font-size: 3rem; }
.fee-title { font-size: 1.2rem; font-weight: 900; color: var(--color-navy); margin-bottom: 10px; }
.fee-price { font-family: var(--font-en); font-size: 2.5rem; font-weight: 900; color: var(--color-red); line-height: 1; margin-bottom: 10px; }
.fee-price small { font-size: 1rem; font-family: var(--font-jp); }
.fee-desc { font-size: 0.9rem; color: #666; font-weight: 700; }
.fees-note-wrap { max-width: 900px; margin: 60px auto 0; border-left: 5px solid var(--color-red); padding: 0 0 0 30px; }
.fees-note-title { font-weight: 900; color: var(--color-navy); margin-bottom: 20px; font-size: 1.1rem; }
.fees-note-list { list-style: none; }
.fees-note-list li { font-size: 0.95rem; font-weight: 700; color: #555; margin-bottom: 15px; padding-left: 20px; position: relative; }
.fees-note-list li::before { content: '/'; position: absolute; left: 0; color: var(--color-red); font-family: var(--font-en); font-weight: 900; }

/* ACCESS Section */
.access-section { padding-top: 60px; background: var(--color-bg-light); }
.map-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; max-width: 1000px; margin: 0 auto; }
.map-card { background: #fff; padding: 20px; border: 1px solid #eee; border-radius: 8px; }
.map-iframe { width: 100%; height: 200px; background: #f0f0f0; margin-bottom: 15px; }
.map-title { font-weight: 900; color: var(--color-navy); font-size: 1.05rem; margin-bottom: 5px; display: flex; align-items: center; gap: 5px; }
.map-addr { font-size: 0.85rem; color: #666; font-weight: 700; }

/* Responsive Adjustments */
@media (max-width: 768px) {
  .c-course-row { flex-direction: column; }
  .c-course-media { height: 200px; }
  .clean-table th, .clean-table td { display: block; width: 100%; padding: 10px 0; }
  .clean-table th { padding-bottom: 0; border-bottom: none; }
  .clean-table td { padding-top: 5px; border-bottom: 1px solid rgba(17,34,56,0.1); }
  .u15-layout { flex-direction: column; }
  .solid-spec-table th, .solid-spec-table td { display: block; width: 100%; padding: 10px 0; }
  .solid-spec-table th { padding-bottom: 0; border-bottom: none; }
  .top-section { clip-path: polygon(0 8vw, 100% 0, 100% calc(100% - 8vw), 0 100%); margin-top: -8vw; margin-bottom: -8vw; }
}