@charset "utf-8";
/* ============================================================
   こども脱毛LP ー PCの左右ガター（991px以上）

   SPでは .l-cs-gutter が display:none なので、ここの指定はSPに影響しない。
   それでも新しい指定は必ず @media screen and (min-width: 991px) の中に書くこと。

   ---- Figma「PCビューデザイン」(3200:2591 / 1440x900) の実測 ----------
   ガター幅 = calc((100% - 450px) / 2)。1440px で 495px。
     左ナビ (3200:3578)  x=130  y=202  335x562  → ガター右端から 30px・上から 202px
                                                  （130 + 335 + 30 = 495 でガター幅ちょうど）
     sideCTA(3200:3606)  x=1012 y=240  320x421  → ガター左端から 67px・上から 240px
   数値はすべてFigmaの実数をそのままpxで置く。
   幅が足りない1240px未満だけ、ブロックごと transform: scale() で縮める。
   ============================================================ */

@media screen and (min-width: 991px) {

/* ---- ガターの器 ------------------------------------------
   .l-cs-gutter は bottom:0 だけで高さを持たない（/doctor/nishikawa/ は
   下端に貼り付けるCTAなのでそれで足りる）。ここは上からの座標で置きたいので
   top:0 を足してビューポート全高にする。
   ガター自体はクリックを拾わない（中身だけ拾う） */
.kh-gutter {
	top: 0;
	pointer-events: none;
	letter-spacing: normal;        /* サイト共通CSSの字送り(0.9px)を打ち消す */
	font-feature-settings: normal; /* 同 palt（約物詰め）。Figmaは素のまま */
	text-align: left;
}
.kh-gutter,
.kh-gutter *,
.kh-gutter *::before,
.kh-gutter *::after { box-sizing: border-box; }

/* サイト共通CSSの既定（p/ul の余白・img{margin:0 auto}・リストの点）を外す */
.kh-gutter :where(p, ul, ol, li) { margin: 0; padding: 0; }
.kh-gutter :where(li) { list-style: none; }
.kh-gutter :where(img) { display: block; margin: 0; max-width: none; }

/* 幅が足りないときだけ、中身ごと等倍で縮める（Figmaの実数は書き換えない）。
   内側の端（左ナビは右端・sideCTAは左端）を基準に縮めるので、
   450pxの本文列との間隔はFigmaの比率のまま保たれる */
.kh-gutter-nav { transform-origin: 100% 0; }
.kh-gutter-cta { transform-origin: 0 0; }

/* 目次から飛んだときに固定ヘッダーの下に潜らないようにする（PCのみ） */
#kh-price,
#kh-hesitate,
#kh-faq,
#kh-access { scroll-margin-top: calc(var(--pcHeaderHeight, 100px) + 16px); }


/* ============================================================
   左ガター：ページ内の目次（Figma 3200:3578 / 335x562）
   ============================================================ */

/* top は Figma の 202px。画面が低いときだけ、追従フッターCTA(84px)に
   かぶらない位置まで上げる（562 + 84 = 646）。下限はヘッダー(100px)の下。
   それでも入らない高さでは、目次の中だけを送れるようにする
   （max-height は縮小前の箱にかかるので、縮小率で割り戻す） */
.kh-gutter-nav {
	position: absolute;
	top: clamp(110px, calc(100vh - 646px), 202px);
	max-height: calc((100vh - 194px) / var(--kh-g-s, 1));
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	right: calc(30px * var(--kh-g-s, 1));
	width: 335px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	pointer-events: auto;
}

/* 「MENU」。Alata はページで読み込んでいないので本文フォントに落ちる
   （02・05・08・09 の英字見出しと同じ扱い） */
.kh-gutter-nav__label {
	font-family: "Alata", var(--kh-font-b);
	font-size: 12px;
	line-height: 17px;
	letter-spacing: 1.2px;
	color: var(--kh-blue);
	white-space: nowrap;
}

.kh-gutter-nav__rule {
	flex: none;
	display: block;
	width: 46px;
	height: 1px;
	background: var(--kh-blue);
}

.kh-gutter-nav__list { width: 335px; }

/* 1項目 43px（12項目で 516px）。Figmaどおり中身は縦中央・はみ出しは隠す */
.kh-gutter-nav__item {
	width: 335px;
	height: 43px;
	overflow: hidden;
}

.kh-gutter-nav__link,
.kh-gutter-nav__text {
	display: flex;
	align-items: center;
	height: 100%;
	font-family: var(--kh-font-b);
	font-weight: 500;
	font-size: 15px;
	line-height: 24px;
	letter-spacing: .3px;
	color: var(--kh-text);
	white-space: nowrap;
}
.kh-gutter-nav__link {
	text-decoration: none;
	transition: color .2s;
}
.kh-gutter-nav__link:link,
.kh-gutter-nav__link:visited { color: var(--kh-text); }
.kh-gutter-nav__link:hover,
.kh-gutter-nav__link:focus-visible { color: var(--kh-blue); }


/* ============================================================
   右ガター：sideCTA（Figma 3200:3606 / 320x421）
   ============================================================ */

/* top は Figma の 240px。低い画面では追従フッターCTA(84px)を避ける（421 + 84 = 505） */
.kh-gutter-cta {
	position: absolute;
	top: clamp(104px, calc(100vh - 505px), 240px);
	/* 基本はFigmaどおり「ガター左端から 67px」。
	   ただしサイト共通の固定サイドバー（WEB予約/電話予約/お問い合わせ/LINE。
	   画面右端に貼り付く 80px幅・z-index 10000）の下に潜らないよう、
	   右端から 88px(80+余白8) は空ける。1400px以上ではこの制限に当たらないので
	   Figmaの 67px がそのまま効く（1440pxで右端まで 108px あるため）。
	   ※Figmaの「PCビューデザイン」にはこのサイドバーが描かれていない */
	left: min(
		calc(67px * var(--kh-g-s, 1)),
		calc(100% - 88px - 320px * var(--kh-g-s, 1))
	);
	width: 320px;
	pointer-events: auto;
}

.kh-gutter-cta__card {
	position: relative;
	width: 320px;
	height: 421px;
	filter: drop-shadow(20px 20px 10px rgba(166, 198, 224, .1));
}

/* 水色の枠（3200:3607）と、その内側の白地（3200:3608）。
   角丸が外16.59 / 内9.46 と別々なので border ではなく2枚重ねで作る */
.kh-gutter-cta__frame {
	position: absolute;
	left: 0;
	top: 20.2158px;
	width: 320px;
	height: 400.784px;
	border-radius: 16.5938px;
	background: #93caf4;
}
.kh-gutter-cta__sheet {
	position: absolute;
	left: 12.6213px;
	top: 32.8983px;
	width: 293.627px;
	height: 375.418px;
	border-radius: 9.46299px;
	background: var(--kh-white);
}

/* 上辺に重なるピンクのつまみ（3200:3609）。
   03 CTA と同じ形のSVG（preserveAspectRatio="none"）を実寸に伸ばして使う */
.kh-gutter-cta__tab {
	position: absolute;
	left: 107.957px;
	top: 0;
	width: 104.087px;
	height: 46.8436px;
}

/* 中身（3200:3610 / x30 y93 260x267.77） */
.kh-gutter-cta__body {
	position: absolute;
	left: 30px;
	top: 93px;
	width: 260px;
	height: 267.771px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 25px;
}

/* ---- 初回無料！／¥0／リード文（3200:3611 / 216x134） ---- */
.kh-gutter-cta__head {
	position: relative;
	width: 216px;
	height: 134px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.kh-gutter-cta__free {
	width: 108.999px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
}

/* 「初回無料！」。左右のリボンは 21x7 のSVGを -90度 回して立てて使う */
.kh-gutter-cta__free-label {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 10px;
	width: 108.999px;
	height: 21px;
}
.kh-gutter-cta__ribbon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 7px;
	height: 21px;
}
.kh-gutter-cta__ribbon img { flex: none; width: 21px; height: 7px; }
.kh-gutter-cta__ribbon--l img { transform: rotate(-90deg); }
.kh-gutter-cta__ribbon--r img { transform: rotate(-90deg) scaleY(-1); }

.kh-gutter-cta__free-text {
	flex: none;
	width: 70px;
	margin-left: 5px;          /* Figmaの padding-left 5px */
	font-family: "Yu Gothic", YuGothic, var(--kh-font-b);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.4;
	color: #eb7699;
	text-align: center;
}

/* 「¥0」の作字（3200:3624 / 58x50）。
   03 CTA の5枚と同じ図形。Figmaでは
     「¥」 22.894x35  @ x0  y12   （03比 横1.0117倍）
     「0」 30.4049x48 @ x24.7 y0  （03比 横0.9393倍）
   なので、03の重ね位置を同じ比率で横だけ詰めて置き直す */
.kh-gutter-cta__zero { position: relative; width: 58px; height: 50px;
	filter: drop-shadow(-3px 4px 0 rgba(140,180,214,.38));
}
.kh-gutter-cta__zero img { position: absolute; }
.kh-gutter-cta__zero-a { left: 24.6957px; top: 0;       width: 30.4049px; height: 47.9924px; }
.kh-gutter-cta__zero-b { left: 26.8842px; top: 1.97px;  width: 26.0339px; height: 44.0414px; }
.kh-gutter-cta__zero-c { left: 31.9844px; top: 6.95px;  width: 15.8344px; height: 34.1182px; }
.kh-gutter-cta__zero-d { left: 0;         top: 12px;    width: 22.894px;  height: 35.0001px; }
.kh-gutter-cta__zero-e { left: 2.2054px;  top: 14.07px; width: 18.4929px; height: 30.8357px; }

/* 3200:3633。Figmaではかな1字だけ級数が落ちている（18 / 16 / 15） */
.kh-gutter-cta__lead {
	width: 216px;
	font-family: var(--kh-font-h);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.4;
	color: #555;
	text-align: center;
}
.kh-gutter-cta__lead-s16 { font-size: 16px; }
.kh-gutter-cta__lead-s15 { font-size: 15px; }

/* キラキラの飾り（3200:3634 / 3637 / 3640 / 3643）。
   03 CTA と同じSVGを、Figmaの各サイズに伸ばして置く */
.kh-gutter-cta__deco { position: absolute; }
.kh-gutter-cta__deco--1 { left: 41px;    top: 40.5px; width: 12px; height: 12px; }
.kh-gutter-cta__deco--2 { left: 27px;    top: 58.5px; width: 10px; height: 10px; }
.kh-gutter-cta__deco--3 { left: 159px;   top: 37.5px; width: 13px; height: 13px; }
.kh-gutter-cta__deco--4 { left: 175.5px; top: 55px;   width: 13px; height: 13px; }

/* ---- 24時間受付中／予約ボタン（3200:3646 / 260x93.77） ---- */
.kh-gutter-cta__reserve {
	width: 260px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.kh-gutter-cta__time {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 5px;
	width: 119.115px;
	height: 15.771px;
}
.kh-gutter-cta__slash {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 8.557px;
	height: 15.771px;
}
.kh-gutter-cta__slash img { flex: none; width: 7.00054px; height: 17.0005px; }
.kh-gutter-cta__slash--l img { transform: rotate(-14.33deg); }
.kh-gutter-cta__slash--r img { transform: rotate(-165.67deg) scaleY(-1); }

.kh-gutter-cta__time-text {
	flex: none;
	font-family: "Yu Gothic Pr6N", "Yu Gothic", YuGothic, var(--kh-font-b);
	font-weight: 700;
	font-size: 14px;
	line-height: 14px;
	letter-spacing: .84px;
	color: #888;
	white-space: nowrap;
}

.kh-gutter-cta__btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 260px;
	height: 68px;
	padding: 10px 10px 10px 40px;   /* Figmaの pl40 / pr10 / py10 */
	border-radius: 100px;
	background: #eb7699;
	overflow: hidden;
	text-decoration: none;
	transition: opacity .2s;
	color: #fff;
	font-weight: 500;
}
.kh-gutter-cta__btn:hover { opacity: .9; }

.kh-gutter-cta__btn-text {
	font-family: var(--kh-font-b);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.1;
	color: var(--kh-white);
	text-align: center;
}
.kh-gutter-cta__btn:link .kh-gutter-cta__btn-text,
.kh-gutter-cta__btn:visited .kh-gutter-cta__btn-text { color: var(--kh-white); }

/* 左端の「無料」バッジ（ギザギザの丸。03 CTA と同じSVGを実寸に伸ばす） */
.kh-gutter-cta__btn-badge {
	position: absolute;
	left: 9.408px;
	top: 5.504px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 59.518px;
	height: 57px;
}
.kh-gutter-cta__btn-badge img { position: absolute; inset: 0; width: 59.518px; height: 57px; }
.kh-gutter-cta__btn-badge-text {
	position: relative;
	padding-left: 1.12px;      /* 字送りぶんの見た目のズレを戻す */
	font-family: var(--kh-font-h);
	font-weight: 700;
	font-size: 14px;
	line-height: 14px;
	letter-spacing: 1.12px;
	color: #eb7699;
	text-align: center;
	white-space: nowrap;
}

}

/* ---- 幅が足りないときの縮小率 ------------------------------
   sideCTA は「320px + 右の固定サイドバー 88px」が要るので、ガター幅がそれを
   下回ったらブロックごと等倍で縮める（Figmaの実数は書き換えない）。
   左ナビ(335+30=365px)は右サイドバーが無いぶん常に余裕がある。
     1266px以上 … 等倍。     ガター 408px 以上
     1151-1265  … 0.82倍。   ガター 350-407px（320*.82+88 = 350.4）
     1061-1150  … 0.68倍。   ガター 306-350px（320*.68+88 = 305.6）
      991-1060  … 左ナビのみ。sideCTAは実用に耐える大きさで入らないので出さない
                  （ページ下端の追従CTAが1本あるので予約導線は切れない）  */
@media screen and (min-width: 991px) and (max-width: 1265px) {
	.kh-gutter { --kh-g-s: .82; }
	.kh-gutter-nav,
	.kh-gutter-cta { transform: scale(var(--kh-g-s)); }
}
@media screen and (min-width: 991px) and (max-width: 1150px) {
	.kh-gutter { --kh-g-s: .68; }
}
@media screen and (min-width: 991px) and (max-width: 1060px) {
	.kh-gutter--right { display: none; }
}

/* フッターに差しかかったら引っ込める（重なり防止） */
@media screen and (min-width: 991px) {
  .kh-gutter {
    transition: opacity .25s ease, visibility .25s ease;
  }
  .kh-gutter.is-hidden-by-footer {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}