@charset "utf-8";
/*mainimg.cssの読み込み*/
@import url(mainimg.css);
/*全端末（PC・タブレット・スマホ）共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*全体の設定
---------------------------------------------------------------------------*/
body, html, #mainimg {
  width: 100%;
  height: 100%;
}
body {
  margin: 0px;
  padding: 0px;
  color: #fff; /*全体の文字色*/
  /*font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
  /*font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro";*/
  font-family: 'Noto Sans JP', sans-serif;
  font-feature-settings: "palt";
  font-size: 14px;
  line-height: 1.5; /*行間*/
  background: #000; /*背景色*/
  -webkit-text-size-adjust: none;
  height: 100%;
  letter-spacing: 0.05em;
}
body.works {
  margin: 0px;
  padding: 0px 0px 100px 0px;
  color: #fff; /*全体の文字色*/
  font-size: 14px; /*文字サイズ*/
  line-height: 1.5; /*行間*/
  background: #000; /*背景色*/
  -webkit-text-size-adjust: none;
}
body.works::before {
  background: #fff url(../images/bg_works.jpg) no-repeat center;
  background-size: cover;
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
}
body.gallery {
  margin: 0px;
  padding: 0px 0px 100px 0px;
  color: #fff; /*全体の文字色*/
  font-size: 14px; /*文字サイズ*/
  line-height: 1.5; /*行間*/
  background: #000; /*背景色*/
  -webkit-text-size-adjust: none;
}
body.gallery::before {
  background: #fff url(../images/bg_gallery.jpg) no-repeat center;
  background-size: cover;
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
}
body.contact {
  margin: 0px;
  padding: 0px 0px 100px 0px;
  color: #fff; /*全体の文字色*/
  font-size: 14px; /*文字サイズ*/
  line-height: 1.5; /*行間*/
  background: #000; /*背景色*/
  -webkit-text-size-adjust: none;
}
body.contact::before {
  background: #fff url(../images/bg_contact.jpg) no-repeat center;
  background-size: cover;
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
}
body.profile {
  margin: 0px;
  padding: 0px 0px 100px 0px;
  color: #fff; /*全体の文字色*/
  font-size: 14px; /*文字サイズ*/
  line-height: 1.5; /*行間*/
  background: #000; /*背景色*/
  -webkit-text-size-adjust: none;
}
body.profile::before {
  background: #fff url("../images/bg_profile.jpg") no-repeat center;
  background-size: cover;
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
}
body.news {
  margin: 0px;
  padding: 0px 0px 100px 0px;
  color: #fff; /*全体の文字色*/
  font-size: 14px; /*文字サイズ*/
  line-height: 1.5; /*行間*/
  background: #000; /*背景色*/
  -webkit-text-size-adjust: none;
}
body.news::before {
  background: #fff url("../images/bg_news.jpg") no-repeat center;
  background-size: cover;
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
}
.background {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0.7;
}
h1, h2, h3, h4, h5, p, ul, ol, li, dl, dt, dd, form, form, input, textarea, figure {
  margin: 0px;
  padding: 0px;
  font-size: 100%;
  font-weight: normal;
}
ul {
  list-style-type: none;
}
img {
  border: none;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
img.photo {
  width: 100%;
  box-sizing: border-box;
  padding: 5px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 4px;
  /*filter: drop-shadow(0px 0px 2px #000);*/
  -webkit-box-shadow: 0px 3px 5px -2px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 0px 3px 5px -2px rgba(0, 0, 0, 0.6);
  box-shadow: 0px 3px 5px -2px rgba(0, 0, 0, 0.6);
}
img.touka {
  opacity: 0.8;
}
.op60 {
  opacity: 0.6;
}
.op80 {
  opacity: 0.8;
}
img.small {
  width: 70%;
  height: auto;
}
table {
  border-collapse: collapse;
  font-size: 100%;
  border-spacing: 0;
}
iframe {
  width: 100%;
}
#loader {
  width: 100px;
  height: auto;
  display: none;
  position: fixed;
  _position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  z-index: 200;
}
/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
  color: #fff; /*リンクテキストの色*/
  transition: 0.4s; /*マウスオン時の移り変わるまでの時間設定。0.4秒。*/
  text-decoration: none;
}
a:hover {
  color: #ffcc00; /*マウスオン時の文字色*/
  text-decoration: none; /*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}
a.link {
  color: burlywood; /*リンクテキストの色*/
  transition: 0.4s; /*マウスオン時の移り変わるまでの時間設定。0.4秒。*/
  text-decoration: none;
}
a.link:hover {
  color: #ffcc00; /*マウスオン時の文字色*/
  text-decoration: none; /*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}
img.hv:hover {
  opacity: 0.5;
  filter: alpha(opacity=50); /* Ie用 */
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
iframe {
  width: 100%;
  border: none;
}
textarea {
  width: 100% !important;
}
.blinking {
  -webkit-animation: blink 1.0s ease-in-out infinite alternate;
  -moz-animation: blink 1.0s ease-in-out infinite alternate;
  animation: blink 1.0s ease-in-out infinite alternate;
}
@-webkit-keyframes blink {
  0% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes blink {
  0% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes blink {
  0% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
/*header
---------------------------------------------------------------------------*/
/*headerブロック*/
header {
  overflow: hidden;
  z-index: 100;
  position: fixed; /*スクロールしても固定表示させる指定*/
  top: 0px; /*上からの配置場所*/
  left: 0px; /*左からの配置場所*/
  width: 100%; /*幅*/
  padding: 10px 0; /*上下、左右へのブロック内の余白*/
  /*border-bottom: 1px solid rgba(255, 255, 255, 0.3);*/
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#490114+0,280004+100 */
  background: rgb(73, 1, 20, 0.6); /* Old browsers */
  background: -moz-linear-gradient(top, rgba(73, 1, 20, 0.9) 0%, rgba(40, 0, 4, 0.4) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(73, 1, 20, 0.9) 0%, rgba(40, 0, 4, 0.4) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(73, 1, 20, 0.9) 0%, rgba(40, 0, 4, 0.4) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#490114', endColorstr='#280004', GradientType=0); /* IE6-9 */
  filter: drop-shadow(0px 3px 2px #000);
}
/*トップページでのheaderブロックの追加設定*/
.home header {
  background: transparent;
  border: none;
  filter: none;
  z-index: 100;
}
/*ロゴ画像*/
header #logo {
  width: 200px; /*幅*/
  float: left; /*左に回り込み*/
  margin-left: 30px; /*左側に空けるスペース*/
  margin-right: 50px; /*右側に空けるスペース*/
  filter: drop-shadow(0px 0px 2px #000);
}
/*トップページで表示させている「お知らせ」の１行。*/
header #news {
  margin-top: 3px;
  padding: 5px 10px;
  width: 100%;
  float: none; /*左に回り込み*/
  /*text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), -1px -1px 2px rgba(0, 0, 0, 0.7);*/
}
header #news .newicon {
  text-shadow: none;
}
/*メインメニュー
---------------------------------------------------------------------------*/
/*メニューブロック*/
#menubar {
  margin-top: 4px;
  overflow: hidden;
  float: left;
  width: auto;
  font-family: 'Nanum Pen Script', cursive;
  font-size: 180%;
}
/*メニュー１個あたりの設定*/
#menubar li {
  float: left; /*左に回り込み*/
  text-align: center; /*文字をセンタリング*/
}
#menubar li a {
  display: block;
  text-decoration: none;
  padding: 0 10px; /*上下、左右へのメニュー内余白*/
}
/*現在表示中(current)のメニュー設定*/
#menubar li.current a {
  color: #ffcc00; /*文字色*/
}
/*スマホ用メニューを表示させない*/
#menubar-s {
  display: none;
  font-family: 'Nanum Pen Script', cursive;
}
/*３本バーアイコンを表示させない*/
#menubar_hdr {
  display: none;
}
/*headerアイコン（facebookやtwitterなどのアイコンブロック）
---------------------------------------------------------------------------*/
/*アイコンを囲むブロック全体の設定*/
header .icon {
  float: right; /*右側に回り込み*/
  margin-right: 10px; /*右側に空けるスペース*/
  margin-top: 5px;
}
/*アイコン１個あたりの設定*/
header .icon li {
  display: inline; /*横並びにさせる指定*/
}
/*アイコン画像の設定*/
header .icon img {
  width: 100px; /*画像の幅*/
  margin-left: 5px; /*画像同士の余白*/
}
/*マウスオン時*/
header .icon a:hover {
  opacity: 0.7; /*色が70%だけついた状態にする*/
}
/*contents（headerとfooter以外のメインとなるブロック。）
---------------------------------------------------------------------------*/
/*contentsブロック*/
#contents {
  clear: both;
  margin: 0 auto;
  padding: 100px 10%; /*上下、左右へのブロック内の余白*/
  max-width: 1500px; /*最大幅。これ以上広がらない。*/
  position: relative;
}
/*見出し(h2)タグ*/
#contents h2 {
  margin-bottom: 40px;
  font-size: 280%; /*文字サイズ*/
  border-bottom: 1px solid rgba(255, 255, 255, 0.3); /*枠線の幅、線種、色*/
  text-align: center; /*文字をセンタリング*/
  letter-spacing: 1px; /*文字間隔を少しだけ広くとる設定*/
  font-family: 'Nanum Pen Script', cursive;
}
/*見出し(h2)タグ内のspanタグ。小文字の設定。*/
#contents h2 span {
  margin-bottom: 10px;
  display: block;
  font-size: 13px; /*文字サイズ*/
  letter-spacing: 0.5em; /*文字間隔を少しだけ広くとる設定*/
  margin-top: -10px; /*大きな文字との余白が広すぎるので、ちょっと詰める。*/
}
/*見出し(h3)タグ*/
#contents h3 {
  margin-bottom: 20px;
  font-size: 240%; /*文字サイズ*/
  background: url(../images/arrow2.png) no-repeat left center / 30px; /*背景画像の読み込み。18pxは画像の幅。*/
  padding: 0 40px; /*上下、左右への余白*/
  font-family: 'Nanum Pen Script', cursive;
  color: #ffcc00;
  /*border-bottom: 1px solid rgba(255, 204, 0, 0.3);*/
}
#contents h4 {
  /*margin-bottom: 20px;*/
  font-size: 120%; /*文字サイズ*/
  padding: 0 30px 5px 30px; /*上下、左右への余白*/
  color: #ffcc00;
  border-bottom: 1px solid rgba(255, 204, 0, 0.3);
}
/*段落(p)タグ*/
#contents p {
  padding: 10px; /*上、左右、下への余白*/
  text-align: justify;
}
/*他。微調整。*/
#contents p + p {
  margin-top: -5px;
}
#contents h2 + p, #contents h3 + p {
  margin-top: -10px;
}
#contents section + section {
  clear: both;
  padding-top: 40px;
}
#main {
  width: 100%;
  float: none;
}
.box {
  float: left;
  width: 100%;
  /*background: #000;
  background: rgba(0, 0, 0, 0.5);*/
  padding: 0%; /*ボックス内の余白*/
  margin-bottom: 30px; /*ボックスの下に空けるスペース*/
  /*border: 1px solid #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);*/
}
.space50 {
  width: 100%;
  float: left;
  height: 50px;
}
.w23p {
  box-sizing: border-box;
  padding: 0 5px;
  width: 20%;
}
.w75p {
  box-sizing: border-box;
  padding: 0 5px;
  width: 78%;
}
/*footerブロック
---------------------------------------------------------------------------*/
/*footerブロック*/
footer {
  width: 100%;
  clear: both;
  text-align: center;
  font-family: 'Nanum Pen Script', cursive;
  bottom: 0;
  position: fixed;
  background: rgb(73, 1, 20, 0.6); /* Old browsers */
  background: -moz-linear-gradient(top, rgba(73, 1, 20, 0.6) 0%, rgba(40, 0, 4, 0.9) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(73, 1, 20, 0.6) 0%, rgba(40, 0, 4, 0.9) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(73, 1, 20, 0.6) 0%, rgba(40, 0, 4, 0.9) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#490114', endColorstr='#280004', GradientType=0); /* IE6-9 */
  filter: drop-shadow(0px 3px 2px #000);
  z-index: 100;
}
footer a {
  text-decoration: none;
}
footer .pr {
  display: block;
}
/*news.html
---------------------------------------------------------------------------*/
/*ブロック全体の設定*/
#new dl {
  box-sizing: border-box;
  padding: 10px; /*上下、左右へのブロック内の余白*/
  width: auto;
  height: auto;
  overflow: hidden; /*高さを超えるコンテンツ量部分は非表示に*/
  background: rgba(0, 0, 0, 0.7);
  border-radius: 5px;
  text-align: left;
  line-height: 1.5;
}
/*日付設定*/
#new dt {
  float: left; /*左に回り込み*/
  width: 160px; /*dtの幅*/
  letter-spacing: 0.1em; /*文字間隔を少しだけ広くとる設定*/
}
/*日付の右側に出る「お知らせ」などのアイコン。※共通設定。*/
#new dt span {
  letter-spacing: normal;
  display: inline-block;
  line-height: 1.5;
  margin-left: 5px;
  background: #2a93cb; /*背景色*/
  color: #fff; /*文字色*/
  width: 7em; /*幅*/
  text-align: center; /*文字をセンタリング*/
  border-radius: 3px; /*角丸の指定。この１行を削除すれば、角がとがった通常の四角形になります。*/
}
/*記事設定*/
#new dd {
  padding-left: 180px; /*左側に空ける余白*/
  /*border-bottom: 1px solid #333;*/
}
.spinner {
  margin-right: 8px;
  width: 20px;
  height: 20px;
  position: relative;
  /*margin: 100px auto;*/
  float: left;
}
.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
  background: #ffb76b;
  background: -moz-radial-gradient(center, ellipse cover, #ffb76b 0%, #ffa73d 50%, #ff7c00 51%, #ff7f04 100%);
  background: -webkit-radial-gradient(center, ellipse cover, #ffb76b 0%, #ffa73d 50%, #ff7c00 51%, #ff7f04 100%);
  background: radial-gradient(ellipse at center, #ffb76b 0%, #ffa73d 50%, #ff7c00 51%, #ff7f04 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffb76b', endColorstr='#ff7f04', GradientType=1);
}
.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
@-webkit-keyframes sk-bounce {
  0%, 100% {
    -webkit-transform: scale(0.0)
  }
  50% {
    -webkit-transform: scale(1.0)
  }
}
@keyframes sk-bounce {
  0%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  }
  50% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}
dl.type1 {
  box-sizing: border-box;
  margin: 0;
  padding: 0 10px 20px 10px;
}
dl.type1 dt {
  box-sizing: border-box;
  float: left;
  width: 20px;
  /*margin-bottom: 5px;*/
  padding: 5px 0;
  text-align: center;
  color: brown;
}
dl.type1 dd {
  /*margin-bottom: 5px;*/
  padding: 5px 0px 5px 30px;
  text-align: left;
  text-align: justify;
  text-justify: inter-ideograph;
}
dl.type2 {
  width: 100%;
  float: left;
  box-sizing: border-box;
  margin: 30px 0 0 0;
  padding: 0 10px 20px 10px;
}
dl.type2 dt {
  box-sizing: border-box;
  float: left;
  width: 280px;
  /*margin-bottom: 5px;*/
  padding: 5px 0;
  text-align: right;
  color: chocolate;
  /*font-family: 'Courier Prime', monospace;*/
}
dl.type2 dd {
  /*margin-bottom: 10px;*/
  padding: 5px 0px 5px 300px;
  text-align: left;
  /*text-align: justify;
  text-justify: inter-ideograph;*/
}
/*予約・お問い合わせ*/
dl.contact {
  margin: 10px 20px 20px 20px;
  width: auto;
}
dl.contact dt {
  float: left;
  width: 140px;
  padding: 5px 0 5px 10px;
  text-align: right;
  font-weight: normal;
  letter-spacing: 1px;
  color: darkorange;
}
dl.contact dd {
  width: auto;
  padding: 5px 0 10px 160px;
  text-align: left;
}
dl.contact dd img {
  width: 200px;
  height: auto;
}
/*テーブルフォーム　送信枠
---------------------------------------------------------------------------*/
ul.action {
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 10px;
  padding: 0;
  width: 230px;
  height: 40px;
  list-style-type: none;
  text-align: center;
}
ul.action li {
  margin: 0 20px 0 0;
  padding: 0;
  width: 105px;
  height: 40px;
  float: left;
  text-align: center;
}
ul.action li.nom {
  margin: 0;
}
/*checkブロック。赤い注意書きブロックです。
---------------------------------------------------------------------------*/
p.check {
  background: #e8da00;
  color: #000;
  padding: 10px 25px !important;
  margin-bottom: 20px;
}
p.check a {
  color: #000;
}
/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
@keyframes scroll {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*通常時のボタンは非表示*/
body .nav-fix-pos-pagetop a {
  display: none;
}
/*fixmenu_pagetop.jsで設定している設定値になったら出現するボタンスタイル*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a {
  display: block;
  text-decoration: none;
  text-align: center; /*z-index: 100;*/ position: fixed;
  animation-name: scroll;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  width: 40px; /*ボタンの幅*/
  line-height: 40px; /*ボタンの高さ*/
  bottom: 20px; /*ウィンドウの下から20pxの場所に配置*/
  right: 3%; /*ウィンドウの右から3%の場所に配置*/
  background: #555; /*背景色*/
  border-radius: 50%; /*円形にする指定。この１行を削除すれば正方形になります。*/
}
/*マウスオン時の背景色*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a:hover {
  background: #999;
}
/*NEWアイコン
---------------------------------------------------------------------------*/
.newicon {
  background: #F00; /*背景色*/
  color: #FFF; /*文字色*/
  font-size: 70%; /*文字サイズ*/
  line-height: 1.5;
  padding: 3px 5px;
  border-radius: 2px;
  margin: 0px 5px;
  vertical-align: inherit;
  font-weight: bold !important;
}
.price {
  background: rgba(184, 134, 11, 0.8); /*背景色*/
  color: #FFF; /*文字色*/
  font-size: 100%; /*文字サイズ*/
  line-height: 1.5;
  padding: 3px 5px;
  border-radius: 2px;
  margin: 0px;
  vertical-align: inherit;
  /*font-weight: bold !important;*/
}
/*ul.disc,olタグ
---------------------------------------------------------------------------*/
ul.disc {
  list-style: disc;
  padding: 0 20px 20px 45px;
}
ol {
  padding: 0 20px 20px 45px;
}
/*その他
---------------------------------------------------------------------------*/
.look {
  background: #222;
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid #333;
  color: #fff;
}
.mb15, .mb1em {
  margin-bottom: 15px !important;
}
.mb30 {
  margin-bottom: 30px !important;
}
.mb50 {
  margin-bottom: 50px !important;
}
.clear {
  clear: both;
}
.color1, .color1 a {
  color: #ffcc00 !important;
}
.pr {
  font-size: 10px;
}
.wl {
  width: 96%;
}
.ws {
  width: 50%;
}
.c {
  text-align: center;
}
.r {
  text-align: right;
}
.l {
  text-align: left;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.big1 {
  font-size: 40px;
}
.mini1 {
  font-size: 11px;
  display: inline-block;
  line-height: 1.5;
}
.dn {
  display: none;
}
.sh {
  display: none;
}
/*PAGE TOP設定（オリジナル）
---------------------------------------------------------------------------*/
#page-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 300;
}
#page-top img {
  width: 100%;
  height: auto;
  filter: drop-shadow(2px 2px 2px #222);
}
#page-top a {
  text-decoration: none;
  width: 70px;
  text-align: center;
  display: block;
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
}
#page-top a:hover {
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  opacity: 1;
}
/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:900px) {
  .background {
    display: none;
  }
  /*header
---------------------------------------------------------------------------*/
  /*headerブロック*/
  header {
    /*position: absolute;*/
    position: fixed;
    text-align: center;
  }
  /*ロゴ画像*/
  header #logo {
    width: 40%;
    float: none;
    margin: 0 auto 10px;
  }
  /*トップページで表示させている「お知らせ」の１行。*/
  header #news {
    box-sizing: border-box;
    float: none;
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.8);
    text-align: center;
  }
  /*メインメニュー
---------------------------------------------------------------------------*/
  /*アニメーションのフレーム設定。全100コマアニメーションだと思って下さい。
透明(opacity: 0;)から色をつける(opacity: 1;)までの指定。*/
  @keyframes menubar {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  /*スマホ用メニューブロック*/
  #menubar-s {
    display: block;
    overflow: hidden;
    position: fixed;
    z-index: 102;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); /*背景色*/
    animation-name: menubar; /*上のkeyframesの名前*/
    animation-duration: 0.5s; /*アニメーションの実行時間。0.5秒。*/
    animation-fill-mode: both; /*待機中は最初のキーフレームを、完了後は最後のキーフレームを維持*/
    border-top: 1px solid #fff; /*上の線の幅、線種、色*/
  }
  /*メニュー１個あたりの設定*/
  #menubar-s li a {
    display: block;
    text-decoration: none;
    padding: 10px 3%; /*メニュー内の余白。上下、左右。*/
    border-bottom: 1px solid #fff; /*下の線の幅、線種、色*/
    color: #fff; /*文字色*/
    font-size: 200%; /*文字サイズ*/
    text-align: center;
  }
  /*説明表記（飾り文字）*/
  #menubar-s li a span {
    display: block;
    font-size: 10px; /*文字サイズ*/
  }
  /*PC用メニューを非表示にする*/
  #menubar {
    display: none;
  }
  /*３本バーアイコン設定
---------------------------------------------------------------------------*/
  /*３本バーブロック*/
  #menubar_hdr {
    display: block;
    position: fixed;
    z-index: 103;
    top: 20px; /*上からの配置場所*/
    right: 10px; /*右からの配置場所*/
  }
  /*アイコン共通設定*/
  #menubar_hdr.close, #menubar_hdr.open {
    width: 40px; /*幅*/
    height: 40px; /*高さ*/
    border-radius: 8%;
    border: 1px solid #fff;
    z-index: 103;
  }
  /*三本バーアイコン*/
  #menubar_hdr.close {
    background: rgba(0, 0, 0, 0.5) url(../images/icon_menu.png) no-repeat center top/40px; /*背景色、背景画像の読み込み、画像の上半分（３本マーク）を表示。幅は50px。*/
  }
  /*閉じるアイコン*/
  #menubar_hdr.open {
    background: #000 url(../images/icon_menu.png) no-repeat center bottom/40px; /*背景色、背景画像の読み込み、画像の下半分（×マーク）を表示。幅は50px。*/
  }
  /*headerアイコン（facebookやtwitterなどのアイコンブロック）
---------------------------------------------------------------------------*/
  /*アイコンを囲むブロック全体の設定*/
  header .icon {
    float: none;
    margin-right: 0;
  }
  /*contents（headerとfooter以外のメインとなるブロック。）
---------------------------------------------------------------------------*/
  /*contentsブロック*/
  #contents {
    padding: 100px 3% 50px; /*上下、左右へのブロック内の余白*/
  }
  #contents h2 {
    padding-top: 50px;
  }
  /*news.html
---------------------------------------------------------------------------*/
  /*日付設定*/
  #new dl {
    box-sizing: border-box;
    margin: 20px 10px 10px 0px;
    padding: 10px; /*上下、左右へのブロック内の余白*/
    width: 100%;
    height: auto;
    overflow: hidden; /*高さを超えるコンテンツ量部分は非表示に*/
    border-radius: 0;
  }
  #new dt {
    float: left;
  }
  dl.type2 {
    box-sizing: border-box;
    margin: 0;
    padding: 10px;
  }
  dl.type2 dt {
    box-sizing: border-box;
    float: none;
    width: 100%;
    margin-bottom: 0px;
    padding: 5px 0 0 0;
    text-align: left;
    font-size: 130%;
    line-height: 1.5;
  }
  dl.type2 dd {
    margin-bottom: 5px;
    padding: 0px 0px 5px 0px;
    text-align: left;
    text-align: justify;
    text-justify: inter-ideograph;
  }
  /*その他
---------------------------------------------------------------------------*/
  body.s-n #sub, body.s-n #footermenu, .m-n {
    display: none;
  }
  .big1 {
    font-size: 28px;
  }
  .sh {
    display: block;
  }
  .pc {
    display: none;
  }
  .price {
    display: inline-block;
    background: rgba(184, 134, 11, 0.8); /*背景色*/
    color: #FFF; /*文字色*/
    font-size: 100%; /*文字サイズ*/
    line-height: 1.5;
    padding: 3px 5px;
    border-radius: 2px;
    margin: 10px 0;
    vertical-align: inherit;
    /*font-weight: bold !important;*/
  }
}
/*画面を横向きにした場合の高さが500px以下の場合の設定。
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (orientation: landscape) and (max-height:500px) {
  /*メインメニュー。小さな端末用メニューを２列に。
---------------------------------------------------------------------------*/
  /*メニュー１個あたりの設定*/
  #menubar-s li a {
    float: left;
    width: 44%;
  }
}
/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:600px) {
  /*全体の設定
---------------------------------------------------------------------------*/
  body {
    font-size: 12px;
    font-size: 2.93vw;
  }
  /*ロゴ画像*/
  header #logo {
    width: 60%;
    float: none;
    margin: 10px auto 10px;
  }
  /*トップページで表示させている「お知らせ」の１行。*/
  header #news {
    box-sizing: border-box;
    float: none;
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.8);
    font-size: 85%;
    text-align: center;
    line-height: 1.4;
  }
  header .icon img {
    width: 90px; /*画像の幅*/
    margin-left: 0px; /*画像同士の余白*/
  }
  /*contents（headerとfooter以外のメインとなるブロック。）
---------------------------------------------------------------------------*/
  /*見出し(h2)タグ*/
  #contents h2 {
    font-size: 250%; /*文字サイズ*/
    letter-spacing: normal;
  }
  /*見出し(h2)タグ内のspanタグ。小文字の設定。*/
  #contents h2 span {
    font-size: 11px;
    letter-spacing: 0.2em;
  }
  /*見出し(h3)タグ*/
  #contents h3 {
    font-size: 200%; /*文字サイズ*/
    background: url(../images/arrow2.png) no-repeat 8px center / 40px;
    padding: 0 10px 0 60px; /*上、右、下、左への余白*/
  }
  /*段落(p)タグ*/
  #contents p {
    padding: 10px; /*上、左右、下への余白*/
  }
  #contents section + section {
    padding-top: 20px;
  }
  .w23p, .w75p, .w50p {
    width: 100%;
    padding: 0 0 20px 0;
  }
  .fr {
    float: none;
  }
  .fl {
    float: none;
  }
  footer {
    font-size: 90%;
  }
  /*その他
---------------------------------------------------------------------------*/
  .ws, .wl {
    width: 94%;
  }
  .big1 {
    font-size: 20px;
  }
  img.small {
    width: 100%;
    height: auto;
  }
  /*予約・お問い合わせ*/
  dl.contact {
    margin: 0px;
    width: 100%;
  }
  dl.contact dt {
    float: none;
    width: 100%;
    padding: 5px 0 5px 0px;
    text-align: left;
    font-size: 120%;
    font-weight: normal;
    letter-spacing: 1px;
  }
  dl.contact dd {
    width: auto;
    padding: 5px 0 10px 0;
    text-align: left;
  }
  /*ブロック全体の設定*/
  #new dl {
    box-sizing: border-box;
    margin: 20px 10px 10px 0px;
    padding: 10px; /*上下、左右へのブロック内の余白*/
    width: 100%;
    height: auto;
    overflow: hidden; /*高さを超えるコンテンツ量部分は非表示に*/
    border-radius: 0;
  }
  /*日付設定*/
  #new dt {
    float: none; /*左に回り込み*/
    width: auto; /*dtの幅*/
    letter-spacing: 0.1em; /*文字間隔を少しだけ広くとる設定*/
  }
  /*記事設定*/
  #new dd {
    padding: 10px 0px 0px 0px; /*左側に空ける余白*/
    /*border-bottom: 1px solid #333;*/
  }
}