@charset'UTF-8';

/*Fadein*/
.fadein { transition:all 1s!important; }


/*link*/
#pdt-h2time a { font-feature-settings:'palt'; }
#pdt-h2time a[target='_blank'],
#pdt-h2time a.window { padding-right:.8em; }
#pdt-h2time a[target='_blank']:after,
#pdt-h2time a.window:after {
 position:relative;
 top:.1em;
 left:.3em;
 content:'';
 display:inline-block;
 width:.8em;
 height:.8em;
 background:url(/svg/i-link-ext_navy.svg) 100% / contain no-repeat;
}



/*==============================
	Color
==============================*/
:root {
 --blue:#2c4198;
 --mblue:#007ab2;
 --lblue:#00afcc;
 --price:#bb5151;
 --bg:#eff6f9;
 --font-family:'Noto Sans JP', sans-serif;
 }



/*==============================
	Loading
==============================*/
.loading {
 position:fixed;
 top:0;
 left:0;
 display:flex;
 justify-content:center;
 align-items:center;
 width:100vw;
 height:100vh;
 background:#fff;
 z-index:10000;
}

.loading p { text-align:center; font-size:1.2em; letter-spacing:.2em; color:var(--blue); }



/*==============================
	Common
==============================*/
#pdt-h2time { margin-top:0; padding-top:0!important; }


/*section*/
#pdt-h2time > section { margin:6em auto; }
#pdt-h2time .bg { padding:4em 1em; }


/*form*/
#pdt-h2time input,
#pdt-h2time select { -webkit-appearance:none; }


@media screen and (max-width:600px) {
#pdt-h2time { font-size:.96em; }
#pdt-h2time > section { margin:4em auto; }
#pdt-h2time .bg { padding:3em .6em; }
}



/*==============================
	Modal
==============================*/
.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%);
	z-index:20;
}
.modal-content h3 { margin-bottom:1.2em; text-align:center; font-size:1.1em; line-height:1.6em; letter-spacing:.1em; }
.modal-content h4 { margin-bottom:1em; text-align:center; letter-spacing:.1em; color:var(--mblue); }
.modal-content h4:nth-of-type(n+2) { margin-top:2em; padding-top:1.6em; border-top:1px dashed; }
.modal-content a[aria-label='map'] { text-decoration:underline; color:var(--blue); }
.modal-content dl { margin-top:1em; }
.modal-content dl > * { line-height:1.4em; }
.modal-content dt { padding:.6em; color:var(--mblue); background:var(--bg); }
.modal-content dt:nth-of-type(n+2) { margin-top:1em; }
.modal-content dd { margin-top:.4em; }
.modal-content span { font-size:.9em; color:var(--blue); }
.modal-content img { display:block; width:100%; max-width:420px; margin:1em auto 0; }


@media screen and (max-width:450px) {
.modal-content { top:44%; }
}



/*==============================
	movie
==============================*/
.movie,
.movie video { display:block; margin:auto; }

.movie { cursor:pointer; }
.movie:hover { background-color:transparent; }
.movie > *:not(script) { display:block; width:100%; pointer-events:auto!important; }



/*==============================
	Title
==============================*/
#pdt-h2time h2 {
 font-family:var(--font-family);
 margin-bottom:1em;
 text-align:center;
 font-size:1.6em;
 font-weight:500;
 line-height:1.6em;
 letter-spacing:.1em;
 color:var(--mblue);
}


@media screen and (max-width:600px) {
#pdt-h2time h2 { font-size:1.4em; }
}



/*==============================
	Main
==============================*/
#main-visual { margin-top:0!important; }
#main-visual .bg { background:url(img/bg-image.jpg) center / cover no-repeat; background-color:rgba(255,255,255,.6); background-blend-mode:lighten; }

#main-visual h1 {
 font-family:var(--font-family);
 text-align:center;
 font-size:2.6em;
 line-height:1.4em;
 letter-spacing:2px;
 color:var(--blue);
 background:linear-gradient(0deg, var(--lblue), var(--mblue), var(--blue));
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
}
#main-visual h1 span { display:block; font-size:.8em; }
#main-visual h1 br { display:none; }

#main-visual img { display:block; width:calc(100% - 6em); max-width:400px; margin:auto; }

#main-visual p { position:relative; left:-.2em; width:calc(100% - 4em); max-width:54em; margin:-2em auto 0; padding:2em; font-size:1.06em; line-height:2em; background:rgba(255,255,255,.8); }
#main-visual p:before { position:absolute; top:.4em; left:.4em; content:''; display:block; width:calc(100% + .2em); height:calc(100% + .2em); }
#main-visual p,
#main-visual p:before { border:1px solid var(--mblue); }


@media screen and (max-width:1000px) {
#main-visual h1 { font-size:5vw; font-feature-settings:'palt'; }
}

@media screen and (min-width:601px) {
#main-visual p { text-align:center; line-height:2em; word-break:keep-all; word-wrap:break-word; }
}

@media screen and (max-width:600px) {
#main-visual h1 { font-size:5.4vw; line-height:1.8em; }
#main-visual h1 > br { display:block; }
#main-visual p { font-size:1em; line-height:1.8em; }
}

@media screen and (max-width:400px) {
#main-visual h1 { font-size:1.6em; }
#main-visual h1 span { margin-top:.4em; line-height:1.8em; }
#main-visual h1 br { display:block; }
#main-visual p { width:calc(100% - 3em); padding:1.2em; }
}



/*==============================
	Description
==============================*/
#description h3 { margin-bottom:.6em; text-align:center; font-size:1.1em; letter-spacing:1px; }
#description h4 { margin:.8em auto .4em; font-weight:600; }
#description a { color:var(--link); }
#description img { display:block; width:100%; margin:auto; }
#description img[alt='illust'] { width:auto; height:5em; }
#description img[alt='measured'] { margin-top:.6em; border:1px solid; }
#description p { line-height:1.6em; }
#description p[align='right'] { text-align:right; }
#description a p[align='right'] { display:inline-block; margin-top:.2em; font-size:.9em; }
#description p b { font-weight:500; color:var(--mblue); }

#description ol,
#description ul { width:calc(100% - 2em); margin:3em auto 0; }

#description ol { counter-reset:number 0; display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; max-width:1400px; }
#description ol li { position:relative; display:inline-block; width:calc(100%/4 - .6em); padding:2em 1em 1em; vertical-align:top; background:var(--bg); }
#description ol li:before {
 position:absolute;
 top:-.5em;
 left:0;
 right:0;
 counter-increment:number 1;
 content:counter(number);
 display:block;
 margin:0 auto .6em;
 text-align:center;
 font-family:var(--font-family);
 font-size:1.6em;
 font-weight:600;
 color:var(--mblue);
}
#description ol li img { margin:1em auto; }

#description ul { max-width:600px; }
#description ul li { position:relative; margin-top:.4em; padding:2em 1.8em; background:#fff; border:1px solid var(--blue); overflow:hidden; transition:.4s; }
#description ul li:not(.open) { max-height:10.5em; }
#description ul li.open { padding-bottom:4em; }
#description ul li:nth-of-type(n+2) { margin-top:2em; }
#description ul li h3 { width:100%; margin:0 auto .6em; padding:0 1em; color:var(--blue); background:#fff; }
#description ul li:nth-of-type(5) p[align='right'] { margin-top:.6em; font-size:.9em; }
#description ul li:nth-of-type(5) img { width:15em; height:auto; }
#description ul li .acd-btn {
 position:absolute;
 left:0;
 right:0;
 bottom:0;
 width:calc(100% - 2em);
 margin:0 1em;
 padding:2.6em 0 1px;
 text-align:center;
 font-size:.9em;
 background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.95) 40%);
 border:none;
 border-bottom:1em solid #fff;
 cursor:pointer;
}
#description ul li .acd-btn span { display:inline-block; padding:.3em .8em; border:1px solid; border-radius:10em; }
#description ul li.open .acd-btn { width:5em; margin:auto; padding:.4em; }
#description ul li.open .acd-btn:after { content:'\9589\3058\308B'; display:inline-block; width:4em; margin:auto; border-bottom:1px solid; }
#description ul li.open .acd-btn span { display:none; }


@media screen and (min-width:1401px) {
#description ol li { padding:2em; }
}

@media screen and (min-width:801px) {
#description ol li:nth-of-type(n+2) { margin-left:.8em; }
#description ul li:first-of-type { max-height:none; }
#description ul li:first-of-type .acd-btn { display:none; }
}

@media screen and (min-width:426px) and (max-width:800px) {
#description ol li { width:calc(100%/2 - .5em); }
#description ol li:nth-of-type(2n+2) { margin-left:1em; }
#description ol li:nth-of-type(n+3) { margin-top:1em; }
}

@media screen and (min-width:601px) {
#description ul li:nth-of-type(5) { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; }
#description ul li:nth-of-type(5) p { width:calc(100% - 16em); }
#description ul li:nth-of-type(5) p[align='right'] { width:100%; }
#description ul li:nth-of-type(5) img { margin-left:1em; }
}

@media screen and (max-width:600px) {
#description img[alt='illust'] { height:4em; }
#description ul li:nth-of-type(5) p[align='right'] { text-align:center; }
#description ul li:nth-of-type(5) img { margin-top:1em; }
}

@media screen and (max-width:425px) {
#description ol li { width:100%; }
#description ol li:nth-of-type(n+2) { margin-top:1em; }
#description ul li:not(.open) { max-height:11.6em; }
}



/*==============================
	Overview
==============================*/
#overview { background:var(--bg); }
#overview > p { width:calc(100% - 4em); max-width:68em; margin:auto; line-height:1.8em; }
#overview > p:nth-of-type(n+2) { margin-top:.8em; }

#overview .gallery { display:flex; justify-content:center; align-items:flex-start; width:calc(100% - 4em); max-width:600px; margin:2em auto 0; }
#overview .gallery picture { width:calc(100%/3 - .8em); box-shadow:3px 3px 3px 0 rgba(0,0,0,.1); }
#overview .gallery picture:nth-of-type(n+2) { margin-left:1.2em; }
#overview .gallery img { display:inline-table; width:100%; }

#overview .message { position:relative; width:calc(100% - 4em); max-width:68em; margin:2em auto 0; padding:2em; background:rgba(255,255,255,.8); border-radius:1em; }
#overview .message:before { position:absolute; top:-1.7em; left:0; right:0; content:''; width:1em; margin:auto; border:.6em solid transparent; border-bottom:1.2em solid rgba(255,255,255,.8); }
#overview .message p { line-height:1.6em; }
#overview .message p b { color:var(--mblue); }


@media screen and (max-width:600px) {
#overview .message { width:calc(100% - 2em); }
}

@media screen and (max-width:400px) {
#overview > p { width:calc(100% - 2em); }
#overview .message { padding:1em; }
}



/*==============================
	Point
==============================*/
#point ul { max-width:1600px; margin:auto; line-height:1.4em; }
#point li { display:inline-block; width:16em; height:16em; margin:.6em; padding:1.6em; background:var(--bg); border-radius:50%; }
#point li h3 { display:block; width:100%; margin:2em auto .8em; padding-bottom:.6em; text-align:center; font-size:1.1em; border-bottom:1px solid; }
#point li p:nth-of-type(n+2) { margin-top:.2em; }
#point li p span { font-size:12px; }


@media screen and (min-width:601px) {
#point ul { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; width:calc(100% - 2em); }
}

@media screen and (max-width:600px) {
#point ul { padding:0 1em 8px; overflow-x:auto; white-space:nowrap; }
#point li { padding:1em; vertical-align:top; white-space:normal; }
#point li h3 { margin-top:2.4em; }
}

@media screen and (max-width:400px) {
#point li { width:13em; height:13em; margin:.4em; padding:1em .6em; }
#point li h3 { margin-top:1.2em; }
}



/*==============================
	Voice
==============================*/
#voice > p { width:calc(100% - 4em); max-width:51em; margin:auto; line-height:1.8em; }

#voice > [class^='swiper'], #voice > ul { width:calc(100% - 4em); max-width:2000px; margin:2em auto 0; }
#voice > ul { display:flex; justify-content:center; align-items:stretch; }
#voice li { height:auto; padding:2em; background:var(--bg); }
#voice > ul li { width:calc(100%/3 - .8em); }
#voice > ul li:nth-of-type(n+2) { margin-left:1.2em; }

#voice li h3 { margin-bottom:1em; text-align:center; font-size:1.1em; }
#voice li h3 span:nth-of-type(2) {
 display:block;
 width:calc(100% - 2em);
 max-width:16em;
 margin:.8em auto 0;
 padding-top:.6em;
 text-align:center;
 font-size:.9em;
 font-weight:500;
 border-top:1px solid;
}
#voice li p { line-height:1.6em; }
#voice li p + p { margin-top:.4em; }
#voice li a { display:block; }
#voice li a:after { content:'\203B\30AF\30EA\30C3\30AF\3067\62E1\5927'; display:block; margin-bottom:1em; text-align:center; font-size:12px; }
#voice li img { display:block; width:100%; max-width:16em; margin:0 auto .6em; border:1px solid #aaa; }
#voice li .info { font-size:.9em; }

#voice [class^='swiper-button'] { width:1em; height:1em; background:none; box-shadow:none; }
#voice .swiper-button-next,
#voice .swiper-button-prev { background:none!important; border:none; }
#voice .swiper-button-prev { left:0; }
#voice .swiper-button-next { right:0; }
#voice .swiper-button-prev:before,
#voice .swiper-button-next:before { border-color:var(--text)!important; }


@media screen and (min-width:1401px) {
#voice .swiper-pagination,
#voice [class^='swiper-button'] { display:none; }
}

@media screen and (max-width:1200px) {
#voice li { padding:2em 1em; }
}

@media screen and (max-width:1000px) {
#voice > ul { display:block; }
#voice > ul li { width:100%; }
#voice > ul li:nth-of-type(n+2) { margin:1em 0 0; }
}

@media screen and (max-width:600px) {
#voice > [class^='swiper'], #voice > ul { width:calc(100% - 2em); }
}

@media screen and (max-width:400px) {
#voice > p { width:calc(100% - 3em); }
#voice li img { max-width:12em; }
}



/*==============================
	Spec
==============================*/
#spec dl { display:flex; flex-wrap:wrap; align-items:stretch; max-width:600px; width:100%; margin:auto; }
#spec dl * { padding:.6em .8em; line-height:1.2em; }
#spec dl *:nth-of-type(n+2) { margin-top:.2em; }
#spec dt { width:9em; background:#f3f3f3; }
#spec dd { width:calc(100% - 9em); background:#fbfbfb; }



/*==============================
	Faq
==============================*/
#faq ul { width:calc(100%); max-width:600px; margin:2em auto 0; }
#faq li:nth-of-type(n+2), #faq dl, #faq dt:nth-of-type(n+2) { margin-top:.2em; }
#faq h3,
#faq dt { position:relative; padding:1em 3em 1em 1em; line-height:1.2em; cursor:pointer; }
#faq h3 { font-size:1.1em; background:#f5f5f5; }
#faq dt { background:var(--bg); border-bottom:1px solid #eee; }
#faq dd { padding:.6em 1em 1em; line-height:1.6em; }
#faq dd a { text-decoration:underline; color:var(--blue); }

/*open*/
#faq h3:not(.open) + dl, #faq dt:not(.open) + dd { display:none; }
#faq h3:before, #faq dt:before,
#faq h3:after, #faq dt:after { content:'';	position:absolute;	top:calc(50% - 1px); right:1em;	width:1.2em;	border-bottom:1px solid; transition:.6s; }
#faq h3:after, #faq dt:after {	transform:rotate(90deg); }
#faq .open:before { transform:rotate(-45deg); }
#faq .open:after {	transform:rotate(45deg); }



/*==============================
	Cart area
==============================*/
#cart-area { position:relative; margin-top:8em!important; text-align:center; background:var(--bg); }

#cart-area .supp { position:absolute; top:-2.6em; left:0; right:0; max-width:18em; margin:auto; text-align:center; line-height:1.6em; }
#cart-area .supp:after { position:absolute; right:-.6em; bottom:-.6em; content:''; width:2.4em; height:2.4em; background:url(/img/icon/store.svg) center / 100% no-repeat; }
#cart-area .supp a { display:block; padding:1em; color:var(--blue); background:#fff; border:2px solid; }
#cart-area .supp a:hover { border-radius:10em; }
#cart-area .supp em { padding:0 .2em; font-style:normal; background:var(--bg); }
#cart-area .supp span { display:inline-block; margin-top:.4em; color:var(--link); border-bottom:1px solid; }

#cart-area h2 { margin-top:1.6em; }
#cart-area h3 { margin-bottom:1em; font-feature-settings:'palt'; line-height:1.6em; }
#cart-area h3 + p { margin-bottom:1.8em; font-feature-settings:'palt'; line-height:1.6em; }

#cart-area img { display:block; width:calc(100% - 2em); max-width:200px; margin:0 auto 2em; }

#cart-area p a { text-decoration:underline; color:var(--blue); }
#cart-area p.info { margin-bottom:.6em; font-size:.9em; line-height:1.6em; }
#cart-area p.info:last-of-type + * { margin-top:1em; }
#cart-area p.price { margin-bottom:1em; color:var(--price); }
#cart-area p.price:after { content:'\7A0E\8FBC'; margin-left:.2em; font-size:12px; }
#cart-area p.price b { font-size:1.4em; font-weight:400; }

#cart-area form { max-width:1000px; margin:auto; }
#cart-area form * { transition:.4s; }

#cart-area form [class^='cart-'] { line-height:2em; }
#cart-area form [class^='cart-']:nth-of-type(n+2) { margin-top:1em; }
#cart-area form [class^='cart-'] p { margin-bottom:.2em; line-height:1.4em; }
#cart-area form [class^='cart-'] p span { display:inline-block; font-size:.86em; }
#cart-area form [class^='cart-'] input,
#cart-area form [class^='cart-'] select { margin:0 .4em 0 .6em; padding:.4em; font-size:1em; line-height:1em; letter-spacing:1px; border:none; border-radius:.2em; cursor:pointer; }
#cart-area form [class^='cart-'] select { padding-right:1.4em; background:url(/img/icon/arrow-b.png) center right .4em / 12px no-repeat #fff; }

#cart-area form .cart-qty:before { content:'\8CFC\5165\53F0\6570'; }
#cart-area form .cart-qty input { width:3em; }
#cart-area form .cart-qty select { width:3.4em; }

#cart-area form input[type='submit'] {
 font-family:var(--font-family);
	display:block;
	width:100%;
	max-width:11em;
	margin:1.6em auto 0;
	padding:.6em 0 .8em;
	font-size:1.1em;
 font-weight:500;
 letter-spacing:1px;
	color:#fff;
	background:var(--mblue);
	border:none;
	border-radius:6em;
	box-shadow:3px 3px 3px 0 rgba(0,0,0,.1);
	cursor:pointer;
}
#cart-area form input[type='submit']:hover { letter-spacing:.2em; box-shadow:none; }


@media screen and (max-width:500px) {
#cart-area p.info { text-align:left; }
}



/*==============================
	Button
==============================*/
#pdt-h2time a.btn {
 font-family:var(--font-family);
 position:fixed;
 display:flex;
 align-items:center;
 left:1em;
 bottom:1em;
 width:6em;
 height:6em;
 text-align:center;
 font-size:1.1em;
 font-weight:500;
 line-height:1.4em;
 color:#fff;
 background:var(--mblue);
 border-radius:100%;
 box-shadow:3px 3px 3px 0 rgba(0,0,0,.1);
 z-index:100;
 transition:.4s;
}
#pdt-h2time a.btn:hover { letter-spacing:.2em; box-shadow:none; }

#pdt-h2time a.btn span { width:100%; }


@media screen and (max-width:400px) {
#pdt-h2time a.btn { font-size:1em; }
}