/* ==========================================================
   デザイントークン（Figmaの変数ライブラリと対応）
   ========================================================== */
:root {
  --color-navy-900: #182c50;
  --color-navy-800: #273e6a;
  --color-navy-700: #42577c;
  --color-navy-400: #939fb4;
  --color-blue-900: #0d6ebf;
  --color-blue-500: #5e9ed4;
  --color-blue-200: #c9dff1;
  --color-blue-gray: #bfcadd;
  --color-second: #00b4d8;
  --color-orange-600: #ef761b;
  --color-orange-700: #d16e23; /* btn--talk ホバー時の背景色 */
  --color-orange-50: #f9efe6; /* btn--dl ホバー時の背景色 */
  --color-white: #ffffff;

  --font-family-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  --container-width: 960px;
  --container-padding: 20px; /* モバイル基準の左右余白 */

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
}

/* ==========================================================
   リセット・ベース
   ========================================================== */
* {
  box-sizing: border-box;
}

body {
  /* margin/paddingはsi-free_reset.cssで0リセット済み */
  overflow-x: hidden; /* FVの写真を意図的に画面外へはみ出させるため、横スクロールを防ぐ */
  font-family: var(--font-family-base);
  color: var(--color-navy-900);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

@media (max-width: 767px) {
  /* SPで画面下部に浮かせたheader__buttonsが最後のコンテンツに重ならないよう余白を確保 */
  body {
    padding-bottom: 70px;
  }
}

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

a {
  color: inherit;
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.section-title {
  margin: 0;
  font-weight: 700;
  font-size: 24px;
  color: var(--color-navy-900);
  text-align: center;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .section-title {
    font-size: 32px;
  }
}

/* 768px以上でも32pxに拡大させず、24px固定にしたい場合の修飾クラス */
.section-title--sm {
  font-size: 24px;
}

/* ボタン共通 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  border: 2px solid transparent;
  cursor: pointer;
}

@media (min-width: 768px) {
  .btn {
    font-size: 20px;
    padding: 16px 24px;
  }
}

.btn--talk {
  background: var(--color-orange-600);
  color: var(--color-white);
  transition: background-color 0.2s ease;
}

.btn--talk:hover {
  background: var(--color-orange-700);
}

.btn--dl {
  background: var(--color-white);
  border-color: var(--color-orange-600);
  color: var(--color-orange-600);
  transition: background-color 0.2s ease;
}

.btn--dl:hover {
  background: var(--color-orange-50);
}

.btn--big {
  font-size: 20px;
  padding: 16px 30px;
}

@media (min-width: 768px) {
  .btn--big {
    font-size: 20px;
  }
}

/* ==========================================================
   header
   ========================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
  box-shadow: 0 0 10px rgba(24, 44, 80, 0.2);
}

.header__inner {
  display: flex;
  flex-wrap: nowrap; /* 画面幅が狭くても縦2段に折り返させず、高さを一定に保つ */
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px var(--container-padding);
}

@media (min-width: 1080px) {
  .header__inner {
    padding: 20px var(--container-padding);
  }
}

.header__logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0; /* nowrap時に子要素（タグライン）を省略表示できるようにする */
}

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

@media (min-width: 768px) {
  .header__logo-img {
    height: 34px;
  }
}

.header__tagline {
  font-weight: 600;
  font-size: 11px;
  color: var(--color-navy-900);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* 幅が足りない画面では「…」で省略し、折り返して高さが伸びるのを防ぐ */
}

@media (max-width: 767px) {
  .header__tagline {
    display: none;
  }
}

@media (min-width: 768px) {
  .header__tagline {
    font-size: 12px;
    padding-left: 8px;
  }
}

.header__buttons {
  display: flex;
  flex-shrink: 0; /* ボタンは縮めず、狭い分はタグライン側で吸収する */
  gap: 10px;
}

@media (max-width: 767px) {
  /* SP: ヘッダーからは外し、画面下部に浮かせて表示する */
  .header__buttons {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 200; /* .header(z-index:100)より手前に */
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.6);
  }

  /* ボタン自体がnowrapの自然幅のままだと画面幅を超えてはみ出すため、
     幅を分け合って絶対に画面内に収まるようにする */
  .header__buttons .btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 6px;
    font-size: 12px;
  }
}

@media (min-width: 768px) {
  .header__buttons {
    gap: 20px;
  }
}

.header__buttons .btn {
  padding: 10px 14px;
  font-size: 16px;
}

@media (min-width: 768px) {
  .header__buttons .btn {
    padding: 12px 24px;
    font-size: 14px;
  }
}

/* ==========================================================
   fv（ファーストビュー）
   ========================================================== */
.fv {
  position: relative;
  z-index: 0; /* .fv__bgのz-index:-1をこのセクション内に閉じ込めるためのスタッキングコンテキスト */
  display: flex;
  flex-direction: column;
  gap: 24px; /* モバイルで写真とテキストの間にあける余白 */
  background: linear-gradient(0deg, #273e6a 0%, #438ecd 89.565%);
  padding: 40px 0 0;
}

@media (min-width: 1080px) {
  .fv {
    padding: 0;
    gap: 0;
    height: 640px;
  }
}

/* PC/タブレット/SPすべてで同じ背景画像を敷く */
.fv__bg {
  display: block;
  position: absolute;
  z-index: -1; /* 常に一番背面（fv__photo/fv__innerより後ろ）に */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover; /* 1920px相当で書き出した背景をcoverで敷く */
}

/* max-width/margin/paddingはHTML側で.containerクラスを併用して他セクションと共通化。
   ここでは.fv__inner固有のレイアウトのみ指定する */
.fv__inner {
  position: relative;
}

@media (min-width: 1080px) {
  .fv__inner {
    display: flex;
    align-items: center;
    height: 100%;
    margin-left: clamp(1.25rem, -0.568rem + 9.09vw, 6.25rem);
  }
}

/* テキスト（キャッチコピー・リード文・CTA）をまとめる列。
   写真をセクション全体に対して右寄せ配置にしたため、テキスト側は
   .fv__innerの幅（1280px中央寄せ）の中で完結させる */
.fv__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

@media (min-width: 1080px) {
  .fv__text {
    max-width: 960px;
    gap: 32px;
  }
}

.fv__photo {
  /* タブレット/SPでは文字を上、写真を下にし、写真は小さめに中央表示する */
  order: 1; /* HTML上は.fv__innerより前にあるが、表示順は後ろに回す */
  margin: 0 auto;
  overflow: hidden;
}

@media (min-width: 768px) {
  .fv__photo {
    max-width: 480px;
  }
}

@media (min-width: 1080px) {
  .fv__photo {
    position: absolute;
    top: 0;
    right: -100px; /* .fv__inner(1280px)ではなくセクション全体を基準に右へ。値は好みで調整可 */
    max-width: none; /* タブレット/SP用のmax-widthがmin-width指定で残ってしまうため明示的に解除 */
    width: 749px;
    height: 100%; /* FVセクションの高さ(640px)いっぱいに合わせる */
    margin: 0;
    border-radius: 0;
    /* 左端だけ斜めにカットした平行四辺形（Figma参考イメージに合わせた形） */
    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
  }
}

.fv__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fv__catch {
  color: var(--color-white);
  font-weight: 700;
}

.fv__catch-main {
  margin: 0 0 12px;
  font-size: 32px;
  line-height: 1.3;
}

@media (min-width: 768px) {
  .fv__catch-main {
    font-size: 48px;
  }
}

@media (min-width: 1080px) {
  .fv__catch-main {
    font-size: 62px;
  }
}

.fv__catch-sub {
  margin: 0;
  font-size: 20px;
  line-height: 1.4;
}

@media (min-width: 1080px) {
  .fv__catch-sub {
    font-size: 32px;
  }
}

.fv__lead {
  margin: 0;
  color: var(--color-white);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.6;
}

@media (min-width: 1080px) {
  .fv__lead {
    font-size: 16px;
    max-width: 432px;
  }
}

.fv__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* タブレット幅(768〜1079px)専用：PCと同じ横並びレイアウトを縮小して再現する（Figma node-id=621-3333参考） */
@media (min-width: 768px) and (max-width: 1079px) {
  .fv {
    display: block;
    padding: 0;
    height: 440px;
  }

  .fv__inner {
    display: flex;
    align-items: center;  
    height: 100%;
  }

  .fv__text {
    order: 0; /* モバイル用の並び順を解除し、PCと同じ横並びに戻す */
    max-width: 50vw;
    gap: 20px;
  }

  .fv__photo {
    order: 0; /* 「テキストの後ろに回す」指定を解除 */
    position: absolute;
    top: 0;
    right: -5vw;
    max-width: none;
    width: 60%;
    height: 100%;
    margin: 0;
    border-radius: 0;
    clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
  }

  .fv__catch-main {
    font-size: 40px;
  }

  .fv__catch-sub {
    font-size: 28px;
  }

  .fv__lead {
    font-size: 12px;
  }
}

@media (min-width: 768px) {
  .fv__cta {
    gap: 20px;
  }
}

.fv__cta .btn {
  flex: 1 1 auto;
  min-width: 140px;
}

/* ==========================================================
   worry（お悩み）
   ========================================================== */
.worry {
  position: relative;
  overflow: hidden; /* 装飾がセクション外にはみ出た場合に隠す */
  padding: 60px 0 80px;
}

/* FVとの継ぎ目にかかる装飾（白→blue-grayのグラデーション、下辺がV字の台形シェイプ）。
   Figma書き出しのSVGはpreserveAspectRatio="none"のせいでbackground-size:autoの
   縦横比計算がブラウザにより不安定だったため、同じ形をclip-pathで直接再現している。 */
.worry::before {
  content: "";
  position: absolute;
  inset: 0; /* aspect-ratioで高さを固定せず、セクションの実際の高さいっぱいに広げる。
               これで尖った先端が常にセクションの一番下にくる */
  background: linear-gradient(180deg, #ffffff 20.67%, var(--color-blue-gray) 63.46%);
  clip-path: polygon(0 0, 100% 0, 100% 81.2%, 49.2% 100%, 0 81.2%);
  z-index: 0;
}

.worry .container {
  position: relative;
  z-index: 1; /* 上の装飾(::before)より手前に表示する */
  display: flex;
  flex-direction: column;
  gap: 32px; /* タイトルと本体の間隔は親のgapで管理する */
}

@media (min-width: 1080px) {
  .worry {
    padding: 80px 0 160px;
  }
}

@media (min-width: 1080px) {
  .worry .container {
    gap: 36px;
  }
}

.worry__list {
  /* list-style/margin/paddingはsi-free_reset.cssでリセット済み */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px; /* SP: Figma node-id=621-3849 */
}

@media (min-width: 768px) {
  .worry__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px; /* タブレット: Figma node-id=621-3544 */
  }
}

@media (min-width: 1080px) {
  .worry__list {
    grid-template-columns: repeat(4, 1fr);
  }
}

.worry__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px; /* SP */
  padding: 20px 16px; /* SP */
  border: 2px solid var(--color-blue-gray);
  border-radius: var(--radius-lg); /* SP/タブレット共通で8px */
  background: var(--color-white);
  text-align: center;
}

@media (min-width: 768px) {
  .worry__item {
    gap: 16px; /* タブレット */
    padding: 24px 20px; /* タブレット */
  }
}

@media (min-width: 1080px) {
  .worry__item {
    gap: 24px;
    padding: 32px 24px;
    border-radius: var(--radius-xl); /* PCのみ12px */
  }
}

.worry__item-icon {
  width: 31px; /* SP */
  height: 32px;
}

@media (min-width: 768px) {
  .worry__item-icon {
    width: 39px; /* タブレット */
    height: 40px;
  }
}

@media (min-width: 1080px) {
  .worry__item-icon {
    width: 58px;
    height: 60px;
  }
}

.worry__item-text {
  margin: 0;
  font-weight: 600;
  font-size: 12px; /* SP */
  line-height: 1.2;
  color: var(--color-navy-700);
}

@media (min-width: 768px) {
  .worry__item-text {
    font-size: 14px; /* タブレット */
  }
}

@media (min-width: 1080px) {
  .worry__item-text {
    font-size: 18px;
    line-height: 1.6;
  }
}

/* ==========================================================
   melit（選ばれる理由）
   ========================================================== */
.melit {
  padding: 48px 0 60px;
  background: var(--color-white);
}

.melit .container {
  display: flex;
  flex-direction: column;
  gap: 32px; /* タイトルと本体の間隔は親のgapで管理する */
}

.melit__list {
  /* list-style/margin/paddingはsi-free_reset.cssでリセット済み */
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 1080px) {
  .melit__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .melit__list > :first-child {
    grid-column: 1 / -1;
  }
}

.melit-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-blue-200);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 10px rgba(10, 42, 94, 0.2);
  background: var(--color-white);
}

.melit-card__number {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 59px;
  overflow: hidden; /* 帯からはみ出す巨大な数字を、帯の幅でクリップして見せる */
  background: linear-gradient(0deg, var(--color-blue-900) 0%, var(--color-second) 89.565%);
}

.melit-card__number-text {
  position: absolute;
  left: 2px;
  top: -22px; /* Figmaの実データ（128pxの数字を帯にかぶせる配置）に合わせた値 */
  color: var(--color-white);
  font-weight: 400;
  font-size: 128px;
  line-height: 1.4;
}

.melit-card__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 24px 24px 79px;
}

@media (min-width: 480px) {
  .melit-card__body {
    padding-left: 100px;
  }
}

.melit-card__heading {
  margin: 0;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  color: var(--color-navy-900);
}

@media (min-width: 1080px) {
  .melit-card--main .melit-card__heading {
    font-size: 30px;
  }
}

.melit-card__desc {
  margin: 0;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-navy-900);
}

.melit-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.melit-tag {
  padding: 4px 10px;
  border: 2px solid var(--color-blue-900);
  border-radius: var(--radius-sm);
  color: var(--color-blue-900);
  font-weight: 700;
  font-size: 13px;
}

.melit-card__photo {
  width: 100%;
}

.melit-card__photo-img {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
}

/* 元画像（3:2の1枚もの）をコード側でトリミングする位置。
   カードごとに被写体（人物の顔）の位置が違うため個別に調整している */
.melit-card__photo-img--1 {
  object-position: 65% 25%;
}

.melit-card__photo-img--2 {
  object-position: 40% 20%;
}

.melit-card__photo-img--3 {
  object-position: 50% 25%;
}

@media (min-width: 1080px) {
  .melit-card--main {
    flex-direction: row;
    align-items: center;
  }

  .melit-card--main .melit-card__body {
    flex: 1 1 55%;
    padding: 28px 40px 28px 100px;
  }

  .melit-card--main .melit-card__photo {
    flex: 1 1 45%;
    align-self: stretch;
  }

  .melit-card--main .melit-card__photo-img {
    height: 100%;
  }

  .melit-card__photo-img--1 {
    object-position: 70% center;
  }

  /* サブカード(2,3)はグリッドで高さが揃うため、余った分は
     body写真の間の隙間に逃がす（写真の高さ自体は108px固定のまま） */
  .melit-card--sub {
    justify-content: space-between;
  }

  .melit-card--sub .melit-card__photo-img {
    height: 108px;
  }

  .melit-card__photo-img--2 {
    object-position: 40% 30%;
  }

  .melit-card__photo-img--3 {
    object-position: 50% 36%;
  }
}

/* ==========================================================
   about-service（サービス紹介）
   ========================================================== */
.about-service {
  padding: 60px 0;
  background-color: var(--color-blue-200);
  background-image: url("https://lps.willof-work.co.jp/wp-content/uploads/2026/09/member-bg-scaled.png");
  background-size: cover;
  background-repeat: no-repeat;
}

@media (min-width: 768px) {
  .about-service {
    /* 2560px幅までのcover表示を想定した3000px素材。
       壁の「Chance - Making Company」の文字が主な見せ場なので、
       縦方向はそこが切れないよう中央よりやや上に寄せている */
    background-size: 160%;
    background-position: 30% 0%;
  }
}

.about-service .container {
  display: flex;
  flex-direction: column;
  gap: 20px; /* about-service__panelとcompanyの間隔は親のgapで管理する */
}

.about-service__panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: rgba(255, 255, 255, 0.6);
  padding: 20px;
  border-radius: var(--radius-xl);
}

.about-service__profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.about-service__logo {
  height: 72px;
  width: auto;
}

/* 担当者カード */
.members {
  /* list-style/paddingはsi-free_reset.cssでリセット済み */
  display: flex;
  flex-direction: column;
  gap: 12px; /* SP: Figma node-id=621-3725 */
  max-width: 920px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .members {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (min-width: 1080px) {
  .members {
    grid-template-columns: repeat(4, 1fr);
  }
}

.member-card {
  display: flex;
  flex-direction: row; /* SP: 写真とテキストを横並びに */
  align-items: stretch;
  height: 200px; /* SP */
  overflow: hidden;
  border: 1px solid var(--color-blue-gray);
  border-radius: var(--radius-xl);
  background: var(--color-white);
  box-shadow: 4px 4px 4px rgba(24, 44, 80, 0.24);
}

@media (min-width: 768px) {
  .member-card {
    flex-direction: column;
    align-items: center;
    height: auto;
  }
}

.member-card__photo {
  flex-shrink: 0;
  width: 120px; /* SP */
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}

@media (min-width: 768px) {
  .member-card__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 220 / 240;
  }
}

.member-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
  padding: 24px 16px; /* SP */
}

@media (min-width: 768px) {
  .member-card__body {
    flex: none;
    width: 100%;
    padding: 24px;
  }
}

.member-card__profile {
  display: flex;
  flex-direction: row; /* SP: 役職名と氏名を横並びに */
  align-items: baseline;
  gap: 12px;
}

@media (min-width: 768px) {
  .member-card__profile {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

.member-card__role {
  margin: 0;
  font-weight: 500;
  font-size: 12px;
  color: var(--color-blue-900);
  white-space: nowrap;
}

.member-card__name {
  margin: 0;
  font-weight: 700;
  font-size: 16px; /* SP */
  color: var(--color-navy-900);
}

@media (min-width: 768px) {
  .member-card__name {
    font-size: 18px;
  }
}

.member-card__desc {
  margin: 0;
  font-weight: 500;
  font-size: 12px; /* SP */
  line-height: 1.4;
  color: var(--color-navy-900);
}

@media (min-width: 768px) {
  .member-card__desc {
    font-size: 14px;
  }
}

/* 対応職種タグ */
.kinds-wrapper {
  padding: 20px;
  background: var(--color-blue-200);
  border-radius: var(--radius-lg);
  /* パネル内の最後の要素のため、下マージンはパネル自体のpaddingに任せる */
}

@media (min-width: 1080px) {
  .kinds-wrapper {
    padding: 20px 60px;
  }
}

.kinds-wrapper__title {
  margin: 0 0 20px;
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  color: var(--color-navy-900);
}

@media (min-width: 768px) {
  .kinds-wrapper__title {
    font-size: 24px;
  }
}

.kinds {
  /* list-style/margin/paddingはsi-free_reset.cssでリセット済み */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 768px) {
  .kinds {
    grid-template-columns: repeat(4, 1fr);
  }
}

.kinds__item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 30px;
  background: var(--color-white);
  border: 1px solid var(--color-blue-200);
  font-weight: 700;
  font-size: 12px;
  color: var(--color-navy-900);
  text-align: center;
}

@media (min-width: 768px) {
  .kinds__item {
    font-size: 14px;
    padding: 8px 20px;
  }
}

/* 運用会社 */
.company {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 24px 20px 16px;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.8);
}

.company__title {
  margin: 0;
  font-weight: 600;
  font-size: 18px;
  color: var(--color-navy-900);
}

@media (min-width: 768px) {
  .company__title {
    font-size: 24px;
  }
}

.company__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

@media (min-width: 768px) {
  .company__info {
    flex-direction: row;
    gap: 48px;
    text-align: left;
  }
}

.company__logo {
  width: 72px;
  height: auto;
}

.company__desc {
  margin: 0;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-navy-900);
}

/* ==========================================================
   flow（ご利用の流れ）
   ========================================================== */
.flow {
  padding: 60px 0 40px;
}

.flow .container {
  display: flex;
  flex-direction: column;
  gap: 32px; /* タイトル・リード文・バナー・ステップの間隔は親のgapで管理する */
}

.flow__lead {
  margin: 0;
  text-align: center;
  font-weight: 500;
  font-size: 14px;
  color: var(--color-navy-900);
}

@media (min-width: 768px) {
  .flow__lead {
    font-size: 20px;
  }
}

.flow__lead-highlight {
  font-weight: 700;
  font-size: 16px;
  color: var(--color-blue-900);
}

@media (min-width: 768px) {
  .flow__lead-highlight {
    font-size: 24px;
  }
}

/* SP: バナー(左)とステップ(右)を横並びに。タブレット以上は元の縦積み（バナー上→ステップ下） */
.flow__body {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 20px;
  width: fit-content; /* バナー+ステップの内容幅に合わせて縮め、下のmarginで中央寄せする */
  margin: 0 auto;
}

@media (min-width: 768px) {
  .flow__body {
    flex-direction: column;
    gap: 32px;
    width: auto;
    margin: 0;
  }
}

.flow__banners {
  display: flex;
  flex-direction: column; /* SP: 2つのバナーを縦に積む */
  flex-shrink: 0;
  width: 88px;
}

@media (min-width: 768px) {
  .flow__banners {
    flex-direction: row;
    width: auto;
  }
}

.flow__banner {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
  font-weight: 700;
  font-size: 12px;
  text-align: center;
}

@media (min-width: 768px) {
  .flow__banner {
    font-size: 16px;
    padding: 8px 32px 8px 12px;
  }
}

.flow__banner--free {
  position: relative;
  z-index: 1; /* グレー側に重なる凸の先端を手前に見せる */
  flex-grow: 1.4;
  margin-bottom: -10px; /* SP: グレー側の凹みに縦方向で食い込ませる */
  background: var(--color-blue-900);
  color: var(--color-white);
  /* SP: 下端だけ矢印状に尖った凸形（横向きの形を90度回転） */
  clip-path: polygon(0 0, 0 calc(100% - 18px), 50% 100%, 100% calc(100% - 18px), 100% 0);
}

@media (min-width: 768px) {
  .flow__banner--free {
    margin-bottom: 0;
    margin-right: -10px; /* グレー側の凹みに横方向で食い込ませる */
    /* 右端だけ矢印状に尖った凸形 */
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
  }
}

.flow__banner--paid {
  background: var(--color-blue-gray);
  color: var(--color-navy-900);
  padding-top: 26px; /* SP: 上端が凹む分の余白 */
  /* SP: 上端に凹み、下端に凸（横向きの形を90度回転） */
  clip-path: polygon(0 0, 0 calc(100% - 18px), 50% 100%, 100% calc(100% - 18px), 100% 0, 50% 18px);
}

@media (min-width: 768px) {
  .flow__banner--paid {
    padding-top: 6px;
    padding-left: 32px; /* 左端が凹む分の余白 */
    /* 青側(.flow__banner--free)と同じ18pxの固定値で凹凸を揃える。
       %指定だと、幅が違う2つのバナーで凹凸の深さが揃わず噛み合わなかったため */
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%);
  }
}

.flow__steps {
  /* list-style/margin/paddingはsi-free_reset.cssでリセット済み */
  display: flex;
  flex-direction: column; /* SP: 1〜6を縦に並べる */
  /* flex:1にせず内容幅に合わせる。.flow__body側でブロック全体を中央寄せするため */
  gap: 24px; /* 少し余白を持たせる */
}

@media (min-width: 768px) {
  .flow__steps {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* タブレットも折り返さず1列6個のまま */
    gap: 24px 12px;
  }
}

@media (min-width: 1080px) {
  .flow__steps {
    gap: 40px;
  }
}

.flow__step {
  position: relative;
  display: flex;
  flex-direction: row; /* SP: 番号・アイコン・タイトルを横並びに */
  align-items: center;
  gap: 12px;
  text-align: left;
}

@media (min-width: 768px) {
  .flow__step {
    flex-direction: column;
    text-align: center;
  }
}

/* ステップ同士をつなぐ横線。最後尾（6番目）には表示しない
   デスクトップ幅ではgap(40px)と丸の直径(40px)が打ち消し合うため、
   線の開始位置(50%+丸の半径20px)から幅100%でちょうど次の丸の左端に届く */
/* SP(768px未満)：中身が横並びのため、番号(40px円)の中心に沿って
   接続線を下に伸ばし、次の番号とつなぐ。全ステップの高さが同じ前提で、
   gapとの差し引きでちょうど次の番号に届くようにしている */
@media (max-width: 767px) {
  .flow__step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 20px; /* 番号の水平中心 */
    top: calc(50% + 20px); /* 番号の垂直中心から半径(20px)分下 */
    width: 3px;
    height: calc(100% - 16px); /* gap(24px)を差し引いて次の番号にちょうど届く */
    background: var(--color-blue-500);
    z-index: 0;
  }

  .flow__step:nth-child(4)::before,
  .flow__step:nth-child(5)::before {
    background: var(--color-navy-400);
  }
}

/* タブレット(768〜1079px)：横方向の接続線。列間gapが12pxのため、
   円の直径(40px)との差し引きで幅を計算する（100% - 2*半径20px + gap12px） */
@media (min-width: 768px) and (max-width: 1079px) {
  .flow__step:not(:nth-child(6))::before {
    content: "";
    position: absolute;
    top: 19px;
    left: calc(50% + 20px);
    width: calc(100% - 28px);
    height: 3px;
    background: var(--color-blue-500);
    z-index: 0;
  }

  .flow__step:nth-child(4)::before,
  .flow__step:nth-child(5)::before {
    background: var(--color-navy-400);
  }
}

/* PC(1080px以上)：横方向の接続線。gap(40px)と円の直径(40px)が打ち消し合うため幅は100%でよい */
@media (min-width: 1080px) {
  .flow__step:not(:nth-child(6))::before {
    content: "";
    position: absolute;
    top: 19px;
    left: calc(50% + 20px);
    width: 100%;
    height: 3px;
    background: var(--color-blue-500);
    z-index: 0;
  }

  .flow__step:nth-child(4)::before,
  .flow__step:nth-child(5)::before {
    background: var(--color-navy-400);
  }
}

.flow__step-number {
  position: relative;
  z-index: 1;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: var(--color-blue-900);
  color: var(--color-white);
  font-weight: 700;
  font-size: 16px;
}

.flow__step:nth-child(5) .flow__step-number,
.flow__step:nth-child(6) .flow__step-number {
  background: var(--color-navy-800);
}

.flow__step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 64px; /* SP: 横並びでも収まるよう縮小しつつ、やや大きめに */
  height: 64px;
  border-radius: 50%;
  background: var(--color-white);
}

@media (min-width: 768px) {
  .flow__step-icon {
    width: 80px;
    height: 80px;
  }
}

@media (min-width: 1080px) {
  .flow__step-icon {
    width: 100px;
    height: 100px;
  }
}

.flow__step-icon img {
  width: 36px; /* SP */
  height: 36px;
  object-fit: contain; /* アイコンごとに縦横比がバラバラなため、正方形の枠に収めてサイズ感を揃える */
}

@media (min-width: 768px) {
  .flow__step-icon img {
    width: 48px;
    height: 48px;
  }
}

@media (min-width: 1080px) {
  .flow__step-icon img {
    width: 67px;
    height: 67px;
  }
}

.flow__step-title {
  margin: 0;
  min-width: 0;
  font-weight: 600;
  font-size: 15px;
  color: var(--color-navy-900);
}

@media (min-width: 768px) {
  .flow__step-title {
    width: 100%;
  }
}

@media (min-width: 1080px) {
  .flow__step-title {
    font-size: 16px;
  }
}

/* ==========================================================
   cta_area（下部CTA）
   ========================================================== */
.cta-area {
  position: relative;
  padding: 48px 0;
  background: linear-gradient(0deg, #273e6a 0%, #438ecd 89.565%);
  overflow: hidden;
}

.cta-area__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}

.cta-area__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 768px) {
  .cta-area__inner {
    flex-direction: row;
  }
}

.cta-card {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
  border-radius: var(--radius-lg);
  background: rgba(24, 44, 80, 0.6);
  text-align: center;
}

.cta-card__text {
  margin: 0;
  color: var(--color-white);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .cta-card__text {
    font-size: 14px;
    text-align: start;
  }
}

/* ==========================================================
   footer
   ========================================================== */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px var(--container-padding);
  background: var(--color-white);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

@media (min-width: 768px) {
  .footer__links {
    gap: 80px;
  }
}

.footer__links a {
  font-size: 12px;
  color: var(--color-navy-900);
  text-decoration: underline;
}

.footer__copyright {
  margin: 0;
  font-weight: 700;
  font-size: 12px;
  color: #000000;
}

/* ==========================================================
   consultation（無料相談 予約ページ / TimeRex埋め込み）
   ========================================================== */
.consultation {
  padding: 60px 0 80px;
}

/* document-download-thanks.htmlのように.consultationセクションを2つ並べる場合、
   上下paddingが足し合わさって間延びするため、それぞれ詰める用の修飾クラス */
.consultation--compact-bottom {
  padding-bottom: 24px;
}

.consultation--compact {
  padding-top: 24px;
}

.consultation .container {
  display: flex;
  flex-direction: column;
  gap: 24px; /* タイトル・リード文・ウィジェットの間隔は親のgapで管理する */
}

.consultation__lead {
  /* margin:0 autoは付けない。付けると自身のコンテンツ幅に縮んで中央寄せされてしまい、
     親(.consultation .container)のalign-items:stretchによる幅揃えが効かなくなる */
  max-width: 960px;
  text-align: start;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-navy-900);
}

.consultation__lead p + p {
  margin-top: 16px;
}

.consultation__lead a {
  text-decoration: underline;
}

@media (min-width: 768px) {
  .consultation__lead {
    font-size: 16px;
  }
}

.consultation__widget {
  /* margin:0 autoは付けない（.consultation__leadと同じ理由）。
     親のalign-items:stretchに任せることで.consultation__leadと確実に同じ幅になる */
  max-width: 960px;
}

/* TimeRexは実行時にiframeを挿入し、中間のdivに min-width:800px / max-width:980px を
   インラインで指定してくる。これはTimeRex側のウィジェットが800px未満だと内部レイアウトが
   崩れるための保護的な指定なので、無理に上書きしない（幅を強制すると中身が壊れる） */

/* ==========================================================
   document-download（資料ダウンロード フォーム埋め込みページ）
   ========================================================== */
.download {
  padding: 60px 0 80px;
}

.download__form-embed {
  margin-top: 32px;
}

.download__form-embed iframe {
  display: block;
  width: 100%;
}