@charset "utf-8";
/* =========================================================
みかん / micangroup コーポレートサイト
fonts: Shippori Antique B1（見出し）/ Noto Sans JP（本文）/ Roboto Condensed（英字・数字）
※ 参考: https://shinsotsu-recruit.ap-holdings.jp
motion: glide-in（フェード＋スライドアップ）… script.js の IntersectionObserver で発火
========================================================= */
:root{
--bg:#17110d; /* 夜 */
--bg2:#1f1712; /* 木・パネル */
--bg3:#281e16; /* 明るい木 */
--cream:#f4ece0; /* 人肌・文字 */
--muted:#b6a795;
--line:rgba(244,236,224,.14);
--main:#f4a02a; /* 料理・照明（アンバー） */
--accent:#e8531d; /* 朱 */
--ember:#ffbf7a; /* 灯り */
--maxw:1120px;
--font-head:"Shippori Antique B1","Noto Sans JP","Hiragino Sans",sans-serif;
--font-body:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
--font-en:"Roboto Condensed","Noto Sans JP",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
font-family:var(--font-body);
background:var(--bg);color:var(--cream);line-height:1.9;font-weight:400;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:104px 0;position:relative}
@media(max-width:640px){.section{padding:72px 0}}
/* ===== section variants ===== */
.sec-dark{background:var(--bg)}
.sec-wood{background:var(--bg2)}
.sec-cream{background:#efe4d5;color:#241a12}
/* ===== 黒背景セクションの微テクスチャ＋ゆっくりした動き =====
低不透明度でコンテンツの後ろに敷く。文字・写真の可読性を優先（.wrapを前面に固定） */
.sec-dark,.sec-wood,.finalcta{overflow:hidden}
.sec-dark::before,.sec-wood::before,.finalcta::before{
content:"";position:absolute;inset:-8%;z-index:0;pointer-events:none;
background-repeat:no-repeat;background-position:center;background-size:cover;
opacity:.16;mix-blend-mode:screen;
animation:bgDrift 46s ease-in-out infinite alternate;will-change:transform}
.sec-dark::before,.finalcta::before{background-image:url(images/bg_texture2.jpg)}
.sec-wood::before{background-image:url(images/bg_texture1.jpg)}
.sec-wood::before{animation-duration:54s;animation-direction:alternate-reverse}
/* コンテンツはテクスチャの上に */
.sec-dark>.wrap,.sec-wood>.wrap,.finalcta>.wrap{position:relative;z-index:1}
@keyframes bgDrift{
from{transform:scale(1.06) translate3d(-1.4%,-1%,0)}
to{transform:scale(1.12) translate3d(1.4%,1.2%,0)}
}
@media(prefers-reduced-motion:reduce){
.sec-dark::before,.sec-wood::before,.finalcta::before{animation:none}
}
/* ===== headings ===== */
.eyebrow{font-family:var(--font-en);font-size:14px;letter-spacing:.34em;font-weight:600;color:var(--main);text-transform:uppercase;margin:0 0 18px}
.sec-cream .eyebrow{color:var(--accent)}
.h2{font-family:var(--font-head);font-size:clamp(27px,4.6vw,42px);line-height:1.42;font-weight:400;margin:0 0 16px;letter-spacing:.03em}
.h4{font-family:var(--font-head);font-size:clamp(19px,2.6vw,26px);line-height:1.5;font-weight:400;margin:0 0 10px;letter-spacing:.03em;color:var(--cream)}
.sec-cream .h4{color:#2b2119}
.sub{font-size:clamp(15px,1.8vw,17px);color:var(--muted);margin:0 0 46px;max-width:660px}
.sec-cream .sub{color:#6a5c4c}
/* ===== unified CTA（全セクション統一・角R継続） ===== */
.cta{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
padding:16px 34px;border-radius:999px;font-weight:700;font-size:15px;letter-spacing:.04em;
text-decoration:none;line-height:1;white-space:nowrap;border:0;cursor:pointer;font-family:var(--font-body);
background:linear-gradient(135deg,var(--accent),var(--main));color:#fff;
box-shadow:0 10px 30px rgba(232,83,29,.28);transition:transform .2s,box-shadow .2s,filter .2s;
}
.cta:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 14px 36px rgba(232,83,29,.38)}
.cta--sm{padding:11px 22px;font-size:13px}
.cta--ghost{background:transparent;color:var(--cream);border:1.5px solid rgba(244,236,224,.4);box-shadow:none}
.cta--ghost:hover{filter:none;border-color:var(--ember);color:var(--ember)}
.sec-cream .cta--ghost{color:#241a12;border-color:rgba(36,26,18,.3)}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
.cta-row--center{justify-content:center}
/* 応募ボタン：LINE=グリーン／Instagram=ブランドグラデーション */
.cta .btn-ico{width:22px;height:22px;flex:none}
.cta--line{background:#06C755;box-shadow:0 10px 30px rgba(6,199,85,.30)}
.cta--line:hover{box-shadow:0 14px 36px rgba(6,199,85,.42)}
.cta--ig{background:linear-gradient(105deg,#515bd4 0%,#8134af 26%,#dd2a7b 58%,#f58529 100%);box-shadow:0 10px 30px rgba(221,42,123,.30)}
.cta--ig:hover{box-shadow:0 14px 36px rgba(221,42,123,.42)}
/* ===== placeholder frame（画像 3:3 正方形・角Rなし） =====
を配置すると自動で写真に差し替わります（未配置時はラベル表示） */
.frame{
position:relative;aspect-ratio:1/1;overflow:hidden;
background:linear-gradient(135deg,#2a2019,#211812);border:1px solid rgba(244,236,224,.1);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;color:#7d6f5f;margin:0;
}
.frame::before{content:"";position:absolute;inset:0;z-index:0;
background-image:linear-gradient(rgba(244,236,224,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(244,236,224,.05) 1px,transparent 1px);
background-size:30px 30px}
.frame::after{content:"";position:absolute;inset:0;z-index:0;
background:linear-gradient(to bottom right,transparent calc(50% - .6px),rgba(244,236,224,.12) calc(50% - .6px),rgba(244,236,224,.12) calc(50% + .6px),transparent calc(50% + .6px))}
.frame>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.frame__ico{font-size:30px;position:relative;z-index:1;opacity:.7}
.frame__label{position:relative;z-index:1;font-family:var(--font-en);font-weight:600;letter-spacing:.12em;font-size:13px;color:#9a8a76}
.frame__note{position:relative;z-index:1;font-size:12px;color:#7d6f5f;padding:0 12px}
.frame--fill{position:absolute;inset:0;aspect-ratio:auto;border:0}
.sec-cream .frame,.jobrow .frame{background:linear-gradient(135deg,#e7dac8,#ddcbb4);border-color:#cdb9a0;color:#9c886c}
.sec-cream .frame::before,.jobrow .frame::before{background-image:linear-gradient(rgba(90,70,50,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(90,70,50,.08) 1px,transparent 1px)}
.sec-cream .frame::after,.jobrow .frame::after{background:linear-gradient(to bottom right,transparent calc(50% - .6px),rgba(90,70,50,.18) calc(50% - .6px),rgba(90,70,50,.18) calc(50% + .6px),transparent calc(50% + .6px))}
.sec-cream .frame__label,.jobrow .frame__label{color:#8a7355}
.sec-cream .frame__note,.jobrow .frame__note{color:#a08a6c}
/* ===== glide-in reveal（スクロールで発火） =====
JS有効時（html.js）のみ初期状態を隠す。JS無効/失敗時は全て表示されるフェイルセーフ */
.js .reveal{opacity:0;transform:translateY(44px);
transition:opacity 1.1s cubic-bezier(.22,.61,.36,1),transform 1.1s cubic-bezier(.22,.61,.36,1)}
.js .reveal.is-in{opacity:1;transform:none}
.reveal.d1{transition-delay:.10s}
.reveal.d2{transition-delay:.20s}
.reveal.d3{transition-delay:.30s}
.reveal.d4{transition-delay:.40s}
.reveal.d5{transition-delay:.50s}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}
/* ===== 9周年バッジ（hero動画への重ね表示） ===== */
.anniv{position:absolute;top:20px;left:0;right:0;z-index:2;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;pointer-events:none}
.anniv__logo{width:38px;height:38px;object-fit:contain;flex:none;filter:drop-shadow(0 4px 16px rgba(0,0,0,.5))}
.anniv__text{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left}
.anniv__jp{font-family:"Zen Old Mincho",var(--font-head),serif;color:var(--cream);font-size:clamp(14px,2.6vw,20px);line-height:1.3;letter-spacing:.1em;text-shadow:0 2px 18px rgba(0,0,0,.65)}
.anniv__jp b{font-family:var(--font-en);color:var(--ember);font-size:1.3em;font-weight:700;margin:0 .06em;font-style:normal}
.anniv__en{font-family:var(--font-en);color:var(--ember);font-size:10px;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;font-weight:600;text-shadow:0 2px 14px rgba(0,0,0,.65)}
@media(min-width:640px){
.anniv{top:40px;gap:18px}
.anniv__logo{width:56px;height:56px}
.anniv__en{font-size:12px;letter-spacing:.2em}
}
/* ===== appbar ===== */
.appbar{position:sticky;top:0;z-index:50;background:rgba(23,17,13,.82);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.appbar__inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-family:var(--font-en);font-weight:700;letter-spacing:.14em;font-size:19px;text-decoration:none;color:inherit}
.brand small{display:block;font-family:var(--font-body);font-size:10px;letter-spacing:.3em;color:var(--main);font-weight:700;margin-top:2px}
.nav{display:none;gap:26px;font-size:14px}
@media(min-width:960px){.nav{display:flex}}
.nav a{text-decoration:none;color:var(--muted)}
.nav a:hover{color:var(--cream)}
/* ===== hamburger（960px未満で表示） ===== */
.cta--apply-pc{display:none}
@media(min-width:960px){.cta--apply-pc{display:inline-flex}}
.navtoggle{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
width:44px;height:44px;padding:0 9px;margin-left:6px;background:transparent;border:0;cursor:pointer}
@media(min-width:960px){.navtoggle{display:none}}
.navtoggle__bar{display:block;height:2px;width:100%;background:var(--cream);border-radius:2px;
transition:transform .3s ease,opacity .25s ease}
.navtoggle[aria-expanded="true"] .navtoggle__bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle[aria-expanded="true"] .navtoggle__bar:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] .navtoggle__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* ===== drawer（右からスライドイン） ===== */
.drawer{position:fixed;inset:0;z-index:70;visibility:hidden}
.drawer[data-open="true"]{visibility:visible}
@media(min-width:960px){.drawer{display:none}}
.drawer__backdrop{position:absolute;inset:0;width:100%;height:100%;border:0;cursor:pointer;
background:rgba(10,7,5,.62);opacity:0;transition:opacity .34s ease}
.drawer[data-open="true"] .drawer__backdrop{opacity:1}
.drawer__panel{position:absolute;top:0;right:0;height:100%;width:min(80%,320px);
background:var(--bg2);border-left:1px solid var(--line);
padding:82px 30px 40px;display:flex;flex-direction:column;overflow-y:auto;
transform:translateX(100%);transition:transform .36s cubic-bezier(.4,0,.2,1)}
.drawer[data-open="true"] .drawer__panel{transform:none}
.drawer__close{position:absolute;top:16px;right:18px;width:44px;height:44px;border:0;background:transparent;
color:var(--cream);font-size:30px;line-height:1;cursor:pointer;transition:color .2s}
.drawer__close:hover{color:var(--main)}
.drawer__nav{display:flex;flex-direction:column}
.drawer__nav a{text-decoration:none;color:var(--cream);font-size:16px;letter-spacing:.05em;
padding:16px 2px;border-bottom:1px solid var(--line);transition:color .2s}
.drawer__nav a:hover{color:var(--main)}
.drawer__apply{margin-top:26px;align-self:flex-start}
body.nav-open{overflow:hidden}
/* ===== hero（ファーストビュー・動画差し替え前提） ===== */
.hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;overflow:hidden;background:#0f0b08}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media>img,.hero__media>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.hero__media .frame--fill{z-index:0} /* 画像/動画があれば前面に。無い時だけプレースホルダ表示 */
/* ↑ 撮影後、.hero__media の中身を下記に差し替えるだけで動画になります：
*/
.hero__scrim{position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,rgba(15,11,8,.30) 0%,rgba(15,11,8,.10) 38%,rgba(15,11,8,.86) 100%)}
.hero__inner{position:relative;z-index:2;width:100%;padding-bottom:clamp(48px,8vh,96px);padding-top:96px}
.hero__eyebrow{font-family:var(--font-en);color:var(--ember);letter-spacing:.34em;font-size:14px;font-weight:600;margin:0 0 20px}
.hero__title{font-family:var(--font-head);font-size:clamp(35px,7.4vw,70px);line-height:1.34;font-weight:400;margin:0 0 18px;letter-spacing:.05em;text-shadow:0 2px 30px rgba(0,0,0,.5)}
.hero__sub{font-size:clamp(15px,2.2vw,19px);color:#e9ddcd;margin:0 0 34px;max-width:560px}
@media(max-width:640px){.hero{min-height:61vh}} /* SPは全画面の約2/3に収め、動画の横方向がより見えるようにする */
/* TOP動画：音声オン/オフ切り替えボタン（ヘッダー直下に固定し、スクロールしても付いてくる） */
.hero__sound{position:fixed;top:80px;right:20px;z-index:40;width:44px;height:44px;border-radius:50%;
display:flex;align-items:center;justify-content:center;background:rgba(23,17,13,.55);
border:1px solid rgba(244,236,224,.35);color:var(--cream);cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.25);
transition:background .2s ease,border-color .2s ease,color .2s ease}
.hero__sound:hover{border-color:var(--ember);color:var(--ember)}
.hero__sound-icon{width:20px;height:20px;pointer-events:none}
.hero__sound[aria-pressed="false"] .hero__sound-icon--on{display:none}
.hero__sound[aria-pressed="true"] .hero__sound-icon--off{display:none}
@media(max-width:640px){.hero__sound{top:72px;right:16px;width:40px;height:40px}}
/* ===== shop list（全幅・左テキスト／右横長画像を縦に積む） ===== */
.frame--land{aspect-ratio:16/9}
.frame--portrait{aspect-ratio:4/5}
.frame--wide{aspect-ratio:12/5}
.culture-media{margin:40px 0 0}
.culture-media .frame{border:1px solid var(--line)}
/* TOP画像と同様、下部をグラデーションでセクション背景になじませる */
.culture-media .frame__scrim{position:absolute;inset:0;z-index:3;pointer-events:none;
background:linear-gradient(180deg,transparent 50%,rgba(23,17,13,.55) 78%,var(--bg) 100%)}
.shoplist{display:flex;flex-direction:column;gap:28px}
.shoprow{display:grid;grid-template-columns:1fr;background:var(--bg3);border:1px solid var(--line);overflow:hidden}
@media(min-width:820px){.shoprow{grid-template-columns:40% 60%}}
.shoprow__info{padding:30px 30px;display:flex;flex-direction:column;justify-content:center}
.shoprow__no{font-family:var(--font-en);font-size:13px;letter-spacing:.2em;color:var(--main);font-weight:600;margin:0 0 6px}
/* 店名：itookashi.co.jp の見出し（丸明オールド 20px）に合わせる。丸明オールドはGoogle Fonts非対応のため近い Zen Old Mincho を使用 */
.shoprow__name{font-family:"Zen Old Mincho","Shippori Mincho",serif;font-size:20px;font-weight:700;margin:0;letter-spacing:normal;line-height:1.5625;color:var(--cream);
display:flex;align-items:center;gap:12px;white-space:nowrap}
@media(min-width:820px){.shoprow__name{font-size:24px}} /* PC版は24px */
.shoprow__name::before{content:"";width:20px;height:1px;background:var(--main);flex:none}
.shoprow__area{font-size:13px;color:var(--muted);margin:8px 0 0}
.spec{margin:18px 0 0;padding:0}
.spec>div{display:grid;grid-template-columns:82px 1fr;gap:10px;padding:9px 0;border-top:1px solid var(--line)}
.spec dt{margin:0;color:var(--muted);font-size:12px;letter-spacing:.04em}
.spec dd{margin:0;color:var(--cream);font-size:14px;line-height:1.7}
.spec dd .note-sm{color:var(--muted);font-size:12px}
/* 住所：Googleマップへのテキストリンク */
.spec dd a{color:var(--cream);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .2s}
.spec dd a:hover{color:var(--ember)}
/* Instagram / 予約リンク */
.shop-links{display:flex;align-items:center;gap:22px;margin-top:20px}
.shop-ig{display:inline-flex;align-items:center;color:var(--cream);transition:color .2s}
.shop-ig:hover{color:var(--ember)}
.shop-ig svg{width:24px;height:24px;display:block}
.shop-reserve{color:var(--ember);font-weight:700;font-size:15px;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;transition:color .2s}
.shop-reserve:hover{color:var(--main)}
.shoprow__media{position:relative}
@media(max-width:819px){.shoprow__media{margin-left:0;margin-right:0}} /* SPのみ：figureの初期マージンを外しカード幅いっぱいに */
/* スライダー内の画像は 16:9 を維持（frame--land） */
.note{font-size:12px;color:var(--muted);margin:24px 0 0}
/* ===== 募集要項：職種カード（写真は左・縦長でカード上下いっぱい／文字情報がメイン） ===== */
.joblist{display:flex;flex-direction:column;gap:28px}
.jobrow{display:grid;grid-template-columns:1fr;background:#efe4d5;border:1px solid #cdb9a0;overflow:hidden}
@media(min-width:820px){.jobrow{grid-template-columns:auto 1fr}} /* 写真の幅は縦横比から自動算出。align-itemsは既定のstretch＝カード高さいっぱいに伸びる */
/* カードがベージュのため、中の文字色を濃色に上書き（.shoprow__*系はSHOP LIST=ダーク背景向けの色指定のため） */
.jobrow .shoprow__name{color:#241a12}
/* キャッチコピーとして見出しらしく（SHOP LISTの.shoprow__areaより大きく・太く） */
.jobrow .shoprow__area{font-family:var(--font-head);font-size:clamp(16px,2vw,19px);font-weight:400;color:#6a5c4c;line-height:1.6;letter-spacing:.02em;margin:0 0 6px}
.jobrow .spec dt{color:#6a5c4c}
.jobrow .spec dd{color:#3a2e22}
.jobrow .spec>div{border-top-color:rgba(90,70,50,.2)}
/* テキストゾーンの右余白を詰める */
.jobrow .shoprow__info{padding-right:18px}
/* 応募ボタンをカード内で中央配置に */
.jobrow .shop-links{justify-content:center}
@media(min-width:820px){.jobrow .shop-links{justify-content:flex-end}}
/* figureの初期マージン(1em 40px)を常時リセットしないと、幅100%指定と合算してカードからはみ出す */
.jobrow__media{position:relative;margin:0}
/* 実画像の比率(3:4)に合わせ、左右をトリミングせず全体を表示する（PC） */
.jobrow__media .frame{border:0;aspect-ratio:3/4}
/* 「福利厚生」追加前のカード高さを写真サイズの上限にする（それ以上カードが伸びても写真は肥大化させない） */
@media(min-width:820px){.jobrow__media .frame{height:100%;width:auto;max-height:487px}}
/* デフォルトはPC用のシンプル表示（ぼかし複製は非表示） */
.jobrow__media .frame img.jobphoto__blur{display:none}
/* モバイル：写真をカード幅いっぱいの正方形にし、実写真はレターボックスなしで全体表示、
左右に生まれる余白は同じ写真をぼかして拡大したものでリフレインして埋める */
@media(max-width:819px){
.jobrow__media{max-width:none}
.jobrow__media .frame{aspect-ratio:1/1}
.jobrow__media .frame img.jobphoto__blur{display:block;position:absolute;top:50%;left:50%;width:150%;height:150%;max-width:none;
transform:translate(-50%,-50%);object-fit:cover;filter:blur(24px) brightness(.72) saturate(1.1);z-index:1}
.jobrow__media .frame img.jobphoto__main{position:relative;z-index:2;width:100%;height:100%;object-fit:contain}
/* 実写真が常時存在するため、未読込時のプレースホルダー文言（レターボックス部分に透けて見える）は非表示に */
.jobrow__media .frame .frame__label,.jobrow__media .frame .frame__note{display:none}
}
/* ===== 店舗スライダー（各店3枚・依存なし） ===== */
.slider{position:relative;overflow:hidden;background:#0f0b08}
.slider__track{display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1);will-change:transform}
.slide{min-width:100%}
.slide .frame{border:0}
.slider__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;
width:46px;height:46px;border-radius:999px;border:0;cursor:pointer;
background:rgba(23,17,13,.55);color:#fff;font-size:24px;line-height:1;
display:flex;align-items:center;justify-content:center;transition:background .2s}
.slider__arrow:hover{background:var(--accent)}
.slider__arrow--prev{left:14px}
.slider__arrow--next{right:14px}
.slider__dots{position:absolute;left:0;right:0;bottom:14px;z-index:4;display:flex;gap:8px;justify-content:center}
.slider__dots button{width:9px;height:9px;padding:0;border:0;border-radius:999px;cursor:pointer;
background:rgba(244,236,224,.45);transition:width .2s,background .2s}
.slider__dots button[aria-current="true"]{width:24px;background:var(--main)}
/* ===== staff voice（レイアウト維持・ダークテーマ） =====
SP：カード→本文パネルを人物ごとに交互配置（DOM順のまま1カラムで積む）
PC：カードは3カラムに明示配置、パネルは3枚とも2行目の同じ領域に重ねて配置（従来の「カード行の下に共有パネル欄」を再現） */
.voicegrid{display:grid;grid-template-columns:1fr}
.vcard{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:10px}
.vcard__photo{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;
background:linear-gradient(135deg,#2a2019,#1d150f);border:1px solid rgba(244,236,224,.12)}
.vcard__photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.vcard__photo::before{content:"";position:absolute;inset:0;z-index:0;
background-image:linear-gradient(rgba(244,236,224,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(244,236,224,.05) 1px,transparent 1px);
background-size:28px 28px}
.vcard__photo::after{content:"";position:absolute;inset:0;z-index:0;
background:linear-gradient(to bottom right,transparent calc(50% - .6px),rgba(244,236,224,.12) calc(50% - .6px),rgba(244,236,224,.12) calc(50% + .6px),transparent calc(50% + .6px))}
.vcard__phlabel{position:absolute;top:10px;left:12px;z-index:1;font-family:var(--font-en);font-size:12px;font-weight:600;letter-spacing:.06em;color:#9a8a76}
.vcard__catch{position:absolute;top:20px;right:36px;z-index:3;writing-mode:vertical-rl;text-orientation:upright;
text-align:start;
font-family:var(--font-head);font-size:clamp(22px,2.8vw,28px);font-weight:400;color:var(--cream);line-height:1.55;letter-spacing:.06em;
max-height:calc(100% - 40px);text-shadow:0 2px 14px rgba(0,0,0,.6)}
/* オンマウスでキャッチの背後に帯（不透明度30%） */
.vcard__catch::before{content:"";position:absolute;inset:-14px -10px;z-index:-1;
background:rgba(0,0,0,.3);opacity:0;transition:opacity .3s ease;pointer-events:none}
.vcard__photo:hover .vcard__catch::before,.vcard__photo:focus-within .vcard__catch::before{opacity:1}
.vcard__name{font-family:var(--font-en);margin:18px 0 14px;font-size:22px;font-weight:700;color:var(--cream);letter-spacing:.06em}
/* ホンネを読む（囲み線なし・下線付きテキストリンク） */
.toggle-btn{appearance:none;cursor:pointer;font:inherit;font-weight:700;font-size:15px;
color:var(--ember);background:transparent;border:0;padding:6px 2px;
display:inline-flex;align-items:center;gap:8px;line-height:1.4;
text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;transition:color .2s}
.toggle-btn .tri{font-size:11px;transition:transform .3s ease}
.toggle-btn:hover{color:var(--main)}
.toggle-btn[aria-expanded="true"] .tri{transform:rotate(90deg)}
/* 人物画像クリックでも開閉 */
.vcard__photo{cursor:pointer}
/* 展開パネル（全幅・SEO配慮：height:0/overflow:hidden、本文はDOMに常在・ポップアップ不使用） */
.vpanel{height:0;overflow:hidden;transition:height .45s ease;background:var(--bg3);margin-bottom:24px}
.vpanel[data-open="true"]{border-top:3px solid var(--accent)}
@media(min-width:720px){
.voicegrid{grid-template-columns:repeat(3,1fr);column-gap:26px;row-gap:10px}
.vcard{margin-bottom:0}
.vcard--1{grid-column:1;grid-row:1}
.vcard--2{grid-column:2;grid-row:1}
.vcard--3{grid-column:3;grid-row:1}
.vpanel{grid-column:1/-1;grid-row:2;margin-bottom:0}
}
.vpanel__inner{padding:30px 24px 36px;max-width:860px;margin:0 auto}
.vpanel__profile{font-size:13px;color:var(--muted);margin:0 0 6px}
.vpanel__profile b{color:var(--ember);font-size:16px;font-weight:700}
/* 導入リードを枠線カードで差別化（本文・小見出しと区別）。フォントは「神奈川・野毛」等と同じ小さめ（13px） */
.vpanel__lead{margin:6px 0 10px;color:#efe3d0;font-size:13px;line-height:1.9;
background:rgba(255,191,122,.06);border:1px solid rgba(255,191,122,.26);border-left:3px solid var(--accent);
padding:20px 22px}
.vpanel h4{font-family:var(--font-head);font-size:17px;color:var(--main);margin:24px 0 6px;font-weight:400}
.vpanel p{margin:0 0 4px;color:#d8ccbc}
.vpanel__media{margin:20px 0;max-width:420px}
/* 本文末尾の「閉じる」（下線付きテキストリンク・応募ボタン横に配置） */
.vpanel__close{appearance:none;cursor:pointer;font:inherit;font-weight:700;font-size:14px;
color:var(--muted);background:transparent;border:0;padding:8px 4px;
display:inline-flex;align-items:center;gap:6px;line-height:1.4;
text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;transition:color .2s}
.vpanel__close .tri{font-size:10px}
.vpanel__close:hover{color:var(--ember)}
/* ===== a day ===== */
.tabs{display:flex;gap:12px;margin-bottom:30px;flex-wrap:wrap}
.tab{border:1.5px solid var(--line);background:transparent;border-radius:999px;padding:10px 22px;font-weight:700;font-size:14px;cursor:pointer;color:var(--muted);font-family:var(--font-body)}
.tab[aria-selected="true"]{border-color:var(--main);color:var(--main)}
.timeline{display:none}
.timeline.is-active{display:block}
/* 時間帯を横並びのフィルムストリップに */
.frame--land43{aspect-ratio:4/3}
.daystrip{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(min-width:760px){.daystrip{grid-template-columns:repeat(4,1fr);gap:16px}}
.daycol{display:flex;flex-direction:column}
.daycol__media{position:relative;margin:0}
.daycol__time{font-family:var(--font-en);font-weight:700;color:var(--main);font-size:clamp(22px,2.4vw,28px);letter-spacing:.04em;margin:16px 0 4px;
display:flex;align-items:center;gap:10px}
.daycol__time::before{content:"";width:16px;height:2px;background:var(--main);flex:none}
.daycol__cap{margin:0;color:var(--muted);font-size:13.5px;line-height:1.7}
.daycol__cap b{color:var(--cream);font-weight:700}
/* ===== recruit ===== */
.rtable{width:100%;border-collapse:collapse;margin:0 0 34px;font-size:15px}
.rtable th,.rtable td{text-align:left;padding:16px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.rtable th{width:32%;color:var(--main);font-weight:700;white-space:nowrap}
.ph-note{color:var(--ember);font-size:12px;font-weight:700}
.recruit-catch{font-family:var(--font-head);font-size:clamp(21px,3.6vw,32px);font-weight:400;line-height:1.5;margin:0 0 30px}
/* 1行目のみ「少量多皿おまかせ一本」(.h2)と同じフォント条件に */
.recruit-catch__hd{font-family:var(--font-head);font-size:clamp(27px,4.6vw,42px);font-weight:400;line-height:1.42;letter-spacing:.03em}
/* 2行目は「とある日の14:00。…」(.h4)と同じフォント条件に（色は現状維持） */
.recruit-catch__sub{font-family:var(--font-head);font-size:clamp(19px,2.6vw,26px);font-weight:400;line-height:1.5;letter-spacing:.03em}
/* 横長画像を上に、詳細を下に */
.recruit__media{margin:0 0 36px}
.recruit__media .frame{border:1px solid var(--line)}
.recruit__detail{max-width:760px}
/* ===== about（会社紹介：VISION / TOP MESSAGE） ===== */
.eyebrow__ja{margin-left:10px;letter-spacing:.08em;color:#6a5c4c}
.about-block + .about-block{margin-top:76px}
.about-kicker{font-family:var(--font-en);font-weight:700;letter-spacing:.2em;font-size:14px;color:#241a12;margin:0 0 14px}
/* リード文は「ワクワクする…」(.sub)と同じフォント・サイズ（色は現状維持） */
.about-lead{font-family:var(--font-body);font-size:clamp(15px,1.8vw,17px);line-height:1.9;color:#5c4f40;margin:0 0 30px}
/* 見出し先頭のYouTubeアイコン */
.yt-icon{width:.78em;height:.78em;vertical-align:-.06em;margin-right:.22em;display:inline-block}
.uni-list{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.uni-list__ttl{font-size:clamp(18px,2.2vw,21px);font-weight:700;letter-spacing:.02em;color:#241a12;margin:0 0 5px}
.uni-list__ttl span{font-weight:400;font-size:.75em;margin-left:10px;color:#6a5c4c;letter-spacing:.04em}
.uni-list__desc{font-size:13px;line-height:1.8;color:#5c4f40;margin:0 0 0 1.5em}
/* TOP MESSAGE のリード（導入コピー）：サイズは.subのまま、色・太さ・アクセント罫で強調 */
.about-catch{font-weight:700;color:#2b2119;line-height:1.7;letter-spacing:.03em;
margin:0 0 22px;padding-left:16px;border-left:3px solid var(--accent)}
.uni-more{display:inline-flex;align-items:center;gap:6px;margin-top:28px;
font-weight:700;font-size:14px;letter-spacing:.04em;color:var(--accent);
text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;transition:color .2s}
.uni-more:hover{color:#241a12}
.about-message{align-items:start}
/* 代表写真のカラムを少し狭め、その分テキストを広げる（PC/タブレット幅のみ） */
@media(min-width:860px){.split.about-message{grid-template-columns:1.15fr .85fr}}
/* 本文は「経験不問・学歴不問。…」(.rtable td)と同じフォント・サイズ（色は現状維持）
均等割付け（各行を両端揃え）／段落の最終行は自動で左詰 */
.message-body p{font-family:var(--font-body);font-size:15px;line-height:1.9;color:#3a2e22;
margin:0 0 1.1em;text-align:justify;text-align-last:auto}
.message-body p:last-child{margin-bottom:0}
/* 締めの短い数行は左詰（各行が改行=左揃え） */
.message-body__end{text-align:left}
.message-media{display:grid;gap:18px;align-content:start}
/* 代表サイン：枠なし・背景透過のまま、写真の下に直接書いたように配置 */
/* 写真(figure)側のデフォルト左右余白(40px)に合わせ、実際の写真幅と揃える */
.sign-figure{margin:2px 40px 0;display:flex;align-items:center;justify-content:space-between}
.sign-img{display:block;width:50%;min-width:100px;height:auto}
/* サイン横のInstagramリンク（写真左下） */
.about-ig{display:inline-flex;align-items:center;color:#2b2119;transition:color .2s}
.about-ig:hover{color:var(--accent)}
.about-ig svg{width:26px;height:26px;display:block}
/* 写真カラムが狭まった分、サインの見た目サイズは変わらないよう補正（PC/タブレット幅のみ） */
@media(min-width:860px){.sign-img{width:58%}}
/* 会社紹介→会社概要の境目を少し詰める（同じ背景で連続するため） */
#about{padding-bottom:64px}
#company{padding-top:64px}
/* ===== company（会社概要 / 略歴） ===== */
.mission{font-family:var(--font-head);font-size:clamp(19px,2.8vw,26px);font-weight:400;line-height:1.6;margin:0 0 8px}
.ctable{width:100%;border-collapse:collapse;font-size:15px}
.ctable th,.ctable td{text-align:left;padding:15px 12px;border-bottom:1px solid rgba(90,70,50,.2);vertical-align:top}
/* 見出しラベルを均等割り付け（各ラベル同じ幅・文字を均等配置） */
.ctable th{width:5.8em;padding-left:0;color:#6a5c4c;font-weight:700;text-align:justify;text-align-last:justify;word-break:keep-all}
/* ラベルと値のあいだに余白 */
.ctable td{padding-left:52px}
.ctable__link{color:inherit;text-decoration:underline;text-underline-offset:2px}
.ctable__link:hover{color:var(--accent)}
.ctable__contact td{text-align:center;padding:20px 12px 4px;border-bottom:none;color:#6a5c4c;font-size:14px}
/* 会社概要 見出し：ブランド名はボールド／法人名は小さく */
.co-brand{font-weight:700}
.co-legal{font-size:.62em;font-weight:400}
.history{margin-top:56px}
.timeline-hist{list-style:none;margin:14px 0 0;padding:0}
.timeline-hist li{display:flex;gap:22px;padding:9px 0;font-size:15px;line-height:1.7}
.timeline-hist .thy{flex:none;width:66px;color:#6a5c4c;font-weight:700}
.timeline-hist .tht{color:#3a2e22}
.timeline-hist__birth{border-bottom:1px solid rgba(90,70,50,.28);padding-bottom:20px;margin-bottom:14px}
/* ===== recruit detail page（価値観 / 募集要項） ===== */
.rhero{position:relative;min-height:52vh;display:flex;align-items:flex-end;overflow:hidden;background:#0f0b08}
.rhero[hidden]{display:none} /* display:flexがhidden属性のUA既定(display:none)を上書きしてしまうため明示 */
.rhero__media{position:absolute;inset:0;z-index:0}
.rhero__media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rhero__scrim{position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,rgba(15,11,8,.35) 0%,rgba(15,11,8,.15) 40%,rgba(15,11,8,.92) 100%)}
.rhero__inner{position:relative;z-index:2;width:100%;padding-top:96px;padding-bottom:52px}
.rhero__title{font-family:var(--font-en);color:var(--cream);font-size:clamp(44px,9vw,96px);line-height:1.05;font-weight:700;
margin:0 0 6px;letter-spacing:.01em;text-shadow:0 4px 40px rgba(0,0,0,.55)}
/* 白フチ文字（塗り透過＋白ストローク）。recruit.htmlの「CREATE WHAT'S NEXT.」専用の強調表現。
Roboto Condensed・Montserrat・Noto Sans JPは「R」等でフチの線が自己交差したため、
交差が起きないZen Kaku Gothic New（Bold/Black・ゴシック系）に変更。未対応ブラウザは塗り白にフォールバック */
.rhero__title--outline{color:#fff;font-family:'Zen Kaku Gothic New',var(--font-en);font-weight:900;letter-spacing:0;font-size:clamp(38px,8.5vw,92px)}
@supports (-webkit-text-stroke:1px #fff){
.rhero__title--outline{color:transparent;-webkit-text-stroke:1.8px #fff;text-shadow:0 4px 30px rgba(0,0,0,.4)}
}
.rhero__br{display:none}
@media(max-width:640px){.rhero__br{display:block}}
.rhero__eyebrow{font-family:var(--font-head);color:var(--ember);letter-spacing:.1em;font-size:clamp(13px,1.6vw,16px);font-weight:400;margin:0;text-shadow:0 2px 20px rgba(0,0,0,.5)}
/* サブメニュー（価値観 / 募集要項）：960px以上はヘッダー内の.navに統合されるため非表示、モバイルのみ表示 */
/* ヘッダー同様、スクロールしても画面上部に付いてくる */
.rtabs{position:sticky;top:64px;z-index:45;background:rgba(23,17,13,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
@media(min-width:960px){.rtabs{display:none}}
.rtabs__inner{display:flex;gap:12px;flex-wrap:wrap;padding:16px 0}
.rtabs a{border:1.5px solid var(--line);border-radius:999px;padding:10px 24px;font-weight:700;font-size:14px;
color:var(--muted);text-decoration:none;font-family:var(--font-body);transition:border-color .2s,color .2s}
.rtabs a:hover{color:var(--cream)}
.rtabs a.is-active{border-color:var(--main);color:var(--main)}
/* MISSION本文 */
.rtext p{font-family:var(--font-body);font-size:15px;line-height:1.9;color:#d8ccbc;margin:0 0 1.1em;max-width:760px}
.rtext p:last-child{margin-bottom:0}
.rtext--mt{margin-top:44px}
.rtext--mt h4{margin-bottom:14px}
.rtext-sign{margin-top:28px;text-align:right;color:var(--muted);font-size:14px;letter-spacing:.04em}
/* VISIONの強調ステートメント（アクセント罫） */
.rstatement{font-family:var(--font-head);font-weight:400;font-size:clamp(19px,2.6vw,26px);line-height:1.7;color:var(--cream);
margin:34px 0 0;padding-left:18px;border-left:3px solid var(--accent)}
/* VISION：写真2枚（indexのTOP MESSAGEと同様、テキスト＋写真の2カラム） */
.split.vision-split{align-items:start;margin-top:8px}
@media(min-width:860px){.split.vision-split{grid-template-columns:1.3fr .7fr}}
.vision-media{display:grid;gap:18px;align-content:start}
/* uni-list をダーク／木目背景でも使えるように */
.sec-dark .uni-list__ttl,.sec-wood .uni-list__ttl{color:var(--cream)}
.sec-dark .uni-list__ttl span,.sec-wood .uni-list__ttl span{color:var(--muted)}
.sec-dark .uni-list__desc,.sec-wood .uni-list__desc{color:var(--muted)}
/* VALUE：7つの価値観カード */
.value-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:8px}
@media(min-width:640px){.value-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.value-grid{grid-template-columns:repeat(3,1fr)}}
.value-card{background:var(--bg3);border:1px solid var(--line);padding:26px 24px}
.value-card__no{font-family:var(--font-en);font-size:13px;letter-spacing:.16em;color:var(--main);font-weight:700;margin:0 0 8px}
.value-card__ttl{font-family:var(--font-head);font-size:18px;font-weight:400;color:var(--cream);margin:0 0 10px;letter-spacing:.02em}
.value-card__desc{font-size:13.5px;line-height:1.8;color:var(--muted);margin:0}
/* YOUTUBE：最新動画（YouTube Data API v3で自動取得） */
.ytgrid{display:grid;grid-template-columns:1fr;gap:24px;margin:8px 0 32px}
@media(min-width:640px){.ytgrid{grid-template-columns:repeat(3,1fr)}}
.ytcard{display:block;color:inherit;text-decoration:none}
.ytcard__thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--bg3);border:1px solid var(--line)}
.ytcard__thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ytcard__ttl{margin:12px 0 0;font-size:14px;line-height:1.7;color:var(--cream);transition:color .2s}
.ytcard:hover .ytcard__ttl{color:var(--ember)}
.yt-fallback{color:var(--muted);font-size:14px;margin:8px 0 32px}
/* クリーム背景（会社紹介セクション）での配色調整 */
.sec-cream .ytcard__thumb{background:linear-gradient(135deg,#e7dac8,#ddcbb4);border-color:#cdb9a0}
.sec-cream .ytcard__ttl{color:#3a2e22}
.sec-cream .ytcard:hover .ytcard__ttl{color:var(--accent)}
.sec-cream .yt-fallback{color:#6a5c4c}
/* ===== final cta ===== */
.finalcta{position:relative;text-align:center;padding:112px 24px;background:
radial-gradient(90% 120% at 50% 0%,rgba(232,83,29,.22),transparent 60%),var(--bg)}
.finalcta h3{font-family:var(--font-head);font-size:clamp(27px,5.2vw,46px);margin:0 0 14px;font-weight:400;letter-spacing:.03em}
.finalcta p{margin:0 0 34px;color:var(--muted)}
.footer{background:#0f0b08;color:#8f8272;text-align:center;padding:38px 24px;font-size:13px;border-top:1px solid var(--line)}
.footer b{font-family:var(--font-en);color:var(--cream);letter-spacing:.1em}
.footer__home{text-decoration:none;transition:opacity .2s}
.footer__home:hover{opacity:.7}
.footer__policy{display:inline-block;margin-top:10px;color:#8f8272;text-decoration:underline;transition:opacity .2s}
.footer__policy:hover{opacity:.7}
/* two-col block */
.split{display:grid;grid-template-columns:1fr;gap:34px;align-items:center}
@media(min-width:860px){.split{grid-template-columns:1.05fr .95fr}}
@media(min-width:860px){.split--rev .split__media{order:0}}
/* ===== mobile sticky apply（統一CTA） ===== */
.mobilebar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:10px;
padding:10px 14px calc(10px + env(safe-area-inset-bottom));
background:rgba(23,17,13,.94);border-top:1px solid var(--line);backdrop-filter:blur(8px)}
.mobilebar .cta{flex:1;padding:14px 10px}
@media(min-width:960px){.mobilebar{display:none}}
body{padding-bottom:76px}
/* ===== プライバシーポリシー等、長文テキストページ ===== */
.policy{max-width:760px}
.policy__body h2{margin-top:40px}
.policy__body h2:first-child{margin-top:0}
.policy__body p{font-size:15px;line-height:1.9;margin:0 0 16px;color:inherit}
.policy__list{margin:0 0 16px;padding-left:1.4em;font-size:15px;line-height:1.9}
.policy__list li{margin-bottom:6px}
.policy__contact{font-size:15px;line-height:1.9}
.policy__contact a{color:inherit;text-decoration:underline}
.policy__date{font-size:13px;color:#6a5c4c;margin-top:36px}
.policy .cta-row{margin-top:48px}
@media(min-width:960px){body{padding-bottom:0}}