@charset "utf-8";

/*
-----------------------------------------------
Jam Design RESET CSS 1.2
▼SNS 2017.2
----------------------------------------------- */

#lower * {
box-sizing:border-box;
}
#lower {
font-family:-apple-system,blinkMacSystemFont,"Hiragino Kaku Gothic ProN",YuGothic-M,YuGothic,sans-serif;
font-feature-settings:"halt";
font-size:16px;
line-height:1.7;
}
body {
-webkit-text-size-adjust:100%;
}

h1,h2,h3,h4,h5,h6,strong {
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
font-feature-settings:"palt";
letter-spacing:.01em;
}
a img {
transition:opacity 0.5s ease-in-out;
}
a:hover img {
opacity:0.8;
}

/* clearfix */
.cf:after {
display:block;
content:"";
clear:both;
}

/* .sponly {display:none;}
.txtL {text-align:left;}
.txtR {text-align:right;}
.center {text-align:center;}
.soroe {text-align:justify; word-break:break-all;}
.nowrap {white-space:nowrap;}
.imgL {float:left; margin:0 16px 4px 0;}
.imgR {float:right; margin:0 0 4px 16px;}
.btm8 {margin-bottom:8px;}
.btm16 {margin-bottom:16px;}
.btm24 {margin-bottom:24px;}
.btm32 {margin-bottom:32px;}
.btm48 {margin-bottom:48px;}
.kome {
padding-left:1em;
text-indent:-1em;
}
.inL {
display:inline-block;
font-feature-settings:"pwid";
} */


/* ▼下層用ナビ */
#lower #topnavi {
margin-top:8px;
margin-left:-24px;
margin-bottom:16px;
}








/*
-----------------------------------------------
▼スマホ基本
----------------------------------------------- */
#navbtn {
display:none;
}
#sb-site,
.sb-site-container {
background:transparent;
}

@media (max-width:767px){
body {
background:#fff none;
font-family:sans-serif;
font-size:18px;
/* overflow-x:hidden; */
}
img {
max-width:100%;
height:auto;
}
.pconly {display:none;}
.sponly {display:block;}

#sb-site,
.sb-site-container {
background:#fff;
}
#navbtn {
display:block;
position:absolute;
top:10px;
right:10px;
z-index:500;
width:50px;
}
#spnav {
background:#667;
z-index:0;
}

#spnav.sb-slidebar {
background:#333;
}
#spnav ul a {
display:block;
padding:12px 12px;
font-size:14px;
color:#fff;
border-bottom:solid #ccc 1px;
text-align:left;
}

}

@media (max-width:767px){
#wra {
background:#fff none;
overflow:hidden;
}
#all {
margin:0 14px;
padding:0 0 160px;
width:auto;
}
#head {
background:url(img/sp_head_bg.png) no-repeat;
background-size:100% 54px;
}
#head h1 {
padding:10px 70px 16px 12px;
float:none;
width:auto;
}

#footfun {
margin:0;
padding:16px 0 0;
width:auto;
height:auto;
}
#footin {
margin:0;
width:auto;
height:auto;
}

}

#lower {
padding:0 32px 24px;
overflow:hidden;
position:relative;
background:url(img/sns_ill01.png) no-repeat 794px 90px;
}
#lower.goodsblk {
background:url(img/goods_bg.png) no-repeat 32px 90px;
}
#lower.goodsblk h2 {
margin-top:46px;
margin-bottom:64px;
}


@media (max-width:767px){
#lower {
padding:16px 0 24px;
background:none;
}
#lower.goodsblk {
padding:0 0 24px;
}
#lower.goodsblk h2 {
margin-top:0;
margin-bottom:16px;
}

}

#snsblk {
margin-bottom:24px;
background:#eee;
border-radius:12px;
padding:32px;
}
#shopblk {
background:#eee;
border-radius:12px;
padding:32px;
}

#snsblk .row {
margin-right:-12px;
margin-left:-12px;
font-size:0;
}
#snsblk .col3 li {
display:inline-block;
vertical-align:top;
font-size:16px;
width:33.333%;
position:relative;
/* min-height:1px; */
padding:0 12px 24px;
}
#snsblk .col3 li p {
background:#ccc;
position:relative;
overflow:hidden;
padding-bottom:100%;
border-radius:12px;
}
#snsblk .row p img {
max-width:100%;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
#snsblk .snsbtn a {
display:block;
font-size:15px;
background:#a63638;
color:#fff;
text-align:center;
line-height:40px;
height:40px;
border-radius:20px;
transition:opacity 0.5s ease-in-out;
}
#snsblk .snsbtn a:hover {
opacity:0.8;
text-decoration:none;
}


.btn a {
display:inline-block;
padding:0 80px;
font-size:24px;
background:#a63638;
color:#fff;
text-align:center;
line-height:50px;
height:50px;
border-radius:30px;
white-space:nowrap;
transition:opacity 0.5s ease-in-out;
}
.btn a:hover {
opacity:0.8;
text-decoration:none;
}

@media (max-width:767px){
#snsblk {
padding:16px;
}
#snsblk .col3 li {
width:50%;
}
#snsblk .snsbtn a {
font-size:14px;
}
.btn a {
display:inline-block;
padding:0 40px;
font-size:18px;
line-height:40px;
height:40px;
border-radius:20px;
}
#footfun {
padding:16px 0;
}
#foot #ftimgR {
float:right;
margin:-28px 10px 8px 16px;
padding-right:0;
width:92px;
}
#footfun p {
font-size:14px;
margin:0 0 8px 14px;
}
#foot #ftimgL {
float:left;
margin:4px 8px 8px 0;
padding-left:14px;
}
#footfun p.tabou {
font-size:12px;
margin:14px 0 0 14px;
padding-left:1em;
text-indent:-1em;
}
#footin {
padding:0;
}
#foot #copyright {
float:none;
margin-top:0;
background:#ffa4a4;
padding:8px;
color:#fff;
font-family:Helvetica, Arial, Verdana, sans-serif;
font-size:9px;
font-weight:bold;

}

}

@media (max-width:414px){
.imgcenter {
text-align:center;
}
#snsblk {
padding:14px;
}
#snsblk .col3 li {
width:100%;
padding:0 12px 14px;
}
#snsblk .snsbtn a {
font-size:16px;
}

}

/*
-----------------------------------------------
▼モーダル
----------------------------------------------- */
.modal {
opacity:0;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
overflow-y:auto;
font-size:16px;
-webkit-transition:opacity .4s linear;
transition:opacity .4s linear;
-webkit-transform:translate(0,100%);
-ms-transform:translate(0,100%);
transform:translate(0,100%);
}
.modal-inner {
position:relative;
margin:60px 20% 5%;
padding:32px;
box-shadow:8px 8px 12px rgba(0,0,0,0.4);
border-radius:15px;
background-color:rgba(255,255,255,.92);
z-index:10;
}
.modal-inner h3 {
font-size:24px;
}
.modal-inner h4 {
font-size:20px;
}
.modal-inner li {
font-size:12px;
}

.modal .close {
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,.4);
z-index:1;
}
.modal .close span {
position:absolute;
top:20px;
right:22%;
width:40px;
height:40px;
background-color:rgba(0,0,0,.8);
background:#369;
cursor:pointer;
overflow:hidden;
padding-top:40px;
}
.modal .close span:before,
.modal .close span:after {
content:"";
position:absolute;
top:4px;
border:1px solid #fff;
height:30px;
}
.modal .close span:before {
left:19px;
-webkit-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
transform:rotate(-45deg);
}
.modal .close span:after {
right:19px;
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
}

#my-modal:target {
opacity:1;
-webkit-transform:translate(0,0);
-ms-transform:translate(0,0);
transform:translate(0,0);
}

@media (max-width:767px) {
.modal {
/* position:absolute;
min-height:100%; */
}
.modal-inner {
position:relative;
margin:54px 14px 14px;
padding:14px;
border-radius:12px;
background:#fff;
border:solid #666 1px;
box-shadow:4px 4px 6px rgba(0,0,0,0.4);
}
.modal-inner h3 {
font-size:20px;
}
.modal-inner h4 {
font-size:18px;
}
.modal-inner li {
font-size:14px;
}
.modal .close span {
position:absolute;
top:14px;
left:20px;
}
.modal .close {
background-color:rgba(0,0,0,.01);
}

}

/*
-----------------------------------------------
▼ショップリスト
----------------------------------------------- */
#shopblk .row {
margin-right:-12px;
margin-left:-12px;
font-size:0;
}
#shopblk .col4 li {
display:inline-block;
vertical-align:top;
font-size:14px;
width:25%;
position:relative;
min-height:1px;
padding:0 12px 24px;
}
#shopblk .col4 li .simg {
background:#ccc;
position:relative;
overflow:hidden;
padding-bottom:100%;
}
#shopblk .row .simg img {
max-width:100%;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}

#shopblk .col2 li {
display:inline-block;
vertical-align:top;
font-size:14px;
width:50%;
position:relative;
min-height:1px;
padding:0 12px 24px;
}
#shopblk .col2 li h3 {
margin:4px 0;
font-size:18px;
color:#a63638;
}
#shopblk .col2 li .simg {
background:#ccc;
position:relative;
overflow:hidden;
padding-bottom:66.7%;
}
#shopblk .col2 dt {
/* display:inline-block; */
clear:left;
float:left;
width:auto;
margin-right:8px;
font-weight:bold;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
/*Safariだけ適用 CSSハック*/
_::-webkit-:not(:root:root),
#shopblk .col2 dt {
font-feature-settings:"pwid";
margin-right:0;
}


@media (max-width:767px){
#shopblk {
padding:16px;
margin-bottom:24px;
}
#shopblk .row {
margin-right:-8px;
margin-left:-8px;
}
#shopblk .col4 li {
/* width:33.333%; */
padding:0 8px 16px;
}
#shopblk .col2 li {
padding:0 8px 16px;
}

}

@media (max-width:414px){
#shopblk {
padding:14px;
}
#shopblk .row {
margin-right:-7px;
margin-left:-7px;
}
#shopblk .col4 li {
width:50%;
padding:0 7px 14px;
}
#shopblk .col2 li {
width:100%;
padding:0 7px 16px;
}

}


/*
---------------------------
▼pagetop
---------------------------
*/
#pagetop {
display:none;
position:fixed;
z-index:110;
right:16px;
bottom:24px;
}
#pagetop a {
display:block;
}




/* css_end */