/* ========================================= */
/* 【完全版】PC2カラム ＋ スマホ最適化グリッド */
/* ========================================= */

/* ----------------------------------------- */
/* 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カラムレイアウト（News左 / Side右） */
    
    /* 親枠：グリッド直下の基準点 */
    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;
    }

    /* 右サイドバー：グリッド右下に絶対配置 */
    body .topics-area .t-wrapper {
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        width: 236px !important; /* Gコンテンツ幅に合わせる */
        margin-top: 20px !important;
        z-index: 10;
        
        /* リセット */
        float: none !important;
        height: auto !important;
        background: transparent !important;
        display: block !important;
    }

    /* サイドバー中身：縦積み */
    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;
    }
    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;
    }

    /* ニュースエリア：右側に余白を空ける */
    .news-area {
        margin-right: 256px !important; /* 幅236px + 余白20px */
        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;
        
        /* ここで魔法のグリッドを発動 */
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* 左右2列 */
        gap: 5px !important; /* アイテム間の隙間 */
    }

    /* .summaryの枠を無視して、中身のボタンを直接並べる設定 */
    body .topics-area .t-wrapper .summary {
        display: contents !important;
    }

    /* --- 各ボタンの配置指定 --- */
    
    /* [1行目・左] 会社案内（動画） */
    body .topics-area .t-wrapper .summary .topics-box.profile {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 2 !important;
        margin: 0 !important;
    }
    
    /* [1行目・右] お問い合わせ */
    body .topics-area .t-wrapper .summary .topics-box.contact {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 2 !important;
        margin: 0 !important;
    }
    
    /* [2行目・左] 求人窓口 */
    body .topics-area .t-wrapper .summary .topics-box.jobinfo {
        grid-column: 1 / 2 !important;
        grid-row: 2 / 3 !important;
        margin: 0 !important;
    }
    
    /* [2～3行目・右] 会社概要（正方形なので縦に2マス使う） */
    body .topics-area .t-wrapper .topics-box.about {
        grid-column: 2 / 3 !important;
        grid-row: 2 / 4 !important; /* ここがポイント：2行ぶち抜き */
        margin: 0 !important;
        height: auto !important;
    }
    
    /* [3行目・左] 最新情報（X） */
    body .topics-area .t-wrapper .summary .topics-box.x-twitter {
        grid-column: 1 / 2 !important;
        grid-row: 3 / 4 !important;
        margin: 0 !important;
    }

    /* ニュースエリアのリセット */
    .news-area {
        margin-right: 0 !important;
        margin-top: 20px !important;
    }
    
    /* 画像を枠いっぱいに広げる */
    .topics-box .bg-img img,
    .topics-box.x-twitter img {
        width: 100% !important;
        height: auto !important;
    }
}

/* ========================================= */
/* 5. モバイル表示 (767px以下) 修正版 */
/* ========================================= */
@media screen and (max-width: 767px) {
    
    /* コンテナをグリッド化 */
    body .topics-area .t-wrapper {
        position: static !important;
        width: 100% !important;
        margin-top: 0 !important;
        
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* 左右2列 */
        gap: 5px !important; /* 隙間 */
    }

    /* .summaryの枠を無視 */
    body .topics-area .t-wrapper .summary {
        display: contents !important;
    }

    /* --- 各ボタンの配置指定 --- */
    
    /* 全ボックス共通：幅をグリッドセルに強制的に合わせる */
    body .topics-area .t-wrapper .topics-box,
    body .topics-area .t-wrapper .summary .topics-box {
        width: 100% !important; 
        max-width: none !important;
    }

    /* [1行目・左] 会社案内（動画） */
    body .topics-area .t-wrapper .summary .topics-box.profile {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 2 !important;
        margin: 0 !important;
    }
    
    /* [1行目・右] お問い合わせ */
    body .topics-area .t-wrapper .summary .topics-box.contact {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 2 !important;
        margin: 0 !important;
    }
    
    /* [2行目・左] 求人窓口 */
    body .topics-area .t-wrapper .summary .topics-box.jobinfo {
        grid-column: 1 / 2 !important;
        grid-row: 2 / 3 !important;
        margin: 0 !important;
    }
    
    /* [3行目・左] 最新情報（X） */
    body .topics-area .t-wrapper .summary .topics-box.x-twitter {
        grid-column: 1 / 2 !important;
        grid-row: 3 / 4 !important;
        margin: 0 !important;
    }

    /* --- [2～3行目・右] 会社概要 --- */
    body .topics-area .t-wrapper .topics-box.about {
        grid-column: 2 / 3 !important;
        grid-row: 2 / 4 !important; /* 2行ぶち抜き */
        margin: 0 !important;
        
        /* 枠のサイズ強制 */
        width: 100% !important;  
        height: 100% !important; 
        
        display: flex !important;
        flex-direction: column !important;
        position: relative !important; /* 基準点 */
    }
    
    /* リンク枠（l-inner） */
    body .topics-area .t-wrapper .topics-box.about .l-inner {
        flex: 1 !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        position: relative !important;
        box-sizing: border-box !important;
    }
    
    /* 背景画像枠（bg-img） */
    body .topics-area .t-wrapper .topics-box.about .bg-img {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body .topics-area .t-wrapper .topics-box.about .bg-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* 枠に合わせてトリミング */
        display: block !important;
    }
    
    /* ▼▼▼ ロゴテキスト画像のセンタリング修正箇所 ▼▼▼ */
    body .topics-area .t-wrapper .topics-box.about .img {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -55%) !important; /* ど真ん中より少しだけ上に（黒帯考慮） */
        
        width: 100% !important; /* 親枠いっぱいに広げる */
        text-align: center !important; /* 中身を中央揃え */
        margin: 0 !important;
        padding: 0 5px !important; /* 端に寄りすぎないよう微調整 */
        z-index: 5 !important;
    }
    
    /* 内包するPタグの余白削除 */
    body .topics-area .t-wrapper .topics-box.about .img p {
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }

    /* ロゴ画像自体の調整 */
    body .topics-area .t-wrapper .topics-box.about .img img {
        width: auto !important; /* 比率維持 */
        max-width: 85% !important; /* 枠からはみ出さない */
        height: auto !important;
        display: inline-block !important; /* text-alignを効かせる */
        margin: 0 auto !important;
    }

    /* 黒帯タイトルの位置固定 */
    body .topics-area .t-wrapper .topics-box.about .ttl-box {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 6 !important;
    }


    /* --- その他共通調整 --- */

    /* ニュースエリアのリセット */
    .news-area {
        margin-right: 0 !important;
        margin-top: 20px !important;
    }
    
    /* 他の画像の幅調整 */
    .topics-box .bg-img img,
    .topics-box.x-twitter img {
        width: 100% !important;
        height: auto !important;
    }
}