@charset "utf-8";
/* ============================================================
   こども脱毛LP（/lp/kids-hair-removal/）
   土台とデザイントークン。セクション個別のCSSは css/sections/ 配下に置く。

   ・SPファースト。375px のデザインを基準に、PCは中央寄せで表示する
   ・見出しは Zen Maru Gothic、本文は Noto Sans JP
   ・画像化しない（見出し・本文・Q&A・料金表・部位名はHTMLテキスト）
   ============================================================ */

:root {
  --kh-text:    #544c45;  /* 本文のこげ茶 */
  --kh-blue:    #61a6db;  /* アクセントの青 */
  --kh-cream:   #fff6d3;  /* 背景のクリーム */
  --kh-line:    #b5aca4;  /* 枠線 */
  --kh-white:   #fff;
  --kh-maxw:    375px;    /* デザイン基準幅。PCでもこの幅で中央に置く */
  --kh-pad:     22px;     /* 左右の標準余白 */
  --kh-font-h:  "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  --kh-font-b:  "Noto Sans JP", "Hiragino Sans", sans-serif;
}

/* ---- ページ全体 ---------------------------------------- */
/* 修正1: font-family を body に当てると共通ヘッダー・フッターの游明朝まで
   置き換わってしまう。LP本体(.kh)だけに効かせる。
   .kh の外に出ていた4セクションは 14_price.php の余分な </div> を取り除いて
   中に戻したので、ここでの列挙は不要になった。 */
body.kids-hair-removal {
  background: var(--kh-white);
  color: var(--kh-text);
}
.kh {
  font-family: var(--kh-font-b);
	padding-bottom: 40px;
}
.kh {                       /* LP本体。SP幅で中央に置く */
  margin-inline: auto;
  width: 100%;
  max-width: var(--kh-maxw);
  overflow-x: hidden;
}
.kh section { position: relative; }

/* ---- サイト共通CSS(com.css)の既定を打ち消す --------------
   このLPはFigmaの実数で組んでいるので、本体サイトの既定が効くと
   折り返し位置・字送り・余白がデザインとずれる。
     body     text-align: justify / letter-spacing: 0.06em
     main p,ul,ol,dl  margin-bottom: 1.6rem
     img      margin: 0 auto（flex内で中央寄せになってしまう）
   ここで一括して戻す。個別に必要なものは各セクションCSSで上書きする。 */
/* text-align と letter-spacing は body にしか指定が無いので、
   .kh 1か所で止めれば配下へ継承される。要素を直接指定すると
   継承が切れたうえ詳細度(0,1,1)でセクション側(0,1,0)に勝ってしまい、
   中央寄せや字送りの指定を潰すので、ここでは .kh だけに当てる。 */
.kh {
  text-align: left;
  letter-spacing: normal;
  /* basic.css の body に font-feature-settings:"palt" があり、
     和文が約8%詰まって折り返し位置がFigmaとずれる。ここで戻す */
  -webkit-font-feature-settings: normal;
  font-feature-settings: normal;
  font-kerning: none;
}

/* 一方 margin-bottom と margin は要素に直接指定されているため、
   こちらは要素を指して打ち消すしかない。
   セクション側で別の値にしたい場合は .kh-xxx .kh-xxx__yyy のように
   クラス2つでスコープして詳細度を上げること。 */
.kh p, .kh ol, .kh ul, .kh dl, .kh table { margin-bottom: 0; }
.kh img { margin: 0; }
.kh img { display: block; max-width: 100%; height: auto; }

/* PCはSP幅のまま中央。左右に余白の背景を敷く */
@media screen and (min-width: 991px) {
  body.kids-hair-removal { background: #faf8f4; }
  .kh { box-shadow: 0 0 24px rgb(0 0 0 / 6%); background: var(--kh-white); }
}

/* ---- 共通の見出し -------------------------------------- */
.kh-title {
  font-family: var(--kh-font-h);
  font-weight: 700;
  color: var(--kh-text);
  text-align: center;
  line-height: 1.35;
}
.kh-title em { font-style: normal; color: var(--kh-blue); }

/* ---- パンくず（/doctor/nishikawa/ と同じ見た目） -------- */
/* パンくず。/doctor/nishikawa/ の p-doctor-breadcrumb と同じ挙動に揃える
   （SPはベージュの帯、PCは左上に固定。ヘッダーが隠れたら上に詰める） */
.kh-breadcrumb {
  padding: 1em;
  background-color: #e6dfcf;
}
.kh-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.kh-breadcrumb li {
  display: flex;
  align-items: center;
  font-size: 1.2em;
  line-height: 1.4;
  color: #666;
}
.kh-breadcrumb li a { color: #666; text-decoration: none; }
.kh-breadcrumb li a:hover { color: var(--linkHoverColor); }
.kh-breadcrumb li span { color: #333; }
.kh-breadcrumb li .arrow_line_right {
  width: 1.4em;
  height: .4em;
  margin: 0 .5em;
  fill: #666;
  transform: translateY(-.3em);
}
@media screen and (min-width: 991px) {
  .kh-breadcrumb {
    position: fixed;
    top: calc(var(--pcHeaderHeight) + 10px);
    left: 20px;
    z-index: 100;
    padding: 0;
    background-color: transparent;
    font-size: 12px;
    transition: top .3s ease;
  }
  .kh-breadcrumb.is-header-hidden { top: 10px; }
  .kh-breadcrumb li { font-size: 1em; }
}

/* ---- 追従CTA（常時表示・1本だけ） ----------------------- */
.kh-fixed-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: rgb(255 255 255 / 92%);
  backdrop-filter: blur(6px);
  box-shadow: 0 -2px 12px rgb(0 0 0 / 8%);
}
.kh-fixed-cta__inner { margin-inline: auto; max-width: var(--kh-maxw); }
.kh-fixed-cta a {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 52px; border-radius: 26px;
  background: var(--kh-blue); color: #fff;
  font-family: var(--kh-font-h); font-weight: 700; font-size: 16px;
  letter-spacing: .04em; text-decoration: none;
}
.kh-fixed-cta a:hover { opacity: .9; }
/* 追従CTAの高さぶん、本文の下に余白を作る（FVの文字に被らせない） */
.kh {
}

/* ---- アコーディオン（セットプラン・Q&A共通） ------------ */
.kh-acc { border-bottom: 1px solid var(--kh-line); }
.kh-acc__q {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 14px 4px; background: none; border: 0; cursor: pointer;
  font-family: var(--kh-font-b); font-size: 14px; font-weight: 700;
  color: var(--kh-text); text-align: left; line-height: 1.5;
}
.kh-acc__q::after {
  content: ""; margin-left: auto; flex: none; width: 10px; height: 10px;
  border-right: 2px solid var(--kh-blue); border-bottom: 2px solid var(--kh-blue);
  transform: rotate(45deg) translateY(-25%); transition: transform .2s;
}
.kh-acc[open] .kh-acc__q::after { transform: rotate(-135deg) translateY(-25%); }
.kh-acc__a {
  padding: 0 4px 16px; font-size: 13px; line-height: 1.8; color: var(--kh-text);
}
.kh-acc__q::-webkit-details-marker { display: none; }


/* ============================================================
   フッターを450px列の中に入れたときの調整

   共通フッターは全幅前提で組まれているので、l-cs-wrapper の列に
   入れると中身（.container 1200px / 地図 / バナー）がはみ出して
   横スクロールが出る。本体サイトの assets/css/style.css に
   l-cs-wrapper 用の調整が入っているが、あれは医師ページ専用の
   指定が大半（107件）なので、列レイアウトに関する19件だけを写した。

   出所: assets/css/style.css（/doctor/nishikawa/ が読む doctor/css/style.css と同内容）
   ============================================================ */
.l-cs-inner footer .container {
  max-width: none;
  min-width: 0;
  padding: 3em 5% 14em;
}
.l-cs-inner footer .footer_inner {
  padding-right: 0;
  position: static;
  margin-bottom: 4em;
}
.l-cs-inner footer .footer_inner > * {
  margin-bottom: 3em;
}
.l-cs-inner footer .footer_inner > *:last-child {
  margin-bottom: 0;
}
.l-cs-inner footer .footer_inner .footer_access {
  width: 100%;
  height: auto;
  position: static;
  transform: none;
}
.l-cs-inner footer .footer_inner .footer_access .googlemap {
  height: 19.4em;
  position: relative;
}
.l-cs-inner footer .footer_inner .footer_access .googlemap iframe {
  height: 55.4em;
  margin-top: -17em;
}
.l-cs-inner footer .footer_inner .footer_sns {
  justify-content: center;
}
.l-cs-inner footer .info_cnt {
  -moz-column-gap: 14%;
  column-gap: 14%;
}
.l-cs-inner footer .info_cnt > div dt {
  font-size: 1em;
  margin-bottom: 0.5em;
}
.l-cs-inner footer .info_cnt > div dd {
  font-size: 2em;
  letter-spacing: normal;
}
.l-cs-inner footer .info_cnt > div dd span {
  display: block;
  padding-top: 0.5em;
}
.l-cs-inner footer .info_cnt > div.address dd {
  font-size: 1.3em;
}
.l-cs-inner footer .footer_link,
.l-cs-inner footer .footer_btn {
  display: none;
}
.l-cs-inner footer .footer_copyright {
  font-size: 1.2em;
  text-align: center;
}
.l-cs-inner footer .disp_pc {
  display: none !important;
}
.l-cs-inner footer .disp_sp {
  display: block !important;
}
.l-cs-inner footer br.disp_pc {
  display: none !important;
}
.l-cs-inner footer br.disp_sp {
  display: inline !important;
}

/* G-2 PCでは右ガターに予約パネルがあるので追従CTAは出さない */
@media screen and (min-width: 991px) {
  .kh-fixed-cta { display: none; }
}

/* ============================================================
   L章 SP（990px以下）の調整

   共通スタイルに触るのは L-1 / L-2 の2件だけ。
   いずれも #PAGETOP.kids-hair-removal でページ限定しているので
   他ページには影響しない。このセレクタは外さないこと。
   ============================================================ */

/* L-1 サイト共通のSP下部ナビ（z-index:10000・高さ103px）が前面に出て
       LPの追従CTAが完全に隠れていた */
@media screen and (max-width: 990px) {
  #PAGETOP.kids-hair-removal #side_navigation { display: none; }
  .kh-fixed-cta { z-index: 10001; }
}

/* L-2 .l-cs-inner が450px幅・背景白のため、375pxのLPとの差75pxが
       左右に白帯として出ていた */
@media screen and (max-width: 990px) {
  #PAGETOP.kids-hair-removal .l-cs-inner { max-width: 375px; }
}

/* L-3 375px以外の端末（iPhone15=393px / Plus=428px）で左右に余白が出る。
       zoom は transform:scale() と違いレイアウトを再計算するので高さがずれない。
       position:fixed の要素は位置計算がずれるため必ず除外する。 */
@media screen and (max-width: 480px) {
  #PAGETOP.kids-hair-removal .l-cs-inner { zoom: calc(100vw / 375px); }  /* 長さ÷長さで比率になる。/375 だと長さのままで無効 */
  .kh,
  .kh-fixed-cta { zoom: 1; }
}

/* L-4 長文の本文が12pxで読みづらい。読ませる文章のみ14pxにする。
       除外はH-1と同じ5箇所＋料金表（横スクロール量が増えるだけなので据え置き） */
@media screen and (max-width: 990px) {
  .kh-voice__text, .kh-change__desc, .kh-reasons__body,
  .kh-chikunetsu__judge-body, .kh-hesitate__text, .kh-hesitate__p,
  .kh-acc__a, .kh-feelings p, .kh-visit__note, .kh-faq__q-text,
  .kh-hesitate__list, .kh-feelings__list,
  .kh-access__text, .kh-access__label,
  .kh-voice__text *, .kh-change__desc *, .kh-reasons__body *,
  .kh-chikunetsu__judge-body *, .kh-hesitate__text *, .kh-hesitate__p *,
  .kh-acc__a *, .kh-feelings p *, .kh-visit__note *, .kh-faq__q-text *,
  .kh-hesitate__list *, .kh-feelings__list *,
  .kh-access__text *, .kh-access__label * {
    font-size: 14px;
    line-height: 22px;
  }
}

/* L-6 パンくずはLPのデザインと合わないため非表示（PC・SPとも）。
       構造化データ（BreadcrumbList）は検索エンジン向けに残している */
.kh-breadcrumb { display: none; }

/* L-7 セットプランの表だけ 14px/padding:4px 2px で他4表と違っていた。
       同じ役割の表は同じ指定にする */
@media screen and (max-width: 990px) {
  .kh-price table th,
  .kh-price table td {
    font-size: 12px;
    padding: 4px;
    line-height: 19px;
  }
}

/* ============================================================
   L-5 追従CTAをセクション内CTAと同じ見た目に揃える
   （背景が青・文字が小さい・書体が違う状態だった）
   ============================================================ */
.kh-fixed-cta__inner > a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgb(235 118 153);
	font-family: "Noto Sans JP", var(--kh-font-b);
	font-size: 18px;
	letter-spacing: normal;
	color: #fff;
}
.kh-fixed-cta__badge {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 44px;
}
.kh-fixed-cta__badge img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.kh-fixed-cta__badge-text {
	position: relative;
	color: rgb(235 118 153);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .06em;
}
.kh-fixed-cta__label { letter-spacing: .08em; }
.kh-fixed-cta__arrow {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 22px;
	line-height: 1;
	color: #fff;
}

/* ============================================================
   I-4 / I-5 CTAリード文
   Figma(216:3017)では助詞（や・の・を）が一段小さい。
   em を inline-block にするだけでは後続の「し」が前の行に残るため、
   文末を .kh-nobr で囲んで塊として扱う。
   ============================================================ */
.kh-nobr {
	display: inline-block;
	white-space: nowrap;
}
.kh-cta03__lead em,
.kh-gutter-cta__lead em { display: inline-block; }

/* サイドパネル：18px基準 */
.kh-gutter-cta__lead {
	font-size: 18px;
	line-height: 1.4;
	color: #555;
	white-space: nowrap;
	min-width: 216px;
}
.kh-gutter-cta__lead .kh-m { font-size: 16px; }
.kh-gutter-cta__lead .kh-s { font-size: 15px; }

/* ページ内CTA：幅165pxと狭いため同比率で縮小し3行に */
.kh-cta03__lead {
	font-size: 15px;
	line-height: 1.4;
	white-space: normal;
}
.kh-cta03__lead .kh-m { font-size: 13.5px; }
.kh-cta03__lead .kh-s { font-size: 12.5px; }

/* I-4 「初回無料」が2行に折れるのを防ぐ */
.kh-cta03__free-text,
.kh-gutter-cta__free-text {
	white-space: nowrap;
	font-size: 15px;
}
.kh-cta03__free { flex: 0 0 auto; }

/* 修正3: CTAの文字色。共通CSSの a:link, a:visited（詳細度0,2,0）に負けて
   茶色のままだったので、同じ形のセレクタで指定し直す */
.kh-price__cta:link,    .kh-price__cta:visited,
.kh-cta03__btn:link,    .kh-cta03__btn:visited,
.kh-gutter-cta__btn:link, .kh-gutter-cta__btn:visited,
.kh-what__cta:link,     .kh-what__cta:visited,
.kh-reasons__cta:link,  .kh-reasons__cta:visited,
.kh-voice__btn:link,    .kh-voice__btn:visited {
  color: #fff;
}