/* ==================================================
   Next Evolution 合同会社 採用サイト - 共通スタイル
   ================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Poppins:wght@700;800;900&display=swap');

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #FFFFFF;
  font-family: 'Noto Sans JP', sans-serif;
  color: #1B1B1B;
}
a { color: #2D7DD2; text-decoration: none; }
a:hover { color: #1E3A6E; }
img { max-width: 100%; display: block; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 32px; }

/* ---------- scroll-reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.2,0.7,0.2,1), transform 0.9s cubic-bezier(0.2,0.7,0.2,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@keyframes heroPop { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes menuFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes menuItemUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid #ECEAE4;
}
.site-header .logo img { height: 20px; width: auto; object-fit: contain; }
.entry-btn {
  background: #2D7DD2;
  color: #FFFFFF;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: background 0.2s ease;
}
.entry-btn:hover { background: #1E3A6E; color: #FFFFFF; }

/* ---------- floating hamburger ---------- */
.menu-fab {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 100;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  background: #FFFFFF;
  box-shadow: 0 10px 28px rgba(0,0,0,0.2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s cubic-bezier(0.2,0.8,0.2,1), transform 0.3s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.3s ease;
}
.menu-fab:hover { background: #2D7DD2; transform: scale(1.1); box-shadow: 0 14px 32px rgba(45,125,210,0.4); }
.menu-fab .bar-wrap { position: relative; width: 22px; height: 16px; display: block; }
.menu-fab .bar { position: absolute; left: 0; width: 22px; height: 2px; background: #1B1B1B; border-radius: 2px; transition: all 0.35s cubic-bezier(0.4,0,0.2,1); }
.menu-fab .bar1 { top: 2px; }
.menu-fab .bar2 { top: 12px; }
.menu-fab.open .bar1 { top: 7px; transform: rotate(45deg); }
.menu-fab.open .bar2 { top: 7px; transform: rotate(-45deg); }

/* ---------- fullscreen menu overlay ---------- */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(15,18,26,0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow-y: auto;
  display: none;
  animation: menuFadeIn 0.4s ease both;
}
.menu-overlay.show { display: block; }
.menu-overlay .menu-logo { display: flex; align-items: center; padding: 24px 32px; }
.menu-overlay .menu-logo img { height: 20px; width: auto; object-fit: contain; }
.menu-overlay .menu-links { max-width: 640px; margin: 0 auto; padding: 32px 32px 140px; display: flex; flex-direction: column; }
.menu-overlay .menu-link {
  display: flex;
  align-items: baseline;
  gap: 18px;
  color: #FFFFFF;
  padding: 18px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  animation: menuItemUp 0.6s cubic-bezier(0.2,0.7,0.2,1) both;
}
.menu-overlay .menu-link:last-child { border-bottom: none; }
.menu-overlay .menu-link .en {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 4.8vw, 42px);
  letter-spacing: 0.02em;
  transition: color 0.25s ease;
}
.menu-overlay .menu-link:hover .en { color: #D1D4D8; }
.menu-overlay .menu-link .ja { font-size: 14px; color: #FFFFFF; }
.menu-overlay .menu-sns { max-width: 640px; margin: 0 auto; padding: 0 32px 32px; display: flex; gap: 14px; }
.menu-overlay .menu-sns a {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease;
}
.menu-overlay .menu-sns a:hover { background: rgba(255,255,255,0.25); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  background-size: cover;
  background-position: center;
  color: #FFFFFF;
  text-align: center;
  padding-bottom: 16px;
}
.hero .hero-cta {
  position: relative;
  display: inline-block;
  background: #2D7DD2;
  color: #FFFFFF;
  padding: 16px 44px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  animation: heroPop 1s cubic-bezier(0.2,0.7,0.2,1) 0.3s both;
  transition: background 0.2s ease;
}
.hero .hero-cta:hover { background: #1E3A6E; color: #FFFFFF; }

/* ---------- generic section ---------- */
.section { position: relative; padding: 100px 32px; background: #FFFFFF; overflow: hidden; }
.section-inner { max-width: 1080px; margin: 0 auto; position: relative; z-index: 1; }
.section-inner.narrow { max-width: 840px; }
.section-inner.narrower { max-width: 800px; }

.section-head { position: relative; text-align: center; margin-bottom: 56px; padding-top: 20px; }
.section-head .watermark {
  position: absolute; top: -10px; left: 0; right: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  font-size: clamp(60px, 11vw, 150px);
  letter-spacing: 2px;
  white-space: nowrap;
  z-index: 0;
  line-height: 1;
}
.section-head .kicker { position: relative; z-index: 1; }
.section-head .kicker .ja { font-size: 13px; letter-spacing: 0.2em; color: #1B1B1B; font-weight: 700; margin-bottom: 6px; }
.section-head .kicker .en { font-family: 'Poppins', sans-serif; font-weight: 900; font-size: clamp(24px,3.5vw,34px); color: #1B1B1B; }

.wave-bg {
  position: absolute; bottom: -2px; left: 0; width: 100%; height: 220px; z-index: 0;
}

/* ---------- Business ---------- */
.business-grid { display: grid; grid-template-columns: 340px 1fr; gap: 48px; align-items: center; }
.business-grid .photo { border-radius: 12px; overflow: hidden; aspect-ratio: 4/3; }
.business-grid .photo img { width: 100%; height: 100%; object-fit: cover; }
.business-title { font-weight: 900; font-size: clamp(20px,2.4vw,26px); color: #1B1B1B; margin-bottom: 20px; }
.business-body { font-size: 14px; line-height: 2.1; color: #333333; margin-bottom: 16px; }
.more-link { font-size: 13.5px; color: #2D7DD2; font-weight: 700; }

/* ---------- Merit ---------- */
.merit-blob {
  position: absolute; top: -160px; left: -220px; width: 480px; height: 480px;
  background: radial-gradient(circle at 40% 60%, #C9B6E8, #C9B6E8 55%, transparent 70%);
  border-radius: 45% 55% 50% 50% / 55% 45% 55% 45%;
  opacity: 0.4; z-index: 0;
}
.merit-list { display: flex; flex-direction: column; gap: 64px; }
.merit-row { display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; align-items: center; }
.merit-row.flip { grid-template-columns: 1.3fr 1fr; }
.merit-row .photo { border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; }
.merit-row .photo img { width: 100%; height: 100%; object-fit: cover; }
.merit-tag { font-family: 'Poppins', sans-serif; font-weight: 900; font-size: 15px; color: #2D7DD2; margin-bottom: 8px; }
.merit-title { font-weight: 900; font-size: 20px; color: #1B1B1B; margin-bottom: 14px; }
.merit-body { font-size: 14px; line-height: 1.9; color: #555; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; padding: 90px 44px; background: linear-gradient(160deg,#2D7DD2,#1E3A6E); text-align: center; overflow: hidden; }
.cta-band .watermark { position: absolute; top: 20px; left: 0; right: 0; font-family: 'Poppins', sans-serif; font-weight: 900; font-size: clamp(60px,11vw,150px); color: rgba(255,255,255,0.18); letter-spacing: 2px; z-index: 0; }
.cta-band .kicker { position: relative; z-index: 1; }
.cta-band .kicker .ja { font-size: 13px; letter-spacing: 0.2em; color: #FFFFFF; font-weight: 700; margin-bottom: 6px; }
.cta-band .kicker .en { font-family: 'Poppins', sans-serif; font-weight: 900; font-size: clamp(24px,3.6vw,34px); color: #FFFFFF; margin-bottom: 24px; }
.cta-band .body { max-width: 720px; margin: 0 auto; position: relative; }
.cta-band .body .title { font-weight: 700; font-size: clamp(18px,2.2vw,22px); color: #FFFFFF; margin-bottom: 24px; }
.cta-band .body .desc { font-size: 14.5px; line-height: 2.1; color: #FFFFFF; margin-bottom: 36px; }
.cta-band .body .btn { display: inline-block; background: #FFFFFF; color: #1E3A6E; padding: 16px 48px; border-radius: 999px; font-weight: 700; font-size: 15px; transition: background 0.2s ease; }
.cta-band .body .btn:hover { background: #EDEDED; color: #1E3A6E; }

/* ---------- Value ---------- */
.value-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.value-card { padding: 32px; border-radius: 16px; background: #F7F9FB; }
.value-card .title { font-weight: 700; font-size: 17px; color: #1B1B1B; margin-bottom: 12px; display: inline-block; }
.value-card .body { font-size: 14px; line-height: 1.9; color: #555; margin-top: 10px; }
.value-card.v1 .title { border-bottom: 6px solid rgba(246,224,138,0.8); }
.value-card.v2 .title { border-bottom: 6px solid rgba(45,125,210,0.4); }
.value-card.v3 .title { border-bottom: 6px solid rgba(200,74,58,0.4); }

/* ---------- Interview ---------- */
.interview-photo { float: left; width: 320px; height: auto; margin: 0 32px 16px 0; border-radius: 16px; }
.interview-kicker { font-size: 13px; letter-spacing: 0.1em; color: #2D7DD2; font-weight: 700; margin-bottom: 16px; }
.interview-title { font-weight: 900; font-size: clamp(20px,2.4vw,26px); color: #1B1B1B; margin-bottom: 20px; line-height: 1.6; }
.interview-body { font-size: 14px; line-height: 2.1; color: #333333; }
.interview-sign { font-weight: 700; font-size: 14px; color: #1B1B1B; margin-top: 24px; text-align: right; }
.interview-sign .name { font-size: 20px; }
.interview-more { display: block; margin-top: 20px; font-size: 13.5px; color: #2D7DD2; font-weight: 700; text-align: right; }
.clear { clear: both; }

/* ---------- Jobs ---------- */
.jobs-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 28px; }
.job-card { background: #FFFFFF; border-radius: 16px; padding: 36px 30px; }
.job-card .title { font-weight: 700; font-size: 19px; color: #1B1B1B; margin-bottom: 12px; border-bottom: 6px solid rgba(45,125,210,0.35); display: inline-block; min-height: 60px; line-height: 1.5; }
.job-card .tag { font-size: 13px; color: #2D7DD2; font-weight: 700; margin-bottom: 10px; }
.job-card .catch { font-weight: 700; font-size: 15px; color: #1B1B1B; margin-bottom: 10px; }
.job-card .body { font-size: 14px; line-height: 1.9; color: #555; }
.jobs-more { text-align: center; margin-top: 48px; }
.jobs-more a { display: inline-block; background: #2D7DD2; color: #FFFFFF; padding: 15px 40px; border-radius: 999px; font-weight: 700; font-size: 14.5px; transition: background 0.2s ease; }
.jobs-more a:hover { background: #1E3A6E; color: #FFFFFF; }

/* ---------- FAQ ---------- */
.faq-list { display: flex; flex-direction: column; gap: 16px; }
.faq-item { background: #FFFFFF; border-radius: 14px; padding: 26px 28px; }
.faq-q { display: flex; gap: 14px; font-weight: 700; font-size: 15px; color: #1B1B1B; margin-bottom: 10px; }
.faq-q .mark { color: #2D7DD2; }
.faq-a { display: flex; gap: 14px; font-size: 14px; line-height: 1.9; color: #555; }
.faq-a .mark { color: #F2A33E; font-weight: 700; }

/* ---------- Entry form ---------- */
.form-field { margin-bottom: 28px; }
.form-label-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.form-label-row .label { font-weight: 700; font-size: 14.5px; color: #1B1B1B; }
.tag-required { background: #C8443A; color: #FFFFFF; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; }
.tag-optional { background: #E8E8E8; color: #777; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; }
.form-field input[type="text"], .form-field textarea, .form-field select {
  width: 100%; padding: 14px 16px; border: 1px solid #DCE0E5; border-radius: 8px; font-size: 14px; background: #FFFFFF; font-family: inherit;
}
.dob-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dob-row select { width: auto; color: #2D7DD2; padding: 14px 12px; }
.file-row { display: flex; align-items: center; gap: 14px; }
.file-row .fake-btn { background: #EDEEF0; padding: 10px 20px; border-radius: 8px; font-size: 13.5px; color: #333; }
.file-row .fake-name { font-size: 13.5px; color: #888; }
.policy-box {
  margin-top: 10px; height: 220px; overflow-y: auto;
  border: 1px solid #DCE0E5; border-radius: 8px; padding: 20px 22px; background: #FFFFFF;
  font-size: 13px; line-height: 1.9; color: #444;
}
.policy-box p { margin: 0 0 14px; }
.agree-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; margin-bottom: 28px; }
.agree-row input { width: 20px; height: 20px; }
.submit-btn {
  display: block; text-align: center; background: #A9B4BE; color: #FFFFFF; padding: 18px; border-radius: 8px;
  font-weight: 700; font-size: 16px; margin-top: 8px; border: none; width: 100%; cursor: not-allowed; opacity: 0.7;
  transition: background 0.2s ease, opacity 0.2s ease;
}
.submit-btn.active { background: #2D7DD2; cursor: pointer; opacity: 1; }
.submit-btn.active:hover { background: #1E3A6E; }

/* ---------- About / policy tables ---------- */
.about-table { border-top: 1px solid #ECECEC; margin-top: 40px; }
.about-row { display: grid; grid-template-columns: 160px 1fr; padding: 22px 4px; border-bottom: 1px solid #ECECEC; font-size: 14.5px; }
.about-row:last-child { border-bottom: none; }
.about-row .k { color: #888888; font-weight: 700; }
.about-row .v { color: #1B1B1B; line-height: 1.7; }

/* ---------- footer ---------- */
.site-footer { padding: 64px 32px 32px; background: #1E3A6E; color: #FFFFFF; }
.footer-grid { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: start; }
.footer-logo img { height: 20px; margin-bottom: 28px; filter: invert(1) brightness(1.4); }
.footer-sns { display: flex; gap: 14px; margin-bottom: 28px; }
.footer-sns a { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; }
.footer-sns a:hover { background: rgba(255,255,255,0.25); }
.footer-company { font-weight: 700; font-size: 14px; color: #FFFFFF; margin-bottom: 8px; }
.footer-address { font-size: 12.5px; color: rgba(255,255,255,0.7); line-height: 1.8; }
.footer-nav { display: flex; flex-direction: column; gap: 20px; font-size: 16px; padding-top: 40px; }
.footer-nav a { color: #FFFFFF; transition: color 0.25s ease; }
.footer-nav a:hover { color: #D1D4D8; }
.footer-bottom { max-width: 1080px; margin: 32px auto 0; font-size: 12.5px; color: rgba(255,255,255,0.6); border-top: 1px solid rgba(255,255,255,0.15); padding-top: 24px; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .business-grid { grid-template-columns: 1fr; }
  .merit-row, .merit-row.flip { grid-template-columns: 1fr; }
  .merit-row .photo { order: -1; }
  .value-grid { grid-template-columns: 1fr; }
  .about-row { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 767px) {
  .entry-btn { display: none; }
  .interview-photo { float: none; width: 100%; margin: 0 0 20px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-nav { padding-top: 0; }
  .dob-row select { flex: 1 1 30%; }
}
/* ---------- sub-page title header ---------- */
.page-title { position: relative; padding: 100px 32px 60px; background: #F7F9FB; overflow: hidden; text-align: center; }
.page-title .blob { position: absolute; width: 460px; height: 460px; border-radius: 52% 48% 55% 45% / 45% 55% 45% 55%; opacity: 0.45; z-index: 0; }
.page-title .inner { position: relative; z-index: 1; padding-top: 20px; }
.page-title .watermark { position: absolute; top: -10px; left: 0; right: 0; font-family: 'Poppins', sans-serif; font-weight: 900; font-size: clamp(60px,11vw,150px); letter-spacing: 2px; white-space: nowrap; z-index: 0; line-height: 1; }
.page-title .kicker { position: relative; z-index: 1; }
.page-title .kicker .ja { font-size: 13px; letter-spacing: 0.2em; color: #1B1B1B; font-weight: 700; margin-bottom: 6px; }
.page-title .kicker .en { font-weight: 900; font-size: clamp(22px,3vw,30px); color: #1B1B1B; }

/* ---------- about table ---------- */
.about-table { border-top: 1px solid #ECECEC; }
.about-row { display: grid; grid-template-columns: 160px 1fr; padding: 22px 4px; border-bottom: 1px solid #ECECEC; font-size: 14.5px; }
.about-row:last-child { border-bottom: none; }
.about-row .k { color: #888888; font-weight: 700; }
.about-row .v { color: #1B1B1B; line-height: 1.7; }

/* ---------- business detail blocks ---------- */
.biz-detail { position: relative; padding: 60px 32px; overflow: hidden; }
.biz-detail .blob { position: absolute; width: 420px; height: 420px; border-radius: 50% 50% 45% 55% / 55% 45% 55% 45%; opacity: 0.4; z-index: 0; }
.biz-detail .inner { max-width: 1080px; margin: 0 auto; position: relative; z-index: 1; }
.biz-tag { font-weight: 900; font-size: 15px; color: #2D7DD2; margin-bottom: 8px; }
.biz-title { font-weight: 900; font-size: 22px; color: #1B1B1B; margin-bottom: 6px; }
.biz-type { font-size: 13px; color: #2D7DD2; font-weight: 700; margin-bottom: 20px; }
.biz-catch { font-weight: 700; font-size: 16px; color: #1B1B1B; margin-bottom: 16px; }
.biz-body { font-size: 14px; line-height: 2.1; color: #333333; margin-bottom: 28px; }
.biz-tasks { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 20px; }
.biz-task-card { border-radius: 14px; padding: 24px 26px; }
.biz-task-card .title { font-weight: 700; font-size: 15px; color: #1B1B1B; margin-bottom: 8px; }
.biz-task-card .body { font-size: 13.5px; color: #666; line-height: 1.8; }
/* ---------- interview timeline ---------- */
.tl-line { position:absolute; left:50%; top:0; bottom:0; width:2px; background:rgba(45,125,210,0.25); transform:translateX(-50%); }
.tl-row { display:flex; align-items:center; gap:40px; position:relative; margin-bottom:72px; }
.tl-row:last-child { margin-bottom:0; }
.tl-card { flex:1; max-width:420px; }
.tl-dot { width:16px; height:16px; border-radius:50%; background:#2D7DD2; border:4px solid #FFFFFF; box-shadow:0 0 0 3px rgba(45,125,210,0.3); flex-shrink:0; z-index:1; }

/* PC表示ではスマホ用の文字を隠す */
.sp-text {
  display: none;
}

@media (max-width:767px) {
  .hero {
    min-height: 50vh; 
  }
  .hero .hero-cta {
    font-size: 11px;       /* 文字サイズを少し小さくしてスッキリさせる */
    padding: 14px 7px;    /* ボタンの内側の余白（上下 左右）を少し狭くする */
    width: 90%;            /* 画面幅いっぱいではなく、90%にして左右に少し隙間を作る */
    max-width: 270px;      /* ボタンが横に広がりすぎないように最大幅を制限 */
    line-height: 1.4;      /* 文字が改行された時の行間を綺麗に整える */
  }

/* ▼ スマホのヘッダーにCTAボタンを収める調整 ▼ */
  .site-header {
    padding: 25px 16px !important; /* ヘッダーの左右の余白を狭くして場所を確保 */
  }
  .site-header .logo img {
    width: 110px !important; /* ロゴを少し小さくする */
  }
  .entry-btn {
    display: inline-block !important; /* ボタンを復活させる */
    font-size: 10px !important; /* 文字が長いのでかなり小さくする */
    padding: 8px 10px !important; /* ボタンの内側の余白をスリムに */
    white-space: normal !important; /* 万が一はみ出た場合は改行を許す */
    text-align: center;
    line-height: 1.3;
  }

  .dob-row {
    flex-wrap: nowrap; /* スマホでも改行させない */
    gap: 4px;          /* 年・月・日の間の隙間を少し狭くする */
  }
  .dob-row select {
    flex: 1;           /* 3つの入力枠の幅を均等にする */
    padding: 12px 4px; /* スマホ向けに内側の余白を少しスリムに */
    font-size: 14px;   /* 文字サイズを整える */
  }
  
  .site-header .logo img {
    width: 120px;  /* 👈 スマホで表示したいロゴの横幅（お好みで変更してください） */
    height: auto;  /* 縦幅は自動で綺麗な比率に合わせる */
  }
  
  .menu-overlay .menu-logo img {
    width: 120px;  /* 👈 ハンバーガーメニューを開いた時のロゴの横幅 */
    height: auto;
  } 
  
  .footer-logo img {
    width: 120px;  /* 👈 一番下のフッターにあるロゴの横幅 */
    height: auto;
    margin-bottom: 20px; /* 縦幅が狭いスマホに合わせて、ロゴの下の余白も少しスリムに整えます */
  }

  /* ---------- ハンバーガー内メニュー文字サイズ調整 ---------- */
  .menu-overlay .menu-link .en {
    font-size: 18px;  /* 👈 英語（COMPANYなど）の文字サイズ */
  }
  
  .menu-overlay .menu-link .ja {
    font-size: 15px;  /* 👈 日本語（会社概要など）の文字サイズ */
    margin-top: 4px;  /* 英語と日本語の間のスキマ調整 */
  } 
  
  /* 💡 おまけ：メニュー同士の縦の間隔も調整したい場合はここをいじります */
  .menu-link {
    margin-bottom: 24px; /* メニューとメニューの間の広さ */
  }

  /* ---------- 生い立ち文字配列調整 ---------- */

  /* ① 中央の線を左に寄せる（これはそのまま！） */
  .tl-line {
    left: 20px !important;
  }

  /* ② 左右交互のルールをねじ伏せる */
  .tl-row {
    position: relative !important;
    display: flex !important;
    justify-content: flex-end !important; /* 中身を右側に寄せる */
    align-items: flex-start !important;   /* 👈【重要】箱を「上揃え」にして崩れを防止 */
    width: 100% !important;
    margin-bottom: 40px !important;
  }

 /* ③ テキストカードを右に配置し、HTMLの直接命令を完全粉砕！ */
  .tl-row .tl-card {
    width: 100% !important;
    padding-left: 54px !important; /* 👈【ここが超重要】線とポッチを避けるための左側のスキマを確保！ */
    margin: 0 !important; 
    text-align: left !important; 
    max-width: none !important;
  }

  /* ④ 丸いポッチ（ドット）も左の線上に絶対固定 */
  .tl-row .tl-dot,
  .tl-row .tl-circle {
    position: absolute !important;
    left: 20px !important;
    top: 6px !important; /* 👈【重要】ドットをタイトルの横（上部）にピタッと合わせる */
    transform: translateX(-50%) !important;
  }

/* （さっきまでの①〜④のコード） */

  /* ⑤ 透明なダミーの箱をスマホでは完全に消し去る！ */
  .tl-row .tl-card[style*="hidden"] {
    display: none !important;
  }

/* スマホ表示ではPC用の文字を隠して、スマホ用を表示する */
  .pc-text {
    display: none !important;
  }
  .sp-text {
    display: inline !important;
  }

}