/*
Theme Name: 英才学考パズルクラブ
Author: ら・プラス株式会社
Description: 英才学考パズルクラブ（本サイト・BVT・教材ショップ）のクラシックテーマ。デザインは Round3（design/round3/index.html）。
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pzl-club
*/

/* ==========================================================================
   全ページ共通の見た目。
   トップページだけの部品（大きい写真・入口・三本の柱など）は assets/css/front.css。
   色を変えたい時は、まず下の :root の変数をいじるのが早い。
   ========================================================================== */

:root {
	--ink: #2b2a28;         /* 文字色 */
	--sub: #62605a;         /* 補助の文字色 */
	--indigo: #25346b;      /* メインの紺 */
	--indigo-dark: #1a2550;
	--rose: #b83f62;        /* 体験・お問い合わせのボタン */
	--rose-dark: #9a3150;
	--paper: #faf7f0;       /* 生成りの背景 */
	--paper-2: #f2ede1;
	--wood: #5a3d2b;
	--line: #e2dccd;        /* 罫線 */
	--c-num: #2f56b5;       /* 数 */
	--c-shape: #b4521f;     /* 図形 */
	--c-think: #22773e;     /* 思考力 */
	--c-word: #8c46a6;      /* 言葉 */
	--serif: "Noto Serif JP", serif;
	--sans: "Noto Sans JP", system-ui, sans-serif;
	--w: 1120px;            /* 中身の最大幅 */
}

/* --- リセット --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); color: var(--ink); background: #fff; font-size: 16px; line-height: 1.85; letter-spacing: .03em; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.inner { width: 100%; max-width: var(--w); margin: 0 auto; padding: 0 20px; }

/* 未確定の文言（オーナー確認待ち）。確定したら外す */
.kari { background: #fff3b0; color: #6b5200; font-size: .85em; padding: 0 .3em; border-radius: 2px; font-weight: 500; }

/* --- いちばん上の案内帯 --- */
.info-bar { background: var(--indigo); color: #fff; font-size: 14px; text-align: center; padding: 7px 16px; line-height: 1.6; }
.info-bar a { color: #fff; font-weight: 700; }

/* --- ヘッダー --- */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: #fff; border-bottom: 1px solid var(--line); }
.admin-bar .site-header { top: 32px; }
.header-row { display: flex; align-items: center; gap: 28px; padding: 10px 20px; max-width: 1280px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.brand img { width: 52px; }
.brand-name { font-family: var(--serif); font-weight: 700; font-size: 18px; color: var(--indigo-dark); letter-spacing: .06em; line-height: 1.35; }
.brand-name small { display: block; font-family: var(--sans); font-size: 12px; color: var(--sub); font-weight: 400; letter-spacing: .08em; }
.global-nav { flex: 1; }
.global-nav ul { list-style: none; display: flex; justify-content: flex-end; gap: 4px; }
.global-nav a { display: block; padding: 10px 12px; text-decoration: none; font-weight: 500; font-size: 15px; border-radius: 4px; white-space: nowrap; }
.global-nav a:hover { background: var(--paper); }
.global-nav .sub-menu { display: none; }
.header-line { flex: none; padding: 9px 20px; font-size: 15px; }
.menu-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--line); border-radius: 4px; width: 46px; height: 46px; cursor: pointer; }
.menu-toggle span { display: block; width: 20px; height: 2px; background: var(--indigo); margin: 4px auto; }

/* --- ボタン --- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font-weight: 700; border-radius: 999px; padding: 12px 26px; font-size: 16px; transition: background .2s, color .2s; line-height: 1.4; text-align: center; }
.btn-rose { background: var(--rose); color: #fff; }
.btn-rose:hover { background: var(--rose-dark); }
.btn-line { background: #fff; color: var(--indigo-dark); border: 2px solid var(--indigo); }
.btn-line:hover { background: var(--indigo); color: #fff; }
.arrow::after { content: "\2192"; font-weight: 400; }

/* --- セクションの共通 --- */
.section { padding: 96px 0; }
.section-paper { background: var(--paper); }
.head { margin-bottom: 48px; }
.head.center { text-align: center; }
.pieces { display: inline-flex; gap: 4px; margin-bottom: 14px; }
.pieces i { width: 14px; height: 14px; display: block; }
.pieces i:nth-child(1) { background: var(--c-num); clip-path: polygon(0 100%, 100% 100%, 0 0); }
.pieces i:nth-child(2) { background: var(--c-shape); }
.pieces i:nth-child(3) { background: var(--c-think); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.pieces i:nth-child(4) { background: var(--c-word); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.head h2 { font-family: var(--serif); font-size: 32px; font-weight: 700; color: var(--indigo-dark); letter-spacing: .06em; line-height: 1.5; }
.head p { margin-top: 14px; color: var(--sub); }
.head .rule { display: block; height: 3px; width: 0; background: var(--rose); margin-top: 18px; transition: width 1s ease .2s; }
.head.center .rule { margin-left: auto; margin-right: auto; }
.head.is-in .rule { width: 64px; }
.kicker { font-size: 14px; font-weight: 700; letter-spacing: .16em; color: var(--sub); margin-bottom: 4px; }
.sr-only,
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- 教室案内の表・授業カレンダー（トップと BVT で使う） --- */
.access-table { width: 100%; border-collapse: collapse; }
.access-table th,
.access-table td { border-bottom: 1px solid var(--line); padding: 15px 8px; text-align: left; vertical-align: top; font-size: 15px; }
.access-table th { width: 30%; color: var(--indigo-dark); }
.calendar-box { background: #fff; border-radius: 4px; overflow: hidden; }
.calendar-box iframe { display: block; width: 100%; height: 360px; border: 0; }
.map-embed { background: var(--paper); }
.map-embed iframe { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; }

/* --- 体験・ご相談（全ページの下） --- */
.contact { background: var(--indigo-dark); color: #fff; padding: 80px 0; position: relative; overflow: hidden; }
.contact h2 { font-family: var(--serif); font-size: 30px; letter-spacing: .06em; text-align: center; }
.contact > .inner > p { text-align: center; margin-top: 10px; color: #dfe4f3; }
.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 640px; margin: 36px auto 0; }
.contact-item { background: #fff; color: var(--ink); padding: 22px 16px; text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 4px; border-radius: 6px; }
.contact-item span { font-size: 14px; color: var(--sub); }
.contact-item strong { font-size: 19px; color: var(--indigo-dark); }
.contact-item.main { background: var(--rose); }
.contact-item.main span,
.contact-item.main strong { color: #fff; }

/* --- フッター --- */
.site-footer { background: #141c3a; color: #d9deec; padding: 52px 0 28px; font-size: 15px; }
/* PC は横4列。幅が狭くなると 2列 → 1列（スマホ）に組み替える */
.site-footer .inner { max-width: 1320px; }
.footer-grid { display: grid; grid-template-columns: 1.15fr .8fr .8fr 1fr; grid-template-areas: "info main sub cal"; gap: 36px; align-items: start; }
.footer-info { grid-area: info; }
.footer-links-main { grid-area: main; }
.footer-links-sub { grid-area: sub; }
.footer-calendar { grid-area: cal; }
.footer-brand { display: inline-flex; }
.footer-calendar .calendar-box iframe { height: 300px; }
.footer-link-group h3 { font-size: 15px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 2px solid var(--rose); display: inline-block; }
.site-footer .footer-link-group a { color: #fff; font-size: 16px; font-weight: 500; display: inline-block; padding: 2px 0 2px 16px; position: relative; }
.site-footer .footer-link-group a::before { content: ""; position: absolute; left: 2px; top: 50%; width: 6px; height: 6px; border-top: 2px solid var(--rose); border-right: 2px solid var(--rose); transform: translateY(-50%) rotate(45deg); }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; border-top: 1px solid #2b3559; margin-top: 36px; padding-top: 18px; font-size: 13px; }
.footer-legal + .copyright { border-top: 0; margin-top: 8px; padding-top: 0; }
.site-footer .brand-name { color: #fff; }
.site-footer .brand-name small { color: #aeb7cf; }
.footer-address { margin-top: 12px; line-height: 1.6; font-size: 14px; }
.footer-address + .footer-address { margin-top: 10px; }
.site-footer .footer-map-link { font-size: 12px; border: 1px solid #5b6587; border-radius: 3px; padding: 0 6px; margin-left: 4px; white-space: nowrap; }
.footer-insurance { font-size: 13px; color: #8f98b5; }
.site-footer h3 { font-size: 14px; color: #fff; margin-bottom: 10px; letter-spacing: .1em; }
.site-footer ul { list-style: none; }
.site-footer li { padding: 3px 0; }
.site-footer a { text-decoration: none; color: #d9deec; }
.site-footer a:hover { text-decoration: underline; }
.copyright { border-top: 1px solid #2b3559; margin-top: 36px; padding-top: 18px; text-align: center; font-size: 13px; color: #aeb7cf; }

/* --- 右下の体験ボタン（PC）／下の帯（スマホ） --- */
.float-cta { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 112px; height: 112px; border-radius: 50%; background: var(--rose); color: #fff; text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-weight: 700; font-size: 15px; line-height: 1.4; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); transition: transform .2s, opacity .3s; }
.float-cta small { font-size: 12px; font-weight: 500; }
.float-cta:hover { transform: scale(1.05); }
.sp-bar { display: none; }

/* --- 下層ページの上の帯（アイキャッチ画像を入れるとバナーになる） --- */
.page-hero { position: relative; background: var(--paper); border-bottom: 1px solid var(--line); overflow: hidden; }
.page-hero .inner { position: relative; z-index: 1; padding-top: 56px; padding-bottom: 52px; }
.page-hero .pieces { margin-bottom: 10px; }
.page-hero h1 { font-family: var(--serif); font-size: 34px; font-weight: 700; color: var(--indigo-dark); letter-spacing: .06em; line-height: 1.5; }
.page-hero .kicker { margin-bottom: 6px; }
.page-hero.has-banner { background: #1a2550; border-bottom: 0; }
.page-hero.has-banner .page-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.page-hero.has-banner .inner { padding-top: 96px; padding-bottom: 88px; }
.page-hero.has-banner h1,
.page-hero.has-banner .kicker { color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
.breadcrumb { font-size: 13px; color: var(--sub); margin-top: 14px; }
.breadcrumb a { color: var(--sub); }
.page-hero.has-banner .breadcrumb,
.page-hero.has-banner .breadcrumb a { color: #e6e9f3; }

/* --- 下層ページ（固定ページ・投稿） --- */
.site-main { width: 100%; max-width: 760px; margin: 0 auto; padding: 64px 20px 96px; }
.site-main.is-page { max-width: 920px; }
.entry + .entry { margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--line); }
.entry-title { font-family: var(--serif); font-size: 30px; color: var(--indigo-dark); line-height: 1.5; margin-bottom: 12px; }
.entry-title a { color: inherit; text-decoration: none; }
.entry-meta { color: var(--sub); font-size: 14px; margin-bottom: 24px; }
.entry-thumbnail { margin-bottom: 28px; }
.entry-content > * + * { margin-top: 1.1em; }
.entry-content h2 { font-family: var(--serif); font-size: 24px; color: var(--indigo-dark); margin-top: 2em; padding-bottom: 8px; border-bottom: 2px solid var(--line); }
.entry-content h3 { font-family: var(--serif); font-size: 20px; color: var(--indigo-dark); margin-top: 1.6em; }
.entry-content ul,
.entry-content ol { padding-left: 1.5em; }
.entry-content a { color: var(--indigo); }
.entry-content h4,
.entry-content h5 { font-size: 17px; color: var(--indigo-dark); margin-top: 1.8em; padding-left: 12px; border-left: 4px solid var(--rose); line-height: 1.6; }
.entry-content strong { color: var(--indigo-dark); }

/* 表（ブロックエディタの「テーブル」） */
.entry-content .wp-block-table { margin-top: 1.4em; overflow-x: auto; }
.entry-content .wp-block-table table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); }
.entry-content .wp-block-table th,
.entry-content .wp-block-table td { border: 1px solid var(--line); padding: 14px 16px; text-align: left; vertical-align: top; font-size: 15px; }
.entry-content .wp-block-table tbody th,
.entry-content .wp-block-table td:first-child { background: var(--paper); color: var(--indigo-dark); font-weight: 700; width: 30%; }
.entry-content .wp-block-table thead th { background: var(--indigo); color: #fff; }
.entry-content .wp-block-table figcaption { font-size: 13px; color: var(--sub); margin-top: 6px; }

/* 開閉できる見出し（ブロックエディタの「詳細」） */
.entry-content .wp-block-details { border: 1px solid var(--line); background: #fff; }
.entry-content .wp-block-details + .wp-block-details { margin-top: -1px; }
.entry-content .wp-block-details summary { cursor: pointer; padding: 14px 44px 14px 18px; font-weight: 700; color: var(--indigo-dark); position: relative; list-style: none; }
.entry-content .wp-block-details summary::-webkit-details-marker { display: none; }
.entry-content .wp-block-details summary::after { content: "+"; position: absolute; right: 18px; top: 10px; font-size: 22px; color: var(--indigo); transition: transform .25s; }
.entry-content .wp-block-details[open] summary::after { transform: rotate(45deg); }
.entry-content .wp-block-details > *:not(summary) { margin: 0 18px 16px; }

/* 囲み・リード文 */
.entry-content .is-style-note,
.entry-content .pzl-note { background: var(--paper); border: 1px solid var(--line); padding: 18px 22px; font-size: 15px; }
.entry-content .pzl-lead { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--indigo-dark); line-height: 1.8; }

/* 教具の写真を並べる（グループに pzl-objects を付ける） */
/* クラシックテーマではグループの中に __inner-container が1枚挟まるので、そちらを並べる */
.entry-content .pzl-objects > .wp-block-group__inner-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.entry-content .pzl-objects > .wp-block-group__inner-container > * { margin: 0; }
.entry-content .pzl-objects .wp-block-image { background: #fff; border: 1px solid var(--line); }
.entry-content .pzl-objects img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.entry-content .pzl-objects figcaption { padding: 8px 10px; font-size: 14px; font-weight: 700; color: var(--indigo-dark); border-top: 1px solid var(--line); margin: 0; }

/* 項目名の小さい一覧（カリキュラムなど） */
.entry-content .pzl-tags { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.entry-content .pzl-tags li { background: var(--paper); border: 1px solid var(--line); padding: 2px 10px; font-size: 14px; border-radius: 2px; }

/* ボタン（ブロックエディタの「ボタン」） */
.entry-content .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.entry-content .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-weight: 700; border-radius: 999px; padding: 12px 26px; background: var(--rose); color: #fff; }
.entry-content .wp-block-button__link:hover { background: var(--rose-dark); }
.entry-content .is-style-outline .wp-block-button__link { background: #fff; color: var(--indigo-dark); border: 2px solid var(--indigo); }

/* お問い合わせフォーム（Contact Form 7） */
.wpcf7 { margin-top: 1.6em; }
.wpcf7 .pzl-form-row { margin-bottom: 22px; }
.wpcf7 .pzl-form-row > label,
.wpcf7 .pzl-form-row > .pzl-form-label { display: block; font-weight: 700; color: var(--indigo-dark); margin-bottom: 6px; }
.wpcf7 .req { display: inline-block; background: var(--rose); color: #fff; font-size: 11px; padding: 0 6px; margin-left: 8px; border-radius: 2px; vertical-align: 2px; }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid #cfc8b6; border-radius: 4px; background: #fff; }
.wpcf7 textarea { min-height: 180px; }
.wpcf7 .wpcf7-list-item { display: inline-block; margin: 0 18px 6px 0; }
.wpcf7 input[type="submit"] { font: inherit; font-weight: 700; border: 0; cursor: pointer; border-radius: 999px; padding: 14px 48px; background: var(--rose); color: #fff; }
.wpcf7 input[type="submit"]:hover { background: var(--rose-dark); }
.wpcf7-not-valid-tip { color: #b3261e; font-size: 14px; }
.pagination { margin-top: 48px; }
.pagination .page-numbers { display: inline-block; margin-right: 8px; padding: 4px 12px; border: 1px solid var(--line); text-decoration: none; }
.pagination .current { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.alignleft { float: left; margin: 0 24px 24px 0; }
.alignright { float: right; margin: 0 0 24px 24px; }
.aligncenter { display: block; margin-inline: auto; }

/* --- 動き（JS が動く時だけ。動きを減らす設定の人には出さない） --- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
.d1 { transition-delay: .12s !important; }
.d2 { transition-delay: .24s !important; }
.d3 { transition-delay: .36s !important; }
.d4 { transition-delay: .48s !important; }
@media (prefers-reduced-motion: reduce) {
	.js .reveal { opacity: 1; transform: none; transition: none; }
	.head .rule { transition: none; }
	.float-cta:hover { transform: none; transition: none; }
	html { scroll-behavior: auto; }
}

/* --- 幅が狭い時 --- */
@media (max-width: 1180px) {
	.global-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line); }
	.global-nav.is-open { display: block; }
	.global-nav ul { flex-direction: column; gap: 0; }
	.global-nav a { padding: 14px 20px; border-top: 1px solid var(--line); border-radius: 0; }
	.menu-toggle { display: block; }
	.header-line { display: none; }
	.header-row { position: relative; }
}
@media (max-width: 782px) {
	.admin-bar .site-header { top: 46px; }
}
@media (max-width: 600px) {
	.admin-bar .site-header { top: 0; }
}
/* 中くらいの幅（タブレットなど）は 2列：上に ロゴ・地図 と カレンダー、下に リンク2つ */
@media (max-width: 1180px) and (min-width: 861px) {
	.footer-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "info cal" "main sub"; }
}
@media (max-width: 860px) {
	.info-bar { font-size: 13px; }
	.brand img { width: 42px; }
	.brand-name { font-size: 16px; }
	.section { padding: 68px 0; }
	.head h2 { font-size: 25px; }
	.contact-grid { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "info info" "main sub" "cal cal"; gap: 28px 20px; }
	.site-footer .footer-link-group a { font-size: 15px; }
	.footer-calendar .calendar-box iframe { height: 360px; }
	.float-cta { display: none; }
	.sp-bar { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; box-shadow: 0 -2px 12px rgba(0, 0, 0, .12); padding-bottom: env(safe-area-inset-bottom, 0px); background: #fff; }
	.sp-bar a { padding: 14px 8px; text-align: center; font-weight: 700; text-decoration: none; font-size: 16px; }
	.sp-bar .sp-line { background: #fff; color: var(--indigo-dark); }
	.sp-bar .sp-contact { background: var(--rose); color: #fff; }
	body { padding-bottom: 56px; }
	.site-main { padding: 40px 20px 72px; }
	.entry-title { font-size: 24px; }
	.page-hero .inner { padding-top: 36px; padding-bottom: 32px; }
	.page-hero.has-banner .inner { padding-top: 64px; padding-bottom: 56px; }
	.page-hero h1 { font-size: 25px; }
	.entry-content .pzl-objects > .wp-block-group__inner-container { grid-template-columns: repeat(2, 1fr); }
	.entry-content .wp-block-table tbody th,
	.entry-content .wp-block-table td:first-child { width: 36%; }
}