/* 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) !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=20260601) !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「毛穴と、向き合う」見出しと本文の間のスペース調整
   ============================================================ */
@media (min-width: 768px) {
  #s20r6ol950f52bb3rwul .text_box {
    top: 38% !important;
  }
  /* 宝石アイコン #f_up の kurukuru アニメーションは初期 translateY(40px)・
     opacity:0 から始まるため、.moved クラスが付くまでズレた位置で停止して見える。
     アニメーションを無効化して常に最終位置で表示。 */
  #s20r6ol950f52bb3rwul #f_up,
  #s20r6ol950f52bb3rwul .f_up {
    opacity: 1 !important;
    animation: none !important;
    transform: none !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;
}


/* ============================================================
   ご予約・お問い合わせ ピンクセクション
   ─ files_pc.css は height: 1550px 固定 + bg no-repeat center top
     のため、bg画像(1424×1104)が中央上部にネイティブ表示され、
     wrapper の左右に大きな白空白ができる。
   ─ aspect-ratio + background-size: 100% 100% で全幅にスケーリング。
   ============================================================ */
@media (min-width: 768px) {
  #zi2831npdegkmmn61nh6 {
    height: auto !important;
    aspect-ratio: 1424 / 1104 !important;
    background-size: 100% 100% !important;
    background-position: center top !important;
  }
  /* テキストボックスの位置を比例化（元: 590px / 1550px = 約38%） */
  #zi2831npdegkmmn61nh6 .text_box {
    top: 38% !important;
  }
}