/* ==========================================================================
   
message SECTION

========================================================================== */

.main_img_2nd_shop{
    position: relative;
    width: 100%;
    height: 500px;
    top: 0;
    padding-top: 250px;
    padding-bottom: 0px;
    padding-left: 25%;
    padding-right: 25%;
    display: block;
    text-align: center;
    color: #fff;
    z-index: 7;
    background-size: cover;
    background: url("../img/bg/bg_shop.jpg") top center no-repeat;
    background-color: #012f5e;
}

.main_img_2nd_shopdetails{
    position: relative;
    width: 100%;
    height: 250px;
    top: 0;
    padding-top: 100px;
    padding-bottom: 0px;
    padding-left: 25%;
    padding-right: 25%;
    display: block;
    text-align: center;
    color: #fff;
    z-index: 7;
	background: url(../img/noise.png) repeat #912a7d;
}


.shoplist_box{
	width: 100%;
    margin-top: 0%;
    margin-bottom: 0%;
    padding-top: 0%;
    padding-bottom: 0%;
    display: inline-block;
}
.shoplist_box_L{
    width: 20%;
    float: left;
	display: block;
    padding-right: 0%;
padding-bottom: 5%;
}
.shoplist_box_R{
    width: 76%;
    float: right;
display: block;
padding-left: 0%;
padding-bottom: 5%;
}

.shoplist_navi_ttl{
padding-bottom: 5%;
font-weight: bold;
}
.shoplist_box_L li{
padding-bottom: 3%;
}




@media screen and (max-width: 738px) {
    .main_img_2nd_shop {
        position: relative;
        width: 100%;
        height: 450px;
        top: 0;
        padding-top: 200px;
        padding-bottom: 0px;
        padding-left: 5%;
        padding-right: 5%;
        display: block;
        text-align: center;
        color: #fff;
        z-index: 7;
        background-size: cover;
        background: url("../img/bg/bg_shop.jpg") center center no-repeat;
        background-color: #012f5e;
    }
	
	
    .main_img_2nd_shopdetails{
        position: relative;
        width: 100%;
        height: 450px;
        top: 0;
        padding-top: 200px;
        padding-bottom: 0px;
        padding-left: 5%;
        padding-right: 5%;
        display: block;
        text-align: center;
        color: #fff;
        z-index: 7;
        background-size: cover;
background: url(../img/noise.png) repeat #912a7d;
    }	
	
	
.shoplist_box{
    margin-top: 0%;
    margin-bottom: 0%;
    padding-top: 0%;
    padding-bottom: 0%;
    display: inline-block;
}	
	
.shoplist_box_L{
    width: 100%;
	display: block;
padding-bottom: 0%;
}
	
	

.shoplist_box_R{
    width: 100%;
padding-left: 0%;
padding-bottom: 0%;
}		
	
	
}









/* ==========================================================================
   
shop SECTION

========================================================================== */

.shops {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 0%;
}
.shops:after {
    content: "";
    display: block;
    width: 48%;
    height: 0;
}
.shop{
    width: 48%;
    margin-bottom: 3%;
	border-radius: 20px;
	background-color: #fff;
	padding-top: 3%;
	padding-bottom: 5%;
	padding-left: 3%;
	padding-right: 3%;
}
.shop img {
    width: 100%;
    margin-bottom: 3%;

}
.shop_ttl {
    font-size: 20px;
    font-size: 2.0rem;
    line-height: 1.6em;
    padding-bottom: 3%;
	margin-bottom: 5%;
    color: #912a7d;
   font-family: "Kaisei Opti", serif;
	font-weight: 700;
	border-bottom: 2px solid #912a7d;
}
.shop_subttl {
    font-size: 13px;
    font-size: 1.3rem;
    line-height: 2;
    padding-bottom: 1%;
    color: #912a7d;
	font-weight: bold;
}
.shop_cap {
    font-size: 13px;
    font-size: 1.3rem;
    color: #912a7d;
    font-weight: bold;
}
.shop_txt {
padding-bottom: 3%;
}

.shop_sns{
width: 100%;
display: block;
clear: both;
}

.shop_sns li{
float: left;
    position: relative;
    list-style: none;
    display: inline-block;
    font-size: 13px;
    letter-spacing: .1em;
    padding-right: 2%;
    padding-bottom: 1%;
    margin: 0;
    width: 12%;
	border-bottom: none !important;

}

.google_map{
font-size: 80%;
}

@media screen and (max-width: 768px) {
    .shops {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .shops:after {
        content: "";
        display: block;
        width: 100%;
        height: 0;
    }
.shop{
    width: 100%;
    margin-bottom: 10%;
	border-radius: 20px;
	background-color: #fff;
	padding-top: 5%;
	padding-bottom: 7%;
	padding-left: 5%;
	padding-right: 5%;
}
    .shop_img {
        margin-bottom: 5%;
    }
}



/*==========================================================

                      PANKUZU

==========================================================*/
#pankuzu {
    width: 100%;
    text-align: left;
    position: relative;
    padding-left: 10%;
	padding-top: 1%;
	padding-bottom: 1%;
	margin-bottom: 1%;
    background-image: url(../assets/images/bg_pankuzu.gif);
    background-repeat: no-repeat;
    background-position: left center;
    font-size: 70% !important;
	border-bottom: 1px solid #999999;
}
.pankuzuarea {
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}

#pankuzu a:link {
text-decoration:underline;
color:#555555;
}

#pankuzu a:visited {
text-decoration:underline;
color:#555555;
}

#pankuzu a:hover {
    text-decoration:none;
    background-color: #ffffff;
}   
@media screen and (max-width: 768px) {
 #pankuzu {
    width: 100%;
    text-align: center;
    position: relative;
    padding-left: 0%;
	padding-top: 3%;
	padding-bottom: 3%;
	margin-bottom: 1%;
    background-image: url(../assets/images/bg_pankuzu.gif);
    background-repeat: no-repeat;
    background-position: left center;
    font-size: 70% !important;
	border-bottom: 1px solid #999999;
}
}   

/*==========================================================

                      PANKUZU

==========================================================*/
.comingsoon{
font-size: 2.6rem;
font-size: 26px;
color: #912a7d;
font-family: "Kaisei Opti", serif;
font-weight: 700;
padding-top: 10%;
padding-bottom: 7%;
text-align: center;
}

.shop_name_ttl {
     font-size: 2.3rem;
    font-size: 23px;
    line-height: 1.6em;
    padding-bottom: 3%;
    margin-bottom: 5%;
    color: #912a7d;
    font-family: "Kaisei Opti", serif;
    font-weight: 700;
    border-bottom: 2px solid #912a7d;

    display: flex;
    align-items: center; /* 縦に中央揃え */
    gap: 10px; /* アイコンとテキストの間に少し余白 */
}

.shop_name_ttl .shop_icon {
    width: 100%;      /* 親要素の80%ではなく、"元のサイズ"の80%にしたい場合は以下で対応 */
    max-width: 45px; /* 任意の固定サイズ指定（例：32pxなど）でバランス調整 */
    height: auto;
	margin-right: 2%;
}


#shopinfo .outline {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: start;
    justify-content: flex-start;
    -webkit-box-align: stretch;
    align-items: stretch;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    border-bottom: #999999 1px dotted;
}
#shopinfo .outline>dt {
    width: 150px;
    padding-bottom: 1%;
    margin-bottom: 2%;
    color: #912a7d;
}
#shopinfo .outline>dd {
    -webkit-box-flex: 1;
    flex: 1;
    padding-bottom: 1%;
    margin-bottom: 2%;
}
dd {
    display: block;
    unicode-bidi: normal;
}
@media screen and (max-width: 768px) {
    #shopinfo .outline {
        flex-direction: column;
        /* スマホでは縦並び */
        padding-bottom: 4%;
    }
    #shopinfo .outline>dt {
        width: 100%;
        /* 100%にして縦並び */
        padding-bottom: 1%;
    }
    #shopinfo .outline>dd {
        width: 100%;
        /* 100%にして縦並び */
        line-height: 1.6;
    }
}



.payment_box{
padding-top: 3%;
    padding-bottom: 3%;
	margin-bottom: 3%;
    padding-left: 3%;
    padding-right: 3%;
    background-color: #debfd8;
    border-radius: 10px;
	font-size: 90%;
}

.payment_box_ttl{
	font-size: 90%;
	font-weight: bold;
}

.shopdetails_pay{
width: 100%;
display: block;
clear: both;
}

.shopdetails_pay li{
float: left;
    position: relative;
    list-style: none;
    display: inline-block;
    letter-spacing: .1em;

    padding-right: 3%;
    padding-bottom: 5%;
    margin: 0;
    width: 10%;
	border-bottom: none !important;

}


.shopdetails_sns{
width: 100%;
display: block;
clear: both;
}

.shopdetails_sns li{
float: left;
    position: relative;
    list-style: none;
    display: inline-block;
    letter-spacing: .1em;
	margin-left: 10%;
    padding-bottom: 0%;
    margin: 0;
    width: 7%;
	border-bottom: none !important;

}

.icon_subttl{
font-size: 70%;
letter-spacing: 0.08em;
text-align: center;
line-height: 1.5em;
width: 100%;
    padding-right: 1%;
}

@media screen and (max-width: 768px) {
	
.shopdetails_pay li{
float: left;
    position: relative;
    list-style: none;
    display: inline-block;
    letter-spacing: .1em;

    padding-right: 3%;
    padding-bottom: 5%;
    margin: 0;
    width: 100%;
	border-bottom: none !important;

}
.shopdetails_pay li img{
    width: 15%;
}	
	
.icon_subttl{
font-size: 80%;
letter-spacing: 0.08em;
text-align: left;
line-height: 1.5em;
width: 100%;
    padding-right: 1%;
}		
	
.shopdetails_sns li{
float: left;
    position: relative;
    list-style: none;
    display: inline-block;
    letter-spacing: .1em;
	margin-left: 10%;
    padding-bottom: 0%;
    margin: 0;
    width: 13%;
	border-bottom: none !important;

}	
	
}


.google-map iframe {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
border-radius: 13px;
}




.shop_main_img{
text-align: center;
padding-bottom: 5%;
}


/*==================================================
スライダーのためのcss
===================================*/

.attmosphere_section{
background-color: #ffffff;
}

.atmslider {/*横幅94%で左右に余白を持たせて中央寄せ*/
    width:100%;
    margin:0 auto;
	padding-bottom: 0%;
}

.atmslider img {
    width:60vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
    height:auto;
}
@media screen and (max-width: 738px) {
.atmslider img {
    width:100vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
    height:auto;
}
}
.atmslider .slick-slide {
  transform: scale(1);/*左右の画像のサイズを80%に*/
  transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
  opacity: 0.7;/*透過50%*/
}

.atmslider .slick-slide.slick-center{
  transform: scale(1);/*中央の画像のサイズだけ等倍に*/
  opacity: 1;/*透過なし*/
}


/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #fff;/*矢印の色*/
    border-right: 2px solid #fff;/*矢印の色*/
    height: 35px;
    width: 35px;
	z-index: 9999;
}

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

.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #fff;/*矢印の色*/
    border-right: 2px solid #fff;/*矢印の色*/
    height: 35px;
    width: 35px;
	z-index: 9999;
}
	
}


.slick-prev {/*戻る矢印の位置と形状*/
    left: 2%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right: 2%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
    text-align:center;
	padding-top: 2%;
  margin:0 0 0 0;
	background: url(../img/noise.png) repeat #ebe5da;	

}	


.slick-dots li {
    display:inline-block;
  margin:0 2px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:60px;/*ドットボタンのサイズ*/
    height:2px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:0%;
	border: none;
    background:#eeeeee;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#912a7d;/*ドットボタンの現在地表示の色*/
}


@media screen and (max-width: 738px) {
.slick-dots button {
    color: transparent;
    outline: none;
    width:30px;/*ドットボタンのサイズ*/
    height:2px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:0%;
	border: none;
    background:#eeeeee;/*ドットボタンの色*/
}	
	
}