/*
 * 公開画面とGutenberg編集画面で共有する、サイト全体で使い回す骨格的な基本デザインはここで決める。
 * 細かいCSS効かしたい部分は、公開画面用・編集画面用でそれぞれ設定。
 */

:root {
	/* === 色関係 === */

	/* ページの基本的な背景色 */
	--ta-bg: #ebe7df;


	--ta-card-bgcolor: #f7f5f1;

	/* セクションタイプ */
	--ta-section-type-1-bg: #fff;
	--ta-section-type-1-text: #1c1b19;
	--ta-section-type-2-bg: #4a4a4a;
	--ta-section-type-2-text: #f4f2ec;
	--ta-section-type-3-bg: #1c1b19;
	--ta-section-type-3-text: #f4f2ec;

	/* 部品の文字色 */
	--ta-ink: #1c1b19;
	--ta-ink-on-deep: #f4f2ec;

	/* 線・アクセント */
	--ta-line: #d2cec5;
	--ta-line-on-deep: rgba(244, 242, 236, 0.18);
	--ta-accent: #53655c;


	/* === 書体 === */

	--ta-serif: "Cormorant Garamond", "Times New Roman", serif;
	--ta-serif-jp: "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif;
	--ta-sans: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

	/* === 通常文字の4段階 ===
	 * XS：注記・カウンター・短い英字ラベル
	 * S ：補助ラベル・小さめの操作
	 * M ：本文・主要リンク・ボタン
	 * L ：H3・キッカー・PCの文字ロゴ
	 */
	--ta-font-xs: 0.875rem;
	--ta-font-s: 0.9375rem;
	--ta-font-m: 1rem;
	--ta-font-l: 1.25rem;

	/* PC表示（960px以上）でも同じ4段階だけを使う */
	--ta-font-xs-pc-view: 0.9375rem;
	--ta-font-s-pc-view: 1rem;
	--ta-font-m-pc-view: 1.125rem;
	--ta-font-l-pc-view: 1.375rem;

	/*
	 * 見出しサイズ（通常文字の4段階とは別）
	 * - --ta-font-h2：セクションタイトルの英字H2（Features 等）
	 * - --ta-font-h2-compact：セクションタイトルを 600px 以下で上書きする値（style.css のメディアクエリ）
	 *
	 * - --ta-font-article-h2：記事の章H2
	 * - --ta-font-article-title：記事の表示タイトル（H1）
	 * ※フロント About の和文H2は style.css 側の個別指定（ここには置かない）
	 */
	--ta-font-h2: clamp(54px, 8vw, 116px);
	--ta-font-h2-compact: 58px;
	--ta-font-article-h2: clamp(24px, 2.6vw, 31px);
	--ta-font-article-title: clamp(30px, 4vw, 48px);

	/* 全体幅・余白 */
	--ta-content-max-width: 1360px;
	--ta-side-space: clamp(24px, 6vw, 96px);
	--ta-side-space-compact: 22px;
	--ta-section-space: clamp(64px, 7vw, 112px);
	--ta-section-space-compact: 56px;
}

/*
 * フロントページのセクションタイプ。
 * ナビ、カード、カルーセル内部はセクションタイプへ含めない。
 */
.ta-home :is(.ta-about, .ta-rooms, .ta-map, .ta-outline) {
	--ta-section-background: var(--ta-section-type-1-bg);
	--ta-section-text: var(--ta-section-type-1-text);
}

.ta-home :is(.ta-features, .ta-location, .ta-equipment) {
	--ta-section-background: var(--ta-section-type-2-bg);
	--ta-section-text: var(--ta-section-type-2-text);
}

.ta-home .ta-contact {
	--ta-section-background: var(--ta-section-type-3-bg);
	--ta-section-text: var(--ta-section-type-3-text);
}

.ta-home .ta-section {
	background: var(--ta-section-background);
	color: var(--ta-section-text);
}

/* 全セクション共通の英字の上に置く、日本語キッカー */
.ta-home .ta-kicker {
	color: var(--ta-section-text);
	font-family: var(--ta-serif-jp);
	font-size: var(--ta-font-l);
	letter-spacing: 0.16em;
	line-height: 1.7;
	margin: 0;
}

/* フロント看板H2（巨大英字）。Features / Location 等 */
.ta-home :where(h2.ta-heading) {
	color: var(--ta-section-text);
	font-family: var(--ta-serif);
	font-size: var(--ta-font-h2);
	font-weight: 400;
	letter-spacing: -0.025em;
	line-height: 0.8;
	margin: 0;
}

/* カードやカルーセル内で使うH3の基本形。調整必要な箇所は各CSSファイルに書く。 */
.ta-home :where(h3.wp-block-heading) {
	font-family: var(--ta-serif-jp);
	font-size: var(--ta-font-l);
	font-weight: 400;
	line-height: 1.45;
	margin: 0;
}

/*
 * 編集画面：:where() は詳細度0なので、Gutenberg標準の h2/h3 に負ける。
 * 公開と同じ変数・見た目のまま、詳細度だけ足して勝たせる。
 */
.editor-styles-wrapper .ta-home .ta-kicker {
	color: var(--ta-section-text);
	font-family: var(--ta-serif-jp);
	font-size: var(--ta-font-l);
	letter-spacing: 0.16em;
	line-height: 1.7;
	margin: 0;
}

.editor-styles-wrapper .ta-home h2.ta-heading {
	color: var(--ta-section-text);
	font-family: var(--ta-serif);
	font-size: var(--ta-font-h2);
	font-weight: 400;
	letter-spacing: -0.025em;
	line-height: 0.8;
	margin: 0;
}

.editor-styles-wrapper .ta-home h3.wp-block-heading {
	font-family: var(--ta-serif-jp);
	font-size: var(--ta-font-l);
	font-weight: 400;
	line-height: 1.45;
	margin: 0;
}

/*
 * 投稿記事の本文部品。
 * 公開画面とGutenberg編集画面で同じ文字組み・余白・画像・戻るリンクを使う。
 */
.ta-article__lead p,
.ta-article__sections p,
.editor-styles-wrapper .ta-article__lead p,
.editor-styles-wrapper .ta-article__sections p {
	color: var(--ta-ink);
	font-family: var(--ta-sans);
	font-size: var(--ta-font-m);
	letter-spacing: 0.04em;
	line-height: 1.85;
	margin: 0 0 1em;
}

/*
 * 通常文字4段階の指定用クラス（XS / S / M / L）。
 * Gutenbergの「追加 CSS クラス」に ta-font-xs などと書く（先頭のドットは不要）。
 * 値は :root の変数なので、公開画面は style.css の 960px 以上で PC サイズへ自動切替。
 * 編集画面は editor-style.css 側で PC サイズ変数を使う。
 * 記事本文の `.ta-article__sections p` 等より勝つよう、.ta-article 配下の詳細度を確保する。
 */
.ta-font-xs,
.ta-article .ta-font-xs,
.editor-styles-wrapper .ta-article .ta-font-xs {
	font-size: var(--ta-font-xs);
}

.ta-font-s,
.ta-article .ta-font-s,
.editor-styles-wrapper .ta-article .ta-font-s {
	font-size: var(--ta-font-s);
}

.ta-font-m,
.ta-article .ta-font-m,
.editor-styles-wrapper .ta-article .ta-font-m {
	font-size: var(--ta-font-m);
}

.ta-font-l,
.ta-article .ta-font-l,
.editor-styles-wrapper .ta-article .ta-font-l {
	font-size: var(--ta-font-l);
}

/*
 * 記事の章H2（記事系統）。サイズは --ta-font-article-h2。
 * 短い上線は記事だけの装飾。公開＋編集をここにまとめる。
 */
.ta-article__sections h2,
.editor-styles-wrapper .ta-article__sections h2 {
	color: var(--ta-ink);
	font-family: var(--ta-serif-jp);
	font-size: var(--ta-font-article-h2);
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.45;
	margin: clamp(36px, 5vw, 52px) 0 0.65em;
	padding: 0;
}

.ta-article__sections h2::before,
.editor-styles-wrapper .ta-article__sections h2::before {
	background: var(--ta-ink);
	content: "";
	display: block;
	height: 1px;
	margin-bottom: 0.75em;
	width: 2.5rem;
}

/*
 * 章ラベル → 表示タイトル（H1）の順。どちらも本文ブロックで編集する。
 * テーマが出すタイトルは style.css で隠す。
 *
 * 書体：
 * - 章ラベル（英字）：--ta-serif。サイズは通常段階の S
 * - 表示タイトル（和文H1）：--ta-serif-jp。サイズは :root の --ta-font-article-title
 */
.ta-article__chapter,
.editor-styles-wrapper .ta-article__chapter {
	color: var(--ta-ink);
	font-family: var(--ta-serif);
	font-size: var(--ta-font-s);
	font-weight: 400;
	letter-spacing: 0.18em;
	line-height: 1.2;
	margin: 0 0 clamp(12px, 1.5vw, 16px);
}

h1.ta-article__title,
.editor-styles-wrapper h1.ta-article__title {
	border-bottom: 1px solid var(--ta-line);
	color: var(--ta-ink);
	font-family: var(--ta-serif-jp);
	font-size: var(--ta-font-article-title);
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.35;
	margin: 0 0 clamp(24px, 3vw, 36px);
	padding-bottom: clamp(18px, 2vw, 24px);
}

.ta-article__lead,
.editor-styles-wrapper .ta-article__lead {
	margin-bottom: clamp(36px, 5vw, 48px);
}

.ta-article__lead p:last-child,
.ta-article__sections p:last-child,
.editor-styles-wrapper .ta-article__lead p:last-child,
.editor-styles-wrapper .ta-article__sections p:last-child {
	margin-bottom: 0;
}

/* 記事内の通常画像。アスペクト比は強制しない（元画像のまま） */
.ta-article > .wp-block-image,
.editor-styles-wrapper .ta-article > .wp-block-image {
	margin: 0 0 clamp(36px, 5vw, 48px);
}

.ta-article > .wp-block-image img,
.editor-styles-wrapper .ta-article > .wp-block-image img {
	display: block;
	height: auto;
	width: 100%;
}

.ta-article__sections h2:first-child,
.editor-styles-wrapper .ta-article__sections h2:first-child {
	margin-top: 0;
}

.ta-article-footer,
.editor-styles-wrapper .ta-article-footer {
	margin-top: clamp(48px, 6vw, 64px);
}

.ta-article-footer__back,
.editor-styles-wrapper .ta-article-footer__back {
	margin: 0;
}

.ta-article-footer__link,
.editor-styles-wrapper .ta-article-footer__link {
	align-items: center;
	border-bottom: 1px solid var(--ta-ink);
	color: var(--ta-ink);
	display: inline-flex;
	font-family: var(--ta-sans);
	font-size: var(--ta-font-s);
	letter-spacing: 0.04em;
	min-height: 44px;
	padding: 0 2px 6px;
	text-decoration: none;
	transition: color 0.25s ease;
}

.ta-article-footer__link::before,
.editor-styles-wrapper .ta-article-footer__link::before {
	background: currentColor;
	content: "";
	display: inline-block;
	flex: 0 0 18px;
	height: 18px;
	margin-right: 8px;
	mask: url("./assets/icons/arrow-left.svg") no-repeat center / contain;
	-webkit-mask: url("./assets/icons/arrow-left.svg") no-repeat center / contain;
	width: 18px;
}

@media (hover: hover) and (pointer: fine) {
	.ta-article-footer__link:hover,
	.editor-styles-wrapper .ta-article-footer__link:hover {
		color: var(--ta-accent);
	}
}

.ta-article-footer__link:focus-visible,
.editor-styles-wrapper .ta-article-footer__link:focus-visible {
	outline: 2px solid var(--ta-accent);
	outline-offset: 4px;
}

/*
 * 文中リンク（クラスなしの通常リンクだけ）。
 * ナビ、Read More、Button、モーダル操作などクラス付き導線には当てない。
 * 文字サイズは周囲の継承。色はブラウザ標準の青／紫を出さない。
 * .editor-styles-wrapper 付きは、Gutenberg標準のリンク色に勝つための詳細度補正。
 */
.ta-home :where(.ta-copy, .wp-block-table) a:not([class]),
.ta-article a:not([class]),
.editor-styles-wrapper .ta-home :where(.ta-copy, .wp-block-table) a:not([class]),
.editor-styles-wrapper .ta-article a:not([class]) {
	color: inherit;
	font-size: inherit;
	text-decoration: underline;
	text-decoration-color: var(--ta-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	transition: color 0.25s ease;
}

.ta-home :where(.ta-copy, .wp-block-table) a:not([class]):visited,
.ta-article a:not([class]):visited,
.editor-styles-wrapper .ta-home :where(.ta-copy, .wp-block-table) a:not([class]):visited,
.editor-styles-wrapper .ta-article a:not([class]):visited {
	color: inherit;
}

/* ホバー色はマウス環境だけ。スマホの sticky hover を残さない */
@media (hover: hover) and (pointer: fine) {
	.ta-home :where(.ta-copy, .wp-block-table) a:not([class]):hover,
	.ta-article a:not([class]):hover,
	.editor-styles-wrapper .ta-home :where(.ta-copy, .wp-block-table) a:not([class]):hover,
	.editor-styles-wrapper .ta-article a:not([class]):hover {
		color: var(--ta-accent);
	}
}

.ta-home :where(.ta-copy, .wp-block-table) a:not([class]):focus-visible,
.ta-article a:not([class]):focus-visible,
.editor-styles-wrapper .ta-home :where(.ta-copy, .wp-block-table) a:not([class]):focus-visible,
.editor-styles-wrapper .ta-article a:not([class]):focus-visible {
	outline: 2px solid var(--ta-accent);
	outline-offset: 3px;
}

/* Gutenbergで「新しいタブで開く」を選んだリンクへ、小さな斜め矢印（Lucide）を付ける。 */
.ta-home :where(.ta-copy, .wp-block-table) a:not([class])[target="_blank"]::after,
.ta-article a:not([class])[target="_blank"]::after,
.editor-styles-wrapper .ta-home :where(.ta-copy, .wp-block-table) a:not([class])[target="_blank"]::after,
.editor-styles-wrapper .ta-article a:not([class])[target="_blank"]::after {
	background-color: currentColor;
	content: "";
	display: inline-block;
	height: 0.85em;
	margin-left: 0.2em;
	mask: url("./assets/icons/external-link.svg") no-repeat center / contain;
	-webkit-mask: url("./assets/icons/external-link.svg") no-repeat center / contain;
	vertical-align: -0.05em;
	width: 0.85em;
}

/*
 * 記事共通の装飾部品。
 * 遮音ページ以外でも、同じクラスを付ければ使える。
 */
.ta-article__sections h3,
.editor-styles-wrapper .ta-article__sections h3 {
	color: var(--ta-ink);
	font-family: var(--ta-serif-jp);
	font-size: clamp(1.125rem, 1.6vw, 1.375rem);
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.5;
	margin: clamp(28px, 3.5vw, 36px) 0 0.55em;
}

.ta-article__sections ul,
.editor-styles-wrapper .ta-article__sections ul {
	color: var(--ta-ink);
	font-family: var(--ta-sans);
	font-size: var(--ta-font-m);
	letter-spacing: 0.04em;
	line-height: 1.85;
	margin: 0 0 1em;
	padding-left: 1.35em;
}

.ta-article__sections li + li,
.editor-styles-wrapper .ta-article__sections li + li {
	margin-top: 0.35em;
}

/* 画像差し替え待ち。キャプションで置き場所を明示する */
.ta-article-media-placeholder,
.editor-styles-wrapper .ta-article-media-placeholder {
	background: var(--ta-card-bgcolor);
	border: 1px dashed var(--ta-line);
	margin: clamp(28px, 4vw, 40px) 0;
	padding: 0;
}

.ta-article-media-placeholder img,
.editor-styles-wrapper .ta-article-media-placeholder img {
	display: block;
	height: auto;
	opacity: 0.85;
	width: 100%;
}

.ta-article-media-placeholder figcaption,
.editor-styles-wrapper .ta-article-media-placeholder figcaption {
	color: var(--ta-ink);
	font-family: var(--ta-sans);
	font-size: var(--ta-font-s);
	letter-spacing: 0.04em;
	line-height: 1.7;
	margin: 0;
	padding: 12px 14px 14px;
}

/* 2項目の軽い比較。スマホは縦、768px以上は横 */
.ta-article-compare.wp-block-columns,
.editor-styles-wrapper .ta-article-compare.wp-block-columns {
	border-bottom: 1px solid var(--ta-line);
	border-top: 1px solid var(--ta-line);
	gap: 0;
	margin: clamp(28px, 4vw, 40px) 0;
	padding: clamp(20px, 3vw, 28px) 0;
}

.ta-article-compare > .wp-block-column,
.editor-styles-wrapper .ta-article-compare > .wp-block-column {
	margin: 0;
}

.ta-article-compare > .wp-block-column + .wp-block-column,
.editor-styles-wrapper .ta-article-compare > .wp-block-column + .wp-block-column {
	border-top: 1px solid var(--ta-line);
	margin-top: clamp(18px, 2.5vw, 24px);
	padding-top: clamp(18px, 2.5vw, 24px);
}

@media (min-width: 768px) {
	.ta-article-compare.wp-block-columns,
	.editor-styles-wrapper .ta-article-compare.wp-block-columns {
		gap: clamp(24px, 3vw, 36px);
	}

	.ta-article-compare > .wp-block-column + .wp-block-column,
	.editor-styles-wrapper .ta-article-compare > .wp-block-column + .wp-block-column {
		border-left: 1px solid var(--ta-line);
		border-top: 0;
		margin-top: 0;
		padding-left: clamp(24px, 3vw, 36px);
		padding-top: 0;
	}
}

.ta-article-compare__item h3,
.editor-styles-wrapper .ta-article-compare__item h3 {
	font-family: var(--ta-serif-jp);
	font-size: clamp(1.05rem, 1.5vw, 1.2rem);
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.45;
	margin: 0 0 0.65em;
}

.ta-article-compare__item ul,
.editor-styles-wrapper .ta-article-compare__item ul {
	margin-bottom: 0;
}

/* 本文中の短い強調。会話風の引用にはしない */
.ta-article-highlight,
.editor-styles-wrapper .ta-article-highlight {
	border-left: 2px solid var(--ta-accent);
	margin: clamp(28px, 4vw, 40px) 0;
	padding: 0.15em 0 0.15em 1.1em;
}

.ta-article-highlight p,
.editor-styles-wrapper .ta-article-highlight p {
	color: var(--ta-ink);
	font-family: var(--ta-serif-jp);
	font-size: clamp(1.05rem, 1.5vw, 1.25rem);
	letter-spacing: 0.03em;
	line-height: 1.75;
	margin: 0;
}

/* 数値ポイント枠。1枠に複数行を収める */
.ta-article-point,
.editor-styles-wrapper .ta-article-point {
	background: var(--ta-card-bgcolor);
	border: 1px solid var(--ta-line);
	margin: clamp(28px, 4vw, 40px) 0;
	padding: clamp(22px, 3vw, 32px);
}

.ta-article-point__label,
.editor-styles-wrapper .ta-article-point__label {
	color: var(--ta-accent);
	font-family: var(--ta-serif);
	font-size: var(--ta-font-s);
	font-weight: 400;
	letter-spacing: 0.18em;
	line-height: 1.2;
	margin: 0 0 1.1em;
}

.ta-article-point__row,
.editor-styles-wrapper .ta-article-point__row {
	margin: 0 0 1em;
}

.ta-article-point__row:last-of-type,
.editor-styles-wrapper .ta-article-point__row:last-of-type {
	margin-bottom: 0;
}

.ta-article-point__value,
.editor-styles-wrapper .ta-article-point__value {
	color: var(--ta-ink);
	display: block;
	font-family: var(--ta-serif);
	font-size: clamp(1.35rem, 2vw, 1.7rem);
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.3;
	margin-bottom: 0.2em;
}

.ta-article-point__row p,
.editor-styles-wrapper .ta-article-point__row p {
	margin: 0;
}

.ta-article-point__note,
.editor-styles-wrapper .ta-article-point__note {
	border-top: 1px solid var(--ta-line);
	color: var(--ta-ink);
	font-family: var(--ta-sans);
	font-size: var(--ta-font-s);
	letter-spacing: 0.03em;
	line-height: 1.75;
	margin: 1.25em 0 0;
	padding-top: 1em;
}

/* 記事末尾の要点ボックス */
.ta-article-summary,
.editor-styles-wrapper .ta-article-summary {
	background: var(--ta-card-bgcolor);
	border: 1px solid var(--ta-line);
	margin: clamp(40px, 5vw, 56px) 0 0;
	padding: clamp(24px, 3.5vw, 36px);
}

.ta-article-summary h2,
.editor-styles-wrapper .ta-article-summary h2 {
	border: 0;
	font-family: var(--ta-serif-jp);
	font-size: clamp(1.15rem, 1.7vw, 1.35rem);
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.45;
	margin: 0 0 0.85em;
	padding: 0;
}

.ta-article-summary h2::before,
.editor-styles-wrapper .ta-article-summary h2::before {
	content: none;
	display: none;
}

.ta-article-summary ul,
.editor-styles-wrapper .ta-article-summary ul {
	margin: 0;
}

/* FAQ。詳細ブロックを細い上下線で並べる */
.ta-article-faq,
.editor-styles-wrapper .ta-article-faq {
	border-bottom: 1px solid var(--ta-line);
	border-top: 1px solid var(--ta-line);
	color: var(--ta-ink);
	margin: 0;
}

.ta-article-faq + .ta-article-faq,
.editor-styles-wrapper .ta-article-faq + .ta-article-faq {
	border-top: 0;
	margin-top: 0;
}

.ta-article-faq > summary,
.editor-styles-wrapper .ta-article-faq > summary {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-family: var(--ta-serif-jp);
	font-size: var(--ta-font-m);
	font-weight: 400;
	gap: 12px;
	justify-content: space-between;
	letter-spacing: 0.03em;
	line-height: 1.6;
	list-style: none;
	padding: 1.05em 0;
}

.ta-article-faq > summary::-webkit-details-marker,
.editor-styles-wrapper .ta-article-faq > summary::-webkit-details-marker {
	display: none;
}

.ta-article-faq > summary::after,
.editor-styles-wrapper .ta-article-faq > summary::after {
	background-color: currentColor;
	content: "";
	display: block;
	flex-shrink: 0;
	height: 0.9em;
	mask: url("./assets/icons/chevron-down.svg") no-repeat center / contain;
	-webkit-mask: url("./assets/icons/chevron-down.svg") no-repeat center / contain;
	transition: transform 0.2s ease;
	width: 0.9em;
}

.ta-article-faq[open] > summary::after,
.editor-styles-wrapper .ta-article-faq[open] > summary::after {
	transform: rotate(180deg);
}

.ta-article-faq > :not(summary),
.editor-styles-wrapper .ta-article-faq > :not(summary) {
	margin: 0 0 1.1em;
}

.ta-article-faq p,
.editor-styles-wrapper .ta-article-faq p {
	color: var(--ta-ink);
	font-family: var(--ta-sans);
	font-size: var(--ta-font-m);
	letter-spacing: 0.04em;
	line-height: 1.85;
	margin: 0 0 0.85em;
}

.ta-article-faq p:last-child,
.editor-styles-wrapper .ta-article-faq p:last-child {
	margin-bottom: 0;
}