@charset "utf-8";
/* CSS Document */
@font-face {
  font-family: "komorebi gothic";
  src: url("../fonts/komorebi-gothic.woff2") format("woff2"), url("../fonts/komorebi-gothic.woff") format("woff");
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #343434;
  font-size: 18px;
}
html {
  /*	scroll-behavior: smooth;*/
  font-family: "komorebi gothic";
  /*font-size: 112.5%;*/
}
#wrap {
  overflow: hidden;
  /*  background-color: #f5f5f5;*/
  background-color: rgba(255, 255, 255, 0.5);
}
img {
  width: 100%;
  height: auto;
  vertical-align: middle;
}
p {
  line-height: 1.5em;
}
/*ヘッダー*/
header {
  width: 100vw;
  height: 100px;
  position: fixed;
  background-color: rgba(242, 217, 46, 0.8) /*rgba(0, 0, 0, 0.5)*/ ;
  z-index: 999;
}
h1 img {
  width: 220px;
  height: 100px;
}
#header img {
  opacity: 0.4;
}
.title-text-area {
  position: relative;
}
.title-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #343434;
  font-size: 130px;
}
/*ナビゲーション*/
#top-nav {
  margin: 0 auto;
  max-width: 1140px;
  display: flex;
}
nav {
  width: 750px;
}
nav ul {
  width: 750px;
  margin: 0;
  list-style-type: none;
  display: flex;
  flex-direction: row;
}
nav li {
  width: 150px;
  height: 100px;
  font-size: 18px;
}
nav ul:first-child {
  margin-left: 100px;
}
nav a {
  padding-top: 20px;
  padding-bottom: 20px;
  line-height: 30px;
  text-align: center;
  display: block;
  color: #343434;
  text-decoration: none;
}
nav a:hover {
  background-color: rgba(52, 52, 52, 0.8);
  color: #fff;
}
#PRICE nav li:first-of-type a, #EVENT nav li:nth-of-type(2) a, #BOARDGAME nav li:nth-of-type(3) a, #MENU nav li:nth-of-type(4) a, #CONTACT nav li:nth-of-type(5) a {
  background-color: #343434 /*rgba(255, 255, 255, 0.8)*/ ;
  color: #fff;
}
.hamburger-menu {
  display: none;
}
/*背景*/
body {
  background-image: url("../img/p0044.png");
}
.background-img {
  background-size: 30%;
}
#INDEX .background-img {
  background-image: url("../img/dice.svg");
  background-repeat: no-repeat;
}
#INDEX .background-img:last-child {
  background-position: right bottom;
}
#PRICE .background-img {
  background-image: url("../img/cards.svg");
  background-repeat: no-repeat;
  background-position: left bottom;
}
#EVENT .background-img {
  background-image: url("../img/swords.svg"), url("../img/meeting.svg");
  background-repeat: no-repeat;
  background-position: left top 5%, right bottom;
}
#BOARDGAME .background-img {
  background-image: url("../img/sword.svg"), url("../img/tarot.svg");
  background-repeat: no-repeat;
  background-position: left top, right bottom;
}
#MENU .background-img {
  background-image: url("../img/wine-bottle.svg");
  background-size: 35%;
  background-repeat: no-repeat;
  background-position: left bottom;
}
#MENU .background-img:nth-of-type(2) {
  background-image: none;
}
/*メイン*/
main {
  margin: 0 auto;
  max-width: 1140px;
}
section {
  margin-top: 200px;
  text-align: center;
}
h2 {
  margin: 100px auto 50px;
  font-size: 48px;
  text-align: center;
}
h2 br {
  display: none;
}
h3 {
  font-size: 24px;
}
.section-text {
  text-align: left;
}
#INDEX .s-attention {
  display: none;
}
#INDEX .information-time {
  text-align: center;
}
#PICKUP, #TEL {
  border: 2px solid #343434;
  border-radius: 20px;
  padding: 20px;
}
#PICKUP h2 {
  margin-top: 20px;
}
#PICKUP img, #NEWS img {
  width: 300px;
  height: 300px;
  filter: drop-shadow(5px 5px 5px);
}
#PICKUP .section-text {
  margin-left: 20px;
}
#PICKUP h3, #NEWS h3 {
  padding-top: 30px;
  margin-bottom: 20px;
}
.news:nth-of-type(even) {
  flex-direction: row-reverse;
}
.news_R {
  margin-left: 20px;
}
.news_L {
  margin-right: 20px;
}
.news:nth-of-type(n+2) {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 3px dotted #343434;
}
#event-contents {
  display: flex;
}
figure {
  margin-left: 35px;
  margin-right: 35px;
  max-width: 300px;
  border: 2px solid #343434;
  border-radius: 30px;
  overflow: hidden;
}
#INDEX figure h3 {
  padding: 10px;
  font-size: 36px;
  color: #fff;
}
figure span {
  font-size: 24px;
  color: #fff;
}
figure a {
  display: block;
  width: 300px;
  height: 200px;
}
.imgWrap {
  overflow: hidden;
  border-top: 2px solid #343434;
  border-bottom: 2px solid #343434;
}
.imgEff {
  position: relative;
  width: 300px;
  height: 200px;
  transition-duration: 0.8s;
  transform: rotateX(0deg);
  color: #fff;
  font-size: 20px;
}
.imgEff::before {
  position: absolute;
  width: 300px;
  height: 200px;
  transition-duration: 0.8s;
  opacity: 0;
  content: "詳細を見る！";
  background: radial-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 1));
  text-shadow: 0 0 10px #000;
  display: flex;
  justify-content: center;
  align-items: center;
}
.imgEff:hover {
  transform: rotateX(360deg) scale(1.2);
}
.imgEff:hover::before {
  opacity: 1;
  transform: scale(1.3);
  filter: blur(0);
}
figcaption {
  margin-top: 25px;
  padding: 10px;
  padding-top: 0;
  text-align: left;
  line-height: 1.2em;
}
figcaption .item {
  margin: 10px auto;
}
figcaption dt, figcaption dd {
  display: inline-flex;
}
figcaption dt {
  max-width: 75px;
  text-align: left;
}
figcaption div:last-of-type dt {
  display: inline-block;
  text-indent: 1em;
}
figcaption dt::after {
  content: ":";
}
figcaption dd {
  max-width: 200px;
  text-align: left;
}
#INDEX .Tuesday h3 {
  background-color: #f22e2e;
}
#INDEX .Wednesday h3 {
  background-color: #2e73f2;
}
#INDEX .Friday h3 {
  background-color: #f2d92e;
}
#WEEK p:nth-last-child(2) {
  margin-top: 50px;
}
#WEEK p span {
  margin-left: 20px;
}
#ACCESS iframe {
  max-width: 800px;
  max-height: 400px;
}
#ACCESS .information {
  margin: 0 auto;
  margin-top: 20px;
  max-width: 800px;
}
#ACCESS .item {
  margin-bottom: 20px;
  padding-bottom: 0.2em;
  border-bottom: 1px dotted #343434;
}
#ACCESS dt {
  max-width: 100px;
  text-align: left;
}
#ACCESS .time dl dt {
  margin: 0.5em 0 0.2em;
}
#ACCESS dd {
  max-width: 700px;
  text-align: left;
  text-indent: 5em;
}
.contents-flex {
  display: flex;
}
/*料金表*/
.price-explanation {
  margin: 1em auto;
}
.price-explanation dt {
  display: inline-block;
  margin-top: 0.2em;
  padding: 0.2em 0.5em;
  vertical-align: top;
  border-radius: 30px;
  line-height: 1.2em;
  background-color: #343434;
  color: #fff;
}
.price-explanation dt:nth-of-type(2) {
  margin-left: 3em;
}
.price-explanation .time-span {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.5em;
  line-height: 1.2em;
}
.time-span dt {
  margin-bottom: 0.5em;
}
.time-span dd {
  padding: 0.5em;
  border: 1px solid #343434;
}
.time-span dd:first-of-type {
  border-bottom: none;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.time-span dd:nth-of-type(2) {
  border-top: none;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.price-columns {
  display: flex;
  margin-top: 50px;
}
.price-list {
  margin: 0 5%;
  width: 50%;
  border: 2px solid #f2d92e;
  border-radius: 10px;
  border-collapse: separate;
  overflow: hidden;
}
.price-list th, .price-list td {
  display: flex;
  padding: 20px;
  text-align: left;
}
.price-list th {
  height: auto;
  position: relative;
  background-color: #f2d92e;
}
.price-list tr:nth-of-type(2) th::before {
  content: "";
  background-image: linear-gradient(to right, #fff, #fff 3px, transparent 3px, transparent 8px);
  background-size: 8px 1px;
  background-repeat: repeat-x;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.price-list br {
  display: none;
}
/*パスポート*/
#passport .plan {
  display: flex;
  margin: 50px auto;
  justify-content: center;
}
#passport dt {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 30px 0;
  border-radius: 10px;
  line-height: 20px;
  background-color: #f22e2e;
  color: #fff;
}
#passport .plan_02 dt {
  background-color: #2e73f2;
}
#passport .plan_03 dt {
  background-color: #f2d92e;
}
#passport dt span {
  font-size: 35px;
  font-weight: bold;
  color: #fff;
}
#passport dd table {
  display: inline-block;
  margin-left: 20px;
  border: 2px solid #f22e2e;
  border-radius: 10px;
  border-collapse: separate;
  overflow: hidden;
}
#passport .plan_02 dd table {
  border: 2px solid #2e73f2;
}
#passport .plan_03 dd table {
  border: 2px solid #f2d92e;
}
#passport dd th {
  position: relative;
  width: 5em;
  font-size: 30px;
  font-weight: bold;
  vertical-align: middle;
  background-color: #f22e2e;
  color: #fff;
}
#passport .plan_02 dd th {
  background-color: #2e73f2;
}
#passport .plan_03 dd th {
  background-color: #f2d92e;
}
#passport dd tr:nth-of-type(n+2) th::before {
  content: "";
  background-image: linear-gradient(to right, #fff, #fff 3px, transparent 3px, transparent 8px);
  background-size: 8px 1px;
  background-repeat: repeat-x;
  position: absolute;
  width: auto;
  height: 1px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
#passport dd td {
  margin: 0;
  padding: 0 1em;
  height: 40px;
  vertical-align: middle;
  position: relative;
}
#passport dd tr:nth-of-type(n+2) td::before {
  content: "";
  background-image: linear-gradient(to right, #f22e2e, #f22e2e 3px, transparent 3px, transparent 8px);
  background-size: 8px 1px;
  background-repeat: repeat-x;
  position: absolute;
  width: auto;
  height: 1px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
#passport .plan_02 dd tr:nth-of-type(n+2) td::before {
  background-image: linear-gradient(to right, #2e73f2, #2e73f2 3px, transparent 3px, transparent 8px);
}
#passport .plan_03 dd tr:nth-of-type(n+2) td::before {
  background-image: linear-gradient(to right, #f2d92e, #f2d92e 3px, transparent 3px, transparent 8px);
}
#passport dd span {
  display: inline-block;
  padding: 0;
  width: 7em;
  font-weight: bold;
}
#passport dd tr td:last-of-type {
  width: 7em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  font-size: 24px;
  font-weight: bold;
  background-color: #f22e2e;
  color: #fff;
  position: relative;
}
#passport .plan_02 dd tr td:last-of-type {
  background-color: #2e73f2;
}
#passport .plan_03 dd tr td:last-of-type {
  background-color: #f2d92e;
}
#passport dd tr:nth-of-type(n+2) td:last-of-type::before {
  content: "";
  background-image: linear-gradient(to right, #fff, #fff 3px, transparent 3px, transparent 8px);
  background-size: 8px 1px;
  background-repeat: repeat-x;
  position: absolute;
  width: auto;
  height: 1px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
/*イベントスケジュール*/
#EVENT .evnt-summary {
  margin-bottom: 200px;
}
#EVENT .section-text {
  margin: 10px auto 50px;
  padding: 0.5em;
  border: 2px solid #343434;
  border-radius: 30px;
  background-color: #f2d92e;
  font-size: 30px;
}
#EVENT .Tuesday .section-text {
  background-color: #f22e2e;
}
#EVENT .Wednesday .section-text {
  background-color: #2e73f2;
}
#EVENT .section-text span {
  padding-right: 0.5em;
  font-size: 50px;
  vertical-align: -10%;
  color: #fff;
}
.event-photo {
  max-width: 600px;
  height: auto;
}
#EVENT h4 {
  margin-top: 50px;
  margin-bottom: 0.5em;
  padding: 0.5rem 2rem;
  position: relative;
  font-size: 24px;
}
#EVENT h4 span {
  position: relative;
  padding: 0 1em;
  background-color: #fff;
}
#EVENT .evnt-summary h3 {
  margin-top: 50px;
  margin-bottom: 0.5em;
  padding: 0.5rem 2rem;
  font-size: 40px;
}
#EVENT .evnt-summary h4::before {
  content: "";
  background-image: linear-gradient(to right, #343434, #343434 3px, transparent 3px, transparent 8px);
  background-size: 8px 1px;
  background-repeat: repeat-x;
  position: absolute;
  width: auto;
  height: 1px;
  top: calc(50% - 1px);
  bottom: 0;
  left: 0;
  right: 0;
}
#EVENT .rule {
  text-align: left;
  list-style-type: decimal;
}
#EVENT .Friday .rule li:last-child {
  list-style-type: none;
}
/*ボードゲーム一覧*/
.newgame {
  position: relative;
}
.balloon3-right {
  position: absolute;
  display: inline-block;
  padding: 0 5px;
  width: 60px;
  height: 60px;
  top: 50%;
  left: -50%;
  transform: translate(-50%, -50%);
  line-height: 60px;
  text-align: center;
  color: #343434;
  font-size: 20px;
  font-weight: bold;
  background: #f2d92e;
  border-radius: 50%;
}
.balloon3-right:before {
  content: "";
  position: absolute;
  top: 50%;
  right: -23px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-left: 15px solid #f2d92e;
  z-index: 0;
}
#BOARDGAME table {
  display: inline-block;
  margin: 50px auto;
  max-width: 100%;
  border-collapse: collapse;
}
#BOARDGAME table tr {
  background-image: repeating-linear-gradient(90deg, #343434, #343434 3px, transparent 3px, transparent 8px);
  background-size: 8px 1px;
  background-position: bottom left;
  background-repeat: repeat-x;
}
#BOARDGAME table tr:first-of-type {
  background-image: repeating-linear-gradient(90deg, #343434, #343434 3px, transparent 3px, transparent 8px), repeating-linear-gradient(90deg, #343434, #343434 3px, transparent 3px, transparent 8px);
  background-position: top left, bottom left;
}
#BOARDGAME table th {
  position: relative;
  display: block;
  margin: 10px 0;
  max-width: 100px;
  height: auto;
}
#BOARDGAME table td {
  padding: 2em 3em;
}
/*フード＆ドリンクメニュー*/
#MENU .main-visual {
  margin-top: 1.5em;
  margin-bottom: -240px;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  text-align: center;
  position: relative;
  overflow: hidden;
}
#MENU .main-visual video {
  margin: 0 auto;
  z-index: 1;
  width: 100%;
  opacity: 0.3;
}
#MENU .menu-photo {
  width: auto;
  margin: 1.5em;
  max-height: 300px;
}
#MENU .food, #MENU .softdrink, #MENU .alcohol {
  display: flex;
  justify-content: space-around;
}
#MENU .alcohol {
  margin-top: 50px;
}
#MENU .food-menu, #MENU .softdrink-menu, #MENU .alcohol-menu {
  border: 2px solid #343434;
  border-radius: 20px;
  padding: 2em;
}
#MENU .food {
  align-items: flex-start;
}
#MENU .food-menu {
  padding-left: 5em;
  padding-right: 4em;
}
#MENU .food-menu table {
  padding-left: 3em;
  line-height: 1.5em;
}
#MENU .food-menu th {
  display: list-item;
  list-style-type: disc;
}
#MENU .food-menu td {
  padding-left: 2em;
}
#MENU .softdrink-menu {
  padding-left: 4em;
  padding-right: 4em;
  flex-direction: row;
}
#MENU .alcohol-menu {
  padding-left: 4em;
  padding-right: 4em;
  flex-direction: row;
}
#MENU .alcohol-menu small {
  font-size: 20px;
}
#MENU .softdrink-menu h3, #MENU .alcohol-menu h3 {
  font-size: 30px;
  padding-bottom: 1em;
}
#MENU .softdrink-menu ul, #MENU .alcohol-menu ul {
  list-style-type: disc;
  padding-left: 1em;
  line-height: 1.5em;
}
#MENU .alcohol-photo {
  display: flex;
  align-items: center;
  margin-left: 4em;
}
/*予約・お問い合わせフォーム*/
#TEL {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}
#TEL h2 {
  margin-top: 20px;
}
#TEL h3 {
  margin: 100px auto 50px;
  margin-top: 20px;
  font-size: 48px;
}
#TEL .icon-phone, #TEL .icon-phone-hang-up {
  font-size: 30px;
}
#TEL .icon-phone {
  display: none;
}
#TEL .icon-phone-hang-up:hover {
  display: none;
}
#TEL .icon-phone-hang-up:hover + .icon-phone {
  display: inline-block;
  box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.7);
}
#CONTACT .section-text .caution {
  margin-top: 1em;
  margin-bottom: 0.5em;
}
#CONTACT .section-text ul {
  padding-left: 1em;
  list-style-type: disc;
}
#CONTACT .section-text p:last-of-type {
  margin-top: 1em;
}
.contact-form {
  width: 100%;
  margin-top: 2em;
  border: 2px solid #f2d92e;
  border-radius: 10px;
  border-collapse: separate;
  overflow: hidden;
}
.contact-form th, .contact-form td {
  padding: 20px;
  text-align: left;
}
.contact-form th {
  width: 11em;
  height: auto;
  position: relative;
  background-color: #f2d92e;
  color: #343434;
}
.contact-form tr:nth-of-type(n+2) th::after {
  content: "";
  background-image: linear-gradient(to right, #fff, #fff 3px, transparent 3px, transparent 8px);
  background-size: 8px 1px;
  background-repeat: repeat-x;
  position: absolute;
  width: auto;
  height: 1px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.contact-form td {
  position: relative;
}
.contact-form tr:nth-of-type(n+2) td::after {
  content: "";
  background-image: linear-gradient(to right, #f2d92e 3px, transparent 3px, transparent 8px);
  background-size: 8px 1px;
  background-repeat: repeat-x;
  position: absolute;
  width: auto;
  height: 1px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #746f18;
}
.contact-form input[type="text"], .contact-form input[type="email"] {
  width: 20em;
}
.contact-form .contact-subject input[type="text"] {
  width: 100%;
}
.contact-form .radioBtn {
  display: block;
  margin: 10px 0;
}
.contact-form textarea {
  display: block;
  height: 10em;
}
.contact-form input[type="text"]:focus, .contact-form input[type="email"]:focus, .contact-form textarea:focus {
  background-color: rgba(242, 217, 46, 0.1);
  outline: none;
}
::placeholder {
  color: rgba(52, 52, 52, 0.5);
}
.formBtn input {
  margin-top: 1em;
  border: none;
  display: inline-block;
  width: 100px;
  height: 50px;
  text-align: center;
  background-color: #f2d92e;
  font-size: 24px;
  line-height: 50px;
  border-radius: 10px;
  color: #746f18;
  box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
}
.formBtn input:hover {
  box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.7);
}
input[type="submit"] {
  -webkit-appearance: none;
}
/*各種ボタン*/
button {
  font-family: "komorebi gothic";
  border: none;
  outline: none;
}
.Btn a, button {
  margin-top: 20px;
  padding: 5px 0;
  display: inline-block;
  width: 250px;
  height: 50px;
  text-align: center;
  background-color: #f2d92e;
  font-size: 24px;
  line-height: 40px;
  border-radius: 10px;
  color: #746f18;
  box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
}
.Tuesday .Btn a {
  background-color: #f22e2e;
  color: #7c1c1c;
}
.Wednesday .Btn a {
  background-color: #2e73f2;
  color: #2b4068;
}
.Btn a:hover, button:hover {
  cursor: pointer;
  box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.7);
}
/*ハンバーガーメニュー*/
#menu-btn-check {
  display: none;
}
.menu-btn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(-30%, -50%);
  display: flex;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  z-index: 90;
  background-color: #f2d92e;
}
#menu-btn-check:checked ~ .menu-btn span {
  background-color: rgba(255, 255, 255, 0); /*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
  bottom: 0;
  transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
  top: 0;
  transform: rotate(-45deg);
}
.menu-btn span, .menu-btn span:before, .menu-btn span:after {
  content: '';
  display: block;
  height: 3px;
  width: 35px;
  border-radius: 3px;
  background-color: #343434;
  position: absolute;
}
.menu-btn span:before {
  bottom: 10px;
}
.menu-btn span:after {
  top: 10px;
}
.menu-content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%; /*leftの値を変更してメニューを画面外へ*/
  z-index: 80;
  background-color: #f2d92e;
  transition: all 0.5s; /*アニメーション設定*/
}
.menu-content ul {
  padding: 70px 10px 0;
}
.menu-content ul li {
  margin: 30px auto;
  border-bottom: solid 1px #343434;
  list-style: none;
}
.menu-content ul li a {
  display: block;
  width: 100%;
  font-size: 24px;
  box-sizing: border-box;
  color: #343434;
  text-decoration: none;
  padding: 9px 15px 10px 0;
  position: relative;
}
.menu-content ul li a::before {
  content: "";
  width: 7px;
  height: 7px;
  border-top: solid 2px #343434;
  border-right: solid 2px #343434;
  transform: rotate(45deg);
  position: absolute;
  right: 11px;
  top: 16px;
}
#menu-btn-check:checked ~ .menu-content {
  left: 0; /*メニューを画面内へ*/
}
/*フォーカスイン*/
.text-focus-in {
  animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2021-4-6 15:1:39
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
/**
 * ----------------------------------------
 * animation text-focus-in
 * ----------------------------------------
 */
@keyframes text-focus-in {
  0% {
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    filter: blur(0px);
    opacity: 1;
  }
}
/*モーダルウィンドウ*/
.modal {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /*width: calc(100% + 17px);*/ /*スクロールバーの非表示化*/
  overflow: scroll;
  background: rgba(0, 0, 0, 0.6);
  z-index: 99999;
  animation-name: show;
  animation-duration: 0.5s;
}
.modal-content {
  position: relative;
  margin-top: 2em;
  background-color: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-height: 80%;
  border-radius: 20px;
}
.modal-content::after {
  display: block;
  width: 1px;
  height: 2em; /* padding-bottom分 */
  content: '';
}
@keyframes show {
  0% {
    display: none;
    opacity: 0;
  }
  100% {
    display: block;
    opacity: 1;
  }
}
.modal-header {
  padding: 0.5em;
  background-color: #f2d92e;
  font-size: 36px;
  color: #fff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.modal-flex {
  display: flex;
}
.modal-flex-flex {
  flex-direction: row;
}
.modal-flex-flex p {
  font-size: 24px;
  margin-bottom: 0.5em;
  line-height: 1em;
}
.modal-flex-flex .rule {
  list-style-type: decimal;
  padding-left: 2em;
}
.modal-body {
  padding: 1em;
  line-height: 1.5em;
  background-color: #fff;
}
.modal-body > p {
  margin-bottom: 1em;
}
#PICKUP .modal-body p img {
  margin-right: 1.5em;
  margin-bottom: 1.5em;
  width: 300px;
  height: 300px;
  filter: none;
  border-radius: 50%;
}
.modal-footer {
  position: relative;
  background-color: #f2d92e;
  padding: 1em;
  font-size: 24px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
.modal-footer a:hover {
  text-decoration: underline;
}
.close {
  color: #fff;
  float: right;
  font-size: 30px;
}
.close:hover, .close:focus {
  color: #000;
  cursor: pointer;
}
/*フッター*/
footer {
  margin-top: 240px;
  width: 100vw;
  background-color: #f2d92e;
}
#footer-contents {
  display: flex;
  margin: 0 auto;
  padding-top: 20px;
  max-width: 1140px;
  position: relative;
}
.pageTop a {
  position: absolute;
  right: 0;
  top: -50px;
  width: 220px;
  border-bottom: 50px solid #f2d92e;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  height: 0;
  text-align: center;
  line-height: 25px;
  font-size: 20px;
}
.pageTop .icon-arrow-up2 {
  padding-top: 5px;
}
.pageTop a:hover {
  top: -30px;
}
footer .footer-caption {
  margin-bottom: 10px;
  font-size: 24px;
  line-height: 1em;
}
footer a img {
  width: 400px;
  height: 200px;
}
footer a img:hover {
  opacity: 0.7;
}
footer .time {
  margin-left: 40px;
  padding-right: 20px;
  border-right: 2px dotted #343434;
}
footer .time dt {
  display: inline-block;
  margin-top: 10px;
  margin-bottom: 5px;
  padding: 0.2em 0.5em;
  border-radius: 30px;
  background-color: #343434;
  color: #f2d92e;
}
footer .sns_tel {
  margin-left: 20px;
  flex-direction: column;
}
footer .sns {
  margin-bottom: 2.5em;
}
footer .sns ul {
  padding-top: 0.5em;
}
footer .sns li {
  display: inline-block;
  margin: 0 20px;
}
footer .sns li:first-of-type {
  margin-left: 0;
  margin-right: 18px;
}
footer .sns a {
  font-size: 30px;
}
footer .sns a:hover {
  opacity: 0.5;
}
footer .tel {
  margin-top: 20px;
}
footer .tel .tel-num, footer .icon-whatsapp {
  font-size: 20px;
  display: inline-block;
}
footer .tel .icon-whatsapp {
  margin-left: 0.5em;
  font-size: 30px;
}
footer .tel a:hover {
  opacity: 0.5;
}
footer #copyright {
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}
footer #copyright small {
  display: block;
}
/*icon font*/
@font-face {
  font-family: 'icomoon';
  src: url('fonts/icomoon.eot?i254pr');
  src: url('fonts/icomoon.eot?i254pr#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?i254pr') format('truetype'), url('fonts/icomoon.woff?i254pr') format('woff'), url('fonts/icomoon.svg?i254pr#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  /*  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;*/
}
.icon-phone:before {
  content: "\e942";
}
.icon-phone-hang-up:before {
  content: "\e943";
}
.icon-arrow-up2:before {
  content: "\ea3a";
}
.icon-facebook2:before {
  content: "\ea91";
}
.icon-instagram:before {
  content: "\ea92";
}
.icon-whatsapp:before {
  content: "\ea93";
}
.icon-twitter:before {
  content: "\ea96";
}
/*メディアクエリ*/
@media screen and (max-width:480px) {
  header {
    position: relative;
    background-color: #f2d92e;
  }
  h1 {
    margin-left: 10px;
  }
  nav {
    display: none;
  }
  .hamburger-menu {
    display: inline;
  }
  #header img {
    width: 100vw;
    height: 60vh;
  }
  .title-text {
    font-size: 60px;
  }
  .background-img {
    background-size: 50%;
  }
  #PRICE .background-img {
    background-image: none;
  }
  #EVENT .background-img {
    background-image: url("../img/swords.svg"), url("../img/meeting.svg");
    background-repeat: no-repeat;
    background-position: left top 10%, right bottom 5%;
  }
  #BOARDGAME .background-img {
    background-image: url("../img/sword.svg"), url("../img/tarot.svg");
    background-repeat: no-repeat;
    background-position: left top 2%, right bottom 5%;
  }
  #MENU .background-img:first-of-type {
    background-image: none;
  }
  #MENU .background-img:nth-of-type(2) {
    background-image: url("../img/wine-bottle.svg");
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: left bottom;
  }
  main {
    margin: 0 5%;
  }
  section {
    margin-top: 100px;
  }
  h2 {
    font-size: 35px;
  }
  h2 br {
    display: inline;
  }
  #INDEX .l-attention {
    display: none;
  }
  #INDEX .s-attention {
    display: inline;
  }
  #INDEX .s-attention img {
    width: 30%;
    margin-bottom: 10px;
    margin-right: 5%;
  }
  #INDEX .s-attention img:nth-of-type(3), #INDEX .s-attention img:nth-of-type(5) {
    margin-right: 0;
  }
  .contents-flex {
    flex-direction: column;
  }
  #PICKUP img, #NEWS img {
    width: 150px;
    height: 150px;
  }
  #open-modal {
    display: none;
  }
  .news:nth-of-type(even) {
    flex-direction: column;
  }
  .news_L, .news_R {
    margin: 0;
    margin-top: 20px;
  }
  #WEEK #event-contents {
    flex-direction: column;
  }
  #WEEK .Tuesday, #WEEK .Wednesday, #WEEK .Friday {
    margin-bottom: 20px;
  }
  #WEEK .Btn {
    display: block;
  }
  iframe {
    width: 80vw;
    height: 60vh;
  }
  .price-list {
    width: 45%;
    margin: 0 auto;
  }
  .price-list:first-of-type tr:first-of-type th {
    line-height: 2em;
  }
  .price-list br {
    display: inline;
  }
  #passport .plan {
    margin: 50px 0px;
    flex-direction: column;
  }
  #passport dt {
    width: auto;
    height: auto;
    margin-bottom: 10px;
    padding: 0.5em;
  }
  #passport .plan_01 dt {
    padding-left: 0.835em;
    padding-right: 0.835em;
  }
  #passport dt span {
    line-height: 1.2em;
  }
  #passport dt br {
    display: none;
  }
  #passport dd table {
    margin: 0;
  }
  .balloon3-right {
    display: none;
  }
  #BOARDGAME table {
    width: 300px;
  }
  #BOARDGAME table tr {
    display: flex;
    align-items: center;
  }
  #BOARDGAME table th {
    width: 100%;
  }
  #BOARDGAME table td {
    width: 100%;
    margin: 0 0.2em;
    padding: 1em 0;
  }
  #BOARDGAME table td:first-of-type {
    width: 150%;
  }
  #MENU .menu-photo, #MENU .main-visual {
    display: none;
  }
  #MENU .food-menu td {
    display: block;
    text-align: right;
  }
  #TEL h3 {
    font-size: 30px;
  }
  #TEL .icon-phone, #TEL .icon-phone-hang-up {
    width: 180px;
  }
  #CONTACT .contact-form th, #CONTACT .contact-form td {
    display: block;
    width: 100%;
  }
  .contact-form input[type="text"], .contact-form input[type="email"] {
    width: 100%;
  }
  #footer-contents {
    flex-direction: column;
    align-items: center;
  }
  footer a img {
    width: 300px;
    height: 200px;
  }
  footer .time {
    border-right: none;
  }
  footer .sns_tel {
    margin-top: 20px;
    margin-left: 0;
  }
  footer .sns {
    margin-bottom: 1em;
  }
}