/* ===================================================================
   みらくる / カムカム 社会人採用LP  -  style.css
   Design DNA: come-atoms.com × miracle-nopo.com/ebetsu
=================================================================== */

/* ---------- Design Tokens ---------- */
:root{
  --white:#ffffff;
  --ink:#3b4043;
  --gray:#707070;

  --green:#00be87;
  --green-d:#009e72;
  --orange:#f08300;
  --red:#e73828;
  --yellow:#ffd23f;
  --blue:#3aa0d8;
  --purple:#9b6bb0;
  --pink:#ef88a6;

  --cream:#fefbeb;
  --peach:#fceee5;
  --mint:#e5f8f3;
  --sky:#e7f3fb;

  --maxw:1080px;
  --gut:clamp(20px,5vw,72px);
  --radius:28px;
  --shadow:0 18px 40px -22px rgba(59,64,67,.45);

  --ff-ja:"Zen Kaku Gothic New",system-ui,sans-serif;
  --ff-round:"Zen Maru Gothic","Zen Kaku Gothic New",sans-serif;
  --ff-en:"Montserrat",sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);

  /* ===== SP 基本スケール（ファーストビュー基準の統一ルール） =====
     スマホ表示でのフォント・行間・余白の単一ソース。
     各セクションはこのトークンを参照して統一感を保つ。 */
  /* フォントサイズ */
  --fs-label:12px;                      /* 英字ラベル・小ラベル */
  --fs-body:14px;                       /* 本文 */
  --fs-lead:clamp(18px,5vw,22px);       /* リード/強調文・セクション内アクセント見出し */
  --fs-sub:clamp(18px,2.4vw,20px);      /* 小見出し（block-title 級） */
  --fs-heading:clamp(23px,6.2vw,27px);  /* セクション主見出し（jp-title / キャッチ級） */
  /* 行間 */
  --lh-body:1.85;                       /* 本文 */
  --lh-heading:1.5;                     /* 見出し・リード */
  /* 余白リズム（要素間） */
  --sp-1:8px;
  --sp-2:14px;
  --sp-3:22px;
  --sp-4:32px;
  --sp-5:48px;
  --sp-section-y:clamp(48px,10vw,72px); /* セクション上下パディング（SP） */
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%;}
body{
  font-family:var(--ff-ja);
  color:var(--ink);
  background:var(--white);
  line-height:1.9;
  font-weight:500;
  overflow-x:hidden;
  letter-spacing:.02em;
}
img{height:auto;display:block;}
a{color:inherit;text-decoration:none;}
ul,dl{list-style:none;}
.sp-only{display:none;}

/* ---------- Shared ---------- */
.section{
  position:relative;
  padding:clamp(64px,8.5vw,128px) var(--gut);
  overflow:hidden;
  background-image:url("../assets/images/dot.png");
  background-repeat:no-repeat;     /* リピートしない */
  background-size:cover;           /* 画面いっぱいに拡大して敷く */
  background-position:center;      /* 中心基準で配置 */
  background-attachment:fixed;   
}

.section--cream{background-color:var(--cream);}
.section--peach{background-color:var(--peach);}
.section--mint{background-color:var(--mint);}

.section-head{
  position:relative;
  width:fit-content;
  margin:0 auto clamp(40px,5.5vw,68px);
  text-align:center;
}
.en-label{
  display:block;
  font-family:var(--ff-en);
  font-weight:700;
  font-size:clamp(13px,1.4vw,16px);
  letter-spacing:.22em;
  color:var(--green);
  margin-bottom:.5em;
}
.jp-title{
  font-family:var(--ff-round);
  font-weight:900;
  color:var(--ink);
  font-size:clamp(26px,3.8vw,42px);
  letter-spacing:.06em;
  line-height:1.3;
}
.jp-title::after{
  content:"";
  display:block;
  width:46px;height:5px;border-radius:5px;
  background:var(--yellow);
  margin:.55em auto 0;
}
.section-head--light .en-label{color:#bff0e1;}
.section-head--light .jp-title{color:var(--white);}
.section-head--light .jp-title::after{background:var(--white);}

.block-title{
  text-align:center;
  font-family:var(--ff-round);
  font-weight:700;
  color:var(--ink);
  font-size:clamp(20px,2.4vw,28px);
  letter-spacing:.06em;
  margin-bottom:clamp(28px,4vw,48px);
}
.block-title::before{
  content:"";
  display:inline-block;
  width:14px;height:14px;border-radius:50%;
  background:var(--green);
  margin-right:.5em;
  vertical-align:.05em;
}

/* ---------- Entry buttons ---------- */
.btn-entry,.header-cta{
  font-family:var(--ff-en);
  font-weight:700;
  letter-spacing:.12em;
}
.btn-entry{
  position:relative;                    /* ← 追加：アイコンの基準位置にする */
  display:inline-flex;align-items:center;gap:.7em;
  background:var(--green);
  color:#fff;
  padding:.95em 2.4em .95em 3.6em;       /* ← 左だけ広げる（3.6emくらいから調整） */
  border-radius:999px;
  font-size:clamp(16px,1.7vw,19px);
  box-shadow:0 12px 24px -10px rgba(0,190,135,.7);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s;
}
.btn-entry .arrow{transition:transform .3s var(--ease);}
.btn-entry:hover{transform:translateY(-3px);background:var(--green-d);}
.btn-entry:hover .arrow{transform:translateX(.3em);}

.btn-entry__icon{
  position:absolute;
  left:-70px;              /* ← マイナス値で左にはみ出す量を調整 */
  top:50%;
  transform:translateY(-50%);
  width:150px;             /* ← アイコンの大きさ（ボタンの高さより大きめに） */
  height:100px;
  object-fit:contain;
  z-index:2;
}

.hero-text .btn-entry{
  position:relative;
  top: 17px;
  left:49px;   /* ← この数値だけ右にずれます。お好みで調整してください */
}

/* ===================== HEADER ===================== */
.site-header{
  position:fixed;top:0;left:0;width:100%;z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  box-shadow:0 4px 20px -12px rgba(59,64,67,.35);
  transition:transform .35s var(--ease);
}
.header-inner{
  display:flex;align-items:center;gap:clamp(12px,2vw,28px);
  max-width:1280px;margin:0 auto;
  padding:10px clamp(16px,3vw,40px);
}
.header-logos{display:flex;align-items:center;gap:10px;}
.logo{height:34px;width:auto;}
.logo--comecome{height:30px;}
.header-tagline{
  font-size:11px;color:var(--gray);font-weight:700;line-height:1.4;
  letter-spacing:.02em;max-width:13em;
}
.header-nav{margin-left:auto;display:flex;align-items:center;gap:clamp(14px,1.8vw,30px);}
.header-nav>a{
  font-weight:700;font-size:15px;color:var(--ink);position:relative;
  transition:color .25s;
}
.header-nav>a:not(.header-cta)::after{
  content:"";position:absolute;left:0;bottom:-6px;width:100%;height:3px;
  background:var(--green);border-radius:3px;transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.header-nav>a:not(.header-cta):hover{color:var(--green);}
.header-nav>a:not(.header-cta):hover::after{transform:scaleX(1);}
.header-cta{
  display:inline-flex;align-items:center;gap:.5em;
  background:var(--orange);color:#fff;
  padding:.6em 1.5em;border-radius:999px;font-size:15px;
  box-shadow:0 10px 20px -10px rgba(240,131,0,.8);
  transition:transform .3s var(--ease),background .3s;
}
.header-cta:hover{transform:translateY(-2px);background:#d97700;}

.nav-toggle{
  display:none;flex-direction:column;gap:5px;
  width:42px;height:42px;border:none;background:transparent;
  cursor:pointer;margin-left:auto;
}
.nav-toggle span{display:block;height:3px;border-radius:3px;background:var(--ink);transition:.3s var(--ease);}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* ===================== HERO ===================== */
.hero{
  position:relative;
  padding:clamp(120px,16vw,180px) var(--gut) clamp(90px,11vw,150px);
  background:
    radial-gradient(120% 90% at 80% 0%, var(--mint) 0%, transparent 55%),
    radial-gradient(110% 80% at 0% 30%, var(--sky) 0%, transparent 50%),
    linear-gradient(180deg,#f4fcf9 0%, #ffffff 70%);
  overflow:hidden;
}
.hero-cloud{position:absolute;opacity:.9;pointer-events:none;filter:drop-shadow(0 8px 16px rgba(0,150,110,.08));}
.hero-cloud--1{width:170px;top:14%;left:4%;animation:float 9s ease-in-out infinite;}
.hero-cloud--2{width:120px;top:8%;right:8%;animation:float 7s ease-in-out infinite reverse;}
.hero-insect{position:absolute;width:100px;right:6%;bottom:22%;z-index:3;}
.hosihana{position:absolute;width:175px;right:40%;bottom:66%;z-index:3;}
.hero-inner{
  position:relative;z-index:2;
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center;
}
.hero-badge{display:inline-flex;flex-direction:column;align-items:flex-start;gap:6px;margin-bottom:1.1em;}
.hero-badge span{
  font-size:13px;font-weight:700;color:var(--green-d);
  background:#d8f5ec;padding:.4em 1em;border-radius:999px;letter-spacing:.04em;
}
.hero-badge strong{
  font-family:var(--ff-round);font-weight:900;font-size:clamp(20px,2.6vw,28px);
  color:var(--orange);letter-spacing:.08em;
}
.hero-copy{
  font-family:var(--ff-round);font-weight:900;
  font-size:clamp(28px,4.4vw,50px);line-height:1.45;letter-spacing:.03em;
  color:var(--ink);margin-bottom:.6em;
}
.hero-copy__line{
  display:inline-block;
  white-space:nowrap; 
}
.hero-copy::selection{background:var(--yellow);}
.hero-lead{font-size:clamp(14px,1.6vw,16px);line-height:2;color:#555;margin-bottom:1.8em;max-width:33em;}
.hero-visual{position:relative;}
.hero-dot{position:absolute;border-radius:50%;z-index:3;}
.hero-dot--y{width:30px;height:30px;background:var(--yellow);top:6%;right:6%;box-shadow:0 6px 14px -6px rgba(255,210,63,.8);}
.hero-dot--g{width:18px;height:18px;background:var(--orange);bottom:10%;left:4%;}
.hero-photo{
  position:relative;z-index:2;
  width:150%;                 /* ← 135%から変更（画像を大きくする） */
  object-fit:contain; 
  margin-left:-27%;           /* ← -20%から変更（大きくなった分、左に詰めてバランスを取る） */
  margin-top:-40px; 
  filter:drop-shadow(0 22px 34px rgba(0,120,90,.22));
}
.hero-wave{position:absolute;left:0;bottom:-1px;width:100%;line-height:0;z-index:1;}
.hero-wave svg{width:100%;height:clamp(50px,7vw,110px);}
.hero-wave path{fill:#ffffff;}

@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-16px);}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg);}50%{transform:translateY(-12px) rotate(6deg);}}

/* ===================== MESSAGE ===================== */
.message-inner{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,64px);align-items:center;
}
.message-photo{position:relative;}
.message-portrait{
  width:100%;border-radius:var(--radius);box-shadow:var(--shadow);
  aspect-ratio:3/3.6;object-fit:cover;
}
.message-caption{
  position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);
  background:var(--green);color:#fff;font-weight:700;font-size:14px;
  padding:.45em 1.4em;border-radius:999px;white-space:nowrap;letter-spacing:.06em;
  box-shadow:0 10px 20px -10px rgba(0,190,135,.6);
}
.message-bug{position:absolute;width:40px;top:-22px;right:-14px;transform:rotate(12deg);}
.message-lead{
  font-family:var(--ff-round);font-weight:900;
  font-size:clamp(12px, 4vw, 30px);   /* ← 下限を13pxまで下げ、4.4vwで画面幅に追従 */
  line-height:1.6;
  letter-spacing:.02em;                  /* ← .04em → .02emに縮小（少し詰めて入りやすく） */
  color:var(--green-d);margin-bottom:1em;margin-top: -5%;
  white-space:nowrap;                     /* ← これで強制的に1行に固定 */
}
.message-body p:not(.message-lead){margin-bottom:1.1em;font-size:15px;color:#4a4f52;}

.flag{
  position: relative;
  z-index: 10;
  width: 30%;
  left: -49%;
}

.mushitati{
  position: relative;
  width: 105%;
  left: 62vw;
 bottom: -12px;
}

.message{
  padding-bottom:clamp(0px,1vw,56px);   /* ← 数値はお好みで調整 */
}
/* ===================== ABOUT ===================== */
.about-fields{max-width:var(--maxw);margin:0 auto clamp(60px,8vw,100px);}
.about-sub{
  text-align:center;font-family:var(--ff-round);font-weight:700;
  font-size:clamp(18px,2.2vw,24px);color:var(--orange);margin-bottom:.6em;
}
.about-intro{text-align:center;font-size:15px;color:#555;margin-bottom:clamp(34px,5vw,56px);}
.field-cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,36px);}
.field-card{
  background:#fff;border-radius:var(--radius);padding:clamp(22px,3vw,34px);
  box-shadow:var(--shadow);border:2px solid #fff;
  transition:transform .3s var(--ease);
  position:relative;
}
.field-card:hover{transform:translateY(-6px);}

/* ★★★ 以下すべて新規追加 ★★★ */
.field-card__mascot{
  position:absolute;
  width:120px;
  pointer-events:none;
  z-index:3;
  filter:drop-shadow(0 8px 16px rgba(59,64,67,.25));
}
.field-card__mascot--tl{
  left:-20px;
  top:-44px;
  width:58px;            /* 上のイントロ文／下のカテゴリ文の間（無テキスト帯）に収めるサイズ */
  transform:rotate(-8deg)
}
.field-card__mascot--tr{
  right:-18px;
  top:-20px;
  width:72px;            /* みらくる(--tl 58px)より少し大きめに縮小 */
  transform:rotate(8deg)
}

@media(max-width:900px){
  .field-card__mascot{ width:72px; }
  .field-card__mascot--tl{ left:-12px; top:-30px; width:42px; }
  .field-card__mascot--tr{ right:-12px; top:-14px; width:50px; }
}

.field-card__cat{font-size:12px;font-weight:700;color:var(--gray);letter-spacing:.04em;text-align: center;}
.field-card__name{
  font-family:var(--ff-round);font-weight:900;font-size:clamp(22px,2.6vw,28px);
  color:var(--ink);margin:.2em 0 .8em;text-align: center;
}

.jigyousho1{
  width: 17%;
  position: relative;
  top: -20px;
  left: 15px;
}

.jigyousho2{
  width: 17%;
  position: relative;
  top: -150px;
  left: 15px;
}

.field-card__photo{border-radius:18px;overflow:hidden;margin-bottom:1.2em;}
.field-card__photo img{width:100%;aspect-ratio:16/10;object-fit:cover;}
.field-card__list>div{display:flex;flex-direction:column;align-items:flex-start;gap:.45em;margin-bottom:1em;font-size:14.5px;}
.tag{
  flex:0 0 auto;font-size:12px;font-weight:700;color:#fff;
  padding:.25em .9em;border-radius:999px;white-space:nowrap;line-height:1.7;
}
.tag--purple{background:var(--purple);}
.tag--pink{background:var(--pink);}
.field-card__list dd{width:100%;text-align:left;color:#4a4f52;}

.about-values{max-width:var(--maxw);margin:0 auto;text-align:center;}
.about-values__lead{font-weight:700;color:var(--gray);font-size:15px;}
.about-values__title{
  font-family:var(--ff-round);font-weight:900;
  font-size:clamp(24px,3.2vw,34px);color:var(--ink);margin-bottom:clamp(30px,4vw,50px);
}
.value-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,30px);}
.value-card{
  position:relative;background:#fff;border-radius:var(--radius);
  padding:clamp(40px,4vw,52px) clamp(20px,2.5vw,28px) clamp(28px,3vw,36px);
  box-shadow:var(--shadow);
}
.value-num{
  position:absolute;top:-26px;left:50%;transform:translateX(-50%);
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-en);font-weight:800;font-size:22px;color:#fff;
  background:var(--green);box-shadow:0 10px 20px -8px rgba(0,190,135,.6);
}
.value-card:nth-child(2) .value-num{background:var(--orange);box-shadow:0 10px 20px -8px rgba(240,131,0,.55);}
.value-card:nth-child(3) .value-num{background:var(--blue);box-shadow:0 10px 20px -8px rgba(58,160,216,.55);}
.value-text{font-family:var(--ff-round);font-weight:700;font-size:clamp(15px,1.8vw,18px);line-height:1.9;}
.value-text strong{font-weight:900;}
.u-green{color:var(--green-d);}
.u-orange{color:var(--orange);}
.u-blue{color:var(--blue);}

.value-card .me,
.value-card .te,
.value-card .hasi{
  display:block;              /* ← 追加：margin autoで中央寄せできるようにする */
  width:clamp(90px,12vw,130px); /* ← 30%から変更：画面サイズによらず一定の大きさに固定 */
  margin:1.4em auto 0;          /* ← 追加：テキストとの間隔を作り、左右中央に配置 */
}

.me{
  width: 110px;
}
/* ===================== SCHEDULE ===================== */
.schedule-inner{max-width:var(--maxw);margin:0 auto;}
.timeline{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);gap:clamp(40px,8vw,96px);  /* ← 数値を広げる */
  position:relative;           /* ★追加：画像配置の基準にする */;}

.timeline-group{
  background:#fff;border-radius:var(--radius);padding:clamp(24px,3vw,38px);
  box-shadow:var(--shadow);
}
.timeline-label{
  font-family:var(--ff-round);font-weight:900;font-size:clamp(17px,2vw,21px);
  text-align:center;color:#fff;padding:.55em;border-radius:999px;margin-bottom:1.6em;
}
.timeline-label--warm{background:var(--orange);}
.timeline-label--cool{background:var(--blue);}
.timeline-list{position:relative;padding-left:26px;}
.timeline-list::before{
  content:"";position:absolute;left:7px;top:8px;bottom:8px;width:3px;
  background:linear-gradient(var(--green),#cdeee4);border-radius:3px;
}
.ti{ position:relative;
  display:flex;              /* grid → flex に変更 */
  align-items:center;        /* これで時刻と説明文が常に正確に中央揃えされる */
  gap:.2em 1em;
  margin-bottom:1.4em;
}
.ti:last-child{margin-bottom:0;}
.ti-dot{
  position:absolute;
  left:-26px;
  top:50%;                    /* top:6px → top:50% に変更 */
  transform:translateY(-50%); /* ← 追加：これで常に行の高さの中央に来る */
  width:17px;height:17px;border-radius:50%;
  background:#fff;border:4px solid var(--green);
}
.timeline-group:nth-child(2) .ti-dot{border-color:var(--blue);}
.timeline-group:nth-child(2) .timeline-list::before{background:linear-gradient(var(--blue),#d4ebf7);}
.ti-time{
  font-family:var(--ff-en);font-weight:800;font-size:20px;color:var(--green-d);
  flex:0 0 auto; 
}
.timeline-group:nth-child(2) .ti-time{color:var(--blue);}
.ti-text{flex:1;                     /* grid-column:2 を削除し、これに置き換え */
  font-size:14.5px;color:#4a4f52;}
.schedule-note{text-align:right;margin-top:1.2em;font-size:13px;color:var(--gray);}

/* ===================== GALLERY ===================== */
.gallery-wrap{position:relative;}
.gallery-marquee{overflow:hidden;width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.gallery-track{display:flex;gap:18px;width:max-content;animation:marquee 38s linear infinite;}
.gallery-marquee:hover .gallery-track{animation-play-state:paused;}
.gallery-item{flex:0 0 auto;width:clamp(230px,28vw,320px);}
.gallery-item img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:20px;box-shadow:var(--shadow);border:5px solid #fff;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

.gallery{
  position:relative;   /* ★追加：画像配置の基準にする */
}

/* ★★★ 新規追加 ★★★ */
.gallery-deco{
  position:absolute;
  top:18%;          /* ← 「少し上」の度合い。数値を小さくするほど上に */
  right:15%;        /* ← 右からの距離。数値を小さくするほど右端に近づく */
  width:217px;      /* ← 画像サイズ。お好みで調整 */
  z-index:4;
  pointer-events:none;
}

@media(max-width:900px){
  .gallery-deco{
    width:56px;
    top:4%;
    right:4%;
  }
}

/* ===================== CAREER ===================== */
.salary{max-width:var(--maxw);margin:0 auto clamp(60px,8vw,96px);}
.salary-flow{
  display:flex;align-items:stretch;justify-content:center;gap:clamp(6px,1.5vw,18px);flex-wrap:wrap;
}
.salary-box{
  flex:1 1 0;min-width:170px;background:#fff;border-radius:var(--radius);
  padding:clamp(22px,2.6vw,32px) 1em;text-align:center;box-shadow:var(--shadow);
  border-top:6px solid var(--green);
}
.salary-box--2{border-top-color:var(--orange);}
.salary-box--3{border-top-color:var(--red);}
.salary-role{
  font-family:var(--ff-round);font-weight:900;font-size:clamp(18px,2.2vw,23px);
  color:var(--green-d);margin-bottom:.5em;
}
.salary-box--2 .salary-role{color:var(--orange);}
.salary-box--3 .salary-role{color:var(--red);}
.salary-amount{display:flex;flex-direction:column;font-family:var(--ff-round);font-weight:700;font-size:15px;line-height:1.7;}
.salary-amount .num{font-family:var(--ff-en);font-weight:800;font-size:1.9em;color:var(--ink);margin-right:.1em;}
.salary-arrow{align-self:center;font-family:var(--ff-en);font-size:30px;color:var(--green);font-weight:700;}
.salary-note{text-align:center;margin-top:1.4em;font-size:14px;color:var(--gray);}

.career-path{max-width:var(--maxw);margin:0 auto;position:relative;}
.path-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,30px);}
.path-card{
  background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  display:flex;flex-direction:column;transition:transform .3s var(--ease);
}
.path-card:hover{transform:translateY(-6px);}
.path-photo{
  aspect-ratio:16/10;
  overflow:hidden;
  background:#f7f5f0;              /* ← 追加：contain にすると余白ができるので背景色で馴染ませる */
  display:flex;                    /* ← 追加：画像を中央に配置するため */
  align-items:center;              /* ← 追加：縦中央揃え */
  justify-content:center;          /* ← 追加：横中央揃え */
}
.path-photo img{
  width:100%;height:100%;
  object-fit:contain;              /* ← coverから変更：切り取らず全体を表示する */
  padding:clamp(36px,5vw,56px);  /* ← 追加：枠ギリギリにならないよう余白を作る */
}
.path-body{padding:clamp(20px,2.4vw,28px);}
.path-role{
  font-family:var(--ff-round);font-weight:900;font-size:clamp(20px,2.4vw,25px);
  display:inline-block;margin-right:.6em;
}
.path-role--1{color:var(--green-d);}
.path-role--2{color:var(--orange);}
.path-role--3{color:var(--red);}
.path-badge{
  display:inline-block;font-size:12px;font-weight:700;color:#fff;background:var(--ink);
  padding:.2em .9em;border-radius:999px;vertical-align:.18em;margin-bottom:.8em;
}
.path-body p{font-size:14px;color:#4a4f52;}
.career-note{text-align:center;margin-top:1.6em;font-size:13px;color:var(--gray);}

/* ★★★ 新規追加 ★★★ */
.career-deco{
  position:absolute;
  top:8%;
  left:15%;
  width:99px;
  z-index:4;
  pointer-events:none;
}

@media(max-width:900px){
  .career-deco{
    width:56px;
    top:4%;
    left:4%;
  }
}



/* ===================== POSITIONS ===================== */
.positions-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,36px);align-items:start;}
.pos-card{
  background:#fff;border-radius:var(--radius);padding:clamp(26px,3.4vw,40px);
  box-shadow:var(--shadow);border:3px solid #fff;position:relative;
}

/* ★★★ 新規追加 ★★★ */
.pos-card-deco{
  position:absolute;
  top:-35px;
  left:-50px;
  width:170px;
  z-index:4;
  pointer-events:none;
}

@media(max-width:900px){
  .pos-card-deco{
    width:48px;
    top:-10px;
    left:-10px;
  }
}

/* スマホ（SP）では星の装飾を非表示 */
@media(max-width:600px){
  .pos-card-deco{ display:none; }
}

.pos-card--accent{position:relative;}

.pos-card__title{
  font-family:var(--ff-round);font-weight:900;font-size:clamp(22px,2.8vw,30px);
  color:var(--ink);text-align:center;margin-bottom:1em;padding-bottom:.6em;
  border-bottom:3px dotted #d8e6e0;
}
.pos-card--accent .pos-card__title{color:var(--green-d);}
.pos-list>div{display:flex;gap:.6em;margin-bottom:1em;font-size:14.5px;}
.pos-list dt{flex:0 0 auto;font-weight:700;color:var(--ink);white-space:nowrap;}
.pos-list dd{color:#4a4f52;}
.pos-qual{margin-top:.5em;font-size:13px;background:var(--mint);border-radius:14px;padding:.8em 1em;color:#3b5e54;line-height:1.9;}


/* ★★★ 新規追加 ★★★ */
.pos-card-accent-deco{
  position:absolute;
  bottom:-30px;
  right:-20px;
  width:88px;
  z-index:4;
  pointer-events:none;
}

@media(max-width:900px){
  .pos-card-accent-deco{
    width:62px;
    bottom:-10px;
    right:-10px;
  }
}

/* スマホ（SP）：少し小さくし、本文の下〜右下角へ寄せて文字との重なりを回避 */
@media(max-width:600px){
  .pos-card-accent-deco{
    width:52px;
    bottom:-26px;
    right:-12px;
  }
}

/* ===================== FACILITY ===================== */
.facility-list{max-width:var(--maxw);margin:0 auto;display:grid;gap:clamp(22px,3vw,34px);}
.facility-card{
  background:#fff;border-radius:var(--radius);padding:clamp(24px,3vw,38px);
  box-shadow:var(--shadow);display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(20px,3vw,40px);align-items:center;position:relative;
}
.facility-cat{font-size:12px;font-weight:700;color:var(--gray);}
.facility-name{
  font-family:var(--ff-round);font-weight:900;font-size:clamp(22px,2.8vw,30px);
  color:var(--ink);margin:.1em 0 .7em;
}
.facility-name::before{content:"";display:inline-block;width:10px;height:24px;background:var(--green);border-radius:3px;margin-right:.5em;vertical-align:-.25em;}
.facility-addr{font-size:14.5px;color:#4a4f52;}
.facility-photos{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.facility-photos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:16px;}
.facility-note{text-align:center;margin-top:1.6em;font-size:13px;color:var(--gray);}

/* ★★★ 新規追加 ★★★ */
.facility-card-deco{
  position:absolute;
  top:-62%;
  left:20%;
  transform:translateX(-50%);
  width:200px;
  z-index:4;
  pointer-events:none;
}

@media(max-width:900px){
  .facility-card-deco{
    width:48px;
    top:-18px;
  }
}

/* ★★★ 新規追加 ★★★ */
.facility-card-deco2{
  position:absolute;
  top:-30px;
  right:-20px;
  width:200px;
  z-index:4;
  pointer-events:none;
}

@media(max-width:900px){
  .facility-card-deco2{
    width:48px;
    top:10px;
    right:-10px;
  }
}

/* スマホ（SP）の施設情報装飾 */
@media(max-width:600px){
  /* 台形（屋根）素材2つは非表示 */
  .facility-card-deco2{ display:none; }
  /* 拠点画像：中央寄りから左上の枠角へ。上方向に移動しテキストと重ねない＋若干大きく */
  .facility-card-deco{
    left:6px;
    right:auto;
    top:-33px;
    transform:none;
    width:60px;
  }
}

/* ===================== ENTRY ===================== */
.entry{
  background:
    radial-gradient(120% 100% at 50% 0%, var(--green) 0%, var(--green-d) 100%);
  color:#fff;position:relative; 
}
.entry-bug{position:absolute;width:54px;top:8%;left:6%;animation:bob 5s ease-in-out infinite;}
.entry-inner{max-width:880px;margin:0 auto;text-align:center;}
.entry-sub{font-family:var(--ff-round);font-weight:700;font-size:clamp(18px,2.2vw,24px);margin-bottom:.6em;}
.entry-lead{font-size:15px;line-height:2;margin-bottom:clamp(30px,4vw,48px);opacity:.96;}
.entry-card{position:relative;background:#fff;color:var(--ink);border-radius:var(--radius);padding:clamp(26px,3.6vw,46px);box-shadow:0 30px 60px -30px rgba(0,0,0,.5);text-align:left;}
.entry-card__top{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.6vw,32px);align-items:start;}
/* ボタン → QR → ID を縦並び・中央揃え */
.entry-line{display:flex;flex-direction:column;align-items:center;gap:.8em;text-align:center;}
.line-badge{
  display:block;width:195px;          /* 旧130px → 約1.5倍に拡大 */
  font-family:var(--ff-round);font-weight:900;font-size:18px;line-height:1.45;color:#fff;
  text-align:center;
  background:#06c755;padding:.85em 1em;border-radius:16px;
  box-shadow:0 10px 22px -6px rgba(6,199,85,.55),0 3px 6px rgba(0,0,0,.12); /* ボタンらしいドロップシャドウ */
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s;
}
.line-badge:hover{
  transform:translateY(-3px);background:#05b54d;
  box-shadow:0 16px 30px -8px rgba(6,199,85,.6),0 4px 8px rgba(0,0,0,.14);
}
.line-badge:active{transform:translateY(-1px);}
.line-id{font-weight:700;font-size:14px;color:var(--gray);}
.line-qr img{width:130px;height:130px;border-radius:14px;border:2px solid #eee;}
.entry-steps p{font-size:14px;margin-bottom:.7em;display:flex;gap:.4em;}
.step-no{color:var(--green);font-weight:800;flex:0 0 auto;}
.step-list{margin:.2em 0 .8em 1.6em;display:flex;flex-wrap:wrap;gap:.4em .9em;}
.step-list li{font-size:13.5px;background:var(--mint);color:#3b5e54;font-weight:700;padding:.2em .9em;border-radius:999px;}
.entry-tel{margin-top:1.6em;padding-top:1.4em;border-top:2px dotted #e0e0e0;text-align:center;font-size:14px;color:#4a4f52;}
.entry-tel strong{font-family:var(--ff-en);font-weight:800;font-size:1.5em;color:var(--green-d);letter-spacing:.02em;}
.entry-tel .tel-num{white-space:nowrap;color:var(--green-d);}   /* 電話リンク（タップで発信） */
/* SPでは4段表示。電話番号は単独行になるので大きく・見やすく */
@media(max-width:600px){
  .entry-tel{line-height:1.9;}
  .entry-tel strong{font-size:2em;letter-spacing:.03em;}
}


/* カード基準で左下角に配置（中央寄せのカードでも常に左下に来る） */
.entry-deco-bl{
  position:absolute;
  left:-10px;           /* カード左端から少しはみ出して枠にかかる */
  bottom:-34px;         /* カード下端から少し下げる */
  width:110px;
  z-index:2;
  pointer-events:none;
}

@media(max-width:900px){
  .entry-deco-bl{
    width:52px;
    left:2px;
    bottom:-16px;
  }
}

/* ===================== FOOTER ===================== */
.site-footer{background:var(--ink);color:#fff;text-align:center;padding:36px 20px;}
.footer-copy{font-size:13px;letter-spacing:.04em;opacity:.85;}

/* ===================== TO TOP ===================== */
.to-top{
  position:fixed;right:20px;bottom:20px;z-index:90;
  width:50px;height:50px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--green);color:#fff;font-size:20px;font-weight:700;
  box-shadow:0 12px 24px -10px rgba(0,190,135,.7);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .3s,visibility .3s,transform .3s var(--ease),background .3s;
}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0);}
.to-top:hover{background:var(--green-d);}

/* ===================== REVEAL ===================== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.is-visible{opacity:1;transform:none;}

/* ===================== RESPONSIVE ===================== */
@media(max-width:900px){
  .header-tagline{display:none;}
  .header-nav{
    position:fixed;
    top:0;right:0;bottom:auto;left:auto;
    height:100vh;height:100dvh;            /* ← backdrop-filter基準でも全画面高さに（白背景が全面に出る） */
    width:min(82vw,330px);
    flex-direction:column;justify-content:center;align-items:stretch;gap:2px;
    background:#ffffff;
    box-shadow:-14px 0 44px -16px rgba(0,0,0,.45);
    transform:translateX(100%);transition:transform .4s var(--ease);
    margin-left:0;padding:84px 26px 40px;
    overflow-y:auto;
  }
  .header-nav.open{transform:translateX(0);}
  /* メニュー項目を見やすく（太字・区切り線） */
  .header-nav>a:not(.header-cta){
    font-size:18px;font-weight:700;color:var(--ink);
    text-align:center;padding:1.05em 0;
    border-bottom:1px solid #e9efed;
  }
  .header-nav>a:not(.header-cta):first-of-type{border-top:1px solid #e9efed;}
  .header-nav>a:not(.header-cta)::after{display:none;} /* SPでは下線ホバーは使わない */
  .header-cta{align-self:center;margin-top:20px;font-size:17px;padding:.8em 2.2em;}
  .nav-toggle{display:flex;}

  /* メニューを開いた時、背景を暗くして項目を読みやすく */
  body:has(.header-nav.open)::before{
    content:"";position:fixed;inset:0;z-index:99;
    background:rgba(18,28,26,.5);
  }

  .hero-inner{grid-template-columns:1fr;text-align:center;}
  .hero-text{order:2;display:flex;flex-direction:column;align-items:center; min-width:0; }
  .hero-visual{order:1;max-width:340px;margin:0 auto;}
  .hero-lead{margin-left:auto;margin-right:auto;}
  .hero-insect{bottom:auto;top:40%;}

  .message-inner{grid-template-columns:1fr;}
  .message-photo{max-width:340px;margin:0 auto 28px;}
  .field-cards,.value-cards,.timeline,.path-cards,.positions-grid{grid-template-columns:1fr;}
  .value-cards{gap:46px;}
  .salary-flow{flex-direction:column;align-items:stretch;}
  .salary-arrow{transform:rotate(90deg);}
  .facility-card{grid-template-columns:1fr;}
  .entry-card__top{grid-template-columns:1fr;justify-items:center;text-align:center;}
  .entry-steps{text-align:left;}
  .sp-only{display:inline;}
}
@media(max-width:480px){
  .header-logos{gap:6px;}
  .logo{height:28px;}
  .gallery-item{width:230px;}
  .entry-card__top{gap:18px;}
}

/* ===================== SP HERO (smartphone first view) =====================
   ・キャッチコピーまでが上部600〜700px内に収まるよう余白を圧縮
   ・テキストは左寄せ、各要素の間隔を整理
   ・星/花などの装飾は30〜50%縮小し、写真・テキストに重ならない位置へ
========================================================================== */
@media(max-width:600px){
  .hero{
    padding:84px 22px 40px;     /* 固定ヘッダー分を確保しつつ上下を圧縮 */
  }
  /* 並び順を①ラベル →②写真 →③社会人採用＋キャッチコピー… に組み替える。
     hero-text / hero-badge を display:contents で展開し、
     ラベル(span)・写真・社会人採用(strong)・コピー…を hero-inner 直下の
     フレックス子要素として order で並べ替える */
  .hero-inner{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    text-align:left;
    gap:0;
  }
  .hero-text{display:contents;}
  .hero-badge{display:contents;}

  /* ① 児童発達支援 / 放課後等デイサービス（ラベル） */
  .hero-badge span{
    order:1;
    align-self:flex-start;
    font-size:11px;
    padding:.35em .9em;
  }
  /* ② 写真 */
  .hero-visual{
    order:2;
    align-self:center;
    width:100%;
    max-width:min(250px,68vw);   /* 極小幅では写真を少し縮めて装飾の余白を確保 */
    margin:16px auto 22px;
  }
  /* ③ 社会人採用 */
  .hero-badge strong{
    order:3;
    align-self:flex-start;
    font-size:22px;
    margin-bottom:.15em;
  }
  /* ④ キャッチコピー */
  .hero-copy{
    order:4;
    font-size:clamp(21px,6.2vw,25px);
    line-height:1.5;
    letter-spacing:.02em;
    margin-bottom:.6em;
    text-align:left;
  }
  /* ⑤ リード文 */
  .hero-lead{
    order:5;
    font-size:13.5px;
    line-height:1.85;
    margin:0 0 1.4em;
    max-width:none;
    text-align:left;
  }
  /* ⑥ ENTRY ボタン：PC用の右寄せオフセットを解除し、アイコン分だけ左に余白 */
  .hero-text .btn-entry{
    order:6;
    align-self:flex-start;
    top:0;
    left:0;
    margin-left:48px;
  }
  .btn-entry__icon{
    width:92px;
    height:62px;
    left:-44px;
  }

  /* 写真：はみ出しをやめて枠内に収める */
  .hero-photo{
    width:100%;
    margin-left:0;
    margin-top:0;
  }

  /* ---------- 装飾イラスト（30〜50%縮小・非重なり配置） ---------- */
  .hero-cloud--1{width:74px;top:6%;left:3%;}
  .hero-cloud--2{width:56px;top:3%;right:4%;}
  /* 星：ヘッダー(62px)下〜写真上端の隙間（ラベル右側の余白）に固定配置。
     top を px 固定にすることで全幅でヘッダー・写真と重ならない */
  .hosihana{
    width:min(80px,20vw); /* 175px → 約46%（隙間に収まるサイズ） */
    right:2%;
    top:66px;
    bottom:auto;
  }
  /* 花（hero-insect）：本文ブロック右下のあき（ボタン右側）に小さく配置 */
  .hero-insect{
    width:44px;          /* 100px → 約44% */
    right:1%;
    top:auto;
    bottom:9%;
  }
}

/* ===================== SP 共通ベース＋MESSAGE =====================
   ファーストビューで定めた基本ルール（:root のトークン）を
   共通コンポーネントと代表メッセージに適用し、統一感を出す。
================================================================= */
@media(max-width:600px){
  /* ---------- 共通タイポグラフィ（全セクション見出し・ラベル） ---------- */
  .en-label{font-size:var(--fs-label);}
  .jp-title{font-size:var(--fs-heading);line-height:var(--lh-heading);}
  .block-title{font-size:var(--fs-sub);}
  .section-head{margin-bottom:var(--sp-5);}

  /* ---------- MESSAGE：FVと統一したフォント・余白 ---------- */
  .message{padding:var(--sp-section-y) var(--gut);}
  .message-inner{gap:var(--sp-4);}
  .message-photo{max-width:300px;margin:0 auto var(--sp-4);}

  /* 緑の引用リード：nowrap を解除して折り返し、サイズ・行間を統一 */
  .message-lead{
    font-size:var(--fs-lead);
    line-height:var(--lh-heading);
    letter-spacing:.02em;
    white-space:normal;
    margin-top:0;
    margin-bottom:var(--sp-3);
  }
  /* 本文：FVのリード文と同じ 14px / 1.85 に統一 */
  .message-body p:not(.message-lead){
    font-size:var(--fs-body);
    line-height:var(--lh-body);
    margin-bottom:var(--sp-2);
  }
  .message-body p:not(.message-lead):last-child{margin-bottom:0;}

  /* 装飾（flag/insects）はSPでは画面外で機能していないため一旦非表示。
     位置調整は装飾フェーズで別途行う */
  .message-body .flag,
  .message .mushitati{display:none;}
}