/* ------------------------------------------------------------------
   レスポンシブ対応 (旧デザインの見た目を保ったまま、狭い画面に追従させる)
   旧CSS: #container 760px 固定 / #alpha 520px + #beta 220px の右2カラム
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   文字サイズ: 旧CSSは body 62.5% (=10px) を基準に em で拡大していた。
   ブラウザ既定 (100% = 通常16px) を基準に戻し、各要素の倍率を再調整する。
   ------------------------------------------------------------------ */
body {
    font-size: 100%;
    line-height: 1.7;
}

/* 本文・サイドバーは基準サイズそのまま (旧: 1.2em / 1.1em で 10px 基準を拡大していた分を打ち消す) */
.entry,
.module,
#comments,
.trackbacks {
    font-size: 1em;
}

/* 見出し: 上下に余白を取り、下線で本文と区切って目立たせる */
.entry-header,
#archive-title,
h3 {
    font-size: 1.5em;
    line-height: 1.5;
    margin: 0 20px 0.9em 20px;   /* 左右 20px は旧CSSと同じ (本文 .entry-content の padding と揃える) */
    padding: 0.5em 0 0.35em 0;
    border-bottom: 1px solid #e0c4cc;
}

/* 2件目以降の記事は、前の記事との間隔も広げる */
.entry + .entry {
    margin-top: 2.5em;
}

.module h2 {
    font-size: 1.35em;
}

/* 旧記事本文に埋め込まれた固定サイズ指定 (style="font-size:10pt" 等) は無効化し、基準サイズに揃える */
.entry-body [style*="font-size"],
.entry-body font {
    font-size: inherit !important;
}

/* 記事フッタ (旧CSSは 0em で非表示同然だった) */
.entry-footer {
    font-size: 0.85em;
}

/* バナー見出し (旧: 1.9em × a 1.4em = 約27px 相当。16px 基準で同程度に収める) */
#banner h1 {
    font-size: 2.2em;
    line-height: 1.4;
}
#banner h1 a:link,
#banner h1 a:visited {
    font-size: 1em;
}
#banner h2 {
    font-size: 0.95em;
}

/* 基本: 固定幅を上限に変え、画面幅に追従させる */
#container {
    width: auto !important;
    max-width: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 本文領域は画面幅に追従させ、左右に余白を取る (固定幅は使わない) */
#pagebody-inner {
    padding: 0 5vw;
    box-sizing: border-box;
}

/* バナー: 外側は旧デザインの帯色 #990033、写真 (#banner-image) は本文と同じ幅 (左右 5vw の余白) に揃える */
#banner {
    background: #990033 !important;
    height: auto !important;
    padding: 0 5vw;
    box-sizing: border-box;
}
#banner-image {
    height: 220px;
    background-color: #990033;
    background-image: url(baroquedance_header2.jpg);
    background-repeat: no-repeat;
    background-position: center 35%;
    background-size: cover;
}

/* 旧画像に焼き込まれていた半透明の白パネルを CSS で再現する (画像側は復元して除去済み)。
   文字と一緒に動くので、画面幅が変わっても見出しがパネルから外れない */
#banner-inner {
    display: inline-block;
    margin: 28px 0 0 28px;
    padding: 18px 24px 18px 0;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 6px;
    min-width: 300px;
    max-width: 60%;
    box-sizing: border-box;
}
#banner h1 {
    padding-top: 0;
}

/* バナー内の文字は左余白を画面幅に合わせる */
#banner h1,
#banner h2 {
    padding-left: 24px;
}

#container-inner,
#pagebody,
#pagebody-inner,
#banner,
#banner-inner {
    max-width: 100%;
    box-sizing: border-box;
}

/* 画像・動画・表がはみ出さないようにする */
img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

table {
    max-width: 100%;
}

/* 横に長いコンテンツは領域内でスクロールさせ、ページ自体は横スクロールさせない */
.entry-body,
.entry-more {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.entry-body table {
    display: block;
    overflow-x: auto;
}

/* カラム幅を割合指定にする (760px 時の比率を維持) */
@media screen and (min-width: 801px) {
    .layout-two-column-right #alpha {
        width: calc(100% - 300px);
    }
    .layout-two-column-right #beta {
        width: 260px;
    }
}

/* タブレット・スマートフォン: 2カラムを解除して縦積みにする */
@media screen and (max-width: 800px) {
    body {
        margin: 0;
        padding: 0;
    }

    /* #container は白背景のため左右パディングを付けるとバナー脇に白が出る。
       パディングは本文側 (#pagebody-inner) に移し、バナーは画面幅いっぱいに敷く */
    #pagebody-inner {
        padding: 0 12px;
    }

    /* パネルは左右いっぱい (両サイドの余白は #banner-image の 16px で固定)、内側は上下左右 16px */
    #banner-inner {
        display: block;
        margin: 0;
        max-width: none;
        min-width: 0;
        padding: 16px;
    }
    #banner h1,
    #banner h2 {
        padding-left: 0;
    }
    #banner h2 {
        max-width: none;
    }

    /* 狭い画面では写真を画面幅いっぱいに敷く (えんじ色の余白は出さない) */
    #banner {
        padding: 0;
    }
    /* 写真は高さ固定をやめ、パネルを上下左右 16px の等しい余白で包む */
    #banner-image {
        height: auto;
        padding: 16px;
        box-sizing: border-box;
        background-position: left center;
    }

    .layout-two-column-right #alpha,
    .layout-two-column-right #beta,
    .layout-two-column-left #alpha,
    .layout-two-column-left #beta,
    #alpha,
    #beta {
        float: none !important;
        width: auto !important;
        margin-left: 0;
        margin-right: 0;
    }

    #alpha-inner,
    #beta-inner {
        width: auto !important;
        padding-left: 0;
        padding-right: 0;
    }

    /* サイドバーは本文の下へ。区切りを入れて境目を分かりやすくする */
    #beta {
        margin-top: 24px;
        padding-top: 16px;
        border-top: 1px solid #ccc;
    }

    /* 旧CSSに残る固定幅を解除する */
    #banner-header,
    .module,
    .module-content,
    .entry,
    .entry-content,
    .entry-body {
        width: auto !important;
        max-width: 100%;
    }

    /* バナー説明文は旧デザインの 310px 幅を上限に、狭い画面では縮める */
    #banner-description {
        width: auto !important;
        max-width: 310px;
    }

    /* 本文が詰まって見えないように行間を少し広げる */
    .entry-body {
        line-height: 1.7;
    }
}

/* スマートフォン */
@media screen and (max-width: 480px) {
    /* ハンバーガー分 (右 72px) を差し引いても「バロックダンス情報」が1行に収まるサイズ */
    #banner h1 {
        font-size: 1.5em;
        line-height: 1.3;
    }

    #banner h2 {
        font-size: 0.9em;
        line-height: 1.4;
    }

    .entry-header,
    h3.entry-header {
        font-size: 1.3em;
        line-height: 1.4;
    }

    /* 指で押しやすいリンク間隔にする */
    #beta .module-list li,
    .module-list li {
        padding: 6px 0;
    }

    /* 回り込み画像 (旧記事の float:left 指定) は狭い画面では解除し、本文を読みやすくする */
    .entry-body img[style*="float"],
    .entry-body img[align="left"],
    .entry-body img[align="right"] {
        float: none !important;
        display: block;
        margin: 0 auto 12px !important;
    }
}

/* ------------------------------------------------------------------
   スマホ用ハンバーガーメニュー (800px 以下)
   - ボタン: 見出しパネルの右側・上下中央に、白い丸を下地にして配置
   - タップでヘッダー (バナー) の下にメニューを表示、文字は右寄せ
   - ナビゲーション (メニュー Menu) のみ移動。更新情報・著作権表記は本文の下に残す
   ------------------------------------------------------------------ */
#nav-toggle,
#mobile-nav {
    display: none;
}

@media screen and (max-width: 800px) {
    #banner-image {
        position: relative;
    }

    /* パネルの右側にボタン分の余白を確保する */
    #banner-inner {
        margin-right: 76px !important;
    }

    /* ボタン: 白い丸 (48px) を下地にした 3 本線アイコン。パネルの右側・上下中央 */
    #nav-toggle {
        display: block;
        position: absolute;
        top: 50%;
        right: 16px;
        transform: translateY(-50%);
        z-index: 20;
        width: 48px;
        height: 48px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
        cursor: pointer;
        line-height: 0;
    }
    #nav-toggle svg {
        display: block;
        margin: 0 auto;
    }
    #nav-toggle .icon-close { display: none; }
    body.nav-open #nav-toggle .icon-open { display: none; }
    body.nav-open #nav-toggle .icon-close { display: block; }

    /* ナビ本体: ヘッダー (バナー) の下に表示、文字は右寄せ */
    #mobile-nav {
        display: block;
        background: #fff;
        border-bottom: 3px solid #990033;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        text-align: right;
    }
    #mobile-nav[hidden] {
        display: none;
    }
    #mobile-nav .module-list {
        list-style: none;
        margin: 0;
        padding: 6px 0;
    }
    #mobile-nav .module-list-item {
        margin: 0;
        padding: 0;
        background: none;
        border-bottom: 1px solid #eee;
        text-align: right;
    }
    #mobile-nav .module-list-item a {
        display: block;
        padding: 12px 20px;
        font-size: 1.05em;
        text-decoration: none;
        text-align: right;
    }
    #mobile-nav .mobile-nav-contact {
        border-bottom: 0;
        background: #faf3f5;
    }
    #mobile-nav .mobile-nav-contact a {
        color: #990033;
    }

    /* JS 無効時はボタンを出さず、メニューを常時展開する */
    html:not(.js) #nav-toggle { display: none; }
    html:not(.js) #mobile-nav[hidden] { display: block; }

    /* サイドバーの「メニュー Menu」はハンバーガーに移したので非表示。更新情報・著作権表記は残す */
    #beta .module-categories {
        display: none;
    }
}

/* ------------------------------------------------------------------
   WordPress の body class との衝突回避
   旧 base-weblog.css の `.archive { overflow: hidden }` は MT の記事一覧 div 向けだが、
   WordPress はアーカイブページの <body> に class="archive" を付けるため、
   ページ全体がスクロール不能になっていた (スマホで顕在化)。
   ------------------------------------------------------------------ */
body.archive {
    overflow: visible;
}

/* ------------------------------------------------------------------
   ページ先頭へ戻るボタン (800px 以下のみ)
   白い丸の座布団にえんじ色の上矢印。400px 以上スクロールしたら右下にふわっと表示。
   ------------------------------------------------------------------ */
#to-top {
    display: none;
}

@media screen and (max-width: 800px) {
    #to-top {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom));
        z-index: 30;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
        opacity: 0;
        transform: translateY(8px);
        transition: opacity 0.25s ease, transform 0.25s ease;
        -webkit-tap-highlight-color: transparent;
    }
    #to-top[hidden] {
        display: none;
    }
    #to-top.is-visible {
        opacity: 0.92;
        transform: translateY(0);
    }
    #to-top:active {
        opacity: 1;
        transform: scale(0.96);
    }
    #to-top svg {
        display: block;
    }
}