@charset "UTF-8";
/* CSS Document */

#contents_wrap{width:100%; background-color:#000;}
img{width:100%; padding-bottom: 20px;}

/*メイン画像*/
#main{margin:0 auto; max-width:1200px;}
.pc{display:block;}
.sp{display:none;}


#lp h3{font-family: 'Oswald', sans-serif; font-size:30px; text-align:center; color:#fff; margin-bottom:10px;}
#lp h4{font-family: 'Noto Sans JP', sans-serif; font-weight:400; font-size:13px; text-align:center; color:#fff; margin-bottom:50px;}

#shop_information{width:100%; background-color:#E4E4E4; padding:10% 0;}
.in_info{width:100%; max-width:1200px; margin:0 auto;}
#shop_information h3{color:#000; margin-bottom:5%;}
#contents_wrap time:first-child{background-color:#E4E4E4;}

#shop_nav{width:100%; max-width:1200px; margin:0 auto; padding:10% 0 0 0;}
#shop_nav a{width:33%; display:inline-block;}
#shop_nav a img{width:100%; opacity:0.4;}
.in_nav{position:relative; text-align:center;}
.in_nav p{position:absolute; color:#fff; top:45%; left:50%; -ms-transform: (-50%,-50%); -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); margin:0; padding:0; font-family: 'Oswald', sans-serif; font-size:40px;}
.in_nav p b{font-family: 'Noto Sans JP', sans-serif; font-weight:500; font-size:15px;}
.in_nav i{position:absolute; color:#fff; top:90%; left:50%; -ms-transform: (-50%,-50%); -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); margin:0; padding:0; font-size:30px;}


#pre{width:100%; max-width:1200px; margin:0 auto; padding:10% 0 0 0; text-align:center; font-family: 'Noto Sans JP', sans-serif; font-weight:400;}
#pre span{width:50%; display:inline-block; text-decoration:none; margin:3% 1%;}
#pre span p{color:#fff; font-size:20px; margin-top:10px;}
#pre span p b{font-size:13px;}
.attention{color:#fff; margin-top:40px; font-size:13px; line-height:180%;}

#st_code{width:100%; max-width:1200px; margin:0 auto; padding:10% 0; overflow:hidden;}
.click{text-align:center; color:#000; font-family: 'Noto Sans JP', sans-serif; font-weight:500; font-size:13px; background-color:#fff; padding:1%; width:50%; margin:0 auto;}
.more{color:#fff; float:right; text-decoration:none; margin-top:30px; font-family: 'Oswald', sans-serif;}

#shop_list{width:100%; background-color:#424242; clear:both; overflow:hidden; padding:10% 0 0 0;}
.in_shop{width:100%; max-width:1200px; margin:0 auto; clear:both; overflow:hidden; padding-bottom:10%;}
.shopimg{width:60%; margin:3% 4% 3% 0; float:left;}
.shopimg img{height:auto; width:70%;}
.shopinfo{width:30%; margin:3% 0 3% 0; float:left; color:#fff;}
.shopinfo span{display:block; margin-bottom:5px;}
.map{width:140px; text-align:center; padding:4% 0; background-color:#fff; color:#000; text-decoration:none; margin-top:10px; display:block;}
.sns img{width:10%; margin:30px 10px 0 0;}
.in_shop h3{color:#fff; font-weight:bold; font-size:30px; font-family:'Oswald', sans-serif;}
.in_shop h4{color:#fff; font-size:15px; margin-top:1%;}

/* 新商品*/
    #newitems{ width: 100%; max-width: 1200px; margin: 100px 0;}
    #newitems h2{ width: 100%; font-size: 22px; margin: 20px auto; text-align: center; font-family: 'Hind Madurai', sans-serif;}
    #newitems h2 span {font-size: 12px;margin-left: 14px;}
    #newitems p{padding:0.5rem;}
    #newitems ul{ overflow: hidden;}
    #newitems li{ width: 25%; padding:10px; float: left; overflow: hidden;}
    #newitems li img{ width: 100%;cursor: pointer;}
    #newitems li:hover img{box-shadow: 10px 10px 10px rgba(0,0,0,0.5);transform: translateY(-10px);transition-duration: 0.5s;}
    #newitems ul li p{font-size:12px; line-height:180%; margin:25px　0; text-align: left;}
    #newitems ul li p span{ display:block;}






/*モーダル*/
.modal_trigger{width:100%; position:relative; overflow:hidden; margin-top:3%;}
.modal_trigger img{width:23%; float:left; margin:1%;}

.modal_block > p{width:100%; padding:10px; margin-bottom:3%; background:#000; color:#fff;}
.modal-content{display:flex;}
.modal-content > img{ width: 50%; object-fit: cover; max-height: 550px;}
.modal-content ul{width: 70%; padding-left: 15px;}
.modal-content ul li{width: 100%; border-bottom: 1px solid #000;}
.modal-content ul li a{display: block; width: 100%; overflow: hidden; margin: 10px 0; color: #000; text-decoration: none;}
.modal-content ul li img{width: 25%; float: left;}
.modal-content ul li p{line-height: 150%; font-size: 12px;text-align: left; padding-left: 28%;}
.modal-content ul li p b{font-weight: bold; display: block;}
.modal-content ul li p::after{content: "円（税込）";font-size: 10px;}
@-webkit-keyframes slideRightBg {
    0% {opacity: 0; left: -50%;}
    100% {opacity: 1; left: 0;}
        }
 @keyframes slideRightBg {
    0% {opacity: 0;left: -50%;}
    100% {opacity: 1; left: 0;}
        }
.modal_box{display:none; height:100%; left:0; position:fixed; top:0; width:100%; z-index:9999;}
.modal_bg{background-color:rgba(30, 30, 30, 0.9); height:100%; width:100%;}
.modal_inner{background-color:#fff; left:50%; padding:40px; position:absolute; top:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); max-width:900px;}
.modal_close{cursor:pointer; position:absolute; right:10px; top:5px; font-size:2rem;}



@media screen and (max-width: 768px) {

/*メイン画像*/
#main{margin:0 auto; width:100%; background-color: #000!important;}
.pc{display:none;}
.sp{display:block;}
	
#lp h3{font-family: 'Oswald', sans-serif;}
#lp h4{font-family: 'Noto Sans JP', sans-serif; font-weight:400;}

#shop_information{padding:20% 0;}
#contents_wrap time:first-child{background-color:#E4E4E4; color:#728496;}
#contents_wrap .fs-p-dateList > li{padding:18px 0 10px 0; font-size:80%;}
.in_info{width:90%;}
	
#shop_nav{padding:20% 0 0 0; text-align:center;}
#shop_nav a{width:31%;}
.in_nav p{font-family: 'Oswald', sans-serif; font-size:20px; line-height:180%; display:block;}
.in_nav p b{font-family: 'Noto Sans JP', sans-serif; font-weight:500; font-size:8px; line-height:140%; display:block;}
	
#pre{padding:20% 0 0 0;font-family: 'Noto Sans JP', sans-serif; font-weight:400;}
#pre span{width:70%; margin:5% 1%;}
#pre span p{color:#fff; font-size:13px;}
#pre span p b{font-size:10px;}
.attention{width:90%; margin:20px auto 0 auto; font-size:12px; line-height:180%;}
	
#st_code{padding:20% 0;}
.click{font-family: 'Noto Sans JP', sans-serif; font-weight:500; font-size:12px; padding:2%; width:80%;}
.more{font-family: 'Oswald', sans-serif;}
#st_code h4{margin-bottom:30px;}

#shop_list{padding:20% 0 0 0;}
.in_shop{padding-bottom:20%;}
.shopimg{width:100%; margin:3% 0; clear:both;}
.shopimg img{height:auto; width:100%;}
.shopinfo{width:90%; margin:3%; clear:both;}

	
#newitems{width:100%; margin:40px 0;}
#newitems h2{margin:10px; font-size:18px;}
#newitems h2 span{font-size:12px;margin-left: 14px;}
#newitems p{padding-left:0.5rem;}
#newitems ul{ width:98%; margin:0 auto;overflow:hidden;}
#newitems ul li{ width:46%; margin: 2%; float:left; height: 280px;}
#newitems ul li img{ width:100%;}
#newitems ul li p{font-size:12px; line-height:150%; margin:10px　0; text-align: left;}
#newitems ul li p span{ display:block;}

	
	
	
/*モーダル*/
.modal_trigger{margin-top:7%;}
.modal_trigger img{width:46%; margin:3% 2% 0 2%;}

.modal_inner {width:100%; padding:25px; max-height:500px; overflow:hidden;}
.modal_close {top:5px; font-size:2.2rem;}
.modal-content > img{max-height:300px;}
	
}