@charset "UTF-8";

/* =========================================================
   FST コーポレートサイト 共通CSS（フェーズ1：静的レイアウト）
   - 基準幅 1440px。px固定をブレークポイントごとに切り替える
   - ブレークポイント：1140px / 840px / 540px（これ以外は増やさない）
   - 演出・ホバーはフェーズ2・3で追加する
   ========================================================= */

/* ===== 変数 ===== */
:root {
  --color-navy: #071C2D;
  --color-navy-soft: #0B2738;
  --color-loading: #12303F;
  --color-bg-soft: #EEF4F5;
  --color-white: #FFFFFF;
  --color-text: #132B38;
  --color-hover: #DDE9EC;
  --color-line-light: rgba(255, 255, 255, 0.25);
  --color-accent: #0E7891;
  --color-accent-light: #48A9B5;
  --color-alert: #A73A35;
  --color-muted: #667780;

  --font-mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-en: "Cardo", "Times New Roman", serif;
  --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  --gutter: 32px;
  --section-space: 200px;
  --ease: cubic-bezier(0.4, 0.4, 0, 1);
}

@media (max-width: 1140px) {
  :root {
    --section-space: 160px;
  }
}

@media (max-width: 840px) {
  :root {
    --gutter: 24px;
    --section-space: 120px;
  }
}

@media (max-width: 540px) {
  :root {
    --section-space: 80px;
  }
}

/* ===== リセット ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure,
fieldset,
legend {
  margin: 0;
  padding: 0;
}

fieldset {
  border: 0;
  min-width: 0;
}

ul,
ol {
  list-style: none;
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

th {
  font-weight: inherit;
  text-align: left;
}

[hidden] {
  display: none !important;
}

/* ===== ベース ===== */
body {
  background-color: var(--color-navy);
  color: var(--color-bg-soft);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.05em;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@media (max-width: 840px) {
  body {
    font-size: 15px;
    line-height: 1.75;
  }
}

@media (max-width: 540px) {
  body {
    font-size: 14px;
  }
}

/* ===== レイアウト：コンテナ ===== */
.l-container {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--gutter);
	padding-top: 150px;
}

/* ===== レイアウト：セクション ===== */
.l-section {
  position: relative;
  padding: var(--section-space) 0;
}

.l-section--light {
  --section-rule: rgba(19, 43, 56, 0.2);
  --card-bg: var(--color-white);
  --mark: var(--color-accent);
  --btn-plate: var(--color-navy);
  --btn-fill: var(--color-bg-soft);
  --btn-fill-hover: var(--color-hover);
  --row-hover: rgba(19, 43, 56, 0.06);
  background-color: var(--color-bg-soft);
  color: var(--color-text);
}

.l-section--dark {
  --section-rule: rgba(238, 244, 245, 0.2);
  --card-bg: var(--color-navy-soft);
  --mark: var(--color-accent-light);
  --btn-plate: var(--color-bg-soft);
  --btn-fill: var(--color-navy);
  --btn-fill-hover: var(--color-navy-soft);
  --row-hover: rgba(238, 244, 245, 0.07);
  background-color: var(--color-navy);
  color: var(--color-bg-soft);
}

/* 濃色セクション上端のグラデーション（高さ 160px） */
.l-section--fade-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 160px;
  background: linear-gradient(var(--color-navy) 0%, transparent 100%);
  pointer-events: none;
}

.l-section > .l-container {
  z-index: 1;
}

/* ===== 部品：セクション上端の横縞の帯（Lottie の静止版） ===== */
.c-stripe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 208px;
  background: repeating-linear-gradient(
    to bottom,
    var(--color-bg-soft) 0 1px,
    transparent 1px 8px
  );
  pointer-events: none;
}

/* 横縞の帯（高さ 208px）がある節は、上の余白を帯より広く取る */
.l-section:has(> .c-stripe),
.l-footer {
  padding-top: max(
    calc(var(--section-space) + 80px),
    248px
  );
}

.c-stripe::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--color-navy) 0%, transparent 100%);
}

/* ===== レイアウト：ヘッダー ===== */
.l-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  padding: 32px 32px 0;
  color: var(--color-bg-soft);
  pointer-events: none;
}

.l-header__logo,
.l-header__actions {
  pointer-events: auto;
}

.l-header__logo-img {
  width: auto;
  height: 39px;
}

/* 濃い地の上（初期状態）は白抜き、淡い地の上は支給ロゴ。重ねて0.3秒で入れ替える */
.l-header__logo {
  position: relative;
  display: block;
}

.l-header__logo-img {
  transition: opacity 300ms var(--ease);
}

.l-header__logo-img--on-light {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.is-header-light .l-header__logo-img--on-dark {
  opacity: 0;
}

.is-header-light .l-header__logo-img--on-light {
  opacity: 1;
}

/* 淡い地の上では、ヘッダーと縦ナビの文字を濃い色にする */
.l-header,
.l-side-nav {
  transition: color 300ms var(--ease);
}

.is-header-light .l-header,
.is-header-light .l-side-nav {
  color: var(--color-text);
}

.is-header-light .c-btn-pill {
  border-color: rgba(19, 43, 56, 0.25);
}

.is-header-light .c-btn-pill__dot {
  border-color: var(--color-text);
}

/* SPメニューを開いている間は、パネルが濃色なので白抜きに戻す */
.is-menu-open .l-header__logo-img--on-dark {
  opacity: 1;
}

.is-menu-open .l-header__logo-img--on-light {
  opacity: 0;
}

.is-menu-open .l-header {
  color: var(--color-bg-soft);
}

.is-menu-open .c-btn-pill {
  border-color: var(--color-line-light);
}

.is-menu-open .c-btn-pill__dot {
  border-color: var(--color-white);
}

.l-header__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.l-header__menu-btn {
  display: none;
  font-family: var(--font-en);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

@media (max-width: 840px) {
  .l-header {
    padding: 16px 16px 0;
    align-items: center;
  }

  .l-header__logo-img {
    height: 25px;
  }

  .l-header__menu-btn {
    display: block;
  }
}

@media (max-width: 540px) {
  .l-header__logo-img {
    height: 35px;
  }

  .l-header__actions {
    gap: 12px;
  }
}

/* ===== レイアウト：右の縦ナビ（PC） ===== */
.l-side-nav {
  position: fixed;
  top: 120px;
  right: 32px;
  z-index: 100;
  color: var(--color-bg-soft);
}

.l-side-nav__list {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.l-side-nav__link {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  height: 14px;
  overflow: hidden;
  font-family: var(--font-en);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.l-side-nav__text {
  display: block;
  height: 14px;
}

@media (max-width: 840px) {
  .l-side-nav {
    display: none;
  }
}

/* ===== レイアウト：SPメニュー（全画面パネル） ===== */
.l-menu {
  --section-rule: rgba(238, 244, 245, 0.2);
  --row-hover: rgba(238, 244, 245, 0.07);
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  padding: 80px var(--gutter);
  background-color: var(--color-navy);
  color: var(--color-bg-soft);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.l-menu__inner {
  width: 100%;
}

/* ===== レイアウト：フッター ===== */
.l-footer {
  --section-rule: rgba(238, 244, 245, 0.2);
  --row-hover: rgba(238, 244, 245, 0.07);
  position: relative;
  padding: var(--section-space) 0 80px;
  background-color: var(--color-navy);
  color: var(--color-bg-soft);
}

.l-footer__inner {
  z-index: 1;
}

.l-footer__nav {
  margin-left: auto;
  width: 50%;
}

.l-footer__brand {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-top: 120px;
}

.l-footer__logo-img {
  width: auto;
  height: 49px;
}

.l-footer__copyright {
  font-family: var(--font-en);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.02em;
}

.l-footer__copyright small {
  font-size: inherit;
}

.l-footer__info {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--section-rule);
}

.l-footer__company {
  font-family: var(--font-mincho);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.l-footer__data {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 32px;
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.75;
}

.l-footer__data-row {
  display: flex;
  gap: 12px;
}

.l-footer__data-term {
  color: var(--color-muted);
}

.l-footer__note {
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.75;
  color: var(--color-muted);
}

.l-footer__statement {
  margin-top: 160px;
  text-align: center;
}

.l-footer__statement-img {
  width: 1321px;
  margin: 0 auto;
}

.l-footer__tagline {
  margin-top: 24px;
  font-family: var(--font-mincho);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.03em;
}

@media (max-width: 840px) {
  .l-footer__nav {
    width: 100%;
  }

  .l-footer__brand {
    margin-top: 80px;
  }

  .l-footer__logo-img {
    height: 32px;
  }

  .l-footer__data {
    flex-direction: column;
  }

  .l-footer__statement {
    margin-top: 96px;
  }
}

@media (max-width: 540px) {
  .l-footer {
    padding-bottom: 48px;
  }

  .l-footer__brand {
    flex-direction: column;
    align-items: flex-start;
  }

  .l-footer__tagline {
    margin-top: 12px;
    font-size: 15px;
  }
}

/* ===== 部品：準備中ラベル（リンク先が未確定の項目） ===== */
.c-soon {
  display: inline-block;
  margin-left: 12px;
  padding: 0 8px;
  border: 1px solid currentColor;
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.05em;
  vertical-align: middle;
  opacity: 0.7;
  white-space: nowrap;
}

.is-soon {
  cursor: default;
}

/* ===== 部品：ヘッダーの常設CTA（c-btn-pill） ===== */
.c-btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px 11px 24px;
  border: 1px solid var(--color-line-light);
  border-radius: 100px;
  font-family: var(--font-en);
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.c-btn-pill__dot {
  display: block;
  width: 8px;
  height: 8px;
  border: 1px solid var(--color-white);
  border-radius: 50%;
}

@media (max-width: 840px) {
  .c-btn-pill {
    gap: 10px;
    padding: 8px 14px 8px 18px;
    font-size: 14px;
  }
}

@media (max-width: 540px) {
  .c-btn-pill {
    gap: 8px;
    padding: 7px 12px 7px 14px;
    font-size: 13px;
  }
}

/* ===== 部品：横罫＋縦の目盛り（c-rule）／セクションラベル（c-section-label） ===== */
.c-rule {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.c-rule__col {
  position: relative;
  min-height: 16px;
}

.c-rule__line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
}

.c-rule__tick {
  position: absolute;
  top: 0;
  width: 1px;
  height: 16px;
  background-color: currentColor;
}

.c-rule__tick--start {
  left: 0;
}

.c-rule__tick--end {
  right: 0;
}

.c-section-label__text {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 28px;
  font-family: var(--font-en);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.c-section-label__mark {
  display: block;
  width: 6px;
  height: 6px;
  background-color: var(--mark);
}

@media (max-width: 840px) {
  .c-section-label__text {
    font-size: 13px;
  }
}

/* ===== 部品：英字大見出し（SVG 2行） ===== */
.c-heading-en {
  margin-top: 96px;
}

.c-heading-en__line {
  overflow: hidden;
}

.c-heading-en__line--offset {
  padding-left: 32%;
}

.c-heading-en__img {
  width: auto;
  height: 120px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

.c-heading-en--center .c-heading-en__line + .c-heading-en__line {
  margin-top: 16px;
}

.c-heading-en--center .c-heading-en__img {
  height: 100px;
  margin: 0 auto;
  object-position: center center;
}

.l-section > .l-container > .c-heading-en--center:first-child {
  margin-top: 0;
}

@media (max-width: 1140px) {
  .c-heading-en {
    margin-top: 80px;
  }

  .c-heading-en__img {
    height: 100px;
  }

  .c-heading-en--center .c-heading-en__img {
    height: 80px;
  }
}

@media (max-width: 840px) {
  .c-heading-en {
    margin-top: 64px;
  }

  .c-heading-en__line--offset {
    padding-left: 16%;
  }

  .c-heading-en__img {
    height: 80px;
  }

  .c-heading-en--center .c-heading-en__img {
    height: 64px;
  }
}

@media (max-width: 540px) {
  .c-heading-en {
    margin-top: 48px;
  }

  .c-heading-en__line--offset {
    padding-left: 10%;
  }

  .c-heading-en__img {
    height: 56px;
  }

  .c-heading-en--center .c-heading-en__img {
    height: 40px;
  }
}

/* ===== 部品：◎ラベル（c-circle-label） ===== */
.c-circle-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mincho);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.03em;
}

.c-circle-label__icon {
  flex-shrink: 0;
  display: block;
  width: 32px;
  height: 32px;
}

.c-circle-label--center {
  justify-content: center;
}

@media (max-width: 540px) {
  .c-circle-label {
    gap: 10px;
    font-size: 15px;
  }

  .c-circle-label__icon {
    width: 24px;
    height: 24px;
  }
}

/* ===== 部品：◎ラベル＋リード文 ===== */
.c-section-intro {
  width: 50%;
  margin-top: 64px;
}

.c-section-intro__lead {
  margin-top: 24px;
}

@media (max-width: 1140px) {
  .c-section-intro {
    width: 66%;
  }
}

@media (max-width: 840px) {
  .c-section-intro {
    width: 100%;
    margin-top: 48px;
  }

  .c-section-intro__lead {
    margin-top: 16px;
  }
}

/* ===== 部品：無限マーキー（c-marquee） ===== */
.c-marquee {
  margin-top: 120px;
}

.c-marquee__line {
  display: block;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform-origin: left center;
}

.c-marquee__viewport {
  margin: 0 calc(var(--gutter) * -1);
  padding: 24px 0;
  overflow: hidden;
}

.c-marquee__track {
  display: flex;
  width: max-content;
}

/* gap 16px は画像の右 padding で取る（translateX(-100%) で継ぎ目なくループさせるため） */
.c-marquee__img {
  flex-shrink: 0;
  box-sizing: content-box;
  width: 1438px;
  height: 32px;
  max-width: none;
  padding-right: 16px;
}

@media (max-width: 840px) {
  .c-marquee {
    margin-top: 80px;
  }

  .c-marquee__viewport {
    padding: 16px 0;
  }
}

@media (max-width: 540px) {
  .c-marquee {
    margin-top: 56px;
  }

  .c-marquee__img {
    width: 1078px;
    height: 24px;
  }
}

/* ===== セクション本文・ボタンの置き場 ===== */
.c-section-body {
  margin-top: 64px;
}

.c-section-body > * + * {
  margin-top: 48px;
}

.c-section-btn {
  margin-top: 120px;
}

@media (max-width: 840px) {
  .c-section-body {
    margin-top: 48px;
  }

  .c-section-body > * + * {
    margin-top: 32px;
  }

  .c-section-btn {
    margin-top: 80px;
  }
}

@media (max-width: 540px) {
  .c-section-btn {
    margin-top: 56px;
  }
}

/* ===== 部品：カード（c-card） ===== */
.c-card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.c-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  padding: 16px;
  background-color: var(--card-bg);
}

.c-card__num {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-en);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.02em;
}

.c-card__mark {
  flex-shrink: 0;
  display: block;
  width: 6px;
  height: 6px;
  background-color: var(--mark);
}

.c-card__mark--alert {
  background-color: var(--color-alert);
}

.c-card__title {
  font-family: var(--font-mincho);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.03em;
}

.c-card__text {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.75;
}

.c-card__text + .c-card__text {
  margin-top: 4px;
}

.c-card__meta {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--section-rule);
}

.c-card__meta-row {
  display: flex;
  gap: 12px;
  font-size: 14px;
  line-height: 1.75;
}

.c-card__meta-label {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: calc(14px * 1.75);
  opacity: 0.7;
}

@media (max-width: 840px) {
  .c-card-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .c-card {
    gap: 32px;
  }

  .c-card__title {
    font-size: 20px;
  }
}

@media (max-width: 540px) {
  .c-card-list {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .c-card {
    gap: 24px;
  }
}

/* ===== 部品：横罫の行リスト（c-row-list） ===== */
.c-row-list {
  width: 100%;
  border-bottom: 1px solid var(--section-rule);
}

.c-row-list__row {
  border-top: 1px solid var(--section-rule);
}

.c-row-list__num {
  font-family: var(--font-en);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.02em;
}

/* 2列（左：項目／右：内容） */
.c-row-list--cols-2 .c-row-list__row {
  display: grid;
  grid-template-columns: 32% 1fr;
  gap: 24px;
  padding: 28px 0;
}

.c-row-list--cols-2 .c-row-list__term {
  font-family: var(--font-mincho);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.03em;
}

/* FAQ（左：Q番号＋質問／右：回答） */
.c-row-list--faq .c-row-list__row {
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding: 40px 0;
}

.c-row-list--faq .c-row-list__term {
  display: flex;
  align-items: baseline;
  gap: 24px;
}

.c-row-list--faq .c-row-list__num {
  flex-shrink: 0;
  width: 28px;
  color: var(--mark);
}

.c-row-list--faq .c-row-list__desc {
  font-size: 16px;
}

/* 表（3列） */
.c-row-list--table {
  table-layout: fixed;
}

.c-row-list__caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.c-row-list__head {
  padding: 0 24px 20px 0;
  font-size: 12px;
  line-height: 1.5;
  vertical-align: bottom;
  opacity: 0.7;
}

.c-row-list__row--head {
  border-top: 0;
}

.c-row-list__cell {
  padding: 28px 24px 28px 0;
  vertical-align: top;
}

.c-row-list__cell--term {
  width: 24%;
  font-family: var(--font-mincho);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.03em;
}

/* 比較表（FST の違い） */
.c-row-list--compare .c-row-list__cell:nth-child(2) {
  font-size: 14px;
  color: var(--color-muted);
}

.c-row-list--compare .c-row-list__cell:nth-child(3) {
  font-size: 16px;
  color: var(--color-bg-soft);
}

/* サイトマップ（フッター・SPメニュー） */
.c-row-list__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  font-family: var(--font-en);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.02em;
}

.c-row-list__label {
  display: flex;
  align-items: center;
}

/* 見出しだけの行リスト（TOP の支援方針・支援の進め方） */
.c-row-list--index .c-row-list__row {
  display: flex;
  align-items: baseline;
  gap: 32px;
  padding: 28px 0;
}

.c-row-list--index .c-row-list__num {
  flex-shrink: 0;
  color: var(--mark);
}

.c-row-list--index .c-row-list__label {
  font-family: var(--font-mincho);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.03em;
}

/* 格子状の番号リスト（標準成果物など） */
.c-row-list--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  column-gap: 16px;
  border-bottom: 0;
}

.c-row-list--grid .c-row-list__row {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 24px 0;
}

.c-row-list--grid .c-row-list__row:nth-child(5n) {
  border-bottom: 1px solid var(--section-rule);
}

.c-row-list--grid .c-row-list__num {
  color: var(--mark);
}

.c-row-list--grid .c-row-list__label {
  font-family: var(--font-mincho);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.03em;
}

@media (max-width: 840px) {
  .c-row-list--cols-2 .c-row-list__row,
  .c-row-list--faq .c-row-list__row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 24px 0;
  }

  .c-row-list--cols-2 .c-row-list__term {
    font-size: 17px;
  }

  .c-row-list--faq .c-row-list__desc {
    padding-left: 52px;
    font-size: 15px;
  }

  /* 表は横スクロールさせず、1項目ごとに縦に積む */
  .c-row-list--table,
  .c-row-list--table tbody,
  .c-row-list--table tr,
  .c-row-list--table th,
  .c-row-list--table td {
    display: block;
    width: 100%;
  }

  .c-row-list--table thead {
    display: none;
  }

  .c-row-list--table .c-row-list__row {
    padding: 24px 0;
  }

  .c-row-list__cell {
    padding: 0;
  }

  .c-row-list__cell--term {
    font-size: 17px;
  }

  .c-row-list__cell[data-label] {
    display: grid;
    grid-template-columns: 9em 1fr;
    gap: 12px;
    margin-top: 12px;
  }

  .c-row-list__cell[data-label]::before {
    content: attr(data-label);
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: inherit;
    color: var(--color-muted);
  }

  .c-row-list--grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
    border-bottom: 1px solid var(--section-rule);
  }

  .c-row-list--grid .c-row-list__row:nth-child(5n) {
    border-bottom: 0;
  }

  .c-row-list--grid .c-row-list__row {
    padding: 18px 0;
  }

  .c-row-list--grid .c-row-list__label {
    font-size: 17px;
  }

  .c-row-list--index .c-row-list__row {
    gap: 20px;
    padding: 20px 0;
  }

  .c-row-list--index .c-row-list__label {
    font-size: 20px;
  }
}

@media (max-width: 540px) {
  .c-row-list--faq .c-row-list__term {
    gap: 16px;
  }

  .c-row-list--faq .c-row-list__desc {
    padding-left: 0;
    font-size: 14px;
  }

  .c-row-list__cell[data-label] {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* ===== 部品：まとめ・注記 ===== */
.c-summary {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--section-rule);
}

.c-summary__label {
  flex-shrink: 0;
  font-size: 12px;
  line-height: 1.75;
  opacity: 0.7;
}

.c-summary__text {
  font-family: var(--font-mincho);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: -0.01em;
}

.c-summary--mincho .c-summary__text {
  font-size: 20px;
}

.c-note {
  font-size: 16px;
  line-height: 1.9;
}

@media (max-width: 540px) {
  .c-summary {
    flex-direction: column;
    gap: 4px;
  }

  .c-summary__text {
    font-size: 17px;
  }
}

/* ===== 部品：大型リンクボタン（c-btn-large） ===== */
.c-btn-large {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  width: 100%;
  height: 198px;
  background-color: var(--btn-plate);
  color: inherit;
}

/* 中面。角丸が大きくなると、四隅から下の板がのぞく */
.c-btn-large::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--section-rule);
  border-radius: 40px;
  background-color: var(--btn-fill);
}

.c-btn-large__text,
.c-btn-large__arrow {
  position: relative;
  z-index: 1;
}

.c-btn-large__text {
  font-family: var(--font-en);
  font-size: 48px;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.c-btn-large__arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 72px;
  height: 40px;
  border: 1px solid currentColor;
  border-radius: 100px;
}

.c-btn-large__arrow svg {
  width: 24px;
  height: 24px;
}

@media (max-width: 840px) {
  .c-btn-large {
    height: 140px;
  }

  .c-btn-large__text {
    font-size: 32px;
  }
}

@media (max-width: 540px) {
  .c-btn-large {
    gap: 16px;
    height: 94px;
  }

  .c-btn-large::before {
    border-radius: 32px;
  }

  .c-btn-large__text {
    font-size: 18px;
  }

  .c-btn-large__arrow {
    width: 48px;
    height: 28px;
  }

  .c-btn-large__arrow svg {
    width: 18px;
    height: 18px;
  }
}

/* ===== 部品：下層ページの冒頭（c-page-head） ===== */
.c-page-head {
  padding-top: 280px;
  padding-bottom: 160px;
  text-align: center;
}

.c-page-head .c-circle-label {
  margin-top: 48px;
}

.c-page-head__lead {
  margin-top: 24px;
}

@media (max-width: 840px) {
  .c-page-head {
    padding-top: 160px;
    padding-bottom: 96px;
  }

  .c-page-head .c-circle-label {
    margin-top: 32px;
  }
}

@media (max-width: 540px) {
  .c-page-head {
    padding-top: 120px;
    padding-bottom: 72px;
  }

  .c-page-head__lead {
    text-align: left;
  }
}

/* ===== 部品：CONTACT INFORMATION（c-contact） ===== */
.c-contact .c-circle-label {
  margin-top: 48px;
}

.c-contact__message {
  margin-top: 64px;
  text-align: center;
}

.c-contact__title {
  font-family: var(--font-mincho);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.03em;
}

.c-contact__text {
  margin-top: 24px;
  font-size: 16px;
}

.c-contact__check {
  display: inline-flex;
  align-items: baseline;
  gap: 24px;
  margin-top: 40px;
  padding: 20px 0;
  border-top: 1px solid var(--section-rule);
  border-bottom: 1px solid var(--section-rule);
}

.c-contact__check-label {
  flex-shrink: 0;
  font-size: 12px;
  opacity: 0.7;
}

.c-contact__check-items {
  font-family: var(--font-mincho);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.01em;
}

.c-contact-card-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 96px;
}

.c-contact-card-list--single {
  grid-template-columns: 1fr;
  max-width: 680px;
  margin-right: auto;
  margin-left: auto;
}

.c-contact-card {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 204px;
  height: 100%;
  padding: 16px;
  background-color: var(--card-bg);
}

.c-contact-card__icon {
  flex-shrink: 0;
  width: 172px;
  height: 172px;
}

.c-contact-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.c-contact-card__label {
  font-family: var(--font-en);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.02em;
}

.c-contact-card__title {
  margin-top: 8px;
  font-family: var(--font-mincho);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.03em;
}

.c-contact-card__text {
  font-size: 14px;
  line-height: 1.75;
}

@media (max-width: 1140px) {
  .c-contact-card__icon {
    width: 120px;
    height: 120px;
  }
}

@media (max-width: 840px) {
  .c-contact__message {
    margin-top: 48px;
  }

  .c-contact__title {
    font-size: 24px;
  }

  .c-contact__text {
    font-size: 15px;
  }

  .c-contact__check {
    flex-direction: column;
    gap: 4px;
  }

  .c-contact__check-items {
    font-size: 17px;
  }

  .c-contact-card-list {
    grid-template-columns: 1fr;
    margin-top: 64px;
  }

  .c-contact-card {
    min-height: 0;
  }

  .c-contact-card__icon {
    width: 96px;
    height: 96px;
  }

  .c-contact-card__title {
    font-size: 22px;
  }
}

@media (max-width: 540px) {
  .c-contact__title {
    font-size: 20px;
  }

  .c-contact__text {
    font-size: 14px;
    text-align: left;
  }

  .c-contact__text br {
    display: none;
  }

  .c-contact__check {
    display: flex;
  }

  .c-contact__check-items {
    font-size: 15px;
    word-break: keep-all;
  }

  .c-contact-card {
    gap: 12px;
  }

  .c-contact-card__icon {
    width: 72px;
    height: 72px;
  }

  .c-contact-card__title {
    margin-top: 4px;
    font-size: 20px;
  }
}

/* =========================================================
   フェーズ2：UIの挙動
   F スクロール表示 ／ H 無限マーキー ／ I ナビ ／ J ボタン・カードのホバー
   ========================================================= */

/* ===== F スクロール表示 =====
   初期状態は .js-appear--*、画面に入ると JS が .is-inview を付ける。
   <head> の1行で html に .is-js を付けたときだけ隠す（JS が動かない環境では最初から表示）。 */

/* --heading-ja：MESSAGE の和文大見出し（1行ずつ） */
.is-js .js-appear--heading-ja {
  opacity: 0;
  translate: 0 36px;
  transition:
    opacity 800ms cubic-bezier(0.4, 0.4, 0, 1) 150ms,
    translate 800ms cubic-bezier(0.4, 0.4, 0, 1) 150ms;
}

/* --fade：MESSAGE の本文 */
.is-js .js-appear--fade {
  opacity: 0;
  transition: opacity 1000ms cubic-bezier(0.4, 0.4, 0, 1) 300ms;
}

/* --heading-en：英字大見出しSVG（行ごと）。100% ＝ その行の画像の高さ */
.is-js .js-appear--heading-en {
  opacity: 0;
  translate: 0 100%;
  transition:
    opacity 800ms cubic-bezier(0.19, 1, 0.22, 1) 150ms,
    translate 800ms cubic-bezier(0.19, 1, 0.22, 1) 150ms;
}

.is-js .js-appear--heading-ja.is-inview,
.is-js .js-appear--fade.is-inview,
.is-js .js-appear--heading-en.is-inview {
  opacity: 1;
  translate: 0 0;
}

/* --line-x：セクション冒頭の横罫（左 200ms／右 400ms） */
.is-js .js-appear--line-x {
  width: 0%;
  transition: width 800ms cubic-bezier(1, 0, 0, 1) 200ms;
}

.is-js .c-rule__col--right .js-appear--line-x {
  transition-delay: 400ms;
}

.is-js .js-appear--line-x.is-inview {
  width: 100%;
}

/* --line-y：横罫から下がる縦の目盛り（左から 450／500／550／600ms） */
.is-js .js-appear--line-y {
  height: 0;
  transition: height 800ms cubic-bezier(1, 0, 0, 1) 450ms;
}

.is-js .c-rule__col--left .c-rule__tick--end {
  transition-delay: 500ms;
}

.is-js .c-rule__col--right .c-rule__tick--start {
  transition-delay: 550ms;
}

.is-js .c-rule__col--right .c-rule__tick--end {
  transition-delay: 600ms;
}

.is-js .js-appear--line-y.is-inview {
  height: 16px;
}

/* --scale-x：マーキー上の横罫 */
.is-js .js-appear--scale-x {
  scale: 0 1;
  transform-origin: left;
  transition: scale 300ms cubic-bezier(0.4, 0.4, 0, 1) 200ms;
}

.is-js .js-appear--scale-x.is-inview {
  scale: 1 1;
}

/* --radius：大型リンクボタンの中面 */
.is-js .js-appear--radius::before {
  border-radius: 0;
  transition: border-radius 800ms cubic-bezier(0.4, 0.4, 0, 1) 1000ms;
}

.is-js .js-appear--radius.is-inview::before {
  border-radius: 40px;
}

@media (max-width: 1140px) {
  .is-js .js-appear--heading-ja {
    translate: 0 32px;
  }
}

@media (max-width: 840px) {
  .is-js .js-appear--heading-ja {
    translate: 0 24px;
  }
}

@media (max-width: 540px) {
  .is-js .js-appear--heading-ja {
    translate: 0 18px;
  }

  .is-js .js-appear--radius.is-inview::before {
    border-radius: 32px;
  }
}

/* ===== H 無限マーキー（右から左へ・70s linear） ===== */
.c-marquee__img {
  animation: c-marquee 70s linear infinite;
}

@keyframes c-marquee {
  from {
    transform: translateX(0);
  }

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

/* ===== I ナビゲーション ===== */

/* 縦ナビのホバー：2段に重ねた同じ語を、下段に入れ替える */
.l-side-nav__text {
  transition: translate 200ms cubic-bezier(0.4, 0.4, 0, 1);
}

/* SPメニュー：opacity の切り替え */
.l-menu {
  transition:
    opacity 400ms cubic-bezier(0.4, 0.4, 0, 1),
    visibility 0s linear 400ms;
}

.is-menu-open .l-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 400ms cubic-bezier(0.4, 0.4, 0, 1),
    visibility 0s linear 0s;
}

.is-menu-open {
  overflow: hidden;
}

/* 常設CTA */
.c-btn-pill {
  transition:
    border-color 400ms cubic-bezier(1, 0, 0, 1),
    background-color 400ms cubic-bezier(1, 0, 0, 1),
    color 400ms cubic-bezier(1, 0, 0, 1);
}

.c-btn-pill__dot {
  transition:
    border-color 400ms cubic-bezier(1, 0, 0, 1),
    background-color 400ms cubic-bezier(1, 0, 0, 1);
}

/* ===== J ボタン・カードのホバー ===== */
.l-section--light {
  --card-hover: var(--color-accent);
}

.l-section--dark {
  --card-hover: var(--color-accent-light);
}

/* 角丸の登場（--radius）が終わったら JS が .is-appeared を付け、ホバー用の秒数に切り替える */
.c-btn-large.is-appeared::before,
.c-btn-large:not(.js-appear)::before {
  transition:
    border-radius 600ms cubic-bezier(0.95, 0.05, 0.795, 0.035),
    background-color 600ms cubic-bezier(0.95, 0.05, 0.795, 0.035);
}

.c-card__title {
  transition: color 600ms cubic-bezier(1, 0, 0, 1);
}

@media (hover: hover) {
  .l-side-nav__link:hover .l-side-nav__text {
    translate: 0 -14px;
  }

  .c-btn-pill:hover {
    border-color: transparent;
    background-color: var(--color-bg-soft);
    color: var(--color-navy);
  }

  .is-header-light .c-btn-pill:hover {
    background-color: var(--color-navy);
    color: var(--color-bg-soft);
  }

  .is-header-light .c-btn-pill:hover .c-btn-pill__dot {
    border-color: var(--color-bg-soft);
    background-color: var(--color-bg-soft);
  }

  .c-btn-pill:hover .c-btn-pill__dot {
    border-color: var(--color-navy);
    background-color: var(--color-navy);
  }

  .c-btn-large.is-appeared:hover::before,
  .c-btn-large:not(.js-appear):hover::before {
    border-radius: 60px;
    background-color: var(--btn-fill-hover);
  }

  .c-card:hover .c-card__title {
    color: var(--card-hover);
  }
}

/* サイトマップの行：ホバーで行全体の地色が少し明るくなる */
.c-row-list--sitemap .c-row-list__link {
  padding-right: 16px;
  padding-left: 16px;
  margin-right: -16px;
  margin-left: -16px;
  transition: background-color 300ms cubic-bezier(0.4, 0.4, 0, 1);
}

@media (hover: hover) {
  .c-row-list--sitemap .c-row-list__link:hover {
    background-color: var(--row-hover);
  }
}

.c-row-list--sitemap .c-row-list__link:focus-visible {
  background-color: var(--row-hover);
}

/* キーボード操作でも同じ変化を見せる */
.l-side-nav__link:focus-visible .l-side-nav__text {
  translate: 0 -14px;
}

.c-btn-pill:focus-visible {
  border-color: transparent;
  background-color: var(--color-bg-soft);
  color: var(--color-navy);
}

.c-btn-large.is-appeared:focus-visible::before {
  border-radius: 60px;
  background-color: var(--btn-fill-hover);
}

/* ===== 動きを減らす設定のとき ===== */
@media (prefers-reduced-motion: reduce) {
  .is-js .js-appear {
    opacity: 1;
    translate: 0 0;
    scale: 1 1;
    transition: none;
  }

  .is-js .js-appear--line-x {
    width: 100%;
  }

  .is-js .js-appear--line-y {
    height: 16px;
  }

  .is-js .js-appear--radius::before {
    border-radius: 40px;
  }

  .c-marquee__img {
    animation: none;
  }

  .l-side-nav__text,
  .l-menu,
  .c-btn-pill,
  .c-btn-pill__dot,
  .c-btn-large,
  .c-card__title {
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 540px) {
  .is-js .js-appear--radius::before {
    border-radius: 32px;
  }
}

/* =========================================================
   フェーズ3：B ヒーローの時刻表
   body に .is-loaded が付いた瞬間を 0ms とする。
   TOP はローディング（A項）があるので 4200ms ずらし、下層ページはずらさない。
   ========================================================= */
:root {
  --hero-offset: 0ms;
}

.p-top {
  --hero-offset: 1500ms;
}

.is-js .js-hero--line-1,
.is-js .js-hero--line-2 {
  opacity: 0;
  transition:
    opacity 1000ms cubic-bezier(0.19, 1, 0.22, 1),
    translate 1000ms cubic-bezier(0.19, 1, 0.22, 1);
}

.is-js .js-hero--line-1 {
  translate: 0 97px;
  transition-delay: var(--hero-offset);
}

.is-js .js-hero--line-2 {
  translate: 0 111px;
  transition-delay: calc(var(--hero-offset) + 100ms);
}

/* 和文タグライン（下層ページは ◎ラベルとリード文） */
.is-js .js-hero--lead {
  opacity: 0;
  transition: opacity 1000ms cubic-bezier(0.4, 0.4, 0, 1) calc(var(--hero-offset) + 600ms);
}

/* SCROLL 誘導 */
.is-js .js-hero--scroll {
  opacity: 0;
  transition:
    opacity 1200ms ease calc(var(--hero-offset) + 1000ms),
    translate 1200ms ease calc(var(--hero-offset) + 1000ms);
}

.is-js .p-hero__scroll.js-hero--scroll {
  translate: -50% 24px;
}

/* PC の右の縦ナビ */
.is-js .l-side-nav {
  opacity: 0;
  translate: 0 -24px;
  transition:
    opacity 1200ms ease calc(var(--hero-offset) + 2300ms),
    translate 1200ms ease calc(var(--hero-offset) + 2300ms);
}

/* PC のヘッダー */
.is-js .l-header {
  opacity: 0;
  translate: 0 -24px;
  transition:
    opacity 1200ms ease calc(var(--hero-offset) + 1000ms),
    translate 1200ms ease calc(var(--hero-offset) + 1000ms);
}

body.is-loaded .js-hero--line-1,
body.is-loaded .js-hero--line-2,
body.is-loaded .js-hero--lead,
body.is-loaded .js-hero--scroll,
body.is-loaded .l-side-nav,
body.is-loaded .l-header {
  opacity: 1;
  translate: 0 0;
}

body.is-loaded .p-hero__scroll.js-hero--scroll {
  translate: -50% 0;
}

@media (max-width: 1140px) {
  .is-js .js-hero--line-1 {
    translate: 0 77px;
  }

  .is-js .js-hero--line-2 {
    translate: 0 78px;
  }
}

@media (max-width: 840px) {
  .is-js .js-hero--line-1 {
    translate: 0 53px;
  }

  .is-js .js-hero--line-2 {
    translate: 0 60px;
  }

  /* SPのヘッダーだけ時刻とイージングが違う */
  .is-js .l-header {
    transition:
      opacity 1200ms cubic-bezier(0.4, 0.4, 0, 1) calc(var(--hero-offset) + 1200ms),
      translate 1200ms cubic-bezier(0.4, 0.4, 0, 1) calc(var(--hero-offset) + 1200ms);
  }
}

@media (max-width: 540px) {
  .is-js .js-hero--line-1 {
    translate: 0 55px;
  }

  .is-js .js-hero--line-2 {
    translate: 0 65px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .is-js .js-hero,
  .is-js .l-header,
  .is-js .l-side-nav {
    opacity: 1;
    translate: 0 0;
    transition: none;
  }

  .is-js .p-hero__scroll.js-hero--scroll {
    translate: -50% 0;
  }
}