@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700;900&display=swap');

/* ==========================================
   RESET & BASE
========================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Noto Sans JP', sans-serif;
  min-width: 1440px;
  background: #fff;
  color: #000;
}

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

img {
  display: block;
}

/* ==========================================
   SHARED
========================================== */
.red {
  color: #d40000;
}

/* ==========================================
   HEADER
   - sticky で上部に固定、z-index で mv の上に
   - 背景色なし（mv 背景が透けて見える）
========================================== */
.header {
  position: sticky;
  top: 0;
  z-index: 10;
  width: 100%;
}

.header-inner {
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  height: 119px;
}

.header-logo-sub {
  position: absolute;
  left: 40px;
  top: 32px;
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}

.header-logo-main {
  position: absolute;
  left: 40px;
  top: 51px;
  font-size: 24px;
  font-weight: 900;
  line-height: normal;
  white-space: nowrap;
}

.header-date {
  position: absolute;
  left: 1155px;
  top: 49px;
  display: flex;
  align-items: center;
  gap: 15px;
}

/* ==========================================
   MV  (Figma: 1440 × 955)
   - margin-top: -119px で header の下に潜り込む
   - 背景写真は .mv 直下（フル幅基準）に配置
   - left: calc(50% - 720px + Figma_X) でセンター基準の座標に変換
========================================== */
.mv {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-top: -119px;
  border-bottom: 1px solid #000;
}

.mv-inner {
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  height: 955px;
}

/* --- background photos (positioned relative to .mv full-width element) --- */
.mv-bg-photo {
  position: absolute;
  object-fit: cover;
  pointer-events: none;
}

/* ぼかし画像: z-index 1（後ろ） */
.mv-bg-03, .mv-bg-07, .mv-bg-08, .mv-bg-09, .mv-bg-10, .mv-bg-11 { z-index: 1; }
/* クリア画像: z-index 2（前） */
.mv-bg-01, .mv-bg-02, .mv-bg-04, .mv-bg-05, .mv-bg-06, .mv-bg-12 { z-index: 2; }

/* 34651957: Figma x=-14 → calc(50% - 720px - 14px) */
.mv-bg-01 {
  left: calc(50% - 734px);
  top: 160px;
  width: 296px;
  height: 197px;
  border-radius: 8px;
  box-shadow: 10px 10px 30px -10px rgba(0, 0, 0, 0.1);
}

/* 34657675: Figma x=-59 → calc(50% - 720px - 59px) */
.mv-bg-02 {
  left: calc(50% - 779px);
  top: 461px;
  width: 279px;
  height: 186px;
  border-radius: 8px;
  box-shadow: 10px 10px 30px -10px rgba(0, 0, 0, 0.1);
}

/* 34729911: Figma x=140 → calc(50% - 720px + 140px) */
.mv-bg-03 {
  left: calc(50% - 580px);
  top: 443px;
  width: 138px;
  height: 92px;
  filter: blur(10px);
  opacity: 0.7;
}

/* 34779874: Figma x=1115 → calc(50% - 720px + 1115px) */
.mv-bg-04 {
  left: calc(50% + 395px);
  top: 151px;
  width: 244px;
  height: 163px;
  border-radius: 8px;
  box-shadow: 10px 10px 30px -10px rgba(0, 0, 0, 0.1);
}

/* 34808603: Figma x=131 → calc(50% - 720px + 131px) */
.mv-bg-05 {
  left: calc(50% - 589px);
  top: 817px;
  width: 247px;
  height: 165px;
  border-radius: 8px;
  box-shadow: 10px 10px 30px -10px rgba(0, 0, 0, 0.1);
}

/* 34841844: Figma x=1175 → calc(50% - 720px + 1175px) */
.mv-bg-06 {
  left: calc(50% + 455px);
  top: 455px;
  width: 344px;
  height: 229px;
  border-radius: 8px;
  box-shadow: 10px 10px 30px -10px rgba(0, 0, 0, 0.1);
}

/* 34825621: Figma x=1214 → calc(50% - 720px + 1214px) */
.mv-bg-07 {
  left: calc(50% + 494px);
  top: 272px;
  width: 219px;
  height: 146px;
  filter: blur(5px);
}

/* 34838037: Figma x=978 → calc(50% - 720px + 978px) */
.mv-bg-08 {
  left: calc(50% + 258px);
  top: 69px;
  width: 106px;
  height: 71px;
  filter: blur(15px);
  opacity: 0.6;
}

/* 34841159: Figma x=255 → calc(50% - 720px + 255px) */
.mv-bg-09 {
  left: calc(50% - 465px);
  top: 124px;
  width: 107px;
  height: 71px;
  filter: blur(15px);
  opacity: 0.7;
}

/* 3692405: Figma x=54 → calc(50% - 720px + 54px) */
.mv-bg-10 {
  left: calc(50% - 666px);
  top: 722px;
  width: 171px;
  height: 114px;
  filter: blur(5px);
  opacity: 0.6;
}

/* 34874381: Figma x=1086 → calc(50% - 720px + 1086px) */
.mv-bg-11 {
  left: calc(50% + 366px);
  top: 666px;
  width: 137px;
  height: 91px;
  filter: blur(10px);
  opacity: 0.8;
}

/* 34735080: Figma x=1057 → calc(50% - 720px + 1057px) */
.mv-bg-12 {
  left: calc(50% + 337px);
  top: 816px;
  width: 251px;
  height: 167px;
  border-radius: 8px;
  box-shadow: 10px 10px 30px -10px rgba(0, 0, 0, 0.1);
}

/* --- label: left=547, top=162, w=325, h=55 --- */
.mv-label {
  position: absolute;
  top: 162px;
  left: 547px;
  width: 325px;
  height: 55px;
  background: #ebebeb;
  display: flex;
  align-items: center;
  padding-left: 17px;
  font-size: 32px;
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}

/* --- catch wrapper --- */
.mv-catch {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* catch line-1: center=calc(50%+10.32px), top=258, w=599, h=113 */
.catch-line1 {
  position: absolute;
  top: 258px;
  left: calc(50% + 10.32px);
  transform: translateX(-50%);
  width: 599px;
  height: 113px;
}

/* catch line-2: center=calc(50%+3.01px), top=395, w=692, h=145 */
.catch-line2 {
  position: absolute;
  top: 395px;
  left: calc(50% + 3.01px);
  transform: translateX(-50%);
  width: 692px;
  height: 145px;
}

/* --- subcatch: left=351, top=572, w=743 --- */
.mv-subcatch {
  position: absolute;
  top: 572px;
  left: 351px;
  width: 743px;
  font-size: 24px;
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}

/* --- mv btn copy: centered at x=720, top=672 --- */
.mv-btn-copy {
  position: absolute;
  top: 672px;
  left: 278px; /* 720-442 */
  width: 884px;
  font-size: 20px;
  font-weight: 700;
  line-height: 36px;
  text-align: center;
}

/* --- mv green button: left=455, top=720, w=529, h=107 --- */
.mv-btn-body {
  position: absolute;
  top: 720px;
  left: 455px;
  width: 529px;
  height: 107px;
  background: #43c641;
  border: 2px solid #000;
  border-radius: 53.5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* arrow: top=758-720=38, right=529-(467+32)=30 */
.mv-btn-body .btn-arrow {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 32px;
  color: #fff;
  pointer-events: none;
  user-select: none;
}

.mv-btn-body .btn {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  text-align: center;
  line-height: 0;
  padding-right: 16px;
}

/* ==========================================
   SHARED BUTTON TEXT
========================================== */
.btn-main {
  display: block;
  font-size: 28px;
  font-weight: 700;
  line-height: 36px;
}

.btn-sub {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 30px;
}

/* ==========================================
   CONCEPT  (Figma: 1440 × 939)
========================================== */
.concept {
  width: 100%;
  background: #fff;
}

.concept-inner {
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  height: 939px;
}

/* h2: top=129, centered */
.concept-h2 {
  position: absolute;
  top: 129px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 48px;
  font-weight: 900;
  text-align: center;
  line-height: normal;
  white-space: nowrap;
}

/* lead: top=310, left=278, w=884 */
.concept-lead {
  position: absolute;
  top: 310px;
  left: 278px;
  width: 884px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  line-height: 36px;
}

/* slider: top=471, ブラウザ幅いっぱい */
.slider {
  position: absolute;
  top: 471px;
  left: 50%;
  transform: translateX(-50%); /* -50% = -50vw でページ左端に揃う */
  width: 100vw;
  height: 343px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.slider-track {
  display: flex;
  gap: 16px;
  will-change: transform;
}

.slide-item {
  flex-shrink: 0;
  width: 469px; /* (1440 - 2×16) / 3 ≈ 469px */
  height: 311px;
  background: #e0e0e0;
}

/* ==========================================
   ORIGIN  (Figma: 1440 × 883)
========================================== */
.origin {
  width: 100%;
  background: #1c1c1c;
}

.origin-inner {
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  height: 883px;
}

/* h2: top=96, centered */
.origin-h2 {
  position: absolute;
  top: 96px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 40px;
  font-weight: 900;
  color: #fff;
  text-align: center;
  line-height: normal;
  white-space: nowrap;
}

/* iframe: top=211, left=400, w=640, h=360 */
.origin-iframe {
  position: absolute;
  top: 211px;
  left: 400px;
  width: 640px;
  height: 360px;
}

.origin-iframe img,
.origin-iframe iframe {
  width: 100%;
  height: 100%;
  display: block;
}

/* lead: top=643, left=278, w=884 */
.origin-lead {
  position: absolute;
  top: 643px;
  left: 278px;
  width: 884px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  line-height: 36px;
}

/* ==========================================
   CTA  (Figma: 1440 × 774)
========================================== */
.cta {
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #000;
}

.cta-inner {
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  height: 774px;
}

/* h2: top=129, centered */
.cta-h2 {
  position: absolute;
  top: 129px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 48px;
  font-weight: 900;
  text-align: center;
  line-height: normal;
  white-space: nowrap;
}

/* lead: top=310, left=278, w=884 */
.cta-lead {
  position: absolute;
  top: 310px;
  left: 278px;
  width: 884px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  line-height: 36px;
}

/* btn copy: top=490, centered, w=884 */
.cta-btn-copy {
  position: absolute;
  top: 490px;
  left: 278px;
  width: 884px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  line-height: 36px;
}

/* green button: MVと同サイズ w=529, 中央寄せ left=455 */
.cta-btn-body {
  position: absolute;
  top: 538px;
  left: 455px;
  width: 529px;
  height: 107px;
  background: #43c641;
  border: 2px solid #000;
  border-radius: 53.5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cta-btn-body .btn-arrow {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 32px;
  color: #fff;
  pointer-events: none;
  user-select: none;
}

.cta-btn-body .btn {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  text-align: center;
  line-height: 0;
  padding-right: 16px;
}

/* ==========================================
   COMPANY  (Figma: 1440 × 630)
========================================== */
.company {
  width: 100%;
  background: #fff;
}

.company-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  padding-top: 129px;
  padding-bottom: 160px;
}

.company-table {
  border-collapse: collapse;
  width: 873px;
}

.company-table th,
.company-table td {
  height: 66px;
  border: 1px solid #000;
  font-size: 16px;
  line-height: 26px;
  vertical-align: middle;
}

.company-table th {
  width: 243px;
  background: #d9d9d9;
  font-weight: 700;
  text-align: center;
  padding: 0 10px;
}

.company-table td {
  width: 631px;
  background: #fff;
  font-weight: 500;
  padding-left: 39px;
}

/* ==========================================
   FOOTER
========================================== */
.footer {
  width: 100%;
  background: #1c1c1c;
  color: #fff;
  text-align: center;
  padding: 40px 0;
  font-size: 13px;
  font-weight: 500;
}

/* ==========================================
   RESPONSIVE  (≤ 1024px : タブレット・スマホ)
========================================== */
@media (max-width: 1024px) {

  body { min-width: 375px; }

  /* ===== HEADER ===== */
  .header-inner { height: 60px; }
  .header-logo-sub  { top: 10px; left: 16px; font-size: 10px; }
  .header-logo-main { top: 26px; left: 16px; font-size: 16px; }
  .header-date {
    left: auto;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    gap: 8px;
  }
  .header-date img { height: 14px; width: auto; }

  /* ===== MV ===== */
  .mv { margin-top: -60px; }

  .mv-inner {
    height: auto;
    overflow: visible;
    padding: 80px 24px 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  /* 背景写真はタブレット・スマホでは非表示 */
  .mv-bg-photo { display: none; }

  /* label */
  .mv-label {
    position: relative;
    top: auto; left: auto; right: auto; bottom: auto;
    width: auto;
    height: auto;
    font-size: 13px;
    padding: 7px 14px;
  }

  /* catch SVG */
  .mv-catch {
    position: relative;
    top: auto; left: auto;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .catch-line1 {
    position: relative;
    top: auto; left: auto;
    transform: none;
    width: 90%;
    max-width: 400px;
    height: auto;
    display: block;
  }
  .catch-line2 {
    position: relative;
    top: auto; left: auto;
    transform: none;
    width: 100%;
    max-width: 460px;
    height: auto;
    display: block;
  }

  /* subcatch */
  .mv-subcatch {
    position: relative;
    top: auto; left: auto;
    width: 100%;
    font-size: 13px;
    white-space: normal;
    text-align: center;
    line-height: 1.7;
  }

  /* btn copy */
  .mv-btn-copy {
    position: relative;
    top: auto; left: auto;
    width: 100%;
    font-size: 13px;
    text-align: center;
    line-height: 1.7;
  }

  /* green button */
  .mv-btn-body {
    position: relative;
    top: auto; left: auto;
    width: 100%;
    max-width: 360px;
    height: 72px;
    border-radius: 36px;
  }
  .mv-btn-body .btn        { padding-right: 8px; }
  .mv-btn-body .btn-arrow  { right: 16px; font-size: 24px; }

  /* button text */
  .btn-main { font-size: 18px; line-height: 28px; }
  .btn-sub  { font-size: 12px; line-height: 22px; }

  /* ===== CONCEPT ===== */
  .concept-inner {
    height: auto;
    padding: 56px 24px 0;
  }

  .concept-h2 {
    position: relative;
    top: auto; left: auto;
    transform: none;
    font-size: 26px;
    white-space: normal;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 24px;
  }

  .concept-lead {
    position: relative;
    top: auto; left: auto;
    width: auto;
    font-size: 14px;
    line-height: 28px;
    text-align: center;
    margin-bottom: 40px;
  }

  /* slider: 相対配置のまま、left:50%+translate で常にビューポート幅いっぱい */
  .slider {
    position: relative;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
  }
  .slide-item { width: 260px; }

  /* ===== ORIGIN ===== */
  .origin-inner {
    height: auto;
    padding: 56px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  .origin-h2 {
    position: relative;
    top: auto; left: auto;
    transform: none;
    font-size: 22px;
    white-space: normal;
    line-height: 1.5;
    text-align: center;
  }

  .origin-iframe {
    position: relative;
    top: auto; left: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .origin-iframe iframe,
  .origin-iframe img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .origin-lead {
    position: relative;
    top: auto; left: auto;
    width: 100%;
    font-size: 14px;
    line-height: 28px;
    text-align: left;
  }

  /* ===== CTA ===== */
  .cta-inner {
    height: auto;
    padding: 56px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .cta-h2 {
    position: relative;
    top: auto; left: auto;
    transform: none;
    font-size: 26px;
    white-space: normal;
    line-height: 1.5;
    text-align: center;
  }

  .cta-lead {
    position: relative;
    top: auto; left: auto;
    width: 100%;
    font-size: 14px;
    line-height: 28px;
    text-align: center;
  }

  .cta-btn-copy {
    position: relative;
    top: auto; left: auto;
    width: 100%;
    font-size: 13px;
    text-align: center;
    line-height: 1.7;
  }

  .cta-btn-body {
    position: relative;
    top: auto; left: auto;
    width: 100%;
    max-width: 360px;
    height: 72px;
    border-radius: 36px;
  }
  .cta-btn-body .btn        { padding-right: 8px; }
  .cta-btn-body .btn-arrow  { right: 16px; font-size: 24px; }

  /* ===== COMPANY ===== */
  .company-inner {
    padding: 48px 16px 80px;
  }
  .company-table { width: 100%; }
  .company-table th {
    width: 100px;
    font-size: 12px;
    padding: 0 8px;
  }
  .company-table td {
    width: auto;
    font-size: 12px;
    padding-left: 12px;
    padding-right: 8px;
    word-break: break-all;
  }
  .company-table th,
  .company-table td {
    height: auto;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  /* ===== FOOTER ===== */
  .footer { padding: 24px 16px; font-size: 12px; }

} /* end @media (max-width: 1024px) */