@charset "utf-8";
/*****共通*****/
 #entryMain .key-wrap {
     background-image: linear-gradient(#ffffff 30%, #01b097 53%, #0065b5 81%);
     height: 100vh;
     position: relative;
}
 #entryMain .topKeyimages {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
}

 #entryMain .topKeyimages .key-wrap {
     height: 50vh;
}
 #entryMain .topKeyimages .key-space {
     height: 35vh;
     margin: 70px;
}
 #entryMain {
     position: relative;
     z-index: 0;
}
/* 白背景 */
 #entryMain .topkey-bg-white {
     position: fixed;
     inset: 0;
     background: #fff;
     z-index: 999;
    /* ページ最前面 */
     opacity: 1;
     transition: opacity 1.5s ease;
}
 #entryMain .topkey-bg-white.is-hide {
     opacity: 0;
}
 #entryMain .topKeyimages .key-wrap .key-ttl-wrap {
     position: absolute;
     z-index: 10;
     left: 8%;
     bottom: 17%;
     text-align: left;
}
 #entryMain .key-ttl-wrap h1 {
     color: #fff;
     text-align: center;
     font-size: 120px;
     font-family: "HelveticaLTPro-Roman", Helvetica, "Arial", "sans-serif";
     font-weight: bold;
     letter-spacing: 0;
}
 #entryMain .key-ttl-wrap h4 {
     font-size: 28px;
     color: #01b097;
     font-weight: bold;
     position: relative;
     letter-spacing: 0px;
     transform-origin: left;
     margin-bottom: -30px;
}
 @media screen and (min-width: 768px) {
 #entryMain .topKeyimages .key-wrap:after {
    position: absolute;
    content: "";
    background: url(../images/top/before-recruit.png) no-repeat center / contain;
    bottom: 30px;
    right: 2%;
    width: 320px;
    height: 220px;
    z-index: 13;
}
}
@media (min-width: 1350px) and (max-width: 1370px) 
  and (min-height: 1010px) and (max-height: 1030px) {
#entryMain .topKeyimages .key-wrap {
    height: 26vh;
}
	    #entryMain .topKeyimages .key-space {
        height: 17vh;
        margin: 70px;
    }
}
 @media screen and (max-width: 767px) {
	 #entryMain .topKeyimages .key-wrap .key-ttl-wrap {
    position: absolute;
    z-index: 10;
    left: 8%;
    bottom: 26%;
    text-align: left;
}
     #entryMain .topKeyimages .key-space {
         height: 40vh;
         margin: 20px;
    }
     #entryMain .key-ttl-wrap h1 {
         font-size: 50px;
         line-height: normal;
    }
     #entryMain .key-ttl-wrap h4{
         margin-bottom: 0;
		 font-size: 20px;
    }
}
/*****共通end*****/
 #entryMain .sec1 {
     width: 100%;
     position: relative;
     margin-top: 470px;
     background-color: #fff;
     padding-top: 90px;
     padding-bottom: 60px;
}
 #entryMain .sec1:before {
	content: "";
    position: absolute;
	top: calc(-50px);
    left: 0;
    width: 100%;
    aspect-ratio: 1920 / 200;
	  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 150' preserveAspectRatio='none'%3E%3Cpath d='M0 25 Q80 25 160 12.5 Q320 -12.5 480 12.5 Q560 25 640 25 Q720 25 800 12.5 Q960 -12.5 1120 12.5 Q1200 25 1280 25 Q1360 25 1440 12.5 Q1600 -12.5 1760 12.5 Q1840 25 1920 25 L1920 150 L0 150 Z' fill='%23ffffff'/%3E%3C/svg%3E") center top no-repeat;
	 background-size: 100% 100%;
	    z-index: -1;
}
 #waveCanvas {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 150px;
     z-index: 1;
     pointer-events: none;
    /* 操作邪魔しない */
}
 #entryMain .sec1 > *:not(#waveCanvas) {
     position: relative;
     z-index: 2;
}
 #entryMain .sec1 .wrap{
     max-width: 1400px;
     padding: 0 10px;
     margin: 0 auto;
     justify-content: center;
}
 #entryMain .sec1 .ttl-wrap {
     text-align: center;
     margin: 0 auto;
     width: fit-content;
}
 #entryMain .sec1 .ttl-wrap h1 {
     font-size: 55px;
     font-weight: bold;
     color: #8c9ba8;
     font-family: Helvetica, "Arial", "sans-serif";

     line-height: 80px;
     padding-top: 10px;
     padding-bottom: 10px;
     letter-spacing: 5px;
}
 #entryMain .sec1 .ttl-wrap h4 {
     font-size: 28px;
     color: #01b097;
     font-weight: bold;
     position: relative;
     letter-spacing: 0px;
     transform-origin: left;
}
@media screen and (min-height: 1100px) {
	 #entryMain .sec1 {
		 margin-top: 660px;
	 }
	#entryMain .key-ttl-wrap {
		position: absolute;
		z-index: 10;
		left: 8%;
		bottom: 26%;
		text-align: left;
	}
	#entryMain .topKeyimages .key-wrap:after {
        position: absolute;
        content: "";
        background: url(../images/top/before-recruit.png) no-repeat center / contain;
        bottom: 85px;
        right: 2%;
        width: 320px;
        height: 220px;
        z-index: 13;
	}
}
@media screen and (min-height: 940px) {
	#entryMain .sec1{
		margin-top: 500px;
	}
}
 @media screen and (min-width: 768px) {
     #entryMain .sec1 .info-wrap li .news_inner {
         padding-left: 40px;
    }
}
 @media screen and (min-width: 768px) and (max-width: 1380px){
     #entryMain .sec1{
         margin-top: 37em;
    }
}
 @media screen and (max-width: 767px) {
     #entryMain .sec1 {
         margin-top: 27em;
         padding-top: 20px;
         padding-bottom: 40px;
    }
	 #entryMain .sec1:before {
		 top: -4vh;
	 }
     #entryMain .sec1 .ttl-wrap h1 {
         font-size: 35px;
         font-weight: bold;
         color: #8c9ba8;
         line-height: normal;
         padding-top: 10px;
         padding-bottom: 0px;
         letter-spacing: 5px;
    }
	 #entryMain .sec1 .ttl-wrap h4 {
		 font-size: 20px;
	 }
}
 #entryMain .sec2{
     background-color: #f1f6f7;
     padding-bottom: 200px;
}
 #entryMain .sec2 .white-cont{
     background-color: #fff;
     padding: 50px 80px;
     margin: 70px 0px;
     border-radius: 20px;
     align-items: end;
     justify-content: space-between;
}
 #entryMain .sec2 .white-cont h3{
     font-size: 40px;
     font-weight: bold;
     line-height: 50px;
     margin-bottom: 30px;
}
 #entryMain .sec2 .white-cont h3 span{
     font-size: 25px;
}
 #entryMain .sec2 .white-cont p{
     font-size: 18px;
}
 #entryMain .sec2 a.more-btn-trigger {
     display: flex;
     align-items: center;
     font-size: 15px;
     font-weight: 600;
     justify-content: right;
     padding-top: 30px;
     width: fit-content;
     justify-self: right;
     font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}
 #entryMain .sec2 .btn-green:hover {
     background-color: #fff;
     color: #01b097;
     border: 2px solid #01b097;
}
 #entryMain .btn-green {
     background-color: #01b097;
     color: #fff;
     padding: 20px 70px;
     border-radius: 50px;
     font-size: 20px;
     font-weight: bold;
     position: relative;
     display: flex;
     align-items: center;
     border: 2px solid #01b097;
}
 @media screen and (min-width: 768px) {
     #entryMain .sec2 .white-cont .boxL{
         width: 66%;
    }
}
 @media screen and (min-width: 1380px) and (max-width: 1680px){
}
 @media screen and (min-width: 768px) and (max-width: 1380px){
}
 @media screen and (max-width: 767px) {
     #entryMain .sec2 {
         background-color: #f1f6f7;
         padding-bottom: 100px;
         padding-top: 30px;
    }
     #entryMain .sec2 .white-cont{
         padding: 20px 30px;
         margin: 30px 0px;
         border-radius: 20px;
    }
	 #entryMain .sec2 .white-cont h3 span {
    font-size: 20px;
}
     #entryMain .sec2 .white-cont h3 {
         font-size: 30px;
		         line-height: normal;
         margin-bottom: 10px;
    }
     #entryMain .sec2 .white-cont p {
         font-size: 14px;
         margin-bottom: 20px;
    }
     #entryMain .btn-green {
         background-color: #01b097;
         color: #fff;
         padding: 15px 40px;
         border-radius: 50px;
         font-size: 17px;
         font-weight: bold;
         position: relative;
         display: flex;
         align-items: center;
         border: 2px solid #01b097;
    }
}