@charset "utf-8";
/* =========================================================
   Hydra Veil リニューアル 2026 追加スタイル
   （style.css の後に読み込む）
   ========================================================= */

:root{
	--pu:#8B2899;
	--pu-d:#6E1F7C;
	--pu-l:#C46BD1;
	--or:#FF3701;
	--bl:#0096FF;
	--bl-d:#0072CC;
	--line:#39AD36;
	--pink:#F87E95;
	--txt:#212121;
	--grad:linear-gradient(90deg,#862B9C 0%,#6144B8 55%,#0392FC 100%);
	--in:600px;
}

#wrap.index p{line-height:1.9;}
[id^="rn-"] *{color:inherit;}
[id^="rn-"]{color:var(--txt); position:relative; overflow:hidden;}
[id^="rn-"] img{max-width:100%; height:auto;}

.rn-in{width:100%; max-width:var(--in); margin:0 auto; padding:0 20px; position:relative; z-index:2;}

/* ---- 共通見出し ---- */
/* Figma ではどのセクションも同じ設定（fs20 / 文字 #FAFFFA /
   DROP_SHADOW radius5・不透明度100%）で、グローの色だけが違う。
   掛かり方は共通にして、色だけ --eb-glow で差し替える。 */
.rn-eyebrow{
	--eb-glow:#fff;
	text-align:center; letter-spacing:.18em; font-size:1.25rem; font-weight:700; line-height:1.3;
	color:#FAFFFA;
	text-shadow:0 0 3px var(--eb-glow), 0 0 6px var(--eb-glow);
	margin-bottom:4px; font-family:"游明朝",YuMincho,"Hiragino Mincho ProN",serif;
}
/* Figma実測のグロー色（記載のないセクションは白） */
#point .rn-eyebrow{--eb-glow:#84BFF0;}          /* ・FUNCTION・ */
#rn-model .rn-eyebrow{--eb-glow:#48F6FF;}       /* ・MODEL CASE・ */
#rn-comparison .rn-eyebrow{--eb-glow:#B2C5FF;}  /* ・COMPARISON・ */
/* Figmaは白グローだが、ボケ背景が明るく白文字が沈むため見出しの紫を当てる */
#rn-merit .rn-eyebrow{--eb-glow:#C46BD1;}       /* ・MERIT・ */
#rn-faq .rn-eyebrow{--eb-glow:#D49BDC;}         /* ・FAQ・ */
#rn-company .rn-eyebrow{--eb-glow:#ECECEC;}     /* ・Company・ */
.rn-h2{
	text-align:center; font-size:1.5rem; font-weight:500; line-height:1.5;
	color:var(--pu); margin-bottom:26px; letter-spacing:.04em;
}
.rn-h2--blue{color:var(--bl);}
.rn-note{font-size:.72rem; color:#777; line-height:1.7; margin-top:10px; text-align:center;}
.rn-note--right{text-align:right;}
.rn-marker{background:linear-gradient(transparent 66%,#FFFCCC 66%);}

/* p の line-height は #wrap.index p{line-height:1.9} が勝つため、特異度を確保して指定値を効かせる */
#wrap.index .rn-eyebrow{line-height:1.3;}
#wrap.index #rn-solution .rn-ribbon{line-height:1.4;}
#wrap.index .rn-solution__read{line-height:1.6;}
#wrap.index .rn-benefit__read{line-height:1.5;}
#wrap.index .rn-card__read{line-height:1.5;}
#wrap.index .rn-card__badge{line-height:1.4;}
#wrap.index .rn-cta__note{line-height:1.5;}
#wrap.index .rn-solution__price{line-height:1.2;}
#wrap.index .rn-price__main{line-height:1;}
#wrap.index .rn-gift-card__sub{line-height:1.6;}
#wrap.index .rn-gift-card__main{line-height:1.4;}
.rn-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}

/* 横スクロールする表に「スライドできます」を一瞬だけ重ねる。
   はみ出していないときと、ユーザーが動かした後は JS で外す */
.rn-scrollwrap{position:relative;}
.rn-swipe{
	position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
	display:none; align-items:center; gap:7px;
	background:rgba(45,22,55,.78); color:#fff;
	font-size:.82rem; font-weight:700; line-height:1; white-space:nowrap;
	padding:10px 18px; border-radius:999px;
	pointer-events:none; z-index:5; opacity:0;
	box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.rn-scrollwrap.is-swipeable .rn-swipe{display:inline-flex; animation:rnSwipeFade 4s ease .25s 1 both;}
.rn-scrollwrap.is-swiped .rn-swipe{display:none;}
.rn-swipe__ico{width:20px; height:20px; fill:#fff; flex:none;}
.rn-scrollwrap.is-swipeable .rn-swipe__ico{animation:rnSwipeMove 1.3s ease-in-out .25s 2 both;}
@keyframes rnSwipeFade{0%{opacity:0} 12%{opacity:1} 76%{opacity:1} 100%{opacity:0}}
@keyframes rnSwipeMove{0%{transform:translateX(7px)} 50%{transform:translateX(-7px)} 100%{transform:translateX(7px)}}
@media (prefers-reduced-motion:reduce){
	.rn-scrollwrap.is-swipeable .rn-swipe{animation:rnSwipeFade 4s linear .25s 1 both;}
	.rn-scrollwrap.is-swipeable .rn-swipe__ico{animation:none;}
}

/* 帯ラベル */
.rn-ribbon{
	display:table; margin:0 auto 18px; padding:9px 34px; border-radius:999px;
	background:var(--grad); color:#fff; font-weight:700; font-size:1.05rem; letter-spacing:.04em;
	box-shadow:0 4px 12px rgba(110,62,174,.25);
}
.rn-ribbon--solid{background:var(--pu); box-shadow:0 4px 12px rgba(139,40,153,.22);}

@media screen and (max-width:640px){
	.rn-in{max-width:100%;}
	.rn-eyebrow{font-size:.9rem;}
	.rn-h2{font-size:1.5rem; margin-bottom:26px;}
	.rn-ribbon{font-size:.95rem; padding:8px 24px;}
}

/* =========================================================
   FV
   ========================================================= */
#rn-fv{
	background:#fff url(../img/rn/bg_fv.jpg) no-repeat center bottom;
	background-size:cover; padding-bottom:46px;
}
@media screen and (max-width:640px){
	/* SPは支給の1枚背景（660x935＝440x623相当）を敷く。
	   写真もボケ背景もこの画像に含まれるので .rn-fv__visual は
	   写真ぶんの高さを空けるだけのスペーサーにする。 */
	#rn-fv{
		background:#fff url(../img/rn/sp_fv.jpg) no-repeat center top;
		/* min-height で画像比率どおりの高さを確保しつつ、テキストが数px
		   はみ出しても下端に白が出ないよう cover で追従させる */
		background-size:cover;
		min-height:141.667vw;              /* 935/660 ＝ 画像の縦横比 */
		padding-bottom:min(8.864vw, 39px); /* Figma: リード下端583→セクション下端622 */
		box-sizing:border-box;
	}
}
.rn-fv__visual{
	background:url(../img/rn/fv_main.jpg) no-repeat center top; background-size:cover;
	height:0; padding-top:38%;
}
.rn-fv__body{width:100%; max-width:1000px; margin:0 auto; padding:0 20px; text-align:center; position:relative; z-index:2;}
#rn-fv .rn-ribbon{margin-top:-26px;}
.rn-fv__catch{
	font-size:1.85rem; line-height:1.55; color:#3b1240; font-weight:700; letter-spacing:.02em;
	margin-bottom:22px;
}
.rn-fv__catch--big{
	display:inline-block; font-size:2.5rem;
	background:linear-gradient(90deg,#A03BB4 0%,#7B3FC4 100%);
	-webkit-background-clip:text; background-clip:text; color:transparent;
}
.rn-fv__lead{font-size:1.05rem; line-height:2; color:#4a2450; margin-top:20px;}

/* 価格ブロック */
.rn-price{
	display:flex; align-items:center; justify-content:center; gap:6px;
	max-width:520px; margin:0 auto; padding:14px 10px;
	background:#fff; border:2px solid #B9CBEA; border-radius:14px;
	box-shadow:0 6px 20px rgba(120,90,160,.14);
}
.rn-price__laurel{width:34px; flex:none;}
.rn-price__body{display:flex; align-items:center; gap:14px;}
.rn-price__label{
	display:block; background:var(--pu); color:#fff; border-radius:999px;
	font-size:.85rem; font-weight:700; padding:4px 20px; margin-bottom:6px; text-align:center;
}
.rn-price__before{font-size:.9rem; color:#555; text-decoration:line-through; text-align:center;}
.rn-price__main{display:inline-flex; align-items:flex-end; color:var(--or); line-height:1; white-space:nowrap;}
.rn-price__stack{display:inline-flex; flex-direction:column; align-items:center; line-height:1;}
.rn-price__num{font-size:4rem; font-weight:700; letter-spacing:-.02em; font-family:"游明朝",YuMincho,serif;}
.rn-price__unit{font-size:1.9rem; font-weight:700; font-family:"游明朝",YuMincho,serif;}
.rn-price__tax{font-size:.78rem; color:#333; font-weight:700; line-height:1.15; margin-bottom:2px;}

@media screen and (min-width:641px){
	/* -----------------------------------------------------------
	   PC：支給の完成背景（2160x933＝1440x622相当）を全面に敷く。
	   画像の縦横比 2.3151 とセクション高 43.194vw が一致するため、
	   background-size:cover で画像が常にセクションにぴったり収まる。
	   文字・枠もすべて vw で組み、1440px以外でも背景との位置関係を保つ。
	   1600px以上は min() で固定値に切り替えて拡大を止める。
	   ----------------------------------------------------------- */
	#rn-fv{
		padding:0;
		height:min(43.194vw, 829px);
		min-height:0;
		background:#fff url(../img/rn/pc_fv.jpg) no-repeat center top;
		background-size:cover;
	}
	.rn-fv__visual{display:none;}

	/* コンテンツ左端を x=220/1440 = 15.278vw に合わせる */
	.rn-fv__body{
		width:min(72.222vw, 1387px); max-width:none; margin:0 auto;
		padding:min(15.486vw, 297px) min(1.389vw, 27px) 0;
		text-align:left;
	}
	.rn-fv__body > *{max-width:none;}

	#rn-fv .rn-ribbon{
		margin:0 0 min(1.042vw, 20px);
		width:min(34.722vw, 667px);
		padding:min(.59vw, 9px) 0;
		text-align:center;
		font-size:min(1.889vw, 36px);
		line-height:1.4;
		font-family:"游明朝",YuMincho,"Hiragino Mincho ProN",serif;
		border:2px solid rgba(255,255,255,.9);
		box-sizing:border-box;
	}

	.rn-fv__catch{
		font-size:min(2.083vw, 40px);
		line-height:1.4;
		color:#212121;
		margin-bottom:min(1.111vw, 21px);
	}
	.rn-fv__catch--big{
		font-size:min(3.111vw, 60px);
		line-height:1.7;
		display:inline-block;
		background:none;
		-webkit-background-clip:initial; background-clip:initial;
		color:var(--pu);
	}

	/* 価格枠＋リード文の横並び */
	/* Figma: 価格枠 x227-717(490) / gap37 / リード x754-1227(473) = 計1000px */
	.rn-fv__row{
		display:flex; align-items:center;
		gap:min(2.569vw, 49px);
		margin-left:min(.486vw, 8px);
		width:auto;   /* 固定幅だと子がはみ出して重なるため内容幅に任せる */
	}

	.rn-price{
		margin:0;
		width:min(34.028vw, 653px); max-width:none; flex:none;
		justify-content:space-between;
		gap:0;
		padding:min(.764vw, 12px) min(1.528vw, 29px);
		box-sizing:border-box;
		border:2px solid transparent;
		border-radius:min(.972vw, 16px);
		background:
			linear-gradient(#fff,#fff) padding-box,
			linear-gradient(100deg,#3AA0F0 0%,#7B4FD0 55%,#8B2899 100%) border-box;
	}
	.rn-price__laurel{width:min(2.292vw, 44px);}
	.rn-price__left{flex:none; width:min(12.917vw, 248px);}
	.rn-price__body{gap:min(1.111vw, 21px);}
	.rn-price__label{
		font-size:min(1.444vw, 28px);
		line-height:1.4;
		padding:min(.07vw, 1px) min(2.986vw, 57px);
		margin-bottom:min(.278vw, 4px);
	}
	.rn-price__before{font-size:min(1.25vw, 24px);}
	.rn-price__num{font-size:min(6.667vw, 128px);}
	.rn-price__unit{font-size:min(2.361vw, 45px);}
	.rn-price__tax{font-size:min(1.25vw, 24px); margin-bottom:min(.278vw, 5px);}

	.rn-fv__lead{
		flex:none;
		/* 本文473px + 左右padding = 513px（1440px時） */
		width:min(35.625vw, 700px); max-width:none;   /* 上限は超広幅で1行目が折り返さない値 */
		/* 1行目が枠内に収まる上限（1440pxで20px） */
		font-size:min(1.389vw, 27px);
		line-height:1.45;
		color:#4C4C4C;
		margin-top:0;
		text-align:left;
		/* 背景写真と重なっても読めるよう、白い薄膜を敷く。
		   content-box にして padding を外側に出し、本文の折り返し位置は据え置く */
		box-sizing:border-box;
		padding:min(1.2vw, 23px) min(1.4vw, 27px);
		margin-left:max(-1.4vw, -27px);
		margin-right:0;
		background:rgba(255,255,255,.62);
		border-radius:min(.7vw, 11px);
		backdrop-filter:blur(3px);
		-webkit-backdrop-filter:blur(3px);
	}

	/* p の line-height 特異度確保（#wrap.index p{line-height:1.9} の打ち消し） */
	#wrap.index #rn-fv .rn-ribbon{line-height:1.4;}
	#wrap.index .rn-fv__lead{line-height:1.45;}
	#wrap.index .rn-price__main{line-height:1;}
	#wrap.index .rn-price__label{line-height:1.4;}
}
@media screen and (max-width:640px){
	/* -----------------------------------------------------------
	   SP：Figma（フレーム幅440px）の実測値をそのまま反映する。
	   値はすべて 440px 基準の vw に換算し、440px を超えたら
	   min() で Figma の px 値に頭打ちさせる（640pxまで拡大しない）。
	     例）fs22 → 22/440*100 = 5vw、上限 22px
	   キャッチ・リード・帯は Figma で textAlign=CENTER のため中央揃え。
	   style.css の h1,p{text-align:left} は要素への直接指定で
	   親の text-align:center を継承できないので、個別に指定する。
	   ----------------------------------------------------------- */
	/* 支給の1枚背景に写真も入っているので、ここは高さを空けるだけのスペーサー。
	   background:none は .rn-fv__visual{background:url(fv_main.jpg)} より後ろに
	   置かないと同特異度で負ける */
	.rn-fv__visual{background:none; padding-top:53.636%;}   /* 支給背景の写真下端 236/440 */

	/* 帯：w340 h40 / r20 / グラデ地に白の内側ライン / fs18 白 Bold */
	#rn-fv .rn-ribbon{
		width:min(77.273vw, 340px); box-sizing:border-box;
		padding:min(1.36vw, 6px) min(2.3vw, 10px);
		/* 写真下端236 → 帯上端229 ＝ 7px 食い込み。負値の上限は max() 側 */
		margin:max(-1.591vw, -7px) auto min(1.6vw, 7px);
		font-size:min(4.091vw, 18px); line-height:1.3; text-align:center;
		border:2px solid rgba(255,255,255,.9); border-radius:999px;
	}

	/* キャッチ：1〜2行目 fs22 lh140% #212121 ／ 3行目 fs28 lh165% #8B2899（単色） */
	.rn-fv__catch{
		font-size:min(5vw, 22px); line-height:1.4; color:#212121;
		text-align:center; margin-bottom:min(2.3vw, 10px);
	}
	.rn-fv__catch--big{
		font-size:min(6.364vw, 28px); line-height:1.65;
		background:none; -webkit-background-clip:initial; background-clip:initial;
		color:var(--pu);
	}

	/* 価格枠：x20 w400 h100 / r10 / 白地＋1pxグラデ枠 */
	.rn-price{
		width:min(90.909vw, 400px); max-width:none; margin:0 auto;
		padding:min(2.386vw, 10.5px) min(1.6vw, 7px); gap:min(.9vw, 4px);
		justify-content:space-between;
		border:1px solid transparent; border-radius:min(2.273vw, 10px);
		background:
			linear-gradient(#fff,#fff) padding-box,
			linear-gradient(100deg,#3AA0F0 0%,#7B4FD0 55%,#8B2899 100%) border-box;
		box-shadow:0 4px 14px rgba(120,90,160,.12);
	}
	.rn-price__laurel{width:min(7.273vw, 32px);}
	.rn-price__body{gap:min(1.1vw, 5px);}
	.rn-price__left{width:min(35.682vw, 157px); flex:none;}
	/* 「導入価格」帯：w144 h25 / r20 / #8B2899 / fs16 白 */
	.rn-price__label{
		width:min(32.727vw, 144px); margin:0 auto min(.7vw, 3px);
		padding:min(1vw, 4px) 0; font-size:min(3.636vw, 16px); line-height:1;
	}
	/* 「定価 77万円（税込）」：fs15、77 だけ fs18 → 1.2em */
	.rn-price__before{font-size:min(3.409vw, 15px); color:#737373;}
	.rn-price__before em{font-style:normal; font-size:1.2em;}
	.rn-price__num{font-size:min(17.345vw, 76px);}
	.rn-price__unit{font-size:min(6.501vw, 29px);}
	.rn-price__tax{font-size:min(3.483vw, 15px); margin-bottom:min(.5vw, 2px);}
	/* Figma:「38」の下端476 に対し「万円」の下端は464。12px 分持ち上げる */
	.rn-price__stack{margin-bottom:min(2.727vw, 12px);}

	/* リード：fs16 lh150% #4D4D4D 中央 */
	.rn-fv__lead{
		font-size:min(3.636vw, 16px); line-height:1.5; color:#4D4D4D;
		text-align:center; margin-top:min(5.227vw, 23px);
	}

	/* #wrap.index p{line-height:1.9} を打ち消す */
	#wrap.index #rn-fv .rn-ribbon{line-height:1.3;}
	#wrap.index .rn-fv__lead{line-height:1.5;}
	#wrap.index .rn-price__label{line-height:1;}
	#wrap.index .rn-price__before{line-height:1.7;}
}

/* =========================================================
   共感パート
   ========================================================= */
#rn-nayami{background:#fff url(../img/rn/bg_silk.jpg) no-repeat center center; background-size:cover; padding:42px 0 54px;}
#rn-nayami .rn-in{max-width:720px;}
.rn-nayami__flex{display:flex; justify-content:center; gap:44px; align-items:flex-start;}

/* --- 縦書き見出し：帯を span 側に持たせ、文字は帯からはみ出させる --- */
.rn-nayami__ttl{
	writing-mode:vertical-rl;
	flex:none;
	display:flex;
	/* vertical-rl では flex-row の主軸が縦になるため、帯を横並び（右→左）にするには column */
	flex-direction:column;
	align-items:flex-start;
	background:none;
	box-shadow:none;
	padding:0;
	border-radius:0;
	font-size:2.6rem;
	font-weight:400;   /* style.css の h2{font-weight:bold} を打ち消し、3行とも同じ太さに */
	letter-spacing:.12em;
	line-height:1.4;
	color:#fff;
}
.rn-nayami__ttl span{
	position:relative;
	z-index:0;
	display:block;
	color:#fff;
	padding:6px 0 16px;
}
.rn-nayami__ttl span:before{
	content:"";
	position:absolute; top:0; bottom:0; left:50%;
	width:1.1em; margin-left:-.55em;
	background:var(--pu);
	border-radius:2px;
	z-index:-1;
}
.rn-nayami__ttl--em{
	font-size:2.6rem;
	font-weight:400;
	padding-bottom:0;
}
/* 3本の帯を階段状にずらす（右→左）。SPは2本なので is-sp / is-pc で出し分ける */
.rn-nayami__ttl span:nth-child(1){margin-top:0;}
.rn-nayami__ttl span:nth-child(2){margin-top:26px;}
.rn-nayami__ttl span:nth-child(3){margin-top:52px;}
.rn-nayami__ttl span.is-sp{display:none;}

/* --- 右カラム --- */
.rn-nayami__body{width:520px; flex:none;}

.rn-nayami__list{width:460px; max-width:460px; flex:none;}   /* 「脱毛・痩身以外の…」が1行に収まる幅 */
.rn-nayami__list li{
	background:#fff; border-radius:8px; padding:13px 16px 13px 52px; margin-bottom:10px;
	font-size:1rem; line-height:1.5; font-weight:500; position:relative; box-shadow:0 2px 8px rgba(90,60,110,.08);
}
.rn-nayami__list li:before{
	content:"✓"; position:absolute; left:22px; top:50%; margin-top:-13px;
	border:none; transform:none;
	width:auto; height:auto;
	font-size:1.3rem;
	color:var(--pu);
	font-family:"游明朝",YuMincho,serif;
}
.rn-nayami__read{text-align:left; font-size:1.2rem; line-height:1.9; margin-top:45px; color:var(--txt);}

@media screen and (max-width:640px){
	/* Figma:帯1の上端606／帯2の上端628／リスト上端653（セクション上端は622）。
	   [id^="rn-"]{overflow:hidden} で上にはみ出す分は切れるため、
	   帯1をセクション上端に置き、相対関係（帯2＋22px／リスト＋47px）を保つ */
	#rn-nayami{padding:0 0 min(11.364vw, 50px);}
	/* Figma SP（440px幅）：見出しは「サロン経営で」「こんなお悩みありませんか？」の
	   2本の帯。どちらも fs24 / 帯幅28px / 行送り約121% / 字間0。
	   帯の開始位置は 606 と 628 で 22px の段差。 */
	/* SPは「美容機器は決して〜」を見出し＋リストの下に全幅で置く。
	   .rn-nayami__body を display:contents にして list と read を
	   .rn-nayami__flex の直接の子にし、read だけ折り返させる */
	.rn-nayami__flex{gap:min(3.636vw, 16px); padding:0; justify-content:center; flex-wrap:wrap;}
	.rn-nayami__body{display:contents;}
	.rn-nayami__ttl{
		font-size:min(5.455vw, 24px);
		/* Figma は幅35pxのテキストボックスに1文字ずつ折り返した縦組みで、
		   行送り120%＝1文字あたり28.8px。縦書きCSSでは字送りが1emなので
		   letter-spacing .2em で 1.2em に合わせる。line-height は帯の幅側 */
		letter-spacing:.2em; line-height:1.458; padding:0; margin:0;
	}
	.rn-nayami__ttl--em{font-size:1em;}
	.rn-nayami__ttl span{padding:min(1.136vw, 5px) 0 0;}
	.rn-nayami__ttl span:before{width:1.167em; margin-left:-.5835em;}   /* 28/24em */
	.rn-nayami__ttl span.is-pc{display:none;}
	.rn-nayami__ttl span.is-sp{display:block; margin-top:min(5vw, 22px);}
	/* PC用の固定幅を打ち消し */
	.rn-nayami__list{width:min(67.045vw, 295px); max-width:none; flex:none; margin-top:min(10.682vw, 47px);}   /* Figma: リスト枠295px・帯1から47px下 */
	.rn-nayami__list li{font-size:.95rem; padding:12px 12px 12px 36px; line-height:1.6;}
	.rn-nayami__list li:before{left:14px; width:7px; height:13px;}
	/* Figma: x27 w386（ほぼ全幅）/ fs18 / 行送り200% / 中央 / #212121 */
	.rn-nayami__read{
		width:100%; flex:none;
		font-size:min(4.091vw, 18px); line-height:2; text-align:center;
		margin-top:min(2.727vw, 12px);
	}
	#wrap.index .rn-nayami__read{line-height:2;}
}

/* =========================================================
   解決策
   ========================================================= */
#rn-solution{background:#EBF9FD; padding:0 0 0; text-align:center; overflow:visible; display:flow-root;}
#rn-solution .rn-ribbon{
	position:relative; z-index:3;
}
@media screen and (min-width:641px){
	#rn-solution .rn-ribbon{
		margin:-19px auto 18px;
		padding:5.5px 54px;
		font-size:1.15rem;
		line-height:1.4;
	}
}
.rn-solution__price{font-size:2rem; font-weight:700; line-height:1.2; margin-bottom:0;}
/* Figma: 「38万円」は上#FF1500→下#FF6000 の縦グラデーション */
.rn-solution__amount{
	display:inline-block;
	background:linear-gradient(180deg,#FF1500 0%,#FF6000 100%);
	-webkit-background-clip:text; background-clip:text; color:transparent;
}
.rn-solution__num{font-size:1.75em; font-weight:700; font-family:"游明朝",YuMincho,serif;}
.rn-solution__from{font-size:1.5rem; color:var(--pu);}
.rn-solution__sub{font-size:1.375rem; color:var(--pu); font-weight:700; margin-bottom:20px;}
.rn-solution__read{font-size:1.15rem; line-height:1.6; color:#333;}
.rn-solution__img{margin-top:35px;}
/* PC：Figmaどおり、水彩背景を本文の高さから重ね、マシンの脚を次セクションへはみ出させる */
@media screen and (min-width:641px){
	#rn-solution{position:relative; z-index:2;}
	.rn-solution__read{position:relative; z-index:3;}
	.rn-solution__img{position:relative; z-index:2; margin-top:-58px; margin-bottom:-22px;}
}
.rn-solution__img img{width:430px;}   /* 背景（水彩）込みの素材 */

@media screen and (max-width:640px){
	/* -----------------------------------------------------------
	   Figma SP（440px幅）
	     セクション  y1235-1716（#EBF9FD）
	     帯          y1216-1253 w252 h37 → 上端より19px 食い込ませて境目に置く
	     38/万円/から y1271-1331（fs50 / fs30 / fs20）
	     小見出し    y1331 fs20
	     リード      y1384 fs18 lh160%
	     マシン画像  背景込みで w430（＝ほぼ全幅）。上はリードに重なり、
	                 下は次セクションへ22pxはみ出す
	   ----------------------------------------------------------- */
	#rn-solution{padding:0; position:relative; z-index:2;}
	#rn-solution .rn-ribbon{
		margin:max(-4.318vw, -19px) auto min(4.091vw, 18px);
		width:min(57.273vw, 252px); box-sizing:border-box;
		padding:min(1.545vw, 7px) 0;
		font-size:min(4.091vw, 18px); line-height:1.3;
	}
	.rn-solution__price{font-size:min(6.818vw, 30px);}   /* 「万円」fs30 が基準 */
	.rn-solution__num{font-size:1.667em;}                /* 38 = 50 / 30 */
	.rn-solution__from{font-size:min(4.545vw, 20px);}
	.rn-solution__sub{font-size:min(4.545vw, 20px); margin-bottom:min(4.545vw, 20px);}
	.rn-solution__read{font-size:min(4.091vw, 18px); line-height:1.6; position:relative; z-index:3;}
	.rn-solution__img{
		position:relative; z-index:2;
		margin-top:max(-13.182vw, -58px);      /* リード文の高さぶん引き上げて重ねる */
		margin-bottom:max(-5vw, -22px);        /* マシンの脚を次セクションへ出す */
		/* .rn-in の左右padding(20px)を打ち消して全幅にし、430pxの画像を中央に置く */
		margin-left:max(-4.545vw, -20px); margin-right:max(-4.545vw, -20px);
	}
	/* Figma は x5-435 の w430。.rn-in の左右padding(20px)を越えるため
	   max-width:100%（[id^="rn-"] img）を解除する */
	.rn-solution__img img{width:min(97.727vw, 430px); max-width:none;}
}

/* =========================================================
   ベネフィット
   ========================================================= */
/* Figma: 横方向グラデ（左 #FAE2EC → 右 #DEF0FC）。上のセクションとは境界がはっきり分かれる */
#rn-benefit{background:linear-gradient(90deg,#FAE2EC 0%,#DEF0FC 100%); padding:49px 0 37px;}
#rn-benefit .rn-in{max-width:700px;}
#rn-benefit .rn-h2{margin-bottom:25px;}
.rn-benefit__list{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:31px;}
.rn-benefit__list li{width:125px; background:#fff; border-radius:10px; box-shadow:0 2px 10px rgba(120,90,160,.10);}
.rn-benefit__list li img{width:100%; display:block; border-radius:10px;}
.rn-benefit__read{text-align:center; font-size:1.15rem; line-height:1.5; font-weight:500;}

@media screen and (max-width:640px){
	#rn-benefit{padding:40px 0 46px;}

	.rn-benefit__list{gap:6px;}
	.rn-benefit__list li{width:31.5%;}
	.rn-benefit__read{font-size:.92rem;}
}

/* =========================================================
   選ばれる理由
   ========================================================= */
#rn-reason{background:linear-gradient(180deg,#EEE1F5 0%,#E4D7EB 50%,#EDE0F4 100%); padding:37px 0 60px;}
#rn-reason .rn-in{max-width:840px;}   /* カード幅800px */
#rn-reason .rn-h2{margin-bottom:40px;}
.rn-card{
	background:#fff; border-radius:14px; padding:35px 30px 22px; margin-bottom:69px;
	box-shadow:0 3px 14px rgba(120,90,160,.10); position:relative;
}
.rn-card:after{
	content:"";
	position:absolute; inset:5px;
	border:1px solid #E3E3E3;
	border-radius:10px;
	pointer-events:none;
}
.rn-card__badge{
	position:absolute; top:-12px; left:50%; transform:translateX(-50%); z-index:1;
	background:var(--pu); color:#fff; font-size:.95rem; font-weight:700; letter-spacing:.06em;
	line-height:1.4;
	padding:6px 16px; border-radius:999px; white-space:nowrap;
}
.rn-card__ttl{
	text-align:center; font-size:1.7rem; color:var(--pu); font-weight:500; letter-spacing:.03em;
	padding-bottom:14px; margin-bottom:18px; position:relative;
}
.rn-card__ttl:after{
	content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
	width:99px; height:2px; background:linear-gradient(90deg,#E9C7EE,#C46BD1,#E9C7EE);
}
.rn-card__read{text-align:center; font-size:1rem; line-height:1.5; font-weight:500;}
.rn-card__read--strong{font-weight:700; margin-top:16px;}

.rn-chips{display:flex; flex-wrap:wrap; justify-content:center; gap:15px; margin-bottom:16px;}
.rn-chips li{background:#F4EDF6; border:1px solid #E2D0E8; border-radius:4px; padding:3px 18px; font-size:.95rem; line-height:1.3; font-weight:500;}

/* Reason.03 アップセル */
.rn-upsell{margin:6px 0 18px;}
.rn-upsell__row{display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:8px;}
.rn-upsell__ico{width:42px;}
.rn-upsell__ico2{width:118px;}
.rn-upsell__set{display:inline-flex; flex-direction:column; align-items:center; gap:2px;}
.rn-upsell__label{color:var(--bl); font-weight:700; font-size:.95rem;}
/* Figma: 「+フェイシャル」には #FFFCCC のマーカー（テキスト下半分）。
   PC・SPとも同じ指定（PC実測 x751-855 y3595-3608／SP実測 x250-354 y3551-3564） */
.rn-upsell__label--plus{
	white-space:nowrap;
	background:linear-gradient(transparent 50%, #FFFCCC 50%);
	padding:0 3px;
}
.rn-upsell__arrow{color:var(--bl); font-size:1.2rem;}

/* Reason.04 動画枠 */
.rn-movie{
	background:#EFEFEF; border-radius:4px; overflow:hidden;
	width:450px; max-width:100%; margin:0 auto 18px;
	aspect-ratio:16 / 9;   /* 素材は1280x720 */
}
.rn-movie__video{width:100%; height:100%; object-fit:cover; display:block;}
.rn-gift{background:#FBF2FA; border-radius:10px; padding:20px 24px 22px; width:450px; margin:20px auto 0;}
.rn-gift__ttl{text-align:center; color:var(--pu); font-weight:700; font-size:1.05rem; margin-bottom:10px;}
.rn-gift__body{display:flex; align-items:center; gap:14px;}
.rn-gift__body img{width:158px; flex:none;}
.rn-gift__body p{font-size:.9rem; line-height:1.8;}

/* クーポン */
.rn-coupon__ttl{background:#F0E7F2; color:var(--pu); text-align:center; font-size:1.15rem; letter-spacing:.08em; padding:12px; border-radius:999px; margin:24px 0 14px;}
.rn-coupon li{border-bottom:1px solid #E4E4E4; padding:18px 0;}
.rn-coupon .left{float:left; width:220px;}   /* 素材は450x225。220pxなら2x相当で潰れない */
.rn-coupon .left picture{display:block;}
.rn-coupon .left img{width:100%;}
.rn-coupon .right{float:right; width:calc(100% - 244px);}
.rn-coupon .tag span{display:inline-block; border:1px solid #B9B9B9; font-size:.78rem; padding:2px 10px; margin:0 5px 8px 0; color:#666;}
.rn-coupon h4{font-size:1.05rem; line-height:1.6; color:var(--pu); font-weight:700; margin-bottom:8px;}
.rn-coupon p{font-size:.8rem; line-height:1.8; color:#666;}
.rn-coupon li:after{content:""; display:block; clear:both;}

/* 溶剤比較表 */
.rn-solvent{width:100%; min-width:480px; border-collapse:collapse; margin-top:18px; background:#fff;}
.rn-solvent th,.rn-solvent td{text-align:center; padding:12px 6px; font-size:.82rem; border-bottom:1px solid #E8E8E8; vertical-align:middle;}
.rn-solvent thead th{border-bottom:none; padding-bottom:8px;}
.rn-solvent thead th:not(.rn-solvent__head){background:#EDEDED; border-radius:999px; font-weight:700; color:#444; padding:6px 4px;}
.rn-solvent thead th.rn-solvent__own{background:linear-gradient(90deg,#C44CD9,#7B3FC4); color:#fff;}
.rn-solvent tbody th{width:80px; font-weight:700; color:#444;}
.rn-solvent td.rn-solvent__own{background:#FBF3FC; font-weight:700; color:#3b1240;}
.rn-solvent small{font-size:.68rem; font-weight:400;}
.rn-solvent__feat{font-size:.72rem !important; line-height:1.6; font-weight:400 !important;}

@media screen and (max-width:640px){
	/* Figma SP（440px幅）：カード内容幅340px／見出し fs26／バッジ fs15／本文 fs16 */
	#rn-reason{padding:40px 0 46px;}
	.rn-card{padding:28px min(6.818vw, 30px) 24px; margin-bottom:28px; border-radius:10px;}
	.rn-card__badge{font-size:min(3.409vw, 15px); padding:5px 18px;}
	.rn-card__ttl{font-size:min(5.909vw, 26px);}
	.rn-card__read{font-size:min(3.636vw, 16px);}

	/* 1台5役のチップ：Figma は 毛穴洗浄/RF/EMS ＋ 美容液導入/頭皮ケア の 3+2。
	   幅340pxに収めると 1段目229px・2段目218px で自然に3+2で折り返す */
	.rn-chips{max-width:min(77.273vw, 340px); margin-left:auto; margin-right:auto;
		gap:min(1.364vw, 6px) min(3.409vw, 15px);}
	.rn-chips li{font-size:min(3.636vw, 16px); line-height:1.3;
		padding:min(.795vw, 3.5px) min(3.636vw, 16px);}

	.rn-upsell__ico{width:min(9.091vw, 40px);}
	.rn-upsell__ico2{width:min(28.864vw, 127px);}
	.rn-upsell__label{font-size:min(3.409vw, 15px);}

	/* PC用の固定幅を打ち消し */
	.rn-movie,.rn-gift{width:auto;}
	/* Figma: 枠340pxの中に 画像119＋本文185。左右paddingを詰めて本文幅を確保 */
	.rn-gift{padding:min(3.636vw, 16px) min(1.818vw, 8px) min(4.091vw, 18px);}
	/* Figma: 画像 w119 を左、本文 w185 を右に並べる */
	.rn-gift__body{display:flex; align-items:center; gap:min(2.045vw, 9px); text-align:left;}
	.rn-gift__body img{width:min(29.545vw, 130px); flex:none; margin:0;}
	.rn-gift__body p{font-size:min(3.182vw, 14px); text-align:left; line-height:1.7;}
	.rn-gift__ttl{font-size:min(3.636vw, 16px);}

	.rn-coupon__ttl{font-size:min(3.636vw, 16px);}
	/* サムネイルを拡大（素材は450x225） */
	.rn-coupon .left{width:min(29.545vw, 130px);}
	.rn-coupon .right{width:calc(100% - min(32.955vw, 145px));}
	.rn-coupon h4{font-size:min(3.409vw, 15px);}
	.rn-coupon p{font-size:min(2.955vw, 13px);}
	.rn-coupon .tag span{font-size:min(2.727vw, 12px);}
}

/* =========================================================
   導入メリット
   ========================================================= */
#rn-merit{background:#EAECF3 url(../img/rn/bg_bokeh.jpg) no-repeat center center; background-size:cover; padding:56px 0 60px;}
#rn-merit .rn-in{max-width:820px;}   /* 3個×240px＋間隔24px＝768px が1段に収まる幅 */
.rn-merit__lead{text-align:center; font-size:1.25rem; margin-bottom:20px; color:#333;}
.rn-merit__list{display:flex; flex-wrap:wrap; justify-content:center; gap:16px 24px;}
.rn-merit__list li{
	background:#fff; border-radius:999px; padding:14px 18px; font-size:1.15rem; font-weight:700;
	width:240px; box-sizing:border-box;
	display:flex; align-items:center; justify-content:center; gap:12px;
	box-shadow:0 2px 8px rgba(80,90,140,.10);
}
.rn-merit__list li img{width:auto; height:26px; max-width:32px; flex:none;}   /* 縦を揃えてチップ高を統一 */

@media screen and (max-width:640px){
	#rn-merit{padding:40px 0 46px;}
	.rn-merit__lead{font-size:1.05rem;}
	.rn-merit__list{gap:8px;}
	.rn-merit__list li{font-size:.85rem; padding:10px 16px; gap:7px; width:auto;}
	.rn-merit__list li img{width:auto; height:19px; max-width:24px;}
}

/* =========================================================
   導入後の収益イメージ
   ========================================================= */
#rn-model{background:#DFF3FA url(../img/rn/model_bg.jpg) no-repeat center top; background-size:cover; padding:56px 0 60px;}
#rn-model .rn-in{max-width:800px;}
.rn-model__lead{text-align:center; font-size:1.1rem; font-weight:700; line-height:1.8; margin-bottom:22px;}
.rn-model__cards{display:flex; justify-content:center; gap:10px; margin-bottom:24px;}
.rn-model__cards li{flex:1; background:#fff; border-radius:10px; padding:12px 6px 14px; text-align:center; box-shadow:0 2px 8px rgba(60,120,160,.10);}
.rn-model__cards--main{border:2px solid var(--bl);}
.rn-model__label{display:inline-block; background:var(--pu); color:#fff; border-radius:999px; font-size:.72rem; font-weight:700; padding:3px 12px; margin-bottom:8px;}
.rn-model__label--blue{background:var(--bl);}
.rn-model__num{font-size:1.3rem; font-weight:700; color:#222; line-height:1.3;}
.rn-model__sub{font-size:.68rem; color:#777;}
.rn-model__table{width:100%; border-collapse:collapse; background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 2px 10px rgba(60,120,160,.10);}
.rn-model__table th{background:var(--pu); color:#fff; font-size:.82rem; font-weight:700; text-align:center; padding:10px 4px; line-height:1.4;}
.rn-model__table th small{font-size:.66rem; font-weight:400;}
.rn-model__table td{text-align:center; padding:12px 4px; font-size:.95rem; color:var(--pu-d); border-bottom:1px solid #EFEFEF;}
.rn-model__table tr.is-main td{background:#F6F1F8; font-weight:700;}

@media screen and (max-width:640px){
	#rn-model{padding:40px 0 46px;}

	.rn-model__lead{font-size:.95rem;}
	.rn-model__cards{gap:6px;}
	.rn-model__num{font-size:1.05rem;}
	.rn-model__table td{font-size:.82rem;}
	.rn-model__table th{font-size:.72rem;}
}

/* =========================================================
   導入事例
   ========================================================= */
#rn-case{background:linear-gradient(90deg,#FAE2EC 0%,#DEF1FC 100%); padding:56px 0 60px;}
#rn-case .rn-in{max-width:420px;}
.rn-case__lead{text-align:center; font-size:1.05rem; font-weight:700; line-height:1.8; margin-bottom:22px;}
.rn-case__card{display:block; background:#fff; border-radius:6px; overflow:hidden; box-shadow:0 4px 16px rgba(120,90,160,.12); text-decoration:none;}
.rn-case__card:hover{text-decoration:none; opacity:.92;}
.rn-case__img img{width:100%; display:block;}
.rn-case__body{padding:18px 20px 22px;}
.rn-case__tag{display:inline-block; background:var(--pu); color:#fff; font-size:.72rem; font-weight:700; padding:3px 10px; margin-bottom:10px;}
.rn-case__ttl{font-size:1.05rem; font-weight:700; line-height:1.6; color:#222; margin-bottom:10px;}
.rn-case__txt{font-size:.85rem; line-height:1.8; color:#555; margin-bottom:16px;}
.rn-case__btn{
	display:block; width:200px; margin:0 auto; text-align:center; background:var(--bl); color:#fff;
	font-size:.92rem; font-weight:700; padding:11px 0; border-radius:999px;
	box-shadow:0 3px 8px rgba(0,150,255,.30);
}

@media screen and (max-width:640px){
	#rn-case{padding:40px 0 46px;}

	.rn-case__lead{font-size:.95rem;}
	.rn-case__ttl{font-size:.98rem;}
	.rn-case__btn{width:90%;}
}

/* =========================================================
   CTA（中間・最終）
   ========================================================= */
.rn-cta{background:#1b0c04 url(../img/rn/bg_dark.jpg) no-repeat center center; background-size:cover; padding:37px 0 32px; text-align:center;}
.rn-cta .rn-in{max-width:426px;}
.rn-cta__ttl{color:#fff; font-size:1.5rem; line-height:1.5; font-weight:500; margin-bottom:18px; text-shadow:0 2px 8px rgba(0,0,0,.4);}
.rn-gift-card{display:flex; align-items:center; gap:17px; background:#fff; border-radius:10px; padding:15px 17px; width:360px; margin:0 auto 9px; text-align:left;}
.rn-gift-card__thumb{
	width:69px; height:90px; flex:none; border-radius:2px;
	object-fit:cover; display:block; max-width:none;
	box-shadow:0 1px 4px rgba(0,0,0,.18);
}
.rn-gift-card__tags{margin-bottom:6px;}
.rn-gift-card__tags span{display:inline-block; color:#fff; font-size:.7rem; font-weight:700; padding:3px 10px; border-radius:999px; margin-right:5px;}
.rn-gift-card__tags .is-line{background:var(--line);}
.rn-gift-card__tags .is-free{background:var(--bl);}
.rn-gift-card__sub{font-size:1rem; color:#333; line-height:1.6;}
.rn-gift-card__main{font-size:1.2rem; font-weight:700; color:#222; line-height:1.4;}

/* LINEボタンは支給画像（533x123・比率4.33）をそのまま使用 */
.rn-linebtn{
	display:block; width:380px; max-width:100%; margin:0 auto;
	line-height:0; text-decoration:none; transition:opacity .2s;
}
.rn-linebtn img{display:block; width:100%; height:auto;}
.rn-linebtn:hover{text-decoration:none; opacity:.85;}
.rn-cta__note{
	color:#fff; font-weight:700; font-size:1.15rem; line-height:1.5; margin-top:5px;
	display:inline-block; padding:0 34px; position:relative;
}
.rn-cta__note:before,.rn-cta__note:after{
	content:""; position:absolute; top:50%; width:2px; height:44px; background:#fff; margin-top:-22px;
}
.rn-cta__note:before{left:8px; transform:rotate(-22deg);}
.rn-cta__note:after{right:8px; transform:rotate(22deg);}

@media screen and (max-width:640px){
	.rn-cta{padding:40px 0 44px;}

	.rn-cta__ttl{font-size:1.2rem;}
	.rn-gift-card{gap:10px; padding:12px;}
	.rn-gift-card__thumb{width:60px; height:74px;}
	.rn-gift-card__sub{font-size:.82rem;}
	.rn-gift-card__main{font-size:1.02rem;}
	.rn-cta__note{font-size:.88rem;}
	/* PC用の固定幅を打ち消し */
	.rn-gift-card{width:100%;}
	.rn-linebtn{width:320px;}
}

/* =========================================================
   他社との比較
   ========================================================= */
#rn-comparison{background:linear-gradient(180deg,#EAF6FE 0%,#F3F7FD 55%,#EAF2FB 100%); padding:38px 0 0;}
#rn-comparison .rn-in{max-width:840px;}
.rn-compare{width:800px; min-width:0; margin:0 auto; border-collapse:collapse; background:#fff; font-size:.95rem; table-layout:fixed;}
.rn-compare th,.rn-compare td{border:1px solid #E3E3E3; padding:12px 16px; vertical-align:top; line-height:1.5;}
.rn-compare thead th{text-align:center; background:#EDEDED; color:#444; font-weight:700; padding:11px 8px; font-size:1rem;}
.rn-compare thead th.rn-compare__own{background:var(--pu); color:#fff;}
.rn-compare thead th.rn-compare__item{width:160px;}
.rn-compare tbody th{width:160px; text-align:left; font-weight:700; color:#444; background:#F5F5F5;}
.rn-compare td.rn-compare__own{background:#FDF6FE;}
.rn-compare td{color:#333; font-weight:700;}
.rn-compare small{display:block; font-weight:400; font-size:.8rem; color:#666; margin-top:4px;}
.rn-mark{display:inline-block; margin-right:4px; font-weight:700;}
.rn-mark--w{color:var(--pu);}
.rn-mark--g{color:#7B5BC4;}
.rn-mark--t{color:#C08A2E;}
.rn-mark--n{color:#999;}
.rn-why{margin-top:14px; text-align:center;}
.rn-why img{width:100%; max-width:480px;}

@media screen and (max-width:640px){
	#rn-comparison{padding:40px 0 0;}

	/* SPは横スクロールさせず画面幅に収める（3列なので余白を詰めれば入る） */
	.rn-compare{font-size:.72rem; width:100%; min-width:0;}
	.rn-compare th,.rn-compare td{padding:8px 6px;}
	.rn-compare thead th{padding:8px 3px; font-size:.8rem;}
	.rn-compare thead th.rn-compare__item,.rn-compare tbody th{width:21%;}
	.rn-compare tbody th{padding:8px 5px;}
	.rn-compare small{font-size:.65rem; margin-top:3px;}
	.rn-mark{margin-right:2px;}
	/* 長い英数字での桁溢れを防ぐ（区切りたい位置には <wbr> を入れてある） */
	.rn-compare td,.rn-compare th{overflow-wrap:break-word;}
}

/* =========================================================
   導入後のサポート
   ========================================================= */
#rn-support{background:var(--pink); padding:26px 0;}
#rn-support .rn-in{max-width:800px;}
.rn-support__box{background:#fff; border-radius:10px; padding:28px 30px 30px;}
/* Figma: ゴシック Bold / fs24 / #F76B86。アイコン47x45・文字との間隔20px */
.rn-support__ttl{text-align:center; color:#F76B86; font-size:1.5rem; font-weight:700; margin-bottom:22px; display:flex; align-items:center; justify-content:center; gap:20px;}
.rn-support__ttl img{width:46px;}
.rn-support__list{display:flex; gap:26px;}
.rn-support__list li{flex:1; display:flex; gap:14px; align-items:flex-start;}
.rn-support__ph{width:120px; flex:none;}
.rn-support__ph img{width:100%; border-radius:50%;}
.rn-support__tx h3{font-size:1rem; font-weight:700; line-height:1.6; margin-bottom:8px; text-decoration:underline; text-underline-offset:3px;}
.rn-support__tx p{font-size:.85rem; line-height:1.8; color:#444;}

@media screen and (max-width:640px){
	#rn-support{padding:18px 0;}
	#rn-support .rn-in{padding:0 14px;}
	.rn-support__box{padding:22px 18px 24px;}
	/* Figma は SP も fs24／アイコン47x45 で PC と同じ */
	.rn-support__list{display:block;}
	.rn-support__list li{margin-bottom:20px;}
	.rn-support__ph{width:96px;}
	.rn-support__tx h3{font-size:.92rem;}
	.rn-support__tx p{font-size:.8rem;}
}

/* =========================================================
   導入までの流れ
   ========================================================= */
#rn-flow{background:linear-gradient(90deg,#FAE2EC 0%,#DEF1FC 100%); padding:56px 0 60px;}
#rn-flow .rn-in{max-width:440px;}
.rn-flow__list li{margin-bottom:26px; position:relative;}
/* Figma: 幅170 高さ20 / #0096FF / 角丸14.5＝ピル / fs14 白。
   カード上端より11px 上に出す */
.rn-flow__step{
	position:absolute; top:-11px; left:50%; transform:translateX(-50%);
	width:170px; height:20px; box-sizing:border-box;
	background:#0096FF; color:#fff; font-size:14px; font-weight:500; letter-spacing:.04em;
	padding:0; border-radius:999px;
	/* 上下中央は flex で取る（line-height に依存させない） */
	display:flex; align-items:center; justify-content:center;
}
/* <p> なので #wrap.index p{line-height:1.9} に負けて文字が3px下にずれていた */
#wrap.index .rn-flow__step{line-height:1;}
.rn-flow__body{background:#fff; border-radius:10px; padding:22px 20px 20px; display:flex; align-items:center; gap:16px; box-shadow:0 2px 10px rgba(90,120,160,.10);}
.rn-flow__body img{width:46px; flex:none;}
.rn-flow__body h3{font-size:1.05rem; font-weight:700; margin-bottom:4px; color:#222;}
.rn-flow__body p{font-size:.85rem; line-height:1.7; color:#444;}

@media screen and (max-width:640px){
	#rn-flow{padding:40px 0 46px;}

	.rn-flow__body{padding:20px 14px 16px; gap:12px;}
	.rn-flow__body img{width:38px;}
	.rn-flow__body h3{font-size:.95rem;}
	.rn-flow__body p{font-size:.78rem;}
}

/* =========================================================
   よくある質問
   ========================================================= */
#rn-faq{background:#fff; padding:56px 0 60px;}
#rn-faq .rn-in{max-width:800px;}
.rn-faq dt{
	background:#fff; border-radius:6px; padding:16px 46px 16px 18px; margin-bottom:10px;
	font-size:1rem; font-weight:700; cursor:pointer; position:relative; line-height:1.5;
	box-shadow:0 2px 8px rgba(120,90,160,.08);
}
.rn-faq dt:before,.rn-faq dt:after{
	content:""; position:absolute; right:20px; top:50%; background:#8a8a8a; transition:.2s;
}
.rn-faq dt:before{width:13px; height:2px; margin-top:-1px;}
.rn-faq dt:after{width:2px; height:13px; margin-top:-7px; right:25px;}
.rn-faq dt.is-open:after{opacity:0;}
.rn-faq__q{color:var(--pu); font-weight:700; margin-right:10px;}
.rn-faq dd{display:none; padding:2px 18px 20px 18px; font-size:.9rem; line-height:1.9; color:#444; margin-bottom:10px;}
.rn-faq__a{color:#B37BC0; font-weight:700; margin-right:10px;}

@media screen and (max-width:640px){
	#rn-faq{padding:40px 0 46px;}

	.rn-faq dt{font-size:.9rem; padding:14px 40px 14px 14px;}
	.rn-faq dd{font-size:.82rem; padding:0 14px 18px;}
}

/* =========================================================
   会社概要
   ========================================================= */
#rn-company{background:#F2F2F2; padding:44px 0 50px;}
#rn-company .rn-in{max-width:600px;}
.rn-company__table{width:100%; border-collapse:collapse;}
.rn-company__table th,.rn-company__table td{border-bottom:1px solid #C9C9C9; padding:14px 4px; font-size:.9rem; line-height:1.7; vertical-align:top;}
.rn-company__table th{width:120px; font-weight:700; color:#333;}
.rn-company__table td{color:#333;}

@media screen and (max-width:640px){
	#rn-company{padding:34px 0 40px;}

	.rn-company__table th{width:86px; font-size:.82rem;}
	.rn-company__table td{font-size:.82rem;}
}

/* =========================================================
   追従CTA
   ========================================================= */
/* -----------------------------------------------------------
   追従CTA（SP専用）
   Figma 154:2432（440x150）の実測
     資料表紙   x23 y8  62x75（少し傾ける）
     導入前に〜 x94 y8  fs16 明朝 #595959
     5つの〜    x94 y31 fs20 明朝 #212121
     ラベル     x313 y8 / y37  103x24  #00A351 / #0096FF  fs12
     LINEボタン x49 y69 341x68
   PCでは表示しない（JS側でも is-show を付けない）
   ----------------------------------------------------------- */
#rn-fixcta{
	display:none;
	position:fixed; left:0; right:0; bottom:0; z-index:9999;
	background:rgba(235,249,253,.92); border-top:1px solid #CFE7EF;
	backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
	padding:min(1.3vw, 8px) 0 min(1.3vw, 13px);
	transform:translateY(120%); transition:transform .3s ease;
	box-shadow:0 -3px 14px rgba(0,0,0,.10);
}
#rn-fixcta.is-show{transform:translateY(0);}

.rn-fixcta__gift{
	display:flex; align-items:center; gap:min(2.045vw, 9px);
	width:min(90.227vw, 397px);
	/* Figma はボタンを資料表紙に20px 食い込ませる指定。
	   文字が詰まりすぎない範囲で11pxだけ食い込ませる */
	margin:0 auto max(-2.5vw, -11px);
	text-align:left;
}
/* 資料表紙のダミー。素材が来たら img に差し替え */
.rn-fixcta__thumb{
	width:min(14.091vw, 62px); height:min(17.045vw, 75px); flex:none;
	border-radius:2px; transform:rotate(-4deg);
	object-fit:cover; display:block; max-width:none;
	box-shadow:0 1px 5px rgba(0,0,0,.2);
}
.rn-fixcta__tx{flex:1; min-width:0;}
.rn-fixcta__sub{font-size:min(3.636vw, 16px); font-weight:700; color:#595959; line-height:1.4;}
.rn-fixcta__main{font-size:min(4.545vw, 20px); font-weight:700; color:#212121; line-height:1.4; white-space:nowrap;}
.rn-fixcta__tags{flex:none; display:flex; flex-direction:column; gap:min(1.136vw, 5px);}
.rn-fixcta__tags span{
	display:block; width:min(23.409vw, 103px); box-sizing:border-box;
	color:#fff; font-size:min(2.727vw, 12px); font-weight:700; line-height:1;
	padding:min(1.364vw, 6px) 0; border-radius:999px; text-align:center;
}
.rn-fixcta__tags .is-line{background:#00A351;}
.rn-fixcta__tags .is-free{background:#0096FF;}

.rn-linebtn--sm{width:min(77.5vw, 341px); position:relative;}   /* 資料表紙より前面に */

@media screen and (max-width:640px){
	#rn-fixcta{display:block;}
}

/* =========================================================
   既存セクションの調整
   ========================================================= */
#point{padding:56px 0 14px;}
#point h2{font-size:2rem; margin-bottom:36px; font-weight:500;}
#menu{padding:42px 0 56px;}   /* Figma: 背景の切り替わりから見出しまで51px */
#menu .item_read{text-align:center; color:var(--pu); font-size:1.35rem; line-height:1.9; margin-bottom:24px;}
#menu .item{width:760px; margin:0 auto;}
#case{padding:56px 0 40px;}
#spec .in{position:relative; z-index:2;}
#about{display:none;}

@media screen and (max-width:640px){
	#point{padding:40px 0 20px;}
	#point h2{font-size:1.5rem; margin-bottom:26px;}
	#menu{padding:6px 0 40px;}
	#menu .item_read{font-size:1rem;}
	#menu .item{width:100%;}
	#case{padding:40px 0 24px;}
	/* 追従CTAはフォーム到達時点で消えるため、コピーライト下の逃げ余白は不要 */
}

/* =========================================================
   レスポンシブ補正（既存の固定幅セクション）
   ========================================================= */
#wrap.index{overflow-x:hidden;}

@media screen and (min-width:641px){
	#point .in,
	#menu .in,
	#case .in,
	#spec .in{width:100%; max-width:1200px; margin:0 auto; padding:0 20px;}
	/* 機能紹介：Figma実測どおり 内容幅1200px／カード580px×2／横の間隔40px
	   （padding:0 20px ぶんを足して max-width:1240px にする） */
	#point .in{max-width:1240px;}
	#menu .in,#case .in,#spec .in{max-width:1040px;}
	#menu .item{width:100%; max-width:760px;}
	.formWrap__bg,#formWrap{max-width:100%;}
}

/* 1259px 以下では機能紹介を1カラムに（カード幅は維持） */
@media screen and (min-width:641px) and (max-width:1259px){
	#point ul{display:block;}
	#point li{width:580px; max-width:100%; margin:0 auto 50px;}
}

@media screen and (min-width:641px){
	#formWrap{width:100%; max-width:1000px;}
	.formTable,.formWrap__policy{width:100%; max-width:800px;}
	.formWrap__botton__submit{max-width:100%;}
}

/* 最終CTAとフォームの間の見出し調整 */
.formWrap__bg{padding:56px 0 60px;}
.formWrap__bg h2{color:var(--pu);}
@media screen and (max-width:640px){
	.formWrap__bg{padding:40px 0 44px;}
}

/* =========================================================
   FV：タブレット域（641–899px）
   vw比例だと文字が小さくなりすぎるため、SP寄りの積み上げレイアウトに切り替える
   ========================================================= */
@media screen and (min-width:641px) and (max-width:899px){
	#rn-fv{
		height:auto; padding:0 0 40px;
		background:#fff url(../img/rn/bg_fv.jpg) no-repeat center bottom;
		background-size:cover;
	}
	.rn-fv__visual{
		display:block; position:static; width:auto; height:0; padding-top:46%;
		background:url(../img/rn/fv_main.jpg) no-repeat center top; background-size:cover;
	}
	.rn-fv__body{width:100%; max-width:720px; margin:0 auto; padding:0 24px; text-align:center;}
	#rn-fv .rn-ribbon{
		margin:-24px auto 16px; width:auto; padding:9px 28px;
		font-size:1.15rem; border:none;
	}
	.rn-fv__catch{font-size:1.5rem; margin-bottom:16px; text-align:center;}
	.rn-fv__catch--big{font-size:1.95rem;}
	.rn-fv__row{display:block; width:100%; margin:0;}
	.rn-price{width:100%; padding:12px 14px; border-radius:12px;}
	.rn-price__laurel{width:30px;}
	.rn-price__left{width:auto;}
	.rn-price__body{gap:16px;}
	.rn-price__label{font-size:.95rem; padding:3px 18px;}
	.rn-price__before{font-size:.9rem;}
	.rn-price__num{font-size:3.6rem;}
	.rn-price__unit{font-size:1.6rem;}
	.rn-price__tax{font-size:.8rem;}
	.rn-fv__lead{
		box-sizing:border-box; width:auto; max-width:none;
		margin:18px 0 0; padding:0;
		background:none; backdrop-filter:none; -webkit-backdrop-filter:none;
		font-size:1rem; text-align:center;
	}
}

/* =========================================================
   style.css のリセット
     h1..h6,p,ul,li,table,th,td … { text-align:left }
   は要素自身への直接指定なので、親の text-align:center を継承できない。
   中央寄せが必要な要素に明示指定して打ち消す。
   ========================================================= */
.rn-ribbon,
.rn-solution__price,
.rn-solution__sub,
.rn-solution__read,
.rn-model__label,
.rn-model__num,
.rn-model__sub,
.rn-cta__ttl,
.rn-cta__note,
.rn-fixcta__tags span{text-align:center;}
/* 追従CTAの2行は左寄せ（リセットどおりでよいが意図を明示） */
.rn-fixcta__sub,
.rn-fixcta__main{text-align:left;}

/* #wrap.index p{line-height:1.9} の打ち消し */
#wrap.index .rn-fixcta__sub{line-height:1.4;}
#wrap.index .rn-fixcta__main{line-height:1.4;}
#wrap.index .rn-fixcta__tags span{line-height:1;}


/* =========================================================
   フォーム確認画面（mail.php）・サンキューページ（thanks.php）
   body.rn-formpage 配下だけに効かせる（LP本体には影響させない）
   ========================================================= */
.rn-formpage{background:linear-gradient(90deg,#FAE2EC 0%,#DEF1FC 100%);}
.rn-formpage #wrap{min-height:100vh; display:flex; flex-direction:column;}
.rn-fp{flex:1; padding:48px 20px 64px; text-align:center;}
.rn-fp__in{max-width:800px; margin:0 auto;}
.rn-fp .rn-h2{margin-bottom:24px;}

/* 入力 → 確認 → 完了 */
.rn-fp__steps{display:flex; max-width:420px; margin:0 auto 28px; padding:0; list-style:none;}
.rn-fp__steps li{flex:1; position:relative; list-style:none; text-align:center; font-size:.8rem; font-weight:700; line-height:1.4; color:#A3A3A3;}
.rn-fp__steps li span{
	position:relative; z-index:1; box-sizing:border-box;
	display:flex; align-items:center; justify-content:center;
	width:34px; height:34px; margin:0 auto 6px; border-radius:50%;
	background:#fff; border:2px solid #D8D8D8; color:#A3A3A3; font-size:.95rem; line-height:1;
}
.rn-fp__steps li:not(:last-child):after{
	content:""; position:absolute; top:16px; left:calc(50% + 17px); right:calc(-50% + 17px);
	height:2px; background:#D8D8D8;
}
.rn-fp__steps li.is-done{color:#C46BD1;}
.rn-fp__steps li.is-done span{background:#C46BD1; border-color:#C46BD1; color:#fff;}
.rn-fp__steps li.is-done:after{background:#C46BD1;}
.rn-fp__steps li.is-current{color:var(--pu);}
.rn-fp__steps li.is-current span{background:var(--pu); border-color:var(--pu); color:#fff;}

/* カード */
.rn-fp__card{background:#fff; border-radius:10px; box-shadow:0 4px 20px rgba(100,80,140,.08); padding:40px 48px 44px; text-align:left;}
.rn-fp__lead{text-align:center; font-size:.95rem; line-height:1.8; color:#444; margin-bottom:26px;}

/* 確認テーブル（confirmOutput() が tr/th/td を出力） */
.rn-fp .formTable{width:100%; max-width:none; margin:0; border-collapse:collapse;}
.rn-fp .formTable th,
.rn-fp .formTable td{border:none; border-bottom:1px solid #EEEAF0; padding:16px 8px; vertical-align:top; line-height:1.7; text-align:left;}
.rn-fp .formTable tr:first-child th,
.rn-fp .formTable tr:first-child td{border-top:1px solid #EEEAF0;}
.rn-fp .formTable th{width:30%; color:#6B5A70; font-size:.88rem; font-weight:700;}
.rn-fp .formTable td{width:70%; color:#212121; font-size:.95rem; word-break:break-word;}

/* ボタン：送信はLPのフォーム送信ボタンと同じ赤 */
.rn-fp__btns{margin-top:32px;}
.rn-fp__btns p{margin:0 0 14px; text-align:center;}
.rn-fp .rn-fp__submit,
.rn-fp .rn-fp__back{
	-webkit-appearance:none; appearance:none; box-sizing:border-box;
	display:block; width:100%; max-width:350px; margin:0 auto; border-radius:10px;
	font-weight:700; cursor:pointer; transition:opacity .2s, background-color .2s;
}
.rn-fp .rn-fp__submit{height:68px; border:none; background:#E40000; color:#fff; font-size:1.15rem; letter-spacing:.08em;}
.rn-fp .rn-fp__submit:hover{opacity:.85;}
.rn-fp .rn-fp__back{height:52px; border:1px solid #CFCFCF; background:#fff; color:#555; font-size:.95rem;}
.rn-fp .rn-fp__back:hover{background:#F6F6F6;}

/* 入力エラー */
.rn-fp__error{text-align:center; color:#D0021B; font-size:1rem; font-weight:700; margin-bottom:14px;}
.rn-fp .error_messe{text-align:center; color:#D0021B; font-size:.92rem; line-height:1.9;}

/* サンキュー */
.rn-fp__msg p{font-size:.95rem; line-height:1.9; color:#333; margin-bottom:12px;}
.rn-fp__msg p:last-of-type{margin-bottom:0;}
.rn-fp__tel{display:block; width:289px; max-width:100%; margin:24px auto 0;}
.rn-fp__tel img{display:block; width:100%;}
.rn-fp__line{margin-top:40px;}
.rn-fp__line-lead{text-align:center; color:var(--pu); font-size:1.15rem; font-weight:500; line-height:1.6; margin-bottom:14px;}
.rn-fp__line .rn-gift-card{box-shadow:0 4px 20px rgba(100,80,140,.08);}
.rn-fp__top{display:inline-block; margin-top:32px; color:#6B5A70; font-size:.9rem; text-decoration:underline; text-underline-offset:3px;}
.rn-fp__top:hover{text-decoration:none;}

@media screen and (max-width:640px){
	.rn-fp{padding:36px 16px 48px;}
	.rn-fp .rn-h2{font-size:1.35rem; margin-bottom:20px;}
	.rn-fp__steps{margin-bottom:22px;}
	.rn-fp__card{padding:26px 18px 30px;}
	.rn-fp__lead{font-size:.88rem; margin-bottom:18px;}
	.rn-fp .formTable th,
	.rn-fp .formTable td{display:block; width:100% !important; box-sizing:border-box;}
	.rn-fp .formTable th{border:none; border-top:1px solid #EEEAF0; padding:14px 2px 2px; font-size:.8rem;}
	.rn-fp .formTable td{border:none; padding:0 2px 14px; font-size:.95rem;}
	.rn-fp .formTable tr:first-child td{border-top:none;}
	.rn-fp .formTable tr:last-child td{border-bottom:1px solid #EEEAF0;}
	.rn-fp .rn-fp__submit{height:60px; font-size:1.05rem;}
	.rn-fp__msg p{font-size:.88rem;}
	.rn-fp__line-lead{font-size:1rem;}
}

/* =========================================================
   FV直下：収益イメージ（クイック版 / #rn-sim）
   既存の変数（--pu / --or / --bl）と .mincho を流用
   ========================================================= */
#rn-sim{background:linear-gradient(180deg,#FBE6EE 0%,#F3EAF7 50%,#E3F3FB 100%); padding:40px 0 44px; text-align:center;}
#rn-sim .rn-in{max-width:600px;}
#wrap.index #rn-sim p{line-height:1.6;}
#rn-sim .rn-sim__pill{display:inline-block; background:var(--pu); color:#fff; font-size:.85rem; font-weight:700; letter-spacing:.08em; padding:4px 20px; border-radius:999px; margin-bottom:12px;}
#rn-sim .rn-sim__ttl{font-size:1.5rem; font-weight:700; line-height:1.5; color:#222; margin-bottom:6px; letter-spacing:.02em;}
#rn-sim .rn-sim__ttl b{color:var(--pu); font-weight:700;}
#rn-sim .rn-sim__ttl em{font-style:normal; color:var(--or); font-size:1.35em; font-weight:700;}
#rn-sim .rn-sim__lead{font-size:.9rem; color:#555; margin-bottom:18px;}

#rn-sim .rn-sim__tabs{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:460px; margin:0 auto;}
#rn-sim .rn-sim__tabs button{
	-webkit-appearance:none; appearance:none; cursor:pointer;
	background:#fff; color:var(--pu); border:1.5px solid var(--pu); border-radius:999px;
	font-size:1rem; font-weight:700; line-height:1; padding:12px 0; font-family:inherit;
	transition:background .2s, color .2s;
}
#rn-sim .rn-sim__tabs button[aria-pressed="true"]{background:var(--pu); color:#fff;}
#rn-sim .rn-sim__tabs button:focus-visible{outline:3px solid var(--or); outline-offset:2px;}

#rn-sim .rn-sim__card{
	max-width:460px; margin:18px auto 0; padding:22px 18px 18px; border-radius:14px; border:2px solid transparent;
	background:linear-gradient(#fff,#fff) padding-box, var(--grad) border-box;
	box-shadow:0 2px 12px rgba(139,40,153,.10);
}
#rn-sim .rn-sim__big{display:flex; align-items:baseline; justify-content:center; flex-wrap:wrap; gap:4px; color:var(--or); font-family:"游明朝",YuMincho,"Hiragino Mincho ProN",serif;}
#rn-sim .rn-sim__num{font-size:4.2rem; font-weight:700; line-height:1; color:var(--or);}
#rn-sim .rn-sim__unit{font-size:1.2rem; font-weight:700; color:var(--or);}
#rn-sim .rn-sim__cost{font-size:.75rem; color:#666; margin-left:8px; font-family:inherit; font-family:sans-serif;}
#rn-sim .rn-sim__bar{position:relative; height:12px; border-radius:6px; background:#F0E6F3; margin:14px 0 6px; overflow:hidden;}
#rn-sim .rn-sim__bar i{position:absolute; left:0; top:0; bottom:0; border-radius:6px; background:var(--grad); transition:width .35s ease;}
#rn-sim .rn-sim__barlabel{display:flex; justify-content:space-between; font-size:.72rem; color:#666;}
#rn-sim .rn-sim__grid{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; text-align:left;}
#rn-sim .rn-sim__grid li{background:#F8F3FA; border-radius:8px; padding:9px 12px;}
#rn-sim .rn-sim__grid span{display:block; font-size:.72rem; color:#666; line-height:1.4;}
#rn-sim .rn-sim__grid b{font-size:1rem; font-weight:700; color:#222;}
#rn-sim .rn-note{max-width:460px; margin:12px auto 0; text-align:left;}

@media (prefers-reduced-motion:reduce){
	#rn-sim .rn-sim__bar i, #rn-sim .rn-sim__tabs button{transition:none;}
}
@media screen and (max-width:640px){
	#rn-sim{padding:32px 0 36px;}
	#rn-sim .rn-sim__ttl{font-size:1.3rem;}
	#rn-sim .rn-sim__num{font-size:3.6rem;}
	#rn-sim .rn-sim__grid b{font-size:.92rem;}
}