/* 0) Base Reset (抜粋) */
*,*::before,*::after{ box-sizing:border-box; }
html{
    -webkit-text-size-adjust:100%;
    scroll-behavior: smooth;
}

body{ margin:0; }
p{ margin:0; } /* UAのマージンリセット */

/* 1) Tokens（固定色・共通トークン） */
:root{
    --primary: #00B2B3;
    --cv:      #FF6070;
    --accent:  #FFE325;
    --text:    #262727;

    --bg-b:    #EEF8F8; /* section/bg b */
    --bg-w:    #FAFAFA; /* section/bg w */

    --white:   #FFFFFF;

    --page-max: 1920px;
    --container-max: 1216px;
    --gutter: clamp(16px, 5vw, 32px);

  /* HERO の余白（必要なら root に残すが、HERO 内に閉じてもOK） */
    --hero-pad-top: clamp(32px, 5.2083vw, 100px);   /* 1920px時 ≒100px */
    --hero-pad-bottom: clamp(48px, 6vw, 120px);     /* 通常の下余白 */
    --hero-bg-height: 800px;
    --hero-content-height: 180px;
    
}

body {
    position: relative;
    padding-bottom: 144px; /*ctaのボタン分の高さです*/
    font-family: 'Noto Sans JP', sans-serif;
}

.floating-cta-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 0 32px;
    background: rgba(0, 0, 0, 0.45);
    /* 初期状態：非表示 */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* 表示状態 */
.floating-cta-wrap.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* =============================
   追従CTA 本体（ボタン）
   ============================= */

.floating-cta {
  /* wrapがfixedを担うので、ここはstaticでOK */
    position: static;
    transform: none;
}

/* =============================
   CTAリンク共通（固定・追従 両方に適用）
   ============================= */

.floating-cta__link {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: var(--cv);
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 6px 24px rgba(255, 97, 129, 0.4);
    transition: opacity 0.2s ease;
}

.floating-cta__text {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 0 0 16px;
    border-left: 1px solid var(--white);
    white-space: nowrap;
}

.floating-cta__lead {
    width: 339px;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    letter-spacing: 0.02em;
    color: #FFE325;
}

.floating-cta__label {
    width: 359px;
    font-weight: 700;
    font-size: 32px;
    line-height: 38px;
    text-align: center;
    letter-spacing: 0.02em;
    color: var(--white);
}

/* ── PC専用 ── */
@media (min-width: 768px) {
    .floating-cta__link {
        padding: 12px 20px 12px 12px;
        gap: 16px;
        width: 512px;
        height: 96px;
    }

    .floating-cta__lead {
        width: 339px;
        font-size: 20px;
        line-height: 24px;
    }

    .floating-cta__label {
        width: 359px;
        font-size: 32px;
        line-height: 38px;
    }

    .floating-cta__icon {
        font-size: 54px;
    }
}

.floating-cta__link:hover {
    opacity: 0.85;
}

/* 2) Layout Utilities */
.l-container{
    width: min(calc(var(--container-max) + var(--gutter)*2), 100%);
    margin-inline: auto;
    padding-inline: var(--gutter);
    max-width:1216px
}
.u-hide-sm{
  display:none;
}
@media (min-width:768px){
  .u-hide-sm{
    display:inline;
  }
}

/* 3) Section skeleton */
.sec { position: relative; }

.sec__inner {
    position: relative;
    z-index: 2;
    margin-top: 0;
    align-self: stretch;
}

.header__logo--img {
    width: 200px;
    height: auto;
}

@media (max-width:767px){
  img.header__logo--img {
    width: 70%;
}
}

.site-header__inner{
    height: 64px;
    display: flex;
    align-items: center;
}

@media (max-width:767px){
  .site-header__inner{
    width: 100%;
    height: auto;
    padding: 1rem 2rem;
    box-sizing: border-box;
    background-color: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}


/* ---------------------------------
   HERO
   --------------------------------- */

/* ★ ::after wave は廃止。div.sec--hero__bottom に一本化 ★ */
.sec--hero.wave--bottom {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    position: relative;
}

@media (max-width: 767px) {
    .sec--hero.wave--bottom {
        background: linear-gradient(180deg, var(--bg-b) 80%, var(--primary) 100%);
    }
}

/* ::after は完全に無効化 */
.sec--hero.wave--bottom::after {
    display: none;
    content: none;
}

/* sec__inner：l-containerのpadding-topでテキスト位置を決める */
.sec--hero .sec__inner {
    padding-bottom: 0;
}

.sec--hero__bottom {
    width: 100%;
    line-height: 0;
    flex-shrink: 0;
    margin-top: clamp(300px, 32.29vw, 620px);
    background: linear-gradient(0deg, var(--white) 0%, var(--primary) 100%);
    height: 160px;
}

.sec--hero__bottom svg {
    display: block;
    width: 100%;
    height: auto;
    position: relative;  /* ← 追加 */
    top: -2px;  
}

/* hero テキスト */
.hero__title {
    font-weight: 700;
    line-height: 1.4;
    color: var(--text);
    font-size: 32px;
    margin-bottom: 24px;
}

.hero__desc {
    font-weight: 400;
    display: block;
    color: var(--text);
}

.hero-cta {
    z-index: 10;
    display: flex;
    z-index: 10;
    position: absolute;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    justify-content: center;
    top: clamp(320px, 33.33vw, 640px);
}

/* フッターに到達したとき */
.floating-cta.is-stopped {
    position: absolute;
    bottom: auto; /* fixedのbottomをリセット */
    /* top は JS で動的にセット */
    transform: translateX(-50%);
}

/* 7) Material Symbols */

.material-symbols-outlined {
    font-variation-settings: 'wght' 600, 'opsz' 24;
    line-height: 1;
    font-size: 54px;
}
.floating-cta .floating-cta__icon {
    font-size: 54px;
    color: var(--white);
}

.stats-continue .stats-continue__icon {
    font-size: 24px;
    color:var(--primary);
}

.stats-ref-btn .stats-ref-btn__icon {
    font-size: 16px;
}



/* =============================
   NAV LINKS
   ============================= */

.nav-links {
    position: relative;
    z-index: 10;
    margin-top: -27px;
    width: 100%;
}

.nav-links__container {
    width: min(var(--container-max), 100%);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: flex;
    gap: 3rem;
    justify-content: center;
}

.nav-links__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0 16px;
    gap: 8px;
    width: 240px;
    height: 90px;
    background: var(--white);
    border-bottom: 1px solid var(--primary);
    box-shadow: 0 4px 4px rgba(0, 178, 179, 0.3);
    border-radius: 12px 12px 0 0;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.nav-links__item:hover {
    opacity: 0.75;
}

.nav-links__num {
    font-weight: 700;
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -0.02em;
    color: #A9DADD;
    text-align: center;
}

.nav-links__label {
    font-weight: 700;
    font-size: 20px;
    line-height: 20px;
    letter-spacing: 0.1em;
    color: #000000;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

/* =============================
   SEC-ABOUT
   ============================= */

.sec-about {
    background-color: var(--white);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 24px 0;
    position: relative;
    margin-top: 64px;
}

.sec-about

.sec-num {
    width: 100%;
}

.sec-num__inner {
    display: flex;
    justify-content: center;
}

.sec-num__text {
    font-weight: 700;
    font-size: 40px;
    line-height: 48px;
    letter-spacing: -0.02em;
    color: #A9DADD;
}

@media (max-width:767px){
  .sec-num__text {
    font-size: 80px;
  }
}

.sec-about__container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 16px;
}

.sec-about__inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
}

.sec-heading {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 36px;
    line-height: 43px;
    letter-spacing: 0.1em;
    color: var(--primary);
    margin: 0 0 64px;
    text-align: center;
}

.sec-about__container .sec-heading {
  margin: 0;
}

.sec-about__stats .sec-heading {
    margin: 0;
}

.sec-about__demand-container .sec-heading {
    margin: 0;
}


@media (max-width: 767px) {
  .sec-heading{
    font-size: 24px;
    padding: 0 22px;
    margin: 32px 0 0;
  }

.sec-jobs .sec-heading {
    margin-bottom: 32px;
}

.sec-faq .sec-heading {
    margin-bottom: 32px;
}

.sec-about__container .sec-heading{
  margin: 0;
}

}

.sec-about__img {
    max-width: 344px;
    height: auto;
    object-fit: contain;
    display: block;
}

.sec-about__desc {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 768px) {
    .sec-about__desc {
      gap: 16px;
      margin-bottom: 64px;
    }

    .sec-about__desc .p-pc{
      padding: 0 22px;
      width: min(calc(var(--container-max) + var(--gutter) * 2), 100%);
      margin-inline: auto; 
    }
  }

.p-pc {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.1em;
    color: var(--text);
    margin: 0;
}

/* =====================
   sec-about__demand
   ===================== */
.sec-about__demand {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.sec-about__wave {
  position: relative;
  width: 100vw;
  height: 100px;
  overflow: hidden;
}

.sec-about__wave svg {
  position: absolute;
  width: 1920px;
  height: 108px;
  left: calc(50% - 960px);
  bottom: 0;
}

.sec-about__wave .is-cases .is-bottom {
    margin-top: 0px; /* 数値はお好みで調整 */
}


.sec-about__wave.is-bottom svg {
  transform: scale(-1, -1);
  top: 0;
  bottom: auto;
}

.sec-about__demand-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 22px;
  gap: 64px;
  width: 100%;
  box-sizing: border-box;
  background: #CAF7F7;
}

.sec-about__demand-boxes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 40px;
  width: min(calc(var(--container-max) + var(--gutter) * 2), 100%);
}

.sec-about__demand-box {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 40px;
  align-self: stretch;
  background: var(--white);
  border: 1px solid var(--primary);
  border-radius: 12px;
  width: inherit;
}

.sec-about__demand-box-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 24px;
  width: 100%;
}

.sec-about__demand-box-heading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    width: 100%;
    font-weight: 700;
    font-size: 24px;
    line-height: 29px;
    letter-spacing: 0.1em;
    color: var(--primary);
    margin: 0;
}

.sec-about__demand-desc {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 16px;
}

.br-sp{
  display: none;
}

@media (max-width: 767px) {
  .br-sp{
    display: block;
  }
}

/* =============================
   sec-about__demand SP
   ============================= */

@media (max-width: 767px) {

  /* --- コンテナ --- */
  .sec-about__demand-container {
    padding: 64px 16px;
    gap: 24px;
  }

  /* --- h2 --- */
  .sec-about__demand-container > .sec-heading {
    font-size: 24px;
    line-height: 29px;
    letter-spacing: 0.1em;
    justify-content: center;
    margin-bottom: 8px;
  }

  /* --- boxes ラッパー --- */
  .sec-about__demand-boxes {
    width: 100%;
    gap: 16px;
  }

  /* --- box ガワ --- */
  .sec-about__demand-box {
    width: 100%;
    padding: 0;
    background: #EEF8F8;
    border: 1px solid var(--primary);
    border-radius: 12px;
    align-items: center;
    gap: 0;
    /* 閉じているときは高さをsp-h3だけに絞る */
    overflow: hidden;
  }

  /* --- SP用アコーディオンヘッダー --- */
  .sp-h3 {
    display: flex;           /* SPで表示 */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 16px 8px 16px 22px;
    width: 100%;
    min-height: 60px;
    border-radius: 12px 12px 0 0;
    cursor: pointer;
    flex-shrink: 0;
    background-color: var(--white);
  }

  .sp-h3__inner {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0 24px 0 16px;
        gap: 36px;
        width: 100%;
        box-sizing: border-box;
        background-color: var(--white);
  }

  /* SP h3 テキスト */
  .sp-h3 .sec-about__demand-box-heading {
    font-size: 16px;
    line-height: 19px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--primary);
    justify-content: flex-start;
    flex: 1;
    width: auto;
    background: var(--white);
    white-space: nowrap;
  }

  /* 矢印アイコン */
  .sp-h3__arrow {
    font-size: 24px;
    color: var(--primary);
    flex-shrink: 0;
    transition: transform 0.3s ease;
  }

  /* 開いているとき：矢印を上向きに */
  .sec-about__demand-box.is-open .sp-h3__arrow {
    transform: rotate(180deg);
  }

  /* 開いているとき：sp-h3 の下角を角張らせる */
  .sec-about__demand-box.is-open .sp-h3 {
    border-radius: 12px 12px 0 0;
  }

  /* --- PC用 box-inner（SP では開閉対象） --- */
  .sec-about__demand-box-inner {
    display: grid;
    grid-template-rows: 0fr;   /* 閉じている */
    transition: grid-template-rows 0.35s ease;
    width: 100%;
  }

  /* grid の内側に overflow:hidden のラッパーが必要 */
  .sec-about__demand-box-inner > * {
    overflow: hidden;
  }

  /* 開いているとき */
  .sec-about__demand-box.is-open .sec-about__demand-box-inner {
    grid-template-rows: 1fr;   /* 開く */
    margin-top:16px;
  }

  /* --- PC用 h3（SP では非表示） --- */
  .p-hide-sp {
    display: none;
  }

  /* --- desc 内の p --- */
  .sec-about__demand-desc {
    padding: 0 40px;
    gap: 12px;
  }

  /* p-pc の padding を上書き */
  .sec-about__demand-box .p-pc {
    /* padding: 0 22px 16px; */
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--text);
  }

  /* 最初の p だけ上に余白 */
  /* .sec-about__demand-desc .p-pc:first-child {
    padding-top: 16px;
  } */

  /* --- PC用 sp-h3 は非表示（念のため） --- */
}

/* PC では sp-h3 を非表示 */
@media (min-width: 768px) {
  .sp-h3 {
    display: none;
  }
  .p-hide-sp {
    display: flex; /* PC では元の表示に戻す */
  }
}

/* =====================
   ref-link（参考リンク）
   ===================== */
.ref-link {
  display: block;
  /* padding: 0 32px; */
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.1em;
  color: var(--primary);
  text-decoration: underline;
}

.ref-link:hover {
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

@media (max-width :767px){
  .ref-link {
    padding: 0;
    font-size: 14px;
  }
}

/* =============================
   sec-about__stats
============================= */
.sec-about__stats {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 64px 22px;
    gap: 64px;
    isolation: isolate;
    width: 100%;
    background:
    linear-gradient(249.62deg, rgba(255,255,255,0.2) 4.15%, rgba(128,217,217,0.2) 27.27%, rgba(0,178,179,0.2) 86.71%),
    linear-gradient(180deg, rgba(255,255,255,0.41) 31%, rgba(0,178,179,0.41) 100%),
    var(--primary);
}

.sec-about__stats-elder-img {
    position: absolute;
    width: 240px;
    height: auto;
    left: 0;
    top: -146px;
    z-index: 2;
}

/* =============================
   sec-about__stats-box
============================= */
.sec-about__stats-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px;
  gap: 64px;
  width: min(calc(var(--container-max) + var(--gutter) * 2), 100%);
  background: var(--white);
  border-radius: 12px;
}

.sec-about__stats-box--visit {
  position: relative;
}
/* 
.sec-about__stats-box--visit::after {
  content: "";
  position: absolute;
  width: Xpx;
  height: Xpx;
  right: Xpx;
  bottom: Xpx;
  background: url("../img/sitdown.png") no-repeat center / contain;
} */

/* =============================
   sec-about__stats-container
============================= */
.sec-about__stats-container {
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 16px;
    max-width: 1216px;
}

/* =============================
   stats-ref-btn（参考文献ボタン）
   ============================= */

/* ラッパー：中央揃え */
.stats-ref-btn-wrap {
display: none;
  /* stats-p の margin-bottom を引き継ぐ */
}

/* ボタン本体 ベース（SP） */
.stats-ref-btn {
  display: none;
}


/* =============================
   sec-about__stats SP
   ============================= */
@media (max-width: 767px) {

  .sec-about__stats {
    padding: 48px 16px 64px;
    gap: 16px;
    align-items: center;
  }

  /* fadebox-sp：白いカード */
  .fadebox-sp {
    /* width: 343px; */
    padding: 32px 0;
    gap: 16px;
    border-radius: 12px;
    background: var(--white);
    /* PC用の width:1216px を上書き */
    max-width: 100%;
  }

  /* h2 */
  .fadebox-sp .sec-heading {
    font-size: 24px;
    line-height: 29px;
    padding: 0 32px;
    text-align: center;
  }

  /* container */
  .fadebox-sp .sec-about__stats-container {
    width: 100%;
    max-width: 343px;
    padding: 0;
    gap: 0; /* gap は各要素の padding-bottom で管理 */
  }

  /* 画像エリア */
  .fadebox-sp .img-pc {
    padding: 0 32px 16px;
    align-items: flex-start;
  }

  .fadebox-sp .img-pc img {
    width: 100%;
    height: 240px;
    object-fit: cover;
  }

  /* ---- p / ref-link 共通 ---- */
  .stats-p {
    padding: 0 32px;
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--text);
    margin: 0 0 16px 0;
  }

  /* ref-link の SP上書き */
  .fadebox-sp .ref-link.stats-p {
    padding: 0 32px;
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
    margin-bottom: 16px;
    color: var(--primary);
  }

  /* ---- ブラー（2段目p） ---- */
  .stats-p--blur {
    position: relative;
    /* テキスト自体にブラー */
    filter: blur(3px);
    user-select: none;
    pointer-events: none;
    /* 下にフェードアウトのグラデーションをかける */
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 80%);
    mask-image: linear-gradient(to bottom, black 0%, transparent 80%);
    margin-bottom: 8px;
  }

  /* 開いているとき：ブラー解除 */
  .fadebox-sp.is-open .stats-p--blur {
    filter: none;
    -webkit-mask-image: none;
    mask-image: none;
    pointer-events: auto;
  }

  /* ---- 3段目以降：非表示 ---- */
  .stats-p--hidden {
    display: none;
  }

  /* 開いているとき：表示 */
  .fadebox-sp.is-open .stats-p--hidden {
    display: block;
  }

  /* ---- 続きを見る / 閉じる ---- */
  .stats-continue {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 10px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 8px;
  }

  .stats-continue__btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
  }

  .stats-continue__label {
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0.1em;
    color: var(--primary);
  }

  .stats-continue__icon {
    font-size: 24px;
    color: var(--white);
    transition: transform 0.3s ease;
    line-height: 1;
  }

  /* 開いているとき：アイコン上向き */
  .fadebox-sp.is-open .stats-continue__icon {
    transform: rotate(180deg);
  }

    .fadebox-sp.is-open .stats-ref-btn-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0 32px;
    box-sizing: border-box;
    margin: 16px 0 24px;
  }

  /* ---- elder-img ---- */
  .sec-about__stats-elder-img {
    width: 160px;
    height: auto;
    left: 16px;
    top: -98px;
  }


/* ボタン本体 ベース（SP） */
.stats-ref-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    gap: 8px;
    width: 100%;
    max-width: 282px;
    height: 44px;
    background: var(--primary);
    border-radius: 50px;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0.1em;
    color: var(--white);
    transition: opacity 0.2s ease;
  }

.stats-ref-btn:hover {
  opacity: 0.8;
}

/* アイコン（SP） */
.stats-ref-btn .stats-ref-btn__icon{
  font-size: 16px;
  color: var(--white);
  line-height: 1;
  font-variation-settings: 'wght' 400, 'opsz' 20;
  flex-shrink: 0;
}

  .stats-ref-btn-wrap ~ .ref-link.stats-p,
  .ref-link.stats-p.stats-p--hidden {
    display: none;
  }

}

/* PC では続きを見るボタンを非表示 */
@media (min-width: 768px) {
  .stats-continue {
    display: none;
  }

  .stats-p--blur,
  .stats-p--hidden {
    filter: none;
    -webkit-mask-image: none;
    mask-image: none;
    display: block;
    pointer-events: auto;
  }

  /* ↓ 追加：PCではボタン形式を強制非表示 */
  .stats-ref-btn-wrap {
    display: none;
  }
}



/* =============================
   img-pc
============================= */
.img-pc {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0 32px;
    width: 100%; /* 親に追従 */
    height: auto; /* ← 472px固定を解除 */
}


@media (max-width: 767px){
  .img-pc{
    display: flex;
    padding: 0 32px;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
  }

  .img-pc img{
    height: 240px;
    align-self: stretch;
  }
}

.sec-about__stats-img {
    width: 640px;  /* ← 指定サイズ */
    height: 440px; /* ← 指定サイズ */
    object-fit: cover;
    display: block;
}

/* =============================
   SEC-JOBS
   ============================= */

.sec-jobs {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-block: 64px;
    gap: 48px;
    background: linear-gradient(90deg, rgba(0, 178, 179, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%), linear-gradient(180deg, var(--white) 0%, #80D9D9 50%, var(--white) 100%);
}

/* --- 見出しエリア --- */
.sec-header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    position: relative;
    padding-top: 16px;
}

@media (max-width:767px){
  .sec-cases-container .sec-header{
    margin-bottom: 32px;
  }
}

/* sec-num は既存スタイルをそのまま流用 */
/* .sec-num / .sec-num__inner / .sec-num__text は main.css 定義済み */

/* sec-heading も既存スタイルをそのまま流用 */
/* .sec-heading は main.css 定義済み */

/* --- カード群ラッパー --- */
.sec-jobs__cards {
    display: flex;
    flex-direction: row;          /* ← 横並び */
    align-items: stretch;         /* ← カードの高さを揃える */
    gap: 16px;
    width: min(calc(var(--container-max) + var(--gutter) * 2), 100%);
    margin: 0 auto;
}

/* --- カード（ガワ） --- */
.sec-jobs__card {
    position: relative;
    flex: 1;/* ← 3枚均等幅 */
    background: var(--white);
    border-radius: 12px;
    overflow: visible;
    flex-direction: column;
    padding: 64px 56px;
    gap: 8px;
    box-shadow: 0px 4px 10px 2px rgba(0, 178, 179, 0.3);
}

/* --- カード内コンテンツ --- */
.sec-jobs__card-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --- 求人タイトル --- */
.job-card__title {
    font-weight: 700;
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: 0.05em;
    color: var(--text);
    margin: 0;
}

/* --- メタ情報全体 --- */
.job-card__meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

/* --- 科目行（ラベル＋科目名） --- */
.job-card__subject-row,
.job-card__facility {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* --- 募集科目ラベルbox --- */
.job-card__subject-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 10px;
    border: 1px solid var(--primary);
    border-radius: 4px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.05em;
    color: var(--primary);
    white-space: nowrap;
}

/* --- 科目名 / 施設種別テキスト --- */
.job-card__subject-name {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0.05em;
    color: var(--text);
    margin: 0;
}

.job-card__facility dd {
    font-weight: 400;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0.05em;
    color: var(--text);
    margin: 0;
}

/* --- CTAエリア --- */
.cta-area {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 40px 0 64px;
}

/* --- CTAボタン --- */
.jobs-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 40px;
    background: var(--primary);
    border-radius: 50px;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.jobs-cta-btn:hover {
    opacity: 0.8;
}

/* --- ボタン内テキスト --- */
.jobs-cta-btn__text {
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 0.1em;
    color: var(--white);
    white-space: nowrap;
}

@media (max-width:767px){
  .jobs-cta-btn__text{
    font-size:14px;
  }
}

/* --- ボタン内アイコン --- */
.jobs-cta-btn__icon {
    font-size: 16px;
    color: var(--white);
}

/* =============================
   SEC-JOBS SP
   ============================= */
@media (max-width: 767px) {

  .jobs-cta-btn{
    padding: 10px 40px;
  }

  .sec-jobs {
    padding-block: 48px;
    gap: 24px;
  }

  /* カードを縦並びに */
  .sec-jobs__cards {
    flex-direction: column;
    gap: 16px;
    padding-inline: 16px;
  }

  /* カード幅を全幅に */
  .sec-jobs__card {
    flex: none;
    width: 100%;
    padding: 0;
  }

  .sec-jobs__card-inner {
    padding: 24px 20px;
  }

  /* タイトル文字サイズ調整 */
  .job-card__title {
    font-size: 16px;
  }

  /* CTAボタン：既存デザインそのまま・幅だけ調整 */
  .jobs-cta-btn {
    width: calc(100% - 32px);
    justify-content: center;
    max-width: 282px;
  }
}


/* =============================
   SEC-CASES
   ============================= */

.sec-cases {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    overflow: hidden;
}

/* --- Wave色（黄色背景用） --- */
/* TODO: 既存waveのSVG・クラス構造を教えてください */
/* .sec-cases .wave.is-top  { fill or background: #FFF7C3 を上側に } */
/* .sec-cases .wave.is-bottom { fill or background: #FFF7C3 を下側に } */

/* --- コンテナ（黄色背景） --- */
.sec-cases-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 36px 0 0;
    gap: 64px;
    width: 100%;
    background-color: #FFF7C3;
}

/* --- カード群ラッパー --- */
.sec-cases-boxes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: min(calc(var(--container-max) + var(--gutter) * 2), 100%);
    margin: 0 auto;
    padding: 0 22px;
}

/* =============================
   CASE-CARD（共通・ガワ）
   ============================= */

.case-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 64px 24px;
    gap: 40px;
    width: 100%;
    background: var(--white);
    border: 1px solid var(--primary);
    border-radius: 12px;
}

/* =============================
   CASE-CARD__VISUAL（左カラム）
   ============================= */

.case-card__visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    width: 378px;
    flex-shrink: 0;
}

/* --- キャッチコピー「年収大幅UP！」 --- */
.case-card__catch {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0 0 0 24px;
    margin: 0;
    font-weight: 700;
    font-size: 32px;
    line-height: 1;
    letter-spacing: 0.1em;
    color: var(--primary);
}

/* --- イラスト画像 --- */
.case-card__img {
    width: 200px;
    height: 220px;
    object-fit: contain;
}

/* =============================
    COMPARISON（年収比較）
   ============================= */

.comparison {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    /* padding: 32px 0 0; */
    gap: 16px;
    width: 80%;
}

/* --- Before / After 共通 --- */
.comparison__before,
.comparison__after {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0 auto;
}

/* --- ラベル（前職年収 / 転職後年収） --- */
.comparison__label {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0 24px;
    margin: 0;
    background: var(--primary);
    border-radius: 4px;
    font-weight: 700;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0.05em;
    color: var(--white);
    white-space: nowrap;
}

/* 転職後（差分だけ） */
.comparison__label--after {
    padding: 0 40px;
    background-color: #FF551C;
}

/* --- 金額行（約 + 数字 + 万円） --- */
.comparison__value {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    margin: 0;
}

/* 「約」「万円」 */
.comparison__value span {
    font-weight: 700;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0.1em;
    color: var(--text);
}

/* before側の強調数字（900） */
.comparison__before .is-big {
    font-size: 22px;
    letter-spacing: 0.04em;
    color: var(--text);
}

/* after側の強調数字（2,500）*/
.comparison__after .is-big {
    font-size: 28px;
    letter-spacing: 0.04em;
    color: var(--text);
}

/* =============================
   CASE-CARD__BODY（右カラム）
   ============================= */

.case-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* padding: 0 72px; */
    gap: 24px;
    flex: 1;
    min-width: 0;
}

/* --- カードタイトル（大見出しh3） --- */
.case-card__title {
  margin: 0;
  font-weight: 700;
  font-size: 24px;
  line-height: 29px;
  letter-spacing: 0.1em;
  color: var(--text);
}

.case-card__title.only-pc {
    margin-bottom: 8px;
}

/* =============================
   CASE-CARD__LEAD（リード文群）
   ============================= */

.case-card__lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.case-card__lead p {
    display: flex;
    align-items: center;
    margin: 0;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.05em;
    color: var(--text);
}

.case-card.is-advisor{
    margin-bottom: 64px;
}

/* =============================
   CASE-CARD__BLOCK（色付きh3 + p群）
   ============================= */

.case-card__block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

/* --- 色付き小見出し --- */
.case-card__block-heading {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.6;
    letter-spacing: 0.05em;
    color: var(--primary);
}

/* --- ブロック内p --- */
.case-card__block p {
    margin: 0;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.03em;
    color: var(--text);
}

/* =============================
   SEC-CASES SP
   ============================= */
@media (max-width: 767px) {

  .sec-cases-container {
    gap: 32px;
  }

  .sec-cases-boxes {
    width: 100%;
    gap: 16px;
    padding: 0 16px 32px;
  }

  /* ビジュアルエリア：左paddingをリセット・中央揃え */
  .case-card__visual {
    width: 100%;
    align-items: center;
    box-sizing: border-box;
  }

  /* キャッチコピー */
  .case-card__catch {
    font-size: 24px;
    padding: 0;
    justify-content: center;
  }

  /* イラスト */
  .case-card__img {
    width: 160px;
    height: 176px;
  }

  /* 年収比較 */
  .comparison {
    /* padding: 16px 0; */
    justify-content: center;
  }

  /* テキストエリア */
  .case-card__body {
    width: 100%;
    /* padding: 0 24px; */
    gap: 16px;
    box-sizing: border-box;
  }

  /* カードタイトル */
  .case-card__title {
    font-size: 18px;
    line-height: 1.5;
    width: 100%;
    text-align: center;
  }

  /* ブロック見出し */
  .case-card__block-heading {
    font-size: 16px;
    line-height: 1.5;
    width: 100%;
    justify-content: center;
    margin-top: 16px;
  }

  /* ブロック内p */
  .case-card__block p,
  .case-card__lead p {
    font-size: 14px;
    line-height: 1.7;
  }

  /* アドバイザーカードの下マージン */
  article.case-card.is-advisor {
    margin-bottom: 32px;
  }
}


/* --- Wave（is-cases） --- */

.wave .sec-about__wave .is-top .is-cases {
    position: relative;
    width: 100%;
    line-height: 0;        /* ← SVGの下に隙間が出るのを防ぐ */
    font-size: 0;
    display: block;
}

.wave.is-cases svg{
  display: block;
  width: 100%;
  height: auto;
}

.wave.is-top.is-cases {
    display: block;
    line-height: 0;  /* ← インライン隙間をつぶす */
    font-size: 0;
    margin-bottom: -1px; /* ← 1px残る場合の保険 */
}

.wave.is-top.is-cases svg {
    display: block;  /* ← インライン要素をブロックに */
    vertical-align: bottom;
}



.wave.is-top.is-cases svg path {
    fill: #FFF7C3;
}

.wave.is-bottom.is-cases{
    transform: scaleY(-1); 
}

.wave.is-bottom.is-cases svg path {
    fill: #FFF7C3;
}

/* =============================
   SEC-FAQ
   ============================= */

.sec-faq {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  width: 100%;
  box-sizing: border-box;
  padding: 64px 0; /* bottom を 64px → 128px に（ボタン96px + 余白16px × 2）*/
  background-color: #FAFAFA;
}

/* faq */
.faq {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* faq-conts */
.faq-conts {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
    max-width: 800px;
    padding: 0 22px;
    margin-bottom: 64px;
}

/* =============================
   h3-acd 共通
   ============================= */

.h3-acd {
  width: 100%;
  border-radius: 12px;
  box-sizing: border-box;
}

/* =============================
   question（閉じている状態）
   ============================= */

.question {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 16px 40px;
    gap: 24px;
    width: 100%;
    min-height: 96px;
    background: var(--white);
    border: 1px solid var(--primary);
    border-radius: 12px;
    cursor: pointer;
    transition: border-radius 0.3s ease, border 0.3s ease, background 0.3s ease;
}

/* =============================
   acd-inner-pc（PC版）
   ============================= */

.acd-inner-pc {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  flex: 1;
}

/* Q丸（PC） */
.acd-inner-pc .q-scr {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  background: var(--primary);
  border-radius: 50px;
  font-weight: 700;
  font-size: 28px;
  color: var(--white);
  line-height: 1;
  box-sizing: border-box;
}

/* 質問文（PC） */
.acd-inner-pc .q-text {
  flex: 1;
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--primary);
  margin: 0;
}

/* SP版内部はPCで非表示 */
.acd-inner-sp {
  display: none;
}

/* =============================
   矢印（共通）
   ============================= */

.q-arrow {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* デフォルト：上向き表示、下向き非表示 */
.arrow-up   { display: none; }
.arrow-down { display: block;  }

/* 開いているとき：上向き非表示、下向き表示 */
.h3-acd.is-open .arrow-up   { display: block;  }
.h3-acd.is-open .arrow-down { display: none; }

/* =============================
   answer（閉じている状態）
   ============================= */

.answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
    width: 100%;
    box-sizing: border-box;
    padding: 0 32px;
}

.answer-desc {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;        /* 常に中央揃え（開閉問わず） */
    gap: 0;                     /* gapではなくpのpadding-bottomで間隔管理 */
    padding: 0;
    transition: padding 0.35s ease;
    box-sizing: border-box;
    width: 100%;
    background: #EEF8F8;        /* ← 背景をここに移す */
    border-radius: 0 0 12px 12px;
}

.answer-desc p {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.1em;
    color: var(--text);
    width: inherit;
    margin: 0;
    padding:0 22px 16px;
    box-sizing: border-box;
    text-align: left;
}

/* =============================
   h3-acd（開いている状態）PC
   ============================= */

.h3-acd.is-open {
    background: #EEF8F8;
    border: 1px solid var(--primary);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* question（開いているとき）PC */
    .h3-acd.is-open .question {
    border: none;
    border-radius: 12px 12px 0 0;
    background: var(--white);
}

/* answer（開いているとき）PC */
.h3-acd.is-open .answer {
    grid-template-rows: 1fr;
    width: 100%;
}

.h3-acd.is-open .answer-desc {
    align-items: center;
    text-align: center;
    padding: 32px 0 16px 0;
}

/* =============================
SP版（767px以下）
   ============================= */

@media (max-width: 767px) {

  /* sec-faq */
    .sec-faq {
        padding: 48px 0 0 0;
        gap: 48px 16px;
    }

  /* faq */
    .faq {
        width: 100%;
        padding: 0 16px;
        box-sizing: border-box;
    }

    /* faq-conts */
    .faq-conts {
        gap: 16px;
        margin-bottom: 32px;
    }

    /* h3-acd */
    .h3-acd {
        background: transparent;
        border: none;
    }

    /* question（閉じている状態）SP */
    .question {
        padding: 16px 10px;
        gap: 8px;
        min-height: 72px;
        border: 1px solid var(--primary);
        border-radius: 12px;
    }

    /* PC版内部を非表示 */
    .acd-inner-pc {
        display: none;
    }

    /* SP版内部を表示 */
    .acd-inner-sp {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0;
        gap: 8px;
        flex: 1;
        min-height: 48px;
    }

  /* Q丸のwrapper（右padding確保） */
    .q-scr-wrap {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0 8px 0 0;
        flex-shrink: 0;
    }

  /* Q丸本体（SP） */
    .acd-inner-sp .q-scr {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 10px;
        width: 40px;
        height: 40px;
        background: var(--primary);
        border-radius: 50px;
        font-weight: 700;
        font-size: 16px;
        color: var(--white);
        box-sizing: border-box;
        flex-shrink: 0;
    }

    /* 質問文（SP） */
    .acd-inner-sp .q-text {
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0.1em;
        color: var(--primary);
        margin: 0;
        flex: 1;
    }

    /* 矢印エリア（SP） */
    .q-arrow {
        width: 24px;
        height: 24px;
    }

    .arrow-up,
    .arrow-down {
        width: 14px;
        height: auto;
    }

    /* ===========================
        h3-acd（開いている状態）SP
        =========================== */

    .h3-acd.is-open {
        background: #EEF8F8;
        border: 1px solid var(--primary);
        border-radius: 12px;
        gap: 16px;
    }

    .h3-acd.is-open .answer-desc{
      padding: 16px 0 32px 0;
      align-items: center;
      text-align: center;
    }

    .spv{
      padding:0 16px;
    }

    .spv-inner {
      padding: 0 16px;
      box-sizing: border-box;
      gap: 16px;
    }
    .spv-ttl {
      font-size: 24px;
    }
    .spv-img img {
      width: 100px; height: 100px;
    }
    .spv-profile p {
      font-size: 13px;
    }
}

/* =============================
   SPV（監修者）
   ============================= */

.spv {
    width: 100%;
}

.spv-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 1216px;
    padding: 32px 0 64px;
    margin: 0 auto;
    background-color: var(--white);
}

/* タイトル */
.spv-ttl {
    font-weight: 700;
    font-size: 36px;
    line-height: 1.4;
    letter-spacing: 0.1em;
    color: var(--primary);
    text-align: center;
    margin: 0;
}

/* コンテンツ全体 */
.spv-cont {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 872px;
}

@media(min-width:768px){
  .spv-cont {
    padding: 0px 76px;
  }
}

/* 顔写真 */
.spv-img img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* 名前 */
.spv-name {
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.1em;
    color: var(--text);
    text-align: center;
    margin: 0;
}

/* プロフィール文 */
.spv-profile {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.spv p {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: 0.05em;
    color: var(--text);
    text-align: left;
    margin: 0;
}

@media (max-width:767px){
  .spv p {
    padding: 0 48px;
  }

  p.spv-name {
    font-size:16px;
  }
}

.hero__illust {
    display: none;
}

.hero-cta .floating-cta__icon {
  color: var(--white);
}

/* ── PC専用 ── */
@media (min-width: 768px) {
    .sec--hero.wave--bottom {
        background-color: #EDFCFC;
    }

    .sec--hero {
        background-image: url("../img/hero/hero__bg-pc.png");
        background-repeat: no-repeat;
        background-position: left top;
        background-size: 100vw auto;
    }

    .sec--hero .sec__inner {
        margin-top: 2vh;
    }

    .hero__content {
        gap: clamp(12px, 2vw, 16px);
        max-width: 720px;
    }

    .hero__desc {
        font-size: 20px;
        line-height: 22px;
        letter-spacing: 0.1em;
        margin-bottom: 16px;
    }

    .sec--hero__bottom svg {
        display: block;
        width: 100%;
        height: auto;
        position: relative;
        top: -2px;
    }
}

/* =============================
SP版（767px以下）
   ============================= */

@media (max-width: 767px) {

    /* 追従CTAのリンク */
    .floating-cta-wrap .floating-cta__link {
        width: 100%;
        height: auto;
        padding: 10px 16px;
        gap: 10px;
    }

    .floating-cta-wrap .floating-cta__icon {
        font-size: 32px;
    }

    .floating-cta-wrap .floating-cta__lead {
        font-size: 11px;
        line-height: 1.4;
        width: auto;
        height: auto;
    }

    .floating-cta-wrap .floating-cta__label {
        font-size: 18px;
        line-height: 1.4;
        width: auto;
        height: auto;
    }

    /* ---- Hero セクション ---- */
    .sec--hero {
        background: linear-gradient(180deg, var(--bg-b) 80%, var(--primary) 100%);
        padding: 0;
    }

    /* sec__inner */
    .sec--hero .sec__inner {
        padding-top: 20px;
        padding-bottom: 0;
    }

    /* hero__content */
    .hero__content {
        max-width: 100%;
        gap: 8px;
        height: 16vh;
    }

    /* タイトル */
    .hero__title {
        font-size: 24px;
        line-height: 1.5;
        margin-bottom: 16px;
    }

    /* ---- Hero内CTA（SP） ---- */
    /* PCの position:absolute / top:640px / left:50% を全部リセット */
    .hero-cta {
        position: absolute;
        display: block;
        transform: none;
        top: 78%;
        right: 0;
        left: 0;
        margin: 0 auto;
        width: 100%;
        padding: 0 36px;
    }

    /* Hero内CTAのリンク */
    .hero-cta .floating-cta__link {
        width: 100% ;
        height: auto ;
        padding: 12px 16px ;
        gap: 10px ;
        border-radius: 50px ;
        box-sizing: border-box;
    }

    .hero-cta .floating-cta__lead {
        font-size: 11px ;
        line-height: 1 ;
        width: auto ;
        height: auto ;
    }

    .sec--hero__bottom svg {
        top: 0;
    }

    .hero-cta .floating-cta__icon {
        font-size: 32px;
    }

    .hero-cta .floating-cta__label {
        font-size: 18px;
        line-height: 1.4;
        width: auto;
        height: auto;
    }

    /* =============================
       HERO SP
       ============================= */

    /* body */
    body {
        padding-bottom: 96px;
    }

    /* 追従CTA wrap */
    .floating-cta-wrap {
        padding: 10px 16px 20px;
    }

    .floating-cta-wrap .floating-cta__icon {
        font-size: 32px;
        color: var(--white);
    }

    /* 説明文 */
    .hero__desc {
        font-size: 14px;
        line-height: 1.7;
        letter-spacing: 0.05em;
        margin-bottom: 8px;
    }

    /* SP用イラストエリア：SPのみ表示 */
    .hero__illust {
        display: block;
        position: relative;
        width: 100%;
        height: 160px;
        margin-top: 12px;
    }

    .hero__illust-tree {
        position: absolute;
        bottom: 0;
        right: 88px;
        top: 2vh;
        width: 40px;
        height: auto;
    }

    .hero__illust-people {
        position: absolute;
        bottom: 0;
        right: 0;
        top: -8vh;
        width: 80px;
        height: auto;
    }

    /* Wave */
    .sec--hero__bottom {
        margin-top: 12px;
        height: auto;
        background: none;
    }

    .sec--hero__bottom svg {
        top: 0;
    }

/* =============================
   NAV LINKS SP
   ============================= */

    .nav-links {
        margin-top: -20px; /* PCの-27pxを調整 */
    }

    .nav-links__container {
        width: 100%;
        padding: 10px;
        gap: 8px; /* 375px時：(375 - 10×2 - 8) / 2 ≒ 173px → 実測で微調整 */
        display: grid;
        grid-template-columns: 1fr 1fr; /* 2列均等 */
        box-sizing: border-box;
    }

    .nav-links__item {
        width: 100%;       /* gridが幅を管理 */
        height: auto;
        padding: 12px 16px;
        flex-direction: row;          /* 横並び（ラベル＋アイコン） */
        justify-content: space-between; /* ラベル左・アイコン右 */
        align-items: center;
        border-radius: 8px 8px 0 0;
        gap: 0; /* autoはCSSでは使えないのでspace-betweenで代替 */
        box-sizing: border-box;
    }

    /* 数字を非表示 */
    .nav-links__num {
        display: none;
    }

    /* ラベルテキスト */
    .nav-links__label {
        font-size: 14px;
        letter-spacing: 0.1em;
        line-height: 1.4;
        white-space: nowrap;
    }

    /* arrow_forwardアイコンを追加（::after で挿入） */
    .nav-links__item::after {
        content: "arrow_forward";
        font-family: 'Material Symbols Outlined';
        font-size: 18px;
        color: var(--primary);
        font-variation-settings: 'wght' 600, 'opsz' 24;
        line-height: 1;
        flex-shrink: 0;
    }
    /* --- sec-num SP --- */
    .sec-num__inner {
        justify-content: flex-start;
        height: 68px;
        position: absolute;
        z-index: 2;
        top: -32px;
    }


    /* --- sec-about SP --- */
    .sec-about__inner {
        width: 100%; /* 1216px固定を解除 */
        gap: 32px;
        padding: 0 16px;
    }



  .p-pc {
    font-weight: 400;
    font-size: 14px;
    /* padding: 0 22px; */
  }
}

/*————————————————————————————————————————————————————————————————————————

    footer

——————————————————————————————————————————————————————————————————————————*/
footer{
  background: #FFF;
}
.c-btn, .swiper-container, .swiper-wrapper, body {
    position: relative
  }
  .c-headline--centered, .p-appeal__list {
    text-align: center
  }

  .bdrBox, .p-mainvisual, .swiper-container, .vlist ul>li {
    overflow: hidden
  }


  blockquote, q {
    quotes: none
  }

  blockquote:after, blockquote:before, q:after, q:before {
    content: '';
    content: none
  }

  table {
    border-collapse: collapse;
    border-spacing: 0
  }
  .header__inner:after, .header__inner:before, .p-appeal__list__item:after, .p-appeal__list__item:before, .p-area-select__group:after, .p-area-select__group:before, .p-feature__list:after, .p-feature__list:before, .p-flow__body:after, .p-flow__body:before, .p-flow__list:after, .p-flow__list:before, .p-form-area__privacy__links:after, .p-form-area__privacy__links:before, .p-section:after, .p-section:before {
    display: table;
    content: ""
  }

  .header__inner:after, .p-appeal__list__item:after, .p-area-select__group:after, .p-feature__list:after, .p-flow__body:after, .p-flow__list:after, .p-form-area__privacy__links:after, .p-section:after {
    clear: both
  }
  .c-container {
    max-width: 1120px;
    width: 100%;
    margin-right: auto;
    margin-left: auto
  }

  .p-appeal__list__item {
    width: 33%;
    display: inline-block;
    vertical-align: top
  }

  @media(max-width:1199px) {
    .p-appeal__list__item {
      width: 50%;
      display: block;
      margin: 40px auto 0
    }
    .p-appeal__list__item:first-child {
      margin-top: 0
    }
  }

  .p-appeal__list__item--img--job, .p-appeal__list__item--img--privacy {
    display: inline-block
  }

  @media(max-width:1199px) and (max-width:767px) {
    .p-appeal__list__item {
      width: 100%
    }
  }

  .p-appeal__list__item--img {
    float: left
  }

  @media(max-width:1199px) {
    .p-appeal__list__item--img {
      width: 30%
    }
    .p-appeal__list__item--img img {
      display: inline-block
    }
  }

  .p-appeal__list__item--img p {
    color: #1eb8b1;
    font-size: 25px;
    margin-top: -16px
  }

  @media(max-width:767px) {
    .p-appeal__list__item--img--privacy {
      width: 65px;
      height: auto
    }
    .p-appeal__list__item--img--privacy img {
      width: 100%
    }
    .p-appeal__list__item--img--job {
      width: 65px;
      height: auto
    }
    .p-appeal__list__item--img--job img {
      width: 100%
    }
    .p-appeal__list__item--img p {
      font-size: 30px
    }
  }

  .p-appeal__list__item--img p span {
    font-weight: 700;
    font-size: 60px
  }

  .p-appeal__list__item--description {
    width: 64%;
    float: left;
    margin-left: 20px
  }

  @media(max-width:767px) {
    .p-appeal__list__item--img p span {
      font-size: 71px
    }
    .p-appeal__list__item--description {
      width: 60%;
      margin-left: 2%
    }
  }

  .p-appeal__list__item--description h3 {
    display: block;
    line-height: 1.8;
    font-size: 14px;
    text-align: left;
    font-weight: 700
  }

  .p-appeal__list__item--description p {
    line-height: 1.8;
    text-align: left;
    font-size: 12px;
    display: block;
    margin-top: 4px
  }

  @media(max-width:767px) {
    .p-appeal__list__item--description h3, .p-appeal__list__item--description p {
      font-size: 12px
    }
  }


  .header__tell__btn::after, .p-footer__contact__tell:before, .p-mainvisual__bg:after, .p-register__header::after {
    content: ''
  }

  .p-footer__copy {
    background-color: #1eb8b1;
    padding: 13px 0;
    position: relative
  }

  .p-footer__copy__page-top {
    display: block;
    text-align: center;
    width: 50px;
    height: 35px;
    padding-top: 14px;
    border-radius: 7px 7px 0 0;
    background-color: #1eb8b1;
    position: absolute;
    bottom: 40px;
    right: 2.6666666667%
  }

  .p-footer__copy__page-top img {
    width: 16px;
    height: 11px;
    vertical-align: top;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    margin-left: 16px;
  }

  .p-footer__copy__text {
    line-height: 1;
    font-size: 14px;
    text-align: center;
    color: #fff
  }

  .p-footer__appeal {
    padding: 60px 0 50px !important
  }

  .p-footer p,dd ,dt ,h3{
    font-family: 'Hiragino Kaku Gothic ProN';
  }

  @media(max-width:767px) {
    .p-footer__copy {
      font-size: 12px
    }
    .p-footer__appeal {
      padding: 40px 0 !important
    }
  }

  .p-footer__contact {
    padding: 48px 0 !important;
    text-align: center;
  }

  @media(max-width:767px) {
    .p-footer__contact {
      padding: 40px 10px !important;
      background-color: #1eb8b1;
      font-size: 12px
    }
    .p-footer__contact p {
      color: #fff
    }
  }

  .p-footer__contact__tell {
    display: block;
    position: relative;
    text-align: center;
    line-height: 1;
    font-size: 60px;
    font-weight: 700;
    font-family: "Century Gothic", sans-serif;
    color: #1eb8b1;
    vertical-align: middle;
    margin-bottom: 16px
  }

  .p-footer__contact__tell:before {
    display: inline-block;
    width: 74px;
    height: 46px;
    background: url(../img/footer_tellicon.png) no-repeat;
    background-size: cover;
    margin-right: 12px
  }

  @media(max-width:767px) {
    .p-footer__contact__tell {
      vertical-align: middle;
      line-height: 1;
      font-family: Century Gothic, sans-serif;
      font-size: 30px;
      height: auto
    }
    .p-footer__contact__tell::before {
      width: 45px;
      height: 30px;
      background: url(../img/sp_footer_tellicon.png) no-repeat;
      background-size: cover;
      vertical-align: top
    }
    .p-form-area .swiper-slide {
      visibility: hidden
    }
  }

  .p-form-area .swiper-container {
    transition-property: height;
    transition-duration: .4s;
    transition-timing-function: cubic-bezier(.165, .84, .44, 1)
  }

  .p-form-area .swiper-slide {
    width: 100%
  }

  .p-form-area__footer {
    margin: 70px 0
  }

  @media(max-width:767px) {
    .p-form-area .swiper-slide-active {
      visibility: visible
    }
    .p-form-area__footer {
      margin: 40px 0
    }
    .p-form-area__scene {
      margin-top: 4px
    }
  }

  .p-form-area__scene__item {
    font-size: 15px;
    border-bottom: 1px solid #e5e5e5
  }

  .p-form-area__privacy {
    display: none;
    text-align: center;
    margin-top: 25px
  }

  .p-form-area__privacy.is-show {
    display: block
  }

  @media(max-width:767px) {
    .p-form-area__privacy {
      margin-top: 0
    }
    .p-form-area__privacy__notice {
      margin-top: 30px
    }
  }

  .p-form-area__privacy__links {
    margin-top: 10px
  }

  @media(max-width:767px) {
    .p-form-area__privacy__links {
      margin-top: 0
    }
  }

  .p-form-area__links {
    margin-top: 34px;
    text-align: center
  }

  @media(max-width:767px) {
    .p-form-area__links {
      margin-top: 5px;
      padding: 0 3%
    }
  }

  .p-form-area__links__btns {
    margin-top: 20px
  }

  @media(max-width:767px) {
    .p-form-area__links__btns {
      margin-top: 10px
    }
  }

  .p-form-area__links__privacy {
    margin-top: 16px
  }

  @media(max-width:767px) {
    .p-form-area__links__privacy {
      margin-top: 4px
    }
    .p-form-area__links .c-notice {
      text-align: left
    }
  }

  .p-form-area__notes {
    margin-top: 15px;
    padding-right: 10px;
    padding-left: 10px
  }

  @media(max-width:767px) {
    .p-form-area__notes {
      margin-top: 0
    }
  }

  .p-form-errors {
    margin-top: 70px;
    border: 1px solid #f86a6a;
    background-color: #fef0f0;
    padding: 15px;
    color: #f86a6a;
    text-align: center
  }

  .p-form-item {
    display: table;
    width: 100%
  }

  @media(max-width:767px) {
    .p-form-errors {
      margin-top: 35px;
      margin-right: 10px;
      margin-left: 10px;
      padding: 6px;
      font-size: 12px
    }
    .p-form-item {
      border-bottom: 0
    }
  }

  .p-form-item__body, .p-form-item__headline {
    display: table-cell;
    border-bottom: 1px solid #e5e5e5;
    min-height: 100px;
    color: #555
  }

  .p-form-item__body__innerwraper, .p-form-item__headline__innerwraper {
    padding: 34px 10px 34px 0
  }

  .p-form-item__body__innerwraper+.p-form-item__body__innerwraper, .p-form-item__body__innerwraper+.p-form-item__headline__innerwraper, .p-form-item__headline__innerwraper+.p-form-item__body__innerwraper, .p-form-item__headline__innerwraper+.p-form-item__headline__innerwraper {
    border-top: 1px solid #e5e5e5
  }

  .p-form-item__body__margintop__label, .p-form-item__headline__margintop__label {
    width: 180px;
    margin: 17px 0 0 !important
  }

  @media(max-width:767px) {
    .p-form-item__body__innerwraper, .p-form-item__headline__innerwraper {
      padding: 0
    }
    .p-form-item__body__margintop, .p-form-item__headline__margintop {
      border-top: 1px solid #e5e5e5;
      border-bottom: 1px solid #e5e5e5
    }
    .p-form-item__body__margintop__label, .p-form-item__headline__margintop__label {
      width: 100%;
      margin: 0 !important;
      padding: 15px 10px;
      box-sizing: border-box
    }
    .p-form-item__body__margintop__label+.p-form-item__body__margintop__label, .p-form-item__body__margintop__label+.p-form-item__headline__margintop__label, .p-form-item__headline__margintop__label+.p-form-item__body__margintop__label, .p-form-item__headline__margintop__label+.p-form-item__headline__margintop__label {
      border-top: 1px solid #e5e5e5
    }
    .p-form-item__body__margintop__label span span, .p-form-item__headline__margintop__label span span {
      padding-left: 10px
    }
    .p-form-item__body, .p-form-item__headline {
      display: block;
      min-height: 32px;
      height: auto
    }
  }

  .p-form-item__headline {
    width: 27%;
    padding: 40px 0 40px 24px;
    background: #fafafa;
    line-height: 1;
    font-weight: 600
  }

  @media(max-width:767px) {
    .p-form-item__headline {
      width: 100%;
      background-color: #f1f1f1;
      padding: 10px;
      line-height: 1;
      font-weight: 600;
      font-size: 12px
    }
  }

  .p-form-item__body {
    width: 72%;
    vertical-align: middle;
    padding-left: 40px
  }

  @media(max-width:767px) {
    .p-form-item__body {
      width: 100%;
      padding: 18px 10px
    }
    .p-form-item__body--cat {
      padding: 0
    }
  }

  .p-form-item__body--pt-none {
    padding-top: 0
  }

  @media(min-width:1200px) {
    .p-form-item__body--has-large-content {
      padding-top: 30px;
      padding-bottom: 30px
    }
  }

  .p-form-item__body.is-error {
    background-color: #ffe5e5
  }

  .p-form-item__body__subtitle {
    font-weight: 600
  }

  @media(max-width:767px) {
    .p-form-item__body__subtitle {
      padding: 15px 10px
    }
    .p-form-item__body__subtitle--has-arrow {
      position: relative
    }
    .p-form-item__body__subtitle--has-arrow:after {
      content: '';
      display: block;
      width: 11px;
      height: 7px;
      background: url(../img/icon-arrow-subtitle.png) no-repeat;
      background-size: cover;
      position: absolute;
      top: 50%;
      right: 10px;
      margin-top: -3px;
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg)
    }
    .p-form-item__body__subtitle--has-arrow.is-show:after {
      -webkit-transform: rotate(0);
      transform: rotate(0)
    }
    .p-form-item__body__has-child {
      display: none
    }
    .p-form-item__body__has-child.is-show {
      display: block
    }
  }

  .p-form-item__single-question {
    width: 100%;
    padding: 30px;
    box-sizing: border-box;
    background: #fafafa
  }

  @media(max-width:767px) {
    .p-form-item__single-question {
      padding: 10px 10px 6px;
      background: 0
    }
    .p-form-item__names+.p-form-item__names {
      margin-top: 10px
    }
  }

  .p-form-item__more {
    display: none
  }

  .p-form-item__more.is-active {
    display: block
  }

  .p-form-item--has-underline {
    border-bottom: 1px solid #f5f5f5
  }

  .p-form-item:last-child .p-form-item__body, .p-form-item:last-child .p-form-item__headline {
    border-bottom: 0
  }

  .p-form-item__from-symbol {
    display: inline;
    margin: 0 10px
  }

  @media(max-width:767px) {
    .p-form-item__from-symbol {
      margin: 0 2px
    }
    .p-input-mailmagazine {
      margin-left: -10px
    }
    .p-input-mailmagazine .c-label--important {
      padding-left: 1.8em
    }
    .p-address-input .c-input-item {
      width: 100%
    }
  }

  .p-form__title {
    padding: 16px 22px;
    background: #1eb8b1;
    line-height: 1;
    font-size: 18px;
    color: #fff
  }

  .p-form__title__step-num {
    margin-right: 10px;
    font-family: Helvetica, "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: 700
  }

  @media(max-width:767px) {
    .p-form__title {
      font-size: 14px
    }
    .p-form-item {
      font-size: 12px
    }
  }

  .header {
    border-top: 3px solid #1eb8b1;
    line-height: 1;
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, .1);
    position: relative;
    z-index: 2
  }

  @media(max-width:1199px) {
    .header__inner {
      padding: 0 10px;
      box-sizing: border-box
    }
  }

  .header__main {
    width: 682px;
    float: left;
    padding: 25px 0 27px
  }

  @media(max-width:1199px) {
    .header__main {
      text-align: center;
      width: 100%;
      padding: 10px 0;
      margin: 0 auto;
      float: none
    }
  }

  .header__main__logo {
    display: inline-block;
    vertical-align: text-bottom;
    width: 286px;
    margin-bottom: -1px
  }

  @media(max-width:1199px) {
    .header__main__logo {
      width: 100%;
      height: auto
    }
    .header__main__logo img {
      width: 181px
    }
  }

  .header__main__catch {
    display: inline-block;
    vertical-align: middle;
    width: 386px;
    margin-left: 4px
  }

  @media(max-width:1199px) {
    .header__main__catch {
      width: 100%;
      margin-top: 14px;
      margin-left: 0
    }
  }

  @media(max-width:979px) {
    .header__main__catch {
      margin-top: 8px
    }
  }

  .header__main__catch p {
    font-size: 16px
  }

  @media(max-width:767px) {
    .header__main__catch p {
      font-size: 10px
    }
  }

  .header__tell {
    width: 436px;
    float: right;
    margin-top: 20px
  }

  @media(max-width:1199px) {
    .header__tell {
      width: 230px;
      margin-top: 27px;
      text-align: right;
      display: none
    }
    .header__tell--sp {
      display: none
    }
  }

  .header__tell--sp {
    margin-top: 10px
  }

  .header__tell__btn, .header__tell__number {
    display: inline-block;
    vertical-align: middle
  }

  .header__tell__number a {
    padding-left: 38px;
    font-size: 24px;
    color: var(--primary);
    font-family: "Century Gothic", sans-serif;
    font-weight: 700;
    background: url(../img/header_tellicon.png) left center no-repeat
  }

  .header__tell__btn {
    border: 1px solid var(--primary);
    font-size: 12px;
    color: var(--primary);
    margin-left: 5px;
    padding: 3px 12px 3px 3px;
    position: relative
  }

  .header__tell__btn::after {
    display: block;
    width: 4px;
    height: 7px;
    background: url(../img/arrow_2.png) center center no-repeat;
    background-size: cover;
    position: absolute;
    top: 50%;
    right: 6px;
    margin-top: -3px
  }

  .p-mainvisual, .p-mainvisual__content {
    position: relative
  }

  @media(max-width:1199px) {
    .header__tell__btn {
      display: none
    }
  }

  .header__tell p {
    font-size: 12px
  }

  .p-hidden-city-list {
    display: none
  }

  @media(max-width:767px) {
    .p-hope-item {
      width: 100%;
      display: block
    }
  }

  .p-hope-item+.p-hope-item {
    margin-top: 10px;
    display: none
  }

  .p-hope-item+.p-hope-item.is-active {
    display: block
  }

  .p-hope-item__label {
    vertical-align: middle
  }

  @media(max-width:767px) {
    .p-hope-item__label {
      width: 100%;
      display: block
    }
    .p-hope-item__select {
      margin-left: 0;
      width: 87%
    }
    .p-hope-item__select span {
      width: 100%;
      display: block
    }
    .p-hope-item__select span select {
      width: 100%
    }
  }

  .p-increase-form {
    display: none;
    padding: 16px 20px
  }

  .p-increase-form.is-active {
    display: block
  }

  .p-increase-form.is-valid {
    background: #b5f0ff;
    border-radius: 5px
  }

  .p-increase-form+.p-increase-form {
    margin-top: 20px
  }

  .p-increase-form__button {
    display: none;
    margin-left: 10px !important
  }

  .p-increase-form__button.is-active, .p-job-career__time {
    display: inline-block
  }

  .p-increase-form__button .c-btn {
    width: 125px;
    height: 25px;
    background: #005ead;
    border-radius: 3px;
    color: #fff;
    border: 0
  }

  @media(max-width:767px) {
    .p-increase-form {
      padding: 8px 10px
    }
    .p-increase-form__button {
      margin-left: 5px !important
    }
    .p-increase-form__button .c-btn {
      width: 30px;
      height: 30px;
      box-sizing: border-box
    }
  }

  .p-increase-form__button__icn {
    display: inline-block;
    vertical-align: baseline;
    padding-bottom: 1px
  }

  .p-increase-form .c-input-item+.c-input-item {
    margin-left: 14px
  }

  @media(max-width:767px) {
    .p-increase-form__button__icn {
      vertical-align: text-top
    }
    .p-increase-form__button__icn img {
      width: 14px;
      height: 14px
    }
    .p-increase-form .c-input-item+.c-input-item {
      margin-left: 10px
    }
  }

  .p-job-career__time {
    width: 278px
  }

  @media(max-width:767px) {
    .p-job-career__time {
      width: 100%
    }
  }

  .p-job-career__time+.p-job-career__time {
    width: 245px
  }

  .p-mainvisual--bg-primary {
    background: linear-gradient(to right, #6a78fd 0, #6a78fd 50%, #a1dce2 51%, #a1dce2 100%)
  }

  .p-mainvisual__brand {
    position: absolute;
    top: 64px;
    left: 0;
    z-index: 2
  }

  @media(max-width:979px) {
    .p-mainvisual__brand {
      width: 100%;
      top: 18px;
      left: 0;
      text-align: center
    }
  }

  .p-mainvisual__brand__catch {
    line-height: 1;
    font-weight: 600;
    font-size: 26px;
    color: #fff
  }

  @media(max-width:767px) {
    .p-job-career__time+.p-job-career__time {
      width: 100%;
      margin-top: 10px
    }
    .p-mainvisual__brand__catch {
      font-size: 14px
    }
  }

  .p-mainvisual__brand__img {
    margin-top: 16px
  }

  .p-mainvisual__appeal {
    position: absolute;
    top: 248px;
    left: 0;
    z-index: 2
  }

  @media(max-width:979px) {
    .p-mainvisual__appeal {
      top: 29%;
      left: 8.5333333333%
    }
  }

  .p-mainvisual__appeal__list__item {
    position: relative;
    padding-left: 44px;
    line-height: 1;
    font-weight: 600;
    font-size: 20px;
    color: #fff
  }

  @media(max-width:979px) {
    .p-mainvisual__appeal__list__item {
      padding-left: 36px;
      line-height: 1.6
    }
  }

  @media(max-width:767px) {
    .p-mainvisual__brand__img {
      width: 68%;
      margin: 8px auto 0
    }
    .p-mainvisual__brand__img img {
      width: 100%
    }
    .p-mainvisual__appeal__list__item {
      padding-left: 21px;
      font-size: 12px
    }
  }

  .p-mainvisual__appeal__list__item+.p-mainvisual__appeal__list__item {
    margin-top: 20px
  }

  @media(max-width:767px) {
    .p-mainvisual__appeal__list__item+.p-mainvisual__appeal__list__item {
      margin-top: 10px
    }
  }

  @media(max-width:320px) {
    .p-mainvisual__appeal {
      left: 4%
    }
    .p-mainvisual__appeal__list__item {
      line-height: 1.5;
      font-size: 11px
    }
    .p-mainvisual__appeal__list__item+.p-mainvisual__appeal__list__item {
      margin-top: 7px
    }
  }

  .p-mainvisual__appeal__list__item--check-y {
    position: relative
  }

  .p-mainvisual__appeal__list__item--check-y:before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    margin-right: 16px;
    background: url(../img/icn-check.png) no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0
  }

  @media(max-width:979px) {
    .p-mainvisual__appeal__list__item--check-y:before {
      margin-top: 5px
    }
  }

  @media(max-width:767px) {
    .p-mainvisual__appeal__list__item--check-y:before {
      margin-top: 4px;
      width: 12px;
      height: 12px
    }
  }

  @media(max-width:320px) {
    .p-mainvisual__appeal__list__item--check-y:before {
      margin-top: 2px
    }
  }

  .p-mainvisual__appeal__list__item strong {
    color: #fffb86
  }

  .p-mainvisual__bg {
    background: url(../img/bg-mainvisual.jpg) center center no-repeat;
    background-size: cover
  }

  @media(max-width:979px) {
    .p-mainvisual__bg {
      background: url(../img/sp_mainvisual.jpg) center center no-repeat;
      background-size: cover
    }
  }

  @media(max-width:767px) {
    .p-mainvisual__bg {
      background: url(../img/sp_mainvisual.jpg) top center no-repeat;
      background-size: cover
    }
  }

  .p-mainvisual__bg:after {
    display: block;
    padding-top: 47.3214285714%
  }

  @media(max-width:979px) {
    .p-mainvisual__bg:after {
      padding-top: 76.0563380282%
    }
  }

  .strongborder {
    padding-bottom: 2px;
    color: #f86a6a;
    border-bottom: 2px solid #f86a6a
  }

  .p-register__header {
    position: relative;
    background: #f86a6a;
    padding: 34px 0
  }

  .p-register__header::after {
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 45px 0;
    border-color: #f86a6a transparent transparent;
    position: absolute;
    left: 50%;
    margin-left: -45px;
    margin-top: 26px
  }

  .p-slide__pager .is-current:after, .p-slide__pager__step:after {
    content: '';
    height: 2px;
    left: 0;
    bottom: 0
  }

  .p-register__header__headline {
    line-height: 1;
    font-weight: 700;
    font-size: 45px;
    color: #fff
  }

  @media(max-width:767px) {
    .p-register__header {
      padding: 25px 0
    }
    .p-register__header::after {
      border-width: 14px 25px 0;
      margin-top: 25px;
      margin-left: -24px
    }
    .p-register__header__headline {
      font-size: 30px
    }
  }

  .p-section {
    padding: 94px 0
  }

  .p-slide {
    width: 100%
  }

  .p-slide__pager {
    width: 100%;
    line-height: 1;
    font-size: 0;
    margin: 90px 0 40px
  }

  @media(max-width:767px) {
    .p-section {
      padding: 40px 20px
    }
    .p-slide__pager {
      padding: 0 10px;
      margin: 45px 0 20px;
      box-sizing: border-box
    }
  }

  .p-slide__pager .is-current {
    color: #1eb8b1
  }

  .p-slide__pager .is-current:after {
    display: block;
    width: 100%;
    background-color: #1eb8b1;
    position: absolute
  }

  .p-slide__pager__step {
    width: 25%;
    display: inline-block;
    padding: 0 0 12px;
    margin: 0;
    border: 0;
    position: relative;
    box-sizing: border-box;
    font-family: Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
    font-weight: 800;
    font-size: 20px;
    color: #b4b4b4
  }

  .p-slide__pager__step:after {
    display: block;
    width: 100%;
    background-color: #b4b4b4;
    position: absolute
  }

  .p-slide__pager__step+.p-slide__pager__step {
    border-left: 20px solid transparent
  }

  @media(max-width:767px) {
    .p-slide__pager__step {
      padding-bottom: 8px;
      font-size: 14px
    }
    .p-slide__pager__step+.p-slide__pager__step {
      border-left: 6px solid transparent
    }
  }

  .p-slide__pager__step__number {
    margin-left: 6px;
    font-size: 30px
  }

  @media(max-width:767px) {
    .p-slide__pager__step__number {
      margin-left: 5px;
      font-size: 21px
    }
    .u-device--pc {
      display: none !important
    }
  }

  .u-device--tb {
    display: none
  }

  @media(max-width:979px) {
    .u-device--tb {
      display: block !important
    }
  }

  .u-device--sp {
    display: none !important
  }

  @media(max-width:767px) {
    .u-device--sp {
      display: block !important
    }
  }

  .u-device--sp--ib {
    display: none
  }

  @media(max-width:767px) {
    .u-device--sp--ib {
      display: inline-block !important
    }
  }

  .sp {
    display: none
  }

  .pc {
    display: block
  }

  @media(max-width:767px) {
    .sp {
      display: block
    }
    .pc {
      display: none
    }
  }

  div.contents {
    position: relative;
    width: 1100px;
    padding: 20px 10px 50px;
    margin: -52px auto 0;
    background: #fff;
    border: 0;
    border-bottom-width: 0
  }

  .bdrBox, .first dl {
    border: 1px solid #cdcdcd
  }

  div.contents>section {
    margin: 50px 0
  }

  div.contents>section>h2 {
    display: block
  }

  .bdrBox {
    border-top-width: 0;
    padding: 10px
  }

  .vlist ul {
    float: left;
    padding-top: 10px
  }

  .vlist ul.left {
    width: 510px;
    margin-right: 15px
  }

  .vlist ul.right {
    width: 530px
  }

  .vlist ul.left>li>div {
    width: 70px
  }

  .vlist ul.right>li>div {
    width: 70px;
    margin-right: 8px
  }

  .vlist ul.left>li>p {
    width: 440px
  }

  .vlist ul.right>li>p {
    width: 444px
  }

  .vlist ul>li>p span {
    background: #fffb95
  }

  .attention {
    float: left;
    width: 100%;
    padding: 20px 0
  }

  .attention p {
    color: #ff4f1c;
    font-size: 23px;
    font-weight: 700;
    text-align: center;
    margin-top: 20px
  }

  .attention p br {
    display: none
  }

  .attention p.bgRadius {
    color: #fff;
    font-weight: 400;
    line-height: 49px;
    width: 940px;
    height: 49px;
    margin: 0 auto;
    text-align: center;
    letter-spacing: 1px
  }

  .parttime>h2 {
    background: #68c137 !important;
    border-top: 3px solid #3f7322 !important
  }

  .parttime .attention p.bgRadius {
    background: #96d872
  }

  @media(max-width:979px) {
    div.contents {
      position: relative;
      width: 100%;
      margin: 0 auto;
      padding: 0 0 50px;
      background: #fff;
      border-bottom-width: 0
    }
  }

  div.contents>section {
    position: relative;
    margin-top: 50px
  }

  div.contents>section>h2 {
    font-size: 20px;
    color: #fff;
    width: 100.5%;
    left: -.5%;
    background: #06b3b4;
    border-top: 3px solid #046465;
    padding: .5em 10px .5em 25px;
    position: relative
  }

  div.contents>section>h2:after, div.contents>section>h2:before {
    content: " ";
    position: absolute;
    left: 0
  }

  div.contents>section>h2:before {
    width: 22px;
    height: 22px;
    top: 0;
    background: url(../../025/images/title_tri.png) no-repeat
  }

  div.contents>section>h2:after {
    bottom: -5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 5px 5px 0;
    border-color: transparent #000 transparent transparent
  }

  div.contents>section:first-child {
    margin-top: 0
  }

  div.contents>section.first>div {
    background: #fff;
    margin-top: 20px
  }

  div.contents>section.first>div>div>h2, div.contents>section.first>div>h2 {
    color: #fff;
    font-size: 16px;
    text-align: center;
    padding: 6px 0
  }

  .clm_L>h2, .clm_R>h2 {
    background: #6d6d6d
  }

  .clm_C>h2 {
    background: #06b3b4
  }

  .first dl {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-top-width: 0;
    padding: 15px 10px 15px 25%
  }

  .first dd, .first dt {
    display: table-cell;
    vertical-align: top
  }

  .first dt {
    width: 64px;
    text-align: center
  }

  .clm_C ul li, .vlist ul>li {
    width: 100%;
    position: relative
  }

  .first dd {
    padding-left: 20px
  }

  .first dd h3 {
    color: #f86a6a;
    font-size: 16px;
    line-height: 1.5
  }

  .first dd p {
    color: #333;
    font-size: 12px;
    line-height: 1.5;
    padding-top: .5em
  }

  .clm_C ul {
    border: 1px solid #cdcdcd;
    border-top-width: 1px
  }

  .fulltime .vlist ul>li, .vlist ul>li {
    border-bottom: 2px dotted #68b2d9
  }

  .clm_C ul li {
    text-align: center
  }

  .clm_C ul li.step1 {
    background: #fbfbfb;
    padding: 15px 10px 20px
  }

  .clm_C ul li.step2 {
    background: #efefef;
    padding: 15px 10px 20px
  }

  .clm_C ul li.step3 {
    background: #dedede;
    padding: 15px 10px 20px
  }

  .clm_C ul li h2 {
    color: #333;
    font-size: 16px;
    text-align: center
  }

  .clm_C ul li h2>span {
    background: #ffad08;
    color: #362000;
    padding: .25em .5em;
    margin-right: .5em
  }

  .clm_C ul li h2>span span {
    font-size: 10px;
    font-size: 1rem
  }

  .clm_C ul li h2>strong {
    display: block;
    margin-top: .75em
  }

  .clm_C ul li p {
    display: inline-block;
    margin: auto;
    color: #f86a6a;
    font-size: 16px;
    line-height: 1.2;
    padding-top: 15px
  }

  .btnBox {
    margin-top: 30px;
    text-align: center
  }

  .btnBox a {
    display: inline-block;
    max-width: 360px;
    margin: auto
  }

  .btnBox img {
    max-width: 100%;
    height: auto
  }

  .vlist ul>li {
    display: table;
    table-layout: fixed;
    padding-bottom: 10px;
    margin-bottom: 10px
  }

  .vlist ul>li>div, .vlist ul>li>p {
    display: table-cell;
    vertical-align: top;
    float: left
  }

  .vlist ul>li>div {
    width: 40px;
    font-size: 20px;
    text-align: center
  }

  .vlist ul>li>p {
    font-size: 14px;
    line-height: 1.75;
    padding-top: 4px;
    padding-left: 1.5%;
    padding-right: 1.5%
  }

  @media(max-width:979px) {
    .vlist ul.left>li>div, .vlist ul.right>li>div {
      width: 20px !important;
      margin-right: 8px
    }
    .vlist ul.left {
      width: 100%;
      margin-right: 15px
    }
    .vlist ul.right {
      width: 100%
    }
    .vlist ul.left>li>p, .vlist ul.right>li>p {
      width: 90%
    }
    .attention p.bgRadius {
      width: 95%;
      margin: 0 auto;
      display: block;
      background: #a3dd84;
      font-size: 20px;
      padding: 10px!important;
      line-height: inherit;
      height: auto
    }
  }

  .fulltime>h2, .parttime>h2 {
    font-size: 18px;
    padding: .5em 5px .5em 18px
  }

  .fulltime>h2 {
    background: #1e8ac2;
    color: #fff;
    width: 100.5%;
    position: relative;
    left: -.5%;
    border-top: 3px solid #046465
  }

  .fulltime>h2:after, .fulltime>h2:before {
    content: " ";
    position: absolute;
    left: 0
  }

  .fulltime ul>li>div {
    color: #68b2d9
  }

  .fulltime .attention p.bgRadius {
    background: #68b2d9
  }

  .fulltime>h2:before, .parttime>h2:before {
    background: url(../../025/images/title_tri.png) no-repeat;
    top: 0
  }

  .fulltime>h2:before {
    width: 22px;
    height: 22px
  }

  .fulltime>h2:after {
    bottom: -5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 5px 5px 0;
    border-color: transparent #000 transparent transparent
  }

  .parttime>h2 {
    color: #fff;
    width: 100.5%;
    position: relative;
    left: -.5%
  }

  .parttime>h2:after, .parttime>h2:before {
    content: " ";
    position: absolute
  }

  .p-feats__item, .p-s-section__inner {
    padding-right: 20px;
    padding-left: 20px
  }

  .parttime .vlist ul>li {
    border-bottom: 2px dotted #a3dd84
  }

  .parttime ul>li>div {
    color: #a3dd84
  }

  .parttime>h2:before {
    width: 22px;
    height: 22px;
    left: 0
  }

  .parttime>h2:after {
    left: 0;
    bottom: -5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 5px 5px 0;
    border-color: transparent #000 transparent transparent
  }

  .p-s-section__inner h2 {
    width: 100%;
    text-align: center;
    display: block
  }

  .p-s-section {
    padding-top: 90px
  }

  .p-s-section__inner {
    max-width: 1160px;
    margin-right: auto;
    margin-left: auto
  }

  .p-s-section__inner h2 img {
    display: inline-block
  }

  .p-feats__inner {
    margin-right: -20px;
    margin-left: -20px
  }

  .p-feats__inner:before {
    display: table;
    content: ""
  }

  .p-feats__item {
    width: 25%;
    float: left;
    position: relative
  }

  .p-feat__caption {
    margin-top: 4px
  }

  .p-feat__h {
    margin-top: 15px;
    font-size: 16px;
    font-weight: 600;
    text-align: center
  }

  .p-feat__lead {
    margin-top: 15px;
    font-size: 14px
  }

  .p-feats__item+.p-feats__item:before {
    left: 0;
    display: block;
    width: 1px;
    height: 100%;
    position: absolute;
    top: 0;
    background-color: #e5e5e5;
    content: ''
  }

  @media(max-width:979px) {
    .p-s-section__inner {
      max-width: auto;
      padding-right: 20px;
      padding-left: 20px;
      margin-right: auto;
      margin-left: auto
    }
    .p-s-section {
      padding-top: 30px;
      padding-bottom: 35px
    }
    .p-s-section--hpcr .p-feats {
      display: block;
      margin-top: 20px
    }
    .p-feats__item {
      width: 100%;
      float: none;
      position: relative;
      padding: 20px;
      border-bottom: 1px solid #eee
    }
    .p-feats__item+.p-feats__item:before {
      display: none
    }
    .p-s-section--hpcr .p-feats {
      padding: 0 20px
    }
  }

  .hpcr_link a, .p-feat a {
    color: #07a7f7;
    border: 2px solid #07a7f7;
    vertical-align: middle;
    padding: 15px 0;
    margin-top: 15px;
    font-family: "UD Shin Go Medium";
    font-size: 14px;
    margin-bottom: 20px;
    border-radius: 100px;
    display: block;
    cursor: pointer;
    text-align: center;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
  }

  .hpcr_link a:active, .hpcr_link a:link, .hpcr_link a:visited, .p-feat a:active, .p-feat a:link, .p-feat a:visited {
    color: #07a7f7
  }

  .hpcr_link a:hover, .p-feat a:hover {
    color: #fff;
    border: 2px solid #07a7f7;
    background-color: #07a7f7;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
  }

  @media(max-width:767px) {
    .p-feat a {
      padding: 10px 0;
      margin-top: 10px
    }
  }



  .add__company__info {
    padding: 12px;
    margin: 12px;
    display: flex;
    justify-content: center
  }
  .add__company__info dl {
    font-size: 12px;
    line-height: 180%;
    letter-spacing: .01rem;
    color: #089c95;
    width: 91%
  }
  .add__company__info dl dt {
    font-weight: bold
  }
  .add__company__link {
    width: 100%;
    padding-bottom: 12px;
    background-color: #FFF;
    text-align: center;
    border-top: solid 1px #1eb8b1;
    font-size: 12px
  }
  add__company__link a:first-child {
    margin-left: 0
  }
    .add__company__link a {
    margin-left: 30px;
    color: #1eb8b1
  }

  .add__company__link a:hover {
    text-decoration: underline
  }

    @media(min-width:767px) {
        .add__company__info {
        margin: 12px 24px
        }

        .add__company__info dl {
        width: 74%
        }
    }
    @media(min-width:1199px) {
        .add__company__info {
        margin: 12px auto;
        white-space: nowrap
        }

        .add__company__info dl {
        width: 820px
        }

        .add__company__info dl dt {
        float: left;
        clear: left
        }
    }

    .logo_group{padding: 5rem 0rem 0rem 0rem;}
    .logo{text-align: center;margin: 20px;border: solid 0.2rem #007782;border-radius: 0.8rem;box-shadow: 0px 4px 0px rgb(172 220 225 / 60%);overflow: hidden;padding: 5px;}
    .img_logo_tcb img{width: 20%;}
    .img_logo_rize img{width: 39%;}
    .img_logo_rize_man img{width: 58%;}
    .img_logo_dio img{width: 31%;}
    .img_logo_gorilla img,.img_logo_sbc img{width: 22%;}
    .img_logo_dio img,.img_logo_gorilla img,.img_logo_sbc img{padding: 0px 9px 7px;
}


    @media (min-width:767px){
    .logo_group{padding-top: 8rem 0rem 0rem 0rem;}
    .logo{margin: 0.5vw 4.5vw 0vw;display: flex;flex-wrap: wrap;align-items: center;justify-content: center;padding: 20px;}
    .img_logo_tcb img{width: 9vw;}
    .img_logo_rize img{width: 14vw;}
    .img_logo_rize_man img{width: 22vw;}
    .img_logo_dio img{width: 14vw;}
    .img_logo_gorilla img,.img_logo_sbc img{width: 12vw;}
    .img_logo_dio img,.img_logo_gorilla img,.img_logo_sbc img{padding: 0px 20px;}
  }

/* フッターをabsoluteの基準にする */
.p-footer {
    position: relative;
}

h2.noto {
    font-family: 'Noto Sans JP';
    font-size: 28px;
    color: var(--primary);
    font-weight: 700;
}

.c--mgb--24 {
    margin-bottom: 24px;
}

/* =============================
   SEC-CASES SP（case-card 並び替え対応）
   ============================= */
@media (max-width: 767px) {

  /* ── case-card を flex + order で並び替え ── */
  .case-card {
    flex-direction: column;
    gap: 24px;
    width: 100%;
    margin-inline: auto;        /* ★ 中央寄せ */
    box-sizing: border-box;
  }

  /* 1) タイトル → 最初 */
  .case-card > .case-card__title {
    order: 1;
    width: 100%;
    box-sizing: border-box;
  }

  /* 2) ビジュアル（img + comparison）→ 2番目 */
  .case-card > .case-card__visual {
    order: 2;
  }

  /* 3) テキストエリア → 3番目 */
  .case-card > .case-card__body {
    order: 3;
  }

  /* ── catch（「年収大幅UP！」）を SP で非表示 ── */
  .case-card__catch {
    display: none;
  }

  /* ── comparison に点線ボーダー装飾 ── */
  .comparison {
    position: relative;
    border-top: 1px dashed #A9DADD;
    border-bottom: 1px dashed #A9DADD;
    padding: 32px 0;
    margin: 0 24px;
    width: 100%;
    box-sizing: border-box;
  }
}

/* ── PC では title を横レイアウトに統合 ── */
@media (min-width: 768px) {

  /* PC: case-card は横並び（既存の row レイアウト維持） */
  .case-card {
    flex-direction: row;
  }

  /* PC: title は case-card__body 内にいたときと同じ見た目にする */
  .case-card > .case-card__title {
    display: none; /* PC では直下の title を非表示 */
  }
}

  .bg-g{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

@media (max-width: 767px) {
  .sec-jobs{
    background: none;
    padding: 40px 0 0;
  }
  .sec-cases-container{
    background: none;
  }

  .sec-faq{
    background: none;
  }

  .bg-y{
    background-color: #FFF7C3;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .bg-g{
      background-color: #FAFAFA;
      padding-bottom: 64px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
  }

  .bg-gd{
      width:100%;
      background: linear-gradient(90deg, rgba(0, 178, 179, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%), linear-gradient(180deg, var(--white) 0%, #80D9D9 50%, var(--white) 100%);
  }

  .only-pc{
    display:none;
  }
}

a {
  width:fit-content;
}

@media (min-width: 768px) and (max-width: 1000px) {
    .sec--hero {
        background-position: left calc((1000px - 100vw) * 0.5);
    }
}