/* =========================
   Tauta. LP（cp001）専用スタイル
   ========================= */

/* info-table フォントの色変更 */
.info-table th,
.info-table td {
  color: #000 !important;
}

/* ===== 比較テーブル（LP用） ===== */
.compare-table{
	table-layout: fixed;
    width: 100%;
	font-size: 16px;
	color: #000 ;
	border-collapse:separate;
	border-spacing:0;
	background:#fff;
	line-height:1.7;
	border:2px solid #8fd0cc;  
}

.compare-table th,
.compare-table td{
  padding:8px 8px;
  vertical-align:middle;
  border:1px solid #cfe9e7;      /* 内側の薄い罫線 */
}

/* ヘッダー */
.compare-table thead th{
  background:#f4fbfa;            /* ごく薄いミント */
  font-weight:700;
  text-align:center;
}

/* 左端の「項目」列＆各行のタイトルセル */
.compare-table .col-title,
.compare-table .row-title{
  background:#f5f5f5;            /* 画像の淡いグレー */
  width:16%;
  white-space:nowrap;
  text-align:center;
}

.compare-table th:nth-child(2),
.compare-table td:nth-child(2),
.compare-table th:nth-child(3),
.compare-table td:nth-child(3) {
  width: 42%;
}

/* 🟢 当店のヘッドスパ列を強調 */
.compare-table th:nth-child(2),
.compare-table td:nth-child(2) {
  background: #e6f6f5;           /* 優しいミント系背景 */
  border-left: 3px solid #57bcb0; /* 左線を太めに */
  border-right: 3px solid #57bcb0;/* 右線を太めに */
  font-weight: 600;               /* 少し強調 */
}

/* ===== スマホ専用フォント調整 ===== */
@media (max-width: 768px) {
  .compare-table {
    font-size: 13px; /* ← 好みで調整（例:12〜14pxくらい） */
  }

  .compare-table th,
  .compare-table td {
    padding: 6px 4px; /* ← 余白も少し詰めると見やすい */
  }
}

/* 💻 PC画面（横幅1024px以上）のときだけ */
/* LPラッパーに基準を作る */
.lp-page{
  position: relative;
  z-index: 0;           /* 擬似要素より下にはしない */
  /*background: #fff;      既存の背景そのままでOK */
}

/* 擬似要素：PCだけ左右に水玉 */
@media (min-width: 1024px) {
  .lp-page::before,
  .lp-page::after{
    content: "";
    position: fixed;      /* 画面固定で追従 */
    top: 0;
    width: 240px;
    height: 100vh;
    background-image: radial-gradient(#fff 4px, transparent 6px);
    background-size: 20px 20px;
    opacity: .6;
    z-index: 0;           /* 親背景の上、本文の下 */
    pointer-events: none; /* クリック阻害しない */
  }
  .lp-page::before{ left: 0; }
  .lp-page::after { right: 0; }

  /* 本文は擬似要素より上に */
  .lp-page > *{
    position: relative;
    z-index: 1;
  }
}

/* ===== スマホ限定：下部固定予約ボタン ===== */
@media (max-width: 1024px) {
  .fixed-reserve-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: block;
    background: #78dfd9;     /* Tauta.っぽいミントグリーン */
    color: #fff;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 16px 0 ;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
    z-index: 9999;
    text-decoration: none;
    transition: opacity 0.3s ease;
  }
}

  .fixed-reserve-btn:hover {
    opacity: 0.9;
  }

@media (min-width: 1025px) {
  .fixed-reserve-btn {
    display: none !important;
  }
}

/* ページトップボタンを完全に非表示 */
#scroll-to-top, .ast-scroll-top-icon, .back-to-top {
  display: none !important;
}


/* LINEで予約する PC用ヘッダーボタン */
/* 非表示がデフォルト */
.header-cta-wrap { display: none; }

/* PCのみ表示 */
@media (min-width: 1025px) {
  .header-cta-wrap{
    position: fixed;
    top: 20px;
    right: 40px;
    z-index: 10010;
    display: flex;
    flex-direction: column;      /* 縦並び */
    align-items: center;         /* 中央揃え */
    gap: 6px;                    /* ボタンと文字の間 */
  }

  .header-cta{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border: 3px solid #189CA9;
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    color: #189CA9;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: .03em;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    backdrop-filter: blur(2px);
    transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease;
  }
  .header-cta:hover{
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
    background: rgba(24,156,169,.4);
	color: #189CA9;
	}

  /* サブテキスト（Tauta.） */
  .cta-subtext{
    font-size: 16px;
    color: #189CA9;
    font-weight: 500;
    letter-spacing: .05em;
  }

  /* WP管理バーがあるときのズレ防止 */
  body.admin-bar .header-cta-wrap{
    top: calc(20px + 32px);
  }
}

/* LINEで予約ボタン */
/* センター配置 */
.cta-center {
  text-align: center;
}

/* ボタン本体 */
.cta-gold {
  --bg: #189ca9; /* 背景（ミント） */

  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;

  width: 400px;
  max-width: 100%;
  padding: 22px 26px;
  background: var(--bg);
  color: #fff;
  border-radius: 16px;
  text-decoration: none;
  position: relative;
  font-weight: 700;
  line-height: 1.4;
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
  transition: all 0.25s ease;
  overflow: hidden;
}

/* 内側の金色グラデーション線 */
.cta-gold::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 12px;
  padding: 2px;
  background: linear-gradient(
    135deg,
    #fff6d0 0%,
    #e7c97a 30%,
    #d3ad47 70%,
    #fff3b0 100%
  );
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* テキスト */
.cta-gold .note {
  font-size: 20px;          /* ←大きめ */
  letter-spacing: .14em;
  opacity: .95;
}
.cta-gold .label {
  font-size: 32px;          /* ←しっかり目立つサイズ */
  letter-spacing: .06em;
}

/* ホバー時：影を消して少し沈む＋白文字を維持 */
.cta-gold:hover {
  box-shadow: none;
  transform: translateY(1px);
  opacity: .95;
  color: #fff;              /* ←白文字固定 */
}
.cta-gold:hover .note,
.cta-gold:hover .label {
  color: #fff;              /* ←白文字固定 */
}

/* スマホ対応 */
@media (max-width: 768px) {
  .cta-gold {
    width: 320px;
    padding: 18px 20px;
  }
  .cta-gold .label { font-size: 24px; }
  .cta-gold .note { font-size: 14px; }
}

/* 吹き出し */
/* 中央寄せ用のラッパー */
.balloon-wrap{ display:flex; justify-content:center; }

/* 本体（白い吹き出し・角丸・薄い影） */
.balloon{
  background:#fff;
  color:#4a4a4a;
  /*border:2px solid #dfeeee; */        /* ごく薄いミント系の枠 */
  border-radius:9999px;              /* 丸み＝大きな pill 形 */
  padding:14px 20px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  position:relative;
  max-width:min(680px, 92vw);        /* 画面に収まるように */
  text-align:center;
  line-height:1.5;
}

/* “しっぽ”（吹き出しの小さな三角） */
.balloon::after{
  content:"";
  position:absolute;
  left: 49%;                         /* 位置はお好みで調整 */
  bottom:-8px;                      /* 風船の下から少し出す */
  width:18px; height:18px;
  background:#fff;
  transform: translateX(-49%) rotate(45deg);
  /*box-shadow: 4px 4px 12px rgba(0,0,0,.06); /* 影を継承 */
}

/* 文字サイズ・階層 */
.balloon-line1{
  font-weight:700;
  letter-spacing:.06em;
  color:#2a9b95;                     /* 見出しを少しミント寄り */
  margin-bottom:2px;
}
.balloon-line2{
  font-weight:700;
  letter-spacing:.04em;
  color:#2a9b95;
}
.balloon-note{
  font-size:13px;
  color:#666;
  margin-top:4px;
}

/* スマホ微調整 */
@media (max-width: 768px){
  .balloon{ padding:12px 14px; }
  .balloon-line1{ font-size:14px; }
  .balloon-line2{ font-size:14px; }
  .balloon-note{ font-size:12px; }
  .balloon::after{ width:16px; height:16px; bottom:-8px; }
}

/* ホバー時に色が変わらないように（テーマ干渉対策） */
.balloon a{ color:inherit; text-decoration:underline; }
.balloon a:hover{ color:inherit; opacity:.9; }