@charset "UTF-8";

/* =========================
  Base / 共通
========================= */

/* 変数（色・幅・トーン） */
:root{
  --base-bg: #FAF9F7;
  --text: #2B2B2B;
  --accent: #F5B6B6;
  --container: 1100px;

  /* UI用円 */
  --circle-bg: rgba(43,43,43,.06);

  /* =========================
    Spacing scale（余白ルール）
  ========================= */
  --space-xxs: 8px;
  --space-xs: 16px;   /* 密接 */
  --space-sm: 24px;   /* 関連 */
  --space-md: 32px;   /* 切り替え */
  --space-lg: 48px;   /* 文脈差 */
  --space-xl: 64px;   /* 安心 */
  --space-xxl: 96px;  /* セクション */
  --space-huge: 120px;/* 余韻 / Entry */

  /* 追加：About overlap */
  --about-gap-pc: 32px;        /* KVとAboutの間の最初の余白 */
  --about-gap-sp: 24px;
  --about-overlap-pc: 250px;
  --about-overlap-sp: 240px;

}

/*
Spacing meaning
16px : 密接（見出し→補足、数字→ラベル）
24px : 関連（装飾→本文）
32px : 切り替え（本文→CTA）
48px : 文脈の区切り
64px : 安心感
96px : セクション間
120px: 余韻（Entryなど特別セクション）
*/

/* =========================
  body / タイポグラフィ
========================= */
body{
  font-family:
    "Inter",
    "Noto Sans JP",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;

  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--base-bg);
  font-weight: 400; 
}

/* =========================
  見出しルール
========================= */

/* h1〜h3 共通 */
h1, h2, h3{
  line-height: 1.3;
  color: var(--text);
  font-weight: 400;     
}

/* h3 = カード / リストの主語 */
h3{
  font-size: 20px;
  letter-spacing: 0.02em;
}

/* h2 はセクション見出しで上書き */

.sub-title{
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* 注釈・補足テキスト（キャプション） */
.note,
.caption,
.small-text{
  font-size: 12px;      
  color: rgba(43,43,43,.6);
  font-weight: 400;    
}

/* =========================
  レイアウト共通
========================= */
.container{
  width: var(--container);
  max-width: calc(100% - 32px);
  margin: 0 auto;
}

/* =========================
  Curve（共通）：上カーブ（塗り）＋線
========================= */
.curve-top{
  position: relative;
  overflow: hidden;
  padding-top: var(--curve-pad-top, 0);

  /* デフォルト */
  --curve-bg: #FAF9F7;                 /* カーブの塗り */
  --curve-rise: 84px;                  /* 上に持ち上げる量 */
  --curve-height: 240px;                /* カーブの高さ */
  --curve-line: #EDEAE7;    /* 線色 */
  --curve-line-w: 1px;                  /* 線太さ */
  --curve-show-line: 1; /* 1=線あり / 0=線なし */
  --curve-pad-top: 40px;
}

/* カーブ塗り */
.curve-top::before{
  content:"";
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  top: calc(-1 * var(--curve-rise));
  width:220%;
  height: var(--curve-height);
  border-radius: 0 0 999px 999px;
  background: var(--curve-bg);
  z-index:0;
  pointer-events:none;
}

/* カーブの線（必要なときだけ見せる） */
.curve-top::after{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  transform: translateX(-50%) translateY(calc(-1 * var(--curve-rise)));
  width:220%;
  height: var(--curve-height);
  border-radius: 0 0 999px 999px;

  background: transparent;
  border: var(--curve-line-w) solid var(--curve-line); 
  opacity: var(--curve-show-line);
  z-index:1;
  pointer-events:none;
}

/* 中身を前へ */
.curve-top > *{
  position: relative;
  z-index: 2;
}

/* 線だけカーブ：Support / People / Positions / Process 共通 */
.support.curve-top,
.people.curve-top,
.positions.curve-top,
.process.curve-top{
  --curve-bg: transparent;   
  --curve-show-line: 1;
  --curve-line: #EDEAE7;
  --curve-line-w: 1px;

  /* ここで “線の位置” を統一 */
  --curve-pad-top: 64px;     /* セクションの中身を線から逃がす */
  --curve-rise: 104px;        /* 線を上に持ち上げる量 */
  --curve-height: 160px;     /* カーブの大きさ */
}


@media (max-width: 640px){
  .support.curve-top,
  .people.curve-top,
  .positions.curve-top,
  .process.curve-top{
    --curve-pad-top: 36px;
    --curve-rise: 96px;
    --curve-height: 140px;
  }
}

/* =========================
  セクション見出し（共通部品）
========================= */
.section-head{
  margin-bottom: var(--space-md);
  text-align: center; 
}

.section-title{
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  font-weight: 500;
  color: var(--text);
}

.section-line{
  display: block;
  width: 1px;
  height: 40px;
  margin: 16px auto;
  background: rgba(43,43,43,0.35);
}

.section-lead{
  margin: 0;
  color: var(--text);
  opacity: 0.8;
  font-size: 16px;
}

/* About専用：リード前の短い縦線 */
.section-line--lead{
  height: 24px;
  margin: var(--space-xs) auto;
  margin-bottom: 24px;
  opacity: 0.6;
}

/* 線が不要なセクション用 */
.section-line--none{
  display: none;
}

/* =========================
  セクション外側余白（共通）
========================= */
.section{
  padding: var(--space-xxl) 0;
}

/* =========================
  UI parts（共通部品）
========================= */
/* もっと見る（共通ボタン）*/
.more-wrap{
  margin-top: var(--space-lg); /* 48〜64相当 */
  text-align: center;
}

.more-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: min(520px, 100%);
  height: 56px;
  padding: 0 24px;
  border-radius: 8px;

  border: 1px solid rgba(43,43,43,.18);
  background: transparent; 

  font-size: 14px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;

  transition: background .2s ease, border-color .2s ease, transform .06s ease;

}

.more-btn:hover{
  background: rgba(43,43,43,.04);
  border-color: rgba(43,43,43,.8);
}


/* SP：幅を広げる */
@media screen and (max-width: 640px){
  .more-btn{
    width: min(320px, 100%);
  }
}

/* =========================
  Utilities
========================= */

/* デフォルト：非表示（全デバイス共通） */
.pc-only{
  display: none;
}

/* PC以上で表示 */
@media screen and (min-width: 641px){
  .pc-only{
    display:  revert;
  }
}


/* =========================
  Header（PC → SP）
========================= */
.header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: transparent;
  border-bottom: 1px solid transparent;
  z-index: 1000;
  transition: background .25s ease, border-color .25s ease;
}

/* スクロール後：白背景＋薄い境界線 */
.header.is-scrolled{
  background: rgba(250,249,247,.96);         
  border-bottom-color: rgba(43,43,43,.08);
  backdrop-filter: blur(10px);              
}

/* 中身 */
.header-inner{
  max-width: none;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0 clamp(16px, 2.2vw, 48px);

  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 左側 */
.header-left{
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

/* ロゴ */
.logo{
  display: inline-block;
  text-decoration: none;
}
.header .logo img{
  height: 24px;
  width: auto;
  display: block;
}

/* 区切り線 */
.header-divider{
  width: 1px;
  height: 28px;
  background: rgba(43,43,43,.25);
  display: inline-block;
}

/* サブテキスト（Recruiting site） */
.header-sub{
  font-size: 14px;
  letter-spacing: 0.08em;
  color: rgba(43,43,43,.7);
  white-space: nowrap;
}

/* 右側 */
.header-right{
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ボタン */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}

.btn-outline{
  border: 1px solid rgba(43,43,43,.4);
  color: var(--text);
  background: #fff;
}

.btn-fill{
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--text);
}

/* ハンバーガー */
.hamburger{
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}

.hamburger span{
  display: block;
  width: 24px;
  height: 2px;
  background: rgba(43,43,43,.8);
  margin: 0 auto;
}

@media (max-width: 640px){

  .header{ height: 64px; }

  .header-inner{
    padding: 0 16px;
    align-items: center;
  }

  .btn{ display: none; }

  .header-left{ gap: 10px; }

  .header .logo img{ height: 20px; }

  .header-sub{
    font-size: 12px;
    letter-spacing: 0.08em;
    color: rgba(43,43,43,.6);
    line-height: 1.1;
    display: flex;
    align-items: center;
  }

  .header-divider{
    height: 20px;
    background: rgba(43,43,43,.2);
  }

  /* ハンバーガー */
  .hamburger{
    width: 36px;
    height: 36px;
    padding: 0;
    gap: 4px;            
  }

  .hamburger span{
    width: 20px;
    height: 2px;
  }

  .hamburger span + span{
    margin-top: 0;         
  }

  .header-right{ gap: 0; }
}

/* =========================
  Hamburger Menu（PC/SP共通）
========================= */

.menu-overlay{
  position: fixed;
  inset: 0;
  background: rgba(43,43,43,.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 1100; 
}
.menu-overlay.is-open{
  opacity: 1;
  pointer-events: auto;
}

/* メニュー本体 */
.sp-menu{
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(360px, 86vw);
  background: rgba(250,249,247,.98);
  border-left: 1px solid rgba(43,43,43,.08);
  backdrop-filter: blur(10px);

  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
  z-index: 1200;

  display: flex;
  flex-direction: column;
  padding: 20px 18px 18px;
}
.sp-menu.is-open{
  transform: translateX(0);
}

/* ヘッダー */
.sp-menu-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(43,43,43,.08);
}
.sp-menu-title{
  margin: 0;
  font-size: 14px;
  letter-spacing: .12em;
  color: rgba(43,43,43,.7);
}
.sp-menu-close{
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: rgba(43,43,43,.6);
}

/* リスト */
.sp-menu-list{
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.sp-menu-link{
  display: block;
  padding: 12px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: rgba(43,43,43,.82);
  transition: background .2s ease;
}
.sp-menu-link:hover{
  background: rgba(43,43,43,.04);
}

/* CTA（SP） */
.sp-menu-cta{
  margin-top: auto;
  padding-top: 16px;
  display: grid;
  gap: 10px;
}
.sp-menu-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: .02em;
}
.sp-menu-btn--ghost{
  border: 1px solid rgba(43,43,43,.22);
  color: rgba(43,43,43,.8);
  background: transparent;
}
.sp-menu-btn--fill{
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--text);
}

/* PCはヘッダーにCTAがあるので、メニュー内CTAは非表示 */
@media (min-width: 641px){
  .sp-menu-cta{ display: none; }
}

/* メニュー表示中は背景スクロール禁止 */
body.is-menu-open{
  overflow: hidden;
}

/* =========================
  KV（PC → SP）
========================= */
.kv{
  padding: 24px 0;
  padding-top: 104px; /* header(80px) + 余白 */
  padding-bottom: var(--about-gap-pc);
  transition: padding-bottom .9s ease;
}

.kv-inner{
  width: 1280px;
  max-width: calc(100% - 32px);
  margin: 0 auto;
}

.kv-hero{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  height: clamp(360px, 45vw, 560px);
}

.kv-hero picture,
.kv-hero img{
  width: 100%;
  height: 100%;
  display: block;
}

.kv-img{
  object-fit: cover;
}

/* キャッチコピー */
.kv-copy{
  position: absolute;
  left: 24px;
  bottom: 24px;
  margin: 0;
  font-size: clamp(32px, 3.4vw, 44px);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: rgba(43,43,43,0.7);
  transition: transform 1.4s cubic-bezier(.2,.8,.2,1),
              opacity   1.4s cubic-bezier(.2,.8,.2,1)
}

.kv.is-covered .kv-copy{
  transform: translateY(-48px);
  opacity: 0;
}

/* KVコピー：行制御（PCは1行） */
.kv-line{
  display: inline;
}

/* スクロール誘導 */
.kv-scroll{
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-size: 12px;
  color: rgba(43,43,43,0.9);
}
.kv-scroll-dot{
  display: block;
  width: 6px;
  height: 6px;
  margin: 6px auto 0;
  border-radius: 999px;
  background: rgba(234,176,176,1);
  transform-origin: center;
}
.kv-scroll-line{
  display: block;
  width: 1px;
  height: 72px;
  margin: 10px auto 0;
  background: rgba(43,43,43,0.8);
}
.kv-scroll-arrow{
  display: block;
  width: 6px;
  height: 6px;
  margin: 6px auto 0;
  border-right: 1px solid rgba(43,43,43,0.8);
  border-bottom: 1px solid rgba(43,43,43,0.8);
  transform: rotate(45deg);
}


/* 初期表示のアニメ（KVに is-ready が付いた時だけ動かす） */
.kv.is-ready .kv-scroll-dot{
  animation: kvDotPulse 1.2s ease-out 0.3s 2; /* 2回だけ */
}

/* 小さい円の伸縮 */
@keyframes kvDotPulse{
  0%   { transform: scale(1);   opacity: .75; }
  35%  { transform: scale(1.9); opacity: 1;   }
  100% { transform: scale(1);   opacity: .75; }
}

.kv-scroll.is-hidden{
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}

/* ...SP... */
@media (max-width: 640px){
  /* padding-bottomが動くのを止める（通常時） */
  .kv{ 
    padding-bottom: 24px !important; 
    transition: none !important;    
  }
  /* Aboutを重ねる時だけは “伸ばす” を許可 */
  .kv.is-covered{
    padding-bottom: 24px !important;
  }
  /* ↑SP：通常時はpadding-bottom固定（跳ね返り防止）。is-covered時だけ重なり量を確保 */

  .kv-copy{
    font-size: 22px;
    left: 16px;
    bottom: 16px;

    max-width: none;   
  }
  .kv-line{
    display: block;
  }
  .kv-scroll{ right: 16px; }
}

/* =========================
  About us（共通）
========================= */
.about{
  background: #EDEAE7;
  padding: 80px 0;
}

.about.curve-top{
  --curve-bg: #EDEAE7;
  --curve-show-line: 0;
  --curve-pad-top: 0;
}

.about-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
  text-align: center;
}

/* 文章（共通） */
.about-lead,
.about-text{
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 2;
  color: var(--text);
}

/* ★文章幅を整える */
.about-text-wrap{
  max-width: 560px;
  margin: 0 auto;
}

/* スライダー共通 */
.about-slider-wrap{
  margin-top: 40px;
}

.about-img{
  border-radius: 12px;
  display: block;
}

/* =========================
  About：ブランケット演出
========================= */
@media (min-width: 641px){
  .about.overlap{
    position: relative;
    z-index: 2;
    transform: translateY(var(--about-gap-pc));
    transition: transform 2.0s cubic-bezier(.2,.8,.2,1);
    will-change: transform;
  }
  .about.overlap.is-in{
    transform: translateY(calc(var(--about-gap-pc) - var(--about-overlap-pc)));
  }
}

/* =========================
  About：PC
========================= */
@media (min-width: 641px){

  .about-slider-wrap{
    overflow: visible;
  }

  .about-slider{
    overflow: hidden;
  }

  .about-slider-track{
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
  }

  .about-slide{
    flex: 0 0 auto;
  }

  .about-img{
    max-width: 300px;
    width: 100%;
    height: auto;
  }
}

/* =========================
  About：SP（ループなし / スワイプのみ / 右端フェード）
========================= */
@media (max-width: 640px){

  .about{
    padding: 64px 0;
    overflow-anchor: none;
  }

  .about-text-wrap{
    max-width: 28em;   /* だいたい 420〜450px */
    margin: 0 auto;
  }

  /* ブランケット：SPは margin-top（transform禁止） */
  .about.overlap{
    transform: none !important;
    margin-top: var(--about-gap-sp);
    transition: margin-top 2.3s cubic-bezier(.2,.8,.2,1);
  }
  .about.overlap.is-in{
    margin-top: calc(var(--about-gap-sp) - var(--about-overlap-sp));
  }

  .about-slider-wrap{
    position: relative;
    overflow: hidden;
    margin-top: 32px; 
  }

  .about-slider{
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;

    padding: 0 16px 10px;
    margin: 0 -16px;

    scroll-padding-left: 16px;
    scroll-padding-right: 16px;
  }

  .about-slider::-webkit-scrollbar{
    display: none;
  }

  .about-slider-track{
    display: flex;
    gap: 14px;
    padding-right: 32px;
  }

  .about-slide{
    flex: 0 0 88%;
    scroll-snap-align: start;
  }

  .about-img{
    width: 100%;
    height: clamp(180px, 52vw, 240px);
    object-fit: cover;
  }

  .about-slider-wrap::after{
    content:"";
    position:absolute;
    top: 0;
    right: 0;
    width: 72px;
    height: 100%;
    pointer-events:none;
    z-index: 3;
    background: linear-gradient(
      to left,
      rgba(237,234,231,1) 0%,
      rgba(237,234,231,0) 100%
    );
  }
}

/* =========================
  What we do（PC → SP）
========================= */
.whatwedo{
  padding: 120px 0;
  padding-top: 64px;
  background: var(--base-bg);
}

.whatwedo .section-head{
  max-width: 760px;
  margin: 0 auto var(--space-lg);
  text-align: center;
}

.whatwedo-list{
  margin-top: 64px;
  display: grid;
  gap: 56px;
}

.whatwedo-item{
  display: grid;
  grid-template-columns: 520px 1fr;
  gap: 56px;
  align-items: center;
}


/* 02だけ反転 */
.whatwedo-item--reverse{
  grid-template-columns: 1fr 520px;
}
.whatwedo-item--reverse .whatwedo-media{ order: 2; }
.whatwedo-item--reverse .whatwedo-body{ order: 1; }

.whatwedo-img{
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

/* 01/02/03 */
.whatwedo-num{
  margin: 0 0 var(--space-xs);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: rgba(43,43,43,0.7);
  display: flex;
  align-items: center;
  gap: 10px;
}
.whatwedo-num-dot{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  display: inline-block;
}

.whatwedo-title{
  margin: 0 0 6px;
  color: var(--text);
}

.whatwedo-copy{
  margin: 0px 0 12px;
  font-size: 16px;
  color: var(--text);
  opacity: 0.5;
}

.whatwedo-text{
  margin: 0;
  color: var(--text);
  opacity: 0.75;
}

/* ...SP... */
@media (max-width: 640px){
  .whatwedo{ padding: 80px 0; }

  .whatwedo-item,
  .whatwedo-item--reverse{
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .whatwedo-item--reverse .whatwedo-media,
  .whatwedo-item--reverse .whatwedo-body{
    order: initial;
  }

  .whatwedo-img{ height: 220px; }
}

/* ...タブレット... */
@media (min-width: 641px) and (max-width: 1024px){

  .whatwedo-item,
  .whatwedo-item--reverse{
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .whatwedo-item--reverse .whatwedo-media,
  .whatwedo-item--reverse .whatwedo-body{
    order: initial;
  }
}

/* =========================
  Support （PC → SP）
========================= */
.support{
  padding: 120px 0;
  background: #FAF9F7;
}

/* 見出し周り */
.support .section-head{
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

.support .section-line{
  display:block;
  width:2px;
  height:32px;
  margin:16px auto;
  background: rgba(43,43,43,.35);
}

/* 上段カード */
.support-grid{
  margin-top: 64px;
  display:grid;
  gap: 32px;
}

.support-card{
  display:block;
  text-decoration:none;
  color: inherit;
  background: rgba(255,255,255,.92);
  border-radius: 16px;
  padding: 56px 40px;
  text-align:center;
  border: 1px solid rgba(43,43,43,.06);
  transition: box-shadow .25s ease, transform .25s ease, background .25s ease;
}

.support-card-icon{
  width: 96px;
  height: 96px;
  margin: 0 auto 24px;
  border-radius: 999px;
  background: var(--circle-bg);
  display: grid;
  place-items: center;
  transition: background .25s ease, transform .25s ease;
}

.support-card-icon img{
  width: 44px;
  height: 44px;
  object-fit: contain;
  opacity: .75;
}

.support-card-title{
  margin: 0 0 16px;
}

/* Support：小見出し下のドット */
.support-card-title{
  position: relative;
  margin-bottom: 24px; /* テキストとの余白をここで確保 */
}

.support-card-title::after{
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  margin: 12px auto 0;
  border-radius: 50%;
  background: rgba(43,43,43,.3);
}

.support-card-text{
  margin: 0 0 24px;
  font-size: 14px;
  color: rgba(43,43,43,.75);
}

.support-card-link{
  font-size: 13px;
  color: rgba(43,43,43,.55);
}

/* hover共通 */
.support-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(43,43,43,.08);
}

/* 円だけ温度あげる */
.support-card:hover .support-card-icon{
  background: rgba(245,182,182,.25);
  transform: scale(1.04);
}

/* 下段スライダー */
.support-stats-area{
  margin-top: 96px; 
}

.support-stats-title{
  text-align:center;
  font-size: 16px;
  color: rgba(43,43,43,.7);
  margin: 0 0 16px;
}

/* 下段スライダー枠（共通） */
.support-stats-slider{
  position: relative;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 24px;

  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.support-stats-slider::before,
.support-stats-slider::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width: 56px;
  pointer-events:none;
  z-index: 2;
}
.support-stats-slider::before{
  left:0;
  background: linear-gradient(to right, var(--base-bg), rgba(250,249,247,0));
}
.support-stats-slider::after{
  right:0;
  background: linear-gradient(to left, var(--base-bg), rgba(250,249,247,0));
}

.support-stat{
  background: rgba(255,255,255,.92);
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  border: 1px solid rgba(43,43,43,.06);
}

.support-stat-icon{
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  border-radius: 999px;
  background: var(--circle-bg);
  display: grid;
  place-items: center;
}

.support-stat-icon img{
  width: 32px;
  height: 32px;
  opacity: .75;
}

.support-stat-value{
  font-size: 32px;
  font-weight: 500;
  color: var(--text);
  opacity: 0.6;
  margin: 0;
}

.support-stat-label{
  font-size: 13px;
  color: rgba(43,43,43,.65);
  margin-top: 8px;
}

/* 男女比、アイコン円と同じ見た目に寄せる */
.support-stat-circle{
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  border-radius: 999px;
  background: rgba(43,43,43,.06);
  display: grid;
  place-items: center;
}

.support-stat-ratio-text{
  font-size: 12px;
  letter-spacing: .06em;
  color: rgba(43,43,43,.75);
  line-height: 1.2;
}

/* ...PC... */
@media screen and (min-width: 641px){

  /* 上段3カラム */
  .support-grid{
    grid-template-columns: repeat(3, 1fr);
  }

  /* 数値スライダー（PCは横並び＋自動） */
  .support-stats-track{
    display: flex;
    gap: 24px;
    width: max-content;
    will-change: transform;
    animation: supportMarquee 60s linear infinite;
  }

  .support-stats-track .support-stat{
    flex: 0 0 260px;
  }

  @keyframes supportMarquee{
    0%{
      transform: translateX(0);
    }
    100%{
      transform: translateX(-50%);
    }
  }
}

/* ...SP... */
@media screen and (max-width: 640px){

  .support{
    padding: 80px 0;
  }

  /* 上段カードは縦積み */
  .support-grid{
    grid-template-columns: 1fr;
  }

  .support-stats-slider{
    padding: 0 16px;
  }

  /* 数値は横スクロール */
  .support-stats-track{
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 0 0px 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .support-stats-track::-webkit-scrollbar{
    display: none;
  }

  .support-stat{
    flex: 0 0 80%;
    scroll-snap-align: center;
  }
}

/* =========================
  People（共通 → PC → SP）
========================= */
.people{
  padding: 120px 0;
  background: #FAF9F7;
}

/* 見出し周り */
.people .section-head{
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

.people .section-line{
  display: block;
  width: 2px;
  height: 32px;
  margin: 16px auto;
  background: rgba(43,43,43,.35);
}

.people .section-lead{
  margin: 0 auto;
  text-align: center;
}

.people-wrap{
  margin-top: 56px;
}

/* カード */
.people-card{
  background: rgba(255,255,255,.92);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(43,43,43,.06);
}

/* 写真 */
.people-photo{
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.people-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 個別微調整（大井さん） */
.people-card--ooi .people-photo img{
  object-position: 65% 20%;
}

/* 本文 */
.people-body{
  padding: 20px 20px 18px;
}

/* 名前 */
.people-name{
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 点 */
.people-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(43,43,43,.35);
  flex: 0 0 auto;
  transition: background .25s ease;
}

/* 役職 */
.people-role{
  margin: 0;
  font-size: 13px;
  color: rgba(43,43,43,.65);
}

/* 価値観コピー（初期は非表示） */
.people-value{
  position: relative; 

  margin-top: 14px;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(43,43,43,.75);
  background: rgba(245,182,182,.10);
  border-top: 1px solid rgba(43,43,43,.04);
  padding: 14px 16px;

  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

.people-value-text{
  margin: 0;
}

/* ▼ 価値観コピー内の「○›」 */
.people-more{
  position: absolute;
  right: 12px;
  bottom: 10px;
  display: inline-flex;
  text-decoration: none; /* 下線消す */
}

/* ○ の中身（›） */
.people-more-circle{
  width: 22px;           
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(43,43,43,.25);
  display: grid;
  place-items: center;
  font-size: 14px;
  line-height: 1;
  color: rgba(43,43,43,.55);
  background: transparent;

  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}


/* ...PC... */
@media screen and (min-width: 641px){

  .people-list{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }

  .people-wrap{
    position: relative;
    overflow: visible;
  }

  /* hover時 */
  .people-card:hover .people-dot{
    background: rgba(245,182,182,1);
  }

  .people-card:hover .people-value{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .people-card:hover .people-more-circle{
    border-color: var(--accent);
    color: var(--accent);
    background-color: rgba(245,182,182,.10);
  }

  /* SP用UIは非表示 */
  .people-dots{
    display: none;
  }
}

/* ...SP... */
@media screen and (max-width: 640px){

  .people{
    padding: 80px 0;
  }

  .people-list{
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 0 16px 10px;
    margin: 0 -16px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .people-list::-webkit-scrollbar{
    display: none;
  }

  .people-card{
    flex: 0 0 86%;
    scroll-snap-align: center;
  }

  /* SPは tap で is-open が付く想定 */
  .people-card.is-open .people-dot{
    background: rgba(245,182,182,1);
  }

  .people-card.is-open .people-value{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .people-dots{
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
  }

  .people-dot-ui{
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(43,43,43,.20);
  }

  .people-dot-ui.is-active{
    background: rgba(245,182,182,1);
  }
}

/* =========================
  Open positions（共通 → PC → SP）
========================= */
.positions{
  padding: 120px 0;
  background: var(--base-bg);
}

.positions-inner{
  width: var(--container);
  max-width: calc(100% - 32px);
  margin: 0 auto;
}

.positions .section-head{
  text-align: center;
  max-width: 760px;
  margin: 0 auto 64px;
}

/* 一覧：PCは折り返し＋2段目も中央寄せ */
.positions-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 72px 120px; /* 縦 / 横 */
}

/* 1カード */
.position-item{
  width: 260px;
  text-align: center;
}

/* ●（ドット） */
.position-dot{
  display: block;
  width: 8px;
  height: 8px;
  margin: 0 auto 16px;
  border-radius: 999px;
  background: rgba(43,43,43,.30);
  transform: scale(1);
  transition: background .25s ease, transform .25s ease;
}

/* タイトル */
.position-title{
  margin: 0 0 14px;
  color: var(--text);
}

/* 説明文 */
.position-text{
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.9;
  color: rgba(43,43,43,.75);
}

/* テキストリンク（下線は消す） */
.position-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(43,43,43,.55);
  text-decoration: none;
  transition: color .25s ease;
}

/* hover/focus：● */
.position-item:hover .position-dot,
.position-item:focus-within .position-dot{
  background: var(--accent);
  transform: scale(1.35);
}

.position-item:hover .position-link,
.position-item:focus-within .position-link{
  color: var(--accent);
}

/* キーボード操作見えるように */
.position-link:focus-visible{
  outline: 2px solid rgba(245,182,182,.65);
  outline-offset: 4px;
  border-radius: 6px;
}

/* ...SP... */
@media screen and (max-width: 640px){
  .positions{
    padding: 80px 0;
  }

  .positions-list{
    gap: 40px 24px;
  }

  .position-item{
    width: min(320px, 100%);
  }
}

/* =========================
  Hiring process（共通 → PC → SP）
========================= */

/* セクション */
.process{
  padding: 120px 0;
  background: var(--base-bg, #FAF9F7);
}

.process .container{
  overflow: visible;
}

/* 見出し */
.process .section-head{
  text-align: center;
  margin: 0 auto 56px;
}
.process .section-head h2{
  margin: 0;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--text, #2B2B2B);
}

/* 一覧（親） */
.process .process-list{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 0;        
  flex-wrap: nowrap;
}

/* カード */
.process .process-item{
  flex: 0 0 240px;
  max-width: 240px;

  margin: 0 12px;

  background: rgba(255,255,255,.92);
  border: 1px solid rgba(43,43,43,.06);
  border-radius: 16px;

  padding: 28px 18px 24px;
  text-align: center;

  /* 中身のズレ防止 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* STEP / 番号（円なし） */
.process .process-step{
  margin: 0;
  font-size: 12px;
  letter-spacing: .12em;
  color: rgba(43,43,43,.55);
  line-height: 1;
}
.process .process-number{
  margin: 6px 0 14px;
  font-size: 24px;
  line-height: 1;
  font-weight: 400;
  color: rgba(43,43,43,.6);
}

/* アイコン丸 */
.process .process-icon{
  width: 120px;
  height: 120px;
  margin: 0 0 14px;
  border-radius: 999px;
  background: rgba(43,43,43,.06);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.process .process-icon img{
  width: 44px;
  height: 44px;
  display: block;
  object-fit: contain;
  opacity: .75;
}

/* ラベル（高さを揃えてズレ防止） */
.process .process-label{
  margin: 0;
  font-size: 14px;
  color: rgba(43,43,43,.78);
  letter-spacing: .02em;
  line-height: 1.4;

  min-height: calc(1.4em * 2); /* 2行分確保 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 点線：中央に固定席を作る */
.process .process-dots{
  flex: 0 0 28px;
  width: 28px;
  height: 20px;             
  margin: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .35;
}
.process .process-dots::before{
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(43,43,43,.35);
  display: block;
}

/* 注釈 */
.process .process-note{
  margin: 22px auto 0;
  text-align: center;
  font-size: 12px;
  color: rgba(43,43,43,.55);
}

/* =========================
  PC（横向きの …）
========================= */
@media screen and (min-width: 641px){
  .process .process-dots{
    width: 28px;      
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .35;
  }

  .process .process-dots::before{
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: rgba(43,43,43,.35);

    /* ★左右に出す（中心基準） */
    box-shadow:
      -10px 0 0 rgba(43,43,43,.35),
       10px 0 0 rgba(43,43,43,.35);
  }
}

/* ...SP... */
@media screen and (max-width: 640px){
   /* ★縦並びに強制 */
  .process .process-list{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; 
    gap: 14px;
    flex-wrap: nowrap; 
  }

  .process .process-item{
    width: 100%;
    max-width: 420px;
    flex: none; 
  }
  .process .process-dots{
    width: 20px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .35;
  }

  .process .process-dots::before{
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: rgba(43,43,43,.35);

    /* ★上下に出す */
    box-shadow:
      0 -10px 0 rgba(43,43,43,.35),
      0  10px 0 rgba(43,43,43,.35);
  }
}

/* ...タブレット... */
@media (min-width: 641px) and (max-width: 1024px){

  .process .process-list{
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  .process .process-item{
    width: 100%;
    max-width: 420px;
    flex: none;
  }

  .process .process-dots{
    width: 20px;
    height: 28px;
  }

  .process .process-dots::before{
    box-shadow:
      0 -10px 0 rgba(43,43,43,.35),
      0  10px 0 rgba(43,43,43,.35);
  }
}

/* =========================
  Entry（PC → SP）
========================= */
.entry{
  position: relative;
  padding: var(--space-huge) 0;
  background: var(--base-bg);
  overflow: hidden;
  text-align: center;
}

.entry-sentinel{
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* 見切れ“円” */
.entry-bg-circle{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 220%;
  height: 360px;
  border-radius: 50%;
  background: rgba(245,182,182,.25);
  z-index: 0;

  bottom: calc(-1 * 360px * 0.78);
}

.entry-inner{
  position: relative;
  z-index: 1;
}

.entry-copy{
  margin: 0 auto 16px;
  color: rgba(43,43,43,.75);
}

.entry-dot{
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  margin: 18px auto 56px;
  opacity: .9;
}

.entry-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(520px, 100%);
  height: 72px;
  border-radius: 14px;
  background: var(--accent);
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: .04em;
  transition: background .2s ease;
}

.entry-btn:hover{
  background: #FA9898; 
}

.entry-btn:focus-visible{
  outline: 2px solid rgba(245,182,182,.9);
  outline-offset: 3px;
}

/* =========================
  Entry：in-view アニメーション
========================= */

/* 初期状態 */
.entry .entry-copy,
.entry .entry-dot,
.entry .entry-btn{
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity .8s ease,
    transform .8s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}

/* 表示状態（is-in が付いたら） */
.entry.is-in .entry-copy,
.entry.is-in .entry-dot,
.entry.is-in .entry-btn{
  opacity: 1;
  transform: translateY(0);
}

/* 時差 */
.entry.is-in .entry-dot{ transition-delay: .12s; }
.entry.is-in .entry-btn{ transition-delay: .24s; }


/* SP */
@media screen and (max-width: 640px){
  .entry{
    padding: 90px 0 120px;
    isolation: isolate;
  }

  .entry-bg-circle{
    width: 260%;
    height: 240px;
    bottom: calc(-1 * 240px * 0.78);
  }

  .entry-btn{
    height: 64px;
    border-radius: 12px;
  }

  .entry-dot{
    margin: 16px auto 40px;
  }
}

/* =========================
  Footer
========================= */
.footer{
  background: #F2EFEB;  
  padding: 96px 0 72px;
}

.footer-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ロゴ */
.footer-brand{
  margin-bottom: 24px;
}

.footer-logo{
  width: 180px;     
  height: auto;
  display: block;
}

/* 区切り線 */
.footer-line{
  border: none;
  border-top: 1px solid rgba(43,43,43,.35);
  margin: 32px 0;
}

/* note */
.footer-note{
  margin-bottom: 32px;
}

.footer-note-link{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: rgba(43,43,43,.75);
}

.footer-note-logo{
  width: 44px;
  height: auto;
  display: block;
}

.footer-note-text{
  font-size: 13px;
}

/* フッターリンク */
.footer-nav{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 40px;
}

.footer-nav a{
  color: rgba(43,43,43,.75);
  text-decoration: none;
}

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

.footer-sep{
  color: rgba(43,43,43,.4);
}

/* コピーライト */
.footer-copy{
  font-size: 12px;
  color: rgba(43,43,43,.45);
}

html, body{
  overflow-x: hidden;
}