/* public/assets/css/style.css */
/* ============================================
   FutureJuku Blue-Yellow Theme
   main: #1b48a3 / sub: #fcf000
   ============================================ */

:root{
  --bg:#fff;
  --fg:#222;
  --brand:#1b48a3;       /* メインブルー */
  --brand-light:#2a63d0; /* ホバー用の明るい青 */
  --accent:#fcf000;      /* サブ（イエロー） */
  --muted:#666;
}

/* 基本・ユーティリティ */
*{box-sizing:border-box}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans JP",sans-serif;
  color:var(--fg);
  background:var(--bg);
  line-height:1.6;
}
.container{max-width:1100px;margin:0 auto;padding:24px}
.center{text-align:center}
.mt-16{margin-top:16px}
.small{font-size:13px}
.muted{color:var(--muted)}
a{ color: var(--brand); text-decoration:none }
a:hover{ color: var(--brand-light); }
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:3px solid var(--accent); outline-offset:2px;
}

/* ===== ヘッダー ===== */
.site-header{
  border-bottom:2px solid var(--brand);
  position:sticky; top:0; z-index:100;
  background:#fff;
}
.site-header .flex{display:flex;align-items:center;justify-content:space-between}
.logo{
  font-weight:700; text-decoration:none;
  color:var(--brand); font-size:20px;
}
.nav a{
  margin-left:16px; text-decoration:none; color:var(--fg);
  transition:color .2s;
}
.nav a:hover{color:var(--brand)}

/* 現在地強調（/blog も含む） */
.nav a.is-active,
.nav a[aria-current="page"],
.nav a[href^="/blog"].is-active {
  color: var(--brand);
  position: relative;
}
.nav a.is-active::after,
.nav a[aria-current="page"]::after,
.nav a[href^="/blog"].is-active::after {
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  border-radius:999px;
}

/* ===== ボタン ===== */
.btn{
  display:inline-block; padding:10px 18px; border-radius:999px;
  background:var(--brand); color:#fff; text-decoration:none; font-weight:600;
  transition:background .2s,color .2s,transform .1s, box-shadow .2s;
}
.btn:hover{background:var(--brand-light); transform:translateY(-2px)}
.btn--ghost{background:transparent; border:2px solid var(--brand); color:var(--brand)}
.btn--ghost:hover{background:var(--brand); color:#fff}
.btn--primary{background:var(--brand); color:#fff}
.btn--primary:hover{background:var(--brand-light)}
.btn--accent{background:var(--accent); color:#000}             /* 目立たせたいCTA */
.btn--accent:hover{filter:brightness(.95)}
.btn--lg{padding:14px 22px; font-size:18px}

/* ===== 汎用グリッド／カード ===== */
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid2{display:grid;gap:16px;grid-template-columns:1fr}
.grid3{display:grid;gap:16px;grid-template-columns:1fr}
.card{
  border:1px solid #e0e6f2; padding:16px; border-radius:12px; background:#fff;
  box-shadow:0 0 0 rgba(0,0,0,0);
}

/* ===== フッター ===== */
.site-footer{border-top:2px solid var(--brand); margin-top:40px; background:#f8faff}
.site-footer p{margin:0; padding:16px 0; text-align:center; color:var(--brand); font-weight:500}

/* ===== パンくず・通知・フォーム ===== */
.breadcrumbs ol{list-style:none;padding:0;margin:8px 0;display:flex;gap:8px;font-size:14px;color:var(--muted)}
.post-list{padding-left:18px}
.notice{padding:10px 12px;border-radius:8px;margin:6px 0}
.notice.success{background:#e6ffed}
.notice.error{background:#ffe6e6}
.form label{display:block;margin-bottom:12px}
.form input,.form textarea{width:100%;padding:10px;border:1px solid #ddd;border-radius:8px}

/* ===== Home（LP） ===== */
.eyebrow{font-size:12px;letter-spacing:.08em;color:var(--brand);margin:0 0 8px}
.section-title{
  font-size:28px; margin:0 0 16px; color:var(--brand);
  border-left:6px solid var(--accent); padding-left:10px;
}
.hero{padding:48px 0}
.hero--primary{
  /* ブルー系の淡グラデーション */
  background:linear-gradient(180deg,#f0f4ff,transparent);
}
.hero__inner{display:grid;gap:24px;grid-template-columns:1fr}
.hero__title{font-size:36px;margin:0 0 8px}
.hero__lead{font-size:16px;color:#444;margin:0 0 16px}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap}

/* LP要素 */
.card--plan .price{font-weight:700;font-size:18px;margin:6px 0 8px}
.bullets{margin:8px 0 0 18px}
.bullets li{margin:6px 0}
.img-frame{
  position:relative;border:2px dashed #cfe0ff;border-radius:12px;
  background:#f6f9ff; display:flex; align-items:center; justify-content:center; overflow:hidden
}
.img-frame__label{color:#7aa0ff;font-size:13px}
.aspect-16-9{aspect-ratio:16/9}
.aspect-4-3{aspect-ratio:4/3}
.address{font-style:normal;line-height:1.8}
.accordion details{border:1px solid #e0e6f2;border-radius:10px;padding:10px 12px;background:#fff}
.accordion details+details{margin-top:10px}
.accordion summary{cursor:pointer;font-weight:600}
.cta{padding:40px 0;background:linear-gradient(180deg,#f8faff,transparent);text-align:center}
.cta__title{font-size:24px;margin:0 0 8px;color:var(--brand)}

/* ===== Google Map（埋め込み） ===== */
.map-frame{border-radius:12px; overflow:hidden; background:#f8fdff; border:1px solid #e6f2fb}
.map-frame iframe{width:100%; height:100%; border:0; display:block}

/* 横いっぱいマップ */
html, body { overflow-x: hidden; } /* 100vwのはみ出し対策 */
.map-full{
  width:100vw; margin-left:50%; transform:translateX(-50%);
  background:#f8fdff;
}
.map-full .map-frame{
  width:100%; max-width:none; aspect-ratio:16/9;
  border-radius:0; border:none;
}
@media (min-width:768px){
  .map-full .map-frame{aspect-ratio:16/7} /* PCでは少し低め */
}

/* ===== Blog cards（WP一覧） ===== */
.posts-grid{display:grid;gap:16px;grid-template-columns:1fr}
.post-card{
  border:1px solid #e0e6f2; border-radius:12px; overflow:hidden; background:#fff;
  transition:transform .12s ease, box-shadow .12s ease;
}
.post-card__link{display:block; color:inherit; text-decoration:none}
.post-card__thumb img{display:block; width:100%; height:auto}
.post-card__title{font-size:18px; line-height:1.4; padding:12px 14px; color:var(--brand); font-weight:600}
.post-card:hover{transform:translateY(-2px); box-shadow:0 6px 20px rgba(27,72,163,.15)}
@media (min-width:768px){
  .posts-grid{grid-template-columns:repeat(3,1fr)}
}

/* ===== Instagram ボタン ===== */
.insta-block{padding:32px 0}
.insta-btn{
  display:inline-flex; align-items:center; gap:10px;
  border:2px solid var(--accent); color:var(--brand); background:#fff;
  padding:10px 16px; border-radius:999px; text-decoration:none; font-weight:600;
  transition:all .2s;
}
.insta-btn:hover{background:var(--accent); color:#000; transform:translateY(-2px)}

/* ===== レスポンシブ強化 ===== */
@media (min-width:768px){
  .hero__inner{grid-template-columns:1.1fr .9fr;align-items:center}
  .hero__title{font-size:44px}
  .grid2{grid-template-columns:1fr 1fr}
  .grid3{grid-template-columns:repeat(3,1fr)}
  .section-title{font-size:32px}
}
@media (min-width:1100px){
  .hero{padding:72px 0}
  .hero__title{font-size:52px}
}

/* ===== about page ===== */
.about-hero{background:linear-gradient(180deg,#f0f4ff,transparent);padding:60px 0 40px}
.about-hero .lead{font-size:18px;color:var(--brand);margin:8px 0 16px}
.about-section{padding:60px 0}
.about-section.bg-alt{background:#f8faff}
.about-section.bg-accent{background:linear-gradient(180deg,#fcf00033,transparent)}
.about-grid h3{margin-top:16px;color:var(--brand)}
.about-grid p{margin-bottom:10px}
.about-section .card h3{color:var(--brand)}

/* ===== Gutenberg / WP 共通UIのブランド統一 ===== */
.wp-block-button__link{
  background:var(--brand); color:#fff; border-radius:999px; padding:.6em 1.2em;
}
.wp-block-button__link:hover{ background:var(--brand-light); }
.wp-block-quote, blockquote{
  border-left:4px solid var(--brand); padding-left:14px; color:#333; background:#f8faff;
}
.entry-content{ line-height:1.9; }
.entry-content h2{ color:var(--brand); margin:1.4em 0 .6em; font-size:22px; }
.entry-content h3{ color:var(--brand); margin:1.0em 0 .4em; font-size:18px; }
.entry-content a{ color:var(--brand); text-decoration:underline; }
.entry-content a:hover{ text-decoration:none; }
.entry-content img{ max-width:100%; height:auto; border-radius:8px; }

/* ページネーション（WP） */
.page-numbers{
  display:inline-block; min-width:36px; text-align:center; margin:0 4px; padding:8px 10px;
  border:1px solid #e0e6f2; border-radius:8px; text-decoration:none; color:var(--fg);
}
.page-numbers.current, .page-numbers:hover{
  background:var(--brand); border-color:var(--brand); color:#fff;
}

/* カテゴリ／タグのバッジ */
.post-terms a{
  display:inline-block; margin:0 8px 8px 0; padding:4px 10px; border-radius:999px;
  border:1px solid var(--brand); color:var(--brand); text-decoration:none; font-size:12px;
}
.post-terms a:hover{ background:var(--brand); color:#fff; }

/* Timeline */
.timeline{ list-style:none; margin:0; padding:0; position:relative }
.timeline::before{ content:""; position:absolute; left:16px; top:0; bottom:0; width:3px; background:#e0e6f2; border-radius:2px }
.timeline li{ position:relative; padding-left:56px; margin:18px 0 }
.timeline .tl-year{
  position:absolute; left:0; top:0; width:44px; height:44px;
  border-radius:999px; background:var(--brand); color:#fff; font-weight:700;
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(27,72,163,.25)
}
.timeline .tl-card{ border:1px solid #e0e6f2; border-radius:12px; background:#fff; padding:14px 16px }

/* Price table */
.price-table-wrap{ overflow:auto }
.price-table{ width:100%; border-collapse:collapse; border:1px solid #e0e6f2; border-radius:12px; overflow:hidden }
.price-table th, .price-table td{ border:1px solid #e0e6f2; padding:12px; }
.price-table thead th{ background:#f8faff; color:var(--brand); text-align:left }

/* ==== Responsive Nav (主要＋その他＋ハンバーガー) ==== */
.nav-wrap{display:flex;align-items:center;gap:16px}
.nav__primary{display:flex;align-items:center;gap:12px;flex-wrap:nowrap}
.nav__link{padding:10px 8px;position:relative}
.nav__cta{margin-left:8px}

/* その他ドロップダウン */
.nav__more{position:relative}
.nav__more-btn{
  background:transparent;border:0;cursor:pointer;padding:10px 8px;font:inherit;color:var(--fg);
}
.nav__more-btn:hover{color:var(--brand)}
.nav__more-menu{
  position:absolute; right:0; top:100%; min-width:200px; background:#fff; border:1px solid #e0e6f2;
  border-radius:12px; padding:6px; box-shadow:0 10px 20px rgba(0,0,0,.08); display:none; z-index:50;
}
.nav__more.open .nav__more-menu{display:block}
.nav__more-menu .nav__link{display:block; padding:10px 12px; border-radius:8px}
.nav__more-menu .nav__link:hover{background:#f8faff}

/* ハンバーガー */
.nav__toggle{display:none; background:transparent;border:0;cursor:pointer}
.nav__bar{display:block;width:24px;height:2px;background:var(--fg);margin:5px 0;border-radius:2px}

/* 中幅（PCでも狭めの時）は「その他」に多くを格納 */
@media (max-width: 1100px){
  .nav__primary > a:nth-child(n+3){ display:none; } /* 3つ目以降を隠す（about, courses だけ残す） */
}
/* さらに狭い時は blog も格納（about / courses / CTA だけ見せる） */
@media (max-width: 960px){
  .nav__primary > a:nth-child(n+2){ display:none; }
}

/* モバイルはハンバーガー */
@media (max-width: 840px){
  .nav__toggle{display:block}
  .nav-wrap{position:fixed; inset:64px 0 0 0; background:#fff; display:none; flex-direction:column; padding:16px; gap:12px; overflow:auto}
  .nav-wrap.open{display:flex}
  .nav__primary{flex-direction:column; align-items:flex-start}
  .nav__primary > a{display:block !important}
  .nav__more{width:100%}
  .nav__more-menu{position:static; display:block; box-shadow:none; border:none; padding:0}
  .nav__cta{align-self:stretch}
}

/* ===== Home: Photos & CTAs ===== */
.hero__mini-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.hero__media .hero__thumbs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}

.gallery__grid{display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media (min-width:768px){ .gallery__grid{grid-template-columns:repeat(3,1fr)} }

.strip{padding:24px 0;background:linear-gradient(180deg,#f8faff,transparent)}
.strip__inner{display:grid;gap:12px}
@media (min-width:768px){ .strip__inner{grid-template-columns:1fr 1fr} }

/* Sticky bottom CTA (PC) */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:-80px;z-index:80;transition:bottom .25s ease;
  background:#ffffffcc; backdrop-filter: blur(6px); border-top:1px solid #e0e6f2;
}
.sticky-cta.show{bottom:0}
.sticky-cta__inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0}

/* Floating CTA (mobile) */
.float-cta{
  position:fixed;right:16px;bottom:16px;z-index:85;display:none;
  background:var(--brand); color:#fff; border-radius:999px; padding:12px 16px; font-weight:700;
  box-shadow:0 8px 18px rgba(27,72,163,.28);
}
.float-cta:hover{background:var(--brand-light)}
@media (max-width: 840px){ .sticky-cta{display:none} .float-cta{display:inline-block} }

/* Map badge */
.map-embed{ position:relative }
.map-embed iframe{ width:100%; height:100%; min-height:320px; display:block; border:0 }
.map-badge{
  position:absolute; right:12px; top:12px;
  background:#ffffffee; backdrop-filter:blur(4px);
  border:1px solid #e0e6f2; border-radius:10px; padding:8px 12px;
  display:flex; align-items:center; gap:10px; font-size:14px;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
}
.map-badge strong{ color:var(--brand) }
.map-badge a{ color:var(--brand); text-decoration:underline }
.map-badge a:hover{ color:var(--brand-light); text-decoration:none }