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

#contentWrap {

}
.flex01 {}

.flex02 {}
.flex02 .yokuso {
	width: 38%;
	background-color: #bed1db;
	padding: 5px 20px;
	color: #000;
}
.flex02 .yokuso h5 {
	width: 100%;
	padding: 10px 0;
}
.flex02 .yokuso .flex {
}
.flex02 .yokuso .flex .itemBox {
	width: 49%;
}
.flex02 .yokuso .flex .itemBox p {
	font-size: 18px;
	padding: 0.5em 0;
}
.flex02 .yokuso p.caption {
	font-size: 10px;
	line-height: 1.3;
}
.flex03 {
	padding-top: 3%;
}
.flex03 .leftBox {
	width: 48.5%;
	max-width: 580px;
	background-color: #0079aa;
	color: #fff;
	padding: 25px;
	.txtBox {
		width: 50%;
		container-type: inline-size;
		h4 {
			border-top: rgba(255,255,255,0.6) solid 1px;
			border-bottom: rgba(255,255,255,0.6) solid 1px;
			text-align: center;
			font-size: 6.9cqw;
			padding: 0.3em 0;
			margin-bottom: 0.8em;
		}
		
	}
	.imgBox {
		width: 46.6%;
		max-width: 270px;
	}
	p {
			line-height: 1.3;
			padding-top: 0.5em;
		}
}
.flex03 .rightBox {
	width: 48.5%;
	max-width: 580px;
	background-color: #bed1db;
	padding: 10px 25px;
	container-type: inline-size;
	h4 {
		width: 100%;
		text-align: center;
		font-size: 4.0cqw;
		span {
			font-size: 70%;
		}
	}
	.itemBox {
		width: 48%;
	}
	.caption {
		font-size: 10px;
		text-align: right;
		width: 100%;
		padding-top: 1em;
	}
	.flex04 {
		position: relative;
		&::after {
			content: "SELECT";
			font-size: 2.7cqw;;
			width: 12.0cqw;
			height: 12.0cqw;
			background-color: #c79f62;
			color: #fff;
			border-radius: 100%;
			display: flex;
justify-content: center;
align-items: center;
			position: absolute;
			left: 50%;
			top: 40%;
			transform: translate(-50%,-50%);
		}
	}
}



	
@media screen and (max-width: 959px){
	.flex01 .mainBox {
        width: 100%;
        max-width: 500px;
		margin: 0 auto;
    }
	.flex02 .yokuso {
		width: 100%;
		padding-bottom: 20px;
	}	
	.flex02 .yokuso .flex .itemBox {
		width: 100%;
	}
	.flex03 .leftBox {
		width: 100%;
		max-width: 500px;
		margin: 0 auto;
	}
	.flex03 .rightBox {
		width: 100%;
		max-width: 500px;
margin: 30px auto 0;
	}
}

@media screen and (max-width: 599px){
	.flex03 .leftBox {
		margin-top: 30px;
	}
	.flex03 .leftBox .txtBox {
		width: 100%;
		max-width: 250px;
		margin: 0 auto;
	}
	.flex03 .leftBox .imgBox {
		width: 100%;
		max-width: 250px;
		margin: 15px auto;
	}
	.flex03 .leftBox p {
		font-size: 13px;
    }
	.flex03 .rightBox .itemBox {
        width: 100%;
    }
	.flex03 .rightBox h4 {
        font-size: 20px;
			padding-bottom: 0.5em;
			span {
				display: block;
		}
	}
		.flex03 .rightBox .flex04::after {
		  font-size: 3.7cqw;
		  width: 20.0cqw;
		  height: 20.0cqw;
		  position: absolute;
		  left: 50%;
		  top: 46%;
		  transform: translate(-50%, -50%);
		}
	.flex03 .rightBox .flex04 p {
		font-size: 13px;
		padding-bottom: 0.5em;
	}
	.flex03 .rightBox .caption {
        font-size: 10px;
        text-align: left;
		line-height: 1.3;
    }
	.flex03 .rightBox .flex04 {
		max-width: 300px;
		margin: 0 auto;
    }

	
}