@charset 'utf-8';

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



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

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



/*==============================
	common
==============================*/
#member-integration { position:relative; padding-top:0; border-bottom:.2em solid #fff; }
#member-integration > section { margin:6em auto 0; }

#member-integration > section.bg-color, #member-integration .bg-color > li { background:rgba(var(--gold),.2); }
#member-integration > section.bg-color { padding:6em 0; }

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


@media screen and (max-width:768px) {
#member-integration > section { margin-top:5em; }
#member-integration > section.bg-color { padding:5em 0; }
}

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



/*==============================
	header
==============================*/
header { position:relative; width:100%; height:8em; padding:1em 2em; background:rgba(255,255,255,.86); box-shadow:3px 3px 3px rgba(0,0,0,.1); z-index:100; transition:.6s; }
header.top { position:absolute; top:0; left:0; }
#notice-text:not(.hide) + header { top:50px; }
header.scroll {	position:fixed;	top:0!important;	left:0; height:6em; margin-top:0!important;	background:rgba(255,255,255,.9);	z-index:100; }
header.hide,
header.hide nav #drawer-inline { box-shadow:none; transform:translateY(-100%); z-index:0; }
header + * { padding-top:5em; }


/*logo*/
header > a { display:inline-block; }
header > a svg { display:block; width:auto; height:6em; stroke:none; }
header.scroll > a svg { height:4em; }


@media screen and (max-width:1440px) {
header { height:7em; }
header > a svg { height:5em; }
}

@media screen and (max-width:1024px) {
header { height:6em; padding:1em; }
header.scroll {	height:5em; padding:.5em 1em; }
header > a svg { height:4em; }
}

@media screen and (min-width:769px) {
header { display:flex; justify-content:space-between; }
}



/*==============================
	header menu
==============================*/
/*tgl*/
header #tgl { display:none; }
header .tgl { text-align:center; cursor:pointer;	z-index:200; }
header .tgl, header .tgl:before, header .tgl:after { transition:.6s; }

header .tgl.line { position:absolute; top:0; right:calc(.4em + 1px); width:2.2em; }
header .tgl.line:before, .tgl.line:after { content:''; }
header .tgl.line:before,
header .tgl.line:after,
header .tgl.line span {	content:'';	position:absolute;	left:0;	width:100%;	border-bottom:1px solid #333; }
header .tgl.line:before { top:.8em; }
header .tgl.line:after {	top:1.6em; }

header .tgl.text { position:relative; top:2.2em; font-family:var(--font-logo); }
header .tgl.text:after { content:'Menu'; letter-spacing:.1em; }

header #tgl:checked + .line { right:calc(.3em + 1px); }
header #tgl:checked + .line:before { transform:rotate(45deg); }
header #tgl:checked + .line:after { top:.8em; transform:rotate(-45deg); }
header #tgl:checked + .line span { left:10%; width:80%; border-color:#fff; transform:scaleX(0); }
header #tgl:checked ~ .text:after { content:'Close'; }
header #tgl:checked ~ ul { display:block!important; transform:none; opacity:1; }


/*ul*/
header #menu li { position:relative; margin-right:1em; }
header #menu li:last-of-type { margin-right:0; }
header #menu li a { display:flex; justify-content:center; align-items:center; padding:.8em 1.6em; color:var(--txt); background:rgba(var(--gold),.2); border-radius:50vh; }
header #menu li a:hover { background:none; }
header #menu li a picture { display:block; width:2em; margin-right:.4em; }
header #menu li a picture img { display:block; width:100%; }


@media screen and (max-width:1024px) {
header #menu li a { padding:.8em 1.2em; }
}

@media screen and (min-width:769px) and (max-width:1024px) {
header #menu li { margin-right:2vw; }
header #menu li a span { display:none; }
}

@media screen and (min-width:769px) {
header .tgl { display:none; }
header #menu { display:contents; }
header #menu ul { display:flex; justify-content:flex-end; align-items:center; }
}

@media screen and (max-width:768px) {
header #menu { position:absolute; top:1.4em; right:1em; margin:0; }
header.scroll #menu { top:1em; }
header #menu ul { position:fixed; top:6em; right:0; padding:1em; background:rgba(var(--aromic-rgb),.6); transform:translateX(100%); opacity:0; z-index:100; }
header.scroll #menu ul { top:5em; }
header #menu li { margin:0; }
header #menu li:nth-of-type(n+2) { margin-top:.6em; }
header #menu li a { justify-content:flex-start; background:#fff; }
}

@media screen and (max-width:425px) {
header #menu { right:.6em; }
}



/*==============================
	title
==============================*/
#member-integration h2 { margin-bottom:2em; text-align:center; font-size:1.6em; font-weight:600; letter-spacing:1px; }
#member-integration h2 img { display:block; width:2em; margin:0 auto .6em; }
#member-integration h2 span { display:block; }


@media screen and (max-width:768px) {
#member-integration h2 {font-size:1.4em; }
}



/*==============================
	main vs
==============================*/
#member-integration h1 { width:calc(100% - 3em); max-width:35em; margin:5em auto 3em; text-align:center; }
#member-integration h1 > * { display:block; margin:auto; }
#member-integration h1 svg { width:40%; max-width:16em; margin-bottom:1em; stroke:none; }
#member-integration h1 span { font-size:2em; letter-spacing:2px; }
#member-integration h1 em { margin:0 .1em; font-style:normal; font-feature-settings:'palt'; }

#member-integration h1 + p { width:calc(100% - 1em); margin:auto; text-align:center; font-size:1.16em; line-height:1.8em; }
#member-integration h1 + p em { padding:0 .2em; font-style:normal; background:rgba(var(--gold),.1); }
#member-integration h1 + p em:last-of-type { font-size:1.1em; font-weight:600; color:var(--aromic); background:none; }

#member-integration > picture { display:block; width:calc(100% - 1em); max-width:1000px; padding:2em; aspect-ratio:50/21; margin:2em auto 0; border:2px dashed #ccc; }
#member-integration > picture img { display:block; width:100%; }
#member-integration > picture + .info { width:calc(100% - 1em); max-width:1000px; margin:1em auto 0; text-align:right; font-size:.8em; }


@media screen and (min-width:769px) {
#member-integration h1 br { display:none; }
}

@media screen and (max-width:768px) {
#member-integration h1 { margin:3em auto 2em; }
#member-integration h1 span {font-size:1.8em; }
#member-integration h1 + p { font-size:1.06em; }
}

@media screen and (min-width:426px) {
#member-integration h1 + p { word-break:keep-all; word-wrap:break-word; }
#member-integration h1 + p br:nth-of-type(1),
#member-integration h1 + p br:nth-of-type(3) { display:none; }
}

@media screen and (max-width:425px) {
#member-integration h1 span { font-size:1.6em; letter-spacing:1px; }
#member-integration > picture { aspect-ratio:15/14; padding:1em; }
}



/*==============================
	desc
==============================*/
#member-integration #desc ul { display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; width:calc(100% - 2em); max-width:1600px; margin:auto; }
#member-integration #desc li { position:relative; padding:2em 1em 7em; background:#fff; }

#member-integration #desc h3 { margin-bottom:1em; text-align:center; font-size:1.2em; font-weight:600; line-height:1.6em; }
#member-integration #desc h3 em { padding:0 .2em; font-style:normal; background:rgba(var(--gold),.2); }

#member-integration #desc p { width:calc(100% - 2em); margin:auto; line-height:1.6em; }
#member-integration #desc li:last-of-type p { max-width:29em; }
#member-integration #desc p em { font-style:normal; font-weight:600; color:rgb(var(--txt-red)); }
#member-integration #desc p b { padding:0 .2em; font-size:1.1em; background:#fdecec; }

#member-integration #desc button { position:absolute; bottom:2em; left:0; right:0; width:14em; margin:1em auto 0; text-align:center; }
#member-integration #desc button a {
 display:block;
 padding:.8em 1.8em;
 font-size:1.1em;
 font-weight:600;
 text-decoration:none;
 color:#fff;
 background:rgb(var(--gold));
 border:2px solid;
 border-radius:50vh;
}
#member-integration #desc button a:hover { color:rgb(var(--gold)); background:#fff; }


@media screen and (min-width:1441px) {
#member-integration #desc li { width:calc(100%/3 - .4em); margin-left:.6em; }
#member-integration #desc li:first-of-type { margin-left:0; }
}

@media screen and (min-width:769px) and (max-width:1440px) {
#member-integration #desc ul { max-width:65em; }
#member-integration #desc li { width:calc(100%/2 - .5em); padding:2em 2vw 7em; }
#member-integration #desc li:nth-of-type(2n+2) { margin-left:1em; }
#member-integration #desc li:last-of-type { width:100%; margin-top:1em; }
}

@media screen and (min-width:769px) and (max-width:1440px) {
#member-integration #desc li:last-of-type h3 br:nth-of-type(2) { display:none; }
}

@media screen and (max-width:768px) {
#member-integration #desc ul { max-width:600px; }
#member-integration #desc li { width:100%; }
#member-integration #desc li:nth-of-type(n+2) { margin-top:1em; }
}

@media screen and (min-width:426px) {
#member-integration #desc li:not(:last-of-type) h3 br:first-of-type { display:none; }
#member-integration #desc li:last-of-type h3 br:nth-of-type(1) { display:none; }
}

@media screen and (max-width:425px) {
#member-integration #desc li:not(:last-of-type) h3 br:last-of-type { display:none; }
}

@media screen and (max-width:320px) {
#member-integration #desc h3 { font-size:4.8vw; }
#member-integration #desc p { width:100%; }
}



/*==============================
	benefit
==============================*/
#member-integration #benefit {
	position:relative;
	width:calc(100% - 2em);
	margin:-1em auto 4em;
	padding:3em 0 2em;
	text-align:center;
	font-size:1.2em;
	font-weight:600;
	line-height:1.8em;
	color:#fff;
	background:rgba(var(--aromic-rgb),.8);
	transform:rotate(-1deg);
}
#member-integration #benefit span {
	position:absolute;
	top:-1.2em;
	left:0;
	right:0;
	width:10em;
	margin:auto;
	padding:.6em 0;
	font-size:1.2em;
	letter-spacing:.1em;
	color:var(--aromic);
	background:#fff;
	border:1px solid;
}
#member-integration #benefit span:before { content:'＼'; }
#member-integration #benefit span:after { content:'／'; }
#member-integration #benefit b { position:relative; margin:0 .1em; font-size:1.3em; }
#member-integration #benefit b:before { position:absolute; left:0; bottom:0; content:''; width:100%; border-bottom:.4em solid yellow; opacity:.2; }
#member-integration #benefit em { font-style:normal; text-emphasis:dot; -webkit-text-emphasis:dot; }


@media screen and (min-width:769px) {
#member-integration #benefit { max-width:42em; }
#member-integration #benefit br:first-of-type,
#member-integration #benefit br:last-of-type { display:none; }
}

@media screen and (max-width:768px) {
#member-integration #benefit { max-width:22em; font-size:.9em; }
}



/*==============================
	point
==============================*/
#member-integration	#point > picture { display:block; width:6em; margin:-1em auto 2em; }
#member-integration	#point > picture img { display:block; width:100%; }

#member-integration	#point .info { font-size:.9em; }
#member-integration	#point p.info { margin-top:.4em; padding:.8em 1em; border:1px solid rgb(var(--gold)); }
#member-integration	#point p.info span { display:inline-block; }
#member-integration	#point b { margin:0 .2em; padding:0 .1em; font-size:1.1em; font-weight:600; background:#fff; }
#member-integration	#point em { font-style:normal; font-weight:600; }

#member-integration	#point ul { width:calc(100% - 2em); margin:auto; }
#member-integration	#point ul li { line-height:1.6em; }

#member-integration	#point ul:not(.info) { max-width:43em; }
#member-integration	#point ul:not(.info) li { padding:3em 2em; }
#member-integration	#point ul:not(.info) li:nth-of-type(odd) { background:rgba(var(--gold),.08); }
#member-integration	#point ul:not(.info) li:nth-of-type(even) { background:rgba(var(--gold),.16); }

#member-integration	#point ul.info { max-width:52em; margin-top:2em; }
#member-integration	#point ul.info li:nth-of-type(n+2) { margin-top:.2em; }

#member-integration	#point button { display:block; width:calc(100% - 2em); max-width:43em; margin:1em auto 0; text-align:right; }


@media screen and (max-width:425px) {
#member-integration	#point ul:not(.info) li { padding:2em; }
}



/*==============================
	flow
==============================*/
#member-integration #flow	[id*='flow'] { counter-reset:number 0; padding:3em; }

#member-integration	[id*='flow'] h3 { width:100%; margin-bottom:1.4em; text-align:center; font-size:1.1em; font-weight:600; line-height:1.4em; }

#member-integration	[id*='flow'] > p { width:100%; margin-bottom:1em; text-align:center; line-height:1.6em; }
#member-integration	[id*='flow'] p b { color:red; }

#member-integration	[id*='flow'] ol { display:flex; justify-content:center; align-items:center; width:100%; margin:0 auto 2em; }
#member-integration	[id*='flow'] ol li { max-width:5em; margin:0 .6em; text-align:center; }
#member-integration	[id*='flow'] ol li a { display:block; letter-spacing:1px; }

#member-integration	[id*='flow'] [id*='step'] { position:relative; padding:2em 1em; background:#eee; }
#member-integration	[id*='flow'] [id*='step']:before {
	counter-increment:number 1;
	content:'step' counter(number);
	display:block;
	width:4em;
	margin:0 auto .6em;
	padding-bottom:.4em;
	text-align:center;
	font-size:1.2em;
	font-weight:300;
	letter-spacing:.1em;
	border-bottom:1px solid;
}
#member-integration	[id*='flow'] [id*='step'] svg { position:absolute; width:2.4em; margin:auto; fill:transparent; stroke:rgb(var(--gold)); stroke-width:6px; z-index:1; }
#member-integration	[id*='flow'] [id*='step'] picture { display:block; }
#member-integration	[id*='flow'] [id*='step'] img { display:block; margin:0 auto 1em; box-shadow:2px 2px 4px rgba(0,0,0,.1); }
#member-integration	[id*='flow'] [id*='step'] img:not([src*='line']) { width:auto; height:100%; min-height:300px; max-height:460px; }
#member-integration	[id*='flow'] [id*='step'] img[src*='pin'],
#member-integration	[id*='flow'] [id*='step'] img[src*='mypage'] { max-height:320px; }
#member-integration	[id*='flow'] [id*='step'] img[src*='line'] { width:14em; max-width:300px; margin-top:.6em; }
#member-integration	[id*='flow'] [id*='step'] p:not(.info) + picture { margin-top:2em; padding-top:2.4em; border-top:1px dashed; }
#member-integration	[id*='flow'] [id*='step'] p { width:100%; }
#member-integration	[id*='flow'] [id*='step'] p + p { margin-top:.4em; }
#member-integration	[id*='flow'] [id*='step'] p + p:not(.info):before {
 position:relative;
 top:1.2em;
 content:'';
 display:block;
 width:2em;
 margin:auto;
 padding-top:1em;
 border:2em solid transparent;
 border-top:1em solid #aaa;
}

#member-integration	[id*='flow'] [id*='step']	p.info { margin-top:2em; font-size:.9em; }
#member-integration	[id*='flow'] [id*='step']	p.info span { display:block; }
#member-integration	[id*='flow'] [id*='step']	p.info span + span { margin-top:.2em; }

#member-integration #flow .attention { width:calc(100% - 2em); max-width:55em; margin:4em auto 0; }
#member-integration #flow .attention dt { margin-bottom:.6em; padding:.4em .6em; font-size:1.1em; letter-spacing:1px; background:rgba(var(--gold),.2); }


@media screen and (min-width:769px) {
#member-integration #flow	[id*='flow'] { flex-wrap:wrap; justify-content:center; }
#member-integration #flow	[id*='flow'] ol { display:none; }
#member-integration	[id*='flow'] [id*='step'] { width:calc(50% - .6em); }
#member-integration	[id*='flow'] [id*='step']:nth-of-type(2n+2) { margin-left:1.2em; }
#member-integration	[id*='flow'] [id*='step']:nth-of-type(n+3) { margin-top:1em; }
#member-integration	[id*='flow'] [id*='step'] svg { top:4em; left:-1.8em; }
}

@media screen and (max-width:768px) {
#member-integration #flow	[id*='flow'] { padding:3em 1em 2em; }
#member-integration	[id*='flow'] [id*='step'] { max-width:500px; margin:auto; }
#member-integration	[id*='flow'] [id*='step']:nth-of-type(n+2) { margin-top:1em; }
#member-integration	[id*='flow'] [id*='step'] svg { top:-1.8em; left:0; right:0; transform:rotate(90deg); }
#member-integration	[id*='flow'] [id*='step'] img:not([src*='line']) { height:70vh; }
#member-integration #flow .attention { font-size:.9em; }
}

@media screen and (min-width:426px) {
#member-integration	[id*='flow'] > p br:last-of-type { display:none; }
}



/*==============================
	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:1000px; 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:14em;
	padding:1.2em 0 1em;
	text-align:center;
 line-height:1.6em;
	background:rgba(var(--gold),.2);
	border-bottom:0;
	box-sizing:border-box;
	cursor:pointer;
	transition:.3s;
}
.item-tab > label > p { width:100%; }
.item-tab > label em { padding:0 .2em; font-style:normal; font-weight:600; background:rgba(var(--gold),.1); }
.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;
 font-weight:600;
 color:#fff;
 background:rgb(var(--gold));
 border-radius:50vh;
 z-index:2;
}
.item-tab > input:checked + label:after {
 bottom:-2em;
 content:'';
 width:1em;
 height:.6em;
 border:calc(.6em - 1px) solid transparent;
 border-top:calc(1em - 1px) solid rgb(var(--gold));
 z-index:1;
}

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

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


@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; }
.item-tab > label p { font-size:1.1em; }
}

@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:flex; }
}

@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 - .5em); margin:0 .2em; }
.item-tab > label:first-of-type { margin-left:.3em; }
.item-tab > label:last-of-type { margin-right:.3em; }
.item-tab > input:checked + label:before { font-size:12px; }
.item-tab > label p { font-size:3.5vw; }
.item-tab .panel { padding:2em; }
}

@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:12px; }
}