:root {
    --figma-color-color_ffffff: #ffffff;
    --figma-color-color_333333: #333333;
    --figma-color-color_ff8757: #ff8757;
    --figma-color-color_f9f8f8: #f9f8f8;
    --figma-color-color_dfdfdf: #dfdfdf;
    --figma-color-color_213d7e: #213d7e;
    --figma-color-color_666666: #666666;
    --figma-color-color_e16736: #e16736;
    --figma-color-color_d9d9d9: #d9d9d9;
    --figma-color-color_c6c6c6: #c6c6c6;
    --figma-color-color_fef5e1: #fef5e1;
    --figma-color-color_ffdccf: #ffdccf;
    --figma-color-color_ffeae2: #ffeae2;
    --figma-color-color_ffc1a9: #ffc1a9;
    --figma-color-color_ffb699: #ffb699;
    --figma-color-color_ff9d76: #ff9d76;
    --figma-color-color_999999: #999999;
    --figma-color-color_f6f6f6: #f6f6f6;
    --figma-color-color_f8f7f7: #f8f7f7;
    --figma-color-color_ffd2c0: #ffd2c0;
    --figma-color-color_f2f2f2: #f2f2f2;
    --figma-color-color_1c7cbf: #1c7cbf;
    --bg-eng: #f2f2f2;
    --ttl-blue: #213d7e;
    --ttl-gray: #dfdfdf;
}

/* デフォルトでは非表示 */
.br-sp {
  display: none;
}

/* スマホ以下でだけ改行として表示 */
@media (max-width: 480px) {
  .br-sp {
    display: block;
    height: 0;
    margin: 0;
  }
}

/* --- セクション共通 --- */
 .section-container {
 max-width: min(1200px, 86%);
  position: relative;
  z-index: 1;
  padding: 5rem 0;
  margin: auto;
}

/* --- セクションタイトル（h3対応） --- */
.section-title {
  position: relative;
  text-align: center;
  margin-bottom: 48px;
}

/* 日本語タイトル（h3） */
.section-title__ja {
  font-size: clamp(18px, 2.6vw, 36px);
  font-weight: 700;;
  position: relative;
  z-index: 2;
  margin: 0;
  display: inline-block;
  padding-left: 24px; /* ●の位置調整 */
  line-height: 1.6;
}

/* ●の装飾 */
.section-title__ja::before {
  content: "";
  width: 20px;
  height: 20px;
  background: var(--ttl-blue);
  border-radius: 50%;
  position: absolute;
  left: -20px;
  top: 0.55em; /* h3に合うよう微調整 */
}

/* 英語の薄背景テキスト */
.section-title__en {
  margin: 4px 0 0;
  font-size: clamp(48px, 12vw, 96px);
  color: var(--ttl-gray);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

/* タブレット（~1024px） */ 
@media (max-width: 840px) { 
.section-container { max-width: min(1100px, 90%); padding: 4rem 0; }
.section-title { margin-bottom: 40px; }
.section-title__ja { /* フォントは既存のclampを活かし、視認性のみ微調整 */ padding-left: 20px; /* ●の位置調整（やや内側） */ }
.section-title__ja::before { width: 18px; height: 18px; left: -18px; top: 0.55em; /* 微調整 */ }
 .section-title__en { /* タブレットでは上限を抑制 */ font-size: clamp(40px, 10vw, 72px); } }

/* スマホ（~480px） */ 
@media (max-width: 480px) { 
.section-container { max-width: min(100%, 90%); padding: 2rem 0; }
.section-title { margin-bottom: 32px; text-align: center; }
 .section-title__ja { font-size: clamp(16px, 4.8vw, 28px); /* スマホ向けに下限・上限を調整 */ padding-left: 0; line-height: 1.5; }
 .section-title__ja::before { display: none; }
 .section-title__en { font-size: clamp(28px, 12vw, 56px); /* 文字被りを避けるため上限カット */ line-height: 1; } 
}



/* --- CTA ボタン全体 --- */
.cta-button {
    margin: auto;
  display: flex;
  align-items: center;
  width: 398px;
  gap: 50px;
  padding: 9px;
  background: #fff;
  border: 3px solid #ff8a52;
  border-radius: 999px; /* pill style */
  text-decoration: none;
  transition: 0.2s ease;
}

/* テキスト（ボタン本文） */
.cta-text {
  font-size: 22px;
  font-weight: 700;
  color: #213d7e;
  white-space: nowrap;
}

/* 左側の丸いバッジ */
.cta-badge {
  background: #ff8a52;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* --- hover アニメーション --- */
.cta-button:hover {
  background: #fff7f1;
  border-color: #ff7232;
}
/* タブレット（~1024px） */ 
@media (max-width: 840px) { 
.cta-button { width: min(360px, 80%); gap: 32px; padding: 10px;  border-width: 3px; }
.cta-text { font-size: 20px; }
.cta-badge { width: 56px; height: 56px; font-size: 16px; } }

/* スマホ（~480px） */ 
@media (max-width: 480px) { 
 .cta-button { gap: 30px; padding: 10px 12px;  border-width: 2px; /* 比率を調整して主張を抑える */ }
.cta-text { font-size: 18px; white-space: normal; /* 端末幅で折り返しを許容 */ }
.cta-badge { width: 55px; height: 55px; font-size: 14px; } 
}

/* ========================
   ページ　タイトル共通
======================== */
.page-title{ 
  position: relative;
  display: grid;
  place-items: center;      /* 両見出しを中央に */
  text-align: center;
  min-height: clamp(140px, 20vw, 260px); /* 重なり用の高さ */
  gap: 0;   
  margin-top: 3rem;               
}

/* 薄い英字の大見出し（背景的に見える） */
.title-en{
  font-family: Inter, Arial, sans-serif;
  margin: 0;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--bg-eng);
  font-size: 100px;
  line-height: 1;
   position: absolute;
  inset: 0;                 /* セクション全体に広げる */
  display: grid;
  place-items: center;      /* 中央配置 */
  text-transform: uppercase;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  top: -32%;
}

/* 日本語見出し（青） */
.title-ja{
  margin: 0 auto;
  font-weight: 700;
  color: var(--ttl-blue);
  font-size: clamp(24px, 5vw, 48px);
  position: relative;
  z-index: 1;               /* ENの上に表示 */
}
@media (max-width: 840px) { 
  .page-title{ min-height: clamp(120px, 22vw, 220px); margin-top: 2.5rem; } 
  .title-en{ font-size: clamp(72px, 10vw, 88px); top: -20%; } 
  .title-ja{ font-size: clamp(22px, 4.8vw, 40px); } 
}

@media (max-width: 480px) { 
  .page-title{ min-height: clamp(96px, 30vw, 160px); margin-top: 2rem; place-items: start;  } 
  .title-en{ font-size: clamp(36px, 16vw, 43px); top: -8%; place-items: start; } 
  .title-ja{ font-size: clamp(18px, 6vw, 28px); } 
}


/* ========================
   Footer Base
======================== */
.footer-section {
  background: #333333;
  color: #ffffff;
  padding: 50px 0 30px;
  font-size: 14px;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;

  display: grid;
  grid-template-columns: 1.2fr 1fr;
  column-gap: 60px;
  align-items: flex-start;
}

/* ========================
   Left column：ロゴ＋社名＋イラスト
======================== */
.footer-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer-logo {
  width: 160px;
  height: auto;
}

.brand-name {
  font-size: 22px;
  font-weight: 700;
  margin-top: 8px;
}

.footer-illustration img {
  width: 340px;
  height: auto;
}

/* ========================
   Right column：メニュー
======================== */
.footer-right {
  text-align: left;
}

.footer-nav {
  margin-bottom: 20px;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 25px;
  column-gap: 40px;
}

.footer-links a {
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
}

.footer-links a:hover {
  text-decoration: underline;
}

/* CTAボタン */
.footer-cta {
  margin-top: 20px;
}

.primary-cta {
  display: inline-block;
  padding: 10px 28px;
  border-radius: 999px;
  background: #ff8757;
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
}

.primary-cta:hover {
  opacity: 0.9;
}

/* ========================
   Legal Links（下段）
======================== */
.legal-links {
  list-style: none;
  padding: 20px 0 0;
  margin: 0 auto;
  max-width: 60%;
  border-top: 1px solid #555;

  display: flex;
  justify-content: center;
  gap: 80px;
}

.legal-links a {
  color: #ffffff;
  text-decoration: none;
}

.legal-links a:hover {
  text-decoration: underline;
}

/* ========================
   Responsive
======================== */
@media (max-width: 900px) {

  .footer-inner {
    grid-template-columns: 1fr;
    row-gap: 25px;
    text-align: center;
  }

  .footer-left {
    align-items: center;
  }

  .footer-links {
    grid-template-columns: 1fr;
    text-align: end;
    row-gap: 13px;
  }

  .footer-cta {
    text-align: center;
  }

  .legal-links {
    flex-direction: column;
    gap: 10px;
  }
  .primary-cta {
margin: 8px;
}
}