@charset "UTF-8";

.supportIndexLayout #main #c01 .cassette .read {
	font-size: 1.4rem;
	line-height: 1.5;
	text-align: center;
}

.supportIndexLayout #main #c01 .cassette .box01 li {
	border: 2px solid #284b8c;
	margin: 0 0 10px;
}

.supportIndexLayout #main #c01 .cassette .box01 li a {
	display: block;
	text-align: center;
	padding: 10px 0;
	position: relative;
}

.supportIndexLayout #main #c01 .cassette .box01 li a:link,
.supportIndexLayout #main #c01 .cassette .box01 li a:visited {
	text-decoration: none;
}

.supportIndexLayout #main #c01 .cassette .box01 li a i {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
}

			/* 【タブレット用のスタイル記述】 */
			@media screen and (min-width: 761px) {
				.supportIndexLayout #main #c01 .cassette .read {
					font-size: 1.875rem;
				}
				.supportIndexLayout #main #c01 .cassette .box01 {
					display: flex;
					justify-content: space-between;
				}
				.supportIndexLayout #main #c01 .cassette .box01 li {
					width: 32%;
				}
			}		
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1200px) {
			}

.supportIndexLayout #main #c01 .cassette .box02,
.supportIndexLayout #main #c01 .cassette .box03 {
	padding: 0 0 40px;
}

.supportIndexLayout #main #c01 .cassette .box03 .box03in > div {
	margin: 0 0 20px;
}

.supportIndexLayout #main #c01 .cassette .box03 .box03in > div:last-child {
	margin: 0;
}

.supportIndexLayout #main #c01 .cassette .box03 .box03in > div h4 {
	font-weight: normal;
}

			/* 【タブレット用のスタイル記述】 */
			@media screen and (min-width: 761px) {
				.supportIndexLayout #main #c01 .cassette .box02 .flex {
					display: flex;
					justify-content: space-between;
				}
				.supportIndexLayout #main #c01 .cassette .box02 .flex div {
					width: 48%;
				}
				.supportIndexLayout #main #c01 .cassette .box03 .box03in {
					display: flex;
					flex-wrap: wrap;
				}
				.supportIndexLayout #main #c01 .cassette .box03 .box03in > div {
					width: 48%;
					margin: 0 4% 20px 0;
				}
				.supportIndexLayout #main #c01 .cassette .box03 .box03in > div:nth-child(2n) {
					margin: 0 0 20px;
				}
			}		
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1200px) {
				.supportIndexLayout #main #c01 .cassette .box03 .box03in .flex {
					display: flex;
					justify-content: space-between;
				}
				.supportIndexLayout #main #c01 .cassette .box03 .box03in .flex div:nth-child(1) {
					width: 230px;
				}
				.supportIndexLayout #main #c01 .cassette .box03 .box03in .flex div:nth-child(2) {
					width: 320px;
				}
			}

.supportIndexLayout #main #c01 .cassette .box04 .btn a img {
	max-width: 280px;
}

			/* 【タブレット用のスタイル記述】 */
			@media screen and (min-width: 761px) {
				.supportIndexLayout #main #c01 .cassette .box04 {
					padding: 0 0 40px;
				}
				.supportIndexLayout #main #c01 .cassette .box04 .flex {
					display: flex;
					justify-content: space-between;
				}
				.supportIndexLayout #main #c01 .cassette .box04 .flex div {
					width: 48%;
				}
			}		
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1200px) {
			}


.supportIndexLayout #main #c02 {
	background: url(../img/c02_bg01.jpg) no-repeat center top;
}

.supportIndexLayout #main #c02 h2 span {
	background:rgba(0, 0, 0, 0) linear-gradient(#81C8FE 40%, #fff45c 70%, #81C8FE 70%) repeat scroll 0 0;
}

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

.supportIndexLayout #main #c02 .cassette h3 img {
	display: block;
	height: 50px;
	margin: 0 0 10px;
}

.supportIndexLayout #main #c02 .cassette h3 span {
	display: block;
	border-left: 3px solid #fff100;
	font-weight: normal;
	padding: 5px 0 5px 15px;
}

.supportIndexLayout #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;
}

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

			/* 【タブレット用のスタイル記述】 */
			@media screen and (min-width: 761px) {
				.supportIndexLayout #main #c02 .cassette h3 img {
					height: auto;
				}
				.supportIndexLayout #main #c02 .cassette h3 span {
					border-left: 5px solid #fff100;
				}
			}		
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1200px) {
			}

.supportIndexLayout #main #c02 #c0201 {
	padding: 0 10px;
}

.supportIndexLayout #main #c02 #c0201 .cassette .box01 {
	background: url(../img/c02_img01.jpg) no-repeat right bottom #fff;
	padding: 15px 15px 220px;
	margin: 0 0 40px;
}

.supportIndexLayout #main #c02 #c0201 .cassette .box01 .name {
	font-size: 1.4rem;
	padding: 0;
}

.supportIndexLayout #main #c02 #c0201 .cassette .box01 .name span {
	font-size: 1.125rem;
}

			/* 【タブレット用のスタイル記述】 */
			@media screen and (min-width: 761px) {
				.supportIndexLayout #main #c02 #c0201 .cassette {
					padding: 0 0 70px;
				}
				.supportIndexLayout #main #c02 #c0201 .cassette .box01 {
					max-width: 745px;
					box-sizing: border-box;
					padding: 15px 30px 10px;
					margin: 0 auto;
				}
				.supportIndexLayout #main #c02 #c0201 .cassette .box01 .name {
					font-size: 1.875rem;
				}
				.supportIndexLayout #main #c02 #c0201 .cassette .box01 p {
					width: 50%;
				}
				.supportIndexLayout #main #c02 #c0202 .cassette {
					position: relative;
					box-sizing: border-box;
					padding: 370px 0 60px;
				}
				.supportIndexLayout #main #c02 #c0202 .cassette .img {
					position: absolute;
					right: 0;
					top: 0;
					z-index: 1;
				}
				.supportIndexLayout #main #c02 #c0202 .cassette .textBox {
					position: relative;
					max-width: 780px;
					z-index: 2;
				}
			}		
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1200px) {
			}


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

			/* 【タブレット用のスタイル記述】 */
			@media screen and (min-width: 761px) {
				.supportIndexLayout #main #c02 #c0204 {
					background-size: auto;
					padding: 460px 0 0;
				}
				.supportIndexLayout #main #c02 #c0205 .cassette {
					position: relative;
					box-sizing: border-box;
					padding: 370px 0 60px;
				}
				.supportIndexLayout #main #c02 #c0205 .cassette .img {
					position: absolute;
					right: 0;
					top: 0;
					z-index: 1;
				}
				.supportIndexLayout #main #c02 #c0205 .cassette .textBox {
					position: relative;
					max-width: 780px;
					z-index: 2;
				}
			}		
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1200px) {
			}


.supportIndexLayout #main #c02 #c0206 .bnr {
	padding: 0 0 60px;
}

.supportIndexLayout #main #c02 #c0206 .cassette {
	border-left: 2px solid #124176;
	border-right: 2px solid #124176;
	padding: 15px 15px 0;
	margin: 0 auto 60px;
}

.supportIndexLayout #main #c02 #c0206 .cassette a:link,
.supportIndexLayout #main #c02 #c0206 .cassette a:visited {
	color: #f38f00;
}

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

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

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

			/* 【タブレット用のスタイル記述】 */
			@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 */