/* =========================================================================
   まるっとけあ｜募集要項サイト スタイルシート
   ブランドカラー：白基調／深いネイビー／信頼感のあるブルー／淡いブルーグレー
   アクセント：控えめなゴールド
   ========================================================================= */

:root{
  --color-white:#ffffff;
  --color-navy:#173456;
  --color-navy-deep:#0f2440;
  --color-blue:#2f6fa8;
  --color-blue-light:#e8f0f7;
  --color-blue-gray:#f4f7fa;
  --color-blue-deep:#5a84b3;
  --color-navy-soft:#2c5680;
  --color-border:#dbe4ec;
  --color-text:#243447;
  --color-text-sub:#546477;
  --color-gold:#c9973f;
  --color-gold-dark:#a9793a;
  --color-pink-light:#fff5f7;

  --font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  --header-h: 72px;
  --mobile-cta-h: 64px;

  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 2px 8px rgba(15,36,64,0.08);
  --shadow-md: 0 6px 20px rgba(15,36,64,0.10);
  --shadow-lg: 0 16px 40px rgba(15,36,64,0.20);
  --gradient-navy: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-deep) 100%);
  --gradient-gold: linear-gradient(135deg, #ddb46a 0%, var(--color-gold-dark) 100%);
  --color-gold-soft: rgba(201,151,63,0.14);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font-base);
  color:var(--color-text);
  background:var(--color-white);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

a{ color:var(--color-blue); text-decoration:none; }
a:hover{ text-decoration:underline; }

ul{ margin:0; padding:0; }
li{ margin-bottom:6px; }

h1,h2,h3,h4{ margin:0; font-weight:700; color:var(--color-navy-deep); }

/* 横スクロール防止 */
html, body{ overflow-x:hidden; max-width:100%; }

/* フォーカス表示（アクセシビリティ） */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--color-gold);
  outline-offset:2px;
  border-radius:4px;
}

/* スキップリンク */
.skip-link{
  position:absolute;
  left:-999px;
  top:0;
  background:var(--color-navy);
  color:#fff;
  padding:10px 16px;
  z-index:2000;
}
.skip-link:focus{ left:8px; top:8px; }

.section-inner{
  max-width:1120px;
  margin:0 auto;
  padding:0 20px;
}

/* =========================================================================
   ヘッダー
   ========================================================================= */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  height:var(--header-h);
  background:rgba(255,255,255,0.97);
  border-bottom:1px solid var(--color-border);
  backdrop-filter:saturate(180%) blur(6px);
}
.site-header::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-3px;
  height:3px;
  background:var(--gradient-gold);
}
.header-inner{
  max-width:1200px;
  margin:0 auto;
  height:100%;
  padding:0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.header-logo{
  display:flex;
  align-items:center;
  height:100%;
  flex-shrink:0;
}
.header-logo img{
  height:40px;
  width:auto;
}
.header-nav{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
}
.header-link{
  color:var(--color-navy);
  font-weight:500;
  font-size:14px;
  padding:10px 8px;
  min-height:44px;
  display:flex;
  align-items:center;
  white-space:nowrap;
}
.header-link:hover{ color:var(--color-blue); text-decoration:underline; }
.header-btn{
  background:var(--gradient-navy);
  color:#fff;
  font-weight:700;
  font-size:14px;
  padding:10px 18px;
  min-height:44px;
  display:flex;
  align-items:center;
  border-radius:8px;
  white-space:nowrap;
  box-shadow:0 4px 12px rgba(15,36,64,0.22);
  transition:transform .2s ease, box-shadow .2s ease;
}
.header-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(15,36,64,0.28);
  text-decoration:none;
}

/* =========================================================================
   ファーストビュー
   ========================================================================= */
.hero{
  background:radial-gradient(circle at 15% 20%, #1c3f66 0%, var(--color-navy-deep) 55%, #081729 100%);
  padding:72px 0 64px;
  text-align:center;
  border-bottom:3px solid var(--color-gold-dark);
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 40%);
  pointer-events:none;
}
.hero-inner{
  max-width:760px;
  margin:0 auto;
  padding:0 20px;
}
.hero-inner.hero-grid{
  position:relative;
  max-width:1180px;
  display:grid;
  grid-template-columns:1.05fr 1fr;
  grid-template-areas:"text photo-r";
  align-items:center;
  gap:40px;
  text-align:left;
}
.hero-text{ grid-area:text; max-width:520px; }
.hero-photo-right{ grid-area:photo-r; }
.hero-photo{
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  object-fit:cover;
  height:auto;
  width:100%;
}
.hero-photo-right{
  aspect-ratio:4 / 3;
  object-position:60% 38%;
}
.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--color-gold);
  font-weight:700;
  letter-spacing:.14em;
  font-size:13px;
  margin:0 0 14px;
  justify-content:flex-start;
}
.hero-eyebrow::before{
  content:"";
  display:inline-block;
  width:28px;
  height:2px;
  background:var(--gradient-gold);
}
.hero-title{
  font-size:48px;
  color:#ffffff;
  margin:0 0 22px;
  letter-spacing:.06em;
  text-shadow:0 2px 12px rgba(0,0,0,0.25);
}
.hero-lead{
  font-size:21px;
  font-weight:700;
  color:#f3d9a8;
  margin:0 0 16px;
}
.hero-desc{
  font-size:16px;
  color:#cfdbea;
  margin:0;
}

/* =========================================================================
   共通セクション見出し
   ========================================================================= */
.job-nav, .job-detail, .salary-sim, .cta, .notice{
  padding:56px 0;
}
.job-detail{ background:linear-gradient(180deg, var(--color-navy-soft) 0%, #1c3f66 100%); }
.job-detail .section-title{ color:#ffffff; font-size:30px; }
.job-detail .section-title-icon{ color:var(--color-gold); }
.job-detail .section-note-top{ color:#dbe6f2; }
.salary-sim{ background:#fdf6f7; border-top:1px solid var(--color-border); }
.salary-sim .section-note-top{ font-size:16px; }
.section-title{
  font-size:26px;
  font-weight:800;
  letter-spacing:.01em;
  color:var(--color-navy-deep);
  text-align:center;
  margin-bottom:32px;
  position:relative;
  padding-bottom:14px;
}
.section-title::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:56px;
  height:3px;
  background:var(--gradient-gold);
  border-radius:2px;
}
.section-title-icon{
  color:var(--color-gold-dark);
  margin-right:10px;
  font-size:.85em;
}
.section-note-top{
  text-align:center;
  color:var(--color-text-sub);
  font-size:14px;
  margin:-16px 0 32px;
}

/* =========================================================================
   入社祝い金 案内枠（常勤選択時のみ表示）
   ========================================================================= */
.signing-bonus{
  max-width:820px;
  margin:0 auto 28px;
  padding:20px 28px;
  background:var(--color-blue-gray);
  border:1px solid var(--color-border);
  border-left:4px solid var(--color-gold);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
}
.signing-bonus[hidden]{ display:none; }
.signing-bonus-eyebrow{
  margin:0 0 14px;
  text-align:center;
  font-size:14px;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--color-navy);
}
.signing-bonus-eyebrow i{
  color:var(--color-gold-dark);
  margin-right:6px;
}
.signing-bonus-items{
  display:flex;
  gap:16px;
  margin-bottom:12px;
}
.signing-bonus-item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:12px 10px;
  background:var(--color-white);
  border-radius:var(--radius-md);
  border:1px solid var(--color-border);
}
.signing-bonus-label{
  font-size:14px;
  font-weight:700;
  color:var(--color-text);
}
.signing-bonus-amount{
  font-size:26px;
  font-weight:800;
  color:var(--color-gold-dark);
  letter-spacing:.01em;
}
.signing-bonus-unit{
  font-size:15px;
  font-weight:700;
  margin-left:2px;
}
.signing-bonus-note{
  margin:0;
  text-align:center;
  font-size:12px;
  line-height:1.7;
  color:var(--color-text-sub);
  text-wrap:pretty;
}

/* =========================================================================
   タブ（常勤／非常勤）
   ========================================================================= */
.tabs{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-bottom:32px;
}
.tab-btn{
  font-family:var(--font-base);
  font-size:16px;
  font-weight:700;
  color:var(--color-navy);
  background:var(--color-white);
  border:2px solid var(--color-border);
  border-radius:999px;
  padding:12px 32px;
  min-height:44px;
  cursor:pointer;
  transition:all .2s ease;
}
.tab-btn:hover{ border-color:var(--color-blue); }
.tab-btn.is-active{
  background:var(--gradient-navy);
  border-color:var(--color-navy);
  color:#fff;
  box-shadow:0 6px 16px rgba(15,36,64,0.22);
}

/* =========================================================================
   職種カード
   ========================================================================= */
.job-cards{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
}
/* 非常勤（2件）表示時：4カラムグリッドのまま2枚だけ左に残るのを防ぎ、
   横長カードを中央に均等配置する */
.job-cards[data-active-category="parttime"]{
  grid-template-columns:repeat(2, 1fr);
  max-width:760px;
  margin:0 auto;
}
.job-cards[data-active-category="parttime"] .job-card{
  text-align:center;
  align-items:center;
}
.job-cards[data-active-category="parttime"] .job-card-facts{
  width:100%;
  max-width:300px;
  margin-left:auto;
  margin-right:auto;
}
.job-cards[data-active-category="parttime"] .job-card-link{
  min-width:160px;
}
.job-card{
  background:#fff;
  border:1px solid var(--color-border);
  border-top:3px solid var(--color-gold);
  border-radius:var(--radius-lg);
  padding:24px 22px;
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.job-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
  border-color:var(--color-gold-dark);
}
.job-card-badge{
  display:inline-block;
  align-self:flex-start;
  background:var(--gradient-navy);
  color:#fff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  padding:4px 14px;
  border-radius:999px;
  box-shadow:0 3px 8px rgba(15,36,64,0.18);
}
.job-card-title{
  font-size:20px;
  color:var(--color-navy-deep);
  margin:0;
}
.job-card-type{
  font-size:13px;
  color:var(--color-text-sub);
  margin:0;
}
.job-card-facts{
  list-style:none;
  margin:6px 0 10px;
  padding:12px 14px;
  background:linear-gradient(180deg, var(--color-blue-gray) 0%, #eef3f8 100%);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.job-card-facts li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin:0;
}
.job-card-facts .fact-label{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:12px;
  font-weight:700;
  color:var(--color-blue);
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:4px;
  padding:2px 8px;
  white-space:nowrap;
}
.job-card-facts .fact-label i{ color:var(--color-gold-dark); font-size:.9em; }
.job-card-facts .fact-value{
  font-size:14px;
  font-weight:700;
  color:var(--color-navy-deep);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.job-card-link{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  border:2px solid var(--color-navy);
  color:var(--color-navy);
  font-weight:700;
  font-size:14px;
  border-radius:8px;
  padding:8px 14px;
  transition:all .2s ease;
}
.job-card-link:hover{
  background:var(--color-navy);
  color:#fff;
  text-decoration:none;
}

/* =========================================================================
   募集要項詳細（アコーディオン）
   ========================================================================= */
.detail-group-title{
  font-size:23px;
  font-weight:800;
  color:#ffffff;
  margin:36px 0 16px;
  padding-left:12px;
  border-left:4px solid var(--color-gold);
  display:flex;
  align-items:center;
  gap:8px;
}
.detail-group-title i{
  color:var(--color-gold);
  font-size:.9em;
}
.job-panel-group{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.job-panel{
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  scroll-margin-top:calc(var(--header-h) + 16px);
}
.job-panel-header{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:var(--color-white);
  border:none;
  padding:20px 24px;
  cursor:pointer;
  text-align:left;
  font-family:var(--font-base);
  min-height:44px;
}
.job-panel-header:hover{ background:var(--color-blue-light); }
.job-panel-header[aria-expanded="true"]:not(:hover){ background:var(--color-pink-light); }
.job-panel-headline{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.job-panel-title{
  font-size:19px;
  color:var(--color-navy-deep);
  margin:0;
}
.job-panel-type{
  font-size:13px;
  color:var(--color-text-sub);
}
.job-panel-icon{
  flex-shrink:0;
  width:28px;
  height:28px;
  border-radius:50%;
  border:2px solid var(--color-navy);
  color:var(--color-navy);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:700;
  transition:transform .25s ease;
}
.job-panel-header[aria-expanded="true"] .job-panel-icon{
  transform:rotate(45deg);
  border-color:var(--color-gold-dark);
  color:var(--color-gold-dark);
}

.job-panel-body{
  padding:0 24px 28px;
}

/* 要点カード（給与・勤務地・勤務時間） */
.highlight-cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  margin:4px 0 28px;
}
.highlight-card{
  background:linear-gradient(180deg, #ffffff 0%, var(--color-blue-gray) 100%);
  border:1px solid var(--color-border);
  border-top:3px solid var(--color-gold);
  border-radius:var(--radius-md);
  padding:16px 16px;
  text-align:center;
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease;
}
.highlight-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}
.highlight-card-label{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  font-size:12px;
  color:var(--color-text-sub);
  font-weight:700;
  letter-spacing:.05em;
  margin-bottom:6px;
}
.highlight-card-label i{ color:var(--color-gold-dark); }
.highlight-card-value{
  font-size:17px;
  color:var(--color-navy-deep);
  font-weight:700;
  white-space:nowrap;
}
@media (max-width:420px){
  .highlight-card-value{ font-size:15px; }
}

/* 詳細テーブル的レイアウト（PC：2カラム／SPは縦積み） */
.detail-table{
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--color-border);
}
.detail-row{
  display:grid;
  grid-template-columns:180px 1fr;
  border-bottom:1px solid var(--color-border);
}
.detail-row-label{
  background:var(--color-blue-gray);
  color:var(--color-navy);
  font-weight:700;
  font-size:15px;
  padding:16px 20px;
  display:flex;
  align-items:flex-start;
}
.detail-row-content{
  padding:16px 20px;
  font-size:15px;
  color:var(--color-text);
}
.detail-row-content p{ margin:0 0 10px; }
.detail-row-content p:last-child{ margin-bottom:0; }
.detail-row-content ul{ margin:0; padding-left:1.3em; }
.detail-row-content li{ margin-bottom:6px; }
.section-note{
  color:var(--color-text-sub);
  font-size:13px;
  margin-top:10px;
}
.tag-required, .tag-preferred{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  border-radius:6px;
  padding:2px 8px;
  margin-right:8px;
  vertical-align:middle;
}
.tag-required{ background:#173456; color:#fff; }
.tag-preferred{ background:var(--color-gold); color:#fff; }
.nowrap-phrase{ white-space:nowrap; }

/* =========================================================================
   想定給与シミュレーション
   ========================================================================= */
.salary-sim-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:24px;
}
.salary-sim-card{
  background:var(--color-blue-gray);
  border:1px solid var(--color-border);
  border-top:3px solid var(--color-gold);
  border-radius:var(--radius-lg);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:14px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .2s ease;
}
.salary-sim-card:hover{ box-shadow:var(--shadow-md); }
.salary-sim-card-title{
  font-size:17px;
  color:var(--color-navy-deep);
  text-align:center;
  line-height:1.5;
}
.salary-sim-iframe-wrap{
  position:relative;
  width:100%;
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}

/* v3.1.11 beta: external application buttons replace iframe embeds. */
.salary-sim-card--external{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;padding:38px 28px;text-align:center;}
.salary-sim-card--external p{margin:8px 0 24px;color:var(--color-text-sub);font-size:14px;}
.salary-sim-external-icon{font-size:40px;color:var(--color-gold);margin-bottom:18px;}
.salary-sim-external-btn{width:100%;max-width:330px;justify-content:center;}
.salary-sim-iframe-wrap iframe{
  display:block;
  width:100%;
  height:640px;
  border:0;
}
.salary-sim-caption{
  text-align:center;
  margin-top:24px;
}

/* =========================================================================
   共通CTA
   ========================================================================= */
.cta{
  position:relative;
  background:radial-gradient(circle at 50% 0%, #1c3f66 0%, var(--color-navy-deep) 60%);
  color:#fff;
  overflow:hidden;
}
.cta::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:var(--gradient-gold);
}
.cta-inner{
  text-align:center;
  max-width:720px;
}
.cta-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:50%;
  background:rgba(201,151,63,0.18);
  color:var(--color-gold);
  font-size:22px;
  margin-bottom:16px;
}
.cta-title{
  color:#fff;
  font-size:24px;
  margin-bottom:16px;
}
.cta-desc{
  color:#cfdbea;
  font-size:15px;
  margin:0 auto 28px;
  max-width:520px;
}
.cta-buttons{
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 28px;
  border-radius:8px;
  font-weight:700;
  font-size:15px;
  transition:all .2s ease;
}
.btn-primary{
  background:var(--gradient-gold);
  color:#fff;
  box-shadow:0 6px 16px rgba(201,151,63,0.35);
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(201,151,63,0.45);
  text-decoration:none;
}
.btn-secondary{
  background:transparent;
  color:#fff;
  border:2px solid #fff;
  transition:all .2s ease;
}
.btn-secondary:hover{
  background:rgba(255,255,255,0.12);
  border-color:var(--color-gold);
  color:var(--color-gold);
  text-decoration:none;
}

/* =========================================================================
   注意事項
   ========================================================================= */
.notice{
  background:var(--color-blue-light);
  padding:28px 0;
}
.notice-title{
  font-size:18px;
  color:var(--color-navy);
  text-align:center;
  margin-bottom:16px;
}
.notice-title i{
  color:var(--color-gold-dark);
  margin-right:6px;
}
.notice-list{
  max-width:680px;
  margin:0 auto;
  padding-left:1.3em;
  color:var(--color-text-sub);
  font-size:14px;
}
.notice-list li::marker{ color:var(--color-gold-dark); }
.notice-list li{ margin-bottom:8px; }

/* =========================================================================
   フッター
   ========================================================================= */
.site-footer{
  background:var(--color-navy-deep);
  color:#cfdbea;
  padding:32px 0 calc(32px + env(safe-area-inset-bottom));
  border-top:3px solid var(--color-gold-dark);
}
.footer-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  text-align:center;
}
.footer-company{
  font-weight:700;
  color:#fff;
  margin:0;
}
.footer-links{
  display:flex;
  gap:20px;
  font-size:14px;
}
.footer-link{ color:#cfdbea; }
.footer-link:hover{ color:#fff; }
.footer-link-static{ color:#9fb4cc; }
.footer-copyright{
  font-size:12px;
  color:#9fb4cc;
  margin:0;
}

/* =========================================================================
   スマートフォン固定CTA
   ========================================================================= */
.mobile-fixed-cta{
  display:none;
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:1500;
  background:#fff;
  border-top:1px solid var(--color-border);
  padding:8px 12px calc(8px + env(safe-area-inset-bottom));
  gap:10px;
  box-shadow:0 -4px 16px rgba(15,36,64,0.12);
}
.mobile-cta-btn{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  border-radius:8px;
  font-weight:700;
  font-size:15px;
}
.mobile-cta-secondary{
  background:var(--color-blue-light);
  color:var(--color-navy);
  border:2px solid var(--color-navy);
}
.mobile-cta-primary{
  background:var(--color-gold);
  color:#fff;
}
.mobile-cta-btn:hover{ text-decoration:none; opacity:.9; }

/* =========================================================================
   レスポンシブ：タブレット（〜1023px）
   ========================================================================= */
@media (max-width:1023px){
  .job-cards{
    grid-template-columns:repeat(2, 1fr);
  }
  .job-card-facts .fact-value{
    white-space:normal;
    overflow:visible;
    text-overflow:unset;
  }
  .salary-sim-grid{
    grid-template-columns:1fr;
  }
  .hero-inner.hero-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "text"
      "photo-r";
    text-align:center;
    gap:28px;
  }
  .hero-text{ grid-area:text; max-width:520px; margin:0 auto; text-align:center; }
  .hero-photo-right{ grid-area:photo-r; max-width:480px; margin:0 auto; aspect-ratio:4 / 3; object-position:center 35%; }
}

/* =========================================================================
   レスポンシブ：スマートフォン（〜767px）
   ========================================================================= */
@media (max-width:767px){
  body{ padding-bottom: calc(var(--mobile-cta-h) + env(safe-area-inset-bottom)); }

  .header-inner{ padding:0 16px; }
  .header-nav{ gap:4px; }
  .header-link{ font-size:12px; padding:8px 6px; }
  .header-btn{ font-size:12px; padding:8px 12px; }
  .header-logo img{ height:32px; }

  .hero{ padding:40px 0 36px; }
  .hero-title{ font-size:32px; }
  .hero-lead{ font-size:17px; }
  .hero-desc{ font-size:14px; }
  .hero-inner.hero-grid{ gap:20px; }
  .hero-photo-right{ max-width:320px; aspect-ratio:4 / 3; object-position:center 35%; }

  .signing-bonus{ padding:16px 18px; margin-bottom:24px; }
  .signing-bonus-items{ flex-direction:column; gap:10px; }
  .signing-bonus-amount{ font-size:23px; }

  .section-inner{ padding:0 20px; }
  .job-nav, .job-detail, .salary-sim, .cta, .notice{ padding:40px 0; }
  .notice{ padding:24px 0; }
  .section-title{ font-size:21px; }
  .job-detail .section-title{ font-size:24px; }
  .detail-group-title{ font-size:19px; }
  .salary-sim .section-note-top{ font-size:15px; }

  .tabs{ gap:8px; }
  .tab-btn{ flex:1; padding:12px 10px; font-size:15px; }

  .job-cards{ grid-template-columns:1fr; }
  .job-cards[data-active-category="parttime"]{ grid-template-columns:1fr; max-width:none; }

  .highlight-cards{ grid-template-columns:1fr; gap:10px; }

  .detail-row{ grid-template-columns:1fr; }
  .detail-row-label{ padding:12px 16px 6px; }
  .detail-row-content{ padding:6px 16px 16px; }

  .job-panel-header{ padding:16px 18px; }
  .job-panel-body{ padding:0 18px 22px; }
  .job-panel-title{ font-size:17px; }

  .salary-sim-grid{ grid-template-columns:1fr; gap:16px; }
  .salary-sim-card{ padding:14px; }
  .salary-sim-iframe-wrap iframe{ height:560px; }

  .cta-title{ font-size:20px; }
  .cta-buttons{ flex-direction:column; }
  .btn{ width:100%; }

  .mobile-fixed-cta{ display:flex; }
}

/* =========================================================================
   レスポンシブ：デスクトップ大画面（1440px以上）での余白調整
   ========================================================================= */
@media (min-width:1440px){
  .section-inner{ max-width:1200px; }
}