@charset "utf-8";

/* スライドショー */
/* カルーセル全体 */
.carousel {
/* 水平方向中央寄せ */
    display: flex;
    justify-content: center;
    margin-top: 0;
}
/* カルーセル内容 */
.contains {
      /* サイズは自由に変更してください。*/
    /* 下の.slideも同じサイズにしてください。 */
    /* max-width: 1200px;
    max-height: 900px; */
    width: clamp(20rem, 100vw, 75rem);
    height: clamp(20rem, 6.897rem + 65.52vw, 43.75rem);
    overflow: hidden;
    position: relative;
    padding: 0;
    list-style: none;
}

/* スライド切り換え用ラジオボタンは常に非表示 */
.slide_select {
    display: none;
}
/* 各スライド */
.slide {
    /* サイズは自由に変更してください。*/
    /* 上の.containsも同じサイズにしてください。 */
    /* max-width: 1200px;
    max-height: 900px; */
    width: 100%;
    /* height: clamp(12.5rem, -1.136rem + 68.18vw, 50rem); */
    height: 100%;
    position: absolute;
    /* スライドの初期値は選択されていないので透明にしておく */
    opacity: 0;
}
/* 前へ次へボタン */
.scroll_button {
    position: absolute;
    display: block;
    height: 30px;
    width: 30px;
    /* 縦中央から20px上の位置 */
    top: 50%;
    margin-top: -20px;
    /* 上辺と右辺のみ幅5pxの枠線 */
    border-width: 5px 5px 0 0;
    border-style: solid;
    border-color: #fdfdfd;
    cursor: pointer;
    /* 普段はボタンはやや薄くする */
    opacity: 0.7;
    /* スライドよりも前面にする */
    z-index: 3;
}
/* ホバー時にボタンを強調 */
.scroll_button:hover {
    opacity: 1;
}
/* 前へボタン */
.scroll_prev {
    left: 3rem;
    /* 上辺と右辺の枠線を回転して"＜"にする */
    transform: rotate(-135deg);
}
/* 次へボタン */
.scroll_next {
    right: 3rem;
    /* 上辺と右辺の枠線を回転して"＞"にする */
    transform: rotate(45deg);
}
/* スライド移動ボタンエリア */
.move_controler {
    position: absolute;
    bottom: 15%;
    width: 100%;
    text-align: center;
}
/* スライド移動の各ボタン */
.button_move {
    display: inline-block;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    border-radius: 100%;
    cursor: pointer;
    /* 普段はやや薄くする */
    opacity: 0.5;
    /* スライドより前面にする */
    z-index: 2;
}
/* ホバー時はやや明るくする */
.button_move:hover {
    opacity: 0.75;
}
/* スライド移動ボタンの色 */
.button_move {
    background-color: #fdfdfd;
}
/* 1番目のスライド選択時 */
/* 1番目のスライドの透明度を0にして表示する */
.slide_select:nth-of-type(1):checked ~ .slide:nth-of-type(1) {
    opacity: 1;
}
/* スライド移動ボタンの1個目を明るくする */
/* （今選択されていることが分かるように） */
.slide_select:nth-of-type(1):checked ~ .move_controler .button_move:nth-of-type(1) {
    opacity: 1;
}
.slide_select:nth-of-type(2):checked ~ .slide:nth-of-type(2) {
    opacity: 1;
}
/* 2番目のスライド選択時（1番目のスライドと同じことをする） */
.slide_select:nth-of-type(2):checked ~ .move_controler .button_move:nth-of-type(2) {
    opacity: 1;
}
/* 3番目のスライド選択時 */
.slide_select:nth-of-type(3):checked ~ .slide:nth-of-type(3) {
    opacity: 1;
}
.slide_select:nth-of-type(3):checked ~ .move_controler
    .button_move:nth-of-type(3) {
    opacity: 1;
}
/* 4番目のスライド選択時 */
.slide_select:nth-of-type(4):checked ~ .slide:nth-of-type(4) {
    opacity: 1;
}
.slide_select:nth-of-type(4):checked ~ .move_controler
    .button_move:nth-of-type(4) {
    opacity: 1;
}
/* 5番目のスライド選択時 */
.slide_select:nth-of-type(5):checked ~ .slide:nth-of-type(5) {
    opacity: 1;
}
.slide_select:nth-of-type(5):checked ~ .move_controler
    .button_move:nth-of-type(5) {
    opacity: 1;
}
/* 6番目のスライド選択時 */
.slide_select:nth-of-type(6):checked ~ .slide:nth-of-type(6) {
    opacity: 1;
}
.slide_select:nth-of-type(6):checked ~ .move_controler
    .button_move:nth-of-type(6) {
    opacity: 1;
}

/* 本体 */
.index-content{
    display: flex;
    margin-bottom: 3rem;
}

/* 左側 */
.index-content__left{
    width: 70%;
}

.news-list{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.news-date{
    width: 15%;
    padding: 0.5rem 0.5rem 0 0.5rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.85rem;
}

.news-item{
    width: 70%;
    padding: 0.5rem 0 0 0.5rem;
    margin-left: 0;
    text-align: start;
    font-size: 0.85rem;
}

.pickup-box{
    display: flex;
    margin-top: 1rem;
    gap: 1rem;
    justify-content: center;
    text-align: center; 
    padding: 0;
}

.pickup{
    width: 45%;
    position: relative;
}

.pickupimg{
    max-height: 280px;
}

.pickuptxt{
    position: absolute;
    bottom: 0%;
    margin: 0;
    color: white;
    font-size: 0.8rem;
    width: 100%;
}

/* 右側（広告） */
.index-content__right{
    width: 30%;
}

.banner-index{
    max-width: 300px;
}

.banner{
    margin: 1.5rem auto 0 auto;
}