@charset "UTF-8";

.indexLayout #mainImg {
	background-image: url(../img/main01.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	height: 350px;
}

			/* 【タブレット用のスタイル記述】 */
			@media screen and (min-width: 761px) {
				.indexLayout #mainImg {
					height: 360px;
					box-sizing: border-box;
				}
			}
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1000px) {
			}

.indexLayout #main .cassette {
	width: 100%;
	padding: 0;
	box-sizing: border-box;
}

.indexLayout #main .cassette h2 {
	color: #009fe3;
	font-weight: normal;
	font-size: 180%;
	line-height: 1.2;
	padding: 0 10px 30px;
}

.indexLayout #main .cassette h3 {
	text-align: left;
}

			/* 【タブレット用のスタイル記述】 */
			@media screen and (min-width: 761px) {
				.indexLayout #main .cassette h2 {
					padding: 0 50px 30px;
				}
			}
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1000px) {
				.indexLayout #main .cassette {
					width: 100%;
				}
				.indexLayout #main .cassette h2 {
					padding: 30px 50px 70px;
					text-align: center;
				}
			}

.indexLayout #main #c01 .cassette .flex div.text {
	padding: 50px 10px 20px;
	background-color: #f7f7f7;
}

.indexLayout #main #c01 .cassette .flex div.img {
	background: url(../img/img01.jpg) no-repeat center center;
	background-size: cover;
	height: 300px;
}

.indexLayout #main #c01 .cassette .box01 {
	padding: 50px 10px 20px;
}

			/* 【タブレット用のスタイル記述】 */
			@media screen and (min-width: 761px) {
				.indexLayout #main #c01 .cassette .flex {
					display: flex;
				}
				.indexLayout #main #c01 .cassette .flex div.text {
					width: 55%;
					box-sizing: border-box;
					padding: 50px 50px 20px
				}
				.indexLayout #main #c01 .cassette .flex div.img {
					width: 45%;
					box-sizing: border-box;
					height: auto;
				}
				.indexLayout #main #c01 .cassette .box01 {
					padding: 50px 50px 20px;
				}
			}
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1000px) {
				.indexLayout #main #c01 .cassette .flex div.text {
					width: 55%;
					box-sizing: border-box;
					padding: 80px 50px 50px
				}
				.indexLayout #main #c01 .cassette .box01 {
					padding: 80px 50px 50px;
				}
			}


.indexLayout #main #c02 .cassette .box01 {
	padding: 0 10px 20px;
}

			/* 【タブレット用のスタイル記述】 */
			@media screen and (min-width: 761px) {
				.indexLayout #main #c02 .cassette .box01 {
					padding: 0 50px 20px;
				}
			}
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1000px) {
				.indexLayout #main #c02 .cassette .box01 {
					padding: 0 50px 50px;
				}
			}

.indexLayout #main #c03 .cassette {
	background: url(../img/norton.jpg) no-repeat 50% center;
	background-size: cover;
	padding: 50px 10px 20px;
	box-sizing: border-box;
	color: #fff;
}

.indexLayout #main #c03 .cassette div {
	padding: 0 30% 0 0;
}

.indexLayout #main #c03 .cassette div h3 {
	color: #fff;
}

.indexLayout #main #c03 a:link,
.indexLayout #main #c03 a:visited {
	color: #fff;
	text-decoration: none;
}

			/* 【タブレット用のスタイル記述】 */
			@media screen and (min-width: 761px) {
				.indexLayout #main #c03 .cassette {
					background: url(../img/norton.jpg) no-repeat center center;
					background-size: cover;
					padding: 80px 50px 50px;
				}
				.indexLayout #main #c03 .cassette div {
					padding: 0 50% 0 0;
				}
			}
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1000px) {
				.indexLayout #main #c03 .cassette {
					background: url(../img/norton.jpg) no-repeat center center;
					background-size: cover;
					padding: 150px 50px 120px;
					font-size: 120%;
				}
			}

.indexLayout #main #c04 {
	background-color: #DCDCDC;
	text-align: center;
	padding: 30px 0 0;
}

.indexLayout #main #c04 .cassette h3 {
	color: #333;
	text-align: center;
	padding: 0;
}

.indexLayout #main #c04 .cassette .box01 {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	width: 96%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 30px 0 0;
}

.indexLayout #main #c04 .cassette .box01 img {
	display: block;
	width: 100px;
	margin: 0 20px 50px;
	height: auto;
}

			/* 【タブレット用のスタイル記述】 */
			@media screen and (min-width: 761px) {
				.indexLayout #main #c04 {
					padding: 50px 0 0;
				}
				.indexLayout #main #c04 .cassette .box01 img {
					width: auto;
				}
			}
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1000px) {
			}

.indexLayout #main #c05 .cassette {
	padding: 0 10px 30px;
}

.indexLayout #main #c05 .cassette ul {
	overflow-y: scroll;
	height: 300px;
	padding: 10px 0;
}

.indexLayout #main #c05 .cassette ul li {
	border-bottom: 1px dotted #ccc;
	padding: 0 0 10px;
	margin: 0 0 15px;
}

.indexLayout #main #c05 .cassette ul li time {
	display: table;
	background-color: #8dbbdf;
	color: #fff;
	padding: 3px 10px;
	margin: 0 0 10px;
	font-size: 90%;
}

			/* 【タブレット用のスタイル記述】 */
			@media screen and (min-width: 761px) {
				.indexLayout #main #c05 .cassette {
					padding: 0 50px 50px;
				}
			}
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1000px) {
				.indexLayout #main #c05 .cassette {
					padding: 0 50px 80px;
				}
				.indexLayout #main #c05 .cassette ul li {
					display: flex;
				}
				.indexLayout #main #c05 .cassette ul li time {
					width: 130px;
					text-align: center;
					margin: 0 30px 0 0;
				}
			}

.indexLayout #main #c06 {
	padding: 50px 0 0;
}

.indexLayout #main #c06 .flex {
	display: flex;
	justify-content: center;
}

.indexLayout #main #c06 .flex .movie {
	width: 60%;
}

.indexLayout #main #c06 .flex .img {
	width: 35%;
}

.indexLayout #main #c06 .flex .img img {
	max-width: 100%;
}

			/* 【タブレット用のスタイル記述】 */
			@media screen and (min-width: 761px) {
				.indexLayout #main #c06 .flex .movie {
					width: 560px;
				}
				.indexLayout #main #c06 .flex .movie iframe {
					height: 315px;
				}
				.indexLayout #main #c06 .flex .img {
					width: 200px;
					text-align: right;
				}
			}
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1000px) {
			}


/* 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 */