@charset "utf-8";
/*
Theme Name:mirr official web site
Author:エム・エム・エム スタジオ
Version:1.0.0
*/
/*------------------------------------------------------------ 
	デフォルトスタイル	全ページ共通css
------------------------------------------------------------*/

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-size: 1.2rem;
  background-color: #dfdfdf;
  -webkit-text-size-adjust: 100%;
  overflow-y: scroll;
}

html {
  font-size: 62.5%;
}

div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
figure,
figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", "Yu Gothic",
    "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", Osaka, "MS PGothic", arial,
    helvetica, sans-serif;
  font-size: 1.2rem;
  line-height: 1.5;
  font-weight: normal;
  vertical-align: baseline;
  background: transparent;
}

ul,
ol {
  list-style-type: none;
}

img,
svg {
  vertical-align: middle;
}

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

.img-cover {
  width: 100%;
  object-fit: cover;
  object-position: 50%;
}

a {
  text-decoration: none;
  color: inherit;
}

.txt {
  color: #ffffff;
  font-size: 1.4rem;
  font-weight: 300;
  font-style: normal;
}

.txt-en {
  color: #ffffff;
  font-size: 1.4rem;
  font-weight: 300;
  font-style: normal;
  font-family: sonsie one;
  letter-spacing: 0.3rem;
}

li {
  list-style: none;
}

.flex-box {
  display: flex;
}

/*ローディングアニメーションなし*/

/*------------------------------------------------------------ 
    カスタムコード
------------------------------------------------------------*/

/* ボーダーボトム */
.bd-btm {
  border-bottom: #cecece solid 1px;
  padding-bottom: 200px;
}
.bd-top {
  padding-top: 100px;
  border-top: #c9c9c9 solid 1px;
}
.bd-top2 {
  padding-top: 10px;
  border-top: #eeeeee solid 1px;
}

.border-box {
  border: #000000 solid 1px;
  padding: 2% 4%;
  border-radius: 5px;
  width: 45%;
  margin-top: 20px;
}

/* フレックス */
.flex {
  display: flex;
}
/* フレックス、スペースbetween */
.flex-btw {
  display: flex;
  justify-content: space-between;
}
.flex-btw-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex-btw-end {
  display: flex;
  justify-content: space-between;
  align-items: end;
}

.flex-item-center {
  display: flex;
  align-items: center;
}

/* 基本テキストデザイン */
.txt-base {
  color: #b3b3b3;
  letter-spacing: 0.3rem;
  line-height: 4rem;
}

/* en txt base */
.txt-en-base {
  font-family: sonsie one;
  letter-spacing: -0.2rem;
  color: #000000;
}

.btn {
  padding: 1.9% 2%;
  border: #6d6d6d solid 1px;
  margin-left: 47%;
}

.flex-end {
  display: flex;
  align-items: last baseline;
}
.flex-end-j-center {
  display: flex;
  align-items: last baseline;
  justify-content: center;
}

.flex-baseline {
  display: flex;
  align-items: baseline;
}

.margin-top-300 {
  margin-top: 300px;
}

.margin-top-200 {
  margin-top: 200px;
}

.margin-top-250 {
  margin-top: 250px;
}

.margin-top-100 {
  margin-top: 100px;
}

.margin-top-150 {
  margin-top: 150px;
}
.margin-top-180 {
  margin-top: 180px;
}

.margin-top-50 {
  margin-top: 50px;
}

.margin-left-50 {
  margin-left: 50px;
}

.margin-top-30 {
  margin-top: 30px;
}

.margin-btm-30 {
  margin-bottom: 30px;
}
.margin-btm-50 {
  margin-bottom: 50px;
}
.margin-btm-100 {
  margin-bottom: 100px;
}
.margin-btm-200 {
  margin-bottom: 200px;
}
.padding-btm-200 {
  margin-bottom: 200px;
}
.padding-btm-100 {
  margin-bottom: 100px;
}
.padding-btm-10 {
  padding-bottom: 10px;
}

.padding-btm-30 {
  padding-bottom: 30px;
}

.padding-btm-50 {
  padding-bottom: 50px;
}

.margin-left60 {
  margin-left: 60px;
}

.flex-right {
  display: flex;
  justify-content: end;
}

.flex-btw-end {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.width-49 {
  width: 49%;
}

.hover-opacity:hover {
  opacity: 0.7;
  transition: all 0.2s;
}
.hover-opacity {
  transition: all 0.2s;
}

/*------ボタンアニメーション------------
------------------------------------*/
/*========= 流体シェイプを動かす ===============*/
.fluid {
  width: 90vh; /*横幅*/
  height: 70vh; /*縦幅*/
  position: fixed;
  right: 30%;
  top: -10%;
  overflow: hidden;
  z-index: -1;
  background: #e6e6e6; /*背景色*/
  animation: fluidrotate 20s ease 0s infinite; /*アニメーションの設定*/
}
.fluid2 {
  width: 70vh; /*横幅*/
  height: 60vh; /*縦幅*/
  left: -20%;
  overflow: hidden;
  top: 50%;
  position: fixed;
  z-index: -1;
  background: #e6e6e6; /*背景色*/
  animation: fluidrotate 20s ease 0s infinite; /*アニメーションの設定*/
}
.fluid3 {
  width: 90vh; /*横幅*/
  height: 130vh; /*縦幅*/
  right: -25%;
  overflow: hidden;
  top: 30%;
  position: fixed;
  z-index: -1;
  background: #e6e6e6; /*背景色*/
  animation: fluidrotate 20s ease 0s infinite; /*アニメーションの設定*/
}

@keyframes fluidrotate {
  0%,
  100% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  }
  14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
  }
  28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
  }
  42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
  }
  56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
  }
  70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
  }
  84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
  }
}

.fade-img-box {
  overflow: hidden;
}

/*ナビゲーション*/

#g-nav ul {
  visibility: hidden;
  opacity: 0;
  /*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/
  position: fixed;
  z-index: 999;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s;
}

/*背景が出現後にナビゲーションを表示*/
#g-nav.panelactive ul {
  opacity: 1;
}

/* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
#g-nav.panelactive ul li {
  animation-name: gnaviAnime;
  animation-duration: 1s;
  animation-delay: 0.15s; /*0.15 秒遅らせて出現*/
  animation-fill-mode: forwards;
}
@keyframes gnaviAnime {
  0% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}

/*sp navのレイアウト設定*/
#g-nav li {
  padding-bottom: 50px;
}

#g-nav li p {
  color: #000000;
  display: block;
  letter-spacing: -0.1em;
  font-weight: 300;
  font-family: sonsie one;
  font-size: 4rem;
}
#g-nav p {
  font-weight: 600;
  display: flex;
  padding-left: 40px;
  align-items: center;
}

/*pc navのレイアウト設定*/
.hd-nav-container {
  margin-right: 4%;
  margin-top: 4%;
}
#g-nav-pc {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
}

#g-nav-pc li p {
  font-family: "Lustria", serif;
  background-color: transparent;
  color: #000;
  letter-spacing: 0.4rem;
  font-weight: 500;
  font-size: 1.1rem;
}
.entry-box {
  border: #ededed 1px solid;
  padding: 17px 0;
  border-radius: 100vh;
}
.entry-box h3 {
  color: #aaaaaa;
  letter-spacing: 0.2rem;
  font-weight: 500;
  font-size: 1.1rem;
  padding-right: 30px;
  padding-left: 30px;
}

.entry-box img {
  padding-right: 15px;
}
/*========= ボタンのためのCSS ===============*/
.openbtn1 {
  position: fixed;
  top: 44px;
  right: 0px;
  z-index: 9999; /*ボタンを最前面に*/
  cursor: pointer;
  width: 120px;
  height: 50px;
}

/*×に変化*/
.openbtn1 span {
  display: inline-block;
  transition: all 0.4s;
  position: absolute;
  left: 14px;
  height: 1px;
  border-radius: 2px;
  background-color: #000000;
  width: 45%;
}

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

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

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

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

/*丸の拡大*/

.circle-bg {
  position: fixed;
  z-index: 100;
  /*丸の形*/
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #efefef;
  /*丸のスタート位置と形状*/
  transform: scale(0); /*scaleをはじめは0に*/
  right: -50px;
  top: -50px;
  transition: all 0.7s;
}

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

/*                   end                    */

.btnlinestretches2 {
  /*線の基点とするためrelativeを指定*/
  position: relative;
  /*ボタンの形状*/
  color: #ffffff;
  padding: 35px 120px;
  display: inline-block;
  text-decoration: none;
  outline: none;
}

/*線の設定*/
.btnlinestretches2::before,
.btnlinestretches2::after {
  content: "";
  /*絶対配置で線の位置を決める*/
  position: absolute;
  /*事前に出現させる線の形状*/
  border: solid #a5a5a5 1px;
  width: 20px;
  height: 20px;
  /*アニメーションの指定*/
  transition: all 0.2s ease-in-out;
}

.btnlinestretches2::before {
  /*事前に出現させる線の位置*/
  top: 0;
  left: 0;
  /*事前に出現させる線の形状*/
  border-width: 1px 0 0 1px;
}

.btnlinestretches2::after {
  /*事前に出現させる線の位置*/
  bottom: 0;
  right: 0;
  /*事前に出現させる線の形状*/
  border-width: 0 1px 1px 0;
}

/*hoverした際の線の形状*/
.btnlinestretches2:hover::before,
.btnlinestretches2:hover::after {
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border-color: #dcdcdc;
}

/*------------------------------------------------------------ 
    HEADER 
------------------------------------------------------------*/

#header {
  align-items: center;
  justify-content: space-between;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  box-sizing: border-box;
  position: fixed;
}

#wrap {
  margin: 0 auto; /* 中央寄せ */
}

.hd-inner {
  display: flex;
  padding-top: 4%;
  padding-left: 4%;
  justify-content: space-between;
}
/*menu*/
.nav {
  display: flex;
  text-decoration: none;
  padding-right: 3%;
}

.nav-title {
  font-family: montserrat;
  font-weight: 200;
  color: #fff;
  font-size: 1.1rem;
  letter-spacing: 0.1rem;
}
li a {
  position: relative;
  text-decoration: none;
  transition: 0.2s;
}
li a:hover {
  opacity: 0.6;
}

.nav li {
  padding-left: 25px;
}

/*     menu終わり      */

/*------------------------------------------------------------ 
    CONTENTS 
------------------------------------------------------------*/
/*top*/
.top-inner {
  margin: 0 2%;
}
.top-mv {
  margin-left: 9%;
}

.inner1 {
  margin: 0 6%;
}
.top-mv-leadtxt-en {
  font-family: "Lustria", serif;
  letter-spacing: 0.1rem;
  margin-top: 25px;
  line-height: 4rem;
  font-weight: 500;
  font-size: 5rem;
  color: #2a2a2a;
  white-space: nowrap;
}
.top-mv-leadtxt {
  letter-spacing: 0.2rem;
  margin-top: 25px;
  line-height: 2.7rem;
  font-weight: 400;
  font-size: 1.2rem;
  color: #2a2a2a;
}
.top-mv-subtxt {
  letter-spacing: 0.2rem;
  margin-top: 75px;
  line-height: 2.1rem;
  font-weight: 400;
  font-size: 1rem;
  color: #6b6b6b;
}

.top-mv {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
}

.mv-img {
  position: relative;
  right: -5%;
  top: 5%;
  width: 60vw;
  height: 60vh;
  object-fit: cover;
}

/*top scroll*/
.scrolldown1 {
  /*描画位置※位置は適宜調整してください*/
  position: absolute;
  bottom: 0;
}

/*Scrollテキストの描写*/
.scrolldown1 span {
  /*描画位置*/
  position: absolute;
  left: 10px;
  bottom: 10px;
  /*テキストの形状*/
  color: #000;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  /*縦書き設定*/
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown1:before {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom: 0;
  left: -4px;
  /*丸の形状*/
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #000;
  /*丸の動き1.6秒かけて透過し、永遠にループ*/
  animation: circlemove 1.4s ease-in-out infinite,
    cirlemovehide 1.4s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove {
  0% {
    bottom: 45px;
  }
  100% {
    bottom: -5px;
  }
}

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}

/* 線の描写 */
.scrolldown1:after {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom: 0;
  left: 0;
  /*線の形状*/
  border-radius: 10px;
  width: 2px;
  height: 50px;
  background: #000;
}

/*ここまで*/

/* ボタンホバーの知識メモ*/
.db-btn {
  display: block; /*aタグやspan、imgなどのインライン要素は幅や高さが無視されるから、高さがないaタグにそのままbg-colorは無視される。
  ブロック要素にすることでaタグに高さを指定させてbackground-colorを指定できる。*/
}
.db-btn:hover {
  background-color: #676767;
  transition: ease-in-out 0.2s;
}

/*↓*/
.main-inner {
  margin: 0 4%;
}
.img-fit {
  width: 100%;
  overflow: hidden;
  height: auto;
  object-fit: cover;
}
.overlap-container {
  margin-top: 140px;
}
.overlap-container2 {
  margin-top: 280px;
}

.top-title-en {
  font-family: "Lustria", serif;
  color: #353535;
  letter-spacing: 0.1rem;
  font-weight: 500;
  font-size: 1.3rem;
  white-space: nowrap;
  margin-right: 10%;
}
.top-title-en2 {
  font-family: "Lustria", serif;
  color: #353535;
  letter-spacing: 0.1rem;
  font-weight: 500;
  font-size: 1.3rem;
  white-space: nowrap;
  margin-right: 10px;
}

.top-leadtxt-jp {
  color: #353535;
  margin-top: 25px;
  letter-spacing: 0.1rem;
  font-weight: 500;
  font-size: 1.8rem;
  white-space: nowrap;
}
.top-leadtxt-jp2 {
  color: #353535;
  margin-top: 25px;
  letter-spacing: 0.1rem;
  font-weight: 500;
  font-size: 1.8rem;
  white-space: nowrap;
  text-align: center;
}

.top-leadtxt-en {
  font-family: "Lustria", serif;
  color: #353535;
  letter-spacing: 0.1rem;
  font-weight: 500;
  font-size: 5rem;
  line-height: 5rem;
}

.top-main-leadtxt-jp {
  width: 56%;
  color: #353535;
  letter-spacing: 0.2rem;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 3.2rem;
  margin-top: 80px;
}
.lodging-leadtxt-en {
  margin-top: 40px;
  font-family: "Lustria", serif;
  color: #353535;
  letter-spacing: 0.1rem;
  font-weight: 500;
  font-size: 4rem;
}

.mg-per {
  margin-top: 60%;
}
.lodging-leadtxt {
  width: 60%;
  color: #353535;
  letter-spacing: 0.2rem;
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 2.7rem;
  margin-top: 30px;
}

.lg-title-en {
  margin-right: 10px;
  font-family: "Lustria", serif;
  color: #353535;
  letter-spacing: 0.1rem;
  font-weight: 500;
  font-size: 1.4rem;
}
.lg-title-jp {
  color: #353535;
  letter-spacing: 0.2rem;
  font-weight: 500;
  font-size: 1.1rem;
}
.tag-jp {
  margin-top: 10px;
  color: #9e9e9e;
  letter-spacing: 0.2rem;
  font-weight: 500;
  font-size: 1.1rem;
}

.r-b-title-en {
  font-family: "Lustria", serif;
  color: #353535;
  letter-spacing: 0.1rem;
  text-align: center;
  font-weight: 500;
  font-size: 4rem;
}
.r-top-title-en {
  margin-top: 70px;
  font-family: "Lustria", serif;
  color: #353535;
  letter-spacing: 0.1rem;
  font-weight: 500;
  font-size: 1.3rem;
  white-space: nowrap;
  text-align: center;
  margin-right: 10px;
}

.r-b-leadtxt-jp {
  margin-top: 70px;
  line-height: 3rem;
  color: #353535;
  letter-spacing: 0.2rem;
  font-weight: 500;
  font-size: 1.2rem;
  text-align: center;
}
/*otonoi & toki スライドショー*/
.d-demo1 {
  overflow: hidden;
  margin-top: 40px;
  width: 88%;
}

/*スライドショー*/
.d-demo {
  overflow: hidden;
  margin-top: 100px;
}
.d-demo__wrap {
  display: flex;
}

.d-demo__list {
  display: flex;
  list-style: none;
}

.d-demo__list--left {
  animation: infinity-scroll-left 39s linear infinite 0s both;
}

.d-demo__item {
  margin-right: 15px;
  width: calc(100vw / 4.2);
}
.d-demo__item > img {
  width: 100%;
}
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.mirrbox {
  width: 40%;
}
.mc-title {
  font-family: "Lustria", serif;
  color: #353535;
  letter-spacing: 0.1rem;
  font-weight: 500;
  font-size: 5rem;
}
.mc-sub {
  margin-top: 30%;
  color: #969696;
  letter-spacing: 0.3rem;
  font-weight: 500;
  font-size: 1.1rem;
}
.mc-maintxt {
  margin-top: 20px;
  margin-bottom: 20%;
  color: #353535;
  letter-spacing: 0.2rem;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 2rem;
}
.mirr-link {
  font-family: "Lustria", serif;
  color: #353535;
  letter-spacing: 0.1rem;
  font-weight: 500;
  font-size: 1.1rem;
}
/*------------------------------------------------------------ 
    FOOTER 
------------------------------------------------------------*/

#footer {
  margin: 0 4% 30px 3%;
  margin-top: 200px;
}

.footer-li-title {
  font-family: "Lustria", serif;
  color: #919191;
  letter-spacing: 0.1rem;
  font-weight: 500;
  font-size: 1.2rem;
  margin-right: 17px;
}

.li-txt {
  font-family: "Lustria", serif;
  color: #666666;
  letter-spacing: 0.1rem;
  font-weight: 500;
  font-size: 1.2rem;
  margin-bottom: 3px;
}

.margin-left {
  margin-left: 60px;
}

/*------------------------------------------------------------ 
    MediaQuery 
------------------------------------------------------------*/
/*どの位置からヘッダーを伸ばすか？ macbook 13inchだと1480pxでピッタリ、これ以上伸ばすと引き伸ばされる設定*/
@media screen and (min-width: 1100px) {
  /*
  #wrap {
   今回はなし！ max-width: 1480px;
  }
  */
  .pc-hide {
    display: none;
  }
}

/* TABLET */
@media screen and (max-width: 1099px) and (min-width: 600px) {
  .tab-hide {
    display: none;
  }
  .tab-margin-left {
    margin-left: 4%;
    margin-bottom: 80px;
  }

  .hd-inner {
    padding-top: 7%;
  }
  .top-inner {
    margin: 30% 2%;
  }

  .tab-flex-colums {
    display: flex;
    flex-direction: column;
  }

  .hd-logo {
    width: 100%;
  }
  .top-mv-leadtxt-en {
    font-family: "Lustria", serif;
    letter-spacing: 0.1rem;
    margin-top: 0;
    line-height: 5rem;
    font-size: 6rem;
  }
  .top-title-en2 {
    font-size: 1.6rem;
    margin-right: 20px;
  }
  .lg-title-jp {
    font-size: 1.4rem;
  }

  .top-title-en {
    font-size: 1.6rem;
  }
  .top-mv-leadtxt {
    line-height: 2.9rem;
    font-size: 1.4rem;
    margin-top: 30px;
  }
  .top-mv-subtxt {
    line-height: 2.7rem;
    margin-top: 175px;
    font-size: 1.3rem;
  }
  .top-main-leadtxt-jp {
    width: 60%;
    font-size: 1.3rem;
    line-height: 3.6rem;
  }
  .top-mv {
    margin-top: 40%;
    margin-left: 0;
    align-items: flex-start;
  }
  .mv-img {
    right: 0;
    top: 5%;
    width: 100%;
  }
  .fluid {
    width: 40vh;
    height: 40vh;
    position: fixed;
    right: 60%;
  }
  .fluid2 {
    width: 40vh;
    height: 40vh;
    left: -10%;
    top: 80%;
  }
  .fluid3 {
    width: 70vh;
    height: 70vh;
    right: -25%;
    top: 15%;
  }
  #g-nav-pc li p {
    font-size: 1.6rem;
  }
  .hd-nav-container {
    margin-top: 5%;
  }

  .top-leadtxt-en {
    margin-top: 70px;
  }

  .top-leadtxt-jp {
    margin-top: 15px;
  }

  .d-demo__item {
    width: calc(100vw / 2.9);
  }
  .lg-title-en {
    font-size: 1.7rem;
  }
  .tag-jp {
    font-size: 1.3rem;
  }
  .lodging-leadtxt {
    font-size: 1.3rem;
    margin-top: 60px;
    width: 70%;
  }
  .r-b-leadtxt-jp {
    font-size: 1.3rem;
  }
  .border-box {
    padding: 5% 4%;
    width: 100%;
    box-sizing: border-box;
    margin-top: 77px;
  }
  .mc-title {
    font-size: 6rem;
  }

  .mc-maintxt {
    font-size: 1.4rem;
    line-height: 3.9rem;
    margin-top: 45px;
  }
  .mc-sub {
    font-size: 1.6rem;
  }
  .mirr-link {
    font-size: 1.5rem;
  }
  .footer-li-title {
    font-size: 1.4rem;
  }
  .li-txt {
    font-size: 1.4rem;
  }
}

/* SP */
@media screen and (max-width: 599px) {
  .sp-hide {
    display: none;
  }
  .hd-logo {
    width: 100%;
  }
  .sp-flex-end {
    display: flex;
    justify-content: end;
  }
  .sp-flex-baseline {
    align-items: baseline;
  }

  #g-nav-pc li p {
    font-size: 1.2rem;
  }
  .hd-nav-container {
    margin-top: 10%;
  }

  .inner {
    margin: 200px 6%;
  }
  .hd-inner {
    padding-top: 13%;
  }

  .sp-flex-colums {
    display: flex;
    flex-direction: column;
  }

  .mv-top {
    margin-top: 20vh;
  }

  .mv-img {
    top: 6%;
    height: 40vh;
    right: 0;
    width: 100%;
    object-fit: cover;
  }
  .top-mv {
    margin: 0 3%;
  }
  .sp-margin20vh {
    margin-top: 20vh;
  }

  .fluid {
    width: 40vh;
    height: 40vh;
    right: 30%;
    top: -20%;
  }
  .fluid2 {
    width: 20vh;
    height: 20vh;
    top: 80%;
  }
  .fluid3 {
    width: 50vh;
    height: 50vh;
  }
  .overlap-container {
    margin-top: 200px;
  }

  .top-leadtxt-en {
    margin-top: 15%;
  }
  .margin-top-100 {
    margin-top: 80px;
  }

  .top-main-leadtxt-jp {
    width: 90%;
  }

  .mg-per {
    margin-top: 20%;
  }
  .bd-btm {
    padding-bottom: 100px;
  }
  .tag-jp {
    margin-top: 6px;
    font-size: 1.2rem;
  }

  .lg-title-en {
    font-size: 1.8rem;
  }
  .lodging-leadtxt {
    width: 90%;
    margin-top: 40px;
    font-size: 1.2rem;
  }
  .lodging-leadtxt-en {
    margin-top: 0;
  }
  .lg-title-jp {
    font-size: 1.3rem;
  }
  .overlap-container2 {
    margin-top: 190px;
  }
  .margin-top-200 {
    margin-top: 100px;
  }
  .margin-top-180 {
    margin-top: 80px;
  }

  .d-demo1 {
    width: 100%;
  }
  .d-demo__item {
    width: calc(100vw / 1.7);
  }

  .border-box {
    box-sizing: border-box;
    margin-top: 80px;
  }
  .bd-top {
    padding-top: 10px;
  }

  .mirrbox {
    width: 100%;
  }
}