/*                        mv                          */

#mv {
 position: relative;
 margin-top: min(10rem, calc(100vw / 13.66));
 z-index: 1;
}
.mv_video {
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
}
.mv_video::before {
 content: '';
 width: 100%;
 height:  calc(100vh - min(10rem, calc(100vw / 13.66)));
 height: calc(100dvh - min(10rem, calc(100vw / 13.66)));
 background: url(../images/top/mv_thum.webp) no-repeat;
 background-size: cover;
 background-position: center;
 position: fixed;
 top:  min(10rem, calc(100vw / 13.66));
 left: 0;
 z-index: 1;
 transition: .7s;
}
.mv_video.hide::before  {
 opacity: 0;
}
.mv_video video {
 width: 100%;
 height:  calc(100vh - min(10rem, calc(100vw / 13.66)));
 height:  calc(100dvh - min(10rem, calc(100vw / 13.66)));
 object-fit: cover;
 object-position: center;
 position: sticky;
 top: min(10rem, calc(100vw / 13.66));
}
.mv_inner {
 width: 100%;
 box-sizing: border-box;
 padding: min(15.5rem, calc(155vw / 13.66)) 0 min(24rem, calc(240vw / 13.66));
 color: #fff;
 position: relative;
 z-index: 1;
}
.mv_inner::before {
 content: "";
 width: min(0.2rem, calc(2vw / 13.66));
 height: 100%;
 background-color: #ffffff80;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 margin: 0 auto;
 z-index: -1;
 clip-path: inset(0 0 100% 0);
 transition: 3s;
 transition-timing-function: linear;
}
.mv_inner.show::before {
 clip-path: inset(0 );
}


.mv_ttl {
 font-size: 11.4rem;
 line-height: 1.36;
 font-weight: 700;
 margin-bottom: min(30rem, calc(300vw / 13.66));
}
.mv_ttl span {
 display: inline-block;
 transition: .2s;
 transition-timing-function: linear;
 transition-delay: .5s;
 clip-path: inset(0 100% 0 0);
}
.mv_ttl span:nth-of-type(2) {
 transition-delay: .7s;
}
.mv_ttl span:nth-of-type(3) {
 transition: .5s;
 transition-delay: 1.2s;
}
.mv_ttl.show span {
 clip-path: inset(0);
}
.mv_txt {
 font-size: 2.4rem;
 font-weight: 700;
 line-height: 6.75;
 transition: 1s;
 letter-spacing: 0.06em;
}

.mv_img {
 width: min(103.4rem, calc(1034vw / 13.66));
 margin: min(30rem, calc(300vw / 13.66)) auto 0;
 transition: 1s;
}

.section_inner {
 position: relative;
 padding: min(13rem, calc(130vw / 13.66)) 0 min(20rem, calc(200vw / 13.66));
 z-index: 1;
 overflow: hidden;
}
.section_inner::before {
 content: "";
 position: absolute;
 top: 0;
 right: 0;
 z-index: -1;
}
.section_inner::after {
 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 z-index: -1;
}

.section_top {
 width: min(136.6rem, calc(1366vw / 13.66));
 margin: 0 auto;
 display: flex;
 justify-content: space-between;
 align-items: flex-end;
}
.section_ttl {
 width: min(70rem, calc(700vw / 13.66));
 box-sizing: border-box;
 padding-top: min(4rem, calc(40vw / 13.66));
 padding-left: min(9rem, calc(90vw / 13.66));
 position: relative;
 z-index: 1;
}
.en_txt {
 font-size: 14rem;
 font-family: YakuHanJP, "Roboto", sans-serif;
 font-weight: 700;
 line-height: 1;
 position: absolute;
 top: 0;
 left: 0;
 z-index: -1;
}
.section_ttl h2 {
 display: flex;
 align-items: flex-end;
 gap: 0 min(2.5rem, calc(25vw / 13.66));
 font-size: 5rem;
 font-weight: 700;
 line-height: 1.25;
 text-align: left;
}
.section_ttl .bg_txt {
 font-size: 17.2rem;
 line-height: 1;
 letter-spacing: -0.1em;
}

.section_txt {
 width: min(64rem, calc(640vw / 13.66));
 box-sizing: border-box;
 padding-right: min(9rem, calc(90vw / 13.66));
 text-align: right;
 font-size: 2.8rem;
 font-weight: 700;
}

.main_contents {
 position: relative;
}

/*                        company                          */

.company_inner {
 padding-top: min(14rem, calc(140vw / 13.66));
}
.company_inner::before {
 width: 100%;
 height: calc(910vw / 13.66);
 background: url(../images/top/company_bg_top.webp) no-repeat;
 background-size: cover;
}
.company_inner::after {
 width: calc(500vw / 13.66);
 height: calc(500vw / 13.66);
 background: url(../images/top/company_bg_btm.webp) no-repeat;
 background-size: cover;
}
.company_movie {
 width: min(80rem, calc(800vw / 13.66));
 margin: 0 auto min(18.5rem, calc(185vw / 13.66));
 position: relative;
 overflow: hidden;
}

.company_movie img {
 transition: 0.4s;
}
.company_movie button {
 vertical-align: bottom;
 position: relative;
}

.company_movie button svg {
 width: min(18.4rem, calc(184vw / 13.66));
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 left: 0;
 right: 0;
 margin: 0 auto;
 z-index: 1;
}
.company_movie button svg circle{
 stroke-dasharray: 572;
  stroke-dashoffset: 572;
  transform: rotate(-90deg);
  transform-origin: center;

}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
.company_movie button::before {
 content: '';
 width: 100%;
 height: 100%;
 background-color: #000000a6;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 1;
}

.company_movie button::after {
 content: "";
 width: min(5rem, calc(50vw / 13.66));
 height: min(5.4rem, calc(54vw / 13.66));
 background: url(../images/top/movie_icon.webp) no-repeat;
 background-size: cover;
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 left: 0;
 right: 0;
 margin: 0 auto;
 z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
 .company_movie button:where(:any-link, :enabled, summary):hover img {
  transform: scale(1.1);
 }
 .company_movie button:where(:any-link, :enabled, summary):hover circle {
  animation: draw .5s linear forwards;
 }
}

.company_inner .en_txt {
 color: #90d8fc;
}
.company_item {
 width: min(136.6rem, calc(1366vw / 13.66));
 margin: min(11.5rem, calc(115vw / 13.66)) auto 0;
 display: flex;
 justify-content: space-between;
 flex-direction: column;
}
.company_box {
 width: min(83.5rem, calc(835vw / 13.66));
 margin-left: max(-24.5rem, calc(-245vw / 13.66));
}
.company_box:last-of-type {
 margin-left: auto;
 margin-right: max(-24.5rem, calc(-245vw / 13.66));
 margin-top: max(-52.5rem, calc(-525vw / 13.66));
}

.company_box_detail {
 width: fit-content;
 margin-left: auto;
 margin-top: min(4rem, calc(40vw / 13.66));
}
.company_box:last-of-type .company_box_detail {
 margin-left: 0;
}
.company_box_ttl {
 font-size: 4rem;
 font-weight: 700;
 line-height: 1.15;
 opacity: 1;
}
.company_box_ttl span {
 display: inline-block;
 padding: 0 min(0.5rem, calc(5vw / 13.66));
 position: relative;
 z-index: 1;
}
.company_box_ttl span::before {
 content: '';
 width: 100%;
 height: 100%;
 background-color: #90d8fc;
 position: absolute;
 top: 0;
 left: 0;
 z-index: -1;
 clip-path: inset(0 100% 0 0);
 transition: .4s;
 transition-delay: .5s;
}
.scrollin.company_box_ttl span::before {
 clip-path: inset(0);
}
.company_box_txt {
 font-size: 2.1rem;
 font-weight: 500;
 text-align: left;
 margin: min(1rem, calc(10vw / 13.66)) 0 min(2rem, calc(20vw / 13.66));
}

/*                        work                          */

.work_inner::before {
 width: calc(680vw / 13.66);
 height: calc(666vw / 13.66);
 background: url(../images/top/work_bg_top.webp) no-repeat;
 background-size: cover;
}
.work_inner::after {
 width: calc(500vw / 13.66);
 height: calc(500vw / 13.66);
 background: url(../images/top/work_bg_btm.webp) no-repeat;
 background-size: cover;
}

.work_inner .en_txt {
 color: #8ee854;
}
.work_item {
 width: min(136.6rem, calc(1366vw / 13.66));
 margin: min(11.5rem, calc(115vw / 13.66)) auto 0;
 display: flex;
 flex-direction: column;
 gap: min(10rem, calc(100vw / 13.66)) 0;
}
.work_box {
 width: min(157rem, calc(1570vw / 13.66));
 display: flex;
 align-items: flex-end;
 gap: 0 min(4rem, calc(40vw / 13.66));
 margin-left: min(11rem, calc(110vw / 13.66));
}
.work_box:last-of-type {
 margin-left: 0;
 margin-left: max(-21rem, calc(-210vw / 13.66));
}
.work_box_img {
 width: min(100rem, calc(1000vw / 13.66));
}
.work_box_detail {
 width: fit-content;
}

.work_box_ttl {
 font-size: 4rem;
 font-weight: 700;
 line-height: 1.15;
 opacity: 1;
}
.work_box_ttl span {
 display: inline-block;
 padding: 0 min(0.5rem, calc(5vw / 13.66));
 position: relative;
 z-index: 1;
}
.work_box_ttl span::before {
 content: '';
 width: 100%;
 height: 100%;
 background-color: #8ee854;
 position: absolute;
 top: 0;
 left: 0;
 z-index: -1;
 clip-path: inset(0 100% 0 0);
 transition: .4s;
 transition-delay: .5s;
}
.scrollin.work_box_ttl span::before {
 clip-path: inset(0);
}
.work_box_txt {
 font-size: 2.1rem;
 font-weight: 500;
 text-align: left;
 margin: min(1rem, calc(10vw / 13.66)) 0 min(2rem, calc(20vw / 13.66));
}
.work_box:first-of-type .work_box_txt {
 text-align: right;
}
.work_box:first-of-type .btn {
 margin-left: auto;
}

/*                        person                          */

#person {
 position: relative;
}
#person::before {
 content: '';
 width: 100%;
 height: 100%;
 background: url(../images/top/person_bg.webp) no-repeat;
 background-size: cover;
 background-position: center;
 position: absolute;
 top: 0;
 left: 0;
 z-index: -1;
}
.person_inner {
 overflow: hidden;
 position: relative;
}
.person_inner::before,
.person_inner::after {
 content: none;
}

.person_inner .en_txt {
 color: #559bf8;
}

.person_content {
 width: min(136.6rem, calc(1366vw / 13.66));
 margin: 0 auto;
 position: relative;
 z-index: 1;
}
.person_item {
 width: 100vw;
 margin-top: min(7.5rem, calc(75vw / 13.66));
 margin-left: min(10rem, calc(100vw / 13.66));
 overflow: hidden;
}
.person_splide {
 margin: 0 auto;
 box-sizing: border-box;
 padding-bottom: min(10rem, calc(100vw / 13.66));
}
.person_splide .splide__track {
 overflow: visible;
}
.person_slide {
 width: min(36rem, calc(360vw / 13.66)) !important;
 transform: scale(0.85);
 transform-origin: top right;
 margin: 0 auto;
}
.person_slide.is-ready {
  transition: 0.4s;
}

.splide__slide.is-active.person_slide {
 transform: scale(1);
}

.person_slide.is-prev.is-visible {
 opacity: 0;
}

.person_box {
 position: relative;
}

.person_img {
 border-radius: min(2rem, calc(20vw / 13.66));
 overflow: hidden;
 position: relative;
}
.person_img img {
 transition: 0.4s;
}

.person_img::before {
 content: "";
 width: 100%;
 height: min(18.5rem, calc(185vw / 13.66));
 position: absolute;
 bottom: 0;
 left: 0;
 background: #9fd1f4;
 background: linear-gradient(180deg, rgba(159, 209, 244, 0) 0%, rgba(0, 78, 161, 0.6) 100%);
 opacity: 0;
 transition: 0.4s;
 z-index: 1;
}
.person_img::after {
 content: "";
 width: min(2.8rem, calc(28vw / 13.66));
 height: min(1.9rem, calc(19vw / 13.66));
 background: url(../images/common/btn_arrow_w.svg) no-repeat;
 background-size: cover;
 position: absolute;
 bottom: min(2rem, calc(20vw / 13.66));
 right: min(2rem, calc(20vw / 13.66));
 z-index: 2;
 transition: 0.4s;
 opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
 .person_slide a:where(:any-link, :enabled, summary):hover .person_img img {
  transform: scale(1.1);
 }
}
.person_slide.is-active .person_img::before,
.person_slide.is-active .person_img::after {
 opacity: 1;
}
.person_box_type {
 width: fit-content;
 padding: 0 min(2.5rem, calc(25vw / 13.66)) 0 min(1.5rem, calc(15vw / 13.66));
 font-size: 2.2rem;
 font-weight: 700;
 color: #fff;
 line-height: 1.6;
 background: #004ea1;
 background: linear-gradient(90deg, rgba(0, 78, 161, 1) 0%, rgba(159, 209, 244, 1) 100%);
 border-radius: 0 min(0.5rem, calc(5vw / 13.66)) min(0.5rem, calc(5vw / 13.66)) 0;
 position: absolute;
 top: 0;
 left: 0;
 margin-top: min(2rem, calc(20vw / 13.66));
}

.person_box_ttl {
 width: min(31.5rem, calc(315vw / 13.66));
 position: absolute;
 bottom: min(2.5rem, calc(25vw / 13.66));
 left: min(2.5rem, calc(25vw / 13.66));
 font-size: 1.7rem;
 font-weight: 700;
 text-align: justify;
 opacity: 0;
 transition: 0.4s;
 color: #000000;
 z-index: 3;
}
.person_box_ttl span {
 display: inline;
 box-decoration-break: clone;
 -webkit-box-decoration-break: clone;
 background-color: #fff;
 padding: min(0.1rem, calc(1vw / 13.66)) min(1.5rem, calc(15vw / 13.66));
 line-height: 1;
 border-radius: min(0.6rem, calc(6vw / 13.66));
}

.person_slide.is-active.is-visible:not(.splide__slide--clone) .person_box_ttl {
 opacity: 1;
}

.person_box_txt {
 font-size: 1.6rem;
 font-weight: 500;
 line-height: 1.87;
 text-align: left;
 margin-top: min(1.5rem, calc(15vw / 13.66));
 color: #000000;
}

.person_splide .splide__arrows {
 width: min(17rem, calc(170vw / 13.66));
 display: flex;
 justify-content: space-between;
 position: absolute;
 bottom: 0;
 left: min(100rem, calc(1000vw / 13.66));
}

.person_splide .splide__arrow {
 width: min(8.2rem, calc(82vw / 13.66));
 height: min(4.6rem, calc(46vw / 13.66));
 -ms-flex-align: center;
 align-items: center;
 background: transparent;
 border: min(0.1rem, calc(1vw / 13.66)) solid #000000;
 border-radius: 0%;
 cursor: pointer;
 display: -ms-flexbox;
 display: flex;
 -ms-flex-pack: center;
 justify-content: center;
 opacity: 1;
 padding: 0;
 position: relative;
 top: 0;
 transform: none;
 z-index: 1;
 box-sizing: border-box;
 left: 0;
 right: 0;
 border-radius: min(2.5rem, calc(25vw / 13.66));
 transition: 0.4s;
}
@media (hover: hover) and (pointer: fine) {
 .person_splide .splide__arrow:where(:any-link, :enabled, summary):hover {
  background-color: #ffffffb3;
 }
}
.person_splide .splide__arrow::before {
 content: "";
 width: min(2.4rem, calc(24vw / 13.66));
 height: min(1.6rem, calc(16vw / 13.66));
 background: url(../images/common/btn_arrow.svg) no-repeat;
 background-size: cover;
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 right: 0;
 left: 0;
 margin: 0 auto;
}
.person_splide .splide__arrow.splide__arrow--prev::before {
 transform: scale(-1, 1) translateY(-50%);
}
.person_splide .splide__arrow svg {
 display: none;
}
.person_splide .splide__pagination {
 bottom: min(2rem, calc(20vw / 13.66));
 left: min(85rem, calc(850vw / 13.66));
 right: auto;
 padding: 0;
 position: absolute;
 z-index: 1;
}
.person_splide .splide__pagination__page {
 background: transparent;
 border: 0;
 border-radius: 50%;
 display: inline-block;
 height: min(1rem, calc(10vw / 13.66));
 margin: 0 min(0.5rem, calc(5vw / 13.66));
 opacity: 1;
 padding: 0;
 position: relative;
 transition: transform 0.2s linear;
 width: min(1rem, calc(10vw / 13.66));
 border: #000000 solid min(0.1rem, calc(1vw / 13.66));
}
.person_splide .splide__pagination__page.is-active {
 background-color: #fff;
}
.person_splide:not(.is-overflow) .splide__pagination {
 display: flex !important;
}

.person_inner .btn {
 margin: 0 auto;
 width: min(36.6rem, calc(366vw / 13.66));
}
.person_inner .btn a {
 padding: min(0.8rem, calc(8vw / 13.66)) 0;
 padding-left: min(4rem, calc(40vw / 13.66));
 border-radius: min(3.6rem, calc(36vw / 13.66));
 font-size: 2.4rem;
 background-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
 .person_inner .btn a:where(:any-link, :enabled, summary):hover {
  background-color: #ffffffb3;
  opacity: 1;
 }
}

/*                        vision                          */

.vision_inner {
 padding-bottom: min(7.5rem, calc(75vw / 13.66));
}
.vision_inner::before {
 width: calc(680vw / 13.66);
 height: calc(660vw / 13.66);
 background: url(../images/top/vision_bg_top.webp) no-repeat;
 background-size: cover;
}
.vision_inner::after {
 width: calc(500vw / 13.66);
 height: calc(500vw / 13.66);
 background: url(../images/top/vision_bg_btm.webp) no-repeat;
 background-size: cover;
}

.vision_inner .en_txt {
 color: #ffe278;
}

.vision_item {
 width: min(136.6rem, calc(1366vw / 13.66));
 margin: min(7rem, calc(70vw / 13.66)) auto 0;
 padding: min(8rem, calc(80vw / 13.66)) 0;
 position: relative;
 z-index: 1;
}
.vision_bg {
 content: '';
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 0;
 display: none;
}
.vision_bg_01.show {
 background: url(../images/top/vision_img_01.webp) no-repeat;
 background-size: cover;
 display: block;
}
.vision_bg_02 {
  background: url(../images/top/vision_img_02.webp) no-repeat;
 background-size: cover;
}
.vision_bg_03{
  background: url(../images/top/vision_img_03.webp) no-repeat;
 background-size: cover;
}
.vision_menu {
 width: min(117rem, calc(1170vw / 13.66));
 margin: 0 auto;
 position: relative;
 z-index: 5;
}
.vision_menu ul {
 display: flex;
 flex-direction: column;
 gap: min(2.5rem, calc(25vw / 13.66)) 0;
}
.vision_menu li {
 width: 100%;
}
.vision_menu a {
 background-color: #dcdcdc;
 display: flex;
 align-items: center;
 justify-content: space-between;
 box-sizing: border-box;
 padding: min(3.8rem, calc(38vw / 13.66)) min(5rem, calc(50vw / 13.66));
 border-radius: min(3rem, calc(30vw / 13.66));
 transition: 0.4s;
 width: 100%;
 color: #000000;
}
.vision_menu_ttl {
 font-size: 2.8rem;
 font-weight: 700;
}
 .vision_menu_btn  {
 background-color: transparent;
 overflow: hidden;
 z-index: 1;
 width: min(16rem, calc(160vw / 13.66));
 box-sizing: border-box;
 border: solid #000000  min(.1rem, calc(1vw / 13.66));
 border-radius:  min(2.5rem, calc(25vw / 13.66));
 font-size: 1.3rem;
 font-weight: 500;
 letter-spacing: .04em;
 box-sizing: border-box;
 padding:  min(1rem, calc(10vw / 13.66)) 0;
 padding-left:  min(3rem, calc(30vw / 13.66));
 text-align: left;
 color: #231815;
 position: relative;
}
 .vision_menu_btn::before {
 content: "";
 width: 100%;
 height: 100%;
 background: #ffffd4;
 background: linear-gradient(90deg, rgba(255, 255, 212, 1) 0%, rgba(255, 203, 62, 1) 100%);
 transition: 0.4s;
 position: absolute;
 top: 0;
 left: 0;
 z-index: -1;
 opacity: 0;
}
.vision_menu_btn::after {
 content: '';
 width:  min(2.4rem, calc(24vw / 13.66));
 height: min(1.6rem, calc(16vw / 13.66));
 background: url(../images/common/btn_arrow.svg) no-repeat;
 background-size: cover;
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 right:  min(2rem, calc(20vw / 13.66));
}


@media (hover: hover) and (pointer: fine) {
 .vision_menu  a:where(:any-link, :enabled, summary):hover .vision_menu_btn::before{
  opacity: 1;
 }
 .vision_menu  a:where(:any-link, :enabled, summary):hover {
  background-color: #fff;
 }
}


.recruit {
 margin-top: min(15rem, calc(150vw / 13.66));
}
.recruit_ttl {
 font-size: 6.4rem;
 font-weight: 700;
}
.recruit_menu {
 width: min(117rem, calc(1170vw / 13.66));
 margin: min(2rem, calc(20vw / 13.66)) auto 0;
 display: flex;
 justify-content: center;
 border-radius: min(3rem, calc(30vw / 13.66));
 overflow: hidden;
}
.recruit_menu li {
 width: min(58.5rem, calc(585vw / 13.66));
}
.recruit_menu li a {
 text-align: left;
 width: 100%;
 display: block;
 font-size: 2.8rem;
 box-sizing: border-box;
 padding: min(5.2rem, calc(52vw / 13.66)) min(5rem, calc(50vw / 13.66));
 color: #000000;
 background: #70b3ff;
 background: linear-gradient(135deg, rgba(112, 179, 255, 1) 0%, rgba(139, 243, 215, 1) 50%, rgba(255, 235, 164, 1) 100%);
 position: relative;
 font-weight: 700;
}
.recruit_menu li a::after {
 content: "";
 width: min(3.6rem, calc(36vw / 13.66));
 height: min(2.4rem, calc(24vw / 13.66));
 background: url(../images/common/btn_arrow.svg) no-repeat;
 background-size: cover;
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 right: min(5rem, calc(50vw / 13.66));
}

@media (hover: hover) and (pointer: fine) {
 .recruit_menu li a:where(:any-link, :enabled, summary):hover {
  opacity: 0.6;
 }
}

@media screen and (max-width: 767px) {
 #mv {
  margin-top: 5.2rem;
 }
 .mv_inner {
  width: 100%;
  padding:0 0 9rem;
 }
 .mv_video::before {
 height:  calc(100vh - 5.3rem);
 height: calc(100dvh - 5.3rem);
 background: url(../images/top/mv_thum_sp.webp) no-repeat;
 background-size: cover;
 background-position: center;
 top: 5.3rem;
}
.mv_video video {
 height:  calc(100vh - 5.3rem);
 height:  calc(100dvh - 5.3rem);
 top: 5.3rem;
}
 .mv_inner::before {
  width: 0.2rem;
 }

 .mv_ttl {
  font-size: 5.8rem;
  line-height: 1.43;
  text-align: left;
  margin: 0 auto ;
  position: relative;
  height:  calc(100vh - 5.3rem);
 height: calc(100dvh - 5.3rem);
 }
 .mv_ttl p {
  width: fit-content;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  left: 0;
 }
 .mv_txt {
  font-size: 1.7rem;
  line-height: 4;
 }

 .mv_img {
  width: 35.5rem;
  margin-top: 15rem;
 }

 .section_inner {
  padding: 6rem 0 9rem;
 }
 .section_top {
  width: 100%;
  flex-direction: column;
 }
 .section_ttl {
  width: 100%;
  padding-top: 2rem;
  padding-left: 2.5rem;
 }
 .en_txt {
  font-size: 6.5rem;
 }
 .section_ttl h2 {
  gap: 0 0.5rem;
  font-size: 2.5rem;
  text-align: left;
 }
 .section_ttl .bg_txt {
  font-size: 9rem;
 }

 .section_txt {
  width: 100%;
  padding-right: 0;
  padding-left: 2rem;
  margin-top: 1.5rem;
  text-align: left;
  font-size: 1.7rem;
 }

 /*                        company                          */
 .company_inner {
 padding-top: 7rem;
}

 .company_inner::before {
  width: 28rem;
  height: 28rem;
  background: url(../images/top/company_bg_top_sp.webp) no-repeat;
  background-size: cover;
 }
 .company_inner::after {
  width: 100%;
  height: 34.5rem;
  background: url(../images/top/company_bg_btm_sp.webp) no-repeat;
  background-size: cover;
 }
 .company_movie {
  width: 32.5rem;
  margin: 0 auto 8rem;
 }

 .company_movie button svg {
 width:10rem;
}
.company_movie button svg circle{
stroke-dashoffset: 0;

}


.company_movie button::after {
 width: 3.6rem;
 height: 3.9rem;
}


 .company_item {
  width: 100%;
  margin: 3.5rem auto 0;
  flex-direction: column;
 }
 .company_box {
  width: 28.1rem;
  margin-left: 0;
 }
 .company_box:last-of-type {
  padding-top: 4rem;
  margin-left: auto;
  margin-top: 0;
  margin-right: 0;
 }

 .company_box_detail {
  width: fit-content;
  margin-left: 0;
  padding-left: 2.5rem;
  margin-top: 2rem;
 }
 .company_box:last-of-type .company_box_detail {
  margin-left: auto;
  padding-left: 0;
  padding-right: 2.5rem;
 }
 .company_box_ttl {
  font-size: 2.8rem;
  line-height: 1.32;
  text-align: left;
 }
 .company_box_ttl span {
  padding: 0 0.2rem;
  line-height: 1.2;
 }
 .company_box_txt {
  font-size: 1.4rem;
  margin: .5rem 0 1rem;
 }

 /*                        work                          */

 .work_inner::before {
  width: 28rem;
  height: 28rem;
  background: url(../images/top/work_bg_top_sp.webp) no-repeat;
  background-size: cover;
 }
 .work_inner::after {
  width: 100%;
  height: 34.5rem;
  background: url(../images/top/work_bg_btm.webp) no-repeat;
  background-size: cover;
 }

 .work_item {
  width: 100%;
  margin: 4rem auto 0;
  gap: 4rem 0;
 }
 .work_box {
  width: 35rem;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 2rem 0;
  margin-left: auto;
 }
 .work_box:last-of-type {
  justify-content: flex-end;
  flex-direction: column;
  align-items: flex-end;
  margin-left: 0;
 }
 .work_box_img {
  width: 100%;
  margin-left: auto;
 }

 .work_box_ttl {
  font-size: 2.8rem;
  line-height: 1.32;
  text-align: left;
 }
 .work_box_ttl span {
  display: inline-block;
  padding: 0 0.2rem;
  line-height: 1.2;
 }
 .work_box_txt {
  font-size: 1.4rem;
  font-weight: 500;
  text-align: left;
  margin: 1rem 0 1.5rem;
 }
 .work_box:first-of-type .work_box_txt {
  text-align: left;
 }
 .work_box:first-of-type .btn {
  margin-left: 0;
 }

 /*                        person                          */

 #person::before {
 background: url(../images/top/person_bg_sp.webp) no-repeat;
 background-size: cover;
 background-position: center;
}


 .person_content {
  width: 100%;
 }
 .person_item {
  width: 100%;
  margin-top: 4.5rem;
  margin-left: 2.5rem;
 }
 .person_splide {
  padding-bottom: 4.5rem;
 }
 .person_slide {
  width: 24rem !important;
 }

 .person_img {
  border-radius: 1rem;
 }
 .person_img::before {
  height: 11rem;
  transition: 0.4s;
 }
 .person_img::after {
  width: 1.9rem;
  height: 1.3rem;
  bottom: 1rem;
  right: 1rem;
 }
 .person_box_type {
  padding: 0 1rem 0 1rem;
  font-size: 1.4rem;
  line-height: 1.6;
  border-radius: 0 0.5rem 0.5rem 0;
  margin-top: 1rem;
 }

 .person_box_ttl {
  width: 20rem;
  bottom: 1rem;
  left: 1.5rem;
  font-size: 1.3rem;
  line-height: 2.3;
 }
 .person_slide.is-active.is-visible:not(.splide__slide--clone) .person_box_ttl {
  opacity: 1;
 }
 .person_slide.is-active .person_box_ttl {
  opacity: 1;
 }
 .person_box_ttl span {
  padding: 0.2rem 1rem;
  border-radius: 0.4rem;
 }

 .person_box_txt {
  font-size: 1.2rem;
  line-height: 1.5;
  margin-top: 1rem;
 }

 .person_splide .splide__arrows {
  width: 10.4rem;
  left: 15.5rem;
 }

 .person_splide .splide__arrow {
  width: 5rem;
  height: 2.8rem;
  border: 0.1rem solid #000000;
  border-radius: 1.5rem;
 }
 .person_splide .splide__arrow::before {
  width: 1.4rem;
  height: 1rem;
 }
 .person_splide .splide__pagination {
  bottom: 1rem;
  left: 7rem;
 }
 .person_splide .splide__pagination__page {
  height: 0.6rem;
  margin: 0 0.3rem;
  width: 0.6rem;
  border: #000000 solid 0.1rem;
 }

 .person_inner .btn {
  width: 22rem;
 }
 .person_inner .btn a {
  padding: 0.4rem 0;
  padding-left: 2rem;
  border-radius: 2rem;
  font-size: 1.5rem;
  margin-top: 2rem;
 }

 /*                        vision                          */

 .vision_inner {
  padding-bottom: 9rem;
 }
 .vision_inner::before {
  width: 28rem;
  height: 28rem;
  background: url(../images/top/vision_bg_top_sp.webp) no-repeat;
  background-size: cover;
 }
 .vision_inner::after {
  width: 100%;
  height: 34.5rem;
  background: url(../images/top/vision_bg_btm_sp.webp) no-repeat;
  background-size: cover;
 }

 .vision_item {
  width: 100%;
  margin: 4rem auto 0;
  padding: 4.5rem 0;
 }

 .vision_bg_01.show {
 background: url(../images/top/vision_img_01_sp.webp) no-repeat;
 background-size: cover;
 display: block;
}
.vision_bg_02 {
  background: url(../images/top/vision_img_02_sp.webp) no-repeat;
 background-size: cover;
}
.vision_bg_03{
  background: url(../images/top/vision_img_03_sp.webp) no-repeat;
 background-size: cover;
}
 .vision_menu {
  width: 32.5rem;
  margin: 0 auto;
 }
 .vision_menu ul {
  gap: 2.3rem 0;
 }
 .vision_menu a {
  padding: 1.5rem 2.5rem;
  border-radius: 1.5rem;
  height: 10rem;
 }
 .vision_menu_ttl {
  font-size: 1.7rem;
  line-height: 1.76;
  text-align: left;
 }


.vision_menu_btn {
 width:10rem;
 border: solid #000000  .1rem;
 border-radius: 1.5rem;
 font-size: 1rem;
 padding: .3rem 0;
 padding-left:  1.3rem;
}
.vision_menu_btn::after {
width: 1.4rem;
height:1rem;
right: 1rem
}


 .recruit {
  margin-top: 4.5rem;
 }
 .recruit_ttl {
  font-size: 4rem;
 }
 .recruit_menu {
  width: 29.2rem;
  margin: 1.5rem auto 0;
  gap: 2.5rem 0;
  flex-direction: column;
  border-radius: 0;
 }
 .recruit_menu li {
  width: 100%;
 }
 .recruit_menu li a {
  font-size: 1.8rem;
  box-sizing: border-box;
  padding: 2.2rem 2.5rem;
  border-radius: 1.5rem;
 }
 .recruit_menu li a::after {
  width: 1.9rem;
  height: 1.3rem;
  right: 2.5rem;
 }
}


.line {
width:  min(80rem, calc(800vw / 13.66));
height:  min(657.1rem, calc(6571vw / 13.66));
height:auto;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
fill: none;
stroke: url(#main_line);
stroke-miterlimit: 10;
stroke-width: 2px;
pointer-events: none;
aspect-ratio: 800 / 6571;
}

.line_path.is-animate {
  transition: stroke-dashoffset 1.5s linear;
}

@media screen and (max-width: 767px) {

 .line {
  stroke: url(#main_line_sp);
 width: 32.5rem;
 stroke-width: 3px;
 aspect-ratio: 650 / 9339;
 }
 .line_path_sp.is-animate {
  transition: stroke-dashoffset 1.5s linear;
}

}



.modal {
 position: fixed;
 width: 100%;
 height: 100vh;
 top: 0;
 left: 0;
 background-color: #00000080;
 z-index: 99;
 display: none;
}
.modal_bg {
 position: fixed;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
}
.modal_inner {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 left: 0;
 right: 0;
 margin: 0 auto;
  width: min(86rem, calc(860vw / 13.66));
  position: relative;
  z-index: 1;
}
.modal_item {
height: min(48.4rem, calc(484vw / 13.66));
position: relative;
}
.modal_item iframe {
 width: 100%;
 height: 100%;
 border: none;
}
.close_btn {
 width: min(7rem, calc(70vw / 13.66));
 height: min(7rem, calc(70vw / 13.66));
 position: absolute;
 top: max(-7rem, calc(-70vw / 13.66));
 right: 0;
}

.close_btn::before {
 content: "";
 width: 100%;
 height: 0;
 border: min(0.1rem, calc(1vw / 13.66)) solid #fff;
 position: absolute;
 top: min(3.2rem, calc(32vw / 13.66));
 left: 0;
 right: 0;
 margin: 0 auto;
 transform: rotate(45deg);
 box-sizing: border-box;
}
.close_btn::after {
 content: "";
 width: 100%;
 height: 0;
 border: min(0.1rem, calc(1vw / 13.66)) solid #fff;
 position: absolute;
 bottom: min(3.6rem, calc(36vw / 13.66));
 left: 0;
 right: 0;
 margin: 0 auto;
 transform: rotate(-45deg);
 box-sizing: border-box;
}


@media screen and (max-width: 767px) {
.modal_inner {
  width: 100%;
}
.modal_item {
height: 21.1rem;
}
.close_btn {
 width:2.5rem;
 height:2.5rem;
 top: -2.5rem;
}

.close_btn::before {
 border: .1rem solid #fff;
 position: absolute;
 top: 1.1rem;
}
.close_btn::after {
 border: .1rem solid #fff;
 bottom: 1.2rem;
}
}