@charset "utf-8";
:root {
	--blue: #00ade0;
	--light-blue: #e6f5fa;
	--orange: #ff9a00;
	--light-orange: #ffd696;
	--black: #1c3036;
	--gray: #a2adb0;
	--light-gray: #dcdddd;
	--lemon: #fff5a6;
	--green: #3acf62;

	--marker: var(--lemmon);

	-webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none;

	scroll-snap-type: y proximity;
	scroll-padding-top: var(--m2, 30px);
 	scroll-behavior: smooth;
	interpolate-size: allow-keywords;/* width, heightの伸縮アニメーションを有効化する */

	--transition: 0.3s 0s ease;

	--full-width: 1320px;
	--wide-width: 1200px;
	--standard-width: 1080px;
	--middle-width: 960px;
	--compact-width: 840px;

	--header-height: 64px;

	--bw: 1600;/* ブラウザ幅の想定値（デザインアートボードの横幅） */
	--px: clamp(0.75px, (100vw / var(--bw)), 1px); /* 許容範囲をclampで表現 */
	/* --px: (100vw / var(--bw)); 教養範囲なしバージョン */

	--m: calc(15 * var(--px));
    --m2: calc( var(--m) * 2 );
    --m3: calc( var(--m) * 3 );
    --m4: calc( var(--m) * 4 );
    --m5: calc( var(--m) * 5 );
    --m6: calc( var(--m) * 6 );
    --m7: calc( var(--m) * 7 );
    --m8: calc( var(--m) * 8 );
    --m9: calc( var(--m) * 9 );
    --m10: calc( var(--m) * 10 );
    --ms: calc( var(--m) / 3 * 2 );

	--regular-size: calc(18 * var(--px));

	--wrap-padding-inline: var(--m);
}

/** スマホ想定の可変型単位計算 */
@media screen and (max-width: 767px) {
	:root {
		--bw: 375;
		--m: calc(15 * var(--px));
		--full-width: 100%;
		--wide-width: 100%;
		--standard-width: 100%;
		--middle-width: 100%;
		--compact-width: 100%;
		--regular-size: calc(15 * var(--px));
	}
}


body {
	width: 100svw;
	font-family: "Roboto", "Noto Sans JP",
				 -apple-system, blinkMacSystemFont, /* Macの欧文はSan Francisco (OS X 10.11以降) */
                 'Helvetica Neue', /* Macの欧文 (OS X 10.10以前) */
                 'Segoe UI',       /* Windowsの欧文 */
				 'Hiragino Kaku Gothic ProN', /* Macのヒラギノ */
                 Meiryo,           /* 游ゴシックが入っていないWindows */
                 sans-serif;
    font-size: var(--regular-size);
    font-weight: 400;
    line-height: 1.5;
	color: var(--black);
	overflow-x: clip;
	position: relative;
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}


* {
	box-sizing: border-box;
}
/** 疑似要素   
-------------------------------------------------------------------- */
*::before,
*::after {
	content: "";
	display: none;
	box-sizing: border-box;
}


/** テキスト   
-------------------------------------------------------------------- */
:is(h1, h2, h3, h4, h5, h6) {}
p {
	line-height: 1.75;
}
p + p:not([class]),
li + li {}
strong {}
:is(h1, h2, h3, h4, h5, h6, p, strong, span, b).blue {
	color: var(--blue);
}
:is(h1, h2, h3, h4, h5, h6, p, strong, span, b).orange {
	color: var(--orange);
}
.small {
	font-size: 75%;
}
.marker {
	color: var(--marker-text-color, var(--blue));
	background: linear-gradient(to top, var(--lemon) , var(--lemon) 40%, transparent 40%, transparent);
}
.note {
    font-size: 75%;
	text-indent: -1ic;
	padding-left: 1ic;
}

.one-liner {
	letter-spacing: 0.2ic;
}

.label {
	font-size: 36px;
	font-weight: 700;
	letter-spacing: 0.1ic;
	text-align: center;
}
:is(.label, .headline):has(+ p) {
	margin-bottom: 0.5lh;
}
.label + p {
	letter-spacing: 0.1ic;
	text-align: center;
}
.headline {
	font-weight: 700;
}


@media screen and (max-width: 767px) {
	p {
		text-align: justify;
	}
	.label {
		font-size: calc(27 * var(--px));
	}
}



/** 改行   
-------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
	br:is([sp], .sp, .sp-only) {
		display: none;
	}
	br:is([pc], .pc, .pc-only) {
		display: revert;
	}
}
@media screen and (max-width: 767px) {
	br:is([pc], .pc, .pc-only) {
		display: none;
	}
	br:is([sp], .sp, .sp-only) {
		display: revert;
	}
}



/** リンク   
-------------------------------------------------------------------- */
a {
	color: inherit;
    text-decoration: none;
}
a:has(img) {
	display: block;
}
p a:not([class]) {
	color: currentColor;
	text-underline-offset: 4px;
}
@media (any-hover: hover) {
	a {
		transition: var(--transition);
	}
	a:hover {
		color: var(--blue);
	}
	p a:not([class]) {
		text-decoration: underline;
	}
	p a:not([class]):hover {
		text-decoration: none;
	}
}



/** ボタン   
-------------------------------------------------------------------- */
.button {
    display: block;
    width: fit-content;
	padding-block: 0.4lh;
    padding-inline: 1ic;
	border-radius: 2lh;
    background: var(--button-bg, var(--blue, inherit));
	box-shadow: inset 0 0 0 var(--button-border-weight, 0) var(--button-border-color, transparent);

	font-size: inherit;
    color: var(--button-color, white);
	line-height: 1.5;
	font-weight: 500;
    text-align: center;
	
}
.button:has(svg.icon:not(.arrow)) {
	padding-inline: 0.85ic 1.15ic;
}
.button:has(svg.icon.arrow) {
	padding-right: 3ic;
	position: relative;
}
.button svg.icon.arrow {
	position: absolute;
	right: 0.3ic;
	top: 50%;
	translate: 0 -50%;
}
@media (hover: hover) {
	.button {
		transition: var(--transition);
	}
	.button:hover {
		background: var(--button-hover-bg, var(--button-bg, var(--orange)));
		box-shadow: inset 0 0 0 var(--button-border-hover-weight, inherit) var(--button-border-hover-color, var(--button-border-color));
		color: var(--button-hover-color, var(--button-color, white));
	}
}
@media screen and (max-width: 767px) {
	.button {
		padding-block: 0.6lh;
		font-size: calc(18 * var(--px));
	}
}



/** イメージ   
-------------------------------------------------------------------- */
img,
iframe {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	font-style: italic;
	background-repeat: no-repeat;
	background-size: cover;
	vertical-align: top;
}
img {
	outline: 0;
	-o-object-fit: contain;
	object-fit: contain;
}
picture {
	line-height: 0;
	overflow: hidden;
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}


/** ラッパー   
-------------------------------------------------------------------- */
.wrap {
	width: auto;
	max-width: var(--standard-width);
	box-sizing: content-box;
	padding-inline: var(--wrap-padding-inline);
	margin-inline: auto;

	position: relative;
	z-index: 0;
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}


/** セクション   
-------------------------------------------------------------------- */
main.content {
	overflow-x: clip;
}
main > section {
	padding-block: var(--m6);
	position: relative;
	z-index: 0;
}


@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
	main > section {
		padding-block: var(--m4);
	}
}








/** 共通スタイル  
-------------------------------------------------------------------- */
nav.global {
	display: flex;
	align-items: center;
	gap: 2ic;
}

a.logo {
	display: block;
	width: fit-content;
}
a.nav-contact {
	--button-bg: var(--green);
	--button-hover-bg: var(--orange);
}

section > .button {
	margin-top: var(--m3);
	min-width: 240px;
	margin-inline: auto;
}

svg.icon {
	width: 1lh;
	height: 1lh;
	margin-right: 0.2lh;
	fill: var(--icon-color, white);
}
svg.icon.arrow {
	margin-left: 2ic;
}
svg#icon-stock {
	display: none;
}

.text p + p {
	margin-top: 1lh;
}

.movie iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
}

@media screen and (min-width: 768px) {
	a[href*="tel:"],
	section.cta :is(.nav-appstore, .nav-googleplay) {
		pointer-events: none;
	}
}
@media screen and (max-width: 767px) {
	section > .button {
		min-width: 80%;
	}
}




/** ヘッダー  
-------------------------------------------------------------------- */
#header {
	width: var(--full-width);
	max-width: calc(100% - var(--m2));
	height: var(--header-height);
	box-sizing: border-box;
	padding-block: calc(11 * var(--px));
	padding-inline: var(--m);
	background: white;
	border-radius: var(--header-height);
	box-shadow: calc(6 * var(--px)) calc(6 * var(--px)) 0 0 rgb(from var(--black) r g b / 0.1);

	display: flex;
	justify-content: space-between;

	position: fixed;
	left: 50%;
	top: var(--m);
	translate: -50% 0;
	z-index: 10;
}

#header a.logo img {
	height: 100%;
}
#header nav.global a {
	font-weight: 500;
}
#header nav.global .button {
	padding-block: 0.2lh;
}
#header nav.global .nav-phone {
	font-size: 21px;
	--icon-color: var(--blue);
}


@media screen and (min-width: 768px) {
	.burger {
		display: none;
	}
}
@media screen and (max-width: 767px) {
	header#header {
		max-width: 100%;
		border-radius: 0;
		align-items: center;
		position: fixed;
		top: 0;
		z-index: 10;
	}
	header#header .logo {
		height: calc(45 * var(--px));
	}
	.burger {
		--size: var(--m2);
		display: block;
		width: var(--size);
		height: var(--size);
		position: relative;
	}
	.burger::before,
	.burger::after {
		display: block;
		width: 100%;
		height: 2px;
		background: var(--black);
		position: absolute;
		left: 0;
		transition: var(--transition);
	}
	.burger::before {
		top: calc(9 * var(--px));
	}
	.burger::after {
		bottom: calc(9 * var(--px));
	}
	header#header nav.global {
		transition: var(--transition);
		flex-direction: column;
		justify-content: space-between;
		width: 100svw;
		height: calc(100dvh - var(--header-height));
		padding-block: var(--m) var(--m3);
		background: rgb(from white r g b / 0.95);
		position: fixed;
		left: 0;
		top: var(--header-height);
		z-index: 100;
	}
	body.is_show_navigation {
		overflow: clip;
	}
	body:not(.is_show_navigation) header#header nav.global {
		pointer-events: none;
		opacity: 0;
	}
	body.is_show_navigation header#header nav.global {
		pointer-events: all;
		opacity: 1;
	}
	body.is_show_navigation .burger::before,
	body.is_show_navigation .burger::after {
		left: 50%;
		top: 50%;
		translate: -50% -50%;
	}
	body.is_show_navigation .burger::before {
		rotate: 45deg;
	}
	body.is_show_navigation .burger::after {
		rotate: -45deg;
	}
	header#header nav.global a {
		flex: 1 0 auto;
		height: auto;
		padding-block: 0;
		display: grid;
		place-items: center;
		font-size: calc(21 * var(--px));
	}
	header#header nav.global .nav-phone {
		font-size: calc(30 * var(--px));
	}
	header#header nav.global .nav-contact {
		font-size: calc(21 * var(--px));
		width: calc(100% - var(--m4));
	}
}





/** FV共通   
-------------------------------------------------------------------- */
section#hero {
    padding-block: 0;
	position: relative;
	overflow: hidden;
}
section#hero .wrap {
    padding-top: calc(var(--header-height) + var(--m2));
    max-width: var(--wide-width);
    height: 100%;
    box-sizing: border-box;
    position: relative;
}
section#hero .benefit {
	width: max-content;
    position: absolute;
}
section#hero .benefit .one-liner {
	text-align: center;
	font-weight: 500;

    width: fit-content;
    margin-inline: auto;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--m);
}
section#hero .benefit .one-liner::before,
section#hero .benefit .one-liner::after {
    display: inline-block;
    width: 2px;
    height: 3lh;
    background: var(--blue);
}
section#hero .benefit .one-liner::before {
    rotate: -20deg;
}
section#hero .benefit .one-liner::after {
    rotate: 20deg;
}
section#hero .benefit .character {
	margin-inline: auto;
}

/* 背景 */
main > section::before,
main > section::after {
	display: block;
	width: var(--bubble-size);
	height: var(--bubble-size);
	border-radius: var(--bubble-size);
	background: var(--bubble-color, var(--blue));
	opacity: var(--bubble-opacity, 0.05);
	position: absolute;
	z-index: -1;
	translate: -50% -50%;
	pointer-events: none;
}
section#hero img.background {
    width: 100%;
	height: 100%;
	object-fit: cover;
    position: absolute;
    left: 50%;
    top: 0;
    translate: -50% 0;
    z-index: -2;
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}



/** 下部ページFV   
-------------------------------------------------------------------- */
body.page section#hero {
    height: calc(400 * var(--px));
}
body.page section#hero .wrap {
	display: grid;
	place-items: center;
}
body.page section#hero .heading {
	text-align: center;
}
body.page section#hero .tagline {
	font-size: 45px;
	font-weight: 500;
	letter-spacing: 0.2ic;
	transform: skewX(-5deg);
}
body.page section#hero .tagline + hr {
	min-width: 400px;
	width: 100%;
	margin-block: var(--m);
	margin-inline: auto;
	border-color: currentColor;
}
body.page section#hero .lead {
	font-size: 24px;
	letter-spacing: 0.1ic;
}
body.page section#hero .benefit {
	right: var(--m);
	bottom: var(--m);
}
body.page section#hero::before {
	--bubble-size: calc(440 * var(--px));
	--bubble-color: var(--orange);
	--bubble-opacity: 1;
	left: 0;
	top: 0;
}
body.page section#hero::after {
	--bubble-size: calc(440 * var(--px));
	--bubble-color: var(--blue);
	--bubble-opacity: 1;
	left: 100%;
	top: 100%;
}
body.page section#hero + section::before {
	--bubble-size: calc(440 * var(--px));
	--bubble-color: var(--blue);
	left: 100%;
	top: 0;
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
	body.page section#hero {
		height: auto;
		padding-bottom: var(--m2);
	}
	body.page section#hero:not(:has(.benefit)) {
		height: calc(300 * var(--px));
	}
	body.page section#hero .wrap {
		display: block;
	}
	body.page section#hero:not(:has(.benefit)) .wrap {
		padding-top: var(--header-height);
	}
	body.page section#hero .heading {
		margin-top: var(--m4);
	}
	body.page section#hero .tagline {
		font-size: calc(36 * var(--px));
	}
	body.page section#hero .tagline + hr {
		min-width: unset;
	}
	body.page section#hero .lead {
		font-size: calc(18 * var(--px));
		letter-spacing: 0.03ic;
		text-align: center;
	}
	body.page section#hero .benefit {
		margin-top: var(--m2);
		margin-inline: auto;
		position: static;
		translate: none;
	}
	body.page section#hero::before,
	body.page section#hero::after,
	body.page section#hero + section::before {
		--bubble-size: calc(280 * var(--px));
	}
}



/** 下部ページ共通  
-------------------------------------------------------------------- */
section .label {
	--marker-text-color: var(--black);
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}



/** CTA   
-------------------------------------------------------------------- */
section.cta {
	background: var(--blue);
	color: white;
	overflow: hidden;
}
section.cta::after {
	--bubble-size: calc(686 * var(--px));
	--bubble-color: var(--orange);
	--bubble-opacity: 1;
	left: 100%;
	top: 100%;
}

section.cta .container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--m6) var(--m3);
}
section.cta .wrap {
	max-width: var(--standard-width);
}
section.cta .product {
	width: calc(450 * var(--px));
	padding: var(--m2);
	border-radius: calc(12 * var(--px));
	background: white;
	color: var(--black);
	text-align: center;
	display: grid;
	place-items: center;
}
:is(section, div).cta .release {
	margin-block: 0.5lh;
	width: 100%;
	background: var(--black);
	font-size: 14px;
	font-weight: 500;
	color: white;
	text-align: center;
	letter-spacing: 0.2ic;
}
:is(section, div).cta .release b {
	font-size: 150%;
}

section.cta .heading {
	flex: 1 0 40%;
}
:is(section, div).cta .tagline {
	border-radius: 2lh;
	background: white;
	font-size: 24px;
	font-weight: 500;
	letter-spacing: 0.1ic;
	text-align: center;
	color: var(--black);
}
:is(section, div).cta .tagline strong {
	color: var(--orange);
}
section.cta .heading .headline {
	margin-block: 0.5lh 0.3lh;
	font-size: 60px;
	line-height: 1.3;
}
section.cta .headline span {
	display: block;
	transform: skewX(-5deg);
}
section.cta .heading nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--m);
}
section.cta .nav-contact {
	flex: 1;
	font-size: 21px;
	box-shadow: calc(6 * var(--px)) calc(6 * var(--px)) 0 0 rgb(from var(--black) r g b / 0.3);
}
section.cta .nav-phone {
	font-size: 33px;
	display: block;
	width: fit-content;
}
section.cta .download .headline {
	font-size: 30px;
	text-decoration: underline;
	text-underline-offset: 9px;
	text-align: center;
}
section.cta .download nav {
	margin-top: var(--m4);
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: var(--m3);
}
section.cta .download nav a {
	flex: 0 0 calc(180 * var(--px));
	box-sizing: content-box;
	padding: var(--m2);
	border-radius: calc(12 * var(--px));
	background: rgb(255 255 255 / 0.2);
}
section.cta .download .code {
	margin-top: var(--m);
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
	section.cta::after {
		--bubble-size: calc(420 * var(--px));
	}
	section.cta .container {
		gap: var(--m2);
	}
	:is(section, div).cta .release {
		font-size: calc(14 * var(--px));
	}
	:is(section, div).cta .tagline {
		font-size: calc(18 * var(--px));
		line-height: 2;
	}
	section.cta .heading .headline {
		font-size: calc(42 * var(--px));
		font-feature-settings: "palt";
	}
	section.cta .heading nav {
		display: block;
	}
	section.cta .nav-contact {
		width: 100%;
		margin-inline: auto;
		margin-bottom: var(--m);
	}
	section.cta .nav-phone {
		font-size: calc(36 * var(--px));
		margin-inline: auto;
	}
	section.cta .download {
		margin-top: var(--m2);
	}
	section.cta .download .headline {
		font-size: calc(22 * var(--px));
	}
	section.cta .download nav {
		margin-top: var(--m2);
		display: block;
	}
	section.cta .download nav a {
		width: 70%;
		padding: var(--m);
		margin-inline: auto;
	}
	section.cta .download nav a + a {
		margin-top: var(--m);
	}
	section.cta .download .code {
		display: none;
	}
}





/** フッター   
-------------------------------------------------------------------- */
#footer {
	background: var(--black);
	color: white;
}
#footer .wrap {
	max-width: var(--wide-width);
	padding-top: var(--m3);
}
#footer .logo {
	width: calc(188 * var(--px));
	filter: brightness(0) invert(1);
}
#footer nav.global {
	margin-top: var(--m2);
	padding-bottom: var(--m8);
	border-bottom: 1px solid rgb(from var(--gray) r g b / 0.5);
}
#footer .nav-phone {
	margin-left: auto;
	font-size: 30px;
}
#footer .copyright {
	padding-block: var(--m4);
	font-size: 12px;
	color: var(--gray);
	text-align: center;
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
	#footer .logo {
		width: calc(130 * var(--px));
		margin-inline: auto;
	}
	#footer nav.global {
		flex-wrap: wrap;
		justify-content: center;
		gap: 2ic;
		padding-bottom: var(--m4);
	}
	#footer .nav-phone {
		margin-inline: auto;
	}
	#footer .nav-contact {
		width: 100%;
	}
}