/* Design (LP.dc.html) の <style> をそのまま移植 */
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{margin:0;font-family:'Noto Sans JP',sans-serif;color:#1c2333;background:#ffffff;line-height:1.9;font-weight:500;-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:#1f2f52}a:hover{color:#0f1a33;text-decoration:underline}
summary::-webkit-details-marker{display:none}summary{list-style:none}
input,select,button{font-family:inherit}

/* --- 実装用の追加ルール（Design の style-hover 相当） --- */
.cta:hover{background:#bf6820!important;color:#ffffff!important;text-decoration:none}
.logo-link:hover{text-decoration:none}

/* --- ヘッダーのCTA：768px 以上のみ表示（Design の headerCtaDisplay 相当） --- */
.header-cta{display:flex}
@media (max-width:767px){
  .header-cta{display:none}
}

/* --- 画面下の固定CTAバー：767px 以下のみ表示（Design の mobileBarDisplay 相当） --- */
/* フォームが画面内に入ったら form.js が .is-hidden を付けて隠す */
.mobile-cta-bar{display:none}
@media (max-width:767px){
  .mobile-cta-bar{display:block}
  .mobile-cta-bar.is-hidden{display:none}
  /* 固定バー（高さ78px）がフッター最終行の「個人情報の取扱いについて」に重なるため、
     その分だけフッターの下余白を足す。Design の inline style を上書きする */
  footer{padding-bottom:calc(126px + env(safe-area-inset-bottom))!important}
}

/* --- 比較表：スマホ（<768px）は横スクロールの表（縦=ルート3、横=評価項目8、左端の列を固定）、
       PC（>=768px）は縦=評価項目・横=ルートの表 --- */
/* Design の matchMedia('(max-width:767px)') 切替を CSS に置き換えたもの */
/* .compare-sp は inline style に display があるため !important で上書きする */
.compare-table{display:none}
@media (min-width:768px){
  .compare-sp{display:none!important}
  .compare-table{display:block}
}

/* --- 相談から入社までの流れ：PC は5列グリッド、スマホは縦積み --- */
/* Design が stepsWide / stepsNarrow の2マークアップを持つため、両方出して CSS で切り替える */
.flow-narrow{display:none!important}
@media (max-width:767px){
  .flow-wide{display:none!important}
  .flow-narrow{display:flex!important}
}

/* --- 悩みセクション：カード4枚を PC は2列×2行、スマホ（<768px）は縦積みにする --- */
/* inline style の grid-template-columns を上書きするため !important を付ける */
@media (max-width:767px){
  .worry-grid{grid-template-columns:1fr!important}
}

/* --- FAQ：罫線と文字の間隔を上下そろえる --- */
/* 閉じている時は summary の padding 18px で上下が揃う。開くと質問と回答の間に
   両方の行の余白（line-height 1.9 の半端分）が重なって広くなるため、開いた時だけ詰める。
   inline style の padding を上書きするので !important を付ける */
.faq details[open] > summary{padding-bottom:14px!important}

/* --- フォーム：honeypot（画面外に退避）・送信ボタン無効時 --- */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
#register-form{position:relative}
#register-form button[type="submit"]:disabled{opacity:.5;cursor:not-allowed}