@charset "UTF-8";

/* ==========================================================================
   ベース（変数・リセット・共通）
   ========================================================================== */
:root {
	--ink: #3a3a3a;
	--sky: #5eacd9;
	--deep: #276174;
	--white: #ffffff;
	--font-jp: 'Yu Gothic', YuGothic, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
	--font-en: 'Poppins', var(--font-jp);
	--wave-tint: hue-rotate(160deg) saturate(1.15);
	--font-cond: 'DIN Condensed', 'Oswald', 'Arial Narrow', var(--font-jp);
}
.page {
	--vw: 100vw;
	--canvas: min(var(--vw), 1600px);
	--u: calc(var(--canvas) / 1440);
	--bleed: calc((var(--vw) - var(--canvas)) / 2);
	position: relative;
	width: var(--canvas);
	margin-inline: auto;
}
* {
	box-sizing: border-box;
}
html,
body {
	margin: 0;
	padding: 0;
}
body {
	font-family: var(--font-jp);
	color: var(--ink);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
	text-size-adjust: 100%;
	overflow-x: hidden;
}
img,
svg {
	display: block;
	max-width: 100%;
}
a {
	color: inherit;
	text-decoration: none;
}
ul,
li {
	margin: 0;
	padding: 0;
	list-style: none;
}
hr {
	margin: 0;
	border: 0;
}
h1,
h2,
h3,
p {
	margin: 0;
}
.pc {
	display: block !important;
}
.sp {
	display: none !important;
}
section[id] {
	scroll-margin-top: calc(110 * var(--u));
}
@supports (width: 1cqw) {
	body {
		container-type: inline-size;
	}
	.page {
		--vw: 100cqw;
	}
}

/* --- ベース（変数・リセット・共通）：SP（768px以下） --- */
@media (max-width: 768px) {
	.pc {
		display: none !important;
	}
	.sp {
		display: block !important;
	}
	section[id] {
		scroll-margin-top: 20vw;
	}
	body.is-menu-open {
		position: fixed;
		left: 0;
		right: 0;
		width: 100%;
		overflow: hidden;
	}
}

/* ==========================================================================
   Header / ナビゲーション
   ========================================================================== */
.header {
	position: absolute;
	inset: 0 auto auto 0;
	width: calc(1440 * var(--u));
	z-index: 10;
	height: calc(101 * var(--u));
}
.header__logo {
	position: absolute;
	left: calc(50 * var(--u));
	top: calc(54 * var(--u));
	width: calc(260 * var(--u));
	height: calc(22 * var(--u));
}
.header__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.gnav {
	position: absolute;
	right: calc(112 * var(--u));
	top: calc(29 * var(--u));
	height: calc(72 * var(--u));
	display: flex;
	align-items: center;
	gap: calc(2 * var(--u));
	padding: 0 calc(10 * var(--u));
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border-radius: calc(12 * var(--u));
}
.gnav__item {
	height: calc(52 * var(--u));
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 calc(17 * var(--u));
	font-size: calc(14 * var(--u));
	font-weight: 700;
	line-height: 2;
	white-space: nowrap;
	border-radius: calc(6 * var(--u));
	transition:
		background-color 0.2s,
		color 0.2s;
}
.gnav__item:hover {
	background: var(--sky);
	color: var(--white);
}
.header__mail {
	position: absolute;
	left: calc(1338 * var(--u));
	top: calc(29 * var(--u));
	width: calc(72 * var(--u));
	height: calc(72 * var(--u));
	display: grid;
	place-items: center;
	background: var(--deep);
	border-radius: calc(12 * var(--u));
	transition: opacity 0.2s;
}
.header__mail:hover {
	opacity: 0.88;
}
.header__menu,
.gnav__cta {
	display: none;
}
.header.is-stuck {
	--head-h: calc(90 * var(--u));
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	height: var(--head-h);
	animation: header-drop 0.3s ease both;
}
.header.is-stuck .header__logo,
.header.is-stuck .gnav,
.header.is-stuck .header__mail {
	top: 50%;
	transform: translateY(-50%);
}
.header.is-stuck.is-hiding {
	animation: header-up 0.3s ease both;
}
.header.is-stuck::before {
	content: '';
	position: absolute;
	left: calc(-1 * var(--bleed));
	right: calc(-1 * var(--bleed));
	top: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.85);
	box-shadow: 0 calc(2 * var(--u)) calc(16 * var(--u)) rgba(39, 97, 116, 0.08);
}
.header.is-stuck .gnav {
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
.header__mail img {
	width: calc(27.5 * var(--u));
	height: auto;
}
@keyframes header-drop {
	from {
		transform: translateY(-100%);
		opacity: 0;
	}
	to {
		transform: none;
		opacity: 1;
	}
}
@keyframes header-up {
	from {
		transform: none;
		opacity: 1;
	}
	to {
		transform: translateY(-100%);
		opacity: 0;
	}
}

/* --- Header / ナビゲーション：SP（768px以下） --- */
@media (max-width: 768px) {
	.header {
		height: auto;
	}
	.header.is-stuck {
		--head-h: 15vw;
	}
	.header.is-stuck .header__logo,
	.header.is-stuck .header__menu {
		top: 50%;
		transform: translateY(-50%);
	}
	.header.is-stuck .gnav {
		top: 0;
		transform: translateY(-2vw);
		background: var(--white);
	}
	.is-menu-open .header.is-stuck .gnav {
		transform: none;
	}
	.gnav {
		position: fixed;
		top: 0;
		left: 0;
		right: auto;
		bottom: auto;
		z-index: 1;
		display: block;
		width: 100vw;
		height: 100vh;
		height: 100dvh;
		padding: 24vw 5vw 12vw;
		background: var(--white);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		border-radius: 0;
		overflow-y: auto;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-2vw);
		transition:
			opacity 0.25s ease,
			transform 0.25s ease,
			visibility 0.25s;
	}
	.is-menu-open .gnav {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
	.gnav__item {
		height: auto;
		display: flex;
		align-items: center;
		padding: 4.6vw 1vw;
		border-radius: 0;
		border-bottom: 1px solid #dbe5ea;
		font-size: 4.4vw;
		color: var(--ink);
	}
	.gnav__item:first-of-type {
		border-top: 1px solid #dbe5ea;
	}
	.gnav__item:hover {
		background: transparent;
		color: var(--sky);
	}
	.gnav__cta {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 15vw;
		margin-top: 8vw;
		background: var(--deep);
		color: var(--white);
		border-radius: 2.5vw;
		font-size: 4.2vw;
		font-weight: 700;
	}
	.gnav__cta::after {
		content: '';
		position: absolute;
		right: 6%;
		width: 4.5vw;
		aspect-ratio: 18 / 14.73;
		background: currentColor;
		-webkit-mask: url('../img/arrow.svg') no-repeat center / contain;
		mask: url('../img/arrow.svg') no-repeat center / contain;
	}
	.header__logo {
		left: 5vw;
		top: 5vw;
		width: 52vw;
		height: auto;
		z-index: 2;
	}
	.header__menu {
		--bar: 5vw;
		--gap: 1.7vw;
		position: absolute;
		right: 5vw;
		top: 2.25vw;
		z-index: 2;
		display: grid;
		place-items: center;
		width: 10.5vw;
		height: 10.5vw;
		padding: 0;
		border: 0;
		background: var(--deep);
		border-radius: 1.6vw;
		cursor: pointer;
	}
	.header__menu-bar,
	.header__menu-bar::before,
	.header__menu-bar::after {
		content: '';
		display: block;
		width: var(--bar);
		height: 0.55vw;
		background: var(--white);
		border-radius: 0.3vw;
		transition:
			transform 0.25s ease,
			background-color 0.15s ease;
	}
	.header__menu-bar {
		position: relative;
	}
	.header__menu-bar::before {
		position: absolute;
		left: 0;
		top: calc(-1 * var(--gap));
	}
	.header__menu-bar::after {
		position: absolute;
		left: 0;
		top: var(--gap);
	}
	.is-menu-open .header__menu-bar {
		background: transparent;
	}
	.is-menu-open .header__menu-bar::before {
		transform: translateY(var(--gap)) rotate(45deg);
	}
	.is-menu-open .header__menu-bar::after {
		transform: translateY(calc(-1 * var(--gap))) rotate(-45deg);
	}
	.header__mail {
		display: none;
		left: auto;
		right: 5vw;
		top: 5vw;
		width: 13vw;
		height: 13vw;
		border-radius: 2vw;
	}
	.header__mail img {
		width: 5.5vw;
	}
}

/* ==========================================================================
   FV（メインビジュアル）
   ========================================================================== */
.fv {
	position: relative;
	padding: calc(494 * var(--u)) calc(72 * var(--u)) calc(54 * var(--u));
	background: var(--white);
	overflow: hidden;
}
.fv__media {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: calc(740 * var(--u));
	overflow: hidden;
}
.fv__media img {
	position: absolute;
	left: 0;
	top: -24.324%;
	width: 105.972%;
	aspect-ratio: 1526 / 1145;
	height: auto;
	max-width: none;
	object-fit: cover;
}
.fv__fade {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(546 * var(--u));
	height: calc(194 * var(--u));
	background: linear-gradient(to top, var(--white), rgba(255, 255, 255, 0));
}
.fv__label {
	position: relative;
	margin-left: calc(-72 * var(--u));
	display: flex;
	align-items: center;
	color: var(--white);
	font-family: var(--font-en);
	font-weight: 600;
	font-size: calc(26 * var(--u));
	line-height: 1.6;
	white-space: nowrap;
}
.fv__label::before {
	content: '';
	width: calc(60 * var(--u));
	height: 1px;
	background: currentColor;
	margin-right: calc(12 * var(--u));
}
.fv__panel {
	position: absolute;
	left: 0;
	top: calc(546 * var(--u));
	width: calc(720 * var(--u));
	height: calc(194 * var(--u));
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
	border-top-right-radius: calc(52 * var(--u));
}
.fv__title {
	position: relative;
	margin-top: calc(40.4 * var(--u));
	font-size: calc(48 * var(--u));
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.01em;
	white-space: nowrap;
}
.fv__title .is-sky {
	color: var(--sky);
	display: block;
}
.fv__foot {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: calc(40 * var(--u));
	margin-top: calc(40.4 * var(--u));
}
.fv__lead {
	max-width: calc(856 * var(--u));
	padding-left: calc(40 * var(--u));
	border-left: calc(2 * var(--u)) solid var(--sky);
	font-size: calc(20 * var(--u));
	font-weight: 700;
	line-height: 2;
	white-space: nowrap;
}
.fv__btn {
	position: relative;
	flex: none;
	margin-top: calc(50 * var(--u));
	width: calc(400 * var(--u));
	height: calc(70 * var(--u));
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--deep);
	color: var(--white);
	font-size: calc(18 * var(--u));
	font-weight: 700;
	border-radius: calc(12 * var(--u));
	transition: opacity 0.2s;
}
.fv__btn:hover {
	opacity: 0.88;
}
.fv__btn::after {
	content: '';
	position: absolute;
	right: calc(20 * var(--u));
	width: calc(18 * var(--u));
	aspect-ratio: 18 / 14.73;
	background: currentColor;
	-webkit-mask: url('../img/arrow.svg') no-repeat center / contain;
	mask: url('../img/arrow.svg') no-repeat center / contain;
}

/* --- FV（メインビジュアル）：1600px超（左右に余白ができる画面） --- */
@media (min-width: 1601px) {
	.fv {
		overflow: visible;
		clip-path: inset(0 calc(-1 * var(--bleed)));
	}
	.fv__media,
	.fv__fade {
		left: calc(-1 * var(--bleed));
		right: auto;
		width: calc(100% + 2 * var(--bleed));
	}
	.fv__panel {
		left: calc(-1 * var(--bleed));
		width: calc(720 * var(--u) + var(--bleed));
	}
	.fv__label::before {
		margin-left: calc(-1 * var(--bleed));
		width: calc(60 * var(--u) + var(--bleed));
	}
}

/* --- FV（メインビジュアル）：SP（768px以下） --- */
@media (max-width: 768px) {
	.fv {
		height: auto;
		padding-bottom: 10vw;
	}
	.fv__media {
		position: relative;
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
	}
	.fv__media img {
		top: calc(-180 * var(--u));
	}
	.fv__label::before {
		width: 3.5vw;
		height: 1px;
		margin-right: 1.5vw;
	}
	.fv__lead {
		position: relative;
		left: auto;
		top: auto;
		max-width: none;
		margin: 2vw 5vw 0;
		padding-left: 4vw;
		border-left-width: 2px;
		font-size: 3.8vw;
		line-height: 1.9;
		white-space: normal;
	}
	.fv__btn {
		position: relative;
		left: auto;
		top: auto;
		width: 90%;
		height: 15vw;
		margin: 8vw auto 0;
		font-size: 4vw;
		border-radius: 2.5vw;
	}
	.fv__btn::after {
		width: 4.5vw;
		right: 6%;
	}
	.fv__fade {
		top: 53vw;
		bottom: auto;
		height: 22vw;
		transform: none;
		position: absolute;
		left: 0;
		right: 0;
	}
	.fv__panel {
		position: relative;
		left: auto;
		top: auto;
		width: 92%;
		height: auto;
		min-height: 30vw;
		margin-top: -34vw;
		border-top-right-radius: 8vw;
		display: none;
	}
	.fv__title {
		position: relative;
		left: auto;
		top: auto;
		padding: 6vw 5vw;
		font-size: 6.2vw;
		line-height: 1.5;
		white-space: normal;
		width: 92%;
		margin-top: -20vw;
		background: rgba(255, 255, 255, 0.85);
		backdrop-filter: blur(7px);
		-webkit-backdrop-filter: blur(7px);
		border-top-right-radius: 8vw;
	}
	.fv {
		padding-top: 0;
		padding-left: 0;
		padding-right: 0;
	}
	.fv__foot {
		display: block;
	}
	.fv__label {
		position: absolute;
		top: 46vw;
		font-size: 4.4vw;
		margin-left: 0;
	}
}

/* ==========================================================================
   Why?
   ========================================================================== */
.why {
	position: relative;
	padding-top: calc(730 * var(--u));
	overflow: hidden;
}
.why__deco {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	font-family: var(--font-en);
	font-weight: 600;
	font-size: calc(148 * var(--u));
	line-height: 1.6;
	color: #dceef8;
	white-space: nowrap;
	user-select: none;
}
.why__band {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(163 * var(--u));
	height: calc(890 * var(--u));
	padding-top: calc(152 * var(--u));
	overflow: hidden;
	background: linear-gradient(to bottom, rgba(94, 172, 217, 0) 0%, var(--sky) 13.97%, var(--sky) 86.03%, rgba(94, 172, 217, 0) 100%);
}
.why__band-img {
	position: absolute;
	left: calc(-393.39 * var(--u));
	top: calc(142.86 * var(--u));
	width: calc(1933.137 * var(--u));
	height: calc(850.368 * var(--u));
	display: grid;
	place-items: center;
}
.why__band-img img {
	width: calc(1872.399 * var(--u));
	height: calc(642.233 * var(--u));
	object-fit: cover;
	opacity: 0.2;
	transform: rotate(173.49deg) scaleY(-1);
}
.why__ttl {
	position: relative;
	font-size: calc(40 * var(--u));
	font-weight: 700;
	line-height: 2;
	color: var(--white);
	text-align: center;
	white-space: nowrap;
}
.why__sub {
	position: relative;
	margin-top: calc(30 * var(--u));
	font-size: calc(20 * var(--u));
	font-weight: 700;
	line-height: 2;
	color: var(--white);
	text-align: center;
	white-space: nowrap;
}

.why__sub-note {
	position: relative;
	max-width: calc(1100 * var(--u));
	margin: calc(10 * var(--u)) auto 0;
	text-align: center;
	font-size: calc(14 * var(--u));
	font-weight: 500;
	line-height: 1.8;
	color: var(--white);
}
.why__cols {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: calc(80 * var(--u));
	margin: 0 calc(144 * var(--u)) 0 calc(164 * var(--u));
}
.why__col--l {
	flex: 0 0 calc(506 * var(--u));
}
.why__col--r {
	flex: 1 1 auto;
	margin-top: calc(168 * var(--u));
}
.why__photo {
	overflow: hidden;
	background: #d9d9d9;
}
.why__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.why__photo--l {
	height: calc(310 * var(--u));
}
.why__photo--r {
	height: calc(350 * var(--u));
}
.why__h3 {
	margin-top: calc(20 * var(--u));
	font-size: calc(29 * var(--u));
	font-weight: 700;
	line-height: 1.6;
	color: var(--ink);
	text-align: center;
	white-space: nowrap;
}
.why__list {
	margin-top: calc(24.6 * var(--u));
}
.why__list li {
	display: flex;
	gap: calc(8 * var(--u));
	margin-bottom: calc(12 * var(--u));
	font-size: calc(18 * var(--u));
	line-height: 1.6;
	color: var(--ink);
}
.why__list li::before {
	content: '';
	flex: none;
	width: calc(24 * var(--u));
	height: calc(24 * var(--u));
	margin-top: calc(1.5 * var(--u));
	background: var(--white) url('../img/check.svg') no-repeat center / calc(14 * var(--u)) auto;
	border: 1px solid #d9d9d9;
	border-radius: calc(6 * var(--u));
}
.why__list--l li {
	font-weight: 700;
}
.why__list--r li {
	font-weight: 700;
	white-space: nowrap;
}
.why__list b {
	font-weight: 700;
}
.why__pull {
	position: relative;
	margin: calc(8.6 * var(--u)) 0 0 calc(144 * var(--u));
	font-size: calc(54 * var(--u));
	font-weight: 700;
	line-height: 1.6;
	color: var(--sky);
	white-space: nowrap;
}
.why__note {
	position: relative;
	margin: calc(36.2 * var(--u)) 0 0 calc(144 * var(--u));
	font-size: calc(22 * var(--u));
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
}
.why__src {
	position: relative;
	margin: calc(10.8 * var(--u)) 0 0 calc(144 * var(--u));
	font-size: calc(12 * var(--u));
	font-weight: 500;
	line-height: 1.6;
}

/* --- Why?：1600px超（左右に余白ができる画面） --- */
@media (min-width: 1601px) {
	.why {
		overflow: visible;
		clip-path: inset(0 calc(-1 * var(--bleed)));
	}
	.why__band {
		left: calc(-1 * var(--bleed));
		right: auto;
		width: calc(100% + 2 * var(--bleed));
	}
	.why__band-img {
		left: calc(-393.39 * var(--u) - var(--bleed));
		width: calc(1933.137 * var(--u) + 3 * var(--bleed));
	}
	.why__band-img img {
		width: calc(1872.399 * var(--u) + 3 * var(--bleed));
	}
}

/* --- Why?：SP（768px以下） --- */
@media (max-width: 768px) {
	.why__deco {
		font-size: 22vw;
		top: 2vw;
	}
	.why__band {
		position: relative;
		top: auto;
		height: auto;
		margin-top: 14vw;
		padding: 10vw 5vw 28vw;
	}
	.why__band-img {
		display: grid;
		position: absolute;
		inset: 0;
		left: 0;
		top: 0;
		width: auto;
		height: auto;
	}
	.why__band-img img {
		width: 180%;
		max-width: none;
		height: auto;
		opacity: 0.25;
	}
	.why__ttl,
	.why__sub {
		position: relative;
		left: auto;
		top: auto;
		transform: none;
		white-space: normal;
	}
	.why__sub {
		font-size: 3.7vw;
		line-height: 1.9;
		margin-top: 5vw;
	}
	.why__sub-note {
		max-width: none;
		margin-top: 4vw;
		font-size: 3.1vw;
		line-height: 1.8;
		text-align: left;
		text-wrap: pretty;
	}
	.why__photo,
	.why__h3,
	.why__list,
	.why__pull,
	.why__note,
	.why__src {
		position: relative;
		left: auto;
		top: auto;
		transform: none;
		white-space: normal;
	}
	.why__photo {
		width: 90%;
		height: auto;
		aspect-ratio: 506 / 310;
		margin: 10vw auto 0;
	}
	.why__photo--l {
		margin-top: -18vw;
	}
	.why__h3 {
		font-size: 4.6vw;
		margin-top: 6vw;
	}
	.why__list {
		width: 90%;
		margin: 5vw auto 0;
	}
	.why__list li {
		font-size: 3.7vw;
		gap: 2.5vw;
		margin-bottom: 3vw;
	}
	.why__list li::before {
		width: 5.5vw;
		height: 5.5vw;
		margin-top: 0;
		background-size: 3.2vw auto;
		border-radius: 1.5vw;
	}
	.why__list--r li {
		white-space: normal;
	}
	.why__note {
		width: 90%;
		margin: 5vw auto 0;
		font-size: 4vw;
	}
	.why__src {
		width: 90%;
		margin: 2vw auto 0;
		font-size: 3vw;
	}
	.why__sub br {
		display: none;
	}
	.why__ttl {
		font-size: 4.7vw;
		line-height: 1.7;
	}
	.why__pull {
		width: 90%;
		margin: 12vw auto 0;
		font-size: 6.4vw;
		text-wrap: balance;
	}
	.why__sub,
	.why__note {
		text-align: left;
		text-wrap: pretty;
	}
	.why {
		height: auto;
		padding: 12vw 0 14vw;
		padding-bottom: 0;
	}
	.why__cols {
		display: block;
	}
	.why__cols {
		margin: 0;
	}
	.why__col--r {
		margin-top: 0;
	}
}

/* ==========================================================================
   Specification
   ========================================================================== */
.spec {
	position: relative;
	padding: calc(290 * var(--u)) calc(72 * var(--u)) calc(224 * var(--u));
	overflow: hidden;
}
.spec__deco {
	position: absolute;
	left: calc(-6 * var(--u));
	top: 0;
	width: calc(1072.886 * var(--u));
	height: calc(368 * var(--u));
}
.spec__deco img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: var(--wave-tint);
}
.loop {
	position: absolute;
	left: 0;
	width: 100%;
	overflow: hidden;
	font-family: var(--font-en);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	user-select: none;
	pointer-events: none;
}
.loop__track {
	display: flex;
	width: max-content;
	animation: loop-x 40s linear infinite;
	will-change: transform;
}
.loop__track span {
	padding-right: calc(60 * var(--u));
}
.spec__loop {
	z-index: 0;
	top: auto;
	bottom: calc(12 * var(--u));
	font-size: calc(128 * var(--u));
	color: #f5f8fa;
}
.spec__photo {
	position: absolute;
	z-index: 1;
	overflow: hidden;
	background: #d9d9d9;
}
.spec__photo img,
.spec__photo video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.spec__photo--a {
	right: 0;
	top: calc(60 * var(--u));
	width: calc(393 * var(--u));
	height: calc(286 * var(--u));
}
.spec__photo--b {
	left: 0;
	top: calc(485 * var(--u));
	width: calc(553 * var(--u));
	height: calc(402 * var(--u));
}
.spec__photo--c {
	right: calc(70 * var(--u));
	bottom: calc(100 * var(--u));
	width: calc(540 * var(--u));
	height: calc(380 * var(--u));
}
.spec__label {
	position: relative;
	text-align: center;
	font-family: var(--font-en);
	font-weight: 600;
	font-size: calc(28 * var(--u));
	line-height: 1.6;
	color: var(--sky);
	white-space: nowrap;
}
.spec__h2 {
	position: relative;
	margin-top: calc(40.2 * var(--u));
	text-align: center;
	font-size: calc(51 * var(--u));
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
}
.spec__label,
.spec__h2,
.spec__cards,
.spec__body {
	z-index: 2;
}
.spec__cards {
	position: relative;
	display: flex;
	gap: calc(29 * var(--u));
	margin-top: calc(104.4 * var(--u));
}
.spec__card {
	position: relative;
	flex: 1 1 0;
	height: calc(199 * var(--u));
	background: var(--sky);
	border-radius: calc(24 * var(--u));
}
.spec__tag {
	position: absolute;
	left: 50%;
	top: calc(20 * var(--u));
	transform: translateX(-50%);
	padding: calc(8 * var(--u)) calc(30 * var(--u)) calc(7 * var(--u));
	background: #f5f8fa;
	border-radius: calc(40 * var(--u));
	font-size: calc(16 * var(--u));
	font-weight: 700;
	line-height: 1;
	color: var(--deep);
	white-space: nowrap;
}
.spec__val {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	color: var(--white);
	text-align: center;
	white-space: nowrap;
	font-weight: 700;
}
.spec__val--jp {
	top: calc(79 * var(--u));
	font-size: calc(28 * var(--u));
	line-height: 1.2;
}
.spec__val--jp2 {
	top: calc(88 * var(--u));
	font-size: calc(28 * var(--u));
	line-height: 1.5;
}
.spec__val--num {
	top: calc(83 * var(--u));
	font-size: calc(58 * var(--u));
	line-height: 1.6;
	font-family: var(--font-cond);
}
.spec__val--num2 {
	top: calc(71 * var(--u));
	font-size: calc(38 * var(--u));
	line-height: 1;
	font-family: var(--font-cond);
}
.spec__body {
	position: relative;
	margin-top: calc(184 * var(--u));
	font-size: calc(22 * var(--u));
	font-weight: 700;
	line-height: 2;
	white-space: nowrap;
}
.spec__body em {
	font-style: normal;
	color: var(--sky);
}
@keyframes loop-x {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

/* --- Specification：1600px超（左右に余白ができる画面） --- */
@media (min-width: 1601px) {
	.spec {
		overflow: visible;
		clip-path: inset(0 calc(-1 * var(--bleed)));
	}
	.loop {
		left: calc(-1 * var(--bleed));
		right: auto;
		width: calc(100% + 2 * var(--bleed));
	}
	.spec__deco {
		left: calc(-6 * var(--u) - var(--bleed));
		width: calc(1072.886 * var(--u) + var(--bleed));
	}
}

/* --- Specification：SP（768px以下） --- */
@media (max-width: 768px) {
	.spec__label,
	.spec__h2 {
		position: relative;
		left: auto;
		top: auto;
		transform: none;
		white-space: normal;
		text-align: center;
	}
	.spec__label {
		margin-top: 8vw;
		font-size: 4.4vw;
	}
	.spec__h2 {
		margin: 2vw 5vw 0;
		font-size: 6vw;
		line-height: 1.5;
	}
	.spec__photo {
		position: relative;
		left: auto;
		top: auto;
		width: 90%;
		height: auto;
		aspect-ratio: 4 / 3;
		margin: 8vw auto 0;
	}
	.spec__photo--a {
		width: 62%;
		margin: 4vw 0 0 auto;
	}
	.spec__cards {
		position: relative;
		left: auto;
		top: auto;
		height: auto;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 3.5vw;
		width: 90%;
		margin: 9vw auto 0;
	}
	.spec__cards .spec__card {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		height: auto;
		min-height: 40vw;
		padding: 13vw 3vw 5vw;
		border-radius: 4vw;
	}
	.spec__card .spec__tag {
		top: 3.5vw;
		padding: 2vw 4vw;
		border-radius: 8vw;
		font-size: 3.4vw;
	}
	.spec__card .spec__val {
		position: relative;
		left: auto;
		top: auto;
		transform: none;
		font-family: inherit;
	}
	.spec__val--jp,
	.spec__val--jp2 {
		font-size: 4.8vw;
	}
	.spec__val--num {
		font-size: 9.5vw;
		font-family: var(--font-cond);
	}
	.spec__val--num2 {
		font-size: 6vw;
		font-family: var(--font-cond);
	}
	.spec__body {
		position: relative;
		left: auto;
		top: auto;
		width: 90%;
		margin: 9vw auto 0;
		white-space: normal;
		font-size: 4vw;
		line-height: 1.9;
	}
	.spec__deco {
		position: absolute;
		left: -20vw;
		top: 26vw;
		width: 90vw;
		height: 31vw;
	}
	.spec__loop {
		position: relative;
		top: auto;
		bottom: auto;
		margin-top: 8vw;
		font-size: 15vw;
	}
	.spec {
		height: auto;
		padding: 10vw 0 14vw;
		padding-bottom: 12vw;
	}
	.loop__track {
		animation-duration: 120s;
		will-change: transform;
	}
	.spec__photo--a,
	.spec__photo--c {
		right: auto;
		bottom: auto;
	}
}

/* ==========================================================================
   Our Strength
   ========================================================================== */
.str {
	position: relative;
	padding: calc(100 * var(--u)) calc(71 * var(--u)) calc(42.8 * var(--u));
	background: #f5f8fa;
	overflow: hidden;
}
.str__deco {
	position: absolute;
	right: calc(-36 * var(--u));
	bottom: calc(-22 * var(--u));
	width: calc(778 * var(--u));
	height: calc(302 * var(--u));
}
.str__deco img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scaleY(-1);
	filter: var(--wave-tint);
}
.str__deco-fade {
	position: absolute;
	left: calc(698 * var(--u));
	bottom: 0;
	width: calc(370 * var(--u));
	height: calc(245 * var(--u));
	background: linear-gradient(to left, rgba(245, 248, 250, 0) 0%, #f5f8fa 75.481%);
}
.str__label {
	position: relative;
	display: flex;
	align-items: center;
	gap: calc(19 * var(--u));
	margin: 0 calc(-71 * var(--u));
	font-family: var(--font-en);
	font-weight: 500;
	font-size: calc(28 * var(--u));
	line-height: 1.6;
	color: var(--sky);
	white-space: nowrap;
}
.str__label::before,
.str__label::after {
	content: '';
	position: relative;
	top: calc(-1.9 * var(--u));
	border-top: 1px solid #d9d9d9;
}
.str__label::before {
	flex: 0 0 calc(52 * var(--u));
}
.str__label::after {
	flex: 1 1 auto;
}
.str__h2 {
	position: relative;
	margin-top: calc(33.2 * var(--u));
	font-size: calc(48 * var(--u));
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
}
.str__lead {
	position: relative;
	margin-top: calc(50 * var(--u));
	font-size: calc(18 * var(--u));
	font-weight: 700;
	line-height: 1.6;
}
.str__lead em {
	font-style: normal;
	color: var(--sky);
}
.str__cards {
	position: relative;
	display: flex;
	gap: calc(30 * var(--u));
	margin-top: calc(50 * var(--u));
}
.str__card {
	flex: 1 1 0;
	padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(33 * var(--u));
	background: var(--sky);
	border-radius: calc(12 * var(--u));
}
.str__thumb {
	width: 100%;
	height: calc(170 * var(--u));
	border-radius: calc(12 * var(--u));
	overflow: hidden;
	background: var(--sky);
}
.str__thumb img {
	width: 100%;
	height: calc(100% + 1px);
	object-fit: cover;
}
.str__ttl {
	margin-top: calc(20 * var(--u));
	font-size: calc(20 * var(--u));
	font-weight: 700;
	line-height: 1.6;
	color: var(--white);
	text-align: center;
}
.str__card hr {
	margin: calc(11 * var(--u)) 0 calc(19 * var(--u));
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.6);
}
.str__desc {
	font-size: calc(15 * var(--u));
	font-weight: 500;
	line-height: 1.6;
	color: var(--white);
	text-align: center;
}
.str__pull {
	position: relative;
	margin-top: calc(80 * var(--u));
	font-size: calc(36 * var(--u));
	font-weight: 700;
	line-height: 1.6;
	color: var(--sky);
	white-space: nowrap;
}

/* --- Our Strength：1600px超（左右に余白ができる画面） --- */
@media (min-width: 1601px) {
	.str {
		overflow: visible;
		clip-path: inset(0 calc(-1 * var(--bleed)));
	}
	.str {
		box-sizing: content-box;
		margin-left: calc(-1 * var(--bleed));
		margin-right: calc(-1 * var(--bleed));
		border-left: var(--bleed) solid;
		border-right: var(--bleed) solid;
	}
	.str {
		border-color: #f5f8fa;
	}
	.str__label {
		margin: 0 calc(-71 * var(--u) - var(--bleed));
	}
	.str__label::before {
		flex: 0 0 calc(52 * var(--u) + var(--bleed));
	}
	.str__deco {
		right: calc(-36 * var(--u) - var(--bleed));
		width: calc(778 * var(--u) + 2 * var(--bleed));
	}
	.str__deco-fade {
		left: calc(698 * var(--u) - var(--bleed));
		width: calc(370 * var(--u) + var(--bleed));
	}
}

/* --- Our Strength：SP（768px以下） --- */
@media (max-width: 768px) {
	.str__deco,
	.str__deco-fade {
		display: none;
	}
	.str__label,
	.str__h2,
	.str__lead {
		position: relative;
		left: auto;
		right: auto;
		top: auto;
		white-space: normal;
	}
	.str__label {
		height: auto;
		margin: -3vw 0 0 5vw;
		font-size: 4.4vw;
		background: transparent;
	}
	.str__h2 {
		margin: 4vw 5vw 0;
		font-size: 6vw;
		line-height: 1.5;
		text-align: left;
		letter-spacing: -0.03em;
	}
	.str__lead {
		position: relative;
		left: auto;
		top: auto;
		width: 90%;
		margin: 5vw auto 0;
		font-size: 3.8vw;
		line-height: 1.9;
	}
	.str__cards {
		position: relative;
		left: auto;
		top: auto;
		height: auto;
		display: grid;
		grid-template-columns: 1fr;
		gap: 5vw;
		width: 90%;
		margin: 9vw auto 0;
	}
	.str__cards .str__card {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		height: auto;
		padding: 5vw 5vw 7vw;
		border-radius: 3vw;
	}
	.str__thumb {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		height: auto;
		aspect-ratio: 262 / 170;
		border-radius: 2.5vw;
	}
	.str__ttl {
		position: relative;
		left: auto;
		top: auto;
		transform: none;
		width: 100%;
		margin-top: 4vw;
		font-size: 5vw;
	}
	.str__card hr {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		margin: 3.5vw 0;
	}
	.str__desc {
		position: relative;
		left: auto;
		top: auto;
		transform: none;
		width: 100%;
		font-size: 3.7vw;
	}
	.str__pull {
		position: relative;
		left: auto;
		top: auto;
		width: 90%;
		margin: 10vw auto 0;
		white-space: normal;
		font-size: 6vw;
	}
	.str__label {
		margin-top: 0;
	}
	.str {
		height: auto;
		padding: 12vw 0 14vw;
		padding-top: 8vw;
	}
	.str__label {
		display: flex;
		align-items: center;
		gap: 1.5vw;
		width: auto;
		margin-left: 0;
		margin-right: 0;
		padding: 0;
	}
	.str__label::before,
	.str__label::after {
		content: '';
		position: static;
		height: 0;
		margin: 0;
		border-top: 1px solid #d9d9d9;
	}
	.str__label::before {
		flex: 0 0 3.5vw;
	}
	.str__label::after {
		flex: 1 1 auto;
	}
}

/* ==========================================================================
   What It Enables
   ========================================================================== */
.en__thumb {
	width: 100%;
	height: calc(170 * var(--u));
	border-radius: calc(12 * var(--u));
	overflow: hidden;
	background: var(--sky);
}
.en__thumb img {
	width: 100%;
	height: calc(100% + 1px);
	object-fit: cover;
}
.en__ttl {
	margin-top: calc(20 * var(--u));
	font-size: calc(20 * var(--u));
	font-weight: 700;
	line-height: 1.6;
	color: var(--white);
	text-align: center;
}
.en__card hr {
	margin: calc(11 * var(--u)) 0 calc(19 * var(--u));
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.6);
}
.en__desc {
	font-size: calc(15 * var(--u));
	font-weight: 500;
	line-height: 1.6;
	color: var(--white);
	text-align: center;
}
.en {
	position: relative;
	padding: calc(100 * var(--u)) calc(72 * var(--u));
	background: #f5f8fa;
	overflow: hidden;
}
.en__label {
	display: flex;
	align-items: center;
	gap: calc(19 * var(--u));
	margin: 0 calc(-72 * var(--u));
	font-family: var(--font-en);
	font-weight: 500;
	font-size: calc(28 * var(--u));
	line-height: 1.6;
	color: var(--sky);
	white-space: nowrap;
}
.en__label::before,
.en__label::after {
	content: '';
	position: relative;
	top: calc(-1.9 * var(--u));
	border-top: 1px solid #d9d9d9;
}
.en__label::before {
	flex: 1 1 auto;
}
.en__label::after {
	flex: 0 0 calc(70 * var(--u));
}
.en__h2 {
	margin-top: calc(33.2 * var(--u));
	font-size: calc(48 * var(--u));
	font-weight: 700;
	line-height: 1.6;
	text-align: right;
	white-space: nowrap;
}
.en__cards {
	display: flex;
	gap: calc(30 * var(--u));
	margin-top: calc(56.2 * var(--u));
}
.en__card {
	flex: 1 1 0;
	padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(33 * var(--u));
	background: var(--sky);
	border-radius: calc(12 * var(--u));
}

/* --- What It Enables：1600px超（左右に余白ができる画面） --- */
@media (min-width: 1601px) {
	.en {
		overflow: visible;
		clip-path: inset(0 calc(-1 * var(--bleed)));
	}
	.en {
		box-sizing: content-box;
		margin-left: calc(-1 * var(--bleed));
		margin-right: calc(-1 * var(--bleed));
		border-left: var(--bleed) solid;
		border-right: var(--bleed) solid;
	}
	.en {
		border-color: #f5f8fa;
	}
	.en__label {
		margin: 0 calc(-72 * var(--u) - var(--bleed));
	}
	.en__label::after {
		flex: 0 0 calc(70 * var(--u) + var(--bleed));
	}
}

/* --- What It Enables：SP（768px以下） --- */
@media (max-width: 768px) {
	.en {
		height: auto;
		padding: 0 0 14vw;
	}
	.en__label,
	.en__h2,
	.en__h2 {
		position: relative;
		left: auto;
		right: auto;
		top: auto;
		white-space: normal;
	}
	.en__label {
		height: auto;
		margin: -3vw 0 0 5vw;
		font-size: 4.4vw;
		background: transparent;
	}
	.en__h2 {
		margin: 4vw 5vw 0;
		font-size: 6vw;
		line-height: 1.5;
		text-align: left;
	}
	.en__cards {
		position: relative;
		left: auto;
		top: auto;
		height: auto;
		display: grid;
		grid-template-columns: 1fr;
		gap: 5vw;
		width: 90%;
		margin: 9vw auto 0;
	}
	.en__cards .en__card {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		height: auto;
		padding: 5vw 5vw 7vw;
		border-radius: 3vw;
	}
	.en__thumb {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		height: auto;
		aspect-ratio: 262 / 170;
		border-radius: 2.5vw;
	}
	.en__ttl {
		position: relative;
		left: auto;
		top: auto;
		transform: none;
		width: 100%;
		margin-top: 4vw;
		font-size: 5vw;
	}
	.en__card hr {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		margin: 3.5vw 0;
	}
	.en__desc {
		position: relative;
		left: auto;
		top: auto;
		transform: none;
		width: 100%;
		font-size: 3.7vw;
	}
	.en__label {
		margin-top: 0;
	}
	.en__label {
		display: flex;
		align-items: center;
		gap: 1.5vw;
		width: auto;
		margin-left: 0;
		margin-right: 0;
		padding: 0;
	}
	.en__label::before,
	.en__label::after {
		content: '';
		position: static;
		height: 0;
		margin: 0;
		border-top: 1px solid #d9d9d9;
	}
	.en__label::before {
		flex: 0 0 3.5vw;
	}
	.en__label::after {
		flex: 1 1 auto;
	}
}

/* ==========================================================================
   Use Cases
   ========================================================================== */
.uc {
	position: relative;
	padding: calc(163 * var(--u)) calc(144 * var(--u)) calc(1 * var(--u));
	overflow: hidden;
}
.uc__bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: calc(400 * var(--u));
	overflow: hidden;
}
.uc__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 85%;
}
.uc__deco {
	position: absolute;
	left: calc(-39.77 * var(--u));
	top: calc(459.45 * var(--u));
	width: calc(1513.763 * var(--u));
	height: calc(630.168 * var(--u));
	display: grid;
	place-items: center;
	opacity: 0.5;
}
.uc__deco img {
	width: calc(1476 * var(--u));
	height: calc(506.268 * var(--u));
	object-fit: cover;
	opacity: 0.9;
	transform: rotate(-175.11deg) scaleY(-1);
	filter: var(--wave-tint);
}
.uc__label {
	position: relative;
	text-align: center;
	font-family: var(--font-en);
	font-weight: 600;
	font-size: calc(46 * var(--u));
	line-height: 1.6;
	color: var(--white);
	white-space: nowrap;
	text-shadow: 0 calc(2 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, 0.35);
}
.uc__hero {
	position: relative;
	display: flex;
	gap: calc(50 * var(--u));
	margin-top: calc(17.4 * var(--u));
	min-height: calc(300 * var(--u));
	padding: calc(50 * var(--u));
	background: #f5f8fa;
	border-radius: calc(24 * var(--u));
}
.uc__hero > div:last-child,
.uc__hero > .uc__body {
	flex: 1 1 auto;
}
.uc__icon {
	position: relative;
	flex: none;
	width: calc(200 * var(--u));
	height: calc(200 * var(--u));
}
.uc__icon .ring {
	width: 100%;
	height: 100%;
}
.uc__icon .pic {
	position: absolute;
	left: calc(36 * var(--u));
	top: calc(36 * var(--u));
	width: calc(128 * var(--u));
	height: calc(128 * var(--u));
	object-fit: contain;
}
.uc__tag {
	margin-top: calc(13 * var(--u));
	width: calc(144 * var(--u));
	height: calc(28 * var(--u));
	display: flex;
	align-items: center;
	padding-left: calc(30 * var(--u));
	background: var(--deep);
	border-radius: calc(30 * var(--u));
	font-size: calc(14 * var(--u));
	font-weight: 700;
	line-height: 1.6;
	color: var(--white);
}
.uc__ttl {
	margin-top: calc(10 * var(--u));
	font-size: calc(24 * var(--u));
	font-weight: 700;
	line-height: 1.6;
	color: var(--deep);
}
.uc__hero hr {
	margin: calc(29.6 * var(--u)) 0 calc(19 * var(--u));
	border: 0;
	border-top: 1px solid #dceef8;
}
.uc__desc {
	max-width: calc(802 * var(--u));
	font-size: calc(15 * var(--u));
	font-weight: 500;
	line-height: 1.6;
}
.uc__h2 {
	position: relative;
	margin-top: calc(80 * var(--u));
	font-size: calc(48 * var(--u));
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
	white-space: nowrap;
}
.uc__h2 em {
	font-style: normal;
	color: var(--sky);
}
.uc__rail-wrap {
	position: relative;
	margin: calc(98.4 * var(--u)) calc(-144 * var(--u)) 0;
	height: calc(298 * var(--u));
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.uc__rail-wrap::-webkit-scrollbar {
	display: none;
}
.uc__rail {
	display: flex;
	gap: calc(16 * var(--u));
	width: max-content;
	padding: 0 calc(88 * var(--u));
}
.uc__item {
	position: relative;
	flex: none;
	width: calc(412 * var(--u));
	height: calc(298 * var(--u));
	background: #f5f8fa;
	border-radius: calc(24 * var(--u));
}
.uc__item .ring {
	position: absolute;
	left: calc(30 * var(--u));
	top: calc(30 * var(--u));
	width: calc(120 * var(--u));
	height: calc(120 * var(--u));
}
.uc__item .pic {
	position: absolute;
	object-fit: contain;
}
.uc__item h3 {
	position: absolute;
	left: calc(170 * var(--u));
	top: calc(74 * var(--u));
	width: calc(222 * var(--u));
	font-size: calc(24 * var(--u));
	font-weight: 700;
	line-height: 1.6;
	color: var(--deep);
}
.uc__item hr {
	position: absolute;
	left: calc(30 * var(--u));
	top: calc(171 * var(--u));
	width: calc(352 * var(--u));
	margin: 0;
	border: 0;
	border-top: 1px solid #dceef8;
}
.uc__item p {
	position: absolute;
	left: calc(30 * var(--u));
	top: calc(191 * var(--u));
	width: calc(352 * var(--u));
	font-size: calc(15 * var(--u));
	font-weight: 500;
	line-height: 1.6;
}
.uc__fade--l {
	left: 0;
}
.uc__fade--r {
	right: 0;
}
.uc__fade img {
	width: 100%;
	height: 100%;
}
.uc__fade {
	position: absolute;
	top: calc(886 * var(--u));
	width: calc(200 * var(--u));
	height: calc(298 * var(--u));
	pointer-events: none;
}
.uc__nav {
	position: absolute;
	top: calc(1001 * var(--u));
	width: calc(68 * var(--u));
	height: calc(68 * var(--u));
	padding: 0;
	border: 0;
	background: transparent;
	border-radius: calc(12 * var(--u));
	cursor: pointer;
	z-index: 2;
	transition: opacity 0.2s;
}
.uc__nav:hover {
	opacity: 0.75;
}
.uc__nav:focus-visible {
	outline: 2px solid var(--deep);
	outline-offset: 3px;
}
.uc__nav--prev {
	left: calc(72 * var(--u));
}
.uc__nav--next {
	right: calc(72 * var(--u));
}
.uc__fade--r img {
	transform: scaleX(-1);
}

/* --- Use Cases：1600px超（左右に余白ができる画面） --- */
@media (min-width: 1601px) {
	.uc {
		overflow: visible;
		clip-path: inset(0 calc(-1 * var(--bleed)));
	}
	.uc__bg {
		left: calc(-1 * var(--bleed));
		right: auto;
		width: calc(100% + 2 * var(--bleed));
	}
	.uc__deco {
		left: calc(-39.77 * var(--u) - var(--bleed));
		width: calc(1513.763 * var(--u) + 2 * var(--bleed));
	}
	.uc__deco img {
		width: calc(1476 * var(--u) + 2 * var(--bleed));
	}
}

/* --- Use Cases：SP（768px以下） --- */
@media (max-width: 768px) {
	.uc__bg {
		height: 62vw;
	}
	.uc__bg img {
		object-position: 100% 50%;
	}
	.uc__deco {
		display: none;
	}
	.uc__icon {
		position: relative;
		left: auto;
		top: auto;
		width: 30vw;
		height: 30vw;
		margin: 0 auto;
	}
	.uc__icon .pic {
		left: 5.5vw;
		top: 5.5vw;
		width: 19vw;
		height: 19vw;
	}
	.uc__tag,
	.uc__ttl,
	.uc__desc {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
	}
	.uc__tag {
		width: max-content;
		height: auto;
		margin: 5vw auto 0;
		padding: 2.5vw 5vw;
		font-size: 3.6vw;
		border-radius: 8vw;
	}
	.uc__ttl {
		margin-top: 4vw;
		font-size: 5vw;
		text-align: center;
	}
	.uc__hero hr {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		margin: 4vw 0;
	}
	.uc__desc {
		font-size: 3.7vw;
		line-height: 1.9;
	}
	.uc__h2 {
		position: relative;
		left: auto;
		top: auto;
		transform: none;
		margin: 11vw 5vw 0;
		font-size: 6vw;
		line-height: 1.5;
		white-space: normal;
	}
	.uc__rail {
		gap: 4vw;
		padding: 0;
	}
	.uc__item {
		width: 78vw;
		height: auto;
		min-height: 62vw;
		padding: 6vw 5vw;
		border-radius: 4vw;
		scroll-snap-align: center;
	}
	.uc__item hr {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		margin: 3.5vw 0;
	}
	.uc__item p {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		font-size: 3.7vw;
		line-height: 1.9;
	}
	.uc__fade {
		display: none;
	}
	.uc__slider {
		position: relative;
	}
	.uc__nav {
		display: grid;
		place-items: center;
		top: 45%;
		transform: translateY(-50%);
		width: 12vw;
		height: 12vw;
		background: var(--sky);
		border-radius: 2vw;
		box-shadow: 0 0.5vw 2vw rgba(39, 97, 116, 0.2);
	}
	.uc__nav--prev {
		left: 1.5vw;
	}
	.uc__nav--next {
		right: 1.5vw;
	}
	.uc__nav::after {
		content: '';
		width: 4.4vw;
		aspect-ratio: 18 / 14.73;
		background: var(--white);
		-webkit-mask: url('../img/arrow.svg') no-repeat center / contain;
		mask: url('../img/arrow.svg') no-repeat center / contain;
	}
	.uc__nav--prev::after {
		transform: scaleX(-1);
	}
	.uc__hero {
		position: relative;
		left: auto;
		top: auto;
		width: 90%;
		height: auto;
		margin: -10vw auto 0;
		padding: 7vw 5vw;
		border-radius: 4vw;
		margin-top: 54vw;
	}
	.uc__item .ring {
		position: relative;
		left: auto;
		top: auto;
		width: 22vw;
		height: 22vw;
		display: block;
		margin: 0 auto;
	}
	.uc__item .pic {
		left: 50% !important;
		top: 11vw !important;
		width: 12vw !important;
		height: 12vw !important;
		transform: translateX(-50%);
	}
	.uc__item h3 {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		margin-top: 4vw;
		font-size: 5vw;
		text-align: center;
	}
	.uc {
		height: auto;
		padding-bottom: 5vw;
	}
	.uc {
		padding-top: 0;
		padding-left: 0;
		padding-right: 0;
	}
	.uc__hero {
		display: block;
	}
	.uc__rail-wrap {
		position: relative;
		left: auto;
		top: auto;
		height: auto;
		margin-top: 9vw;
		padding: 0 5vw 4vw;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		margin-left: 0;
		margin-right: 0;
	}
	.uc__label {
		position: absolute;
		top: 36vw;
		font-size: 8vw;
		left: 0;
		right: 0;
	}
	.uc__desc {
		max-width: none;
	}
}

/* ==========================================================================
   Type Certification
   ========================================================================== */
.cert {
	position: relative;
	margin-top: calc(120 * var(--u));
	padding: 0 calc(72 * var(--u)) calc(103.2 * var(--u));
	overflow: hidden;
}
.cert__label {
	display: flex;
	align-items: center;
	gap: calc(20 * var(--u));
	margin: 0 calc(-72 * var(--u));
	font-family: var(--font-en);
	font-weight: 500;
	font-size: calc(28 * var(--u));
	line-height: 1.6;
	color: var(--sky);
	white-space: nowrap;
}
.cert__label::before,
.cert__label::after {
	content: '';
	position: relative;
	top: calc(-1.9 * var(--u));
	border-top: 1px solid #d9d9d9;
}
.cert__label::before {
	flex: 1 1 auto;
}
.cert__label::after {
	flex: 0 0 calc(52 * var(--u));
}
.cert__h2 {
	margin-top: calc(45.2 * var(--u));
	font-size: calc(44 * var(--u));
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
}
.cert__h2 em {
	font-style: normal;
	color: var(--sky);
}
.cert__lead {
	margin-top: calc(39.6 * var(--u));
	font-size: calc(18 * var(--u));
	font-weight: 700;
	line-height: 1.9;
}
.cert__items {
	display: flex;
	gap: calc(30 * var(--u));
	margin-top: calc(50 * var(--u));
}
.cert__item {
	flex: 1 1 0;
	min-height: calc(210 * var(--u));
	padding: calc(24 * var(--u));
	background: var(--sky);
	border-radius: calc(12 * var(--u));
	color: var(--white);
}
.cert__item .no {
	display: block;
	font-family: var(--font-en);
	font-weight: 600;
	font-size: calc(13 * var(--u));
	line-height: 1.6;
	opacity: 0.8;
}
.cert__item h3 {
	margin-top: calc(6 * var(--u));
	font-size: calc(19 * var(--u));
	font-weight: 700;
	line-height: 1.5;
}
.cert__item hr {
	margin: calc(12 * var(--u)) 0;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.6);
}
.cert__item p {
	font-size: calc(14 * var(--u));
	font-weight: 500;
	line-height: 1.7;
}
.cert__note {
	margin-top: calc(20 * var(--u));
	font-size: calc(13 * var(--u));
	font-weight: 500;
	line-height: 1.8;
	color: var(--sub, #57666d);
}

/* --- Type Certification：1600px超（左右に余白ができる画面） --- */
@media (min-width: 1601px) {
	.cert {
		overflow: visible;
		clip-path: inset(0 calc(-1 * var(--bleed)));
	}
	.cert__label {
		margin: 0 calc(-72 * var(--u) - var(--bleed));
	}
	.cert__label::after {
		flex: 0 0 calc(52 * var(--u) + var(--bleed));
	}
}

/* --- Type Certification：SP（768px以下） --- */
@media (max-width: 768px) {
	.cert__label {
		position: relative;
		left: auto;
		top: auto;
		height: auto;
		margin: -3vw 0 0 5vw;
		font-size: 4.4vw;
		background: transparent;
	}
	.cert__h2 {
		position: relative;
		left: auto;
		top: auto;
		margin: 5vw 5vw 0;
		font-size: 6vw;
		line-height: 1.5;
		white-space: normal;
	}
	.cert__lead {
		position: relative;
		left: auto;
		top: auto;
		width: 90%;
		margin: 5vw auto 0;
		font-size: 3.8vw;
		line-height: 1.9;
	}
	.cert__items {
		position: relative;
		left: auto;
		top: auto;
		height: auto;
		display: grid;
		grid-template-columns: 1fr;
		gap: 4vw;
		width: 90%;
		margin: 8vw auto 0;
	}
	.cert__items .cert__item {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		height: auto;
		padding: 6vw 5vw;
		border-radius: 3vw;
	}
	.cert__badge {
		padding: 1.8vw 4.5vw;
		border-radius: 8vw;
		font-size: 3.4vw;
	}
	.cert__item .no {
		font-size: 3.2vw;
	}
	.cert__item h3 {
		margin-top: 1.5vw;
		font-size: 4.8vw;
	}
	.cert__item hr {
		margin: 3.5vw 0;
	}
	.cert__item p {
		font-size: 3.7vw;
	}
	.cert__note {
		position: relative;
		left: auto;
		top: auto;
		width: 90%;
		margin: 7vw auto 0;
		font-size: 3.2vw;
	}
	.cert__label {
		margin-top: 0;
	}
	.cert {
		height: auto;
		padding: 12vw 0 14vw;
		margin-top: 0;
		padding-top: 5vw;
	}
	.cert__label {
		display: flex;
		align-items: center;
		gap: 1.5vw;
		width: auto;
		margin-left: 0;
		margin-right: 0;
		padding: 0;
	}
	.cert__label {
		right: auto;
	}
	.cert__label::before,
	.cert__label::after {
		content: '';
		position: static;
		height: 0;
		margin: 0;
		border-top: 1px solid #d9d9d9;
	}
	.cert__label::before {
		flex: 0 0 3.5vw;
	}
	.cert__label::after {
		flex: 1 1 auto;
	}
}

/* ==========================================================================
   In Action
   ========================================================================== */
.ia {
	position: relative;
	padding: calc(97 * var(--u)) calc(72 * var(--u)) calc(177 * var(--u));
	overflow: hidden;
}
.ia__bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: calc(740 * var(--u));
	background: var(--sky);
}
.ia__label {
	position: relative;
	display: flex;
	align-items: center;
	gap: calc(19 * var(--u));
	margin: 0 calc(-72 * var(--u));
	font-family: var(--font-en);
	font-weight: 500;
	font-size: calc(28 * var(--u));
	line-height: 1.6;
	color: var(--white);
	white-space: nowrap;
}
.ia__label::before,
.ia__label::after {
	content: '';
	position: relative;
	top: calc(-1.9 * var(--u));
	border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.ia__label::before {
	flex: 0 0 calc(53 * var(--u));
}
.ia__label::after {
	flex: 1 1 auto;
}
.ia__main {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0 calc(40 * var(--u));
	margin-top: calc(38.2 * var(--u));
	flex-wrap: wrap;
}
.ia__h2 {
	margin-top: calc(94 * var(--u));
	font-size: calc(48 * var(--u));
	font-weight: 700;
	line-height: 1.6;
	color: var(--white);
	white-space: nowrap;
}
.ia__video {
	order: -1;
	flex: 0 0 calc(640 * var(--u));
	height: calc(360 * var(--u));
	background: var(--ink);
	display: grid;
	place-items: center;
	color: rgba(255, 255, 255, 0.6);
	font-size: calc(14 * var(--u));
	overflow: hidden;
}
.ia__video video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ia__note {
	width: 100%;
	color: #fff;
	margin-top: calc(14 * var(--u));
	font-size: calc(12 * var(--u));
	font-weight: 500;
	line-height: 1.6;
}
.ia__note--shots {
	position: relative;
	color: var(--ink);
}
.ia__shots {
	position: relative;
	display: flex;
	gap: calc(30 * var(--u));
	margin-top: calc(50 * var(--u));
}
.ia__shot {
	flex: 1 1 0;
	height: calc(232 * var(--u));
	overflow: hidden;
	background: #d9d9d9;
}
.ia__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ia__loop {
	top: auto;
	bottom: calc(21 * var(--u));
	font-size: calc(128 * var(--u));
	color: var(--sky);
}

/* --- In Action：1600px超（左右に余白ができる画面） --- */
@media (min-width: 1601px) {
	.ia {
		overflow: visible;
		clip-path: inset(0 calc(-1 * var(--bleed)));
	}
	.ia__bg {
		left: calc(-1 * var(--bleed));
		right: auto;
		width: calc(100% + 2 * var(--bleed));
	}
	.ia__label {
		margin: 0 calc(-72 * var(--u) - var(--bleed));
	}
	.ia__label::before {
		flex: 0 0 calc(53 * var(--u) + var(--bleed));
	}
}

/* --- In Action：SP（768px以下） --- */
@media (max-width: 768px) {
	.ia__h2 {
		position: relative;
		left: auto;
		top: auto;
		margin: 5vw 5vw 0;
		font-size: 6vw;
		white-space: normal;
	}
	.ia__video {
		position: relative;
		left: auto;
		top: auto;
		width: 90%;
		height: auto;
		aspect-ratio: 16 / 9;
		margin: 7vw auto 0;
		font-size: 3.4vw;
	}
	.ia__note {
		width: 90%;
		margin: 2vw auto 0;
		font-size: 3.2vw;
	}
	.ia__note--shots {
		color: #fff;
	}
	.ia__shots {
		position: relative;
		left: auto;
		top: auto;
		height: auto;
		display: grid;
		gap: 4vw;
		width: 90%;
		margin: 7vw auto 0;
	}
	.ia__shots .ia__shot {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		height: auto;
		aspect-ratio: 412 / 232;
	}
	.ia {
		height: auto;
		padding-bottom: 13vw;
	}
	.ia__label {
		position: relative;
		left: auto;
		top: auto;
		height: auto;
		margin: -3vw 0 0 5vw;
		font-size: 4.4vw;
		background: transparent;
		margin-top: 10vw;
	}
	.ia__bg {
		height: calc(100% - 25vw);
	}
	.ia__loop {
		position: relative;
		top: auto;
		bottom: calc(-20 * var(--u));
		margin-top: 6vw;
		font-size: 13vw;
		display: block;
	}
	.ia__label {
		display: flex;
		align-items: center;
		gap: 1.5vw;
		width: auto;
		margin-left: 0;
		margin-right: 0;
		padding: 0;
	}
	.ia__label::before,
	.ia__label::after {
		content: '';
		position: static;
		height: 0;
		margin: 0;
		border-top: 1px solid #d9d9d9;
	}
	.ia__label::before,
	.ia__label::after {
		border-top-color: rgba(255, 255, 255, 0.5);
	}
	.ia__label::before {
		flex: 0 0 3.5vw;
	}
	.ia__label::after {
		flex: 1 1 auto;
	}
	.ia {
		padding-top: 0;
		padding-left: 0;
		padding-right: 0;
	}
	.ia__main {
		display: block;
	}
}

/* ==========================================================================
   Track Record
   ========================================================================== */
.tr {
	position: relative;
	margin: calc(77 * var(--u)) 0 calc(100 * var(--u));
	padding: 0 calc(72 * var(--u)) calc(28.6 * var(--u));
	overflow: hidden;
}
.tr__photo {
	position: absolute;
	right: 0;
	top: calc(80 * var(--u));
	width: calc(636 * var(--u));
	height: calc(875 * var(--u));
	overflow: hidden;
	background: #d9d9d9;
}
.tr__photo img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 100% 100%;
}
.tr__label {
	position: relative;
	display: flex;
	align-items: center;
	gap: calc(20 * var(--u));
	margin: 0 calc(-72 * var(--u));
	font-family: var(--font-en);
	font-weight: 500;
	font-size: calc(28 * var(--u));
	line-height: 1.6;
	color: var(--sky);
	white-space: nowrap;
}
.tr__label::before,
.tr__label::after {
	content: '';
	position: relative;
	top: calc(-1.9 * var(--u));
	border-top: 1px solid #d9d9d9;
}
.tr__label::before {
	flex: 1 1 auto;
}
.tr__label::after {
	flex: 0 0 calc(52 * var(--u));
}
.tr__h2 {
	position: relative;
	margin-top: calc(139.2 * var(--u));
	font-size: calc(48 * var(--u));
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
}
.tr__cards {
	position: relative;
	display: flex;
	gap: calc(30 * var(--u));
	margin-top: calc(78.4 * var(--u));
}
.tr__card {
	position: relative;
	flex: 1 1 0;
	height: calc(216 * var(--u));
	background: var(--sky);
	border-radius: calc(24 * var(--u));
}
.tr__tag {
	position: absolute;
	left: 50%;
	top: calc(20 * var(--u));
	transform: translateX(-50%);
	padding: calc(8 * var(--u)) calc(30 * var(--u)) calc(7 * var(--u));
	background: #f5f8fa;
	border-radius: calc(40 * var(--u));
	font-size: calc(16 * var(--u));
	font-weight: 700;
	line-height: 1;
	color: var(--sky);
	white-space: nowrap;
}
.tr__num {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(68 * var(--u));
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: calc(6 * var(--u));
	color: var(--white);
	white-space: nowrap;
}
.tr__num b {
	font-family: var(--font-cond);
	font-weight: 700;
	font-size: calc(68 * var(--u));
	line-height: 1.6;
}
.tr__num span {
	font-weight: 700;
	font-size: calc(28 * var(--u));
	line-height: 1.6;
}
.tr__period {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(159 * var(--u));
	text-align: center;
	font-size: calc(18 * var(--u));
	font-weight: 700;
	line-height: 1.6;
	color: var(--white);
}
.tr__pill {
	position: relative;
	margin-top: calc(60 * var(--u));
	width: calc(298 * var(--u));
	height: calc(53 * var(--u));
	display: flex;
	align-items: center;
	padding-left: calc(50 * var(--u));
	border: 1px solid var(--sky);
	border-radius: calc(50 * var(--u));
	font-size: calc(30 * var(--u));
	font-weight: 700;
	line-height: 1.6;
	color: var(--sky);
	white-space: nowrap;
}
.tr__body {
	position: relative;
	margin: calc(31 * var(--u)) 0 0 calc(50 * var(--u));
	max-width: calc(632 * var(--u));
	font-size: calc(24 * var(--u));
	font-weight: 700;
	line-height: 1.6;
}
.tr__note {
	position: relative;
	margin: calc(15.8 * var(--u)) 0 0 calc(50 * var(--u));
	font-size: calc(12 * var(--u));
	font-weight: 500;
	line-height: 1.6;
}

/* --- Track Record：1600px超（左右に余白ができる画面） --- */
@media (min-width: 1601px) {
	.tr {
		overflow: visible;
		clip-path: inset(0 calc(-1 * var(--bleed)));
	}
	.tr__label {
		margin: 0 calc(-72 * var(--u) - var(--bleed));
	}
	.tr__label::after {
		flex: 0 0 calc(52 * var(--u) + var(--bleed));
	}
	.tr__photo {
		width: calc(636 * var(--u) + var(--bleed));
	}
	.tr__photo img {
		object-position: 100% 30%;
	}
}

/* --- Track Record：SP（768px以下） --- */
@media (max-width: 768px) {
	.tr__photo img {
		position: static;
		left: auto;
		top: auto;
		width: 100%;
		height: 100%;
		object-position: 50% 38%;
	}
	.tr__h2 {
		position: relative;
		left: auto;
		top: auto;
		margin: 5vw 5vw 0;
		font-size: 6vw;
		white-space: normal;
	}
	.tr__cards {
		position: relative;
		left: auto;
		top: auto;
		height: auto;
		display: grid;
		gap: 4vw;
		width: 90%;
		margin: 8vw auto 0;
	}
	.tr__cards .tr__card {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		height: auto;
		padding: 14vw 4vw 6vw;
		border-radius: 4vw;
	}
	.tr__card .tr__tag {
		top: 4vw;
		padding: 2.5vw 5vw;
		border-radius: 8vw;
		font-size: 3.6vw;
	}
	.tr__card .tr__num {
		position: relative;
		top: auto;
		gap: 2vw;
	}
	.tr__num b {
		font-size: 14vw;
	}
	.tr__num span {
		font-size: 5.5vw;
	}
	.tr__card .tr__period {
		position: relative;
		top: auto;
		margin-top: -2vw;
		font-size: 3.8vw;
	}
	.tr__pill {
		position: relative;
		left: auto;
		top: auto;
		width: max-content;
		height: auto;
		margin: 10vw auto 0;
		padding: 2.5vw 8vw;
		border-radius: 10vw;
		font-size: 5.5vw;
	}
	.tr__body {
		position: relative;
		left: auto;
		top: auto;
		width: 90%;
		margin: 6vw auto 0;
		font-size: 4.2vw;
	}
	.tr__note {
		position: relative;
		left: auto;
		top: auto;
		width: 90%;
		margin: 4vw auto 0;
		font-size: 3.2vw;
	}
	.tr {
		height: auto;
		padding: 12vw 0 14vw;
		margin: 0;
		margin-top: 0;
		padding-top: 0;
	}
	.tr__photo {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
		margin-top: 0;
	}
	.tr__label {
		position: relative;
		left: auto;
		top: auto;
		height: auto;
		margin: 0 5vw 0 0;
		text-align: right;
		font-size: 4.4vw;
		background: transparent;
		margin-top: 8vw;
	}
	.tr__label {
		display: flex;
		align-items: center;
		gap: 1.5vw;
		width: auto;
		margin-left: 0;
		margin-right: 0;
		padding: 0;
	}
	.tr__label::before,
	.tr__label::after {
		content: '';
		position: static;
		height: 0;
		margin: 0;
		border-top: 1px solid #d9d9d9;
	}
	.tr__label::before {
		flex: 1 1 auto;
	}
	.tr__label::after {
		flex: 0 0 3.5vw;
	}
	.tr__photo {
		right: auto;
		bottom: auto;
	}
	.tr__body {
		max-width: none;
	}
}

/* ==========================================================================
   Reference Guide
   ========================================================================== */
.rg {
	position: relative;
	display: flex;
	align-items: flex-start;
	padding: calc(95 * var(--u)) calc(72 * var(--u)) calc(100.4 * var(--u));
	margin-bottom: calc(100 * var(--u));
}
.rg__head {
	position: relative;
	flex: 0 0 calc(326 * var(--u));
}
.rg__main {
	position: relative;
	flex: 1 1 auto;
}
.rg__bg {
	position: absolute;
	left: 0;
	top: 0;
	width: calc(1296 * var(--u));
	height: 100%;
	background: #f5f8fa;
}
.rg__label {
	font-family: var(--font-en);
	font-weight: 500;
	font-size: calc(28 * var(--u));
	line-height: 1.6;
	color: var(--sky);
	white-space: nowrap;
}
.rg__h2 {
	margin-top: calc(10.2 * var(--u));
	font-size: calc(34 * var(--u));
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
}
.rg__table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: calc(18 * var(--u));
	line-height: 1.8;
}
.rg__table th,
.rg__table td {
	height: calc(72 * var(--u));
	padding: 0 calc(20 * var(--u));
	text-align: left;
	vertical-align: middle;
}
.rg__table th {
	background: #dceef8;
	color: var(--deep);
	font-weight: 700;
}
.rg__table td {
	background: var(--white);
	color: var(--ink);
	font-weight: 500;
}
.rg__table tbody tr + tr td {
	border-top: 1px solid #d9d9d9;
}
.rg__table th + th {
	border-left: 1px solid var(--white);
}
.rg__table td + td {
	border-left: 1px solid #d9d9d9;
}
.rg__table col:nth-child(1) {
	width: calc(150 * var(--u));
}
.rg__table col:nth-child(2) {
	width: calc(200 * var(--u));
}
.rg__note {
	margin-top: calc(14 * var(--u));
	font-size: calc(12 * var(--u));
	font-weight: 500;
	line-height: 1.8;
}

/* --- Reference Guide：1600px超（左右に余白ができる画面） --- */
@media (min-width: 1601px) {
	.rg__bg {
		left: calc(-1 * var(--bleed));
		width: calc(1296 * var(--u) + var(--bleed));
	}
}

/* --- Reference Guide：SP（768px以下） --- */
@media (max-width: 768px) {
	.rg__bg {
		width: 87%;
	}
	.rg__label,
	.rg__h2 {
		position: relative;
		left: auto;
		top: auto;
		margin-left: 5vw;
		white-space: normal;
	}
	.rg__label {
		font-size: 4.4vw;
	}
	.rg__h2 {
		margin-top: 2vw;
		font-size: 6vw;
	}
	.rg__table {
		position: relative;
		left: auto;
		top: auto;
		width: 90%;
		margin: 7vw auto 0;
		display: block;
	}
	.rg__table thead {
		display: none;
	}
	.rg__table tbody,
	.rg__table tr,
	.rg__table td {
		display: block;
		width: 100%;
	}
	.rg__table tr {
		background: var(--white);
	}
	.rg__table tbody tr + tr {
		border-top: 1px solid #d9d9d9;
	}
	.rg__table td {
		display: flex;
		align-items: center;
		gap: 4vw;
		height: auto;
		padding: 0 4vw 0 0;
		background: var(--white);
		font-size: 3.7vw;
		line-height: 1.7;
	}
	.rg__table tr td + td {
		border-top: 1px solid #d9d9d9;
		border-left: 0;
	}
	.rg__table tr td + td::before {
		margin-top: -1px;
		border-top: 1px solid var(--white);
	}
	.rg__table td::before {
		content: attr(data-label);
		flex: none;
		align-self: stretch;
		display: flex;
		align-items: center;
		width: 34%;
		padding: 3.5vw 3vw;
		background: #dceef8;
		border-right: 1px solid var(--white);
		color: var(--deep);
		font-weight: 700;
	}
	.rg__table td:first-child {
		font-weight: 700;
		color: var(--deep);
	}
	.rg__note {
		position: relative;
		left: auto;
		top: auto;
		width: 90%;
		margin: 4vw auto 0;
		font-size: 3.2vw;
	}
	.rg {
		height: auto;
		padding: 12vw 0 12vw;
		margin-bottom: 5vw;
	}
	.rg {
		display: block;
	}
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq {
	position: relative;
	width: 100%;
	padding: calc(100 * var(--u)) 0 calc(110 * var(--u));
	margin-bottom: calc(100 * var(--u));
}
.faq__bg {
	position: absolute;
	left: calc(144 * var(--u));
	top: 0;
	width: calc(1296 * var(--u));
	height: 100%;
	background: #f5f8fa;
}
.faq__inner {
	position: relative;
	display: flex;
	align-items: flex-start;
	padding: 0 calc(72 * var(--u));
}
.faq__head {
	flex: none;
	width: calc(326 * var(--u));
}
.faq__label {
	font-family: var(--font-en);
	font-weight: 500;
	font-size: calc(28 * var(--u));
	line-height: 1.6;
	color: var(--sky);
	white-space: nowrap;
}
.faq__h2 {
	margin-top: calc(10 * var(--u));
	font-size: calc(34 * var(--u));
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
}
.faq__list {
	flex: none;
	width: calc(970 * var(--u));
}
.faq__item:last-child {
	margin-bottom: 0;
}
.faq__item {
	margin-bottom: calc(30 * var(--u));
}
.faq__item summary {
	position: relative;
	height: calc(72 * var(--u));
	display: flex;
	align-items: center;
	padding: 0 calc(60 * var(--u)) 0 calc(82 * var(--u));
	background: #dceef8;
	border-radius: calc(60 * var(--u));
	font-size: calc(18 * var(--u));
	font-weight: 700;
	line-height: 1.8;
	color: var(--deep);
	cursor: pointer;
	list-style: none;
}
.faq__item summary::-webkit-details-marker {
	display: none;
}
.faq__item summary:focus-visible {
	outline: 2px solid var(--deep);
	outline-offset: 2px;
}
.faq__item summary::before {
	content: 'Q';
	position: absolute;
	left: calc(10 * var(--u));
	top: calc(10 * var(--u));
	width: calc(52 * var(--u));
	height: calc(52 * var(--u));
	display: grid;
	place-items: center;
	background: var(--white);
	border-radius: 50%;
	font-family: var(--font-en);
	font-weight: 600;
	font-size: calc(24 * var(--u));
	color: var(--sky);
}
.faq__item summary::after {
	content: '';
	position: absolute;
	right: calc(26 * var(--u));
	top: 50%;
	width: calc(20 * var(--u));
	height: calc(20 * var(--u));
	background: var(--deep);
	-webkit-mask: url('../img/arrow.svg') no-repeat center / contain;
	mask: url('../img/arrow.svg') no-repeat center / contain;
	transform: translateY(-50%) rotate(90deg);
	transition: transform 0.25s;
}
.faq__item[open] summary::after {
	transform: translateY(-50%) rotate(-90deg);
}
.faq__body {
	position: relative;
	margin-top: calc(20 * var(--u));
	padding: 0 calc(60 * var(--u)) calc(30 * var(--u)) calc(82 * var(--u));
	border-bottom: 1px solid #d9d9d9;
	font-size: calc(16 * var(--u));
	font-weight: 500;
	line-height: 1.8;
}
.faq__body::before {
	content: 'A';
	position: absolute;
	left: calc(10 * var(--u));
	top: 0;
	width: calc(52 * var(--u));
	height: calc(52 * var(--u));
	display: grid;
	place-items: center;
	background: var(--sky);
	border-radius: 50%;
	font-family: var(--font-en);
	font-weight: 600;
	font-size: calc(24 * var(--u));
	color: var(--white);
}

/* --- FAQ：1600px超（左右に余白ができる画面） --- */
@media (min-width: 1601px) {
	.faq__bg {
		width: calc(1296 * var(--u) + var(--bleed));
	}
}

/* --- FAQ：SP（768px以下） --- */
@media (max-width: 768px) {
	.faq__inner {
		display: block;
		padding: 0;
	}
	.faq__head {
		width: auto;
		margin-left: 5vw;
	}
	.faq__label {
		font-size: 4.4vw;
	}
	.faq__h2 {
		margin-top: 2vw;
		font-size: 6vw;
	}
	.faq__item {
		margin-bottom: 4vw;
	}
	.faq__item summary {
		height: auto;
		min-height: 16vw;
		padding: 4vw 12vw 4vw 17vw;
		border-radius: 4vw;
		font-size: 4.1vw;
		line-height: 1.7;
	}
	.faq__item summary::before {
		left: 3vw;
		top: 3vw;
		width: 11vw;
		height: 11vw;
		font-size: 5vw;
	}
	.faq__item summary::after {
		right: 5vw;
		width: 5.2vw;
		height: 5.2vw;
	}
	.faq__body {
		margin-top: 4vw;
		padding: 0 2vw 6vw 17vw;
		font-size: 3.8vw;
	}
	.faq__body::before {
		left: 3vw;
		width: 11vw;
		height: 11vw;
		font-size: 5vw;
	}
	.faq {
		padding: 12vw 0 12vw;
		padding-top: 8vw;
		margin-bottom: 0;
	}
	.faq__bg {
		left: 13%;
		width: 87%;
		display: block;
	}
	.faq__list {
		width: 90%;
		margin: 7vw 4% 0 5%;
	}
}

/* ==========================================================================
   Contact
   ========================================================================== */
.ct {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: calc(100 * var(--u)) calc(72 * var(--u)) calc(99.6 * var(--u));
	background: var(--sky);
	overflow: hidden;
}
.ct__label {
	font-family: var(--font-en);
	font-weight: 500;
	font-size: calc(30 * var(--u));
	line-height: 1.6;
	color: var(--white);
	white-space: nowrap;
}
.ct__tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: calc(24 * var(--u));
	margin-top: calc(40 * var(--u));
}
.ct__tag {
	display: flex;
	align-items: center;
	padding: calc(18 * var(--u)) calc(30 * var(--u));
	background: #f5f8fa;
	border-radius: calc(40 * var(--u));
	font-size: calc(16 * var(--u));
	font-weight: 700;
	line-height: 1;
	color: var(--deep);
	white-space: nowrap;
}
.ct__h2 {
	margin-top: calc(37 * var(--u));
	font-size: calc(44 * var(--u));
	font-weight: 700;
	line-height: 1.6;
	color: var(--white);
	white-space: nowrap;
}
.ct__lead {
	margin-top: calc(31.6 * var(--u));
	font-size: calc(20 * var(--u));
	font-weight: 700;
	line-height: 1.6;
	color: var(--white);
	white-space: nowrap;
}
.ct__btn {
	position: relative;
	margin-top: calc(63 * var(--u));
	width: calc(400 * var(--u));
	height: calc(70 * var(--u));
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--deep);
	color: var(--white);
	font-size: calc(18 * var(--u));
	font-weight: 700;
	border-radius: calc(12 * var(--u));
	transition: opacity 0.2s;
}
.ct__btn:hover {
	opacity: 0.88;
}
.ct__btn::after {
	content: '';
	position: absolute;
	right: calc(20 * var(--u));
	width: calc(18 * var(--u));
	aspect-ratio: 18 / 14.73;
	background: currentColor;
	-webkit-mask: url('../img/arrow.svg') no-repeat center / contain;
	mask: url('../img/arrow.svg') no-repeat center / contain;
}
.ct__link {
	margin-top: calc(30 * var(--u));
	font-size: calc(14 * var(--u));
	font-weight: 700;
	line-height: 1.6;
	color: var(--white);
	white-space: nowrap;
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* --- Contact：1600px超（左右に余白ができる画面） --- */
@media (min-width: 1601px) {
	.ct {
		box-sizing: content-box;
		margin-left: calc(-1 * var(--bleed));
		margin-right: calc(-1 * var(--bleed));
		border-left: var(--bleed) solid;
		border-right: var(--bleed) solid;
	}
	.ct {
		border-color: var(--sky);
	}
}

/* --- Contact：SP（768px以下） --- */
@media (max-width: 768px) {
	.ct {
		height: auto;
		padding: 14vw 0 14vw;
	}
	.ct__label {
		position: relative;
		left: auto;
		top: auto;
		transform: none;
		text-align: center;
		font-size: 6vw;
	}
	.ct__tags {
		position: relative;
		left: auto;
		top: auto;
		height: auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 2.5vw;
		width: 90%;
		margin: 6vw auto 0;
	}
	.ct__tags .ct__tag {
		position: relative;
		left: auto;
		padding: 2.5vw 4.5vw;
		border-radius: 8vw;
		font-size: 3.4vw;
	}
	.ct__lead {
		position: relative;
		left: auto;
		top: auto;
		transform: none;
		margin: 5vw 5vw 0;
		font-size: 3.9vw;
		line-height: 1.9;
		white-space: normal;
	}
	.ct__btn {
		position: relative;
		left: auto;
		top: auto;
		width: 90%;
		height: 15vw;
		margin: 8vw auto 0;
		font-size: 4.2vw;
		border-radius: 2.5vw;
	}
	.ct__btn::after {
		width: 4.5vw;
		right: 6%;
	}
	.ct__link {
		position: relative;
		left: auto;
		top: auto;
		transform: none;
		display: block;
		margin-top: 7vw;
		text-align: center;
		font-size: 3.7vw;
	}
	.ct__lead br {
		display: none;
	}
	.ct__h2 {
		position: relative;
		left: auto;
		top: auto;
		transform: none;
		margin: 8vw 5vw 0;
		font-size: 5.6vw;
		white-space: normal;
	}
	.ct__lead {
		text-align: left;
		text-wrap: pretty;
	}
}

/* ==========================================================================
   References
   ========================================================================== */
.rf {
	position: relative;
	display: flex;
	align-items: flex-start;
	padding: calc(80 * var(--u)) calc(72 * var(--u)) calc(83 * var(--u));
}
.rf__head {
	flex: 0 0 calc(326 * var(--u));
}
.rf__label {
	margin-top: calc(31 * var(--u));
	font-family: var(--font-en);
	font-weight: 500;
	font-size: calc(28 * var(--u));
	line-height: 1.6;
	color: var(--sky);
	white-space: nowrap;
}
.rf__h2 {
	margin-top: calc(10.2 * var(--u));
	font-size: calc(30 * var(--u));
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
}
.rf__box {
	flex: 1 1 auto;
	min-height: calc(177 * var(--u));
	padding: calc(30 * var(--u));
	background: var(--white);
	border: 1px solid #a9d3ea;
	border-radius: calc(16 * var(--u));
}
.rf__list {
	width: calc(821 * var(--u));
	font-size: calc(11 * var(--u));
	font-weight: 500;
	line-height: 1.8;
}
.rf__list li {
	list-style: disc;
	margin-left: calc(16 * var(--u));
}
.rf__note {
	margin: calc(10 * var(--u)) 0 0 calc(7 * var(--u));
	max-width: calc(577 * var(--u));
	font-size: calc(12 * var(--u));
	font-weight: 500;
	line-height: 1.8;
}

/* --- References：SP（768px以下） --- */
@media (max-width: 768px) {
	.rf {
		height: auto;
		padding: 12vw 0;
	}
	.rf__label,
	.rf__h2 {
		position: relative;
		left: auto;
		top: auto;
		margin-left: 5vw;
		white-space: normal;
	}
	.rf__label {
		font-size: 4.4vw;
	}
	.rf__h2 {
		margin-top: 2vw;
		font-size: 5.6vw;
	}
	.rf__list {
		position: relative;
		left: auto;
		top: auto;
		width: 90%;
		margin: 6vw auto 0;
		padding: 5vw 5vw 5vw 8vw;
		font-size: 3vw;
		border: 1px solid #a9d3ea;
		border-radius: 3vw;
		background: var(--white);
	}
	.rf__list li {
		margin-left: 0;
		margin-bottom: 2vw;
	}
	.rf__note {
		position: relative;
		left: auto;
		top: auto;
		width: 90%;
		margin: 4vw auto 0;
		font-size: 3.1vw;
	}
	.rf {
		display: block;
	}
	.rf__note {
		max-width: none;
	}
	.rf__box {
		display: block;
		min-height: 0;
		padding: 0;
		background: none;
		border: 0;
		border-radius: 0;
	}
}

/* ==========================================================================
   footer
   ========================================================================== */
.ft {
	position: relative;
	padding: calc(100 * var(--u)) calc(144 * var(--u)) calc(136.2 * var(--u));
}
.ft__inner {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}
.ft__bg {
	position: absolute;
	left: calc(31 * var(--u));
	top: 0;
	width: calc(1380 * var(--u));
	height: calc(500 * var(--u));
	background: #dceef8;
	border-radius: calc(24 * var(--u));
}
.ft__logo {
	width: calc(720 * var(--u));
}
.ft__logo img {
	width: 100%;
	height: auto;
}
.ft__addr {
	font-size: calc(13 * var(--u));
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
}
.ft__addr--1 {
	margin-top: calc(87.6 * var(--u));
}
.ft__addr--2 {
	margin-top: calc(11.2 * var(--u));
}
.ft__btn {
	position: relative;
	flex: none;
	margin-top: calc(141 * var(--u));
	width: calc(280 * var(--u));
	height: calc(70 * var(--u));
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--white);
	color: var(--deep);
	font-size: calc(18 * var(--u));
	font-weight: 700;
	border-radius: calc(12 * var(--u));
	transition: opacity 0.2s;
}
.ft__btn:hover {
	opacity: 0.8;
}
.ft__btn::after {
	content: '';
	position: absolute;
	right: calc(20 * var(--u));
	width: calc(18 * var(--u));
	aspect-ratio: 18 / 14.73;
	background: currentColor;
	-webkit-mask: url('../img/arrow.svg') no-repeat center / contain;
	mask: url('../img/arrow.svg') no-repeat center / contain;
}
.ft__copy {
	position: relative;
	text-align: right;
	margin-top: calc(54 * var(--u));
	font-family: var(--font-en);
	font-weight: 500;
	font-size: calc(18 * var(--u));
	line-height: 1.6;
	color: var(--sky);
	white-space: nowrap;
}

/* --- footer：SP（768px以下） --- */
@media (max-width: 768px) {
	.ft {
		height: auto;
		padding-bottom: 8vw;
	}
	.ft__bg {
		left: 2.5%;
		width: 95%;
		height: 100%;
		border-radius: 4vw;
	}
	.ft__logo {
		position: relative;
		left: auto;
		top: auto;
		width: 70%;
		margin: 0 auto;
		padding-top: 12vw;
	}
	.ft__addr {
		position: relative;
		left: auto;
		top: auto;
		width: 84%;
		margin: 0 auto;
		white-space: normal;
		font-size: 3.4vw;
		line-height: 1.8;
	}
	.ft__addr--1 {
		margin-top: 8vw;
	}
	.ft__addr--2 {
		margin-top: 2vw;
	}
	.ft__btn {
		position: relative;
		left: auto;
		top: auto;
		width: 84%;
		height: 15vw;
		margin: 8vw auto 0;
		font-size: 4.2vw;
		border-radius: 2.5vw;
	}
	.ft__btn::after {
		width: 4.5vw;
		right: 6%;
	}
	.ft__copy {
		position: relative;
		right: auto;
		top: auto;
		display: block;
		width: 90%;
		margin: 8vw auto 0;
		text-align: center;
		white-space: normal;
		font-size: 3.2vw;
	}
	.ft {
		padding-top: 0;
		padding-left: 0;
		padding-right: 0;
	}
	.ft__inner {
		display: block;
	}
}

/* ==========================================================================
   その他（アニメーション・動きの抑制）
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*:not(.loop__track) {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
	.loop__track {
		animation: none !important;
	}
}