@charset "UTF-8";
/* CSS Document */

#contentWrap {

}
.flex01 {}
.flex01 .itemWrap .select {
	width: 100%;
	background-color: #bed1db;
	container-type: inline-size;
	padding: 20px 20px 5px;
}
.flex01 .itemWrap .select h4 {
	font-size: clamp(13px, 4.4cqw, 50px);
	position: relative;
	margin-left: 10cqw;
	margin-bottom: 3cqw;
}

.flex01 .itemWrap .select h4::before {
	content: "　";
	width: 10cqw;
	height: 10cqw;
	background-image: url("../images/ico-select.svg");
	background-position: center center;
	background-size: cover;
	position: absolute;
	right: 101%;
	top: 50%;
	transform: translateY(-50%);

}
.flex01 .itemWrap .select span {
font-size: 50%;
	margin-left: 1em;
}
.flex01 .itemWrap .select .imgBox {
	width: 30.6%;
	max-width: 200px;
}
.flex01 .itemWrap .select .or {
	width: 38.4%;
	position: relative;
}
.flex01 .itemWrap .select .or img {
	position: absolute;
	width: 120%!important;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	z-index: 1;
}
.flex01 .itemWrap .select .caption{
	font-size: 10px;
	text-align: right;
	padding: 0.3em 0 0;
}




	
@media screen and (max-width: 959px){
	.flex01 .mainBox {
        width: 100%;
        max-width: 500px;
		margin: 0 auto;
    }
	
}

@media screen and (max-width: 599px){
	.flex01 .itemWrap .select {
		padding: 20px 20px 5px;
	}
	.flex01 .itemWrap .select h4 {
		font-size: clamp(13px, 10cqw, 50px);
		position: relative;
		margin-left: 0cqw;
		margin-bottom: 0cqw;
		text-align: center;
		padding-bottom: 10px;
	}

	.flex01 .itemWrap .select h4::before {
		width: 25cqw;
		height: 25cqw;
		top: 0%;
		right: auto;
		left: -5%;

	}
	.flex01 .itemWrap .select span {
		display: block;
	font-size: 46%;
		margin-left: 0em;
	}
	.flex01 .itemWrap .select .imgBox {
		width: 100%;
		max-width: 100%;
	}
	.flex01 .itemWrap .select .or {
		width: 90%;
		padding: 10% 0;
		margin: 0 auto;
	}
	.flex01 .itemWrap .select .caption{
		text-align: left;
		line-height: 1.3;
		padding-bottom: 1em;
	}

	
}