@charset "UTF-8";

/* ========================
common
======================== */
.txt-kana-large {
  font-family: var(--font-mincho);
  font-size: var(--fs-heading-sm); /* 22→28px */
  letter-spacing: 0;
}

.txt-kana-small {
  font-size: var(--fs-body); /* 16→18px */
}


/* historyページのみ: 1200px以下で改行用 <br> を非表示（style.css の 768px とは別ブレイクポイント） */
@media screen and (max-width: 1200px) {
  .u-show-pc {
    display: none;
  }
}

/* ========================
history　背景
======================== */
main {
  position: relative;
  isolation: isolate;
  background: linear-gradient(
    180deg,
    rgba(22, 30, 48, 1) 0%,
    rgba(25, 39, 56, 0.9) 50%,
    rgba(26, 38, 53, 0.75) 65%,
    #cdcfd1 100%
  );
}

/* ========================
history header
======================== */

.history-page main {
  padding-top: 0;
}
.page-header {
  background: url(../img/history/history_mv.webp);
  aspect-ratio: 1440 / 560;
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  padding-top: 85px;
}

.page-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.4)
  );
  z-index: 0;
}
.page-header .container {
  position: relative;
  z-index: 1;
  width: 100%;
}

.history-title {
  font-family: var(--font-mincho);
  color: var(--color-gray-100);
}

/* tablet 1024px */
@media screen and (max-width: 1024px) {
  .history-title {
    text-shadow:
      0 2px 6px rgba(0, 0, 0, 0.5),
      0 8px 20px rgba(0, 0, 0, 0.4);
    line-height: var(--lh-md);
  }
}
/* sp 768px */
@media screen and (max-width: 768px) {
  .page-header {
    background: url(../img/history/history_mv_sp.webp);
    aspect-ratio: 375 / 400;
    background-size: contain;
    padding-top: 65px;
  }
}

/* ========================
history section common
======================== */

.history-section {
  position: relative;
}

.history-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  background: url("../img/common/bg_texture_bk.webp") center / cover no-repeat;
  opacity: 0.2;
  pointer-events: none;
}

/*余白の個別調整 */
.history-section--origin {
  padding-top: 120px;
}

/* 最後のセクションのみ下段のpadding削除 */
.history-section--last {
  padding-bottom: 0;
}

/* 見出しエリア */
.history-block__head {
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-gray-200);
}

.history-block__number {
  position: relative;
  display: inline-block;
  margin-bottom: var(--space-sm);
  padding-left: 80px;
  /* font-size: 4.8rem; */
  font-size: var(--fs-display);
  line-height: 0.5;
  color: var(--color-accent);
}

.history-block__number::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 64px;
  height: 1px;
  background-color: var(--color-accent);
  transform: translateY(-50%);
}

.history-block__title {
  font-size: var(--fs-2xl); /* --fs-2xl と同値 */
  line-height: var(--lh-snug);
  color: #eaeaea; /*個別設定*/
  font-weight: 600;
}

/* 本文エリア */
.history-block__body {
  padding: var(--space-xl) 0;
}

.history-block__body-inner {
  margin: 0 auto;
  box-sizing: border-box;

  display: flex;
  gap: 5%;
}

.history-block__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-lg);
}

.history-block__text-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.history-block__subtitle {
  font-size: var(--fs-xl);
  color: var(--color-gray-100);
  letter-spacing: 0.02em;
  margin-bottom: var(--space-md);
  font-weight: 600;
}

.history-block__text-group-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.history-block__text {
  color: var(--color-gray-100);
}

.history-block__image {
  width: 49.5%;
  flex-shrink: 0;
  margin: 0;
}
.history-block__image img {
  width: 100%;
  height: auto;
  display: block;
}

.history-block__image4 img {
  width: 100%;
  height: auto;
  aspect-ratio: 595 / 436;
  object-fit: cover;
}

.history-block__caption {
  margin-top: 10px;
  font-size: var(--fs-body); /* 16→18px */
  color: #eaeaea; /* 個別設定 */
}

/* .text-highlight / .u-link-plain は style.css に定義済み（旧: .txt_accent_color / .url_underline） */

/* tablet 981px */
@media screen and (max-width: 1200px) {
  .history-section--origin {
    padding-top: 65px;
  }

  .history-block__body-inner {
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
  }

  .history-block__image {
    width: 100%;
  }

}