/* ========================================
   CSS Variables
======================================== */
:root {
  --color-pink: #FF008C;
  --color-dark: #333;
  --color-white: #FFF;
}

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

body {
  font-family: 'Inter', 'Noto Sans JP', -apple-system, sans-serif;
  color: var(--color-dark);
  background: var(--color-white);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

picture {
  display: block;
}

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

.cta-btn-link {
  transition: 0.3s all;
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 10;
}

.cta-btn-link:hover {
  filter: brightness(1.15);
}

/* ========================================
   Page Top Wrap
   — kaminari背景をheader・heroの外(page-top-wrap内)に絶対配置
======================================== */
.page-top-wrap {
  position: relative;
  background: var(--color-white);
  overflow: hidden;
}

/* kaminari 背景 — hero(MV)の外 page-top-wrap内に絶対配置
   グレーのプレースホルダー背景は使わず、SVGのみで表示する */
.kaminari-bg {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

/* PC用 kaminari: 1200×924px ラッパー、ページ中央に配置 (left:120px in 1440px = centered) */
.kaminari-pc {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1200px;
  height: 924px;
}

/* PC SVG: kaminariコンテナ内で left:-69px; top:-238px に配置 */
.kaminari-pc .kaminari-svg {
  position: absolute;
  left: -69px;
  top: -238px;
}

/* SP用 kaminari: 非表示（PC時） */
.kaminari-sp {
  display: none;
}

/* ========================================
   Header
======================================== */
.site-header {
  position: relative;
  top: 0;
  z-index: 100;
  background: transparent;
  padding: 24px 24px 12px;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1440px;
  margin: 0 auto;
}

.site-logo {
  width: 248px;
}

.cta-btn-img {
  width: 344px;
}

/* ========================================
   Hero Section (MV)
   — kaminariはpage-top-wrap内の絶対配置要素であり、hero内には配置しない
   — Figmaレイアウト再現:
       970px テキスト列 (text-box-pink-border は全幅 970px)
       + mockup を絶対配置で右側に重ねる (top:209px, left:calc(50% + 80px))
======================================== */
.hero {
  position: relative;
  z-index: 1;
}

/* hero-inner: position:relative でmockupの絶対配置基点となる */
.hero-inner {
  position: relative;
  /* 下パディングはmockupが収まる余白を確保 */
  padding-bottom: 64px;
}

/* hero-text-col: Figmaの970px幅テキスト列
   text-box-pink-border は block要素として970px全幅に自動stretch */
.hero-text-col {
  width: 970px;
  max-width: calc(100% - 32px);
  margin: 0 auto;
  padding: 16px 0 64px;
  display: flex;
  flex-direction: column;
}

/* Hero images — PC サイズはFigmaデザインに合わせて設定 */
.hero-cap {
  width: 472px;
  max-width: 100%;
  margin-bottom: 8px;
}

.hero-copy {
  width: 100%;
  max-width: 704px;
  margin-bottom: 24px;
}

/* Frame 25: 2画像を横並び
   PC総幅: 270.5px (src width=541 @ 2x), gap: 24px → 各画像幅 ≈ 123px
*/
.hero-point-group {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
}

.hero-point-img {
  display: block;
  width: 121px;
  height: auto;
}

.hero-ttl-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* Figmaでは gap: -2px — ttlとtext_coding_01は密接 */
}

.hero-ttl {
  width: 668px;
  max-width: 100%;
}

/* hero-mockup-col: 絶対配置で970pxカラムの右側に重なる
   計算: 970px列右端 = 50% + 485px
         mockup左端  = 右端 - 520px + 115px = 50% + 80px
   Figma値: width:520px, top:209px, right:-115px (右に115pxはみ出し) */
.hero-mockup-col {
  position: absolute;
  left: calc(50% + 80px);
  top: 221px;
  width: 520px;
  /* box-shadow は不要 */
  z-index: 2;
  /* text-box-pink-borderの上に重なる */
}

.hero-mockup-img {
  display: block;
  width: 100%;
  height: auto;
}

/* ========================================
   Shared: Text boxes & body text
======================================== */
.text-box-pink-border {
  width: fit-content;
  border: 2px solid var(--color-pink);
  background: var(--color-white);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: -2px;
}

.body-bold {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 2;
  color: var(--color-dark);
}

.pink-link {
  color: var(--color-pink);
  text-decoration: underline;
  font-weight: 700;
}

/* ========================================
   Shared: Section container & headings
======================================== */
.section-container {
  width: 100%;
  max-width: 970px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 64px 0;
  position: relative;
}

/* 見出し画像 + 直下のtext_coding_xxを密接に配置するグループ
   Figmaでは gap: -2px のflexコンテナで包まれている */
.heading-text-group {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.section-h2-img {
  max-width: 176px;
}

.section-h2-img--wide {
  max-width: 416px;
}

.full-width-img {
  width: 100%;
}

/* ========================================
   Case Studies Section — background: #FF008C (Figmaデザイン通り)
======================================== */
.case-section {
  background: var(--color-pink);
}

.case-section .section-container {
  gap: 40px;
}

/* ========================================
   Results Section — background: rgba(255, 0, 140, 0.05)
======================================== */
.results-section {
  background: rgba(255, 0, 140, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Vector 5 decoration in results section */
.vector5-decoration {
  display: block;
  flex-shrink: 0;
  position: absolute;
  left: 24px;
  top: 0;
  width: 48px;
  height: 48px;
}

/* ========================================
   Product Section — background: #FFF
======================================== */
.product-section {
  background: var(--color-white);
}

.product-intro-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product-name-img {
  width: 473px;
  max-width: 100%;
}

.product-visual-wrap {
  display: flex;
  align-items: center;
  gap: 24px;
}

.product-mockup-block {
  max-width: 472px;
  overflow: hidden;
}

.product-mockup-img {
  width: 100%;
}

.device-features-block {
  display: block;
}

.device-feature-img {
  display: block;
}

/* Spec footnotes */
.spec-footnotes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-indent: -1em;
  margin-left: 1em;
}

.spec-footnote {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-dark);
  line-height: 1.6;
}

.spec-note-mark {
  font-size: 12px;
  font-weight: 400;
}

/* ========== Spec Table ========== */
.spec-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.spec-title-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.spec-heading {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--color-dark);
}

.spec-caption {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-dark);
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid rgba(51, 51, 51, 0.50);
}

.spec-row {
  border-bottom: 1px solid rgba(51, 51, 51, 0.50);
}

.spec-th,
.spec-td {
  padding: 16px;
  text-align: left;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-dark);
  vertical-align: middle;
}

.spec-th {
  width: 240px;
  background: rgba(51, 51, 51, 0.10);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
}

.spec-td {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-weight: 500;
  padding-left: 20px;
}

/* ========================================
   Contact Section — background: #EBEBEB
======================================== */
.contact-section {
  background: #EBEBEB;
}

/* ========== Form Card ========== */
#formWrapper .form-card {
  border-radius: 8px;
  background: var(--color-white);
  padding: 64px 16px;
}

#formWrapper .form-fields {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

#formWrapper .form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#formWrapper .form-group .radio-group+.form-input {
  margin-top: 0;
}

#formWrapper .form-label-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

#formWrapper .form-label {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.25;
}

/* ========== Badges ========== */
#formWrapper .badge {
  display: inline-flex;
  padding: 2px 5px;
  border-radius: 2px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.67;
  white-space: nowrap;
}

#formWrapper .required-badge {
  background: var(--color-pink);
  color: var(--color-white);
}

#formWrapper .optional-badge {
  background: var(--color-dark);
  color: var(--color-white);
}

/* ========== Text Inputs ========== */
#formWrapper .form-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--color-dark);
  border-radius: 8px;
  background: var(--color-white);
  font-size: 16px;
  font-family: 'Noto Sans JP', 'Inter', sans-serif;
  color: var(--color-dark);
  outline: none;
  transition: border-color 0.2s;
  appearance: none;
}

#formWrapper .form-input::placeholder {
  color: #CCC;
  font-weight: 300;
}

#formWrapper .form-input:focus {
  border-color: var(--color-pink);
}

#formWrapper .form-input--pink-border {
  border-color: var(--color-pink);
}

/* ========== Radio Buttons ========== */
/* #formWrapper .radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
}

#formWrapper .radio-item {
  display: flex;
  align-items: center;
  height: 40px;
  gap: 8px;
  cursor: pointer;
}

#formWrapper .radio-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

#formWrapper .radio-custom {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--color-pink);
  background: var(--color-white);
  flex-shrink: 0;
  transition: border-color 0.2s;
}

#formWrapper .radio-custom::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-pink);
  opacity: 0;
  transition: opacity 0.2s;
}

#formWrapper .radio-input:checked + .radio-custom::after {
  opacity: 1;
}

#formWrapper .radio-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: var(--color-dark);
} */

/* ========== Textarea ========== */
#formWrapper .form-textarea {
  width: 100%;
  min-height: 108px;
  padding: 12px 16px;
  border: 1px solid var(--color-dark);
  border-radius: 8px;
  background: var(--color-white);
  font-size: 16px;
  font-family: 'Noto Sans JP', 'Inter', sans-serif;
  color: var(--color-dark);
  resize: vertical;
  outline: none;
  transition: border-color 0.2s;
}

#formWrapper .form-textarea:focus {
  border-color: var(--color-pink);
}

/* ========== Submit Area ========== */
#formWrapper .form-submit-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 64px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.wpcf7-spinner {
  display: none;
}

#formWrapper input.submit-btn {
  width: 320px;
  padding: 17px 70px;
  border-radius: 4px;
  background: var(--color-pink);
  color: var(--color-white) !important;
  font-family: 'Noto Sans JP', sans-serif !important;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.25em;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}

#formWrapper input.submit-btn:hover {
  opacity: 0.85;
}

#formWrapper .privacy-note {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-dark);
  text-align: center;
}

/* ========================================
   CF7ラジオボタン（確定版）
======================================== */
#formWrapper .wpcf7-radio {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
}

#formWrapper .wpcf7-list-item {
  display: inline-flex;
  align-items: center;
  height: 40px;
  cursor: pointer;
  margin: 0;
  position: relative;
}

#formWrapper .wpcf7-list-item input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 100%;
  /* ← list-item全体をクリック領域に */
  height: 100%;
  /* ← list-item全体をクリック領域に */
  top: 0;
  left: 0;
  margin: 0;
  cursor: pointer;
  z-index: 1;
  /* ← labelより前面に */
}

#formWrapper .wpcf7-list-item-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: #333;
  cursor: pointer;
  position: relative;
  z-index: 0;
}

#formWrapper .wpcf7-list-item-label::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #FF008C;
  background: #fff;
  transition: border-color 0.2s;
}

#formWrapper .wpcf7-list-item-label::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FF008C;
  opacity: 0;
  transition: opacity 0.2s;
}

#formWrapper .wpcf7-list-item input[type="radio"]:checked+.wpcf7-list-item-label::after {
  opacity: 1;
}

.copy-right {
  text-align: center;
  padding-bottom: 24px;
  font-size: 12px;
}

/* ========================================
   Responsive — SP (max-width: 767px)
======================================== */
@media (max-width: 767px) {

  /* ---- kaminari: PC非表示 / SP表示 ---- */
  .kaminari-pc {
    display: none;
  }

  /* SP用 kaminari: 740×570px ラッパー */
  .kaminari-sp {
    display: block;
    top: 407px;
    left: -203px;
    width: 740px;
    height: 570px;
  }

  /* SP SVG: kaminariコンテナ内で left:-43px; top:-147px に配置 */
  .kaminari-sp .kaminari-svg {
    position: absolute;
    left: -43px;
    top: -147px;
  }

  /* ---- header ---- */
  .site-header {
    padding: 12px;
    height: 80px;
    display: flex;
    align-items: center;
  }

  .header-inner {
    width: 100%;
  }

  .site-logo {
    width: 120px;
  }

  .cta-btn-img {
    max-width: 238px;
    width: 100%;
  }

  /* ---- hero ---- */
  .hero-inner {
    padding: 24px 16px 40px;
  }

  /* SP: テキスト列は全幅、パディングなし */
  .hero-text-col {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  .hero-cap {
    width: 340px;
    max-width: 100%;
  }

  .hero-copy {
    width: 100%;
    margin-bottom: 16px;
  }

  /* Frame 25: SP版
     SP総幅: 207px (src width=414 @ 2x), gap: 16px → 各画像幅 ≈ 95.5px
  */
  .hero-point-group {
    gap: 16px;
    margin-bottom: 16px;
  }

  .hero-point-img {
    width: 96px;
  }

  .hero-ttl {
    width: 260px;
    max-width: 100%;
  }

  /* SP: mockupは絶対配置で上端203px・右端から94px外側に配置
     Figma SP: width:240px, right:-94.5px, top:203.008px
     → コンテナ(hero-inner)の position:relative を基点とした絶対配置 */
  .hero-mockup-col {
    position: absolute;
    top: 238px;
    right: -78px;
    left: auto;
    width: 240px;
    /* box-shadow は不要 */
    z-index: 2;
  }

  /* ---- body text ---- */
  .body-bold {
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
  }

  .cta-btn-link {
    top: 12px;
    right: 12px;
  }
  /* ---- section container ---- */
  .section-container {
    padding: 40px 16px;
    gap: 24px;
  }

  .vector5-decoration {
    left: 33px;
    width: 24px;
    height: 24px;
  }

  .section-h2-img {
    max-width: 133px;
  }

  .section-h2-img--wide {
    max-width: 280px;
  }


  .case-section .section-container {
    gap: 24px;
  }

  /* ---- product ---- */
  .product-visual-wrap {
    flex-direction: column;
  }

  .product-mockup-block {
    max-width: 100%;
    flex: none;
  }

  .product-mockup-img {
    width: 100%;
  }

  .device-features-block {
    width: 339px;
    margin-left: auto;
    margin-top: -31px;
  }

  .device-feature-img {
    width: 100%;
  }

  /* ---- spec ---- */
  .spec-heading {
    font-size: 20px;
  }

  .spec-th {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    display: block;
    font-size: 14px;
    padding: 12px;
  }

  .spec-td {
    font-size: 14px;
    padding: 12px;
    padding-left: 14px;
    display: block;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }

  /* ---- form ---- */
  #formWrapper .form-card {
    padding: 16px;
  }

  #formWrapper .form-fields {
    gap: 24px;
  }

  #formWrapper input.submit-btn {
    width: 100%;
    padding: 17px 24px;
  }

  #formWrapper .form-submit-area {
    margin-top: 40px;
  }

  #formWrapper .privacy-note {
    text-align: left;
  }
}

@media (max-width: 380px) {
  .cta-btn-img {
    max-width: 220px;
  }
}