/* =========================================================
   ARTHIC group - remake shared stylesheet
   全ページ共通。色・タイポ・ヘッダー/フッター・部品。
   ========================================================= */
:root{
  --blue:#0d86c9; --blue-d:#0a6aa0; --navy:#163a5f;
  --teal:#3f9e93; --orange:#f08300; --orange-d:#e06d00;
  --sky1:#dff1fb; --sky2:#f5fbff;
  --ink:#283641; --ink-soft:#5a6b78; --line:#e4ecf2;
  --bg:#fff; --bg-soft:#f3f8fc;
  --radius:16px; --shadow:0 10px 30px rgba(22,58,95,.08);
  --max:1140px; --header-h:72px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Noto Sans JP",system-ui,-apple-system,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.85;letter-spacing:.02em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:clamp(18px,5vw,40px)}
.en{font-family:"Klee One",cursive}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;font-weight:700;border-radius:999px;
  padding:11px 20px;font-size:14px;transition:.2s;white-space:nowrap;cursor:pointer;border:none;line-height:1.4}
.btn-pri{background:var(--blue);color:#fff;box-shadow:0 6px 16px rgba(13,134,201,.32)}
.btn-pri:hover{background:var(--blue-d);transform:translateY(-1px)}
.btn-ghost{background:#fff;color:var(--navy);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn-org{background:var(--orange);color:#fff;box-shadow:0 6px 16px rgba(240,131,0,.3)}
.btn-org:hover{background:var(--orange-d);transform:translateY(-1px)}
.btn-lg{padding:15px 30px;font-size:16px}
.btn-white{background:#fff;color:var(--navy)} .btn-white:hover{transform:translateY(-1px)}

/* ---------- Header / global nav ---------- */
header.site{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:18px;height:var(--header-h);max-width:var(--max);
  margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.brand{display:flex;align-items:center;gap:11px;white-space:nowrap}
.brand img{height:42px;width:auto}
.brand .tx{line-height:1.05}
.brand .tx small{display:block;font-size:10px;color:var(--blue);letter-spacing:.1em}
.brand .tx b{font-size:19px;color:var(--navy);letter-spacing:.04em}
.brand .tx b span{color:var(--blue)}
nav.gnav{margin-left:auto;display:flex;align-items:center;gap:2px}
nav.gnav > a,nav.gnav > .has > a{display:inline-flex;align-items:center;gap:5px;padding:10px 13px;
  font-weight:700;font-size:14.5px;color:var(--navy);border-radius:9px;transition:.18s}
nav.gnav > a:hover,nav.gnav > .has:hover > a{background:var(--bg-soft);color:var(--blue)}
nav.gnav a.cur{color:var(--blue)}
.has{position:relative}
.has > a::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.6}
.has .sub{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(8px);
  min-width:230px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
  padding:8px;opacity:0;visibility:hidden;transition:.2s;display:grid;gap:2px}
.has:hover .sub,.has:focus-within .sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.has .sub a{padding:11px 14px;border-radius:9px;font-size:14px;font-weight:600;color:var(--navy)}
.has .sub a:hover{background:var(--bg-soft);color:var(--blue)}
.has.j > a{color:var(--blue)} .has.c > a{color:var(--orange)}
.has.c .sub a:hover{color:var(--orange);background:#fff6ec}
.nav-cta{margin-left:6px}
.hamb{display:none;margin-left:auto;width:46px;height:46px;border:none;background:transparent;cursor:pointer}
.hamb span{display:block;width:24px;height:2px;background:var(--navy);margin:5px auto;transition:.3s}
.hamb[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamb[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamb[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Section commons ---------- */
section{padding:clamp(56px,8vw,100px) 0}
.bg-soft{background:var(--bg-soft)}
.sec-head{text-align:center;margin-bottom:clamp(34px,5vw,54px)}
.sec-head .en{display:block;color:var(--blue);font-size:14px;letter-spacing:.26em;text-transform:uppercase}
.sec-head h2{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;color:var(--navy);
  font-size:clamp(26px,4.5vw,40px);margin:.3em 0 0;line-height:1.3}
.sec-head p{max-width:680px;margin:14px auto 0;color:var(--ink-soft)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(24px,3vw,38px);box-shadow:var(--shadow)}

/* ---------- Hero (split: text panel + photo) ---------- */
.hero{position:relative;background:linear-gradient(180deg,var(--sky1),var(--sky2))}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch;
  max-width:var(--max);margin-inline:auto;min-height:clamp(360px,52vw,520px)}
.hero-text{padding:clamp(36px,5vw,64px) clamp(18px,4vw,48px);display:flex;flex-direction:column;justify-content:center}
.hero-text .eyebrow{display:inline-flex;align-items:center;gap:10px;font-weight:800;color:#fff;
  align-self:flex-start;padding:7px 18px;border-radius:999px;font-size:15px;letter-spacing:.06em;margin-bottom:18px}
.hero-text .eyebrow .en{font-size:13px;opacity:.9;font-weight:600}
.badge-blue{background:var(--blue)} .badge-org{background:var(--orange)}
.hero-text h1{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;color:var(--navy);
  font-size:clamp(26px,4.4vw,42px);line-height:1.4;margin:0}
.hero-text h1 .b{color:var(--blue)} .hero-text h1 .o{color:var(--orange)}
.hero-text .sub{margin:16px 0 0;color:var(--ink-soft);font-weight:500;font-size:clamp(14px,2vw,17px)}
.hero-text .hero-cta{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.hero-photo{position:relative;overflow:hidden}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.hero-photo::before{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,var(--sky1) 0%,transparent 22%)}

/* catchphrase hero (group top) */
.catch{font-family:"Klee One",cursive;font-weight:600;color:var(--navy);
  font-size:clamp(30px,5vw,56px);line-height:1.35;margin:0}
.catch .em{color:var(--blue)}

/* ---------- Page title band (sub pages) ---------- */
.pagehead{background:linear-gradient(120deg,var(--blue),#1ba3d8);color:#fff;text-align:center;
  padding:clamp(40px,7vw,72px) 0}
.pagehead.org{background:linear-gradient(120deg,var(--orange),#f7a23a)}
.pagehead .en{display:block;letter-spacing:.2em;opacity:.9;font-size:15px}
.pagehead h1{font-family:"Zen Maru Gothic",sans-serif;font-size:clamp(28px,5vw,44px);margin:6px 0 0}
.crumb{max-width:var(--max);margin:14px auto 0;padding-inline:clamp(18px,5vw,40px);font-size:13px;color:var(--ink-soft)}
.crumb a:hover{color:var(--blue)}

/* ---------- art + ethic ---------- */
.equation{text-align:center;margin-bottom:40px;font-family:"Zen Maru Gothic",sans-serif;color:var(--navy);font-size:clamp(18px,3vw,26px)}
.equation b{color:var(--blue)} .equation .plus{color:var(--orange);margin:0 .4em} .equation .t{color:var(--teal)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.card .tag{display:inline-block;font-weight:900;font-size:13px;letter-spacing:.14em;padding:6px 14px;border-radius:999px;color:#fff;margin-bottom:14px}
.card.art .tag{background:var(--blue)} .card.ethic .tag{background:var(--teal)}
.card h3{font-family:"Zen Maru Gothic",sans-serif;color:var(--navy);font-size:21px;margin:0 0 10px}
.card p{margin:0;color:var(--ink-soft)}

/* ---------- philosophy banner ---------- */
.philo{background:linear-gradient(120deg,var(--blue),#1ba3d8);color:#fff;border-radius:24px;
  padding:clamp(36px,6vw,64px);text-align:center;box-shadow:0 20px 50px rgba(13,134,201,.28)}
.philo .en{letter-spacing:.2em;opacity:.85}
.philo h2{font-family:"Zen Maru Gothic",sans-serif;font-size:clamp(22px,3.6vw,32px);margin:6px 0 18px}
.philo p{max-width:720px;margin-inline:auto;font-size:clamp(15px,2.4vw,19px);font-weight:500}

/* ---------- VMV ---------- */
.vmv{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.vmv .card{text-align:center;position:relative;padding-top:42px}
.vmv .card .ic{position:absolute;top:-26px;left:50%;transform:translateX(-50%);width:64px;height:64px;border-radius:50%;
  display:grid;place-items:center;color:#fff;font-weight:900;font-size:12px;letter-spacing:.08em;box-shadow:var(--shadow)}
.vmv .v .ic{background:var(--teal)} .vmv .m .ic{background:var(--blue)} .vmv .va .ic{background:var(--orange)}
.vmv h3{font-family:"Zen Maru Gothic",sans-serif;font-size:20px;color:var(--navy);margin:6px 0 4px}
.vmv .jp{font-size:13px;color:var(--blue);font-weight:700;margin-bottom:12px}
.vmv p{margin:0;color:var(--ink-soft);font-size:15px}

/* ---------- group companies ---------- */
.grid4{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.gco{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow);transition:.25s;border-top:4px solid var(--blue)}
.gco:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(22,58,95,.14)}
.gco.c2{border-top-color:var(--teal)} .gco.c3{border-top-color:var(--orange)} .gco.c4{border-top-color:#7a5ec2}
.gco h3{font-family:"Zen Maru Gothic",sans-serif;color:var(--navy);font-size:19px;margin:0 0 6px}
.gco .role{font-size:13px;font-weight:700;color:var(--blue);margin-bottom:10px}
.gco p{margin:0 0 14px;color:var(--ink-soft);font-size:14px}
.gco .more{margin-top:auto;font-weight:700;color:var(--blue);font-size:14px}

/* ---------- message block (for-companies / for-jobseekers) ---------- */
.msg{max-width:780px;margin-inline:auto}
.msg .lead{font-family:"Zen Maru Gothic",sans-serif;font-size:clamp(18px,2.6vw,24px);color:var(--navy);line-height:1.7;margin:0 0 26px}
.msg p{color:var(--ink);margin:0 0 18px}
.msg .quote{border-left:4px solid var(--blue);padding:4px 0 4px 20px;color:var(--navy);font-weight:600;margin:26px 0}
.msg .fin{font-family:"Zen Maru Gothic",sans-serif;color:var(--blue);font-size:clamp(17px,2.4vw,21px);font-weight:700}

/* ---------- sub-nav cards (link grid) ---------- */
.linkgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.lk{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:20px 22px;font-weight:700;color:var(--navy);box-shadow:var(--shadow);transition:.2s}
.lk:hover{transform:translateY(-3px);color:var(--blue);border-color:var(--blue)}
.lk::after{content:"→";color:var(--blue);font-weight:800}
.lk.org:hover{color:var(--orange);border-color:var(--orange)} .lk.org::after{color:var(--orange)}

/* ---------- company profile tables ---------- */
.profiles{display:grid;gap:26px}
.profile{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.profile > .ttl{background:var(--navy);color:#fff;padding:16px 26px;font-family:"Zen Maru Gothic",sans-serif;font-size:18px;font-weight:700}
.profile table{width:100%;border-collapse:collapse}
.profile th,.profile td{text-align:left;padding:15px 26px;border-bottom:1px solid var(--line);font-size:15px;vertical-align:top}
.profile th{width:160px;color:var(--navy);background:var(--bg-soft);font-weight:700;white-space:nowrap}
.profile tr:last-child th,.profile tr:last-child td{border-bottom:none}

/* ---------- dual CTA ---------- */
.dual{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ctacard{position:relative;border-radius:24px;padding:clamp(30px,4vw,48px);color:#fff;overflow:hidden;display:flex;flex-direction:column;min-height:230px}
.ctacard.corp{background:linear-gradient(135deg,#0d86c9,#0a5e8c)}
.ctacard.job{background:linear-gradient(135deg,#f29200,#e06d00)}
.ctacard .en{letter-spacing:.18em;opacity:.9}
.ctacard h3{font-family:"Zen Maru Gothic",sans-serif;font-size:clamp(22px,3vw,28px);margin:6px 0 10px}
.ctacard p{margin:0 0 auto;opacity:.95}
.ctacard .btn{margin-top:22px;align-self:flex-start}

/* ---------- contact ---------- */
.contact{text-align:center;background:var(--bg-soft);border-radius:24px;padding:clamp(40px,6vw,72px)}
.contact h2{font-family:"Zen Maru Gothic",sans-serif;color:var(--navy);font-size:clamp(24px,4vw,34px);margin:0 0 10px}
.contact p{color:var(--ink-soft);margin:0 0 26px}
.contact-ways{display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap}
.cway-tel{display:flex;flex-direction:column;line-height:1.15;color:var(--navy);padding:12px 26px;border-radius:14px;background:#fff;border:1.5px solid var(--line);transition:.2s}
.cway-tel:hover{border-color:var(--blue);transform:translateY(-1px)}
.cway-tel .lbl{font-size:12px;color:var(--ink-soft);font-weight:700;letter-spacing:.12em}
.cway-tel .num{font-family:"Zen Maru Gothic",sans-serif;font-size:clamp(26px,4vw,34px);font-weight:700;color:var(--blue);letter-spacing:.02em}
.cway-tel .num::before{content:"\260E\FE0E";font-size:.7em;margin-right:.3em;color:var(--blue)}
.cway-note{margin-top:18px;font-size:13px;color:var(--ink-soft)}

/* ---------- footer ---------- */
footer.site{background:var(--navy);color:#cdd9e4;padding:56px 0 30px;margin-top:0}
.fcols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
footer .brand .tx b{color:#fff} footer .brand .tx b span{color:#7fc4ec} footer .brand .tx small{color:#9fc8e6}
footer .fabout{font-size:13.5px;color:#9fb3c6;margin-top:16px;max-width:320px}
footer h4{color:#fff;font-size:14px;letter-spacing:.08em;margin:0 0 14px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
footer ul a{font-size:13.5px;color:#b9cad9} footer ul a:hover{color:#fff;text-decoration:underline}
.fbar{border-top:1px solid rgba(255,255,255,.12);margin-top:40px;padding-top:20px;text-align:center;font-size:12px;color:#8aa1b5}

/* ---------- Responsive ---------- */
@media(max-width:920px){
  nav.gnav,.nav-cta{display:none}
  .hamb{display:block}
  nav.gnav.open{display:block;position:absolute;top:var(--header-h);left:0;right:0;background:#fff;
    border-bottom:1px solid var(--line);box-shadow:var(--shadow);padding:10px 18px 22px;max-height:calc(100vh - var(--header-h));overflow:auto}
  nav.gnav.open > a,nav.gnav.open > .has > a{display:block;width:100%;padding:15px 8px;border-bottom:1px solid var(--line);border-radius:0}
  nav.gnav.open .has > a::after{margin-left:auto}
  nav.gnav.open .has .sub{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:none;
    min-width:0;padding:0 0 8px 16px;display:grid}
  nav.gnav.open .has .sub a{padding:12px 8px;border-bottom:1px dashed var(--line)}
  nav.gnav.open .m-cta{display:flex;gap:10px;margin-top:16px}
  nav.gnav.open .m-cta a{flex:1;justify-content:center}
  .hero-grid{grid-template-columns:1fr;min-height:0}
  .hero-photo{order:-1;height:clamp(200px,46vw,300px)}
  .hero-photo::before{background:linear-gradient(0deg,var(--sky1) 0%,transparent 30%)}
  .duo,.vmv,.grid4,.dual{grid-template-columns:1fr}
  .vmv{gap:44px;margin-top:20px}
  .fcols{grid-template-columns:1fr 1fr;gap:28px}
}
@media(max-width:560px){
  .fcols{grid-template-columns:1fr}
  .profile th{width:108px;padding-inline:16px}.profile td{padding-inline:16px}
}
@media(max-width:480px){
  .profile table,.profile tbody,.profile tr,.profile th,.profile td{display:block;width:100%}
  .profile th{border-bottom:none;padding-bottom:2px}
  .profile td{padding-top:2px;padding-bottom:14px}
  .profile tr{border-bottom:1px solid var(--line)} .profile tr:last-child{border-bottom:none}
}
.m-cta{display:none}

/* ============ sub-page parts (追加) ============ */
/* greeting / message signature */
.sign{margin-top:26px;text-align:right;color:var(--navy)}
.sign small{display:block;font-size:13px;color:var(--ink-soft)}
.sign b{font-family:"Zen Maru Gothic",sans-serif;font-size:20px}

/* voice cards */
.voices{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.voice{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.voice .vh{background:var(--teal);color:#fff;padding:18px 24px}
.voice .vh h3{font-family:"Zen Maru Gothic",sans-serif;margin:0 0 4px;font-size:18px}
.voice .vh .meta{font-size:12px;opacity:.92}
.voice .vb{padding:22px 24px;color:var(--ink-soft);font-size:14.5px}

/* FAQ */
.faq{max-width:820px;margin-inline:auto;display:grid;gap:14px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:18px 22px;font-weight:700;color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:900}
.faq summary::after{content:"+";margin-left:auto;color:var(--blue);font-size:22px;font-weight:700;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq .ans{display:flex;gap:14px;padding:0 22px 20px 22px;color:var(--ink-soft);font-size:14.5px}
.faq .ans .a{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:900}

/* flow steps */
.flow{max-width:560px;margin:22px auto 0;display:grid;gap:0}
.flow .step{position:relative;background:#fff;border:1.5px solid var(--blue);color:var(--navy);border-radius:12px;
  padding:14px 18px;text-align:center;font-weight:700}
.flow .step.fin{background:var(--orange);border-color:var(--orange);color:#fff}
.flow .step.g{border-color:var(--teal)} .flow .step.fin.g{background:var(--teal);border-color:var(--teal)}
.flow .arw{height:22px;display:grid;place-items:center;color:var(--blue);font-size:18px}
.flow.g .arw{color:var(--teal)}

/* compare 1号/2号 */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.compare .col{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.compare .col .h{padding:16px;text-align:center;color:#fff;font-family:"Zen Maru Gothic",sans-serif;font-size:19px;font-weight:700}
.compare .col.n1 .h{background:var(--blue)} .compare .col.n2 .h{background:var(--teal)}
.compare table{width:100%;border-collapse:collapse}
.compare th,.compare td{padding:12px 16px;border-bottom:1px solid var(--line);font-size:14px;text-align:left;vertical-align:top}
.compare th{width:118px;background:var(--bg-soft);color:var(--navy);font-weight:700;white-space:nowrap}
.compare tr:last-child th,.compare tr:last-child td{border-bottom:none}

/* fields grid (14業種) */
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.field{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:16px 18px}
.field h4{margin:0 0 6px;font-size:15px;color:#fff;background:var(--teal);display:inline-block;padding:3px 12px;border-radius:999px}
.field p{margin:8px 0 0;font-size:13px;color:var(--ink-soft)}

/* check list */
.checks{max-width:720px;margin-inline:auto;display:grid;gap:12px;padding:0;list-style:none}
.checks li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 18px 14px 48px;position:relative;box-shadow:var(--shadow)}
.checks li::before{content:"\2713";position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:900}

/* contact form */
.form{max-width:720px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(24px,4vw,40px)}
.form .row{margin-bottom:20px}
.form label{display:block;font-weight:700;color:var(--navy);margin-bottom:8px;font-size:14px}
.form label .req{background:var(--orange);color:#fff;font-size:11px;padding:2px 8px;border-radius:999px;margin-left:8px;vertical-align:middle}
.form input[type=text],.form input[type=email],.form input[type=tel],.form textarea,.form select{
  width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:10px;font:inherit;color:var(--ink);background:#fcfdfe}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--blue);background:#fff}
.form textarea{min-height:140px;resize:vertical}
.form .radios{display:flex;gap:18px;flex-wrap:wrap}
.form .radios label{display:inline-flex;align-items:center;gap:7px;font-weight:500;margin:0}
.form .submit{text-align:center;margin-top:8px}
.form-note{max-width:720px;margin:16px auto 0;font-size:13px;color:var(--ink-soft);text-align:center}
.contact-head{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:720px;margin:0 auto 28px}
.contact-head .box{background:var(--bg-soft);border-radius:14px;padding:22px;text-align:center}
.contact-head .box .lbl{font-size:12px;font-weight:700;color:var(--ink-soft);letter-spacing:.1em}
.contact-head .box .big{font-family:"Zen Maru Gothic",sans-serif;font-size:clamp(20px,3vw,26px);font-weight:700;color:var(--blue);margin-top:4px}
.contact-head .box .big::before{content:"\260E\FE0E";margin-right:.3em;font-size:.8em}
.contact-head .box.mail .big::before{content:"\2709\FE0E"}

@media(max-width:720px){
  .voices,.compare,.contact-head{grid-template-columns:1fr}
}

/* ============ TOP: 元デザイン忠実ヒーロー＋画像ボタン ============ */
.hero-orig{background:linear-gradient(180deg,var(--sky1),#fff 80%);padding:0 0 8px}
.hero-orig .img{max-width:820px;margin:0 auto}
.hero-orig .img img{width:100%;height:auto;display:block}
/* サブページ（求職者/企業）ヒーロー：縦長バナーをビューポート高さに収め切れない様に全表示 */
.hero-banner{background:linear-gradient(180deg,var(--sky1),#fff 90%);padding:0 0 clamp(36px,5vw,56px)}
.hero-banner .img{text-align:center;line-height:0}
.hero-banner .img img{display:inline-block;width:auto;height:auto;max-width:min(560px,100%);max-height:66vh}
.hbtns2{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero-copy{text-align:center;max-width:760px;margin:0 auto;padding:clamp(24px,4vw,40px) 18px 0}
.hero-copy .lead2{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;color:var(--navy);
  font-size:clamp(21px,3.6vw,32px);line-height:1.55;margin:0}
.hero-copy .lead2 .b{color:var(--blue)} .hero-copy .lead2 .o{color:var(--orange)}
.hero-copy .sub2{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;color:var(--navy);
  margin:6px 0 0;font-size:clamp(15px,2.4vw,20px)}
.hero-copy .sub2 .b{color:var(--blue)} .hero-copy .sub2 .o{color:var(--orange)}
.hero-copy .click{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;color:var(--navy);
  letter-spacing:.28em;margin:24px 0 16px;font-size:clamp(17px,2.8vw,23px)}
/* CLICKボタン：元画像を踏襲しCSSで再現（白余白なし・対角グラデ＋光沢） */
.hbtns{display:flex;gap:clamp(16px,3.5vw,30px);justify-content:center;flex-wrap:wrap;padding-bottom:8px}
.hbtn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:min(42vw,200px);aspect-ratio:1/0.9;border-radius:18px;overflow:hidden;color:#fff;text-decoration:none;
  text-align:center;box-shadow:0 10px 24px rgba(22,58,95,.18);transition:.2s}
.hbtn>span{position:relative;z-index:1}
.hbtn .big{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:clamp(22px,4.8vw,30px);letter-spacing:.08em;line-height:1.2}
.hbtn .small{font-size:clamp(12px,2.5vw,14px);font-weight:700;margin-top:5px;opacity:.96}
.hbtn.job{background:linear-gradient(45deg,#0069bf 0%,#0b91d5 100%)}
.hbtn.corp{background:linear-gradient(45deg,#f5850a 0%,#ffc107 100%)}
.hbtn::after{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(135deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 46%,rgba(0,0,0,.05) 56%,rgba(0,0,0,.12) 100%)}
.hbtn:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(22,58,95,.28)}
.hbtn:active{transform:translateY(-1px)}

/* ============ 経営理念 / Vision・Mission・Values ピラミッド ============ */
.vmv2{max-width:600px;margin:0 auto}
.mp{text-align:center;margin-bottom:36px}
.mp-ttl{display:inline-block;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;color:var(--navy);
  font-size:20px;padding-bottom:7px;border-bottom:3px solid var(--orange);margin-bottom:18px}
.mp-ttl.val{color:var(--orange)}
.mp-box{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:22px 26px;color:var(--ink);line-height:1.85}
.mp-box.plain{background:transparent;box-shadow:none;padding:6px 0 0}
.vm-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.vm-cols .vm-h{text-align:center;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:20px;margin-bottom:12px}
.vm-cols .vm-h.vis{color:var(--teal)} .vm-cols .vm-h.mis{color:var(--blue)}
.vm-box{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:20px;text-align:center;
  color:var(--ink-soft);font-size:14.5px;line-height:1.8;height:calc(100% - 44px)}
.vm-connect{display:grid;grid-template-columns:1fr 1fr;height:30px}
.vm-connect span{justify-self:center;width:0;border-left:2px dotted #aebfcc;height:100%}
.pyramid{position:relative;width:100%;max-width:340px;height:240px;margin:0 auto}
.pyramid .tri{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:0;height:0;
  border-left:150px solid transparent;border-right:150px solid transparent;border-bottom:230px solid var(--blue)}
.p-lab{position:absolute;left:50%;transform:translateX(-50%);text-align:center;color:#fff;
  font-family:"Zen Maru Gothic",sans-serif;font-weight:700;white-space:nowrap}
.p-lab small{display:block;font-size:10px;opacity:.95;font-weight:500;margin-top:-2px}
.p-lab.vis{top:92px;background:var(--teal);padding:7px 18px;border-radius:999px;font-size:14px;box-shadow:0 6px 14px rgba(0,0,0,.12)}
.p-lab.mis{top:150px;font-size:22px}
.p-lab.val{top:186px;background:var(--blue-d);padding:6px 16px;border-radius:999px;font-size:13px;box-shadow:0 6px 14px rgba(0,0,0,.12)}
@media(max-width:560px){
  .vm-cols{grid-template-columns:1fr;gap:10px}
  .vm-box{height:auto}
  .vm-connect{display:none}
  .pyramid{margin-top:24px}
}