@charset "utf-8";

@import url('//fonts.googleapis.com/css?family=Noto+Serif+JP:300,400,500,600&display=swap&subset=japanese');
@import url('//fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,600&display=swap&subset=japanese');
@import url('//fonts.googleapis.com/css?family=Pathway+Gothic+One&display=swap');

/*****************************************************************************
reset 
*****************************************************************************/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin: 0;
padding: 0;
}

address,caption,cite,code,dfn,em,strong,th,var {
font-style: normal;
}

ul,ol {
list-style-type: none;
}

em,strong,th,address {
font-style: normal;
font-weight: normal;
text-align: left;
}

h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}

img,
object,
embed {
border: 0;
vertical-align: top;
}

img {
max-width: 100%;
height: auto;
}

hr {
border-top: 1px solid #b0b0b0;
margin-bottom: 1.5em;
}

table {
border-collapse: collapse;
border-spacing: 0;
font-size: 100%;
}

li {
list-style-type: none;
}

strong {
font-weight: bold;
}

/*****************************************************************************
linkColor 
*****************************************************************************/

a:link {
color: #5ac3d9;
text-decoration: none;
}

a:visited {
color: #5ac3d9;
text-decoration: none;
}

a:hover,a:active {
color: #5ac3d9;
text-decoration: none;
}

/*****************************************************************************
clearfix 
*****************************************************************************/

.cb {
clear: both;
font-size: 1%;
height: 0;
line-height: 0;
}

.clearfix:after {
content: ".";
display: block;
height: 0.1px;
font-size: 0.1em;
line-height: 0; 
clear: both;
visibility: hidden; 
}

.clearfix {
display: inline-block;
}

/* Hide from IE-mac \*/

* html .clearfix { height: 1%; }
.clearfix { display:block; }

/* End hide from IE-mac */

/*****************************************************************************
base
*****************************************************************************/

html {
font-size: 62.5%;
-webkit-text-size-adjust: 100%;
}

body {
font-family: 'Noto Sans JP', sans-serif;
line-height: 1.5;
font-size: 1.4rem;
color: #000000;
overflow-x: hidden;
}


.noto-sans {
font-family: 'Noto Sans JP', sans-serif;
}
.noto-serif {
font-family: 'Noto Serif JP', serif;
}
.pathway-gothic-one {
font-family: 'Pathway Gothic One', sans-serif;
}


.button01 a {
transition: .6s;
}
.button01 a:hover {
background: #a79357;
border-color: #a79357;
color: #ffffff;
}

/*****************************************************************************
header 
*****************************************************************************/

.header {
width: 100%;
height: 100px;
box-sizing: border-box;
border-bottom: 1px solid #ffffff;
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
@media screen and (max-width: 500px) {
.header {
height: 80px;
}
}
.header-slider {
}
.header-slider:after {
content: '';
width: 100%;
height: 100px;
background: #5ac2d9; /* Old browsers */
background: -moz-linear-gradient(left,  #5ac2d9 30%, #81c6c8 70%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #5ac2d9 30%,#81c6c8 70%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #5ac2d9 30%,#81c6c8 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5ac2d9', endColorstr='#81c6c8',GradientType=1 ); /* IE6-9 */
border-bottom: 1px solid #ffffff;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: 0.3s;
opacity: 0;
}
@media screen and (max-width: 500px) {
.header-slider:after {
height: 80px;
}
}
.header-slider.fixed {
width: 100%;
height: 100px;
position: fixed;
/*top: -100px;*/
left: 0;
/*transform: translateY(100px);*/
transition: 0.3s transform;
}
@media screen and (max-width: 500px) {
.header-slider.fixed {
height: 80px;
/*top: -80px;*/
/*transform: translateY(80px);*/
}
}
.header-slider.fixed:after {
opacity: 1;
}
.header-logo {
width: 240px;
position: absolute;
top: 50%;
left: calc(100vw * 40 / 1920);
transform: translate(0,-50%);
}
@media screen and (max-width: 500px) {
.header-logo {
width: 200px;
}
}


.header__nav {
height: 100%;
position: absolute;
top: 0;
right: 0;
}
@media screen and (max-width: 1440px) {
.header__nav {
width: 50%;
height: 100vh;
box-sizing: border-box;
background: rgba(0,0,0,0.9);
margin: 0;
position: absolute;
top: 0;
right: 0;
transform: translateX(30px);
transition: 0.3s;
visibility: hidden;
opacity: 0;
z-index: 999;
}
.state-nav-open .header__nav {
transform: translateX(0);
visibility: visible;
opacity: 1;
display: block;
}
}
@media screen and (max-width: 500px) {
.header__nav {
width: 80%;
}
}
@media screen and (min-width: 1441px) {
.header__nav {
display: block !important;
}
}
.header__nav-list {
height: 100%;
display: flex;
}
@media screen and (max-width: 1440px) {
.header__nav-list {
height: auto;
display: block;
}
}
.header__nav-list li {
height: 100%;
padding: 0 calc(100vw * 20 / 1920);
text-align: center;
font-weight: 600;
font-size: 1.7rem;
position: relative;
}
@media screen and (max-width: 1440px) {
.header__nav-list li {
height: auto;
box-sizing: border-box;
border-bottom: 1px solid rgba(255,255,255,0.25);
padding: 0;
text-align: left;
font-size: 1.6rem;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.header__nav-list li:last-child {
border-left: 1px solid rgba(255,255,255,0.25);
}
}
.header__nav-button {
display: none;
}
@media screen and (max-width: 1440px) {
.header__nav-button {
width: 16px;
height: 11px;
box-sizing: border-box;
display: block;
position: relative;
cursor: pointer;
}
.header__nav-button span {
position: absolute;
display: block;
background: #ffffff;
width: 16px;
height: 1px;
transition: 0.3s;
}
.header__nav-button span:nth-of-type(1) {
top: 0;
}
.header__nav-button span:nth-of-type(2) {
top: 5px;
}
.header__nav-button span:nth-of-type(3) {
bottom: 0;
}
.header__nav-dropdown .header__nav-button span:nth-of-type(1) {
transform: rotateZ(45deg) translate(3.5px,3.5px);
}
.header__nav-dropdown .header__nav-button span:nth-of-type(2) {
opacity: 0;
}
.header__nav-dropdown .header__nav-button span:nth-of-type(3) {
transform: rotateZ(-45deg) translate(3.5px,-3.5px);
}
}
.header__nav-list li a {
height: 100%;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
position: relative;
transition: .6s;
}
@media screen and (max-width: 1440px) {
.header__nav-list li a {
padding: 20px;
display: block;
}
}
.header__nav-list li.cr a {
color: #ffde00;
}
.header__nav-list li.cr a:after {
content: '';
background: url(../img/recruit/arrow01.png) no-repeat center bottom;
background-size: 10px auto;
/*width: 10px;*/
height: 4px;
position: absolute;
bottom: 20px;
left: 50%;
transform: translate(-50%,0);
}
@media screen and (max-width: 1440px) {
.header__nav-list li.cr a:after {
display: none;
}
}
.header__nav-list li a:hover {
color: #ffde00;
}
.header__nav-list .extra {
}
@media screen and (max-width: 1440px) {
.header__nav-list .extra {
float: left;
width: 50%;
justify-content: center;
}
.header__nav-list .extra br {
display: none;
}
}
.header__nav-list .extra a {
font-weight: 500;
letter-spacing: 3px;
font-size: 1.2rem;
font-style: italic;
position: relative;
}
.header__nav-list .extra a:before {
content: '';
background: url(../img/recruit/arrow01.png) no-repeat center bottom;
background-size: 10px auto;
width: 10px;
height: 4px;
position: absolute;
bottom: 20px;
left: 50%;
transform: translate(-50%,0);
}
@media screen and (max-width: 1440px) {
.header__nav-list .extra a:before {
display: none;
}
}
.header__nav-list .extra a:after {
content: '';
width: 1px;
height: 60px;
background: #ffffff;
position: absolute;
top: 50%;
left: calc(100vw * -20 / 1920);
transform: translate(0,-50%);
}
@media screen and (max-width: 1440px) {
.header__nav-list .extra a:after {
display: none;
}
}


.header__nav-sub {
position: absolute;
left: calc(100vw * 20 / 1920);
width: 275px;
background: #ffffff;
display: none;
z-index: 1;
}
@media screen and (max-width: 1440px) {
.header__nav-sub {
position: relative;
left: auto;
width: 100%;
}
}
.header__nav-sub li {
padding: 0;
text-align: left;
font-weight: 500;
font-size: 1.4rem;
}
@media screen and (max-width: 1440px) {
.header__nav-sub li {
border-bottom: none;
display: block;
}
}
.header__nav-sub li a {
background: #ffffff url(../img/recruit/arrow04.png) no-repeat 20px 1.15em;
background-size: 4px auto;
padding: 10px 15px 10px 35px;
color: #000000;
display: block;
transition: .6s;
}
.header__nav-sub li a:hover {
background: #ffde00 url(../img/recruit/arrow04.png) no-repeat 20px 1.15em;
background-size: 4px auto;
color: #000000;
}
.header__nav-list li.cr .header__nav-sub li a {
color: #000000;
}
.header__nav-list li.cr .header__nav-sub li a:after {
display: none;
}


.sp-button {
background: none;
padding: 0;
position: absolute;
top: 50%;
right: calc(100vw * 40 / 1920);
transform: translate(0,-50%);
height: 20px;
width: 30px;
border: none;
outline: none;
cursor: pointer;
transition: 0.3s;
display: none;
z-index: 9999;
}
.sp-button span {
position: absolute;
display: block;
background: #ffffff;
width: 30px;
height: 2px;
transition: 0.3s;
}
.sp-button span:nth-of-type(1) {
top: 0;
}
.sp-button span:nth-of-type(2) {
top: 9px;
}
.sp-button span:nth-of-type(3) {
bottom: 0;
}
@media screen and (max-width: 1441px) {
.sp-button {
display: block;
}
.state-nav-open .sp-button span:nth-of-type(1) {
transform: rotateZ(45deg) translate(6.5px,6.5px);
}
.state-nav-open .sp-button span:nth-of-type(2) {
opacity: 0;
}
.state-nav-open .sp-button span:nth-of-type(3) {
transform: rotateZ(-45deg) translate(6.5px,-6.5px);
}
}


.entryBtn{
  position: fixed;
  top: 400px;
  right: 0;
  z-index: 1000;
  width: 56px;
  height: 224px;
	font-size: 1.7rem;
	font-weight: 800;
}
.entryBtn a{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-decoration: none;
  background: #ffde00;
  color: #000000;
	transition: .6s;
}
.entryBtn a:hover{
  background: #000000;
	color: #ffffff;
}
.entryBtn a span{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  position: relative;
}
@media screen and (max-width: 767px) {
.entryBtn{
  position: fixed;
  top: auto;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
}
.entryBtn a span{
  writing-mode: horizontal-tb;
  -ms-writing-mode: lr-tb;
}
}
.snsBtn{
	position: fixed;
	top: 644px;
	right: 16px;
	z-index: 1000;
	width: 24px;
	height: 120px;
}
.snsBtn ul{	
	display: flex;
	justify-content: center;
	align-items: center;
	width: 24px;
	height: 100%;
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
}
.snsBtn li{
	width: 24px;
	height: 24px;
	margin-bottom: 15px;
}
.snsBtn li a{
	display: block;
	width: 100%;
	transition: .6s;
}
.snsBtn li a:hover{
	opacity: 0.4;
}
.snsBtn img{
	width: 100%;
}
@media screen and (max-width: 767px) {
.snsBtn{
	display: none;
}	
}


.snsBtn-w{
	display: none;
}	
@media screen and (max-width: 767px) {
.snsBtn-w{
	display: flex;
	justify-content: center;
	margin: 82px auto 0;
}
.snsBtn-w li{
	margin: 0 12px;
}
.snsBtn-w li a{
	display: block;
	width: 24px;
	height: 24px;
	transition: .6s;
}
.snsBtn-w li a:hover{
	opacity: 0.4;
}
.snsBtn-w img{
	width: 100%;
}
}

/*****************************************************************************
contents 
*****************************************************************************/

.recruit__nav {
padding: 210px 0 90px;
display: flex;
position: relative;
z-index: 1;
}
@media screen and (max-width: 900px) {
.recruit__nav {
display: block;
}
}
@media screen and (max-width: 500px) {
.recruit__nav {
padding: 140px 0 60px;
}
}
.recruit__nav-box {
width: 33.3333%;
box-sizing: border-box;
padding: 0 17px;
}
@media screen and (max-width: 900px) {
.recruit__nav-box {
width: 60%;
margin: 0 auto 50px;
padding: 0;
}
.recruit__nav-box:last-child {
margin-bottom: 0;
}
}
@media screen and (max-width: 500px) {
.recruit__nav-box {
width: 80%;
margin: 0 auto 30px;
}
}
.recruit__nav-box a {
position: relative;
display: block;
}
.recruit__nav-box a:after {
content: '';
border: 1px solid #ffffff;
border-radius: 100%;
position: absolute;
top: -10px;
right: -10px;
bottom: -10px;
left: -10px;
}
.recruit__nav-title {
padding-right: 20px;
font-weight: 600;
line-height: 1;
font-size: 2.08333vw;
position: absolute;
top: 18.22916vw;
left: 3.64583vw;
z-index: 1;
}
@media screen and (max-width: 900px) {
.recruit__nav-title {
font-size: 3.0rem;
top: auto;
bottom: 22.2222vw;
left: 3.3333vw;
}
}
@media screen and (max-width: 640px) {
.recruit__nav-title {
font-size: 2.4rem;
bottom: 70px;
left: 40px;
}
}
@media screen and (max-width: 320px) {
.recruit__nav-title {
bottom: 50px;
left: 30px;
}
}
.recruit__nav-title small {
margin-top: 10px;
font-weight: 500;
letter-spacing: 3px;
font-size: 1.5rem;
font-style: italic;
display: block;
}
.recruit__nav-title:after {
content: '';
width: 100%;
height: 16px;
background: url(../img/recruit/arrow03.png) no-repeat right top;
background-size: auto 16px;
position: absolute;
right: 0;
bottom: 16px;
}
a .recruit__nav-title {
background: #000000;
color: #ffffff;
transition: .6s;
}
a:hover .recruit__nav-title {
background: #62c3d6;
}
.recruit__nav-img {
position: relative;
}
.recruit__nav-img:after {
content: '';
padding-top: 100%;
display: block;
}
.recruit__nav-img.bg-switch {
background-position: center center;
background-size: cover;
}



/*****************************************************************************
footer 
*****************************************************************************/

.footer__entry {
background: url(../img/recruit/entry-bg.jpg) no-repeat center right;
background-size: cover;
padding: 100px 0 50px;
}
@media screen and (max-width: 640px) {
.footer__entry {
background-size: cover;
padding: 50px 0 30px;
}
}
.footer__entry-title {
max-width: 900px;
margin-bottom: 10px;
}
@media screen and (max-width: 640px) {
.footer__entry-title {
margin-bottom: 20px;
}
}
.footer__entry-btn {
max-width: 320px;
margin: 0 auto;
text-align: center;
font-weight: 600;
font-size: 2.1rem;
}
@media screen and (max-width: 640px) {
.footer__entry-btn {
font-size: 1.8rem;
}
}
.footer__entry-btn span {
padding: 0 36px;
position: relative;
}
.footer__entry-btn span:before {
content: '';
background: url(../img/recruit/entry-btn-left.png) no-repeat left top;
background-size: 24px auto;
width: 24px;
height: 17px;
position: absolute;
left: 0;
top: 50%;
transform: translate(0,-50%);
}
.footer__entry-btn span:after {
content: '';
background: url(../img/recruit/entry-btn-right.png) no-repeat left top;
background-size: 24px auto;
width: 24px;
height: 17px;
position: absolute;
right: 0;
top: 50%;
transform: translate(0,-50%);
}
.footer__entry-btn a {
border: 2px solid #ffffff;
padding: 25px 0 23px;
color: #ffffff;
display: block;
transition: 0.6s;
}
@media screen and (max-width: 640px) {
.footer__entry-btn a {
padding: 15px 0 13px;
}
}
.footer__entry-btn a:hover {
background: #01c2d3;
}


.footer {
padding-top: 60px;
}
@media screen and (max-width: 500px) {
.footer {
padding-top: 30px;
}
}
.footer__upper {
border-bottom: 1px solid #5ac3d9;
}
.footer__upper-wrapper {
display: flex;
flex-wrap: wrap;
}
@media screen and (max-width: 500px) {
.footer__upper-wrapper {
display: block;
}
}
.footer__upper-wrapper ul {
margin: 0 60px 60px 0;
}
@media screen and (max-width: 500px) {
.footer__upper-wrapper ul {
margin: 0 0 30px 0;
}
}
.footer__upper-wrapper ul:last-child {
margin-right: 0;
}
.footer__upper-wrapper li {
line-height: 2;
}
.footer__upper-wrapper li:first-child {
font-weight: 600;
}
.footer__upper-wrapper li.indent {
text-indent: 1em;
}
.footer__upper-wrapper li a:hover {
text-decoration: underline;
}
.footer__lower {
padding: 12px 0;
	padding-right: 35px;
}
@media screen and (max-width: 767px) {
.footer__lower {
	margin-bottom: 50px;
}
}
.footer__lower-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
}
@media screen and (max-width: 600px) {
.footer__lower-wrapper {
display: block;
}
}
.footer__lower-logo {
width: 200px;
}
@media screen and (max-width: 600px) {
.footer__lower-logo {
width: 180px;
margin-bottom: 10px;
}
}
.footer__lower-copyright {
font-size: 1.1rem;
color: #5ac3d9;
}


#page-top{
	position: fixed;
	right: 15px;
	bottom: 12px;
}
#page-top a{
	display: block;
	width: 50px;
	height: 50px;
	position: relative;
}
#page-top span{
	display: none;
}
#page-top a::before{
	content: "";
	display: block;
	width: 18px;
	height: 18px;
	background: url(../img/common/page-top.png) no-repeat center center;
	background-size: cover;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 1;
}
#page-top a::after{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: rgba(0,0,0,0.5);
}
#page-top a:hover::after{
	background: rgba(0,0,0,1);
}
@media screen and (max-width: 767px) {
#page-top{
	bottom: 62px;
}
}

/*****************************************************************************
 transform 
 *****************************************************************************/

@media screen and (max-width: 900px) {
.sp-hide {
display: none !important;
}
}
.pc-hide {
display: none;
}
@media screen and (max-width: 900px) {
.pc-hide {
display: block !important;
}
}
.pc-hide-500 {
display: none;
}
@media screen and (max-width: 500px) {
.pc-hide-500 {
display: block !important;
}
}

/*.loader{
background: #ffffff;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
}*/


.effect-fade {
opacity: 0;
transition: all .8s cubic-bezier(0.3,0.4,0.1,1);
transition-delay: .4s;
}
.effect-fadeIn {
opacity: 1.0;
}


.effect {
opacity: 0;
transform: translate3d(0,30px,0);
transition: all .8s cubic-bezier(0.3,0.4,0.1,1);
transition-delay: .4s;
}
.fadeIn {
opacity: 1.0;
transform: translate3d(0,0,0);
}


.delay1 {
transition-delay: .4s;
}
.delay2 {
transition-delay: .8s;
}
.delay3 {
transition-delay: 1.2s;
}