@charset 'utf-8';



/*==============================
	scrollin
==============================*/
/*fastview
.fv-fade { animation:fvFade 1s ease 0s 1 normal; }
@keyframes fvFade {
from { opacity:0; transform: translateY(-20px); }
to { opacity:1; transform: translateY(0); }
}*/


/*inview
[class*='iv-']:not(.iv-left) { transition:1s; opacity:0; }
.iv-right { transform:translate(-30%,0); }
.iv-right.scrollin { transform:translate(0,0); opacity:1; }
.iv-left { overflow:hidden; }
.iv-left > * { transform:translate(30%,0); transition:.8s; opacity:0; }
.iv-left.scrollin > * { transform:translate(0,0); opacity:1; }*/

/*fadein
.iv-fade { transform:translate(0,30px); }
.iv-fade.scrollin { opacity:1; transform:translate(0,0); }*/

/*alpha
.iv-alpha:not(.scrollin) { animation:alphaOut 2s linear .1s forwards, scaleOut 2s cubic-bezier(.19,1,.22,1) .1s forwards; }
.iv-alpha.scrollin { opacity:0; animation:alpha 2s linear .1s forwards, scale 2s cubic-bezier(.19,1,.22,1) .1s forwards; }
@keyframes alpha { 0% { opacity:.1; } 40% { opacity:.4; } 100% { opacity:1; } }
@keyframes alphaOut { 0% { opacity:1; } 40% { opacity:.4; } 100% { opacity:.1; } 0% { transform:scale(.01); } 100% { transform:scale(1); } }
@keyframes scale { 0% { transform:scale(.01); } 100% { transform:scale(1); } }
@keyframes scaleOut { 0% { transform:scale(1); } 100% { transform:scale(.01); } }*/



/*==============================
	common
==============================*/
#app > section:nth-of-type(n+2) { margin-top:6em; }
#app .bg-color { padding:4em 2em; background:var(--aromic-bg); }

#app p { line-height:1.6em; }

#app picture, #app img { display:block; }
#app img { width:100%; }

#app ol { counter-reset:number 0; }


@media screen and (min-width:1441px) {
#app { font-size:1.1em; }
#app > section:nth-of-type(n+2) { margin-top:7em; }
}

@media screen and (max-width:768px) {
#app .bg-color { padding:4em 2vw; }
}

@media screen and (max-width:425px) {
#app > section:nth-of-type(n+2) { margin-top:4em; }
#app .bg-color { padding:3em 1em; }
}

@media screen and (max-width:320px) {
#app { font-size:.9em; }
}



/*==============================
	title
==============================*/
#app h2 { margin-bottom:1em; text-align:center; font-size:1.4em; font-weight:600; letter-spacing:.1em; }
#app h2 b { font-size:1.6em; }


@media screen and (max-width:425px) {
#app h2 { letter-spacing:0; }
}



/*==============================
	main vs
==============================*/
#app #main-vs { position:relative; background:url(img/main-bg.webp) center / cover no-repeat var(--aromic-bg); }

#app #main-vs h1 { margin-bottom:.6em; text-align:center; font-size:2.6em; font-weight:600; color:var(--aromic); }
#app #main-vs h1 span { display:block; }
#app #main-vs ul { margin-top:1.6em; font-size:1.1em; font-weight:600; background:#fff; }
#app #main-vs li { position:relative; padding-left:1.6em; }
#app #main-vs li:nth-of-type(n+2) { margin-top:.4em; }
#app #main-vs li svg { position:absolute; top:.2em; left:0; width:1.2em; stroke:var(--aromic); stroke-width:4px; }
#app #main-vs li b { color:rgb(var(--txt-red)); }

#app #main-vs picture { width:35%; max-width:300px; aspect-ratio:15/29; }


@media screen and (min-width:1441px) {
#app #main-vs ul { margin-top:2em; font-size:1.2em; }
#app #main-vs picture { margin-left:4em; }
}

@media screen and (max-width:1440px) {
#app #main-vs picture { margin-left:2em; }
}

@media screen and (max-width:1024px) {
#app #main-vs { background-image:url(img/main-bg-sp.webp); }
#app #main-vs h1 { font-size:2.2em; }
}

@media screen and (min-width:769px) {
#app #main-vs { display:flex; justify-content:center; align-items:center; }
#app #main-vs .box { width:65%; max-width:34em; }
}

@media screen and (max-width:768px) {
#app #main-vs .box > *:not(ul) { width:calc(100% - 30%); }
#app #main-vs h1 { font-size:5.6vw; }
#app #main-vs ul { width:100%; }
#app #main-vs picture { position:absolute; top:6vw; right:2vw; width:28vw; }
}

@media screen and (min-width:426px) {
#app #main-vs h1 em { margin-right:.2em; }
#app #main-vs ul { padding:2em 2vw; }
}

@media screen and (max-width:425px) {
#app #main-vs { font-size:.9em; }
#app #main-vs h1 { font-size:7vw; line-height:1.4em; }
#app #main-vs h1 em { display:block; margin-bottom:.4em; padding-bottom:.4em; font-size:.9em; letter-spacing:1px; border-bottom:1px solid; }
#app #main-vs ul { max-width:24em; padding:1.6em .6em; font-size:1em; }
}

/*==============================
	main vs_event
==============================*/
#app #main-vs h2 { margin-bottom:.6em; text-align:center; font-size:2.6em; font-weight:600; color:rgb(var(--txt-red)); }
#app #main-vs p { margin-bottom:.6em; text-align:center; font-size:1em; font-weight:600; color:rgb(var(--txt-red)); }
#app #main-vs p b { margin-bottom:.6em; text-align:center; font-size:.7em; font-weight:600; color:rgb(var(--txt-red)); }

@media screen and (max-width:425px) {
#app #main-vs { font-size:.9em; }
#app #main-vs h1 { font-size:7vw; line-height:1.4em; }
#app #main-vs h1 em { display:block; margin-bottom:.4em; padding-bottom:.4em; font-size:.9em; letter-spacing:1px; border-bottom:1px solid; }
#app #main-vs h2 { font-size:7vw; line-height:1.4em; }
#app #main-vs ul { max-width:24em; padding:1.6em .6em; font-size:1em; }
}


/*==============================
	menu
==============================*/
#app #menu { display:flex; flex-wrap:wrap; justify-content:space-between; width:calc(100% - 2em); max-width:40em; margin:1.2em auto; text-align:center; font-weight:600; }
#app #menu li { position:relative; width:calc(100%/3 - .6em); line-height:1.3em; letter-spacing:1px; color:var(--aromic); }
#app #menu li a { display:block; padding:1em 0 1.4em; color:var(--aromic); background:var(--aromic-bg); border:1px solid; border-radius:.2em; border-left-width:.4em; }
#app #menu li a:hover { background:none; }

#app #menu li:after {
	position:absolute;
 bottom:.4em;
	left:0;
	right:0;
	content:'';
	display:block;
	width:.5em;
	height:.5em;
 margin:auto;
	border-right:2px solid;
	border-bottom:2px solid;
	transform:translate(-25%,-50%) rotate(43deg);
	transition:.4s;
}
#app #menu li:hover:after { bottom:.1em; }


@media screen and (min-width:1441px) {
#app #menu { font-size:1.1em; }
}

@media screen and (min-width:769px) {
#app #menu br { display:none; }
}

@media screen and (max-width:768px) {
#app #menu { width:calc(100% - 1.2em); margin-top:.6em; }
#app #menu li { width:calc(100%/3 - .4em); }
#app #menu li a { padding:.7em 0 1.3em; }
}

@media screen and (max-width:425px) {
#app #menu { font-size:.9em; }
#app #menu li { letter-spacing:0; }
}



/*==============================
	download
==============================*/
#app .download ul { display:flex; justify-content:center; align-items:center; margin:auto; }
#app .download li:nth-of-type(2n+2) { margin-left:1em; }
#app .download li a { display:block; }

#app .download .search { margin-top:1.2em; padding:.6em 0; text-align:center; font-size:1.1em; }
#app .download .search em { position:relative; margin:0 .6em; padding:.6em 1em .6em 2.2em; color:var(--aromic); border:1px solid var(--txt); border-radius:50vh; }
#app .download .search em svg { position:absolute; top:0; bottom:0; left:.8em; width:1.1em; margin:auto; stroke:var(--txt); stroke-width:3px; }


@media screen and (min-width:769px) {
#app .download ul { width:calc(100% - 4em); max-width:800px; }
#app .download li { display:flex; align-items:center; padding:1.6em 2em; background:#eee; }
#app .download li a + picture { width:10em; margin-left:1em; }
}

@media screen and (max-width:768px) {
#app .download ul { width:calc(100% - 2em); max-width:400px; }
#app .download li a + picture { display:none; }
}

@media screen and (max-width:425px) {
#app .download li:nth-of-type(2n+2) { margin-left:.6em; }
#app .download .search { font-size:1em; }
}



/*==============================
	function
==============================*/
#app #function .menu { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:stretch; width:calc(100% - 2em); max-width:1000px; margin:0 auto 2em; }
#app #function .menu li { position:relative; padding-top:.8em; text-align:center; font-weight:600; }
#app #function .menu li:before {
 position:absolute;
 top:0;
 left:0;
 right:0;
 display:block;
 counter-increment:number 1;
 content:counter(number);
 width:1.8em;
 height:1.8em;
 margin:auto;
 font-weight:300;
 line-height:1.8em;
 color:var(--aromic);
 background:#fff;
 border-radius:50vh;
 transition:.4s;
}
#app #function .menu a { display:block; padding:1em 0; color:var(--aromic); background:var(--aromic-bg); border:.4em solid var(--aromic-bg); border-radius:.4em; }
#app #function .menu img { display:block; width:auto; height:7em; margin:.6em auto 0; }

#app #function h3 { display:inline-block; margin-bottom:1em; text-align:center; font-weight:600; letter-spacing:1px; color:var(--aromic); }
#app #function h3:before {
 display:block;
 counter-increment:number 1;
 content:counter(number);
 width:2em;
 height:2em;
 margin:0 auto .4em;
 font-size:1.2em;
 font-weight:300;
 line-height:2em;
 background:#fff;
 border-radius:50vh;
}
#app #function h3 span { border-bottom:2px solid; }

#app #function .detail li:nth-of-type(n+2) { margin-top:2em; }
#app #function .detail .wrap { position:relative; display:flex; flex-wrap:wrap; align-items:center; max-width:1000px; margin:auto; }
#app #function .detail li:nth-of-type(even) .wrap { flex-direction:row-reverse; }



@media screen and (min-width:1025px) {
#app #function .menu img { height:8em; }
#app #function .detail .wrap .txt { width:calc(70% - 4em); }
#app #function .detail li:nth-of-type(odd) .wrap .txt { margin-right:4em; }
#app #function .detail li:nth-of-type(even) .wrap .txt { margin-left:4em; }
}

@media screen and (min-width:769px) and (max-width:1024px) {
#app #function .detail .wrap .txt { width:calc(70% - 2em); }
#app #function .detail li:nth-of-type(odd) .wrap .txt { margin-right:2em; }
#app #function .detail li:nth-of-type(even) .wrap .txt { margin-left:2em; }
}

@media screen and (min-width:769px) {
#app #function .menu li { width:calc(100%/4 - .6em); font-size:1.1em; }
#app #function .menu li:hover:before { background:var(--aromic-bg); }
#app #function .menu a { padding-top:1.2em; }
#app #function .menu a:hover { background:#fff; }
#app #function h3 { font-size:1.8em; }
#app #function .detail .detail li { padding:4em 3em; }
#app #function .detail .wrap picture { width:30%; }
}

@media screen and (max-width:768px) {
#app #function .menu { max-width:400px; }
#app #function .menu li { width:calc(100%/2 - .2em); }
#app #function .menu li:before { background:var(--aromic-bg); }
#app #function .menu li:nth-of-type(n+3) { margin-top:.4em; }
}

@media screen and (min-width:426px) and (max-width:768px) {
#app #function h3 { font-size:1.6em; }
#app #function .detail .wrap .txt { width:calc(65% - 2vw); }
#app #function .detail li:nth-of-type(odd) .wrap .txt { margin-right:2vw; }
#app #function .detail li:nth-of-type(even) .wrap .txt { margin-left:2vw; }
#app #function .detail .wrap picture { width:35%; }
}

@media screen and (min-width:426px) {
#app #function h3 span { padding:0 1em .4em; }
}

@media screen and (max-width:425px) {
#app #function .menu img { height:6em; }
#app #function h3 { display:flex; flex-wrap:wrap; justify-content:center; align-content:center; width:50%; aspect-ratio:15/29; font-size:1.4em; }
#app #function .detail li:nth-of-type(even) h3 { margin-left:auto; }
#app #function h3 span { width:100%; padding-bottom:.3em; }
#app #function .detail .wrap picture { position:absolute; top:0; width:50%; }
#app #function .detail li:nth-of-type(odd) .wrap picture { right:0; }
#app #function .detail li:nth-of-type(even) .wrap picture { left:0; }
}



/*==============================
	step
==============================*/
#app #step	[id*='flow'] { padding:3em 2em 2em; background:#fff; }
#app #step	[id*='flow'] a { text-decoration:underline; color:var(--link); }

#app #step	[id*='flow'] .attention { margin-bottom:2em; padding:1.6em; font-size:.9em; color:rgb(var(--txt-red)); background:rgba(var(--txt-red),.04); }
#app #step	[id*='flow'] .attention li { padding-left:1em; text-indent:-1em; }
#app #step	[id*='flow'] .attention li:nth-of-type(n+2) { margin-top:.2em; }

#app #step	[id*='flow'] ol li:before {
	display:inline-block;
	margin:0 auto .6em;
	padding:.1em .4em .3em;
	counter-increment:number 1;
	content:'step' counter(number);
	letter-spacing:1px;
	color:#fff;
	background:var(--txt);
}
#app #step	[id*='flow'] ol li:nth-of-type(n+2) { margin-top:2em; padding-top:1.8em; border-top:1px dashed; }
#app #step	[id*='flow'] ol li p + p { margin-top:.2em; }
#app #step	[id*='flow'] ol li p.info { font-size:.9em; color:rgb(var(--txt-red)); }
#app #step	[id*='flow'] ol li p b { font-weight:600; }
#app #step	[id*='flow'] ol li picture { max-width:300px; margin:1em auto 0; box-shadow:0 0 .6em rgba(0,0,0,.2); }


@media screen and (max-width:425px) {
#app #step { padding-left:.4em; padding-right:.4em; }
#app #step	[id*='flow'] { padding:3em 1em 2em; }
#app #step	[id*='flow'] .attention { padding:1em; }
#app #step	[id*='flow'] ol li picture { max-width:200px; }
}

@media screen and (max-width:375px) {
}



/*==============================
	flow tab
==============================*/
.item-tab *, .item-tab *:before, .item-tab *:after { box-sizing:border-box; }
.item-tab { display:flex; flex-wrap:wrap; justify-content:center; width:100%; max-width:36em; margin:auto; }

.item-tab > input[type='radio'] { display:none; margin:0; padding:0; outline:none; background:none; border:none; border-radius:0; appearance:none; }
.item-tab > label {
 position:relative;
 display:flex;
 flex-wrap:wrap;
 align-items:center;
 max-width:10em;
	padding:1em 0 1.2em;
	text-align:center;
 font-weight:600;
 line-height:1.6em;
	background:#ddd;
	border-bottom:0;
 border-radius:.4em .4em 0 0;
	box-sizing:border-box;
	cursor:pointer;
	transition:.3s;
}
.item-tab > label > p { width:100%; }
.item-tab > label > p em { display:inline-block; margin-bottom:.4em; padding:0 .4em; font-size:.9em; background:#fff; }
.item-tab > label > p span { display:block; margin-top:.4em; font-size:12px; font-weight:400; line-height:1.2em; }
.item-tab > label:hover,
.item-tab > label a:hover,
.item-tab > input:focus + label { background:none; }
.item-tab > input:checked + label { background:#fff; z-index:1; }
.item-tab > input:checked + label:before,
.item-tab > input:checked + label:after { position:absolute; left:0; right:0; display:block; margin:auto; }
.item-tab > input:checked + label:before {
 bottom:-1.4em;
 content:'\624B\9806\306F\3053\3061\3089';
 width:8em;
 padding:.2em 0 .1em;
 text-align:center;
 font-size:.9em;
 color:#fff;
 background:var(--aromic);
 border-radius:50vh;
 z-index:2;
}
.item-tab > input:checked + label:after { bottom:-2.2em; content:''; width:1em; border:.6em solid transparent; border-top:1em solid var(--aromic); z-index:1; }

/*tabarea*/
.item-tab #tabarea { width:100%; }

/*panel*/
.item-tab .panel { display:none; }


@media screen and (min-width:1025px) {
.item-tab > label { width:calc(100%/3 - 1em); margin:0 .4em; }
.item-tab > label:first-of-type { margin-left:.6em; }
.item-tab > label:last-of-type { margin-right:.6em; }
}

@media screen and (min-width:426px) and (max-width:1024px) {
.item-tab > label { width:calc(100%/3 - .6em); margin:0 .2em; }
.item-tab > label:first-of-type { margin-left:.5em; }
.item-tab > label:last-of-type { margin-right:.5em; }
}

@media screen and (min-width:769px) {
.item-tab > input:first-child:checked ~ #tabarea > .panel:first-of-type,
.item-tab > input:nth-child(3):checked ~ #tabarea > .panel:nth-of-type(2),
.item-tab > input:nth-child(5):checked ~ #tabarea > .panel:nth-of-type(3) { display:block; }
.item-tab > label > p span br { display:none; }
}

@media screen and (max-width:768px) {
.item-tab > input:first-child:checked ~ #tabarea > .panel:first-of-type,
.item-tab > input:nth-child(3):checked ~ #tabarea > .panel:nth-of-type(2),
.item-tab > input:nth-child(5):checked ~ #tabarea > .panel:nth-of-type(3) { display:block; }
}

@media screen and (max-width:425px) {
.item-tab > label { width:calc(100%/3 - .4em); margin:0 .1em; }
.item-tab > label:first-of-type { margin-left:.4em; }
.item-tab > label:last-of-type { margin-right:.4em; }
.item-tab > label p { font-size:3.6vw; }
.item-tab > label > p em { padding:.3em .2em; font-size:12px; line-height:1em; }
.item-tab > input:checked + label:before { font-size:12px; }
}

@media screen and (max-width:320px) {
.item-tab > label { width:calc(100%/3 - .14em); margin:0 .1em; }
.item-tab > label:first-of-type { margin-left:0; }
.item-tab > label:last-of-type { margin-right:0; }
.item-tab > label p { font-size:13px; }
.item-tab > label > p em { padding:.2em 0; }
}



/*==============================
	faq
==============================*/
#app #faq dl { width:calc(100% - 2em); max-width:51em; margin:auto; }
#app #faq dt { position:relative; padding:.8em 2.4em 1em 1.8em; text-indent:-1.8em; border-bottom:1px solid #777; cursor:pointer; }
#app #faq dt:after {
	position:absolute;
	top:calc(50% - 2px);
	right:.8em;
	content:'';
	display:block;
	width:.6em;
	height:.6em;
	border-right:1px solid #777;
	border-bottom:1px solid #777;
	transform:translate(-25%,-50%) rotate(43deg);
	transition:.4s;
}
#app #faq dt.open:after { transform:rotate(224deg); }
#app #faq dt:before { position:relative; top:.08em; content:'Q'; margin-right:.4em; font-size:1.4em; }
#app #faq dd { padding:1em; background:#f7f7f7; transition:.4s; }
#app #faq dt:not(.open) + dd { height:0; padding:0 1em; opacity:0; }
#app #faq dt.open + dd { margin-bottom:.4em; }
#app #faq dd:before { content:'A.'; display:block; margin-bottom:.2em; font-size:1.4em; }

#app #faq dd p.info { font-size:.9em; }
#app #faq dd p + p { margin-top:.2em; }
#app #faq dd p b { padding:0 .2em; background:rgba(255,235,50,.1); }
#app #faq dd a { text-decoration:underline; color:var(--link); }
#app #faq dd ul { margin-top:1em; }
#app #faq dd ul + * { margin-top:1em; }
#app #faq dd li { padding:1em .6em; }
#app #faq dd li:nth-of-type(odd) { background:rgba(0,0,0,.04); }
#app #faq dd li:nth-of-type(even) { background:rgba(0,0,0,.08); }
#app #faq dd li b { background:#fff; }

#app #faq dd img[alt='icon'] { display:inline-block; width:1em; margin:0 .2em; }


@media screen and (max-width:425px) {
#app #faq { font-size:.9em; }
}