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

@import url('https://fonts.googleapis.com/css?family=Crimson+Text:400,700|Noto+Serif+JP:400,600,700&subset=japanese');

body {margin: 0px; padding: 0px; font-size: 14px; font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, Meiryo, "メイリオ", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif; line-height: 1.7; -webkit-text-size-adjust: none; color: #222; -webkit-font-smoothing: antialiased;}

.mincho {font-family: 'Noto Serif JP', sans-serif;}
.EN {font-family: 'Crimson Text', serif;}

#page-top {position: fixed;bottom: 40px;right: 40px;width: 60px; z-index:400;}
@media screen and (max-width: 736px) {
    #page-top {position: fixed;bottom: 5px;right: 5px;width: 30px; z-index:400;}
}

.clone-nav {position: fixed;top: 0;left: 0;z-index: 2;width: 100%;transition: .3s;transform: translateY(-100%);}
.is-show {transform: translateY(0);}
.clone-nav {text-align: center; width: 100%; background: #222;}
.clone-nav ul#naviH {text-align: center;}
.clone-nav ul#naviH li {list-style: none; text-align: center; display: inline-block;}
.clone-nav ul#naviH li a {list-style: none; display: inline-block; text-align: center; color: #FFF; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; font-size: 17px; line-height: 25px; margin: 0; padding: 10px 20px;}
.clone-nav ul#naviH li a:hover {color: #FFF; background: #2E4791;}

.ratioBox {position: relative;width: 100%;height: auto;}
.ratioBox1-1:before {content: "";display: block;padding-top: 100%; /* 1:1 */}
.ratioBox2-1:before {content: "";display: block;padding-top: 50%; /* 2:1 */}
.ratioBox3-2:before {content: "";display: block;padding-top: 66%; /* 3:2 */}
.ratioBox4-2:before {content: "";display: block;padding-top: 60%; /* 4:3 */}
.ratioBox4-3:before {content: "";display: block;padding-top: 75%; /* 4:3 */}
.ratioBoxInner {position: absolute;top: 0; left: 0;width: 100%;height: 100%;}

#header {width: 200px; z-index: 1; background: #222; padding: 40px 30px; color: #FFF; position: absolute;}
#header h1 {font-size: 12px; text-align: center; font-weight: normal;}
#headLogo h2 {width: 100%; max-width: 200px; margin: 15px auto 5px;}
#headLogo .DT {width: 80%; max-width: 150px; margin: 0 auto 20px;}
#headBtn .tel {font-size: 20px; float: left; font-weight: 600; line-height: 20px;}
#headBtn .tel span {font-size: 70%;}
#headBtn .icon {width: 20px; float: right; margin: 0 0 0 10px;}
@media screen and (max-width: 1060px) {
    #header {padding: 20px 20px;}
}
@media screen and (max-width: 736px) {
    #header {width: 130px; padding: 10px 10px;}
    #header h1 {font-size: 10px;}
    #headLogo .DT {margin: 0 auto 10px;}
    #headBtn .tel {font-size: 16px;}
}
@media screen and (max-width: 500px) {
    #header {width: calc(100% - 20px); padding: 5px 10px; position: relative;}
    #header h1 {text-align: left;}
    #headLogo {width: 250px; margin: 0 auto;}
    #headLogo h2 {width: 120px; margin: 10px 0 5px 0; float: left;}
    #headLogo .DT {margin: 35px 0 10px 10px; width: 120px; float: left;}
    #headBtn {clear: both;}
    #headBtn .tel {font-size: 20px;}
}

ul.headNavi {padding:0; margin: 0; list-style: none;}
.headNavi li {margin: 0; font-family: 'Noto Serif JP', sans-serif;}
.headNavi li span.EN {font-size: 14px; margin-right: 5px;}
.headNavi li a {font-size: 16px; color: #FFF; line-height: 30px; font-weight: bold;}
.headNavi li a:hover  {color: #CC0000; display: block;}
.drawer-navbar {display: none;}
@media screen and (max-width: 736px) {
    ul.headNavi {display: none;}
    .drawer-navbar {display: inherit;}
    .drawer-menu {background:#222;}
    .drawer-navbar-header button {background:#222;}
    .drawer-navbar-header button:hover {background:#222;}
    .drawer-menu ul { padding:0; margin: 0;}
    .drawer-menu li { border-bottom:1px solid #333; border-top: 1px solid #000; width: auto; text-align: left; display: block; border-left: none; padding: 0 10px; font-family: 'Noto Serif JP', sans-serif;}
    .drawer-menu li:nth-child(3){margin-right: 0; border-right: none; width: auto;}
    .drawer-menu li:nth-child(6){border-right: none;}
    .drawer-menu li a.drawer-menu-item {text-align: left; font-size: 16px; font-weight: 600; color: #FFF; line-height: 50px;}
    .drawer-menu li a.drawer-menu-item span {font-size: 14px; margin-right: 5px;}
    .drawer-menu li a.drawer-menu-item:hover  {color: #CC0000; display: block;}
    .drawer-menu li.spnav {display: block;}
    .drawer-hamburger-icon{position:relative;display:block;margin-top:0; background: #CCC;}
    .drawer-dropdown-menu li { border-bottom:1px solid #71c212; border-top: 1px solid #54910d; line-height:50px;}
    .drawer-dropdown-menu a { color: #FFF; width: 96%; display: block; padding: 5px 2%; background: #5A9B0E;}
}

.footBtn {width: 50%; float: left;}
.footBtn .inner {width: 80%; max-width: 240px; margin: 50px auto; padding: 30px;}
.footBtn h2 {font-size: 20px; text-align: center; margin-bottom: 10px;}
#footBtnL {background: url("image/btm_bg1.jpg") no-repeat center; background-size: cover; color: #FFF;}
#footBtnR {background: url("image/btm_bg2.jpg") no-repeat center; background-size: cover;}
#footBtnL .inner {background: rgba(22,22,22,0.7);}
#footBtnR .inner {background: rgba(255,255,255,0.7);}
@media screen and (max-width: 736px) {
    .footBtn .inner {width: calc(80% - 40px); margin: 50px auto; padding: 20px;}
}
@media screen and (max-width: 500px) {
    .footBtn {width: 100%; float: left;}
}

footer {padding: 30px 0 30px; background: #432C22;}
#foot {border-bottom: 1px solid #FFF; padding: 0 0 15px; color: #FFF; line-height: 20px;}
#foot h2 {width: 140px; float: left; margin-right: 20px;}
#foot .address {float: left; font-size: 12px;}
#foot .tel {font-size: 20px; font-weight: 600; line-height: 20px;}
#foot .tel span {font-size: 70%;}
#foot .icon {width: 20px; float: right; margin: 40px 0 0 10px;}
#footNavi {float: left; margin-top: 30px;}
#footNavi li {margin: 0; font-family: 'Noto Serif JP', sans-serif; display: inline-block; margin-right: 1em;}
#footNavi li span.EN {font-size: 14px; margin-right: 5px;}
#footNavi li a {font-size: 16px; color: #FFF; line-height: 30px; font-weight: bold;}
#footNavi li a:hover  {color: #CC0000; display: block;}
.footer {float: right; padding: 40px 0 0; color: #FFF; font-size: 12px;}
.footer a {color: #FFF;}
@media screen and (max-width: 1290px) {
    #footNavi {margin-top: 20px;}
    .footer {padding: 0;}
}
@media screen and (max-width: 830px) {
    #footNavi li a {font-size: 14px;line-height: 1.5;}
    #footNavi li span.EN {font-size: 12px;}
}
@media screen and (max-width: 500px) {
    #foot h2 {float: none; margin-bottom: 5px;}
    #foot .address {float: none;}
    #foot .icon {margin: 0 0 0 10px;}
}

#headSlider {border: 25px solid #432C22; position: relative; z-index: 0; width: calc(100% - 50px);}
#movie {width:100%; padding-bottom: 56.25%; height:0px;position: relative;}
@media screen and (max-width: 1155px) {
    #headSlider {border: 10px solid #432C22; width: calc(100% - 20px);}
}
#headConcept,#headMenu,#headNews,#headShop {height: 400px;}
#headConcept {background: url("image/head_concept.jpg") no-repeat center; background-size: cover;}
#headMenu {background: url("image/head_menu.jpg") no-repeat center; background-size: cover;}
#headNews {background: url("image/head_news.jpg") no-repeat center; background-size: cover;}
#headShop {background: url("image/head_shop.jpg") no-repeat center; background-size: cover;}

.container {width: 95%; max-width: 1290px; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0;}
.widecontainer {width: 97%; max-width: 1322px; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; z-index: 1;}
.smallcontainer {width: 95%; max-width: 770px; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0;}
.mlr15 {margin-left: 1%; margin-right: 1%;}
.col1 {width: 98%; margin-left: 1%; margin-right: 1%;}
.col2 {width: 48%; margin-left: 1%; margin-right: 1%; float: left;}
.col2L {width: 49%; margin-right: 1%; float: left;}
.col2R {width: 49%; margin-left: 1%; float: left;}
.col3 {width: 31.33%; margin-left: 1%; margin-right: 1%; float: left;}
.col3mana {width: 30.33%; margin-left: 1.5%; margin-right: 1.5%; float: left;}
.col3mn {width: 33.33%; float: left;}
.col3mr {width: 63.66%; margin-right: 3%; float: left;}
.col4,.col4bb {width: 23%; float: left;}
.col4 {margin: 0 1% 20px;}
.col4bb {border-bottom: 1px solid #222; margin: 0 0 20px; padding: 0 1.5% 20px;}
.col7 {width: 63.66%; float: left; margin: 0 1% 20px;}
@media screen and (max-width: 800px) {
    .col3 {width: 98%; float: none;}
    .col7 {width: 98%; float: none;}
}
@media screen and (max-width: 500px) {
    .col2,.col2L,.col2R {width: 100%; float: none; margin-left: 0; margin-right: 0;}
    .col4,.col4bb {width: 47%; float: left;}
}

#sliderWrap {margin: 0 auto 40px; overflow: hidden;}
#slider {margin: 0 auto; padding: 30px 0; background: url("image/dot.png");}
.slide-item {margin: 0 10px;}
.slick-prev:before,
.slick-next:before {font-family: 'slick';font-size: 20px;line-height: 1;opacity: .75;color: white;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
#thumbnail_slider {width: 100%; max-width: 1230px; margin: 0 auto;}
@media screen and (max-width: 960px) {
    #slider {padding: 10px 0; }
    .slide-item {margin: 0 5px;}
}

.ttlNum {font-weight: 700; font-size: 80px; line-height: 1;}
.ttlNum span {font-size: 50%;}
h2 {font-size: 30px; font-weight: 600; margin-bottom: 10px;}
@media screen and (max-width: 600px) {
    .ttlNum {font-weight: 700; font-size: 60px; line-height: 1;}
}
@media screen and (max-width: 500px) {
    .ttlNum {font-weight: 700; font-size: 50px; line-height: 1;}
    h2 {font-size: 24px;}
}

#topAbout {position: relative; margin-top: -195px; background: url("image/bg_btm.jpg") repeat-x bottom; z-index: 1;}
#topAbout .caeImg {position: relative;}
#topAbout .carImgL {width: 46.5%; float: left; margin-left: 7.5%; position: relative; z-index: 1;}
#topAbout .carImgR {width: 46.5%; float: right; margin-right: 7.5%; position: relative; margin-top: -300px; z-index: 0;}
#topAbout .sideL {width: 400px; position: absolute; z-index: 2;}
#topAbout .sideR {width: 300px; position: absolute; z-index: 2; right: 0;}
#topAbout .inner {position: relative; margin-top: -55px; z-index: 100;}
#topAbout .txt {width: 46.5%; float: left; font-size: 16px;}
#topAbout .txt h2,#topShop .txt h2 {color: #432C22;}
#topAbout .photo {width: 50%; float: right; margin-top: -70px; z-index: 0;}
#topAbout .btn,#topMenu .btn,.topNews .btn,#topShop .btn  {width: 200px; text-align: center; z-index: 5;}
@media screen and (max-width: 1155px) {
    #topAbout {margin-top: -175px;}
    #topAbout .caeImg {}
    #topAbout .txt {width: 55%;}
    #topAbout .photo {width: 42.5%; margin-top: 20px;}
}
@media screen and (max-width: 1060px) {
    #topAbout {margin-top: -130px;}
    #topAbout .carImgR {margin-top: -230px;}
    #topAbout .sideL {width: 30%;}
    #topAbout .sideR {width: 25%;}
}
@media screen and (max-width: 945px) {
    #topAbout {margin-top: -50px;}
    #topAbout .carImgL {width: 51%; margin-left: 3%;}
    #topAbout .carImgR {width: 51%;; margin-right: 3%;}
    #topAbout .txt {width: 46.5%;}
    #topAbout .photo {width: 50%;}
}
@media screen and (max-width: 845px) {
    #topAbout {margin-top: 0px;}
}
@media screen and (max-width: 736px) {
    #topAbout {margin-top: -70px;}
    #topAbout .caeImg {margin-top: 70px;}
    #topAbout .carImgL,#topAbout .carImgR {width: 50%; margin-left: 0; margin-right: 0; margin-top: 0;}
    #topAbout .inner {margin-top: -25px;}
    #topAbout .txt {width: 100%;}
    #topAbout .photo {width: 55%; margin-top: -120px;}
    .topNews .btn {width: 100%;}
}
@media screen and (max-width: 500px) {
    #topAbout .sideL {width: 40%;}
    #topAbout .sideR {width: 25%;}
    .ttlNum {font-weight: 700; font-size: 50px; line-height: 1;}
    #topAbout .inner {margin-top: 0px;}
    #topAbout .photo {width: 100%; margin-top: -40px;}
    #topAbout .txt {font-size: 14px;}
    #topAbout .btn,#topMenu .btn,#topShop .btn  {width: 100%; text-align: center;}
}
@media screen and (max-width: 380px) {
    .ttlNum {font-size: 40px;}
}

#topMenu {background: #432C22;}
#topMenu .photo {width: 50%; float: left;}
#topMenu .txt {width: 37.5%; float: left; color: #FFF; font-size: 16px;}
#topMenu .inner {padding: 50px;}
#topMenu .side {width: 12.5%; float: left;}
#topMenu .btm {display: none;}
@media screen and (max-width: 1410px) {
    #topMenu .inner {padding: 30px 20px;}
}
@media screen and (max-width: 1300px) {
    #topMenu .photo {width: 62.5%;}
    #topMenu .side {display: none;}
    #topMenu .btm {display: inherit;}
    #topMenu .btm .photo {width: 20%; float: left;}
}
@media screen and (max-width: 920px) {
    #topMenu .photo {width: 100%;}
    #topMenu .txt {width: 100%;}
}
@media screen and (max-width: 500px) {
    #topMenu .txt {font-size: 14px;}
}

.topNews {margin-bottom: 20px;}
.topNews .photo {position: relative; z-index: 0;}
.topNews .date {width: 100px; line-height: 30px; font-size: 14px; text-align: center; position: relative; margin-top: -30px; margin-bottom: 10px; background: #FFF;}
.topNews h2 {font-size: 16px; margin: 5px 0;}
.topNews .txt {margin-bottom: 10px;}

#topInsta {width: 80%; max-width: 265px; margin: 0 auto 20px;}
#instaImg {width: 215px; margin: 0 auto 10px;}
.instagram  {list-style: none; margin: 0; padding: 0; width: 100%; overflow: hidden;}
.instaInner {width: 16.666%; float: left;}
@media screen and (max-width: 500px) {
    .instaInner {width: 33.333%; float: left;}
}

#topShop {background: rgba(67,44,34,0.2); position: relative; padding: 30px 0;}
#topShop .sideL {width: 240px; position: absolute; z-index: 2; bottom: 0;}
#topShop .sideR {width: 350px; position: absolute; z-index: 2; right: 0; bottom: 0;}
#topShop .inner {border: 5px solid #432C22;background: #FFF; margin: 0 20px;}
#topShop .txt {width: 75%; float: left; margin: 0 5% 0 20%; padding: 30px 0; font-size: 16px; position: relative; z-index: 5;}
#topShop .photo,#topShop .half {width: 50%; float: left;}
#illustR {display: none;}
#topShop .illust {width: 20%; float: left;}
#topShopSlide {width:100%; padding-bottom: 75%; height:0px;position: relative;}
#topShop .btn {float: right;}
@media screen and (max-width: 1585px) {
    #topShopSlide {padding-bottom: 100%;}
    #topShop .txt {width: 90%; margin: 0 5% 0 5%;}
    #topShop .txt p {background: rgba(255,255,255,0.5); padding: 10px; text-shadow: 1px 1px 1px #FFF,1px 1px 1px #FFF;}
}
@media screen and (max-width: 1190px) {
    #topShopSlide {padding-bottom: 100%;}
    #topShop .txt p {background: none; padding: 0;}
    #illustL {display: none;}
    #illustR {display: inherit;}
}
@media screen and (max-width: 960px) {
    #topShop .sideL {width: 25%;}
    #topShop .sideR {width: 30%;}
    #topShop .photo,#topShop .half {width: 100%; float: left;}
    #topShopSlide {padding-bottom: 75%;}
}
@media screen and (max-width: 500px) {
    #topShop {padding: 15px 0;}
    #topShop .inner {margin: 0 10px;}
    #topShop .txt {font-size: 14px;}
}

#topAccess {background: url("image/bg_wh.jpg") repeat-x top #432C22; color: #FFF; padding-bottom: 50px;}
#topAccess .map {border: 5px solid #432C22; margin-bottom: 30px;}
#topAccess .halfL,#topAccess .halfR {width: 50%; float: left; font-size: 16px;}
#topAccess dt {float: left; clear: left; margin-right: 0.5em; width: 80px; }
#topAccess dd {float: left; margin-left: 1em; }
#topAccess .logo {width: 70%; max-width: 400px; margin: 30px auto;}
#topAccess span.br {margin-left: 1em;}
@media screen and (max-width: 1155px) {
    #topAccess span.br {display: block; margin-left: 0em;}
}
@media screen and (max-width: 960px) {
    #topAccess .halfL {width: 60%;}
    #topAccess .halfR {width: 40%;}
}
@media screen and (max-width: 770px) {
    #topAccess .halfL {width: 100%;}
    #topAccess .halfR {width: 100%;}
}
@media screen and (max-width: 500px) {
    #topAccess dt {float: none;}
    #topAccess dd {float: none; margin-left: 1em; }
}

.ImgR {width: 50%; float: right; margin: 0 0 30px 30px;}
.ImgR .half,.ImgL .half {width: 50%; float: left;}
.ImgL {width: 50%; float: left; margin: 0 30px 30px 0;}
.photoArea .inner {width: 12.5%; float: left;}
@media screen and (max-width: 1600px) {
    .photoArea .inner {width: 25%;}
}
@media screen and (max-width: 800px) {
    .photoArea .inner {width: 50%;}
}
@media screen and (max-width: 680px) {
    .photoArea .inner {width: 50%;}
    .ImgR,.ImgL {width: 100%; float: none; margin: 0 0 20px;}
}

.menu h3 {background: #432C22; color: #FFF; padding: 10px 20px; font-size: 18px; text-align: left;}
.menu .border {border-bottom: 1px solid #432C22; font-size: 16px; padding: 10px 0;}
.menu .name {float: left;}
.menu .price {float: right; font-size: 18px;}
.menu .price span {font-size: 80%;}
.menu .txtL {width: 40%; float: left; margin-left: 1%; margin-right: 1%; background: rgba(67,44,34,0.2);}
.menu .txtR {width: 40%; float: right; margin-left: 1%; margin-right: 1%; background: rgba(67,44,34,0.2);}
.menu .inner {padding: 10px 20px;}
.menu .photoL {width: 56%; float: left; margin-left: 1%; margin-right: 1%;}
.menu .photoR {width: 56%; float: right; margin-left: 1%; margin-right: 1%;}
.menu .half {width: 50%; float: left;}
@media screen and (max-width: 800px) {
    .menu .txtL,.menu .txtR,.menu .photoL,.menu .photoR {width: 98%;}
}

#comp .name {width: 30%; float: left; border-bottom: #432C22 1px solid; text-align: center; padding: 10px 0;}
#comp .detail {text-align: left; float: left; border-bottom: #999 1px solid; width: 65%; padding: 10px 2.5%;}

.concept h3 {position: relative;padding: 0.6em;background: #432C22;font-size: 18px; color: #FFF; display: inline-block; margin-bottom: 25px;}
.concept h3:after {position: absolute;content: '';top: 100%;left: 30px;border: 15px solid transparent;border-top: 15px solid #432C22;width: 0;height: 0;}

#gallery {width: 100%; margin: 0 auto; padding: 0 0 50px;}
#gallery .sp-selected-thumbnail {border: 4px solid #222;}
.sp-slide {position: relative;}
.sp-slide .fa {position: absolute; bottom: 15px; right: 15px; margin:0;padding:0;color: rgba(255,255,255, 0.8);font-size: 25px;}
.sp-slide img {width: 100%;}

.carousel ul li img {
	width: calc(50vw - 20px);
    margin: 0px 5px 0 5px;
}
.slick-slider .slick-track, .slick-slider .slick-list {
    transform: translate3d(0, 0, 0);
}
.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
    margin-bottom: 30px;
}
.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
.slick-initialized .slick-slide {
    display: block;
}
.slick-slide img {
    display: block;
}

/* Dots */
.slick-dotted.slick-slider {
	/*
    margin-bottom: 30px;
	*/
}

.slick-dots {
    position: absolute;
    bottom: auto;
    display: block;
    width: 100%;
    padding: 0 0 15px;
    margin: 0 0 50px;
    list-style: none;
    text-align: center;
	background-color: #333;
}
.slick-dots li {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    padding: 0;
}
.slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus {
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
    opacity: 1;
}
.slick-dots li button:before {
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    content: "●";
    text-align: center;
    opacity: 0.25;
    color: #FFF;

}
.slick-dots li.slick-active button:before {
    opacity: 0.75;
    color: #FFF;
}
/*
.slick-dots li button:before {
    font-size: 12px!important;
}
*/

.detailTtl h3 {font-size: 24px; line-height: 40px; font-family: 'Noto Serif JP', sans-serif; border-bottom: 2px solid #222;}
#newsW .date {background: #222; color: #FFF; margin-bottom: 20px; padding: 5px 20px; display: inline-block;}