@charset "UTF-8";

.messageIndexLayout #main #c01 {
	background: url(../img/c01_img01.jpg) no-repeat center center / cover;
	height: 310px;
	box-sizing: border-box;
	padding: 70px 0 0 15px;
	margin: 0 0 40px;
}

.messageIndexLayout #main #c01 .cassette h3 {
	color: #fff;
	font-size: 1.4rem;
	font-weight: normal;
	background: url(../img/line01.png) no-repeat left bottom;
	padding: 0 0 30px;
	margin: 0 0 20px;
}

.messageIndexLayout #main #c01 .cassette p {
	color: #fff;
	font-size: 1.2rem;
	line-height: 2rem;
}

.messageIndexLayout #main #c01 .cassette p span {
	display: block;
	font-size: 0.8rem;
}

			/* 【タブレット用のスタイル記述】 */
			@media screen and (min-width: 761px) {
				.messageIndexLayout #main #c01 {
					height: 400px;
					padding: 100px 0 0 30px;
				}
				.messageIndexLayout #main #c01 .cassette h3 {
					font-size: 1.875rem;
				}
				.messageIndexLayout #main #c01 .cassette p {
					font-size: 1.5rem;
				}
				.messageIndexLayout #main #c01 .cassette p span {
					font-size: 1rem;
				}
			}		
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1200px) {
				.messageIndexLayout #main #c01 {
					height: 680px;
					padding: 230px 0 0 50px;
				}
			}

.messageIndexLayout #main #c02 .cassette h3 {
	color: #284b8c;
	margin: 0;
	background: none;
}

.messageIndexLayout #main #c02 .cassette .textBox {
	background: url(../img/bg01.png) no-repeat left top rgba(255,255,255,0.9);
	padding: 30px 25px 0;
	margin: 0 10px;
}

.messageIndexLayout #main #c02 .cassette .img {
	padding: 0 0 40px;
}

.messageIndexLayout #main #c02 #c0203 {
	background: url(../img/c02_img02.jpg) no-repeat center top;
	background-size: contain;
	padding: 180px 0 0;
}

.messageIndexLayout #main #c03.cassette {
	background-color: #e8f4fe;
	padding: 0;
	margin: 20px auto 50px;
}

#contents #main #c03.cassette .pdgBox {
	padding: 30px 20px 10px;
}
			/* 【タブレット用のスタイル記述】 */
			@media screen and (min-width: 761px) {
				.messageIndexLayout #main #c02 .cassette .textBox {
					padding: 30px 30px 10px;
				}
				.messageIndexLayout #main #c02 #c0202 .cassette {
					position: relative;
					box-sizing: border-box;
					padding: 370px 0 60px;
				}
				.messageIndexLayout #main #c02 #c0202 .cassette .img {
					position: absolute;
					left: 0;
					top: 0;
					z-index: -1;
				}
				.messageIndexLayout #main #c02 #c0203 {
					padding: 230px 0 0;
				}
				.messageIndexLayout #main #c02 #c0204 .cassette {
					position: relative;
					box-sizing: border-box;
					padding: 370px 0 60px;
				}
				.messageIndexLayout #main #c02 #c0204 .cassette .img {
					position: absolute;
					right: 0;
					top: 0;
					z-index: -1;
				}
				.messageIndexLayout #main #c02 #c0204 .cassette .textBox {
					max-width: 780px;
				}
				#contents #main #c03.cassette .pdgBox {
					padding: 40px 30px 20px;
				}
				.flexBox {
					display: flex;
				}
				.messageIndexLayout #main #c03.cassette .pdgBox .flexBox .textBox {
					width: 60%;
					margin-right: 3%;
				}
				.messageIndexLayout #c03.cassette .pdgBox .flexBox p.img {
					width: 37%;
				}
			}		
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1200px) {
				.messageIndexLayout #main #c02 #c0203 {
					background-size: auto;
					padding: 480px 0 0;
				}
			}

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


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