@charset "UTF-8";
/*
Theme Name: White Base
Author URI: http://design.syofuso.com/
Description: 旅館・飲食店向けのHTMLテンプレートです。
Author: syofuso
Author URI: http://design.syofuso.com/
License: GNU General Public License
License URI: http://www.gnu.org/licenses/gpl.html
*/
/* ヘッダー */
header {
  width: 100%;
  margin: 0 auto;
}

header h1 {
  margin: 5px 0 10px;
}

.header_contact {
	display: inline-block;
	width: 150px;
	height: 44px;
	margin-top: 20px;
	text-align: center;
	text-decoration: none;
	outline: none;
	position: relative;
	background-color: #333;
	border-radius: 4px;
	color: #fff;
	line-height: 44px;
	-webkit-transition: none;
	transition: none;
	box-shadow: 0 3px 0 rgba(0, 0, 0, .05);
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

.header_contact a {
  color: #fff;
}
.header_contact:hover{
opacity: 0.7;
}

.top-number {
	width: 150px;
	height: 38px;
	color: #555;
	text-align: center;
	font-size: 18px;
	font-weight: 600;
	line-height: 38px;
	display: block;
	padding-top: 10px;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 0;
}
#top-head a.tel-link,
#top-head a.tel-link:hover {
  color: #555;
  text-decoration: none;
}

a.top-number{
color: #555 !important;
}

a.top-number:hover {
color: #555!important;
text-decoration: none;
}

.button-contact,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  margin: 30px auto;
  display: inline-block;
  height: 38px;
  padding: 0 30px;
  color: #fff;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid #bbb;
  cursor: pointer;
  box-sizing: border-box;
}

.button-contact:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button-contact:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #fff;
  border-color: #888;
  outline: 0;
  opacity: 0.5;
}
/* トップページ　メイン画像
*****************************************************/

#mainImg img{
width:100%;
height:auto;
}

.post{
margin:0 0 20px 0;
}

  /* パンくずリスト */
  .breadcrumb{ padding: 20px;}
  ol.breadcrumb{list-style-type:none;
  margin-bottom: 0;}
  ol.breadcrumb li{display:inline-block; color:#4e4e4e}
  ol.breadcrumb li a{color:#4e4e4e; vertical-align:middle}
  ol.breadcrumb li a:link{color:#4e4e4e}
  ol.breadcrumb li a:hover{color:#ddd;}
  ol.breadcrumbli a:visited{color:#646766;}
  ol.breadcrumb li:before {
      content: " > ";
}
   ol.breadcrumb li:first-child:before {
      content: none;
}
/* social share */
.social {
  display: table-cell;
}

.social-share {
  display: table-cell;
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.social-share li {
  display: table-cell;
}

ul.social-share li a {
  display: table-cell;
  color: #fff;
  background: #404040;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  border-radius: 2px;
}

ul.social-share li a:hover {
  background: #c52d2f;
  color: #fff;
}

/* header */
#top-head {
  width: 100%;
  margin: 0 auto 0;
  line-height: 1;
  z-index: 999;
}
#top-head a,
#top-head {
  color: #fff;
  text-decoration: none;
}
#top-head .inner {
  position: relative;
}

/* Fixed */
#top-head.fixed {
  margin-top: 0;
  top: 0;
  position: fixed;
  padding-top: 20px;
  height: 105px;
  background: #fff;
  transition: top 0.65s ease-in;
  -webkit-transition: top 0.65s ease-in;
  -moz-transition: top 0.65s ease-in;
}
#top-head.fixed #title {
  margin-top: 0;
}
#top-head.fixed #global_navi ul li a {
  color: #333;
  padding:16px 0;
}
#top-head.fixed #global_navi ul li {
-webkit-writing-mode: horizontal-tb; /* 実装済 */
-moz-writing-mode: horizontal-tb; /* 未実装 */
-ms-writing-mode: lr-tb; /* 実装済 */
writing-mode: horizontal-tb;
}
#top-head.fixed .top-number {
   line-height: 30px;
   height: 30px;
   padding: 0;
}

/* Toggle Button */
#nav-toggle {
  display: none;
  position: absolute;
  right: 12px;
  top: 14px;
  width: 34px;
  height: 36px;
  cursor: pointer;
  z-index: 101;
}
#nav-toggle div {
  position: relative;
}
#nav-toggle span {
  display: block;
  position: absolute;
  height: 4px;
  width: 100%;
  background: #666;
  left: 0;
  -webkit-transition: .35s ease-in-out;
  -moz-transition: .35s ease-in-out;
  transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
  top: 0;
}
#nav-toggle span:nth-child(2) {
  top: 11px;
}
#nav-toggle span:nth-child(3) {
  top: 22px;
}
#global_navi {
  width: 100%;
  clear: both;
  overflow: hidden;
  margin: 16px auto;
  z-index: 999;
}

#global_navi ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#global_navi ul li {
  width: 16.6%;
  float: left;
  text-align: center;
  -webkit-writing-mode: vertical-rl; /* 実装済 */
  -moz-writing-mode: vertical-rl; /* 未実装 */
  -ms-writing-mode: tb-rl; /* 実装済 */
  writing-mode: vertical-rl;
}

#global_navi ul li a {
  display: block;
  padding: 16px;
  background-color: #fff;
  color: #454545;
  text-decoration: none;
  transition: background-color 0.2s linear;
}

#global_navi ul li.current a {
  background-color: #fff;
}

#global_navi ul li a:hover {
  background: #eaf6fa;
}
/* 中央寄せ */
.center {
  text-align: center;
  margin: 0px auto 30px;
}

.center-inner {
  text-align: center;
  margin: 70px auto;
}
/* テキスト */
p {
    margin-top: 0;
}

 /* リンク文字色 */
a {
    color: #0FA0CE;
    text-decoration: none;
}

a:hover {
    color: #9ed0d0;
}

  /* 画像 */
  img {
    max-width: 100%;
    height: auto;
    border: 0;
  }
  section img {
   max-width: 100%;
   border:0;
}
  /* スライダー画像 */
  .slider img {
    width: 100%;
    height: 500px;  /* スライダー画像の高さ調整 */
    margin: 0 auto;
  }

/* ギャラリー */
.no-gutter .columns {
    padding-right:0;
    padding-left:0;
    margin-left: 6px;/*1*/
}
@media (min-width: 550px) {
.no-gutter .three.columns {
    width: 24%;
}
}
.no-gutter img {
    max-width: 100%;
   border:0;
   vertical-align:top;
   margin-bottom: 6px;/*1と揃える*/
}
/* メニューボックス ボタン*/
.menu {
    position: relative;
    width: 350px;
}

.gohst {
    display: inline-block;
    padding: .5em 4em;
    border: 2px solid #fff;
    color: #fff;
    text-align: center;
    text-decoration: none;
    outline: none;
    transition: all .3s;
    position: absolute;
    top: 60%;
 /* 上から半分 */
    left: 50%;
 /* 左から半分 */
    width: 100px;
    margin-top: -50px;
    margin-left: -100px;
}

.gohst:hover {
    box-shadow: 0 0 45px rgba(255,255,255,.6);
    text-decoration: none;
    color: #fff;
}
.gohst a:hover {
    color: #fff;
    text-decoration: none;
}

.link {
	display: inline-block;
	width: 200px;
	height: 54px;
	text-align: center;
	text-decoration: none;
	line-height: 54px;
	outline: none;
}
.link::before,
.link::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.link,
.link::before,
.link::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.link {
	position: relative;
	z-index: 2;
	background-color: #fff;
	border: 2px solid #333;
	color: #333;
	line-height: 48px;
}
.link::after {
	top: 4px;
	left: 4px;
	width: 188px;
	height: 42px;
	border: 2px solid #333;
	opacity: 0;
}
.link:hover::after {
	opacity: 1;
}
.link:hover {
  color: #333;
  text-decoration: none;
}
.link a:hover {
  color: #333;
  text-decoration: none;
}

/* section */
#about,
.box2,
.box3 {
	margin-top: 40px;
	margin-right: 0;
	margin-bottom: 40px;
	margin-left: 0;
}
#feature,{
    margin: 70px 0;
}
.wrl {
  position:relative;
  width:100%;
  height:100%;
}
.rl-inner {
	-webkit-writing-mode: vertical-rl; /* 実装済 */
	-moz-writing-mode: vertical-rl; /* 未実装 */
	-ms-writing-mode: tb-rl; /* 実装済 */
	writing-mode: vertical-rl;
	height : 300px;/*縦書きボックスの高さ*/
	line-height : 300px;/*縦のセンタリングの為に指定*/
	margin-left: 40%;
}
.gray {
    margin: 70px 0;
    background-color: #e9eaed;
}
.concept {
    margin: 0px 0 30px;
    text-align: center;
}
#contact {
    margin: 70px 0;
    width: 100%;
    background-color: #e9eaed;
    text-align: center;
    padding: 70px 0;
}
.contact-page .contact-wrap {
    margin: 20px 20px 0 20px;
}


/* サンプルページの3カラムメニューボックス */
.circle {
    position: relative;
    width: 132px;
    height: 132px;
    /* border-radius */
    border-radius: 50%;
   /* border */
    border: 1px solid #333;
    background-color: #333;
}

.logo {
    color: #fff;
    position: absolute;
    ;
    top: 50%;
    left: 20%;
    transform: translateY(-50%);
}

.number {
    color: #fff;
    position: absolute;
    top: 40%;
    left: 10%;
    transform: translateY(-50%);
}

#title {
    margin-top: 20px;
}

.waku img {
    border: 3px solid #fff;
    border-radius: 50%;
}
 /* サイトマップ */
#bottom {
    margin: 70px 0;
    text-align: center;
}
#bottom ul li a {
    color: #808080;
}
/* table */
table.table {
	border-collapse: separate;
	border-spacing: 1px;
	text-align: center;
	line-height: 1.5;
	border-top: 1px solid #ccc;
}
table.table th {
	width: 150px;
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
	border-bottom: 1px solid #ccc;
}
table.table td {
	width: 350px;
	padding: 10px;
	vertical-align: top;
	border-bottom: 1px solid #ccc;
}

.table-responsive {
  text-align: center;
}
/* お問い合わせフォーム送信ボタン */
.form-group label {
    color: #4E4E4E;
    font-size: 16px;
    font-weight: 300;
}

.form-group .form-control {
    padding: 7px 12px;
    border-color: #8a8884;
    box-shadow: none;
}

textarea#message {
    resize: none;
    padding: 10px;
}

.post {
    text-align: center;
    margin: 0 auto;
}

/* ページ上部へ戻るボタン */
.pagetop {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 55px;
}

.pagetop a {
    display: block;
    width: 50px;
    height: 50px;
    background-color: #333;
    border-radius: 50px;
    text-align: center;
    color: #fff;
    font-size: 24px;
    font-weight: normal;
    text-decoration: none;
    line-height: 50px;
    -ms-filter: "alpha(opacity=80)";
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
}

.pagetop a:hover {
    background-color: #4094c8;
    -ms-filter: "alpha(opacity=80)";
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
}

/* フッター */
footer {
    background-color: #fff;
    text-align: center;
}

footer #footer_nav {
    background-color: #fff;
    padding: 10px 0;
    width: 100%;
    margin: 16px auto;
}

footer #footer_nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

footer #footer_nav li {
    border-left: solid 1px #aaa;
    width: 16%;
    float: left;
    text-align: center;
}

footer #footer_nav li a {
    display: inline-block;
    padding: .4em;
    color: #454545;
    text-decoration: none;
    transition: background-color 0.2s linear;
}

footer #footer_nav li:last-child {
    border-right: solid 1px #aaa;
}

footer small {
    display: block;
    padding: 8px 0;
    color: #454545;
    width: 100%;
    margin: 0 auto;
    background-color: #e9eaed;
}

address {
    font-style: normal;
}

/* 個別ページのTOP背景画像 */
.topbody {
  background: url(../images/about-topbody.jpg) center top no-repeat;
  background-size: cover;
  height: 250px;
  color: #fff;
}
.room {
	background-size: cover;
	height: 250px;
	color: #fff;
	background-image: url(../images/about-topbody.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}
.ryouri {
	background-size: cover;
	height: 250px;
	color: #fff;
	background-image: url(../images/about-topbody.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}
.kannai {
	background-size: cover;
	height: 250px;
	color: #fff;
	background-image: url(../images/about-topbody.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}
.maptopbody {
	background-size: cover;
	height: 250px;
	color: #fff;
	background-image: url(../images/about-topbody.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}
/* Googlemap*/
.gmap {
	position: relative;
	padding: 0 0 50%;/* Googlemapの縦÷横×100 */
	height: 0;
	overflow: hidden;
}
.gmap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}
/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/

@media screen and (max-width: 640px) {
    #top-head,
    .inner {
        width: 100%;
        padding: 0;
    }
    #top-head {
      top: 0;
      position: fixed;
      margin-top: 0;
      background: #fff;
    }
    /* Fixed reset */
    #top-head.fixed {
        top: 0;
        position: fixed;
        padding-top: 0;
        background: #fff;
        z-index: 999;
        height: 115px;
    }
    #mobile-head {
        background: #fff;
        width: 100%;
        height: 50px;
        z-index: 999;
        position: relative;
    }
    #top-head.fixed .logo,
    #top-head .logo {
        position: absolute;
        left: 13px;
        top: 13px;
        color: #333;
        font-size: 26px;
    }
    #global_navi {
        position: absolute;
        /* 開いてないときは画面外に配置 */
        top: -500px;
        background: #fff;
        width: 100%;
        text-align: center;
        padding: 10px 0;
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
    }
    #global_navi ul {
        list-style: none;
        position: static;
        right: 0;
        bottom: 0;
        font-size: 14px;
    }
    #global_navi ul li {
        width: 100%;
        float: none;
        position: static;
        -webkit-writing-mode: horizontal-tb; /* 実装済 */
        -moz-writing-mode: horizontal-tb; /* 未実装 */
        -ms-writing-mode: lr-tb; /* 実装済 */
        writing-mode: horizontal-tb;
        text-align: center;
    }
    #top-head #global_navi ul li a,
    #top-head.fixed #global_navi ul li a {
        width: 100%;
        display: block;
        color: #333;
        padding: 18px 0;
        text-align: center;
    }
    #nav-toggle {
        display: block;
    }
    /* #nav-toggle 切り替えアニメーション */
    .open #nav-toggle span:nth-child(1) {
        top: 11px;
        -webkit-transform: rotate(315deg);
        -moz-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    .open #nav-toggle span:nth-child(2) {
        width: 0;
        left: 50%;
    }
    .open #nav-toggle span:nth-child(3) {
        top: 11px;
        -webkit-transform: rotate(-315deg);
        -moz-transform: rotate(-315deg);
        transform: rotate(-315deg);
    }
    /* #global_navi スライドアニメーション */
    .open #global_navi {
        /* #global_navi top + #mobile-head height */
        -moz-transform: translateY(556px);
        -webkit-transform: translateY(556px);
        transform: translateY(556px);
    }
    #footer_nav {
      display: none;
    }
}
@media (max-width: 1200px) {
  .container {
    max-width: 960px;
    margin: 0 auto;
  }
}
@media (max-width: 1000px) {
  .container {
    max-width: 750px;
    margin: 0 auto;
  }
  #title {
    margin-top: 40px;
  }
  #top-head.fixed #title {
   margin-top: 20px;
}
}

@media (max-width: 750px) {
  .container {
    max-width: 550px;
    margin: 0 auto;
  }
  #title {
    margin-top: 20px;
  }
  #top-head.fixed #title {
   margin-top: 0;
}
}

@media (max-width: 550px) {
  .container {
    max-width: 400px;
    margin: 0 auto;
  }
  .slider img {
     width: 100%;
     height: 300px;
     margin: 0 auto;
  }
  #title {
    margin-top: 0;
    width: 60%;
  }
}

@media (max-width: 400px) {
  .container {
    max-width: 360px;
    margin: 0 auto;
  }
  #title {
    width: 60%;
  }
  .header_contact {
    display: inline-block;
    width: 150px;
    margin: 0;
    height: 40px;
    line-height: 40px;
  }
  .top-number {
    width: 150px;
    font-size: 14px;
  }
}
@media (max-width: 360px) {
  .container {
    max-width: 310px;
    margin: 0 auto;
  }
  #title {
    width: 70%;
  }
  .header_contact {
    display: inline-block;
    width: 120px;
  }
  .top-number {
    width: 120px;
    font-size: 14px;
  }
  #top-head.fixed {
      top: 0;
      position: fixed;
      padding-top: 0;
      background: #fff;
      z-index: 999;
      height: 105px;
  }
}