/* ========================================= */
/* レスポンシブ対応のための追加CSS */
/* ========================================= */

/* グローバル設定: すべての要素でボックスモデルをborder-boxに統一 */
html {
    box-sizing: border-box; /* すべての要素でパディングとボーダーが幅と高さに含まれるようにする */
}
*, *::before, *::after {
    box-sizing: inherit; /* すべての要素がhtmlからbox-sizingを継承するようにする */
}

/* ----------------------------------------- */
/* 1. レスポンシブなスライダー画像 */
/* ----------------------------------------- */

/* スライダー内の画像が完全にレスポンシブであることを保証 */
.main-slde #slider img {
    max-width: 100%; /* 画像がコンテナの幅を超えないように縮小 */
    height: auto;    /* 画像のアスペクト比を維持 */
    display: block;  /* インライン要素の場合、画像の下の余分なスペースを削除 */
}

/* スライダーコンテナ自体をモバイル表示に合わせて調整し、隙間を黒で埋める */
.main-slde {
    width: 100%; /* スライダーコンテナが全幅を占めるようにする */
    overflow: hidden; /* スライダーがコンテンツのはみ出しを隠すために重要 */
    margin: 0 auto; /* max-widthがある場合、スライダーを中央に配置 */
    background-color: black; /* スライダーの隙間を黒で埋める */
}

/* スライダー内のリストアイテムに特定の幅がある場合、それらを調整 */
.main-slde #slider li {
    width: 100%; /* モバイルで各スライドが全幅を占めるようにする */
    /* 必要に応じて、リストアイテムのその他のスタイルを追加 */
}

/* ----------------------------------------- */
/* 2. 観光事業バナーのレスポンシブ対応 (元のCSS) */
/* ----------------------------------------- */
#tourism .bnr-area .bnr-trv {
    position: relative;
    background: url(http://ichimaru-grp.jp/wp-content/themes/twentysixteen/images/contents/tourism_bnr10.png) no-repeat 0 0;
    width: 712px;
    height: 260px;
    margin: 0 auto;
    text-align: center;
}
@media screen and (max-width: 768px) {
    #tourism .bnr-area .bnr-trv {
        width: 100%;
        height: 150px;
        background: url(http://ichimaru-grp.jp/wp-content/themes/twentysixteen/images/contents/tourism_bnr10_sp.png) no-repeat 50% 0;
        background-size: 280px auto;
    }
}

/*
    Jetpack から移行された CSS
*/

/*
カスタム CSS 機能へようこそ。

使い方についてはこちらをご覧ください
(英語ドキュメンテーション)。http://wp.me/PEmnE-Bt
*/