@charset "UTF-8";

/*indexLayout
----------------------------*/

.indexLayout #mainImg {
	height: calc(100vh - 80px);
	background-color: #000;
	position: relative;
	z-index: 1;
}

.indexLayout #mainImg .slider li {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	height: calc(100vh - 80px) !important;
	animation: inout 8s;
}

@keyframes inout {
	0%   { transform: scale(1); }
	100%  { transform: scale(1.1); }
}

.indexLayout #mainImg .slider li#main01 {
	background-image: url(../img/main01.jpg);
}

.indexLayout #mainImg .slider li#main02 {
	background-image: url(../img/main02.jpg);
}

.indexLayout #mainImg .slider li#main03 {
	background-image: url(../img/main03.jpg);
}

.indexLayout #mainImg .slider li#main04 {
	background-image: url(../img/main04.jpg);
}

.indexLayout #mainImg #mainOver01 {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 100;
}

.indexLayout #mainImg #mainOver01 img {
	width: 100%;
	max-width: 100%;
	max-height: calc(100vh - 80px);
}

.indexLayout #mainImg #mainOver02 {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 100;
}

.indexLayout #mainImg #mainOver02 img {
	width: 100%;
	max-width: 100%;
	max-height: calc(100vh - 80px);
}

.indexLayout .rec_btn01 {
    background-color: #ff7000;
    z-index: 1000;
}
.indexLayout .rec_btn01:hover {
    border-color: #ff7000;
    background-color: #fff;
}
.indexLayout .rec_btn01 span::after {
    color: #ff7000;
}
.indexLayout .rec_btn01:hover span {
    border-color: #ff7000;
    color: #ff7000;
}

.indexLayout #mainImg .rec_btn01:hover {
    right: 5px;
    bottom: 15px;
}

.indexLayout a.mouseicon {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 100px;
	padding-top: 60px;
	z-index: 100;
	text-decoration: none;
	color: #fff;
}

.indexLayout a.mouseicon span {
	position: absolute;
	top: 0;
	left: 50%;
	width: 30px;
	height: 50px;
	margin-left: -15px;
	border: 2px solid #fff;
	border-radius: 50px;
	box-sizing: border-box;
}

.indexLayout a.mouseicon span::before {
	position: absolute;
	top: 10px;
	left: 50%;
	content: '';
	width: 6px;
	height: 6px;
	margin-left: -3px;
	background-color: #fff;
	border-radius: 100%;
	-webkit-animation: sdb 2s infinite;
	animation: sdb 2s infinite;
	box-sizing: border-box;
}

@-webkit-keyframes sdb {
	0% {
		-webkit-transform: translate(0, 0);
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
	80% {
		-webkit-transform: translate(0, 20px);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@keyframes sdb {
	0% {
		transform: translate(0, 0);
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
	80% {
		transform: translate(0, 20px);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

			/* 【タブレット用のスタイル記述】 */
			@media screen and (min-width: 761px) {
				.indexLayout #mainImg {
					height: calc(100vh - 86px);
				}
				.indexLayout #mainImg #mainOver01 img {
					max-width: 100%;
					max-height: calc(100vh - 86px);
				}
				.indexLayout #mainImg #mainOver02 img {
					max-width: 100%;
					max-height: calc(100vh - 86px);
				}
				.indexLayout a.mouseicon {
					bottom: 50px;
				}
				.indexLayout #mainImg .slider li {
					height: calc(100vh - 86px) !important;
				}
                .indexLayout #mainImg .rec_btn01 {
                    right: 10px;
                    bottom: 20px;
                    transition: all 0.3s;
                }
			}
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1020px) {
				.indexLayout #mainImg #mainOver01 img {
					width: auto;
					max-width: auto;
				}
				.indexLayout #mainImg #mainOver02 img {
					width: auto;
					max-width: auto;
				}
			}

.indexLayout #c01 .cassette h2 {
	background-color: #edeef4;
	color: #003567;
	font-family: Arial;
	padding: 5px 10px;
	text-align: center;
	font-size: 200%;
	margin: 0 0 20px;
}

.indexLayout #c01 .cassette ul {
	padding: 0;
}

.indexLayout #c01 .cassette ul li {
	padding: 0 0 20px;
	border-bottom: 1px solid #ddd;
	margin: 0 0 20px;
}

.indexLayout #c01 .cassette ul li:last-child {
	padding: 0;
	border: none;
	margin: 0;
}


.indexLayout #c01 .cassette ul li time {
	display: inline-block;
	width: 120px;
	margin: 0 0 5px;
}

.indexLayout #c01 .cassette ul li .icon {
	display: inline-block;
	padding: 3px 0;
	width: 120px;
	text-align: center;
	margin: 0 0 5px;
	font-size: 90%;
}

.indexLayout #c01 .cassette ul li .icon.news {
	border: 1px solid #009499;
	color: #009499;
}

.indexLayout #c01 .cassette ul li .icon.recruit {
	border: 1px solid #ff8a00;
	color: #ff8a00;
}

.indexLayout #c01 .cassette ul li p {
	padding: 0;
}

			/* 【タブレット用のスタイル記述】 */
			@media screen and (min-width: 761px) {
				.indexLayout #c01 .cassette ul li {
					display: flex;
					justify-content: space-between;
				}
				.indexLayout #c01 .cassette ul li p {
					width: 100%;
				}
				.indexLayout #c01 .cassette ul li time {
					width: 200px;
					box-sizing: border-box;
					margin: 0 20px 0 0;
				}
				.indexLayout #c01 .cassette ul li .icon {
					display: table;
					margin: 0 20px 0 0;
				}
			}		
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1020px) {
				.indexLayout #c01 .cassette {
					display: flex;
					justify-content: space-between;
					padding: 0 0 70px;
				}
				.indexLayout #c01 .cassette h2 {
					width: 175px;
					font-size: 50px;
					margin: 0 30px 0 0;
				}
				.indexLayout #c01 .cassette ul {
					width: 100%;
				}
			}

.indexLayout #c02 {
	padding: 0 0 50px;
}

.indexLayout #c02 .box01 {
	position: relative;
	margin: 0 0 40px;
	overflow: hidden;
}

.indexLayout #c02 .box01 h2 {
	width: 96%;
	margin: 0 auto 10px;
	font-size: 40px;
	text-align: right;
	font-family: Arial;
	line-height: 1;
	color: #333;
}
.indexLayout #c02 .box01 h2 span {
	display: inline-block;
	padding: 5px 0;
}

.indexLayout #c02 .box01 > div {
	margin: 0 10% 0 0;
}

.indexLayout #c02 .box01 > div img {
	width: 100%;
}

.indexLayout #c02 .cassette .box02 > div:nth-child(1) p {
	text-align: center;
}

.indexLayout #c02 .cassette .box02 > div:nth-child(1) p img {
	max-width: 100%;
}

.indexLayout #c02 .cassette .box02 > div:nth-child(2) {
	text-align: left;
	line-height: 2;
}

.indexLayout #c02 .cassette .box02 > div:nth-child(2) h4 {
	font-size: 140%;
	background: url(../img/index_02_line01.png) no-repeat left bottom;
	background-size: 35px auto;
	padding: 0 0 15px;
	margin: 0 0 15px;
}

.indexLayout #c02 .cassette .box02 > div:nth-child(2) p {
	padding: 0 0 20px;
}

.block-revealer__element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    pointer-events: none;
    opacity: 0;
}

.indexLayout #c02 .boxWrap02 .box01 h2 {
	text-align: left;
}

.indexLayout #c02 .boxWrap02 .box01 > div {
	margin: 0 0 0 10%;
}


			/* 【タブレット用のスタイル記述】 */
			@media screen and (min-width: 761px) {
				.indexLayout #c02 .box01 {
					position: relative;
					margin: 0 0 40px;
					overflow: hidden;
					height: 350px;
				}
				.indexLayout #c02 .box01 > div {
					margin: 0;
					position: absolute;
					right: 50%;
				}
				.indexLayout #c02 .box01 > div img {
					width: auto;
					height: 350px;
				}
				.indexLayout #c02 .box01 h2 {
					position: absolute;
					font-size: 90px;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
					margin: 0 auto;
					z-index: 100;
				}
				.indexLayout #c02 .box01 h2 span {
					padding: 10px 0;
				}
				.indexLayout #c02 .box02 {
					display: flex;
					justify-content: space-around;
				}
				.indexLayout #c02 .box02 > div {
					width: 46%;
				}
				.indexLayout #c02 .boxWrap02 .box01 h2 {
					text-align: left;
				}
				.indexLayout #c02 .boxWrap02 .box01 > div {
					margin: 0;
					left: 50%;
					right: auto;
				}
				.indexLayout #c02 .boxWrap02 .box02 {
					flex-direction: row-reverse;
				}
			}		
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1020px) {
				.indexLayout #c02 .box01 {
					height: 470px;
				}
				.indexLayout #c02 .box01 h2 {
					width: 1020px;
				}
				.indexLayout #c02 .box01 > div img {
					height: 470px;
				}
			}

.indexLayout #c03 {
	background: url(../img/index_03_bg01_sp.jpg) no-repeat center top;
	background-size: cover;
	padding: 70px 0 30px;
	color: #fff;
	margin: 0 0 100px;
}

.indexLayout #c03 h2 {
	font-family: Arial;
	text-align: center;
	font-size: 40px;
	padding: 0 0 30px;
}

.indexLayout #c03 p.catch {
	font-size: 130%;
	text-align: center;
}

			/* 【タブレット用のスタイル記述】 */
			@media screen and (min-width: 761px) {
				.indexLayout #c03 {
					background: url(../img/index_03_bg01.jpg) no-repeat center top;
					background-size: cover;
				}
				.indexLayout #c03 h2 {
					font-size: 90px;
				}
				.indexLayout #c03 p.catch {
					font-size: 150%;
				}
				.indexLayout #c03 p.catch br {
					display: none;
				}
			}		
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1020px) {
			}

.indexLayout #c04 .cassette ul li {
	margin: 0 0 30px;
}

.indexLayout #c04 .cassette ul li a {
	display: block;
	height: 230px;
	position: relative;
	overflow: hidden;
}

.indexLayout #c04 .cassette ul li a:hover {
	opacity: 1;
}

.indexLayout #c04 .cassette ul li a:after {
	position: absolute;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
    transition: all .3s ease-out;
    z-index: 1;
}

.indexLayout #c04 .cassette ul li a:hover:after {
	transform: scale(1.2);
	opacity: 0.8;
}

.indexLayout #c04 .cassette ul li a span {
	position: absolute;
	bottom: 30px;
	width: 100%;
	display: block;
	color: #fff;
	background-image: linear-gradient(-90deg, #78bb74, #1676e8);
	padding: 10px 0;
	text-align: center;
	z-index: 10;
	font-size: 120%;
}

.indexLayout #c04 .cassette ul li a span i {
	position: absolute;
	top: 50%;
	right: 30px;
	transform: translateY(-50%);
}

.indexLayout #c04 .cassette ul li:nth-child(1) a:after {
	background-image: url(../img/index_04_img01.jpg);
}

.indexLayout #c04 .cassette ul li:nth-child(2) a:after {
	background-image: url(../img/index_04_img02.jpg);
}

.indexLayout #c04 .cassette ul li:nth-child(3) a:after {
	background-image: url(../img/index_04_img03.jpg);
}

			/* 【タブレット用のスタイル記述】 */
			@media screen and (min-width: 761px) {
				.indexLayout #c04 .cassette ul {
					display: flex;
					justify-content: space-between;
				}
				.indexLayout #c04 .cassette ul li {
					width: 32%;
					margin: 0 0 50px;
				}
			}		
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1020px) {
			}

.indexLayout #c05 .box01 iframe {
	height: 330px;
}

.indexLayout #c05 .box02 {
	background-color: #edeef4;
	padding: 50px 0 0;
}

.indexLayout #c05 .box02 h3 {
	font-size: 130%;
	padding: 0 0 20px;
}

.indexLayout #c05 .box02 h3 img {
	width: 178px;
}

.indexLayout #c05 .box02 .cassette p {
	padding: 0 0 10px;
}

			/* 【タブレット用のスタイル記述】 */
			@media screen and (min-width: 761px) {
				.indexLayout #c05 {
					display: flex;
				}
				.indexLayout #c05 .box01 {
					width: 50%;
				}
				.indexLayout #c05 .box01 iframe {
					height: 100%;
				}
				.indexLayout #c05 .box02 {
					width: 50%;
					padding: 50px 30px 0;
					box-sizing: border-box;
				}
			}		
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1020px) {
				.indexLayout #c05 .box02 .cassette {
					width: 100%;
				}
				.indexLayout #c05 .box02 {
					padding: 110px 60px 60px;
				}
			}


/* nenga2019
------------------------------------*/

.indexLayout #nenga2019a {
	background: url(../img/2019a_bg.jpg) no-repeat center center;
	background-size: cover;
	height: 100vh;
	min-height: 750px;
	position: relative;
	z-index: 1;
	overflow: hidden;
}

.indexLayout #nenga2019a #nenga2019text {
	position: absolute;
	left: 50%;
	top: 47%;
	transform: translate(-50%,-50%);
	z-index: 100;
	max-width: 894px;
	width: 537px;
}

.indexLayout #nenga2019a #nenga2019text img {
	width: 537px;
}

.index2019.indexLayout a.mouseicon {
	color: #003567;
}

.index2019.indexLayout a.mouseicon span {
	border: 2px solid #003567;
}

.index2019.indexLayout a.mouseicon span::before {
	background-color: #003567;
}

.index2019 #header #headerIn h1 a {
	display: inline-block;
	position: relative;
}

.index2019 #header #headerIn h1 a span {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1000;
}

.index2019 #header-wrap.active #header #headerIn h1 a span {
	opacity: 0;
}

.index2019 .menu-btn span:after {
	background: url(../img/2019_menu_icon.png) no-repeat center center;
	background-size: 30px auto;
}

.index2019 #header-wrap.active .menu-btn span:after {
	background: url(../img/menu_icon.png) no-repeat center center;
	background-size: 30px auto;
}

.index2019 #header #headerIn #gNavi ul li a:link,
.index2019 #header #headerIn #gNavi ul li a:visited {
	color: #003567;
	text-decoration: none;
}

			/* 【タブレット用のスタイル記述】 */
			@media screen and (min-width: 921px) {
				.indexLayout #nenga2019a {
					min-height: 800px;
				}
				.indexLayout #nenga2019a #nenga2019text {
					top: 50%;
					width: 100%;
				}
				.indexLayout #nenga2019a #nenga2019text img {
					width: auto;
				}
				.index2019 #header-wrap.active #header #headerIn #gNavi ul li a:link,
				.index2019 #header-wrap.active #header #headerIn #gNavi ul li a:visited {
					color: #fff;
					text-decoration: none;
				}
			}


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