@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/* ページ横幅と下の隙間調整 */
body.public-page {
	margin-bottom: unset;
}
#footer {
	padding-bottom: 3rem;
}
@media screen and (max-width: 1023px) {
	#footer {
		padding-bottom: 3rem;
    }
}
#main {
  width: 1000px !important;
  margin: 0 auto !important;
}
@media screen and (max-width: 1023px) {
  #main {
    width: auto !important;
  }
}

/* リンク色（Cocoonのリンク装飾を上書き） */
#content a {
	color: #1D7AB8 !important;
	text-decoration: none !important;
}
#content a:hover {
	color: #0F4C75 !important;
	text-decoration: none !important;
}
#footer a {
	text-decoration: none !important;
}
#footer a:hover {
	text-decoration: none !important; 
}

/* 故障直し */
.su-heading-inner:has(#tokusyusyokai) {
	display: block;
}
.su-heading-inner:has(#tokusyusyokai) h2 {
	background-color: #9dc3e6 !important;
	color: #1e3c72 !important;
}


/* =====================================================================
   チャットBOX用
   ===================================================================== */

/* --- 共通：1行分のブロック ---
   .mbbackr10 の有無に依存しないよう、各行自体に幅と中央寄せを持たせています */
.chat-box,
.chat-box2 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 22px auto;
  max-width: 720px;
}
 
/* お客様側（右寄せ）は左右反転 */
.chat-box2 {
  flex-direction: row-reverse;
}
 
/* --- アイコン画像 --- */
.chat-face,
.chat-face2 {
  flex: 0 0 auto;
}
.chat-face img,
.chat-face2 img {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
 
/* --- 吹き出しを置くエリア --- */
.chat-area,
.chat-area2 {
  flex: 1 1 auto;
  min-width: 0;
}
 
/* --- 吹き出し本体（共通スタイル） --- */
.chat-hukidashi,
.chat-hukidashi2 {
  position: relative;
  display: inline-block;
  max-width: 88%;
  padding: 14px 18px;
  border-radius: 14px;
  line-height: 1.7;
  font-size: 16px;
  box-sizing: border-box;
  word-wrap: break-word;
}
 
/* くら田（左側）：テーマカラー */
.chat-hukidashi {
  background: #1D7AB8;
  color: #fff;
}
 
/* お客様の声（右側）：グレー */
.chat-hukidashi2 {
  background: #f0f0f0;
  border: 1px solid #e2e2e2;
  color: #333;
}
 
/* --- しっぽ（三角）：左側はアイコン側＝左に出す --- */
.chat-hukidashi::before {
  content: "";
  position: absolute;
  top: 20px;
  left: -16px;
  border: 8px solid transparent;
  border-right-color: #1D7AB8;
}
 
/* --- しっぽ：右側はアイコン側＝右に出す --- */
.chat-hukidashi2::before {
  content: "";
  position: absolute;
  top: 20px;
  right: -16px;
  border: 8px solid transparent;
  border-left-color: #f0f0f0;
}
.chat-hukidashi2::after {
  content: "";
  position: absolute;
  top: 20px;
  right: -18px;
  border: 8px solid transparent;
  border-left-color: #e2e2e2;
  z-index: -1;
}
 
/* --- スマホ対応 --- */
@media (max-width: 480px) {
  .chat-face img,
  .chat-face2 img {
    width: 50px;
    height: 50px;
  }
  .chat-hukidashi,
  .chat-hukidashi2 {
    font-size: 15px;
    padding: 12px 14px;
  }
  .chat-box,
  .chat-box2 {
    gap: 8px;
  }
}

/* =====================================================================
   釣具買取 査定フォーム（CF7 / cf7-satei）  ―  Cocoon 子テーマ style.css 用
   ---------------------------------------------------------------------
   ■ このファイル単体で satei フォームが完結します（移植元の
     グローバル form.wpcf7-form 用 style.css に依存しません）。
     必要だった「.pf-wrap / .pf-submit-section 専用の仕上げルール」
     （送信結果メッセージ・エラー表示・送信ボタングレーアウト・
     二重送信防止）を末尾に取り込み済み。

   ■ 前提：子テーマ style.css は CF7／親テーマより後に読み込まれる。

   ■ !important 方針：
     .pf-wrap を冠したセレクタは詳細度でグローバル(form.wpcf7-form…)
     にも Cocoon にも勝てるため、原則すべて撤去。
     残しているのは .wpcf7-not-valid（base 入力枠を上書きして赤枠を
     出すために必須）のみ。
     ※ もし入力部品が Cocoon スキン等の !important で崩れる場合だけ、
       該当する入力ルールに個別に !important を足してください。

   ■ フォーム外要素（.entry-content / .article / .entry-title）は
     :has(.pf-wrap) でフォーム設置ページのみに限定（全ページへの波及防止）。

   ■ 移植元の pickup-* / konpou-* フォームも移す場合は、グローバル
     style.css のうち該当部分を別途移植してください（本ファイルには
     satei に無関係なため含めていません）。
   ===================================================================== */


/* === ページ全体（フォーム設置ページのみ） === 
.entry-content:has(.pf-wrap) {
  background: #EBF4FA;
  padding: 12px 0 24px;
  margin-top: 5px;
  margin-bottom: 0;
}
.article:has(.pf-wrap) h1.entry-title {
  margin: 0;
  padding: 0;
  height: 0;
  overflow: hidden;
}*/
/* Cocoon のコンテンツ幅制限を解除
.article:has(.pf-wrap),
.entry-content:has(.pf-wrap) {
  max-width: 100%;
} */
#cf7-satei {
  background: #EBF4FA;	
}


/* === wpautop（自動 <p>/<br> 挿入）対策 === */
.pf-wrap > p,
.pf-wrap .pf-section > p,
.pf-wrap .pf-section-top p,
.pf-wrap .pf-section-body > p,
.pf-wrap .pf-section-title p,
.pf-wrap .pf-section-sub p,
.pf-wrap .pf-label p,
.pf-wrap .pf-hint p,
.pf-wrap .pf-field > p,
.pf-wrap .pf-upload-stack > p,
.pf-wrap .pf-no-personal > p,
.pf-wrap .pf-submit-section > p,
.pf-wrap .pf-flow-bar p,
.pf-wrap .pf-hero-bar p,
.pf-wrap .pf-hero-text > p {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}
.pf-wrap br { display: none; }
.entry-content > .pf-wrap {
  margin-top: 0;
  margin-bottom: 0;
}


/* === ラッパー === */
.pf-wrap {
  max-width: 850px;
  margin: 0 auto;
  padding: 0 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}
.pf-wrap * {
  box-sizing: border-box;
}
/* CF7 フォーム本体の幅・余白リセット（グローバルの max-width:680px 等を打ち消す） */
.pf-wrap .wpcf7,
.pf-wrap form.wpcf7-form {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}


/* === フローバー（ライン接続型） === */
.pf-flow-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  margin-bottom: 10px;
}
.pf-flow-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: #666;
  font-weight: 500;
}
.pf-flow-step.pf-flow-current {
  color: #1D7AB8;
  font-weight: 600;
}
.pf-flow-num {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  border: 2px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  background: #fff;
}
.pf-flow-current .pf-flow-num {
  background: #1D7AB8;
  color: #fff;
  border-color: #1D7AB8;
}
.pf-flow-line {
  width: 40px;
  height: 2px;
  background: #ddd;
  margin: 0 6px;
  border-radius: 1px;
  flex-shrink: 0;
}
.pf-flow-line.pf-flow-line-half {
  background: linear-gradient(to right, #1D7AB8 50%, #ddd 50%);
}


/* === ヒーローバー === */
.pf-hero-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  border-radius: 12px;
  background: #fff;
  margin-bottom: 1.25rem;
  border: 1px solid #7FB3D5;
}
.pf-hero-avatar {
  width: 100px;
  height: 100px;
  min-width: 100px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.pf-hero-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pf-hero-text {
  font-size: 16px;
  color: #0E3A5C;
  line-height: 1.7;
  flex: 1;
  text-align: left;
}
.pf-hero-text b {
  font-weight: 600;
  font-size: 17px;
}
.pf-hero-badges {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.pf-badge {
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 4px;
  font-weight: 500;
  display: inline-block;
}
.pf-badge-blue {
  background: #E1EDF7;
  color: #0E3A5C;
}
.pf-badge-green {
  background: #EAF3DE;
  color: #3B6D11;
}


/* === セクションカード === */
.pf-wrap .pf-section {
  background: #fff;
  border: 1px solid #e0ddd8;
  border-radius: 12px;
  margin-bottom: 1rem;
  overflow: hidden;
}
.pf-wrap .pf-section.pf-section-photo {
  border-color: #7FB3D5;
}

/* セクションヘッダーバー */
.pf-section-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid #e0ddd8;
  text-align: left;
}
.pf-section-top > p {
  display: contents;
}
.pf-section-top > div {
  flex: 1;
  text-align: left;
}
.pf-section-top-product,
.pf-section-top-mail {
  background: #E1EDF7;
}
.pf-section-top-photo {
  background: #E1EDF7;
  border-bottom-color: #7FB3D5;
}
.pf-section-body {
  padding: 20px 24px;
}
.pf-section-title {
  font-size: 18px;
  font-weight: 600;
  color: #222;
  text-align: left;
}
.pf-section-title p {
  margin: 0;
}
.pf-section-sub {
  font-size: 14px;
  color: #777;
  margin-top: 3px;
  text-align: left;
}
.pf-section-sub p {
  margin: 0;
}


/* === フィールド === */
.pf-wrap .pf-field {
  margin-bottom: 1.5rem;
}
.pf-wrap .pf-field:last-child {
  margin-bottom: 0;
}
.pf-label {
  font-size: 16px;
  font-weight: 600;
  color: #222;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pf-label p {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pf-required {
  font-size: 12px;
  font-weight: 500;
  background: #FCEBEB;
  color: #A32D2D;
  padding: 2px 10px;
  border-radius: 4px;
  display: inline-block;
}
.pf-optional {
  font-size: 12px;
  font-weight: 500;
  background: #f5f4f0;
  color: #777;
  padding: 2px 10px;
  border-radius: 4px;
  display: inline-block;
}
.pf-hint {
  font-size: 13px;
  color: #888;
  margin-top: 8px;
  line-height: 1.6;
}
.pf-hint p {
  margin: 0;
}


/* === 入力部品（textarea / select / text / email） ===
   .pf-wrap を冠しているのでグローバル form.wpcf7-form… にも
   詳細度で勝てる。!important は不要。 */
.pf-wrap form.wpcf7-form textarea.wpcf7-form-control,
.pf-wrap form.wpcf7-form textarea.wpcf7-textarea,
.pf-wrap .pf-section textarea {
  width: 100%;
  height: 100px;
  min-height: 100px;
  max-height: none;
  border: 1px solid #d0cdc8;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 16px;
  color: #333;
  background: #fff;
  resize: vertical;
  font-family: inherit;
  line-height: 1.7;
  box-shadow: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s;
}
/* コンディション補足は短め */
.pf-wrap form.wpcf7-form textarea[name="condition_note"],
.pf-wrap textarea[name="condition_note"] {
  height: 60px;
  min-height: 60px;
}
.pf-wrap form.wpcf7-form textarea:focus {
  outline: none;
  border-color: #1D7AB8;
  box-shadow: 0 0 0 3px rgba(29, 122, 184, 0.15);
}

.pf-wrap form.wpcf7-form select.wpcf7-form-control,
.pf-wrap form.wpcf7-form select.wpcf7-select,
.pf-wrap .pf-section select {
  width: 100%;
  height: 48px;
  border: 1px solid #d0cdc8;
  border-radius: 8px;
  padding: 0 36px 0 16px;
  font-size: 16px;
  color: #333;
  background-color: #fff;
  font-family: inherit;
  cursor: pointer;
  box-shadow: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  /* セレクト矢印（グローバルの矢印に依存しないよう自前で指定） */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231D7AB8' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  transition: border-color 0.15s;
}
.pf-wrap form.wpcf7-form select:focus {
  outline: none;
  border-color: #1D7AB8;
  box-shadow: 0 0 0 3px rgba(29, 122, 184, 0.15);
}

.pf-wrap form.wpcf7-form input[type="text"],
.pf-wrap form.wpcf7-form input[type="email"],
.pf-wrap .pf-section input.wpcf7-text,
.pf-wrap .pf-section input.wpcf7-email {
  width: 100%;
  height: 48px;
  border: 1px solid #d0cdc8;
  border-radius: 8px;
  padding: 0 16px;
  font-size: 16px;
  color: #333;
  background: #fff;
  font-family: inherit;
  box-shadow: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s;
}
.pf-wrap form.wpcf7-form input[type="text"]:focus,
.pf-wrap form.wpcf7-form input[type="email"]:focus {
  outline: none;
  border-color: #1D7AB8;
  box-shadow: 0 0 0 3px rgba(29, 122, 184, 0.15);
}

.pf-wrap .wpcf7-form-control::placeholder {
  color: #aaa;
  font-size: 15px;
}

.pf-wrap .wpcf7-form-control-wrap {
  display: block;
  position: relative;
}


/* === 写真アップロード（縦並び＋ファイル入力） === */
.pf-upload-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pf-upload-stack > p {
  display: contents;
}
.pf-upload-stack .wpcf7-form-control-wrap {
  display: block;
}
.pf-wrap .pf-upload-stack input[type="file"],
.pf-wrap form.wpcf7-form .pf-upload-stack input[type="file"],
.pf-upload-stack input.wpcf7-file {
  width: 100%;
  font-size: 15px;
  color: #666;
  padding: 16px 18px;
  border: 1.5px dashed #7FB3D5;
  border-radius: 8px;
  background: #F4F9FC;
  cursor: pointer;
  display: block;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.pf-wrap .pf-upload-stack input[type="file"]:hover {
  border-color: #1D7AB8;
}
.pf-wrap .pf-upload-stack input[type="file"]::-webkit-file-upload-button {
  background: #1D7AB8;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-right: 12px;
}
.pf-wrap .pf-upload-stack input[type="file"]::file-selector-button {
  background: #1D7AB8;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-right: 12px;
}


/* === 個人情報不要バッジ === */
.pf-no-personal {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 1.25rem;
  padding: 12px 16px;
  background: #EAF3DE;
  border-radius: 8px;
}
.pf-no-personal > p {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pf-no-personal svg {
  flex-shrink: 0;
}
.pf-no-personal span {
  font-size: 14px;
  color: #3B6D11;
  font-weight: 600;
}


/* === 送信エリア === */
.pf-submit-section {
  padding: 0.5rem 0;
}
.pf-confirm-text {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}
.pf-confirm-area {
  background: #f9f8f5;
  border: 1.5px dashed #d0cdc8;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  position: relative;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.pf-confirm-area:hover {
  border-color: #1D7AB8;
  background: #F4F9FC;
}
.pf-confirm-area:has(input[type="checkbox"]:checked) {
  background: #EAF3DE;
  border-color: #3B6D11;
  border-style: solid;
}

/* acceptance（確認チェック・CF7生成） */
.pf-submit-section .wpcf7-acceptance {
  margin-bottom: 0;
}
.pf-submit-section .wpcf7-acceptance label {
  position: static;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 8px 0;
  font-size: 16px;
  color: #333;
}
.pf-submit-section .wpcf7-acceptance label::after {
  content: "";
  position: absolute;
  inset: 0;
  cursor: pointer;
}
.pf-submit-section .wpcf7-acceptance input[type="checkbox"] {
  width: 22px;
  height: 22px;
  min-width: 22px;
  accent-color: #1D7AB8;
  cursor: pointer;
  transform: none;
  -webkit-transform: none;
}
.pf-submit-section .wpcf7-acceptance .wpcf7-list-item-label {
  font-size: 16px;
  color: #333;
}

/* 送信ボタン */
.pf-wrap form.wpcf7-form input[type="submit"],
.pf-wrap form.wpcf7-form .wpcf7-submit,
.pf-wrap input.wpcf7-submit {
  width: 100%;
  height: 58px;
  background: #1D7AB8;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.04em;
  box-shadow: 0 3px 12px rgba(29, 122, 184, 0.35);
  -webkit-appearance: none;
  appearance: none;
  margin-top: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, box-shadow 0.15s;
}
.pf-wrap form.wpcf7-form input[type="submit"]:hover,
.pf-wrap form.wpcf7-form .wpcf7-submit:hover {
  background: #18669A;
  box-shadow: 0 4px 16px rgba(29, 122, 184, 0.45);
  outline: none;
}

/* 送信中スピナー（リング型・青）
   表示/非表示（form.submitting 時のみ visible）は CF7 標準CSSが担う。 */
.pf-wrap .wpcf7-spinner {
  display: block;
  margin: 12px auto 0;
  width: 28px;
  height: 28px;
  background-color: transparent;
  border: 3px solid #cfe2f0;
  border-top-color: #1D7AB8;
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}
.pf-wrap .wpcf7-spinner::before {
  display: none;
}
/* 元CSSに spin の定義が見当たらなかったため追加（無いと回転しません）。
   既に他所で定義済みでも同内容なので無害。 */
@keyframes spin {
  to { transform: rotate(360deg); }
}


/* === キャンペーンバナー === */
.pf-campaign-banner {
  margin-top: 20px;
}
.pf-campaign-banner a {
  display: block;
  text-decoration: none;
}
.pf-campaign-banner img {
  width: 100%;
  max-height: 180px;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}


/* =====================================================================
   ★ 移植元グローバル style.css から取り込んだ satei 専用の仕上げ ★
   （これが無いと表示・挙動が一致しません）
   ===================================================================== */

/* --- CF7 送信結果メッセージ枠 --- */
.pf-wrap form .wpcf7-response-output {
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 15px;
  margin: 14px 0;
  background: #fff;
  border: 2px solid #ccc;
  color: #555;
  font-weight: 500;
}
.pf-wrap form .wpcf7-response-output.wpcf7-mail-sent-ok {
  color: #166534;
  border-color: #22C55E;
  background: #F0FDF4;
}
.pf-wrap form .wpcf7-response-output.wpcf7-validation-errors {
  color: #92400E;
  border-color: #F59E0B;
  background: #FFFBEB;
}
.pf-wrap form .wpcf7-response-output.wpcf7-mail-sent-ng,
.pf-wrap form .wpcf7-response-output.wpcf7-spam-blocked,
.pf-wrap form .wpcf7-response-output.wpcf7-acceptance-missing {
  color: #991B1B;
  border-color: #EF4444;
  background: #FEF2F2;
}

/* --- 項目下のエラー文（「かならず入力してください。」等） --- */
.pf-wrap form .wpcf7-not-valid-tip {
  display: block;
  font-size: 14px;
  color: #991B1B;
  background: #FEF2F2;
  border: 1.5px solid #EF4444;
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 8px;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.15);
}
.pf-wrap form .wpcf7-not-valid-tip::before {
  content: "⚠ ";
}

/* --- エラー項目の入力枠（赤枠）---
   base の入力枠ルール（.pf-wrap form.wpcf7-form input…）は詳細度が
   高いので、ここだけ !important で確実に上書きする。 */
.pf-wrap form .wpcf7-not-valid {
  border-color: #EF4444 !important;
  background: #FEF2F2 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}

/* --- 規約未チェック時：送信ボタンをグレーアウト ---
   acceptance の name は "acceptance-XXX" で自動採番されるため前方一致。
   :has() は現行の主要ブラウザで対応済み。非対応環境では薄くならない
   だけで送信機能には影響しない。 */
.pf-submit-section:not(:has(input[type="checkbox"][name^="acceptance-"]:checked)) .wpcf7-submit {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(80%);
}

/* --- 二重送信防止（送信中はボタンを無効化） --- */
.pf-wrap form.wpcf7-form.submitting input[type="submit"],
.pf-wrap form.wpcf7-form.submitting .wpcf7-submit {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}


/* =====================================================================
   レスポンシブ
   ===================================================================== */
@media (max-width: 480px) {
  .entry-content:has(.pf-wrap) {
    margin-top: 3px;
  }
  .pf-wrap {
    padding: 0 12px;
    font-size: 15px;
  }
  .pf-section-body {
    padding: 16px;
  }
  .pf-section-top {
    padding: 12px 16px;
  }
  .pf-hero-bar {
    padding: 14px;
    gap: 12px;
  }
  .pf-hero-avatar {
    width: 80px;
    min-width: 80px;
    height: 80px;
  }
  /* iOS のズーム防止に 16px を維持 */
  .pf-wrap form.wpcf7-form textarea,
  .pf-wrap form.wpcf7-form input[type="text"],
  .pf-wrap form.wpcf7-form input[type="email"],
  .pf-wrap form.wpcf7-form select {
    font-size: 16px;
  }
  .pf-wrap form.wpcf7-form textarea[name="item_detail"],
  .pf-wrap textarea[name="item_detail"] {
    height: 160px;
    min-height: 160px;
  }
  .pf-wrap form.wpcf7-form textarea[name="condition_note"],
  .pf-wrap textarea[name="condition_note"] {
    height: 80px;
    min-height: 80px;
  }
}

/* スマホ用：フローバーを縦型に切り替え */
@media screen and (max-width: 767px) {
  .pf-wrap .pf-flow-bar {
    padding: 14px 0;
  }
  .pf-wrap .pf-flow-step {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    text-align: center;
    flex: 1;
    min-width: 0;
    line-height: 1.3;
  }
  .pf-wrap .pf-flow-num {
    width: 30px;
    height: 30px;
    min-width: 30px;
    font-size: 13px;
  }
  .pf-wrap .pf-flow-line {
    width: auto;
    flex: 0 1 20px;
    margin: 14px 2px 0;
    align-self: flex-start;
    height: 2px;
  }
}

@media screen and (max-width: 380px) {
  .pf-wrap .pf-flow-step {
    font-size: 11px;
  }
  .pf-wrap .pf-flow-line {
    flex: 0 1 12px;
  }
}


/* plugin：include Kakakuhyo From Cache で出力される */
/* Shortcodes Ultimate modern-1-dark 見出しの文字色を白で上書き */
.su-heading-style-modern-1-dark .su-heading-inner {
	color: #ffffff !important;
}

/* テーブル内でreview表示する場合はtableの背景色を無効化する */
table:has(#showreviews) tr {
  background-color: transparent !important;
}