@charset "UTF-8";


/* 共通部分 */
html {
    font-size: 100%;
    /* scroll-behavior: smooth; */

}

body {
    font-family: "yu-gothic-pr6n","ten-mincho-text", "vdl-logog","sans-serif";
    line-height: 1.7;
    color: #000;    /* 文字の色 */
    background-color: #fff6f8;
    padding-top: 5.2rem;
    padding-bottom: 4rem;
}
a {
    text-decoration: none;
}
img {
    max-width: 100%;
}
.wrapper {
    max-width: 1120px;
    margin: auto;
    padding: 0 1.7rem;
}

/* background */
.cover-index {
    background-image: url(../images/bgimage-index.jpg);
    background-size: cover;
    background-position: top;
    height: 40vh;
    position: relative;
}

.cover-index h2 {
    font-family: "vdl-logog";
    color: #fff6f8;
    font-size: 2.2rem;
    position: absolute;
    bottom: 5%;
    padding-left: 1.2rem;
    padding-bottom: 1rem;
    text-shadow: 0 2px 4px #0000008a;     /* text-shadow: X方向 Y方向 ぼかし 色 */
}

/* loading */
.loading {
    background-color: #fff6f8;
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.loading p {
    font-size: 2rem;
    font-family: "sans-serif";
    font-weight: bold;
    color: #440200;
}
.loading img {
    width: 2.5rem;
    margin-bottom: 0.5rem;
}

/* fadein */
.item {
    transform: translateY(15vh);
    opacity: 0;
    visibility: hidden;
    transition: 1s;
}
.fadein {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

/* btn */
.btn-wrap {
    text-align: right;
}
.btn {
    display: inline-block;
    font-size: 1rem;
    background-color: #440200;
    color: #fff;
    border-radius: 26px;
    padding: 0.6rem 1.75rem;
    transition: 0.25s ease-in;
    font-weight: bold;
    box-shadow: 0 4px 0 #898989;
}
.btn:hover {
  transform: translateY(4px);


  /* box-shadowを「0 5px 0」から「0 0 0」に変化させて、押された感を演出する */
  box-shadow: 0 0 0 #333;
}

/* header */
header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    background-color: #410907ed;    /* ヘッダーの背景色 */
    backdrop-filter: blur(8px);     /* 背景をぼかして視認性を上げている */
    box-shadow: 0 3px 5px #00000046;
}
.flex-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.2rem 1rem;
}
h1 {
    line-height: 0;
}
.pagelogo-header {
    width: 130px;
}
.flex-header nav {
    display: flex;
    align-items: center;
}
nav img {
    width: 66px;
}
.pc-main-nav {
    display: none;
}

/* nav */
.main-nav {
    background-color: #440200;
    position: absolute;
    z-index: 2;
    top: 100px;
    right: 0;
    overflow: hidden;
    transform: translateX(110%);    /* 少しドロワーメニューがはみ出すのを防ぐ */
    transition: 0.4s ease;
    padding: 1rem;
}
.main-nav li {
    text-align: center;
    margin: 2rem 0;
    list-style-type: none;
}
.main-nav li a{
    color: #fff;
    font-family: "vdl-logog";
    font-size: 1.2rem;
    display: block;
}
.main-nav.open-menu {
    transform: translateX(0);   /* ドロワーメニューが表示される */
}


/* index */
.about-index h3 {
    font-size: 2rem;
    font-family: "ten-mincho-text";
    margin-top: 4rem;
    margin-bottom: 1rem;
}
.about-index img {
    padding: 0 0;
}
.about-index p {
    margin-top: 1.2rem;
    margin-bottom: 2.2rem;
    text-align: justify;
}

.games-index {
    margin-bottom: 8rem;
}
.games-index h3 {
    font-size: 2rem;
    font-family: "ten-mincho-text";
    margin-top: 4rem;
    margin-bottom: 1rem;
}
.games-index p {
    margin-top: 1.2rem;
    margin-bottom: 2.2rem;
    text-align: justify;
}
.games-index img {
    height: 250px;
    margin: 0 1.5rem;
}


/* about */
.top-image-about {
    display: flex;
    justify-content: flex-end;
}
.top-image-about img {
    width: 300px;
    margin-top: 2rem;
}
.about h2 {
    font-size: 2rem;
    font-family: "ten-mincho-text";
    margin-top: 6rem;
    margin-bottom: 1rem;
}
.about .top-about h2 {
    font-size: 2rem;
    font-family: "ten-mincho-text";
    margin-top: 2rem;
    margin-bottom: 1rem;
}
.about p {
    text-align: justify;
}

.shop-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem 1.5rem;
}
/* 最初は画像を消しておき、JS側でディレイを持たせて一つずつ出現させる */
.img-gallery {
    opacity: 0;
}
.about section .wrapper {
    margin-bottom: 1.5rem;
}
.charges-list {
    width: 100%;
    border: 2px solid #440200;
    text-align: center;
    font-size: 12px;
    border-spacing: 0;
    border-collapse: collapse;
    margin-top: 1.5rem;
    background-color: #fffcfc;
    z-index: -10;
}
.charges-list th {
    padding: 10px;
    border: 2px solid;
    z-index: 5;
}
.charges-list th:nth-of-type(2),
.charges-list th:nth-of-type(3) {
    background-color: #fff2c4;
}
.charges-list td {
    padding: 6px;
    border: 2px solid
}
.charges-list thead th:first-child {
    position: relative;  /* position: absolute;の基準 */
}
.charges-list thead th:first-child::before {    /* 三角形を描画 */
    content: "";
    position: absolute; /* 三角形を自由に描画するのに必要 */
    inset: 0;   /* top: 0; right: 0; bottom: 0; left: 0;と同じ。疑似要素を、親要素と同じ大きさで描きたい時に使う */
    background: #fff2c4;
    clip-path: polygon(100% 0, 0 0, 100% 100%); /* 右上、左上、右下の三点を指定し、三角形を描画 */
    z-index: -1;    /* 背面に配置 */
}

.drink {
    margin-bottom: 8rem;
}
.drink img {
    width: 100px;
}
.drink .image-coffee {
    display: flex;
    justify-content: flex-end;
}
.soft-drink {
    width: 100%;
    border: 2px solid #440200;
    font-size: 12px;
    border-spacing: 0;
    border-collapse: collapse;
    margin-top: 1.5rem;
    font-family: "vdl-logog";
}
.soft-drink th {
    padding: 10px;
    border: 2px solid;
    font-size: 1.3rem;
    background-color: #fff3c9;
}
.soft-drink td {
    padding: 6px;
    border: 2px solid;
    font-size: 1rem;
    background-color: #fffaea;
}
.soft-drink td:nth-of-type(2) {
    text-align: center;
}
.alcohol {
    width: 100%;
    border: 2px solid #440200;
    font-size: 12px;
    border-spacing: 0;
    border-collapse: collapse;
    margin-top: 1.5rem;
    font-family: "vdl-logog";
}
.alcohol th {
    padding: 10px;
    border: 2px solid;
    font-size: 1.3rem;
    background-color: #dadcff;
}
.alcohol td {
    padding: 6px;
    border: 2px solid;
    font-size: 1rem;
    background-color: #f7f7ff;
}
.alcohol td:nth-of-type(2) {
    text-align: center;
}

/* games */
.games-top {
    margin-top: 3rem;
}
.games-top h2 {
    font-size: 2.2rem;
    text-align: center;
    font-family: "ten-mincho-text";
    margin-top: 4rem;   
    margin-bottom: 1.5rem;
}
.games-top h3 {
    margin-bottom: 2rem;
    font-weight: bold;
    text-align: center;
}
.grid-games {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 1rem 2rem;
    margin-bottom: 7rem;
}
.games-btn {
    border: #000 2px solid;
    text-align: center;
    font-size: 1.5rem;
    padding: 0.5rem 0.8rem;
    background-color: #fff;
    color: #000;
    display: block;
    transition: 0.5s;
    z-index: 1;
    border-radius: 6px;
    font-weight: bold;
    position: relative;
    transition: 0.3s;
}
.games-btn::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background: #440200;
    transform-origin: 100% 0%;
    transform: scaleY(0);   /* 非表示にしておく */
    transition: transform ease 0.3s;
}
.games-btn:hover {
    color: #fff;  /* 背景色が茶色になるので、文字は白くする */
}
.games-btn:hover::before {
  transform-origin: 50% 100%;
  transform: scaleY(1);  /* 表示する */
}

.game-intro {
    margin-bottom: 6rem;
}
.gamelist h4 {
    font-size: 1.8rem;
    margin-bottom: 2rem;
}
.gamelist h5 {
    font-size: 1.6rem;
    font-family: "vdl-logog";
}
.gamelist p {
    margin-bottom: 2rem;
    text-align: justify;
}
.gamelist a img{
    width: 800px;
    transition: 0.5s ease;
}
.gamelist a img:hover{
    transform: scale(1.05); /* 5%拡大 */
}
.flex-games {
    margin-bottom: 3rem;
}

/* reserve */
.reserve h2 {
    font-size: 2.2rem;
    text-align: center;
    font-family: "ten-mincho-text";
    margin-top: 4rem;   
    margin-bottom: 3rem;
}
.reserve h3 {
    margin-bottom: 1rem;
    font-weight: bold;
    text-align: center;
}
.reserve p {
    font-size: 0.9rem;
    margin-bottom: 1rem;
    font-weight: bold;
    text-decoration: underline;
    text-align: center;
}

.reserve-form {
    width: 100%;
    height: 1800px;
}

/* back-to-top */
button {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 12px;
  bottom: 100px;
  width: 50px;
  height: 50px;
  cursor: pointer;
  z-index: 100;
}
button:hover {
    translate: 0 -2px;
}


/* footer */
.wrapper-footer {
    max-width: 1120px;
    margin: auto;
    padding: 0 2.5rem;
}
footer {
    border-top: #000 1px solid;
    margin-top: 4rem;
    padding-top: 2rem;
}
.heading-footer  {
    text-align: left;
    font-size: 2rem;
    margin-bottom: 1.5rem;
}
footer dl {
    margin-bottom: 0.8rem;
}
.pagelogo-footer {
    width: 210px;
}
.nav-footer {
    list-style-type: none;
    font-size: 1.4rem;
    font-weight: bold;
    display: flex;
    /* 縦方向に並べる */
    flex-flow: column;
    justify-content: space-around;
    gap: 2rem;
}

.flex-footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin: auto;
    gap: 2rem;
    margin-top: 1.5rem;
}
.flex-footer:nth-of-type(2){
    align-items: center;
}
.flex-footer .nav-footer a {
    color: #000;
    transition: 0.3s;
}
.flex-footer .nav-footer a:hover {
    color: #6b6b6b;
}
.sns-group {
    text-align: right;
    display: flex;
    /* 縦方向に並べる */
    flex-flow: column;
    justify-content: center;
    gap: 2rem;
}
.sns-group a {
    line-height: 0;
}
footer .sns-group img {
    width: 40px;
    margin-right: 1rem;
}
.copyright {
    text-align: center;
    font-size: 1rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.flex-bottom {
    display: flex;
    justify-content: space-between;
    border-top: #000 solid 2px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background-color: #fff5d2;
}
.flex-bottom a {
    display: flex;  /* 予約アイコンとpタグを横並びにする */
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: #000;
}
.reserve-footer,
.tel-footer {
    justify-content: center;
}
.reserve-footer {
    flex: 4.2;
}
.reserve-footer p {
    font-size: 1.1rem;
    font-weight: bold;
}
.reserve-mark {
    width: 40px;
}
.tel-mark {
    width: 60px;
    border-left: 2px solid #000;
    padding: 0.6rem 0.5rem 0.6rem 0.5rem;
}











/* デスクトップ版（750px以上） */
@media (min-width: 750px){

/* 共通部分 */
body {
    padding-bottom: 0;
}
.wrapper {
    padding: 0 10rem;
}

/* background */
.cover-index {
    background-image: url(../images/bgimage-index-l.jpg);
    background-position: center;
    background-size: cover;
    height: 80vh;   /* 画面下からの距離 */
    position: relative;
}

.cover-index h2 {
    font-family: "vdl-logog";
    color: #fff6f8;
    font-size: 5rem;
    position: absolute;
    left: 1.5%;
    bottom: 5%;
    text-shadow: 0 2px 4px #0000008a;     /* text-shadow: X方向 Y方向 ぼかし 色 */
}

/* btn */
.btn-wrap {
    text-align: right;
}
.btn {
    font-size: 1.2rem;
}

/* header */
header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    background-color: #410907ed;    /* ヘッダーの背景色 */
    backdrop-filter: blur(8px);     /* 背景をぼかして視認性を上げている */
    box-shadow: 0 3px 5px #00000046;
}
.flex-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 2.6rem 0.6rem;
    gap: 50px;
}
h1 {
    line-height: 0;
}
.pagelogo-header {
    width: 130px;
}
.flex-header nav {
    display: flex;
    align-items: center;
}
nav img {
    display: none;
}
.pc-main-nav {
    display: block;
    display: flex;
    list-style-type: none;
}
.pc-main-nav li {
    margin-right: 4rem;
}
.pc-main-nav a {
    color: #fff;
    font-family: "vdl-logog";
    font-size: 1.2rem;
    transition: 0.3s;
}
.pc-main-nav a:hover {
    color: #9c9c9c;
}


/* nav */
.main-nav {
    background-color: #440200;
    position: absolute;
    z-index: 2;
    top: 100px;
    right: 0;
    overflow: hidden;
    transform: translateX(110%);    /* 少しドロワーメニューがはみ出すのを防ぐ */
    transition: 0.4s ease;
    padding: 1rem;
}
.main-nav li {
    text-align: center;
    margin: 2rem 0;
    list-style-type: none;
}
.main-nav li a{
    color: #fff;
    font-family: "vdl-logog";
    font-size: 1.2rem;
    display: block;
}
.main-nav.open-menu {
    transform: translateX(0);   /* ドロワーメニューが表示される */
}

/* index */
.index h3 {
    font-size: 3rem;
    margin-top: 4rem;
    margin-bottom: 1rem;
}
.about-index p {
    font-size: 1.4rem;
    margin-top: 1.2rem;
    margin-bottom: 2.2rem;
}
.about-index img {
    display: block;
    margin: 0 auto;
    width: 800px;
}
.games-index {
    margin-bottom: 10rem;
}
.games-index img {
    display: block;
    margin: 0 auto;
    height: 400px;
    margin: 0 1rem;
}
.gamesimg-index .wrapper{
    padding: 0 10rem;
}
.games-index p {
    font-size: 1.5rem;
    margin-top: 1.2rem;
    margin-bottom: 2.2rem;
}


/* about */
.flex-about {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
    margin-bottom: 6rem;
}
.top-image-about {
    order: 2;
}
.top-image-about img {
    width: 500px;
    margin-top: 0;
}
.about .flex-about .wrapper {
    padding: 1.5rem 4rem 1.5rem;
}
.top-about {
    order: 1;
}
.about .top-about h2 {
    font-size: 2.5rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.about p {
    font-size: 1.2rem;
}
.about section .wrapper {
    margin-bottom: 1.5rem;
}

.private-room {
    display: block;
    margin: 0 auto;
    width: 800px;
}
.private-room h2 {
    margin-top: 8rem;
}
.private-room .wrapper {    /* wrapperの効果をレスポンシブした時だけ消す */
    padding: 0;
}

.charge h2 {
    margin-top: 8rem;
}
.charges-list {
    font-size: 1.2rem;
    margin-top: 2.5rem;
}
.charges-list th {
    padding: 10px;
    border: 2px solid;
}
.charges-list th:nth-of-type(2),
.charges-list th:nth-of-type(3) {
    background-color: #fff2c4;
}

.charges-list td {
    padding: 8px;
    border: 2px solid;
}


.drink {
    margin-bottom: 10rem;
}
.drink img {
    width: 120px;
}
.soft-drink {
    margin-top: 2rem;
}
.soft-drink th {
    padding: 0.8rem;
    font-size: 1.4rem;
}
.soft-drink td {
    padding: 0.6rem;
    font-size: 1.1rem;
}
.alcohol {
    margin-top: 2rem;
}
.alcohol th {
    padding: 0.8rem;
    font-size: 1.4rem;
}
.alcohol td {
    padding: 0.6rem;
    font-size: 1.1rem;
}

/* games */
.games-top {
    margin-top: 5rem;
}
.games-top h2 {
    font-size: 2.5rem;  
    margin-bottom: 2rem;
}
.games-top h3 {
    font-size: 1.5rem;
    margin-bottom: 2rem;
}
.grid-games {
    gap: 1.2rem 2rem;
    margin-bottom: 10rem;
}
.games-btn {
    padding: 0.8rem 0.75rem;
    font-size: 1.61rem; /* 1.6remだとなぜか少しバグが起こる */
}
.games-btn::before {
    transform-origin: 100% 0%;
}
.games-btn:hover::before {
  transform-origin: 50% 100%;
}

.flex-games {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5rem;
    margin-top: 3rem;
    margin-bottom: 6rem;
}
.flex-games div {
    margin-top: 1rem;
}

.title-games {
    order:2
}

.game-intro {
    margin-bottom: 6rem;
}
.gamelist h4 {
    font-size: 1.8rem;
    margin-top: 10rem;
    margin-bottom: 1rem;
}
.gamelist h5 {
    font-size: 1.6rem;
    font-family: "vdl-logog";
    margin-bottom: 1.2rem;
}
.gamelist p {
    margin-bottom: 2rem;
    font-size: 1.2rem;
}
.gamelist .flex-games a {
    display: flex;
    align-items: center;
}
.gamelist img{
    width: 25vw;
    object-fit: cover;
}

.games {
    margin-bottom: 10rem;
}

/* reserve */

.reserve h2 {
    font-size: 2.2rem;
    text-align: center;
    font-family: "ten-mincho-text";
    margin-top: 4rem;   
    margin-bottom: 3rem;
}
.reserve h3 {
    margin-bottom: 1rem;
    font-weight: bold;
    text-align: center;
}
.reserve p {
    font-size: 0.9rem;
    margin-bottom: 1rem;
    font-weight: bold;
    text-decoration: underline;
    text-align: center;
}

.reserve-form {
    width: 100%;
    height: 1800px;
}

/* back-to-top */
button {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 25px;
  bottom: 40px;
  width: 80px;
  height: 80px;
  cursor: pointer;
  transition: transform 0.3s;   /* transformを入れないと挙動が変になる */
}

.back-to-top:hover {
  transform: translate(0, -5px);
}


/* footer */
.wrapper-footer {
    padding: 0 10rem;
}
footer {
    margin-top: 6rem;
    padding-top: 3rem;
}
.heading-footer  {
    font-size: 2.5rem;
    margin-bottom: 2rem;
}
footer dl {
    margin-bottom: 1.5rem;
}
footer dt {
    font-size: 1.5rem;
}
footer dd {
    font-size: 1.2rem;
}
.pagelogo-footer {
    width: 250px;
}
.nav-footer {
    list-style-type: none;
}
.nav-footer li {

    font-size: 1.5rem;
}
.flex-footer {
    display: flex;
    justify-content: space-between;
    margin: auto;
    align-items: flex-start;
    gap: 4rem;
    margin-top: 3rem;
}
.flex-footer .nav-footer a {
    color: #000;
}
.sns-group {
    gap: 2rem;
}
footer .sns-group img {
    width: 40px;
    margin-right: 1rem;
}
.copyright {
    text-align: center;
    font-size: 1.2rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
}
.flex-bottom {
    display: none;
}

.tel {
    width: 60px;
    border-left: 2px solid #000;
    padding: 0.6rem 0.5rem 0.6rem 0.5rem;
}
.reserve-footer {
    display: flex;
    align-items: center;
    margin: auto;
}
.reserve-footer p {
    font-weight: bold;
    margin-left: 1rem;
}






}