@charset 'utf-8';
/*
 * name:top.css
 * author: Nulo Lab
*/

/* visual
===================================*/
/* whatever element ScrollSmoother transforms */
@media only screen and (min-width: 769px) {
  .header-logo{ display: none; }
	.header-fixed .header-logo{ display: block; }
}
/* REQUIRED for ScrollSmoother */
#smooth-wrapper{
  position: fixed;
  inset: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
#smooth-content{
  will-change: transform;
}
body.scroll-lock{ 
    height: 100vh;
    left: 0px;
    overflow-y: scroll;
    position: fixed;
    box-sizing: border-box;
    top: 0px;
    width: 100%; } 
.top-parallax__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: /*calc(var(--vh, 1vh) * 102)*/ 100dvh;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.top-parallax__bg picture {
  position:absolute;
  left:0;
  top:0;
  display: block;
  opacity: 0;
  width: 100%;
  height: 100%;
  inset: 0;
  transition: opacity 0.5s ease;
  will-change: opacity;
}
.top-parallax__bg picture img{
  position:absolute;
  left:0;
  top:0;
  width: 100%;
  height: 100%;
  inset: 0;
  -o-object-fit: cover;
  object-fit: cover;
}
.top-ttl{ font-size: 1em; }
.top-ttl b{ display: block; margin-top: 1.095em; font-size: 4.2em; font-weight: bold; letter-spacing: 0.1em; line-height: calc(54.6/42); }
.top-txt-18 p{ font-size: 1.8em; font-weight: bold; line-height: calc(36/18); }
#header{ visibility: hidden; }
#header.visible{ visibility: visible; }
#visual { display: block; position: relative; width: 100%; height: 100svh; padding: 0; background-color: #0D1116; }
.visual-scene-01{ position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; height: 100%; width: 100%; }
.visual-scene-01 svg{ /*width:min(1000px, 95vw);*/ width: calc(1000/1920 * 100%); height:auto; overflow:visible; }
.visual-scene-02 { position: absolute; left: 0; bottom: 0; /*transform: translateY(-50%);*/ width: 100%; height: 0; background-color: #000; transition: .3s ease; }
.visual-scene-02.is-active{ height: 100svh; }
.visual-scene-03 { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 0; transition: 1.5s cubic-bezier(0.65, 0.05, 0.36, 1); z-index: 2; background:url(../../img/top/fv_bg_02.jpg?v=2) no-repeat center center / cover; overflow: hidden; }
.visual-scene-03.is-active{ height: 100svh; }
.visual-logo{ opacity: 0; width: calc(461/1920 * 100%); position: absolute; left:50%; top:31em; transform: translateX(-50%); z-index: 3; }
.visual--video { visibility: hidden; position: fixed; top: 0; left: 0; width: 100%; height: 100svh; z-index: 1; overflow: hidden; pointer-events: none; background-color: rgba(0,0,0,.5); }
.visual--video video { width: 100%; max-width: 83%; height: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.visual--video.is-active{ visibility: visible; z-index: 9999; pointer-events: inherit; }

.visual--video-bg { position: absolute; top: 0; left: 0; opacity: 0; width: 100%; height: 100svh; z-index: 1; overflow: hidden; pointer-events: none; }
.visual--video-bg video { width: 100vw; height: 100svh; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); object-fit: cover; }
.visual--video-bg.is-active{ visibility: visible; }


.visual--scroll { visibility: hidden; display: flex; flex-wrap: wrap; align-items: center; position: absolute; left: -1.75em; bottom: -1.6em; z-index: 2; transform: rotate(90deg) translate(-90%, 0%); }
.visual--scroll dt { font-family: var(--ff-science-gothic); font-size: 1.3em; line-height: 1; font-weight: 500; color: #fff; letter-spacing: 0.03em; margin-right: 1.53em; }
.visual--scroll dd { display: flex; flex-wrap: wrap; align-items: center; }
.visual--scroll dd span { display: block; width: 1.1em; height: 1em; background: url(../../img/share/arrow-scroll-d.svg) no-repeat; background-size: 100% 100%; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-direction: normal; animation-direction: normal; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: scroll-animate; animation-name: scroll-animate; -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1); animation-timing-function: cubic-bezier(.215,.61,.355,1); transform: rotate(30deg); }
.visual--scroll dd span:not(:last-child) { margin-right: .8em; }
.visual--scroll dd span:nth-of-type(1) { -webkit-animation-delay: .3s; animation-delay: .3s; }
.visual--scroll dd span:nth-of-type(2) { -webkit-animation-delay: .6s; animation-delay: .6s; }
.visual--scroll dd span:nth-of-type(3) { -webkit-animation-delay: .9s; animation-delay: .9s; }
.visual--scroll.is-active{ visibility: visible; }

.visual--svg-txt{ position: absolute; right: 4em; bottom: 5em; z-index: 1; visibility: hidden; }
.visual--svg-txt svg{ width: 82.7em; height: 42.3em; }
.visual--svg-txt.is-active { visibility: visible; }

.visual-play-btn{ padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; font-size: 1em; visibility: hidden; position: absolute; right: 0; bottom:5em; width: 23em; height: 15.5em; z-index: 1; background: none; border: 0; border-radius: 0; cursor: pointer; outline: none; }
.visual-play-btn{
  transition: background-position .3s cubic-bezier(0.45, 0, 0.55, 1);
  clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%);
  background: linear-gradient(
    0deg,
    #006f2e 0%,
    #9ac717 50%,
    #006f2e 100%
  );
  background-size: 100% 200%;
  background-position: 0 100%;
}
.visual-play-btn:hover{ background-position: 0 0; }
.visual-play-btn.is-active{ visibility: visible; }
.visual-play-btn svg{ margin-right: 5em; width: 9.7em; height: auto; }
#PLAY_MOVIE{ font-family: var(--ff-science-gothic); }

.visual-mutebtn{ padding: 0; visibility: hidden; position: absolute; bottom: 4em; left: 9.6em; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; width: 10.5em; height: 3em; font-size: 1em; color: #0D1116; background: #fff; border: 1px solid #fff; border-radius: .5em; cursor: pointer; }
.visual-state{ margin: 0 .5em 0 1em; }
.visual-state-muted{ width: .8em; }
.visual-state-unmuted{ width: .8em; }
.visual-mutebtn.is-unmuted .visual-state-muted{ display: none; }
.visual-mutebtn:not(.is-unmuted) .visual-state-unmuted{ display: none; }
.visual-mutebtn span{ font-size: 1.3em; line-height: calc(19.5/13); }
.visual-mutebtn.is-active{ visibility: visible; }

@supports ((-o-object-fit: cover) or (object-fit: cover)) {
    @-webkit-keyframes scroll-animate { 0% { opacity: 1; } 49.9% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 1; } }
    @keyframes scroll-animate { 0% { opacity: 1; } 49.9% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 1; } }
}
@media only screen and (min-width: 769px) {
  .visual-mutebtn:hover{ background-color: transparent; color: #fff; }
  .visual-mutebtn:hover path{ fill:#fff; }
}
@media only screen and (max-width: 768px) {
  .top-ttl b{ font-size: 2.2em; line-height: calc(33/22); text-align: center; }
  .visual-scene-01 svg{ width: calc(100% - 5em); }
  .visual-scene-03{ background: url(../../img/top/sp_fv_bg.jpg) no-repeat center center / 100% 100vh; }
  .visual--scroll{ display: none; }
  .visual-play-btn{ width: 10.2em; height: 6.8em; bottom:3em; }
  .visual-play-btn svg{ margin-right: 2em; width: 4.3em; height: auto; }
  .visual--video video{ max-width: calc(100% - 4em); }
  .visual--svg-txt{ right: 0.4em; bottom: 4.5em; }
  .visual--svg-txt svg{ width: 24.9em; height: 12.4em; }
  .visual-mutebtn{ width: 7.6em; height: 2.4em; left: 1em; bottom:1em; }
  .visual-mutebtn span{ font-size: 1em; }
  .visual-state{ margin: 0 .3em 0 .8em; }
  .visual-state-muted{ width: .7em; }
  .visual-state-unmuted{ width: .7em; }
}

/* about */
#about{ padding: 13em 0; color:#fff; }
.top-about-ttl{ font-size: 1em; font-family: var(--ff-science-gothic); text-transform: uppercase; }
.top-sub-ttl{ padding: .2em 0; position: relative; display: block; max-width: calc(668/1200 * 100%); font-size: 2.6em; font-family: var(--ff-science-gothic); font-weight: 400; line-height: calc(28.6/26); }
.top-sub-ttl span{ position: relative; z-index: 1; }
.top-sub-ttl:before{
  content: '';
  position: absolute;
  top:50%;
  right: 0;
  transform: translateY(-50%); 
  width: 1028px;
  height: 1.6538em;
  /* Arrow shape */
  clip-path: polygon(
    0% 0%,
    97% 0%,
    100% 50%,
    97% 100%,
    0% 100%
  );
  z-index: 1;
  
}
.top-sub-ttl.bg-yellow:before{ background: #f0e900; mix-blend-mode: overlay; }

.top-sub-ttl.bg-blue:before{ background: linear-gradient(90deg, #254285 0%, #254285 20.33%, #0082c7 66.91%, #0082c7 100%); }
.top-sub-ttl.bg-sea-blue:before{background: linear-gradient(90deg, #003842 27%, #28b28d 60%);}
.top-sub-ttl.bg-brown:before{background: linear-gradient(90deg, #231815 30%, #8d8d8e 75%); }
.top-about-ttl b{ display: block; font-family: var(--ff-science-gothic); font-size: 5em; font-weight: 400; line-height: calc(55/50); }
.top-vision .top-sub-ttl{ margin-bottom: 1.2692em; }
.top-vision-an-txt{ margin-top: 2em; }
.top-vision-an-txt p{ font-size: 2.4em; font-weight: bold; line-height: calc(52/24); }
.top-vision-an-txt span {
  display: block;
  width: fit-content;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg, #fff 50%, #ffffff4d 50.1%);
  background-position: 100% 0%;
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}

.top-concept{ position: relative; padding-top: 8.5em; background: transparent; overflow: hidden;}
.top-concept--black{ position: absolute; left: 0; top:calc(100% - 50em); width: 100%; height: 100em; background: #0D1116; mix-blend-mode: soft-light; pointer-events: none; }
.top-concept--black.safari{ opacity: .3; }
.top-concept p{ font-size:1.8em; font-weight:bold; line-height: calc(30.6/18); }
.top-concept-desc{ position: relative; z-index: 1; }
.top-concept-desc .top-about-ttl{ margin-bottom: 3.4em; }

/* hub */
.top-concept-column{
  padding-top: 7.5em;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
/* .top-concept-column:before{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; mix-blend-mode: hard-light; background: #0D1116; z-index: ; } */
.top-concept-column__logo{ width: 30em; margin: 0 auto; }

.top-concept-column__titles{ margin-top: 5.5em; position: relative; z-index: 1; background-color: transparent; mix-blend-mode: hard-light; }
.top-concept-column__titles::before{ content: ''; position: absolute; top:-0.5em; left: 0; height: calc(100% + 1em); width: 100%; background: #8aba3c; mix-blend-mode: hard-light; }
.top-concept-column__titles::after{ content: ''; position: absolute; top:0; left: 0; height: 100%; width: 100%; background: #0D1116;  }
.top-concept-column__titlesTrack{ position: relative; z-index: 1; display: flex; flex-wrap: nowrap; align-items: center; height: 7em;}
.top-concept-column__titleSlot{ width: 100%; flex-shrink: 0; text-align: center; }
.top-concept-column__title{ display: inline-flex; padding: 0 1.7307em; font-size: 2.6em; font-weight: 400; font-family: var(--ff-science-gothic); text-transform: uppercase; line-height: calc(28.6/26); color:#fff; text-align: center; background: url(../../img/share/green_arrow_left.svg) no-repeat 0 center / .9376em auto, url(../../img/share/green_arrow_right.svg) no-repeat right center / .9376em auto; }

.top-concept-column__stage{ padding-top: 4em; position: relative; height: 50em; overflow: hidden; margin-top: 0.5em; }
/* .top-concept-column__stage:before{content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: #0D1116; mix-blend-mode: soft-light; } */
.top-concept-column__panels{ position: relative; }
.top-concept-column__panel {
  position: relative;
  height: 46em; /* same as stage height */
}
.top-concept--desc{ text-align: center; }
.top-concept--desc h3{ margin-bottom: .625em; font-size: 3.2em; font-weight: bold; line-height: calc(48/32);  }
.top-concept--desc p{ font-size: 1.8em; font-weight: bold; line-height: calc(30.6/18); }

@media only screen and (min-width: 769px) {
  .top-vision-an-txt h3{ margin: .7894em 0; font-size: 3.8em; font-weight: bold; line-height: calc(52/38); }
  .top-concept--desc.col-4{ position: absolute; left: 50%; top: 0; transform: translateX(-50%); }
  .top-concept-list { display:flex; flex-wrap:wrap; margin: 0 auto; }
  .top-concept-list li img{ width: 33.2em; }
  .top-concept-list.col-4 { max-width: 120em; }
  .top-concept-list.col-4 li{ width:50%; }
  .top-concept-list.col-4 li:nth-child(2n+2) { text-align: right; }
  .top-concept-list.col-4 li:not(:nth-child(-n+2)){ margin-top: 1.4em; }
  .top-concept-list.col-4 li:nth-child(3n){ padding-left: 9em; }
  .top-concept-list.col-4 li:nth-child(4n){ padding-right: 9em; }
  .top-concept-list.col-2{ margin-top: 6.5em; max-width: 69.4em; }
  .top-concept-list.col-2 li{ width: 50%; }
  .top-concept-list.col-2 li:nth-child(2n+2){ text-align: right; }
  .top-concept-list.col-3{ margin-top: 6.5em; max-width: 107.4em; }
  .top-concept-list.col-3 li{ width: 33.33%; }
  .top-concept-list.col-3 li:nth-child(2n+2){ text-align: center; }
  .top-concept-list.col-3 li:nth-child(2n+3){ text-align: right; }
}
@media only screen and (max-width: 768px) {
  #about{ padding:3em 0; }
  .top-sub-ttl{ max-width: 100%; font-size: 1.8em; line-height: calc(23.4/18); }
  .top-sub-ttl:before{ height: 1.6666em; width: calc(100% + 2.5em); clip-path: polygon(0% 0%, 95.5% 0%, 100% 50%, 95.5% 100%, 0% 100%); }
  .top-sub-ttl.bg-brown:before{  background-color:  linear-gradient(90deg,#231815 30%, #8d8d8e 75%);}
  .top-about-ttl b{ font-size: 2.8em; line-height: calc(33/28); }
  .top-vision-an-txt p{ font-size: 1.6em; line-height: calc(32/16); }
  .top-vision-an-txt h3{ font-size: 1em; margin: 3.3em 0; }
  .top-vision-an-txt h3 .txt-en{ font-size: 2.2em; line-height: calc(30/22); }
  .top-vision-an-txt h3 .txt-ja{ font-size: 1.9em; line-height: calc(30/19); }

  .top-concept{ padding-top: 6em; }
  .top-concept p{ font-size: 1.6em; line-height: calc(27.2/16); text-align: left; }
  .top-concept-desc .top-about-ttl{ margin-bottom: 1.5em; }
  .top-concept-column{ /*padding-top: 4.5em;*/ padding-top: 6em; }
  .top-concept-column__logo{ width: 14.6em; }

  .top-concept-column__titles{ margin-top: 3.5em; }
  .top-concept-column__title{ font-size: 2em; padding: 0 1.5em; }
  .top-concept-column__titlesTrack{ height: 5.4em; }
  .top-concept-column__titles::before{ height: calc(100% + .6em); top: -.3em; }
  .top-concept-column__panel{ padding: 0 2.5em; }
  .top-concept--desc{ margin-bottom: 5em; }
  .top-concept--desc h3{ font-size: 2.2em; line-height: calc(33/22); }
  .top-concept--black{ top:44em; }
  .top-concept-column__stage{ padding-top: 3em; height: 45em; }
  .top-concept-column__panel{ height: 42em; }
  .top-concept-column__panel .splide__pagination{ bottom:-2.6em; }
  .top-concept-column__panel .splide__pagination__page{ background: #fff; opacity: .5; }
  .top-concept-column__panel .splide__pagination__page.is-active{ opacity: 1; transition: none; transform: none; } 
}

.top__titles{ font-size: 1em; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; position: relative; height: 7em; }
.top__titles::before{ content: ''; position: absolute; top:-0.5em; left: 0; height: calc(100% + 1em); width: 100%; background: #8aba3c; mix-blend-mode: hard-light; }
.top__titles::after{ content: ''; position: absolute; top:0; left: 0; height: 100%; width: 100%; background: #0D1116;  }
.top__titles span{ font-size: 2.6em; font-weight: 400; font-family: var(--ff-science-gothic); color:#fff; z-index: 1; text-transform: uppercase; }
@media only screen and (max-width: 768px) {
  .top__titles{ height: 5.2em; }
  .top__titles::before{ top: -0.3em; height: calc(100% + .6em); }
}

.top-movie-play{ margin-top: 5em; width: 100%; height: 67.5em;}
.top-concept-movie__thumb{ margin-top: 5em; border-radius: .5em; overflow: hidden; cursor: pointer; }
.top-concept-movie__btn{
  background: linear-gradient(
    0deg,
    #006f2e 0%,
    #9ac717 50%,
    #006f2e 100%
  );
}
.top-concept-movie__btn{ z-index: 1; transition: background-position .3s cubic-bezier(0.45, 0, 0.55, 1); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 27.1em; height: 15.1em; font-size: 1em; background-position: 0 80%; clip-path: polygon(20% 0%,80% 0%,100% 50%,80% 100%,20% 100%,0% 50%); background-size: 100% 200%; border:0; border-radius: 0; outline: none; cursor: pointer; }
.top-concept-movie__btn svg{ width: 9.7em; height: 11em; }


@media only screen and (min-width: 769px) {
  .top-concept-movie__thumb{ position: relative; width: 100%; height: 67.5em; }
.top-concept-movie__pht{ transition: transform .35s ease; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); }
.top-concept-movie__thumb:hover .top-concept-movie__btn{ background-position: 0 0; }
.top-concept-movie__thumb:hover .top-concept-movie__pht{ transform: translate(-50%, -50%) scale(1.1);}

}
@media only screen and (max-width: 768px) {
  #movie{ padding-top: 2em; }
  #movie .wrap{ padding: 0; }
  .top-movie-play{ margin-top: 3em; height: 58.933vw; }
  .top-concept-movie__thumb{ margin-top: 3em; border-radius: 0; }
  .top-concept-movie__btn{ width: 17.2em; height: 9.6em; }
  .top-concept-movie__btn svg{ width: 6.1em; height: 6.7em; }
}

/* news */
#news{ padding: 13em 0 14em; }

.top-news__head{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.top-news__title{
  font-size: 5em;
  font-family: var(--ff-science-gothic);
  font-weight: 400;
  line-height: calc(55/50);
}

.top-news__arrorw{
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap:2.5em;
  
}
.top-news__custom-arrow{
  width: 6em;
  height: 6em;
  border:1px solid #fff;
  border-radius: 50pc;
  overflow: hidden;
  background-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  outline: none;
  transition: .2s ease;
  font-size: 1em;
}
.top-news__custom-arrow:not(.is-disabled){ cursor: pointer; }
.top-news__custom-arrow svg{ width: 1.8em; height: 1.2em; }
.top-news__custom-arrow.is-disabled{ border-color: #84888b; pointer-events: none;}
.top-news__custom-arrow.is-disabled path{ fill:#84888b; transition: .2s ease; }


/* splide spacing */
.top-news__splide{
  margin-top: 4em;
}

.top-news__splide .splide__track{
  overflow: visible; /* show a bit of the next slide like your screenshot */
}

.top-news__splide .splide__slide{
  /* padding-right: 4em;  */
}

.top-news-card{
  background: transparent;
}

.top-news-card__link{
  text-decoration: none;
  color: inherit;
  display: block;
}

.top-news-card__thumb{
  position: relative;
  border-radius: .5em;
  overflow: hidden;
  height: 26em;
}
.top-news-card__thumb.sample-img::before{ 
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #5c5c5b;
  border-radius: .5em;
  background-color: transparent;
  pointer-events: none;
  z-index: 1;
}
.top-news-card__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform .35s ease;
}
.top-news-card__link:hover .top-news-card__thumb img{
  transform: scale(1.1);
}

.top-news-card__meta{
  margin-top: 2em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
}

.top-news-card__date{
  font-size: 1.4em;
  font-family: var(--ff-science-gothic);
  font-weight: 400;
  line-height: calc(15.4/14);
  color: #84888b;
}


.top-news-card__tag {
  position: relative;
  height: 2em;
  min-width: 11.3em;
  padding: 0 1.3em;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #84888b;
  background: url(../../img/share/cat_border.png) no-repeat 0 0 / 100% 100%;
}

/* .top-news-card__tag::after {
  content: "";
  position: absolute;
  left: 0;
  top:0;
  background: #0D1116;
  width: 100%;
  height: 100%;
  clip-path: polygon(
    10px 0%,
    calc(100% - 10px) 0%,
    100% 50%,
    calc(100% - 10px) 100%,
    10px 100%,
    0% 50%
  );
  z-index: -1;
}
.top-news-card__tag::before {
  content: "";
  position: absolute;
  left: -1px;
  top:-1px;
  background: #5c5c5b;
  width: calc(100% + 2px);
  height: calc(100% + 2px);

  clip-path: polygon(
    10px 0%,
    calc(100% - 10px) 0%,
    100% 50%,
    calc(100% - 10px) 100%,
    10px 100%,
    0% 50%
  );
  z-index: -2;
} */

.top-news-card__tag span {
  position: relative;
  z-index: 1;
  font-family: "Noto Sans", sans-serif;
  font-size: 1.3em;
  font-weight: bold;
  line-height: 1;
}

.top-news-card__ttl{
  margin-top: .5em;
  font-size: 1.6em;
  line-height: calc(27.2/16);
  color: #fff;
  font-weight: bold;
}

/* bottom divider + button */
.top-news__foot{
  margin-top: 4.5em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.top-news__slider-progress {
  width: 82.5em;
  height: 2px;
  background: #84888b;
  border-radius: 2px;
}
.top-news__slider-progress-bar {
  position: relative;
  top:-1px;
  background: #fff;
  height: 4px;
  transition: width 400ms ease;
  width: 0;
  border-radius: 2px;
}

@media only screen and (min-width: 769px) {
  .top-news__custom-arrow:not(.is-disabled):hover{ background-color: #fff; }
  .top-news__custom-arrow:not(.is-disabled):hover path{ fill: #0D1116; }
}

@media only screen and (max-width: 768px) {
  #news{ padding: 3em 0 6em; }
  .top-news__title{ font-size: 2.8em; line-height: calc(33/28); }
  .top-news__arrorw{ gap: 1.5em; }
  .top-news__custom-arrow{ width: 4em; height: 4em; }
  .top-news__splide{ margin-top: 1.5em; }
  /* .top-news__splide .splide__slide{ padding-right: 2em; } */
  #newsSplide .splide__slide {
    width: 26em !important;
  }
  .top-news-card__date{ font-size: 1.1em; }
  .top-news-card__tag{ height: 1.9em; min-width: 9.2em; }
  .top-news-card__tag span{ font-size: 1em; }
  .top-news-card__ttl{ margin-top: .7142em; font-size: 1.4em; line-height: calc(21/14); }
  .top-news-card__thumb{ height: 16.8em; }
  .top-news__foot{ margin-top: 4em; flex-direction: column; align-items: flex-end; }
  .top-news__slider-progress{ width: 100%; margin-bottom: 3em; }
  .top-news__more{ width: 13.8em; height: 4em; margin: 0; }
}

/* area */
#area{ padding: 13em 0 4.5em; }
#area .wrap{ z-index: 1; }
.top-area__desc{ position: relative; }
.top-area__desc p{ max-width: 39em; }
.top-area__desc .top-ttl{ margin-bottom:3em; }
.top-area__desc .btn-01{ margin-top: 4.5em; }
.top-area-block{ position:relative; padding: 8em 0; margin-top: 8em; }
.top-area-block::before{ content: ''; position: absolute; top:0; height: 100%; width: 100%; background-color: #f0e900; mix-blend-mode: overlay; z-index: 1; opacity: .1; }
.top-area-block.is-active::before{ opacity: 1; animation: backgroundFade .5s; }
.top-area-logos{ position:relative; display: flex; flex-wrap: wrap; justify-content: space-between; }
.top-area-logo{ position: relative; }
.top-area-logo:nth-child(1){ width:45.6em }
.top-area-logo:nth-child(2){ width:13.1em }
.top-area-logo:nth-child(3){ width:26.4em }
.top-area-logo:not(:nth-child(-n+1))::before{ content: ''; position: absolute; background:url(../../img/share/cros.svg) no-repeat center / contain; }

@media only screen and (min-width: 769px) {
  .top-area--shinoi{ width: 22.5em; position: absolute; right: 0; top: 10.6em; }
  .top-area-logo:not(:nth-child(-n+1))::before{ width: 3.7em; height: 5em; left: -10.2em; top:50%; transform: translateY(-50%); }
}
@media only screen and (max-width: 768px) {
  #area{ padding:3em 0 8em; }
  .top-area--shinoi{ margin: 3em auto 0; width: 11.9em; }
  .top-area__desc .top-ttl{ margin-bottom: 1.3em; }
  .top-area__desc p{ margin: 0 auto; max-width: 18.75em; font-size: 1.6em; line-height: calc(27.2/16); }
  .top-area__desc .btn-01{ margin-top: 3.5em; }
  .top-area-block{ padding: 3em 0; margin-top: 5em; }
  
  .top-area-logos{ flex-direction: column; align-items: center; }
  .top-area-logo:not(:nth-child(-n+1))::before{ width: 2.1em; height: 2.9em; top:-4em; left: 50%; transform: translateX(-50%); }
  .top-area-logo+.top-area-logo{ margin-top: 5em; }
  .top-area-logo:nth-child(1){ width: 26em; }
  .top-area-logo:nth-child(2){ width: 7.5em; }
  .top-area-logo:nth-child(3){ width: 15em; }
}

.top-gallery{ position: relative; margin-top:5.5em; }
.top-gallery-card{ height: 100%; display: block; border-radius: .5em; overflow: hidden; background-color: #003C56; }
.top-gallery-card__thumb{
  overflow: hidden;
  height: 19.3em;
  width: 100%;
}
.top-gallery-card__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform .35s ease;
}
/* .top-gallery-card:hover .top-gallery-card__thumb img{
  transform: scale(1.1);
} */
.top-gallery-card__cap{ padding: .5714em 1.071em; font-size: 1.4em; font-weight: 400; line-height: calc(23.8/14); }
.top-gallery-card__cap.small{ font-size: 1.25em; }
.top-gallery-arrow{ position: absolute; top:50%; transform: translateY(-50%); font-size: 1em; width: 6em; height: 6em; padding: 0; background-color: #fff; border-radius: 50%; border:none; outline: none; transition: .2s ease; }
.top-gallery-arrow svg{ width: 1.8em; height: 1.2em; }
.top-gallery-arrow path{ transition: .2s ease; }
.top-gallery-arrow.is-disabled{ pointer-events: none; opacity: .3; }
.top-gallery-arrow:not(.is-disabled){ cursor: pointer; }
.top-gallery-arrow:not(.is-disabled):hover{ background-color: #0D1116; }
.top-gallery-arrow:not(.is-disabled):hover path{ fill: #fff; }
.top-gallery-arrow--prev{ left: -10em; }
.top-gallery-arrow--next{ right: -10em; }
.top-gallery .splide__pagination{ bottom:-3.5em; }
.top-gallery .splide__pagination__page{ margin: 0 .5em; width: 1em; height: 1em; font-size: 1em; opacity: 1; background: #fff; }
.top-gallery .splide__pagination__page.is-active{ background: #f0e900; transform: none; }

@media only screen and (min-width: 769px) {
  .top-gallery-progress { display: none; }
}

@media only screen and (max-width: 768px) {
  .top-gallery{ margin-top: 3em; }
  #spotSplide .splide__slide{ width: 24em !important; }
  #spotSplide .splide__track{ overflow: visible; }

  .top-gallery-progress {
    margin-top: 2em;
    width: 100%;
    height: 3px;
    background: #84888b;
    border-radius: 3px;
  }
  .top-gallery-progress-bar {
    position: relative;
    top:0;
    background: #fff;
    height: 3px;
    transition: width 400ms ease;
    width: 0;
    border-radius: 3px;
  }
  .top-gallery-card__cap{ padding: .6em; }
  .top-gallery-card__thumb{ height: 16.7em; }
}

#interview{ margin-top: 5em; }
#innovation{ padding: 13em 0; }
#challenger{ padding: 13em 0; }
#experience{ padding: 13em 0 0; }

@media only screen and (max-width: 768px) {
  #innovation{ padding: 3em 0 8em; }
  #challenger{ padding: 3em 0 8em; }
  #experience{ padding: 3em 0; }
}

.top-experience__lists{ margin-top: 6em; display: flex; flex-wrap: wrap; gap: 5.5em; }
.top-experience__list{ flex: 1; text-align: center; }
.top-experience__list--ttl{margin-bottom: 1.133em; font-size: 3em; font-weight: 400; font-family: var(--ff-science-gothic); line-height: calc(32.6/30); color: #fff; }
.top-experience__list--thumb{ margin-bottom:3em; border-radius: .5em; overflow: hidden; }
.top-experience__list--txt{ padding-bottom: 1.25em; min-height:9.375em; font-size: 1.6em; text-align: left; line-height: calc(27.2/16); }

@media only screen and (max-width: 768px) {
  .top-experience__lists{ margin-top: 5em; gap: 5.5em; flex-direction: column; }
  .top-experience__list--ttl{ font-size: 2em; line-height: calc(22/20); }
  .top-experience__list{ width: 100%; }
  .top-experience__list:nth-child(1){order:3;}
  .top-experience__list:nth-child(1) .top-experience__list--txt{margin-bottom: 0;}
  .top-experience__list:nth-child(2){order:1;}
  .top-experience__list:nth-child(3){order:2;}
  .top-experience__list--thumb{ margin-bottom: 2em; }
  .top-experience__list--txt{ min-height: unset; margin-bottom: 0; padding: 0; }
  .top-experience__list .btn-01{ margin-top: 3.7em; }
}

/* @media only screen and (max-width: 1800px) and (min-width: 769px) {
	.overlapping-card,
  .top-experience__lists{font-size: 0.5555vw;}
} */

/* cards */
.overlapping-card {
  width: 100%;
  min-height: 100vh;
  padding-bottom: 1em;
}

.overlapping-card .top__titles{ margin-bottom: 4em; }

.card-wrapper {
  width: 100%;
  perspective: 500px;
  margin-bottom: 13em;
}
.card-wrapper:last-child {
  margin-bottom: 0;
}

.cards {
  width: 130em;
  margin: 0 auto;
  /* padding: 0 2em; */
}

.card {
  padding: 4.5em 0 7em;
  width: 100%;
  min-height: 63.8em;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  overflow: hidden;
}
.card-back {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none; /* usually desired */
  background:#000;
}
.card-interview{ background: linear-gradient(90deg, #006f2e 0%, #9ac717 94.76%, #9ac717 100%); }
.card-innovation{ background: linear-gradient(90deg, #003842 0%, #28b28d 94.76%, #28b28d 100%); }
.card-layout{ display:flex; flex-wrap: wrap; gap:6em 5em; padding-left: 7em; }
.card-layout.layout-3{ gap: 0 5em; }
.card-mt-5{ margin-top: 5em; }

.card-headline-en{ margin-bottom: .9444em; display:block; font-size:1.8em; font-family: var(--ff-science-gothic); color: #f0e900; line-height: calc(21/18); }
.card-ttl{ margin-bottom: 4em; display: flex; flex-wrap: wrap; gap: 0 1em; }
.card-layout.layout-2 .card-ttl{ margin-bottom: 0; }
.card-ttl h3{ font-size: 2.6em; line-height: calc(38/26); }
.card-ttl h3 sub{ display: block; margin-bottom: .1923em; font-size: 0.5em; font-weight: 400; line-height: 1; }
.card-num{ padding: 0 1em; height: 3em; width: 10em; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: space-between; background:url(../../img/top/black_bg_arrow_right.png) no-repeat right center / auto 100%; }
.card-num span{ font-size: 1.8em; line-height: 1; font-family: var(--ff-science-gothic); }
.card-num i{ width: 2.9em; height: 1.4em; }
.card-num svg{ width: 100%; height: 100%; }
.card-layout.layout-2 .card-num path{ fill: #28B28D; }
.card-thumb{ border-radius: .5em 0 0 .5em; overflow: hidden; }
.card-thumb.is_have_profile{ position: relative; padding-bottom: 6em; }
.card-porfile{ position:absolute; left: 0; bottom: 0; width: 100%; max-width: 40.5em; border-bottom:1px solid #fff; transition: .2s ease; }
.card-porfile.is_active{ padding: 1em 2em 2em; color: #0d1116; border:0; background-color: rgba(255,255,255,.9); border-radius: .5em; overflow: hidden; }
.card-porfile dt{ padding: 1em 0; position: relative; display: flex; flex-wrap: wrap; align-items: center; font-family: var(--ff-science-gothic);  }
.card-porfile dt span:first-child{ padding-right: 2.7777em; font-size: 1.8em; font-weight: 400;line-height: 1; background: url(../../img/share/yellow_arrow.svg) no-repeat calc(100% - .5555em) center / 1.5555em auto; } 
.card-porfile.is_active dt span:first-child{ background: url(../../img/share/green_arrow.svg) no-repeat calc(100% - .5555em) center / 1.5555em auto; }
.card-porfile dt span:not(:nth-child(-n+1)){ font-size: 1.6em; font-weight: 300; } 
.card-porfile i{ position: absolute; right: 1em; top: 50%; transform: translateY(-50%); line-height: 1; cursor: pointer; }
.card-porfile i svg{ width: 2em; height: 2em; }
.card-porfile.is_active line[data-name="Line 9744"]{ opacity: 0; }
.card-porfile.is_active i { right: -1em; }
.card-porfile dd{ display: none; min-height: 9em; font-size: 1.3em; line-height: calc(19.5/13); }
.card-desc h4{ margin-bottom: .75em; font-size: 3.2em; font-weight: bold; line-height: calc(48/32); }
.card-desc p{ font-size: 1.6em; font-weight: 400; line-height: calc(27.2/16); }
@media only screen and (min-width: 769px) {
  .card-col-full{ width: 100%; }
  .card-col-left{ /*width: 63.5em;*/ flex: 1; }
  .card-col-right{ width: 54.5em; }
  .card-col-right.w-475em{ width: 47.5em; }
  .card-see-more{ display:none !important; }
  .card-layout.layout-top-gap-4{ gap: 4em 5em; }
}

@media only screen and (max-width: 768px) {
  .cards{ width: calc(100% - 3em); }
  .card-wrapper{ margin-bottom: 2em; }
  .card{ min-height: unset; padding: 3.5em 0 4em; }
  .card-layout{ flex-direction: column; gap: 0; padding: 0 2em; }
  .card-layout.layout-2 .card-col-full{ margin-bottom: 2em; }
  .card-col-left,
  .card-col-right {
    display: contents; /* allow children to be ordered globally */
  }
  .card-headline {
    order: 1;
  }

  .card-thumb {
    order: 2;
    width: 100%;
    margin: 0 auto;
  }
  .card-thumb.sp-20em{ width: 20em; } 
  .card-thumb.sp-252em{ width: 25.2em; }
  .card-thumb img{ border-radius: .5em; overflow: hidden; }
  .card-thumb.is_have_profile img{ display: block; margin: 0 auto; width: 20em; }

  .card-desc {
    margin-top: 4em;
    order: 3;
  }
  .card-desc h4{ margin-bottom: .58333em; font-size: 1.8em; line-height: calc(27/18); }
  .card-desc p{ font-size: 1.6em; line-height: calc(27.2/16); }
  .card-desc p:not(.is-open){ 
    display: -webkit-box;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .card-headline-en{ font-size: 1.4em;line-height: calc(15.4/14); }
  .card-ttl{ margin-bottom: 2em; }
  .card-ttl h3{ flex:1; margin-bottom: .833em; font-size: 2.2em; line-height: calc(33/22); }
  .card-ttl h3 sub{ font-size: .590em; line-height: calc(19.5/13); }
  .card-num{ padding: 0 .6em; width: 6.5em; height: 2em; }
  .card-num span{ font-size: 1.2em; }
  .card-num i{ width: 1.9em; height: 0.9em; line-height: 1; }
  .card-mt-5{ margin-top: 3.5em; }
  .card-col-full .card-headline{ margin-bottom: 0; }
  .card-porfile dt{ padding: 1.5em 0; }
  .card-porfile dt span:first-child,
  .card-porfile dt span:not(:nth-child(-n+1)){ font-size: 1.3em; }
  .card-porfile dt span:first-child{ background-position: calc(100% - .4615em) center; background-size: 1.384em auto; }
  .card-porfile i svg{ width: 1.6em; height: 1.6em; }

  .card-see-more{ margin-top: .75em; padding: 0; font-size: 1.6em; color:#fff; line-height: calc(27.2/16); background-color: transparent; border:0; border-bottom: 1px solid #fff; outline: none; }
  .card-see-more.is-open{ display: none; }
  .card-see-more span,
  .card-see-more i{ display: inline-block; }
  .card-see-more i{ margin-left: 0.4em; }
  .card-see-more i svg{ width: .625em; height: .625em; }
}

@keyframes backgroundFade {
  0%    { opacity: 0.1; }
  100%  { opacity: 1; }
}