@charset "UTF-8";

/* =========================================
   基本設定・グローバルスタイル
   ========================================= */
html {
  background-color: #000;
  letter-spacing: .1em;
  transition: all .3s ease 0s;
  overflow-x: hidden;
}

body,
button {
  font-family: "Marcellus SC", "Noto Serif JP", serif;
}

input,
optgroup,
select,
textarea {
  font-family: "Noto Serif JP", "Marcellus SC", serif;
}

.book-widget,
.book-widget label {
  font-family: "Marcellus SC", serif !important;
}

a {
  color: #333;
}

a.underline {
  text-decoration: underline;
}

li {
  list-style: none;
}

.list-auto li {
  list-style: disk;
}

ul.li-none {
  margin-left: 0;
}

.button-clear-white {
  background: 0 0;
  border-color: #fff;
  color: #fff;
}

.has-shadow {
  text-shadow: 2px 2px 3px rgba(0, 0, 0, .65);
}

hr {
  background-color: #0a0a0a;
  height: 1px;
}

.button-clear-white:hover {
  background: rgba(255, 255, 255, .5);
  border-color: #fff;
  color: #fff;
  pointer: cursor;
}

/* =========================================
   ユーティリティ・レスポンシブ表示切り替え
   ========================================= */
.sm-show {
  display: none !important;
}

@media (max-width:767px) {
  .sm-show {
    display: block !important;
  }
}

.has-underline-white {
  border-bottom: 5px solid #fff;
}

.bb-b {
  border-bottom: 1px solid #0a0a0a;
}

.bt-b {
  border-top: 1px solid #0a0a0a;
}

.lh-08 {
  line-height: .8;
}

.lh-10 {
  line-height: 1;
}

.lh-12 {
  line-height: 1.2;
}

.is-size-8 {
  font-size: .5rem !important;
}

@media (max-width:767px) {
  .is-size-8-mobile {
    font-size: .5rem !important;
  }
}

/* =========================================
   背景画像・位置調整クラス
   ========================================= */
.bg-img-full {
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}

.bg-img-top-centered {
  background-position: top center;
}

.bg-img-top-left {
  background-position: top left;
}

.bg-img-top-right {
  background-position: top right;
}

.bg-img-middle-centered {
  background-position: 50% 50%;
}

.bg-img-middle-left {
  background-position: 50% 0;
}

.bg-img-middle-right {
  background-position: 50% right;
}

.bg-img-bottom-centered {
  background-position: bottom center;
}

.bg-img-bottom-left {
  background-position: bottom left;
}

.bg-img-bottom-right {
  background-position: bottom right;
}

@media (max-width:767px) {
  .bg-img-top-centered-mobile {
    background-position: top center;
  }

  .bg-img-top-left-mobile {
    background-position: top left;
  }

  .bg-img-top-right-mobile {
    background-position: top right;
  }

  .bg-img-middle-centered-mobile {
    background-position: middle center;
  }

  .bg-img-middle-left-mobile {
    background-position: middle left;
  }

  .bg-img-middle-right-mobile {
    background-position: middle right;
  }

  .bg-img-bottom-centered-mobile {
    background-position: bottom center;
  }

  .bg-img-bottom-left-mobile {
    background-position: bottom left;
  }

  .bg-img-bottom-right-mobile {
    background-position: bottom right;
  }

  .pb-100p .hero-body {
    padding-bottom: 100%;
  }

  .pb-80p .hero-body {
    padding-bottom: 80%;
  }

  .pb-65p .hero-body {
    padding-bottom: 65%;
  }
}

.img-section {
  height: 65vh;
}

.parallax-bg {
  background-attachment: fixed;
}

.lang .is-active {
  border-bottom: 2px solid #333;
}

/* =========================================
   ローディングアニメーション
   ========================================= */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 9999;
}

.spinner-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.scaling-squares-spinner,
.scaling-squares-spinner * {
  box-sizing: border-box;
}

.scaling-squares-spinner {
  height: 65px;
  width: 65px;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  animation: scaling-squares-animation 1.25s;
  animation-iteration-count: infinite;
  transform: rotate(0deg);
}

.scaling-squares-spinner .square {
  height: calc(65px * 0.25 / 1.3);
  width: calc(65px * 0.25 / 1.3);
  margin-right: auto;
  margin-left: auto;
  border: calc(65px * 0.04 / 1.3) solid grey;
  position: absolute;
  animation-duration: 1.25s;
  animation-iteration-count: infinite;
}

.scaling-squares-spinner .square:nth-child(1) {
  animation-name: scaling-squares-spinner-animation-child-1;
}

.scaling-squares-spinner .square:nth-child(2) {
  animation-name: scaling-squares-spinner-animation-child-2;
}

.scaling-squares-spinner .square:nth-child(3) {
  animation-name: scaling-squares-spinner-animation-child-3;
}

.scaling-squares-spinner .square:nth-child(4) {
  animation-name: scaling-squares-spinner-animation-child-4;
}

@keyframes scaling-squares-animation {
  50% {
    transform: rotate(90deg);
  }

  100% {
    transform: rotate(180deg);
  }
}

@keyframes scaling-squares-spinner-animation-child-1 {
  50% {
    transform: translate(150%, 150%) scale(2, 2);
  }
}

@keyframes scaling-squares-spinner-animation-child-2 {
  50% {
    transform: translate(-150%, 150%) scale(2, 2);
  }
}

@keyframes scaling-squares-spinner-animation-child-3 {
  50% {
    transform: translate(-150%, -150%) scale(2, 2);
  }
}

@keyframes scaling-squares-spinner-animation-child-4 {
  50% {
    transform: translate(150%, -150%) scale(2, 2);
  }
}

/* =========================================
   ナビゲーションバー
   ========================================= */
.navbar {
  font-size: .8em;
  letter-spacing: .2em;
  color: #0a0a0a;
  border-top: none;
  margin-top: 0;
  background-color: transparent;
}

.navbar .button {
  color: #0a0a0a;
  background: 0 0;
  font-size: .8em;
  padding-bottom: calc(2em - 1px);
  padding-left: 2em;
  padding-right: 2em;
  padding-top: calc(2em - 1px);
}

.navbar-item,
.navbar-burger,
.navbar-burger:hover {
  color: #0a0a0a;
}

a.navbar-item:hover {
  color: #0a0a0a;
}

.has-nav-bg {
  background-color: #fff;
}

.home .navbar,
.home .navbar-link,
.home .navbar .button,
.home .navbar-item,
.home .navbar-burger,
.home .navbar-burger:hover {
  color: #fff;
}

.home a.navbar-item:hover,
.home .navbar .navbar-dropdown .navbar-item,
.home .navbar .navbar-item.has-dropdown:hover .navbar-link {
  color: #0a0a0a;
}

.home .has-nav-bg {
  background-color: #0a0a0a;
}

@media screen and (max-width:1023px) {
  .navbar-link,
  .home .navbar-link {
    color: #0a0a0a;
  }

  .navbar-menu {
    padding: .5em;
  }

  .navbar-item {
    color: #0a0a0a;
    padding: 1em .75em;
  }

  .navbar .button {
    color: #0a0a0a;
    background: 0 0;
    border-color: #0a0a0a;
  }

  .home .navbar-item,
  .home .navbar .button {
    color: #0a0a0a;
  }
}

.navbar-link:not(.is-arrowless):after {
  border-color: #4a4a4a;
}

@media screen and (min-width:1024px) {
  .navbar-dropdown {
    border-radius: 0;
  }
}

/* =========================================
   トップページメインエリア
   ========================================= */
#top {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.top-logo {
  text-align: center;
}

.top-logo img {
  width: 200px;
}

.movie-link {
  position: absolute;
  bottom: 2em;
  right: 2em;
}

.movie-link p {
  margin: 0 auto;
}

.movie-link a {
  color: #fff;
}

#video-area {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  width: 177vh;
  height: 100vh;
}

#video {
  width: 100%;
  height: 100%;
}

.top-pics {
  overflow: hidden;
}

.slider-navigation-next,
.slider-navigation-previous {
  width: 30px;
  height: 30px;
}

/* =========================================
   背景画像定義
   ========================================= */

.cont {
  height: 50vh;
}

.cont h2 {
  font-size: 2rem;
  transition: all .3s ease 0s;
}

.cont p {
  padding-left: 1rem;
  padding-right: 1rem;
  transition: all .3s ease 0s;
}

.cont a:hover p {
  font-size: 110%;
  transition: all .3s ease 0s;
}

.cont a:hover h2 {
  font-size: 2.5rem;
  text-decoration: underline;
  transition: all .3s ease 0s;
}

.pb-50vh {
  padding-bottom: 50vh;
}

.rotate-180 {
  transform: rotate(180deg);
}

.rotate-90 {
  transform: rotate(90deg);
}

#top .modal-card,
#top .modal-content,
#hanabi-top .modal-card,
#hanabi-top .modal-content {
  width: 100%;
}

@media screen and (min-width:769px) {
  #top .modal-card,
  #top .modal-content,
  #hanabi-top .modal-card,
  #hanabi-top .modal-content {
    width: 100%;
  }
}

/* =========================================
   予約ウィジェット・フォーム
   ========================================= */
.book-btn,
.book-form-control,
.book-widget-bg,
.book-widget .ui-button,
.book-widget .ui-corner-all,
.book-widget .ui-datepicker,
.book-widget .ui-datepicker table,
.book-widget .ui-datepicker td,
.book-widget .ui-datepicker th,
.book-widget .ui-datepicker-calendar,
.book-widget .ui-datepicker-inline,
.book-widget .ui-datepicker-next,
.book-widget .ui-datepicker-next span,
.book-widget .ui-datepicker-prev,
.book-widget .ui-datepicker-prev span,
.book-widget .ui-datepicker-title,
.book-widget .ui-helper-clearfix,
.book-widget .ui-icon-circle-triangle-e,
.book-widget .ui-icon-circle-triangle-w,
.book-widget .ui-state-default,
.book-widget .ui-state-disabled,
.book-widget .ui-widget,
.book-widget .ui-widget-content,
.book-widget .ui-widget-content .ui-state-default,
.book-widget .ui-widget-header,
.book-widget .ui-widget-header .ui-state-default,
.book-widget.ui-corner-all .book-widget .ui-datepicker-header,
.book-widget.ui-datepicker,
.book-widget.ui-helper-clearfix,
.book-widget.ui-state-disabled .book-widget .ui-icon,
.book-widget.ui-widget,
.book-widget.ui-widget-content,
html .book-widget .ui-button.ui-state-disabled:active,
html .book-widget .ui-button.ui-state-disabled:hover {
  border-radius: 5px !important;
}

.book-form-control {
  text-align: center !important;
}

.book-widget.ui-datepicker td.ui-datepicker-unselectable .ui-state-default:before {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(transparent 47%, #fff 47%, #fff 52%, transparent 52%);
  transform: rotate(-45deg);
}

/* =========================================
   モーダル・その他
   ========================================= */
.mordal-cont1-img,
.mordal-cont1-text {
  background-color: #fff;
  color: #333;
}

.mordal-cont1-text div {
  padding: 5rem 2rem;
}

#modal-layout {
  overflow-y: scroll;
}

@media screen and (min-width:769px) {
  #modal-layout .modal-card,
  #modal-layout .modal-content {
    width: 90%;
  }
}




/* =========================================
   ヘッダー (Navbar) 設定 - 最終修正版
   ========================================= */

/* --- 共通: 背景を黒にする (最優先) --- */
/* 何があっても黒背景を維持します */
header, nav.navbar, .navbar-menu {
  background-color: #000000 !important;
  background: #000000 !important;
}

.navbar {
  transition: all 0.3s ease;
  padding: 0;
}

/* =========================================
   PC表示 (1024px以上)
   ========================================= */
@media screen and (min-width: 1024px) {
  /* 高さ設定 */
  .navbar, .navbar-menu, .navbar-brand, .navbar-item {
    height: 58px !important;
    min-height: 58px !important;
  }
  
  /* ロゴ画像 */
  .navbar-brand .navbar-item img {
    width: 174px !important;
    max-height: 43px !important;
    height: 43px !important;
  }

  /* メニュー設定 */
  .pc-menu-item {
    font-family: 'Aboreto', cursive;
    font-size: 12px !important;
    letter-spacing: 0.08em !important;
    color: #ffffff !important;
    padding-left: 1.0rem !important;
    padding-right: 1.0rem !important;
    display: flex;
    align-items: center;
    position: relative;
    text-decoration: none;
  }
 /* ホバー時の変化をすべて無効化 */
  .pc-menu-item:hover {
    background-color: transparent !important; /* 背景を透明のまま維持 */
    color: #ffffff !important; /* 文字色を白のまま維持 */
  }
  
  /* スラッシュ設定 */
  .pc-menu-item:not(:last-of-type)::after {
    content: '/';
    position: absolute;
    right: 0;
    color: #ffffff !important;
    font-family: serif;
  }
  .pc-menu-item:last-of-type::after { content: none !important; display: none !important; }

  /* 予約ボタン (PC) */
  .pc-header-btn {
    width: 182px !important;
    height: 34px !important;
    border: 1px solid #fff !important;
    border-radius: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    color: #000;
  }
  .pc-header-btn:hover {
    background-color: #e6e6e6 !important;
    color: #000 !important;
  }
  .pc-header-btn span {
    font-family: 'Shippori Mincho B1', serif;
    font-size: 12px !important;
    line-height: 1 !important;
    letter-spacing: 0.2em !important;
    margin-right: 5px;
  }
}



/* =========================================
   スマホ表示 (1023px以下) - メニュー下部調整・余白微調整版
   ========================================= */
@media screen and (max-width: 1023px) {

  /* 1. ヘッダー高さ: 60px */
  .navbar, .navbar-brand {
    height: 60px !important;
    min-height: 60px !important;
  }

  /* ブランドエリア設定 */
  .navbar-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    width: 100%;
    overflow: hidden;
  }

  /* 2. ロゴ画像 (左余白を微調整) */
  .navbar-brand .navbar-item {
    margin-right: auto !important;
    padding: 0 !important;
    
    /* ★左へのずらし幅を少し調整 (-20px -> -12px) */
    /* ※画面端に近づけすぎず、適度な狭さにします */
    margin-left: -12px !important; 
    flex-shrink: 0;
  }
  
  .navbar-brand .navbar-item img {
    height: 50px !important; 
    max-height: 50px !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain;
  }

  /* 3. ハンバーガーメニュー */
  .navbar-burger {
    height: 60px !important;
    width: 60px !important;
    margin: 0 !important;
    color: #fff !important;
    
    transform: scale(2.0);
    transform-origin: center;
    
    margin-right: 4px !important; 
  }

/* 4. 予約ボタン (右側の線が見えるように位置調整) */
  .mobile-header-btn {
    display: flex !important;
    justify-content: center;
    align-items: center;
    
    width: 160px !important; 
    max-width: 45vw !important;
    height: 38px !important;
    
    background-color: transparent !important; 
    border: 1px solid #ffffff !important;
    color: #ffffff !important;
    
    font-family: 'Shippori Mincho B1', serif;
    font-size: 12px !important; 
    text-decoration: none;
    
    /* ★修正ポイント: マイナスをやめて、線が見えるように少しだけ内側に戻す */
    /* -5px だとはみ出すので、1px か 2px に設定します */
    margin-right: 2px !important; 
    
    box-sizing: border-box;
  }
  
  .mobile-header-btn img {
    filter: brightness(0) invert(1);
    width: 18px !important;
    height: auto;
    margin-left: 6px;
  }

  /* =========================================
     5. 開閉メニュー (ハンバーガー押下時) の設定
     ========================================= */
  
  /* メニュー本体 */
  .navbar-menu {
    background-color: #ffffff !important;
    width: 100vw !important;
    margin-left: 0 !important;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    position: absolute;
    left: 0;
    
    /* ★上下の余白調整 */
    padding-top: 20px !important;
    /* ★下の余白を狭める (20px -> 5px) */
    padding-bottom: 5px !important;
  }

  /* メニュー内のリンク文字 */
  .navbar-menu .navbar-item,
  .pc-menu-item {
    color: #000000 !important;
    font-family: 'Aboreto', cursive;
    
    justify-content: flex-start !important; 
    text-align: left !important;
    padding-left: 40px !important; 
    
    border-bottom: 1px solid #f0f0f0;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
  
  /* ★最後のメニュー項目 (CONTACT) の下の線を消す */
  .navbar-menu .navbar-item:last-child,
  .pc-menu-item:last-child {
    border-bottom: none !important;
  }
  
  /* PC用装飾(スラッシュ)非表示 */
  .pc-menu-item::after {
    display: none !important;
  }
  
  /* メニュー内ボタン非表示 */
  .navbar-menu .button {
    display: none !important;
  }
}

/* =========================================
   CELEVI カスタム修正 (Hero Video)
   ========================================= */

/* ヒーローセクションの基盤 */
.hero#top {
  position: relative;
  overflow: hidden; /* はみ出した動画を隠す */
  background: none; /* 背景画像を無効化 */
}

/* 動画を配置する絶対配置のコンテナ */
.video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* コンテンツの背面に配置 */
  overflow: hidden;
}

/* 動画タグ自体のスタイル */
.video-background video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* アスペクト比を維持したままエリア全体を埋める */
  object-position: center center;
}

/* (必要であれば) 動画の上に網掛けを乗せて文字を見やすくする場合 */
/*
.video-background::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.2); 
}
*/

/* =========================================
   予約セクション (#book) デザイン修正 - 解説付き
   ========================================= */

/* --- 共通設定 --- */
/* ▼「ご予約はこちら」セクション全体の背景色など */
#book {
  background-color: #F6F6F6;
  font-family: 'Shippori Mincho B1', serif;
  color: #3E3D35;
}

#book .container {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- テキストの基本設定 --- */
.book-title-sub,
.book-title-main,
.book-desc {
  color: #3E3D35;
  text-align: center;
}

.book-title-sub { font-weight: 500; }  /* "CELEVI Yomitan..." */
.book-title-main { font-weight: 400; } /* "ご予約はこちら" */
.book-desc { font-weight: 400; }       /* "当ヴィラは..." */


/* --- 予約フォーム（入力欄とボタンのまとまり） --- */
.booking-widget-box {
  background-color: #fff;
  border: none; /* 枠線なし */
  border-radius: 8px; /* 角丸 */
  
  display: flex;
  justify-content: center;
  align-items: flex-end;
  box-sizing: border-box;
}

/* 「チェックイン/アウト」のラベル＋入力欄のセット */
.booking-input-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ▼ テキスト：「チェックイン」「チェックアウト」 */
.booking-input-label {
  font-family: 'Shippori Mincho B1', serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #3E3D35;
  /* ★ ここでラベルと入力欄の隙間を調整できます */
  margin-bottom: 5px; 
  line-height: 1;
  display: block;
}

/* 入力欄の外枠（サイズ指定用） */
.input-wrapper {
  position: relative;
  width: 100%;
}

/* ▼ 日付が入る入力エリア本体 */
.booking-widget-box input {
  font-family: 'Shippori Mincho B1', serif;
  color: #3E3D35;
  border: 1px solid #ddd; /* 入力欄自体の薄い枠線 */
  border-radius: 0;
  background: transparent;
  outline: none;
  text-align: center;
  cursor: pointer;
  padding: 0 20px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  font-size: 12px;
}

/* カレンダーアイコン */
.input-wrapper .icon-calendar {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #3E3D35;
  font-size: 12px;
  pointer-events: none;
}

/* ▼ ボタン：「確 認」 */
.booking-search-btn {
  background-color: #3E3D35;
  color: #fff;
  border: none;
  font-family: 'Shippori Mincho B1', serif;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition: opacity 0.3s;
}
.booking-search-btn:hover { opacity: 0.8; }


/* =========================================
   【PC画面】の設定 (幅769px以上)
   ========================================= */
@media screen and (min-width: 769px) {
  #book {
    /* ★ エリア全体の余白（高さ） */
    padding-top: 76px;    /* 上の余白（エリア開始〜CELEVIまで） */
    padding-bottom: 65px; /* 下の余白（文章終わり〜エリア終了まで） */
  }

  /* ▼ テキスト：「CELEVI Yomitan セレヴィ読谷」 */
  .book-title-sub {
    font-size: 18px;
    letter-spacing: 0.2em;
    line-height: 1;
    /* ★ 下の文字（ご予約はこちら）との距離 */
    margin-bottom: 54px;
  }

  /* ▼ テキスト：「ご予約はこちら」 */
  .book-title-main {
    font-size: 26px;
    letter-spacing: 0.2em;
    line-height: 1;
    /* ★ 下の予約フォームとの距離 */
    margin-bottom: 17px;
  }

  /* ▼ 予約フォームの白いエリア（枠線なし） */
  .booking-widget-box {
    width: 742px;
    height: 100px;
    padding: 0 40px; 
    gap: 20px; /* 入力欄とボタンの横の間隔 */
    align-items: center;
    /* ★ 下の文章（当ヴィラは...）との距離 */
    margin-bottom: 17px;
  }

  /* 個別の入力欄サイズ */
  .input-wrapper {
    width: 168px;
    height: 26px;
  }

  /* ▼ ボタン：「確 認」 */
  .booking-search-btn {
    width: 68px;
    height: 26px;
    font-size: 12px;
    letter-spacing: 0.1em;
    
    /* ボタンの位置調整 */
    margin-top: 17px; 
    /* ★ ボタンをさらに上にずらしたい場合はこの数字を調整（例: -4px） */
    transform: translateY(0px); 
  }
  
  /* ▼ 文章：「当ヴィラは、那覇空港から...」 */
  .book-desc {
    font-size: 14px;
    line-height: 28px;
    letter-spacing: 0.2em;
    width: 100%;
    margin-top:50px;
  }
}


/* =========================================
   【スマホ画面】の設定 (幅768px以下)
   ※デザインカンプ幅 800px を基準に vw で計算
   ========================================= */
@media screen and (max-width: 768px) {
  #book {
    /* ★ エリア全体の余白（高さ） */
    padding-top: 10vw;    /* 上の余白 */
    padding-bottom: 13vw; /* 下の余白 */
  }

  /* ▼ テキスト：「CELEVI Yomitan セレヴィ読谷」 */
  .book-title-sub {
    font-size: 4.5vw;
    letter-spacing: 0.1em;
    line-height: 1.2;
    /* ★ 位置調整 */
    margin-top: 2vw;      /* 少し下にずらすための上余白 */
    margin-bottom: 7.5vw; /* 下の文字との距離 */
  }

  /* ▼ テキスト：「ご予約はこちら」 */
  .book-title-main {
    font-size: 5.75vw;
    letter-spacing: 0.2em;
    line-height: 1.2;
    /* ★ 下の予約フォームとの距離 */
    margin-bottom: 4.5vw;
  }

  /* ▼ 予約フォームのエリア */
  .booking-widget-box {
    width: 92.75vw;
    padding: 8vw 4vw;
    flex-direction: column;
    gap: 6vw; /* 入力欄同士の縦の間隔 */
    height: auto;
    
    /* ★ 下の文章（当ヴィラは...）との距離 */
    /* ここを狭くすると文章が上に上がります */
    margin-bottom: 8vw; 
  }
  
  /* スマホ用レイアウト調整 */
  .booking-input-group,
  .btn-wrapper { width: 100%; }

  .booking-input-label {
    font-size: 3.5vw;
    text-align: center;
    width: 100%;
  }

  .input-wrapper {
    width: 100%;
    height: 12vw;
  }
  
  .booking-widget-box input {
    font-size: 4vw;
  }
  
  .input-wrapper .icon-calendar {
    font-size: 4vw;
    right: 3vw;
  }

  .booking-search-btn {
    width: 100%;
    height: 12vw;
    font-size: 4.5vw;
    letter-spacing: 0.2em;
    margin-top: 0;
  }

  /* ▼ 文章：「当ヴィラは...」 */
  .book-desc {
    font-size: 2.6vw; 
    line-height: 5vw;
    letter-spacing: 0.2em;
    width: 92.75vw;
    /* 位置を個別に調整したい場合は margin-top: -2vw; などを追記 */
  }
}

/* =========================================
   CELEVI カスタム修正 (Slider Adjustments)
   ========================================= */

/* スライダーの丸（ページネーション）を消す */
.slider-pagination {
  display: none !important;
}

/* 矢印ナビゲーションのデザイン微調整（必要であれば） */
.slider-navigation-previous,
.slider-navigation-next {
  background: rgba(255, 255, 255, 0.5) !important;
  border-radius: 50%;
  color: #000 !important;
}

/* =========================================
   スマホ専用スライドショー設定 (中央チラ見せ版)
   ========================================= */
@media screen and (max-width: 768px) {

  /* 1. コンテナ全体の設定 */
  #top-carousel-mobile {
    width: 100% !important;
    overflow: hidden;
  }

  /* 2. スライドのレール（土台）の設定 */
  /* 左側に余白を作って、1枚目を画面中央に押し出します */
  /* 計算式: (画面幅100% - 画像幅75%) ÷ 2 = 12.5% の余白 */
  #top-carousel-mobile .carousel-container {
    width: 100% !important;
    padding-left: 12.5vw !important; /* これで中央寄せに見せます */
    box-sizing: border-box !important;
  }

  /* 3. 各スライド（画像アイテム）の幅設定 */
  /* 画面幅の75%に縮小し、隙間(margin)を作ります */
  #top-carousel-mobile .carousel-item {
    width: 75vw !important;      /* 画像の幅を75%に */
    flex: 0 0 75vw !important;   /* 幅を固定 */
    margin-right: 15px !important; /* 画像同士の隙間 */
    display: block !important;
    opacity: 1 !important;       /* チラ見せ部分も表示 */
  }

  /* 4. 画像枠 (692x1040比率) */
  #top-carousel-mobile .mobile-slide-img {
    width: 100% !important;
    padding-top: 150.3% !important; /* 縦長比率 */
    height: 0 !important;
    position: relative;
    overflow: hidden;
    /* 角を少し丸める場合（お好みで） */
    /* border-radius: 8px; */
  }

  /* 5. 画像の中身 */
  #top-carousel-mobile .mobile-slide-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    /* 画像を少し暗くしておき、アクティブなものだけ明るくする場合（任意） */
    /* transition: all 0.3s; */
  }
  
  /* 6. 矢印ボタン (位置調整) */
  #top-carousel-mobile .slider-navigation-previous,
  #top-carousel-mobile .slider-navigation-next {
    display: flex !important;
    width: 36px;
    height: 36px;
    background: rgba(0,0,0,0.4);
    border-radius: 50%;
    z-index: 100;
    /* 矢印を画面端に寄せる */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  #top-carousel-mobile .slider-navigation-previous {
    left: 10px !important;
  }
  #top-carousel-mobile .slider-navigation-next {
    right: 10px !important;
  }
}

/* =========================================
   CELEVI カスタム修正 (Ocean View)
   ========================================= */

#ocean-view-bg {
  background-image: url('../images/ocean_view_wide.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  
  /* 高さを456pxに固定 */
  height: 456px;
  
  /* 文字を強制的に中央揃えにする設定 */
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}

/* 内部のコンテナリセット */
#ocean-view-bg .hero-body {
  flex-grow: 0 !important;
  padding: 0 !important;
  width: 100%;
}

/* =========================================
   CELEVI カスタム修正 (Facility Equipment)
   ========================================= */

#facility-equipment-bg {
  /* ここだけ変更：背景画像を設備用のものに */
  background-image: url('../images/facility_equipment_hero.jpg');
  
  /* 以下、OCEAN VIEWと全く同じ設定 */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  
  /* 高さを456pxに固定 */
  height: 456px;
  
  /* 文字を強制的に中央揃えにする設定 */
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}

/* 内部のコンテナリセット */
#facility-equipment-bg .hero-body {
  flex-grow: 0 !important;
  padding: 0 !important;
  width: 100%;
}

/* =========================================
   CELEVI カスタム修正 (Floor Plan)
   ========================================= */

/* リストの区切り線 (指定色 #3E3D35) */
.border-bottom-custom {
  border-bottom: 1px solid #3E3D35;
}

/* 右カラムの幅固定によるレスポンシブ調整 */
@media screen and (max-width: 768px) {
  /* スマホ時は横幅固定を解除して全幅表示にする */
  #floor-plan .column.is-narrow {
    width: 100% !important;
  }
  
  #floor-plan .container {
    max-width: 100% !important;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}


/* =========================================
   CELEVI カスタム修正 (Features Grid) - 修正版
   ========================================= */

/* 背景画像の基本設定 */
.clv-features-bg {
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}

/* 背景画像を中央配置 */
.clv-bg-center {
  background-position: 50% 50%;
}

/* コンテンツエリア（高さ50vh） */
.clv-features-content {
  height: 50vh; 
  position: relative;
}

/* -------------------------------------------------------
   ★修正箇所：レイアウト設定
   ------------------------------------------------------- */
.clv-features-content a {
  display: flex !important;           /* Flexbox有効化 */
  flex-direction: column !important;  /* 縦並び */
  
  /* 上下に配置するための設定 */
  justify-content: flex-start !important; /* 「上揃え」にする */
  
  /* 左右の中央揃え */
  align-items: center !important;         /* コンテンツを中央軸に配置 */
  text-align: center !important;          /* テキスト自体を中央揃え */
  
  /* ★ここを調整して高さを決めてください（数値が小さいほど上に行きます） */
  padding-top: 60px !important; 
  
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: #fff; 
  box-sizing: border-box; 
}

/* 高さ確保用のpaddingをリセット */
.clv-h-50vh {
  padding-bottom: 0 !important;
  height: auto !important;
}
/* ------------------------------------------------------- */


/* テキストシャドウ */
.clv-text-shadow {
  text-shadow: 2px 2px 3px rgba(0, 0, 0, .65);
}


/* --- タイトル等の設定 --- */

/* 英語見出し (POOL... 26px) */
.clv-features-content h2 {
  font-size: 26px !important;
  padding-bottom: 8px !important;
  line-height: 1.2 !important;
  font-weight: 500;
  transition: all .3s ease 0s;
  
  /* 余白リセット（中央揃えを邪魔しないように） */
  margin: 0 !important; 
  width: 100%; /* 幅を確保してtext-alignを効かせる */
}

/* 日本語見出し (あなただけの... 16px) */
.clv-features-content p {
  font-size: 16px !important;
  line-height: 1.5 !important;
  opacity: 0.9;
  padding-left: 1rem;
  padding-right: 1rem;
  transition: all .3s ease 0s;
  
  /* 余白リセット */
  margin: 0 !important;
  width: 100%;
}

/* 矢印アイコン */
.clv-features-content .icon {
  margin-top: 1rem; /* テキストとの間隔 */
  display: inline-flex !important; /* インラインフレックスにして中央揃えに従わせる */
}


/* --- ホバー時の挙動 --- */

.clv-features-content a:hover h2 {
  font-size: 30px !important;
  text-decoration: none !important;
}

.clv-features-content a:hover p {
  font-size: 16px !important; 
}


/* スマホ対応 */
@media (max-width: 767px) {
  .clv-features-content {
     /* スマホでの調整が必要な場合はここに */
  }
}



/* =========================================
   Access セクション (見出し画像)
   ========================================= */

#access-bg {
  /* Access用の背景画像 */
  background-image: url('../images/access_hero.jpg');
  
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  
  /* 高さ設定 */
  height: 456px;
  
  /* 文字を強制的に中央揃えにする設定 */
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}

/* 内部コンテナのリセット */
#access-bg .hero-body {
  flex-grow: 0 !important;
  padding: 0 !important;
  width: 100%;
}

/* =========================================
   Access コンテンツ (Map)
   ========================================= */

/* 地図のレスポンシブコンテナ */
.map-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 の比率で高さを確保 */
  height: 0;
  overflow: hidden;
  background-color: #ddd; /* 読み込み中の背景色 */
}

/* iframeをコンテナいっぱいに広げる */
.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 少しリッチに見せるための影 */
.shadow-custom {
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* スマホレイアウト調整 */
@media screen and (max-width: 768px) {
  /* 地図の上に余白を入れる */
  .map-container {
    margin-top: 2rem;
  }
}

/* =========================================
   CELEVI カスタム修正 (Photo Gallery Hero)
   ========================================= */

#photo-gallery-bg {
  /* 背景画像 (適宜変更してください) */
  background-image: url('../images/photo_gallery_hero.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  
  /* 他のセクションに合わせて高さを456pxに固定 */
  height: 456px;
  
  /* 文字を強制的に中央揃えにする設定 */
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}

/* 内部コンテナのリセット */
#photo-gallery-bg .hero-body {
  flex-grow: 0 !important;
  padding: 0 !important;
  width: 100%;
}


/* =========================================
   CELEVI カスタム修正 (Photo Gallery Grid Size)
   ========================================= */

/* 共通設定 */
.bg-img-full {
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

/* リンクエリアをブロック化してクリック可能に */
.top-cont .cont a {
  display: block;
  width: 100%;
  height: 100%;
}

/* ----------------------------------
   PC表示 (769px以上)
   高さ: 221px に固定
   ---------------------------------- */
@media screen and (min-width: 769px) {
  .top-cont .cont {
    height: 221px; /* 指定の高さ */
    width: 100%;
  }
}

/* ----------------------------------
   スマホ表示 (768px以下)
   ---------------------------------- */
@media screen and (max-width: 768px) {
  .top-cont .cont {
    /* 160px → 220px に変更して縦長にします */
    height: 220px; 
    width: 100%;
  }
  
  /* 隙間を完全になくす設定（維持） */
  .top-cont .column {
    padding: 0 !important;
  }
}


/* =========================================
   CELEVI カスタム修正 (Features Grid) - 完全版
   ========================================= */

/* 1. 背景画像の基本設定 */
.clv-features-bg {
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}

/* 背景画像を中央配置にする補助クラス */
.clv-bg-center {
  background-position: 50% 50%;
}

/* 2. コンテンツエリアの高さ設定 */
.clv-features-content {
  height: 50vh;       /* 画面の半分の高さ */
  position: relative; /* 位置基準 */
  width: 100%;
}


/* -------------------------------------------------------
   3. テキスト位置とレイアウトの設定 (重要)
   ------------------------------------------------------- */
.clv-features-content a {
  display: flex !important;           /* Flexbox有効化 */
  flex-direction: column !important;  /* 縦並び */
  
  /* --- 垂直方向の位置 --- */
  justify-content: flex-start !important; /* 「上詰め」にする */
  padding-top: 60px !important;           /* 上から60pxの位置に配置 */
  
  /* --- 水平方向の位置 --- */
  align-items: center !important;         /* ブロック自体を中央揃え */
  text-align: center !important;          /* テキストの中身を中央揃え */
  
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: #fff; 
  box-sizing: border-box; /* paddingを含めて高さを計算 */
}

/* 4. 余計な余白（黒い帯の原因）を強制削除 */
.clv-h-50vh, 
.pb-50vh {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}
/* ------------------------------------------------------- */


/* 5. テキストの装飾 */
.clv-text-shadow {
  text-shadow: 2px 2px 3px rgba(0, 0, 0, .65);
}

/* 英語見出し (POOL, SAUNA... 26px) */
.clv-features-content h2 {
  font-size: 26px !important;
  padding-bottom: 8px !important; /* 下に少し余白 */
  line-height: 1.2 !important;
  font-weight: 500;
  transition: all .3s ease 0s;
  
  /* 配置リセット */
  margin: 0 !important; 
  width: 100%; 
}

/* 日本語サブタイトル (あなただけの... 16px) */
.clv-features-content p {
  font-size: 16px !important;
  line-height: 1.5 !important;
  opacity: 0.9;
  padding-left: 1rem;
  padding-right: 1rem;
  transition: all .3s ease 0s;
  
  /* 配置リセット */
  margin: 0 !important;
  width: 100%;
}

/* 矢印アイコン */
.clv-features-content .icon {
  margin-top: 1rem; /* テキストとの間隔 */
  display: inline-flex !important; /* 中央揃えに従わせる */
}


/* 6. ホバー時のアニメーション */
.clv-features-content a:hover h2 {
  font-size: 30px !important; /* 文字を少し大きく */
  text-decoration: none !important;
}

.clv-features-content a:hover p {
  font-size: 16px !important; /* サイズ維持 */
}


/* 7. コンテナ全体の余白リセット（念のため） */
/* セクションの下に隙間ができないようにする */
section.p-0, 
.columns.is-gapless {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}


/* 8. スマホ対応 (画面幅767px以下) */
@media (max-width: 767px) {
  .clv-features-content {
     /* スマホでも高さ50vhを維持 */
     height: 50vh !important;
  }
}


/* =========================================
   Footer デザイン修正 (黒背景・3カラム)
   ========================================= */

/* --- カラム幅の設定 (PC) --- */
@media screen and (min-width: 1024px) {
  /* 左カラム 301px */
  .footer-col-left {
    flex: none !important;
    width: 301px !important;
    padding-top: 0 !important;
  }
  
  /* 中央カラム 165px */
  .footer-col-center {
    flex: none !important;
    width: 165px !important;
    padding-top: 0 !important;
    /* 中央配置のバランス調整のため少しマージンを入れる場合 */
    margin-left: 40px; 
  }

  /* 右カラム (残りのスペース、中身は右寄せ) */
  .footer-col-right {
    flex: none !important;
    width: auto !important;
    padding-top: 0 !important;
    /* 右端に寄せる */
    display: flex;
    flex-direction: column;
    align-items: flex-end; 
  }
}


/* --- 左カラムの装飾 --- */

/* Google MAP リンク */
.footer-map-link {
  color: #ffffff;
  font-size: 13px;
  text-decoration: none;
  border-bottom: 1px solid #ffffff; /* 下線 */
  padding-bottom: 2px;
  transition: opacity 0.3s;
  letter-spacing: 0.05em;
}
.footer-map-link:hover {
  opacity: 0.7;
  color: #ffffff;
}


/* --- 中央カラム (CONTENTS) の装飾 --- */

.footer-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-nav-list li {
  margin-bottom: 12px;
}

.footer-nav-list li a {
  color: #ffffff;
  font-size: 12px;
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: opacity 0.3s;
}

.footer-nav-list li a:hover {
  opacity: 0.6;
}


/* --- 右カラムの装飾 --- */

/* 1. 「ご予約はこちら」ボタン */
.footer-reserve-btn {
  display: flex;
  justify-content: space-between; /* 文字と矢印を左右に */
  align-items: center;
  width: 264px;       /* 指定幅 */
  height: 36px;       /* 指定高さ */
  border: 1px solid #ffffff; /* 白囲い線 */
  background-color: transparent;
  color: #ffffff;
  text-decoration: none;
  font-size: 12px;
  padding: 0 15px;    /* 内部余白 */
  box-sizing: border-box;
  transition: all 0.3s ease;
  font-family: serif; /* 明朝体っぽく */
}

.footer-reserve-btn:hover {
  background-color: #ffffff;
  color: #000000;
}
.footer-reserve-btn:hover .long-arrow {
  border-color: #000000; /* ホバー時の矢印色 */
}
.footer-reserve-btn:hover .long-arrow::after {
  border-right-color: #000000;
  border-top-color: #000000;
}

/* 矢印 (長い線 + 先端) の作成 */
.long-arrow {
  position: relative;
  display: block;
  width: 40px;          /* 矢印の長さ */
  height: 1px;
  border-bottom: 1px solid #ffffff; /* 線の部分 */
  margin-left: 10px;
  transition: border-color 0.3s;
}

/* 矢印の先端 */
.long-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -4px; /* 位置調整 */
  width: 6px;
  height: 6px;
  border-top: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
  transform: rotate(45deg);
  transition: border-color 0.3s;
}


/* 2. 「当サイトに関するお問い合わせはこちら」リンク */
.footer-contact-link {
  display: block;
  width: 264px;    /* 指定幅 */
  padding: 15px 0; /* 上下の余白で高さを出す */
  border-top: 1px solid #ffffff;    /* 上の白線 */
  border-bottom: 1px solid #ffffff; /* 下の白線 */
  color: #ffffff;
  text-align: left; /* 左揃え (画像参照) */
  font-size: 11px;
  text-decoration: none;
  transition: opacity 0.3s ease;
  font-family: serif;
  box-sizing: border-box;
}

.footer-contact-link:hover {
  opacity: 0.7;
  color: #fff;
}


/* --- スマホ表示 (1023px以下) --- */
@media screen and (max-width: 1023px) {
  .footer-col-left,
  .footer-col-center,
  .footer-col-right {
    width: 100% !important;
    text-align: center !important; /* スマホでは中央揃え */
    margin-bottom: 40px;
    margin-left: 0 !important;
    align-items: center !important; /* Flex要素も中央へ */
  }

  /* 右カラムの要素も中央配置に */
  .footer-reserve-btn,
  .footer-contact-link {
    margin: 0 auto; /* 中央寄せ */
  }
}


/* =========================================
   2025/02 Global Update
   色・フォントの一括変更 & ボタン設定
   ========================================= */

/* 1. ページ全体 (ヘッダー・フッター以外) の基本設定 */
body {
  color: #3E3D35 !important;
  /* 英語は Aboreto、日本語は Shippori Mincho B1 を優先 */
  font-family: 'Aboreto', 'Shippori Mincho B1', serif !important;
}

/* 黒字テキストの強制上書き (#3E3D35) */
h1, h2, h3, h4, h5, h6, p, a, span, li, div {
  color: #3E3D35;
}

/* 2. ヘッダー・フッターの除外設定（元の色・フォントに戻す/維持する） */
header, header *,
footer, footer * {
  /* ヘッダー・フッター内の文字色は元の指定を優先させるため unset または個別に白などを指定 */
  color: revert; 
}
/* フッターは背景黒・白文字を維持 */
#footer, #footer * {
  color: #ffffff;
}
/* フッター内のリンクなどは白 */
#footer a {
  color: #ffffff;
}

/* 3. 「CELEVI Yomitan セレヴィ読谷」タイトルの維持 */
/* 以前設定したフォント設定（Shippori Mincho B1）が優先されるようにする */
.book-title-sub {
  font-family: 'Shippori Mincho B1', serif !important;
  color: #3E3D35 !important;
}

/* 4. ボタン内の矢印画像スタイル */
.btn-arrow-icon {
  width: 27px;
  height: auto; /* 比率維持 (元は6px) */
  margin-left: 15px; /* 文字との間隔 */
  filter: invert(21%) sepia(8%) saturate(464%) hue-rotate(24deg) brightness(97%) contrast(90%); /* 画像を #3E3D35 色に近づけるフィルタ（必要であれば） */
  /* 元画像が黒の場合、そのままでOKならfilterは不要 */
}

/* 白ボタンの場合の矢印調整 */
.button.is-white .btn-arrow-icon {
  /* 必要に応じて調整 */
}




/* =========================================
   Contact Page Styles (WordPress Optimized)
   ========================================= */

/* Body Class Adjustment */
body.contact-page {
  color: #3E3D35;
  font-family: 'Shippori Mincho B1', serif;
  font-weight: 500;
}

.font-aboreto { font-family: 'Aboreto', cursive; }
.font-shippori { font-family: 'Shippori Mincho B1', serif; }

/* Main Section */
.contact-main-section {
  background-color: #F6F6F6;
  padding-top: 160px;
  padding-bottom: 120px;
}

.contact-container {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Titles */
.contact-title-area {
  text-align: center;
  margin-bottom: 80px;
}
.contact-title-en {
  font-size: 26px;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
  color: #3E3D35;
}
.contact-title-ja {
  font-size: 32px;
  letter-spacing: 0.1em;
  color: #3E3D35;
}

/* Phone Info */
.phone-contact-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 100px;
}
.phone-label {
  font-size: 24px;
  letter-spacing: 0.1em;
  line-height: 1.4;
}
.phone-divider {
  width: 1px;
  height: 72px;
  background-color: #3E3D35;
  margin: 0 40px;
}
.phone-number-block { text-align: center; }
.phone-number {
  font-family: 'Shippori Mincho B1', serif;
  font-size: 34px;
  letter-spacing: 0.1em;
  line-height: 1.2;
}
.phone-hours {
  font-size: 14px;
  letter-spacing: 0.1em;
  margin-top: 5px;
}

/* Form Styles */
.form-title {
  font-size: 24px;
  letter-spacing: 0.1em;
  margin-bottom: 40px;
  text-align: left;
}
.contact-form .field { margin-bottom: 30px; }
.contact-form .label {
  color: #3E3D35;
  font-family: 'Shippori Mincho B1', serif;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
  display: block;
}
.contact-form .required-mark { color: #FF0000; margin-left: 5px; }

/* Inputs */
.contact-form input,
.contact-form textarea {
  background-color: #FFFFFF;
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-family: 'Shippori Mincho B1', serif;
  font-size: 14px;
  color: #3E3D35;
  width: 100%;
  box-sizing: border-box;
}
.contact-form input { height: 40px; padding: 0 10px; }
.contact-form textarea { height: 200px; padding: 15px; resize: none; }
.contact-form ::placeholder { color: #999; }

/* Submit Button with CSS Arrow */
.submit-btn-wrapper { margin-top: 40px; }

.submit-btn {
  width: 246px;
  height: 46px;
  background-color: #FFFFFF;
  border: none;
  padding: 0 20px;
  cursor: pointer;
  transition: opacity 0.3s;
  font-family: 'Shippori Mincho B1', serif;
  font-size: 16px;
  letter-spacing: 0.2em;
  color: #3E3D35;
  
  /* Flexboxで文字と矢印を配置 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  /* 矢印画像の指定 (テーマフォルダ内のimagesを参照) */
  /* 文字の後ろに擬似要素で矢印を表示する場合の代替案としても有効 */
}

/* 矢印画像をCSSで挿入 */
.submit-btn::after {
  content: "";
  display: block;
  width: 40px;
  height: 10px; /* 矢印の高さに合わせて調整 */
  background-image: url('http://yomitan.celevi.jp/wp-content/themes/celevi-yomitan-theme/images/arrow2.svg'); /* cssフォルダから見た相対パスなら ../images/arrow2.svg ですが、style.cssがルートにある前提 */
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right center;
}

.submit-btn:hover { opacity: 0.7; }

/* SP Media Query */
@media screen and (max-width: 768px) {
  .contact-main-section { padding-top: 120px; padding-bottom: 80px; }
  .contact-title-en, .contact-title-ja { font-size: 24px; }
  .phone-contact-wrapper { flex-direction: column; margin-bottom: 60px; }
  .phone-divider { width: 30px; height: 1px; margin: 15px auto; }
  .phone-label { font-size: 18px; }
  .phone-number { font-size: 28px; }
  .form-title { text-align: center; font-size: 20px; }
  .submit-btn-wrapper { justify-content: flex-start; }
}


/* =========================================
       Coming Soon Page Specific Styles
       ========================================= */
    
    /* ヘッダーの高さを考慮したメインエリアの余白 */
    .coming-soon-section {
      background-color: #F6F6F6; /* サイト内で使用されているグレー */
      min-height: 80vh; /* フッターを下に押しやるための高さ確保 */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      
      /* ▼▼▼ 修正箇所: PC表示での余白を広げました (100px -> 200px) ▼▼▼ */
      padding-top: 200px; 
      /* ▲▲▲ 修正箇所 ▲▲▲ */
      
      padding-bottom: 100px;
    }

    /* メインタイトル (英語) */
    .cs-title {
      font-family: 'Aboreto', cursive;
      color: #3E3D35;
      font-size: 60px;
      letter-spacing: 0.1em;
      line-height: 1.2;
      margin-bottom: 20px;
      text-align: center;
    }

    /* サブタイトル (日本語) */
    .cs-subtitle {
      font-family: 'Shippori Mincho B1', serif;
      color: #3E3D35;
      font-size: 16px;
      letter-spacing: 0.2em;
      margin-bottom: 60px;
      text-align: center;
      line-height: 2;
    }

    /* ボタンのカスタマイズ (style.cssのスタイルを継承しつつ微調整) */
    .cs-button {
      background-color: transparent;
      border: 1px solid #3E3D35;
      color: #3E3D35;
      font-family: 'Shippori Mincho B1', serif;
      padding: 12px 40px;
      font-size: 14px;
      letter-spacing: 0.1em;
      transition: all 0.3s ease;
      text-decoration: none;
      display: inline-block;
    }

    .cs-button:hover {
      background-color: #3E3D35;
      color: #ffffff;
      opacity: 1;
    }

    /* レスポンシブ調整 (スマホ) */
    @media screen and (max-width: 768px) {
      .coming-soon-section {
        min-height: 60vh;
        
        /* スマホ時はヘッダーが小さいので少し詰めていますが、
           必要に応じてここも調整可能です (現在は120px) */
        padding-top: 120px; 
      }
      
      .cs-title {
        font-size: 32px; /* スマホではサイズを落とす */
        margin-bottom: 15px;
      }

      .cs-subtitle {
        font-size: 14px;
        margin-bottom: 40px;
        padding: 0 20px;
      }
    }




/* =========================================
   スマホ表示修正用スタイル（更新版）
   ========================================= */

/* 1. 横スクロール防止 */
html, body {
    overflow-x: hidden;
    width: 100%;
}

/* 2. スマホでのヘッダー調整 */
@media screen and (max-width: 768px) {
    
    /* ロゴ画像のサイズ調整 */
    .navbar-brand .navbar-item img {
        max-height: 40px !important; /* 24pxから40pxに変更 */
        width: auto;
    }
    
    /* ナビゲーションバーの高さ調整（ロゴに合わせて少し高くする） */
    .navbar-brand {
        min-height: 60px;
        display: flex;
        align-items: center;
    }

    /* 「ご予約はこちら」ボタンの調整 */
    .mobile-header-btn {
        width: auto !important;
        min-width: 140px;
        padding-left: 8px;
        padding-right: 8px;
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .mobile-header-btn span {
        font-size: 11px;
    }
}

/* 3. 動画背景の表示・配置修正（強力版） */
#top.hero {
    position: relative;
    background-color: transparent !important; /* 背景色を透明にして動画を見せる */
    z-index: 1;
}

.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1; /* コンテンツの一番後ろに配置 */
}

.video-background video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover; /* 画面いっぱいに埋める */
}

/* スマホの場合、アドレスバーの影響で高さがズレるのを防ぐ */
@media screen and (max-width: 768px) {
    .video-background {
        height: 100vh; 
    }
    .video-background video {
        height: 100vh;
        object-fit: cover;
    }
}