@charset "UTF-8";
@-webkit-keyframes loop {
   0% {
     transform: translateX(100%);
   }
 
   to {
     transform: translateX(-100%);
   }
 }
 
 @keyframes loop {
   0% {
     transform: translateX(100%);
   }
 
   to {
     transform: translateX(-100%);
   }
 }
 
 @-webkit-keyframes loop2 {
   0% {
     transform: translateX(0);
   }
 
   to {
     transform: translateX(-200%);
   }
 }
 
 @keyframes loop2 {
   0% {
     transform: translateX(0);
   }
 
   to {
     transform: translateX(-200%);
   }
 }

/* ========================================
   @media screen and (min-width: 768px),print
======================================== */
@media screen and (min-width: 768px),print {  

/* common
-------------------------------------*/
.util-btn {
   width: min(95%, 240px);
   border-radius: 30px;
   background: #131313;
}
.util-btn a {
   font-weight: 500;
   font-size: clamp(0.75rem, 0.667rem + 0.17vw, 0.875rem);
   letter-spacing: 0.05em;
   line-height: 1.85714;
   text-align: center;
   color: #fff;
   position: relative;
   padding: 17px 0;
   display: block;
}
.util-btn a::after {
   position: absolute;
   content: "";
   background: url(../images/common/btn-arrow.svg)no-repeat center center;
   background-size: contain;
   width: 10px;
   height: 7px;
   top: 50%;
   right: 20px;
   transform: translateY(-50%);
}

/* mv
-------------------------------------*/
#mv {
   position: relative;
}
#mv .enttl {
   position: absolute;
   z-index: 2;
   top: 110px;
   left: 50px;
}
#mv .ttl {
   position: absolute;
   z-index: 2;
   top: 350px;
   left: 78px;
}
#mv .deco01 {
   position: absolute;
   top: 221px;
   right: 158px;
}
#mv .deco02 {
   position: absolute;
   bottom: -142px;
   left: 163px;
}
#mv .deco {
   opacity: 0;
   transform: translateY(30px);
   transition: opacity 1.2s ease, transform 1.2s ease;
}
#mv.is-show-deco .deco {
   opacity: 1;
   transform: translateY(0);
}
/* 時間差 */
#mv.is-show-deco .deco01 {
   transition-delay: 0.4s;
}
#mv.is-show-deco .deco02 {
   transition-delay: 0.7s;
}
#mv .bnr-box {
   position: absolute;
   bottom: -30px;
   right: 50px;
   width: 220px;
   height: 220px;
}
#mv .bnr-box .circle {display: inline-block;animation: rotateCircle 12s linear infinite;transform-origin: center center;position: absolute;top: 0;left: 0;width: 220px;height: 220px;}
@keyframes rotateCircle {

   from {
       transform: rotate(0deg);
   }

   to {
       transform: rotate(360deg);
   }
}

#mv .bnr-box .bnr {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 190px;
   height: 190px;
   transform: translate(-50%, -50%);
}

/* intro
-------------------------------------*/
#intro {
   position: relative;
   padding-block: 0 82px;
   overflow: hidden;
}
#intro .intro-bg {
   position: absolute;
   top: 16%;
   right: 0;
   will-change: transform;
}
#intro .inner {
   width: min(95%, 1600px);
   margin-inline: auto;
   padding-block: 310px 0;
}
#intro .inner h2 {
   margin-bottom: 86px;
   position: relative;
   z-index: 2;
   padding-inline: 88px;
}
#intro .inner .txt {
   font-weight: 900;
   font-size: 46px;
   line-height: 1.739;
   letter-spacing: 0;
   position: relative;
   z-index: 2;
   width: min(95%, 1200px);
   margin-left: auto;
}
#intro .inner .txt span {
   width: fit-content;
   -webkit-text-fill-color: transparent;
   background: linear-gradient(
      90deg,
      #131313 0%,
      #131313 50%,
      #F5F5F5 50%
   );
   background-position: 100% 0%;
   background-size: 200% 100%;
   -webkit-background-clip: text;
   background-clip: text;
   display: block;
   transition: background-position .2s cubic-bezier(.4,0,.2,1);
}
#intro .inner .btn {
   margin-left: auto;
   position: relative;
   top: -167px;
   width: 320px;
   height: 320px;
   cursor: pointer;
   z-index: 3;
}
/* 波紋のベース（通常は止める） */
#intro .inner .btn::before,
#intro .inner .btn::after {
   content: "";
   position: absolute;
   inset: 0;
   margin: auto;
   border-radius: 50%;
   pointer-events: none;
   box-shadow: 0 0 0 0 rgba(38, 154, 111, 0.12);
   opacity: 0;
   animation: none;
}
/* hoverしたときだけ波紋 */
#intro .inner .btn:hover::before {
   animation: ripple 2.5s ease-out infinite;
}

#intro .inner .btn:hover::after {
   animation: ripple 2.5s ease-out infinite;
   animation-delay: 0.8s;
}

@keyframes ripple {
   0% {
       box-shadow: 0 0 0 0 rgba(38, 154, 111, 0.12);
       opacity: 1;
   }
   100% {
       box-shadow: 0 0 0 80px rgba(38, 154, 111, 0);
       opacity: 0;
   }
}
#intro .inner .btn a {
   display: block;
}
#intro .en-deco {
   position: absolute;
   top: 286px;
   left: 63px;
}


/* topics
-------------------------------------*/
#topics {
   width: min(95%, 1440px);
   margin-inline: auto;
   border-radius: 80px;
   background: transparent;
   backdrop-filter: blur(50px);
   --webkit-backdrop-filter: blur(50px);
   background-color: rgba(255, 255, 255, 0.08);
   margin-bottom: -295px;
   position: relative;
   z-index: 2;
}
#topics .inner {
   padding-block: 120px;
   width: min(95%, 1200px);
   margin-inline: auto;
   display: grid;
   grid-template-columns: 22.8333% 66.6666%;
   justify-content: space-between;
}
#topics .ttl-box {
   position: relative;
}
#topics .enttl {
   padding-top: 8px;
   margin-bottom: 20px;
}
#topics h2 {
   font-weight: 500;
   font-size: 22px;
   letter-spacing: 0;
   margin-bottom: 20px;
}
#topics .util-btn {
   position: absolute;
   bottom: 0;
}
#topics .system-list {
   display: grid;
   grid-template-columns: 1fr;
   gap: 0;
}
#topics .system-list li {
   border-bottom: 1px solid #a4a4a4;
}
#topics .system-list li a {
   display: flex;
   gap: 23px;
   padding: 29px 39px;
}
#topics .system-list li:first-child {
   border-top: 1px solid #a4a4a4;
}
#topics .system-list li .system-date {
   font-size: 16px;
   color: #269a6f;
}
#topics .system-list li .system-ttl-01 {
   font-weight: 500;
   font-size: 14px;
   letter-spacing: 0.05em;
   line-height: 1.85714;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
}

/* domain
-------------------------------------*/
#domain {
   background: #C8C6BE;
   clip-path: polygon(0 9.5%, 100% 0%, 100% 90.5%, 0% 100%);
   position: relative;
   margin-bottom: -425px;
}
#domain .deco {
   position: absolute;
   top: 50px;
   right: -135px;
   opacity: 0;
   transform: translateY(20px);
   transition: opacity 0.8s ease, transform 0.8s ease;
}
#domain .deco.is-show {
   opacity: 1;
   transform: translateY(0);
}
#domain .inner {
   width: min(95%, 1600px);
   margin-inline: auto;
   padding-block: 470px 707px;
   position: relative;
   z-index: 2;
}
#domain .ttl-box {
   width: min(95%, 320px);
   position: absolute;
   top: 25.7%;
   right: 0;
}
#domain .enttl {
   text-align: right;
   padding-right: 6px;
   margin-bottom: 20px;
}
#domain h2 {
   font-weight: 500;
   font-size: 22px;
   text-align: right;
   letter-spacing: 0;
   margin-bottom: 67px;
}
#domain .btn-list {
   display: grid;
   gap: 44px;
}
#domain .btn-list li {
   border-radius: 40px;
   background: #fff;
   border: 1px solid #131313;
   position: relative;
}
#domain .btn-list li::before {
   position: absolute;
   top: -30px;
   left: 50%;
   transform: translateX(-50%) translateY(10px) scale(0.9);
   content: "";
   width: 200px;
   height: 48px;
   opacity: 0;
   transition:
       opacity 0.2s ease,
       transform 0.4s cubic-bezier(.34,1.56,.64,1);
   pointer-events: none;
}
#domain .btn-list li:hover::before {
   opacity: 1;
   transform: translateX(-50%) translateY(0) scale(1);
}
#domain .btn-list li:nth-child(1)::before {
   background: url(../images/index/domain-fukidashi01.svg)no-repeat;
   background-size: contain;
}
#domain .btn-list li:nth-child(2)::before {
   background: url(../images/index/domain-fukidashi02.svg)no-repeat;
   background-size: contain;
}
#domain .btn-list li a {
   font-weight: 500;
   font-size: 14px;
   letter-spacing: 0.05em;
   line-height: 1.85714;
   text-align: center;
   position: relative;
   padding: 26px 0;
   display: block;
}
#domain .btn-list li a::after {
   position: absolute;
   content: "";
   background: url(../images/common/btn-arrow-b.svg)no-repeat center center;
   background-size: contain;
   width: 10px;
   height: 7px;
   top: 50%;
   right: 29px;
   transform: translateY(-50%);
}

.service-content {
	position: relative;
	width: 53.75%;
	margin-inline: auto;
	/* overflow: hidden; */
	padding-top: 53.75%;
	text-align: right;
	margin-top: 61px;
}
.service-content:after {
	content: '';
	display: block;
	width: 72%;
	padding-top: 72%;
	border: solid 10px #2C2C2C;
	border-radius: 50%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	z-index: 1;
}
.rotate {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	z-index: 2;
}
.rotate .rotate-ctn {
	position: relative;
	width: 100%;
	height: 100%;
	animation: 100s linear big-circle infinite;	/* 大枠を回転させているアニメーション */
}

.rotate .box {
	position: absolute;
	width: 100%;
	height: 50%;
	transform-origin: 50% 100%;
}

/* 各コンテンツの文字を上向きにする */
.rotate .box.box-1 { left: 50%; transform: translate(-50%, 0) rotate(0deg); }
.rotate .box.box-2 { left: 50%; transform: translate(-50%, 0) rotate(51.4286deg); }
.rotate .box.box-3 { left: 50%; transform: translate(-50%, 0) rotate(102.8571deg); }
.rotate .box.box-4 { left: 50%; transform: translate(-50%, 0) rotate(154.2857deg); }
.rotate .box.box-5 { left: 50%; transform: translate(-50%, 0) rotate(205.7143deg); }
.rotate .box.box-6 { left: 50%; transform: translate(-50%, 0) rotate(257.1429deg); }
.rotate .box.box-7 { left: 50%; transform: translate(-50%, 0) rotate(308.5714deg); }



.rotate .box .parts {
	position: relative;
	width: 80%;
	margin: 0 auto;
	padding: 20px 0;
	background: #131313;
	filter: drop-shadow(0px 10px 20px rgba(19, 19, 19, 0.12));
	font-weight: 500;
	font-size: 22px;
	text-align: center;
	color: #fff;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	display: grid;
	place-content: center;
}
.rotate .box .parts span {
   display: block;
   margin-bottom: 20px;
}
/* 各コンテンツを回転させるアニメーション */
.rotate .box.box-1 .parts { animation: 100.0s linear circle1 infinite;}
.rotate .box.box-2 .parts { animation: 100.0s linear circle2 infinite;}
.rotate .box.box-3 .parts { animation: 100.0s linear circle3 infinite;}
.rotate .box.box-4 .parts { animation: 100.0s linear circle4 infinite;}
.rotate .box.box-5 .parts { animation: 100.0s linear circle5 infinite;}
.rotate .box.box-6 .parts { animation: 100.0s linear circle6 infinite;}
.rotate .box.box-7 .parts { animation: 100.0s linear circle7 infinite;}
.rotate .box.box-8 .parts { animation: 100.0s linear circle8 infinite;}
.rotate .box.box-6 .parts { 
   font-size: 18px;
}
.rotate .box.box-6 .parts span {
   margin-bottom: 4px;
}
@keyframes big-circle {
   0% { transform: rotate(0deg);}
   100% { transform:rotate(360deg);}
  }
  @keyframes circle1 {
   0% { transform: rotate(0deg);}
   100% { transform: rotate(-360deg);}
  }
  @keyframes circle2 {
   0% { transform: rotate(-51.4286deg); }
   100% { transform: rotate(-411.4286deg); }
}

@keyframes circle3 {
   0% { transform: rotate(-102.8571deg); }
   100% { transform: rotate(-462.8571deg); }
}

@keyframes circle4 {
   0% { transform: rotate(-154.2857deg); }
   100% { transform: rotate(-514.2857deg); }
}

@keyframes circle5 {
   0% { transform: rotate(-205.7143deg); }
   100% { transform: rotate(-565.7143deg); }
}

@keyframes circle6 {
   0% { transform: rotate(-257.1429deg); }
   100% { transform: rotate(-617.1429deg); }
}

@keyframes circle7 {
   0% { transform: rotate(-308.5714deg); }
   100% { transform: rotate(-668.5714deg); }
}
.rotate .en-deco {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}


#domain .bg-slide {
   max-width: 1920px;
   z-index: 1;
   position: absolute;
   top: 41.9%;
}
 #domain .bg-slide .loop {
   overflow: hidden;
 }
 #domain .bg-slide .loop .loop__box {
   display: flex;
   width: 100vw;
 }
 #domain .bg-slide .loop .loop__box img {
   min-width: 141.4vw;
 }
 #domain .bg-slide .loop .loop__box img:first-child {
   -webkit-animation: loop 50s -25s linear infinite;
   animation: loop 50s -25s linear infinite;
 }
 #domain .bg-slide .loop .loop__box img:last-child {
   -webkit-animation: loop2 50s linear infinite;
   animation: loop2 50s linear infinite;
 }

/* recruit
-------------------------------------*/
#recruit{
   position: relative;
   margin-bottom: -100px;
}
#recruit .inner{
   width: min(95%, 1760px);
   margin-inline: auto;
   background: url(../images/index/recruit-bg.png)no-repeat;
   background-size: cover;
   position: relative;
   padding-block: 164px 160px;
}
#recruit .enttl {
   text-align: center;
   margin-bottom: -110px;
}
#recruit h2 {
   text-align: center;
   margin-bottom: 129px;
   position: relative;
   z-index: 2;
}
#recruit .deco01,
#recruit .deco02 {
    opacity: 0;
    transform: translateY(20px);
}
#recruit .deco01 {
   position: absolute;
   top: -251px;
   left: 28px;
}
#recruit .deco02 {
   position: absolute;
   top: 489px;
   right: 42px;
}
#recruit .list {
   display: grid;
   gap: 136px;
   width: min(95%, 1204px);
   margin-inline: auto;
   padding-left: 42px;
   margin-bottom: 491px;
}
#recruit .list li h3 {
   font-weight: bold;
   font-size: 50px;
   line-height: 1.4;
   position: relative;
   color: #fff;
   margin-bottom: 61px;
   letter-spacing: 0;
}
#recruit .list li h3::before {
   position: absolute;
   content: "";
   top: 50%;
   transform: translateY(-50%);
   left: -160px;
}
#recruit .list li:nth-child(1) h3::before {
   background: url(../images/index/recruit-icon01.svg)no-repeat;
   background-size: contain;
   width: 120px;
   height: 111px;
}
#recruit .list li:nth-child(2) h3::before {
   background: url(../images/index/recruit-icon02.svg)no-repeat;
   background-size: contain;
   width: 120px;
   height: 137px;
}
#recruit .list li:nth-child(3) h3::before {
   background: url(../images/index/recruit-icon03.svg)no-repeat;
   background-size: contain;
   width: 120px;
   height: 131px;
}
#recruit .list li .txt {
   font-weight: 400;
   font-size: 24px;
   letter-spacing: 0.05em;
   line-height: 1.8333;
   color: #fff;
}
#recruit .list li:nth-child(3) .txt {
   width: min(95%, 600px);
}
#recruit .list li .recommend {
   margin-bottom: 25px;
   padding-left: 38px;
   margin-top: -5px;
}
#recruit .list li .recommend > li{
   font-size: 24px;
   font-weight: 500;
   line-height: 2.25;
   letter-spacing: 0.05em;
   color: #FFFFFF;
   position: relative;
}
#recruit .list li .recommend > li::before {
   position: absolute;
   content: "";
   background: url(../images/index/list-icon.svg)no-repeat;
   background-size: contain;
   width: 18px;
   height: 20px;
   left: -38px;
   top: 50%;
   transform: translateY(-50%);
}
#recruit .bnr-item {
   width: min(95%, 1360px);
   margin-inline: auto;
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   align-items: baseline;
   gap: 20px;
}
#recruit .bg-slide {
   max-width: 1920px;
   z-index: 1;
   position: absolute;
   bottom: 9.7%;
}
#recruit .bg-slide .loop {
   overflow: hidden;
 }
 #recruit .bg-slide .loop .loop__box {
   display: flex;
   width: 100vw;
 }
 #recruit .bg-slide .loop .loop__box img {
   min-width: 127.61vw;
 }
 #recruit .bg-slide .loop .loop__box img:first-child {
   -webkit-animation: loop 50s -25s linear infinite;
   animation: loop 50s -25s linear infinite;
 }
 #recruit .bg-slide .loop .loop__box img:last-child {
   -webkit-animation: loop2 50s linear infinite;
   animation: loop2 50s linear infinite;
 }

/* interview
-------------------------------------*/
#interview {
   background: url(../images/index/interview-bg.png)no-repeat top center;
   background-size: contain;
}
#interview .inner {
   width: min(95%, 1200px);
   margin-inline: auto;
   padding-block: 227px 340px;
   margin-bottom: -173px;
}
#interview .upper {
   display: flex;
   justify-content: space-between;
   margin-bottom: 37px;
   align-items: flex-end;
}
#interview .enttl {
   margin-bottom: 60px;
}
#interview .subt {
   font-weight: bold;
   font-size: 26px;
   letter-spacing: 0;
   color: #fff;
   margin-bottom: 6px;
}
#interview .lead {
   font-weight: 500;
   font-size: 18px;
   color: #fff;
}
#interview .system-list {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 60px;
}
#interview .system-list li {
   background: #fff;
   filter: drop-shadow(0px 6px 12px rgba(19, 19, 19, 0.12));
   padding: 20px 20px 35px;
   border-radius: 10px;
}
#interview .system-list li .system-pic {
   margin-bottom: 16px;
}
#interview .system-list li .system-pic img {
   height: 200px;
   border-radius: 5px;
}
#interview .system-list li .system-department {
   font-size: 14px;
   margin-bottom: 4px;
}
#interview .system-list li .system-ttl-01 {
   font-weight: bold;
   font-size: 20px;
   line-height: 1.6;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
   margin-bottom: 13px;
}
#interview .system-list li .name-wrap {
   display: flex;
   align-items: center;
   padding: 7px 0;
   gap: 42px;
   border-top: 1px solid #a4a4a4;
}
#interview .system-list li .system-name,
#interview .system-list li .system-year {
   position: relative;
   font-size: 14px;
   line-height: 1.42857;
   color: #269a6f;
   letter-spacing: 0;
}
#interview .system-list li .system-name::after {
   position: absolute;
   content: "｜";
   font-size: 14px;
   line-height: 1.42857;
   color: #269a6f;
   top: 50%;
   transform: translateY(-50%);
   right: -28px;
}
#interview .img-area {
   display: grid;
   grid-template-columns: 780px 804px;
   padding-bottom: 70px;
   justify-content: center;
}
#interview .img-area .img01 {
   position: relative;
}
#interview .img-area .img02 {position: relative;top: -44px;/* right: 224px; */}
.js-map-hover {
   position: relative;
}
/* 基準になる画像（map付き） */
.js-map-hover .img-default {
   display: block;
   width: 100%;
   height: auto;
 }
 
 /* 重ねるだけの画像 */
 .js-map-hover .img-hover {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: auto;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.3s ease;
 }
 
 .js-map-hover.is-active .img-hover {
   opacity: 1;
 }
 
 .js-map-hover.is-active .img-default {
   opacity: 0;
 }

 map area {
   pointer-events: none;
}

.js-map-hover .img-hover {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
}

.js-map-hover .img-hover img {
   width: 100%;
   height: auto;
}

 /* guideline
 -------------------------------------*/
 #guideline {
   background: #C8C6BE;
 }
 #guideline .inner {
   width: min(95%, 1200px);
   margin-inline: auto;
   text-align: center;
   padding-block: 148px 140px;
 }
 #guideline .enttl {
   text-align: center;
   display: inline-block;
   position: relative;
   margin-bottom: 19px;
 }
 #guideline .enttl::after {
   position: absolute;
   content: "";
   background: url(../images/index/guideline-label.png)no-repeat;
   background-size: contain;
   width: 180px;
   height: 180px;
   top: -7px;
   right: -255px;
 }
 #guideline h2 {
   font-weight: bold;
   font-size: 32px;
   text-align: center;
   margin-bottom: 20px;
 }
 #guideline .lead {
   font-weight: 500;
   font-size: 18px;
   text-align: center;
   margin-bottom: 38px;
 }
 #guideline .point-list {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 20px;
   padding-inline: 10px;
   margin-bottom: 64px;
 }
 #guideline .system-list {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 40px;
   margin-bottom: 66px;
 }
 #guideline .system-list li {
   background: #fff;
   border: 1px solid #958c7d;
   padding: 40px 30px;
 }
 #guideline .system-list li .ttl-wrap {
   display: grid;
   grid-template-columns: 34.6153% 1fr;
   gap: 16px;
 }
 #guideline .system-list li .system-pic img  {
   height: 120px;
 }
 #guideline .system-list li .system-ttl-01 {
   font-weight: 500;
   font-size: 22px;
   line-height: 1.54545;
   text-align: left;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
 }
 #guideline .system-list li .system-content {
   font-size: 14px;
   line-height: 1.71428;
   text-align: left;
   margin-bottom: 35px;
 }
 #guideline .system-list li .system-table table {
   width: 97%;
   border-collapse: collapse;
   border: 1px solid #CCCCCC;
   margin-bottom: 32px;
 }
 #guideline .system-list li .system-table tr {
   border-bottom: 1px solid #CCCCCC;
 }
 #guideline .system-list li .system-table tr:last-child {
   border-bottom: none;
 }
 #guideline .system-list li .system-table th,
 #guideline .system-list li .system-table td {
   font-size: 14px;
   line-height: 1.71428;
   padding: 13px 16px;
 }
 #guideline .system-list li .system-table th {
   background: #F2F2F2;
   text-align: center;
   width: 23.4%;
 }
 #guideline .system-list li .system-table td {
   text-align: left;
 }
 #guideline .system-list li .util-btn {
   width: min(95%, 320px);
   margin-inline: auto;
   background: #F0596D;
 }
 #guideline .system-list li .util-btn a {
   padding: 17px 0;
 }
 #guideline .guideline-btn {
   width: min(95%, 640px);
   margin-inline: auto;
   border-radius: 200px;
 }
 #guideline .guideline-btn a {
   padding: 27px 0;
 }
 #guideline .guideline-btn a::after {
   right: 30px;
 }




}

/* ========================================
@media screen and (min-width:768px) and (max-width:1919px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1919px) {
#mv .enttl img {
   width: 94.79vw;
}
#mv .sliderArea img {
   width: 100%;
   height: auto;
}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1440px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1440px) {
/* mv
-------------------------------------*/
#mv .enttl {
   top: 7.639vw;
   left: 3.472vw;
}
#mv .ttl {
   top: 24.306vw;
   left: 5.417vw;
}
#mv .ttl img {
   width: 57.57vw;
}
#mv .deco01 {
   top: 15.347vw;
   right: 10.972vw;
}
#mv .deco01 img {
   width: 8.96vw;
}
#mv .deco02 {
   bottom: -9.861vw;
   left: 11.319vw;
}
#mv .deco02 img {
   width: 26.04vw;
}
#mv .bnr-box {
   bottom: -2.083vw;
   right: 3.472vw;
   width: 15.278vw;
   height: 15.278vw;
}
#mv .bnr-box img {
   width: 100%;
   height: auto;
}
#mv .bnr-box .circle {display: inline-block;animation: rotateCircle 12s linear infinite;transform-origin: center center;position: absolute;top: 0;left: 0;width: 15.278vw;height: 15.278vw;}

#mv .bnr-box .bnr {
   width: 13.194vw;
   height: 13.194vw;
}

}

/* ========================================
@media screen and (min-width:768px) and (max-width:1919px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1919px) {
/* intro
-------------------------------------*/
#intro {
   padding-block: 0 4.273vw;
}
#intro .intro-bg {
   position: absolute;
   top: 16%;
   right: 0;
   will-change: transform;
}
#intro .intro-bg img {
   width: 76.55vw;
   height: auto;
}
#intro .inner {
   width: min(95%, 83.38vw);
   padding-block: 16.154vw 0;
}
#intro .inner h2 {
   margin-bottom: 4.482vw;
   padding-inline: 4.586vw;
}
#intro .inner h2 img {
   width: 69.88vw;
}
#intro .inner .txt {
   font-size: 2.397vw;
   width: min(95%, 62.53vw);
}
#intro .inner .btn {
   top: -8.702vw;
   width: 16.675vw;
   height: 16.675vw;
}
#intro .inner .btn img {
   width: 100%;
   height: auto;
}
#intro .en-deco {
   top: 14.904vw;
   left: 3.283vw;
}
#intro .en-deco img {
   width: 11.93vw;
}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1100px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1100px) {
   /* topics
-------------------------------------*/
#topics {
   border-radius: 7.273vw;
   margin-bottom: -26.818vw;
}
#topics .inner {
   padding-block: 10.909vw;
}
#topics .enttl {
   padding-top: 0.727vw;
   margin-bottom: 1.818vw;
}
#topics .enttl img {
   width: 24.45vw;
}
#topics h2 {
   font-size: 2vw;
   margin-bottom: 1.818vw;
}
#topics .system-list li a {
   gap: 2.091vw;
   padding: 2.636vw 3.545vw;
}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1600px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1600px) {
/* domain
-------------------------------------*/
#domain {
   margin-bottom: -26.562vw;
}
#domain .deco {
   top: 3.125vw;
   right: -8.437vw;
}
#domain .inner {
   padding-block: 29.375vw 44.188vw;
}
#domain .ttl-box {
   width: 20.00vw;
}
#domain .enttl {
   padding-right: 0.375vw;
   margin-bottom: 1.25vw;
}
#domain .enttl img {
   width: 18.38vw;
}
#domain h2 {
   font-size: 1.375vw;
   margin-bottom: 4.188vw;
}
#domain .btn-list {
   gap: 2.75vw;
}
#domain .btn-list li {
}
#domain .btn-list li::before {
   top: -1.875vw;
   width: 12.5vw;
   height: 3vw;
}
#domain .btn-list li a {
   padding: 1.625vw 0;
   font-size: clamp(0.75rem, 0.635rem + 0.24vw, 0.875rem);
}
#domain .btn-list li a::after {
   right: 1.812vw;
}


.service-content {
   width: 53.75%;
   padding-top: 53.75%;
   margin-top: 3.813vw;
}
.service-content:after {
   width: 72%;
   padding-top: 72%;
   border: solid 0.63vw #2C2C2C;
}
.rotate .box .parts {
   padding: 1.25vw 0;
   font-size: 1.375vw;
   width: 13.75vw;
   height: 13.75vw;
}
.rotate .box .parts span {
   margin-bottom: 1.25vw;
}
.rotate .box.box-6 .parts { 
   font-size: 1.125vw;
}
.rotate .box.box-1 .parts img {
   width: 3.38vw;
}
.rotate .box.box-2 .parts img {
   width: 5.56vw;
}
.rotate .box.box-3 .parts img {
   width: 2.94vw;
}
.rotate .box.box-4 .parts img {
   width: 5.56vw;
}
.rotate .box.box-5 .parts img {
   width: 3.75vw;
}
.rotate .box.box-6 .parts img {
   width: 5.38vw;
}
.rotate .box.box-7 .parts img {
   width: 7.19vw;
}
.rotate .box.box-6 .parts span {
   margin-bottom: 0.25vw;
}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1860px)
======================================== */
@media screen and (min-width:768px) and (max-width:1860px) {
 /* recruit
-------------------------------------*/
#recruit{
   margin-bottom: -5.376vw;
}
#recruit .inner{
   width: 94.62vw;
   padding-block: 8.817vw 8.602vw;
}
#recruit .enttl {
   margin-bottom: -5.914vw;
}
#recruit .enttl img {
   width: 63.60vw;
}
#recruit h2 {
   margin-bottom: 6.935vw;
}
#recruit h2 img {
   width: 72.47vw;
}
#recruit .deco01 {
   top: -13.495vw;
   left: 1.505vw;
}
#recruit .deco01 img {
   width: 28.39vw;
}
#recruit .deco02 {
   top: 26.29vw;
   right: 2.258vw;
}
#recruit .deco02 img {
   width: 24.84vw;
}
#recruit .list {
   gap: 7.312vw;
   width: 64.73vw;
   padding-left: 2.258vw;
   margin-bottom: 26.398vw;
}
#recruit .list li h3 {
   font-size: 2.688vw;
   margin-bottom: 3.28vw;
}
#recruit .list li h3::before {
   left: -8.602vw;
}
#recruit .list li:nth-child(1) h3::before {
   width: 6.452vw;
   height: 5.968vw;
}
#recruit .list li:nth-child(2) h3::before {
   width: 6.452vw;
   height: 7.366vw;
}
#recruit .list li:nth-child(3) h3::before {
   width: 6.452vw;
   height: 7.043vw;
}
#recruit .list li .txt {
   font-size: clamp(0.75rem, 0.223rem + 1.1vw, 1.5rem);
}
#recruit .list li:nth-child(3) .txt {
   width: min(95%, 33.26vw);
}
#recruit .list li .recommend {
   margin-bottom: 1.344vw;
   padding-left: 2.043vw;
   margin-top: -0.269vw;
}
#recruit .list li .recommend > li{
   font-size: clamp(0.75rem, 0.223rem + 1.1vw, 1.5rem);
}
#recruit .list li .recommend > li::before {
   width: 0.968vw;
   height: 1.075vw;
   left: -2.043vw;
}
#recruit .bnr-item {
   width: min(95%, 73.12vw);
   gap: 1.075vw;
}
#recruit .bnr-item img {
   width: 100%;
   height: auto;
}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1600px)
======================================== */
@media screen and (min-width:768px) and (max-width:1600px) {
/* interview
-------------------------------------*/
#interview .inner {
   width: 70.52vw;
   padding-block: 14.188vw 21.25vw;
   margin-bottom: -10.812vw;
}
#interview .upper {
   margin-bottom: 2.313vw;
}
#interview .enttl {
   margin-bottom: 3.75vw;
}
#interview .enttl img {
   width: 26.06vw;
}
#interview .subt {
   font-size: 1.625vw;
   margin-bottom: 0.375vw;
}
#interview .lead {
   font-size: clamp(0.688rem, 0.284rem + 0.84vw, 1.125rem);
}
#interview .system-list {
   gap: 3.75vw;
}
#interview .system-list li {
   padding: 1.25vw 1.25vw 2.188vw;
   border-radius: 0.625vw;
}
#interview .system-list li .system-pic {
   margin-bottom: 1vw;
}
#interview .system-list li .system-pic img {
   height: 12.5vw;
   border-radius: 0.313vw;
}
#interview .system-list li .affiliation {
   /* font-size: 0.875vw; */
   margin-bottom: 0.25vw;
}
#interview .system-list li .system-ttl-01 {
   font-size: clamp(1rem, 0.769rem + 0.48vw, 1.25rem);
   margin-bottom: 0.813vw;
}
#interview .system-list li .name-wrap {
   padding: 0.438vw 0;
   gap: 2.625vw;
}
#interview .system-list li .system-name,
#interview .system-list li .system-year {
   font-size: clamp(0.625rem, 0.394rem + 0.48vw, 0.875rem);
}
#interview .system-list li .system-name::after {
   font-size: 0.875vw;
   right: -1.75vw;
}
#interview .img-area {
   grid-template-columns: 48.75vw 50.25vw;
   padding-bottom: 4.375vw;
}
#interview .img-area .img02 {position: relative;top: -2.75vw;/* right: 14vw; */}
}


/* ========================================
@media screen and (min-width:768px) and (max-width:1200px)
======================================== */
@media screen and (min-width:768px) and (max-width:1200px) {
#guideline .enttl::after {
   width: 15vw;
   height: 15vw;
   top: -0.583vw;
   right: -21.25vw;
}
#guideline .point-list img {
   width: 100%;
   height: auto;
}
}

/* ========================================
   @media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {
/* common
-------------------------------------*/
.util-btn {
   width: min(95%, 57.97vw);
   border-radius: 48.31vw;
   background: #131313;
}
.util-btn a {
   font-weight: 500;
   font-size:3.382vw;
   letter-spacing: 0.05em;
   line-height: 1.85714;
   text-align: center;
   color: #fff;
   position: relative;
   padding: 4.11vw 0;
   display: block;
}
.util-btn a::after {
   position: absolute;
   content: "";
   background: url(../images/common/btn-arrow.svg)no-repeat center center;
   background-size: contain;
   width: 2.34vw;
   height: 1.77vw;
   top: 50%;
   right: 4.83vw;
   transform: translateY(-50%);
}

/* mv
-------------------------------------*/
#mv {
   position: relative;
}
#mv .enttl {
   position: absolute;
   top: 18.2vw;
   left: 50%;
   transform: translateX(-50%);
   width: 94.20vw;
   z-index: 2;
}
#mv .enttl img {
   width: 100%;
   height: auto;
}
#mv .ttl {
   position: absolute;
   z-index: 2;
   top: 58.5vw;
   left: 50%;
   transform: translateX(-50%);
   width: 76.57vw;
}
#mv .ttl img {
   width: 100%;
   height: auto;
}
#mv .deco01 {
   position: absolute;
   bottom: -30vw;
   left: -1vw;
}
#mv .deco01 img {
   width: 46.99vw;
}
#mv .deco02 {
   position: absolute;
   top: 31.5vw;
   right: 8vw;
}
#mv .deco02 img {
   width: 17.03vw;
}
#mv .deco {
   opacity: 0;
   transform: translateY(30px);
   transition: opacity 1.2s ease, transform 1.2s ease;
}
#mv.is-show-deco .deco {
   opacity: 1;
   transform: translateY(0);
}
/* 時間差 */
#mv.is-show-deco .deco01 {
   transition-delay: 0.4s;
}
#mv.is-show-deco .deco02 {
   transition-delay: 0.7s;
}
#mv .bnr-box {
   position: absolute;
   bottom: -7.25vw;
   right: 4.08vw;
   width: 36.47vw;
   height: 36.47vw;
}
#mv .bnr-box .circle {display: inline-block;animation: rotateCircle 12s linear infinite;transform-origin: center center;position: absolute;top: 0;left: 0;width: 36.47vw;height: 36.47vw;}
@keyframes rotateCircle {

   from {
       transform: rotate(0deg);
   }

   to {
       transform: rotate(360deg);
   }
}

#mv .bnr-box .bnr {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 31.40vw;
   height: 31.40vw;
   transform: translate(-50%, -50%);
}

/* intro
-------------------------------------*/
#intro {
   position: relative;
   overflow: hidden;
}
#intro .intro-bg {
   position: absolute;
   top: 24%;
   right: 0;
   will-change: transform;
}
#intro .inner {
   width: min(95%, 91.79vw);
   margin-inline: auto;
   padding-block: 31.78vw 1vw;
}
#intro .inner h2 {
   margin-bottom: 16.29vw;
   position: relative;
   z-index: 2;
}
#intro .inner .txt {
   font-weight: 900;
   font-size:7.246vw;
   line-height: 1.6;
   letter-spacing: 0;
   position: relative;
   z-index: 2;
}
#intro .inner .txt span {
   width: fit-content;
   -webkit-text-fill-color: transparent;
   background: linear-gradient(
      90deg,
      #131313 0%,
      #131313 50%,
      #F5F5F5 50%
   );
   background-position: 100% 0%;
   background-size: 200% 100%;
   -webkit-background-clip: text;
   background-clip: text;
   display: block;
   transition: background-position .3s cubic-bezier(.4,0,.2,1);
}
#intro .inner .btn {
   margin-left: auto;
   position: relative;
   top: -14vw;
   width: 26.81vw;
   height: 26.81vw;
   cursor: pointer;
   z-index: 3;
   right: 7.2vw;
}
/* 波紋のベース（通常は止める） */
#intro .inner .btn::before,
#intro .inner .btn::after {
   content: "";
   position: absolute;
   inset: 0;
   margin: auto;
   border-radius: 50%;
   pointer-events: none;
   box-shadow: 0 0 0 0 rgba(38, 154, 111, 0.12);
   opacity: 0;
   animation: none;
}
/* hoverしたときだけ波紋 */
#intro .inner .btn:hover::before {
   animation: ripple 2.5s ease-out infinite;
}

#intro .inner .btn:hover::after {
   animation: ripple 2.5s ease-out infinite;
   animation-delay: 0.8s;
}

@keyframes ripple {
   0% {
       box-shadow: 0 0 0 0 rgba(38, 154, 111, 0.12);
       opacity: 1;
   }
   100% {
       box-shadow: 0 0 0 80px rgba(38, 154, 111, 0);
       opacity: 0;
   }
}
#intro .inner .btn a {
   display: block;
}
#intro .en-deco {
   position: absolute;
   top: 7.4vw;
   right: 5vw;
}

/* topics
-------------------------------------*/
#topics {
   width: min(95%, 91.79vw);
   margin-inline: auto;
   background: transparent;
   backdrop-filter: blur(50px);
   --webkit-backdrop-filter: blur(50px);
   background-color: rgba(255, 255, 255, 0.08);
   margin-bottom: -160.5vw;
   position: relative;
   z-index: 2;
   border-radius: 9.66vw;
   min-height: 170vw;
}
#topics .inner {
   padding-block: 16.29vw 14.29vw;
   padding-inline: 4.83vw;
   display: grid;
}
#topics .ttl-box {
   display: contents;
}
#topics .enttl {
   margin-bottom: 3vw;
   order: 1;
}
#topics h2 {
   font-weight: 500;
   font-size:3.865vw;
   letter-spacing: 0;
   margin-bottom: 9.66vw;
   order: 2;
}
#topics .util-btn {
   order: 4;
   margin-inline: auto;
}
#topics .system-list {
   display: grid;
   grid-template-columns: 1fr;
   gap: 0;
   order: 3;
   margin-bottom: 7.05vw;
}
#topics .system-list li {
   border-bottom: 0.2vw solid #a4a4a4;
   padding: 2.83vw 0 3.83vw;
}
#topics .system-list li:first-child {
   border-top: 0.2vw solid #a4a4a4;
}
#topics .system-list li .system-date {
   font-size:3.865vw;
   color: #269a6f;
   margin-bottom: 1.42vw;
}
#topics .system-list li .system-ttl-01 {
   font-weight: 500;
   font-size:3.382vw;
   letter-spacing: 0.05em;
   line-height: 1.85714;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 4;
   overflow: hidden;
}

/* domain
-------------------------------------*/
#domain {
   background: #C8C6BE;
   clip-path: polygon(0 3.7%, 100% 0%, 100% 95.4%, 0% 100%);
   position: relative;
   margin-bottom: -44vw;
}
#domain .deco {
   position: absolute;
   top: 146vw;
   right: -6vw;
   opacity: 0;
   transform: translateY(20px);
   transition: opacity 0.8s ease, transform 0.8s ease;
}
#domain .deco img {
   width: 53.26vw;
}
#domain .deco.is-show {
   opacity: 1;
   transform: translateY(0);
}
#domain .inner {
   width: min(95%, 91.30vw);
   margin-inline: auto;
   padding-block: 189.57vw 77.57vw;
   position: relative;
   z-index: 2;
   display: grid;
}
#domain .ttl-box {
   display: contents;
}
#domain .enttl {
   order: 1;
   padding-left: 6vw;
   margin-bottom: 3.5vw;
}
#domain h2 {
   font-weight: 500;
   font-size:3.865vw;
   letter-spacing: 0;
   margin-bottom: 7.25vw;
   order: 2;
   padding-left: 4.5vw;
}
#domain .btn-list {
   display: grid;
   gap: 10.23vw;
   width: 67.63vw;
   margin-inline: auto;
   order: 3;
}
#domain .btn-list li {
   border-radius: 48.31vw;
   background: #fff;
   border: 0.2vw solid #131313;
   position: relative;
}
#domain .btn-list li::before {
   position: absolute;
   top: -6.25vw;
   left: 50%;
   transform: translateX(-50%) translateY(10px) scale(0.9);
   content: "";
   width: 42.03vw;
   height: 10.14vw;
   opacity: 0;
   transition:
       opacity 0.2s ease,
       transform 0.4s cubic-bezier(.34,1.56,.64,1);
   pointer-events: none;
}
#domain .btn-list li:hover::before {
   opacity: 1;
   transform: translateX(-50%) translateY(0) scale(1);
}
#domain .btn-list li:nth-child(1)::before {
   background: url(../images/index/domain-fukidashi01.svg)no-repeat;
   background-size: contain;
}
#domain .btn-list li:nth-child(2)::before {
   background: url(../images/index/domain-fukidashi02.svg)no-repeat;
   background-size: contain;
}
#domain .btn-list li a {
   font-weight: 500;
   font-size:3.382vw;
   letter-spacing: 0.05em;
   line-height: 1.571428;
   text-align: center;
   position: relative;
   padding: 5.75vw 0;
   display: block;
}
#domain .btn-list li a::after {
   position: absolute;
   content: "";
   background: url(../images/common/btn-arrow-b.svg)no-repeat center center;
   background-size: contain;
   width: 2.34vw;
   height: 1.77vw;
   top: 50%;
   right: 5.3vw;
   transform: translateY(-50%);
}

.service-content {
	position: relative;
	width: 100%;
	margin-inline: auto;
	/* overflow: hidden; */
	padding-top: 100%;
	text-align: right;
	order: 3;
	margin-bottom: 13vw;
}
.service-content:after {
	content: '';
	display: block;
	width: 69.5%;
	padding-top: 69.5%;
	border: solid 2.42vw #2C2C2C;
	border-radius: 50%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	z-index: 1;
}
.rotate {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	z-index: 2;
}
.rotate .rotate-ctn {
	position: relative;
	width: 100%;
	height: 100%;
	animation: 100s linear big-circle infinite;	/* 大枠を回転させているアニメーション */
}

.rotate .box {
	position: absolute;
	width: 100%;
	height: 50%;
	transform-origin: 50% 100%;
}

/* 各コンテンツの文字を上向きにする */
.rotate .box.box-1 { left: 50%; transform: translate(-50%, 0) rotate(0deg); }
.rotate .box.box-2 { left: 50%; transform: translate(-50%, 0) rotate(51.4286deg); }
.rotate .box.box-3 { left: 50%; transform: translate(-50%, 0) rotate(102.8571deg); }
.rotate .box.box-4 { left: 50%; transform: translate(-50%, 0) rotate(154.2857deg); }
.rotate .box.box-5 { left: 50%; transform: translate(-50%, 0) rotate(205.7143deg); }
.rotate .box.box-6 { left: 50%; transform: translate(-50%, 0) rotate(257.1429deg); }
.rotate .box.box-7 { left: 50%; transform: translate(-50%, 0) rotate(308.5714deg); }



.rotate .box .parts {
	position: relative;
	margin: 0 auto;
	background: #131313;
	filter: drop-shadow(0px 10px 20px rgba(19, 19, 19, 0.12));
	font-size: 2.42vw;
	font-weight: 500;
	text-align: center;
	color: #fff;
	width: 23.2vw;
	height: 23.1vw;
	border-radius: 50%;
	display: grid;
	place-content: center;
}
.rotate .box .parts span {
   display: block;
   margin-bottom: 1.2vw;
}
/* 各コンテンツを回転させるアニメーション */
.rotate .box.box-1 .parts { animation: 100.0s linear circle1 infinite;}
.rotate .box.box-2 .parts { animation: 100.0s linear circle2 infinite;}
.rotate .box.box-3 .parts { animation: 100.0s linear circle3 infinite;}
.rotate .box.box-4 .parts { animation: 100.0s linear circle4 infinite;}
.rotate .box.box-5 .parts { animation: 100.0s linear circle5 infinite;}
.rotate .box.box-6 .parts { animation: 100.0s linear circle6 infinite;}
.rotate .box.box-7 .parts { animation: 100.0s linear circle7 infinite;}


.rotate .box.box-6 .parts { 
   font-size: 2.17vw;
}
.rotate .box.box-1 .parts img {
   width: 5.76vw;
}
.rotate .box.box-2 .parts img {
   width: 9.54vw;
}
.rotate .box.box-3 .parts img {
   width: 4.99vw;
}
.rotate .box.box-4 .parts img {
   width: 9.52vw;
}
.rotate .box.box-5 .parts img {
   width: 7.81vw;
}
.rotate .box.box-6 .parts img {
   width: 9.19vw;
}
.rotate .box.box-7 .parts img {
   width: 8.97vw;
}

.rotate .box.box-6 .parts span {
   margin-bottom: 1.45vw;
}
@keyframes big-circle {
   0% { transform: rotate(0deg);}
   100% { transform:rotate(360deg);}
  }
  @keyframes circle1 {
   0% { transform: rotate(0deg);}
   100% { transform: rotate(-360deg);}
  }
  @keyframes circle2 {
   0% { transform: rotate(-51.4286deg); }
   100% { transform: rotate(-411.4286deg); }
}

@keyframes circle3 {
   0% { transform: rotate(-102.8571deg); }
   100% { transform: rotate(-462.8571deg); }
}

@keyframes circle4 {
   0% { transform: rotate(-154.2857deg); }
   100% { transform: rotate(-514.2857deg); }
}

@keyframes circle5 {
   0% { transform: rotate(-205.7143deg); }
   100% { transform: rotate(-565.7143deg); }
}

@keyframes circle6 {
   0% { transform: rotate(-257.1429deg); }
   100% { transform: rotate(-617.1429deg); }
}

@keyframes circle7 {
   0% { transform: rotate(-308.5714deg); }
   100% { transform: rotate(-668.5714deg); }
}
.rotate .en-deco {
   position: absolute;
   top: 51%;
   left: 50%;
   transform: translate(-50%, -50%);
}
.rotate .en-deco img {
   width: 15.8vw;
}

#domain .bg-slide {
   max-width: 100vw;
   z-index: 1;
   position: absolute;
   top: 258vw;
}
 #domain .bg-slide .loop {
   overflow: hidden;
 }
 #domain .bg-slide .loop .loop__box {
   display: flex;
   width: 100vw;
 }
 #domain .bg-slide .loop .loop__box img {
   min-width: 298.4vw;
 }
 #domain .bg-slide .loop .loop__box img:first-child {
   -webkit-animation: loop 50s -25s linear infinite;
   animation: loop 50s -25s linear infinite;
 }
 #domain .bg-slide .loop .loop__box img:last-child {
   -webkit-animation: loop2 50s linear infinite;
   animation: loop2 50s linear infinite;
 }


/* recruit
-------------------------------------*/
#recruit{
   position: relative;
   margin-bottom: -9.5vw;
}
#recruit .inner{
   width: min(95%, 91.79vw);
   margin-inline: auto;
   background: url(../images/index/recruit-bg_sp.png)no-repeat;
   background-size: cover;
   position: relative;
   padding-block: 12.87vw 19.01vw;
}
#recruit .enttl {
   text-align: center;
   margin-bottom: -4.7vw;
   position: relative;
   z-index: 2;
}
#recruit h2 {
   text-align: center;
   margin-bottom: 11.46vw;
   position: relative;
   z-index: 2;
}
#recruit .deco01,
#recruit .deco02 {
    opacity: 0;
    transform: translateY(20px);
}
#recruit .deco01 {
   position: absolute;
   top: -22.4vw;
   left: -4.5vw;
}
#recruit .deco01 img {
   width: 56.42vw;
}
#recruit .deco02 {
   position: absolute;
   top: 21vw;
   right: -1vw;
}
#recruit .deco02 img {
   width: 43.07vw;
}
#recruit .list {
   display: grid;
   gap: 15.2vw;
   width: min(95%, 82.13vw);
   margin-inline: auto;
   margin-bottom: 61vw;
}
#recruit .list li h3 {
   font-weight: bold;
   font-size:5.314vw;
   line-height: 1.5;
   position: relative;
   color: #fff;
   margin-bottom: 6.05vw;
   letter-spacing: 0;
   padding-left: 19.5vw;
}
#recruit .list li h3::before {
   position: absolute;
   content: "";
   top: 50%;
   transform: translateY(-50%);
   left: -0.2vw;
}
#recruit .list li:nth-child(1) h3::before {
   background: url(../images/index/recruit-icon01.svg)no-repeat;
   background-size: contain;
   width: 16.97vw;
   height: 17.9vw;
   top: 61%;
}
#recruit .list li:nth-child(2) h3::before {
   background: url(../images/index/recruit-icon02.svg)no-repeat;
   background-size: contain;
   width: 15.29vw;
   height: 17.47vw;
   top: 43%;
}
#recruit .list li:nth-child(3) h3::before {
   background: url(../images/index/recruit-icon03.svg)no-repeat;
   background-size: contain;
   width: 15.29vw;
   height: 16.75vw;
}
#recruit .list li .txt {
   font-weight: 400;
   font-size:3.865vw;
   letter-spacing: 0.05em;
   line-height: 2;
   color: #fff;
}
#recruit .list li .recommend {
   padding-left: 5vw;
   margin-bottom: 5.2vw;
}
#recruit .list li .recommend > li{
   font-size:4.348vw;
   font-weight: 500;
   line-height: 1.94444;
   letter-spacing: 0.05em;
   color: #FFFFFF;
   position: relative;
}
#recruit .list li .recommend > li::before {
   position: absolute;
   content: "";
   background: url(../images/index/list-icon.svg)no-repeat;
   background-size: contain;
   width: 4.11vw;
   height: 3.62vw;
   left: -5vw;
   top: 2.5vw;
}
#recruit .bnr-item {
   width: min(95%, 67.63vw);
   margin-inline: auto;
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
   align-items: baseline;
   gap: 2.90vw;
}
#recruit .bg-slide {
   max-width: 100vw;
   z-index: 1;
   position: absolute;
   bottom: 117vw;
}
#recruit .bg-slide .loop {
   overflow: hidden;
 }
 #recruit .bg-slide .loop .loop__box {
   display: flex;
   width: 100vw;
 }
 #recruit .bg-slide .loop .loop__box img {
   min-width: 292.15vw;
 }
 #recruit .bg-slide .loop .loop__box img:first-child {
   -webkit-animation: loop 50s -25s linear infinite;
   animation: loop 50s -25s linear infinite;
 }
 #recruit .bg-slide .loop .loop__box img:last-child {
   -webkit-animation: loop2 50s linear infinite;
   animation: loop2 50s linear infinite;
 }


 /* interview
-------------------------------------*/
#interview {
   background: url(../images/index/interview-bg_sp.png)no-repeat top center;
   background-size: contain;
   margin-bottom: -10vw;
}
#interview .inner {
   padding-block: 28vw 48vw;
   margin-bottom: -43.5vw;
}
#interview .upper {
   width: 82.13vw;
   margin-inline: auto;
}
#interview .enttl {
   margin-bottom: 3vw;
}
#interview .subt {
   font-weight: bold;
   font-size:4.831vw;
   letter-spacing: 0;
   color: #fff;
   margin-bottom: 2.5vw;
}
#interview .lead {
   font-weight: 500;
   font-size:3.865vw;
   line-height: 1.625;
   color: #fff;
   margin-bottom: 5.80vw;
}
#interview .system-list li {
   background: #fff;
   filter: drop-shadow(0px 6px 12px rgba(19, 19, 19, 0.12));
   padding: 4.83vw 4.83vw 7.45vw;
   border-radius: 4.42vw;
   width: 86.96vw;
   margin: 0 2.42vw;
}
#interview .system-list li .system-pic {
   margin-bottom: 3.26vw;
}
#interview .system-list li .system-pic img {
   height: 48.31vw;
   border-radius: 2.42vw;
}
#interview .system-list li .system-department {
   font-size:3.382vw;
   margin-bottom: 0.93vw;
}
#interview .system-list li .system-ttl-01 {
   font-weight: bold;
   font-size:3.865vw;
   line-height: 1.75;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
   margin-bottom: 5.6vw;
}
#interview .system-list li .name-wrap {
   display: flex;
   align-items: center;
   padding: 1.93vw 0;
   gap: 10.14vw;
   border-top: 0.2vw solid #a4a4a4;
}
#interview .system-list li .system-name,
#interview .system-list li .system-year {
   position: relative;
   font-size:3.382vw;
   line-height: 1.42857;
   color: #269a6f;
   letter-spacing: 0;
}
#interview .system-list li .system-name::after {
   position: absolute;
   content: "｜";
   font-size:3.382vw;
   line-height: 1.42857;
   color: #269a6f;
   top: 50%;
   transform: translateY(-50%);
   right: -6.76vw;
}

#interview .next-arrow, #interview .prev-arrow {
   top: 47%;
   transform: translateY(-50%);
   z-index: 15;
   width: 9.66vw;
   position: absolute;
}
#interview .next-arrow {
   left: calc(100% - 12.5vw);
}
#interview .prev-arrow {
   left: calc(100% - 96.5vw);
}


/* map {
   display: none;
 } */
.js-map-hover {
   position: relative;
}

/* ===== 共通：初期状態 ===== */
.js-map-hover .img-default {
   opacity: 1;
}

.js-map-hover .img-hover {
   position: absolute;
   inset: 0;
   opacity: 0;
   pointer-events: none;
   transition: opacity .3s ease;
}

#interview .img-area .img01 {
   position: relative;
}
#interview .img-area .img02 {position: relative;top: -24vw;right: 0;}
#interview .img-area .tap {
   position: absolute;
   top: 5vw;
   right: 20vw;
}
#interview .img-area .img02 .tap {
   top: 79vw;
   left: 37vw;
   pointer-events: none;
   right: revert;
}
#interview .img-area .tap img {
   width: 26.81vw;
}
#interview .img-area .tap::before,
#interview .img-area .tap::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 0 0 0 0 rgba(19, 19, 19, 0.12);
    opacity: 0;
}
#interview .img-area .tap::before {
   animation: ripple 2.5s ease-out infinite;
}

#interview .img-area .tap::after {
   animation: ripple 2.5s ease-out infinite;
   animation-delay: 0.8s;
}
@keyframes ripple {
   0% {
       box-shadow: 0 0 0 0 rgba(19, 19, 19, 0.12);
       opacity: 1;
   }
   100% {
       box-shadow: 0 0 0 80px rgba(19, 19, 19, 0);
       opacity: 0;
   }
}

#interview .img-area .tap,
#interview .img-area .tap::before,
#interview .img-area .tap::after {
    pointer-events: none;
}

/* ===== SP：tap時のみ ===== */
@media (hover: none) {
   .js-map-hover.is-active .img-hover {
       opacity: 1;
   }
   .js-map-hover.is-active .img-default {
       opacity: 0;
   }
}


/* guideline
 -------------------------------------*/
 #guideline {
   background: #C8C6BE;
 }
 #guideline .inner {
   width: min(95%, 91.79vw);
   margin-inline: auto;
   text-align: center;
   padding-block: 18vw 19.5vw;
 }
 #guideline .enttl {
   text-align: center;
   display: inline-block;
   position: relative;
   margin-bottom: 3.1vw;
   z-index: 2;
 }
 #guideline h2 {
   font-weight: bold;
   font-size:5.797vw;
   text-align: center;
   margin-bottom: 3.83vw;
   padding-right: 4vw;
   position: relative;
 }
 #guideline h2::after {
   position: absolute;
   content: "";
   background: url(../images/index/guideline-label_sp.png)no-repeat;
   background-size: contain;
   width: 25.36vw;
   height: 25.36vw;
   top: -5.69vw;
   right: -2vw;
 }
 #guideline .lead {
   font-weight: 500;
   font-size:3.865vw;
   line-height: 1.625;
   text-align: center;
   margin-bottom: 7.25vw;
 }
 #guideline .point-list {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 2.42vw;
   margin-bottom: 12.08vw;
 }
 #guideline .system-list {
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
   gap: 4.83vw;
   margin-bottom: 7.25vw;
 }
 #guideline .system-list li {
   background: #fff;
   border: 0.2vw solid #958c7d;
   padding: 7.25vw 4.83vw 9.1vw;
 }
 #guideline .system-list li .ttl-wrap {
   display: grid;
   gap: 4.23vw;
 }
 #guideline .system-list li .system-pic {
   margin-bottom: 0;
 }
 #guideline .system-list li .system-pic img  {
   height: 41.06vw;
 }
 #guideline .system-list li .system-ttl-01 {
   font-weight: 500;
   font-size:4.348vw;
   line-height: 1.6666;
   text-align: left;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
   margin-bottom: 1.2vw;
 }
 #guideline .system-list li .system-content {
   font-size:3.382vw;
   line-height: 1.71428;
   text-align: left;
   margin-bottom: 4.83vw;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
   overflow: hidden;
 }
 #guideline .system-list li .system-table table {
   width: 100%;
   border-collapse: collapse;
   border: 0.2vw solid #CCCCCC;
   margin-bottom: 4.83vw;
 }
 #guideline .system-list li .system-table tr {
   border-bottom: 0.2vw solid #CCCCCC;
 }
 #guideline .system-list li .system-table tr:last-child {
   border-bottom: none;
 }
 #guideline .system-list li .system-table th,
 #guideline .system-list li .system-table td {
   font-size:3.382vw;
   line-height: 1.71428;
   padding: 3.22vw 0;
 }
 #guideline .system-list li .system-table th {
   background: #F2F2F2;
   text-align: center;
   width: 24.4%;
 }
 #guideline .system-list li .system-table td {
   text-align: left;
   padding: 3vw 4.6vw;
 }
 #guideline .system-list li .util-btn {
   width: min(95%, 77.29vw);
   margin-inline: auto;
   background: #F0596D;
 }
 #guideline .system-list li .util-btn a {
   padding: 4.12vw 0;
 }
 #guideline .guideline-btn {
   width: 91.79vw;
   margin-inline: auto;
   border-radius: 48.31vw;
 }
 #guideline .guideline-btn a {
   padding: 4.3vw 0;
   line-height: 1.51714;
 }
 #guideline .guideline-btn a::after {
   right: 9.66vw;
 }


}