/* =================================================================
   akiyato.jp /life/ 修正パッチ（2026/05/20-21）
   設置: /wp-content/themes/akiyato-hotel/css/akiyato-patch-20260520.css
   読込: functions.php に enqueue 追記
   ================================================================= */


/* ==================================================================
   [Figma指示書 A] hero テキストブロック Chrome/Safari差異 → 完全中央配置
   ================================================================== */
.owners_mv-box {
	position: relative !important;
}
.owners_mv-box .text-box {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	width: 100% !important;
	max-width: 90% !important;
	text-align: center !important;
	z-index: 2 !important;
}
.owners_mv-box .mv__midashi h1,
.owners_mv-box .mv__midashi p,
.owners_mv-box .mv__midashi .mv_logo {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* [Figma指示書 B + 鉄さん指示]
   hero h1/p サイズ比率1.5を完全維持＋横幅追従
   CSS変数で base size 定義 → h1 = base * 1.5 で連動 */
.owners_mv-box {
	--hero-base: clamp(1.2rem, 1.5vw, 1.6rem);
}
.owners_mv-box .mv__midashi p {
	font-size: var(--hero-base) !important;
	line-height: 1.9 !important;
}
.owners_mv-box .mv__midashi h1 {
	font-size: calc(var(--hero-base) * 1.5) !important;
}

/* [鉄さん指示] hero テキスト 自然改行抑止（<br>のみで改行） */
.owners_mv-box .mv__midashi h1,
.owners_mv-box .mv__midashi p {
	white-space: nowrap !important;
}

/* [鉄さん指示] ボタン文字の自然改行抑止 */
.toppage_creators .btn,
.toppage_owners .btn,
.toppage_owner_seido .btn,
.toppage_owner .btn {
	white-space: nowrap !important;
}


/* ==================================================================
   [鉄さん指示3] 「今月の特集」フォントサイズ大きく
   ================================================================== */
.toppage_topics .topTitle .title_ja {
	font-size: clamp(2.4rem, 3vw, 4.0rem) !important;
}


/* ==================================================================
   [Figma指示書 C] 3アーカイブ見出し統一（Creators/Owners を Futura Std + UPPERCASE）
   ================================================================== */
.toppage_creators .topTitle .title_en,
.toppage_owners .topTitle .title_en {
	font-family: "Futura Std", "Helvetica Neue", Arial, sans-serif !important;
	font-weight: 400 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
}


/* ==================================================================
   [鉄さん指示4, 8] Creators / Owners 背景大文字「c-large-gotham」太字維持・画面右端固定
   ================================================================== */
.toppage_creators .c-large-gotham,
.toppage_owners .c-large-gotham {
	font-weight: 600 !important;
	right: 0 !important;
	left: auto !important;
}


/* ==================================================================
   [鉄さん指示6, 10] swiper-navigation の表示制御
   ・スライド1個の時は非表示（Topics等）
   ・2個以上は元style.cssの設定（画面右側 position:absolute, right:14vw, top:0）で表示
   ================================================================== */
.toppage_topics .swiper-navigation,
.toppage_creators .swiper-navigation,
.toppage_owners .swiper-navigation {
	display: none !important;
}
/* PC域(>=768px)のみ表示、SP域は元style.cssのdisplay:noneを尊重 */
@media (min-width: 768px) {
	.toppage_topics .swiper:has(.swiper-slide ~ .swiper-slide) .swiper-navigation,
	.toppage_creators .swiper:has(.swiper-slide ~ .swiper-slide) .swiper-navigation,
	.toppage_owners .swiper:has(.swiper-slide ~ .swiper-slide) .swiper-navigation {
		display: flex !important;
	}
}



/* ==================================================================
   [鉄さん指示] 737pxで段落 p が 12px→16px に急増するバグ解消
   common.cssグローバル p のメディアクエリ階段を clamp化
   対象: about / creators / owners / seido の説明文
   ================================================================== */
.owners__about p,
.toppage_creators .top_text,
.toppage_owners .top_text,
.toppage_owner_seido p {
	font-size: clamp(1.2rem, 0.5vw + 1rem, 1.6rem) !important;
}


/* ==================================================================
   [鉄さん指示] 中域(1100-1279px): 絶対配置のまま画像サイズ小さくして
   テキスト被らない範囲で配置維持
   大域(1280px以上): 通常サイズ
   ================================================================== */
@media (min-width: 1100px) {
	.owners_about_img_01,
	.owners_about_img_03 {
		width: clamp(180px, 22vw, 500px) !important;
	}
	.owners_about_img_02 {
		width: clamp(220px, 27vw, 600px) !important;
	}
}

/* [鉄さん指示] about下端〜Topics上端の余白を狭める */
.owners__about {
	padding-bottom: 80px !important;
	margin-bottom: 0 !important;
}
.toppage_topics {
	padding-top: 60px !important;
}


/* ==================================================================
   [鉄さん指示] aboutの3画像 transition:all → opacity/transformだけに絞る
   元: owners.css の transition:all 0.9s で width変化までぬるぬる
   対策: transitionプロパティをopacity/transformに限定、widthは瞬時に
   ================================================================== */
.owners_about_img_01,
.owners_about_img_02,
.owners_about_img_03 {
	transition-property: opacity, transform !important;
}
.owners__about ul li.animate__animated {
	transition-property: opacity, transform !important;
}


/* ==================================================================
   [鉄さん指示] about セクション ~1099pxは zig-zag、1100px以上は絶対配置
   ================================================================== */
@media (max-width: 1099px) {
	.owners__about ul {
		display: flex !important;
		flex-direction: column !important;
		gap: 3vw !important;
		margin: 4vw 0 0 !important;
		padding: 0 !important;
		list-style: none !important;
		position: static !important;
	}
	.owners__about ul li {
		list-style: none !important;
		margin: 0 !important;
		position: static !important;
		width: 100% !important;
		display: flex !important;
	}
	.owners__about ul li:nth-child(1) { justify-content: flex-start !important; }
	.owners__about ul li:nth-child(2) { justify-content: flex-end !important; }
	.owners__about ul li:nth-child(3) { justify-content: flex-start !important; }
	.owners_about_img_01,
	.owners_about_img_02,
	.owners_about_img_03 {
		position: relative !important;
		width: 85% !important;
		max-width: 85% !important;
		aspect-ratio: 16 / 9 !important;
		height: auto !important;
		object-fit: cover !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		bottom: auto !important;
		margin: 0 !important;
		display: block !important;
		border-radius: 4px !important;
	}
}


/* [撤回] カード幅固定320px → Swiperのスワイプ動作と衝突するため削除
   Swiperの自動計算に任せる（カード幅はviewport追従可変） */


/* ==================================================================
   [鉄さん指示] ヘッダーロゴサイズ固定（コロコロ変わる問題を解消）
   元: 12.4vw(PC) / 15vw(SP) で画面幅追従 → 完全固定で安定
   ================================================================== */
.header_logo {
	width: 140px !important;
	top: 40px !important;
	left: 20px !important;
}
.header_logo a {
	overflow: visible !important;
	width: auto !important;
}
.header_logo img {
	width: 100px !important;
	height: auto !important;
}


/* ==================================================================
   [Figma指示書 D] 「AKIYAto オーナー制度への申し込み方」スマホ改行
   HTML側に <br class="sp-break"> 挿入済
   ================================================================== */
.toppage_owner_seido .title_ja .sp-break {
	display: none;
}
@media (max-width: 1023px) {
	.toppage_owner_seido .title_ja .sp-break {
		display: inline !important;
	}
}


/* ==================================================================
   注意:
   ・[指示2] about背景大文字「AKIYATO LIFE Voice」→ 元owners.cssで表示済、何もしない
   ・[指示5] コンテンツ間余白 → 元owners.cssのまま尊重、統一化撤回
   ・[指示7, 9] ボタン横幅 → 元owners.cssのまま尊重、中央化CSS撤回
   ・[指示11] 申し込み方 改行 → HTML側に <br class="pc-only"> 挿入で対応
   ================================================================== */