@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;700&family=Marcellus&family=Noto+Serif+JP:wght@400;600&family=Quicksand&display=swap');

/* =============================================
全体の共通設定
============================================= */

html {
    font-size: 62.5%;
}

body {
    width: 100%;
    color: #333;
    font-family: 'Noto Serif JP', '游明朝', 'Yu Mincho', '游明朝体', 'YuMincho', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'ＭＳ Ｐ明朝', 'MS PMincho', serif;
    font-size: 1.6rem;
    line-height: 1.8;
    letter-spacing: 0.1em;
    position: relative;
}

.loading {
    position: fixed;
    z-index: 10000;
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    background: #fdfdfd;
}

.loading.hide {
    opacity: 0;
    pointer-events: none;
    transition: opacity 500ms;
}

.loading .circle {
    display: block;
    position: relative;
    top: calc( 50% - 20px );
    width: 40px;
    height: 40px;
    margin: 0 auto;
    border: 8px solid #e0e0e0;
    border-top: 7px solid #33210f;
    border-radius: 50px;
    animation: loading 700ms linear 0ms infinite normal both;
}

@keyframes loading {
    0% { transform: rotate( 0deg ); }
    100% { transform: rotate( 360deg ); }
}

img {
    max-width: 100%;
    height: auto;
}

.sp-br {
    display: none;
}

/* コンテンツ幅と中央揃え */
.inner {
    max-width: 960px;
    margin: 0 auto;
}

/* 余白調整 */
section {
    margin-bottom: 50px;
    padding-top: 100px;
}

/* リンク関係 */
a {
    text-decoration: none;
    color: #333;
    transition: .3s;
}

a:hover {
    color: #999;
}

/* 見出し */
.sec-title {
    position: relative;
}

h3 {
    color: #ffe8d1;
    font-family: 'Marcellus', serif;
    font-size: 10rem;
}

.line {
    display: inline-block;
    position: absolute;
    bottom: 50px;
    width: 25px;
    height: 2px;
    background-color: #333;
    z-index: 2;
}

.sub-title {
    font-size: 3rem;
    font-weight: 600;
    position: absolute;
    left: 45px;
    bottom: 25px;
    z-index: 2;
}

.target {
    /* 最初は非表示 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(30px);
    transition: opacity 1s, visibility 1s, transform 1s;
}

/* フェードイン時に入るクラス */
.is-fadein {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

::selection {
    background: #ffe8d1;
}
::-moz-selection {
    background: #ffe8d1;
}

/* =============================================
ヘッダー
============================================= */

header {
    display: flex;
    align-items: center;
    height: 80px;
    gap: 80px;
    position: fixed;
    z-index: 999;
    transition: .3s;
}

header.scroll {
	background: rgba(255,255,255,.7);
    width: 100%;
}

header h1 {
    font-family: 'Marcellus', serif;
    font-size: 1.8rem;
    letter-spacing: 0.2em;
    padding-left: 45px;
}

header .gNav ul {
    display: flex;
    gap: 50px;
    font-family: 'Quicksand', sans-serif;
    font-size: 1.4rem;
}

/* =============================================
mv
============================================= */

.mv {
    padding: 0;
    background: rgb(245,205,166);
    background: url(../images/noise.png)repeat 0 0, linear-gradient(180deg, rgba(245,205,166,1) 0%, rgba(245,245,245,1) 85%, rgba(255,255,255,1) 100%);
}

.mv .container {
    position: relative;
    background: url(../images/main.png) no-repeat;
    background-position: right top;
    background-size: 90vh;
    height: 100vh;
}

.mv .main-title {
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    font-family: 'Marcellus', serif;
}

.mv .main-title h2 {
    font-size: 7.2rem;
    line-height: 1.2;
}

.mv .main-title p {
    font-size: 2.4rem;
}

.mv .copy {
    writing-mode: vertical-rl;
    font-size: 3.6rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: #33210f;
    position: absolute;
    top: 10vh;
    right: 8vw;
}

/* =============================================
About
============================================= */

.about .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.about .about-message {
    width: 50%;
    margin-top: 60px;
}

/* .about .name {
    margin-top: 40px;
    text-align: right;
} */

.about .name {
    margin-top: 20px;
    font-family: 'Marcellus', serif;
    text-align: right;
    font-size: 2.0rem;
    letter-spacing: 0.2em;
}
.about .prof-pict {
    width: 40%;
    position: relative;
}

.about .prof-pict .bg-img {
    background: url(../images/shadow.jpg) no-repeat;
    background-position: left bottom;
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 70%;
    bottom: -10%;
    right: -20%;
    z-index: -1;
}

/* =============================================
Menu
============================================= */

.menu {
    padding-top: 200px;
    margin-bottom: 0;
}

.menu .sec-title {
    position: relative;
    height:68px;
}

.menu .bg-color {
    background-color: #ffe8d1;
    padding-bottom: 100px;
}

.orange {
    position: absolute;
    top: -105px;
    z-index: -1;
}

.white {
    position:relative;
    width:100%;
    height:68px;
    overflow:hidden;
}

.white::after{
    position:absolute;
    top: -105px;
    content:"Menu";
    font-family: 'Marcellus', serif;
    white-space: pre;
    font-size: 10rem;
    color:white;
    z-index:1;
}

.menu .menu-group {
    margin-top: 75px;
    display: flex;
    justify-content: space-between;
}

.menu .menu-card {
    width: 300px;
    height: 478px;
    background-color: #fff;
    border-radius: 25px;
    position: relative;
}

.menu .card-text {
    width: 85%;
    margin: 25px auto;
}

.menu h4 {
    font-size: 3.2rem;
    color: #33210f;
    font-family: 'Marcellus', serif;
}

.menu .menu-detail {
    height: 60%;
    line-height: 1.5;
    letter-spacing: 0;
}

.menu .price {
    text-align: right;
    color: #33210f;
    position: absolute;
    bottom: 25px;
    right: 20px;
}

.menu .menu-num {
    font-size: 2.8rem;
    margin-right: 5px;
    font-family: 'EB Garamond', serif;
    font-weight: bold;
}

.menu .comment {
    text-align: center;
    margin-top: 25px;
}

.menu .eyebrow-text {
    margin: 75px auto 50px;
    text-align: center;
    font-size: 1.8rem;
    color: #33210f;
    font-weight: bold;
    position: relative;
}

.menu .eyebrow-text::before {
    content: '';
    display: inline-block;
    background-color: #33210f;
    width: 25px;
    height: 1px;
    position: absolute;
    top: 17px;
    left: 35%;
}

.menu .eyebrow-text::after {
    content: '';
    display: inline-block;
    background-color: #33210f;
    width: 25px;
    height: 1px;
    position: absolute;
    top: 17px;
    right: 35%;
}

.menu .slick01 {
    margin: 0 auto;
    max-width: 960px;
    width: 100%;
}

.menu .slider-img {
    margin: 0 10px;
}

.menu .slider-img img {
    height: auto;
    width: 100%;
}

.slick-prev {
    left: 0;
    z-index: 1;
}
 
.slick-next {
    right: 0;
}

.slick-prev,.slick-next{
    width: 50px;
    height: 50px;
}
 
.slick-prev:before, .slick-next:before {
    font-size: 50px;/*少し大きくする*/
}

/* =============================================
CTA
============================================= */

.cta {
    background: url(../images/cta-bg.jpg) no-repeat;
    background-size: cover;
    padding-bottom: 100px;
}

.cta .inner {
    background-color: rgba(255,255,255,0.7);
    padding: 85px;
    text-align: center;
}

.cta h4 {
    font-size: 2.4rem;
}

.cta p {
    font-size: 1.4rem;
}

.cta p a {
    color: #666;
    text-decoration: underline;
    cursor: pointer;
}

.cta p a:hover {
    color: #ccc;
}

.cta .reserve-btn a {
    display: block;
    width: 300px;
    height: 80px;
    margin: 30px auto 0;
    padding: 22px 0;
    background-color: #33210f;
    color: #ffe8d1;
    font-size: 1.8rem;
    transition: .5s;
}

.cta .reserve-btn a span {
    display: inline-block;
    border-bottom: 1px solid #ffe8d1;
    border-right: 1px solid #ffe8d1;
    width: 10px;
    height: 10px;
    transform: rotate(-45deg);
    margin-left: 10px;
    transition: .5s;
}

.cta .reserve-btn a:hover {
    background-color: #ffe8d1;
    color: #33210f;
}

.cta .reserve-btn a:hover span {
    border-bottom: 1px solid #33210f;
    border-right: 1px solid #33210f;
}

/* =============================================
モーダルウィンドウ
============================================= */

.Modal {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    margin: auto;
    width: 75vw;
    height: 80vh;
    padding: 32px;
    color: #333;
    background-color: #fff;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s;
}

.Modal__isOpen {
    visibility: visible;
    opacity: 1;
}

.Overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9998;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.2);
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s;
}

.Overlay__isOpen {
    visibility: visible;
    opacity: 1;
}

.modal-title {
    font-size: 2.4rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 30px;
}

.modal-text {
    height: 80%;
    overflow-y: scroll;
    font-size: 1.4rem;
    line-height: 1.5;
}

.modal-text ul {
    list-style: square;
    padding-left: 2em;
}

.modal-subtitle {
    font-size: 1.8rem;
    font-weight: 600;
    margin-top: 20px;
}

.close-btn {
	text-align: center;
	margin-top: 10px;
}

.modal-close {
  display: inline-block;
  padding: 10px 140px;
  background-color: #fff;
  border: 1px solid #33210f;
  border-radius: 3px;
  color: #33210f;
  margin: 10px auto;
  cursor: pointer;
}

.Modal ::-webkit-scrollbar {
    border-radius: 10px;
    width: 10px;  /* スクロールバーの幅 */
  }
  
  /* スクロールバーのツマミ部分 */
.Modal ::-webkit-scrollbar-thumb {
    background-color: #b6b6b6;  /* ツマミの色を変更 */
    border-radius: 10px;  /* 角を丸くする */
}

/* =============================================
Point
============================================= */

.point .point-detail {
    position: relative;
    margin: 60px auto;
}

.point .point-bg {
    background-color: #fdf0e3;
    width: 100vw;
    height: 200px;
    z-index: -10;
    position: absolute;
    bottom: 0;
    left: 0;
}

.point .point-detail .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.point .point-text {
    width: 60%;
}

.point .point-pict {
    width: 35%;
}

.point .p-title {
    font-size: 3.2rem;
    font-weight: 600;
    margin: 30px auto 10px;
    line-height: 1.5;
}

/* =============================================
Flow
============================================= */

.flow .flow-block {
    background: url(../images/cloud.jpg) no-repeat;
    background-size: cover;
    padding: 30px 0;
    position: relative;
}

.flow .flow-step {
    padding: 30px 50px;
    display: flex;
    gap: 30px;
    align-items: center;
}

.flow .circle {
    width: 112px;
    height: 112px;
    border-radius: 100%;
    background: rgba(255,234,205,0.8);
    background: linear-gradient(0deg, rgba(219,233,245,1) 0%, rgba(255,234,205,1) 100%);
    font-family: 'Marcellus', serif;
    text-align: center;
    padding: 20px 0;
    position: relative;
}

.flow .circle .no {
    display: block;
    font-size: 4rem;
    line-height: 1;
}

.flow .flow-step .circle::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 4px;
    height: 100%;
    border-left: 4px #dbe9f5 solid;
    border-image: linear-gradient(0deg, rgba(219,233,245,1) 0%, rgba(255,234,205,1) 100%);
    border-image-slice: 1;
    transform: translateX(-50%);
}

.flow .flow-step:last-child .circle::after {
    content: '';
    border-left: none;
}

.flow .flow-text {
    width: 80%;
}

.flow .step-title {
    font-size: 3.2rem;
    font-weight: 600;
}

/* =============================================
Access
============================================= */

.access {
    display: flex;
    justify-content: space-between;
    gap: 60px;
}

.access .googlemap {
    margin-top: 60px;
}

.access .container>p {
    margin: 10px 0;
}

.access .map-link {
    text-decoration: underline;
    font-family: 'Marcellus', serif;
}

.access .arrow {
    display: inline-block;
    position: relative;
    padding-left: 30px;
    transition: .3s;
}

.access .map-link a:hover .arrow::before {
    border-top: 2px solid #999;
    border-right: 2px solid #999;
}

.access .map-link a:hover .arrow::after {
    background: #999;
}

.access .arrow::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 13px;
    width: 10px;
    height: 10px;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
}

.access .arrow::after {
    content: "";
    position: absolute;
    top: -7px;
    left: 12px;
    width: 14px;
    height: 2px;
    background: #333;
    transform: rotate(135deg); 
}

/* =============================================
予約ボタン
============================================= */

.fix-reservebtn a {
    display: block;
    position: fixed;
    right: 3vw;
    bottom: 5vh;
    z-index: 100;
    width: 190px;
    height: 190px;
    border-radius: 100%;
    background: #33210f;
    transition: .5s;
    text-align: center;
    padding: 70px 0;
    color: #ffe8d1;
}

.fix-reservebtn a:hover {
    transform: scale(1.2);
}

.fix-reservebtn .btn-en {
    font-family: 'Quicksand', sans-serif;
    font-size: 1.4rem;
}

/* =============================================
Footer
============================================= */

footer {
    background: #33210f;
    color: #fff;
    width: 100vw;
    height: 130px;
    margin-top: 150px;
    padding: 30px 0;
}

footer ul {
    display: flex;
    align-items: start;
    gap: 30px;
}

footer p {
    margin-top: 30px;
    text-align: right;
    font-family: 'Quicksand', sans-serif;
    font-size: 1.2rem;
}

/* =============================================
レスポンシブ
============================================= */

@media only screen and (max-width:1024px) {

    /* About */
    .about .prof-pict .bg-img {
        right: -5%;
    }
}

@media only screen and (max-width:959px) {

    body {
        font-size: 1.4rem;
    }

    body.active {
        height: 100%;
        overflow: hidden;
    }

    .inner {
        margin: 0 50px;
    }

    .sp-br {
        display: block;
    }

    h3 {
        font-size: 8rem;
    }
    
    .sub-title {
        font-size: 2.4rem;
        bottom: 30px;
    }

    /* ハンバーガーメニュー */
    header .gNav.panelactive {
        /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
        position: fixed;
        z-index: 1000;
        top: 0;
        width: 100%;
        height: 100vh;
    }

    header .circle-bg{
        position: fixed;
        z-index: 3;
        /*丸の形*/
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: #fff;
        /*丸のスタート位置と形状*/
        transform: scale(0);/*scaleをはじめは0に*/
        right:-50px;
        top:-50px;
        transition: all .6s;/*0.6秒かけてアニメーション*/
    }

    header .circle-bg.circleactive {
        transform: scale(50);/*クラスが付与されたらscaleを拡大*/
    }

    header .gNav.panelactive {
        display: block; /*クラスが付与されたら出現*/
    }

   /*ナビゲーション*/
   header .gNav ul {
        opacity: 0;/*はじめは透過0*/
        visibility: hidden;
        /*ナビゲーション天地中央揃え*/
        position: absolute;
        z-index: 1000;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        display: block;
        font-size: 2.4rem;
    }

    /*背景が出現後にナビゲーションを表示*/
    header .gNav.panelactive ul {
        opacity:1;
        visibility: visible;
    }

    /* 背景が出現後にナビゲーション li を表示*/
    header .gNav.panelactive ul li{
        animation-name:gnaviAnime;
        animation-duration:1s;
        animation-delay:.2s;/*0.2 秒遅らせて出現*/
        animation-fill-mode:forwards;
        opacity:0;
    }

    @keyframes gnaviAnime{
        0% {
        opacity: 0;
        }
        100% {
        opacity: 1;
        }
    }

    /*リストのレイアウト設定*/
    header .gNav li{
        text-align: center; 
        list-style: none;
    }

    header .gNav li a{
        color: #333;
        text-decoration: none;
        padding:10px;
        display: block;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-weight: bold;
    }

    /*========= ボタンのためのCSS ===============*/
    header .openbtn{
        position:fixed;
        top:10px;
        right: 10px;
        z-index: 9999;/*ボタンを最前面に*/
        cursor: pointer;
        width: 50px;
        height:50px;
    }
        
    /*×に変化*/	
    header .openbtn span{
        display: inline-block;
        transition: all .4s;
        position: absolute;
        left: 14px;
        height: 3px;
        border-radius: 2px;
        background-color: #33210f;
        width: 45%;
    }

    header .openbtn span:nth-of-type(1) {
        top:15px;	
    }

    header .openbtn span:nth-of-type(2) {
        top:23px;
    }

    header .openbtn span:nth-of-type(3) {
        top:31px;
    }

    header .openbtn.active span:nth-of-type(1) {
        top: 18px;
        left: 18px;
        transform: translateY(6px) rotate(-45deg);
        width: 30%;
    }

    header .openbtn.active span:nth-of-type(2) {
        opacity: 0;
    }

    header .openbtn.active span:nth-of-type(3){
        top: 30px;
        left: 18px;
        transform: translateY(-6px) rotate(45deg);
        width: 30%;
    }

    /* mv */
    .mv .container {
        background-size: 60vh;
    }
    
    .mv .main-title {
        top: 80%;
        left: 50%;
    }
    
    .mv .main-title p {
        font-size: 2.2rem;
    }

    /* Menu */
    .orange {
        top: -85px;
    }
    
    .white::after{
        top: -85px;
        content:"Menu";
        font-size: 8rem;
    }

    .menu .menu-card {
        width: 32%;
        height: 370px;
    }

    .menu .card-text {
        margin: 15px auto;
    }
    
    .menu h4 {
        font-size: 2.8rem;
    }
    
    .menu .menu-detail {
        height: 50%;
        line-height: 1.3;
        font-size: 1.4rem;
    }
    
    .menu .price {
        bottom: 10px;
        font-size: 1.4rem;
        right: 10px;
    }
    
    .menu .menu-num {
        font-size: 2.0rem;
    }

    .menu .eyebrow-text::before {
        content: '';
        left: 28%;
    }
    
    .menu .eyebrow-text::after {
        content: '';
        right: 28%;
    }

    /* Point */
    .point .point-text {
        width: 52%;
    }
    
    .point .point-pict {
        width: 45%;
    }

    .point .p-title {
        font-size: 2.4rem;
        margin: 20px auto 10px;
    }

    .point .p-text {
        font-size: 1.4rem;
    }

    /* Flow */
    .flow .flow-text {
        width: 70%;
    }

    /* Access */
    .access .googlemap {
        width: 50%;
        height: auto;
    }

    /* 予約ボタン */
    .fix-reservebtn a {
        width: 130px;
        height: 130px;
        padding: 43px 0;
        font-size: 1.2rem;
    }
    
    .fix-reservebtn .btn-en {
        font-size: 1.0rem;
    }

}

@media only screen and (max-width:599px) {

    .inner {
        margin: 0 25px;
    }

    /* 余白調整 */
    section {
        margin-bottom: 30px;
        padding-top: 30px;
    }

    h3 {
        font-size: 6rem;
    }
    
    .line {
        bottom: 35px;
    }
    
    .sub-title {
        font-size: 1.8rem;
        left: 45px;
        bottom: 20px;
    }

    /* header */
    header h1 {
        padding-left: 25px;
        line-height: 1.5;
    }

    /* mv */
    .mv .container {
        background-size: 53vh;
    }

    .mv .main-title {
        top: 70%;
    }

    .mv .main-title h2 {
        font-size: 4.8rem;
        line-height: 1.2;
    }

    .mv .main-title p {
        font-size: 1.4rem;
    }

    .mv .copy {
        font-size: 2.2rem;
        line-height: 1.5;
    }

    /* About */
    .about .container {
        flex-direction: column-reverse;
    }

    .about .about-message {
        width: 100%;
    }

    .about .prof-pict {
        width: 100%;
    }

    /* Menu */
    .menu {
        padding-top: 110px;
    }

    .orange {
        top: -60px;
    }
    
    .white::after{
        top: -60px;
        content:"Menu";
        font-size: 6rem;
    }

    .menu .line {
        bottom: 50px;
    }
    
    .menu .sub-title {
        bottom: 35px;
    }

    .menu .menu-group {
        margin-top: 30px;
        display: block;
    }

    .menu .menu-card {
        width: 300px;
        height: 400px;
        margin: 20px auto;
    }

    .menu .eyebrow-text {
        margin: 50px auto 30px;
        font-size: 1.6rem;
    }

    .menu .eyebrow-text::before {
        content: '';
        top: 15px;
        left: 10%;
    }
    
    .menu .eyebrow-text::after {
        content: '';
        top: 15px;
        right: 10%;
    }

    /* CTA */
    .cta {
        padding-bottom: 60px;
    }
    
    .cta .inner {
        padding: 50px 20px;
    }
    
    .cta h4 {
        font-size: 2.0rem;
        padding-bottom: 10px;
    }
    
    .cta p {
        font-size: 1.2rem;
    }
    
    .cta .reserve-btn a {
        width: 250px;
        height: 60px;
        padding: 15px 0;
        font-size: 1.6rem;
    }

    /* モーダルウィンドウ */
    .Modal {
        width: 80vw;
        height: 80vh;
        padding: 32px 15px;
    }
    
    .modal-title {
        font-size: 1.8rem;
        margin-bottom: 20px;
    }
    
    .modal-text {
        font-size: 1.2rem;
        line-height: 1.5;
    }
    
    .modal-subtitle {
        font-size: 1.4rem;
        margin-top: 15px;
    }
    
    .modal-close {
      padding: 10px 50px;
    }

    /* Point */
    .point .point-detail {
        padding-bottom: 30px;
    }

    .point .point-bg {
        height: 300px;
    }
    
    .point .point-detail .inner {
        flex-direction: column-reverse;
    }

    .point .point-text {
        width: 100%;
    }
    
    .point .point-pict {
        width: 100%;
    }

    /* Flow */
    .flow .flow-step .circle::after {
        content: '';
        border-left: none;
    }

    .flow .flow-step {
        padding: 15px 20px;
        display: block;
        position: relative;
    }

    .flow .circle {
        width: 75px;
        height: 75px;
        padding: 12px 0;
    }

    .flow .circle .no {
        font-size: 2.4rem;
    }

    .flow .flow-text {
        width: 100%;
    }

    .flow .step-title {
        font-size: 2.4rem;
        position: absolute;
        top: 30px;
        left: 115px;
    }

    .flow .step-text {
        padding-top: 30px;
    }

    .flow .flow-arrow {
        width: 100px;
        height: 2px;
        background: #33210f;
        margin: 50px 0 0 auto;
        position: relative;
    }

    .flow .flow-arrow::before {
        content: 'SWIPE';
        font-family: 'Quicksand', sans-serif;
        color: #33210f;
        position: absolute;
        top: -25px;
        right: 50px;
    }

    .flow .flow-arrow::after {
        content: '';
        width: 20px;
        height: 20px;
        border-right: 2px #33210f solid;
        transform: rotate(135deg);
        position: absolute;
        top: -23px;
        right: -10px;
    }

    /* Access */
    .access {
        display: block;
    }

    .access .googlemap {
        width: 100%;
        height: 300px;
    }

    /* 予約ボタン */
    .fix-reservebtn a {
        width: 80vw;
        height: 60px;
        padding: 15px 0;
        font-size: 1.6rem;
        left: 50%;
        bottom: 3vh;
        transform: translateX(-50%);
        border-radius: 0%;
    }

    .fix-reservebtn a:hover {
        transform: translateX(-50%);
    }

    .fix-reservebtn .btn-en {
        display: none;
    }

    /* Footer */
    footer {
        margin-top: 60px;
        height: 200px;
    }

    footer p {
        margin-top: 100px;
    }
}