@charset "UTF-8";
/* CSS Document */
/* 【もっと】いいQietoの日 2026/11 */

#qieto-day-motto {
	--motto_blue: #009ed2;
	--motto_blue_light: #e5f5fb;
	--motto_btn: linear-gradient(180deg, #5db4e3 0%, #0881c4 100%);
	--motto_text: #333;
	--type_1day: #0c85d3;
	--type_2week: #13adc9;
	--type_color: #a57cf2;

	background-color: #f4fafd;
	color: var(--motto_text);
	display: block;
	font-family: 'Noto Sans JP', sans-serif;
	margin: 0 auto;
	padding: 0 0 10%;
	width: min(100%, 640px);

	/* 全体リセット・共通設定 */
	p,
	a,
	span,
	div,
	ul,
	li,
	h1,
	h2,
	h3 {
		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%;
	}

	/* カウントダウン */
	.inner.is-period,
	.inner.is-noperiod {
		background-size: 100%;
		padding: 9% 0 6.5%;
		width: 90%;
		margin: 10% auto 0;
	}

	.inner.is-period {
		background: url(/special/qieto-day-motto/img/cd_01.png) no-repeat center top;
		background-size: 100%;
	}

	.inner.is-noperiod {
		background: url(/special/qieto-day-motto/img/cd_02.png) no-repeat center top;
		background-size: 100%;
	}

	#Timer ul {
		display: flex;
		justify-content: space-between;
	}

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

	#Timer li + li::before {
		content: ":";
		font-family: 'Oswald', sans-serif;
		font-size: min(10vw, 56px);
		left: 0;
		position: absolute;
		top: -4%;
		transform: translateX(-50%);
	}

	.time_main_no {
		display: block;
		font-family: 'Oswald', sans-serif;
		font-size: min(11.5vw, 62px);
		letter-spacing: .04em;
	}

	.time_text {
		display: block;
		font-size: min(2.4vw, 12px);
		letter-spacing: .1em;
		margin: 6% 0 0 0;
		font-weight: 700;
	}

	/* クーポン案内 */
	.coupon {
		margin: 7% 0 0 0;
	}

	.coupon_title {
		margin: 0 auto;
		width: 66%;
	}

	.coupon_inner {
		margin: 5% auto 0;
		width: 84%;
	}

	/* 予告・本番の出し分け（JSでルートに is_pre / is_on を付与） */
	.coupon_card-pre,
	.coupon_card-on,
	.coupon_img-on {
		display: none;
	}

	&.is_pre .coupon_card-pre,
	&.is_on .coupon_card-on,
	&.is_on .coupon_img-on {
		display: block;
	}

	.coupon_card {
		background: #fff;
		border: .375rem solid var(--motto_blue);
		border-radius: 1.4em;
		overflow: hidden;
		padding: 11% 6% 8%;
		position: relative;
		text-align: center;
	}

	.coupon_card_icon {
		left: 0;
		position: absolute;
		top: 0;
		width: 17.4%;
	}

	.coupon_card_badge {
		left: 2.5%;
		position: absolute;
		top: 2.5%;
		width: 18%;
	}

	/* 左上のチケットアイコンに重ならないよう左に余白 */
	.coupon_card_title {
		color: var(--motto_blue);
		font-size: min(6.6vw, 31px);
		padding: 0 0 0 12%;
		font-weight: 900;
		letter-spacing: .04em;
		line-height: 1.35;
	}

	.coupon_card_text {
		font-size: min(3.7vw, 19px);
		font-weight: 700;
		letter-spacing: .04em;
		line-height: 1.75;
		margin: 6% 0 0 0;
	}

	.coupon_card_lead {
		color: var(--motto_blue);
		font-size: min(4.6vw, 22px);
		font-weight: 900;
		letter-spacing: .08em;
	}

	.coupon_card_cond {
		font-size: min(4vw, 19px);
		font-weight: 700;
		letter-spacing: .06em;
		line-height: 1.6;
		margin: 3% 0 0 0;

		em {
			color: var(--motto_blue);
			font-style: normal;
		}
	}

	.coupon_card_price {
		color: var(--motto_blue);
		font-family: 'Oswald', sans-serif;
		font-size: min(14vw, 68px);
		font-weight: 700;
		letter-spacing: .02em;
		line-height: 1.1;
		margin: 2% 0 0 0;

		span {
			font-family: 'Noto Sans JP', sans-serif;
			font-size: .5em;
			font-weight: 900;
		}
	}

	.coupon_card_code {
		align-items: center;
		background: var(--motto_blue_light);
		border-radius: .5em;
		display: flex;
		font-size: min(3.8vw, 18px);
		font-weight: 700;
		justify-content: center;
		letter-spacing: .06em;
		margin: 4% 0 0 0;
		padding: 3% 0;

		strong {
			color: var(--motto_blue);
			font-family: 'Oswald', sans-serif;
			font-size: min(7.4vw, 34px);
			letter-spacing: .12em;
			line-height: 1;
		}
	}

	.coupon_card_code_bar {
		color: var(--motto_blue);
		margin: 0 2%;
	}

	.coupon_card_btn {
		background: var(--motto_btn);
		border-radius: 3em;
		color: #fff;
		display: block;
		font-size: min(4vw, 19px);
		font-weight: 700;
		letter-spacing: .06em;
		margin: 7% auto 0;
		padding: 4.4% 10%;
		position: relative;
		width: 92%;
	}

	.coupon_card_btn::after {
		border-right: .15em solid #fff;
		border-top: .15em solid #fff;
		content: "";
		height: .5em;
		position: absolute;
		right: 8%;
		top: 50%;
		transform: translateY(-50%) rotate(135deg);
		width: .5em;
	}

	.coupon_card_btn-arrow::after {
		transform: translateY(-50%) rotate(45deg);
	}

	.coupon_card_btn-copy {
		align-items: center;
		display: flex;
		justify-content: center;
	}

	.coupon_card_btn-copy::after {
		display: none;
	}

	.coupon_card_btn_icon {
		height: min(4.4vw, 21px);
		margin: 0 0 0 3%;
		width: auto;
	}

	.coupon_img img {
		width: 100%;
	}

	/* おすすめの組み合わせ */
	.combo {
		margin: 8% 0 0 0;
	}

	.combo_title {
		margin: 0 auto;
		width: 72%;
	}

	.combo_box {
		background: #fff;
		border: 3.4px solid var(--motto_blue);
		border-radius: 1em;
		margin: 6% auto 0;
		padding: 2% 4% 7%;
		width: 83%;
	}

	.combo_sub_title img {
		margin: 0 auto;
		width: 98%;
	}

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

	.combo_text {
		font-size: min(3.6vw, 15px);
		font-weight: 500;
		letter-spacing: .05em;
		line-height: 2;
		margin: 6% 0 0 0;
		padding: 0 3%;
	}

	/* 対象商品：レンズタイプタブ */
	.products {
		margin: 8% auto 0;
		width: 100%;
	}
	.lens_nav {
		width: 83%;
		margin: 7% auto 0;
	}
	.lens_list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: min(2.63vw, 13px) 2.37%;
	}
	.lens_item {
		width: 31.75%;
	}
	.lens_btn {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 2.7% 5%;
		border-radius: .4em .4em 0 0;
		background: #fff;
		font-size: min(3.8vw, 25px);
		font-weight: 500;
		letter-spacing: .03em;
		font-family: "Jost", sans-serif;
		line-height: 1.5;
		&.is_open {
			opacity: 1;
		}
	}

	.lens_btn-1day {
		background: var(--type_1day);
		color: #fff;
	}

	.lens_btn-2week {
		background: var(--type_2week);
		color: #fff;
	}

	.lens_btn-color {
		background: var(--type_color);
		color: #fff;
	}

	.change_cont {
		display: none;
		padding: 7% 0 8%;

		&.is_open {
			animation: motto_fade .5s ease;
			display: block;
		}
	}
	.recommend {
		width: auto;
		margin: 0;
		padding: 6% 0 ;
	}
	.recommend-1day {
		--type: var(--type_1day);
		background: var(--type_1day);
	}

	.recommend-2week {
		--type: var(--type_2week);
		background: var(--type_2week);
	}

	.recommend-color {
		--type: var(--type_color);
		background: var(--type_color);
	}

	/* カラー：ミルミラ／キエトカラー タブ */
	.color_tab_list {
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
        width: 83%;
	}

	.color_tab_btn {
		align-items: center;
		background: #fff;
		border: .1875rem solid transparent;
		border-radius: .8em;
		cursor: pointer;
		display: flex;
		height: min(16vw, 76px);
		justify-content: center;
		/* opacity: .55; */
		position: relative;
		transition: opacity .2s;
        width: 47.5%;

		&.is_open {
			opacity: 1;
			background: #731eb5;
		}
	}

	.color_tab_logo-milmira {
		height: 68%;
		width: auto;
	}

	.color_tab_logo-qieto {
		width: 84%;
	}

	.color_cont {
		display: none;
		margin: 5% 0 0 0;

		&.is_open {
			animation: motto_fade .5s ease;
			display: block;
		}
	}

	/* 商品ボックス */
	.box {
		background: #fff;
		border-radius: 1em;
		margin: 0 auto;
		padding: 3% 0 7%;
		width: 86%;
	}

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

	.box_head {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: .8em;
		margin: 0;
		position: relative;
		color: #866d09;
		font-size: min(5.5vw, 23px);
		font-weight: 700;
        line-height: 1.3;
		letter-spacing: 0.04em;
		padding: 1.6% 0 1%;
		text-align: center;
	}

	.box_head-slash {
		align-items: center;
		display: flex;
		gap: .8em;
		justify-content: center;
	}

	.box_head-slash::before,
	.box_head-slash::after {
		background: #a88c1e;
		border-radius: .05em;
		content: "";
		flex-shrink: 0;
		height: 2.5em;
		width: .1em;
	}

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

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

	.box_body {
		padding: 4% 0 0;
	}

	.box_ttl {
		font-size: min(3.9vw, 19px);
		font-weight: 700;
		letter-spacing: .05em;
		line-height: 1.4;
		text-align: center;
	}

	.box_img {
		margin: 5% auto 0;
		width: 47%;
	}
	.box_img-small {
		width: 40%;
	}
	.box_img-wide {
		width: 64%;
	}

	.box_img img {
		margin: 0 auto;
	}

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

	.box_price_count {
		font-size: min(4vw, 17px);
		font-weight: 700;
		letter-spacing: .07em;
	}

	.box_price {
		color: #ff2f2f;
		font-size: min(4.5vw, 25px);
		font-weight: 700;
		line-height: 1;

		em {
			font-family: 'Oswald', sans-serif;
			font-size: min(9vw, 43px);
			font-style: normal;
		}
	}

	.box_link {
		background: #a88c1e;
		border-radius: 0.4em;
		color: #fff;
		display: block;
		font-size: min(4vw, 20px);
		letter-spacing: 0.15em;
		margin: 5% auto 0;
		padding: 3.6% 0;
		position: relative;
		text-align: center;
		width: 80%;
		font-weight: 900;
	}

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

	.box_link-detail {
		border-radius: 2em;
		background:  var(--type);
		color: #fff;
		margin: 6% auto 0;
	}

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

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

	100% {
		opacity: 1;
	}
}

/* モーダル（remodal は body 直下へ移動するため .motto_modal で範囲を絞る） */
.remodal.motto_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;
		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: #a88c1e;
		font-weight: 700;
	}

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

	.custom_select {
		align-items: center;
		background-color: #a88c1e;
		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: #0881c4;
				color: #fff;
			}
		}
	}

	/* goodsPulldown の出力 */
	.goods_inner {
		margin: 0 auto;
		width: 95%;
	}

	.goods_flex {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;

		.th {
			font-size: min(3.6vw, 15px);
			font-weight: 400;
			padding: 2% 0;
			text-align: center;
			white-space: nowrap;
			width: 100%;
		}

		.td_wrap {
			display: flex;
			justify-content: space-evenly;
			width: 100%;
		}

		.td {
			font-size: min(3.6vw, 15px);
			text-align: center;
			width: 43%;
		}

		.goods_select_wrap {
			background: #f4f4f4;
			border-radius: .3em;
			margin: 0 0 3%;
			position: relative;
			width: 100%;
			z-index: 0;
		}

		.goods_select_wrap::after {
			border-bottom: .0625rem solid #000;
			border-right: .0625rem solid #000;
			content: "";
			height: .4em;
			position: absolute;
			right: 8%;
			top: 50%;
			transform: translateY(-50%) rotate(45deg);
			width: .4em;
			z-index: 1;
		}

		select {
			color: #222;
			font-size: min(3.4vw, 14px);
			height: min(9.4vw, 35px);
			letter-spacing: .02em;
			padding: 0 18% 0 8%;
			width: auto;
		}
	}

	.goods_btn_wrap {
		margin: 5% auto;
		width: 80%;
	}

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

	/* こんな方におすすめ */
	.modal_expresion_img {
		margin: 8% auto 0;
		width: 100%;
	}

	/* 同じ素材のコンタクト */
	.same_box {
		background: #fff;
		border: .125rem solid #009ed2;
		border-radius: .6em;
		margin: 9% auto 0;
		padding: 9% 4% 5%;
		position: relative;
		width: 92%;
	}

	.same_box_title {
		background: #009ed2;
		border-radius: 2em;
		color: #fff;
		font-size: min(3.8vw, 17px);
		font-weight: 700;
		left: 50%;
		letter-spacing: .12em;
		line-height: 1;
		padding: 2.6% 8%;
		position: absolute;
		top: 0;
		transform: translate(-50%, -50%);
		white-space: nowrap;
	}

	.same_list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.same_item {
		align-items: center;
		display: flex;
		justify-content: center;
		margin: 4% 0 0 0;
		width: 48%;

		a {
			display: block;
			width: 100%;
		}

		img {
			margin: 0 auto;
			width: 100%;
		}
	}
}