/* ==========================================================================
   青空交通株式会社 整備士採用サイト
   モバイルファースト / 1画面＝1セクションのスワイプ型
   参考：nebane.jp（手描きイラスト・白×淡いブルーグレー・手書き風見出し）
   PCは中央にスマホ幅のカラム、左右レールにロゴ・募集要項/エントリーを固定
   ========================================================================== */
:root{
  --blue:#303ec9;
  --blue-l:#5468e8;
  --sea:#2d8cf0;
  --teal:#10c6b1;   /* ヒアリングシート指定のアクセントカラー */
  --accent:#10c6b1;
  --sun:#ffd23f;
  --orange:#ff983c;
  --coral:#ff6b5c;
  --green:#2fa556;
  --ink:#15171f;
  --paper:#ffffff;
  --mist:#e3ebf4;
  --mist-d:#c6d4e8;
  --text-sub:#4c5368;
  --col:430px;
  --header:64px;
  --font-hand:"Mochiy Pop One","Zen Maru Gothic",sans-serif;
  --font-latin:"Darumadrop One","Yusei Magic",sans-serif;
  --font:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans",sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  /* 手描きの波線（上：塗り領域のマスク / 下：輪郭線） */
  --wave-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 18'%3E%3Cpath d='M0 0V7Q30 17 60 7T120 7V0Z'/%3E%3C/svg%3E");
  --wave-line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 18'%3E%3Cpath d='M0 7Q30 17 60 7T120 7' fill='none' stroke='%2315171f' stroke-width='3.2'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:var(--font);
  font-weight:500;
  color:var(--ink);
  background:var(--blue);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  line-height:1.9;
  letter-spacing:.05em;
}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
p{margin:0}
em{font-style:normal}

/* ---------- 背景（PCで見える左右の余白）：ベースカラーの海 ---------- */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 140'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' opacity='.13'%3E%3Cpath d='M20 30q10-8 20 0t20 0'/%3E%3Cpath d='M120 90q10-8 20 0t20 0'/%3E%3C/g%3E%3C/svg%3E") 0 0/200px 140px,
    var(--blue);
}
body::after{
  content:"";position:fixed;left:0;right:0;bottom:0;height:110px;z-index:0;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60'%3E%3Cpath d='M0 18 Q30 4 60 18 T120 18 T180 18 T240 18 V60 H0Z' fill='%2362d4dc' stroke='%2315171f' stroke-width='3.5'/%3E%3Cpath d='M0 36 Q30 22 60 36 T120 36 T180 36 T240 36 V60 H0Z' fill='%232d8cf0' stroke='%2315171f' stroke-width='3.5'/%3E%3Cpath d='M30 48q8-6 16 0t16 0M150 50q8-6 16 0t16 0' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 100%/240px 60px;
  animation:sea 10s linear infinite;
}
@keyframes sea{to{background-position:240px 100%}}

/* ---------- スライダー（中央カラム） ---------- */
.slider{
  position:fixed;top:0;bottom:0;left:50%;z-index:2;
  width:min(100vw,var(--col));
  transform:translateX(-50%);
  overflow-y:auto;overflow-x:hidden;
  scroll-snap-type:y mandatory;
  scroll-behavior:smooth;
  overscroll-behavior:contain;
  scrollbar-width:none;
  background:var(--paper);
}
.slider::-webkit-scrollbar{display:none}
.page{
  position:relative;
  height:100vh;height:100dvh;
  scroll-snap-align:start;scroll-snap-stop:always;
  overflow:hidden;
  padding:calc(var(--header) + 18px) 22px 76px;
  display:flex;flex-direction:column;
  background:var(--paper);
}
.page--scroll{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.page--scroll::-webkit-scrollbar{display:none}
.page-grid{position:relative;z-index:1;display:flex;flex-direction:column;gap:14px;margin:auto 0}
.page--scroll .page-grid{margin:0}

/* ---------- 全幅イラスト（下辺が手描きの波線） ---------- */
.page--illust{padding-top:var(--header)}
.page--illust .page-grid{margin:14px 0 auto;gap:12px}
.scene{
  position:relative;flex:none;
  margin:0 -22px;
  height:clamp(160px,34dvh,320px);
}
.scene img{
  width:100%;height:100%;object-fit:cover;object-position:50% 60%;
  -webkit-mask:linear-gradient(#000,#000) 0 0/100% calc(100% - 17px) no-repeat,var(--wave-mask) 0 100%/120px 18px repeat-x;
          mask:linear-gradient(#000,#000) 0 0/100% calc(100% - 17px) no-repeat,var(--wave-mask) 0 100%/120px 18px repeat-x;
}
.scene::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:18px;pointer-events:none;
  background:var(--wave-line) 0 0/120px 18px repeat-x;
}
@media (prefers-reduced-motion:no-preference){
  .scene img{animation:none}
  .scene::after{animation:wave 5s linear infinite}
  .scene img{-webkit-mask-position:0 0,0 100%;mask-position:0 0,0 100%}
  .page.is-active .scene img{animation:waveMask 5s linear infinite}
}
@keyframes wave{to{background-position:120px 0}}
@keyframes waveMask{to{-webkit-mask-position:0 0,120px 100%;mask-position:0 0,120px 100%}}

/* ---------- 見出し ---------- */
.sec-head{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.sec-no{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-latin);font-size:13px;letter-spacing:.16em;line-height:1;
  color:var(--ink);
}
.sec-no b{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:400;font-size:46px;letter-spacing:0;line-height:.9;
  color:var(--blue);
  -webkit-text-stroke:2.5px var(--ink);paint-order:stroke fill;
  text-shadow:3px 3px 0 var(--accent);
}
.sec-no b::after{content:"";width:24px;height:3px;border-radius:2px;background:var(--ink)}
.sec-title{
  margin:0;
  font-family:var(--font-hand);font-weight:400;
  font-size:clamp(27px,7.6vw,32px);line-height:1.38;letter-spacing:.05em;
  color:var(--ink);
}
.sec-title em{color:var(--blue)}
.sec-title--sm{font-size:clamp(22px,6.4vw,27px)}
.sec-title small{display:block;font-size:.6em;color:var(--blue)}

.sec-body{display:flex;flex-direction:column;gap:10px;font-size:14px;line-height:1.95;line-break:strict;word-break:auto-phrase}
/* 読点のあとの改行はスマホ幅では流し込み（1文字だけ残る行を防ぐ）。文言は変えない */
p:not(.work-lead) br.flow{display:none}
.sec-body .em{
  font-weight:700;
  margin-top:2px;padding:10px 16px;border-radius:16px;
  background:var(--paper);color:var(--ink);
  border:2.5px solid var(--ink);box-shadow:5px 5px 0 rgba(16,198,177,.55);
}

/* ---------- 00 HERO（動画） ---------- */
.page--hero{padding:0;background:#c4e9ff}
.hero-media{position:absolute;inset:0;background:#c4e9ff url("assets/hero-poster.jpg") center/cover}
.hero-media video{width:100%;height:100%;object-fit:cover}
.hero-copy{position:absolute;left:16px;right:16px;top:64%;z-index:1;text-align:center;transform:translateY(-50%)}
.hero-kicker{
  display:inline-block;padding:1px 14px;border-radius:999px;
  background:var(--paper);border:2.5px solid var(--ink);
  font-family:var(--font-latin);font-size:13px;letter-spacing:.18em;color:var(--blue);
}
.hero-catch{
  margin-top:6px;
  font-family:var(--font-hand);font-size:clamp(34px,10.2vw,44px);line-height:1.3;letter-spacing:.06em;
  color:var(--paper);
  -webkit-text-stroke:7px var(--ink);paint-order:stroke fill;
}
.hero-catch span{display:block}
.hero-catch span:nth-child(2){color:var(--sun)}
.swipe-hint{
  position:absolute;left:50%;bottom:22px;z-index:1;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:4px;
  background:none;border:0;color:var(--paper);
  font-family:var(--font-latin);font-size:13px;letter-spacing:.2em;
  -webkit-text-stroke:4px var(--ink);paint-order:stroke fill;
}
.swipe-hint i{width:4px;height:34px;background:rgba(21,23,31,.35);position:relative;overflow:hidden;border-radius:2px}
.swipe-hint i::after{content:"";position:absolute;left:0;right:0;top:-40%;height:40%;background:var(--paper);animation:hint 1.6s ease-in-out infinite}
@keyframes hint{to{top:100%}}
@media (prefers-reduced-motion:no-preference){
  .page--hero.is-active .hero-kicker{animation:pop .7s var(--ease) both}
  .page--hero.is-active .hero-catch span{animation:pop .8s var(--ease) both}
  .page--hero.is-active .hero-catch span:nth-child(1){animation-delay:.1s}
  .page--hero.is-active .hero-catch span:nth-child(2){animation-delay:.25s}
}
@keyframes pop{from{opacity:0;transform:translateY(14px) rotate(-2deg) scale(.94)}to{opacity:1;transform:none}}

/* ---------- 各ページの地色（白 ⇔ 淡いブルーグレーを交互に） ---------- */
.page--island,.page--work,.page--voice,.page--entry{background:var(--mist)}
.page--island .sec-body .em,.page--work .sec-body .em{box-shadow:5px 5px 0 rgba(16,198,177,.55)}
.work-lead{
  font-family:var(--font-hand);font-size:clamp(20px,6vw,24px);line-height:1.4;
  color:var(--blue);
}

/* ---------- 05-06 POINT（ポストカード） ---------- */
.page--point{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 430 120' preserveAspectRatio='none'%3E%3Cpath d='M0 40 Q54 20 108 40 T215 40 T322 40 T430 40 V120 H0Z' fill='%2362d4dc' stroke='%2315171f' stroke-width='3.5'/%3E%3Cpath d='M0 76 Q54 58 108 76 T215 76 T322 76 T430 76 V120 H0Z' fill='%232d8cf0' stroke='%2315171f' stroke-width='3.5'/%3E%3C/svg%3E") no-repeat 50% 100%/100% 120px,
    var(--mist);
}
.postcards{display:flex;flex-direction:column;gap:22px}
.postcard{
  position:relative;
  padding:16px 18px;
  background:
    repeating-linear-gradient(0deg,transparent 0 27px,rgba(48,62,201,.07) 27px 28px),
    var(--paper);
  border:2.5px solid var(--ink);border-radius:10px;
  box-shadow:6px 6px 0 var(--mist-d);
  font-size:13.5px;line-height:1.85;
}
.postcard--a{transform:rotate(-1.6deg);margin-right:18px}
.postcard--b{transform:rotate(1.4deg);margin-left:18px}
.postcard-label{
  font-family:var(--font-latin);font-size:14px;letter-spacing:.16em;color:var(--sea);
  border-bottom:2px dashed var(--mist-d);padding-bottom:4px;margin-bottom:8px;padding-right:76px;
}
.postcard h3{
  margin:0 0 6px;word-break:auto-phrase;
  font-family:var(--font-hand);font-weight:400;font-size:19px;line-height:1.4;color:var(--ink);
}
.pc-point{display:block;font-size:14px;color:var(--blue);letter-spacing:.1em}
.stamp{
  position:absolute;right:14px;top:-14px;
  width:62px;height:72px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--font-latin);font-size:30px;line-height:1;color:var(--paper);
  background:var(--blue);
  border:3px dotted var(--paper);
  box-shadow:0 0 0 5px var(--paper),0 0 0 7.5px var(--ink);
  transform:rotate(6deg);
}
.stamp small{font-size:12px;letter-spacing:.1em;margin-bottom:4px;color:var(--sun)}
.stamp--teal{background:var(--teal)}
.stamp--teal small{color:var(--ink)}
.stamp--coral{background:var(--coral)}
.stamp--sun{background:var(--sun);color:var(--ink)}
.stamp--sun small{color:var(--blue)}
.flower{
  position:absolute;left:-16px;top:-18px;width:46px;height:46px;z-index:1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cg stroke='%2315171f' stroke-width='3' stroke-linejoin='round'%3E%3Cpath fill='%23ff6b5c' d='M30 30 C20 4 40 4 30 30 C56 20 56 40 30 30 C40 56 20 56 30 30 C4 40 4 20 30 30Z'/%3E%3Ccircle cx='30' cy='30' r='6' fill='%23ffd23f'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}
.flower--y{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cg stroke='%2315171f' stroke-width='3' stroke-linejoin='round'%3E%3Cpath fill='%23ffd23f' d='M30 30 C20 4 40 4 30 30 C56 20 56 40 30 30 C40 56 20 56 30 30 C4 40 4 20 30 30Z'/%3E%3Ccircle cx='30' cy='30' r='6' fill='%23ff6b5c'/%3E%3C/g%3E%3C/svg%3E")}
.postcard--b .flower{left:auto;right:-14px;top:auto;bottom:-16px}

/* ---------- 07 一日の流れ ---------- */
.timeline{list-style:none;margin:6px 0 0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:31px;top:8px;bottom:8px;border-left:3px dashed var(--blue)}
.timeline li{position:relative;display:grid;grid-template-columns:64px 1fr;gap:12px;padding:0 0 14px}
.timeline time{
  position:relative;z-index:1;align-self:start;
  display:grid;place-items:center;height:30px;border-radius:999px;
  font-family:var(--font-latin);font-size:16px;
  background:var(--blue);color:var(--paper);border:2.5px solid var(--ink);
}
.timeline time.is-blank{width:18px;height:18px;margin:6px auto 0;background:var(--sun);border-radius:50%}
.timeline li div{
  background:var(--paper);border:2.5px solid var(--ink);border-radius:14px;padding:8px 12px;
  box-shadow:4px 4px 0 var(--mist-d);font-size:13px;line-height:1.75;
}
.timeline h3{margin:0;font-size:15px;font-weight:900;color:var(--blue)}
.timeline .is-lunch div{background:#fff6d6}
.timeline .is-off div{background:#dcf6f3}
.timeline .note{color:var(--coral);font-weight:700}

/* ---------- 08 欲しい人物像・仲間の声 ---------- */
.quote-line{font-weight:900;font-size:16px;color:var(--blue)}
.voice{margin-top:4px}
.voice-label{
  display:inline-block;margin-bottom:8px;padding:0 16px;
  font-family:var(--font-hand);font-size:18px;color:var(--paper);
  background:var(--blue);border:2.5px solid var(--ink);border-radius:999px;
}
.voice-row{display:grid;grid-template-columns:68px 1fr;gap:12px;align-items:start}
.voice-face{width:68px;height:68px;margin-top:6px}
.bubble{
  position:relative;
  background:var(--paper);border:2.5px solid var(--ink);border-radius:20px;
  padding:14px 16px;box-shadow:5px 5px 0 var(--mist-d);
  font-size:13.5px;line-height:1.85;color:var(--ink);font-weight:700;
}
.bubble::before{
  content:"";position:absolute;left:-12px;top:26px;width:18px;height:18px;
  background:var(--paper);border-left:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);
  transform:rotate(45deg) skew(10deg,10deg);
}

/* ---------- 09-10 会社概要・募集要項 ---------- */
.info-table{margin:0;display:flex;flex-direction:column;
  background:var(--paper);color:var(--ink);border:2.5px solid var(--ink);border-radius:18px;box-shadow:6px 6px 0 var(--mist-d);overflow:hidden}
.info-table div{display:grid;grid-template-columns:84px 1fr;border-bottom:2px dashed var(--mist-d)}
.info-table div:last-child{border-bottom:0}
.info-table dt{padding:12px 10px;font-weight:900;font-size:13px;color:var(--blue);background:var(--mist)}
.info-table dd{margin:0;padding:12px;font-size:13px;line-height:1.8;word-break:break-word}
.info-table strong{color:var(--coral);font-size:15px}
.info-table .gap{display:block;height:8px}
.page--req{background:var(--blue);color:var(--paper)}
.page--req .sec-title{color:var(--paper)}
.page--req .info-table{box-shadow:6px 6px 0 rgba(21,23,31,.35)}

/* ---------- 11 エントリー ---------- */
.sec-head--entry{text-align:center;align-items:center}
.entry-title{
  margin:4px 0 0;font-family:var(--font-latin);font-weight:400;
  font-size:clamp(42px,12vw,54px);line-height:1.1;color:var(--blue);
}
.entry-sub{font-family:var(--font-hand);font-size:21px;color:var(--ink)}
.entry-form{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.field{display:flex;flex-direction:column;gap:6px}
.field>span{display:flex;align-items:center;gap:8px;font-weight:900;font-size:14px}
.field em,.field i{font-style:normal;font-size:11px;padding:0 8px;border-radius:999px;border:2px solid var(--ink);line-height:1.6}
.field em{background:var(--coral);color:var(--paper)}
.field i{background:var(--paper)}
.field input,.field textarea,.field select{
  width:100%;font:inherit;font-size:16px;color:var(--ink);
  padding:12px 14px;border-radius:12px;border:2.5px solid var(--ink);background:var(--paper);
  outline:none;
  -webkit-appearance:none;appearance:none;
}
.field select{background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2315171f' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center/12px}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(48,62,201,.25)}
.entry-form.is-checked :invalid{border-color:var(--coral);box-shadow:0 0 0 3px rgba(255,107,92,.25)}
.form-note{font-size:11.5px;color:var(--text-sub);line-height:1.7}
.form-note.is-alert{color:var(--coral);font-weight:700}
.site-footer{text-align:center;font-size:11px;margin-top:22px;color:var(--text-sub)}

/* ---------- ボタン（nebane風：フラットな青＋手描きの枠） ---------- */
.btn{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 12px 9px 22px;border-radius:999px;
  border:3px solid var(--ink);
  font-weight:900;font-size:16px;text-align:left;line-height:1.3;
  transition:transform .2s var(--ease),background-color .2s;
}
.btn small{display:block;font-family:var(--font-latin);font-weight:400;font-size:11px;letter-spacing:.16em;opacity:.9}
.btn b{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;font-size:16px;flex:none}
.btn--entry{background:var(--accent);color:var(--ink)}
.btn--entry b{background:var(--ink);color:var(--paper)}
.btn--req{background:var(--paper);color:var(--ink)}
.btn--req b{background:var(--ink);color:var(--paper)}
.btn--wide{width:100%;margin-top:8px;justify-content:center;gap:16px;text-align:center}
@media (hover:hover){.btn:hover{transform:translateY(-2px) rotate(-1deg)}}
.btn:active{transform:translateY(1px)}

.next-arrow{
  position:absolute;left:50%;bottom:14px;z-index:2;transform:translateX(-50%);
  width:40px;height:40px;border-radius:50%;
  background:var(--paper);border:2.5px solid var(--ink);
}
.next-arrow::after{content:"";position:absolute;left:50%;top:44%;width:10px;height:10px;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:translate(-50%,-50%) rotate(45deg)}
@media (prefers-reduced-motion:no-preference){.next-arrow{animation:nudge 1.8s ease-in-out infinite}}
@keyframes nudge{0%,100%{translate:0 0}50%{translate:0 5px}}

/* ---------- 手描きロゴ（文字ごとに色を変える） ---------- */
.logo-type{display:inline-flex;font-family:var(--font-hand);line-height:1;letter-spacing:0}
.logo-type i{
  font-style:normal;
  -webkit-text-stroke:5px var(--ink);paint-order:stroke fill;
}
.logo-type i:nth-child(1){color:var(--blue);transform:rotate(-4deg)}
.logo-type i:nth-child(2){color:var(--sea);transform:translateY(2px) rotate(3deg)}
.logo-type i:nth-child(3){color:var(--orange);transform:rotate(-2deg)}
.logo-type i:nth-child(4){color:var(--green);transform:translateY(1px) rotate(4deg)}

/* ---------- SP ヘッダー・メニュー ---------- */
.site-header{
  position:fixed;top:0;left:50%;z-index:20;transform:translateX(-50%);
  width:min(100vw,var(--col));height:var(--header);
  display:flex;align-items:center;justify-content:space-between;padding:0 14px 0 16px;
  background:var(--paper);
}
.site-header::after{
  content:"";position:absolute;left:0;right:0;top:calc(100% - 7px);height:18px;pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 18'%3E%3Cpath d='M0 0V7Q30 17 60 7T120 7V0Z' fill='%23fff'/%3E%3Cpath d='M0 7Q30 17 60 7T120 7' fill='none' stroke='%2315171f' stroke-width='3.2'/%3E%3C/svg%3E") 0 0/120px 18px repeat-x;
}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none}
.brand .logo-type{font-size:27px}
.brand small{
  font-size:10.5px;font-weight:900;letter-spacing:.08em;color:var(--paper);
  background:var(--blue);padding:1px 8px;border-radius:999px;
}
.menu-button{
  position:relative;z-index:1;
  width:46px;height:46px;border-radius:50%;padding:0;
  background:var(--paper);border:3px solid var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
}
.menu-button span{width:18px;height:3px;border-radius:2px;background:var(--ink);transition:transform .3s var(--ease),opacity .3s}
.menu-button[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-button[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-button[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu{
  position:fixed;top:0;bottom:0;left:50%;z-index:15;
  width:min(100vw,var(--col));transform:translateX(-50%);
  background:var(--mist);color:var(--ink);
  overflow-y:auto;padding:calc(var(--header) + 26px) 24px 32px;
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;
}
.menu.is-open{opacity:1;visibility:visible}
.menu-kicker{font-family:var(--font-latin);color:var(--blue);letter-spacing:.2em}
.menu ol{list-style:none;margin:10px 0 20px;padding:0}
.menu li a{
  display:flex;align-items:baseline;gap:12px;padding:9px 0;text-decoration:none;font-weight:900;font-size:15px;
  border-bottom:2px dashed var(--mist-d);
}
.menu li a i{font-style:normal;font-family:var(--font-latin);color:var(--blue);width:26px}
.menu li a small{margin-left:auto;font-family:var(--font-latin);font-size:11px;letter-spacing:.14em;color:var(--sea)}
.menu-cta{display:flex;flex-direction:column;gap:12px}

.floating-entry{
  position:fixed;z-index:12;bottom:16px;right:max(14px,calc(50% - var(--col)/2 + 14px));
  padding:7px 8px 7px 18px;font-family:var(--font-latin);font-weight:400;font-size:17px;letter-spacing:.12em;
  transform:rotate(-2deg);
  transition:opacity .3s,transform .3s var(--ease);
}
.floating-entry.is-hidden{opacity:0;pointer-events:none;transform:translateY(20px) rotate(-2deg)}
.floating-entry b{width:28px;height:28px}

/* ---------- 出現アニメーション ---------- */
@media (prefers-reduced-motion:no-preference){
  .page:not(.page--hero) .page-grid>*{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .page.is-active .page-grid>*{opacity:1;transform:none}
  .page.is-active .page-grid>*:nth-child(2){transition-delay:.1s}
  .page.is-active .page-grid>*:nth-child(3){transition-delay:.2s}
  .page.is-active .page-grid>*:nth-child(4){transition-delay:.3s}
  .scene img{transition:transform 1.2s var(--ease)}
  .page:not(.is-active) .scene img{transform:scale(1.06)}
  .postcard{transition:transform .8s var(--ease)}
  .page--point:not(.is-active) .postcard--a{transform:rotate(-8deg) translateX(-30px)}
  .page--point:not(.is-active) .postcard--b{transform:rotate(8deg) translateX(30px)}
}

/* ---------- 低い画面 ---------- */
@media (max-height:930px){
  .scene{height:clamp(150px,29dvh,260px)}
  .page--illust .page-grid{gap:10px}
  .sec-body{font-size:13.5px;line-height:1.85;gap:8px}
}
@media (max-height:800px){
  .scene{height:clamp(130px,24dvh,200px)}
  .page{padding-bottom:68px}
  .page-grid{gap:10px}
  .page--illust .page-grid{gap:9px;margin-top:10px}
  .sec-body{font-size:13px;line-height:1.82;gap:7px}
  .sec-body .em{padding:8px 14px}
  .sec-title{font-size:26px}
  .sec-title--sm{font-size:21px}
  .postcard{font-size:12.5px;line-height:1.75;padding:14px}
  .postcard h3{font-size:17px}
}
@media (max-height:680px){
  .scene{height:19dvh}
  .sec-head{flex-direction:row;align-items:center;flex-wrap:wrap;gap:4px 10px}
  .sec-title{font-size:23px}
  .sec-body{font-size:12.5px;line-height:1.72}
  .page--point .page-grid{gap:8px}
  .postcards{gap:14px}
  .postcard{font-size:12px;line-height:1.65;padding:11px 14px}
  .postcard h3{font-size:16px}
}
@media (max-height:600px){
  .scene{display:none}
  .page--illust{padding-top:calc(var(--header) + 14px)}
}

/* ---------- PC：左右レール ---------- */
.rail{display:none}
@media (min-width:900px){
  .slider{border-left:3px solid var(--ink);border-right:3px solid var(--ink)}
  .site-header,.menu{width:calc(var(--col) - 6px)}
  .floating-entry{display:none}
  .site-header .brand{visibility:hidden}
  .rail{
    position:fixed;top:0;bottom:0;z-index:3;
    width:calc(50% - var(--col)/2);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;
    padding:40px 28px 150px;color:var(--paper);
  }
  .rail--left{left:0}
  .rail--right{right:0}
  .rail-logo{
    display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;
    padding:22px 30px 18px;border-radius:28px;background:var(--paper);border:3px solid var(--ink);
    transform:rotate(-2deg);
  }
  .rail-logo .logo-type{font-size:clamp(46px,4.4vw,64px)}
  .rail-logo .logo-type i{-webkit-text-stroke:8px var(--ink)}
  .logo-name{font-weight:900;font-size:14px;letter-spacing:.2em;color:var(--ink)}
  .rail-catch{
    font-family:var(--font-hand);font-size:clamp(22px,2vw,28px);line-height:1.35;text-align:center;
    color:var(--paper);-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;
  }
  .rail-job{display:flex;align-items:center;gap:10px;font-weight:900;font-size:18px}
  .rail-job span{font-family:var(--font-latin);font-weight:400;font-size:13px;letter-spacing:.2em;padding:0 12px;border-radius:999px;background:var(--accent);color:var(--ink);border:2.5px solid var(--ink)}
  .rail-mascot{position:absolute;left:8%;bottom:62px;width:clamp(110px,10vw,160px);height:auto;pointer-events:none}
  .rail-cta{display:flex;flex-direction:column;gap:16px;width:min(100%,280px)}
  .rail-cta .btn{font-size:19px;padding:13px 14px 13px 26px}
  .rail-cta .btn small{font-size:12px}
  .rail-cta .btn b{width:38px;height:38px}
  .rail-cta .btn--entry{background:var(--accent);color:var(--ink)}
  .rail-cta .btn--entry b{background:var(--ink);color:var(--paper)}
  .rail-progress{display:flex;align-items:center;gap:10px;width:min(100%,280px);font-family:var(--font-latin);font-size:16px}
  .rail-progress div{flex:1;height:10px;border-radius:999px;background:rgba(255,255,255,.25);border:2.5px solid var(--ink);overflow:hidden}
  .rail-progress i{display:block;height:100%;width:0;background:var(--accent);transition:width .5s var(--ease)}
  .rail-bus{position:absolute;right:6%;bottom:70px;width:clamp(150px,14vw,230px);height:auto;pointer-events:none}
  @media (prefers-reduced-motion:no-preference){
    .rail-mascot{animation:bob 3s ease-in-out infinite;transform-origin:50% 100%}
    .rail-bus{animation:drive 3.2s ease-in-out infinite alternate}
  }
}
@keyframes bob{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg) translateY(-4px)}}
@keyframes drive{from{transform:translateX(-10px)}to{transform:translateX(10px)}}
@media (min-width:900px) and (max-height:700px){
  .rail-mascot,.rail-bus{display:none}
}