@charset "utf-8";

/* ============================================================
   トップページ専用スタイル
   ============================================================ */

/* ---------- ヒーロー ---------- */
.hero {
  position: relative;
  height: 1123px;
  overflow: hidden;
}

/* 背面の円形ライン装飾 */
.hero__deco {
  position: absolute;
  top: 120px;
  left: 0;
  height: 1120px;
  pointer-events: none;
}
.hero__deco img { height: 100%; width: auto; max-width: none; }

/* 淡い緑のブロック */
.hero__mint {
  position: absolute;
  top: 493px;
  left: 15%;
  width: 85%;
  height: 413px;
  background: var(--c-mint);
}

/* 右端の灰緑ブロック */
.hero__sage {
  position: absolute;
  top: 493px;
  left: 83%;
  width: 17%;
  height: 413px;
  background: var(--c-sage);
}

/* 流れる ENERGY POINT の文字 */
.hero__marquee {
  position: absolute;
  top: 827px;
  left: 0;
  width: 100%;
  height: 296px;
  overflow: hidden;
  pointer-events: none;
}
.hero__marquee-track {
  display: flex;
  width: max-content;
  height: 100%;
  animation: marquee 40s linear infinite;
}
.hero__marquee-track img {
  height: 100%;
  width: auto;
  max-width: none;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.hero__image {
  position: absolute;
  top: 120px;
  left: 50%;
  width: 600px;
  height: 686px;
  margin-left: 40px; /* 1280px幅コンテナの右端に寄せる: 1280/2 - 600 = 40 */
  overflow: hidden;
}
.hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__inner {
  position: relative;
  z-index: 2;
  padding-top: 120px;
}

.hero__title {
  font-family: var(--f-heading);
  font-size: 48px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: .01em;
}

.hero__lead {
  margin-top: 20px;
  font-family: var(--f-heading);
  font-size: 20px;
  line-height: 1.8;
  font-weight: 500;
}

@media (max-width: 1140px) {
  .hero { height: 980px; }
  .hero__title { font-size: 40px; }
  .hero__image { width: 520px; height: 600px; margin-left: -20px; }
  .hero__marquee { top: 700px; height: 220px; }
  .hero__mint, .hero__sage { top: 430px; height: 340px; }
}

@media (max-width: 840px) {
  .hero {
    height: auto;
    padding-bottom: 142px; /* 流れる文字の下端(964px)まで伸ばす */
  }
  .hero__deco { top: 120px; height: 366px; }
  .hero__image {
    position: relative;
    top: 0;
    left: 0;
    width: calc(100% - 20px);
    height: auto;
    margin: 0 10px;
    margin-top: calc(var(--header-h) + 80px);
  }
  .hero__image img { aspect-ratio: 370 / 424; height: auto; }
  .hero__inner {
    max-width: calc(100% - 20px);
    padding-top: 34px;
  }
  .hero__title { font-size: 32px; line-height: 1.4; font-weight: 500; }
  .hero__lead { margin-top: 19px; font-size: 16px; line-height: 1.8; }
  .hero__mint {
    top: 653px;
    left: 31%;
    width: 66.5%;
    height: 220px;
  }
  .hero__sage {
    top: 653px;
    left: 82%;
    width: 15.4%;
    height: 220px;
  }
  .hero__marquee { top: 853px; height: 111px; }
}

/* ---------- セクション共通（トップ） ---------- */
/* セクションごとの上下余白は元サイトの実測値に合わせている */
.sec {
  position: relative;
  padding: 70px 0 110px;
}
.sec--concept { padding: 70px 0 95px; }
.sec--story   { padding: 140px 0 220px; }
.sec--message { padding: 70px 0 120px; }
.sec--team    { padding: 80px 0 160px; }
.sec--news    { padding: 0 0 137px; }

/* 白地のセクション（Launch STORY / Our Team） */
.sec--light { background: var(--c-white); }

/* 白地セクションの右にある装飾カラム */
.sec__side {
  position: absolute;
  inset: 0 0 0 auto;
  width: 30%;
  background: var(--c-bg);
}
.sec__side span {
  position: absolute;
  inset: auto 0 0 0;
  height: 60%;
  background: var(--c-mist);
}

.sec .container,
.sec .container--wide { position: relative; z-index: 1; }

@media (max-width: 840px) {
  /* 白地のセクションは画面端から10px内側に入る */
  .sec--light { margin-inline: 10px; }
  .sec__side { width: 60px; }

  .sec--concept { padding: 39px 0 40px; }
  .sec--story   { padding: 80px 0 93px; }
  .sec--message { padding: 80px 0 20px; }
  .sec--team    { padding: 80px 0 2px; }
  .sec--news    { padding: 80px 0 95px; }
}

/* ---------- Concept ---------- */
.concept__body {
  display: grid;
  grid-template-columns: 454px 1fr;
  gap: 0 50px;
  margin-top: 60px;
}
.concept__text .body-text { margin-top: 20px; }

/* 元サイトでは写真がコンテナ幅から右に80pxはみ出している */
.concept__image {
  align-self: start;
  width: 696px;
  max-width: none;
  margin-top: 26px;
}
.concept__image img {
  width: 100%;
  aspect-ratio: 696 / 596;
  object-fit: cover;
}

@media (max-width: 1140px) {
  .concept__body { grid-template-columns: 1fr 1fr; gap: 0 40px; }
  .concept__image { width: 100%; }
}
@media (max-width: 840px) {
  .concept__body { grid-template-columns: 1fr; gap: 40px; margin-top: 61px; }
  .concept__image { width: 100%; margin-top: 0; order: -1; }
  .concept__text .body-text { margin-top: 20px; }
}

/* ---------- Launch STORY ---------- */
.story__body {
  display: grid;
  grid-template-columns: 670px 1fr;
  gap: 0 48px;
  margin-top: 78px;
}
.story__text .body-text { margin-top: 20px; }

.story__image {
  align-self: start;
  width: 480px;
  max-width: 100%;
  margin-top: -18px;
  margin-left: auto;
}

@media (max-width: 1140px) {
  .story__body { grid-template-columns: 1fr 320px; gap: 0 30px; }
  .story__image { width: 100%; }
}
@media (max-width: 840px) {
  .story__body { grid-template-columns: 1fr; gap: 40px; margin-top: 60px; }
  .story__image { width: 100%; margin: 0; order: -1; }
  .story__text .body-text { margin-top: 20px; }
}

/* ---------- Message ---------- */
.message__body { margin-top: 60px; }
.message__body .body-text { margin-top: 20px; }

.message__more {
  margin-top: 41px;
  text-align: center;
}
.message__more a {
  font-family: var(--f-jp);
  font-size: 28px;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 6px;
  transition: opacity .2s;
}
.message__more a:hover { opacity: .6; }

@media (max-width: 840px) {
  .message__body { margin-top: 30px; }
  .message__body .body-text { margin-top: 20px; }
  .message__more { margin-top: 40px; }
  .message__more a { font-size: 24px; }
}

/* ---------- Our Team ---------- */
.team__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 60px;
  margin-left: 20px;
}

.team__card {
  display: block;
  height: 100%;
  padding: 22px 20px;
  background: var(--c-white);
  border: 2px solid var(--c-sage);
  text-align: center;
  transition: background-color .25s, transform .25s;
}
.team__card:hover {
  background: var(--c-mist);
  transform: translateY(-4px);
}

.team__photo {
  width: 120px;
  height: 120px;
  margin: 0 auto 24px;
  border-radius: 50%;
  object-fit: cover;
}

.team__name {
  font-family: var(--f-heading);
  font-size: 20px;
  line-height: 1.4;
  color: var(--c-ink);
}
.team__name-en {
  margin-top: 10px;
  font-family: var(--f-heading);
  font-size: 15px;
  line-height: 1.4;
  color: var(--c-ink);
}

@media (max-width: 840px) {
  .team__list {
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 70px 20px 0;
  }
}

/* ---------- NEWS ---------- */
.news-box {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 0;
  padding: 121px 0 0;
  /* 罫線は上辺だけ（元サイトと同じ。四方を囲むと箱に見えてしまう） */
  border-top: 1px solid var(--c-gray);
  min-height: 418px;
}

.news-box__head { padding-left: 0; }

.news-list--home { padding-top: 19px; }

@media (max-width: 1140px) {
  .news-box { grid-template-columns: 260px 1fr; padding-top: 80px; }
}
@media (max-width: 840px) {
  .news-box {
    grid-template-columns: 1fr;
    min-height: 0;
    margin-inline: 30px;
    padding: 81px 25px 25px 0;
  }
  .news-list--home { padding-top: 65px; }
}