@charset 'UTF-8';


/*==============================
	modal
==============================*/
body.fixed { position:fixed; width:100%; height:100%; left:0; }
#teigaku .modal-wrapper { display:none; position:fixed; top:0; display:none; width:100%; height:100vh; z-index:20000; }
#teigaku .modal-bg { position:absolute; width:100%; height:100vh; background:rgba(0,0,0,.8); }


/*content*/
#teigaku .modal-content {
	position:absolute;
 top:50%;
 left:50%;
 overflow:scroll;
	width:calc(100% - 2em);
	max-width:600px;
 max-height:84vh;
 padding:2em;
	background:#fff;
 transform:translate(-50%,-50%);
}
#teigaku .modal-content h3 { text-align:center; font-size:1.1em; font-weight:600; line-height:1.6em; letter-spacing:.1em; }
#teigaku .modal-content img { display:block; width:100%; max-width:400px; margin:2em auto; }
#teigaku .modal-content p { line-height:1.6em; text-align:left;}


/*close*/
#teigaku .modal-wrapper .modal-close { cursor:pointer; }
#teigaku .modal-wrapper .modal-close.window { width:auto; margin:.2em 0 0 2em; padding:0; border:none; border-bottom:1px solid; border-radius:0; cursor:pointer; }
#teigaku .modal-content > .modal-close { width:6em; margin:2em auto 0; padding:.4em; text-align:center; color:var(--link); border:1px solid; border-radius:4em; transition:.4s; }
#teigaku .modal-content > .modal-close:hover { background:var(--bg); border-color:var(--bg); }


@media screen and (max-width:425px) {
#teigaku .modal-content { top:44%; height:100vh; height:calc(var(--vh,1vh) * 100); }
}



/*==============================
	iframe
==============================*/
[id^='iframe-'] .modal-content { height:80vh; padding:0!important; overflow:hidden!important; }

[id^='iframe-'] .message { padding:1em; font-size:.96em; color:#333; background:#f5f5f5; }
[id^='iframe-'] .message .link { text-align:right; color:var(--link); }
[id^='iframe-'] .message .link > * { display:inline-block; margin:.2em 0 0 2em; }

[id^='iframe-'] button {
 display:inherit;
 margin:2em auto;
 padding:.8em 1.6em;
 font-weight:600;
 letter-spacing:1px;
 color:#fff!important;
 background:#555!important;
 border-radius:10em;
 cursor:pointer;
}
[id^='iframe-'] iframe { width:100%; height:80vh; }



/*==============================
	movie
==============================*/
.youtube,
.youtube iframe { display:block; width:80vw; max-width:500px; height:50vw; max-height:280px; margin:auto; }

.youtube { margin:2em auto; cursor:pointer; }
.youtube:hover { background-color:transparent; }
.youtube > *:not(script) { display:block; width:100%; max-width:500px; }
.youtube > * + p { margin:.6em auto 0; text-align:right; }


@media screen and (min-width:769px) {
.youtube,
.youtube iframe { width:60vw; height:40vw; }
}

@media screen and (max-width:768px) {
.youtube { margin-top:2em; }
}



/*==============================
	link option
==============================*/
#teigaku a.option {
 display:block;
 width:calc(100% - 2em);
 max-width:30em;
 margin:auto;
 padding:1.1em 1em 1em;
 text-shadow:var(--text-shadow-2px);
 color:var(--opColor-gr1);
 background:url(/img/subsc/original-blend.png) center right 1em / 6em no-repeat #fff;
 border-left:4px solid var(--opColor-gr2);
 border-radius:.2em;
 box-shadow:2px 2px 4px rgba(0,0,0,.1);
}
#teigaku a.option:hover { box-shadow:none; transform:rotate(-.6deg); }
#teigaku a.option b { display:block; margin-bottom:.26em; font-size:1.12em; font-weight:600; }
#teigaku a.option:after { background-color:#fff; }


@media screen and (min-width:1025px) {
#teigaku a.option span:after { content:'\3044\305F\3057\307E\3059'; }
}

@media screen and (min-width:769px) {
#teigaku a.option b { margin-bottom:.1em; font-size:1.1em; }
#teigaku a.option span { font-size:.9em; }
}




/*==============================
	lead
==============================*/
#lead { position:relative; overflow:hidden; }

#lead .inner { position:absolute; top:6vw; right:4vw; padding:2em 1.6em; font-size:1.3em; font-weight:600; background:rgba(255,255,255,.9); z-index:2; }

#lead h2 { margin-bottom:.6em; font-size:1.4em; line-height:1.8em; }
#lead p { line-height:2em; }
#lead p + p { margin-top:1em; }

#lead ul {
 position:absolute;
 top:4vw;
 left:4vw;
 padding:1em;
 text-shadow:2px 2px 4px rgba(0,0,0,.6);
 font-size:1.26em;
 font-weight:600;
 color:#fff;
 border:2px solid;
 z-index:2;
}
#lead li svg { position:relative; top:calc(.2em + 1px); width:1.2em; margin-right:.4em; stroke:#fff; stroke-width:7px; }

#lead picture { display:block; aspect-ratio:auto; }
#lead picture img { display:block; min-width:100%; height:100vh; min-height:38em; object-fit:cover; object-position:right; }


@media screen and (max-width:2000px) {
#lead picture img { object-position:left; }
}

@media screen and (min-width:1601px) {
#lead { font-size:1vw; }
#lead p { font-size:.8em; }
}

@media screen and (min-width:1441px) {
#lead .inner { top:4em; right:8em; }
#lead ul { top:2em; left:6em; padding:2em; }
}

@media screen and (max-width:1440px) {
#lead picture img { object-position:left -14vw bottom 0; }
}

@media screen and (max-width:1024px) {
#lead .inner { font-size:1.2em; }
#lead picture img { object-position:left -30vw bottom 0; }
}

@media screen and (min-width:769px) {
#lead .inner { padding:2em; }
}

@media screen and (max-width:768px) {
#lead { font-size:.9em; }
#lead .inner { right:4vw; width:calc(100% - 8vw); }
#lead ul { top:auto; bottom:12vw; left:auto; right:4vw; }
#lead picture img { min-height:56em; object-position:bottom; }
}

@media screen and (min-width:426px) and (max-width:768px) {
#lead .inner { max-width:36em; padding:2em 4vw; }
#lead p br { display:none; }
}

@media screen and (max-width:425px) {
#lead { font-size:.86em; }
#lead .inner { top:10vw; left:6vw; right:auto; max-width:21.2em; font-size:1.1em; }
#lead ul { padding:1em 3vw; }
#lead li svg { margin-right:.2em; }
#lead picture img { max-height:700px; object-position:left -4vw bottom 0; }
}



/*==============================
	description
==============================*/
#description li { position:relative; }

#description .inner { padding:2em; }
#description h3 { margin-bottom:.6em; font-size:1.7em; font-weight:600; line-height:1.6em; color:#b38b7e; }
#description p { margin:auto; line-height:1.8em; }

#description picture { display:block; aspect-ratio:4/3; }
#description picture img { display:block; width:100%; }


@media screen and (min-width:1601px) {
#description { font-size:1vw; }
#description .inner { padding:4vw 8vw; }
}

@media screen and (min-width:1025px) and (max-width:1600px) {
#description .inner { padding:2em 4em; }
}

@media screen and (min-width:1025px) {
#description .inner { font-size:1.1em; }
}

@media screen and (min-width:769px) {
#description li > * { width:50%; }
#description li:nth-of-type(odd) .inner { float:right; right:0; }
#description li:nth-of-type(odd) picture { float:left; }
#description li:nth-of-type(even) .inner { float:left; left:0; }
#description li:nth-of-type(even) picture { float:right; }
#description .inner { position:absolute; top:0; bottom:0; height:fit-content; margin:auto; }
}

@media screen and (min-width:769px) and (max-width:1024px) {
#description h3 { margin-bottom:.4em; font-size:3vw; }
#description p { line-height:1.6em; }
}

@media screen and (max-width:768px) {
#description li:nth-of-type(n+2) { margin-top:2em; }
#description h3 { text-align:center; font-size:1.4em; }
#description li:nth-of-type(1) p { max-width:37em; }
#description li:nth-of-type(2) p { max-width:40em; }
#description li:nth-of-type(3) p { max-width:38em; }
}



/*==============================
	gallery
==============================*/
#img-gallery { width:100%; margin:2em auto; }

#img-gallery ul { transition-timing-function:linear; }

#img-gallery picture { display:block; width:100%; aspect-ratio:20/13; }
#img-gallery img { display:block; width:100%; }



/*==============================
	case
==============================*/
#case { margin-top:0!important; padding:4em 0; background:#d8cdc7; }

#case h2,
#case > p { text-align:center; font-weight:600; color:#fff; }
#case h2 { margin-bottom:.4em; font-size:2.4em; letter-spacing:.1em; }
#case > p { font-size:1.1em; line-height:1.6em; }


#case ul { width:calc(100% - 4em); max-width:1600px; margin:2em auto 0; }
#case li picture { display:block; aspect-ratio:2/1; }
#case li img { display:block; width:100%; }
#case li div { padding:2em; line-height:1.6em; background:#fff; }
#case li h3 { margin-bottom:1em; font-size:1.2em; font-weight:600; }
#case li h3 span { padding:0 .4em .2em; border-bottom:1px solid; }

/*button*/
#case button {
 position:relative;
 display:block;
 width:12em;
 margin:2em auto 0;
 padding:1em 0 .9em;
 text-align:center;
 font-size:1.2em;
 font-weight:600;
 line-height:1em;
 letter-spacing:1px;
 border:1px solid;
 border-radius:50vh;
 cursor:pointer
}
#case button:not(.active):hover { border-color:transparent; }
#case button:not(.active) span:after { content:'\306F\3053\3061\3089'; }
#case button svg { position:relative; top:.1em; left:.1em; width:.9em; fill:#555; transform:rotate(-20deg); }

/*active*/
#case button.active svg { display:none; }
#case button.active:before,
#case button.active:after { position:absolute; left:calc(50% - .4em); content:''; }
#case button.active:before { bottom:calc(-1em + 1px); border:.4em solid transparent; border-top:.6em solid #d8cdc7; z-index:2; }
#case button.active:after { bottom:calc(-1em - 1px); border:.4em solid transparent; border-top:.6em solid #555; z-index:1; }

/*inner*/
#case button:not(.active) + .inner { display:none; }
#case > .inner { width:calc(100% - 2em); max-width:800px; margin:2em auto 0; transition:.4s; }
#case > .inner dl { display:flex; flex-wrap:wrap; align-items:stretch; }
#case > .inner dl > * { padding:1em; }
#case > .inner dl > *:nth-of-type(n+2) { margin-top:.1em; }
#case > .inner dt { width:8em; background:rgba(255,255,255,.2); }
#case > .inner dd { width:calc(100% - 8em); background:rgba(255,255,255,.6); }


@media screen and (min-width:769px) and (max-width:1600px) {
#case li div { padding:1em; }
}

@media screen and (min-width:1025px) {
#case li { width:calc(100%/3 - 1em); }
#case li:nth-of-type(n+4) { margin-top:1.6em; }
}

@media screen and (min-width:769px) and (max-width:1024px) {
#case li { width:calc(100%/2 - 1em); }
#case li:nth-of-type(n+3) { margin-top:2em; }
}

@media screen and (min-width:769px) {
#case > p br { display:none; }
#case ul { display:flex; flex-wrap:wrap; justify-content:space-between; }
#case li h3 { text-align:center; }
}

@media screen and (max-width:768px) {
#case h2 { font-size:2em; }
#case ul { max-width:36em; }
#case li:nth-of-type(n+2) { margin-top:2em; }
#case li h3 span { padding-bottom:.4em; }
#case > .inner { margin-top:1.6em; }
}

@media screen and (min-width:426px) {
#case > p br:first-of-type { display:none; }
}

@media screen and (max-width:425px) {
#case ul { width:calc(100% - 3em); }
#case li div { padding:1.6em 1em; }
#case > .inner dl > * { padding:1em .6em; }
}



/*==============================
	trouble
==============================*/
#trouble h2 { width:calc(100% - 3em); max-width:88em; margin:auto; text-align:center; font-weight:600; }
#trouble h2:before { position:relative; top:1em; content:''; display:block; width:100%; height:1px; background:#555; z-index:-1; }
#trouble h2 span { display:inline-block; padding:0 1em; font-size:1.4em; line-height:1.6em; background:#fff; }


/*block*/
#trouble .block { position:relative; top:-1.2em; width:calc(100% - 3em); max-width:88em; margin:0 auto 2em; padding:4em 3em 3em; border:1px solid #555; border-top:none; }
#trouble .block:before,
#trouble .block:after { position:absolute; left:calc(50% - 1.2em); content:''; }
#trouble .block:before { bottom:-2.5em; border:1em solid transparent; border-top:1.6em solid #fff; z-index:2; }
#trouble .block:after { bottom:calc(-2.5em - 1px); border:1em solid transparent; border-top:1.6em solid #555; z-index:1; }
#trouble .block dl:first-of-type { max-width:23em; }
#trouble .block dl:nth-of-type(2) { max-width:21em; }
#trouble .block dl:last-of-type { max-width:25em; }
#trouble .block dt { text-align:center; font-size:1.2em; font-weight:600; }
#trouble .block dd { font-weight:500; line-height:1.6em; }
#trouble .block dd:nth-of-type(n+2) { margin-top:.4em; }
#trouble .block dt + dd { margin-top:.8em; }


/*text*/
#trouble .block + p { text-align:center; font-size:1.1em; font-weight:600; line-height:2.4em; }
#trouble .block + p b { margin-right:.1em; font-size:1.4em; color:var(--blue); }

#trouble p.info { margin-top:2em; font-size:.9em; line-height:1.4em; }


@media screen and (min-width:1025px) {
#trouble .block { display:flex; flex-wrap:wrap; justify-content:space-around; }
#trouble .block dl { width:calc(100%/3 - 1em); }
#trouble p.info { text-align:right; }
}

@media screen and (max-width:1024px) {
#trouble h2 { max-width:40em; }
#trouble h2 span { padding:0 .6em; }
#trouble .block { max-width:40em; padding:3em 0 2em; }
#trouble .block dl { width:100%; margin:auto; text-align:center; }
#trouble .block dl:nth-of-type(n+2) { margin:1.6em auto 0; }
}

@media screen and (min-width:426px) {
#trouble h2 br { display:none; }
}

@media screen and (max-width:425px) {
#trouble h2:before { top:2em; }
#trouble .block { top:-2.4em; margin-bottom:1em; padding:4em 1.2em 2em; }
#trouble .block dd { text-align:left; }
#trouble .block + p { font-size:4vw; }
}



/*==============================
	Benefit
==============================*/
#benefit { position:relative; margin-bottom:10em; }


/*box*/
#benefit dl { position:relative; width:calc(100% - 2em); max-width:50em; margin:auto; padding:2em 1em; background:var(--bg); }
#benefit dl > * { width:100%; }
#benefit dt { position:absolute; top:-1em; left:0; text-align:center; font-size:1.2em; font-weight:600; letter-spacing:1px; color:var(--blue); }
#benefit dd.circle { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; }
#benefit dd.circle span {
 width:7em;
 height:7em;
 margin:0 .6em;
 text-align:center;
 font-size:1.1em;
 line-height:7em;
 letter-spacing:1px;
 font-weight:600;
 color:var(--blue);
 background:#fff;
 border-radius:50%;
}
#benefit dd:not(.circle) { margin-bottom:.6em; text-indent:-.3em; line-height:1.4em; }
#benefit dd:not(.circle):last-of-type { margin-bottom:0; }
#benefit dd:not(.circle):before { position:relative; top:-.2em; right:.4em; content:''; display:inline-block; width:.3em; height:.3em; background:var(--blue); transform:rotate(45deg); }

#benefit dl + p { width:calc(100% - 2em); max-width:55em; margin:2em auto 0; line-height:2em; }
#benefit p a { position:relative; display:block; margin-top:1em; text-align:right; }
#benefit p a object { position:relative; top:.2em; display:inline-block; width:1.4em; height:1.4em; margin-right:.6em; }


/*supp*/
#benefit .supp { max-width:18em; }
#benefit .supp a { color:var(--blue); }
#benefit .supp em { background:var(--bg); }

#benefit .supp a.antivirus:before {
 position:absolute;
 right:-2em;
 bottom:-1em;
 content:'';
 width:4em;
 height:4em;
 background:url(/svg/i-leaf-gr.svg) center / 100% no-repeat;
 transform:rotate(20deg);
}
#benefit .supp a.antivirus { color:#77934a; }
#benefit .supp a.antivirus em { background:#f4f7f0; }


/*antivirus*/
.antivirus h3 { max-width:22em; margin:0 auto 1.4em; text-align:center; line-height:1.6em; }
.antivirus h3 span { letter-spacing:0; }
.antivirus h3 b { display:block; margin-top:.4em; padding-top:.5em; font-size:1.2em; letter-spacing:1px; border-top:1px solid; }
.antivirus p { line-height:1.6em; }
.antivirus p + p { margin-top:.4em; }
.antivirus p.pop { margin-top:1em; }
.antivirus strong { background:#f4f7f0; }
.antivirus dl { margin:1em auto; padding:1em; background:#f4f7f0; }
.antivirus dt { position:relative; padding-left:1.6em; font-weight:600; line-height:1.6em; color:#77934a; }
.antivirus dt:nth-of-type(n+2) { margin-top:.4em; }
.antivirus dt:after { position:absolute; left:0; content:''; width:1.6em; height:1.4em; background:url(/svg/i-leaf-gr.svg) center / 100% no-repeat; transform:rotate(15deg); }
.antivirus dd { line-height:1.6em; }
.antivirus img { width:100%; height:auto; margin:.4em auto;  }
.antivirus img + p.info { margin-bottom:1em; text-align:right; font-size:.86em; line-height:1.4em; }
.antivirus a.link { display:block; width:16.6em; margin:1em auto 2em; padding-bottom:.2em; border-bottom:1px solid; }


/*modal*/
#more-aroma .modal-content { max-width:50.2em; padding:0 0 2em; }
#more-aroma h4 { text-align:center; margin:2em auto 1em; font-size:1.1em; line-height:1.6em; }
#more-aroma .table { margin-left:1em; padding-bottom:8px; overflow-x:auto; }
#more-aroma table { display:block; width:calc(48em + 1px); padding-right:1em; line-height:1.4em; }
#more-aroma tr > * { width:20em; padding:.6em; border:2px solid #fff; }
#more-aroma tr:first-of-type > * { border-top:none; }
#more-aroma th { text-align:center; }
#more-aroma tr > th:first-of-type { width:8em; padding:.6em .2em; vertical-align:middle; }
#more-aroma tr:nth-of-type(1) th:not(:first-of-type) { background:#eee; }
#more-aroma tr:nth-of-type(1) th:nth-of-type(2) { color:#fff; background:#c3c355; }
#more-aroma tr:nth-of-type(n+2) th,
#more-aroma td { background:#f9f9f9; }
#more-aroma td:nth-of-type(1) { background:#f7f7f0; }
#more-aroma td b { font-weight:500; color:#ec5a7e; }
#more-aroma .table + p { padding:1em 2em 0; }


@media screen and (min-width:769px) {
#benefit dd.circle { position:absolute; width:20em; margin-top:1em; }
#benefit dd:not(.circle) { padding-left:21em; }
#benefit .supp { display:flex; justify-content:center; max-width:none; }
#benefit .supp a { max-width:18em; margin:0 1em; }
}

@media screen and (max-width:768px) {
#benefit dl { max-width:32em; }
#benefit dd.circle { margin-bottom:1.6em; }
#benefit dd.circle span { margin:0 .2em; }
#benefit dd:not(.circle) { max-width:24em; margin:0 auto .6em; padding-left:1em; }
#benefit .supp a:nth-of-type(n+2) { margin-top:1em; }
}

@media screen and (max-width:425px) {
#benefit dl { padding:2em .6em; }
#benefit dd.circle span { width:6.2em; height:6.2em; line-height:6.2em; }
}



/*==============================
	point
==============================*/
/*ul*/
#point ul { counter-reset:number 0; width:calc(100% - 4em); margin:auto; }
#point li { position:relative; padding:2em; background:#fff; cursor:pointer; }
#point li > h3 { text-align:center; font-size:1.2em; font-weight:600; line-height:1.4em; letter-spacing:1px; }
#point li > h3:before {
 counter-increment:number 1;
 content:counter(number, decimal-leading-zero);
 display:block;
 width:2.2em;
 margin:0 auto .6em;
 padding-bottom:.1em;
 font-size:1.2em;
 color:var(--blue);
 border-bottom:2px solid;
}
#point li > picture { display:block; width:calc(100% - 4em); max-width:6em; aspect-ratio:1/1; margin:1em auto 0; }
#point li > picture img { display:block; width:100%; }

#point li .mask {
 position:absolute;
 top:0;
 left:0;
 display:flex;
 flex-wrap:wrap;
 align-content:center;
 width:100%;
 height:100%;
 padding:1.2em;
 font-weight:600;
 line-height:1.8em;
 color:#fff;
 background:rgba(var(--blue-rgb),.96);
 overflow-y:scroll;
 transition:.4s;
 transform:scale(0);
}
#point li:hover .mask { transform:scale(1); }
#point li .mask .info { font-weight:500; font-feature-settings:'palt'; color:#fff; }
#point li .more { margin-top:1em; text-align:right; letter-spacing:1px; color:#aaa; }
#point li .more svg { position:relative; top:.3em; width:1.4em; height:1.4em; padding-right:.2em; fill:#aaa; z-index:-1; transform:rotate(-10deg); }


@media screen and (min-width:1601px) {
#point li { width:calc(100%/3 - 1.6vw); }
#point li:nth-of-type(3n+2) { margin:0 2.4vw; }
#point li:nth-of-type(n+4) { margin-top:2.4vw; }
}

@media screen and (min-width:1025px) and (max-width:1600px) {
#point li { width:calc(100%/3 - 1.4em); }
#point li:nth-of-type(3n+2) { margin:0 2em; }
#point li:nth-of-type(n+4) { margin-top:2em; }
}

@media screen and (min-width:769px) and (max-width:1024px) {
#point li { width:calc(100%/2 - 1em); }
#point li:nth-of-type(2n+2) { margin-left:2em; }
#point li:nth-of-type(n+3) { margin-top:2em; }
}

@media screen and (min-width:769px) {
#point ul { display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; max-width:1400px; }
}

@media screen and (max-width:768px) {
#point ul { max-width:500px;}
#point li:nth-of-type(n+2) { margin-top:2em; }
}



/*==============================
	record
==============================*/
#record h2.title { position:relative; width:11em; margin:0 auto .6em; line-height:1.6em; }
#record h2.title span { display:block; font-size:.6em; }
#record h2.title:before,
#record h2.title:after { position:absolute; bottom:-.2em; content:''; width:1em; height:4em; background:url(/img/subsc/icon-record.png) center / 100% no-repeat; }
#record h2.title:before { left:0; }
#record h2.title:after { right:0; transform:scale(-1,1); }

#record  > .info { width:calc(100% - 1em); max-width:40em; margin:0 auto 4em; text-align:right; font-size:12px; line-height:1.4em; }


/*graph*/
#record .graph {
 position:relative;
 width:80vw;
 max-width:26em;
 height:80vw;
 max-height:26em;
 margin:auto;
 border-radius:50%;
 background:conic-gradient(rgba(164,88,30,.1) 96%, #fff 0);
}
#record .graph > * { position:absolute; bottom:0; left:0; right:0; margin:auto; }
#record .graph p { top:3em; height:3em; text-align:center; font-size:1.4em; font-weight:600; line-height:1.6em; z-index:2; }
#record .graph p strong { margin-right:.2em; font-size:1.2em; color:#a4581e; }
#record .graph p strong b { position:relative; top:2px; margin-right:4px; font-size:3em; }
#record .graph picture { top:-9em; display:block; width:5em; aspect-ratio:1/1; opacity:.4; z-index:1; }
#record .graph img { display:block; width:100%; }

#record dl { width:calc(100% - 2em); max-width:40em; margin:4em auto 0; font-weight:600; }
#record dt { margin-bottom:1em; text-align:center; font-size:1.4em; color:var(--gold); }
#record dd { display:flex; justify-content:space-between; align-items:center; padding:.2em 1.4em; background:rgba(142,121,42,.16); border-radius:0 50vh 50vh 0; }
#record dd:nth-of-type(n+2) { margin-top:.6em; }
#record dd:first-of-type { width:98%;}
#record dd:nth-of-type(2) { width:79%; }
#record dd:nth-of-type(3) { width:89%; }
#record dd:nth-of-type(4) { width:96%; }
#record dd:nth-of-type(5) { width:86%; }
#record dd:last-of-type { width:97%; }
#record dd p + p { font-size:1.4em; }
#record dd p b { margin-right:2px; font-size:1.6em; font-weight:500; color:#a4581e; }


/*comment*/
#record .comment { width:calc(100% - 2em); max-width:60em; margin:4em auto 0; }
#record .comment li { position:relative; width:calc(100% - 5em); padding:1.6em; background:#f3f1e9; border-radius:.4em; }
#record .comment li:nth-of-type(odd) { margin-left:auto; }
#record .comment li:nth-of-type(n+2) { margin-top:2em!important; }
#record .comment li:after { position:absolute; top:0; bottom:0; content:''; height:1.2em; margin:auto; border:.6em solid transparent; z-index:2; }
#record .comment li:nth-of-type(odd):after { left:calc(-1.8em + 1px); border-right:1.2em solid #f3f1e9; }
#record .comment li:nth-of-type(even):after { right:calc(-1.8em + 1px); border-left:1.2em solid #f3f1e9; }
#record .comment li img[alt='icon'] { position:absolute; top:0; bottom:0; width:3em; margin:auto; }
#record .comment li:nth-of-type(odd) img[alt='icon'] { left:-5em; }
#record .comment li:nth-of-type(even) img[alt='icon'] { right:-5em; }
#record .comment li p { line-height:1.6em; }
#record .comment li p + p { margin-top:.6em; text-align:right; font-size:.9em; }


@media screen and (min-width:769px) {
#record .comment li { width:calc(100% - 5em - 15vw); }
#record .comment li:nth-of-type(odd) { margin-left:5em; }
#record .comment li:nth-of-type(even) { margin:0 5em 0 auto; }
}

@media screen and (max-width:425px) {
#record .comment li { padding:1em; }
#record .comment li:after { top:3em; bottom:auto; }
#record .comment li img[alt='icon'] { top:2em; bottom:auto; }
}

@media screen and (max-width:375px) {
#record .graph p strong b { letter-spacing:-4px; }
#record dd p b { letter-spacing:-1px; }
}



/*==============================
	plan
==============================*/
#plan h2 { margin-bottom:3em; }

#plan p { line-height:1.6em; }
#plan p:nth-of-type(n+2) { margin-top:.4em; }
#plan b { margin:0 1px; font-size:1.4em; font-weight:500; }
#plan em { font-style:normal; }
#plan .info { margin-top:1em; font-size:12px; color:#333; }
#plan .spec + .info { width:calc(100% - 2em); max-width:1200px; margin:auto; text-align:right; }


/*spec*/
#plan .spec { margin:6em auto 1em; }
#plan .spec .sticky:before,
#plan .spec .sticky:after { position:absolute; top:-3em; left:0; display:block; width:100%; text-align:center; letter-spacing:0; color:var(--blue); }
#plan .spec .sticky:nth-of-type(2):before, #plan .spec .sticky:nth-of-type(2):after { color:var(--dblue); }
#plan .spec .sticky:before { top:-3.8em; }
#plan .spec .sticky:after { top:-2em; font-size:1.1em; }
/* #plan .spec .sticky:nth-of-type(1):before { content:'~40\7573\3067\306E\5229\7528'; }
#plan .spec .sticky:nth-of-type(2):before { content:'\5E83\7BC4\56F2\3067\306E\5229\7528'; }
#plan .spec .sticky:nth-of-type(1):after { content:'\FF3C\30B3\30B9\30C8\91CD\8996\306E\65B9\FF0F'; }
#plan .spec .sticky:nth-of-type(2):after { content:'\FF3C\81EA\52D5\904B\8EE2\304C\826F\3044\65B9\FF0F'; } */
#plan .spec .sticky > p { padding:.3em 0 0; text-align:center; font-size:1.4em; line-height:1em; background:#fff; }
#plan .spec .sticky:nth-of-type(1) > p { color:var(--blue); }
#plan .spec .sticky:nth-of-type(2) > p { color:var(--dblue); }
#plan .spec .sticky > p span { font-size:.8em; }
#plan .spec .sticky > p span:after { content:'\7A0E\8FBC'; font-size:12px; }


@media screen and (max-width:1024px) {
#plan .spec { margin-top:5em; }
#plan .spec > dt:first-of-type,#plan .spec > dt:nth-of-type(2) { display:none; }
}

@media screen and (min-width:769px) {
#plan .spec .sticky > p { margin-top:.2em; }
#plan button a br { display:none; }
}



/*==============================
	spec
==============================*/
/*color*/
:root {
 --course1:#8ca84c; --course1-rgb:140,168,76;
 --course2:#c37e52; --course2-rgb:195,126,82;
 --course3:#b29f35; --course3-rgb:178,159,53;
 --relax:#f2b256; --bg-relax:#fbf8f4;
 --refresh:#70c1a9; --bg-refresh:#f5fbf9;
 --antivirus:#5f9fd6; --bg-antivirus:#f1f5fb;
 --antibug:#7fc269; --bg-antibug:#f5fbf5;
}


#teigaku .spec { position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:stretch; width:calc(100% - 2em); max-width:1000px; margin:6em auto 2em; }
#teigaku .spec > * { padding:1.2em 1em; }
#teigaku .spec > dt { padding-top:0; font-weight:600; background:#f1f1f1; }
#teigaku .spec > dt p { position:sticky; padding:1em 0 .6em; background:#f1f1f1; z-index:1; }
#teigaku .spec > dt .modal { display:block; font-size:.9em; font-weight:500; }
#teigaku .spec > dd { position:relative; line-height:1.6em; background:#fafafa;width:100%; }

#teigaku .spec h3 { margin-bottom:.4em; line-height:1.4em; }
#teigaku .spec h3:nth-of-type(n+2) { margin-top:1em; }

#teigaku .spec img { width:100%; }
#teigaku .spec img[alt^='aromic'] { display:block; max-width:140px; margin:0 auto 1.6em; }

/*sticky*/
#teigaku .spec .blank { color:var(--bg); background:none; }
#teigaku .spec .sticky { position:sticky; top:0;width:100%; margin-top: .4em; text-align:center; font-weight:600; line-height:1.4em; letter-spacing:.1em; color:#fff; background:rgba(var(--blue-rgb),.7); z-index:100; }
#teigaku .spec .sticky:nth-of-type(2) { background:rgba(var(--dblue-rgb),.8); }
#teigaku .spec .sticky b { font-size:1.4em; }

/*record*/
#teigaku .spec .record { margin:auto; text-align:center; font-size:.9em; font-weight:600; line-height:1.4em; color:#fff; background:var(--gold); opacity:.8; }
#teigaku .spec .record span { letter-spacing:-1px; }
#teigaku .spec .record b { position:relative; top:1px; display:inline-block; }

/*aroma*/
#teigaku .spec .aroma { counter-reset:number 0; }
#teigaku .spec .aroma dl { position:relative; margin:.6em auto 1.6em; padding:1.6em 1.2em 1.2em; border:1px solid; border-radius:1em; }
#teigaku .spec .aroma dt { position:absolute; top:-.6em; left:2em; padding:0 1em; font-size:1.1em; font-weight:600; letter-spacing:.1em; background:#fafafa; }
#teigaku .spec .aroma dt:after { position:absolute; left:0; bottom:0; content:''; display:block; width:100%; height:.8em; background:#fff; z-index:-1; }
#teigaku .spec .aroma dd { position:relative;width:calc((100% - 2em)/2);margin-bottom:1.2em; }


#teigaku .spec .aroma h3 { width:100%; font-size:1.1em; font-weight:600; letter-spacing:1px; color:var(--opColor-gr1); }
#teigaku .spec .aroma dd:nth-of-type(1) h3 { color:var(--course1); }
#teigaku .spec .aroma dd:nth-of-type(2) h3 { color:var(--course2); }
#teigaku .spec .aroma dd:nth-of-type(3) h3 { color:var(--course3); }
#teigaku .spec .aroma h3:before { position:relative; top:.02em; counter-increment:number 1; content:counter(number); margin-right:.2em; font-size:1.4em; font-weight:500; }
#teigaku .spec .aroma dd:nth-of-type(1) em { background:rgba(var(--course1-rgb),.1); }
#teigaku .spec .aroma dd:nth-of-type(2) em { background:rgba(var(--course2-rgb),.1); }
#teigaku .spec .aroma dd:nth-of-type(3) em { background:rgba(var(--course3-rgb),.1); }
#teigaku .spec .aroma img { display:block; margin:auto; }
#teigaku .spec .aroma dd img[alt='aroma-chart'] { width:calc(100% - 2em); max-width:300px; }
#teigaku .spec .aroma dd img[alt='pop-image'] { float:right; width:12em; margin:.2em 0 .2em .4em; }
#teigaku .spec .aroma dd:nth-of-type(2) .info:after { clear:both; content:''; display:table; line-height:0; }
#teigaku .spec .aroma a.option { margin:.4em 0 0; }

/*price*/
#teigaku .spec .price { counter-reset:number 0; }
#teigaku .spec .price h3 { margin-bottom:.4em; font-weight:600; line-height:1.2em; }
#teigaku .spec .price h3:nth-of-type(1) { color:var(--course1); }
#teigaku .spec .price h3:nth-of-type(2) { color:var(--course2); }
#teigaku .spec .price h3:nth-of-type(3) { color:var(--course3); }
#teigaku .spec .price h3:before { position:relative; top:.05em; counter-increment:number 1; content:counter(number); margin-right:.2em; font-size:1.4em; font-weight:500; }
#teigaku .spec .price p span { display:inline-block; margin-right:.2em; }
#teigaku .spec .price p .monthly { display:block; margin-bottom:.4em; padding:.6em .4em .1em; font-size:1.3em; line-height:1em; background:#fff; border:1px solid #eee; }
#teigaku .spec .price p .tax:after { content:'\7A0E\8FBC'; margin-left:2px; font-size:12px; }
#teigaku .spec .price .info { padding-top:1em!important; }
#teigaku .spec .price b, #plan .price em { color:var(--red); }
#teigaku .spec .price a { display:none; margin-top:.6em; padding:.6em 1em .4em; line-height:1.2em; border:1px solid; border-radius:10em; }
#teigaku .spec .price a:nth-of-type(1) { color:var(--lblue); }
#teigaku .spec .price a:nth-of-type(2) { margin-left:.6em; color:var(--dblue); }
#teigaku .spec .price a:hover { color:#fff; }
#teigaku .spec .price a:nth-of-type(1):hover { background:var(--lblue); }
#teigaku .spec .price a:nth-of-type(2):hover { background:var(--dblue); }

/*color*/
#teigaku .spec .color span { display:inline-block; margin-right:1em; }
#teigaku .spec .color span:last-of-type { margin-right:0; }
#teigaku .spec .color span:before { position:relative; top:.14em; content:''; display:inline-block; width:1em; height:1em; margin-right:.2em; border-radius:50%; }
#teigaku .spec .color span.air1:before { background:#d5d7d4; }
#teigaku .spec .color span.air2:before { background:#e5ddce; }
#teigaku .spec .color span.air3:before { background:#c3ae8d; }
#teigaku .spec .color span.air4:before { background:#ab6838; }
#teigaku .spec .color span.air5:before { background: url('/img/icon/marble.jpg') no-repeat center center / cover;}
#teigaku .spec .color span.biz1:before { background:#fff; border:1px solid; }
#teigaku .spec .color span em { display:inline-block; font-size:12px; font-weight:300; line-height:1em; color:var(--red); }

/*point*/
#teigaku .spec .point div:nth-of-type(n+2) { margin-top:1em; padding-top:1em; border-top:.4em solid #fff; }
#teigaku .spec .point div { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; }
#teigaku .spec .point div h3 { width:100%; }
#teigaku .spec .point div picture { display:block; width:100px; }
@media screen and (max-width:768px) {
    #teigaku .spec .point div img { width:300px; }
    
}
#teigaku .spec .point div picture + p { width:calc(100% - 100px - .6em); }

/*gallery*/
#teigaku .spec .gallery { overflow-x:auto; white-space:nowrap; }
#teigaku .spec .gallery a { display:inline-block; width:180px; border:1px solid var(--link); }
#teigaku .spec .gallery a:nth-of-type(n+2) { margin-left:.2em; }
#teigaku .spec .gallery img { display:block; }


/*modal*/
#teigaku .spec p[align='right'] a.modal { display:inline-block; margin:.1em .4em; }
#teigaku .spec a[data-target*='aroma-list'] { position:relative; display:inline-block; margin-top:.6em; padding:.6em 1.2em; font-size:1.06em; border:1px solid; border-radius:100vh; }

[id^='spec-'].modal-wrapper dl > * { line-height:1.6em; }
[id^='spec-'].modal-wrapper dt { margin-bottom:.6em; padding:.6em; font-weight:600; background:var(--bg); }
[id^='spec-'].modal-wrapper dt:nth-of-type(n+2) { margin-top:1em; }

#more-spec .modal-content { max-width:1000px; }
#more-spec .spec { width:100%!important; margin:auto; }
#more-spec .spec .sticky { top:-2em; left:0; }
#more-spec .spec .sticky:before,
#more-spec .spec .sticky:after { display:none; }
#more-spec .spec .sticky b { font-size:1.2em; }


@media screen and (min-width:1441px) {
#teigaku .spec .aroma dd img[alt='aroma-chart'] { width:290px; }
}

@media screen and (min-width:1025px) {
#teigaku .spec > dt { width:12em;margin-top: .4em;}
#teigaku .spec > dt:nth-of-type(1) {
    display: none;
}
#teigaku .spec > dd { width:calc(100% - 12.4em); }
#teigaku .spec > dd.block2 { width:calc(100% - 12.4em); }
}

@media screen and (min-width:1024px) {
#teigaku .spec > *:nth-child(n+4) { margin-top:.4em; }
#teigaku .spec .aroma dd:first-of-type { position:relative; flex-wrap:wrap; }
#teigaku .spec .aroma dd img[alt='aroma-chart'] { position:absolute; top:0; bottom:0; right:.6em; }
}


@media screen and (max-width:1024px) {
#teigaku .spec > *:nth-child(n+2) { margin-top:.4em; }
#teigaku .spec > dt,
#teigaku .spec > dd.block2 { width:100%; }
#teigaku .spec > dt:nth-child(n+3) { margin-top:1em; }
#teigaku .spec > dt p { padding-bottom:0; }
#teigaku .spec .aroma h3 { text-align:center; }
#teigaku .spec .aroma dd img[alt='aroma-chart'] { margin-top:.4em; }
#teigaku .spec .aroma a.option { margin:.4em auto 0; }
#teigaku .spec a[data-target^='movie'] img { height:24vw; vertical-align:top; object-fit:cover; font-family:'object-fit:cover;'; }
#teigaku .spec a[data-target*='aroma-list'] { display:block; margin:1em auto .4em; padding:.8em; text-align:center; font-size:1.1em; }
#teigaku .spec a[data-target='aroma-list'] { width:16em; }
#teigaku .spec a[data-target='basic-aroma-list'] { width:15em; }
#teigaku .spec a[data-target='season-aroma-list'] { width:18em; }
#teigaku .spec a[data-target='premium-aroma-list'] { width:15em; }
}

@media screen and (min-width:769px) and (max-width:1024px) {
#teigaku .spec .aroma dl { padding:1.6em; }
}

@media screen and (min-width:769px) {
#teigaku .spec .sticky b { margin-right:.2em; }
}

@media screen and (max-width:768px) {
#teigaku .spec > * { padding:.8em; }
#teigaku .spec > dd:nth-of-type(-n+2) { padding:.6em; }
#teigaku .spec > dt { font-size:1.1em; }
#teigaku .spec .sticky:before { top:-4em; }
#teigaku .spec .sticky b { display:block; }
#teigaku .spec .record { top:2em; }
#teigaku .spec .aroma dd img[alt='pop-image'] { width:9em; }
#teigaku .spec .point div picture { width:100%; margin:0 auto .6em; }
#teigaku .spec .point div picture + p { width:100%; }
#teigaku .spec .gallery a { width:34vw; }
#more-spec .modal-content { width:calc(100% - 1.2em); padding:.6em .6em 2em; }
#more-spec .spec .sticky { top:-.6em; }
}



@media screen and (min-width:426px) {
#teigaku .spec .record { position:absolute; top:0; bottom:0; right:4em; width:7.2em; height:7.2em; padding:2.2em 0; border-radius:50%; }
#teigaku .spec .price p .monthly br { display:none; }
}

@media screen and (max-width:425px) {
#teigaku .spec img[alt^='aromic'] { margin-top:2em; }
#teigaku .spec .record { position:absolute; top:.3em; left:.3em; width:calc(100% - .6em); margin:0 auto 1em; padding:.4em 0 .2em; font-size:12px; }
#teigaku .spec .record br { display:none; }
#teigaku .spec .record b { letter-spacing:-1px; }
#teigaku .spec img[alt='aromicbiz'] + .record br { display:none; }
#teigaku .spec a[data-target='more-aroma'] { margin-left:auto; }
#teigaku .spec .price p .monthly { padding:.5em 0 .1em; text-align:center; line-height:1.4em; }
}

@media screen and (max-width:375px) {
#teigaku .spec { width:calc(100% - 1.2em); }
#teigaku .spec > * { padding:.8em .6em; }
#teigaku .spec .sticky:after { font-size:4.2vw; }
#teigaku .spec a[data-target^='movie'] img { height:30vw; }
}



/*==============================
	aroma
==============================*/
#teigaku [id*='-aroma'] h2 { margin-bottom:1em; text-align:center; font-size:1.1em; }
#teigaku [id*='-aroma'] h2 b { font-size:1.4em; }
#teigaku [id$='-aroma'] h2 span { display:block; font-size:1.4em; }
#teigaku [id$='-aroma'] h2 + p { text-align:center; }
#teigaku [id$='-aroma'] h2 + p span { display:block; font-size:12px; }

#teigaku [id$='-aroma'] h3 { margin:2em auto 1em; text-align:center; font-size:1.4em; letter-spacing:.1em; }

#teigaku [id$='-aroma'] h4 { margin-bottom:.4em; font-size:1.2em; letter-spacing:1px; }


/*img*/
#teigaku [id$='-aroma'] img { display:block; margin:auto; }
#teigaku [id$='-aroma'] img[alt='aroma-chart'] { width:calc(100% - 2em); max-width:500px; }
#teigaku [id$='-aroma'] img[alt='pop'] { width:100%; max-width:200px; margin:.6em auto; }


/*modal*/
#teigaku [id*='aroma-list'] .modal-content { width:calc(100% - 1.2em)!important; max-width:800px!important; padding:2em 0!important; }


/*topics*/
#teigaku [id$='-aroma'] a.topics { position:relative; top:-.8em; left:3em; width:calc(100% - 2em); margin:auto; padding:.6em 1em; background:#fff; border:1px solid; border-radius:10em; }


@media screen and (max-width:768px) {
#teigaku [id$='-aroma'] h2 + p span { width:calc(100% - 2em); margin:auto; text-align:left; }
}

@media screen and (min-width:426px) {
#teigaku [id$='-aroma'] h2 + p br { display:none; }
}

@media screen and (max-width:375px) {
#teigaku [id$='-aroma'] a.topics { left:2em; }
}

/*==============================
	aroma - basic
==============================*/

#basic-aroma .aroma-wrapper{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - 2em);
    margin: 2em auto 0;
    justify-content: space-between;
}
/*#basic-aroma .aroma-wrapper dd{
width: calc(100% / 2 - .4em);
}
*/
@media screen and (max-width:480px) {
    #teigaku .spec .aroma dl { display:block; }
    #teigaku .spec .aroma dd { width: calc(100% - 2em);margin:0 auto 2em}
}

/*==============================
	aroma - basic
==============================*/
#teigaku #basic-aroma h2 b { color:var(--course1); }

#teigaku #basic-aroma > img[alt='aroma-chart'] { max-width:400px; margin-top:1em; }

#teigaku #basic-aroma > dl.box { position:relative; display:flex; flex-wrap:wrap; width:calc(100% - 2em); margin:2em auto 0; }
#teigaku #basic-aroma > dl.box > dt { width:100%; margin-bottom:1em; text-align:center; font-size:1.1em; font-weight:600; letter-spacing:1px; }
#teigaku #basic-aroma > dl.box > dt b { margin-right:.1em; font-size:1.2em; }
#teigaku #basic-aroma > dl.box > dd { position:relative; padding:1.4em 1em; background:#fff; border-radius:1em; }

#teigaku #basic-aroma > dl.box p { line-height:1.4em; }
#teigaku #basic-aroma > dl.box p:nth-of-type(n+2) { margin-top:.2em; }
#teigaku #basic-aroma > dl.box a { display:block; margin:1em 0 0 auto; padding:0; text-align:center; text-decoration:none; border:none; }

#teigaku .aroma #basic-aroma .aroma-wrapper dd p.scene:before { color:var(--relax);content:'\30B7\30FC\30F3\30FB\7528\9014\FF1A'; display:inline-block; font-weight:600; }

#teigaku #basic-aroma > dl.box p.strength { display:flex; align-items:flex-end; font-weight:600; line-height:2.2em; }
#teigaku #basic-aroma > dl.box p.strength span { font-feature-settings:'palt'; }
#teigaku #basic-aroma > dl.box p.strength span:after { content:'\FF1A'; font-feature-settings:normal; }
#teigaku #basic-aroma > dl.box p.strength img[alt='power'] { width:auto; max-width:calc(100% - 6em); height:2em; margin:0; }

/*icon*/
#teigaku #basic-aroma [class^='icon-']:before,
#teigaku #basic-aroma [class^='icon-']:after { position:absolute; display:inline-block; font-size:.9em; font-weight:600; letter-spacing:1px; }
#teigaku #basic-aroma [class^='icon-']:before { left:1em; content:''; }
#teigaku #basic-aroma [class^='icon-']:after { top:-.4em; left:2.8em; }
#teigaku #basic-aroma [class^='icon-no']:before { top:-.9em; width:1.6em; height:1.6em; background:url(/svg/i-crown_yellow.svg) center / 100% no-repeat; }
#teigaku #basic-aroma [class^='icon-no']:after { width:5em; }
#teigaku #basic-aroma .icon-no1:after { content:'\4EBA\6C17No.1'; }
#teigaku #basic-aroma .icon-no2:after { content:'\4EBA\6C17No.2'; }
#teigaku #basic-aroma .icon-no3:after { content:'\4EBA\6C17No.3'; }
#teigaku #basic-aroma .icon-recd:before { top:-.8em; width:1.4em; height:1.4em; background:url(/svg/i-star_yellow.svg) center / 100% no-repeat; }
#teigaku #basic-aroma .icon-recd:after { content:'\5B63\7BC0\306E\304A\3059\3059\3081'; }

/*relax*/
#teigaku #basic-aroma a[href='#relax']:hover { color:var(--relax); }
#teigaku #basic-aroma dl#relax dt:after { width:11.6em; }
#teigaku #basic-aroma dl#relax dd { background:var(--bg-relax); }
#teigaku #basic-aroma dl#relax p.scene:before { color:var(--relax); }
#teigaku #basic-aroma dl#relax p.strength span,
#teigaku #basic-aroma dl#relax p.strength [class^='bar']:after { color:var(--relax); }
#teigaku #basic-aroma dl#relax p.strength [class^='bar']:before { background:var(--relax); }
/*refresh*/
#teigaku #basic-aroma a[href='#refresh']:hover { color:var(--refresh); }
#teigaku #basic-aroma dl#refresh dt:after { width:13em; }
#teigaku #basic-aroma dl#refresh dd { background:var(--bg-refresh); }
#teigaku #basic-aroma dl#refresh p.scene:before { color:var(--refresh); }
#teigaku #basic-aroma dl#refresh p.strength span,
#teigaku #basic-aroma dl#refresh p.strength [class^='bar']:after { color:var(--refresh); }
#teigaku #basic-aroma dl#refresh p.strength [class^='bar']:before { background:var(--refresh); }
/*antivirus*/
#teigaku #basic-aroma a[href='#antivirus']:hover { color:var(--antivirus); }
#teigaku #basic-aroma dl#antivirus dt:after { width:10.2em; }
#teigaku #basic-aroma dl#antivirus dd { background:var(--bg-antivirus); }
#teigaku #basic-aroma dl#antivirus p.scene:before { color:var(--antivirus); }
#teigaku #basic-aroma dl#antivirus p.strength span,
#teigaku #basic-aroma dl#antivirus p.strength [class^='bar']:after { color:var(--antivirus); }
#teigaku #basic-aroma dl#antivirus p.strength [class^='bar']:before { background:var(--antivirus); }
/*antibug*/
#teigaku #basic-aroma a[href='#antibug']:hover { color:var(--antibug); }
#teigaku #basic-aroma dl#antibug dt:after { width:9em; }
#teigaku #basic-aroma dl#antibug dd { background:var(--bg-antibug); }
#teigaku #basic-aroma dl#antibug p.scene:before { color:var(--antibug); }
#teigaku #basic-aroma dl#antibug p.strength span,
#teigaku #basic-aroma dl#antibug p.strength [class^='bar']:after { color:var(--antibug); }
#teigaku #basic-aroma dl#antibug p.strength [class^='bar']:before { background:var(--antibug); }


/*accordion*/
#teigaku #basic-aroma .acd-btn { display:block; width:7em; margin:.6em auto 0; padding-bottom:.2em; text-align:center; font-size:.9em; color:var(--link); border-bottom:1px solid; }
#teigaku #basic-aroma .acd-btn:before { content:'\3082\3063\3068\8A73\3057\304F'; display:block; }
#teigaku #basic-aroma .acd-btn.open { width:4.4em; margin-bottom:1em; }
#teigaku #basic-aroma .acd-btn.open:before { content:'\9589\3058\308B'; }
#teigaku #basic-aroma .acd-area { height:0; visibility:hidden; overflow:hidden; transition:.6s; opacity:0; }
#teigaku #basic-aroma .acd-area .ttl{color:var(--relax);}
#teigaku #basic-aroma .acd-btn.open + .acd-area { height:auto; visibility:visible; opacity:1; }
#teigaku #basic-aroma .acd-area dl { margin:1em auto; font-size:.96em; }
#teigaku #basic-aroma .acd-area dl > * { padding:.4em; line-height:1.2em; }
#teigaku #basic-aroma .acd-area dl dt { font-weight:600; background:#fff; }
#teigaku #basic-aroma .acd-area dl dd { padding-right:0; }
#teigaku #basic-aroma .acd-area dl + p { text-align:center; }
#teigaku #basic-aroma .acd-area .info { max-width:260px; margin:1em auto 0; text-align:right; font-size:.9em; line-height:1.4em; }
#teigaku #basic-aroma .acd-area a { display:block; width:14.6em; margin:1em auto; padding:1em .2em; border-bottom:none; }


@media screen and (min-width:769px) {
#teigaku #basic-aroma > dl.box > dd { width:calc(100%/2 - .4em); }
#teigaku #basic-aroma > dl.box > dd:nth-of-type(2n+2) { margin-left:.8em; }
#teigaku #basic-aroma > dl.box > dd:nth-of-type(n+3) { margin-top:.8em; }
}

@media screen and (max-width:768px) {
#teigaku #basic-aroma > dl.box > dt { left:3em; }
#teigaku #basic-aroma > dl.box > dd { width:100%; }
#teigaku #basic-aroma > dl.box > dd:nth-of-type(n+2) { margin-top:1.2em; }
#teigaku #basic-aroma [class^='icon-']:before { left:auto; right:7.2em; }
#teigaku #basic-aroma .icon-recd:before { right:9.6em; }
#teigaku #basic-aroma [class^='icon-']:after { left:auto; right:2em; }
#teigaku #basic-aroma .acd-area .info { font-size:12px; }
}

@media screen and (min-width:426px) {
#teigaku #basic-aroma .acd-area { font-size:.96em; }
#teigaku #basic-aroma .acd-area dl { display:flex; flex-wrap:wrap; align-items:stretch; }
#teigaku #basic-aroma .acd-area dl > * { border-bottom:.2em solid #fff; }
#teigaku #basic-aroma .acd-area dl > *:nth-of-type(n+2) { margin-top:.4em; }
#teigaku #basic-aroma .acd-area dl dt { width:8em; }
#teigaku #basic-aroma .acd-area dl dd { width:calc(100% - 8em); }
}



/*==============================
	aroma - season
==============================*/
/*color*/
:root {
 --season1-rgb:244,233,135;
 --season2-rgb:198,231,228;
 --season3-rgb:249,203,184;
 --season4-rgb:187,207,225;
}


#teigaku #season-aroma { width:calc(100% - 2em); margin:auto; }

#teigaku #season-aroma h2 b { display:block; color:var(--course2); }
#teigaku #season-aroma h3 { margin:1em auto .4em; }

#teigaku #season-aroma > p { max-width:34em; margin:auto; }

#teigaku #season-aroma dl { display:flex; flex-wrap:wrap; align-items:stretch; max-width:42.6em; margin:.2em auto 0; }
#teigaku #season-aroma dl > * { padding:.6em .8em; line-height:1.4em; }
#teigaku #season-aroma dl > *:nth-of-type(n+2) { margin-top:.2em; }
#teigaku #season-aroma dt { width:4em; background:rgba(var(--course2-rgb),.16); }
#teigaku #season-aroma dt b { font-size:1.2em; font-weight:500; }
#teigaku #season-aroma dd { width:calc(100% - 4em); background:rgba(var(--course2-rgb),.08); }

/*#teigaku #season-aroma dl:nth-of-type(1) dt { background:rgba(var(--season1-rgb),.2); }
#teigaku #season-aroma dl:nth-of-type(1) dd { background:rgba(var(--season1-rgb),.1); }
#teigaku #season-aroma dl:nth-of-type(2) dt { background:rgba(var(--season2-rgb),.2); }
#teigaku #season-aroma dl:nth-of-type(2) dd { background:rgba(var(--season2-rgb),.1); }
#teigaku #season-aroma dl:nth-of-type(3) dt { background:rgba(var(--season3-rgb),.2); }
#teigaku #season-aroma dl:nth-of-type(3) dd { background:rgba(var(--season3-rgb),.1); }
#teigaku #season-aroma dl:nth-of-type(4) dt { background:rgba(var(--season4-rgb),.2); }
#teigaku #season-aroma dl:nth-of-type(4) dd { background:rgba(var(--season4-rgb),.1); }*/



/*==============================
	aroma - premium
==============================*/
/*color*/
:root {
 --premium1-rgb:166,0,57;
 --premium2-rgb:0,122,140;
 --premium3-rgb:31,60,1;
 --premium4-rgb:114,45,8;
 --premium5-rgb:119,105,105;
 --premium6-rgb:113,0,86;
 --premium7-rgb:101,115,60;
 --premium8-rgb:104,49,0;
}


#teigaku #premium-aroma h2 b { color:var(--course3); }

#teigaku #premium-aroma > ul { width:calc(100% - 2em); margin:1em auto 0; line-height:1.4em; }
#teigaku #premium-aroma > ul h3 { padding:.6em; font-size:1.1em; font-weight:600; }
#teigaku #premium-aroma > ul li:first-of-type h3 { color:rgba(var(--premium1-rgb),1); background:rgba(var(--premium1-rgb),.2); }
#teigaku #premium-aroma > ul li:nth-of-type(2) h3 { color:rgba(var(--premium2-rgb),1); background:rgba(var(--premium2-rgb),.2); }
#teigaku #premium-aroma > ul li:nth-of-type(3) h3 { color:rgba(var(--premium3-rgb),1); background:rgba(var(--premium3-rgb),.2); }
#teigaku #premium-aroma > ul li:nth-of-type(4) h3 { color:rgba(var(--premium4-rgb),1); background:rgba(var(--premium4-rgb),.2); }
#teigaku #premium-aroma > ul li:nth-of-type(5) h3 { color:rgba(var(--premium5-rgb),1); background:rgba(var(--premium5-rgb),.2); }
#teigaku #premium-aroma > ul li:nth-of-type(6) h3 { color:rgba(var(--premium6-rgb),1); background:rgba(var(--premium6-rgb),.2); }
#teigaku #premium-aroma > ul li:nth-of-type(7) h3 { color:rgba(var(--premium7-rgb),1); background:rgba(var(--premium7-rgb),.2); }
#teigaku #premium-aroma > ul li:last-of-type h3 { color:rgba(var(--premium8-rgb),1); background:rgba(var(--premium8-rgb),.2); }
#teigaku #premium-aroma > ul .cat span { display:inline-block; margin:0 .2em .2em; padding:.2em .4em; border:.3em solid #eee; border-radius:.4em; }


@media screen and (min-width:769px) {
#teigaku #premium-aroma > ul { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:stretch; }
#teigaku #premium-aroma > ul li { width:calc(100%/2 - .4em); }
#teigaku #premium-aroma > ul li:nth-of-type(n+3) { margin-top:.6em; }
}

@media screen and (max-width:768px) {
#teigaku #premium-aroma > ul li:nth-of-type(n+2) { margin-top:.6em; }
}

@media screen and (min-width:426px) {
#teigaku #premium-aroma > ul { width:calc(100% - 4em); }
}



/*==============================
	Reason
==============================*/
#reason .modal-content { max-width:800px; }

#reason h3 { text-align:center; font-size:1.2em; line-height:1.6em; letter-spacing:.1em; }
#reason p { font-size:1.06em; line-height:1.8em; }
#reason h3 + p { width:calc(100% - 2em); margin:1em auto 0; }

#reason dl { width:100%; margin:1em auto; }
#reason dt { margin-bottom:1em; padding:1em 0; text-align:center; font-size:1.1em; font-weight:600; line-height:1.4em; letter-spacing:1px; border:1px solid; }
#reason dt span { display:block; font-size:.8em; }
#reason dd img { display:block; width:100%; max-width:none; margin:1em auto 0; }


@media screen and (min-width:769px) {
#reason p { text-align:center; }
}

@media screen and (max-width:768px) {
#reason .modal-content { padding:2em 1em; }
#reason p br { display:none; }
}



/*==============================
	Comp
==============================*/
#comp { position:relative; max-width:1000px; margin:4em auto 0; transition:.4s; }
#comp:not(.open) { max-height:26em; }
#comp.open { padding-bottom:3em; }

#comp h3 { text-align:center; font-size:1.2em; font-weight:600; line-height:1.4em;; letter-spacing:1px; }

#comp .table { width:100%; max-width:1000px; margin:1em auto 0; }
#comp table { width:100%; margin:auto; text-align:center; line-height:1.4em; }
#comp table * { vertical-align:middle; }
#comp tr > * { padding:.8em .1em; }
#comp tr > * { border:2px solid #fff; }
#comp tr:first-of-type > * { border-top:none; }
#comp tr:nth-of-type(1) th:not(:first-of-type) { background:#eee; }
#comp tr:nth-of-type(1) th:nth-of-type(1),
#comp tr:nth-of-type(2) th:nth-of-type(2),
#comp tr:nth-of-type(2) th:nth-of-type(3) { color:#fff; background:rgba(var(--blue-rgb),.8); }
#comp tr:nth-of-type(3) td { align-items:flex-start; vertical-align:top; }
#comp tr:nth-of-type(n+2) th,
#comp td { background:#f9f9f9; }
#comp td:nth-of-type(-n+1) { background:var(--bg); }
#comp td span { display:block; font-size:.88em; }

#comp .more-btn {
 position:absolute;
 left:0;
 right:0;
 bottom:0;
 width:100%;
 padding:4em 0 1px;
 text-align:center;
 font-size:.9em;
 color:var(--link);
 background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 60%);
 border:none;
 border-bottom:1em solid #fff;
 cursor:pointer;
}
#comp .more-btn span { display:inline-block; padding:.3em .8em; border:1px solid; border-radius:10em; }
#comp.open .more-btn { padding-top:1em; }
#comp.open .more-btn:after { content:'\9589\3058\308B'; display:inline-block; width:4em; margin:auto; border-bottom:1px solid; }
#comp.open .more-btn span { display:none; }


@media screen and (max-width:1024px) {
#comp { padding:2em 0; }
#comp .table { padding:0 1em 8px; overflow-x:auto; white-space:nowrap; }
#comp table { position:relative; width:57.4em; white-space:normal; }
#comp table * { display:flex; flex-wrap:wrap; }
#comp tr > * { display:flex; justify-content:center; align-items:center; width:8.4em; height:68px; text-align:center; }
#comp tr > *[colspan='2'] { width:16.8em; }
}





/*==============================
	Flow
==============================*/
#flow h2 { text-align:center; font-size:1.6em; letter-spacing:.1em; }


/*ol*/
#flow ol { counter-reset:number 0; display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; width:calc(100% - 4em); margin:3.4em auto 0; list-style:none; }
#flow ol li { position:relative; width:100%; padding:3.2em 1.2em 1.2em; background:#fff; }
#flow ol li:before {
 counter-increment:number 1;
 content:counter(number);
 position:absolute;
 top:-1.1em;
 left:0;
 right:0;
 display:block;
 width:2em;
 height:2em;
 margin:auto;
 text-align:center;
 font-size:1.4em;
 line-height:2em;
 letter-spacing:1px;
 background:rgba(var(--blue-rgb),.2);
 border-radius:50%;
 z-index:1;
}
#flow ol li h3 { margin-bottom:1em; text-align:center; font-size:1.2em; }
#flow ol li h3:after { content:''; display:block; width:6em; height:6em; margin:auto; }
#flow ol li:nth-of-type(1) h3:after { background:url(/img/subsc/i-step0.png) bottom center / 5em no-repeat; }
#flow ol li:nth-of-type(2) h3:after { background:url(/img/subsc/i-step1.svg) bottom center / 5em no-repeat; }
#flow ol li:nth-of-type(3) h3:after { background:url(/img/subsc/i-step2.svg) bottom center / 5em no-repeat; }
#flow ol li:nth-of-type(4) h3:after { background:url(/img/subsc/i-step3.svg) bottom center / 5em no-repeat; }
#flow ol li:nth-of-type(5) h3:after { background:url(/img/subsc/i-step4.svg) bottom center / 5em no-repeat; }
#flow ol li p { line-height:1.6em; }
#flow ol li p:nth-of-type(n+2) { margin-top:.4em; }
#flow ol li p.info { color:var(--blue); }
#flow ol li p.info.attention { color:var(--red); }
#flow ol li p sup { position:relative; top:-.4em; font-size:12px; font-weight:600; color:var(--blue); }
#flow ol li p a { text-decoration:underline; }
#flow ol li p a[href*='14684'] { font-weight:600; color:var(--orange); }


@media screen and (min-width:1601px) {
#flow ol li { width:calc(100%/5 - .8em); padding:3.2em 1.6em 1.6em; }
#flow ol li:nth-of-type(n+2) { margin-left:1em; }
}

@media screen and (min-width:1201px) and (max-width:1600px) {
#flow ol li { width:calc(100%/3 - 1.2em); }
#flow ol li:nth-of-type(n+2) { margin-left:1.8em; }
#flow ol li:nth-of-type(n+4) { margin-top:3em; }
}

@media screen and (min-width:601px) and (max-width:1200px) {
#flow ol li { width:calc(100%/2 - .6em); }
#flow ol li:nth-of-type(2n+2) { margin-left:1.2em; }
#flow ol li:nth-of-type(n+3) { margin-top:2.6em; }
}

@media screen and (max-width:600px) {
#flow ol li:nth-of-type(n+2) { margin-top:3em; }
}



/*==============================
	trial
==============================*/
#flow > [id^='trial-'] { margin:6em auto 0; }


[id^='trial-'] h2.title { font-size:1.4em!important; }
[id^='trial-'] h2.title strong { font-size:1.4em; }
[id^='trial-'] h2.title strong:before { content:'\201C'; margin-right:.1em; }
[id^='trial-'] h2.title strong:after { content:'\201D'; margin-left:.1em; }


@media screen and (max-width:768px) {
#flow > [id^='trial-'] { margin-top:4em; }
[id^='trial-'] h2.title strong { font-size:1.2em; }
}



/*==============================
	trial-desc
==============================*/
#trial-desc h2.title { margin-bottom:1em; /*padding:1em 0; background:rgba(var(--biz-trial-rgb),.12);*/ }
#trial-desc h2.title b { font-size:1em; color:var(--biz-trial); }

#trial-desc > section { display:flex; flex-wrap:wrap; justify-content:center; max-width:50em; margin:auto; background:#fff; }

#trial-desc h3 { display:flex; align-items:center; width:100%; padding:1.2em .6em; font-size:1.4em; font-weight:600; background:rgba(var(--biz-trial-rgb),.06); }
#trial-desc h3 strong { display:flex; align-items:center; width:5em; height:5em; text-align:center; color:#fff; background:var(--biz-trial); border-radius:50%; }
#trial-desc h3 strong em { width:100%; font-style:normal; font-size:1.4em; letter-spacing:.1em; }
#trial-desc h3 span { width:14em; margin-left:1em; line-height:1.6em; }
#trial-desc h3 b { font-size:1.4em; }

#trial-desc .detail { display:flex; flex-wrap:wrap; justify-content:center; margin:auto; }
#trial-desc .detail > picture { width:100%; }
#trial-desc img { display:block; margin:auto; }
#trial-desc img[alt*='sample'] { width:14em; margin-bottom:1em; }

#trial-desc .flex { display:flex; justify-content:center; width:100%; margin-top:2em; }
#trial-desc dl:nth-of-type(n+2) { margin-left:4em; }
#trial-desc dt { margin-bottom:1em; }
#trial-desc dt img { width:8em; }
#trial-desc dt img[alt*='image'] { margin-bottom:1em; }
#trial-desc dd:before { content:'\30FB'; }

#trial-desc p + p { margin-top:.4em; }
#trial-desc p.info { width:100%; font-size:12px; line-height:1.4em; }

#trial-desc button.cv { width:100%; margin-top:1em; }
#trial-desc button.cv a { max-width:18em; padding:.8em 0; font-size:1.1em; color:var(--biz-trial); border:2px solid; }
#trial-desc button.cv a:hover { color:#fff; background:var(--biz-trial); border-color:transparent; }

/*accordion*/
#trial-desc h3 { position:relative; padding-bottom:2em; cursor:pointer; }
#trial-desc h3:not(.open) { border-bottom:.4em solid var(--bg); }
#trial-desc h3.open { margin-bottom:.4em; }
#trial-desc h3 i {
 position:absolute;
 left:0;
 right:0;
 bottom:1em;
 margin:auto;
 text-align:center;
 font-size:.8em;
 font-weight:500;
 color:var(--link);
 border-bottom:1px solid #fdf9f4;
 transition:.6s;
}
#trial-desc h3:not(.open) i { width:7em; }
#trial-desc h3.open i { width:5em; }
#trial-desc h3:not(.open) i:before { content:'詳しく見る'; }
#trial-desc h3.open i:before { content:'閉じる'; }
#trial-desc h3:hover i { border-color:var(--link); }
#trial-desc h3 svg { position:relative; width:1em; margin-left:.4em; fill:transparent; stroke:var(--link); stroke-width:6px; }
#trial-desc h3:not(.open) svg { top:.2em; transform:rotate(90deg); }
#trial-desc h3.open svg { top:.1em; transform:rotate(-90deg); }
#trial-desc h3:not(.open) + .detail { height:0; padding:0; visibility:hidden; opacity:0; }
#trial-desc h3.open + .detail { padding:2em; border-bottom:.4em solid var(--bg); }


@media screen and (max-width:768px) {
#trial-desc h3 strong { width:4.4em; height:4.4em; }
#trial-desc h3.open + .detail { padding:1em; }
}

@media screen and (min-width:426px) {
#trial-desc h3 { justify-content:center; }
#trial-desc p.info { text-align:center; }
}

@media screen and (max-width:425px) {
#trial-desc h3 { font-size:5vw; }
#trial-desc h3 span { width:auto; margin-left:2vw; letter-spacing:1px; }
#trial-desc .flex { margin-top:1em; }
#trial-desc dl:nth-of-type(n+2) { margin-left:2em; }
}



/*==============================
	trial-faq
==============================*/

#trial-faq dl { width:calc(100% - 2em); max-width:50em; margin:auto; line-height:1.6em; }
#trial-faq dl > * { padding:1em; }
#trial-faq dt,
#trial-faq dd p:first-of-type { position:relative; font-size:1.1em; font-weight:600; letter-spacing:1px; }
#trial-faq dl *:before { position:absolute; margin-right:.2em; font-size:2em; }

#trial-faq dt { padding-left:2.6em!important; background:rgba(var(--biz-trial-faq),.4); }
#trial-faq dt:before { top:0; bottom:0; left:.4em; content:'Q'; height:.6em; margin:auto; color:#fff; }
#trial-faq dt:nth-of-type(n+2) { margin-top:1.2em; }
#trial-faq dt br { display:none; }

#trial-faq dd { background:#fff; }
#trial-faq dd p:first-of-type { padding-left:2em!important; }
#trial-faq dd p:first-of-type:before { top:0; left:.1em; content:'A'; color:rgba(var(--biz-trial-faq),1); }
#trial-faq dd p:nth-of-type(n+2) { margin-top:.6em; }
#trial-faq dd a { text-decoration:underline; color:var(--biz-trial-link); }

/*accordion*/
#trial-faq dt { position:relative; padding-right:3em!important; cursor:pointer; }
#trial-faq dt svg { position:absolute; top:0; bottom:0; right:1em; display:block; width:1.6em; margin:auto; fill:transparent; stroke:var(--lp-text); stroke-width:6px; }
#trial-faq dt:not(.open) svg { transform:rotate(90deg); }
#trial-faq dt.open svg { transform:rotate(-90deg); }
#trial-faq dt:not(.open) + dd { height:0; padding:0; visibility:hidden; opacity:0; }


@media screen and (min-width:1441px) {
#trial-faq dt { padding:1.6em 3em; padding-left:3.6em!important; }
#trial-faq dt:before { left:.6em; }
#trial-faq dd { padding:2em 3em; }
#trial-faq dd p:nth-of-type(n+2) { margin-top:1em; }
}

/*@media screen and (max-width:768px) {
#trial-faq { padding:4em 0; }
}*/

@media screen and (min-width:375px) and (max-width:768px) {
#trial-faq dt br { display:block; }
}

@media screen and (max-width:320px) {
#trial-faq dl > * { padding:1em .6em; }
#trial-faq dt svg { width:1.2em; }
}



/*==============================
	Scene
==============================*/
#scene h2 { text-align:center; font-size:1.46em; letter-spacing:.1em; }


/*slide*/
#scene .swiper-container { width:100%; margin:2em auto 0; }
#scene ul { -webkit-transition-timing-function:linear!important; -o-transition-timing-function:linear!important; transition-timing-function:linear!important; }
#scene ul li img { display:block; width:100%; }
#scene ul li p { margin-top:.6em; text-align:center; font-feature-settings:'palt'; line-height:1.4em; }


/*button*/
#scene button.border { margin-top:2em; }


/*modal-more*/
#more-scene .modal-content { max-width:1000px; }
#more-scene h4 { text-align:center; margin-bottom:1em; font-size:1.2em; line-height:1.6em; letter-spacing:.1em; }
#more-scene dl { display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; }
#more-scene dl > * { padding:1em 0; line-height:1.6em; border-top:1px solid; }
#more-scene dt { width:7em; padding-right:1em; font-weight:600; }
#more-scene dd { width:calc(100% - 7em); }


@media screen and (min-width:801px) {
#more-scene dl > * { padding:1em; }
#more-scene dt { width:8em; padding-right:0; }
#more-scene dd { width:calc(100% - 8em); }
}



/*==============================
	Message
==============================*/
#message .inline { position:relative; width:calc(100% - 4em); max-width:1000px; margin:auto; padding:2em; background:#fff; }
/*#message .inline:before { position:absolute; top:.6em; left:.6em; content:''; display:block; width:100%; height:100%; border:1px solid #ccc; }*/

#message h3 { font-size:1.4em; line-height:1.6em; letter-spacing:1px; }
#message h3 br { display:none; }
#message img { display:block; width:8em; }
#message img + p { margin:1em auto 2em;}

#message p { line-height:1.8em; }
#message p + p { margin-top:.4em; }


@media screen and (min-width:801px) {
#message h3 br:nth-of-type(2) { display:block; }
}

@media screen and (max-width:800px) {
#message h3 br { display:block; }
}

@media screen and (min-width:601px) {
#message img { position:absolute; top:2em; right:2em; }
#message img + p { font-weight:600; }
}

@media screen and (max-width:600px) {
#message .inline { padding:2em 1.2em; }
#message .inline:before { top:.4em; left:.4em; }
#message h3 { font-size:4vw; }
#message img { width:16vw; margin:-20vw 0 0 auto; }
#message img + p { margin:.6em auto 1em; text-align:right; }
}

@media screen and (max-width:400px) {
#message .inline { width:calc(100% - 2em); }
#message h3 { font-size:1.1em; }
}



/*==============================
	Faq
==============================*/
#faq h2 { text-align:center; font-size:1.5em; line-height:1.6em; letter-spacing:.1em; }


/*dl*/
#faq dl { width:calc(100%); max-width:600px; margin:auto; }
#faq dl > * { padding:1em; }
#faq dt { position:relative; font-size:1.2em; background:var(--bg); cursor:pointer; }
#faq dt:nth-of-type(n+2) { margin-top:.2em; }
#faq dt:before,
#faq dt:after { content:'';	position:absolute;	top:calc(50% - 1px); right:1.2em;	width:1.2em;	border-bottom:1px solid; transition:.6s; }
#faq dt:after {	transform:rotate(90deg); }
#faq dt.open:before { transform:rotate(-45deg); }
#faq dt.open:after {	transform:rotate(45deg); }
#faq dd { line-height:1.6em; }
#faq dt:not(.open) + dd { display:none; }
#faq sup { position:relative; top:-.4em; margin:0 .2em; font-size:12px; }
#faq .sup { font-size:.94em; }

#faq dl + a { display:block; width:calc(100% - 4em); max-width:600px; margin:2em auto 0; text-align:right; }


@media screen and (min-width:401px) {
#faq dt { text-align:center; }
}

@media screen and (max-width:400px) {
#faq dt { padding-left:2em; font-size:1.1em; }
#faq dl + a { margin-top:1.6em; }
}



/*==============================
	Cart-area
==============================*/
#cart-area { counter-reset:number 0; position:relative; margin-top:10em!important; padding-top:8em; background:var(--bg); }


/*h2*/
#cart-area > h2 { width:calc(100% - 2em); margin:0 auto 2em; padding:1em 0; text-align:center; font-size:1.26em; letter-spacing:.1em; background:#fff; }
#cart-area > h2:nth-of-type(n+2) { margin-top:4em; }
#cart-area > h2 b { position:relative; top:.08em; margin-right:.1em; font-size:1.4em; color:var(--blue); }


/*h3*/
#cart-area h3 { margin-bottom:1.2em; text-align:center; font-size:1.2em; line-height:1.8em; }
#cart-area h3 span { display:inline-block; margin:0 .6em; padding:.2em 1em 0; font-size:.9em; background:#fff; }
#cart-area h3 em { position:relative; top:-.1em; margin-left:.4em; font-size:.8em; font-style:normal; color:var(--red); }
#cart-area h3 + p { margin-bottom:2em; line-height:1.6em; }

#cart-area > section { width:calc(100% - 4em); max-width:1000px; margin:auto; }
#cart-area > section#member{text-align:center;}
#cart-area > section:nth-of-type(n+2) { margin-top:3em; padding-top:3em; border-top:.6em solid #fff; }
#cart-area > section:before {
 counter-increment:number 1;
 content:'STEP.' counter(number);
 display:block;
 width:4.2em;
 margin:0 auto 1em;
 text-align:center;
 font-size:1.2em;
 letter-spacing:.1em;
 color:var(--blue);
 border-bottom:2px solid;
}


/*supp*/
#cart-area .supp { position:absolute; top:-4em; left:0; right:0; max-width:20em; }
#cart-area .supp:after { position:absolute; right:-.6em; bottom:-.6em; content:''; width:2.4em; height:2.4em; background:url(/item/teigaku/img/i-store.svg) center / 100% no-repeat; }


/*modal-store*/
#modal-store h3 { margin-bottom:1.2em; text-align:center; font-size:1.1em; line-height:1.6em; letter-spacing:.1em; }
#modal-store h4 { margin-bottom:1em; text-align:center; letter-spacing:.1em; color:var(--blue); }
#modal-store h4:nth-of-type(n+2) { margin-top:2em; padding-top:1.6em; border-top:1px dashed; }
#modal-store a { border:none; }
#modal-store a[aria-label='map'] { text-decoration:underline; color:var(--link); }
#modal-store dl > * { line-height:1.4em; }
#modal-store dt { padding:.6em; color:var(--blue); background:var(--bg); }
#modal-store dt:nth-of-type(n+2) { margin-top:1em; }
#modal-store dd { margin-top:.4em; }


/*tel-order*/
#cart-area #tel-order { position:relative; text-align:center; font-size:1.1em; }
#cart-area #tel-order > * { display:block; }
#cart-area #tel-order time { line-height:1.2em; }
#cart-area #tel-order p { line-height:1.6em; text-align:center;}
#cart-area #tel-order a { display:flex; justify-content:center; align-items:center; width:10em; margin:.6em auto; font-size:2em; }
#cart-area #tel-order a img { width:1.6em; margin:0 .2em 0 0; }
#cart-area #tel-order a:hover { color:var(--blue); }
#cart-area #tel-order time span { margin-left:.2em; }
#cart-area #tel-order > img[alt='operator'] { position:absolute; bottom:-.4em; left:21em; right:0; width:14vw; max-width:40px; margin:auto; }


/*member*/
#cart-area #member button { margin:1.2em auto 2em; }
#cart-area #member .info { text-align:left; font-size:.9em; line-height:1.4em; }


/*terms-of-service*/
#terms-of-service iframe { display:block; width:100%; height:40vh; margin:0 auto 1em; border:1px solid; }
#terms-of-service iframe + p { text-align:right; font-feature-settings:'palt'; }
#terms-of-service .info { text-align:left; font-size:.9em; line-height:1.4em; }

#cart-area .agree-check { position:relative; display:block; margin:1em auto 1.6em; text-align:center; font-size:1.1em; font-weight:600; cursor:pointer; }
.agree-check input { position:absolute; top:0; left:0; opacity:0; }
.agree-check input + p { position:relative; }
.agree-check input + p:before,
.agree-check input + p:after { position:relative; content:''; display:inline-block; }
.agree-check input + p:before {
 top:-.46em;
 left:-.6em;
	width:1.2em;
	height:.6em;
	background:transparent;
	border:2px solid var(--red);
	border-top-style:none;
	border-right-style:none;
	box-sizing:border-box;
	transition:transform .4s cubic-bezier(.45,1.8,.5,.75);
	transform:rotate(-45deg) scale(0,0);
	z-index:1;
}
.agree-check input + p:after { top:.36em; left:-11em; width:1.4em; height:1.4em; border:2px solid #ddd; background:#fff; cursor:pointer; }
.agree-check input:checked + p:before { transform:rotate(-45deg) scale(1,1); }
.agree-check input:checked + p:after { background:transparent; border-color:transparent; }



/*tab*/
#cart-area #form .container { display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; max-width:40em; margin:auto; }
#cart-area #form input.tab { display:none; }
#cart-area #form input.tab:first-child:checked ~ .tabpanels > .panel:first-child,
#cart-area #form input.tab:nth-child(3):checked ~ .tabpanels > .panel:nth-child(2) { display:flex; }
#cart-area #form input.tab + label {
 position:relative;
 display:inline-block;
 width:50%;
 padding:1em 0;
 text-align:center;
 font-size:1.1em;
 background:rgba(0,0,0,.06);
 border:1px solid transparent;
 cursor:pointer;
}
#cart-area #form .hidden{
    display:none;
}
#cart-area #form input.tab + label:hover,
#cart-area #form input.tab:focus + label { color:var(--link); }
#cart-area #form input.tab:checked + label { color:#fff; z-index:1; }
#cart-area #form input.tab:checked + label:before {
 position:absolute;
 top:-1.5em;
 left:0;
 right:0;
 content:'\9078\629E\4E2D';
 width:5em;
 margin:auto;
 text-align:center;
 font-size:12px;
 color:var(--lp-text);
 background:#fff;
 border:1px solid;
 border-radius:2em;
}
#cart-area #form input.tab[value*='air']:checked + label { background:var(--blue); }
#cart-area #form input.tab[value*='biz']:checked + label { background:var(--dblue); }
#cart-area #form .tabpanels input.tab:checked + label { background:#fff; border-left-width:.6em; }
#cart-area #form .tabpanels input.tab[value*='air']:checked + label { color:var(--blue); border-color:var(--blue); }
#cart-area #form .tabpanels input.tab[value*='biz']:checked + label { color:var(--dblue); border-color:var(--dblue); }
#cart-area #form input.tab + label p { font-weight:600; line-height:1.4em; }
#cart-area #form input.tab + label p b { margin-right:.2em; font-size:1.2em; }
#cart-area #form .tabpanels { width:100%; }
#cart-area #form .panel {width:100%; margin-top:2em; }

#cart-area #form .container.panel { justify-content:space-between; }
#cart-area #form .container.panel .tabpanels { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; }
#cart-area #form .container.panel input.tab:first-child:checked ~ .tabpanels > .panel:first-child,
#cart-area #form .container.panel input.tab:nth-child(3):checked ~ .tabpanels > .panel:nth-child(2) { display:block; }


/*form*/
#cart-area #form h4 { margin:.2em auto 2em; text-align:center; font-size:1.2em; }
#cart-area #form h4 span { display:block; width:12em; margin:0 auto .4em; padding-bottom:.2em; font-size:.9em; font-weight:400; border-bottom:1px solid var(--lp-text); }
#cart-area #form div[id*='air'] h4 span { color:var(--blue); }
#cart-area #form div[id*='biz'] h4 span { color:var(--dblue); }

#cart-area #form fieldset { display:flex; justify-content:center; max-width:21em; margin:auto; align-items:center; font-size:16px!important; }
#cart-area #form fieldset:nth-of-type(n+2) { margin-top:1.8em; }
#cart-area #form fieldset:last-of-type { margin-bottom:1.6em; }
#cart-area #form legend { width:6em; margin-right:1em; }
#cart-area #form select {
 width:calc(100% - 7em);
 margin:-2em 0 0 auto;
 padding:.4em 1.8em .4em .6em;
 line-height:1.6em;
 background:url(/svg/i-arrow-b.svg) center right.6em / .8em no-repeat #fff;
 border:1px solid;
 border-radius:.2em;
}
#cart-area #form select option:disabled { background:#eee; }
#cart-area #form fieldset + .info { max-width:20em; margin:.6em auto 0; text-align:right; }
#cart-area #form fieldset + .info a { display:inline-block; padding:.4em; color:var(--link); }
#cart-area #form fieldset + .info a:after {
 position:relative;
 right:-.2em;
 content:'';
 display:inline-block;
 width:.8em;
 height:.8em;
 background:url(/svg/i-link-ext_navy.svg) 100% / contain no-repeat;
}
#cart-area #form .price { text-align:center; font-size:1.2em; }
#cart-area #form .price b { margin-left:.2em; color:var(--red); }
#cart-area #form .price b:after { content:'\FF08\7A0E\8FBC\FF09'; margin-left:2px; font-size:.8em; }
#cart-area #form .price em { margin-right:1px; font-size:1.4em; font-style:normal; }
.iphone #cart-area #form .price em { letter-spacing:-1px; }
#cart-area #form .price s { margin:0 .4em; text-decoration:line-through; opacity:.6; }
#cart-area #form .off { max-width:22em; margin:.2em auto 0; color:var(--red); border:1px solid; }
#cart-area #form .price.info { margin-top:.8em; font-size:.92em; line-height:1.6em; }
#cart-area #form .error { display:none; margin:1.6em auto .4em; text-align:center; font-size:.9em; color:var(--red); }
#cart-area #form:not(.ok) .error { display:block; }

#cart-area #form #air-m-submit,#cart-area #form #air-y-submit,#cart-area #form #biz-m-submit,#cart-area #form #biz-y-submit { text-align: center;display:block; margin:2em auto 0; padding:1.4em 1.6em; font-weight:600; letter-spacing:.1em; color:#fff; background:var(--lp-text); border-radius:10em; cursor:pointer;max-width: 220px; }
#cart-area #form:not(.ok) #air-m-submit,#cart-area #form:not(.ok) #air-y-submit,#cart-area #form:not(.ok) #biz-m-submit,#cart-area #form:not(.ok) #biz-y-submit { margin-top:1em; color:#aaa; background:#eee; pointer-events:none; cursor:default; }
#cart-area #form #air-m-submit + .info,#cart-area #form #air-y-submit + .info,#cart-area #form #biz-m-submit + .info,#cart-area #form #biz-y-submit + .info { margin-top:2em; font-size:12px; line-height:1.6em; }
#cart-area #form .trial { margin-top:1em; padding:.6em; font-size:.86em; line-height:1.6em; color:var(--orange); background:#fff; }
#cart-area #form .trial a { display:inline-block; margin:0 .2em; color:var(--link); }


/*link*/
#cart-area a.option { margin-top:3em; }

/*banner*/
#cart-area a.banner { display: block; margin:0 auto; }


@media screen and (min-width:1001px) {
#cart-area #member .info,
#terms-of-service .info { text-align:center; }
}

@media screen and (min-width:801px) {
#cart-area h3 + p { text-align:center; }
#cart-area #tel-order p br { display:none; }
#cart-area #form .tabpanels { display:flex; justify-content:space-between; align-items:stretch; }
#cart-area a.option { font-size:1.1em; }
}

@media screen and (max-width:600px) {
#cart-area { padding-top:6em; }
#cart-area > h2:nth-of-type(n+2) { margin-top:3em; }
#cart-area #tel-order time span { display:block; margin:.4em auto 0; }
#cart-area #tel-order > img[alt='operator'] { bottom:0; left:15em; }
#cart-area #form .error { font-size:1em; }
#cart-area #form #air-m-submit,#cart-area #form #air-y-submit,#cart-area #form #biz-m-submit,#cart-area #form #biz-y-submit
{ font-size:1.2em; }
#cart-area #form fieldset + .info { max-width:22em; }
}

@media screen and (max-width:400px) {
#cart-area > section { width:calc(100% - 2em); }
#cart-area #form input.tab + label p b { display:block; margin-bottom:.2em; }
#cart-area #form fieldset + .info { max-width:24em; }
#cart-area #form .off { font-size:1em; }
}



/*==============================
	Footer
==============================*/
#teigaku footer { text-align:center; background:#777; }
#teigaku footer .inline { max-width:1400px; margin:auto; padding:1em; }


/*contact*/
#teigaku footer .contact { display:flex; flex-wrap:wrap; justify-content:center; margin-top:1em; text-align:center; font-size:1.1em; font-weight:600; }
#teigaku footer .contact dt { width:100%; margin-bottom:.8em; letter-spacing:.1em; color:#fff; }
#teigaku footer .contact dd { width:calc(100%/2 - .6em); max-width:16em; }
#teigaku footer .contact dd:nth-of-type(n+2) { margin-left:1.2em; }
#teigaku footer .contact dd a { display:block; padding:.6em 0; background:#fff; border-radius:10em; }
#teigaku footer .contact dd a span { display:inline-block; }
#teigaku footer .contact dd:nth-of-type(2) a span { padding:0 .1em; font-size:.9em; }
#teigaku footer .contact + .info { margin-top:1.2em; text-align:center; font-size:.9em; color:#ddd; }


/*link*/
#teigaku footer .link { margin-top:1.4em; }
#teigaku footer .link li { display:inline-block; margin:.2em; font-feature-settings:'palt'; }
#teigaku footer .link li a { display:block; padding:.2em; color:#fff; }


/*copy*/
#teigaku footer .copyright { margin-top:2em; font-size:12px; color:#fff; }

#index-footer #copy .icon-license { margin-top:1em; font-size:12px; }
#index-footer #copy .icon-license a {text-decoration:none; }


@media screen and (max-width:600px) {
#teigaku footer { font-size:.9em; }
#teigaku footer .contact dd { width:calc(100%/2 - .4em); }
#teigaku footer .contact dd:nth-of-type(n+2) { margin-left:.8em; }
}



/*==============================
	page top
==============================*/
#teigaku a.page-top {
 position:fixed;
 bottom:2em;
 right:2em;
 width:6em;
 margin:auto;
 padding:.2em;
 text-align:center;
 letter-spacing:1px;
 background:rgba(255,255,255,.9);
 border-top:2px solid;
 transition:none;
 z-index:20000;
}
#teigaku a.page-top.cart { right:0; left:0; }


@media screen and (min-width:769px) and (max-width:1024px) {
#teigaku a.page-top { bottom:2vw; right:0; left:0; }
}

@media screen and (max-width:768px) {
#teigaku a.page-top { display:none!important; }
}


