@charset "utf-8";
/*
Theme Name: miraitokyo-base
Theme URI: https://github.com/tidythemes/blankslate
Description: BlankSlateの子テーマを独自に調整したブランクテーマ
Template: blankslate
Author:IRODORI
Version:0.0.2
*/

/*	◆ CSS Document ◆
ベースになるCSSコードや、:rootで変数にしたものはbase.cssにあります。
こちらはヘッダーやフッターなど、全ページ共通の項目用のCSSです。 */

/*--------------------------------------------------
	Header
--------------------------------------------------*/
header{
	margin: .15rem auto;
  background-color: var(--white);
}
/* モバイル用ヘッダーの背景色（既存の金色を維持） */
@media (max-width: 767px) {
  header {
      background: var(--gold);
      color: var(--white);
      padding-block: .1rem;
      margin: 0 auto;
  }
}

/* ヘッダー固定位置スタイル（全デバイス対応） */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    margin: 0;
    padding: .12rem;
    transform: translateY(0);
    opacity: 1;
}

.site-header.header-hidden {
    transform: translateY(-100%) !important;
    opacity: 0;
}

.site-header.header-visible {
    transform: translateY(0) !important;
    opacity: 1;
}

/* bodyのpadding-topはJavaScriptで動的に設定 */
header p.flex{
    align-items: center;
    gap: .1rem;
}
header .logo{
    width: 2.5rem;
}
    header .logo img{
        width: 100%;
        max-height: 1rem;
    }
header nav{
    font-size: .14rem;
}
	header nav ul.flex{
		gap: .1rem;
	}
    header nav li::after{
        content: "|";
        margin-left: .1rem;
    }
    header nav li:last-of-type::after{
        content: "";
    }
	header nav a:hover{
		border-bottom: 3px solid var(--gold);
	}
header .book_btn{
    width: 1.2rem;
}
    header .book_btn img{
        width: 100%;
    }

@media (max-width: 767px) {
  body {
    /* padding-top: calc(6vh + .4rem); */
  }
  header{
    background: var(--gold);
    color: var(--white);
    padding-block: .1rem;
    margin: 0 auto;
    position: relative;
    z-index: 1000;
  }
  .sp_header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 6vh;
    padding-inline: 0;
    gap: 1em;
  }
    header .logo {
      width: auto;
      margin-left: .6rem;
    }
    header .logo img{
      height: auto;
      width: 96%;
    }
  .bookmark_icon{
    width: .7rem;
    font-size: .16rem;
    line-height: .6;
    text-align: center;
    height: auto;
  }
  .bottom_img{
    margin-block: .3rem .15rem;
  }
  .bottom_img img{
    width: 70vw;
  }
}

/*--------------------------------------------------
	HBM
--------------------------------------------------*/
@media (max-width: 767px) {
.hbmenu_full_fade {
    position: relative;
    z-index: 3;
    top: 0;
    left: 0;
    height: 6vh;
    display: flex;
    align-items: center;
    }
  .hbmenu_full_fade .toggle {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    width: 10vw;
    height: 6vh;
    cursor: pointer;
    opacity: 0;
  }

  .hbmenu_full_fade .toggle:checked+.hamburger>span {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }
    .hbmenu_full_fade .toggle:checked+.hamburger>span:before,
    .hbmenu_full_fade .toggle:checked+.hamburger>span:after {
      top: 0;
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
    }
    .hbmenu_full_fade .toggle:checked+.hamburger>span:after {
      opacity: 0;
    }

  .hbmenu_full_fade .toggle:checked~.menu {
    visibility: visible;
    pointer-events: auto;
    overflow-y: scroll;
  }

  /* ハンバーガーメニューが開いている時にbodyのスクロールを無効化 */
  body.menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }
    .hbmenu_full_fade .toggle:checked~.menu>div {
      transition-duration: 0.75s;
      -webkit-transform: scale(1);
      transform: scale(1);
    }
      .hbmenu_full_fade .toggle:checked~.menu>div>ul {
        opacity: 1;
      }
        .hbmenu_full_fade .toggle:checked~.menu>div>ul li {
          transition-delay: 0.4s;
        }

    .hbmenu_full_fade .toggle:checked:hover+.hamburger>span {
      -webkit-transform: rotate(225deg);
      transform: rotate(225deg);
      background: var(--gold);
    }
    .hbmenu_full_fade .toggle:checked+.hamburger>span {
      background: var(--gold);
    }

  .hbmenu_full_fade .hamburger {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    display: block;
    height: 6vh;
    padding: 0.15em;
    cursor: pointer;
    border-radius: 0 0.12em 0.12em 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
    .hbmenu_full_fade .hamburger>span {
      position: relative;
      top: 50%;
      display: block;
      height: 2px;
      transition: all 0.4s ease;
      background: var(--white);
    }
      .hbmenu_full_fade .hamburger>span:before,
      .hbmenu_full_fade .hamburger>span:after {
        position: absolute;
        z-index: 3;
        top: -15px;
        left: 0;
        display: block;
        height: 2px;
        content: '';
        transition: all 0.4s ease;
        background: inherit;
      }
      .hbmenu_full_fade .hamburger>span:after {
        top: 15px;
      }
      .hbmenu_full_fade .hamburger>span,
      .hbmenu_full_fade .hamburger>span:before,
      .hbmenu_full_fade .hamburger>span:after {
        width: 10vw;
      }

  .hbmenu_full_fade .menu {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    padding-block: .8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--white) url("./images/common/bg_circle.webp") no-repeat;
    background-size: 110% auto;
    background-position-x: calc(100% + -350%);
    background-position-y: calc(100% + 35%);
  }
    .hbmenu_full_fade .menu>ul {
      display: block;
      width: 80vw;
      max-height: 100vh;
      margin: 0;
      padding-block: .6em;
      list-style: none;
      transition: opacity 0.4s ease;
      text-align: center;
    }
    .hbmenu_full_fade .menu .menu-item {
      display: block;
      position: relative;
      padding: .55em 0;
      border-bottom: 1px solid var(--gold);
    }
      .hbmenu_full_fade .menu .menu-item a {
        position: relative;
        display: inline;
        cursor: pointer;
        transition: color 0.4s ease;
        color: var(--black);
        font-size: .32rem;
        font-weight: bold;
        text-decoration: none;
      }
        .hbmenu_full_fade .menu .menu-item a:after {
          position: absolute;
          z-index: 1;
          bottom: -0.15em;
          left: 0;
          width: 0;
          height: 2px;
          content: '';
          transition: width 0.4s ease;
          background: #fff;
        }

  .hbmenu_full_fade .menu_social-links {
    width: 100%;
    margin-top: .35rem;
  }
    .hbmenu_full_fade .menu_social-list {
      display: flex;
      justify-content: center;
      gap: .15rem;
      margin: 0;
      padding: 0;
      list-style: none;
    }
      .hbmenu_full_fade .menu_social-list li {
        width: .6rem;
        max-width: 22vw;
      }
        .hbmenu_full_fade .menu_social-list img {
          display: block;
          width: 100%;
          height: auto;
        }

  .hbmenu_full_fade .menu_cta {
    width: 100%;
    margin-top: .4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
  }
    .hbmenu_full_fade .menu_cta p {
      width: 80%;
      max-width: 3rem;
      margin: 0;
    }
      .hbmenu_full_fade .menu_cta img {
        display: block;
        width: 100%;
        height: auto;
      }
  /*----------------------------
* アニメーション部分   --*/
  .menu {
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s linear;
  }
  .menu.is-active {
    pointer-events: auto;
    opacity: 1;
  }

  .hbm_logo{
    width: 1.5rem;
  }

}

/*--------------------------------------------------
	Booking Overlay
--------------------------------------------------*/
.booking-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .4rem;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.booking-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}
  .booking-overlay__panel {
    position: relative;
    width: min(92vw, 5.5rem);
    padding: .55rem .55rem .7rem;
    background: var(--white);
    text-align: center;
    border-radius: .1rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-height: calc(100vh - .6rem);
    overflow-y: auto;
  }
    .booking-overlay__close {
      position: absolute;
      top: .2rem;
      right: .2rem;
      width: .3rem;
      height: .3rem;
      background: transparent;
      border: none;
      cursor: pointer;
    }
      .booking-overlay__close:before,
      .booking-overlay__close:after {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 2px;
        content: '';
        background: var(--gold);
      }
      .booking-overlay__close:before {
        transform: translate(-50%, -50%) rotate(45deg);
      }
      .booking-overlay__close:after {
        transform: translate(-50%, -50%) rotate(-45deg);
      }

  .booking-overlay__title {
    margin-bottom: .18rem;
    font-family: var(--font-heading);
    font-size: .34rem;
    font-weight: 900;
    letter-spacing: .04rem;
    color: var(--gold);
  }

  .booking-overlay__subtitle {
    margin-bottom: .4rem;
    font-size: .2rem;
    line-height: 1.4;
  }

  .booking-overlay__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
  }

    .booking-overlay__content > *:not(.booking-overlay__icons):not(.booking-overlay__cta) {
      margin: 0;
    }

  .booking-overlay__icons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .28rem;
    margin: 0 auto .4rem;
    padding: 0;
    list-style: none;
    max-width: 3.6rem;
  }
    .booking-overlay__icon-link {
      display: block;
      width: 100%;
    }
      .booking-overlay__icon-link img {
        width: 100%;
        height: auto;
        display: block;
      }

  .booking-overlay__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
  }
    .booking-overlay__cta-item {
      width: 100%;
      max-width: 3.4rem;
      margin: 0;
    }
      .booking-overlay__cta-item img {
        width: 100%;
        height: auto;
        display: block;
      }

@media (min-width: 768px) {
  .booking-overlay__panel {
    padding: .7rem .75rem .85rem;
    max-width: 7rem;
  }
  .booking-overlay__title {
    font-size: .4rem;
    letter-spacing: .05rem;
  }
  .booking-overlay__subtitle {
    font-size: .22rem;
  }
  .booking-overlay__icons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .3rem;
    max-width: 4.6rem;
  }
  .booking-overlay__cta-item {
    max-width: 3.4rem;
  }
}

body.overlay-open {
  overflow: hidden;
}

@media (max-width: 767px) {
  body.overlay-open {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
  }
}

@media (max-width: 767px) {
  .booking-overlay {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }
    .booking-overlay__panel {
      width: 100%;
      max-width: none;
      height: 100vh;
      max-height: none;
      border-radius: 0;
      padding: calc(.6rem + env(safe-area-inset-top, 0)) .32rem calc(.8rem + env(safe-area-inset-bottom, 0));
      margin: 0;
      justify-content: center;
    }
      .booking-overlay__close {
        top: calc(.3rem + env(safe-area-inset-top, 0));
        right: .35rem;
      }
      .booking-overlay__icons {
        max-width: 100%;
        gap: .2rem;
      }
        .booking-overlay__icon-link img {
          width: 72%;
          margin: 0 auto;
        }
}

/*--------------------------------------------------
	Footer
--------------------------------------------------*/
#footer {
  background-color: #785a2a;
  padding: .6rem 0 .5rem;
  color: var(--white);
  font-size: 0.16rem;
  font-family: "Noto Sans", sans-serif;
  font-weight: 300;
}
  #footer .container_foot {
    width: var(--container_size_head);
      max-width: calc(100% - .3rem);
      /* 100% - 30px */
      margin: 0 auto;
    }
  #footer .foot_wrap {
		display: flex;
		justify-content: space-between;
	}
		#footer section .foot_left p {
      font-size: 0.16rem;
		}
		#footer section .foot_left p:last-of-type {
      margin-top: .2rem;
		}
    .sns_icon {
      display: flex;
      margin-top: .1rem;
    }
    .sns_icon li {
      margin-right: .1rem;
    }
    #footer section .foot_right{
			width: 50%;
			display: flex;
			justify-content: space-between;
		}
	#footer .nav{
    line-height: 1.7;
  }
		#footer .nav a{
      font-size: 0.16rem;
			color: var(--white);
		}
    #footer .nav li:first-of-type {
      margin-bottom: .1rem;
      pointer-events: none;
      cursor: default;
    }
  #foot_info ul li {
    display: flex;
    align-items: center;
  }
    #foot_info ul li img {
      margin-right: .1rem;
    }
  .foot_wrap02 {
    display: flex;
    margin-top: .4rem;
  }
  #copyright {
    font-size: 0.16rem;
    line-height: 1;
  }
  #footer .foot_menu ul {
    display: flex;
    margin-left: .1rem;
    align-items: center;
  }
  #footer .foot_menu li {
    border-left: 1px solid #fff;
    padding: 0 .1rem;
  }
@media (max-width:768px) {
  #footer .container_foot {
    max-width: calc(100% - 1rem);
  }
  #footer .foot_wrap {
    flex-direction: column;
  }
  #footer section .foot_left p.sp_logo img:first-of-type{
    width: 25%;
  }
  #footer section .foot_left p.sp_logo img:last-of-type {
    margin-top: .1rem;
    width: 80%;
  }
  #footer section .foot_left p:last-of-type {
    font-size: .24rem;
  }
  #footer section .sns_icon li {
    width: .5rem;
    height: auto;
  }
  #footer section .sns_icon li img {
    width: 100%;
    height: auto;
  }
  #footer .nav a{
    font-size: 0.2rem;
  }
  #footer section .foot_right {
    width: 100%;
    flex-wrap: wrap;
    margin-top: .2rem;
    font-size: 0.2rem;
  }
  #footer .nav li:first-of-type,
  #footer .nav li:first-of-type a {
    font-size: .24rem!important;
  }
    #footer .nav .sub-menu {
      margin-left: 1rem;
    }
    #footer .nav:nth-of-type(2) {
      width: 100%;
      order: 3;
      margin-top: .2rem;
    }
        #footer .nav:nth-of-type(2) ul{
          display: flex;
          gap: 0;
          flex-wrap: wrap;
          line-height: 1.6;
        }
        #footer .nav:nth-of-type(2) ul li:first-of-type{
          width: 100%;
        }
        #footer .nav:nth-of-type(2) ul li:nth-of-type(n+2){
          width: calc((100% - 1.1rem) / 2);
          margin-right: .5rem;
        }
    #footer .nav:last-of-type {
      order: 2;
    }
    .foot_wrap02 {
      flex-direction: column;
    }
  #copyright {
    line-height: 1.6;
  }
  #footer .foot_menu ul {
    margin: .05rem 0 0 0;
  }

}

/* TOPに戻るボタン（全画面共通） */
.back-to-top {
  position: fixed;
  bottom: .2rem;
  right: 0.2rem;
  width: .6rem;
  height: .6rem;
  background: var(--gold);
  color: var(--white);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 500;
  font-size: .2rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
  transform: translateY(.2rem);
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: #9a7a3a;
  transform: scale(1.1);
}