/*
Theme Name: hrinfinity
Description: HRinfinity様のテンプレートです
Version:1.0
Author:作成者名
*/


/* =====================================
  Reset / Base
===================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body{
  overflow-x: hidden;
}


body{
  width: 100%;
  overflow-x: hidden; /* 横スクロール防止 */
  background: linear-gradient(-16deg, #004A7E, #001E56);
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  color: #3B4455;
}

:root{
  /* フォントスケール */
  --b-pcp-min: 768px;
  --b-pcp-range: 1152; /* 1920 - 768 */

  /* 共通色 */
  --ink: #0f2a52;
  --dash: #d9dbe1;

  /* Header nav */
  --nav-h: 46px;
  --nav-gap: clamp(18px, 2.6vw, 32px);

  /* Footer */
  --ink-footer: #ffffff;
  --ink-footer-sub: rgba(255,255,255,.78);
  --pad-x: clamp(24px, 5vw, 80px);
  --gap-lg: clamp(16px, 2.2vw, 42px);
}

.u-nowrap{
  white-space: nowrap;
  text-wrap: nowrap;
  hyphens: none;
}

/* =====================================
   Fluid Type
===================================== */
.fluid{
  --b: var(--b-pc, 16);

  font-size: clamp(
    calc(var(--b) * 0.64px),
    calc(var(--b) * 0.64px + (100vw - 768px) * (var(--b) / 1200)),
    calc(var(--b) * 1.6px)
  );
}

@media (max-width: 430px){
  .fluid{
    --b: var(--b-sp, var(--b-pc, 16));
    font-size: clamp(
      calc(var(--b) * 0.744px),
      calc(var(--b) * 0.48px + (100vw - 320px) * (var(--b) / 986)),
      calc(var(--b) * 1.0px)
    );
  }
}

/* =====================================
   Font Family
===================================== */
.staatliches{
  font-family: 'Staatliches', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* =====================================
   Header: PC/SP 切替
===================================== */
.header-wrap-pc{ display: flex; }
.header-wrap-sp{ display: none; }

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

  .mission-left img{
    left: auto;
    right: auto;
    width: 100%;
  }

  .fv-img img{
    max-width: 100%;
  }
}

/* =====================================
   Header: PC
===================================== */
.header-wrap-pc{
  background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,0) 100%);
  backdrop-filter: blur(12px);
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  border: #fff 1px solid;
  box-shadow: 0 0 16px rgba(0,0,0,.12);
  border-radius: clamp(28px, 4vw, 74px);
  margin: clamp(18px, 1.7vw, 42px) clamp(42px, 4vw, 106px);
  padding: clamp(6px, 1vw, 18px) clamp(24px, 3vw, 48px);
  align-items: center;
  justify-content: space-between;
}

.header-wrap-pc header{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.companylogo img{
  display: block;
  width: clamp(108px, 14.1vw, 270px);
  height: auto;
}

.header-wrap-pc .nav-drawer{
  margin-right: clamp(12px, 1.4vw, 18px);
}

.header-wrap-pc .header-actions{
  display: none;
}

.header-wrap-pc header nav ul{
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  margin: 0;
  padding: 6px 10px;
  list-style: none;
}

.header-wrap-pc header nav li a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--nav-h);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.25;
  transition: opacity .2s ease, filter .2s ease;
}

.header-wrap-pc header nav li a:hover{
  opacity: .75;
}

.header-wrap-pc .contact-fab{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 8px 24px 8px 20px;
  white-space: nowrap;
  text-decoration: none;
  border-radius: clamp(18px, 1.7vw, 42px);
  background:
    radial-gradient(120% 180% at 20% 0%, rgba(255,255,255,.16) 0%, transparent 60%),
    linear-gradient(180deg, #2E6BFF 0%, #1A43E0 100%);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  filter: none;
}

.header-wrap-pc .contact-fab img{
  width: 20px;
  height: 20px;
  display: block;
}

/* =====================================
   Header: SP
===================================== */
.header-wrap-sp{
  position: fixed;
  top: clamp(10px, 2.5vw, 16px);
  left: clamp(12px, 3.5vw, 20px);
  right: clamp(12px, 3.5vw, 20px);
  z-index: 100;
}

.header-sp-inner{
  display: flex;
  align-items: center;
  gap: 12px;
}

.sp-pill{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,0) 100%);
  border: 1px solid rgba(255,255,255,.30);
  box-shadow: 0 0 16px rgba(0,0,0,.12);
  color: #fff;
  width: clamp(236px, 64vw, 320px);
  max-width: 320px;
}

.sp-brand{
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sp-brand img{
  display: block;
  max-width: 100%;
  height: auto;
  width: clamp(100px, 42vw, 200px);
}

.sp-menu-btn{
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
}

.sp-menu-btn::before{
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  background: url("img/menu.svg") no-repeat center / contain;
}

.sp-mail{
  display: grid;
  place-items: center;
  width: clamp(40px, 13vw, 56px);
  height: clamp(40px, 13vw, 56px);
  border-radius: 50%;
  background:
    radial-gradient(120% 180% at 20% 0%, rgba(255,255,255,.16) 0%, transparent 60%),
    linear-gradient(180deg, #2E6BFF 0%, #1A43E0 100%);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}

.sp-mail img{
  width: 22px;
  height: 22px;
  display: block;
}

.sp-nav{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  background: rgba(0,0,0,.3);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 12px;
  max-width: 380px;
}

.sp-nav ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sp-nav a{
  color: #fff;
  text-decoration: none;
  display: block;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
}

/* =========================================================
   SP Header（画像準拠：ロゴ＋丸メニュー＋丸メール）
   - .header-wrap-sp は既存を活かしつつ微調整
   - メニューはヘッダー直下に“カード”でドロップダウン
========================================================= */

.header-wrap-sp{
  position: fixed;
  top: clamp(10px, 2.5vw, 16px);
  left: clamp(12px, 3.5vw, 20px);
  right: clamp(12px, 3.5vw, 20px);
  z-index: 100;
}

.header-sp-inner{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ロゴ＋メニューのカプセル */
.sp-pill{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.30);
  box-shadow: 0 0 16px rgba(0,0,0,.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
}

.sp-brand{
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sp-brand img{
  display: block;
  height: auto;
  width: clamp(100px, 42vw, 180px);
}

/* 丸いメニューボタン（画像の三本線アイコン） */
.sp-menu-btn{
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.sp-menu-btn::before{
  content: "";
  width: 22px;
  height: 22px;
  display: block;
  background:url("<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/img/menu.svg") no-repeat center / contain;
}

/* 右のメール丸ボタン */
.sp-mail{
  display: grid;
  place-items: center;
  width: clamp(40px, 13vw, 56px);
  height: clamp(40px, 13vw, 56px);
  border-radius: 50%;
  background:
    radial-gradient(120% 180% at 20% 0%, rgba(255,255,255,.16) 0%, transparent 60%),
    linear-gradient(180deg, #2E6BFF 0%, #1A43E0 100%);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.sp-mail img{ width: 20px; height: 20px; display: block; }

/* ------------- ドロップダウン（カード） ------------- */
/* hidden対策 */
.sp-nav[hidden]{ display:none; }

/* ヘッダー直下に“カード”として出す */
.sp-nav{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 10px);              /* ヘッダーの少し下に */
  z-index: 90;                          /* ヘッダーより下だが十分高く */
  margin: 0;
  padding: 0 clamp(2px, 1vw, 6px);      /* 外側にごく薄い余白 */
}

/* カード本体 */
.sp-nav-list{
  list-style: none;
  margin: 0;
  padding: clamp(8px, 1.8vw, 12px);
  border-radius: 16px;
  background: rgba(12, 30, 86, .35);
  border: 1px solid rgba(255,255,255,.40);
  box-shadow: 0 12px 36px rgba(0,0,0,.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* 各行 */
.sp-nav-list li + li{ margin-top: 6px; }
.sp-nav-list a{
  display: block;
  padding: 14px 16px;
  border-radius: 12px;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  letter-spacing: .01em;
  transition: background .15s ease, opacity .15s ease;
}
.sp-nav-list a:hover{
  background: rgba(255,255,255,.12);
  opacity: .95;
}

/* 開閉状態にあわせてアニメ（下からふわっと） */
html.is-spmenu-open .sp-nav{
  animation: spnav-in .18s ease forwards;
}
@keyframes spnav-in{
  from{ opacity: 0; transform: translateY(-6px); }
  to  { opacity: 1; transform: translateY(0); }
}

/* PCではSPナビは非表示でOK */
@media (min-width: 768px){
  .header-wrap-sp{ display: none; }
  .sp-nav{ display: none !important; }
}
/* =========================================================
   SP Header（画像準拠：ロゴ＋丸メニュー＋丸メール）
   - .header-wrap-sp は既存を活かしつつ微調整
   - メニューはヘッダー直下に“カード”でドロップダウン
========================================================= */

.header-wrap-sp{
  position: fixed;
  top: clamp(10px, 2.5vw, 16px);
  left: clamp(12px, 3.5vw, 20px);
  right: clamp(12px, 3.5vw, 20px);
  z-index: 100;
}

.header-sp-inner{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ロゴ＋メニューのカプセル */
.sp-pill{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.30);
  box-shadow: 0 0 16px rgba(0,0,0,.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
}

.sp-brand{
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sp-brand img{
  display: block;
  height: auto;
  width: clamp(100px, 42vw, 180px);
}

/* 丸いメニューボタン（画像の三本線アイコン） */
.sp-menu-btn{
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

/* ─── デフォルト（メニュー三本線） ─── */
.sp-menu-btn::before{
  content:"";
  width:22px; height:22px; display:block;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>') no-repeat center / contain;
  transition: transform .25s ease, opacity .25s ease;
}

/* ─── 開いたとき（バツアイコン） ─── */
html.is-spmenu-open .sp-menu-btn::before{
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>') no-repeat center / contain;
  transform: rotate(90deg);
}

/* 右のメール丸ボタン */
.sp-mail{
  display: grid;
  place-items: center;
  width: clamp(40px, 13vw, 56px);
  height: clamp(40px, 13vw, 56px);
  border-radius: 50%;
  background:
    radial-gradient(120% 180% at 20% 0%, rgba(255,255,255,.16) 0%, transparent 60%),
    linear-gradient(180deg, #2E6BFF 0%, #1A43E0 100%);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.sp-mail img{ width: 20px; height: 20px; display: block; }

/* ------------- ドロップダウン（カード） ------------- */
/* hidden対策 */
.sp-nav[hidden]{ display:none; }

/* ヘッダー直下に“カード”として出す */
.sp-nav{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 10px);              /* ヘッダーの少し下に */
  z-index: 90;                          /* ヘッダーより下だが十分高く */
  margin: 0;
  padding: 0 clamp(2px, 1vw, 6px);      /* 外側にごく薄い余白 */
}

/* カード本体 */
.sp-nav-list{
  list-style: none;
  margin: 0;
  padding: clamp(8px, 1.8vw, 12px);
  border-radius: 16px;
  background: rgba(12, 30, 86, .35);
  border: 1px solid rgba(255,255,255,.40);
  box-shadow: 0 12px 36px rgba(0,0,0,.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* 各行 */
.sp-nav-list li + li{ margin-top: 6px; }
.sp-nav-list a{
  display: block;
  padding: 14px 16px;
  border-radius: 12px;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  letter-spacing: .01em;
  background: rgba(255,255,255,.06);
  transition: background .15s ease, opacity .15s ease;
}
.sp-nav-list a:hover{
  background: rgba(255,255,255,.12);
  opacity: .95;
}

/* 開閉状態にあわせてアニメ（下からふわっと） */
html.is-spmenu-open .sp-nav{
  animation: spnav-in .18s ease forwards;
}
@keyframes spnav-in{
  from{ opacity: 0; transform: translateY(-6px); }
  to  { opacity: 1; transform: translateY(0); }
}

/* PCではSPナビは非表示でOK */
@media (min-width: 768px){
  .header-wrap-sp{ display: none; }
  .sp-nav{ display: none !important; }
}

/* =====================================
   Main / FV
===================================== */
main {
  margin: clamp(18px, 1.7vw, 42px) clamp(42px, 4vw, 106px);
  display: flex;
}

h2{
  margin-top: clamp(51px, 6.8vw, 128px);
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: #fff;
  width: fit-content;
}

.fv-img img{
  display: block;
  width: clamp(420px, 54vw, 1040px);
  height: auto;
  aspect-ratio: auto;
  object-fit: cover;
  position: absolute;
  top: clamp(28px, 4vw, 74px);
  right: 0;
  z-index: -2;
}

/* =====================================
   CTA
===================================== */
.cta{
  margin-top: clamp(24px, 3vw, 56px);
  margin-bottom: clamp(80px, 9vw, 200px);
  position: relative;
  display: inline-block;
}

.cta-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: clamp(12px, 1.4vw, 18px) clamp(22px, 2.6vw, 36px);
  border-radius: 999px;
  background:
    radial-gradient(120% 180% at 20% 0%, #1B66C4 0%, transparent 60%),
    linear-gradient(180deg, #1F58B3 0%, #0E3E87 100%);
  color: #fff;
  font-weight: 700;
  font-size: clamp(14px, 1.6vw, 18px);
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.18);
  z-index: 1;
}

.cta-button img{
  width: 20px;
  height: 20px;
  display: block;
}

.cta-button:hover{
  filter: brightness(1.06);
}

.cta-button:active{
  transform: translateY(1px);
}

.label{
  position: absolute;
  left: 50%;
  bottom: calc(100% - 10px);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: clamp(6px, .8vw, 10px) clamp(14px, 2vw, 24px);
  background: #fff;
  color: #0b2b57;
  font-weight: 700;
  font-size: clamp(12px, 1.4vw, 14px);
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}

.label img{
  width: 18px;
  height: 18px;
  display: block;
}

.label::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

@media (max-width: 430px){
  .label{ bottom: calc(100% - 6px); }
  .cta-button img{ width: 18px; height: 18px; }
}

/* =====================================
   Mission
===================================== */
.mission{
  margin: clamp(18px, 1.7vw, 42px) clamp(42px, 4vw, 106px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: clamp(80px, 9vw, 200px);
  margin-bottom: clamp(80px, 9vw, 200px);
}

.mission-right{
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: clamp(25px, 5vw, 64px);
  width: clamp(360px, 49vw, 840px);
}

.mission-left img{
  position: absolute;
  top: clamp(340px, 44vw, 860px);
  left: -40px;
  opacity: 0.3;
  display: block;
  width: clamp(382px, 58vw, 1120px);
  height: auto;
  z-index: -1;
  object-fit: cover;
}

/* =====================================
   Job Section（カルーセル含む）
===================================== */
.job{
  margin-bottom: clamp(42px, 4vw, 106px);
}

.jobtitle{
  color: #001E56;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: clamp(32px, 2.4vw, 64px);
}

.card{
  padding: clamp(50px, 6.6vw, 128px) clamp(42px, 4vw, 106px);
  background-color: #FFFFFF;
  border-radius: clamp(32px, 2.2vw, 64px);
  margin-top: clamp(80px, 9vw, 200px);
  margin-bottom: clamp(80px, 9vw, 200px);
}

/* ヘッダー行（タイトル＋コントロール） */
.job-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* リスト／トラック */
.job-list{
  overflow: hidden;
  position: relative;
  padding: 0;
}

.job-track{
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  gap: 24px;               /* JSと一致 */
  will-change: transform;
  transition: transform .5s ease;
}

.job-item{
  flex: 0 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  transition: transform .2s, box-shadow .2s;
  margin: 0 !important;    /* 余白は gap に統一 */
}

.job-item .image{
  width: 100%;
  border-radius: 8px;
  background: #ddd;
  overflow: hidden;
  aspect-ratio: 16/10;
}

.job-item .image img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px){
  .job-item .image img{
    max-width: 320px;
    width: clamp(240px, 80vw, 320px);
    height: auto;
    aspect-ratio: 80/53;
  }
}

/* ボタン押下の保険 */
.job .carousel,
.job .pager-btn{
  pointer-events: auto;
  position: relative;
  z-index: 5;
}

/* ボタン押下の保険 */
.job .carousel,
.job .carousel-pc,
.job .carousel-sp,
.job .pager-btn{
  pointer-events: auto;
  position: relative;
  z-index: 5;
}

/* --- カルーセル共通UI --- */
.carousel,
.carousel-pc,
.carousel-sp{
  display: flex;
  align-items: center;
  gap: 12px;
  width: clamp(
    247px,
    calc(247px + (618 - 247) * ((100vw - 768px) / (1920 - 768))),
    618px
  );
  height: clamp(
    26px,
    calc(26px + (64 - 26) * ((100vw - 768px) / (1920 - 768))),
    64px
  );
}

.pager-btn{
  flex: 0 0 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  border: 1.5px solid var(--ink);
  background: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}

.pager-btn.prev{
  background-image: url("img/slidarrow-left.svg");
}

.pager-btn.next{
  background: var(--ink);
  border-color: var(--ink);
  background-image: url("img/slidarrow-right.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}

.progress-track{
  position: relative;
  flex: 1;
  min-width: 160px;  /* これで0幅防止 */
  height: 3px;
}

.progress-track .dash{
  position: absolute;
  inset: 0;
  border-top: 3px dashed var(--dash);
}

.progress-track .fill{
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;                /* JSで更新 */
  background: var(--ink);
  border-radius: 999px;
  transition: width .3s ease;
}

/* PC/SP 表示切り替え */
.carousel-pc{ display: flex; }
.carousel-sp{ display: none; }

@media (max-width: 430px){
  .job-header{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
  }

  .carousel-pc{ display: none; }
  .carousel-sp{ display: flex; }

  .job .carousel-sp,
  .story .carousel,
  .story .carousel-pc{
    position: static;
    width: 100%;
    max-width: none;
    height: 42px;
    justify-content: center;
    margin: 0;
  }

  .job .carousel-sp .progress-track,
  .story .carousel .progress-track{
    flex: 1;
    min-width: 160px;
  }

  .job .carousel-sp .pager-btn,
  .story .carousel .pager-btn{
    flex: 0 0 36px;
    height: 36px;
    background-size: 16px 16px;
  }

  .job .progress-track .dash,
  .story .progress-track .dash{
    border-top-width: 2px;
  }
}

@media (max-width: 430px){
  
  .job,
  .story{
  padding:0 clamp(16px, 7.4vw, 32px);
}

}


/* =====================================
   Story
===================================== */
.story-header{
  align-items: center;
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 100px);
  color: #001E56;
}

.story-list{
  margin-bottom: clamp(32px, 3.4vw, 64px);
  display: block;
  overflow: hidden;
  position: relative;
  padding: clamp(12px, 1.6vw, 24px) clamp(12px, 2vw, 24px);
}

.story-track{
  display: flex;
  gap: clamp(16px, 2.2vw, 42px);
  will-change: transform;
  transition: transform .5s ease;
  align-items: stretch;
}

.story-item{
  display: flex;
  flex-direction: column;
  padding: clamp(12px, 1.6vw, 32px) clamp(20px, 2.7vw, 54px);
  border-radius: clamp(16px, 2.2vw, 32px);
  background: #fff;
  box-shadow: 0 0 8px rgba(0,0,0,.12);
  width: clamp(300px, 38.8vw, 746px);
  flex: 0 0 clamp(300px, 38.8vw, 746px);
  box-sizing: border-box;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: box-shadow .25s ease, transform .25s ease;
}

@media (hover:hover){
  .story-item:hover{
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(0,0,0,.18), 0 3px 8px rgba(0,0,0,.10);
  }
}

.story-item:focus{
  outline: 2px solid rgba(0, 82, 204, .45);
  outline-offset: 3px;
  box-shadow: 0 12px 36px rgba(0,0,0,.18), 0 3px 8px rgba(0,0,0,.10);
}

.story-item:visited{
  color: inherit;
}

.story-meta{
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.badge{
  display: inline-flex;
  margin: auto 0;
  gap: 6px;
  background-color: #F2F9FF;
  border-radius: 8px;
  color: #001E56;
  padding: 4px 12px;
}

.meta-human{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(12px, 1.6vw, 32px);
}

.human-image{
  width: clamp(30px, 3.8vw, 76px);
  height: auto;
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
}

.human-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* contain → cover に変更 */
  display: block;
}

.story .carousel{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: clamp(16px, 3vw, 40px);
  margin-inline: auto;
}

/* =====================================
   blog
===================================== */

.blog .jobtitle h3{
  color:#FFF;
}

.blog .jobtitle p{
  color:#FFF;
}

.no-article{
  padding-top:clamp(12px, 1.6vw, 24px);
  text-align: center;
  align-items: center;
}

.blog{
  margin: clamp(16px, 3vw, 40px) clamp(42px, 4vw, 106px);
  display:flex;
  justify-content: space-between;
  gap:clamp(16px, 3vw, 40px);
}

.article_all{
  width: 100%;
  padding: clamp(42px, 4vw, 106px) clamp(51px, 6.8vw, 128px);
  background-color:#FFF;
  border-radius: clamp(16px, 3vw, 40px);
  margin-bottom:clamp(12px, 1.6vw, 24px);
}

.article{
  display: flex;
  flex-direction: column;
}

.article_info{
  display: flex;
  gap:24px;
  margin-bottom:clamp(12px, 1.6vw, 24px);
}

.article_body{
  padding-bottom:clamp(12px, 1.6vw, 24px);
  margin-bottom:clamp(16px, 3vw, 40px);
  border-bottom:solid 1px #ccc;
  display: flex;
  justify-content: space-between;
  gap:24px;
}

.article:last-child .article_body {
  margin-bottom: 0;
  border-bottom: none;
}

.next-icon{
  display: grid;                /* 中央寄せの一番ラクな方法 */
  background-color: #0f2a52;
  border-radius:50%;
  width:40px;
  height:40px;
  place-items: center;  
}

.next-icon img {
  display: block;
  size: contain;
  width:16px;
  height:16px;
}

.tag{
  display: flex;
  gap:8px;
}

.blog a,
.article_all a,
.article a,
.article_body a {
  text-decoration: none;
  color: #0D223F;           /* タイトルと同系色に固定 */
}

.blog a:visited,
.article_all a:visited,
.article a:visited,
.article_body a:visited {
  color: #0D223F;           /* 紫にしない */
}

.blog a:hover,
.article_all a:hover,
.article a:hover,
.article_body a:hover {
  text-decoration: none;    /* ホバーでも下線出さない */
  color: #0E3E87;           /* 変えたくなければ消してOK */
}

@media (max-width: 430px){
.blog{
 flex-direction: column;
 margin: clamp(16px, 4vw, 24px);
 margin-bottom:clamp(42px, 4vw, 106px);
 gap:clamp(16px, 4vw, 24px);
}
.blog .jobtitle {
   margin-bottom:0;

}
.article_all{
  padding: clamp(16px, 9vw, 40px) clamp(12px, 5.5vw, 24px);
}
.next-icon{
  width:36px;
  height:36px;
}

}

/* ===========================
   ページ飾り（page-title）
=========================== */
.top-parts03{
  padding:0;
  width: clamp(268px, 35vw, 670px);
  display:block;
  height:auto;
  aspect-ratio: auto;
  object-fit: contain;
  position:absolute;
  top:clamp(1860px, 192vw, 3700px);
  right:-24px;
  z-index: -1;
  mix-blend-mode: overlay;
}



.top-parts04{
  padding:0;
  display:block;
  height:auto;
  aspect-ratio: auto; 
  object-fit: contain;
  position:absolute;
  top:clamp(2260px, 239vw, 4600px);
  left:-24px;
  z-index: -1;
  mix-blend-mode: overlay;

    /* 👇ここだけ修正：大きさが画面幅に合わせて自然に可変する */
  width: clamp(320px, 40vw, 783px);
}

.top-parts03 img ,
.top-parts04 img{
  width: 100% !important;
  height: auto !important;
}


/* =====================================
   FAQ
===================================== */
.faq p{
  margin-block: 0;
}

.faq p span{
  color:#001E56;
}


.faq{
  padding: clamp(32px, 6vw, 80px);
  background-color: #fff;
  border-radius: clamp(16px, 3vw, 40px);
  margin: clamp(80px, 9vw, 200px);
}

.faq-wrap{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 20px 24px;
}

@media (max-width: 430px){
  .faq-wrap {
  display: flex;              /* ← gridをやめてflexで縦並び */
  flex-direction: column;
  gap: 12px;                  /* ← アイテム間の余白を設定（好きな値に調整OK） */
}
  .faq{
    margin: clamp(16px, 4vw, 24px);
  }
  .question p{
    width:clamp(200px, 65.1vw, 280px);
  }
}

.faq-item{
  width: 100%;
}

.faq-item p{
  font-weight: 400;
}

.question{
  padding: 20px;
  padding-right: 52px;
  position: relative;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.6;
  cursor: pointer;
  border-radius: 12px 12px 0 0;
  background: #fff;
}

.question::before{
  content: "+";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translate(0,-50%) rotate(0deg);
  transform-origin: center;
  transition: transform .2s ease;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

.question.on::before{
  transform: translate(0,-50%) rotate(45deg);
}

.question.on::after{
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 1px;
}

.answer{
  display: none;
  padding: 16px 20px 20px 32px;
  background: #F4FAFE;
  border-radius: 0 0 12px 12px;
  line-height: 1.8;
}

.question:focus{
  outline-offset: 3px;
  border-radius: 12px;
}
@media (max-width: 430px){
  .faq-item,
  .faq .question {
  padding: 8px 0 !important;
  gap:8px;
}
}

/* =====================================
   Flow Image
===================================== */
#service img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  top: clamp(28px, 4vw, 74px);
  right: 0;
  z-index: -2;
}

.flowimage-sp{ display: none; }

@media (max-width: 430px){
  .flowimage-sp{
  padding:0 clamp(16px, 7.4vw, 32px);
  }
}

/* =====================================
   Footer
===================================== */
footer,
.footernav{
  --ink: var(--ink-footer);
  --ink-sub: var(--ink-footer-sub);
}

header nav ul{
  display: flex;
  gap: var(--gap-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

header nav a{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  transition: opacity .2s ease;
}

header nav a:visited{
  color: var(--ink);
  text-decoration: none;
}

header nav a:hover{
  opacity: .7;
}

footer{
  margin: clamp(18px,1.7vw,42px) var(--pad-x);
  color: var(--ink);
}

.footernav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin: 0;
  padding-top: clamp(24px, 4vw, 48px);
  padding-bottom: clamp(36px, 5vw, 64px);
  color: var(--ink);
}

.nav-right{
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.footerbtn{
  display: flex;
  align-items: center;
  gap: 16px;
}

.contactbtn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 32px;
  border-radius: 999px;
  background: #fff;
  color: #0b2b57;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  transition: filter .15s ease, opacity .15s ease, transform .05s ease;
}

.contactbtn img{
  width: 22px;
  height: 22px;
  display: block;
}

.contactbtn p{
  margin: 0;
}

.contactbtn:hover{
  filter: brightness(1.05);
  opacity: .85;
}

.contactbtn:active{
  transform: translateY(1px);
}

.contactbtn:visited{
  color: #0b2b57;
  text-decoration: none;
}

.linebtn{
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.9);
  background: transparent;
  text-decoration: none;
  transition: background .2s ease, transform .05s ease, opacity .15s ease;
}

.linebtn img{
  width: 22px;
  height: 22px;
  display: block;
}

.linebtn:hover{
  background: rgba(255,255,255,.12);
  opacity: .9;
}

.linebtn:active{
  transform: translateY(1px);
}

.linebtn:visited{
  text-decoration: none;
}

.nav-left{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 24px;
}

.footer-nav{
  display: flex;
  gap: var(--gap-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-nav a{
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  transition: opacity .2s ease;
}

.footer-nav a:visited{
  color: var(--ink);
  text-decoration: none;
}

.footer-nav a:hover{
  opacity: .7;
}

.savnav{
  display: flex;
  justify-content: flex-end;
  gap: var(--gap-lg);
  width: 100%;
}

.savnav a{
  color: var(--ink-footer-sub);
  text-decoration: none;
  transition: opacity .2s ease, color .2s ease;
}

.savnav a:visited{
  color: var(--ink-footer-sub);
  text-decoration: none;
}

.savnav a:hover{
  color: var(--ink);
  opacity: .9;
}

.savnav p{
  margin: 0 .8em;
  color: var(--ink-footer-sub);
}

footer > p{
  margin: 24px 0 12px;
  text-align: center;
  color: var(--ink-footer-sub);
  font-size: clamp(12px, 1.2vw, 14px);
}

/* =====================================
   Responsive
===================================== */
@media (max-width: 430px){
  .footernav{ align-items: flex-start; }
  .nav-left,
  .nav-right{ width: 100%; }
  .nav-left{ align-items: flex-start; text-align: left; }
  .savnav{ justify-content: flex-start; }
}

@media (max-width: 430px){
  /* Footer（SP） */
  footer{
    margin: clamp(18px,1.7vw,42px) clamp(16px, 4vw, 24px);
  }

  .footernav{
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    padding-top: clamp(16px, 4vw, 24px);
    padding-bottom: clamp(24px, 5vw, 36px);
  }

  .nav-right{
    width: 100%;
    align-items: flex-start;
    gap: 24px;
  }

  .nav-right img{
    width: clamp(160px, 64vw, 280px);
    height: auto;
  }

  .footerbtn{
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .contactbtn{
    padding: 10px 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,.16);
  }

  .contactbtn img{
    width: 24px;
    height: 24px;
  }

  .linebtn{
    width: 40px;
    height: 40px;
  }

  .linebtn img{
    width: 18px;
    height: 18px;
  }

  .nav-left{
    width: 100%;
    align-items: flex-start;
    text-align: left;
    gap: 64px;
  }

  .footer-nav{
    flex-direction: column;
    gap: 16px;
  }

  .footer-nav li{
    list-style: none;
  }

  .savnav{
    justify-content: flex-start;
    gap: 12px;
    width: auto;
  }

  footer > p{
    text-align: left;
    margin: 12px 0 0;
  }

  /* Main（SP） */
  main{
    margin-top: clamp(51px, 6.8vw, 128px);
    margin: clamp(18px, 1.7vw, 42px) clamp(16px, 4vw, 24px);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: clamp(240px, 64vw, 360px);
  }

  h2{
    margin-top: clamp(51px, 6.8vw, 128px);
    line-height: 1.6;
    letter-spacing: 0.00em;
    color: #fff;
  }

  main section{
    margin-top: clamp(51px, 6.8vw, 128px);
  }

  .fv-img img{
    top: clamp(320px, 64vw, 440px);
  }

  .mission{
    margin: clamp(18px, 1.7vw, 42px) clamp(16px, 4vw, 24px);
    margin-bottom: clamp(360px, 64vw, 480px);
  }

.mission-left img {
  display: block;
  position: absolute;
  top: clamp(940px, 251vw, 1080px);
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.3;
  width: 100%;
  overflow-x: hidden !important;
}
  .top-parts03,
  .top-parts04 {
	display:none;
  }


  /* CTA を中央に */
  .cta{
    margin-top: clamp(24px, 5vw, 36px);
    display: block;
    width: max-content;
    margin-inline: auto;
    text-align: initial;
  }

  .cta .label{
    left: 50%;
    transform: translateX(-50%);
  }

  /* Flow image */
  .flowimage-pc{ display: none; }
  .flowimage-sp{ display: block; }

  .flowimage-sp img{
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}