@charset "UTF-8";
/* CSS Document */
/***********************************************
									共 通 項 目
***********************************************/
body { background: url("../img/light_wool.png") repeat; }

h1 { font-size: 1.8rem; font-weight: 900; }
@media (min-width: 768px) { h1 { font-size: 2.0rem; } }

hr { border: none; border-bottom: dashed 1px #333; }

.text { font-size: 1.0rem; font-weight: 500; }

.button { width: 100%; height: auto; position: relative; border-radius: 50lh; text-align: center; color: #FFF; background-color: #6a7f9d; font-size: 1.4em; border: solid 2px #6a7f9d; transition: .4s; }
.button a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; text-indent: -9999px; }
.button:hover { color: #6a7f9d; background-color: transparent; }

.rev_slot { border: solid 3px #85764e; text-align: center; border-radius: 8px; font-size: 1.4em; font-weight: 700; }
.rev_slot .text-green { color: #85764e; transform: translateY(-50%); margin-bottom: -0.5em; font-size: 0.8em; }
.rev_slot .text-green span { background-color: #FFF; }

.tbn-trim { width: 100%; position: relative; overflow: hidden; }
.tbn-trim.ratio-169::before { content: ""; display: block; padding-top: 56.25%; /* 高さと幅の比を16:9に固定。9/16*100=56.25 */ }
.tbn-trim.ratio-square::before { content: ""; display: block; padding-top: 100%; }
.tbn-trim.ratio-ogp::before { content: ""; display: block; padding-top: 52.356%; }
.tbn-trim img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

a:hover .tbn-trim img { transform: scale(1.1); }

/***********************************************
							メ イ ン コ ン テ ン ツ
***********************************************/
.logo { width: 100%; display: flex; justify-content: center; align-items: center; }
.logo img { width: 30%; max-width: 140px; }

.main-img { width: 100%; position: -webkit-sticky; /* Safari */ position: sticky; top: 1.0rem; }
.main-img img { width: 100%; border: solid 1px #EEE; }
@media (min-width: 768px) { .main-img { height: 100vh; }
  .main-img img { height: 100vh; object-fit: scale-down; object-position: center top; border: none; } }

.title-text .sub { font-style: italic; }

.overview { font-size: 1.2rem; font-weight: 500; line-height: 1.5; position: relative; padding-left: 1.25rem; }
.overview .date { font-size: 1.6rem; font-weight: 700; }
.overview .place a, .overview .place a:visited { color: #333; text-decoration: underline; }
.overview::before { content: ""; width: 0.375rem; height: 97%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background-color: #333; display: block; }

.reservation { line-height: 1.5; }
.reservation h2 { font-size: 1.4rem; font-weight: 700; }
.reservation a, .reservation a:visited { font-size: 2.0rem; font-weight: 700; color: #6a7f9d; }
.reservation a:hover { text-decoration: underline; }
.reservation ul { list-style-type: circle; list-style-position: inside; }
.reservation ul li { font-size: 1.0rem; font-weight: 400; padding-left: 1.25rem; text-indent: -1.25rem; }
.reservation .notice { font-size: 0.9rem; padding-left: 0.9rem; text-indent: -0.9rem; color: #09F; }

.profile { border: solid 1px #333; background-color: #EEE; line-height: 1.5; }
.profile h3 { font-size: 1.4rem; font-weight: 700; border-bottom: solid 2px #333; }
.profile h3 span { font-size: 0.9rem; }
.profile .text { font-weight: 400; }

.attention { background-color: #FFDEDE; }
.attention h3 { font-size: 1.2rem; font-weight: 700; text-align: center; }
.attention ul { list-style-type: circle; list-style-position: inside; }
.attention ul li { font-size: 0.9rem; font-weight: 400; padding-left: 1.15rem; text-indent: -1.15rem; }

/***********************************************
									S N S
***********************************************/
.sns { margin: 5.0rem auto 2.5rem auto; width: 238px; display: flex; flex-wrap: wrap; justify-content: space-between; }
.sns #twt, .sns #fb, .sns #line { position: relative; }
.sns #twt .img, .sns #fb .img, .sns #line .img { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; transition: .4s; }
.sns #twt:hover .img, .sns #fb:hover .img, .sns #line:hover .img { transform: scale(1.2); }
.sns #twt::before, .sns #fb::before, .sns #line::before { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); font-size: 11px; display: flex; align-items: center; justify-content: center; width: 99px; color: #FEFEFE; height: 25px; border-radius: 5px; }
.sns #twt::after, .sns #fb::after, .sns #line::after { width: 0; height: 0; border-style: solid; border-width: 8px 10px 0 10px; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); content: ""; display: block; }
.sns #twt a, .sns #fb a, .sns #line a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; text-indent: -9999px; }
.sns #twt .img { background-color: #000; }
.sns #twt::before { content: "Xでポスト"; background-color: #000; }
.sns #twt::after { border-color: #000 transparent transparent transparent; }
.sns #fb .img { background-color: #1877F2; }
.sns #fb::before { content: "Facebookでシェア"; background-color: #1877F2; }
.sns #fb::after { border-color: #1877F2 transparent transparent transparent; }
.sns #line .img { background-color: #00B900; }
.sns #line::before { content: "LINEで送る"; background-color: #00B900; }
.sns #line::after { border-color: #00B900 transparent transparent transparent; }
@media (min-width: 576px) { .sns { width: 280px; } }

/***********************************************
								店 舗 情 報
***********************************************/
.shops { background-color: #1a1a1a; color: #FFF; }
.shops .tbn-trim { background-color: #1a1a1a; }
.shops .shopinfo { border-left: solid 4px #85764e; }
.shops .shopinfo a, .shops .shopinfo a:visited { color: #FFF; }
.shops .shopinfo a:hover, .shops .shopinfo a:hover span { text-decoration: underline; }
.shops .shopinfo p:first-child { font-weight: 700; font-size: 1.3em; }
.shops .shopinfo p:nth-child(n+2) { font-size: 1em; }

.copyright { color: #CCC; background-color: #1a1a1a; width: 100%; font-size: 1.0rem; text-align: center; font-family: Georgia, "Times New Roman", Times, serif; }