/* === フェア用 上書きテーマ（色と角）========================= */


/* 1) トークン（ここを変えるだけでLPの色味を一括変更） */
:root{
  /* ブランド色（例：フェアの落ち着いたブルー or ブラウンに差し替えOK） */
  --brand: #1c3a70;        /* メイン色（リンク・ボタン等） */
  --brand-strong: #132a52; /* 濃いめ（ホバー・罫線等） */
  --accent: #aa0a0a;       /* 注意/価格強調など */
  --text: #111;            /* 文字 */
  --bg: #fff;

  /* 角丸（丸→角にするときは 0 に） */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
}

/* 2) ベース色の再配色（既存色の“見た目”だけ上書き） */
a, .link { color: var(--brand); }
a:hover { text-decoration: none; }

button, .button, .btn, input[type=submit]{
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand-strong);
  border-radius: var(--radius-md);
}
.btn--outline, .button--outline{
  background: transparent;
  color: var(--brand);
  border: 1px solid var(--brand);
  border-radius: var(--radius-md);
}

/* セクション見出し（既存は金茶や紺系が多い）をブランド色に統一 */
.p-basic-title,
.p-sub-title,
.p-flow_list-title,
.p-faq_list dt { color: var(--brand); }
.p-basic-title .jp::before,
.p-basic-title .jp::after { background-color: var(--brand); }

/* 3) 角丸→角（全体強制切替したいときはここだけ調整） */
[class*="radius"], .rounded, .pill, .tag, .badge,
.p-faq_list, .p-flow_list, .drawer-menu_list, .popup-menu_inner,
.u-radio, .u-button, .u-item-box {
  border-radius: var(--radius-sm) !important;
}
/* 完全に角にしたい時は 0 に変更 */

/* 4) “丸アイコン”など円形を角形へ */
.treatment_list-item i{
  /* 既存は円形＆淡ベージュ（.treatment_list-item i） */
  border-radius: var(--radius-md) !important;
  background: var(--brand);
  box-shadow: none;
  border-color: #fff;
  color: #fff;
}

/* 5) ヘッダー／ハンバーガーなどの強調色置き換え */
.header .ham-menu-button{
  background-color: var(--brand) !important;
}

/* 6) フォームの体裁を軽く整える（共通） */
input, select, textarea{
  border: 1px solid #ddd;
  border-radius: var(--radius-sm);
}
input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
}

/* 7) 注意・価格強調 */
.u-text-red, .u-text-red2 { color: var(--accent) !important; }

/* 8) セクション背景（淡クリーム/淡パープル等 → 白ベース or トーン統一） */
.p-about, .p-flow, .p-faq, .contact{
  background: #fff !important;  /* シンプル化。必要なら淡色に */
}

/* 9) その他 */
.u-text-05em {
  font-size: 0.5em !important;
}

/* =========================================================
   Kirari sheen + CTA（完全置き換え）
   ※ FV料金枠は 朱色グラデ（#cc0000 → #cc5007）でボタン化
   ========================================================= */
:root{
  --brand: #b49662;
  --ink-strong: #333333;
  --radius-md: 6px;
}

/* アンカー */
.mv_price-link{
  display:block;
  color:inherit;
  text-decoration:none;
}

/* 枠（共通） */
.mv_price{
  position:relative;
  overflow:hidden; /* キラリを内側に閉じ込める */
}

/* 中身を前面に（キラリより上） */
.mv_price > *{
  position:relative;
  z-index:1;
}

/* キラリ（常時改良版） */
.mv_price::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 50%;
  height: 100%;
  pointer-events: none;
  z-index: 0;

  background: linear-gradient(
    75deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.08) 30%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.08) 70%,
    rgba(255, 255, 255, 0) 100%
  );

  transform: skewX(-40deg);
  animation: kirari-sheen 3s linear infinite;
}


/* キラリ左→右 */
@keyframes kirari-sheen{
  0%{ left: -40%; }
  100%{ left:120%; }
  animation: kirari-sheen 4s linear infinite;

}

/* ===== FV料金枠：朱色CTA（フォーム送信ボタンと統一） ===== */
.mv_price.box_white{
  background: linear-gradient(90deg, #cc0000 0%, #cc5007 100%) !important;
  color:#fff;
  border:none;
  border-radius:8px;

  /* ← ここを追加 */
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-align:left;

  padding:.5rem;
  box-shadow:
    0 4px 12px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.3);

  animation: cta-bounce 1.6s ease-in-out infinite;
  will-change: transform;
  position:relative;
  overflow:hidden;
}


/* バウンス（かくかく） */
@keyframes cta-bounce{
  0%,100%{ transform: translateY(0); }
  20%{ transform: translateY(-4px); }
  40%{ transform: translateY(2px); }
  60%{ transform: translateY(-3px); }
  80%{ transform: translateY(1px); }
}

/* 文字色の明示（任意） */
.mv_price .s-title{ color:#fff; }
.mv_price .s-size{ color:#fff; }
.mv_price .s-price{ color:#fff; font-weight:700; }
.u-text-white{ color:#fff; }

/* 動き配慮 */
@media (prefers-reduced-motion: reduce){
  .mv_price::after{ animation:none !important; }
  .mv_price.box_white{ animation:none !important; }
}



/* ===================== CTA ===================== */

/* ▼ CTAセクション専用の幅＆余白調整 */
#cta { 
  /* セクション自体の下余白（HOW TO まで） */
  margin-bottom: 2rem;                 /* お好みで 1.5–3rem */
}

/* カードの幅を contents-w に合わせる（広がりすぎ防止） */
#cta .cta-card{
  width: 100%;
  max-width: 600px;                     /* ← ここがキモ：固定760pxを無効化 */
}

/* クリック領域の上下余白を控えめに */
#cta .cta-card-link{
  margin: 1rem 0 .5rem;                /* 以前の 1.25rem から縮小 */
  display: block;
}

/* 注意書き（mv_notice）の余白を圧縮 */
#cta .mv_notice{
  /*margin: .5rem 0 1 2rem;            /* 上は最小、下も控えめに */
  padding: 1.5rem;                          /* 既存にpaddingがあれば上書き */
}

/* クリック領域 */
.cta-card-link{
  display:block; text-decoration:none; color:inherit;
  margin: 1.25rem 0;                 /* セクションとの上下余白 */
  align-self:flex-start;             /* 親がflexでも横いっぱいに伸びない保険 */
}

/* 本体：角丸/影/グラデ/キラリ */
.cta-card{
  --pad: .5rem;
  display:flex; align-items:center; justify-content:space-between; gap:0rem;
  max-width:600px; width:100%; margin:0 auto;
  padding:var(--pad);
  border-radius:8px;
  background: linear-gradient(90deg, #cc0000 0%, #cc5007 100%);
  color:#fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.3);
  position:relative; overflow:hidden;
  will-change: transform;
}
.cta-card::after {
  content:"";
  position:absolute;
  top:0;
  left:-60%;
  width:50%;
  height:100%;
  pointer-events:none;
  z-index:0;

  /* 滑らかに見えるように5段階グラデーションに変更 */
  background: linear-gradient(
    75deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.08) 30%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.08) 70%,
    rgba(255, 255, 255, 0) 100%
  );

  transform: skewX(-40deg);
  animation: kirari-sheen 3s linear infinite;
}

@keyframes kirari-sheen{ 0%{left:-60%;} 100%{left:150%;} }

/* 上下バウンス */
.cta-card.is-bounce{ animation: cta-bounce 1.6s ease-in-out infinite; }
@keyframes cta-bounce{
  0%,100%{ transform: translateY(0); }
  20%{ transform: translateY(-4px); }
  40%{ transform: translateY(2px); }
  60%{ transform: translateY(-3px); }
  80%{ transform: translateY(1px); }
}

/* テキスト側 */
/* MV用のカード全体 */
.cta-card--mv{
  margin-top: 3rem;
  line-height: 1;
  white-space: nowrap;
  color:#fff; /* テキスト白 */
}

/* テキストブロックの余白 */
.cta-card--mv .cta-card__text{
  margin: 1.6rem 1rem 1.6rem 2rem;  /* s-text */
}

/* タイトル（s-title） */
.cta-card--mv .cta-card__title{
  font-size: 1.9rem;
  line-height: 1;
  margin: 0;               /* 元では上marginなし */
  font-weight: 700;
  color:#fff;
}

/* サブ（s-size 相当） */
.cta-card--mv .cta-card__note{
  font-size: 1.4rem;
  margin-top: .8rem;
  color:#fff;
}

/* サブ内の下付き文字（s-under） */
.cta-card--mv .cta-card__note .s-under{
  font-size: 1rem;
}

/* 価格（s-price 相当） */
.cta-card--mv .cta-card__price{
  font-size: 2.8rem;
  margin-top: .3rem;
  font-weight: 700;
  color:#fff;
}

/* 単位（s-unit） */
.cta-card--mv .cta-card__price .unit{
  font-size: 1.5rem;
  margin-left:.15em;
}

/* 税込（s-tax） */
.cta-card--mv .cta-card__price .tax{
  font-size: 1rem;
  margin-left:.25em;
}


.cta-card--mv .cta-card__photo img{
  width: 11rem;  /* 176px相当 */
  height: auto;
  border-radius: 6px;
}


/* 画像側 */
.cta-card__photo{ flex:0 0 auto; position:relative; z-index:1; }
.cta-card__photo img{ display:block; width:180px; height:auto; border-radius:6px; }

/* レスポンシブ */
@media (max-width: 767px){
  .cta-card{ --pad: 1rem; }
  .cta-card__photo img{ width:120px; }
}

/* 動きオフ配慮 */
@media (prefers-reduced-motion: reduce){
  .cta-card::after, .cta-card.is-bounce{ animation:none !important; }
}

/* 任意：下線ユーティリティ（HTMLの u-underline 用） */
.u-underline{ text-decoration: underline; text-underline-offset: 0.2em; }



/* ===================== case（センタリング & 余白） ===================== */

/* 見出し：中央寄せ */
.p-case .p-basic-title{
  writing-mode: horizontal-tb !important; /* 横書きのまま */
  margin-bottom: 1.75rem;
  text-align: center;                      /* ← 中央寄せ */
}

/* コンテンツ：縦積みを維持（u-flex-basic の影響を無効化） */
.p-case .p-content{
  display: block !important;
  margin: 0 auto;
}

/* 症例写真：中央寄せ（画像が実寸で小さい場合も中央に） */
.p-case .s-photo{
  width: 100% !important;
  max-width: 720px;        /* 任意：過度な横長を防ぐ。不要なら削除OK */
  margin: 0 auto 2rem;     /* ← 中央寄せ + 下余白 */
  text-align: center;
}
.p-case .s-photo img{
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;          /* 実寸が小さい画像でも中央に */
  border-radius: 8px;
}

/* 説明リスト（表組） */
.p-case .p-case_dl{
  display: grid;
  grid-template-columns: 8em 1fr;
  font-size: 1.3rem;
  line-height: 1.6;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  margin-bottom: 2rem;     /* ← 表組の下に余白（「表組みの下に余白」案） */
}
.p-case .p-case_dl dt,
.p-case .p-case_dl dd{
  padding: .6rem 0;
  margin: 0;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
}
.p-case .p-case_dl dt{ font-weight: 700; color: #444; }
.p-case .p-case_dl dd{ color: #333; }

/* 最終行の罫線を消す */
.p-case .p-case_dl dt:last-of-type,
.p-case .p-case_dl dd:last-of-type{
  border-bottom: none;
}

/* ---- 症例をループする場合の「症例間の余白」案 ---- */
/* 連続する .p-content 同士の間に区切りを入れる（お好みで） */
.p-case .p-content + .p-content{
  margin-top: 3rem;        /* ブロック間の余白 */
  padding-top: 2rem;
  border-top: 1px solid #eee;
}

/* 万一、u-flex-basic / is-between が効いていた場合の保険 */
.p-case .p-content.u-flex-basic.is-between{
  justify-content: center !important;
  gap: 0 !important;
}


/* About内のタイトルカラーをブランド色に戻す */
.p-about_item .p-sub-title .s-text {
  color: var(--brand, #b49662) !important;
}
.p-about_item .p-sub-title .s-number {
  color: var(--ink-strong, #333333) !important;
}

/* ===== 専用：施術動画セクション（.p-movie-proc） ===== */
/* ===== 施術動画セクション：全幅で表示 ===== */
.p-movie-proc {
  background: none !important;   /* グレー背景消す */
  background-color: #fff;
  padding: 0;                    /* 上下余白も不要なら削除 */
}

.p-movie-proc .contents-w {
  max-width: none;   /* ← 640px制限を解除 */
  padding: 0;
}

/* ラッパーを画面幅いっぱいにして縦動画比率に */
.p-movie-proc .proc-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;   /* 縦動画用 */
  overflow: hidden;
  margin: 0 auto;
}

/* 動画を完全フィットさせる */
.p-movie-proc .proc-video-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* クリック用オーバーレイを使う場合（任意） */
/* ===== 施術動画セクション専用の video-btn ===== */
.p-movie-proc .video-btn {
  content: "";
  position: absolute;
  inset: 0 0 80px 0;
  cursor: pointer;
}


/* ===================== about ===================== */

/* 症例とABOUTの間隔を調整 */
.p-case + .p-about {
  margin-top: -3rem;   /* ← デフォルトより狭める。お好みで 2rem〜3rem */
}

/* 数字と見出し文字を白に */
.p-about .p-sub-title .s-number,
.p-about .p-sub-title .s-text {
  color: #fff !important;   /* ← !important で元CSSを打ち消す */
}


/* ===== about 01 の ::before を無効化 ===== */
.p-about_item.num_01::before {
  content: none !important;
  background: none !important;
}


#flow.p-basic-section {
  padding-top: 2rem ;
}

/* 親側で relative を付与して疑似要素の座標基準を安定させる */
.p-flow_item { position: relative; }

/* ドット背景の旧指定を矢印に変更 */
.p-flow_item + .p-flow_item::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -1.2rem;                  /* 矢印の開始位置（前要素の下あたり） */
  transform: translateX(-50%);   /* 中央寄せ */
  width: 1.2rem;                 /* 矢印の幅 */
  height: 4rem;                  /* 高さを伸ばすほど矢印が増える */

  background: url("../img/arrow_down.svg") center top repeat-y;
  background-size: 1.2rem auto;  /* 矢印の大きさを調整 */

  pointer-events: none;          /* 疑似要素がクリックを邪魔しないように */
  color: #bda174;                /* SVGがcurrentColor対応なら色を拾う */
}

/* アイテム間の余白 */
.p-flow_item + .p-flow_item {
  margin-top: 3rem;
}

.s-number .s-title {
  font-size: 0.6em;   /* emにすると親要素の文字サイズに比例して小さくなる */
  display: inline-block;
  margin-left: 0.2em;  /* 番号との余白 */
  color: #666;         /* 少しトーンを落とすと副題感が出る */
}


/* 親：グレー背景はそのまま。スタッキングコンテキストを作る */
#flow .p-worries_inner{
  --co2-w: 400px;                  /* ← 画像の横幅。もっと大きくしたければ増やす */
  --co2-ratio: 1.7;                /* ← 画像の縦横比（縦/横）。PNGに合わせて */
  position: relative;
  background: #f6f6f6;
  padding: 2rem;
  border-radius: 8px;
  overflow: hidden;                /* はみ出しを切る（好みで） */
  z-index: 0;                      /* これで子要素のz-indexが効く土台になる */
    margin-bottom: 2rem;           /* SP */
}
@media (min-width: 768px) {
  #flow .p-worries_inner { margin-bottom: 3rem; } /* PC */
}

/* 画像：右下にドーン。テキストの背面にする */
#flow .p-worries_inner::after{
  content: "";
  position: absolute;
  right: -4rem;                  /* 右に少しはみ出させてもOK */
  bottom: -12rem;
  width: var(--co2-w);
  height: calc(var(--co2-w) * var(--co2-ratio));
  background: url("../img/co2_machine.png") no-repeat right bottom / contain;
  z-index: 0;                      /* 背面レイヤー */
  opacity: 0.5;                    /* 透過は好みで */
  pointer-events: none;
}

/* 中身のテキストを前面に（背面画像に隠れないように） */
#flow .p-worries_inner > *{
  position: relative;
  z-index: 1;                      /* 前面レイヤー */
}


/* リスト全体リセット */
#flow .u-check-list {
  list-style: none;   /* デフォルトの丸を消す */
  margin: 0;
  padding: 0;
}

/* リスト項目 */
#flow .u-check-list li {
  position: relative;
  border-bottom: 1px solid #ddd;
  padding: 0.6rem 0 0.6rem 1.8rem;  /* 左に余白を確保して✔を置く */
}

/* ✔マークを疑似要素で描画 */
#flow .u-check-list li::before {
  content: "✔";
  position: absolute;
  left: 1.7rem; top: 0.6rem;
  color: #666;
  font-size: 1rem;
}

/* 最後の項目だけ線を消す */
#flow .u-check-list li:last-child {
  border-bottom: none;
}

/* リストと次の段落の余白 */
#flow .p-worries_inner p:last-of-type {
  margin-top: 1.5rem;
}

.marker {
  background: linear-gradient(transparent 60%, #fff176 60%);
  font-weight: bold;         /* 太字を維持 */
  padding: 0 2px;            /* 文字左右に少し余白 */
}


/* 見出しロゴ */
.youtube-heading-logo {
  width: 250px;   /* ロゴの大きさは調整可 */
  height: auto;
  display: block;
  margin: 0 auto 1rem; /* 中央寄せ＆下余白 */
}

/* サムネイル全体をクリック可能に */
.video-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}
.video-wrap .video-thumb {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* サムネイル中央にロゴ重ね */
.video-wrap .youtube-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0.85;
  transition: opacity .3s;
}
.video-wrap:hover .youtube-logo {
  opacity: 1;
}

/*バーガー・フッター*/

/* 1) コンテナで丸みを管理＆クリップ */
.head_hamburger_body .button{
  display: flex;
  gap: 0;                       /* 余白なし（space-betweenは使わない） */
  border-radius: 6px;
  overflow: hidden;             /* 角からはみ出す背景をカット */
}

/* 2) 幅均等 & liの背景/余白の影響を消す */
.head_hamburger_body .button > li{
  flex: 1 1 0;
  margin: 0;
  background: transparent !important;
}

/* 3) 各ボタンの丸みをリセットして、端だけ丸める */
/* ベース：上下レイアウト */
.head_hamburger_body .button > li > a {
	display: flex;
	flex-direction: column;   /* アイコン上、テキスト下 */
	align-items: center;
	justify-content: center;
	gap: 0.3em;               /* アイコンと文字の間 */
	height: 100px;             /* 少し縦長に */
	line-height: 1.4;
	text-decoration: none;
	border-radius: 0 !important;
	color: #fff;
	font-size: 1.3rem;
	font-weight: bold;
}

/* アイコン共通設定 */
.head_hamburger_body .button > li > a::before {
	content: "";
	display: block;
	width: 35px;
	height: 35px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin-bottom: 2px;
}

/* 電話 */
.head_hamburger_body .button > li.tel a {
	background-color: #333;
}
.head_hamburger_body .button > li.tel a::before {
	background-image: url(../img/ic_freedial.svg);
}

/* メール */
.head_hamburger_body .button > li.mail a {
	background-color: #b49662;
}
.head_hamburger_body .button > li.mail a::before {
	background-image: url(../img/ic_mail.svg);
}

/* LINE */
.head_hamburger_body .button > li.line a {
	background-color: #06c755;
}
.head_hamburger_body .button > li.line a::before {
	background-image: url(../img/ic_line.svg);
}


/* 左端だけ丸み */
.head_hamburger_body .button > li:first-child > a{
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

/* 右端だけ丸み */
.head_hamburger_body .button > li:last-child > a{
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

/* 既存色（例） */
.head_hamburger_body .button > li.tel  > a { background:#333; color:#fff; }
.head_hamburger_body .button > li.mail > a { background:#b49662; color:#fff; }
.head_hamburger_body .button > li.line > a { background:#06c755; color:#fff; }
.head_hamburger_body .button > li.tel  > a:hover { background:#111; }
.head_hamburger_body .button > li.mail > a:hover { background:#917442; }
.head_hamburger_body .button > li.line > a:hover { background:#04a943; }


.foot-button_list > li.line a {
	background-color: #06c755; /* LINEグリーン */
}
.foot-button_list > li.line a:hover {
	background-color: #04a943; /* 濃いめのグリーン */
}
.foot-button_list > li.line a::before{
	background-image: url(../img/ic_line.svg); /* LINEアイコン */
}