/* ---------------------------------
       CSS: px単位による320px最適化版
       ---------------------------------
    /* 320px以下のデバイス向け調整 */
    @media (max-width: 350px) {
        body {
            padding: 5px;
        }
        .container {
            padding: 15px;
        }
    }

    article#siliconvibe_lp{font-family: "Zen Maru Gothic", sans-serif;max-width:640px;margin:0 auto;}

    article .fv p{font-size:13px;margin:0 5% 10%;line-height:1.8;color: #584963;font-weight: 600;}

    .container {
        max-width: 375px;
        margin: 0 auto;
        background-color: #ffffff;
        padding: 15px;
        border-radius: 10px;
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
        transition: all 0.3s;
        font-family: "Zen Maru Gothic", sans-serif;
        font-style: normal;
    }

    .container h2 {
        text-align: center;
        color: #d63384;
        border:0;
        font-size: 18px;
        font-weight:900;
        margin-bottom: 10px;
    }

    .subtitle {
        text-align: center;
        color: #888;
        margin-bottom: 20px;
        font-size: 11px; /* 0.9rem -> 約13px */
    }

    /* 質問エリア */
    .question-box {
        padding: 15px;
        background-color: #fff;
        border: 1px solid #e0e0e0;
        border-radius: 12px;
        min-height: 100px;
        transition: all 0.5s ease-in-out;
    }

    .question-box p {
        font-weight: 700;
        margin-bottom: 15px;
        font-size: 16px; /* 1.1rem -> 約16px */
        color: #2c3e50;
    }

    /* 選択肢のデザイン */
    .option-label {
        display: flex;
        align-items: flex-start;
        margin-bottom: 10px;
        cursor: pointer;
        padding: 12px 15px;
        border: 2px solid #e0e0e0;
        border-radius: 8px;
        transition: all 0.3s;
        background-color: #f7f9fb;
    }

    .option-label:hover {
        border-color: #ff91c8;
        background-color: #fff0f5;
        transform: translateY(-1px);
    }
    
    input[type="radio"]:checked + span {
        color: #d63384;
        font-weight: bold;
    }
    
    input[type="radio"]:checked ~ .option-label {
        border-color: #d63384 !important;
        background-color: #fff0f5 !important;
    }

    input[type="radio"] {
        margin-right: 10px;
        accent-color: #d63384;
        transform: scale(1.2);
        flex-shrink: 0;
        margin-top: 2px;
    }
    
    .option-text {
        flex-grow: 1;
        font-size: 14px; /* 1rem -> 14px */
        line-height: 1.4;
    }

    /* プログレスバー */
    .progress-container {
        margin-bottom: 20px;
        height: 6px;
        background-color: #e0e0e0;
        border-radius: 4px;
        overflow: hidden;
    }

    #progress-bar {
        height: 100%;
        background-color: #d63384;
        width: 0%;
        transition: width 0.5s ease;
    }
    
    .progress-text {
        text-align: right;
        font-size: 12px; /* 0.8rem -> 約12px */
        color: #888;
        margin-bottom: 5px;
    }

    /* 診断結果エリア */
    #result-area {
        margin-top: 30px;
        padding: 18px;
        border: 3px solid #ff7eb9;
        background-color: #fff0f5;
        border-radius: 15px;
        text-align: center;
        box-shadow: 0 5px 15px rgba(214, 51, 132, 0.2);
        animation: fadeIn 1s ease-out;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    #result-area h2 {
        color: #d63384;
        font-size: 19px; /* 1.3rem -> 約19px */
        margin-bottom: 10px;
    }

    #recommendation-title {
        font-size: 17px; /* 1.2rem -> 約17px */
        font-weight: 700;
        color: #2c3e50;
    }

    .price {
        font-size: 16px; /* 1.1rem -> 約16px */
        color: #27ae60;
        margin: 8px 0 15px;
        font-weight: bold;
    }

    .features {
        list-style: none;
        padding: 0;
        margin-top: 10px;
        text-align: left;
        display: inline-block;
        max-width: 90%;
    }

    .features li {
        padding: 5px 0;
        font-size: 13px; /* 0.9rem -> 約13px */
        border-bottom: 1px dashed #f0e0e6;
        color: #555;
    }
    
    .features li:before {
        content: "●";
        color: #d63384;
        margin-right: 8px;
        font-weight: bold;
    }
    
    .features li:last-child {
        border-bottom: none;
    }

    button {
        margin-top: 20px;
        padding: 10px 20px;
        background-color: #d63384;
        color: white;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-size: 14px; /* 0.9rem -> 約14px */
        font-weight: bold;
        transition: background-color 0.3s, transform 0.1s;
    }
    
    button:hover {
        background-color: #b82b6e;
    }
/* コンテナ：横スクロールを有効にするエリア */
.scroll-table-container {
  overflow-x: auto; /* 横スクロール */
  overflow-y: auto; /* 縦スクロール(念のため) */
  max-height: 80vh; /* 画面の80%の高さでスクロールさせる(お好みで調整) */
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  border: 1px solid #ddd;
  -webkit-overflow-scrolling: touch; /* iOSでのスクロールを滑らかに */
  margin:10% 5%;
}

/* テーブル全体の基本設定 */
.comparison-table {
  border-collapse: separate; /* stickyを効かせるためにseparate推奨 */
  border-spacing: 0;
  width: 100%;
  min-width: 800px; /* スマホでもこの幅を確保して横スクロールさせる */
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 12px;
  line-height: 1.5;
}

/* 全セルの基本設定 */
.comparison-table th,
.comparison-table td {
  padding: 12px 10px;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
  text-align: center;
  vertical-align: middle;
  background-color: #fff;
}

/* --- ヘッダー(製品名)の固定設定 --- */
.comparison-table thead th {
  position: sticky;
  top: 0;
  background-color: #f4f4f4; /* 背景色必須(透けないように) */
  color: #333;
  font-weight: bold;
  z-index: 10; /* 他の要素より手前に */
  border-bottom: 2px solid #999;
}

/* --- 左列(項目名)の固定設定 --- */
.comparison-table tbody th,
.comparison-table thead th.sticky-col-header {
  position: sticky;
  left: 0;
  background-color: #f9f9f9; /* 項目列の背景色 */
  z-index: 5; /* 本文より手前、ヘッダーより奥 */
  text-align: left;
  font-weight: bold;
  width: 100px; /* 項目列の幅固定 */
  min-width: 100px;
  border-right: 2px solid #ccc; /* 固定列の境界線を強調 */
}

/* 左上の角(クロスする部分)の固定設定 */
.comparison-table thead th.sticky-col-header {
  z-index: 15; /* 最前面 */
  background-color: #e0e0e0;
}

/* --- 装飾系クラス --- */

/* 補足テキスト(小さくする) */
.sub-text {
  font-size: 0.85em;
  font-weight: normal;
  display: block;
}

/* 強調(太字) */
.highlight-bold {
  font-weight: bold;
  color: #333;
}

/* 強調(ピンク・ソフト系) */
.highlight-pink {
  font-weight: bold;
  color: #d63384;
}

/* 薄くする(なし、旧モデルなど) */
.text-dim {
  color: #999;
}

/* NEWバッジ */
.new-badge {
  font-weight: bold;
  background-color: #fff0f5; /* 薄いピンク背景 */
  color: #d00000;
  border: 1px solid #d00000;
  border-radius: 4px;
}

/* 偶数行の色を変えて見やすくする(左列を除くデータ部分のみ) */
.comparison-table tbody tr:nth-child(even) td {
  background-color: #fcfcfc;
}

.comparison-table td img{
  display:block;
  width:50px;
  height:auto;
  margin:0 auto;
}

#siliconvibe_lp .fv img,
#siliconvibe_lp .detail-container img{
  display:block;
  width:100%;
  height:auto;
}

#siliconvibe_lp .detail-container{
  margin-top:5%;
}

#lp-menu-section ul{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}

#lp-menu-section ul li{
  width:30%;
  img{display:block;width:100%;}
}

#lp-menu-section ul li:first-child{
  display:none;
}

#lp-menu-section ul li p{
  font-size:10px;
  text-align:center;
}

#siliconvibe_lp .link_button{
  margin: 5% 15% 10%;
}

#siliconvibe_lp .link_button a{
  background: #ffe3e8;
    color: #c3456d;
    border: 0;
    border-radius: 50px;
}

.item-detail-table{
  margin:10% 5%;
}

.item-detail-table,.item-detail-table th,.item-detail-table td{
  border: 1px solid #595959;
	border-collapse: collapse;
  color:#363540;
  font-size:11px;
}

.item-detail-table th,.item-detail-table td{
  padding:7px 10px;
  word-break: break-word;
}

.item-detail-table th{
  background:#f9f9f9;
}

/* FAQセクション全体のコンテナ */
.product-faq {
    max-width: 800px;
    margin: 20px auto;
    color: #444;
    line-height: 1.6;
}

/* 各質問項目のまとまり */
.faq-item {
    margin-bottom: 25px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

/* 既存のH3を打ち消して再定義 */
.product-faq h3 {
    /* 既存スタイルの打ち消し */
    all: unset; 
    display: block;
    
    /* 新規デザイン */
    font-size: 16px;
    font-weight: bold;
    color: #cc0066; /* ブランドカラー等に合わせて調整してください */
    margin: 0 0 10px 0;
    padding: 10px 15px;
    background-color: #fff0f5; /* 薄いピンク系でQを強調 */
    border-radius: 5px;
    cursor: default;
}

/* Qの文字を少し強調する場合 */
.product-faq h3::before {
    content: "Q. ";
    font-family: Georgia, serif;
}

/* 回答部分のスタイル */
.faq-item p {
    margin: 10px 15px;
    font-size: 14px;
    line-height:1.8;
    color: #555;
}

/* 箇条書きリストのスタイル */
.faq-item ul {
    margin: 10px 15px;
    padding-left: 20px;
    font-size: 14px;
}

.faq-item li {
    margin-bottom: 8px;
    line-height:1.8;
}

/* 太字の強調 */
.faq-item strong {
    color: #333;
    background: linear-gradient(transparent 70%, #ffdeeb 70%); /* 薄いアンダーライン */
}

/* 補足説明（smallタグ） */
.faq-item small {
    display: block;
    margin-top: 8px;
    color: #888;
    font-size: 12px;
}

.limited-set{
    margin:5% 5%;
  li{
    p.item-brand {
        margin-top:5px;
        font-size: 10px;
        background: #efb3bf;
        color: #fff;
        width: fit-content;
        padding: 5px;
        font-weight: 600;
        border-radius: 3px;
    }
    p.set-title {
    font-weight: 600;
    font-size: 13px;
    color: #363540;
    margin: 5px 0;
    }
    .set-title+p {
        font-size: 12px;
        color: #363540;
        line-height: 1.4;
        margin-bottom: 5px;
    }

    .set-detail {
        background: #f99990;
        color: #fff;
        width: fit-content;
        padding: 7px 15px;
        font-size: 14px;
        border-radius: 20px;
        margin: 0 auto 5px;
    }

  }
}

.direct-cart{
  margin-top:15px;
  h3{
    font-size:14px;
    text-align:center;
    padding: 0;
    margin: 0;
    border: 0;
    color: #363540;
    text-align: center;
    margin: 10% 0 5%;
  }
  ul{
    display:flex;
    justify-content:space-between;
    li{
      width:30%;
      margin-bottom:5%;
      p{
        font-size:10px;
        color:#363540;
        margin:5px 0;
      }

      span:not([class]){
        display: block;
        background: #00B16A;
        color: #fff;
        font-size: 10px;
        padding: 5px 0;
        letter-spacing: -1px;
        border-radius: 20px;
        text-align: center;
      }

      span.added{
        display: block;
        background: #999;
        color: #fff;
        font-size: 10px;
        padding: 5px 0;
        letter-spacing: -1px;
        border-radius: 20px;
        text-align: center;
      }

      span.not_for_sale{
        display: block;
        background: #999;
        color: #fff;
        font-size: 9px;
        padding: 5px 0;
        letter-spacing: -1px;
        border-radius: 20px;
        text-align: center;
        span{display:none;}
      }
    }
  }
} 

#lp-menu-section.lp-menu.is-fixed {
  position: fixed;
  z-index: 100;
      bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
  ul{
    li{width:25%;background:#fff;}
  }
  li:first-child{display:block !important;}
}

.list-main{display:flex;
	flex-wrap:wrap;
	}
	.item_list{margin-bottom:10%;}
	.list-main li{
	width:33%;
	border-bottom:0 !important;
}
	.list-main li .thumb{
	width:100% !important;
	margin-right:0 !important;
}

.item_list ul li a, .item_list ol li a{
	display:block !important;
	padding:5px;
}

.item_list ul li .texts .title{font-size:11px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;}

.item_list ul li .texts .star,
.item_list ul li .texts .comment,
.item_list ul li .texts .tag
{
  display:none !important;
}