/*
Theme Name: BMK美健協会
Theme URI: https://bmkbiken.or.jp/
Description: 一般社団法人日本ＢＭＫ美健協会サイト用の子テーマ。共有親テーマ Devotion Base（minimal-base）の骨格の上に、トップページのデザインを載せる。
Author: Devotion Co
Template: minimal-base
Version: 1.0.0
Text Domain: bmk
*/

/* =========================================================================
   トップページ
   親テーマの記事カード（中央 1256px・白背景・内側余白）を、このページだけ
   全面レイアウトに開放する。他のページには影響しない。
   ========================================================================= */
body.home #content, body.bmk-sub #content { margin-top: 0; }
body.home .wrap, body.bmk-sub .wrap { width: 100%; max-width: none; margin: 0; }
body.home .content-in, body.bmk-sub .content-in { display: block; }
body.home #main.main,
body.home main.main,
body.bmk-sub #main.main,
body.bmk-sub main.main {
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

/* デザイン側の地の設定（元の bmk-top.html と同じ値） */
body.home,
body.bmk-sub {
	margin: 0;
	background: #FBFAF6;
	color: #1F2A18;
	font-family: 'Noto Sans JP', "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	font-size: 17px;
	line-height: 1.9;
	letter-spacing: 0.02em;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
body.home a, body.bmk-sub a { color: #3C5A22; text-decoration: none; }
body.home a:hover, body.bmk-sub a:hover { color: #538B36; }
body.home img, body.bmk-sub img { max-width: 100%; height: auto; }

/* 親テーマ（Cocoon 由来）の overflow-wrap: break-word を、このページだけ元に戻す。
   デザインは折り返さない前提で組まれており、「3,000+名」のように枠を 1px だけ
   超える箇所が break-word だと 2 行に割れてレイアウトが崩れる。 */
.bmk-top, .bmk-top * { overflow-wrap: normal; }

/* 固定ヘッダー分を差し引いてアンカーに着地させる */
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
@media (min-width: 1100px) { html { scroll-padding-top: 140px; } } /* PC のヘッダーは 128px */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.bmk-top *, .bmk-top *::before, .bmk-top *::after {
		animation: none !important;
		transition: none !important;
	}
}

/* -------------------------------------------------------------------------
   レイアウトの出し分け

   元のデザインは JS（window.innerWidth）で DOM ごと切り替えていた。
   静的テーマでは同じ境界値のメディアクエリで出し分ける。
     ナビ         1100px 未満 … ハンバーガー
     ステージ図    820px 未満 … 縦並び
   ------------------------------------------------------------------------- */
@media (max-width: 1099px) { .bmk-hd--pc { display: none !important; } }
@media (min-width: 1100px) { .bmk-hd--sp { display: none !important; } }
@media (max-width: 819px)  { .bmk-only-pc-stage { display: none !important; } }
@media (min-width: 820px)  { .bmk-only-sp-stage { display: none !important; } }

/* モバイルのドロワー。DOM は展開状態で書き出しているので既定で閉じておく */
.bmk-hd--sp .bmk-drawer { display: none; }
.bmk-hd--sp.is-open .bmk-drawer { display: block; }
/* 379px 以下：協会名が 1 行に収まらずメニューボタンに重なるため、「一般社団法人」を上の段に分ける */
@media (max-width: 379px) {
	.bmk-hd--sp .bmk-hd__home { gap: 10px !important; }
	.bmk-hd--sp .bmk-hd__logo { width: 44px !important; height: 44px !important; }
	.bmk-hd--sp .bmk-hd__name { line-height: 1.15 !important; }
	.bmk-hd--sp .bmk-hd__corp { display: block; margin-bottom: 4px; font-size: 10.5px; letter-spacing: .14em; }
}

/* スクロール後のヘッダー（元は JS の state.scrolled）。
   インライン style を上書きするため !important が要る */
.bmk-hd.is-scrolled { background: rgba(251, 250, 246, 0.88) !important; }
.bmk-hd.is-scrolled { border-bottom-color: #D5D8CE !important; }

/* 親テーマの見出しリセット。デザイン側はインライン style で寸法を指定して
   いるので、ブラウザ既定と親テーマの指定だけを無効化する（:where は特異度に
   加算されないため、インライン style と個別指定には負ける） */
.bmk-top :where(h1, h2, h3, h4, h5, h6) {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	margin: 0;
	padding: 0;
}
.bmk-top :where(ul, ol) { margin: 0; padding: 0; }
.bmk-top :where(p) { margin: 0; }
.bmk-top :where(figure) { margin: 0; }

/* =========================================================================
   リンクの行き先（functions.php の bmk_routes）　2026-09-26
   ========================================================================= */
/* まだ作っていないページへのリンク。押せないことが分かるよう薄くする */
a[data-bmk-off] { opacity: .38; cursor: default; pointer-events: none; }

/* 別サイトへのリンクの目印 */
.bmk-ext {
	display: inline-block;
	width: .72em;
	height: .72em;
	margin-left: .3em;
	vertical-align: .02em;
	flex: 0 0 auto;
}
.bmk-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* =========================================================================
   下層ページ（page.php）
   ========================================================================= */
.bmk-page-hero {
	padding: clamp(40px, 5vw, 80px) clamp(20px, 3vw, 40px) clamp(32px, 4vw, 56px);
	border-bottom: 1px solid #D5D8CE;
}
.bmk-page-inner { max-width: 880px; margin: 0 auto; }
.bmk-crumb {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
	font-size: 13px;
	letter-spacing: .04em;
	color: #5B6655;
}
.bmk-crumb li + li::before { content: "›"; margin-right: 10px; color: #9AA391; }
.bmk-page-en {
	margin: 0 0 12px;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #3C5A22;
}
.bmk-top .bmk-page-title {
	font-family: 'Noto Serif JP', serif;
	font-weight: 600;
	font-size: clamp(28px, 3.2vw, 40px);
	line-height: 1.5;
	letter-spacing: .04em;
	color: #3C5A22;
}
.bmk-page-body { padding: clamp(40px, 5vw, 72px) clamp(20px, 3vw, 40px) clamp(80px, 9vw, 128px); }

/* 本文。親テーマとトップ用のリセットを受けるので、ここで組み直す */
.bmk-prose { font-size: 17px; line-height: 1.95; letter-spacing: .02em; color: #1F2A18; }
.bmk-prose p { margin: 0 0 1.4em; }
.bmk-prose h2 {
	margin: 2.6em 0 1em;
	padding-top: 1.1em;
	border-top: 1px solid #7BBE35;
	font-family: 'Noto Serif JP', serif;
	font-weight: 600;
	font-size: clamp(20px, 2vw, 23px);
	line-height: 1.6;
	letter-spacing: .04em;
	color: #3C5A22;
}
.bmk-prose h2:first-child { margin-top: 0; }
.bmk-prose ul, .bmk-prose ol { margin: 0 0 1.4em; padding-left: 1.5em; }
.bmk-prose li { margin: 0 0 .4em; }
.bmk-prose a { text-decoration: underline; text-underline-offset: .2em; }
.bmk-prose .bmk-note {
	margin: 0 0 2.4em;
	padding: 14px 18px;
	border-left: 3px solid #BF993D;
	background: #F3F1E8;
	font-size: 15px;
}
.bmk-prose .bmk-contact-tel {
	padding: 18px 22px;
	border: 1px solid #D5D8CE;
	border-radius: 4px;
	background: #fff;
}
/* 電話番号は途中で折り返さない（スマホで「03-6265-／9435」と割れていた） */
.bmk-prose .bmk-contact-tel a[href^="tel:"] { white-space: nowrap; }
.bmk-prose .bmk-contact-tel__hours { white-space: nowrap; }

/* =========================================================================
   お問い合わせフォーム（Contact Form 7）
   ========================================================================= */
.bmk-form { margin-top: 2.4em; }
.bmk-form-row { margin: 0 0 28px; }
fieldset.bmk-form-row { min-width: 0; padding: 0; border: 0; }
legend.bmk-form-label { padding: 0; }
.bmk-form-row > label,
.bmk-form-label { display: block; margin: 0 0 10px; font-size: 16px; font-weight: 500; }
.bmk-form-row > label > .wpcf7-form-control-wrap { display: block; margin-top: 10px; }
.bmk-req, .bmk-opt {
	display: inline-block;
	margin-left: 10px;
	padding: 1px 8px;
	border-radius: 2px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: .06em;
	vertical-align: .1em;
}
.bmk-req { background: #3C5A22; color: #FBFAF6; }
.bmk-opt { border: 1px solid #9AA391; color: #5B6655; }
.bmk-form-note { display: block; margin-top: 4px; font-size: 14px; font-weight: 400; color: #5B6655; }
.bmk-prose .wpcf7 input[type="text"],
.bmk-prose .wpcf7 input[type="email"],
.bmk-prose .wpcf7 input[type="tel"],
.bmk-prose .wpcf7 textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid #BFC6B4;
	border-radius: 3px;
	background: #fff;
	font: inherit;
	font-size: 16px; /* 16px 未満だと iPhone で入力時に画面が拡大される */
	line-height: 1.7;
	color: #1F2A18;
}
/* 親テーマが textarea に min-height: 160px を付けているので外す（行数は項目ごとに x3 / x8 で決める） */
.bmk-prose .wpcf7 textarea { min-height: 0; resize: vertical; }
.bmk-prose .wpcf7 input:focus,
.bmk-prose .wpcf7 textarea:focus { outline: 2px solid #7BBE35; outline-offset: 1px; border-color: #538B36; }
.bmk-prose .wpcf7-radio { display: grid; gap: 10px; }
.bmk-prose .wpcf7-list-item { display: block; margin: 0; }
.bmk-prose .wpcf7-list-item label { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.bmk-prose .wpcf7 input[type="radio"],
.bmk-prose .wpcf7 input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: #3C5A22; }
.bmk-form-agree { padding: 18px 20px; border: 1px solid #D5D8CE; border-radius: 4px; background: #fff; }
.bmk-form-submit { margin-top: 36px; text-align: center; }
.bmk-prose .wpcf7 input[type="submit"] {
	min-width: 240px;
	height: 56px;
	padding: 0 48px;
	border: 0;
	border-radius: 3px;
	background: #3C5A22;
	color: #FBFAF6;
	font: inherit;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: .12em;
	cursor: pointer;
}
.bmk-prose .wpcf7 input[type="submit"]:hover { background: #538B36; }
.bmk-prose .wpcf7 input[type="submit"]:disabled { opacity: .45; cursor: default; }
.bmk-prose .wpcf7-not-valid-tip { display: block; margin-top: 6px; font-size: 14px; color: #B3261E; }
.bmk-prose .wpcf7 form .wpcf7-response-output { margin: 28px 0 0; padding: 14px 18px; border-radius: 4px; font-size: 15px; }
.bmk-prose .wpcf7-spinner { display: block; margin: 12px auto 0; }

/* 押せる範囲を見た目を変えずに広げる（2026-09-26）。隣と重ならない高さにしている：
   パンくず 36px（折り返したときの行の間隔が約 31px）／フッターのリンク 40px（縦の間隔 42px）／記事のカテゴリー札 44px */
.bmk-crumb a[href], footer#seminar a[href], a.bmk-chip--link { position: relative; }
.bmk-crumb a[href]::after, footer#seminar a[href]::after, a.bmk-chip--link::after {
	content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 36px; transform: translateY(-50%);
}
footer#seminar a[href]::after { height: 40px; }
a.bmk-chip--link::after { height: 44px; }