/* --- font --- */

/* アルファベット */
.f-alata{font-family: 'Alata', sans-serif;}

/* ゴシック */
.f-sans{font-family: 'Noto Sans JP', sans-serif;}

/* 明朝 */
.f-serif{font-family: 'Noto Serif JP', serif;}



/* --- clearfix --- */
.cf:before{
content:"";
display: table;
}
.cf:after{
content:"";
display: table;
clear:both;
}



/* --- btn --- */

.btn a{
	position: relative;
	display: block;
	border-radius:30px;
	padding: .5em 0;
	border-width:1px;
	border-style:solid;
	text-align: center;
	text-decoration: none;
	transition: .3s;
	line-height:1;
	overflow:hidden;
}
.btn a:hover{
	opacity:1;
}
.btn a::before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	content: "";
	transform-origin: right top;
	transform: scale(0, 1);
	transition: transform .3s;
	border-radius:30px;
}
.btn a:hover::before {
	transform-origin: left top;
	transform: scale(1, 1);
}
.btn a span{
	display:inline-block;
	background-position:0 55%;
	background-repeat:no-repeat;
	padding:.8rem 0 .8rem 3.5rem;
	font-size:1.4rem;
	position:relative;
	z-index:1;
}

/* Safariのみ */
_::-webkit-full-page-media, _:future, :root .btn a::before{
	border-radius:30px;
}
_::-webkit-full-page-media, _:future, :root .btn a:hover::before{
	transform-origin: 2px top;
}


/* .btn-wh */
.btn-wh a{
	border-color:rgba(255,255,255,0.6);	
	color:#fff;
}
.btn-wh a:hover{
	color: #333;	
}
.btn-wh a::before {
	background: #fff;
}
.btn-wh.icon-contact a span{
	background-image:url(../images/icon-mail-wh.png);
	-moz-background-size:2.1rem auto;
	background-size:2.1rem auto;
}
.btn-wh.icon-recruit a span{
	background-image:url(../images/icon-recruit-wh.png);
	-moz-background-size:2.1rem auto;
	background-size:2.1rem auto;
}
.btn-wh.icon-contact a:hover span{
	background-image:url(../images/icon-mail-bk.png);
	-moz-background-size:2.1rem auto;
	background-size:2.1rem auto;
}
.btn-wh.icon-recruit a:hover span{
	background-image:url(../images/icon-recruit-bk.png);
	-moz-background-size:2.1rem auto;
	background-size:2.1rem auto;
}


/* .btn-bk */
.btn-bk a{
	border-color:#333;
	color:#333;
}
.btn-bk a:hover{
	color: #fff;	
}
.btn-bk a::before {
	background: #333;
}
.btn-bk.icon-contact a span{
	background-image:url(../images/icon-mail-bk.png);
	-moz-background-size:2.1rem auto;
	background-size:2.1rem auto;
}
.btn-bk.icon-recruit a span{
	background-image:url(../images/icon-recruit-bk.png);
	-moz-background-size:2.1rem auto;
	background-size:2.1rem auto;
}
.btn-bk.icon-contact a:hover span{
	background-image:url(../images/icon-mail-wh.png);
	-moz-background-size:2.1rem auto;
	background-size:2.1rem auto;
}
.btn-bk.icon-recruit a:hover span{
	background-image:url(../images/icon-recruit-wh.png);
	-moz-background-size:2.1rem auto;
	background-size:2.1rem auto;
}
.btn-bk.btn-blank a span{
	background-image:url(../images/button-blank_bk.png);
	-moz-background-size:1.2rem auto;
	background-size:1.2rem auto;
	padding:.8rem 0;
	display:block;
	background-position:95% 55%;
}
.btn-bk.btn-blank a:hover span{
	background-image:url(../images/button-blank_wh.png);
	-moz-background-size:1.2rem auto;
	background-size:1.2rem auto;
}


/* .btn-bl */
.btn-bl a{
	border-color:#000f74;
	color:#000f74;
}
.btn-bl a:hover{
	color: #fff;	
}
.btn-bl a::before {
	background: #000f74;
}
.btn-bl a span{
	padding:.8rem 0 1rem;	
}



/* --- .more --- */
.more a{
	position: relative;
	display: block;
	border-radius:30px;
	border:#000f74 solid 1px;
	text-align: center;
	text-decoration: none;
	transition: .3s;
	line-height:1;
	overflow:hidden;
	color:#000f74;
	width:180px;	
}
.more a:hover{
	opacity:1;
}
.more a::before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	content: "";
	transform-origin: right top;
	transform: scale(0, 1);
	transition: transform .3s;
	overflow:hidden;
}
.more a:hover::before {
	transform-origin: left top;
	transform: scale(1, 1);
}
.more a span{
	display:inline-block;
	background-position:0 55%;
	background-repeat:no-repeat;
	padding:.8rem 0 1rem;
	font-size:1.4rem;
	position:relative;
	z-index:1;
}
.more a:hover{
	color: #fff;	
}
.more a::before {
	background: #000f74;
}

/* Safariのみ */
_::-webkit-full-page-media, _:future, :root .more a::before{
	border-radius:30px;
}
_::-webkit-full-page-media, _:future, :root .more a:hover::before{
	transform-origin: 2px top;
}


/* .more_wh */
.more.more_wh a{
	border:#fff solid 1px;
	color:#fff;	
}
.more.more_wh a:hover{
	color: #333;	
}
.more.more_wh a::before {
	background: #fff;
}


/* --- .map --- */
.map a{
	position: relative;
	display: block;
	border-radius:30px;
	border:#000f74 solid 1px;
	text-align: center;
	text-decoration: none;
	transition: .3s;
	line-height:1;
	overflow:hidden;
	color:#000f74;
	width:180px;	
}
.map a:hover{
	opacity:1;
}
.map a::before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	content: "";
	transform-origin: right top;
	transform: scale(0, 1);
	transition: transform .3s;
}
.map a:hover::before {
	transform-origin: left top;
	transform: scale(1, 1);
}
.map a span{
	background-repeat:no-repeat;
	font-size:1.4rem;
	position:relative;
	z-index:1;	
	background-image:url(../images/button-blank_bl.png);
	-moz-background-size:1.2rem auto;
	background-size:1.2rem auto;
	padding:.8rem 0;
	display:block;
	background-position:92% 50%;
}
.map a:hover{
	color: #fff;	
}
.map a::before {
	background: #000f74;
}
.map a:hover span{
	background-image:url(../images/button-blank_wh.png);
	-moz-background-size:1.2rem auto;
	background-size:1.2rem auto;
}

/* Safariのみ */
_::-webkit-full-page-media, _:future, :root .map a::before{
	border-radius:30px;
}
_::-webkit-full-page-media, _:future, :root .map a:hover::before{
	transform-origin: 2px top;
}



/* --- flex --- */

.d_flex {
	display:flex;
	display:-webkit-flex;
  	display:-ms-flexbox;
}

.fle_wra {
	flex-wrap:wrap;
	-webkit-flex-wrap:wrap;
	-ms-felx-wrap:wrap;
}

.jus_ce {
	justify-content:center;
	-webkit-justify-content:center;
}

.jus_sb {
	justify-content:space-between;
	-webkit-justify-content:space-between;
}
.jus_ar {
	justify-content:space-around;
	-webkit-justify-content:space-around;
}
.jus_end {
	justify-content:flex-end;
	-webkit-justify-content:flex-end;
}

.ali_ce {
	align-items:center;
	-webkit-align-items:center;
}

.ali_end {
	align-items: flex-end;
	-webkit-align-items:flex-end;
}


/* --- module --- */
.pc_none {
	display:none;
}

.tex_ce {
	text-align:center;
}


/* --- color --- */

.white {
	color:#fff;
}


/* --- .pic --- */
figure.pic{
	display:block;
	position:relative;
	overflow:hidden;	
}
figure.pic img{
	width:100%;
	height:auto;
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	margin:auto;
}


/* --- .topics_list --- */

.topics_list .list{
	width:330px;
	margin-right:5.5rem;
	padding-bottom:2.5rem;
	margin-bottom:5rem;
}
/* IE */
@media screen and (min-width: 0\0) and (min-resolution: +72dpi) {
	.topics_list .list{
		margin-right:5.1rem;
	}
}
.topics_list .list:nth-child(3n){
	margin-right:0;
}
.topics_list .list a{
	display:block;	
}
.topics_list .pic{
	width:330px;
	height:216px;
}
.topics_list .head{
	color:#000f74;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:2.3rem 0 2rem;
}
.topics_list .head .category{
	font-size:1.2rem;
	border:#000f74 solid 1px;
	padding:.65em 2em;
}
.topics_list .head .day{
	font-size:1.2rem;
	font-family: 'Alata', sans-serif;
}
.topics_list .ttl{
	font-size:1.3rem;
	font-weight:500;
	line-height:1.5;
}


/* --- .pager --- */
.pager li{
	margin:.3rem;
}
.pager li a{
	color:#00138c;
	border:#00138c solid 1px;
	padding:.5em .3em;
	min-width:2.5rem;
	display:block;
	font-family: 'Alata', sans-serif;
	text-align:center;
	font-size:1.2rem;
}
.pager li.active a,
.pager li a:hover{
	color:#fff;
	background:#00138c;
	opacity:1;
}



/* --- .tab --- */
.tab{
	width:100%;
	max-width:110rem;
	margin:0 auto;
}
.tab li{
	margin:.4rem;
	min-width:18rem;
}
.tab li a{
	border-radius:3rem;
	display:block;
	color:#00138c;
	border:#00138c solid 1px;
	text-align:center;
	font-size:1.4rem;
	padding:.7em 1rem;	
}
.tab li.active a,
.tab li a:hover{
	color:#fff;
	background:#00138c;
	opacity:1;	
}



/* --- .service_box --- */

.service_box .upper{
	height:42rem;
	width:100%;
	position:relative;
}
.service_box .upper .inner{
	position:relative;
}
.service_box .upper .mv{
	background-position:50% 50%;
	background-repeat:no-repeat;
	overflow:hidden;
	position:absolute;
	-moz-background-size:cover;
	background-size:cover;
}
.service_box .upper .overlap1{
	width:55rem;
	height:33rem;	
	z-index:1;
	top:4.5rem;
}
.service_box .upper .overlap2{
	width:63%;
	height:100%;
	z-index:0;
}
.service_box .box:nth-child(odd) .overlap1{
	left:0;
}
.service_box .box:nth-child(odd) .overlap2{
	right:0;
}
.service_box .box:nth-child(even) .overlap1{
	right:0;
}
.service_box .box:nth-child(even) .overlap2{
	left:0;
}
.service_box .box .mv1{
	background-image:url(../images/service_box-mv1.jpg);
}
.service_box .box .mv2{
	background-image:url(../images/service_box-mv2.jpg);
}
.service_box .box .mv3{
	background-image:url(../images/service_box-mv3.jpg);
}
.service_box .box .mv4{
	background-image:url(../images/service_box-mv4.jpg);
}
.service_box .lower{
	position:relative;
	top:-11rem;
	z-index:2;	
}
.service_box .lower .inner{
	position:relative;	
}
.service_box .lower .inner::before{
	content:"";
	display:block;
	background: linear-gradient(-75deg, transparent, transparent 49%, #000f74 49%, #000f74 50%, transparent 50%, transparent);
	width:6.6rem;
	height:100%;
	position:absolute;
	bottom:0;
	left:2rem;
}
.service_box .lower .conts{
	padding-top:14rem;
	padding-left:10rem;
	padding-bottom:.5rem;
}
.service_box .lower .ttl{
	margin-bottom:2rem;
}
.service_box .lower .ttl span{
	display:block;
}
.service_box .lower .ttl .en{
	font-weight:400;
	color:#e61801;
	font-size:1.4rem;
	margin-bottom:1.5rem;
}
.service_box .lower .ttl .ja{
	font-size:3rem;
	font-weight:500;
	color:#000f74;
}
.service_box .lower p{
	font-size:1.4rem;
	line-height:1.5;
}
.service_box .lower .more{
	position:absolute;
	bottom:-.6rem;
	right:0;
}



/* --- .gallery --- */
.gallery figure{
	width:358px;
	height:254px;
}


/* --- .safety_box --- */
.safety_box_inner{
	color:#fff;
	height:45rem;
	width:100%;
	background:url(../images/safety-box-bg.png) no-repeat 50% 50%;
	-moz-background-size:cover;
	background-size:cover;
}
.safety_box .ttl{
	font-weight:500;
	font-size:3rem;
	padding-right:6rem;
}
.safety_box .txt{
	font-size:1.8rem;
	font-weight:500;
	padding-left:6rem;
	line-height:2;
	border-left:#fff solid 1px;
}
.safety_box .more{
	padding:2.5rem 0 1rem;	
}



/* ---------  Scroll Fadein --------- */

/* ---------  PC Only ------------ */

@media screen and (min-width:769px){

.fadein {
    opacity : 0;
    transform : translate(-50px,0);
    transition : all 0.4s;
}
.rightin {
	opacity:0;
	transform:translate(50px,0);
	transition:all 0.4s;
}

.bottomin {
	opacity:0;
	transform:translate(0,50px);
	transition:all 0.4s;
}
.bottomin .delay:nth-child(2){
	transition-delay:0.1s;
}
.bottomin .delay:nth-child(3){
	transition-delay:0.2s;
}
.bottomin .delay:nth-child(4){
	transition-delay:0.3s;
}
.bottomin .delay:nth-child(5){
	transition-delay:0.4s;
}
.bottomin .delay:nth-child(6){
	transition-delay:0.5s;
}
/*
.delay2 {
	transition-delay:0.3s;
}
.delay3 {
	transition-delay:0.6s;
}
.delay4 {
	transition-delay:0.9s;
}

.delay5 {
	transition-delay:1.2s;
}
*/

.delay2 {
	transition-delay:0.1s;
}
.delay3 {
	transition-delay:0.2s;
}
.delay4 {
	transition-delay:0.3s;
}

.delay5 {
	transition-delay:0.4s;
}




.fadein.scrollin ,
.rightin.scrollin,
.bottomin.scrollin{
    opacity : 1;
    transform : translate(0, 0);
}

}




/* ---------  ver.PC-SmartPhone ------------ */

@media screen and (max-width:1099px){
	
/*--- .topics_list ---*/
.topics_list .list{
	width:31%;
	margin-right:3%;
}
.topics_list .pic{
	width:100%;
	height:18vw;
}



/* --- .tab --- */
.tab{
	flex-wrap:wrap;	
}
.tab li{
	margin:.6rem .4rem;	
}



/* --- .service_box --- */

.service_box .lower .more{
	bottom:auto;
	top:16.5rem;
}



/* --- .gallery --- */
.gallery figure{
	width:358px;
	height:254px;
}


/* --- .safety_box --- */
.safety_box_inner{
	flex-direction: column;
}
.safety_box .ttl{
	padding:0 0 2rem;
}
.safety_box .txt{
	padding:2rem 0 0;
	border-top:#fff solid 1px;
	border-left:none;
}
.safety_box .more a{
	margin:0 auto;	
}



}




/* ---------  ver.SmartPhone ------------ */

/* font-size ---

if : window size = 750px 


*/

@media screen and (max-width:768px){

.pc_none {
	display:block;
}

.sp_none {
	display:none;
}


/* --- flex --- */

.d_flex {
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}


/* --- btn --- */

.btn{
	max-width:100%;
}	


/*--- .topics_list ---*/
.topics_list .list,
.topics_list .list:nth-child(3n){
	width:47%;
	margin-right:1.5%;
	margin-left:1.5%;
	margin-bottom:1rem;
}
.topics_list .pic{
	height:27vw;
}
.topics_list .head{
	flex-direction: column;
	align-items: start;
	justify-content:flex-start;
	padding:1rem 0;
}
.topics_list .head .category{
	margin-bottom:.5rem;
}


/* --- .tab --- */
.tab li{
	min-width:15rem;
}
.tab li a{
	width:100%;
}


/* --- .service_box --- */

.service_box .upper{
	height:40vw;
}
.service_box .upper .overlap1{
	width:43%;
	height:27vw;
	top:6vw;
}
.service_box .upper .overlap2{
	width:70%;
	height:100%;
	z-index:0;
}
.service_box .lower{
	top:-5vw;	
}
.service_box .lower .inner::before{
	background: linear-gradient(-80deg, transparent, transparent 49%, #000f74 49%, #000f74 51%, transparent 51%, transparent);
	width:4rem;
	left:1rem;
}
.service_box .lower .conts{
	padding-top:10vw;
	padding-left:5rem;
	padding-bottom:.5rem;
}
.service_box .lower .ttl{
	margin-bottom:2rem;
}
.service_box .lower .ttl .en{
	font-size:1.3rem;
	margin-bottom:1rem;
}
.service_box .lower .ttl .ja{
	font-size:2.4rem;
}
.service_box .lower p{
	font-size:1.4rem;
}
.service_box .lower .more{
	position:static;
	padding-top:3rem;

}


/* --- .safety_box --- */
.safety_box_inner{
	height:30rem;
}
.safety_box .ttl{
	padding:0 0 1.5rem;
	font-size:2.4rem;
}
.safety_box .txt{
	padding:1.5rem 0 0;
	font-size:1.4rem;
	text-align:center;
}


/* --- .gallery --- */
.gallery figure{
	width : calc(100% / 3);
	height:30vw;
}
	
}


