/* 共通 */
#navi td {
    background: url("../images/co/navi_icon_menu.gif") no-repeat left center;
}

#sub .sub-menu {
    background: url("../images/co/sub_menu_header.gif") no-repeat left top;
}

#sub .sub-menu ul {
    background: url("../images/co/sub_menu_footer.gif") no-repeat left bottom;
}

#sub .sub-menu li {
    background: url("../images/co/sub_icon_menu.gif") 0 1.5em no-repeat;
    background-size: 3px 3px;
}

#sub .sub-menu ul ul li {
    font-size: 0.8em;
}

#con h2 {
    background: url("../images/co/all_h2_back.gif") repeat-x;
    background-size: cover;
}

#con table {
    background: url("../images/co/con_hig_table_backgroud.jpg") repeat-y;
}

#footer #add {
    background: url("../images/co/foo_line_back.jpg") repeat-y;
}

#chat_button {
    background-color: #FF6600;
}

/* PC */
@media screen and (min-width: 601px) {
    #back {
        background: url("../images/co/back_img_background.jpg") repeat-y;
    }
}

/* SP */
@media screen and (max-width: 600px) {
	#sub .hamburger-container,
	#sub .sub-menu {
	    border-color: #FF6600;
	}

	#sub .hamburger span {
	    background-color: #FF6600;
	}

	.hamburger-text,
	#sub p {
	    color: #FF6600;
	}
}

/* 20260120 FAQ*/
  /* FAQ全体のコンテナ */
  .faq-item {
    margin-bottom: 20px;
  }

  /* 質問部分 (Q) */
  .faq-item summary {
    display: flex;
    align-items: center;
    font-weight: bold;
    cursor: pointer;
    list-style: none;
    font-size: 16px;
    color: #333;
    padding: 5px 0;
  }
  
  .faq-item summary::-webkit-details-marker {
    display: none;
  }

  /* Qアイコン: Impactフォントを適用 */
  .faq-item summary::before {
    content: "Q";
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: 32px; /* Impactは少し大きくすると画像に似ます */
    margin-right: 12px;
    line-height: 1;
    color: #FF6600;
  }

  /* 回答部分 (A) */
  .faq-answer {
    background-color: #fff5f7; /* 薄いピンク */
    padding: 12px 15px;
    margin-top: 5px;
    display: flex;
    align-items: flex-start;
  }

  /* Aアイコン: Impactフォントを適用 */
  .faq-answer::before {
    content: "A";
    color: #cc0000; /* 赤 */
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: 32px;
    margin-right: 12px;
    line-height: 1;
  }

  /* 回答テキスト */
  .faq-answer p {
    margin: 0;
    padding-top: 6px; /* 文字の高さ調整 */
    line-height: 1.6;
    color: #333;
  }

/* 20260120 買取価格*/
/* 全体 */
.price-list {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fcfcfc;
}

/* 画像枠 */
.price-list-img {
  flex: 0 0 110px;
  height: 160px;
  padding: 10px;
  background-color: #f5f5f5;

  display: flex;
  align-items: center;        /* 縦中央 */
  justify-content: center;    /* 横中央 */

  box-sizing: border-box;
}

/* 画像本体（最重要） */
.price-list-img img {
  /* 既存CSS完全遮断 */
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  max-width: none !important;
  max-height: none !important;

  /* 枠基準で描画 */
  width: 100% !important;
  height: 100% !important;

  /* 枠内に収めて中央表示 */
  object-fit: contain;
  object-position: center center !important;

  display: block;
}

/* テキスト側 */
.price-list-content {
  flex: 1;
  min-width: 200px;
  padding: 15px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  box-sizing: border-box;
}

/* 商品名 */
.price-list-title {
  margin: 0 0 5px 0;
  font-size: 1.1em;
}

/* 価格行 */
.price-list-price-row {
  margin: 0 0 5px 0;
  font-weight: bold;
}

/* 金額 */
.price-list-price {
  font-weight: bold;
  font-size: 1.25em;
  color: red;
}

/* 日付 */
.price-list-date {
  color: #666;
  margin-left: 0.5em;
}

/* 20260120 買取実績*/
.price-history-date,
.price-history-area {
  font-weight: bold;
}

.price-history-price {
  font-weight: bold;
  font-size: 1.25em;
  color: red;
}

/* 20260128 特徴 買取価格一覧 画像クリック範囲を中央へ */
/* 画像とリンクを重ねるための親要素 */
.responsive-link-container {
  position: relative;
  display: inline-block;
  line-height: 0;
  max-width: 100%;
}

/* 画像自体の設定（クリックに反応させない） */
.target-img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 中央30%のクリックエリア：透明な「板」を上に浮かせるイメージ */
.safe-click-zone {
  position: absolute;
  top: 35%;    /* 上から35%をガード */
  left: 35%;   /* 左から35%をガード */
  width: 30%;  /* 中央30%だけ有効 */
  height: 30%; /* 中央30%だけ有効 */
  z-index: 10;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent; /* スマホのタップ時青枠を消す */
}

/* タップ・ホバーした時だけ、リンクであることをユーザーに伝える */
.safe-click-zone:active,
.safe-click-zone:hover {
  background: rgba(0, 0, 0, 0.1); /* ほんのりグレーにして「押せた」感を出す */
}
