@charset 'utf-8';

:root { --gold:180,150,60; }



/*==============================
	layout
==============================*/
#notice-text { display:none; }
header { top:0!important; }

#index-footer { margin-top:0!important; }

.pc_br{ display:inherit; }
@media screen and (max-width:768px){ .pc_br{ display:none; } }
.sp_br{ display:none; }
@media screen and (max-width:768px){ .sp_br{ display:inherit; } }

/*==============================
	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
==============================*/
#member-stage { position:relative; padding-top:0; border-bottom:.2em solid #fff; }
#member-stage > section { padding:6em 0; }

#member-stage > section:nth-of-type(odd) { background:rgba(var(--aromic-rgb),.12); }
#member-stage > section:nth-of-type(even) { background:var(--aromic-bg); }

#member-stage a { text-decoration:underline; color:#043c78; }
#member-stage .logo { margin:0 .1em; }
#member-stage strong { font-weight:600; color:rgb(var(--txt-red)); }


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

@media screen and (max-width:768px) {
#member-stage > section { padding:5em 0; }
}

@media screen and (max-width:425px) {
#member-stage { font-size:.92em; }
#member-stage > section { padding:4em 0; }
}


/*==============================
	title
==============================*/
#member-stage > h1 { margin-top:1em; text-align:center; font-size:2em; font-weight:600; letter-spacing:.1em; color:var(--aromic); }
#member-stage > h1 img { display: block; width: min(300px, 80%); max-width: 100%; height: auto; aspect-ratio: 680 / 120; margin: 0 auto .4em;}
#member-stage > h1 + p { width:calc(100% - 2em); max-width:30em; margin:3em auto; text-align:center; font-weight:500; line-height:1.8em; }
#member-stage > h1 + p span { display:inline-block; }
#member-stage > h1 + p b { color:rgb(var(--txt-red)); }
#member-stage > h1 + p strong { font-size:1.2em; font-weight:500; }
#member-stage > h1 + p br { display:none; }


/*h2*/
#member-stage h2 { margin-bottom:1.2em; text-align:center; font-size:1.8em; font-weight:600; color:var(--aromic); }


@media screen and (min-width:1441px) {
#member-stage > h1 { font-size:2.2em; }
}

@media screen and (max-width:768px) {
#member-stage > h1 { font-size:1.8em; }
#member-stage h2 { font-size:1.6em; }
}

@media screen and (min-width:426px) {
#member-stage > h1 + p br:nth-of-type(2) { display:block; }
}

@media screen and (max-width:425px) {
#member-stage > h1 { font-size:1.7em; letter-spacing:1px; }
#member-stage > h1 + p { width:calc(100% - .4em); margin:2em auto; }
#member-stage > h1 + p br:not(:nth-of-type(2)) { display:block; }
#member-stage h2 { font-size:1.4em; }
}


/*==============================
	menu
==============================*/
#member-stage #menu { display:flex; flex-wrap:wrap; justify-content:space-between; width:calc(100% - 2em); max-width:60em; margin:2.6em auto 4em; }
#member-stage #menu li { position:relative; display:flex; width:calc(100%/4 - 1em); text-align:center; line-height:1.4em; }
#member-stage #menu li.link { width:100%; margin-top:1.2em; }
#member-stage #menu li a { position:relative; width:100%; }

#member-stage #menu li:not(.link) a:before,
#member-stage #menu li a:after { position:absolute; content:''; display:block; margin:auto; }
#member-stage #menu li a:after { right:0; border-right:2px solid; border-bottom:2px solid; transform:translate(-25%,-50%) rotate(43deg); transition:.4s; }

#member-stage #menu li:not(.link) a {
 display:flex;
 justify-content:center;
 align-items:center;
 padding:2.2em 0;
 text-decoration:none;
 font-weight:600;
 color:var(--aromic);
 background:var(--aromic-bg);
 border:1px solid;
 border-radius:.4em;
}
#member-stage #menu li:not(.link) a:before { top:-1.2em; left:0; right:0; width:4em; height:4em; background:var(--aromic-bg); border:1px solid; border-radius:50vh; z-index:-1; }
#member-stage #menu li:not(.link) a:after { bottom:1em; left:0; width:.6em; height:.6em; color:var(--aromic); }
#member-stage #menu li:not(.link) a:hover:after { bottom:.6em; }

#member-stage #menu li.link a { display:block; padding-right:1em; text-align:right; }
#member-stage #menu li.link a:after { bottom:.4em; width:.4em; height:.4em; color:var(--link); border-width:1px; }
#member-stage #menu li.link a:hover:after { bottom:.2em; }

#member-stage #menu li a + img { position:absolute; top:-.5em; left:0; right:0; display:block; width:3.6em; margin:auto; padding:0 .8em; background:var(--aromic-bg); border-radius:1em; }


@media screen and (max-width:768px) {
#member-stage #menu { max-width:40em; margin-bottom:3em; }
#member-stage #menu li { width:calc(100%/2 - .3em); }
#member-stage #menu li:nth-of-type(n+3) { margin-top:1.8em; }
}

@media screen and (max-width:425px) {
#member-stage #menu { font-size:.96em; }
#member-stage #menu li a + img { padding:0 .6em; }
}

/*==============================
	benefit
==============================*/
#member-stage #benefit > p { text-align:center; font-weight:500; }
#member-stage #benefit > p span { margin:0 .2em; font-size:13px; }
#member-stage #benefit > p br { display:none; }

#member-stage #benefit > picture { display:block; max-width:750px; width:calc(100% - .4em); margin:2em auto; }
/*#member-stage #benefit > picture img { display:block; width:100%; }*/

#member-stage #benefit dl { width:calc(100% - 1.6em); max-width:56.3em; margin:auto; font-size:.9em; }
#member-stage #benefit dt { margin-bottom:.6em; padding-bottom:.4em; border-bottom:1px solid; }
#member-stage #benefit dd { padding-left:1em; text-indent:-1em; line-height:1.4em; }
#member-stage #benefit dd:before { content:'\203B'; }
#member-stage #benefit dd:nth-of-type(n+2) { margin-top:.4em; }


@media screen and (max-width:768px) {
#member-stage #benefit > p br:nth-of-type(2) { display:block; }
}

@media screen and (max-width:425px) {
#member-stage #benefit > p br:nth-of-type(1) { display:block; }
}



/*==============================
	detail
==============================*/
#member-stage #detail > p { position:relative; width:calc(100% - 2em); margin:1.6em auto; text-align:center; font-size:1.2em; font-weight:500; background:var(--aromic-bg); }
#member-stage #detail > p:before,
#member-stage #detail > p:after { position:absolute; left:0; right:0; content:''; display:block; margin:auto; }
#member-stage #detail > p:before { bottom:0; height:1px; background:var(--aromic); z-index:1; }
#member-stage #detail > p:after { bottom:-.5em; width:1em; height:1em; border:1px solid var(--aromic); transform:rotate(45deg); }
#member-stage #detail > p span { position:absolute; top:0; left:0; right:0; display:block; background:var(--aromic-bg); z-index:1; }
#member-stage #detail > p span:after { position:absolute; bottom:-.8em; left:0; right:0; content:''; width:1.6em; height:.8em; margin:auto; background:var(--aromic-bg); }

#member-stage #detail ul { width:calc(100% - 2em); max-width:1024px; margin:auto; }
#member-stage #detail li { position:relative; padding:1.2em 1em 1.6em; background:#fff; }
#member-stage #detail li h3 { margin-bottom:.6em; padding-bottom:.4em; font-size:1.6em; font-weight:600; border-bottom:1px solid; }
#member-stage #detail li .info { display:block; margin-top:.4em; font-size:.9em; }
#member-stage #detail li img { position:absolute; width:4.6em; margin:auto; }

#member-stage #detail ul:nth-of-type(1) { counter-reset:number 0; }
#member-stage #detail ul:nth-of-type(1) li:before,
#member-stage #detail ul:nth-of-type(1) li:after { position:absolute; display:block; }
#member-stage #detail ul:nth-of-type(1) li:before { top:.3em; left:.5em; counter-increment:number 1; content:counter(number); font-size:1.4em; font-weight:600; color:#fff; z-index:1; }
#member-stage #detail ul:nth-of-type(1) li:after {
 top:0;
 left:0;
 content:'';
 border-style:solid;
 border-width:0 0 4em 4em;
 border-color:transparent transparent var(--aromic) transparent;
 transform:rotate(180deg);
}

#member-stage #detail ul:nth-of-type(2) h3 { font-size:1.2em; }
#member-stage #detail ul:nth-of-type(2) li p { font-size:.96em; }


#member-stage #detail .stage-detail-event picture img {position: inherit !important; width: 80% !important; display: block;}
.stage-detail-event p:first-child, .stage-detail-event p:last-child {font-weight: bold; text-align: center; line-height: 2;}


@media screen and (min-width:1025px) {
#member-stage #detail ul { width:calc(100% - 4em); max-width:1440px; }
#member-stage #detail li { width:calc(100%/3 - 1em); padding:2em; }
}

@media screen and (min-width:769px) and (max-width:1024px) {
#member-stage #detail li { width:calc(100%/3 - .4em); }
}

@media screen and (min-width:769px) {
#member-stage #detail > p { max-width:26em; height:2.2em; }
#member-stage #detail > p br { display:none; }
#member-stage #detail ul { display:flex; justify-content:space-between; align-items:stretch; }
#member-stage #detail li { padding-top:6em; }
#member-stage #detail li h3 { text-align:center; }
#member-stage #detail li img { top:1em; left:0; right:0; }
}

@media screen and (max-width:768px) {
#member-stage #detail > p { max-width:18em; height:3.8em; }
#member-stage #detail > p span:after { bottom:-1em; height:1em; }
#member-stage #detail ul { max-width:600px; }
#member-stage #detail li { padding-left:6em; }
#member-stage #detail li:nth-of-type(n+2) { margin-top:1em; }
#member-stage #detail li h3 { font-size:1.4em; }
#member-stage #detail li img { top:0; bottom:0; left:1em; width:4.2em; }
}

@media screen and (max-width:425px) {
#member-stage #detail > p { font-size:1.1em; }
#member-stage #detail ul { font-size:.92em; }
#member-stage #detail li .info { font-size:13px; }
}



/*==============================
	howto
==============================*/
#member-stage #howto ol { counter-reset:number 0; width:calc(100% - 4em); margin:auto; }
#member-stage #howto li { position:relative; margin-top:1em; padding:3em 2em 2em; background:#fff; }
#member-stage #howto li:before,
#member-stage #howto li:after { position:absolute; display:block; }
#member-stage #howto li:nth-of-type(n+2):before {
 content:'';
 width:1em;
 height:.8em;
 margin:auto;
	border-width:.8em 0 .8em 1em;
	border-style:solid;
	border-color:transparent;
	border-left-color:rgba(var(--aromic-rgb),.6);
}
#member-stage #howto li:after {
 top:-.8em;
 left:1em;
 counter-increment:number 1;
 content:counter(number);
 width:2em;
 height:2em;
 text-align:center;
 font-size:1.4em;
 font-weight:600;
 line-height:2em;
 color:var(--aromic);
 background:#fff;
 border-radius:50vh;
 box-shadow:.1em .1em .3em rgba(0,0,0,.1);
}
#member-stage #howto li p { font-weight:500; }
#member-stage #howto li p b { display:inline-block; font-size:1.4em; color:rgb(var(--txt-red)); }
#member-stage #howto li p span { display:block; margin-top:.4em; font-size:.9em; font-weight:400; }


@media screen and (min-width:1441px) {
#member-stage #howto ol { justify-content:center; }
#member-stage #howto li { width:calc(100%/4 - 1.2em); max-width:27.8em; }
#member-stage #howto li:nth-of-type(n+2) { margin-left:1.6em; }
#member-stage #howto li:nth-of-type(n+2):before { left:-1.26em; }
}

@media screen and (min-width:769px) and (max-width:1440px) {
#member-stage #howto ol { justify-content:space-between; max-width:58em; }
#member-stage #howto li { width:calc(100%/2 - 1em); }
#member-stage #howto li:nth-of-type(n+3) { margin-top:3em; }
#member-stage #howto li:nth-of-type(n+2):before { left:-1.5em; }
}

@media screen and (min-width:769px) {
#member-stage #howto ol { display:flex; flex-wrap:wrap; align-items:stretch; }
#member-stage #howto li:nth-of-type(n+2):before { top:0; bottom:0; }
}

@media screen and (max-width:768px) {
#member-stage #howto ol { max-width:600px; }
#member-stage #howto li { max-width:27.8em; margin:auto; }
#member-stage #howto li:nth-of-type(n+2) { margin-top:3em; }
#member-stage #howto li:nth-of-type(n+2):before { top:-2.3em; left:0; right:0; transform:rotate(90deg); }
}

@media screen and (max-width:425px) {
#member-stage #howto ol { width:calc(100% - 1.6em); }
#member-stage #howto li { max-width:22em; padding:2.6em 1.6em 1.6em; }
}



/*==============================
	attention
==============================*/
#member-stage #attention ul { width:calc(100% - 2em); max-width:44em; margin:auto; }
#member-stage #attention li { padding-left:1em; text-indent:-1em; line-height:1.6em; }
#member-stage #attention li:before { content:'\30FB'; font-weight:600; color:var(--aromic); }
#member-stage #attention li:nth-of-type(n+2) { margin-top:.6em; }
#member-stage #attention li picture { display:block; width:100%; max-width:750px; margin:.2em auto; }
#member-stage #attention li span { font-size:13px; }



/*==============================
	faq
==============================*/
#member-stage #faq dl { width:calc(100% - 2em); max-width:51em; margin:auto; }
#member-stage #faq dt { position:relative; padding:.8em 2.4em 1em 1.8em; text-indent:-1.8em; font-weight:500; border-bottom:1px solid #777; cursor:pointer; }
#member-stage #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;
}
#member-stage #faq dt.open:after { transform:rotate(224deg); }
#member-stage #faq dt:before { position:relative; top:.08em; content:'Q'; margin-right:.4em; font-size:1.4em; }
#member-stage #faq dd { padding:1em; background:#f7f7f7; transition:.4s; }
#member-stage #faq dt:not(.open) + dd { height:0; padding:0 1em; opacity:0; }
#member-stage #faq dt.open + dd { margin-bottom:.4em; }
#member-stage #faq dd:before { content:'A.'; display:block; margin-bottom:.2em; font-size:1.4em; }

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

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


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