@charset "utf-8";
html {overflow-y:scroll;font-size: 10px; height:100%;}  
body {line-height:1.8em;color: #605E5E;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;margin:0; min-height: 100vh; width:100%;position:relative;font-family:garamond-premier-pro, YuMincho,"Hiragino Mincho ProN", serif;background: #f4f4f4;padding:178px 0 0 0; letter-spacing: 0.02em; box-sizing: border-box;}
h1,h2,h3,h4,h5,h6 {padding:0;margin:0;font-weight:inherit;font-size:inherit;color: inherit;}
p,ul,ol{padding:0;margin:0;text-align: justify;}
.cl:after { content: "";clear: both;display: block;}
div{ padding:0; margin:0; line-height: 1em;;}
img {border:0;border-style:none; width:100%;-ms-interpolation-mode: bicubic;-webkit-interpolation-mode: bicubic;}
a img:hover {opacity: 0.7 ;-webkit-transition: 0.7s;-moz-transition: 0.7s;-o-transition: 0.7s;transition: 0.7s;}
li {list-style-type:none;}
a {cursor: pointer; display: block;}
a:link {text-decoration: none; color:inherit; }
a:visited {text-decoration: none; color:inherit;}
a:hover {text-decoration: none; color: inherit;}
a:active {text-decoration: none; color:inherit;}
a,a:hover {-webkit-transition: 0.7s;-moz-transition: 0.7s;-o-transition: 0.7s;transition: 0.7s;}
::selection {background: #000;color: #fff;}
::-moz-selection {background: #000;color: #fff;}
.in,.in2{ padding:0 5%; max-width: calc(1200px + 10%); margin: auto; position: relative; height: 100%; width:100%; box-sizing: border-box;}
.tr{-webkit-transition: 0.7s;-moz-transition: 0.3s;-o-transition: 0.3s;transition: 0.3s;}
.hdn{overflow: hidden;}
.pc{ display:block;}
.sp{ display:none;}
.on_pc{ display: block;}
.on_sp{ display: none;}
.non{ display:none;}
.blk{display: block;}
.tbl{display: table;}
.po_re{ position: relative;}
.po_ab{ position: absolute;}
.flx{ display: flex!important; flex-wrap: wrap;}
.flx_b{ display: flex !important; flex-wrap: wrap; justify-content: space-between;}
.flx_r{flex-direction: row-reverse;}
.flx_c{ display: flex!important; flex-wrap: wrap; align-items: center;}
.over{ position: absolute; height: 100%; left: 0;top: 0; display: block; background: #ddd; z-index: 999;animation-duration: 1.3s;animation-name: ov;}
.home{ min-height: 100vh; padding:0 0 200px 0; box-sizing: border-box;}
.c_logo{position: relative; padding: 8vh 5%;text-align: center;}
.c_logo img{max-width: 200px; width: 70%; }
.c_date{ font-size: 2.4rem; text-align: center; padding: 15vh 5%; line-height: 1.55em;}
@keyframes ov {
    0% {opacity: 1;width: 100%;}
	30% {opacity: 1;width: 100%;}
	100% {opacity: 0; width: 100%;}
}
.c_ft{ font-size: 1.6em; position: absolute; width: 100%; left: 0; bottom: 5vh;}
.c_ftp{max-width: 650px; width: 80%; margin: auto; padding: 0 0 3vh 0; line-height: 1.5em;}
.c_copy{text-align: center;}
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:#fff; /* 背景カラー */
  z-index: 9999; /* 一番手前に */
  pointer-events: none; /* 他の要素にアクセス可能にするためにポインターイベントは無効に */
  opacity: 0; /* 初期値では非表示 */
  -webkit-transition: opacity .8s ease; /* アニメーション時間は 0.8秒 */
  transition: opacity .8s ease;
}
/*body要素に.fadeoutセレクタがある場合には、レイヤーが表示されるようにopacityを１に設定します。*/
body.fade::after {
  opacity: 1;
}
/*header*/
.header{ position: fixed; top: 0; left: 0; width: 100%; z-index: 200; box-sizing: border-box;padding: 75px 0;}
.smaller{padding: 25px 0;}
.logo{ max-width: 150px; width:17%;}
.hd_mn li{position: relative;margin: 0 0 0 calc(20px + 2vw);}
.hd_mn li a{font-size: 1.5rem; line-height: 1em;}

.ct_bx{ background: #fff; border-radius: 3px; padding: 5%;}

.hd_mn_in{ position: absolute; display: none;padding: calc(5px + 2%) 0 0 0; left:0; width: 50vw;}
.hd_mn_in li{text-align: left; margin: 0;}
.hd_mn_in li a{padding: 4px 0; font-size: 1.2rem; line-height: 1em;}

/*index*/
.contents{padding: 0 0 40px 0;}
.idx_mv{ max-width: 420px; margin: auto;}
.idx_mvimg{margin: 0 0 calc(20px + 3%) 0;}
.idx_mvtx{margin: 0 0 calc(70px + 7%) 0;}
.idx_mvtx a{display: inline !important;}
.idx_mvtx p{font-size: 1.6rem; line-height: 1.35em; margin: 0 0 calc(10px + 1%) 0;}

/*footer*/
.footer{ position: absolute; bottom: 0; right: 0; height: 40px; width: 100%; box-sizing: border-box; padding:0 5%;}
.copy{margin: 0 0 0 auto; font-size: 1.1rem; line-height: 1em; display: table;}

/*about*/
.ab_bx{ max-width: 1000px;align-items: flex-end; margin: 0 auto calc(70px + 5%) auto;}
.ab_img{ max-width: 400px; width: 45%;}
.ab_txb{ max-width: 515px; width: 50%;}
.cnt_ttl{ font-weight: 500; font-size: 1.6em; margin: 0 0 calc(10px + 0.5%) 0; line-height: 1.8em;}
.ab_tx{ font-size: 1.45em; line-height: 1.8em; letter-spacing:0;}

/*stockints*/
.stk_in{ max-width:850px; margin: auto; padding: calc(10px + 2%) 0 calc(70px + 5%) 0;}
.stk_bx li{display: flex; justify-content: space-between; flex-wrap: wrap;margin: 0 0 calc(25px + 3%) 0;}
.stk_bx li:last-child{margin: 0;}
.stk_ttl{ width: 150px; font-size: 1.5rem; line-height: 1.5em;}
.stk_txt{ width: calc(100% - 180px);}
.stk_txt p{font-size: 1.5rem; line-height: 1.5em; margin: 0 0 calc(5px + 0.5%) 0;}

/*look*/
.look_bx{ max-width: 610px; margin: auto;}
.look_bx li{width: 49.2%; margin: 0 0 1.6% 0;}
.look_bx li.look_bx_sp{display: none;}
.look_bx li{line-height: 0;}
/*▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲*/
@media screen and (max-width:1250px) {

	
}
/*▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲*/
@media screen and (max-width:1024px) {
	
	/*header*/
	.hd_mn li{margin: 0 0 0 calc(15px + 1.5vw);}
	.hd_mn li a{font-size: 1.3rem;}

}
/*▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲*/
@media screen and (max-width:768px) {
    .pc{ display:none !important;}
    .sp{ display:block !important;}
    .in2{ padding:0;}

    /*header*/
	.hd_mn li{margin: 0 0 0 calc(10px + 1.2vw);}
	.hd_mn li a{font-size: 1.2rem;}


}
/*▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲*/
@media screen and (max-width:620px) {
    .in,.in2{ padding:0 6%;}
	.in2{ padding:0;}
    .on_pc{ display: none !important;}	
    .on_sp{ display:block !important;}
	
	.home{padding:0;}
	.page1{padding:83px 0 0 0;}
	
	.header{padding: 30px 0;}
	.smaller{padding: 15px 0;}
	.logo{ width: 120px; margin: auto;}
    
	
    /*index*/
	.contents{padding: 0 0 calc(90px + 5%) 0;}
	.idx_mvtx{padding: 0 6%; margin: 0;}
	.idx_mvtx p{font-size: 1.35rem;}
	
	/*footer*/
	.footer{ position: relative; bottom:auto; right: auto; height: auto; width: 88%; box-sizing: border-box; padding: 0 0 5% 0; margin: 0 6%; border-top: 1px solid #ddd;}
	.ft_mn{ padding:15px 0 30px 0;}
	.ft_mn li a{ padding: 5px 35px 5px 0; font-size: 1.5rem; line-height: 1em;}
	.copy{margin: 0; font-size: 1rem; line-height: 1em; display: table;}
	
	.ft_mn_in{ position: relative; display: none;padding: calc(1px + 1%) 0 20px 0; left:0; width: 0px; top:0;}
	.ft_mn_in li{text-align: left; margin: 5px 0; position: relative; height: 15px;}
	.ft_mn_in li p{padding: 0; line-height: 1em; position: absolute; width: calc(100vw - 100px);}
	.ft_mn_in li a{padding: 3px 0;font-size: 1.25rem;}
	
	.ab_bx{ margin: 0 auto;}
	.ab_img{ max-width: 1000px; width: 100%; margin: 0 0 calc(20px + 2.5%) 0;}
	.ab_txb{ max-width: 1000px; width: 88%; padding: 0 6%;}
	.ab_tx{ font-size: 1.35em; }
	
	/*stockists*/
	.stk_in{ padding: calc(30px + 4%) 0 0 0;}
	.stk_ttl{ width: 70px; font-size: 1.3rem;}
	.stk_txt{ width: calc(100% - 90px);}
	.stk_txt p{font-size: 1.3rem;}
	
	.look_bx li.look_bx_sp{display: block; width: 100%;}
	
	
	
	.c_logo{position: relative; padding: 8vh 5%;text-align: center;}
.c_logo img{max-width: 200px; width: 70%; }
.c_date{ font-size: 2rem; text-align: center; padding: 15vh 5%; line-height: 1.55em;}

.c_ft{ font-size: 1.35em; position: absolute; width: 100%; left: 0; bottom: 5vh;}
.c_ftp{max-width: 650px; width: 80%; margin: auto; padding: 0 0 3vh 0; line-height: 1.5em;}
.c_copy{text-align: center;}
}