/*
Theme Name: Leina Modern Framework - V4
Description: main/sub幅をモダンなサイズ(800+350)に拡張し、上部追従メニュー(Sticky)を実装したテーマ。
Version: 1.4.0
Author: Reina
Text Domain: leina-modern
*/

/* ベース変数とリセット */
:root {
    /* モダンなデスクトップ向けに幅を拡張 */
    --main-width: 800px; /* 旧700pxから拡張 */
    --sub-width: 350px;  /* 旧300pxから拡張 */
    
    --border-color: #ddd;
    --bg-white-alpha: rgba(255, 255, 255, 0.8);
    
    /* 高さとレイアウトの変数 */
    --single-line-height: 50px; /* タイトル・メニューの1行の高さ */
    --header-image-height: 400px; /* イメージ空白部の高い幅 */
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    position: relative;
    min-height: 100vh;
}

/* 全体背景画像の設定 (アルファ値 60%) */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* themes/leina-modern/images/background-image.webp を参照 */
    background: url('images/background-image.webp') no-repeat top center;
    
    /* 修正ポイント: 横幅を100%に固定し、高さは自動(比率維持)にする */
    background-size: 100% auto;
    
    /* アルファ値 60% */
    opacity: 0.6;
    z-index: -1;
}

/* 描画エリア100%のグリッド定義 (ad | main | sub | ad) */
.site-wrapper {
    display: grid;
    grid-template-columns: 1fr var(--main-width) var(--sub-width) 1fr;
    width: 100%;
}

/* =========================================
   ヘッダー・メニュー帯 (横幅100%・内部幅main+sub)
   ========================================= */
.site-header {
    grid-column: 1 / -1; 
    display: grid;
    grid-template-columns: inherit; 
}

/* 共通の帯(横幅100%)と内部コンテナ(main+sub)の定義 */
.header-band,
.menu-band {
    grid-column: 1 / -1; /* 横幅100% */
    display: grid;
    grid-template-columns: inherit; /* カラム幅を継承 */
}
.header-inner {
    grid-column: 2 / 4; /* 内部幅はmain(2) + sub(3)に合わせる */
    width: 100%;
}

/* 1. タイトル部分 */
.title-band {
    height: var(--single-line-height);
    background: transparent;
}
.title-band .header-inner {
    display: flex;
    align-items: center;
    height: 100%;
}

/* 2. イメージ空白部 (ヘッダー画像) */
.image-band {
    height: var(--header-image-height);
    background-size: cover;
    background-position: center;
    background-color: rgba(0,0,0,0.1);
}
.image-band .header-inner {
    display: flex;
    justify-content: flex-start; /* 左詰め */
    align-items: flex-start; /* 上寄せ */
    height: 100%;
    padding: 20px 0;
}

/* 3. メガメニューと検索部分 (スクロール追従設定) */
.menu-band {
    height: var(--single-line-height);
    background: #333;
    color: #fff;
    /* スクロール追従(Sticky)の要となる設定 */
    position: sticky;
    top: 0;
    z-index: 100; /* 他のコンテンツより手前に表示 */
}
.menu-band .header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

/* メニューリストのスタイル */
.menu-band ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
}
.menu-band a {
    color: #fff;
    text-decoration: none;
    padding: 0 15px;
    line-height: var(--single-line-height);
    display: block;
    transition: background 0.3s;
}
.menu-band a:hover {
    background: #555; /* ホバー時の視覚フィードバック */
}

/* =========================================
   メイン・サブ・広告エリア
   ========================================= */
.main-content {
    grid-column: 2;
    background: var(--bg-white-alpha);
    border-left: 1px solid var(--border-color);
    padding: 30px; /* 幅が広がったので余白も少し拡大 */
    min-height: 800px;
}

.sidebar-sub {
    grid-column: 3;
    background: var(--bg-white-alpha);
    border-right: 1px solid var(--border-color);
    padding: 30px;
}

.ad-area {
    padding: 20px;
}