/* dear Ct. override - menu page table layout adjustment */

.entry_post_1092 .post_data,
.entry_post_1092 .sub_post,
.entry_post_1092 .sub_post_texts,
.entry_post_1092 .field_2col {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.entry_post_1092 .menu-list {
  float: none !important;
  width: 90% !important;
  max-width: 760px !important;
  margin: 1.5em auto !important;
  display: block !important;
}

.entry_post_1092 .menu-list table {
  width: 100% !important;
  margin: 0 auto !important;
  font-size: 1.05em !important;
}

.entry_post_1092 .menu-list td {
  padding: 1em 0.8em !important;
  vertical-align: middle !important;
}

.entry_post_1092 .menu-list .td_value {
  text-align: right !important;
  font-weight: bold !important;
  white-space: nowrap !important;
}

.entry_post_1092::after {
  content: "";
  display: block;
  clear: both;
}

/* ============================================================
   reserve ページ - 「インスタグラム/WEB予約」 セクションの中央揃え
   ============================================================ */
.sub_post.sub_post_0 .post_data,
.sub_post.sub_post_0 .post_data p,
.sub_post.sub_post_0 .sub_text_btn {
  text-align: center !important;
}
.sub_post.sub_post_0 .sub_post_texts {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 700px !important;
  float: none !important;
  width: 100% !important;
}

/* ============================================================
   TOP - Reserve バナーの CSS オーバーレイ (Voice バナー画像と統一)
   ============================================================ */
.dct-ig-link, .dct-reserve-link {
  position: relative;
  display: block;
  overflow: hidden;
}
.dct-ig-link img, .dct-reserve-link img {
  display: block;
  width: 100%;
  height: auto;
}
/* オーバーレイ: 写真の上に薄い暗紫色のティント(Voice 画像の色味に近づける) */
.dct-ig-link .dct-ig-overlay, .dct-reserve-link .dct-ig-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(40, 32, 64, 0.55), rgba(30, 58, 95, 0.55));
  /* Reserve と ご予約 を 1 つのスタックとして縦中央に重ねる(間隔は小さく) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  transition: background 0.3s ease;
}
.dct-ig-link:hover .dct-ig-overlay, .dct-reserve-link:hover .dct-ig-overlay {
  background: linear-gradient(135deg, rgba(40, 32, 64, 0.7), rgba(30, 58, 95, 0.7));
}
/* メインスクリプト「Reserve」 */
.dct-ig-link .dct-ig-script, .dct-reserve-link .dct-ig-script {
  display: block;
  position: static;
  font-family: "Allura", "Snell Roundhand", "Brush Script MT", cursive;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1;
  font-weight: 400;
}
/* サブ日本語「ご予約」 — Reserve のすぐ下(Voice 画像の間隔に合わせて狭く)
   font-size: ユーザー指定で約1.5倍に拡大
   font-family: Voice 画像の「お客様の声」に合わせて明朝体に */
.dct-ig-link .dct-ig-sub, .dct-reserve-link .dct-ig-sub {
  display: block;
  position: static;
  margin-top: 0.6em;
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", "MS Mincho", serif;
  font-weight: 400;
  font-size: clamp(1.4rem, 1.95vw, 1.8rem);
  letter-spacing: 0.3em;
}
/* 「View more」: ユーザー指定で完全非表示 */
.dct-ig-link .dct-ig-more, .dct-reserve-link .dct-ig-more {
  display: none !important;
}

/* ============================================================
   ダークブルー化 - リンクとボタンのみ(最小限の色変更)
   ============================================================ */

/* 本文内のリンク色(ナビは触らない) */
.post_data a,
.entry-content a {
  color: #1e3a5f;
}
.post_data a:hover,
.entry-content a:hover {
  color: #2c4f7c;
}

/* CTAボタン: main_btn(VIEW MORE 等)
   原石ブロック(TOP)の View more 画像 secondmain_btn.png(220×65, 筆塗り風) と
   統一するため、全 main_btn を画像背景化してテキストを非表示にする */
.main_btn a,
.main_btn a:link,
.main_btn a:visited {
  display: inline-block !important;
  width: 220px !important;
  height: 65px !important;
  padding: 0 !important;
  background: url("../../img/60018790/wp-content/uploads/2023/02/secondmain_btn.png") no-repeat center center !important;
  background-size: contain !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  text-shadow: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}
.main_btn a:hover {
  background-color: transparent !important;
  opacity: 0.85 !important;
}
/* 親 <p class="main_btn"> 自体は触らない(text-align: center は元のまま) */

/* read_more_btn(「詳しくはこちら」 系) */
.read_more_btn a {
  color: #1e3a5f !important;
}

/* sub_text_btn(reserve の IG ボタン等) */
.sub_text_btn a {
  display: inline-block !important;
  padding: 0.7em 1.8em !important;
  background: #1e3a5f !important;
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 999px !important;
  letter-spacing: 0.1em !important;
  transition: background 0.2s ease !important;
}
.sub_text_btn a:hover {
  background: #2c4f7c !important;
  color: #fff !important;
}

/* ============================================================
   セクション背景画像(PC用dear Ct.画像)の高さ調整
   ※PC のみ適用(min-width:768px)。SP は sp_second.png 等の SP 用画像を使う。
   ============================================================ */
@media (min-width: 768px) {
#inmkeii8dclyxnzmzqrg {
  height: auto !important;
  aspect-ratio: 1448 / 1086 !important;
  background-image: url(../../img/files/secondmain_bg01.jpg?v=20260604e) !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  position: relative !important;
}
#inmkeii8dclyxnzmzqrg .eyecatch {
  margin-top: 30% !important;
}

/* 宝石アイコン: 「dear Ct.」筆記体と「ディアカラット」の間に来るよう調整 */
#inmkeii8dclyxnzmzqrg #f_up {
  top: 11% !important;
  z-index: 3 !important;
}

/* TOP ヒーロー動画の右下にかぶる緑ユーカリ装飾を消す */
#video_teaser::before {
  background: none !important;
  display: none !important;
}

#s20r6ol950f52bb3rwul {
  height: auto !important;
  aspect-ratio: 1573 / 1000 !important;
  background-image: url(../../img/files/10top_block01_bg01.jpg?v=20260602) !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
}

/* ピンク ご予約セクション: 元 CSS は固定 height:1550px + 背景画像を等倍表示で
   セクション内に余白ができていた。新画像(1423×1105)のアスペクト比に合わせて
   セクションを縦横比駆動の高さに切り替え、画像をセクション幅にフィット */
#zi2831npdegkmmn61nh6 {
  height: auto !important;
  aspect-ratio: 1423 / 1105 !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
}
} /* end @media (min-width: 768px) for PC-only section backgrounds */

/* form の submit ボタン(将来使う場合に備えて) */
input[type="submit"],
input[type="button"],
button:not(.dct-no-bg) {
  background: #1e3a5f !important;
  color: #fff !important;
  border: 1px solid #1e3a5f !important;
}
input[type="submit"]:hover,
input[type="button"]:hover,
button:not(.dct-no-bg):hover {
  background: #2c4f7c !important;
  border-color: #2c4f7c !important;
}

/* ============================================================
   色変更 step2: 見出し色をダークブルーに(青みを強く)
   ============================================================ */
/* セクション見出し → メインダークブルー #1e3a5f */
.headline_title,
.post .headline_title,
.post .entry_title,
.entry_post h1,
.entry_post h2,
.entry_post h3,
.entry_post h4,
.post_data h1,
.post_data h2,
.post_data h3,
.post_data h4 {
  color: #1e3a5f !important;
}

/* 白背景 + 白文字の見出しは元のまま除外する必要なし
   (entry_title 内が白文字のものは、 背景画像があるはずでそのまま見える) */

/* 「新着情報」 など entry_title h3 がフッタ風背景の場合は元色のまま */
.entry_title.title_1006,
.entry_title.title_1006 h3 {
  /* 元の色を尊重 */
}

/* ============================================================
   色変更 step3: 区切り線・ボーダーを青系に統一
   ============================================================ */

/* セクション見出しの装飾線(下線・上線・サイドライン) → ダークブルー */
.headline_title,
.entry_title,
.sub_entry_title {
  border-color: #1e3a5f !important;
}

/* テーブルのセル罫線 → 薄いブルーグレー */
table,
table td,
table th,
table tr,
table tbody {
  border-color: #c9d4e2 !important;
}

/* テーブルヘッダ td の下線(ラベルセル) → アクセント水色 */
.menu-list table td,
.menu-list table tr {
  border-color: #c9d4e2 !important;
}

/* 一般的な hr セパレータ → 薄いブルーグレー */
hr {
  border-color: #c9d4e2 !important;
}

/* 投稿ボックスのボーダー */
.entry-post .post,
.post_data,
.eyecatch,
.field_2col {
  border-color: #c9d4e2 !important;
}

/* 「View More」 系の枠線 */
.read_more_btn,
.sub_text_btn,
.btn-outline {
  border-color: #1e3a5f !important;
}

/* fixed buttons (固定ボタン枠) */
#fixed_btn_voice,
#fixed_btn_news,
#fixed_btn_is {
  border-color: #1e3a5f !important;
}

/* ============================================================
   ヒーロー動画レイアウト調整
   - PC: #branding_box が「ロゴ背景帯」として 1030px の高さを取り、
     ヘッダー(80+70px)の下に大きな空白を作っていた。
     → branding_box を自然な高さに縮め、動画をヘッダー直下に配置。
   - SP: #video_teaser_sp が z-index:-1 で背景に隠れ、かつ動画位置が
     sp_body_bg.png の dearCt ロゴ部分と重なっていた。
     → 前面に出した上で、ロゴエリアの下にマージンで押し下げ。
        動画自身は object-fit:cover で縦に大きく表示。
   ============================================================ */
@media (min-width: 768px) {
  /* branding_box の超高い min/max-height 計算を解除して、コンテンツ分だけの高さに */
  #branding_box,
  #page_6 #branding_box {
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    /* toplogo.png の巨大背景画像を消す(ロゴは <img> で既に出ている) */
    background-image: none !important;
    background-color: #ffffff !important;
  }

  /* 動画は自然フローでヘッダーの真下に */
  #main_teaser,
  #video_teaser {
    position: relative !important;
    top: 0 !important;
    left: auto !important;
    margin: 0 auto !important;
    z-index: 1 !important;
  }
  #video_teaser video {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* スクロール時の固定ロゴ: 元 CSS は 165x70 に強制リサイズしていたため
     toplogo.png(270x160, 比率 1.69) が縦に圧縮されて二重に見えていた。
     object-fit:contain で比率を維持して 165x70 ボックス内に左寄せ表示。 */
  .main_header img.fixed,
  #page_6 .main_header img.fixed {
    width: 165px !important;
    height: 70px !important;
    object-fit: contain !important;
    object-position: left center !important;
    padding: 6px 8px !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
  }
}

/* SP ヒーロー動画 */
#video_teaser_sp {
  z-index: 1 !important;
  position: relative !important;
  display: block !important;
  /* dearCt ロゴ(sp_body_bg.png 左上、画像比 240/640 ≈ 37.5%, top 40/640 ≈ 6%) が
     見えるよう、ロゴ下端あたりまで動画を押し下げる。
     ロゴ下端 = 約 (40+96)/640 ≈ 21vw */
  margin-top: 22vw !important;
  /* モバイルでは縦に大きく見せたいので 55vh + object-fit:cover */
  height: 55vh !important;
  min-height: 280px !important;
  overflow: hidden !important;
}
#video_teaser_sp video {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* ============================================================
   TOP Reserve / Voice バナー: hover時の La gemme 残骸を完全抑止
   - 元 CSS は `:hover img { opacity:0 }` で前面 img を透明化し、
     `<a>` の background-image (banner_staff_on.jpg / banner_voice_on.jpg)
     を見せる仕組みになっていた。これがラ・ジェムのスタッフ写真を
     露出させる原因。完全に殺す。
   ============================================================ */
#x8is697fpdgft36gc64y .float_left a,
#x8is697fpdgft36gc64y .float_right a,
#x8is697fpdgft36gc64y .eyecatch a,
.dct-reserve-link,
.dct-ig-link {
  background: none !important;
  background-image: none !important;
}
#x8is697fpdgft36gc64y .float_left a:hover img,
#x8is697fpdgft36gc64y .float_right a:hover img,
#x8is697fpdgft36gc64y .eyecatch a:hover img,
.dct-reserve-link:hover img,
.dct-ig-link:hover img {
  opacity: 1 !important;
}

/* ============================================================
   TOP Voice / Reserve / Instagram バナー: hover で暗くする効果を復活
   - img に brightness フィルタをかけてホバー時にトーンダウン
   - なめらかに変化するよう transition を付与
   ============================================================ */
#x8is697fpdgft36gc64y .eyecatch a img,
.dct-reserve-link img,
#jh6gumekoy5724q1vld6 .eyecatch a img {
  transition: filter 0.3s ease !important;
}
#x8is697fpdgft36gc64y .eyecatch a:hover img,
.dct-reserve-link:hover img,
#jh6gumekoy5724q1vld6 .eyecatch a:hover img {
  filter: brightness(0.8) !important;
}

/* ============================================================
   TOP / reserve Instagram バナー: hover時の旧画像(花あり)露出を抑止
   - 元 CSS (#jh6gumekoy5724q1vld6) は背景に banner_insta_on.jpg(花あり)を
     banner_insta_bg.jpg(無地ネイビー)の上に重ね、hover で前面 img を
     opacity:0 にして花背景を見せる仕組み。
   - 花を消した新 banner_insta.jpg に差し替えたため、hover で旧花画像が露出。
   - 無地ネイビー背景(_bg, 横幅いっぱい)は残し、花レイヤー(_on)だけ除去。
     hover でも前面 img を不透明のまま維持する。
   ============================================================ */
#jh6gumekoy5724q1vld6 {
  background: url("../../img/files/banner_insta_bg.jpg") no-repeat center top !important;
}
#jh6gumekoy5724q1vld6 .eyecatch a:hover img {
  opacity: 1 !important;
}


/* ============================================================
   TOP「毛穴と、向き合う」見出しと本文の間のスペース調整
   ============================================================ */
@media (min-width: 768px) {
  #s20r6ol950f52bb3rwul .text_box {
    top: 38% !important;
  }
  /* 宝石アイコン #f_up:
     - kurukuru アニメーションは初期 translateY(40px)/opacity:0 で停止位置がズレるので無効化
     - 既定では top:235px / left:calc(50% - 460px) / z-index:-3 で背景に潜って不可視
     - 「Concept」(背景画像の筆記体)と「毛穴と、向き合う。」見出しの縦の間に
       配置するため、位置と前面化を上書き */
  #s20r6ol950f52bb3rwul #f_up,
  #s20r6ol950f52bb3rwul .f_up {
    opacity: 1 !important;
    animation: none !important;
    top: 19% !important;
    left: 27% !important;
    transform: translateX(-50%) !important;
    z-index: 3 !important;
  }
}

/* ============================================================
   Voice ページのイラスト帯 (contents_img.png) と
   「最新のお客様レビュー!」見出し / 旧ブログエリアを非表示
   ============================================================ */
#kyr2ppqz5ipf8sqtj62h,
#rpzpqcn97buxwxn4pe93,
#a7nc3ei5kojcq6hmzqqo {
  display: none !important;
}


/* ============================================================
   PC 中ページのスクロール時白空白を解消
   ─ 元 CSS は .easys_content_inner を initial opacity:0 + top:30px で隠し、
     スクロール時に .moved2 クラス付与で 1.3s フェードイン。
     しかし閾値(viewport中央到達)が厳しく、要素が画面内に入っても暫く
     透明のまま残り、視覚的な白空白として現れる。常に表示状態に。
   ============================================================ */
.easys_content_inner {
  top: 0 !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ============================================================================
   ▼▼▼ グローバルナビ CSS テキスト化 (BLOCK: NAV-TEXT) ▼▼▼
   ----------------------------------------------------------------------------
   目的: 画像スプライト topnavi.png のナビを Jost フォントの実テキストに置換。
   挙動(元画像と同一を再現):
     - 通常 = 英字(HOME/CONCEPT/MENU/ACCESS/RESERVE)濃いグレー #1d2326
     - hover = 和文(ホーム/コンセプト/メニュー/アクセス/ご予約・お問い合わせ)
              緑グレー #799a82。RESERVE の和文は「ご予約 / お問い合わせ」の2行。
     - 項目間に区切り線「|」
   ロールバック: この「BLOCK: NAV-TEXT」コメント間を丸ごと削除すれば
                元の画像ナビ(files_pc.css の topnavi.png)に完全復帰。
   ※ PC のみ。HTML 無改変。日本語リンク文字は隠し擬似要素で英/和を出し分け。
   ============================================================================ */
@media (min-width: 768px) {
  /* a をフレックス中央寄せ化(和文2行の縦中央対応)、画像背景と text-indent を解除 */
  div#access .menu-item a {
    background-image: none !important;
    text-indent: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 20px !important;
    height: 70px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;            /* 元の日本語 HTML テキストを潰す */
  }
  /* 擬似要素テキスト共通スタイル(英/和とも) */
  div#access .menu-item a::before {
    font-family: "Jost", "Century Gothic", "Helvetica Neue",
                 "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    letter-spacing: 0.18em !important;
    line-height: 1.3 !important;
    color: #1d2326 !important;
    text-align: center !important;
    white-space: nowrap !important;
    transition: color 0.3s ease !important;
  }
  /* 通常: 英字 */
  div#access .gnavi11 a::before { content: "HOME"; }
  div#access .gnavi12 a::before { content: "CONCEPT"; }
  div#access .gnavi13 a::before { content: "MENU"; }
  div#access .gnavi14 a::before { content: "ACCESS"; }
  div#access .gnavi15 a::before { content: "RESERVE"; }

  /* hover: 和文(緑グレー) */
  div#access .menu-item a:hover::before { color: #799a82 !important; }
  div#access .gnavi11 a:hover::before { content: "ホーム"; letter-spacing: 0.12em !important; }
  div#access .gnavi12 a:hover::before { content: "コンセプト"; letter-spacing: 0.12em !important; }
  div#access .gnavi13 a:hover::before { content: "メニュー"; letter-spacing: 0.12em !important; }
  div#access .gnavi14 a:hover::before { content: "アクセス"; letter-spacing: 0.12em !important; }
  div#access .gnavi15 a:hover::before {
    content: "ご予約\Aお問い合わせ";   /* 2行表示 */
    white-space: pre-line !important;
    letter-spacing: 0.08em !important;
    line-height: 1.35 !important;
  }

  /* 区切り線「|」: 2項目め以降の左に薄いグレーの縦線 */
  div#access #menu-gnavi .menu-item + .menu-item {
    position: relative !important;
  }
  div#access #menu-gnavi .menu-item + .menu-item::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 1px !important;
    height: 16px !important;
    background: #c4c4c4 !important;
  }
}
/* ▲▲▲ グローバルナビ CSS テキスト化 (BLOCK: NAV-TEXT) ▲▲▲ */