/* ========================================= */
/* 【サイズ調整版】Gコンテンツ幅合わせ・2カラムレイアウト */
/* ========================================= */

/* ----------------------------------------- */
/* 1. 基本設定 */
/* ----------------------------------------- */
html {
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: inherit;
}

/* ----------------------------------------- */
/* 2. スライダーと画像のレスポンシブ設定 */
/* ----------------------------------------- */
.main-slde #slider img {
    max-width: 100%;
    height: auto;
    display: block;
}
.main-slde {
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    background-color: black;
}
.main-slde #slider li {
    width: 100%;
}

/* ----------------------------------------- */
/* 3. 観光事業バナー */
/* ----------------------------------------- */
#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;
    }
}

/* ========================================= */
/* 4. PC表示 (768px以上) のレイアウト修正 */
/* ========================================= */
@media screen and (min-width: 768px) {

    /* --- [A] スライダーエリアの調整 --- */
    .topics-box.tourism {
        max-width: 950px !important;
        width: 100% !important;
        margin: 0 auto 5px !important;
    }
    .topics-box.tourism .main-slde,
    .topics-box.tourism .bx-viewport {
        height: 365px !important;
        overflow: hidden !important;
    }
    .topics-box.tourism #slider li {
        width: 950px !important;
        height: 365px !important;
        float: left !important;
    }
    .topics-box.tourism #slider li img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        position: static !important;
        transform: none !important;
    }
    .topics-box.tourism .text-area {
        top: 140px !important;
    }


    /* --- [B] 2カラムレイアウト配置修正 --- */

    /* 1. 親枠（グリッドエリア）の設定 */
    body .topics-area .topics-wrapper {
        position: relative !important;
        height: auto !important;
        overflow: visible !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    body .topics-area .topics-wrapper::after {
        content: "";
        display: block;
        clear: both;
    }

    /* 2. 右サイドバー（Gコンテンツの幅 236px に合わせる） */
    body .topics-area .t-wrapper {
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        
        /* ▼▼▼ ここを修正：幅をGコンテンツ1枠分に縮小 ▼▼▼ */
        width: 236px !important; 
        
        margin-top: 20px !important;
        z-index: 10;
        
        /* リセット */
        float: none !important;
        height: auto !important;
        background: transparent !important;
    }

    /* 3. サイドバーの中身（縦積み） */
    body .topics-area .t-wrapper .topics-box,
    body .topics-area .t-wrapper .summary {
        width: 100% !important;
        display: block !important;
        float: none !important;
        margin-bottom: 10px !important;
        position: static !important;
    }
    
    /* Xボタン（最新情報） */
    body .topics-area .t-wrapper .summary .topics-box.x-twitter {
        margin-bottom: 0 !important;
    }
    
    /* 画像調整 */
    .topics-box .bg-img img,
    .topics-box.x-twitter img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* 4. ニュースエリア（左側に配置・余白調整） */
    .news-area {
        /* ▼▼▼ ここを修正：サイドバー幅(236px) + 余白(20px) = 256px を確保 ▼▼▼ */
        margin-right: 256px !important;
        
        margin-top: 20px !important;
        clear: both !important;
        position: relative !important;
        z-index: 1;
    }
    
    /* ニュースリストの幅調整 */
    .news-area .news-list li {
        width: 100% !important;
    }
}

/* --- 5. モバイル表示 (767px以下) --- */
@media screen and (max-width: 767px) {
    body .topics-area .t-wrapper {
        position: static !important;
        width: 100% !important;
        margin-top: 0 !important;
    }
    .news-area {
        margin-right: 0 !important;
        margin-top: 0 !important;
    }
}
/*
    Jetpack から移行された CSS
*/

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

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