/*=============================================
 * html
 *=============================================*/
html {
   font-size: calc(100vw / 1920 * 10);
}

@media screen and (max-width: 1023px) {
   html {
      font-size: calc(100vw / 750 * 10);
   }
}

@media screen and (max-width: 767px) {
   html {
      font-size: calc(100vw / 375 * 10);
   }
}

/*=============================================
 * body
 *=============================================*/
body {
   background: #fff;
   color: #333;
   font-family: "Noto Sans JP", sans-serif;
   font-weight: 500;
   font-size: 1.5rem;
   line-height: 2;
   letter-spacing: 0.04em;
   min-width: inherit;
   min-height: inherit;
   max-height: 100%;
   word-break: break-word;
}

body.home {
   font-size: 1.7rem;
}

@media screen and (max-width: 1023px) {
   body.home {
      font-size: 1.5rem;
   }
}

@media screen and (max-width: 767px) {
   body.home,
   body {
      font-size: 1.4rem;
   }
}

a {
   text-decoration: none;
   color: inherit;
}

a:hover {
   opacity: 0.6;
   transform: scale(1);
   text-decoration: none;
}

img {
   width: auto;
   vertical-align: middle;
}

.fnt-satoshi {
   font-family: 'Satoshi', sans-serif;
}

.fnt-noto-sans {
   font-family: "Noto Sans JP", sans-serif;
   font-optical-sizing: auto;
   font-style: normal;
}

/*=============================================
 * common
 *=============================================*/
body.home .wrap,
.site-header .wrap,
.site-footer .wrap {
   width: 90%;
   max-width: 152.5rem;
   padding: 0;
   position: relative;
}

.h-18 {
   font-weight: 700;
   font-size: 1.8rem;
   line-height: 1.6;
   letter-spacing: 0.04em;
}

.h-28 {
   font-weight: 700;
   font-size: 2.8rem;
   line-height: 1.6;
   letter-spacing: 0.04em;
}

.h-48 {
   font-weight: 700;
   font-size: 4.8rem;
   line-height: 1.6;
   letter-spacing: 0.04em;
}

.h-60 {
   font-weight: 700;
   font-size: 6.0rem;
   line-height: 1.6;
   letter-spacing: 0.04em;
}

.h-66 {
   font-weight: 700;
   font-size: 6.6rem;
   line-height: 1.6;
   letter-spacing: 0.04em;
}

@media screen and (max-width: 767px) {
   .h-18 {
      font-size: 1.4rem;
   }

   .h-28 {
      font-size: 2.0rem;
   }

   .h-48 {
      font-size: 3.2rem;
   }

   .h-60 {
      font-size: 4rem;
   }

   .h-66 {
      font-size: 4.2rem;
   }
}

.button {
   position: relative;
   text-align: center;
}

.button a {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   gap: 1.5rem;
   width: 35rem;
   height: 7.5rem;
   background-color: #2AA0D0;
   border: 1px solid #005C81;
   font-weight: 700;
   font-size: 2rem;
   line-height: 1.8;
   letter-spacing: 0.1em;
   color: #fff;
   position: relative;
   z-index: 1;
}

.button a:before {
   content: '';
   width: 100%;
   height: 100%;
   background-color: #333;
   position: absolute;
   top: 0;
   left: 0;
   z-index: -1;
   transform: scale(0, 1);
   transform-origin: center left;
   transition: all 0.3s;
   opacity: 0;
}

.button a:after {
   content: '';
   display: none;
   width: 1.2rem;
   height: 1.2rem;
   background: url("../images/index/arrow-right.webp") no-repeat center/100% auto;
}

.button a:hover {
   transform: scale(1);
}

.button a:hover:before {
   transform: scale(1, 1);
   opacity: 1;
}

@media screen and (max-width: 767px) {
   .button a {
      height: 6rem;
      font-size: 1.4rem;
      width: 100%;
   }
}

.cl-blue {
   color: #2AA0D0;
}

.cl-3 {
   color: #333;
}

.cl-5 {
   color: #555;
}

.fw-700 {
   font-weight: 700;
}

/*=============================================
 * header
 *=============================================*/
.site-header {
   align-items: center;
   width: 100%;
   height: 11rem;
   background: transparent;
   position: fixed;
   top: 0;
   z-index: 100;
}
.site-header::before{
   content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
   background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.42));
   -webkit-backdrop-filter:blur(18px) saturate(170%);
   backdrop-filter:blur(18px) saturate(170%);
}
.site-title {
   gap: 3rem;
   margin: 0;
   padding-left: 4.5rem;
}

.site-title img {
   width: auto;
   min-width: inherit;
}

.site-title a {
   width: 7.5rem;
}

.site-title .site-title__catch {
   min-width: inherit;
   font-weight: 500;
   font-size: 1.5rem;
   line-height: 1.27;
   letter-spacing: 0.01em;
   color: #555;
}

.site-title .site-title__catch span {
   font-weight: 700;
   font-size: inherit;
   color: #2FA2D1;
}

.main-navigation {
   padding-top: 0;
}

.main-navigation ul {
   align-items: center;
   margin-right: 0;
}

.main-navigation li {
   font-weight: 700;
   font-size: 1.8rem;
   margin: 0;
}

.main-navigation a {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 11rem;
   color: #333;
   margin-right: 4rem;
}

.main-navigation a[href*="contact"],
.main-navigation a[href*="download"] {
   gap: 0.6rem;
   width: 24rem;
   height: 11rem;
   color: #fff;
   margin-right: 0;
}

.main-navigation a[href*="contact"]:before,
.main-navigation a[href*="download"]:before {
   content: '';
   width: 2rem;
   height: 2rem;
   background: no-repeat center / cover;
   display: block;
}

.main-navigation a[href*="contact"]:hover,
.main-navigation a[href*="download"]:hover {
   transform: scale(1);
   color: #fff;
}

.main-navigation a[href*="contact"] {
   background-color: #838383;
}

.main-navigation a[href*="contact"]:before {
   background-image: url("../images/index/document-icon.webp");
   display: none;
}

.main-navigation a[href*="contact"]:hover {
   background-color: #333;
}

.main-navigation a[href*="download"] {
   background-color: #2AA0D0;
}

.main-navigation a[href*="download"]:before {
   background-image: url("../images/index/contact-icon.webp");
   display: none;
}

.main-navigation a[href*="download"]:hover {
   background-color: #333;
}

.main-navigation .sub-menu a {
   display: block;
   width: auto;
   height: auto;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
   .site-header::before{background:rgba(255,255,255,.92);}
}
@media screen and (max-width: 1023px) {
   .site-header {
      background: transparent;
      height: 7rem;
   }

   .site-header:before {
      content: '';
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.3);
      position: absolute;
      top: 0;
      left: 0;
   }

   .site-title {
      gap: 2rem;
      padding-left: 2rem;
   }

   .site-title a {
      width: 6rem;
   }

   .site-title .site-title__catch {
      font-size: 1.0rem;
   }

   .menu-toggle {
      display: block;
      top: 1rem;
   }

   .main-navigation ul {
      display: flex;
      flex-direction: column;
      gap: 2rem;
      text-align: center;
      margin: auto;
      position: static;
      transform: translate(0);
   }

   .main-navigation a {
      height: auto;
      margin-right: 0;
   }

   .main-navigation a[href*="contact"],
   .main-navigation a[href*="download"] {
      width: 30rem;
      height: 8rem;
   }

   .main-navigation .menu-item-has-children>a {
      display: inline-block;
      position: relative;
      padding: 0 2rem;
      pointer-events: none;
   }

   .main-navigation .menu-item-has-children>a:after {
      content: '';
      width: 1.2rem;
      height: 0.8rem;
      background: url("../images/index/arrow-down.webp") no-repeat center top/100% auto;
      position: absolute;
      top: 1.6rem;
      right: 0;
      transition: all 0.3s;
   }

   .main-navigation .menu-item-has-children .sub-menu {
      display: none;
      position: static;
      opacity: 1;
      visibility: visible;
      transform: scaleY(1);
      float: none;
      padding: 2rem;
   }

   .main-navigation .menu-item-has-children .sub-menu li {
      font-size: 1.4rem;
   }

   .main-navigation .menu-item-has-children .sub-menu li:not(:last-child) {
      padding-bottom: 1rem;
   }

   .main-navigation .menu-item-has-children .sub-menu li a {
      width: auto;
   }

   .main-navigation .menu-item-has-children.active>a:after {
      transform: rotate(-180deg);
   }

   .menu-primary-container {
      display: grid;
      background: #fff;
      color: #333;
      width: 100%;
      height: calc(var(--vh, 1vh) * 100);
      overflow-y: auto;
      position: fixed;
      top: 0;
      left: 120%;
      box-sizing: border-box;
      z-index: -1;
      padding: 8rem 2rem;
      transition: all 0.6s;
   }

   .toggled .menu-primary-container {
      left: 0;
   }

   .toggled .menu-toggle span {
      background-color: #2aa0d0;
   }

   .toggled ul li a {
      color: inherit;
      padding: 0;
   }

   .menu-toggle,
   .main-navigation.toggled ul {
      display: flex;
   }
}

@media screen and (max-width: 767px) {
   .main-navigation ul ul {
      box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
   }

   .main-navigation ul {
      display: flex;
   }

   .main-navigation a {
      margin-right: 0;
   }

   .main-navigation a[href*="contact"],
   .main-navigation a[href*="download"] {
      width: 30rem;
      padding-top: 11px;
      height: 6rem;
      font-size: 1.8rem;
   }
}

@media screen and (min-width: 1024px) {
   .main-navigation .menu-item-has-children>a {
      position: relative;
      padding-right: 2rem;
   }

   .main-navigation .menu-item-has-children>a:after {
      content: '';
      width: 1.2rem;
      height: 0.8rem;
      background: url("../images/index/arrow-down.webp") no-repeat center top/100% auto;
      position: absolute;
      top: 50%;
      right: 0;
      transition: all 0.3s;
      transform: translateY(-50%);
   }

   .main-navigation .menu-item-has-children:hover>a:after {
      transform: translateY(-50%) rotate(-180deg);
   }

   .main-navigation .sub-menu {
      grid-template-columns: repeat(3, minmax(0, 30rem));
      gap: 1rem 3rem;
      padding: 3rem;
   }

   .main-navigation .sub-menu li {
      font-size: 1.6rem;
   }

   .main-navigation .sub-menu a {
      margin-right: 0;
   }
}

/*=============================================
 * footer
 *=============================================*/
footer {
   padding-top: 20rem;
   padding-bottom: 18.5rem;
}

.footer-cta {
   display: block;
   background-color: #838383;
   color: #fff;
   padding: 5rem 0;
}

.footer-cta .wrap {
   display: flex;
   justify-content: space-between;
}

.footer-cta .wrap:before {
   content: '';
   width: 0;
   height: auto;
   border-left: 1px solid #aaa;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 50%;
}

.footer-cta .col {
   width: 58.5rem;
}

.footer-cta .col p {
   margin-bottom: 0;
}

.footer-cta h3 {
   font-weight: 700;
   font-size: 2.2rem;
   line-height: 1.65;
   letter-spacing: 0.02em;
}

.footer-cta .txt {
   font-size: 1.6rem;
   padding-top: 1.6rem;
}

.footer-cta .button {
   padding-top: 5.6rem;
}

.footer-cta .button a {
   background-color: #fff;
   color: #333;
}

.footer-cta .button a:after {
   background-image: url("../images/index/arrow-right-blue.webp");
   border-color: #2AA0D0;
}

.footer-cta .button a:hover {
   color: #fff;
}

.footer-cta .button a:hover:after {
   background-image: url("../images/index/arrow-right.webp");
   border-color: #fff;
}

.footer-banner {
   background: #F9F9F9;
   padding: 9.2rem 0;
   margin-bottom:15rem;
}

.footer-banner .wrap {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 4.6rem;
   list-style: none;
   margin: 0 auto;
}

.footer-nav {
   padding-top: 18rem;
   color: #404040;
}

.site-info {
   color: #404040;
   font-size: 1.4rem;
}

@media screen and (max-width: 1023px) {
   footer {
      padding: 0 0 8.5rem;
   }

   .footer-cta .wrap {
      flex-direction: column;
      gap: 5rem;
   }

   .footer-cta .wrap:before {
      display: none;
   }

   .footer-cta .col {
      width: 100%;
   }

   .footer-cta .col+.col {
      border-top: 1px solid #aaa;
      padding-top: 5rem;
   }

   .footer-cta .button {
      padding-top: 4rem;
   }

   .footer-banner {
      padding: 5rem 0;
   }

   .footer-banner .wrap {
      grid-template-columns: repeat(2, 1fr);
      gap: 2rem;
   }

   .footer-nav__menu {
      padding-left: 1rem;
   }

   .footer-nav__menu li {
      width: calc(100% / 2);
   }
}

@media screen and (max-width: 767px) {
   footer {
      padding-bottom: 3.5rem;
   }

   .footer-cta .wrap {
      gap: 3rem;
   }

   .footer-cta .col+.col {
      padding-top: 3rem;
   }

   .footer-cta .txt {
      font-size: 1.4rem;
   }

   .footer-cta .button {
      padding-top: 2rem;
   }

   .footer-banner {
      padding: 2rem 0;
      margin-bottom: 5rem;
   }

   .footer-banner .wrap {
      gap: 1rem;
   }

   .footer-nav {
      padding-top: 5rem;
   }

   .footer-nav__corp,
   .footer-nav__social,
   .footer-nav__menu {
      margin-bottom: 3rem;
   }

   .footer-nav__menu {
      padding-left: 0;
   }

   .footer-nav__menu li {
      margin-bottom: 1.5rem;
   }
   .site-info {
      font-size: 1rem;
   }
}

/*=============================================
 * main
 *=============================================*/
.site-main p {
   margin-bottom: 0;
}

.page main h2,
.page main h3 {
   margin-top: 0;
   margin-bottom: 0;
}

.page main h2:before {
   display: none;
}

#mv {
   width: 100%;
   height: 100vh;
   min-height: 700px;
   position: relative;
}

#mv video {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   object-fit: cover;
}

#mv .wrap {
   display: flex;
   align-items: center;
   height: 100%;
}

#mv h2 {
   font-weight: 700;
   font-size: 8.2rem;
   line-height: 1.32;
   letter-spacing: 0;
   text-transform: uppercase;
}

#mv .desc {
   font-weight: 700;
   font-size: 2rem;
   line-height: 1.85;
   letter-spacing: 0.15em;
   padding-top: 3.2rem;
}

#mv .feed {
   display: flex;
   align-items: center;
   gap: 2rem;
   width: 100rem;
   font-size: 1.6rem;
   letter-spacing: 0.02em;
   line-height: 1.78;
   position: absolute;
   bottom: 11rem;
   left: 0;
}

#mv .feed .cat {
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #333;
   color: #fff;
   width: 7.6rem;
   font-size: 1.3rem;
   line-height: 2;
}

#mv .feed time {
   width: 9rem;
   text-decoration: underline;
}

#mv .feed .ttl {
   flex: 1;
   text-decoration: underline;
}

#mv .feed .ttl span {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
   display: -webkit-box;
   overflow: hidden;
}

#mv .feed .ttl:hover {
   text-decoration: none;
}

@media screen and (min-width: 768px) and (max-height: 850px) {
   #mv .feed {
      bottom: 3rem;
   }
}

@media screen and (max-width: 1023px) {
   #mv h2 {
      font-size: 5rem;
   }

   #mv .desc {
      font-size: 1.5rem;
   }

   #mv .feed {
      width: 100%;
   }
}

@media screen and (max-width: 767px) {
   #mv {
      min-height: 320px;
   }

   #mv h2 {
      font-size: 2.8rem;
   }

   #mv .desc {
      font-size: 1.2rem;
      padding-top: 2rem;
   }

   #mv .feed {
      flex-wrap: wrap;
      gap: 1rem 2rem;
      bottom: 2rem;
      font-size: 1.4rem;
      line-height: 1.5;
   }

   #mv .feed .cat {
      width: 5rem;
      font-size: 1.2rem;
   }

   #mv .feed .ttl {
      width: 100%;
      flex: inherit;
   }

   #mv .feed .ttl span {
      -webkit-line-clamp: 2;
   }
}

/* MV 粒子アニメーション */
#mv .mv-particles{position:absolute;top:0;right:0;width:42%;height:100%;pointer-events:none;}
#mv .catch{position:relative;z-index:2;}
@media screen and (max-width:767px){
   /* SP：見出しを上に寄せ、空いた下側(NEWSの上)に粒子を表示 */
   #mv .catch{transform:translateY(-14vh);}
   #mv .mv-particles{top:auto;bottom:9rem;width:100%;height:42%;}
}

.m-scroll {
   padding: 12rem 0;
}

@media screen and (max-width: 767px) {
   .m-scroll {
      padding: 5rem 0;
   }
}

.m-scroll_top {
   position: relative;
   z-index: 10;
   width: 100%;
   height: 88px;
   background-image: url("../images/index/loop-img-top-sp.webp");
   background-size: 1908px;
   background-repeat: repeat-x;
   animation: infinity-scroll-right-sp 80s infinite linear 0.5s both;
}

@media screen and (min-width: 768px) {
   .m-scroll_top {
      width: 100%;
      height: 113px;
      background-image: url("../images/index/loop-img-top-pc.webp");
      background-size: 2461px;
      animation: infinity-scroll-right-pc 80s infinite linear 0.5s both;
   }
}

.m-scroll_bottom {
   position: relative;
   z-index: 10;
   width: 100%;
   height: 88px;
   background-image: url("../images/index/loop-img-bottom-sp.webp");
   background-size: 1908px;
   background-repeat: repeat-x;
   animation: infinity-scroll-left-sp 80s infinite linear 0.5s both;
}

@media screen and (min-width: 768px) {
   .m-scroll_bottom {
      width: 100%;
      height: 113px;
      background-image: url("../images/index/loop-img-bottom-pc.webp");
      background-size: 2461px;
      animation: infinity-scroll-left-pc 80s infinite linear 0.5s both;
   }
}

@keyframes infinity-scroll-right-pc {
   0% {
      background-position: 0 0;
   }

   100% {
      background-position: 2461px 0;
   }
}

@keyframes infinity-scroll-right-sp {
   0% {
      background-position: 0 0;
   }

   100% {
      background-position: 1987px 0;
   }
}

@keyframes infinity-scroll-left-pc {
   0% {
      background-position: 0 0;
   }

   100% {
      background-position: -2461px 0;
   }
}

@keyframes infinity-scroll-left-sp {
   0% {
      background-position: 0 0;
   }

   100% {
      background-position: -1987px 0;
   }
}

#our-service {
   background: #F9F9F9;
   margin: 0 7.5rem;
   padding: 12rem 0;
}

#our-service .wrap {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 9.5rem;
}

#our-service h2 {
   flex: 1;
}

#our-service .desc {
   width: 80rem;
}

#our-service .box {
   display: flex;
   flex-wrap: wrap;
   gap: 7.5rem 8rem;
   width: 100%;
}

#our-service .box .col {
   background-color: #fff;
   box-shadow: 0 0 22px 2px rgba(0, 0, 0, 0.03);
}

#our-service .box .col:first-child {
   display: flex;
   gap: 13.9rem;
   width: 100%;
   padding: 5rem 7rem;
}

#our-service .box .col:first-child a {
   width: 65.4rem;
}

#our-service .box .col:first-child a:after {
   top: 2rem;
   right: 0;
}

#our-service .box .col:first-child figure {
   width: 59.2rem;
   margin: 0;
}

#our-service .box .col:not(:first-child) {
   width: calc(50% - 4rem);
}

#our-service .box .col:not(:first-child) a {
   padding: 5rem 7rem;
}

#our-service .box a {
   display: block;
   position: relative;
}

#our-service .box a:after {
   content: '';
   width: 2.8rem;
   height: 1.5rem;
   background: url("../images/index/service-arrow.webp") no-repeat center/cover;
   position: absolute;
   top: 7rem;
   right: 7rem;
   transition: all 0.3s;
}

#our-service .box a:hover:after {
   transform: translateX(5px);
}

#our-service .box h3 {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 0.8rem;
}

#our-service .box h3 .no {
   width: 4rem;
   font-size: 1.5rem;
}

#our-service .box h3 img {
   max-width: 3.5rem;
}

#our-service .box h3 .en {
   font-weight: 700;
   font-size: 3.4rem;
}

#our-service .box h3 .ja {
   width: 100%;
   padding-left: 4.8rem;
}

#our-service .box .txt {
   font-size: 1.6rem;
   line-height: 1.93;
   padding-top: 4.8rem;
}

#our-service .button {
   width: 100%;
}

@media screen and (max-width: 1023px) {
   #our-service {
      margin: 0 2rem;
   }

   #our-service .wrap {
      gap: 2rem;
   }

   #our-service .desc {
      width: 100%;
   }

   #our-service .box {
      flex-direction: column;
      gap: 5rem;
   }

   #our-service .box .col:first-child {
      flex-direction: column;
      gap: 5rem;
   }

   #our-service .box .col:first-child a,
   #our-service .box .col:first-child figure {
      width: 100%;
   }

   #our-service .box .col:not(:first-child) {
      width: 100%;
   }

   #our-service .button {
      padding-top: 3rem;
   }
}

@media screen and (max-width: 767px) {
   #our-service {
      margin: 0;
      padding: 5rem 0;
   }

   #our-service .box {
      gap: 3rem;
      padding-top: 2rem;
   }

   #our-service .box .col:first-child {
      gap: 3rem;
      padding: 0;
   }

   #our-service .box .col:first-child a {
      padding: 3rem 2rem;
   }

   #our-service .box .col:first-child a:after {
      top: 4.2rem;
      right: 2rem;
   }

   #our-service .box .col:not(:first-child) a {
      padding: 3rem 2rem;
   }

   #our-service .box a:after {
      top: 4.2rem;
      right: 2rem;
   }

   #our-service .box h3 {
      gap: 0.8rem;
   }

   #our-service .box h3 .no {
      width: 2.2rem;
   }

   #our-service .box h3 .en {
      font-size: 2.5rem;
      line-height: 1.2;
   }

   #our-service .box h3 .ja {
      padding-left: 3rem;
   }

   #our-service .box .txt {
      font-size: 1.4rem;
      padding-top: 2rem;
   }

   #our-service .button {
      padding-top: 2rem;
   }
}

#case-study {
   padding: 20rem 0;
   overflow: hidden;
}

#case-study .box-1 {
   display: flex;
   align-items: center;
   gap: 5rem;
   padding-bottom: 7.5rem;
}

#case-study h2 {
   flex: 1;
}

#case-study .desc {
   width: 80rem;
}

#case-study .swiper {
   width: calc(50% + 76.25rem);
   margin-right: 0;
   z-index: 0;
   overflow: visible;
}

#case-study .swiper-slide {
   width: 65.6rem;
   background-color: #fff;
   box-shadow: 0 0 22px 2px rgba(0, 0, 0, 0.03);
   margin-right: 6.7rem;
}

#case-study .swiper-slide:after {
   content: '';
   width: 2.8rem;
   height: 1.5rem;
   background: url("../images/index/service-arrow.webp") no-repeat center/cover;
   position: absolute;
   right: 3.5rem;
   bottom: 4.5rem;
}

#case-study .swiper-slide figure {
   width: 100%;
   height: 38.4rem;
   position: relative;
   margin: 0;
}

#case-study .swiper-slide figure .img {
   width: 100%;
   max-width: inherit;
   height: 100%;
   object-fit: cover;
   position: absolute;
   top: 0;
   left: 0;
}

#case-study .swiper-slide figure figcaption {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 23.6rem;
   height: 6.5rem;
   background-color: #fff;
   padding: 0 3.2rem;
   position: absolute;
   bottom: 0;
   left: 0;
}

#case-study .swiper-slide figure figcaption img {
   max-height: 3rem;
}

#case-study .swiper-slide .text {
   padding: 3.2rem 3.5rem 4.5rem;
}

#case-study .swiper-slide .c-name {
   font-size: 1.8rem;
   color: #777;
}

#case-study .swiper-slide h3 {
   margin-top: 1rem;
   font-weight: 700;
   font-size: 2.2rem;
   letter-spacing: 0.04em;
   line-height: 1.8;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   display: -webkit-box;
   overflow: hidden;
}

#case-study .swiper-slide .tag {
   display: inline-block;
   background-color: #F8F8F8;
   border: 1px solid #eee;
   color: #777;
   font-size: 1.6rem;
   margin-top: 2rem;
   padding: 0.15rem 1rem;
}

#case-study .swiper-button-next,
#case-study .swiper-button-prev {
   display: block;
   background: no-repeat center / 1.7rem auto;
   width: 6.4rem;
   height: 6.4rem;
   border-radius: 50%;
   position: static;
   border: 1px solid #2AA0D0;
   margin: 0;
   transition: all 0.3s;
}

#case-study .swiper-button-next svg,
#case-study .swiper-button-prev svg {
   display: none;
}

#case-study .swiper-button-next:hover,
#case-study .swiper-button-prev:hover {
   background-color: #F9F9F9;
}

#case-study .swiper-button-disabled {
   border-color: #B3B3B3;
   opacity: 1;
}

#case-study .swiper-button-next {
   background-image: url("../images/index/arrow-right-blue.webp");
}

#case-study .swiper-button-next.swiper-button-disabled {
   background-image: url("../images/index/arrow-right-grey.webp");
}

#case-study .swiper-button-prev {
   background-image: url("../images/index/arrow-left-blue.webp");
}

#case-study .swiper-button-prev.swiper-button-disabled {
   background-image: url("../images/index/arrow-left-grey.webp");
}

#case-study .swiper-scrollbar {
   width: auto;
   background: #B3B3B3;
   height: 1px;
   border-radius: 0;
   position: static;
   margin-right: 6rem;
   flex: 1;
}

#case-study .swiper-scrollbar-drag {
   background: #333;
}

#case-study .box-2 {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 5rem 1.5rem;
   padding-top: 5rem;
}

#case-study .button {
   width: 100%;
}

@media screen and (max-width: 1023px) {
   #case-study .box-1 {
      flex-direction: column;
      align-items: flex-start;
      gap: 3rem;
   }

   #case-study .desc {
      width: 100%;
   }

   #case-study .swiper {
      width: 95%;
   }

   #case-study .swiper-slide {
      width: 60rem;
      margin-right: 5rem;
   }
}

@media screen and (max-width: 767px) {
   #case-study {
      padding: 5rem 0;
   }

   #case-study .box-1 {
      gap: 2rem;
      padding-bottom: 4rem;
   }

   #case-study .swiper-slide {
      width: 80%;
      margin-right: 5vw;
   }

   #case-study .swiper-slide:after {
      right: 2rem;
      bottom: 2.7rem;
   }

   #case-study .swiper-slide figure {
      height: 25rem;
   }

   #case-study .swiper-slide figure figcaption {
      width: 50%;
      height: 4rem;
      padding: 0 2rem;
   }

   #case-study .swiper-slide .text {
      padding: 2rem;
   }

   #case-study .swiper-slide .c-name {
      font-size: 1.4rem;
   }

   #case-study .swiper-slide .ttl {
      font-size: 1.8rem;
      line-height: 1.5;
   }

   #case-study .swiper-slide .tag {
      font-size: 1.2rem;
   }

   #case-study .swiper-scrollbar {
      margin-right: 0;
   }

   #case-study .swiper-button-next,
   #case-study .swiper-button-prev {
      width: 4.8rem;
      height: 4.8rem;
   }

   #case-study .box-2 {
      gap: 2rem;
      padding-top: 3rem;
   }
}

#news {
   background: #F9F9F9;
   margin: 0 7.5rem;
   padding: 12rem 0;
}

#news .box {
   display: flex;
   align-items: center;
}

#news h2 {
   flex: 1;
}

#news .desc {
   width: 80rem;
}

#news .list-news {
   list-style: none;
   margin: 0;
   padding-top: 5rem;
   line-height: 4.5rem;
}

#news .list-news li {
   display: flex;
   align-items: center;
   gap: 0 4rem;
   border-top: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
   padding: 3.5rem 0;
}

#news .list-news li+li {
   border-top: 0;
}

#news .list-news time {
   font-weight: 500;
   font-size: 1.8rem;
   border-right: 1px solid #ccc;
   padding-right: 4rem;
}

#news .list-news .cat {
   background-color: #fff;
   min-width: 15rem;
   font-weight: 700;
   font-size: 1.6rem;
   text-align: center;
   padding: 0 1rem;
}

#news .list-news .cat:hover {
   background-color: #333;
   color: #fff;
   opacity: 1;
}

#news .list-news .ttl {
   font-weight: 700;
   font-size: 2rem;
   flex: 1;
}

#news .list-news .ttl span {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
   display: -webkit-box;
   overflow: hidden;
}

#news .button {
   padding-top: 8rem;
}

@media screen and (max-width: 1023px) {
   #news {
      margin: 0 2rem;
   }

   #news .box {
      flex-direction: column;
      align-items: flex-start;
      gap: 3rem;
   }

   #news .desc {
      width: 100%;
   }

   #news .list-news li {
      flex-wrap: wrap;
      gap: 1rem 4rem;
   }

   #news .list-news .ttl {
      width: 100%;
      flex: inherit;
   }

   #news .list-news .ttl span {
      -webkit-line-clamp: 2;
   }
}

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

   #news .box {
      gap: 2rem;
   }

   #news .list-news {
      line-height: 1.5;
      padding-top: 3rem;
   }

   #news .list-news li {
      flex-wrap: wrap;
      gap: 1rem 2rem;
      padding: 2rem 0;
   }

   #news .list-news time {
      font-size: 1.4rem;
      padding-right: 2rem;
   }

   #news .list-news .cat {
      min-width: inherit;
      font-size: 1.4rem;
      padding: 0.5rem 1rem;
   }

   #news .list-news .ttl {
      font-size: 1.6rem;
   }

   #news .button {
      padding-top: 4rem;
   }
}

#column {
   padding: 20rem 0;
}

#column .wrap {
   display: flex;
   flex-direction: column;
   justify-content: center;
   width: 138.3rem;
   height: 44rem;
   background: url("../images/index/column-photo.webp") no-repeat center/cover;
   padding: 0 9rem;
}

#column .wrap:after {
   content: '';
   background: url("../images/index/arrow-right-black.webp") no-repeat center/2rem auto;
   width: 5.1rem;
   height: 5.1rem;
   border: 2px solid #333;
   position: absolute;
   top: 50%;
   right: 9rem;
   transform: translateY(-50%);
}

#column h2 {
   display: flex;
   align-items: baseline;
   gap: 3rem;
}

#column .desc {
   width: 102rem;
   font-weight: 700;
   font-size: 1.5rem;
   line-height: 2.05;
   padding-top: 3.2rem;
}

@media screen and (max-width: 1023px) {
   #column .wrap {
      width: 90%;
      padding: 0 4rem;
   }

   #column .wrap:after {
      right: 4rem;
   }

   #column .desc {
      width: 50rem;
   }
}

@media screen and (max-width: 767px) {
   #column {
      padding: 5rem 0;
   }

   #column .wrap {
      width: 100%;
      height: auto;
      padding: 5rem 2rem 5rem;
   }

   #column .wrap:after {
      background: url(../images/index/arrow-right-black.webp) no-repeat center / 1rem auto;
      width: 2.1rem;
      height: 2.1rem;
      top: auto;
      right: 2rem;
      bottom: 2rem;
      transform: translateY(0);
   }

   .footer-nav__corp__img {
      width: 60px;
   }

   #column h2 {
      gap: 1rem;
   }

   #column .desc {
      width: 100%;
      font-size: 0.8rem;
      padding-top: 2rem;
   }
}

#online-seminar {
   background: #F9F9F9;
   margin: 0 7.5rem 20rem;
   padding: 15rem 0;
}

#online-seminar .box-1 {
   display: flex;
   align-items: center;
}

#online-seminar h2 {
   flex: 1;
}

#online-seminar .desc {
   width: 80rem;
}

#online-seminar .tab {
   padding-top: 6rem;
}

#online-seminar .tab-link {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 1rem 5rem;
   font-weight: 700;
   font-size: 2rem;
   line-height: 2;
}

#online-seminar .tab-link p {
   display: inline-block;
   padding: 0.5rem 2.5rem;
   position: relative;
   cursor: pointer;
   transition: all 0.3s;
}

#online-seminar .tab-link p+p:before {
   content: '';
   width: 0;
   height: 60%;
   border-left: 1px solid #ccc;
   position: absolute;
   top: 50%;
   left: -2.5rem;
   transform: translateY(-50%);
   transition: all 0.3s;
}

#online-seminar .tab-link p:hover,
#online-seminar .tab-link p.is-active {
   background-color: #fff;
   opacity: 1;
}

#online-seminar .tab-content {
   padding-top: 8rem;
}

#online-seminar .tab-content>div {
   display: none;
}

#online-seminar .tab-content .is-active {
   display: block;
}

#online-seminar .list {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 6rem;
}

#online-seminar .list .col {
   position: relative;
   padding-top: 1.5rem;
}

#online-seminar .list figure {
   margin: 0;
}

#online-seminar .list figure a {
   display: flex;
   width: 100%;
   height: 25.6rem;
   position: relative;
}

#online-seminar .list figure a img {
   width: 100%;
   max-width: inherit;
   height: 100%;
   object-fit: cover;
   position: absolute;
   top: 0;
   left: 0;
}

#online-seminar .list figure figcaption {
   display: inline-block;
   background-color: #2AA0D0;
   color: #fff;
   font-weight: 700;
   font-size: 1.4rem;
   line-height: 2;
   letter-spacing: 0.015em;
   padding: 0.2rem 1.2rem;
   position: absolute;
   top: 0;
   left: -1rem;
}

#online-seminar .list h3 {
   font-weight: 700;
   font-size: 1.8rem;
   line-height: 1.65;
   padding-top: 2.4rem;
}

#online-seminar .list h3 a {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   display: -webkit-box;
   overflow: hidden;
}

#online-seminar .list .time {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 0 1rem;
   background: url("../images/index/icon-calendar.webp") no-repeat center left/2.4rem auto;
   padding-left: 3rem;
   margin-top: 1.5rem;
   font-size: 1.6rem;
}

#online-seminar .list .tag {
   display: inline-block;
   background-color: #fff;
   border: 1px solid #eee;
   color: #777;
   font-size: 1.6rem;
   line-height: 2;
   margin-top: 2.4rem;
   padding: 0.4rem 2rem;
}

#online-seminar .button {
   padding-top: 6.4rem;
}

@media screen and (max-width: 1023px) {
   #online-seminar {
      margin: 0 2rem;
   }

   #online-seminar .box-1 {
      flex-direction: column;
      align-items: flex-start;
      gap: 3rem;
   }

   #online-seminar .tab-link {
      gap: 2rem;
      font-size: 1.4rem;
   }

   #online-seminar .tab-link p {
      padding: 0.5rem 1.5rem;
   }

   #online-seminar .tab-link p+p:before {
      left: -0.5rem;
   }

   #online-seminar .list {
      grid-template-columns: 1fr;
   }

   #online-seminar .list figure a {
      height: 35rem;
   }
}

@media screen and (max-width: 767px) {
   #online-seminar {
      margin: 0;
      padding: 5rem 0;
   }

   #online-seminar .box-1 {
      gap: 2rem;
   }

   #online-seminar .desc {
      width: 100%;
   }

   #online-seminar .tab {
      padding-top: 3rem;
   }

   #online-seminar .tab-link {
      gap: 1rem 2rem;
      text-align: center;
      font-size: 1.0rem;
      line-height: 1.5;
   }

   #online-seminar .tab-link p {
      width: calc(50% - 1rem);
      padding: 1rem;
   }

   #online-seminar .tab-link p+p:before {
      left: -0.5rem;
   }

   #online-seminar .tab-link p:nth-child(odd):before {
      display: none;
   }

   #online-seminar .tab-content {
      padding-top: 4rem;
   }

   #online-seminar .list {
      gap: 4rem;
   }

   #online-seminar .list figure a {
      height: 18.5rem;
   }

   #online-seminar .list figure figcaption {
      font-size: 1.2rem;
      padding: 0 1rem;
   }

   #online-seminar .list h3 {
      font-size: 1.6rem;
      padding-top: 1rem;
   }

   #online-seminar .list .time {
      background-size: 2rem auto;
      margin-top: 1rem;
      padding-left: 2.5rem;
      font-size: 1.4rem;
   }

   #online-seminar .list .tag {
      font-size: 1.2rem;
      margin-top: 1rem;
      padding: 0.2rem 1rem;
   }

   #online-seminar .button {
      padding-top: 4rem;
   }
}

#recruit {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 20rem;
   background: url("../images/index/recruit-bg.webp") no-repeat center/cover;
   height: 115.4rem;
   overflow: hidden;
}

#recruit .slider {
   display: flex;
   gap: 3.5rem;
   width: 65rem;
}

#recruit .slider .slider-to-top,
#recruit .slider .slider-to-bottom {
   width: calc(50% - 1.75rem);
}

#recruit .slider figure {
   width: 30.6rem;
   margin: 0 0 3rem;
}

#recruit .col {
   width: 68rem;
}

#recruit h2 span {
   display: inline-block;
}

#recruit h2 .en {
   line-height: 1.4;
   text-transform: uppercase;
}

#recruit h2 .ja {
   padding-top: 2.4rem;
}

#recruit .desc {
   line-height: 2.23;
   padding-top: 8rem;
}

#recruit .button {
   padding-top: 7.5rem;
}

@media screen and (max-width: 1023px) {
   #recruit {
      flex-direction: column;
      gap: 5rem;
      position: relative;
      height: auto;
   }

   #recruit .slider {
      width: 80%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 10%;
   }

   #recruit .col {
      width: 100%;
      position: relative;
      background-color: rgba(255, 255, 255, 0.8);
      padding: 12rem 5%;
   }

   #recruit .desc {
      padding-top: 4rem;
   }

   #recruit .button {
      padding-top: 4rem;
   }
}

@media screen and (max-width: 767px) {
   #recruit {
      gap: 2rem;
   }

   #recruit .slider {
      gap: 2rem;
      width: 100%;
      left: 0;
   }

   #recruit .slider .slider-to-top,
   #recruit .slider .slider-to-bottom {
      width: calc(50% - 1rem);
   }

   #recruit .slider figure {
      width: 100%;
      margin-bottom: 2rem;
   }

   #recruit .col {
      padding: 5rem 5%;
   }

   #recruit h2 .en {
      font-size: 3rem;
   }

   #recruit h2 .ja {
      padding-top: 1.5rem;
   }

   #recruit .desc {
      padding-top: 2rem;
   }

   #recruit .button {
      padding-top: 3rem;
   }
}