/* スライダー全体のコンテナ */
.slider-container {
    display: flex;
    align-items: center;
    max-width: 1000px; /* 全体の最大幅 */
    margin: 0 auto;
    position: relative; /* 矢印の絶対位置の基準 */
    /* 矢印が左右に配置されるための余白を確保します */
    padding-left: 35px; /* 左矢印とコンテンツの間のスペース（矢印幅25px + 余裕10px） */
    padding-right: 35px; /* 右矢印とコンテンツの間のスペース */
    box-sizing: border-box; /* paddingを含めて幅を計算 */
}

/* 矢印ボタンのスタイル */
.slider-arrow {
    position: absolute; /* 親要素 .slider-container に対する絶対位置指定 */
    top: 50%; /* 上下中央に配置 */
    transform: translateY(-50%); /* 垂直方向の中央揃え */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10; /* 画像の上に表示されるようにする */
}

/* 左側の矢印の位置 */
.slider-arrow.prev-arrow {
    left: 0; /* .slider-container の左端に配置 */
}

/* 右側の矢印の位置 */
.slider-arrow.next-arrow {
    right: 0; /* .slider-container の右端に配置 */
}

/* 矢印の画像サイズ */
.slider-arrow img {
    width: 25px; /* 矢印画像の幅を25pxに統一 */
    height: auto;
    display: block;
}

/* スライダーの表示領域（隠す部分） */
.slider-wrapper {
    overflow: hidden;
    width: 950px; /* 画像コンテンツの表示幅は950pxを維持します */
    padding: 0; /* wrapper自体にはパディング不要 */
}

/* スライドする画像群のコンテナ */
.slider-inner {
    display: flex;
    transition: transform 0.3s ease-in-out;
    gap: 10px; /* アイテム間のギャップ */
}

/* 各画像アイテムのスタイル (メインスライダー) */
/* main-slider-container 内の a タグに適用 */
#main-slider-container .slider-inner a {
    flex-shrink: 0;
    width: 200px; /* メインスライダーの画像アイテムの幅 */
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* スライダー内の画像の共通スタイル */
.slider-inner img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* 二つ目のスライダーのアイテム（div.slider-item）のスタイル */
#coordinate-slider-container .slider-inner .slider-item {
    width: 300px; /* ★ここを調整。一つのスライドアイテムの理想の幅を設定★ */
    flex-shrink: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    /* padding: 5px; */ /* 必要に応じてパディングを追加 */
}

/* 二つ目のスライダー内の画像のスタイル（重複を避けるため、より具体的なセレクタで） */
#coordinate-slider-container .slider-inner .slider-item img {
    max-width: 100%; /* 親要素の幅に合わせて画像を調整 */
    height: auto; /* アスペクト比を維持 */
    display: block;
}

/* 二つ目のスライダー内のnav（テキスト部分）のスタイル */
#coordinate-slider-container .slider-inner .slider-item nav {
    display: flex;             
    flex-direction: column;    
    gap: 2px;                  
    margin-top: 10px;          
    width: 100%;               
    box-sizing: border-box;    
    padding: 0 5px;            
}

/* 二つ目のスライダー内の nav のリンク（<a>タグ）のスタイル */
#coordinate-slider-container .slider-inner .slider-item nav a {
    display: block;             /* ★重要：blockにして幅とマージンを適用可能にする */
    width: 90%;                 /* ★幅を90%に設定 */
    margin: 0 auto;             /* ★中央寄せにする */
    
    border: 1px solid #ccc;       /* 1pxの実線ボーダー（色は薄いグレー） */
    border-radius: 3px;           /* ボーダーの角を2px丸くする */
    padding: 5px 10px;            /* ボタンの内側に上下5px、左右10pxの余白を追加 */
    text-align: center;           /* テキストを中央揃えにする */
    background-color: #fff;    /* ボタンの背景色を少し明るいグレーに */
    color: #333;                  /* テキストの色を濃いグレーに */
    font-size: 14px;              /* フォントサイズを調整（必要に応じて） */
    cursor: pointer;              /* マウスカーソルをポインターにして、クリック可能であることを示す */
    box-sizing: border-box;       /* パディングやボーダーを含めて要素のサイズを計算 */
    white-space: nowrap;          /* テキストの折り返しを防ぐ */
    text-decoration: none;        /* リンクの下線を削除 */
}

/* NEWS */
.news{
	margin-bottom: 50px;
}