@charset "UTF-8";

body {
	background-image: url(../common/img/bg02.png);
	background-repeat: repeat-y;
	background-position: left top;
	background-size: 100% auto;
	background-color: #fff;
}

.indexLayout#container {
	padding: 0;
}

.indexLayout #mainImg img {
	width: 100%;
}

			/* 【タブレット用のスタイル記述】 */
			@media screen and (min-width: 761px) {
			}
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1000px) {
			}
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1300px) {
			}


.indexLayout #main #c01 .bg {
	text-align: center;
}

.indexLayout #main #c01 .bg img {
	width: 92%;
	max-width: 1298px;
}

.indexLayout #main #c01 .box {
	background: url(../img/01_bg01.png) no-repeat center center / cover;
	color: #fff;
	padding: 65px 0 0;
	font-size: 1.6rem;
}

.indexLayout #main #c01 .box .cassette {
	line-height: 3;
}

			/* 【タブレット用のスタイル記述】 */
			@media screen and (min-width: 761px) {
				.indexLayout #main #c01 .box {
					font-size: 1.8rem;
				}
			}
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1000px) {
				.indexLayout #main #c01 .box {
					font-size: 2.2rem;
				}
			}
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1300px) {
			}


.indexLayout #main #c02 {
	padding: 65px 0 0;
}

.indexLayout #main #c02 .bg img {
	width: 100%;
}

			/* 【タブレット用のスタイル記述】 */
			@media screen and (min-width: 761px) {
				.indexLayout #main #c02 {
					position: relative;
					padding: 130px 0 0;
				}
				.indexLayout #main #c02 .cassette .box {
					padding: 0 53% 0 0;
				}
				.indexLayout #main #c02 .bg {
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 50vw;
					max-width: 1020px;
				}
			}
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1000px) {
				.indexLayout #main #c02 .cassette .box {
					padding: 0 56% 0 40px;
				}
			}
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1300px) {
				.indexLayout #main #c02 {
					padding: 300px 0 235px;
				}
			}


.indexLayout #main #c03 {
	padding: 65px 0 0;
}

.indexLayout #main #c03 .cassette .box {
	background-color: #ced9e2;
	padding: 40px 15px 15px;
	margin: 0 0 25px;
}

.indexLayout #main #c03 .cassette .box .boxIn > ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.indexLayout #main #c03 .cassette .box .boxIn > ul > li {
	width: 48%;
	font-size: 1.2rem;
	line-height: 1.4;
	font-family: Noto Sans JP;
	font-weight: 500;
}

.indexLayout #main #c03 .cassette .box .boxIn > ul > li img {
	width: 100%;
	display: block;
	margin: 0 0 10px;
}

			/* 【タブレット用のスタイル記述】 */
			@media screen and (min-width: 761px) {
				.indexLayout #main #c03 .cassette .box {
					padding: 40px 30px 15px;
				}
				.indexLayout #main #c03 .cassette .box .boxIn > ul {
					justify-content: space-evenly;
				}
				.indexLayout #main #c03 .cassette .box .boxIn > ul > li {
					width: 30%;
					font-size: 1.4rem;
				}
				.indexLayout #main #c03 .cassette .box .boxIn > ul > li img {
					margin: 0 0 15px;
				}
			}
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1000px) {
				.indexLayout #main #c03 .cassette .box {
					padding: 80px 80px 55px;
				}
				.indexLayout #main #c03 .cassette .box .boxIn > ul {
					justify-content: space-between;
				}
				.indexLayout #main #c03 .cassette .box .boxIn > ul > li {
					width: 18%;
				}
			}
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1300px) {
				.indexLayout #main #c03 {
					padding: 0;
				}
				.indexLayout #main #c03 .cassette .box {
					padding: 80px 100px 55px;
				}
				.indexLayout #main #c03 .cassette .box .boxIn > ul > li {
					width: 188px;
					font-size: 1.6rem;
				}
			}


.indexLayout #main #c04 {
	padding: 0 0 65px;
	background: url(../img/04_bg01.jpg) no-repeat center top / 100% auto;
}

.indexLayout #main #c04 .cassette .flex .read {
	font-size: 1.6rem;
}

			/* 【タブレット用のスタイル記述】 */
			@media screen and (min-width: 761px) {
				.indexLayout #main #c04 {
					padding: 65px 0;
				}
				.indexLayout #main #c04 .cassette .flex div {
					width: 47%;
				}
				.indexLayout #main #c04 .cassette .flex .read {
					font-size: 1.8rem;
				}
			}
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1000px) {
				.indexLayout #main #c04 .cassette .flex {
					padding: 0 0 0 40px;
				}
				.indexLayout #main #c04 .cassette .flex .read {
					font-size: 2.5rem;
				}
			}
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1300px) {
				.indexLayout #main #c04 {
					padding: 65px 0 120px;
				}
			}


/* clearfix
------------------------------------*/

.clearfix:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
overflow:hidden;
}

.clearfix {
display: inline-block;
}

/* exlude MacIE5 \*/
* html .clearfix {
height: 1%
}

.clearfix {
display:block;
}
/* end MacIE5 */