/*
Theme Name: 高砂アパート Arkhe Child
Template: arkhe
Version: 0.4.9
Text Domain: takasago-apartment
Description: 高砂アパート物件サイト専用のArkhe子テーマ
*/

/*
 * 公開画面用CSS
 *
 * セレクタの役割
 * - body.home : WordPressが「現在のフロントページ」へ自動で付けるクラス
 * - .ta-home  : フロントページ本文の最上位グループへ手動で付けた独自クラス
 * - .ta-*     : 高砂アパート専用の部品。ArkheやWordPress標準クラスとの衝突を避ける
 * - .l-* / .c-* : 親テーマArkheが出力するレイアウト・部品のクラス
 * - .wp-block-* : WordPress標準のGutenbergブロック
 *
 * このファイルの構成
 * 1. サイト全体
 * 2. ヘッダー
 * 3. フロントページ外枠
 * 4. フロントページ本文・各セクション（幅に依存しない基本スタイル）
 * 5. 動き・レスポンシブ（画面幅に応じた調整）
 * 6. フロントページ以外の固定ページ・投稿（外枠のみ）
 */

/* =========================================================
 * 1. サイト全体
 * 共通の色、書体、文字サイズ、幅、余白はcommon-design.cssで管理する
 * ========================================================= */
:root {
	/* 公開画面固有の高さ */
	--ta-header-height: 78px;
	--ta-hero-height: clamp(480px, 72svh, 760px);
}

html {
	scroll-behavior: auto;
	scroll-padding-top: var(--ta-header-height);
}

body {
	color: var(--ta-ink);
	font-family: var(--ta-sans);
	font-feature-settings: "palt";
	font-size: var(--ta-font-m);
	letter-spacing: 0.02em;
}

/* =========================================================
 * 2. ヘッダー
 * 全ページ共通。Arkheが出力するヘッダーの見た目を調整する
 * ========================================================= */
.l-header {
	background: rgba(247, 245, 241, 0.92);
	border-bottom: 1px solid rgba(28, 27, 25, 0.1);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

/* セクション見出しと同じ左右位置（side-space と content-max の内側）。PC/タブレット/スマホ共通。
 * .l-container の padding / width も上書きする（ヘッダー本体に両方付く） */
.l-header__body.l-container,
.l-header__body {
	height: var(--ta-header-height);
	margin-inline: auto;
	max-width: var(--ta-content-max-width);
	padding-inline: 0;
	position: relative;
	width: min(var(--ta-content-max-width), calc(100% - (2 * var(--ta-side-space))));
}

/* テキストロゴを左寄せ。Arkheは1000px未満で中央寄せなので明示的に上書き。PCはH3に合わせる */
.l-header__logo,
.l-header[data-logo="left"] .l-header__logo {
	justify-content: flex-start;
	width: 100%;
}

.l-header__center {
	text-align: left;
	width: 100%;
}

.l-header__logo.has-text .c-headLogo {
	color: var(--ta-ink);
	font-family: var(--ta-serif-jp);
	font-size: var(--ta-font-l);
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.45;
}

.c-gnav {
	gap: clamp(20px, 2.7vw, 44px);
}

/* PCヘッダーナビ。本文拡大に合わせてデスクトップだけ大きく */
.c-gnav__a {
	font-family: var(--ta-sans);
	font-size: var(--ta-font-xs);
	font-weight: 500;
	letter-spacing: 0.12em;
}

.c-gnav__a::after {
	background: var(--ta-ink);
	bottom: 19px;
	content: "";
	height: 1px;
	left: 50%;
	position: absolute;
	transform: translateX(-50%) scaleX(0);
	transition: transform 0.35s ease;
	width: calc(100% - 24px);
}

.c-gnav__a:hover::after {
	transform: translateX(-50%) scaleX(1);
}

.l-header__searchBtn {
	display: none;
}

/* =========================================================
 * 3. フロントページ外枠
 *
 * WordPressがフロントページへ自動で付ける body.home を使う。
 * ページIDには依存しないため、将来フロントページを差し替えても追従する。
 * ここではArkheの通常ページ用の幅・余白を解除し、フロントページを全幅にする。
 * ========================================================= */
body.home {
	background: var(--ta-bg);
}

body.home .l-content,
body.home .l-content__body,
body.home .l-main,
body.home .l-main__body,
body.home .c-postContent {
	margin: 0;
	max-width: none;
	padding: 0;
	width: 100%;
}

body.home .l-footer {
	margin-top: 0;
}

.c-copyright {
	font-family: var(--ta-sans);
	font-size: var(--ta-font-xs);
	letter-spacing: 0.12em;
}

/* =========================================================
 * 4. フロントページ本文
 *
 * .ta-homeはGutenberg本文の最上位グループに付けた独自クラス。
 * 公開画面だけでなく編集画面でも同じブロックを識別するために残す。
 * body.homeと違い、WordPressが自動で付けるクラスではない。
 * ========================================================= */
.ta-home *,
.ta-home *::before,
.ta-home *::after {
	box-sizing: border-box;
}

.ta-home {
	background: var(--ta-bg);
	overflow: clip;
}

/*
 * Arkheが標準グループブロックへ追加する内側ラッパーを、
 * フロントページ内ではレイアウトの一段として数えない。
 */
.ta-home .wp-block-group > .wp-block-group__inner-container {
	display: contents;
}

/* ---------- 各セクション共通の幅・余白 ---------- */
.ta-section {
	padding: var(--ta-section-space) var(--ta-side-space);
}

.ta-section__inner {
	margin-inline: auto;
	max-width: var(--ta-content-max-width);
}

.ta-section-head {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: flex-start;
	margin-bottom: clamp(24px, 3.5vw, 46px);
}

.ta-copy {
	color: var(--ta-ink);
	font-size: var(--ta-font-m);
	letter-spacing: 0.04em;
	line-height: 1.9;
	margin: 0;
}

.ta-media {
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(208, 205, 196, 0.42)),
		repeating-linear-gradient(90deg, transparent 0, transparent 47px, rgba(32, 37, 34, 0.035) 48px);
	display: block;
	margin: 0;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.ta-media img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/*
 * 4-1. ファーストビュー（カバーブロック）
 *
 * 枠の高さは画面基準で固定。写真は object-fit:cover で枠内にトリミング。
 * 縦長画像の縦幅をそのまま枠へ反映させない。
 *
 * 入場タイミングはこのブロック先頭の変数だけ触る。
 * 原則：開始状態に transition を書かない。動かす指定は .is-ready 側だけ。
 * （開始側に書くと ta-js 付与で「表示→非表示」がアニメし、出てくる動きが壊れる）
 */


/* ---------- アニメーションの秒数関連 ---------- */
.wp-block-cover.ta-hero {
	--ta-hero-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ta-hero-image-opacity-duration: 1.15s;
	--ta-hero-image-move-duration: 1.35s;
	--ta-hero-overlay-duration: 0.9s;
	--ta-hero-overlay-delay: 0.25s;
	--ta-hero-line1-duration: 1.05s;
	--ta-hero-line1-delay: 0.45s;
	--ta-hero-line2-duration: 1.45s;
	--ta-hero-line2-delay: 0.57s;
	--ta-hero-ja-duration: 0.8s;
	--ta-hero-ja-delay: 0.73s;

	align-items: stretch !important;
	aspect-ratio: auto !important;
	background: var(--ta-card-bgcolor);
	height: var(--ta-hero-height) !important;
	justify-content: flex-start !important;
	max-height: var(--ta-hero-height) !important;
	min-height: var(--ta-hero-height) !important;
	overflow: hidden;
	padding: 0 !important;
}


.wp-block-cover.ta-hero .wp-block-cover__image-background,
.wp-block-cover.ta-hero .wp-block-cover__video-background {
	height: 100% !important;
	inset: 0 !important;
	margin: 0 !important;
	max-height: none !important;
	max-width: none !important;
	min-height: 100% !important;
	min-width: 100% !important;
	object-fit: cover !important;
	position: absolute !important;
	width: 100% !important;
}

/* 下寄せ白文字の可読性用。上が明るく、下だけ暗くする */
.wp-block-cover.ta-hero .wp-block-cover__background {
	background:
		linear-gradient(
			to top,
			rgba(35, 43, 39, 0.55) 0%,
			rgba(35, 43, 39, 0.18) 35%,
			rgba(35, 43, 39, 0) 60%
		) !important;
	inset: 0 !important;
}

.wp-block-cover.ta-hero::before {
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.11) 1px, transparent 1px);
	background-size: clamp(55px, 7vw, 110px) clamp(55px, 7vw, 110px);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

.wp-block-cover.ta-hero::after {
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 50% 50% 4% 50%;
	content: "";
	height: min(58vw, 760px);
	pointer-events: none;
	position: absolute;
	right: -8vw;
	top: 8%;
	transform: rotate(-8deg);
	width: min(58vw, 760px);
	z-index: 1;
}

/* 文字エリアは枠いっぱいに広げ、中身だけ下寄せ */
.wp-block-cover.ta-hero .wp-block-cover__inner-container {
	box-sizing: border-box;
	display: flex !important;
	flex-direction: column !important;
	height: auto !important;
	inset: 0 !important;
	justify-content: flex-end !important;
	margin: 0 !important;
	max-width: none !important;
	min-height: 0 !important;
	padding: clamp(70px, 9vw, 138px) var(--ta-side-space) 8px;
	position: absolute !important;
	width: 100% !important;
	z-index: 2;
}

.ta-hero__content {
	align-items: flex-end;
	color: #fff;
	display: flex;
	justify-content: space-between;
	margin: 0;
	width: 100%;
}

.ta-hero__title {
	font-family: var(--ta-serif);
	font-size: clamp(70px, 11.2vw, 182px);
	font-weight: 400;
	letter-spacing: -0.045em;
	line-height: 0.66;
	margin: 0;
	max-width: 1080px;
	white-space: nowrap;
	word-spacing: 0.12em;
}

.ta-hero__title-ja {
	display: block;
	font-family: var(--ta-serif-jp);
	font-size: var(--ta-font-l);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.45;
	/* 英字大見出しとの間隔。下寄せのため上余白を縮めると英語が下へ寄る */
	margin: clamp(0px, 0.4vw, 8px) 0 0;
	/* 英字と左端が揃っていても和文が左へ飛び出すように見える光学補正 */
	padding-left: 0.45em;
}

/* --- ヒーロー入場（.ta-js 時のみ）。全部 .is-ready で動き出す --- */

/* 画像：斜めにふわっと現れる */
.ta-js .wp-block-cover.ta-hero .wp-block-cover__image-background {
	clip-path: polygon(0 0, 18% 0, 0 100%, 0 100%);
	opacity: 0;
	transform: translate3d(28px, 0, 0) scale(1.04);
}

.ta-js .wp-block-cover.ta-hero.is-ready .wp-block-cover__image-background {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
	transition:
		opacity var(--ta-hero-image-opacity-duration) ease,
		transform var(--ta-hero-image-move-duration) var(--ta-hero-ease),
		clip-path var(--ta-hero-image-move-duration) var(--ta-hero-ease);
}

/* オーバーレイ（グラデ・格子・円） */
.ta-js .wp-block-cover.ta-hero .wp-block-cover__background,
.ta-js .wp-block-cover.ta-hero::before,
.ta-js .wp-block-cover.ta-hero::after {
	opacity: 0;
}

.ta-js .wp-block-cover.ta-hero.is-ready .wp-block-cover__background,
.ta-js .wp-block-cover.ta-hero.is-ready::before,
.ta-js .wp-block-cover.ta-hero.is-ready::after {
	opacity: 1;
	transition: opacity var(--ta-hero-overlay-duration) ease var(--ta-hero-overlay-delay);
}

/* 英字：行マスクの外から滑り込む。中身の span.ta-hero__line は JS が作る */
.ta-js .wp-block-cover.ta-hero .ta-hero__title {
	clip-path: inset(-0.35em -100vw -0.35em 0);
}

.ta-js .wp-block-cover.ta-hero .ta-hero__line {
	display: inline-block;
	transform: translate3d(-104%, 0, 0);
}

.ta-js .wp-block-cover.ta-hero.is-ready .ta-hero__line {
	transform: translate3d(0, 0, 0);
}

/* 所要時間・遅延は行ごとに完結（共通を後から上書きしない） */
.ta-js .wp-block-cover.ta-hero.is-ready .ta-hero__title--1 .ta-hero__line {
	transition: transform var(--ta-hero-line1-duration) var(--ta-hero-ease) var(--ta-hero-line1-delay);
}

.ta-js .wp-block-cover.ta-hero.is-ready .ta-hero__title--2 .ta-hero__line {
	transition: transform var(--ta-hero-line2-duration) var(--ta-hero-ease) var(--ta-hero-line2-delay);
}

/* 和文：.ta-reveal と同じ浮き上がり。発火だけ is-ready */
.ta-js .wp-block-cover.ta-hero .ta-hero__title-ja {
	opacity: 0;
	transform: translateY(28px);
}

.ta-js .wp-block-cover.ta-hero.is-ready .ta-hero__title-ja {
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity var(--ta-hero-ja-duration) ease var(--ta-hero-ja-delay),
		transform var(--ta-hero-ja-duration) var(--ta-hero-ease) var(--ta-hero-ja-delay);
}

/* ---------- 4-2. ヒーロー直下のセクション内リンク ---------- */
/* 1項目 = グループ。中に英語段落・日本語段落を別ブロックで置く（編集で英日が混ざらない） */
.ta-local-nav {
	background: var(--ta-card-bgcolor);
	border-bottom: 1px solid var(--ta-line);
	border-top: 1px solid var(--ta-line);
	padding: 0 var(--ta-side-space);
}

.ta-local-nav__inner {
	align-items: stretch;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 auto;
	max-width: 1080px;
}

/* inner-container は display:contents のため、子指定は > ではなくクラス直指定 */
.ta-local-nav .ta-local-nav__item {
	align-items: center;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 6px;
	justify-content: center;
	margin: 0 !important;
	min-height: 108px;
	min-width: 140px;
	padding: 22px 12px 26px;
	position: relative;
	text-align: center;
}

/* リンクは英語段落側だけ。セル全体をクリック可能にする */
.ta-local-nav__item .ta-local-nav__en a {
	color: inherit;
	text-decoration: none;
}

.ta-local-nav__item .ta-local-nav__en a::before {
	content: "";
	inset: 0;
	position: absolute;
	z-index: 3;
}

.ta-local-nav__en,
.ta-local-nav__ja {
	margin: 0 !important;
}

.ta-local-nav__en {
	font-family: var(--ta-serif);
	font-size: clamp(22px, 2.2vw, 30px);
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1;
}

/* ナビの日本語ラベルは、本文より一段小さい補足情報として扱う。 */
.ta-local-nav__ja {
	color: var(--ta-ink);
	font-family: var(--ta-sans);
	font-size: var(--ta-font-s);
	font-weight: 400;
	letter-spacing: 0.06em;
	line-height: 1.4;
	transition: color 0.3s ease;
}

/* 下向きシェブロン。項目グループ自体に付ける */
.ta-local-nav__item::after {
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	content: "";
	height: 6px;
	margin-top: 4px;
	opacity: 0.45;
	transform: rotate(45deg);
	transition: opacity 0.3s ease, transform 0.3s ease;
	width: 6px;
}

/* ホバー色変更はマウス等だけ。スマホのタップ一瞬変化・sticky hoverを避ける */
@media (hover: hover) and (pointer: fine) {
	.ta-local-nav__item:hover {
		color: var(--ta-accent);
	}

	.ta-local-nav__item:hover .ta-local-nav__ja {
		color: var(--ta-accent);
	}

	.ta-local-nav__item:hover::after {
		opacity: 0.8;
		transform: translateY(2px) rotate(45deg);
	}
}

/* ---------- 4-3. About：物件の基本情報へ効く ---------- */
/* フロント和文H2。英字看板H2より小さく（日英の見え方差）。記事H2とも別系統 */
.ta-about__title {
	font-family: var(--ta-serif-jp);
	font-weight: 400;
}

/* h2要素に .ta-heading と共に付くため、素の .ta-heading より高い specificity で確実に上書き */
h2.ta-about__title {
	font-size: clamp(28px, 8vw, 48px);
	line-height: 1.35;
	margin: 0 0 20px;
}

.ta-about .ta-copy {
	max-width: 40rem;
}

/* ---------- 4-4. Features：特徴カードのまとまりと表示順へ効く ---------- */
.ta-home .ta-feature-grid.is-layout-flex {
	display: grid;
	gap: 22px;
	margin: 0;
}

.ta-feature-grid--secondary {
	margin-top: clamp(28px, 4vw, 40px) !important;
}

.ta-feature-grid > .wp-block-column {
	display: flex;
	margin: 0;
	min-width: 0;
}

.ta-feature-card {
	/* セクション帯の明るい字色をカード内へ継承させない */
	background: var(--ta-card-bgcolor);
	border: 1px solid var(--ta-line);
	color: var(--ta-ink);
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 14px;
	height: 100%;
	margin: 0;
	padding: 20px;
}
.ta-feature-card__title {
	color: var(--ta-ink);
	/* 游明朝/ヒラギノ明朝は Regular と Bold(W6) 程度しか無い。500 は見た目が 400 と同じになる */
	font-weight: 600;
	letter-spacing: .02em;
	order: 0;
}

.ta-feature-card__media {
	aspect-ratio: 16 / 9;
	margin: 0;
	order: 1;
}

.ta-feature-card__media img {
	object-position: center center;
}

.ta-feature-card__copy {
	/* Locationカード本文と同じ字色。帯が暗くてもカード内は濃い字で読む */
	color: var(--ta-ink);
	font-size: var(--ta-font-m);
	letter-spacing: .04em;
	line-height: 1.9;
	margin: 0;
	order: 2;
}

/* Featuresの記事リンクをカード下端へ揃え、同じ段のカード外枠を等しい高さに保つ。 */
.ta-feature-card__action {
	margin: auto 0 0;
	order: 3;
}

/* 写真未設定の補助カード。クラスを外すだけで通常カードへ昇格できる。 */
.ta-feature-card--text .ta-feature-card__media {
	display: none;
}

/* ---------- 4-5. Rooms：間取りカードと、Rooms/Life共通のカルーセル操作部 ---------- */
/*
 * Carousel BlockのSwiperが移動・スワイプ・端での無効化を担当する。
 * ここは Rooms カード本体と、Rooms/Life で見た目が同じ操作部（矢印・丸の配置など）だけ。
 * Location 帯向けの色など Life 固有は 4-6 へ書く。
 */
.ta-plugin-carousel--rooms,
.ta-plugin-carousel--life {
	/* 濃い丸ボタン上の矢印色。プラグインは color 変数を ::after に使う */
	--wp--custom--carousel-block--navigation-color: var(--ta-ink-on-deep);
	--wp--custom--carousel-block--navigation-hover-color: var(--ta-ink-on-deep);
	--wp--custom--carousel-block--navigation-size: 18px;
	--wp--custom--carousel-block--navigation-sides-offset: 12px;
	--wp--custom--carousel-block--pagination-bottom: -32px;
	--wp--custom--carousel-block--pagination-bullet-size: 8px;
}

/* Rooms 帯は明るい地なので、paginationは濃い側 */
.ta-plugin-carousel--rooms {
	--wp--custom--carousel-block--pagination-bullet-active-color: var(--ta-ink);
	--wp--custom--carousel-block--pagination-bullet-color: var(--ta-line);
	--wp--custom--carousel-block--pagination-bullet-inactive-color: var(--ta-line);
}

/* paddingを含めた幅でSwiperに計算させ、横方向のはみ出しをページへ出さない。 */
.ta-plugin-carousel--rooms .swiper,
.ta-plugin-carousel--life .swiper {
	box-sizing: border-box;
	overflow: hidden;
	width: 100%;
}

/*
 * Location：PCで Swiper 初期化前にカードが1枚幅（横100%）になるフラッシュを防ぐ。
 * 初期化後は .swiper-initialized が付き、この指定は外れて Swiper 計算へ引き継ぐ。
 * gap 16 / (100% - 32px) / 3 は data-cb-space-between と slidesPerView:3 に合わせている。
 */
@media (min-width: 960px) {
	.ta-plugin-carousel--life .swiper:not(.swiper-initialized) .cb-wrapper {
		display: flex;
		gap: 16px;
	}

	.ta-plugin-carousel--life .swiper:not(.swiper-initialized) .cb-slide {
		flex: 0 0 calc((100% - 32px) / 3);
		width: calc((100% - 32px) / 3);
	}
}

/* いちばん長いスライドに縦を揃え、短いカードは下に余白を残す。
 * Swiper標準の height:100% だと各スライドが中身高さのままになるため、
 * height:auto + stretch で外枠をそろえる。 */
.ta-plugin-carousel--rooms .cb-wrapper,
.ta-plugin-carousel--life .cb-wrapper {
	align-items: stretch;
}

.ta-plugin-carousel--rooms .cb-slide,
.ta-plugin-carousel--life .cb-slide {
	display: flex;
	height: auto;
}

.ta-plugin-carousel--rooms .ta-room-slide,
.ta-plugin-carousel--life .ta-life-card {
	box-sizing: border-box;
	flex: 1;
	height: 100%;
}

.ta-room-slide {
	background: var(--ta-card-bgcolor);
	border: 1px solid var(--ta-line);
	margin: 0;
	padding: 20px;
}

.ta-room-slide__layout {
	align-items: center;
	display: grid !important;
	gap: clamp(24px, 4vw, 48px);
	grid-template-columns: 1fr;
}

.ta-room-slide__layout > .wp-block-column {
	margin: 0;
}

.ta-room-slide__media {
	aspect-ratio: 4 / 3;
	margin: 0;
	overflow: hidden;
}
/*
 * カード内の補足導線は、細い下線と右端の記号で見た目をそろえる。
 * Roomsはモーダルを開くbutton、Features/Locationは記事へ進むlinkとして意味だけを分ける。
 */
.ta-room-slide__media-action,
.ta-life-card__link,
.ta-feature-card__link {
	align-items: center;
	appearance: none;
	background: transparent;
	border: 0;
	border-bottom: 1px solid currentColor;
	box-sizing: border-box;
	color: inherit;
	display: inline-flex;
	justify-content: space-between;
	line-height: 1;
	max-width: 190px;
	min-height: 44px;
	padding: 10px 0 9px;
	text-align: left;
	text-decoration: none;
	transition: border-color 0.25s ease, color 0.25s ease;
	width: 100%;
}

.ta-room-slide__media-action {
	cursor: pointer;
	font-family: var(--ta-serif-jp);
	font-size: var(--ta-font-s);
	letter-spacing: 0.08em;
	/* 「（準備中）」分まで1行で収める */
	max-width: 280px;
	white-space: nowrap;
}

.ta-life-card__link,
.ta-feature-card__link {
	font-family: var(--ta-serif);
	font-size: var(--ta-font-m);
	letter-spacing: 0.08em;
	white-space: nowrap;
}

a.ta-life-card__link,
a.ta-feature-card__link {
	cursor: pointer;
}

/* 文字記号ではなく Lucide SVG を mask で塗る（色は currentColor） */
.ta-room-slide__media-action::after,
.ta-life-card__link::after,
.ta-feature-card__link::after {
	background-color: currentColor;
	content: "";
	display: inline-block;
	flex-shrink: 0;
	height: 1em;
	margin-left: 24px;
	mask: url("./assets/icons/plus.svg") no-repeat center / contain;
	-webkit-mask: url("./assets/icons/plus.svg") no-repeat center / contain;
	transition: transform 0.25s ease;
	width: 1em;
}

.ta-life-card__link::after,
.ta-feature-card__link::after {
	margin-left: 12px;
	mask-image: url("./assets/icons/arrow-right.svg");
	-webkit-mask-image: url("./assets/icons/arrow-right.svg");
}

.ta-room-slide__media-action:hover,
a.ta-life-card__link:hover,
a.ta-feature-card__link:hover {
	border-color: var(--ta-accent);
	color: var(--ta-accent);
}

.ta-room-slide__media-action:hover::after {
	transform: rotate(90deg);
}

a.ta-life-card__link:hover::after,
a.ta-feature-card__link:hover::after {
	transform: translateX(3px);
}

.ta-room-slide__media-action:focus-visible,
a.ta-life-card__link:focus-visible,
a.ta-feature-card__link:focus-visible {
	outline: 2px solid var(--ta-accent);
	outline-offset: 4px;
}

/* Rooms の縦動画は、埋め込み先だけ差し替えられる9:16のダイアログで再生する。 */
.ta-room-media-dialog {
	align-items: center;
	background: transparent;
	border: 0;
	box-sizing: border-box;
	height: 100vh;
	inset: 0;
	justify-items: center;
	margin: 0;
	max-height: none;
	max-width: none;
	overflow: auto;
	padding: 24px;
	position: fixed;
	width: 100vw;
}

.ta-room-media-dialog[open] {
	display: grid;
}

@supports (height: 100dvh) {
	.ta-room-media-dialog {
		height: 100dvh;
	}
}

.ta-room-media-dialog::backdrop {
	background: rgba(20, 24, 22, .72);
}

.ta-room-media-dialog__panel {
	background: #111;
	box-shadow: 0 24px 72px rgba(0, 0, 0, .36);
	left: 50%;
	position: fixed;
	top: max(24px, env(safe-area-inset-top));
	transform: translateX(-50%);
	width: min(380px, calc(100vw - 48px), calc((100vh - 48px) * .5625));
}

@supports (height: 100dvh) {
	.ta-room-media-dialog__panel {
		width: min(380px, calc(100vw - 48px), calc((100dvh - 48px) * .5625));
	}
}

.ta-room-media-dialog__frame {
	aspect-ratio: 9 / 16;
	overflow: hidden;
	width: 100%;
}

.ta-room-media-dialog__content,
.ta-room-media-dialog__content :is(video, iframe) {
	display: block;
	height: 100%;
	width: 100%;
}

.ta-room-media-dialog__content :is(video, iframe) {
	border: 0;
	object-fit: cover;
}

.ta-room-media-dialog__close {
	align-items: center;
	appearance: none;
	background: rgba(20, 24, 22, .88);
	border: 1px solid rgba(255, 255, 255, .58);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	height: 40px;
	justify-content: center;
	padding: 0;
	position: fixed;
	right: max(24px, env(safe-area-inset-right));
	top: max(24px, env(safe-area-inset-top));
	width: 40px;
	z-index: 1;
}

.ta-room-media-dialog__close::before {
	background-color: currentColor;
	content: "";
	display: block;
	height: 18px;
	mask: url("./assets/icons/x.svg") no-repeat center / contain;
	-webkit-mask: url("./assets/icons/x.svg") no-repeat center / contain;
	width: 18px;
}

.ta-room-media-dialog__close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* 動画のURL・埋め込みは編集元として残し、公開画面ではモーダルだけを見せる。 */
.ta-room-media-source {
	display: none;
}

.ta-room-slide__type {
	font-family: var(--ta-serif-jp);
	font-size: clamp(28px, 3.4vw, 40px);
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.15;
	margin: 0 0 16px;
}

/* 専有面積など、部屋カード内の地の文 */
.ta-room-slide__copy {
	border-bottom: 1px solid var(--ta-line);
	border-top: 1px solid var(--ta-line);
	color: var(--ta-ink);
	font-size: var(--ta-font-m);
	letter-spacing: 0.04em;
	line-height: 1.7;
	margin: 0 0 16px;
	padding: 12px 0;
}

/*
 * 濃い丸ボタン＋明るい矢印。下寄せ（上端だけカードに少し被る）。
 * プラグインの .wp-block-cb-carousel-v2 .cb-button-* (0,2,0) と
 * width:calc(navigation-size…) に勝たせるため要素付きで書く。
 */
.wp-block-cb-carousel-v2.ta-plugin-carousel--rooms :is(.cb-button-prev, .cb-button-next),
.wp-block-cb-carousel-v2.ta-plugin-carousel--life :is(.cb-button-prev, .cb-button-next) {
	align-items: center;
	background: var(--ta-ink);
	border: 0;
	border-radius: 50%;
	bottom: -22px;
	box-shadow: 0 2px 12px rgba(28, 27, 25, .28);
	color: var(--ta-ink-on-deep);
	cursor: pointer;
	display: inline-flex;
	height: 44px;
	justify-content: center;
	margin-top: 0;
	top: auto;
	width: 44px;
	z-index: 2;
}

.wp-block-cb-carousel-v2.ta-plugin-carousel--rooms :is(.cb-button-prev, .cb-button-next)::after,
.wp-block-cb-carousel-v2.ta-plugin-carousel--life :is(.cb-button-prev, .cb-button-next)::after {
	font-size: 16px;
}

/* 右矢印は「次へ」の合図として少し大きくする */
.wp-block-cb-carousel-v2.ta-plugin-carousel--rooms .cb-button-next,
.wp-block-cb-carousel-v2.ta-plugin-carousel--life .cb-button-next {
	height: 48px;
	right: 10px;
	width: 48px;
}

.wp-block-cb-carousel-v2.ta-plugin-carousel--rooms .cb-button-prev,
.wp-block-cb-carousel-v2.ta-plugin-carousel--life .cb-button-prev {
	left: 10px;
}

.wp-block-cb-carousel-v2.ta-plugin-carousel--rooms :is(.cb-button-prev, .cb-button-next):hover,
.wp-block-cb-carousel-v2.ta-plugin-carousel--life :is(.cb-button-prev, .cb-button-next):hover {
	background: #2c2a27;
	color: var(--ta-ink-on-deep);
}

.wp-block-cb-carousel-v2.ta-plugin-carousel--rooms :is(.cb-button-prev, .cb-button-next):focus-visible,
.wp-block-cb-carousel-v2.ta-plugin-carousel--life :is(.cb-button-prev, .cb-button-next):focus-visible {
	outline: 2px solid var(--ta-ink-on-deep);
	outline-offset: 3px;
}

/* 表示されたとき右矢印だけ横に2回動かし、スワイプできることを気づかせる */
@keyframes ta-carousel-next-nudge {
	0%,
	100% {
		transform: translateX(0);
	}

	35% {
		transform: translateX(6px);
	}

	70% {
		transform: translateX(0);
	}
}

.ta-js .wp-block-cb-carousel-v2.ta-plugin-carousel--rooms.is-visible .cb-button-next:not(.swiper-button-disabled),
.ta-js .wp-block-cb-carousel-v2.ta-plugin-carousel--life.is-visible .cb-button-next:not(.swiper-button-disabled) {
	animation: ta-carousel-next-nudge 1.05s ease-in-out .35s 2;
}

/* 端で disabled が付く場合（loop:false など）は操作を止める。rooms は loop:true。 */
.wp-block-cb-carousel-v2.ta-plugin-carousel--rooms .swiper-button-disabled,
.wp-block-cb-carousel-v2.ta-plugin-carousel--life .swiper-button-disabled {
	cursor: default;
	opacity: .28;
	pointer-events: none;
}

/* 4・3枚の通常paginationは、プラグイン標準のbulletをそのまま使う。 */
.ta-plugin-carousel--rooms .cb-pagination,
.ta-plugin-carousel--life .cb-pagination {
	display: flex;
	justify-content: center;
}

.ta-plugin-carousel--rooms .cb-pagination-bullet,
.ta-plugin-carousel--life .cb-pagination-bullet {
	transition: opacity .2s ease, background-color .2s ease;
}

/* 7枚以上でJSアダプターがclassを付けた場合だけ、数字カウンターへ切り替える。
 * プラグインの .wp-block-cb-carousel-v2 .cb-pagination.swiper-pagination-horizontal (0,3,0)
 * に勝たせるため、同詳細度以上にする。 */
.wp-block-cb-carousel-v2.ta-plugin-carousel--counter .cb-pagination {
	display: none;
}

.ta-plugin-carousel__counter {
	bottom: -34px;
	color: var(--ta-ink);
	font-size: var(--ta-font-xs);
	left: 50%;
	letter-spacing: .12em;
	line-height: 1;
	position: absolute;
	transform: translateX(-50%);
	white-space: nowrap;
}

/*
 * Rooms：カウンター直下の「一覧で見る」。
 * カウンターが bottom:-34px なので、それより下に来る余白を確保する。
 */
.ta-rooms__all-link {
	margin: 52px 0 0;
	text-align: center;
}

.ta-rooms__all-link a {
	align-items: center;
	border-bottom: 1px solid currentColor;
	color: inherit;
	display: inline-flex;
	font-family: var(--ta-serif-jp);
	font-size: var(--ta-font-m);
	justify-content: center;
	letter-spacing: 0.08em;
	line-height: 1;
	min-height: 44px;
	padding: 10px 2px 9px;
	text-decoration: none;
	transition: border-color 0.25s ease, color 0.25s ease;
}

.ta-rooms__all-link a::after {
	background-color: currentColor;
	content: "";
	display: inline-block;
	flex-shrink: 0;
	height: 1em;
	margin-left: 12px;
	mask: url("./assets/icons/arrow-right.svg") no-repeat center / contain;
	-webkit-mask: url("./assets/icons/arrow-right.svg") no-repeat center / contain;
	transition: transform 0.25s ease;
	width: 1em;
}

@media (hover: hover) and (pointer: fine) {
	.ta-rooms__all-link a:hover {
		border-color: var(--ta-accent);
		color: var(--ta-accent);
	}

	.ta-rooms__all-link a:hover::after {
		transform: translateX(3px);
	}
}

.ta-rooms__all-link a:focus-visible {
	outline: 2px solid var(--ta-accent);
	outline-offset: 4px;
}

/* ---------- 4-6. Location & Life：周辺の注目情報と一覧へ効く ---------- */
/*
 * カルーセル操作部の共通見た目は 4-5。ここでは暗い帯向けの色とカード中身。
 * カード内: 見出し全幅 → 下段は左1/2画像(4:5) + 右1/2本文。
 * 左余白は padding のまま。画像をカード幅の半分程度まで広げて見せる。
 */
.ta-plugin-carousel--life {
	/* Location帯はメレブラック寄りなので、paginationだけ明るい側へ */
	--wp--custom--carousel-block--pagination-bullet-active-color: var(--ta-ink-on-deep);
	--wp--custom--carousel-block--pagination-bullet-color: var(--ta-line-on-deep);
	--wp--custom--carousel-block--pagination-bullet-inactive-color: var(--ta-line-on-deep);
	margin: 0;
	min-width: 0;
}

.ta-life-card {
	align-items: start;
	background: var(--ta-card-bgcolor);
	border: 1px solid var(--ta-line);
	color: var(--ta-ink);
	display: grid;
	gap: 14px 16px;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-rows: auto 1fr auto;
	margin: 0;
	padding: 20px;
}

.ta-life-card__title {
	grid-column: 1 / -1;
	grid-row: 1;
}

.ta-life-card__media {
	aspect-ratio: 4 / 5;
	grid-column: 1;
	grid-row: 2 / 4;
	margin: 0;
	min-width: 0;
	width: 100%;
}

.ta-life-card__copy {
	color: var(--ta-ink);
	font-size: var(--ta-font-m);
	letter-spacing: .04em;
	line-height: 1.8;
	margin: 0;
	min-width: 0;
	grid-column: 2;
	grid-row: 2;
}

.ta-life-card__action {
	align-self: end;
	grid-column: 2;
	grid-row: 3;
	margin: 0;
	min-width: 0;
}

/* 周辺施設表：旧リストの「下線だけの行」感を table で引き継ぐ */
.ta-location__category {
	color: var(--ta-ink-on-deep);
	margin: 40px 0 0;
}

.ta-location__category + .ta-location__table,
.ta-location .ta-location__category + .wp-block-table {
	margin-top: 8px;
}

.ta-location .wp-block-table.ta-location__table + .ta-location__category {
	margin-top: 32px;
}

.ta-location .wp-block-table {
	margin: 0;
	overflow-x: visible;
}

.ta-location .wp-block-table table {
	border-collapse: collapse;
	color: var(--ta-ink-on-deep);
	font-size: var(--ta-font-m);
	letter-spacing: .04em;
	margin: 0;
	table-layout: fixed;
	width: 100%;
}

.ta-location .wp-block-table td {
	border: 0;
	border-bottom: 1px solid var(--ta-line-on-deep);
	padding: 16px 0;
	text-align: left;
	vertical-align: top;
	word-break: break-word;
}

/* 施設名列を広め、距離列は折り返しにくい幅を確保 */
.ta-location .wp-block-table td:first-child {
	padding-right: 16px;
	width: 58%;
}

.ta-location .wp-block-table td:last-child {
	width: 42%;
}

.ta-location__note {
	color: var(--ta-ink-on-deep);
	font-size: var(--ta-font-xs);
	letter-spacing: .04em;
	line-height: 1.8;
	margin: 28px 0 0;
	opacity: .78;
}

/* ---------- 4-7. Map：地図を独立して読みやすくするために効く ---------- */
/* 地図だけ本文幅を絞り、デスクトップで周囲の余白を一段深くする。 */
.ta-map .ta-section__inner {
	max-width: 1160px;
}

/*
 * 将来のStreet View追加に備えた2カラム。
 * 公開待ちの間は右カラムと小見出しを隠し、現在の地図を全幅のまま保つ。
 */
.ta-map__layout {
	display: grid;
	gap: 32px;
	margin-bottom: 0;
}

.ta-map__panel {
	min-width: 0;
}

.ta-map__panel-title {
	font-family: var(--ta-serif-jp);
	font-size: var(--ta-font-l);
	font-weight: 400;
	letter-spacing: .06em;
	margin: 0 0 16px;
}

.ta-map__placeholder {
	align-items: center;
	background: var(--ta-bg);
	border: 1px dashed var(--ta-line);
	display: flex;
	justify-content: center;
	min-height: 240px;
	padding: 28px;
	text-align: center;
}

.ta-map__placeholder p {
	color: var(--ta-ink);
	font-size: var(--ta-font-s);
	line-height: 1.8;
	margin: 0;
}

.ta-map--streetview-pending .ta-map__layout {
	display: block;
}

.ta-map--streetview-pending .ta-map__panel-title,
.ta-map--streetview-pending .ta-map__panel--streetview {
	display: none;
}

.ta-map__embed {
	aspect-ratio: 16 / 10;
	background: #e8e6e0;
	border-radius: 0;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.ta-map__embed iframe {
	border: 0;
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

/* ---------- 4-8. Equipment：設備一覧の開閉と比較しやすさへ効く ---------- */
.ta-equipment__list {
	display: grid;
	gap: 10px;
}

.ta-equipment details {
	background: var(--ta-card-bgcolor);
	border: 1px solid var(--ta-line);
	color: var(--ta-ink);
}

.ta-equipment summary {
	align-items: center;
	color: var(--ta-ink);
	cursor: pointer;
	display: flex;
	font-family: var(--ta-serif-jp);
	font-size: var(--ta-font-l);
	gap: 12px;
	justify-content: space-between;
	list-style: none;
	padding: 18px 20px;
}

.ta-equipment summary::-webkit-details-marker {
	display: none;
}

.ta-equipment summary::after {
	background-color: currentColor;
	content: "";
	display: block;
	flex-shrink: 0;
	height: 1em;
	mask: url("./assets/icons/plus.svg") no-repeat center / contain;
	-webkit-mask: url("./assets/icons/plus.svg") no-repeat center / contain;
	width: 1em;
}

.ta-equipment details[open] summary::after {
	mask-image: url("./assets/icons/minus.svg");
	-webkit-mask-image: url("./assets/icons/minus.svg");
}

/* details直下の2つ目以降にArkheが付ける margin-top より詳細度を上げ、アコーディオン内はpaddingだけで余白を取る。 */
.ta-equipment details > .ta-equipment__items {
	/* Locationカード本文と同じ字色 */
	color: var(--ta-ink);
	display: grid;
	font-size: var(--ta-font-m);
	gap: 8px;
	line-height: 1.8;
	list-style: none;
	margin: 0;
	padding: 0 20px 20px;
}

/* ---------- 4-9. Outline：物件概要の表を白地で読むために効く ---------- */
.ta-outline__layout {
	display: grid;
	/* 1カラム時の縦間隔は head の margin-bottom に任せ、余計な gap を足さない */
	gap: 0;
	grid-template-columns: 1fr;
}

.ta-outline__heading {
	font-size: clamp(50px, 7vw, 92px);
	line-height: 0.85;
}

.ta-outline .wp-block-table {
	margin: 0;
}

/* 表の基本 → セル共通 → 左列（項目名）→ 右列（値） */
.ta-outline table {
	border-collapse: collapse;
	font-size: var(--ta-font-m);
	margin: 0;
	width: 100%;
}

.ta-outline th,
.ta-outline td {
	border-bottom: 1px solid var(--ta-line);
	color: var(--ta-ink);
	padding: 18px 0;
	text-align: left;
}

/*
	左列は項目名。編集画面で行追加すると WordPress が th ではなく td を出すことがあり、
	親テーマの th 背景だけだと新規行だけ見た目が外れる。タグに依存せず先頭セルをラベル扱いする。
*/
.ta-outline table tr > *:first-child {
	background: var(--ark-color--gray, #f7f7f7);
	font-family: var(--ta-serif-jp);
	font-weight: 600;
	letter-spacing: 0.06em;
	width: 34%;
}

.ta-outline table tr > *:not(:first-child) {
	letter-spacing: 0.04em;
}

/* ---------- 4-10. 問い合わせ導線（Contact） ---------- */
.ta-contact {
	padding: clamp(72px, 9vw, 128px) var(--ta-side-space);
	text-align: center;
}

.ta-contact__eyebrow {
	font-size: var(--ta-font-xs);
	letter-spacing: 0.24em;
	margin: 0 0 34px;
	text-transform: uppercase;
}

.ta-contact__heading {
	font-size: clamp(58px, 9vw, 130px);
	margin: 0 0 46px;
}

.ta-contact__copy {
	/* 締めセクションは見出しと同じ字色にそろえる */
	color: inherit;
	margin: 0 auto 42px;
	max-width: 620px;
	text-align: left;
}

/* Contact CTA：標準 Gutenberg Button。黒背景向けの白系アウトライン */
.ta-contact .wp-block-buttons {
	display: flex;
	justify-content: center;
	margin: 0;
}

.ta-contact__button {
	box-sizing: border-box;
	margin: 0;
	width: min(100%, 320px);
}

/* .wp-element-button まで含めて、テーマ／Gutenbergのボタン塗りつぶしに勝たせる */
.ta-contact .ta-contact__button .wp-block-button__link.wp-element-button {
	align-items: center;
	background: transparent;
	border: 1px solid rgba(244, 242, 236, 0.48);
	border-radius: 0;
	box-sizing: border-box;
	color: var(--ta-ink-on-deep);
	display: inline-flex;
	font-family: var(--ta-sans);
	font-size: var(--ta-font-m);
	justify-content: center;
	letter-spacing: 0.08em;
	line-height: 1.45;
	min-height: 52px;
	padding: 16px 28px;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
	width: 100%;
}

.ta-contact .ta-contact__button .wp-block-button__link.wp-element-button::after {
	background-color: currentColor;
	content: "";
	display: inline-block;
	flex-shrink: 0;
	height: 1em;
	margin-left: 0.75em;
	mask: url("./assets/icons/arrow-right.svg") no-repeat center / contain;
	-webkit-mask: url("./assets/icons/arrow-right.svg") no-repeat center / contain;
	transition: transform 0.25s ease;
	vertical-align: -0.12em;
	width: 1em;
}

@media (hover: hover) and (pointer: fine) {
	.ta-contact .ta-contact__button .wp-block-button__link.wp-element-button:hover {
		background: var(--ta-ink-on-deep);
		border-color: var(--ta-ink-on-deep);
		color: var(--ta-ink);
	}

	.ta-contact .ta-contact__button .wp-block-button__link.wp-element-button:hover::after {
		transform: translateX(3px);
	}
}

.ta-contact .ta-contact__button .wp-block-button__link.wp-element-button:focus-visible {
	outline: 2px solid var(--ta-ink-on-deep);
	outline-offset: 4px;
}

/* =========================================================
 * 5. 動き・レスポンシブ
 * スクロール出現と、画面幅に応じたレイアウト調整
 * ========================================================= */

/* ---------- 5-1. スクロール表示アニメーション ---------- */
/*
	画面に入ったら、下から28px上がりながらフワッと出てくる動き。
	JSは「画面に入ったら .is-visible を付ける」だけを担当し、動き方はここで決める。
	.ta-reveal は一塊に見えるいちばん外側だけに付ける（中の見出し・段落には付けない）。

	--- なぜ transition ではなく @keyframes なのか（iPhoneでカクついた対策） ---
	iPhone（Safari/Chrome/Firefox すべて中身はWebKit）は、要素を動かしている間だけ
	その要素を「別の透明シート」に描いて動かす（＝合成レイヤ）。速く動かすための仕組み。
	動きが終わるとシートを捨てて本体に描き直すが、そのとき表示位置が
	整数ピクセルに丸められる。各セクションの本来の位置は 3013.578px のような
	小数なので、描き直した瞬間に1px弱ズレる。これが「最後にカチッと留まる」の正体。

	対策は2つ。どちらも下の指定に入っている。
	1. translate3d（＋backface-visibility: hidden）を使う。
	   translateY と違い、終わったあとも「別シート」に載ったままなので描き直しが起きない。
	   終了状態も translate3d(0, 0, 0) にしておくのが肝心（translateY(0) に戻すと元に戻る）。
	2. opacity と transform を @keyframes の1本にまとめ、同じ緩急カーブで着地させる。
	   別々の transition に分けても時間がズレるわけではないが、カーブが違うと
	   最後の一瞬だけ動きの速さが食い違い、1pxのズレがよけい目立つ。

	--- 触るときの注意 ---
	・開始状態（.ta-reveal 側）に animation / transition を書かない。
	  書くと ta-js が付いた瞬間に「表示→非表示」がアニメし、一度消えてから出てくる。
	・forwards は「終わった状態のまま止まる」指定。外すと出たあと消えるので必須。
*/
@keyframes ta-reveal-in {
	from {
		opacity: 0;
		transform: translate3d(0, 28px, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

/* 出てくる前の状態。ここには動きの指定を書かない */
.ta-js .ta-reveal {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	opacity: 0;
	transform: translate3d(0, 28px, 0);
}

/* JSが .is-visible を付けた瞬間に動き出す */
.ta-js .ta-reveal.is-visible {
	animation: ta-reveal-in 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

/* ---------- 5-2. 広い画面向けレイアウト ---------- */
@media (min-width: 720px) {
	/* Features */
	.ta-home .ta-feature-grid.is-layout-flex {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ta-home .ta-feature-grid--secondary.is-layout-flex {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Rooms：タブレットからは画像と概要を横並びにし、4:3画像の実寸高を抑える */
	.ta-room-slide__layout {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
	}

	/* Map */
	.ta-map__layout {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Equipment */
	.ta-equipment__items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 960px) {
	:root {
		--ta-font-xs: var(--ta-font-xs-pc-view);
		--ta-font-s: var(--ta-font-s-pc-view);
		--ta-font-m: var(--ta-font-m-pc-view);
		--ta-font-l: var(--ta-font-l-pc-view);
	}

	/* About本文：見出しとの左ずれはスマホと同じ12px。行長だけPC向けに広げる */
	.ta-about .ta-copy {
		margin-inline-start: 12px;
		max-width: min(66.666vw, 56rem);
	}

	/* Features */
	.ta-home .ta-feature-grid.is-layout-flex {
		gap: 28px;
	}

	/* Rooms */
	.ta-room-slide {
		padding: clamp(24px, 3vw, 42px);
	}

	/* Equipment */
	.ta-equipment__items {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Outline：見出しと表を横並び。間隔は横方向だけ */
	.ta-outline__layout {
		align-items: start;
		gap: clamp(40px, 6vw, 96px);
		grid-template-columns: minmax(220px, .55fr) minmax(0, 1.45fr);
	}

	.ta-outline__head {
		margin-bottom: 0;
	}
}

/* Features：3列のまま見出しが折り返す中間幅では、画像の開始位置を2行分で揃える */
@media (min-width: 720px) and (max-width: 1279px) {
	.ta-feature-grid:not(.ta-feature-grid--secondary) .ta-feature-card__title {
		min-block-size: 2.9em;
	}
}

/* ---------- 5-3. PCからタブレットへのヘッダー調整 ---------- */
@media (max-width: 1100px) {
	.c-gnav {
		gap: 14px;
	}

	/* 1000〜1100pxだけは、メニューを1行へ収めるためのヘッダー専用サイズ */
	.c-gnav__a {
		font-size: 0.6875rem;
		letter-spacing: 0.14em;
	}
}

/* ---------- 5-4. ArkheのSP境界に合わせたメニューボタン ---------- */
@media (max-width: 999px) {
	.l-header[data-btns="l-r"] .l-header__body {
		grid-template-areas: "center menu" !important;
		grid-template-columns: 1fr 40px !important;
	}

	/* タブレット幅でも中央寄せを確実に解除（ArkheのSP用center指定より後で勝たせる） */
	.l-header__center {
		justify-self: stretch;
		text-align: left;
		width: 100%;
	}

	.l-header__logo,
	.l-header[data-logo="left"] .l-header__logo {
		justify-content: flex-start;
		width: 100%;
	}

	.l-header__drawerBtn {
		justify-self: end;
	}
}

/* ---------- 5-5. タブレット・スマートフォン ---------- */
@media (max-width: 959px) {
	:root {
		--ta-header-height: 64px;
		/*
		 * スマホはフル画面ヒーローにしない。縦長すぎるので一段短く。
		 * 中央値は site.js が初回の innerHeight×44% を --ta-mobile-hero-height に固定する。
		 * （iOSのBrave/Operaはアドレスバー伸縮で svh が動くため。JSオフ時は 44svh にフォールバック）
		 */
		--ta-hero-height: clamp(300px, var(--ta-mobile-hero-height, 44svh), 420px);
		--ta-side-space: var(--ta-side-space-compact);
		--ta-section-space: var(--ta-section-space-compact);
	}

	/* About本文：タブレットも見出しとの左ずれはスマホと同じ12px。中央寄せしない */
	.ta-about .ta-copy {
		margin-inline-start: 12px;
		text-align: left;
	}

	.l-header {
		background: rgba(247, 245, 241, 0.98);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	.l-header__body {
		height: var(--ta-header-height);
	}

	/* スマホ・タブレットはロゴ文字を本文サイズに戻す（書体はそのまま） */
	.l-header__logo.has-text .c-headLogo {
		font-size: var(--ta-font-m);
	}

	.wp-block-cover.ta-hero .wp-block-cover__inner-container {
		padding: 48px var(--ta-side-space) 8px;
	}

	.ta-hero__content {
		align-items: flex-start;
		flex-direction: column;
		justify-content: flex-end;
	}

	.ta-hero__title {
		font-size: clamp(62px, 17vw, 112px);
		line-height: 0.72;
	}

	.ta-local-nav .ta-local-nav__item {
		flex: 0 0 33.333%;
		max-width: 33.333%;
		min-height: 92px;
		min-width: 0;
		padding: 18px 8px 20px;
	}

	.ta-local-nav__en {
		font-size: clamp(18px, 5.2vw, 24px);
	}

	/* タブレットだけ地図の左右余白を増やし、スマホは共通余白のままにする。 */
	.ta-map {
		padding-inline: 38px;
	}

}

/* ---------- 5-6. 小さいスマートフォン ---------- */
@media (max-width: 600px) {
	.ta-map {
		padding-inline: var(--ta-side-space);
	}

	/*
	 * Features〜Outline：上余白だけ一段狭く。下は共通のまま。
	 * About / Contact は対象外。
	 */
	.ta-home :is(.ta-features, .ta-rooms, .ta-location, .ta-map, .ta-equipment, .ta-outline) {
		padding-top: 48px;
	}

	.ta-heading {
		font-size: var(--ta-font-h2-compact);
	}

	/*
	 * H2下の余白は共通の clamp(24px, 3.5vw, 46px) を使う。
	 * 以前の 50px 固定はスマホだけ広すぎたので上書きしない。
	 */

	/* Swiperの計算幅を縮めて、次カードを自然な操作ヒントとして残す。 */
	.ta-plugin-carousel--rooms .swiper,
	.ta-plugin-carousel--life .swiper {
		padding-inline-end: calc(14% + 16px);
	}

	/* スマホは丸ボタンを1段階小さく。下寄せのままサイズだけ落とす */
	.wp-block-cb-carousel-v2.ta-plugin-carousel--rooms :is(.cb-button-prev, .cb-button-next),
	.wp-block-cb-carousel-v2.ta-plugin-carousel--life :is(.cb-button-prev, .cb-button-next) {
		height: 36px;
		width: 36px;
	}

	.wp-block-cb-carousel-v2.ta-plugin-carousel--rooms .cb-button-next,
	.wp-block-cb-carousel-v2.ta-plugin-carousel--life .cb-button-next {
		height: 40px;
		width: 40px;
	}

	.wp-block-cb-carousel-v2.ta-plugin-carousel--rooms :is(.cb-button-prev, .cb-button-next)::after,
	.wp-block-cb-carousel-v2.ta-plugin-carousel--life :is(.cb-button-prev, .cb-button-next)::after {
		font-size: 14px;
	}

	/* Rooms は写真のまわりだけを細く囲み、説明側を短く保つ。 */
	.ta-plugin-carousel--rooms .ta-room-slide {
		overflow: hidden;
		padding: 12px 12px 0;
	}

	.ta-plugin-carousel--rooms .ta-room-slide__layout {
		gap: 0;
	}

	.ta-plugin-carousel--rooms .ta-room-slide__layout > .wp-block-column:last-child {
		padding: 20px 8px 22px;
	}

	/* SPでは1行を縦積み。余白は左列／右列で分ける */
	.ta-outline th,
	.ta-outline td {
		display: block;
		padding: 0;
		width: 100%;
	}

	.ta-outline table tr > *:first-child {
		border-bottom: 0;
		padding: 18px 0 0;
		width: 100%;
	}

	.ta-outline table tr > *:not(:first-child) {
		padding: 8px 0 18px;
	}

	/*
		文章は左揃えのまま、本文ブロックだけを水平方向の中央へ置く。
		スマホでは共通余白より左右12pxずつ内側にする（タイトルとのずれも12px）。
	*/
	.ta-about .ta-copy {
		margin-inline: auto;
		max-width: 620px;
	}

	.ta-about .ta-copy,
	.ta-contact__copy {
		width: calc(100% - 24px);
	}

	/* Contactボタンも本文と同じ左右インセットで横幅いっぱい */
	.ta-contact__button {
		width: calc(100% - 24px);
	}
}

@media (min-width: 601px) and (max-width: 959px) {
	/* タブレットはRooms/Lifeともに、次カードを約8%だけ見せる。 */
	.ta-plugin-carousel--rooms .swiper,
	.ta-plugin-carousel--life .swiper {
		padding-inline-end: calc(8% + 16px);
	}
}

/* =========================================================
 * 6. フロントページ以外の固定ページ・投稿（外枠のみ）
 *
 * ========================================================= */

 /* ---------- 6-1. 1枚ものLP風にするために余計なもの消す系のCSS ---------- */

/* Arkheの大きなタイトル帯・アイキャッチ帯を出さない */
body.page:not(.home) .p-topArea {
	min-height: 0;
	padding: clamp(28px, 4vw, 48px) var(--ta-side-space) 12px;
}

body.page:not(.home) .p-topArea__body {
	max-width: none;
	padding: 0;
}

body.page:not(.home) .p-topArea__img,
body.page:not(.home) .p-topArea.c-filterLayer::before {
	display: none;
}

/* 固定ページ本文の外枠。幅はフロントページと共通変数を使う */
body.page:not(.home) .l-main__body {
	margin: 0 auto;
	max-width: var(--ta-content-max-width);
	padding: clamp(28px, 5vw, 56px) var(--ta-side-space) clamp(64px, 8vw, 120px);
}

/* ブログ型の部品は出さない（パンくずは functions.php 側でも無効化） */
:is(body.single, body.page:not(.home)):has(.ta-article) .p-entry__meta,
:is(body.single, body.page:not(.home)):has(.ta-article) .c-postMetas,
:is(body.single, body.page:not(.home)):has(.ta-article) .p-pnNav,
:is(body.single, body.page:not(.home)):has(.ta-article) .c-pnNav,
:is(body.single, body.page:not(.home)):has(.ta-article) .p-entry__foot,
:is(body.single, body.page:not(.home)):has(.ta-article) #comments,
:is(body.single, body.page:not(.home)):has(.ta-article) .comments-area,
body.page:not(.home) .p-entry__meta {
	display: none;
}

/* はみ出し防止。見た目の装飾はしない */
:is(body.single, body.page:not(.home)):has(.ta-article) .c-postContent .wp-block-image,
body.page:not(.home) .c-postContent .wp-block-image {
	max-width: 100%;
}

:is(body.single, body.page:not(.home)):has(.ta-article) .c-postContent .wp-block-image img,
body.page:not(.home) .c-postContent .wp-block-image img {
	display: block;
	height: auto;
	max-width: 100%;
}

/* ---------- 6-2. 記事型ページ（投稿・非フロント固定。本文に .ta-article） ---------- */
/* 記事を白い一枚面で見せ、中央の読み幅と余白だけで本文の流れを整える。 */
:is(body.single, body.page:not(.home)):has(.ta-article) {
	background: #fff;
}

/*
 * 記事型のヘッダーはサイト名だけを残す。
 * ABOUT 等のセクションナビ（.l-header__right）は出さない。HTMLは共通のまま CSS で隠す。
 */
:is(body.single, body.page:not(.home)):has(.ta-article) .l-header__right {
	display: none;
}

:is(body.single, body.page:not(.home)):has(.ta-article) .l-main__body {
	margin: 0 auto;
	max-width: none;
	/* 外側の上下余白はArkheの .l-content__body に任せ、ここでは左右だけを確保する */
	padding: 0 var(--ta-side-space);
}

/*
 * テーマが出すタイトルは隠す。
 * 表示用タイトルは本文の h1.ta-article__title（common-design.css）を使う。
 * 投稿・固定ページとも同じ。
 */
:is(body.single, body.page:not(.home)):has(.ta-article) .p-entry__head,
:is(body.single, body.page:not(.home)):has(.ta-article) .p-page__title {
	display: none;
}

/* 本文だけ読み幅で中央揃え */
:is(body.single, body.page:not(.home)):has(.ta-article) .c-postContent {
	box-sizing: border-box;
	/* 非表示にしたArkheタイトルの後へ残る上下4remを消す */
	margin: 0 auto;
	max-width: 720px;
	padding: 0;
	width: 100%;
}

/*
 * お部屋一覧：間取り図を並べるので記事より幅を広げる。
 * 見出しスタイルは .ta-article 共通のまま。
 */
:is(body.page:not(.home)):has(.ta-allrooms) .c-postContent {
	max-width: 960px;
}

/* ---------- 6-3. お部屋一覧（固定ページ /allrooms/） ---------- */
/*
 * スライダーなし。薄い区切り線だけの縦積み。
 * スマホは図→情報の1列、PCは図＋情報の2列行。
 */
.ta-room-list {
	margin: 0;
}

.ta-room-list__item {
	border-bottom: 1px solid var(--ta-line);
	margin: 0;
	padding: clamp(28px, 4vw, 44px) 0;
}

/* 見出し下の区切りは h1.ta-article__title の border-bottom だけにする */

.ta-room-list__layout {
	align-items: center;
	display: grid !important;
	gap: clamp(20px, 3vw, 40px);
	grid-template-columns: 1fr;
	margin: 0;
}

.ta-room-list__layout > .wp-block-column {
	margin: 0;
	width: 100% !important;
}

.ta-room-list__media {
	aspect-ratio: 4 / 3;
	margin: 0;
	overflow: hidden;
}

.ta-room-list__media img {
	display: block;
	height: 100%;
	object-fit: contain;
	width: 100%;
}

.ta-room-list__type {
	font-family: var(--ta-serif-jp);
	font-size: clamp(24px, 5.6vw, 36px);
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.2;
	margin: 0 0 14px;
}

.ta-room-list__copy {
	border-bottom: 1px solid var(--ta-line);
	border-top: 1px solid var(--ta-line);
	color: var(--ta-ink);
	font-family: var(--ta-sans);
	font-size: var(--ta-font-m);
	letter-spacing: 0.04em;
	line-height: 1.7;
	margin: 0 0 16px;
	padding: 12px 0;
}

/* 準備中：見た目は導線風だが押させない（buttonにしない） */
.ta-room-list__media-note {
	align-items: center;
	border-bottom: 1px solid var(--ta-line);
	box-sizing: border-box;
	color: var(--ta-ink);
	display: inline-flex;
	font-family: var(--ta-serif-jp);
	font-size: var(--ta-font-s);
	justify-content: space-between;
	letter-spacing: 0.08em;
	line-height: 1;
	margin: 0;
	max-width: 260px;
	min-height: 44px;
	opacity: 0.45;
	padding: 10px 0 9px;
	pointer-events: none;
	user-select: none;
	width: 100%;
}

@media (min-width: 960px) {
	.ta-room-list__layout {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	}
}