@charset "UTF-8";

/*-------------------------------------------------
	Reset
-------------------------------------------------*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; outline:0; vertical-align:baseline;background:transparent;}
body {line-height:1;}
article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section,picture {display:block;}
ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}
a {margin:0; padding:0; vertical-align:baseline; background:transparent;}
ins {background-color:#fff; color:#000; text-decoration:none;}
mark {background-color:#ff9; color:#000; font-style:italic; font-weight:bold;}
del {text-decoration: line-through;}
abbr[title], dfn[title] {border-bottom:1px dotted; cursor:help;}
table {border-collapse:collapse; border-spacing:0; font-size:inherit;}
hr {display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0;}
input, select {vertical-align:middle;}
img {vertical-align:top; font-size:0; line-height:0;}
button {margin: 0; padding: 0; border: none; background: none; cursor: pointer;}

/*-------------------------------------------------
	Clearfix
-------------------------------------------------*/
.cf:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}

/*-------------------------------------------------
	Base
-------------------------------------------------*/
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
:root {
	--font-jp: "Noto Sans JP",YuGothic,"Yu Gothic","ヒラギノ角ゴシック","Hiragino Sans","メイリオ", Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	--heading-ja: "Zen Maru Gothic", sans-serif;
	--key-color: #37bef0;
	--text-color: #556a6d;
	--pd-side: 30px;
	--spacing-high: 150px;
	--spacing-mid: 100px;
}
@media screen and (max-width: 666px) {
	:root {
		--pd-side: 10px;
		--spacing-high: 60px;
		--spacing-mid: 30px;
	}
}

body {
	position: relative;
	margin: 0;
	padding: 0;
	width: 100%;
	min-width: 1280px;
	font-family: var(--font-jp);
	font-weight: 700;
	font-style: normal;
	font-size: 100%;
	line-height: 1;
	color: var(--text-color);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.loading {
	width: 100%;
	height: 100%;
	background: #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
}
a:link, a:visited {
	color: var(--text-color);
	text-decoration: none;
	outline: none;
	opacity: 1;
	transition: opacity 360ms;
}
a:hover {
	text-decoration: none;
	opacity: .7;
	cursor: pointer;
}
img {
	width: 100%;
	height: auto;
}
@media screen and (max-width: 666px) {
	body {
		min-width: 100%;
	}
}

/*-------------------------------------------------
	Commons
-------------------------------------------------*/
/* Layout */
.ly_fL {
	float: left;
}
.ly_fR {
	float: right;
}
.ly_flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.ly_flex.rev {
	flex-direction: row-reverse;
}
.ly_flex.aiC {
	align-items: center;
}
.ly_flex.jcFs {
	justify-content: flex-start;
}
.ly_flex.jcC {
	justify-content: center;
}
.ly_w_100 {
	width: 100%;
}
.ly_w_wide {
	max-width: calc(1200px + ( var(--pd-side) * 2 ));
}
.ly_w_ex-wide,
.ly_w_wide {
	margin-inline: auto;
	padding-left: var(--pd-side);
	padding-right: var(--pd-side);
	width: 100%;
}
.bl_col2 {
	display: flex;
    flex-direction: column;
    justify-content: center;
	align-items: center;
	position: relative;
	aspect-ratio: 6 / 7;
	width: 100%;
	max-width: 600px;
	height: auto;
}
@media screen and (max-width: 666px) {
	.sm_floatNone {
		float: none;
	}
	.sm_flexNone {
		display: block;
	}
	.bl_col2 {
		aspect-ratio: unset;
	}
}

/* Helper */
.la_dn, .la_dn_ib {
	display: none !important;
}
.sm_dn {
	display: block !important;
}
.sm_dn_ib {
	display: inline-block;
}
span.ib {
	display: inline-block;
}
.hp_posRel {
	position: relative;
}
.hp_ofH {
	overflow: hidden;
}
.hp_color_key {
	color: var(--key-color) !important;
}
@media screen and (max-width: 666px) {
	.la_dn {
		display: block !important;
	}
	.la_dn_ib {
		display: inline-block;
	}
	.sm_dn, .sm_dn_ib {
		display: none !important;
	}
	.sm_w_100 {
		width: 100% !important;
	}
	.sm_w_100vw {
		margin-left: calc( - ( var(--pd-side) ));
		width: 100vw !important;
	}
}

/* Pattern */
.hp_bg_pattern_icon {
	position: relative;
	background: top left / 100% auto repeat-y url("../img/bg_pattern_icon.jpg");
}
.hp_bg_pattern_icon.top::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(100vw * .4571);
	background: top left / 100% auto no-repeat url("../img/bg_pattern_icon_top.jpg") transparent;
}
@media screen and (max-width: 666px) {
	.hp_bg_pattern_icon {
		background-image: url("../img/bg_pattern_icon_sm.jpg");
	}
	.hp_bg_pattern_icon.top::before {
		background-image: url("../img/bg_pattern_icon_top_sm.jpg");
	}
}

/* Margin */
.hp_miA {
	margin-inline: auto;
}
.mgn_btm_high {
	margin-bottom: var(--spacing-high);
}
.mgn_btm_mid {
	margin-bottom: var(--spacing-mid);
}
@media screen and (max-width: 666px) {
	.mgn_btm_high {
		margin-bottom: 60px;
	}
}

/* Padding */
.pd_top_high {
	padding-top: var(--spacing-high);
}
.pd_btm_high {
	padding-bottom: var(--spacing-high);
}
.pd_side {
	padding-left: var(--pd-side);
	padding-right: var(--pd-side);
}
@media screen and (max-width: 666px) {
}

/* Heading + Text */
.el_lv1H_en {
	position: relative;
	margin-bottom: 45px;
	height: 50px;
	width: auto;
	text-align: center;
	text-indent: -9999px;
	background-position: center;
	background-size: auto;
	background-repeat: no-repeat;
	z-index: 1;
}
.el_lv1H_en.how_to_use {
	background-image: url("../img/txtImg_how_to_use.svg");
}
.el_lv1H_en.users_voice {
	background-image: url("../img/txtImg_users_voice.svg");
}
.el_lv1H_en.special_plan {
	background-image: url("../img/txtImg_special_plan.svg");
}
.el_lv1H,
.el_lv2H {
	font-family: var(--heading-ja);
	font-weight: 900;
	text-align: center;
	color: var(--key-color);
}
.el_lv1H {
	margin-top: -0.3em;
	margin-bottom: 1.35em;
	font-size: 45px;
	line-height: 1.455;
	letter-spacing: 0;
}
.el_lv2H {
	margin-bottom: .5em;
	font-size: 40px;
	line-height: 1.8;
	letter-spacing: .05em;
}
.el_lv3H {
	font-family: var(--font-jp);
	font-weight: 700;
	font-size: 20px;
	line-height: 2;
	letter-spacing: .15em;
	font-feature-settings: "palt";
	text-align: center;
	color: var(--text-color);
}
p {
	font-size: 18px;
	line-height: 2.166;
	letter-spacing: .17em;
	text-align: justify;
	color: var(--text-color);
	font-feature-settings: "palt";
}
p:not(:last-of-type) {
	padding-bottom: 2em;
}
.hp_txtA_c {
	text-align: center !important;
}
.hp_txtA_l {
	text-align: left !important;
}
.hp_lS0 {
	letter-spacing: 0;
}
.hp_punc_adj_half { /* punctuation adjustment */
	margin-right: -0.5em;
}
.hp_punc_adj_quarter { /* punctuation adjustment */
	margin-right: -0.25em;
}
.small,
span.small {
	font-size: .9em;
}
@media screen and (max-width: 666px) {
	.el_lv1H_en {
		margin-bottom: 60px;
		height: 30px;
	}
	.el_lv1H {
		margin-top: 75px;
		margin-bottom: 22px;
		font-size: 28px;
		letter-spacing: 0;
	}
	.el_lv2H {
		position: relative;
		margin-bottom: 60px;
		font-size: 28px;
		line-height: 1.455;
		z-index: 1;
	}
	.el_lv3H {
		font-size: 15px;
		line-height: 1.866;
		letter-spacing: .15em;
	}
	p {
		font-size: 13px;
		line-height: 2.153;
		letter-spacing: .15em;
	}
}

/* Button */
.ly_dlBtn {
	display: flex;
	justify-content: center;
	margin-inline: auto;
}
a.el_dlBtn {
	display: block;
}
a.el_dlBtn > img {
	height: 50px;
	width: auto;
}
.el_dlBtn + .el_dlBtn {
	margin-left: 20px;
}
@media screen and (max-width: 666px) {
	a.el_dlBtn > img {
		height: 45px;
	}
	.el_dlBtn + .el_dlBtn {
		margin-left: 20px;
	}
}

/* Fade in animation */
.bl_fadeIn {
	opacity: 0 !important;
	top: 20px;
	position: relative;
}
.bl_fadeIn.in {
	opacity: 1 !important;
	top: 0 !important;
	transition: opacity 0.9s ease-out, top 0.9s ease-out;
}
.bl_fadeIn.long_x2.in {
	transition: opacity 1.8s ease-out, top 1.8s ease-out;
}
.bl_fadeIn.top_right {
	top: 10px !important;
	left: -10px !important;
}
.bl_fadeIn.top_right.in {
	top: 0 !important;
	left: 0 !important;
	transition: opacity 0.15s ease-out,top 0.15s ease-out, left 0.15s ease-out;
}
.bl_fadeIn.top_left {
	top: 10px !important;
	right: -10px !important;
}
.bl_fadeIn.top_left.in {
	top: 0 !important;
	right: 0 !important;
	transition: opacity 0.15s ease-out,top 0.15s ease-out, right 0.15s ease-out;
}
.bl_fadeIn.right {
	top: 5px !important;
	right: -20px !important;
}
.bl_fadeIn.right.in {
	top: 0 !important;
	right: 0 !important;
	transition: opacity 0.3s ease-out,top 0.3s ease-out, right 0.3s ease-out;
}
.bl_fadeIn.left {
	top: 5px !important;
	left: -20px !important;
}
.bl_fadeIn.left.in {
	top: 0 !important;
	left: 0 !important;
	transition: opacity 0.3s ease-out,top 0.3s ease-out, left 0.3s ease-out;
}
.delay_0 { transition-delay: 0s !important; }
.delay_1 { transition-delay: 0.3s !important; }
.delay_1_5 { transition-delay: 0.45s !important; }
.delay_2 { transition-delay: 0.6s !important; }
.delay_3 { transition-delay: 0.9s !important; }
.delay_4 { transition-delay: 1.2s !important; }
.delay_4_5 { transition-delay: 1.35s !important; }
.delay_5 { transition-delay: 1.5s !important; }
.delay_6 { transition-delay: 1.8s !important; }
.delay_7 { transition-delay: 2.1s !important; }
.delay_8 { transition-delay: 2.4s !important; }
@media screen and (max-width: 666px) {
	.sm_delay_3 { transition-delay: 0.6s !important; }
}

/* Fade in animation - Pon! */
.bl_ponIn {
	position: relative;
	opacity: 0;
	transform: scale(0.5);
}
.bl_ponIn.in {
	opacity: 1;
	transform: scale(1);
}
.bl_ponIn.pon_delay_1 {
	transition: opacity 0.45s 450ms, transform 0.45s 450ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bl_ponIn.pon_delay_2 {
	transition: opacity 0.45s 900ms, transform 0.45s 900ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bl_ponIn.pon_delay_3 {
	transition: opacity 0.45s 1350ms, transform 0.45s 1350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media screen and (max-width: 666px) {
	.bl_ponIn.sm_pon_delay {
		transition: opacity 0.45s 600ms, transform 0.45s 600ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
	}
}

/* Fade in animation - フェードのみ */
.bl_fadeIn_simple {
	position: relative;
	opacity: 0;
	transition: opacity 0.3s 300ms ease-out;
}
.bl_fadeIn_simple.in {
	opacity: 1;
}

/* lottie */
.wrap_lottie {
	display: none;
}
.ly_lottie {
	position: relative;
	margin: 0;
	width: 200px;
	height: 200px;
	background: transparent;
	overflow: hidden;
}
.ly_lottie.graph {
	position: absolute;
	top: 51px;
	right: -4px;
	width: 120px;
	height: 120px;
}
.ly_lottie.apollo {
	position: absolute;
	top: -32px;
    left: 32px;
    width: 360px;
    height: 360px;
}
.ly_lottie.graph-2 {
	position: absolute;
	top: 75px;
	left: 50%;
	transform: translateX(-50%);
	width: 140px;
	height: 140px;
}
.ly_lottie.ojisan {
	position: absolute;
	bottom: -16px;
    left: 5px;
    width: 290px;
    height: 290px;
}
.ly_lottie.apollo-2 {
	position: absolute;
	bottom: -40px;
    right: -20px;
    width: 300px;
    height: 300px;
}
.ly_lottie.howto {
	position: absolute;
	/* bottom: -90px;
	left: -80px;
	width: 286px;
	height: 286px; */
	bottom: -82px;
    left: -112px;
    width: 230px;
    height: 230px;
	z-index: 2;
}
/* .ly_lottie.letsgo {} */
/* .ly_lottie.good {} */
/* .ly_lottie.fight {} */
/* .ly_lottie.aiconicCharactorSitting {} */
.lottie-layer {
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
}
.backupSVG {
	z-index: 2;
	pointer-events: none;
	transition: opacity 0.6s;
	opacity: 1;
}
.lottieA, .lottieB {
	z-index: 1;
}
.lottie-layer {
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	transition: opacity 0.6s;
}
.ly_lottie.footer .lottie-layer {
	transition: none;
}
.ly_lottie.footer .lottieA { z-index: 2; opacity: 1; }
.ly_lottie.footer .lottieB { z-index: 1; opacity: 0; }
.ly_lottie.footer.is-b .lottieA { opacity: 0; }
.ly_lottie.footer.is-b .lottieB { opacity: 1; }
@media screen and (max-width: 666px) {
	.ly_lottie.graph {
		top: 32px;
        right: -2px;
        width: 75px;
        height: 75px;
	}
	.ly_lottie.apollo {
		top: -46px;
        left: 21px;
        width: 220px;
        height: 280px;
	}
	.ly_lottie.graph-2 {
		top: 50px;
		width: 100px;
		height: 100px;
	}
	.ly_lottie.ojisan {
		bottom: -10px;
        left: 0;
        width: 200px;
        height: 200px;
	}
	.ly_lottie.apollo-2 {
		bottom: -27px;
        right: -10px;
        width: 200px;
        height: 200px;
	}
	.ly_lottie.howto {
		bottom: -70px;
		left: -55px;
		width: 160px;
		height: 160px;
	}
	.ly_lottie.good {
		left: unset;
		right: -55px;
	}
	.ly_lottie.fight {
		bottom: -80px;
		left: -40px;
		width: 160px;
		height: 160px;
	}
	.ly_lottie.aiconicCharactorSitting {
		bottom: -80px;
		left: unset;
		right: -55px;
		width: 160px;
		height: 160px;
	}
}

/*-------------------------------------------------
	Top
-------------------------------------------------*/
/* #first-view */
.ly_fV {
	position: relative;
	margin-bottom: 100px;
	padding-top: 70px;
	max-width: calc(950px + ( var(--pd-side) * 2 ));
	z-index: 1;
}
.un_fV_ttl {
	font-family: var(--heading-ja);
	font-weight: 700;
	font-size: 60px;
	line-height: 1.275;
	letter-spacing: .1em;
	text-align: center;
	color: var(--key-color);
	overflow: hidden;
}
.un_fV_ttl span.txt_ja {
	display: block;
	margin-right: -.75em;
}
.un_fV_logo {
	margin: 45px auto 40px;
	width: 704px;
	height: 186px;
}
.un_fV_img {
	position: relative;
	width: 450px;
	height: 280px;
}
.un_fV_img img {
	position: absolute;
	left: 0;
}
.un_fV_txtWrap {
	width: 450px;
}
.un_fV_txt {
	margin-bottom: 30px;
	font-family: var(--heading-ja);
	font-weight: 700;
	font-size: 35px;
	line-height: 1.75;
	letter-spacing: .05em;
	text-align: center;
	color: var(--text-color);
}
@media screen and (max-width: 666px) {
	.ly_fV {
		margin-bottom: 60px;
		padding-top: 80px;
	}
	.un_fV_ttl {
		font-size: 40px;
	}
	.un_fV_logo {
		margin: 40px auto 10px;
		width: 330px;
		height: auto;
	}
	.un_fV_img {
		margin-bottom: 42px;
		margin-inline: auto;
		width: 280px;
		height: 174px;
	}
	.un_fV_txt {
		margin-bottom: 50px;
		font-size: 22px;
	}
}

/* #movie */
.ly_mov {
	margin-inline: auto;
	margin-bottom: 50px;
	padding: 0 var(--pd-side);
	width: 100%;
	max-width: calc(1152px + ( var(--pd-side) * 2 ));
}
.yt-lazy {
	position: relative;
	width: 100%;
	margin: 0 auto;
	background: #fff;
	cursor: pointer;
	overflow: hidden;
	border: 0;
	max-width: var(--yt-max-w, 1152px);
	line-height: 0; /* ベースライン隙間の抑制 */
	-webkit-tap-highlight-color: transparent; /* iOSのタップハイライト除去 */
	box-shadow: none !important; /* テーマの影が乗る場合の保険 */
}
.yt-lazy--pc {
	aspect-ratio: 16 / 9;
	--yt-max-w: 1152px;
}
.yt-lazy--sp-square {
	aspect-ratio: 1 / 1;
	--yt-max-w: 420px;
}
.yt-lazy:focus { outline: none; }
.yt-lazy:focus-visible {
	outline: none;
	outline-offset: 0;
}
.yt-thumb,
.yt-iframe {
	position: absolute;
	inset: -1px; /* 上下左右に1pxはみ出す */
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	display: block;
	border: 0;
	outline: 0;
	background: #000;
	backface-visibility: hidden;
	transform: translateZ(0);
}
.yt-thumb {
	object-fit: cover;
}
.yt-play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
}
.yt-play::before {
	content: "";
	display: block;
	position: relative;
	margin-top: 30px;
	width: 244px;
	height: 244px;
	background-image: url("../img/btn_movie_play.svg");
	transition: opacity .3s ease;
}
.yt-lazy:hover .yt-play::before {
	opacity: 0.8;
}
@media screen and (max-width: 666px) {
	.ly_mov  {
		max-width: calc(100% - ( var(--pd-side) * 2 ));
	}
	.yt-play::before {
		margin-top: 10px;
		width: 74px;
		height: 74px;
	}
}

/* #feature */
.un_feat_1_img {
	position: relative;
	width: 250px;
	z-index: 1;
}
.un_feat_1_circle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 0;
	height: 0;
	border: 50px solid #fff;
	border-radius: 50%;
	opacity: 01;
	transition: all .9s ease-out;
}
.bl_fadeIn.in .un_feat_1_circle {
	aspect-ratio: 1 / 1;
	width: 544px;
	height: auto;
	opacity: 1;
	transition-delay: 0.9s
}
.un_feat_2_img {
	position: relative;
	aspect-ratio: 506 / 455;
	width: 506px;
	z-index: 1;
}
.ly_feat_3_img {
	position: relative;
	aspect-ratio: 457 / 529;
	width: 457px;
}
.ly_feat_3_img img {
	position: absolute;
	left: 0;
}
.un_fadeIn_feat_3 {
	top: 20px;
	opacity: 0;
}
.un_fadeIn_feat_3.in {
	animation:
    apl-fade-in 0.45s 1.8s forwards,
    apl-bounce 0.45s 2.7s forwards;
}
@keyframes apl-fade-in {
	from { opacity: 0; top: 20px; }
	to   { opacity: 1; top: 0px; }
}
@keyframes apl-bounce {
	0% {
		top: 0px;
	}
	50% {
		top: 20px;
	}
	100% {
		top: 0px;
	}
}
.ly_feat_4_img {
	position: relative;
	aspect-ratio: 822 / 1165;
	width: 100%;
	max-width: 411px;
	height: auto;
}
.un_feat_4_img {
	position: relative;
	width: 411px;
	z-index: 1;
}
.ly_feat_4_img .ly_lottie {
	position: absolute;
	z-index: 2;
}
.ly_lottie.kirakira {
	margin-top: -35px;
	margin-left: -38px;
	width: 245px;
	height: 245px;
}
.ly_lottie.congratulations {
	margin-top: 67px;
	margin-left: 110px;
	width: 315px;
	height: 315px;
}
.ly_lottie.wine {
	margin-top: 348px;
	margin-left: 54px;
	width: 245px;
	height: 245px;
}
@media screen and (max-width: 666px) {
	.ly_feat {
		margin-top: 80px;
	}
	.ly_feat .el_lv3H {
		margin-top: 52px;
	}
	.un_feat_1_img {
		width: 100%;
		max-width: 170px;
		height: auto;
	}
	.un_feat_1_circle {
		border-width: 37px;
	}
	.bl_fadeIn.in .un_feat_1_circle {
		padding: 0 10px;
		width: 100%;
		max-width: 370px;
	}
	.un_feat_2_img {
		width: 100%;
		max-width: 345px;
	}
	.ly_feat_3_img {
		width: 100%;
		max-width: 326px;
	}
	.ly_feat_4_img {
		aspect-ratio: 360 / 448;
		max-width: 360px;
	}
	.ly_lottie.kirakira {
		margin-top: -30px;
		margin-left: 5%;
		width: 190px;
		height: 190px;
	}
	.ly_lottie.congratulations {
		right: -10px;
		margin-top: 50px;
		margin-left: 0;
		width: 240px;
		height: 240px;
	}
	.ly_lottie.wine {
		margin-top: 265px;
		margin-left: calc(50% - 95px);
		width: 190px;
		height: 190px;
	}
}

/* Feature - Graph */
.ly_feat_2_graph {
	position: absolute;
	margin-top: -66px;
	margin-left: -7px;
}
.line-graph {
	width: 520px;
	height: auto;
	display: block;
}
.line-graph .graph-point {
	fill: #ff9600;
	stroke: #ff9600;
	stroke-width: 0;
	opacity: 0;
}
.line-graph.in .graph-point {
	animation: pointFadeIn 0.075s forwards;
}
.line-graph.in .graph-point1 { animation-delay: 0s; }
.line-graph.in .graph-point2 { animation-delay: 0.15s; }
.line-graph.in .graph-point3 { animation-delay: 0.3s; }
.line-graph.in .graph-point4 { animation-delay: 0.45s; }
.line-graph.in .graph-point5 { animation-delay: 0.6s; }
.line-graph.in .graph-point6 { animation-delay: 0.75s; }
.line-graph.in .graph-point7 { animation-delay: 0.9s; }
@keyframes pointFadeIn {
	to { opacity: 1; }
}
.line-graph .graph-line {
	stroke: #ff9600;
	stroke-width: 8;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: var(--line-length);
	stroke-dashoffset: var(--line-length);
	opacity: 0;
}
.line-graph.in .graph-line {
	opacity: 1;
	animation: lineDraw 0.075s linear forwards;
}
.line-graph.in .graph-line1 { --line-length: 200; animation-delay: 0.075s; }
.line-graph.in .graph-line2 { --line-length: 200; animation-delay: 0.225s; }
.line-graph.in .graph-line3 { --line-length: 200; animation-delay: 0.375s; }
.line-graph.in .graph-line4 { --line-length: 200; animation-delay: 0.525s; }
.line-graph.in .graph-line5 { --line-length: 200; animation-delay: 0.675s; }
.line-graph.in .graph-line6 { --line-length: 200; animation-delay: 0.825s; }
@keyframes lineDraw {
	to { stroke-dashoffset: 0; }
}
@media screen and (max-width: 666px) {
	.ly_feat_2_graph {
		margin-top: -35px;
		margin-left: 23px;
	}
	.line-graph {
		width: 100%;
		max-width: 314px;
	}
	.line-graph .graph-line {
		stroke-width: 14;
	}
}

/* #howto */
.ly_howto {
	background-color: #fff5d2;
	overflow: hidden;
}
.el_howto_bg {
	position: absolute;
}
.el_howto_bg.howto_1 {
	top: -480px;
	left: 240px;
	aspect-ratio: 1100 / 872;
	width: 1100px;
	height: auto;
	background: top left / contain no-repeat url("../img/bg_pattern_howto_1.svg");
}
.el_howto_bg.howto_2 {
	top: -140px;
	left: -450px;
	aspect-ratio: 1170 / 1192;
	width: 1170px;
	height: auto;
	background: top left / contain no-repeat url("../img/bg_pattern_howto_2.svg");
}
.el_howto_bg.howto_3 {
	top: -540px;
	left: 630px;
	aspect-ratio: 1393 / 1177;
	width: 1393px;
	height: auto;
	background: top left / contain no-repeat url("../img/bg_pattern_howto_3.svg");
}
.el_howto_bg.howto_4 {
	top: -125px;
	left: -1025px;
	aspect-ratio: 1675 / 1258;
	width: 1675px;
	height: auto;
	background: top left / contain no-repeat url("../img/bg_pattern_howto_4.svg");
}
.el_howto_bg.howto_5 {
	bottom: -325px;
	right: -265px;
	aspect-ratio: 592 / 560;
	width: 592px;
	height: auto;
	background: top left / contain no-repeat url("../img/bg_pattern_howto_5.svg");
}
.el_howto_img {
	width: 241px;
	height: 510px;
	border: 5px solid #c8c8c8;
	border-radius: 5px;
}
.el_howto_img + .el_howto_img {
	margin-left: 8px;
}
@media screen and (max-width: 666px) {
	.el_howto_bg.howto_1 {
		top: -310px;
		left: 40px;
		width: 500px;
	}
	.el_howto_bg.howto_1_5 {
		bottom: -60px;
		left: -200px;
		aspect-ratio: 440 / 400;
		width: 440px;
		background-image: url("../img/bg_pattern_howto_1_5_sm.svg");
		z-index: 0;
	}
	.el_howto_bg.howto_2 {
		top: -205px;
		left: 140px;
		width: 535px;
	}
	.el_howto_bg.howto_3 {
		top: -145px;
		left: -295px;
		width: 500px;
		background-image: url("../img/bg_pattern_howto_3_sm.svg");
	}
	.el_howto_bg.howto_3_5 {
		bottom: -130px;
		right: -450px;
		aspect-ratio: 583 / 444;
		width: 583px;
		background-image: url("../img/bg_pattern_howto_3_5_sm.svg");
		z-index: 0;
	}
	.el_howto_bg.howto_4 {
		top: 55px;
		left: -215px;
		aspect-ratio: 440 / 400;
		width: 440px;
		background-image: url("../img/bg_pattern_howto_1_5_sm.svg");
		z-index: 0;
	}
	.el_howto_bg.howto_5 {
		bottom: -265px;
		right: -455px;
		aspect-ratio: 583 / 444;
		width: 583px;
		background-image: url("../img/bg_pattern_howto_3_5_sm.svg");
		z-index: 0;
	}
	.bl_howto + .bl_howto  {
		margin-top: 75px;
	}
	.bl_howto .ly_flex {
		position: relative;
		z-index: 1;
	}
	.el_howto_img {
		width: calc((100vw - 84px) / 2);
		max-width: 170px;
		height: auto;
	}
	.bl_howto .el_lv3H {
		margin-top: 75px;
	}
}

/* #voice */
.ly_voice {
	background: top 8px left 8px / 72px 72px repeat url("../img/bg_pattern_voice.svg");
}
.ly_voiceBubble {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	position: relative;
	margin-top: 100px;
	margin-bottom: 70px;
	padding: 70px 120px;
	width: 100%;
	height: auto;
	border-radius: 30px;
	background-color: #fff;
}
.ly_voiceBubble::before {
	content: "";
	position: absolute;
	bottom: -60px;
	left: 20px;
	width: 70px;
	height: 70px;
	background: top left / contain no-repeat url("../img/fgi_voice_notch.svg");
}
.ly_voiceBubble.rev_notch::before {
	left: unset;
	right: 20px;
	transform: scale(-1, 1);
}
.bl_voiceBubble_pic {
	width: 180px;
	height: 180px;
	border-radius: 50%;
	overflow: hidden;
}
.bl_voiceBubble_txt {
	padding-top: 10px;
	padding-left: 50px;
	width: calc(100% - 180px);
}
.bl_voiceBubble_txt > p:not(:last-of-type) {
		padding-bottom: .5em;
	}
@media screen and (max-width: 666px) {
	.ly_voice {
		background: top 8px left 8px / 43px 43px repeat url(../img/bg_pattern_voice_sm.svg);
	}
	.ly_voiceBubble {
		margin-top: 60px;
		margin-bottom: 0;
		margin-inline: auto;
		padding: 60px 30px 53px;
		width: calc(100% - 60px);
	}
	.ly_voiceBubble::before {
		bottom: -30px;
		left: 20px;
		width: 30px;
		height: 30px;
	}
	.ly_voiceBubble > .ly_flex {
		flex-direction: column;
		align-items: center;
		width: 100%;
	}
	.bl_voiceBubble_pic {
		width: 120px;
		height: 120px;
	}
	.bl_voiceBubble_txt {
		margin-top: 22px;
		padding-top: 0;
		padding-left: 0;
		width: 100%;
	}
	.bl_voiceBubble_txt > p {
		text-align: center;
	}
	.bl_voiceBubble_txt > p:not(:last-of-type) {
		padding-bottom: 2.25em;
	}
}

/* #plan */
.el_readTxt {
	margin-top: -10px;
    margin-bottom: -10px;
	font-size: 20px;
	text-align: center;
}
.ly_planList {
	margin-top: var(--spacing-mid);
	padding: 0 10px;
}
.bl_planList {
	width: calc((100% - 40px) / 3);
}
.bl_planList {
	top: 0;
	transition: top .15s ease;
}
@media (hover: hover) {
	.bl_planList:hover {
		top: -10px;
		transition: top .15s ease;
	}
}
.bl_planList_ttl {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 70px;
	border-radius: 12px 12px 0 0;
}
.bl_planList.free .bl_planList_ttl {
	background-color: var(--key-color);
}
.bl_planList.light .bl_planList_ttl {
	background-color: #00f000;
}
.bl_planList.pro .bl_planList_ttl {
	background-color: #ff8c00;
}
.bl_planList_ttl > span {
	display: block;
	font-family: var(--font-jp);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.333;
	letter-spacing: .1em;
	color: #fff;
}
.bl_planList_txt {
	padding: 24px 20px;
	border-radius: 0 0 12px 12px;
	background-color: rgba(175, 229, 249, 0.2);
}
.el_planList_txt {
	display: flex;
	align-items: center;
	font-family: var(--font-jp);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.333;
	letter-spacing: .15em;
	font-feature-settings: "palt";
	color: var(--key-color);
}
.el_planList_txt > span {
	display: inline-block;
}
.el_planList_txt.hp_lS {
	letter-spacing: .12em;
}
.el_planList_txt + .el_planList_txt {
	margin-top: 10px;
}
.el_planList_txt::before {
	content: "";
	display: inline-block;
	margin-right: 0.5em;
	width: 24px;
	height: 24px;
	background: center / contain no-repeat url("../img/icon_checked_blue.svg");
}
.bl_planList.light .el_planList_txt.checked::before {
	background-image: url("../img/icon_checked_green.svg");
}
.bl_planList.pro .el_planList_txt.checked::before {
	background-image: url("../img/icon_checked_orange.svg");
}
.bl_planList.pro .el_planList_txt.fire::before {
	background-image: url("../img/icon_fire.svg");
}
.el_planList_txt.unchecked {
	opacity: .5;
}
.el_planList_txt.unchecked::before {
	background-image: url("../img/icon_unchecked_blue.svg");
}
@media screen and (max-width: 666px) {
	.el_readTxt {
		margin-top: -40px;
		margin-bottom: 53px;
		font-size: 15px;
		line-height: 1.866;
	}
	.ly_planList {
		padding: 0 20px;
	}
	.bl_planList {
		width: 100%;
	}
	.bl_planList + .bl_planList {
		margin-top: 30px;
	}
	.bl_planList_ttl {
		height: 60px;
	}
	.bl_planList_ttl > span {
		font-size: 20px;
	}
	.bl_planList_txt {
		padding: 18px;
	}
	.el_planList_txt {
		font-size: 13px;
	}
	.el_planList_txt::before {
		width: 20px;
		height: 20px;
	}
	.el_planList_txt + .el_planList_txt {
		margin-top: 8px;
	}
}

/*-------------------------------------------------
	Footer
-------------------------------------------------*/
.ly_ftr_cont {
	width: 100%;
	max-width: 970px;
}
.ly_ftr_logo,
.ly_ftr_txt {
	width: calc((100% - 70px) / 2);
}
.un_ftr_ttl {
	margin-top: -0.4em;
	margin-bottom: 60px;
	font-family: var(--heading-ja);
	font-weight: 900;
	font-size: 33px;
	line-height: 1.63;
	letter-spacing: .06em;
	text-align: center;
	color: var(--key-color);
}
.ly_lottie.footer {
	position: relative;
	margin-top: -55px;
	margin-bottom: -24px;
	margin-inline: auto;
	width: 354px;
	height: 354px;
}
.un_ftr_logo {
	margin-bottom: 30px;
	max-width: 450px;
}
.ly_ftr_txt {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-left: 85px;
}
.bl_ftr_nav {
	margin-top: 55px;
	margin-bottom: 100px;
}
.el_ftr_nav + .el_ftr_nav {
	margin-top: 30px;
}
a.el_ftr_navLink,
.el_ftr_company {
	display: block;
	font-family: var(--font-jp);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.333;
	letter-spacing: .1em;
	font-feature-settings: "palt";
	color: var(--text-color);
}
a.el_ftr_navLink {
	display: flex;
	align-items: center;
}
a.el_ftr_navLink::before {
	content: "";
	display: inline-block;
	margin-right: 20px;
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 10px solid var(--text-color);
}
a.el_ftr_navLink > span {
	display: inline-block;
}
.el_ftr_company {
	font-size: 13px;
	line-height: 2.23;
}
.el_ftr_company > span {
	display: inline-block;
	width: 90px;
}
@media screen and (max-width: 666px) {
	.un_ftr_ttl {
		margin-bottom: 25px;
		font-size: 25px;
	}
	.ly_ftr_logo {
		width: 100%;
		text-align: center;
	}
	.ly_lottie.footer {
		margin-top: -40px;
		margin-bottom: -8px;
		width: 250px;
		height: 250px;
	}
	.un_ftr_logo {
		width: 250px;
	}
	a.el_ftr_navLink {
		font-size: 15px;
	}
	.ly_ftr_txt {
		padding: 0 30px;
		width: 100%;
	}
	.bl_ftr_nav {
		margin-bottom: 50px;
	}
	.el_ftr_nav + .el_ftr_nav {
		margin-top: 7px;
	}
	a.el_ftr_navLink::before {
		margin-right: 10px;
		border-top: 3px solid transparent;
		border-bottom: 3px solid transparent;
		border-left: 6px solid var(--text-color);
	}
	.bl_ftr_company {
		margin-bottom: -5px;
		text-align: center;
	}
	.el_ftr_company {
		font-size: 12px;
		line-height: 1.833;
	}
	.el_ftr_company.sm_lS {
		letter-spacing: 0.14em;
	}
	.el_ftr_company > span {
		margin-right: 0.5em;
		width: unset;
	}
}