/*
 Theme Name:     immo-child
 Description:    immoテーマのレスポンシブ対応用子テーマ (最終最適化版)
 Author:         Your Name
 Template:       immo
 Version:        1.0.5
*/

/****************************************
 * 1. PC/全体レイアウトの修正 (固定幅の解除とヘッダーの重ね合わせ)
 ****************************************/

/* ページの全体幅を相対的に変更 */
div#container {
	width: 100%; 
    max-width: 1120px;
    padding: 0 100px; 
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
}

/* ヘッダーの重ね合わせを実装 */
div#header {
	width: calc(100% - 200px);
    position: absolute !important;
    top: 0;
    left: 100px;
    z-index: 1000;
    margin: 10px 0 0 0;
    padding: 0;
}

/* ヘッダー内のロゴ画像をレスポンシブに */
div#header h1 img {
    max-width: 100%;
    height: auto;
}

/* メインコンテンツエリアにFlexboxを適用 */
div#main {
    width: 100%; 
    display: flex; 
    flex-wrap: wrap;
	/* background-color: #cccccc; ?? デバッグ用は削除推奨 */
}

/* 2カラムレイアウトの子要素に box-sizing を適用 */
div#main div {
    box-sizing: border-box;
}

/* 2カラムレイアウトの幅設定 (PC用) */
div#sub-navigation {
    width: 150px; 
    float: none; 
    order: 1; 
    padding: 0;
}
div#contents {
    width: auto; /* flex-growに任せる */
    float: none;
    margin: 10px 0 0 40px; /* 左側に40pxのスペースを確保 */
    padding: 0; 
    order: 2; 
    flex-grow: 1; 
}
div#standing-navigation {
    float: none !important;
    order: 3; 
    width: 150px; 
    padding: 0;
}


/****************************************
 * 2. ナビゲーションボタンとビジュアルのレスポンシブ修正
 ****************************************/

/* div#navigation 全体の幅を解放 */
div#navigation {
    width: 100%; 
    margin: 0 auto 20px auto;
}

/* メインビジュアルエリアの高さ確保 (トップページ) */
div#navigation div#mainvisual {
    height: 0;
    padding-bottom: 56.22%; /* 900x506の比率 */
    width: 100%;
    position: relative;
    margin: 0 auto 20px auto; 
    overflow: hidden;
}

/* 下層ページビジュアルの高さ確保 */
div#navigation div#pagevisual {
    height: 0;
    padding-bottom: 11.11%; /* 900x100の正確な比率 */
    width: 100%;
    position: relative;
    margin: 0 auto 20px auto; 
    overflow: hidden;
}

/* スライドショーのラッパーと画像 */
div#navigation div#mainvisual div#slideshow,
div#navigation div#pagevisual div#slideshow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
div#navigation div#mainvisual img.visual,
div#navigation div#pagevisual img.visual {
    width: 100%;
    height: 100%; 
    object-fit: cover;
}

/* local-announce（お知らせバナー）エリア */
.local-announce {
    display: block; 
    clear: both; 
    width: 100%;
    margin: 10px auto 10px auto;
}

/* ナビゲーションボタン (背景画像対応: サイズを可変にする) */
div#navigation ul {
    display: flex;
    justify-content: center;
    width: 100%;
    clear: both;
}

div#navigation ul li {
    width: 33.333%; 
    height: 0; 
    padding-bottom: 9%; 
    float: none;
    position: relative;
    display: block;
    margin: 0;
}

div#navigation ul li a {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center center;
}


/****************************************
 * 3. フッターの修正
 ****************************************/
/* 1. フッター全体の親要素を画面幅100%にする */
div#footer {
	width: 100% !important;
	max-width: 100% !important; /* コンテナの制限を無視して広げる */
	margin: 0;
	padding: 0;
	clear: both;
	display: block;
}

/* 2. 中身（モチーフやテキスト）だけを900pxで中央に寄せる */
div#footer div#motif,
div#footer a#gotop,
div#footer div#inner {
	width: 100%;            /* スマホでは100% */
	max-width: 900px;       /* PCでは900pxに制限 */
	margin: 0 auto !important; /* これで「中央寄せ」を強制する */
	display: block;
}
/* 3. 背景画像（モチーフ等）が左に寄るのを防ぐ */
div#footer div#motif {
	background-position: center center !important;
	background-size: contain;
}
div#footer a#gotop {
	background-position: center center !important;
	background-size: contain;
}


/****************************************
 * 4. メディアクエリ (タブレット/モバイル)
 ****************************************/

/* タブレット対応: 769px ～ 1024px */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    
    /* ヘッダーの重ね合わせ位置を調整 */
    div#header {
        width: calc(100% - 80px) !important; 
        left: 40px !important; 
    }

    /* 1. 全体コンテナの余白調整 */
    div#container {
        padding: 0 40px; 
    }

    /* 2. 2カラムレイアウトの幅調整 */
    div#contents {
        margin: 10px 0 0 20px; 
        width: auto;
        flex-grow: 1;
    }
    
    /* 左右のナビゲーション（サイドバー）の調整 */
    div#sub-navigation,
    div#standing-navigation {
        width: 130px; 
    }
    
    /* 3. メインナビゲーションボタンの調整 */
    div#navigation ul li {
        padding-bottom: 12%; 
    }
    
    /* フッターのトップへ戻るボタンの調整 */
    div#footer a#gotop {
	padding-top: 7%; 
    }
}


/* モバイル対応: 768px以下 */
@media screen and (max-width: 768px) {
    
    /* ============ サイト全体 ============ */
    
    div#container {
    	padding: 0 !important;
    }
    
    /* 1. ヘッダーを通常のフローに戻す */
    div#header {
        position: relative !important;
        width: 100% !important;
        left: auto !important;
        margin: 10px auto 0 auto !important;
        padding: 0 15px !important; 
    }

    /* 2カラムレイアウトを1カラムに */
    div#main {
        flex-direction: column;
    }
    
    /* 1. サイドメニューを横並びにする */
    div#sub-navigation,
    div#standing-navigation {
        display: block !important; /* 非表示設定を解除 */
        width: 100% !important;
        padding: 0 10px !important;
        margin: 10px 0 !important;
        box-sizing: border-box !important;
    }

    /* 2. リストを横並び（2列）のタイル状にする */
    div#sub-navigation ul.navigation,
    div#standing-navigation ul {
    	width: 100%;
        display: flex !important;
        flex-wrap: wrap !important; /* 折り返しを許可 */
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    div#sub-navigation ul.navigation li,
    div#standing-navigation ul li{
        width: 50% !important; /* 2列にする */
        padding: 5px;
    }


    div#contents {
        width: 100%; 
        margin: 0; 
        padding: 20px 15px;
    }

    /* ============ ナビゲーション ============ */
    
    /* ナビゲーションボタンを縦積みに変更 (1列) */
    div#navigation ul {
        flex-direction: row;
        flex-wrap: wrap;
        padding: 0 5px;
    }
    div#navigation ul li {
        width: 50%; 
        padding-bottom: 20%; 
        margin: 0;
        border: 2px solid #fff;
        box-sizing: border-box;
    }
    
    /* フッターのトップへ戻るボタンの調整 */
    div#footer a#gotop {
    	background: none;
    }
    
    /* ============ コンテンツ内要素 (固定幅解除の強化) ============ */

    /* ?? H3 の固定幅解除を強化 */
    h3 {
        width: 100% !important; 
        padding: 10px 10px 8px 20px;
        box-sizing: border-box;
        margin-bottom: 20px;
    }
    
    /* ?? ul.newsreleases の固定幅解除を強化 */
    ul.newsreleases {
        width: 100% !important; 
        padding: 0 10px;
        margin: 0 auto;
    }

    /* ニュースリリースリストの配置を縦積みに */
    ul.newsreleases li {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
    }
    ul.newsreleases li .date, ul.newsreleases li .category {
        width: auto; float: none !important; order: 1; margin-right: 10px;
    }
    ul.newsreleases li .category {
        order: 2;
    }
    ul.newsreleases li .title {
        width: 100%; height: auto; overflow: visible; float: none !important; order: 3; margin-top: 5px;
    }
    
    /* その他のコンテンツ要素の調整 */
    h4, div.entry-content {
        width: 100% !important;
        box-sizing: border-box;
        padding: 0 20px 0 0;
    }
    h4{
    	padding: 5px 20px 5px 10px;
    }

    /* テーブルスクロール用ラッパーの設定 */
    .table-wrapper {
        width: 100%;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        margin: 1em 0;
        padding-bottom: 5px;
    }
    
    /* ... (その他のコンテンツ内要素の修正は維持) ... */
    
    /* 画像とフローティング要素の調整 */
    div.entry-content img, .wp-caption img, .table-wrapper table img { max-width: 100% !important; height: auto !important; }
    .wp-caption { width: 100% !important; margin: 10px 0 !important; box-sizing: border-box; }
    .alignleft, .alignright { float: none !important; display: block; margin: 10px auto; }
    
    .table-wrapper table { width: auto; min-width: 100%; white-space: nowrap; }
    .table-wrapper table td { white-space: normal !important; word-break: break-word; }
}

/* 1. 画面外へのはみ出しを物理的に禁止する */
html, body {
	overflow-x: hidden;
	width: 100%;
	margin: 0;
	padding: 0;
	position: relative;
}
/* 2. 全ての要素の幅計算を「枠内」に収める */
*, *::before, *::after {
	box-sizing: border-box !important;
}
/* 3. 画像やメディアが親要素を突き破らないようにする */
img, video, iframe {
	max-width: 100% !important;
	height: auto !important;
}