/* 全体共通：画像がはみ出さないように制御 */
img {
    width: 100%;
    /* height: auto; だと画像本来の大きさが出るため、vhで制限します */
    height: 70vh; 
    object-fit: cover; /* 比率を保ったまま枠に収める */
    vertical-align: bottom;
}

/* ヒーローセクション（もしスライダーをこの中に入れるなら） */
.hero {
    min-height: 100vh; /* heightからmin-heightにするとコンテンツ量に合わせられます */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* メインスライダー */
.gallery {
    margin: 0 0 5px 0;
    width: 90%; /* 横幅を少し絞ると見やすくなります */
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.gallery li {
    list-style: none;
}

/* 矢印の共通設定 */
/* 修正点：.slick-prev と .slick-next の間にカンマを入れる必要があります */
.slick-prev, 
.slick-next {
    position: absolute;
    z-index: 3;
    top: 50%; /* 中央に配置 */
    transform: translateY(-50%); /* 垂直方向の真ん中補正 */
    cursor: pointer;
    outline: none;
    border-top: 3px solid #ccc;
    border-right: 3px solid #ccc;
    height: 25px;
    width: 25px;
    /* 背景色を消す場合（Slickデフォルト対策） */
    background: transparent; 
}

/* 戻る矢印（左側） */
.slick-prev {
    left: -40px;
    transform: translateY(-50%) rotate(-135deg);
}

/* 次へ矢印（右側） */
/* 修正点：leftではなくrightに設定し、回転を調整 */
.slick-next {
    right: -40px;
    transform: translateY(-50%) rotate(45deg);
}

/* サムネイル（下のボタン） */
.choice-btn {
    width: 90%;
    max-width: 800px;
    margin: 0 auto;
}

.choice-btn li {
    cursor: pointer;
    outline: none;
    list-style: none;
    background: #333;
}

/* サムネイル画像の高さ：メインより短く（15%）設定 */
.choice-btn img {
    height: 15vh; 
    opacity: 0.4;
    transition: opacity 0.3s;
}

.choice-btn li.slick-current img {
    opacity: 1;
}

/* Slickの挙動を安定させる */
.choice-btn .slick-track {
    transform: unset !important;
}