/* gstaffservice.jp 共通（手本は ismit.co.jp の作り。色は元サイトの水色 #29b2eb の系統）
   レイアウト：白い固定ヘッダー（ロゴが黒字のため）→ 水色から濃紺への帯の見出し → 本文 → 問い合わせの帯 → 濃紺のフッター */
:root{
  --c-brand:#29b2eb;   /* 元サイトの主色（見出しの線・帯） */
  --c-main:#0b78ad;    /* 文字・リンク用に濃くした水色（白地で読める濃さ） */
  --c-deep:#0a3148;    /* 見出し・フッター */
  --c-light:#eaf6fc;   /* 淡い段 */
  --c-line:#d3e6f0;
  --c-text:#1c2a33;
  --c-sub:#566874;
  --c-foot:#06202f;
}
html{scroll-padding-top:90px}
body{font-family:"Noto Sans JP",sans-serif;color:var(--c-text);background:#fff;line-height:1.85;word-break:auto-phrase;line-break:strict}
h1,h2,h3,h4{text-wrap:balance}
p,li,td{text-wrap:pretty}
a{color:var(--c-main)}
a:hover{color:var(--c-deep)}
:focus-visible{outline:3px solid var(--c-brand);outline-offset:2px}
img{max-width:100%;height:auto}

/* ヘッダー */
.site-head{position:sticky;top:0;z-index:1030;background:#fff;border-bottom:1px solid var(--c-line);box-shadow:0 2px 10px rgba(10,49,72,.06)}
.site-head .navbar{padding:.55rem 0}
.site-head .navbar-brand img{height:42px;width:auto}
.site-head .nav-link{color:var(--c-deep)!important;font-weight:500;font-size:.93rem;padding:.5rem .75rem!important}
.site-head .nav-link:hover,.site-head .nav-item.active>.nav-link{color:var(--c-main)!important}
.site-head .dropdown-menu{border:1px solid var(--c-line);border-radius:6px;box-shadow:0 8px 20px rgba(10,49,72,.1);font-size:.92rem}
.site-head .dropdown-item:active{background:var(--c-main)}
.site-head .btn-contact{background:var(--c-main);color:#fff!important;border-radius:20px;padding:.35rem 1.1rem!important;font-weight:700;margin-left:.4rem}
.site-head .btn-contact:hover{background:var(--c-deep)}
.head-tel{font-size:.78rem;color:var(--c-sub);line-height:1.3;text-align:right;margin-left:1rem}
.head-tel b{display:block;font-size:1.15rem;color:var(--c-main);letter-spacing:.03em;font-feature-settings:"tnum"}
@media (max-width:991.98px){
  .head-tel{display:none}
  .site-head .navbar-collapse{border-top:1px solid var(--c-line);margin-top:.5rem}
  .site-head .btn-contact{display:inline-block;margin:.5rem 0}
}

/* トップの見せ場（背景は絵の地の色 #a1d6ee にそろえて境目を消す） */
.hero{--c-hero:#a1d6ee;background:var(--c-hero);padding:48px 0 40px;border-bottom:6px solid var(--c-brand)}
.hero-text{padding-top:8px;padding-bottom:16px}
.hero-badge{display:inline-block;background:#fff;color:var(--c-main);font-weight:700;font-size:.85rem;border-radius:30px;padding:.25rem 1rem;margin-bottom:1rem;letter-spacing:.05em}
.hero h1{font-weight:900;color:var(--c-deep);font-size:2.3rem;line-height:1.4;margin-bottom:1rem}
.hero-lead{font-size:1.1rem;font-weight:700;color:var(--c-deep);margin-bottom:1.5rem}
.hero-btns{display:flex;flex-wrap:wrap;gap:.6rem}
.btn-hero{background:var(--c-deep);color:#fff;font-weight:900;border-radius:30px;padding:.75rem 1.8rem}
.btn-hero:hover{background:var(--c-main);color:#fff}
.btn-hero-ghost{border:2px solid var(--c-deep);color:var(--c-deep);font-weight:700;border-radius:30px;padding:.7rem 1.6rem;background:rgba(255,255,255,.35)}
.btn-hero-ghost:hover{background:#fff;color:var(--c-deep)}
.hero-img{display:block;width:100%;height:auto}
@media (max-width:991.98px){.hero h1{font-size:1.8rem}.hero h1 br{display:none}}

/* 下の階層の見出しの帯 */
.page-head{color:#fff;padding:56px 0 44px;
  background:radial-gradient(ellipse at 80% 0%,rgba(41,178,235,.55),transparent 60%),linear-gradient(150deg,#1593cc 0%,var(--c-main) 40%,var(--c-deep) 100%)}
.page-head .sec-label{color:#cdeefd}
.page-head h1{font-weight:900;font-size:2rem;margin:0}
.crumb{font-size:.8rem;margin-top:.8rem;color:#cdeefd}
.crumb a{color:#fff}

.sec-label{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.15em;color:var(--c-main);margin-bottom:.3rem;text-transform:uppercase}
.sec-title{font-weight:900;color:var(--c-deep);font-size:1.8rem;margin-bottom:.5rem}
.bg-soft{background:var(--c-light)}
section.blk{padding:72px 0}

/* 移した本文（元のページの部品を並べたもの） */
.cms{padding:48px 0 64px}
.cms h2{font-weight:900;color:var(--c-deep);font-size:1.5rem;margin:2.6rem 0 1.1rem;padding-bottom:.5rem;border-bottom:3px solid var(--c-light);position:relative}
.cms h2::after{content:"";position:absolute;left:0;bottom:-3px;width:72px;height:3px;background:var(--c-brand)}
.cms h3{font-weight:700;color:var(--c-deep);font-size:1.2rem;margin:2rem 0 .8rem;padding-left:.8rem;border-left:5px solid var(--c-brand);line-height:1.5}
.cms h4{font-weight:700;color:var(--c-main);font-size:1.05rem;margin:1.5rem 0 .6rem}
.cms > :first-child,.cms .container > :first-child{margin-top:0}
.cms p{margin-bottom:1rem}
.cms .m-text{max-width:52rem}
.cms .row .m-text{max-width:none}
.cms figure{margin:0 0 1.5rem}
.cms figure img{border-radius:6px}
.cms figcaption{font-size:.85rem;color:var(--c-sub);margin-top:.4rem}
.cms .m-grid{margin-bottom:1rem}
.cms .m-grid > [class*="col-"]{min-width:0}
.cms .m-video{position:relative;width:100%;max-width:760px;aspect-ratio:16/9;margin:0 0 1.5rem;background:#000;border-radius:6px;overflow:hidden}
.cms .m-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cms .m-table{overflow-x:auto;margin-bottom:1.6rem}
.cms table{width:100%;border-collapse:collapse;font-size:.94rem}
.cms th,.cms td{border:1px solid var(--c-line);padding:.7rem .9rem;vertical-align:top}
.cms th{background:var(--c-light);color:var(--c-deep);font-weight:700;white-space:nowrap}
.cms td img{max-width:220px}
.cms hr{border:0;border-top:1px solid var(--c-line);margin:2rem 0}
.cms .m-person{display:flex;gap:1.5rem;align-items:flex-start;margin-bottom:1.5rem}
.cms .m-person img{flex:0 0 auto;width:200px;border-radius:6px}
.cms .m-person > div{min-width:0}
@media (max-width:575.98px){.cms .m-person{flex-direction:column}.cms .m-person img{width:160px}}
.cms .m-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;margin:0 0 1.6rem;padding:0;list-style:none}
.cms .m-links a{display:block;border:1px solid var(--c-line);border-radius:8px;overflow:hidden;text-decoration:none;color:var(--c-deep);font-weight:700;background:#fff;transition:box-shadow .15s}
.cms .m-links a:hover{box-shadow:0 8px 20px rgba(10,49,72,.12)}
.cms .m-links img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.cms .m-links span{display:block;padding:.7rem .9rem}

/* 問い合わせの帯（元サイトのサイドバーの文） */
.contact-band{color:#fff;background:linear-gradient(150deg,var(--c-main),var(--c-deep))}
.contact-band .sec-label,.contact-band .sec-title{color:#fff}
.contact-band .tel{font-size:2rem;font-weight:900;letter-spacing:.04em;color:#fff;text-decoration:none;font-feature-settings:"tnum"}
.contact-band .note{color:#cdeefd;font-size:.9rem}
.contact-band .btn-form{background:#fff;color:var(--c-main);font-weight:900;border-radius:30px;padding:.75rem 1.8rem;margin:.3rem .5rem .3rem 0}
.contact-band .btn-form:hover{background:var(--c-light);color:var(--c-deep)}
.contact-band .area{font-size:.85rem;color:#cdeefd;border-top:1px solid rgba(255,255,255,.25);padding-top:1rem;margin-top:1.5rem}

/* フッター */
.site-foot{background:var(--c-foot);color:#9fbccc;font-size:.85rem;padding:2.5rem 0 1.5rem}
.site-foot a{color:#d5ecf7}
.site-foot .f-name{color:#fff;font-weight:700;font-size:1rem}
.site-foot .f-nav{list-style:none;padding:0;margin:0;columns:2;column-gap:2rem}
.site-foot .f-nav li{margin-bottom:.3rem}
.site-foot .f-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:1.8rem;padding-top:1rem;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between}

/* フォーム */
.form-card{background:#fff;border:1px solid var(--c-line);border-radius:10px;padding:1.8rem;max-width:46rem}
.form-card label{font-weight:700;color:var(--c-deep);font-size:.93rem}
.form-card .req{display:inline-block;background:#d70012;color:#fff;font-size:.7rem;border-radius:3px;padding:0 .4rem;margin-left:.4rem;vertical-align:middle}
.form-card .btn-send{background:var(--c-main);color:#fff;font-weight:900;border-radius:30px;padding:.7rem 2.4rem}
.form-card .btn-send:hover{background:var(--c-deep);color:#fff}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* 移した本文の追加（convert.py が出す）：子ページ・外部へのボタン、地図 */
.cms .m-btn{margin:0 0 1.5rem}
.cms .m-btn a{display:inline-block;border:2px solid var(--c-main);color:var(--c-main);font-weight:700;border-radius:30px;padding:.55rem 1.8rem;text-decoration:none}
.cms .m-btn a:hover{background:var(--c-light);border-color:var(--c-deep);color:var(--c-deep)}
.cms .m-map{position:relative;width:100%;aspect-ratio:4/3;max-height:400px;margin:0 0 1.5rem;border:1px solid var(--c-line);border-radius:6px;overflow:hidden;background:var(--c-light)}
.cms .m-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* 弊社のサービス（inc/services.cfm）。技能実習生は横長、残り4つは並べる */
.svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem;margin:0 0 2rem}
.svc-card{display:flex;flex-direction:column;gap:.6rem;background:#fff;border:1px solid var(--c-line);border-top:4px solid var(--c-brand);border-radius:10px;padding:1.3rem 1.2rem 1.2rem;color:var(--c-text);text-decoration:none;transition:transform .15s,box-shadow .15s}
.svc-card:hover{color:var(--c-text);text-decoration:none;transform:translateY(-3px);box-shadow:0 10px 24px rgba(10,49,72,.12)}
.svc-card img{width:84px;height:84px;object-fit:contain}
.svc-body{min-width:0}
.cms .svc-card .svc-name{font-size:1.15rem;font-weight:900;color:var(--c-deep);margin:0 0 .4rem;padding:0;border:0}
.svc-card .svc-name::after{content:"→";color:var(--c-main);margin-left:.4rem;font-weight:700;transition:margin .15s}
.svc-card:hover .svc-name::after{margin-left:.7rem}
.svc-card .svc-term{display:inline-block;background:var(--c-light);color:var(--c-main);font-weight:700;font-size:.85rem;border-radius:4px;padding:.05rem .6rem;margin-bottom:.5rem}
.svc-card p{font-size:.92rem;line-height:1.75;margin:0}
.svc-card p + p{margin-top:.2rem}
.svc-wide{grid-column:1/-1;flex-direction:row;align-items:center;gap:1.5rem;padding:1.5rem 1.8rem}
.svc-wide img{width:120px;height:120px;flex:0 0 auto}
.cms .svc-wide .svc-name{font-size:1.4rem}
@media (max-width:991.98px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:575.98px){.svc-grid{grid-template-columns:minmax(0,1fr)}.svc-wide{flex-direction:column;align-items:flex-start}.svc-wide img{width:96px;height:96px}}

/* トップの社長の段（写真を大きく） */
.cms .m-ceo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2.5rem;align-items:start;margin:2.5rem 0}
.cms .m-ceo figure{margin:0}
.cms .m-ceo img{width:100%;border-radius:8px}
.cms .m-ceo figcaption{font-size:.95rem;font-weight:700;color:var(--c-deep);margin-top:.6rem}
.cms .m-ceo h3{margin-top:0}
@media (max-width:767.98px){.cms .m-ceo{grid-template-columns:minmax(0,1fr);gap:1.2rem}.cms .m-ceo img{width:100%}}

/* Q&A（元は「Q」「A1」の表） */
.cms .qa{margin:0 0 2rem;border:1px solid var(--c-line);border-radius:10px;overflow:hidden;background:#fff}
.cms .qa-q,.cms .qa-a{display:flex;gap:1rem;align-items:flex-start;padding:1.1rem 1.4rem}
.cms .qa-q{background:var(--c-light)}
.cms .qa-a + .qa-a{border-top:1px dashed var(--c-line)}
.cms .qa-mark{flex:0 0 auto;min-width:2.4rem;height:2.4rem;padding:0 .5rem;border-radius:1.2rem;display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:1rem;letter-spacing:.02em}
.cms .qa-q .qa-mark{background:var(--c-deep);color:#fff}
.cms .qa-a .qa-mark{background:#fff;color:var(--c-main);border:2px solid var(--c-brand)}
.cms .qa-body{min-width:0;padding-top:.3rem}
.cms .qa-q .qa-body{font-weight:700;color:var(--c-deep);font-size:1.05rem}
.cms .qa-body > :last-child{margin-bottom:0}
.cms .qa-body ul{padding-left:1.2rem;margin:.4rem 0 .6rem}
.cms .qa-body li{margin-bottom:.2rem}
@media (max-width:575.98px){.cms .qa-q,.cms .qa-a{padding:1rem;gap:.7rem}}

/* 受け入れの流れ（イラストの手順。手順の間は CSS の矢印） */
.cms .flow{list-style:none;padding:0;margin:0 0 2.5rem;display:flex;flex-direction:column;gap:2.6rem}
.cms .flow-step{position:relative;display:grid;grid-template-columns:180px minmax(0,1fr);gap:1.8rem;align-items:center;background:#fff;border:1px solid var(--c-line);border-radius:10px;padding:1.2rem 1.6rem}
.cms .flow-step img{width:180px;height:180px;object-fit:contain}
.cms .flow-step:not(:last-child)::after{content:"";position:absolute;left:50%;bottom:-2.05rem;transform:translateX(-50%);border-left:18px solid transparent;border-right:18px solid transparent;border-top:14px solid var(--c-brand)}
.cms .flow-body{min-width:0}
.cms .flow-body h3{margin:0 0 .6rem;padding:0;border:0;font-size:1.25rem;font-weight:900;color:var(--c-deep)}
.cms .flow-body > :last-child{margin-bottom:0}
@media (max-width:575.98px){.cms .flow-step{grid-template-columns:minmax(0,1fr);gap:.6rem;padding:1rem}.cms .flow-step img{width:140px;height:140px}}

/* トップの2つの入口（企業の方へ／お仕事をお探しの方へ） */
.entry{padding:56px 0 8px}
.entry-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
.entry-card{display:grid;grid-template-columns:150px minmax(0,1fr);gap:1.4rem;align-items:start;border-radius:12px;padding:1.8rem;border:1px solid var(--c-line);background:#fff}
.entry-biz{border-top:6px solid var(--c-deep)}
.entry-seeker{border-top:6px solid var(--c-brand)}
.entry-card img{width:150px;height:150px;object-fit:contain}
.entry-body{min-width:0}
.entry-body h2{font-weight:900;color:var(--c-deep);font-size:1.5rem;margin:0 0 .8rem}
.entry-body ul{list-style:none;padding:0;margin:0 0 1.2rem;display:flex;flex-wrap:wrap;gap:.4rem .5rem}
.entry-body li a{display:inline-block;border:1px solid var(--c-line);border-radius:20px;padding:.2rem .9rem;font-size:.9rem;font-weight:500;color:var(--c-deep);text-decoration:none;background:#fff}
.entry-body li a:hover{border-color:var(--c-brand);color:var(--c-main)}
.entry-btn{font-weight:900;border-radius:30px;padding:.6rem 1.6rem;color:#fff}
.entry-biz .entry-btn{background:var(--c-deep)}
.entry-seeker .entry-btn{background:var(--c-main)}
.entry-btn:hover{color:#fff;opacity:.9}
@media (max-width:991.98px){.entry-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:575.98px){.entry-card{grid-template-columns:minmax(0,1fr)}.entry-card img{width:110px;height:110px}}

/* 受入企業の義務（16項目のイラスト） */
.cms .duty{list-style:none;padding:0;margin:0 0 2rem;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.cms .duty li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.4rem;background:#fff;border:1px solid var(--c-line);border-radius:10px;padding:1rem .8rem 1.1rem}
.cms .duty img{width:120px;height:120px;object-fit:contain}
.cms .duty-no{position:absolute;top:.6rem;left:.6rem;width:1.8rem;height:1.8rem;border-radius:50%;background:var(--c-deep);color:#fff;font-weight:900;font-size:.85rem;display:flex;align-items:center;justify-content:center;font-feature-settings:"tnum"}
.cms .duty-name{font-weight:700;color:var(--c-deep);font-size:.92rem;line-height:1.5}
@media (max-width:991.98px){.cms .duty{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:767.98px){.cms .duty{grid-template-columns:repeat(2,minmax(0,1fr))}.cms .duty img{width:96px;height:96px}}

/* フォーム（inc/form.cfm） */
.form-card .form-group{margin-bottom:1.3rem}
.form-card fieldset{border:0;padding:0;margin:0}
.form-card legend{font-size:.93rem;font-weight:700;color:var(--c-deep);margin-bottom:.4rem}
.form-card .custom-control{margin-bottom:.2rem}
.form-card .custom-control-label{font-size:.92rem}
.form-card .form-control:focus{border-color:var(--c-brand);box-shadow:0 0 0 .2rem rgba(41,178,235,.25)}
.form-card .req-mark{color:#d70012;font-weight:900;margin-left:.3rem}
.form-card .form-sub{font-size:1.1rem;font-weight:900;color:var(--c-deep);margin:1.8rem 0 1rem;padding-left:.7rem;border-left:4px solid var(--c-brand)}
.form-card .form-note{font-size:.88rem;color:var(--c-sub)}
.form-card .form-err{background:#fdecec;border:1px solid #f3b4b4;color:#9b0d0d;border-radius:6px;padding:.8rem 1rem;margin-bottom:1.4rem}
.form-card .form-err ul{margin:0;padding-left:1.2rem}
.form-card .form-done{font-weight:700;color:var(--c-deep);margin:0}
.form-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* 会社情報の「想い」の写真は小さめ（2026-11-04 ユーザー「デカい」） */
.cms .m-ceo{grid-template-columns:280px minmax(0,1fr);gap:2rem}
@media (max-width:767.98px){.cms .m-ceo{grid-template-columns:minmax(0,1fr)}.cms .m-ceo img{width:220px}}

/* 6つの理念を六角形（蜂の巣）に並べる（会社情報） */
.cms .philo{--w:250px;--g:10px;display:flex;flex-direction:column;align-items:center;margin:2.5rem 0 3.5rem}
.cms .philo-row{display:flex;gap:var(--g)}
.cms .philo-row + .philo-row{margin-top:calc(var(--w) * 1.1547 * -0.25 + var(--g) * .87)}
.cms .philo-hex{width:var(--w);height:calc(var(--w) * 1.1547);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 32px}
.cms .philo-hex h3{margin:0 0 .5rem;padding:0;border:0;font-size:1.05rem;font-weight:900;color:inherit;letter-spacing:.05em}
.cms .philo-hex p{margin:0;font-size:.86rem;line-height:1.65;font-weight:500}
.cms .philo-hex.c1{background:var(--c-deep);color:#fff}
.cms .philo-hex.c2{background:var(--c-main);color:#fff}
.cms .philo-hex.c3{background:var(--c-light);color:var(--c-deep)}
.cms .philo-center{background:#000}
.cms .philo-center img{width:62%;height:auto}
@media (max-width:820px){
  .cms .philo{--w:240px}
  .cms .philo-row{flex-direction:column;align-items:center}
  .cms .philo-row + .philo-row{margin-top:var(--g)}
  .cms .philo-center{display:none}
}

/* 2列の表の左の列（TH）の幅をそろえる（2026-11-04 ユーザー「TH列の幅をそろえて」） */
.cms .m-table table{table-layout:fixed}
.cms .m-table th{white-space:normal}
.cms .m-table tr > th:first-child:not(:only-child){width:14rem}
@media (max-width:575.98px){.cms .m-table tr > th:first-child:not(:only-child){width:7.5rem;white-space:normal}}
/* 中央の六角形は白（2026-11-04 ユーザー「真ん中の背景は白色で」）。縁は1段外の六角形で描く */
.cms .philo-center{background:var(--c-brand);position:relative}
.cms .philo-center::before{content:"";position:absolute;inset:4px;background:#fff;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.cms .philo-center img{position:relative;z-index:1}

/* メニューの中の小見出し（事例・動画・セミナー）は薄いグレーの帯（2026-11-04 ユーザー指示） */
.site-head .dropdown-header{background:#f1f3f5;color:var(--c-sub);font-size:.78rem;font-weight:700;letter-spacing:.05em;padding:.35rem 1.5rem;margin:0}
.site-head .dropdown-divider + .dropdown-header{margin-top:-.5rem}

/* 動画のページ（/video/）。サムネイルを押すと /js/video.js が iframe に置き換える。
   パソコン3列・タブレット2列・スマホ1列。「初めての方へ」は1列（vgrid-1）（2026-11-04 ユーザー「/video/ の3列形式に。初めては1列でOK」） */
.cms .vgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 1.5rem;margin:0 0 1rem}
.cms .vgrid-1{grid-template-columns:minmax(0,1fr);max-width:760px}
/* 題・サムネイル・説明の3段を横の並びでそろえる（題が2行のカードがあってもサムネイルの高さをそろえる） */
.cms .vcard{min-width:0;display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start;padding-bottom:2rem}
.cms .vcard h3{margin:0 0 .7rem;font-size:1.05rem}
.cms .yt,.cms .yt-frame{position:relative;display:block;width:100%;aspect-ratio:16/9;margin:0;padding:0;border:0;border-radius:6px;overflow:hidden;background:var(--c-deep)}
.cms .yt{cursor:pointer}
.cms .yt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cms .yt-play{position:absolute;left:50%;top:50%;width:64px;height:44px;transform:translate(-50%,-50%);border-radius:12px;background:var(--c-deep);opacity:.85;transition:background .15s,opacity .15s}
.cms .yt-play::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-35%,-50%);border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent var(--c-light)}
.cms .yt:hover .yt-play,.cms .yt:focus-visible .yt-play{background:var(--c-main);opacity:1}
.cms .yt-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cms .vcard details{margin-top:.6rem;font-size:.9rem;line-height:1.75;overflow-wrap:anywhere}
.cms .vcard summary{cursor:pointer;color:var(--c-main);font-weight:700}
.cms .vcard summary:hover{color:var(--c-deep)}
.cms .vcard details[open] summary{margin-bottom:.5rem}
.cms .vcard details p{margin-bottom:.4rem}
.cms .vcard details hr{margin:.8rem 0}
@media (max-width:991.98px){.cms .vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.cms .vgrid-1{grid-template-columns:minmax(0,1fr)}}
@media (max-width:575.98px){.cms .vgrid{grid-template-columns:minmax(0,1fr)}}

/* トップの「理想的な外国人雇用のステップアップ」の3手順（元は1枚の画像） */
.cms .stepup{list-style:none;padding:0;margin:1.5rem 0 1rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.2rem}
.cms .stepup li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;border:1px solid var(--c-line);border-radius:10px;padding:1.2rem 1rem 1.3rem;background:#fff}
.cms .stepup li:not(:last-child)::after{content:"";position:absolute;right:-1.65rem;top:50%;transform:translateY(-50%);border-top:14px solid transparent;border-bottom:14px solid transparent;border-left:12px solid var(--c-brand)}
.cms .stepup img{width:150px;height:150px;object-fit:contain}
.cms .stepup p{margin:0;font-size:.92rem;color:var(--c-sub)}
.cms .stepup strong{color:var(--c-deep);font-size:1rem}
.cms .su-no{position:absolute;top:.7rem;left:.7rem;width:2rem;height:2rem;border-radius:50%;background:var(--c-brand);color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center}
@media (max-width:767.98px){.cms .stepup{grid-template-columns:minmax(0,1fr);gap:2rem}.cms .stepup li:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-1.6rem;transform:translateX(-50%);border-left:14px solid transparent;border-right:14px solid transparent;border-top:12px solid var(--c-brand);border-bottom:0}}

/* 2つのサイト（企業＝メイン・水色／働く人＝サブ・緑）。ヘッダーの上の帯に切り替えのボタン */
.site-bar{background:var(--c-deep);color:#dbeef7;font-size:.85rem}
.site-bar .container{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:46px;padding-top:.3rem;padding-bottom:.3rem}
.site-now{font-weight:700;letter-spacing:.05em}
.site-switch{display:inline-block;background:#18b07a;color:#fff!important;font-weight:900;font-size:1rem;padding:.45rem 1.4rem;border-radius:24px;text-decoration:none!important;box-shadow:0 2px 0 rgba(0,0,0,.15)}
.site-switch:hover{filter:brightness(1.08)}
.site-tag{display:inline-block;margin-left:.8rem;padding:.15rem .7rem;border-radius:4px;background:var(--c-light);color:var(--c-main);font-size:.8rem;font-weight:700;vertical-align:middle}
@media (max-width:575.98px){.site-now{display:none}.site-bar .container{justify-content:center}.site-switch{font-size:.95rem;padding:.4rem 1.1rem}.site-tag{display:none}}
body.site-recruit{
  --c-brand:#1fbf86;--c-main:#0e8a5d;--c-deep:#0c3b2c;--c-light:#e7f8f0;--c-line:#cde9dc;--c-foot:#06241a;
}
body.site-recruit .site-switch{background:#29b2eb}
body.site-recruit .page-head{background:radial-gradient(ellipse at 80% 0%,rgba(31,191,134,.5),transparent 60%),linear-gradient(150deg,#16a874 0%,var(--c-main) 40%,var(--c-deep) 100%)}
body.site-recruit .page-head .sec-label,body.site-recruit .page-head .crumb{color:#d3f5e6}
body.site-recruit .contact-band .note,body.site-recruit .contact-band .area{color:#d3f5e6}

/* 働く人のサイトのトップ */
.hero-recruit{--c-hero:#e7f8f0;background:var(--c-hero);border-bottom-color:var(--c-brand)}
.hero-recruit .hero-img-sq{max-width:360px;margin:0 auto;mix-blend-mode:multiply}
.cms .r-menu{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem}
.cms .r-menu a{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:1.4rem 1rem;border:1px solid var(--c-line);border-top:4px solid var(--c-brand);border-radius:10px;background:#fff;text-decoration:none;color:var(--c-deep);font-weight:900;font-size:1.1rem;transition:transform .15s,box-shadow .15s}
.cms .r-menu a:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(12,59,44,.12)}
.cms .r-menu img{width:150px;height:150px;object-fit:contain}
@media (max-width:991.98px){.cms .r-menu{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:575.98px){.cms .r-menu img{width:110px;height:110px}}
.head-tel{white-space:nowrap}
@media (max-width:1199.98px){.head-tel{display:none}}