@charset "utf-8";

#products-area {
	background: var(--products-type-back);
}

.products-top {
	padding: 45px 0 80px;
	background: var(--products-top-back);
}

.products-top h3 {
	font-size: 3.4rem;
	color: var(--products-title);
	text-align: center;
	margin-bottom: 60px;
}

section.products {
	max-width: 1360px;
	margin: 0 auto;
	width: 100%;
}

.nav {
	width: calc(100VW - 20px);
	max-width: 1360px;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	gap: 0 10px;
	margin: 0 auto;
}

.nav_type,
/*.nav_price,*/
.nav_studychair {
	padding: 30px 0;
	/*width: calc(100% / 3);
	max-width: calc((100% / 3) - 10px);*/
	width: calc(100% / 2);
	max-width: calc((100% / 2) - 5px);
	height: 90px;
	text-align: center;
	color: #ffffff;
	font-weight: bold;
	font-size: 2.8rem;
	cursor: pointer;
	position: relative;
}

.nav_type::after,
/*.nav_price::after,*/
.nav_studychair::after {
	position: absolute;
	z-index: 10;
	display: block;
	margin: 0 auto;
	height: calc(30px / 2 * tan(60deg));
	width: 46px;
	clip-path: polygon(0 0, 100% 0%, 50% 100%);
	background: var(--products-arrow);
}

.nav_type {
	background: var(--products-type);
}

/*.nav_price {
	background: var(--products-price);
}*/



.nav_studychair {
	background: var(--products-price);
}

/* ラジオボタン非表示 */
input[name="nav_item"] {
	display: none;
}

#type,
/*#price,*/
#studychair {
	margin: 0 auto;
	display: none;
}

#type:checked~.type,
/*#price:checked~.price,*/
#studychair:checked~.studychair {
	display: block;
}

#type:checked~.nav_type {
	border-top: 5px solid var(--products-type);
	background: var(--products-select-back);
	color: var(--Text-default);
}

#studychair:checked~.nav_studychair {
	border-top: 5px solid var(--products-price);
	background: var(--products-select-back);
	color: var(--Text-default);
}

.select {
	margin: 0 auto 50px;
	width: calc(100vw - 20px);
	max-width: 1360px;
	border-bottom-right-radius: 30px;
	border-bottom-left-radius: 30px;
	background: var(--products-select-back);
}

.products-item {
	max-width: 1200px;
	margin: 50px auto 0;
	width: calc(100vw - 20px);
}

.select-discription {
	padding: 50px 0 0;
	text-align: center;
}

div.type-box {
	width: 100%;
	max-width: 350px;
	margin: auto;
}

div.type-box:last-child {
	padding-right: 2px;
}

div.type-title {
	font-weight: bold;
	padding-bottom: 5px;
	padding: 10px;
	color: #ffffff;
	margin: 30px auto 0;
	border-radius: 12px 12px 0 0;
	text-align: center;
	-webkit-border-radius: 12px 12px 0 0;
	-moz-border-radius: 12px 12px 0 0;
	-ms-border-radius: 12px 12px 0 0;
	-o-border-radius: 12px 12px 0 0;
}

div.type-title h4 {
	font-size: 1.8rem;
	font-weight: bold;
	margin-bottom: 5px;
	line-height: 1.5em;
}

div.type-discription {
	margin: 60px 0;
}

.model-basic {
	background: var(--products-basic);
}

.model-unit {
	background: var(--products-unit);
}

.model-simple {
	background: var(--products-simple);
}

div.type-style {
	background: #ffffff;
	padding-bottom: 20px;
	margin: 0 auto 50px;
	border-radius: 0 0 12px 12px;
	-webkit-border-radius: 0 0 12px 12px;
	-moz-border-radius: 0 0 12px 12px;
	-ms-border-radius: 0 0 12px 12px;
	-o-border-radius: 0 0 12px 12px;
}

div.type-style h5 {
	font-size: 1.8rem;
	font-weight: bold;
	padding: 20px 0;
	text-align: center;
}

div.type-style ul {
	margin: 0 auto;
	font-size: 1.8rem;
	width: 70%;
}

div.type-style img {
	display: block;
	max-width: 280px;
	margin: 20px auto 5px;
}

div.type-style div.arrow a {
	display: block;
	margin: 0 auto;
	height: calc(30px / 2 * tan(60deg));
	width: 46px;
	clip-path: polygon(0 0, 100% 0%, 50% 100%);
	background: var(--products-arrow);
}

.lineup {
	background: var(--products-lineup-back);
	max-width: 1200px;
	margin: 0 auto;
	padding-bottom: 70px;
	margin-bottom: 50px;
}

.lineup h4 {
	color: #ffffff;
	height: 120px;
	text-align: center;
	font-size: 3.2rem;
	padding: 44px 0;
	font-weight: bold;
}

.lineup p {
	text-align: center;
	margin-bottom: 60px;
}

.type-img {
	width: 100%;
	padding: 10px;
	max-width: 980px;
	margin: 0 auto 80px;
}

.desk {
	text-align: center;
	width: 100%;
	max-width: 910px;
	margin: 0 auto;
}

.desk-item {
	max-width: 220px;
	margin: 0 auto;
}

.desk-item img {
	margin-bottom: 30px;
}

.desk-item dl dt {
	font-size: 1.8rem;
	font-weight: bold;
}

.desk-item dl dd.price {
	color: #306574;

}

#price {
	width: 100%;
	max-width: 1360px;
}

.price-area {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
}

.price-area .product-type {
	background: var(--price-type);
	margin-bottom: 10px;
}


/*チェックボックス非表示 */
.price_item {
	display: none;
}

.price-list {
	margin: 10px auto;
}


.acd_price {
	width: 100%;
	padding: 10px;
	text-align: center;
	background: #a50404;
}

.price-list label {
	display: block;
	margin-bottom: 1px;
	font-weight: bold;
	font-size: 2.8rem;
	text-align: center;
	padding: 10px 0;
	background: var(--products-price-list);
	color: #ffffff;
}

.model-list {
	display: flex;
	justify-content: space-around;
	gap: 2%;
	padding: 10px;
}

.model-list li {
	width: 100%;
	max-width: 250px;
	margin-bottom: 20px;
	text-align: center;
}

.product-type {
	opacity: 0;
	height: 0;
	transition: 0.3s;
	/*アニメーション速度*/
	visibility: hidden;
	padding: 5px;
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-ms-border-radius: 20px;
	-o-border-radius: 20px;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-ms-transition: 0.3s;
	-o-transition: 0.3s;
}

.price_item:checked+.acd_price+.product-type {
	height: auto;
	visibility: visible;
	transition: 0.3s;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-ms-transition: 0.3s;
	-o-transition: 0.3s;
	opacity: 1;
}

/*プラスアイコンの横線*/
.acd_price::before,
.acd_price::after {
	position: absolute;
	top: 25px;
	/*縦位置*/
	right: 18px;
	/*横位置*/
	content: '';
	/*文字や画像など*/
	display: inline-block;
	width: 13px;
	/*横幅*/
	height: 13px;
	/*縦幅*/
	border-top: 2px solid #fff;
	/*横線*/
	/*水平方向の移動距離*/
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
}

/*プラスアイコンの縦線*/
.acd_price::after {
	top: 19px;
	/*縦位置*/
	right: 30px;
	transform: rotate(90deg);
	/*横位置*/
	transition: 0.3s;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-ms-transition: 0.3s;
	-o-transition: 0.3s;
}

.price_item:checked+.acd_price::after {
	top: 25px;
	right: 25px;
	transform: translate3d(0, 0, 0);
	/*回転量*/
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transition: 1s;
	-webkit-transform: rotate(0deg);
}





#studychair {
	width: 100%;
	margin: -70px auto 0;
}

section.studychair {
	padding: 70px 0 80px;
	background: var(--products-top-back);
	margin-top: 0;
}


h3.model-chair {
	background: var(--products-chair);
	color: #ffffff;
	height: 120px;
	text-align: center;
	font-size: 3.2rem;
	padding: 44px 0;
	font-weight: bold;
	width: 100%;
	height: 70px;
	margin-bottom: 10px;
	padding: 20px 0;
}

.question {
	font-size: 2.0rem;
	font-weight: bold;
	padding: 10px;
	margin-bottom: 0 !important;

}

.attention {
	display: flex;
	width: 100%;
	max-width: 600px;
	margin: 20px auto;
	justify-content: space-between;
}

.instructions div {
	position: relative;
	padding-left: 70px;
	margin: 10px 20px;
}

.instructions div::before {
	content: url(/img/c/theme/studydeskday/main/products/batsu.png);
	position: absolute;
	top: 15px;
	left: 5px;
}

.instructions p {
	text-align: left;
	margin: 0;
}

.instructions h4 {
	position: relative;
	text-align: left;
	height: auto;
	padding: 0;
	color: #003349;
	font-size: 3.6rem;
	margin-bottom: 30px;
	display: inline;
	z-index: 10;
}

.instructions h4::after {
	content: "";
	position: absolute;
	height: 15px;
	background: #e63d30;
	width: 100%;
	bottom: 5px;
	left: 0;
	z-index: -10;
}

.att-image {
	margin: 40px 10px;
}

.child-impotant {
	margin: 30px;
	color: var(--Text-default);
}

.child-impotant p {
	font-size: 2.0rem;
	margin: 20px;
}

.child-impotant h3 {
	font-size: 2.4rem;
	margin: 20px;
	color: var(--Text-default);
}

.child-impotant h3 span {
	position: relative;
	padding: 10px;
	color: var(--products-chair);
	font-size: 4.6rem;
	vertical-align: -5px;
	text-shadow: 5px 5px 2px var(--chair-shadow);
	z-index: 0;
}

.child-impotant h3 span::after {
	content: "";
	display: inline-block;
	position: absolute;
	border-bottom: 6px dotted var(--products-chair);
	bottom: 0;
	left: 0;
	z-index: -10;
	height: 5px;
	width: 100%;
}

div.recommend {
	text-align: center;
	margin: 30px 0;
}

.recommend h3 {
	position: relative;
	display: inline-block;
	margin: 20px 10px !important;
	padding: 20px !important;
	min-width: 5em;
	max-width: 100vw;
	text-align: center;
	color: #003349;
	font-size: 3.8rem;
	background: #ffffff;
	border-radius: .5em;
	border: 2px solid #003349;
	z-index: 0;
}

.recommend h3:before {
	content: "";
	position: absolute;
	top: 98%;
	left: 50%;
	margin-left: -14px;
	border: 15px solid transparent;
	border-top: 15px solid #ffffff;
	z-index: 10;
}

.recommend h3:after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -15px;
	border: 16px solid transparent;
	border-top: 16px solid #003349;
	z-index: -10;
}



.recommend h3 {
	margin: 0;
	padding: 10px;
}



.support_title {
	color: var(--products-chair);
}

.support_title h4 {
	color: var(--products-chair);
	font-size: 3.8rem;
	font-weight: bold;
	height: 50px;
	padding: 10px;
	;
}

.support p {
	font-size: 2.2rem;
	font-weight: bold;
	line-height: 1.5em;
	margin-bottom: 30px;
}

.support_title p {
	font-size: 2.4rem;
	font-weight: bold;
}

.support img {
	max-height: 190px;
	object-fit: contain;
}

.support p.thefirst {
	background: var(--products-chair);
	color: #ffff;
	padding: 10px;
	margin: 0 20px 5px;
	clip-path: polygon(0 0, 95% 0, 100% 100%, 5% 100%);
}

.small {
	font-size: 1.6rem;
	font-weight: normal;

}

.other {
	text-align: center;
	font-size: 2.8rem;
	font-weight: bold;
	padding: 10px;
}


.fukidashi {
	max-width: 130px;
	margin: 0 auto 10px;
	;
}

dd.ks-discript {
	height: 100vh;
	max-height: 160px;
}

.icon ul {
	display: flex;
	gap: 10px;
}

.icon ul li {
	width: calc(100% /2);
	background: var(--type-icon);
	color: #ffffff;
	font-size: 1.4rem;
	font-weight: bold;
	text-align: center;
	margin: 0 auto;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
}

.chair-icon ul {
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100vh;
	max-height: 160px;
}

.chair-icon ul li {
	text-align: center;
	color: #fff;
	background: var(--products-chair);
	font-size: 1.2rem;
	font-weight: bold;
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-ms-border-radius: 20px;
	-o-border-radius: 20px;
}


@media screen and (max-width: 768px) {
	.products-top {
		padding: 0;
		background: var(--products-top-back);
	}

	section.products {
		max-width: 576px;
		margin: 0 auto;
		width: 100%;
	}


	section.products ul.nav li.nav-item {
		height: 60px;
		border-radius: 10px;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		-ms-border-radius: 10px;
		-o-border-radius: 10px;
	}

	section.products ul.nav li.nav-item a {
		font-size: 2.12rem;
		padding: 10px 0;
	}


	.nav_type,
	/*.nav_price,*/
	.nav_studychair {
		font-size: 2.2rem;
	}

	.select {
		/* セレクトタイプセレクター　表示時*/
		/*margin-top: 60px;*/
		margin-top: 0px;
		max-width: 756px;
	}

	.select-discription {
		padding: 30px 0 20px;
		text-align: center;
	}


	div.type-box {
		max-width: 700px;
	}



	div.type-title {
		padding: 10px;
		margin: 10px auto 0;
		border-radius: 12px 12px 0 0;
		-webkit-border-radius: 12px 12px 0 0;
		-moz-border-radius: 12px 12px 0 0;
		-ms-border-radius: 12px 12px 0 0;
		-o-border-radius: 12px 12px 0 0;
	}

	div.type-title h4 {
		font-size: 2.2rem;
	}

	div.type-style {}

	div.type-style h5 {
		padding: 20px 0 10px;
		/*width: 50%;*/
	}

	/*div.type-style ul {
		width: 50%;
		max-width: 300px;

	}

	div.type-img {
		width: 50%;
		max-width: 250px;
		margin: 0;
	}*/



	div.type-style {
		padding-bottom: 10px;
		margin: 0 auto 20px;
	}

	div.type-style img {
		display: block;
		max-width: 280px;
		margin: 10px auto 20px;
	}

	div.type-style div.arrow a {
		width: 30px;
		height: 30px;

	}

	div.type-style div.arrow a::after {
		top: 10px;
		left: 5px;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-top: 15px solid #ffffff;
	}

	.lineup {
		width: calc(100vw - 20px);
		max-width: 768px;
		padding-bottom: 10px;
		margin-bottom: 20px;
	}

	.lineup h4 {
		width: 100%;
		height: 70px;
		margin-bottom: 10px;
		padding: 20px 0;
	}

	div.type-discription {
		margin: 30px auto;
		width: calc(100% - 15px);
	}

	div.type-discription p {
		text-align: left;
	}


	.lineup p {
		margin-bottom: 20px;
	}

	.type-img {
		width: 100%;
		max-width: 980px;
		padding: 10px;
		margin: 0 auto 20px;
	}


	.desk-item {
		padding: 10px;
		max-width: calc(100% - 20px);
		margin: 10px auto;
		text-align: left;
		border: 1px solid #d4d4d4;
		border-radius: 20px;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		-ms-border-radius: 20px;
		-o-border-radius: 20px;
	}

	.desk-item:active {
		border: 1px solid #d4d4d4;
		background: #949494;
	}

	.desk-item:first-child {
		border-top: 1px solid #d4d4d4;
	}

	.desk-item img {
		margin-bottom: 0;
	}

	.desk-item dl {
		padding-left: 2em;
	}

	.desk-item dl dt {
		font-size: 1.6rem;
		font-weight: bold;
	}

	h3.model-chair {
		font-size: 2.4rem;
		line-height: 1.5em;
		height: 100px;
		margin-bottom: 10px;
		padding: 10px 0;
	}

	.attention {
		flex-direction: column-reverse;
		margin: 0;
	}

	.attention div {
		margin: 20px auto;
	}

	.instructions p {
		margin-bottom: 0;
		width: 100%;
	}

	.instructions h4 {
		font-size: 3.0rem;
		padding-top: 0;
	}

	.instructions h4::after {
		bottom: 20px;
	}

	dd.ks-discript {
		height: 100vh;
		max-height: 100px;
	}

	.fukidashi {
		display: block;
		margin: 10px auto 20px;
	}

	.child-impotant h3 {
		line-height: 3em;
	}

	.support_title h4 {
		height: 100px;
	}

	.support img {
		max-height: 250px;
		margin-bottom: 10px;
	}

	.chair-icon ul {
		flex-direction: row;
		flex-wrap: wrap;
		max-height: 80px;
	}

	.chair-icon ul li {
		width: 50%;
		max-width: calc(50% - 10px);
		height: 30px
	}
}