/*
Theme Name: SWELL CHILD
Theme URI: https://swell-theme.com/
Description: SWELL Child Theme
Author: LOOS,Inc.
Template: swell
Version: 1.0.0
*/

/* ==================================================
   1. 基本設定・不要パーツの非表示
================================================== */
body {
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

/* 非表示にする要素をまとめて指定 */
body #breadcrumb,
body #body_wrap.single .p-articleHead,
body #body_wrap.single .p-articleMetas.-top,
body .c-pageTitle__subTitle,
body .c-pageTitle__sub,
body .c-pageTitle::after {
    display: none !important;
}

/* ==================================================
   2. アーカイブ・一覧ページ上部のタイトル
================================================== */
body .c-pageTitle {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 60px;
    border-bottom: none;
    padding-bottom: 0;
}

body #body_wrap .c-pageTitle,
body #body_wrap .c-pageTitle__ttl {
    font-size: 24pt;
}

/* ==================================================
   3. Contact Form 7 のレイアウト
================================================== */
.post_content .wpcf7 {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

.post_content .wpcf7 input[type="text"],
.post_content .wpcf7 input[type="email"],
.post_content .wpcf7 textarea {
    width: 100%;
    box-sizing: border-box;
}

.post_content .wpcf7 input[type="submit"] {
    display: block;
    margin: 2em auto 0;
    min-width: 200px;
}

/* ==================================================
   4. フッターの中央揃え（スマホ・PC共通）
================================================== */
body #footer .l-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

body #footer .c-iconList {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    width: 100%;
}

body #footer .copyright {
    text-align: center;
    width: 100%;
}

/* ==================================================
   5. PCレイアウト (960px以上) - サイドバー固定とメイン領域
================================================== */
@media screen and (min-width: 960px) {

    /* PC版：上部ヘッダーを非表示にし、本体の上の余白も消す */
    body #header {
        display: none !important;
    }
    body #body_wrap {
        padding-top: 0 !important;
    }

    /* 全体コンテナ */
    body .l-content.l-container {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        display: flex;
        overflow: visible;
    }

    /* サイドバー (左側固定) */
    body #sidebar {
        width: 260px;
        min-width: 260px;
        height: 100vh;
        position: sticky;
        top: 0;
        order: -1;
        z-index: 1000;
        background-color: #fdfdfd;
        border-right: 1px solid #eee;
        border-left: none;
        box-sizing: border-box;
        padding: 0 20px;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }

    /* サイドバーウィジェットエリア */
    body #fix_sidebar {
        display: flex;
        flex-direction: column;
        min-height: 100%;
        flex-grow: 1;
        width: 100%;
        margin: 0;
        padding-bottom: 20px;
    }

    body #fix_sidebar > .c-widget {
        margin-bottom: 20px;
    }

    body #block-4 {
        display: block;
        margin-bottom: 0;
    }

    body #fix_sidebar .widget_custom_html:last-child {
        margin-top: auto;
        margin-bottom: 0;
    }

    /* メインコンテンツ */
    body #main_content {
        flex: 1;
        width: auto;
        max-width: none;
        margin: 0;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    /* TOPページ専用の全幅化 */
    body #body_wrap.home #main_content {
        padding: 0;
    }
    body #body_wrap.home .l-mainContent__inner {
        max-width: none;
        width: 100%;
        padding: 0;
    }

    /* 記事ページ等 (TOP以外) の余白 */
    body #body_wrap:not(.home) #main_content {
        padding: 10px 5%;
    }
    body #body_wrap:not(.home) .l-mainContent__inner {
        max-width: 900px;
        width: 100%;
        margin: 0 auto;
    }

    /* フッターの中心をメインエリアに合わせる */
    body #footer .l-container {
        transform: translateX(130px);
    }
}



/* ==================================================
   独自クラス「full」でメインエリアいっぱいに広げる設定
================================================== */
/* ベース設定：幅を100%にして外側の余白をゼロにする */
body #main_content .full {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    border-radius: 0 !important; /* 角丸をリセット */
}

/* スマホ表示時の調整 */
@media screen and (max-width: 959px) {
    /* フルワイドブロック自体に意図しない余白がつくのを防ぐ */
    body #body_wrap.home #main_content .post_content .swell-block-fullWide {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* フルワイドブロックの「内側のコンテンツ」にはスマホ用の余白20pxを持たせる */
    body #body_wrap.home #main_content .post_content .swell-block-fullWide__inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }
}

/* クラス「nomargin」が設定されたフルワイドブロックのみ、スマホでの内側余白を無効化 */
body #body_wrap.home #main_content .post_content .swell-block-fullWide.nomargin .swell-block-fullWide__inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ==================================================
   オリジナル軽量ポップアップ用CSS
================================================== */
/* 背景の暗幕 */
.custom-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
/* ポップアップ起動時のクラス */
.custom-popup-overlay.is-active {
    opacity: 1;
    visibility: visible;
}
/* 白いウィンドウ本体 */
.custom-popup-window {
    background-color: #fff;
    width: 90%;
    max-width: 840px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 40px;
    position: relative;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    transform: translateY(20px);
    transition: transform 0.3s ease;
    margin: auto;
}
/* 閉じるボタン（×） */
.custom-popup-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
    line-height: 1;
    padding: 5px;
}
/* 中身のレイアウト（写真とテキストを横並び） */
.custom-popup-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
    align-items: center;
}
.custom-popup-img {
    flex: 0 0 150px;
}
.custom-popup-img img {
    width: 100%;
    height: auto;
}
.custom-popup-text {
    flex: 1 1 200px;
}
/* ==================================================
   ポップアップ下部の「閉じる」ボタン
================================================== */
/* ボタンを中央に寄せるためのエリア */
.custom-popup-footer {
    text-align: center;
    margin-top: 30px; /* 本文との余白 */
    padding-top: 20px;
    border-top: 1px solid #eee; /* 上に薄い線を入れて区切る（不要なら削除可） */
}

/* 閉じるボタン本体のデザイン */
.custom-popup-close-btn {
    background-color: #333; /* ボタンの背景色（黒寄り） */
    color: #fff; /* 文字色（白） */
    border: none;
    padding: 12px 50px; /* 縦・横のサイズ */
    font-size: 16px;
    border-radius: 4px; /* 角の丸み */
    cursor: pointer;
    transition: opacity 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    letter-spacing: 1px;
}

/* ホバー（タップ）時の動き */
.custom-popup-close-btn:hover {
    opacity: 0.7;
}
/* ==================================================
   ポップアップの「最前面表示（重なり順）」を修正するCSS（完全版）
================================================== */
/* 背景の暗幕自体の順位を最強にする */
.custom-popup-overlay {
    z-index: 2147483647 !important;
}

/* ポップアップが開いている時だけ、親要素の箱ごと最前面に押し上げる */
body:has(.custom-popup-overlay.is-active) #main_content,
.post_content > *:has(.custom-popup-overlay.is-active),
.wp-block-group:has(.custom-popup-overlay.is-active),
.swell-block-fullWide:has(.custom-popup-overlay.is-active),
.swell-block-columns:has(.custom-popup-overlay.is-active),
.swell-block-column:has(.custom-popup-overlay.is-active) {
    position: relative !important;
    z-index: 2147483646 !important;
}

/* ==================================================
   ポップアップ起動用「more」ボタンのデザイン
================================================== */
.custom-popup-more-btn {
    display: block;
    margin: 0 auto; /* ボタンを中央に配置 */
    width: 120px; /* ご指定の横幅 */
    background-color: #ffffff; /* 白背景 */
    color: #333333; /* 文字色（黒） */
    border: 1px solid #e5e5e5; /* 背景に溶け込まないための薄い枠線 */
    border-radius: 0; /* ★ここを0に変更して角を直角にしました */
    padding: 6px 0; /* 縦の余白 */
    font-size: 14px;
    letter-spacing: 0.05em; /* 文字間隔を少し開けて上品に */
    text-align: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05); /* 立体感を持たせる軽い影 */
    transition: all 0.3s ease;
    appearance: none;
    outline: none;
}

/* ==================================================
   マウスホバー時のエフェクト（PCのみ適用し、スマホの2回タップバグを防ぐ）
================================================== */
@media (hover: hover) {
    .custom-popup-more-btn:hover {
        background-color: #fdfdfd;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        transform: translateY(-2px);
    }
    .custom-popup-close-btn:hover {
        opacity: 0.7;
    }
}