/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Feb 22 2026 | 09:38:33 */
/*================================================
 * レスポンシブ対応（モバイルファースト＋段階的強化）
 * ベーススタイルはモバイル向けに設定し、
 * メディアクエリで大きな画面に段階的に適用
 ================================================*/

/* 高解像度モバイル（360px以下） */
@media screen and (max-width: 360px) {
    body {
        font-size: 12px;
    }
    
    #contents {
        padding: 0 5px;
    }
    
    h3 {
        font-size: 1.2rem;
    }
}

/* スマートフォン（480px以下） */
@media screen and (max-width: 480px) {
    body {
        font-size: 13px;
    }
    
    #contents {
        padding: 0 8px;
    }
    
    /* テーブルのパディング調整 */
    th,
    td {
        padding: 6px;
    }
    
    /* コラムレイアウトの積み重ね */
    .wp-block-columns {
        flex-direction: column;
    }
    
    .wp-block-column {
        flex-basis: auto !important;
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* 最初のコラム以外の上部マージン */
    .wp-block-column + .wp-block-column {
        margin-top: 1.5em;
    }
}

/* タブレット（768px以下） */
@media screen and (max-width: 768px) {
    body {
        font-size: 14px;
    }
    
    #contents {
        padding: 0 15px;
        max-width: 100%;
    }
    
    /* 見出しのサイズ調整 */
    h3 {
        font-size: 1.3rem;
    }
    
    h4 {
        font-size: 1rem;
        margin: 0 5px 0.8em 5px;
    }
    
    h5,
    h6 {
        padding: 0.5em 15px;
    }
    
    /* リストのインデント調整 */
    li {
        margin-left: 1.2em;
    }
    
    /* 埋め込みコンテンツのレスポンシブ対応 */
    iframe,
    embed,
    object,
    video {
        max-width: 100%;
        height: auto;
    }
    
    /* ギャラリーブロックの余白調整 */
    .wp-block-gallery,
    .blocks-gallery-grid {
        margin-left: 0;
        padding-left: 0;
    }
    
    /* ギャラリーアイテムの間隔調整 */
    .blocks-gallery-grid .blocks-gallery-image,
    .blocks-gallery-grid .blocks-gallery-item {
        margin: 0 0.5em 0.5em 0;
    }
    
    /* テーブルを横スクロール可能に */
    .wp-block-table {
        overflow-x: auto;
        display: block;
    }
    
    table {
        min-width: 100%;
    }
}

/* タブレット横向き〜小型デスクトップ（1024px以下） */
@media screen and (max-width: 1024px) {
    #contents {
        max-width: 95%;
    }
}

/*================================================
 * タッチデバイス向け調整
 ================================================*/
@media (hover: none) and (pointer: coarse) {
    /* タッチデバイスではホバー効果を無効化 */
    a:hover {
        opacity: 1;
    }
    
    /* タップターゲットのサイズ確保 */
    button,
    .button,
    [role="button"] {
        min-height: 44px;
        min-width: 44px;
    }
}

/*================================================
 * 印刷用スタイル
 ================================================*/
@media print {
    body {
        font-size: 12pt;
    }
    
    #contents {
        max-width: 100%;
        padding: 0;
    }
}