@charset "utf-8";

/* ===================================================================
 * overrides.css
 *
 * style.css への上書き。import.css より後に読み込まれる。
 *
 * なぜ style.css を直接触らないか:
 *   assets/scss/style.scss と assets/css/style.css は既に内容が食い違っている
 *   （#splash / .c-contact-dl / .c-top-sec-02 など）。SCSS を再ビルドすると
 *   本番に入っている修正が巻き戻るため、SCSS には手を入れず、
 *   変更をこのファイルに集約している。
 *   SCSS と CSS の同期は別途の課題。
 * =================================================================== */

/* -------------------------------------------------------------------
 * 1. 配色トークン
 *    style.css には30種以上の色がベタ書きされていた。
 *    役割を2色に整理する:
 *      --c-accent (橙) = ブランド / ボタン / 本文中の強調
 *      --c-label  (赤) = セクションの英字ラベル
 *    テンプレート由来で残っていた青系 (#122d53 / #227093 / #576574 /
 *    #8395a7) は、どのブランド要素とも対応していないため置き換える。
 * ----------------------------------------------------------------- */
:root {
  --c-accent: #e2780e;
  --c-label: #b8332a;
  --c-ink: #0e0e0e;
  --c-text: #333;
  --c-text-weak: #727272;
  --c-line: #dfdfdf;
  --c-beige: #f6f4ee;
}

/* 本文中の強調は橙で統一する（他セクションの強調が既に橙のため） */
.c-top-sec-01-title span {
  color: var(--c-accent);
}

/* 代表挨拶の小見出し: 紺 → 本文色 + 橙の縦罫 */
.l-title-03 {
  color: var(--c-ink);
  padding-left: 12px;
  border-left: 3px solid var(--c-accent);
}

/* プライバシーポリシー: 青系一式をブランド側へ寄せる */
.p-privacy h2 {
  color: var(--c-ink);
}
.p-privacy h3 {
  color: var(--c-ink);
  border-bottom-color: var(--c-line);
}
.p-privacy h4 {
  color: var(--c-ink);
}
.p-privacy h5 {
  color: var(--c-ink);
  border-left-color: var(--c-accent);
}
.p-privacy dt {
  color: var(--c-text-weak);
}

/* -------------------------------------------------------------------
 * 2. ヒーロー: 「Scroll」が社名に重なる問題
 *    .scroll は bottom:65px 固定、コンテンツは上下中央寄せのため、
 *    ビューポート高が 730〜860px のとき両者が衝突していた
 *    （1366x768 / 1280x800 のノートPCが該当）。
 *    コンテンツ側に下の余白を確保して、重なりようがないようにする。
 * ----------------------------------------------------------------- */
.c-top-main-wrap {
  padding-bottom: 120px;
  box-sizing: border-box;
}
@media screen and (max-width: 768px) {
  .c-top-main-wrap {
    padding-bottom: 100px;
  }
}

/* right:50% だと文字幅の分だけ中心から左にずれる */
.scroll {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  bottom: 40px;
}

/* Roboto の読み込みをやめたので本文フォントに寄せる */
.rob {
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0.08em;
}

/* -------------------------------------------------------------------
 * 3. 主要取引先
 *    .c-about-sec-02-ul が width:50% + margin-left:auto で右半分に寄り、
 *    左側が丸ごと空いていた（会社概要の dl レイアウトの流用）。
 * ----------------------------------------------------------------- */
.c-about-sec-02-ul {
  width: 100%;
  margin-left: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 40px;
}
.c-about-sec-02-ul li {
  margin-bottom: 0;
  padding: 0 0 24px;
  border-top: solid 1px var(--c-line);
  border-bottom: none;
  padding-top: 24px;
  font-size: 1.0625rem;
}
@media screen and (max-width: 768px) {
  .c-about-sec-02-ul {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 20px;
  }
  .c-about-sec-02-ul li {
    padding: 18px 0;
  }
}

/* 会社概要の TEL / e-mail をリンクと分かる見た目にする */
.c-about-dl dd a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--c-line);
}
.c-about-dl dd a:hover {
  color: var(--c-accent);
  text-decoration-color: var(--c-accent);
}

/* -------------------------------------------------------------------
 * 4. フッター
 * ----------------------------------------------------------------- */

/* CTA が片方だけのとき（/contact/ や /recruit/）に半分幅で残らないように */
.c-cv-flex.is-single .c-cv-child {
  width: 100%;
}
.c-cv-flex.is-single .c-cv-child.left {
  border-right: none;
}

/* タップ領域を 24px 以上にする（WCAG 2.2 / 2.5.8） */
.c-footer-nav a {
  display: inline-block;
  padding: 6px 0;
}

.c-footer-company-add a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.c-footer-company-add a:hover {
  color: var(--c-accent);
}

/* -------------------------------------------------------------------
 * 5. ドロワーメニューのアクセシビリティ
 *    - チェックボックスが display:none でキーボードから開けなかった
 *    - 閉じている間もドロワー内のリンクにタブが入っていた
 * ----------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  #drawer-checkbox {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    margin: 0;
    padding: 0;
    opacity: 0;
    z-index: 41;
    cursor: pointer;
  }
  #drawer-checkbox:focus-visible ~ #drawer-icon {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* 閉じている間は支援技術とタブ順から外す。
     visibility はスライドアウトが終わってから効かせる */
  #drawer-content {
    visibility: hidden;
    transition: transform 0.3s ease-in-out 0s, visibility 0s linear 0.3s;
  }
  #drawer-checkbox:checked ~ #drawer-content {
    visibility: visible;
    transition: transform 0.3s ease-in-out 0s, visibility 0s linear 0s;
  }
}

/* -------------------------------------------------------------------
 * 6. 404 ページ
 * ----------------------------------------------------------------- */
.l-content-s {
  width: 100%;
  max-width: 800px;
  padding: 0 20px;
  margin: 0 auto;
  box-sizing: border-box;
}

.c-404 {
  text-align: center;
}
.c-404-num {
  font-size: 5rem;
  font-weight: 600;
  line-height: 1;
  color: var(--c-accent);
  margin-bottom: 16px;
}
.c-404-title {
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.6;
  margin-bottom: 20px;
}
.c-404-txt {
  font-size: 0.9375rem;
  line-height: 2;
  margin-bottom: 40px;
}
.c-404-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 32px;
}
.c-404-links a {
  display: inline-block;
  padding: 8px 0;
  border-bottom: 1px solid var(--c-line);
}
.c-404-links a:hover {
  color: var(--c-accent);
  border-bottom-color: var(--c-accent);
}
@media screen and (max-width: 600px) {
  .c-404-num {
    font-size: 3.5rem;
  }
  .c-404-title {
    font-size: 1.25rem;
  }
}

/* -------------------------------------------------------------------
 * 7. フォーカスリング
 *    キーボード操作時にどこにいるか分かるようにする。
 * ----------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------
 * 8. アニメーションを控える設定への対応
 * ----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fadeUpTrigger,
  .fadeLeftTrigger,
  .blurTrigger,
  .leftAnime {
    opacity: 1 !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}