/* こむぎと、あさ。採用LP（制作サンプル）
   太い黒線×角丸。クリーム地に「焼き色のオレンジ」と「空色」 */
:root{
  --cream:#FFF4DE; --paper:#FFFCF4; --ink:#1E1A16;
  --orange:#F28A2E; --orange-soft:#FCCB98;
  --sky:#86CCF3; --sky-soft:#D3EDFB;
  --line:3px; --r:26px; --r-s:16px;
  --sh:5px 5px 0 var(--ink); --sh-s:3px 3px 0 var(--ink);
  --f-ja:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans",sans-serif;
  --f-en:"Outfit","Zen Maru Gothic",sans-serif;
  --f-hand:"Yusei Magic","Zen Maru Gothic",sans-serif;
  --max:1160px; --gut:20px; --hd:72px;
  --bounce:cubic-bezier(.34,1.56,.64,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hd) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font:500 16px/1.85 var(--f-ja);letter-spacing:.02em;overflow-wrap:anywhere;word-break:auto-phrase}
img,svg{max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
button,input,textarea{font:inherit;color:inherit}
.en{font-family:var(--f-en)}
.nw{white-space:nowrap}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.wrap--narrow{max-width:860px}
.sp{display:inline}.pc{display:none}
@media (min-width:768px){.sp{display:none}.pc{display:inline}}

:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:999px;text-decoration:none;font-weight:700}
.skip:focus{top:12px}

/* ---- SVGの塗りと線 ---- */
.ill{display:block;width:100%;height:auto}
svg *{stroke-linecap:round;stroke-linejoin:round}
.s{stroke:var(--ink);stroke-width:5}
.s4{stroke:var(--ink);stroke-width:4}
.s3{stroke:var(--ink);stroke-width:3}
.s2{stroke:var(--ink);stroke-width:2}
.f-or{fill:var(--orange)}.f-ors{fill:var(--orange-soft)}
.f-sky{fill:var(--sky)}.f-skys{fill:var(--sky-soft)}
.f-cr{fill:var(--cream)}.f-pa{fill:var(--paper)}
.f-ink{fill:var(--ink)}.f-none{fill:none}
.hl{stroke:var(--paper);stroke-width:4;fill:none;opacity:.85}
/* 図形を重ねたとき、外側だけに黒線を出す（太い線を下に敷く） */
.uo{fill:var(--ink);stroke:var(--ink);stroke-width:10}
.uo6{fill:var(--ink);stroke:var(--ink);stroke-width:6}
.w4{stroke-width:4}.w5{stroke-width:5}.w6{stroke-width:6}.w9{stroke-width:9}
.svg-txt{font:900 13px var(--f-ja);fill:var(--ink);letter-spacing:.02em}

/* ---- ボタン ---- */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:10px 24px;border:var(--line) solid var(--ink);border-radius:999px;background:var(--orange);color:var(--ink);font:900 16px/1.3 var(--f-ja);text-decoration:none;box-shadow:var(--sh-s);cursor:pointer;transition:transform .18s var(--bounce),box-shadow .18s;text-align:center}
.btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn--lg{min-height:62px;padding:12px 30px;font-size:18px;box-shadow:var(--sh)}
.btn--lg:hover{box-shadow:7px 7px 0 var(--ink)}
.btn--sm{min-height:44px;padding:6px 18px;font-size:15px}
.btn--paper{background:var(--paper)}
.btn .arr{font-family:var(--f-en);font-weight:900;transition:transform .2s}
.btn:hover .arr{transform:translateX(4px)}

/* ---- 上の帯・ヘッダー ---- */
.sample-bar{background:var(--ink);color:var(--paper);text-align:center;font-size:12px;font-weight:700;letter-spacing:.08em;padding:7px var(--gut);line-height:1.6}
.sample-bar a{margin:-13px 0 -13px 10px;color:var(--orange-soft);text-underline-offset:4px;display:inline-block;padding:13px 2px}
.hd{position:sticky;top:0;z-index:40;background:var(--cream);border-bottom:var(--line) solid var(--ink)}
.hd__in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--hd)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;min-height:44px}
.logo__mark{width:44px;height:44px;flex:none}
.logo__txt{display:flex;flex-direction:column;line-height:1.1}
.logo__ja{font:900 clamp(17px,4.6vw,20px) var(--f-ja);letter-spacing:.04em;white-space:nowrap}
.logo__en{font:800 9px var(--f-en);letter-spacing:.16em;margin-top:4px}
.hd__nav{display:none}
@media (min-width:960px){
  .hd__nav{display:flex;gap:6px;margin-left:auto}
  .hd__nav a{font-weight:700;font-size:15px;text-decoration:none;padding:10px 14px;border-radius:999px;border:var(--line) solid transparent;transition:border-color .2s,background .2s}
  .hd__nav a:hover{border-color:var(--ink);background:var(--paper)}
}

/* ---- FV ---- */
.fv{position:relative;padding:28px 0 56px;background:radial-gradient(circle,rgba(30,26,22,.13) 1.3px,transparent 1.6px) 0 0/22px 22px,var(--cream);overflow:clip}
.fv__in{display:grid;gap:36px}
.fv__eyebrow{display:inline-flex;align-items:center;gap:10px;background:var(--paper);border:var(--line) solid var(--ink);border-radius:999px;padding:6px 16px;font-weight:700;font-size:14px;line-height:1.5}
.fv__eyebrow .dot{width:10px;height:10px;border-radius:50%;background:var(--orange);border:2px solid var(--ink);flex:none}
.fv__title{font:900 clamp(50px,14vw,100px)/1.08 var(--f-ja);letter-spacing:-.02em;margin:18px 0 18px}
.fv__title .l{display:block;white-space:nowrap}
.fv__title .num{font:900 1.18em/1 var(--f-en);color:var(--orange);-webkit-text-stroke:.07em var(--ink);paint-order:stroke fill;display:inline-block;margin:0 .04em;transform:translateY(.02em) rotate(-6deg)}
.fv__title .mark{background:linear-gradient(transparent 60%,var(--sky) 60%,var(--sky) 92%,transparent 92%);padding:0 .06em}
.fv__lead{font-size:17px;font-weight:700;max-width:30em}
.conds{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px;max-width:520px}
.cond{border:var(--line) solid var(--ink);border-radius:18px;padding:10px 14px 9px;box-shadow:var(--sh-s);display:flex;flex-direction:column;line-height:1.2}
.cond--or{background:var(--orange)}.cond--sky{background:var(--sky)}
.cond__k{font-size:12px;font-weight:700}
.cond__v{font:900 clamp(21px,5.8vw,27px)/1.25 var(--f-ja);margin-top:3px;letter-spacing:0}
.cond__v.en{font-family:var(--f-en);font-weight:900}
.cond__v small{font-size:.6em;margin-left:2px}
.fv__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.fv__cta .btn{flex:1 1 auto}
.fine{font-size:12px;margin-top:12px;line-height:1.7}
.fine--center{text-align:center;margin-top:28px}

.fv__art{position:relative;max-width:560px;width:100%;margin:0 auto;padding:10px 4px 0}
.fv-ill{filter:drop-shadow(6px 6px 0 var(--ink))}
.stk{position:absolute;margin:0;border:var(--line) solid var(--ink);box-shadow:var(--sh-s);line-height:1.15;text-align:center}
.stk--round{top:-8px;left:-6px;width:clamp(86px,24vw,120px);aspect-ratio:1;border-radius:50%;background:var(--orange);display:grid;place-items:center;font:clamp(19px,5vw,26px)/1.1 var(--f-hand);rotate:-12deg}
.stk--time{bottom:14%;left:-6px;background:var(--paper);border-radius:999px;padding:6px 14px;font-weight:900;font-size:clamp(13px,3.4vw,16px);letter-spacing:.08em;rotate:-4deg}
.stk--bubble{right:-4px;top:22%;background:var(--paper);border-radius:22px;padding:10px 16px;font:clamp(16px,4.2vw,21px)/1.35 var(--f-hand);rotate:5deg}
.stk--bubble::after{content:"";position:absolute;left:22px;bottom:-12px;width:20px;height:20px;background:var(--paper);border-right:var(--line) solid var(--ink);border-bottom:var(--line) solid var(--ink);transform:rotate(45deg) skew(10deg,10deg)}

@media (min-width:960px){
  .fv{padding:48px 0 80px}
  .fv__in{grid-template-columns:1.05fr 1fr;align-items:center;gap:48px}
  .fv__title{font-size:clamp(64px,6.9vw,100px)}
  .fv__cta .btn{flex:0 0 auto}
  .stk--round{left:-26px;top:-18px}
  .stk--time{left:-30px}
  .stk--bubble{right:-26px}
}

/* SVGの小さな動き */
.fv-rays{transform-origin:280px 248px;transform-box:view-box;animation:spin 40s linear infinite}
.fv-cloud{animation:drift 7s ease-in-out infinite alternate}
.fv-cloud--2{animation-duration:9s;animation-direction:alternate-reverse}
.fv-steam path{animation:steam 3.2s ease-in-out infinite}
.fv-steam path:nth-child(2){animation-delay:1.1s}
.fv-spark{transform-box:fill-box;transform-origin:center;animation:twinkle 2.4s ease-in-out infinite}
.fv-spark--2{animation-delay:.8s}.fv-spark--3{animation-delay:1.6s}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes drift{from{transform:translateX(-10px)}to{transform:translateX(12px)}}
@keyframes steam{0%,100%{opacity:.25;transform:translateY(6px)}50%{opacity:1;transform:translateY(-4px)}}
@keyframes twinkle{0%,100%{scale:1}50%{scale:.7}}

/* ---- 斜めの帯 ---- */
.band-wrap{position:relative;overflow:hidden;padding:34px 0;background:var(--cream)}
.band{width:116%;margin-left:-8%;border-block:var(--line) solid var(--ink);overflow:hidden}
.band--front{position:relative;background:var(--orange);rotate:-2.4deg;z-index:1}
.band--back{position:absolute;left:0;top:50%;translate:0 -50%;background:var(--sky);rotate:2.6deg}
.band__track{display:flex;width:max-content;gap:26px;padding:12px 0;animation:marq 32s linear infinite;white-space:nowrap}
.band--back .band__track{animation-direction:reverse;animation-duration:40s}
.band span{font:900 clamp(20px,3vw,30px)/1.2 var(--f-ja)}
.band--back span{font-family:var(--f-en);letter-spacing:.06em}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---- セクション共通 ---- */
.sec{position:relative;padding:clamp(72px,10vw,120px) 0;overflow:clip;border-top:var(--line) solid var(--ink)}
.sec--cream{background:var(--cream)}
.sec--paper{background:var(--paper)}
.sec--sky{background:var(--sky)}
.sec--ors{background:var(--orange-soft)}
.sec--night{background:var(--ink);color:var(--paper)}
.sec-hd{position:relative;margin-bottom:clamp(36px,6vw,60px)}
.sec-hd::before{content:attr(data-en);position:absolute;right:-.06em;top:-.55em;font:900 clamp(72px,15vw,190px)/1 var(--f-en);letter-spacing:-.02em;color:rgba(30,26,22,.07);white-space:nowrap;pointer-events:none;z-index:0}
.sec--night .sec-hd::before{color:rgba(255,252,244,.08)}
.sec--sky .sec-hd::before{color:rgba(255,252,244,.4)}
.sec--ors .sec-hd::before{color:rgba(255,252,244,.45)}
.sec-hd>*{position:relative;z-index:1}
.sec-hd--center{text-align:center}
.sec-hd--center::before{right:50%;translate:50% 0}
.tag{display:inline-block;background:var(--sky);border:var(--line) solid var(--ink);border-radius:999px;padding:4px 18px 5px;font:clamp(16px,2vw,19px)/1.5 var(--f-hand);rotate:-3deg;box-shadow:var(--sh-s)}
.tag--or{background:var(--orange);color:var(--ink)}
.tag--pa{background:var(--paper)}
.sec-title{font:900 clamp(34px,6.4vw,66px)/1.22 var(--f-ja);letter-spacing:-.01em;margin-top:18px}
.sec-lead{font-weight:700;font-size:17px;margin-top:14px}

/* ---- 出てくる動き ---- */
[data-d="d1"]{--d:.08s}[data-d="d2"]{--d:.16s}[data-d="d3"]{--d:.24s}[data-d="d4"]{--d:.32s}
[data-pop].is-in{animation:pop .75s var(--bounce) var(--d,0s) both}
@keyframes pop{0%{opacity:0;transform:translateY(34px) scale(.94)}100%{opacity:1;transform:none}}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  [data-pop]:not(.is-in){opacity:0}
}

/* ---- こんな人 ---- */
.who{display:grid;gap:26px 20px}
.bub{position:relative;border:var(--line) solid var(--ink);border-radius:28px;padding:22px 22px 22px 88px;box-shadow:var(--sh);min-height:112px;display:flex;align-items:center}
.bub p{font:900 clamp(18px,2.1vw,21px)/1.55 var(--f-ja)}
.bub::after{content:"";position:absolute;left:36px;bottom:-15px;width:24px;height:24px;background:inherit;border-right:var(--line) solid var(--ink);border-bottom:var(--line) solid var(--ink);transform:rotate(45deg) skew(12deg,12deg)}
.bub__ic{position:absolute;left:16px;top:50%;translate:0 -50%;width:60px;height:60px}
.bub--or{background:var(--orange-soft);rotate:-1.2deg}
.bub--sky{background:var(--sky-soft);rotate:1deg}
.bub--pa{background:var(--paper);rotate:-.6deg}
.who__foot{margin-top:44px;font-weight:700;font-size:17px;text-align:center}
@media (min-width:768px){.who{grid-template-columns:1fr 1fr;gap:34px 28px}}
@media (min-width:1100px){.who{gap:40px 36px}.bub{padding:26px 28px 26px 108px;min-height:128px}.bub__ic{left:24px;width:68px;height:68px}.bub p{font-size:23px}}

/* ---- 朝の4時間 ---- */
.sec--night{background-image:radial-gradient(circle at 12% 18%,var(--paper) 0 1.6px,transparent 2.4px),radial-gradient(circle at 82% 12%,var(--paper) 0 2px,transparent 2.8px),radial-gradient(circle at 70% 34%,var(--orange-soft) 0 1.4px,transparent 2.2px),radial-gradient(circle at 24% 46%,var(--paper) 0 1.2px,transparent 2px),radial-gradient(circle at 90% 60%,var(--paper) 0 1.6px,transparent 2.4px),radial-gradient(circle at 6% 78%,var(--orange-soft) 0 1.8px,transparent 2.6px)}
.sec--night .tag{color:var(--ink)}
.big4{display:inline-block;font-size:1.7em;line-height:.8;color:var(--orange);-webkit-text-stroke:.05em var(--paper);paint-order:stroke fill;margin:0 .04em;transform:translateY(.08em) rotate(-5deg)}
.tl{position:relative;display:grid;gap:26px;max-width:960px;margin:0 auto}
.tl::before{content:"";position:absolute;left:31px;top:20px;bottom:20px;border-left:3px dashed rgba(255,252,244,.55)}
.tl__item{position:relative;display:grid;grid-template-columns:64px 1fr;column-gap:16px;align-items:start}
.tl__node{grid-column:1;grid-row:1/3;width:64px;height:64px;border-radius:50%;border:var(--line) solid var(--paper);display:grid;place-items:center;background:var(--sky)}
.tl__node svg{width:44px;height:44px}
.tl__node--ink{background:#3A332C}
.tl__node--or,.tl__node--sun{background:var(--orange)}
.tl__node--sun,.tl__node--pa{background:var(--paper)}
.tl__time{grid-column:2;font:900 clamp(40px,9vw,84px)/1 var(--f-en);color:var(--paper);letter-spacing:-.01em;text-shadow:4px 4px 0 var(--orange);margin:8px 0 12px}
.tl__card{grid-column:2;background:var(--paper);color:var(--ink);border:var(--line) solid var(--paper);border-radius:var(--r);padding:18px 20px}
.tl__card h3{font:900 20px/1.4 var(--f-ja);margin-bottom:6px}
.tl__card p{font-size:15px;line-height:1.8}
.tl__item--end .tl__card{background:var(--orange)}
.tl__item--end .tl__time{text-shadow:4px 4px 0 var(--sky)}
@media (min-width:900px){
  .tl{gap:10px}
  .tl::before{left:50%;translate:-1.5px 0}
  .tl__item{grid-template-columns:1fr 84px 1fr;column-gap:28px;align-items:center}
  .tl__node{grid-column:2;grid-row:1;width:84px;height:84px;margin:0 auto}
  .tl__node svg{width:54px;height:54px}
  .tl__time{grid-row:1;margin:0}
  .tl__card{grid-row:1}
  .tl__item:nth-child(odd) .tl__time{grid-column:1;text-align:right}
  .tl__item:nth-child(odd) .tl__card{grid-column:3;rotate:1deg}
  .tl__item:nth-child(even) .tl__time{grid-column:3}
  .tl__item:nth-child(even) .tl__card{grid-column:1;rotate:-1deg}
}

/* ---- 仕事は3つ ---- */
.jobs{display:grid;gap:28px}
.job{background:var(--paper);border:var(--line) solid var(--ink);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;display:flex;flex-direction:column}
.job:nth-child(2){rotate:.8deg}
.job__art{position:relative;border-bottom:var(--line) solid var(--ink);padding:26px 22px 14px}
.job__art svg{max-width:300px;margin:0 auto}
.job__art--sky{background:var(--sky)}.job__art--or{background:var(--orange-soft)}.job__art--skys{background:var(--sky-soft)}
.job__no{position:absolute;left:14px;top:8px;font-weight:900;font-size:52px;line-height:1;color:var(--paper);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;z-index:1}
.job__body{padding:20px 22px 24px}
.job__body h3{font:900 26px/1.3 var(--f-ja)}
.job__body h3 span{display:block;font-size:14px;font-weight:700;margin-top:6px;color:#5A4F44}
.job__body p{margin-top:12px;font-size:15px}
@media (min-width:768px) and (max-width:1023px){.job{flex-direction:row}.job:nth-child(2){rotate:.5deg}.job__art{flex:0 0 44%;border-bottom:0;border-right:var(--line) solid var(--ink);display:flex;align-items:center}.job__body{align-self:center}}
@media (min-width:1024px){.jobs{grid-template-columns:repeat(3,1fr);gap:30px}}

/* ---- 数字 ---- */
.nums{display:grid;gap:18px;grid-template-columns:1fr 1fr}
.num-tile{grid-column:span 2;border:var(--line) solid var(--ink);border-radius:var(--r);box-shadow:var(--sh);padding:20px 22px 22px;display:flex;flex-direction:column}
.num-tile--or{background:var(--orange)}
.num-tile--pa{background:var(--paper)}
.num-tile--ink{background:var(--ink);color:var(--paper)}
.num-tile__k{font-weight:900;font-size:15px}
.num-tile__v{font:900 26px/1 var(--f-ja);margin:12px 0 10px}
.num-tile__v .en{font-size:clamp(76px,16vw,132px);line-height:.9;letter-spacing:-.03em;margin-right:4px;text-shadow:5px 5px 0 var(--sky)}
.num-tile--pa .num-tile__v .en{text-shadow:5px 5px 0 var(--orange)}
.num-tile--ink .num-tile__v .en{color:var(--orange);text-shadow:5px 5px 0 #4A4037}
.num-tile__v small{font-size:26px;font-family:var(--f-en)}
.num-tile__s{font-size:14px;margin-top:auto;line-height:1.7}
@media (min-width:600px){.num-tile:not(.num-tile--wide){grid-column:span 1}.num-tile--or:last-child{grid-column:span 2}}
@media (min-width:1024px){
  .nums{grid-template-columns:repeat(6,1fr);gap:22px}
  .num-tile--wide{grid-column:span 3}
  .num-tile:not(.num-tile--wide),.num-tile--or:last-child{grid-column:span 2}
  .num-tile--wide:first-child{rotate:-1deg}
}

/* ---- 先輩の1日 ---- */
.senpai{display:grid;gap:32px}
.senpai__prof{background:var(--cream);border:var(--line) solid var(--ink);border-radius:var(--r);box-shadow:var(--sh);padding:26px 22px;text-align:center}
.senpai__face{max-width:220px;margin:0 auto}
.senpai__name{font:900 26px/1.3 var(--f-ja);margin-top:16px}
.senpai__name span{display:block;font-size:14px;font-weight:700;margin-top:4px}
.quote{position:relative;margin-top:22px;background:var(--paper);border:var(--line) solid var(--ink);border-radius:22px;padding:18px 20px;text-align:left}
.quote::before{content:"";position:absolute;left:50%;top:-14px;width:22px;height:22px;background:var(--paper);border-left:var(--line) solid var(--ink);border-top:var(--line) solid var(--ink);transform:translateX(-50%) rotate(45deg)}
.quote p{font:17px/1.75 var(--f-hand)}
.senpai__day{display:grid;gap:26px;align-content:start}
.donut{max-width:340px;width:100%;margin:0 auto}
.donut__base{stroke:var(--cream);stroke-width:36}
.donut__seg{stroke-width:36}
.donut__seg--sleep{stroke:var(--sky)}
.donut__seg--work{stroke:var(--orange)}
.donut__lbl text{font:800 13px var(--f-ja);fill:var(--ink)}
.donut__in text{font:900 14px var(--f-ja);fill:var(--ink)}
.donut__c1{font:700 14px var(--f-ja);fill:var(--ink)}
.donut__c2{font:900 24px var(--f-ja);fill:var(--ink)}
.legend{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:14px;font-weight:700}
.legend span{display:inline-flex;align-items:center;gap:6px}
.lg{width:16px;height:16px;border-radius:5px;border:2px solid var(--ink);display:inline-block}
.lg--sky{background:var(--sky)}.lg--or{background:var(--orange)}.lg--cr{background:var(--cream)}
.day{border:var(--line) solid var(--ink);border-radius:var(--r);overflow:hidden;background:var(--paper)}
.day li{display:grid;grid-template-columns:62px 1fr;gap:10px;align-items:baseline;padding:11px 18px;border-bottom:2px dashed rgba(30,26,22,.28);font-weight:700;font-size:15px}
.day li:last-child{border-bottom:0}
.day li .en{font-weight:900;font-size:19px}
.day__hl{background:var(--orange-soft)}
@media (min-width:900px){
  .senpai{grid-template-columns:1fr 1.2fr;gap:40px;align-items:start}
  .senpai__prof{rotate:-1.2deg}
}
@media (min-width:1100px){
  .senpai{grid-template-columns:1fr 1.9fr}
  .senpai__day{grid-template-columns:1fr 1.05fr;align-items:center}
}

/* ---- 向き不向き ---- */
.fit{display:grid;gap:24px}
.fit__card{position:relative;border:var(--line) solid var(--ink);border-radius:var(--r);box-shadow:var(--sh);padding:26px 22px 24px}
.fit__card--yes{background:var(--sky)}
.fit__card--no{background:var(--paper)}
.fit__mark{position:absolute;right:16px;top:10px;font:900 clamp(54px,7vw,78px)/1 var(--f-ja);color:var(--paper);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}
.fit__card--no .fit__mark{color:var(--orange)}
.fit__card h3{font:900 24px/1.35 var(--f-ja);padding-right:72px}
.fit__card ul{margin-top:16px;display:grid;gap:10px}
.fit__card li{position:relative;padding-left:30px;font-weight:700;font-size:16px;line-height:1.6}
.fit__card li::before{content:"";position:absolute;left:0;top:.28em;width:18px;height:18px;border-radius:50%;border:var(--line) solid var(--ink);background:var(--paper)}
.fit__card--no li::before{border-radius:5px;background:var(--orange-soft)}
.fit__note{margin-top:32px;text-align:center;font-weight:900;font-size:clamp(17px,2.2vw,21px);line-height:1.7}
@media (min-width:768px){.fit{grid-template-columns:1fr 1fr;gap:28px}.fit__card--yes{rotate:-1deg}.fit__card--no{rotate:1deg}}

/* ---- 待遇（チケット） ---- */
.ticket{position:relative;max-width:680px;margin:0 auto;background:var(--paper);border:var(--line) solid var(--ink);border-radius:var(--r);box-shadow:var(--sh)}
.ticket__head{padding:22px 24px 18px;border-bottom:3px dashed var(--ink);position:relative}
.ticket__head::before,.ticket__head::after{content:"";position:absolute;bottom:-16px;width:28px;height:28px;border-radius:50%;background:var(--orange-soft);border:var(--line) solid var(--ink)}
.ticket__head::before{left:-17px;clip-path:inset(0 0 0 50%)}
.ticket__head::after{right:-17px;clip-path:inset(0 50% 0 0)}
.ticket__head .en{font-weight:900;font-size:13px;letter-spacing:.2em}
.ticket__job{font:900 clamp(22px,3.4vw,30px)/1.35 var(--f-ja);margin-top:4px}
.ticket__job small{display:inline-block;font-size:.55em;margin-left:10px;background:var(--sky);border:2px solid var(--ink);border-radius:999px;padding:1px 10px;vertical-align:.25em}
.ticket__list{padding:8px 24px}
.ticket__list div{display:grid;grid-template-columns:5.4em 1fr;gap:12px;padding:12px 0;border-bottom:2px dashed rgba(30,26,22,.3)}
.ticket__list div:last-child{border-bottom:0}
.ticket__list dt{font-weight:900}
.ticket__list dd{font-size:15px;line-height:1.7}
.ticket__list strong{font:900 24px/1.3 var(--f-ja)}
.ticket__total{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--orange);border-top:var(--line) solid var(--ink);padding:14px 24px;border-radius:0 0 calc(var(--r) - 3px) calc(var(--r) - 3px)}
.ticket__total span{font:900 16px var(--f-en);letter-spacing:.2em}
.ticket__total strong{font:900 clamp(22px,3vw,28px)/1.3 var(--f-ja)}
.stamp{position:absolute;right:16px;top:14px;border:3px double var(--orange);color:#B4541A;border-radius:12px;padding:4px 10px;font:900 18px/1.1 var(--f-en);letter-spacing:.12em;text-align:center;rotate:10deg;background:var(--paper)}
.stamp small{display:block;font:700 10px var(--f-ja);letter-spacing:.06em;margin-top:2px}
@media (max-width:520px){.stamp{top:-20px;right:10px}.ticket__list div{grid-template-columns:1fr;gap:2px}}

/* ---- FAQ ---- */
.faq{display:grid;gap:14px}
.faq details{background:var(--paper);border:var(--line) solid var(--ink);border-radius:22px;box-shadow:var(--sh-s);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;min-height:68px;padding:12px 60px 12px 16px;font-weight:900;font-size:17px;line-height:1.5;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:16px;top:50%;width:34px;height:34px;margin-top:-17px;border:var(--line) solid var(--ink);border-radius:50%;display:grid;place-items:center;font:900 22px/1 var(--f-en);background:var(--sky);transition:transform .3s var(--bounce)}
.faq details[open] summary::after{transform:rotate(135deg);background:var(--orange)}
.faq summary:focus-visible{outline-offset:-6px}
.qa{flex:none;width:36px;height:36px;border-radius:50%;border:var(--line) solid var(--ink);display:grid;place-items:center;font-weight:900;font-size:17px;line-height:1}
.qa--q{background:var(--orange)}.qa--a{background:var(--sky)}
.faq__a{display:flex;gap:14px;padding:4px 20px 20px 16px}
.faq__a p{font-size:15px;padding-top:4px}

/* ---- 応募・見学 ---- */
.safe{display:grid;gap:16px;margin-bottom:34px}
.safe__item{background:var(--paper);border:var(--line) solid var(--ink);border-radius:22px;padding:18px 20px;box-shadow:var(--sh-s)}
.safe__k{display:inline-block;font:900 19px/1.4 var(--f-ja);background:linear-gradient(transparent 58%,var(--orange-soft) 58%);margin-bottom:6px}
.safe__item p:last-child{font-size:15px}
@media (min-width:768px){.safe{grid-template-columns:repeat(3,1fr);gap:20px}.safe__item:nth-child(2){rotate:1deg}.safe__item:nth-child(1){rotate:-1deg}}
.form{position:relative;max-width:760px;margin:0 auto;background:var(--paper);border:4px solid var(--ink);border-radius:32px;box-shadow:8px 8px 0 var(--ink);padding:clamp(22px,5vw,44px)}
.field{border:0;margin:0 0 24px;padding:0;min-width:0}
.field__l{display:block;font-weight:900;font-size:16px;margin-bottom:8px;padding:0}
.req,.opt{display:inline-block;font-size:11px;font-weight:900;border:2px solid var(--ink);border-radius:999px;padding:0 8px;margin-left:6px;vertical-align:.12em;line-height:1.6}
.req{background:var(--orange)}.opt{background:var(--paper)}
.input{width:100%;min-height:54px;border:var(--line) solid var(--ink);border-radius:16px;background:var(--cream);padding:12px 16px;font-size:16px;transition:background .2s,box-shadow .2s}
textarea.input{resize:vertical;min-height:120px;line-height:1.7}
.input:focus{outline:none;background:var(--paper);box-shadow:0 0 0 4px var(--sky)}
.input:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.input[aria-invalid="true"]{background:#FFE3D0;border-color:#B4541A}
.field__hint{font-size:13px;margin-top:6px;color:#5A4F44}
.field__err{font-size:14px;font-weight:900;color:#A23E0C;margin-top:6px}
.field__err:empty{display:none}
.field__err::before{content:"！ "}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.chip span{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:56px;min-height:50px;padding:6px 16px;border:var(--line) solid var(--ink);border-radius:999px;background:var(--cream);font-weight:900;font-size:16px;line-height:1.3;transition:background .15s,transform .2s var(--bounce);user-select:none}
.chip span small{font-size:11px;background:var(--paper);border:2px solid var(--ink);border-radius:999px;padding:0 7px}
.chip:hover span{transform:translateY(-2px)}
.chip input:checked+span{background:var(--orange);box-shadow:var(--sh-s)}
.chip input[type="checkbox"]:checked+span::before{content:"✓";font-family:var(--f-en)}
.chip input:focus-visible+span{outline:3px solid var(--ink);outline-offset:3px}
.chips--wide .chip{flex:1 1 180px}
.chips--wide .chip span{width:100%}
.field.is-err .chips .chip span{border-color:#B4541A}
.form__errs{border:var(--line) solid #A23E0C;background:#FFE3D0;border-radius:18px;padding:14px 18px;margin-bottom:24px}
.form__errs p{font-weight:900;color:#A23E0C}
.form__errs ul{margin-top:6px;display:grid;gap:2px}
.form__errs a{font-weight:700;font-size:15px;color:#7A2C06;display:inline-block;padding:4px 0}
.form__foot{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:8px}
.form__foot .btn{width:100%;max-width:420px}
.form__result:not(:empty){margin-top:20px;background:var(--sky-soft);border:var(--line) solid var(--ink);border-radius:18px;padding:16px 18px;font-weight:700}

.stk--form{top:-34px;right:-10px;width:108px;aspect-ratio:1;border-radius:50%;background:var(--orange);display:grid;place-content:center;font:15px/1.25 var(--f-hand);rotate:10deg}
.stk--form .en{font-weight:900;font-size:24px;line-height:1}
@media (max-width:767px){.stk--form{width:92px;font-size:13px;top:-40px;right:-8px}.stk--form .en{font-size:19px}}
@media (min-width:1024px){.stk--form{right:-44px;top:-40px;width:122px;font-size:16px}.stk--form .en{font-size:28px}}

/* ---- 確認ダイアログ ---- */
.dlg{border:4px solid var(--ink);border-radius:28px;background:var(--paper);color:var(--ink);box-shadow:8px 8px 0 var(--ink);padding:26px 22px;width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 40px)}
.dlg::backdrop{background:rgba(30,26,22,.55)}
.dlg[open]{animation:pop .45s var(--bounce)}
.dlg__tag{display:inline-block;font:16px var(--f-hand);background:var(--sky);border:var(--line) solid var(--ink);border-radius:999px;padding:2px 14px;rotate:-3deg}
.dlg__title{font:900 24px/1.4 var(--f-ja);margin:12px 0 14px}
.dlg__list{border-top:2px dashed rgba(30,26,22,.3)}
.dlg__list div{display:grid;grid-template-columns:8.2em 1fr;gap:10px;padding:10px 0;border-bottom:2px dashed rgba(30,26,22,.3);font-size:14px}
.dlg__list dt{font-weight:900}
.dlg__list dd{white-space:pre-wrap}
.dlg__act{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.dlg__act .btn{flex:1 1 160px}

/* ---- フッター ---- */
.ft{background:var(--ink);color:var(--paper);padding:64px 0 48px;border-top:var(--line) solid var(--ink);text-align:center}
.ft__brand{font:900 clamp(40px,9vw,96px)/1.1 var(--f-ja);letter-spacing:-.01em}
.ft__en{font-weight:800;font-size:12px;letter-spacing:.2em;margin-top:10px;color:var(--orange-soft)}
.ft__note{max-width:40em;margin:26px auto 0;font-size:13px;line-height:1.8;border:2px solid rgba(255,252,244,.4);border-radius:16px;padding:12px 16px}
.ft__meta{font-size:12px;margin-top:18px;opacity:.85}
.ft__meta a{display:inline-block;margin-left:8px;padding:12px 4px;color:var(--orange-soft)}

/* ---- スマホの追従ボタン ---- */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:1fr 1.5fr;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--cream);border-top:var(--line) solid var(--ink);transform:translateY(110%);visibility:hidden;transition:transform .35s var(--bounce),visibility 0s .35s}
.sticky.is-show{transform:none;visibility:visible;transition:transform .35s var(--bounce),visibility 0s}
.sticky .btn{min-height:48px}
@media (max-width:959px){.ft{padding-bottom:110px}}
@media (min-width:960px){.sticky{display:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-pop]{opacity:1}
}
