/* =========================================================
   Lounge Madonna Common Theme
   Ivory × Deep Green × Champagne Gold × Pink Accent
========================================================= */

:root {
	--madonna-bg: #F8F4EC;
	--madonna-bg-light: #FFFDF9;
	--madonna-beige: #E9DFD1;

	--madonna-gold: #B69149;
	--madonna-gold-dark: #8D6A32;

	--madonna-deep: #264F49;
	--madonna-deep-dark: #1E3733;

	--madonna-text: #433A34;
	--madonna-muted: #796D65;

	--madonna-pink: #D8798B;
	--madonna-pink-dark: #C76478;
	--madonna-pink-light: #F8E8EB;

	--madonna-border: #DED0BD;
}


/* =========================================================
   BASE
========================================================= */

body {
	background: var(--madonna-bg) !important;
	color: var(--madonna-text);
}

.madonna-home,
.madonna-faqpage,
.madonna-subscription {
	background: var(--madonna-bg) !important;
	color: var(--madonna-text);
}


/* =========================================================
   HEADER
========================================================= */

.madonna-header,
.madonna-header__main {
	background: rgba(255, 253, 249, .97) !important;
}

.madonna-header__message {
	background: var(--madonna-deep) !important;
	color: #fff !important;
}

.madonna-brand__mark {
	color: var(--madonna-gold) !important;
}

.madonna-brand__text strong {
	color: var(--madonna-deep-dark) !important;
}

.madonna-brand__text small,
.madonna-brand__text em {
	color: var(--madonna-gold-dark) !important;
}

.madonna-header a {
	color: var(--madonna-text);
}

.madonna-header a:hover {
	color: var(--madonna-pink);
}


/* PCヘッダーアイコン */
.madonna-header__navigation .login-pc a,
.madonna-header__navigation .search-pc > a,
.madonna-header__cart > a,
.madonna-header__sp-cart > a {
	color: var(--madonna-deep-dark) !important;
}

.madonna-header__cart .total-quant,
.madonna-header__sp-cart .total-quant {
	background: var(--madonna-pink) !important;
}


/* =========================================================
   HEADINGS
========================================================= */

.madonna-section-title,
.ms-section-heading__title,
.madonna-faqpage__title,
.madonna-faq-category__head h2 {
	color: var(--madonna-deep-dark) !important;
}

.madonna-section-label,
.ms-section-heading__en,
.madonna-faqpage__eyebrow,
.madonna-faq-category__head p {
	color: var(--madonna-gold) !important;
}


/* ピンクはアクセントとしてだけ残す */
.accent,
.madonna-section-title .accent,
.madonna-faqpage__title span {
	color: var(--madonna-pink) !important;
}


/* =========================================================
   CARD
========================================================= */

.madonna-plan-card,
.madonna-product-card,
.madonna-flow-step,
.ms-plan-card,
.ms-recommend-card,
.ms-flow-card,
.ms-usage-box,
.ms-note-box,
.madonna-faq-item {
	background: var(--madonna-bg-light) !important;
	border-color: var(--madonna-border) !important;

	box-shadow:
		0 10px 28px rgba(63, 50, 37, .055) !important;
}


/* =========================================================
   BUTTON
========================================================= */

/* メインCTAだけピンク */
.ms-btn--primary,
.madonna-btn--primary,
.madonna-faq-contact__button {
	background: var(--madonna-pink) !important;
	border-color: var(--madonna-pink) !important;
	color: #fff !important;
}

.ms-btn--primary:hover,
.madonna-btn--primary:hover,
.madonna-faq-contact__button:hover {
	background: var(--madonna-pink-dark) !important;
	border-color: var(--madonna-pink-dark) !important;
}


/* サブボタンはゴールド */
.ms-btn--outline,
.madonna-btn--outline {
	background: transparent !important;
	border-color: var(--madonna-gold) !important;
	color: var(--madonna-gold-dark) !important;
}

.ms-btn--outline:hover,
.madonna-btn--outline:hover {
	background: #F1E6D5 !important;
	color: var(--madonna-deep-dark) !important;
}


/* =========================================================
   TOP PAGE
========================================================= */

/* 「ご利用の流れ」など */
.madonna-flow {
	background: #F2EADF !important;
}

.madonna-flow-step__number {
	background: #EEE1CC !important;
	color: var(--madonna-gold-dark) !important;
}

.madonna-flow-step__icon {
	color: var(--madonna-pink) !important;
}


/* 商品 */
.madonna-product-card {
	background: var(--madonna-bg-light) !important;
}

.madonna-product-card__price {
	color: var(--madonna-gold-dark) !important;
}


/* 信頼・案内帯 */
.madonna-trust {
	background: var(--madonna-deep) !important;
	color: #fff !important;
}


/* =========================================================
   FAQ
========================================================= */

.madonna-faqpage__hero {
	background:
		radial-gradient(
			circle at 15% 25%,
			rgba(182, 145, 73, .12),
			transparent 30%
		),
		radial-gradient(
			circle at 85% 15%,
			rgba(216, 121, 139, .07),
			transparent 28%
		),
		linear-gradient(
			180deg,
			#FFFDF9,
			#F8F4EC
		) !important;

	border-color: var(--madonna-border) !important;
}


.madonna-faqpage__nav {
	background: rgba(248, 244, 236, .96) !important;
	border-color: var(--madonna-border) !important;
}

.madonna-faqpage__nav-list a {
	background: var(--madonna-bg-light) !important;
	border-color: var(--madonna-border) !important;
	color: var(--madonna-text) !important;
}

.madonna-faqpage__nav-list a span {
	color: var(--madonna-gold-dark) !important;
}

.madonna-faqpage__nav-list a:hover {
	background: #F1E6D5 !important;
	border-color: var(--madonna-gold) !important;
	color: var(--madonna-deep-dark) !important;
}


/* FAQカテゴリ番号 */
.madonna-faq-category__number {
	background:
		linear-gradient(
			135deg,
			#C5A35F,
			#906D36
		) !important;

	color: #fff !important;
}


/* Q / A は差し色ピンク */
.madonna-faq-item__q,
.madonna-faq-item__a {
	color: var(--madonna-pink) !important;
}

.madonna-faq-item summary::after {
	background: #F1E6D5 !important;
	color: var(--madonna-gold-dark) !important;
}

.madonna-faq-item[open] summary::after {
	background: var(--madonna-gold) !important;
	color: #fff !important;
}


/* FAQ下部お問い合わせ */
.madonna-faq-contact {
	background:
		linear-gradient(
			135deg,
			#F3E9DC,
			#FFFDF9
		) !important;

	border-color: var(--madonna-border) !important;
}


/* =========================================================
   SUBSCRIPTION
========================================================= */

.ms-plan-card--recommended {
	border-color: var(--madonna-gold) !important;
}

.ms-plan-card__badge {
	background: var(--madonna-gold-dark) !important;
	color: #fff !important;
}

.ms-plan-card__label {
	color: var(--madonna-gold-dark) !important;
}

.ms-plan-card__name {
	color: var(--madonna-deep-dark) !important;
}

.ms-plan-card__price strong {
	color: var(--madonna-gold-dark) !important;
}


/* HOW TO USE */
.ms-usage {
	background: #F2EADF !important;
}


/* ご利用条件など濃色エリア */
.ms-service-condition {
	background:
		linear-gradient(
			135deg,
			var(--madonna-deep),
			var(--madonna-deep-dark)
		) !important;

	color: #fff !important;
}


/* 基本サービス */
.ms-service-box,
.ms-service-bottle__item {
	background: var(--madonna-bg-light) !important;
	border-color: var(--madonna-border) !important;
}

.ms-service-box__heading h3 {
	color: var(--madonna-deep) !important;
}

.ms-service-box__heading span,
.ms-service-bottle__label {
	color: var(--madonna-gold) !important;
}


/* 無料表示 */
.ms-service-item strong,
.ms-service-extra__item strong {
	color: var(--madonna-pink) !important;
}


/* 小さい丸アイコン */
.ms-service-extra__icon {
	background: var(--madonna-pink-light) !important;
	color: var(--madonna-pink) !important;
}


/* ボトル追加特典 */
.ms-bottle-benefit {
	background:
		linear-gradient(
			135deg,
			#FFFDF9,
			#F2E6D3
		) !important;

	border-color: var(--madonna-gold) !important;
}

.ms-bottle-benefit__badge {
	background: var(--madonna-deep) !important;
	color: #fff !important;
}

.ms-bottle-benefit__catch {
	color: var(--madonna-gold-dark) !important;
}

.ms-bottle-benefit__list li {
	background: rgba(255, 255, 255, .82) !important;
	border-color: #DDCBAA !important;
}


/* =========================================================
   IMPORTANT RULE
========================================================= */

.ms-rule-item__number {
	background: #F1E6D5 !important;
	color: var(--madonna-gold-dark) !important;
}

.ms-rule-item__body strong {
	color: var(--madonna-pink-dark) !important;
}


/* =========================================================
   BORDER / DIVIDER
========================================================= */

hr,
.madonna-divider {
	border-color: var(--madonna-border) !important;
}


/* =========================================================
   MOBILE MENU
========================================================= */

@media (max-width: 991px) {

	.madonna-header__sp-menu #global-menu,
	.madonna-header__sp-menu #global-menu-pc,
	.madonna-header__sp-menu .global-menu,
	.madonna-header__sp-menu .global-menu-pc {
		background: var(--madonna-bg-light) !important;
	}

	.madonna-header__mobile-menu svg path {
		fill: var(--madonna-deep-dark) !important;
	}

	.madonna-header__sp-cart svg path,
	.madonna-header__sp-cart svg circle {
		fill: var(--madonna-deep-dark) !important;
	}
}


/* =========================================================
   AGE GATE
========================================================= */

.madocheer-age-gate {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.madocheer-age-gate.is-active {
	display: flex;
}

.madocheer-age-gate__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			135deg,
			rgba(30, 55, 51, .97),
			rgba(67, 58, 52, .97)
		);
	backdrop-filter: blur(6px);
}

.madocheer-age-gate__box {
	position: relative;
	z-index: 2;
	width: min(100%, 520px);
	padding: 50px 42px 42px;
	background: #fffdf9;
	border: 1px solid #b69149;
	border-radius: 4px;
	text-align: center;
	box-shadow: 0 30px 80px rgba(0,0,0,.28);
}

.madocheer-age-gate__sub {
	margin: 0 0 7px;
	color: #b69149;
	font-family: Georgia, serif;
	font-size: 10px;
	letter-spacing: .22em;
}

.madocheer-age-gate__logo {
	margin: 0;
	color: #1e3733;
	font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
	font-size: 38px;
	font-weight: 500;
	letter-spacing: .12em;
}

.madocheer-age-gate__line {
	width: 50px;
	height: 1px;
	margin: 22px auto 28px;
	background: #b69149;
}

.madocheer-age-gate__box h3 {
	margin: 0 0 18px;
	color: #433a34;
	font-size: 21px;
	font-weight: 500;
}

.madocheer-age-gate__text {
	margin: 0;
	color: #796d65;
	font-size: 13px;
	line-height: 2;
}

.madocheer-age-gate__buttons {
	display: grid;
	gap: 10px;
	margin-top: 30px;
}

.madocheer-age-gate__buttons button {
	width: 100%;
	padding: 15px;
	border-radius: 3px;
	font-size: 14px;
	cursor: pointer;
	transition: .25s;
}

.madocheer-age-gate__yes {
	border: 1px solid #b69149;
	background: #264f49;
	color: #fff;
}

.madocheer-age-gate__yes:hover {
	background: #1e3733;
}

.madocheer-age-gate__no {
	border: 1px solid #ded0bd;
	background: transparent;
	color: #796d65;
}

.madocheer-age-gate__no:hover {
	background: #f8f4ec;
}

.madocheer-age-gate__notice {
	margin: 22px 0 0;
	color: #9a8b82;
	font-size: 10px;
	line-height: 1.7;
}


/* 年齢確認中はページをスクロールさせない */
body.madocheer-age-lock {
	overflow: hidden;
}


@media (max-width: 767px) {

	.madocheer-age-gate__box {
		padding: 40px 24px 32px;
	}

	.madocheer-age-gate__logo {
		font-size: 31px;
	}

	.madocheer-age-gate__box h3 {
		font-size: 18px;
	}

}

/* =========================================================
   SOCIAL BAR
========================================================= */

.madonna-header__message {
	padding: 0 !important;
	background: var(--madonna-deep, #264F49) !important;
}

.madonna-socialbar {
	width: min(1180px, calc(100% - 40px));
	min-height: 38px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.madonna-socialbar__text {
	margin: 0;
	color: rgba(255,255,255,.75);
	font-family: Georgia, serif;
	font-size: 10px;
	letter-spacing: .15em;
	text-transform: uppercase;
}

.madonna-socialbar__links {
	display: flex;
	align-items: center;
	gap: 18px;
}

.madonna-socialbar__links a {
	position: relative;
	color: #fff !important;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .05em;
	text-decoration: none;
	transition: color .2s ease;
}

.madonna-socialbar__links a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -3px;
	height: 1px;
	background: var(--madonna-gold, #B69149);
	transition: right .25s ease;
}

.madonna-socialbar__links a:hover {
	color: #DDBD78 !important;
}

.madonna-socialbar__links a:hover::after {
	right: 0;
}


/* SP */
@media (max-width: 767px) {

	.madonna-socialbar {
		width: calc(100% - 24px);
		min-height: 36px;
		justify-content: center;
	}

	.madonna-socialbar__text {
		display: none;
	}

	.madonna-socialbar__links {
		width: 100%;
		justify-content: center;
		gap: 20px;
	}

	.madonna-socialbar__links a {
		font-size: 10px;
	}

}

:root {
	--madonna-bg: #F8F4EC;
	--madonna-bg-light: #FFFDF9;
	--madonna-beige: #E9DFD1;

	--madonna-gold: #B69149;
	--madonna-gold-dark: #8D6A32;

	/* 深緑 → モカブラウンへ */
	--madonna-deep: #6A5145;
	--madonna-deep-dark: #4B3932;

	--madonna-text: #433A34;
	--madonna-muted: #796D65;

	--madonna-pink: #D8798B;
	--madonna-pink-dark: #C76478;
	--madonna-pink-light: #F8E8EB;

	--madonna-border: #DED0BD;
}

.madonna-header__message {
	background: #EDE1D2 !important;
	border-bottom: 1px solid #D8C6AF;
}

.madonna-socialbar__text {
	color: #8D6A32 !important;
}

.madonna-trust {
	background: #5A443B !important;
	color: #FFF9F4 !important;
}