/* =============================================
   トップページ（/）
   Figma: Corporate2026 / TOP (2176:1099)
   コンテナは 1280（他ページの 1120 と違う）。ラベル・リンク・カードの部品は
   knowledge.css / service.css / people.css を共用し、tp- は本ページ固有。
   ============================================= */

.tp-page {
  padding-top: 0; /* MV が最上部まで来るので固定ヘッダーぶんの余白は要らない */
}

.tp-container {
  max-width: 1320px; /* 1280 + 左右20 */
  margin: 0 auto;
  padding: 0 20px;
}

.tp-section {
  padding: 104px 0;
}

.tp-stack-40,
.tp-stack-64 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.tp-stack-64 {
  gap: 64px;
}

.tp-stack-40.is-center,
.tp-stack-64.is-center {
  align-items: center;
}

.tp-page .kn-label-text {
  line-height: 1.75;
  letter-spacing: 0.04em;
}

.tp-page .kn-more {
  letter-spacing: 0.03em;
}

.tp-page a.kn-more,
.tp-page a.tp-about-link {
  color: var(--sv-gold);
}

.tp-page a.tp-more:hover,
.tp-page .tp-svc:hover,
.tp-page .tp-member:hover,
.tp-page .tp-hex-card:hover,
.tp-page .tp-about-link:hover,
.tp-page .tp-member-bar:hover {
  opacity: 0.8;
}

.tp-page .tp-svc,
.tp-page .tp-member,
.tp-page .tp-hex-card,
.tp-page .tp-about-link,
.tp-page .tp-member-bar,
.tp-page .tp-more {
  transition: opacity 0.3s;
}

/* --- MV --- */
.tp-mv {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 1080px;
  padding: 0 80px;
  background: #fff;
}

.tp-mv-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 906px;
  overflow: hidden;
  background: url("/img/top/blue-bg.jpg") center / cover no-repeat, #1f3355;
}

/* 320px の光。Figma の Ellipse 34（blur 92）を SVG で置き、
   Figma のモーション（31秒ループ・移動／拡縮／透明度）をそのまま keyframes にしている */
.tp-mv-glow {
  --g: 1; /* 移動量の倍率。狭い画面では小さくする */
  position: absolute;
  top: -25px; /* 320px の円が (8.33%+135px, 159px)。ぼかしの余白ぶん（184px）外に広げる */
  left: calc(8.33% - 49px);
  width: 688px;
  height: 688px;
  background: url("/img/top/glow.svg") center / 100% 100% no-repeat;
  opacity: 0.64;
  scale: 1.04;
  animation: tp-glow-opacity 31s linear infinite, tp-glow-move 31s linear infinite, tp-glow-scale 31s linear infinite;
}

@keyframes tp-glow-opacity {
  0% { opacity: 0.64; animation-timing-function: cubic-bezier(0.35, 0.05, 0.25, 1); }
  17% { opacity: 0.72; animation-timing-function: cubic-bezier(0.35, 0.05, 0.25, 1); }
  31% { opacity: 0.56; animation-timing-function: cubic-bezier(0.35, 0.05, 0.25, 1); }
  47% { opacity: 0.7; animation-timing-function: cubic-bezier(0.35, 0.05, 0.25, 1); }
  63% { opacity: 0.52; animation-timing-function: cubic-bezier(0.35, 0.05, 0.25, 1); }
  79% { opacity: 0.71; animation-timing-function: cubic-bezier(0.35, 0.05, 0.25, 1); }
  91% { opacity: 0.58; animation-timing-function: cubic-bezier(0.35, 0.05, 0.25, 1); }
  100% { opacity: 0.64; }
}

@keyframes tp-glow-move {
  0% { translate: 0 0; animation-timing-function: cubic-bezier(0.35, 0.05, 0.25, 1); }
  17% { translate: calc(460.8px * var(--g)) calc(-68.267px * var(--g)); animation-timing-function: cubic-bezier(0.35, 0.05, 0.25, 1); }
  31% { translate: calc(604.8px * var(--g)) calc(113.778px * var(--g)); animation-timing-function: cubic-bezier(0.35, 0.05, 0.25, 1); }
  47% { translate: calc(489.6px * var(--g)) calc(273.067px * var(--g)); animation-timing-function: cubic-bezier(0.35, 0.05, 0.25, 1); }
  63% { translate: calc(230.4px * var(--g)) calc(318.578px * var(--g)); animation-timing-function: cubic-bezier(0.35, 0.05, 0.25, 1); }
  79% { translate: calc(-57.6px * var(--g)) calc(227.556px * var(--g)); animation-timing-function: cubic-bezier(0.35, 0.05, 0.25, 1); }
  91% { translate: calc(144px * var(--g)) calc(-22.756px * var(--g)); animation-timing-function: cubic-bezier(0.35, 0.05, 0.25, 1); }
  100% { translate: 0 0; }
}

@keyframes tp-glow-scale {
  0% { scale: 1.04; animation-timing-function: cubic-bezier(0.35, 0.05, 0.25, 1); }
  17% { scale: 1.14; animation-timing-function: cubic-bezier(0.35, 0.05, 0.25, 1); }
  31% { scale: 0.8; animation-timing-function: cubic-bezier(0.35, 0.05, 0.25, 1); }
  47% { scale: 1.08; animation-timing-function: cubic-bezier(0.35, 0.05, 0.25, 1); }
  63% { scale: 0.74; animation-timing-function: cubic-bezier(0.35, 0.05, 0.25, 1); }
  79% { scale: 1.1; animation-timing-function: cubic-bezier(0.35, 0.05, 0.25, 1); }
  91% { scale: 0.84; animation-timing-function: cubic-bezier(0.35, 0.05, 0.25, 1); }
  100% { scale: 1.04; }
}

@media (prefers-reduced-motion: reduce) {
  .tp-mv-glow {
    animation: none;
  }
}

.tp-mv-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  width: 100%;
  max-width: 1280px; /* 他セクションのコンテナ幅より広げない */
  margin: 0 auto;
  color: #fff;
  text-align: right;
}

.tp-mv-head {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.tp-mv-eyebrow {
  padding-right: 28px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0.03em;
}

.tp-mv-title {
  font-weight: 700;
  font-size: 40px;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.tp-mv-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 24px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0.1em;
  transition: opacity 0.3s;
}

.tp-mv-link:hover {
  opacity: 0.8;
}

.tp-mv-link img {
  display: block;
  width: 40px;
  height: 40px;
}

.tp-mv-cards {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: min(1280px, 100% - 160px);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}

/* 記事カード（MV・KNOWLEDGE 共用） */
/* ホバーは透過ではなく、少し浮かせて影を付け、画像をゆっくり寄せる */
.tp-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--sv-gold);
  transition: transform 0.3s, box-shadow 0.3s;
}

.tp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(26, 26, 26, 0.14);
}

.tp-card-img {
  aspect-ratio: 1200 / 630;
  overflow: hidden;
  background: #d9d9d9;
}

.tp-card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.tp-card:hover .tp-card-img img {
  transform: scale(1.04);
}

.tp-card-body {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  gap: 10px;
  padding: 24px 16px;
}

.tp-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tp-card-pill {
  padding: 2px 16px;
  border: 1px solid var(--sv-gold);
  border-radius: 40px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--sv-gold);
  white-space: nowrap;
}

.tp-card-date {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--sv-gold);
}

.tp-card-title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--sv-gold);
}

/* --- 03_Service --- */
.tp-vision {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  padding: 40px 24px;
  border: 1px solid var(--sv-blue);
  border-bottom: 0;
}

.tp-vision-band {
  padding: 0 24px;
  background: url("/img/service/cta-blue.jpg") 0 0 / 100% 100% no-repeat, #1a1a1a;
}

.tp-vision-band p {
  font-weight: 700;
  font-size: 32px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: #fff;
}

.tp-vision-text {
  padding: 0 24px;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--sv-ink);
}

.tp-services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
}

.tp-svc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--sv-gold);
}

.tp-svc-badge {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 10px 24px;
  background: var(--sv-gold);
  color: #fff;
}

.tp-svc-name {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.35;
  letter-spacing: 0.03em;
}

.tp-svc-sub {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.03em;
}

.tp-svc-logo {
  display: block;
  width: 115px;
  height: 32px;
}

.tp-svc-desc {
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--sv-gold);
}

.tp-svc-elements {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.tp-svc-elements-label {
  font-weight: 700;
  font-size: 12px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--sv-gold);
}

.tp-svc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tp-svc-chips span {
  padding: 2px 10px;
  background: var(--sv-gold);
  font-size: 12px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: #fff;
  white-space: nowrap;
}

.tp-svc .kn-more {
  margin-top: auto;
}

/* --- 04_Case + 05_Member（紺の背景の上に、角丸のパネル） --- */
.tp-blue {
  background: url("/img/top/blue-bg.jpg") center / cover no-repeat, #1f3355;
}

.tp-case {
  color: #fff;
}

.tp-stats {
  display: flex;
  gap: 64px;
  padding: 24px 0;
}

.tp-stat {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tp-stat-label {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.75;
  letter-spacing: 0.04em;
}

.tp-stat-num {
  display: flex;
  align-items: flex-end;
}

.tp-stat-num span {
  font-family: var(--kn-en-cond);
  font-weight: 500;
  font-size: 94px;
  line-height: 0.85;
  letter-spacing: 0.04em;
}

.tp-stat-num em {
  font-style: normal;
  font-size: 40px;
  letter-spacing: -0.04em;
}

.tp-stat-num small {
  font-weight: 500;
  font-size: 24px;
  line-height: 1.45;
  letter-spacing: 0.04em;
}

.tp-members {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  padding-top: 104px;
  background: #eef0f2;
  border-radius: 240px 240px 0 0;
}

.tp-member-row {
  display: flex;
  justify-content: center;
  gap: 104px;
  width: 100%;
}

.tp-member {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 302px;
}

.tp-member-photo {
  position: relative;
  width: 302px;
  height: 302px;
  overflow: hidden;
  background: #d9d9d9;
}

.tp-member-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ホバーで笑顔の写真（メンバー詳細モーダルと同じ切り抜き）に切り替わる */
.tp-page .tp-member-smile {
  position: absolute;
  max-width: none;
  object-fit: fill;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.tp-member:hover .tp-member-smile {
  opacity: 1;
}

.tp-member-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.tp-member-bar {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 24px 80px;
  background: #fff;
  border-top: 1px solid var(--sv-gold);
  border-bottom: 1px solid var(--sv-gold);
}

/* --- 02_Solution --- */
.tp-solution {
  background: var(--sv-beige);
}

.tp-solution-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.tp-h2 {
  font-weight: 700;
  font-size: 40px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  text-align: center;
  color: var(--sv-ink);
}

.tp-solution-lead {
  max-width: 800px;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--sv-sec);
}

.tp-hex-wrap {
  position: relative;
  width: 100%;
  max-width: 1232px;
  height: 752px;
  margin: 40px 0;
}

/* 1232×752 の盤面。狭い画面では JS で transform: scale() を掛ける */
.tp-hex {
  position: absolute;
  top: 0;
  left: 0;
  width: 1232px;
  height: 752px;
  transform-origin: top left;
}

.tp-page .tp-hex > img,
.tp-page .tp-hex-lines {
  position: absolute;
  display: block;
  max-width: none;
  pointer-events: none;
}

.tp-page .tp-hex-outer {
  top: 175.5px;
  left: 443.1px;
  width: 353.75px;
  height: 398.9px;
}

.tp-page .tp-hex-inner {
  top: 246.9px;
  left: 505.3px;
  width: 229.4px;
  height: 256.2px;
}

.tp-page .tp-hex-lines {
  top: 0;
  left: 0;
  width: 1232px;
  height: 752px;
}

.tp-page .tp-hex-center {
  top: 221.5px;
  left: 484px;
  width: 272px;
  height: 308px;
}

.tp-hex-label {
  position: absolute;
  top: 341px;
  left: 620px;
  width: 180px;
  transform: translateX(-50%);
  font-weight: 900;
  font-size: 24px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-align: center;
  color: #fff;
  pointer-events: none;
}

.tp-hex-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 330px;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--sv-gold);
  border-radius: 6px;
  text-align: center;
}

.tp-hex-en {
  font-family: var(--kn-en);
  font-style: italic;
  font-weight: 500;
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--sv-gold);
}

.tp-hex-jp {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.35;
  letter-spacing: 0.04em;
  color: var(--sv-ink);
}

.tp-hex-s {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: #666;
}

/* --- 05_Knowledge --- */
.tp-knowledge {
  background: #1a1a1a;
}

.tp-label-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.tp-label-note {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: #fff;
}

.tp-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  width: 100%;
}

/* --- 06_About --- */
.tp-about-row {
  display: flex;
  gap: 64px;
  width: 100%;
}

.tp-about-link {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--sv-gold);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.5;
  letter-spacing: 0.03em;
}

/* =============================================
   Responsive（Figma は PC のみ）
   ============================================= */
@media (max-width: 1024px) {
  .tp-mv {
    min-height: 0;
    padding: 0 20px 48px;
  }

  .tp-mv-bg {
    height: 640px;
  }

  .tp-mv-glow {
    --g: 0.4;
    top: -60px;
    left: -10%;
    width: 480px;
    height: 480px;
  }

  .tp-mv-copy {
    padding: 180px 0 64px;
  }

  .tp-mv-title {
    font-size: 32px;
  }

  /* MV の記事カードは、縦に積むと長くなるので横並び（左に小さなサムネ、右にタイトル）にする */
  .tp-mv-cards {
    position: relative; /* 絶対配置の背景より手前に出す */
    z-index: 1;
    inset: auto; /* PC 用の left/bottom を打ち消す */
    width: auto;
    transform: none;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    max-width: 560px;
    margin: 0 auto;
  }

  .tp-mv-cards .tp-card {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
  }

  .tp-mv-cards .tp-card-img {
    flex-shrink: 0;
    width: 132px;
  }

  .tp-mv-cards .tp-card-body {
    flex: 1 1 0;
    gap: 6px;
    min-width: 0;
    padding: 0;
  }

  .tp-mv-cards .tp-card-meta {
    justify-content: flex-start;
    gap: 10px;
  }

  .tp-mv-cards .tp-card-pill {
    padding: 0 10px;
    font-size: 11px;
    line-height: 1.6;
  }

  .tp-mv-cards .tp-card-date {
    font-size: 11px;
    line-height: 1.6;
  }

  .tp-mv-cards .tp-card-title {
    display: -webkit-box;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.6;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .tp-services {
    grid-template-columns: minmax(0, 1fr);
  }

  .tp-stats {
    flex-direction: column;
    gap: 32px;
  }

  .tp-member-row {
    flex-direction: column;
    align-items: center;
    gap: 48px;
  }

  .tp-members {
    border-radius: 120px 120px 0 0;
  }

  .tp-cards {
    grid-template-columns: minmax(0, 1fr);
    max-width: 480px;
    margin: 0 auto;
  }

  .tp-about-row {
    flex-direction: column;
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .tp-section {
    padding: 64px 0;
  }

  .tp-stack-40,
  .tp-stack-64 {
    gap: 32px;
  }

  .tp-mv-bg {
    height: 520px;
  }

  .tp-mv-copy {
    padding: 140px 0 48px;
  }

  /* スマホではメインコピーを中央揃えにし、肩書きは見出しと同じ幅に広げる */
  .tp-mv-copy {
    align-items: center;
    text-align: center;
  }

  .tp-mv-head {
    align-items: stretch;
    width: max-content;
    max-width: 100%;
  }

  .tp-mv-eyebrow {
    padding-right: 0;
    font-size: 13px;
    text-align: justify;
    text-align-last: justify;
  }

  .tp-mv-title {
    font-size: 32px;
  }

  .tp-mv-link {
    padding: 0;
    font-size: 14px;
  }

  .tp-vision {
    gap: 24px;
    padding: 8px;
  }

  .tp-vision-band {
    padding: 8px 12px;
  }

  .tp-vision-text {
    padding: 0 8px;
  }

  .tp-svc {
    gap: 16px;
    padding: 8px;
  }

  .tp-svc-badge {
    padding: 10px 12px;
  }

  .tp-vision-band p {
    font-size: 20px;
  }

  .tp-vision-text {
    font-size: 16px;
  }

  .tp-blank {
    display: none;
  }

  .tp-vision-text p + p {
    margin-top: 8px;
  }

  /* CASE の数字はスマホでは中央揃え */
  .tp-stats {
    align-items: center;
    width: 100%;
    text-align: center;
  }

  .tp-stat {
    align-items: center;
  }

  .tp-stat-num {
    justify-content: center;
  }

  .tp-stat-num span {
    font-size: 64px;
  }

  .tp-stat-num em {
    font-size: 28px;
  }

  .tp-stat-label {
    font-size: 18px;
  }

  .tp-members {
    gap: 48px;
    padding-top: 64px;
    border-radius: 64px 64px 0 0;
  }

  .tp-member-bar {
    padding: 20px;
  }

  .tp-member-bar .kn-more {
    font-size: 14px;
    text-align: left;
  }

  .tp-h2 {
    font-size: 28px;
  }

  .tp-solution-lead {
    font-size: 16px;
  }

  /* 6つの力の図は、スマホでは六角形をやめてカードを2列3段に並べる（六角図の順） */
  .tp-hex-wrap {
    height: auto !important;
    margin: 0;
  }

  .tp-hex {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    height: auto;
    transform: none !important;
  }

  .tp-page .tp-hex > img,
  .tp-page .tp-hex-lines,
  .tp-hex-label {
    display: none;
  }

  .tp-hex-card {
    position: static !important;
    gap: 4px;
    width: auto;
    padding: 12px 8px;
  }

  .tp-hex-card.is-traffic { order: 1; }
  .tp-hex-card.is-conversion { order: 2; }
  .tp-hex-card.is-nurturing { order: 3; }
  .tp-hex-card.is-execution { order: 4; }
  .tp-hex-card.is-product { order: 5; }
  .tp-hex-card.is-foundation { order: 6; }

  .tp-hex-en {
    font-size: 9px;
  }

  .tp-hex-jp {
    font-size: 18px;
  }

  .tp-hex-s {
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  .tp-hex-s br {
    display: none; /* PC 用の改行位置は使わず、幅に合わせて折り返す */
  }

  .tp-about-link {
    font-size: 28px;
  }
}