@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap');
@import url('https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c');


/* Reset-----------------------------------------------------------*/

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, address, big, code, em, font, img,  small, strong,
ol, ul, li, form, label, table,  tr, th, td, dl, dd, dt,
article, aside, footer, header, menu, nav, section, summary, textarea,main,
figure,figcaption
{margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}
i{font-style:normal;}
.clx:after {clear: both;content: ' ';display: block;font-size: 0;line-height: 0;visibility: hidden;width: 0;height: 0;}
.clx { display: block; }
* html .clx { height: 1%; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
html {-webkit-text-size-adjust:none;-webkit-touch-callout: none;}
a {outline:none;text-decoration:none;}
iframe {border:none;}
ul, ol { list-style: none;}
img { border: none; vertical-align:bottom;max-width: 100%;height: auto;width /***/:auto;}
:focus { outline: 0;}
table { border-collapse: collapse;border-spacing:0;font-size:inherit;font:100%;}
h1, h2, h3, h4, h5, h6 {line-height:1.4;}
html {height: 100%;font-size: 62.5%;}
body {
font: 10px  "M PLUS Rounded 1c","Meiryo","Hiragino Kaku Gothic Pro",sans-serif;
font-weight: 600;
*font-size: small;
*font: x-small;
color:#462400;
letter-spacing: 0.05em;
background:url(../img/bg.png) repeat #fef9eb;
height: 100%;
}

/* common -----------------------------------------------------------*/
body {overflow-x: hidden; position: relative;}
* {box-sizing:border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
.indent {display:block;font-size:x-small;line-height:0;overflow:hidden;text-indent:-9999px}
.flt_l { float:left; }
.flt_r { float:right; }
.clear { clear:both; }

.txt_al { text-align:left; }
.txt_ar { text-align:right; }
.txt_ac, .center{ text-align:center; }

a {color: #462400;}


/* icon-font, web-font 
-----------------------------------------------------------*/
@font-face {font-family: 'fontello';src: url('../font/fontello.eot?36873089');src: url('../font/fontello.eot?36873089#iefix') format('embedded-opentype'),url('../font/fontello.woff2?36873089') format('woff2'),url('../font/fontello.woff?36873089') format('woff'),url('../font/fontello.ttf?36873089') format('truetype'),url('../font/fontello.svg?36873089#fontello') format('svg');font-weight: normal;font-style: normal;}

[class^="icon-"]:before, [class*=" icon-"]:before{font-family: "fontello";font-style: normal;font-weight: normal;speak: none;display: inline-block;text-decoration: inherit;width: 1em;margin-right: .2em;text-align: center;font-variant: normal;text-transform: none;line-height: 1em;margin-left: .2em;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}

.icon-mail:before { content: '\e800'; }
.icon-down-open-mini:before { content: '\e807'; }
.icon-left-open-mini:before { content: '\e808'; }
.icon-right-open-mini:before { content: '\e809'; }
.icon-up-open-mini:before { content: '\e80a'; }
.icon-down-open-big:before { content: '\e80b'; }
.icon-left-open-big:before { content: '\e80c'; }
.icon-right-open-big:before { content: '\e80d'; }
.icon-up-open-big:before { content: '\e80e'; }
.icon-ok-1:before { content: '\e811'; }
.icon-basket:before { content: '\e812'; }
.icon-twitter:before { content: '\f099'; }
.icon-facebook:before { content: '\f09a'; }
.icon-instagram:before { content: '\f16d'; }
.icon-tumblr:before { content: '\f173'; }
.icon-pinterest:before { content: '\f231'; }
.icon-shopping-basket:before { content: '\f291'; }

h2,#header nav li, #copy, #footer .icon span, .arrow span, .wf {
	font-family: 'Tilt Neon', sans-serif;
	font-weight:normal;
}


/* inner -------------------------------------*/
.inner{ width:1000px; margin:0 auto; position:relative;}
.pc{}
.sp{ display:none;}


/* header -------------------------------------*/
#header { position:fixed; width:100%; height:7rem; z-index:100;}

#header h1{ padding:1.1rem 0 0; position:absolute; left:0; top:-10rem; width:100%;transition: .5s;}
#header h1 a{width:80px;height:77px; display:block; margin:0 auto;}
#header h1 a{background:url(../img/logo.png)left top no-repeat;	background-size:80px 77px;}
#header h1.show{ top:0;}


#menu_btn{width:30px;height:30px; position:relative; position:absolute; right:2.5rem; top:2rem; z-index:9999; cursor:pointer;}
#menu_btn:after{ content:"MENU"; position:absolute; left:0; bottom:-2rem; font-size:1.1rem; color:#fff; width:30px;font-family: 'Hammersmith One', sans-serif;}
#menu_btn.close:after{ content:"CLOSE"; color:#462400;}
#menu_btn_icon{ display: block; position: absolute; top: 50%; left: 50%; width: 30px; height: 2px; margin: 0 0 0 -15px; background: #fff; opacity: 1; transition: .2s;}
#menu_btn_icon:before, #menu_btn_icon:after{ display: block; content: ""; position: absolute; left: 0; width: 30px; height: 2px; transition: .3s; top: 50%; background: #fff;}
#menu_btn_icon:before{margin-top: -12px;}
#menu_btn_icon:after{ margin-top: 11px;}

#menu_btn .close{background: transparent;}
#menu_btn .close:before, #menu_btn .close:after{ margin-top: 0;width: 35px; background:#462400;}
#menu_btn .close:before{ -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
#menu_btn .close:after{ transform: rotate(-135deg); -webkit-transform: rotate(-135deg);}

#nav {display: none; position:relative; position: fixed; background:url(../img/bg.png) repeat #fef9eb; top: 0; left: 0;  width: 100%; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; z-index:8888; overflow:hidden;}
@keyframes spin {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
#nav:before{ animation: spin 40s linear infinite; position:absolute; width:100vw; height:100vh; content:""; background:url(../img/mark.png) no-repeat; background-size:contain; bottom:-20%; left:-20%;}
#nav .wrap{ display:table; width: 100%; height: 100%;}
#nav ul{ width:40%; text-align:right; display:table-cell; vertical-align:middle;}
@keyframes fadeInDown {
0% {opacity:0;transform:translate3d(150%, 0, 0);}
to {opacity:1;transform:none;}
}
#nav li{display:block;animation-name:fadeInDown; animation-duration:0.5s; animation-fill-mode:both;}
#nav li:nth-of-type(1){animation-delay: 0s;}
#nav li:nth-of-type(2){animation-delay: 0.05s;}
#nav li:nth-of-type(3){animation-delay: 0.1s;}
#nav li:nth-of-type(4){animation-delay: 0.15s;}
#nav li:nth-of-type(5){animation-delay: 0.2s;}
#nav li:nth-of-type(6){animation-delay: 0.25s;}
#nav li:nth-of-type(7){animation-delay: 0.3s;}
#nav li:nth-of-type(8){animation-delay: 0.35s;}
#nav li:nth-of-type(9){animation-delay: 0.4s;}
#nav li:nth-of-type(10){animation-delay: 0.45s;}
#nav li a{display:inline-block;padding:1.4vh 5vw; font-size:3.5vh; line-height:1.2; transition: .5s;}
#nav li a:hover{ color:#a06629;}
#nav li span{ display:block; font-size:1.5vh;}
	
/* footer -------------------------------------*/
#footer { text-align: center; overflow:hidden; background:#241302; color:#FFF; font-size:1.5rem; position:relative; z-index:40;}
#footer a{color:#FFF;}
#footer p{ padding:0;}
#footer .inner{ padding:4rem 0; display:table;}
#footer .icon{ display:table-cell; vertical-align:middle; text-align:left;}
#footer .icon a{ margin:0 1rem 0 0; background:#3c2208; padding:0.6rem 0.7rem; line-height:1; border-radius: 5rem;-webkit-border-radius: 5rem;-moz-border-radius: 5rem;transition: .5s;}
#footer .icon i{ font-size:1.6rem;}
#footer .icon i.icon-facebook{ font-size:1.5rem;}
#footer .icon a:hover { background:#180c00;}
#footer .icon span{ font-size:1.8rem; font-weight:normal; padding:0 1.5rem 0 0;}
#copy {font-size:1.1rem; display:table-cell; vertical-align:middle; text-align:right;}

/* btn_shop -------------------------------------*/
.btn_shop{ position:fixed; right:3rem; bottom:-8rem; z-index:22; text-align:center; vertical-align:middle;transition: .5s; padding:0; width:50rem;}
.btn_shop i{ padding:0 0.5rem 0 0; }
.btn_shop a{ font-size:2rem; font-weight:bold; display:block;border-radius: 4rem; padding:1.5rem 3rem; margin:0;transition: .5s;background:#fff;}
.btn_shop a:hover{ background:#fabd0b;padding:1.5rem 3rem; margin:0 3rem; color:#462400;}
.btn_shop.show{bottom:2.5rem;}

@media screen and (max-width:1050px) {
.inner{ width:94%;}
#nav li a{font-size:5vh;}
}

@media screen and (max-width:768px) {
.inner{ width:90%;}

/* header -------------------------------------*/
#header h1{ left:1.2rem; text-align:left;}
#header h1 a{width:60px;height:58px; display:block; margin:0;}
#header h1 a{ background:url(../img/logo.png)left top no-repeat; background-size:60px 58px;}

#menu_btn{ right:1.7rem; top:1.2rem;}

#nav li a{padding:1.4vh 7vw; font-size:3vh;}
#nav li span{ display:block; font-size:1.7vh;}
		

/* footer -------------------------------------*/
#footer .inner{ padding:2rem 0; display:block;}
#footer .icon{ display:block; text-align:center;padding:0 0 3rem;}
#footer .icon a{ margin:0 1rem; padding:1rem 1.2rem;}
#footer .icon a:hover { background:#3c2208;}
#footer .icon span{ display:block;  padding:0 0 1rem;}
#copy {display:block; text-align:center;}

/* btn_shop -------------------------------------*/
.btn_shop{ position:fixed; right:0; bottom:-8rem; z-index:22; text-align:center; vertical-align:middle;transition: .5s; padding:0 2rem; width:100%;}
.btn_shop a{ font-size:3vw; font-weight:bold; padding:1.5rem 0;}
.btn_shop a:hover{padding:1.5rem 0; margin:0;}
.btn_shop.show{bottom:1rem;}
}

@media screen and (max-width:420px) {
#nav li a{padding:1.4vh 7vw;}
#nav li span{ display:block; font-size:1.7vh;}

.btn_shop a{ font-size:4vw; font-weight:bold; padding:1.5rem 0;}
}


/* common -------------------------------------*/	
#main{text-align:center; font-size:1.5rem;}
#main h2{ margin:0 0 2.5rem; font-size:1.8rem; display:inline-block; padding:0 0 0.2rem; letter-spacing: 0.1rem;}
#main h3{font-size:3rem; margin:0 0 2rem; font-weight:bold;letter-spacing: 0.1rem;}
#main h4{font-size:2rem; margin:0 0 1rem; font-weight:bold;letter-spacing: 0.1rem;}
p{ padding:0 0 2rem; line-height:1.8;}


/* #home -------------------------------------*/
#home{width:100%;height: 100%;height: 100vh;position:relative; background:url(../img/bg01.jpg) center center no-repeat fixed; background-size:cover;}
#home .logo {position:absolute;	top:50%; margin:-200px 0 0;text-align:center; width:100%;}
#home .logo img{width:291px;}
		
#home .arrow {position: absolute;bottom:2rem;left:50%;margin:0 0 0 -3.3rem;line-height:1;}
#home .arrow a{padding:0; display:block; color:#fff; font-size:3rem;}
#home .arrow a span{ display:block; font-size:1.2rem; }

#home .mailmag { padding: 2.5rem; border-radius: 0.8rem; background:url(../img/bg.png) repeat #fef9eb; border: 1rem solid #cfc0b0; position: absolute; bottom:5rem; left:5rem; max-width: 30rem;}
#home .mailmag strong{ font-weight:bold; font-size: 1.2rem; padding: 0 0 2rem; display: block;}
#home .mailmag strong span{ display: block; font-size: 3rem;}
#home .mailmag p{ padding:0 0 1.5rem; line-height: 1.6; font-size: 1.3rem;}
#home .mailmag a{ background:url(../img/bg.png) repeat #febe00;  width: 100%; display: block; padding: 1.5rem; border-radius: 4rem; font-weight: bold; transition: .5s;}
#home .mailmag a:hover{ background:#fff;}

/* #info -------------------------------------*/
#info{width:100%; padding:2rem 2rem 2rem 9rem; text-align:left; position:relative; font-size:1.3rem; border:2rem solid #fff; background:url(../../topics/201902/assets/img/top.jpg) center right no-repeat #fff; background-size:65%; transition: .5s;}
#info:hover{ opacity:0.7;}
#info h3{ font-size:2.6rem;}
#info h3 small{ font-size:1.2rem;}
#info .date{font-size:2rem; font-weight:bold;}
#info .mark{ position:absolute; display:inline-block; line-height:1.2; font-weight:bold; padding:2.2rem 0 0; border-radius: 100%; text-align:center; width:7rem; height:7rem; background:#fabd0b; color:#fff; content:""; left:1.2rem; top:1rem;}

/* #beeeco -------------------------------------*/
#beeeco{display: block;}
#beeeco .bg{ display: block; background:url(../img/bg02.jpg) center center no-repeat fixed; background-size:cover; position:relative; z-index:1;}
#beeeco .txt{text-align:left;padding:6%; width:50%; background:url(../img/bg.png) repeat rgba(70,36,0,.7); color:#fff;}
	

/* #howto -------------------------------------*/
#howto{background:url(../img/bg.png) repeat #e7e266;}
#howto .inner{ padding:7% 0;}
#howto .use{ padding:2% 0 0;}
#howto .lead{ font-size:1.6rem;}
#howto .lead.mb{ padding:0 0 4rem;}
#howto .use .flt_r{width:44%;}
#howto .use .flt_l{width:53%; text-align:left;}
#howto .use .flt_l dl{ margin:0 0 3rem; display:block; padding:1.3rem 0.5rem 1.5rem; border-top:1px solid #cfca4b; border-bottom:1px solid #cfca4b; font-size:1.4rem;}
#howto .use .flt_l dl dt{ display:inline-block; width:13%; vertical-align:middle;}
#howto .use .flt_l dl dd{ display:inline-block; width:84%; font-weight:bold; vertical-align:middle;}
#howto .use .flt_l .box{ padding:2rem; background:rgba(120,115,10,0.1)}

#howto .use h5{font-size:1.5rem; padding:0 0 0.5rem;}
#howto .use .att li{ padding:0 0 0.2rem 1rem; display:block; text-indent:-0.8rem;font-size:1.2rem;}
#howto .use .att li:before{ content:"* ";}
	
#howto .image li{ float:left; width:20%;}
	
#howto .colume {background:url(../img/bg.png) repeat #ece76f;}
#howto .colume .col{ width:50%; padding:5%;}
#howto .colume .col p{ text-align:left; }
#howto .colume .flt_r{ background:url(../img/bg.png) repeat #e1db51; }
#howto .colume .flt_l{ background:url(../img/bg.png) repeat #ece76f; }


/* #story -------------------------------------*/
#story{background:url(../img/bg.png) repeat #febe00; padding:7% 0;}
#story dl{ display:table; padding:1rem 12% 2rem;}
#story dl dt{ display:table-cell; width:40%; vertical-align:top;}
#story dl dd{ display:table-cell; width:60%; padding:0 0 0 4rem; vertical-align:top;}
#story p{ text-align:left;}
#story p strong{ font-size:2rem;}
#story hr{ margin:1rem 0 3rem;border: 0;border-bottom: 1px dashed #febe00;background:url(../img/bg.png) repeat #cd9900;}

		
/* #stores -------------------------------------*/
#stores{background:url(../img/bg.png) repeat #462400; color:#FFF;  padding:7% 0 5%;}
#stores h3{ padding:0 0 4rem;}
#stores h4{ position:relative; display:inline-block; padding:0 0 1rem;}
#stores h4:before, #stores h4:after{ position:absolute; top:1.3rem; width:3rem; height:2px; display:block; content:""; background:#8b7156;}
#stores h4:before{ left:-5rem;}
#stores h4:after { right:-5rem;}
#stores .area_block{ padding:0 0 5rem;}
#stores dl{ display:table;width:100%; padding:1.5rem 2rem; }
#stores dl:nth-child(odd){ background:rgba(52,28,3,0.3)}
#stores dl dt a{ color:#FFF; font-weight:bold; border-bottom:1px dotted #8b7156;}
#stores dl dt,#stores dl dd{ display:table-cell; text-align:left;}
#stores dl dt{ width:28%;}
#stores dl dd{}
#stores p{ display:inline-block; padding:0; margin:0; float:right;}
#stores span{ padding:0 1rem 0 0;}


/* #faq -------------------------------------*/
#faq{background:url(../img/bg.png) repeat #fef9eb; padding:7% 0 8%;}

#faq h4{ position:relative; display:inline-block; padding:2rem 0 1rem;}
#faq h4:before, #faq h4:after{ position:absolute; top:3.3rem; width:3rem; height:2px; display:block; content:""; background:#8b7156;}
#faq h4:before{ left:-5rem;}
#faq h4:after { right:-5rem;}

#faq .acd { margin:0 0 1rem; text-align:left; font-size:1.5rem; background:#fff; border-radius: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px;transition: .5s;}

#faq .acd dt p:first-child, #faq .acd dd p:first-child{ position:relative;}
#faq .acd dt p:last-child, #faq .acd dd p:last-child{ padding:0;}

#faq .acd dt{ font-weight:bold; position:relative; cursor:pointer; padding:2rem 4rem 2rem 5.5rem;}
#faq .acd dt:after{ position:absolute; content:""; right:2.5rem; top:35%; width:11px; height:11px; border-top: 3px solid #462400;border-right: 3px solid #462400;-webkit-transform: rotate(135deg);transform: rotate(135deg);}
#faq .acd dt.open:after{ top:40%; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}

#faq .acd dt p:first-child:before{ position:absolute; left:-3.5rem; top:-0.5rem; content:"Q ."; font-family: 'Hammersmith One', sans-serif; font-size:2rem; padding:0 0.8rem 0 0; color:#febe00;}
#faq .acd dt.open p:before{color:#fff0c4;}

#faq .acd dd{ display:none; background:#fff; border-radius: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px; margin:0 2rem; padding:2rem 4rem 2rem 6rem;}
#faq .acd dd p:first-child:before{ position:absolute; left:-3rem; top:-0.3rem; content:"A ."; font-family: 'Hammersmith One', sans-serif; font-size:2rem; padding:0 0.8rem 0 0; color:#febe00;}
#faq .acd dd p a{font-weight:bold; border-bottom:1px dotted #8b7156;}
#faq .acd.open{ background:#febe00; padding:0 0 2rem;}
		
/* #shop -------------------------------------*/
#shop{ background:url(../img/bg03.jpg) center center no-repeat; background-size:cover; color:#FFF;position:relative; z-index:40;}
#shop a{padding:5% 0;display:block;background:rgba(65,33,0,0);transition: .5s;}
#shop h2{ font-size:3rem;display:inline-block;border-radius: 4rem;-webkit-border-radius: 4rem;-moz-border-radius: 4rem; padding:1rem 10rem; margin:0;transition: .5s;background:#fff;}
#shop a:hover{background:rgba(65,33,0,0.4);}
#shop a:hover h2{ background:#fabd0b;padding:1rem 7rem; color:#462400;}

/* #lineup -------------------------------------*/
#lineup{ padding:7% 0; display: block;}
#lineup .column{ display:flex; flex-wrap: wrap; margin: 0 auto; width: 80%; max-width: 150rem; justify-content: center; padding: 3rem 0 0;}
#lineup .column .row{ width: 25%; padding: 0 1rem 5rem;}
#lineup .column .row dt img{ border-radius: 1rem; margin: 0 0 2rem;}
#lineup .column .row dd h4{ margin:0 0 1.5rem;}
#lineup .column .row dd a{ display:inline-block; margin: 0 0.5rem; border-radius: 4rem; padding: 0.7rem 2.5rem; background: rgba(70,36,0,0.1);transition: .3s;}
#lineup .column .row dd a:hover{ background:#fff;}

/* #series -------------------------------------*/
#series{ padding:7rem 0; display: block;}
#series .inner{ padding: 0 3rem;}
#series h2{ font-size:1.4rem; margin: 0 0 3rem; font-weight: bold; opacity: 0.8;}
#series h1{ font-size:4rem; margin: 0 0 3rem; font-weight: bold;}
#series .main_image{margin: 0 0 3rem;}
#series .text{ margin: 0 0 3rem; text-align: left;}
#series .text p{ margin:0; padding: 0 0 1rem; line-height: 1.6;}
#series .artist_info{ margin:0 0 3rem; padding: 2rem 0 ; border-top: 1px solid rgba(65,33,0,0.2); border-bottom: 1px solid rgba(65,33,0,0.2); text-align: left;}
#series .item_info{ background:rgba(65,33,0,0.1); border-radius: 0.5rem; margin: 0 0 5rem; padding: 3rem; }
#series .item_info dl{ display:flex; flex-wrap: wrap; width: 100%;}
#series .item_info dl dt{ width:30%; padding: 0 3rem 0 0;}
#series .item_info dl dd{ width:70%;text-align: left;}
#series .item_info dl dd p{ font-size:1.8rem; padding: 0 0 1.2rem;}
#series .item_info dl dd ul {padding:0 0 0 2rem; font-size:1.4rem;}
#series .item_info dl dd ul li{ list-style:disc; margin: 0 0 1rem;}
#series .item_image ol li{ margin:0 0 5rem;}

@media screen and (max-width:1180px) {
/* #story -------------------------------------*/
#story dl{ display:table; padding:1rem 5% 2rem;}
}

@media screen and (max-width:768px) {
.pc{ display:none;}
.sp{ display:inline;}

/* common -------------------------------------*/		
body{background:none; }

body:before {
  background:url("../img/bg_sp.jpg") no-repeat center center;  background-size: cover;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  z-index: -1;
}

#main { overflow-x: hidden;}

#main h2{ margin:0 0 1rem; font-size:2.5vw;}
#main h3{font-size:4vw; margin:0 0 2rem;}
#main h4{font-size:2.8vw; margin:0 0 1rem;}
p{ padding:0 0 2.5vh;}
 
 
/* #home -------------------------------------*/
#home{background:url("../img/bg01_sp.jpg") no-repeat left top;  background-size: cover;}
#home .logo {position:absolute;	top:24%; margin:0;text-align:center; width:100%;}
#home .logo img{width:50%; max-width:24rem ;}

#home .arrow {bottom:11vh; display: none;}

#home .mailmag { padding: 2.5rem; border-radius: 0.8rem; background:url(../img/bg.png) repeat #fef9eb; position: absolute; bottom:5rem; left:5rem; max-width: none; width: calc(100% - 10rem);}

/* #info -------------------------------------*/
#info{width:100%; padding:30vh 2rem 2rem; text-align:left; position:relative; font-size:1.2rem; border:1rem solid #fff; background:url(../../topics/201902/assets/img/top.jpg) top center no-repeat #fff; background-size:100%; transition: .5s;}
#info:hover{ opacity:1;}
#info h3{ font-size:2rem; padding:0 0 1rem;}
#info h3 small{ font-size:1.2rem;}
#info h3 span{ display:inline; background:#fff;}
#info .date{font-size:1.8rem; line-height:1.7; font-weight:bold;}
#info .mark{ position:absolute; display:inline-block; line-height:1.2; font-weight:bold; padding:1.7rem 0 0; border-radius: 100%; text-align:center; width:6rem; height:6rem; background:#fabd0b; color:#fff; content:""; left:auto; right:1rem; top:-2rem;}

/* #beeeco -------------------------------------*/
#beeeco{display: block;background:url(../img/bg02_sp.jpg) right top no-repeat; background-size:cover;}
#beeeco .bg{ background:none;}
#beeeco .txt{padding:13% 5%; width:100%; font-size: 1.3rem;}
#beeeco .txt h2, #beeeco .txt h3{ text-align:center !important; width:100%;}
#beeeco .txt h3{ margin: 0 0 2rem;}
	
/* #howto -------------------------------------*/
#howto .inner{padding:13% 0;}
#howto .inner p{ text-align:left; font-size: 1.3rem; line-height: 1.6;}
#howto .use .flt_r{width:100%; float:none;}
#howto .use .flt_l{width:100%; float:none;}

#howto .use .flt_l dl dt{ width:22%;}
#howto .use .flt_l dl dd{ width:75%;}
	
#howto .image li{width:33.33333%;}
#howto .image li:nth-child(1), #howto .image li:nth-child(2){width:50%;}

#howto .colume .col{width:100%;padding:8% 5%; font-size: 1.3rem; line-height: 1.6;}
#howto .colume .flt_r{float:none;}
#howto .colume .flt_l{float:none;}

/* #story -------------------------------------*/
#story{padding:13% 0;}
#story dl{ display:block; padding:1rem 5% 2rem;}
#story dl dt{ display:block; width:100%; padding:0 15%; vertical-align:top;}
#story dl dd{  display:block; width:100%;padding:2rem 0 0 0; vertical-align:top;}
#story p{ text-align:left;}
#story p strong{ font-size:3vw;}


/* #stores -------------------------------------*/
#stores{padding:13% 0;}
#stores .inner{ width:100%;}
#stores h3{ padding:0 0 2rem;}
#stores dl{ display:block;padding: 1.6rem 5%;}
#stores dl dt,#stores dl dd{ display:block; text-align:left;}
#stores dl dt{ width:100%; padding:0 0 0.7rem; font-size:1.7rem;}
#stores dl dd{ font-size:1.2rem;}
#stores dl dd a{ color:#FFF; }
#stores p{ display:block; font-size:1.4rem; float:none;}
#stores span{ padding:0 0.8rem 0 0; }

/* #shop -------------------------------------*/
#shop a{padding:10% 0;}
#shop h2{ font-size:2rem; padding:1rem 7rem;}
#shop a:hover{background:none;}

/* #lineup -------------------------------------*/
#lineup{ padding:13% 0 10%; display: block; background:url(../img/bg.png) repeat #fef9eb;}
#lineup .column{ display:flex; flex-wrap: wrap; margin: 0 auto; width: 100%; justify-content: center; padding: 2rem 1rem 0;}
#lineup .column .row{ width: 50%; padding: 0 1rem 3rem;}
#lineup .column .row dt img{ border-radius: 1rem; margin: 0 0 1rem;}
#lineup .column .row dd h4{ margin:0 0 1.5rem; font-size: 1.3rem;}
#lineup .column .row dd a{ display:inline-block; margin: 0 0.2rem; font-size: 1.1rem; border-radius: 4rem; padding: 0.5rem 1.5rem; background: rgba(70,36,0,0.1);transition: .3s;}
#lineup .column .row dd a:hover{ background:#fff;}

/* #faq -------------------------------------*/
#faq{padding:13% 0;}

/* #series -------------------------------------*/
#series{ padding:7rem 0 3rem; display: block;}
#series .inner{ padding: 0 ;}
#series h2{ font-size:1.2rem !important; margin: 0 0 1rem !important; font-weight: bold; opacity: 0.8;}
#series h1{ font-size:3rem; line-height: 1.1; margin: 0 0 3rem; font-weight: bold;}
#series .main_image{margin: 0 0 3rem;}
#series .text{ margin: 0 0 3rem; text-align: left;}
#series .text p{ margin:0; padding: 0 0 1rem; line-height: 1.6;}
#series .artist_info{ margin:0 0 3rem; padding: 2rem 1rem ; border-top: 1px solid rgba(65,33,0,0.2); border-bottom: 1px solid rgba(65,33,0,0.2); text-align: left; font-size:1.4rem; }
#series .item_info{ background:rgba(65,33,0,0.1); border-radius: 0.5rem; margin: 0 0 5rem; padding: 2rem; }
#series .item_info dl{ display:block; width: 100%;}
#series .item_info dl dt{ width:100%; padding: 0 0 2rem;}
#series .item_info dl dd{ width:100%;text-align: left;}
#series .item_info dl dd p{ font-size:1.8rem; padding: 0 0 1.2rem;}
#series .item_info dl dd ul {padding:0 0 0 2rem; font-size:1.4rem;}
#series .item_info dl dd ul li{ list-style:disc; margin: 0 0 1rem;}
#series .item_image ol li{ margin:0 0 2rem;}

}

@media screen and (max-width:420px) {
/* common -------------------------------------*/	
#main h2{ margin:0 0 1rem; font-size:4vw;}
#main h3{font-size:6vw; margin:0 0 1vh;}
#main h4{font-size:4.5vw; margin:0 0 1vh;}

/* #home -------------------------------------*/
#home .mailmag { padding: 2rem; border-radius: 0.8rem; background:url(../img/bg.png) repeat #fef9eb; border: none; position: absolute; bottom:2rem; left:2rem; max-width: none; width: calc(100% - 4rem);}
#home .mailmag strong{ font-weight:bold; font-size: 1.2rem; padding: 0 0 1rem; display: block;}
#home .mailmag strong span{ display: block; font-size: 2rem;}
#home .mailmag p{ padding:0 0 1rem; line-height: 1.5; font-size: 1.1rem;}
#home .mailmag a{ background:url(../img/bg.png) repeat #febe00; width: 100%; display: block; padding: 1.2rem; border-radius: 4rem; font-weight: bold; transition: .5s;}


/* #story -------------------------------------*/
#story dl dt{ display:block; width:100%; padding:0 5%; vertical-align:top;}
#story p strong{ font-size:4.8vw;}

/* #shop -------------------------------------*/
#shop a{padding:15% 0;}
#shop h2{ font-size:6vw;}

/* #faq -------------------------------------*/
#faq .inner{ width:100%;}
#faq .acd { margin:0 0 0.3rem;border-radius: 0;-webkit-border-radius: 0;-moz-border-radius: 0;}

#faq .acd dt p{ line-height:1.4;}

#faq .acd dt{ padding:2rem 4rem 2rem 5.2rem;}
#faq .acd dt:after{ right:2rem; top:41%; width:5px; height:5px; border-top: 2px solid #462400;border-right: 2px solid #462400;}
#faq .acd dt.open:after{ top:47%; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}

#faq .acd dd{ border-radius: 8px;-webkit-border-radius: 8px;-moz-border-radius: 8px; margin:0 1.8rem; padding:2rem 2rem 2rem 5rem;}

}



/*----------------------------------------------------------------------------------------------------------------*/
/* Slider */
.slick-slider {
	position: relative;
	display: block;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-khtml-user-select: none;
	-ms-touch-action: pan-y;
	touch-action: pan-y;
	-webkit-tap-highlight-color: transparent;
}
.slick-list {
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
.slick-list:focus {
	outline: none;
}
.slick-list.dragging {
	cursor: pointer;
	cursor: hand;
}
.slick-slider .slick-track, .slick-slider .slick-list {
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.slick-track {
	position: relative;
	top: 0;
	left: 0;
	display: block;
}
.slick-track:before, .slick-track:after {
	display: table;
	content: '';
}
.slick-track:after {
	clear: both;
}
.slick-loading .slick-track {
	visibility: hidden;
}
.slick-slide {
	display: none;
	float: left;
	height: 100%;
	min-height: 1px;
}
[dir='rtl'] .slick-slide {
	float: right;
}
.slick-slide img {
	display: block;
}
.slick-slide.slick-loading img {
	display: none;
}
.slick-slide.dragging img {
	pointer-events: none;
}
.slick-initialized .slick-slide {
	display: block;
}
.slick-loading .slick-slide {
	visibility: hidden;
}
.slick-vertical .slick-slide {
	display: block;
	height: auto;
	border: 1px solid transparent;
}

/* Slider */
.slick-loading .slick-list {
	background: #fff;
}

/* Arrows */
.slick-prev, .slick-next {
	position: absolute;
	display: block;
	cursor: pointer;
	color: transparent;
	border: none;
	outline: none;
	background:#d3cece;
}


.slider-nav .slick-prev, .slider-nav .slick-next {
	top:0;
	width: 1.5em;
	height: 100%;
}
.slider-nav .slick-prev {left:0;}
.slider-nav .slick-next {right:0;}


#bnr .slick-prev, #bnr .slick-next {
	top:14.5%;
	width: 1.5em;
	height: 70%;
}
#bnr .slick-prev {left:-1.2em;}
#bnr .slick-next {right:-1.2em;}


.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before {
	opacity: 1;
}
.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before {
	opacity: .25;
}

.slick-prev:before, .slick-next:before {
	font-size:139%;
	line-height: 1;
	opacity: .75;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color:#FFF;
	font-family: FontAwesome;
	font-weight:bold;
}
.slick-prev:before {content:"\f104";}
.slick-next:before {content:"\f105";}

.slick-prev:hover, .slick-prev:focus,  .slick-next:hover, .slick-next:focus{
	background:#a59e9e;
}

/* Dots */
.slick-slider {
	margin-bottom: 30px;
}
.slick-dots {
	position: absolute;
	bottom: 1em;
	display: block;
	width: 100%;
	padding: 0;
	list-style: none;
	text-align: center;
}
.slick-dots li {
	position: relative;
	display: inline-block;
	width: 20px;
	height: 20px;
	margin: 0 5px;
	padding: 0;
	cursor: pointer;
}
.slick-dots li button {
	font-size: 0;
	line-height: 0;
	display: block;
	width: 20px;
	height: 20px;
	padding: 5px;
	cursor: pointer;
	color: transparent;
	border: 0;
	outline: none;
	background: transparent;
}
.slick-dots li button:hover, .slick-dots li button:focus {
	outline: none;
}
.slick-dots li button:hover:before, .slick-dots li button:focus:before {
	opacity: 1;
}
.slick-dots li button:before {
	font-size: 20px;
	line-height: 20px;
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
	content: '●';
	text-align: center;
	opacity: .25;
	color:#FFF;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
	opacity: .75;
	color:#FFF;
}