/* リセットcss */
  @charset "UTF-8";

  html,
  body,
  div,
  span,
  applet,
  object,
  iframe,
  h1,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  pre,
  a,
  abbr,
  acronym,
  address,
  big,
  cite,
  code,
  del,
  dfn,
  em,
  img,
  ins,
  kbd,
  q,
  s,
  samp,
  small,
  strike,
  strong,
  sub,
  sup,
  tt,
  var,
  b,
  u,
  /* i, */
  center,
  dl,
  dt,
  dd,
  ol,
  ul,
  li,
  fieldset,
  form,
  label,
  legend,
  table,
  caption,
  tbody,
  tfoot,
  thead,
  tr,
  th,
  td,
  article,
  aside,
  canvas,
  details,
  embed,
  figure,
  figcaption,
  header,
  hgroup,
  menu,
  nav,
  output,
  ruby,
  section,
  summary,
  time,
  mark,
  audio,
  video {
      margin: 0;
      padding: 0;
      border: none;
      font-style: normal;
      zoom: 1;
      color: #493825;
  }

  table {
      border-collapse: collapse;
      font-family: inherit;
  }

  input,
  textarea,
  select {
      font-family: inherit;
      font-size: 16px;
  }

  input[type="button"],
  input[type="text"],
  input[type="submit"] {
      -webkit-appearance: none;
      border-radius: 0;
  }

  textarea {
      resize: none;
      -webkit-appearance: none;
      border-radius: 0;
  }

  th,
  td {
      border-collapse: collapse;
  }

  table th,
  table td {
      /* white-space: nowrap; */
      /* 上書き */
      white-space: normal;
  }

  ul,
  ol {
      list-style-type: none;
  }

  img {
      vertical-align: text-bottom;
      vertical-align: -webkit-baseline-middle;
      max-width: 100%;
      height: auto;
      width: auto;
  }

  html {
      font-size: 62.5%;
  }

  html #body_lp {
      width: 100%;
      font-size: 62.5%;
      margin: auto;
      /* margin-top: 3rem; */
      overflow: hidden;
      color: #493825;
  }

  .fadein {
      opacity: 0;
      transform: translate(0, 80px);
      transition: all 1000ms;
  }

  .fadein.scrollin,
  .fadein1.scrollin,
  .fadein2.scrollin,
  .fadein3.scrollin {
      opacity: 1;
      transform: translate(0, 0);
  }

  /* 共通 */
  .f12 {
      font-size: 1.2rem;
  }

  .f14 {
      font-size: 1.4rem;
  }

  .f16 {
      font-size: 1.6rem;
  }

  .f20 {
      font-size: 2rem;
  }

  .f30 {
      font-size: 3rem;
  }

  .f40 {
      font-size: 4rem;
      letter-spacing: .5rem;
  }


  .foot_block1 {
      margin-bottom: 1rem;
  }

  .foot_block2 {
      margin-bottom: 2rem;
  }

  .f_serif {
      font-family: '游明朝', 'Yu Mincho', 'Noto Serif JP', YuMincho, 'Hiragino Mincho Pro', serif;
      letter-spacing: 1px;
  }

  .flex {
      display: flex;
      flex-wrap: wrap;
  }

  .center {
      text-align: center;
  }

  .right {
      text-align: right;
  }

  .red {
      color: #962c01;
  }

  .gray {
      color: #ababab;
  }

  .color01 {
      color: #004097 !important;
  }

  .color02 {
      color: #ed7d31;
  }

  .color03 {
      color: #ff2400;
  }

  .color04 {
      color: #493825 !important;
  }

  span.kome {
      font-size: 1.3rem;
      color: #828181;
  }

  .clearfix::after {
      content: "";
      display: block;
      clear: both;
  }

  span.sen {
      text-decoration: line-through;
  }

  .in-block {
      display: inline-block;
      /* color: #004097; */
  }

  .flex_txt {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      padding: 0 2.2rem;
      flex-direction: column;
      align-items: center;
  }

  h2.h2_ttl {
      font-size: 3.6rem;
      font-weight: bold !important;
      margin-bottom: 4rem;
      line-height: 1.2;
      text-align: center;
      background: none;
      border: none;
      color: #493825;
      margin-top: 0 !important;
      position: relative;
  }

  h2.h2_ttl .in-block {
      color: #004097
  }

  header#header {
      /* margin-bottom: 3rem; */
      /* 上書き */
      margin-bottom: 0;
  }

  h1:not(#top_logo) {
      /* 上書き */
      font-size: 3.6rem;
      border-bottom: none;
  }

  .text_pgllink {
      color: #493825 !important;
      border-bottom: 1px dashed;
      text-decoration: none;

  }

  /* ファーストビュー */
  .first_view {
      max-width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      /* margin-bottom: 1rem; */
      /* border-top: 2px solid #004097; */
      position: relative;
  }

  .first_view img {
      width: 100%;
      object-fit: cover;
  }

  /* eightio healthcare */
  .towa {
      background: #f2f2f2;
      padding: 3rem 0 3rem;
      position: relative;
      top: 0px;
      padding-top: 60px;
      margin-bottom: 3rem;

  }

  .towa_btn {
      background: #fff;
      color: #004097;
      border: 2px solid #004097;
      padding: 1rem 2.5rem;
      margin: 0 0.5rem;
      cursor: pointer;
      font-weight: bold;
      /* border-radius: 0.5rem; */
      text-align: center;
      border-radius: 20rem;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      width: max-content;
      margin-top: 20px;
  }

  .towa_btn:link,
  .towa_btn:visited {
      color: #004097;
      text-decoration: none;
  }

  .float_box {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 2.2rem;
  }

  .float_box p {
      width: 50%;
  }

  .float_box h2 {
      text-align: left;
  }

  .float_box .flex-imgbox {
      float: right;
      width: 28%;
      margin-left: 20px;
  }

  /* .towa::before{
  content:"";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
 
  border-width: 0 0 100px 100vw ;
 
  border-color: transparent transparent #fff transparent;
} */
  /* 目次 */
  .pg_btn_area {
      display: flex;
      justify-content: center;
      /* padding: 0 2.2rem; */
  }

  .pg_btn_area a {
      background: #fff;
      padding: 1.5rem 4rem;
      margin: 0 1rem;
      font-weight: bold;
      color: #004097;
      border: 2px solid #004097 !important;
      font-size: 1.6rem;
      position: relative;
      text-decoration: none;
      display: inline-block;
      min-width: 10rem;
  }

  .pg_btn_area a .in-block {
      color: #004097;
  }

  .pg_btn_area a:hover .in-block {
      color: #ffffff;
  }

  .pg_btn_area a:hover {
      color: #fff;
      background: #004097 !important;
  }

  .pg_btn_area a:hover:after {
      background-image: url(/img/eightio_healthcare/sita02.png) !important;
  }

  .pg_btn_area a:after {
      content: '';
      display: inline-block;
      width: 14px;
      height: 14px;
      background-image: url(/img/eightio_healthcare/sita.png);
      background-size: contain;
      /* vertical-align: middle; */
      /* margin-left: 5px; */
      /* background-repeat: no-repeat; */
      position: absolute;
      right: 1.7rem;
      top: 50%;
      transform: translateY(-50%);
  }

  .pg_link {
      background: repeating-linear-gradient(-45deg, #d8e7ff, #d8e7ff 4px, #fff 0, #fff 12px);
      padding: 2.2rem
  }

  /* NOD */
  .nod {
      max-width: 100%;
      background: #fff;
      padding: 10rem 0;
      background: url(/img/eightio_healthcare/haikei02.png);
      background-color: rgba(255, 255, 255, 0.76);
      background-blend-mode: lighten;
      /* background-size: cover; */
      background-position: center center;
      background-repeat: no-repeat;
      /* background-size: cover; */
  }

  .nod_txt {
      max-width: 1000px;
      margin: 0 auto;
      text-align: center;
  }

  /* 選ばれる理由 */
  h2.h2_ttl.midashi:before {
      content: '';
      display: inline-block;
      width: 103px;
      height: 32px;
      background-image: url(/img/eightio_healthcare/sita_arrow02.png);
      background-size: contain;
      vertical-align: middle;
      position: absolute;
      top: -5rem;
      background-repeat: no-repeat;
      left: 50%;
      transform: translateX(-50%);
  }

  .pri_area {
      padding: 10rem 0;
      max-width: 100%;
      background: url(/img/eightio_healthcare/hougan05.png?=2222);
      /* background-color: #ffffff; */
  }

  .fle_boxwrap {
      padding: 0 2.2rem;
  }

  .fle_box {
      max-width: 1000px;
      margin: 0 auto;
      background: #fff;
      margin-bottom: 6rem;
      padding: 5rem;
      box-sizing: border-box;
      position: relative;
      box-shadow: 0 0 6px 0 rgba(0, 0, 0, .2);
  }

  .fle_box:last-child {
      margin-bottom: 0 !important;
  }

  .ttl {
      font-size: 1.8rem;
      font-weight: bold;
      margin-bottom: 3rem;
      position: absolute;
      top: -3.1rem;
  }

  .ttl_span {
      background-color: #004097 !important;
      color: #fff;
      box-sizing: border-box;
      padding: 1.1rem 3rem;
      display: inline-block;
      border-radius: 10rem;


  }

  p.pri_ttl {
      font-weight: bold;
      margin-bottom: 1rem;
      font-size: 1.9rem;
      color: #ed7d31;
  }

  span.ttl_spannumber {
      color: #fff;
      font-size: 2.6rem;
      margin-right: 1rem;
      /* transform: skew(-15deg); */
      display: inline-block;
      white-space: nowrap;

  }

  /* .fle_box:nth-of-type(odd) .imgboxarea{
    float: left;
    margin-right: 20px;
    width: 30%;
} */
  .fle_box .imgboxarea {
      float: right;
      margin-left: 20px;
      width: 30%;
  }

  .imgbox:after {
      content: "";
      display: block;
      clear: both;
  }

  /* 実際に服用されたお客様の声 */
  .review_box {
      padding: 10rem 0;
      max-width: 100%;
      background-color: #E2EDFE;
  }

  .review_box_wrap {
      max-width: 950px;
      margin: 0 auto;
      padding: 0 2.2rem;
  }

  .review_wrap {
      background: #fff;
      margin-bottom: 6rem;
      padding: 4rem 6.5rem;
      border: 2px solid #004097 !important;
      border-radius: 0px 20px 0px 20px;
      box-shadow: 10px 10px #004097 !important;
  }

  .review_wrap:last-child {
      margin-bottom: 0;
  }

  .review_icon {
      float: left;
      margin-right: 3.5rem;
  }

  span.review_seibetu {
      color: #004097 !important;
      font-weight: bold;
  }

  span.star {
      color: #f9d432;
      font-size: 2.6rem;
  }

  p.seibetu {
      margin-bottom: 1.9rem;
      font-size: 2.2rem;
  }

  .review_txt {
      overflow: hidden;
  }

  p.review_link {
      margin-bottom: 1.8rem;
  }

  p.review_link a {
      display: inline-block;
  }

  /* よくあるご質問 */
  .quest {
      max-width: 100%;
      background: #fff;
      padding: 10rem 0;
  }

  .question_wrap {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 2rem;
  }

  h3.accodion_cm {
      position: relative;
      padding: 3rem 0;
      padding-right: 4rem !important;
      cursor: pointer;
  }

  h3.accodion_cm span {
      color: #004097 !important;

  }

  .quest_item {
      border-bottom: .0625rem solid #ccc;
      position: relative;
  }

  .acd-content {
      display: block;
      max-height: 0;
      padding: 0rem 2rem;
      transition: max-height 0s ease, padding 0s ease;
      overflow: hidden;
  }

  .quest_item span.icon {
      background-image: url(/img/eightio_healthcare/plus.png);
      width: 25px;
      height: 25px;
      display: block;
      background-size: cover;
      position: absolute;
      right: 2rem;
      top: 50%;
      transform: translateY(-50%);
  }

  .quest_item.ac_open span.icon {
      background-image: url(/img/eightio_healthcare/minus.png);
  }

  .quest_item.ac_open .acd-content {
      max-height: 500px;
      /* 開いたときの最大高さを設定(適宜調整) */
      border-top: .0625rem solid hsla(0, 0%, 80%, .5);
      padding: 3.2rem 2rem 4.6rem;
      /* 開いたときのパディング */
  }

  /* 取り扱いジャンル */
  .check_boxarea {
      background: #E2EDFE;
      padding: 10rem 0;
  }

  .table_area {
      overflow: auto;
  }

  /* .check_boxarea:after {
    content: "";
    z-index: 1;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 0;
    height: 0;
    border-width: 4vw 50vw 0 50vw;
    border-style: solid;
    border-color: #E2EDFE transparent transparent transparent;
} */
  .check_wrap {
      padding: 0 2.2rem;

  }

  .table_area table {
      width: 100%;
      table-layout: fixed;
      text-align: center;
  }

  .table_area table,
  .table_area td,
  .table_area th {
      border: 1px solid #ccd4e1;
      border-collapse: collapse;
  }

  .table_area td,
  .table_area th {
      padding: 5px;
      width: 30px;
      height: 25px;
  }

  .table_area td {
      padding: 1rem;
  }

  .table_area th {
      background: #e4ebf5;
      font-weight: bold;
  }

  .tabs {
      max-width: 830px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: space-between;
  }

  .tab_btn {
      cursor: pointer;
      background-color: #ffe472;
      color: #004097 !important;
      font-size: 2rem;
      font-weight: bold;
      padding: 2rem 3rem;
      border: 2px solid #004097 !important;
      white-space: nowrap;
      width: 32%;
      box-sizing: border-box;
      margin-bottom: 1.5rem;
      text-align: center;
      position: relative;
  }

  .tab_btn:hover {
      opacity: 0.7;
  }

  .tab_btn span {
      color: #004097 !important;
  }

  span.sita_icon {
      background-image: url(/img/eightio_healthcare/sita.png);
      width: 12px;
      height: 12px;
      display: block;
      background-size: cover;
      position: absolute;
      /* right: 2rem; */
      /* top: 50%; */
      /* transform: translateY(-50%); */
      left: 50%;
      bottom: 7px;
      transform: translateX(-50%);
  }

  .tab_btn.active:hover {
      opacity: 1;
  }

  .tab_btn.active {
      background: #004097 !important;
      color: #fff !important;
      position: relative;
  }

  .tab_btn.active span {
      color: #fff !important;
  }

  .tab_btn.active:before {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -11px;
      border: 11px solid transparent;
      border-top: 12px solid #004097 !important;
  }

  div#tab-content {
      max-width: 1150px;
      margin: 0 auto;
  }

  .tab-item {
      border: 2px solid #004097 !important;
  }

  h3.tab_item_ttl {
      background: #004097;
      color: #fff;
      text-align: center;
      font-size: 3.4rem;
      padding: 3rem;
  }

  .tab_item_contents {
      min-width: 100%;
      margin-left: 0;
      padding: 0;
      display: none;
      /* opacity: 0;
        transition: opacity 0.5s ease;  */
  }

  .tabs_btnarea {
      display: flex;
      justify-content: center;
      margin-bottom: 4rem;
  }

  .tab_item_contents.active {
      display: block;
      /* opacity: 1;  */
  }

  .btn_t {
      background: #fff;
      color: #004097;
      border: 2px solid #004097;
      /* padding: 1rem 2.5rem; */
      /* 上書き */
            padding: 0.5rem 2rem;
      margin: 0 0.5rem;
      cursor: pointer;
      font-weight: bold;
      /* border-radius: 0.5rem; */
      text-align: center;
      border-radius: 20rem;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
  }
  .btn_t span {
      color: #004097;
      font-size: 1.3rem;
  }

  .btn_t:hover {
      opacity: 0.7;
  }

  .btn_t.active:hover {
      opacity: 1;
  }

  .btn_t.active {
      background: #004097;
      color: #fff;
      position: relative;
  }

  .btn_t.active span {
      color: #fff;
  }

  .btn_t.active::before {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -11px;
      border: 11px solid transparent;
      border-top: 12px solid #004097 !important;
  }

  .btn_t.active span.btn_sp {
      color: #fff !important
  }

  span.btn_sp {
      font-size: 0.9rem;
      display: block;
      display: none;
  }

  .content_inner {
      padding: 4rem 9rem;
      background: #fff;
  }

  .box_imgarea {
      float: left;
      margin-right: 5rem;
  }

  p.inner_ttl {
      border-bottom: 1px solid #ccc;
      padding-bottom: 1rem;
      margin-bottom: 2rem;
      font-size: 3rem;
      font-weight: bold;
      color: #004097;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      position: relative;
  }

  p.inner_ttl span {
      font-size: 1.6rem;
      font-weight: normal;
      background: #f2f2f2;
      /* color: #ffffff; */
      padding: 1rem 2rem;
  }

  .contentsarea {
      overflow: hidden;
  }

  .cta_txt {
      margin-bottom: 2rem;
  }

  .cta .in-block {
      color: #ffffff;
  }

  /* .os_box{
    margin-bottom: 2rem;
    background: #ffea48;
    padding: 2.1rem;
} */

  .os_box {
      padding: 0.5em 1em;
      margin: 2em 0;
      color: #202c69;
      background: white;
      border-top: solid 5px #4756a4;
      box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
      margin: 2rem 0.5rem;
  }

  .os_box ul li {
      color: #004097;
      font-weight: bold;
      display: flex;
      align-items: center;
      margin-bottom: 0.2rem;

  }

  .os_box ul li:before {
      content: '';
      display: inline-block;
      width: 18px;
      height: 18px;
      background-image: url(/img/eightio_healthcare/check03.png);
      background-size: contain;
      vertical-align: middle;
      background-repeat: no-repeat;
      margin-right: 0.5rem;
  }

  .os_box ul,
  .toriatukai ul {
      margin-left: 1rem;
  }

  .os_box ul li,
  .toriatukai ul li {
      /* list-style-type: disc; */
      list-style-position: inside;
  }

  .toriatukai {
      margin-bottom: 2rem;
  }

  .tyusyaku {
      margin-bottom: 2rem;
      background-color: #E2EDFE;
      padding: 1.5rem 3rem;
      border-radius: 1rem;
  }

  .cta p {
      text-align: center;
  }

  .cta a {
      padding: 1.8rem 3.5rem;
      display: inline-block;
      background: #ed7d31;
      color: #fff;
      min-width: 54rem;
      font-weight: bold;
      font-size: 2.2rem;
      text-decoration: none;
      position: relative;
      transition: .4s;
      border-bottom: 0.5rem solid #c3550b;
      border-radius: 500px;
  }

  .cta a:hover {
      opacity: .7;
  }

  .cta a .btn_icon {
      position: absolute;
      right: 2rem;
      top: 50%;
      transform: translateY(-50%);
      background: url(/img/eightio_healthcare/migi.png);
      width: 3.1rem;
      height: 3.1rem;
      background-size: 1.5rem;
      background-repeat: no-repeat;
      background-color: #fd9d2a;
      border-radius: 50%;
      background-position: center;
  }

  p.box_ttl {
      font-weight: bold;
      margin-bottom: 0.5rem;
      /* color: #ed7d31; */
      font-size: 1.7rem;
      color: #004097;
  }

  .tyusyaku p {
      /* color: #004097 !important; */
      font-weight: bold;
  }

  span.aka_b {
      color: #004097 !important;
      font-weight: bold;
      margin-top: 1rem;
      display: block;
      /* background:linear-gradient(transparent 70%, #ff6 70%); */
  }

  span.aka_otoku {
      font-size: 2.1rem;
      color: #f10913;
  }

  .tab_item_wrap {
      /* max-height: 86rem; */
      /* overflow: auto; */
      /* display: flex; */
  }

  .tab_item_contents {
      /* margin-bottom: 6rem; */
      min-width: 100%;
  }

  .tyuitem {
      background: #fff;
      padding: 0.5rem 1.3rem;
      flex: 2;
      /* text-align: center; */
      border-radius: 0.3rem;
  }

  .tyusyaku_bk {
      display: flex;
      align-items: stretch;
  }

  /* .tyuitem:nth-of-type(1) p{
      font-weight: normal !important;
} */
  .tyuitem:nth-of-type(2) p {

      color: #ff2400;
  }

  .migi {
      margin: 0 1rem;
      width: 1.8%;
      display: flex;
      align-items: center;
  }

  .tyusyaku p {
      font-size: 1.5rem;
  }

  span.otoku {
      position: absolute;
      background: #ffffff !important;
      padding: 0 !important;
      top: 7px;
      font-size: 1.6rem !important;
      font-weight: bold !important;
  }

  p.moji_c {
      text-align: center;
      font-size: 1.7rem;
      margin-top: 1rem;
  }

  /*———————————–
　　調整
———————————–*/
  footer {
      margin: 0px;
  }

  footer .dsp_tbl {
      margin: 0px auto;
  }

  #copy_right p {
      text-align: center;
  }

  /* レスポンシブ */
  /* ファーストビュー */
  div#body_lp {
      min-width: 1000px;
  }

  @media screen and (max-width: 1000px) {
      .table_area table {
          table-layout: auto;
      }
  }

  @media screen and (min-width:601px) and (max-width:860px) {
      .box_imgarea {
          float: none;
          margin-right: 0;
          text-align: center;
      }

      .tabs_btnarea {
          justify-content: space-around;
          overflow: auto;
      }

      .btn_t {
          white-space: nowrap;
      }
  }
  /* みんなが選ぶランキング */
        :root {
            --primary-color: #003399;
            --secondary-color: #0056b3;
            --accent-color: #ff8c00;
            --text-color: #333333;
            --light-bg: #ffffff;
            --border-color: #003399;
            --table-header-bg: #1e4287;
            --green-text: #008000;
            --red-text: #d90000;
        }



        .popular-ranking {
            padding-bottom: 100px;
        }

        .ranking-container {
            max-width: 800px;
            margin: 0 auto;
            background-color: var(--light-bg);
            border: 4px solid var(--border-color);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        .ranking-header {
            background-color: var(--primary-color);
            color: white;
            text-align: center;
            padding: 20px 10px;
            position: relative;
        }

        .header-stars {
            display: block;
            margin: 0 auto 5px;
            height: 20px;
        }

        .header-title-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .header-crown {
            height: 40px;
        }

        .ranking-header h2 {
            font-size: 24px;
            font-weight: bold;
            margin: 0;
            line-height: 1.2;
            border-bottom: none;
            color: #fff;
        }

        .popular-ranking .tabs {
            display: flex;
            flex-direction: row;
            gap: 10px;
            padding: 15px;
            background-color: var(--light-bg);

        }


        .tab-button {
            flex: 1;
            padding: 12px 10px;
            background-color: white;
            color: var(--primary-color);
            border: 2px solid var(--primary-color);
            border-radius: 30px;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            text-align: center;
            transition: all 0.3s ease;
        }

        .tab-button:hover {
            background-color: #e6f0ff;
        }

        .tab-button.active {
            background-color: var(--primary-color);
            color: white;
            position: relative;
        }

        .tab-button.active::before {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -11px;
            border: 11px solid transparent;
            border-top: 12px solid var(--primary-color);
        }

        /* タブコンテンツエリア */
        .tab-content-container {
            padding: 0 15px 20px;
        }

        .tab-pane {
            display: none;
            animation: fadeIn 0.5s ease;
        }

        .tab-pane.active {
            display: block;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .rank-title-area {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            margin-bottom: 20px;
            border-bottom: 2px dashed #ccc;
            padding-bottom: 20px;
        }

        @media (min-width: 600px) {
            .rank-title-area {
                flex-direction: row;
                justify-content: center;
                gap: 20px;
            }
        }

        .rank-badge {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #d4af37;
        }

        .rank-badge img {
            height: 60px;
        }

        .product-name {
            color: var(--primary-color);
            font-size: 28px;
            font-weight: bold;
            margin-top: 10px;
        }

        @media (min-width: 600px) {
            .product-name {
                margin-top: 0;
                font-size: 32px;
            }
        }

        .product-image-area {
            position: relative;
            text-align: center;
            margin-bottom: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        .product-image {
            max-width: 100%;
            height: auto;
        }

        .info-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 25px;
        }

        .info-table th,
        .info-table td {
            padding: 15px;
            border-bottom: 1px solid #ccc;
        }

        .info-table tr:last-child th,
        .info-table tr:last-child td {
            border-bottom: none;
        }

        .info-table th {
            background-color: var(--table-header-bg);
            color: white;
            font-weight: bold;
            width: 30%;
            text-align: center;
            vertical-align: middle;
            font-size: 16px;
        }

        .info-table td {
            background-color: white;
            width: 70%;
            font-size: 15px;
        }

        @media (max-width: 599px) {

            .info-table,
            .info-table tbody,
            .info-table tr,
            .info-table th,
            .info-table td {
                display: block;
                width: 100%;
            }

            .info-table th {
                border-bottom: none;
                padding: 10px;
                text-align: left;
            }

            .info-table td {
                border-bottom: 1px solid #ccc;
            }
        }

        .text-green {
            color: var(--green-text);
            font-weight: bold;
        }

        .text-red-large {
            color: var(--red-text);
            font-size: 28px;
            font-weight: bold;
        }

        .feature-list {
            list-style-type: disc;
            padding-left: 0;
        }

        .voice-area {
            display: flex;
            gap: 15px;
            align-items: flex-start;
        }

        @media (max-width: 450px) {
            .voice-area {
                flex-direction: column;
                align-items: center;
            }
        }

        .voice-icon {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }

        .voice-content {
            flex-grow: 1;
        }

        .voice-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 5px;
            flex-wrap: wrap;
        }

        .voice-name {
            font-weight: bold;
            color: var(--primary-color);
        }

        .stars-img {
            height: 16px;
        }

        .voice-text {
            font-size: 13px;
            line-height: 1.5;
        }

        .price-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .popular-label {
            color: var(--primary-color);
            border: 1px solid var(--primary-color);
            padding: 4px 8px;
            font-size: 12px;
            border-radius: 4px;
            white-space: nowrap;
        }

        

        .tab_item_contents {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
        }


        .table-responsive-wrapper {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            margin-bottom: 20px;
            border: 1px solid #c0d6f1;
        }

        .comparison-table {
            width: 100%;
            border-collapse: collapse;
            min-width: 800px;
            text-align: center;
        }

        .comparison-table th,
        .comparison-table td {
            border: 1px solid #c0d6f1;
            padding: 15px 10px;
            vertical-align: middle;
        }

        .comparison-table td {
            text-align: left;
            font-size: 15px;
        }

        .comparison-table th {
            background-color: #e6f0ff;
            font-weight: bold;
            max-width: 150px;
            min-width: 74px;
            overflow: hidden;
        }

        .comparison-table tbody th {
            width: 120px;
        }

        /* 商品名ヘッダー行 */
        .comparison-table thead th:not(:first-child) {
            /* width: 16%; */
        }

        .img-placeholder {
            width: 120px;
            height: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
            /* color: #999; */
            font-size: 12px;
        }

        a.btn-link {
            display: inline-block;
            background-color: #ff3300;
            color: #fff;
            text-decoration: none;
            padding: 8px 15px;
            border-radius: 20px;
            font-weight: bold;
            font-size: 14px;
            white-space: nowrap;
        }

        a.btn-link::after {
            content: " >";
            font-weight: bold;
        }

        a.btn-link:hover {
            background-color: #cc2900;
            color: #fff;
        }

        .scroll-note {
            font-size: 14px;
            color: #666;
            margin-top: 10px;
        }