@charset "UTF-8";

.indexLayout #mainImg {
	margin: 0 15px 70px;
}

.indexLayout #mainImg ul li {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.indexLayout #mainImg ul li:nth-child(1) {
	background-image: url(../img/main01_sp.jpg);
}

.indexLayout #mainImg ul li:nth-child(2) {
	background-image: url(../img/main03_sp.jpg);
}

.indexLayout #mainImg ul li:nth-child(3) {
	background-image: url(../img/main04_sp.jpg);
}

.indexLayout #mainImg ul li:nth-child(4) {
	background-image: url(../img/main05_sp.jpg);
}

.indexLayout #mainImg ul li a {
	display: block;
	height: 500px;
	box-sizing: border-box;
	padding: 310px 0 30px;
}

.indexLayout #mainImg ul li a img {
	max-height: 160px;
}

			/* 【タブレット用のスタイル記述】 */
			@media screen and (min-width: 761px) {
				.indexLayout #mainImg {
					margin: 0 20px 70px;
				}
				.indexLayout #mainImg ul li a {
					width: 96%;
					margin: 0 auto;
					height: 600px;
					padding: 320px 0 0;
					text-align: left;
				}
				.indexLayout #mainImg ul li:nth-child(1) {
					background-image: url(../img/main01.jpg);
				}

				.indexLayout #mainImg ul li:nth-child(2) {
					background-image: url(../img/main03.jpg);
				}

				.indexLayout #mainImg ul li:nth-child(3) {
					background-image: url(../img/main04.jpg);
				}

				.indexLayout #mainImg ul li:nth-child(4) {
					background-image: url(../img/main05.jpg);
				}
				
				.indexLayout #mainImg ul li a img {
					max-height: 230px;
					margin: 0;
				}
			}		
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1200px) {
				.indexLayout #mainImg ul li {
					height: 775px;
				}
			}

.indexLayout #c01 .flex p {
	margin: 0 0 30px;
}
.indexLayout #c01 .bnr_box01{
    max-width: 1200px;
    margin: 0 auto 60px;
}
.indexLayout #c01 .bnr_box01 .link_txt a{
    text-decoration: underline;
}

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

.indexLayout #c03 {
	padding: 0 0 40px;
}

.indexLayout #c03 .flex p {
	margin: 0 0 30px;
}

			/* 【タブレット用のスタイル記述】 */
			@media screen and (min-width: 761px) {
				.indexLayout #c03 {
					padding: 0 0 80px;
				}
				.indexLayout #c03 .flex {
					display: flex;
				}
				.indexLayout #c03 .flex p {
					width: 50%;
					margin: 0;
				}
				.indexLayout #c03 .flex p:nth-child(1) {
					padding: 0 0 15px;
				}
				.indexLayout #c03 .flex p:nth-child(2) {
					padding: 15px 0 0;
				}
			}		
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1200px) {
			}

.indexLayout #c04 {
	padding: 0 0 20px;
}

.indexLayout #c04 .cassette h2 {
	text-align: center;
	padding: 0 0 20px;
	font-size: 1rem;
}

.indexLayout #c04 .cassette h2 span {
	font-family: 'Oswald', sans-serif;
	font-weight: normal;
	font-size: 3.75rem;
	letter-spacing: 2px;
	padding: 0 0 0 2px;
	display: block;
	margin: 0 auto 10px;
	color: #333;
	background: transparent;
}

.indexLayout #c04 .cassette ul {
	background-color: #f4f7f9;
	padding: 7px 15px;
	margin: 0 0 40px;
}

.indexLayout #c04 .cassette ul li a {
	display: block;
	padding: 8px 0;
}

.indexLayout #c04 .cassette ul li a:link,
.indexLayout #c04 .cassette ul li a:visited {
	text-decoration: none;
	color: #333;
}

.indexLayout #c04 .cassette ul li a time {
	display: block;
	color: #637eb0;
}

.indexLayout #c04 .cassette .btn {
	text-align: center;
}

.indexLayout #c04 .cassette .btn a img {
	width: 220px;
}


			/* 【タブレット用のスタイル記述】 */
			@media screen and (min-width: 761px) {
				.indexLayout #c04 .cassette h2 span {
					font-weight: bold;
					font-size: 5rem;
				}
				.indexLayout #c04 .cassette ul {
					max-width: 880px;
					margin: 0 auto 40px;
					padding: 20px 30px;
				}
				.indexLayout #c04 .cassette ul li a {
					display: flex;
				}
				.indexLayout #c04 .cassette ul li a time {
					margin: 0 20px 0 0;
				}
			}		
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1200px) {
			}


.indexLayout #c05 {
	background-color: #e8f4fe;
	margin: 0 0 60px;
}

.indexLayout #c05 .flex .leftBox {
	padding: 30px 15px 10px;
}

.indexLayout #c05 .flex .leftBox h2 {
	text-align: center;
	padding: 0 0 20px;
	font-size: 1rem;
}

.indexLayout #c05 .flex .leftBox h2 span {
	font-family: 'Oswald', sans-serif;
	font-weight: normal;
	font-size: 3.75rem;
	letter-spacing: 2px;
	padding: 0 0 0 2px;
	display: block;
	margin: 0 auto 10px;
	color: #333;
	background: transparent;
}

.indexLayout #c05 .flex .leftBox p {
	line-height: 2;
	padding: 0 0 20px;
}

.indexLayout #c05 .flex .leftBox .btn {
	text-align: center;
	padding: 0 0 20px;
}

.indexLayout #c05 .flex .leftBox .btn a img {
	width: 220px;
}

.indexLayout #c05 .flex .rightBox ul {
	display: flex;
	flex-wrap: wrap;
}

.indexLayout #c05 .flex .rightBox ul li {
	width: 50%;
}

.indexLayout #c05 .flex .rightBox ul li p {
    position: relative;
	width: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.indexLayout #c05 .flex .rightBox ul li p:before {
    content: "";
    display: block;
    padding-top: 100%;
}

.indexLayout #c05 .flex .rightBox ul li p span {
	display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

			/* 【タブレット用のスタイル記述】 */
			@media screen and (min-width: 761px) {
				.indexLayout #c05 .flex .leftBox h2 span {
					font-weight: bold;
					font-size: 5rem;
				}
				.indexLayout #c05 .flex .rightBox ul li {
					width: 25%;
				}
			}		
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1200px) {
				.indexLayout #c05 .flex {
					display: flex;
				}
				.indexLayout #c05 .flex .leftBox {
					width: 30%;
					padding: 50px 35px 30px;
				}
				.indexLayout #c05 .flex .rightBox {
					width: 70%;
				}
			}

.indexLayout #c06 {
	padding: 0 0 20px;
}

.indexLayout #c06 li {
	margin-bottom: 20px;
	text-align: center;
}

.indexLayout #c06 li img {
	max-width: 100%;
}
			/* 【タブレット用のスタイル記述】 */
			@media screen and (min-width: 761px) {
				.indexLayout #c06 ul.box01{
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
				}
				.indexLayout #c06 li {
					width: 32%;
				}
			}		
			/* 【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 */