@charset "UTF-8";
/* =========================================================
   夜を整えるミネラルバス  /mineralbath/
   既存 second.css / common.css を前提とした追加スタイル
   新規クラスはすべて mb- プレフィックス
   数値は Figma「MineralBath_PC_v2」「MineralBath_Story_PC_v2」準拠（px）
   ========================================================= */

/* ---- 共通 ---- */
#article .mb-sec{ clear:both; margin:0; padding:50px 0 0; }
#article .mb-sec:after{ content:""; display:block; clear:both; }
#article h2.mb-h2{
	font-size:18px; font-weight:bold; color:#333; line-height:1.8;
	margin:0 0 16px; padding:0; border:none; background:none;
}
#article .mb-lead{ font-size:16px; line-height:1.8; margin:0 0 16px; }
#article .mb-img{ display:block; max-width:100%; height:auto; }

/* ---- ヒーロー ---- */
#article .mb-hero-img{ margin:0 0 20px; }
#article .mb-hero-title{ margin:0 0 20px; }
#article .mb-hero-title p,
#article .mb-hero-title h1{ margin:0 0 6px; }
#article .mb-hero-sup{ font-size:14px; line-height:1.8; color:#277852; }
#article .mb-hero-title h1{ font-size:30px; font-weight:bold; color:#333; line-height:1.4; }
#article .mb-hero-spec{ font-size:14px; line-height:1.8; color:#666; }
#article .mb-catch{ padding:10px 0; margin:0 0 20px; }
#article .mb-catch p{ margin:0; }
#article .mb-catch .mb-catch1{ font-size:22px; font-weight:bold; color:#277852; line-height:1.5; margin-bottom:8px; }
#article .mb-catch .mb-catch2{ font-size:16px; color:#333; line-height:1.8; }
#article .mb-hero-lead p{ font-size:16px; line-height:1.8; margin:0; }
#article .mb-hero-lead p + p{ margin-top:0; }
#article .mb-cta-center{ text-align:center; padding:30px 0 10px; margin:0; }

/* ---- ボタン ---- */
#article .mb-btn{
	display:inline-block; box-sizing:border-box;
	font-weight:bold; text-align:center; text-decoration:none;
	border-radius:4px; cursor:pointer; font-family:inherit;
	line-height:1.4; padding:0; vertical-align:middle;
}
#article .mb-btn-order{ width:300px; height:56px; line-height:56px; font-size:16px; background:#277852; color:#FFF; border:none; }
#article .mb-btn-story{ width:280px; height:52px; line-height:52px; font-size:15px; background:#277852; color:#FFF; border:none; }
#article .mb-btn-buy{ width:200px; height:48px; line-height:46px; font-size:15px; background:#277852; color:#FFF; border:solid 1px #277852; }
#article .mb-btn-look{ width:200px; height:48px; line-height:46px; font-size:15px; background:#FFF; color:#277852; border:solid 1px #277852; }
#article .mb-btn-order:hover,
#article .mb-btn-story:hover,
#article .mb-btn-buy:hover{ background:#1E6141; color:#FFF; }
#article .mb-btn-look:hover{ background:#F3F8F5; color:#277852; }

/* ---- 画像左・文章右（ストーリー／開発物語の章） ---- */
#article .mb-row{ overflow:hidden; }
#article .mb-row-img{ float:left; width:300px; }
#article .mb-row-txt{ float:right; width:424px; }
#article .mb-row-txt p{ font-size:16px; line-height:1.8; margin:0; }
#article .mb-row-txt p + p{ margin-top:28px; }

/* ---- 3つのこだわり ---- */
#article ul.mb-points{ overflow:hidden; margin:0; padding:0; }
#article .mb-points li{
	float:left; width:236px; min-height:236px; margin:0 0 0 20px; list-style:none;
	box-sizing:border-box; background:#FAFBF1; border:none; padding:20px;
}
#article .mb-points li:first-child{ margin-left:0; }
#article .mb-points .mb-num{ display:block; font-size:26px; font-weight:bold; color:#25AD7D; line-height:1.2; margin-bottom:8px; }
#article .mb-points h3{ font-size:16px; font-weight:bold; color:#277852; line-height:1.5; margin:0 0 8px; }
#article .mb-points p{ font-size:14px; line-height:1.8; color:#333; margin:0; }

/* ---- 3種の香り ---- */
#article .mb-scents-visual{ margin:0 0 16px; }
#article ul.mb-scents{ overflow:hidden; margin:0; padding:0; }
#article .mb-scents li{
	float:left; width:236px; margin:0 0 0 20px; list-style:none;
	box-sizing:border-box; background:#FFF; border:solid 1px #DDD;
}
#article .mb-scents li:first-child{ margin-left:0; }
#article .mb-scents .mb-scent-img img{ display:block; width:100%; height:auto; }
#article .mb-scents .mb-scent-body{ padding:10px 16px 16px; }
#article .mb-scents .mb-scent-en{ font-size:11px; color:#25AD7D; line-height:1.8; margin:0 0 4px; }
#article .mb-scents h3{ font-size:16px; font-weight:bold; color:#277852; line-height:1.5; margin:0 0 4px; }
#article .mb-scents p.mb-scent-desc{ font-size:14px; line-height:1.8; color:#333; margin:0; }

/* ---- 使い方 ---- */
#article .mb-howto{ background:#FFF; border:solid 1px #CCC; padding:24px; }
#article .mb-howto p{ font-size:16px; line-height:1.8; color:#333; margin:0 0 12px; }
#article .mb-howto p.mb-howto-note{ font-size:13px; color:#999; margin:0; }

/* ---- ご注文 ---- */
#article .mb-product{ clear:both; overflow:hidden; padding:30px 0; border-top:dashed 1px #DDD; }
#article .mb-product-last{ border-bottom:dashed 1px #DDD; }
#article .mb-product-img{ float:left; width:300px; }
#article .mb-product-img img{ display:block; width:300px; height:auto; }
#article .mb-product-detail{ float:right; width:418px; }
#article .mb-product-detail h3{ font-size:18px; font-weight:bold; color:#333; line-height:1.5; margin:0 0 6px; }
#article .mb-product-detail p{ font-size:14px; line-height:1.8; color:#333; margin:0 0 6px; }
#article .mb-product-detail .price-green{ font-size:20px; font-weight:bold; color:#00B200; line-height:1.4; margin:0 4px; }
#article ul.mb-cart{ border-top:solid 1px #DDD; margin:14px 0 0; padding:20px 0 0; overflow:hidden; }
#article .mb-cart li{ list-style:none; float:left; margin:0 12px 0 0; }
#article .mb-cart form{ margin:0; }
#article h3.mb-trial-h{
	font-size:16px; font-weight:bold; color:#277852; line-height:1.8;
	margin:0; padding:30px 0 6px; background:none; border:none;
}

/* ---- 全成分 ---- */
#article table.mb-ingredients{ width:100%; border-collapse:collapse; border:solid 1px #CCC; margin:0 0 12px; }
#article table.mb-ingredients th,
#article table.mb-ingredients td{
	border:none; padding:10px; text-align:left; vertical-align:top;
	font-size:13px; line-height:1.6; color:#333; background:transparent;
}
#article table.mb-ingredients th{ width:280px; font-weight:bold; }
#article table.mb-ingredients tr:nth-child(odd){ background:#FEF5F7; }
#article table.mb-ingredients tr:nth-child(even){ background:#FFF; }
#article .mb-ingredients-note{ font-size:12px; line-height:1.8; color:#999; margin:0; }

/* ---- ご使用上の注意 ---- */
#article .mb-notes-sec{ clear:both; padding:40px 0 20px; }
#article h2.mb-notes-h{ font-size:15px; font-weight:bold; color:#333; line-height:1.8; margin:0 0 8px; padding:0; border:none; background:none; }
#article ul.mb-notes{ margin:0; padding:0; border:none; }
#article .mb-notes li{ list-style:none; padding-left:1em; text-indent:-1em; margin:0; font-size:13px; line-height:1.7; color:#666; }
#article .mb-notes li:before{ content:"・"; }

/* ---- ページ先頭へ ---- */
#article .mb-pagetop{ text-align:right; padding:20px 0 10px; margin:0; font-size:13px; }
#article .mb-pagetop a{ color:#25AD7D; }

/* ---- 開発物語ページ ---- */
#article h1.mb-story-title{ font-size:26px; font-weight:bold; color:#333; line-height:1.4; margin:0 0 10px; }
#article .mb-story-sub{ font-size:16px; line-height:1.8; color:#666; margin:0 0 10px; }
#article .mb-story-hero{ margin:0 0 20px; }
#article .mb-toc{ background:#FAFBF1; border:none; padding:24px; margin:0; }
#article .mb-toc h2{ font-size:14px; font-weight:bold; color:#277852; line-height:1.8; margin:0 0 6px; padding:0; border:none; background:none; }
#article .mb-toc ol{ margin:0; padding:0; list-style:none; counter-reset:mbtoc; }
#article .mb-toc li{ list-style:none; font-size:15px; line-height:1.8; margin:0 0 6px; counter-increment:mbtoc; }
#article .mb-toc li:last-child{ margin-bottom:0; }
#article .mb-toc li:before{ content:counter(mbtoc) "."; display:inline-block; width:24px; font-weight:bold; color:#25AD7D; }
#article .mb-toc li a{ color:#25AD7D; text-decoration:none; }
#article .mb-toc li a:hover{ text-decoration:underline; }
#article .mb-chapter{ clear:both; overflow:hidden; padding:40px 0 0; margin:0; }
#article .mb-chapter h2{
	font-size:20px; font-weight:bold; color:#277852; line-height:1.5;
	margin:0 0 16px; padding:0 0 8px; border:none; border-bottom:solid 1px #BBB; background:none;
}
#article .mb-quote{
	font-size:18px; font-weight:bold; color:#333; line-height:1.6;
	background:none; border-left:solid 3px #277852; padding:6px 0 6px 20px; margin:0 0 16px;
}
#article .mb-chapter > p{ font-size:16px; line-height:1.8; color:#333; margin:0; }
#article .mb-chapter > p + p{ margin-top:28px; }
#article .mb-story-cta-wrap{ clear:both; padding:50px 0 0; }
#article .mb-story-cta{ overflow:hidden; background:#FAFBF1; border:none; padding:24px; margin:0; }
#article .mb-story-cta .mb-story-cta-img{ float:left; width:220px; }
#article .mb-story-cta .mb-story-cta-img img{ display:block; width:220px; height:auto; }
#article .mb-story-cta .mb-story-cta-txt{ float:right; width:456px; }
#article .mb-story-cta h3{ font-size:18px; font-weight:bold; color:#333; line-height:1.8; margin:0 0 10px; }
#article .mb-story-cta p{ font-size:14px; line-height:1.8; color:#333; margin:0 0 10px; }

/* ---- 既存 responsive（.isRsp / 767px以下）への追従 ---- */
@media screen and (max-width:767px){
	.isRsp #article .mb-row-img,
	.isRsp #article .mb-row-txt,
	.isRsp #article .mb-product-img,
	.isRsp #article .mb-product-detail,
	.isRsp #article .mb-story-cta .mb-story-cta-img,
	.isRsp #article .mb-story-cta .mb-story-cta-txt{ float:none; width:auto; }
	.isRsp #article .mb-row-img,
	.isRsp #article .mb-product-img,
	.isRsp #article .mb-story-cta .mb-story-cta-img{ margin:0 auto 16px; max-width:300px; }
	.isRsp #article .mb-product-img img,
	.isRsp #article .mb-story-cta .mb-story-cta-img img{ width:100%; }
	.isRsp #article .mb-points li,
	.isRsp #article .mb-scents li{ float:none; width:auto; min-height:0; margin:0 0 14px; }
	.isRsp #article .mb-hero-title h1{ font-size:24px; }
	.isRsp #article .mb-cart li{ float:none; margin:0 0 10px; }
	.isRsp #article .mb-btn{ width:100%; }
	.isRsp #article table.mb-ingredients th{ width:40%; }
}

/* ご注文見出しの直下は区切り線（Figma 07_Product は gap0） */
#article #to-order h2.mb-h2{ margin-bottom:0; }
#article .mb-chapter > p.mb-quote{ font-size:18px; font-weight:bold; line-height:1.6; margin:0 0 16px; }
#article .mb-chapter > p.mb-quote + p{ margin-top:0; }
#article .mb-cart li.li-look{ margin-right:0; }
/* 既存CSSの table セル罫線（!important）を打ち消す */
#article table.mb-ingredients th,
#article table.mb-ingredients td{ border:none !important; }
#article .mb-pagetop a{ text-decoration:none; }
#article .mb-pagetop a:hover{ text-decoration:underline; }

/* カードの高さを行内でそろえる（Figma v3：行は Hug、カードは高さ Fill） */
#article ul.mb-points,
#article ul.mb-scents{ display:flex; align-items:stretch; }
#article .mb-points li,
#article .mb-scents li{ float:none; flex:0 0 236px; }
@media screen and (max-width:767px){
	.isRsp #article ul.mb-points,
	.isRsp #article ul.mb-scents{ display:block; }
}