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

#contentWrap {

}
.flex01 {
	max-width: 1000px;
}


.flex01 .mainBox {
	width: 48%;
	max-width: 480px;
}

.kanta {
	width: 48%;
	padding: 15px;
	background-color: #efebe7;
	gap:20px 0;
	>div {
		width: 48%;
		container-type: inline-size;
		.figBox {
			background-color: #fff;
		}
	}
	h3 {
		padding: 0 14% 5px;
	}
	h4 {
		color: #fff;
		background-color: #cab19a;
		text-align: center;
		font-size: 8cqw;
	}
	p {
		text-align: justify;
		font-size: 6cqw;
		line-height: 1.3;
		padding: 0.5em 0;
	}
	p.caption {
		font-size: 10px;
	}

}
.kanta sup {
    font-size: 70%;
    top: -0.5em;
    display: inline-block;
	position: relative;

}

.itemWrap {
	max-width: 1000px;
	padding: 30px 0 0;
}
.itemWrap .itemBox {
	width: 22%;
}

#toile {
	padding-top: 5%;
}
#toile .itemWrap {
	width: 48%;
	padding-top: 0;
}
#toile .itemWrap .itemBox {
	width: 46%;
	max-width: 220px;
}

@media screen and (max-width: 959px){
	.flex01 .mainBox {
    width: 100%;
    max-width: 500px;
		margin: 0 auto;
  }
	.kanta {
    width: 100%;
		max-width: 500px;
		margin: 30px auto 0;
	}
	.itemWrap,#toile .itemWrap {
		width: 100%;
    max-width: 500px;
		padding-top: 30px;
		gap:20px 4%;
		.itemBox {
			width: 48%;
			max-width: 300px;
		}
	}

}
@media screen and (max-width: 599px){
	.kanta {
        width: 100%;
        max-width: 500px;
        margin: 30px auto 0;
		> div {
			width: 100%;
			max-width: 250px;
			margin: 0 auto;
		}
  }
	.itemWrap,#toile .itemWrap {
		width: 90%;
    max-width: 300px;
		.itemBox {
			width: 100%;
			max-width: 300px;
		}
	}

}