/*
Theme Name: Cocoon Child Tsuki
Theme URI: https://ohtori-tsuki.jp/
Template: cocoon-master
Author: 鴻都希
Description: Cocoon子テーマ。鴻都希の部屋（ohtori-tsuki.jp）のデザインをCocoonに適用します。
Version: 1.26.0
Text Domain: cocoon-child-tsuki
*/

/* フォント構成
 * 英字ラベル: Cormorant Garamond
 * 和文見出し: Zen Old Mincho（活版風のオールド明朝）
 * キャッチコピー・決め台詞: Shippori Antique B1（アンティーク調ゴシック）
 * 和文本文: Zen Kaku Gothic New
 */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Zen+Old+Mincho:wght@400;500;600;700&family=Shippori+Antique+B1&family=Zen+Kaku+Gothic+New:wght@400;500&display=swap');

/* ==============================
   Cocoonヘッダーをオレンジのナビに
   ============================== */

#header-container {
  /* 紫地×金文字のヘッダー */
  background: #2e1a30;
  position: sticky;
  top: 0;
  z-index: 9999;
}

#header-container .header {
  padding: 0;
  min-height: 0;
}

#header-in {
  padding: 10px 20px;
  max-width: 900px;
}

/* サイト名ロゴ */
#header-in .site-name,
#header-in .site-name-text-link,
#header-in .site-name-text {
  font-family: 'Cormorant Garamond', serif;
  color: #ecc85a;
  font-weight: bold;
  font-size: 1.3rem;
  text-align: left;
  padding: 0;
  margin: 0;
}

/* ロゴ表記を「鴻都希の占い」に（サイト名自体は変えずに見た目だけ置換）
 * 誰のサイトか一目で分かる＋名前検索されやすくするため（Tsuki表記から変更） */
#header-in .site-name-text {
  font-size: 0;
  line-height: 1.2;
}
#header-in .site-name-text::after {
  content: "鴻都希の占い";
  font-family: 'Zen Old Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  /* 金属的な金のグラデーション文字 */
  background: linear-gradient(180deg, #f6df96 0%, #e8c25c 45%, #c89a3a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* メニュー項目は内容幅で横一列に */
#navi .navi-in > ul li {
  width: auto;
  flex: none;
}

.tagline {
  display: none;
}

/* グローバルナビ（紫地に金文字） */
#navi {
  background: #2e1a30;
}

#navi .navi-in > ul {
  height: auto;
  justify-content: flex-end;
  max-width: 900px;
  margin: 0 auto;
}

#navi .navi-in > ul li {
  height: auto;
  line-height: 1.6;
}

#navi .navi-in a {
  color: #d9cfe4;
  font-size: 1rem;
  font-weight: 400;
  padding: 6px 12px;
  height: auto;
  line-height: 1.6;
  transition: background 0.3s, color 0.3s;
}

#navi .navi-in a:hover {
  background: rgba(224, 187, 82, 0.14);
  color: #ecc85a;
  border-radius: 0;
}

#navi .navi-in > ul .sub-menu {
  background: #5c1b4e;
}

/* PCナビ: メディア実績だけ枠で強調（PC閲覧者はメディア関係者が多いため） */
#navi .navi-in a[href*="/media"] {
  color: #ecc85a;
  border: 1px solid rgba(224, 187, 82, 0.5);
  margin-left: 10px;
}
#navi .navi-in a[href*="/media"]:hover {
  background: rgba(224, 187, 82, 0.16);
}

/* モバイルヘッダー（紫地に金） */
.mobile-header-menu-buttons {
  background-color: #2e1a30;
}
.mobile-header-menu-buttons .menu-button-in {
  color: #ecc85a;
}
.mobile-menu-buttons .menu-drawer a {
  color: #ecc85a;
}

/* ==============================
   背景動画・オーバーレイ（元サイト）
   ============================== */

body {
  font-family: 'Zen Kaku Gothic New', 'Segoe UI', Tahoma, sans-serif;
  background-color: #f5f7fa;
}

#bg-video {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: -1;
  object-fit: cover;
  filter: brightness(0.5) saturate(0.75);
}

/* 写真背景の上に重ねるとき：雲動画を「漂う煙」として薄く合成 */
#bg-video.bg-video-smoke {
  opacity: 0.42;
  mix-blend-mode: screen;
  filter: brightness(0.85) saturate(0.25);
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(16, 8, 14, 0.62);
  z-index: 0;
  pointer-events: none;
}

.overlay_yorokobi2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(175, 169, 112, 0.4);
  z-index: 0;
  pointer-events: none;
}

/* 動画の上にコンテンツを表示 */
#container {
  position: relative;
  z-index: 1;
  background: transparent;
}

/* 背景写真・動画の上で文字を読みやすく
 * 2層の影＝輪郭をくっきりさせる近い影＋背景から浮かせる柔らかい影 */
body.tsuki-page .tsuki-container,
.home-hero,
.home-statement {
  text-shadow: 0 1px 2px rgba(8, 3, 10, 0.85), 0 2px 12px rgba(8, 3, 10, 0.6);
}

/* スマホは画面が小さく背景の柄が文字に重なりやすいので、暗幕を少し濃く */
@media screen and (max-width: 834px) {
  .overlay {
    background: rgba(16, 8, 14, 0.7);
  }
}

/* 白背景の部品・ボタン・フォームには影は不要なので解除
 * キャッチコピーはグラデーション文字（透明文字）のため影が透けて汚れる → 専用のdrop-shadowに任せる */
.form-card,
.calendar,
.alert,
.time-item,
.btn,
.home-hero-copy,
.tsuki-container input,
.tsuki-container textarea,
.tsuki-container select,
.tsuki-container button {
  text-shadow: none;
}

/* ==============================
   専用ページ（tsuki-page）のレイアウト
   Cocoonのサイドバー/白背景を外して1カラムに
   ============================== */

body.tsuki-page #content,
body.tsuki-page #content-in,
body.tsuki-page .main {
  background: transparent;
  border: none;
  box-shadow: none;
}

body.tsuki-page .main {
  width: 100%;
  padding: 0;
  margin: 0;
}

body.tsuki-page .sidebar,
body.tsuki-page .breadcrumbs,
body.tsuki-page .article-header,
body.tsuki-page .article-footer,
body.tsuki-page .pr-label--small,
body.tsuki-page .footer {
  display: none !important;
}

/* 通常の記事・一覧は白カードで読みやすく（動画の上に半透明） */
body:not(.tsuki-page) .main {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 12px;
}
body:not(.tsuki-page) .sidebar {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 12px;
}
body:not(.tsuki-page) #content-in {
  background: transparent;
}

/* ==============================
   元サイトの共通パーツ（tk_styles.css 移植）
   ※中央コンテンツは .tsuki-container
   ============================== */

.tsuki-container {
  max-width: 900px;
  margin: 40px auto 0 auto;
  position: relative;
  z-index: 1;
  padding: 20px;
}

.tsuki-container h1 {
  text-align: center;
  font-family: 'Zen Old Mincho', 'Shippori Mincho', serif;
  font-weight: 500;
  /* スマホ約1.7rem〜PC2rem（画面幅に応じてなめらかに拡大） */
  font-size: clamp(1.6rem, 3vw + 1rem, 2rem);
  letter-spacing: 0.14em;
  margin-bottom: 28px;
  color: #e8e2da;
}

.tsuki-container h3 {
  margin-top: 10px;
  color: #bfbfff;
}

.note1 {
  font-family: 'Zen Old Mincho', 'Shippori Mincho', serif;
  font-size: clamp(1.06rem, 1vw + 0.75rem, 1.14rem);
  color: #e6ca74;
  letter-spacing: 0.05em;
  line-height: 1.9;
}

.note {
  color: #dcd5ca;
  font-size: 1.02rem;
  line-height: 2.05;
  letter-spacing: 0.02em;
}

.sns-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0;
}

.sns-links img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.2s;
}

.sns-links img:hover {
  transform: scale(1.1);
}

/* アラート */
.alert {
  padding: 12px;
  border-radius: 4px;
  margin-bottom: 20px;
}

/* Cocoon本体が .alert に付けるビックリマークアイコンが文字に重なるため、専用ページでは無効化 */
body.tsuki-page .alert::before {
  display: none !important;
}
.alert-error {
  background: #fdecea;
  color: #b71c1c;
}
.alert-success {
  background: #e8f5e9;
  color: #2e7d32;
}

/* フォームカード */
.form-card {
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  margin-top: 20px;
}
.form-card section {
  margin-bottom: 24px;
}

/* カレンダー */
.calendar {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  table-layout: fixed;
}
.calendar th,
.calendar td {
  width: 14.285%;
  height: 50px;
  text-align: center;
  border: 1px solid #e0e0e0;
  vertical-align: middle;
  font-size: 0.95rem;
}
.calendar th {
  background: #f2f2f2;
  font-weight: bold;
  color: #555;
}
.calendar td.available {
  background-color: #fdfdb6;
  cursor: pointer;
  transition: background 0.2s;
}
.calendar td.available:hover {
  background-color: #ffdc4e;
}
.calendar td.unavailable {
  background-color: #f0f0f0;
  color: #c0c0c0;
}
/* 空き枠が無い日のステータス表示（満枠 / 休 / 要問合せ）
 * 満枠=ローズ、休=グレー、要問合せ=金。バッジは日付の下に中央配置。 */
.calendar td.cal-full {
  background-color: #f6ecec;
  color: #b98a92;
}
.calendar td.cal-holiday {
  background-color: #ececef;
  color: #9a97a2;
}
.calendar td.cal-inquiry {
  background-color: #f4eeda;
  color: #a58a54;
}
.calendar .full-tag {
  /* 店舗・個人鑑定タグと同じく、日付の下に中央配置 */
  display: block;
  width: fit-content;
  margin: 3px auto 0;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: #fff;
  background: #b26b78;
  white-space: nowrap;
}
.calendar td.cal-holiday .full-tag { background: #8f8a9e; }
.calendar td.cal-inquiry .full-tag { background: #b58f3f; }

/* 満枠・休・要問合せの日をクリックした時の案内（白いフォームカード内に表示） */
.tsuki-day-notice {
  background: #faf6ef;
  border: 1px solid #e5d9c3;
  border-radius: 8px;
  padding: 18px 16px;
  margin-bottom: 20px;
  text-align: center;
}
.tsuki-day-notice p {
  margin: 0 0 14px;
  color: #5b5348;
  font-size: 0.95rem;
  line-height: 1.9;
}
.tsuki-day-notice .tsuki-day-notice-cta { margin: 0; }
.tsuki-day-notice .btn { display: inline-block; padding: 12px 28px; }

@media (max-width: 600px) {
  .calendar .full-tag { font-size: 9px; padding: 1px 5px; }
}
/* 満枠・要問合せでも相談歓迎の案内（冒頭の注意書き内の1行） */
.tsuki-full-note a { color: #e6ca74; text-decoration: underline; }

/* 時間リスト */
.time-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.time-item {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  transition: border-color 0.2s;
}
.time-item:hover:not(.disabled) {
  border-color: #3498db;
}
.time-item.disabled {
  background-color: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}
.time-item input {
  margin-right: 8px;
  accent-color: #3498db;
}

/* ユーザー情報フォーム */
.userinfo label {
  display: block;
  margin-bottom: 12px;
}
.userinfo input,
.userinfo textarea,
.userinfo select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: 4px;
  font-size: 1rem;
  background: #fff;
  transition: border-color 0.2s;
}
.userinfo input:focus,
.userinfo textarea:focus {
  border-color: #3498db;
  outline: none;
}

.btn-submit {
  display: block;
  width: 100%;
  padding: 14px;
  background: #003333;
  color: #fff;
  font-size: 1.1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s, transform 0.25s ease;
  margin-top: 10px;
}
.btn-submit:hover,
.btn-submit:focus-visible {
  background: #330033;
  transform: scale(1.03);
}

.profile-image {
  max-width: 250px;
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 20px auto;
  display: block;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* 結果表示 */
.result-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  gap: 16px;
  color: #bfbfff;
}

.result {
  font-size: 18px;
  color: #bfbfff;
  margin-top: 20px;
}

.result-box {
  font-size: 18px;
  color: #bfbfff;
  margin-bottom: 20px;
}

.result-box p,
.final-result {
  font-size: 1.4rem;
  margin-top: 20px;
  text-align: center;
  color: #bfbfff;
  line-height: 1.6;
}

.refresh-button {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  color:#C99DA5;
  font-size: 18px;
  border-radius: 50px;
  width: 100px;
  height: 100px;
  font-weight: bold;
  transition: 0.3s;
  box-shadow: 0px 2px 4px 0px rgba(119, 88, 88, 0.5);
  background-color: #6B3A65;
  background-image: linear-gradient(180deg, #3a656d, #3a656d);
  margin: auto;
}

.refresh-button:hover {
  transform: translateY(2px);
  box-shadow: 0 0 #B3737F
}

/* カーソルの星エフェクト（sparkle）は廃止 */

/* レスポンシブ */
@media (max-width: 600px) {
  .profile-image { max-width: 80%; }
  .time-item { flex: 1 1 100%; }
  .calendar th,
  .calendar td {
    height: 40px;
    font-size: 0.85rem;
  }
  .form-card { padding: 16px; }
}

/* チェックボックス/ラジオのリセット */
.userinfo input[type="checkbox"],
.userinfo input[type="radio"] {
  width: auto !important;
  display: inline-block !important;
  margin: 0 6px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  vertical-align: middle;
  accent-color: #3498db;
}

.userinfo label.chk-inline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: auto !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
}

.kanteisho-disabled {
  opacity: .55;
  color: #7a7a7a;
  cursor: not-allowed;
}
.kanteisho-disabled input { pointer-events: none; }
.note-inline { font-size: 12px; color: #7a7a7a; margin-left: .5rem; }

/* カレンダーの店舗タグ */
.calendar td { vertical-align: top; padding: 4px 2px; }

.calendar .tag-wrap {
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  pointer-events: none;
}

.calendar .shop-tag {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background: #f39c12;
  color: #fff;
  border-radius: 9999px;
  padding: 2px 6px 3px;
  line-height: 1.15;
  max-width: calc(100% - 2px);
  box-shadow: 0 1px 1px rgba(0,0,0,.06);
  pointer-events: none;
}

.calendar .shop-tag .shop-name {
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}


.calendar .shop-tag .shop-time {
  font-size: 11px;
  opacity: .95;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

@media (max-width: 600px) {
  .calendar th,
  .calendar td { padding: 3px 1px; }
  .calendar .tag-wrap { margin-top: 2px; gap: 2px; }
  .calendar .shop-tag { padding: 2px 5px; line-height: 1.1; }
  .calendar .shop-tag .shop-name { font-size: 10.5px; }
  .calendar .shop-tag .shop-time { font-size: 9.5px; }
}

@media (max-width: 360px) {
  .calendar .shop-tag { padding: 1px 4px; }
  .calendar .shop-tag .shop-name { font-size: 10px; }
  .calendar .shop-tag .shop-time { font-size: 9px; }
}

.calendar td.shop-day { background: rgba(255,165,0,.15); border-color: rgba(255,165,0,.35); }
.form-card.shop-disabled { opacity:.55; pointer-events:none; }
.time-item.shop { background: rgba(255,165,0,.10); border: 1px dashed rgba(255,165,0,.5); }
.time-item .shop-name { display:block; font-weight:600; }
.time-item .shop-url  { display:block; }
.time-item .shop-time { display:block; }

/* モーダル */
.modal-backdrop {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1000;
}
.modal {
  display:none; position:fixed; inset:0; z-index:1001; pointer-events:none;
  align-items:center; justify-content:center;
}
.modal.show, .modal-backdrop.show { display:flex; }
.modal .modal-panel {
  pointer-events:auto; width:min(680px, 92vw); max-height:80vh; overflow:auto;
  background:#fff; border-radius:16px; padding:20px 18px; box-shadow:0 10px 40px rgba(0,0,0,.25);
}
.modal .modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.modal .modal-title { font-size:18px; font-weight:700; }
.modal .modal-body  { display:grid; gap:12px; }
.shop-card {
  border:1px solid rgba(255,165,0,.5); border-radius:12px; padding:12px;
  background:rgba(255,165,0,.06);
}
.shop-card h4 { margin:0 0 6px; font-size:16px; }
.shop-card .shop-time { font-size:14px; }
.shop-card .shop-actions { margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; }
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 42px; border-radius:0; cursor:pointer;
  position:relative; overflow:hidden;
  /* 茶色系のベタ塗りをやめ、深い紫×金縁。上を光が流れるエフェクト付き */
  background:linear-gradient(135deg, #3b1f42 0%, #241026 100%);
  color:#efe7da; font-weight:500; text-decoration:none;
  font-family:'Shippori Antique B1', 'Hiragino Kaku Gothic ProN', sans-serif;
  border:none; letter-spacing:0.18em;
  transition: background .35s ease, color .35s ease, transform .3s cubic-bezier(.2,.8,.3,1.2), letter-spacing .3s ease;
}
/* 選んだとき（ホバー/フォーカス）に文字がひと回り育つ */
.btn:hover,
.btn:focus-visible {
  background:linear-gradient(135deg, #4a2a52 0%, #2e1631 100%);
  color:#ffffff;
  letter-spacing:0.22em;
  transform:scale(1.06);
}
.btn-secondary { background:#4b5563; }
.btn[disabled] { opacity:.55; cursor:not-allowed; }

/* ==============================
   おみくじページ
   ============================== */

body.yorokobi {
  background-image: url("img/image_yorokobi.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

body.yorokobi2 {
  background-image: url("img/image_yorokobi2.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* おみくじページはCocoonの背景を透過 */
body.yorokobi #container,
body.yorokobi2 #container {
  background: transparent;
}

.yorokobi-title {
  margin-bottom: 20px;
}

.button-wrapper {
  margin-top: 0;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}

.heart {
  width: 100px;
  height: 100px;
  position: relative;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: grid;
  place-items: center;
}

.heart::before,
.heart::after {
  content: "";
  width: 50%;
  height: 80%;
  background: #E0548E;
  border-radius: 25px 25px 0 0;
  position: absolute;
}

.heart::before {
  transform: rotate(-45deg);
  left: 14%;
  top: 0;
}

.heart::after {
  transform: rotate(45deg);
  right: 14%;
  top: 0;
}

.heart > span {
  position: relative;
  top: -6px;
  z-index: 1;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  pointer-events: none;
}

.heart:hover {
  filter: brightness(1.1);
  transform: scale(1.05);
  transition: transform .2s ease, filter .2s ease;
}

.yorokobi-result-box {
  margin-top:10px;
  padding:15px;
  background:#8b00a7;
  border-radius:10px;
}

.btn-yorokobi {
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:10px; border:none; cursor:pointer;
  background:#ac00a4; color:#ff97f6; font-weight:600; text-decoration:none;
}

/* 無料占い一覧 */
.tool-list { display:flex; flex-direction:column; gap:20px; max-width:520px; margin:0 auto; }
.tool-item {
  background: rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  backdrop-filter: blur(4px);
}
.tool-item h3 { margin-bottom: 12px; }
.tool-item .btn-submit {
  display:inline-block; width:auto; padding:12px 40px; text-decoration:none;
}

/* ---------- TOP: 鑑定メニュー＋FAQセクション（front-faq.php用） ---------- */
.menu-section {
  max-width: 760px;
  margin: 3rem auto;
  padding: 0 1rem;
  text-align: left;
  color: #f0f0f0;
}
.menu-section h2 {
  text-align: center;
  font-size: 1.4rem;
  margin-bottom: 1.5rem;
  color: #fff;
}
.menu-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.menu-table th {
  text-align: left;
  padding: 0.9rem 0.5rem 0.4rem;
  border-bottom: 1px solid rgba(255,255,255,0.5);
  color: #fff;
  font-size: 1rem;
}
.menu-table td {
  padding: 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  vertical-align: top;
}
.menu-table td:last-child { text-align: right; white-space: normal; }
.menu-note {
  display: block;
  font-size: 0.8rem;
  opacity: 0.8;
}
.menu-hours {
  font-size: 0.85rem;
  opacity: 0.85;
  margin-top: 1rem;
  line-height: 1.7;
}
/* よくある質問（/faq/）
   ※ クラス名に .faq-item を使うとCocoon本体のFAQブロック用CSSに当たって
      質問側が細い列に潰れるため、tsuki- を付けた専用クラスにしている */
.tsuki-faq {
  max-width: 760px;
  margin: 2.4rem auto 0;
  padding: 0 1rem;
  text-align: left;
}

.tsuki-faq-item {
  padding: 1.4rem 0;
  border-bottom: 1px solid rgba(236, 200, 90, 0.18);
}

.tsuki-faq-item h3 {
  font-family: 'Zen Old Mincho', 'Shippori Mincho', serif;
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: #f2ead8;
  margin: 0 0 0.7rem;
  padding-left: 1.8rem;
  text-indent: -1.8rem;
}

.tsuki-faq-item h3::before {
  content: "Q.";
  color: #ecc85a;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  margin-right: 0.6rem;
}

.tsuki-faq-item p {
  font-size: 0.96rem;
  line-height: 1.95;
  color: #dcd5ca;
  margin: 0;
  padding-left: 1.8rem;
  text-indent: -1.8rem;
}

.tsuki-faq-item p::before {
  content: "A.";
  color: rgba(236, 200, 90, 0.7);
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  margin-right: 0.6rem;
}

.menu-section a,
.tsuki-faq-item a {
  color: #e6ca74;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(224, 187, 82, 0.5);
}

/* Cocoon本体のFAQブロック用CSSが当たらないよう、こちらの指定を確実に効かせる */
.tsuki-faq-item {
  display: block !important;
}

/* ==============================
   TOPページ ハブセクション
   （英字ラベル×明朝×細罫線の統一言語）
   ============================== */

.tsuki-home-cta {
  text-align: center;
  margin: 32px 0 8px;
}

.home-section {
  /* セクション間は大きく空けてメリハリを出す（余白のジャンプ率） */
  margin-top: clamp(72px, 10vw, 110px);
  padding-top: clamp(40px, 6vw, 56px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  text-align: center;
}

.home-section-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #eccb6f;
  margin-bottom: 12px;
  text-shadow: 0 1px 3px rgba(8, 3, 10, 0.9), 0 2px 10px rgba(8, 3, 10, 0.7);
}

.home-section-title {
  font-family: 'Zen Old Mincho', 'Shippori Mincho', serif;
  font-weight: 500;
  /* スマホ約1.4rem〜PC1.85rem（本文0.95remに対して約2倍のジャンプ率） */
  font-size: clamp(1.4rem, 2.6vw + 0.55rem, 1.85rem);
  letter-spacing: 0.14em;
  color: #e8e2da;
  margin: 0 0 18px;
}

.home-section-lead {
  color: #cdcade;
  font-size: 0.99rem;
  margin-bottom: 22px;
}

/* 実績 */
.home-works {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  color: #e2dcd4;
  font-size: 1.02rem;
  line-height: 2.1;
  letter-spacing: 0.04em;
}

/* リンクリスト（無料占い・コンテンツ共通） */
.home-links {
  max-width: 640px;
  margin: 20px auto 0;
  text-align: left;
  /* 背景写真の上でも読めるよう、薄い黒のパネルを敷く */
  background: rgba(16, 8, 14, 0.46);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6px 24px;
}

.home-link {
  display: block;
  padding: 16px 8px 16px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  text-decoration: none;
  position: relative;
  transition: padding-left 0.25s ease, border-color 0.25s ease;
}
.home-link:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.13);
}
.home-link::after {
  content: "→";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(224, 187, 82, 0.65);
  font-size: 0.9rem;
  transition: right 0.25s ease, color 0.25s ease;
}
.home-link:hover {
  padding-left: 12px;
  border-bottom-color: rgba(224, 187, 82, 0.6);
}
.home-link:hover::after {
  right: 0;
  color: #ecd07f;
}

.home-link-title {
  display: block;
  color: #f0eae2;
  font-family: 'Zen Old Mincho', 'Shippori Mincho', serif;
  font-size: 1.08rem;
  letter-spacing: 0.06em;
}

.home-link-tag {
  display: inline-block;
  white-space: nowrap;
  font-family: 'Zen Kaku Gothic New', 'Segoe UI', Tahoma, sans-serif;
  font-size: 0.72rem;
  color: rgba(224, 187, 82, 0.9);
  border: 1px solid rgba(224, 187, 82, 0.4);
  border-radius: 2px;
  padding: 1px 7px;
  margin-left: 10px;
  vertical-align: 2px;
  letter-spacing: 0.08em;
}

.home-link-desc {
  display: block;
  color: #d9d3c7;
  font-size: 0.9rem;
  margin-top: 4px;
  padding-right: 24px;
  line-height: 1.7;
}

/* お客様の声 */
.home-voices {
  max-width: 620px;
  margin: 26px auto 0;
  text-align: left;
}

.home-voice {
  margin: 0 0 30px;
  padding-left: 18px;
  border-left: 1px solid rgba(224, 187, 82, 0.5);
}
.home-voice:last-child { margin-bottom: 0; }

.home-voice-stars {
  color: #ecc85a;
  font-size: 0.8rem;
  letter-spacing: 0.28em;
  margin-bottom: 8px;
}

.home-voice blockquote {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: #ece6de;
  font-size: 1rem;
  line-height: 1.95;
}

.home-voice figcaption {
  margin-top: 8px;
  color: #aba8c0;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
}

.home-voice figcaption::after {
  content: "　Googleの口コミより";
  color: #706d87;
}

/* NEWS */
.home-news {
  list-style: none;
  max-width: 620px;
  margin: 20px auto 0;
  padding: 0;
  text-align: left;
}

.home-news li {
  display: flex;
  gap: 18px;
  align-items: baseline;
  padding: 12px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  color: #e2dcd4;
  font-size: 0.92rem;
  line-height: 1.7;
}
.home-news li:first-child { border-top: 1px solid rgba(255, 255, 255, 0.13); }

.home-news time {
  flex: none;
  font-family: 'Cormorant Garamond', serif;
  color: rgba(224, 187, 82, 0.9);
  letter-spacing: 0.08em;
}

/* もっと見るリンク */
.home-more {
  margin-top: 24px;
  font-size: 1rem;
}
.home-more a {
  color: #e6ca74;
  text-decoration: none;
  border-bottom: 1px solid rgba(224, 187, 82, 0.55);
  padding-bottom: 3px;
  letter-spacing: 0.08em;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.home-more a:hover {
  color: #f6df96;
  border-bottom-color: rgba(224, 187, 82, 0.95);
}

/* 「エロ霊視を予約する」はセクションのCTAなので、はっきりしたボタン風に */
.home-section-ero .home-more {
  margin-top: 28px;
}
.home-section-ero .home-more a {
  display: inline-block;
  border: 1px solid rgba(224, 187, 82, 0.7);
  border-radius: 999px;
  padding: 12px 30px;
  font-size: 1.04rem;
  background: rgba(224, 187, 82, 0.08);
}
.home-section-ero .home-more a:hover {
  background: rgba(224, 187, 82, 0.18);
  border-color: rgba(224, 187, 82, 0.95);
}

.home-section-last {
  margin-bottom: 30px;
}

@media (max-width: 600px) {
  .home-section { margin-top: 56px; padding-top: 32px; }
  .home-news li { flex-direction: column; gap: 2px; }
}

/* ==============================
   TOP ヒーロー（動画の上の大型コピー）
   ============================== */

.home-hero {
  position: relative;
  z-index: 1;
  min-height: 68vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 96px 24px 48px;
}

.home-hero-en {
  font-family: 'Cormorant Garamond', serif;
  /* スマホでも収まる範囲でひと回り大きく */
  font-size: clamp(0.98rem, 2vw + 0.5rem, 1.2rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(236, 200, 90, 0.95);
  margin-bottom: 22px;
}

.home-hero-copy {
  font-family: 'Shippori Antique B1', 'Zen Old Mincho', sans-serif;
  font-weight: 400;
  /* 3行構成前提。620pxのテキスト列に「置いて帰ってください。」が収まる上限 */
  font-size: clamp(1.9rem, 2.2vw + 0.9rem, 3rem);
  line-height: 1.6;
  letter-spacing: 0.1em;
  background: linear-gradient(135deg, #f5efe6 45%, #ecc85a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 14px rgba(8, 3, 10, 0.6));
  margin: 0 0 26px;
}

.home-hero-sub {
  /* 占術リストの行。暗くならないよう、金みのある明るい白に */
  color: #ddd1bb;
  font-size: 0.98rem;
  line-height: 2;
  letter-spacing: 0.1em;
  margin-bottom: 22px;
}

/* 名前の行はひと回り大きく・明るく（英字ラベル→コピー→名前→占術のジャンプ率をつける） */
.home-hero-sub strong {
  display: inline-block;
  font-family: 'Zen Old Mincho', 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 1.12rem;
  color: #e8e2da;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

/* Aboutセクション（最初のセクションは罫線なしで静かに始める） */
.home-section-first {
  border-top: none;
  margin-top: 8px;
  padding-top: 0;
}

/* プロフィール本文：読みやすい行長に絞る */
.home-profile {
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}

.home-profile p {
  line-height: 2.1;
  letter-spacing: 0.02em;
  margin-bottom: 1.6em;
  font-size: 1.03rem;
}

/* 本文中の強調：太字は生成り、キーフレーズは金 */
.home-profile strong {
  font-weight: 600;
  color: #f2ead8;
}
.home-profile .em-gold {
  font-weight: 600;
  color: #ecd07f;
  letter-spacing: 0.04em;
}

/* 引用風の一行（本文のリズムを作る） */
.home-profile-pull {
  font-family: 'Zen Old Mincho', 'Shippori Mincho', serif;
  font-size: 1.18rem !important;
  color: #ecd07f;
  text-align: center;
  letter-spacing: 0.08em;
  padding: 10px 0;
}

/* 鑑定風景ギャラリー */
.home-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 720px;
  margin: 34px auto 0;
}

.home-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

@media (max-width: 600px) {
  .home-hero { min-height: 58vh; padding-top: 72px; }
  .home-hero-copy { font-size: 1.55rem; letter-spacing: 0.07em; line-height: 1.8; }
  .home-hero-sub { font-size: 0.85rem; }
  .home-gallery { grid-template-columns: repeat(3, 1fr); gap: 6px; }
}


/* Aboutのポートレートは円形に（品よく） */
.home-section-first .profile-image {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}


/* ==============================
   スマホ表示の調整
   ============================== */

/* Cocoonのblockquote飾り引用符を無効化（お客様の声と二重になるため） */
.home-voice blockquote::before,
.home-voice blockquote::after {
  content: none !important;
  display: none !important;
}

/* スマホ：ヘッダーはロゴだけの細いバーに（メニューは画面下の「メニュー」から） */
@media screen and (max-width: 834px) {
  #navi {
    display: none;
  }
  #header-in {
    padding: 12px 16px;
  }
  #header-in .site-name-text::after {
    font-size: 1.15rem;
  }
}

/* スマホ：鑑定メニュー・無料占いリストを読みやすく */
@media screen and (max-width: 600px) {
  .home-link {
    padding: 18px 30px 18px 0;
  }
  .home-link::after {
    top: 24px;
    transform: none;
  }
  .home-link-title {
    font-size: 1.05rem;
    line-height: 1.7;
  }
  .home-link-tag {
    font-size: 0.68rem;
    padding: 1px 6px;
    margin-left: 8px;
  }
  .home-link-desc {
    font-size: 0.87rem;
    color: #d9d3c7;
    margin-top: 6px;
    padding-right: 8px;
    line-height: 1.75;
  }
  .home-voice blockquote {
    font-size: 0.96rem;
    line-height: 1.9;
  }
  /* 長い見出しが窮屈にならないよう、スマホは字間だけ少し詰める */
  .home-section-title,
  .tsuki-container h1 {
    letter-spacing: 0.1em;
  }
}


/* ==============================
   ヒーローのクイックリンク＆下部バーの予約ボタン
   ============================== */

html { scroll-behavior: smooth; }

.home-hero-quick {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 26px;
}

.home-hero-quick a {
  display: inline-block;
  padding: 8px 20px;
  border: 1px solid rgba(224, 187, 82, 0.45);
  border-radius: 0;
  color: #e8e6f0;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.home-hero-quick a:hover {
  border-color: rgba(224, 187, 82, 0.9);
  color: #ecd07f;
  background: rgba(255, 202, 189, 0.06);
}

/* 下部バーの「予約」はオレンジで目立たせる（リンク先URLで指定） */
.mobile-footer-menu-buttons > li > a[href*="/reservation"],
.mobile-footer-menu-buttons > li > a[href*="/reservation"] .menu-caption {
  color: #ecc85a !important;
  font-weight: 600;
}


/* ==============================
   スマホ用ハンバーガー（上部バー右）
   下部バーの「メニュー」と同じドロワーを開く
   ============================== */

.tsuki-hamburger {
  display: none;
  background: none;
  border: none;
  color: #ecc85a;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

@media screen and (max-width: 834px) {
  .tsuki-hamburger {
    display: block;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
  }
}

/* 見出しクラス付きのh1は明朝×白・ページ見出しよりわずかに控えめなサイズ（メディア実績ページ等） */
.tsuki-container h1.home-section-title {
  font-family: 'Zen Old Mincho', 'Shippori Mincho', serif;
  color: #e8e2da;
  letter-spacing: 0.14em;
  font-size: clamp(1.5rem, 2.5vw + 0.7rem, 1.9rem);
}


/* リンクでない実績項目（div.home-link）は矢印・ホバー演出なし */
div.home-link::after { content: none; }
div.home-link:hover { padding-left: 4px; border-bottom-color: rgba(255, 255, 255, 0.13); }


/* ==============================
   スライドメニュー（ドロワー）を世界観に合わせる
   ============================== */

.navi-menu-content {
  background: linear-gradient(165deg, #2e1a30 0%, #17091a 100%) !important;
  box-shadow: 6px 0 30px rgba(0, 0, 0, 0.45);
}

.navi-menu-content .menu-drawer {
  padding: 28px 8px 20px;
}

.navi-menu-content .menu-drawer li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.navi-menu-content .menu-drawer a,
.mobile-menu-buttons .menu-drawer a {
  display: block;
  padding: 14px 18px;
  color: #ece9f4 !important;
  font-family: 'Zen Old Mincho', 'Shippori Mincho', serif;
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-decoration: none;
}

.navi-menu-content .menu-drawer a:hover {
  color: #ecc85a !important;
  background: rgba(255, 255, 255, 0.04);
}

/* 閉じるボタン */
.navi-menu-close-button {
  color: #ecc85a !important;
  opacity: 0.9;
}

/* 背面の暗幕 */
#navi-menu-input:checked ~ .menu-close-overlay,
.menu-close-overlay {
  background: rgba(8, 3, 18, 0.6);
}

/* ==============================
   おみくじページの戻りリンク
   ============================== */

.mikuji-nav {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 40px 0 24px;
}

.mikuji-nav a {
  display: inline-block;
  padding: 9px 20px;
  border-radius: 0;
  background: rgba(16, 8, 14, 0.55);
  border: 1px solid rgba(224, 187, 82, 0.5);
  color: #fff;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.mikuji-nav a:hover {
  border-color: rgba(224, 187, 82, 0.9);
  color: #ecd07f;
}


/* スマホ専用の改行 */
.sp-br { display: none; }
@media screen and (max-width: 600px) {
  .sp-br { display: inline; }
}


/* 旧サイト風の大きなサイト名（h1）
 * 旧サイトの h1 と同じ書体系統: Cormorant Garamond → 和文はヒラギノ明朝等にフォールバック
 * 色はサイトの真鍮金に統一 */
/* ヒーローの丸ポートレート（顔がしっかり分かる主役サイズ。旧104px→210px）
 * 二重の金リングで宣材写真の格に */
.home-hero-portrait {
  width: clamp(240px, 26vw, 330px);
  height: clamp(240px, 26vw, 330px);
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.5);
  margin-bottom: 26px;
}

@media screen and (max-width: 600px) {
  .home-hero-portrait {
    width: 240px;
    height: 240px;
    margin-bottom: 20px;
  }
}

/* ==============================
   メディアページ：コピー用プロフィール・素材
   ============================== */

.press-copybox {
  max-width: 640px;
  margin: 18px auto 0;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  padding: 16px 18px;
  position: relative;
}

.press-copybox h3 {
  font-size: 0.8rem;
  color: rgba(224, 187, 82, 0.9);
  letter-spacing: 0.16em;
  margin: 0 0 10px;
}

.press-copybox p {
  color: #e5dfd8;
  font-size: 0.92rem;
  line-height: 1.9;
  margin: 0;
  padding-right: 70px;
}

.press-copy-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  color: #e5dfd8;
  font-size: 0.78rem;
  padding: 5px 14px;
  cursor: pointer;
  letter-spacing: 0.06em;
}

.press-copy-btn:hover {
  border-color: rgba(224, 187, 82, 0.9);
  color: #ecd07f;
}

/* 素材写真グリッド */
.press-photos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 720px;
  margin: 24px auto 0;
}

.press-photo {
  text-align: center;
}

.press-photo img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.press-photo a {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.78rem;
  color: #d3d0e2;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.press-photo a:hover { color: #ecd07f; }

/* 取材ポリシー */
.press-policy {
  list-style: none;
  max-width: 620px;
  margin: 20px auto 0;
  padding: 0;
  text-align: left;
}

.press-policy li {
  color: #e2dcd4;
  font-size: 0.92rem;
  line-height: 1.8;
  padding: 10px 4px 10px 26px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  position: relative;
}

.press-policy li::before {
  content: "✓";
  position: absolute;
  left: 4px;
  color: #ecc85a;
}

@media screen and (max-width: 600px) {
  .press-photos { grid-template-columns: repeat(2, 1fr); }
  .press-copybox p { padding-right: 0; padding-top: 26px; }
}


/* ==============================
   哲学のひとこと（静かな一行）
   ============================== */

.home-statement {
  margin: 96px auto;
  padding: 0 24px;
  text-align: center;
}

.home-statement p {
  font-family: 'Shippori Antique B1', 'Zen Old Mincho', sans-serif;
  font-size: clamp(1.2rem, 2.6vw, 1.7rem);
  letter-spacing: 0.14em;
  line-height: 2;
  color: #e8e2da;
  margin: 0;
}

@media screen and (max-width: 600px) {
  .home-statement { margin: 64px auto; }
}

/* ==============================
   エロ霊視セクション（唯一性の打ち出し）
   差し色は深いワインレッド。ネオンにせず「地下の赤」で妖艶に
   ============================== */

.home-section-ero {
  border-top-color: rgba(150, 46, 74, 0.55);
}

.home-section-ero .home-section-label {
  color: #ec9db4;
}

.home-section-ero .home-section-lead {
  font-family: 'Zen Old Mincho', 'Shippori Mincho', serif;
  color: #e6ca74;
  font-size: 1.04rem;
  letter-spacing: 0.06em;
}

.home-ero-box {
  max-width: 640px;
  margin: 26px auto 0;
  padding: 30px 28px;
  text-align: left;
  border: 1px solid rgba(150, 46, 74, 0.5);
  background: linear-gradient(160deg, rgba(64, 16, 32, 0.34), rgba(30, 10, 22, 0.42));
  color: #e2dcd4;
  font-size: 1.02rem;
  line-height: 2.05;
  letter-spacing: 0.02em;
}

.home-ero-box p { margin: 0 0 1.5em; }
.home-ero-box p:last-child { margin-bottom: 0; }

.home-ero-note {
  color: #b7b0a5;
  font-size: 0.84rem;
}

@media screen and (max-width: 600px) {
  .home-ero-box { padding: 22px 18px; }
}


/* TOP最下部のサイト情報リンク（メニューに出さない控えめな導線） */
.home-footer-links {
  margin: 80px auto 28px;
  text-align: center;
}
.home-footer-links nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 22px;
}
.home-footer-links nav a {
  color: #8f8a9e;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-bottom: 1px solid rgba(143, 138, 158, 0.35);
  padding-bottom: 1px;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.home-footer-links nav a:hover {
  color: #ecc85a;
  border-color: rgba(224, 187, 82, 0.6);
}
.home-copyright {
  margin-top: 18px;
  color: #6f6a7e;
  font-size: 0.74rem;
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: 0.12em;
}

/* 写真背景（動画の代替・fixed要素方式） */
.bg-photo {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
}


/* 本文中のリンクを落ち着いた金の下線リンクに（旧インライン色を上書き） */
.note a {
  color: #e6ca74 !important;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(224, 187, 82, 0.5);
  transition: color 0.25s ease;
}
.note a:hover {
  color: #e6cf9a !important;
}

/* ==============================
   右端に固定するSNS導線
   SNSがページ最下部にしか無く見つけにくいため、常時見える位置に置く。
   本文に重ならないよう、左右の余白が確保できる幅（1000px以上）でのみ表示する。
   ============================== */

.tsuki-side-sns {
  display: none;
}

@media screen and (min-width: 1000px) {
  .tsuki-side-sns {
    display: block;
    padding: 10px 6px 8px;
    text-align: center;
    /* ヘッダーと同じ紫地に、細い金の縁。背景の動画に溶けないよう少しだけ影を落とす */
    background: rgba(46, 26, 48, 0.92);
    border: 1px solid rgba(236, 200, 90, 0.3);
    border-right: none;
    border-radius: 10px 0 0 10px;
    box-shadow: -2px 0 14px rgba(8, 3, 10, 0.35);
  }

  .tsuki-side-sns-label {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    color: rgba(236, 200, 90, 0.85);
    margin-bottom: 8px;
  }

  .tsuki-side-sns a:not(.tsuki-side-cta) {
    display: block;
    margin: 7px 0;
    line-height: 0;
    opacity: 0.88;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  .tsuki-side-sns a:not(.tsuki-side-cta):hover,
  .tsuki-side-sns a:not(.tsuki-side-cta):focus-visible {
    opacity: 1;
    transform: translateX(-3px) scale(1.08);
  }

  .tsuki-side-sns img {
    display: block;
    width: 34px;
    height: 34px;
    object-fit: cover;
    border-radius: 7px;
  }
}

/* 動きを減らす設定の利用者には拡大アニメーションを出さない */
@media (prefers-reduced-motion: reduce) {
  .tsuki-side-sns a {
    transition: none;
  }
  .tsuki-side-sns a:hover {
    transform: none;
  }
}

/* スマホ：メニュー（ドロワー）の最下部に置くSNSアイコン
   右端の固定SNSはスマホでは本文に重なるため出さない。代わりにここから辿れるようにする。 */
.menu-drawer .tsuki-drawer-sns {
  border-bottom: none !important;
  margin-top: 10px;
  padding: 16px 18px 20px;
  border-top: 1px solid rgba(236, 200, 90, 0.25);
  list-style: none;
}

.tsuki-drawer-sns-label {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: rgba(236, 200, 90, 0.85);
  margin-bottom: 12px;
}

.tsuki-drawer-sns-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ドロワーのリンク（大きな余白付きの行）のスタイルを打ち消してアイコン並びにする */
.menu-drawer .tsuki-drawer-sns-row a {
  display: block;
  padding: 0 !important;
  line-height: 0;
  background: none !important;
}

.menu-drawer .tsuki-drawer-sns-row img {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 8px;
}

/* スマホ：下部バーの上に常時置くSNSボタン（押すと横にアイコンが開く）
   PCは右端の縦バーがあるため、こちらは狭い画面だけに出す。 */
.tsuki-sns-fab {
  display: none;
}

@media screen and (max-width: 999px) {
  .tsuki-sns-fab {
    display: flex;
    align-items: center;
    gap: 8px;
    position: fixed;
    right: 0;
    /* Cocoonのモバイル下部バー（約50px）とホームバーの分だけ上に逃がす */
    bottom: calc(62px + env(safe-area-inset-bottom, 0px));
    z-index: 900;
  }

  .tsuki-sns-fab-items {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    background: rgba(46, 26, 48, 0.94);
    border: 1px solid rgba(236, 200, 90, 0.3);
    border-radius: 999px;
    box-shadow: 0 4px 16px rgba(8, 3, 10, 0.4);
    opacity: 0;
    transform: translateX(12px) scale(0.96);
    transform-origin: right center;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
  }

  .tsuki-sns-fab.is-open .tsuki-sns-fab-items {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .tsuki-sns-fab-items a {
    display: block;
    line-height: 0;
  }

  .tsuki-sns-fab-items img {
    display: block;
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 7px;
  }

  /* 予約タブと同じ形の縦タブ。予約が主役なので、こちらは紫地×金文字で控えめに */
  .tsuki-sns-fab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 74px;
    padding: 0;
    border-radius: 10px 0 0 10px;
    border: 1px solid rgba(236, 200, 90, 0.5);
    border-right: none;
    background: rgba(46, 26, 48, 0.94);
    color: #ecc85a;
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.92rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: -2px 0 16px rgba(8, 3, 10, 0.45);
    transition: background 0.2s ease;
  }

  .tsuki-sns-fab-btn span {
    /* 英字なので、縦に積むときは1文字ずつ立てる */
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 0.08em;
    margin-bottom: -0.08em;
  }

  .tsuki-sns-fab.is-open .tsuki-sns-fab-btn {
    background: #3d2340;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tsuki-sns-fab-items {
    transition: none;
  }
}

/* 対面鑑定ページの「エロ霊視」ブロック（TOPのエロ霊視セクションと同じ配色を使う） */
.system-ero-box {
  margin: 14px 0 0;
  max-width: none;
}

.system-ero-list {
  margin: 0 0 1.4em;
  padding-left: 1.3em;
  list-style: none;
}

.system-ero-list li {
  position: relative;
  margin-bottom: 0.5em;
  line-height: 1.95;
}

.system-ero-list li::before {
  content: "―";
  position: absolute;
  left: -1.3em;
  color: rgba(236, 200, 90, 0.7);
}

.system-ero-media {
  margin: 0 !important;
  padding-top: 1.2em;
  border-top: 1px solid rgba(150, 46, 74, 0.4);
  font-size: 0.97rem;
}

.system-ero-media a {
  display: inline-block;
  margin: 10px 12px 0 0;
  padding: 7px 16px;
  border: 1px solid rgba(236, 200, 90, 0.45);
  border-radius: 999px;
  color: #ecc85a;
  font-size: 0.92rem;
  text-decoration: none;
  transition: background 0.25s ease;
}

.system-ero-media a:hover {
  background: rgba(236, 200, 90, 0.12);
  color: #f6df96;
}

@media screen and (max-width: 600px) {
  .system-ero-box {
    padding: 22px 18px;
  }
  .system-ero-media a {
    display: block;
    margin: 10px 0 0;
    text-align: center;
  }
}

/* PCナビ：項目が増えて幅が足りなくなる画面では、文字を小さくせずに左右の余白だけ詰める
   （1024px前後で「メディア実績」が画面外にはみ出すのを防ぐ） */
@media screen and (min-width: 835px) and (max-width: 1150px) {
  /* この幅ではメニューが画面の右端まで届くので、余白を確保して枠が切れないようにする */
  #navi .navi-in > ul {
    padding-right: 14px;
  }
  #navi .navi-in a {
    padding: 6px 8px;
  }
  #navi .navi-in a[href*="/media"] {
    margin-left: 4px;
  }
}

/* 予約カレンダーの凡例（マスの「個19〜23」などの読み方） */
.cal-legend {
  max-width: 680px;
  margin: 10px auto 0;
  font-size: 0.82rem;
  line-height: 1.7;
  color: #cfc7bb;
  text-align: center;
}

.cal-legend strong {
  color: #ecc85a;
}


/* ==============================
   予約カレンダーのマス内タグ（略字＋受付時間）
   例）歌19-23 / 個14-18
   狭いマスに収めるため、タグはマス幅いっぱいのブロックにして中央寄せ。
   19:30 のような半端な時刻のときだけ、JSが入れた <wbr> の位置で2行になる。
   ============================== */

.calendar .shop-tag .shop-name,
.calendar .personal-tag {
  font-variant-numeric: tabular-nums;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: normal;
}

@media (max-width: 600px) {
  .calendar .tag-wrap {
    width: 100%;
    gap: 1px;
  }
  .calendar .shop-tag,
  .calendar .personal-tag {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 1px 2px;
    border-radius: 6px;
    line-height: 1.15;
    text-align: center;
  }
  .calendar .shop-tag .shop-name,
  .calendar .personal-tag {
    display: block;
    width: auto;
    font-size: 9.5px;
    font-weight: 700;
    overflow: visible;
  }
}

@media (max-width: 360px) {
  .calendar .shop-tag .shop-name,
  .calendar .personal-tag {
    font-size: 9px;
  }
}


/* ==============================
   右端バー／スマホ下部の「ご予約はこちら」ボタン
   SNS導線と同じ場所にまとめ、常に押せる状態にしておく。
   ============================== */

/* PC：右端に「ご予約」タブとSNSタブを縦に並べる（別々のパネル） */
.tsuki-side-rail {
  display: none;
}

.tsuki-side-cta {
  display: none;
}

@media screen and (min-width: 1000px) {
  .tsuki-side-rail {
    display: flex;
    flex-direction: column;
    /* 予約タブとSNSパネルの幅をそろえる（広いほうに合わせて伸ばす） */
    align-items: stretch;
    gap: 10px;
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 60;
  }

  .tsuki-side-rail .tsuki-side-cta {
    /* 縦書きの文字を上下左右の中央に置く（flexで中央寄せ） */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 22px 0;
    border-radius: 10px 0 0 10px;
    border: 1px solid rgba(200, 154, 58, 0.9);
    border-right: none;
    background: linear-gradient(90deg, #f6df96 0%, #e8c25c 45%, #c89a3a 100%);
    color: #2e1a30;
    font-family: 'Zen Old Mincho', 'Shippori Mincho', serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    text-shadow: none;
    box-shadow: -2px 0 14px rgba(8, 3, 10, 0.4);
    transition: filter 0.25s ease, transform 0.25s ease;
  }

  .tsuki-side-rail .tsuki-side-cta span {
    /* 縦書き。字間は文字の「後ろ」にも入るため、最後の分を打ち消して中心を合わせる */
    writing-mode: vertical-rl;
    letter-spacing: 0.18em;
    margin-bottom: -0.18em;
  }

  .tsuki-side-rail .tsuki-side-cta:hover,
  .tsuki-side-rail .tsuki-side-cta:focus-visible {
    filter: brightness(1.08);
    transform: translateX(-3px);
    color: #2e1a30;
  }
}

/* スマホ：SNSボタンの上に、縦書きの大きめタブで置く。
   最初の画面から見えるよう常時表示。下部バーの「予約」より目に留まるようにする。 */
.tsuki-fab-cta {
  display: none;
}

@media screen and (max-width: 999px) {
  .tsuki-sns-fab {
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }

  .tsuki-sns-fab-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* SNSアイコンの列は閉じているあいだも幅を取ってしまうので、行から浮かせて重ねる。
     開くときはSNSタブ（44px）のすぐ左から出す。 */
  .tsuki-sns-fab-items {
    position: absolute;
    right: 52px;
    bottom: 0;
    width: max-content;
    flex-wrap: nowrap;
    transform: translateX(12px) scale(0.96);
    transform-origin: right center;
  }

  .tsuki-sns-fab.is-open .tsuki-sns-fab-items {
    transform: none;
  }

  .tsuki-fab-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 96px;
    border-radius: 10px 0 0 10px;
    border: 1px solid rgba(200, 154, 58, 0.95);
    border-right: none;
    background: linear-gradient(90deg, #f6df96 0%, #e8c25c 45%, #c89a3a 100%);
    color: #2e1a30;
    font-family: 'Zen Old Mincho', 'Shippori Mincho', serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    text-shadow: none;
    box-shadow: -2px 0 16px rgba(8, 3, 10, 0.5);
    margin-left: auto;
  }

  .tsuki-fab-cta span {
    /* 縦書き。字間は文字の「後ろ」にも入るため、最後の分を打ち消して中心を合わせる */
    writing-mode: vertical-rl;
    letter-spacing: 0.16em;
    margin-bottom: -0.16em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tsuki-fab-cta {
    transition: none;
  }
}