@charset "UTF-8";
/* ==========================================================================
   WordPress化にあたっての追加スタイル

   静的納品のCSS（common.css / pages/*.css）は静的側の管理物なので触らず、
   WordPress・Contact Form 7 が出力する要素に対する調整だけをここに置く。
   ========================================================================== */

/* --------------------------------------------------------------------------
   Contact Form 7 の出力調整
   -------------------------------------------------------------------------- */

/*
 * CF7は各フォームコントロールを <span class="wpcf7-form-control-wrap"> で包む。
 * span（インライン）のままだと中の input の width:100% が意図通りに効かないため
 * ブロック化して、静的納品の .form-field 直下に input があった状態に揃える。
 */
.wpcf7-form-control-wrap {
  display: block;
}

/* CF7のフォーム自体に .contact-form__fields を付与しているため、
   バリデーションメッセージもflexアイテムとして最後に並ぶ */
.wpcf7-response-output {
  margin: 0;
  padding: 16px 20px;
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  background-color: var(--color-white);
  font-size: 1.5rem;
  line-height: 1.7;
  color: var(--color-heading);
}

/* 各項目のエラーメッセージ */
.wpcf7-not-valid-tip {
  margin-top: 8px;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-primary);
}

.form-field__input.wpcf7-not-valid,
.form-field__textarea.wpcf7-not-valid {
  border-color: var(--color-primary);
}

/* 送信処理中のスピナー位置 */
.wpcf7-spinner {
  display: block;
  margin: 16px auto 0;
}

/* 送信中はボタンを操作不可に見せる */
.wpcf7-form.submitting .contact-form__submit {
  opacity: 0.6;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   送信前の最終確認ダイアログ

   確認画面ページを作らない代わりに、必須項目のバリデーション通過後に
   「この内容で送信しますか？」を出す。<dialog> を使うことで
   フォーカストラップ・Escでの閉じる・背面の不活性化をブラウザ標準に任せる。
   -------------------------------------------------------------------------- */
/*
 * 閉じているときは必ず隠す。
 *
 * common.css のリセットに `dialog { display: block; }` が含まれており、
 * これがブラウザ標準の `dialog:not([open]) { display: none; }` を打ち消してしまう。
 * （作成者スタイルはユーザーエージェントスタイルより常に優先されるため）
 * その結果 close() してもダイアログ本体が表示され続け、
 * トップレイヤーから外れる backdrop だけが消える状態になる。
 * common.css は静的側の管理物なので触らず、ここで打ち消しておく。
 */
.confirm-dialog:not([open]) {
  display: none;
}

.confirm-dialog {
  width: min(90vw, 520px);
  padding: 0;
  border: none;
  border-radius: 8px;
  background-color: var(--color-white);
  color: var(--color-heading);
  box-shadow: 0 12px 40px rgba(24, 41, 74, 0.25);
}

.confirm-dialog::backdrop {
  background-color: rgba(24, 41, 74, 0.5);
}

.confirm-dialog__inner {
  padding: 40px 32px 32px;
  text-align: center;
}

.confirm-dialog__title {
  font-family: var(--font-heading-jp);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-navy);
}

.confirm-dialog__text {
  margin-top: 12px;
  font-size: 1.5rem;
  line-height: 1.8;
  color: var(--color-text);
}

.confirm-dialog__actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}

.confirm-dialog__button {
  min-width: 140px;
  padding: 12px 24px;
  border: 1px solid var(--color-navy);
  border-radius: 999px;
  font-family: var(--font-heading-jp);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.confirm-dialog__button--cancel {
  background-color: var(--color-white);
  color: var(--color-navy);
}

.confirm-dialog__button--cancel:hover {
  background-color: #EFF1F4;
}

.confirm-dialog__button--submit {
  background-color: var(--color-navy);
  color: var(--color-white);
}

.confirm-dialog__button--submit:hover {
  background-color: var(--color-text);
}

@media (max-width: 768px) {
  .confirm-dialog__inner {
    padding: 32px 20px 24px;
  }

  .confirm-dialog__title {
    font-size: 1.8rem;
  }

  .confirm-dialog__text {
    font-size: 1.4rem;
  }

  .confirm-dialog__actions {
    flex-direction: column-reverse;
    gap: 12px;
  }

  .confirm-dialog__button {
    width: 100%;
  }
}

/* ==========================================================================
   OSの「アニメーションを減らす」設定への対応を解除する

   pages/top.css が prefers-reduced-motion: reduce のときに
   .vision__card-deco の回転を止めているが、この設定が入った環境で
   サイトの見せ場が静止してしまうため、全環境で動かす方針になった。
   静的側の pages/*.css は触らない運用のため、ここで打ち消している。
   （スライド類の同様の分岐は assets/js/script.js 側で解除済み）
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .vision__card-deco {
    animation: vision-rotate 24s linear infinite;
  }
}

/* ==========================================================================
   採用ページの「準備中」表示

   静的納品には無いブロックで、本来のコンテンツを公開するまでの仮置き。
   公開時は page-recruit.php のコメントアウトを外し、この指定も不要になる。
   ========================================================================== */
.recruit-preparing {
  padding: 120px 0 140px;
}

.recruit-preparing__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 70px;
  text-align: center;
}

.recruit-preparing__text {
  font-family: var(--font-heading-jp);
  font-size: 2rem;
  font-weight: 700;
  line-height: 2;
  color: var(--color-navy);
}

@media (max-width: 768px) {
  .recruit-preparing {
    padding: 70px 0 90px;
  }

  .recruit-preparing__inner {
    padding: 0 20px;
  }

  .recruit-preparing__text {
    font-size: 1.6rem;
    line-height: 1.9;
  }
}

/* ==========================================================================
   FACEBOOKセクション

   静的納品では公式SDKの fb-like / fb-share-button / fb-page に任せており、
   見た目はFacebookが描画していたのでCSSを持っていなかった。
   iframe 直接埋め込みへ切り替えたことで、ボタンとリンクが自前の要素になり
   ここで見た目を持つ必要が出た。経緯は front-page.php のコメントを参照。

   高さは front-page.php の iframe の height 属性と必ず揃える。
   ========================================================================== */
.facebook__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 3px;
  background-color: #1877F2;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-white);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.facebook__action:hover {
  background-color: #166FE5;
}

/* ヘッダー・フッターと共通のFacebookアイコン（白塗り）をそのまま使う */
.facebook__action-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.facebook__iframe {
  display: block;
  width: 100%;
  max-width: 500px;
  /* Facebookが返す中身（ページ名・フォロワー数・フォローボタン）は132px。
     投稿一覧はMeta側の都合で表示されないため、それ以上の高さは白地になるだけ。
     8pxだけ余裕を見て140pxにしてある。front-page.php の height と必ず揃える。 */
  height: 140px;
  /* 白地が背景から浮かないよう、枠線で囲っておく */
  border: 1px solid #DDE1E7;
  border-radius: 4px;
  background-color: var(--color-white);
}

/* Facebookページへ移動するボタンは置いていない。
   枠の中のフォローボタンから同じページへ行けるため。 */

/* --------------------------------------------------------------------------
   横並び時に INFORMATION 列と FACEBOOK 列の高さを揃える

   top.css の .info-fb__inner は align-items: flex-start で各列が中身なりの
   高さになる。静的納品の top.css は触らない運用のため、ここで打ち消している。

   Facebookから返ってくる中身は132pxしかないので、INFORMATION列（約685px）に
   合わせると枠の中に300px前後の空白が出る。これは承知のうえで、
   参考サイト（shimura-dental.jp）と同じ「高さを固定して空白を許容する」形に
   揃える方針として決まったもの。

   お知らせの件数でINFORMATION列の高さは変わるため、高さの固定値は持たせず
   flexbox で追従させている。

   1080px以下は縦積みになり揃える相手がいないので、枠は中身なりの140pxのまま。
   -------------------------------------------------------------------------- */
@media (min-width: 1081px) {
  .info-fb__inner {
    align-items: stretch;
  }

  .facebook {
    display: flex;
    flex-direction: column;
  }

  /* 余った高さを枠が吸収する。min-height は、お知らせが極端に少なく
     INFORMATION列のほうが短くなった場合に枠が潰れないための下限。 */
  .facebook__embed {
    flex: 1 1 auto;
    min-height: 140px;
  }

  .facebook__iframe {
    height: 100%;
  }
}