@charset "utf-8";
/* ===================================================
	Base CSS
====================================================== */
body {
        min-height: 100vh; background:url(../img/bg.jpg) #f4f3f1; color: #231815; text-align: center;
        /*font-size: 15px;*/ font-weight: normal; line-height: 1.7;
        font-family: sans-serif;
        -webkit-text-size-adjust: 100%;
        display: -webkit-flex; display: -ms-flex; display: flex;
        -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;
}

input,
select,
textarea { font-size: 13px;}

div { -webkit-box-sizing: border-box; box-sizing: border-box;}

a { color: #000; text-decoration: none;}
a:hover { color: #000; text-decoration: underline;}
a:hover img { opacity: 0.75;}

#lineup-font-size-sampler { bottom: 0; left: 0;}
.fixed { width: 100%; position: fixed; top:0; left: 0; z-index: 999;}
iframe[name="google_conversion_frame"] { position: absolute; bottom: 0; left: 0;}


/*footer 共有*/
.tel-link { display: block; }
.reservation .btn{
        background-image: -moz-linear-gradient( 0deg, rgb(219,100,89) 20%, rgb(233,123,113) 47%, rgb(238,155,146) 74%, rgb(228,110,93) 100%);
        background-image: -webkit-linear-gradient( 0deg, rgb(219,100,89) 20%, rgb(233,123,113) 47%, rgb(238,155,146) 74%, rgb(228,110,93) 100%);
        background-image: -ms-linear-gradient( 0deg, rgb(219,100,89) 20%, rgb(233,123,113) 47%, rgb(238,155,146) 74%, rgb(228,110,93) 100%);
        box-sizing: border-box;
        color:#fff;
        display: block;
        font-size:1.1em;
        height: 100%;
        padding:20px 0; line-height: 1; letter-spacing: 1px;
        z-index: 100;
        text-decoration: none; width: 170px; }
.reservation .btn:hover{opacity: 0.8;}



@media screen and (max-width: 600px) {
        body,
        input,
        select,
        textarea { font-size: 16px;}

        body { min-width: 0;}
}


/* ---------------------------------------------------
	Base Layout
------------------------------------------------------ */
#header_wrap,
#nav_wrap,
#contents_wrap,
#footer_wrap {
	padding: 0; margin: 0;}


#gnav ul,
#contents_wrap,
#footer {
  padding: 0; margin: 0 auto;
	-webkit-box-sizing: border-box; box-sizing: border-box;}

/*
	大枠のレイアウトにflexboxを使用しているので、
	orderを使用してheaderと見出しの位置を入れ替えたりもできます。

	例）#main_imgをheaderの上に持って来るように設定
	#main_img { order: -1;}
*/


@media screen and (max-width: 600px) {
        #header,
        #gnav ul,
        #contents_wrap,
        #footer { width: 100%;}
}


/* ---------------------------------------------------
	Header
------------------------------------------------------ */

#header { background:url(../img/bg.jpg) #f4f3f1; height: 60px; width:100%; position: fixed; z-index: 1000;
        box-shadow: 0px 0px 6px rgba(0,0,0,0.2); 
        -webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.2);
        -moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.2);}
#header h1 { color:#abb267; font-size:12px; right:250px; top:1px; position:absolute; z-index: 1011;}
#header h1 span {/* display: block;*/}
#header #logo { background:url(../img/bg.jpg) #f4f3f1; display: block; padding:40px 0 0; height:165px; width:235px; 
        box-sizing: border-box;
        box-shadow: 0px 0px 6px rgba(0,0,0,0.2);
        -webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.2);
        -moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.2);
        transition: all 0.7s; position: fixed; z-index: 1010; }
#header #logo::after { 
        content:""; display: block; height:105px; width:130px; 
        background:url(../img/logo_bg.png) no-repeat; background-size:125px auto; 
        left:235px; top:10px; position:absolute; transition: all 0.7s; z-index: 1010; }
#header #logo img { width:188px; transition: all 0.7s; }
#header #logo.mini{ height:100px; padding:20px 0 0; width:180px; }
#header #logo.mini img { width:135px; }
#header #logo.mini::after { height:60px; width:80px; background-size:80px auto; left:180px; top:18px; }

#h_nav { position:absolute; height:60px; right:0; width:240px;}
#h_nav>ul { right:0; height:60px; display:inline-flex;}
/*#h_nav>ul li:nth-of-type(1),
#h_nav>ul li:nth-of-type(2),*/
#h_nav .acc{ display: none;}
#h_nav .reservation { height:100%; position: absolute; right:70px; top: 0;}
#h_nav .reservation img { display: none;}
#h_nav .reservation .btn { cursor: pointer;}
#h_nav .tel-link { display: none;}
#h_nav .tel-link img { margin:18px 15px 0 ; width:175px;}


.menu-trigger { background:#000; position:absolute; left:0; width: 80px; height: 100%; margin: 0 1px; z-index: 9999; display: none;}
/*.menu-trigger,*/
.menu-trigger span { display: inline-block; transition: all .4s; box-sizing: border-box;}
.menu-trigger span { position: absolute; left: 0; width: 50%; height: 3px; margin:0 25%;background-color: #f4f3f1; }
.menu-trigger span:nth-of-type(1) { top: 15px; }
.menu-trigger span:nth-of-type(2) { top: 25px; }
.menu-trigger span:nth-of-type(3) { top: 35px; }
.menu-trigger span:nth-of-type(4) { bottom: 20px; background: none; color: #000; }
.menu-trigger span:nth-of-type(4):before { content: "MENU"; font-size: 11px; color:#f4f3f1; }
.menu-trigger.active span:nth-child(1) { top: 25px; -webkit-transform: rotate(210deg); -moz-transform: rotate(210deg); transform: rotate(210deg); }
.menu-trigger.active span:nth-child(2) { width: 0; left: 50%; }
.menu-trigger.active span:nth-child(3) { top: 25px; -webkit-transform: rotate(-210deg); -moz-transform: rotate(-210deg); transform: rotate(-210deg) ; }
.menu-trigger.active span:nth-of-type(4):before { content: "CLOSE"; font-size: 11px;color:#f4f3f1; }

.lang_nav { position: absolute; right:0; width:70px; z-index: 1001;}
.lang_nav p { font-size:18px; text-transform:uppercase; line-height: 1; padding:20px 16px 10px 16px; }
.lang_nav p::after { content:"▼";font-size:12px; }
.lang_nav p:hover {transition: all 0.7s; cursor: pointer;}
.lang_nav ul { background: url(../img/bg.jpg); border-right:1px solid #ccc; border-left:1px solid #ccc;
        display: none; position:absolute; top:60px ; right:0; width:200px; z-index: 1002;}
.lang_nav li {}
.lang_nav li a { border-bottom:1px solid #ccc; color:#000; display: block; padding:15px; text-decoration: none; }
.lang_nav li a:hover { background:rgba(0,0,0,0.08); transition: all 0.7s; }
.lang_nav.active ul{ display: flex; flex-direction: column; }

@media screen and (max-width: 1100px) {
        #header #logo { padding:40px 0 0; height:140px; width:210px;}
        #header #logo img { width:160px;}
        #header #logo::after { height:80px; width:90px; background-size:90px auto; left:210px; top:55px;}
        #header h1 { font-size:10px; left:210px;}
        #h_nav {background:url(../img/bg.jpg) #f4f3f1;  width:320px; }
        .menu-trigger { display: block;}
}
@media screen and (max-width: 800px) {
        #header { display: block; height:100px; position: relative;}
        #header::before {content:""; display: block; height:75px; width:75px; 
        background:url(../img/logo_bg.png) no-repeat; background-size:75px auto; 
        left:20%; top:0; position:absolute;
        -webkit-transform: rotate(90deg); transform: rotate(90deg);}

        #header h1 { position: relative; left:0; top: 2px; text-align: center; z-index: 999;}
        #header #logo { background: none; box-shadow:none; margin:0 auto; height:100px; padding:20px 0 0; position: relative; transition:none; width:100%; z-index: 999;}
        #header #logo a { display: block; width:100%;}
        #header #logo::after{content:none;}
        #header #logo img { transition:none; width:150px;}
        #header #logo.mini img { width:150px;}
        #h_nav{ background:url(../img/bg.jpg) #f4f3f1; position: fixed; bottom:0; width:100%;}
        #h_nav>ul { left:0; height:60px; display:inline-flex; position: relative; width:100%; }
        #h_nav>ul li { height:100%; position: absolute; width:20%; border-left:1px solid #ccc; box-sizing: border-box; }
        #h_nav>ul li img { height:45px; margin:8px auto 0 auto;}
        #h_nav>ul li.reservation {  width:40%; right:20%; }
        #h_nav>ul li:nth-of-type(1){ background:#666; left:20%;}
        #h_nav>ul li:nth-of-type(2){ right:0;}
        #h_nav>ul li.reservation .btn { padding: 0; font-size:0; text-indent: -9999px; width:100%;}
        #h_nav>ul li.reservation .btn img {display: block;}
        #h_nav .tel-link { display: block;}
        #h_nav .tel-link img { margin:8px auto 0 auto; width:auto; height:45px;}
        #h_nav .lang_nav { display: none;}
        #h_nav .acc {  background:#666; border-left:none; display: block; left:0;}
        .menu-trigger { right:0; left:0; margin:0; width:100%;}
        
        .lang_nav { right:5px; top:40px; z-index: 1000;}
        .lang_nav p { font-size:14px;}
}
@media screen and (max-width: 600px) {
        #header { position: relative;}
        #header::before { left:5%; }
        .menu-trigger span:nth-of-type(4):before { font-size: 9px;}
}
@media screen and (max-width: 375px) {
        #header #logo { padding-top:10px;}
        #header h1 span { display: block; margin-bottom:-5px;}
        .menu-trigger span { width: 70%; margin:0 15%;}
}



/* ---------------------------------------------------
	G-nav
------------------------------------------------------ */
.close_menu { display: none; }
#gnav { width:620px; position: absolute; top:17px; right:240px; z-index: 1001; }
#gnav ul { display: flex; }
#gnav li {}
#gnav li a { display: block; padding:8px 20px; transition: all 0.7s;}
#gnav li a:hover { background:rgba(0,0,0,.2); text-decoration: none;}
#gnav li#gn_05 { display: none;}

@media screen and (max-width: 1100px) {
        #gnav { background: url(../img/nav_bg.jpg); background-size:auto; box-sizing: border-box; overflow: auto;
                padding: 0 30px 0 15px; width: 405px; visibility: hidden; position: fixed; top: 60px; right: 0; z-index: 1001;
                transition: all 0.7s; transform: translate(400px); }
        #gnav ul {flex-direction: column; margin-bottom:20px; text-align: left;}
        #gnav li:not(.s_menu){ border-bottom:1px solid #ddd; position: relative;}
        #gnav li a { font-size:1.1em; font-weight: bold; padding:20px; text-decoration: none; display: block; width:100%; box-sizing: border-box;}
        #gnav li:not(.s_menu):hover { background:rgba(0,0,0,0.05);}
        #gnav li:not(.s_menu) a::before { content: ""; display: block; background:url(../img/list.png)no-repeat; background-size:5px auto; 
                height:13px; width:5px; position: absolute; top: 27px; left: 0; }
        #gnav.open { padding: 0 3%; height:calc(100% - 60px); overflow: auto; position: fixed; top: 60px; right: 0; 
               transform: translate(0); opacity: 1; visibility: visible; width: 405px; z-index: 1001;
               box-shadow: 0px 0px 6px rgba(0,0,0,0.2);
              -webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.2);
              -moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.2); }
        #gnav_inner { padding:50px 0 ; position: relative;}
        #gnav_inner::before{ 
                background: #000; color: #f4f3f1; content: "MENU"; display: block; font-size: 12px;
                margin-bottom:15px; letter-spacing: 0.5em; padding:6px 0; width:100%; }
}
@media screen and (max-width: 800px) {
        #gnav { position: fixed; top: 0; left: 0; transform: translate(-100%); width: 100%;}
        #gnav.open { position: fixed; top: 0; left: 0; width: 100%;}
        #gn_10 { border:1px solid #ccc; clear:both; display: block; margin-bottom:20px; width:100%;}
        #gnav li.s_menu ul { display: flex; flex-wrap: wrap; margin:5px 0 2px; }
        #gnav li.s_menu li { border:1px solid #ccc; font-size:13px; margin:3px; text-align: center; width:calc(50% - 8px); width:-webkit-calc(50% - 8px); }
        #gnav li.s_menu li a::before{ content:none;}
        #gnav ul+p .tel-link img { width:200px; }
        #gnav_inner { padding:10px 0 50px 0 ; }
        #gnav_inner::before{ margin-bottom:0; }
        #gnav li#gn_05 { display: block; padding:5px 20px 0 0 ; box-sizing: border-box;}
        #gnav li#gn_05 a:hover { background:none; }
        #gnav li#gn_05 a img { width:50px;}
}


/* ---------------------------------------------------
	Main img
------------------------------------------------------ */
#main_img { padding:0 40px; position: relative; overflow: hidden; height:600px; margin:60px auto 0 auto; width:100%; 
        max-width:1600px; min-width:1100px; z-index: 1; }
#main_img img { display: none; }
#main_img h2 { color:#000; font-size:50px; position: absolute; top:200px; z-index: 20; text-align: center; width:100%;  
        text-shadow:
        #fff 1px 1px 10px, #fff -1px 1px 6px,
        #fff 1px -1px 10px, #fff -1px -1px 6px; }
/*#main_img h2 span { text-transform:uppercase; font-size:14px; display: block; margin-top:20px; letter-spacing: 6px;}
#main_img h2 span::before,
#main_img h2 span::after { content:"-";}*/

@media screen and (max-width: 1100px) {
        #main_img { background-size:cover; height:350px; max-width:100%; min-width:100%; }
        #main_img h2 { top:100px;}
}
@media screen and (max-width: 800px) {
        #main_img { margin-top:0;}
}
@media screen and (max-width: 600px) {
        #main_img { background:none; padding:0; height:auto; width:100%; }
        #main_img img { display: block;}
        #main_img h2 { font-size:30px; top:60px;}
        #main_img h2 span.wbr { display: block;}
        #main_img h2 span:not(.wbr) { display: none;}
}

/* ---------------------------------------------------
	Contents
------------------------------------------------------ */
main h2,
main h3 {text-align: center;}

a.lbtn { border:1px solid #333; color: #000; display: block; padding:10px; margin: 0 auto; 
        text-decoration: none; text-align: center; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); width:15em; }
a.lbtn:hover{ background:#000; color:#f6f5f3; }



/* breadcrumb */
#breadcrumb { margin: 5px 2% 25px 0; width: 98%; font-size: 12px; text-align: right;}
#breadcrumb li { display: inline-block; line-height: 1.6;text-shadow: #fff 1px 1px 3px, #fff -1px 1px 3px, #fff 1px -1px 3px, #fff -1px -1px 3px;}
#breadcrumb li:before { content: '>'; margin: 0 5px;}
#breadcrumb li:first-child:before { display: none;}

@media screen and (max-width: 600px) {
	      #breadcrumb { display: none;}
}

/* section */
section { margin: 0 auto 25px;}

/* ---- 一枚ずつのカルーセル ---- */
.slick-slider {}
.slick-slider .slick-slide { width: 1000px; padding: 0 25px; text-align: center;}
.slick-slider .slick-slide img { max-width: 100%; margin: 0 auto;}
.slick-slider .slick-prev,
.slick-slider .slick-next { width: 40px; height: 80px; z-index: 999;}
.slick-slider .slick-prev:before,
.slick-slider .slick-next:before { color: #000; font-size: 60px; opacity: 0.9; text-shadow: 0 0 10px #fff;}
.slick-slider .slick-prev:hover:before,
.slick-slider .slick-next:hover:before { opacity: 1;}
.slick-slider .slick-prev { margin-left: -590px; left: 50%; right: auto;}
.slick-slider .slick-prev:before { content: "〈";}
.slick-slider .slick-next { margin-left: 510px; left: 50%; right: auto;}
.slick-slider .slick-next:before { content: "〉";}
.slick-dots li button { position: relative; margin-top:-5px; z-index: 999;}
.slick-dots li button:before {font-size:60px!important;}

@media screen and (max-width: 1100px) {
          .slick-slider .slick-slide { padding:0 5px;}
          .slick-slider .slick-prev:before,
          .slick-slider .slick-next:before { font-size: 40px; }
          .slick-slider .slick-prev { margin-left: 0; left: 0; right: auto; }
          .slick-slider .slick-next { margin-left: 0; left: auto; right: 0; }
}

/* lead */
#lead { background:url(../img/lead_bg.png); margin:0 auto 5px auto; width:100%; position: relative; }
/*#lead dl { display: flex; flex-direction : row-reverse; margin:0 auto; padding:50px 100px 30px 0; position: relative; text-align: left; width:1100px; 
        box-sizing: border-box; z-index: 100; }
#lead dl::before { content:""; display: block; position: absolute; }
#lead dt { font-size:40px; 
        -webkit-writing-mode:vertical-rl; -ms-writing-mode:tb-rl; writing-mode:vertical-rl; text-orientation: upright; }
#lead dt span.wbr { display: block;}
#lead dd { padding:0 70px 0 30px; }
#lead dd p { font-size:18px; line-height: 2; }

@media screen and (max-width: 1100px) {
        #lead dl { width:100%;}
}

@media screen and (max-width: 800px) {
        #lead dl { display: block; padding:30px 0;} 
        #lead dl::before { }
        #lead dt { font-size:32px; margin:10px 0 20px 0; text-align: center;
                -webkit-writing-mode:horizontal-tb; -ms-writing-mode:lr-tb; writing-mode:horizontal-tb;} 
        #lead dd { padding:0 2%; }
        #lead dd p { font-size:15px;}
}
@media screen and (max-width: 600px) {
        #lead dl { padding:20px 0;}
        #lead dl::before {}
        #lead dt { margin:10px 0 0 0;}
        #lead dd { padding:30px 2%; }
}

#cnav { background:url(../../img/acc_bg.jpg); padding:40px 0;}
#cnav ul { display: flex; max-width:1100px; margin:0 auto; padding:30px 0; }
#cnav li { font-size:20px; line-height: 1; border-left:1px dashed #999; }
#cnav li:last-of-type { border-right:1px dashed #999;}
#cnav li a {color:#000; display: block; text-decoration: none; padding:50px 0;  width:100%; position: relative; }
#cnav li a::after { content:">";  display: block; height:auto; padding:30px 3px; width:10px; transform: rotate(90deg); text-align: center;
        border:1px solid #333; border-radius: 20px; position: absolute; bottom:-20px; left:50%; margin-left:-5px; font-size:14px;
        transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1); }
#cnav li a:hover::after {background:#000; color:#fff;}
@media screen and (max-width: 600px) {
          #cnav p i::before{ content:none;}
          #cnav p i::after { content:"▼"; background: none; top:0; right:0; font-size:14px; width:auto; height:auto;}
          #cnav ul { flex-direction: column; width:90%; max-width:90%;}
          #cnav li { border-left:0; border-bottom:1px dashed #999; margin-bottom:10px; width:100%;}
          #cnav li:last-of-type { border-right:0;}
}

*/


/* ---------------------------------------------------
	Footer
------------------------------------------------------ */
#pagetop { display:block; position: fixed; bottom: 10px; right: 10px; z-index: 9999;}
#pagetop a { display: block; width: 58px; height: 58px;}

#footer { border-top:3px solid #000; width:100%; }
#footer div.inner{ background: url(../img/nav_bg.jpg); border-bottom:1px dotted #ccc; padding: 50px 0;}

#f_logo { margin:0 auto; font-style: normal; width: 600px;}
#f_logo p { color:#969d14;}
#f_logo p span { color:#c75958; display: block;}
#f_logo p a { display: block; }
#f_logo p a img {display: block; margin: 25px auto 25px; width:180px;}
#f_logo address>span { display:block; }
#f_logo address>span span{ display: inline-block; padding:3px 10px;}

#reserve_col { margin:0 auto; padding: 15px 0 0; width:600px; }
#reserve_col ul { display: flex;}
#reserve_col li:nth-of-type(1) { width:260px; }
#reserve_col li:nth-of-type(3) { width:50px; }
#reserve_col .tel-link img { margin-top:18px; width:220px; }
#reserve_col .tel-link { display: block; margin-bottom:10px;}
#reserve_col .reservation {margin-right:20px; width:280px;}
#reserve_col .reservation .btn { width:100%;}

#f_nav { margin:70px auto 30px; width:600px; }
#f_nav .acc_tit { display: none; }
#f_nav div { padding: 15px 0 0; }
#f_nav ul { display: flex; flex-wrap: wrap; }
#f_nav li { padding: 0 0 0 10px; margin: 0 25px 20px 0; position: relative; text-align: left; box-sizing: border-box;}
#f_nav li::before { content:"";  width: 0; height: 0; display: block; position: absolute; left:0 ; top:7px;
        border-left: 6px solid black;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;}

#copyright { clear: both; color:#969d14; font-size:13px; padding: 15px 5%; text-align: center;}


@media screen and (max-width: 800px) {
        #pagetop { position: relative; bottom: 0; left: 0; width: 100%; text-align: center; z-index: 900;}
        #pagetop a { display: block; width: 100%;}
        #pagetop img { width:45px;}
}
@media screen and (max-width: 600px) {
        #f_logo { width: 90%; }
        #reserve_col { width: 90%; }
        #reserve_col ul { flex-direction: column; }
        #reserve_col li { margin:10px auto;text-align: center;}
        #reserve_col .reservation {margin-right:auto;}
        #f_nav { width:90%;}
        #f_nav .acc_tit { border:1px solid #555; border-radius: 3px; display: block; width: 100%; padding: 2px 25px; margin: 0 0 15px;
                  position: relative; text-align: center;
                  -webkit-box-sizing: border-box; box-sizing: border-box; }
        #f_nav .acc_tit:after { content: ""; height: 0; width: 0; position: absolute; top: 50%; margin: -5px 0 0 10px;
                  border-right: 4px solid transparent; border-top: 10px solid #000; border-left: 4px solid transparent; }
        #f_nav .acc_tit.active:after { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }
        #f_nav div { margin:0 auto; width:90%;}
        #f_nav ul { flex-direction: column;}
}



/* ---------------------------------------------------
	Font
------------------------------------------------------ */
#header,
#gnav,
h2,
h3,
h4,
#reserve_col,
a.lbtn,
.reservation .btn,
#footer div.inner{ font-family: serif;}
/* ---------------------------------------------------
	clear
------------------------------------------------------ */

#header:after,
#nav_wrap:after,
#gnav ul:after,
#contents_wrap:after,
#footer:after { content: "."; display: block; height: 0px; clear: both; visibility: hidden; font-size: 0;}



/* ---------------------------------------------------
	更新履歴
------------------------------------------------------

180205_kamiguchi_更新履歴コメントひな形追加
180228_〇〇_cssを更新したらここに更新履歴を追加していきます。多くなったら上の方は削除。

------------------------------------------------------ */