@charset "UTF-8";
/* ============================================================
   SCS評価制度向け支援サービス LP（v2.2 / Figma SCS-LP-3 準拠）
   ------------------------------------------------------------
   inner幅 1160px
   タブレット 768px〜1080px ／ SP max-width: 767px
   ============================================================ */

:root {
  --hero-content-width: 873px; /* ヒーロー中央コンテンツ幅（最大要素=見出し。強調部68.75px時の実測幅） */
  --hero-woman-gap: 30px;      /* 中央コンテンツと女性画像の間隔 */
  --navy: #1a3e94;
  --navy-dark: #142d6e;
  --navy-deepest: #0e2050;
  --orange: #f39b1e;
  --red: #e70013;
  --balloon-red: #d0342c;
  --background-light: #f4f7fc;
  --border-light: #dce4f2;
  --text-dark: #111;
  --text-body: #555;
}

/* ------------------------------------------------------------
   ベース
   ------------------------------------------------------------ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--text-dark);
  line-height: 1.7;
  background: #fff;
}

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

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

.serif {
  font-family: 'Noto Serif JP', serif;
}

.inner {
  width: 1160px;
  max-width: 100%;
  margin: 0 auto;
}

.em-red {
  color: var(--red);
}

/* ------------------------------------------------------------
   セクション見出し（トリカラーバー付き）
   ------------------------------------------------------------ */
.section-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 60px;
}

.section-title__text {
  font-size: 30px;
  font-weight: 700;
  color: var(--text-dark);
  text-align: center;
  line-height: 1.5;
}

.heading-bar {
  display: flex;
  gap: 6px;
}

.heading-bar span {
  display: block;
  height: 3px;
  border-radius: 2px;
}

.heading-bar__red   { width: 18px; background: var(--red); }
.heading-bar__navy  { width: 52px; background: var(--navy); }
.heading-bar__orange{ width: 18px; background: var(--orange); }

/* ネイビー背景用（文字白・中央バー白） */
.section-title--light .section-title__text {
  color: #fff;
}

.section-title--light .heading-bar__navy {
  background: #fff;
}

/* サブリード（見出し直下の説明文） */
.section-lead {
  font-size: 16px;
  color: var(--text-body);
  line-height: 1.85;
  text-align: center;
  margin: -30px 0 45px;
}

/* ------------------------------------------------------------
   ヒーロー
   ------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 750px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 110px 20px 22px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(31, 89, 199, 0.86) 0%, rgba(20, 61, 150, 0.82) 55%, rgba(13, 38, 107, 0.9) 100%),
    url("../images/hero-bg-new.png") center / cover no-repeat;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* 官公庁表記（ライン挟み） */
.government-label {
  display: flex;
  align-items: center;
  gap: 18px;
}

.government-label__line {
  display: block;
  width: 56px;
  height: 1px;
  background: rgba(255, 255, 255, 0.7);
}

.government-label__text {
  font-size: 25px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.3em;
}

.hero-title {
  font-size: 55px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  line-height: 1.4;
  margin-top: 18px;
}

/* 「SCS評価制度対策」の強調（全ブレークポイントで比例拡大） */
.hero-title__em {
  font-size: 1.25em;
}

.hero-rule {
  display: flex;
  gap: 6px;
  margin-top: 30px;
}

.hero-rule span {
  display: block;
  height: 3px;
  border-radius: 2px;
}

.hero-rule__white  { width: 44px; background: rgba(255, 255, 255, 0.9); }
.hero-rule__orange { width: 16px; background: var(--orange); }

.hero-lead {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  line-height: 2;
  margin-top: 30px;
}

.hero-catch-box {
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  padding: 20px 44px;
  margin-top: 32px;
}

.hero-catch-box p {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  line-height: 1.85;
}

/* オレンジCTAボタン */
.button-orange {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(90deg, #fb9f02 0%, #fb7d02 100%);
  border-radius: 30px;
  padding: 17px 44px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-top: 48px;
  transition: opacity 0.25s;
}

.button-orange:hover {
  opacity: 0.85;
}

.hero-note {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: 32px;
}

.hero-note p {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.95);
  text-align: center;
  line-height: 1.7;
}

/* 女性画像（中央コンテンツの右30px・下端揃え）
   幅が狭いときはテキストに被せず画像側を縮小（50vw - コンテンツ半分 - 間隔 = 使える残り幅） */
.hero-woman {
  position: absolute;
  left: calc(50% + var(--hero-content-width) / 2 + var(--hero-woman-gap));
  bottom: 0;
  /* 467px = コンテンツ半分 437px + 間隔 30px。
     下限233px（1400px時の大きさ）で固定し、1400px未満は右側の欠けを許容（テキストには被らない） */
  width: clamp(233px, calc(50vw - 467px), 330px);
}

/* 白い吹き出し「2026年末頃施行スタート」 */
.hero-balloon {
  position: absolute;
  left: max(24px, calc(50% - 552px)); /* 幅が狭くても画面左24pxで止める */
  top: 90px;
  z-index: 2;
  background: #fff;
  border-radius: 999px;
  padding: 10px 24px;
  box-shadow: 0 6px 18px rgba(0, 20, 60, 0.35);
  transform: rotate(-5deg);
}

.hero-balloon__text {
  font-size: 17px;
  font-weight: 900;
  color: var(--balloon-red);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.hero-balloon::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  background: #fff;
  bottom: -7px;
  right: 34px;
  transform: rotate(45deg);
}

/* リード帯 */
.lead-strip {
  padding: 26px 20px;
  background:
    linear-gradient(90deg, rgba(20, 45, 110, 0.2) 0%, rgba(20, 45, 110, 0.2) 100%),
    linear-gradient(90deg, #143787 0%, #1f59c7 100%);
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  text-align: center;
}

/* ------------------------------------------------------------
   こんな疑問や不安、ありませんか？
   ------------------------------------------------------------ */
.problem {
  background: var(--background-light);
  padding: 120px 0;
}

/* 「SCS評価制度？」丸フキダシ（見出し左横・01カードの真上／fukidashi-20準拠） */
.problem .inner {
  position: relative;
}

.problem-balloon {
  position: absolute;
  top: -55px;
  left: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 35px 28px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 20, 60, 0.28); /* 白地をシャドウで縁取り */
  transform: rotate(-6deg); /* ？側（右）が少し上がる傾き */
}

/* 尾は大小2つの玉が右下に上下に連なる（下の01カードを指す） */
.problem-balloon::before {
  content: "";
  position: absolute;
  bottom: -10px;
  right: 14%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 20, 60, 0.28);
}

.problem-balloon::after {
  content: "";
  position: absolute;
  bottom: -26px;
  right: 13%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0, 20, 60, 0.28);
}

.problem-balloon__text {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-align: center;
}

.question-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.question-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(26, 62, 148, 0.08);
  padding: 24px 24px 28px;
}

.question-card__number {
  position: absolute;
  top: 6px;
  left: 16px;
  font-size: 48px;
  font-weight: 700;
  color: rgba(26, 62, 148, 0.15);
  line-height: 1.4;
}

.question-card__illust img {
  height: 150px;
  width: auto;
}

.question-card__question {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  text-align: center;
}

.question-card__answer {
  font-size: 16px;
  font-weight: 700;
  color: #222;
  text-align: center;
}

.question-card__text {
  font-size: 16px;
  color: var(--text-body);
  line-height: 1.75;
  text-align: center;
}

/* ------------------------------------------------------------
   SCS評価制度とは
   ------------------------------------------------------------ */
.about {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-dark) 50%, var(--navy-deepest) 100%);
  padding: 120px 0;
}

.about .section-title {
  margin-bottom: 30px;
}

.about-intro {
  font-size: 16px;
  color: #e0e8f7;
  line-height: 1.9;
  text-align: center;
  margin-bottom: 45px;
}

/* 3つの特徴チップ */
.feature-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.feature-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
}

.feature-chip__check {
  font-size: 22px;
  font-weight: 700;
  color: var(--orange);
}

.feature-chip__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
}

.feature-chip__text {
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.65;
}

/* 星レベル図 */
.star-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 42px;
  background: #fff;
  border-radius: 10px;
  padding: 60px 52px;
  margin-top: 24px;
}

.star-diagram__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
}

.star-diagram__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-dark);
  text-align: center;
}

.star-diagram__body {
  width: 1000px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.rating-bar {
  display: flex;
  height: 64px;
  /* 左端が高さ0で右端に向かって高くなる三角形（ウェッジ型） */
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.rating-bar__segment {
  display: block;
  height: 100%;
}

.rating-bar__segment--muted  { width: 22%; background: var(--border-light); }
.rating-bar__segment--orange { width: 25%; background: var(--orange); }
.rating-bar__segment--navy   { width: 26%; background: var(--navy); }
.rating-bar__segment--red    { width: 27%; background: var(--red); }

.rating-labels {
  display: flex;
  align-items: flex-start;
}

.rating-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  text-align: center;
}

.rating-column--first  { width: 22%; }
.rating-column--second { width: 25%; }
.rating-column--third  { width: 26%; }
.rating-column--fourth { width: 27%; }

.rating-column__stars {
  font-size: 16px;
  font-weight: 700;
}

.rating-column__stars--muted  { color: #9aa3b5; }
.rating-column__stars--orange { color: var(--orange); }
.rating-column__stars--navy   { color: var(--navy); }
.rating-column__stars--red    { color: var(--red); }

.rating-column__caption {
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.5;
}

.rating-column__caption--strong {
  font-weight: 700;
  color: var(--text-dark);
}

.rating-column__pill {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  border-radius: 16px;
  padding: 3px 11px;
}

.rating-column__pill--orange { background: var(--orange); }
.rating-column__pill--navy   { background: var(--navy); }

.star-diagram__caption {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
  text-align: center;
}

/* ★3/★4/★5 詳細カード */
.level-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 24px;
}

.level-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}

.level-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--border-light);
  padding: 14px 20px;
}

.level-card__stars {
  font-size: 22px;
  font-weight: 700;
  color: var(--orange);
}

.level-card__name {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
}

.level-card__badge {
  margin-left: auto;
  background: var(--orange);
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.level-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 20px 24px;
}

.level-card__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.level-card__key {
  align-self: flex-start;
  background: var(--background-light);
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}

.level-card__value {
  font-size: 16px;
  color: var(--text-body);
  line-height: 1.7;
}

/* ------------------------------------------------------------
   対応前に知っておくべき3つのPOINT
   ------------------------------------------------------------ */
.point {
  background: var(--background-light);
  padding: 120px 0;
}

.point-card {
  display: flex;
  align-items: center;
  gap: 40px;
  background: #fff;
  border-radius: 12px;
  padding: 40px 48px;
}

.point-card + .point-card {
  margin-top: 24px;
}

.point-card--column {
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.point-card__copy {
  width: 600px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.point-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.point-label__word {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
}

.point-label__number {
  font-size: 36px;
  font-weight: 700;
  color: var(--orange);
}

.point-card__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-dark);
}

.point-card__subhead {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
}

.point-card__text {
  font-size: 16px;
  color: var(--text-body);
  line-height: 1.85;
}

.risk-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fdf0f0;
  border-radius: 8px;
  padding: 16px 20px;
}

.risk-box__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--red);
}

.risk-box__item {
  font-size: 16px;
  color: var(--text-dark);
  line-height: 1.65;
}

.compare-row {
  width: 100%;
  display: flex;
  gap: 12px;
}

.compare-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--background-light);
  border-radius: 8px;
  padding: 14px 18px;
}

.compare-box__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
}

.compare-box__text {
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.65;
}

.quote-box {
  width: 100%;
  background: #fdf3e3;
  border-radius: 8px;
  padding: 14px 18px;
}

.quote-box p {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.8;
}

.point-card__illust {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.point-card__illust-caption {
  font-size: 16px;
  font-weight: 700;
  color: #222;
  line-height: 1.75;
  text-align: center;
}

.point-card__illust img {
  width: 440px;
}

.point-columns {
  width: 100%;
  display: flex;
  gap: 24px;
}

.pitfall-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fdf0f0;
  border-radius: 8px;
  padding: 18px 22px;
}

.pitfall-box__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--red);
}

.pitfall-box__item-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
}

.pitfall-box__item-text {
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.65;
}

.requirement-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--background-light);
  border-radius: 8px;
  padding: 18px 22px;
}

.requirement-box__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
}

.requirement-box__item {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
}

/* ------------------------------------------------------------
   CTA帯
   ------------------------------------------------------------ */
.cta-band {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  padding: 44px 20px;
  background: linear-gradient(90deg, #1c2c4e 0%, var(--navy) 100%);
}

.cta-band__text {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}

.cta-band__button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--orange);
  border-radius: 999px;
  padding: 18px 44px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  transition: opacity 0.25s;
}

.cta-band__button:hover {
  opacity: 0.85;
}

/* ------------------------------------------------------------
   UPFの対応支援サービス
   ------------------------------------------------------------ */
.service {
  background: #fff;
  padding: 120px 0;
}

.service .section-title {
  margin-bottom: 30px;
}

/* タイトル左の輪郭吹き出し */
.title-balloon-anchor {
  position: relative;
  display: inline-block;
}

.title-balloon {
  position: absolute;
  right: calc(100% + 45px);
  top: 50%;
  transform: translateY(-58%) rotate(-8deg);
  background: #fff;
  border: 2px solid var(--navy);
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.title-balloon::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fff;
  border-right: 2px solid var(--navy);
  border-bottom: 2px solid var(--navy);
  bottom: -8px;
  left: 62%;
  transform: rotate(45deg);
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.service-card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  overflow: hidden;
}

.service-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--navy);
  padding: 14px 20px;
}

.service-card__number {
  font-size: 28px;
  font-weight: 700;
  color: var(--orange);
}

.service-card__name {
  font-size: 19px;
  font-weight: 700;
  color: #fff;
}

.service-card__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 20px 24px;
}

.service-card__photo img {
  width: 100%;
  height: 219px;
  object-fit: cover;
  border-radius: 8px;
}

.service-card__lead {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.75;
}

.service-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--background-light);
  border-radius: 8px;
  padding: 12px 16px;
}

.service-block__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
}

.service-block__text {
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.65;
}

/* ------------------------------------------------------------
   UPFが選ばれる3つの理由
   ------------------------------------------------------------ */
.reason {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-dark) 50%, var(--navy-deepest) 100%);
  padding: 120px 0;
}

.reason-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.reason-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  background: #fff;
  border-radius: 12px;
  padding: 28px 24px;
}

.reason-card__number {
  font-size: 34px;
  font-weight: 700;
  color: var(--orange);
}

.reason-card__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
}

.reason-card__lead {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.75;
}

.reason-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--background-light);
  border-radius: 8px;
  padding: 14px 16px;
}

.reason-block__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
}

.reason-block__text {
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.7;
}

/* ------------------------------------------------------------
   幅広い業界の企業様にご利用いただいています
   ------------------------------------------------------------ */
.industry {
  background: #fff;
  padding: 120px 0;
}

.industry .section-title {
  margin-bottom: 30px;
}

.industry .section-lead {
  margin-top: 0;
  color: #444;
}

/* ===================================================
   ロゴマーキー 共通パーツ（260804_logo_marquee）
   - CSSのみで動作（JS不要）
   - 1行目: 38s 順方向 / 2行目: 31s 逆方向
   - 画像は同じものを2枚並べて translateX(-50%) でループ
   =================================================== */

.logo-marquee {
  display: flex;
  flex-direction: column;
  gap: min(calc(30 / 1080 * 100vw), 30px);
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .logo-marquee {
    gap: calc(30 / 750 * 100vw);
  }
}

.logo-marquee__row {
  overflow: hidden;
}

/* --- 1行目 --- */
.logo-marquee__row.--01 .logo-marquee__wrapper {
  width: min(calc(5876 / 1080 * 100vw), 5876px);
  animation: logo-marquee-scroll 38s linear infinite;
}
@media screen and (max-width: 767px) {
  .logo-marquee__row.--01 .logo-marquee__wrapper {
    width: calc(4734 / 750 * 100vw);
    animation-duration: 38s;
  }
}

.logo-marquee__row.--01 .logo-marquee__img {
  width: min(calc(2938 / 1080 * 100vw), 2938px);
}
@media screen and (max-width: 767px) {
  .logo-marquee__row.--01 .logo-marquee__img {
    width: calc(2367 / 750 * 100vw);
  }
}

/* --- 2行目（逆方向） --- */
.logo-marquee__row.--02 .logo-marquee__wrapper {
  width: min(calc(4754 / 1080 * 100vw), 4754px);
  animation: logo-marquee-scroll 31s linear infinite reverse;
}
@media screen and (max-width: 767px) {
  .logo-marquee__row.--02 .logo-marquee__wrapper {
    width: calc(3786 / 750 * 100vw);
    animation-duration: 31s;
  }
}

.logo-marquee__row.--02 .logo-marquee__img {
  width: min(calc(2377 / 1080 * 100vw), 2377px);
}
@media screen and (max-width: 767px) {
  .logo-marquee__row.--02 .logo-marquee__img {
    width: calc(1893 / 750 * 100vw);
  }
}

/* --- 共通 --- */
.logo-marquee__wrapper {
  display: flex;
  flex-wrap: nowrap;
  will-change: transform;
}

.logo-marquee__img {
  display: block;
  flex-shrink: 0;
}
.logo-marquee__img img {
  display: block;
  width: 100%;
  height: auto;
}

/* 支援実績社数の注記（マーキー下・API取得） */
.industry-note {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: min(calc(18 / 1080 * 100vw), 20px);
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #666;
  text-align: center;
  margin-top: min(calc(70 / 1080 * 100vw), 70px);
}
@media screen and (max-width: 767px) {
  .industry-note {
    font-size: calc(22 / 750 * 100vw);
    margin-top: calc(60 / 750 * 100vw);
  }
}

@keyframes logo-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ------------------------------------------------------------
   よくあるご質問
   ------------------------------------------------------------ */
.faq {
  background: #fff;
  padding: 120px 0;
}

.faq-list {
  width: 1000px;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* セクション背景が白のため、影で1問ずつのボックスを見せる */
.faq-item {
  background: #fff;
  box-shadow: 0 2px 10px rgba(26, 62, 148, 0.07);
  transition: box-shadow 0.25s;
}

/* 開いている項目は少しだけ濃くして浮かせる */
.faq-item.is-open {
  box-shadow: 0 4px 16px rgba(26, 62, 148, 0.11);
}

.faq-item__question {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 24px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.faq-item__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.faq-item__icon--question {
  background: var(--navy);
}

.faq-item__icon--answer {
  background: var(--orange);
}

.faq-item__question-text {
  flex: 1;
  font-size: 18px;
  font-weight: 700;
  color: #093d79;
  line-height: 1.5;
}

.faq-item__toggle::before {
  content: "＋";
  font-size: 26px;
  font-weight: 700;
  color: #195392;
}

.faq-item.is-open .faq-item__toggle::before {
  content: "−";
}

.faq-item__answer {
  display: none;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 24px 24px;
}

.faq-item.is-open .faq-item__answer {
  display: flex;
}

.faq-item__answer-text {
  flex: 1;
  font-size: 16px;
  color: #222;
  line-height: 1.8;
}

.faq-item__answer-text p + p {
  margin-top: 12px;
}

/* ------------------------------------------------------------
   無料相談の流れ
   ------------------------------------------------------------ */
.flow {
  padding: 120px 0;
  background: #f4f7fc;
}

.flow-steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.flow-step {
  width: 920px;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
  background: #fff;
  border-radius: 12px;
  padding: 28px 32px;
}

.flow-step__number {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--navy);
  font-size: 26px;
  font-weight: 700;
  color: #fff;
}

.flow-step__copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.flow-step__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
}

.flow-step__text {
  font-size: 16px;
  color: var(--text-body);
  line-height: 1.75;
}

.flow-step__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.flow-chip {
  background: #fff;
  border: 1px solid var(--navy);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}

.flow-arrow {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
}

/* ------------------------------------------------------------
   お問い合わせ（TimeRex）
   ------------------------------------------------------------ */
.contact {
  background: #fff;
  padding: 120px 0;
}

.contact .section-title {
  margin-bottom: 30px;
}

.contact-intro {
  font-size: 16px;
  color: #888;
  line-height: 1.8;
  text-align: center;
  margin-bottom: 45px;
}

.contact-calendar {
  width: 860px;
  max-width: 100%;
  margin: 0 auto;
}

/* 1240px以下は女性画像が縮小しすぎて不自然になるため非表示 */
@media (max-width: 1240px) {
  .hero-woman {
    display: none;
  }
}

/* ============================================================
   タブレット（768px〜1080px）
   ------------------------------------------------------------
   ・ヘッダー／フッターは共通CSSのvwスケーリングで吸収するため対象外
   ・折り返しを抑えるためフォントサイズと列数を調整
   ============================================================ */
@media screen and (min-width: 768px) and (max-width: 1080px) {

  /* ---------- 共通 ---------- */
  .inner {
    width: auto;
    padding: 0 24px;
  }

  .section-title {
    margin-bottom: 48px;
  }

  .section-title__text {
    font-size: 26px;
  }

  .section-lead {
    font-size: 15px;
    margin: -24px 0 38px;
  }

  .problem,
  .about,
  .point,
  .service,
  .reason,
  .industry,
  .faq,
  .flow,
  .contact {
    padding: 70px 0;
  }

  /* ---------- ヒーロー ---------- */
  .hero {
    min-height: 0;
    padding: 92px 24px 22px;
  }

  /* 吹き出しはタイトル（40px）と被らないよう上に寄せて縮小 */
  .hero-balloon {
    top: 32px;
    padding: 8px 20px;
  }

  .hero-balloon__text {
    font-size: 15px;
  }

  .government-label {
    gap: 14px;
  }

  .government-label__line {
    width: 44px;
  }

  .government-label__text {
    font-size: 17px;
    letter-spacing: 0.25em;
  }

  .hero-title {
    font-size: 40px;
  }

  .hero-lead {
    font-size: 22px;
    line-height: 1.9;
  }

  .hero-catch-box {
    padding: 15px 28px;
  }

  .hero-catch-box p {
    font-size: 15px;
  }

  .button-orange {
    margin-top: 38px;
  }

  .hero-note {
    padding-top: 30px;
  }

  .hero-note p {
    font-size: 11px;
  }

  .lead-strip {
    font-size: 17px;
    padding: 22px 24px;
  }

  /* ---------- こんな疑問や不安、ありませんか？ ---------- */
  /* 見出し（26px）と被らないよう縮小して左に寄せる */
  .problem-balloon {
    top: -55px; /* 2行化で背が高くなったぶん上に逃がし、01カードへの入り込みを防ぐ */
    left: 12px;
    padding: 34px 16px;
  }

  .problem-balloon__text {
    font-size: 14px;
  }

  .question-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .question-card {
    padding: 24px 20px 26px;
  }

  .question-card__number {
    font-size: 40px;
  }

  .question-card__illust img {
    height: 130px;
  }

  .question-card__question {
    font-size: 17px;
  }

  .question-card__answer {
    font-size: 15px;
  }

  .question-card__text {
    font-size: 15px;
  }

  /* ---------- SCS評価制度とは ---------- */
  .about-intro {
    font-size: 15px;
    margin-bottom: 38px;
  }

  .feature-row {
    gap: 16px;
  }

  .feature-chip {
    padding: 20px 16px;
    gap: 8px;
  }

  .feature-chip__check {
    font-size: 20px;
  }

  .feature-chip__title {
    font-size: 14px;
  }

  .feature-chip__text {
    font-size: 12px;
  }

  /* 星レベル図 */
  .star-diagram {
    padding: 38px 24px;
    gap: 30px;
    margin-top: 16px;
  }

  .star-diagram__title {
    font-size: 20px;
  }

  .star-diagram__body {
    gap: 18px;
  }

  .rating-bar {
    height: 48px;
  }

  .rating-column {
    padding: 0 5px;
  }

  .rating-column__stars {
    font-size: 14px;
  }

  .rating-column__caption {
    font-size: 12px;
  }

  .rating-column__pill {
    font-size: 12px;
    padding: 2px 9px;
  }

  .star-diagram__caption {
    font-size: 14px;
  }

  /* ★3/★4/★5 詳細カード */
  .level-grid {
    gap: 16px;
    margin-top: 16px;
  }

  .level-card__head {
    gap: 6px;
    padding: 12px 14px;
  }

  .level-card__stars {
    font-size: 20px;
  }

  .level-card__name {
    font-size: 14px;
  }

  .level-card__badge {
    font-size: 12px;
    padding: 2px 8px;
  }

  .level-card__body {
    padding: 16px 14px 20px;
    gap: 10px;
  }

  .level-card__key {
    font-size: 12px;
    padding: 2px 8px;
  }

  .level-card__value {
    font-size: 14px;
  }

  /* ---------- 対応前に知っておくべき3つのPOINT ---------- */
  /* 本文を全幅にして折り返しを減らすため縦積みに変更 */
  .point-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
    padding: 32px 24px;
  }

  .point-card__copy {
    width: 100%;
  }

  .point-card__title {
    font-size: 22px;
  }

  .point-card__illust {
    width: 100%;
  }

  .point-card__illust img {
    width: 100%;
    max-width: 420px;
  }

  .point-columns {
    gap: 16px;
  }

  .pitfall-box,
  .requirement-box {
    padding: 16px 18px;
  }

  /* ---------- CTA帯 ---------- */
  .cta-band {
    flex-wrap: wrap;
    gap: 20px 32px;
    padding: 36px 24px;
  }

  .cta-band__text {
    font-size: 18px;
    text-align: center;
  }

  .cta-band__button {
    padding: 16px 36px;
  }

  /* ---------- UPFの対応支援サービス ---------- */
  .title-balloon {
    right: calc(100% + 24px);
    font-size: 15px;
    padding: 8px 18px;
  }

  .service-grid {
    gap: 16px;
  }

  .service-card__head {
    gap: 8px;
    padding: 12px 14px;
  }

  .service-card__number {
    font-size: 24px;
  }

  .service-card__name {
    font-size: 17px;
  }

  .service-card__body {
    padding: 16px 14px 20px;
    gap: 12px;
  }

  .service-card__photo img {
    height: 160px;
  }

  .service-card__lead {
    font-size: 14px;
  }

  .service-block {
    padding: 10px 12px;
  }

  .service-block__title {
    font-size: 14px;
  }

  .service-block__text {
    font-size: 12px;
  }

  /* ---------- UPFが選ばれる3つの理由 ---------- */
  /* 文章量が多いため1列にして全幅で表示 */
  .reason-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .reason-card {
    padding: 24px 24px 26px;
  }

  .reason-card__number {
    font-size: 30px;
  }

  .reason-card__title {
    font-size: 19px;
  }

  .reason-card__lead {
    font-size: 15px;
  }

  .reason-block__title {
    font-size: 15px;
  }

  .reason-block__text {
    font-size: 14px;
  }

  /* ---------- よくあるご質問 ---------- */
  .faq-item__question {
    padding: 20px;
    gap: 14px;
  }

  .faq-item__icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .faq-item__question-text {
    font-size: 17px;
  }

  .faq-item__answer {
    padding: 16px 20px 22px;
    gap: 14px;
  }

  .faq-item__answer-text {
    font-size: 15px;
  }

  /* ---------- 無料相談の流れ ---------- */
  .flow-step {
    padding: 24px 26px;
    gap: 20px;
  }

  .flow-step__number {
    width: 50px;
    height: 50px;
    font-size: 23px;
  }

  .flow-step__title {
    font-size: 17px;
  }

  .flow-step__text {
    font-size: 15px;
  }

  /* ---------- お問い合わせ ---------- */
  .contact-intro {
    font-size: 15px;
    margin-bottom: 38px;
  }
}

/* ============================================================
   SP（〜767px）
   ============================================================ */
@media (max-width: 767px) {

  .inner {
    width: auto;
    padding: 0 20px;
  }

  .section-title {
    margin-bottom: 40px;
  }

  .section-title__text {
    font-size: 20px;
  }

  .section-lead {
    font-size: 14px;
    margin: -20px 0 30px;
  }

  /* ヒーロー */
  .hero {
    min-height: 0;
    padding: 84px 20px 22px;
  }

  .government-label {
    gap: 12px;
  }

  .government-label__line {
    width: 30px;
  }

  .government-label__text {
    font-size: 15px;
    letter-spacing: 0.2em;
  }

  .hero-title {
    font-size: 30px;
  }

  .hero-lead {
    font-size: 15px;
    line-height: 1.8;
  }

  .hero-catch-box {
    padding: 14px 18px;
  }

  .hero-catch-box p {
    font-size: 14px;
  }

  .button-orange {
    padding: 15px 32px;
    font-size: 15px;
    margin-top: 30px;
  }

  .hero-note {
    padding-top: 28px;
  }

  .hero-note p {
    font-size: 10px;
  }

  .hero-woman {
    display: none;
  }

  .hero-balloon {
    left: 16px;
    top: 20px;
    padding: 5px 16px;
  }

  .hero-balloon__text {
    font-size: 13px;
  }

  .lead-strip {
    font-size: 14px;
    padding: 18px 16px;
  }

  /* 各セクション共通 */
  .problem,
  .about,
  .point,
  .service,
  .reason,
  .industry,
  .faq,
  .flow,
  .contact {
    padding: 60px 0;
  }

  /* 「SCS評価制度？」フキダシ（SPは見出し上・左端から少し離して配置） */
  .problem-balloon {
    position: static;
    width: fit-content;
    margin: 0 0 30px 6px;
    padding: 34px 18px;
  }

  .problem-balloon__text {
    font-size: 14px;
  }

  .question-grid,
  .feature-row,
  .level-grid,
  .service-grid,
  .reason-grid {
    grid-template-columns: 1fr;
  }

  /* 星レベル図 */
  .star-diagram {
    padding: 28px 16px;
    gap: 24px;
  }

  .star-diagram__title {
    font-size: 18px;
  }

  .rating-bar {
    height: 30px;
  }

  .rating-column {
    padding: 0 3px;
  }

  .rating-column__stars {
    font-size: 12px;
  }

  .rating-column__caption {
    font-size: 10px;
  }

  .rating-column__pill {
    font-size: 10px;
    padding: 2px 8px;
  }

  .star-diagram__caption {
    font-size: 13px;
  }

  /* POINT */
  .point-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 28px 20px;
  }

  .point-card__copy {
    width: 100%;
  }

  .point-card__title {
    font-size: 20px;
  }

  .compare-row {
    flex-direction: column;
  }

  .point-card__illust {
    width: 100%;
  }

  .point-card__illust img {
    width: 100%;
  }

  .point-card__illust-caption {
    font-size: 14px;
  }

  .point-columns {
    flex-direction: column;
  }

  /* CTA帯 */
  .cta-band {
    flex-direction: column;
    gap: 20px;
    padding: 32px 20px;
  }

  .cta-band__text {
    font-size: 16px;
    text-align: center;
  }

  /* タイトル吹き出し（SPは見出し上・「SCS評価制度？」と同じ左位置に配置） */
  .section-title .title-balloon-anchor {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch; /* アンカーを全幅にして左端基準を画面側に合わせる */
  }

  .title-balloon {
    position: static;
    display: inline-block;
    align-self: flex-start;
    margin-left: 6px; /* inner余白20px + 6px = 画面左から26px */
    transform: rotate(-8deg);
    margin-bottom: 14px;
    font-size: 14px;
    padding: 8px 16px;
  }

  /* FAQ */
  .faq-item__question {
    padding: 16px;
    gap: 12px;
  }

  .faq-item__icon {
    width: 32px;
    height: 32px;
    font-size: 15px;
  }

  .faq-item__question-text {
    font-size: 15px;
  }

  .faq-item__toggle::before {
    font-size: 20px;
  }

  .faq-item__answer {
    padding: 12px 16px 20px;
    gap: 12px;
  }

  .faq-item__answer-text {
    font-size: 14px;
  }

  /* 無料相談の流れ */
  .flow-step {
    padding: 20px;
    gap: 14px;
    align-items: flex-start;
  }

  .flow-step__number {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }

  .flow-step__title {
    font-size: 15px;
    line-height: 1.6;
  }

  .flow-step__text {
    font-size: 14px;
  }

  .flow-chip {
    font-size: 12px;
  }
}