.youtube_original{
    position:relative;
    width:100%;
    height:0;
    padding-top:56.25%;
}
.youtube_original iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}



.video{
width:100%;
padding-bottom: 56.25%;
height:0px;
position: relative;
}
.video iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}




/*商品一覧のページ送りの文字サイズの変更*/
.fs-c-pagination {
    font-size: 2rem;
}



// 予約データを読み込む関数
async function loadReservationData() {
    try {
        const response = await fetch('itembox/item/csv/reserve_cal.csv');
        const text = await response.text();
        return parseCSV(text);
    } catch (error) {
        console.error('データの読み込みに失敗しました:', error);
        return {};
    }
}

// CSVパース関数
function parseCSV(csvText) {
    const lines = csvText.split('\n').filter(line => line.trim());
    const reservationsBySku = {};

    // ヘッダー行をスキップ
    lines.slice(1).forEach(line => {
        const [sku, startDate, endDate] = line.split(',').map(item => item.trim());
        
        if (!reservationsBySku[sku]) {
            reservationsBySku[sku] = [];
        }

        if (startDate && endDate) {
            reservationsBySku[sku].push({
                startDate: new Date(startDate),
                endDate: new Date(endDate)
            });
        }
    });

    return reservationsBySku;
}



/*レンタル予約状況カレンダー用ここから*/

.sku-link-list {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    justify-content: center;
}

.sku-link {
    padding: 8px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    background-color: #f8f9fa;
    text-decoration: none;
    color: #333;
}

.sku-link:hover {
    background-color: #e9ecef;
}

.sku-link.active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}


/*レンタル予約状況カレンダー用ここまで*/