@charset "UTF-8";
/*======================================
#FV
======================================*/
#FV {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  min-height: 800px;
  background: var(--white);
  isolation: isolate;
}
/* ======================================
   FV Background 
====================================== */
#FV .fv-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
/* 共通 */
#FV .fv-bg__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  will-change: transform, opacity;
}
/* before */
#FV .fv-bg__img--before {
  opacity: 1;
  transform: translateY(4vh) scale(1.15); /* ←最初から余白確保 */
}
/* after */
#FV .fv-bg__img--after {
  opacity: 0;
  transform: translateY(4vh) scale(1.15);
  transition: opacity 2.2s ease 2.5s;
}
#FV.is-phase02 .fv-bg__img--after {
  opacity: 1;
}
@media (min-width:1024px) {
  @keyframes fv-img-zoom {
    from {
      transform: translateY(4vh) scale(1.15);
    }
    to {
      transform: translateY(4vh) scale(1.25);
    }
  }
  #FV .fv-bg__img--before {
    animation: fv-img-zoom 12s linear forwards;
    animation-delay: 1s;
  }
  @keyframes fv-img-drift {
    from {
      transform: translateY(4vh) scale(1.15);
    }
    to {
      transform: translateY(2vh) scale(1.25);
    }
  }
  #FV .fv-bg__img--after {
    animation: fv-img-drift 20s linear forwards;
    animation-delay: 6s;
  }
}
/*
#FV .fv-bg::before, #FV .fv-bg::after {
  content: "";
  position: absolute;
  inset: -12vh -6vw;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  will-change: opacity, transform;
}
#FV .fv-bg::before {
  opacity: 1;
  background-image: url(../img/FV-children-before.jpg);
  transform: translateY(8vh) scale(1);
}
#FV .fv-bg::after {
  opacity: 0;
  background-image: url(../img/FV-children-after.jpg);
  transition: opacity 2.2s ease 2.5s;
}
#FV.is-phase02 .fv-bg::after {
  opacity: 1;
}
*/
/* ------------------------------
  VANTA
------------------------------ */
#fv-vanta {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: plus-lighter;
}
#fv-vanta canvas.vanta-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
  will-change: opacity;
  -webkit-mask-image: radial-gradient(circle at center, transparent 0%, transparent 35%, black 50%, black 100%);
  mask-image: radial-gradient(circle at center, transparent 0%, transparent 35%, black 50%, black 100%);
}
#FV.is-vanta-visible #fv-vanta canvas.vanta-canvas {
  opacity: .5;
}
/* ------------------------------
  phase
------------------------------ */
#FV .phase01, #FV .phase02 {
  position: absolute;
  inset: 15% 0 0 0;
  z-index: 2;
}
/* ------------------------------
  phase01
------------------------------ */
#FV .phase01 .inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
#FV .phase01 .logo-S {
  width: 30%;
  max-width: 130px;
  margin-bottom: 1em;
  opacity: 0;
  animation: logoFadeIn 1.5s ease-out forwards;
  animation-delay: .5s;
}
#FV .phase01 .logo-S a {
  pointer-events: none;
}
#FV .phase01 .type {
  font-size: 120%;
  letter-spacing: 2px;
  opacity: 0;
  animation: typeFadeIn 1.5s ease-out forwards;
  animation-delay: 1s;
}
#FV .phase01 .EN {
  font-weight: 300;
}
@keyframes logoFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes typeFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* ------------------------------
  phase02
------------------------------ */
#FV .phase02 {
  opacity: 0;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity .5s ease;
}
#FV.is-phase02 .phase02 {
  opacity: 1;
  pointer-events: auto;
}
#FV .phase02 .inner {
  text-align: center;
  transform: translateY(11em);
}
#FV .phase02 h1 {
  margin: 0;
  width: 8em;
  font-size: 280%;
  line-height: 1em;
  color: var(--white);
  transform: skewX(-10deg);
}
#FV .phase02 h1 span {
  position: relative;
  display: inline-block;
  padding: 1px 10px 7px 7px;
  overflow: hidden;
}
#FV .phase02 h1 span::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(var(--navy-rgb) / .8);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
  transition-delay: .5s;
}
#FV.is-sweep .phase02 h1 span::before {
  transform: scaleX(1);
}
#FV .phase02 h1 span:nth-of-type(2)::before {
  transition-delay: .75s;
}
#FV .phase02 h1 em {
  color: var(--white);
  transition: color .4s ease;
}
#FV.is-phase02 .phase02 h1 em {
  color: var(--orange);
  transition-delay: 1.5s;
}
/*======================================
mission
/*======================================*/
#mission .title-wrap {
  margin-top: 27vh;
}
#mission h2 .EN {
  font-size: 130%;
  font-weight: 400;
  letter-spacing: 5px;
}
#mission h3 {
  text-align: left;
  font-size: 135%;
  font-weight: 400;
  line-height: 1.4em;
  letter-spacing: 6px;
  margin: .5em auto .5em;
}
#mission .desc {
  margin: 2em auto;
}
#mission .desc p {
  font-size: 110%;
}
#mission aside ul {
  display: block;
  text-align: left;
  font-size: 11px;
}
/* ------------------------------
  photo-spread
------------------------------ */
.photo-spread {
  --wrapScale: 1;
  position: relative;
  width: 100%;
}
@media (max-width: 420px) {
  .photo-spread {
    --wrapScale: 0.95;
    top: -2em;
  }
}
.photo-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  transform: scale(var(--wrapScale));
  transform-origin: left top;
  top: 100%
}
/* ------------------------------
  float animation base
------------------------------ */
@property --fy {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@keyframes floatY {
  0% {
    --fy: 0px;
  }
  25% {
    --fy: var(--ampY, 10px);
  }
  50% {
    --fy: 0px;
  }
  75% {
    --fy: calc(var(--ampY, 10px) * -1);
  }
  100% {
    --fy: 0px;
  }
}
/* ------------------------------
  images (base)
------------------------------ */
.photo-spread img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--w, 40%);
  height: auto;
  box-shadow: 15px 20px 18px rgb(var(--black-rgb) / .3);
  opacity: 0;
  filter: blur(5px);
  transform: translate(-50%, -50%) scale(.6);
  transition:
    opacity .55s ease, transform .85s cubic-bezier(.2, .8, .2, 1), filter .75s ease;
  transition-delay: var(--d, 0ms);
  will-change: transform, opacity, filter;
}
/* ------------------------------
  show state
------------------------------ */
.photo-spread.is-show img {
  opacity: 1;
  filter: blur(0);
  /* 散開中は必ず0（ガクッ防止） */
  --fy: 0px;
  transform:
    translate(calc(-50% + var(--x, 0%)), calc(-50% + var(--y, 0%) + var(--fy))) scale(var(--s, 1)) rotate(var(--r, 0deg));
  animation: floatY var(--durY, 7s) ease-in-out infinite;
  animation-delay: calc(var(--delayY, 0s) + 0.9s);
  animation-fill-mode: both;
}
/* ------------------------------
  individual tuning
------------------------------ */
.photo-spread img:nth-child(1) {
  --x: -12%;
  --y: -49%;
  --w: 45%;
  --d: 0ms;
  z-index: 2;
  --durY: 6.4s;
  --delayY: .1s;
  --ampY: 8px;
}
.photo-spread img:nth-child(2) {
  display: none;
  --x: -108%;
  --y: 34%;
  --w: 32%;
  --d: 80ms;
  z-index: 3;
  --durY: 8.2s;
  --delayY: .6s;
  --ampY: 12px;
}
.photo-spread img:nth-child(3) {
  --x: 70%;
  --y: -75%;
  --w: 45%;
  --d: 10ms;
  --durY: 5.9s;
  --delayY: .3s;
  --ampY: 7px;
}
.photo-spread img:nth-child(4) {
  display: none;
  --x: -10%;
  --y: 80%;
  --w: 45%;
  --d: 200ms;
  z-index: 2;
}
.photo-spread img:nth-child(5) {
  --x: -41%;
  --y: -197%;
  --w: 40%;
  --d: 260ms;
  --durY: 7.4s;
  --delayY: .4s;
  --ampY: 9px;
}
.photo-spread img:nth-child(6) {
  --x: -113%;
  --y: -161%;
  --w: 30%;
  --d: 320ms;
  z-index: 2;
  --durY: 10.2s;
  --delayY: 1.1s;
  --ampY: 13px;
}
.photo-spread img:nth-child(7) {
  display: none;
  --x: 71%;
  --y: -255%;
  --w: 35%;
  --d: 320ms;
  --durY: 8s;
  --delayY: .7s;
  --ampY: 8px;
}
/*======================================
.service
/*======================================*/
#service {
  position: relative;
  overflow: hidden;
}
#service .wrap {
  position: relative;
  z-index: 1;
}
#service .lede {
  text-align: left;
}
#service h3 {
  font-size: 115%;
  line-height: 1.6em;
  font-weight: 500;
  letter-spacing: 3px;
  margin: 1.5em auto 0;
}
#service .desc {
  display: inline-block;
  margin: 2em auto;
}
#service .desc p, #service .desc li {
  font-size: 110%;
  line-height: 1.6em;
}
#service .service-list ul {
  gap: 0 0;
}
#service .service-list li {
  text-align: center;
  flex: 1;
  min-width: 160px;
}
#service .service-list li .img {
  width: 80%;
  max-width: 100px;
  margin: 0 auto 0;
}
#service .service-list li p {
  font-size: 90%;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 1.4em;
}
#service .service-list li p span {
  font-size: 80%;
  font-weight: 400;
}
/* GLOBE background layer */
#service .sec-globe {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
#service #globe-bg {
  position: absolute;
  top: -3%;
  left: 0;
  width: 100vw;
  aspect-ratio: 2 / 1;
  -webkit-mask-image: linear-gradient(to bottom, var(--black) 0%, var(--black) 65%, var(--black-0) 100%);
  mask-image: linear-gradient(to bottom, var(--black) 0%, var(--black) 65%, var(--black-0) 100%);
}
#service #globe-bg canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
@media (max-width: 768px) {
  #service #globe-bg {
    aspect-ratio: auto;
    height: 420px;
  }
}
/*======================================
.media
/*======================================*/
#media .title-wrap h2 {
  font-size: 85%;
}
#media .title-wrap h2 .EN {
  font-size: 140%;
}
#media .media-img {
  gap: 1em;
}
#media .media-img figure {
  flex: 0 0 calc(50% - 0.5em);
  margin: 0;
  padding: 0;
}
#media .media-list {
  text-align: center;
}
#media .archive-list01 ul {
  display: inline-block;
}
#media .media-list li {
  display: inline-block;
  font-size: 120%;
  line-height: 1.7em;
  padding: 0 .5em 0;
}
#media .archive-list01 li .desc {
  flex: none;
  padding: 0;
}
/*======================================
about
/*======================================*/
#about {
  overflow: hidden;
}
#about .lede {
  position: relative;
}
#about h2 {
  font-size: 85%;
}
#about h3 {
  text-align: left;
  font-size: 130%;
  font-weight: 500;
  letter-spacing: 3px;
  margin: 1.5em auto 0;
}
#about h3 + p {
  text-align: left;
  font-size: 120%;
  font-weight: 500;
  letter-spacing: 3px;
  margin: .5em auto;
}
#about .lede::before {
  position: absolute;
  content: "";
  width: 350%;
  height: 350%;
  right: -180%;
  top: -200%;
  z-index: -1;
  background-color: var(--orange);
}
#about .img {
  margin: 2em auto;
}
#about .desc {
  font-size: 100%;
  margin-bottom: 1.5em;
}
#about .about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 5px;
}
#about .item-1 {
  grid-row: 1 / 3;
  grid-column: 1;
}
/ #about .item-2 {
  grid-row: 1;
  grid-column: 2;
}
#about .item-3 {
  grid-row: 2;
  grid-column: 2;
}
#about .img-item {
  overflow: hidden;
}
#about .img-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像が枠にフィット */
}
#about .img-item {
  position: relative;
  opacity: 0;
  will-change: opacity, transform;
  transition-property: opacity, transform;
  transition-duration: .6s, .6s;
  transition-timing-function: ease, ease;
  transition-delay: 0s, 0s;
}
#about .img-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(var(--navy-rgb) / .8);
  mix-blend-mode: difference;
  /* 初期 */
  transform: translate(0, 0);
  opacity: 1;
  /* transform と opacity を分ける */
  transition-property: transform, opacity;
  transition-duration: 2s, 1.5s;
  transition-timing-function:
    cubic-bezier(.05, .9, .2, 1), ease;
  transition-delay: 0s, 0s;
  pointer-events: none;
}
/* 1 */
#about .img-item:nth-of-type(1) {
  transform: translateY(24px);
  transition-delay: 0s, 0s;
}
#about .img-item.is-show:nth-of-type(1)::after {
  transform: translate(0, -110%);
  opacity: 0;
  transition-delay: .3s, .3s;
}
/* 2 */
#about .img-item:nth-of-type(2) {
  transform: translateY(-24px);
  transition-delay: .3s, .3s;
}
#about .img-item.is-show:nth-of-type(2)::after {
  transform: translate(0, 110%);
  opacity: 0;
  transition-delay: .6s, .6s;
}
/* 3 */
#about .img-item:nth-of-type(3) {
  transform: translateX(24px);
  transition-delay: .6s, .6s;
}
#about .img-item.is-show:nth-of-type(3)::after {
  transform: translate(-110%, 0);
  opacity: 0;
  transition-delay: .9s, .9s;
}
#about .img-item.is-show {
  opacity: 1;
  transform: translate(0, 0);
}
/*======================================
.news
/*======================================*/
#news {
  min-height: 730px;
}
#news h2 {
  text-align: center;
  font-size: 200%;
  letter-spacing: 5px;
  margin-bottom: .5em;
}
/* END-query */
/*======================================
voice
/*======================================*/
#voice {
  position: relative;
  z-index: 1;
}
#voice .wrap {
  position: relative;
  z-index: 2;
}
#voice .lede h2 {
  text-align: center;
  font-size: 130%;
}
#voice .lede h2 .EN {
  font-size: 150%;
  margin-bottom: .5em;
}
#voice .lede p {
  text-align: center;
  margin: 1em auto;
}
#voice aside {
  font-size: 11px;
}
/* ------------------------------
  slider-voice
------------------------------ */
#voice .slider-voice .inner {
  min-height: 265px;
  padding: 1em;
  border-radius: 1em;
  background: rgb(var(--white-rgb) / .5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    inset 0 1px 0 rgb(var(--white-rgb) / .4), 0 3px 8px rgb(var(--black-rgb) / .7);
}
.slider-wrap .slick-slide {
  opacity: 0;
  visibility: visible;
  filter: blur(.5px);
  transition: opacity .2s ease, transform .2s ease;
}
.slider-wrap .slick-slide.slick-active, .slider-wrap .slick-active {
  opacity: 1;
  filter: blur(0px);
}
#voice .slider-voice .inner h3 {
  text-align: left;
  font-size: 120%;
  line-height: 1.4em;
  margin-bottom: .5em;
  font-weight: normal;
}
#voice .slider-voice .inner h3 span {
  display: block;
  line-height: 1.2em;
  margin-bottom: .3em;
}
#voice .slider-voice .inner .img {
  overflow: hidden;
  width: 90px;
  height: 90px;
  background-color: #ccc;
}
#voice .slider-voice .inner p {
  text-align: justify;
  margin-top: 1em;
  font-size: 95%;
  line-height: 1.6em;
}
/*======================================
slick
/*======================================*/
/* 初期化前：高さを作らない（空白を出さない） */
.js-slick {
  visibility: hidden;
  opacity: 0;
  height: 0;
  overflow: hidden;
}
/* 初期化後：通常表示 */
.js-slick.slick-initialized {
  visibility: visible;
  opacity: 1;
  height: auto;
  overflow: visible;
  transition: opacity .25s ease;
}
/* ------------------------------
  slide visibility / motion
------------------------------ */
.slick-slide {
  cursor: grab;
  box-shadow: 0 5px 10px rgb(var(--black-rgb) / .8);
}
.slider-voice .slick-track {
  display: flex !important;
  align-items: stretch !important;
}
.slick-list {
  overflow: visible !important;
  overflow-y: hidden !important;
  padding: 1.5em .5em !important;
}
.slick-slide {
  margin: 0 calc(2em/2);
}
.slick-dotted.slick-slider {
  margin-bottom: 0 !important;
}
/* ------------------------------
  dots
------------------------------ */
.slick-dots {
  position: static !important;
  top: 100% !important;
  bottom: auto !important;
  padding: 0 5% !important;
}
.slick-dots li {
  margin: 0 2px !important;
}
.slick-dots li button:before {
  font-size: 12px !important;
  top: 6px;
  color: var(--white) !important;
}
/* ------------------------------
  scrollbar hide
------------------------------ */
.slick-list {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.slick-list::-webkit-scrollbar {
  display: none;
}
/* ------------------------------
  arrows
------------------------------ */
.slick-prev, .slick-next {
  position: absolute;
  display: block;
  font-size: 0;
  line-height: 0;
  padding: 0;
  width: 4vw !important;
  height: 4vw !important;
  top: calc(50% - 2vw) !important;
  z-index: 999;
}
.slick-prev {
  left: auto !important;
  right: -2vw !important;
}
.slick-next {
  right: auto !important;
  left: -2vw !important;
}
.slick-prev:before, .slick-next:before {
  position: absolute;
  display: block;
  content: "" !important;
  width: 4vw !important;
  height: 4vw !important;
  border-top: 1px solid var(--white);
  border-left: 1px solid var(--white);
  opacity: 1;
  transition: all .3s ease;
}
.slick-prev:hover:before, .slick-next:hover:before {
  opacity: .8;
}
.slick-prev:before {
  left: 0;
  transform: rotate(135deg);
}
.slick-next:before {
  right: 0;
  transform: rotate(-45deg);
}
/* ------------------------------
  per section tuning
------------------------------ */
/* service */
#service .slider-contents .inner {
  border-radius: 10px;
  overflow: hidden;
}
#service .slick-list {
  padding: 1.5em .5em !important;
}
#service .slick-prev:before, #service .slick-next:before {
  border-top: 1px solid var(--orange);
  border-left: 1px solid var(--orange);
}
#service .slider-wrap .slick-slide {
  opacity: 1;
  filter: blur(0px);
  visibility: visible;
  transition: opacity .2s ease, transform .2s ease;
}
#service .slider-wrap .slick-slide.slick-active, .slider-wrap .slick-active {
  opacity: 1;
  filter: blur(0px);
}
/* =========================
  Accessibility
  reduce motion
========================= */
@media (prefers-reduced-motion: reduce) {
  .js-type-common, .js-type-common::after {
    animation: none !important;
  }
}
/*======================================
background image classes
/*======================================*/
.dpth-bg-spacer-img {
  background-image: url(../../../img/CMN/bg-office02.jpg);
}