@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Oswald:300,500,700');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;500;700&display=swap');

@font-face {
    font-family: 'fa-solid-900';
    src: url('../fonts/fa-solid-900.woff') format('woff');
    font-style: normal;
}



/*--------------------------------
	base
--------------------------------*/

*, *::before, *::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


html {
	font-size: 62.5%;
}

body {
	font-family:  "Noto Sans JP", "Yu Gothic", "Hiragino kaku Gothic ProN", Meiryo, sans-serif;
	font-size: 1.6rem;
	font-weight: normal;
	text-align:justify;
	line-height: 1.6;
	background:#fff;
	color: #444;
	font-weight:100;
	overflow-x: hidden;
	overflow-y: scroll;
}

.container{
overflow-x: hidden;
}

@media screen and (max-width: 768px) {
	body {
		font-size: 1.4rem;
	}
}

a{
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all  .5s ease;
}

a:hover{
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all  .5s ease;
}

.section{
	position:relative;
}

strong{
	font-weight:normal;
}

@keyframes pulse{
  0% {
    box-shadow: 0 0 0 0px rgba(34, 151,158, 0.3);
  }
  100% {
    box-shadow: 0 0 0 12px rgba(34, 151,158,0);
  }
}

@keyframes pulse-w{
  0% {
    box-shadow: 0 0 0 0px rgba(222, 255, 255, 0.3);
  }
  100% {
    box-shadow: 0 0 0 12px rgba(222, 255, 255,0);
  }
}

/*--------------------------------
	common
--------------------------------*/

 @media screen and (max-width: 768px) {
	.pc{
		display:none;
	}
}


 @media screen and (min-width: 769px) {
	.sp{
		display:none;
	}
}

/*--------------------------------
	header
--------------------------------*/

header{
	position:fixed;
	top:0;
	z-index:999;
}

#header-menu{
	position:fixed;
	top:0;
	right:0;
	height:80px;
	width:80px;
	background:#22979e;
	padding:25px 25px 0;
	z-index:10000;
}

 @media screen and (max-width: 768px) {
	 header{
		position:absolute;
		top:0;
		z-index:999;
	}
	
	#header-menu{
	height:60px;
	width:60px;
	padding:16px 15px 0;
	
}

}



/*--------------------------------
	footer
--------------------------------*/

footer{
	width:100%;
	height:200px;
	padding:40px 0;
	background:#22979e;
	color:#fff;
	font-size:1.5rem;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display:flex;
	align-items:center;
}

footer a{
	color:#fff;
}


footer a:hover{
	opacity:0.7;
}


footer .footer-inner{
	width:100%;
	max-width:1200px;
	margin:0 auto;
	
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display:flex;
	justify-content:space-between;
	position:relative;
}

footer .footer-logo{
	margin-bottom:10px;
}

footer .copyright{
	font-size:1.2rem;
	align-self:flex-end;
}

footer ul.nav{
	right:0;
	bottom:32px;
	position:absolute;
}

footer ul.nav li{
	display:inline-block;
}

footer ul.nav li::after{
	content:"|";
}

footer ul.nav li:last-child::after{
	content:"";
}

footer ul.nav li a{
	color:#fff;
	padding:0 1em;
}

footer ul.nav li a:hover{
	opacity:0.5;
}

footer ul.nav li:last-child a{
	padding-right:0;
}

footer a[target]::after{
  font-family: 'fa-solid-900';
  font-size:1.2rem;
    content: "\f14d";
    margin-left:0.5em;
}


 @media screen and (max-width: 768px) {
 footer{
	position:relative;
	height:auto;
	padding:40px 4% 20px;
}


footer .footer-inner{
	flex-direction:column;
	padding-top:40px;
}

footer .footer-logo{
	margin-bottom:30px;
}

footer .footer-logo img{
	width:80%;
	max-width:400px;
}

footer .copyright{
	align-self:center;
	padding-top:40px;
}

footer ul.nav{
	position:relative;
	bottom:auto;
	right:auto;
}

footer ul.nav li a{
	padding-left:0;
}

footer ul.nav-group{
	padding-bottom:20px;
}



}

 @media screen and (max-width: 1365px) {
	footer{
		padding:20px;
	}
}


@media screen and (max-width: 768px) and (orientation: landscape) {

	footer .footer-logo{
		margin-bottom:20px;
	}

	footer .footer-logo img{
		width:50%;
	}
}


/*--------------------------------
	Overlay style
--------------------------------*/

.overlay {
	position: fixed;
	top: 0;
	right: 0;
	background:#22979e;
	z-index:9999;
	font-weight:300;
	transition: all 0.5s ease;
	height:80px;
	width:80px;
	overflow:hidden;
	display:flex;
}

.overlay.active {
	width: 44%;
	height: 100%;
}

/* Menu style */
.overlay nav {
	position: relative;
	opacity:0;
	font-size: 2rem;
	padding-right:0px;
}

.overlay.active nav {
	position: relative;
	margin-top:10vh;
	font-size: 1.6rem;
	opacity:1;
}

.overlay ul {
	list-style: none;
	margin: 0 auto;
	height: 80vh;
	max-height:720px;
	width: calc(100% - 160px);
	position: relative;
	display: -webkit-flex;
	display: flex;
	flex-wrap:wrap;
}


.overlay ul li {
	display: block;
	min-height: 20px;
	width:100%;
	padding:0 0;
}

.overlay ul li a {
	font-weight: 300;
	display: block;
	color: #fff;
}

.overlay ul li a strong{
	font-weight: 300;
	display: block;
	font-size:3.8rem;
	font-family:  "Oswald";
	font-weight:500;
	opacity:.4;
	line-height:1.1;
}

.overlay ul li:nth-child(7) {
	font-size:1.8rem;
	width:calc(50% - 10px);
	margin:5vh 0 0 0;
	padding:0;
	text-align:center;
}

.overlay ul li:last-child {
	font-size:1.8rem;
	width:calc(50% - 10px);
	margin:5vh 0 0 20px;
	padding:0;
	text-align:center;
}

.overlay ul li:nth-child(7) a,.overlay ul li:last-child a {
	font-size:1.6rem;
	font-weight:700;
	border:1px solid #fff;
	padding:20px 0;
}

.overlay ul li:nth-child(7) a,.overlay ul li:last-child a {
	border-radius:5px;
}

.overlay ul li a:hover,
.overlay ul li a:focus {
	color: #75cfcf;
}

.overlay ul li:nth-child(7) a:hover,.overlay ul li:last-child a:hover {
	background: #fff;
	color: #22979e;
}

.overlay.active ul li{	
	animation:show 1.5s both;
}

.overlay.active ul li:nth-child(2){	
	animation-delay: .1s;
}

.overlay.active ul li:nth-child(3){	
	animation-delay: .2s;
}

.overlay.active ul li:nth-child(4){	
	animation-delay: .3s;
}

.overlay.active ul li:nth-child(5){	
	animation-delay:.4s;
}

.overlay.active ul li:nth-child(6){	
	animation-delay: .5s;
}

.overlay.active ul li:nth-child(7),.overlay.active ul li:last-child{
	animation:show2 2s both;
	animation-delay:1.4s;
}

@keyframes show {
	0% {margin-left:20%;opacity:0;}
	20% {margin-left:20%;opacity:.1;}
	100% {margin-left:8%;opacity:1;}
}

@keyframes show2 {
	0% {opacity:0;}
	100% {opacity:1;}
}


/*20260317*/
.mov-wrap{
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.mov-wrap iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}



.menu-top-bottom{
	position: fixed;
	display:flex;
	bottom:0;
	left:0;
	z-index:9;
	width:100%;
	background:rgb(0 , 0, 0, .7);
	text-align:center;
}

.menu-top-bottom .inner{
margin:auto 8%;
padding:0 8%;
width:100%;
display:flex;
justify-content:center;
}

@media screen and (min-width:769px) and ( max-width:1365px) {
	.menu-top-bottom .inner{
		margin:auto 20px;
		padding:0;
	}
}


.menu-entry{
padding:20px 0;
width:23.5%;
}

.menu-guideline{
padding:20px 2% 20px 0;
width:25.5%;
}

.mov-button-disp,.menu-dl{
padding:20px 2% 20px 0;
	width:25.5%;
}

.mov-link.open{
	display:block!important;
}

.menu-entry a{
	display:flex;
	justify-content:center;
	background:#22979e;
	width:100%;
	line-height:50px;
	color:#fff;
	max-height:100px;
	vertical-align:top;
	font-size:1.3rem;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all  .5s ease;
}

.menu-entry a:hover{
	color:#22979e;
	background:#fff;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all  .5s ease;
	 animation: pulse-w .5s 1;
}

.menu-entry a span{
	font-family:  "Oswald";
	font-weight:500;
	padding-right:.3em;
}

.menu-guideline a{
	display:block;
	background:#707070;
	width:100%;
	line-height:50px;
	color:#fff;
	font-size:clamp(1.125rem, 1.4vw, 1.75rem);
	font-weight:500;
	max-height:100px;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all  .5s ease;
}

.menu-guideline a:hover{
	color:#707070;
	background:#fff;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all  .5s ease;
	 animation: pulse-w .5s 1;
}

.mov-button{
	display:flex;
	justify-content:center;
	background:#003567;
	width:100%;
	line-height:50px;
	color:#fff;
	max-height:100px;
	vertical-align:top;
	font-size:clamp(1.125rem, 1.4vw, 1.75rem);
	font-weight:500;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all  .5s ease;
	cursor: pointer;
}

.mov-button a{
	color:#fff;
	width:100%;
}

.mov-button a:hover{
	color:#003567;
	background:#fff;
	animation: pulse-w .5s 1;
}

.menu-dl a{
	display:flex;
	justify-content:center;
	width:100%;
	line-height:50px;
	color:#fff;
	max-height:100px;
	vertical-align:top;
	font-size:clamp(1.125rem, 1.4vw, 1.75rem);
	font-feature-settings:"palt";
	font-weight:500;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all  .5s ease;
	background:#707070;
}

.overlay .menu-entry,.overlay .menu-guideline{
	display:none;
}

.menu-top-bottom.disable{
	opacity:0;
	z-index:-1;
	transition: all 0.5s ease;
}

.mov-button-disp .mov-link-button{
        background:#fff;
        position:absolute;
        bottom:76px;
        width:560px;
        margin-left:-40px;
		display:flex;
		gap: 2%;
		padding:10px 4%;
        border-radius:2px;
        box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    }
    
     .mov-button-disp .mov-link-button  > div:last-child{
        margin-left:0;
    }
    
    .mov-button-disp .mov-link-button  > div figure{
    	margin:0 0 4px;
    	position: relative;
		
    }
    
    .mov-button-disp .mov-link-button  > div figure a{
    	width:100%;
    	display:block;
    	height:auto;
    	background:#666;
    }
    
    .mov-button-disp .mov-link-button .thumbnail img:not(.mov-play){
        width:100%;
        opacity:.6;
        transition: all  .5s ease;
        object-fit:fill;
    }
    
    .mov-button-disp .mov-link-button .thumbnail img:not(.mov-play):hover{
        opacity:1;
    }
    
    .mov-button-disp .mov-link-button .mov-play{
        position:absolute;
        top:calc(50% - 24px);
        left:calc(50% - 24px);
        width:48px;
        opacity:.9;
    }
    
     .mov-button-disp .mov-link-button figcaption{
        display:block;
        color:#003567;
        font-size:1.6rem;
        font-weight:500;

    }
 .mov-link-button::before{
		  content: "";
		  position: absolute;
		  bottom: -24px;
		  border: 12px solid transparent;
		  border-top: 12px solid #fff;
		  z-index: 2;
	}
@media (min-width:1366px) {
	.mov-button-disp{
		position: relative;
	}
    .mov-button-disp .mov-link-button{
        left:calc(46% - 240px);
    }
     .mov-link-button::before{
		  left: 50%;
		  margin-left: -15px;
	}
     .menu-mov{
        position: relative;
    }
    .mov-button-disp.mov-3 .mov-link-button{
		margin-left:-100px;
    }
    
}

@media screen and (min-width:769px) and ( max-width:1365px) {
	.mov-link-button::before{
		  left: 25%;
		  margin-left: 0;
	}
}
@media (max-width:1365px) {
    .mov-button-disp .mov-link-button{
        width:560px;
        left:0;
        margin-left:1%;
        padding:10px 1%;

    }
  
}

@media (min-width:769px) {
.mov-button-disp.mov-4 .mov-link-button{
		width:560px;
		display:flex;
		flex-wrap:wrap;
		column-gap: 3%;
		row-gap:1em;
        padding:12px;
    }
    
    .mov-button-disp.mov-3 .mov-link-button{
		width:680px; 
    }
    .mov-link-button::before{
		margin-left:-20px;
    }
    .mov-button-disp.mov-4 .mov-link-button > div{
		width:48.5%;
    }
    
 .mov-button-disp .mov-link-button.pc-none{
        visibility: hidden;
    }
    
    
    .mov-button-disp:not(.add){
        display:none;
    }
    


   .menu-dl:not(.add){
        display:none;visibility: hidden;
    }
    
    .menu-dl a:hover{
		color:#707070;
		background:#fff;
		animation: pulse-w .5s 1;
	}
	.mov-button-disp .mov-link-button .thumbnail img:not(.mov-play){
        max-width:240px;
    }

}

@media (max-width:768px) {
.menu-top-bottom .inner{
		margin:0;
		padding:0 6%;
	}
    .mov-button-disp .mov-link-button{
        position: relative;
        bottom:auto;
        left:auto;
        bottom:auto;
        margin:40px 0 0;
        width:100%;
        height:auto;
        box-shadow:none;
        flex-wrap:wrap;
        column-gap:2%;
        row-gap:2em;
    }

.mov-button-disp .mov-link-button  > div{
        margin:0 5px 0 0;
        width:48%;
        display:block;
        text-align:center;
    }
    
    .mov-button-disp .mov-link-button  > div:last-child{
        margin:0 0 0 5px;
    }
    
.mov-button-disp{
		height:auto;
       width:100%;
       bottom:auto;
       padding:0 4%;
}

 .mov-button-disp .mov-link-button  > div figure{
    	margin-bottom:16px;
    }
    
    .mov-button-disp .mov-link-button  > div figure,.mov-button-disp .mov-link-button  > div figure a{
    	min-height:calc(calc(46vw - 12px) * 0.5625);
    }
 
.mov-button-disp .mov-link-button .mov-play{
        top:calc(50% - 32px);
        left:calc(50% - 32px);
        width:64px;
    }
.mov-button-disp .mov-link-button  > div figure a{
    	background:none;
    }
.mov-button-disp .mov-link-button .thumbnail img:not(.mov-play){
        opacity:1;
    }
    
    .menu-dl{
    	display:block;
    	width:100%;
    	padding:0 4%;
    	margin-top:40px;
    }
    
    .menu-dl a{
    	display:block;
    	padding:20px;
    	text-align:center;
    	font-size:2rem;
    	background:#22979e url(../images/recruit/banner_dl.png);
    	background-size:100% auto;
    	background-position:center;
    	background-repeat:no-repeat;
    	text-indent:-9999px;
    }

    .menu-entry{
		padding:20px 0 20px 2%;
		width:50%;
}

.menu-guideline{
padding:20px 2% 20px 0;
width:50%;
}

    
.mov-box .mov-button-disp.add,.menu-dl.add,.mov-button{
    display:none;

}


.mov-button-disp:not(.add)  .mov-link-button .mov-link{
display:block; position: relative;
}

.mov-button-disp.add,.mov-button-disp.add .mov-link-button{
display:none;
}

}

@media (max-width:415px) {

.mov-button-disp,.menu-dl{
       padding:0 8%;
       margin-top:0;
}

    .mov-button-disp .mov-link-button{
        position: relative;
        bottom:auto;
        left:auto;
        bottom:auto;
        margin:40px 0 0;
        width:100%;
        height:auto;
        flex-wrap:wrap;
    }

.mov-button-disp .mov-link-button  > div, .mov-button-disp .mov-link-button  > div:last-child{
        margin:0 0 24px;
        width:100%;
    }
    
    .mov-button-disp .mov-link-button  > div figure{
        margin-bottom:8px;
    }
    
    .mov-button-disp .mov-link-button  > div figure,.mov-button-disp .mov-link-button  > div figure a{
    	min-height:calc(80vw * 0.5625);
    }
    
    .mov-button-disp .mov-link-button .mov-play{
        width:64px;
    }
}
/*---------------------*/

#header-menu span {
	display: block;
	width: 100%;
	height: 4px;
	margin-bottom:8px;
	background-color: #fff;
}


#header-menu span{
	transition: all .5s ease;
}

#header-menu.active span:nth-of-type(1) {
        -webkit-transform: translateY(12px) rotate(-315deg);
        transform: translateY(12px) rotate(-315deg);
    }
#header-menu.active span:nth-of-type(2) {
        opacity:0;
    }
#header-menu.active span:nth-of-type(3) {
        -webkit-transform: translateY(-12px) rotate(315deg);
        transform: translateY(-12px) rotate(315deg);
    }

#header-menu:hover span{
	background:#c3dbde;
}

 @media screen and (max-width: 1365px) {
.overlay.active {
	width: 50%;
}

 .overlay nav {
	height: 80%;
	font-size:1.8rem;
}

 
 .overlay ul li a strong{
	font-size:3rem;
}

  }
  
  
 
 
 @media screen and (max-width: 1080px) {
 .overlay.active {
  width:100%;
 }

 .overlay ul {
 width:80%;
 }
}


@media screen and (min-width: 769px) {

.menu-entry a span{
	font-size:2.4rem;
}



.overlay a.overlay-home{
	display:block;
	height:80px;
	width:80px;
	position: absolute;
	right: 0;
	top: 80px;
	text-align:center;
	color:#fff;
	font-family:  "Oswald";
	font-size:1.4rem;
	z-index:9999;
	
}

.overlay a.overlay-home::before{
	font-family: 'fa-solid-900';
    content: "\f015";
    font-size:2.4rem;
    padding:.4em 0 .1em;
    display:block;
    transition: all .5s ease;
}

.overlay a.overlay-home:hover,.overlay a.overlay-home:hover::before{
	color:#c3dbde;
}


}

 
@media screen and (max-width: 768px) {
#header-menu{
	height:60px;
	width:60px;
	padding:15px 15px 0;
}

#header-menu span {
	height: 4px;
	margin-bottom:8px;
}

.menu-entry a span{
	font-size:1.8rem;
}

.menu-entry a{
	width:calc(98% - 1em);
	margin-right:1em;
}

.menu-guideline a{
	width:calc(98% - 1em);
	margin-left:1em;
}
.menu-top-bottom .inner .close{
	cursor:pointer;
}
.menu-top-bottom .inner .close::before{
	font-family: 'fa-solid-900';
	font-size:2rem;
	content: "\f057";
    margin-left:0.5em;
	width:1em;
	height:20px;
	left:0;
	top:calc(50% - .8em);
	position:absolute;
	color:#fff;
}

.menu-top-bottom.none{
	display:none!important;
}


.overlay {
	height:60px;
	width:60px;
}

 .overlay.active {
  width:100%;
 }
 
   .overlay nav {
	height: 70%;
	font-size:1.6rem;
	
}

.overlay.active nav {
	margin-top:10vh;
	font-size: 1.6rem;
}

 .overlay ul {
 width:90%;
 }
 
 .overlay ul li {
	margin-bottom:16px;
}

.overlay ul li a strong{
	font-size:2.6rem;
}

 .overlay ul li:nth-child(7)  {
	width:90%;
	margin:12px auto 16px;
}

.overlay ul li:last-child {
	width:90%;
	margin:0 auto  12px;
}

.overlay ul li:nth-child(7) a,.overlay ul li:last-child a {
	border-radius:5px;
	padding:12px 0;
}

.overlay a.overlay-home{
	display:none;
}



}

 @media screen and (max-width: 320px) {
.overlay ul li {
	margin-bottom:10px;
	font-size:1.3rem;
}
.overlay ul li:nth-child(7) ,.overlay ul li:last-child {
	font-size:1.2rem;
	width:100%;
}

 .overlay ul li:nth-child(7),.overlay ul li:last-child  {
	width:90%;
	margin:12px auto 0;
	font-size:1.4rem;
}
.overlay ul li:nth-child(7) a,.overlay ul li:last-child a {
	padding:12px 0;
}

.overlay ul li a strong{
	font-size:2.4rem;
}


}
  
 
 
  
  
  
  


/*--------------------------------
	common rayout
--------------------------------*/
	 
.text-s{
	font-size:0.8em;
}

.text-ss {
	font-size:0.7em;
}

.text-right{
	text-align:right;
}

.text-center{
	text-align:center;
}

.mg-l{
	margin-bottom:80px;
}

.mg-m{
	margin-bottom:50px;
}

.mg-s{
	margin-bottom:30px;
}