@charset "UTF-8";
/*! ファイル名:css/style.css */ .l-container .splide__container {
	box-sizing: border-box;
	position: relative
}
.l-container .splide__list {
	backface-visibility: hidden;
	display: flexbox;
	display: flex;
	height: 100%;
	margin: 0 !important;
	padding: 0 !important
}
.l-container .splide.is-initialized:not(.is-active) .splide__list {
	display: block
}
.l-container .splide__pagination {
	align-items: center;
	display: flexbox;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	pointer-events: none;
	-ms-flex-align: center;
	-ms-flex-pack: center
}
.l-container .splide__pagination li {
	display: inline-block;
	line-height: 1;
	list-style-type: none;
	margin: 0;
	pointer-events: auto
}
.l-container .splide:not(.is-overflow) .splide__pagination {
	display: none
}
.l-container .splide__progress__bar {
	width: 0
}
.l-container .splide {
	position: relative;
	visibility: hidden
}
.l-container .splide.is-initialized, .l-container .splide.is-rendered {
	visibility: visible
}
.l-container .splide__slide {
	backface-visibility: hidden;
	box-sizing: border-box;
	flex-shrink: 0;
	list-style-type: none !important;
	margin: 0;
	position: relative;
	-ms-flex-negative: 0
}
.l-container .splide__slide img {
	vertical-align: bottom
}
.l-container .splide__spinner {
	animation: splide-loading 1s linear infinite;
	border: 2px solid #999;
	border-left-color: #0000;
	border-radius: 50%;
	contain: strict;
	display: inline-block;
	height: 20px;
	inset: 0;
	margin: auto;
	position: absolute;
	width: 20px
}
.l-container .splide__sr {
	border: 0;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	clip: rect(0 0 0 0)
}
.l-container .splide__toggle.is-active .splide__toggle__play, .l-container .splide__toggle__pause {
	display: none
}
.l-container .splide__toggle.is-active .splide__toggle__pause {
	display: inline
}
.l-container .splide__track {
	overflow: hidden;
	position: relative;
	z-index: 0
}
@keyframes splide-loading {
	0% {
		transform: rotate(0)
	}
	to {
		transform: rotate(1turn)
	}
}
.l-container .splide__track--draggable {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none
}
.l-container .splide__track--fade > .splide__list > .splide__slide {
	margin: 0 !important;
	opacity: 0;
	z-index: 0
}
.l-container .splide__track--fade > .splide__list > .splide__slide.is-active {
	opacity: 1;
	z-index: 1
}
.l-container .splide--rtl {
	direction: rtl
}
.l-container .splide__track--ttb > .splide__list {
	display: block
}
.l-container .splide__arrow {
	align-items: center;
	background: #ccc;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	display: flexbox;
	display: flex;
	height: 2em;
	justify-content: center;
	opacity: .7;
	padding: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 2em;
	z-index: 1;
	-ms-flex-align: center;
	-ms-flex-pack: center
}
.l-container .splide__arrow svg {
	height: 1.2em;
	width: 1.2em;
	fill: #000
}
.l-container .splide__arrow:hover:not(:disabled) {
	opacity: .9
}
.l-container .splide__arrow:disabled {
	opacity: .3
}
.l-container .splide__arrow:focus-visible {
	outline: 3px solid #0bf;
	outline-offset: 3px
}
.l-container .splide__arrow--prev {
	left: 1em
}
.l-container .splide__arrow--prev svg {
	transform: scaleX(-1)
}
.l-container .splide__arrow--next {
	right: 1em
}
.l-container .splide.is-focus-in .splide__arrow:focus {
	outline: 3px solid #0bf;
	outline-offset: 3px
}
.l-container .splide__pagination {
	bottom: .5em;
	left: 0;
	padding: 0 1em;
	position: absolute;
	right: 0;
	z-index: 1
}
.l-container .splide__pagination__page {
	background: #ccc;
	border: 0;
	border-radius: 50%;
	display: inline-block;
	height: 8px;
	margin: 3px;
	opacity: .7;
	padding: 0;
	position: relative;
	transition: transform .2s linear;
	width: 8px
}
.l-container .splide__pagination__page.is-active {
	background: #fff;
	transform: scale(1.4);
	z-index: 1
}
.l-container .splide__pagination__page:hover {
	cursor: pointer;
	opacity: .9
}
.l-container .splide.is-focus-in .splide__pagination__page:focus, .l-container .splide__pagination__page:focus-visible {
	outline: 3px solid #0bf;
	outline-offset: 3px
}
.l-container .splide__progress__bar {
	background: #ccc;
	height: 3px
}
.l-container .splide__slide {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}
.l-container .splide__slide:focus {
	outline: 0
}
@supports (outline-offset:-3px) {
	.l-container .splide__slide:focus-visible {
		outline: 3px solid #0bf;
		outline-offset: -3px
	}
}
@media screen and (-ms-high-contrast:none) {
	.l-container .splide__slide:focus-visible {
		border: 3px solid #0bf
	}
}
@supports (outline-offset:-3px) {
	.l-container .splide.is-focus-in .splide__slide:focus {
		outline: 3px solid #0bf;
		outline-offset: -3px
	}
}
@media screen and (-ms-high-contrast:none) {
	.l-container .splide.is-focus-in .splide__slide:focus {
		border: 3px solid #0bf
	}
	.l-container .splide.is-focus-in .splide__track > .splide__list > .splide__slide:focus {
		border-color: #0bf
	}
}
.l-container .splide__toggle {
	cursor: pointer
}
.l-container .splide.is-focus-in .splide__toggle:focus, .l-container .splide__toggle:focus-visible {
	outline: 3px solid #0bf;
	outline-offset: 3px
}
.l-container .splide__track--nav > .splide__list > .splide__slide {
	border: 3px solid #0000;
	cursor: pointer
}
.l-container .splide__track--nav > .splide__list > .splide__slide.is-active {
	border: 3px solid #000
}
.l-container .splide__arrows--rtl .splide__arrow--prev {
	left: auto;
	right: 1em
}
.l-container .splide__arrows--rtl .splide__arrow--prev svg {
	transform: scaleX(1)
}
.l-container .splide__arrows--rtl .splide__arrow--next {
	left: 1em;
	right: auto
}
.l-container .splide__arrows--rtl .splide__arrow--next svg {
	transform: scaleX(-1)
}
.l-container .splide__arrows--ttb .splide__arrow {
	left: 50%;
	transform: translate(-50%)
}
.l-container .splide__arrows--ttb .splide__arrow--prev {
	top: 1em
}
.l-container .splide__arrows--ttb .splide__arrow--prev svg {
	transform: rotate(-90deg)
}
.l-container .splide__arrows--ttb .splide__arrow--next {
	bottom: 1em;
	top: auto
}
.l-container .splide__arrows--ttb .splide__arrow--next svg {
	transform: rotate(90deg)
}
.l-container .splide__pagination--ttb {
	display: flexbox;
	display: flex;
	flex-direction: column;
	inset: 0 .5em 0 auto;
	padding: 1em 0
}
.l-container :where(:not(iframe, canvas, img, svg, video, svg *, use, symbol, g, path)) {
	all: unset;
	display: revert
}
.l-container :where(*), .l-container :where(*):after, .l-container :where(*):before {
	box-sizing: border-box
}
.l-container :where(ol, ul) {
	list-style: none
}
.l-container {
	--vw: 100vw;
	--max-width: 1440px;
	--header-nav-height: 0px;
	--visible-height: calc(100dvh - var(--header-nav-height, 0px));
	--border-radius-full: 9999px;
	--color-base: #242424;
	--color-base-rgb: 36, 36, 36;
	--color-bg: #fff;
	--color-bg-rgb: 255, 255, 255;
	--color-white: #fff;
	--color-white-rgb: 255, 255, 255;
	--color-snow: #f3f6fb;
	--color-snow-rgb: 243, 246, 251;
	--color-blue: #6ea2e8;
	--color-blue-rgb: 110, 162, 232;
	--color-blue-light: #cfe4ff;
	--color-blue-light-rgb: 207, 228, 255;
	--color-blue-lighter: #89afe1;
	--color-blue-lighter-rgb: 137, 175, 225;
	--color-blue-lightest: #dfedff;
	--color-blue-lightest-rgb: 223, 237, 255;
	--color-blue-pill: #85b3ee;
	--color-blue-pill-rgb: 133, 179, 238;
	--color-blue-hover: #e6f1ff;
	--color-blue-hover-rgb: 230, 241, 255;
	--color-indicator: #d3e3f8;
	--color-indicator-rgb: 211, 227, 248;
	--color-indicator-progress: #e2ecfa;
	--color-indicator-progress-rgb: 226, 236, 250;
	--color-indicator-active: #6ea2e8;
	--color-indicator-active-rgb: 110, 162, 232;
	--color-aqua: #65d2dd;
	--color-aqua-rgb: 101, 210, 221;
	--color-aqua-light: #84ecf8;
	--color-aqua-light-rgb: 132, 236, 248;
	--color-aqua-lighter: #92eef8;
	--color-aqua-lighter-rgb: 146, 238, 248;
	--color-aqua-lightest: #bceff5;
	--color-aqua-lightest-rgb: 188, 239, 245;
	--color-pink: #fcbcbc;
	--color-pink-rgb: 252, 188, 188;
	--color-pink-light: #ffeded;
	--color-pink-light-rgb: 255, 237, 237;
	--color-pink-lighter: #ffd6d6;
	--color-pink-lighter-rgb: 255, 214, 214;
	--color-pink-pill: #f6b7ad;
	--color-pink-pill-rgb: 246, 183, 173;
	--color-beige-pill: #edcdad;
	--color-beige-pill-rgb: 237, 205, 173;
	--color-sakura-jeans-01: #8fb5cd;
	--color-sakura-jeans-01-rgb: 143, 181, 205;
	--color-sakura-jeans-02: #456f8c;
	--color-sakura-jeans-02-rgb: 69, 111, 140;
	--color-sakura-jeans-03: #373d57;
	--color-sakura-jeans-03-rgb: 55, 61, 87;
	--color-gray: #ccc;
	--color-gray-rgb: 204, 204, 204;
	--color-gray-hover: #5d5d5d;
	--color-gray-hover-rgb: 93, 93, 93;
	--color-black: #000;
	--color-black-rgb: 0, 0, 0;
	--color-black-90: #1a1a1a;
	--color-black-90-rgb: 26, 26, 26;
	--color-black-80: #333;
	--color-black-80-rgb: 51, 51, 51;
	--color-black-70: #4d4d4d;
	--color-black-70-rgb: 77, 77, 77;
	--color-black-60: #666;
	--color-black-60-rgb: 102, 102, 102;
	--color-black-50: grey;
	--color-black-50-rgb: 128, 128, 128;
	--color-black-40: #999;
	--color-black-40-rgb: 153, 153, 153;
	--color-black-30: #b2b2b2;
	--color-black-30-rgb: 178, 178, 178;
	--color-black-20: #ccc;
	--color-black-20-rgb: 204, 204, 204;
	--color-black-10: #e5e5e5;
	--color-black-10-rgb: 229, 229, 229;
	--color-black-8: #ebebeb;
	--color-black-8-rgb: 235, 235, 235;
	--color-black-6: #ebebeb;
	--color-black-6-rgb: 235, 235, 235;
	--color-black-4: #f5f5f5;
	--color-black-4-rgb: 245, 245, 245;
	--color-black-2: #fafafa;
	--color-black-2-rgb: 250, 250, 250;
	--gradient-attention: radial-gradient(50% 50% at 50% 50%, #4c77ce7a 49%, #0d92ff7a 97%);
	--gradient-attention-button: radial-gradient(50% 50% at 50% 50%, #6ea2e800 0%, #6ea2e866 100%);
	--breakpoints-xs: 320px;
	--breakpoints-sm: 768px;
	--breakpoints-md: 1024px;
	--breakpoints-lg: 1440px;
	--breakpoints-xl: 1680px;
	--breakpoints-full: 9999px;
	--zindex-back: 0;
	--zindex-middle: 10;
	--zindex-front: 100;
	--zindex-header: 500;
	--zindex-modal: 10010;
	--zindex-magic: 20000;
	--font-weight-thin: 100;
	--font-weight-extraLight: 200;
	--font-weight-light: 300;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semiBold: 600;
	--font-weight-bold: 700;
	--font-weight-extraBold: 800;
	--font-weight-black: 900;
	--leading-none: 1;
	--leading-tight: 1.2;
	--leading-base: 1.4;
	--leading-half: 1.5;
	--leading-relaxed: 1.8;
	--leading-wide: 2;
	--leading-loose: 2.4;
	--tracking-none: 0;
	--tracking-tighter: 0.01em;
	--tracking-tight: 0.02em;
	--tracking-base: 0.03em;
	--tracking-wide: 0.05em;
	--tracking-wider: 0.08em;
	--tracking-widest: 0.1em;
	--ease-none: cubic-bezier(0.25, 0.25, 0.75, 0.75);
	--ease-power1-in: cubic-bezier(0.55, 0.085, 0.68, 0.53);
	--ease-power1-inout: cubic-bezier(0.455, 0.03, 0.515, 0.955);
	--ease-power1-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--ease-power2-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
	--ease-power2-inout: cubic-bezier(0.645, 0.045, 0.355, 1);
	--ease-power2-out: cubic-bezier(0.215, 0.61, 0.355, 1);
	--ease-power3-in: cubic-bezier(0.895, 0.03, 0.685, 0.22);
	--ease-power3-inout: cubic-bezier(0.77, 0, 0.175, 1);
	--ease-power3-out: cubic-bezier(0.165, 0.84, 0.44, 1);
	--ease-power4-in: cubic-bezier(0.755, 0.05, 0.855, 0.06);
	--ease-power4-inout: cubic-bezier(0.86, 0, 0.07, 1);
	--ease-power4-out: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-expo-in: cubic-bezier(0.95, 0.05, 0.795, 0.035);
	--ease-expo-inout: cubic-bezier(1, 0, 0, 1);
	--ease-expo-out: cubic-bezier(0.19, 1, 0.22, 1);
	--ease-circ-in: cubic-bezier(0.6, 0.04, 0.98, 0.335);
	--ease-circ-inout: cubic-bezier(0.785, 0.135, 0.15, 0.86);
	--ease-circ-out: cubic-bezier(0.075, 0.82, 0.165, 1);
	--ease-back-in: cubic-bezier(0.6, -0.28, 0.735, 0.045);
	--ease-back-inout: cubic-bezier(0.68, -0.55, 0.265, 1.55);
	--ease-back-out: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	--ease-sense: cubic-bezier(0.42, 0.12, 0, 0.98);
	--ease-sense-out: cubic-bezier(0.18, 0.98, 0.32, 0.98);
	--ease-relax: cubic-bezier(0.32, 0.18, 0.08, 0.98);
	--ease-pop: cubic-bezier(0.2, 0.04, 0.28, 1.4);
	--ease-pop-in: cubic-bezier(0.46, -0.4, 0.8, 0);
	--ease-pop-out: cubic-bezier(0.23, 0.98, 0.46, 1.2)
}
@media screen and (min-width:768px) {
	.l-container {
		--unit: calc(var(--full)/144);
		--unit-vw: calc(var(--vw)/144);
		--full: min(var(--vw), var(--max-width));
		--design-view-width: 1440px;
		--pixel-ratio: 1;
		--font-size-base: calc(var(--unit)*1.6);
		--border-radius-s: calc(var(--unit)*0.8);
		--border-radius-m: calc(var(--unit)*2.4);
		--spacing-s: calc(var(--unit)*3.6);
		--spacing-m: calc(var(--unit)*7.2);
		--spacing-l: calc(var(--unit)*14.4)
	}
}
@media screen and (min-width:1440px) {
	.l-container {
		--max-width-extra: calc(min(var(--vw), 1920px) - var(--max-width))
	}
}
@media screen and (max-width:767px) {
	.l-container {
		--unit: calc(var(--full)/40);
		--unit-vw: calc(var(--vw)/40);
		--full: var(--vw);
		--design-view-width: 400px;
		--pixel-ratio: 1;
		--font-size-base: calc(var(--unit)*1.5);
		--border-radius-s: calc(var(--unit)*0.8);
		--border-radius-m: calc(var(--unit)*2.4);
		--spacing-s: calc(var(--unit)*2);
		--spacing-m: calc(var(--unit)*4);
		--spacing-l: calc(var(--unit)*8);
		--spacing-xl: calc(var(--unit)*12.8)
	}
}
.l-container {
	background-color: var(--color-bg);
	color: var(--color-base);
	font-feature-settings: "palt";
	letter-spacing: var(--tracking-base);
	line-height: var(--leading-base);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: unset
}
@media only screen and (resolution >=2dppx) {
	.l-container {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale
	}
}
@media screen and (min-width:768px) {
	.l-container {
		font-size: calc(var(--unit)*1.6)
	}
}
@media screen and (max-width:767px) {
	.l-container {
		font-size: calc(var(--unit)*1.5)
	}
}
.l-container .googleFont {
	font-family: "Google Sans", sans-serif
}
.l-container :where(img, svg, video, canvas) {
	display: block;
	height: auto;
	width: 100%
}
.l-container :where(img, svg) {
	pointer-events: none
}
.l-container :where(a), .l-container :where(button) {
	color: currentcolor
}
.l-container :where(a, button, input[type=button], input[type=submit]) {
	cursor: pointer
}
.l-container :where(a, button, label) {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}
.l-container a:active, .l-container a:focus, .l-container a:hover {
	text-decoration: none
}
.l-container :where(button) {
	background-color: initial;
	border: 0;
	outline: none;
	padding: 0
}
.l-container :where(button), .l-container :where(input[type=button]) {
	display: block;
	width: 100%
}
.l-container :where(strong) {
	font-weight: var(--font-weight-bold)
}
.l-container :where(em) {
	font-style: italic
}
.l-container :where(sub, sup) {
	font-size: .5em;
	line-height: 1
}
.l-container :where(sub) {
	vertical-align: sub
}
.l-container :where(sup) {
	vertical-align: super
}
.l-container :where(textarea) {
	resize: vertical
}
.l-container :where(del) {
	text-decoration: line-through
}
.l-container :where(ins) {
	text-decoration: underline
}
.l-container :where(picture) {
	display: block
}
@media screen and (max-width:767px) {
	.u-display-pc {
		display: none
	}
}
@media screen and (min-width:768px) {
	.u-display-sp {
		display: none
	}
}
@keyframes loop-slide {
	0% {
		transform: translate3d(0, 0, 0)
	}
	to {
		transform: translate3d(-50%, 0, 0)
	}
}
@keyframes loop-slide-reverse {
	0% {
		transform: translate3d(-50%, 0, 0)
	}
	to {
		transform: translate3d(0, 0, 0)
	}
}
@keyframes touch-bounce {
	0%, to {
		transform: scale(1)
	}
	30% {
		transform: scale(var(--touch-scale, .94))
	}
}
@keyframes hover-bounce {
	0%, to {
		transform: scale(1)
	}
	30% {
		transform: scale(var(--hover-scale, .98))
	}
}
@keyframes joyful-bounce {
	0% {
		transform: scale(1)
	}
	30% {
		animation-timing-function: var(--ease-power4-in);
		transform: scale(1.06)
	}
	to {
		animation-timing-function: var(--ease-power4-inout);
		transform: scale(1)
	}
}
@keyframes talk-noise {
	0% {
		opacity: 0;
		transform: translate(0, 0) rotate(0) scale(1)
	}
	5% {
		opacity: .6;
		transform: translate(calc(var(--tx)*.6), calc(var(--ty)*.3)) rotate(calc(var(--rx)*.6)) scale(var(--scale1))
	}
	10% {
		opacity: 1;
		transform: translate(var(--tx), var(--ty)) rotate(var(--rx)) scale(var(--scale1))
	}
	15% {
		opacity: 1;
		transform: translate(calc(var(--tx)*-.6), calc(var(--ty)*.2)) rotate(calc(var(--ry)*.8)) scale(var(--scale2))
	}
	20% {
		opacity: 1;
		transform: translate(calc(var(--tx)*-1), calc(var(--ty)*.5)) rotate(var(--ry)) scale(var(--scale2))
	}
	25% {
		opacity: 1;
		transform: translate(calc(var(--tx)*-.3), calc(var(--ty)*-.4)) rotate(calc(var(--rx)*-.8)) scale(var(--scale1))
	}
	30% {
		opacity: 1;
		transform: translate(calc(var(--tx)*.5), calc(var(--ty)*-1)) rotate(calc(var(--rx)*-1)) scale(var(--scale1))
	}
	35% {
		opacity: 1;
		transform: translate(calc(var(--tx)*.9), calc(var(--ty)*-.2)) rotate(calc(var(--ry)*-.6)) scale(var(--scale2))
	}
	40% {
		opacity: 1;
		transform: translate(calc(var(--tx)*1.2), var(--ty)) rotate(calc(var(--ry)*-1)) scale(var(--scale2))
	}
	45% {
		opacity: 1;
		transform: translate(calc(var(--tx)*.4), calc(var(--ty)*-.6)) rotate(calc(var(--rx)*-.6)) scale(var(--scale1))
	}
	50% {
		opacity: 1;
		transform: translate(calc(var(--tx)*-1), calc(var(--ty)*-1)) rotate(var(--rx)) scale(var(--scale1))
	}
	55% {
		opacity: 1;
		transform: translate(calc(var(--tx)*-.2), calc(var(--ty)*-.2)) rotate(calc(var(--rx)*.7)) scale(var(--scale2))
	}
	60% {
		opacity: 1;
		transform: translate(var(--tx), calc(var(--ty)*.8)) rotate(var(--ry)) scale(var(--scale2))
	}
	65% {
		opacity: 1;
		transform: translate(calc(var(--tx)*.4), calc(var(--ty)*.4)) rotate(calc(var(--ry)*.6)) scale(var(--scale1))
	}
	70% {
		opacity: 1;
		transform: translate(calc(var(--tx)*-.5), var(--ty)) rotate(calc(var(--rx)*-1)) scale(var(--scale1))
	}
	75% {
		opacity: 1;
		transform: translate(calc(var(--tx)*.3), calc(var(--ty)*-.7)) rotate(calc(var(--ry)*-.8)) scale(var(--scale2))
	}
	80% {
		opacity: 1;
		transform: translate(calc(var(--tx)*1.1), calc(var(--ty)*-1)) rotate(calc(var(--ry)*-1)) scale(var(--scale2))
	}
	85% {
		opacity: 1;
		transform: translate(calc(var(--tx)*.6), calc(var(--ty)*-.2)) rotate(calc(var(--rx)*-.4)) scale(var(--scale1))
	}
	90% {
		opacity: 1;
		transform: translate(calc(var(--tx)*-1), calc(var(--ty)*.6)) rotate(var(--rx)) scale(var(--scale1))
	}
	95% {
		opacity: .4;
		transform: translate(calc(var(--tx)*-.4), calc(var(--ty)*.2)) rotate(calc(var(--rx)*.5)) scale(var(--scale2))
	}
	to {
		opacity: 0;
		transform: translate(0, 0) rotate(0) scale(1)
	}
}
@keyframes call-ripple {
	0% {
		opacity: 0;
		transform: scale(.2)
	}
	25% {
		opacity: .5
	}
	to {
		opacity: 0;
		transform: scale(1.5)
	}
}
@keyframes call-ripple-button {
	0% {
		height: 100%;
		opacity: 0;
		width: 100%
	}
	25% {
		opacity: 1
	}
	95%, to {
		height: calc(100% + var(--scale-size, 30px));
		opacity: 0;
		width: calc(100% + var(--scale-size, 30px))
	}
}
.c-badge {
	background-color: var(--color-black);
	border-radius: var(--border-radius-full);
	color: var(--color-white);
	font-weight: var(--font-weight-medium);
	width: max-content
}
@media screen and (min-width:768px) {
	.c-badge {
		font-size: calc(var(--unit)*1.6);
		padding: calc(var(--unit)*1.1) calc(var(--unit)*2.6)
	}
}
@media screen and (max-width:767px) {
	.c-badge {
		font-size: calc(var(--unit)*1.4);
		padding: calc(var(--unit)*.9) calc(var(--unit)*2.1)
	}
}
.c-button {
	align-items: center;
	background-color: var(--color-white);
	border-radius: var(--border-radius-full);
	display: flex;
	isolation: isolate;
	justify-content: center;
	position: relative;
	transition: background-color .2s ease;
	width: max-content;
	will-change: transform
}
.c-button:focus-visible {
	outline: auto;
	outline: auto -webkit-focus-ring-color
}
@media screen and (min-width:768px) {
	.c-button {
		column-gap: calc(var(--unit)*.8);
		padding: calc(var(--unit)*1) calc(var(--unit)*1) calc(var(--unit)*1) calc(var(--unit)*2)
	}
}
@media screen and (max-width:767px) {
	.c-button {
		column-gap: calc(var(--unit)*.8);
		padding: calc(var(--unit)*1) calc(var(--unit)*1) calc(var(--unit)*1) calc(var(--unit)*2)
	}
}
.c-button.is-mouse-enter {
	animation: hover-bounce .32s var(--ease-power3-out)
}
.c-button.is-black {
	background-color: var(--color-black)
}
.c-button.is-black .c-button-text {
	color: var(--color-white)
}
.c-button-text {
	font-feature-settings: normal;
	font-weight: var(--font-weight-medium)
}
@media screen and (min-width:768px) {
	.c-button-text {
		font-size: calc(var(--unit)*1.6)
	}
}
@media screen and (max-width:767px) {
	.c-button-text {
		font-size: calc(var(--unit)*1.4)
	}
}
.c-button-icon {
	align-items: center;
	background-color: var(--color-black-6);
	border-radius: 50%;
	display: flex;
	flex: none;
	justify-content: center;
	margin-left: auto
}
@media screen and (min-width:768px) {
	.c-button-icon {
		height: calc(var(--unit)*2.4);
		width: calc(var(--unit)*2.4)
	}
}
@media screen and (max-width:767px) {
	.c-button-icon {
		height: calc(var(--unit)*2.4);
		width: calc(var(--unit)*2.4)
	}
}
.c-button-icon svg {
	width: 50%
}
@media screen and (min-width:768px) {
	.c-button-small {
		padding: calc(var(--unit)*.8) calc(var(--unit)*.8) calc(var(--unit)*.8) calc(var(--unit)*1.6)
	}
}
@media screen and (max-width:767px) {
	.c-button-small {
		padding: calc(var(--unit)*.8) calc(var(--unit)*.8) calc(var(--unit)*.8) calc(var(--unit)*1.6)
	}
}
@media screen and (min-width:768px) {
	.c-button-small .c-button-text {
		font-size: calc(var(--unit)*1.4)
	}
	.c-center {
		margin-left: auto;
		margin-right: auto;
		max-width: var(--max-width)
	}
}
.c-feature-hash {
	border-bottom: 1px solid;
	font-feature-settings: normal;
	line-height: var(--leading-none);
	width: max-content
}
@media screen and (min-width:768px) {
	.c-feature-hash {
		font-size: calc(var(--unit)*1.6);
		padding-bottom: calc(var(--unit)*.6)
	}
}
@media screen and (max-width:767px) {
	.c-feature-hash {
		font-size: calc(var(--unit)*1.4);
		padding-bottom: calc(var(--unit)*.6)
	}
}
.c-feature-heading {
	letter-spacing: var(--tracking-base)
}
@media screen and (min-width:768px) {
	.c-feature-heading {
		font-size: calc(var(--unit)*3.2);
		margin-top: calc(var(--unit)*3.5)
	}
}
@media screen and (max-width:767px) {
	.c-feature-heading {
		font-size: calc(var(--unit)*2.8);
		margin-top: calc(var(--unit)*3.8)
	}
}
.c-feature-description {
	line-height: var(--leading-wide)
}
@media screen and (min-width:768px) {
	.c-feature-description {
		margin-top: calc(var(--unit)*3)
	}
}
@media screen and (max-width:767px) {
	.c-feature-description {
		margin-top: calc(var(--unit)*3)
	}
}
.c-feature-note {
	letter-spacing: var(--tracking-base);
	line-height: var(--leading-wide);
	padding-left: 1.5em;
	position: relative
}
@media screen and (min-width:768px) {
	.c-feature-note {
		font-size: calc(var(--unit)*1.2);
		margin-top: calc(var(--unit)*3)
	}
}
@media screen and (max-width:767px) {
	.c-feature-note {
		font-size: calc(var(--unit)*1);
		margin-top: calc(var(--unit)*3)
	}
}
.c-feature-note-sign {
	left: 0;
	position: absolute;
	top: 0
}
.c-modal {
	--modal-fade-in-duration: 300ms;
	--modal-fade-out-duration: 150ms;
	display: grid;
	inset: 0;
	place-items: center;
	position: fixed;
	transition: visibility 0s var(--modal-fade-out-duration);
	visibility: hidden;
	z-index: var(--zindex-modal)
}
.c-modal.is-open {
	transition: visibility 0s;
	visibility: visible
}
.c-modal.is-open .c-modal-overlay {
	opacity: 1;
	transition: opacity var(--modal-fade-in-duration) ease
}
.c-modal.is-open .c-modal-frame {
	opacity: 1;
	transform: translateY(0)
}
@media screen and (min-width:768px) {
	.c-modal.is-open .c-modal-frame {
		transition: opacity .3s ease, transform .82s var(--ease-sense);
		transition-delay: .3s
	}
}
@media screen and (max-width:767px) {
	.c-modal.is-open .c-modal-frame {
		transition: opacity .3s ease, transform .64s var(--ease-sense);
		transition-delay: .2s
	}
}
.c-modal.is-open .c-modal-close {
	opacity: 1;
	transform: scale(1);
	transition: opacity .3s ease, transform 1.04s var(--ease-sense-out)
}
@media screen and (min-width:768px) {
	.c-modal.is-open .c-modal-close {
		transition-delay: .3s
	}
}
@media screen and (max-width:767px) {
	.c-modal.is-open .c-modal-close {
		transition-delay: .2s
	}
}
.c-modal-container {
	position: relative;
	z-index: 1
}
.c-modal-frame {
	aspect-ratio: 16/9;
	background-color: var(--color-black);
	height: auto;
	opacity: 0;
	position: relative;
	transition: opacity var(--modal-fade-out-duration) linear, transform 0s var(--modal-fade-out-duration);
	width: min(var(--full) - var(--spacing-m), (100vh - calc(var(--unit)*16)) * 16/9, 1200px)
}
@media screen and (min-width:768px) {
	.c-modal-frame {
		transform: translateY(calc(var(--unit)*10))
	}
}
@media screen and (max-width:767px) {
	.c-modal-frame {
		transform: translateY(calc(var(--unit)*7))
	}
}
.c-modal-frame iframe {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%
}
.c-modal-close {
	height: calc(var(--unit)*5);
	opacity: 0;
	position: absolute;
	right: 0;
	transform: scale(1.4);
	transition: opacity var(--modal-fade-out-duration) linear, transform 0s var(--modal-fade-out-duration);
	width: calc(var(--unit)*5)
}
.c-modal-close:focus-visible {
	outline: auto;
	outline: auto -webkit-focus-ring-color
}
@media screen and (min-width:768px) {
	.c-modal-close {
		bottom: calc(100% + var(--unit)*2);
		height: calc(var(--unit)*5.2);
		width: calc(var(--unit)*5.2)
	}
}
@media screen and (max-width:767px) {
	.c-modal-close {
		bottom: calc(100% + var(--unit)*1.2);
		height: calc(var(--unit)*4.4);
		width: calc(var(--unit)*4.4)
	}
}
.c-modal-close:after, .c-modal-close:before {
	background-color: var(--color-white);
	content: "";
	height: 1px;
	left: 0;
	position: absolute;
	top: 50%;
	width: 100%
}
.c-modal-close:before {
	transform: rotate(25deg)
}
.c-modal-close:after {
	transform: rotate(-25deg)
}
.c-modal-overlay {
	background-color: #000c;
	height: 100%;
	left: 0;
	top: 0;
	transition: opacity var(--modal-fade-out-duration) linear;
	width: 100%
}
.c-modal-overlay, .c-noise {
	opacity: 0;
	position: absolute
}
.c-noise {
	transition: opacity .3s ease;
	will-change: transform
}
.c-noise.is-active {
	animation: talk-noise var(--duration, .8s) steps(20) forwards
}
.c-touchable {
	will-change: transform
}
.c-touchable.is-touched {
	animation: touch-bounce .46s var(--ease-power3-out) !important
}
.veil {
	display: none
}
@supports (-webkit-touch-callout:none) and (-webkit-overflow-scrolling:touch) {
	.veil {
		display: block;
		pointer-events: none;
		position: sticky;
		top: 0;
		z-index: 10000
	}
	.veil-overlay {
		-webkit-backdrop-filter: blur(1px);
		backdrop-filter: blur(1px);
		height: 100%;
		left: 0;
		opacity: 0;
		position: fixed;
		top: 0;
		width: 100%
	}
}
.mv {
	position: relative;
	z-index: 1
}
.concept, .mv {
	background-color: var(--color-snow)
}
.concept {
	overflow: hidden
}
@media screen and (min-width:768px) {
	.concept {
		padding: calc(var(--unit)*12) 0 var(--spacing-l)
	}
}
@media screen and (max-width:767px) {
	.concept {
		padding: calc(var(--unit)*7.8) 0 calc(var(--unit)*9.6)
	}
}
.concept-intro {
	isolation: isolate;
	position: relative
}
@media screen and (min-width:768px) {
	.concept-intro {
		padding: 0 var(--spacing-l) calc(var(--unit)*61.3)
	}
}
@media screen and (max-width:767px) {
	.concept-intro {
		padding: 0 var(--spacing-m) calc(var(--unit)*29.7)
	}
}
.concept-intro-bg {
	bottom: 0;
	left: 0;
	margin: 0 auto;
	position: absolute;
	z-index: -1
}
@media screen and (min-width:768px) {
	.concept-intro-bg {
		bottom: calc(var(--unit)*-12.2);
		left: calc(50% - var(--unit)*192/2);
		width: calc(var(--unit)*192)
	}
}
@media screen and (max-width:767px) {
	.concept-intro-bg {
		bottom: calc(var(--unit)*2.3);
		width: 100%
	}
}
.concept-copy {
	letter-spacing: var(--tracking-base)
}
@media screen and (min-width:768px) {
	.concept-copy {
		font-size: calc(var(--unit)*6.8);
		line-height: 1.46
	}
}
@media screen and (max-width:767px) {
	.concept-copy {
		font-size: calc(var(--unit)*3.6);
		line-height: 1.56
	}
}
.concept-description {
	line-height: var(--leading-wide)
}
@media screen and (min-width:768px) {
	.concept-description {
		font-size: calc(var(--unit)*1.8);
		margin-top: calc(var(--unit)*3.8)
	}
}
@media screen and (max-width:767px) {
	.concept-description {
		font-size: calc(var(--unit)*1.5);
		margin-top: calc(var(--unit)*4.2)
	}
}
.concept-movie {
	--hover-scale: 0.99
}
.concept-movie:focus-visible {
	outline: auto;
	outline: auto -webkit-focus-ring-color
}
@media screen and (min-width:768px) {
	.concept-movie {
		left: calc(50% + var(--unit)*21.6);
		position: absolute;
		top: calc(var(--unit)*2.5);
		width: calc(var(--unit)*36)
	}
}
@media screen and (max-width:767px) {
	.concept-movie {
		margin-top: calc(var(--unit)*5.5);
		position: relative
	}
}
.concept-movie.is-mouse-enter {
	animation: hover-bounce .32s var(--ease-power3-out)
}
@media screen and (min-width:768px) {
	.concept-movie-pc {
		border-radius: var(--border-radius-s);
		display: block;
		overflow: hidden
	}
}
@media screen and (max-width:767px) {
	.concept-movie-sp {
		align-items: center;
		background-color: var(--color-white);
		border-radius: var(--border-radius-s);
		box-shadow: 0 calc(var(--unit)*.2) calc(var(--unit)*.6) #0000001a;
		display: flex;
		padding: calc(var(--unit)*1.2)
	}
}
.concept-movie-thumb {
	display: block
}
@media screen and (max-width:767px) {
	.concept-movie-thumb {
		border-radius: calc(var(--unit)*.6);
		margin-right: calc(var(--unit)*2.4);
		overflow: hidden;
		position: relative;
		width: calc(var(--unit)*10.2)
	}
	.concept-movie-thumb-icon {
		left: 50%;
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
		width: calc(var(--unit)*2.8)
	}
	.concept-movie-thumb-icon svg {
		fill: var(--color-white)
	}
	.concept-movie-text {
		font-size: calc(var(--unit)*1.4);
		font-weight: var(--font-weight-medium)
	}
}
.concept-movie .c-button {
	position: absolute
}
@media screen and (min-width:768px) {
	.concept-movie .c-button {
		align-items: center;
		background-color: var(--color-white);
		border-radius: var(--border-radius-full);
		bottom: calc(var(--unit)*1.6);
		column-gap: calc(var(--unit)*.6);
		display: flex;
		flex-direction: row-reverse;
		padding: calc(var(--unit)*.6) calc(var(--unit)*.6) calc(var(--unit)*.6) calc(var(--unit)*1.2);
		right: calc(var(--unit)*1.6)
	}
}
@media screen and (max-width:767px) {
	.concept-movie .c-button {
		border: 1px solid var(--color-white);
		bottom: calc(var(--unit)*.7);
		padding: 0;
		right: calc(var(--unit)*.7)
	}
}
@media screen and (min-width:768px) {
	.concept-movie .c-button-text {
		font-size: calc(var(--unit)*1.4);
		font-weight: var(--font-weight-medium);
		line-height: var(--leading-none)
	}
}
@media screen and (max-width:767px) {
	.concept-movie .c-button-text {
		display: none
	}
}
.concept-movie .c-button-icon {
	background-color: var(--color-black)
}
@media screen and (min-width:768px) {
	.concept-movie .c-button-icon {
		padding-left: calc(var(--unit)*.2)
	}
}
@media screen and (max-width:767px) {
	.concept-movie .c-button-icon {
		padding-left: calc(var(--unit)*.2)
	}
}
.concept-movie .c-button-icon svg {
	width: 60%;
	fill: var(--color-white)
}
.concept-banner {
	display: grid;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	z-index: 1
}
@media screen and (min-width:768px) {
	.concept-banner {
		gap: calc(var(--unit)*1.6);
		margin-bottom: calc(var(--unit)*10.8);
		margin-top: calc(var(--unit)*-.8);
		width: calc(var(--unit)*64)
	}
}
@media screen and (max-width:767px) {
	.concept-banner {
		gap: calc(var(--unit)*1.6);
		margin-bottom: calc(var(--unit)*6.4);
		margin-top: calc(var(--unit)*-2.9);
		width: calc(var(--unit)*30.6)
	}
}
.concept-banner-link {
	display: block
}
@media screen and (min-width:768px) {
	.portal {
		padding: 0 var(--spacing-m)
	}
}
@media screen and (max-width:767px) {
	.portal {
		padding: 0 var(--spacing-s)
	}
}
.portal-list {
	display: grid;
	will-change: transform
}
@media screen and (min-width:768px) {
	.portal-list {
		gap: calc(var(--unit)*.2);
		grid-template: "call camera design"1fr "call camera spec"1fr/378fr 378fr 536fr;
		height: calc(var(--unit)*60);
		transition: grid-template-columns .64s var(--ease-sense), grid-template-rows .64s var(--ease-sense)
	}
}
@media screen and (max-width:767px) {
	.portal-list {
		gap: calc(var(--unit)*2)
	}
}
.portal-list[data-portal=call] {
	grid-template-columns: 438fr 348fr 486fr
}
.portal-list[data-portal=camera] {
	grid-template-columns: 348fr 438fr 486fr
}
.portal-list[data-portal=design] {
	grid-template-columns: 348fr 348fr 596fr;
	grid-template-rows: 1.2fr 1fr
}
.portal-list[data-portal=spec] {
	grid-template-columns: 348fr 348fr 596fr;
	grid-template-rows: 1fr 1.2fr
}
@media screen and (max-width:767px) {
	.portal-card {
		height: calc(var(--unit)*27)
	}
}
.portal-card-link {
	border-radius: var(--border-radius-m);
	display: block;
	height: 100%;
	isolation: isolate;
	overflow: hidden;
	position: relative
}
.portal-card-link:focus-visible {
	outline: auto;
	outline: auto -webkit-focus-ring-color
}
@media screen and (min-width:768px) {
	.portal-card-call .portal-heading, .portal-card-camera .portal-heading {
		left: 12.8%
	}
	.portal-card-call .portal-button, .portal-card-camera .portal-button {
		right: 4.3%
	}
	.portal-card-call {
		grid-area: call
	}
	.portal-card-call .portal-back-bg img {
		height: 100%;
		left: 0;
		top: 0;
		width: auto
	}
}
.portal-card-call .portal-back-illust {
	display: grid;
	position: absolute
}
@media screen and (min-width:768px) {
	.portal-card-call .portal-back-illust {
		left: calc(50% - var(--unit)*16.4);
		top: calc(50% - var(--unit)*13.7);
		width: calc(var(--unit)*31.9)
	}
}
@media screen and (max-width:767px) {
	.portal-card-call .portal-back-illust {
		left: calc(var(--unit)*4.6);
		top: calc(var(--unit)*8.6);
		width: calc(var(--unit)*26)
	}
}
.portal-card-call .portal-back-illust-clear {
	opacity: 0;
	position: absolute;
	right: 30.5%;
	top: 10.4%;
	transition: opacity 80ms ease;
	width: 5%;
	will-change: opacity
}
.portal-card-call .portal-back-illust-clear.is-active {
	opacity: 1
}
.portal-card-call .portal-back-wave {
	display: grid;
	grid-template-columns: 1fr 1fr;
	position: absolute
}
@media screen and (min-width:768px) {
	.portal-card-call .portal-back-wave {
		left: calc(50% - var(--unit)*25);
		top: calc(50% - var(--unit)*20.8);
		width: calc(var(--unit)*50)
	}
}
@media screen and (max-width:767px) {
	.portal-card-call .portal-back-wave {
		left: calc(var(--unit)*-.9);
		top: calc(var(--unit)*3);
		width: calc(var(--unit)*37.8)
	}
}
.portal-card-call .portal-back-noise {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	transition: opacity 1s ease;
	width: 100%
}
.portal-card-call .portal-back-noise.is-hidden {
	opacity: 0
}
@media screen and (min-width:768px) {
	.portal-card-call .portal-back-noise-01 {
		right: calc(50% + var(--unit)*12.7);
		top: calc(50% - var(--unit)*19.5);
		width: calc(var(--unit)*3.7)
	}
}
@media screen and (max-width:767px) {
	.portal-card-call .portal-back-noise-01 {
		left: calc(var(--unit)*2.6);
		top: calc(var(--unit)*11.8);
		width: calc(var(--unit)*2.8)
	}
}
@media screen and (min-width:768px) {
	.portal-card-call .portal-back-noise-02 {
		right: calc(50% + var(--unit)*7.8);
		top: calc(50% - var(--unit)*17);
		width: calc(var(--unit)*6.1)
	}
}
@media screen and (max-width:767px) {
	.portal-card-call .portal-back-noise-02 {
		left: calc(var(--unit)*3.7);
		top: calc(var(--unit)*14.2);
		width: calc(var(--unit)*4.6)
	}
}
@media screen and (min-width:768px) {
	.portal-card-call .portal-back-noise-03 {
		right: calc(50% + var(--unit)*7.2);
		top: calc(50% - var(--unit)*11.7);
		width: calc(var(--unit)*5.4)
	}
}
@media screen and (max-width:767px) {
	.portal-card-call .portal-back-noise-03 {
		right: calc(var(--unit)*5);
		top: calc(var(--unit)*13);
		width: calc(var(--unit)*4)
	}
}
@media screen and (min-width:768px) {
	.portal-card-call .portal-back-noise-04 {
		left: calc(50% + var(--unit)*12.4);
		top: calc(50% - var(--unit)*22.5);
		width: calc(var(--unit)*3.8)
	}
}
@media screen and (max-width:767px) {
	.portal-card-call .portal-back-noise-04 {
		right: calc(var(--unit)*2.2);
		top: calc(var(--unit)*7.1);
		width: calc(var(--unit)*2.9)
	}
}
@media screen and (min-width:768px) {
	.portal-card-call .portal-back-noise-05 {
		left: calc(50% + var(--unit)*8.5);
		top: calc(50% - var(--unit)*19);
		width: calc(var(--unit)*6.4)
	}
}
@media screen and (max-width:767px) {
	.portal-card-call .portal-back-noise-05 {
		right: calc(var(--unit)*3.9);
		top: calc(var(--unit)*9.2);
		width: calc(var(--unit)*4.8)
	}
}
@media screen and (min-width:768px) {
	.portal-card-camera {
		grid-area: camera
	}
	.portal-card-camera .portal-back-bg img {
		height: 100%;
		left: 50%;
		top: 0;
		transform: translateX(-50%);
		width: auto
	}
}
.portal-card-camera .portal-back-frame {
	position: absolute
}
@media screen and (min-width:768px) {
	.portal-card-camera .portal-back-frame {
		left: calc(50% - var(--unit)*16.6);
		top: calc(50% - var(--unit)*16.5);
		width: calc(var(--unit)*47)
	}
}
@media screen and (max-width:767px) {
	.portal-card-camera .portal-back-frame {
		left: calc(var(--unit)*2.7);
		top: calc(var(--unit)*9.8);
		width: calc(var(--unit)*37.1)
	}
}
.portal-card-camera .portal-back-diff {
	--progress: -1%;
	display: grid;
	overflow: hidden;
	position: absolute
}
@media screen and (min-width:768px) {
	.portal-card-camera .portal-back-diff {
		border-radius: var(--border-radius-m);
		height: calc(var(--unit)*55.4);
		left: calc(var(--unit)*3.7);
		top: calc(var(--unit)*3.2);
		width: calc(var(--unit)*25.6)
	}
}
@media screen and (max-width:767px) {
	.portal-card-camera .portal-back-diff {
		border-radius: calc(var(--unit)*1.3);
		height: 48.5%;
		left: 5.1%;
		top: 6.2%;
		width: 72.2%
	}
}
.portal-card-camera .portal-back-diff:after {
	background-color: var(--color-white);
	content: "";
	height: 100%;
	left: var(--progress);
	position: absolute;
	width: 1px
}
.portal-card-camera .portal-back-diff-after, .portal-card-camera .portal-back-diff-before {
	grid-area: 1/1
}
.portal-card-camera .portal-back-diff-after img, .portal-card-camera .portal-back-diff-before img {
	object-fit: cover
}
.portal-card-camera .portal-back-diff-after {
	clip-path: polygon(0 0, var(--progress) 0, var(--progress) 100%, 0 100%)
}
.portal-card-camera .portal-back-camera {
	position: absolute
}
@media screen and (min-width:768px) {
	.portal-card-camera .portal-back-camera {
		left: calc(var(--unit)*15.7);
		top: calc(var(--unit)*3.9);
		width: calc(var(--unit)*1.6)
	}
}
@media screen and (max-width:767px) {
	.portal-card-camera .portal-back-camera {
		left: calc(var(--unit)*2.5);
		top: calc(var(--unit)*7.3);
		width: calc(var(--unit)*.9)
	}
}
@media screen and (min-width:768px) {
	.portal-card-design .portal-heading, .portal-card-spec .portal-heading {
		left: 9%;
		top: 11.8%
	}
	.portal-card-design .portal-button, .portal-card-spec .portal-button {
		bottom: 4.8%;
		right: 3%
	}
}
.portal-card-design {
	--portal-design-enter-delay: 10ms;
	--portal-design-stagger: 40ms
}
@media screen and (min-width:768px) {
	.portal-card-design {
		grid-area: design
	}
	.portal-card-design .portal-back-bg img {
		height: calc(var(--unit)*33);
		right: 0;
		top: 0;
		width: calc(var(--unit)*60)
	}
}
.portal-card-design .portal-card-link:not(.can-animate) * {
	transition: 0s !important
}
.portal-card-design .portal-back-illust, .portal-card-design .portal-back-image-01, .portal-card-design .portal-back-image-02 {
	visibility: hidden
}
.portal-card-design .portal-back-illust, .portal-card-design .portal-back-image-01, .portal-card-design .portal-back-image-02 {
	transform: translate(0, 150%)
}
.portal-card-design .portal-back-image-01 {
	position: absolute
}
@media screen and (min-width:768px) {
	.portal-card-design .portal-back-image-01 {
		left: calc(50% - var(--unit)*24.9);
		top: calc(var(--unit)*14.5);
		width: calc(var(--unit)*18.4)
	}
}
@media screen and (max-width:767px) {
	.portal-card-design .portal-back-image-01 {
		left: calc(var(--unit)*2);
		top: calc(var(--unit)*11.6);
		width: calc(var(--unit)*11.9)
	}
}
.portal-card-design .portal-back-image-02 {
	position: absolute;
	z-index: 1
}
@media screen and (min-width:768px) {
	.portal-card-design .portal-back-image-02 {
		left: calc(50% - var(--unit)*12.9);
		top: calc(var(--unit)*14.5);
		width: calc(var(--unit)*18.4)
	}
}
@media screen and (max-width:767px) {
	.portal-card-design .portal-back-image-02 {
		left: calc(var(--unit)*9.3);
		top: calc(var(--unit)*11.6);
		width: calc(var(--unit)*11.9)
	}
}
.portal-card-design .portal-back-group[data-style=casual] .portal-back-illust {
	position: absolute
}
@media screen and (min-width:768px) {
	.portal-card-design .portal-back-group[data-style=casual] .portal-back-illust {
		left: calc(50% + var(--unit)*6.6);
		top: calc(var(--unit)*3.5);
		width: calc(var(--unit)*18.9)
	}
}
@media screen and (max-width:767px) {
	.portal-card-design .portal-back-group[data-style=casual] .portal-back-illust {
		left: calc(var(--unit)*22.6);
		top: calc(var(--unit)*3.4);
		width: calc(var(--unit)*19)
	}
}
.portal-card-design .portal-back-group[data-style=kireime] .portal-back-illust {
	position: absolute
}
@media screen and (min-width:768px) {
	.portal-card-design .portal-back-group[data-style=kireime] .portal-back-illust {
		left: calc(50% + var(--unit)*.1);
		top: calc(var(--unit)*4.2);
		width: calc(var(--unit)*26.6)
	}
}
@media screen and (max-width:767px) {
	.portal-card-design .portal-back-group[data-style=kireime] .portal-back-illust {
		left: calc(var(--unit)*16.9);
		top: calc(var(--unit)*5.2);
		width: calc(var(--unit)*19.5)
	}
}
.portal-card-design .portal-back-group[data-style=basic] .portal-back-illust {
	position: absolute
}
@media screen and (min-width:768px) {
	.portal-card-design .portal-back-group[data-style=basic] .portal-back-illust {
		left: calc(50% + var(--unit)*3.4);
		top: calc(var(--unit)*3.3);
		width: calc(var(--unit)*26.4)
	}
}
@media screen and (max-width:767px) {
	.portal-card-design .portal-back-group[data-style=basic] .portal-back-illust {
		left: calc(var(--unit)*19);
		top: calc(var(--unit)*3.2);
		width: calc(var(--unit)*22)
	}
}
.portal-card-design .portal-back-group.is-enter .portal-back-illust, .portal-card-design .portal-back-group.is-enter .portal-back-image-01, .portal-card-design .portal-back-group.is-enter .portal-back-image-02 {
	transform: translate(0, 0);
	transition: visibility 0s, transform 1.15s var(--ease-sense-out);
	visibility: visible
}
.portal-card-design .portal-back-group.is-enter .portal-back-illust {
	transition-delay: calc(var(--portal-design-enter-delay) + var(--portal-design-stagger)*2)
}
.portal-card-design .portal-back-group.is-enter .portal-back-image-01, .portal-card-design .portal-back-group.is-enter .portal-back-image-02 {
	transition-delay: calc(var(--portal-design-enter-delay))
}
.portal-card-design .portal-back-group.is-enter .portal-back-image-02 {
	transition-delay: calc(var(--portal-design-enter-delay) + var(--portal-design-stagger))
}
.portal-card-design .portal-back-group.is-leave .portal-back-illust, .portal-card-design .portal-back-group.is-leave .portal-back-image-01, .portal-card-design .portal-back-group.is-leave .portal-back-image-02 {
	transform: translate(0, 150%);
	transition: visibility 0s 1.5s, transform 1.5s var(--ease-relax);
	visibility: hidden
}
@media screen and (max-width:767px) {
	.portal-card-design .portal-back-group.is-leave .portal-back-illust, .portal-card-design .portal-back-group.is-leave .portal-back-image-01, .portal-card-design .portal-back-group.is-leave .portal-back-image-02 {
		transition: visibility 0s 1.5s, transform 1.5s var(--ease-relax)
	}
}
.portal-card-design .portal-back-group.is-leave .portal-back-illust {
	transition-delay: calc(1.5s + var(--portal-design-stagger)*2), calc(var(--portal-design-stagger)*2)
}
.portal-card-design .portal-back-group.is-leave .portal-back-image-02 {
	transition-delay: calc(1.5s + var(--portal-design-stagger)), var(--portal-design-stagger)
}
@media screen and (min-width:768px) {
	.portal-card-spec {
		grid-area: spec
	}
	.portal-card-spec .portal-back-bg img {
		bottom: 0;
		height: calc(var(--unit)*33);
		right: 0;
		width: calc(var(--unit)*60)
	}
}
.portal-card-spec .portal-back-shape {
	position: absolute
}
@media screen and (min-width:768px) {
	.portal-card-spec .portal-back-shape {
		bottom: calc(var(--unit)*2.4);
		left: calc(50% - var(--unit)*11);
		width: calc(var(--unit)*14.4)
	}
}
@media screen and (max-width:767px) {
	.portal-card-spec .portal-back-shape {
		right: calc(var(--unit)*2);
		top: calc(var(--unit)*2);
		width: calc(var(--unit)*14.4)
	}
}
.portal-card-spec .portal-back-shape [data-hand=hour], .portal-card-spec .portal-back-shape [data-hand=minute] {
	transform-box: content-box !important;
	transform-origin: center 94% !important
}
.portal-card-spec .portal-back-image {
	display: grid;
	position: absolute
}
@media screen and (min-width:768px) {
	.portal-card-spec .portal-back-image {
		bottom: calc(var(--unit)*-3.4);
		left: calc(50% - var(--unit)*2);
		width: calc(var(--unit)*39.9)
	}
}
@media screen and (max-width:767px) {
	.portal-card-spec .portal-back-image {
		left: calc(var(--unit)*4);
		top: calc(var(--unit)*9.3);
		width: calc(var(--unit)*34.8)
	}
}
.portal-card-spec .portal-back-device {
	grid-area: 1/1
}
.portal-card-spec .portal-back-device-night {
	opacity: 0;
	transition: opacity .64s ease;
	z-index: 1
}
.portal-card-spec .portal-back-device-night.is-active {
	opacity: 1
}
.portal-card-spec .portal-back-player {
	object-fit: cover;
	position: absolute
}
@media screen and (min-width:768px) {
	.portal-card-spec .portal-back-player {
		border-radius: calc(var(--unit)*.4);
		height: calc(var(--unit)*9.9);
		left: calc(var(--unit)*.7);
		top: calc(var(--unit)*2.6);
		width: calc(var(--unit)*20.5)
	}
}
@media screen and (max-width:767px) {
	.portal-card-spec .portal-back-player {
		border-radius: calc(var(--unit)*.4);
		height: calc(var(--unit)*8.4);
		left: calc(var(--unit)*.6);
		top: calc(var(--unit)*2.1);
		width: calc(var(--unit)*17.1)
	}
}
.portal-front {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 2
}
.portal-heading {
	color: var(--color-white);
	font-weight: var(--font-weight-medium);
	position: absolute;
	will-change: transform
}
@media screen and (min-width:768px) {
	.portal-heading {
		font-size: calc(var(--unit)*2.4);
		left: calc(var(--unit)*4.8);
		top: calc(var(--unit)*4)
	}
}
@media screen and (max-width:767px) {
	.portal-heading {
		font-size: calc(var(--unit)*1.8);
		left: calc(var(--unit)*4);
		top: calc(var(--unit)*3.3)
	}
}
.portal-button {
	align-items: center;
	background-color: var(--color-white);
	border-radius: var(--border-radius-full);
	box-shadow: 0 2px 6px #00000026;
	display: flex;
	position: absolute;
	will-change: transform
}
@media screen and (min-width:768px) {
	.portal-button {
		bottom: calc(var(--unit)*1.6);
		column-gap: calc(var(--unit)*.8);
		padding: calc(var(--unit)*1) calc(var(--unit)*1) calc(var(--unit)*1) calc(var(--unit)*2);
		right: calc(var(--unit)*1.6)
	}
}
@media screen and (max-width:767px) {
	.portal-button {
		bottom: calc(var(--unit)*2);
		column-gap: calc(var(--unit)*.8);
		padding: calc(var(--unit)*1) calc(var(--unit)*1) calc(var(--unit)*1) calc(var(--unit)*2);
		right: calc(var(--unit)*2)
	}
}
.portal-button .c-button-text {
	font-weight: var(--font-weight-medium)
}
@media screen and (min-width:768px) {
	.portal-button .c-button-text {
		font-size: calc(var(--unit)*1.6)
	}
}
.portal-button .c-button-icon {
	background-color: var(--color-black-6);
	border-radius: 50%
}
@media screen and (min-width:768px) {
	.portal-button .c-button-icon {
		height: calc(var(--unit)*2.4);
		width: calc(var(--unit)*2.4)
	}
}
@media screen and (max-width:767px) {
	.portal-button .c-button-icon {
		height: calc(var(--unit)*2.4);
		width: calc(var(--unit)*2.4)
	}
}
.portal-button .c-button-icon svg {
	width: 50%
}
.portal-back, .portal-back:before {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%
}
.portal-back:before {
	box-shadow: inset 8px -8px 10px #0000001a, inset -8px 8px 10px #fff3;
	content: ""
}
.portal-back-bg {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1
}
@media screen and (min-width:768px) {
	.portal-back-bg img {
		max-width: none;
		position: absolute
	}
}
@media screen and (max-width:767px) {
	.portal-back-bg img {
		height: 100%;
		left: 0;
		object-fit: cover;
		position: absolute;
		top: 0;
		width: 100%
	}
}
.call {
	background-color: var(--color-blue-light)
}
@media screen and (min-width:768px) {
	.call-story {
		/*height: calc(var(--unit)*380)*/
		height: calc(var(--unit)*280)
	}
}
@media screen and (max-width:767px) {
	.call-story {
		/*height: calc(var(--unit)*360)*/
		height: calc(var(--unit)*220)
	}
}
.call-story.is-clear .call-voice {
	transition: width var(--voice-change-duration) var(--ease-sense-out), height var(--voice-change-duration) var(--ease-sense-out), transform var(--voice-change-duration) var(--ease-sense-out)
}
@media screen and (min-width:768px) {
	.call-story.is-clear .call-voice {
		height: calc(var(--unit)*43.4);
		transform: translate(calc(var(--unit)*-9.5), calc(var(--unit)*1.8));
		width: calc(var(--unit)*43.4)
	}
}
@media screen and (max-width:767px) {
	.call-story.is-clear .call-voice {
		height: calc(var(--unit)*24);
		transform: translate(calc(var(--unit)*1.9), calc(var(--unit)*1.5));
		width: calc(var(--unit)*24)
	}
}
.call-story.is-clear .call-voice-illust {
	transition: transform var(--voice-change-duration) var(--ease-sense-out)
}
@media screen and (min-width:768px) {
	.call-story.is-clear .call-voice-illust {
		transform: scale(1.5) translate(calc(var(--unit)*-.2), calc(var(--unit)*6.3))
	}
}
@media screen and (max-width:767px) {
	.call-story.is-clear .call-voice-illust {
		transform: scale(1.39) translate(calc(var(--unit)*-.3), calc(var(--unit)*3.2))
	}
}
.call-story.is-clear .call-graphic-front-clear, .call-story.is-clear .call-voice-illust-clear {
	opacity: 1
}
.call-story-viewport {
	height: var(--visible-height);
	overflow: clip;
	position: sticky;
	top: var(--header-nav-height)
}
.call-story-contents {
	overflow: hidden;
	z-index: 1
}
.call-story-contents, .call-story-section {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%
}
.call-story-section {
	display: flex;
	flex-direction: column;
	pointer-events: none;
	transition: visibility 0s .16s
}
@media screen and (min-width:768px) {
	.call-story-section {
		margin-left: auto;
		margin-right: auto;
		max-width: 1920px;
		padding-left: calc(var(--unit)*8);
		padding-top: calc(var(--unit)*9);
		right: 0
	}
}
@media screen and (min-width:1440px) {
	.call-story-section {
		padding-left: calc(var(--unit)*8 + var(--max-width-extra, 0)*.3)
	}
}
@media screen and (max-width:767px) {
	.call-story-section {
		padding: calc(var(--unit)*5) calc(var(--unit)*4)
	}
}
@media screen and (min-width:768px) {
	.call-story-section-01 {
		padding-bottom: calc(var(--unit)*7)
	}
}
@media screen and (max-width:767px) {
	.call-story-section-01 {
		padding-top: calc(var(--unit)*4)
	}
}
.call-story-section.is-active {
	pointer-events: auto
}
.call-story-section.is-active .call-story-row {
	opacity: 1;
	transform: translate(0, 0);
	transition: opacity .9s ease, transform 1.2s var(--ease-sense-out);
	transition-delay: calc(40ms*var(--index, 0))
}
.call-story-section.is-active .call-story-label {
	transform: scale(1);
	transition: opacity .4s ease, transform .5s var(--ease-pop)
}
@media screen and (min-width:768px) {
	.call-story-section-list {
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%
	}
}
.call-story-row {
	opacity: 0;
	transition: opacity .3s ease, transform 0s .3s
}
@media screen and (min-width:768px) {
	.call-story-row {
		--index: var(--index-pc, 0);
		transform: translate(0, calc(var(--unit)*10))
	}
}
@media screen and (max-width:767px) {
	.call-story-row {
		--index: var(--index-sp, 0);
		margin-right: -1em;
		transform: translate(0, calc(var(--unit)*7))
	}
}
.call-story-label {
	background-color: var(--color-blue);
	transform: scale(.2);
	will-change: transform;
	margin-bottom: calc(var(--unit) * 2.7);
}
@media screen and (max-width:767px) {
	.call-story-label {
		margin-bottom: calc(var(--unit) * 1.7);
	}
}
.call-story-title {
	display: flex;
	flex-direction: column;
	font-weight: 400;
	letter-spacing: var(--tracking-base)
}
@media screen and (min-width:768px) {
	.call-story-title {
		font-size: calc(var(--unit)*5.6);
		margin-top: calc(var(--unit)*2)
	}
}
@media screen and (max-width:767px) {
	.call-story-title {
		font-size: calc(var(--unit)*3.6);
		margin-top: calc(var(--unit)*1.5)
	}
}
.call-story-heading {
	display: flex;
	flex-direction: column;
	letter-spacing: var(--tracking-base)
}
@media screen and (min-width:768px) {
	.call-story-heading {
		font-size: calc(var(--unit)*4);
		margin-bottom: calc(var(--unit)*2.7)
	}
}
@media screen and (max-width:767px) {
	.call-story-heading {
		font-size: calc(var(--unit)*2.2);
		/*margin-bottom: calc(var(--unit)*2.6)*/
		margin-bottom: calc(var(--unit)*1)
	}
}
.call-story-description {
	display: flex;
	flex-direction: column;
	line-height: var(--leading-wide)
}
@media screen and (min-width:768px) {
	.call-story-description {
		row-gap: calc(var(--unit)*1.2)
	}
}
@media screen and (max-width:767px) {
	.call-story-description {
		row-gap: calc(var(--unit)*1.2)
	}
}
.call-story-text {
	display: flex;
	flex-direction: column;
	line-height: var(--leading-extra-wide)
}
@media screen and (max-width:767px) {
	.call-story-text {
		font-size: calc(var(--unit)*1.5)
	}
}
.call-story-note {
	letter-spacing: var(--tracking-base)
}
@media screen and (min-width:768px) {
	.call-story-note {
		font-size: calc(var(--unit)*1.2);
		margin-top: calc(var(--unit)*1.9)
	}
}
@media screen and (max-width:767px) {
	.call-story-note {
		font-size: calc(var(--unit)*1);
		margin-top: calc(var(--unit)*1.2)
	}
}
@media screen and (min-width:768px) {
	.call-story-vocalist {
		margin-top: calc(var(--unit)*4.4);
		width: calc(var(--unit)*11.7)
	}
}
@media screen and (max-width:767px) {
	.call-story-vocalist {
		margin-top: calc(var(--unit)*3.7);
		width: calc(var(--unit)*7)
	}
}
.call-story-indicator {
	display: flex;
	justify-content: center;
	left: 0;
	pointer-events: none;
	position: absolute;
	width: 100%;
	z-index: 10
}
@media screen and (min-width:768px) {
	.call-story-indicator {
		bottom: calc(var(--unit)*5)
	}
}
@media screen and (max-width:767px) {
	.call-story-indicator {
		bottom: calc(var(--unit)*1.6)
	}
}
.call-story-indicator-container {
	background-color: var(--color-white);
	border-radius: var(--border-radius-full);
	position: relative
}
@media screen and (min-width:768px) {
	.call-story-indicator-container {
		padding: calc(var(--unit)*1.2)
	}
}
@media screen and (max-width:767px) {
	.call-story-indicator-container {
		padding: calc(var(--unit)*1.2)
	}
}
.call-story-indicator-list {
	display: flex;
	position: relative
}
@media screen and (min-width:768px) {
	.call-story-indicator-list {
		column-gap: calc(var(--unit)*4.8)
	}
}
@media screen and (max-width:767px) {
	.call-story-indicator-list {
		column-gap: calc(var(--unit)*4.8)
	}
}
.call-story-indicator-item {
	isolation: isolate;
	position: relative;
	z-index: 1
}
.call-story-indicator-button {
	background-color: var(--color-indicator);
	border-radius: 50%;
	pointer-events: auto;
	position: relative;
	transition: background-color .2s ease
}
.call-story-indicator-button:focus-visible {
	outline: auto;
	outline: auto -webkit-focus-ring-color
}
@media screen and (min-width:768px) {
	.call-story-indicator-button {
		height: calc(var(--unit)*1);
		width: calc(var(--unit)*1)
	}
}
@media screen and (max-width:767px) {
	.call-story-indicator-button {
		height: calc(var(--unit)*1);
		width: calc(var(--unit)*1)
	}
}
.call-story-indicator-button.is-active {
	background-color: var(--color-indicator-active)
}
.call-story-indicator-button.is-current:before {
	opacity: .5;
	transform: scale(1)
}
.call-story-indicator-button:before {
	background: var(--gradient-attention);
	border-radius: 50%;
	content: "";
	height: 200%;
	left: -50%;
	opacity: 0;
	position: absolute;
	top: -50%;
	transform: scale(.5);
	width: 200%
}
@media screen and (min-width:768px) {
	.call-story-indicator-button:before {
		transition: opacity .3s ease, transform .6s var(--ease-sense-out)
	}
}
@media screen and (max-width:767px) {
	.call-story-indicator-button:before {
		transition: opacity .5s ease, transform 1s var(--ease-sense-out)
	}
}
.call-story-indicator-progress {
	background-color: var(--color-indicator-progress);
	position: absolute;
	top: calc(50% - 1px);
	width: calc(100% - var(--unit)*.6*2)
}
@media screen and (min-width:768px) {
	.call-story-indicator-progress {
		height: calc(var(--unit)*.2);
		left: calc(var(--unit)*.6)
	}
}
@media screen and (max-width:767px) {
	.call-story-indicator-progress {
		height: calc(var(--unit)*.2);
		left: calc(var(--unit)*.6)
	}
}
.call-story-indicator-progress:before {
	background-color: var(--color-blue);
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	transform: scaleX(var(--progress, 0));
	transform-origin: left center;
	width: 100%
}
@media screen and (min-width:768px) {
	.call-story-indicator-progress:before {
		transition: transform .4s var(--ease-sense-out)
	}
}
.call-graphic {
	height: 100%;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1
}
@media screen and (min-width:768px) {
	.call-graphic-bg {
		--graphic-bg-width: max(calc(var(--visible-height)*2880/1620), var(--vw));
		--graphic-bg-height: calc(var(--graphic-bg-width)*1620/2880);
		bottom: 0;
		height: var(--graphic-bg-height);
		left: calc(50% - var(--graphic-bg-width)/2);
		position: absolute;
		width: var(--graphic-bg-width)
	}
}
@media screen and (max-width:767px) {
	.call-graphic-bg {
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%
	}
}
.call-graphic-bg-image img {
	object-fit: cover
}
.call-graphic-bg-image img, .call-graphic-world {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%
}
.call-graphic-front, .call-graphic-talk-left-person, .call-graphic-talk-right-person, .call-graphic-walk {
	opacity: 0
}
.call-graphic-front {
	position: absolute
}
@media screen and (min-width:768px) {
	.call-graphic-front {
		left: calc(50% + var(--unit)*16.2);
		width: calc(var(--unit)*26.6)
	}
}
@media screen and (min-width:768px) and (height >=780px) {
	.call-graphic-front {
		bottom: calc(var(--unit)*9)
	}
}
@media screen and (min-width:768px) and (height <=779px) {
	.call-graphic-front {
		top: calc(50% - var(--unit)*30.8)
	}
}
@media screen and (max-width:767px) {
	.call-graphic-front {
		left: calc(50% - var(--unit)*6.2);
		top: calc(50% - var(--unit)*5.5);
		width: calc(var(--unit)*23.2)
	}
}
.call-graphic-front-clear {
	opacity: 0;
	position: absolute;
	right: 30.5%;
	top: 10.4%;
	transition: opacity 80ms ease;
	width: 5%;
	will-change: opacity
}
.call-graphic-talk {
	position: absolute;
	transform-origin: left top
}
@media screen and (min-width:768px) {
	.call-graphic-talk {
		height: calc(var(--unit)*50);
		left: calc(50% - var(--unit)*24.8);
		width: calc(var(--unit)*50)
	}
}
@media screen and (min-width:768px) and (height >=780px) {
	.call-graphic-talk {
		bottom: calc(var(--unit)*17)
	}
}
@media screen and (min-width:768px) and (height <=779px) {
	.call-graphic-talk {
		top: calc(50% - var(--unit)*16.2)
	}
}
@media screen and (max-width:767px) {
	.call-graphic-talk {
		height: calc(var(--unit)*30);
		left: calc(50% - var(--unit)*22.5);
		top: calc(50% + var(--unit)*3.4);
		width: calc(var(--unit)*30)
	}
}
.call-graphic-talk-left {
	left: 0;
	position: absolute
}
@media screen and (min-width:768px) {
	.call-graphic-talk-left {
		width: calc(var(--unit)*18.6)
	}
}
@media screen and (min-width:768px) and (height >=780px) {
	.call-graphic-talk-left {
		bottom: 0
	}
}
@media screen and (min-width:768px) and (height <=779px) {
	.call-graphic-talk-left {
		top: 0
	}
}
@media screen and (max-width:767px) {
	.call-graphic-talk-left {
		top: 0;
		width: calc(var(--unit)*9.2)
	}
}
.call-graphic-talk-right {
	position: absolute
}
@media screen and (min-width:768px) {
	.call-graphic-talk-right {
		left: calc(var(--unit)*17.4);
		width: calc(var(--unit)*18.5)
	}
}
@media screen and (min-width:768px) and (height >=780px) {
	.call-graphic-talk-right {
		bottom: 0
	}
}
@media screen and (min-width:768px) and (height <=779px) {
	.call-graphic-talk-right {
		top: 0
	}
}
@media screen and (max-width:767px) {
	.call-graphic-talk-right {
		left: calc(var(--unit)*8.7);
		top: calc(var(--unit)*-.5);
		width: calc(var(--unit)*9.2)
	}
}
.call-graphic-talk-noise-01 {
	left: -11.4%;
	top: -3.1%;
	width: 30%
}
.call-graphic-talk-noise-02 {
	left: 12.7%;
	top: -13.2%;
	width: 17%
}
@media screen and (max-width:767px) {
	.call-graphic-talk-noise-02 {
		left: 40%
	}
}
.call-graphic-talk-noise-03 {
	left: 64.7%;
	top: -10%;
	width: 23.2%
}
.call-graphic-talk-noise-04 {
	left: 18%;
	top: -16.6%;
	width: 18.5%
}
.call-graphic-talk-noise-05 {
	left: 58.5%;
	top: -14.5%;
	width: 27.4%
}
.call-graphic-walk {
	position: absolute
}
@media screen and (min-width:768px) {
	.call-graphic-walk {
		left: calc(50% + var(--unit)*47);
		width: calc(var(--unit)*19.6)
	}
}
@media screen and (min-width:768px) and (height >=780px) {
	.call-graphic-walk {
		bottom: calc(var(--unit)*21.1)
	}
}
@media screen and (min-width:768px) and (height <=779px) {
	.call-graphic-walk {
		top: calc(50% - var(--unit)*8)
	}
}
@media screen and (max-width:767px) {
	.call-graphic-walk {
		left: calc(50% + var(--unit)*14);
		top: calc(50% + var(--unit)*4.5);
		width: calc(var(--unit)*9.8)
	}
	.call-graphic-car-noise-01, .call-graphic-car-noise-02, .call-graphic-car-noise-03 {
		display: none
	}
}
.call-graphic-car-noise-01 {
	bottom: 34.9%;
	right: 84.7%;
	width: calc(var(--unit)*4.8)
}
.call-graphic-car-noise-02 {
	bottom: 39.9%;
	right: 84.5%;
	width: calc(var(--unit)*5.3)
}
.call-graphic-car-noise-03 {
	bottom: 41.8%;
	right: 82.1%;
	width: calc(var(--unit)*3.4)
}
.call-voice {
	--voice-change-duration: 1200ms;
	position: absolute;
	transition: width var(--voice-change-duration) var(--ease-sense-out), height var(--voice-change-duration) var(--ease-sense-out), transform var(--voice-change-duration) var(--ease-sense-out)
}
@media screen and (min-width:768px) {
	.call-voice {
		bottom: calc(50% - var(--unit)*8.7);
		height: calc(var(--unit)*34);
		left: calc(50% + var(--unit)*32.5);
		width: calc(var(--unit)*34)
	}
}
@media screen and (min-width:768px) and (height >=780px) {
	.call-voice {
		bottom: calc(var(--unit)*34)
	}
}
@media screen and (min-width:1440px) {
	.call-voice {
		left: calc(50% + var(--unit)*32.5 + var(--max-width-extra, 0)*.3)
	}
}
@media screen and (max-width:767px) {
	.call-voice {
		bottom: calc(50% - var(--unit)*20.3);
		height: calc(var(--unit)*20);
		right: calc(var(--unit)*-1.7);
		width: calc(var(--unit)*20)
	}
}
.call-voice.is-active .call-voice-audio, .call-voice.is-active .call-voice-bg {
	opacity: 1;
	transform: scale(1);
	transition: visibility 0s, opacity .14s linear, transform .5s var(--ease-pop-out);
	visibility: visible
}
.call-voice.is-active .call-voice-audio {
	transition-delay: .16s
}
.call-voice-audio, .call-voice-bg {
	opacity: 0;
	transform: scale(.7);
	transition: visibility 0s .2s, transform 0s .2s, opacity .2s ease;
	visibility: hidden;
	will-change: transform
}
.call-voice-audio:focus-visible, .call-voice-bg:focus-visible {
	outline: auto;
	outline: auto -webkit-focus-ring-color
}
.call-voice-audio {
	transition: visibility 0s .14s, transform 0s .14s, opacity .14s var(--ease-none)
}
.call-voice-bg {
	background-color: var(--color-blue);
	height: 100%;
	left: 0;
	mask-size: contain;
	position: absolute;
	top: 0;
	width: 100%
}
@media screen and (min-width:768px) {
	.call-voice-bg {
		mask-image: url(/k-tai/products/aquos-sense10/images/call_voice_shape_pc.svg)
	}
}
@media screen and (max-width:767px) {
	.call-voice-bg {
		mask-image: url(/k-tai/products/aquos-sense10/images/call_voice_shape_sp.svg)
	}
}
.call-voice-wave {
	left: 0;
	position: absolute;
	width: 100%
}
@media screen and (min-width:768px) {
	.call-voice-wave {
		top: calc(var(--unit)*2)
	}
}
@media screen and (max-width:767px) {
	.call-voice-wave {
		top: calc(var(--unit)*2)
	}
}
.call-voice-illust {
	position: absolute;
	transition: width var(--voice-change-duration) var(--ease-sense-out), transform var(--voice-change-duration) var(--ease-sense-out)
}
@media screen and (min-width:768px) {
	.call-voice-illust {
		left: calc(var(--unit)*-.7);
		top: calc(var(--unit)*3);
		width: calc(var(--unit)*31.1)
	}
}
@media screen and (max-width:767px) {
	.call-voice-illust {
		left: calc(var(--unit)*-.6);
		top: calc(var(--unit)*1.7);
		width: calc(var(--unit)*18.3)
	}
}
.call-voice-illust-inner {
	display: grid;
	transform-origin: 20% 80%;
	will-change: transform
}
.call-voice-illust-clear, .call-voice-illust-default {
	grid-area: 1/1
}
.call-voice-illust-clear {
	opacity: 0;
	transition: opacity 80ms ease
}
.call-voice-balloon {
	background-color: var(--color-white);
	border-radius: var(--border-radius-full);
	font-weight: var(--font-weight-medium);
	opacity: 0;
	position: absolute;
	transform: scale(.8);
	transform-origin: right bottom;
	transition: visibility 0s .16s, transform .16s var(--ease-pop-in), opacity .16s var(--ease-none);
	visibility: hidden;
	width: max-content;
	will-change: transform
}
@media screen and (min-width:768px) {
	.call-voice-balloon {
		left: calc(50% - var(--unit)*25.2);
		padding: calc(var(--unit)*2.6) calc(var(--unit)*4);
		top: calc(var(--unit)*-5.5)
	}
}
@media screen and (max-width:767px) {
	.call-voice-balloon {
		font-size: calc(var(--unit)*1.2);
		left: 0;
		margin: 0 auto;
		padding: calc(var(--unit)*.8) calc(var(--unit)*1.8);
		right: 0;
		top: calc(var(--unit)*-3.7)
	}
}
.call-voice-balloon.is-active {
	opacity: 1;
	transform: scale(1);
	transition: visibility 0s, opacity .14s var(--ease-none), transform .5s var(--ease-pop-out);
	transition-delay: .32s;
	visibility: visible
}
@media screen and (min-width:768px) {
	.call-voice-balloon-02 {
		left: calc(50% - var(--unit)*29.6);
		top: calc(var(--unit)*-1.5)
	}
}
@media screen and (max-width:767px) {
	.call-voice-balloon-02 {
		font-size: calc(var(--unit)*1.3)
	}
}
.call-voice-audio {
	left: 0;
	margin: 0 auto;
	padding: 0;
	position: absolute;
	right: 0
}
@media screen and (min-width:768px) {
	.call-voice-audio {
		bottom: calc(var(--unit)*-1.4);
		/*width: calc(var(--unit)*18)*/
		width: calc(var(--unit)*16);
	}
}
@media screen and (max-width:767px) {
	.call-voice-audio {
		bottom: calc(var(--unit)*-1.8);
		/*width: calc(var(--unit)*15.8)*/
		width: calc(var(--unit)*12.8);
	}
}
.call-voice-audio.is-playing .call-voice-audio-icon {
	background-color: var(--color-pink)
}
.call-voice-audio.is-playing .call-voice-audio-icon-play, .call-voice-audio.is-playing .call-voice-audio-text-play {
	visibility: hidden
}
.call-voice-audio.is-playing .call-voice-audio-icon-pause, .call-voice-audio.is-playing .call-voice-audio-text-pause {
	visibility: visible
}
.call-voice-audio.can-play .call-voice-audio-attention:after, .call-voice-audio.can-play .call-voice-audio-attention:before {
	animation: call-ripple-button 1.5s .4s var(--ease-relax) infinite
}
.call-voice-audio.can-play .call-voice-audio-attention:after {
	animation-delay: .6s
}
@media screen and (min-width:768px) {
	.call-voice-audio-attention {
		--scale-size: calc(var(--unit)*6)
	}
}
@media screen and (max-width:767px) {
	.call-voice-audio-attention {
		--scale-size: calc(var(--unit)*4)
	}
}
.call-voice-audio-attention:after, .call-voice-audio-attention:before {
	background: var(--gradient-attention-button);
	border-radius: var(--border-radius-full);
	content: "";
	height: 100%;
	left: 50%;
	opacity: 0;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	will-change: width, height, transform, opacity
}
.call-voice-audio-inner {
	background-color: var(--color-white);
	column-gap: calc(var(--unit)*.8);
	justify-content: flex-end;
	padding: calc(var(--unit)*.8);
	transition: background-color .2s ease, transform .36s var(--ease-pop-out);
	width: 100%;
	will-change: transform;
	z-index: 1
}
.call-voice-audio-icon, .call-voice-audio-inner {
	align-items: center;
	display: flex;
	position: relative
}
.call-voice-audio-icon {
	background-color: var(--color-blue);
	border-radius: 50%;
	flex: none;
	justify-content: center
}
@media screen and (min-width:768px) {
	.call-voice-audio-icon {
		height: calc(var(--unit)*4.2);
		width: calc(var(--unit)*4.2)
	}
}
@media screen and (max-width:767px) {
	.call-voice-audio-icon {
		height: calc(var(--unit)*2.8);
		width: calc(var(--unit)*2.8)
	}
}
.call-voice-audio-icon-pause, .call-voice-audio-icon-play {
	align-items: center;
	display: flex;
	height: 100%;
	justify-content: center;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%
}
.call-voice-audio-icon-pause svg, .call-voice-audio-icon-play svg {
	fill: var(--color-white)
}
.call-voice-audio-icon-play svg {
	width: 50%
}
.call-voice-audio-icon-pause {
	visibility: hidden
}
.call-voice-audio-icon-pause svg {
	width: 50%
}
.call-voice-audio-text {
	display: grid;
	font-weight: var(--font-weight-medium);
	position: relative
}
@media screen and (min-width:768px) {
	.call-voice-audio-text {
		/*font-size: calc(var(--unit)*1.4)*/
		font-size: calc(var(--unit)*1.8);
		font-weight:600;
	}
}
@media screen and (max-width:767px) {
	.call-voice-audio-text {
		/*font-size: calc(var(--unit)*1.4)*/
		font-size: calc(var(--unit)*1.6)
	}
}
.call-voice-audio-text-pause, .call-voice-audio-text-play {
	grid-area: 1/1
}
.call-voice-audio-text-pause {
	visibility: hidden
}
.call-feature {
	background-position: top
}
@media screen and (min-width:768px) {
	.call-feature {
		background-repeat: repeat;
		background-size: calc(var(--unit)*192) auto
	}
	html.is-webp .call-feature {
		background-image: url(/k-tai/products/aquos-sense10/images/call_feature_bg_pc.webp)
	}
	html.is-webp.is-local .call-feature, html.no-webp .call-feature {
		background-image: url(/k-tai/products/aquos-sense10/images/call_feature_bg_pc.jpg)
	}
}
@media screen and (max-width:767px) {
	.call-feature {
		background-repeat: repeat-y;
		background-size: 100% auto
	}
	html.is-webp .call-feature {
		background-image: url(/k-tai/products/aquos-sense10/images/call_feature_bg_sp.webp)
	}
	html.is-webp.is-local .call-feature, html.no-webp .call-feature {
		background-image: url(/k-tai/products/aquos-sense10/images/call_feature_bg_sp.jpg)
	}
}
@media screen and (min-width:768px) {
	.call-feature-container {
		padding: calc(var(--unit)*19.7) var(--spacing-l) calc(var(--unit)*14.4)
	}
}
@media screen and (max-width:767px) {
	.call-feature-container {
		padding: calc(var(--unit)*12.5) 0 var(--spacing-xl)
	}
}
.call-feature-section {
	position: relative
}
@media screen and (min-width:768px) {
	.call-feature-section {
		display: flex
	}
}
.call-feature-section-01 {
	isolation: isolate
}
@media screen and (max-width:767px) {
	.call-feature-section-01 {
		padding-bottom: calc(var(--unit)*43.7)
	}
}
@media screen and (min-width:768px) {
	.call-feature-section-01 .call-feature-body {
		margin-left: auto;
		width: calc(var(--unit)*40.4)
	}
}
.call-feature-section-01 .call-feature-speaker {
	pointer-events: none;
	position: absolute;
	z-index: -1
}
@media screen and (min-width:768px) {
	.call-feature-section-01 .call-feature-speaker {
		right: calc(50% - var(--unit)*2.4);
		top: calc(var(--unit)*-12.3);
		width: calc(var(--unit)*60)
	}
}
@media screen and (max-width:767px) {
	.call-feature-section-01 .call-feature-speaker {
		bottom: calc(var(--unit)*4.3);
		right: 0;
		width: 100%
	}
}
.call-feature-section-01 .call-feature-speaker-shadow {
	position: absolute;
	z-index: -2
}
@media screen and (min-width:768px) {
	.call-feature-section-01 .call-feature-speaker-shadow {
		right: calc(50% - var(--unit)*6.9);
		top: calc(var(--unit)*3.8);
		width: calc(var(--unit)*59.9)
	}
}
@media screen and (max-width:767px) {
	.call-feature-section-01 .call-feature-speaker-shadow {
		bottom: calc(var(--unit)*2);
		right: calc(var(--unit)*2);
		width: calc(var(--unit)*33.4)
	}
}
.call-feature-section-02 {
	position: relative;
	z-index: 1
}
@media screen and (min-width:768px) {
	.call-feature-section-02 {
		margin-top: calc(var(--unit)*26.1)
	}
}
@media screen and (max-width:767px) {
	.call-feature-section-02 {
		margin-top: calc(var(--unit)*5)
	}
}
@media screen and (min-width:768px) {
	.call-feature-section-02 .call-feature-body {
		flex: none;
		margin-left: calc(var(--unit)*7.2);
		width: calc(var(--unit)*43.2)
	}
	.call-feature-section-02 .call-feature-media {
		column-gap: calc(var(--unit)*3.2);
		display: flex
	}
}
@media screen and (max-width:767px) {
	.call-feature-section-02 .call-feature-media {
		margin-top: calc(var(--unit)*5.5)
	}
	.call-feature-body {
		padding: 0 var(--spacing-m)
	}
}
@media screen and (min-width:768px) {
	.call-feature-player {
		flex: none;
		width: calc(var(--unit)*30.8)
	}
}
@media screen and (max-width:767px) {
	.call-feature-player {
		margin-left: auto;
		margin-right: auto;
		width: calc(var(--unit)*32)
	}
}
.call-feature-player.is-playing .call-feature-player-button-icon-play {
	visibility: hidden
}
.call-feature-player.is-playing .call-feature-player-button-icon-pause {
	visibility: visible
}
.call-feature-player.is-playing .call-feature-player-slide.is-active .call-feature-player-attention div {
	animation: call-ripple 1.6s .3s var(--ease-relax) infinite
}
.call-feature-player.is-playing .call-feature-player-slide.is-active .call-feature-player-attention div:nth-child(2) {
	animation-delay: .5s
}
.call-feature-player.is-playing .call-feature-player-poster {
	opacity: 0;
	pointer-events: none;
	transition: opacity .4s ease, visibility 0s .4s;
	visibility: hidden
}
@media screen and (min-width:768px) {
	.call-feature-player:first-child {
		margin-top: calc(var(--unit)*-4.5)
	}
}
.call-feature-player:first-child .call-feature-player-slide:first-child .call-feature-player-attention {
	left: 17.1%;
	top: 89.3%
}
@media screen and (min-width:768px) {
	.call-feature-player:nth-child(2) {
		margin-top: calc(var(--unit)*-10.9)
	}
}
@media screen and (max-width:767px) {
	.call-feature-player:nth-child(2) {
		margin-left: var(--spacing-m);
		margin-top: calc(var(--unit)*6.4)
	}
}
.call-feature-player:nth-child(2) .call-feature-player-slide:nth-child(3) .call-feature-player-attention {
	left: 76.8%;
	top: 58.8%
}
.call-feature-player-container {
	background-color: var(--color-black-2);
	border-radius: var(--border-radius-m);
	overflow: hidden;
	position: relative
}
@media screen and (min-width:768px) {
	.call-feature-player-container {
		padding: calc(var(--unit)*3.9) 0 calc(var(--unit)*1.9)
	}
}
@media screen and (max-width:767px) {
	.call-feature-player-container {
		padding: calc(var(--unit)*4) 0 calc(var(--unit)*2.2)
	}
}
.call-feature-player-screen {
	margin: 0 auto;
	position: relative
}
@media screen and (min-width:768px) {
	.call-feature-player-screen {
		width: calc(var(--unit)*17.8)
	}
}
@media screen and (max-width:767px) {
	.call-feature-player-screen {
		width: calc(var(--unit)*18.5)
	}
}
.call-feature-player-camera {
	left: 0;
	margin: 0 auto;
	position: absolute;
	z-index: 2
}
@media screen and (min-width:768px) {
	.call-feature-player-camera {
		right: calc(var(--unit)*.2);
		top: calc(var(--unit)*1.7);
		width: calc(var(--unit)*1.1)
	}
}
@media screen and (max-width:767px) {
	.call-feature-player-camera {
		right: calc(var(--unit)*.3);
		top: calc(var(--unit)*1.7);
		width: calc(var(--unit)*1.1)
	}
}
.call-feature-player-text {
	display: grid;
	text-align: center
}
@media screen and (min-width:768px) {
	.call-feature-player-text {
		font-size: calc(var(--unit)*1.2);
		margin-top: calc(var(--unit)*1.9)
	}
}
@media screen and (max-width:767px) {
	.call-feature-player-text {
		font-size: calc(var(--unit)*1.3);
		margin-top: calc(var(--unit)*2)
	}
}
.call-feature-player-text-item {
	grid-area: 1/1;
	opacity: 0;
	transition: opacity .3s ease
}
.call-feature-player-text-item.is-active {
	opacity: 1
}
.call-feature-player-frame {
	background-color: var(--color-white);
	display: grid;
	position: absolute
}
@media screen and (min-width:768px) {
	.call-feature-player-frame {
		border-radius: calc(var(--unit)*1.4);
		left: calc(var(--unit)*1);
		top: calc(var(--unit)*1.2);
		width: calc(var(--unit)*15.6)
	}
}
@media screen and (max-width:767px) {
	.call-feature-player-frame {
		border-radius: calc(var(--unit)*1.4);
		left: calc(var(--unit)*1.1);
		top: calc(var(--unit)*1.3);
		width: calc(var(--unit)*16.2)
	}
}
.call-feature-player-slide {
	grid-area: 1/1;
	opacity: 0
}
@media screen and (min-width:768px) {
	.call-feature-player-slide img {
		border-radius: calc(var(--unit)*1.4)
	}
}
@media screen and (max-width:767px) {
	.call-feature-player-slide img {
		border-radius: calc(var(--unit)*1.4)
	}
}
.call-feature-player-nav {
	display: flex;
	justify-content: center
}
@media screen and (min-width:768px) {
	.call-feature-player-nav {
		margin-top: calc(var(--unit)*1.8)
	}
}
@media screen and (max-width:767px) {
	.call-feature-player-nav {
		margin-top: calc(var(--unit)*1.8)
	}
}
.call-feature-player-nav-item {
	align-items: center;
	appearance: none;
	background-color: initial;
	border-radius: 50%;
	cursor: pointer;
	display: inline-flex;
	flex: none;
	height: 24px;
	justify-content: center;
	padding: 0;
	position: relative;
	transition: opacity .2s ease;
	width: 24px
}
.call-feature-player-nav-item:focus-visible {
	outline: 2px solid var(--color-black)
}
.call-feature-player-nav-item:not(.is-active) {
	opacity: .6
}
.call-feature-player-nav-item.is-active {
	opacity: 1
}
.call-feature-player-nav-item:after {
	background-color: var(--color-black-20);
	border-radius: 50%;
	content: "";
	height: 6px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: background-color .2s ease;
	width: 6px
}
.call-feature-player-nav-item.is-active:after {
	background-color: var(--color-black)
}
.call-feature-player-nav-item-indicator {
	display: block;
	height: 16px;
	transform: rotate(-90deg);
	width: 16px
}
.call-feature-player-nav-item-indicator-progress {
	fill: none;
	stroke: var(--color-black-20);
	stroke-width: 2;
	stroke-linecap: round
}
.call-feature-player-attention {
	position: absolute;
	transform: translate(-50%, -50%)
}
@media screen and (min-width:768px) {
	.call-feature-player-attention {
		height: calc(var(--unit)*6.4);
		width: calc(var(--unit)*6.4)
	}
}
@media screen and (max-width:767px) {
	.call-feature-player-attention {
		height: calc(var(--unit)*6.4);
		width: calc(var(--unit)*6.4)
	}
}
.call-feature-player-attention div {
	background: var(--gradient-attention);
	border-radius: 50%;
	height: 100%;
	left: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	width: 100%
}
.call-feature-player-button, .call-feature-player-label {
	background-color: var(--color-white);
	border-radius: var(--border-radius-full);
	font-weight: var(--font-weight-medium);
	line-height: var(--leading-none);
	margin-left: auto;
	margin-right: auto;
	width: max-content
}
@media screen and (min-width:768px) {
	.call-feature-player-button, .call-feature-player-label {
		font-size: calc(var(--unit)*1.4);
		margin-top: calc(var(--unit)*1.6)
	}
}
@media screen and (max-width:767px) {
	.call-feature-player-button, .call-feature-player-label {
		font-size: calc(var(--unit)*1.4);
		margin-top: calc(var(--unit)*2)
	}
}
@media screen and (min-width:768px) {
	.call-feature-player-label {
		display: none
	}
}
@media screen and (max-width:767px) {
	.call-feature-player-label {
		padding: calc(var(--unit)*1.3) calc(var(--unit)*1.6)
	}
	.call-feature-player-button {
		display: none
	}
}
@media screen and (min-width:768px) {
	.call-feature-player-button {
		padding: calc(var(--unit)*.8) calc(var(--unit)*.8) calc(var(--unit)*.8) calc(var(--unit)*1.6)
	}
	.call-feature-player-button-icon {
		background-color: var(--color-black);
		position: relative
	}
	.call-feature-player-button-icon-pause, .call-feature-player-button-icon-play {
		align-items: center;
		display: flex;
		height: 100%;
		justify-content: center;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%
	}
	.call-feature-player-button-icon-pause svg, .call-feature-player-button-icon-play svg {
		fill: var(--color-white)
	}
	.call-feature-player-button-icon-pause {
		visibility: hidden
	}
	.call-feature-player-poster {
		align-items: center;
		background-color: var(--color-black-2);
		display: flex;
		height: 100%;
		justify-content: center;
		left: 0;
		position: absolute;
		top: 0;
		transition: opacity .4s ease, visibility 0s;
		width: 100%;
		z-index: 3
	}
	.call-feature-player-poster-image {
		width: calc(var(--unit)*20.5)
	}
}
@media screen and (max-width:767px) {
	.call-feature-player-poster {
		display: none
	}
}
.camera {
	background-color: var(--color-pink-light);
	background-position: top
}
@media screen and (min-width:768px) {
	.camera {
		background-repeat: repeat;
		background-size: calc(var(--unit)*192) auto
	}
	html.is-webp .camera {
		background-image: url(/k-tai/products/aquos-sense10/images/camera_bg_pc.webp)
	}
	html.is-webp.is-local .camera, html.no-webp .camera {
		background-image: url(/k-tai/products/aquos-sense10/images/camera_bg_pc.jpg)
	}
}
@media screen and (max-width:767px) {
	.camera {
		background-repeat: repeat-y;
		background-size: 100% auto
	}
	html.is-webp .camera {
		background-image: url(/k-tai/products/aquos-sense10/images/camera_bg_sp.webp)
	}
	html.is-webp.is-local .camera, html.no-webp .camera {
		background-image: url(/k-tai/products/aquos-sense10/images/camera_bg_sp.jpg)
	}
}
.camera-intro {
	--camera-intro-pin: 0
}
@media screen and (min-width:768px) {
	.camera-intro-illust {
		transition: opacity .12s ease
	}
	.camera-intro.is-hidden .camera-intro-illust {
		opacity: 0
	}
}
.camera-intro .c-badge {
	--index: 0;
	background-color: var(--color-pink)
}
@media screen and (min-width:768px) {
	.camera-intro-container {
		padding: var(--spacing-l) var(--spacing-l) calc(var(--unit)*14);
		position: sticky;
		top: var(--camera-intro-pin, 0)
	}
}
@media screen and (max-width:767px) {
	.camera-intro-container {
		overflow: hidden;
		padding: var(--spacing-xl) 0 calc(var(--unit)*12);
		position: relative
	}
	.camera-intro-summary {
		margin-right: var(--spacing-m);
		padding-left: var(--spacing-m)
	}
}
.camera-intro-heading {
	--index: 1;
	letter-spacing: var(--tracking-base)
}
@media screen and (min-width:768px) {
	.camera-intro-heading {
		font-size: calc(var(--unit)*6.8);
		line-height: var(--leading-half);
		margin-top: calc(var(--unit)*1.8)
	}
}
@media screen and (max-width:767px) {
	.camera-intro-heading {
		font-size: calc(var(--unit)*3.6);
		margin-top: calc(var(--unit)*3.3)
	}
}
.camera-intro-description {
	--index: 2;
	letter-spacing: var(--tracking-wide);
	line-height: var(--leading-wide)
}
@media screen and (min-width:768px) {
	.camera-intro-description {
		font-size: calc(var(--unit)*1.6);
		margin-top: calc(var(--unit)*3.9)
	}
}
@media screen and (max-width:767px) {
	.camera-intro-description {
		font-size: calc(var(--unit)*1.5);
		margin-top: calc(var(--unit)*2.8)
	}
}
.camera-intro-illust {
	--index: 3;
	position: absolute
}
@media screen and (min-width:768px) {
	.camera-intro-illust {
		left: calc(50% + var(--unit)*21);
		top: calc(var(--unit)*14.5);
		width: calc(var(--unit)*34)
	}
}
@media screen and (max-width:767px) {
	.camera-intro-illust {
		right: calc(var(--unit)*-1.8);
		top: calc(var(--unit)*35.2);
		width: calc(var(--unit)*20.8)
	}
}
.camera-intro-removal {
	display: grid;
	position: relative;
	transition: grid-template-columns .64s var(--ease-sense);
	z-index: 1
}
@media screen and (min-width:768px) {
	.camera-intro-removal {
		align-items: center;
		column-gap: calc(var(--unit)*.2);
		grid-template-columns: 1fr 1fr 1fr;
		margin: calc(var(--unit)*10.2) calc(var(--spacing-m)*-1) 0
	}
	.camera-intro-removal[data-section="1"] {
		grid-template-columns: 1.3fr 1fr 1fr
	}
	.camera-intro-removal[data-section="2"] {
		grid-template-columns: 1fr 1.3fr 1fr
	}
	.camera-intro-removal[data-section="3"] {
		grid-template-columns: 1fr 1fr 1.3fr
	}
}
@media screen and (max-width:767px) {
	.camera-intro-removal {
		margin-right: var(--spacing-s);
		margin-top: calc(var(--unit)*8.7);
		padding-left: var(--spacing-s);
		row-gap: calc(var(--unit)*5.6)
	}
}
.camera-intro-removal-section {
	--progress: -1%;
	position: relative
}
.camera-intro-removal-images {
	border-radius: var(--border-radius-m);
	display: grid;
	overflow: hidden;
	position: relative
}
.camera-intro-removal-images:after {
	background-color: var(--color-white);
	content: "";
	height: 100%;
	left: var(--progress);
	position: absolute;
	top: 0;
	width: 1px
}
.camera-intro-removal-image {
	grid-area: 1/1
}
.camera-intro-removal-image-after {
	clip-path: polygon(0 0, var(--progress) 0, var(--progress) 100%, 0 100%)
}
.camera-intro-removal-body {
	align-items: center;
	display: flex;
	flex-direction: column;
	position: relative;
	text-align: center;
	width: 100%;
	z-index: 1
}
@media screen and (min-width:768px) {
	.camera-intro-removal-body {
		margin-top: calc(var(--unit)*-2.2)
	}
}
@media screen and (max-width:767px) {
	.camera-intro-removal-body {
		margin-top: calc(var(--unit)*-2.1)
	}
}
.camera-intro-removal-heading {
	background-color: var(--color-white);
	border-radius: var(--border-radius-full);
	font-weight: var(--font-weight-medium);
	line-height: var(--leading-none);
	width: max-content
}
@media screen and (min-width:768px) {
	.camera-intro-removal-heading {
		font-size: calc(var(--unit)*1.6);
		padding: calc(var(--unit)*1.4) calc(var(--unit)*2.4)
	}
}
@media screen and (max-width:767px) {
	.camera-intro-removal-heading {
		font-size: calc(var(--unit)*1.4);
		padding: calc(var(--unit)*1.4) calc(var(--unit)*2.1)
	}
}
.camera-intro-removal-description {
	letter-spacing: var(--tracking-base)
}
@media screen and (min-width:768px) {
	.camera-intro-removal-description {
		font-size: calc(var(--unit)*1.6);
		margin-top: calc(var(--unit)*1.8)
	}
}
@media screen and (max-width:767px) {
	.camera-intro-removal-description {
		font-size: calc(var(--unit)*1.4);
		line-height: var(--leading-wide);
		margin-top: calc(var(--unit)*1.4)
	}
}
@media screen and (min-width:768px) {
	.camera-engine {
		height: calc(var(--unit)*350)
	}
}
@media screen and (max-width:767px) {
	.camera-engine {
		position: relative
	}
}
@media screen and (min-width:768px) {
	.camera-engine-viewport {
		height: var(--visible-height);
		overflow: hidden;
		position: relative;
		position: sticky;
		top: var(--header-nav-height)
	}
}
@media screen and (max-width:767px) {
	.camera-engine-viewport {
		display: contents
	}
}
.camera-engine-photo {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%
}
@media screen and (max-width:767px) {
	.camera-engine-photo-figure {
		position: sticky;
		top: var(--header-nav-height)
	}
}
.camera-engine-photo-figure img {
	object-fit: cover
}
@media screen and (min-width:768px) {
	.camera-engine-photo-figure img {
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%
	}
}
@media screen and (max-width:767px) {
	.camera-engine-photo-figure img {
		height: var(--visible-height)
	}
}
.camera-engine-photo-overlay {
	background-color: rgb(var(--color-black-rgb), .8);
	height: 100%;
	left: 0;
	opacity: 1;
	position: absolute;
	top: 0;
	width: 100%
}
@media screen and (min-width:768px) {
	.camera-engine-photo-overlay {
		transition: opacity .6s var(--ease-power3-out)
	}
}
.camera-engine-frame {
	color: var(--color-white);
	z-index: 1
}
@media screen and (min-width:768px) {
	.camera-engine-frame {
		align-items: center;
		display: flex;
		flex-direction: column;
		height: 100%;
		justify-content: center;
		left: 0;
		padding: calc(var(--unit)*16) 0 calc(var(--unit)*16.4);
		position: absolute;
		top: 0;
		width: 100%
	}
}
@media screen and (max-width:767px) {
	.camera-engine-frame {
		padding: calc(var(--unit)*120) 0 var(--spacing-xl)
	}
}
.camera-engine-frame.is-active .camera-engine-body, .camera-engine-frame.is-active .camera-engine-pro {
	opacity: 1;
	transform: translate(0, 0);
	transition: opacity .2s linear, transform .96s var(--ease-sense-out)
}
.camera-engine-frame.is-active .camera-engine-pro {
	transition-delay: 80ms
}
.camera-engine-body {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	opacity: 0;
	text-align: center;
	transition: opacity .2s linear, transform 0s .2s
}
@media screen and (min-width:768px) {
	.camera-engine-body {
		transform: translate(0, calc(var(--unit)*8));
		width: calc(var(--unit)*40)
	}
}
.camera-engine-hash {
	border-bottom: 1px solid;
	font-weight: var(--font-weight-medium);
	line-height: var(--leading-none)
}
@media screen and (min-width:768px) {
	.camera-engine-hash {
		padding-bottom: calc(var(--unit)*.4)
	}
}
@media screen and (max-width:767px) {
	.camera-engine-hash {
		padding-bottom: calc(var(--unit)*.5)
	}
}
.camera-engine-heading {
	letter-spacing: var(--tracking-base);
	white-space: nowrap
}
@media screen and (min-width:768px) {
	.camera-engine-heading {
		font-size: calc(var(--unit)*4);
		margin-top: calc(var(--unit)*3.3)
	}
}
@media screen and (max-width:767px) {
	.camera-engine-heading {
		font-size: calc(var(--unit)*2.8);
		margin-top: calc(var(--unit)*2.6)
	}
}
.camera-engine-description {
	font-weight: var(--font-weight-medium);
	line-height: var(--leading-wide);
	white-space: nowrap
}
@media screen and (min-width:768px) {
	.camera-engine-description {
		font-size: calc(var(--unit)*1.6);
		margin-top: calc(var(--unit)*2.6)
	}
}
@media screen and (max-width:767px) {
	.camera-engine-description {
		font-size: calc(var(--unit)*1.5);
		margin-top: calc(var(--unit)*1.7)
	}
}
.camera-engine-pro {
	align-items: center;
	background-color: rgb(var(--color-black-rgb), .5);
	border: 1px solid rgb(var(--color-white-rgb), .2);
	border-radius: var(--border-radius-m);
	display: flex;
	flex-direction: column;
	opacity: 0;
	text-align: center;
	transition: opacity .2s linear, transform 0s .2s
}
@media screen and (min-width:768px) {
	.camera-engine-pro {
		margin-top: calc(var(--unit)*7.3);
		padding: calc(var(--unit)*4.6) calc(var(--unit)*4.8) calc(var(--unit)*3.8);
		transform: translate(0, calc(var(--unit)*8))
	}
}
@media screen and (max-width:767px) {
	.camera-engine-pro {
		margin-left: var(--spacing-s);
		margin-right: var(--spacing-s);
		margin-top: calc(var(--unit)*11.9);
		padding: calc(var(--unit)*5.2) calc(var(--unit)*3) calc(var(--unit)*4.3)
	}
}
@media screen and (min-width:768px) {
	.camera-engine-pro-logo {
		width: calc(var(--unit)*15.7)
	}
}
@media screen and (max-width:767px) {
	.camera-engine-pro-logo {
		width: calc(var(--unit)*18)
	}
}
.camera-engine-pro-description {
	line-height: var(--leading-wide);
	white-space: nowrap
}
@media screen and (min-width:768px) {
	.camera-engine-pro-description {
		font-size: calc(var(--unit)*1.4);
		margin-top: calc(var(--unit)*2.6)
	}
}
@media screen and (max-width:767px) {
	.camera-engine-pro-description {
		font-size: calc(var(--unit)*1.3);
		margin-top: calc(var(--unit)*2.8)
	}
}
@media screen and (min-width:768px) {
	.camera-engine-pro-note {
		font-size: calc(var(--unit)*1.2);
		margin-top: calc(var(--unit)*2.4)
	}
}
@media screen and (max-width:767px) {
	.camera-engine-pro-note {
		font-size: calc(var(--unit)*1);
		margin-top: calc(var(--unit)*2.8)
	}
}
.camera-gallery-container {
	overflow: hidden
}
.camera-gallery-list, .camera-gallery-row {
	display: flex;
	width: max-content
}
.camera-gallery-list img {
	--webkit-user-drag: none;
	-webkit-user-select: none;
	user-select: none
}
@media screen and (min-width:768px) {
	.camera-gallery-list img {
		width: calc(var(--unit-vw)*56)
	}
}
@media screen and (max-width:767px) {
	.camera-gallery-list img {
		width: calc(var(--unit)*25.3)
	}
}
.camera-feature-container {
	overflow: hidden
}
@media screen and (min-width:768px) {
	.camera-feature-container {
		padding: calc(var(--unit)*21.7) var(--spacing-l) var(--spacing-l)
	}
}
@media screen and (max-width:767px) {
	.camera-feature-container {
		padding: calc(var(--unit)*12.6) var(--spacing-m) var(--spacing-xl)
	}
}
.camera-feature-spacer {
	height: var(--camera-feature-spacer)
}
.camera-feature-section {
	position: relative
}
@media screen and (min-width:768px) {
	.camera-feature-section-01 {
		padding-bottom: calc(var(--unit)*32.7)
	}
}
@media screen and (max-width:767px) {
	.camera-feature-section-01 {
		padding-bottom: calc(var(--unit)*41.6)
	}
}
@media screen and (min-width:768px) {
	.camera-feature-section-02 {
		padding-bottom: calc(var(--unit)*35.3)
	}
}
@media screen and (max-width:767px) {
	.camera-feature-section-02 {
		padding-bottom: calc(var(--unit)*81.8)
	}
}
.camera-feature-section-02 .camera-feature-body {
	margin-left: auto
}
.camera-feature-section-02 .c-feature-heading {
	margin-right: -1.5em
}
@media screen and (min-width:768px) {
	.camera-feature-body {
		width: calc(var(--unit)*37.2)
	}
}
.camera-feature-player {
	pointer-events: none;
	position: absolute
}
@media screen and (min-width:768px) {
	.camera-feature-player {
		left: calc(50% - var(--unit)*20.9);
		top: calc(var(--unit)*-5.4)
	}
}
@media screen and (max-width:767px) {
	.camera-feature-player {
		bottom: calc(var(--unit)*5.1);
		left: calc(var(--unit)*-3.4)
	}
}
.camera-feature-player.is-active .camera-feature-player-view-after {
	opacity: 1
}
.camera-feature-player.is-active .camera-feature-player-label {
	opacity: 1;
	transform: translateY(0);
	transition: opacity .5s ease, transform .9s var(--ease-sense-out)
}
@media screen and (min-width:768px) {
	.camera-feature-player-container {
		width: calc(var(--unit)*92.9)
	}
}
@media screen and (max-width:767px) {
	.camera-feature-player-container {
		width: calc(var(--unit)*44.2)
	}
}
.camera-feature-player-poster {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1
}
.camera-feature-player-poster img {
	height: 100%;
	left: 0;
	object-fit: cover;
	position: absolute;
	top: 0;
	width: 100%
}
.camera-feature-player-view {
	position: absolute
}
@media screen and (min-width:768px) {
	.camera-feature-player-view {
		height: calc(var(--unit)*33);
		left: calc(var(--unit)*5.1);
		top: calc(var(--unit)*4.1);
		width: calc(var(--unit)*71.4)
	}
}
@media screen and (max-width:767px) {
	.camera-feature-player-view {
		height: calc(var(--unit)*15.6);
		left: calc(var(--unit)*2.3);
		top: calc(var(--unit)*2);
		width: calc(var(--unit)*34)
	}
}
.camera-feature-player-view-inner {
	display: grid;
	height: 100%;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 100%
}
@media screen and (min-width:768px) {
	.camera-feature-player-view-inner {
		border-radius: calc(var(--unit)*3)
	}
}
@media screen and (max-width:767px) {
	.camera-feature-player-view-inner {
		border-radius: calc(var(--unit)*1.5)
	}
}
.camera-feature-player-view-after, .camera-feature-player-view-before {
	grid-area: 1/1
}
.camera-feature-player-view-after {
	opacity: 0;
	transition: opacity .8s ease
}
.camera-feature-player-camera {
	position: absolute;
	z-index: 1
}
@media screen and (min-width:768px) {
	.camera-feature-player-camera {
		height: calc(var(--unit)*2.1);
		left: calc(var(--unit)*6.1);
		top: calc(var(--unit)*19.5);
		width: calc(var(--unit)*2.1)
	}
}
@media screen and (max-width:767px) {
	.camera-feature-player-camera {
		height: calc(var(--unit)*1);
		left: calc(var(--unit)*2.9);
		top: calc(var(--unit)*9.3);
		width: calc(var(--unit)*1)
	}
}
.camera-feature-player-label {
	display: flex;
	justify-content: center;
	opacity: 0;
	position: absolute;
	transition: opacity .4s ease, transform .4s var(--ease-power4-in)
}
@media screen and (min-width:768px) {
	.camera-feature-player-label {
		left: calc(var(--unit)*2.9);
		top: calc(var(--unit)*41.4);
		transform: translateY(calc(var(--unit)*4));
		width: calc(var(--unit)*75.6)
	}
}
@media screen and (max-width:767px) {
	.camera-feature-player-label {
		left: calc(var(--unit)*1.4);
		top: calc(var(--unit)*21);
		transform: translateY(calc(var(--unit)*2.4));
		width: calc(var(--unit)*36)
	}
}
.camera-feature-player-label-text {
	background-color: var(--color-white);
	border-radius: var(--border-radius-full);
	font-weight: var(--font-weight-medium);
	line-height: var(--leading-none)
}
@media screen and (min-width:768px) {
	.camera-feature-player-label-text {
		font-size: calc(var(--unit)*1.6);
		padding: calc(var(--unit)*1.2) calc(var(--unit)*2)
	}
}
@media screen and (max-width:767px) {
	.camera-feature-player-label-text {
		font-size: calc(var(--unit)*1.5);
		padding: calc(var(--unit)*1.4) calc(var(--unit)*2)
	}
}
.camera-feature-filter {
	display: flex;
	flex-wrap: wrap
}
@media screen and (min-width:768px) {
	.camera-feature-filter {
		column-gap: calc(var(--unit)*.6);
		margin-bottom: calc(var(--unit)*-.6);
		margin-top: calc(var(--unit)*3.6)
	}
}
@media screen and (max-width:767px) {
	.camera-feature-filter {
		column-gap: calc(var(--unit)*.4);
		margin-bottom: calc(var(--unit)*-.4);
		margin-top: calc(var(--unit)*3.6)
	}
}
.camera-feature-filter-item {
	background-color: var(--color-pink-lighter);
	border-radius: var(--border-radius-full);
	font-weight: var(--font-weight-medium);
	line-height: var(--leading-none)
}
@media screen and (min-width:768px) {
	.camera-feature-filter-item {
		font-size: calc(var(--unit)*1.3);
		margin-bottom: calc(var(--unit)*.6);
		padding: calc(var(--unit)*1) calc(var(--unit)*1.8)
	}
}
@media screen and (max-width:767px) {
	.camera-feature-filter-item {
		font-size: calc(var(--unit)*1.2);
		margin-bottom: calc(var(--unit)*.4);
		padding: calc(var(--unit)*.8) calc(var(--unit)*1.6)
	}
}
.camera-feature-filter-item-break {
	flex-basis: 100%;
	height: 0
}
.camera-feature-filter-trigger {
	height: 1px;
	left: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	width: 100%
}
@media screen and (min-width:768px) {
	.camera-feature-photo {
		margin-top: calc(var(--unit)*4.2)
	}
}
@media screen and (max-width:767px) {
	.camera-feature-photo {
		margin-top: calc(var(--unit)*4.2)
	}
}
.camera-feature-slider {
	position: absolute
}
@media screen and (min-width:768px) {
	.camera-feature-slider {
		left: 0;
		top: 0
	}
}
@media screen and (max-width:767px) {
	.camera-feature-slider {
		bottom: calc(var(--unit)*13.2);
		left: 0
	}
}
.camera-feature-slider-item {
	position: absolute;
	will-change: transform
}
@media screen and (min-width:768px) {
	.camera-feature-slider-item {
		left: calc(var(--unit)*19);
		top: calc(var(--unit)*-10.3);
		width: calc(var(--unit)*48.3)
	}
}
@media screen and (max-width:767px) {
	.camera-feature-slider-item {
		bottom: calc(var(--unit)*-7.4);
		left: calc(var(--unit)*1.7);
		width: calc(var(--unit)*40.2)
	}
}
.camera-feature-slider-item.is-active .camera-feature-slider-image:nth-child(2) {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	opacity: 1;
	transition: clip-path 1.4s var(--ease-sense), opacity 0s;
	transition-delay: .6s
}
.camera-feature-slider-images {
	display: grid;
	overflow: hidden;
	position: absolute
}
@media screen and (min-width:768px) {
	.camera-feature-slider-images {
		border-radius: calc(var(--unit)*2.6);
		left: calc(var(--unit)*3.9);
		top: calc(var(--unit)*3.3);
		width: calc(var(--unit)*26.2)
	}
}
@media screen and (max-width:767px) {
	.camera-feature-slider-images {
		border-radius: calc(var(--unit)*2);
		left: calc(var(--unit)*3.3);
		top: calc(var(--unit)*2.8);
		width: calc(var(--unit)*21.7)
	}
}
.camera-feature-slider-image {
	grid-area: 1/1;
	position: relative;
	will-change: opacity
}
.camera-feature-slider-image:nth-child(2) {
	clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
	opacity: 0;
	transition: opacity .3s linear, clip-path 0s .3s
}
.camera-feature-slider-front-camera {
	position: absolute
}
@media screen and (min-width:768px) {
	.camera-feature-slider-front-camera {
		left: calc(var(--unit)*17.9);
		top: calc(var(--unit)*4.5);
		width: calc(var(--unit)*1.9)
	}
}
@media screen and (max-width:767px) {
	.camera-feature-slider-front-camera {
		left: calc(var(--unit)*13.4);
		top: calc(var(--unit)*3.3);
		width: calc(var(--unit)*1.4)
	}
}
.camera-feature-caption {
	display: grid;
	position: absolute;
	z-index: 5
}
@media screen and (min-width:768px) {
	.camera-feature-caption {
		left: calc(var(--unit)*21.5);
		top: calc(var(--unit)*54.1);
		width: calc(var(--unit)*29)
	}
}
@media screen and (max-width:767px) {
	.camera-feature-caption {
		left: calc(var(--unit)*3.7);
		top: calc(100% - var(--unit)*22.6);
		width: calc(var(--unit)*24.3)
	}
}
.camera-feature-caption-item {
	align-items: center;
	display: flex;
	flex-direction: column;
	grid-area: 1/1;
	text-align: center;
	transition: visibility 0s .4s;
	visibility: hidden;
	will-change: transform
}
@media screen and (min-width:768px) {
	.camera-feature-caption-item {
		row-gap: calc(var(--unit)*1.6)
	}
}
@media screen and (max-width:767px) {
	.camera-feature-caption-item {
		row-gap: calc(var(--unit)*1.4)
	}
}
.camera-feature-caption-item.is-active {
	visibility: visible
}
.camera-feature-caption-item.is-active .camera-feature-caption-description, .camera-feature-caption-item.is-active .camera-feature-caption-name {
	opacity: 1;
	transform: translateY(0);
	transition: opacity .5s ease, transform .9s var(--ease-sense-out);
	transition-delay: .8s
}
.camera-feature-caption-item.is-active .camera-feature-caption-name {
	transition-delay: .8s
}
.camera-feature-caption-item.is-active .camera-feature-caption-description {
	transition-delay: .88s
}
.camera-feature-caption-description, .camera-feature-caption-name {
	opacity: 0;
	transition: opacity .4s ease, transform .4s var(--ease-power4-in)
}
@media screen and (min-width:768px) {
	.camera-feature-caption-description, .camera-feature-caption-name {
		transform: translateY(calc(var(--unit)*4.4))
	}
}
@media screen and (max-width:767px) {
	.camera-feature-caption-description, .camera-feature-caption-name {
		transform: translateY(calc(var(--unit)*2.4))
	}
}
.camera-feature-caption-name {
	background-color: var(--color-white);
	border-radius: var(--border-radius-full);
	font-weight: var(--font-weight-medium);
	line-height: var(--leading-none);
	text-align: center;
	white-space: nowrap
}
@media screen and (min-width:768px) {
	.camera-feature-caption-name {
		font-size: calc(var(--unit)*1.6);
		padding: calc(var(--unit)*1.2) calc(var(--unit)*1.9)
	}
}
@media screen and (max-width:767px) {
	.camera-feature-caption-name {
		font-size: calc(var(--unit)*1.3);
		padding: calc(var(--unit)*1.4) calc(var(--unit)*1.9)
	}
}
.camera-feature-caption-description {
	line-height: var(--leading-wide)
}
@media screen and (min-width:768px) {
	.camera-feature-caption-description {
		font-size: calc(var(--unit)*1.6)
	}
}
@media screen and (max-width:767px) {
	.camera-feature-caption-description {
		font-size: calc(var(--unit)*1.3)
	}
}
.camera-feature-card {
	display: grid
}
@media screen and (min-width:768px) {
	.camera-feature-card {
		column-gap: calc(var(--unit)*1.5);
		grid-template-columns: repeat(3, 1fr)
	}
}
@media screen and (max-width:767px) {
	.camera-feature-card {
		row-gap: calc(var(--unit)*2)
	}
}
.camera-feature-card-item {
	background-color: var(--color-pink-lighter);
	border-radius: var(--border-radius-m);
	position: relative
}
@media screen and (min-width:768px) {
	.camera-feature-card-item {
		padding: calc(var(--unit)*5.3) calc(var(--unit)*4.8) calc(var(--unit)*4.2)
	}
}
@media screen and (max-width:767px) {
	.camera-feature-card-item {
		padding: calc(var(--unit)*3.8) var(--spacing-m) calc(var(--unit)*3.3)
	}
}
.camera-feature-card-icon {
	margin-left: auto;
	margin-right: auto
}
@media screen and (min-width:768px) {
	.camera-feature-card-icon {
		width: calc(var(--unit)*14.4)
	}
}
@media screen and (max-width:767px) {
	.camera-feature-card-icon {
		width: calc(var(--unit)*10.8)
	}
}
.camera-feature-card-heading {
	letter-spacing: var(--tracking-base)
}
@media screen and (min-width:768px) {
	.camera-feature-card-heading {
		font-size: calc(var(--unit)*2.4);
		margin-top: calc(var(--unit)*5)
	}
}
@media screen and (max-width:767px) {
	.camera-feature-card-heading {
		font-size: calc(var(--unit)*2);
		margin-top: calc(var(--unit)*3.4)
	}
}
.camera-feature-card-description {
	line-height: var(--leading-relaxed);
	text-align: justify
}
@media screen and (min-width:768px) {
	.camera-feature-card-description {
		font-size: calc(var(--unit)*1.4);
		margin-top: calc(var(--unit)*2.4)
	}
}
@media screen and (max-width:767px) {
	.camera-feature-card-description {
		font-size: calc(var(--unit)*1.4);
		margin-top: calc(var(--unit)*1.6)
	}
}
.camera-feature-card-note {
	letter-spacing: var(--tracking-wide);
	line-height: var(--leading-wide)
}
@media screen and (min-width:768px) {
	.camera-feature-card-note {
		font-size: calc(var(--unit)*1.2);
		margin-top: calc(var(--unit)*1.6)
	}
}
@media screen and (max-width:767px) {
	.camera-feature-card-note {
		font-size: calc(var(--unit)*1.2);
		margin-top: calc(var(--unit)*.9)
	}
}
.design {
	background-color: var(--color-blue-lightest);
	background-position: top
}
@media screen and (min-width:768px) {
	.design {
		background-repeat: repeat;
		background-size: calc(var(--unit)*192) auto
	}
	html.is-webp .design {
		background-image: url(/k-tai/products/aquos-sense10/images/design_bg_pc.webp)
	}
	html.is-webp.is-local .design, html.no-webp .design {
		background-image: url(/k-tai/products/aquos-sense10/images/design_bg_pc.jpg)
	}
}
@media screen and (max-width:767px) {
	.design {
		background-repeat: repeat-y;
		background-size: 100% auto
	}
	html.is-webp .design {
		background-image: url(/k-tai/products/aquos-sense10/images/design_bg_sp.webp)
	}
	html.is-webp.is-local .design, html.no-webp .design {
		background-image: url(/k-tai/products/aquos-sense10/images/design_bg_sp.jpg)
	}
}
@media screen and (min-width:768px) {
	.design {
		padding-bottom: var(--spacing-l);
		padding-top: var(--spacing-l)
	}
}
@media screen and (max-width:767px) {
	.design {
		padding: var(--spacing-xl) var(--spacing-s)
	}
}
.design-intro {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center
}
@media screen and (min-width:768px) {
	.design-intro {
		margin-bottom: calc(var(--unit)*13.8)
	}
}
@media screen and (max-width:767px) {
	.design-intro {
		margin-bottom: calc(var(--unit)*9.2)
	}
}
.design-intro .c-badge {
	background-color: var(--color-blue-lighter)
}
.design-intro-heading {
	letter-spacing: var(--tracking-base)
}
@media screen and (min-width:768px) {
	.design-intro-heading {
		font-size: calc(var(--unit)*5.6);
		margin-top: calc(var(--unit)*2.6)
	}
}
@media screen and (max-width:767px) {
	.design-intro-heading {
		font-size: calc(var(--unit)*3.2);
		line-height: var(--leading-half);
		margin-top: calc(var(--unit)*3.3)
	}
}
@media screen and (min-width:768px) {
	.design-intro-description {
		font-size: calc(var(--unit)*2);
		margin-top: calc(var(--unit)*2.5)
	}
}
@media screen and (max-width:767px) {
	.design-intro-description {
		font-size: calc(var(--unit)*1.4);
		margin-top: calc(var(--unit)*3.3)
	}
}
@media screen and (min-width:768px) {
	.design-style {
		height: calc(var(--unit)*400);
		margin-left: auto;
		margin-right: auto;
		max-width: 1680px;
		padding-left: var(--spacing-m);
		padding-right: var(--spacing-m)
	}
}
.design-style-list {
	--design-style-pin: 0;
	display: grid
}
@media screen and (min-width:768px) {
	.design-style-list {
		position: sticky;
		top: var(--design-style-pin, 0)
	}
}
@media screen and (max-width:767px) {
	.design-style-list {
		row-gap: var(--spacing-s)
	}
}
.design-style-card {
	border-radius: var(--border-radius-m);
	color: var(--color-white);
	overflow: hidden;
	position: relative
}
@media screen and (min-width:768px) {
	.design-style-card {
		grid-area: 1/1;
		height: clamp(560/10 * var(--unit), 100vh - var(--header-nav-height) - (var(--spacing-m)) * 2, 800/10 * var(--unit));
		isolation: isolate;
		transition: visibility 0s .6s, opacity .4s .2s ease, transform .6s var(--ease-sense);
		will-change: opacity, transform
	}
	.design-style-card-basic, .design-style-card-kireime {
		opacity: 0;
		transform: translateY(100vh);
		visibility: hidden
	}
	.design-style-card[data-card-status=deep], .design-style-card[data-card-status=deeper], .design-style-card[data-card-status=front] {
		opacity: 1;
		visibility: visible
	}
	.design-style-card[data-card-status=deep] .design-style-device, .design-style-card[data-card-status=deep] .design-style-illust, .design-style-card[data-card-status=deeper] .design-style-device, .design-style-card[data-card-status=deeper] .design-style-illust, .design-style-card[data-card-status=front] .design-style-device, .design-style-card[data-card-status=front] .design-style-illust {
		opacity: 1;
		transform: translate(0, 0);
		transition: opacity .2s ease, transform 1.2s var(--ease-sense-out)
	}
	.design-style-card[data-card-status=deep] .design-style-device-02, .design-style-card[data-card-status=deeper] .design-style-device-02, .design-style-card[data-card-status=front] .design-style-device-02 {
		transition-delay: 80ms
	}
	.design-style-card[data-card-status=deep] .design-style-illust, .design-style-card[data-card-status=deeper] .design-style-illust, .design-style-card[data-card-status=front] .design-style-illust {
		transition-delay: .16s
	}
	.design-style-card[data-card-status=front] {
		transform: translateY(0);
		transition: visibility 0s, opacity .2s ease, transform .86s var(--ease-sense)
	}
	.design-style-card[data-card-status=deep] {
		transform: translateY(calc(var(--unit)*-5)) scale(.96);
		transition: visibility 0s, opacity .2s ease, transform .86s var(--ease-sense)
	}
	.design-style-card[data-card-status=deeper] {
		transform: translateY(calc(var(--unit)*-10)) scale(.92);
		transition: visibility 0s, opacity .2s ease, transform .86s var(--ease-sense)
	}
}
.design-style-card-casual .design-style-device-01 {
	z-index: 2
}
@media screen and (min-width:768px) {
	.design-style-card-casual .design-style-device-01 {
		left: calc(50% - var(--unit)*10.4);
		top: calc(50% - var(--unit)*18.8);
		width: calc(var(--unit)*40.5)
	}
}
@media screen and (max-width:767px) {
	.design-style-card-casual .design-style-device-01 {
		left: calc(var(--unit)*1);
		top: calc(var(--unit)*12);
		width: calc(var(--unit)*21.2)
	}
}
.design-style-card-casual .design-style-device-02 {
	z-index: 1
}
@media screen and (min-width:768px) {
	.design-style-card-casual .design-style-device-02 {
		left: calc(50% + var(--unit)*5.2);
		top: calc(50% - var(--unit)*28.2);
		width: calc(var(--unit)*39)
	}
}
@media screen and (max-width:767px) {
	.design-style-card-casual .design-style-device-02 {
		left: calc(var(--unit)*10.3);
		top: calc(var(--unit)*7.3);
		width: calc(var(--unit)*20.4)
	}
}
@media screen and (min-width:768px) {
	.design-style-card-casual .design-style-illust {
		left: calc(50% + var(--unit)*36.5);
		top: calc(50% - var(--unit)*20.5);
		width: calc(var(--unit)*20.8)
	}
}
@media screen and (max-width:767px) {
	.design-style-card-casual .design-style-illust {
		right: calc(var(--unit)*1.8);
		top: calc(var(--unit)*12.8);
		width: calc(var(--unit)*10.4)
	}
}
.design-style-card-casual .design-style-color-item {
	background-color: var(--color-blue-pill)
}
.design-style-card-kireime .design-style-device-01 {
	z-index: 1
}
@media screen and (min-width:768px) {
	.design-style-card-kireime .design-style-device-01 {
		left: calc(50% - var(--unit)*4.6);
		top: calc(50% - var(--unit)*20.5);
		width: calc(var(--unit)*30.9)
	}
}
@media screen and (max-width:767px) {
	.design-style-card-kireime .design-style-device-01 {
		left: calc(var(--unit)*3.3);
		top: calc(var(--unit)*11.6);
		width: calc(var(--unit)*15.4)
	}
}
.design-style-card-kireime .design-style-device-02 {
	z-index: 2
}
@media screen and (min-width:768px) {
	.design-style-card-kireime .design-style-device-02 {
		left: calc(50% + var(--unit)*8.3);
		top: calc(50% - var(--unit)*27.9);
		width: calc(var(--unit)*32.8)
	}
}
@media screen and (max-width:767px) {
	.design-style-card-kireime .design-style-device-02 {
		left: calc(var(--unit)*9.8);
		top: calc(var(--unit)*7.9);
		width: calc(var(--unit)*16.4)
	}
}
@media screen and (min-width:768px) {
	.design-style-card-kireime .design-style-illust {
		left: calc(50% + var(--unit)*28.5);
		top: calc(50% - var(--unit)*14.2);
		width: calc(var(--unit)*29.7)
	}
}
@media screen and (max-width:767px) {
	.design-style-card-kireime .design-style-illust {
		right: calc(var(--unit)*2.4);
		top: calc(var(--unit)*17.3);
		width: calc(var(--unit)*15)
	}
}
.design-style-card-kireime .design-style-color-item {
	background-color: var(--color-pink-pill)
}
@media screen and (min-width:768px) {
	.design-style-card-kireime .design-style-bg {
		overflow: hidden
	}
	.design-style-card-kireime .design-style-bg img {
		height: auto;
		left: 50%;
		max-width: none;
		object-fit: fill;
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
		width: calc(var(--unit)*153.6)
	}
}
.design-style-card-basic .design-style-device-01 {
	z-index: 1
}
@media screen and (min-width:768px) {
	.design-style-card-basic .design-style-device-01 {
		left: calc(50% - var(--unit)*6);
		top: calc(50% - var(--unit)*18.9);
		width: calc(var(--unit)*33.2)
	}
}
@media screen and (max-width:767px) {
	.design-style-card-basic .design-style-device-01 {
		left: calc(var(--unit)*2.4);
		top: calc(var(--unit)*11.1);
		width: calc(var(--unit)*16.6)
	}
}
.design-style-card-basic .design-style-device-02 {
	z-index: 2
}
@media screen and (min-width:768px) {
	.design-style-card-basic .design-style-device-02 {
		left: calc(50% + var(--unit)*8.1);
		top: calc(50% - var(--unit)*24.9);
		width: calc(var(--unit)*34.4)
	}
}
@media screen and (max-width:767px) {
	.design-style-card-basic .design-style-device-02 {
		left: calc(var(--unit)*9.4);
		top: calc(var(--unit)*8.1);
		width: calc(var(--unit)*17.2)
	}
}
@media screen and (min-width:768px) {
	.design-style-card-basic .design-style-illust {
		left: calc(50% + var(--unit)*31.9);
		top: calc(50% - var(--unit)*18.7);
		width: calc(var(--unit)*26.5)
	}
}
@media screen and (max-width:767px) {
	.design-style-card-basic .design-style-illust {
		right: calc(var(--unit)*1.5);
		top: calc(var(--unit)*14);
		width: calc(var(--unit)*13.4)
	}
}
.design-style-card-basic .design-style-color-item {
	background-color: var(--color-beige-pill)
}
.design-style-front {
	z-index: 1
}
@media screen and (min-width:768px) {
	.design-style-front {
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%
	}
}
@media screen and (max-width:767px) {
	.design-style-front {
		padding-bottom: calc(var(--unit)*4);
		padding-top: calc(var(--unit)*40.8);
		position: relative
	}
}
.design-style-hash {
	border-bottom: 1px solid;
	font-weight: var(--font-weight-medium);
	line-height: var(--leading-none);
	position: absolute;
	width: max-content
}
@media screen and (min-width:768px) {
	.design-style-hash {
		font-size: calc(var(--unit)*1.6);
		left: calc(var(--unit)*4.8);
		padding-bottom: calc(var(--unit)*.6);
		top: calc(var(--unit)*4.5)
	}
}
@media screen and (max-width:767px) {
	.design-style-hash {
		font-size: calc(var(--unit)*1.4);
		left: calc(var(--unit)*4);
		padding-bottom: calc(var(--unit)*.6);
		top: calc(var(--unit)*3.7)
	}
}
.design-style-contents {
	display: flex;
	flex-direction: column;
	justify-content: center
}
@media screen and (min-width:768px) {
	.design-style-contents {
		height: 100%;
		left: calc(50% - var(--unit)*50.4);
		padding-bottom: calc(var(--unit)*1.5);
		position: absolute;
		top: 0
	}
}
@media screen and (max-width:767px) {
	.design-style-contents {
		text-align: center
	}
}
.design-style-heading {
	letter-spacing: var(--tracking-base)
}
@media screen and (min-width:768px) {
	.design-style-heading {
		font-size: calc(var(--unit)*4.8)
	}
}
@media screen and (max-width:767px) {
	.design-style-heading {
		font-size: calc(var(--unit)*3.2)
	}
}
.design-style-color {
	display: flex
}
@media screen and (min-width:768px) {
	.design-style-color {
		gap: calc(var(--unit)*.6);
		margin-top: calc(var(--unit)*3.4)
	}
}
@media screen and (max-width:767px) {
	.design-style-color {
		gap: calc(var(--unit)*.6);
		justify-content: center;
		margin-top: calc(var(--unit)*2.7)
	}
}
.design-style-color-item {
	border: 1px solid rgb(var(--color-white-rgb), .8);
	border-radius: var(--border-radius-full);
	font-weight: var(--font-weight-medium);
	line-height: var(--leading-none)
}
@media screen and (min-width:768px) {
	.design-style-color-item {
		font-size: calc(var(--unit)*1.3);
		padding: calc(var(--unit)*1) calc(var(--unit)*1.7)
	}
}
@media screen and (max-width:767px) {
	.design-style-color-item {
		font-size: calc(var(--unit)*1.3);
		padding: calc(var(--unit)*.9) calc(var(--unit)*1.7)
	}
}
.design-style-description {
	display: grid;
	font-weight: var(--font-weight-medium);
	line-height: var(--leading-wide)
}
@media screen and (min-width:768px) {
	.design-style-description {
		font-size: calc(var(--unit)*1.6);
		margin-top: calc(var(--unit)*3.6);
		row-gap: calc(var(--unit)*1.2)
	}
}
@media screen and (max-width:767px) {
	.design-style-description {
		font-size: calc(var(--unit)*1.3);
		margin-top: calc(var(--unit)*3);
		row-gap: calc(var(--unit)*1.1)
	}
}
.design-style-back {
	height: 100%;
	isolation: isolate;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%
}
.design-style-device {
	position: absolute
}
@media screen and (min-width:768px) {
	.design-style-device {
		opacity: 0;
		transform: translate(0, calc(var(--unit)*70));
		transition: opacity .2s ease, transform 0s .2s
	}
}
.design-style-illust {
	position: absolute;
	z-index: 0
}
@media screen and (min-width:768px) {
	.design-style-illust {
		opacity: 0;
		transform: translate(calc(var(--unit)*-3), calc(var(--unit)*70));
		transition: opacity .2s ease, transform 0s .2s
	}
}
.design-style-bg {
	z-index: -1
}
.design-style-bg, .design-style-bg img {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%
}
.design-style-bg img {
	object-fit: cover
}
@media screen and (max-width:767px) {
	.design-style-bg img {
		object-position: center top
	}
}
.design-feature {
	display: grid
}
@media screen and (min-width:768px) {
	.design-feature {
		margin-top: calc(var(--unit)*21.6);
		padding-left: var(--spacing-l);
		padding-right: var(--spacing-l);
		row-gap: calc(var(--unit)*9.6)
	}
}
@media screen and (max-width:767px) {
	.design-feature {
		padding: calc(var(--unit)*12.5) var(--spacing-s) calc(var(--unit)*12);
		row-gap: calc(var(--unit)*12.5)
	}
}
.design-feature-section {
	width: 100%
}
@media screen and (min-width:768px) {
	.design-feature-section {
		align-items: center;
		column-gap: var(--spacing-l);
		display: flex
	}
	.design-feature-section:nth-child(odd) {
		flex-direction: row-reverse;
		justify-content: flex-end
	}
	.design-feature-section:nth-child(2n) {
		column-gap: calc(var(--unit)*3.2);
		justify-content: space-between
	}
	.design-feature-section:nth-child(2n) .design-feature-body {
		padding-left: var(--spacing-m)
	}
}
@media screen and (max-width:767px) {
	.design-feature-section {
		display: flex;
		flex-direction: column
	}
	.design-feature-section .c-feature-hash {
		order: 1
	}
	.design-feature-section .c-feature-heading {
		order: 2
	}
	.design-feature-section .c-feature-description {
		order: 3
	}
	.design-feature-section .design-feature-figure {
		order: 4
	}
	.design-feature-section .design-feature-footer {
		order: 5
	}
	.design-feature-body {
		display: contents
	}
}
@media screen and (min-width:768px) {
	.design-feature-body .c-feature-heading {
		font-size: calc(var(--unit)*3.6)
	}
	.design-feature-body .c-feature-description {
		margin-top: calc(var(--unit)*2.7)
	}
	.design-feature-footer {
		margin-top: calc(var(--unit)*3.8)
	}
}
@media screen and (max-width:767px) {
	.design-feature-footer {
		margin-top: calc(var(--unit)*4.8)
	}
}
.design-feature-footer .design-case-action-coming {
	width: max-content
}
@media screen and (min-width:768px) {
	.design-feature-figure {
		flex: none;
		width: calc(var(--unit)*64.8)
	}
}
@media screen and (max-width:767px) {
	.design-feature-figure {
		margin-top: calc(var(--unit)*3.9)
	}
}
.design-feature-figure img {
	border-radius: var(--border-radius-m)
}
@media screen and (min-width:768px) {
	.design-case {
		margin-top: calc(var(--unit)*12.9);
		padding-left: var(--spacing-l);
		padding-right: var(--spacing-l)
	}
	.design-case-section-02 {
		margin-top: calc(var(--unit)*11)
	}
}
@media screen and (max-width:767px) {
	.design-case-section-02 {
		margin-top: calc(var(--unit)*8.7)
	}
}
.design-case-section-02 .design-case-list {
	display: grid
}
@media screen and (min-width:768px) {
	.design-case-section-02 .design-case-list {
		column-gap: calc(var(--unit)*1.6);
		grid-template-columns: repeat(2, 1fr)
	}
}
@media screen and (max-width:767px) {
	.design-case-section-02 .design-case-list {
		row-gap: calc(var(--unit)*2)
	}
}
.design-case-heading {
	letter-spacing: var(--tracking-base)
}
@media screen and (min-width:768px) {
	.design-case-heading {
		font-size: calc(var(--unit)*3.6);
		margin-bottom: calc(var(--unit)*6.4)
	}
}
@media screen and (max-width:767px) {
	.design-case-heading {
		font-size: calc(var(--unit)*2.4);
		margin-bottom: calc(var(--unit)*4.2);
		padding-left: var(--spacing-s)
	}
}
.design-case-card {
	border-radius: var(--border-radius-m);
	isolation: isolate;
	overflow: hidden;
	position: relative;
	scroll-margin-top: calc(var(--header-nav-height, 0px) + 1em)
}
@media screen and (min-width:768px) {
	.design-case-card {
		padding: calc(var(--unit)*7.2)
	}
}
@media screen and (max-width:767px) {
	.design-case-card {
		padding-bottom: calc(var(--unit)*4)
	}
}
@media screen and (min-width:768px) {
	.design-case-card-spingle {
		align-items: center;
		display: flex;
		height: calc(var(--unit)*54);
		padding-right: calc(var(--unit)*9)
	}
}
@media screen and (max-width:767px) {
	.design-case-card-spingle {
		height: calc(var(--unit)*74);
		padding-bottom: calc(var(--unit)*4.8)
	}
}
@media screen and (min-width:768px) {
	.design-case-card-spingle .design-case-body {
		align-items: center;
		margin-left: auto;
		width: max-content
	}
}
@media screen and (max-width:767px) {
	.design-case-card-spingle .design-case-body {
		align-items: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-top: calc(var(--unit)*6.4)
	}
}
.design-case-card-spingle .design-case-logo {
	display: flex
}
@media screen and (max-width:767px) {
	.design-case-card-spingle .design-case-logo {
		align-items: center;
		flex-direction: column
	}
}
@media screen and (min-width:768px) {
	.design-case-card-spingle .design-case-logo-01 {
		align-items: center;
		width: calc(var(--unit)*19.9)
	}
}
@media screen and (max-width:767px) {
	.design-case-card-spingle .design-case-logo-01 {
		width: calc(var(--unit)*22.1)
	}
}
@media screen and (min-width:768px) {
	.design-case-card-spingle .design-case-logo-02 {
		position: relative;
		top: calc(var(--unit)*.4);
		width: calc(var(--unit)*20.1)
	}
}
@media screen and (max-width:767px) {
	.design-case-card-spingle .design-case-logo-02 {
		width: calc(var(--unit)*22.3)
	}
}
.design-case-card-spingle .design-case-logo-separator {
	background-color: var(--color-black);
	position: relative
}
@media screen and (min-width:768px) {
	.design-case-card-spingle .design-case-logo-separator {
		height: calc(var(--unit)*3.6);
		margin: 0 calc(var(--unit)*1.9);
		top: calc(var(--unit)*.5);
		width: 1px
	}
}
@media screen and (max-width:767px) {
	.design-case-card-spingle .design-case-logo-separator {
		height: 1px;
		margin: calc(var(--unit)*2) 0;
		width: calc(var(--unit)*22)
	}
}
@media screen and (min-width:768px) {
	.design-case-card-spingle .design-case-description {
		margin-top: calc(var(--unit)*4.3);
		text-align: center
	}
}
@media screen and (max-width:767px) {
	.design-case-card-spingle .design-case-description {
		margin-top: calc(var(--unit)*3.9);
		text-align: center
	}
}
@media screen and (min-width:768px) {
	.design-case-card-spingle .design-case-action {
		margin-top: calc(var(--unit)*5.6)
	}
	.design-case-card-spingle .design-case-image {
		width: calc(var(--unit)*29.5)
	}
}
@media screen and (max-width:767px) {
	.design-case-card-spingle .design-case-image {
		width: calc(var(--unit)*20.2)
	}
}
@media screen and (min-width:768px) {
	.design-case-card-spingle .design-case-image:first-child {
		left: calc(var(--unit)*13.4);
		top: calc(var(--unit)*7.2)
	}
}
@media screen and (max-width:767px) {
	.design-case-card-spingle .design-case-image:first-child {
		left: calc(var(--unit)*3.3);
		top: calc(var(--unit)*33.4)
	}
}
@media screen and (min-width:768px) {
	.design-case-card-spingle .design-case-image:nth-child(2) {
		left: calc(var(--unit)*34.8);
		top: calc(var(--unit)*7.2)
	}
}
@media screen and (max-width:767px) {
	.design-case-card-spingle .design-case-image:nth-child(2) {
		left: calc(var(--unit)*18.1);
		top: calc(var(--unit)*33.4)
	}
}
@media screen and (min-width:768px) {
	.design-case-card-blue-sakura, .design-case-card-kojima {
		height: calc(var(--unit)*61.8)
	}
}
@media screen and (max-width:767px) {
	.design-case-card-blue-sakura, .design-case-card-kojima {
		height: calc(var(--unit)*48.4);
		padding-left: calc(var(--unit)*4);
		padding-right: calc(var(--unit)*4);
		padding-top: calc(var(--unit)*4)
	}
}
@media screen and (min-width:768px) {
	.design-case-card-blue-sakura .design-case-body, .design-case-card-kojima .design-case-body {
		height: 100%;
		justify-content: flex-end
	}
	.design-case-card-blue-sakura .design-case-action, .design-case-card-kojima .design-case-action {
		flex-direction: column;
		width: max-content
	}
}
@media screen and (max-width:767px) {
	.design-case-card-blue-sakura .design-case-action, .design-case-card-kojima .design-case-action {
		margin-left: calc(var(--unit)*-4);
		margin-right: calc(var(--unit)*-4)
	}
}
@media screen and (min-width:768px) {
	.design-case-card-blue-sakura .design-case-logo {
		width: calc(var(--unit)*15.1)
	}
}
@media screen and (max-width:767px) {
	.design-case-card-blue-sakura .design-case-logo {
		margin-bottom: calc(var(--unit)*2.8);
		margin-top: calc(var(--unit)*3.6);
		width: calc(var(--unit)*10.3)
	}
}
@media screen and (min-width:768px) {
	.design-case-card-kojima .design-case-logo {
		width: calc(var(--unit)*14.3)
	}
}
@media screen and (max-width:767px) {
	.design-case-card-kojima .design-case-logo {
		margin-bottom: calc(var(--unit)*3.9);
		margin-top: calc(var(--unit)*4.5);
		width: calc(var(--unit)*9.7)
	}
}
@media screen and (min-width:768px) {
	.design-case-card-kojima .design-case-image {
		left: calc(var(--unit)*29.6);
		top: calc(var(--unit)*12.4);
		width: calc(var(--unit)*29.1)
	}
}
@media screen and (max-width:767px) {
	.design-case-card-kojima .design-case-image {
		left: calc(var(--unit)*18.4);
		top: calc(var(--unit)*3.4);
		width: calc(var(--unit)*20)
	}
}
.design-case-body {
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 2
}
@media screen and (max-width:767px) {
	.design-case-body {
		height: 100%
	}
}
@media screen and (min-width:768px) {
	.design-case-official {
		margin-bottom: auto;
		width: calc(var(--unit)*4.8)
	}
}
@media screen and (max-width:767px) {
	.design-case-official {
		width: calc(var(--unit)*4)
	}
}
.design-case-description {
	line-height: var(--leading-wide)
}
@media screen and (min-width:768px) {
	.design-case-description {
		font-size: calc(var(--unit)*1.4);
		margin-top: calc(var(--unit)*2.6)
	}
}
@media screen and (max-width:767px) {
	.design-case-description {
		font-size: calc(var(--unit)*1.3)
	}
}
.design-case-action {
	display: flex
}
@media screen and (min-width:768px) {
	.design-case-action {
		gap: calc(var(--unit)*.8);
		margin-top: calc(var(--unit)*4)
	}
}
@media screen and (max-width:767px) {
	.design-case-action {
		column-gap: calc(var(--unit)*.8);
		justify-content: center;
		margin-top: auto
	}
}
.design-case-action-item {
	display: flex
}
.design-case-action-coming {
	align-items: center;
	background-color: var(--color-white);
	border-radius: var(--border-radius-full);
	display: flex;
	flex-direction: column;
	font-weight: var(--font-weight-medium);
	justify-content: center
}
@media screen and (min-width:768px) {
	.design-case-action-coming {
		min-width: calc(var(--unit)*16);
		padding: calc(var(--unit)*.6) calc(var(--unit)*1) calc(var(--unit)*.8)
	}
}
@media screen and (max-width:767px) {
	.design-case-action-coming {
		min-width: calc(var(--unit)*14.8);
		padding: calc(var(--unit)*.6) calc(var(--unit)*1) calc(var(--unit)*.8)
	}
}
@media screen and (min-width:768px) {
	.design-case-action-coming-en {
		font-size: calc(var(--unit)*1.2)
	}
}
@media screen and (max-width:767px) {
	.design-case-action-coming-en {
		font-size: calc(var(--unit)*1.2)
	}
}
@media screen and (min-width:768px) {
	.design-case-action-coming-ja {
		font-size: calc(var(--unit)*1);
		transform: scale(.9)
	}
}
@media screen and (max-width:767px) {
	.design-case-action-coming-ja {
		font-size: calc(var(--unit)*1);
		transform: scale(.9)
	}
}
.design-case-action .c-button {
	flex-grow: 1
}
.design-case-action .c-button-text {
	color: var(--color-white)
}
@media screen and (min-width:768px) {
	.design-case-action .c-button-text {
		font-size: calc(var(--unit)*1.2);
		margin-bottom: calc(var(--unit)*.1)
	}
}
@media screen and (max-width:767px) {
	.design-case-action .c-button-text {
		font-size: calc(var(--unit)*1.2);
		margin-bottom: calc(var(--unit)*.1)
	}
}
.design-case-action .c-button-icon {
	background-color: var(--color-white)
}
.design-case-action .c-button-icon svg {
	fill: currentcolor
}
.design-case-image {
	position: absolute;
	z-index: 1
}
.design-case-slider {
	position: absolute !important;
	z-index: 2
}
@media screen and (min-width:768px) {
	.design-case-slider {
		left: calc(50% + var(--unit)*1.2);
		top: calc(var(--unit)*12.4);
		width: calc(var(--unit)*29.2)
	}
}
@media screen and (max-width:767px) {
	.design-case-slider {
		left: calc(var(--unit)*18.3);
		top: calc(var(--unit)*3.4);
		width: calc(var(--unit)*20)
	}
}
.design-case-slider-container {
	cursor: grab;
	position: relative
}
.design-case-slider-container.is-grabbing {
	cursor: grabbing
}
.design-case-slider-container.is-initialized:before {
	transition: visibility 0s .1s;
	visibility: visible
}
.design-case-slider-container:before {
	background-color: var(--color-sakura-jeans-03);
	content: "";
	position: absolute;
	visibility: hidden
}
@media screen and (min-width:768px) {
	.design-case-slider-container:before {
		border-radius: calc(var(--unit)*3);
		height: calc(var(--unit)*37.6);
		left: calc(var(--unit)*1.4);
		top: calc(var(--unit)*.7);
		width: calc(var(--unit)*18.4)
	}
}
@media screen and (max-width:767px) {
	.design-case-slider-container:before {
		border-radius: calc(var(--unit)*1.8);
		height: calc(var(--unit)*25.6);
		left: calc(var(--unit)*1);
		top: calc(var(--unit)*.7);
		width: calc(var(--unit)*12.5)
	}
}
.design-case-slider-list {
	display: grid
}
.design-case-slider-item {
	grid-area: 1/1
}
.design-case-slider-nav {
	align-items: center;
	background-color: var(--color-white);
	border-radius: var(--border-radius-full);
	display: flex;
	justify-content: center;
	position: absolute;
	z-index: 10
}
@media screen and (min-width:768px) {
	.design-case-slider-nav {
		column-gap: calc(var(--unit)*.4);
		height: calc(var(--unit)*1.8);
		left: calc(var(--unit)*6.8);
		top: calc(var(--unit)*40.3);
		width: calc(var(--unit)*7.4)
	}
}
@media screen and (max-width:767px) {
	.design-case-slider-nav {
		column-gap: calc(var(--unit)*.4);
		height: calc(var(--unit)*1.8);
		left: calc(var(--unit)*3.5);
		top: calc(var(--unit)*28.1);
		width: calc(var(--unit)*7.4)
	}
}
.design-case-slider-nav-item:first-child .design-case-slider-nav-button {
	background-color: var(--color-sakura-jeans-01)
}
.design-case-slider-nav-item:nth-child(2) .design-case-slider-nav-button {
	background-color: var(--color-sakura-jeans-02)
}
.design-case-slider-nav-item:nth-child(3) .design-case-slider-nav-button {
	background-color: var(--color-sakura-jeans-03)
}
.design-case-slider-nav-button {
	border-radius: var(--border-radius-full);
	transition: width .2s ease;
	will-change: width
}
.design-case-slider-nav-button:focus-visible {
	outline: auto;
	outline: auto -webkit-focus-ring-color
}
@media screen and (min-width:768px) {
	.design-case-slider-nav-button {
		height: calc(var(--unit)*.6);
		width: calc(var(--unit)*.6)
	}
}
@media screen and (max-width:767px) {
	.design-case-slider-nav-button {
		height: calc(var(--unit)*.6);
		width: calc(var(--unit)*.6)
	}
}
@media screen and (min-width:768px) {
	.design-case-slider-nav-button[aria-current=true] {
		width: calc(var(--unit)*1.8)
	}
}
@media screen and (max-width:767px) {
	.design-case-slider-nav-button[aria-current=true] {
		width: calc(var(--unit)*1.8)
	}
}
.design-case-bg, .design-case-bg img {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%
}
.design-case-bg img {
	object-fit: cover
}
.spec {
	background-color: var(--color-aqua-lightest);
	background-position: top
}
@media screen and (min-width:768px) {
	.spec {
		background-repeat: repeat;
		background-size: calc(var(--unit)*192) auto
	}
	html.is-webp .spec {
		background-image: url(/k-tai/products/aquos-sense10/images/spec_bg_pc.webp)
	}
	html.is-webp.is-local .spec, html.no-webp .spec {
		background-image: url(/k-tai/products/aquos-sense10/images/spec_bg_pc.jpg)
	}
}
@media screen and (max-width:767px) {
	.spec {
		background-repeat: repeat-y;
		background-size: 100% auto
	}
	html.is-webp .spec {
		background-image: url(/k-tai/products/aquos-sense10/images/spec_bg_sp.webp)
	}
	html.is-webp.is-local .spec, html.no-webp .spec {
		background-image: url(/k-tai/products/aquos-sense10/images/spec_bg_sp.jpg)
	}
}
@media screen and (min-width:768px) {
	.spec-container {
		padding: var(--spacing-l) var(--spacing-l) calc(var(--unit)*13.7)
	}
}
@media screen and (max-width:767px) {
	.spec-container {
		padding-bottom: calc(var(--unit)*12.2)
	}
}
.spec-intro .c-badge {
	background-color: var(--color-aqua)
}
@media screen and (max-width:767px) {
	.spec-intro-header {
		padding: var(--spacing-xl) var(--spacing-m) 0
	}
}
.spec-intro-heading {
	letter-spacing: var(--tracking-base)
}
@media screen and (min-width:768px) {
	.spec-intro-heading {
		font-size: calc(var(--unit)*6.7);
		margin-right: -1em;
		margin-top: calc(var(--unit)*2.1)
	}
}
@media screen and (max-width:767px) {
	.spec-intro-heading {
		font-size: calc(var(--unit)*3.6);
		margin-top: calc(var(--unit)*3.3)
	}
}
.spec-intro-hero {
	position: relative
}
@media screen and (min-width:768px) {
	.spec-intro-hero {
		margin-top: calc(var(--unit)*7.8)
	}
}
@media screen and (max-width:767px) {
	.spec-intro-hero {
		margin-top: calc(var(--unit)*8.6)
	}
}
.spec-intro-hero-container {
	display: grid
}
@media screen and (min-width:768px) {
	.spec-intro-hero-container {
		border-radius: var(--border-radius-m);
		overflow: hidden
	}
}
.spec-intro-hero-day, .spec-intro-hero-night {
	grid-area: 1/1
}
.spec-intro-hero-night {
	opacity: 0;
	transition: opacity 1s ease;
	z-index: 1
}
.spec-intro-hero-night.is-active {
	opacity: 1
}
.spec-intro-hero-illust {
	position: absolute;
	z-index: 2
}
@media screen and (min-width:768px) {
	.spec-intro-hero-illust {
		bottom: calc(var(--unit)*-1.5);
		left: calc(var(--unit)*-6.8);
		width: calc(var(--unit)*27)
	}
}
@media screen and (max-width:767px) {
	.spec-intro-hero-illust {
		bottom: calc(var(--unit)*-9.9);
		right: calc(var(--unit)*2);
		width: calc(var(--unit)*14)
	}
}
@media screen and (min-width:768px) {
	.spec-igzo {
		margin-top: calc(var(--unit)*9)
	}
}
@media screen and (max-width:767px) {
	.spec-igzo {
		margin-top: calc(var(--unit)*9.2);
		padding: 0 var(--spacing-m)
	}
}
@media screen and (min-width:768px) {
	.spec-igzo-container {
		display: grid;
		grid-template-columns: calc(var(--unit)*50.4) 1fr
	}
}
.spec-igzo-hash {
	border-bottom: 1px solid;
	width: max-content
}
@media screen and (min-width:768px) {
	.spec-igzo-hash {
		font-size: calc(var(--unit)*1.6);
		margin-bottom: calc(var(--unit)*3);
		padding-bottom: calc(var(--unit)*.3)
	}
}
@media screen and (max-width:767px) {
	.spec-igzo-hash {
		font-size: calc(var(--unit)*1.4);
		margin-bottom: calc(var(--unit)*4)
	}
}
.spec-igzo-heading {
	letter-spacing: var(--tracking-base)
}
@media screen and (min-width:768px) {
	.spec-igzo-heading {
		font-size: calc(var(--unit)*4.8)
	}
}
@media screen and (max-width:767px) {
	.spec-igzo-heading {
		font-size: calc(var(--unit)*2.4)
	}
}
@media screen and (min-width:768px) {
	.spec-igzo-body {
		padding-top: calc(var(--unit)*1.2)
	}
}
.spec-igzo-description {
	line-height: var(--leading-wide);
	text-align: justify
}
@media screen and (min-width:768px) {
	.spec-igzo-description {
		font-size: calc(var(--unit)*1.6)
	}
}
@media screen and (max-width:767px) {
	.spec-igzo-description {
		font-size: calc(var(--unit)*1.5);
		margin-top: calc(var(--unit)*3.2)
	}
}
.spec-igzo-break {
	align-items: center;
	display: flex
}
@media screen and (min-width:768px) {
	.spec-igzo-break {
		margin-top: calc(var(--unit)*3.8)
	}
}
@media screen and (max-width:767px) {
	.spec-igzo-break {
		flex-direction: column;
		margin-top: calc(var(--unit)*5.5)
	}
}
.spec-igzo-logo {
	flex: none
}
@media screen and (min-width:768px) {
	.spec-igzo-logo {
		width: calc(var(--unit)*16)
	}
}
@media screen and (max-width:767px) {
	.spec-igzo-logo {
		width: calc(var(--unit)*16)
	}
}
.spec-igzo-value {
	align-items: center;
	display: flex
}
@media screen and (min-width:768px) {
	.spec-igzo-value {
		column-gap: calc(var(--unit)*.8);
		margin-left: calc(var(--unit)*4.8)
	}
}
@media screen and (max-width:767px) {
	.spec-igzo-value {
		column-gap: calc(var(--unit)*.8);
		margin-top: calc(var(--unit)*3.6)
	}
}
.spec-igzo-value-item {
	background-color: var(--color-aqua-light);
	border-radius: var(--border-radius-full);
	font-weight: var(--font-weight-medium);
	line-height: var(--leading-none)
}
@media screen and (min-width:768px) {
	.spec-igzo-value-item {
		font-size: calc(var(--unit)*1.4);
		padding: calc(var(--unit)*1.3) calc(var(--unit)*2)
	}
}
@media screen and (max-width:767px) {
	.spec-igzo-value-item {
		font-size: calc(var(--unit)*1.3);
		padding: calc(var(--unit)*1.4) calc(var(--unit)*2)
	}
}
.spec-igzo-note {
	letter-spacing: var(--tracking-wide);
	line-height: var(--leading-wide);
	padding-left: 1.6em;
	position: relative;
	text-align: justify
}
@media screen and (min-width:768px) {
	.spec-igzo-note {
		font-size: calc(var(--unit)*1.2);
		margin-top: calc(var(--unit)*4)
	}
}
@media screen and (max-width:767px) {
	.spec-igzo-note {
		font-size: calc(var(--unit)*1);
		margin-top: calc(var(--unit)*5.6)
	}
}
.spec-igzo-note-sign {
	left: 0;
	position: absolute;
	top: 0
}
@media screen and (min-width:768px) {
	.spec-feature {
		margin-top: calc(var(--unit)*13.6)
	}
}
@media screen and (max-width:767px) {
	.spec-feature {
		margin-top: calc(var(--unit)*8.9);
		padding-left: var(--spacing-s);
		padding-right: var(--spacing-s)
	}
}
.spec-feature-list {
	display: grid
}
@media screen and (min-width:768px) {
	.spec-feature-list {
		gap: calc(var(--unit)*1.6);
		grid-template-columns: 1fr 1fr
	}
}
@media screen and (max-width:767px) {
	.spec-feature-list {
		row-gap: calc(var(--unit)*2)
	}
}
.spec-feature-section {
	background-color: var(--color-aqua-light);
	border-radius: var(--border-radius-m);
	position: relative
}
@media screen and (min-width:768px) {
	.spec-feature-section {
		padding: calc(var(--unit)*6.6) calc(var(--unit)*7.2) calc(var(--unit)*7.2)
	}
}
@media screen and (max-width:767px) {
	.spec-feature-section {
		display: flex;
		flex-direction: column;
		padding: calc(var(--unit)*3.6) var(--spacing-m) calc(var(--unit)*3.1)
	}
}
@media screen and (min-width:768px) {
	.spec-feature-section-battery {
		grid-column: 1/2
	}
	.spec-feature-section-mil {
		grid-column: 2/3
	}
	.spec-feature-section-battery .spec-feature-heading, .spec-feature-section-mil .spec-feature-heading {
		height: 2.8em
	}
	.spec-feature-section-battery .spec-feature-image, .spec-feature-section-mil .spec-feature-image {
		height: calc(var(--unit)*24.7);
		margin-top: calc(var(--unit)*3.9)
	}
}
@media screen and (max-width:767px) {
	.spec-feature-section-battery .spec-feature-image, .spec-feature-section-mil .spec-feature-image {
		margin-top: calc(var(--unit)*3.4)
	}
}
@media screen and (min-width:768px) {
	.spec-feature-section-battery .spec-feature-description, .spec-feature-section-mil .spec-feature-description {
		margin-top: 0
	}
}
@media screen and (max-width:767px) {
	.spec-feature-section-cpu {
		padding-bottom: calc(var(--unit)*6.4)
	}
}
.spec-feature-section-cpu .spec-feature-group-item {
	display: flex;
	flex-direction: column
}
.spec-feature-section-cpu .spec-feature-heading {
	order: 1
}
.spec-feature-section-cpu .spec-feature-description {
	order: 2
}
@media screen and (min-width:768px) {
	.spec-feature-section-cpu .spec-feature-description {
		margin-right: -2em;
		margin-top: calc(var(--unit)*2.8)
	}
}
.spec-feature-section-cpu .spec-feature-note {
	order: 3
}
.spec-feature-section-cpu .spec-feature-image {
	order: 4
}
@media screen and (min-width:768px) {
	.spec-feature-section-cpu .spec-feature-image {
		margin-top: calc(var(--unit)*4.4);
		width: calc(var(--unit)*33.9)
	}
}
@media screen and (max-width:767px) {
	.spec-feature-section-cpu .spec-feature-image {
		margin-top: calc(var(--unit)*4.4)
	}
}
@media screen and (min-width:768px) {
	.spec-feature-section-ai .spec-feature-description {
		margin-top: calc(var(--unit)*1.3)
	}
}
@media screen and (max-width:767px) {
	.spec-feature-section-ai .spec-feature-description {
		margin-top: calc(var(--unit)*1.6)
	}
}
@media screen and (min-width:768px) {
	.spec-feature-section-ai .spec-feature-group-item:nth-child(2) .spec-feature-heading {
		margin-top: calc(var(--unit)*2.5)
	}
}
@media screen and (max-width:767px) {
	.spec-feature-section-ai .spec-feature-group-item:nth-child(2) .spec-feature-heading {
		margin-top: calc(var(--unit)*2.8)
	}
}
.spec-feature-heading {
	letter-spacing: var(--tracking-base)
}
@media screen and (min-width:768px) {
	.spec-feature-heading {
		font-size: calc(var(--unit)*3.2)
	}
}
@media screen and (max-width:767px) {
	.spec-feature-heading {
		font-size: calc(var(--unit)*2.4)
	}
}
.spec-feature-description {
	line-height: var(--leading-wide);
	text-align: justify
}
@media screen and (min-width:768px) {
	.spec-feature-description {
		margin-top: calc(var(--unit)*3.9)
	}
}
@media screen and (max-width:767px) {
	.spec-feature-description {
		font-size: calc(var(--unit)*1.5);
		margin-top: calc(var(--unit)*3)
	}
}
@media screen and (min-width:768px) {
	.spec-feature-note {
		margin-top: calc(var(--unit)*1.6)
	}
}
@media screen and (max-width:767px) {
	.spec-feature-note {
		margin-top: calc(var(--unit)*1.6)
	}
}
.spec-feature-guide {
	display: flex;
	justify-content: flex-end
}
@media screen and (min-width:768px) {
	.spec-feature-guide {
		margin-top: calc(var(--unit)*4)
	}
}
@media screen and (max-width:767px) {
	.spec-feature-guide {
		margin-top: calc(var(--unit)*3.1)
	}
}
.spec-feature-guide-link {
	align-items: center;
	display: flex
}
.spec-feature-guide-link:focus-visible {
	outline: auto;
	outline: auto -webkit-focus-ring-color
}
@media screen and (min-width:768px) {
	.spec-feature-guide-link {
		column-gap: calc(var(--unit)*.8)
	}
}
@media screen and (max-width:767px) {
	.spec-feature-guide-link {
		column-gap: calc(var(--unit)*.8)
	}
}
@media screen and (min-width:768px) {
	.spec-feature-guide-text {
		font-size: calc(var(--unit)*1.6)
	}
}
@media screen and (max-width:767px) {
	.spec-feature-guide-text {
		font-size: calc(var(--unit)*1.5)
	}
}
.spec-feature-guide-icon {
	align-items: center;
	background-color: var(--color-black-6);
	border-radius: 50%;
	display: flex;
	justify-content: center
}
@media screen and (min-width:768px) {
	.spec-feature-guide-icon {
		height: calc(var(--unit)*2.4);
		padding-left: calc(var(--unit)*.2);
		width: calc(var(--unit)*2.4)
	}
}
@media screen and (max-width:767px) {
	.spec-feature-guide-icon {
		height: calc(var(--unit)*2.4);
		padding-left: calc(var(--unit)*.2);
		width: calc(var(--unit)*2.4)
	}
}
.spec-feature-guide-icon svg {
	width: 45%
}
.spec-feature-support {
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 100%
}
@media screen and (min-width:768px) {
	.spec-feature-support {
		margin-top: calc(var(--unit)*5.7)
	}
}
@media screen and (max-width:767px) {
	.spec-feature-support {
		margin-top: calc(var(--unit)*5)
	}
}
.spec-feature-support-item {
	align-items: center;
	display: flex;
	flex-direction: column
}
.spec-feature-support-label {
	letter-spacing: var(--tracking-base)
}
@media screen and (min-width:768px) {
	.spec-feature-support-label {
		font-size: calc(var(--unit)*1.6)
	}
}
@media screen and (max-width:767px) {
	.spec-feature-support-label {
		font-size: calc(var(--unit)*1.6)
	}
}
.spec-feature-support-value {
	align-items: baseline;
	display: flex;
	justify-self: center;
	line-height: var(--leading-none)
}
@media screen and (min-width:768px) {
	.spec-feature-support-value {
		font-size: calc(var(--unit)*2.4)
	}
}
@media screen and (max-width:767px) {
	.spec-feature-support-value {
		font-size: calc(var(--unit)*2.4);
		margin-top: calc(var(--unit)*.4)
	}
}
.spec-feature-support-value strong {
	font-weight: var(--font-weight-medium);
	position: relative
}
@media screen and (min-width:768px) {
	.spec-feature-support-value strong {
		font-size: calc(var(--unit)*5.4);
		margin-left: calc(var(--unit)*1);
		margin-right: calc(var(--unit)*.6);
		top: calc(var(--unit)*.6)
	}
}
@media screen and (max-width:767px) {
	.spec-feature-support-value strong {
		font-size: calc(var(--unit)*5.4);
		margin-left: calc(var(--unit)*1);
		margin-right: calc(var(--unit)*.6);
		top: calc(var(--unit)*.6)
	}
}
.spec-function {
	display: grid
}
@media screen and (min-width:768px) {
	.spec-function {
		gap: calc(var(--unit)*1.5);
		grid-template-columns: repeat(3, 1fr);
		margin-top: calc(var(--unit)*1.6)
	}
}
@media screen and (max-width:767px) {
	.spec-function {
		margin-top: calc(var(--unit)*2);
		padding: 0 var(--spacing-s);
		row-gap: calc(var(--unit)*2)
	}
}
.spec-function-section {
	background-color: var(--color-aqua-lighter);
	border-radius: var(--border-radius-m);
	position: relative
}
@media screen and (min-width:768px) {
	.spec-function-section {
		padding: calc(var(--unit)*4.8) calc(var(--unit)*4.8) calc(var(--unit)*4.2)
	}
}
@media screen and (max-width:767px) {
	.spec-function-section {
		padding: calc(var(--unit)*4) calc(var(--unit)*4) calc(var(--unit)*3.4)
	}
}
.spec-function-icon {
	display: block;
	margin-left: auto
}
@media screen and (min-width:768px) {
	.spec-function-icon {
		margin-bottom: calc(var(--unit)*1.5);
		width: calc(var(--unit)*7.2)
	}
}
@media screen and (max-width:767px) {
	.spec-function-icon {
		margin-bottom: calc(var(--unit)*1.3);
		width: calc(var(--unit)*7.2)
	}
}
.spec-function-heading {
	letter-spacing: var(--tracking-wide)
}
@media screen and (min-width:768px) {
	.spec-function-heading {
		font-size: calc(var(--unit)*2.4)
	}
}
@media screen and (max-width:767px) {
	.spec-function-heading {
		font-size: calc(var(--unit)*2)
	}
}
.spec-function-description {
	line-height: var(--leading-relaxed);
	text-align: justify
}
@media screen and (min-width:768px) {
	.spec-function-description {
		font-size: calc(var(--unit)*1.4);
		margin-top: calc(var(--unit)*1.7)
	}
}
@media screen and (max-width:767px) {
	.spec-function-description {
		font-size: calc(var(--unit)*1.4);
		margin-top: calc(var(--unit)*1.6)
	}
}
@media screen and (min-width:768px) {
	.spec-note {
		margin-top: calc(var(--unit)*6.4)
	}
}
@media screen and (max-width:767px) {
	.spec-note {
		margin-top: calc(var(--unit)*3.2);
		padding: 0 var(--spacing-s)
	}
}
.spec-note-list {
	display: flex;
	flex-direction: column
}
@media screen and (min-width:768px) {
	.spec-note-list {
		row-gap: calc(var(--unit)*.9)
	}
}
@media screen and (max-width:767px) {
	.spec-note-list {
		row-gap: calc(var(--unit)*1.1)
	}
}
.spec-note-item {
	letter-spacing: var(--tracking-wide);
	line-height: var(--leading-wide);
	padding-left: 2.2em;
	position: relative;
	text-align: justify;
	width: 100%
}
@media screen and (min-width:768px) {
	.spec-note-item {
		font-size: calc(var(--unit)*1.2)
	}
}
@media screen and (max-width:767px) {
	.spec-note-item {
		font-size: calc(var(--unit)*1)
	}
}
.spec-note-item.is-tens {
	padding-left: 2.8em
}
.spec-note-prefix {
	left: 0;
	position: absolute;
	top: 0
}
.case {
	--case-fade-in-duration: 500ms;
	--case-fade-out-duration: 120ms;
	display: flex;
	flex-direction: column;
	height: 100dvh;
	left: 0;
	opacity: 0;
	position: fixed;
	top: 0;
	transition: opacity var(--case-fade-out-duration) ease, visibility 0s var(--case-fade-out-duration);
	visibility: hidden;
	width: 100%;
	z-index: var(--zindex-modal)
}
.case.is-open {
	opacity: 1;
	transition: visibility 0s, opacity 0s;
	visibility: visible
}
.case.is-open .case-container {
	opacity: 1
}
@media screen and (min-width:768px) {
	.case.is-open .case-container {
		transition: opacity var(--case-fade-in-duration) ease;
		transition-delay: .3s
	}
}
@media screen and (max-width:767px) {
	.case.is-open .case-container {
		transition: opacity var(--case-fade-in-duration) ease
	}
}
.case.is-open .case-overlay {
	opacity: 1;
	transition: opacity var(--case-fade-in-duration) ease
}
@media screen and (max-width:767px) {
	.case.is-open .case-close {
		pointer-events: none
	}
	.case.is-open .case-close-button {
		pointer-events: auto
	}
}
@media screen and (min-width:768px) {
	.case-spingle .case-product {
		bottom: calc(var(--unit)*-16.4);
		left: calc(var(--unit)*4);
		width: calc(var(--unit)*71)
	}
}
@media screen and (max-width:767px) {
	.case-spingle .case-product {
		left: calc(var(--unit)*1.3);
		top: calc(var(--unit)*9);
		width: calc(var(--unit)*43.4)
	}
}
@media screen and (min-width:768px) {
	.case-spingle .case-card-logo img {
		width: calc(var(--unit)*11)
	}
}
@media screen and (max-width:767px) {
	.case-spingle .case-card-logo img {
		width: calc(var(--unit)*16.6)
	}
}
@media screen and (min-width:768px) {
	.case-blue-sakura .case-product {
		bottom: calc(var(--unit)*-16.5);
		left: calc(var(--unit)*2.5);
		width: calc(var(--unit)*74.2)
	}
}
@media screen and (max-width:767px) {
	.case-blue-sakura .case-product {
		left: calc(var(--unit)*1.3);
		top: calc(var(--unit)*9);
		width: calc(var(--unit)*43.5)
	}
}
@media screen and (min-width:768px) {
	.case-blue-sakura .case-card-logo img {
		width: calc(var(--unit)*9.3)
	}
}
@media screen and (max-width:767px) {
	.case-blue-sakura .case-card-logo img {
		width: calc(var(--unit)*14)
	}
}
@media screen and (min-width:768px) {
	.case-kojima .case-product {
		bottom: calc(var(--unit)*-18.6);
		left: calc(var(--unit)*7.1);
		width: calc(var(--unit)*66.6)
	}
}
@media screen and (max-width:767px) {
	.case-kojima .case-product {
		left: calc(var(--unit)*4);
		top: calc(var(--unit)*9);
		width: calc(var(--unit)*38.1)
	}
}
@media screen and (min-width:768px) {
	.case-kojima .case-card-logo img {
		width: calc(var(--unit)*10.3)
	}
}
@media screen and (max-width:767px) {
	.case-kojima .case-card-logo img {
		width: calc(var(--unit)*15.4)
	}
}
.case-frame {
	margin-bottom: auto;
	margin-top: auto;
	max-height: 100dvh;
	overflow-y: auto;
	position: relative;
	z-index: 1
}
.case-container {
	background-color: var(--color-blue-lightest);
	background-position: top;
	opacity: 0;
	position: relative;
	transition: opacity var(--case-fade-out-duration) ease, transform 0s var(--case-fade-out-duration)
}
@media screen and (min-width:768px) {
	.case-container {
		background-repeat: repeat;
		background-size: calc(var(--unit)*192) auto
	}
	html.is-webp .case-container {
		background-image: url(/k-tai/products/aquos-sense10/images/design_bg_pc.webp)
	}
	html.is-webp.is-local .case-container, html.no-webp .case-container {
		background-image: url(/k-tai/products/aquos-sense10/images/design_bg_pc.jpg)
	}
}
@media screen and (max-width:767px) {
	.case-container {
		background-repeat: repeat-y;
		background-size: 100% auto
	}
	html.is-webp .case-container {
		background-image: url(/k-tai/products/aquos-sense10/images/design_bg_sp.webp)
	}
	html.is-webp.is-local .case-container, html.no-webp .case-container {
		background-image: url(/k-tai/products/aquos-sense10/images/design_bg_sp.jpg)
	}
}
@media screen and (min-width:768px) {
	.case-container {
		clip-path: inset(0 round var(--border-radius-m));
		margin: calc(var(--unit)*2) auto;
		width: calc(var(--unit)*128)
	}
}
.case-gallery {
	overflow: hidden
}
@media screen and (max-width:767px) {
	.case-gallery-pair {
		display: grid;
		margin-top: calc(var(--unit)*6);
		row-gap: 1px
	}
}
.case-gallery-container, .case-gallery-list {
	display: flex;
	width: max-content
}
.case-gallery-item {
	flex: none
}
@media screen and (min-width:768px) {
	.case-gallery-item {
		padding-right: calc(var(--unit)*.2);
		width: calc(var(--unit)*28.8)
	}
}
@media screen and (max-width:767px) {
	.case-gallery-item {
		padding-right: 1px;
		width: calc(var(--unit)*25.2)
	}
}
.case-gallery-item img {
	-webkit-user-select: none;
	user-select: none
}
@media screen and (min-width:768px) {
	.case-gallery-item img {
		border-radius: calc(var(--unit)*.2)
	}
}
@media screen and (max-width:767px) {
	.case-gallery-item img {
		border-radius: calc(var(--unit)*.2)
	}
}
.case-contents {
	position: relative;
	z-index: 1
}
@media screen and (min-width:768px) {
	.case-contents {
		padding: var(--spacing-m) var(--spacing-m) 0 calc(var(--unit)*70)
	}
}
@media screen and (max-width:767px) {
	.case-contents {
		overflow: hidden;
		padding-top: calc(var(--unit)*42.5)
	}
}
.case-product {
	pointer-events: none;
	position: absolute
}
@media screen and (max-width:767px) {
	.case-summary {
		padding-left: var(--spacing-m);
		padding-right: var(--spacing-m);
		text-align: center
	}
}
.case-heading {
	display: flex
}
@media screen and (min-width:768px) {
	.case-heading {
		align-items: center;
		column-gap: calc(var(--unit)*2)
	}
}
@media screen and (max-width:767px) {
	.case-heading {
		flex-direction: column
	}
}
.case-heading-main {
	letter-spacing: var(--tracking-base)
}
@media screen and (min-width:768px) {
	.case-heading-main {
		font-size: calc(var(--unit)*2.8)
	}
}
@media screen and (max-width:767px) {
	.case-heading-main {
		font-size: calc(var(--unit)*3.2)
	}
}
.case-heading-sub {
	letter-spacing: var(--tracking-base)
}
@media screen and (min-width:768px) {
	.case-heading-sub {
		font-size: calc(var(--unit)*1.6)
	}
}
@media screen and (max-width:767px) {
	.case-heading-sub {
		font-size: calc(var(--unit)*1.8);
		margin-top: calc(var(--unit)*1.6)
	}
}
@media screen and (min-width:768px) {
	.case-meta {
		display: grid;
		grid-template-areas: "description purchase""maker purchase";
		grid-template-columns: 1fr calc(var(--unit)*20)
	}
}
.case-description {
	line-height: var(--leading-loose)
}
@media screen and (min-width:768px) {
	.case-description {
		font-size: calc(var(--unit)*1.4);
		grid-area: description;
		margin-top: calc(var(--unit)*2.8);
		text-align: justify
	}
}
@media screen and (max-width:767px) {
	.case-description {
		font-size: calc(var(--unit)*1.3);
		margin-top: calc(var(--unit)*2.4)
	}
}
.case-maker {
	align-items: center;
	display: flex;
	line-height: var(--leading-loose)
}
@media screen and (min-width:768px) {
	.case-maker {
		font-size: calc(var(--unit)*1.4);
		grid-area: maker;
		margin-top: calc(var(--unit)*1.3)
	}
}
@media screen and (max-width:767px) {
	.case-maker {
		font-size: calc(var(--unit)*1.3);
		justify-content: center;
		margin-top: calc(var(--unit)*2)
	}
}
.case-maker dt {
	align-items: center;
	display: flex
}
.case-maker dt:after {
	background-color: var(--color-black-20);
	content: "";
	width: 1px
}
@media screen and (min-width:768px) {
	.case-maker dt:after {
		height: calc(var(--unit)*1.2);
		margin: 0 calc(var(--unit)*.8)
	}
}
@media screen and (max-width:767px) {
	.case-maker dt:after {
		height: calc(var(--unit)*1.2);
		margin: 0 calc(var(--unit)*.8)
	}
}
.case-purchase {
	display: flex;
	justify-content: center
}
@media screen and (min-width:768px) {
	.case-purchase {
		grid-area: purchase;
		padding-bottom: calc(var(--unit)*1.2);
		place-self: end end
	}
}
@media screen and (max-width:767px) {
	.case-purchase {
		margin-top: calc(var(--unit)*2.9)
	}
}
@media screen and (min-width:768px) {
	.case-purchase .c-button-text {
		font-size: calc(var(--unit)*1.2)
	}
}
@media screen and (max-width:767px) {
	.case-purchase .c-button-text {
		font-size: calc(var(--unit)*1.2)
	}
}
.case-purchase-coming {
	align-items: center;
	background-color: var(--color-white);
	border-radius: var(--border-radius-full);
	display: flex;
	flex-direction: column;
	font-weight: var(--font-weight-medium);
	justify-content: center
}
@media screen and (min-width:768px) {
	.case-purchase-coming {
		min-width: calc(var(--unit)*16);
		padding: calc(var(--unit)*.6) calc(var(--unit)*1) calc(var(--unit)*.8)
	}
}
@media screen and (max-width:767px) {
	.case-purchase-coming {
		min-width: calc(var(--unit)*14.8);
		padding: calc(var(--unit)*.6) calc(var(--unit)*1) calc(var(--unit)*.8)
	}
}
@media screen and (min-width:768px) {
	.case-purchase-coming-en {
		font-size: calc(var(--unit)*1.2)
	}
}
@media screen and (max-width:767px) {
	.case-purchase-coming-en {
		font-size: calc(var(--unit)*1.2)
	}
}
@media screen and (min-width:768px) {
	.case-purchase-coming-ja {
		font-size: calc(var(--unit)*1);
		transform: scale(.9)
	}
}
@media screen and (max-width:767px) {
	.case-purchase-coming-ja {
		font-size: calc(var(--unit)*1);
		transform: scale(.9)
	}
}
.case-card {
	position: relative;
	z-index: 1
}
@media screen and (min-width:768px) {
	.case-card {
		margin-bottom: calc(var(--unit)*-3.2);
		margin-top: calc(var(--unit)*4.8)
	}
}
@media screen and (max-width:767px) {
	.case-card {
		padding: calc(var(--unit)*6) var(--spacing-m)
	}
}
.case-card-frame {
	background-color: var(--color-white);
	border-radius: var(--border-radius-s)
}
@media screen and (min-width:768px) {
	.case-card-frame {
		align-items: center;
		column-gap: calc(var(--unit)*3.2);
		display: flex;
		padding: calc(var(--unit)*3.2)
	}
}
@media screen and (max-width:767px) {
	.case-card-frame {
		padding: var(--spacing-m)
	}
}
.case-card-logo {
	align-items: center;
	background-color: var(--color-black-2);
	display: flex;
	justify-content: center
}
@media screen and (min-width:768px) {
	.case-card-logo {
		border-radius: calc(var(--unit)*.8);
		flex: none;
		height: calc(var(--unit)*16);
		width: calc(var(--unit)*16)
	}
}
@media screen and (max-width:767px) {
	.case-card-logo {
		border-radius: calc(var(--unit)*.8);
		height: calc(var(--unit)*18);
		width: calc(var(--unit)*24)
	}
	.case-card-contents {
		margin-top: calc(var(--unit)*3.2)
	}
}
.case-card-description {
	line-height: var(--leading-wide);
	text-align: justify
}
@media screen and (min-width:768px) {
	.case-card-description {
		font-size: calc(var(--unit)*1.2)
	}
}
@media screen and (max-width:767px) {
	.case-card-description {
		font-size: calc(var(--unit)*1.2)
	}
}
.case-card-website {
	display: flex;
	justify-content: flex-end
}
@media screen and (min-width:768px) {
	.case-card-website {
		margin-top: calc(var(--unit)*2)
	}
}
@media screen and (max-width:767px) {
	.case-card-website {
		margin-top: calc(var(--unit)*2.4)
	}
}
.case-card-website-link {
	align-items: center;
	display: flex
}
.case-card-website-link:focus-visible {
	outline: auto;
	outline: auto -webkit-focus-ring-color
}
@media screen and (min-width:768px) {
	.case-card-website-link {
		column-gap: calc(var(--unit)*.8)
	}
}
@media screen and (max-width:767px) {
	.case-card-website-link {
		column-gap: calc(var(--unit)*.8)
	}
}
@media screen and (min-width:768px) {
	.case-card-website-link-text {
		font-size: calc(var(--unit)*1.4)
	}
}
@media screen and (max-width:767px) {
	.case-card-website-link-text {
		font-size: calc(var(--unit)*1.3)
	}
}
.case-card-website-link-icon {
	align-items: center;
	background-color: var(--color-black-6);
	border-radius: 50%;
	display: flex;
	justify-content: center
}
@media screen and (min-width:768px) {
	.case-card-website-link-icon {
		height: calc(var(--unit)*2.4);
		width: calc(var(--unit)*2.4)
	}
}
@media screen and (max-width:767px) {
	.case-card-website-link-icon {
		height: calc(var(--unit)*2.4);
		width: calc(var(--unit)*2.4)
	}
}
.case-card-website-link-icon svg {
	width: 50%
}
.case-overlay {
	background-color: #000c;
	height: 100%;
	left: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	transition: opacity var(--case-fade-out-duration) ease;
	width: 100%
}
.case-close {
	position: absolute;
	z-index: 10
}
@media screen and (min-width:768px) {
	.case-close {
		right: calc(var(--unit)*2.4);
		top: calc(var(--unit)*2.4)
	}
}
@media screen and (max-width:767px) {
	.case-close {
		height: 100%;
		right: calc(var(--unit)*1.8)
	}
}
.case-close-button {
	background-color: var(--color-black);
	border-radius: 50%
}
.case-close-button:focus-visible {
	outline: auto;
	outline: auto -webkit-focus-ring-color
}
@media screen and (min-width:768px) {
	.case-close-button {
		height: calc(var(--unit)*4.8);
		width: calc(var(--unit)*4.8)
	}
}
@media screen and (max-width:767px) {
	.case-close-button {
		height: calc(var(--unit)*4.8);
		position: sticky;
		top: calc(var(--unit)*1.8);
		width: calc(var(--unit)*4.8)
	}
}
.case-close-button:after, .case-close-button:before {
	background-color: var(--color-white);
	content: "";
	height: 1px;
	left: 50%;
	position: absolute;
	top: 50%;
	width: 40%
}
.case-close-button:before {
	transform: translate(-50%, -50%) rotate(45deg)
}
.case-close-button:after {
	transform: translate(-50%, -50%) rotate(-45deg)
}