@charset "utf-8";

/*
お買い物タイプ診断
2025/07/08
*/

#shopping-type {
	max-width: 500px;
	margin: 0 auto;
	background-color: #FFFFFF;
	color: #595757;
}

#shopping-type a {
	color: #595757;
}

#shopping-type {
	.header_ttl {
		width: 90%;
		margin: 3% auto 0;
		font-size: min(4vw, 20px);
		font-weight: 700;
		letter-spacing: .1em;
		line-height: 2.4;
		text-align: center;
		color: #fff;
		background: #07bea9;
		border-radius: 0.3em;
	}

	.header_text {
		width: 85%;
		margin: 4% auto 0;
		font-size: min(2.9vw, 14px);
		font-weight: 900;
		text-align: center;
		letter-spacing: .1em;
		line-height: 1.8;
		span{
			color: #07bea9;
		}
	}

	.header_off {
		margin: 4% auto 0;
	}

	.header_off img{
		display: block;
		width: auto;
		max-width: 100%;
		margin: 0 auto ;
	}

	/* ラジオボタンは非表示 */
	.radio_group{
		display: flex;
		justify-content: space-around;
		width: 87%;
		margin: 4% auto 0;
	}
	.radio_img {
		display: none;
		outline: none;
	}
	.radio_label{
		outline: none;
		cursor: pointer;
	}
	/* ラベル画像 */
	.radio_label img {
		display: block;
		width: 95%;
		max-width: 100%;
		margin: 0 auto;
	}

	/* 回答テキストは初期非表示 */
	.question_area{
		display: block;
		position: relative;
		/* height: min(60vh, 110vh); */
		/* padding: 100% 0 0; */
	}
	.question_text {
		display: none;
		margin: 4% auto 0;
		font-size: min(3.1vw, 15px);
		font-weight: 900;
		text-align: center;
		letter-spacing: .05em;
		line-height: 1.8;
		width: 90%;
	}

	.question {
		/* position: absolute; */
		margin: 5% auto 0;
		width: 100%;
		top: 0;
		left: 0;
	}

	.question_ttl{
		margin: 4% auto 0;
		font-size: min(3.8vw, 19px);
		font-weight: 900;
		text-align: center;
		letter-spacing: .1em;
		line-height: 1.8;
	}
	.q_num {
		display: block;
		width: 12%;
		max-width: 100%;
		margin: 0 auto;
	}
	.q_inner{

	}
	/* 次に */
	.qa_button_wrap {
		display: flex;
		justify-content: center;
		width: auto;
		margin: 4% auto 0;
	}
	.qa_button {
		width: 40%;
		margin: 3% 1.2% 0;
		padding: 1% 0;
		font-size: min(4vw, 20px);
		font-weight: 700;
		letter-spacing: .1em;
		text-align: center;
		color: #fff;
		background: #07bea9;
		border-radius: 0.3em 6px;
	}
	.prev{
		color: #07bea9;
		background: #fff;
		border: solid 2px #07bea9;
	}

	.next{

	}

	.next:disabled {
		opacity: 0.5;
		pointer-events: none;
		cursor: default;
	}

	/* そんなあなたには定期便がおすすめ */
	.recommend_subsc_wrap {
		height: auto;
	}
	.recommend_subsc_area {
		position: relative;
		margin: 10% auto 0;

	}
	.recommend_subsc_inner{
		display: block;
		margin: 5% auto 0;
		/* opacity: 0;
		visibility: hidden;
		transition: opacity 0.5s ease, visibility 0.5s ease; */
		width: 100%;
		padding: 0 0 7%;
		background: #07bea9;
	}
	.recommend_subsc_ttl {
		margin: 0 auto ;
	}

	.recommend_subsc_ttl img {
		display: block;
		width: auto;
		max-width: 100%;
		margin: 0 auto;
	}

	.recommend_subsc_subttl {
		margin: 5% 0 0;
		font-size: min(4.9vw, 25px);
		font-weight: 700;
		line-height: 1.5;
		letter-spacing: .1em;
		text-align: center;
		color: #fcf276;
	}

	.recommend_subsc_img {
		width: 90%;
		margin: 4% auto 0;
	}

	.recommend_subsc_img img {
		display: block;
		width: auto;
		max-width: 100%;
		margin: 0 auto;
	}

	.recommend_subsc_text {
		margin: 2% auto 0;
		font-size: min(3.7vw, 18px);
		font-weight: 700;
		letter-spacing: .1em;
		text-align: center;
		color: #fff;
		line-height: 1.5;
	}

	.recommend_subsc_btn {
		background: #fcf276;
		color: #07bea9;
		letter-spacing: .12em;
		font-size: min(6vw, 30px);
		font-weight: bold;
		display: block;
		padding: 0;
		position: relative;
		width: 90%;
		margin: 3% auto 0;
		text-align: center;
		border-radius: .3em;
		span {
			color: #07bea9;
			position: absolute;
			right: 7%;
			top: 26%;
			font-size: min(3.3vw, 18px);
		}
	}

	/* ご愛用の方におススメ定期便商品！ */
	.answer-1day {
		width: 85%;
		margin: 3% auto 0;
	}

	.answer-2week {
		width:85%;
		margin: 3% auto 0;
	}

	.answer-color {
		width:85%;
		margin: 3% auto 0;
	}
	.cate_subsc_ttl {
		background: #07bea9;
		width: auto;
		color: #fff;
		letter-spacing: 2px;
		font-size: min(4.8vw, 26px);
		font-weight: bold;
		display: block;
		padding: 1% 0;
		position: relative;
		margin: 2% auto 0;
		text-align: center;
		border-radius: .3em;
		&.ttl_1d {
			background: #168aec;
		}
		&.ttl_2w {
				background: #07bea9;
		}
		&.ttl_co {
				background: #fc84a6;
		}
	}

	.cate_subsc_catch {
		color: #07bea9;
		letter-spacing: .1em;
		font-size: min(4.8vw, 24px);
		font-weight: bold;
		display: block;
		position: relative;
		margin: 2% 0 0;
		text-align: center;
	}

	.cate_subsc_wrap {

	}

	.cate_subsc_text {
		margin: 0 auto;
		font-size: min(3.4vw, 17px);
		font-weight: 900;
		text-align: center;
		letter-spacing: .1em;
		line-height: 1.8;
	}

	.cate_subsc_img {
		margin: 2% 0 0;
	}

	.cate_tab_list {
		width: 100%;
		margin: 5% auto 0;
	}

	.cate_tab_list .set_tabs {
		width: 100%;
		margin: 0;
	}

	.cate_tab_list>ul {
		width: 100%;
		margin: 0;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.cate_tab_list>ul.center {
		justify-content: center;
	}
	.cate_tab_list>ul>li {
		padding: 4% 2%;
		width: 48%;
		max-width: 640px;
		border: solid 2px #168aec;
		float: left;
		margin-bottom: 5%;
		position: relative;
	}







	/* 定期便対象商品をチェック */
	.subsc_ttl {
		color: #07bea9;
		letter-spacing: 2px;
		font-size: min(7vw, 35px);
		font-weight: bold;
		display: block;
		position: relative;
		margin: 5% 0 0;
		text-align: center;
	}

	.tab3_subttl {
		background: #07bea9;
		width: 90%;
		color: #fff;
		letter-spacing: .05em;
		font-size: min(7vw, 35px);
		font-weight: 500;
		display: block;
		padding: 0;
		position: relative;
		margin: 2% auto 0;
		text-align: center;
		border-radius: .3em;
		transition: all .3s;
		span{
			position: absolute;
			right: 5%;
			top: 35%;
			font-size: min(3vw, 15px);
			transform: translateX(0) rotate(120deg);
			transition: all .3s;
		}
		&.open span {
			position: absolute;
			right: 5%;
			top: 31%;
			font-size: min(3vw, 15px);
			transform: translateX(0) rotate(330deg);
		}
		&.btn_1ba{
			background: #168aec;
		}
		&.btn_2w {
			background: #07bea9;
		}
		&.btn_cba {
			background: #fc84a6;
		}
	}

	.tab3_otoku_example {
		border: solid 4px #07bea9;
		padding: 7% 4% 4%;
	}

	.tab3_all_btn {
		font-size: 4.6vw;
		font-weight: bold;
		letter-spacing: 1px;
		display: block;
		background: #fff361;
		margin: 0 auto 6%;
		padding: 2% 0;
		color: #07bea9;
		width: 86%;
		opacity: 1 !important;

	}

	.tab3_all_btn a {}

	.tab3_all_btn a:hover {
		opacity: 1 !important;
	}

	.tab3_list {
		width: 90%;
		margin: 2% auto 0;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease;
	}

	.tab3_list>ul {
		width: 100%;
		margin: 0;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.tab3_list>ul>li {
		padding: 4% 2%;
		width: 48%;
		max-width: 640px;
		border: solid 2px #168aec;
		float: left;
		margin-bottom: 5%;
		position: relative;
	}

	.li_gr {
		border: solid 2px #128da3 !important;
	}

	.new_icon {
		position: absolute;
		left: 6%;
		width: 24%;
		top: 4%;
	}

	.tab3_list_ma {
		margin-right: 4%;
	}

	.brand_logo {
		display: block;
		width: 50%;
		/*margin: 0 auto 10%;*/
	}

	.set_tabs .brand_logo {
		display: block;
		/*margin-left: 8%;*/
		width: 50%;
		/*margin: 0 auto 10%;*/
	}

	.syouhin_img {
		margin: 4% auto;
		width: 70%;
		max-width: 640px;
	}

	.tab3_li_txt {
		font-size: min(2.8421vw, 14px);
		line-height: 1.5;
		font-weight: bold;
		text-align: center;
		letter-spacing: 1px;
		margin: 4% auto 6%;
		max-width: 600px;
	}

	.normal_price {
		margin: 0 auto;
		font-size: min(2.6vw, 12px);
		font-weight: bold;
		line-height: 1.4;
		text-align: center;
		text-decoration: line-through;
		letter-spacing: 0.01em;
	}

	.special_price_title {
		width: max-content;
		margin: 0 4%;
		padding: 0.4em;
		border: 1px solid currentColor;
		color: #e73656;
		font-weight: bold;
		font-size: min(2.8421vw, 14px);
		line-height: 1;
		letter-spacing: 0.06em;
	}

	.special_price {
		color: #e73656;
		font-size: min(3.7vw, 24px);
		font-weight: bold;
		line-height: 1.4;
		letter-spacing: 0;
	}

	.special_price .sm_devide {
		font-size: 0.6em;
	}

	.special_discount {
		position: relative;
		margin: 0 auto 5%;
		color: #e73656;
		font-weight: bold;
		font-size: min(3vw, 18px);
		line-height: 1.8;
		letter-spacing: 0.06em;
		text-align: center;
	}

	.special_discount::before {
		-webkit-transform: rotate(57deg);
		position: absolute;
		top: 70%;
		left: 3%;
		width: 2em;
		height: 1px;
		transform: rotate(57deg);
		background: #e73656;
		content: "";
	}

	.special_discount::after {
		-webkit-transform: rotate(125deg);
		position: absolute;
		top: 70%;
		right: 3%;
		width: 2em;
		height: 1px;
		transform: rotate(125deg);
		background: #e73656;
		content: "";
	}

	.special_discount_height {
		margin: 0 auto 5%;
	}

	.list_btn_yo {
		margin: 0 auto;
	}

	.tab3_list_btn {
		display: block;
		width: auto;
		margin: 4% 0 0;
		text-align: center;

	}

	.tab3_list_btn img {
		margin: 4% auto 0;
	}

	.tab3_list_btn a {
		position: relative;
		display: block;
		padding: 20% 0;
		color: #fff;
		font-weight: 500;
		font-size: min(2.8vw, 14px);
		line-height: 1;
		text-align: center;
		letter-spacing: .08em;
		background: #07bea9;
		text-decoration: none;
		border-radius: 5px;
	}

	.goods_imgiconwrap {
		position: relative;
		width: 90%;
		height: auto;
		margin: 0 auto;
		padding: 0;
	}

	.goods_imgiconwrap .goods_icon_type {
		position: absolute;
		right: -2%;
		top: -22%;
		width: 38%;
	}

	.goods_imgiconwrap .goods_icon_set {
		position: absolute;
		left: 3%;
		bottom: 2%;
		width: 22%;
	}

	.goods_imgiconwrap .goods_icon_option2 {
		position: absolute;
		right: 4%;
		bottom: 7%;
		width: 38%;
	}

	.goods_imgiconwrap2 {
		position: relative;
		width: 80%;
		height: auto;
		margin: 0 auto;
		padding: 0;
	}

	.goods_imgiconwrap2 .goods_icon_type {
		position: absolute;
		right: -6%;
		top: -12%;
		width: 36%;
	}

	.goods_imgiconwrap2 .goods_icon_set {
		position: absolute;
		left: 0;
		bottom: 10%;
		width: 24%;
	}

	.goods_imgiconwrap2 .goods_icon_option2 {
		position: absolute;
		right: 0;
		bottom: 16%;
		width: 45%;
	}

	/* 箱セットのタブ切り替え */
	.set_tabs {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: auto 5%;
	}

	.set_tab_item {
		order: -1;
		position: relative;
		width: 48%;
		padding: 1% 0 1.5%;
		border: solid 2px #fc84a6;
		background-color: #ffffff;
		font-size: min(3vw, 15px);
		font-weight: bold;
		text-align: center;
		color: #fc84a6;
		line-height: 1.5;
	}

	.set_tab_item::after {
		content: "";
		display: block;
		position: absolute;
		bottom: -1em;
		left: 50%;
		width: 0;
		height: 0;
		margin-left: -0.5em;
		border-style: solid;
		border-width: 1em 0.6em 0 0.6em;
		border-color: transparent transparent transparent transparent;
	}

	.set_tabs input:checked+.set_tab_item {
		background-color: #fc84a6;
		color: #fff;
		font-size: min(3vw, 15px);
	}

	.set_tabs input:checked+.set_tab_item::after {
		border-top-color: #fc84a6;
	}

	.set_tabs input:not(:checked)+.set_tab_item:hover {
		opacity: 0.75;
		cursor: pointer;
	}

	.set_tab_item .text_large {
		display: block;
	}

	input[name="set_tab_item"] {
		display: none;
	}
	input[name="set_tab_item2"] {
		display: none;
	}
	.set_tab_content {
		display: none;
		width: 100%;
		padding: 5% 0 0;
		clear: both;
		overflow: hidden;
	}

	/*選択されているタブのコンテンツのみを表示*/
	#set6:checked~#set6_content,
	#set12:checked~#set12_content {
		display: block;
	}
	#set6_2:checked~#set6_2_content,
	#set12_2:checked~#set12_2_content {
			display: block;
	}
	/* 横長商品ボックス */
	.item_h_box {
		display: flex;
		align-items: center;
		position: relative;
		width: 100%;
		margin-bottom: 5%;
		padding: 4% 5%;
		border: solid 2px #fc84a6 !important;
		box-sizing: border-box;
	}

	.item_h_box_main {
		width: 50%;
	}

	.item_h_box_detail {
		flex: 1;
	}

	.item_h_box .new_icon {
		position: absolute;
		top: 0;
		left: 1.5%;
		width: 8.5%;
		margin-top: 1.5%;
	}

	.item_h_box .brand_logo {
		margin-bottom: 5%;
	}

	.item_h_box .syouhin_img {
		margin-bottom: 0;
	}

	/* フェード */
	.fade {
		display: none;
	}
		.fade.active {
		display: block;
	}
		/* 初期状態: 非表示 */
	.recommend_subsc_area.fade {
		display: none;
		transition: opacity 0.4s ease;
		/* フェードインのトランジション */
	}
		/* activeクラスが付与された場合: 表示 */
	.recommend_subsc_area.fade.active {
		display: block;
		opacity: 1;
	}
}