/*
Theme Name: Twenty Twenty-Five Child
Description: Twenty Twenty-Five Child Theme
Author: Your Name
Template: twentytwentyfive
Version: 1.0.0
*/

/* 固定ページのコンテンツ部分のスタイリング */
.page .wp-site-blocks {
    position: relative;
    max-width: 800px;
    margin: 60px auto; /* 上下60pxの余白 */
    padding: 60px 0 0; /* 上下に余白 */
}

/* 固定ページのメインコンテンツエリア */
.page .wp-site-blocks > * {
    position: relative;
    z-index: 2;
}

/* コンテンツの背景枠（疑似要素を使用） */
.page .wp-site-blocks::before {
    content: '';
    position: absolute;
    top: 0; /* 枠の開始位置をコンテナの上端に */
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% + 240px); /* 左右120pxずつの余白 */
    min-width: 500px;
    max-width: 1040px; /* 800px + 240px */
    height: 100%; /* コンテナ全体の高さに */
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.05),
        0 4px 12px rgba(0, 0, 0, 0.08),
        0 8px 20px rgba(0, 0, 0, 0.06);
    z-index: 1;
}

/* レスポンシブ対応 */
@media (max-width: 1200px) {
    .page .wp-site-blocks {
        margin: 50px auto; /* タブレット：上下50pxの余白 */
        padding: 80px 30px;
    }
    
    .page .wp-site-blocks::before {
        width: calc(100% + 160px); /* 余白を少し縮小 */
        top: 0;
        height: 100%;
    }
}

@media (max-width: 768px) {
    .page .wp-site-blocks {
        margin: 40px auto; /* モバイル：上下40pxの余白 */
        padding: 40px 20px;
        max-width: 500px;
    }
    
    .page .wp-site-blocks::before {
        width: calc(100% + 80px); /* さらに余白を縮小 */
        top: 0;
        height: 100%;
        border-radius: 8px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    }
}

@media (max-width: 480px) {
    .page .wp-site-blocks {
        margin: 30px auto; /* 小さなモバイル：上下30pxの余白 */
        padding: 20px 15px;
    }
    
    .page .wp-site-blocks::before {
        width: calc(100% + 40px);
        top: 0;
        height: 100%;
        border-radius: 6px;
    }
}

/* ページタイトルがある場合の調整 */
.page .entry-header {
    margin-bottom: 2rem;
}