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

/***共通項目***/
body { color:#333; }

@media (min-width: 769px) {
	a[href^="tel:"] { pointer-events: none; }
}

.w100 { width:100%; }

a, a:visited { color: #555; transition: 0.4s; }

img { backface-visibility: hidden;}

hr { border:none; border-bottom: dashed 1px #333; width: 90%; margin: auto;}

/***コンテンツ***/
.wrapper { display: flex; width: 100%; margin: 0; padding: 0; font-size: 0; flex-wrap: wrap;}
.wrapper .left , .wrapper .right { width: 100%;}
.wrapper .left img { width: 100%;}
.wrapper .left p { background-color: #E62983; font-size: 0.6rem; text-align: center; line-height: 2.6rem; width: 100%;}
.wrapper .left p a { color: #CCC;}

.wrapper .right .text-block h1 { position: relative; padding-left: 1.0rem; }
.wrapper .right .text-block h1::before { position: absolute; top: 50%; left: 0; content: ""; width: 5px; height: 95%; display: block; border-radius: 2.5px; background-color: #44A89D; transform: translateY(-50%);}
.wrapper .right .text-block h1 .title {font-size: 1.8rem; font-weight: 900; }
.wrapper .right .text-block h1 .sub { font-size: 1.0rem; font-weight: 500; }
.wrapper .right .text-block p { font-size: 1.0rem; }

    @media(min-width:992px){
        .wrapper .left { -ms-flex-order:1; order: 1; }
        .wrapper .right { -ms-flex-order:0; order: 0; }
        .wrapper .left , .wrapper .right { width: 50%;}
        
        .wrapper .left { position: fixed; right: 0;  height: 100vh; background: url("../img/bg.jpg") center/cover no-repeat; display: flex; align-content: center; justify-content: center; padding: 3.0rem; flex-wrap: wrap;}
        .wrapper .left img { width:auto; height: 100%;}
		.wrapper .left p { background-color: transparent; }
        
        .wrapper .right .text-block { height: 100vh; width: 100%; padding: 0; display: flex; flex-direction: column; align-content: center; justify-content: center;}
        .wrapper .right .text-block h1 .title { font-size: 2.0rem;}
    }

.btn { width: 100%; background-color: #FBB03B; color: #FEFEFE; padding: 0.25rem; text-align: center; font-size: 1.0rem; font-weight: 400; border: solid 2px #FBB03B; position: relative; transition: 0.8s; margin-top: 0;}
.btn a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; text-indent: -9999px;}
.btn:hover { background-color: transparent; color: #FBB03B;}

ul.slick li { display: inline-block; width:20%; margin: 0; padding: 0; position:relative; padding-top: 20%;}
ul.slick li img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0;}

/***店舗情報***/
.shop .venue { text-align: center; font-size: 1.6rem; font-weight: 500; }
.shop .venue span { font-size: 1.0rem;}

.shop .info div[class^="col-"] { } 
.shop .info p { width: 100%; margin: 0; margin-bottom: 1.5rem; font-size: 1.2rem; padding:0.5rem 0; border-bottom: dashed 1px #555;}
.shop .info p:last-child { margin-bottom: 0;}
.shop .info p span { font-size: 0.8rem; margin-right: 0.5rem; vertical-align: middle;}
.shop .info p span[class^="icon-"] { font-size: 1.6rem; }
.shop .info p a:hover{ color:#FBB03B; }
    @media(min-width:768px){
        .shop .info p { text-align: left; font-size: 1.0rem; vertical-align: middle; padding:0.25rem 0; }
        .shop .info p span { font-size: 0.8rem;}
        .shop .info p span[class^="icon-"] { font-size: 1.7rem; }
        .shop .info .col-s-5 img { padding-right: 1.0rem;}
    }


/***フッター***/
.footer { width: 100%; margin: 0; padding:1.0rem 0; text-align: center; font-size: 0; }
.footer span { font-size: 4.5rem;}
.footer .copy { font-size: 0.6rem; margin-top: 0.25rem;}