/* ==================================================================
   査定ページ assessment.css / 直接指定版（CSS変数なし）

   編集方法：
   1. 開発者ツールで編集したい要素を選択
   2. その要素に対応するCSSセレクタを探す
   3. color / font-size / margin / padding などの値をその場で変更

   ・電話 / LINE / メール / フォームのクラス名と基本構造は維持。
   ・見出しや日本語コメントから対象箇所を探せます。
   ・共通の値は複数のセレクタにある場合があります。
   ・レイアウト、CF7、横スクロール関連は変更後に動作確認。
   ・元ファイル：assessment(5).css。FTP・WordPressには未反映。
   ================================================================== */

/* ================================================================
   以下は部品の表示・配置。見た目の値は各セレクタで直接編集。
   ================================================================ */
/* セクション全体 */
#Assessment {
  width: 100%;
  min-width: 0;
  margin-block: 0;
  margin-inline: auto;
  padding-inline: 16px;
  padding-block: 0;
  box-sizing: border-box;
}

/* 共通カード一覧全体 */
.assessment-card-list {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* =========================================
   【共通カード-01】カード全体
   対象：電話・LINE・メール・フォーム
   ========================================= */
.assessment-card {
  margin-block: 24px;
  margin-inline: auto;

  padding: clamp(20px, 3vw, 32px);
  text-align: left;
  display: block;
  box-sizing: border-box;
  container-type: inline-size;
  container-name: assessment-card;
  border: 1px solid #dfe5eb;
  border-radius: 20px;
  background: #fff;
  color: #222;
  box-shadow: 0 6px 24px rgb(0 0 0 / 5%);
}


/* =========================================
   【共通H2-01】査定方法の見出し全体
   対象：電話・LINE・メール・フォーム

   【HTMLとの対応】
   assessment-card__heading：H2全体
   assessment-card__icon：アイコン
   assessment-card__accent：強調文字
   ========================================= */

.assessment-card__heading {
  gap: 25px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.4;
  font-weight: 700;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-bottom: 1px solid #dfe5eb;
  background: none;
}



/* =========================================
   【共通H2-02】見出しのアイコン
   対象：電話・メール・フォーム
   ========================================= */

.assessment-card--tel .assessment-card__icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  color: #217fd6;
}

.assessment-card--mail .assessment-card__icon,
.assessment-card--form .assessment-card__icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  color: #dd2626;
}

.assessment-card--line .assessment-card__icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  color: #06c755;
}



/* =========================================
   【共通H2-03】見出しの強調文字
   対象：電話・LINE・メール・フォーム
   ========================================= */

.assessment-card.assessment-card--tel .assessment-card__accent {
  color: #217fd6;


}

.assessment-card.assessment-card--mail .assessment-card__accent,
.assessment-card.assessment-card--form .assessment-card__accent {
  color: #dd2626;


}

.assessment-card.assessment-card--line .assessment-card__accent {
  color: #06c755;


}



/* =========================================
   【共通H2-04】テーマ標準の装飾を無効化
   原則変更しない
   ========================================= */

.assessment-card__heading::after {
  content: none;
}



/* =========================================
   【共通レイアウト-01】カード内の基本配置

   対象：電話・LINE・メール・フォーム

   【役割】
   ・画像、説明文、お問い合わせ部分を配置する。
   ・PCなどの幅に応じた列の切り替えは
     別のコンテナクエリで管理する。
   ========================================= */

.assessment-card__layout {
  gap: 20px 24px;

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "media" "content" "contact";
  align-items: start;

  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0;
  box-sizing: border-box;
  float: none;
  
}



/* =========================================
   【共通画像-01】画像を囲むエリア
   対象：電話査定の左側に表示される画像

   【役割】
   ・画像を表示する領域の幅と配置を管理する。
   ・PCでは左側、スマホでは上側に配置される。
   ========================================= */

.assessment-card__image-box {

  /* 必要に応じて変更する表示・配置 */
  width: 100%;
  max-width: 640px;
  margin: 0;

 


  /* ===== 原則変更しない：Grid配置 ===== */
  grid-area: media;
  min-width: 0;
  justify-self: center;


}


/* =========================================
   【共通画像-02】画像本体
   対象：電話査定の画像

   【役割】
   ・画像そのものの表示サイズと角丸を管理する。
   ========================================= */

.assessment-card__image {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  margin: 0;
  object-fit: contain;


}


/* =========================================
   【共通本文-01】カード内のコンテンツ領域
   対象：電話・LINE・メール・フォーム

   【役割】
   ・説明文などを入れる領域。
   ・電話査定のPC表示では画像の右側に配置。
   ========================================= */

.assessment-card__content {

  /* ===== 原則変更しない：Grid配置 ===== */
  grid-area: content;
  min-width: 0;


}


/* =========================================
   【共通本文-02】説明文の文字設定
   対象：電話・メール・LINEなど

   【役割】
   ・説明文の文字色・文字サイズ・行間を管理。
   ========================================= */

.assessment-card__description > p,
.assessment-card__copy-text,
.assessment-card__mail-template-note,
.assessment-card__mail-note,
.assessment-card__mail-help,
.assessment-line__description {
  color: #4d4d4d;
  font-size: 16px;
  line-height: 1.8;
  text-align: left;
  overflow-wrap: anywhere;

}



/* =========================================
   【共通本文-03】説明文の余白
   対象：電話・メール・フォームの説明文

   【役割】
   ・pタグに設定される上下の余白をなくす。
   ========================================= */

.assessment-card__description > p {

  /* 必要に応じて変更する表示・配置 */
  margin: 0 !important;


}


/* =========================================
   【共通お問い合わせ-01】お問い合わせエリアの外枠
   対象：電話・メール
   ========================================= */

.assessment-card--tel .assessment-card__contact,
.assessment-card--mail .assessment-card__contact,
.assessment-card--form .assessment-card__contact,
.assessment-card--line .assessment-card__contact {
  margin: 0;
  padding: 20px;
  border-radius: 12px;
  grid-area: contact;
  container-type: inline-size;
  container-name: assessment-contact;
  min-width: 0;
  background: #f8fafc;
}


/* =========================================
   【電話-01】電話番号と相談ボタンの配置
   対象：電話査定
   ========================================= */

.assessment-card__contact-inner {
  gap: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;


}


/* =========================================
   【電話-02】電話番号・受付時間を囲む領域
   ========================================= */

.assessment-card__contact-details {

  /* ===== 原則変更しない：幅・はみ出し対策 ===== */
  width: 100%;
  min-width: 0;

 
}

/* =========================================
   【電話-03】フリーダイヤル表記・受付時間
   対象：電話番号の上と下にある文字
   ========================================= */

.assessment-card__tel-label,
.assessment-card__tel-hours {
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
  margin: 0;
  color: #4d4d4d;
}


/* =========================================
   【電話-04】電話番号の表示
   対象：電話査定のフリーダイヤル番号
   ========================================= */

.assessment-card--tel .assessment-card__contact-value {
  margin-block: 6px;
  margin-inline: 0;
  font-size: clamp(
    24px,
    6cqi,
    34px
  );
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  display: block;
  max-width: 100%;
  color: #217fd6;
  overflow-wrap: anywhere;


}

.assessment-card--mail .assessment-card__contact-value,
.assessment-card--form .assessment-card__contact-value {
  margin-block: 6px;
  margin-inline: 0;
  font-size: clamp(
    24px,
    6cqi,
    34px
  );
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  display: block;
  max-width: 100%;
  color: #dd2626;
  overflow-wrap: anywhere;


}

.assessment-card--line .assessment-card__contact-value {
  margin-block: 6px;
  margin-inline: 0;
  font-size: clamp(
    24px,
    6cqi,
    34px
  );
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  display: block;
  max-width: 100%;
  color: #06c755;
  overflow-wrap: anywhere;


}


/* =========================================
   【共通ボタン-01】査定ボタンの基本デザイン
   対象：電話・LINE・メールなど
   ========================================= */

.assessment-card--tel .assessment-card__button {
  font-weight: 700;
  line-height: 1.5;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 999px;
  background: #217fd6;
  color: #fff;
  text-decoration: none;
}

.assessment-card--mail .assessment-card__button,
.assessment-card--form .assessment-card__button {
  font-weight: 700;
  line-height: 1.5;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 999px;
  background: #dd2626;
  color: #fff;
  text-decoration: none;
}

.assessment-card--line .assessment-card__button,
.assessment-card--line .assessment-line__button {
  font-weight: 700;
  line-height: 1.5;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 999px;
  background: #06c755;
  color: #fff;
  text-decoration: none;
}



/* =========================================
   【共通ボタン-02】相談ボタンのサイズ・余白
   対象：電話・メール査定
   ========================================= */

.assessment-card__button {
  gap: 8px;
  min-height: 52px;
  margin: 0;
  padding: 14px 16px;
  font-size: 16px;
  text-align: center;
  display: inline-flex;
  width: 100%;
  min-width: 0;
}



/* =========================================
   【共通ボタン-03】マウスを乗せたときの表示
   ========================================= */

.assessment-card__button:hover {
  opacity: 0.85;

 
}

/* =========================================
   【共通レイアウト-02】カード幅480px以上
   対象：電話査定の画像・説明文・お問い合わせ

   【動作】
   ・左側：画像（35％相当）
   ・右側：説明文（65％相当）
   ・お問い合わせ：画像と説明文の下に横幅いっぱい

   ※比率は列間の余白を除いた幅が基準。
   ※800px以上では、下記の設定で配置が変わる。
   ========================================= */

@container assessment-card (min-width: 480px) {


  .assessment-card__layout {

    /* ===== 必要時のみ編集：列幅の比率 ===== */
    grid-template-columns:
      minmax(0, 0.35fr)
      minmax(0, 0.65fr);

    /* ===== 原則変更しない：配置 ===== */
    grid-template-areas:
      "media content"
      "contact contact";
  }

}



/* =========================================
   【共通レイアウト-03】カード幅800px以上
   対象：電話査定の画像・説明文・お問い合わせ

   【動作】
   ・左側：画像
   ・右上：説明文
   ・右下：お問い合わせ
   ・左右の列幅は480px以上の設定を引き継ぐ。
   ========================================= */

@container assessment-card (min-width: 800px) {


  .assessment-card__layout {

    /* ===== 原則変更しない：配置 ===== */
    grid-template-areas:
      "media content"
      "media contact";
  }

}



/* =========================================
   【電話-05】お問い合わせエリア幅459px以下
   対象：電話番号・受付時間・相談ボタン

   【動作】
   ・電話番号と相談ボタンを横並びから縦並びに変更。
   ・各要素の横幅は最大380pxまで。
   ・電話番号や案内文を中央揃えにする。
   ========================================= */

@container assessment-contact (max-width: 459px) {


  /* ===== 原則変更しない：縦1列に変更 ===== */
  .assessment-card__contact-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 必要に応じて変更する表示・配置 */
  .assessment-card__contact-details,
  .assessment-card__button {
    width: 100%;
    max-width: 380px;
    margin-block: 0;
  margin-inline: auto;
  }

  /* ===== 必要時のみ編集：文字の配置 ===== */
  .assessment-card .assessment-card__contact-details > p {
    text-align: center;
  }

.assessment-card__contact-value {
    margin-block: 6px;
  margin-inline: 0;
  }


}



/* =========================================
   【共通H2-05】カード幅340px以下
   対象：電話・メール・フォームの見出しアイコン

   【動作】
   ・横幅の狭いカードではアイコンを小さくする。
   ・通常48pxのアイコンを40pxに変更。
   ========================================= */

@container assessment-card (max-width: 340px) {


  .assessment-card__icon {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    font-size: 24px;
  }


}


/* =========================================
   【LINE-01】LINE見出しのアイコンと文字の配置
   対象：LINEで査定する（H2内）
   ========================================= */

.assessment-line__heading-main {
  gap: 25px;
  display: inline-flex;
  min-width: 0;
  align-items: center;
}



/* =========================================
   【LINE-02】LINE見出しのアイコン画像
   対象：H2左側のLINEロゴ
   ========================================= */

.assessment-line__icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: block;
  object-fit: contain;
}



/* =========================================
   【LINE-03】LINE査定の基本レイアウト
   対象：LINEカードのH2より下の領域
   ========================================= */

.assessment-line__layout {
  gap: 24px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "content";
}



/* =========================================
   【LINE-04】友だち追加案内ボックス
   対象：H2直下の友だち追加案内エリア（背景は共通淡色）
   ========================================= */

.assessment-line__friend-add {
  margin-top: 0;
  margin-bottom: 28px;
  margin-inline: 0;
  padding: 20px;
  text-align: center;
  border: 1px solid #dfe5eb;
  border-radius: 12px;
  background: #f8fafc;
}



/* =========================================
   【LINE-05】友だち追加ボタン
   対象：緑色のLINE友だち追加ボタン
   ========================================= */

.assessment-line__button {
  width: min(100%, 440px);
  min-height: 56px;
  gap: 12px;
  margin-top: 12px;
  margin-bottom: 0;
  margin-inline: auto;
  padding: 14px 20px;
  font-size: 18px;
  text-align: center;
  display: flex;
  border: 0;
  background: #06c755;
}


/* マウスを乗せたときの色 */
.assessment-line__button:hover {
  opacity: 0.85;
}


/* 【LINE-08】LINE査定の流れへの詳細リンク */
.assessment-line__flow-link {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.6;
  text-underline-offset: 3px;
  display: inline-block;
  color: #222;
  text-decoration: underline;
}


/* 【LINE-09】詳細リンクにマウスを乗せたとき */
.assessment-line__flow-link:hover {
  opacity: 0.7;
  cursor: pointer;
}

/* 【共通操作-01】相談ボタンと詳細リンクのキーボード操作 */
.assessment-card__button:focus-visible,
.assessment-line__button:focus-visible,
.assessment-line__flow-link:focus-visible {
  outline: 3px solid #222;
  outline-offset: 4px;
}


/* =========================================
   【LINE-06】友だち追加ボックス内の案内文
   対象：ボタン上の説明・ボタン下の補足文
   ========================================= */

.assessment-line__friend-add-description,
.assessment-line__friend-add-note {
  color: #4d4d4d;
  overflow-wrap: anywhere;
}


/* 【LINE-07】案内文・写真キャプション・返信案内の共通文字色 */
.assessment-line__friend-add-description,
.assessment-line__friend-add-note,
.assessment-line__photo-caption,
.assessment-line__reply-note {
  color: #4d4d4d;
  text-align: left;
  overflow-wrap: anywhere;
}


/* ボタン上：友だち追加の説明文 */
.assessment-line__friend-add-description {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
}


/* ボタン下：送信時間・査定料金の説明 */
.assessment-line__friend-add-note {
  margin-top: 12px;
  margin-bottom: 0;
  margin-inline: 0;
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
}


/* =========================================
   【LINE写真-01】写真案内のH3見出し
   対象：友だち追加後の案内・商品情報コピーの見出し
   ========================================= */

.assessment-line__section-heading {
  font-size: clamp(
    19px,
    2.4vw,
    24px
  );
  line-height: 1.55;
  text-align: left;
  color: #222;
  font-weight: 700;
}


/* WordPressテーマ側の見出し装飾を無効化 */
.assessment-line__section-heading::before,
.assessment-line__section-heading::after {
  content: none;
}


/* =========================================
   【LINE写真-02】H3直下の説明文
   対象：写真・商品情報の送信方法
   ========================================= */

.assessment-line__description {
  /* 必要に応じて変更する表示・配置 */
  margin: 0;
}


/* =========================================
   【LINE写真-03】写真案内のH4見出し
   対象：送っていただきたい写真
   ========================================= */

.assessment-line__subheading {
  margin-top: 20px;
  font-size: 17px;
  line-height: 1.6;
  text-align: left;
  color: #222;
  font-weight: 700;
}



/* =========================================
   【LINE写真-04】写真一覧の補足説明
   対象：撮影例の注意書き・写真一覧の下の案内
   ========================================= */

.assessment-line__photo-caption {
  margin: 0 !important;
  font-size: 13px;
  line-height: 1.7;

  /* 文字色・折り返しは共通設定を引き継ぐ */
}



/* =========================================
   【LINE写真-05】横スクロール全体の外枠
   対象：写真一覧と専用スクロールバー
   ========================================= */

.assessment-line__photo-scroll {
  /* ===== 原則変更しない：幅・はみ出し対策 ===== */
  width: 100%;
  min-width: 0;
  max-width: 100%;
}


/* =========================================
   【LINE写真-06】写真一覧の横スクロール
   対象：4枚の撮影例を横に並べる領域

   【注意】
   ・横スクロール操作に関わる設定。
   ・写真一覧のHTML・JavaScriptとも連動する。
   ・操作関連の指定は原則変更しない。
   ========================================= */

.assessment-line__photo-list {
  gap: 12px;
  padding:
    4px
    2px
    12px;
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  box-sizing: border-box;
  overflow-x: auto;
  touch-action: auto;
  scroll-padding-inline: 2px;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}


/* ブラウザ標準の横スクロールバーを非表示 */
/* 専用スクロールバーは別のCSS・JSで制御 */
.assessment-line__photo-list::-webkit-scrollbar {
  display: none;
}


/* =========================================
   【LINE写真-07】専用スクロールバーの外枠
   対象：写真一覧の下にある横長の灰色バー
   ========================================= */

.assessment-line__photo-scrollbar {
  width: 100%;
  height: 32px;
  margin-top: 4px;
  margin-bottom: 0;
  margin-inline: 0;
  border-radius: 16px;
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  background: #dfe5eb;
  cursor: pointer;
  touch-action: pan-y pinch-zoom;
  user-select: none;
}


/* HTMLのhidden属性がある場合は非表示 */
.assessment-line__photo-scrollbar[hidden] {
  display: none;
}


/* =========================================
   【LINE写真-08】スクロールバーのつまみ
   対象：灰色バーの中にある濃い灰色の部分

   【注意】
   ・つまみの幅・位置はJavaScriptで制御する。
   ========================================= */

.assessment-line__photo-scroll-thumb {
  top: 6px;
  bottom: 6px;
  border-radius: 12px;
  position: absolute;
  left: 0;
  display: block;
  background: #4d4d4d;
  pointer-events: none;
}


/* 横スクロールできない場合のカーソル */
.assessment-line__photo-scrollbar[aria-disabled="true"] {
  cursor: default;
}


/* =========================================
   【LINE写真-09】キーボード操作時の枠
   対象：写真一覧・専用スクロールバー
   ========================================= */

.assessment-line__photo-list:focus-visible,
.assessment-line__photo-scrollbar:focus-visible {
  outline: 2px solid #222;
  outline-offset: 4px;
}



/* =========================================
   【LINE写真-10】PCでのドラッグ操作
   対象：マウスで写真一覧を操作するとき
   ========================================= */

@media (hover: hover) and (pointer: fine) {

  .assessment-line__photo-list {
    cursor: grab;
  }

}



/* =========================================
   【LINE写真-11】写真カード全体
   対象：正面・全体、型番・特徴、付属品、キズ
   ========================================= */

.assessment-line__photo-item {
  flex: 0 0 clamp(180px, 70%, 260px);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #dfe5eb;
  background: #fff;
  width: auto;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
  scroll-snap-align: start;
}



/* =========================================
   【LINE写真-12】写真の外側の要素
   対象：pictureタグ
   ========================================= */

.assessment-line__photo-item picture {
  display: block;
  width: 100%;
}


/* =========================================
   【LINE写真-13】写真本体
   対象：無線機の撮影例画像
   ========================================= */

.assessment-line__photo-item img {

  /* 必要に応じて変更する表示・配置 */
  aspect-ratio: 1 / 1;

  /* 画像表示 */
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}


/* =========================================
   【LINE写真-14】写真カード内の文章エリア
   対象：画像下の見出し・説明文を囲む領域
   ========================================= */

.assessment-line__photo-item > div {
  padding: 12px;
}



/* =========================================
   【LINE写真-15】写真カード内のH5見出し
   対象：正面・全体、型番・特徴など
   ========================================= */

.assessment-line__photo-item h5 {
  margin-top: 0;
  margin-bottom: 5px;
  margin-inline: 0;
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
  color: #222;
  font-weight: 700;
}



/* =========================================
   【LINE写真-16】写真カード内の説明文
   対象：撮影する箇所についての説明
   ========================================= */

.assessment-line__photo-item p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  text-align: left;
  color: #4d4d4d;
  overflow-wrap: anywhere;
}



/* =========================================
   【LINE写真-17】狭いカード幅での余白調整
   対象：カード幅500px以下
   ========================================= */

@container assessment-card (max-width: 500px) {

  /* 写真カード内の文章エリアの余白 */
  .assessment-line__photo-item > div {
    padding: 10px;
  }


}

/* =========================================
   【LINE共通-01】各案内セクションの上側余白
   対象：
   ・写真送付の案内エリア
   ・商品情報コピーの案内エリア
   ========================================= */

.assessment-line__instructions,
.assessment-line__copy-section {
  margin-top: 28px;
}


/* =========================================
   【共通コピー-01】コピーする情報の外枠
   対象：LINE・メール査定の商品情報など
   ========================================= */

.assessment-card__copy-group {
  margin-top: 16px;
  padding: 16px;
  border-radius: 10px;
  text-align: left;
  border: 1px solid #dfe5eb;
  background: #f8fafc;
}



/* =========================================
   【共通コピー-02】コピー欄の見出し
   対象：商品情報・お客様情報・メールアドレスなど
   ========================================= */

.assessment-card__group-heading {
  margin-top: 0;
  margin-bottom: 10px;
  margin-inline: 0;
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
  padding: 0;
  border: 0;
  background: none;
  color: #222;
  font-weight: 700;
}


/* WordPressテーマ由来の装飾を無効化 */
.assessment-card__group-heading::before,
.assessment-card__group-heading::after {
  content: none;
}


/* =========================================
   【共通コピー-03】コピーする文章
   対象：LINE・メールの情報テンプレート
   ========================================= */

.assessment-card__copy-text {

  /* 必要に応じて変更する表示・配置 */
  margin: 0;
  padding: 0;
  text-align: left;

  /* ===== 原則変更しない：文章の表示 ===== */
  border: 0;
  background: none;
  font-family: inherit;
  white-space: pre-wrap;
  max-width: 100%;
  border-radius: 0;
}


/* =========================================
   【共通コピー-04】コピーボタン
   対象：商品情報・お客様情報などのコピーボタン
   ========================================= */

.assessment-card--tel .assessment-card__copy-button {
  min-height: 44px;
  margin-top: 12px;
  padding: 8px 14px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #217fd6;
  background: #fff;
  color: #217fd6;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
  cursor: pointer;
}

.assessment-card--mail .assessment-card__copy-button,
.assessment-card--form .assessment-card__copy-button {
  min-height: 44px;
  margin-top: 12px;
  padding: 8px 14px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dd2626;
  background: #fff;
  color: #dd2626;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
  cursor: pointer;
}

.assessment-card--line .assessment-card__copy-button {
  min-height: 44px;
  margin-top: 12px;
  padding: 8px 14px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #06c755;
  background: #fff;
  color: #06c755;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
  cursor: pointer;
}


/* JavaScriptによる表示切り替え */
/* hidden属性がある場合はボタンを非表示 */
.assessment-card__copy-button[hidden] {
  display: none;
}

/* キーボード操作でボタンを選択したとき */
.assessment-card__copy-button:focus-visible {
  outline: 3px solid #222;
  outline-offset: 3px;
}


/* コピー処理中など、操作できない状態 */
.assessment-card__copy-button:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* マウスを乗せたとき */
.assessment-card--tel .assessment-card__copy-button:hover:not(:disabled) {
  background: #217fd6;
  color: #fff;
  border-color: #217fd6;
}

.assessment-card--mail .assessment-card__copy-button:hover:not(:disabled),
.assessment-card--form .assessment-card__copy-button:hover:not(:disabled) {
  background: #dd2626;
  color: #fff;
  border-color: #dd2626;
}

.assessment-card--line .assessment-card__copy-button:hover:not(:disabled) {
  background: #06c755;
  color: #fff;
  border-color: #06c755;
}



/* =========================================
   【共通コピー-05】コピー後のメッセージ
   対象：「コピーしました」などの通知表示
   ========================================= */

.assessment-card__copy-status {
  margin-top: 8px;
  margin-bottom: 0;
  margin-inline: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #4d4d4d;
}


/* 通知メッセージが空の場合、余白をなくす */
.assessment-card__copy-status:empty {
  margin: 0;
}

/* 【LINE-10】LINE送信後の返信案内・詳細リンクの導入文 */
.assessment-line__reply-note {
  margin-top: 24px;
  margin-bottom: 0;
  margin-inline: 0;
  font-size: 14px;
  line-height: 1.75;
}


/* =========================================
   【メール-01】メールアドレスの表示
   対象：メールアドレス欄の used@tradeland.co.jp
   ========================================= */

.assessment-card--tel .assessment-card__mail-address {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: #217fd6;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.assessment-card--mail .assessment-card__mail-address,
.assessment-card--form .assessment-card__mail-address {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: #dd2626;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.assessment-card--line .assessment-card__mail-address {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: #06c755;
  font-weight: 700;
  overflow-wrap: anywhere;
}



/* =========================================
   【メール-02】メール査定の基本レイアウト
   対象：H2より下の説明文・コピー欄・送信エリア

   【動作】
   ・上：説明文とコピー欄
   ・下：メール送信ボタンと案内文
   ・横幅が広くなっても縦1列で配置する
   ========================================= */

.assessment-card--mail > .assessment-card__layout {

  /* ===== 原則変更しない：Grid配置 ===== */
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "content"
    "contact";
}


/* =========================================
   【メール-03】説明文・補足文の上下余白
   対象：
   ・コピー欄の前にある説明文
   ・メール送信ボタン上の写真添付案内
   ・メール送信ボタン下の補足文
   ========================================= */

.assessment-card__mail-template-note,
.assessment-card__mail-note,
.assessment-card__mail-help {
  margin-top: 16px;
  margin-bottom: 0;
  margin-inline: 0;
}



/* =========================================
   【メール-04】写真添付の案内文
   対象：メール送信ボタンの上にある説明文
   ========================================= */

.assessment-card__mail-note {
  margin-top: 0;
  margin-bottom: 16px;
  margin-inline: 0;
}



/* =========================================
   【メール-05】メール送信後の補足案内
   対象：メール送信ボタン下の説明文
   ========================================= */

.assessment-card__mail-help {
  font-size: 14px;
}



/* =========================================
   【メール-06】送信ボタン周辺の説明文の配置
   対象：
   ・写真を添付してください
   ・宛先・件名・記入項目入りでメールアプリが開きます

   【動作】
   ・メール送信エリア内の説明文だけ中央揃え
   ・LINEや電話の説明文には影響しない
   ========================================= */

.assessment-card__contact .assessment-card__mail-note,
.assessment-card__contact .assessment-card__mail-help {

  /* 必要に応じて変更する表示・配置 */
  text-align: center;
}

/* ================================================================
   【フォーム査定】入力フォーム・必須表示・ラジオ・チェック・送信結果
   Contact Form 7のHTML構造と連動するため、セレクタの変更は要確認。
   ================================================================ */

/* 【フォーム-01】フォーム基本レイアウト */
.assessment-card--form > .assessment-card__layout {
  /* 必要に応じて変更する表示・配置 */
  width: 100%;

  /* 操作に関わる設定：変更時は確認 */
  display: block;
}

/* 【フォーム-02】フォーム本文の横幅 */
.assessment-card--form .assessment-card__content {
  /* 必要に応じて変更する表示・配置 */
  width: 100%;

  /* 操作に関わる設定：変更時は確認 */
  max-width: none;
}

/* 【フォーム-03】フォーム上部の説明文 */
.assessment-card--form .assessment-card__description > p {
  /* 必要に応じて変更する表示・配置 */
  text-align: center;
}

/* 【フォーム-04】フォーム説明文の下側余白 */
.assessment-card--form .assessment-card__description > p:last-child {
  margin-bottom: 24px;
}


/* 【フォーム-05】入力フォーム全体 */
.assessment-form {
  width: 100%;
  margin-top: 14px; 
  padding: 28px;
  text-align: left;
  font-size: 14px;
  background: #eee;
  max-width: 100%;
  box-sizing: border-box;
}


/* 【フォーム-06】入力項目の外枠 */
.assessment-form .contact-forms {
  /* 必要に応じて変更する表示・配置 */
  width: 100%;
  margin: 0;
  text-align: left;
}

/* 【フォーム-07】入力項目名（dt） */
.assessment-form .contact-forms dt {
  padding: 20px 0 6.4px; /* 元の20px / 6.4px */
  font-size: 16px;
  line-height: 1.5;
  color: #222;
}


/* 【フォーム-08】必須表示 */
.assessment-form .contact-forms dt span {
  font-size: 14px;
  color: #dd2626;
  background-color: transparent !important;
}


/* 【フォーム-09】入力欄の外枠（dd） */
.assessment-form .contact-forms dd {
  /* 必要に応じて変更する表示・配置 */
  margin: 0;
}

/* 【フォーム-10】テキスト入力・選択欄 */
.assessment-form .contact-forms dd input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
.assessment-form .contact-forms dd textarea,
.assessment-form .contact-forms dd select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 4px;
  display: block;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid #dfe5eb;
  background: #fff;
  color: #222;
  font: inherit;
  line-height: 1.5;
}


/* 【フォーム-11】複数行入力欄 */
.assessment-form .contact-forms dd textarea {
  min-height: 150px;
  resize: vertical;
}


/* 【フォーム-12】入力中の枠 */
.assessment-form .contact-forms dd input:focus,
.assessment-form .contact-forms dd textarea:focus,
.assessment-form .contact-forms dd select:focus {
  border-color: #dd2626;
  outline: 2px solid #dd2626;
  outline-offset: 1px;
}


/* 【フォーム-13】ラジオの選択肢一覧 */
.assessment-form .contact-forms .wpcf7-radio,
.assessment-form .contact-forms .wpcf7-checkbox {
  gap: 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}


/* 【フォーム-14】各選択肢の余白 */
.assessment-form .contact-forms .wpcf7-list-item {
  /* 必要に応じて変更する表示・配置 */
  margin: 0;
}

/* 【フォーム-15】ラジオ本体の視覚的非表示 */
.assessment-form .contact-forms input[type="radio"] {
  width: 1px;
  height: 1px;
  margin: calc(-1 * 1px);
  padding: 0;
  display: block;
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* 【フォーム-16】ラジオ選択肢のラベル */
.assessment-form .contact-forms .wpcf7-radio .wpcf7-list-item label {
  /* 操作に関わる設定：変更時は確認 */
  cursor: pointer;
}

/* 【フォーム-17】選択肢の見た目 */
.assessment-form .contact-forms .wpcf7-list-item-label {
  min-height: 42px;
  padding: 9px 14px;
  line-height: 1.5;
  box-sizing: border-box;
  border-color: #dfe5eb;
  background: #fff;
  color: #222;
}


/* 【フォーム-18】ラジオ選択済みの色 */
.assessment-form .contact-forms input[type="radio"]:checked + .wpcf7-list-item-label {
  border-color: #dd2626;
  background: #dd2626;
  color: #fff;
  font-weight: 700;
}


/* 【フォーム-19】ラジオ操作時の枠 */
.assessment-form .contact-forms input[type="radio"]:focus-visible + .wpcf7-list-item-label {
  outline: 2px solid #dd2626;
  outline-offset: 2px;
}


/* 【フォーム-20】注意書き */
.assessment-form .notes {
  margin-top: 20px;
  margin-bottom: 0;
  margin-inline: 0;
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
  color: #4d4d4d;
}


/* 【フォーム-21】注意書き内のリンク */
.assessment-form .notes a {
  text-underline-offset: 2px;
  color: #dd2626;
  text-decoration: underline;
}


/* 【フォーム-22】送信ボタン：テーマ既定の青色に依存せず、フォーム専用色を使う */
#Assessment .assessment-form .wpcf7-submit {
  margin-top: 24px;
  margin-bottom: 0;
  margin-inline: auto;
  background: #dd2626;
  border-color: #dd2626;
  color: #fff;
  display: block;
}


/* 【フォーム-23】入力エラー表示 */
.assessment-form .wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: 13px;
  color: #dd2626;
}


/* 【フォーム-24】送信結果の表示 */
.assessment-form .wpcf7-response-output {
  margin-top: 20px;
  margin-bottom: 0;
  margin-inline: 0;
  padding: 12px 14px;
  border-radius: 6px;
  line-height: 1.7;
}


/* 【フォーム-25】画面幅600px以下のフォーム調整 */
@media (max-width: 600px) {


  .assessment-form .contact-forms dt {
    padding-top: 17.6px; 
  }


  .assessment-form .contact-forms .wpcf7-list-item-label {
    padding: 8px 12px;
  }


}


/* 【フォーム-26】チェックボックス本体の視覚的非表示 */
.assessment-card--form .contact-forms input[type="checkbox"] {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: calc(-1 * 1px);
  display: block;
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* 【フォーム-27】チェックボックスのラベル */
.assessment-card--form .contact-forms label {
  /* 操作に関わる設定：変更時は確認 */
  position: relative;
  cursor: pointer;
}

/* 【フォーム-28】チェック操作時の枠 */
.assessment-card--form .contact-forms input[type="checkbox"]:focus-visible
  + .wpcf7-list-item-label {
  outline: 3px solid #dd2626;
  outline-offset: 3px;
}


/* 【フォーム-29】チェック済みの色 */
.assessment-card--form .contact-forms input[type="checkbox"]:checked + .wpcf7-list-item-label {
  background: #dd2626;
  color: #fff;
  border-color: #dd2626;
  font-weight: 700;
}


/* =========================================
   【全体調整-01】共通H2の上側余白
   対象：電話・LINE・メール・フォームのH2
   ========================================= */

#Assessment .assessment-card__heading {

  /* 必要に応じて変更する表示・配置 */
  margin-top: 0;
}


/* =========================================
   【全体調整-02】説明文の上側余白
   対象：査定カードの説明文
   ========================================= */

#Assessment .assessment-card__description > p {

  /* 必要に応じて変更する表示・配置 */
  margin-top: 0;
}


/* =========================================
   【全体調整-03】電話・メール説明文の文字配置
   対象：電話査定・メール査定の説明文
   ========================================= */

#Assessment .assessment-card--tel .assessment-card__description > p,
#Assessment .assessment-card--mail .assessment-card__description > p {

  /* 必要に応じて変更する表示・配置 */
  text-align: left;
}


/* =========================================
   【全体調整-04】LINE友だち追加ボタン
   対象：LINE査定の緑色のボタン

   【注意】
   ・LINE専用CSSと共通ボタンCSSを
     補完・上書きしている設定。
   ・最終整理で統合候補とする。
   ========================================= */

#Assessment .assessment-card--line .assessment-line__button {
  gap: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #06c755;
  color: #fff;
  text-decoration: none;
  box-sizing: border-box;
  border-radius: 999px;
  font-weight: 700;
  line-height: 1.5;
}


/* マウスを乗せたときの背景色 */
#Assessment .assessment-card--line .assessment-line__button:hover {
  /* 新しい緑色を使わず、不透明度で反応を示す */
  opacity: 0.85;
}


/* =========================================
   【全体調整-05】コピーする文章の折り返し
   対象：LINE・メールの商品情報テンプレート
   ========================================= */

#Assessment .assessment-card__copy-text {

  /* ===== 原則変更しない：文章の表示 ===== */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}


/* =========================================
   【スマホ-01】画面幅600px以下の全体調整
   対象：電話・LINE・メール・フォーム

   【注意】
   ・画面幅600px以下で適用する。
   ・各カードの共通CSS・個別CSSを
     スマホ向けに調整する。
   ========================================= */

@media (max-width: 600px) {




  /* =====================================
     【スマホ-03】カード全体の余白・角丸
     ===================================== */

  #Assessment .assessment-card {
    border-radius: 14px;
  }



  /* =====================================
     【スマホ-04】共通H2の文字・余白
     ===================================== */

  #Assessment .assessment-card__heading {
    gap: 21px;
    font-size: clamp(
      19px,
      5vw,
      24px
    );
    line-height: 1.45;
  }



  /* =====================================
     【スマホ-05】共通H2アイコンサイズ（このセレクタで管理）
     対象：電話・LINE・メール・フォーム
     ===================================== */

  #Assessment .assessment-card__icon,
#Assessment .assessment-line__icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
  }



  /* =====================================
     【スマホ-06】LINE見出しのアイコンと文字の間隔
     ===================================== */

  #Assessment .assessment-line__heading-main {
    gap: 21px;
  }



  /* =====================================
     【スマホ-07】カード内部の要素間隔
     対象：画像・説明文・お問い合わせ
     ===================================== */

  #Assessment .assessment-card__layout {
    gap: 16px 16px;
  }



  /* =====================================
     【スマホ-08】お問い合わせエリアの内側余白
     対象：電話・メール
     ===================================== */

  #Assessment .assessment-card__contact {
    padding: 16px;
  }



  /* =====================================
     【スマホ-09】電話番号と相談ボタンの配置
     対象：電話査定
     ===================================== */

  #Assessment .assessment-card__contact-inner {

    /* ===== 原則変更しない：縦1列配置 ===== */
    grid-template-columns: minmax(0, 1fr);
  }


  /* =====================================
     【スマホ-10】電話番号・受付時間の中央揃え
     対象：電話査定
     ===================================== */

  #Assessment .assessment-card__contact-details,
  #Assessment .assessment-card__contact-details > p {

    /* 必要に応じて変更する表示・配置 */
    text-align: center;
  }


  /* =====================================
     【スマホ-11】電話番号の文字サイズ
     対象：電話査定
     ===================================== */

  #Assessment .assessment-card__contact-value {
    font-size: clamp(23px, 6vw, 30px);
  }



  /* =====================================
     【スマホ-12】共通相談ボタンの幅・配置
     対象：電話・メールのボタン
     ===================================== */

  #Assessment .assessment-card__button {

    /* 必要に応じて変更する表示・配置 */
    max-width: 100%;
    margin-inline: auto;
  }


  /* =====================================
     【スマホ-13】説明文・コピー文章の文字設定
     対象：
     ・電話・メールの説明文
     ・LINEの説明文
     ・コピーする文章
     ・メール送信の案内文
     ===================================== */

  #Assessment .assessment-card__description > p,
#Assessment .assessment-line__description,
#Assessment .assessment-card__copy-text,
#Assessment .assessment-card__mail-template-note,
#Assessment .assessment-card__mail-note,
#Assessment .assessment-card__mail-help {
    font-size: 14px;
    line-height: 1.75;
  }



  /* =====================================
     【スマホ-14】LINE友だち追加案内の余白
     ===================================== */

  #Assessment .assessment-line__friend-add {
    padding: 16px;
  }



  /* =====================================
     【スマホ-15】LINE友だち追加の説明文
     対象：緑色ボタンの上の文章
     ===================================== */

  #Assessment .assessment-line__friend-add-description {
    font-size: 14px;
  }



  /* =====================================
     【スマホ-16】LINE友だち追加の補足文
     対象：緑色ボタンの下の文章
     ===================================== */

  #Assessment .assessment-line__friend-add-note {
    font-size: 12px;
  }



  /* =====================================
     【スマホ-17】LINE友だち追加ボタン
     ===================================== */

  #Assessment .assessment-line__button {
    font-size: 15px;
    min-height: 48px;
    padding: 12px;
  }



  /* =====================================
     【スマホ-18】LINEのH3見出し
     対象：写真送付・商品情報コピーの見出し
     ===================================== */

  #Assessment .assessment-line__section-heading {
    font-size: 19px;
  }



  /* =====================================
     【スマホ-19】コピー欄の内側余白
     対象：LINE・メール
     ===================================== */

  #Assessment .assessment-card__copy-group {
    padding: 16px;
  }



  /* =====================================
     【スマホ-20】コピーボタンの最大幅
     対象：LINE・メール
     ===================================== */

  #Assessment .assessment-card__copy-button {

    /* 必要に応じて変更する表示・配置 */
    max-width: 100%;
  }

}


/* =========================================
   スマホ調整：画面幅600px以下（直接指定）
   PCと値が異なる箇所だけをまとめています。
   ========================================= */
@media (max-width: 600px) {
  #Assessment { padding-inline: 12px; }
  .assessment-card { margin-block: 16px; }
  .assessment-card { padding: 16px; }
  .assessment-card__heading { gap: 21px; }
  .assessment-card__heading { margin-bottom: 18px; }
  .assessment-card__heading { padding-bottom: 14px; }
  .assessment-card__icon { flex: 0 0 40px; }
  .assessment-card__icon { width: 40px; }
  .assessment-card__icon { height: 40px; }
  .assessment-card__layout { gap: 16px 16px; }
  .assessment-card__contact { padding: 16px; }
  .assessment-line__heading-main { gap: 21px; }
  .assessment-line__icon { flex: 0 0 40px; }
  .assessment-line__icon { width: 40px; }
  .assessment-line__icon { height: 40px; }
  .assessment-line__friend-add { padding: 16px; }
}