/**
 * オンキヨー補聴器比較ページ専用CSS
 * PC: 2カラム / スマホ: 1カラム
 * 画像横幅: 1200px基準
 */

/* 共通設定 */
#contentWrap #content.onkyo-comparison {
  max-width: 1200px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}

.onkyo-comparison img {
  max-width: 100%;
  height: auto;
}

/* スマホ用改行（PCでは非表示） */
.sp-br {
  display: none;
}

/* セクション共通 */
.oc-section {
  margin-bottom: 40px;
  background: #fff;
  border: 1px solid #ddd;
}

.oc-section__title {
  margin: 0;
  padding: 12px 20px;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
}

.oc-section__title--red {
  background: linear-gradient(to bottom, #c41e3a, #a01830);
}

.oc-section__title--blue {
  background: linear-gradient(to bottom, #0066cc, #004c99);
}

.oc-section__title--orange {
  background: linear-gradient(to bottom, #e67e22, #cc6600);
}

.oc-section__title--green {
  background: linear-gradient(to bottom, #27ae60, #1e8449);
}

.oc-section__body {
  padding: 20px;
}

.oc-section__note {
  font-size: 14px;
  color: #666;
  margin-top: 15px;
}

/* レスポンシブ画像 */
.oc-img-responsive {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================
   セクション1: 難聴と認知症との関係
   ============================================ */
.oc-sec1 {
  margin-bottom: 40px;
}

.oc-sec1__topline {
  height: 4px;
  background: #c41e3a;
}

.oc-sec1__inner {
  border: 1px solid #ccc;
  border-top: none;
  padding: 20px 30px 30px;
  text-align: center;
}

#content .oc-sec1__title {
  display: inline-block;
  font-size: 24px;
  font-weight: bold;
  color: #333;
  border: 2px solid #353f9e;
  border-radius: 40px;
  padding: 10px 50px;
  margin: 0 0 25px 0;
  background: #fff;
}

.oc-sec1__body {
  display: flex;
  align-items: flex-start;
  gap: 25px;
  text-align: left;
}

.oc-sec1__image {
  flex-shrink: 0;
  width: 200px;
}

.oc-sec1__image img {
  width: 100%;
}

.oc-sec1__text {
  flex: 1;
  font-size: 16px;
  line-height: 1.8;
}

/* ============================================
   セクション2: 補聴器選びの基本
   ============================================ */
.oc-sec2 {
  margin-bottom: 40px;
}

.oc-sec2__topline {
  height: 4px;
  background: #353f9e;
}

.oc-sec2__inner {
  border: 1px solid #ccc;
  border-top: none;
  padding: 20px 30px 30px;
  text-align: center;
}

#content .oc-sec2__title {
  display: inline-block;
  font-size: 24px;
  font-weight: bold;
  color: #333;
  border: 2px solid #353f9e;
  border-radius: 40px;
  padding: 10px 50px;
  margin: 0 0 20px 0;
  background: #fff;
}

.oc-sec2__lead {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

.oc-sec2__image {
  margin-bottom: 20px;
}

.oc-sec2__image img {
  max-width: 100%;
  height: auto;
}

.oc-sec2__note {
  font-size: 14px;
  color: #666;
  text-align: left;
}

.oc-section2__image {
  margin: 20px 0;
  text-align: center;
}

/* ============================================
   セクション3: 3モデル比較
   ============================================ */
.oc-sec3 {
  margin-bottom: 40px;
  text-align: center;
}

#content .oc-sec3__title {
  display: inline-block;
  font-size: 24px;
  font-weight: bold;
  color: #333;
  border: 2px solid #353f9e;
  border-radius: 40px;
  padding: 10px 50px;
  margin: 0 0 20px 0;
  background: #fff;
}

.oc-sec3__subtitle {
  font-size: 18px;
  font-weight: bold;
  color: #353f9e;
  margin: 0 0 15px 0;
  text-align: center;
}

.oc-table-wrap {
  overflow-x: auto;
}

.oc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.oc-table th,
.oc-table td {
  border: 1px solid #ccc;
  padding: 12px 10px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.oc-table thead th {
  background: #353f9e;
  color: #fff;
  font-weight: bold;
}

.oc-table thead th.oc-table__product--d21 {
  background: #e8f4e8;
  color: #333;
}

.oc-table thead th.oc-table__product--d31 {
  background: #e3f2fd;
  color: #333;
}

.oc-table thead th.oc-table__product--sc1 {
  background: #fce4ec;
  color: #333;
}

.oc-table tbody th {
  background: #f0f0f0;
  text-align: center;
  font-weight: bold;
}

/* チャンネル数の行を強調 */
.oc-table__row--highlight th,
.oc-table__row--highlight td {
  border: 2px solid #c41e3a;
  color: #c41e3a;
  font-weight: bold;
}

.oc-table tr.oc-table__row--highlight td strong {
  font-size: 20px;
  margin-right: 2px;
  vertical-align: baseline;
  color: #c41e3a;
}

.oc-table__product {
  font-weight: bold;
}

.oc-table__product--d21 {
  background: #e8f4e8 !important;
  color: #2e7d32;
}

.oc-table__product--d31 {
  background: #e3f2fd !important;
  color: #1565c0;
}

.oc-table__product--sc1 {
  background: #fce4ec !important;
  color: #c2185b;
}

.oc-table td strong {
  font-size: 18px;
  color: #e67e22;
}

/* 使用シーン別テーブル */
.oc-table--scene td {
  font-size: 20px;
}

.oc-recommend {
  color: #e67e22;
  font-weight: bold;
}

.oc-not-recommend {
  color: #999;
}

/* ============================================
   セクション4: チャンネル数の違い
   ============================================ */
.oc-sec4 {
  margin-bottom: 40px;
  text-align: center;
}

#content .oc-sec4__title {
  display: inline-block;
  font-size: 24px;
  font-weight: bold;
  color: #333;
  border: 2px solid #353f9e;
  border-radius: 40px;
  padding: 10px 50px;
  margin: 0 0 20px 0;
  background: #fff;
}

.oc-sec4__lead {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 20px;
}

.oc-section4__subtitle {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  margin: 30px 0 30px;
  padding: 10px 20px;
  background: #353f9e;
  color: #fff;
  border-radius: 4px;
}

.oc-channel-compare {
  display: flex;
  gap: 30px;
  justify-content: center;
  margin-top: 30px;
}

.oc-channel-compare__item {
  flex: 1;
  max-width: 400px;
  text-align: center;
}

.oc-channel-compare__image {
  position: relative;
  margin-bottom: 15px;
  display: inline-block;
}

.oc-channel-compare__label {
  position: absolute;
  top: -15px;
  left: -15px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  border-radius: 50%;
  color: #fff;
  z-index: 1;
}

.oc-channel-compare__item--few .oc-channel-compare__label {
  background: #c62828;
}

.oc-channel-compare__item--many .oc-channel-compare__label {
  background: #1565c0;
}

.oc-channel-compare__image img {
  max-width: 200px;
  border-radius: 8px;
}

.oc-channel-compare__desc {
  text-align: left;
  font-size: 14px;
  line-height: 1.6;
  background: #fff;
  padding: 15px;
  border-radius: 8px;
  border: 2px solid #ccc;
}

.oc-channel-compare__desc p {
  margin: 0;
}

.oc-channel-compare__item--few .oc-channel-compare__desc {
  border-color: #c62828;
}

.oc-channel-compare__item--many .oc-channel-compare__desc {
  border-color: #1565c0;
}

/* ============================================
   セクション5: 使用シーン別比較
   ============================================ */
.oc-sec5 {
  margin-bottom: 40px;
  text-align: center;
}

#content .oc-sec5__title {
  display: inline-block;
  font-size: 24px;
  font-weight: bold;
  color: #333;
  border: 2px solid #353f9e;
  border-radius: 40px;
  padding: 10px 50px;
  margin: 0 0 20px 0;
  background: #fff;
}

.oc-sec5__note {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.oc-sec5__subtitle {
  font-size: 18px;
  font-weight: bold;
  color: #353f9e;
  margin: 30px 0 15px;
}

.oc-scene-images {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.oc-scene-images__item {
  flex: 1;
  max-width: 200px;
  text-align: center;
}

.oc-scene-images__item img {
  width: 200px;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid #ddd;
}

.oc-scene-images__item span {
  display: block;
  margin-top: 10px;
  font-weight: bold;
  color: #333;
}

/* ============================================
   セクション6: まとめ（コンパクト版）
   ============================================ */
.oc-sec6 {
  margin-bottom: 40px;
  text-align: center;
}

#content .oc-sec6__title {
  display: inline-block;
  font-size: 24px;
  font-weight: bold;
  color: #333;
  border: 2px solid #353f9e;
  border-radius: 40px;
  padding: 10px 50px;
  margin: 0 0 20px 0;
  background: #fff;
}

/* 製品カード */
.oc-card {
  margin-bottom: 15px;
  text-align: left;
}

.oc-card__header {
  margin: 0;
  padding: 8px 15px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}

.oc-card__header--blue {
  background: #353f9e;
}

.oc-card__header--red {
  background: #c41e3a;
}

.oc-card__icon {
  margin-right: 8px;
}

.oc-card__body {
  display: flex;
  gap: 15px;
  padding: 15px;
  border: 1px solid #ddd;
  border-top: none;
  background: #fff;
  align-items: stretch;
}

/* 商品画像（左カラム） */
.oc-card__product {
  flex-shrink: 0;
  width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.oc-card__product img {
  width: 100%;
  max-width: 200px;
}

/* チップ（画像の上に配置） */
.oc-card__product .oc-card__chip {
  flex-shrink: 0;
}

/* 情報カラム（ポイント+デメリット縦並び） */
.oc-card__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.oc-card__point,
.oc-card__demerit {
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.6;
  border-radius: 6px;
}

/* おすすめカラム */
.oc-card__recommend {
  flex: 0.8;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  background: #f0f8ff;
  border: 2px solid #353f9e;
  border-radius: 6px;
}

.oc-card__point {
  background: #fce4ec;
  border: 2px solid #f8bbd0;
}

.oc-card__demerit {
  background: #fff8e1;
  border: 2px solid #ffe082;
}

.oc-card__label {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 5px;
}

.oc-card__label--pink {
  background: #f8bbd9;
  color: #c2185b;
}

.oc-card__label--yellow {
  background: #fff59d;
  color: #f57f17;
}

.oc-card__point ul,
.oc-card__demerit ul,
.oc-card__recommend ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.oc-card__point li,
.oc-card__demerit li,
.oc-card__recommend li {
  margin-bottom: 3px;
  padding-left: 1em;
  text-indent: -1em;
}

.oc-card__point li::before {
  content: "●";
  color: #c2185b;
  margin-right: 0.3em;
}

.oc-card__demerit li::before {
  content: "●";
  color: #f57f17;
  margin-right: 0.3em;
}

.oc-card__recommend li::before {
  content: "●";
  color: #333;
  margin-right: 0.3em;
}

.oc-card__recommend-title {
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

/* チップ */
.oc-card__chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  background: #f5a623;
  border-radius: 50%;
  color: #fff;
  text-align: center;
}

.oc-card__chip-num {
  font-size: 32px;
  font-weight: bold;
  line-height: 1;
}

.oc-card__chip-text {
  font-size: 12px;
  font-weight: bold;
  line-height: 1.2;
}

/* 購入ボタン（おすすめ内） */
.oc-card__recommend .oc-card__btn {
  margin-top: auto;
}

.oc-card__btn {
  display: inline-block;
  padding: 10px 30px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  background: #c41e3a;
  border: none;
  border-radius: 25px;
  text-decoration: none;
  text-align: center;
  transition: all 0.3s;
}

.oc-card__btn:hover {
  background: #a01830;
  color: #fff;
  text-decoration: none;
}

/* ============================================
   レスポンシブ対応（タブレット）
   ============================================ */
@media screen and (max-width: 1024px) {
  .oc-card__product {
    width: 180px;
  }

  .oc-card__product img {
    max-width: 160px;
  }

  .oc-card__chip {
    width: 75px;
    height: 75px;
  }

  .oc-card__chip-num {
    font-size: 28px;
  }

  #content .oc-sec1__title,
  #content .oc-sec2__title,
  #content .oc-sec3__title,
  #content .oc-sec4__title,
  #content .oc-sec5__title,
  #content .oc-sec6__title {
    font-size: 20px;
    padding: 10px 35px;
  }

  .oc-channel-compare__image img {
    max-width: 180px;
  }
}

/* ============================================
   レスポンシブ対応（スマートフォン）
   ============================================ */
@media screen and (max-width: 767px) {
  #contentWrap #content.onkyo-comparison {
    font-size: 14px;
    padding: 30px 10px 0;
  }

  /* スマホ用改行を表示 */
  .sp-br {
    display: block;
  }

  .oc-section__title {
    font-size: 16px;
    padding: 10px 15px;
  }

  .oc-section__body {
    padding: 15px;
  }

  /* セクション1 */
  .oc-sec1__inner {
    padding: 15px;
  }

  #content .oc-sec1__title {
    font-size: 18px;
    padding: 8px 40px;
    line-height: 1.4;
  }

  .oc-sec1__body {
    flex-direction: column;
    gap: 15px;
  }

  .oc-sec1__image {
    width: 100%;
    text-align: center;
  }

  .oc-sec1__image img {
    width: 150px;
  }

  /* セクション2 */
  .oc-sec2__inner {
    padding: 15px;
  }

  #content .oc-sec2__title {
    font-size: 18px;
    padding: 8px 40px;
    line-height: 1.4;
  }

  .oc-sec2__lead {
    font-size: 16px;
  }

  /* セクション3 */
  #content .oc-sec3__title {
    font-size: 18px;
    padding: 8px 40px;
    line-height: 1.4;
  }

  .oc-sec3__subtitle {
    font-size: 14px;
  }

  /* テーブル（横スクロールでPC版と同じ表示） */
  .oc-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -10px;
    padding: 0 10px;
  }

  /* 親テーマの table th, table td { display: block } を上書き */
  table.oc-table {
    display: table !important;
    width: auto;
  }

  table.oc-table thead {
    display: table-header-group !important;
  }

  table.oc-table tbody {
    display: table-row-group !important;
  }

  table.oc-table tr {
    display: table-row !important;
  }

  table.oc-table th,
  table.oc-table td {
    display: table-cell !important;
    padding: 8px 6px !important;
    font-size: 12px;
  }

  table.oc-table td strong {
    font-size: 14px;
  }

  /* セクション4 */
  #content .oc-sec4__title {
    font-size: 18px;
    padding: 8px 40px;
    line-height: 1.4;
  }

  .oc-sec4__lead {
    font-size: 14px;
    text-align: left;
  }

  .oc-section4__subtitle {
    font-size: 14px;
    padding: 8px 15px;
  }

  /* チャンネル比較 */
  .oc-channel-compare {
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 20px 0;
    margin-top: 20px;
  }

  .oc-channel-compare__item {
    max-width: 90%;
    padding-left: 15px;
  }

  .oc-channel-compare__label {
    width: 50px;
    height: 50px;
    font-size: 14px;
    top: -10px;
    left: -10px;
  }

  .oc-channel-compare__image img {
    max-width: 200px;
  }

  .oc-channel-compare__desc {
    font-size: 13px;
  }

  /* セクション5 */
  #content .oc-sec5__title {
    font-size: 18px;
    padding: 8px 40px;
    line-height: 1.4;
  }

  .oc-sec5__subtitle {
    font-size: 14px;
  }

  /* 使用シーン画像 */
  .oc-scene-images {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }

  .oc-scene-images__item {
    max-width: 100%;
  }

  .oc-scene-images__item img {
    width: 100%;
    max-width: 250px;
    height: auto;
  }

  /* セクション6 */
  #content .oc-sec6__title {
    font-size: 18px;
    padding: 8px 40px;
    line-height: 1.4;
  }

  /* セクション6: 製品カード */
  .oc-card__header {
    font-size: 14px;
    padding: 8px 12px;
  }

  .oc-card__body {
    flex-direction: column;
    gap: 10px;
    padding: 12px;
  }

  .oc-card__product {
    width: 100%;
    flex-direction: row;
    justify-content: center;
    gap: 15px;
    margin-bottom: 5px;
  }

  .oc-card__chip {
    width: 70px;
    height: 70px;
  }

  .oc-card__chip-num {
    font-size: 26px;
  }

  .oc-card__chip-text {
    font-size: 10px;
  }

  .oc-card__product img {
    max-width: 120px;
  }

  .oc-card__info {
    width: 100%;
  }

  .oc-card__point,
  .oc-card__demerit {
    flex: none;
    width: 100%;
    font-size: 13px;
  }

  .oc-card__recommend {
    flex: none;
    width: 100%;
    font-size: 13px;
    background: #f0f8ff;
    border: 2px solid #353f9e;
    border-radius: 6px;
    padding: 12px;
  }

  .oc-card__recommend .oc-card__btn {
    display: block;
    text-align: center;
    margin-top: 10px;
  }

  .oc-card__btn {
    padding: 12px 25px;
    font-size: 14px;
  }
}