@charset "UTF-8";

/* --- 1. 表示切り替え設定 --- */
@media (max-width: 767px) {
    .spHidden { display: none !important; }
}
@media (min-width: 768px) {
    .pcHidden { display: none !important; }
}

/* --- 2. スマホ用スクロール設定 --- */
.scroll-container {
    display: flex; /* これが横に並べる魔法の指示です */
    overflow-x: auto; /* 横にはみ出た分をスクロールさせる */
    gap: 15px;
    padding-bottom: 20px;
    -webkit-overflow-scrolling: touch;
}

/* スクロールバーを少し見えやすくする（任意） */
.scroll-container::-webkit-scrollbar {
    height: 4px;
}
.scroll-container::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.scroll-item {
    flex: 0 0 80%; /* 画面の80%幅で止める（次が見えるように） */
    min-width: 260px;
}

.scroll-item img {
    width: 100%;
    height: auto;
    border-radius: 5px; /* 角を少し丸くすると今風になります */
}

.scroll-caption {
    font-size: 12px;
    line-height: 1.6;
    margin-top: 10px;
    color: #333;
    white-space: normal; /* テキストを折り返す */
}