@charset "shift_jis";

/**
 * Layout
 * -------------------------------------------------- */
.c5-layout {
	z-index: 0;
	position: relative;
}
.c5-layout img {
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	/* user-drag: none;
	-webkit-user-drag: none; */
}
.c5-l-navigation {
	display: grid;
	position: fixed;
	inset: 0;
}
@media print, (min-width: 768px) {
	.c5-l-concept {
		position: fixed;
		inset: 0 calc(var(--contentsWidth) + var(--navigationWidth)) 0 0;
		width: var(--conceptWidth);
		height: 100vh;
		background: linear-gradient(to left, #333, #3338 24px, #3330 64px), black;
	}
	.c5-l-contents {
		z-index: 1;
		position: relative;
		left: 50vw;
		right: var(--navigationWidth);
		width: var(--contentsWidth);
		margin-inline: calc(var(--conceptWidth) / 2 - var(--navigationWidth) / 2 - var(--contentsWidth) / 2);
	}
	.c5-l-navigation {
		display: grid;
		position: fixed;
		left: auto;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: auto;
		width: var(--navigationWidth);
		height: 100vh;
		padding: 24px 0;
		background: linear-gradient(to right, #333, #3338 24px, #3330 64px), linear-gradient(to top, black 25%, #333);
	}
}
@media screen and (max-width: 767.98px) {
	.c5-l-concept {
		display: none;
	}
	.c5-l-contents {
		width: 100%;
	}
	.c5-l-navigation {
		grid-template-columns: auto 1fr;
		top: auto;
		width: 100%;
		max-width: var(--contentsMaxWidth);
		height: var(--navigationHeight);
		margin: 0 auto;
		border-top: 1px solid #fff4;
		color: white;
		background: #fff4;
		backdrop-filter: blur(5px);
	}
}


/* :::::: Button :::::: */
.c5-c-button {
	--size: 200;
	display: grid;
	grid-template-columns: 1fr 2.4em;
	place-items: center;
	width: min(var(--size) * 1vw / var(--aspect), var(--size) * 1px);
	min-width: calc(var(--size) * .5px);
	height: 2.4em;
	border: 1px solid #fff4;
	color: white;
	font-size: clamp(.625rem, 16vw / var(--aspect), .75rem);
	white-space: nowrap;
	background: black;
}
.c5-c-button:hover {
	color: white;
	text-decoration: none;
}
.c5-c-button .label {
	display: grid;
	place-items: center;
	z-index: 0;
	position: relative;
	width: 100%;
	height: 100%;
}
.c5-c-button .label::before {
	content: attr(data-text);
	display: grid;
	place-items: center;
	z-index: -1;
	position: absolute;
	inset: 0;
	color: white;
	background: url(../img/ult_grad_s.webp) center / cover no-repeat;
	clip-path: inset(0);
	transition: clip-path .4s cubic-bezier(.7,0,.3,1);
}
.c5-c-button .arrow {
	width: 1em;
	height: auto;
	fill: none;
	stroke: currentcolor;
	transition: transform .4s cubic-bezier(.3,1,.7,1);
}
@media (hover: none) {
	.c5-c-button:not(:active) .label::before {
		clip-path: inset(0 100% 0 0);
	}
	.c5-c-button:not(:active) .arrow {
		transform: translateX(-1em);
	}
}
@media (hover) {
	.c5-c-button:focus {
		outline: none;
	}
	.c5-c-button:not(:hover) .label::before {
		clip-path: inset(0 100% 0 0);
	}
	.c5-c-button:focus-visible .label::before {
		clip-path: inset(0);
	}
	.c5-c-button .arrow {
		transform: translateX(-1em);
	}
	.c5-c-button:hover .arrow,
	.c5-c-button:focus-visible .arrow {
		transform: none;
	}
	.c5-c-button:hover .label::before,
	.c5-c-button:hover .arrow,
	.c5-c-button:focus-visible .label::before,
	.c5-c-button:focus-visible .arrow {
		transition-duration: .2s;
		transition-timing-function: cubic-bezier(.3,1,.7,1);
	}
}

/**
 * コンセプトエリア
 * -------------------------------------------------- */
@media print, (min-width: 768px) {
	.c5-l-concept {
		display: grid;
		place-content: center;
	}
	.c5-l-concept .logo :where(img,svg) {
		width: 100%;
		height: auto;
	}
	.c5-concept__section {
		grid-area: 1 / 1;
		place-items: center;
		place-content: center;
		width: 100%;
		height: 100dvh;
		opacity: 0;
		pointer-events: none;
		transition: opacity .4s;
	}
	.c5-p-statement .logo {
		width: 36%;
		margin-inline: auto;
	}
	.c5-p-statement .logo + p {
		margin-top: 1.5em;
	}
	.c5-p-statement p {
		display: grid;
		margin-top: 1em;
		--fontBasis: 26;
		line-height: 1.75;
		text-align: center;
	}
	body[data-section="kv"] .c5-p-statement,
	body:is([data-section="intro"],[data-section="index"]) .c5-p-boostbutton,
	body:is([data-section^="ult-"],[data-section^="series_"],[data-section="exhibit"],[data-section="movie"],[data-section="hinata"],[data-section="thehope"]) .c5-p-ultlogo,
	[data-section="sound-connect"] .c5-p-sonylogo {
		opacity: 1;
		pointer-events: auto;
		transition-duration: .8s;
	}
}

/* :::::: ブーストボタン搭載 :::::: */
.c5-p-boostbutton {
	display: grid;
	row-gap: min(40vw / var(--aspect), 40px);
	place-items: center;
}
.c5-p-boostbutton .button {
	display: grid;
	aspect-ratio: 1 / 1;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}
.c5-p-boostbutton__lead {
	display: grid;
	fill: currentcolor;
}
.c5-p-boostbutton .button img {
	grid-area: 1 / 1;
	border-radius: 50%;
	transition: transform .2s;
}
.c5-p-boostbutton .button.is-boost .off,
.c5-p-boostbutton .button:not(.is-boost) .on {
	z-index: -1;
	visibility: hidden;
}
.c5-p-boostbutton .button.is-boost.is-anim .on {
	visibility: visible;
	animation: boostOn .6s var(--easeOut) both;
}
.c5-p-boostbutton .button:not(.is-boost).is-anim .off {
	visibility: visible;
	animation: boostOff .3s var(--easeOut) both;
}
.c5-p-boostbutton .button:active > * {
	transform: scale(.98);
}
@media (hover) {
	.c5-p-boostbutton .button {
		cursor: pointer;
	}
}
@keyframes boostOn {
	from { transform: none; }
	20% { transform: scale(1.4); }
	50% { transform: scale(.92); }
	to { transform: none; }
}
@keyframes boostOn2 {
	from { transform: none; }
	20% { transform: scale(1.2); }
	50% { transform: scale(.92); }
	to { transform: none; }
}
@keyframes boostOff {
	from { transform: none; }
	20% { transform: scale(.92); }
	50% { transform: scale(1.02); }
	to { transform: none; }
}

/* :::::: ULTロゴ :::::: */
.c5-p-ultlogo .logo {
	width: 36%;
	margin-inline: auto;
}

/* :::::: SONYロゴ :::::: */
.c5-p-sonylogo .logo {
	width: 30%;
	margin-inline: auto;
}


/**
 * セクションスワイパー実装時
 * -------------------------------------------------- */
:root .c5-l-contents.is-sectionSwiper {
	overflow: hidden;
}
.is-sectionSwiper .c5-c-section:not(.is-active) {
	visibility: hidden;
}
.is-sectionSwiper .c5-c-section.is-active {
	position: absolute;
	inset: 0;
}
.is-sectionSwiper .c5-p-product {
	display: grid;
}
.is-sectionSwiper .c5-p-product > * {
	grid-area: 1 / 1;
}
.is-sectionSwiper .c5-c-scene:not(.is-active),
.is-sectionSwiper .c5-c-section > :first-child.is-hide {
	visibility: hidden;
}


/**
 * メインコンテンツエリア
 * -------------------------------------------------- */
:root .c5-l-contents {
	height: 100dvh;
	overflow: auto;
	scrollbar-width: none !important;
	overscroll-behavior: contain !important;
	-webkit-overflow-scrolling: touch;
}
.c5-l-contents::-webkit-scrollbar {
	display: none;
}

.c5-p-scroll {
	fill: currentcolor;
	stroke: currentcolor;
	position: absolute;
	right: 0;
	bottom: 6vh;
	margin-right: var(--sidegap);
}
.c5-p-scroll:hover {
	color: inherit;
}
.c5-c-icon {
	--size: 40px;
	display: block;
	width: var(--size);
	height: var(--size);
	border: 1px solid currentcolor;
	border-radius: var(--size);
	fill: currentcolor;
	stroke: currentcolor;
}

/* :::::: 製品名 :::::: */
.c5-c-product_name {
	display: grid;
	justify-items: center;
	--fontBasis: 60;
	line-height: 1.2;
}
.c5-c-product_name .sub,
.c5-c-product_name .num {
	font-size: 30%;
}

/* :::::: キービジュアル :::::: */
.c5-p-kv {
	display: grid;
	color: white;
	fill: currentcolor;
}
.c5-p-kv__container {
	align-self: center;
	display: grid;
}
.c5-p-kv__container > * {
	grid-area: 1 / 1;
}
@media print, (min-width: 768px) {
	.c5-p-kv__container {
		max-height: calc(var(--contentsWidth) / .5625);
	}
}
.c5-p-kv__container,
.c5-p-kv__visual,
.c5-p-kv__visual img {
	height: 100%;
}
.c5-p-kv__visual {
	display: grid;
	align-content: center;
	row-gap: 3vh;
}
.c5-p-kv__visual img {
	grid-column: 1;
	width: 100%;
	object-fit: contain;
}
.c5-p-kv__visual img.bg {
	z-index: -1;
	position: absolute;
	inset: 0;
	object-fit: cover;
}
.c5-p-kv__visual img.series {
	grid-row: 2 / 3;
	max-height: 31vh;
	margin-bottom: min(64vw / var(--aspect), 64px);
}
.c5-p-kv__visual img.field3 {
	grid-row: 3 / 4;
	max-height: 50vh;
	margin-bottom: min(40vw / var(--aspect), 40px);
}
.c5-p-kv__title {
	align-self: start;
	display: grid;
	row-gap: 1.5em;
	margin-top: min(80vw / var(--aspect), 80px);
	padding-inline: var(--sidegap);
	--fontBasis: 16;
}
.c5-p-kv__boost {
	position: relative;
	place-self: center end;
	margin-top: -16%;
	padding-inline: var(--sidegap);
}
.c5-p-kv__info {
	position: absolute;
	left: 0;
	bottom: 6vh;
	padding-inline: var(--sidegap);
	--fontBasis: 24;
	line-height: 1.2;
}
.c5-p-kv__info dt {
	display: grid;
	justify-items: start;
	row-gap: .15em;
}
.c5-p-kv__info .new {
	justify-self: start;
	padding: .15em .75em;
	border: 1px solid yellow;
	color: yellow;
	font-size: 60%;
}
.c5-p-kv__info .num {
	font-size: 50%;
}
.c5-p-kv__info dd {
	margin-top: 1em;
}
@media print, (min-width: 768px) {
	.c5-p-kv__title {
		margin-top: var(--sidegap);
	}
}
@media (min-aspect-ratio: 16/9) {
	/* ISSUE: 高さで微調整 */
	.c5-p-kv__info [style^="--w:"] {
		width: calc(1.75vh * var(--w) / var(--aspect));
	}
}
@media (max-width: 767.98px) and (min-aspect-ratio: 9/16) {
	.c5-p-kv__info .lead {
		width: calc(224dvh / var(--aspect));
	}
}

/* :::::: 色収差アニメーション :::::: */
.c5-p-kv__boost .aberration {
	display: grid;
	place-items: center;
	position: absolute;
	inset: 0;
}
.c5-p-kv__boost .aberration > * {
	grid-area: 1 / 1;
	height: 100%;
	width: auto;
	background-blend-mode: multiply;
	mix-blend-mode: lighten;
	background-clip: text;
}
.c5-p-kv__boost .aberration .r {
	fill: red;
}
.c5-p-kv__boost .aberration .g {
	fill: lime;
}
.c5-p-kv__boost .aberration .b {
	fill: blue;
}
.c5-p-kv:not(.is-active) .c5-p-kv__boost {
	opacity: 0;
}
.c5-p-kv:not(.is-active) .c5-p-kv__boost > svg {
	opacity: 0;
	scale: 1.2;
}
.c5-p-kv.is-inview .c5-p-kv__boost > svg {
	animation: aberration .4s .7s var(--easeOut) both;
}
.c5-p-kv.is-inview .c5-p-kv__boost .aberration > * {
	animation: aberration_rgb .6s var(--easeOut) both;
	animation-delay: .8s;
}
.c5-p-kv.is-inview .c5-p-kv__boost .aberration .r {
	animation-delay: .9s;
}
.c5-p-kv.is-inview .c5-p-kv__boost .aberration .b {
	animation-delay: 1s;
}
@keyframes aberration {
	from { opacity: 0; transform: scale(1.4); }
	30% { opacity: .5; transform: scale(.92); }
	60% { transform: scale(1.04); }
	to { opacity: 1; transform: none; }
}
@keyframes aberration_rgb {
	from { opacity: 0; }
	25%, 75% { opacity: .5; }
	50% { opacity: 0; transform: scale(.92); }
	to { opacity: 0; transform: scale(1.12); }
}

/* :::::: イントロ :::::: */
.c5-p-intro {
	display: grid;
	align-content: center;
}
.c5-p-intro__bg {
	z-index: -1;
	position: absolute;
	inset: 0;
}
.c5-p-intro__bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background: #000c;
}
.c5-p-intro__bg video {
	width: var(--contentsWidth);
	width: 100%;
	max-width: none;
	height: 100lvh;
	object-fit: cover;
}
.c5-p-intro__container {
	display: grid;
	row-gap: min(144vw / var(--aspect), 144px);
	margin-block: auto;
}
.c5-p-intro__lead {
	text-align: center;
}
.c5-p-intro__lead svg {
	width: 80%;
	height: auto;
	fill: currentcolor;
}
.c5-p-intro__arrow {
	display: grid;
	margin-inline: auto;
}
.c5-c-section:not(.is-active) .c5-p-intro__arrow img {
	opacity: 0;
	translate: 0 -24px;
}
.c5-c-section.is-active .c5-p-intro__arrow img {
	transition: opacity .4s .6s, translate .4s .6s var(--easeOut);
}
.c5-c-section.is-active .c5-p-intro__arrow img:last-child {
	transition-delay: .7s;
}
@media print, (min-width: 768px) {
	.c5-p-intro__container {
		max-height: calc(var(--contentsWidth) / .5625);
	}
}
@media screen and (max-width: 767.98px) {
	.c5-p-intro__container {
		padding-top: var(--headerHeight);
	}
}

/* :::::: 一覧 :::::: */
.c5-p-index {
	display: grid;
	align-content: center;
}
.c5-p-index::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 50%;
	border-left: 1px solid var(--gray);
}
.c5-p-index__list {
	grid-area: 1 / 1 / 2 / 3;
	display: grid;
	grid-template-columns: 1fr 1fr;
	height: 100dvh;
	margin-top: var(--headerHeight);
	border-top: 1px solid var(--gray);
}
.c5-p-index__list .item {
	max-height: calc(100dvh / 3);
	border-bottom: 1px solid var(--gray);
}
.c5-p-index__list .item a {
	display: block;
}
.c5-p-index__list .item a,
.c5-p-index__list .item .image,
.c5-p-index__list .item .image img {
	height: 100%;
	max-height: inherit;
}
.c5-p-index__list .item .image img {
	object-fit: cover;
}
.c5-p-index__list .item:first-child {
	display: grid;
	place-items: center;
}
.c5-p-index__list .image {
	display: grid;
	overflow: hidden;
}
.c5-p-index__list .image > * {
	grid-area: 1 / 1;
}
.c5-p-index__list .image figcaption {
	place-self: end center;
	margin-bottom: .75em;
	--fontBasis: 20;
}
.c5-p-index__list a:hover {
	color: inherit;
}
@media (hover) {
	.c5-p-index__list .image img {
		z-index: -1;
		backface-visibility: hidden;
		transition: scale .4s var(--easeOut);
	}
	.c5-p-index__list a:hover .image img {
		scale: 1.08;
	}
}
@media screen and (max-width: 767.98px) {
	.c5-p-index__list {
		height: calc(100dvh - var(--headerHeight));
	}
	.c5-p-index__list .item {
		max-height: calc((100dvh - var(--headerHeight)) / 3);
	}
}

/* :::::: 製品 :::::: */
.c5-p-product {
	display: grid;
	place-content: center;
	overflow: hidden;
	height: 100dvh;
}
.c5-p-product__container {
	display: grid;
	place-items: center;
}
.c5-p-product .c5-p-product__container {
	grid-template-rows: 1fr 1fr 3fr;
	height: 100dvh;
	max-height: none;
}
.c5-p-product__container > * {
	grid-column: 1;
}
@media print, (min-width: 768px) {
	.c5-p-product__container {
		max-height: calc(var(--contentsWidth) / .5625);
	}
}
.c5-p-product .c5-p-product__image,
.c5-p-product .c5-p-product__image img {
	height: 100%;
	max-height: none;
}
.c5-p-product__image {
	z-index: -1;
	position: absolute;
	inset: 0;
}
.c5-p-product__image img {
	width: min(100%, 700px);
	object-fit: cover;
}
.is-unalign .c5-p-product__image img {
	object-fit: contain;
}
.c5-p-product__title {
	grid-row: 1;
	align-self: end;
	display: grid;
	justify-items: center;
	padding-top: min(72vw / var(--aspect), 72px);
	--fontBasis: 18;
	line-height: 1.4;
	fill: currentcolor;
}
.c5-p-product__title .main {
	font-size: 300%;
}
.c5-p-product__lead {
	grid-row: 2;
	align-self: start;
	padding-top: min(40vw / var(--aspect), 40px);
	fill: currentcolor;
	text-align: center;
}
.c5-p-product__lead svg {
	width: min(480vw / var(--aspect), 480px);
	max-width: calc(100% - 40px);
	height: auto;
}
@media (min-aspect-ratio: 16/9) {
	/* ISSUE: 高さで微調整 */
	.c5-p-product__title .main .sst {
		height: calc(94vh / var(--aspect));
	}
	.c5-p-product__title .num .sst {
		height: calc(32vh / var(--aspect));
	}
	.c5-p-product__lead {
		padding-top: calc(68vh / var(--aspect));
	}
	.c5-p-product__lead svg {
		width: calc(840vh / var(--aspect));
	}
}

/* :::::: タイポグラフィ :::::: */
.c5-c-subject {
	font-weight: 600;
	--fontBasis: 44;
	line-height: 1.3;
	letter-spacing: .1em;
}
.c5-c-paragraph {
	--fontBasis: 20;
	line-height: 1.5;
}
.c5-c-paragraph.-centering {
	text-align: center;
}
.c5-c-paragraph.-block {
	width: 100%;
}
.c5-c-paragraph.-block br {
	display: none;
}
.c5-c-note {
	--fontBasis: 14;
	line-height: 1.4;
	padding-top: min(24vw / var(--aspect), 24px);
}

/* :::::: セクション :::::: */
.c5-c-section {
	position: relative;
	overflow: hidden;
	max-width: var(--contentsMaxWidth);
	height: 100dvh;
	margin-inline: auto;
}
.c5-c-section__container {
	display: grid;
	align-content: center;
	justify-items: center;
}
.c5-c-section:has(.c5-c-scene) {
	height: auto;
}
.c5-c-section:has(.c5-l-footer) {
	grid-template-rows: 1fr var(--footerHeight);
}
@media print, (min-width: 768px) {
	.c5-c-section {
		max-width: var(--contentsMaxWidth);
	}
}
@media screen and (max-width: 767.98px) {
	.c5-c-section__container {
		padding-top: var(--headerHeight);
	}
}

/* :::::: シーン :::::: */
.c5-p-product__scene {
	display: grid;
	grid-template-rows: auto auto;
	align-content: center;
	row-gap: 8svh;
}
.c5-p-product__scene .c5-c-paragraph {
	--fontBasis: 24;
	line-height: 1.75;
}
@media print, (min-width: 768px) {
	.c5-c-scene {
		/* max-height: calc(var(--contentsWidth) / .5625); */
	}
}
@media screen and (max-width: 767.98px) {
	.c5-p-product__scene {
		padding-top: var(--headerHeight);
		padding-bottom: var(--navigationHeight);
	}
}
.c5-c-scene__text {
	display: grid;
	place-content: start center;
	padding-top: min(24vw / var(--aspect) + var(--headerHeight), 24px);
}
.c5-p-product__scene .c5-c-scene__text {
	align-self: end;
	min-height: 8lh;
}
.c5-c-scene__image {
	align-content: center;
}
:where(.c5-c-scene) .c5-c-subject {
	align-self: center;
	text-align: center;
}
:where(.c5-c-scene) .c5-c-subject .t {
	fill: currentcolor;
	width: min(1vw * var(--w) * .7 / var(--aspect), var(--w) * .7 * 1px);
}
:where(.c5-c-scene) .c5-c-paragraph {
	padding-top: min(32vw / var(--aspect), 32px);
}
:where(.c5-c-scene) .c5-c-paragraph:not(.-centering),
:where(.c5-c-scene) .c5-c-note {
	justify-self: center;
	max-width: calc(100% - var(--sidegap) * 3);
}
:where(.c5-c-scene) .c5-c-note {
	padding-top: min(24vw / var(--aspect), 24px);
}
:where(.c5-c-scene) .c5-c-button {
	justify-self: center;
	margin-top: min(40vw / var(--aspect), 40px);
}

/* :::::: シリーズ :::::: */
.c5-p-series {
	display: grid;
	align-content: center;
	height: 100dvh;
}
.c5-p-series__container {
	display: grid;
	grid-template-rows: auto auto;
	align-content: center;
	row-gap: min(40vw / var(--aspect), 40px);
	margin-block: auto;
}
.c5-p-series#series_ult-field1 .c5-c-image {
	margin-bottom: min(40vw / var(--aspect), 40px);
}
.c5-p-series#series_ult-tower9 .c5-c-image {
	margin-bottom: max(-176vw / var(--aspect), -176px);
}
.c5-p-series .c5-c-subject {
	--fontBasis: 32;
	text-align: center;
	margin-top: min(24vw / var(--aspect), 24px);
}
.c5-p-series__links {
	display: flex;
	justify-content: center;
	column-gap: 1em;
	margin-top: min(48vw / var(--aspect), 48px);
}
@media print, (min-width: 768px) {
	.c5-p-series__container {
		max-height: calc(var(--contentsWidth) / .5625);
	}
}
@media screen and (max-width: 767.98px) {
	.c5-p-series__container {
		padding-top: calc(var(--headerHeight) * 1.5);
	}
}
/* 個別調整 */
#series_ult-field3 .c5-p-series__container .c5-c-image,
#series_ult-field5 .c5-p-series__container .c5-c-image {
	margin-bottom: .75em;
}

/* :::::: 展示店舗 :::::: */
.c5-p-exhibit {
	display: grid;
	justify-items: center;
}
.c5-p-exhibit .c5-c-subject .sst {
	text-align: middle;
}
.c5-p-exhibit .c5-c-paragraph {
	margin-top: 2em;
}
.c5-p-exhibit .c5-c-paragraph + .c5-c-paragraph {
	margin-top: 1em;
}
.c5-p-exhibit .c5-c-paragraph dt {
	margin-bottom: .5em;
}
.c5-p-exhibit .c5-c-button {
	justify-self: center;
	margin-top: min(40vw / var(--aspect), 40px);
}
.c5-p-exhibit .c5-c-image {
	width: min(454vw / var(--aspect), 454px);
	margin-top: min(40vw / var(--aspect), 40px);
	transition: opacity .8s .4s var(--easeOut);
}
.c5-p-exhibit:not(.is-active) .c5-c-image {
	opacity: .2;
}
@media (hover) {
	.c5-p-exhibit .c5-c-image {
		transition-delay: .8s;
	}
}

/* :::::: SOUND CONNECT :::::: */
.c5-p-sound-connect {
	display: grid;
}
.c5-p-sound-connect .c5-c-subject {
	letter-spacing: 0;
	text-align: center;
}
.c5-p-sound-connect .c5-c-paragraph {
	margin-top: 2em;
	--fontBasis: 24;
	line-height: 1.75;
}
.c5-p-sound-connect .c5-c-paragraph + .c5-c-paragraph {
	margin-top: 1em;
}
.c5-p-sound-connect .c5-c-button {
	--size: 256;
	margin-top: min(40vw / var(--aspect), 40px);
}
.c5-p-sound-connect .c5-c-image {
	display: flex;
	column-gap: min(40vw / var(--aspect), 40px);
	margin-top: min(40vw / var(--aspect), 40px);
}
.c5-p-sound-connect .c5-c-image img:last-child {
	border-radius: 8px;
}

/**
 * YouTube
 * -------------------------------------------------- */
.c5-p-movie .c5-c-section__container {
	justify-content: center;
	height: 100%;
	padding: var(--sidegap);
}
.c5-p-movie .poster {
	display: grid;
	place-items: center;
	aspect-ratio: 9 / 16;
}
.is-align .c5-p-movie .poster {
	width: auto;
	height: calc(100dvh - var(--sidegap) * 2);
}
.is-unalign .c5-p-movie .poster {
	width: 100%;
	height: auto;
}
@media screen and (max-width: 767.98px) {
	.c5-p-movie .c5-c-section__container {
		padding-top: calc(var(--sidegap) + var(--headerHeight));
	}
	.is-align .c5-p-movie .poster {
		width: auto;
		height: calc(100dvh - var(--sidegap) * 2 - var(--headerHeight));
	}
}
.c5-p-movie .poster > * {
	grid-area: 1 / 1;
}
.c5-p-movie .poster img {
	border-radius: 2em;
}
.c5-p-movie .poster .caption {
	z-index: 1;
	align-self: end;
	width: 100%;
	padding: calc(var(--sidegap) / 2) var(--sidegap);
}
.c5-p-movie .poster .caption .sst {
	width: 100%;
	height: auto;
}
.c5-c-platbutton {
	--size: 48px;
	display: grid;
	place-items: center;
	z-index: 1;
	width: var(--size);
	height: var(--size);
	border: 2px solid currentcolor;
	border-radius: var(--size);
}
.c5-c-platbutton .c5-icon {
	width: 80%;
	height: auto;
	fill: currentcolor;
}

/**
 * プロモーションエリア
 * -------------------------------------------------- */
.c5-p-promotion .c5-c-section__container {
	justify-self: center;
	justify-content: center;
	width: var(--containerWidth);
	height: 100%;
	padding: var(--sidegap);
}
.c5-p-promotion:has(.c5-l-footer) .c5-c-section__container {
	height: calc(100% - var(--footerHeight) / 2);
}
.c5-promotion__image {
	display: grid;
	place-items: center;
	aspect-ratio: 9 / 16;
}
.is-align .c5-promotion__image {
	width: auto;
	height: calc(100dvh - var(--sidegap) * 2);
}
.is-unalign .c5-promotion__image {
	width: 100%;
	height: auto;
}
@media print, (min-width: 768px) {
	.is-align .c5-c-section:has(.c5-l-footer) .c5-promotion__image {
		height: calc(100dvh - var(--footerHeight));
	}
}
@media screen and (max-width: 767.98px) {
	.c5-p-promotion .c5-c-section__container {
		margin-inline: auto;
		padding-top: calc(var(--sidegap) + var(--headerHeight));
	}
	.is-align .c5-promotion__image {
		width: auto;
		height: calc(100dvh - var(--sidegap) * 2 - var(--headerHeight));
	}
	.is-align .c5-c-section:has(.c5-l-footer) .c5-promotion__image {
		height: calc(100dvh - var(--sidegap) * 2 - var(--headerHeight) - var(--footerHeight) / 2);
	}
}
.c5-promotion__image > * {
	grid-area: 1 / 1;
}
.c5-promotion__image > img {
	border-radius: 2em;
	width: 100%;
	height: auto;
}
.c5-promotion__image .c5-c-paragraph {
	align-self: end;
	display: grid;
	justify-items: center;
	row-gap: 1.4em;
	width: 100%;
	padding: var(--sidegap);
	fill: currentcolor;
	background: linear-gradient(to top, #000c, 40%, #0006 80%, #0000);
}

/* 簡易モーダル */
.c5-l-modal {
	z-index: 10;
	position: fixed;
	inset: 0;
	background: linear-gradient(to top, #000e, #000d 80%, #000c);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}
.c5-l-modal__container {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
}
.c5-js-modal_closer {
	position: absolute;
	right: var(--sidegap);
	stroke: currentcolor;
}
.c5-js-yt {
	aspect-ratio: 16 / 9;
	width: min(100% - var(--sidegap) * 2, 800px);
	height: auto;
}
.c5-promotion__link {
	display: grid;
	place-content: center;
	z-index: 2;
	position: absolute;
	inset: 0;
	text-align: center;
	background: linear-gradient(to top, #000e, #000d 80%, #000c);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}
.c5-promotion__link a {
	display: block;
	color: white;
}
.c5-promotion__link .icon {
	width: calc(var(--containerWidth) / 6.6);
	margin-bottom: .5em;
}
.c5-promotion__link .ico {
	position: relative;
	top: -.1em;
	width: .8em;
	height: auto;
	margin-left: .5em;
	fill: currentcolor;
	vertical-align: middle;
}
.c5-l-modal:not(.is-open),
.c5-promotion__link:not(.is-open) {
	opacity: 0;
	pointer-events: none;
}
.c5-l-modal.is-motion,
.c5-promotion__link.is-motion {
	transition: opacity .4s;
}
@media print, (min-width: 768px) {
	.c5-js-modal_closer {
		top: var(--sidegap);
	}
}
@media screen and (max-width: 767.98px) {
	.c5-js-modal_closer {
		bottom: var(--sidegap);
	}
}

/**
 * 動画プレーヤー
 * -------------------------------------------------- */
:where(.c5-video) {
	--controlSize: 40px;
	position: relative;
}
.c5-video video {
	z-index: -1;
	position: absolute;
	inset: 0;
	width: 100%;
	object-fit: cover;
}
.c5-player__control {
	display: grid;
	place-items: center;
	width: var(--controlSize);
	height: var(--controlSize);
	border: 2px solid currentcolor;
	border-radius: var(--controlSize);
	color: inherit;
}
.c5-player__control .c5-icon {
	grid-area: 1 / 1;
	width: 80%;
	height: auto;
	fill: currentcolor;
}
:where(.c5-video) .c5-player__control {
	position: absolute;
	right: var(--sidegap);
}
:where(.c5-video) .c5-video__play {
	bottom: 16px;
}
:where(.c5-video) .c5-video__volume {
	bottom: calc(var(--controlSize) + 24px);
}
:where(.c5-video) .c5-video__play.is-play .-on,
:where(.c5-video) .c5-video__play:not(.is-play) .-off,
:where(.c5-video) .c5-video__volume.is-muted .-on,
:where(.c5-video) .c5-video__volume:not(.is-muted) .-off {
	opacity: 0;
}
:where(.c5-video) .c5-video__play.is-play,
:where(.c5-video) .c5-video__volume.is-muted {
	animation: appear .4s both;
}
:where(.c5-video) .c5-video__play:not(.is-play),
:where(.c5-video) .c5-video__volume:not(.is-muted) {
	animation: hide .4s both;
}
@keyframes appear {
	from { transform: scale(.8); }
	50% { transform: scale(1.08); }
	to { transform: none; }
}
@keyframes hide {
	from { transform: none; }
	20% { transform: scale(.8); }
	to { transform: none; }
}

/**
 * ナビゲーションエリア
 * -------------------------------------------------- */
.c5-navigation__logo {
	display: grid;
	place-items: center;
	pointer-events: auto;
}
.c5-navigation__list {
	display: grid;
}
.c5-navigation__list .text {
	--fontBasis: 36;
	line-height: 1.2;
}
.c5-navigation__list .c5-c-product_name {
	display: grid;
	justify-items: center;
}
.c5-navigation__list .c5-c-product_name .sub,
.c5-navigation__list .c5-c-product_name .num {
	font-size: 44%;
}
.c5-navigation__list .c5-c-button {
	width: min(100%, 200px);
}
@media print, (min-width: 768px) {
	.c5-navigation__logo {
		display: none;
	}
	.c5-navigation__list {
		row-gap: min(40vw / var(--aspect), 40px);
		height: fit-content;
		margin-block: auto;
	}
	.c5-navigation__item {
		display: grid;
		align-content: center;
		row-gap: min(16vw / var(--aspect), 16px);
		padding-inline: var(--sidegap);
	}
	.c5-navigation__item .image {
		display: grid;
		align-items: end;
	}
	.c5-navigation__list .link {
		margin-top: .8em;
	}
	.c5-navigation__list .link:last-child {
		margin-top: .5em;
	}
}
@media screen and (max-width: 767.98px) {
	.c5-navigation__logo {
		width: min(104vw / var(--aspect), 104px);
		padding-inline: var(--sidegap);
		background: black;
	}
	.c5-navigation__item {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.c5-navigation__item.default {
		display: none;
	}
	.c5-navigation__item .image {
		display: flex;
		align-items: center;
		padding-inline: calc(var(--sidegap) / 2);
		font-size: .625rem;
	}
	.c5-navigation__item .image img {
		position: absolute;
		bottom: 0;
		left: min(104vw / var(--aspect) + var(--sidegap) / 2, 104px + var(--sidegap) / 2);
		width: min(102vw / var(--aspect), 102px);
	}
	.c5-navigation__item .image figcaption {
		padding-left: min(102vw / var(--aspect) + var(--sidegap) / 2, 102px + var(--sidegap) / 2);
	}
	.c5-navigation__item .text,
	.c5-navigation__item .text > *:not(.c5-u-dtonly) {
		display: flex;
		align-items: center;
		height: 100%;
	}
	.c5-navigation__item .text {
		column-gap: .25em;
		padding-inline: calc(var(--sidegap) / 2);
		border-left: 1px solid #fff4;
		--fontBasis: 18;
	}
	.c5-navigation__item .c5-c-button {
		grid-template-columns: 1fr 1.6em;
		min-width: 8em;
		height: 2em;
	}
	.c5-navigation__item .c5-c-button:not(:active) .arrow {
		transform: translateX(-.5em);
	}
	/* 出す時だけ出す */
	.c5-l-navigation {
		opacity: 0;
		translate: 0 1em;
		transition: opacity .2s, translate .2s var(--easeInOut);
		pointer-events: none;
	}
	[data-section^="ult-"] .c5-l-navigation,
	[data-section="exhibit"] .c5-l-navigation,
	[data-section="sound-connect"] .c5-l-navigation {
		opacity: 1;
		translate: 0;
		transition-duration: .4s;
		transition-timing-function: var(--easeOut);
	}
}
@media (min-aspect-ratio: 16/9) {
	.c5-navigation__item .image {
		margin-inline: calc(var(--sidegap) * -1);
		text-align: center;
	}
	.c5-navigation__item .image img {
		width: auto;
		height: calc(100svh * 1.6 / 8);
		max-width: none;
		margin-inline: auto;
	}
}
.c5-navigation__item {
	grid-area: 1 / 1;
	pointer-events: none;
	opacity: 0;
	transition: opacity .4s;
}
:is([data-section="kv"],[data-section="intro"],[data-section^="series"],[data-section="index"],
[data-section="movie"],[data-section="hinata"],[data-section="thehope"]) .c5-navigation__item.default,
[data-section="ult-field1"] .c5-navigation__item.ult_field1,
[data-section="ult-field3"] .c5-navigation__item.ult_field3,
[data-section="ult-field5"] .c5-navigation__item.ult_field5,
[data-section="ult-field7"] .c5-navigation__item.ult_field7,
[data-section="ult-tower9"] .c5-navigation__item.ult_tower9,
[data-section="exhibit"] .c5-navigation__item.ult_tower9,
[data-section="sound-connect"] .c5-navigation__item.ult_tower9 {
	pointer-events: auto;
	opacity: 1;
}
:is([data-section="kv"],[data-section="intro"],[data-section^="series"],[data-section="index"],
[data-section="movie"],[data-section="hinata"],[data-section="thehope"]) .c5-navigation__item.default + .default {
	grid-area: 2 / 1;
}

/**
 * Progress Bar
 * -------------------------------------------------- */
.c5-p-progress {
	--current: 0;
	--size: 200px;
	--barWidth: 2px;
	--barHeight: 10%;
	z-index: 1;
	position: absolute;
	top: calc(50% - var(--size) / 2);
	right: calc(var(--sidegap) / 2 - var(--barWidth) / 2);
	width: var(--barWidth);
	height: var(--size);
	opacity: .8;
	pointer-events: none;
	transition: opacity .4s;
}
.is-drawer .c5-p-progress {
	opacity: 0;
	transition-duration: .2s;
}
.c5-p-progress .track {
	width: 2px;
	height: 100%;
	margin: 0 auto;
	background: #aaa4;
}
.c5-p-progress .bar {
	position: absolute;
	top: 0;
	width: var(--barWidth);
	height: var(--barHeight); /* 後に js で書き換え */
	border-radius: var(--barWidth);
	background: url(../img/ult_grad_s.webp) center / 100% 100% no-repeat;
	transform: translateY( calc(100% * var(--current)) );
	transition: transform .8s var(--easeInOut);
}
@media (hover: none), (max-width: 767.98px) {
	.c5-p-progress .bar {
		transition-duration: .6s;
		transition-timing-function: var(--easeOut);
	}
	body[data-section="visual"] .c5-p-progress .bar {
		transition-duration: .8s;
	}
	body[data-section="visual"] .c5-contents[data-dur="dn"] .c5-p-progress .bar {
		transition-timing-function: var(--easeInOut);
	}
}

/**
 * Header
 * -------------------------------------------------- */
.c5-l-header {
	--drawerSize: min(100vw / var(--aspect), 100px);
	z-index: 1;
	position: fixed;
	color: white;
	line-height: 0;
}
.c5-l-header :where(.logo,.drawer) svg {
	width: 100%;
	height: auto;
}
.c5-l-header .logo {
	z-index: 2;
	position: relative;
	width: min(100vw / var(--aspect), 100px);
}
.c5-l-header .logo a {
	display: block;
}
.c5-l-header .ult {
	margin: 0;
	transition: opacity .4s var(--easeOut);
}
[data-section="kv"] .c5-l-header .ult {
	opacity: 0;
}
.c5-l-header .drawer {
	display: grid;
	z-index: 2;
	position: relative;
	width: var(--drawerSize);
	height: var(--drawerSize);
	border: 2px solid currentcolor;
	border-radius: var(--drawerSize);
	fill: currentcolor;
	stroke: currentcolor;
	line-height: 1;
}
.c5-l-header .drawer > * {
	grid-area: 1 / 1;
}
@media (min-width: 768px) {
	.c5-l-header {
		top: 16px;
		left: var(--sidegap);
	}
	.c5-l-header .ult {
		display: none;
	}
	.c5-l-header .drawer {
		margin-top: 16px;
	}
}
@media (max-width: 767.98px) {
	.c5-l-header {
		--drawerSize: min(48vw / var(--aspect), 48px);
		display: flex;
		align-items: center;
		column-gap: min(24vw / var(--aspect), 100px);
		inset: 0 0 auto;
		height: var(--headerHeight);
		padding-inline: var(--sidegap);
		background: black;
	}
	.c5-l-header .logo {
		width: min(100vw / var(--aspect), 100px);
		margin-left: var(--sidegap);
	}
	.c5-l-header .ult {
		position: relative;
		width: min(114vw / var(--aspect), 110px);
		margin-left: auto;
	}
	.c5-l-header .ult::before {
		inset: -4px;
	}
	.c5-l-header .drawer {
		border-width: 1px;
	}
}
/** Motion */
.c5-l-header .drawer.is-open .menu,
.c5-l-header .drawer:not(.is-open) .close {
	opacity: 0;
	scale: .6;
}
.c5-l-header .drawer.is-motion .menu,
.c5-l-header .drawer.is-motion .close {
	transition: opacity .2s, scale .2s var(--easeOut);
}
.c5-l-header .drawer.is-motion.is-open .menu,
.c5-l-header .drawer.is-motion.is-open .close {
	transition-duration: .4s;
}
.c5-l-header .drawer.is-motion.is-open .menu {
	transition-timing-function: var(--easeBack);
}

/**
 * Drawer Menu
 * -------------------------------------------------- */
.c5-l-drawermenu {
	display: grid;
	position: fixed;
	inset: 0;
	overflow: auto;
	scrollbar-width: none;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	backdrop-filter: blur(8px);
}
.c5-l-drawermenu .list {
	display: grid;
	position: relative;
	width: min(100% - var(--sidegap) * 4, 556px);
	height: fit-content;
	margin: 0 auto;
	color: white;
	fill: currentcolor;
	--fontBasis: 28;
	line-height: 1.2;
}
.c5-l-drawermenu .model,
.c5-l-drawermenu :where(dt,dd) {
	border-bottom: 1px solid var(--gray);
}
.c5-l-drawermenu .model {
	margin-top: .5em;
}
.c5-l-drawermenu .model dt {
	font-size: 75%;
}
.c5-l-drawermenu .model dt a {
	padding-inline: 0;
}
.c5-l-drawermenu .model dd:last-child {
	border-bottom: 0;
}
.c5-l-drawermenu .list :where(dt,dd,a) {
	padding: min(20vw / var(--aspect), 20px);
}
.c5-l-drawermenu .list dd:has(a) {
	padding: 0;
}
.c5-l-drawermenu .model dd:has(a) {
	margin-left: min(40vw / var(--aspect), 40px);
}
.c5-l-drawermenu .list dd a {
	display: flex;
	align-items: center;
	column-gap: 1em;
	padding: min(20vw / var(--aspect), 20px);
	fill: currentcolor;
}
.c5-l-drawermenu .list a:hover {
	color: inherit;
}
.c5-l-drawermenu .model .sst.-new {
	height: 1.1em;
	padding: .2em .4em;
	border: .6px solid currentcolor;
	color: yellow;
	line-height: 1;
}
@media print, (min-width: 768px) {
	.c5-l-drawermenu {
		right: auto;
		width: var(--conceptWidth);
		background: linear-gradient(to left, #222c, #2226 24px, #2220 64px), #000c;
	}
	.c5-l-drawermenu .list {
		width: min(100% - var(--sidegap) * 4, 556px);
		margin-top: calc(var(--drawerSize) * 2);
		padding-bottom: var(--drawerSize);
	}
}
@media screen and (max-width: 767.98px) {
	.c5-l-drawermenu {
		top: var(--headerHeight);
		background: #000c;
	}
	.c5-l-drawermenu .list {
		width: calc(100% - var(--sidegap) * 2);
		padding-block: 1em;
	}
}
/** Motion */
.c5-l-drawermenu:not(.is-active) {
	display: none;
}
.c5-l-drawermenu:not(.is-open) {
	opacity: 0;
}
.c5-l-drawermenu.is-motion {
	transition: opacity .2s;
}
.c5-l-drawermenu.is-motion.is-open {
	transition-duration: .4s;
}
[data-section="ult-field1"] [href="#ult-field1"],
[data-section="ult-field3"] [href="#ult-field3"],
[data-section="ult-field5"] [href="#ult-field5"],
[data-section="ult-field7"] [href="#ult-field7"],
[data-section="ult-tower9"] [href="#ult-tower9"],
[data-section="sound-connect"] [href="#sound-connect"],
[data-section="series_ult-field1"] [href="#series_ult-field1"] {
	opacity: .5;
	pointer-events: none;
}

/**
 * Footer (最後のセクションの中)
 * -------------------------------------------------- */
.c5-l-footer {
	display: grid;
	place-items: center;
	position: relative;
	width: 100%;
	height: var(--footerHeight);
	text-align: center;
}
.c5-l-footer .copyright small {
	font-size: .625rem;
	font-family: "Arial", sans-serif;
}
.c5-l-footer .pagetop {
	position: absolute;
	top: max(50% - 18vw / var(--aspect), 50% - 18px);
	right: var(--sidegap);
}
.c5-l-footer .pagetop:hover {
	color: inherit;
}
.c5-l-footer .pagetop .c5-c-icon {
	--size: min(40vw / var(--aspect), 40px);
}

/**
 * Loading
 * -------------------------------------------------- */
.c5-loading {
	--size: 120px;
	display: grid;
	place-items: center;
	z-index: 1;
	position: fixed;
	inset: 0;
	color: white;
	background: black;
}
.c5-loading > * {
	grid-area: 1 / 1;
}
.c5-loading .loader {
	position: relative;
}
.c5-loading .loader .c {
	width: var(--size);
	height: auto;
	overflow: visible;
	fill: none;
	stroke: gray;
	stroke-width :1;
	stroke-linecap: round;
	stroke-dasharray: 190 190;
	animation: loader 1.4s infinite cubic-bezier(.4,0,.3,1), rolling 1.2s infinite linear;
}
.c5-loading .loader::before {
	content: "";
	position: absolute;
	inset: 0;
	width: var(--size);
	height: var(--size);
	border: 1px solid gray;
	border-radius: var(--size);
	opacity: .3;
}
.c5-loading .sst {
	overflow: visible;
	width: auto;
	height: 1em;
	fill: currentcolor;
	line-height: 1;
	vertical-align: text-bottom;
}
.c5-loading .sst path {
	animation: loading 1.6s cubic-bezier(.3,1,.7,1) infinite;
}
.c5-loading .sst path:nth-child(1) { animation-delay: -1.2s; }
.c5-loading .sst path:nth-child(2) { animation-delay: -1.1s; }
.c5-loading .sst path:nth-child(3) { animation-delay: -1s; }
.c5-loading .sst path:nth-child(4) { animation-delay: -.9s; }
.c5-loading .sst path:nth-child(5) { animation-delay: -.8s; }
.c5-loading .sst path:nth-child(6) { animation-delay: -.7s; }
.c5-loading .sst path:nth-child(7) { animation-delay: -.6s; }
@keyframes loading {
	from { opacity: 0; transform: translateY(-.5em); }
	40%, 80% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.3,0,.7,0); }
	to { opacity: 0; transform: translateY(.5em); }
}
@keyframes loader {
	from { stroke-dashoffset: 190; }
	to { stroke-dashoffset: -190; }
}
@keyframes rolling {
	from { transform: none; }
	to { transform: rotate(360deg); }
}
/* Loaded */
.c5-loading.is-loaded {
	pointer-events: none;
	opacity: 0;
	transition: opacity 1s .4s;
}
.c5-loading.is-loaded .loader {
	opacity: 0;
	transform: scale(.9);
	transition: opacity .6s, transform .6s cubic-bezier(.3,1,.7,1);
}
.c5-loading.is-loaded .sst {
	opacity: 0;
	transform-origin: top center;
	transform: scale(.6);
	transition: opacity .4s, transform .4s cubic-bezier(.3,0,.7,0);
}

html {
	height: auto;
	background: black;
	overscroll-behavior: none;
}
body {
	--conceptWidth: min(50vw, 100vw - var(--contentsWidth) - var(--navigationWidth));
	--contentsWidth: clamp(320px, 50vw * .6875, 660px);
	--navigationWidth: clamp(160px, 50vw * .3125, 300px);
	overflow: hidden;
	margin: 0;
	color: white;
	font: 400 normal 1em / 1.6 "Ryumin KO+ R JIS2004 AP", "Ryumin Regular KL JIS2004", a-otf-ryumin-pr6n, serif;
	font-feature-settings: "palt";
	background: black !important;
}
body.is-drawer {
	overflow: hidden !important;
}
.sst {
	width: auto;
	height: 1em;
	fill: currentcolor;
	vertical-align: text-bottom;
	font-family: "SST W20 Roman", sans-serif;
}
.c5-u-visuallyhidden {
	position: absolute;
	top: 0;
	left: 0;
	clip: rect(0 0 0 0);
	overflow: hidden;
	width: 1px;
	height: 1px;
}
.c5-u-italic {
	display: inline-block;
	transform: skewX(-8deg);
}
.c5-u-tonext {
	--size: 40px;
	position: absolute;
	bottom: var(--sidegap);
	left: calc(50% - var(--size) / 2);
	width: var(--size);
	height: var(--size);
	border-radius: var(--size);
	opacity: 0;
	transform: scale(.8);
	transition: opacity .2s, transform .2s cubic-bezier(.3,1.6,.7,1);
	pointer-events: none;
}
.c5-u-tonext:focus-visible {
	pointer-events: auto;
	opacity: 1;
	transform: none;
}
.c5-u-tonext .c5-icon {
	width: inherit;
	height: inherit;
}
:root {
	--aspect: 19.2;
	--gray: #707070;
	
	--sidegap: max(40vw / var(--aspect), 20px);
	
	--footerHeight: 60px;
	--contentsMaxWidth: 100%;
	
	--easeIn: cubic-bezier(.3,0,.7,0);
	--easeOut: cubic-bezier(.3,1,.7,1);
	--easeInOut: cubic-bezier(.7,0,.3,1);
	--easeBack: cubic-bezier(.3,1.6,.7,1);
}
:is(h1,h2,h3,h4,h5,h6,p,ul,ol,dl,figcaption,button) {
	font-size: var(--fontSize);
}
[style^="--w:"] {
	height: auto;
}
img[src$=".webp"][style^="--w:"] {
	width: min(1vw * var(--w) * .5 / var(--aspect), var(--w) * .5px);
}
img[src$=".svg"][style^="--w:"], svg[style^="--w:"] {
	width: min(1vw * var(--w) / var(--aspect), var(--w) * 1px);
}
@media print, (min-width: 768px) {
	.c5-u-mdonly { display: none !important; }
	:is(h1,h2,h3,h4,h5,h6,p,ul,ol,dl,figcaption,button) {
		--fontSize: min(1vw * var(--fontBasis) / var(--aspect), var(--fontBasis) * .0625rem);
	}
}
@media screen and (max-width: 767.98px) {
	.c5-u-dtonly { display: none !important; }
	:root {
		--aspect: 6.6;
		--sidegap: min(20vw / var(--aspect), 20px);
		
		--headerHeight: min(80vw / 6.6, 80px);
		--navigationHeight: min(80vw / 6.6, 80px);
		--contentsMaxWidth: 660px;
	}
	:where(h1,h2,h3,h4,h5,h6,p,ul,ol,dl,figcaption,button) {
		--fontSize: min(1vw * var(--fontBasis) / var(--aspect), var(--fontBasis) * .0625rem);
	}
}
::selection {
	color: black;
	background: #fffa;
	-webkit-text-fill: transparent;
}
*,*::before,*::after{box-sizing:border-box;}
html,body{min-height:100svh}
:where(ul,ol){list-style:none;padding:0;}
:where(img,svg,video,iframe){vertical-align:middle;}
:where(img[height],picture>img,video[height]){height:auto;}
:where(input,button,textarea,select,small){font:inherit;}
:where(body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,ul,ol,dl,dd){margin:0;}
:where(img,picture,video,iframe){display:inline-block;max-width:100%;}
:where(a){color:inherit;text-decoration:inherit;text-decoration-skip-ink:auto;}
:where(button){-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;padding:0;color:inherit;background:none;}
:where(sub){vertical-align:baseline;}
@media(hover){:where(a[href],button){cursor:pointer;}}
/* Chrome UserAgentStyle 模倣 */
a:focus,button:focus{outline:none}a:focus-visible,button:focus-visible{outline:2px solid #005fcb;border-radius:2px;box-shadow:0 0 0 4px white}