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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  color: #1f2937;
  overflow-x: hidden;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Hero Section */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f9fafb;
  overflow: hidden;
  padding: 3rem 1.5rem;
}

.team-photos {
  position: absolute;
  top: 2rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 1rem;
  opacity: 0.2;
}

.team-photo {
  width: 6rem;
  height: 6rem;
  background-color: #d1d5db;
  border-radius: 50%;
}

.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 1536px;
  margin: 0 auto;
}

.hero-title {
  font-size: 4.5rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.025em;
  margin-bottom: 2rem;
}

.scroll-indicator {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  animation: bounce 2s infinite;
}

.scroll-arrow {
  width: 2rem;
  height: 2rem;
  color: #9ca3af;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-10px);
  }
}

/* Mission Section */
.mission-section {
  padding: 6rem 0;
  background-color: #ffffff;
}

.mission-content {
  max-width: 1536px;
  margin: 0 auto;
}

.section-title {
  font-size: 4rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.025em;
  margin-bottom: 3rem;
}

.mission-text {
  max-width: 48rem;
}

.text-large {
  font-size: 1.25rem;
  color: #374151;
  line-height: 1.75;
  margin-bottom: 1.5rem;
}

.text-medium {
  font-size: 1.125rem;
  color: #4b5563;
  line-height: 1.75;
}

/* DX Section */
.dx-section {
  position: relative;
  padding: 8rem 0;
  background: linear-gradient(135deg, #111827 0%, #1f2937 50%, #111827 100%);
  color: #ffffff;
  overflow: hidden;
}

.globe-visual {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.2;
}

.globe-ring {
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  border: 4px solid rgba(20, 184, 166, 0.3);
  position: relative;
}

.globe-ring-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid rgba(20, 184, 166, 0.2);
  animation: pulse 2s infinite;
}

.globe-line-h {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background-color: rgba(20, 184, 166, 0.3);
}

.globe-line-v {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background-color: rgba(20, 184, 166, 0.3);
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.dx-content {
  position: relative;
  z-index: 10;
  max-width: 64rem;
  margin: 0 auto;
  text-align: center;
}

.dx-title {
  font-size: 3.75rem;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 2rem;
}

.dx-text {
  font-size: 1.25rem;
  color: #d1d5db;
  line-height: 1.75;
}

/* Features Section */
.features-section {
  padding: 6rem 0;
  background-color: #f9fafb;
}

.features-grid {
  max-width: 1536px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.feature-card {
  background-color: #ffffff;
  padding: 2.5rem;
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s;
}

.feature-card:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.feature-icon {
  width: 4rem;
  height: 4rem;
  background-color: #111827;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.feature-icon svg {
  width: 2rem;
  height: 2rem;
  color: #ffffff;
}

.feature-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.feature-text {
  color: #4b5563;
  line-height: 1.75;
}

/* Working Section */
.working-section {
  padding: 8rem 0;
  background-color: #ffffff;
}

.working-content {
  max-width: 1536px;
  margin: 0 auto;
}

.working-title {
  font-size: 3.75rem;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 2rem;
}

.company-name {
  display: inline-block;
}

.letter-l {
  color: #ec4899;
}

.letter-n {
  color: #10b981;
}

.letter-e {
  color: #3b82f6;
}

.highlight-teal {
  color: #14b8a6;
}

.working-text {
  max-width: 48rem;
  margin-bottom: 3rem;
}

.working-text p {
  font-size: 1.25rem;
  color: #374151;
  line-height: 1.75;
}

.office-photo {
  width: 100%;
  height: 24rem;
  background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
  border-radius: 1rem;
}

/* Members Section */
.members-section {
  padding: 6rem 0;
}

.members-section-1 {
  background-color: #f3f4f6;
}

.members-section-2 {
  background-color: #ffffff;
}

.members-content {
  max-width: 1536px;
  margin: 0 auto;
}

.members-title {
  font-size: 3.75rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 4rem;
}

.member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 4rem;
  align-items: center;
  margin-bottom: 2rem;
}

.member-grid-reverse {
  direction: rtl;
}

.member-grid-reverse > * {
  direction: ltr;
}

.member-photo {
  position: relative;
}

.photo-placeholder {
  width: 100%;
  aspect-ratio: 1;
  background-color: #d1d5db;
  border-radius: 1rem;
}

.member-meta {
  margin-bottom: 1.5rem;
}

.member-role {
  font-size: 0.875rem;
  font-weight: 700;
  color: #14b8a6;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.member-name {
  font-size: 1.875rem;
  font-weight: 700;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

.member-bio {
  color: #4b5563;
  line-height: 1.75;
  margin-bottom: 1.5rem;
}

.btn-primary {
  background-color: #14b8a6;
  color: #ffffff;
  padding: 1rem 2rem;
  border-radius: 9999px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-primary:hover {
  background-color: #0d9488;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

.dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background-color: #d1d5db;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

.dot.active {
  background-color: #14b8a6;
}

/* Opportunities Section */
.opportunities-section {
  padding: 8rem 0;
  background-color: #14b8a6;
  color: #ffffff;
}

.opportunities-content {
  max-width: 1536px;
  margin: 0 auto;
}

.opportunities-title {
  font-size: 4.5rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 5rem;
}

.opportunities-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.opportunity-item {
  cursor: pointer;
}

.opportunity-summary {
  list-style: none;
  cursor: pointer;
}

.opportunity-summary::-webkit-details-marker {
  display: none;
}

.opportunity-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.opportunity-info {
  flex: 1;
}

.opportunity-name {
  font-size: 1.875rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.opportunity-desc {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.125rem;
}

.opportunity-toggle {
  margin-left: 2rem;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  border: 4px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s;
}

.opportunity-item[open] .opportunity-toggle {
  transform: rotate(45deg);
}

.opportunity-toggle svg {
  width: 2rem;
  height: 2rem;
}

.opportunity-details {
  margin-top: 2rem;
  padding-left: 0;
}

.job-card {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 2rem;
  border-radius: 1rem;
}

.job-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.job-desc {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.125rem;
  margin-bottom: 1.5rem;
}

.job-tags {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.tag {
  background-color: rgba(255, 255, 255, 0.2);
  padding: 0.5rem 1rem;
  border-radius: 9999px;
}

.opportunity-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* CTA Section */
.cta-section {
  padding: 6rem 0;
  background-color: #f9fafb;
}

.cta-grid {
  max-width: 1536px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.cta-card {
  background-color: #111827;
  color: #ffffff;
  padding: 2.5rem;
  border-radius: 1rem;
  transition: transform 0.3s;
}

.cta-card:hover {
  transform: scale(1.05);
}

.cta-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.cta-text {
  color: #d1d5db;
  margin-bottom: 1.5rem;
}

.cta-link {
  color: #5eead4;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: gap 0.3s;
}

.cta-link:hover {
  gap: 1rem;
}

.cta-link svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Join Section */
.join-section {
  padding: 8rem 0;
  background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
  color: #ffffff;
}

.join-content {
  max-width: 64rem;
  margin: 0 auto;
}

.join-title {
  font-size: 5rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  margin-bottom: 2rem;
}

.join-text {
  font-size: 1.25rem;
  color: #d1d5db;
  text-align: center;
  line-height: 1.75;
  margin-bottom: 4rem;
}

.join-form {
  max-width: 42rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-label {
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.form-input {
  width: 100%;
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 1rem;
  font-family: inherit;
}

.form-input::placeholder {
  color: #9ca3af;
}

.form-input:focus {
  outline: none;
  border-color: #14b8a6;
}

.form-input option {
  background-color: #1f2937;
}

.btn-submit {
  width: 100%;
  background-color: #14b8a6;
  color: #ffffff;
  padding: 1.25rem 2.5rem;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 1.125rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-submit:hover {
  background-color: #0d9488;
}

/* Footer */
.footer {
  padding: 5rem 0;
  background-color: #030712;
  color: #ffffff;
}

.footer-content {
  max-width: 1536px;
  margin: 0 auto;
}

.footer-main {
  text-align: center;
  margin-bottom: 3rem;
}

.footer-title {
  font-size: 3rem;
  font-weight: 900;
  margin-bottom: 1.5rem;
}

.footer-text {
  color: #9ca3af;
  font-size: 1.125rem;
}

.footer-bottom {
  border-top: 1px solid #1f2937;
  padding-top: 2rem;
  text-align: center;
  color: #6b7280;
}

/* Responsive */
@media (max-width: 768px) {
  .hero-title {
    font-size: 3rem;
  }

  .section-title {
    font-size: 2.5rem;
  }

  .dx-title {
    font-size: 2.5rem;
  }

  .working-title {
    font-size: 2rem;
  }

  .members-title {
    font-size: 2.5rem;
  }

  .opportunities-title {
    font-size: 3rem;
  }

  .join-title {
    font-size: 3rem;
  }

  .footer-title {
    font-size: 2rem;
  }

  .member-grid {
    grid-template-columns: 1fr;
  }

  .opportunity-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .opportunity-toggle {
    margin-left: 0;
  }
}

/* ===== Hero 背景（余白なし。少しだけトリミングされます） ===== */
.hero-section{
  position: relative;
  min-height: 100svh;
  overflow: hidden;
}

/* 画像＋黒ベールは擬似要素に分離して、常に全面フィット */
.hero-section::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(0,0,0,.22), rgba(0,0,0,.22)),
    url("public/SAAStop.png");          /* PC用 */
  background-size: cover, cover;        /* ← 余白なし */
  background-position: center, center;  /* 必要なら focal を調整 */
  background-repeat: no-repeat;
  z-index: 0;
}

/* 文字などは前面に */
.hero-content{ position: relative; z-index: 1; }

/* スマホは画像を差し替え（縦長） */
@media (max-width: 640px){
  .hero-section::before{
    background:
      linear-gradient(0deg, rgba(0,0,0,.22), rgba(0,0,0,.22)),
      url("public/SAASSP.png");         /* SP用 */
    background-size: cover, cover;
    background-position: center top, center top; /* 必要なら中央などに変更 */
  }
}



/* 文字が暗い画像で沈む場合の保険（任意） */
.hero-title{
  color: #111; /* 画像が明るいならこのまま */
  /* 画像が暗めなら ↓ を有効化
  color:#fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
  */
}

/* ===== Header ===== */
:root{
  --header-h: 72px;
  --ink:#0f172a;
  --ink-weak:#334155;
  --bg-glass:rgba(255,255,255,.55);
  --brand:#14b8a6;
}

.site-header{
  position: fixed; inset: 0 0 auto 0; height: var(--header-h); z-index: 40;
  color: var(--ink);
  /* ヒーローに重なるガラス風 */
  background: linear-gradient(to bottom, rgba(255,255,255,.85), rgba(255,255,255,.55));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,23,42,.06);
}

.site-header.is-solid{
  /* スクロール後に濃くする（JSで付与、後述） */
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  border-bottom-color: rgba(15,23,42,.12);
}

.site-header__inner{
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
}

/* ロゴ（シンプルな文字ロゴ） */
.site-logo{
  display:inline-flex; align-items:center; justify-content:center;
  width: 44px; height: 44px; border-radius: 8px;
  font-weight: 900; letter-spacing: .02em; text-decoration: none;
  background: #111827; color:#fff;
}

/* ナビ */
.site-nav ul{
  display:flex; justify-content:center; align-items:center; gap:2rem;
  list-style:none;
}
.site-nav a{
  display:inline-block; text-decoration:none; font-weight:800; letter-spacing:.06em;
  color: var(--ink);
  position:relative; padding: .25rem 0;
}
.site-nav a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:3px; width:0;
  background: linear-gradient(90deg, var(--ink) 0 50%, var(--brand) 50% 100%);
  transition: width .25s ease;
}
.site-nav a:hover::after{ width:100%; }

/* 右の丸ボタン */
.circle-cta{
  width:44px; height:44px; border-radius:9999px; border:1.5px solid var(--ink);
  background:#fff; display:grid; place-items:center; cursor:pointer;
  transition: transform .15s ease, background .2s ease;
}
.circle-cta:hover{ transform: translateY(-1px); background:#f8fafc; }

/* SPナビ（ハンバーガー＋ドロワー、JS無し） */
.nav-toggle{ display:none; }
.hamburger{
  display:none; width:44px; height:44px; border-radius:8px; cursor:pointer;
  border:1px solid rgba(15,23,42,.15); background:var(--bg-glass); backdrop-filter:blur(8px);
}
.hamburger span{ display:block; width:22px; height:2px; background:var(--ink); margin:6px auto; border-radius:2px; }
@media (max-width: 980px){
  .site-header__inner{ grid-template-columns: auto auto auto; }
  .site-nav{ 
    position: fixed; inset: var(--header-h) 0 auto 0;
    background: rgba(255,255,255,.98); backdrop-filter: blur(6px);
    transform: translateY(-8px); opacity:0; pointer-events:none; transition: .25s ease;
    border-bottom:1px solid rgba(15,23,42,.08);
  }
  .site-nav ul{ flex-direction:column; align-items:flex-start; gap:1rem; padding:1.25rem; }
  .hamburger{ display:block; }
  .circle-cta{ display:none; }
  .nav-toggle:checked ~ .hamburger{ border-color: var(--ink); }
  .nav-toggle:checked ~ .site-nav{ transform:none; opacity:1; pointer-events:auto; }
}

/* ヒーローがヘッダーの下に隠れないよう余白を足したい場合（任意） */
/* .hero-section{ padding-top: calc(var(--header-h) + 1rem); } */

/* ===== ハンバーガー表示ルールを最後に固定 ===== */

/* デフォルトは消す（PC想定） */
#nav-toggle,
.hamburger {
  display: none !important;
}

/* スマホだけハンバーガーを出す、丸ボタンは隠す */
@media (max-width: 980px) {
  .hamburger { display: block !important; }
  #nav-toggle { display: block !important; } /* チェックボックス自体は実質非表示でもOK */
  .circle-cta { display: none !important; }  /* 紛らわしい丸ボタンはSPで隠す */
}

/* もしPCでも丸ボタンを消したいなら（任意）： */
@media (min-width: 981px) {
  .circle-cta { display: none !important; }
}

/* ===== Entry独立ボタン（PC用） ===== */
.entry-cta{
  display: none; /* SPでは非表示、PCで出す */
  text-decoration: none;
  background: var(--brand, #14b8a6);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: 9999px;
  font-weight: 800;
  letter-spacing: .04em;
  border: 0;
  outline: 0;
  box-shadow: 0 6px 14px rgba(20,184,166,.25);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  line-height: 1;
}

.entry-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(20,184,166,.28);
  background: #10a89a; /* 少し濃く */
}

.entry-cta:focus-visible{
  box-shadow: 0 0 0 3px rgba(20,184,166,.35);
}

/* PCで独立ボタンを表示し、ナビ内の「エントリー」は隠す */
@media (min-width: 981px){
  .entry-cta{ display: inline-flex; align-items: center; }
  .site-nav .nav-entry-only{ display: none !important; }
}

/* SPでは独立ボタンを隠し、ナビ内の「エントリー」を表示 */
@media (max-width: 980px){
  .entry-cta{ display: none !important; }
  .site-nav .nav-entry-only{ display: list-item !important; }
}

.site-header__inner{
  height: 100%;
  display: grid;
  /* 以前: auto 1fr auto → 4列にする */
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 1rem;
}

/* ナビは中央寄せ、エントリーボタンは右端へ */
.site-nav{ justify-self: center; }
.entry-cta{ justify-self: end; }

/* タグラインはPCでは非表示（必要なら表示に） */
.site-tagline{ display:none; }

/* スマホは従来の3列レイアウトに戻す（ドロワー） */
@media (max-width: 980px){
  .site-header__inner{ grid-template-columns: auto auto auto; }
  .site-nav{ justify-self: stretch; } /* どちらでもOK */
}

/* 見出しの前に緑の丸（#82F4C5）を付ける共通クラス */
:root{
  --dot: #82F4C5;            /* 丸の色（必要ならここで一元管理） */
}

/* セクション全体をダーク化する共通クラス */
.section-dark{
  background: #040711 !important;
  color: #fff;              /* テキスト白 */
}

/* ダーク背景でのリンクや弱テキストの見え方を最適化 */
.section-dark a{ color:#82F4C5; }
.section-dark .text-medium,
.section-dark .text-large{ color: rgba(255,255,255,.86); }
.section-dark .feature-text,
.section-dark .member-bio,
.section-dark .opportunity-desc{ color: rgba(255,255,255,.86); }

/* ボタンはそのままでもOKだが、境界が沈む場合は輪郭を少し足す */
.section-dark .btn-primary{
  box-shadow: 0 6px 16px rgba(20,184,166,.25);
}

/* ==== 見出し：左ドット＋全幅の黒帯（最終決定） ==== */
:root{ --dot:#82F4C5; }

/* 見出し本体（要素種類を問わず .section-kicker に適用） */
.section-kicker{
  position: relative !important;
  display: inline-block !important;      /* テキスト幅にフィット */
  isolation: isolate;                    /* ::after の z-index:-1 が隠れないように */
  color: #fff !important;
  padding: .10rem 1rem !important;       /* 上下・右 */
  z-index: 0;
}

/* ドット分の左余白 */
.section-kicker.with-dot{
  padding-left: 2.25rem !important;
}



/* 端から端までの黒帯（背景だけ全面に敷く） */
.section-kicker::after{
  content:"";
  position:absolute;
  top:0; bottom:0;          /* 見出しの高さにフィット */
  left:50%;
  transform: translateX(-50%);
  width:100vw;              /* 画面幅いっぱい */
  background:#040711;
  z-index:-1;               /* テキストの背面 */
}


/* 黒帯＋ドット付きのセクション見出しだけ小さくする */
.section-title.section-kicker{
  /* 好みで数値調整可：最小1.4rem〜最大2.2remで可変 */
  font-size: clamp(1.4rem, 1.2rem + 1vw, 2.2rem) !important;
  line-height: 1.25;
  padding: .6rem .8rem !important;         /* 帯の内側余白も少しだけ小さく */
  display: table !important;      /* 要素自身の幅＝文字幅にして… */
  margin: 0 auto .75rem !important; /* …autoマージンで左右中央寄せ */
  text-align: center;             /* 念のため文字揃えも中央 */
}

.section-title.section-kicker.with-dot{
  padding-left: 2rem !important;           /* ドット分の余白も少しだけ縮める */
}

/* 文字が小さくなるぶん、ドットも少し小さく＆位置微調整 */
/* .section-title.section-kicker.with-dot::before{
  width: .5rem;
  height: .5rem;
  left: .6rem;
} */

/* 任意：もっと小さくしたい場合はここを使って固定値に
.section-title.section-kicker{ font-size: 1.8rem !important; }
*/

:root{ --dot:#82F4C5; }  /* ← :root は1回でOK。他の重複は消す */

.section-kicker{
  position: relative !important;
  display: table !important;   /* 文字幅にして中央寄せしやすく */
  isolation: isolate;
  color: #fff !important;
  padding: .10rem 1rem !important;
  margin: 0 auto;              /* 中央寄せ */
  z-index: 0;
}

/* ドット分の左余白 */
.section-kicker.with-dot{ padding-left: 2.25rem !important; }

/* 緑ドット（文字の中央に） */
.section-kicker.with-dot::before{
  content:"";
  position:absolute;
  left:1rem;
  top:55%;
  transform: translateY(-50%);
  width:.6rem; height:.6rem;
  border-radius:9999px;
  background: var(--dot);
  box-shadow:0 0 0 3px rgba(130,244,197,.18);
  z-index:1;
}

/* 端から端までの黒帯 */
.section-kicker::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:50%;
  transform: translateX(-50%);
  width:100vw;
  background:#040711;
  z-index:-1;
}

/* 見出しだけ小さく＆中央 */
.section-title.section-kicker{
  font-size: clamp(1.4rem, 1.2rem + 1vw, 2.2rem) !important;
  line-height: 1.25;
  padding: .6rem .8rem !important;
  margin: 0 auto .75rem !important;
  text-align: center;
}
.section-title.section-kicker.with-dot{ padding-left: 2rem !important; }

.office-photo{
  width: 100%;
  aspect-ratio: 16 / 9;           /* 好みで 4/3 などに変更可 */
  border: 6px solid #FACC15;      /* 黄色の枠：#FACC15（amber） */
  border-radius: 1rem;
  overflow: hidden;               /* 角丸に画像をフィット */
  background: #fff;               /* 読み込み前の下地 */
}

.office-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;              /* 枠いっぱいにトリミング */
  display: block;
}

.office-photo{
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 6px solid #FACC15;      /* 黄色の枠 */
  border-radius: 1rem;
  background: url("public/desk-5020800.jpg") center / cover no-repeat;
}

/* セクションを背景画像化 */
.working-section{
  position: relative;
  min-height: 70vh; /* 好みで調整 */
  padding: 8rem 0;
  background: url("public/desk-5020800.jpg") center / cover no-repeat;
  color: #fff; /* デフォの文字色を白に */
  overflow: hidden;
}

/* 文字可読性のための薄い黒ベール */
.working-section::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(0,0,0,.35), rgba(0,0,0,.35));
  z-index:0;
}

/* 背景の上にテキストを出す */
.working-section .container,
.working-section .working-content{
  position: relative;
  z-index: 1;
}

/* 見出し＆本文の色最適化 */
.working-title{ color:#fff; }
.working-text p{ color: rgba(255,255,255,.92); }

/* 旧 office-photo を使わない場合の保険（残っていても消す） */
.office-photo{ display:none; }

/* 見出しの下余白をゼロにして、直下の背景とくっつける */
.section-title.section-kicker{
  margin: 0 auto 0 !important;   /* ← ここを .75rem から 0 に */
}

/* 応募前にお役立てください の見出し：上だけ外側余白を足す */
#preapply.section-kicker{
  margin-top: 5rem !important;  /* ← ここが効けば上に白い隙間ができます */
}

/* 背景＋オーバーレイ（あなたの既存） */
.working-section{
  position: relative;
  background: url("public/desk-5020800.jpg") center / cover no-repeat;
  color:#fff;
  overflow: hidden;
}

/* 黒ベール（既存） */
.working-section::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(0,0,0,.35), rgba(0,0,0,.35));
  z-index:0;
}

/* ★黄色い枠（新規） */
.working-section::after{
  content:"";
  position:absolute; inset:0;
  box-shadow: inset 0 0 0 8px #FACC15;  /* 太さ8px・色＝Yellow 500 相当 */
  pointer-events:none;
  z-index:1;                            /* ベールより上、テキストより下 */
}

/* テキストは前面へ */
.working-section .container,
.working-section .working-content{ position:relative; z-index:2; }

/* スムーズスクロール */
html { scroll-behavior: smooth; }

/* 固定ヘッダー分のオフセット（飛び先が隠れないように） */
html { scroll-padding-top: var(--header-h, 72px); }

/* Safariなど向け：ターゲット側に余白を持たせる保険 */
.section-anchor { scroll-margin-top: var(--header-h, 72px); }

/* メンバー写真の表示を画像に対応させる */
.member-photo { position: relative; }
.member-photo img{
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;   /* 正方形でトリミング */
  object-fit: cover;     /* はみ出しはセンターで切る */
  border-radius: 1rem;   /* 角丸はこれまで通り */
  display: block;
}

/* 「応募前にお役立てください」直下のカード群だけ、上の余白を小さく */
#preapply + .cta-section{
  padding-top: 2rem;   /* ← 6rem → 2rem に圧縮（好みで 1.5〜3rem など調整） */
}

/* 見出しの下余白も少しだけ足す／詰める（必要なら） */
#preapply.section-kicker{
  margin-bottom: .25rem !important;  /* 0 だと詰まりすぎる時の微調整用 */
}

/* 背景写真を緑の下に敷く（募集要項セクションの例） */
.opportunities-section{
  /* 緑のベール → 写真 の順で重ねる */
  background:
    linear-gradient(0deg, rgba(20,184,166,.92), rgba(20,184,166,.92)), /* 緑の薄膜 */
    url("public/conny-schneider-xuTJZ7uD7PI-unsplash\ \(1\).jpg") center / cover no-repeat;              /* 画像 */
  color:#fff; /* テキスト白のまま */
}

/* 任意のセクションに写真背景を敷くユーティリティ */
.has-bg-network{
  position: relative;
  z-index: 0;
  overflow: hidden; /* 角丸などがある時にハミ出し防止 */
}

/* 写真そのもの */
.has-bg-network::before{
  content:"";
  position:absolute; inset:0;
  background: url("public/conny-schneider-pREq0ns_p_E-unsplash\ \(21\).jpg")
              center / cover no-repeat;
  z-index:-2;
  transform: translateZ(0);      /* レイヤー分離でチラつき防止（任意） */
}

/* 読みやすさのための薄いベール（濃さはお好みで調整） */
.has-bg-network::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,.28);   /* ほんのり暗く */
  z-index:-1;
}

/* 文字色が暗い背景で沈むなら保険 */
.has-bg-network,
.has-bg-network *:where(.feature-text, .feature-title, h2, p){
  color:#fff;
}

/* 背景画像つきセクション内でも、カードの中はダーク文字に戻す */
.has-bg-network .feature-card {
  color: #1f2937 !important;         /* 本文の既定色 */
}
.has-bg-network .feature-card .feature-title{
  color: #111827 !important;          /* 見出しを少し濃く */
}
.has-bg-network .feature-card .feature-text{
  color: #4b5563 !important;          /* サブテキスト */
}
/* 既存のアイコン配色は維持 */
.has-bg-network .feature-card .feature-icon { background:#111827; }
.has-bg-network .feature-card .feature-icon svg { color:#fff; }

/* 「メンバーを知る」見出しの上にだけ余白を足す */
#members.section-title.section-kicker{
  margin: 1.25rem auto 0 !important;  /* 上=1.25rem, 左右=auto, 下=0 */
}

/* Features のカード内を中央揃え */
.feature-card{
  display: flex;                  /* 中央寄せしやすいレイアウトに */
  flex-direction: column;
  align-items: center;            /* 横方向を中央 */
  text-align: center;             /* テキスト中央 */
}

.feature-icon{
  margin: 0 auto 1.5rem;          /* アイコンボックスを中央に */
}

.feature-title,
.feature-text{
  text-align: center;             /* 念のためテキストも中央 */
}

/* セクション上下の余白を詰める */
.members-section{
  padding: 3.5rem 0;            /* 既存: 6rem → 3.5rem */
}

/* 連続するメンバーセクション同士はさらに詰める（上側だけ小さく） */
.members-section + .members-section{
  padding-top: 2.25rem;
}

/* 見出し下の余白を詰める */
.members-title{
  margin-bottom: 1.5rem;        /* 既存: 4rem → 1.5rem */
}

/* 写真とテキストのブロック間のすき間を詰める */
.member-grid{
  gap: 2rem;                    /* 既存: 4rem → 2rem */
  margin-bottom: 1rem;          /* 既存: 2rem → 1rem */
}

/* 写真直下のドットの余白も少し詰める */
.member-photo .carousel-dots{
  margin-top: .75rem;           /* 既存: 2rem → 0.75rem */
}

/* スマホは少しだけゆとりを残す（任意） */
@media (max-width: 768px){
  .members-section{ padding: 3rem 0; }
  .member-grid{ gap: 1.5rem; }
  .members-title{ margin-bottom: 1.25rem; }
}

/* ===== Footer (reference-like) ===== */
.footer{
  position: relative;
  background: #0b1117;            /* 濃いネイビー */
  color: #e5e7eb;
  padding: 4rem 0 0;              /* 下部は .footer-bottom が担う */
  overflow: hidden;
}

/* 上辺に“刷毛ムラ”風の薄い帯（雰囲気付け） */
.footer::before{
  content:"";
  position:absolute; inset: 0 0 auto 0; height: 14px;
  background: linear-gradient(90deg, rgba(130,244,197,.25), rgba(59,130,246,.18), rgba(130,244,197,.25));
  opacity:.35;
}

/* 上段の2カラム（左：ブランド / 右：スローガン） */
.footer-inner{
  display: grid;
  grid-template-columns: 320px 1fr;
  align-items: center;
  gap: 2.5rem;
}

/* 左のブランド塊 */
.brand-badge{
  display:inline-grid; place-items:center;
  width:56px; height:56px; border-radius:12px;
  font-weight: 900; letter-spacing:.04em;
  background:#111827; color:#fff; text-decoration:none;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.brand-meta{ margin-top:.75rem; }
.brand-line{ color:#94a3b8; font-size:.9rem; line-height:1.4; }

/* 右の大見出し塊 */
.footer-slogan{
  position: relative;
  padding: 1.25rem 1.25rem 1.5rem 2.75rem; /* 左に余白＝ドット分 */
  border-radius: 16px;
  background: radial-gradient(1200px 600px at -10% -40%, rgba(20,184,166,.12), transparent 60%);
}

/* 左の緑ドット（参考サイトのアクセント） */
.slogan-dot{
  position:absolute; left: 1rem; top: 1.55rem;
  width:.65rem; height:.65rem; border-radius:9999px;
  background:#82F4C5; box-shadow:0 0 0 6px rgba(130,244,197,.12);
}

.footer-title{
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  font-weight: 900;
  letter-spacing: .02em;
  margin: 0 0 .5rem;
}
.footer-text{
  color:#cbd5e1;
  font-size: 1.05rem;
  line-height: 1.8;
}

/* 下段の薄いバー */
.footer-bottom{
  margin-top: 2.75rem;
  background: #070c12;
  border-top: 1px solid rgba(148,163,184,.16);
  color:#94a3b8;
}
.footer-bottom__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap: 1rem; padding: 1.25rem 0;
}

/* 下段ナビ */
.footer-nav{
  display:flex; gap: 1.25rem; flex-wrap: wrap;
}
.footer-nav a{
  color:#a5b4fc; text-decoration:none; font-weight:700; letter-spacing:.03em;
}
.footer-nav a:hover{ text-decoration: underline; }

/* レスポンシブ */
@media (max-width: 900px){
  .footer-inner{ grid-template-columns: 1fr; }
  .footer-slogan{ padding-left: 2.25rem; }
  .footer-bottom__inner{ flex-direction: column; align-items: flex-start; gap:.5rem; }
}

/* コーポレートリンク（大きめボタン風） */
.corp-link{
  display:inline-flex; align-items:center; gap:.6rem;
  font-weight: 900; letter-spacing:.02em;
  background:#0ea5a4; color:#071018;      /* ティール基調で可視性UP */
  padding:.9rem 1.2rem; border-radius:12px;
  text-decoration:none;
  box-shadow: 0 10px 22px rgba(14,165,164,.25);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.corp-link:hover{ transform: translateY(-1px); background:#10b0ae; box-shadow:0 14px 28px rgba(14,165,164,.33); }
.corp-link__icon{ width:1.25rem; height:1.25rem; }

/* SNS 列 */
.sns-links{
  display:flex; gap:.9rem; align-items:center; flex-wrap:wrap;
  margin-top:1rem; padding:0; list-style:none;
}
.sns-links a{
  display:grid; place-items:center;
  width:44px; height:44px; border-radius:10px;
  background: rgba(148,163,184,.12);
  color:#e5e7eb; text-decoration:none;
  transition: transform .15s ease, background .2s ease, color .2s ease;
}
.sns-links a:hover{ transform: translateY(-2px); background: rgba(130,244,197,.20); color:#82F4C5; }
.sns-ico{ width:22px; height:22px; display:block; }

/* フッター右ブロックの余白微調整（リンク化に合わせて） */
.footer-slogan{ padding-top:1.25rem; padding-bottom:1.25rem; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 1rem 0;                 /* ここは好みで */
  background: #0b1220;             /* ダーク背景なら */
}

.footer-bottom__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;                  /* 画面幅が狭い時は折り返す */
}

.footer-nav{
  display: flex;
  align-items: center;
  gap: 1.25rem;                     /* リンク間の余白 */
  flex-wrap: wrap;
}

.footer-nav a{
  white-space: nowrap;              /* 日本語を1語扱いに。1文字ずつの折返し防止 */
  color: #cbd5e1;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .02em;
}
.footer-nav a:hover{ color:#fff; }

.copyright{
  margin-left: auto;
  color: #94a3b8;
  font-size: .9rem;
}

/* SPで中央寄せ */
@media (max-width: 768px){
  .footer-bottom__inner{
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .copyright{ margin-left: 0; }
}

/* 3カラムで均等配置 */
.footer-inner{
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* ← 均等3分割 */
  align-items: start;
  gap: 2rem;
}

/* 3カラム内の子がはみ出さないよう保険 */
.footer-brand,
.footer-slogan,
.footer-actions { min-width: 0; }

/* 右ブロック名を変えたので見た目はスローガンと同じに */
.footer-actions{ position:relative; padding:1.25rem 1.25rem 1.25rem 2.75rem; border-radius:16px;
  background: radial-gradient(1200px 600px at -10% -40%, rgba(20,184,166,.12), transparent 60%);
}
.footer-actions .slogan-dot{
  position:absolute; left:1rem; top:1.55rem; width:.65rem; height:.65rem; border-radius:9999px;
  background:#82F4C5; box-shadow:0 0 0 6px rgba(130,244,197,.12);
}

/* スマホは縦積み */
@media (max-width: 900px){
  .footer-inner{ grid-template-columns: 1fr; }
}

/* 緑ドットを非表示 */
.slogan-dot{ display: none !important; }

/* ドット用に空けていた左パディングを詰める */
.footer-slogan,
.footer-actions{
  padding: .9rem 1rem !important;   /* 以前: 左2.75rem → 全体をコンパクトに */
}

/* スローガンの文字サイズを小さく */
.footer-slogan .footer-title{
  font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem) !important; /* だいたい ~20–25px */
  line-height: 1.25;
  margin: 0 0 .25rem;
}
.footer-slogan .footer-text{
  font-size: .95rem !important;     /* だいたい 15px 前後 */
  line-height: 1.6;
  color: #cbd5e1;                    /* 視認性を少しだけUP（任意） */
}

/* ===== Hero (画像をトリミングせずに全体表示) ===== */
.hero-section{
  position: relative;
  min-height: 100svh;       /* 画面高いっぱい */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;         /* レターボックス部分の色（任意） */
}

/* 画像レイヤー */
.hero-media{
  position: absolute;
  inset: 0;                 /* 上下左右0 */
  z-index: 0;
}

/* 画像タグでcontain表示（=トリミングしない） */
.hero-media picture, 
.hero-media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ここが肝：トリミング無しで全体を収める */
.hero-media img{
  object-fit: contain;      /* ← 画像の全体を表示 */
  object-position: center;  /* 必要なら center top などに調整 */
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* ヒーロー内のテキストを前面に */
.hero-content{ 
  position: relative; 
  z-index: 2; 
  text-align: center; 
}

/* スマホでもPCでも画像は常に contain のまま。 
   ただしスマホは少し上寄せしたい等あれば下で調整 */
@media (max-width: 640px){
  .hero-media img{
    object-position: center top; /* 好み：上を優先して見せたい場合 */
  }
}

/* ヘッダーとヒーローの重なり解消 */
.hero-section{
  margin-top: var(--header-h);                  /* ヒーローを下げる */
  min-height: calc(100svh - var(--header-h));   /* その分だけ高さを引く */
}

/* 既定＝スマホはヘッダー分だけ下げる（重なり防止） */
.hero-section{
  margin-top: var(--header-h);
  min-height: calc(100svh - var(--header-h));
}

/* PCは余白をなくして本当のフルスクリーンに */
@media (min-width: 981px){
  .hero-section{
    margin-top: 0;        /* 余白を戻す */
    min-height: 100svh;   /* 画面高いっぱい */
  }
}

/* ハンバーガー用の実体（チェックボックス）は常に見せない */
#nav-toggle{
  position: absolute !important;
  left: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* デフォルト非表示 → SPだけ表示 */
.hamburger{ display: none; }
@media (max-width: 980px){
  .hamburger{ display: block; }
}

/* スマホのヘッダーを 3 列（ロゴ / スペーサー / ハンバーガー）にして
   ハンバーガーを右端の列へ固定 */
@media (max-width: 980px){
  .site-header__inner{
    display: grid;
    grid-template-columns: auto 1fr auto;  /* 左:ロゴ / 中:空き / 右:ハンバーガー */
    align-items: center;
  }

  /* ハンバーガーを右端の列に配置して右寄せ */
  .hamburger{
    grid-column: 3;          /* 右端の列 */
    justify-self: end;       /* 右寄せ */
    margin-right: .75rem;    /* 右の余白お好みで */
  }

  /* ロゴは左端の列に固定（念のため） */
  .site-logo{
    grid-column: 1;
    justify-self: start;
  }

  /* ドロワーナビはヘッダー下で横幅いっぱい（既存の挙動を維持） */
  .site-nav{
    grid-column: 1 / -1;
  }
}

/* チェックボックス本体は見せない（残っていたら再掲） */
#nav-toggle{
  position: absolute !important;
  left: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* --- SPでハンバーガーの右に「エントリー」ボタンを表示 --- */
@media (max-width: 980px){
  /* ヘッダーを4列：ロゴ | 余白 | ハンバーガー | エントリー */
  .site-header__inner{
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
  }

  /* ハンバーガーは右から2列目 */
  .hamburger{
    grid-column: 3;
    justify-self: end;
    margin-right: .5rem; /* ハンバーガーとボタンの間の余白 */
  }

  /* PCで隠していたボタンをSPで表示し、コンパクトに */
  .entry-cta{
    grid-column: 4;
    justify-self: end;
    display: inline-flex !important;
    padding: .55rem .9rem;         /* 小さめ */
    font-size: .9rem;
    border-radius: 9999px;
    line-height: 1;
    gap: .35rem;
  }
}

/* === ハンバーガー：中央寄せ & Xアニメ === */

/* ボタン自体（44x44の中で縦横センター） */
.hamburger{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px; height: 44px;
  position: relative;
  border-radius: 8px;
}

/* 線は3本とも重ねて、上下を±8pxに配置 */
.hamburger span{
  position: absolute;
  left: 50%; top: 50%;
  width: 22px; height: 2px;
  background: var(--ink, #0f172a);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform .25s ease, opacity .2s ease;
  /* 既存の margin を打ち消し */
  margin: 0 !important;
  display: block;
}

/* 上・中・下の位置 */
.hamburger span:nth-child(1){ transform: translate(-50%, calc(-50% - 8px)); }
.hamburger span:nth-child(2){ transform: translate(-50%, -50%); }
.hamburger span:nth-child(3){ transform: translate(-50%, calc(-50% + 8px)); }

/* 開いたら（=checked時）「×」に変形＆中央に集合 */
#nav-toggle:checked + .hamburger span:nth-child(1){
  transform: translate(-50%, -50%) rotate(45deg);
}
#nav-toggle:checked + .hamburger span:nth-child(2){
  opacity: 0;
}
#nav-toggle:checked + .hamburger span:nth-child(3){
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ドロワーを開くCSS（すでにある場合はそのままでOK） */
#nav-toggle:checked ~ .site-nav{
  transform: none; opacity: 1; pointer-events: auto;
}

/* ========= ヘッダー（SP）: SFF / エントリー / ハンバーガー を一直線 ========= */
@media (max-width: 980px){
  /* grid 指定を潰して1行の Flex に固定 */
  .site-header__inner{
    display: flex !important;
    align-items: center;
    gap: 8px;
    height: var(--header-h);
    padding: 0 .75rem;
  }

  /* 並び順：SFF(1) → エントリー(2) → ハンバーガー(3:右端) */
  .site-logo{ order:1; flex:0 0 auto; }
  .entry-cta{
    order:2; flex:0 0 auto;
    display:inline-flex !important;
    padding:.55rem .9rem; font-size:.9rem; line-height:1; border-radius:9999px;
    margin-left:.5rem;
  }
  .hamburger{
    order:3; margin-left:auto;                 /* ← 右端に寄せるキモ */
    display:flex !important; align-items:center !important; justify-content:center !important;
    width:44px; height:44px; border-radius:8px;
    border:1px solid rgba(15,23,42,.15);
    background: var(--bg-glass); backdrop-filter: blur(8px);
    position: relative;                         /* 三本線の基準 */
  }

  /* ドロワーメニューは従来どおり */
  .site-nav{
    position:fixed; inset: var(--header-h) 0 auto 0;
    transform: translateY(-8px); opacity:0; pointer-events:none; transition:.25s ease;
    background: rgba(255,255,255,.98); border-bottom:1px solid rgba(15,23,42,.08);
  }
  .site-nav ul{ display:flex; flex-direction:column; gap:1rem; padding:1.25rem; }
}

/* ========= ハンバーガー：常に中央配置 & 開くと × に ========= */
/* 三本線（中央に重ねて、上下±8px） */
.hamburger span{
  position:absolute; left:50%; top:50%;
  width:22px; height:2px; background:var(--ink,#0f172a);
  border-radius:2px; margin:0 !important; display:block;
  transform: translate(-50%, -50%); transition: transform .25s ease, opacity .2s ease;
}
.hamburger span:nth-child(1){ transform: translate(-50%, calc(-50% - 8px)); }
.hamburger span:nth-child(2){ transform: translate(-50%, -50%); }
.hamburger span:nth-child(3){ transform: translate(-50%, calc(-50% + 8px)); }

/* チェック時は × に（兄弟セレクタに統一。!importantで旧ルールを上書き） */
#nav-toggle:checked ~ .hamburger span:nth-child(1){
  transform: translate(-50%,-50%) rotate(45deg) !important;
}
#nav-toggle:checked ~ .hamburger span:nth-child(2){
  opacity:0 !important;
}
#nav-toggle:checked ~ .hamburger span:nth-child(3){
  transform: translate(-50%,-50%) rotate(-45deg) !important;
}

/* 開いたらメニュー表示（既存を強めに上書き） */
#nav-toggle:checked ~ .site-nav{
  transform:none !important; opacity:1 !important; pointer-events:auto !important;
}

/* === SP: エントリー ▶ をハンバーガーの左に寄せる === */
@media (max-width: 980px){
  .site-header__inner{
    display: flex !important;
    align-items: center;
    gap: .5rem;
    height: var(--header-h);
    padding: 0 .75rem;
  }

  /* 並び順：SFF(左) → エントリー → ハンバーガー(右端) */
  .site-logo{ order:1; flex:0 0 auto; }

  /* これがポイント：エントリーに margin-left:auto を付けて右側グループの先頭にする */
  .entry-cta{
    order:2; flex:0 0 auto;
    display:inline-flex !important;
    margin-left:auto;            /* ← 右側へ押し出す */
    padding:.55rem .9rem; font-size:.9rem; line-height:1; border-radius:9999px;
  }

  /* エントリーの直後にハンバーガー。右端へ自然に配置される */
  .hamburger{
    order:3;                     /* ← エントリーの次 */
    margin-left: .5rem;          /* エントリーとの間隔 */
    width:44px; height:44px; border-radius:8px;
    display:flex !important; align-items:center !important; justify-content:center !important;
    position:relative;
    border:1px solid rgba(15,23,42,.15);
    background: var(--bg-glass); backdrop-filter: blur(8px);
  }
}

/* ===== PCではハンバーガーを消す・通常ナビを表示 ===== */
@media (min-width: 981px){
  /* ハンバーガー本体とトグルは非表示 */
  #nav-toggle,
  .hamburger{
    display: none !important;
    visibility: hidden !important;
  }

  /* ドロワー用の見た目を解除して常時表示に */
  .site-nav{
    position: static !important;
    inset: auto !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    background: transparent !important;
    border: 0 !important;
  }
  .site-nav ul{
    flex-direction: row !important;     /* 横並び */
    align-items: center !important;
    gap: 2rem !important;
    padding: 0 !important;
  }

  /* ヘッダーの列幅を整える（ロゴ / ナビ / 右側ボタン） */
  .site-header__inner{
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 1rem !important;
  }
}

/* htmlにも同じ背景を当てる＆横スクロールを封じる */
html, body{
  background:#0c0c0c;  /* あなたのサイトの背景色に合わせて */
  min-height:100%;
  overflow-x: clip;     /* うまくいかなければ hidden に */
}

.hero-section,
.section,
.header,
.footer,
.full-bleed,
.banner{ width:100%; }  /* もし width:100vw; にしていたら必ず置き換え */


img, video, svg{
  max-width:100%;
  height:auto;
  display:block;  /* 画像の下の謎の隙間も消せる */
}

.slider, .carousel, .h-scroll{
  overflow:hidden;
}