@charset "UTF-8";

/*option.html*/
/*==================================================
option.htmlスライダーのためのcss
===================================*/


@charset "UTF-8";

/* option.html スライダー用CSS */

/* スライダー全体 */
.option-slider {
    width: 94%; /* 横幅94%で中央寄せ */
    margin: 0 auto;
    z-index: 3;
}

.option-slider img {
    width: 60vw; /* スライダー内の画像をレスポンシブ化 */
    height: auto;
}

/* スライド全体の基本スタイル */
.option-slider .slick-slide {
    transform: scale(0.8); /* 左右の画像のサイズを80%に */
    transition: all 0.5s; /* 拡大や透過のアニメーションを0.5秒で行う */
    opacity: 0.5; /* 透過50% */
}

/* 中央のスライドのスタイル */
.option-slider .slick-current {
    transform: scale(1); /* 中央の画像のサイズだけ等倍に */
    opacity: 1; /* 透過なし */
}

/* 矢印の設定 */

/* 矢印の基本スタイル */
.option-slick-prev,
.option-slick-next {
    position: absolute; /* 絶対配置にする */
    top: 50%; /* スライダーの中央に配置 */
    transform: translateY(-50%); /* 垂直方向に中央揃え */
    cursor: pointer; /* マウスカーソルを指マークに */
    outline: none; /* クリックをしたら出てくる枠線を消す */
    border-top: 2px solid #666; /* 矢印の色 */
    border-right: 2px solid #666; /* 矢印の色 */
    height: 15px;
    width: 15px;
}

/* 戻る矢印のスタイル */
.option-slick-prev {
    left: -2%; /* 左側の位置 */
    transform: rotate(-135deg) translateY(-50%);
}

/* 次へ矢印のスタイル */
.option-slick-next {
    right: -2%; /* 右側の位置 */
    transform: rotate(45deg) translateY(-50%);
}

/* ドットナビゲーションの設定 */

/* ドットナビゲーション全体の位置 */
.option-slick-dots {
    text-align: center;
    margin: 20px 0 0 0; /* 上に余白を追加 */
    position: relative; /* 必要に応じて absolute に変更 */
    bottom: -20px; /* 必要に応じて位置を調整 */
}

/* ドットの個別設定 */
.option-slick-dots li {
    display: inline-block;
    margin: 0 5px; /* ドット間の余白 */
}

/* ドットのスタイル */
.option-slick-dots button {
    color: transparent; /* ボタンのテキストを隠す */
    outline: none; /* フォーカス時の枠線を削除 */
    width: 8px; /* ドットボタンのサイズ */
    height: 8px; /* ドットボタンのサイズ */
    display: block;
    border-radius: 50%; /* 丸いドット */
    background: #ccc; /* ドットボタンの色 */
    border: none;
    cursor: pointer;
}

/* 現在地のドットスタイル */
.option-slick-dots .slick-active button {
    background: #333; /* 現在地のドットの色を濃く */
}