/*
Theme Name: SKOG
Theme URI: https://skog-jp.com/
Author: SKOG Co.
Description: ＳＫＯＧ株式会社 公式サイト用ブロックテーマ。トークンは theme.json に1か所、事実は skog-core の投稿タイプに1か所。
Version: 2.7.1-alpha
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: skog
*/

/* 補助スタイルは最小限。色・書体・余白は theme.json のプリセット変数を使う。
   幅は 375px を基準に書き、広い画面で足していく（モバイル第一・オーナー指示 2026-09-11）。 */

:root {
	--skg-ink: var(--wp--preset--color--ink);
	--skg-blue: var(--wp--preset--color--blue);
	--skg-gray: var(--wp--preset--color--gray);
	--skg-rule: var(--wp--preset--color--rule);
	--skg-wash: var(--wp--preset--color--wash);
}

::selection { background: var(--wp--preset--color--yellow); color: var(--skg-ink); }

.skg-marker { background: linear-gradient(transparent 62%, var(--wp--preset--color--yellow) 62%); }
.skg-label { font-family: var(--wp--preset--font-family--en); font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--skg-blue); }
.skg-label a { color: inherit; display: inline-flex; align-items: center; min-height: 28px; }
.skg-rule { border-bottom: 1px solid var(--skg-ink); }
.skg-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ボタン ------------------------------------------------------------- */
.skg-btn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid currentColor; padding: 12px 28px; font-family: var(--wp--preset--font-family--en); font-size: 13px; letter-spacing: .2em; text-decoration: none; min-height: 44px; }
.skg-btn--reserve { background: var(--skg-blue); color: #fff; border-color: var(--skg-blue); }
.skg-btn--reserve:hover, .skg-btn--reserve:focus-visible { background: var(--skg-ink); border-color: var(--skg-ink); color: #fff; }
.wp-block-button__link { min-height: 44px; display: inline-flex; align-items: center; }

/* 本文中の横並びリンク（トップの事業カード・404） --------------------------- */
.skg-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.skg-links a { position: relative; min-height: 32px; display: inline-flex; align-items: center; border-bottom: 1px solid currentColor; }

/* 数字（NUMBERS） ------------------------------------------------------ */
.skg-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; margin: 24px 0; }
.skg-nums > div { border-top: 1px solid var(--skg-ink); padding-top: 10px; }
.skg-nums dt { font-family: var(--wp--preset--font-family--en); font-size: clamp(30px, 9vw, 44px); font-weight: 600; line-height: 1.05; letter-spacing: .01em; }
.skg-nums dd { margin: 6px 0 0; font-size: 12px; line-height: 1.6; color: var(--skg-gray); }
@media (min-width: 782px) { .skg-nums { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } }

/* 拠点NAP（フッター等）— 電話番号は出さない ------------------------------- */
.skg-nap { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 16px; }
.skg-nap li { font-size: 12.5px; line-height: 1.75; }
.skg-nap b { display: block; font-size: 13px; letter-spacing: .02em; }
.skg-nap span { display: block; color: var(--skg-gray); }
.skg-nap a { display: inline-flex; align-items: center; min-height: 30px; margin-top: 2px; border-bottom: 1px solid currentColor; }
@media (min-width: 782px) { .skg-nap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; } }

/* プログラム料金表 ------------------------------------------------------ */
.skg-prog { margin: 0 0 48px; }
.skg-prog__h { margin: 4px 0 16px; }
.skg-table { width: 100%; border-collapse: collapse; }
.skg-table th, .skg-table td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--skg-rule); font-size: 13.5px; line-height: 1.7; }
.skg-table thead th { border-bottom: 1px solid var(--skg-ink); font-size: 12px; letter-spacing: .08em; color: var(--skg-gray); white-space: nowrap; }
.skg-table .skg-td-name { min-width: 15em; }
.skg-note { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.65; color: var(--skg-gray); font-weight: 500; }
.skg-prog-cta { margin-top: 20px; }

/* 375px では表を積む（横スクロールを起こさない） */
@media (max-width: 781px) {
	.skg-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.skg-table--stack tr { display: block; border-bottom: 1px solid var(--skg-ink); padding: 14px 0; }
	.skg-table--stack td { display: block; border: 0; padding: 1px 0; font-size: 13px; }
	.skg-table--stack td[data-label]::before { content: attr(data-label); display: inline-block; min-width: 5.5em; color: var(--skg-gray); font-size: 11.5px; letter-spacing: .06em; }
	.skg-table--stack td.skg-td-name { min-width: 0; padding-bottom: 6px; font-size: 14.5px; }
	.skg-table--stack td.skg-td-name::before { content: none; }
	.skg-table--stack td.skg-td-name .skg-note::before { content: none; }
}

/* ブランド帯（page-brand） ---------------------------------------------- */
.skg-brandhead { display: flex; flex-direction: column; gap: 10px; }
.skg-brandhead__id { display: inline-flex; align-items: baseline; gap: 10px; text-decoration: none; color: inherit; min-height: 28px; }
.skg-brandhead__name { font-family: var(--wp--preset--font-family--en); font-size: 14px; font-weight: 600; letter-spacing: .06em; line-height: 1.3; }
.skg-secnav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 13px; }
.skg-secnav a { min-height: 32px; display: inline-flex; align-items: center; color: var(--skg-ink); border-bottom: 1px solid transparent; }
.skg-secnav a:hover, .skg-secnav a:focus-visible { border-bottom-color: var(--skg-ink); }
.skg-secnav a.is-current { border-bottom-color: var(--skg-ink); font-weight: 700; }
.skg-secnav__reserve { color: #fff !important; background: var(--skg-blue); padding: 6px 18px; letter-spacing: .1em; border-bottom: 0 !important; }
.skg-secnav__reserve:hover, .skg-secnav__reserve:focus-visible { background: var(--skg-ink); }
@media (min-width: 900px) { .skg-brandhead { flex-direction: row; align-items: flex-end; justify-content: space-between; } }

/* 拠点カード（本文中） ---------------------------------------------------- */
.skg-faclist { display: grid; gap: 24px; margin: 20px 0 0; }
.skg-faclist__item { border-top: 1px solid var(--skg-ink); padding-top: 12px; }
.skg-faclist__item h3 { font-family: var(--wp--preset--font-family--en); font-size: 19px; font-weight: 600; letter-spacing: .03em; margin: 4px 0 2px; }
.skg-faclist__ja { font-size: 12.5px; color: var(--skg-gray); margin: 0 0 6px; }
.skg-faclist__addr { font-size: 13px; margin: 0; }
.skg-faclist__train { font-size: 12px; color: var(--skg-gray); margin: 2px 0 6px; }
@media (min-width: 782px) { .skg-faclist { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }

/* 締めの導線 ------------------------------------------------------------- */
.skg-endcta__lead { font-size: 17px; line-height: 1.8; margin: 8px 0 20px; }
.skg-endcta__btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }

/* WORKS --------------------------------------------------------------- */
.skg-works__year { margin: 0 0 32px; }
.skg-works__y { font-family: var(--wp--preset--font-family--en); font-size: 22px; font-weight: 600; letter-spacing: .06em; border-bottom: 1px solid var(--skg-ink); padding-bottom: 6px; margin: 0 0 12px; }
.skg-works ul { list-style: none; margin: 0; padding: 0; }
.skg-works li { padding: 12px 0; border-bottom: 1px solid var(--skg-rule); }
.skg-works li > a { display: inline-block; min-height: 28px; font-size: 15px; line-height: 1.75; font-weight: 700; }
.skg-works__meta { display: block; margin-top: 3px; font-size: 12px; line-height: 1.65; color: var(--skg-gray); }

.skg-facts { display: grid; grid-template-columns: 6em 1fr; gap: 6px 12px; margin: 24px 0; font-size: 13.5px; border-top: 1px solid var(--skg-ink); padding-top: 16px; }
.skg-facts dt { color: var(--skg-gray); font-size: 12px; letter-spacing: .04em; }
.skg-facts dd { margin: 0; }

/* 記事末尾の会社紹介 ---------------------------------------------------- */
.skg-boiler { border-top: 1px solid var(--skg-ink); margin-top: 48px; padding-top: 20px; font-size: 13px; line-height: 1.85; }
.skg-boiler__links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; }
.skg-copy a { display: inline-block; padding: 6px 0; }
.skg-boiler__links a { min-height: 32px; display: inline-flex; align-items: center; border-bottom: 1px solid currentColor; }

/* 掲載終了バナー -------------------------------------------------------- */
.skg-ended-notice { background: var(--skg-wash); border-left: 3px solid var(--skg-blue); padding: 12px 16px; font-size: 13.5px; }

/* ブランドページの本文部品（見出しサブ・事実チップ・ステッカー列） -------------- */
.skg-h1-sub { display: block; margin-top: 12px; font-family: var(--wp--preset--font-family--jp); font-size: 14px; font-weight: 700; letter-spacing: .02em; line-height: 1.6; color: var(--skg-gray); }
.skg-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; margin: 28px 0; }
.skg-chips > * { margin: 0; border-top: 1px solid var(--skg-ink); padding-top: 8px; line-height: 1.65; }
.skg-chips .skg-label { display: block; margin-bottom: 2px; }
.skg-chips b { display: block; font-size: 13.5px; }
@media (min-width: 782px) { .skg-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }
.skg-stickers.wp-block-gallery { gap: 6px; }
.skg-hero-img img { width: 100%; height: auto; }
.skg-scroll-anchor { scroll-margin-top: 16px; }
.skg-prog-wrap { scroll-margin-top: 16px; }

/* 一覧カード（トップのNEWS / WORKS） -------------------------------------- */
.skg-cards { gap: 28px 24px; }
.skg-cards > li > :is(h2, h3) { margin: 2px 0 4px; }

/* 旧コンテンツ（wp:html）の表が375pxではみ出すのを防ぐ保険。
   本文側の `thead th{white-space:nowrap}` が原因で /x-tech/school/ が395pxになっていた（2026-09-16 実測）。
   本文を作り直したらこのブロックは不要になる。skog-theme が出す表（.skg-table）は対象外。 */
@media (max-width: 600px) {
	.entry-content table:not(.skg-table) { max-width: 100%; }
	.entry-content table:not(.skg-table) th,
	.entry-content table:not(.skg-table) td { white-space: normal !important; word-break: break-word; }
}

/* Amelia の予約UIが375pxではみ出すのを抑える（2026-09-16 本番実測 383px→375px）。
   犯人は Amelia 内部の `.el-pagination.am-pagination`（幅320px）が親（275px）より広いこと。
   プラグイン側のCSSなので、こちらで受け止める。ページャは横スクロールで使える状態を保つ。 */
@media (max-width: 600px) {
	.amelia-v2-booking .am-els__pagination { overflow-x: auto; }
	.amelia-v2-booking .el-pagination.am-pagination { max-width: 100%; }
	/* Instagram 埋め込みは min-width:326px を自前で持っていて375pxではみ出す（技一覧で実測 382px）。 */
	.instagram-media { min-width: 0 !important; max-width: 100% !important; width: 100% !important; }
}

/* 会社概要などの2列テーブル（core/table に .skg-profile） ------------------- */
.skg-profile table { width: 100%; border-collapse: collapse; }
.skg-profile th, .skg-profile td { text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--skg-rule); padding: 10px 12px 10px 0; font-size: 13.5px; line-height: 1.8; }
.skg-profile th { width: 7em; color: var(--skg-gray); font-weight: 500; font-size: 12.5px; white-space: normal; }
@media (max-width: 600px) { .skg-profile th { width: 5.4em; font-size: 12px; } .skg-profile th, .skg-profile td { font-size: 13px; padding-right: 8px; } }

/* 表の既定（本文中の core/table も含む） ----------------------------------- */
@media (max-width: 600px) { table { font-size: 13px; } th { white-space: normal; } }

/* FAQ（/guide/）の core/details -------------------------------------------
   ※ クラス名は .skg-qa。.skg-faq は旧wp:html本文の5ページ（recruit / open-atelier /
   skola / imbalance_class / tenjiku-harappa）が各自の定義で使っているので使わない。 */
.skg-qa { border-bottom: 1px solid var(--skg-rule); margin: 0; }
.skg-qa summary { cursor: pointer; list-style: none; display: flex; gap: 10px; align-items: flex-start; box-sizing: border-box; min-height: 44px; padding: 15px 0; font-size: 15px; font-weight: 700; line-height: 1.65; }
.skg-qa summary::-webkit-details-marker { display: none; }
.skg-qa summary::before { content: "Q"; flex: 0 0 auto; font-family: var(--wp--preset--font-family--en); font-weight: 600; color: var(--skg-blue); }
.skg-qa summary::after { content: "+"; margin-left: auto; padding-left: 10px; font-family: var(--wp--preset--font-family--en); font-weight: 600; color: var(--skg-blue); }
.skg-qa[open] summary { padding-bottom: 4px; }
.skg-qa[open] summary::after { content: "\2212"; }
.skg-qa > :not(summary) { margin: 0 0 12px 22px; font-size: 14px; line-height: 1.85; }
.skg-qa > :last-child { margin-bottom: 18px; }
.skg-qa ul { padding-left: 1.15em; }
.skg-qa li { margin-bottom: 8px; }
.skg-qa .skg-profile { margin-left: 22px; }

/* 2026-09-17: 写真主導の型（トップ）＋フッター軽量化 ---------------------------
   オーナー指摘: 情報過密・写真が少ない・デザインが欠落・全ページに拠点住所。
   罫線で区切る代わりに余白で区切り、各セクションは写真から始める。 */
.skg-hero-full { margin: 0 0 4px; }
.skg-hero-full img { display: block; width: 100%; height: auto; }
.skg-photo { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--skg-wash); margin: 0 0 14px; }
.skg-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.skg-biz h2 { font-family: var(--wp--preset--font-family--en); font-size: 22px; font-weight: 600; letter-spacing: .04em; line-height: 1.2; margin: 2px 0 8px; }
.skg-biz .skg-label { margin: 0 0 2px; }
.skg-biz .wp-block-column + .wp-block-column { margin-top: 28px; }
.skg-cards { gap: 28px 24px; }
.skg-cards > li { margin: 0; }
.skg-cards .wp-block-post-featured-image { margin: 0 0 10px; background: var(--skg-wash); }
.skg-cards .wp-block-post-featured-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.skg-cards .wp-block-post-title { font-weight: 700; line-height: 1.6; margin: 2px 0 4px; }
.skg-cards .skg-label { margin: 0; }
.skg-sec--intro h1 { margin-top: 6px; }
.skg-sec--nums { background: var(--skg-wash); padding-left: 24px; padding-right: 24px; }
.skg-footer .skg-links a { min-height: 28px; }
@media (min-width: 782px) {
	.skg-biz .wp-block-column + .wp-block-column { margin-top: 0; }
	.skg-sec { padding-top: var(--wp--preset--spacing--60) !important; padding-bottom: var(--wp--preset--spacing--60) !important; }
	.skg-sec--intro { padding-top: var(--wp--preset--spacing--50) !important; }
}

/* 2026-09-17: グローバルナビは 1150px 未満でハンバーガーに畳む。
   6項目＋日本語サブラベルは約1,150px 必要で、952px（小さいノートPC・タブレット横）では3段に折り返していた（Chrome実測）。
   コアの navigation ブロックは 600px 固定の折りたたみなので、CSSで閾値を引き上げる。 */
@media (max-width: 1150px) {
	header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
	header .wp-block-navigation__responsive-container:not(.is-menu-open):not(.hidden-by-default) { display: none; }
	header .wp-block-navigation__responsive-container.is-menu-open { display: flex; }
}

/* 2026-09-18: NEWS／WORKS カードは正方形（Instagram由来の縦写真・チラシが多いので3:2より欠けが少ない）。
   写真の無い実績は :has() で灰色の枠を置き、グリッドの段を揃える。 */
.skg-cards--works > li:not(:has(figure.wp-block-post-featured-image))::before { content: ""; display: block; aspect-ratio: 1; background: var(--skg-wash); margin: 0 0 10px; }
.skg-work-hero img { width: 100%; height: auto; max-height: min(72vh, 680px); object-fit: cover; }
.skg-works__meta { margin: 2px 0 0; }