@charset "UTF-8";

/* -------------------- common -------------------- */
@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');
@import url('https://fonts.googleapis.com/css2?family=WDXL+Lubrifont+JP+N&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Sans+JP:wght@100..900&display=swap');

html,
body {
	margin: 0;
	background: #ddd;
	color: #111;
	font-family: "WDXL Lubrifont JP N", sans-serif !important;
	font-weight: 400;
	font-style: normal;
	font-size: 14px;
	height: 100%;
	overscroll-behavior: none;
}

button,
input,
select,
textarea {
	font-family: "WDXL Lubrifont JP N", sans-serif;
}

.page {
	margin: 0 auto;
}

.model-block {
	margin: 40px 0;
}

.model-block h2 {
	margin: 0 0 12px;
	font-size: 20px;
}

.caption {
	margin: 12px 0 0;
	color: #444;
	font-size: 14px;
	line-height: 1.7;
}

.three-wrap {
	background: #fff;
	position: relative;
	box-sizing: border-box;
	width: auto;
	height: 100dvh;
	/* max-height: 70vw; */
	overflow: hidden;
	border-radius: 0;
	margin: 0 auto;
	isolation: isolate;

	user-select: none;
}

.three-wrap canvas {
	z-index: 1;
}

.three-wrap::before,
.three-wrap::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 50px;
	pointer-events: none;
	z-index: 4;
}

.three-wrap canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 1;
}



/* -------------------- Loading overlay -------------------- */
.three-loading {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 30;
	background: rgba(221, 221, 221, 1);
	backdrop-filter: blur(2px);
	transition: opacity .25s ease;
}

.three-loading.is-hidden {
	opacity: 0;
	pointer-events: none;
}

.three-loading__inner {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 240px;
}

.three-loading__spinner {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 3px solid rgba(0, 0, 0, 0.2);
	border-top-color: rgba(0, 0, 0, 0.75);
	animation: spin .9s linear infinite;
	flex: 0 0 auto;
}

.three-loading__body {
	min-width: 220px;
}

.three-loading__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.three-loading__text,
.three-loading__percent {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 14px;
	letter-spacing: 0.08em;
	color: rgba(0, 0, 0, 0.75);
}

.three-loading__bar {
	margin-top: 8px;
	width: 100%;
	height: 4px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.12);
	overflow: hidden;
}

.three-loading__barFill {
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.75);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .12s linear;
}

.three-loading__ring {
	display: none;
	width: 40px;
	height: 40px;
	transform: rotate(-90deg);
	flex: 0 0 auto;
}

.three-loading__ringTrack,
.three-loading__ringValue {
	fill: none;
	stroke-width: 4;
}

.three-loading__ringTrack {
	stroke: rgba(0, 0, 0, 0.12);
}

.three-loading__ringValue {
	stroke: rgba(0, 0, 0, 0.75);
	transition: stroke-dashoffset .12s linear;
}

.three-loading[data-loading-variant="text"] .three-loading__bar,
.three-loading[data-loading-variant="text"] .three-loading__ring {
	display: none;
}

.three-loading[data-loading-variant="bar"] .three-loading__ring,
.three-loading[data-loading-variant="bar"] .three-loading__spinner {
	display: none;
}

.three-loading[data-loading-variant="ring"] .three-loading__spinner,
.three-loading[data-loading-variant="ring"] .three-loading__bar {
	display: none;
}

.three-loading[data-loading-variant="ring"] .three-loading__ring {
	display: block;
}

.three-loading[data-loading-state="indeterminate"] .three-loading__percent {
	opacity: .45;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}



/* -------------------- 丸ボタン -------------------- */
.fab-btn {
	position: absolute;
	top: 14px;
	z-index: 10;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 0;
	background: rgba(0, 0, 0, .45);
	color: #fff;
	cursor: pointer;
	backdrop-filter: blur(8px);

	opacity: 0;
	transform: translateY(6px);
	pointer-events: none;
	transition: opacity .18s ease 0s, transform .18s ease 0s;
}

.fab-btn.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
	transition: opacity .18s ease 1s, transform .18s ease 1s;
}

.fab-btn:active {
	transform: translateY(1px);
}



/* -------------------- アイコン -------------------- */
.fab-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 40px;
	height: 40px;
	background: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 82%;
	mask-size: 82%;
}



/* -------------------- ボタン配置（詰め対応） -------------------- */
.three-wrap {
	--fab-left: 14px;
	--fab-gap: 50px;
	/* 44pxボタン + 余白 */
}

.start-btn {
	left: var(--fab-left);
}

.home-btn {
	left: calc(var(--fab-left) + var(--fab-gap));
}

.back-btn {
	left: calc(var(--fab-left) + (var(--fab-gap) * 2));
}



/* -------------------- home を消したら back を 1個分左へ詰める -------------------- */
.three-wrap.no-home .back-btn {
	left: calc(var(--fab-left) + var(--fab-gap));
}

.three-wrap.no-back .back-btn {
	display: none !important;
}


/* -------------------- ホーム -------------------- */
.home-btn::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M7 18.5L20 8l13 10.5' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11 17.5V31.5H29V17.5' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M17 31.5V23.5H23V31.5' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M7 18.5L20 8l13 10.5' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11 17.5V31.5H29V17.5' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M17 31.5V23.5H23V31.5' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}



/* -------------------- 戻る -------------------- */
.back-btn::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M16 10L8 20L16 30' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 20H32' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M16 10L8 20L16 30' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 20H32' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");

	-webkit-mask-size: 75%;
	mask-size: 75%;
	-webkit-mask-position: 52% center;
	mask-position: 52% center;
}



/* -------------------- スタートへ戻る -------------------- */
.start-btn::after {
	-webkit-mask-image: url('data:image/svg+xml;utf8,\<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 24 24"  fill="none" stroke="%23000" stroke-width="2" xml:space="preserve"><path class="st0" d="M14.2,21.1H9.8c-2,0-3.5-1.6-3.5-3.5V6.4c0-2,1.6-3.5,3.5-3.5h4.4"/><line class="st1" x1="20.2" y1="12" x2="12" y2="12"/><polyline class="st1" points="15.9,7.5 20.4,12 15.9,16.5 "/></svg>');
	mask-image: url('data:image/svg+xml;utf8,\<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 24 24"  fill="none" stroke="%23000" stroke-width="2" xml:space="preserve"><path class="st0" d="M14.2,21.1H9.8c-2,0-3.5-1.6-3.5-3.5V6.4c0-2,1.6-3.5,3.5-3.5h4.4"/><line class="st1" x1="20.2" y1="12" x2="12" y2="12"/><polyline class="st1" points="15.9,7.5 20.4,12 15.9,16.5 "/></svg>');
	-webkit-mask-size: 74%;
	mask-size: 74%;
	transform: scale(0.8) rotate(180deg);
}



/* -------------------- 画質設定（右下） -------------------- */
.quality-ui {
	position: absolute;
	right: calc(14px + env(safe-area-inset-right));
	bottom: calc(14px + env(safe-area-inset-bottom));
	z-index: 18;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	font-family: "Noto Sans JP", sans-serif;
}

.quality-toggle,
.quality-option {
	border: 0;
	color: #fff;
	background: rgba(0, 0, 0, .52);
	backdrop-filter: blur(8px);
	cursor: pointer;
	line-height: 1;
}

.quality-toggle {
	min-width: 82px;
	height: 38px;
	padding: 0 13px;
	border-radius: 999px;
	font-size: 12px;
	letter-spacing: .04em;
}

.quality-menu {
	display: grid;
	grid-template-columns: repeat(3, 34px);
	gap: 4px;
	padding: 5px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .38);
	backdrop-filter: blur(8px);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px) scale(.98);
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}

.quality-ui.is-open .quality-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
	pointer-events: auto;
	transition-delay: 0s;
}

.quality-option {
	width: 34px;
	height: 30px;
	border-radius: 999px;
	font-size: 12px;
}

.quality-option.is-active {
	background: rgba(255, 255, 255, .92);
	color: #111;
}

.quality-toggle:active,
.quality-option:active {
	transform: translateY(1px);
}

@media (pointer: coarse) and (orientation: portrait),
(max-width: 900px) and (pointer: fine) {
	.quality-ui {
		right: calc(12px + env(safe-area-inset-right));
		bottom: calc(12px + env(safe-area-inset-bottom));
	}

	.quality-toggle {
		height: 40px;
		font-size: 12px;
	}
}

.hover-cap {
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 3;
	max-width: min(92%, 560px);

	padding: 6px 10px 10px 10px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .45);
	color: #fff;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 0.8rem;

	backdrop-filter: blur(6px);

	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}

.hover-cap.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0s;
}

.hover-cap-layer {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity .18s ease, visibility 0s linear .18s;
}

.hover-cap-layer.is-visible {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

.follow-cap {
	position: absolute;
	left: 0;
	top: 0;
	max-width: min(42vw, 280px);
	padding: 6px 10px 7px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .45);
	background: rgba(255, 255, 255, .92) !important;
	color: #fff;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 0.72rem;
	line-height: 1.3;
	white-space: nowrap;
	backdrop-filter: blur(6px);
	transform: translate(-50%, calc(-100% - var(--cap-offset-y, 18px) + 6px));
	transform-origin: center bottom;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .38s ease, transform .18s ease, background .14s ease, color .14s ease, visibility 0s linear .38s !important;
}

.follow-cap.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, calc(-100% - var(--cap-offset-y, 18px)));
	transition-delay: 0s;
}

.follow-cap.is-hover {
	background: rgba(255, 255, 255, .92);
	color: #111;
	transform: translate(-50%, calc(-100% - var(--cap-offset-y, 18px))) scale(1.04);
}

.top-guide {
	position: absolute;
	left: 50%;
	top: 1.5rem;
	transform: translate(-50%, 0px);

	z-index: 12;
	max-width: min(92%, 720px);

	padding: 8px 10px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .45);

	color: #fff;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 0.8rem;

	backdrop-filter: blur(6px);

	opacity: 0;
	transform: translate(-50%, -6px);
	pointer-events: none;
	transition: opacity .14s ease, transform .14s ease;
}

.top-guide.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

[data-hover-caption-layer] .follow-cap:not(.is-hover) {
	opacity: 0;
	pointer-events: none;
}

/* -------------------- パン中表示 -------------------- */
.viewer-chip {
	position: absolute;
	z-index: 14;
	padding: 8px 12px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 0.78rem;
	line-height: 1;
	backdrop-filter: blur(6px);
	opacity: 0;
	transform: translateY(6px);
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease;
}

.viewer-chip.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.pan-view-chip {
	right: 14px;
	top: 14px;
}

.pan-limit-chip {
	left: 50%;
	bottom: 16px;
	transform: translate(-50%, 10px) scale(.98);
}

.pan-limit-chip.is-visible {
	transform: translate(-50%, 0) scale(1);
}



/* -------------------- リミット到達 -------------------- */
.limit-panel-stack {
	position: absolute;
	left: 14px;
	top: 180px;
	z-index: 14;
	width: min(48vw, 420px);
	max-width: calc(100% - 28px);
	pointer-events: none;
}

@media screen and (max-width: 900px) {
	.limit-panel-stack {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 14;
		width: min(48vw, 420px);
		max-width: calc(100% - 28px);
		pointer-events: auto;
	}
}

.limit-panel {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 12px 14px;
	border-radius: 16px;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 0.84rem;
	line-height: 1.7;
	backdrop-filter: blur(6px);

	opacity: 0;
	visibility: hidden;
	transform: translateY(16px) scale(1);
	transition:
		opacity .6s ease .5s,
		transform 1s cubic-bezier(.22, 1, .36, 1) .5s,
		visibility 0s linear 1.2s;
}

.viewer-chip.is-empty,
.limit-panel.is-empty {
	display: none !important;
}

/* -------------------- リミットパネル：表示中は裏の3Dにイベントを通さない -------------------- */

.limit-panel-stack {
	pointer-events: none;
}

/* 汎用メッセージが表示されている時だけ、パネル本体でイベントを受ける */
.three-wrap.is-pan-limit-active.is-pan-limit:not(.is-pan-limit-x-min):not(.is-pan-limit-x-max):not(.is-pan-limit-y-min):not(.is-pan-limit-y-max):not(.is-pan-limit-z-min):not(.is-pan-limit-z-max) .limit-panel--any {
	pointer-events: auto;
}

/* 軸別メッセージが表示されている時だけ、該当パネル本体でイベントを受ける */
.three-wrap.is-pan-limit-active.is-pan-limit-x-min .limit-panel--x-min,
.three-wrap.is-pan-limit-active.is-pan-limit-x-max .limit-panel--x-max,
.three-wrap.is-pan-limit-active.is-pan-limit-y-min .limit-panel--y-min,
.three-wrap.is-pan-limit-active.is-pan-limit-y-max .limit-panel--y-max,
.three-wrap.is-pan-limit-active.is-pan-limit-z-min .limit-panel--z-min,
.three-wrap.is-pan-limit-active.is-pan-limit-z-max .limit-panel--z-max {
	pointer-events: auto;
}

/* 閉じた/空のパネル */
.limit-panel.is-dismissed,
.limit-panel.is-empty {
	pointer-events: none !important;
}

/* 閉じるボタン */
.limit-panel [data-pan-limit-panel-close],
.limit-panel [data-pan-limit-panel-close] * {
	pointer-events: auto;
}

/* -------------------- 汎用メッセージは軸別が何も出ていない時だけ -------------------- */
.three-wrap.is-pan-limit-active.is-pan-limit:not(.is-pan-limit-x-min):not(.is-pan-limit-x-max):not(.is-pan-limit-y-min):not(.is-pan-limit-y-max):not(.is-pan-limit-z-min):not(.is-pan-limit-z-max) .limit-panel--any {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
	transition-delay: 0s;
}

/* -------------------- 軸別 -------------------- */
.three-wrap.is-pan-limit-active.is-pan-limit-x-min .limit-panel--x-min,
.three-wrap.is-pan-limit-active.is-pan-limit-x-max .limit-panel--x-max,
.three-wrap.is-pan-limit-active.is-pan-limit-y-min .limit-panel--y-min,
.three-wrap.is-pan-limit-active.is-pan-limit-y-max .limit-panel--y-max,
.three-wrap.is-pan-limit-active.is-pan-limit-z-min .limit-panel--z-min,
.three-wrap.is-pan-limit-active.is-pan-limit-z-max .limit-panel--z-max {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
	transition-delay: 0s;
}

/* -------------------- リミットパネル：閉じるボタンだけ操作可能 -------------------- */
.limit-panel,
.limit-panel * {
	pointer-events: none;
}

.limit-panel [data-pan-limit-panel-close],
.limit-panel [data-pan-limit-panel-close] * {
	pointer-events: auto;
}

.limit-panel__close {
	display: none;
}

@media screen and (max-width: 900px) {
	.limit-panel__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 30px;
		margin-top: 8px;
		padding: 0 12px;
		border: 0;
		border-radius: 999px;
		background: rgba(255, 255, 255, .88);
		color: #111;
		font-size: 0.76rem;
		line-height: 1;
		cursor: pointer;
	}

	.limit-panel__close:active {
		transform: translateY(1px);
	}

}

/* JS側では hidden を使わず、このクラスでフェードアウトさせます */
.limit-panel.is-dismissed {
	opacity: 0 !important;
	visibility: hidden !important;
	transform: translateY(12px) scale(.985) !important;
	pointer-events: none !important;
	transition:
		opacity .24s ease,
		transform .28s ease,
		visibility 0s linear .28s;
}

@media (pointer: coarse) and (orientation: portrait),
(max-width: 900px) and (pointer: fine) {
	body {
		font-size: 4vw;
	}

	.three-wrap {
		background: #ddd;
		position: relative;
		width: auto;
		height: 100dvh;
		overflow: hidden;
		border-radius: 0;
		margin: 0 auto;
		isolation: isolate;
	}

	.top-guide {
		padding: 0.6em 0.9em;
	}

	.top-guide.is-visible {
		opacity: 1;
		transform: translate(-50%, 0);
	}

}



/* -------------------- modal+caption -------------------- */
/* -------------------- canvas_modal -------------------- */
.cmodal {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
}

.cmodal.is-open {
	pointer-events: none;
}

.cmodal:not(.is-open) .cmodal__panel {
	pointer-events: none;
}

.cmodal.is-open .cmodal__panel {
	pointer-events: auto;
}

.cmodal__panel {
	pointer-events: auto;

	position: absolute;
	right: 0;
	top: 0;
	box-sizing: border-box;
	width: max(100px, calc(30%));
	height: 100%;
	overflow: auto;

	font-family: "Noto Sans JP", sans-serif;

	background: rgba(255, 255, 255, .8);
	border-radius: 0;
	padding: 12px 12px 10px;
	backdrop-filter: blur(2px);

	opacity: 0;
	transform: translateY(6px) scale(.98);
	transition: opacity .18s ease, transform .18s ease;
}

.cmodal.is-open .cmodal__panel {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.cmodal__close {
	position: sticky;
	height: 27px;
	width: 27px;
	top: 0;
	right: 10px;
	margin-left: auto;
	display: block;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	font-size: 22px;
	cursor: pointer;
	line-height: 1;
}

.cmodal__close_text {
	height: 27px;
	width: fit-content;
	top: 0;
	right: 10px;
	margin: 0 auto;
	display: block;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-size: 1em;
	cursor: pointer;
	line-height: 1;
	margin-bottom: 2rem;
}

.cmodal__title {
	margin: 0 0 8px;
	margin-top: -25px;
	font-size: 16px;
}

.cmodal__body {
	font-size: 1rem;
	line-height: 1.7;
	color: #222;
}

.cmodal__body img {
	display: block;
	max-width: 100%;
	height: auto;
}

.cmodal__body p {
	font-size: 1em;
	line-height: 1.7;
	color: #555;
}

.cmodal__body h2 {
	font-size: 1rem;
	color: #444;
	margin: 1rem 0;
}

.cmodal__body h3 {
	font-size: 1em;
	line-height: 1;
	color: #777;
	padding-left: 1rem;
	margin-bottom: 0 !important;
}

.cmodal__body .cap {
	font-size: 0.9em;
	line-height: 1.7;
	color: #888;
	/* padding-left: 1rem; */
}

.cmodal__link::after {
	content: "link";
}

@media (pointer: coarse) and (orientation: portrait),
(max-width: 900px) and (pointer: fine) {
	.cmodal__panel {
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;

		width: 100%;
		height: 50dvh;
		max-height: 50vh;
		border-radius: 0;

		background: rgba(255, 255, 255, .9);
		border-radius: 0;
		padding: 1rem;
		backdrop-filter: blur(2px);

		font-size: 6vw;
	}

	.cmodal__close {
		position: sticky;
		height: 3rem;
		width: 3rem;
		top: 0;
		right: 0;
		margin-left: auto;
		display: block;
		border: 0;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.8);
		font-size: 2rem;
		cursor: pointer;
		line-height: 1;
	}

	.cmodal__title {
		margin: 0 0 1em;
		margin-top: -2.5rem;
		font-size: 1.3rem;
	}

	.cmodal__body {
		line-height: 1.7;
		color: #222;
	}

}



/* -------------------- START Overlay -------------------- */
.start-overlay {
	position: absolute;
	inset: 6rem;
	box-sizing: border-box;
	z-index: 20;
	display: flex;
	background: rgba(0, 0, 0, 0);
	transition: opacity .35s ease;
}

.start-overlay.is-hidden {
	opacity: 0;
	pointer-events: none;
}

.start-overlay::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 9999;
}



/* -------------------- 端末振り分け -------------------- */
/* 共通：基本は非表示 */
.only-ios,
.only-iphone,
.only-ipad,
.only-android,
.only-android-phone,
.only-android-tablet {
	display: none;
}

/* iOS */
.is-ios .only-ios {
	display: block;
}

/* iPhone */
.is-iphone .only-iphone {
	display: block;
}

/* iPad */
.is-ipad .only-ipad {
	display: block;
}

/* Android */
.is-android .only-android {
	display: block;
}

/* Androidスマホ */
.is-android-phone .only-android-phone {
	display: block;
}

/* Androidタブレット */
.is-android-tablet .only-android-tablet {
	display: block;
}