/* ==========================================================================
   site.css — 元テーマ（style.min.css など）に対する追加スタイル
   ・旧サイトが Swiper / GSAP / jQuery で実現していた動きを CSS と main.js で置き換えるための定義
   ・旧サイトがフッターにインラインで持っていたスタイル
   ・お問い合わせフォームの確認画面・エラー表示、JS で描画するニュース一覧
   ========================================================================== */

/* ---------- 共通 ---------- */
html { scroll-behavior: smooth; }
.link_bd { text-decoration: underline; }
[hidden] { display: none !important; }
/* KV のページタイトルは h1（旧サイトは div）。見た目は旧サイトに合わせる */
.kv-ttl__main { font-weight: 500; }

/* ---------- ヘッダー ---------- */
.header { transition: background-color .3s cubic-bezier(.23,1,.32,1); }
.header.is-scrolled { background: #fff !important; }
.header-menu { background: none; border: 0; padding: 0; cursor: pointer; }
body.is-scroll-locked { position: fixed; left: 0; width: 100%; }

/* ---------- トップ KV（Swiper/GSAP の代替） ---------- */
/* 元サイトは GSAP ScrollTrigger で KV をビューポートの高さの 50% 分ピン留めしている。sticky + スペーサーで再現する。 */
.container { overflow: clip; }
@media screen and (min-width: 768px) {
  .top-kv-pin { height: 150vh; }
  .top-kv { position: sticky; top: 0; }
}
.top-slider__wrapper { position: relative; height: 100%; }
.top-slide { position: absolute; inset: 0; opacity: 0; animation: heroFade 16s ease-in-out infinite; }
.top-slide--01 { animation-delay: 0s; }
.top-slide--02 { animation-delay: 4s; }
.top-slide--03 { animation-delay: 8s; }
.top-slide--04 { animation-delay: 12s; }
@keyframes heroFade { 0% { opacity: 0; } 8% { opacity: 1; } 25% { opacity: 1; } 33% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .top-slide { animation: none; } .top-slide--01 { opacity: 1; } }
.top-slider__container { height: 100%; transition: filter .6s cubic-bezier(.23,1,.32,1); }
.top-kv__cont { transition: transform .6s cubic-bezier(.23,1,.32,1); }
.top-kv.is-scrolled .top-kv__cont { transform: translateY(0); }
/* PC 幅だけ: スクロールすると KV の本文を表示し、背景をぼかす（スマホ幅は旧サイトと同じく最初から表示・ぼかしなし） */
@media screen and (min-width: 768px) {
  .top-kv__body { opacity: 0; transform: translateY(40px); transition: opacity .6s cubic-bezier(.23,1,.32,1), transform .6s cubic-bezier(.23,1,.32,1); }
  .top-kv.is-scrolled .top-kv__body { opacity: 1; transform: none; }
  .top-kv.is-scrolled .top-slider__container { filter: blur(5px); }
}
.top-kv__btn .btn { cursor: pointer; }

/* ---------- スクロール表示 ---------- */
.fade { opacity: 0; transform: translateY(24px); transition: opacity .9s cubic-bezier(.23,1,.32,1), transform .9s cubic-bezier(.23,1,.32,1); }
.fade.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .fade { opacity: 1; transform: none; transition: none; } }

/* ---------- フッター（旧サイトのインラインスタイル） ---------- */
.contact-form-list { display: flex; font-size: 16px; margin-bottom: 15px; }
.contact-form-btn { flex: 1; text-align: center; margin: 8px; padding: 5px 0; background: #fff; border: 1px solid #2a9ad5; border-radius: 10px; }
.contact-form-btn a { display: block; }
.contact-form-btn:hover { opacity: .8; }
.contact-attr-txt { font-size: 14px; margin-top: -3px; }
.contact-others-txt { padding-top: 15px; }
.footer-menu { display: flex; font-size: 14px; }
@media screen and (max-width: 768px) {
  .contact-form-list { display: block; font-size: 12px; }
  .contact-attr-txt { font-size: 12px; }
  .contact-others-txt { padding-top: 0; }
  .contact-form-btn::before { content: ""; border-color: transparent; }
  .contact-form-btn { margin: 20px; }
  .footer-menu { flex-direction: column; font-size: 12px; text-align: center; }
}

/* ---------- ニュース一覧（assets/js/news.js が描画） ---------- */
.news-empty { padding: 32px 0; text-align: center; color: rgba(68,80,93,.5); }

/* ---------- お問い合わせフォーム（assets/js/contact.js） ---------- */
.contact-form .btn { height: 64px; width: 300px; max-width: 100%; cursor: pointer; border: 0; font: inherit; }
.contact-form .btn--back { border: 1px solid #7b7b7b; }
/* 元テーマの hover（白背景＋枠線）は上の border: 0 で枠線が消え、白背景のページに溶けて見えなくなるため、背景色を保ったまま濃くする */
.contact-form .btn--submit:hover { background: #2386bc; color: #fff; }
.contact-form__note { margin-top: 35px; margin-bottom: -40px; font-size: 16px; }
.contact-form__note strong { font-weight: bold; }
.contact-form__value { display: none; white-space: pre-wrap; word-break: break-word; }
.contact-form__error { display: none; margin-top: 8px; font-size: 12px; line-height: 1.4; letter-spacing: .05em; color: #dc3232; }
.contact-form__item.has-error .contact-form__error { display: block; }
/* 入力欄。.select__item はニュース等の年選択（.select:after の▼）でも使うため .contact-form 内に限定する */
.contact-form .contact-form__input, .contact-form .contact-form__textarea, .contact-form .select__item { color: #44505d; background-color: #fff; font: inherit; transition: border-color .2s, box-shadow .2s; }
/* 元テーマの .select:after の▼（ラッパーが無いため背景画像で描く） */
.contact-form .select__item { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0h14L7 10z' fill='%232a9ad5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 20px center; background-size: 10px 8px; }
.contact-form .select__item:invalid { color: #989898; }
.contact-form .select__item option { color: #44505d; }
.contact-form .contact-form__input:focus, .contact-form .contact-form__textarea:focus, .contact-form .select__item:focus { outline: none; border-color: #2a9ad5; box-shadow: 0 0 0 3px rgba(42,154,213,.15); }
.contact-form__item.has-error .contact-form__input,
.contact-form__item.has-error .contact-form__textarea,
.contact-form__item.has-error .select__item { border-color: #dc3232; background-color: #fff8f8; }
.contact-form__item.has-error .contact-form__input:focus,
.contact-form__item.has-error .contact-form__textarea:focus,
.contact-form__item.has-error .select__item:focus { box-shadow: 0 0 0 3px rgba(220,50,50,.15); }
/* 同意チェック: 元テーマは input を display: none にしておりキーボードで操作できないため、見えないまま残す */
.contact-form .contact-checkbox { position: relative; }
.contact-form .contact-checkbox__check { display: block; position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; }
.contact-form .contact-checkbox__check:focus-visible + .mwform-checkbox-field-text:before { border-color: #2a9ad5; box-shadow: 0 0 0 3px rgba(42,154,213,.15); }
.contact-form__item.has-error .mwform-checkbox-field-text:before { border-color: #dc3232; background-color: #fff8f8; }
.contact-form .btn:focus-visible { outline: 2px solid #2a9ad5; outline-offset: 3px; }
.contact-form .btn:disabled { opacity: .5; pointer-events: none; }
.contact-form__status { margin-top: 24px; text-align: center; font-size: 14px; min-height: 1.5em; }
.contact-form__status.is-error { padding: 12px 16px; border: 1px solid rgba(220,50,50,.3); background: #fff8f8; color: #dc3232; }
/* 元テーマは項目名が line-height: 1 で、折り返すラベル（「サスメドシステムをどこで知りましたか？」等）の行が詰まる */
.contact-form__head { line-height: 1.4; }
@media screen and (max-width: 767px) {
  /* 元テーマの高さ 30px・13px は小さく、iOS では 16px 未満の入力欄にフォーカスすると画面が拡大されるため */
  .contact-form .contact-form__input, .contact-form .select__item { height: 44px; font-size: 16px; }
  .contact-form .contact-form__input { padding: 0 12px; }
  .contact-form .select__item { padding: 0 44px 0 12px; background-position: right 16px center; }
  .contact-form .contact-form__textarea { padding: 8px 12px; font-size: 16px; }
  .contact-form .btn { width: 100%; }
  .confirm .contact-form__head { height: auto; min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
}
@media screen and (min-width: 768px) {
  .contact-form .select__item { background-position: right 26px center; background-size: 14px 10px; }
  .contact-form__error { font-size: 14px; }
  /* 元テーマの 20px は 18px の文言に対して小さいため。チェックの画像もテーマと同じ比率で拡大 */
  .contact-checkbox .mwform-checkbox-field-text:before { width: 28px; height: 28px; }
  .contact-checkbox .mwform-checkbox-field-text:after { left: 4px; width: 30px; height: 24px; transform: translateY(-50%) translateY(-4px); }
}
.confirm .contact-form__input, .confirm .contact-form__textarea, .confirm .select__item, .confirm .contact-form__error, .confirm .contact-form__note, .confirm .contact-form__agree { display: none; }
.confirm .contact-form__value { display: block; }
.confirm .contact-form__lead { display: block; margin-bottom: 32px; text-align: center; }
.contact-form__lead { display: none; }
.contact-checkbox { cursor: pointer; }
.contact-checkbox .mwform-checkbox-field-text { cursor: pointer; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 採用ページのカルチャーデック（assets/js/deck.js。旧サイトは Speaker Deck の埋め込み） ---------- */
/* スライドを横に並べ、1 枚ずつ止まるようにスクロールさせる（スマホはスワイプでめくれる） */
/* 1 枚目など白地のスライドもページの背景と見分けられるよう、薄い枠線を付ける */
.deck__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; border: 1px solid #dde1e5; background: #f3f5f7; scrollbar-width: none; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.deck__track::-webkit-scrollbar { display: none; }
.deck__track:focus-visible { outline: 2px solid #2a9ad5; outline-offset: 3px; }
.deck__slide { flex: 0 0 100%; width: 100%; height: auto; scroll-snap-align: start; scroll-snap-stop: always; }
.deck__nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; }
.deck__btn { width: 44px; height: 44px; border: 1px solid #2a9ad5; border-radius: 50%; background: #fff; color: #2a9ad5; font-size: 24px; line-height: 1; cursor: pointer; }
.deck__btn:hover { background: #2a9ad5; color: #fff; }
.deck__btn:focus-visible { outline: 2px solid #2a9ad5; outline-offset: 3px; }
.deck__btn:disabled { opacity: .3; cursor: default; background: #fff; color: #2a9ad5; }
.deck__count { min-width: 5em; text-align: center; font-variant-numeric: tabular-nums; }
/* PC は説明文〜スライド（34px）と、ボタン〜次の見出し（160px）が空きすぎるので詰める（スマホは元から狭い） */
@media screen and (min-width: 768px) {
  .sec__body--deck:not(:first-child) { margin-top: 46px; } /* 説明文の margin-bottom: -30px と合わせて 16px */
  .sec__item--deck + .sec__item { margin-top: 80px; }
}