/*
  component.css
  サイト全体で使い回すパーツ(ヘッダー・フッター・ナビゲーション・ボタン・カードなど)のスタイルをまとめるファイル。
  特定のページ専用ではなく、複数のテンプレートで共通して使うコンポーネントをここに書く。
*/

/* ===== リサイズ中のtransition無効化 ここから ===== */
/* 不要になった場合はこのブロックとjs/common.js内の該当ブロックを削除すればOK */
.resize-transition-off,
.resize-transition-off * {
  transition: none !important;
}
/* ===== リサイズ中のtransition無効化 ここまで ===== */

/* ===== スクロールでフワッと表示(reveal) ここから ===== */
/* 不要になった場合はこのブロックとjs/common.js内の該当ブロックを削除すればOK */
.reveal,
.reveal-left,
.reveal-right {
  opacity: 0;
  transition:
    opacity 0.7s ease-out,
    transform 0.7s ease-out;
}

/* 下からフワッと(デフォルト) */
.reveal {
  transform: translateY(24px);
}

/* 左からフワッと */
.reveal-left {
  transform: translateX(-40px);
}

/* 右からフワッと */
.reveal-right {
  transform: translateX(40px);
}

.reveal.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}
/* ===== スクロールでフワッと表示(reveal) ここまで ===== */

/* ===== 共通コンテナ ここから ===== */
/* 不要になった場合はこのブロックを削除すればOK。front-page.php・single-works.php・archive-works.phpで使用 */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 10px;
}
/* ===== 共通コンテナ ここまで ===== */

/* ===== スクリーンリーダー専用テキスト ここから ===== */
/* 不要になった場合はこのブロックを削除すればOK。ページネーションのprev_text/next_textなどで使用 */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
/* ===== スクリーンリーダー専用テキスト ここまで ===== */

/* ===== カテゴリーバッジ ここから ===== */
/* 不要になった場合はこのブロックを削除すればOK。archive-works.php・taxonomy-works_category.php・front-page.phpで使用 */
.post-category {
  display: inline-block;
  background-color: #000;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 6px 14px;
  line-height: 1;
  margin-right: 10px;
}

/* カテゴリーごとの色分け(スラッグをクラス名として利用)。archive-works.css内の.category_link_listタブとも色を揃えている */
.post-category.business {
  background-color: #3f955b;
}

.post-category.work {
  background-color: #ec5f20;
}

.post-category.study {
  /* 背景が薄い色のため、白文字だと読みにくくなるので文字色を黒に変更 */
  background-color: #def9e5;
  color: #111;
}
/* ===== カテゴリーバッジ ここまで ===== */

/* ===== フッター ここから ===== */
/* 不要になった場合はこのブロックを削除すればOK */
.site-footer {
  padding: 50px 0;
  text-align: center;
}
/* ===== フッター ここまで ===== */

/* ===== 黒背景ボタン(ホバーで白背景反転) ここから ===== */
/* 不要になった場合はこのブロックを削除すればOK。single-works.php「一覧に戻る」・front-page.php「一覧を見る」で使用 */
.btn-black {
  display: inline-block;
  text-align: center;
  background-color: #000;
  border: 1px solid #000;
  color: #fff;
  transition: 0.3s ease;
}

.btn-black:hover {
  background-color: #fff;
  color: #000;
  border: 1px solid #000;
}

/* ボタンを中央寄せするための共通ラッパー */
.btn-black-wrap {
  margin: 0 auto;
  text-align: center;
}

@media (min-width: 769px) {
  .btn-black {
    width: 350px;
    max-width: 100%;
    height: 85px;
    line-height: 85px;
  }
}

@media (max-width: 768px) {
  .btn-black {
    width: 100%;
    max-width: 206px;
    padding: 5px 0;
  }
}
/* ===== 黒背景ボタン ここまで ===== */

/* ===== サイトロゴ(ヘッダー) ここから ===== */
/* 不要になった場合はこのブロックとheader.php内のh1タグ・imgタグを削除すればOK */
.site-title-heading {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  font-weight: normal;
}

.site-title-logo {
  max-width: 200px;
  width: 100%;
  height: auto;
}
/* ===== サイトロゴ ここまで ===== */

/* ===== グローバルナビゲーション ここから ===== */
/* 不要になった場合はこのブロックとheader.php内の該当箇所・js/common.jsを削除すればOK */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  padding: 0 20px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: transparent;
}

@media (max-width: 768px) {
  .site-main {
    padding-top: 50px;
  }

  /* モバイルはヘッダー背景を白のまま維持(PCのみ透明にするため) */
  .site-header {
    background: #fff;
  }
}

/* PC: 固定ヘッダーに本文が隠れないよう、ヘッダーの高さ分だけ上に余白を確保。
   トップページはメインビジュアルをヘッダーの奥まで見せる意図があるため、.homeの時だけ除外する */
@media (min-width: 769px) {
  .site-main {
    padding-top: 60px;
  }

  .home .site-main {
    padding-top: 0;
  }
}

/* PC: 横並びメニュー */
.global-nav-list {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  padding: 0 10px;
}

.global-nav-list a {
  font-weight: bold;
}

/* PC限定: liとaにナビの高さいっぱいの領域を持たせ、クリックできる範囲を広げる */
/* (モバイルはフルスクリーンの縦積みメニューのため、height:100%を当てると崩れるのでPCのみに限定) */
@media (min-width: 769px) {
  .global-nav-list li {
    height: 100%;
  }

  .global-nav-list a {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 4px;
  }
}

/* ハンバーガーボタン(PCでは非表示) */
.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* 3本線それぞれの位置を絶対配置で固定し、X変形時に中心で確実に交差するようにする */
.nav-toggle span {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #111;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease,
    top 0.3s ease;
}

/* スマホ: ハンバーガーメニュー + フルスクリーンナビ */
@media (max-width: 768px) {
  .site-header {
    min-height: 50px;
    padding: 0 10px;
  }

  .nav-toggle {
    display: block;
    position: fixed;
    top: 17px; /* ヘッダー高さ50pxに対してアイコン(高さ16px)を上下中央配置 */
    right: 30px;
    width: 22px;
    height: 16px;
    z-index: 1001;
  }

  .nav-toggle span:nth-child(1) {
    top: 0;
  }

  .nav-toggle span:nth-child(2) {
    top: 7px;
  }

  .nav-toggle span:nth-child(3) {
    top: 14px;
  }

  /* ハンバーガー→バツ(X)への変形。2本を同じ位置に揃えてから回転させ、中心で交差させる */
  .nav-toggle.is-active span:nth-child(1) {
    top: 7px;
    transform: rotate(45deg);
  }

  .nav-toggle.is-active span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle.is-active span:nth-child(3) {
    top: 7px;
    transform: rotate(-45deg);
  }

  .global-nav-list {
    position: fixed;
    inset: 0;
    z-index: 1000;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    padding-top: 70px;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
    /* 閉じる時はvisibilityの切り替えを0.4s遅らせ、アニメーションが終わってから非表示にする */
    transition:
      transform 0.4s ease,
      opacity 0.4s ease,
      visibility 0s linear 0.4s;
  }

  .global-nav-list.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    /* 開く時はvisibilityを即座に切り替えて表示する */
    transition:
      transform 0.4s ease,
      opacity 0.4s ease,
      visibility 0s linear 0s;
  }

  .global-nav-list li {
    text-align: center;
  }

  .global-nav-list li a {
    display: block;
    padding: 20px 0;
    border-bottom: 1px solid #111;
  }

  /* 最後の項目にはborder-bottomなし */
  .global-nav-list li:last-child a {
    border-bottom: none;
  }
}
/* ===== グローバルナビゲーション ここまで ===== */

/* ===== PC: スクロールでヘッダー配色を切り替え ここから ===== */
/* 不要になった場合はこのブロックとjs/common.js内の該当ブロックを削除すればOK */
@media (min-width: 769px) {
  .site-header {
    transition: background-color 0.4s ease;
  }

  .global-nav-list a {
    color: #fff;
    transition: color 0.4s ease;
  }

  /* .site-headerのpadding(右20px)を打ち消す分だけ右にはみ出させ、内側にpadding-rightを入れ直すことで、
     テキストの位置は変えずにborderの右端だけ画面右端に届かせる */
  .global-nav-list {
    height: 100%;
    box-sizing: border-box;
    margin-right: -20px;
    padding-right: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #fff;
    transition: border-color 0.4s ease;
  }

  /* メインビジュアルを通過したらjs/common.jsが付与するクラス */
  .site-header.is-scrolled {
    background-color: #fff;
  }

  .site-header.is-scrolled .global-nav-list {
    border-color: transparent;
  }

  .site-header.is-scrolled .global-nav-list a {
    color: #111;
  }
}
/* ===== PC: スクロールでヘッダー配色を切り替え ここまで ===== */

/* ===== お問合せフォーム(contact_table) ここから ===== */
/* chiburutechpro.com/contact/のcontact_tableを参考に実装。front-page.php・page-confirm.phpで使用するため共通化 */
/* 不要になった場合はこのブロックを削除すればOK */
table.contact_table {
  width: 100%;
  margin: 0 auto 30px;
}

table.contact_table tr th {
  font-weight: 700;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

table.contact_table tr th span.required {
  background-color: #ff2b2b;
  color: #fff;
  padding: 0 8px;
  font-size: 0.75rem;
  font-weight: 700;
  margin-left: 12px;
}

/* 入力欄共通(グレーの塗りつぶし → フォーカスで白に) */
.wpcf7-form-control-wrap input[type="text"],
.wpcf7-form-control-wrap input[type="email"],
.wpcf7-form-control-wrap input[type="tel"],
.wpcf7-form-control-wrap textarea {
  border: 1px solid #d9d9d9;
  background-color: #d9d9d9;
  padding: 22px 30px;
  font-size: 1.1rem;
  width: calc(100% - 62px);
  border-radius: 2px;
  box-sizing: content-box;
  transition: background-color 0.2s ease;
}

.wpcf7-form-control-wrap input[type="text"]:focus,
.wpcf7-form-control-wrap input[type="email"]:focus,
.wpcf7-form-control-wrap input[type="tel"]:focus,
.wpcf7-form-control-wrap textarea:focus {
  background-color: #fff;
}

/* ラジオボタン(独自デザイン) */
.wpcf7-radio input[type="radio"] {
  opacity: 0;
  position: absolute;
}

.wpcf7-radio .wpcf7-list-item {
  display: block;
  margin: 0 0 12px 0;
}

.wpcf7-radio .wpcf7-list-item:last-child {
  margin-bottom: 0;
}

.wpcf7-radio .wpcf7-list-item-label {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.wpcf7-radio .wpcf7-list-item-label::before {
  content: "";
  width: 20px;
  height: 20px;
  background: #fff;
  border: 1px solid #b3b3b3;
  border-radius: 100%;
  margin-right: 10px;
  flex-shrink: 0;
}

.wpcf7-radio input[type="radio"]:checked + .wpcf7-list-item-label::before {
  background-color: #ff2b2b;
  box-shadow: 0 0 0 3px #fff inset;
}

/* 個人情報の取扱いについて(acceptance) */
.wpcf7-form-control-wrap .wpcf7-acceptance input[type="checkbox"] {
  display: none;
}

.wpcf7-acceptance .wpcf7-list-item-label {
  position: relative;
  height: 24px;
  line-height: 24px;
  padding-left: 30px;
  display: inline-block;
  cursor: pointer;
}

.wpcf7-acceptance .wpcf7-list-item-label::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid #b3b3b3;
  border-radius: 20px;
  background: #fff;
  position: absolute;
  left: 0;
  top: 7px;
  box-sizing: border-box;
}

.wpcf7-acceptance
  input[type="checkbox"]:checked
  + .wpcf7-list-item-label::after {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background-color: #ff2b2b;
  position: absolute;
  left: 3px;
  top: 9.5px;
  border-radius: 50%;
}

.wpcf7-list-item-label a {
  text-decoration: underline;
  color: inherit;
}

.wpcf7-list-item-label a:hover {
  text-decoration: none;
}

/* PC: thとtdを横並びに */
@media screen and (min-width: 768px) {
  table.contact_table tr {
    display: grid;
    grid-template-columns: 0.5fr 1fr;
    justify-content: flex-start;
    align-items: center;
  }

  table.contact_table tr th {
    padding: 25px 0;
  }

  table.contact_table tr td {
    padding: 25px 0;
  }

  table.contact_table tr:first-child th,
  table.contact_table tr:first-child td {
    padding: 20px 0 25px;
  }
}

/* スマホ: thとtdを縦積みに */
@media screen and (max-width: 767px) {
  table.contact_table {
    width: 100%;
    margin: 20px auto 0;
  }

  table.contact_table tr {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 20px;
    padding-bottom: 20px;
  }

  table.contact_table tr td {
    padding: 25px 0;
  }
}

/* 送信/確認ボタン(chiburutechpro.com/contact/の.wpcf7-submitを参考。配色はこのサイトの黒基調に変更) */
.wpcf7-submit {
  display: block;
  width: 100%;
  max-width: 433px;
  margin: 20px auto;
  box-sizing: border-box;
  text-align: center;
  padding: 22px 40px;
  background-color: #000;
  color: #fff;
  border: 2px solid #000;
  border-radius: 2px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: 0.3s ease;
}

.wpcf7-submit:hover {
  background-color: #fff;
  color: #000;
}

/* CF7標準の送信中スピナーを非表示 */
.wpcf7-spinner {
  display: none;
}
/* ===== お問合せフォーム ここまで ===== */