@charset'utf-8';

/*==============================
	Root
==============================*/
:root {
 --masclip-bg:237,224,208;--masclip-bg-d:204,175,149;
 --masclip-txt:#187353; --masclip-txt-d:#305b3f;
 --masclip01-rgb:88,121,185; --masclip02-rgb:27,184,207; --masclip03-rgb:118,191,77;
 --masclip-ts2:#f9f2ea 2px 0,#f9f2ea -2px 0,#f9f2ea 0 -2px,#f9f2ea 0 2px,#f9f2ea 2px 2px,#f9f2ea -2px 2px,#f9f2ea 2px -2px,#f9f2ea -2px -2px,#f9f2ea 1px 2px,#f9f2ea -1px 2px,#f9f2ea 1px -2px,#f9f2ea -1px -2px,#f9f2ea 2px 1px,#f9f2ea -2px 1px,#f9f2ea 2px -1px,#f9f2ea -2px -1px;
 --masclip-font:'Allura', cursive;
}



/*==============================
	Common
==============================*/
#item-masclip { padding-bottom:4em; background:url(/item/masclip/img/bg.jpg) center / 100% repeat; overflow:hidden; }
#item-masclip > * { margin:auto; }
#item-masclip > section.bg-color { padding:5em 2em; background:rgba(255,255,255,.7); }
#item-masclip > section:not(.bg-color):not(#main-vs-new) { width:calc(100% - 2em); }
#item-masclip > section:not(#main-vs):not(#main-vs-new) { margin-top:8em; }

#item-masclip h3 { margin-bottom:2em; text-align:center; font-size:1.6em; line-height:1.6em; letter-spacing:1px; }
#item-masclip section:not(.bg-color) h3 { text-shadow:var(--masclip-ts2); }
#item-masclip h3:nth-of-type(n+2) { margin-top:3em; }
#item-masclip h3 b { margin-right:2px; font-family:var(--masclip-font); font-size:2.2em; font-weight:500; }

#item-masclip .memo { font-size:12px; font-feature-settings:'palt'; }
#item-masclip .memo a { text-decoration:underline; }


@media screen and (max-width:1000px) {
#item-masclip > section.bg-color { padding:4em 1em; }
}

@media screen and (max-width:800px) {
#item-masclip { padding-bottom:3em; }
#item-masclip > section:not(#main-vs):not(#main-vs-new) { margin-top:6em; }
#item-masclip h3 { font-size:1.5em; }
}

@media screen and (max-width:600px) {
#item-masclip > section.bg-color { padding:3em 1em; }
#item-masclip > section:not(#main-vs):not(#main-vs-new) { margin-top:4em; }
#item-masclip h3 { font-size:1.4em; }
}

@media screen and (max-width:400px) {
#item-masclip { font-size:.9em; }
#item-masclip h3 { margin-bottom:1em; font-size:1.3em; }
}


/*==============================
	movie
==============================*/
#item-masclip .youtube,
#item-masclip .youtube iframe { display:block; }
#item-masclip .youtube { cursor:pointer; }
#item-masclip .youtube > * { display:block; width:100%; }


@media screen and (min-width:801px) {
.youtube, .youtube iframe { width:60vw; max-height:326px; }
}

@media screen and (max-width:600px) {
.youtube { margin-top:2em; }
}



/*==============================
	main
==============================*/
#item-masclip #main-vs { position:relative; max-width:1200px; height:28em; text-align:center; }
#item-masclip #main-vs > *:not(img) { position:relative; z-index:1; }

#item-masclip #main-vs .catch { margin-bottom:1em; text-shadow:var(--masclip-ts2); font-size:1.5em; font-weight:600; line-height:1.6em; letter-spacing:.1em; }
#item-masclip #main-vs .catch b { font-size:1.2em; }

#item-masclip #main-vs h2 { text-align:center; font-size:1.2em; }
#item-masclip #main-vs h2 > * { display:block; letter-spacing:.1em; }
#item-masclip #main-vs h2 span { max-width:14em; margin:0 auto 1em; padding:.4em .6em; font-size:1.1em; font-weight:500; color:var(--masclip-txt-d); background:rgba(255,255,255,.9); }
#item-masclip #main-vs h2 img { width:18em; margin:0 auto .4em; }
#item-masclip #main-vs h2 b { text-shadow:var(--masclip-ts2); }

#item-masclip #main-vs .point { text-align:center; font-size:1.2em; color:#fff; }
#item-masclip #main-vs .point li { position:relative; }
#item-masclip #main-vs .point li:nth-of-type(1) { background:rgba(var(--masclip01-rgb),.7); }
#item-masclip #main-vs .point li:nth-of-type(2) { background:rgba(var(--masclip02-rgb),.7); }
#item-masclip #main-vs .point li:nth-of-type(3) { background:rgba(var(--masclip03-rgb),.7); }

#item-masclip #main-vs img[alt='package'] { position:absolute; bottom:1em; left:1em; width:auto; height:28em; }
#item-masclip #main-vs img[alt='image'] { position:absolute; bottom:4em; right:1em; width:18em; border-radius:50%; }


@media screen and (min-width:801px) {
#item-masclip #main-vs .point { display:flex; justify-content:center; max-width:20em; margin:2em auto 0; }
#item-masclip #main-vs .point li { width:28%; padding:.8em 1em; }
#item-masclip #main-vs .point li:nth-of-type(3) { width:44%; }
#item-masclip #main-vs .point li b { letter-spacing:1px; }
}

@media screen and (max-width:1000px) {
#item-masclip #main-vs,
#item-masclip #main-vs img[alt='package'] { height:26em; }
#item-masclip #main-vs img[alt='image'] { width:16em; }
}

@media screen and (max-width:800px) {
#item-masclip #main-vs { height:40em; font-size:.9em; }
#item-masclip #main-vs img[alt='package'] { bottom:0; left:-40vw; right:0; margin:auto; }
#item-masclip #main-vs img[alt='image'] { bottom:2em; left:0; right:-30vw; width:18em; margin:auto; }
#item-masclip #main-vs .point { position:absolute; bottom:2em; right:6vw; font-size:1.3em; }
#item-masclip #main-vs .point li { position:relative; width:6em; height:6em; border-radius:50%; }
#item-masclip #main-vs .point li:nth-of-type(1) { right:-1em; }
#item-masclip #main-vs .point li:nth-of-type(2) { top:-2.4em; right:3em; }
#item-masclip #main-vs .point li:nth-of-type(3) { top:-6.7em; right:-1.8em; width:7em; height:7em; }
#item-masclip #main-vs .point li b { position:absolute; top:0; bottom:0; left:0; right:0; display:flex; justify-content:center; align-items:center; margin:auto; }
}

@media screen and (max-width:600px) {
#item-masclip #main-vs { height:34em; }
#item-masclip #main-vs .catch { margin-bottom:1em; font-size:1.3em; }
#item-masclip #main-vs h2 img { width:14em; }
#item-masclip #main-vs img[alt='package'] { left:-46vw; height:22em; }
#item-masclip #main-vs img[alt='image'] { bottom:0; right:-36vw; width:17em; }
#item-masclip #main-vs .point { right:4vw; font-size:1.1em; }
}

@media screen and (max-width:500px) {
#item-masclip #main-vs { height:32em; }
#item-masclip #main-vs h2 { font-size:1em; }
#item-masclip #main-vs img[alt='package'] { left:-50vw; height:20em; }
#item-masclip #main-vs img[alt='image'] { right:-42vw; width:15em; }
}

@media screen and (max-width:400px) {
#item-masclip #main-vs h2 span { padding:.5em .4em .4em; font-size:1.16em; }
}

@media screen and (max-width:370px) {
#item-masclip #main-vs { width:calc(100% - 1em); }
#item-masclip #main-vs img[alt='package'] { height:18em; }
#item-masclip #main-vs img[alt='image'] { width:13em; }
#item-masclip #main-vs .point { font-size:1em; }
}



/*==============================
	title
==============================*/
#item-masclip h1 { padding:.6em; text-align:center; font-size:1.6em; color:#fff; background:rgba(107,70,27,.5); }


@media screen and (max-width:1024px) {
#item-masclip h1 { font-size:1.4em; }
}

@media screen and (max-width:768px) {
#item-masclip h1 { font-size:1.2em; }
}

@media screen and (min-width:426px) {
#item-masclip h1 { letter-spacing:.1em; }
}



/*==============================
	main new
==============================*/
#item-masclip #main-vs-new { position:relative; max-width:2000px; margin:auto; }

#item-masclip #main-vs-new h2 { text-align:center; font-size:1.8em; line-height:1.6em; }
#item-masclip #main-vs-new h2 > * { display:block; }
#item-masclip #main-vs-new h2 .catch { font-size:1.1em; }
#item-masclip #main-vs-new h2 b { display:block; }
#item-masclip #main-vs-new h2 img { width:20em; margin:.6em auto 0; }
#item-masclip #main-vs-new h2 .name { letter-spacing:.1em; }

#item-masclip #main-vs-new picture { display:block; width:100%; aspect-ratio:10/7; }
#item-masclip #main-vs-new img { display:block; width:100%; }

#item-masclip #main-vs-new .point { display:flex; width:100%; text-align:center; font-size:1.6em; color:#fff; }
#item-masclip #main-vs-new .point li { width:calc(100%/3); padding:1em 0; }
#item-masclip #main-vs-new .point li:nth-of-type(1) { background:rgba(var(--masclip01-rgb),.8); }
#item-masclip #main-vs-new .point li:nth-of-type(2) { background:rgba(var(--masclip02-rgb),.8); }
#item-masclip #main-vs-new .point li:nth-of-type(3) { background:rgba(var(--masclip03-rgb),.8); }


@media screen and (max-width:1440px) {
#item-masclip #main-vs-new h2 { font-size:1.6em; }
#item-masclip #main-vs-new h2 img { width:16em; }
}

@media screen and (max-width:1024px) {
#item-masclip #main-vs-new h2 { font-size:2.4vw; }
#item-masclip #main-vs-new .point { font-size:1.4em; }
}

@media screen and (min-width:769px) {
#item-masclip #main-vs-new { display:flex; flex-wrap:wrap; align-items:center; }
#item-masclip #main-vs-new h2 { width:50%; }
#item-masclip #main-vs-new h2 b { margin-top:.1em; font-size:1.3em; }
#item-masclip #main-vs-new picture { width:50%; }
}

@media screen and (max-width:768px) {
#item-masclip #main-vs-new h2 { position:relative; margin:2em auto 0; padding-bottom:1.6em; font-size:1.4em; background:url(/item/masclip/img/bg.jpg) center / 100% repeat; }
#item-masclip #main-vs-new h2 img { width:15em; margin:.2em auto -.8em; }
#item-masclip #main-vs-new picture { margin-top:-4em; }
#item-masclip #main-vs-new .point { font-size:1.2em; }
}

@media screen and (max-width:425px) {
#item-masclip #main-vs-new h2 { margin:1em auto; padding-bottom:.6em; font-size:1.2em; }
#item-masclip #main-vs-new .point li { padding:.8em 0; }
}



/*==============================
	movie
==============================*/
#item-masclip #movie { width:calc(100% - 4em); max-width:500px; margin:2em auto 0; }
#item-masclip #movie > * { display:block; width:100%; }



/*==============================
	desc
==============================*/
#item-masclip #desc { position:relative; width:calc(100% - 2em); max-width:1200px; padding-top:4em; }

#item-masclip #desc p:not(.box) { line-height:1.6em; }
#item-masclip #desc p b { margin-right:2px; padding:0 .2em; font-size:1.1em; font-weight:500; background:rgba(255,255,255,.4); }
#item-masclip #desc .box { position:absolute; left:.4em; bottom:.4em; }
#item-masclip #desc .box span { display:inline-block; margin:.2em; padding:.6em; font-size:1.1em; background:rgba(255,255,255,.9); }
#item-masclip #desc img { display:block; width:100%; }


@media screen and (min-width:1001px) {
#item-masclip #desc p:not(.box) { width:31em; padding:3em; font-size:1.06em; }
}

@media screen and (min-width:801px) and (max-width:1000px) {
#item-masclip #desc p:not(.box) { width:29em; padding:2em; }
}

@media screen and (min-width:801px) {
#item-masclip #desc { position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; }
#item-masclip #desc h3 { width:100%; }
#item-masclip #desc p:not(.box) {
 position:absolute;
 top:4em;
 bottom:0;
 right:0;
 height:fit-content;
 margin:auto;
 line-height:2em;
 background:rgba(255,255,255,.9);
 box-shadow:.2em .2em .6em rgba(0,0,0,.1);
}
#item-masclip #desc p b { background:rgba(var(--masclip-bg),.4); }
#item-masclip #desc img { width:60%; }
}

@media screen and (max-width:800px) {
#item-masclip #desc p br { display:none; }
#item-masclip #desc img { width:calc(100% - 1em); max-width:500px; margin:1em auto 0; }
#item-masclip #desc .box { left:0; right:0; bottom:.2em; width:calc(100% - 1em); max-width:500px; margin:auto; text-align:center; }
}

@media screen and (max-width:600px) {
#item-masclip #desc { width:calc(100% - 1em); }
#item-masclip #desc .box { font-size:1em; }
#item-masclip #desc .box span { padding:.4em .6em; }
}

@media screen and (min-width:401px) {
#item-masclip #desc h3 br { display:none; }
}



/*==============================
	lineup
==============================*/
#item-masclip #lineup { text-align:center; }

#item-masclip #lineup ul { display:flex; justify-content:center; }
#item-masclip #lineup li { width:calc(100%/3 - 1.2em); max-width:14em; }
#item-masclip #lineup li:nth-of-type(3n+2) { margin:0 1.8em; }
#item-masclip #lineup li a { position:relative; display:flex; flex-wrap:wrap; justify-content:center; }
#item-masclip #lineup li img { width:auto; height:6em; }
#item-masclip #lineup li p { width:100%; line-height:1.4em; }
#item-masclip #lineup li .name { margin-top:1em; }
#item-masclip #lineup li .price { margin-top:.6em; }
#item-masclip #lineup li .price.cost-free:before { content:'\9001\6599\7121\6599'; display:block; margin-bottom:.6em; padding:.1em; text-align:center; letter-spacing:.1em; border:1px solid; }
#item-masclip #lineup li .price b { font-size:1.4em; font-weight:500; }
#item-masclip #lineup li .price:after { content:'\7A0E\8FBC'; margin-left:2px; font-size:12px;  }


@media screen and (min-width:1001px) {
#item-masclip #lineup li { max-width:16em; }
#item-masclip #lineup li img { height:8em; }
}

@media screen and (min-width:801px) {
#item-masclip #lineup li .name br { display:none; }
}

@media screen and (max-width:800px) {
#item-masclip #lineup li:nth-of-type(n+2) { max-width:10em; }
#item-masclip #lineup li:nth-of-type(1) img { padding:.5em 0; }
}

@media screen and (max-width:600px) {
#item-masclip #lineup li { width:calc(100%/3 - .4em); }
#item-masclip #lineup li:nth-of-type(3n+2) { margin:0 .6em; }
#item-masclip #lineup li:nth-of-type(n+2) { max-width:8em; }
#item-masclip #lineup li img { height:5em; }
#item-masclip #lineup li:nth-of-type(1) img:nth-of-type(1) { position:relative; left:-.4em; }
#item-masclip #lineup li:nth-of-type(1) img:nth-of-type(2) { position:absolute; right:4vw; }
}

@media screen and (max-width:500px) {
#item-masclip #lineup li:nth-of-type(1) img:nth-of-type(2) { right:0; }
#item-masclip #lineup li .price { font-size:.9em; }
}



/*==============================
	point
==============================*/
#item-masclip #point { max-width:1400px; }

#item-masclip #point ul { counter-reset:number 0; }
#item-masclip #point li { position:relative; }
#item-masclip #point li h4 { position:absolute; top:0; left:.8em; padding:1em 1.2em .8em; font-size:1.2em; line-height:1.4em; background:rgba(var(--masclip-bg-d),.86); }
#item-masclip #point li h4:before {
 position:absolute;
 top:-.3em;
 left:.4em;
 counter-increment:number 1;
 content:counter(number, decimal-leading-zero);
 display:block;
 text-align:center;
 font-family:var(--masclip-font);
 font-size:2em;
 font-weight:500;
 letter-spacing:.1em;
 color:var(--text);
}
#item-masclip #point li > picture,
#item-masclip #point li > img { display:block; width:100%; margin:1em auto; }
#item-masclip #point li picture img { width:100%; }
#item-masclip #point li > p { line-height:1.6em; }
#item-masclip #point li > p .info { display:block; margin-top:.4em; font-size:.9em; line-height:1.6em; }

#item-masclip #point .link-column { width:100%; margin:-.6em auto .6em; font-size:.96em; }
#item-masclip #point .link-column:before { background:url(/item/masclip/img/bg.jpg) center / cover; }


@media screen and (min-width:1201px) {
#item-masclip #point li h4 { padding:1.2em 1.4em 1em; }
}

@media screen and (min-width:801px) {
#item-masclip #point ul { display:flex; }
#item-masclip #point li { width:calc(100%/3 - .4em); }
#item-masclip #point li:nth-of-type(3n+2) { margin:0 .6em; }
}

@media screen and (max-width:800px) {
#item-masclip #point li:nth-of-type(n+2) { margin-top:2em; }
}

@media screen and (min-width:601px) and (max-width:800px) {
#item-masclip #point li { display:flex; flex-wrap:wrap; align-items:center; }
#item-masclip #point li h4 { top:.4em; }
#item-masclip #point li > picture,
#item-masclip #point li > img { width:44%; }
#item-masclip #point li > p { width:calc(56% - .6em); margin-left:.6em; }
}

@media screen and (max-width:600px) {
#item-masclip #point ul { margin-top:2em; }
#item-masclip #point li:nth-of-type(n+2) { margin-top:3em; }
#item-masclip #point li h4 { top:.2em; left:.2em; font-weight:500; }
#item-masclip #point li.ps img { width:auto; height:6em; margin:0 auto 1em 10.6em; }
}

@media screen and (max-width:370px) {
#item-masclip #point li.ps img { position:relative; top:.8em; height:4em; margin-bottom:2.2em; }
}



/*==============================
	variation
==============================*/
#item-masclip .variation { display:flex; flex-wrap:wrap; justify-content:center; width:100%; margin:auto; }
#item-masclip #color .variation { margin-bottom:4em; }
#item-masclip form .variation { margin-top:.8em; }
#item-masclip .variation li { width:7em; }
#item-masclip .variation li:nth-of-type(n+2) { margin-left:1.6em; }
#item-masclip .variation img { display:block; width:100%; margin-bottom:.6em; }
#item-masclip .variation p { text-align:center; font-size:.96em; font-weight:600; line-height:1em; }


@media screen and (max-width:800px) {
#item-masclip .variation li { width:6em; }
#item-masclip .variation li:nth-of-type(n+2) { margin-left:1em; }
}

@media screen and (max-width:400px) {
#item-masclip #color .variation { margin-bottom:3em; }
#item-masclip .variation li { width:5em; }
#item-masclip .variation p { font-weight:500; }
}



/*==============================
	color
==============================*/
#item-masclip #color h3 { margin-bottom:.6em; }
#item-masclip #color h3 span { display:block; }
#item-masclip #color h3 span:before { content:'\FF0B'; display:block; font-size:2em; font-weight:300;transform:rotate(45deg); }
#item-masclip #color .box { position:relative; max-width:800px; margin:auto; }
#item-masclip #color .box:nth-of-type(n+2) { margin-top:2em; }
#item-masclip #color .box h4 {
 position:absolute;
 bottom:-.4em;
 left:1em;
 height:calc(100% - 2.6em);
 padding:4em 1em;
 text-align:center;
 background:rgba(255,255,255,.8);
 box-shadow:2px 2px 6px rgba(0,0,0,.1);
 border-radius:.2em;
 z-index:10;
}
#item-masclip #color .box h4 > * { display:block; }
#item-masclip #color .box h4 b { font-size:1.6em; font-weight:500; letter-spacing:.1em; }
#item-masclip #color .box h4 span { margin-top:.8em; }

#item-masclip #color .swiper-button-next,
#item-masclip #color .swiper-button-prev { top:3em; }

#item-masclip #color .swiper-container { padding-top:3.4em; text-align:center; }
#item-masclip #color .swiper-pagination-bullets { top:0; height:2.2em; }
#item-masclip #color .swiper-pagination-bullets span {
 width:6em;
 height:auto;
 padding:.6em 0;
 text-shadow:var(--masclip-ts2);
 background:none;
 border-bottom:1px solid;
 border-radius:0;
 opacity:1;
}
#item-masclip #color .swiper-pagination-bullets span[class*='active'] { border:1px solid;	border-radius:.2em; }
#item-masclip #color .swiper-pagination-bullets span:before { display:block; }
#item-masclip #color .swiper-pagination-bullets span:nth-of-type(1):before { content:'\30CE\30FC\30DE\30EB'; }
#item-masclip #color .swiper-pagination-bullets span:nth-of-type(2):before { content:'\30E9\30A4\30F3'; }


@media screen and (min-width:1401px) {
#item-masclip #color { display:flex; flex-wrap:wrap; }
#item-masclip #color h3 { width:100%; }
#item-masclip #color .box { width:calc(100%/3 - .2em); }
#item-masclip #color .box:nth-of-type(n+2) { margin-top:0; }
#item-masclip #color .box:nth-of-type(3n+2) { margin:0 .3em; }
}

@media screen and (max-width:1400px) {
#item-masclip #color .box { max-width:700px; }
#item-masclip #color .box h4 { padding:12vw 2em; }
}

@media screen and (min-width:1001px) and (max-width:1400px) {
#item-masclip #color .box h4 { height:calc(100% - 2.6em); font-size:.9em; }
}

@media screen and (max-width:500px) {
#item-masclip #color .box h4 { padding:18vw 1em; }
}



/*==============================
	aroma
==============================*/
#item-masclip #aroma { max-width:1600px; }

#item-masclip #aroma ul { padding-bottom:2em; text-align:center; }
#item-masclip #aroma li { position:relative; padding:2em 0; background:url(/item/masclip/img/aroma-bg.png) center / contain no-repeat; border-radius:1em; }
#item-masclip #aroma li:nth-of-type(1) { background-image:url(/item/masclip/img/aroma1-bg.png); }
#item-masclip #aroma li:nth-of-type(2) { background-image:url(/item/masclip/img/aroma2-bg.png); }
#item-masclip #aroma li:nth-of-type(3) { background-image:url(/item/masclip/img/aroma3-bg.png); }
#item-masclip #aroma li:nth-of-type(4) { background-image:url(/item/masclip/img/aroma4-bg.png); }
#item-masclip #aroma li:nth-of-type(5) { background-image:url(/item/masclip/img/aroma5-bg.png); }
#item-masclip #aroma li > * { position:relative; }
#item-masclip #aroma li img { display:block; width:6em; margin:0 auto 1em; }
#item-masclip #aroma li h4 { margin-bottom:.6em; text-align:center; line-height:1.6em; }
#item-masclip #aroma li h4 > * { display:block; }
#item-masclip #aroma li h4 b { font-size:1.3em; letter-spacing:.1em; }
#item-masclip #aroma li h5 { margin:1.4em auto .4em; font-size:.9em; }
#item-masclip #aroma li h5 + p { font-size:.9em; line-height:1.4em; }
#item-masclip #aroma li h5 + p span { display:inline-block; }
#item-masclip #aroma li h5 + p span:not(:last-of-type):after { content:'\3001'; }

#item-masclip #aroma [class*='button'][class*='disabled'] { opacity:0; }
#item-masclip #aroma .swiper-pagination { bottom:0; }

#item-masclip #aroma img[alt='chart'] { display:block; width:100%; max-width:700px; margin:auto; }


@media screen and (min-width:1301px) {
#item-masclip #aroma .swiper-pagination { display:none; }
}

@media screen and (min-width:1001px) {
#item-masclip #aroma ul { font-size:1.1em; }
}



/*==============================
	scene
==============================*/
#item-masclip #scene { width:calc(100% - 2em); max-width:1200px; }
#item-masclip #scene > img { display:block; width:100%; }
#item-masclip #scene > p { line-height:1.6em; }

#item-masclip #scene > [class*='swiper'] { margin:2em auto 0; }


@media screen and (min-width:1001px) {
#item-masclip #scene > p { width:31em; padding:3em; font-size:1.06em; }
}

@media screen and (min-width:801px) and (max-width:1000px) {
#item-masclip #scene > p { width:29em; padding:2em; }
}

@media screen and (min-width:801px) {
#item-masclip #scene { position:relative; display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:center; }
#item-masclip #scene h3 { width:100%; }
#item-masclip #scene > img { width:60%; }
#item-masclip #scene > p { position:absolute; top:10em; bottom:0; right:0; height:fit-content; line-height:2em; background:rgba(255,255,255,.9); box-shadow:.2em .2em .6em rgba(0,0,0,.1); }
}

@media screen and (max-width:800px) {
#item-masclip #scene > img { width:calc(100% - 1em); margin:0 auto 1em; }
#item-masclip #scene > [class*='swiper'] { width:calc(100% - 1em); }
}

@media screen and (max-width:600px) {
#item-masclip #scene { width:calc(100% - 1em); }
}



/*==============================
	Use
==============================*/
#item-masclip #use { max-width:50em; margin:auto; }
#item-masclip #use > img { display:block; max-width:12em; }
#item-masclip #use ol { counter-reset:number 0; margin:2em auto 0; list-style:none; }
#item-masclip #use li { line-height:1.6em; }
#item-masclip #use li:nth-of-type(n+2) { margin-top:.8em; }
#item-masclip #use li:before { counter-increment:number 1; content:counter(number) '.'; margin-right:.2em; font-family:var(--masclip-font); font-size:2em; }
#item-masclip #use .info { margin-top:.2em; font-size:.9em; line-height:1.4em; }
#item-masclip #use .info:first-of-type { margin-top:.4em; }

#item-masclip #use .youtube { max-width:400px; height:auto; max-height:none; margin:auto; }
#item-masclip #use .youtube img:hover { opacity:.8; }
#item-masclip #use .youtube iframe { width:100%; }


@media screen and (min-width:1001px) {
#item-masclip #use > img { width:calc(40% - 5em); margin:0 1em 0 4em; }
}

@media screen and (min-width:601px) {
#item-masclip #use { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; }
#item-masclip #use > *:not(img):not(.youtube) { width:100%; }
#item-masclip #use > img { width:calc(40% - 3em); margin:0 1em 0 2em; }
#item-masclip #use .youtube { width:60%; max-height:240px; margin:0; }
#item-masclip #use .youtube iframe { height:240px; }
}

@media screen and (max-width:600px) {
#item-masclip #use > img { margin:1em auto 0; }
#item-masclip #use .youtube { width:100%; }
}



/*==============================
	voice
==============================*/
#item-masclip #voice .box { width:calc(100% - 1em); max-width:600px; margin:auto; padding:3em 4em; background:url(/item/masclip/img/bg.jpg) center / 100% repeat; }
#item-masclip #voice .box p { line-height:1.6em; }
#item-masclip #voice .box p[align='right'] { margin-top:.2em; font-size:.9em; }
#item-masclip #voice .box p b { padding:0 .2em; font-weight:500; background:rgba(255,255,255,.6); }
#item-masclip #voice .box img {
 display:block;
 width:calc(100% - 2em);
 max-width:16em;
 margin:1em auto;
 pointer-events:none;
 -webkit-touch-callout:none;
 -webkit-user-select:none;
 -moz-touch-callout:none;
 -moz-user-select:none;
 touch-callout:none;
 user-select:none;
 }

#item-masclip #voice .box .info { margin-top:1em; font-size:.9em; line-height:1.6em; }

#item-masclip #voice .box ul { margin-top:1.2em; }
#item-masclip #voice .box li:nth-of-type(n+2) { margin-top:1em; padding-top:1em; border-top:1px dashed; }


@media screen and (max-width:600px) {
#item-masclip #voice .box { padding:3em 2em; }
}

@media screen and (min-width:401px) {
#item-masclip #voice .box ul { margin-top:2em; }
}

@media screen and (max-width:400px) {
#item-masclip #voice .box { padding:3em 1em; }
}



/*==============================
	ps-mark
==============================*/
#item-masclip #ps-mark { width:calc(100% - 2em); max-width:860px; margin:2em auto 0!important; padding:2em; border:1em solid rgba(var(--masclip-bg),.8); }
#item-masclip #ps-mark img { display:block; width:240px; margin:auto; }
#item-masclip #ps-mark p { width:calc(100% - 240px - 1em); text-align:left; line-height:1.6em; }
#item-masclip #ps-mark p b:nth-of-type(1) { color:#22ac38; }
#item-masclip #ps-mark p b:nth-of-type(2) { color:#2ea7e0; }


@media screen and (max-width:800px) {
#item-masclip #ps-mark img { width:180px; }
#item-masclip #ps-mark p { width:calc(100% - 180px - 1em); }
}

@media screen and (min-width:601px) {
#item-masclip #ps-mark { display:flex; justify-content:center; align-items:center; }
#item-masclip #ps-mark p { margin-left:1em; }
}

@media screen and (max-width:600px) {
#item-masclip #ps-mark { padding:1em; border-width:.6em; }
#item-masclip #ps-mark p { width:100%; margin-top:.6em; }
}

@media screen and (max-width:400px) {
#item-masclip #ps-mark img { width:140px; }
}



/*==============================
	pdt-spec
==============================*/
#item-masclip #pdt-spec h3  { margin-bottom:1em; }
#item-masclip #pdt-spec .inline { width:calc(100% - 1em); max-width:500px; margin:auto; }
#item-masclip #pdt-spec h4 { position:relative; padding:1em .6em; text-align:center; background:rgba(255,255,255,.8); cursor:pointer; }
#item-masclip #pdt-spec h4:nth-of-type(n+2) { margin-top:.4em; }
#item-masclip #pdt-spec h4:before,
#item-masclip #pdt-spec h4:after { content:'';	position:absolute;	top:calc(50% - 1px); right:1em;	width:1.2em;	border-bottom:1px solid; transition:.6s; }
#item-masclip #pdt-spec h4:after {	transform:rotate(90deg); }
#item-masclip #pdt-spec h4.open:before { transform:rotate(-45deg); }
#item-masclip #pdt-spec h4.open:after { transform:rotate(45deg); }
#item-masclip #pdt-spec h4 + *,
#item-masclip #pdt-spec dt:nth-of-type(n+2) { margin-top:.6em; }
#item-masclip #pdt-spec h4.open + * { margin-bottom:1em; }
#item-masclip #pdt-spec h4:not(.open) + * { display:none; }
#item-masclip #pdt-spec dt { margin-bottom:.2em; font-weight:600; }
#item-masclip #pdt-spec dd,
#item-masclip #pdt-spec li { line-height:1.4em; }
#item-masclip #pdt-spec dd:nth-of-type(n+2),
#item-masclip #pdt-spec li:nth-of-type(n+2) { margin-top:.2em; }
#item-masclip #pdt-spec .list li:before { content:'\30FB'; }
#item-masclip #pdt-spec a { color:var(--link); text-decoration:underline; }



/*==============================
	LP
==============================*/
/*thanks*/
#lp-masclip main.thanks { padding:2em 0; background:url(/item/masclip/img/bg.jpg) center / 100% repeat; }
#lp-masclip main.thanks #orderForm .complete { background:#fff; }


@media screen and (max-width:400px) {
#lp-masclip main.thanks { padding:1em 0; }
}



/*==============================
	ショップサーブ用　item page
==============================*/
#main-column > #itemDetail-wrap { max-width:none!important; }
#itemDetail-cont { max-width:1000px; }