/*=============================================
 * TOP
 *=============================================*/
#mv {
   position: relative;
}

#mv h2 {
   width: 32.8%;
   position: relative;
}

#mv .slider {
   width: 72%;
   height: 100%;
   position: absolute;
   top: 0;
   right: 0;
}

#mv .slider .slick-list,
#mv .slider .slick-track,
#mv .slider .slick-slide {
   width: 100%;
   height: 100%;
}

#mv .slider .slick-slide {
   clip-path: polygon(8.5% 0%, 100% 0%, 100% 100%, 0% 100%);
}

#mv .slider .slick-slide img {
   object-position: center;
}

@media screen and (max-width: 1023px) {
   #mv {
      padding-bottom: 5vw;
   }

   #mv .slider {
      width: 100%;
      height: 111vw;
      position: relative;
   }

   #mv .slider .slick-slide {
      clip-path: inherit;
   }

   #mv h2 {
      width: 52vw;
      position: absolute;
      bottom: 0;
      left: 0;
   }
}

/* -- -- */
#important-notice {
   padding: 120px 0 150px;
}

#important-notice .wrap {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   flex-wrap: wrap;
   gap: 90px 100px;
}

#important-notice h2 {
   font-weight: 700;
   font-size: 39px;
   line-height: 45px;
   letter-spacing: 0.05em;
   border-bottom: 5px solid #f7931e;
   padding-bottom: 5px;
  /*width: 290px;*/
}

#important-notice .list {
   max-width: 712px;
   font-size: 21px;
   line-height: 24px;
}

#important-notice .list li a {
   display: grid;
   grid-template-columns: auto 1fr;
   gap: 70px;
   padding: 0 40px;
}

#important-notice .list li+li {
   border-top: 2px dotted #4b4b4b;
   margin-top: 15px;
   padding-top: 15px;
}

#important-notice .list .time {
  width: 115px;
}
#important-notice .list .ttl {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
   display: -webkit-box;
   overflow: hidden;
}

#important-notice .btn {
   width: 100%;
   text-align: right;
}

#important-notice .btn a {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   gap: 25px;
   width: 300px;
   height: 45px;
   color: #f7931e;
   font-size: 20px;
   line-height: 35px;
   letter-spacing: 0.1em;
   box-sizing: border-box;
   position: relative;
}

#important-notice .btn a:before {
   content: '';
   border: 1px solid #f7931e;
   position: absolute;
   top: 0;
   right: 5px;
   bottom: 0;
   left: 5px;
   transform: skewX(-10deg);
   z-index: -1;
   transition: all 0.3s;
}

#important-notice .btn a:after {
   content: '';
   width: 65px;
   height: 10px;
   background: url("../img/common/btn-arrow-orange.png") no-repeat center/100% auto;
   display: block;
}

#important-notice .btn a:hover {
   color: #fff;
   opacity: 1;
   transform: translate(5px, 5px);
}

#important-notice .btn a:hover:before {
   background-color: #f7931e;
}

#important-notice .btn a:hover:after {
   background-image: url("../img/common/btn-arrow-wh.png");
}

@media screen and (max-width: 1200px) {
   #important-notice .wrap {
      gap: 90px 50px;
   }

   #important-notice .list {
      width: calc(100% - 340px);
   }
}

@media screen and (max-width: 1023px) {
   #important-notice .wrap {
      flex-direction: column;
      align-items: center;
      flex-wrap: wrap;
   }

   #important-notice .list {
      width: 100%;
   }

   #important-notice .btn {
      text-align: center;
   }
}

@media screen and (max-width: 767px) {
   #important-notice {
      padding: 50px 0 80px;
   }

   #important-notice .wrap {
      gap: 30px;
   }

   #important-notice h2 {
      font-size: 25px;
      line-height: 35px;
     width: auto;
   }

   #important-notice .list {
      font-size: 16px;
   }

   #important-notice .list li a {
      grid-template-columns: 1fr;
      gap: 10px;
      padding: 0;
   }

   #important-notice .list .ttl {
      -webkit-line-clamp: 2;
   }

   #important-notice .btn a {
      gap: 15px;
      width: 280px;
      font-size: 16px;
   }
}

@media screen and (min-width: 1441px) {
   #important-notice .wrap {
      max-width: 1100px;
   }
}

/* -- -- */
#point {
   position: relative;
   padding: 180px 0 250px;
}

#point:before {
   content: '';
   width: 100%;
   height: 100%;
   background-image: linear-gradient(25deg, #006496, #82aebc);
   position: absolute;
   top: 0;
   left: 0;
   transform: skewY(-5deg);
}

#point h2 {
   font-size: 25px;
   padding-bottom: 140px;
}

#point h2 .fnt-albertan-pro {
   font-weight: 400;
   font-style: italic;
   font-size: 51px;
}

#point .box {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 100px 65px;
}

#point .box .col {
   width: 390px;
   box-sizing: border-box;
}

#point .box .no {
   font-weight: 300;
   font-style: italic;
   font-size: 110px;
   line-height: 120px;
   color: #dce7ea;
   text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
   position: absolute;
   top: -60px;
   left: 25px;
}

#point .box h3 {
   font-weight: 900;
   font-size: 25px;
   line-height: 48px;
}

#point .box figure {
   max-width: 200px;
   margin: 0 auto;
   padding-top: 35px;
}

#point .box .btn {
   padding-top: 35px;
}

#point .box .btn span {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   gap: 15px;
   width: 225px;
   height: 34px;
   font-size: 18px;
   letter-spacing: 0.1em;
   line-height: 32px;
   background-color: #006496;
   color: #fff;
   clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%);
   box-sizing: border-box;
}

#point .box .btn span:after {
   content: '';
   width: 45px;
   height: 10px;
   background: url("../img/common/btn-arrow-wh.png") no-repeat center/100% auto;
   display: block;
}

#point .box .btn span:hover {
   background-color: #4b4b4b;
   opacity: 1;
}

#point .box .col>a {
   display: block;
   background-color: #fff;
   position: relative;
   padding: 35px;
}

#point .box .col>a:hover {
   transform: translate(5px, 5px);
   opacity: 1;
}

#point .box .col>a:hover .btn span {
   background-color: #4b4b4b;
}

#point .btn-big {
   padding-top: 130px;
   position: relative;
   z-index: 1;
}

#point .btn-big a {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 50px;
   width: 100%;
   max-width: 1065px;
   height: 92px;
   font-weight: 700;
   font-size: 30px;
   line-height: 42px;
   color: #fff;
   box-sizing: border-box;
   margin: 0 auto;
   position: relative;
}

#point .btn-big a:before {
   content: '';
   background-color: #00c5dc;
   position: absolute;
   top: 0;
   right: 5px;
   bottom: 0;
   left: 5px;
   transform: skewX(-10deg);
   z-index: -1;
   transition: all 0.3s;
   box-shadow: 8px 8px 0 #00515b;
}

#point .btn-big a:after {
   content: '';
   width: 84px;
   height: 13px;
   background: url("../img/common/btn-arrow-wh.png") no-repeat center/100% auto;
   display: block;
}

#point .btn-big a:hover {
   opacity: 1;
   transform: translate(8px, 8px);
}

#point .btn-big a:hover:before {
   box-shadow: none;
}

#point .space {
   background-color: #fff;
   width: 100%;
   height: 200px;
   position: absolute;
   bottom: -90px;
   left: 0;
}

@media screen and (max-width: 767px) {
   #point {
      padding: 100px 0;
   }

   #point h2 {
      font-size: 20px;
      padding-bottom: 50px;
   }

   #point h2 .fnt-albertan-pro {
      font-size: 30px;
   }

   #point .box {
      gap: 50px;
   }

   #point .box .col {
      width: 100%;
   }

   #point .box .no {
      font-size: 80px;
   }

   #point .box h3 {
      font-size: 20px;
      line-height: 30px;
   }

   #point .box figure,
   #point .box .btn {
      padding-top: 20px;
   }

   #point .btn-big {
      padding-top: 50px;
   }

   #point .btn-big a {
      gap: 0;
      font-size: 16px;
      line-height: 24px;
   }

   #point .btn-big a:after {
      width: 50px;
      height: 10px;
   }

   #point .space {
      height: 50px;
      bottom: -30px;
   }
}

/* -- -- */
#service {
   position: relative;
   padding: 180px 0 250px;
}

#service:before {
   content: '';
   width: 100%;
   height: 100%;
   background: #dce7ea;
   position: absolute;
   top: 0;
   left: 0;
   transform: skewY(-5deg);
}

#service h2 {
   padding-bottom: 140px;
}

#service .box {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 115px 95px;
}

#service .box .col {
   position: relative;
}

#service .box h3 {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: calc(100% - 145px);
   min-height: 106px;
   font-weight: 900;
   font-size: 25px;
   line-height: 35px;
   overflow: hidden;
   position: relative;
   z-index: 1;
   overflow: hidden;
}

#service .box h3:before {
   content: '';
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   right: 10px;
   background-color: #fff;
   transform: skewX(-10deg);
   z-index: -1;
}

#service .box h3 small {
   font-size: 22px;
}

#service .box .btn {
   width: 155px;
   font-size: 18px;
   line-height: 23px;
   letter-spacing: 0.1em;
   text-align: center;
   position: absolute;
   bottom: 0;
   right: 0;
}

#service .box .btn span {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   min-height: 106px;
   color: #fff;
   position: relative;
   z-index: 1;
   overflow: hidden;
}

#service .box .btn span:before {
   content: '';
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 10px;
   background-color: #006496;
   transform: skewX(-10deg);
   z-index: -1;
}

#service .box .btn span:after {
   content: '';
   width: 84px;
   height: 13px;
   background: url("../img/common/btn-arrow-wh.png") no-repeat center/100% auto;
   display: block;
   margin: 5px auto 0;
}

#service .box .col>a {
   display: block;
}

#service .box .col>a:hover {
   transform: translate(5px, 5px);
}

#service .list-btn {
   display: flex;
   justify-content: center;
   gap: 100px;
   padding-top: 130px;
}

#service .list-btn li {
   width: calc(50% - 50px);
}

#service .list-btn a {
   display: flex;
   flex-direction: column;
   justify-content: center;
   width: 100%;
   height: 98px;
   font-weight: 700;
   font-size: 31px;
   line-height: 36px;
   letter-spacing: 0.025em;
   color: #fff;
   box-sizing: border-box;
   margin: 0 auto;
   padding: 0 80px;
   position: relative;
   z-index: 1;
}

#service .list-btn a:before {
   content: '';
   background-color: #00c5dc;
   position: absolute;
   top: 0;
   right: 5px;
   bottom: 0;
   left: 5px;
   transform: skewX(-10deg);
   z-index: -1;
   transition: all 0.3s;
   box-shadow: 8px 8px 0 #00515b;
}

#service .list-btn a:after {
   content: '';
   width: 84px;
   height: 13px;
   background: url("../img/common/btn-arrow-wh.png") no-repeat center/100% auto;
   position: absolute;
   top: 50%;
   right: 50px;
   transform: translateY(-50%);
}

#service .list-btn a small {
   font-size: 22px;
}

#service .list-btn a:hover {
   opacity: 1;
   transform: translate(8px, 8px);
}

#service .list-btn a:hover:before {
   box-shadow: none;
}

@media screen and (max-width: 1440px) {
   #service .list-btn {
      gap: 50px;
   }

   #service .list-btn li {
      width: calc(50% - 25px);
   }
}

@media screen and (max-width: 1200px) {
   #service .box {
      gap: 50px;
   }

   #service .list-btn {
      gap: 30px;
   }

   #service .list-btn li {
      width: calc(50% - 15px);
   }

   #service .list-btn a {
      padding: 0 30px;
   }

   #service .list-btn a:after {
      right: 20px;
   }
}

@media screen and (max-width: 1023px) {
   #service .box {
      grid-template-columns: 1fr;
   }

   #service .list-btn {
      flex-direction: column;
   }

   #service .list-btn li {
      width: 100%;
   }

   #service .list-btn a {
      padding-left: 50px;
   }

   #service .list-btn a:after {
      right: 50px;
   }
}

@media screen and (max-width: 767px) {
   #service {
      padding: 100px 0;
   }

   #service h2 {
      padding-bottom: 50px;
   }

   #service .box {
      gap: 30px;
   }

   #service .box h3 {
      width: calc(100% - 95px);
      min-height: 80px;
      font-size: 16px;
      line-height: 24px;
      padding-right: 5px;
   }

   #service .box h3 small {
      font-size: 14px;
   }

   #service .box .btn {
      width: 100px;
      font-size: 14px;
      line-height: 20px;
   }

   #service .box .btn span {
      min-height: 80px;
   }

   #service .box .btn span:after {
      width: 60px;
      height: 9px;
   }

   #service .list-btn {
      padding-top: 50px;
   }

   #service .list-btn a {
      font-size: 18px;
      line-height: 26px;
      padding-left: 20px;
   }

   #service .list-btn a:after {
      width: 50px;
      height: 8px;
      right: 20px;
   }

   #service .list-btn a small {
      font-size: 14px;
   }
}

/* -- -- */
#availability {
   padding: 150px 0;
}

#availability .date {
   font-size: 18px;
   line-height: 32px;
   padding-top: 60px;
}

#availability .box {
   display: flex;
   justify-content: space-between;
   gap: 20px;
   padding-top: 120px;
}

#availability .box h3 {
   min-height: 72px;
   font-weight: 900;
   font-size: 25px;
   line-height: 35px;
}

#availability .box h3 small {
   font-size: 20px;
}

#availability .box figure {
   max-width: 226px;
   margin: 0 auto;
   padding-top: 30px;
}

#availability .box .btn {
   padding-top: 30px;
}

#availability .box .btn span {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   gap: 15px;
   width: 225px;
   height: 34px;
   font-size: 18px;
   letter-spacing: 0.1em;
   line-height: 32px;
   background-color: #006496;
   color: #fff;
   clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%);
   box-sizing: border-box;
}

#availability .box .btn span:after {
   content: '';
   width: 45px;
   height: 10px;
   background: url("../img/common/btn-arrow-wh.png") no-repeat center/100% auto;
   display: block;
}

#availability .box .btn span:hover {
   background-color: #4b4b4b;
   opacity: 1;
}

#availability .box .col>a {
   display: block;
}

#availability .box .col>a:hover {
   transform: translate(5px, 5px);
   opacity: 1;
}

#availability .box .col>a:hover .btn span {
   background-color: #4b4b4b;
}

@media screen and (max-width: 1200px) {
   #availability .box h3 {
      font-size: 18px;
      line-height: 26px;
      min-height: 52px;
   }

   #availability .box h3 small {
      font-size: 16px;
   }
}

@media screen and (max-width: 1023px) {
   #availability .box {
      flex-wrap: wrap;
      gap: 50px 20px;
   }

   #availability .box .col {
      width: calc(50% - 10px);
   }
}

@media screen and (max-width: 767px) {
   #availability {
      padding: 100px 0;
   }

   #availability .date {
      font-size: 16px;
      padding-top: 20px;
   }

   #availability .box {
      padding-top: 40px;
   }

   #availability .box .col {
      width: 100%;
   }

   #availability .box h3 {
      min-height: inherit;
      font-size: 20px;
   }

   #availability .box h3 small {
      font-size: 16px;
   }
}

/* -- -- */
#news {
   position: relative;
   padding: 180px 0 250px;
}

#news:before {
   content: '';
   width: 100%;
   height: 110%;
   background: #dce7ea;
   position: absolute;
   top: 0;
   left: 0;
   transform: skewY(-5deg);
}

#news .box {
   display: flex;
   flex-direction: row-reverse;
   justify-content: space-between;
   align-items: flex-start;
   gap: 20px;
   padding-top: 140px;
}

#news .box .list-cate {
   display: grid;
   gap: 25px;
   width: 540px;
   font-weight: 700;
   font-size: 20px;
   line-height: 30px;
}

#news .box .list-cate a {
   display: flex;
   align-items: center;
   height: 90px;
   background-color: #006496;
   color: #fff;
   position: relative;
   padding: 0 50px;
}

#news .box .list-cate a:after {
   content: '';
   width: 84px;
   height: 13px;
   background: url("../img/common/btn-arrow-wh.png") no-repeat center/100% auto;
   position: absolute;
   top: 50%;
   right: 50px;
   transform: translateY(-50%);
}

#news .box .list-cate a:hover {
   background-color: #4b4b4b;
   opacity: 1;
}

#news .box .list {
   width: 690px;
   font-weight: 500;
   font-size: 18px;
   line-height: 26px;
   max-height: 550px;
   overflow-y: auto;
}

#news .box .list::-webkit-scrollbar {
   width: 15px;
   height: 15px;
}

#news .box .list::-webkit-scrollbar-track {
   background: #fff;
   border-radius: 0;
}

#news .box .list::-webkit-scrollbar-thumb {
   background: #006496;
   border-radius: 0;
}

#news .box .list ul {
   padding-right: 55px;
}

#news .box .list li {
   display: grid;
   grid-template-columns: auto 1fr;
   gap: 40px;
   padding: 0 25px;
}

#news .box .list li+li {
   border-top: 2px dotted #4b4b4b;
   margin-top: 12px;
   padding-top: 12px;
}

#news .box .list li a {
   color: #006496;
}

#news .box .list li a:hover {
   text-decoration: underline;
}

#news .list-btn {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 25px;
   padding-top: 130px;
}

#news .list-btn a {
   display: flex;
   flex-direction: column;
   justify-content: center;
   width: 100%;
   height: 165px;
   font-weight: 700;
   font-size: 25px;
   line-height: 36px;
   letter-spacing: 0.025em;
   color: #fff;
   box-sizing: border-box;
   margin: 0 auto;
   padding-left: 50px;
   position: relative;
   z-index: 1;
}

#news .list-btn a:before {
   content: '';
   background-color: #00c5dc;
   position: absolute;
   top: 0;
   right: 5px;
   bottom: 0;
   left: 5px;
   transform: skewX(-10deg);
   z-index: -1;
   transition: all 0.3s;
   box-shadow: 8px 8px 0 #00515b;
}

#news .list-btn a:after {
   content: '';
   width: 84px;
   height: 13px;
   background: url("../img/common/btn-arrow-wh.png") no-repeat center/100% auto;
   position: absolute;
   right: 60px;
   bottom: 25px;
}

#news .list-btn a:hover {
   opacity: 1;
   transform: translate(8px, 8px);
}

#news .list-btn a:hover:before {
   box-shadow: none;
}

@media screen and (max-width: 1440px) {
   #news .box .list {
      width: calc(100% - 560px);
   }

   #news .box .list ul {
      padding-right: 30px;
   }
}

@media screen and (max-width: 1200px) {
   #news .box .list-cate {
      width: 50%;
   }

   #news .box .list-cate a {
      padding-left: 30px;
   }

   #news .box .list-cate a:after {
      right: 30px;
   }

   #news .box .list {
      width: 50%;
   }

   #news .list-btn a {
      font-size: 20px;
   }
}

@media screen and (max-width: 1023px) {
   #news .box {
      flex-direction: column;
      gap: 50px;
   }

   #news .box .list-cate,
   #news .box .list {
      width: 100%;
   }

   #news .list-btn {
      grid-template-columns: 420px;
      justify-content: center;
   }
}

@media screen and (max-width: 767px) {
   #news {
      padding: 100px 0;
   }

   #news .box {
      padding-top: 50px;
   }

   #news .box .list-cate {
      gap: 10px;
   }

   #news .box .list-cate a {
      height: 70px;
      font-size: 18px;
      line-height: 26px;
      padding: 0 80px 0 20px;
   }

   #news .box .list-cate a:after {
      width: 50px;
      height: 8px;
      right: 20px;
   }

   #news .box .list {
      font-size: 16px;
      line-height: 24px;
   }

   #news .box .list ul {
      padding-right: 10px;
   }

   #news .box .list li {
      grid-template-columns: 1fr;
      gap: 10px;
      padding: 0;
   }

   #news .list-btn {
      grid-template-columns: 1fr;
      padding-top: 50px;
   }

   #news .list-btn a {
      height: 100px;
      font-size: 18px;
      line-height: 26px;
      padding-left: 30px;
   }

   #news .list-btn a:after {
      right: 20px;
      bottom: 15px;
   }
}

/* -- -- */
#recruit {
   background: #dce7ea;
   padding: 0 0 250px;
   position: relative;
}

#recruit:before {
   content: '';
   width: 100%;
   height: 705px;
   background-image: linear-gradient(25deg, #006496, #82aebc);
   position: absolute;
   top: 200px;
   left: 0;
   transform: skewY(-5deg);
}

#recruit h2 {
   font-weight: 700;
   font-size: 39px;
   line-height: 45px;
   letter-spacing: 0.1em;
   position: relative;
   z-index: 2;
}

#recruit h2 .sub {
   display: block;
   font-weight: 500;
   font-size: 100px;
   line-height: 110px;
   letter-spacing: 0.075em;
   padding-bottom: 30px;
}

#recruit .box-1 {
   position: relative;
   z-index: 1;
   padding: 180px 0 230px;
}

#recruit .box-1 h3 {
   font-size: 65px;
   letter-spacing: 0.05em;
   line-height: 90px;
   position: relative;
   z-index: 1;
}

#recruit .box-1 h3 small {
   display: inline-block;
   font-weight: 500;
   font-size: 34px;
   line-height: 36px;
   margin-bottom: 15px;
}

#recruit .box-1 h3 span {
   display: inline-block;
   padding: 0 90px;
   position: relative;
   left: -60px;
}

#recruit .box-1 h3 span:before {
   content: '';
   background-color: #fff;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   transform: skewX(-10deg);
   z-index: -1;
}

#recruit .box-1 h3 span:not(:last-child) {
   margin-bottom: 10px;
}

#recruit .box-1 .btn {
   padding: 100px 0 0 405px;
}

#recruit .box-1 .btn a {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   gap: 20px;
   width: 345px;
   height: 50px;
   font-size: 28px;
   letter-spacing: 0.1em;
   line-height: 30px;
   color: #006496;
   box-sizing: border-box;
   position: relative;
   z-index: 1;
}

#recruit .box-1 .btn a:before {
   content: '';
   background-color: #fff;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: -1;
   transform: skewX(-10deg);
   box-shadow: 5px 5px 0 #00515b;
}

#recruit .box-1 .btn a:after {
   content: '';
   width: 65px;
   height: 10px;
   background: url("../img/common/btn-arrow.png") no-repeat center/100% auto;
   display: block;
}

#recruit .box-1 .btn a:hover {
   transform: translate(5px, 5px);
   opacity: 1;
}

#recruit .box-1 .btn a:hover:before {
   box-shadow: none;
}

#recruit .box-1 figure {
   width: 781px;
   position: absolute;
   top: -175px;
   right: -85px;
}

#recruit .slider {
   margin-top: 250px;
   padding: 0 110px;
}

#recruit .slider .slick-list {
   margin: 0 -15px;
}

#recruit .slider .slick-slide {
   margin: 0 15px;
}

#recruit .slider .slick-arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
}

#recruit .slider .slick-prev {
   left: 0;
}

#recruit .slider .slick-next {
   right: 0;
}

#recruit .box-2 {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 70px;
   padding-top: 250px;
}

#recruit .box-2 h3 {
   font-size: 34px;
   line-height: 40px;
   letter-spacing: 0.1em;
   text-align: center;
   padding-bottom: 30px;
}

@media screen and (max-width: 1440px) {
   #recruit .box-1 figure {
      right: -20px;
   }

   #recruit .slider {
      padding: 0 70px;
   }
}

@media screen and (max-width: 1023px) {
   #recruit:before {
      height: 560px;
      top: 310px;
   }

   #recruit .box-1 h3 {
      font-size: 40px;
   }

   #recruit .box-1 h3 small {
      font-size: 25px;
   }

   #recruit .box-1 .btn {
      text-align: right;
      padding-left: 0;
   }

   #recruit .box-1 figure {
      width: 580px;
      top: 0;
   }
}

@media screen and (max-width: 767px) {
   #recruit {
      padding: 0 0 100px;
   }

   #recruit:before {
      display: none;
   }

   #recruit h2 {
      font-size: 14px;
      line-height: 20px;
   }

   #recruit h2 .sub {
      font-size: 25px;
      line-height: 30px;
      padding-bottom: 5px;
   }

   #recruit .box-1 {
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 70vw;
      margin-top: -70px;
      padding: 10vw 0 0;
      position: relative;
   }

   #recruit .box-1:before {
      content: '';
      height: 45%;
      background-image: linear-gradient(25deg, #006496, #82aebc);
      position: absolute;
      top: 28%;
      right: -10vw;
      left: -10vw;
      transform: skewY(-5deg);
   }

   #recruit .box-1 h3 {
      line-height: 30px;
   }

   #recruit .box-1 h3 small {
      font-size: 10px;
      line-height: 20px;
      margin-bottom: 0;
   }

   #recruit .box-1 h3 span {
      font-size: 20px;
      padding: 0 25px;
      left: -15px;
   }

   #recruit .box-1 h3 span:not(:last-child) {
      margin-bottom: 0;
   }

   #recruit .box-1 .btn {
      padding: 20px 0 0;
   }

   #recruit .box-1 .btn a {
      gap: 10px;
      width: 180px;
      height: 30px;
      font-size: 14px;
      line-height: 20px;
   }

   #recruit .box-1 .btn a:after {
      width: 50px;
      height: 8px;
   }

   #recruit .box-1 figure {
      width: 60vw;
   }

   #recruit .box-2 {
      grid-template-columns: 1fr;
      gap: 50px;
      padding-top: 50px;
   }

   #recruit .box-2 h3 {
      font-size: 20px;
      line-height: 30px;
      padding-bottom: 20px;
   }

   #recruit .slider {
      margin: 50px -8vw 0;
      padding: 0 50px;
   }

   #recruit .slider .slick-track {
      display: flex;
      align-items: center;
   }

   #recruit .slider .slick-track:before,
   #recruit .slider .slick-track:after {
      display: none;
   }

   #recruit .slider .slick-slide {
      float: none;
   }
}

/*=============================================
 * access
 *=============================================*/
#access__sec1 {
   padding: 150px 0;
}

#access__sec1 .box {
   padding-top: 120px;
}

#access__sec1 .gmap {
   width: 100%;
   height: 500px;
   margin-top: 30px;
}

#access__sec1 .gmap iframe {
   display: block;
   width: 100%;
   height: 100%;
}

#access__sec1 .txt,
#access__sec1 figure {
   padding-top: 30px;
}

@media screen and (max-width: 767px) {
   #access__sec1 {
      padding: 80px 0;
   }

   #access__sec1 .box {
      padding-top: 50px;
   }

   #access__sec1 .gmap {
      width: 100vw;
      height: 300px;
      margin: 20px -10vw 0;
   }

   #access__sec1 figure,
   #access__sec1 .txt {
      padding-top: 20px;
   }

   #access__sec1 figure {
      margin: 0 -5vw;
   }
}

#access__sec2 {
   padding: 150px 0;
   position: relative;
}

#access__sec2:before {
   content: '';
   width: 100%;
   height: 100%;
   background-color: #fff;
   position: absolute;
   top: 0;
   left: 0;
   transform: skewY(-5deg);
}

#access__sec2 .box {
   padding-top: 120px;
}

#access__sec2 .box h3 {
   padding-bottom: 50px;
}

#access__sec2 .box h4 {
   max-width: 920px;
   border-top: 1px solid;
   border-bottom: 1px solid;
   margin: 0 auto;
   padding: 10px 0;
}

#access__sec2 .box ul,
#access__sec2 .box .txt {
   padding-top: 20px;
}

#access__sec2 .box ul {
   display: flex;
   justify-content: center;
   gap: 80px;
}

#access__sec2 .box .btn-1 {
   padding-top: 20px;
}

@media screen and (max-width: 1023px) {
   #access__sec2 .box ul {
      flex-direction: column;
      gap: 50px;
   }
}

@media screen and (max-width: 767px) {
   #access__sec2 {
      padding: 80px 0;
   }

   #access__sec2 .box {
      padding-top: 50px;
   }

   #access__sec2 .box ul {
      gap: 30px;
   }
}

#access__sec3 {
   padding: 150px 0;
   position: relative;
}

#access__sec3:before {
   content: '';
   width: 100%;
   height: 100%;
   background-color: #dce7ea;
   position: absolute;
   top: 0;
   left: 0;
   transform: skewY(-5deg);
}

#access__sec3 h3 {
   padding-top: 120px;
}

#access__sec3 .box {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   justify-content: center;
   gap: 40px 30px;
   padding-top: 30px;
}

#access__sec3 .box .col {
   position: relative;
   padding-right: 100px;
}

#access__sec3 .box .no {
   font-weight: 500;
   font-size: 80px;
   line-height: 80px;
   position: relative;
   z-index: 1;
   margin-bottom: -24px;
}

#access__sec3 .box figure {
   position: relative;
}

#access__sec3 .box .txt {
   color: #4b4b4b;
   font-size: 18px;
   padding-top: 15px;
}

#access__sec3 .box .txt .cl-red {
   color: #ff0000;
}

#access__sec3 .box .col:not(:last-child) figure:after {
   content: '';
   width: 64px;
   height: 14px;
   background: url("../img/access/arrow-1.png") no-repeat center top/100% auto;
   position: absolute;
   top: 50%;
   left: 100%;
   transform: translateY(-50%);
   margin-left: 32px;
}

#access__sec4 .video {
   width: 552px;
   margin: 120px auto 0;
}

#access__sec4 .video .in {
   width: 100%;
   position: relative;
   padding-top: 62%;
}

#access__sec4 .video .in>* {
   display: block;
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
}

@media screen and (max-width: 1023px) {
   #access__sec3 .box {
      gap: 40px 10px;
   }

   #access__sec3 .box .col {
      padding-right: 50px;
   }

   #access__sec3 .box .col:not(:last-child) figure:after {
      width: 40px;
      height: 9px;
   }
}

@media screen and (max-width: 767px) {
   #access__sec3 {
      padding: 80px 0;
   }

   #access__sec3 h3 {
      padding-top: 50px;
   }

   #access__sec3 .box {
      grid-template-columns: 80%;
      gap: 50px;
   }

   #access__sec3 .box .no {
      font-size: 50px;
      line-height: 50px;
      margin-bottom: -15px;
   }

   #access__sec3 .box figure {
      position: static;
   }

   #access__sec3 .box .txt {
      font-size: 14px;
   }

   #access__sec3 .box .col {
      padding-right: 0;
   }

   #access__sec3 .box .col:not(:last-child) figure:after {
      transform: translateX(-50%) rotate(90deg);
      top: 100%;
      left: 50%;
      margin-top: 30px;
      margin-left: 0;
   }

   #access__sec4 .video {
      width: 100%;
      margin-top: 50px;
   }
}

#access__sec4 {
   border-bottom: 1px solid #000;
   padding: 150px 0;
}

#access__sec4 .box {
   padding-top: 150px;
}

#access__sec4 .box h3 {
   max-width: 920px;
   border-top: 1px solid;
   border-bottom: 1px solid;
   margin: 0 auto;
   padding: 10px 0;
}

#access__sec4 .list {
   display: flex;
   justify-content: center;
   gap: 20px;
   padding-top: 30px;
}

#access__sec4 .list .col {
   width: 245px;
   position: relative;
}

#access__sec4 .list .no {
   font-weight: 500;
   font-size: 80px;
   line-height: 80px;
   position: relative;
   z-index: 1;
   margin-bottom: -24px;
}

#access__sec4 .list figure {
   position: relative;
}

#access__sec4 .list .txt {
   color: #4b4b4b;
   font-size: 18px;
   padding-top: 15px;
}

#access__sec4 .list .col:not(:last-child) {
   padding-right: 56px;
}

#access__sec4 .list .col:not(:last-child) figure:after {
   content: '';
   width: 39px;
   height: 13px;
   background: url("../img/access/arrow-2.png") no-repeat center top/100% auto;
   position: absolute;
   top: 50%;
   left: 100%;
   transform: translateY(-50%);
   margin-left: 18px;
}
span.haishi{
  font-size: 14px;
  color: #C21530;
  line-height: 1.2;
  
}
@media screen and (max-width: 1023px) {
   #access__sec4 .list {
      gap: 10px;
   }

   #access__sec4 .list .col {
      width: 135px;
      padding-right: 30px;
   }

   #access__sec4 .list .col:not(:last-child) {
      padding-right: 40px;
   }

   #access__sec4 .list .col:not(:last-child) figure:after {
      width: 30px;
      height: 10px;
      margin-left: 10px;
   }
}

@media screen and (max-width: 767px) {
   #access__sec4 {
      padding: 80px 0;
   }

   #access__sec4 .box {
      padding-top: 50px;
   }

   #access__sec4 .list {
      flex-direction: column;
      align-items: center;
      gap: 50px;
   }

   #access__sec4 .list .no {
      font-size: 50px;
      line-height: 50px;
      margin-bottom: -15px;
   }

   #access__sec4 .list figure {
      position: static;
   }

   #access__sec4 .list .txt {
      font-size: 14px;
   }

   #access__sec4 .list .col {
      width: 80%;
      padding-right: 0;
   }

   #access__sec4 .list .col:not(:last-child) {
      padding-right: 0px;
   }

   #access__sec4 .list .col:not(:last-child) figure:after {
      margin-top: 30px;
      margin-left: 0;
      top: 100%;
      left: 50%;
      transform: translateX(-50%) rotate(90deg);
   }
  
span.haishi{
  font-size: 10px;
  
}
}