@charset "utf-8";
@import url('//fonts.googleapis.com/css?family=Work+Sans:400,500,600,700');

.spnav .navi-reservation{display: none}
.reservation .title{display: none}

/*.spnav .navi-instagram{display: none}
.footer-instagram{display: none}*/

html{font-size:10px;}
body{
background:#FFF;
margin:0;
padding:0;
-webkit-text-size-adjust: none;
font-size:2.2rem;
line-height:1.3em;
font-family: 'Work Sans', "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "Hiragino Kaku Gothic Pro" , "ヒラギノ角ゴ Pro W3" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
font-style: normal;
}

a:hover img.alpha{
	opacity:0.8;
	filter: alpha(opacity=80);
	-ms-filter: "alpha( opacity=80 )";
}
a{color:#000;text-decoration: none;}
a .underline{text-decoration: underline;}
h1,
h2,
h3{
margin:0;
font-weight: 400;
letter-spacing: 0.03em;
}
ul {
	padding:0;
	margin:0;
}
ul li{
	list-style: none;
	padding:0;
	margin:0;
}
p{margin:0;padding:0;}

#container{
	width: 1280px;
	margin:0 auto;
	position: relative;
}


/* header */

.header{
	text-align: center;
	padding:7.5rem 0 9rem;
}

.header h1,
.header h2{
	padding:0;
	margin:0;
}
.header h1{
	padding-top:6.5rem;
}



.about{padding:9rem 0;}
.about .j {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
.about .block{display: flex;justify-content: center; flex-flow: row-reverse}
.about .j{margin-right:125px;}
.about .j h3{font-size: 2.8rem; font-weight: 700; margin-left:40px;}
.about .j p{font-size: 2.2rem; line-height: 2em;white-space: nowrap;}
.about .e {width:56.25%; margin:80px auto 0;}
.about .e h3{font-size: 3.2rem; font-weight: 500}
.about .e p{font-size: 2rem; line-height: 1.8em; margin-top:30px;}

.image,
.reservation{
    border-top:6px solid #27548D;
    border-bottom:6px solid #27548D;
    position: relative;
}

.reservation .title{position: absolute; right:120px; top:50px;}
.reservation .reservation-image img{display: block;}

.information .inner{display: flex;justify-content: space-between;}
.information .inner .map{border-left:6px solid #27548D;}
.information .inner .map img{display: block;}
.information .inner .info{flex:1; padding-top:57px; padding-left:285px; position: relative;}
.information .inner .info h2{position: absolute; left:110px; top:57px;}

.information .inner .info p+h3{margin-top:4rem;}
.information .inner .info p{margin-top:0.8rem; line-height: 1.2;}
.information .inner .info h3{font-size:2rem; font-weight: 500;}
.information .inner .info h3 span{font-size:2.4rem; font-weight: 700; margin-right:1rem; color: #27548D;}


/*footer*/

.footer{background-color: #27548D; position:relative; }
.footer-logo{padding:50px 120px;}
.footer-instagram{position:absolute; right:120px; top:54px;}

/*.spnav*/
.spnav,
.spnav .block,
.spnav .block .inner{
    height: 100%;
}
.spnav{
    position: fixed;
    z-index:10000;
    pointer-events: none;
}
.spnav .block{
    width:1280px;
    right:0;
}
.spnav .block{font-size: 2.8rem;}
.spnav .block .inner{
    display: none;
    position: absolute;
    right:0;
    width: 410px;
    pointer-events: auto;
}
.spnav .block .inner::before {
    position: absolute;
    top:0;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: #0F387A;
    opacity: 0.85;
    z-index: -1;
}

.spnav .block li{padding:3rem 0 1rem 3rem; }
.spnav .block li a{color: #fff; display: inline-block;}
.spnav .block li span{display: block;font-size: 2.4rem;}

.spnav.active .btn-open{display: none;}
.spnav .btn-open{position: absolute; right:24px; top:30px; cursor: pointer; pointer-events: auto; padding:0 20px;}
.spnav .btn-close{position: absolute; right:23px; top:30px; cursor: pointer; pointer-events: auto; padding:0 20px;}

.spnav .btn-open,
.spnav .btn-close{
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}

/* Dots */

.slick-dots
{
    position: absolute;
    bottom: 15px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 20px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    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: "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "Hiragino Kaku Gothic Pro" , "ヒラギノ角ゴ Pro W3" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
    font-size: 1rem;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '●';
    text-align: center;

    color: #fff;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    color: #27548D;
}


/*common*/

.ss{font-size:0.7em; display: inline-block;}
.sss{font-size:0.85em; display: inline-block;}
.ll{font-size:1.2em; display: inline-block;}
.lll{font-size:1.1em; display: inline-block;}

.sp,.sp2{display: none !important;}
.pc{display: inline-block !important;}
.pc2{display: block !important;}


::-moz-selection { color: #888;  background: #EEE; }
::selection      { color: #888;  background: #EEE; }