/*
 * COLUMN Filer Mobile — 販促サイトのスマホ対応
 * PC の見た目は変えない。スマホ幅（767px 以下）でだけ効く。例外は案内シート（どの幅でも同じ見た目）と、
 * 大見出しの「1 行に収める・崩れずに改行する」処理（どの幅でも効く。cf-mobile.js の 4.）。
 */

/* ---------- 大見出し（セクションの大タイトル・ヒーローの大きな文字）：どの幅でも ---------- */

/* 折り返す時は各行の長さをそろえる（「〜で」だけが次の行に残るのを防ぐ）。
   日本語・中国語は句読点の後で改行し、句読点までが画面幅より長い時だけ文節の区切りで改行する */
.cfm-fit {
	text-wrap: balance;
	word-break: auto-phrase;
}
.cfm-fit:lang(ko) { word-break: keep-all; }
/* セクションの大タイトルだけ、本文の段組（900px）より広く使ってよい（最大 1400px・画面幅まで）。
   文字の大きさは最大 4.2em（1920px 幅で約 71px）まで大きくなるため、900px のままだと広い画面ほど折り返す */
.article-container .is-layout-constrained > p.cfm-fit { max-width: min(1400px, 100%) !important; }
.cfm-fit .cfm-ph,
.cfm-fit .cfm-cl { display: inline-block; max-width: 100%; }
/* 縮小用の入れ物（cf-mobile.js が font-size を em で指定する）。行の高さは見出しの指定を受け継ぐ */
.cfm-fit__in { display: inline; }
/* 折り返した見出しだけ行の高さを戻す（1 行前提の line-height:0.3 のままだと 2 行が重なる） */
.cfm-fit.cfm-fit--wrapped { line-height: 1.2 !important; }


/* ---------- 案内シート（体験版リンクをスマホで押した時） ---------- */

.cfm-sheet {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
	-webkit-text-size-adjust: 100%;
}
.cfm-sheet__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(8, 7, 14, 0.62);
	opacity: 0;
	transition: opacity 0.2s ease;
}
.cfm-sheet__panel {
	position: relative;
	width: 100%;
	max-width: 480px;
	max-height: calc(100% - 24px);
	overflow-y: auto;
	box-sizing: border-box;
	padding: 28px 22px calc(20px + env(safe-area-inset-bottom));
	border-radius: 20px 20px 0 0;
	background: #1a1826;
	color: #ecebf7;
	text-align: center;
	transform: translateY(24px);
	opacity: 0;
	transition: transform 0.22s ease, opacity 0.22s ease;
}
.cfm-sheet.is-open .cfm-sheet__backdrop { opacity: 1; }
.cfm-sheet.is-open .cfm-sheet__panel { transform: none; opacity: 1; }

.cfm-sheet.is-fullscreen { align-items: center; }
.cfm-sheet.is-fullscreen .cfm-sheet__backdrop { background: #0f0e16; }
.cfm-sheet.is-fullscreen .cfm-sheet__panel {
	border-radius: 20px;
	width: calc(100% - 32px);
	background: #1a1826;
}

.cfm-sheet__icon { color: #afafe9; margin: 0 auto 10px; line-height: 0; }
.cfm-sheet__title {
	margin: 0 0 10px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.4;
	color: #ffffff;
	letter-spacing: 0;
}
.cfm-sheet__body {
	margin: 0 0 20px;
	font-size: 14.5px;
	line-height: 1.75;
	color: #c9c7e2;
	text-align: left;
}
.cfm-sheet__actions { display: flex; flex-direction: column; gap: 10px; }
.cfm-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 10px 18px;
	box-sizing: border-box;
	border: 1px solid rgba(175, 175, 233, 0.55);
	border-radius: 999px;
	background: transparent;
	color: #ecebf7;
	font: inherit;
	font-size: 15.5px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.cfm-btn:focus-visible, .cfm-link:focus-visible { outline: 2px solid #afafe9; outline-offset: 3px; }
.cfm-btn--primary { background: #3737c8; border-color: #3737c8; color: #ffffff; }
.cfm-sheet__hint { margin: -4px 0 4px; font-size: 12.5px; line-height: 1.5; color: #9694c4; }
.cfm-sheet__status { min-height: 1.5em; margin: 12px 0 0; font-size: 13.5px; color: #afafe9; }
.cfm-sheet__url { margin: 4px 0 8px; font-size: 12.5px; word-break: break-all; }
.cfm-sheet__url a { color: #9694c4; text-decoration: underline; -webkit-user-select: all; user-select: all; }
.cfm-link.cfm-link--small { font-size: 13px; color: #9694c4; text-decoration: underline; padding: 6px 12px; }
.cfm-link {
	display: block;
	margin: 8px auto 0;
	padding: 10px 16px;
	border: 0;
	background: none;
	color: #afafe9;
	font: inherit;
	font-size: 15px;
	text-decoration: none;
	cursor: pointer;
}
html.cfm-sheet-open, html.cfm-sheet-open body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.cfm-sheet__backdrop, .cfm-sheet__panel { transition: none; }
}

/* ---------- スマホ幅のレイアウト補正 ---------- */

@media (max-width: 767px) {
	/* 見出し：文節の途中で改行しない（JS が文節ごとに包む。Chrome は auto-phrase も効く） */
	.cfm-phrase-target { word-break: auto-phrase; }
	.cfm-ph { display: inline-block; }
	/* 開いた幅より長い文節は普通に折り返す */
	.cfm-phrase-target .cfm-ph { max-width: 100%; }

	/* ヒーロー：固定ヘッダーの下から始める。縦中央寄せはやめて上から流す */
	#rd-firstview .dbp-section__inner {
		min-height: 0 !important;
		padding-top: calc(80px + env(safe-area-inset-top)) !important;
		padding-bottom: 56px !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
	#rd-firstview .dbp-section { min-height: 0 !important; }

	/* 行の高さを極端に詰めた大きな文字（PC 用の line-height:0.3）は、折り返すと重なるので戻す。
	   cf-mobile.js が見出しの大きさを書き換えると、ブラウザが style 属性を「line-height: 0.3」（空白あり）に
	   書き直すので、空白の有無どちらでも拾う（拾えないとヒーローの3行が重なる。漢字・かなで特に目立つ） */
	#rd-firstview p[style*="line-height:0.3"],
	#rd-firstview p[style*="line-height: 0.3"],
	.article-container p[style*="line-height:0.3"],
	.article-container p[style*="line-height: 0.3"] {
		line-height: 1.2 !important;
	}
	/* ヒーロー3行の行の高さ。1.2 では行どうしが触れる（漢字・かなは特に）。行の間をどの言語も約 16〜22px にそろえる：
	   欧文は 1.4、字形が上下いっぱいまである日本語・中国語・韓国語は 1.6。
	   JS が付けるクラスではなく最初の HTML にある指定で拾い、読み込み直後から同じ行間にする（後から変わると下がずれる） */
	#rd-firstview p[style*="4.2em)"] { line-height: 1.4 !important; }
	html:is([lang^="ja"], [lang^="zh"], [lang^="ko"]) #rd-firstview p[style*="4.2em)"] { line-height: 1.6 !important; }
	/* cf-mobile.js が見出しを縮め終わる（html に cfm-ready が付く）までは、ヒーローを折り返さない。
	   縮小後はどの言語も 1 行なので、読み込み前に 2 行→後で 1 行となって下の内容が動く（約190px）のを防ぐ。
	   縮めるのは中身だけで見出しの高さは変わらないため、読み込みの前後で縦の位置は同じ。
	   その間にはみ出す分は見出しの中で隠す（横スクロールを出さない）。JS が無効な環境（cfm-js なし）には効かない */
	html.cfm-js:not(.cfm-ready) #rd-firstview p[style*="4.2em)"] { white-space: nowrap; overflow: hidden; }
	/* ヒーローの文字とボタンは中央揃え（PC の左揃えを縮めただけに見えないように） */
	#rd-firstview .dbp-column-item:first-child { text-align: center; }
	#rd-firstview .dbp-column-item:first-child > p { text-align: center !important; }
	#rd-firstview .cf-appstore-badge { display: table; margin-left: auto; margin-right: auto; }
	#rd-firstview .cf-appstore-badge img { margin-inline: auto; }
	/* ヒーローの大きな見出しは画面幅いっぱいまで大きく（1 行に「カラムでたどる。」が収まる大きさ）。
	   ページ側の指定は font-size:clamp(…, 4.2em) の形なので「4.2em)」で拾う（以前の「font-size:4.2em」では当たらなかった） */
	#rd-firstview p[style*="4.2em)"] {
		font-size: clamp(36px, 11.6vw, 56px) !important;
		letter-spacing: -0.02em !important;
		margin-top: 0 !important;
		margin-bottom: 0.05em !important;
	}
	.article-container p[style*="4.2em)"] {
		font-size: clamp(28px, 8.4vw, 38px) !important;
	}

	/* スマホ用に切り出したスクリーンショット：PC 用の正方形トリミング（aspect-ratio・object-fit）を外して全体を見せる */
	img.cfm-mobile-image {
		aspect-ratio: auto !important;
		contain: none !important; /* WordPress が縦横比指定の画像に付ける contain:size を外す（外さないと高さ 150px に潰れる） */
		object-fit: contain !important;
		width: 100% !important;
		height: auto !important;
		border-radius: 10px !important;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
	}

	/* セクション：PC 用の「1 セクション＝画面の高さいっぱい」をやめ、中身の高さで詰める（スマホでは大きな空白になる） */
	.dbp-section.fullHeight,
	.dbp-section__inner[style*="min-height:100vh"] {
		min-height: 0 !important;
	}
	.article-container .dbp-section__inner {
		padding-top: 56px !important;
		padding-bottom: 56px !important;
	}
	/* 見出しの上下にある大きな余白（spacing 80 のグループ）も詰める */
	.article-container .dbp-section__inner > .wp-block-group[style*="spacing--80"] {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	/* セクション下端の「scroll」ボタン：スマホは指でスクロールするので出さない（中身の途中に浮いて見える） */
	.dbp-section-scrollbtn { display: none !important; }

	/* 体験版ボタン：文言が長くなるので 2 行を許し、バッジは折り返さない */
	.dbp-button-badge { white-space: nowrap; flex-shrink: 0; }
	.cfm-demo-link .dbp-button-text { line-height: 1.35; text-align: left; }
}