/*
 * 静的サイト用カスタムオーバーライド
 *
 * テーマ由来の style.css を直接書き換えず、表示崩れの個別修正はこのファイルに
 * 記述する（style.css の後に読み込むことで上書きする）。
 */

/*
 * バグ②: PCで縦長ウィンドウにすると TOP 背景動画がバナーを覆い切れず
 * 上下にグレーの余白が出て、最下部の .c-scroll(SCROLL) が見えづらく/切れる。
 * → 動画をバナー全体にカバー表示させて余白を解消する。
 */
.p-top .top-banner .banner_bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: none;
          transform: none;
}
.p-top .top-banner #myVideo {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/*
 * バグ③: 「SCROLL」の文字が小さい(14px)ため 20px へ拡大。
 * バグ②: クリックでサービス紹介へ移動するため、操作可能であることを示す。
 */
.c-scroll {
  font-size: 20px;
  cursor: pointer;
}

/*
 * バグ⑥: TOPのプロジェクト事例カードをクリックで詳細ページの該当カードへ遷移。
 * クリック可能であることを示す。
 */
[data-card-href] {
  cursor: pointer;
}

/*
 * バグ⑧: TOPから詳細ページ(サービス/プロジェクト)へアンカー遷移した際、
 * 対象がヘッダー直下に詰まって見えないよう着地位置を下げ、選んだ事業/事例が
 * 画面のやや上〜中央に来るようにする。最後尾セクションはページ末尾の都合で
 * これより上に表示されるが、全体として見栄えが揃う。
 * (.sec01_box[id]=サービスページの各セクション, .project_post=プロジェクト各カード)
 */
.sec01_box[id],
.project_post {
  scroll-margin-top: 25vh;
}

/*
 * バグ⑨: TOPアクセス欄(top-sec06)で、地図の下端にオフィス写真が絶対配置で
 * 重なり「意図しない重なり」/iPhoneSEで「見切れ」に見える問題を修正。
 * 写真を絶対配置の重なりから、地図の下の通常フロー配置へ変更する。
 */
.p-top .top-sec06 {
  padding-bottom: 80px;
}
.p-top .top-sec06 .sec06_map .map_place {
  position: static;
  display: block;
  width: 100%;
  max-width: 600px;
  margin: 20px auto 0;
}
.p-top .top-sec06 .sec06_map .map_place img {
  display: block;
  width: 100%;
  height: auto;
}
.p-top .top-sec06 .sec06_content {
  width: 100%;
  margin-top: 40px;
}

/*
 * バグ⑩: 採用ページのYouTube動画(iframe)が固定幅(1280x720)のため
 * iPhoneSEで横にはみ出して見切れる。16:9を保ったままレスポンシブ表示にする。
 * 併せて、想定外のiframeはみ出し防止の保険として max-width:100% を付与。
 */
iframe {
  max-width: 100%;
}
.content4_iframe {
  max-width: 100%;
}
.content4_iframe iframe {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border: 0;
}

/*
 * バグ⑫: サービスページの各セクションが「ビューポート全幅」基準で画像50%/
 * 本文50%に分割され、本文側余白を calc(50% - 490px) で指定していたため、
 * 画像が画面左端に張り付き、画像〜本文間に大きな隙間ができていた。
 * → 中身(.service_content)をヘッダー等と同じ中央コンテナ幅(1028px)に収め、
 *   画面端基準(calc)の余白を打ち消すことで、画像を本文側へ寄せ、間隔を
 *   一定(40pxのガター)に保つ。ジグザグ配置(奇数=画像左/偶数=画像右)は維持。
 */
.p-service .service-sec01 .service_content {
  max-width: 1028px;
  margin: 0 auto;
  padding: 0 24px;
}
.p-service .service-sec01 .sec01_box .box_content,
.p-service .service-sec01 .sec01_box:nth-child(2n) .box_content {
  padding-right: 0;
  padding-left: 0;
}
/* 画像を列いっぱいに表示（本文との間は box_img の padding=40px で確保） */
.p-service .service-sec01 .sec01_box .box_img img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 767px) {
  .p-service .service-sec01 .service_content {
    padding: 0;
  }
}

/*
 * 要件⑭: サービス内容を表す .box_btn span（「コンサルティング」「IT戦略/計画
 * の立案代行」等）が、塗りつぶしのボタン風デザインのため「押せそうで押せない」
 * と誤認されていた。背景と文字色を入れ替えた「白背景＋ネイビー枠線・文字」の
 * ラベル調にし、操作対象ではない（押せない）ことが伝わる見た目にする。
 * （border 1px 分は padding を 1px 減らして元の大きさを維持）
 */
.p-service .service-sec01 .sec01_box .box_btn span {
  color: #0F3870;
  background: #fff;
  border: 1px solid #0F3870;
  padding: 7px 9px;
}

/*
 * 要件⑪: サービスページSES「対応プロダクト例 (受託・SES)」を最新化し、
 * 文字の羅列からロゴ画像のグリッド表示へ変更（レスポンシブ）。
 * 要件⑬: ロゴのみでなく「ロゴ＋名称」をセット表示し、用途別カテゴリーに
 * 整理する（SEO・視認性の向上）。Backlog は公式がPNGのみ＆規約が厳格な
 * ため、緑のワードマーク調テキストで表現する。
 */
.box_frame .product_group + .product_group {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed #cfd8e6;
}
.box_frame .product_group_title {
  font-size: 14px;
  font-weight: 700;
  color: #0F3870;
  margin-bottom: 14px;
}
.box_frame .product_logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 18px 12px;
}
.box_frame .product_logos li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  text-align: center;
}
/*
 * 要件②: ロゴSVGの多く(java/php等)は viewBox のみで width/height 属性を
 * 持たないため、height:auto だとブラウザが固有サイズを決められず 0×0 に
 * 潰れて表示されない。height を固定値にして縦横比を保ったまま表示させる。
 */
.box_frame .product_logos img {
  width: auto;
  height: 40px;
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}
.box_frame .product_logos .product_name {
  font-size: 12px;
  line-height: 1.3;
  color: #333;
}
/* Backlog はロゴ画像枠と同じ高さのワードマーク調テキストで表現 */
.box_frame .product_logos .product_text {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.02em;
}
.box_frame .product_logos .product_text--backlog {
  color: #2DA44E;
}
@media screen and (max-width: 767px) {
  .box_frame .product_logos {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 16px 8px;
  }
  .box_frame .product_logos img,
  .box_frame .product_logos .product_text {
    height: 32px;
  }
  .box_frame .product_logos .product_text {
    font-size: 15px;
  }
  .box_frame .product_logos .product_name {
    font-size: 11px;
  }
}

/*
 * バグ⑦: ヘッダーメニューのホバーを分かりやすくする。
 * - 下段の日本語(サービス等)は非表示にし、英語のみ常時大文字で表示。
 *   フォント・文字色は変化させない（フォント変化なし）。
 * - ホバー時はネイビーの下線が中央から伸びるアニメーション(動作)のみ。
 *   参考サイトのような色変化(黒→オレンジ)や背景・太字変化は行わない。
 * 日本語はベタテキストノードのため、aのfont-sizeを0にして隠し、
 * 英語(small)だけ明示的にサイズを与えて表示する。
 */
.l-header .header_nav .nav_list .nav_item a {
  font-size: 0;
}
.l-header .header_nav .nav_list .nav_item a small {
  font-size: 15px;
  color: #0F3870;
  text-transform: uppercase;
}
/* ホバーでフォント(大文字化)を変えていた既存挙動は常時大文字化で打ち消す */
.l-header .header_nav .nav_list .nav_item a:hover small {
  text-transform: uppercase;
}
/* 下線は中央から左右へ伸びるネイビーのアニメーション（動作のみ） */
.l-header .header_nav .nav_list .nav_item a:after {
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: #0F3870;
  opacity: 1;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-transition: width 0.3s ease;
  transition: width 0.3s ease;
}
.l-header .header_nav .nav_list .nav_item a:hover:after {
  width: 100%;
  opacity: 1;
}

/*
 * お問い合わせフォーム（contact.js による STEP1入力→STEP2確認→STEP3完了）
 * 確認画面・完了画面・入力エラー表示のスタイル。
 */
/* CF7 既定のレスポンス枠（空でも黄色枠が出る）は既定で隠し、
   入力エラー表示時（.pe-visible）のみ赤枠で表示する。 */
.contact_form .wpcf7-response-output {
  display: none;
}
/* 入力エラー（CF7 のレスポンス枠を再利用） */
.contact_form .wpcf7-response-output.pe-visible {
  display: block;
  margin: 16px 0 0;
  padding: 12px 16px;
  border: 1px solid #d33;
  border-radius: 6px;
  color: #c0392b;
  background: #fdecec;
  font-size: 14px;
  line-height: 1.6;
}

/* 確認画面 */
.pe-confirm {
  margin-top: 8px;
}
.pe-confirm-list {
  margin: 0 0 24px;
  border-top: 1px solid #e2e2e2;
}
.pe-confirm-list dt {
  margin-top: 16px;
  color: #0F3870;
  font-weight: 700;
  font-size: 14px;
}
.pe-confirm-list dd {
  margin: 4px 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e2e2;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.8;
}
.pe-confirm-note {
  margin: 0 0 20px;
  text-align: center;
  font-size: 14px;
  color: #555;
}
.pe-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  align-items: center;
}
.pe-confirm-actions .c-btn01 {
  width: auto;
  min-width: 220px;
  padding: 16px 0;
  font-size: 15px;
  cursor: pointer;
  border: 0;
}
.pe-confirm-actions .pe-back {
  min-width: 220px;
  padding: 15px 0;
  border: 1px solid #0F3870;
  border-radius: 5px;
  background: #fff;
  color: #0F3870;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}
.pe-confirm-actions .pe-back:hover {
  background: #0F3870;
  color: #fff;
}
.pe-confirm.is-sending {
  opacity: 0.7;
  pointer-events: none;
}
.pe-error {
  margin: 16px 0 0;
  padding: 12px 16px;
  border: 1px solid #d33;
  border-radius: 6px;
  color: #c0392b;
  background: #fdecec;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

/* 完了画面 */
.pe-complete {
  text-align: center;
  padding: 24px 0;
}
.pe-complete-title {
  font-size: 20px;
  font-weight: 700;
  color: #0F3870;
  margin: 0 0 16px;
}
.pe-complete-txt {
  line-height: 1.9;
  margin: 0 0 28px;
}
.pe-complete-actions {
  margin: 0;
}

/*
 * エントリーフォーム（entry.js）固有の項目スタイル
 * 必須/任意バッジ・ラジオ・ファイル入力・同意チェック。
 */
.pe-req,
.pe-any {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
  line-height: 1.4;
}
.pe-req {
  background: #c0392b;
  color: #fff;
}
.pe-any {
  background: #e2e2e2;
  color: #555;
}

/* 必須/任意バッジをラベル文字と上下中央に揃える（label は flex のため） */
.pe-form-block label {
  align-items: center;
}

/* 任意項目（電話番号）も必須項目（text/email）と同じ枠線にする */
.pe-form-block input[type="tel"] {
  width: 100%;
  border: 1px solid #ccc;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 3px;
}
.pe-form-block input[type="tel"]:focus {
  border: 2px solid #ccc;
}
@media screen and (max-width: 767px) {
  .pe-form-block input[type="tel"] {
    font-size: 16px;
  }
}

/* 就業希望時期のラジオ */
.pe-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding-top: 6px;
}
.pe-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 15px;
}
.pe-radio input {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* 経歴書ファイル入力の注意書き */
.pe-file-note {
  margin: 10px 0 0;
  padding: 12px 14px;
  background: #f7f7f7;
  border: 1px solid #e2e2e2;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.8;
  color: #555;
}

/* プライバシーポリシー同意 */
.pe-consent-block {
  text-align: center;
}
.pe-consent {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
}
.pe-consent input {
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.pe-consent-note {
  margin: 8px 0 0;
  font-size: 13px;
  color: #555;
}
.pe-consent-note a {
  color: #0F3870;
  text-decoration: underline;
}

/*
 * ヘッダー調整（全ページ共通）
 * - 「お問い合わせ」ボタンを絶対配置(left:100%でナビ右外へはみ出し)から
 *   ナビ内のインライン配置に変更し、BLOGの右に収める。
 * - これにより、ヘッダーの右端が l-main の内側に収まり、本文枠と左右が揃う。
 * - 画面を縮小してもロゴが潰れない（flex-shrink:0）。
 * - ボタン分の幅を確保するためナビ項目の左右余白を 40px→24px に微調整。
 */
.l-header .header_content {
  gap: 16px;
}
.l-header .header_logo {
  flex-shrink: 0;
}
/*
 * 要件①: スマホ(<=767px)ではPC用ナビ(.header_nav)を出さず、ハンバーガー
 * メニューのみにする。style.css は @media max-width:767px で display:none に
 * しているが、ここで無条件に display:flex を当てると打ち消されてしまうため、
 * PC幅(>=768px)に限定して適用する。
 */
@media screen and (min-width: 768px) {
  .l-header .header_nav {
    display: flex;
    align-items: center;
    gap: 20px;
  }
}
.l-header .header_nav .c-btn01 {
  position: static;
  flex-shrink: 0;
}
.l-header .header_nav .nav_list .nav_item a {
  padding: 0 24px;
}