/* ============================================
   GAMIES 公式サイト 共通スタイル
   配色：白 #FFFFFF ／ 黒 #111111
   アクセント：ピンク #F32E8D ／ イエロー #FCC21C ／ グリーン #2EC38A
   ============================================ */

:root {
  --color-bg: #FFFFFF;
  --color-text: #111111;
  --color-pink: #F32E8D;
  --color-yellow: #FCC21C;
  --color-green: #2EC38A;
  --font-jp: "Noto Sans JP", sans-serif;
  --font-en: "Inter", "Noto Sans JP", sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  /* 装飾のはみ出しによる横スクロールを防ぐ。
     hidden はスクロールスナップを無効化してしまうため clip を使う
     （clip 非対応の古いブラウザ向けに hidden をフォールバックとして残す） */
  overflow-x: hidden;
  overflow-x: clip;
}

html {
  scroll-behavior: smooth; /* ナビのアンカー移動を滑らかにする */
}

/* PCのみ・トップページのみ：スクロールでセクションが1画面ずつピタッと切り替わる
   （下層ページにスナップが波及しないよう body.home 配下に限定する） */
@media (min-width: 901px) {
  html:has(body.home) {
    scroll-snap-type: y mandatory;
  }

  .home .hero,
  .home .about,
  .home .cycle,
  .home .service,
  .home .works,
  .home .flow,
  .home .news {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* フッターは最終画面の下端に吸い付かせる。
     ニュースと被らないよう上に余白を設ける */
  .home .site-footer {
    scroll-snap-align: end;
    margin-top: 10svh;
  }
}

/* スクリーンリーダー専用テキスト（画面には表示しない） */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

body {
  font-family: var(--font-jp);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.8;
}

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

img,
svg {
  max-width: 100%;
}

/* ============================================
   ヘッダー
   ============================================ */

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

/* PC：スナップ移動中もナビが使えるよう固定表示にする */
@media (min-width: 901px) {
  .site-header {
    position: fixed;
  }
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 40px;
  /* heroキャンバスと左端を揃える（ワイド画面でhero幅が縮んだ場合も追従） */
  width: min(100%, 177.7vh);
  width: min(100%, 177.7svh);
  margin-inline: auto;
}

.logo {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

/* ロゴ画像（ヘッダーは黒版・フッターは白版を使用） */
.logo-img {
  display: block;
  height: 30px;
  width: auto;
  align-self: flex-start; /* flexの引き伸ばしで横に歪むのを防ぐ */
}

.logo-text {
  font-family: var(--font-en);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.logo-sub {
  font-family: var(--font-en);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--color-text);
}

.global-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}

.nav-list a {
  font-size: 14px;
  font-weight: 500;
  padding: 8px 2px; /* タップ領域の確保 */
  transition: color 0.2s;
}

.nav-list a:hover {
  color: var(--color-pink);
}

/* お問い合わせボタン（黒背景で目立たせる） */
.contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-text);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 24px;
  border-radius: 999px;
  transition: opacity 0.2s;
}

.contact-btn:hover {
  opacity: 0.8;
}

.contact-icon {
  width: 16px;
  height: 16px;
}

/* ハンバーガーボタン（PCでは非表示） */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 48px;
  height: 48px;
  padding: 12px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 110;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-text);
  transition: transform 0.3s, opacity 0.3s;
}

/* メニュー展開時：バツ印に変形 */
.nav-open .hamburger span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-open .hamburger span:nth-child(2) {
  opacity: 0;
}

.nav-open .hamburger span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ============================================
   ファーストビュー
   ============================================ */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: 44% 56%;
  align-items: center;
  /* デザイン画像と同じ縦横比のキャンバスとして扱う。
     幅いっぱいに置き、画面高に収まらないワイド画面では
     高さ基準の幅に縮めて中央寄せする */
  aspect-ratio: 1672 / 941;
  width: min(100%, 177.7vh);
  width: min(100%, 177.7svh);
  margin-inline: auto;
  padding-top: 5.7cqi;
  overflow: hidden;
  /* 中身のサイズをこの要素の幅（cqi単位）基準にするための指定 */
  container-type: inline-size;
}

.hero-text {
  position: relative;
  z-index: 2; /* コピーがビジュアルより手前に来るようにする */
  /* cqi＝heroキャンバス幅基準。画面サイズが変わっても構図が崩れない */
  padding-left: 5.7cqi;
  padding-bottom: 2.4cqi;
}

/* --- コピー --- */

.hero-copy {
  font-weight: 900;
  line-height: 1.3;
}

.copy-line {
  display: block;
  white-space: nowrap; /* 改行位置を固定し、途中で折り返させない */
}

.copy-small {
  font-size: 2.2cqi;
  letter-spacing: 0.12em;
  margin-bottom: 0.4em;
}

.copy-large {
  font-size: 5.2cqi;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

/* ピンクの手描き風下線（SVGを背景として敷く） */
.marker {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 22' preserveAspectRatio='none'%3E%3Cpath d='M4 15 C 60 7, 120 17, 170 10 S 270 13, 296 9' fill='none' stroke='%23F32E8D' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M10 19 C 80 13, 160 20, 290 14' fill='none' stroke='%23F32E8D' stroke-width='3' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 0.18em;
  padding-bottom: 0.14em;
}

/* --- 説明文 --- */

.hero-lead {
  margin-top: 1.9cqi;
  font-size: 1.1cqi; /* キャンバス幅に比例させて2行を維持する */
  font-weight: 500;
  line-height: 2.1;
}

.lead-line {
  display: block;
  white-space: nowrap; /* 説明文は指定の2行で固定 */
}

/* --- ボタン --- */

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2cqi;
  margin-top: 2.4cqi;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.95em;
  font-size: 0.9cqi;
  font-weight: 700;
  /* 内側の余白はフォントサイズ連動（em）で均等にスケールさせる */
  padding: 0.95em 1.35em 0.95em 2em;
  border-radius: 999px;
  transition: opacity 0.2s;
}

.btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3em;
  height: 2.3em;
  border-radius: 50%;
  transition: transform 0.25s ease;
}

.btn-arrow svg {
  width: 1.05em;
  height: 1.05em;
}

/* ホバー時は矢印を少し右へ */
.btn:hover .btn-arrow {
  transform: translateX(4px);
}

.btn-primary {
  background: var(--color-text);
  color: #FFFFFF;
}

.btn-primary .btn-arrow {
  background: #FFFFFF;
  color: var(--color-text);
}

.btn-primary:hover {
  opacity: 0.85;
}

.btn-secondary {
  background: #FFFFFF;
  color: var(--color-text);
  border: 2px solid var(--color-text);
}

.btn-secondary .btn-arrow {
  border: 2px solid var(--color-text);
  color: var(--color-text);
}

/* --- 右側ビジュアル --- */

/* 画面の右端に固定し、上下いっぱいに表示（元デザインのはみ出す構図を再現） */
.hero-visual {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60.5%; /* 元画像の中でイラストが占める幅と同じ比率 */
  z-index: 1;
}

.visual-img {
  width: 100%;
  height: 100%;
  /* 縦横比を保ったまま全体を表示（切り抜かない） */
  object-fit: contain;
  object-position: right center;
}

/* --- スクロール表示 --- */

.hero-scroll {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%); /* ユーザー要望：画面中央に配置 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.hero-scroll-line {
  display: block;
  width: 2px;
  height: 36px;
  background: var(--color-pink);
  animation: scroll-line 1.8s ease-in-out infinite;
  transform-origin: top;
}

.hero-scroll-label {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

@keyframes scroll-line {
  0%   { transform: scaleY(0); }
  50%  { transform: scaleY(1); }
  100% { transform: scaleY(0); }
}

/* ============================================
   私たちについて
   ============================================ */

/* heroと同じ「16:9キャンバス＋cqi単位」方式で構図を固定する */
.about {
  position: relative;
  display: grid;
  grid-template-columns: 52% 48%;
  align-items: center;
  aspect-ratio: 1672 / 941;
  width: min(100%, 177.7vh);
  width: min(100%, 177.7svh);
  margin-inline: auto;
  padding-top: 5.7cqi;
  overflow: hidden;
  container-type: inline-size;
}

.about-text {
  position: relative;
  z-index: 2;
  padding-left: 5.7cqi;
}

.about-heading {
  font-size: 3.4cqi;
  font-weight: 900;
  line-height: 1.65;
  letter-spacing: 0.05em;
}

/* ピンク強調文字（マーカー下線は既存 .marker を併用） */
.accent {
  color: var(--color-pink);
}

/* 見出し下の短いピンクバー */
.about-bar {
  display: block;
  width: 2.6cqi;
  height: 0.3cqi;
  border-radius: 999px;
  background: var(--color-pink);
  margin-top: 2.2cqi;
}

/* --- 購買行動の3ステップ --- */

.about-steps {
  display: flex;
  gap: 4.6cqi;
  list-style: none;
  margin-top: 3.2cqi;
}

.about-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ステップ間の薄いグレー矢印 */
.about-step + .about-step::before {
  content: "";
  position: absolute;
  left: -3.1cqi;
  top: 1.6cqi;
  width: 1.6cqi;
  height: 1.6cqi;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 4l8 8-8 8' fill='none' stroke='%23CFCFCF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.6cqi;
  height: 4.6cqi;
  border-radius: 50%;
  border: 0.16cqi solid #F9C4DD;
  background: #FFFFFF;
  color: var(--color-pink);
}

.step-icon svg {
  width: 2cqi;
  height: 2cqi;
}

.step-title {
  margin-top: 1.2cqi;
  font-size: 1.35cqi;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.step-desc {
  margin-top: 0.5cqi;
  font-size: 0.95cqi;
  font-weight: 500;
  line-height: 1.9;
}

/* --- 結びの一文 --- */

.about-closing {
  margin-top: 3.2cqi;
  font-size: 1.6cqi;
  font-weight: 700;
  line-height: 2.1;
  letter-spacing: 0.04em;
}

/* --- 右側ビジュアル --- */

.about-visual {
  position: absolute;
  top: 5.7cqi;
  right: 0;
  bottom: 0;
  width: 48%;
  z-index: 1;
}

.about-img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 縦横比を保ったまま全体を表示 */
  object-position: center;
}

/* ============================================
   口コミサイクル（私たちについて 続き）
   ============================================ */

/* 同じく16:9キャンバス方式 */
.cycle {
  position: relative;
  display: grid;
  grid-template-columns: 55% 45%;
  align-items: center;
  aspect-ratio: 1672 / 941;
  width: min(100%, 177.7vh);
  width: min(100%, 177.7svh);
  margin-inline: auto;
  padding-top: 5.7cqi;
  overflow: hidden;
  container-type: inline-size;
}

/* --- 左：サイクル図 --- */

.cycle-visual {
  position: relative;
  height: 100%;
}

.cycle-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* --- 右：コピー --- */

.cycle-text {
  position: relative;
  z-index: 2;
  padding-inline: 4cqi;
  text-align: center;
}

.cycle-heading {
  font-size: 3.4cqi;
  font-weight: 900;
  line-height: 1.8;
  letter-spacing: 0.08em;
}

/* 『選ばれ続ける仕組み』の行は少し広めの字間 */
.cycle-heading .marker-wide {
  letter-spacing: 0.12em;
}

/* 手描き風のピンク下線（1本線・行の内側だけに敷く） */
.marker-wide {
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10 C 80 4, 200 12, 297 6' fill='none' stroke='%23F32E8D' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 0.14em;
  padding-bottom: 0.18em;
}

/* ピンクの飾り罫：— ・・・ — */
.cycle-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9cqi;
  margin-top: 2cqi;
  color: var(--color-pink);
}

.cycle-divider::before,
.cycle-divider::after {
  content: "";
  width: 2cqi;
  height: 0.22cqi;
  border-radius: 999px;
  background: currentColor;
}

.cycle-divider i {
  width: 0.4cqi;
  height: 0.4cqi;
  border-radius: 50%;
  background: currentColor;
}

.cycle-lead {
  margin-top: 2.4cqi;
  font-size: 1.15cqi;
  font-weight: 500;
  line-height: 2.2;
}

/* --- 飾り --- */

/* 右上の黄色いドット格子（4x4） */
.cycle-deco-dots {
  position: absolute;
  top: 13cqi;
  right: 3cqi;
  width: 5.2cqi;
  height: 5.2cqi;
  background-image: radial-gradient(circle, var(--color-yellow) 22%, transparent 28%);
  background-size: 25% 25%;
  z-index: 1;
}

/* 右下のグリーンのスパークル（3本線） */
.cycle-deco-spark {
  position: absolute;
  right: 5cqi;
  bottom: 4.5cqi;
  width: 3.6cqi;
  height: 3.6cqi;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%232EC38A' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 20l5-6'/%3E%3Cpath d='M12 17l2-7'/%3E%3Cpath d='M18 16l4-3'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
  z-index: 1;
}

/* ============================================
   サービス内容
   ============================================ */

/* 同じく16:9キャンバス方式。カードは絶対配置で斜めにずらす */
.service {
  position: relative;
  aspect-ratio: 1672 / 941;
  width: min(100%, 177.7vh);
  width: min(100%, 177.7svh);
  margin-inline: auto;
  overflow: hidden;
  container-type: inline-size;
}

/* --- 見出しと説明 --- */

.service-intro {
  position: absolute;
  left: 4.8cqi;
  top: 11cqi;
  z-index: 2;
}

.service-title {
  font-size: 3.2cqi;
  font-weight: 900;
  letter-spacing: 0.06em;
}

/* 黄色の手描き風下線（.markerの黄色版） */
.marker-yellow {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 22' preserveAspectRatio='none'%3E%3Cpath d='M4 15 C 60 7, 120 17, 170 10 S 270 13, 296 9' fill='none' stroke='%23FCC21C' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M10 19 C 80 13, 160 20, 290 14' fill='none' stroke='%23FCC21C' stroke-width='3' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 0.2em;
  padding-bottom: 0.16em;
}

.service-lead {
  margin-top: 2.2cqi;
  font-size: 1.15cqi;
  font-weight: 500;
  line-height: 2.2;
}

/* --- カード共通（3枚を横一列に配置） --- */

.service-card {
  position: absolute;
  top: 22.7cqi;
  width: 27.5cqi;
  min-height: 25cqi;
  display: flex;
  flex-direction: column;
  z-index: 2;
  background: #FFFFFF;
  border: 1px solid #F2F2F2;
  border-radius: 1.5cqi;
  padding: 2.2cqi 2.4cqi 2.4cqi;
  box-shadow: 0 1cqi 2.4cqi rgba(17, 17, 17, 0.05);
}

/* カードごとのテーマ色と位置 */
.card-01 { left: 5.7cqi;  --card-accent: var(--color-yellow); }
.card-02 { left: 36.4cqi; --card-accent: var(--color-pink); }
.card-03 { left: 67.1cqi; --card-accent: var(--color-green); }

/* 番号バッジ（左）とアイコン（中央寄り）の行 */
.service-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 6cqi;
}

.service-card-icon {
  position: relative;
  color: var(--card-accent);
}

.service-card-icon svg {
  display: block;
  width: 4cqi;
  height: 4cqi;
}

/* アイコン右上の小さなバースト線 */
.service-card-icon::after {
  content: "";
  position: absolute;
  top: -1cqi;
  right: -1.4cqi;
  width: 1.7cqi;
  height: 1.7cqi;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 20 L2 9'/%3E%3Cpath d='M12 18 L12 4'/%3E%3Cpath d='M18 20 L22 9'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 20 L2 9'/%3E%3Cpath d='M12 18 L12 4'/%3E%3Cpath d='M18 20 L22 9'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
  transform: rotate(35deg);
}

.card-title {
  margin-top: 1.4cqi;
  font-size: 2.3cqi;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.card-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3.2cqi;
  height: 3.2cqi;
  border-radius: 50%;
  background: var(--card-accent);
  color: #FFFFFF;
  font-family: var(--font-en);
  font-size: 1.2cqi;
  font-weight: 800;
}

.card-sub {
  margin-top: 1cqi;
  font-size: 1.25cqi;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--card-accent);
}

.card-body {
  margin-top: 0.9cqi;
  font-size: 0.95cqi;
  font-weight: 500;
  line-height: 2.1;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8cqi;
  margin-top: auto; /* タグはカード下部に揃える */
  padding-top: 1.6cqi;
  list-style: none;
}

.card-tags li {
  display: inline-flex;
  align-items: center;
  gap: 0.55cqi;
  border: 1px solid #E9E9E9;
  border-radius: 999px;
  padding: 0.6cqi 1.1cqi;
  font-size: 0.85cqi;
  font-weight: 700;
}

/* タグ先頭の色付きドット */
.card-tags li::before {
  content: "";
  width: 0.55cqi;
  height: 0.55cqi;
  border-radius: 50%;
  background: var(--card-accent);
}

/* --- 飾り（矢印・ドット格子・キラキラ） --- */

.deco {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

/* カード間のピンクの点線矢印（⇢） */
.svc-flow-arrow {
  width: 3.2cqi;
  height: 1.6cqi;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24'%3E%3Cg stroke='%23F32E8D' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M3 12h4'/%3E%3Cpath d='M13 12h4'/%3E%3Cpath d='M23 12h4'/%3E%3C/g%3E%3Cpath d='M33 4l12 8-12 8z' fill='%23F32E8D'/%3E%3C/svg%3E") no-repeat center / contain;
}

.svc-flow-arrow-1 { left: 33.6cqi; top: 33.5cqi; }
.svc-flow-arrow-2 { left: 64.3cqi; top: 33.5cqi; }

/* 見出しまわりの飾り */
.svc-burst {
  --deco-color: var(--color-yellow);
  left: 2.8cqi;
  top: 8.8cqi;
  width: 2.6cqi;
  height: 2.6cqi;
  transform: rotate(-20deg);
}

.svc-star {
  --deco-color: var(--color-yellow);
  left: 29.8cqi;
  top: 13.2cqi;
  width: 1.6cqi;
  height: 1.6cqi;
}

/* ドット格子（4x4、色は変数で切り替え。他セクションでも使用） */
.deco-dots {
  background-image: radial-gradient(circle, var(--deco-color) 22%, transparent 28%);
  background-size: 25% 25%;
  width: 5.2cqi;
  height: 5.2cqi;
}

/* 4方向に尖ったキラキラ星（maskで色を差し替え） */
.deco-star {
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 C13 8 16 11 22 12 C16 13 13 16 12 22 C11 16 8 13 2 12 C8 11 11 8 12 2 Z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask: var(--star) no-repeat center / contain;
  mask: var(--star) no-repeat center / contain;
  background: var(--deco-color);
}

/* バースト（3本の放射線、maskで色を差し替え） */
.deco-burst {
  --burst: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 20 L2 9'/%3E%3Cpath d='M12 18 L12 4'/%3E%3Cpath d='M18 20 L22 9'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask: var(--burst) no-repeat center / contain;
  mask: var(--burst) no-repeat center / contain;
  background: var(--deco-color);
}

/* ============================================
   支援実績
   ============================================ */

/* 同じく16:9キャンバス方式。左テキスト＋右ビジュアル */
.works {
  position: relative;
  aspect-ratio: 1672 / 941;
  width: min(100%, 177.7vh);
  width: min(100%, 177.7svh);
  margin-inline: auto;
  overflow: hidden;
  container-type: inline-size;
}

.works-text {
  position: absolute;
  left: 5.1cqi;
  top: 10.5cqi;
  width: 39cqi;
  z-index: 2;
}

.works-title {
  font-size: 4cqi;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.works-lead {
  margin-top: 2.6cqi;
  font-size: 1.15cqi;
  font-weight: 500;
  line-height: 2.2;
}

/* 事例名のグリーン枠タグ */
.works-tag {
  display: inline-block;
  margin-top: 2cqi;
  border: 1px solid var(--color-green);
  border-radius: 0.35cqi;
  padding: 0.45cqi 1.15cqi;
  color: var(--color-green);
  font-size: 1cqi;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* --- BEFORE / AFTER 比較 --- */

.works-compare {
  display: flex;
  align-items: stretch;
  gap: 1.8cqi;
  margin-top: 2.2cqi;
}

.compare-before {
  width: 13.5cqi;
  flex-shrink: 0;
}

/* ラベル（英字＋右へ伸びる罫線） */
.compare-label {
  display: flex;
  align-items: center;
  gap: 0.8cqi;
  font-family: var(--font-en);
  font-size: 1.05cqi;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #8A8A8A;
}

.compare-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #BBBBBB;
}

.compare-text {
  margin-top: 1cqi;
  font-size: 1cqi;
  font-weight: 500;
  line-height: 2.1;
}

/* 間のピンクの山括弧 */
.compare-arrow {
  align-self: center;
  flex-shrink: 0;
  width: 1.7cqi;
  height: 2.6cqi;
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 24'%3E%3Cpath d='M3 2l10 10L3 22' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask: var(--chev) no-repeat center / contain;
  mask: var(--chev) no-repeat center / contain;
  background: var(--color-pink);
}

.compare-after {
  flex: 1;
}

.compare-after .compare-label {
  color: var(--color-pink);
}

.compare-after .compare-label::after {
  background: var(--color-pink);
}

/* 毎月約 2,000 件 */
.after-number {
  display: flex;
  align-items: baseline;
  gap: 0.6cqi;
  margin-top: 0.8cqi;
  color: var(--color-pink);
  font-weight: 700;
}

.after-number span {
  font-size: 1.5cqi;
}

.after-number strong {
  font-family: var(--font-en);
  font-size: 4.2cqi;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.02em;
}

.after-note {
  margin-top: 0.6cqi;
  font-size: 1.15cqi;
  font-weight: 700;
}

.works-closing {
  margin-top: 2.6cqi;
  font-size: 1cqi;
  font-weight: 500;
  line-height: 2.2;
}

/* --- 右側ビジュアル --- */

.works-visual {
  position: absolute;
  left: 44cqi;
  top: 7.5cqi;
  width: 56cqi;
  z-index: 1;
}

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

/* --- 飾り --- */

.works-burst {
  --deco-color: var(--color-yellow);
  left: 4.2cqi;
  top: 6.8cqi;
  width: 2.8cqi;
  height: 2.8cqi;
  transform: rotate(-18deg);
}

.works-dots-pink {
  --deco-color: var(--color-pink);
  left: 1.7cqi;
  top: 48.5cqi;
  width: 5.2cqi;
  height: 5.2cqi;
}

.works-star-green {
  --deco-color: var(--color-green);
  left: 42cqi;
  top: 47.5cqi;
  width: 2.2cqi;
  height: 2.2cqi;
}

/* ============================================
   サポートの流れ
   ============================================ */

/* 同じく16:9キャンバス方式。カード5枚を階段状に絶対配置 */
.flow {
  position: relative;
  aspect-ratio: 1672 / 941;
  width: min(100%, 177.7vh);
  width: min(100%, 177.7svh);
  margin-inline: auto;
  overflow: hidden;
  container-type: inline-size;
}

/* 背後の灰色の曲線 */
.flow-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.flow-intro {
  position: absolute;
  left: 6.6cqi;
  top: 10.5cqi;
  z-index: 2;
}

.flow-heading {
  font-size: 3.4cqi;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.flow-lead {
  margin-top: 2.2cqi;
  font-size: 1.1cqi;
  font-weight: 700;
  line-height: 2.2;
}

/* 緑の手描き風下線（.markerの緑版） */
.marker-green {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 22' preserveAspectRatio='none'%3E%3Cpath d='M4 15 C 60 7, 120 17, 170 10 S 270 13, 296 9' fill='none' stroke='%232EC38A' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M10 19 C 80 13, 160 20, 290 14' fill='none' stroke='%232EC38A' stroke-width='3' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 0.2em;
  padding-bottom: 0.16em;
}

/* --- ステップカード --- */

.flow-steps {
  list-style: none;
}

.flow-card {
  position: absolute;
  z-index: 2;
  background: #FFFFFF;
  border: 1px solid #F0F0F0;
  border-radius: 1.4cqi;
  padding: 1.5cqi 1.4cqi 1.7cqi;
  box-shadow: 0 0.8cqi 2cqi rgba(17, 17, 17, 0.06);
}

/* カードごとのテーマ色と位置（左下から右上へ階段状） */
.flow-01 { left: 6.6cqi;  top: 31.6cqi; width: 12.6cqi; --card-accent: var(--color-pink); }
.flow-02 { left: 24.2cqi; top: 25.7cqi; width: 12.9cqi; --card-accent: var(--color-yellow); }
.flow-03 { left: 42.2cqi; top: 27.4cqi; width: 13.3cqi; --card-accent: var(--color-green); }
.flow-04 { left: 60.4cqi; top: 21.5cqi; width: 12.3cqi; --card-accent: var(--color-pink); }
.flow-05 { left: 78.6cqi; top: 19.9cqi; width: 14.7cqi; --card-accent: var(--color-yellow); }

/* 最後のカードは黄色い枠で強調（デザイン通り） */
.flow-05 {
  border: 2px solid var(--color-yellow);
}

.flow-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flow-card .card-num {
  width: 2.4cqi;
  height: 2.4cqi;
  font-size: 0.95cqi;
}

.flow-icon {
  color: var(--card-accent);
}

.flow-icon svg {
  width: 2.2cqi;
  height: 2.2cqi;
  display: block;
}

.flow-title {
  margin-top: 1cqi;
  font-size: 1.5cqi;
  font-weight: 900;
  letter-spacing: 0.08em;
}

/* タイトル下線はテキスト幅だけに敷く */
.flow-title span {
  background-size: 100% 0.3em;
  padding-bottom: 0.25em;
}

.flow-desc {
  margin-top: 0.9cqi;
  font-size: 0.9cqi;
  font-weight: 500;
  line-height: 2;
}

/* --- カード間の色付き矢印（maskで色替え） --- */

.flow-arrow {
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 28 C 12 27, 22 20, 27 9'/%3E%3Cpath d='M18 10 L27 6 L29 16'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask: var(--arrow) no-repeat center / contain;
  mask: var(--arrow) no-repeat center / contain;
  background: var(--deco-color);
  width: 3.8cqi;
  height: 3.8cqi;
  z-index: 1;
}

.flow-arrow-1 { --deco-color: var(--color-pink);   left: 19.8cqi; top: 39cqi; }
.flow-arrow-2 { --deco-color: var(--color-yellow); left: 37.7cqi; top: 37.5cqi; }
.flow-arrow-3 { --deco-color: var(--color-green);  left: 55.9cqi; top: 33.8cqi; }
.flow-arrow-4 { --deco-color: var(--color-pink);   left: 73.5cqi; top: 34.8cqi; }

/* --- 結びの一文 --- */

.flow-closing {
  position: absolute;
  left: 0;
  right: 0;
  top: 47cqi;
  z-index: 2;
  text-align: center;
  font-size: 1.35cqi;
  font-weight: 900;
  line-height: 2.1;
  letter-spacing: 0.06em;
}

.flow-closing .marker-green {
  background-size: 100% 0.24em;
  padding-bottom: 0.18em;
}

/* --- 飾り --- */

.flow-burst-1 { --deco-color: var(--color-yellow); left: 4.4cqi;  top: 8.6cqi;  width: 2.6cqi; height: 2.6cqi; transform: rotate(-20deg); }
.flow-burst-2 { --deco-color: var(--color-yellow); left: 92.4cqi; top: 17.4cqi; width: 2.6cqi; height: 2.6cqi; transform: rotate(25deg); }

.flow-dots-1 { --deco-color: var(--color-pink); left: 51.4cqi; top: 11cqi;   width: 4.4cqi; height: 4.4cqi; }
.flow-dots-2 { --deco-color: var(--color-pink); left: 3.8cqi;  top: 48.6cqi; width: 4.4cqi; height: 4.4cqi; }
.flow-dots-3 { --deco-color: var(--color-pink); left: 74.4cqi; top: 46.2cqi; width: 4.4cqi; height: 4.4cqi; }

.flow-star-yellow { --deco-color: var(--color-yellow); left: 64.2cqi; top: 13cqi;   width: 2.2cqi; height: 2.2cqi; }
.flow-star-green  { --deco-color: var(--color-green);  left: 69cqi;   top: 15cqi;   width: 1.5cqi; height: 1.5cqi; }
.flow-star-pink   { --deco-color: var(--color-pink);   left: 3.6cqi;  top: 31.4cqi; width: 2cqi;   height: 2cqi; }

/* ============================================
   ニュース
   ============================================ */

/* 同じく16:9キャンバス方式。左に見出し、右に記事一覧 */
.news {
  position: relative;
  aspect-ratio: 1672 / 941;
  width: min(100%, 177.7vh);
  width: min(100%, 177.7svh);
  margin-inline: auto;
  overflow: hidden;
  container-type: inline-size;
}

.news-intro {
  position: absolute;
  left: 6.5cqi;
  top: 16cqi;
  z-index: 2;
}

.news-heading {
  font-family: var(--font-en);
  font-size: 5.6cqi;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
}

/* 見出し下の太いピンク線（右端に点） */
.news-underline {
  display: block;
  margin-top: 1.6cqi;
  width: 17cqi;
  height: 0.8cqi;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M4 9 C 90 3, 190 8, 268 5' fill='none' stroke='%23F32E8D' stroke-width='6' stroke-linecap='round'/%3E%3Ccircle cx='292' cy='6' r='5' fill='%23F32E8D'/%3E%3C/svg%3E") no-repeat center / contain;
}

.news-lead {
  margin-top: 2.6cqi;
  font-size: 1.15cqi;
  font-weight: 500;
  line-height: 2.4;
}

/* ニュース一覧ボタン（ピンク枠のピル型） */
.news-more {
  display: inline-flex;
  align-items: center;
  gap: 1.4cqi;
  margin-top: 3cqi;
  border: 2px solid var(--color-pink);
  border-radius: 999px;
  padding: 1.1cqi 2.4cqi;
  color: var(--color-pink);
  font-size: 1.05cqi;
  font-weight: 700;
  letter-spacing: 0.1em;
  transition: background 0.2s, color 0.2s;
}

.news-more svg {
  width: 1.4cqi;
  height: 1.4cqi;
}

.news-more:hover {
  background: var(--color-pink);
  color: #FFFFFF;
}

/* --- 記事一覧 --- */

.news-list {
  position: absolute;
  left: 38.5cqi;
  right: 5cqi;
  top: 9.5cqi;
  z-index: 2;
}

.news-item {
  display: grid;
  grid-template-columns: 13.5cqi 1fr 3.8cqi;
  column-gap: 2.8cqi;
  align-items: center;
  padding-block: 1.3cqi;
}

/* 2件目以降の区切り線 */
.news-item + .news-item {
  border-top: 1px solid #DDDDDD;
}

/* 一覧のサムネイルは正方形で統一（横長画像を入れても中央を自動で切り抜く） */
.news-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0.7cqi;
}

.news-meta {
  display: flex;
  align-items: center;
  gap: 1.2cqi;
}

.news-date {
  font-family: var(--font-en);
  font-size: 1.05cqi;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #444444;
  position: relative;
  padding-right: 1.3cqi;
}

/* 日付とカテゴリの間の細い縦線 */
.news-date::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 1.1em;
  background: #C9C9C9;
}

/* カテゴリのピンク枠ピル */
.news-category {
  border: 1px solid var(--color-pink);
  border-radius: 999px;
  padding: 0.25cqi 1cqi;
  color: var(--color-pink);
  font-size: 0.85cqi;
  font-weight: 700;
}

.news-title {
  margin-top: 0.9cqi;
  font-size: 1.55cqi;
  font-weight: 900;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.news-title a {
  transition: color 0.2s;
}

.news-title a:hover {
  color: var(--color-pink);
}

/* 右端の丸矢印ボタン */
.news-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.8cqi;
  height: 3.8cqi;
  border: 2px solid var(--color-pink);
  border-radius: 50%;
  color: var(--color-pink);
  transition: background 0.2s, color 0.2s;
}

.news-arrow svg {
  width: 1.6cqi;
  height: 1.6cqi;
}

.news-arrow:hover {
  background: var(--color-pink);
  color: #FFFFFF;
}

/* --- 飾り --- */

.news-burst {
  --deco-color: var(--color-yellow);
  left: 4.6cqi;
  top: 11.6cqi;
  width: 2.6cqi;
  height: 2.6cqi;
  transform: rotate(-20deg);
}

.news-dots-yellow {
  --deco-color: var(--color-yellow);
  left: 92cqi;
  top: 8cqi;
  width: 4.6cqi;
  height: 4.6cqi;
}

.news-dots-green {
  --deco-color: var(--color-green);
  left: 3.5cqi;
  top: 47cqi;
  width: 4.6cqi;
  height: 4.6cqi;
}

.news-burst-green {
  --deco-color: var(--color-green);
  left: 90.5cqi;
  top: 49cqi;
  width: 3cqi;
  height: 3cqi;
  transform: rotate(155deg);
}

/* ============================================
   ニュース一覧ページ（news.html）
   ============================================ */

/* 下層ページは通常スクロール。固定ヘッダーが内容に重ならないよう白背景を付ける */
.subpage .site-header {
  background: var(--color-bg);
  border-bottom: 1px solid #EEEEEE;
}

.news-page {
  padding: 150px 24px 80px;
}

.news-page-inner {
  max-width: 1000px;
  margin-inline: auto;
}

.page-title {
  font-family: var(--font-en);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
}

/* 見出し下線と説明は一覧ページではpxサイズで固定 */
.news-page-inner .news-underline {
  margin-top: 14px;
  width: 180px;
  height: 10px;
}

.page-sub {
  margin-top: 20px;
  font-size: 15px;
  font-weight: 500;
}

/* --- 記事一覧（トップと同じ構造をpxサイズで表示） --- */

.news-list-page {
  margin-top: 40px;
  border-top: 1px solid #DDDDDD;
}

.news-list-page .news-item {
  grid-template-columns: 180px 1fr 52px;
  column-gap: 32px;
  padding-block: 28px;
  border-bottom: 1px solid #DDDDDD;
}

/* 基本スタイル側の区切り線と二重にならないようにする */
.news-list-page .news-item + .news-item {
  border-top: none;
}

.news-list-page .news-thumb img {
  border-radius: 10px;
}

.news-list-page .news-meta {
  gap: 14px;
}

.news-list-page .news-date {
  font-size: 14px;
  padding-right: 14px;
}

.news-list-page .news-category {
  padding: 3px 14px;
  font-size: 12px;
}

.news-list-page .news-title {
  margin-top: 10px;
  font-size: clamp(17px, 2vw, 22px);
}

.news-list-page .news-arrow {
  width: 52px;
  height: 52px;
}

.news-list-page .news-arrow svg {
  width: 20px;
  height: 20px;
}

/* ============================================
   ニュース記事ページ（news/*.html）
   ============================================ */

.article-page {
  padding: 150px 24px 80px;
}

.article-inner {
  max-width: 760px;
  margin-inline: auto;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* 記事ページでは日付・カテゴリをpxサイズで固定 */
.article-meta .news-date {
  font-size: 14px;
  padding-right: 14px;
}

.article-meta .news-category {
  padding: 3px 14px;
  font-size: 12px;
}

.article-title {
  margin-top: 18px;
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.article-thumb {
  margin-top: 28px;
}

/* 記事内の画像は記事幅いっぱいの横長（16:9）で表示する。
   縦長・正方形の画像を入れても自動で16:9に切り抜かれる */
.article-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
}

.article-body {
  margin-top: 32px;
  font-size: 16px;
  line-height: 2.2;
}

.article-body p + p {
  margin-top: 24px;
}

/* 本文中のリンク（外部URLなど） */
.article-body a {
  color: var(--color-pink);
  text-decoration: underline;
  word-break: break-all; /* 長いURLでもはみ出さない */
}

.article-body a:hover {
  opacity: 0.7;
}

/* 本文の小見出し（ピンクの縦棒付き） */
.article-body h2 {
  margin-top: 44px;
  margin-bottom: 16px;
  padding-left: 14px;
  border-left: 4px solid var(--color-pink);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.6;
}

.article-footer {
  margin-top: 56px;
  text-align: center;
}

.article-footer .news-more {
  margin-top: 0;
  gap: 12px;
  padding: 14px 32px;
  font-size: 14px;
}

.article-footer .news-more svg {
  width: 16px;
  height: 16px;
}

/* ============================================
   会社情報ページ（company.html）
   ============================================ */

/* 1画面に収まるよう余白は控えめにする */
.company-page {
  padding: 130px 24px 56px;
}

.company-inner {
  max-width: 1000px;
  margin-inline: auto;
}

/* 日本語のページタイトル（英字用より少し小さめ・字間広め） */
.page-title-jp {
  font-family: var(--font-jp);
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: 0.12em;
}

/* 会社概要カード（1枚の中に2カラム） */
.company-card {
  max-width: 1000px;
  margin: 32px auto 0;
  background: #FFFFFF;
  border: 1px solid #EEEEEE;
  border-radius: 16px;
  padding: 32px 40px 24px;
  box-shadow: 0 8px 24px rgba(17, 17, 17, 0.05);
}

/* 左：会社概要 ／ 右：事業内容（間に縦の区切り線） */
.company-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 44px;
}

.company-col + .company-col {
  border-left: 1px solid #EEEEEE;
  padding-left: 44px;
}

.company-card h2 {
  padding-bottom: 14px;
  border-bottom: 1px solid #DDDDDD;
  text-align: center;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

/* --- 会社概要の表 --- */

.company-row {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  align-items: center;
  padding: 16px 0;
}

.company-row + .company-row {
  border-top: 1px solid #E8E8E8;
}

.company-icon {
  grid-row: 1 / 3;
  color: var(--color-text);
}

.company-icon svg {
  display: block;
  width: 30px;
  height: 30px;
}

.company-row dt {
  font-size: 15px;
  font-weight: 900;
}

.company-row dd {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.8;
}

/* --- 事業内容のチェックリスト --- */

.business-list {
  list-style: none;
  padding: 14px 0 0;
}

.business-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  font-size: 15px;
  font-weight: 500;
}

/* 先頭のチェックマーク（丸囲み） */
.business-list li::before {
  content: "";
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23999999' stroke-width='1.8'/%3E%3Cpath d='M8 12.5l2.6 2.6L16 9.5' fill='none' stroke='%23999999' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ============================================
   お問い合わせページ（contact.html）
   ============================================ */

.contact-page {
  padding: 120px 24px 56px;
}

.contact-inner {
  max-width: 1040px;
  margin-inline: auto;
}

/* 左：見出し ／ 右：フォームの2カラム */
.contact-layout {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 56px;
  align-items: center;
}

/* 左カラム（見出しと連絡先） */
.contact-intro .page-sub {
  line-height: 1.9;
}

.contact-form {
  margin-top: 0;
}

.form-row {
  margin-bottom: 18px;
}

.form-row label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 700;
}

/* 必須・任意バッジ */
.required,
.optional {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}

.required {
  background: var(--color-pink);
  color: #FFFFFF;
}

.optional {
  background: #EEEEEE;
  color: #777777;
}

/* 入力欄 */
.form-row input,
.form-row textarea {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  color: var(--color-text);
  background: #FAFAFA;
  border: 1px solid #DDDDDD;
  border-radius: 10px;
  padding: 14px 16px;
  transition: border-color 0.2s, background 0.2s;
}

.form-row textarea {
  resize: vertical;
  line-height: 1.8;
}

.form-row input::placeholder,
.form-row textarea::placeholder {
  color: #BBBBBB;
}

.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  background: #FFFFFF;
  border-color: var(--color-pink);
}

/* 送信ボタン */
.form-submit {
  margin-top: 24px;
  text-align: left;
}

.form-submit .btn {
  font-size: 16px;
  padding: 16px 24px 16px 36px;
  border: none;
  cursor: pointer;
}

.form-submit .btn-arrow {
  width: 34px;
  height: 34px;
}

.form-submit .btn-arrow svg {
  width: 16px;
  height: 16px;
}

/* メールでの連絡先（左カラム内） */
.contact-mail {
  margin-top: 28px;
  font-size: 13px;
  color: #666666;
}

.contact-mail a {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--font-en);
  font-size: 18px;
  color: var(--color-pink);
  font-weight: 700;
  text-decoration: underline;
}

.contact-mail a:hover {
  opacity: 0.75;
}

/* ============================================
   送信完了ページ（thanks.html）
   ============================================ */

.thanks-page {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 150px 24px 80px;
}

.thanks-inner {
  max-width: 560px;
  text-align: center;
}

.thanks-icon {
  color: var(--color-green);
}

.thanks-icon svg {
  width: 72px;
  height: 72px;
}

.thanks-title {
  margin-top: 20px;
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 900;
  letter-spacing: 0.06em;
}

.thanks-text {
  margin-top: 20px;
  font-size: 15px;
  line-height: 2;
  color: #555555;
}

.thanks-page .back-home {
  margin-top: 40px;
}

/* トップへ戻るボタン */
.back-home {
  margin-top: 56px;
  text-align: center;
}

/* ============================================
   フッター（全ページ共通）
   ============================================ */

.site-footer {
  background: #111111;
  color: #FFFFFF;
  padding: 48px 40px 20px;
}

.footer-inner {
  max-width: 1080px;
  margin-inline: auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

/* ロゴは白抜きで表示 */
.footer-logo .logo-text,
.footer-logo .logo-sub {
  color: #FFFFFF;
}

.footer-tagline {
  margin-top: 14px;
  font-size: 13px;
  color: #BBBBBB;
}

.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  list-style: none;
}

.footer-nav a {
  display: inline-block;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s;
}

.footer-nav a:hover {
  color: var(--color-pink);
}

.footer-copyright {
  margin-top: 36px;
  text-align: center;
  font-family: var(--font-en);
  font-size: 12px;
  color: #888888;
}

.back-home .news-more {
  margin-top: 0;
  gap: 12px;
  padding: 14px 32px;
  font-size: 14px;
}

.back-home .news-more svg {
  width: 16px;
  height: 16px;
}

/* ============================================
   アニメーション
   ============================================ */

/* 読み込み時：下からふわっと（少し弾ませて華やかに） */
.fade-up {
  opacity: 0;
  transform: translateY(18px);
  animation: fade-up 0.8s cubic-bezier(.34, 1.56, .64, 1) 0.9s forwards;
}

.delay-1 { animation-delay: 1.05s; }
.delay-2 { animation-delay: 1.2s; }
.delay-3 { animation-delay: 1.35s; }
.delay-4 { animation-delay: 1.5s; }

@keyframes fade-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ビジュアル全体のフェードイン */
.hero-visual {
  opacity: 0;
  animation: fade-in 0.8s ease 0s forwards;
}

@keyframes fade-in {
  to { opacity: 1; }
}

/* ヒーロー：ピンクのマーカー下線が左からスッと引かれる */
.hero .marker {
  background-size: 0% 0.18em;
  animation: marker-draw 0.7s ease 1.9s forwards;
}

@keyframes marker-draw {
  to { background-size: 100% 0.18em; }
}

/* ヒーローの装飾：ポップに出現したあと、ゆっくり浮遊し続ける */
.hero-deco { opacity: 0; }

.hero-star-pink {
  --deco-color: var(--color-pink);
  width: 2.6cqi;
  height: 2.6cqi;
  top: 4cqi;
  left: 37cqi;
  animation: deco-pop 0.6s ease 2.3s forwards,
             float-a 4.5s ease-in-out 2.9s infinite;
}

.hero-dots-yellow {
  --deco-color: var(--color-yellow);
  width: 4.6cqi;
  height: 4.6cqi;
  bottom: 6cqi;
  left: 1.5cqi;
  animation: deco-pop 0.6s ease 2.5s forwards,
             float-b 5.5s ease-in-out 3.1s infinite;
}

.hero-burst-green {
  --deco-color: var(--color-green);
  width: 3cqi;
  height: 3cqi;
  top: 9cqi;
  left: 1.2cqi;
  animation: deco-pop 0.6s ease 2.7s forwards,
             float-a 5s ease-in-out 3.3s infinite;
}

@keyframes deco-pop {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes float-a {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-9px) rotate(6deg); }
}

@keyframes float-b {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}

/* スクロールで画面に入ると下からふわっと登場する */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(.2, .7, .2, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* イラスト向け：フェードのみで登場（位置は動かさない） */
.reveal-fade {
  opacity: 0;
  transition: opacity 0.9s ease;
}

.reveal-fade.is-visible {
  opacity: 1;
}

/* 段階登場のディレイ（イラスト→見出し→本文…の順に遅らせる） */
.rd-1 { transition-delay: 0.18s; }
.rd-2 { transition-delay: 0.34s; }
.rd-3 { transition-delay: 0.5s; }

/* カードは1枚ずつ時間差で登場（スタッガー） */
.card-02.reveal, .flow-02.reveal { transition-delay: 0.12s; }
.card-03.reveal, .flow-03.reveal { transition-delay: 0.24s; }
.flow-04.reveal { transition-delay: 0.36s; }
.flow-05.reveal { transition-delay: 0.48s; }

/* 動きを減らす設定のユーザーにはアニメーションを無効化 */
@media (prefers-reduced-motion: reduce) {
  .fade-up,
  .hero-visual,
  .hero-deco,
  .reveal,
  .reveal-fade {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }

  .hero .marker {
    background-size: 100% 0.18em;
    animation: none;
  }

  .hero-scroll-line {
    animation: none;
  }

  .btn:hover .btn-arrow {
    transform: none;
  }
}

/* ============================================
   レスポンシブ
   ============================================ */

/* タブレット */
@media (max-width: 1024px) {
  .nav-list {
    gap: 18px;
  }

  .nav-list a {
    font-size: 13px;
  }

  .hero {
    grid-template-columns: 48% 52%;
  }
}

/* スマートフォン・小型タブレット */
@media (max-width: 900px) {
  .header-inner {
    padding: 16px 20px;
  }

  .logo-text {
    font-size: 24px;
  }

  .logo-img {
    height: 26px;
  }

  .hamburger {
    display: flex;
  }

  /* ナビは全画面のオーバーレイに切り替え */
  .global-nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 40px;
    background: var(--color-bg);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 105;
  }

  .nav-open .global-nav {
    opacity: 1;
    visibility: visible;
  }

  .nav-open {
    overflow: hidden; /* メニュー表示中は背景のスクロールを止める */
  }

  .nav-list {
    flex-direction: column;
    gap: 24px;
    text-align: center;
  }

  .nav-list a {
    font-size: 17px;
    padding: 10px 16px;
  }

  /* ファーストビュー：イラストを薄い背景として全面に敷き、テキストを上に載せる */
  .hero {
    grid-template-columns: 1fr;
    aspect-ratio: auto; /* スマホは比率固定を解除して1画面に収める */
    max-height: none;
    min-height: 100svh;
    padding-top: 92px;
  }

  .hero-text {
    padding: 24px 24px 0;
  }

  .copy-large {
    font-size: clamp(32px, 9vw, 52px); /* 8文字がスマホでも1行に収まるサイズ */
  }

  .copy-small {
    font-size: clamp(18px, 5vw, 24px);
  }

  .hero-lead {
    margin-top: 24px;
    font-size: 15px;
  }

  .lead-line {
    display: inline;
    white-space: normal; /* スマホでは自然に折り返す */
  }

  .hero-buttons {
    gap: 14px; /* cqi指定のままだと極小になるためpxで上書き */
    margin-top: 28px;
  }

  .btn {
    width: 100%;
    max-width: 340px;
    font-size: 15px; /* 同上 */
    justify-content: space-between;
  }

  /* スマホでは背景として全面に敷く（テキストの背面） */
  .hero-visual {
    position: absolute;
    inset: 0;
    width: 100%;
    z-index: 1; /* .hero-text(z-index:2) の背面 */
  }

  .visual-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画面全体を覆うように切り抜く */
    object-position: center;
    opacity: 0.15; /* テキストの可読性を保つため薄く表示 */
  }

  .hero-scroll {
    display: none;
  }

  /* 私たちについて：縦並び（見出し → ステップ → 結び → イラスト） */
  .about {
    grid-template-columns: 1fr;
    aspect-ratio: auto;
    padding-top: 56px;
    padding-bottom: 40px;
  }

  .about-text {
    padding: 0 24px;
  }

  .about-heading {
    font-size: clamp(24px, 6.4vw, 34px);
  }

  .about-bar {
    width: 28px;
    height: 4px;
    margin-top: 18px;
  }

  /* ステップは「アイコン左・文章右」の横組みで縦に積む */
  .about-steps {
    flex-direction: column;
    gap: 24px;
    margin-top: 32px;
  }

  .about-step {
    display: grid;
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
    column-gap: 16px;
    align-items: center;
    text-align: left;
  }

  .about-step + .about-step::before {
    display: none; /* 横向き矢印はスマホでは非表示 */
  }

  .step-icon {
    grid-row: 1 / 3;
    width: 56px;
    height: 56px;
    border-width: 2px;
  }

  .step-icon svg {
    width: 24px;
    height: 24px;
  }

  .step-title {
    margin-top: 0;
    font-size: 16px;
  }

  .step-desc {
    margin-top: 2px;
    font-size: 13px;
  }

  .step-desc br {
    display: none; /* スマホでは自然に折り返す */
  }

  .about-closing {
    margin-top: 32px;
    font-size: 16px;
  }

  .about-visual {
    position: static;
    width: 100%;
    margin-top: 24px;
  }

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

  /* 口コミサイクル：縦並び（コピー → サイクル図） */
  .cycle {
    grid-template-columns: 1fr;
    aspect-ratio: auto;
    padding-top: 56px;
    padding-bottom: 40px;
  }

  .cycle-visual {
    order: 2; /* スマホでは図を後ろに回す */
    height: auto;
    margin-top: 24px;
    padding: 0 16px;
  }

  .cycle-img {
    height: auto;
  }

  .cycle-text {
    padding: 0 24px;
  }

  .cycle-heading {
    font-size: clamp(22px, 6vw, 32px);
  }

  .cycle-divider {
    gap: 10px;
    margin-top: 18px;
  }

  .cycle-divider::before,
  .cycle-divider::after {
    width: 24px;
    height: 3px;
  }

  .cycle-divider i {
    width: 5px;
    height: 5px;
  }

  .cycle-lead {
    margin-top: 20px;
    font-size: 15px;
  }

  /* 飾りはスマホでは非表示 */
  .cycle-deco-dots,
  .cycle-deco-spark {
    display: none;
  }

  /* サービス内容：カードを縦積み */
  .service {
    aspect-ratio: auto;
    padding: 56px 24px 40px;
  }

  .service-intro {
    position: static;
  }

  .service-title {
    font-size: clamp(24px, 6.4vw, 34px);
  }

  .service-lead {
    margin-top: 16px;
    font-size: 15px;
  }

  .service-card {
    position: static;
    width: 100%;
    min-height: 0;
    margin-top: 24px;
    padding: 24px 20px;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(17, 17, 17, 0.06);
  }

  .service-card-head {
    padding-right: 24px;
  }

  .service-card-icon svg {
    width: 34px;
    height: 34px;
  }

  .service-card-icon::after {
    top: -8px;
    right: -12px;
    width: 14px;
    height: 14px;
  }

  .card-title {
    margin-top: 12px;
    font-size: 20px;
  }

  .card-num {
    width: 34px;
    height: 34px;
    font-size: 13px;
  }

  .card-sub {
    margin-top: 10px;
    font-size: 14px;
    letter-spacing: 0.06em;
  }

  .card-body {
    margin-top: 8px;
    font-size: 14px;
  }

  .card-tags {
    gap: 8px;
    margin-top: 14px;
  }

  .card-tags li {
    gap: 6px;
    padding: 6px 12px;
    font-size: 12px;
  }

  .card-tags li::before {
    width: 6px;
    height: 6px;
  }

  /* 矢印などの飾りはスマホでは非表示 */
  .deco {
    display: none;
  }

  /* 支援実績：縦積み（テキスト → ビジュアル） */
  .works {
    aspect-ratio: auto;
    padding: 56px 24px 40px;
  }

  .works-text {
    position: static;
    width: 100%;
  }

  .works-title {
    font-size: clamp(28px, 7vw, 40px);
  }

  .works-lead {
    margin-top: 20px;
    font-size: 15px;
  }

  .works-tag {
    margin-top: 18px;
    border-radius: 4px;
    padding: 6px 14px;
    font-size: 13px;
  }

  /* 比較は縦積みにして矢印を下向きに回す */
  .works-compare {
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
  }

  .compare-before {
    width: 100%;
  }

  .compare-label {
    gap: 10px;
    font-size: 13px;
  }

  .compare-text {
    margin-top: 8px;
    font-size: 14px;
  }

  .compare-arrow {
    width: 18px;
    height: 18px;
    transform: rotate(90deg);
  }

  .after-number {
    gap: 6px;
    margin-top: 8px;
  }

  .after-number span {
    font-size: 16px;
  }

  .after-number strong {
    font-size: 44px;
  }

  .after-note {
    margin-top: 6px;
    font-size: 15px;
  }

  .works-closing {
    margin-top: 24px;
    font-size: 14px;
  }

  .works-visual {
    position: static;
    width: 100%;
    margin-top: 24px;
  }

  /* サポートの流れ：カードを縦積み */
  .flow {
    aspect-ratio: auto;
    padding: 56px 24px 40px;
  }

  .flow-line {
    display: none; /* 背景の曲線はスマホでは非表示 */
  }

  .flow-intro {
    position: static;
  }

  .flow-heading {
    font-size: clamp(24px, 6.4vw, 34px);
  }

  .flow-lead {
    margin-top: 16px;
    font-size: 14px;
  }

  .flow-steps {
    margin-top: 8px;
  }

  .flow-card {
    position: static;
    width: 100%;
    margin-top: 16px;
    padding: 20px;
    border-radius: 16px;
  }

  .flow-05 {
    border-width: 2px;
  }

  .flow-card .card-num {
    width: 34px;
    height: 34px;
    font-size: 13px;
  }

  .flow-icon svg {
    width: 26px;
    height: 26px;
  }

  .flow-title {
    margin-top: 10px;
    font-size: 18px;
  }

  .flow-desc {
    margin-top: 6px;
    font-size: 14px;
  }

  .flow-closing {
    position: static;
    margin-top: 28px;
    font-size: 15px;
  }

  /* 結びはスマホでは自然に折り返す */
  .flow-closing .copy-line {
    display: inline;
    white-space: normal;
  }

  /* ニュース：縦積み */
  .news {
    aspect-ratio: auto;
    padding: 56px 24px 40px;
  }

  .news-intro {
    position: static;
  }

  .news-heading {
    font-size: clamp(40px, 10vw, 56px);
  }

  .news-underline {
    margin-top: 10px;
    width: 150px;
    height: 8px;
  }

  .news-lead {
    margin-top: 16px;
    font-size: 15px;
  }

  .news-more {
    margin-top: 20px;
    gap: 12px;
    padding: 12px 24px;
    font-size: 14px;
  }

  .news-more svg {
    width: 16px;
    height: 16px;
  }

  .news-list {
    position: static;
    margin-top: 24px;
  }

  .news-item {
    grid-template-columns: 96px 1fr 40px;
    column-gap: 14px;
    padding-block: 14px;
  }

  .news-thumb img {
    border-radius: 8px;
  }

  .news-meta {
    gap: 10px;
  }

  .news-date {
    font-size: 12px;
    padding-right: 10px;
  }

  .news-category {
    padding: 2px 10px;
    font-size: 11px;
  }

  .news-title {
    margin-top: 6px;
    font-size: 15px;
    line-height: 1.7;
  }

  .news-arrow {
    width: 36px;
    height: 36px;
  }

  .news-arrow svg {
    width: 15px;
    height: 15px;
  }

  /* ニュース一覧ページ */
  .news-page {
    padding: 96px 20px 56px;
  }

  .news-page-inner .news-underline {
    width: 150px;
    height: 8px;
  }

  .news-list-page {
    margin-top: 28px;
  }

  .news-list-page .news-item {
    grid-template-columns: 96px 1fr 36px;
    column-gap: 14px;
    padding-block: 16px;
  }

  .news-list-page .news-thumb img {
    border-radius: 8px;
  }

  .news-list-page .news-meta {
    gap: 10px;
  }

  .news-list-page .news-date {
    font-size: 12px;
    padding-right: 10px;
  }

  .news-list-page .news-category {
    padding: 2px 10px;
    font-size: 11px;
  }

  .news-list-page .news-title {
    margin-top: 6px;
    font-size: 15px;
  }

  .news-list-page .news-arrow {
    width: 36px;
    height: 36px;
  }

  .news-list-page .news-arrow svg {
    width: 15px;
    height: 15px;
  }

  .back-home {
    margin-top: 40px;
  }

  /* フッター */
  .site-footer {
    padding: 36px 24px 16px;
  }

  .footer-inner {
    flex-direction: column;
    gap: 24px;
  }

  .footer-nav ul {
    flex-direction: column;
    gap: 4px;
  }

  .footer-copyright {
    margin-top: 28px;
  }

  /* 会社情報ページ */
  .company-page {
    padding: 96px 20px 56px;
  }

  .contact-page {
    padding: 96px 20px 56px;
  }

  /* スマホでは縦積みに戻す */
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .contact-form {
    margin-top: 0;
  }

  .company-card {
    margin-top: 28px;
    padding: 24px 20px 16px;
  }

  /* スマホでは縦積みに戻す */
  .company-columns {
    grid-template-columns: 1fr;
    gap: 28px 0;
  }

  .company-col + .company-col {
    border-left: none;
    padding-left: 0;
  }

  .company-card h2 {
    font-size: 18px;
    padding-bottom: 12px;
  }

  /* ニュース記事ページ */
  .article-page {
    padding: 96px 20px 56px;
  }

  .article-title {
    font-size: 20px;
  }

  .article-body {
    margin-top: 24px;
    font-size: 15px;
    line-height: 2;
  }

  .article-body p + p {
    margin-top: 18px;
  }

  .article-body h2 {
    margin-top: 32px;
    margin-bottom: 12px;
    font-size: 17px;
  }

  .article-footer {
    margin-top: 40px;
  }
}