@charset "UTF-8";

/* -----------------------------------------------
FileName: colore_luxe.css
----------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Noto+Serif+JP:wght@200..900&family=Outfit:wght@100..900&family=Zen+Kaku+Gothic+New:wght@400;500&display=swap');


/*
font-family: "yu-mincho-pr6n", "Hiragino Mincho ProN", serif;
font-family: "Noto Serif JP", serif;
font-family: "Zen Kaku Gothic New", sans-serif;
font-family: "Marcellus", serif;
font-family: "Outfit", sans-serif;

文字色：#1F1F1F／アクセント：#EB7D0A／オレンジ背景：#F0960F
ベージュ背景：#F6F4EF／注意文言：#F24343
*/

#colore_luxe {
	font-size: 24px;
	color: #1F1F1F;
	font-weight: 400;
	font-family: "Zen Kaku Gothic New", 'Noto Sans JP', sans-serif;
	letter-spacing: .04em;
	line-height: 2.04;
	/* はみ出しを隠す。hiddenだとビフォーアフターのstickyが効かなくなるためclipを使用 */
	overflow-x: clip;
}

/* サイト共通の見出し・リストのスタイルをリセット */
#colore_luxe h2,
#colore_luxe h3,
#colore_luxe h4 {
	background: none;
	padding: 0;
	margin: 0;
	font-weight: 400;
	border: none;
}

#colore_luxe ul,
#colore_luxe ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* 上付き文字（(R)・注釈番号）。共通CSSでは親と同じ大きさになるため縮小する
   vertical-alignだと行の高さが広がるので、position で持ち上げる */
#colore_luxe sup {
	font-size: .5em;
	vertical-align: baseline;
	position: relative;
	top: -1em;
	letter-spacing: 0;
	line-height: 1;
}

#colore_luxe img {
	max-width: 100%;
	height: auto;
}

#colore_luxe .mhg_container {
	padding: 120px 0;
	position: relative;
	background-color: #fff;
}

#colore_luxe .mhg_container.bg1 {
	background-color: #F6F4EF;
}

#colore_luxe .mhg_container.bg2 {
	background-color: #F0960F;
}

#colore_luxe .mhg_container.bg3 {
	background-color: #1F1F1F;
}

#colore_luxe .mhg_container.bg4 {
	background: url("../../../img/usr/lp/colore_luxe/bg_marble.jpg") center center / cover no-repeat;
}

#colore_luxe .mhg_container.bg5 {
	background-image: linear-gradient(#fff, #F6F4EF);
}

#colore_luxe .contents {
	width: 1200px;
	box-sizing: border-box;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

/* 共通：英字ラベル＋明朝見出し */
#colore_luxe .lp-title {
	text-align: center;
	margin: 0 0 1.6em 0;
}

#colore_luxe .lp-title dt {
	font-family: "Outfit", sans-serif;
	font-size: .75em;
	color: #EB7D0A;
	line-height: 1;
	margin: 0 0 1.4em 0;
}

#colore_luxe .lp-title dd h2 {
	font-family: "Noto Serif JP", serif;
	font-size: 2em;
	line-height: 1.625;
	letter-spacing: .08em;
}

/* 共通：英字の大見出し */
#colore_luxe .en-title {
	font-family: "Marcellus", serif;
	font-size: 2.08333em;
	line-height: 1.26;
	letter-spacing: .08em;
	color: #EB7D0A;
	text-align: center;
	margin: 0 0 1em 0;
}

/* 共通：明朝のリード文 */
#colore_luxe .lead,
#colore_luxe #resultArea h2,
#colore_luxe #resultArea h3 {
	font-family: "Noto Serif JP", serif;
	font-size: 1.75em;
	line-height: 1.6;
	letter-spacing: .08em;
	text-align: center;
}

/* 共通：強調（オレンジ文字） */
#colore_luxe .orange {
	color: #EB7D0A;
}

/* 共通：注釈 */
#colore_luxe .note,
#colore_luxe small {
	display: block;
	font-size: .83333em;
	line-height: 1.55;
}

/* 共通：購入ボタン */
#colore_luxe .buyBtn {
	width: 470px;
	margin: 0 auto;
}

#colore_luxe .buyBtn a {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 70px;
	border: 1px solid #EB7D0A;
	background: transparent;
	color: #EB7D0A;
	text-decoration: none;
	line-height: 1;
	transition: background-color .3s, color .3s;
}

#colore_luxe .buyBtn a:hover {
	background: #EB7D0A;
	color: #fff;
}

/* キービジュアル */
#colore_luxe #keyImg figure img {
	display: block;
	width: 100%;
	height: auto;
}


/* 装飾の植物（PCは中央基準で配置） */
#colore_luxe .deco {
	position: absolute;
	z-index: 2;
	margin: 0;
	pointer-events: none;
}

#colore_luxe .deco img {
	display: block;
	width: 100%;
}

#colore_luxe .deco1 {
	width: 342px;
	top: -36px;
	left: calc(50% - 98px);
}

#colore_luxe .deco2 {
	width: 270px;
	top: 531px;
	left: calc(50% + 425px);
}

#colore_luxe .deco3 {
	width: 186px;
	top: 845px;
	left: calc(50% + 548px);
}

#colore_luxe .deco4 {
	width: 211px;
	top: 972px;
	left: calc(50% - 715px);
}

#colore_luxe .deco5 {
	width: 264px;
	top: 1225px;
	left: calc(50% + 338px);
}


/* イントロ */
#colore_luxe #introArea {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 -115px 0 0;
}

#colore_luxe #introArea h2 {
	font-family: "Noto Serif JP", serif;
	font-size: 2em;
	line-height: 1.625;
	letter-spacing: .08em;
	margin: 0 0 .8em 0;
}

#colore_luxe #introArea figure {
	width: 720px;
	margin: 0;
}

#colore_luxe #introArea figure img {
	display: block;
	width: 100%;
}


/* コンセプト */
#colore_luxe #conceptArea {
	text-align: center;
	margin: 95px 0 0 0;
}

#colore_luxe #conceptArea .lp-title {
	margin: 0 0 1.2em 0;
}

#colore_luxe #conceptArea .lp-title dd h2 {
	font-size: 1.66667em;
	line-height: 1.75;
}

#colore_luxe #conceptArea p {
	margin: 0 0 1em 0;
}


/* サロン写真 */
/* 上のローズマリー(装飾)より手前に表示する */
#colore_luxe #salonImg {
	display: flex;
	position: relative;
	z-index: 3;
}

#colore_luxe #salonImg figure {
	width: 50%;
	margin: 0;
}

#colore_luxe #salonImg figure img {
	display: block;
	width: 100%;
}


/* SALON QUALITY, AT HOME */
#colore_luxe .mhg_container.bg2:has(#qualityArea) {
	padding: 110px 0 105px 0;
}

#colore_luxe #qualityArea {
	text-align: center;
	color: #fff;
}

#colore_luxe #qualityArea h2 {
	font-family: "Marcellus", serif;
	font-size: 2.08333em;
	line-height: 1.26;
	letter-spacing: .08em;
	margin: 0 0 .6em 0;
}

#colore_luxe #qualityArea p {
	font-family: "Noto Serif JP", serif;
	font-size: 1.25em;
	line-height: 1.5;
	letter-spacing: .08em;
}


/* ビフォーアフター（スクロールでカーテン状に切り替え） */
#colore_luxe .mhg_container.bg3 {
	padding: 0;
}

/* スクロールする距離ぶんの高さを持たせる
   --ba-pt / --ba-pb：カードの上下の余白（デザインは140px）
   --ba-w：余白を除いた高さに収まるカード幅（カードは縦横比 3:4） */
#colore_luxe #beforeAfterArea {
	--ba-pt: 140px;
	--ba-pb: 140px;
	--ba-w: min(600px, calc((100vh - var(--ba-pt) - var(--ba-pb)) * .75));
	position: relative;
	height: 260vh;
}

/* 画面に貼り付く部分（画面いっぱいに貼り付けて、上に隙間ができないようにする） */
#colore_luxe #beforeAfterArea .ba-sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
}

/* スマホのアドレスバーの伸び縮みに対応 */
@supports (height: 100svh) {
	#colore_luxe #beforeAfterArea {
		--ba-w: min(600px, calc((100svh - var(--ba-pt) - var(--ba-pb)) * .75));
	}
	#colore_luxe #beforeAfterArea .ba-sticky {
		height: 100svh;
	}
}

/* 背景は画面全体、カードは上下の余白を除いた範囲の中央に置く */
#colore_luxe #beforeAfterArea .ba-step {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	box-sizing: border-box;
	padding: var(--ba-pt) 0 var(--ba-pb) 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: url("../../../img/usr/lp/colore_luxe/bg_beforeafter.jpg") center center / cover no-repeat;
}

#colore_luxe #beforeAfterArea .ba-step.is-after {
	background-image: url("../../../img/usr/lp/colore_luxe/bg_after.jpg");
	clip-path: inset(0 100% 0 0);
	z-index: 1;
}

/* カーテンの境目の縦線 */
#colore_luxe #beforeAfterArea .ba-border {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 1px;
	margin-left: -1px;
	background: rgba(255,255,255,.8);
	z-index: 2;
	opacity: 0;
	pointer-events: none;
}

/* カード内の文字はカード幅に比例させる（幅600pxで24px） */
#colore_luxe #beforeAfterArea figure {
	position: relative;
	width: var(--ba-w);
	margin: 0;
	font-size: calc(var(--ba-w) / 25);
	box-shadow: 0 5px 5px rgba(0,0,0,.16);
}

#colore_luxe #beforeAfterArea figure img {
	display: block;
	width: 100%;
}

#colore_luxe #beforeAfterArea figcaption {
	position: absolute;
	top: 1.04em;
	left: 1.46em;
	right: .83em;
	display: flex;
	align-items: flex-start;
}

#colore_luxe #beforeAfterArea figcaption .label {
	font-family: "Marcellus", serif;
	font-size: 1.66667em;
	line-height: 1.2;
	letter-spacing: .08em;
	width: 4.125em;
	flex-shrink: 0;
}

#colore_luxe #beforeAfterArea figcaption .text {
	font-size: .75em;
	line-height: 1.55;
	padding: .3em 0 0 0;
}

#colore_luxe #beforeAfterArea .note {
	position: absolute;
	right: .92em;
	bottom: .75em;
	font-size: .58333em;
	line-height: 1.7;
}


/* 購入特典 */
#colore_luxe #offerArea {
	display: flex;
	align-items: flex-start;
	padding: 0 0 0 100px;
}

#colore_luxe #offerArea figure {
	position: relative;
	width: 400px;
	margin: 0 80px 0 0;
}

#colore_luxe #offerArea figure p img {
	display: block;
	width: 100%;
}

#colore_luxe #offerArea figure .item {
	position: absolute;
	width: 240px;
	left: -116px;
	top: 140px;
}

#colore_luxe #offerArea .lp-title {
	text-align: left;
	margin: 0 0 1em 0;
}

#colore_luxe #offerArea .lp-title dd h2 {
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-size: 1.5em;
	line-height: 1.55;
	letter-spacing: .04em;
}

#colore_luxe #offerArea article p {
	line-height: 1.83;
}


/* お悩み */
#colore_luxe .mhg_container.bg4:has(#troubleArea) {
	padding: 110px 0 120px 0;
}

#colore_luxe #troubleArea .lp-title {
	margin: 0 0 .9em 0;
}

#colore_luxe #troubleArea ul {
	background: #fff;
	padding: 50px 100px;
	margin: 0 0 60px 0;
}

#colore_luxe #troubleArea ul li {
	position: relative;
	font-size: 1.41667em;
	font-weight: 500;
	line-height: 2.18;
	padding: 0 0 0 30px;
}

#colore_luxe #troubleArea ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.15em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #DC7832;
}

#colore_luxe #troubleArea .lead span {
	display: inline-block;
	margin: .35em 0 0 0;
}

#colore_luxe #troubleArea .lead strong {
	font-weight: 400;
	display: inline-block;
	background: #EB7D0A;
	color: #fff;
	padding: 0 .3em;
	margin: 0 .2em 0 0;
}


/* コロレシリーズの歴史 */
#colore_luxe .mhg_container.bg1:has(#aboutArea) {
	padding: 100px 0;
}

#colore_luxe #aboutArea {
	text-align: center;
}

#colore_luxe #aboutArea .lp-title {
	margin: 0 0 .6em 0;
}

#colore_luxe #aboutArea > p {
	line-height: 1.625;
	margin: 0 0 1.6em 0;
}

#colore_luxe #aboutArea ol {
	display: flex;
	justify-content: space-between;
	margin: 0 0 60px 0;
}

#colore_luxe #aboutArea ol li {
	position: relative;
	width: 380px;
}

/* カードの間に矢印 */
#colore_luxe #aboutArea ol li + li::before {
	content: "";
	width: 40px;
	height: 36px;
	background: url("../../../img/usr/lp/colore_luxe/angles-down-solid-full.png") center center / contain no-repeat;
	position: absolute;
	top: 192px;
	left: -15px;
	transform: translateX(-50%);
}

#colore_luxe #aboutArea ol figure {
	margin: 0 0 25px 0;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}

#colore_luxe #aboutArea ol figure img {
	display: block;
	width: 100%;
}

#colore_luxe #aboutArea ol dl dt {
	font-family: "Marcellus", serif;
	color: #EB7D0A;
	letter-spacing: .08em;
	line-height: 1.5;
}

#colore_luxe #aboutArea ol dl dd {
	font-size: .91667em;
	line-height: 1.4;
}

#colore_luxe #aboutArea ol dl dd strong {
	display: block;
	font-family: "Outfit", sans-serif;
	font-weight: 400;
	font-size: 1.54545em;
	color: #EB7D0A;
	line-height: 1.3;
	margin: 0 0 .25em 0;
}


/* 目指すヘアスタイル */
#colore_luxe .mhg_container:has(#targetArea) {
	padding: 135px 0 0 0;
}

#colore_luxe #targetArea {
	text-align: center;
}

#colore_luxe #targetArea h2 {
	font-family: "Marcellus", serif;
	font-size: 2.08333em;
	line-height: 1.26;
	letter-spacing: .08em;
	color: #EB7D0A;
	margin: 0 0 .5em 0;
}

#colore_luxe #targetArea .sub {
	font-family: "Noto Serif JP", serif;
	font-size: 1.25em;
	line-height: 1.5;
	letter-spacing: .08em;
	margin: 0 0 1.4em 0;
}

#colore_luxe #targetArea figure {
	margin: 0;
}

#colore_luxe #targetArea figure img {
	display: block;
	width: 100%;
}


/* 使用経過 */
#colore_luxe .mhg_container.bg5 {
	padding: 65px 0 110px 0;
}

#colore_luxe #resultArea .text {
	text-align: center;
	margin: 0 0 1em 0;
}

#colore_luxe #resultArea h2 {
	line-height: 1.857;
	margin: 1.3em 0 .9em 0;
}

#colore_luxe #resultArea .photo {
	position: relative;
	display: flex;
	justify-content: center;
	gap: 0 80px;
	margin: 0 0 40px 0;
}

#colore_luxe #resultArea .photo::after {
	content: "";
	width: 40px;
	height: 36px;
	background: url("../../../img/usr/lp/colore_luxe/angles-down-solid-full.png") center center / contain no-repeat;
	position: absolute;
	top: 222px;
	left: 50%;
	transform: translateX(-50%);
}

#colore_luxe #resultArea .photo figure {
	width: 360px;
	margin: 0;
	text-align: center;
}

#colore_luxe #resultArea .photo figure img {
	display: block;
	width: 100%;
	margin: 0 0 .8em 0;
}

#colore_luxe #resultArea h3 {
	margin: 0 0 1em 0;
}

#colore_luxe #resultArea .note {
	width: 1000px;
	margin: 0 auto;
}


/* リニューアルポイント */
#colore_luxe .mhg_container.bg2:has(#pointArea) {
	padding: 113px 0 120px 0;
}

#colore_luxe #pointArea {
	background: #fff;
	border-radius: 20px;
	padding: 85px 100px 100px 100px;
}

#colore_luxe #pointArea .lp-title {
	text-align: left;
	margin: 0;
	padding: 0 0 22px 0;
	border-bottom: 1px solid #EB7D0A;
}

#colore_luxe #pointArea article {
	padding: 40px 0 45px 0;
	border-bottom: 1px solid #C8C8C8;
}

#colore_luxe #pointArea article:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

#colore_luxe #pointArea article dl {
	display: flex;
}

#colore_luxe #pointArea article dt {
	width: 410px;
	flex-shrink: 0;
	font-size: 1.33333em;
	line-height: 1.625;
}

#colore_luxe #pointArea article dt span {
	display: block;
	font-family: "Outfit", sans-serif;
	font-size: .5625em;
	color: #EB7D0A;
	line-height: 1;
	margin: 0 0 1em 0;
}

/* 1行目の文字の上端を左の「POINT 01」の高さに揃える（行間の上半分ぶん引き上げ） */
#colore_luxe #pointArea article dd {
	flex: 1;
	padding: 0;
	margin-top: -.52em;
}

#colore_luxe #pointArea article dd small {
	margin: .3em 0 0 0;
}

#colore_luxe #pointArea article ul {
	display: flex;
	gap: 0 12px;
	margin: 30px 0 0 0;
}

#colore_luxe #pointArea article ul li {
	width: 241px;
}

#colore_luxe #pointArea article ul li img {
	display: block;
	width: 100%;
	border-radius: 9999px;
}


/* 4つの成分 */
#colore_luxe .mhg_container.bg4:has(#featureArea) {
	padding: 95px 0 120px 0;
}

#colore_luxe #featureArea .lp-title {
	text-align: left;
	margin: 0 0 1em 0;
}

#colore_luxe #featureArea .list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 30px 0;
}

#colore_luxe #featureArea article {
	box-sizing: border-box;
	width: 580px;
	background: #fff;
	border-radius: 10px;
	padding: 40px 40px 45px 40px;
}

#colore_luxe #featureArea article h3 {
	font-size: 1.41667em;
	line-height: 1.35;
	padding: 0 0 .5em 0;
	margin: 0 0 1em 0;
	border-bottom: 1px solid #EB7D0A;
}

#colore_luxe #featureArea article h3 span {
	display: block;
	font-family: "Outfit", sans-serif;
	font-size: .52941em;
	color: #EB7D0A;
	line-height: 1;
	margin: 0 0 .8em 0;
}

#colore_luxe #featureArea article p {
	line-height: 1.6;
	margin: 0 0 .4em 0;
}

#colore_luxe #featureArea article ul {
	font-size: .83333em;
	line-height: 1.55;
}


/* スタイリスト */
#colore_luxe .mhg_container:has(#stylistArea) {
	padding: 110px 0 110px 0;
}

#colore_luxe #stylistArea .lp-title {
	text-align: left;
	margin: 0 0 .8em 0;
}

#colore_luxe #stylistArea .inner {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

#colore_luxe #stylistArea article p {
	margin: 0 0 2.04em 0;
}

#colore_luxe #stylistArea .name dt {
	font-size: .83333em;
	line-height: 1.5;
	margin: 0 0 .5em 0;
}

#colore_luxe #stylistArea .name dd {
	font-size: 1.25em;
	font-weight: 500;
	line-height: 1.33;
}

#colore_luxe #stylistArea figure {
	width: 400px;
	margin: 0;
}

#colore_luxe #stylistArea figure img {
	display: block;
	width: 100%;
}

#colore_luxe #stylistArea + .lead {
	font-size: 1.58333em;
	line-height: 1.66;
	margin: 70px 0 0 0;
}


/* ラインナップ */
#colore_luxe .mhg_container.bg1:has(#lineupArea) {
	padding: 110px 0 105px 0;
}

#colore_luxe #lineupArea .en-title {
	margin: 0 0 .8em 0;
}

#colore_luxe #lineupArea .list {
	display: flex;
	justify-content: center;
	gap: 0 60px;
	margin: 0 0 55px 0;
}

#colore_luxe #lineupArea article {
	width: 470px;
	text-align: center;
	display: flex;
	flex-direction: column;
}

#colore_luxe #lineupArea article figure {
	margin: 0 0 40px 0;
	background: #fff;
}

#colore_luxe #lineupArea article figure img {
	display: block;
	width: 100%;
}

#colore_luxe #lineupArea article dt {
	font-size: .83333em;
	line-height: 1.55;
}

#colore_luxe #lineupArea article dt strong {
	display: block;
	font-family: "Outfit", sans-serif;
	font-weight: 400;
	font-size: 1.4em;
	color: #EB7D0A;
	line-height: 1.5;
	margin: 0 0 .2em 0;
}

#colore_luxe #lineupArea article dd {
	font-size: 1.08333em;
	line-height: 1.58;
	margin: 0 0 1.5em 0;
}

#colore_luxe #lineupArea .price {
	background: #fff;
	border-radius: 10px;
	box-sizing: border-box;
	min-height: 117px;
	padding: 28px 29px;
	text-align: left;
	font-size: .83333em;
	font-weight: 400;
	color: #1F1F1F;
	line-height: 1.5;
	margin: 0 0 50px 0;
}

#colore_luxe #lineupArea .price span {
	display: inline-block;
}

#colore_luxe #lineupArea .buyBtn {
	width: 100%;
	margin-top: auto;
}

#colore_luxe #lineupArea .caution {
	font-size: .91667em;
	font-weight: 700;
	color: #F24343;
	text-align: center;
	line-height: 1.9;
}


/* 購入特典（詳細） */
#colore_luxe .mhg_container:has(#presentArea) {
	padding: 115px 0 80px 0;
}

#colore_luxe #presentArea .en-title {
	margin: 0 0 .5em 0;
}

#colore_luxe #presentArea .inner {
	display: flex;
	align-items: flex-start;
	margin: 0 0 80px -115px;
}

#colore_luxe #presentArea .inner figure {
	width: 533px;
	flex-shrink: 0;
	margin: 0 80px 0 0;
}

#colore_luxe #presentArea .inner figure img {
	display: block;
	width: 100%;
}

#colore_luxe #presentArea .inner article p + p {
	margin: 2.04em 0 0 0;
}

#colore_luxe #presentArea .notice {
	margin: 80px 0 0 0;
	border: 3px solid #F24343;
	border-radius: 10px;
	padding: 35px 40px 40px 40px;
}

#colore_luxe #presentArea .notice h3 {
	font-weight: 700;
	color: #F24343;
	line-height: 1.75;
	margin: 0 0 .3em 0;
}

#colore_luxe #presentArea .notice li {
	font-size: .83333em;
	line-height: 1.75;
	padding: 0 0 0 1em;
	text-indent: -1em;
	margin: 0 0 .65em 0;
}

#colore_luxe #presentArea .notice li:last-child {
	margin-bottom: 0;
}



@media screen and (max-width: 640px) {

	#colore_luxe {
		font-size: 3.73333vw;
		line-height: 1.9;
	}

	#colore_luxe .mhg_container {
		padding: 13vw 0;
	}

	#colore_luxe .contents {
		width: 90%;
	}

	#colore_luxe .lp-title {
		margin: 0 0 1.4em 0;
	}

	#colore_luxe .lp-title dt {
		font-size: 3.2vw;
		margin: 0 0 1em 0;
	}

	#colore_luxe .lp-title dd h2 {
		font-size: 6.4vw;
		line-height: 1.6;
	}

	#colore_luxe .en-title {
		font-size: 8vw;
	}

	#colore_luxe .lead,
	#colore_luxe #resultArea h2,
	#colore_luxe #resultArea h3 {
		font-size: 5.33333vw;
	}

	#colore_luxe .note,
	#colore_luxe small {
		font-size: 2.93333vw;
	}

	#colore_luxe .buyBtn {
		width: 100%;
	}

	#colore_luxe .buyBtn a {
		height: 14vw;
	}

	/* 矢印はPC(40×36)と同じ比率で縮小 */
	#colore_luxe #aboutArea ol li + li::before,
	#colore_luxe #resultArea .photo::after {
		width: 5.33333vw;
		height: 4.8vw;
	}


	/* 装飾の植物：SPは画面幅基準で小さく配置 */
	#colore_luxe .deco1 {
		width: 30vw;
		top: -6vw;
		left: auto;
		right: 2vw;
	}

	/* SPは文字に重なるため非表示 */
	#colore_luxe .deco2,
	#colore_luxe .deco3,
	#colore_luxe .deco4 {
		display: none;
	}

	#colore_luxe .deco5 {
		width: 26vw;
		top: auto;
		bottom: -10vw;
		left: auto;
		right: -3vw;
	}


	/* イントロ */
	#colore_luxe #introArea {
		flex-direction: column-reverse;
		margin: 0;
	}

	#colore_luxe #introArea figure {
		width: 111.111%;
		margin: 0 -5.555% 8vw -5.555%;
	}

	#colore_luxe #introArea article {
		width: 100%;
	}

	#colore_luxe #introArea h2 {
		font-size: 6.4vw;
		line-height: 1.6;
		margin: 0 0 .6em 0;
	}


	/* コンセプト */
	#colore_luxe #conceptArea {
		margin: 16vw 0 0 0;
	}

	#colore_luxe #conceptArea .lp-title dd h2 {
		font-size: 5.33333vw;
	}

	#colore_luxe #conceptArea p {
		text-align: left;
	}


	/* サロン写真 */
	#colore_luxe #salonImg {
		flex-direction: column;
	}

	#colore_luxe #salonImg figure {
		width: 100%;
	}


	/* SALON QUALITY, AT HOME */
	#colore_luxe .mhg_container.bg2:has(#qualityArea) {
		padding: 13vw 0;
	}

	#colore_luxe #qualityArea h2 {
		font-size: 5.6vw;
	}

	#colore_luxe #qualityArea p {
		font-size: 4.26667vw;
	}


	/* ビフォーアフター */
	/* 上は固定ヘッダー(60px)に隠れないよう余白を多めに取る */
	#colore_luxe #beforeAfterArea {
		--ba-pt: calc(60px + 5vw);
		--ba-pb: 13vw;
		--ba-w: min(90vw, calc((100vh - var(--ba-pt) - var(--ba-pb)) * .75));
		height: 240vh;
	}

	@supports (height: 100svh) {
		#colore_luxe #beforeAfterArea {
			--ba-w: min(90vw, calc((100svh - var(--ba-pt) - var(--ba-pb)) * .75));
		}
	}

	/* iPhoneで「BEFORE」と説明文がくっつかないよう、ラベル幅を広げて間隔を空ける */
	#colore_luxe #beforeAfterArea figcaption .label {
		width: 4.9em;
	}

	/* 小さい画面では注釈が読めるよう少し大きめにする */
	#colore_luxe #beforeAfterArea figcaption .text {
		font-size: .85em;
	}

	#colore_luxe #beforeAfterArea .note {
		font-size: .7em;
	}


	/* 購入特典 */
	#colore_luxe #offerArea {
		flex-direction: column;
		padding: 0;
	}

	#colore_luxe #offerArea figure {
		width: 80%;
		margin: 0 0 8vw auto;
	}

	#colore_luxe #offerArea figure .item {
		width: 34vw;
		left: -16vw;
		top: auto;
		bottom: -6vw;
	}

	#colore_luxe #offerArea .lp-title dd h2 {
		font-size: 5.86667vw;
	}

	#colore_luxe #offerArea article p br {
		display: none !important;
	}


	/* お悩み */
	#colore_luxe .mhg_container.bg4:has(#troubleArea) {
		padding: 13vw 0;
	}

	#colore_luxe #troubleArea ul {
		padding: 6vw 5vw;
		margin: 0 0 10vw 0;
	}

	#colore_luxe #troubleArea ul li {
		font-size: 4vw;
		line-height: 1.6;
		padding: 0 0 0 5vw;
		margin: 0 0 .9em 0;
	}

	#colore_luxe #troubleArea ul li:last-child {
		margin-bottom: 0;
	}

	#colore_luxe #troubleArea ul li::before {
		width: 1.6vw;
		height: 1.6vw;
		top: .65em;
	}

	#colore_luxe #troubleArea .lead {
		font-size: 4.8vw;
	}

	#colore_luxe #troubleArea .lead strong {
		display: block;
		font-size: 4vw;
		letter-spacing: .04em;
		white-space: nowrap;
		margin: 0 0 .2em 0;
	}


	/* コロレシリーズの歴史 */
	#colore_luxe .mhg_container.bg1:has(#aboutArea) {
		padding: 13vw 0;
	}

	#colore_luxe #aboutArea > p {
		font-size: 3.46667vw;
	}

	#colore_luxe #aboutArea ol {
		gap: 0 5vw;
		margin: 0 0 10vw 0;
	}

	#colore_luxe #aboutArea ol li {
		width: calc((100% - 10vw) / 3);
	}

	/* カード画像の縦中央（画像の高さ約29.5vw）に合わせる */
	#colore_luxe #aboutArea ol li + li::before {
		top: 12.3vw;
		left: -2.5vw;
	}

	#colore_luxe #aboutArea ol figure {
		border-radius: 5px;
		margin: 0 0 3vw 0;
	}

	#colore_luxe #aboutArea ol dl dt {
		font-size: 3.73333vw;
	}

	#colore_luxe #aboutArea ol dl dd {
		font-size: 2.66667vw;
		letter-spacing: 0;
	}

	#colore_luxe #aboutArea ol dl dd strong {
		font-size: 3.73333vw;
	}

	/* 「カラーを楽しむ髪を、もっと美しく。」を強調するため大きく */
	#colore_luxe #aboutArea .lead {
		font-size: 6.4vw;
	}


	/* 目指すヘアスタイル */
	#colore_luxe .mhg_container:has(#targetArea) {
		padding: 13vw 0 0 0;
	}

	#colore_luxe #targetArea h2 {
		font-size: 5vw;
		letter-spacing: .04em;
		white-space: nowrap;
	}

	#colore_luxe #targetArea .sub {
		font-size: 4vw;
	}

	#colore_luxe #targetArea figure {
		margin: 0 -5.555%;
	}


	/* 使用経過 */
	#colore_luxe .mhg_container.bg5 {
		padding: 10vw 0 13vw 0;
	}

	#colore_luxe #resultArea h2 {
		font-size: 4.53333vw;
	}

	/* 「時間が経っても美しいヘアカラーをキープ」を強調するため大きく */
	#colore_luxe #resultArea h3 {
		font-size: 6.4vw;
	}

	#colore_luxe #resultArea .text {
		text-align: left;
	}

	#colore_luxe #resultArea .photo {
		gap: 0 10vw;
		margin: 0 0 8vw 0;
	}

	/* 写真の縦中央（写真の高さ約53.3vw）に合わせる */
	#colore_luxe #resultArea .photo::after {
		top: 24.3vw;
	}

	#colore_luxe #resultArea .photo figure {
		width: calc((100% - 10vw) / 2);
	}

	#colore_luxe #resultArea .note {
		width: 100%;
	}


	/* リニューアルポイント */
	#colore_luxe .mhg_container.bg2:has(#pointArea) {
		padding: 13vw 0;
	}

	#colore_luxe #pointArea {
		border-radius: 10px;
		padding: 9vw 5vw 10vw 5vw;
	}

	#colore_luxe #pointArea .lp-title {
		padding: 0 0 4vw 0;
	}

	#colore_luxe #pointArea article {
		padding: 7vw 0;
	}

	#colore_luxe #pointArea article dl {
		flex-direction: column;
	}

	#colore_luxe #pointArea article dt {
		width: 100%;
		font-size: 4.8vw;
		line-height: 1.5;
		margin: 0 0 .6em 0;
	}

	#colore_luxe #pointArea article dt span {
		font-size: 3.2vw;
		margin: 0 0 .8em 0;
	}

	#colore_luxe #pointArea article dd {
		padding: 0;
		margin-top: 0;
	}

	#colore_luxe #pointArea article ul {
		flex-wrap: wrap;
		gap: 2.5vw 2.5vw;
		margin: 5vw 0 0 0;
	}

	#colore_luxe #pointArea article ul li {
		width: calc((100% - 2.5vw) / 2);
	}


	/* 4つの成分 */
	#colore_luxe .mhg_container.bg4:has(#featureArea) {
		padding: 13vw 0;
	}

	#colore_luxe #featureArea .list {
		flex-direction: column;
		gap: 4vw 0;
	}

	#colore_luxe #featureArea article {
		width: 100%;
		padding: 6vw 5vw;
	}

	#colore_luxe #featureArea article h3 {
		font-size: 5.33333vw;
	}

	#colore_luxe #featureArea article h3 span {
		font-size: 3.2vw;
	}

	#colore_luxe #featureArea article ul {
		font-size: 3.2vw;
	}


	/* スタイリスト */
	#colore_luxe .mhg_container:has(#stylistArea) {
		padding: 13vw 0;
	}

	#colore_luxe #stylistArea .lp-title dd h2 {
		font-size: 5.6vw;
	}

	#colore_luxe #stylistArea .inner {
		flex-direction: column-reverse;
	}

	#colore_luxe #stylistArea figure {
		width: 60%;
		margin: 0 auto 8vw auto;
	}

	#colore_luxe #stylistArea article p {
		margin: 0 0 1.5em 0;
	}

	#colore_luxe #stylistArea .name dt {
		font-size: 3.2vw;
	}

	#colore_luxe #stylistArea .name dd {
		font-size: 4.8vw;
	}

	#colore_luxe #stylistArea + .lead {
		font-size: 4.8vw;
		margin: 12vw 0 0 0;
	}


	/* ラインナップ */
	#colore_luxe .mhg_container.bg1:has(#lineupArea) {
		padding: 13vw 0;
	}

	#colore_luxe #lineupArea .list {
		flex-direction: column;
		gap: 12vw 0;
		margin: 0 0 8vw 0;
	}

	#colore_luxe #lineupArea article {
		width: 100%;
	}

	#colore_luxe #lineupArea article figure {
		margin: 0 0 5vw 0;
	}

	#colore_luxe #lineupArea article dt {
		font-size: 3.2vw;
	}

	#colore_luxe #lineupArea article dt strong {
		font-size: 5.33333vw;
	}

	#colore_luxe #lineupArea article dd {
		font-size: 4.26667vw;
	}

	#colore_luxe #lineupArea .price {
		min-height: 0;
		padding: 4vw 5vw;
		font-size: 3.46667vw;
		margin: 0 0 5vw 0;
	}

	#colore_luxe #lineupArea .caution {
		font-size: 3.46667vw;
	}


	/* 購入特典（詳細） */
	#colore_luxe .mhg_container:has(#presentArea) {
		padding: 13vw 0;
	}

	#colore_luxe #presentArea .inner {
		flex-direction: column;
		margin: 0 0 10vw 0;
	}

	#colore_luxe #presentArea .inner figure {
		width: 111.111%;
		margin: 0 -5.555% 6vw -5.555%;
	}

	#colore_luxe #presentArea .inner article p + p {
		margin: 1.5em 0 0 0;
	}

	#colore_luxe #presentArea .notice {
		margin: 10vw 0 0 0;
		border-width: 2px;
		padding: 5vw;
	}

	#colore_luxe #presentArea .notice h3 {
		font-size: 4vw;
	}

	#colore_luxe #presentArea .notice li {
		font-size: 3.2vw;
	}

}