@charset "shift_jis";

#developPrintReqUrl{display:none}

/**
 * レイアウト
 * -------------------------------------------------- */
@media (min-width: 768px) {
	:is(.c5-square, .c5-side) {
		position: fixed;
		overflow-x: hidden;
		top: 0;
		height: 100dvh;
	}
	.c5-square {
		left: 0;
		width: var(--squareWidth);
	}
	.c5-contents {
		width: var(--contentsWidth);
		margin-top: 8svh;
		margin-right: var(--navigationWidth);
		margin-left: var(--squareWidth);
		border-radius: var(--basisgap) var(--basisgap) 0 0;
		background: white;
	}
	.c5-side {
		right: 0;
		width: var(--navigationWidth);
	}
	.c5-p-cv {
		display: none;
	}
}
@media (max-width: 767.98px) {
	.c5-contents {
		padding-bottom: var(--cvHeight);
	}
	:is(.c5-square, .c5-side) {
		display: none;
	}
	.c5-p-cv {
		display: grid;
		z-index: 4;
		position: fixed;
		inset: auto 0 0;
		width: var(--cw);
		height: var(--cvHeight);
	}
}
:is(html, body, .c5-square, .c5-side) {
	scrollbar-width: none;
	overscroll-behavior: auto auto;
}
:where(.c5-container) svg:has(use[href="#svg-linkbuds"]) {
	overflow: visible;
}

/* :::::: 追従バナー :::::: */
@media (max-width: 767.98px) {
	.c5-p-cv {
		grid-template-columns: auto auto 1fr;
		align-items: center;
		row-gap: calc(var(--basisgap) * .2);
		column-gap: calc(var(--basisgap) * .4);
		padding-inline: calc(var(--basisgap) * .4);
		background: whitesmoke;
		transition: translate .8s var(--easeOut);
	}
	.c5-cv__image {
		grid-area: 1 / 1 / 3 / 2;
		width: calc(var(--cw) * 144 / var(--aspect));
		margin-top: calc(var(--basisgap) * -1);
		transition: opacity .8s, translate .8s var(--easeOut);
	}
	.c5-cv__linkbuds {
		grid-area: 1 / 2;
		align-self: end;
		width: calc(var(--cw) * 200 / var(--aspect));
		padding-inline:  calc(var(--basisgap) * .2);
	}
	.c5-cv__linkbuds svg {
		width: 100%;
		height: auto;
	}
	.c5-p-cv .c5-button {
		grid-area: 2 / 2;
		align-self: start;
		border-radius: .6em;
	}
	.c5-cv__button {
		grid-area: 1 / 3 / 3 / 4;
		--fontBasis: 22;
	}
	.c5-cv__button a {
		display: flex;
		align-items: center;
		justify-content: center;
		column-gap: .5em;
		margin-left: .4em;
		padding: 1em 1em;
		border-radius: .6em;
		color: white;
		background: #4b5ff5;
		box-shadow: 0 .2em 0 #292f7a;
		transition: opacity .4s, scale .4s var(--easeBack);
		transition-delay: .2s;
	}
	.c5-cv__button svg {
		height: 1em;
		fill: none;
		stroke: currentcolor;
		rotate: -90deg;
	}
	
	/* Inview */
	.c5-p-cv.is-hide {
		translate: 0 100%;
	}
	.c5-p-cv.is-hide .c5-cv__image {
		opacity: 0;
		translate: 0 var(--basisgap);
	}
	.c5-p-cv.is-hide,
	.c5-p-cv.is-hide .c5-cv__image {
		transition-duration: .4s;
	}
	.c5-p-cv.is-hide .c5-cv__button a {
		opacity: 0;
		scale: .8;
		transition-timing-function: ease, var(--easeOut);
	}
}

/* :::::: ワイヤレスステレオヘッドセット :::::: */
.c5-product__title {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: .25em;
	font-weight: 400;
	--fontBasis: 12;
}
.c5-product__title :where(.t, .n),
.c5-product__title :where(.t, .n) svg {
	width: auto;
	height: inherit;
	line-height: 0;
}
.c5-product__title :where(.t, .n) svg {
	overflow: visible;
}
.c5-product__title .t {
	height: 2.5em;
	margin-top: .25em;
}
.c5-product__title .n {
	height: .8em;
}

.c5-suggestion {
	position: relative;
}
.c5-suggestion img {
	width: calc(var(--cw) * 64 / var(--aspect));
	height: auto;
}

/* :::::: 商品詳細／購入はこちら :::::: */
.c5-button {
	z-index: 0;
	position: relative;
	width: min(100%, 12.5em);
	padding: .7em;
	border-radius: 3em;
	--fontBasis: 16;
	text-align: center;
	--gradient: url("data:image/webp;base64,UklGRjwEAABXRUJQVlA4IDAEAACwNgCdASpYAiwBPpFIoU0lpCMiIAgAsBIJaW7fpz9swg6YFr6efTyrgn//TXNEx7mfIArN2vFych77ZOSkw99vZPCRQr97TnkKfnQBKyoOrvVjlZ8BkOljt8DUB9xtD8f8MZYdzr/RvodZNtgI+kDb4jgwiBErqYehD6D5E9ZYEPcaaaL6SvMWrDpTZ1nFBOc2OOcgG9yWO+HGE9pO7ckTGwk/dJ+k7Z1nFA7chHuRVmbGwkwVyGo9u+djfZy9B1dhtlEvDhbCvjMuXjm2I6k4oHe4szkZKKOrDxzilvMHuYPbI7OgbRyybckTFqdSeh69YGCbsojPInfIxFtETs+eAYdMOQeE4/ZzOKB6Dm6ntOn7+AinHJWk8Qds9x7yXni55C65gc6Dh1T51fP74t9uKB248PT9k4LJTBRCr+dSWvuf0kkgTmadkQITzZMa8YdjaXpa/KL8FNGP2rdySLSGaUN3qEHlBqIXc7c/uk8N7CHgoQM8nKz53eWGYB/u+5EENzcbhTc2svgej27D4ipP0nEkwWLpA89vvcCmWUvqXFT941Fo/lLVXtDCOCv7D2LH7U6z+hpZrrXCU7agAAD+7+7eiJ8f/kl+Vn6k8GIN+ZZBDeOQFcIh/aiUTLLeXKLz9vKV5wwQ2Rrfh502qPCnSKo1KXN9n2Mp8ZR1ENIiFQ0y7aJvDBuVJmifETlD/rrM5omSQ5LGGEex+RHaXSZAKqlJCbvKS7HUDXij+pNT5gu6/fkqxOCOlaeF2lL/8CtYekP14lMrpaLPNRFxVmRshEGfhlpq5Af2TXb/HaZ3HCyuvYpUpsJmga2JZDUBmOBuCex4H08u/Tw/nf0EEU7i4r/MStPFBRRuzBgRiTshG2QD4t/nfeh4L+KFmvvN5HXD/o4ZMPiCmhAxT+XBniBonAWrANYP/lKQX77e0cRm1sHJ9DKU1tPkRy5CtAh1GbEbX4M1rKIuokQeHBMD8gjLLy9UIqY2dk7bxq+bkCRkKJLmyahI4mwqhhPrUF1csRP+4ELNDbEcAiN8jFrIqJ6vBuvQPJ2FWFF7xeYSrwnMKA5+W7nXBWC3Bno9vn6sRzfOS1J2mLuek2mWYpBEt+h/1AEQR/DMISHlWXslDNI86t4CRY/Y4EZt+WrtLr1baRx55ALC+Lw5sY81mZCCN/kvUVsr6w1e3q9ufdTJcS6A3gGy4oTKLzf8u/oD++gANcxTq0E/cwKO0ULuNlD1E3Hpvi3g9WnJVOb+Zn9ujZBt5QWbVDVEnl57aY+PpygI5QNDw6R3TUgJkrc0hDEVJ3FDtsfnpFmPv4MwvQ98qhHkgUkREjyCM6LkwepVepWoWYJ/bAHM0HcJx5RoPhZZncE0DS0Ep/+toozJwPt1B5gAQ4wwZtESMWDQsnCmkDzN1Zxl2MqNF20US2WJhsDhGAAA");
	
}
.c5-button::before {
	content: "";
	z-index: -1;
	position: absolute;
	inset: 0;
	border: var(--border1) solid currentcolor;
	border-radius: inherit;
	background: white;
}
@media (hover) {
	.c5-button::before {
		transition: border-color .4s, scale .4s var(--easeBack);
	}
	.c5-button::after {
		content: "";
		z-index: -1;
		position: absolute;
		inset: 0;
		border-radius: inherit;
		background: linear-gradient(to top, #fff0, #fffa), var(--gradient) center / cover no-repeat;
		opacity: 0;
		transition: opacity .4s, scale .4s var(--easeBack);
	}
	.c5-button:hover::before {
		scale: 1.02 1.08;
		border-color: white;
		transition-duration: .2s;
	}
	.c5-button:hover::after {
		scale: 1.02 1.08;
		opacity: .5;
		transition-duration: .2s;
	}
}

/* :::::: テキストリンク :::::: */
.c5-textlink {
	background: linear-gradient(currentcolor, currentcolor) left bottom / 100% 1px no-repeat;
}
.c5-textlink[target="_blank"]::after {
	content: "";
	display: inline-block;
	position: relative;
	top: -.1em;
	width: .75em;
	height: .75em;
	margin: 0 .2em;
	vertical-align: middle;
	background: var(--external) center / contain no-repeat;
}
.c5-textlink[target="_blank"] {
	background-size: calc(100% - 1em) 1px;
}
@media (hover) {
	.c5-textlink {
		transition: background-size .4s var(--easeOut);
	}
	.c5-textlink:hover {
		background-position: right bottom;
		background-size: 0 1px;
		transition-duration: .2s;
	}
	.c5-textlink[target="_blank"]:hover {
		background-position: right 1em bottom;
	}
}

/* :::::: 本文 :::::: */
:is(.c5-paragraph, .c5-note) {
	line-height: 1.5555;
	line-break: strict;
	overflow-wrap: break-word;
	hanging-punctuation: last allow-end;
}
.c5-paragraph {
	--fontBasis: 21;
	text-align: justify;
}
.c5-note,
.c5-notes {
	--fontBasis: 14;
}
.c5-notes li {
	padding-left: 1em;
	text-indent: -1em;
}

/* :::::: セクション見出し :::::: */
.c5-heading,
.c5-subject {
	display: flex;
	align-items: center;
	color: #111;
	font-weight: 700;
	--fontBasis: 46;
	line-height: 1.3043;
}
.c5-heading .n {
	--h: 2.4em;
	line-height: 0;
	
	/* Inview */
	clip-path: inset(0);
}
.c5-heading .n svg {
	width: auto;
	height: var(--h);
}
.c5-heading .t {
	padding-left: .4em;
	border-image: linear-gradient(currentcolor 0 0) 0 0 0 1 / .2em 0 .08em calc(var(--border1) * 2);
}
.c5-heading:has(.n) .t {
	margin-left: .4em;
}

.c5-heading .t span {
	display: inline-block;
}
.c5-heading.is-standby :is(.n, .t) {
	opacity: 0;
	transform: translateY(var(--basisgap));
}
.c5-heading.is-motion :is(.n, .t) {
	transition: opacity .8s, transform .8s var(--easeOut);
	transition-delay: .2s;
}
.c5-heading:has(.n).is-motion .t {
	transition-delay: .3s;
}
.c5-heading.is-motion.is-standby :is(.n, .t) {
	transition-delay: 0s;
	transition-duration: .2s;
}

/**
 * Square
 * -------------------------------------------------- */
@media (min-width: 768px) {
	.c5-square {
		display: grid;
		place-items: center;
		place-content: center;
	}
	.c5-square::before {
		content: "";
		z-index: -1;
		position: absolute;
		inset: auto calc(var(--basisgap) * -1);
		height: 60vh;
		border-radius: 50%;
		background: #ffffff4d;
		filter: blur(40px);
	}
	.c5-square__products {
		grid-area: 1 / 1;
		position: relative;
		width: calc(var(--cw) * 343 / var(--aspect));
	}
	.c5-square__products .splide__slide {
		mix-blend-mode: plus-lighter;
	}
	.c5-square__products .splide__pagination {
		margin-top: var(--basisgap);
	}
	.c5-square__products .splide__label {
		display: grid;
		place-items: center;
		margin-top: 1em;
		--fontBasis: 14;
	}
	.c5-square__products .splide__label span {
		grid-area: 1 / 1;
		transition: opacity .2s;
	}
	.c5-square__products .splide__label span:not(.is-active) {
		opacity: 0;
		transition-duration: .4s;
	}
	.c5-square__scroll {
		position: absolute;
		right: calc(var(--basisgap) / 2);
		bottom: var(--basisgap);
		color: #333;
	}
	.c5-square__scroll svg {
		overflow: visible;
		stroke-width: 1;
	}
	.c5-square__scroll line {
		stroke-dasharray: 100px;
		animation: scrollline 2.4s infinite;
	}
	.c5-square__scroll polyline {
		stroke-dasharray: 16px;
		animation: scrollpoly 2.4s infinite;
	}
	.c5-square__scroll.is-hide {
		opacity: 0;
		translate: 0 -10px;
		transition: opacity .4s, translate .4s var(--easeOut);
	}
	
	/* Inview */
	.c5-square__products.is-standby {
		opacity: 0;
		transform: translateY(var(--basisgap));
	}
	.c5-square__products.is-motion {
		transition: opacity .8s, transform .8s var(--easeOut);
	}
	.c5-square__products.is-motion.is-standby {
		transition-duration: .4s;
	}
	
	.c5-square__thumb {
		--size: calc(var(--cw) * 800 / var(--aspect));
		grid-area: 1 / 1;
		display: grid;
		z-index: 1;
		pointer-events: none;
	}
	.c5-square__thumb figure {
		grid-area: 1 / 1;
		overflow: hidden;
		position: relative;
		width: var(--size);
		height: var(--size);
		border-radius: var(--size);
		transition: opacity .2s, scale .2s var(--easeOut);
	}
	.c5-square__thumb figure:not(.is-active),
	.c5-container[data-section="feature-1"] .c5-square__thumb figure[data-thumb="feature-1"],
	.c5-container[data-section="feature-2"] .c5-square__thumb figure[data-thumb="feature-2"],
	.c5-container[data-section="feature-3"] .c5-square__thumb figure[data-thumb="feature-3"],
	.c5-container[data-section="feature-4"] .c5-square__thumb figure[data-thumb="feature-4"],
	.c5-container[data-section="feature-5"] .c5-square__thumb figure[data-thumb="feature-5"] {
		z-index: 1;
		opacity: 0;
		scale: .98;
	}
	.c5-square__thumb figure.is-active {
		z-index: 2;
		transition-duration: .4s;
	}
	.c5-square__thumb figure img {
		border-radius: inherit;
	}
}
@keyframes scrollline {
	from { stroke-dashoffset: 200px; animation-timing-function: cubic-bezier(.3,0,.7,0); }
	50% { stroke-dashoffset: 200px; }
	to { stroke-dashoffset: 0px; animation-timing-function: cubic-bezier(.3,1,.7,1) }
}
@keyframes scrollpoly {
	from { stroke-dashoffset: 32px; animation-timing-function: cubic-bezier(.3,0,.7,0); }
	60% { stroke-dashoffset: 32px; }
	to { stroke-dashoffset: 0px; animation-timing-function: cubic-bezier(.3,1,.7,1) }
}

/**
 * Side
 * -------------------------------------------------- */
@media (min-width: 768px) {
	.c5-side {
		display: flex;
		overflow: hidden;
	}
	.c5-side__container {
		align-self: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 12svh calc(var(--basisgap) * 1.8);
	}
	.c5-side__anchor {
		display: flex;
		flex-direction: column;
		width: 100%;
		row-gap: .4em;
		font-weight: 700;
		--fontBasis: 32;
	}
	.c5-side__anchor a {
		display: flex;
		align-items: center;
		z-index: 0;
		position: relative;
		padding: .2em .5em .2em .75em;
	}
	.c5-side__anchor a::before {
		content: "";
		z-index: -1;
		position: absolute;
		inset: 0;
		border: calc(var(--cw) * 2 / var(--aspect)) solid currentcolor;
		border-radius: .5em;
		background: white;
	}
	.c5-side__anchor a.is-popn {
		animation: popn .4s both;
	}
	.c5-side__anchor :where(.n, .arr) {
		width: .7em;
		line-height: 0;
	}
	.c5-side__anchor :where(.n, .arr) svg {
		width: 100%;
		height: auto;
	}
	.c5-side__anchor .t {
		flex-grow: 1;
		margin-left: .5em;
		padding-left: .5em;
		border-image: linear-gradient(currentcolor 0 0) 0 0 0 1 / .2em 0 .2em var(--border1);
	}
	.c5-side__anchor .arr {
		position: relative;
		width: .6em;
		height: calc(.6em * 14 / 11);
		margin-left: .2em;
		clip-path: inset(0);
	}
	.c5-side__anchor .arr svg {
		stroke: currentcolor;
	}
	.c5-side__anchor .arr svg + svg {
		position: absolute;
		bottom: 1em;
		left: 0;
	}
	.c5-side__products {
		display: grid;
		place-items: center;
		position: relative;
		width: calc(var(--cw) * 220 / var(--aspect));
		margin-top: calc(var(--basisgap) * 1.2);
	}
	.c5-side__products figure {
		grid-area: 1 / 1;
		transition: opacity .2s;
	}
	.c5-side__products figure:not(.is-active) {
		opacity: 0;
		transition-delay: .2s;
	}
	.c5-side__products figure.is-active {
		z-index: 1;
	}
	.c5-side__container .c5-product__title {
		margin-top: 2em;
	}
	.c5-side__container .c5-button {
		margin-top: 1.8125em;
	}
	.c5-side__container .c5-button + .c5-button {
		margin-top: .9375em;
	}
	.c5-side__products::before {
		content: "";
		z-index: -1;
		position: absolute;
		inset: calc(var(--basisgap) * -1) calc(var(--basisgap) * -2) calc(var(--basisgap) * -3);
		border-radius: 50%;
		background: #ffffffb3;
		filter: blur(20px);
	}
}
@media (min-aspect-ratio: 16 / 9) and (min-width: 768px) {
	.c5-side__anchor {
		font-size: 2.96svh;
	}
	.c5-side__products {
		aspect-ratio: 560 / 540;
		width: calc(19.48svh * 560 / 540);
		margin-top: 4.7svh;
	}
	.c5-side__container .c5-product__title {
		font-size: 1.112svh;
	}
	.c5-side__container .c5-button {
		font-size: 1.472svh;
	}
}
@media (hover) {
	.c5-side__anchor a::before {
		transition: scale .4s var(--easeBack);
	}
	.c5-side__anchor a:hover::before {
		scale: 1.02 1.08;
		transition-duration: .2s;
	}
	.c5-side__anchor a:active::before {
		scale: .98 .96;
		transition-duration: .1s;
		transition-timing-function: var(--easeOut);
	}
	.c5-side__anchor .arr svg {
		transition: stroke .4s, transform .4s;
		transition-timing-function: var(--easeInOut);
	}
	.c5-side__anchor .arr svg + svg {
		transition-timing-function: var(--easeOut);
	}
	.c5-side__anchor a:hover .arr svg:nth-child(1),
	.c5-side__anchor a:not(:hover) .arr svg:nth-child(2) {
		stroke: transparent;
	}
	.c5-side__anchor a:hover .arr svg {
		transform: translateY(1em);
	}
}
@keyframes popn {
	25% { scale: .92; }
	50% { scale: 1.04; }
	75% { scale: .99; }
}

/**
 * Contents
 * -------------------------------------------------- */
.c5-features {
	padding: calc(var(--basisgap) * 1.2) var(--basisgap);
}
.c5-features__image {
	margin-top: calc(var(--basisgap) * .8);
}
.c5-features__image:not(.splide) {
	overflow: hidden;
	border-radius: calc(var(--basisgap) * 1.5);
}
.c5-features__image.splide .splide__track {
	border-radius: calc(var(--basisgap) * 1.5);
}
:where(.c5-features) .c5-heading {
	--fontBasis: 46;
}
:where(.c5-features) .c5-paragraph {
	margin-top: 1.6666em;
}
:where(.c5-features) .c5-note {
	margin-top: 1.5em;
}
:is(.c5-p-feature-2, .c5-p-feature-4, .c5-p-LinkBuds-Clip, .c5-p-conceptmovie) {
	background: #fcfcfc;
}
.c5-features [src*="sound_connect"] {
	display: block;
	width: calc(var(--cw) * 273 / var(--aspect));
	margin-inline: auto;
}
.c5-features__image.splide .splide__pagination__page {
	background-color: gainsboro;
}
.c5-features__image.splide .splide__pagination__page.is-active {
	background-color: white;
}

/* Inview */
.c5-features__image.is-standby {
	opacity: 0;
	transform: translateY(calc(var(--basisgap) * 2));
}
.c5-features__image.is-motion {
	transition: opacity .8s, transform .8s var(--easeOut);
	transition-delay: .2s;
}
.c5-features__image.is-motion.is-standby {
	transition-delay: 0s;
	transition-duration: .2s;
}


/* :::::: 音のフレグランス :::::: */
.c5-p-intro {
	padding: var(--basisgap);
}
.c5-intro__display {
	margin-inline: calc(var(--basisgap) * -1);
}
.c5-intro__display .splide__slide {
	display: flex;
	justify-content: center;
	mix-blend-mode: plus-lighter;
}
.c5-intro__display .splide__slide img {
	margin-inline: auto;
	width: calc(var(--cw) * 260 / var(--aspect));
}
.c5-intro__single {
	display: flex;
	justify-content: center;
	column-gap: calc(var(--basisgap) * .3);
	position: relative;
	margin-top: calc(var(--basisgap) * .8);
}
.c5-intro__single button {
	aspect-ratio: 256 / 307;
	width: calc(var(--cw) * 128 / var(--aspect));
	height: calc(var(--cw) * 153.5 / var(--aspect));
	transition: scale .4s var(--easeOut);
}
.c5-intro__single button.is-active {
	scale: 1.08;
	transition-duration: .2s;
	transition-timing-function: var(--easeBack);
}
.c5-intro__subject {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top:  calc(var(--basisgap) * .7);
	color: #111;
	--fontBasis: 40;
	line-height: 1;
}
.c5-intro__subject svg {
	overflow: visible;
}
.c5-intro__subject [width="577"] {
	width: 100%;
	height: auto;
}
.c5-intro__subject svg:nth-child(2) {
	margin-top: .3em;
}
.c5-intro__subject svg:last-child {
	width: calc(var(--cw) * 295 / var(--aspect));
	height: auto;
	margin-top: .4em;
}
.c5-intro__single .c5-suggestion {
	position: absolute;
	top: 16%;
	left: 8%;
	opacity: 0;
}
.c5-intro__single .c5-suggestion.is-anim {
	animation: introAttention 2.4s both;
}
@keyframes introAttention {
	from { opacity: 0; transform: scale(1.5); }
	8%, 24% { opacity: 1; transform: scale(1); }
	32% { transform: scale(.9); }
	40% { transform: scale(1.02); }
	48%, 50% { opacity: 1; transform: scale(1); animation-timing-function: var(--easeInOut); }
	to { opacity: 0; transform: translateX(calc(var(--contentsWidth) * .7)); }
}
@media (max-width: 767.98px) {
	.c5-p-intro {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: calc(100svh - var(--headerHeight));
	}
}
@media (min-aspect-ratio: 16 / 9) {
	.c5-p-intro {
		padding-top: 3.5svh;
	}
	.c5-intro__display {
		height: fit-content;
	}
	.c5-intro__display .splide__slide img {
		width: calc(47.65svh * 687 / 1360);
	}
	.c5-intro__single {
		margin-top: 2.8svh;
	}
	.c5-intro__single button {
		width: calc(14.23svh * 256 / 308);
		height: auto;
	}
	.c5-intro__subject {
		margin-top: 2.6svh;
	}
	.c5-intro__subject svg[viewBox="0 0 577 77"] {
		width: calc(7.17svh * 577 / 77);
	}
	.c5-intro__subject svg[viewBox="0 0 577 40"] {
		margin-top: 2.1svh;
		width: calc(3.72svh * 577 / 40);
	}
	.c5-intro__subject svg[viewBox="0 0 575 94"] {
		margin-top: 2.9svh;
		width: calc(4.45svh * 575 / 94);
	}
}
@media (hover) {
	.c5-intro__single button:hover {
		scale: 1.08;
	}
}

/* :::::: それは、好きな香水をまとったときのような気分。 :::::: */
.c5-p-statement {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 1.5555em;
	padding: calc(var(--basisgap) * 2) var(--basisgap);
}
.c5-p-statement .c5-paragraph {
	--fontBasis: 24;
	line-height: 1.8333;
	text-align: center;
}

/* :::::: 快適に一日過ごせる５つの特長 :::::: */
.c5-p-index {
	--size: calc(var(--contentsWidth) - var(--cw) * 140 / var(--aspect));
	display: grid;
	align-content: center;
	min-height: 100lvh;
	padding-block: calc(var(--basisgap) * 2);
}
.c5-p-index:has(.splide) {
	min-height: auto;
}
.c5-index__subject {
	--fontBasis: 40;
	text-align: center;
}
.c5-index__list,
.c5-index__progress {
	grid-area: 2 / 1;
}
.c5-index__item {
	grid-area: 1 / 1;
}
.c5-index__list {
	display: grid;
	place-items: center;
	--fontBasis: 64;
	margin-top: var(--basisgap);
	background: linear-gradient(to top, #aae6ff00, #aae6ff 30%, #aae6ff 60%, #aae6ff00 90%);
}
.c5-index__item .c5-image {
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}
.c5-index__list.splide {
	place-items: normal;
}
.c5-index__list.splide .splide__list {
	--fontBasis: 64;
}
.c5-index__list.splide .c5-index__item {
	max-width: var(--contentsWidth);
}
.c5-index__list.splide :is(.splide__track, .splide__pagination) {
	grid-column: 1 / 4;
}
.c5-index__list.splide .splide__arrows {
	display: contents;
}
.c5-index__list.splide .splide__arrow {
	margin-top: calc(var(--basisgap) * .3);
	margin-inline: var(--basisgap);
	background: white;
}
.c5-index__list.splide .splide__arrow--prev {
	grid-area: 2 / 1;
}
.c5-index__list.splide .splide__arrow--next {
	grid-area: 2 / 3;
}
.c5-index__list.splide .splide__pagination {
	grid-row: 2;
	margin-top: calc(var(--basisgap) * .7);
}
.c5-index__list.splide .splide__pagination .splide__pagination__page {
	background: white;
}

/* :::::: タップ :::::: */
.c5-p-index .c5-suggestion {
	grid-area: 2 / 1;
	place-self: end;
	z-index: 1;
	right: 20%;
	opacity: 0;
}
.c5-p-index:has(.splide) .c5-suggestion {
	margin-bottom: calc(var(--basisgap) * 2);
}
.c5-p-index .c5-suggestion img {
	width: calc(var(--cw) * 80 / var(--aspect));
}
.c5-p-index .c5-suggestion.is-anim {
	animation: indexAttention 1.6s both;
}
@keyframes indexAttention {
	from { opacity: 0; transform: scale(1.5); }
	20% { opacity: 1; transform: scale(1); }
	30% { transform: scale(.9); }
	40% { transform: scale(1.02); }
	50%, 80% { opacity: 1; transform: none; }
	to { opacity: 0; transform: scale(.96); }
}
@media (max-width: 767.98px) {
	.c5-p-index {
		padding-block: var(--basisgap) var(--cvHeight);
	}
}

@media (hover) {
	.c5-index__item .c5-image img {
		transition: scale .8s var(--easeOut);
	}
	.c5-index__item a:hover .c5-image img {
		scale: 1.04;
		transition-duration: .4s;
	}
}
.c5-index__image {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: calc(var(--basisgap) * .8);
}
.c5-index__image .c5-image {
	overflow: hidden;
	width: var(--size);
	height: var(--size);
	margin-inline: auto;
	border-radius: var(--size);
}
.c5-index__list .c5-heading {
	font-size: inherit;
}
.c5-index__list .c5-heading .n {
	--h: 1.2em;
}
.c5-index__list .c5-heading .t {
	padding-left: .25em;
}
.c5-index__item:is(:nth-child(2), :nth-child(3), :nth-child(4)) .c5-heading .t {
	letter-spacing: -.05em;
}
.c5-index__progress {
	place-self: end center;
	overflow: visible;
	width: var(--size);
	height: auto;
	fill: none;
	stroke-width: .5;
	transform: rotate(-90deg);
	pointer-events: none;
}
.c5-index__progress .bg {
	stroke: white;
}
.c5-index__progress .bar {
	stroke: #808080;
	stroke-linecap: round;
	stroke-dasharray: 880;
	stroke-dashoffset: 880;
}
.c5-index__pagination {
	--size: calc(var(--cw) * 16 / var(--aspect));
	display: flex;
	justify-content: center;
	position: relative;
	column-gap: var(--size);
	margin-top: calc(var(--basisgap) * .7);
	line-height: 1;
}
.c5-index__pagination .c5-index__page {
	display: block;
	width: var(--size);
	height: var(--size);
	border: var(--border1) solid #808080;
	border-radius: var(--size);
	background: white;
	transition: scale .4s var(--easeBack);
}
.c5-index__pagination .c5-index__page.is-active {
	scale: 1.25;
	transition-duration: .2s;
}

.c5-features__column {
	margin-top: calc(var(--basisgap) * 2);
}
:where(.c5-features__column) .c5-heading {
	--fontBasis: 38;
}

/* :::::: 画像が Splide の場合 :::::: */
.c5-features__image.splide {
	display: grid;
	row-gap: calc(var(--basisgap) * .6);
}
.c5-features__image.splide > * {
	grid-area: 1 / 1;
}
.c5-features__image.splide .splide__arrows {
	grid-area: 2 / 1;
	justify-self: end;
	display: flex;
	column-gap: calc(var(--basisgap) * .4);
}
.c5-features__image.splide .splide__pagination {
	align-self: end;
	margin-bottom: calc(var(--basisgap) * .75);
}

/* :::::: 2 | タップで手軽に３つのモード切替 :::::: */
.c5-feature2__mode {
	display: flex;
	flex-direction: column;
	margin-top: var(--basisgap);
	margin-inline: calc(var(--basisgap) * -1);
}
.c5-feature2__mode .splide__track {
	padding-inline: var(--basisgap) !important;
}
.c5-feature2__mode .splide__slide {
	max-width: calc(var(--cw) * 394 / var(--aspect));
	margin-right: calc(var(--cw) * 16 / var(--aspect));
	padding: calc(var(--cw) * 20 / var(--aspect));
	padding-top: 0;
	background: white;
}
.c5-feature2__mode .splide__slide .c5-image {
	margin-inline: calc(var(--cw) * -20 / var(--aspect));
}
.c5-feature2__mode .splide__arrows {
	order: 1;
	align-self: end;
	display: flex;
	column-gap: calc(var(--basisgap) * .4);
	margin: calc(var(--basisgap) * .5) var(--basisgap) 0;
}
.c5-feature2__mode .c5-label {
	margin-top: .5em;
	font-weight: 500;
	--fontBasis: 29;
	line-height: 1.4;
}
.c5-feature2__mode .c5-paragraph {
	margin-top: .5em;
	--fontBasis: 21;
	line-height: 1.619;
}

/* :::::: 4 | 低域から高域までバランスの良い高音質 :::::: */
.c5-p-feature-4 .c5-features__image {
	border: 1px solid #808080;
}
.c5-p-feature-4 .c5-image {
	margin-top: var(--basisgap);
}
.c5-p-feature-4 .c5-image figcaption {
	text-align: right;
}
.c5-p-feature-4 .c5-figure {
	margin-top: var(--basisgap);
	font-weight: 700;
	text-align: center;
}
.c5-feature4__lead {
	--fontBasis: 24;
}
.c5-feature4__canvas {
	display: flex;
	align-items: center;
	position: relative;
	aspect-ratio: 116 / 56;
	width: 100%;
	height: auto;
	margin-top: var(--basisgap);
	padding-right: calc(var(--basisgap) * .2);
	padding-left: calc(var(--basisgap) * .5);
}
.c5-feature4__canvas .dummy {
	visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	opacity: .2;
}
.c5-feature4__canvas .scene1,
.c5-feature4__canvas [src*="img_4_phone"] {
	width: calc(var(--cw) * 117 / var(--aspect));
}
.c5-feature4__canvas .scene2 {
	display: grid;
	align-items: center;
	z-index: 1;
}
.c5-feature4__canvas .scene2 img {
	grid-area: 1 / 1;
}
.c5-feature4__canvas [src*="img_4_sonic"] {
	width: calc(var(--cw) * 82 / var(--aspect));
	margin-left: calc(var(--basisgap) * .2);
}
.c5-feature4__canvas [src*="img_4_arrow"] {
	width: calc(var(--cw) * 208 / var(--aspect));
}
.c5-feature4__canvas .scene3 {
	display: grid;
	margin-left: calc(var(--cw) * -48 / var(--aspect));
}
.c5-feature4__canvas .scene3 :is(img, .note) {
	grid-area: 1 / 1;
}
.c5-feature4__canvas [src*="product2_lavender"] {
	justify-self: center;
	width: calc(var(--cw) * 200 / var(--aspect));
	margin-top: calc(var(--cw) * 16 / var(--aspect));
	margin-left: calc(var(--cw) * 24 / var(--aspect));
}
.c5-feature4__canvas [src*="img_4_note"] {
	place-self: end start;
	width: calc(var(--cw) * 57 / var(--aspect));
	margin: calc(var(--cw) * 24 / var(--aspect));
}
.c5-feature4__canvas [src*="img_4_text"] {
	place-self: end;
	width: calc(var(--cw) * 152 / var(--aspect));
	margin-bottom: calc(var(--cw) * 27 / var(--aspect));
	margin-right: calc(var(--cw) * 32 / var(--aspect));
}
.c5-feature4__canvas .frame {
	grid-area: 1 / 1;
	overflow: visible;
	aspect-ratio: 275 / 280;
	width: calc(var(--cw) * 275 / var(--aspect));
	height: auto;
	stroke-width: .6;
}
.c5-p-feature-4 .c5-figure figcaption {
	margin-top: var(--basisgap);
	--fontBasis: 30;
}
.c5-p-feature-4 .c5-figure figcaption svg {
	width: calc(var(--cw) * 303 / var(--aspect));
	height: auto;
	margin-bottom: .75em;
}
.c5-p-feature-4 .c5-features__column .c5-image img:last-child {
	margin-top: calc(var(--basisgap) * .5);
}

/* Inview */
.c5-feature4__canvas.is-standby :is(.scene1, .scene2 img, .scene3 img, .scene3 svg) {
	opacity: 0;
}
.c5-feature4__canvas.is-standby .scene1 {
	transform: translateX(187%) scale(.8);
}
.c5-feature4__canvas.is-standby .scene2 img {
	transform: translateX(calc(var(--basisgap) * -1));
}
.c5-feature4__canvas.is-standby .scene3 img {
	transform: translateY(var(--basisgap));
}
.c5-feature4__canvas.is-standby .scene3 .frame {
	transform: scale(.8);
}
.c5-feature4__canvas.is-appear .scene1 {
	animation: scene1Appear 1.2s both;
}
.c5-feature4__canvas.is-appear .scene2 img {
	animation: scene2Appear .6s var(--easeOut) both;
}
.c5-feature4__canvas.is-appear .scene2 img:nth-child(1) { animation-delay: .9s; }
.c5-feature4__canvas.is-appear .scene2 img:nth-child(2) { animation-delay: 1.1s; }
.c5-feature4__canvas.is-appear .scene3 img {
	animation: scene3Appear .8s var(--easeBack) both;
}
.c5-feature4__canvas.is-appear .scene3 .frame {
	animation: frameAppear .8s var(--easeOut) both;
	animation-delay: 1.4s;
	backface-visibility: hidden;
}
.c5-feature4__canvas.is-appear .scene3 img:nth-child(1) { animation-delay: 1.7s; }
.c5-feature4__canvas.is-appear .scene3 img:nth-child(2) { animation-delay: 1.8s; }
.c5-feature4__canvas.is-appear .scene3 img:nth-child(3) { animation-delay: 1.9s; }
@keyframes scene1Appear {
	from { opacity: 0; transform: translateX(187%) scale(.8); }
	40% { opacity: 1; transform: translateX(187%) scale(1.2); }
	to { opacity: 1; transform: none; }
}
@keyframes scene2Appear {
	from { opacity: 0; transform: translateX(calc(var(--basisgap) * -1)); }
	to { opacity: 1; transform: none; }
}
@keyframes scene3Appear {
	from { opacity: 0; transform: translateY(var(--basisgap)); }
	to { opacity: 1; transform: none; }
}
@keyframes frameAppear {
	from { opacity: 0; transform: scale(.8); }
	to { opacity: 1; transform: none; }
}

/* :::::: 5 | アプリ連携で音量も選曲も自動最適化 :::::: */
.c5-p-feature-5 [src*="sound_connect"] {
	margin-top: calc(var(--basisgap) * .5);
}
.c5-feature5__scene {
	display: flex;
	flex-direction: column;
	margin-top: var(--basisgap);
	margin-inline: calc(var(--basisgap) * -1);
}
.c5-feature5__scene .splide__track {
	padding-inline: var(--basisgap) !important;
}
.c5-feature5__scene .splide__slide {
	max-width: calc(var(--cw) * 394 / var(--aspect));
	margin-right: calc(var(--cw) * 16 / var(--aspect));
	padding: calc(var(--cw) * 20 / var(--aspect));
	background: #dae3f4;
}
.c5-feature5__scene .splide__arrows {
	order: 1;
	align-self: end;
	display: flex;
	column-gap: calc(var(--basisgap) * .4);
	margin: calc(var(--basisgap) * .5) var(--basisgap) 0;
}
.c5-feature5__scene .c5-label {
	margin-top: .5em;
	font-weight: 500;
	--fontBasis: 29;
	line-height: 1.4;
}
.c5-feature5__scene .c5-paragraph {
	margin-top: .5em;
	line-height: 1.619;
}
.c5-feature5__service {
	margin-top: .5em;
	--fontBasis: 18;
}
.c5-feature5__service dd {
	width: calc(var(--cw) * 464 / var(--aspect));
}
.c5-p-feature-5 .c5-notes {
	margin-top: calc(var(--basisgap) * .5);
}

/* :::::: ワイヤレスステレオヘッドセット :::::: */
.c5-p-LinkBuds-Clip {
	padding: calc(var(--basisgap) * 1.8) var(--basisgap);
}
.c5-p-LinkBuds-Clip .c5-product__title {
	--fontBasis: 21;
}
.c5-p-LinkBuds-Clip .c5-product__title .t {
	height: 3.4em;
}
.c5-p-LinkBuds-Clip .c5-product__title .n {
	height: 1em;
}
.c5-products__slider {
	--imgWidth: calc(var(--cw) * 360 / var(--aspect));
	position: relative;
	margin-top: calc(var(--basisgap) * 1.5);
	margin-inline: calc(var(--basisgap) * -1);
}
.c5-products__slider .splide__arrow {
	z-index: 1;
	position: absolute;
	top: calc(var(--imgWidth) * 1.037 / 2 - var(--size) / 2);
	background: white;
}
.c5-products__slider .splide__arrow--prev {
	left: var(--basisgap);
}
.c5-products__slider .splide__arrow--next {
	right: var(--basisgap);
}
.c5-products__slider .splide__pagination {
	margin-top: var(--basisgap);
}
.c5-products__item {
	display: flex;
	justify-content: center;
}
.c5-products__item img {
	width: var(--imgWidth) !important;
}
.c5-p-LinkBuds-Clip .c5-buttons {
	display: flex;
	justify-content: center;
	column-gap: 1.25em;
	margin-top: calc(var(--basisgap) * 1.5);
}

/* Inview */
.c5-p-LinkBuds-Clip .c5-products__slider.is-standby,
.c5-p-LinkBuds-Clip .c5-product__title.is-standby :is(.s, .t, .n),
.c5-p-LinkBuds-Clip .c5-buttons.is-standby .c5-button {
	opacity: 0;
	transform: translateY(var(--basisgap));
}
.c5-p-LinkBuds-Clip .c5-products__slider.is-standby {
	transform: translateY(var(--basisgap));
}
.c5-p-LinkBuds-Clip .c5-buttons.is-standby .c5-button {
	transform: scale(.6);
}
.c5-p-LinkBuds-Clip .c5-products__slider.is-motion,
.c5-p-LinkBuds-Clip .c5-product__title.is-motion :is(.s, .t, .n),
.c5-p-LinkBuds-Clip .c5-buttons.is-motion .c5-button {
	transition: opacity .8s, transform .8s var(--easeOut);
	transition-delay: .2s;
}
.c5-p-LinkBuds-Clip .c5-buttons.is-motion .c5-button {
	transition-duration: .4s;
	transition-timing-function: ease, var(--easeBack);
}
.c5-p-LinkBuds-Clip .c5-product__title.is-motion .t {
	transition-delay: .3s;
}
.c5-p-LinkBuds-Clip .c5-products__slider.is-motion,
.c5-p-LinkBuds-Clip .c5-product__title.is-motion .n,
.c5-p-LinkBuds-Clip .c5-buttons.is-motion .c5-button {
	transition-delay: .4s;
}
.c5-p-LinkBuds-Clip .c5-buttons.is-motion .c5-button:last-child {
	transition-delay: .5s;
}
.c5-p-LinkBuds-Clip .c5-products__slider.is-motion.is-standby,
.c5-p-LinkBuds-Clip .c5-product__title.is-motion.is-standby :is(.s, .t, .n),
.c5-p-LinkBuds-Clip .c5-buttons.is-motion.is-standby .c5-button {
	transition-delay: 0s;
	transition-duration: .2s;
}

/**
 * Video player
 * -------------------------------------------------- */
.c5-c-videosection {
	padding: var(--basisgap);
}
.c5-c-videosection .c5-videoplayer {
	width: var(--contentsWidth);
	margin-top: calc(var(--basisgap) * .7);
	margin-inline: calc(var(--basisgap) * -1);
}
.c5-c-videosection .c5-videoplayer__player,
.c5-c-videosection .c5-videoplayer__poster {
	aspect-ratio: 16 / 9;
	width: inherit;
	height: auto;
}
.c5-c-videosection .is-short .c5-videoplayer__player,
.c5-c-videosection .is-short .c5-videoplayer__poster {
	aspect-ratio: 9 / 16;
}
.c5-c-videosection .c5-player__control {
	position: absolute;
	right: calc(var(--basisgap) / 2);
}
.c5-player__control.play {
	bottom: calc(var(--basisgap) + var(--controlSize));
}
.c5-player__control.volume {
	--beforePath: polygon(-2% -2%, -2% -2%, -50% 102%, -50% 102%);
	--appearPath: polygon(-2% -2%, 150% -2%, 102% 102%, -50% 102%);
	--afterPath: polygon(150% -2%, 150% -2%, 102% 102%, 102% 102%);
	bottom: calc(var(--basisgap) / 2);
}
.c5-videoplayer .c5-loader.is-loaded {
	opacity: 0;
	transform: scale(.8);
	transition: opacity .2s, transform .2s var(--easeOut);
}

/* Inview */
.c5-videoplayer.is-standby {
	opacity: 0;
	transform: translateY(calc(var(--basisgap) * 2));
}
.c5-videoplayer.is-motion {
	transition: opacity .8s, transform .8s var(--easeOut);
}
.c5-videoplayer.is-motion.is-standby {
	transition-duration: .2s;
}

/* :::::: ビデオプレーヤー :::::: */
.c5-videoplayer {
	--controlSize: calc(var(--cw) * 64 / var(--aspect));
	position: relative;
	display: grid;
	place-items: center;
	color: white;
	background: whitesmoke;
}
.c5-videoplayer :where(.c5-videoplayer__player, .c5-videoplayer__poster, .c5-loader) {
	grid-area: 1 / 1;
}
.c5-videoplayer :where(.c5-videoplayer__poster, .c5-player__control, .c5-loader) {
	z-index: 1;
}
.c5-player__control {
	display: grid;
	aspect-ratio: 1 / 1;
	width: var(--controlSize);
	height: auto;
}
.c5-player__control :where(.on, .off) {
	grid-area: 1 / 1;
	pointer-events: none;
	border: 1px solid currentcolor;
	border-radius: 50%;
}
.c5-player__control .c5-icon {
	width: 100%;
	height: auto;
}
/* Poster */
.c5-videoplayer.is-played .c5-videoplayer__poster {
	opacity: 0;
	pointer-events: none;
}
.c5-videoplayer .c5-videoplayer__poster.is-motion {
	transition: opacity .4s;
}
/* Play/Pause */
.c5-videoplayer.is-play .c5-player__control.play .off,
.c5-videoplayer:not(.is-play) .c5-player__control.play .on {
	visibility: hidden;
}
.c5-videoplayer .c5-player__control.play.is-anim .off,
.c5-videoplayer .c5-player__control.play.is-anim .on {
	backface-visibility: hidden;
}
.c5-videoplayer:not(.is-play) .c5-player__control.play.is-anim .off,
.c5-videoplayer.is-play .c5-player__control.play.is-anim .on {
	visibility: visible;
	animation: playAppear .4s var(--easeOut) both;
}
.c5-videoplayer.is-play .c5-player__control.play.is-anim .off,
.c5-videoplayer:not(.is-play) .c5-player__control.play.is-anim .on {
	visibility: visible;
	animation: playHide .4s var(--easeOut) both;
}
@keyframes playAppear {
	from { opacity: 0; transform: none; }
	10% { opacity: 0; transform: scale(.8); }
	50% { opacity: 1; transform: scale(1.04); }
	to { opacity: 1; transform: none; }
}
@keyframes playHide {
	from { opacity: 1; transform: none; }
	10% { opacity: 1; transform: scale(.8); }
	50% { opacity: 0; transform: scale(1.04); }
	to { opacity: 0; transform: scale(.8); }
}
/* Volume */
.c5-player__control.volume .c5-icon {
	transform: scale3d(.9,.9,1);
}
.c5-videoplayer:not(.is-muted) .c5-player__control.volume .on,
.c5-videoplayer.is-muted .c5-player__control.volume .off {
	clip-path: var(--appearPath);
}
.c5-videoplayer:not(.is-muted) .c5-player__control.volume .off,
.c5-videoplayer.is-muted .c5-player__control.volume .on {
	clip-path: var(--afterPath);
}
.c5-videoplayer:not(.is-muted) .c5-player__control.volume.is-anim .on,
.c5-videoplayer.is-muted .c5-player__control.volume.is-anim .off {
	animation: volumeAppear .4s var(--easeOut) both;
}
.c5-videoplayer:not(.is-muted) .c5-player__control.volume.is-anim .off,
.c5-videoplayer.is-muted .c5-player__control.volume.is-anim .on {
	animation: volumeHide .4s var(--easeOut) both;
}
@keyframes volumeAppear {
	from { clip-path: var(--beforePath); }
	10% { transform: scale(.8); }
	50% { transform: scale(1.04); }
	90% { transform: none; }
	to { clip-path: var(--appearPath); }
}
@keyframes volumeHide {
	from { clip-path: var(--appearPath); }
	10% { transform: scale(.8); }
	50% { transform: scale(1.04); }
	90% { transform: none; }
	to { clip-path: var(--afterPath); }
}

/**
 * Common
 * -------------------------------------------------- */

/* :::::: Header (html へ移植) :::::: */
.c5-header {
	--containerWidth: 100vw;
	--basisgap: calc(var(--containerWidth) * 40 / var(--aspect));
	--headerHeight: clamp(48px, var(--containerWidth) * 64 / var(--aspect), 64px);
	z-index: 4;
	display: flex;
	align-items: center;
	position: relative;
	width: var(--containerWidth);
	height: var(--headerHeight);
}
@supports (container-type: inline-size) {
	.c5-header {
		container-type: inline-size;
		--containerWidth: 100cqi;
	}
}
.c5-header__logo {
	width: clamp(80px, var(--containerWidth) * 100 / var(--aspect), 100px);
	color: currentcolor;
	fill: currentcolor;
	font: normal 1rem / 0 sans-serif;
}
.c5-header__logo a {
	display: block;
	color: inherit;
}
:is(.c5-header__logo, .c5-header__linkbuds) svg {
	width: 100%;
	height: auto;
	fill: currentcolor;
}
@media (min-width: 768px) {
	.c5-header {
		position: fixed;
		top: 0;
		left: 0;
		padding-left: var(--basisgap);
	}
	.c5-header__linkbuds {
		display: none;
	}
}
@media (max-width: 767.98px) {
	.c5-header {
		--headerHeight: min(var(--containerWidth) * 70 / var(--aspect), 70px);
		justify-content: space-between;
		padding-inline: var(--basisgap);
		color: white;
		background: black;
	}
	.c5-header__logo {
		width: min(var(--containerWidth) * 100 / var(--aspect), 100px);
	}
	.c5-header__linkbuds {
		margin-top: min(var(--containerWidth) * 3 / var(--aspect), 3px);
		width: min(var(--containerWidth) * 127 / var(--aspect), 127px);
		line-height: 0;
	}
}

/* :::::: Pagetop :::::: */
.c5-pagetop {
	--size: calc(var(--basisgap) * 1.15);
	display: block;
	z-index: 2;
	position: sticky;
	bottom: calc(var(--basisgap) / 2);
	width: var(--size);
	height: var(--size);
	margin: 0 calc(var(--basisgap) - var(--size) / 2) calc(var(--basisgap) / 2) auto;
	transition: transform .4s var(--easeOut);
}
.c5-pagetop.is-hide {
	transform: translateY(calc(100% + var(--basisgap) / 2));
}
.c5-pagetop a {
	display: block;
	width: inherit;
	height: inherit;
	color: #808080;
	line-height: 1;
	background: white;
	border: var(--border1) solid currentcolor;
	border-radius: var(--size);
}
.c5-pagetop svg {
	width: 100%;
	height: auto;
	fill: none;
	stroke: currentcolor;
	rotate: -90deg;
}
@media (hover) {
	.c5-pagetop a {
		transition: scale .4s var(--easeBack);
	}
	.c5-pagetop a:hover {
		scale: 1.08;
		transition-duration: .2s;
	}
	.c5-pagetop a:active {
		scale: .96;
		transition-duration: .1s;
		transition-timing-function: var(--easeOut);
	}
}
@media not (any-hover) {
	.c5-pagetop a {
		transition: scale .2s var(--easeBack);
		-webkit-tap-highlight-color: transparent;
	}
	.c5-pagetop a:active {
		scale: .92;
		transition-duration: .1s;
	}
}
@media (max-width: 767.98px) {
	.c5-pagetop {
		position: relative;
	}
}
.c5-footer {
	display: grid;
	place-items: center;
	height: var(--footerHeight);
	padding: 0 var(--basisgap);
	text-align: center;
}
.c5-footer .copyright {
	width: calc(100% - 2em);
	padding: 3em 0;
	--fontBasis: 10;
	font: 400 var(--fontSize) / 1.6 var(--fontSST);
}

/**
 * Progress Bar
 * -------------------------------------------------- */
.c5-contents__progress {
	--position: 0;
	--size: 200px;
	--barWidth: 5px;
	--barHeight: 10%;
	z-index: 1;
	position: fixed;
	top: calc(50% - var(--size) / 2);
	width: var(--barWidth);
	height: var(--size);
	opacity: .8;
	pointer-events: none;
	transition: opacity .4s;
}
.c5-contents__progress .track {
	width: 1px;
	height: 100%;
	margin: 0 auto;
	background: #ccc;
}
.c5-contents__progress .bar {
	position: absolute;
	top: 0;
	width: var(--barWidth);
	height: var(--barHeight); /* 後に js で書き換え */
	border-radius: var(--barWidth);
	background: #67d2ff;
	transform: translateY( var(--position) );
}
@media (max-width: 767.98px) {
	.c5-contents__progress {
		right: calc(var(--basisgap) / 2 - var(--barWidth) / 2);
	}
}
@media (min-width: 768px) {
	.c5-contents__progress {
		right: calc(var(--navigationWidth) + var(--basisgap) / 2 - var(--barWidth) / 2);
	}
}

.c5-loader {
	--size: 120px;
	--color: darkgray;
	position: relative;
}
.c5-loader .c {
	width: var(--size);
	height: auto;
	overflow: visible;
	fill: none;
	stroke: var(--color);
	stroke-width :1;
	stroke-linecap: round;
	stroke-dasharray: 190 190;
	/* Animation */
	animation: loader 1.4s infinite cubic-bezier(.4,0,.3,1), rolling 1.2s infinite linear;
}
.c5-loader::before {
	content: "";
	position: absolute;
	inset: 0;
	width: var(--size);
	height: var(--size);
	border: 1px solid var(--color);
	border-radius: var(--size);
	opacity: .3;
}
@keyframes loader {
	from { stroke-dashoffset: 190; }
	to { stroke-dashoffset: -190; }
}
@keyframes rolling {
	from { transform: none; }
	to { transform: rotate(360deg); }
}

/**
 * Loader (html へ移植)
 * -------------------------------------------------- */
.c5-loading {
	--aspect: 1920;
	--containerWidth: 100vw;
	display: grid;
	place-items: center;
	place-content: center;
	gap: calc(var(--containerWidth) * 88 / var(--aspect));
	z-index: 3;
	position: fixed;
	top: 0;
	left: 0;
	width: var(--containerWidth);
	height: 100dvh;
	color: #111;
	background: white;
}
@supports (container-type: inline-size) {
	.c5-loading {
		container-type: inline-size;
		--containerWidth: 100cqi;
	}
}
.c5-loading .image {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--containerWidth) * 16 / var(--aspect));
}
.c5-loading .image img {
	width: calc(var(--containerWidth) * 280 / var(--aspect));
}
.c5-loading .lead {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(var(--containerWidth) * 48 / var(--aspect));
}
.c5-loading .lead :is(.linkbuds, .copy) {
	width: auto;
	fill: currentcolor;
	line-height: 1;
	vertical-align: middle;
}
.c5-loading .lead .linkbuds {
	height: calc(var(--containerWidth) * 94 / var(--aspect));
}
.c5-loading .lead .copy {
	height: min(var(--containerWidth) * 48 / var(--aspect));
}
.c5-loading .progress {
	--progress: 0;
	position: absolute;
	inset: auto 0 0;
	width: calc(var(--containerWidth) * 320 / var(--aspect));
	height: 2px;
	margin: 0 auto calc(var(--containerWidth) * 72 / var(--aspect));
	background: #d3d3d3;
}
.c5-loading .progress .bar {
	position: absolute;
	inset: 0;
	scale: var(--progress) 1;
	background: #444;
	transform-origin: left center;
}
.c5-loading.is-progress .progress .bar {
	transition: scale .8s var(--easeOut);
}
.c5-loading.is-complete .progress .bar {
	transition-duration: 1.6s;
	transition-timing-function: var(--easeInOut);
}
@media (max-width: 767.98px) {
	.c5-loading {
		--aspect: 660;
		gap: calc(var(--containerWidth) * 112 / var(--aspect));
	}
	.c5-loading .image {
		justify-content: center;
		width: 80%;
	}
	.c5-loading .image img {
		width: calc(var(--containerWidth) * 220 / var(--aspect));
	}
	.c5-loading .lead {
		gap: calc(var(--containerWidth) * 27 / var(--aspect));
	}
	.c5-loading .lead .linkbuds {
		height: calc(var(--containerWidth) * 64 / var(--aspect));
	}
	.c5-loading .lead .copy {
		height: min(var(--containerWidth) * 34 / var(--aspect));
	}
}

/* loaded */
.c5-loading.is-loaded {
	pointer-events: none;
	opacity: 0;
	transition: opacity 1s .4s;
}
.c5-loading.is-loaded .progress {
	--progress: 1 !important;
}
.c5-loading.is-loaded .c5-loader {
	opacity: 0;
	scale: .8;
	transition: opacity .6s, scale .6s cubic-bezier(.3,1,.7,1);
}
.c5-loading.is-loaded .sst {
	opacity: 0;
	transform-origin: top center;
	scale: .4;
	transition: opacity .4s, scale .4s cubic-bezier(.3,0,.7,0);
}
@keyframes loading {
	from { opacity: 0; transform: translateY(-.5em); animation-timing-function: cubic-bezier(.3,1,.7,1); }
	40%, 80% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.3,0,.7,0); }
	to { opacity: 0; transform: translateY(.5em); }
}

/**
 * Utility
 * -------------------------------------------------- */
.c5-visuallyhidden {
	position: absolute;
	top: 0;
	left: 0;
	clip: rect(0 0 0 0);
	overflow: hidden;
	width: 1px;
	height: 1px;
}
:root {
	--black: #444;
	--gray: #707070;
	--grad: linear-gradient(to top, #6edbfc, #60b5fd, #4b7bff);
	--gold: linear-gradient(to top, #fde88f, #ebd37b 20%, #ad7400);
	--grayGrad: linear-gradient(to top, #777, #333);
	--fontSST: "SST W20 Roman", "Noto Sans JP", "Arial", sans-serif;
	--fontSans: "Noto Sans JP", "TypelaboN+ R JIS2004 AP", "Meiryo", sans-serif;
	--fontSerif: "TsukuAOldMinPr6N-L", "Shippori Mincho B1", serif;
	--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);
	--external: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path fill="none" stroke="%23444" stroke-width="2" d="M10.978,1h6.022v6.021M8.971,1H1.86c-.475,0-.86.385-.86.86v14.28c0,.475.385.86.86.86h14.28c.475,0,.86-.385.86-.86v-7.132M5.468,12.546L17,1"/></svg>');
}
html {
	height: auto;
}
body {
	margin: 0;
	color: var(--black);
	fill: currentcolor;
	font: 400 normal 1em / 1.6 var(--fontSans);
	background: white;
	
	/** レイアウト */
	--border1: 1px;
	--basisgap: calc(var(--cw) * 40 / var(--aspect));
	--squareWidth: calc(var(--cw) * .369792);
	--contentsWidth: calc(var(--cw) * .34375);
	--navigationWidth: calc(var(--cw) * .286458);
	
	/** Common */
	--headerHeight: clamp(48px, var(--cw) * 64 / var(--aspect), 64px);
	--footerHeight: 80px;
}
body.is-fixed {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
}
body.scrollbar {
	overflow-y: scroll !important;
}
:where(.c5-container) :where(h2,h3,h4,p,ul,ol,dl,button,figcaption,.c5-button) {
	--fontBasis: 16;
	--fontSize: calc(var(--cw) * var(--fontBasis) / var(--aspect));
	font-size: var(--fontSize);
}
@media (min-width: 768px) {
	body {
		--aspect: 1920;
	}
	body::before {
		content: "";
		z-index: -1;
		position: fixed;
		inset: 0;
		background: white linear-gradient(to top, #fff, #67d2ff) center top no-repeat;
	}
}
@media (max-width: 767.98px) {
	body {
		--aspect: 660;
		
		/** レイアウト */
		--squareWidth: 0;
		--contentsWidth: var(--cw);
		--navigationWidth: 0;
		--cvHeight: calc(var(--cw) * 120 / var(--aspect));
		
		/** Common */
		--headerHeight: min(var(--cw) * 70 / var(--aspect), 70px);
		--footerHeight: 64px;
	}
}
:is(a,button):focus{outline:none}
:is(a,button):focus-visible{outline:2px auto navy}
::selection {
	color: white;
	background: #60b5fd;
	-webkit-text-fill: transparent;
}
*,*::before,*::after{box-sizing:border-box;}
: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;}
@media(hover){:where(a,button){cursor:pointer}}
:where(sub){vertical-align:baseline;}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}}

/** splide-core.min.css */
:where(.c5-container) .splide__arrow {
	--size: calc(var(--basisgap) * 1.15);
	width: var(--size);
	height: var(--size);
	border: var(--border1) solid currentcolor;
	border-radius: var(--size);
	color: #808080;
	line-height: 1;
}
:where(.c5-container) .splide__arrow svg {
	width: 100%;
	height: auto;
	fill: none;
	stroke: currentcolor;
}
:where(.c5-container) .splide__arrow--prev svg {
	scale: -1 1;
}
@media (hover) {
	:where(.c5-container) .splide__arrow {
		transition: scale .4s var(--easeBack);
	}
	:where(.c5-container) .splide__arrow:hover {
		scale: 1.08;
		transition-duration: .2s;
	}
	:where(.c5-container) .splide__arrow:active {
		scale: .96;
		transition-duration: .1s;
		transition-timing-function: var(--easeOut);
	}
}
@media not (any-hover) {
	:where(.c5-container) .splide__arrow {
		transition: scale .2s var(--easeBack);
		-webkit-tap-highlight-color: transparent;
	}
	:where(.c5-container) .splide__arrow:active {
		scale: .92;
		transition-duration: .1s;
	}
}
:where(.c5-container) .splide__pagination {
	--size: calc(var(--cw) * 16 / var(--aspect));
	position: relative;
	column-gap: var(--size);
	height: var(--size);
	line-height: 1;
}
:where(.c5-container) .splide__pagination__page {
	width: var(--size);
	height: var(--size);
	border: var(--border1) solid #808080;
	border-radius: var(--size);
	background: white;
	transition: scale .2s var(--easeBack);
}
:where(.c5-container .splide__pagination) li:nth-child(1) .splide__pagination__page {
	background: #b1adc1;
}
:where(.c5-container .splide__pagination) li:nth-child(2) .splide__pagination__page {
	background: #fcfaef;
}
:where(.c5-container .splide__pagination) li:nth-child(3) .splide__pagination__page {
	background: #aec0b1;
}
:where(.c5-container .splide__pagination) li:nth-child(4) .splide__pagination__page {
	background: #191919;
}
:where(.c5-container) .splide__pagination__page.is-active {
	scale: 1.25;
}
@media (min-width: 768px) {
	:where(.c5-container) .splide__pagination {
		--size: min(var(--cw) * 16 / var(--aspect), 16px);
	}
}
@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}