@charset "UTF-8";
/* --------------------------------------------------------------------------
    Common Layout & Typography
    -------------------------------------------------------------------------- */
.global-contents__inner:has(.s-container){
	width: 100%;
}
.s-container p {
  font-size: 1.5rem;
  line-height: 2.13;
  font-weight: var(--fw-regular);
  font-family: var(--font-ja);
}
@media screen and (max-width: 767px) {
  .s-container p {
    font-size: 1.4rem;
    line-height: 1.85;
  }
  .s-container .s-media-unit__image {
    width: 31rem;
    margin: 0 auto;
  }
}
@media screen and (min-width: 768px) {
  .s-container [class*="s-media-unit--"] {
    display: flex;
    column-gap: 4rem;
  }
  .s-container .s-media-unit--right {
    flex-direction: row;
  }
  .s-container .s-media-unit--left {
    flex-direction: row-reverse;
  }
  .s-container .s-media-unit__image {
    width: 33rem;
  }
}
/* --------------------------------------------------------------------------
  Common Animation
  -------------------------------------------------------------------------- */
.js-fade{
  opacity: 0;
  transition: opacity 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.js-fade.show{
  opacity: 1;
}
/* --------------------------------------------------------------------------
  Section: Main Visual
  -------------------------------------------------------------------------- */
.s-mv {
  position: relative;
}
.s-mv--white {
  color: var(--color-white);
}
.s-mv--black {
  color: var(--color-black);
}
.s-mv--center {
  text-align: center;
}
.s-mv--left {
  text-align: left;
}
.s-mv-unit {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
}
.s-mv.s-mv--center .s-mv-unit {
  left: 50%;
  transform: translate(-50%, -50%);
}
.s-mv__title {
  font-size: 2.6rem;
  line-height: 0.9230769231;
  letter-spacing: .1em;
  font-weight: var(--fw-regular);
  font-family: var(--font-ja);
}
.s-mv__sub-title {
  font-size: 1.4rem;
  line-height: 1.71;
  font-weight: var(--fw-regular);
  font-family: var(--font-ja);
}
@media screen and (min-width: 768px) {
  .s-mv-unit {
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
  }
  .s-mv.s-mv--left .s-mv-unit {
    left: 17rem;
  }
}
@media screen and (max-width: 767px) {
  .s-container p {
    font-size: 1.4rem;
    line-height: 1.85;
  }
  .s-mv__title {
    font-size: 2.2rem;
    line-height: 1.09090909091;
  }
  .s-mv__sub-title {
    font-size: 1rem;
    line-height: 2.4;
  }
}
/* --------------------------------------------------------------------------
  Page: About
  -------------------------------------------------------------------------- */
.s-about-title--large {
  font-size: 2.4rem;
  line-height: 1.58;
  font-weight: var(--fw-regular);
  font-family: var(--font-ja);
}
.s-about-title--medium {
  font-size: 1.8rem;
  line-height: 1.44;
  font-weight: var(--fw-medium);
  font-family: var(--font-ja);
}
.s-about-title--small {
  font-size: 1.5rem;
  line-height: 1.73;
  font-weight: var(--fw-medium);
  font-family: var(--font-ja);
}
@media screen and (max-width: 767px) {
  .s-about-title--large {
    font-size: 1.8rem;
    line-height: 1.55;
    text-align: center;
  }
  .s-about-title--medium {
    font-size: 1.6rem;
    line-height: 1.73;
  }
  .s-about-title--small {
    font-size: 1.4rem;
    line-height: 1.42;
  }
}

/* --------------------------------------------------------------------------
  youtube movie modal setting css
  -------------------------------------------------------------------------- */
/* 1. 基本設定とリセット */
/* モーダル表示時に背景のスクロールを防ぐクラス */
html.js-no-scroll {
  overflow: hidden;
}
/* 2. メインコンテナのスタイリング */
.s-video-modal__container {
  margin: 3.8rem auto 0;
  max-width: 34.1rem;
  width: 100%;
}
/* 3. サムネイルのスタイリング */
.s-video-modal__thumbnail-wrapper {
  position: relative;
  width: 100%;
  border-radius: 0.5rem;
  overflow: hidden;
  cursor: pointer;
}
.s-video-modal__thumbnail-image {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
/* 再生ボタンのオーバーレイ */
.s-video-modal__thumbnail-overlay {
  width: 60rem;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}
.s-video-modal__play-icon {
  width: 6.4rem;
  height: 6.4rem;
}
.s-video-modal__thumbnail-wrapper:hover .s-video-modal__play-icon {
  opacity: 1;
}
.s-video-modal__thumbnail-text {
  margin: 1.9rem 0 0 0;
  text-align: center;
  line-height: 1;
}
/* 4. モーダルのスタイリング */
.s-video-modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--color-text-default);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* アニメーション用の初期状態 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
/* JavaScriptで付与するクラスで表示 */
.s-video-modal__overlay.js-video-modal--active {
  opacity: 1;
  visibility: visible;
  cursor: pointer;
}
/* モーダル　クローズボタン */
.s-video-modal__close-button {
  position: absolute;
  top: -4.4rem;
  right: 2.4rem;
  cursor: pointer;
  z-index: 1;
  pointer-events: none;
}
.s-video-modal__close-button:hover {
  opacity: 1;
}
.s-video-modal__close-icon {
  width: 2.4rem;
  height: 2.4rem;
}
/* モーダル内のコンテンツ（動画エリア） */
.s-video-modal-content {
  position: relative;
  width: 100%;
  max-width: 60rem;
  border-radius: 0;
}
.s-video-modal__overlay.js-video-modal--active .s-video-modal-content {
  transform: scale(1);
}
/* アスペクト比16:9を維持するハック (padding-bottom手法) */
.s-video-modal__video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 9 / 16 * 100 */
}
.s-video-modal__video-container iframe,
.s-video-modal__video-container #modal__player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
/* モーダル下部にテキストを表示する場合 */
.s-video-modal__video-text {
  margin: 1.9rem 0 0 0;
  color: #fff;
  text-align: center;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .s-video-modal__container {
    margin: 7.8rem auto 0;
    max-width: 60rem;
    width: 100%;
  }
  .s-video-modal__thumbnail-overlay {
    width: 60rem;
  }
}







/* -- featured-faq -- */
.feature-common-faq__accordion {
  border-radius: 0.4rem;
  background: #F6F6F6;
}
.feature-common-faq__question {
  padding: 1.5rem 5.6rem 1.5rem 2rem;
  position: relative;
}
.feature-common-faq__answer {
  margin-inline: 2rem;
  padding-block: 2.2rem 2.9rem;
  border-top: solid 1px #DDD;
}
.feature-common-faq__question::before, 
.feature-common-faq__question::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  background-color: var(--color-primary);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.feature-common-faq__question::before {
  width: 1.5rem;
  height: 0.1rem;
  right: 2rem;
}
.feature-common-faq__question::after {
  width: 0.1rem;
  height: 1.5rem;
  right: 2.7rem;
}
.feature-common-faq__accordion[open] .feature-common-faq__question::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg); 
}
.feature-common-faq__accordion:not([open]) .feature-common-faq__question::after {
  opacity: 1;
}
.feature-common-faq__question, 
.feature-common-faq__answer {
  display: grid;
  grid-template-columns: 1.6rem auto;
  gap: 1.9rem;
}
.feature-common-faq__question-mark, 
.feature-common-faq__answer-mark {
  font-family: var(--font-en);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: normal;
}
.feature-common-faq__question-text {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.57143;
}
.feature-common-faq__answer-text {
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.69231;
}
.feature-common-faq__button {
  margin: 4.3rem auto 0;
  border-radius: 0.4rem;
  border: solid 1px var(--color-primary);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.42857;
  text-decoration: none;
  width: 23rem;
  height: 4.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (min-width: 768px) {
  .feature-common-faq {
    width: 110rem;
    margin: 8rem auto 8rem;
  }
  .feature-common-faq__inner {
    width: 86rem;
    margin-inline: auto;
  }
  .feature-common-faq__title {
    margin-top: 0.8rem;
  }
  .feature-common-faq__faq {
    margin-top: 4rem;
    gap: 1.8rem;
  }
  .feature-common-faq__question {
    padding: 2rem 7.5rem 2rem 3rem;
  }
  .feature-common-faq__answer {
    margin-inline: 3rem;
    padding-block: 1.8rem 3rem;
  }
  .feature-common-faq__question::before {
    right: 3rem;
  }
  .feature-common-faq__question::after {
    right: 3.7rem;
  }
  .feature-common-faq__question, 
  .feature-common-faq__answer {
    grid-template-columns: 1.7rem auto;
    gap: 1.8rem;
  }
  .feature-common-faq__question-mark, 
  .feature-common-faq__answer-mark {
    font-size: 1.7rem;
  }
  .feature-common-faq__question-text {
    font-size: 1.5rem;
    line-height: 1.46667;
  }
  .feature-common-faq__answer-text {
    font-size: 1.4rem;
    line-height: 1.71429;
  }
  .feature-common-faq__button {
    margin: 4.4rem auto 0;
    font-size: 1.5rem;
    line-height: normal;
  }
}