@charset "utf-8";

/* ============================================================
   マザークレイ ピンク LP — メルカート フリーページ用
   ------------------------------------------------------------
   ・すべてのルールを .lp_mc01 配下にスコープしている
     （メルカート共通CSSと相互に干渉させないため）
   ・社内フレームワーク（reset.css / base.css）への依存は
     このファイル冒頭に取り込み済み。iconfont.css は不要
   ・Swiper本体のCSSは別ファイル css/swiper.css
   ・素材パスはすべて /freepage/ad/motherclay01/ 起点
   ・更新時はHTML側の ?v= を必ず更新する（CDNキャッシュ対策）
   ============================================================ */


/* // メルカート共通ヘッダー・フッターの非表示
   ------------------------------------------------------------
   フリーページ側は「共通ヘッダーを表示する」設定にしたうえで、
   見た目だけをここで隠す。こうすることで共通ヘッダーが読み込む
   jQuery と計測タグ（GA4 / GTM）は出力されたまま、デザインどおり
   ヘッダー・フッターの無い見た目にできる。
   ※このCSSはこのLP専用。他ページで読み込むとヘッダーが消えます
----------------------------------------------- */
#header-wrapper,
.wrapper > .pane-footer {
	display: none !important;
}
/* サイト共通のポップアップ（MATTRZ CX で配信）を、この広告LPでは出さない。
   ・フレグランス診断タブ（campaign-143320）… 右端中央
   ・新規会員登録500ptプレゼント（campaign-147016）… 左下。SPでは下部の
     追従CVバナーに重なり、価格の訴求が隠れてしまう
   キャンペーンごとに #mattrz-cx-campaign-element-campaign-<ID> が body直下に
   作られ、位置はインラインstyleで指定されるため、前方一致＋!important で消す。
   （IDはキャンペーンを作り直すと変わるので、個別指定ではなく前方一致にしている）
   ※このCSSはこのLPだけが読み込むので、他ページのポップアップには影響しません */
[id^="mattrz-cx-campaign-element-"] {
	display: none !important;
}
/* Cookie同意バー。cookie_policy.js が jQuery の .show() で
   インラインの display:block を付けるため !important が要る。
   このバーは「継続して閲覧する場合は同意とみなす」という通知型で、
   同意ボタンは cookieconsent クッキーを保存して閉じるだけ。
   計測タグの発火を制御してはいないので、隠しても計測には影響しない */
#cookieBox {
	display: none !important;
}
/* 固定ヘッダーぶんの余白（common.css の #header-wrapper + *{margin:109px 0 0}）と、
   本文コンテナの幅制限を解除する。貼り付けたHTMLが .wrapper 直下に来る場合と
   .page_contents に入る場合の両方があるため、二つとも対象にしている。
   overflow:visible はPC横バナーの position:sticky を効かせるために必須 */
#header-wrapper + *,
.wrapper > .page_contents {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
}
/* .page_contents が使われる場合だけ、その typography 指定
   （user.css の text-align:justify / line-height:200%）を初期値へ戻す。
   ※ .lp_mc01 自身には絶対に当てないこと。LP本来の line-height:30px /
     letter-spacing:0.45px まで消してしまい、全体の行間が変わる */
.wrapper > .page_contents {
	text-align: start;
	line-height: normal;
	letter-spacing: normal;
}
.wrapper {
	background-color: #FAF8EB !important;
}


/* // メルカート共通CSSがLP内の要素にも当たる分の打ち消し
   ------------------------------------------------------------
   実際にLPの要素にマッチしているルールだけを対象にしている
   （base.css の h2 / h2 span / h3 / a / img と base_misc.css の .badge）。
   詳細度は (0,1,1)〜(0,2,0) に抑えてあるので、LP本来のクラス指定
   （.lp_faq--a .head など）はそのまま効く。
   ※ここを「LPで使っているクラス名を全部リセット」のように広げると、
     .cv_hover の position:relative のような自前の指定まで消してしまう。
----------------------------------------------- */
/* サイト共通CSSが body に text-align:justify を当てており、LP全体が
   均等割り付けになるため戻す（単体HTMLは start） */
.lp_mc01 {
	text-align: start;
}
.lp_mc01 h2,
.lp_mc01 h3 {
	margin: 0;
	font-size: 100%;
}
.lp_mc01 h2 span {
	display: inline;
	font-size: 100%;
	line-height: normal;
	letter-spacing: normal;
}
.lp_mc01 a {
	color: inherit;
	text-decoration: none;
}
.lp_mc01 img {
	max-width: none;
}
/* common.css の body a:hover{opacity:.7} が、ホバー効果を切ってある
   CVリンク（.nohover）にも当たってしまう。これを打ち消さないと
   ・バナー全体が薄くなる（ボタンだけを明るくしたいのに全体が反応する）
   ・opacity<1 が backdrop-filter の backdrop root を作るため、
     ボタンを明るくする ::after がまったく効かなくなる
   の2つが同時に起きる。詳細度は (0,3,1) で body a:hover (0,1,2) に勝つ */
.lp_mc01 a.nohover:hover,
.lp_mc01 a.nohover:focus {
	opacity: 1;
	text-decoration: none;
}
.lp_mc01 .badge {
	display: block;
	margin: 0;
	padding: 0;
	min-width: 0;
	line-height: inherit;
	white-space: normal;
	background: none;
	border-radius: 0;
	color: inherit;
	font-size: 100%;
	font-weight: inherit;
	text-align: inherit;
	text-shadow: none;
}


/* // 単体HTML（/freepage/ad/motherclay01/motherclay01.html）として開くときの土台
   ------------------------------------------------------------
   body に .lp_standalone が付いているときだけ効く。
   このCSSをメルカートのフリーページに読ませても、店舗側の
   背景や余白には影響しない */
body.lp_standalone {
	margin: 0;
	padding: 0;
	background-color: #FAF8EB;
}


/* // reset — reset.css からLPに必要な分だけ取り込み（スコープ済み）
----------------------------------------------- */
.lp_mc01,
.lp_mc01 *,
.lp_mc01 *::before,
.lp_mc01 *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.lp_mc01 h1,
.lp_mc01 h2,
.lp_mc01 h3,
.lp_mc01 h4,
.lp_mc01 h5,
.lp_mc01 h6,
.lp_mc01 p,
.lp_mc01 blockquote,
.lp_mc01 a,
.lp_mc01 img,
.lp_mc01 dl,
.lp_mc01 dt,
.lp_mc01 dd,
.lp_mc01 ol,
.lp_mc01 ul,
.lp_mc01 li,
.lp_mc01 section,
.lp_mc01 article,
.lp_mc01 header,
.lp_mc01 footer,
.lp_mc01 nav,
.lp_mc01 figure,
.lp_mc01 video {
	border: 0;
	font-size: 100%;
	font-style: normal;
	vertical-align: baseline;
	word-break: normal;
	word-wrap: break-word;
}
/* LPのCSSは「見出しが太字でない・左寄せ」を前提に書かれている */
.lp_mc01 h1,
.lp_mc01 h2,
.lp_mc01 h3,
.lp_mc01 h4,
.lp_mc01 h5,
.lp_mc01 h6,
.lp_mc01 p,
.lp_mc01 li,
.lp_mc01 dt,
.lp_mc01 dd {
	text-align: left;
}
.lp_mc01 h1,
.lp_mc01 h2,
.lp_mc01 h3,
.lp_mc01 h4,
.lp_mc01 h5,
.lp_mc01 h6 {
	font-weight: 400;
}
.lp_mc01 span,
.lp_mc01 em,
.lp_mc01 strong {
	border: 0;
	font-style: normal;
	vertical-align: baseline;
	font-size: 100%;
}
.lp_mc01 article,
.lp_mc01 aside,
.lp_mc01 figure,
.lp_mc01 figcaption,
.lp_mc01 footer,
.lp_mc01 header,
.lp_mc01 nav,
.lp_mc01 section {
	display: block;
}
.lp_mc01 ul,
.lp_mc01 ol {
	list-style: none;
}
.lp_mc01 img {
	border: 0;
}
.lp_mc01 a:focus {
	outline: none;
}


/* // swiper — base.css の独自スタイル分（本体CSSは css/swiper.css）
----------------------------------------------- */
.lp_mc01 .swiper-outer {
	position: relative;
	padding-bottom: 18px;
}
.lp_mc01 .swiper-container {
	position: relative;
	padding: 10px 0;
	margin-top: -10px;
}
.lp_mc01 .swiper-slide {
	width: auto;
}
.lp_mc01 .swiper-pagination {
	position: absolute;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	bottom: 5px;
	left: 50%;
	transform: translateX(-50%);
	gap: 5px 0;
}
.lp_mc01 .swiper-pagination-bullet {
	width: 30px;
	height: 1px;
	opacity: 0.16;
	margin: 0 2px;
	background-color: #000;
	border-radius: 0;
}
.lp_mc01 .swiper-pagination-bullet-active {
	background-color: #777;
	opacity: 1;
	height: 2px;
}




/* // base
----------------------------------------------- */
.lp_mc01 {
	--c0: #333;
	--c1: #F88379;
	--c1-hv: color-mix(in srgb, var(--c1) 80%, #FFF);
	--sitebg1: #FAF8EB;
	--lp-w: 540px;
	/* LPの基準単位。540pxデザインの1pxぶん。画面幅が540未満のときは幅に比例して縮む
	   （アートは画像で幅追従するので、テキストや余白も同じ比率で追従させる）
	   min() が使えない環境では 1px にフォールバックする（下の @supports で上書き） */
	--u: 1px;
	--fs0: calc(15 * var(--u));

	--ff-lp-min: "Shippori Mincho", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
	--ff-lp-go: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
	--ff-lp-num: "Jost", "Zen Kaku Gothic New", sans-serif;
}
@supports (width: min(1px, 1vw)) {
	.lp_mc01 {
		--u: min(1px, 0.185185vw);
	}
}
.lp_mc01 {
	color: var(--c0);
	font-family: var(--ff-lp-min);
	font-weight: 400;
	line-height: 200%;
	font-size: var(--fs0);
	background-color: var(--sitebg1);
	letter-spacing: 0.03em;
}
/* 追従バナーぶんの下余白は不要（最後のCVセクションでバナーを引っ込めるため、
   ページ末尾でバナーがフッターに被ることがない）。付けるとフッター下に地色が残る */
.lp_mc01 a {
	color: var(--c0);
	text-decoration: none;
}
.lp_mc01 a:not(.nohover):hover {
	opacity: 70%;
}
.lp_mc01 img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}


/* // lp_page — LPの外枠（本文カラム540px・地色は#FAF8EB）
----------------------------------------------- */
.lp_page {
	position: relative;
	width: 100%;
	max-width: var(--lp-w);
	margin: 0 auto;
	background-color: #FFF;
	padding-bottom: 0;
}


/* // lp_sec--a — アート画像で構成するセクション
----------------------------------------------- */
.lp_sec--a {
	position: relative;
	font-size: 0;
	line-height: 0;
}
.lp_sec--a .art {
	display: block;
	width: 100%;
	height: auto;
}
.lp_sec--a .cv_hit {
	position: absolute;
	display: block;
	z-index: 2;
}


/* // lp_fv--a — FV（左下の楕円を動画でループ再生）
----------------------------------------------- */
.lp_fv--a {
	overflow: hidden;
}
/* デザイン実測（表示540px換算）
   楕円 249×240 ／ 中心(94.5, 820) ／ 白リング6px(inside) ／ 左端はLPの外にはみ出して欠ける
   → リングの内側 237×228 に動画を敷く（0.5pxだけリングに潜り込ませて継ぎ目を消す）
   　 左のはみ出しは .lp_fv--a の overflow で切る */
.lp_fv--a .clay_mv {
	position: absolute;
	left: -4.537%;
	top: 74.263%;
	width: 44.074%;
	aspect-ratio: 238 / 229;
	overflow: hidden;
	border-radius: 50%;
	z-index: 1;
	pointer-events: none;
}
.lp_fv--a .clay_mv video {
	display: block;
	position: absolute;
	left: 0;
	top: -1.965%;
	width: 100%;
	height: auto;
}
/* 丸に重なるラベルは動画より前面に出す */
.lp_fv--a .fv_label {
	position: absolute;
	left: 17.037%;
	height: auto;
	z-index: 2;
}
.lp_fv--a .fv_label._1 {
	top: 90.316%;
	width: 37.778%;
}
.lp_fv--a .fv_label._2 {
	top: 93.790%;
	width: 20.741%;
}


/* // lp_head--a — ページ上部のロゴ
----------------------------------------------- */
.lp_head--a {
	background-color: #FFF;
}


/* // lp_need--a — でも、必要なのは（ふわっと表示）
----------------------------------------------- */
/* 要素のふわっと表示（スクロールで順に）。位置はデザイン実測。
   --rv-d = 表示ディレイ / --rv-t = 表示にかける時間。JSは .js_rv に _on を付ける */
.js_rv .rv {
	position: absolute;
	height: auto;
	opacity: 0;
	transform: translateY(calc(16 * var(--u)));
	transition: opacity var(--rv-t, 1.2s) ease-out, transform var(--rv-t, 1.2s) cubic-bezier(0.22, 0.61, 0.36, 1);
	transition-delay: var(--rv-d, 0s);
	will-change: opacity, transform;
}
.lp_need--a .rv._1 {
	left: calc(67 * var(--u));
	top: calc(358 * var(--u));
	width: calc(406 * var(--u));
}
.lp_need--a .rv._2 {
	--rv-d: 0.25s;
	--rv-t: 1.8s;
	left: calc(15 * var(--u));
	top: calc(445 * var(--u));
	width: calc(515 * var(--u));
}
.js_rv._on .rv {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.js_rv .rv {
		opacity: 1;
		transform: none;
		transition: none;
	}
}


/* // lp_pinkclay--a — 落として、与えるピンククレイ
----------------------------------------------- */
/* ふわっと表示: 手＋商品（デザイン y12946〜）／テキスト（y13018〜）。
   セクション起点は design 12887 */
.lp_pinkclay--a .rv._1 {
	left: calc(228 * var(--u));
	top: calc(59 * var(--u));
	width: calc(312 * var(--u));
}
.lp_pinkclay--a .rv._2 {
	--rv-d: 0.25s;
	--rv-t: 1.8s;
	left: calc(47 * var(--u));
	top: calc(131 * var(--u));
	width: calc(441 * var(--u));
}


/* // lp_step--a — 5分1ステップ（Before / After）
----------------------------------------------- */
.lp_step--a {
	background-color: #FFF;
	/* 注意書きの下に余白を取る（ご指示） */
	padding-bottom: calc(60 * var(--u));
}
.lp_step--a .art {
	display: block;
	width: 100%;
	height: auto;
}
.lp_step--a .note {
	font-family: var(--ff-lp-go);
	width: 88.889%;
	max-width: calc(480 * var(--u));
	margin: calc(7 * var(--u)) auto 0;
	font-size: calc(13 * var(--u));
	line-height: 160%;
	letter-spacing: 0;
	/* ページャーとの間を詰めて右よせ（ご指示） */
	text-align: right;
}


/* // before_after — Before / After スライダー
----------------------------------------------- */
.lp_mc01 .before_after {
	display: block;
	width: 88.889%;
	max-width: calc(480 * var(--u));
	margin: 0 auto;
	text-align: center;
}
.lp_mc01 .before_after .swiper_item {
	line-height: 1;
	width: 100%;
}
.lp_mc01 .before_after .swiper_item > .wrap {
	display: block;
	width: 100%;
	position: relative;
}
.lp_mc01 .before_after:not(._none) .swiper_item > .wrap {
	cursor: pointer;
}
.lp_mc01 .before_after .swiper_item > .wrap .image {
	width: 100%;
	overflow: hidden;
}
.lp_mc01 .before_after .swiper_item > .wrap .image img {
	display: block;
	width: 100%;
	height: auto;
}
.lp_mc01 .before_after .swiper-pagination {
	position: static;
	left: auto;
	bottom: auto;
	transform: none;
	justify-content: center;
	width: 100%;
	margin-top: calc(10 * var(--u));
	padding: 0;
	line-height: 0;
}
.lp_mc01 .before_after .swiper-pagination-bullet {
	width: calc(12 * var(--u));
	height: calc(12 * var(--u));
	border: 1px solid #B0A198;
	border-radius: 50%;
	box-sizing: border-box;
	opacity: 1;
	margin: 0 calc(8 * var(--u));
	/* base.css の .swiper-pagination-bullet が !important 指定のため打ち消す */
	background-color: #FFF !important;
}
.lp_mc01 .before_after .swiper-pagination-bullet-active {
	height: calc(12 * var(--u));
	border-color: var(--c1);
	background-color: var(--c1) !important;
}

/* _none */
.lp_mc01 .before_after._none .swiper-wrapper {
	display: flex;
	justify-content: center;
}


/* // lp_feature--a — 選ばれる3つの特長
----------------------------------------------- */
.lp_feature--a {
	background-color: #E5E6E7;
}
.lp_feature--a .art {
	display: block;
	width: 100%;
	height: auto;
}
.lp_feature--a .card_tx {
	/* 03 の白カード内。上下は画像で、この帯だけ HTML テキスト */
	width: 88.889%;
	max-width: calc(480 * var(--u));
	margin: 0 auto;
	background-color: #FFF;
	padding: calc(8 * var(--u)) calc(20 * var(--u));
	box-sizing: border-box;
}
.lp_feature--a .card_tx .tx {
	font-family: var(--ff-lp-go);
	text-align: center;
	font-size: calc(17.5 * var(--u));
	line-height: 171%;
	letter-spacing: 0;
}


/* // lp_tsumari--a — つまり（3つの働き）
----------------------------------------------- */
.lp_tsumari--a {
	/* 「つまり」バッジ・商品写真・下部のコピーは背景画像。3本の帯のみ HTML で載せる */
	/* 背景色は背景画像の下端と同色にする */
	/* バッジを最前面に重ねるための位置基準 */
	position: relative;
	background-color: #E5EEF4;
	background-image: url(/freepage/ad/motherclay01/img/tsumari_bg.jpg?v=260831s);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
	/* セクションの高さを背景画像と一致させる（テキスト量やフォント差で高さがブレて
	   背景が切れる／地色の帯が出るのを防ぐ） */
	box-sizing: border-box;
	min-height: calc(1199 * var(--u));
	padding: 7.408% 0 160.556%;
}
/* 「つまり」バッジは01帯に前面で重なるため、背景焼き込みと同画素のオーバーレイを重ねる */
.lp_tsumari--a .badge {
	/* 影ぶんの余白を含む 150×150（デザイン x195,y6401 起点） */
	position: absolute;
	left: calc(195 * var(--u));
	top: calc(-90 * var(--u));
	width: calc(150 * var(--u));
	height: auto;
	/* Figma: DROP_SHADOW radius10 / rgba(0,0,0,.25) / offset0 */
	filter: drop-shadow(0 0 calc(5 * var(--u)) rgba(0, 0, 0, 0.25));
	z-index: 2;
}
.lp_tsumari--a .list {
	position: relative;
	width: calc(480 * var(--u));
	margin: 0 auto;
	z-index: 1;
}
.lp_tsumari--a .item {
	/* デザイン実測: 帯480×90・間隔10・番号 Cormorant SC 42 #825F4A（x25,y16）・
	   斜線 42×42 45°(x58,y20) #A5A5A5・本文 24/130% #333（x111・上下センター） */
	position: relative;
	display: flex;
	align-items: center;
	min-height: calc(90 * var(--u));
	background-color: #FFF;
	padding: calc(10 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u)) calc(111 * var(--u));
	box-sizing: border-box;
}
.lp_tsumari--a .item + .item {
	margin-top: calc(10 * var(--u));
}
.lp_tsumari--a .num {
	position: absolute;
	left: calc(25 * var(--u));
	top: calc(8 * var(--u));
	color: #825F4A;
	font-family: "Cormorant SC", var(--ff-lp-min);
	font-weight: 600;
	font-size: calc(42 * var(--u));
	line-height: 100%;
	letter-spacing: 0;
}
/* 斜線: デザイン実測 42×42 の対角（帯の左上から left58 / top20）。
   1pxの線を45°に倒して、両端を (58,62)-(100,20) に合わせる */
.lp_tsumari--a .item::before {
	content: "";
	position: absolute;
	left: calc(79 * var(--u));
	top: calc(41 * var(--u));
	width: calc(1 * var(--u));
	height: calc(59.4 * var(--u));
	background-color: #A5A5A5;
	transform: translate(-50%, -50%) rotate(45deg);
}
.lp_tsumari--a .tx {
	font-size: calc(24 * var(--u));
	line-height: 130%;
	letter-spacing: 0;
	font-weight: 500;
}
.lp_tsumari--a .tx .c1 {
	color: #F88379;
}
/* ふわっと表示: 商品＋泡（デザイン y6840〜）／締めコピー（y7386〜）。
   セクション起点は design 6491 */
.lp_tsumari--a .rv._1 {
	left: 0;
	top: calc(349 * var(--u));
	width: calc(540 * var(--u));
	z-index: 1;
}
.lp_tsumari--a .rv._2 {
	--rv-d: 0.25s;
	--rv-t: 1.8s;
	left: calc(40 * var(--u));
	top: calc(895 * var(--u));
	width: calc(460 * var(--u));
	z-index: 1;
}


/* // lp_blend--a — 特徴ある3種のクレイを独自のバランスで配合
----------------------------------------------- */
.lp_blend--a {
	background-color: #F4FAFF;
}
.lp_blend--a .art {
	display: block;
	width: 100%;
	height: auto;
}
.lp_blend--a .art._topics {
	margin-top: calc(24 * var(--u));
}
.lp_blend--a .list {
	width: 88.889%;
	max-width: calc(480 * var(--u));
	margin: 0 auto;
	padding-top: calc(14 * var(--u));
}
.lp_blend--a .item + .item {
	margin-top: calc(32 * var(--u));
}
.lp_blend--a .title {
	font-weight: 600;
	font-size: calc(24 * var(--u));
	line-height: 130%;
	letter-spacing: 0.02em;
	padding-bottom: calc(7 * var(--u));
	border-bottom: 1px solid var(--c0);
}
.lp_blend--a .body {
	display: flex;
	align-items: flex-start;
	gap: calc(25 * var(--u));
	margin-top: calc(21 * var(--u));
}
.lp_blend--a .photo {
	flex-shrink: 0;
	width: calc(160 * var(--u));
	max-width: 33.334%;
	height: auto;
}
.lp_blend--a .tx {
	font-family: var(--ff-lp-go);
	flex: 1;
	min-width: 0;
	font-size: calc(20 * var(--u));
	line-height: 170%;
	letter-spacing: 0.02em;
}
.lp_blend--a .topics_tx {
	/* TOPICS の白カード内。上下は画像で、この帯だけ HTML テキスト。
	   カード左右の影は画像から切り出した2px帯（topics_side.png）を縦リピートして連続させる */
	background-image: url(/freepage/ad/motherclay01/img/topics_side.png?v=260831m);
	background-repeat: repeat-y;
	background-size: 100% auto;
	padding: calc(3 * var(--u)) 0 calc(9 * var(--u));
}
.lp_blend--a .topics_tx .tx_in {
	width: 88.889%;
	max-width: calc(480 * var(--u));
	margin: 0 auto;
	padding: 0 calc(21 * var(--u));
	box-sizing: border-box;
}
.lp_blend--a .topics_tx .tx {
	font-family: var(--ff-lp-go);
	font-size: calc(17.5 * var(--u));
	line-height: 177%;
	letter-spacing: -0.02em;
}
.lp_blend--a .topics_tx .tx strong {
	color: var(--c1);
	font-weight: 500;
}


/* // lp_honey--a — はちみつセラム処方（配合成分）
----------------------------------------------- */
.lp_honey--a {
	background-color: #FFF;
	padding-bottom: calc(26 * var(--u));
}
.lp_honey--a .art {
	display: block;
	width: 100%;
	height: auto;
}
.lp_honey--a .list {
	width: 88.889%;
	max-width: calc(480 * var(--u));
	margin: 0 auto;
	padding-top: calc(22 * var(--u));
}
.lp_honey--a .item + .item {
	margin-top: calc(33 * var(--u));
}
.lp_honey--a .title {
	font-weight: 600;
	font-size: calc(24 * var(--u));
	line-height: 130%;
	letter-spacing: 0.02em;
	padding-bottom: calc(7 * var(--u));
	border-bottom: 1px solid var(--c0);
}
.lp_honey--a .title .mark {
	font-size: calc(15 * var(--u));
	vertical-align: 4px;
	margin: 0 calc(1 * var(--u));
}
.lp_honey--a .body {
	display: flex;
	align-items: flex-start;
	gap: calc(21 * var(--u));
	margin-top: calc(21 * var(--u));
}
.lp_honey--a .photo {
	flex-shrink: 0;
	width: calc(170 * var(--u));
	max-width: 35.417%;
	height: auto;
}
.lp_honey--a .tx {
	font-family: var(--ff-lp-go);
	flex: 1;
	min-width: 0;
	font-size: calc(20 * var(--u));
	line-height: 170%;
	letter-spacing: 0.02em;
}
.lp_honey--a .note {
	/* デザイン実測：3行とも左端 x=296 で揃える（コンテナ左端30px + 266px） */
	width: 88.889%;
	max-width: calc(480 * var(--u));
	margin: calc(13 * var(--u)) auto 0;
	padding-left: calc(266 * var(--u));
	box-sizing: border-box;
	font-family: var(--ff-lp-go);
	font-size: calc(12 * var(--u));
	line-height: 130%;
	letter-spacing: 0;
	text-align: left;
}


/* // lp_pro--a — 美容のプロも使っています!!
----------------------------------------------- */
.lp_pro--a {
	/* 見出し・人物写真・肩書ラベル・背景は背景画像。コメントカードのみ HTML で載せる */
	/* 背景色は背景画像の下端と同色にする（要素が数px高くなっても境目が出ないように） */
	background-color: #EBE4E7;
	/* 次セクションと1px重ねる。端末の解像度差で境目に髪の毛のような隙間が出るのを防ぐ */
	margin-bottom: calc(-1 * var(--u));
	background-image: url(/freepage/ad/motherclay01/img/pro_bg.jpg?v=260901B);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
	/* セクションの高さを背景画像と一致させる */
	box-sizing: border-box;
	min-height: calc(1827 * var(--u));
	padding: 86.296% 0 calc(49 * var(--u));
}
.lp_pro--a .item {
	position: relative;
	width: 88.889%;
	margin: 0 auto;
	background-color: #FFF;
	border-radius: calc(12 * var(--u));
	/* デザイン実測：DROP_SHADOW radius20 / rgba(136,100,97,.2) / offset0 */
	box-shadow: 0 0 calc(10 * var(--u)) rgba(136, 100, 97, 0.2);
	/* デザイン実測：カード480×455/513・内側の余白50/30/30・本文幅420 */
	padding: calc(50 * var(--u)) calc(30 * var(--u)) calc(30 * var(--u));
	box-sizing: border-box;
}
/* 人物写真の円はカードの前面に重なる（背景画像側はカードで隠れるため、
   重なる下端だけを画像で載せ直す） */
.lp_pro--a .face_over {
	position: absolute;
	height: auto;
}
/* 画像上端の10pxはアルファでフェードさせ、背景画像との継ぎ目を消す。
   その10ぶんカード上端より上へずらす（translateY は要素自身の高さ基準なので幅追従する） */
/* 円写真とラベルはデザイン上で重なっているため、1枚の画像にまとめて配置する
   （別々に置くとラベルと円の位置がわずかにずれる）。カード(x30,上端)起点の実測値 */
.lp_pro--a .item._1 .face_over {
	/* 大塚真里さん：デザイン x129..440 / y15224..15506（カード上端 y15465） */
	left: calc(99 * var(--u));
	top: calc(-241 * var(--u));
	width: calc(311 * var(--u));
}
.lp_pro--a .item._2 .face_over {
	/* 野村サチコさん：デザイン x100..410 / y15970..16250（カード上端 y16210） */
	left: calc(70 * var(--u));
	top: calc(-240 * var(--u));
	width: calc(310 * var(--u));
}
.lp_pro--a .item._2 {
	margin-top: 53.704%;
}
.lp_pro--a .catch {
	font-weight: 600;
	color: var(--c1);
	text-align: center;
	font-size: calc(30 * var(--u));
	line-height: 140%;
	letter-spacing: 0;
}
.lp_pro--a .tx {
	font-family: var(--ff-lp-go);
	font-size: calc(18 * var(--u));
	line-height: 160%;
	letter-spacing: 0;
	margin-top: calc(15 * var(--u));
}
.lp_pro--a .tx + .tx {
	margin-top: calc(15 * var(--u));
}
.lp_pro--a .note {
	width: 88.889%;
	margin: calc(30 * var(--u)) auto 0;
	font-family: var(--ff-lp-go);
	font-size: calc(12 * var(--u));
	line-height: 130%;
	letter-spacing: 0;
	text-align: right;
}


/* // lp_voice--a — 感動のお声続々！（お客様の声）
----------------------------------------------- */
.lp_voice--a {
	/* 見出し・商品写真・グラデーションは背景画像。カードのみ HTML で載せる */
	/* 背景色は背景画像の下端と同色にする */
	background-color: #FFFCEC;
	/* 上は前セクションと重なり、下は次セクションと1px重ねる */
	position: relative;
	margin-bottom: calc(-1 * var(--u));
	background-image: url(/freepage/ad/motherclay01/img/voice_bg.jpg?v=260901n);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
	/* セクションの高さを背景画像と一致させる */
	box-sizing: border-box;
	min-height: calc(1839 * var(--u));
	padding: 51.852% 0 calc(4 * var(--u));
}
.lp_voice--a .item {
	position: relative;
	width: 74.074%;
	background-color: #FFF;
	border-radius: calc(12 * var(--u));
	/* デザイン実測：DROP_SHADOW radius20 / rgba(136,100,97,.2) / offset0 */
	box-shadow: 0 0 calc(10 * var(--u)) rgba(136, 100, 97, 0.2);
	/* デザイン実測：カード400幅・内側の余白30・本文幅340 */
	padding: calc(30 * var(--u));
	box-sizing: border-box;
}
.lp_voice--a .item._l {
	margin-left: 18.519%;
}
.lp_voice--a .item._r {
	margin-left: 7.407%;
}
.lp_voice--a .item + .item {
	margin-top: calc(30 * var(--u));
}
.lp_voice--a .face {
	position: absolute;
	top: calc(20 * var(--u));
	width: calc(100 * var(--u));
	height: auto;
	border-radius: 50%;
}
.lp_voice--a .item._l .face {
	/* デザイン実測：円100。カード(400幅)起点で left-70 / right側は left370 */
	left: calc(-70 * var(--u));
}
.lp_voice--a .item._r .face {
	left: calc(370 * var(--u));
}
.lp_voice--a .attr {
	font-weight: 500;
	display: inline-block;
	background-color: #F9ECE8;
	border-radius: calc(16 * var(--u));
	font-family: var(--ff-lp-go);
	font-size: calc(16 * var(--u));
	line-height: calc(32 * var(--u));
	letter-spacing: 0;
	padding: 0 calc(12 * var(--u));
}
.lp_voice--a .catch {
	font-weight: 800;
	color: var(--c1);
	font-size: calc(22 * var(--u));
	line-height: 150%;
	letter-spacing: 0;
	margin-top: calc(15 * var(--u));
}
.lp_voice--a .tx {
	font-family: var(--ff-lp-go);
	font-size: calc(18 * var(--u));
	line-height: 160%;
	letter-spacing: 0.05em;
	margin-top: calc(15 * var(--u));
}
.lp_voice--a .note {
	/* デザイン実測：x=120〜510（幅390）・30px下・13px/160% */
	width: 88.889%;
	margin: calc(30 * var(--u)) auto 0;
	font-family: var(--ff-lp-go);
	font-size: calc(13 * var(--u));
	line-height: 160%;
	letter-spacing: 0;
	text-align: right;
}


/* // lp_howto--a — HOW TO USE 使い方
----------------------------------------------- */
.lp_howto--a {
	background-color: #FFF;
	padding: calc(60 * var(--u)) 0;
	text-align: center;
}
.lp_howto--a .head {
	/* reset.css が h1〜h6 / p に text-align:left を当てているため明示する */
	text-align: center;
	margin-bottom: calc(44 * var(--u));
}
.lp_howto--a .head .en {
	font-family: "Cormorant SC", var(--ff-lp-min);
	font-weight: 700;
	display: inline-block;
	background-color: var(--c1);
	color: #FFF;
	font-size: calc(14 * var(--u));
	line-height: calc(30 * var(--u));
	letter-spacing: 0.06em;
	text-indent: 0.06em;
	padding: 0 calc(8 * var(--u));
	margin-bottom: calc(12 * var(--u));
}
.lp_howto--a .head .ja {
	font-weight: 600;
	display: block;
	font-size: calc(44 * var(--u));
	line-height: 105%;
	letter-spacing: 0.02em;
	text-indent: 0.02em;
}
.lp_howto--a .flow {
	display: block;
	width: 88.889%;
	max-width: calc(480 * var(--u));
	height: auto;
	margin: 0 auto;
}
.lp_howto--a .lead {
	font-family: var(--ff-lp-go);
	text-align: center;
	margin-top: calc(41 * var(--u));
}
.lp_howto--a .lead .l1 {
	font-weight: 500;
	display: block;
	font-size: calc(20 * var(--u));
	line-height: 175%;
	letter-spacing: 0.02em;
}
.lp_howto--a .lead .l1 .num {
	display: inline-block;
	background-color: var(--c1);
	color: #FFF;
	font-weight: 500;
	font-size: calc(24 * var(--u));
	line-height: calc(34 * var(--u));
	padding: 0 calc(10 * var(--u));
	margin: 0 calc(4 * var(--u));
	vertical-align: 2px;
}
.lp_howto--a .lead .l1 .x {
	margin: 0 calc(4 * var(--u));
	font-size: calc(17 * var(--u));
}
.lp_howto--a .lead .l2 {
	display: block;
	font-size: calc(26 * var(--u));
	font-weight: 500;
	line-height: 150%;
	letter-spacing: 0.02em;
	margin-top: calc(17 * var(--u));
}
.lp_howto--a .step_list {
	width: 88.889%;
	max-width: calc(480 * var(--u));
	margin: calc(19 * var(--u)) auto 0;
	text-align: left;
}
.lp_howto--a .step_list .item {
	display: flex;
	align-items: flex-start;
	gap: calc(33 * var(--u));
}
.lp_howto--a .step_list .item + .item {
	margin-top: calc(30 * var(--u));
}
.lp_howto--a .step_list .photo {
	flex-shrink: 0;
	position: relative;
	overflow: hidden;
	width: calc(190 * var(--u));
	max-width: 39.584%;
	aspect-ratio: 1 / 1;
	background-color: #FFF;
	border-radius: 50%;
	-webkit-mask-image: -webkit-radial-gradient(#FFF, #000);/* Safari で子の動画レイヤーを角丸にクリップさせる */
}
.lp_howto--a .step_list .photo img,
.lp_howto--a .step_list .photo video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}
.lp_howto--a .step_list .body {
	flex: 1;
	min-width: 0;
	font-family: var(--ff-lp-go);
	padding-top: calc(10 * var(--u));
}
.lp_howto--a .step_list .title {
	font-size: calc(24 * var(--u));
	font-weight: 500;
	line-height: 130%;
	letter-spacing: 0.02em;
	padding-bottom: calc(12 * var(--u));
	border-bottom: 1px solid var(--c0);
}
.lp_howto--a .step_list .tx {
	font-size: calc(16 * var(--u));
	line-height: 170%;
	letter-spacing: 0.02em;
	margin-top: calc(18 * var(--u));
}
.lp_howto--a .step_list .tx strong,
.lp_howto--a .bath .tx strong {
	color: var(--c1);
	font-weight: 700;
}
.lp_howto--a .bath {
	position: relative;
	display: flex;
	align-items: center;
	width: 88.889%;
	max-width: calc(480 * var(--u));
	min-height: calc(121 * var(--u));
	margin: calc(50 * var(--u)) auto 0;
	background-color: #FCF5F3;
	text-align: left;
}
.lp_howto--a .bath .photo {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 27.084%;
	max-width: calc(130 * var(--u));
	height: auto;
}
.lp_howto--a .bath .tx {
	flex: 1;
	min-width: 0;
	font-family: var(--ff-lp-go);
	font-weight: 500;
	font-size: calc(17 * var(--u));
	line-height: 165%;
	letter-spacing: -0.04em;
	padding: 0 calc(20 * var(--u)) 0 29.375%;
}


/* // lp_faq--a — よくあるご質問
----------------------------------------------- */
.lp_faq--a {
	background: linear-gradient(to bottom, #F7EBE1 0%, #FEF0CB 100%);
	padding: calc(51 * var(--u)) 0 calc(60 * var(--u));
}
.lp_faq--a .head {
	text-align: center;
	margin-bottom: calc(39 * var(--u));
}
.lp_faq--a .head .en {
	font-family: "Cormorant SC", var(--ff-lp-min);
	font-weight: 700;
	display: inline-block;
	width: calc(48 * var(--u));
	background-color: var(--c1);
	color: #FFF;
	font-size: calc(16 * var(--u));
	line-height: 180%;
	letter-spacing: 0.04em;
	text-indent: 0.04em;
	margin-bottom: calc(6 * var(--u));
}
.lp_faq--a .head .ja {
	font-weight: 600;
	display: block;
	font-size: calc(46 * var(--u));
	line-height: 130%;
	letter-spacing: 0.02em;
	text-indent: 0.02em;
}
.lp_faq--a .list {
	width: calc(480 * var(--u));
	max-width: calc(100% - calc(30 * var(--u)) * 2);
	margin: 0 auto;
}
.lp_faq--a .item + .item {
	margin-top: calc(20 * var(--u));
}
.lp_faq--a .q {
	display: flex;
	align-items: center;
	position: relative;
	background-color: #FFF;
	min-height: calc(80 * var(--u));
	padding: calc(12 * var(--u)) calc(60 * var(--u)) calc(12 * var(--u)) calc(27 * var(--u));
	cursor: pointer;
}
.lp_faq--a .q .mark {
	flex-shrink: 0;
	width: calc(53 * var(--u));
	font-family: "Cormorant SC", var(--ff-lp-min);
	font-weight: 700;
	font-size: calc(36 * var(--u));
	line-height: 100%;
	letter-spacing: 0;
}
.lp_faq--a .q .tx {
	font-family: var(--ff-lp-go);
	font-weight: 500;
	font-size: calc(24 * var(--u));
	line-height: 180%;
	letter-spacing: 0;
}
.lp_faq--a .q .icon_pm {
	position: absolute;
	top: 50%;
	right: calc(20 * var(--u));
	width: calc(20 * var(--u));
	height: calc(20 * var(--u));
	margin-top: calc(-10 * var(--u));
}
.lp_faq--a .q .icon_pm::before,
.lp_faq--a .q .icon_pm::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: calc(20 * var(--u));
	height: calc(2 * var(--u));
	background-color: var(--c0);
	transition: transform 0.3s;
}
.lp_faq--a .q .icon_pm::after {
	transform: rotate(90deg);
}
.lp_faq--a .item._open .q .icon_pm::after {
	transform: rotate(0deg);
}
.lp_faq--a .a {
	display: none;
	background-color: #FCF5F3;
	padding: calc(22 * var(--u)) calc(35 * var(--u)) calc(30 * var(--u)) calc(27 * var(--u));
}
.lp_faq--a .a .inner {
	display: flex;
}
.lp_faq--a .a .mark {
	flex-shrink: 0;
	width: calc(53 * var(--u));
	color: var(--c1);
	font-family: "Cormorant SC", var(--ff-lp-min);
	font-weight: 700;
	font-size: calc(40 * var(--u));
	line-height: 100%;
	letter-spacing: 0;
}
.lp_faq--a .a .tx {
	flex: 1;
	font-family: var(--ff-lp-go);
	font-weight: 400;
	font-size: calc(18 * var(--u));
	line-height: 180%;
	letter-spacing: 0;
}


/* // lp_footer--a — ページ下部のリンク／コピーライト
----------------------------------------------- */
.lp_footer--a {
	background-color: #333;
	color: #FFF;
	padding: calc(40 * var(--u)) 0 0;
	height: calc(194 * var(--u));
	box-sizing: border-box;
}
.lp_footer--a .nav_row {
	display: flex;
	justify-content: center;
	align-items: center;
	height: calc(30 * var(--u));
}
.lp_footer--a .nav_row .item {
	display: flex;
	align-items: center;
	height: calc(30 * var(--u));
	border-right: 1px solid rgba(255, 255, 255, 0.6);
	padding: 0 calc(16 * var(--u));
}
.lp_footer--a .nav_row .item:first-child {
	border-left: 1px solid rgba(255, 255, 255, 0.6);
}
.lp_footer--a .nav_row a {
	color: #FFF;
	font-family: var(--ff-lp-go);
	font-size: calc(14 * var(--u));
	line-height: 100%;
	letter-spacing: 0.02em;
	white-space: nowrap;
}
.lp_footer--a .nav_row + .nav_row {
	margin-top: calc(10 * var(--u));
}
.lp_footer--a .copy {
	font-family: "Cormorant SC", var(--ff-lp-min);
	font-weight: 600;
	text-align: center;
	font-size: calc(14 * var(--u));
	line-height: 100%;
	letter-spacing: 0.02em;
	margin-top: calc(40 * var(--u));
}


/* // lp_lastcv--a — 最後のCV（ボタンだけ背景から分離して縦揺れ）
----------------------------------------------- */
.lp_lastcv--a .cv_btn {
	/* デザイン実測: btnグループ 440×108 @ (50,642)／ドロップシャドウ込みで 452×134 @ (44,626)
	   セクションのアートは 540×880（注意書き4行版） */
	display: block;
	position: absolute;
	left: 8.148%;
	top: 71.136%;
	width: 83.704%;
	z-index: 2;
	animation: cv_float 2.2s ease-in-out infinite;
	will-change: transform;
}
.lp_lastcv--a .cv_btn img {
	display: block;
	width: 100%;
	height: auto;
}
@media (prefers-reduced-motion: reduce) {
	.lp_lastcv--a .cv_btn {
		animation: none;
	}
}


/* // 緑の購入ボタン — マウスオーバーで明るくする
   ボタンは4箇所すべて画像（うち3箇所はバナーや背景の一部）なので、
   緑のピルの上にだけ擬似要素を重ねて、その範囲だけを明るくする。
   位置は各画像から実測した緑ボタンの矩形（%指定＝画像の拡縮に追従）。
   ピル形状なので border-radius は 999px でよい。
----------------------------------------------- */
.cv_hover {
	position: relative;
}
.cv_hover::after {
	content: "";
	position: absolute;
	border-radius: 999px;
	/* backdrop-filter 非対応環境用のフォールバック（白をうすく重ねる） */
	background-color: rgba(255, 255, 255, 0);
	transition: background-color 0.25s ease, -webkit-backdrop-filter 0.25s ease, backdrop-filter 0.25s ease;
	pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
	.cv_hover:hover::after {
		background-color: rgba(255, 255, 255, 0.16);
	}
}
.cv_hover:focus-visible::after {
	background-color: rgba(255, 255, 255, 0.16);
}
/* 白を重ねると彩度が落ちて白文字が沈むため、使える環境では下地そのものを明るくする */
@supports ((backdrop-filter: brightness(1.1)) or (-webkit-backdrop-filter: brightness(1.1))) {
	.cv_hover::after {
		background-color: transparent;
		-webkit-backdrop-filter: brightness(1) saturate(1);
		backdrop-filter: brightness(1) saturate(1);
	}
	@media (hover: hover) and (pointer: fine) {
		.cv_hover:hover::after {
			background-color: transparent;
			-webkit-backdrop-filter: brightness(1.16) saturate(1.05);
			backdrop-filter: brightness(1.16) saturate(1.05);
		}
	}
	.cv_hover:focus-visible::after {
		background-color: transparent;
		-webkit-backdrop-filter: brightness(1.16) saturate(1.05);
		backdrop-filter: brightness(1.16) saturate(1.05);
	}
}
/* ページ中ほど「ご購入はこちら」＝リンクの矩形がそのままボタン */
.lp_pinkclay--a .cv_hit.cv_hover::after {
	inset: 0;
}
/* 最後のCV「送料も無料で購入」＝452×134 の画像内 (6,24) 440×100 */
.lp_lastcv--a .cv_btn::after {
	left: 1.327%;
	top: 17.910%;
	width: 97.345%;
	height: 74.627%;
}
/* バナー型のCVは、バナー全体がリンクだが「明るくなるのはボタンの上に
   乗ったときだけ」にしたいので、ボタン位置に判定用の span を敷いて
   そちらに :hover を持たせる（リンクの当たり判定はバナー全体のまま） */
.pc_side_cv--a .cv_hit,
.fixed_cv--a .cv_hit {
	position: absolute;
	display: block;
	z-index: 2;
}
.pc_side_cv--a .cv_hit.cv_hover::after,
.fixed_cv--a .cv_hit.cv_hover::after {
	inset: 0;
}
/* PC横バナー＝420×684 の画像内 (39,505) 342×78 */
.pc_side_cv--a .cv_hit {
	left: 9.286%;
	top: 73.830%;
	width: 81.429%;
	height: 11.404%;
}
/* 画面下部の追従バナー＝539×110 の画像内 (367,12) 164.5×86.5 */
.fixed_cv--a .cv_hit {
	left: 68.089%;
	top: 10.909%;
	width: 30.520%;
	height: 78.636%;
}


/* // pc_side_cv--a — PC表示時に本文の横へ並べる固定バナー
   デザイン実測（PCフレーム 1279:3／幅1400）:
     本文540 ＋ 余白120 ＋ バナー420 ＝ 1080 を画面センターに配置
     （本文の右端がちょうど画面中央、バナーはそこから120px右）
     バナー（1279:4）は 420×650、フレーム上端から165pxの位置
   1080が収まらない幅では出さない＝SP表示のまま（下部の追従バナーが担当）
----------------------------------------------- */
.pc_side_cv--a {
	display: none;
}
@media (min-width: 1120px) {
	.lp_mc01 {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		gap: 120px;
	}
	.lp_page {
		flex: none;
		margin: 0;
	}
	.pc_side_cv--a {
		display: block;
		flex: none;
		position: sticky;
		/* 初期位置165pxのまま貼り付く。画面が低いときは収まる位置まで上げる（バナー684 + 下余白40） */
		top: clamp(20px, 100vh - 724px, 165px);
		width: 420px;
		margin-top: 165px;
	}
	.pc_side_cv--a .banner {
		display: block;
		position: relative;
	}
	.pc_side_cv--a .banner img {
		display: block;
		width: 100%;
		height: auto;
	}
	/* 横に出したので画面下部の追従バナーは不要 */
	.fixed_cv--a {
		display: none;
	}
}


/* // fixed_cv--a — 画面下部の追従バナー（縦揺れ）
   最後のCVセクションが見えたら引っ込める（_hide）
----------------------------------------------- */
.fixed_cv--a {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	max-width: var(--lp-w);
	margin: 0 auto;
	padding-bottom: env(safe-area-inset-bottom, 0px);
	pointer-events: none;
	transition: transform 0.35s ease, opacity 0.35s ease;
}
.fixed_cv--a._hide {
	transform: translateY(110%);
	opacity: 0;
	pointer-events: none;
}
.fixed_cv--a._hide .banner {
	pointer-events: none;
}
.fixed_cv--a .banner {
	display: block;
	position: relative;
	filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.18));
	pointer-events: auto;
	animation: cv_float 2.2s ease-in-out infinite;
	will-change: transform;
}
.fixed_cv--a .banner img {
	display: block;
	width: 100%;
	height: auto;
}
@keyframes cv_float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-7px);
	}
}
@media (prefers-reduced-motion: reduce) {
	.fixed_cv--a .banner {
		animation: none;
	}
}


/* // xxx
----------------------------------------------- */


/* // xxx
----------------------------------------------- */


/* // xxx
----------------------------------------------- */


/**/