@charset "UTF-8";
/* CSS Document */
/* 冬のQietoミルミラ購入応援キャンペーン 2026/11 */

#qieto-support {
	--support_navy: #304a9c;
	--support_blue: #0c85d3;
	--support_blue_light: #dfedf6;
	--support_pink: #d87bbd;
	--support_pink_light: #fff1fb;
	--support_purple: #8d5faa;
	--support_text: #565656;

	background-color: #fff;
	color: var(--support_text);
	display: block;
	font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
	margin: 0 auto;
	width: min(100%, 640px);

	/* 全体リセット・共通設定 */
	p,
	a,
	span,
	div,
	ul,
	li,
	h1,
	h2,
	h3,
	button {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	ul {
		list-style: none;
	}

	a {
		cursor: pointer;
		text-decoration: none;
	}

	img {
		display: block;
		height: auto;
		max-width: 100%;
	}

	/* メインビジュアル */
	.main_visual img {
		width: 100%;
	}

	/* カウントダウン */
	.countdown {
		margin: 6.5% 0 0 0;
	}

	.countdown_title {
		margin: 0 auto;
		width: 58.33%;
	}

	.countdown_timer {
		border: 2px solid var(--support_navy);
		border-radius: min(4.2vw, 21px);
		margin: 2% auto 0;
		padding: 4% 0;
		width: 87.7%;
	}

	#Timer ul {
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
		width: 90%;
	}

	#Timer li {
		color: var(--support_navy);
		line-height: 1;
		position: relative;
		text-align: center;
		width: 25%;
	}

	#Timer li + li::before {
		content: ":";
		font-family: "Roboto Condensed", sans-serif;
		font-weight: 500;
		font-size: min(8vw, 40px);
		left: -5%;
		position: absolute;
        top: 5%;
		transform: translateX(-50%);
	}

	.time_main_no {
		display: block;
		font-family: "Roboto Condensed", sans-serif;
		font-weight: 500;
		font-size: min(10vw, 55px);
		letter-spacing: 0.1em;
	}

	.time_text {
		display: block;
		font-family: "Roboto Condensed", sans-serif;
		font-weight: 500;
		font-size: min(2.8125vw, 14.06px);
		letter-spacing: .04em;
		margin: 0;
	}

	/* クーポン案内 */
	.coupon {
		background: var(--support_pink_light);
		display: flow-root;
		margin: 9.2% 0 0 0;
		padding: 0 0 8.2%;
	}

	/* 見出しは背景の上端からはみ出して重なる */
	.coupon_title {
		margin: -3.9% auto 0;
		width: 32.8%;
	}

	.coupon_lead {
		color: var(--support_navy);
		font-size: min(3vw, 15px);
		font-weight: 500;
		letter-spacing: .12em;
		line-height: 1.2;
		margin: 2.2% 0 0 0;
		text-align: center;
	}

	.coupon_list {
		display: flex;
		justify-content: space-between;
		margin: 5.8% auto 0;
		width: 91.67%;
	}

	.coupon_item {
		background: #fff;
		padding: 5% 2.7% 4.8%;
		width: 48.75%;
	}

	.coupon_item-05 {
		--coupon_color: var(--support_blue);
		--coupon_bg: var(--support_blue_light);
	}

	.coupon_item-10 {
		--coupon_color: var(--support_pink);
		--coupon_bg: var(--support_pink_light);
	}

	.text_copy_js {
		cursor: pointer;
	}

	.coupon_cond {
		font-size: min(3vw, 16px);
		font-weight: 500;
		letter-spacing: .06em;
		line-height: 1.2;
		text-align: center;
	}

	.coupon_off img {
		margin: 7.4% auto 0;
	}

	.coupon_item-05 .coupon_off img {
		width: 69.5%;
	}

	.coupon_item-10 .coupon_off img {
		width: 91.8%;
	}

	.coupon_code {
		align-items: center;
		/* background: var(--coupon_bg); */
		border-radius: min(1.0417vw, 5.21px);
		display: flex;
		justify-content: center;
		margin: 7.9% 0 0 0;
		padding: 5% 0;
	}

	.coupon_code_label {
		font-size: min(2.0833vw, 10.42px);
		font-weight: 500;
		letter-spacing: .04em;
		line-height: 1.25;
		text-align: center;
	}

	.coupon_code_text {
		color: var(--coupon_color);
		font-size: min(7.8125vw, 39.06px);
		font-weight: 700;
		letter-spacing: .05em;
		line-height: 1;
		margin: 0 0 0 5%;
	}

	.coupon_btn {
		background: var(--coupon_color);
		border: .125rem solid var(--coupon_color);
		border-radius: 3em;
		color: #fff;
		cursor: pointer;
		display: block;
		font-family: inherit;
		font-size: min(3vw, 14px);
		font-weight: 500;
		letter-spacing: .08em;
		line-height: 1.5;
		margin: 6.3% 0 0 0;
		padding: 3.4% 0;
		text-align: center;
		width: 100%;
	}

	.coupon_btn-save {
		background: #fff;
		color: var(--coupon_color);
		margin: 4.2% 0 0 0;
	}

	/* Qieto診断 */
	.diagnosis {
		margin: 7.2% 0 0 0;
	}

	.diagnosis_lead {
		color: #9776d3;
		font-size: min(3.9583vw, 19.79px);
		font-weight: 700;
		letter-spacing: .08em;
		line-height: 1.1;
		text-align: center;
	}

	.diagnosis_btn {
		display: block;
		margin: 2.4% auto 0;
		width: 83%;
	}

	.diagnosis_btn img {
		width: 100%;
	}

	/* おすすめの組み合わせ */
	.combo {
		background: #fff;
		border: 2px solid var(--support_navy);
		border-radius: min(4.1667vw, 20.83px);
		margin: 9.3% auto 0;
		padding: 8% 0 3%;
		position: relative;
		width: 91.6%;
	}

	.combo_title {
		background: var(--support_navy);
		border-radius: 3em;
		color: #fff;
		font-size: min(3.125vw, 15.63px);
		font-weight: 500;
		left: 50%;
		letter-spacing: .14em;
		line-height: 1.5;
		padding: 1.3% 0;
		position: absolute;
		text-align: center;
		top: 0;
		transform: translate(-50%, -50%);
		width: 56.5%;
	}

	.combo_img img {
		margin: 0 auto;
		width: 80%;
	}

	.combo_text {
        font-size: min(3vw, 13px);
		font-feature-settings: "palt";
		font-weight: 500;
		line-height: 1.82;
		margin: 4.6% 6.3% 0;
	}

	/* 対象商品：ブランドタブ（Qieto / milmira） */
	.products {
		font-family: 'Noto Sans JP', sans-serif;
		margin: 8.1% 0 0 0;
		scroll-margin-top: 4rem;
	}

	.brand_list {
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
		width: 87.4%;
	}

	.brand_btn {
		align-items: center;
		border-radius: 1.5rem 1.5rem 0 0;
		cursor: pointer;
		display: flex;
		justify-content: center;
		width: 47.68%;
		padding: 5% 0;
	}

	.brand_btn-qieto {
		background: var(--support_blue);
	}

	.brand_btn-qieto img {
		width: 47.75%;
	}

	.brand_btn-milmira {
		background: var(--support_pink);
	}

	.brand_btn-milmira img {
		width: 53.5%;
	}

	.brand_cont,
	.type_cont {
		display: none;

		&.is_open {
			animation: support_fade .5s ease;
			display: block;
		}
	}
	.recommend {
		width: auto;
		margin: 0 auto;
	}
	.recommend-qieto {
		--type_head: var(--support_navy);
		--type_link: var(--support_navy);
		--type_detail: var(--support_blue);
		background: var(--support_blue);
		padding: 5% 0 ;
	}

	.recommend-milmira {
		--type_head: var(--support_purple);
		--type_link: var(--support_purple);
		--type_detail: var(--support_pink);
		background: var(--support_pink);
		padding: 5.5% 0 8.3%;
	}

	/* Qieto内：クリア / カラー タブ */
	.type_list {
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
		width: 83.33%;
	}

	.type_btn {
		align-items: center;
		background: #fff;
		border-radius: min(2.0833vw, 10.42px);
		color: var(--support_navy);
		cursor: pointer;
		display: flex;
		font-size: min(3.8542vw, 19.27px);
		font-weight: 700;
		height: min(12.9167vw, 64.58px);
		justify-content: center;
		letter-spacing: .04em;
		width: 47.5%;

		&.is_open {
			background: var(--support_navy);
			color: #fff;
		}
	}

	.type_cont {
		margin: 5.7% 0 0 0;
	}

	.type_cont-color {
		--type_head: var(--support_pink);
		--type_link: var(--support_pink);
	}

	/* 商品ボックス */
	.box {
		background: #fff;
		border-radius: min(4.1667vw, 20.83px);
		margin: 0 auto;
		padding: 7% 0 7.3%;
		scroll-margin-top: 4rem;
		width: 83.33%;
	}

	.box + .box {
		margin: 8.3% auto 0;
	}

	.box_head {
		color: var(--type_head);
		font-size: min(5vw, 25px);
		font-weight: 700;
		letter-spacing: .02em;
		line-height: 1.2;
		text-align: center;
		white-space: nowrap;
	}

	/* 2行見出しの両脇の斜線 */
	.box_head-slash {
		align-items: center;
		display: flex;
		gap: .6em;
		justify-content: center;
	}

	.box_head-slash::before,
	.box_head-slash::after {
		background: var(--type_head);
		content: "";
		flex-shrink: 0;
		height: 2.4em;
		width: .06em;
	}

	.box_head-slash::before {
		transform: rotate(-20deg);
	}

	.box_head-slash::after {
		transform: rotate(20deg);
	}

	.box_ttl {
		color: #333;
		font-size: min(4.1667vw, 20.83px);
		font-weight: 700;
		line-height: 1.25;
		margin: 7.4% 0 0 0;
		text-align: center;
	}

	.box_img {
		margin: 3.6% auto 0;
		position: relative;
	}

	.box_img img {
		width: 100%;
	}

	.box_img-sq1r {
		width: 40%;
	}

	.box_img-sq1 {
		width: 36.1%;
	}

	.box_img-sq2 {
		width: 42.4%;
	}

	/* レンズ画像が右にはみ出すぶん、パッケージが中央に来るよう右へずらす */
	.box_img-color {
		left: 5.25%;
		width: 68.25%;
	}

	.box_img-milmira {
		left: 4.25%;
		width: 48.25%;
	}

	.box_price_wrap {
		align-items: baseline;
		display: flex;
		justify-content: center;
		margin: 2.6% 0 0 0;
	}

	.box_price_count {
		color: #333;
		font-size: min(3.5417vw, 17.71px);
		font-weight: 700;
		letter-spacing: .04em;
	}

	.box_price {
		color: #ff2f2f;
		font-size: min(5.8333vw, 29.17px);
		font-weight: 700;
		line-height: 1;
		margin: 0 0 0 1.5%;

		em {
			font-family: 'Oswald', sans-serif;
			font-size: min(10vw, 43px);
			font-style: normal;
			margin: 0 0 0 .05em;
		}
	}

	.box_link {
		background: var(--type_link);
		border-radius: min(1.6667vw, 8.33px);
		color: #fff;
		display: block;
		font-size: min(4.375vw, 21.88px);
		font-weight: 700;
		letter-spacing: .08em;
		line-height: 1.5;
		margin: 5% auto 0;
		padding: 4.6% 0;
		position: relative;
		text-align: center;
		width: 81.25%;
	}

	.box_link::after {
		border-right: .1em solid #fff;
		border-top: .1em solid #fff;
		content: "";
		height: .55em;
		position: absolute;
		right: 10%;
		top: 50%;
		transform: translateY(-50%) rotate(45deg);
		width: .55em;
	}

	.box_link-detail {
		background: var(--type_detail);
		border-radius: 3em;
		margin: 7.5% auto 0;
	}

	.box_link-detail::after {
		display: none;
	}

 	.column_zone_ttl{
		margin-top: 8%;
		padding: 1% 0;
		background: #304a9c;
		color: #fff;
		font-weight: bold;
		font-size: min(5.5vw, 25px);
		letter-spacing: 2px;
		text-align: center;
		position: relative;
	}
	.campaign_bnr {
		width: 91.6667%;
		margin: 3.4375% auto 0 auto;
	}
	.catch_ttl {
		width: max-content;
		margin: 5% auto 3%;
		color: #111111;
		font-weight: bold;
		font-size: min(4.3vw, 21px);
		letter-spacing: 0.04em;
		line-height: 2;
		text-align: center;
	}
	.catch_ttl .line {
		background: linear-gradient(transparent 70%, #fff770 60%);
	}
	.catch_ttl .deco {
		display: inline-block;
		position: relative;
	}

	.catch_ttl .deco::before,
	.catch_ttl .deco::after {
		display: block;
		position: absolute;
		bottom: 0.1em;
		width: 0.1em;
		height: 1.2em;
		background: #111111;
		content: "";
		font-weight: normal;
	}

	.catch_ttl .deco::before {
		-webkit-transform: rotate(-28deg);
		left: -0.8em;
		top: 0.5em;
		transform: rotate(-28deg);
	}

	.catch_ttl .deco::after {
		-webkit-transform: rotate(28deg);
		right: -0.8em;
		top: 0.5em;
		transform: rotate(28deg);
	}
}

@keyframes support_fade {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/* モーダル（remodal は body 直下へ移動するため .support_modal で範囲を絞る） */
.remodal.support_modal {
	background: rgba(52, 52, 52, .9);
	color: #fff;
	font-family: 'Noto Sans JP', sans-serif;
	max-width: min(100%, 500px);
	padding: 1% 1% 4%;

	p,
	ul,
	li {
		margin: 0;
		padding: 0;
	}

	ul {
		list-style: none;
	}

	img {
		display: block;
		height: auto;
		max-width: 100%;
	}

	.sm_modal_close {
		color: #fff;
		cursor: pointer;
		font-size: min(10vw, 40px);
		line-height: 1;
		position: absolute;
		right: 3%;
		top: .5%;
		z-index: 3;
	}

	.modal_product_img {
		margin: 6% auto 0;
		position: relative;
		width: 50%;
	}

	.modal_product_img > img {
		margin: 0 auto;
	}

	.set_badge {
		left: -10%;
		position: absolute;
		top: 3%;
		width: 40%;
		z-index: 1;
	}

	.modal_product_title {
		font-size: min(4.8vw, 20px);
		line-height: 1.5;
		margin: 3% 0 0 0;
	}

	.modal_content_area {
		margin: 4% 0 0 0;
		position: relative;
	}

	.modal_content_wrap {
		left: 0;
		margin: 0;
		opacity: 0;
		pointer-events: none;
		position: absolute;
		right: 0;
		top: 0;
		transition: all .2s ease-in-out;
		width: 100%;

		&.is_active {
			opacity: 1;
			pointer-events: auto;
			position: relative;
			z-index: 2;
		}

		form {
			background: #fff;
			color: #24272a;
			margin: 5% auto 0;
			padding: 5% 0;
		}
	}

	.sm_cellbox {
		display: contents;
		font-size: min(7.2vw, 36px);
		font-weight: 700;
		letter-spacing: .05em;
		line-height: 1;
	}

	.sm_cellbox_po {
		display: block;
		font-size: min(4.4vw, 20px);
		font-weight: 700;
		letter-spacing: .05em;
		line-height: 1;
		margin: 2% auto 0;
	}

	.sm_devide {
		font-size: min(3.8vw, 18px);
		font-weight: 400;
	}

	.sm_color,
	.sm_colorb,
	.cell_point .red {
		color: #8ec9f2;
		font-weight: 700;
	}

	/* セット選択プルダウン */
	.custom_dropdown {
		margin: 5% auto 0;
		position: relative;
		width: 80%;
		z-index: 5;
	}

	.custom_select {
		align-items: center;
		background-color: #304a9c;
		border: none;
		border-radius: .4em;
		color: #fff;
		cursor: pointer;
		display: flex;
		font-size: min(3.6vw, 15px);
		justify-content: space-between;
		padding: 3% 5%;
		width: 100%;
	}

	.custom_select::after {
		border-left: .35em solid transparent;
		border-right: .35em solid transparent;
		border-top: .35em solid #fff;
		content: "";
		height: 0;
		width: 0;
	}

	.select_label {
		margin: 0 0 0 14%;
	}

	.custom_options {
		background: #fff;
		border: .0625rem solid #ccc;
		border-radius: .4em;
		display: none;
		left: 0;
		position: absolute;
		right: 0;
		top: 100%;
		z-index: 10;

		&.open {
			display: block;
		}

		li {
			color: #000;
			cursor: pointer;
			font-size: min(3.6vw, 15px);
			padding: 3%;

			&:hover {
				background: #f0f0f0;
			}

			&.active {
				background: #0c85d3;
				color: #fff;
			}
		}
	}

	/* goodsPulldown の出力（MZはtable構造） */
	.pop_select {
		margin: 0 auto;
		padding: 0;
		width: 95%;

		table {
			margin: 3% 0 0 0;
			width: 100%;
		}

		.grn-ttl {
			background: none;
			color: #24272a;
			font-size: min(3.6vw, 15px);
			font-weight: 400;
			height: auto;
			line-height: 1.4;
			margin: 0;
			padding: 2% 0;
			text-align: center;
		}

		th,
		td {
			border: none;
			font-size: min(3.6vw, 15px);
			font-weight: 400;
			padding: 1% 0;
			vertical-align: middle;
		}

		th {
			background: none;
			color: #24272a;
			text-align: center;
			white-space: nowrap;
			width: 25%;
		}

		select {
			background: #f4f4f4;
			border: none;
			border-radius: .3em;
			color: #222;
			font-size: min(3.4vw, 14px);
			height: min(9.4vw, 35px);
			letter-spacing: .02em;
			padding: 0 0 0 4%;
			width: 100%;
		}
	}

	.btn-form {
		margin: 5% auto;
		padding: 0;
		width: 80%;
	}

	.org-btn {
		background: #304a9c !important;
		border: none;
		border-radius: 100vh;
		color: #fff;
		display: inline-block;
		font-size: min(3vw, 18px);
		height: auto;
		letter-spacing: .06em;
		line-height: 1;
		padding: 1.2em 1em;
		text-align: center;
		text-decoration: none;
		text-indent: 0;
		width: 100%;
	}

	/* こんな方におすすめ・詳しく見る */
	.modal_expresion_img {
		margin: 8% auto 0;
		width: 100%;
	}

}

/* Qieto診断モーダル（白いパネルに診断チャート画像を載せ、ボタン位置に透明リンクを重ねる） */
.remodal.support_modal.support_modal-diagnosis {
	background: #fff;
	border-radius: min(4.1667vw, 26.67px);
	max-width: min(100%, 587px);
	padding: 6.4% 2.27% 7.7%;

	.sm_modal_close {
		color: #a3a3a3;
		font-size: min(8.3333vw, 53.33px);
		font-weight: 300;
		right: 3%;
		top: .6%;
	}

	.diagnosis_chart {
		position: relative;
	}

	.diagnosis_chart img {
		width: 100%;
	}

	/* 文字は画像側にあるので、リンクのテキストは読み上げ用に残して見えなくする */
	.diagnosis_link {
		color: transparent;
		cursor: pointer;
		font-size: min(1.5625vw, 10px);
		overflow: hidden;
		position: absolute;
		width: 29.4%;
	}

	/* 商品名〜パッケージ画像〜ボタンまでをタップ範囲にする */
	.diagnosis_link-milmira,
	.diagnosis_link-color {
		height: 17.43%;
		top: 35.4%;
	}

	.diagnosis_link-sq1r,
	.diagnosis_link-sq1,
	.diagnosis_link-sq2 {
		height: 17.21%;
		top: 82.3%;
	}

	.diagnosis_link-milmira {
		left: 7.38%;
	}

	.diagnosis_link-color {
		left: 46.9%;
	}

	.diagnosis_link-sq1r {
		left: 1.79%;
	}

	.diagnosis_link-sq1 {
		left: 35.12%;
	}

	.diagnosis_link-sq2 {
		left: 69.17%;
	}
}