@charset "UTF-8";

/* Zen Kaku Gothic New */
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');

/* ============================================
   トップページ：メインビジュアル (FV)
   ============================================ */

/* --- セクション全体 --- */
.p-top-fv {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* --- 背景画像 --- */
.p-top-fv__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/top_fv__bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

/* --- コンテンツエリア --- */
.p-top-fv__content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
}

/* --- 背景タイトル (CROSS) --- */
.p-top-fv__title-cross {
  position: absolute;
  top: -4%;
  left: -1.5%;
  opacity: 0;
}

.p-top-fv__title-cross img {
  width: auto;
  height: 12.5vw;
}

.is-show .p-top-fv__title-cross {
  animation: fv-slideInLeft 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.3s forwards;
}

/* --- 背景タイトル (OVER) --- */
.p-top-fv__title-over {
  position: absolute;
  top: -6%;
  right: -1.5%;
  opacity: 0;
}

.p-top-fv__title-over img {
  width: 12.5vw;
  height: auto;
  max-height: 110vh;
}

.is-show .p-top-fv__title-over {
  animation: fv-slideInTop 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.5s forwards;
}

/* --- 中央メインビジュアルエリア --- */
.p-top-fv__main {
  position: absolute;
  bottom: 8%;
  left: 13%;
  width: 80%;
  max-width: 62.0rem;
  z-index: 5;
  opacity: 0;
  transform-origin: bottom left;
}

.is-show .p-top-fv__main {
  animation: fv-fadeZoomIn 1.5s ease-out 1.0s forwards;
}

.p-top-fv__catch-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  z-index: 1;
  opacity: 0.35;
}

.p-top-fv__catch-text {
  position: relative;
  z-index: 2;
  width: 100%;
}

.p-top-fv__catch-bg img,
.p-top-fv__catch-text img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- スクロールダウン --- */
.p-top-fv__scroll {
  position: absolute;
  bottom: 0;
  left: 3%;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.0rem;
}

.p-top-fv__scroll-text {
  color: var(--c-white);
  font-size: 1.5rem;
  font-weight: 700;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.p-top-fv__scroll-line {
  width: 0.1rem;
  height: 10.0rem;
  background-color: var(--c-white);
  position: relative;
}

.p-top-fv__scroll-ball {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: var(--c-white);
  animation: fv-scrollAnimation 2.0s infinite;
}

/* --- アニメーション定義 --- */
@keyframes fv-scrollAnimation {
  0% {
    top: 0;
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 0;
  }

  100% {
    top: 100%;
    opacity: 0;
  }
}

@keyframes fv-slideInLeft {
  0% {
    transform: translateX(-10.0rem);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fv-slideInTop {
  0% {
    transform: translateY(-10.0rem);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fv-fadeZoomIn {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* --- レスポンシブ --- */
@media screen and (max-width: 768px) {
  .p-top-fv {
    height: 70vh;
  }	
	.p-top-fv__bg {
	background-position: center right 30%;
}

  .p-top-fv__title-cross {
    top: 4rem;
    left: 0;
  }

  .p-top-fv__title-over {
    top: 11rem;
    right: 0;
  }

  .p-top-fv__title-cross img {
    height: 15.5vw;
  }

  .p-top-fv__title-over img {
    width: 15.5vw;
  }

  .p-top-fv__main {
    bottom: 12%;
    left: 12%;
    width: 60%;
  }
}


/* ============================================
   トップページ：ムービーセクション
   ============================================ */

.p-top-movie {
  background-color: var(--c-bg-light1);
  padding: 10.0rem 0;
}

.p-top-movie__wrap {
  margin-top: 4.0rem;
  width: 100%;
  background: var(--c-white);
  box-shadow: 0 1.0rem 2.5rem rgba(0, 0, 0, 0.1);
  border-radius: 0.8rem;
  overflow: hidden;
}

/* --- レスポンシブ --- */
@media screen and (max-width: 768px) {
  .p-top-movie {
    padding: 6.0rem 0;
  }
}

/* ============================================
   トップページ：ポイントセクション
   ============================================ */

.p-top-point {
  padding: 8.0rem 0;
  background-color: var(--c-white);
}

.p-top-point__list {
  display: flex;
  flex-direction: column;
  gap: 5.0rem;
  margin-top: 4.0rem;
}

/* --- 各ポイントアイテム共通 --- */
.p-top-point__item {
  width: 100%;
  position: relative;
  margin-top: 3.0rem;
  opacity: 0;
  transform: translateY(3.0rem);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.p-top-point__item.is-show {
  opacity: 1;
  transform: translateY(0);
}

/* --- 見出し帯エリア --- */
.p-top-point__head {
  width: 90%;
  max-width: 68.0rem;
  margin: 0 auto -2.5rem;
  position: relative;
  z-index: 2;
  padding: 1.5rem 2.0rem;
  text-align: center;
  box-shadow: 0 0.5rem 1.0rem rgba(0, 0, 0, 0.15);
}

.p-top-point__title {
  color: var(--c-white);
  font-size: 2.2rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.4;
}

/* --- 本文エリア --- */
.p-top-point__body {
  position: relative;
  z-index: 1;
  padding: 5.5rem 6.0rem 4.0rem;
  display: flex;
  align-items: center;
  gap: 3.0rem;
  box-shadow: 0 0.5rem 2.0rem rgba(0, 0, 0, 0.08);
}

.p-top-point__txt {
  flex: 1;
}

.p-top-point__txt p {
  font-size: 2.4rem;
  line-height: 1.8;
  font-weight: 700;
}

.p-top-point__img img,
.p-top-point__img-group img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.1);
}

/* --- レイアウトバリエーション --- */
.p-top-point__item.-type1 .p-top-point__body {
  flex-direction: column;
  text-align: center;
}

.p-top-point__img-group {
  display: flex;
  justify-content: center;
  gap: 2.0rem;
  width: 100%;
}

.p-top-point__img-group img {
  width: 48%;
  max-width: 30.0rem;
}

.p-top-point__item.-type2 .p-top-point__img {
  width: 45%;
  flex-shrink: 0;
}

.p-top-point__item.-reverse .p-top-point__body {
  flex-direction: row-reverse;
}

/* --- カラーバリエーション --- */
.-color-cyan .p-top-point__head {
  background-color: var(--c-main-blue);
}

.-color-cyan .p-top-point__body {
  background-color: var(--c-bg-light1);
}

.-color-indigo .p-top-point__head {
  background-color: var(--c-main-purple);
}

.-color-indigo .p-top-point__body {
  background-color: var(--c-bg-light2);
}

.-color-purple .p-top-point__head {
  background-color: var(--c-main-violet);
}

.-color-purple .p-top-point__body {
  background-color: var(--c-bg-light3);
}

.-color-pink .p-top-point__head {
  background-color: var(--c-main-pink);
}

.-color-pink .p-top-point__body {
  background-color: var(--c-bg-light4);
}

/* --- レスポンシブ --- */
@media screen and (max-width: 768px) {
  .p-top-point {
    padding: 6.0rem 0;
  }

  .p-top-point__item {
    margin-top: 2.0rem;
  }

  .p-top-point__head {
    width: 94%;
    margin-bottom: -2.0rem;
    padding: 1.2rem 1.0rem;
  }

  .p-top-point__title {
    font-size: 1.5rem;
  }

  .p-top-point__body {
    padding: 4.5rem 2.0rem 3.0rem;
    flex-direction: column !important;
    gap: 2.0rem;
  }


  .p-top-point__txt p {
    font-size: 1.4rem;
    text-align: left;
  }

  .p-top-point__img,
  .p-top-point__img-group img,
  .p-top-point__item.-type2 .p-top-point__img {
    width: 100%;
    max-width: 100%;
  }

  .p-top-point__img-group {
    flex-direction: column;
  }
}

/* ============================================
   トップページ：アバウトセクション
   ============================================ */

.p-top-about {
  padding: 16.0rem 0 0;
  position: relative;
  overflow: hidden;
  /* 斜め背景のはみ出しをカット */
  z-index: 1;
}

/* --- デザインの肝：背景の斜めカット --- */
.p-top-about::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--c-bg-light1);
  /* #E6F6FF */
  z-index: -1;
  /* 左上から右下へ流れるような急角度のカット */
  clip-path: polygon(0 25%, 100% 70%, 100% 100%, 0 100%);
  pointer-events: none;
}

/* --- コンテンツ幅の管理 (1540px) --- */
.p-top-about .l-container {
  max-width: 1540px;
  margin: 0 auto;
  padding: 0 2.0rem;
}

/* --- フレックスボックス設定 --- */
.p-top-about__flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 垂直方向中央揃え */
  gap: 6.0rem;
}

/* --- 左側：テキストエリア --- */
.p-top-about__text {
  width: 55%;
  flex-shrink: 0;
}

.p-top-about__title-en {
  font-family: var(--f-display);
  font-size: 10.0rem;
  color: var(--c-main-blue);
  line-height: 1.1;
  margin-bottom: 2.0rem;
}

.p-top-about__title-ja {
  font-size: 3.6rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.4;
  margin-bottom: 3.5rem;
  background: var(--g-main);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.p-top-about__img-sp {
	display: none;
}

.p-top-about__desc p {
  font-size: 2.0rem;
  font-weight: 500;
  color: var(--c-text-main);
  margin-bottom: 4.5rem;
  text-align: justify;
}

.p-top-about__btn {
  text-align: right;
}

/* --- 右側：画像エリア --- */
.p-top-about__img-area {
  width: 45%;
  position: relative;
  height: 55.0rem;
  /* 重なり画像を表示する高さ */
  opacity: 0;
  transform: translateX(2.0rem);
  transition: opacity 1.3s ease, transform 1.3s ease;
}

/* JS発火後の表示 */
.p-top-about__img-area.is-show {
  opacity: 1;
  transform: translateX(0);
}

.p-top-about__img-item {
  position: absolute;
  box-shadow: 0 2.0rem 5.0rem rgba(0, 0, 0, 0.1);
  margin: 0;
  overflow: hidden;
}

.p-top-about__img-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* 画像の重なり順 */
.p-top-about__img-item.-img01 {
  width: 70%;
  top: 0;
  right: 25%;
  z-index: 1;
}

.p-top-about__img-item.-img02 {
  width: 55%;
  top: 30%;
  right: 0;
  z-index: 2;
}

/* ============================================
   レスポンシブ対応
   ============================================ */

@media screen and (max-width: 1200px) {
  .p-top-about__flex {
    flex-direction: column;
    gap: 4.0rem;
  }

  .p-top-about__text,
  .p-top-about__img-area {
    width: 100%;
  }

  .p-top-about__img-area {
    display: none
  }
.p-top-about__img-sp {
	display: flex;
	gap: 1.0rem;
	align-items: flex-end;
	width: 100%;
	max-width: 80rem;
	margin-top: -4.5rem;
	margin-bottom: 2.5rem;
}
}

@media screen and (max-width: 767px) {
  .p-top-about {
    padding: 10.0rem 0 0;
  }

  .p-top-about::before {
    clip-path: polygon(0 0, 100% 8.0rem, 100% 100%, 0 100%);
  }

  .p-top-about__title-en {
    font-size: 5.0rem;
  }

  .p-top-about__title-ja {
    font-size: 1.8rem;
  }

  .p-top-about__desc p {
    font-size: 1.4rem;
  }
}

/* ============================================
   トップページ：サービスセクション
   ============================================ */

.p-top-service {
  position: relative;
  width: 100vw;
  /* 高さを自動計算。スマホでは少し低く */
  height: clamp(80.0rem, 84vw, 108.0rem);
  padding-top: 8.0rem;
  background-image: url("../images/top_service__bg.svg");
  background-size: cover;
  background-position: center;
  overflow-x: clip;
  left: 50%;
  transform: translateX(-50%);
}

.p-top-service__inner {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1540px;
  margin: 0 auto;
  padding: 0 4.0rem;
}

/* --- タイトルエリア --- */
.p-top-service__title {
  font-size: clamp(3.2rem, 4.4vw, 6.4rem);
  font-weight: 700;
  color: var(--c-white);
  line-height: 1;
  margin-bottom: 2.5rem;
}

.p-top-service__lead {
  font-size: clamp(1.6rem, 1.5vw, 2.4rem);
  font-weight: 500;
  color: var(--c-white);
  line-height: 1;
}

.p-top-service__bg-en {
  position: absolute;
  bottom: -1%;
  right: -40rem;
  font-size: clamp(8.0rem, 26vw, 18.0rem);
  font-weight: 700;
  color: var(--c-white);
  line-height: 1;
  z-index: 0;
}

/* --- スライダー（傾斜設定） --- */
.p-top-service__slider-wrapper {
  position: relative;
  width: 100%;
  margin-top: 23.0rem;
}

.p-top-service__slider {
  position: relative;
  width: 100%;
  overflow: visible;
  /* スライダーの軌道だけを傾ける */
  transform: rotate(-15deg) translateX(clamp(5.0rem, 10vw, 10.0rem));
  margin-top: -12.0rem;
}

.p-top-service__item {
  position: relative;
  width: clamp(27.0rem, 27vw, 39.2rem);
  margin: 0 2.4rem;
  /* 軌道の-15度を打ち消して、スライド自体を真っ直ぐ（垂直）にする */
  transform: rotate(15deg);
  transform-origin: center;
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

/* ホバー：回転角を変えず、拡大のみ */
.p-top-service__item:hover {
  transform: rotate(15deg) scale(1.05);
  box-shadow: 0 1.0rem 4.0rem rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.p-top-service__item a:hover {
  opacity: 1;
}

/* --- スライド内部 --- */
.p-top-service__img-box {
  position: relative;
  width: 100%;
  box-shadow: 0 0.5rem 2.0rem rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.p-top-service__img-box img {
  width: 100%;
  height: auto;
  display: block;
}

.p-top-service__text-jp {
  position: absolute;
  top: 3.2rem;
  left: 7.0rem;
  font-size: clamp(2.4rem, 4.6vw, 3rem);
  font-weight: 700;
  color: var(--c-white);
  line-height: 1.4;
  text-shadow: 0 0.2rem 1.0rem rgba(0, 0, 0, 0.4);
}

.p-top-service__text-en {
  position: absolute;
  top: 1.6rem;
  left: 1.3rem;
  transform-origin: bottom left;
  transform: rotate(90deg);
  font-weight: 700;
  color: var(--c-main-purple);
}

/* --- ナビゲーション --- */
.p-top-service__nav {
  position: absolute;
  top: 100%;
  right: 5%;
  display: flex;
  gap: 2.0rem;
  z-index: 10;
}

.p-top-service__btn {
  width: clamp(6.0rem, 10vw, 8.0rem);
  height: clamp(6.0rem, 10vw, 8.0rem);
  cursor: pointer;
  border: 0.3rem solid var(--c-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--c-white);
  transition: all 0.3s;
}

.p-top-service__btn:hover {
  background: var(--c-white);
  color: var(--c-main-purple);
  transform: scale(1.1);
}

.p-top-service__arrow {
  width: 1.2rem;
  height: 2.0rem;
}

.p-top-service__arrow svg {
  display: block;
}

.p-top-service__btn.-prev .p-top-service__arrow {
  transform: rotate(180deg);
}

/* --- スマホ対応 --- */
@media screen and (max-width: 1024px) {
  .p-top-service {
    height: auto;
    padding-bottom: 8.0rem;
  }

  .p-top-service__slider {
    transform: rotate(0) translateX(0);
    margin-top: 4.0rem;
  }

  .p-top-service__item {
    transform: rotate(0);
    width: 28.0rem;
    margin: 0 1.0rem;
  }

  .p-top-service__item:hover {
    transform: scale(1.05);
  }

  .p-top-service__nav {
    transform: rotate(0);
    position: relative;
    justify-content: center;
    right: auto;
    margin-top: 4.0rem;
  }

  .p-top-service__slider-wrapper {
    margin-top: auto;
  }

  .p-top-service__bg-en {
    display: none;
  }
}


/* ============================================
   トップページ：特徴セクション
   ============================================ */

.p-top-features {
  background-color: #f7f7f7;
  background-image: url("../images/top_features__bg.svg");
  background-size: cover;
  background-position: center;
  padding: 10.0rem 0;
  overflow: hidden;
}

/* 1440px 固定幅設定 */
.p-top-features__inner {
  max-width: 144.0rem;
  margin: 0 auto;
  padding: 0 2.0rem;
}

.p-top-features__head {
  text-align: center;
  margin-bottom: 6.0rem;
}

.p-top-features__title {
  font-size: 3.2rem;
  font-weight: 700;
  margin-bottom: 2.4rem;
}

.p-top-features__desc {
  font-size: 2.0rem;
  font-weight: 500;
}

/* --- スライダー全体のコンテナ --- */
.p-top-features__slider-container {
  position: relative;
  width: 100%;
}

.p-top-features__item {
  background-color: var(--c-white);
  display: flex !important;
  align-items: center;
  height: auto;
  overflow: hidden;
  padding: 6.0rem 8.0rem;
  gap: 6rem;
}

/* --- スライド左側：画像エリア --- */
.p-top-features__image {
  position: relative;
  overflow: hidden;
  width: 50%;
}

/* 無限ループマーキー (切れ目なし) */
.p-top-features__marquee {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
}

.p-top-features__marquee-inner {
  display: flex;
  width: fit-content;
  animation: marquee-loop 20s linear infinite;
}

.p-top-features__marquee-inner span {
  display: block;
  font-size: 4.8rem;
  font-weight: 700;
  color: var(--c-white);
  line-height: 1.6;
  white-space: nowrap;
}

@keyframes marquee-loop {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* --- スライド右側：コンテンツエリア --- */
.p-top-features__content {
  width: 50%;
}

/* 数字とタイトルを横並びに */
.p-top-features__title-wrap {
  display: flex;
  align-items: center;
  gap: 3.0rem;
  margin-bottom: 3.0rem;
}

.p-top-features__num-box {
  position: relative;
}

/* 数字の上の Strength ラベル */
.p-top-features__num-box::before {
  content: "STRENGTH";
  position: absolute;
  top: -2.5rem;
  left: 0;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #1f1f1f;
  width: 8rem;
}

/* 数字の下線 */
.p-top-features__num-box::after {
  content: "";
  display: block;
  width: 3.0rem;
  height: 0.1rem;
  background-color: #1f1f1f;
  margin-top: 0.5rem;
}

.p-top-features__num {
  font-size: 4.8rem;
  font-weight: 700;
  line-height: 1;
}

/* 見出し：数字の右側に配置 */
.p-top-features__item-title {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.5rem;
}

.p-top-features__item-title .add-color {
  color: var(--c-main-purple);
}

.p-top-features__item-desc {
  font-weight: 500;
}

.p-top-features__desc {
  font-size: 1.4rem;
  font-weight: 500;
}

/* --- ナビゲーション --- */
.p-top-features__nav {
  position: absolute;
  top: 50%;
  left: -3.5rem;
  right: -3.5rem;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 10;
}

.p-top-features__nav-btn {
  width: 7.0rem;
  height: 7.0rem;
  cursor: pointer;
  pointer-events: auto;
  border: 0.3rem solid var(--c-main-purple);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-white);
  color: var(--c-main-purple);
  transition: all 0.3s;
  box-shadow: 0 0.4rem 1.5rem rgba(0, 0, 0, 0.1);
}

.p-top-features__nav-btn:hover {
  background: var(--c-main-purple);
  color: var(--c-white);
  transform: scale(1.1);
}

.p-top-features__nav-btn.-prev .p-top-features__nav-arrow {
  transform: rotate(180deg);
}

.p-top-features__nav-arrow {
  width: 1.4rem;
  height: 2.4rem;
}
.p-top-features__nav-arrow svg {
	display: block;
	flex-shrink: 0;
}

.p-top-features__more {
  text-align: center;
  margin-top: 6.0rem;
}

/* --- レスポンシブ (SP) --- */
@media screen and (max-width: 1024px) {
  .p-top-features__inner {
    padding: 0 2.0rem;
  }

  .p-top-features__item {
    flex-direction: column;
    padding: 3.0rem 2.0rem;
    gap: 2.0rem;
  }
	
	.p-top-features__num-box {
	padding-right: 3.0rem;
}

  .p-top-features__image,
  .p-top-features__content {
    width: 100%;
  }

  .p-top-features__content {
    padding: 3.0rem 0 0;
  }

  .p-top-features__item-desc {
    font-size: 1.4rem;
  }

  .p-top-features__title-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.0rem;
    margin-bottom: 2.0rem;
  }

  .p-top-features__nav {
    position: static;
    transform: none;
    justify-content: center;
    gap: 3.0rem;
    margin-top: 4.0rem;
  }

  .p-top-features__more {
    margin-top: 3rem;
  }
}

/* ============================================
   トップページ：未来の選択肢セクション
   ============================================ */

.p-top-future {
  background: url("../images/top-future__bg.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 6.0rem 0;
  position: relative;
  overflow: hidden;
  color: var(--c-white);
  z-index: 1;
}

/* --- コンテンツ幅 --- */
.p-top-future__inner {
  max-width: 144.0rem;
  margin: 0 auto;
  padding: 0 2.0rem;
}

/* --- マーキーエリア --- */
.p-top-future__marquee {
  width: 100%;
  overflow: hidden;
  padding: 2.0rem 0;
  position: relative;
  z-index: 2;
}

.p-top-future__marquee-track {
  display: flex;
  width: max-content;
}

.p-top-future__img-box {
  width: 25vw;
  max-width: 35.0rem;
  min-width: 20.0rem;
  margin: 0 1.0rem;
  overflow: hidden;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
}

.p-top-future__img-box img {
  display: block;
}

/* アニメーション：左へ */
.-flow-left {
  animation: marquee-flow-left 40s linear infinite;
}

@keyframes marquee-flow-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* アニメーション：右へ */
.-flow-right {
  animation: marquee-flow-right 40s linear infinite;
}

@keyframes marquee-flow-right {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

/* --- 中央コンテンツ --- */
.p-top-future__content {
  text-align: center;
  padding: 4.0rem 2.0rem;
  position: relative;
  z-index: 5;
}

.p-top-future__title {
  font-size: 8.5rem;
  font-style: italic;
  font-weight: 700;
  margin-bottom: 2.0rem;
  color: var(--c-white);
  line-height: 1.2;
  letter-spacing: 0.05em;
  display: inline-block;
}

.p-top-future__title .add-small {
  font-size: 0.75em;
}

.p-top-future__desc {
  font-size: 3.0rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.8;
  color: var(--c-white);
}

/* --- レスポンシブ (SP) --- */
@media screen and (max-width: 767px) {
  .p-top-future {
    padding: 4.0rem 0;
  }
	
	.p-top-future__content {
		padding: 3.0rem 0;
	}

  .p-top-future__title {
    font-size: 2.8rem;
    margin-bottom: 1.5rem;
  }

  .p-top-future__desc {
    font-size: 1.5rem;
    text-align: left;
    line-height: 1.6;
  }

  .p-top-future__img-box {
    width: 60vw;
    min-width: 18.0rem;
    margin: 0 0.5rem;
  }
}

/* ============================================
   トップページ：コース紹介セクション
   ============================================ */

.p-top-course {
  background-image: url("../images/top-cource__bg.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 10.0rem 0 0;
  overflow: hidden;
}

.p-top-course__inner {
  max-width: 144.0rem;
  /* 1440px */
  margin: 0 auto;
  padding: 0 2.0rem;
}

/* --- 上部：メイン ＆ 説明 --- */
.p-top-course__main {
  display: flex;
  align-items: center;
  gap: 6.0rem;
  margin-bottom: 8.0rem;
}

.p-top-course__main-visual {
  width: 50%;
  overflow: hidden;
  box-shadow: 0 1.0rem 3.0rem rgba(0, 0, 0, 0.1);
}

.p-top-course__mainitem-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 6.0rem 1.0rem 2.0rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  pointer-events: none;
}

.p-top-course__mainitem-cat {
  display: inline-block;
  background: var(--c-main-violet);
  color: var(--c-white);
  padding: 0 1.0rem;
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: 1.0rem;
  line-height: 1.6;
}

.p-top-course__mainitem-name,
.p-top-course__mainitem-target {
  background-color: var(--c-bg-gray);
  padding: 0 1.0rem;
  font-size: 1.4rem;
  font-weight: 500;
}

.p-top-course__mainitem-note {
  display: flex;
  flex-wrap: wrap;
  gap: 1.0rem;
}

.p-top-course__head {
  width: 50%;
}

.p-top-course__title {
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 3.0rem;
  color: var(--c-main-violet);
}

.p-top-course__title span {
  display: block;
  font-family: var(--f-display);
  font-size: 10.0rem;
  line-height: 1.1;
  margin-bottom: 1.0rem;
}

.p-top-course__desc {
  max-width: 46.0rem;
  font-weight: 500;
  margin-bottom: 4.0rem;
  color: var(--c-main-violet);
}

/* --- 下部：リスト --- */
.p-top-course__list-wrapper {
  position: relative;
  width: 100%;
}

.p-top-course__list-slider {
  overflow: visible;
}

.p-top-course__item-img {
  position: relative;
  overflow: hidden;
}

.p-top-course__item-info {
  margin-top: 2.0rem;
}

.p-top-course__item-cat {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--c-main-violet);
  margin-bottom: 0.8rem;
}

.p-top-course__item-note {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
}

.p-top-course__item-name,
.p-top-course__item-target {
  display: inline-block;
  background-color: var(--c-white);
  padding: 0 1.0rem;
  font-weight: 700;
  line-height: 1.8;
}

/* -----------------------------------
   スクロールバーデザイン (rem版)
   ----------------------------------- */
.p-top-course .swiper-scrollbar {
  background-color: transparent;
  margin: 5.0rem auto 0;
  width: 100%;
  height: 0.5rem;
  position: relative;
  left: 0;
  border-radius: 0;
}

.p-top-course .swiper-scrollbar:before {
  content: "";
  display: block;
  width: 100%;
  height: 0.3rem;
  background-color: var(--c-main-violet);
  /* ガイド線 */
  border-radius: 50vw;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.p-top-course .swiper-scrollbar-drag {
  position: relative;
  width: 8.0rem;
  height: 4.0rem;
  background-color: var(--c-white);
  /* つまみ */
  border-radius: 50vw;
  transition: all 0.25s ease-out;
  cursor: pointer;
  top: -1.75rem;
}

.p-top-course .swiper-scrollbar-drag:before,
.p-top-course .swiper-scrollbar-drag:after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1.05rem;
  height: 1.85rem;
  background-image: url("../images/slidebar_right.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

.p-top-course .swiper-scrollbar-drag:before {
  left: 1.4rem;
  transform: translateY(-50%) rotate(-180deg);
}

.p-top-course .swiper-scrollbar-drag:after {
  right: 1.4rem;
}

@media screen and (max-width: 1024px) {
  .p-top-course {
    padding: 5rem 0 0;
  }

  .p-top-course__head {
    width: 100%;
  }

  .p-top-course__title span {
    font-size: 7rem;
  }

  .p-top-course__main {
    flex-direction: column;
    margin-bottom: 3rem;
  }

  .p-top-course__main-visual {
    display: none;
  }

}

/* ============================================
   トップページ：会社概要セクション
   ============================================ */

.p-top-company {
  background-image: url("../images/top-company__bg.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 12.0rem 0;
  overflow: hidden;
  /* 画像がはみ出してもスクロールバーが出ないようにする */
}

.p-top-company__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
}

/* --- 左側コンテンツエリア --- */
.p-top-company__content {
  /* * 左側の余白を計算：
   * (画面100% - 最大幅144rem) / 2 + コンテナ内パディング2rem
   */
  padding-left: calc((100% - 144.0rem) / 2 + 2.0rem);
  padding-top: 23.5rem;
  width: 55%;
  flex-shrink: 0;
  /* 幅を維持 */
}

.p-top-company__head-svg {
  max-width: 100%;
  height: 13.5rem;
  position: absolute;
  top: 4rem;
  left: 2rem;
}

.p-top-company__head-svg img {
  width: auto;
  height: 100%;
}

/* キャッチコピーエリア (斜体) */
.p-top-company__catch-wrap {
  display: inline-block;
}

.p-top-company__catch-wrap::after {
  content: "";
  display: block;
  width: 100%;
  height: 0.3rem;
  background-image: linear-gradient(90deg, #8904FC, #F162F1);
  margin: 3.0rem auto;
}

.p-top-company__main-catch {
  font-size: 2.8rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.8;
}

.p-top-company__text {
  font-size: 1.6rem;
  line-height: 2;
  margin-bottom: 5.0rem;
  font-weight: 500;
}

.p-top-company__btn-group {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 35.0rem;
}

/* --- 右側：画面端まで突き抜ける画像 --- */
.p-top-company__image {
  flex-grow: 1;
  /* 残りの幅をすべて使う */
  padding-left: 6.0rem;
  /* テキストとの間隔 */
}

.p-top-company__image img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1.1;
  /* 縦長のデザインを維持 */
  object-fit: cover;
  display: block;
}

.p-top-company__image-sp {
    display: none;
  }

/* --- レスポンシブ (SP) --- */
/* 1440px以下の時のパディング調整 */
@media screen and (max-width: 1440px) {
  .p-top-company__content {
    padding-left: 4.0rem;
  }
}

@media screen and (max-width: 1024px) {
  .p-top-company {
    padding: 6.0rem 0;
  }

  .p-top-company__inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 0 2rem;
  }

  .p-top-company__content {
    width: 100%;
    padding: 0;
    margin-bottom: 5.0rem;
  }

  .p-top-company__head-svg {
    position: static;
    width: 100%;
    height: auto;
    margin-bottom: 2rem;
  }
	
	.p-top-company__head-svg img {
		width: 100%;
		height: auto;
	}

  .p-top-company__image {
    display: none;
  }
	.p-top-company__image-sp {
		display: block;
		margin-bottom: 1.5rem;
	}
  .p-top-company__main-catch {
    font-size: 2rem;
  }
}

/* ============================================
   トップページ：ニュースセクション
   ============================================ */

.p-top-news {
  background-color: var(--c-white);
  padding: 0 0 12.0rem;
  overflow: hidden;
}

/* --- ヘッダー --- */
.p-top-news__head {
  margin-bottom: 6.0rem;
}

.p-top-news__head-inner {
  display: flex;
  align-items: flex-end;
  gap: 2.0rem;
}

.p-top-news__head-logo {
  font-size: 15.0rem;
  line-height: 1;
  color: var(--c-main-pink);
  text-transform: capitalize;
}

.p-top-news__head-sub {
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--c-main-pink);
  padding-bottom: 1.2rem;
}

/* --- スライダー（右側突き抜け） --- */
.p-top-news__slider-area {
  padding-left: calc((100% - 144.0rem) / 2 + 4.0rem);
}

.p-top-news__item {
  height: auto;
}

.p-top-news__img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-bottom: 2.0rem;
  background-color: #ccc;
}

.p-top-news__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.p-top-news__link:hover img {
  transform: scale(1.1);
}

.p-top-news__meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.p-top-news__cat {
  font-weight: 500;
  color: var(--c-white);
  width: 13rem;
  text-align: center;
}

.p-top-news__cat.-purple {
  background-color: var(--c-main-purple);
}

.p-top-news__cat.-violet {
  background-color: var(--c-main-violet);
}

.p-top-news__cat.-pink {
  background-color: var(--c-main-pink);
}

.p-top-news__date {
  font-weight: 500;
  color: var(--c-text-main);
}

/* ★タイトル一行省略対応 */
.p-top-news__item-title {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--c-text-main);
  /* 省略記号の設定 */
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* --- フッターエリア --- */
.p-top-news__footer {
  margin-top: 8.0rem;
}

.p-top-news__footer-inner {
  max-width: 144.0rem;
  margin: 0 auto;
  padding: 0 4.0rem;
  display: flex;
  align-items: center;
}

.p-top-news__scrollbar-wrap {
  flex-grow: 1;
}

.p-top-news .swiper-scrollbar {
  position: relative;
  background-color: var(--c-bg-light4);
  height: 0.4rem;
  border-radius: 0;
  width: 100%;
  left: 0;
}

.p-top-news .swiper-scrollbar-drag {
  background-color: var(--c-main-pink);
  border-radius: 0;
}

/* --- レスポンシブ --- */
@media screen and (max-width: 1440px) {

  .p-top-news__head-inner,
  .p-top-news__slider-area {
    padding-left: 4.0rem;
  }
}

@media screen and (max-width: 1024px) {
  .p-top-news {
    padding: 4rem 2rem;
  }

  .p-top-news__head-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
  }

  .p-top-news__head-sub {
    font-size: 2.8rem;
    line-height: 1.5;
  }

  .p-top-news__head-logo {
    font-size: 7.0rem;
  }

  .p-top-news__head-inner,
  .p-top-news__slider-area {
    padding-left: 0;
  }

  .p-top-news__head {
    margin-bottom: 2rem;
  }

  .p-top-news__footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 4.0rem;
  }

  .p-top-news__btn-wrap {
    width: 100%;
  }

  .p-top-news__scrollbar-wrap {
    width: 100%;
  }
}

/* ============================================
   Project - Top FAQ
   ============================================ */

.p-top-faq {
  padding: 10.0rem 0 0;
  background-color: var(--c-bg-gray);
  background-image: url("../images/top-faq__bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.p-top-faq__heading {
  margin-bottom: 6.0rem;
  text-align: center;
}

.p-top-faq__heading .c-sec-title {
  text-align: left;
}

.p-top-faq__heading .c-sec-title__ja {
  background: var(--g-main);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-style: normal;
}

.p-top-faq__body {
  margin: 0 auto;
}

/* --- FAQ List --- */
.p-top-faq__list {
  display: flex;
  flex-direction: column;
  gap: 3.0rem;
  margin-bottom: 8.0rem;
}

.p-top-faq__item {
  width: 100%;
  background-color: var(--c-white);
  overflow: hidden;
}

/* --- Question Area --- */
.p-top-faq__question {
  position: relative;
  cursor: pointer;
  padding: 2.5rem 2.0rem 2.5rem 7.0rem;
  transition: opacity 0.3s ease;
}

.p-top-faq__question:hover {
  opacity: 0.8;
}

.p-top-faq__question-inner {
  display: flex;
  align-items: center;
}

/* Q Icon */
.p-top-faq__icon-q {
  position: absolute;
  top: 50%;
  left: 3.0rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  background-color: var(--c-text-main);
  color: #fff;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
}

.p-top-faq__text {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--c-text-main);
  padding-right: 3.0rem;
  padding-left: 1.5rem;
}

/* アコーディオンアイコン (+ / -) */
.p-top-faq__question::before,
.p-top-faq__question::after {
  content: '';
  position: absolute;
  right: 2.0rem;
  top: 50%;
  width: 2.6rem;
  height: 0.2rem;
  background-color: var(--c-text-main);
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}

/* 縦棒 (初期状態) */
.p-top-faq__question::after {
  transform: translateY(-50%) rotate(90deg);
}

/* アクティブ時 */
.p-top-faq__question.is-active::before {
  transform: translateY(-50%) rotate(180deg);
}

.p-top-faq__question.is-active::after {
  transform: translateY(-50%) rotate(360deg);
  opacity: 0;
  /* 縦棒を消す */
}

/* --- Answer Area --- */
.p-top-faq__answer {
  display: none;
  /* JSで開閉 */
  padding: 0 2.0rem 2.5rem 7.0rem;
}

.p-top-faq__answer-inner {
  position: relative;
  padding-top: 1.5rem;
  padding-left: 1.5rem;
}

/* A Icon */
.p-top-faq__icon-a {
  position: absolute;
  top: 1.5rem;
  left: -4.0rem;
  /* インデント調整 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  background-color: var(--c-main-blue);
  color: #fff;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
}

.p-top-faq__a-text {
  font-size: 1.6rem;
  line-height: 1.8;
}

.p-top-faq__btn {
  text-align: center;
}


/* ============================================
   Responsive - SP
   ============================================ */
@media screen and (max-width: 767px) {
  .p-top-faq {
    padding: 6.0rem 0 0;
  }

  .p-top-faq__heading {
    margin-bottom: 4.0rem;
  }

  .p-top-faq__list {
    gap: 2.0rem;
    margin-bottom: 4.0rem;
  }

  /* SPでの余白・サイズ調整 */
  .p-top-faq__question {
    padding: 2.0rem 1.5rem 2.0rem 5.0rem;
  }
	
	.p-top-faq__question::before,
.p-top-faq__question::after {
  width: 1.6rem;
}

  .p-top-faq__icon-q {
    left: 1.5rem;
    width: 2.8rem;
    height: 2.8rem;
    font-size: 1.4rem;
  }

  .p-top-faq__text {
    font-size: 1.5rem;
	  padding-left: 1.0rem;
  }

  .p-top-faq__answer {
    padding: 0 1.5rem 2.0rem 5.0rem;
  }

  .p-top-faq__icon-a {
    left: -3.5rem;
    width: 2.8rem;
    height: 2.8rem;
    font-size: 1.4rem;
  }

  .p-top-faq__a-text {
    font-size: 1.4rem;
  }

  .p-top-faq__btn {
    text-align: center;
  }
}