/* ======================== */
/* レスポンシブ対応：モバイル向け調整 */
/* ======================== */
/* PC専用の改行タグを非表示にする */
@media screen and (max-width: 767px) {
br.only-pc { display: none; }
}
/* ======================== */
/* スライダー全体のスタイル */
/* ======================== */
.slider { position: relative; overflow: hidden; visibility: hidden; margin-bottom:40px;}
/* スライダーの表示領域 */
.slider-viewport { cursor: grab; -webkit-user-select: none; user-select: none; }
/* スライドを横並びに配置 */
.slider-items { display: flex; pointer-events: none; }
/* 各スライドを均等幅に設定 */
.slider-slide { flex: 1; }
/* ======================== */
/* スライド内の画像のスタイル */
/* ======================== */
/* スライド内の画像を比率固定で表示 */
/* 変更後 */
.slider-image { position: relative; aspect-ratio: 1480/832; background: #f0efe8; }
.slider-image img { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; }
/* ======================== */
/* スライドテキストのスタイル */
/* ======================== */
.slider-text { line-height: 1.8; }
@media print, (min-width: 768px) {
.slider-text { margin-top: 20px; font-size: 16px; text-align: center; }
}
@media screen and (max-width: 767px) {
.slider-text { margin-top: 15px; font-size: 15px; }
}

/* ======================== */
/* スライド操作エリアのスタイル（ナビゲーション＋サムネイル） */
/* ======================== */
@media print, (min-width: 768px) {
.slider-controls { margin-top: 20px; }
}
@media screen and (max-width: 767px) {
.slider-controls { margin-top: 15px; }
}
.slider-controls-inner { position: relative; }
/* ======================== */
/* 矢印ナビゲーションのスタイル */
/* ======================== */
/* 矢印ボタンのサイズ調整 */
.slider-nav button { display: block; position: absolute; top: 0; height: 100%; padding: 0; border: none; background: none; font: inherit; line-height: 1; cursor: pointer; -webkit-appearance: none; appearance: none; }
@media print, (min-width: 768px) {
.slider-nav button { width: 40px; }
}
@media screen and (max-width: 767px) {
.slider-nav button { width: 25px; }
}
/* 矢印アイコンのスタイル */
.slider-nav button::before { content: ''; display: block; position: absolute; top: 50%; background: #c11a51; -webkit-mask: url(../images/slider_arrow.svg) 0 0/contain no-repeat; mask: url(../images/slider_arrow.svg) 0 0/contain no-repeat; transition: opacity 300ms cubic-bezier(.215, .61, .355, 1); }
@media print, (min-width: 768px) {
.slider-nav button::before { width: 25px; height: 20px; margin-top: -10px; }
}
@media screen and (max-width: 767px) {
.slider-nav button::before { width: 19px; height: 15px; margin-top: -7.5px; }
}

/* 矢印ボタンのホバー・アクティブ状態のスタイル */
@media print, (min-width: 768px) {
.slider-nav button:hover::before,  .slider-nav button:active::before { opacity: 0.5; }
}
/* 左矢印ボタンのスタイル */
.slider-nav button:nth-child(1) { left: 0; }
.slider-nav button:nth-child(1)::before { left: 0; transform: scaleX(-1); }
/* 右矢印ボタンのスタイル */
.slider-nav button:nth-child(2) { right: 0; }
.slider-nav button:nth-child(2)::before { right: 0; }
/* ======================== */
/* サムネイルのスタイル */
/* ======================== */
.slider-thumbnails { overflow: hidden; }
@media print, (min-width: 768px) {
.slider-thumbnails { width: 670px; margin: 0 auto; }
}
@media screen and (max-width: 767px) {
.slider-thumbnails { margin: 0 25px; }
}
/* 中央のサムネイル1つ分の表示枠 */
.slider-thumbnails-center { width: 20%; margin: 0 auto; }
/* サムネイルを横並びに配置 */
.slider-thumbnails-items { display: flex; }
/* 各サムネイルを均等幅に設定 */
.slider-thumbnails-slide { flex: 1; }
@media print, (min-width: 768px) {
.slider-thumbnails-slide { padding: 0 5px; }
}
@media screen and (max-width: 767px) {
.slider-thumbnails-slide { padding: 0 3px; }
}
/* サムネイルのボタンスタイル */
.slider-thumbnails-slide button { display: block; position: relative; width: 100%; aspect-ratio: 1480/832; margin: 0; padding: 0; border: none; background: none; font: inherit; line-height: 1; cursor: pointer; -webkit-appearance: none; appearance: none; transition: opacity 300ms cubic-bezier(.215, .61, .355, 1); }
.slider-thumbnails-slide button::before { content: ""; display: block; position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; box-sizing: border-box; border: 2px solid #c11a51; opacity: 0; transition: opacity 300ms cubic-bezier(.215, .61, .355, 1); }
.slider-thumbnails-slide button img { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }

/* サムネイルのホバー・アクティブ状態 */
@media print, (min-width: 768px) {
.slider-thumbnails-slide button:hover,  .slider-thumbnails-slide button:active { opacity: 0.5; }
}
/* 現在のスライドを示すサムネイルのスタイル */
.slider-thumbnails-slide.is-current button { pointer-events: none; }
.slider-thumbnails-slide.is-current button::before { opacity: 1; }
/* ======================== */
/* グラブカーソルの設定 */
/* ======================== */
/* フリック操作中のカーソル変更 */
.slider.is-grabbing .slider-viewport, .slider.is-grabbing .slider-viewport * { cursor: grabbing !important; }
/* ======================== */
/* サムネイルが5個以下のときのレイアウト調整 */
/* ======================== */
.slider.is-lte5 .slider-controls { display: flex; justify-content: center; }
@media print, (min-width: 768px) {
.slider.is-lte5 .slider-nav button:nth-child(1) { left: -35px; }
}
@media print, (min-width: 768px) {
.slider.is-lte5 .slider-nav button:nth-child(2) { right: -35px; }
}
@media print, (min-width: 768px) {
.slider.is-lte5 .slider-thumbnails { width: auto; }
}
.slider.is-lte5 .slider-thumbnails-center { width: auto; }
.slider.is-lte5 .slider-thumbnails-track-wrapper { width: auto !important; }
.slider.is-lte5 .slider-thumbnails-track-offset { transform: none !important; }
.slider.is-lte5 .slider-thumbnails-track { transform: none !important; }
.slider.is-lte5 .slider-thumbnails-items { transform: none !important; }
.slider.is-lte5 .slider-thumbnails-slide { flex: none; }
@media print, (min-width: 768px) {
.slider.is-lte5 .slider-thumbnails-slide { width: 124px; }
}
@media screen and (max-width: 767px) {
.slider.is-lte5 .slider-thumbnails-slide { width: 53px; }
}