/* 現行テーマ（/theme/css/*.css）に無いコンポーネントだけを足す層。
   読み込み順は最後なので、ここに body / main / img のような土台の指定を書くと
   現行デザインを上書きしてしまう。**土台はテーマ側の責務。ここには書かないこと。**
   （実際に main{max-width:48rem} が本文幅を潰していたため 2026-08-24 に撤去した） */

/* ---- YouTube Facade（src/plugins/rehype-components.mjs） ----
   読者が再生を押すまで YouTube へリクエストを出さない。
   サムネイルは /images/youtube/<id>.webp に自前で置く。
   画像がまだ無いあいだも再生ボタンが押せるよう、背景色を敷いておく。 */
.video-facade {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 16 / 9;
  margin: 1.5rem auto;
  background: #111;
}

.video-facade__button {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.video-facade__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-facade__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 48px;
  transform: translate(-50%, -50%);
  border-radius: 12px;
  background: rgb(0 0 0 / 70%);
}

.video-facade__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent #fff;
}

.video-facade__frame {
  width: 100%;
  height: 100%;
  border: 0;
}

.video-facade__fallback {
  display: inline-block;
  padding: 1rem;
  color: #fff;
}

/* ---- フォームのプレースホルダ ----
   動くふりをする入力欄は置かない。まだ無いことを読者に見せる。 */
.form-placeholder {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border: 1px dashed #b00;
  border-radius: 6px;
  background: #fff8f8;
}

.form-placeholder__title {
  margin: 0 0 0.5rem;
}

.form-placeholder__body {
  margin: 0;
}

/* ---- フォーム（public/api/*.php が受ける） ----
   構造とクラス（table01 / hissu / nini / privacy_link / privacy_check）は
   現行テーマのものをそのまま使っているので、装飾はテーマCSS側が当たる。
   ここに足すのは、テーマに無い3つだけ。 */

/* 1. honeypot。**必ず隠すこと。**
   見えていると実利用者が入力してしまい、受け皿が全送信を bot として弾く。
   display:none ではなく画面外へ送るのは、display:none を読み飛ばす bot がいるため。
   aria-hidden と tabindex=-1 は HTML 側で付けている。 */
.stabble-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 2. 送信ボタン。旧サイトは Contact Form 7 のプラグインCSSが当てていたが、
   そのCSSは新サイトへ運んでいない。テーマの .btn_red02 と同じ見た目に揃える。 */
.stabble-form__submit {
  display: block;
  background: #c20118;
  border: none;
  border-radius: 25px;
  max-width: 380px;
  width: 90%;
  color: #fff;
  font-size: 1.8rem;
  font-family: inherit;
  padding: 0 20px;
  line-height: 50px;
  margin: 40px auto;
  cursor: pointer;
}
.stabble-form__submit:hover {
  opacity: 0.85;
}

/* 3. テーマが装飾していない入力型。
   .table01 td は text / email / tel / textarea しか見ていない。
   url（食べログURL）・date（生年月日）・file（応募書類）が素のままになるので揃える。 */
.table01 td input[type="url"],
.table01 td input[type="date"],
.table01 td input[type="file"] {
  background-color: #fcfcfc;
  border: 1px solid #d2dadf;
  box-sizing: border-box;
  color: #555;
  font-family: inherit;
  width: 100%;
  padding: 8px;
}