@charset "utf-8";
/*
Theme Name: LIQUID PRESS Child
Theme URI: https://lqd.jp/wp/
Description: LIQUID PRESS THEME
Author: LIQUID DESIGN
Author URI: https://lqd.jp/
Template: liquid-press
Version: 9999
*/
/* Child Styles */

/* ——————————————————————————————
   Liquid Slider：画像を縦横いっぱいに表示＆高さを自動調整
————————————————————————————————— */
.wp-block-liquid-slider-slide {
  /* スライドの高さは中身（画像）の高さに合わせる */
  height: auto !important;
  overflow: hidden !important;
}

/* Coverブロック本体を“ただのコンテナ”に変える */
.wp-block-liquid-slider-slide .wp-block-cover {
  position: static        !important;
  display: block          !important;
  margin: 0               !important;
  padding: 0              !important;
  min-height: 0           !important;
  height: auto            !important;
}

/* 背景の<span>やオーバーレイは不要なら非表示 */
.wp-block-liquid-slider-slide .wp-block-cover__background,
.wp-block-liquid-slider-slide .wp-block-cover__inner-container {
  display: none           !important;
}

/* 画像本体を通常の<img>として幅100％＆高さ自動に */
.wp-block-liquid-slider-slide .wp-block-cover__image-background {
  position: static        !important;
  display: block          !important;
  width: 100%             !important;
  height: auto            !important;
  object-fit: contain     !important; /* 切れずに全体を表示したい場合 */
  /*object-fit: cover   !important;  クロップしても隙間なく埋めたい場合はこちらに */
}

/* no-arrows をつけたスライダーの矢印とナビゲーション（ドット）を非表示 */
.no-arrows .swiper-button-prev,
.no-arrows .swiper-button-next,
.no-arrows .swiper-pagination {
  display: none !important;
}

/* モーダル表示中は html に .no-scroll を付ける */
html.no-scroll{
  overflow:hidden !important;   /* これだけで背面スクロールが止まる */
  overscroll-behavior:none;     /* スマホの引っ張り反応も防ぐ */
}

/* style.css に追加 */
.responsive-video {
  width: 100%;           /* 画面幅に合わせる */
  max-width: 560px;      /* 最大幅560px */
  aspect-ratio: 16 / 9;  /* 高さは幅に合わせて自動調整 */
  margin: 0 auto;        /* 中央寄せ */
}
.responsive-video iframe {
  width: 100%;     /* ラッパーにフィット */
  height: 100%;    /* aspect-ratio に準拠 */
  border: 0;
}


/*
.my-divider {
  border-bottom: 1px solid #FFFFFF !important;
  border-top:    none                  !important;
}
*/

/* デフォルト：ロゴ下に続く普通のナビ */
.header-nav {
  position: relative;
  width: 100%;
  /* もし背景が透けて見えるなら指定 */
  background-color: #fff;
  z-index: auto;
}

/* スクロール到達後に付与するクラス */
.header-nav.is-fixed {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  /* 固定時に下のコンテンツと被らない余白調整は JS で */
}
/* すべての「id」を持つ要素のアンカー位置をヘッダー高さ分だけ下げる */
[id] {
  scroll-margin-top: 57px; /* ← ここをヘッダーの実際の高さに */
}

/* まず border‐bottom をリセット */
.wp-block-navigation-item__content.is-active {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  position: relative !important; /* 疑似要素用に親を相対位置指定 */
}

/* —————————————————————
   疑似要素で下線を描画＆アニメーション
   ————————————————————— */
.wp-block-navigation-item__content {
  position: relative; /* 疑似要素配置の基準 */
}

/* 疑似要素で下線を描画＆スローモーションアニメ */
.wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #FFF700;
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  transition: 
    transform 0.6s ease,  /* ← 0.8秒に伸ばし */
    opacity   0.6s ease;
}

.wp-block-navigation-item__content.is-active::after {
  transform: scaleX(1);
  opacity: 1;
}

/* 以下 CF7 */



/*──────────────────────────────────────────────
 A. フォーム全体の親コンテナ（枠線なし）
──────────────────────────────────────────────*/
.wpcf7-form {
  max-width: 700px;
  margin: 0 auto;
  border: none; /* 親コンテナには枠線をつけない */
}

/*──────────────────────────────────────────────
 B. 各行（.cf7-row）に「左右の枠線＋上辺の枠線」を付与し、
    最後の行だけ「下辺の枠線」も追加する
──────────────────────────────────────────────*/
/* すべての行に左右＋上辺の枠線を付ける */
.wpcf7-form .cf7-row {
  display: grid;
  grid-template-columns: 200px 1fr; /* 左：ラベル200px／右：入力欄*/
  border-left: 1px solid #ddd;      /* 左辺 */
  border-right: 1px solid #ddd;     /* 右辺 */
  border-top: 1px solid #ddd;       /* 上辺 */
  border-bottom: none;              /* 下辺は最初は消す */
  margin-bottom: 0;                 /* 行同士の間隔は枠線で表現 */
  border-radius: 0;                 /* 角丸ではなく四角に */
}

/* 最後の .cf7-row のみ「下辺の枠線」を追加 */
.wpcf7-form .cf7-rowlast {
  border-bottom: 1px solid #ddd;
}

/*──────────────────────────────────────────────
 C. ラベル部分（左カラム）
──────────────────────────────────────────────*/
.wpcf7-form .cf7-label {
  display: flex;
  align-items: center;             /* 縦方向中央揃え */
  background-color: #f7f7f7;       /* 薄いグレー背景 */
  padding: 0.75em 1em;             /* ラベル内の上下左右余白 */
  font-weight: 600;
  font-size: 0.95rem;
  color: #333;
  white-space: nowrap;             /* ラベルは折り返さない */
}

/* 必須／任意バッジ */
.wpcf7-form .required-badge,
.wpcf7-form .optional-badge {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.3em 0.5em;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 4px;
  color: #fff;
  vertical-align: middle;
}
.wpcf7-form .required-badge { background-color: #d32f2f; }
.wpcf7-form .optional-badge { background-color: #7d7d7d; }

/*──────────────────────────────────────────────
 D. 入力セル部分（右カラム）の共通スタイル
──────────────────────────────────────────────*/
/* 1) 右カラム全体に余白をつける */
.wpcf7-form .cf7-row .cf7-input {
  padding: 1.0em 1.8em; /* ボーダーとのすき間を確保 */
}

/* 2) input / textarea / select の共通スタイル */
.wpcf7-form .cf7-row .cf7-field {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #ccc;           /* 入力ボックスの枠線 */
  border-radius: 4px;                /* 四角にほんのり丸み */
  background-color: #fff;
  padding: 0.75em 1.5em 0.75em 0.75em; /* 上:0.75em／右:1.5em／下:0.75em／左:0.75em */
  font-size: 1rem;
  color: #333;
}
.wpcf7-form .cf7-row textarea.cf7-field {
  min-height: 120px;
  resize: vertical;
}
/* select のカスタム矢印 */
.wpcf7-form .cf7-row select.cf7-field {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'>\
<path fill='%23666' d='M0 0l5 6 5-6z'/></svg>")
    no-repeat right 1.5em center/10px 6px;
  padding-right: 2.5em; /* 矢印用スペース */
}

/*──────────────────────────────────────────────
 E. カナ入力行だけ横２分割にする（改訂版）
──────────────────────────────────────────────*/

/* 1) .cf7-input.cf7-kana-group の直下にある <p> を Flex コンテナ化 */
.wpcf7-form .cf7-input.cf7-kana-group > p {
  display: flex;
  gap: 2.0em;        /* ふたつの入力欄のあいだのすき間 */
  margin: 0;         /* CF7 が自動で付ける上下マージンをリセット */
}

/* 2) <p> の直下にある <span class="wpcf7-form-control-wrap"> を Flex アイテム化 */
.wpcf7-form .cf7-input.cf7-kana-group > p > .wpcf7-form-control-wrap {
  flex: 1 1 0;       /* ふたつの入力欄を均等幅に */
}

/* 3) 念のため <br> が挿入されていたら非表示に */
.wpcf7-form .cf7-input.cf7-kana-group br {
  display: none;
}

/* 4) 実際の input を横いっぱいに広げる */
.wpcf7-form .cf7-input.cf7-kana-group input.cf7-kana-field {
  width: 100%;
  box-sizing: border-box;
}



/*──────────────────────────────────────────────
 F. 送信ボタンまわりのスタイル（更新版）
──────────────────────────────────────────────*/
.wpcf7-form .cf7-row-submit {
  text-align: center;
  margin: 1.5rem 0;
}

.wpcf7-form .cf7-submit-button {
  background-color: #d32f2f;      /* 背景色を変更 */
  color: #ffffff;                /* 文字色を白に */
  border: none;
  padding: 0.8em 4em;              /* ボタンを大きく */
  font-size: 1.125rem;           /* 文字サイズを少し大きく */
  font-weight: 700;              /* 太字（ボールド） */
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.wpcf7-form .cf7-submit-button:hover {
  background-color: #b71c1c;     /* ホバー時に少し暗めの赤 */
}
/*──────────────────────────────────────────────
 G. レスポンシブ：画面幅600px未満で縦並びに戻す
──────────────────────────────────────────────*/
@media screen and (max-width: 600px) {
  .wpcf7-form .cf7-row {
    display: block; /* 行単位を縦積みに戻す */
  }
  .wpcf7-form .cf7-row .cf7-label {
    display: block;
    width: auto;
    margin-bottom: 0.5em;
    white-space: normal;
  }
  /* カナ行も縦並びに戻す */
  .wpcf7-form .cf7-input.cf7-kana-group {
    display: block;
  }
  .wpcf7-form .cf7-input.cf7-kana-group .cf7-kana-field {
    width: 100%;
    margin-bottom: 0.5em;
  }
  .wpcf7-form .cf7-input.cf7-kana-group .cf7-kana-field:last-child {
    margin-bottom: 0;
  }
}
/*──────────────────────────────────────────────
 H. ラジオボタンA（縦並び）用
──────────────────────────────────────────────*/
/* .cf7-input.radio-vertical 配下の各 .wpcf7-list-item をブロック表示に */
.wpcf7-form .cf7-input.radio-vertical .wpcf7-list-item {
  display: block;
  margin-bottom: 0.8em; /* 項目間のスペース */
}

/*──────────────────────────────────────────────
 I. ラジオボタンB（横並び）用
──────────────────────────────────────────────*/
/* .cf7-input.radio-horizontal 配下の各 .wpcf7-list-item をインラインブロックに */
.wpcf7-form .cf7-input.radio-horizontal .wpcf7-list-item {
  display: inline-block;
  margin-right: 1.5em; /* 項目間のスペース */
}

/*───────────────────────────────────────────────────────────
  ラジオボタン行の .wpcf7-radio.cf7-field を確実に上書きして
  枠線を消す  (padding も必要なら合わせて削除)
───────────────────────────────────────────────────────────*/
.wpcf7-form .cf7-row .cf7-input.radio-vertical 
  .wpcf7-form-control.wpcf7-radio.cf7-field {
  border: none !important;
  background-color: transparent !important; /* 背景も透過にしたい場合 */
  padding: 0 !important;                     /* 余白もすべてリセット */
}

/* なお、ラジオ横並び行に対して同様に枠線を消したい場合は下記を追加 */
.wpcf7-form .cf7-row .cf7-input.radio-horizontal 
  .wpcf7-form-control.wpcf7-radio.cf7-field {
  border: none !important;
  background-color: transparent !important;
  padding: 0 !important;
}

.wpcf7-form .cf7-undertext {
  padding: 1.0em 0 0 0 !important;
}
/* cf7-ud-text 内のテキストを中央揃えに */
.cf7-ud-text {
  text-align: center;
}

/* ──────────────────────────────────────────────────────────
   ツールチップ本体のスタイル（外枠あり）
────────────────────────────────────────────────────────── */
.error-tooltip {
  display: none;
  position: absolute;
  z-index: 9999;

  background-color: #fff5f5;     /* 中身の背景色 */
  border: 1px solid #f5c2c7;     /* ツールチップ本体の外枠ボーダー */
  border-radius: 6px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);

  color: #842029;
  font-size: 0.875rem;
  line-height: 1.4;
  padding: 8px 12px;
  white-space: nowrap;
}

/* ──────────────────────────────────────────────────────────
   外枠用の三角（ツールチップ下辺に“はみ出す”外枠の部分）
────────────────────────────────────────────────────────── */
.error-tooltip::before {
  content: "";
  position: absolute;
  top: 100%;                      /* 本体の下端に合わせる */
  left: 16px;                     /* 三角の横位置（本体の左端から16pxの位置） */
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #f5c2c7;  /* 外枠の色 */
}

/* ──────────────────────────────────────────────────────────
   本体背景色用の三角（外枠の内側に重ねる）
────────────────────────────────────────────────────────── */
.error-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;                       /* 本体の下端に合わせる */
  left: 16px;                      /* 外枠用と同じ位置に揃える */
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #fff5f5;   /* 本体背景色と同じ色 */
}
/* 入力欄を赤枠に */
.cf7-error-border { border: 2px solid #d32f2f !important; }

/* エラーメッセージ（行の一番下） */
.cf7-error-msg {
  display: block;
  margin-top: .4em;
  font-size: .85rem;
  color: #d32f2f;
  font-weight: 600;
}


/* ■ 編集ボタンを確実に青に（!important で上書き） */
.cf7-btn-edit{
  background:#1976d2 !important;
  color:#fff         !important;
}
.cf7-btn-edit:hover{
  background:#115ab0 !important;
}

/*  =====  確認画面専用：ラベル・値を縦中央  =====  */
#cf7-confirm-container .cf7-row          { display:grid; align-items:center; }
#cf7-confirm-container .cf7-label        { display:flex; align-items:center; }
#cf7-confirm-container .cf7-input        { display:block; }   /* 横並び解除 */

/* ──────────────────────────────────────────────────────────
   確認画面専用：スマホ幅で入力画面と同じ縦積みレイアウトに戻す
────────────────────────────────────────────────────────── */
@media screen and (max-width: 600px) {
  /* .cf7-row 全体を縦積みに戻す */
  #cf7-confirm-container .cf7-row {
    display: block !important;
  }
  /* ラベルもブロックにして幅自動、下マージンを入れる */
  #cf7-confirm-container .cf7-row .cf7-label {
    display: block !important;
    width: auto;
    margin-bottom: 0.5em;
    white-space: normal;
  }
  /* 値側（.cf7-input）もブロックにして幅100% */
  #cf7-confirm-container .cf7-row .cf7-input {
    display: block !important;
    width: 100%;
  }
}


/* ──────────────────────────────────────────────
   プログレスバー：シンプルな四角いボックス表示
   ────────────────────────────────────────────── */

.progress-steps {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2em 0;            /* 上下の余白 */
  font-family: Arial, sans-serif;
  font-size: 0.9rem;
}

/* 各ステップの共通スタイル */
.progress-steps .step {
  flex: 1;                  /* 横幅を均等に分割 */
  text-align: center;
  padding: 0.75em 0;        /* 上下の余白 */
  background-color: #EEE;   /* 未完了ステップの背景色 */
  color: #777;              /* 未完了ステップの文字色 */
  border: 1px solid #CCC;   /* 淡いグレーの枠線 */
  margin-left: -1px;        /* ボーダー重複を防ぎ、境界をつなぐ */
  position: relative;       /* 角丸指定のため */
}

/* 最初のステップだけ左の余分なマージンを消す */
.progress-steps .step:first-child {
  margin-left: 0;
}


.progress-steps .step.active {
  background-color: #8E44AD; /* 落ち着いたパープル */
  color: #FFF;               /* 文字色は白でコントラストを確保 */
  font-weight: bold;
  border: 1px solid #732D91; /* ふちを少し濃い紫に */
}


/* 左右の角だけ丸くする（全体を四角く見せたい場合は border-radius を外せます） */
.progress-steps .step:first-child {
  border-radius: 4px 0 0 4px;
}
.progress-steps .step:last-child {
  border-radius: 0 4px 4px 0;
}

/* 中間ステップは角丸不要なら上記を外すか、以下で上書き可能 */
/* .progress-steps .step:not(:first-child):not(:last-child) {
     border-radius: 0;
   }
*/
/* ──────────────────────────────────────────────────────────
   確認画面専用：ラベル・値を縦中央ではなく、高さを行全体にストレッチ
────────────────────────────────────────────────────────── */
#cf7-confirm-container .cf7-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: stretch; /* ← 行の高さを右カラムに合わせる */
}

/* 左カラム：背景を伸ばすために100%指定しつつ、中の文字は中央に揃える */
#cf7-confirm-container .cf7-label {
  height: 100%;               /* ← 背景を右カラムの高さに合わせる */
  display: flex;
  align-items: center;        /* ← テキストを縦中央に */
  padding: 0.75em 1em;
  background-color: #f7f7f7;
  font-weight: 600;
  font-size: 0.95rem;
  color: #333;
  white-space: nowrap;
  box-sizing: border-box;
}

/* 右カラム：縦中央に揃えたいなら display:flex を指定 */
#cf7-confirm-container .cf7-input {
  padding: 1.0em 1.8em;
  box-sizing: border-box;
  word-break: break-word;
  white-space: pre-wrap;

  display: flex;             /* ← これを追加 */
  align-items: center;       /* ← これで本文も縦中央に揃う */
}