@charset "UTF-8";

/* ============================================================ */
/* hint.css — アイデアのヒントページ固有スタイル                  */
/*                                                                 */
/* 構成                                                           */
/*  - .hint-intro      : 紺帯(タイトル + リード文)                  */
/*  - .hint-flow       : START!/GOAL! + STEP1〜4 フロー             */
/*  - .hint-video      : 動画CTAブロック                            */
/*                                                                 */
/* 共通トークン: common.css の :root 変数を流用                    */
/* ============================================================ */

:root {
  /* Figma SVG (アセット 1.svg) 確定値 */
  --hint-navy: #092e82;          /* 紺帯背景・STEP見出し・「詳しくは動画CHECK」 */
  --hint-pink: #fface7;          /* STEPバッジ円・START!/GOAL!/Let's check */
  --hint-box-bg: #e0f4fc;        /* STEP本文ボックス背景 (薄水色) */
  --hint-deco-mint: #c0e4dc;     /* 装飾大円(ミント) opacity .7 */
  --hint-deco-yellow: #f9f5bf;   /* 装飾(クリーム黄) */
  --hint-deco-orange: #ffd699;   /* 装飾(オレンジ) */
  --hint-text-strong: #1a1a1a;   /* 本文 */
}

/* ============================================================ */
/* 1. 紺帯セクション                                              */
/* ============================================================ */
/*
  Figma 1920px基準サイズ (アセット 1.svg / get_design_context 実測)
  - 紺帯 padding: top 60px / bottom 83px / left 154px / right 153px
  - タイトル: 40px Bold / リードとのgap: 41px
  - リード: 30px Regular
  clamp(min, max/19.20vw, max) で 1920px時に確定値ぴったり、それ以下は比例縮小
*/
.hint-intro {
  background-color: var(--hint-navy);
  color: #fff;
  padding: clamp(3rem, 3.125vw, 6rem) clamp(2rem, 8.02vw, 15.4rem)
           clamp(4rem, 4.323vw, 8.3rem);
  margin-top: 0;
}

/* 中間幅 (769-1280px) は横padding が広すぎてリード文が改行する。
   font約20px × 約53文字 = 1060px を確保するため横paddingを狭める */
@media (min-width: 769px) and (max-width: 1280px) {
  .hint-intro {
    padding-left: clamp(1rem, 3vw, 5rem);
    padding-right: clamp(1rem, 3vw, 5rem);
  }
}

/* PC全幅で改行絶対禁止 (white-space: nowrap)。SPは @media (max-width:768) で normal に戻す */
@media (min-width: 769px) {
  .hint-intro__lead {
    white-space: nowrap;
  }
}

.hint-intro__inner {
  max-width: 1613px;
  width: 100%;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 2.135vw, 4.1rem);
}

.hint-intro__title {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 2.083vw, 4rem);
  letter-spacing: 0.05em;
  margin: 0;
  line-height: 1.4;
}

/* Figma準拠: letter-spacing 指定なし(=0)。1920px時 1行に収めるためtrackingゼロ厳守 */
.hint-intro__lead {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: clamp(1.4rem, 1.5625vw, 3rem);
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
  letter-spacing: 0;
}

/* ============================================================ */
/* 2. フロー(START → STEP → GOAL)                                */
/* ============================================================ */
.hint-flow {
  background-color: var(--color-bg-white, #fff);
  padding: clamp(4rem, 6vw, 9rem) 0 clamp(3rem, 5vw, 7.5rem);
  position: relative;
  overflow: hidden;
}

/* Figma: 装飾アイコン(deco-flow.svg)を START!/GOAL! 左右に配置するため、
   inner は1920pxまで広げる。STEPボックス自体は hint-step__body に max-width 1280px。 */
.hint-flow-inner {
  max-width: 1920px;
  width: 100%;
  margin-inline: auto;
  position: relative;
}

/* Figma: 110px Bold, color #fface7, letter-spacing 0.1em */
.hint-flow__label {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(3.6rem, 5.729vw, 11rem);
  letter-spacing: 0.1em;
  color: var(--hint-pink);
  text-align: center;
  margin: 0;
  line-height: 1.1;
  position: relative;
  z-index: 1;
}

.hint-flow__label--start {
  margin-bottom: clamp(2rem, 3vw, 5rem);
}

.hint-flow__label--goal {
  margin-top: clamp(2.4rem, 3.4vw, 5rem);
  margin-bottom: clamp(2rem, 2.8vw, 4.5rem);
}

/* Figma: GOAL!上の下向き三角 (cls-39 #e0f4fc, polygon W115.8 × H75)
   STEP-list 縦ライン下端と GOAL! 文字の間を繋ぐ装飾 */
.hint-flow__arrow {
  width: clamp(5rem, 6.031vw, 11.58rem);
  height: clamp(3rem, 3.906vw, 7.5rem);
  margin: 0 auto;
  background: var(--hint-box-bg);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  display: block;
}

/* Figma: deco-flow.svg を START!/GOAL! の左右に配置
   1920px時 装飾サイズ185×193, 配置位置: 左 x=273 / 右 x=1497 (1920frame基準)
   各位置で SVGの向きが異なる (Figmaノード180:222/216/219/225 を実測):
     - START左: そのまま       (丸=左上, 三角=右下)
     - START右: scaleY(-1)     (丸=左下, 三角=上中央)
     - GOAL左:  rotate(180deg) (丸=右下, 三角=左上)
     - GOAL右:  そのまま       (丸=左上, 三角=右下) */
.hint-flow__label::before,
.hint-flow__label::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(7rem, 9.635vw, 18.5rem);
  height: clamp(7.3rem, 10.06vw, 19.3rem);
  background-image: url("../images/hint/deco-flow.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  pointer-events: none;
}

.hint-flow__label::before {
  left: clamp(0rem, 14.22vw, 27.3rem);
}
.hint-flow__label::after {
  right: clamp(0rem, 12.66vw, 24.3rem);
}

/* START! */
.hint-flow__label--start::before {
  transform: translateY(-50%);
}
.hint-flow__label--start::after {
  transform: translateY(-50%) scaleY(-1);
}

/* GOAL! */
.hint-flow__label--goal::before {
  transform: translateY(-50%) rotate(180deg);
}
.hint-flow__label--goal::after {
  transform: translateY(-50%);
}

/* Figma: STEP1〜4を貫く縦ライン #e0f4fc (cls-39 同色, 幅33.45px)
   x=951.84 y=782.80, 高さ2126.26 → STEP1上144px上〜STEP4下40px下まで貫通 */
.hint-step-list {
  list-style: none;
  padding: clamp(2rem, 7.5vw, 14.4rem) 0 clamp(0.4rem, 2.083vw, 4rem);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(2.4rem, 3.4vw, 4.8rem);
  position: relative;
  isolation: isolate;
}

.hint-step-list::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(1.6rem, 1.742vw, 3.35rem);
  background: var(--hint-box-bg);
  z-index: -1;
}

.hint-step {
  position: relative;
  padding-top: clamp(1.8rem, 2.4vw, 3.2rem);
}

/* Figma: 160×160 円, 文字38.485px Bold 白 (cls-7) */
.hint-step__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(7rem, 8.333vw, 16rem);
  height: clamp(7rem, 8.333vw, 16rem);
  border-radius: 50%;
  background-color: var(--hint-pink);
  color: #fff;
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(1.8rem, 2.004vw, 3.85rem);
  letter-spacing: 0.02em;
  z-index: 2;
}

/* Figma: 1920px時点で 1280×313 (角丸22px, 背景 #e0f4fc)
   padding 上137 / 左右131 / 下46 が本来値。ただし本文最長48字×25px=1200px が
   Figma準拠inner 1018px に入らず自動折返しするため、左右paddingは32pxに縮めて
   inner 1216px を確保。<br>でのみ改行が起きるようにする。 */
.hint-step__body {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  background-color: var(--hint-box-bg);
  border-radius: clamp(1.4rem, 1.146vw, 2.2rem);
  padding: clamp(5rem, 7.135vw, 13.7rem)
           clamp(1.6rem, 1.667vw, 3.2rem)
           clamp(3rem, 2.396vw, 4.6rem);
  text-align: center;
  box-sizing: border-box;
}

/* Figma: 35px Bold #092e82, 見出し下 22px (本文との gap) */
.hint-step__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 1.823vw, 3.5rem);
  color: var(--hint-navy);
  margin: 0 0 clamp(0.8rem, 1.146vw, 2.2rem);
  letter-spacing: 0.04em;
  line-height: 1.3;
}

/* Figma: STEP frame の高さに合わせて (67-77px) 1920px時 ≒75px、
   width は SVG固有のアスペクト比を維持 (step2が35×75と縦長のため) */
.hint-step__icon {
  flex-shrink: 0;
  width: auto;
  height: clamp(2.4rem, 3.906vw, 7.5rem);
}

/* Figma: 25px #1a1a1a, letter-spacing 0
   STEP2の最長行48文字×25px=1200pxを inner幅1216pxに収めるためtrackingゼロ厳守 */
.hint-step__text {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: clamp(1.3rem, 1.302vw, 2.5rem);
  font-weight: 400;
  line-height: 1.7;
  color: var(--hint-text-strong);
  margin: 0;
  letter-spacing: 0;
}

/* ============================================================ */
/* 3. 動画CTA                                                     */
/* ============================================================ */
.hint-video {
  background-color: var(--color-bg-white, #fff);
  padding: clamp(2rem, 3vw, 4rem) 0 clamp(4rem, 6vw, 8rem);
}

/* Figma: Let's check 文字幅 1396px に余裕を見て */
.hint-video-inner {
  max-width: 1500px;
  width: 94%;
  margin-inline: auto;
  text-align: center;
}

/* Figma: 35px Bold #092e82 */
.hint-video__lead {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 1.823vw, 3.5rem);
  margin: 0 0 0.6em;
  color: var(--hint-navy);
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
}

.hint-video__lead-slash {
  color: var(--hint-navy);
  font-weight: 700;
  display: inline-block;
}

.hint-video__lead-check {
  color: var(--hint-navy);
  font-weight: 700;
}

/* Figma: 25px #1a1a1a */
.hint-video__sub {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: clamp(1.3rem, 1.302vw, 2.5rem);
  font-weight: 400;
  line-height: 1.7;
  margin: 0 0 clamp(2rem, 2.6vw, 5rem);
  color: var(--hint-text-strong);
}

.hint-video__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #000;
  border-radius: 8px;
  overflow: hidden;
  margin: 0 auto clamp(1.6rem, 2.2vw, 2.8rem);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

.hint-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Figma: 90px Bold #fface7, letter-spacing 10.8px (0.12em)
   PC幅では自然に1行(横幅余裕)。SPでは自然折返し。 */
.hint-video__cta {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(2.4rem, 4.6875vw, 9rem);
  color: var(--hint-pink);
  margin: 0;
  letter-spacing: 0.12em;
  line-height: 1.2;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* ============================================================ */
/* 4. SP対応 (≦768px)                                             */
/* フォントは clamp() の min が効くため上書き不要。                  */
/* レイアウト微調整(寄せ・幅・装飾位置)のみ。                       */
/* ============================================================ */
@media (max-width: 768px) {
  .hint-intro {
    padding: 2.4rem 1.6rem 2.8rem;
  }

  /* 募集要項ページのSPに倣って中央揃え */
  .hint-intro__lead {
    text-align: center;
  }

  .hint-flow {
    padding: 3.6rem 0 3rem;
  }

  .hint-flow-inner {
    width: 86%;
  }

  .hint-flow__label::before {
    left: 0;
  }
  .hint-flow__label::after {
    right: 0;
  }

  .hint-step-list {
    gap: 2.2rem;
  }

  .hint-step {
    padding-top: 2rem;
  }

  /* SP: バッジ70px + padding-top 65px でタイトル被り回避(隙間≒30px) */
  .hint-step__badge {
    width: 7rem;
    height: 7rem;
    font-size: 1.6rem;
  }

  .hint-step__body {
    padding: 6.5rem 1.6rem 2rem;
    border-radius: 16px;
  }

  .hint-step__title {
    gap: 0.4em;
    margin-bottom: 1.4rem;
  }

  /* 募集要項に倣って中央揃え */
  .hint-step__text {
    text-align: center;
  }

  .hint-video {
    padding: 2rem 0 4rem;
  }

  /* 募集要項に倣って中央揃え */
  .hint-video__sub {
    text-align: center;
  }

  /* SP: 「Let's check out the video!」が352pxに1行で収まるよう
     font-size と letter-spacing を控えめに */
  .hint-video__cta {
    font-size: 1.8rem;
    letter-spacing: 0.04em;
  }
}