/* デスクトップ版の基本設定（2列） */
.sum {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 1:1の2列 */
    gap: 40px;                     /* 左右のアイテム間の隙間 */
    align-items: start;
}


/* 各アイテムの設定 */
.itembox {
    width: 100%;
}

/* 画像がはみ出さないように設定 */
.itembox img {
    max-width: 100%;
    height: auto;
    display: block; /* 画像下の余計な隙間を消す */
}

/* HTML内の<br>が邪魔になる場合があるので非表示にする */
.itembox br {
    display: none;
}

/* ★スマホ版の設定（画面幅が768px以下のとき）★ */
@media screen and (max-width: 768px) {
    .sum {
        display: block; /* gridを解除して縦並びにする */
    }

    .itembox {
        width: 100%;
        margin-bottom: 50px; /* アイテムごとの上下の余白 */
    }
    
    /* 2つ目のitembox（右側にあった料金やビデオ）の上の余白を調整 */
    .itembox + .itembox {
        border-top: 1px solid #eee; /* 境目に薄い線を引くと分かりやすいです */
        padding-top: 40px;
    }
}





/*商品情報テーブル---------------------------------------------------------------------------------------

/* 商品仕様セクション */
.spec-section {
    max-width: 900px;
    margin: 40px auto;
    font-family: sans-serif;
}

/* 見出し：枠ではなく、下線や左線でシンプルに */
.spec-header {
    border-left: 5px solid #333; /* 左側のアクセントライン */
    padding: 5px 15px;
    margin-bottom: 20px;
}

.spec-header h4 {
    margin: 0;
    font-size: 1.25rem;
    color: #333;
}

/* 表のデザイン：外枠なし、横線のみ */
.spec-table {
    width: 100%;
    border-collapse: collapse;
}

.spec-table th, 
.spec-table td {
    padding: 15px;
    border-bottom: 1px solid #eee; /* 下線のみ */
    text-align: left;
    font-size: 0.95rem;
}

.spec-table th {
    width: 25%;
    color: #666;
    background-color: transparent; /* 背景もなしでスッキリ */
    font-weight: bold;
    vertical-align: top;
}

.spec-note {
    display: block;
    margin-top: 10px;
    font-size: 0.85rem;
    color: #d00;
}







/*金額--------------------------------------------------------
/* 全体のコンテナ：枠線を消して余白を調整 */
.price-card {
    max-width: 900px;
    margin: 40px auto;
    border: none; /* 枠線を完全に消去 */
    border-radius: 0;
    font-family: sans-serif;
}

/* ヘッダー部分：箱ではなく、下線のみで表現 */
.price-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 0 10px 0;
    border-bottom: 2px solid #333; /* シャープな下線 */
    background: transparent;
    color: #333;
}

.price-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: bold;
}

.price-icon {
    font-size: 0.9rem;
    color: #333;
}

/* ボディ部分：左右のパディングをなくして横幅を活かす */
.price-body {
    padding: 10px 0;
}

/* メイン価格：基本料金のラベルと金額 */
.main-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 10px;
}

.price-label {
    font-size: 0.9rem;
    color: #666;
    font-weight: bold;
    border-left: 4px solid #e63946; /* 左にアクセント */
    padding-left: 8px;
}

/* 税込価格 */
.tax-included {
    color: #e63946;
    font-size: 2rem;
    font-weight: bold;
    line-height: 1;
}

.tax-included span {
    font-size: 1.1rem;
    margin-left: 4px;
}

/* 税別価格 */
.tax-excluded {
    color: #888;
    font-size: 0.95rem;
}

/* 追加料金：点線で区切る */
.sub-price {
    margin: 20px 0;
    padding: 15px 0;
    border-top: 1px dashed #ddd;
    font-size: 1.1rem;
    color: #333;
}

.sub-price strong {
    font-size: 1.5rem;
    color: #e63946;
}

/* お得情報のセクション：背景色の帯のみ（枠なし） */
.price-benefit {
    background: #fdfaf0; /* 非常に薄い黄色で馴染ませる */
    border-left: 5px solid #f1c40f; /* 左側の強調ライン */
    padding: 15px 20px;
    margin-top: 10px;
}

.price-benefit p {
    margin: 0;
    line-height: 1.6;
    color: #444;
}

.price-benefit strong {
    color: #d35400;
}

/* スマホ表示 */
@media (max-width: 600px) {
    .tax-included {
        font-size: 2.2rem;
    }
    .main-price {
        gap: 5px;
    }
}


/*追加商品の商品の取り扱い----------------------------------------------------------
/* セクション共通 */
.sub-section {
    max-width: 900px;
    margin: 50px auto;
    font-family: sans-serif;
}

.sub-section-header {
    border-bottom: 2px solid #333;
    padding-bottom: 8px;
    margin-bottom: 20px;
}

.sub-section-header h4 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: bold;
}

/* オプション部分 */
.option-intro {
    font-size: 1rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
}

.option-item {
    display: flex;
    gap: 25px;
    align-items: flex-start;
}

.option-image img {
    width: 200px; /* サイズ調整可 */
    height: auto;
    border: 1px solid #eee;
}

.option-name {
    display: block;
    font-size: 1.1rem;
    font-weight: bold;
    color: #0044cc;
    text-decoration: none;
    margin-bottom: 10px;
}

.option-name:hover {
    text-decoration: underline;
}

.model-number {
    font-size: 0.9rem;
    color: #666;
    font-weight: normal;
}

.option-price {
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.option-price strong {
    color: #e63946;
    font-size: 1.4rem;
}

.option-desc {
    font-size: 0.95rem;
    color: #555;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* 椅子の並べ方部分 */
.layout-title {
    font-size: 1rem;
    color: #e63946;
    margin-bottom: 15px;
    font-weight: bold;
}

.layout-flex {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    flex-wrap: wrap; /* スマホ用 */
}

.layout-text {
    flex: 1;
    min-width: 280px;
    line-height: 1.8;
    font-size: 0.95rem;
}

.layout-text strong {
    color: #333;
    background: linear-gradient(transparent 70%, #fff3b0 70%); /* マーカー風 */
}

.layout-image img {
    max-width: 100%;
    height: auto;
    border: 1px solid #ccc;
}

/* スマホ対応 */
@media (max-width: 600px) {
    .option-item {
        flex-direction: column;
    }
    .option-image img {
        width: 100%;
    }
}




/*使用動画-------------------------------------------------------------
/* 動画セクション全体 */
.video-section {
    max-width: 900px;
    margin: 50px auto;
    font-family: sans-serif;
}

/* ヘッダー：他と統一した黒の下線 */
.video-header {
    border-bottom: 2px solid #333;
    padding-bottom: 8px;
    margin-bottom: 20px;
}

.video-header h4 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: bold;
}

/* 紹介テキスト */
.video-intro {
    font-size: 1.05rem;
    color: #e63946; /* 強調の赤 */
    font-weight: bold;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.video-icon {
    font-size: 0.8rem;
}

/* 動画リンクエリア */
.video-content {
    max-width: 500px; /* 動画の幅を調整 */
}

.video-link {
    text-decoration: none;
    display: inline-block;
}

/* サムネイル容器 */
.video-thumbnail-container {
    position: relative;
    border: 1px solid #eee;
    overflow: hidden;
}

.video-thumbnail {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.3s ease; /* ホバー時に少し動かす演出 */
}

/* ホバー時のオーバーレイ表示 */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* 暗くする */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s;
}

/* 下のボタン風テキスト */
.video-btn-text {
    display: inline-block;
    margin-top: 10px;
    background: #333;
    color: #fff;
    padding: 8px 20px;
    font-size: 0.9rem;
    font-weight: bold;
    transition: background 0.3s;
}

/* ホバーアクション：画像とテキストの色を変える */
.video-link:hover .video-thumbnail {
    transform: scale(1.05); /* ほんの少しズーム */
}

.video-link:hover .video-overlay {
    opacity: 1;
}

.video-link:hover .video-btn-text {
    background: #e63946; /* ホバーで赤く変える */
}

/* スマホ対応 */
@media (max-width: 600px) {
    .video-content {
        max-width: 100%;
    }
}




/*注意事項-------------------------
/* 注意事項セクション：背景赤のフラットデザイン */
.caution-flat-red {
    max-width: 900px;
    margin: 40px auto;
    background-color: #ffbcc2; /* パキッとした赤 */
    color: #000000;           /* 白文字で読みやすく */
    padding: 30px;
    border-radius: 0;         /* 丸角なし */
}

.caution-flat-red h5 {
    margin: 0 0 20px 0;
    font-size: 1.25rem;
    font-weight: bold;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* 白い薄い線で区切り */
    padding-bottom: 10px;
}

.caution-flat-red ul {
    margin: 0;
    padding: 0;
    list-style: none; /* デフォルトの点を消す */
}

.caution-flat-red li {
    position: relative;
    padding-left: 1.5em; /* 行頭記号のスペース */
    line-height: 1.7;
    margin-bottom: 15px;
    font-size: 0.8rem;
}

.caution-flat-red li:last-child {
    margin-bottom: 0;
}





/*よくある質問コーナー------------------------------------------
/* FAQセクション全体 */
.faq-section {
    max-width: 900px;
    margin: 50px auto;
    font-family: sans-serif;
}

/* ヘッダー：他セクションと統一 */
.faq-header {
    border-bottom: 2px solid #333;
    padding-bottom: 8px;
    margin-bottom: 20px;
}

.faq-header h4 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: bold;
    color: #333;
}

/* 各質問アイテム：下線のみ */
.faq-item {
    padding: 25px 0;
    border-bottom: 1px solid #eee;
}

.faq-item:last-child {
    border-bottom: none;
}

/* 質問（Q）部分 */
.faq-q {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 15px;
}

.faq-symbol-q {
    background: #e63946; /* 赤背景 */
    color: #fff;
    font-weight: bold;
    font-size: 1rem;
    min-width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0; /* 丸角なし */
}

.faq-q p {
    margin: 0;
    font-size: 1.05rem;
    font-weight: bold;
    color: #333;
    line-height: 1.6;
}

/* 回答（A）部分 */
.faq-a {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.faq-symbol-a {
    background: #333; /* 黒背景 */
    color: #fff;
    font-weight: bold;
    font-size: 1rem;
    min-width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0; /* 丸角なし */
}

.faq-text {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.8;
}

/* スマホ対応 */
@media (max-width: 600px) {
    .faq-q, .faq-a {
        gap: 10px;
    }
    .faq-symbol-q, .faq-symbol-a {
        min-width: 24px;
        height: 24px;
        font-size: 0.85rem;
    }
}







/*商品カテゴリー　glid----------------------------------------
/* セクション全体 */
.related-products {
    max-width: 900px;
    margin: 60px auto;
    font-family: sans-serif;
}

/* ヘッダー：他セクションと統一 */
.related-header {
    border-bottom: 2px solid #333;
    padding-bottom: 8px;
    margin-bottom: 30px;
}

.related-header h4 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: bold;
    color: #333;
}

/* グリッドレイアウト：2列並び */
.product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2列 */
    gap: 30px; /* 上下左右の隙間 */
}

/* 各商品アイテム（大きなリンクボックス） */
.product-item-link {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    padding: 15px; /* ホバー時の枠のために余白を確保 */
    text-decoration: none; /* デフォルトのリンク下線を消す */
    color: inherit; /* 文字色は継承 */
    
    /* 通常時は枠線も影もなし（フラット） */
    border: 1px solid transparent; 
    border-radius: 0;
    transition: all 0.3s ease; /* ホバー時の変化を滑らかに */
}

/* ★ホバーアクション：浮き上がり★ */
.product-item-link:hover {
    background-color: #ffffff; /* 白背景を敷く */
    border-color: #eeeeee;     /* 薄い枠線を表示 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* 薄い影をつけて浮かす */
    transform: translateY(-5px); /* わずかに上に移動 */
}

/* 画像エリア：ボーダー削除 */
.product-img {
    flex-shrink: 0;
}

.product-img img {
    width: 130px; /* サイズは適宜調整 */
    height: auto;
    display: block;
    border: none; /* ボーダーを削除 */
}

/* 情報エリア */
.product-info {
    flex: 1;
}

.product-name {
    display: block;
    font-size: 1rem;
    font-weight: bold;
    color: #333; /* ホバー時のリンク色変化を防ぐため、デフォルトの色に */
    margin-bottom: 8px;
    line-height: 1.4;
}

/* ホバー時に名前だけ青くする演出 */
.product-item-link:hover .product-name {
    color: #0044cc;
}

.model-num {
    display: block;
    font-size: 0.85rem;
    color: #666;
    font-weight: normal;
}

.product-price {
    font-size: 0.95rem;
    margin-bottom: 8px;
    color: #333;
}

.product-price strong {
    color: #e63946; /* 赤の強調色 */
    font-size: 1.2rem;
}

.product-desc {
    font-size: 0.85rem;
    color: #555;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

/* スマホ表示：1列にする */
@media (max-width: 650px) {
    .product-grid {
        grid-template-columns: 1fr;
    }
    .product-item-link {
        padding: 10px;
    }
}





/*この商品と関連性のあるイベントはこちら！*/
/* 全体のコンテナ */
.event-container {
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 20px;
}

/* グリッドレイアウトの設定 */
.event-grid {
    display: grid;
    /* 横に最大5つ並ぶ、画面が狭くなると自動調整 */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 20px;
    list-style: none;
    padding: 0;
}

/* 各カードのスタイル */
.event-item {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    transition: all 0.3s ease;
    overflow: hidden;
}

.event-item:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transform: translateY(-4px);
    border-color: #007bff; /* ホバー時に枠の色を変える */
}

/* リンク全体をブロック化 */
.event-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    height: 100%;
}

/* 画像エリア */
.event-image {
    width: 100%;
    aspect-ratio: 4 / 3; /* 画像の比率を固定 */
    overflow: hidden;
    background: #f8f9fa;
}

.event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.event-item:hover img {
    transform: scale(1.05); /* ホバー時に画像を少し拡大 */
}

/* タイトルエリア */
.event-title {
    padding: 12px 8px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1; /* テキストが短くても高さを揃える */
}

.event-link:hover .event-title {
    color: #007bff;
}


/*こちらのレンタル商品もオススメです！*/

/* おすすめ商品セクションのヘッダー調整 */
.item_sameitem {
    margin: 0;
    font-size: 1.25rem;
    font-weight: bold;
    color: #333;
}

/* 共通のグリッド設定（2列） */
.product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

/* ボックス全体のリンク設定 */
.product-item-link {
    display: flex;
    gap: 15px;
    align-items: center;
    padding: 15px;
    text-decoration: none;
    color: #333;
    border: 1px solid transparent; /* 通常時は枠なし */
    transition: all 0.3s ease;
    background: #fff;
}

/* ホバー時の浮き上がりエフェクト */
.product-item-link:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    border-color: #eee;
}

/* 画像の設定（ボーダーなし） */
.product-img img {
    width: 100px; /* オススメ商品は少し小さめに */
    height: auto;
    border: none;
    display: block;
}

/* 文字情報 */
.product-name {
    display: block;
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 5px;
    color: #0044cc;
}

.product-desc {
    font-size: 0.85rem;
    color: #666;
    margin: 0;
    line-height: 1.4;
}

.product-btn {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.75rem;
    color: #888;
    border-bottom: 1px solid #ccc;
}

/* ★スマホ対応（1列にする）★ */
@media screen and (max-width: 768px) {
    .product-grid {
        grid-template-columns: 1fr; /* 1列に強制 */
    }

    .product-item-link {
        padding: 10px 0; /* スマホでは左右の余白を削って横幅を稼ぐ */
    }
    
    /* スマホで金額等が消えるのを防ぐための強制表示設定 */
    .tax10, .tax-included, .main-price {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}




/*お客様コメント蓄積
/* お客様の声 セクション全体 */
.voice-section {
    max-width: 900px;
    margin: 50px auto;
    font-family: sans-serif;
}

/* ヘッダー：他セクションと統一 */
.voice-header {
    border-bottom: 2px solid #333;
    padding-bottom: 8px;
    margin-bottom: 0; /* ボックスと密着させるため */
}

.voice-header h4 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: bold;
}

/* ★スクロールボックス本体★ */
.voice-scroll-container {
    height: 500px;            /* ボックスの高さ（適宜調整してください） */
    overflow-y: scroll;       /* 縦スクロールを出す */
    border: 1px solid #333;   /* シャープな黒枠 */
    border-top: none;         /* ヘッダーの線と重なるので上だけ消す */
    background-color: #fcfcfc;
    padding: 20px;
    border-radius: 0;         /* 丸角なし */
}

/* ボックス内の余白調整 */
.voice-content-inner {
    padding-right: 10px;      /* スクロールバーと文字が重ならないように */
}

/* ★スクロールバーの見た目をフラットにカスタマイズ（Google Chrome, Edgeなど用）★ */
.voice-scroll-container::-webkit-scrollbar {
    width: 8px;               /* バーの太さ */
}

.voice-scroll-container::-webkit-scrollbar-track {
    background: #f1f1f1;      /* バーの通り道の背景色 */
}

.voice-scroll-container::-webkit-scrollbar-thumb {
    background: #ccc;         /* 動くバーの色 */
    border-radius: 0;         /* バーの角も丸めない */
}

.voice-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #999;         /* ホバーした時の色 */
}

/* スマホ対応：高さを少し低くして画面を占領しすぎないように */
@media (max-width: 600px) {
    .voice-scroll-container {
        height: 400px;
        padding: 15px;
    }
}






/* ★最重要：横並びのルール★ */
.site-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1200px; /* サイト全体の最大幅 */
    margin: 0 auto;
    gap: 30px; /* メインとサイドバーの間の距離 */
}

/* メイン部分の幅（左） */
.main-content {
    flex: 1; /* 残りの幅をすべて使う */
    min-width: 0; /* 折り返し崩れ防止 */
}

/* サイドバー部分の幅（右） */
.side-navigation {
    width: 240px; /* サイドバーの横幅を固定 */
    flex-shrink: 0; /* 画面が狭くなっても縮ませない */
}

/* --- サイドバーのデザイン（丸角なし・フラット） --- */
.side-category-group {
    margin-bottom: 25px;
}

.side-category-banner {
    display: block;
    border-bottom: 2px solid #333; /* カテゴリの区切り線 */
    margin-bottom: 8px;
    transition: transform 0.2s;
}

.side-category-banner img {
    width: 100%;
    display: block;
}

.side-sub-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.side-sub-links a {
    display: block;
    padding: 8px 5px;
    text-decoration: none;
    color: #555;
    font-size: 0.85rem;
    border-bottom: 1px solid #f5f5f5;
    transition: all 0.2s;
}

.side-sub-links a:hover {
    background-color: #f9f9f9;
    color: #e63946;
    padding-left: 10px;
}

/* ★スマホでは横並びをやめて縦に並べる★ */
@media screen and (max-width: 1024px) {
    .site-container {
        flex-direction: column; /* 縦並びに変更 */
    }
    
    .side-navigation {
        width: 100%; /* スマホでは全幅に */
        order: 2;    /* メインの下に配置 */
    }
    
    .main-content {
        order: 1;
    }
}














/* サイドバー全体のコンテナ */
.side-navigation {
    width: 240px; /* サイトに合わせて調整 */
    font-family: sans-serif;
    color: #333;
}

/* カート・バナー周り */
.side-cart-info {
    margin-bottom: 15px;
}

.side-banner {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 10px;
}

.cart-view-btn img {
    width: 100%;
    transition: opacity 0.3s;
}

.cart-view-btn:hover img {
    opacity: 0.8;
}

/* 情報リンク（バナーボタン並び） */
.side-info-links {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    border-bottom: 1px solid #eee;
}

.side-info-links li {
    margin-bottom: 5px;
}

.side-info-links img {
    width: 100%;
    display: block;
    border-radius: 0; /* 丸角なし */
}

/* カテゴリグループ */
.side-category-group {
    margin-bottom: 25px;
}

/* カテゴリのバナー画像 */
.side-category-banner {
    display: block;
    border-bottom: 2px solid #333; /* 下線でシャープに区切る */
    margin-bottom: 10px;
    transition: transform 0.2s;
}

.side-category-banner img {
    width: 100%;
    display: block;
}

.side-category-banner:hover {
    transform: translateX(3px); /* ホバーで少し右にずれる演出 */
}

/* サブリンク（テキストのリスト） */
.side-sub-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.side-sub-links li {
    border-bottom: 1px solid #f5f5f5; /* 薄い区切り線 */
}

.side-sub-links li:last-child {
    border-bottom: none;
}

.side-sub-links a {
    display: block;
    padding: 8px 5px;
    text-decoration: none;
    color: #555;
    font-size: 0.85rem;
    line-height: 1.4;
    transition: all 0.2s;
}

.side-sub-links a::before {
    content: "・"; /* 行頭記号をCSSで付与 */
    margin-right: 4px;
}

.side-sub-links a:hover {
    background-color: #f9f9f9;
    color: #e63946; /* ホバー時に赤色に */
    padding-left: 10px; /* ホバー時に少し右に動く */
}