@charset "utf-8";
/* ============================================================
   DENSHO Group Holdings ── 共通スタイル
   デザイン：案E（落書きアート＋やわらかポップ）
   配色：くすみ3色。色覚多様性(CVD)検証で全ペアPASS済み
     ブルー   #3F72AF  電設事業
     テラコッタ #D9744F  飲食事業
     マスタード #E3B33D  アクセント（※白文字不可。濃い文字を載せる用）
   ============================================================ */

:root{
  --ink:#22262C; --sub:#767E8A; --line:#EAE6DF;
  --paper:#FBF9F5; --paper2:#F4F1EB;
  --blue:#3F72AF; --blue-l:#E8EFF7; --blue-d:#2C5182;
  --terra:#D9744F; --terra-l:#FBEDE6; --terra-d:#A9522F;
  --mustard:#E3B33D; --mustard-l:#FCF4DF;
  --wrap:1280px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Yu Gothic UI","Hiragino Kaku Gothic ProN","Meiryo",system-ui,sans-serif;
  color:var(--ink);background:var(--paper);line-height:1.95;-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto}
.center{text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* スクロールで現れる */
/* 2026-10-18 隠すのは site.js が動いた時（html.rvjs）だけ。JSが動かないブラウザでも文字は必ず出る */
.rvjs .rv{opacity:0;transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.rvjs .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}
  *{animation:none!important;transition:none!important}
}

/* ── スキップリンク ── */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 10px 0}
.skip:focus{left:0}

/* ── ヘッダー ── */
header{position:sticky;top:0;z-index:60;background:rgba(251,249,245,.92);backdrop-filter:blur(14px)}
.hin{max-width:var(--wrap);margin:0 auto;padding:0 24px;height:80px;display:flex;align-items:center;gap:26px}
.logo{font-weight:800;font-size:20px;display:flex;align-items:center;gap:11px;white-space:nowrap;
  letter-spacing:-.01em;text-decoration:none}
nav{margin-left:auto;display:flex;align-items:center;gap:22px;font-size:13.5px;font-weight:700}
nav>a{text-decoration:none;color:#3F4650;transition:color .2s}
nav>a:hover,nav>a[aria-current="page"]{color:var(--blue)}
/* 会社名＋業種の2段組みタブ（株式会社電商／DENSHO Lab.） */
nav>a.nav2{display:flex;flex-direction:column;justify-content:center;line-height:1.3}
nav>a.nav2 small{font-size:10.5px;font-weight:700;color:var(--sub);letter-spacing:.04em;margin-top:2px}
nav>a.nav2:hover small,nav>a.nav2[aria-current="page"] small{color:var(--blue)}
.pill{padding:11px 21px;border-radius:999px;font-weight:800;transition:.2s;text-decoration:none}
.pill-t{background:var(--terra);color:#fff}
.pill-t:hover{background:var(--terra-d);color:#fff}
.pill-o{border:1.5px solid var(--line);background:#fff;display:flex;align-items:center;gap:7px}
.pill-o:hover{border-color:var(--blue);color:var(--blue)}
.navbtn{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}
.navbtn span{display:block;width:24px;height:2.5px;background:var(--ink);border-radius:2px;margin:5px 0;transition:.25s}
@media(max-width:1120px){
  nav{position:fixed;inset:80px 0 auto;background:var(--paper);flex-direction:column;align-items:stretch;
    gap:0;padding:14px 24px 30px;box-shadow:0 14px 30px rgba(34,38,44,.1);display:none}
  nav.open{display:flex}
  nav>a{padding:14px 4px;border-bottom:1px solid var(--line);font-size:15px}
  .pill{margin-top:12px;text-align:center;justify-content:center}
  .navbtn{display:block}
}

/* ── ボタン ── */
.btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-size:14px;font-weight:800;
  padding:15px 30px;border-radius:999px;transition:.22s;border:0;cursor:pointer}
.btn-t{background:var(--terra);color:#fff;box-shadow:0 6px 20px rgba(217,116,79,.32)}
.btn-t:hover{background:var(--terra-d);transform:translateY(-2px)}
.btn-i{background:var(--ink);color:#fff}
.btn-i:hover{transform:translateY(-2px)}
.btn-b{background:var(--blue);color:#fff}
.btn-b:hover{background:var(--blue-d);transform:translateY(-2px)}
.btn-g{background:#fff;border:1.5px solid var(--line);color:var(--ink)}
.btn-g:hover{border-color:var(--ink);transform:translateY(-2px)}

/* ── セクション見出し ── */
section{padding:clamp(60px,7.5vw,110px) 24px;position:relative}
.shead{margin-bottom:46px}
.shead .en{display:block;font-size:11px;letter-spacing:.26em;font-weight:800;color:var(--terra);margin-bottom:12px}
.shead h2{font-size:clamp(22px,3vw,36px);margin:0;font-weight:800;line-height:1.5}
.shead p{color:var(--sub);font-size:15px;margin:16px 0 0;max-width:40em}
.center .shead p{margin-left:auto;margin-right:auto}

/* ── 下層ページの見出し帯 ── */
.phead{padding:clamp(40px,5vw,64px) 24px clamp(26px,3vw,40px);background:var(--paper2);position:relative;overflow:hidden}
.phead .in{max-width:var(--wrap);margin:0 auto;position:relative;z-index:2}
.phead h1{font-size:clamp(24px,3.6vw,40px);margin:0;font-weight:800;line-height:1.42;letter-spacing:-.015em}
.phead .en{display:block;font-size:11px;letter-spacing:.26em;font-weight:800;color:var(--terra);margin-bottom:10px}
.phead .lead{color:#4B535E;font-size:15px;margin:18px 0 0;max-width:44em;font-weight:600}
.phead .deco{position:absolute;right:-10px;bottom:-20px;width:min(320px,34%);opacity:.5;pointer-events:none}
.crumb{max-width:var(--wrap);margin:0 auto;padding:14px 24px;font-size:12px;color:var(--sub)}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--blue)}
.crumb span{margin:0 8px;opacity:.6}

/* ── 本文 ── */
.prose{max-width:52em}
.prose h3{font-size:clamp(18px,2.2vw,23px);font-weight:800;margin:44px 0 14px;line-height:1.55}
.prose h4{font-size:16px;font-weight:800;margin:30px 0 10px}
.prose p{margin:0 0 18px;font-size:15px;color:#3D444F}
.prose ul{margin:0 0 20px;padding-left:1.3em}
.prose li{margin-bottom:8px;font-size:15px;color:#3D444F}

/* ── 定義表（会社概要など） ── */
.dl{border-top:1px solid var(--line)}
.dl>div{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:0;border-bottom:1px solid var(--line)}
.dl dt{padding:20px 18px 20px 0;font-weight:800;font-size:14px}
.dl dd{padding:20px 0;margin:0;font-size:14.5px;color:#3D444F}
@media(max-width:640px){
  .dl>div{grid-template-columns:1fr}
  .dl dt{padding-bottom:2px}
  .dl dd{padding-top:2px}
}

/* ── カード ── */
.card{background:#fff;border-radius:26px;padding:34px 30px;box-shadow:0 3px 20px rgba(34,38,44,.05)}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:900px){.grid4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:880px){.grid3{grid-template-columns:1fr}}
@media(max-width:780px){.grid2{grid-template-columns:1fr}}

/* ── 数字 ── */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,26px)}
@media(max-width:780px){.nums{grid-template-columns:repeat(2,1fr);gap:26px}}
.num{text-align:center}
.num b{display:block;font-size:clamp(30px,4.4vw,50px);font-weight:800;line-height:1.1;letter-spacing:-.02em}
.num:nth-child(1) b{color:var(--blue)}
.num:nth-child(2) b{color:var(--ink)}
.num:nth-child(3) b{color:var(--terra)}
.num:nth-child(4) b{color:#B8901F}
.num b i{font-style:normal;font-size:.4em;margin-left:3px}
.num span{font-size:12.5px;color:var(--sub);font-weight:700}
/* 2026-10-23 オーナー「携帯で見た際、数字で見るDENSHOの数字を数字の中心で揃えて」＝単位（年・名・歳…）を数字の右にぶら下げ、数字だけで中央に置く。
   単位が1つのものだけ（22%：78% は全体で中央のまま） */
@media(max-width:780px){
  .num b{display:inline-block;position:relative}
  .num>span{display:block}
  .num b i:only-of-type{position:absolute;left:100%;bottom:.42em;margin-left:3px;white-space:nowrap;line-height:1}
}

/* ── 事業カード ── */
.biz{display:grid;gap:26px}
.bcard{border-radius:30px;overflow:hidden;text-decoration:none;color:inherit;display:grid;
  grid-template-columns:1.05fr .95fr;min-height:320px;transition:transform .3s,box-shadow .3s;
  box-shadow:0 3px 24px rgba(34,38,44,.06)}
.bcard:hover{transform:translateY(-5px);box-shadow:0 16px 44px rgba(34,38,44,.11)}
.bcard.e{background:var(--blue-l)}
.bcard.f{background:var(--terra-l);direction:rtl}
.bcard.f>*{direction:ltr}
@media(max-width:880px){.bcard,.bcard.f{grid-template-columns:1fr}}
.bart{display:grid;place-items:center;padding:26px;min-height:240px}
.bbody{padding:clamp(30px,4vw,54px);display:flex;flex-direction:column;justify-content:center}
.btag{display:inline-flex;font-size:11.5px;font-weight:800;padding:7px 15px;border-radius:999px;
  align-self:flex-start;margin-bottom:16px;background:#fff}
.e .btag{color:var(--blue-d)}
.f .btag{color:var(--terra-d)}
.bbody h3{margin:0 0 5px;font-size:clamp(22px,2.5vw,30px);font-weight:800;letter-spacing:-.015em}
.e h3{color:var(--blue-d)}
.f h3{color:var(--terra-d)}
.bbody .en2{font-size:11.5px;color:var(--sub);font-weight:800;letter-spacing:.13em;margin:0 0 18px}
.bbody p{margin:0 0 22px;font-size:14.5px;color:#4B535E}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.chip{font-size:12px;font-weight:700;background:rgba(255,255,255,.75);border-radius:999px;padding:7px 15px;color:#4B535E}
.more{font-weight:800;font-size:14px;display:inline-flex;align-items:center;gap:8px}
.more::after{content:"→";transition:transform .25s}
.bcard:hover .more::after{transform:translateX(7px)}

/* ── 動画 ── */
.movie{background:var(--ink);color:#fff}
.movie .shead .en{color:var(--mustard)}
.movie .shead h2{color:#fff}
.movie .shead p{color:#A9B1BD}
.vstage{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:16/9;
  background:linear-gradient(135deg,#39414d,#2b323c);display:grid;place-items:center;cursor:pointer}
.vstage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.play{position:relative;z-index:3;width:86px;height:86px;border-radius:50%;background:rgba(255,255,255,.94);
  display:grid;place-items:center;box-shadow:0 10px 34px rgba(0,0,0,.32);transition:transform .25s}
.vstage:hover .play{transform:scale(1.07)}
.play::after{content:"";border-left:23px solid var(--ink);border-top:14px solid transparent;
  border-bottom:14px solid transparent;margin-left:6px}
/* 2026-10-23 動画の下の操作ボタン（再生／BGM） */
.vctrl{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:18px}
.vctrl[hidden]{display:none}
.vbtn{font:inherit;font-size:15px;font-weight:700;letter-spacing:.04em;min-height:48px;padding:0 26px;border-radius:999px;
  cursor:pointer;border:2px solid #fff;background:#fff;color:var(--ink);transition:background .2s,color .2s}
.vbtn:hover{background:var(--mustard);border-color:var(--mustard)}
.vbtn.vbgm{background:transparent;color:#fff}
.vbtn.vbgm:hover{background:rgba(255,255,255,.12);border-color:#fff}
.vbtn.vbgm.off{color:#A9B1BD;border-color:#6b7480}
.vnote{margin-top:12px;font-size:12.5px;color:#A9B1BD;line-height:1.7}
.vcap{position:absolute;left:18px;bottom:16px;z-index:4;font-size:11px;color:rgba(255,255,255,.82);
  background:rgba(0,0,0,.36);border-radius:9px;padding:7px 12px;line-height:1.6}

/* ── 理念 ── */
.philo{background:var(--paper2)}
.quote{font-size:clamp(20px,3vw,38px);font-weight:800;line-height:1.68;margin:0 auto;max-width:22em}
.quote .u,.hl{position:relative;white-space:nowrap}
.quote .u::after,.hl::after{content:"";position:absolute;left:-.04em;right:-.04em;bottom:.05em;height:.32em;
  background:var(--mustard);opacity:.5;border-radius:.1em;z-index:-1}
.pcard{background:#fff;border-radius:26px;padding:38px 32px;text-align:center;box-shadow:0 3px 20px rgba(34,38,44,.05)}
.pico{width:86px;height:86px;margin:0 auto 18px}
.pcard h3{margin:0 0 12px;font-size:19px;font-weight:800}
.pcard p{margin:0;font-size:14px;color:var(--sub);text-align:left}

/* ── 採用 ── */
.recruit{background:linear-gradient(180deg,var(--paper) 0%,var(--mustard-l) 100%)}
.rtop{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:center;margin-bottom:50px}
@media(max-width:880px){.rtop{grid-template-columns:1fr}}
.rtop h2{font-size:clamp(24px,3.6vw,42px);font-weight:800;line-height:1.44;margin:0 0 20px;letter-spacing:-.02em}
.rtop p{color:#4B535E;font-size:15px;margin:0 0 30px}
.tag-r{display:inline-block;background:#fff;color:var(--terra-d);font-weight:800;font-size:12.5px;
  padding:9px 19px;border-radius:999px;margin-bottom:20px;box-shadow:0 2px 12px rgba(217,116,79,.16)}
.rcard{background:#fff;border-radius:24px;padding:28px 24px;box-shadow:0 3px 18px rgba(34,38,44,.06)}
.rcard .ic{width:56px;height:56px;margin-bottom:13px}
.rcard b{display:block;font-size:15px;font-weight:800;margin-bottom:7px}
.rcard small{font-size:12.5px;color:var(--sub);line-height:1.8}
.vcard{background:#fff;border-radius:24px;padding:28px;box-shadow:0 3px 18px rgba(34,38,44,.06)}
.who{display:flex;align-items:center;gap:13px;margin-bottom:15px}
.av{width:48px;height:48px;flex:none}
.who b{display:block;font-size:13.5px;font-weight:800}
.who small{font-size:11.5px;color:var(--sub)}
.vcard p{margin:0;font-size:13.5px;color:#4B535E;line-height:1.95}

/* ── NEWS ── */
.ncard{text-decoration:none;display:block;transition:transform .25s}
.ncard:hover{transform:translateY(-4px)}
.nart{aspect-ratio:16/10;border-radius:20px;display:grid;place-items:center;margin-bottom:15px;overflow:hidden}
.ncard time{font-size:12px;color:var(--sub);font-weight:700}
.cat{display:inline-block;font-size:10.5px;font-weight:800;padding:3px 11px;border-radius:999px;margin-left:9px}
.cat.b{background:var(--blue-l);color:var(--blue-d)}
.cat.t{background:var(--terra-l);color:var(--terra-d)}
.cat.n{background:#EFEDE8;color:var(--sub)}
.ncard h3{font-size:15.5px;margin:11px 0 0;font-weight:800;line-height:1.7}

/* ── 従業員専用 ── */
.staff{background:var(--blue-l)}
.staff-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,60px);align-items:center}
@media(max-width:880px){.staff-in{grid-template-columns:1fr}}
.staff h2{font-size:clamp(23px,3.2vw,38px);margin:0 0 18px;font-weight:800;line-height:1.46}
.staff p{color:#4B535E;font-size:15px;margin:0 0 30px}
.sfeat{display:grid;gap:14px}
.sfeat>div{display:flex;gap:17px;align-items:center;background:#fff;border-radius:20px;padding:22px 24px;
  box-shadow:0 2px 14px rgba(34,38,44,.05)}
.sfeat .ic{width:42px;height:42px;flex:none}
.sfeat b{font-size:14.5px;display:block;margin-bottom:3px}
.sfeat small{font-size:12.5px;color:var(--sub);line-height:1.75}

/* ── お問い合わせ ── */
.ccard{background:#fff;border-radius:26px;padding:40px 34px;box-shadow:0 3px 20px rgba(34,38,44,.06);
  border-top:5px solid var(--blue)}
.ccard.f{border-top-color:var(--terra)}
.ccard h3{margin:0 0 5px;font-size:16.5px;font-weight:800}
.ccard .role{font-size:12.5px;color:var(--sub);margin:0 0 24px}
/* ★2026-10-19 オーナー「電話番号はあまり目立たないように・メールを優先（迷惑電話対策）」
   電話は小さな灰色の1行、メールは大きく */
.tel{font-size:14px;font-weight:600;text-decoration:none;display:block;line-height:1.5;color:var(--sub)}
.ccard.f .tel{color:var(--sub)}
.tel small{display:inline;font-size:11px;letter-spacing:.1em;font-weight:700;color:var(--sub);margin:0 6px 0 0}
.hours{font-size:12.5px;color:var(--sub);margin:11px 0 0}
.mail{margin-top:24px;padding-top:21px;border-top:1px solid var(--line);font-size:clamp(17px,2vw,21px)}
.mail b{display:block;font-size:10.5px;letter-spacing:.18em;color:var(--sub);margin-bottom:5px}
.mail a{font-weight:800;color:var(--blue-d);word-break:break-all}

/* ── フッター ── */
footer{background:#fff;padding:64px 24px 32px;font-size:13px;color:var(--sub);border-top:1px solid var(--line)}
.fin{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
@media(max-width:880px){.fin{grid-template-columns:1fr 1fr}}
footer h4{color:var(--ink);font-size:11.5px;letter-spacing:.14em;margin:0 0 16px;font-weight:800}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:11px}
footer a{text-decoration:none}
footer a:hover{color:var(--blue)}
.flogo{color:var(--ink);font-weight:800;font-size:17px;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.fstaff{display:inline-flex;align-items:center;gap:9px;background:var(--blue-l);color:var(--blue-d);
  padding:13px 22px;border-radius:999px;margin-top:16px;font-weight:800;font-size:12.5px}
.fstaff:hover{background:var(--blue);color:#fff}
.copy{max-width:var(--wrap);margin:46px auto 0;padding-top:22px;border-top:1px solid var(--line);font-size:11.5px}

/* ── 店舗一覧（飲食事業部） ── */
.brandbar{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:28px}
.brandbar button{border:1.5px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;
  padding:10px 20px;font-size:13px;font-weight:800;cursor:pointer;font-family:inherit;transition:.2s}
.brandbar button:hover{border-color:var(--ink)}
.brandbar button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.shops{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:980px){.shops{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.shops{grid-template-columns:1fr}}
.shop{background:#fff;border-radius:22px;padding:26px 24px 24px;box-shadow:0 3px 18px rgba(34,38,44,.06);
  display:flex;flex-direction:column}
.shop .bd{font-size:10.5px;font-weight:800;padding:4px 12px;border-radius:999px;align-self:flex-start;margin-bottom:12px}
.bd-bs{background:var(--blue-l);color:var(--blue-d)}
.bd-kd{background:var(--terra-l);color:var(--terra-d)}
.bd-mg{background:var(--mustard-l);color:#8A6A10}
.shop h3{margin:0 0 12px;font-size:17px;font-weight:800;line-height:1.5}
.shop .ad{margin:0 0 6px;font-size:13.5px;color:#3D444F;line-height:1.8}
.shop .zip{font-size:12px;color:var(--sub)}
/* トップの幕開けの動画（2026-10-19 オーナー「C案全部をトップページに」）。JSが付ける html.introjs の時だけ出す */
.intro{display:none}
html.introjs .intro{display:flex;position:absolute;inset:0;z-index:30;background:#FAF8F4;align-items:center;justify-content:center;transition:opacity .9s ease}
.intro video{width:100%;height:100%;object-fit:contain;display:block}
.intro.done{opacity:0;pointer-events:none}
.intro-skip{position:absolute;right:16px;bottom:16px;z-index:2;font:700 13px/1 "ZenMaruHero",sans-serif;color:#3A3F47;
  background:rgba(255,255,255,.85);border:1.5px solid #3A3F47;border-radius:999px;padding:9px 16px;cursor:pointer}
.intro-skip:hover{background:#fff}
/* 自動再生を断られた端末（iPad の低電力モード・アプリの中の画面）だけ出す「▶ 再生」（2026-10-21） */
.intro-tap{display:none}
.intro.needtap .intro-tap{display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  font:700 16px/1 "ZenMaruHero",sans-serif;color:#fff;background:#3A3F47;border:0;border-radius:999px;padding:16px 26px;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.18)}
/* 店舗一覧の写真（2026-10-19 オーナー「Labの店舗一覧、各拠点の画像追加」）。無い店は .photo.missing＝写真を準備中 */
.shop .sphoto{margin:0 0 12px}
.shop .sphoto img{aspect-ratio:3/2;object-fit:cover;border-radius:14px}
.shop .sphoto.missing::before{border-radius:14px;font-size:12px}
/* 組織図の店舗名（2026-10-19 オーナー「組織図に店舗名全店記載」） */
.oshops{display:block;font-size:11.5px;line-height:1.7;color:var(--sub);font-weight:500;margin:3px 0 4px}
.shop .tel2{display:inline-block;margin:10px 0 0;font-size:13.5px;font-weight:600;text-decoration:none;color:var(--sub)}
.shop .tel2:hover{color:var(--blue)}
.shop .links{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.shop .links a{font-size:12px;font-weight:800;text-decoration:none;border:1.5px solid var(--line);
  border-radius:999px;padding:8px 15px;transition:.2s}
.shop .links a:hover{border-color:var(--ink)}
.notehours{background:var(--mustard-l);border-radius:18px;padding:20px 24px;font-size:13.5px;
  color:#5A4A18;margin:0 0 30px;font-weight:700}

/* ── ロゴ ──
   実物のロゴは「手描きの枠に貼ってある」ように見せることで、
   イラスト風の雰囲気を壊さずになじませています。 */
.logo img{display:block;height:40px;width:auto}
@media(max-width:1120px){.logo img{height:34px}}
.flogo img{display:block;height:44px;width:auto;margin-bottom:14px}
/* 事業部ページの見出しに添える、その会社のロゴ */
.phead .plogo{display:block;height:clamp(38px,4.4vw,50px);width:auto;margin:0 0 18px}

/* 手描き枠に貼ったロゴ（グループ構成カードなどで使用） */
.logoplate{position:relative;width:100%;max-width:238px;aspect-ratio:16/9;
  display:grid;place-items:center}
.logoplate .plate{position:absolute;inset:0;width:100%;height:100%}
.logoplate img{position:relative;z-index:2;width:72%;height:auto;display:block}
.logoplate .tape{position:absolute;z-index:3;width:50px;height:16px;
  background:rgba(227,179,61,.5);border-radius:2px}
.logoplate .tape.tl{top:-7px;left:14px;transform:rotate(-7deg)}
.logoplate .tape.br{bottom:-7px;right:14px;transform:rotate(-5deg)}

/* 一回り小さいカード（会社情報のグループ構成）。
   トップページの事業カードは大きいままにするため、sm を付けた時だけ効く */
.bcard.sm{min-height:0}
.bcard.sm .bart{min-height:0;padding:clamp(18px,2.4vw,26px)}
.bcard.sm .bbody{padding:clamp(24px,2.8vw,34px)}
.bcard.sm .bbody h3{font-size:clamp(19px,2vw,24px)}
.bcard.sm .bbody p{font-size:14px;margin-bottom:18px}
.bcard.sm .chips{margin-bottom:20px}

/* ── 組織図（company）──
   HTMLのテキストを書き換えるだけで組織変更に対応できます。
   線は自動で引かれるので、箱を足しても消しても崩れません。 */
.org{--oline:#DCD6CB;text-align:center}
.org .otop{display:inline-block;background:var(--ink);color:#fff;border-radius:18px;
  padding:17px 40px;font-size:clamp(15px,1.7vw,18px);font-weight:800;line-height:1.5}
.org .otop small{display:block;font-size:11px;letter-spacing:.16em;color:#B9C0CB;font-weight:800;margin-bottom:5px}
.org .oboard{display:inline-block;background:#fff;border:2.5px solid var(--ink);border-radius:16px;
  padding:13px 34px;font-size:clamp(14px,1.5vw,16px);font-weight:800;line-height:1.5}
.org .ostem{width:2px;height:34px;background:var(--oline);margin:0 auto}
.org .ostem.s{height:24px}
/* グループ全体を1つの枠で囲って見せる（DENSHO Group のアピール） */
.org .ogroup{border:2.5px dashed #C6D4E5;border-radius:32px;padding:clamp(26px,3.4vw,40px) clamp(18px,2.6vw,32px);
  background:linear-gradient(180deg,#EAF1F9 0%,rgba(234,241,249,.28) 62%,rgba(234,241,249,0) 100%)}
.org .oghead{margin-bottom:26px}
.org .oghead .ologo{height:clamp(46px,5.4vw,64px);width:auto;max-width:88%;margin:0 auto;display:block}
.org .oghead .oname{margin:14px 0 0;font-size:clamp(15px,1.9vw,19px);font-weight:800;line-height:1.5}
.org .oghead .otag{margin:7px 0 0;font-size:12.5px;color:var(--sub);font-weight:700}

.org .ocols{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding-top:34px;position:relative}
.org .ocols::before{content:"";position:absolute;top:0;left:16.6%;right:16.6%;height:2px;background:var(--oline)}
.org .ocols.c2{grid-template-columns:repeat(2,1fr)}      /* 2列にするとき */
.org .ocols.c2::before{left:25%;right:25%}
.org .ocol{position:relative}
.org .ocol::before{content:"";position:absolute;top:-34px;left:calc(50% - 1px);width:2px;height:34px;background:var(--oline)}
.org .ounit{background:#fff;border-radius:22px;padding:26px 22px;height:100%;
  box-shadow:0 3px 20px rgba(34,38,44,.06);border-top:5px solid var(--line)}
.org .ocol.e .ounit{border-top-color:var(--blue)}
.org .ocol.f .ounit{border-top-color:var(--terra)}
.org .ocol.m .ounit{border-top-color:var(--mustard)}
.org .ounit .ologo{display:block;height:38px;width:auto;max-width:82%;margin:0 auto 16px}
.org .ounit .oico{display:block;height:38px;width:auto;margin:0 auto 16px}
.org .ounit h3{margin:0;font-size:17px;font-weight:800;line-height:1.5}

/* 「事業会社」「代表取締役 直轄」など、その箱の位置づけ */
.org .otype{display:inline-block;border-radius:999px;padding:5px 14px;margin-bottom:12px;
  font-size:10.5px;font-weight:800;letter-spacing:.04em;background:var(--paper2);color:#4B535E}
.org .otype.direct{background:var(--mustard);color:#3A2C05}

/* 部の下に課をぶら下げる（枝分かれが見えるように縦線を引く） */
.org .odept{margin-top:20px;text-align:left}
.org .odept .oco{display:inline-block;background:var(--ink);color:#fff;border-radius:8px;
  padding:7px 14px;font-size:12px;font-weight:800}
.org .ounit ul{list-style:none;margin:0;padding:0 0 0 16px;display:grid;gap:7px;
  position:relative;border-left:2px solid var(--oline);margin-left:14px;padding-top:10px}
.org .ounit li{position:relative}
.org .ounit li::before{content:"";position:absolute;left:-16px;top:50%;width:11px;height:2px;
  background:var(--oline)}
.org .ounit .note{margin:12px 0 0;font-size:12px;color:var(--sub);font-weight:700;line-height:1.75}
.org .ounit li{font-size:13.5px;font-weight:700;color:#3D444F;background:var(--paper2);
  border-radius:12px;padding:11px 13px;line-height:1.6}
.org .onote{font-size:12.5px;color:var(--sub);margin:26px 0 0;font-weight:700}
@media(max-width:880px){
  .org .ocols{grid-template-columns:1fr;gap:34px}
  .org .ocols::before{left:calc(50% - 1px);right:auto;width:2px;height:100%;top:0}
  .org .ocol::before{height:34px;top:-34px}
}

/* ── 資格・許可などの箇条書きカード ── */
.lcard{background:#fff;border-radius:22px;padding:28px 26px;box-shadow:0 3px 20px rgba(34,38,44,.05)}
.lcard h3{margin:0 0 16px;font-size:15.5px;font-weight:800;display:flex;align-items:center;gap:10px}
.lcard h3::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--terra);flex:none}
.lcard ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.lcard li{font-size:13.5px;color:#3D444F;line-height:1.75;padding-left:16px;position:relative}
.lcard li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1.5px;background:var(--line)}
.lcard li b{display:block;font-weight:800;color:var(--ink)}

/* ── 写真の枠 ──
   写真ファイルがまだ無くても崩れないようにしてある。
   ファイルを置いた瞬間に、自動で写真に切り替わる（site.js が判定）。 */
.photo{margin:0}
.photo img{width:100%;height:auto;display:block;border-radius:20px;background:var(--paper2)}
.photo figcaption{margin:10px 2px 0;font-size:12.5px;color:var(--sub);font-weight:700;line-height:1.7}
.photo.missing img{display:none}
.photo.missing::before{content:"📷 写真を準備中";display:grid;place-items:center;aspect-ratio:3/2;
  border:2.5px dashed #D8D2C7;border-radius:20px;background:var(--paper2);
  color:var(--sub);font-size:13px;font-weight:800}
.photos2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.photos3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:780px){.photos2{grid-template-columns:1fr}}
@media(max-width:880px){.photos3{grid-template-columns:1fr}}

/* ── SDGs（sdgs）──
   国連公式アイコンは配布・利用の条件があるため、ここでは
   公式カラーの番号タイル＋目標名のテキストで表現している。
   公式アイコンを使えるようになったら、.sdgno を <img> に差し替えればよい。 */
.sdgs{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:820px){.sdgs{grid-template-columns:1fr}}
.sdg{background:#fff;border-radius:20px;padding:24px 24px 24px 22px;display:grid;
  grid-template-columns:64px 1fr;gap:20px;align-items:start;box-shadow:0 3px 18px rgba(34,38,44,.06)}
.sdgno{width:64px;height:64px;border-radius:14px;display:grid;place-items:center;
  font-size:27px;font-weight:800;color:#fff;line-height:1}
.sdgno.dark{color:#22262C}
.sdg h3{margin:0 0 9px;font-size:16px;font-weight:800;line-height:1.5}
.sdg p{margin:0;font-size:13.5px;color:#3D444F;line-height:1.9}
.sdg .multi{display:flex;gap:7px;margin-bottom:11px;flex-wrap:wrap}
.sdg .multi .sdgno{width:44px;height:44px;border-radius:11px;font-size:19px}

/* ── 選考の流れ（recruit）── */
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;counter-reset:st}
@media(max-width:980px){.flow{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.flow{grid-template-columns:1fr}}
.flow li{counter-increment:st;background:#fff;border-radius:20px;padding:26px 20px 22px;text-align:center;
  box-shadow:0 3px 18px rgba(34,38,44,.06);position:relative}
.flow li::before{content:"STEP " counter(st);display:block;font-size:10.5px;letter-spacing:.16em;
  font-weight:800;color:var(--terra);margin-bottom:12px}
.flow li b{display:block;font-size:15.5px;font-weight:800;margin-bottom:8px}
.flow li small{font-size:12.5px;color:var(--sub);line-height:1.8;display:block}

/* ── 募集職種カード（recruit）── */
.jcard{background:#fff;border-radius:22px;padding:28px 26px;box-shadow:0 3px 20px rgba(34,38,44,.05);
  border-left:5px solid var(--line);display:flex;flex-direction:column}
.jcard.e{border-left-color:var(--blue)}
.jcard.f{border-left-color:var(--terra)}
.jcard.m{border-left-color:var(--mustard)}
.jcard .jtag{align-self:flex-start;font-size:10.5px;font-weight:800;padding:5px 13px;border-radius:999px;
  margin-bottom:14px;background:var(--paper2);color:#4B535E}
.jcard h3{margin:0 0 10px;font-size:18px;font-weight:800;line-height:1.5}
.jcard p{margin:0 0 16px;font-size:14px;color:#3D444F;line-height:1.9}
.jcard ul{list-style:none;margin:auto 0 0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.jcard li{font-size:11.5px;font-weight:700;color:#4B535E;background:var(--paper2);border-radius:999px;padding:6px 13px}

/* ── 応募の入口（recruit）── */
.apply{background:var(--ink);color:#fff;border-radius:28px;padding:clamp(30px,4vw,48px);text-align:center}
.apply h3{margin:0 0 12px;font-size:clamp(19px,2.4vw,26px);font-weight:800;line-height:1.5;color:#fff}
.apply p{margin:0 auto 26px;font-size:14.5px;color:#B9C0CB;max-width:34em;line-height:1.9}
.apply .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.apply .btn-w{background:#fff;color:var(--ink)}
.apply .btn-w:hover{transform:translateY(-2px)}
.apply .note{margin:24px 0 0;font-size:12.5px;color:#8A929E}

/* ── 落書きの動き ──
   ゆっくり・小さく・バラバラの速さで。全部が同じ動きだと機械っぽくなる。
   ★ 回転や拡大をさせるものには transform-box:fill-box を付けること。
     付けないと「絵全体の中心」が軸になり、端の絵が大きく振り回される。 */
.wig{animation:wig 5.5s ease-in-out infinite alternate;transform-origin:center}
.wig2{animation:wig 7.5s ease-in-out infinite alternate-reverse;transform-origin:center}
@keyframes wig{from{transform:translateY(0) rotate(0)}to{transform:translateY(-7px) rotate(1.5deg)}}
.dash{stroke-dasharray:8 10;animation:march 10s linear infinite}
@keyframes march{to{stroke-dashoffset:-180}}

/* ふわふわ上下（人・吹き出し） */
.bob{animation:bob 4.2s ease-in-out infinite}
.bob2{animation:bob 6.6s ease-in-out infinite .9s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}

/* 稲妻がチカッと光る */
.flash{animation:flash 3.6s ease-in-out infinite}
@keyframes flash{0%,60%,100%{opacity:1}68%{opacity:.2}74%{opacity:1}82%{opacity:.35}}

/* ふわり漂う（吹き出し） */
.float{animation:float 6.8s ease-in-out infinite}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(7px,-10px)}}

/* 星。行ったり来たりの規則的な動きだと機械っぽいので、
   途中の数値をわざとバラバラにして「無造作」に見せている */
.twinkle{transform-box:fill-box;transform-origin:center;animation:tumble 5.2s ease-in-out infinite}
.twinkle2{transform-box:fill-box;transform-origin:center;animation:tumble2 6.7s ease-in-out infinite .8s}
@keyframes tumble{
  0%  {transform:translate(0,0) rotate(0) scale(1);opacity:1}
  17% {transform:translate(9px,-13px) rotate(17deg) scale(1.18);opacity:.75}
  39% {transform:translate(-7px,5px) rotate(-11deg) scale(.92);opacity:1}
  58% {transform:translate(12px,9px) rotate(7deg) scale(1.24);opacity:.65}
  81% {transform:translate(-4px,-8px) rotate(-19deg) scale(1.02);opacity:1}
  100%{transform:translate(0,0) rotate(0) scale(1);opacity:1}}
@keyframes tumble2{
  0%  {transform:translate(0,0) rotate(0) scale(1);opacity:1}
  22% {transform:translate(-11px,8px) rotate(-21deg) scale(1.22);opacity:.7}
  45% {transform:translate(6px,-11px) rotate(13deg) scale(.9);opacity:1}
  70% {transform:translate(-8px,-4px) rotate(24deg) scale(1.15);opacity:.6}
  88% {transform:translate(5px,7px) rotate(-6deg) scale(1);opacity:1}
  100%{transform:translate(0,0) rotate(0) scale(1);opacity:1}}

/* 湯気。3本を別々の速さで立ちのぼらせ、消えてはまた出る。
   同時に動かすと「3本まとめて揺れる棒」に見えるので、必ず時間をずらすこと。
   上げすぎるとアイスクリームにぶつかるので -22px まで */
.steam,.steam2,.steam3{transform-box:fill-box;transform-origin:bottom center}
.steam {animation:steam 2.4s ease-out infinite}
.steam2{animation:steam 3.0s ease-out infinite .5s}
.steam3{animation:steam 2.7s ease-out infinite 1s}
@keyframes steam{
  0%  {transform:translate(0,10px) scaleY(.7) rotate(0);opacity:0}
  20% {opacity:1}
  55% {transform:translate(10px,-6px) scaleY(1.05) rotate(9deg);opacity:1}
  100%{transform:translate(-10px,-22px) scaleY(1.15) rotate(-13deg);opacity:0}}

/* 右下の星。くるりと一回転させて、はっきり動いていると分かるようにする */
.star{transform-box:fill-box;transform-origin:center;animation:starroll 6s ease-in-out infinite}
@keyframes starroll{
  0%  {transform:translate(0,0) rotate(0) scale(1)}
  25% {transform:translate(-14px,-12px) rotate(110deg) scale(1.28)}
  50% {transform:translate(10px,-20px) rotate(190deg) scale(.88)}
  75% {transform:translate(16px,6px) rotate(300deg) scale(1.18)}
  100%{transform:translate(0,0) rotate(360deg) scale(1)}}

/* 歩く人。腕と脚を「たすき掛け」（左腕と右脚が同時に前）にすると歩いて見える。
   回す軸は肩(150,598)と腰(150,636)。transform-box は付けない
   ＝絵全体の座標で軸を指定するため（付けると軸がその線の中心になってしまう）。
   ★ 左右の手足は「同じ向きに」回すこと。逆向きに回すと両方いっぺんに
     体と重なって、腕も脚も消える瞬間ができる（実際にそうなった）。
     同じ向きなら、片方が体の前に来て片方が開く＝はさみのような歩き方になる。
   ★ 腕と脚は逆位相。脚が開くとき腕が閉じる。 */
.pace     {animation:pace 5.6s ease-in-out infinite alternate}
.walk-body{animation:walkbob .55s ease-in-out infinite alternate}
.walk-arm {animation:swing 1.1s ease-in-out infinite alternate-reverse}
.walk-leg {animation:step 1.1s ease-in-out infinite alternate}
@keyframes pace   {from{transform:translateX(-16px)}to{transform:translateX(16px)}}
@keyframes walkbob{from{transform:translateY(0)}to{transform:translateY(-6px)}}
@keyframes swing  {from{transform:rotate(-17deg)}to{transform:rotate(17deg)}}
@keyframes step   {from{transform:rotate(-19deg)}to{transform:rotate(19deg)}}

/* 点がゆっくり流れる */
.drift{animation:drift 7.5s ease-in-out infinite}
.drift2{animation:drift 9.6s ease-in-out infinite 1.6s}
.drift3{animation:drift 8.4s ease-in-out infinite .7s}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(-8px,9px)}}

/* 線がゆらぐ */
.sway{transform-box:fill-box;transform-origin:center;animation:sway 5.8s ease-in-out infinite}
.sway2{transform-box:fill-box;transform-origin:center;animation:sway 7.2s ease-in-out infinite 1.1s}
@keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}

/* 「動きを減らす」設定にしている人には動かさない（乗り物酔い対策） */
@media(prefers-reduced-motion:reduce){
  .wig,.wig2,.dash,.bob,.bob2,.flash,.float,
  .twinkle,.twinkle2,.steam,.steam2,.steam3,.star,
  .pace,.walk-body,.walk-arm,.walk-leg,
  .drift,.drift2,.drift3,.sway,.sway2{animation:none}
}

/* ── トップ ヒーロー ── */
.hero{position:relative;overflow:hidden}
.hero-inner{position:relative;max-width:1400px;margin:0 auto}
.mural{display:block;width:100%;height:auto}
.clear{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(74%,860px);height:min(66%,430px);pointer-events:none;z-index:2;
  background:radial-gradient(ellipse at center,var(--paper) 0 52%,rgba(251,249,245,.86) 70%,rgba(251,249,245,0) 100%)}
.hero-copy{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;
  text-align:center;width:min(88%,760px)}
.hero h1{font-size:clamp(22px,3.5vw,42px);line-height:1.62;margin:0 0 20px;font-weight:800;letter-spacing:-.005em}
/* 2026-10-18 オーナー「中央の文字も普通の黒だとイマイチ硬い」
   → 丸ゴシック（見出しの文字だけ同梱・Zen Maru Gothic／OFL）＋やわらかい墨色＋「好奇心」「向上心」に会社の色 */
@font-face{font-family:"ZenMaruHero";src:url("fonts/zenmaru-hero.woff") format("woff");font-weight:700 900;font-display:swap}
.hero h1{font-family:"ZenMaruHero","Hiragino Maru Gothic ProN","Hiragino Maru Gothic Pro",sans-serif;
  font-weight:700;color:#3A3F47;letter-spacing:.02em}
.hero h1 .kw-b{color:var(--blue)}
.hero h1 .kw-t{color:var(--terra)}
.hero p{font-family:"ZenMaruHero","Hiragino Maru Gothic ProN",sans-serif}
.hero p{font-size:clamp(12.5px,1.3vw,15px);color:#4B535E;margin:0 auto 26px;max-width:30em;font-weight:600}
.hero-btns{display:flex;gap:11px;justify-content:center;flex-wrap:wrap}
/* 2026-10-18 夕 オーナー「iPadでは相変わらず下部に文字・全画面も出ない（会社PCは正常）」
   iPad は Claude アプリの小窓（約540×560）や縦横の画面で見るため、1199px以下は
   トップを画面の高さいっぱいにし、文字は真ん中・絵は左上と右下の角（.mural-l／.mural-r）に置く。
   1200px以上（会社PC）は今までどおり横長の絵の真ん中に文字を重ねる */
.mural-l,.mural-r{display:none}
@media(max-width:1199px){
  .mural{display:none}
  .hero-inner{min-height:calc(100vh - var(--hh,80px));min-height:calc(100svh - var(--hh,80px));
    display:flex;align-items:center;justify-content:center;padding:24px 0}
  .mural-l,.mural-r{display:block;position:absolute;z-index:1;pointer-events:none;
    aspect-ratio:450/700;height:min(40%,46vw);width:auto}
  .mural-l{left:0;top:0}
  .mural-r{right:0;bottom:0}
  .clear{width:92%;height:58%}
  .hero-copy{position:relative;left:auto;top:auto;transform:none;width:min(90%,680px);z-index:5}
  .hero h1{font-size:clamp(18px,min(4.4vw,5.4vh),34px);margin-bottom:10px;letter-spacing:0}
  .hero p{font-size:clamp(11.5px,min(2.2vw,2.7vh),15px);margin-bottom:16px;max-width:none}
  .hero-btns{gap:8px}
  .hero-btns .btn{padding:9px 15px;font-size:12.5px}
}

/* 2026-10-23 オーナー（携帯の写真）「携帯で見るとトップ画面が上部と下部ではなれて分かれている」
   599px以下（携帯）は、左の絵（ビル・人）と右の絵（アイス・丼）を上に横並びでまとめ、その下に文字とボタン。
   画面の高さいっぱいにはしない（間が空いて上下に分かれて見えたため）。600px以上は今までどおり */
@media(max-width:599px){
  .hero-inner{display:grid;grid-template-columns:1fr 1fr;align-items:end;min-height:0;padding:14px 0 34px}
  .mural-l,.mural-r{position:static;height:min(240px,60vw);width:auto}
  .mural-l{justify-self:end}
  .mural-r{justify-self:start}
  .clear{display:none}
  .hero-copy{grid-column:1/-1;justify-self:center;width:90%;margin-top:6px}
}

/* 2026-10-23 オーナー「やはりトップページが売りなのでスマホで見てもPCと同じようにアニメーションが流れたい」
   599px以下は、幕開けの動画を画面全体に重ねて流す（トップを詰めたので、そのままだと中ほどに小さく出ていた） */
@media(max-width:599px){
  html.introjs .intro{position:fixed;inset:0;z-index:200;background:#E5E1DE}   /* 地の色＝動画の紙の色（実測 229,225,222）＝帯に見えないように */
  html.introjs .intro video{width:100%;height:auto;max-height:100%}
  .intro-skip{bottom:calc(24px + env(safe-area-inset-bottom,0px))}
}