@charset "utf-8";
body {
  font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ ProN",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;
}

p{
  font-size: 14px;
  color: #444444;
  font-weight: 600;
  text-align: justify;
  text-justify: inter-ideograph;
  line-break: strict;
  word-break: break-all; /* or keep-all（調整） */
}


.tac {
  text-align: center;
}

.scroll_txt{
  font-size: 18px;
  color: #696969;
}


@media screen and (min-width: 768px){
  p{
    font-size: 17px;
  }


.scroll_txt{
  font-size: 23px;
  color: #696969;
}}

img {
    width: 100%;
    display: block;
    object-fit: contain;
}

#wrapper{
    max-width: 700px;
    margin: auto;
}

.sp {
  display: none;
}
.pc{
  display:none;
}

@media screen and (min-width: 768px){
  .pc{
    display:block;
  }
}

.section_title_img{
  display:block;
  margin:0;
}

@media screen and (max-width: 767px) {
  .sp {
    display: block;
  }
}

/* ヘッダー */
.site-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  justify-content: center;
  height: 47px;
  padding: 0 16px;
  background: #2E3E88;
  border-bottom: 1px solid #e5e5e5;
  box-sizing: border-box;
}

.hamburger-menu {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.hamburger-menu .line {
  display: block;
  width: 100%;
  height: 3px;
  margin: 5px 0;
  background: #ffffff;
  border-radius: 999px;
  transition: 0.3s ease;
}

.hamburger-menu.active .line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger-menu.active .line:nth-child(2) {
  opacity: 0;
}

.hamburger-menu.active .line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.header_text {
  box-sizing: border-box;
  padding: 0 40px;
  width: 100%;
  text-align: center;
}

.header_text p {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: #ffffff;
  white-space: nowrap;
}
/* PCだけ文字大きく */
@media screen and (min-width: 768px) {
  .header_text p {
    font-size: 18px;
  }
  .header_text {
    padding: 0 60px;
}
}

/* 開閉メニュー */
.hamburger-dropdown {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  background: #fff;
  transition: max-height 0.35s ease;
  border-bottom: 1px solid transparent;
  box-sizing: border-box;
}

.hamburger-dropdown.open {
  max-height: 1000px;
  border-bottom: 1px solid #e5e5e5;
}

.form-content {
  padding: 5%;
  box-sizing: border-box;
}

.form-content > div:first-child {
  margin-bottom: 20px;
  padding: 14px 12px;
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: #666;
}

.form-content a {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  text-decoration: none;
  color: #222;
  font-size: 14px;
  line-height: 1.7;
}

.form-content a:last-child {
  border-bottom: none;
}

/* MV */
.mv img {
  display: block;
  width: 100%;
  height: auto;
}

p.justify {
  padding: 0 3%;
}

.blue {
  color: #0038B1;
}

.pink{color: #D360B1;}

.bold {
  font-weight: 800;
}
.big {
  font-size: 16px;
}

.marker {
  background: linear-gradient(transparent 45%, #fff7c1 45%);
}

/* ===============================
ドクターコンテンツ全体
=============================== */

.doctor_comment {
  background: #efefef;
  padding: 20px 14px 24px;
  box-sizing: border-box;
}


/* ===============================
ドクターヘッダー
=============================== */

.doctor_head {
  position: relative;
  margin-bottom: 16px;
}


/* 顔写真（丸） */

.doctor_face {
  position: absolute;
  top: -12px;
  right: -3px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #2f3f91;
  background: #fff;
  z-index: 2;
}

.doctor_face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* 名前帯 */

.doctor_name {
  margin: 0;
  background: #ffffff;
  color: #2f3f91;
  padding: 10px 70px 10px 14px;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  position: relative;
  z-index: 1;

  margin-right: 80px;
  border: 3px solid #2f3f91;
  border-radius: 8px;
}

/* 名前大きく */

.doctor_big {
  font-size: 26px;
}


/* サブタイトル */

.doctor_sub {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: #444;
}
@media screen and (min-width: 768px){
  .doctor_big{
    font-size: 35px;
  }
  .doctor_sub {
    font-size: 22px;
  }
}


/* ===============================
白ボックス
=============================== */

.doctor_body {
  position: relative;
}

.doctor_balloon {
  background: #fff;
  border-radius: 10px;
  padding: 16px 14px 18px;
  box-sizing: border-box;
  position: relative;
}

/* 吹き出し三角 */

.doctor_balloon::before {
  content: "";
  position: absolute;
  top: -14px;
  right: 38px;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 14px solid #fff;
}

/* ===============================
青帯見出し
=============================== */

.doctor_balloon_ttl {
  margin: 0 0 14px;
  background: #2f3f91;
  color: #fff;
  padding: 12px 14px 12px 18px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  position: relative;
}

.doctor_balloon_ttl::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 100%;
  background: #cbb3e8;
}

/* ===============================
本文
=============================== */

.doctor_text {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.7;
  font-weight: 700;
  color: #333;
}


/* ===============================
画像
=============================== */

.doctor_img {
  margin: 0 0 16px;
  border-radius: 14px;
  overflow: hidden;
}

.doctor_img img {
  width: 100%;
  display: block;
}


/* ===============================
注釈
=============================== */

.doctor_note {
  text-align: right;
  font-size: 11px;
  color: #777;
  margin: 0;
}

.checklist{
  padding: 3% 0 0 0;
}

.question_nav {
  display: flex;
  justify-content: space-between;
  padding: 0 2%;
  box-sizing: border-box;
}

.question_title{
  background-color: #efefef;
}
.question_bg{
  background: linear-gradient(
    to bottom,
    #FFFBEF 0%,
    #FFEEF6 50%,
    #F2F5FF 100%
  );
}

.question_btn {
  width: calc((100% - 24px) / 3);
  min-height: 80px;
  background: #2E3E88;
  border-radius: 10px;
  text-decoration: none;
  color: #fff;
  box-sizing: border-box;
  padding: 12px 0px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  /* ボタンぽくする */
  box-shadow: 0 8px 0 #1c2a63;
  transition: 0.15s ease;
}

.question_text {
  display: block;
  width: 100%;
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
  font-weight: 700;
}
.question_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: 11px;
  line-height: 1;
  margin-top: 8px;
}

@media screen and (min-width: 768px){
  .question_text{
    font-size: 15px;
  }

.img_inline{
  display:block;
  margin:12px 0;
}
.doctor_comment{
  padding: 40px 14px 24px;
}

.doctor_name {
    padding: 10px 70px 10px 14px;
    font-weight: 700;
    font-size: 20px;
    margin-right: 90px;
  }

  .doctor_face {
    width: 150px;
    height: 150px;
    top: -32px;
}

.doctor_big{
    font-size: 35px;
  }
.doctor_sub {
    font-size: 22px;
  }

  .doctor_balloon_ttl {
    font-size: 20px;
  }
  
.doctor_text {
  font-size: 17px;
}
}

/* ===============================
セクション全体
=============================== */

.section_block {
  margin-top: 40px;
  scroll-margin-top: 80px;
}


/* ===============================
タイトル帯
=============================== */

.section_title {
  margin: 0;
  padding: 16px 5%;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;

  background: linear-gradient(
    90deg,
    #2547AC 0%,
    #B7A0D0 100%
  );
}
@media screen and (min-width: 768px) {
  .section_title{
    font-size: 35px;
  }
}

/* ===============================
本文エリア
=============================== */

.section_inner {
  padding: 18px 3%;
  box-sizing: border-box;
}

.center_hard_inner{
  padding: 0 3% 5%;
  margin-top: 0;
  box-sizing: border-box;
  background-color: #ffd9f4;
}

.center_hard_inner p:first-child{
  margin-top: 0;
}

.chart_title{
  background-color: #ffd9f4;
}

.chart{
  display:block;
  padding: 0 3% 10% 3%;
  background-color: #f6f3ee;
}
.compare_bg {
  background-color: #F7EFFF;
  padding: 10% 3%;
}

.compare_section {
  margin: 5% 0;
}

.compare_scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 3px solid #294fb4;
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
  background: #fff;
  position: relative;
}

@media screen and (min-width: 768px) {
  .compare_scroll {
    overflow-x: visible;
  }

  .compare_table {
    min-width: 100%;
  }
}

.compare_table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: #fff;
  font-weight: 700;
  color: #333;
}

.compare_table th,
.compare_table td {
  border: 1px solid #bfbfbf;
  padding: 10px 1px;
  text-align: center;
  vertical-align: middle;
  background: #fff;
  box-sizing: border-box;
}

.compare_table thead th {
  background: #fff;
}

/* 左の項目列 */
.row_head {
  width: 88px;
  background: #264db2 !important;
  color: #fff;
  font-size: 14px;
  line-height: 1.35;
}

/* 商品ヘッダー */
.product_head {
  background: #f8f8f8 !important;
  vertical-align: top;
  padding: 10px 6px 12px;
}

.product_img {
  display: block;
  width: 88px;
  height: 52px;
  object-fit: contain;
  margin: 0 auto 8px;
  background: #fff;
}

.product_name {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #2f8cff;
  font-size: 14px;
  line-height: 1.2;
  text-decoration: underline;
  font-weight: 700;
  height: 45px;
}

/* おすすめ列 */
.is-recommend {
  background: #fff9d2 !important;
}

/* ===== ここ大事 ===== */
/* 1行目は sticky ではなく JS で動かす */
.sticky_head {
  position: relative;
  top: auto;
  z-index: 60;
  will-change: transform;
}

/* thead全体の1行目も見た目保持 */
.compare_table thead th {
  position: relative;
  z-index: 60;
  will-change: transform;
}

/* 左端固定はそのまま残す */
.sticky_col {
  position: sticky;
  left: 0;
  z-index: 70;
}

/* 左上セルはさらに前面 */
thead .sticky_col {
  z-index: 90;
}

/* 評価 */
.stars {
  color: #f3b300;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.score {
  font-size: 15px;
}

/* 価格 */
.price_block {
  display: grid;
  gap: 8px;
  font-size: 13px;
  line-height: 1.3;
}

.price_block strong {
  font-size: 14px;
}

.price_block div + div {
  border-top: 1px dashed #ddd;
  margin-top: 6px;
  padding-top: 6px;
}

/* 記号 */
.mark {
  display: inline-block;
  font-size: 26px;
  line-height: 1;
  margin-bottom: 4px;
}

.mark.red {
  color: #ff3b30;
}

.mark.yellow {
  color: #f4b63c;
}

.mark.blue {
  color: #6d7cff;
}

.red_text {
  color: #ff1f1f;
}

/* ボタン */
.official_btn {
  display: inline-block;
  min-width: 86px;
  padding: 7px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff9b1f 0%, #ff7b00 100%);
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.compare_note {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: #666;
  text-align: right;
}

/* SP */
@media screen and (max-width: 767px) {
  .compare_table {
    min-width: 532px;
  }

  .row_head {
    width: 92px;
    font-size: 13px;
  }

  .product_img {
    width: 78px;
    height: 46px;
  }

  .product_name {
    font-size: 14px;
  }

  .stars {
    font-size: 16px;
  }

  .price_block {
    font-size: 12px;
  }

  .price_block strong {
    font-size: 14px;
  }

  .compare_table th,
  .compare_table td {
    font-size: 12px;
    width: 88px;
  }
}


/* =========================
口コミランキング
========================= */

.pickup_section{
  background: #f2f2f2;
  padding: 15px 0 25px;
}

.pickup_title{
  display: block;
  width: 90%;
  margin: 0 auto 15px;
}

.pickup_list{
  width: 92%;
  margin: 0 auto;
}

/* カード */
.pickup_card{
  position: relative;
  background: #fff;
  padding: 14px 12px 14px;
  margin-bottom: 16px;
  box-sizing: border-box;
}

.pickup_card_gold{
  border: 2px solid #e0aa19;
}

.pickup_card_silver{
  border: 2px solid #bfbfbf;
}

/* 王冠帯 */
.pickup_rank_badge{
  position: absolute;
  top: -2px;
  left: 12px;
  width: 52px;
  height: 51px;
  background: #f3b400;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 8px;
  box-sizing: border-box;
  z-index: 2;
}

.pickup_card_silver .pickup_rank_badge{
  background: #bfbfbf;
}

/* 三角 */
.pickup_rank_badge::before,
.pickup_rank_badge::after{
  content: "";
  position: absolute;
  bottom: -12px;
  border-top: 12px solid #f3b400;
}

.pickup_card_silver .pickup_rank_badge::before,
.pickup_card_silver .pickup_rank_badge::after{
  border-top-color: #bfbfbf;
}

.pickup_rank_badge::before{
  left: 0;
  border-right: 26px solid transparent;
}

.pickup_rank_badge::after{
  right: 0;
  border-left: 26px solid transparent;
}

/* 王冠 */
.pickup_crown{
  width: 45px;
  display: block;
}

/* キャッチ */
.pickup_copy{
  margin: 14px 0 -13px 62px;
  min-height: 27px;
  font-size: 15.5px;
  font-weight: 700;
  color: #444;
}

/* 商品名 */
.pickup_name {
  margin: 19px 0 8px 2px;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 700;
  color: #4ea1ff;
  text-align: center;
}

a {
  color: #4ea1ff;
  text-decoration-color: #4ea1ff;
}

/* 評価 */
.pickup_rating{
  margin: -5px 0 0 2px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.pickup_star{
  color: #f3a600;
  font-size: 23px;
  margin-right: 6px;
}

.pickup_score_num{
  color: #d46bb5;
  font-size: 1.2em;
}

.pickup_img{
  margin-top: 3%;
}

.spec_table{
  width:100%;
  border-collapse:collapse;
  border:2px solid #2f4fa7; /* 外枠 青 */
  font-size:14px;
  margin-top: 5%;
}

/* 左側 */
.spec_table th{
  width:35%;
  background:#2f4fa7;
  color:#fff;
  padding:14px 2px;
  text-align:center;
  font-weight:700;
  border-bottom:2px solid #ffffff;
}

/* 右側 */
.spec_table td{
  background:#ffffff;
  padding:14px 10px;
  text-align:center;
  color:#333;
  border-bottom:1px solid #dcdcdc; /* 薄グレー区切り */
  font-weight:700;
}

/* 左右の境界線 */
.spec_table th{
  border-right:1px solid #2f4fa7;
}

/* 最後の行の線消す */
.spec_table tr:last-child th,
.spec_table tr:last-child td{
  border-bottom:none;
}

.spec_note{
  font-size:12px;
  color:#555;
}

.spec_circle{
  color:#e4002b;
  font-size:18px;
  font-weight:bold;
}

.osusume_point{
  margin-top: 5%;
  background: linear-gradient(180deg, #FFEEF6 0%, #D0D6FD 100%);
  padding: 10px 8px 14px;
  box-sizing: border-box;
}

/* 紫の吹き出しタイトル */
.osusume_heading{
  position: relative;
  width: calc(100% - 12px);   /* 左右に少し余白を残して一定幅 */
  margin: 0 auto 14px;
  padding: 9px 16px 10px;
  background: #6d70b9;
  color: #fff;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 700;
  border-radius: 8px;
  letter-spacing: 0.02em;
  box-sizing: border-box;
  text-align: left;
}

.osusume_heading::after{
  content: "";
  position: absolute;
  left: 24px;
  bottom: -10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 8px 0 0;
  border-color: #6d70b9 transparent transparent transparent;
}

.osusume_block{
  width: calc(100% - 12px);   /* 全ブロックを中央に寄せる */
  margin: 0 auto 14px;
  padding: 0 0 14px;
  border-bottom: 1px dotted #8f8f8f;
  box-sizing: border-box;
}

.osusume_block_last{
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* 白いタイトルも同じ考え方で一定幅 */
.osusume_label{
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 0 auto 12px;
  padding: 6px 10px;
  background: #fff;
  border-radius: 4px;
  color: #2f56a6;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
  box-sizing: border-box;
  text-align: left;
}

.label_check{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  min-width: 14px;
  border: 1px solid #bfc9e6;
  border-radius: 50%;
  color: #5d74b8;
  font-size: 10px;
  line-height: 1;
  background: #fff;
}

/* 画像はちゃんと中央 */
.osusume_img_wrap{
  width: 100%;
  margin: 0 auto 10px;
  text-align: center;
}

.osusume_img{
  height: auto;
  display: block;
  margin: 0 auto;
}

/* 本文も箱幅を持たせて中央に */
.osusume_text{
  margin: 0 auto;
  color: #333;
  line-height: 1.65;
  text-align: left;
  box-sizing: border-box;
}

.size_detail{
  border: 3px solid #405dbc;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-sizing: border-box;
  margin-top: 5%;
}

/* 上の帯 */
.size_detail_title{
  margin: 0;
  padding: 8px 10px;
  background: linear-gradient(90deg, #3155b8 0%, #9d8fd7 100%);
  color: #fff;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
  text-align: center;
}

/* 注意書きがある場合 */
.size_detail_scroll_note{
  margin: 0;
  padding: 4px 8px 5px;
  background: #fff;
  color: #555;
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
  border-bottom: 1px solid #d9d9d9;
}

/* スライダー面 */
.size_detail_slider{
  background: #fff;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px 7px 8px;
  -webkit-overflow-scrolling: touch;
}

/* この箇所だけ中央寄せ */
.size_card_wrap.size_card_wrap--center{
  width: 100%;
  justify-content: center;
}

.size_card_wrap{
  display: flex;
  gap: 6px;
  width: max-content;
}

.size_card{
  width: 95px;
  flex: 0 0 135px;
  min-height: 235px;
  background: #fff;
  border: 2px solid #7e8ed1;
  border-radius: 4px;
  padding: 4px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* 分類帯 */
.size_card_name{
  margin: -4px -4px 0 -5px;
  min-height: 27px;
  background: #9891d7;
  color: #fff;
  font-size: 11px;
  line-height: 1.15;
  font-weight: 700;
  text-align: center;
  border-radius: 2px 2px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 2px;
  box-sizing: border-box;
  letter-spacing: 0;
}

/* 画像枠 */
.size_card_img{
  background: #ecebe7;
  border: 1px solid #c9c9c9;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 -4px 6px;
  overflow: hidden;
}

.size_card_img img{
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

/* 本文 */
.size_card_body{
  flex: 1;
  display: flex;
  flex-direction: column;
}

.size_card_price{
  margin: 0;
  color: #1f469a;
  font-size: 18px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.size_card_tax{
  display: inline;
  margin-left: 2px;
  color: #1f469a;
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: middle;
}

.size_card_spec{
  margin: 3px 0 0;
  color: #1f469a;
  font-size: 10px;
  line-height: 1.35;
  font-weight: 700;
}

/* CTA */
.size_card_btn{
  margin-top: auto;
  display: block;
  background: linear-gradient(180deg, #ffb400 0%, #ff8a00 100%);
  color: #fff;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border-radius: 3px;
  padding: 5px 2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}


.review_section{
  padding: 0 0 18px;
  box-sizing: border-box;
}

/* タイトル */
.review_title{
  margin-top: 10%;
  padding: 12px 14px 11px;
  background: linear-gradient(90deg, #244aa7 0%, #b39ad9 100%);
  color: #fff;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
  text-align: center;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  
  /* 左だけ丸く */
  border-radius: 30px 0 30px 0;
}

.review_title_icon{
  width: 40px;
  line-height: 1;
}

/* タブ */
.review_tabs{
  display: flex;
  padding: 10px 8px 0;
  gap: 2px;
}

.review_tab{
  width: 50%;
  border: none;
  border-bottom: none;
  background: #c8c8c8;
  color: #555;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
  padding: 10px 6px 9px;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  box-sizing: border-box;
}

.review_tab.is-active{
  background: #c8c8c8;
}

/* 良い口コミ（そのまま） */
.review_tab[data-tab="good"]{
  background: #c8c8c8;
}

/* 悪い口コミ*/
.review_tab[data-tab^="bad"]{
  background: #c8c8c8;
  color: #555;
}

/* 選択中 */
.review_tab[data-tab^="good"].is-active{
  background: #7f73cd;
  color: #ffffff;
}

.review_tab[data-tab^="bad"].is-active{
  background: #7f73cd;
  color: #ffffff;
}

/* パネル */
.review_panel{
  display: none;
  padding: 12px 8px 0;
}

.review_panel.is-active{
  display: block;
}

/* 良い口コミカード */
.review_list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.review_card{
  border: 1px solid #bdbdbd;
  border-radius: 4px;
  overflow: hidden;
}

.review_card_head{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #bdbdbd;
}

.review_user_icon{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.review_user_icon img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.review_head_text{
  flex: 1;
  min-width: 0;
}

.review_headline{
  margin: 0 0 3px;
  color: #333;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
}

.review_star{
  margin: 0;
  color: #ffb300;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 1px;
}

.review_card_body{
  padding: 12px;
  color: #333;
  font-size: 12px;
  line-height: 1.7;
}

/* 悪い口コミ画像 */
.review_noinfo img{
  display: block;
  width: 100%;
  height: auto;
}

/* もっと見る */
.review_more_btn{
  width: calc(100% - 16px);
  margin: 12px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border: 2px solid #1f4f98;
  background: #ffffff;
  color: #003b8f;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  border-radius: 4px;
  padding: 12px 10px;
  box-sizing: border-box;
  cursor: pointer;
}

.review_more_arrow{
  font-size: 14px;
  line-height: 1;
}

/* 補足 */
.review_note{
  margin: 16px 0 10px;
  text-align: center;
  color: #7b5a3b;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
  position: relative;
}



/* CTA */
.review_cta{
  width: calc(100% - 40px);
  min-height: 54px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(180deg, #ffaa00 0%, #ff8400 100%);
  color: #fff;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}

.review_cta--shine{
  position: relative;
  overflow: hidden;
}

/* 光 */
.review_cta--shine::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -30%;
  width: 30px;
  height: 200%;
  background: rgba(255,255,255,0.6);
  transform: rotate(25deg);
  animation: review_shine 3s infinite;
}

@keyframes review_shine {
  0% {
    left: -30%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    left: 120%;
    opacity: 0;
  }
  100% {
    left: 120%;
    opacity: 0;
  }
}

.review_cta_arrow{
  font-size: 18px;
  line-height: 1;
}

/* 初期で隠す */
.is-hidden{
  display: none;
}

.info_section{
  margin-top: 20px;
}

/* 黄色背景 */
.info_wrap{
  background: #fffdee;
  padding: 14px 12px 16px;
}

/* 赤見出し */
.info_lead{
  margin: 0 0 12px;
  color: #ff0000;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
}


.info_image_box img{
  display:block;
  width:100%;
  height:auto;
}

/* 本文 */
.info_text{
  margin: 0 0 10px;
  line-height: 1.6;
  color:#333;
}

/* 赤強調 */
.red{
  color:#ff0000;
  font-weight:700;
}

.info_img{
  margin: 0 0 5% 0;
}

@media screen and (min-width: 768px){
  .pickup_copy{
    font-size: 20px;
  }
  .osusume_heading {
    font-size: 25px;
}
.osusume_label {
  font-size: 20px;
}
.osusume_text {
  font-size: 16x;
}
.label_check {
  width: 20px;
  height: 20px;
  min-width: 20px;
  font-size: 15px;
}
.pickup_name {
  font-size: 35px;
}
.pickup_img{
  margin-top: 5%;
}
.pickup_rating {
  font-size: 30px;
}
.pickup_star {
  font-size: 30px;
}
.pickup_rating {
  margin: -5px 0 -39px 2px;
}
.spec_table th {
  font-size: 20px;
}
.spec_table td {
  font-size: 20px;
}
.spec_note {
  font-size: 15px;
}
.size_detail_title {
  font-size: 30px;
}
.size_card_name {
  min-height: 50px;
  font-size: 20px;
}
.size_card {
  flex: 0 0 205px;
  min-height: 205px;
  padding: 10px;
}
.size_detail_scroll_note {
  font-size: 20px;
}
.size_card_price {
  font-size: 25px;
}
.size_card_tax {
  font-size: 15px;
}
.size_card_spec {
  font-size: 15px;
}
.size_card_btn {
  font-size: 20px;
  padding: 13px 2px;
}
.review_title {
  font-size: 30px;
  gap: 22px;
}
.review_title_icon {
  width: 50px;
}
.review_tab {
  font-size: 20px;
}
.review_headline {
  font-size: 25px;
}
.review_star {
  font-size: 20px;
}
.review_card_body {
  font-size: 16px;
}
.review_user_icon {
  width: 65px;
  height: 65px;
}
.review_user_icon::before {
  left: 33%;
  width: 30px;
  height: 30px;
}
.review_user_icon::after {
    left: 32%;
  width: 40px;
  height: 24px;
}
.review_more_btn {
  font-size: 20px;
}
.review_note {
  font-size: 20px;
}
.review_cta {
  gap: 10px;
  min-height: 67px;
  font-size: 30px;
}
.info_text{
  font-size: 16px;
}
}


/* コラム_251226 */
.column_box{
  padding: 10px;
}

.column a{
  display: block;
  text-decoration: underline;
}

.column_list ul li {
  margin-bottom: 5px;
  list-style: none;
  margin-left: -1.5em;
  padding: 10% 10% 10% 10%;
}

.pagination-3 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 8px;
  list-style-type: none;
  padding: 0;
}

@media screen and (max-width:699px){
  .pagination-3 {
      flex-wrap: wrap;
      width: 70%;
      margin: 0 auto 5%;
}
}


.pagination-3 a {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2em;
  height: 2em;
  border-bottom: 2px solid #f2f2f2;
  color: #333;
  text-decoration: none;
}

.pagination-3 .current a {
  border-bottom: 2px solid #2589d0;
  pointer-events: none;
}

.pagination-3 li {
  text-decoration: none;
}

h2 {
  padding: 0.5em;
  /*文字周りの余白*/
  color: #252525;
  /*文字色*/
  background: #e4e4e4;
  /*背景色*/
  border-bottom: solid 3px #b4b4b4;
  /*下線*/
  font-size: 17px;
  /*margin-bottom: 3%;*/
  margin-bottom: 1%;
}
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.slick-slider .slick-track, .slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.slick-initialized .slick-slide {
  display: block;
}

/*footer*/
/*フッター*/
footer {
  margin-right: auto;
  margin-left: auto;
  background-color: #5c5c5c;
  padding: 30px 10px;
  text-align: center;
  margin-top: 5%;
}

@media (max-width:677px) {
  footer {
    padding-bottom: 13%;
    padding: 18px 5px;
    padding-bottom: 11%;
  }
}

footer p {
  font-size: 12px;
}

footer a:visited,
footer a:link {
  color: #ffffff;
  display: block;
}

.slick-initialized .slick-slide {
  display: block;
}
/* 追従 */
.ScrollTop {
  position: fixed;
  bottom: 20px;
  right: 10px;
  left: auto;              /* ←これ追加 */
  transform: none;         /* ←これ追加 */
  width: auto;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.65s ease;
}

.ScrollTop.isActive {
  opacity: 1;
  visibility: visible;
}

.cta_follow {
  display: block;
  padding: 0;              /* ←余白で大きく見えるのを防ぐ */
}

.cta_follow img {
  display: block;
  width: 185px;            /* 好きな大きさに調整してOK */
  max-width: none;
  margin: 0;               /* ←autoだと中央寄せになるので消す */
  height: auto;
}

@media screen and (min-width: 768px){
  .ScrollTop {
    bottom: 70px;
    right: 40px;
  }

  .cta_follow img {
    width: 90%;
  }
}

html {
  scroll-behavior: smooth;
}

/* 1. テーブルのセル(td)自体の設定をリセット */
.compare_table td {
  padding: 0 !important; /* セル内の余白をゼロにして中のdivを密着させる */
  height: 1px;           /* 中のdivにheight: 100%を効かせるためのハック */
  vertical-align: top;
}

/* 2. 価格ブロック全体の共通設定 */
.price_block {
  display: flex;
  flex-direction: column;
  height: 100%;          /* 親セルの高さいっぱいに広げる */
  width: 100%;
}

/* 3. 各価格項目（シングル・セミダブル・ダブル）の枠 */
.price_block > div {
  flex: 1 0 0;           /* 余った高さを均等に分配して横ラインを揃える */
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直方向の中央揃え */
  align-items: center;     /* 水平方向の中央揃え */
  
  /* 行間を詰める設定：上下を 5px に調整 */
  padding: 5px 2px;      
  
  box-sizing: border-box;
  font-size: 13px;       /* 必要に応じて文字サイズも微調整 */
}

/* 4. 点線の設定：2番目以降の要素の「上」に引くことで二重線を防ぐ */
.price_block > div + div {
  border-top: 1px dotted #ccc;
}

/* 5. 価格部分の行間をさらにタイトにする（strongタグ内） */
.price_block strong {
  display: block;
  line-height: 1.2;      /* 行間を狭く設定 */
  margin-top: 2px;       /* 「シングル」などのラベルとの距離を微調整 */
}

/* 6. 打ち消し線のスタイル微調整 */
.price_block span[style*="text-decoration: line-through"] {
  font-size: 0.9em;      /* 打ち消し線を少し小さくして圧迫感を減らす */
  color: #666;
}