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

/* ========================================
   @media screen and (min-width: 768px),print
======================================== */
@media screen and (min-width: 768px),print {  
/* common -------------------------------------*/
main {
   max-width: 1920px;
   margin-inline: auto;
   width: 100%;
}
.util-btn {
   width: min(95%, 400px);
}
.util-btn a{
   border-radius: 200px;
   border: 1px solid #1A1A1A;
   background: #FFF;
   display: block;
   color: #1A1A1A;
   text-align: center;
   font-size: clamp(0.75rem, 0.583rem + 0.35vw, 1rem);
   font-weight: 500;
   line-height: 1.875; /* 187.5% */
   position: relative;
   padding: 24px 0;
   letter-spacing: 0;
}
.util-btn a::after {
   position: absolute;
   content: "＞";
   color: #1A1A1A;
   text-align: center;
   font-family: "Hanken Grotesk";
   font-size: 13px;
   font-weight: 900;
   line-height: 1.3333; /* 133.333% */
   top: 50%;
   right: 40px;
   transform: translateY(-50%);
}


/* mv -------------------------------------*/
#mv {
   background: url(../images/index/mv-bg.png)no-repeat top center;
   background-size: auto;
   padding-bottom: 139px;
}
#mv h1 {
   position: relative;
   top: -40px;
   left: 40px;
   margin-bottom: -371px;
   z-index: 2;
}
#mv .loop {
   overflow: hidden;
   padding: 0 0 29px;
}
#mv .loop .loop__box {
   display: flex;
   width: 100vw;
}
#mv .loop01 .loop__box img {
   min-width: 100.64vw;
}
#mv .loop01 .loop__box img:first-child {
   -webkit-animation: loop 50s -25s linear infinite;
   animation: loop 50s -25s linear infinite;
}
#mv .loop01 .loop__box img:last-child {
   -webkit-animation: loop2 50s linear infinite;
   animation: loop2 50s linear infinite;
}
#mv .loop01 {
   position: relative;
   z-index: 1;
}
#mv .loop02 .loop__box img:first-child {
   animation: loop_rev 74s -37s linear infinite; /* 50s → 74s */
}
#mv .loop02 .loop__box img:last-child {
   animation: loop2_rev 74s linear infinite; /* 50s → 74s */
}
#mv .loop02 {
   position: relative;
   z-index: 3;
}
#mv .loop02 .loop__box img {
   min-width: 149.08vw;
}
#mv .list {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 40px;
   width: min(95%, 1340px);
   margin-inline: auto;
   padding: 146px 0 0;
}
#mv .list li {
   background: url(../images/index/mv-list-bg.png) no-repeat top center;
   text-align: center;
   padding: 53px 0 7px;
   background-size: contain;
}


/* intro -------------------------------------*/
#intro {
   background: url(../images/index/intro-bg.png) no-repeat center;
   background-size: cover;
   padding: 145px 0 241px;
}
#intro h2 {
   text-align: center;
   margin-bottom: 163px;
}
#intro h3 {
   color: #FFF;
   text-align: center;
   font-size: 20px;
   font-weight: 500;
   line-height: 1.5; /* 150% */
   letter-spacing: 0.26em;
}
#intro h3 span {
   display: block;
   margin: 31px 0 0;
}


/* reason -------------------------------------*/
#reason {
   padding: 158px 0;
}
#reason .ttl-box {
   width: min(95%, 1600px);
   margin-inline: auto;
   position: relative;
}
#reason .ttl-box h2 {
   text-align: center;
   margin-bottom: 95px;
}
#reason .ttl-box .fukidashi {
   position: absolute;
   top: 22px;
   right: 20px;
}
#reason .inBox {
   width: min(95%, 1840px);
   margin-inline: auto;
   display: grid;
   grid-template-columns: 1fr 65.8%;
}
#reason .inBox .left {
   position: sticky;
   top: 120px;
   align-self: start;
   height: fit-content;
   z-index: 3;
   padding-left: 120px;
}
#reason .inBox .left .item {
   position: relative;
   padding-left: 22px;
   list-style: none;
}
#reason .inBox .left .item::before {
   content: "";
   position: absolute;
   top: 50%;
   left: -3px;
   width: 1px;
   height: 79%;
   background: #1A1A1A;
   transform: translateY(-50%);
}
#reason .inBox .left .item span {
   font-size: 18px;
   font-weight: 500;
   line-height: 1.2777;
}
#reason .inBox .item li{
   font-size: 16px;
   font-weight: 500;
   line-height: 1.1875;
   position: relative;
   margin-bottom: 20px;
   cursor: pointer;
   display: flex;
   gap: 11px;
   align-items: center;
}
#reason .inBox .left .item li::before {
   content: "";
   position: absolute;
   left: -30px; /* 線の上に点を配置 */
   top: 7px;
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: #1A1A1A; /* デフォルト点色 */
   transition: 0.3s;
}
#reason .inBox .left .item li.is-active::before {
   background: #C93800; /* アクティブ時の点色 */
}
#reason .inBox .right .list {
   display: grid;
   gap: 100px;
}
#reason .inBox .right .list li {
   display: grid;
   grid-template-columns: 71.33% 47.5%;
   /* gap: 60px; */
}
#reason .inBox .right .list li .txt-box {
   position: relative;
   padding: 40px 0 0;
 }
#reason .inBox .right .list li .num {
   font-size: 40px;
   font-weight: 700;
   line-height: 1.3;
   letter-spacing: -0.04em;
   margin-bottom: 29px;
}
#reason .inBox .right .list li h3 {
   color: #FFF;
   font-size: 48px;
   font-weight: 600;
   line-height: 1.625; /* 162.5% */
   letter-spacing: -0.04em;
   margin-bottom: 59px;
   position: relative;
   z-index: 2;
   width: max-content;
}
#reason .inBox .right .list li h3 span{
   background: #1A1A1A;
   padding: 2px 20px;
}
#reason .inBox .right .list li h4 {
   color: #C93800;
   font-size: 18px;
   font-style: normal;
   font-weight: 600;
   line-height: 1.88889; /* 188.889% */
   margin-bottom: 30px;
}
#reason .inBox .right .list li .txt {
   font-size: 14px;
   font-weight: 400;
   line-height: 1.85714; /* 185.714% */
   width: min(95%, 580px);
   margin-bottom: 27px;
}
#reason .inBox .right .list li .btn {
   width: min(95%, 240px);
   padding: 30px 0 0px;
}
#reason .inBox .right .list li .btn a{
   font-size: 16px;
   font-weight: 500;
   line-height: 1.875; /* 187.5% */
   display: block;
   position: relative;
   border-bottom: 1px solid #1A1A1A;
   padding-bottom: 11px;
}
#reason .inBox .right .list li .btn a::after {
   position: absolute;
   content: "＞";
   color: #1A1A1A;
   font-family: "Hanken Grotesk";
   font-size: 13px;
   font-weight: 900;
   line-height: 1.3333; /* 133.333% */
   top: 50%;
   right: 0;
   transform: translateY(-50%);
}
#reason .inBox .right .list li .photo {
   position: relative;
   right: calc(100% - 352px);
}

/* seminar -------------------------------------*/
#seminar {
   background: url(../images/index/seminar-bg.png)no-repeat;
   background-size: cover;
}
#seminar .inner {
   width: min(95%, 1600px);
   margin-inline: auto;
   padding: 135px 0 160px;
}
#seminar .enttl {
   color: #FFF;
   font-size: 285.318px;
   font-weight: 900;
   line-height: 1;
   display: inline-block;
   position: relative;
   margin: 0px 0 -3px;
}
#seminar .enttl::after {
   position: absolute;
   content: "";
   background: #FFF;
   width: 483px;
   height: 4px;
   top: 52%;
   right: -529px;
   transform: translateY(-50%);
}
#seminar .top-frame {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   margin-bottom: 86px;
}
#seminar .ttl-box {
   display: flex;
   gap: 21px;
}
#seminar h2 {padding: 0 0 0 6px;position: relative;top: -3px;}
#seminar .ttl-box .txt {
   font-size: 16px;
   font-weight: 500;
   line-height: 1.875; /* 187.5% */
}
#seminar .ttl-box .lead {
   margin-bottom: 4px;
}
#seminar .util-btn {
   position: relative;
   top: 10px;
}
#seminar .information-box ul {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 0 50px;
}
#seminar .information-box ul li {
   border-radius: 10px;
   border: 1px solid #FFF;
   padding: 30px 20px;
   position: relative;
}
#seminar .information-box ul li  {
   display: block grid;
   grid-template-rows: subgrid;
   grid-row: span 6;
}
#seminar .information-box ul li a  {
   display: block grid;
   grid-template-rows: subgrid;
   grid-row: span 6;
}
#seminar .information-box ul li a .list-box {
   display: block grid;
   grid-template-rows: subgrid;
   grid-row: span 6;
}
#seminar .information-box ul li:first-child {
   border-radius: 10px;
   background: rgba(255, 255, 255, 0.80);
}
#seminar .information-box ul li .system-category {
   position: absolute;
   top: -15px;
   left: 19px;
}
#seminar .information-box ul li .system-category span{
   color: #FFF;
   font-family: "Noto Sans JP";
   font-size: 13px;
   font-weight: 400;
   line-height: 2.30769; /* 230.769% */
   border-radius: 4px;
   background: #1A1A1A;
   padding: 5px 10px;
}
#seminar .information-box ul li .photo {
   margin-bottom: 28px;
   width: 100%;
   height: 324px;
   text-align: center;
   overflow: hidden;
}
#seminar .information-box ul li .photo img {
   width: 100%;
   height: auto;
}
#seminar .information-box ul li .ttl {
   font-size: 16px;
   font-weight: 500;
   line-height: 1.75; /* 175% */
   margin-bottom: 16px;
   color: #FFF;
}
#seminar .information-box ul li:first-child .ttl {
   color: inherit;
}
#seminar .information-box ul li .info-list {
   display: grid;
   grid-template-columns: 52px 1fr;
   gap: 24px;
   color: #FFF;
   font-size: 13px;
   font-weight: 400;
   line-height: 2.30769; /* 230.769% */
   position: relative;
   padding-left: 23px;
}
#seminar .information-box ul li:first-child .info-list {
   color: #8D8D8D;
}
#seminar .information-box ul li .info-list::before {
   position: absolute;
   content: "";
   background: #FFF;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   top: 45%;
   left: 8px;
}
#seminar .information-box ul li:first-child  .info-list::before {
   background: #8D8D8D;
}

/* menu -------------------------------------*/
#menu {
   padding: 160px 0 0;
}
#menu .loop {
   overflow: hidden;
   padding: 0 0 49px;
   width: min(95%, 1625px);
}
#menu .loop .loop__box {
   display: flex;
   width: 100vw;
}
#menu .loop .loop__box img {
   min-width: 154.66vw;
}
#menu .loop .loop__box img:first-child {
   -webkit-animation: loop 50s -25s linear infinite;
   animation: loop 50s -25s linear infinite;
}
#menu .loop .loop__box img:last-child {
   -webkit-animation: loop2 50s linear infinite;
   animation: loop2 50s linear infinite;
}
#menu .inner{
   width: min(95%, 1744px);
   margin-inline: auto;
   display: grid;
   grid-template-columns: 88.0733% 1fr;
   gap: 55px;
   padding-bottom: 160px;
}
#menu .inner h2 {
   position: relative;
   top: -103px;
}
#menu .inner h2::after {
   position: absolute;
   content: "";
   background: url(../images/index/menu-human.png)no-repeat;
   background-size: contain;
   width: 144px;
   height: 332px;
   bottom: -102px;
   right: -20px;
}
#menu .inner .list {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   border: 1px solid #1A1A1A;
}
#menu .inner .list li {
   position: relative;
}
#menu .inner .list li a {
   padding: 30px 30px 163px;
   display: block;
}
#menu .inner .list li:nth-child(odd) {
   border-right: 1px solid #1A1A1A;
}
#menu .inner .list li:nth-child(-n + 4) {
   border-bottom: 1px solid #1A1A1A;
}
#menu .inner .list li:nth-child(5) a,
#menu .inner .list li:nth-child(6) a{
   padding: 30px 30px 130px;
}
#menu .inner .list li:after {
   position: absolute;
   content: "";
   width: 200px;
   height: 140px;
   right: 30px;
   bottom: 30px;
   background-size: contain;
}
#menu .inner .list li:nth-child(1)::after {
   background: url(../images/index/menu-img01.png)no-repeat;
   background-size: contain;
}
#menu .inner .list li:nth-child(2)::after {
   background: url(../images/index/menu-img02.png)no-repeat;
   background-size: contain;
}
#menu .inner .list li:nth-child(3)::after {
   background: url(../images/index/menu-img03.png)no-repeat;
   background-size: contain;
}
#menu .inner .list li:nth-child(4)::after {
   background: url(../images/index/menu-img04.png)no-repeat;
   background-size: contain;
}
#menu .inner .list li:nth-child(5)::after {
   background: url(../images/index/menu-img05.png)no-repeat;
   background-size: contain;
}
#menu .inner .list li:nth-child(6)::after {
   background: url(../images/index/menu-img06.png)no-repeat;
   background-size: contain;
}
#menu .inner .list li h3 {
   font-size: 40px;
   font-style: normal;
   font-weight: 600;
   line-height: 1; /* 100% */
   letter-spacing: -0.04em;
   margin-bottom: 15px;
}
#menu .inner .list li h4 {
   font-size: 22px;
   font-style: normal;
   font-weight: 400;
   line-height: 1.45455; /* 145.455% */
   letter-spacing: -0.04em;
}

/* column -------------------------------------*/
#column {
   padding: 140px 0 180px;
}
#column .ttl-box{
   width: min(95%, 1540px);
   /* margin-inline: auto; */
   margin-bottom: 60px;
   margin-left: auto;
}
#column .ttl-box h2 {
   font-size: 20px;
   font-weight: 700;
   line-height: 1.45;
   letter-spacing: -0.08em;
   position: relative;
   padding: 0 0 0 27px;
   margin-bottom: 25px;
}
#column .ttl-box h2::before {
   position: absolute;
   content: "";
   background: url(../images/index/polygon.svg)no-repeat;
   background-size: contain;
   width: 19px;
   height: 17px;
   top: 50%;
   left: 4px;
   transform: translateY(-50%);
}
#column .ttl-box .enttl {
   padding-left: 3px;
   margin-bottom: 10px;
}
#column .ttl-box .lead-wrap {
   display: flex;
   justify-content: space-between;
   width: min(95%,1160px);
}
#column .ttl-box .lead {
   font-size: 16px;
   font-weight: 500;
   line-height: 1.875; /* 187.5% */
}
#column .util-btn {
   width: min(95%, 300px);
}
#column .util-btn a {
   padding: 15px 0;
}
#column .util-btn a::after {
   right: 30px;
}
#column .content {
   width: min(95%, 1540px);
   margin-left: auto;
   margin-bottom: 160px;
}
#column .system-list {
   position: relative;
   grid-template-columns: 1fr;
   gap: 0 40px;
   margin-bottom: 72px;
}
#column .system-list li {
   width: 360px;
   margin: 0 20px;
}
#column .system-list li .system-pic {
   margin-bottom: 18px;
   width: 100%;
   height: 200px;
   text-align: center;
}
#column .system-list li .system-pic img {
   width: auto;
   height: 100%;
   max-width: 100%;
}
#column .system-list li .system-ttl {
   font-size: 16px;
   font-weight: 500;
   line-height: 1.75; /* 175% */
   letter-spacing: 0;
   margin-bottom: 10px;
}
#column .system-list li .textbx {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
}
#column .system-list li .system-date {
   color: #8D8D8D;
   font-size: 13px;
   font-weight: 400;
   line-height: 1.69231; /* 169.231% */
}
#column .system-list li .system-category {
   font-size: 13px;
   font-weight: 400;
   line-height: 1.8;/* 169.231% */
   position: relative;
   top: -3px;
}
#column .system-list li .system-category span {
   border-radius: 4px;
   border: 1px solid #1A1A1A;
   background: #FFF;
   padding: 0 9px;
   color: inherit;
}

#column .progress {
   width: 1160px;
   height: 1px;
   background: #B9B9B9;
   overflow: hidden;
}
#column .progress__bar {
   height: 100%;
   width: 0%;
   background: #000;
   transition: width 0.4s linear;
}
#column .next-arrow, #column .prev-arrow {
   position: absolute;
   bottom: -182px;
   transform: translateY(-50%);
   z-index: 15;
   cursor: pointer;
}
.slick-slider .slick-track, .slick-slider .slick-list {
   margin: 0!important;
}
#column .next-arrow {
   left: calc(100% - 440px);
}
#column .prev-arrow {
   left: calc(100% - 504px);
}
#column .bnr-list {
   width: min(95%, 1160px);
   margin-inline: auto;
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 40px;
}
#column .bnr-list li {
   box-shadow: 0 10px 20px 0 rgba(26, 26, 26, 0.10);
}

 .slick-slide img {
   border: none;
   max-width: 100%;
   height: auto;
 }
 .slick-nav {
   position: relative;
   margin: 0 auto;
 }
 .slick-slider {
   padding: 0;
   margin: 0;
 }
 }


/* ========================================
@media screen and (min-width:768px) and (max-width:1919px)
======================================== */
@media screen and (min-width:768px) and (max-width:1919px) {
/* mv -------------------------------------*/
#mv {
   padding-bottom: 7.243vw;
   background-size: 100%;
}
#mv h1 {
   top: -2.084vw;
   left: 2.084vw;
   margin-bottom: -19.333vw;
}
#mv h1 img {
   width: 100.73vw;
}
#mv .loop {
   padding: 0 0 1.511vw;
}
#mv .list {
   gap: 2.084vw;
   width: 69.828vw;
   padding: 7.608vw 0 0;
}
#mv .list li {
   padding: 2.762vw 0 0.365vw;
}
#mv .list li:nth-child(1) img {
   width: 12.09vw;
}
#mv .list li:nth-child(2) img {
   width: 10.943vw;
}
#mv .list li:nth-child(3) img {
   width: 15.842vw;
}

}



/* ========================================
@media screen and (min-width:768px) and (max-width:1919px)
======================================== */
@media screen and (min-width:768px) and (max-width:1919px) {
    
/* reason -------------------------------------*/
#reason {
   padding: 8.233vw 0;
}
#reason .ttl-box {
   width: 83.377vw;
}
#reason .ttl-box h2 {
   margin-bottom: 4.95vw;
}
#reason .ttl-box h2 img {
   width: 83.38vw;
}
#reason .ttl-box .fukidashi {
   top: 1.146vw;
   right: 1.042vw;
}
#reason .ttl-box .fukidashi img {
   width: 37.31vw;
}
#reason .inBox {
   width:95.883vw;
   grid-template-columns: 1fr 65.8%;
}
#reason .inBox .left {
   top: 6.253vw;
   padding-left: 6.253vw;
}
#reason .inBox .left .item {
   position: relative;
   padding-left: 1.146vw;
   list-style: none;
}
#reason .inBox .left .item::before {
   left: -0.156vw;
   width: 0.052vw;
   height: 79%;
}
#reason .inBox .left .item span {
   font-size: 0.938vw;
   font-weight: 500;
   line-height: 1.2777;
}
#reason .inBox .item li{
   font-size: clamp(0.625rem, 0.375rem + 0.52vw, 1rem);
   margin-bottom: 1.042vw;
   gap: 0.573vw;
}
#reason .inBox .left .item li::before {
   left: -1.563vw; 
   top: 0.365vw;
   width: 0.521vw;
   height: 0.521vw;
}
#reason .inBox .right .list {
   gap: 5.211vw;
}
#reason .inBox .right .list li {
   grid-template-columns: 71.33% 44%;
}
#reason .inBox .right .list li .txt-box {
   padding: 2.084vw 0 0;
 }
#reason .inBox .right .list li .num {
   font-size: 2.084vw;
   margin-bottom: 1.511vw;
}
#reason .inBox .right .list li h3 {
   font-size: 2.501vw;
   margin-bottom: 3.075vw;
}
#reason .inBox .right .list li h3 span{
   padding: 0.104vw 1.042vw;
}
#reason .inBox .right .list li h4 {
   font-size: clamp(0.875rem, 0.708rem + 0.35vw, 1.125rem);
   margin-bottom: 1.563vw;
   position: relative;
   z-index: 2;
   width: 30.22vw;
}
#reason .inBox .right .list li .txt {
   font-size: clamp(0.625rem, 0.458rem + 0.35vw, 0.875rem);
   width: 30.224vw;
   margin-bottom: 1.407vw;
}
#reason .inBox .right .list li .btn {
   width: 12.507vw ;
   padding: 1.563vw 0 0px;
}
#reason .inBox .right .list li .btn a{
   font-size: clamp(0.75rem, 0.583rem + 0.35vw, 1rem);
   padding-bottom: 0.573vw;
}
#reason .inBox .right .list li .btn a::after {
   font-size: 0.677vw;
}
#reason .inBox .right .list li .photo {
   right: calc(100% - 18.343vw);
}
#reason .inBox .right .list li .photo img {
   width: 100%;
   height: auto;
}

}

/* ========================================
@media screen and (min-width:768px) and (max-width:1640px)
======================================== */
@media screen and (min-width:768px) and (max-width:1640px) {
/* seminar -------------------------------------*/
#seminar .inner {
   padding: 8.232vw 0 9.756vw;
}
#seminar .enttl {
   font-size: 17.397vw;
   margin: 0px 0 -0.183vw;
}
#seminar .enttl::after {
   width: 29.451vw;
   height: 0.244vw;
   top: 52%;
   right: -32.256vw;
   transform: translateY(-50%);
}
#seminar .top-frame {
   margin-bottom: 5.244vw;
}
#seminar .ttl-box {
   gap: 1.28vw;
}
#seminar h2 {padding: 0 0 0 0.366vw;position: relative;top: -0.183vw;}
#seminar h2 img {
   width: 25.43vw;
}
#seminar .lead img {
   width: 43.84vw;
}
#seminar .ttl-box .txt {
   font-size: clamp(0.625rem, 0.295rem + 0.69vw, 1rem);
}
#seminar .ttl-box .lead {
   margin-bottom: 0.244vw;
}
#seminar .util-btn {
   top: 0.61vw;
}

#seminar .information-box ul {
   gap: 0 3.049vw;
}
#seminar .information-box ul li {
   border-radius: 0.61vw;
   padding: 1.829vw 1.22vw;
}
#seminar .information-box ul li:first-child {
   border-radius: 0.61vw;
}
#seminar .information-box ul li .system-category {
   top: -0.915vw;
   left: 1.159vw;
}
#seminar .information-box ul li .system-category span{
   font-size: clamp(0.625rem, 0.46rem + 0.34vw, 0.813rem);
   border-radius: 0.244vw;
   padding: 0.305vw 0.61vw;
}
#seminar .information-box ul li .photo {
   margin-bottom: 1.707vw;
   width: 100%;
   height: 19.756vw;
}
#seminar .information-box ul li .photo img {
   width: 100%;
   height: auto;
}
#seminar .information-box ul li .ttl {
   font-size: clamp(0.75rem, 0.53rem + 0.46vw, 1rem);
   margin-bottom: 0.976vw;
}
#seminar .information-box ul li .info-list {
   grid-template-columns: 6.171vw 1fr;
   gap: 1.463vw;
   font-size: clamp(0.625rem, 0.46rem + 0.34vw, 0.813rem);
   padding-left: 1.402vw;
}
#seminar .information-box ul li .info-list::before {
   width: 0.366vw;
   height: 0.366vw;
   left: 0.488vw;
}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1000px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1000px) {
#seminar .util-btn a {
   font-size: clamp(0.625rem, 0.211rem + 0.86vw, 0.75rem);
   padding: 2.4vw 0;
}
#seminar .util-btn a::after {
   right: 3vw;
   font-size: clamp(0.625rem, 0.211rem + 0.86vw, 0.75rem);
}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1800px)
======================================== */
@media screen and (min-width:768px) and (max-width:1800px) {
/* menu -------------------------------------*/
#menu {
   padding: 8.889vw 0 0;
}
#menu .loop {
   padding: 0 0 2.722vw;
   width: 90.278vw;
}
#menu .inner{
   width: 96.889vw;
   grid-template-columns: 88.0733% 1fr;
   gap: 3.056vw;
   padding-bottom: 8.889vw;
}
#menu .inner h2 {
   top: -5.722vw;
   height: 45.06vw;
}
#menu .inner h2 img {
   width: 7.89vw;
}
#menu .inner h2::after {
   width: 8vw;
   height: 18.444vw;
   bottom: -5.667vw;
   right: -1.111vw;
}   

#menu .inner .list li a{
   padding: 1.667vw 1.667vw 9.056vw;
}
#menu .inner .list li:nth-child(5) a,
#menu .inner .list li:nth-child(6) a{
   padding: 1.667vw 1.667vw 7.222vw;
}
#menu .inner .list li:after {
   width: 11.111vw;
   height: 7.778vw;
   right: 1.667vw;
   bottom: 1.667vw;
   background-size: contain;
}
#menu .inner .list li h3 {
   font-size: 2.222vw;
   margin-bottom: 0.833vw;
}
#menu .inner .list li h4 {
   font-size: clamp(0.75rem, 0.285rem + 0.97vw, 1.375rem);
   letter-spacing: -0.04em;
}
}



/* ========================================
@media screen and (min-width:768px) and (max-width:1600px)
======================================== */
@media screen and (min-width:768px) and (max-width:1600px) {
/* column -------------------------------------*/
#column {
   padding: 8.75vw 0 11.25vw;
}
#column .ttl-box{
   width: 96.25vw;
   margin-bottom: 3.75vw;
}
#column .ttl-box h2 {
   font-size: clamp(1rem, 0.769rem + 0.48vw, 1.25rem);
   padding: 0 0 0 1.688vw;
   margin-bottom: 1.563vw;
}
#column .ttl-box h2::before {
   width: 1.188vw;
   height: 1.063vw;
   top: 50%;
   left: 0.25vw;
   transform: translateY(-50%);
}
#column .ttl-box .enttl {
   padding-left: 0.188vw;
   margin-bottom: 0.625vw;
}
#column .ttl-box .enttl img {
   width: 47.22vw;
}
#column .ttl-box .lead {
   font-size: clamp(0.75rem, 0.519rem + 0.48vw, 1rem);
}
#column .util-btn a::after {
   right: 1.875vw;
}
#column .content {
   width: 96.25vw;
   margin-bottom: 10vw;
}
#column .system-list {
   grid-template-columns: 1fr;
   gap: 0 2.5vw;
   margin-bottom: 4.875vw;
}
#column .system-list li {
   width: 22.5vw;
   margin: 0 1.25vw;
}
#column .system-list li .system-pic {
   margin-bottom: 1.125vw;
   width: 100%;
   height: 12.5vw;
}
#column .system-list li .system-pic img {
   width: auto;
   height: 100%;
   max-width: 100%;
}
#column .system-list li .system-ttl {
   font-size: clamp(0.75rem, 0.519rem + 0.48vw, 1rem);
   margin-bottom: 0.625vw;
}
#column .system-list li .system-date {
   font-size: clamp(0.625rem, 0.452rem + 0.36vw, 0.813rem);
}
#column .system-list li .system-category {
   font-size: clamp(0.625rem, 0.452rem + 0.36vw, 0.813rem);
}
#column .system-list li .system-category span {
   border-radius: 0.25vw;
   padding: 0 0.563vw;
}

#column .progress {
   width: 72.5vw;
   height: 0.063vw;
}
#column .next-arrow, #column .prev-arrow {
   bottom: -11.812vw;
   transform: translateY(-50%);
   z-index: 15;
   width: 3.33vw;
}
#column .next-arrow {
   left: calc(100% - 27.5vw);
}
#column .prev-arrow {
   left: calc(100% - 31.5vw);
}
#column .bnr-list {
   width: 72.5vw;
   gap: 2.5vw;
}
#column .bnr-list li img  {
   width: 100%;
   height: auto;
}


}


/* ========================================
   @media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {
/* common -------------------------------------*/
.util-btn {
   width: 72.46vw;
   margin-inline: auto;
}
.util-btn a{
   border-radius: 48.31vw;
   border: 0.2vw solid #1A1A1A;
   background: #FFF;
   display: block;
   color: #1A1A1A;
   text-align: center;
   font-size:3.382vw;
   font-weight: 500;
   line-height: 2.14286;
   position: relative;
   padding: 3.385vw 0;
   letter-spacing: 0;
}
.util-btn a::after {
   position: absolute;
   content: "＞";
   color: #1A1A1A;
   text-align: center;
   font-family: "Hanken Grotesk";
   font-size: 2.42vw;
   font-weight: 900;
   line-height: 1;
   top: 51%;
   right: 4.5vw;
   transform: translateY(-50%);
}

/* mv -------------------------------------*/
#mv {
   background: url(../images/index/mv-bg_sp.png)no-repeat top 13.5vw left 4.5vw;
   background-size: 91.55vw;
   padding-bottom: 16.8vw;
}
#mv h1 {
   position: relative;
   top: -23vw;
   left: -14vw;
   z-index: 2;
   width: 119.08vw;
   margin-bottom: -38vw;
}
#mv h1 img {
   width: 100%;
}
#mv .loop {
   overflow: hidden;
   padding: 0 0 2.5vw;
}
#mv .loop .loop__box {
   display: flex;
   width: 100vw;
}
#mv .loop01 .loop__box img {
   min-width: 286.3vw;
}
#mv .loop01 .loop__box img:first-child {
   -webkit-animation: loop 50s -25s linear infinite;
   animation: loop 50s -25s linear infinite;
}
#mv .loop01 .loop__box img:last-child {
   -webkit-animation: loop2 50s linear infinite;
   animation: loop2 50s linear infinite;
}
#mv .loop01 {
   position: relative;
   z-index: 1;
}
#mv .loop02 .loop__box img:first-child {
   animation: loop_rev 74s -37s linear infinite; /* 50s → 74s */
}
#mv .loop02 .loop__box img:last-child {
   animation: loop2_rev 74s linear infinite; /* 50s → 74s */
}
#mv .loop02 {
   position: relative;
   z-index: 3;
}
#mv .loop02 .loop__box img {
   min-width: 424.08vw;
}
#mv .list {
   display: grid;
   grid-template-columns: 1fr 1fr;
   justify-content: center;
   gap: 0 1.93vw;
   width: 89.86vw;
   margin-inline: auto;
   padding: 5vw 0 0;
}
#mv .list li {
   background: url(../images/index/mv-list-bg_sp.png) no-repeat top center;
   text-align: center;
   padding: 4.4vw 0 3vw;
   background-size: contain;
}
#mv .list li:first-child {
   background: url(../images/index/mv-list-bg_sp01.png) no-repeat top center;
   grid-column: 1 / -1;
   width: 46.86vw;
   margin-inline: auto;
   background-size: contain;
}
#mv .list li:nth-child(3) {
   padding: 5.5vw 1vw 3vw 0;
}

/* intro -------------------------------------*/
#intro {
   background: url(../images/index/intro-bg_sp.png) no-repeat;
   background-size: cover;
   padding: 20.32vw 0 19.5vw;
}
#intro h2 {
   text-align: center;
   margin-bottom: 32.4vw;
}
#intro h3 {
   color: #FFF;
   text-align: center;
   font-size:3.382vw;
   font-weight: 500;
   line-height: 2.1428; 
   letter-spacing: 0.26em;
}
#intro h3 span {
   display: block;
   margin: 1.82vw 0 0;
}
#intro h3 span img {
   width: 64.25vw;
}



/* reason -------------------------------------*/
#reason {
   padding: 19.32vw 0;
}
#reason .ttl-box {
   width: 89.37vw;
   margin-inline: auto;
   position: relative;
   display: grid;
   margin-bottom: 9.5vw;
}
#reason .ttl-box h2 {
   text-align: center;
   order: 2;
   margin-top: -4vw;
}
#reason .ttl-box .fukidashi {
   order: 1;
   text-align: center;
}
#reason .ttl-box .fukidashi img {
   width: 86.47vw;
}
#reason .inBox {
   display: grid;
}
#reason .inBox .left {
   display: none;
}
#reason .inBox .right .list {
   display: grid;
   gap: 9.5vw;
}
#reason .inBox .right .list li {
   display: grid;
}
#reason .inBox .right .list li .txt-box {
   display: contents;
 }
#reason .inBox .right .list li .num {
   font-size:3.865vw;
   font-weight: 700;
   letter-spacing: -0.04em;
   margin-bottom: 1.42vw;
   padding: 0 5.5vw;
   order: 1;
}
#reason .inBox .right .list li h3 {
   color: #FFF;
   font-size:5.314vw;
   font-weight: 600;
   line-height: 1.8;
   letter-spacing: -0.04em;
   position: relative;
   z-index: 2;
   padding: 0 0 0 5.5vw;
   order: 2;
}
#reason .inBox .right .list li h3 span{
   background: #1A1A1A;
   padding: 0.48vw 1.93vw;
}
#reason .inBox .right .list li:nth-child(2) h3 .span01 {
   padding: 0.48vw 0 0.48vw 2.48vw;
}
#reason .inBox .right .list li:nth-child(2) h3 .span02 {
   padding: 0.48vw 1.93vw 0.48vw 2.5vw;
}
#reason .inBox .right .list li:nth-child(3) h3 .span01 {
   padding: 0.48vw 2.5vw 0.48vw 1.6vw;
}
#reason .inBox .right .list li:nth-child(3) h3 .span02 {
   padding: 0.48vw 1.93vw 0.48vw 1.8vw;
}
#reason .inBox .right .list li:nth-child(3) h3 .span03 {
   padding: 1.2vw 1.93vw 0.48vw 1.8vw;
   font-size: 4.831vw;
}
#reason .inBox .right .list li h4 {
   color: #C93800;
   font-size:3.865vw;
   font-weight: 600;
   line-height: 1.75;
   margin-bottom: 4.83vw;
   order: 4;
   width: 89.37vw;
   margin-inline: auto;
}
#reason .inBox .right .list li .txt {
   font-size:3.14vw;
   font-weight: 400;
   line-height: 1.84615;
   margin-bottom: 5.5vw;
   order: 5;
   width: 89.37vw;
   margin-inline: auto;
}
#reason .inBox .right .list li .btn {
   width: 38.65vw;
   order: 6;
   margin-left: auto;
   margin-right: 5.4vw;
   padding: 2vw 0 0;
}
#reason .inBox .right .list li .btn a{
   font-size:3.14vw;
   font-weight: 500;
   line-height: 1;
   display: block;
   position: relative;
   border-bottom: 0.2vw solid #1A1A1A;
   padding-bottom: 3.46vw;
}
#reason .inBox .right .list li .btn a::after {
   position: absolute;
   content: "＞";
   color: #1A1A1A;
   font-family: "Hanken Grotesk";
   font-size: 2.42vw;
   font-weight: 900;
   line-height: 1;
   top: 26%;
   right: 0;
   transform: translateY(-50%);
}
#reason .inBox .right .list li .photo {
   order: 3;
   margin-top: -5vw;
   margin-bottom: 7.5vw;
}
#reason .inBox .right .list li:nth-child(3) .photo {
   margin-top: -14.5vw;
}

/* seminar -------------------------------------*/
#seminar {
   background: url(../images/index/seminar-bg_sp.png)no-repeat;
   background-size: cover;
}
#seminar .inner {
   display: grid;
   padding: 14.8vw 0 19.32vw;
}
#seminar .enttl {
   color: #FFF;
   font-size: 19.32vw;
   font-weight: 900;
   line-height: 1.25;
   display: inline-block;
   order: 1;
   padding-left: 8.5vw;
}
#seminar .top-frame {
   display: contents;
}
#seminar .ttl-box {
   order: 2;
   width: 82.13vw;
   margin-inline: auto;
}
#seminar h2 {
   margin: -2vw 0 2.4vw 0.8vw;
   position: relative;
}
#seminar h2::after {
   position: absolute;
   content: "";
   background: #FFF;
   width: 35.27vw;
   height: 0.48vw;
   top: 56%;
   right: -9vw;
   transform: translateY(-50%);
}
#seminar .ttl-box .txt {
   font-size:3.14vw;
   font-weight: 500;
   line-height: 1.84615; 
}
#seminar .ttl-box .lead {
   margin-bottom: 4.83vw;
}
#seminar .ttl-box .lead img {
   width: 78.99vw;
}
#seminar .util-btn {
   order: 4;
}
#seminar .information-box {
   order: 3;
}
#seminar .information-box ul {
   display: grid;
   margin-bottom: 9.4vw;
}
#seminar .information-box ul li {
   border-radius: 2.42vw;
   background: #F4F6F8;
   position: relative;
   padding: 7.25vw 4.83vw;
   margin: 0 2.42vw;
   width: 82.13vw;
}
#seminar .information-box ul li a .list-box {
   position: relative;
}
#seminar .information-box ul li .system-category {
   position: absolute;
   top: -10.4vw;
}
#seminar .information-box ul li .system-category span{
   color: #FFF;
   font-size:3.14vw;
   font-weight: 400;
   line-height: 1.07692;
   border-radius: 0.97vw;
   background: #1A1A1A;
   padding: 0.85vw 2.42vw;
}
#seminar .information-box ul li .photo {
   margin-bottom: 3.86vw;
   width: 100%;
   height: 50.97vw;
   text-align: center;
}
#seminar .information-box ul li .photo img {
   width: auto;
   height: 100%;
   max-width: 100%;
}
#seminar .information-box ul li .ttl {
   font-size:3.382vw;
   font-weight: 500;
   line-height: 1.71429;
   margin-bottom: 4.83vw;
}
#seminar .information-box ul li .info-list {
   display: grid;
   grid-template-columns: 12.56vw 1fr;
   gap: 5.80vw;
   font-size:3.14vw;
   font-weight: 400;
   line-height: 2.30769; /* 230.769% */
   position: relative;
   padding-left: 3.4vw;
   color: #8D8D8D;
}
#seminar .information-box ul li .info-list::before {
   position: absolute;
   content: "";
   background: #8D8D8D;
   width: 1.45vw;
   height: 1.45vw;
   border-radius: 50%;
   top: 37%;
   left: 0vw;
}
#seminar .slick-track {
   padding: 13vw 0 0;
}
#seminar .next-arrow, #seminar .prev-arrow {
   position: absolute;
   top: 49%;
   transform: translateY(-50%);
   z-index: 15;
}
#seminar .next-arrow {
   right: 7.5vw;
}
#seminar .prev-arrow {
   left: 7.5vw;
}

/* menu -------------------------------------*/
#menu {
   padding: 20.32vw 0 0;
}
#menu .loop {
   overflow: hidden;
   padding-bottom: 4.5vw;
}
#menu .loop .loop__box {
   display: flex;
   width: 100vw;
}
#menu .loop .loop__box img {
   min-width: 339.66vw;
}
#menu .loop .loop__box img:first-child {
   -webkit-animation: loop 50s -25s linear infinite;
   animation: loop 50s -25s linear infinite;
}
#menu .loop .loop__box img:last-child {
   -webkit-animation: loop2 50s linear infinite;
   animation: loop2 50s linear infinite;
}
#menu .inner{
   display: grid;
   padding-bottom: 19.32vw;
}
#menu .inner h2 {
   position: relative;
   order: 1;
   padding: 0 6vw;
   margin-bottom: 9vw;
}
#menu .inner h2::after {
   position: absolute;
   content: "";
   background: url(../images/index/menu-human_sp.png)no-repeat;
   width: 13.53vw;
   height: 31.40vw;
   top: -13.5vw;
   right: 25vw;
   background-size: contain;
}
#menu .inner .list {
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
   order: 2;
}
#menu .inner .list li {
   position: relative;
   border-bottom: 0.2vw solid #1A1A1A;
}
#menu .inner .list li:first-child {
   border-top: 0.2vw solid #1A1A1A;
}
#menu .inner .list li a {
   display: block;
   padding: 8.8vw 5.31vw 8.4vw;
}
#menu .inner .list li:after {
   position: absolute;
   content: "";
   width: 24.15vw;
   height: 16.91vw;
   top: 50%;
   right: 5.31vw;
   transform: translateY(-50%);
   background-size: contain;
}
#menu .inner .list li:nth-child(1)::after {
   background: url(../images/index/menu-img01.png)no-repeat;
   background-size: contain;
}
#menu .inner .list li:nth-child(2)::after {
   background: url(../images/index/menu-img02.png)no-repeat;
   background-size: contain;
}
#menu .inner .list li:nth-child(3)::after {
   background: url(../images/index/menu-img03.png)no-repeat;
   background-size: contain;
}
#menu .inner .list li:nth-child(4)::after {
   background: url(../images/index/menu-img04.png)no-repeat;
   background-size: contain;
}
#menu .inner .list li:nth-child(5)::after {
   background: url(../images/index/menu-img05.png)no-repeat;
   background-size: contain;
}
#menu .inner .list li:nth-child(6)::after {
   background: url(../images/index/menu-img06.png)no-repeat;
   background-size: contain;
}
#menu .inner .list li h3 {
   font-size:5.797vw;
   font-weight: 600;
   line-height: 1; /* 100% */
   letter-spacing: -0.04em;
   margin-bottom: 2.42vw;
}
#menu .inner .list li h4 {
   font-size:3.865vw;
   font-weight: 400;
   line-height: 1.5;
   letter-spacing: -0.04em;
}

/* column -------------------------------------*/
#column {
   padding: 16.8vw 0 19.32vw;
}
#column .ttl-box{
   width: 77.29vw;
   margin-inline: auto;
   margin-bottom: 7.25vw;
   position: relative;
}
#column .ttl-box h2 {
   font-size:3.14vw;
   font-weight: 700;
   line-height: 1.4615;
   letter-spacing: -0.08em;
   position: absolute;
   top: 22.8vw;
   right: 7vw;
}
#column .ttl-box h2::before {
   position: absolute;
   content: "";
   background: url(../images/index/polygon.svg)no-repeat;
   width: 2.90vw;
   height: 2.90vw;
   top: 52%;
   left: -3.5vw;
   transform: translateY(-50%);
   background-size: contain;
}
#column .ttl-box .enttl {
   position: relative;
   left: 0.5vw;
   margin-bottom: 7vw;
}
#column .ttl-box .lead-wrap {
   display: flex;
   justify-content: space-between;
}
#column .ttl-box .lead {
   font-size:3.14vw;
   font-weight: 500;
   line-height: 1.84615;
}
#column .content {
   width: 88.65vw;
   margin-left: auto;
   margin-bottom: 14.49vw;
}
#column .system-list {
   position: relative;
   margin-bottom: 7.7vw;
}
#column .system-list li {
   width: 77.29vw;
   margin: 0 2.42vw;
}
#column .system-list li .system-pic {
   margin-bottom: 3.86vw;
   width: 100%;
   height: 43.00vw;
   text-align: center;
}
#column .system-list li .system-pic img {
   width: auto;
   height: 100%;
   max-width: 100%;
}
#column .system-list li .system-ttl {
   font-size:3.865vw;
   font-weight: 500;
   line-height: 1.75; /* 175% */
   letter-spacing: 0;
   margin-bottom: 2.42vw;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* ← 2行でカット */
   -webkit-box-orient: vertical;
   overflow: hidden;
}
#column .system-list li .textbx {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
}
#column .system-list li .system-date {
   color: #8D8D8D;
   font-size: 13px;
   font-weight: 400;
   line-height: 1.69231; /* 169.231% */
}
#column .system-list li .system-category {
   font-size:3.14vw;
   font-weight: 400;
   line-height: 1.7;
}
#column .system-list li .system-category span {
   border-radius: 0.97vw;
   border: 0.2vw solid #1A1A1A;
   background: #FFF;
   padding: 0 2.2vw;
   position: relative;
   top: -1vw;
   color: inherit;
}

#column .progress {
   width: 77.29vw;
   height: 0.2vw;
   background: #B9B9B9;
   overflow: hidden;
}
#column .progress__bar {
   height: 100%;
   width: 0%;
   background: #000;
   transition: width 0.4s linear;
}
#column .next-arrow, #column .prev-arrow {
   position: absolute;
   top: 31.5vw;
   transform: translateY(-50%);
   z-index: 15;
}
.slick-slider .slick-track, .slick-slider .slick-list {
   margin: 0!important;
}
#column .next-arrow {
   left: calc(100% - 12.5vw);
}
#column .prev-arrow {
   left: calc(100% - 92.5vw);
}
#column .bnr-list {
   width: 82.13vw;
   margin-inline: auto;
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
   gap: 7.25vw;
   padding: 19.5vw 0 0;
}
#column .bnr-list li {
   box-shadow: 0 6px 12px 0 rgba(26, 26, 26, 0.10);
}

.slide-wrap {
   width: auto;
}
}