:root{
  --primary:#ed2024;
  --text:#111827;
  --bg:#ffffff;
  --muted:#6b7280;
  --space-4:16px;
  --space-6:24px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:var(--text);background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans JP",Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol",sans-serif;
  line-height:1.7;display:flex;flex-direction:column
}
main{flex:1}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* header == footer (white) */
.header,.footer{background:#fff;border-color:#eee;border-style:solid}
.header{
  border-width:0 0 1px;position:sticky;top:0;z-index:30;
  /* ヘッダーの基準文字サイズ（ロゴもこれに同期） */
  --header-font-size:18px;
}
.footer{border-width:1px 0 0}

/* nav / brand */
.nav,.footer-inner{min-height:64px;display:flex;align-items:center;justify-content:space-between}
.nav{font-size:var(--header-font-size)} /* ← ロゴと文字を同期させる基準 */

.brand{display:flex;align-items:center}
/* ロゴ高さ = ヘッダー文字サイズ(1em) に常時同期 */
.logo-img{display:block;height: 36px;width:auto;margin:0;padding:0;vertical-align:middle}

.company-name{font-weight:700;margin-left:0}
.menu{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.menu a{text-decoration:none;color:var(--text);padding:8px 6px;border-bottom:2px solid transparent;font-size:1em}
.menu a.active{border-bottom-color:currentColor;font-weight:700}
.menu-btn{display:none}

/* Sections */
.section{padding:56px 0}
.section.alt{background:#fafafa}
.grid-2{display:grid;grid-template-columns:1.2fr 0.8fr;gap:32px}
.company-table > div{display:grid;grid-template-columns:140px 1fr;gap:8px;padding:10px 0;border-bottom:1px solid #eee}
.company-table dt{font-weight:600;color:#374151}
.company-table dd{margin:0}

/* Footer center */
.footer-inner.footer-center{justify-content:center;text-align:center}
.footer-inner .footer-links{display:none}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:#fff;border:1px solid #eee;border-radius:12px;padding:16px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:10px}
.card h3{margin:0 0 4px;color:var(--primary)}
.resize-box{width:100%;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#f5f5f5;border-radius:10px}
.resize-box img{max-width:100%;max-height:100%;display:block}
.hero{padding:64px 0}
.hero-inner{display:grid;grid-template-columns:1.1fr 0.9fr;gap:32px;align-items:center}
.hero-visual{display:flex;justify-content:center}
.hero-visual img{max-width:100%;height:auto}

/* Access (map & table) */
.map-embed iframe{width:100%;height:420px;border:0;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.access-cols{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden}
.table th,.table td{border-bottom:1px solid #eee;padding:10px 12px;text-align:left}
.table th{width:140px;color:#374151;background:#fafafa}
.small-note{font-size:.85rem;color:#6b7280}

/* Mobile tweaks */
@media (max-width:900px){
  .menu-btn{display:block}
  .menu{display:none;flex-direction:column;padding:10px 0}
  .menu.open{display:flex}
  .grid-2{grid-template-columns:1fr}
  .hero-inner{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .access-cols{grid-template-columns:1fr}
  .map-embed iframe{height:320px}
  /* モバイル時のヘッダー文字サイズ（=ロゴ高さ） */
  .header{--header-font-size:16px}
}

/* PC専用: 事業内容ページ（スマホ時は注意文を表示） */
.pc-only-min{min-width:1200px}
.note-pc-only{display:none;color:#b45309;background:#fff7ed;border:1px solid #fed7aa;padding:8px;border-radius:8px;margin:12px 0}
@media (max-width:1199px){ .note-pc-only{display:block} }

/* Dropdown (multi-level) */
.menu > li{position:relative;list-style:none}
.menu{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding-left:0;margin:0}
.menu a{text-decoration:none;color:var(--text);padding:8px 6px;border-bottom:2px solid transparent;display:block}
.menu a.active{border-bottom-color:currentColor;font-weight:700}
.submenu,.submenu-3{
  position:absolute;left:0;top:100%;min-width:240px;
  background:#fff;border:1px solid #eee;border-radius:10px;
  padding:8px 0;display:none;box-shadow:0 12px 32px rgba(0,0,0,.08);z-index:50
}
.menu li:hover>.submenu{display:block}
.submenu li{list-style:none}
.submenu a{padding:10px 14px;border:none;white-space:nowrap}
.submenu li{position:relative}
.submenu li:hover>.submenu-3{display:block;left:100%;top:0}
.submenu-3{margin-left:4px}
@media (max-width:900px){
  .menu{display:none;flex-direction:column;width:100%}
  .menu.open{display:flex}
  .submenu,.submenu-3{position:static;display:block;border:none;border-radius:0;box-shadow:none;padding:0}
  .submenu a{padding:10px 8px 10px 20px}
  .submenu-3 a{padding-left:32px}
}

/* --- Dropdown (multi-level) (dup keeping overrides) --- */
.menu > li{position:relative;list-style:none}
.menu{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding-left:0;margin:0}
.menu a{text-decoration:none;color:var(--text);padding:8px 6px;border-bottom:2px solid transparent;display:block}
.menu a.active{border-bottom-color:currentColor;font-weight:700}
.submenu,.submenu-3{
  position:absolute;left:0;top:100%;min-width:260px;
  background:#fff;border:1px solid #eee;border-radius:10px;
  padding:8px 0;display:none;box-shadow:0 12px 32px rgba(0,0,0,.08);z-index:50
}
.menu li:hover>.submenu{display:block}
.submenu li{list-style:none}
.submenu a{padding:10px 14px;border:none;white-space:nowrap}
.submenu li{position:relative}
.submenu li:hover>.submenu-3{display:block;left:100%;top:0}
.submenu-3{margin-left:4px}

/* --- Footer sitemap --- */
.footer .sitemap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:24px 0}
.footer .sitemap h4{margin:0 0 8px;font-size:1rem}
.footer .sitemap ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.footer .sitemap a{text-decoration:none;color:var(--text)}
.footer .bottom-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.footer .copyright{margin-top:16px;font-size:.9rem;color:#6b7280;text-align:center}
@media (max-width:900px){
  .menu{display:none;flex-direction:column;width:100%}
  .menu.open{display:flex}
  .submenu,.submenu-3{position:static;display:block;border:none;border-radius:0;box-shadow:none;padding:0}
  .submenu a{padding:10px 8px 10px 20px}
  .submenu-3 a{padding-left:32px}
  .footer .sitemap{grid-template-columns:1fr 1fr}
}

/* ===== Local (left) navigation - minimal, non-invasive ===== */
.layout-with-sidenav{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:start}
.sidenav{position:sticky;top:88px;border:1px solid #eee;border-radius:12px;background:#fff}
.sidenav h2{font-size:1rem;margin:14px 16px 8px;color:#374151}
.sidenav ul{list-style:none;margin:0;padding:0}
.sidenav a{display:block;padding:10px 16px;text-decoration:none;color:#111827;border-left:3px solid transparent}
.sidenav a:hover{background:#f9fafb}
.sidenav a.is-current{background:#f3f4f6;border-left-color:#111827;font-weight:600}
@media(max-width:900px){
  .layout-with-sidenav{grid-template-columns:1fr}
  .sidenav{position:static}
}

/* === Footer: fixed widths (会社情報 600px, 事業内容 600px) === */
.footer .container{ max-width:1200px; padding:0; } /* 固定列に合わせて左右余白を0に */
.footer-grid{ grid-template-columns:200px 300px; gap:0; } /* 左=事業内容 600px / 右=会社情報 600px */
.footer .sitemap{ grid-template-columns:200px 300px; gap:0; } /* 旧構造(二列)も同じ幅に */
@media (max-width:900px){
  .footer-grid, .footer .sitemap{ grid-template-columns:1fr; } /* スマホは1カラム */
  .footer .container{ padding:0 20px; } /* スマホ時は左右余白を戻す */
}

/* ====== 事業内容カードの横フレームを +5 拡張 ====== */

/* 1) ページ全体の横幅を 1200 -> 1210 に(+10px=左右+5px) */
.container{ max-width:1210px; }

/* 2) カード同士のギャップを 20 -> 25 に(+5px) */
.cards{ gap:25px; }

/* 3) 各カードの左右パディングを 16 -> 21 に(+5px) */
.card{ padding:16px 21px; }

/* （任意）画像ボックスも横に+5px欲しい場合はON
.resize-box{ padding-left:5px; padding-right:5px; }
*/

/* 5列表示（PC幅） */
@media (min-width: 1200px){
  .cards{ grid-template-columns:repeat(3, 1fr); }
}

/* カード内テキストを中央揃え */
.card{ text-align:center; }
.card h3, .card p{ margin-left:auto; margin-right:auto; }

/* === Recruit forms === */
.form-grid{display:grid;gap:16px;max-width:720px}
.form-row{display:grid;gap:8px}
.form-2col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-row input,.form-row select,.form-row textarea{
  width:100%; padding:10px 12px; border:1px solid #e5e7eb; border-radius:8px; font:inherit
}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:none;border-color:#ed2024;box-shadow:0 0 0 3px rgba(237,32,36,.12)}
.form-row .check{display:flex;align-items:center;gap:10px}
.req{color:#ed2024;margin-left:6px;font-size:.9em}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;background:#ed2024;color:#fff;text-decoration:none;border:1px solid #ed2024}
.btn:hover{opacity:.9}
.btn.outline{background:#fff;color:#ed2024}
.form-result{margin-top:8px;font-weight:600}
.form-result.success{color:#059669}
.form-result.error{color:#dc2626}
@media (max-width:900px){ .form-2col{grid-template-columns:1fr} }

/* 同意チェックの横並び＆余白 */
.check{
  display:flex;
  align-items:center;
  gap:10px;         /* チェックボックスと文字の間隔 */
  flex-wrap:wrap;   /* 狭い画面で折返し */
}
.check input[type="checkbox"]{
  width:1.05em;
  height:1.05em;
  margin:0;
}
.check label{ margin:0; }         /* 行間のズレ防止 */
.check a{ text-decoration:underline; color:var(--text); }

@media (max-width:480px){
  .check{ gap:8px; }
}

/* === コンテンツ（会社案内 / 事業内容 / 採用情報 / お問い合わせ）アイコンリンク === */
.icon-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-6);margin-top:var(--space-4);padding:0;list-style:none}
.icon-links li{margin:0}
.icon-links a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-decoration:none;color:var(--text)}
.icon-links img{width:96px;height:96px;aspect-ratio:1/1;object-fit:contain;display:block;transition:transform .2s ease,filter .2s ease}
.icon-links h3{margin:10px 0 0;font-size:1.1rem;text-align:center;line-height:1.4}
.icon-links a:hover img{transform:translateY(-2px) scale(1.03)}
.icon-links a:hover h3{color:var(--primary)}

@media (max-width:1024px){
  .icon-links{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:900px){
  .icon-links{grid-template-columns:repeat(2,minmax(0,1fr));}
  .icon-links img{width:72px;height:72px;}
}
@media (max-width:480px){
  .icon-links{grid-template-columns:1fr;}
}
:root{--primary:#ed2024}
.home-icon .fa-circle,.home-icon .fa-stack-2x{color:#ed2024}
.home-alink{border-color:#ed2024}
.home-alink:hover{box-shadow:0 10px 24px rgba(237,32,36,.18)}

#soonSection {
  position: absolute;
  top: 80px;       /* 上からの位置を少し調整 */
  left: 40px;      /* 左寄せにする */
  text-align: left;/* 左寄せ */
  z-index: 2;
  max-width: 800px;/* 横幅制御（必要に応じて） */
}
#soonSection h1 {
  color:#000;
  font-size:50px;
  font-family:'Century gothic';
  margin:0 0 16px 0;
}
#soonSection p {
  font-size:18px;
  color:rgba(0,0,0,0.8);
  line-height:1.6;
}

/* === 背景アニメーション（土台とサイズ） === */
.hero-bg { position: relative; background:#fff; }          /* 親を基準に重ねる */
#soonParticles {
  position: relative; z-index: 1;
  width: 100%; height: 300px; overflow: hidden; opacity: .35;
}

/* #soonSection は既存どおり absolute/left でOK（styles.css の定義に合致） */
/* 参考：#soonSection { position:absolute; top:80px; left:40px; ... } は既に存在。:contentReference[oaicite:1]{index=1} */

/* モバイル調整 */
@media (max-width: 900px) {
  #soonParticles { height: 260px; opacity: .45; }
  #soonSection { top: 56px; left: 20px; max-width: calc(100% - 40px); }
}