/**
 * OG TIMES Guide v4
 * Apple Human Interface Guidelines に沿った設計
 * - Deference: クロームを控えめにし、コンテンツを主役にする
 * - Clarity:   システムフォントによる明確な階層
 * - Depth:     階層移動を空間的な前進・後退で表現する
 */

.otg-root {
	/* ---- カラートークン（ライト） ---- */
	--otg-tint: #0F6E56;
	--otg-tint-soft: rgba(15, 110, 86, .10);
	--otg-gold-1: #FBF0CC;
	--otg-gold-2: #E6C566;
	--otg-gold-3: #C9A227;
	--otg-gold-line: #A67C00;
	--otg-gold-text: #4A3600;

	--otg-label: #1c1c1e;
	--otg-label-2: rgba(60, 60, 67, .68);
	--otg-label-3: rgba(60, 60, 67, .38);
	--otg-bg: #ffffff;
	--otg-bg-2: #f2f2f7;
	--otg-fill: rgba(120, 120, 128, .08);
	--otg-fill-2: rgba(120, 120, 128, .14);
	--otg-separator: rgba(60, 60, 67, .14);
	--otg-material: rgba(255, 255, 255, .82);
	--otg-warn-bg: rgba(255, 214, 10, .16);
	--otg-warn-line: #B8860B;
	--otg-warn-text: #6b4d00;

	/* ---- サイズ ---- */
	--otg-r-sm: 10px;
	--otg-r-md: 14px;
	--otg-r-lg: 20px;
	--otg-tap: 44px;

	--otg-ease: cubic-bezier(.32, .72, 0, 1);

	position: fixed;
	right: 16px;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	z-index: 9998;
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro JP", "SF Pro Text", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
	color: var(--otg-label);
	line-height: 1.6;
}

@media (prefers-color-scheme: dark) {
	.otg-root {
		--otg-label: #f2f2f7;
		--otg-label-2: rgba(235, 235, 245, .62);
		--otg-label-3: rgba(235, 235, 245, .32);
		--otg-bg: #1c1c1e;
		--otg-bg-2: #000000;
		--otg-fill: rgba(120, 120, 128, .20);
		--otg-fill-2: rgba(120, 120, 128, .32);
		--otg-separator: rgba(84, 84, 88, .60);
		--otg-material: rgba(30, 30, 32, .84);
		--otg-tint: #34C79A;
		--otg-tint-soft: rgba(52, 199, 154, .16);
		--otg-warn-bg: rgba(255, 214, 10, .12);
		--otg-warn-text: #ffd60a;
	}
}

.otg-root *,
.otg-root *::before,
.otg-root *::after { box-sizing: border-box; }

/* =========================================================
   ランチャー
   ========================================================= */

.otg-launcher {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 52px;
	padding: 0 22px 0 18px;
	border: 0;
	border-radius: 26px;
	background: var(--otg-tint);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .01em;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .10);
	transition: transform .28s var(--otg-ease), box-shadow .28s var(--otg-ease);
}
.otg-launcher:hover { box-shadow: 0 12px 32px rgba(0, 0, 0, .22), 0 3px 8px rgba(0, 0, 0, .12); }
.otg-launcher:active { transform: scale(.96); }
.otg-launcher svg { width: 21px; height: 21px; flex: 0 0 21px; }

.otg-root[data-otg-state="open"] .otg-launcher {
	opacity: 0;
	pointer-events: none;
	transform: scale(.9);
}

/* =========================================================
   スクリム（モバイルのシート背面）
   ========================================================= */

.otg-scrim {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .34);
	opacity: 0;
	transition: opacity .34s var(--otg-ease);
	z-index: -1;
}
.otg-scrim[hidden] { display: none; }
.otg-root[data-otg-state="open"] .otg-scrim { opacity: 1; }

/* =========================================================
   パネル
   ========================================================= */

.otg-panel {
	/* 既定はモバイルのシート表示 */
	position: fixed;
	right: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	max-height: 88dvh;
	display: flex;
	flex-direction: column;
	background: var(--otg-bg);
	border-radius: var(--otg-r-lg) var(--otg-r-lg) 0 0;
	overflow: hidden;
	box-shadow: 0 -2px 32px rgba(0, 0, 0, .22);
	transform-origin: bottom center;
	animation: otgSheetIn .44s var(--otg-ease);
	touch-action: pan-y;
}
.otg-panel[hidden] { display: none; }

/* dvh 非対応ブラウザ向け */
@supports not (height: 1dvh) {
	.otg-panel { max-height: 88vh; }
}

@keyframes otgSheetIn {
	from { transform: translateY(100%); }
	to   { transform: none; }
}
/* グラバー（シート表示のときだけ出す） */
.otg-grabber {
	display: block;
	flex: 0 0 auto;
	width: 40px;
	height: 5px;
	margin: 8px auto 2px;
	border-radius: 3px;
	background: var(--otg-label-3);
	cursor: grab;
}

/* ---- ナビゲーションバー ----
   40px / 可変 / 40px の固定グリッド。
   両端が固定幅なので、中央タイトルが何文字でも潰れない。 */

.otg-nav {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) 40px;
	align-items: center;
	gap: 8px;
	min-height: 52px;
	padding: 8px 12px;
	background: var(--otg-material);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	z-index: 3;
}

.otg-nav__back {
	grid-column: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--otg-tint);
	cursor: pointer;
	transition: background .18s var(--otg-ease);
}
.otg-nav__back:hover { background: var(--otg-fill); }
.otg-nav__back:active { opacity: .5; }
.otg-nav__back[hidden] { visibility: hidden; display: flex; }
.otg-nav__back svg { width: 22px; height: 22px; }
/* ラベルは画面には出さず、読み上げにだけ使う */
.otg-nav__back span {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.otg-nav__title {
	grid-column: 2;
	margin: 0;
	min-width: 0;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -.01em;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.otg-nav__close {
	grid-column: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--otg-fill);
	color: var(--otg-label-2);
	cursor: pointer;
	transition: background .18s var(--otg-ease);
}
.otg-nav__close:hover { background: var(--otg-fill-2); }
.otg-nav__close:active { opacity: .6; }
.otg-nav__close svg { width: 16px; height: 16px; }

/* ---- パスバー（経路） ----
   ナビバーとは別の行に置き、横スクロールさせる。
   折り返さないので、他の要素と重なることがない。 */

.otg-path {
	display: flex;
	align-items: center;
	gap: 3px;
	padding: 7px 12px 8px;
	border-bottom: .5px solid var(--otg-separator);
	background: var(--otg-material);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	overflow-x: auto;
	scrollbar-width: none;
	white-space: nowrap;
	z-index: 2;
}
.otg-path::-webkit-scrollbar { display: none; }
.otg-path[hidden] { display: none; }

.otg-path__seg {
	flex: 0 0 auto;
	max-width: 150px;
	padding: 4px 8px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: var(--otg-tint);
	font-family: inherit;
	font-size: 12.5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
	transition: background .16s var(--otg-ease);
}
.otg-path__seg:hover { background: var(--otg-fill); }
.otg-path__seg:active { opacity: .55; }
.otg-path__seg svg { width: 14px; height: 14px; vertical-align: -2px; }

.otg-path__cur {
	flex: 0 0 auto;
	max-width: 220px;
	padding: 4px 8px;
	color: var(--otg-label);
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.otg-path__sep {
	flex: 0 0 auto;
	color: var(--otg-label-3);
	font-size: 11px;
	line-height: 1;
}
.otg-path__sep svg { width: 12px; height: 12px; display: block; }

/* ---- 本文 ---- */

.otg-body {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background: var(--otg-bg);
}

.otg-screen { padding: 4px 16px 28px; }

@media (prefers-reduced-motion: no-preference) {
	.otg-screen { animation: otgFwd .42s var(--otg-ease); }
	.otg-screen.is-back { animation: otgBack .42s var(--otg-ease); }
	@keyframes otgFwd  { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
	@keyframes otgBack { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
}

/* ---- タイポグラフィ ---- */

.otg-largetitle {
	margin: 14px 0 4px;
	font-size: 25px;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.24;
}
.otg-subtitle {
	margin: 0 0 22px;
	font-size: 15px;
	color: var(--otg-label-2);
	line-height: 1.55;
}
.otg-headline {
	margin: 22px 0 10px;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.35;
}
.otg-caption {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--otg-label-2);
	text-transform: none;
}
.otg-body-text {
	margin: 12px 0 0;
	font-size: 17px;
	color: var(--otg-label);
	line-height: 1.75;
}
.otg-body-text p { margin: 0 0 10px; }

.otg-loading, .otg-empty {
	margin: 28px 0;
	font-size: 15px;
	color: var(--otg-label-2);
	text-align: center;
}

/* =========================================================
   カテゴリカード（2列 × 2行）
   ========================================================= */

.otg-carousel { position: relative; margin: 0 -16px; padding: 0 16px; }

.otg-track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}
.otg-track::-webkit-scrollbar { display: none; }

.otg-page {
	flex: 0 0 100%;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: 10px;
	scroll-snap-align: start;
}

.otg-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 118px;
	padding: 14px;
	border: 0;
	border-radius: var(--otg-r-md);
	background: var(--otg-fill);
	color: var(--otg-label);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition: transform .24s var(--otg-ease), background .24s var(--otg-ease);
}
.otg-card:hover { background: var(--otg-fill-2); }
.otg-card:active { transform: scale(.97); }

.otg-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--otg-tint-soft);
	color: var(--otg-tint);
}
.otg-card__icon svg { width: 18px; height: 18px; }

.otg-card__t {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: -.01em;
	word-break: normal;
	line-break: strict;
}
.otg-card__s {
	margin-top: auto;
	font-size: 13px;
	color: var(--otg-label-2);
	line-height: 1.4;
}

/* ページャ */
.otg-cnav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: none;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: .5px solid var(--otg-separator);
	border-radius: 50%;
	background: var(--otg-material);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	color: var(--otg-label);
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
	z-index: 2;
}
.otg-cnav svg { width: 15px; height: 15px; }
.otg-cnav--prev { left: 2px; }
.otg-cnav--next { right: 2px; }
@media (hover: hover) and (min-width: 480px) { .otg-cnav { display: flex; } }

.otg-dots { display: flex; justify-content: center; gap: 6px; margin-top: 16px; }
.otg-dot {
	width: 6px; height: 6px;
	border-radius: 3px;
	background: var(--otg-label-3);
	transition: width .3s var(--otg-ease), background .3s var(--otg-ease);
}
.otg-dot.is-on { width: 18px; background: var(--otg-tint); }

/* =========================================================
   リスト（iOS インセットグループ）
   ========================================================= */

.otg-list {
	margin: 0 0 4px;
	border-radius: var(--otg-r-md);
	background: var(--otg-fill);
	overflow: hidden;
}

.otg-row {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 50px;
	padding: 14px 15px;
	border: 0;
	border-bottom: .5px solid var(--otg-separator);
	background: transparent;
	color: var(--otg-label);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.45;
	text-align: left;
	cursor: pointer;
	transition: background .16s var(--otg-ease);
}
.otg-list .otg-row:last-child { border-bottom: 0; }
.otg-row:hover { background: var(--otg-fill-2); }
.otg-row:active { background: var(--otg-fill-2); }
.otg-row__t { flex: 1 1 auto; }
.otg-row__c { flex: 0 0 auto; color: var(--otg-label-3); }
.otg-row__c svg { width: 15px; height: 15px; display: block; }

/* =========================================================
   チップ
   ========================================================= */

.otg-chips {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.otg-chip {
	min-height: 46px;
	padding: 12px 6px;
	border: 0;
	border-radius: 23px;
	background: var(--otg-fill);
	color: var(--otg-label);
	font-family: inherit;
	font-size: 14px;
	text-align: center;
	cursor: pointer;
	transition: transform .2s var(--otg-ease), background .2s var(--otg-ease);
}
.otg-chip:hover { background: var(--otg-tint-soft); }
.otg-chip:active { transform: scale(.95); }

/* 近い質問（横スライド） */
.otg-sibwrap { margin: 22px -16px 0; padding: 0 16px; }
.otg-sibtrack {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	padding-bottom: 4px;
}
.otg-sibtrack::-webkit-scrollbar { display: none; }

.otg-sib {
	flex: 0 0 auto;
	min-height: 46px;
	padding: 13px 18px;
	border: 0;
	border-radius: 23px;
	background: var(--otg-fill);
	color: var(--otg-label);
	font-family: inherit;
	font-size: 13.5px;
	white-space: nowrap;
	cursor: pointer;
	scroll-snap-align: start;
	transition: transform .2s var(--otg-ease), background .2s var(--otg-ease);
}
.otg-sib:hover { background: var(--otg-tint-soft); }
.otg-sib:active { transform: scale(.95); }

/* =========================================================
   記事カード
   ========================================================= */

.otg-arts { margin: 4px 0 0; }

.otg-art {
	margin-bottom: 14px;
	border-radius: var(--otg-r-md);
	background: var(--otg-fill);
	overflow: hidden;
	transition: transform .26s var(--otg-ease);
}
.otg-art:hover { transform: translateY(-2px); }

.otg-art__eye {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--otg-tint-soft) center / cover no-repeat;
	color: var(--otg-tint);
}
.otg-art__eye svg { width: 34px; height: 34px; opacity: .5; }

.otg-art__cat {
	position: absolute;
	left: 10px;
	top: 10px;
	padding: 4px 11px;
	border-radius: 20px;
	background: rgba(255, 255, 255, .86);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	color: #0b3d31;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .01em;
}

.otg-art__t {
	margin: 0;
	padding: 15px 15px 0;
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -.012em;
}
.otg-art__m {
	margin: 6px 0 0;
	padding: 0 14px;
	font-size: 11.5px;
	color: var(--otg-label-2);
}

.otg-art__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 50px;
	margin: 15px;
	border-radius: 25px;
	background: var(--otg-tint);
	color: #fff;
	font-size: 15.5px;
	font-weight: 600;
	text-decoration: none;
	transition: transform .2s var(--otg-ease), opacity .2s var(--otg-ease);
}
.otg-art__btn:hover { opacity: .9; color: #fff; }
.otg-art__btn:active { transform: scale(.97); }
.otg-art__btn svg { width: 16px; height: 16px; }

/* =========================================================
   注意書き・CTA
   ========================================================= */

.otg-note {
	display: flex;
	gap: 9px;
	margin: 16px 0 0;
	padding: 12px 14px;
	border-radius: var(--otg-r-sm);
	background: var(--otg-warn-bg);
	color: var(--otg-warn-text);
	font-size: 12.5px;
	line-height: 1.65;
}
.otg-note svg { flex: 0 0 15px; width: 15px; height: 15px; margin-top: 2px; }

.otg-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--otg-tap);
	margin: 16px 0 0;
	border-radius: 22px;
	background: var(--otg-tint);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.otg-done { text-align: center; padding: 44px 0 30px; }
.otg-done svg { width: 46px; height: 46px; color: var(--otg-tint); }
.otg-done__t { margin: 16px 0 6px; font-size: 19px; font-weight: 700; letter-spacing: -.015em; }
.otg-done__s { margin: 0 0 22px; font-size: 14px; color: var(--otg-label-2); line-height: 1.65; }

.otg-fail { text-align: center; padding: 44px 0 30px; }
.otg-fail svg { width: 34px; height: 34px; color: var(--otg-label-3); }
.otg-fail__t { margin: 14px 0 6px; font-size: 17px; font-weight: 700; }
.otg-fail__s { margin: 0 0 20px; font-size: 13.5px; color: var(--otg-label-2); line-height: 1.65; }

/* =========================================================
   フッター（ツールバー）
   ========================================================= */

.otg-foot {
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
	background: var(--otg-material);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border-top: .5px solid var(--otg-separator);
}
.otg-foot[hidden] { display: none; }
.otg-foot__row { display: flex; gap: 8px; }

.otg-fb {
	flex: 1;
	min-height: 48px;
	border: 0;
	border-radius: 24px;
	background: var(--otg-fill);
	color: var(--otg-label);
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	transition: transform .2s var(--otg-ease), background .2s var(--otg-ease);
}
.otg-fb:hover { background: var(--otg-fill-2); }
.otg-fb:active { transform: scale(.97); }
.otg-fb--primary { background: var(--otg-tint); color: #fff; font-weight: 600; }
.otg-fb--primary:hover { background: var(--otg-tint); opacity: .9; }

/* OG VIP CARD */
.otg-vipbtn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 48px;
	border-radius: 24px;
	background: linear-gradient(135deg, var(--otg-gold-1) 0%, var(--otg-gold-2) 46%, var(--otg-gold-3) 100%);
	color: var(--otg-gold-text);
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: .02em;
	text-decoration: none;
	overflow: hidden;
	box-shadow:
		0 0 0 .5px var(--otg-gold-line),
		inset 0 1px 0 rgba(255, 255, 255, .75),
		0 4px 14px rgba(160, 120, 0, .26);
	transition: transform .2s var(--otg-ease);
}
.otg-vipbtn:hover { color: var(--otg-gold-text); }
.otg-vipbtn:active { transform: scale(.98); }
.otg-vipbtn svg { width: 17px; height: 17px; color: #7A5A00; }
.otg-vipbtn span { position: relative; z-index: 1; }
.otg-vipbtn::after {
	content: '';
	position: absolute;
	top: 0; left: -55%;
	width: 36%; height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .68), transparent);
	transform: skewX(-18deg);
}
@media (prefers-reduced-motion: no-preference) {
	.otg-vipbtn::after { animation: otgShine 5s ease-in-out infinite; }
	@keyframes otgShine { 0%, 66% { left: -55%; } 92%, 100% { left: 132%; } }
}

/* =========================================================
   フォーム
   ========================================================= */

.otg-form { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.otg-field { display: flex; flex-direction: column; gap: 6px; }
.otg-field__label { font-size: 13px; font-weight: 600; color: var(--otg-label-2); }
.otg-field__label em { margin-left: 5px; font-style: normal; font-size: 11px; color: #ff3b30; }

.otg-field input,
.otg-field select,
.otg-field textarea {
	width: 100%;
	min-height: var(--otg-tap);
	padding: 12px 14px;
	border: 0;
	border-radius: var(--otg-r-sm);
	background: var(--otg-fill);
	color: var(--otg-label);
	font-family: inherit;
	font-size: 16px;
	transition: box-shadow .2s var(--otg-ease);
}
.otg-field input:focus,
.otg-field select:focus,
.otg-field textarea:focus {
	outline: 0;
	box-shadow: 0 0 0 3px var(--otg-tint-soft), inset 0 0 0 1px var(--otg-tint);
}
.otg-field textarea { min-height: 108px; resize: vertical; }

.otg-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.55; }
.otg-check input { width: 20px; height: 20px; min-height: 20px; margin-top: 1px; accent-color: var(--otg-tint); }
.otg-check em { font-style: normal; font-size: 11px; color: #ff3b30; }

.otg-privacy { margin: 0; font-size: 12px; color: var(--otg-label-2); line-height: 1.6; }
.otg-privacy a { color: var(--otg-tint); }
.otg-msg { margin: 0; font-size: 13px; color: var(--otg-label-2); }
.otg-msg--error { color: #ff3b30; }
.otg-hint { display: block; margin-top: 5px; font-size: 11.5px; color: var(--otg-tint); }

.otg-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* =========================================================
   スケルトン
   ========================================================= */

.otg-skel { padding: 14px 0 0; }
.otg-skel__l, .otg-skel__r { display: block; border-radius: 8px; background: var(--otg-fill); }
.otg-skel__l { height: 26px; margin-bottom: 16px; }
.otg-skel__r { height: 48px; margin-bottom: 10px; }
.otg-skel__g { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
.otg-skel__g span { display: block; height: 118px; border-radius: var(--otg-r-md); background: var(--otg-fill); }

@media (prefers-reduced-motion: no-preference) {
	.otg-skel__l, .otg-skel__r, .otg-skel__g span { animation: otgPulse 1.4s ease-in-out infinite; }
	@keyframes otgPulse { 0%, 100% { opacity: 1 } 50% { opacity: .5 } }
}

/* =========================================================
   管理者プレビュー
   ========================================================= */

.otg-preview {
	display: flex;
	gap: 8px;
	margin: 12px 0 0;
	padding: 11px 13px;
	border-radius: var(--otg-r-sm);
	background: var(--otg-warn-bg);
	color: var(--otg-warn-text);
	font-size: 12px;
	line-height: 1.6;
}
.otg-preview svg { flex: 0 0 15px; width: 15px; height: 15px; margin-top: 2px; }

.otg-draft {
	display: inline-block;
	margin-left: 7px;
	padding: 2px 8px;
	border-radius: 10px;
	background: var(--otg-warn-line);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	vertical-align: middle;
}

.otg-editlink {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 40px;
	margin-top: 18px;
	border-radius: 20px;
	background: var(--otg-fill);
	color: var(--otg-label-2);
	font-size: 12.5px;
	text-decoration: none;
}
.otg-editlink:hover { color: var(--otg-tint); }
.otg-editlink svg { width: 14px; height: 14px; }

/* =========================================================
   デスクトップ・タブレット（601px 以上）
   モバイルを基準に組み、ここで浮遊パネルへ切り替える
   ========================================================= */

@media (min-width: 601px) {
	.otg-root { right: 20px; bottom: 20px; }

	.otg-panel {
		right: 20px;
		left: auto;
		bottom: 20px;
		width: min(414px, calc(100vw - 40px));
		max-height: min(700px, calc(100vh - 40px));
		border-radius: var(--otg-r-lg);
		transform-origin: bottom right;
		animation: otgPanelIn .42s var(--otg-ease);
		box-shadow:
			0 0 0 .5px var(--otg-separator),
			0 24px 68px rgba(0, 0, 0, .24),
			0 8px 20px rgba(0, 0, 0, .12);
	}

	.otg-grabber { display: none; }

	.otg-screen { padding: 4px 18px 24px; }
	.otg-carousel, .otg-sibwrap { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; }
	.otg-foot { padding-left: 18px; padding-right: 18px; }

	.otg-largetitle { font-size: 27px; }
	.otg-body-text { font-size: 15px; }
	.otg-row { font-size: 15px; }
	.otg-field input, .otg-field select, .otg-field textarea { font-size: 15px; }

	.otg-scrim { display: none !important; }
}

/* =========================================================
   アクセシビリティ
   ========================================================= */

.otg-root button:focus-visible,
.otg-root a:focus-visible {
	outline: 2.5px solid var(--otg-tint);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.otg-root *,
	.otg-root *::before,
	.otg-root *::after {
		animation: none !important;
		transition: none !important;
	}
}