@charset "UTF-8";
/* MontserratフォントをGoogle Fontsから読み込む */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');

@font-face {
  font-family:'Noto Sans JP';
  src:url('../font/NotoSansJP-Regular-min.woff') format('woff');
  font-weight:normal;font-style:normal;font-display:swap;
}
@font-face {
  font-family:'Noto Sans JP';
  src:url('../font/NotoSansJP-Bold-min.woff')  format('woff');
  font-weight:bold;font-style:normal;font-display:swap;
}
@font-face {
  font-family:'Noto Sans JP';
  src:url('../font/NotoSansJP-Thin-min.woff') format('woff');
  font-weight:100;font-style:normal;font-display:swap;
}

* {
  margin:0;
  padding:0;
}
html, body {
  width:100%;
  height:auto;
  margin:0;
  padding:0;
}
html {
  font-size:62.5%;
}

/* ■ ベースのテキスト色をダークグレー（チャコール）に */
body {
  font-family:'Montserrat', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', yu-gothic-pr6n , '游ゴシック', YuGothic, 'Hiragino Sans', 'ＭＳ Ｐゴシック', sans-serif, system-ui;
  color:#4a4a4a; /* 黒すぎない上品なダークグレー */
  font-size:1.4rem;
  line-height:1.8;
  letter-spacing:0;
  overflow-x:hidden;
  position:relative;
  background-color: #fafafa; /* 背景をわずかにオフホワイトにして柔らかさを出す */
}

h1, h2, h3 {
  letter-spacing: 0.08em;
}
p {
  letter-spacing: 0.05em;
  line-height: 1.8;
}
a {
  text-decoration: none;
  color:#333333;
}
img,picture {
  display:block;
  width:100%;
  height:auto;
}
.yu_mincho {
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.fadeIn { opacity:0; transition:1.5s; }
.is-fadeIn { opacity:1; }
.fadeInUP { opacity:0; transform: translate(0, 20px); transition:1s; }
.is-fadeInUP { opacity:1; transform:translate(0, 0); }
.fadeInScale { transform:scale(1.1); opacity:0;transition:1s; }
.is-fadeInScale { transform:scale(1); opacity:1; }

/*----------------------------------------------------
  loading
----------------------------------------------------*/
.loading{
  width:100vw;height:100vh;
  background:#fafafa;display:flex;flex-direction:column;justify-content:center;align-items:center;
  position:fixed;top:0;left:0;z-index:99999;
}
.loading img{
  width:30%;max-width:200px;
}

/*----------------------------------------------------
  header
----------------------------------------------------*/
#header01 {
  width:100%;
  height:60px;
  position:fixed;
  top:0;
  left:0;
  z-index:999;
  margin:0 auto;
  box-sizing:border-box;
  transition:1s cubic-bezier(.4, 0, .2, 1);
}
.head-animation {
  transform:translateY(-100%);
}
.scroll {
  background:rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  transition:1s cubic-bezier(.4, 0, .2, 1);
}
#global-nav {
  width:90%;
  max-width:1280px;
  height:60px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.global-nav-logo {
  width:auto;
  height:46px;
}
.global-nav-logo > a {
  display:block;
  width:auto;
  height:100%;
}
.global-nav-logo > a > img {
  width:auto;
  height:100%;
}
nav {
  width:auto;
  height:auto;
  display:flex;
  align-items:center;
  margin-left:auto;
}
nav ul {
  width:auto;
  height:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  list-style:none;
}
nav li {
  padding:0 15px; /* 少し間隔を広げて余白を確保 */
}
nav li > a {
  display: flex;
  flex-direction:column;
  align-items:center;
  color:#a0a0a0; /* 日本語部分を薄いグレーにして主張を抑える */
  font-size:0.9rem; /* 日本語をかなり小さく */
  line-height:1.2;
  text-decoration: none;
  position: relative;
  padding-bottom: 4px;
}
.nav-text {
  font-family: 'Montserrat', sans-serif;
  font-size:1.3rem; /* 英語をメインに */
  font-weight: 500;
  color:#4a4a4a;
  letter-spacing: 0.1em;
  margin-bottom: 2px;
  transition: color 0.3s ease;
}
nav li > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 1px;
  background-color: #d4c4c2; /* くすみピンクのライン */
  transition: width 0.3s ease;
}
nav li > a:hover .nav-text {
  color: #d4c4c2; /* マウスオーバーで英語がくすみピンクに */
}
nav li > a:hover::after {
  width: 100%; /* マウスオーバーでスッと下線が伸びる */
}
.header-reserve {
  display:flex;
  margin-left:15px; /* メニューとの距離をとる */
  gap: 10px; /* ボタン同士の隙間 */
}
.header-reserve-link {
  width: 140px; /* 少しシュッとさせる */
  height: 40px;
}
.header-reserve-link > a {
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 4px; /* モダンな角丸四角に変更 */
  font-size: 1.2rem;
  font-weight: 500;
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
  text-decoration: none;
}
.header-reserve-link > a i {
  margin-right:5px;
}
/* WEB予約ボタン：白背景の枠線デザイン */
.header-reserve-link:nth-of-type(2) > a {
  background: #5c5c5c;
  color: #fff;
  border: 1px solid #5c5c5c;
}
.header-reserve-link:nth-of-type(2) > a:hover {
  background: #fff;
  color: #5c5c5c;
  border: 1px solid #5c5c5c;
}
/* LINE予約ボタン：くすみピンクのベタ塗りデザイン */
.header-reserve-link:nth-of-type(1) > a {
  background: #d4c4c2;
  color: #fff;
  border: 1px solid #d4c4c2;
}
.header-reserve-link:nth-of-type(1) > a:hover {
  background: #fff;
  color: #d4c4c2;
}
#nav-toggle {
  display: none;
}

/*--------------------------------------------------------------------------
  main
--------------------------------------------------------------------------*/
main {
  width:100%;
  height:auto;
  overflow:hidden;
  position:relative;
}
#heading {
  width:100%;
  height:auto;
}
#heading > h1 {
  width:90%;
  max-width:1280px;
  margin:0 auto;
  font-size:1rem;
  font-weight:normal;
}

/*--------------------------------------------------------------------------
  toggle (ハンバーガーメニュー)
--------------------------------------------------------------------------*/
#nav-toggle {
  display: none;
  position: fixed;
  top: 0;
  right:5%;
  width:32px;
  height:60px;
  z-index:1001;
}
.menu-trigger,
.menu-trigger span {
  display:inline-block;
  transition:all .4s;
  box-sizing:border-box;
}
.menu-trigger {
  position:relative;
  width:32px;
  height:60px;
}
.menu-trigger span {
  position: absolute;
  left:0;
  width:100%;
  height:2px;
  background-color:#7a7a7a; /* ハンバーガーの線をグレーに */
  border-radius:2px;
}
.menu-trigger span:nth-of-type(1) { top:20px; }
.menu-trigger span:nth-of-type(2) { position: absolute; right: 0; width: 70%; top:30px; }
.menu-trigger span:nth-of-type(3) { top:40px; }

#nav-toggle.active span:nth-of-type(1) {
  top:5px;
  transform: translateY(20px) rotate(-45deg);
}
#nav-toggle.active span:nth-of-type(2) {
  left: 50%;
  opacity: 0;
  animation: active-menu-bar 0.8s forwards;
}
@keyframes active-menu-bar {
  100% { height: 0; }
}
#nav-toggle.active span:nth-of-type(3) {
  top:45px;
  transform: translateY(-20px) rotate(45deg);
}

/*-------------------------------------
  contact
-------------------------------------*/
#contact {
  width:100%;
  height:auto;
  padding:100px 0;
  position:relative;
  background-color: #f5f5f5; /* アクセスセクションの背景を少し濃いグレーに */
}
.contact-title {
  display:none;
  height:auto;
  flex-direction:column-reverse;
  line-height:1.4;
  margin-bottom:50px;
  position:relative;
}
.contact-title > span {
  font-size:6rem;
  font-family: "Montserrat", serif;
  letter-spacing:.05em;
  color:#d4c4c2; /* タイトル背景文字をくすみピンクに */
  position:relative;
  z-index:1;
}
.contact-title > h2 {
  font-size:1.2rem;
  font-weight:normal;
  color:#7a7a7a;
  display:flex;
  align-items:center;
  position:relative;
  z-index:1;
}
.contact {
  width:90%;
  max-width:1280px;
  height:auto;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  position:relative;
  z-index:1;
}
.address {
  width:37.5%;
  height:auto;
}
.address-logo {
  width:100%;
  height:auto;
  margin-bottom:30px;
}
.address-logo img {
  width: auto;
  height: 60px;
}
.address p i { margin-right: 5px; }
.time { padding-top: 20px; }
.close { padding-bottom: 20px; }
.access-lead { font-weight: bold; }
.access-small { margin-top: 20px; font-size: 1.2rem; }
.map-link {
  width:60%;
  height:60px;
  margin-top:30px;
}
.map-link a {
  width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  border: 1px solid #7a7a7a;
  color:#7a7a7a;
  background:#fff;
  transition: all 0.3s;
}
.map-link a:hover {
  background: #7a7a7a;
  color: #fff;
}
.map-link a i { margin-left: 5px; }
/*#map {
  width:60%;
  height:auto;
}
#map iframe {
  display:block;
  width:100%;
  height:550px;
}*/
#map {
  width: 60%;
  height: auto;
}

#map iframe {
  display: block;
  width: 100%;
  height: 550px;
  
  /* ▼ ここから追加：マップを灰色にする設定 ▼ */
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%); /* Safari用 */
  transition: filter 0.5s ease, -webkit-filter 0.5s ease; /* ふわっと変わるアニメーション */
}

/* ▼ ここから追加：マウスを乗せた時に色を戻す設定 ▼ */
#map iframe:hover {
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
}

/*--------------------------------------------------------------------------
  #mobile-nav (スマホの下部追従ボタン)
--------------------------------------------------------------------------*/
#mobile-nav {
  width:100%;
  height:auto;
  max-width:480px;
  display:none;
  position:fixed;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 998;
  box-sizing: border-box;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
#mobile-nav ul {
  width:100%;
  min-height:60px;
  box-sizing: border-box;
  list-style: none;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
#mobile-nav li {
  width:42.5%;
  min-height:60px;
  line-height:2;
  display:flex;
  align-items:center;
  justify-content:center;
}
#mobile-nav li:last-child {
  width:15%;
}
#mobile-nav li a {
  display: block;
  width:100%;
  height:60px;
  font-size: 1.4rem;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: #fff;
}
#mobile-nav li:nth-of-type(1) > a {
  background: #5c5c5c; /* WEB予約 */
}
#mobile-nav li:nth-of-type(2) > a {
  background: #d4c4c2; /* LINE予約 */
}
#mobile-nav li:nth-of-type(3) > a {
  background: #333333; /* 電話ボタン */
}
#mobile-nav li:nth-of-type(1) > a > img,
#mobile-nav li:nth-of-type(2) > a > img { width:90%; }
#mobile-nav li:nth-of-type(3) > a > img { width:34px; }

/*------------------------------------
 #parallax
------------------------------------*/
#parallax{
  width:100%;
  height:auto;
  position:relative;
}
.parallax {
  width:100%;
  height:auto;
  position:relative;
  overflow:hidden;
}
.parallax-text {
  width:20%;
  height:auto;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

/*-------------------------------------
  footer
-------------------------------------*/
footer {
  width:100%;
  height:auto;
}
#footer01 {
  width:100%;
  height:auto;
  background-color:#fafafa;
  padding-top:30px;
}
.footer01 {
  width:100%;
  max-width:1024px;
  margin:0 auto 30px auto;
}
.footer-nav {
  width:100%;
  margin: 0 auto;
  display:flex;
  flex-direction:column;
}
.footer-logo {
  width:100%;
  height:auto;
  display:flex;
  justify-content:space-between;
  margin:20px 0;
}
.footer-logo > img {
  width:25%;
  max-width:160px;
}
.footer-logo > h2 {
  width:70%;
  font-size:1.2rem;
  font-weight:normal;
  color: #7a7a7a;
}
.footer-nav ul {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  list-style: none;
  margin-bottom: 20px;
  padding: 5px 0;
}
.footer-nav li {
  padding: 0 15px;
  line-height: 1;
}
.footer-nav li+ li {
  border-left: 1px solid #ccc;
}
.footer-nav li i { display: none; }
.footer-nav-sp { display:none; }
.footer-sp { display:none; }

.copyright {
  width:100%;
  height:auto;
  padding:10px 0;
  font-size:1rem;
  background:#5c5c5c; /* フッター最下部はダークグレーで引き締め */
}
.copyright > p {
  color:#fff;
  text-align:center;
  letter-spacing: 0.1em;
}

/* --- 以下、レスポンシブ用のメディアクエリ（調整済み） --- */
@media screen and (max-width: 1360px) { nav { min-width: initial; } }
@media screen and (max-width:1280px) {
  html { font-size: calc(100vw/128.0); }
  .footer-nav { width:90%; max-width:initial; }
}
@media screen and (max-width:1200px) {
  #header01 { position:fixed; z-index:1001; }
  .global-nav-logo { margin-left:50px; }
  #global-nav ul { display:none; }
  #nav-toggle { display:block; }
  
  .overlay {
    position:fixed; top:0; left:0; right:0; bottom:0;
    overflow-y:auto; flex-direction:column; z-index:1000;
    width:100%; min-width:100%; height:auto;
    padding:100px 0 80px 0!important; box-sizing:border-box;
    opacity:0; visibility:hidden; transition:.3s linear;
    animation:.3s linear overlay-close; -ms-overflow-style:none; scrollbar-width:none;
  }
  .overlay::-webkit-scrollbar{ display:none; }
  .overlay.is-open {
    width:100%; height:100vh; opacity:1; visibility:visible;
    animation:.3s linear overlay-open; background:#fafafa;
  }
  
  @keyframes overlay-open {
    0% { transform: scaleY(0); transform-origin: bottom; }
    100% { transform: scaleY(1); transform-origin: bottom; }
  }
  @keyframes overlay-close {
    0% { transform: scaleY(1); transform-origin: top; }
    100% { transform: scaleY(0); transform-origin: top; }
  }
  
  .footer-inner { width:100%; max-width:460px; height:auto; margin:0 auto; }
  .footer-nav ul { width:100%; flex-wrap:wrap; justify-content:space-between; box-sizing:border-box; padding:0; }
  .footer-nav li { display:flex; align-items:center; width:49%; height:64px; line-height:1.6; padding:0; }
  .footer-nav li:not(:last-child) { border-bottom:1px solid #eee; }
  .footer-nav li a { display:flex; flex-direction:column; justify-content:center; padding:0 5px; box-sizing:border-box; font-size:1.8rem; width:100%; height:100%; }
  .footer-nav li + li { border-left:none; }
  .footer-nav-sp { display:block; font-size:1.4rem; font-family:'Montserrat', serif; color:#d4c4c2; }
  .footer-logo { flex-direction:column; align-items:center; }
  .footer-logo > img { margin-bottom:20px; }
  .footer-logo > h2 { width:100%; margin:0 auto; line-height:1.6; }
  .footer-sp { display:block; width:100%; height:auto; position:relative; }
  .footer-sp-title { width:100%; height:auto; }
  .footer-sp-title > img { width:60%; margin:0 auto; }
  .footer-sp > p { text-align:center; margin-bottom:20px; color:#7a7a7a; }
  .footer-sp-tel { width:100%; height:auto; margin-bottom:8px; }
  .footer-sp-tel > a { width:100%; height:80px; display:flex; flex-direction:column; justify-content:center; align-items:center; line-height:1.4; border:1px solid #5c5c5c; color:#5c5c5c; }
  .footer-sp-tel-top { font-size:2.6rem; }
  .footer-sp-tel-top i { margin-right:5px; }
  .footer-sp-small { font-size:1.2rem; }
  .footer-sp-link { width:100%; height:auto; }
  .footer-sp-link a { width:100%; height:80px; display:flex; justify-content:center; align-items:center; color:#fff; font-size:2.4rem; }
  .footer-sp-link a i { margin-right:5px; }
  .footer-sp-link a:nth-of-type(1) { background: #5c5c5c; }
  .footer-sp-link a:nth-of-type(2) { background: #d4c4c2; margin-top:8px; }
}
@media screen and (max-width: 1024px) {
  html { font-size: calc(100vw/102.4); }
  #contact { padding-bottom:0; }
  .contact { width:65%; flex-direction:column; }
  .contact-title { display:flex; align-items:center; width:65%; margin:0 auto 50px auto; }
  .contact-title > h2 { text-align:center; }
  .address { width:100%; margin-bottom:80px; }
  #map { width:100vw; height:auto; margin:0 calc(50% - 50vw); position:relative; }
  #map::after { display:block; content:''; width:100%; height:0; padding-top:75%; }
  #map iframe { height:100%; position:absolute; top:0;left:0;right:0;bottom:0; }
}
@media screen and (max-width: 896px) {
  html { font-size: calc(100vw/89.6); }
  #contact { padding-bottom:0; }
  .contact-title, .contact { width:75%; }
}
@media screen and (max-width:786px) {
  html { font-size: calc(100vw/78.6); }
  .parallax-text { width:40%; }
  .contact-title, .contact { width:80%; }
}
@media screen and (max-width: 680px) {
  html { font-size: calc(100vw/68); }
  .contact-title, .contact { width:85%; }
}
@media screen and (max-width: 480px) {
  html { font-size:62.5%; }
  .global-nav-logo { width:100%; height:auto; margin:0 auto; }
  .global-nav-logo > a { height:auto; }
  .global-nav-logo > a > img { margin:0 auto; height:42px; }
  .footer-inner { width:90%; max-width:initial; }
  .footer-nav ul { width:95%; margin:0 auto 20px auto; }
  .footer-nav li a { font-size:1.5rem; }
  .footer-nav-sp { font-size:1.2rem; }
  .footer-sp-link a { font-size:2rem; }
  h1 { top:87vh; }
  #main-img { height:85vh; }
  .swiper-container { width:100%; height:70vh; top:0; }
  .swiper-container img { height: 70vh; }
  .main-title { width: 90%; top:60%; }
  .text { font-size: 2.8rem; }
  .text-2 { font-size: 1.2rem; }
  #contact { padding-top:80px; }
  .contact-title > span { font-size:4.6rem; }
  .map-link { width:85%; }
  #map::after { padding-top:100%; }
  #mobile-nav { max-width:initial; }
  .footer-logo > img { width:45%; }
}