/*
 Theme Name: Hello Elementor Child
 Template: hello-elementor
*/
/* =========================================
   1) ヘッダーを最前面に固定（動画の上に重ねる）
   ========================================= */
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;            /* 必要に応じて上げる */
  background: ffffff8a;  /* 半透明にしたい場合は rgba(...) に */
  width: 100%;
}

/* 管理バー表示時の補正（WordPressログイン中のみ） */
body.admin-bar #site-header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar #site-header { top: 46px; }
}

/* =========================================
   2) トップページ（page-id-12）では重ねる
      それ以外のページでは余白を追加
   ========================================= */
body:not(.page-id-12) {
  --header-h: 80px; /* 実際のヘッダー高さに合わせる */
  padding-top: var(--header-h);
}

/* =========================================
   3) FV（動画）セクションがヘッダーの下にくるように
   ========================================= */
.page-id-12 .fv-hero {
  position: relative;
  z-index: 1;        /* ヘッダー(9999)より低く */
  margin-top: 0;     /* 被りを調整 */
  /* 全画面表示する場合は以下を有効化
  min-height: 100vh;
  */
}

/* =========================================
   4) ページ内リンクのズレ防止（任意）
   ========================================= */
[id] { scroll-margin-top: 80px; }

.fadein {
  opacity: 0;
  transform: translateY(100px);
  transition: transform 2s cubic-bezier(0.25, 1, 0.5, 1),
              opacity 2s ease;
}

.fadein.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Elementor編集画面ではフェードイン無効化して常に見えるように */
.elementor-editor-active .fadein,
.elementor-editor-active .fadein.visible {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

#site-header .menu > li > a {
  position: relative;
  color: #222; /* 通常の文字色 */
  transition: color 0.3s ease;
}

#site-header .menu > li > a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 1px;
  background: currentColor;
  transform: translateX(-50%); /* ← 中央基準にする */
  transition: width 0.25s ease;
}

/* ▼ ホバー＆現在ページ */
#site-header .menu > li > a:hover,
#site-header .menu > li.current-menu-item > a {
  color: #b05e0c; /* ホバー時の文字色（例：赤系） */
}

#site-header .menu > li > a:hover::after,
#site-header .menu > li.current-menu-item > a::after {
  width: 80%;
  background: #b05e0c; /* ホバー時の下線色 */
  height: 2px; /* ホバー時の線の太さ */
}

.fade-bg {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.fade-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(237,233,224,1) 100%);
  pointer-events: none;
}

/* 画像ボックス用：ホバーでズーム */
.zoom-image .elementor-image-box-img {
  overflow: hidden; /* 枠からはみ出さない */
}

.zoom-image .elementor-image-box-img img {
  transition: transform 0.5s ease; /* アニメーションの速度 */
  transform-origin: center center;
}

.zoom-image:hover .elementor-image-box-img img {
  transform: scale(1.1); /* 1.1〜1.2くらいで好みの拡大率に */
}

/* デフォルトでは非表示（PC用） */
.sp-br {
  display: none;
}

/* スマホでのみ表示 */
@media (max-width: 767px) {
  .sp-br {
    display: inline;
  }
}

/* 左から徐々に見えるアニメーション（2秒遅延） */
.reveal-left {
  position: relative;
  overflow: hidden;
}

.reveal-left img {
  display: block;
  width: 100%;
  clip-path: inset(0 100% 0 0); /* 初期状態：右端までマスクして非表示 */
  animation: revealLeft 1.2s ease-out 2s forwards; /* ← 2sが遅延時間 */
}

@keyframes revealLeft {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

#cart-box {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #fff;
  border: 1px solid #ccc;
  padding: 14px 18px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.6;
  z-index: 999;
  width: 200px;
}

.wpcf7 form .wpcf7-response-output {
  display: none !important;
}

/* ラベル行の体裁 */
.order-form p {
  position: relative;
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.6;
}

/* 必須バッジ（その<p>の中に「必須」入力がある場合だけバッジ表示） */
.order-form p:has(.wpcf7-validates-as-required)::after {
  content: "必須";
  position: absolute;
  top: 16px;
  right: 11px;
  transform: translateY(-4px);
  display: inline-block;
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  background: #e02424;   /* 赤 */
  color: #fff;
}

/* 任意バッジ（任意なら見せたい場合） */
.order-form p:has(.wpcf7-form-control):not(:has(.wpcf7-validates-as-required))::after {
  content: "任意";
  position: absolute;
  top: 16px;
  right: 11px;
  transform: translateY(-4px);
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 10px;
  background: #eee;
  color: #555;
}

/* 「送信する」ボタン部分（.wpcf7-submit を含む段落）には任意バッジを表示しない */
.order-form p:has(.wpcf7-submit)::after {
  content: none !important;
  display: none !important;
}

/* 入力の見た目（任意） */
.order-form input[type="text"],
.order-form input[type="tel"],
.order-form input[type="email"],
.order-form textarea {
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.order-form input:focus,
.order-form textarea:focus {
  border-color: #222;
  box-shadow: 0 0 0 3px rgba(0,0,0,.08);
}

/* CF7のエラー表示（赤枠・メッセージ） */
.order-form .wpcf7-not-valid {
  border-color: #e02424 !important;
  box-shadow: 0 0 0 3px rgba(224,36,36,.12);
}
.order-form .wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: 12px;
  color: #e02424;
}

/* プルダウンをテキストボックスと同じ見た目に */
.order-form select {
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* フォーカス時の見た目（inputと統一） */
.order-form select:focus {
  border-color: #222;
  box-shadow: 0 0 0 3px rgba(0,0,0,.08);
}

/* エラー時（赤枠・影）も同様に */
.order-form select.wpcf7-not-valid {
  border-color: #e02424 !important;
  box-shadow: 0 0 0 3px rgba(224,36,36,.12);
}


/* ===== 送信ボタン（共通） ===== */
.order-form input.wpcf7-submit,
.order-form button.wpcf7-submit,
#cf7-submit {
  display: inline-block;
  width: 100%;
  max-width: 150px;
  margin: 16px auto 0;
  padding: 14px 0;
  background: #92836C;         /* 背景色 */
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.05em;
  border: none;
  border-radius: 50px;       /* 角丸 */
  cursor: pointer;
  transition: all 0.25s ease;
}

/* ===== ホバー・クリック時 ===== */
.order-form input.wpcf7-submit:hover,
#cf7-submit:hover {
  background: #bdb2a1;
}
.order-form input.wpcf7-submit:active,
#cf7-submit:active {
  transform: translateY(0);
  box-shadow: none;
}

/* ===== 無効状態（送信中など） ===== */
.order-form input.wpcf7-submit[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ===== レイアウト調整（中央寄せなど） ===== */
.order-form p:has(.wpcf7-submit) {
  text-align: center;
  margin-top: 24px;
}

.wpcf7-spinner {
  display: none !important;
}

/* ==============================
   スマホ拡大防止＆フォーム見やすさ調整
   ============================== */

@media (max-width: 768px) {
  .order-form input[type="text"],
  .order-form input[type="email"],
  .order-form input[type="tel"],
  .order-form input[type="number"],
  .order-form input[type="url"],
  .order-form input[type="password"],
  .order-form select,
  .order-form textarea {
    font-size: 16px !important;  /* ← Safariズーム防止の核心 */
    line-height: 1.6;
    padding: 12px 14px;
    border-radius: 8px;
  }

  /* フォーカス時のズーム抑止と安定したレイアウト */
  .order-form input:focus,
  .order-form textarea:focus {
    border-color: #111;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,0,0,.1);
  }

  /* 必須・任意バッジの位置補正（スマホだと行折れ防止） */
  /*.order-form p:has(.wpcf7-form-control)::after {
    top: 2px;
    right: 2px;
    transform: none;
    font-size: 11px;
    padding: 2px 6px;
  }*/

  /* 送信ボタンの間隔調整 */
  .order-form p:has(.wpcf7-submit) {
    margin-top: 24px !important;
  }
}

/* PCでも読みやすく統一したい場合（任意） */
.order-form input,
.order-form textarea {
  -webkit-text-size-adjust: 100%; /* iOS Safariの自動ズーム抑止 */
  font-family: inherit;
  box-sizing: border-box;
}

/* TOPの4並びに文字を縦書き */
.tategaki {
    writing-mode: vertical-rl;
}

/* 通常：暗く（明るさ50%）＋ふわっと切替のトランジションを定義 */
.overlay-fade.e-con::before,
.overlay-fade .e-con-inner::before {
  transition: filter .3s ease-in-out, opacity .3s ease-in-out;
  filter: brightness(.5) !important;  /* Elementorのインライン指定に勝つ */
  will-change: filter, opacity;
}

/* ホバー：明るく（明るさ100%） */
.overlay-fade:hover.e-con::before,
.overlay-fade:hover .e-con-inner::before {
  filter: brightness(1) !important;
}

.overlay-link {
  position: absolute;
  inset: 0;
  z-index: 5; /* オーバーレイより上に */
  display: block;
}

.strike-red {
  text-decoration: line-through;
  text-decoration-color: #b92727;
  text-decoration-thickness: 2px; /* お好み、なくてもOK */
}

/* テキストリンクの色変更無効 */
.elementor-widget-text-editor a {
  color: inherit;
  text-decoration: none;
}
.elementor-widget-text-editor a:hover {
  color: inherit;
  text-decoration: none;
}