@charset "UTF-8";
/*======================================
#FV
======================================*/
#FV {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: clamp(520px, 60vh, 760px);
}
/* FV Background ================== */
#FV .fv-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
#FV .fv-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* FV content ================== */
#FV .fv-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
/*======================================
what
/*======================================*/
#what {
  text-align: center;
}
#what p {
  text-align: center;
  line-height: 1.8em;
  letter-spacing: 3px;
}
#what p:not(:last-of-type) {
  margin-bottom: 1.8em;
}
/*======================================
story / program
/*======================================*/
#story, #program {
  position: relative;
  overflow: hidden;
}
#story .wrap, #program .wrap {
  position: relative;
  z-index: 1;
}
#story h2, #program h2, #story h3, #program h3 {
  text-align: center;
}
#story p, #program p {
  line-height: 1.8em;
  letter-spacing: 1px;
}
#story p:not(:last-of-type), #program p:not(:last-of-type) {
  margin-bottom: .7em;
}
#program aside {
  text-align: left;
  font-size: 11px;
}
/*======================================
voice
/*======================================*/
#voice {
  position: relative;
  z-index: 1;
}
#voice .wrap {
  position: relative;
  z-index: 2;
}
#voice .lede h2, #voice .lede h3 {
  text-align: center;
  font-size: 130%;
}
#voice .lede h2 .EN {
  font-size: 150%;
  margin-bottom: .5em;
}
#voice .lede p {
  text-align: center;
  font-size: 90%;
  margin: 1em auto;
}
#voice aside {
  font-size: 11px;
}
/* ------------------------------
  slider-voice
------------------------------ */
#voice .slider-voice .inner {
  /*
  min-height: 265px;
  */
  text-align: justify;
  padding: 1em;
  border-radius: 1em;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow:
    inset 0 1px 0 rgb(var(--white-rgb) / .4), 0 8px 10px rgb(var(--black-rgb) / .3);
}
.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 {
  width: 100%;
  max-width: 90px;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background-color: #ccc;
}
#voice .slider-voice .inner .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#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(--blue) !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(--blue);
  border-left: 1px solid var(--blue);
  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;
  }
}