/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: May 27 2026 | 00:57:14 */
/* スマホ環境（画面幅600px未満）の時だけ適用 */
@media (max-width: 599px) {
    
    /* 1. 親カラム：縦横ともに中央を基準にし、1枚目を画面のど真ん中に強制配置 */
    div.wp-block-columns.sp-scroll-column.is-layout-flex,
    div.wp-block-columns.sp-scroll-column[class*="wp-container-"] {
        display: flex !important;
        flex-direction: row !important; 
        flex-wrap: nowrap !important;   
        justify-content: flex-start !important; 
        
        /* ★親の段階で縦方向（上下）を中央揃えに強制 */
        align-items: center !important; 
        
        overflow-x: auto !important;    
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch; 
        gap: 16px !important; 
        padding-top: 12px !important; /* 上下の余白を均等に */
        padding-bottom: 12px !important;
        
        /* 画面（ビューポート）の真ん中に1枚目を合わせる計算 */
        padding-left: calc(50vw - 80px - 15px) !important; 
        padding-right: calc(50vw - 80px - 15px) !important;
        
        margin-left: -15px !important;  
        margin-right: -15px !important;
        width: calc(100% + 30px) !important;
    }

    /* 2. 中のバナー（子カラム）：高さを自動（中身依存）にし、縦中央へ強制配置 */
    div.wp-block-columns.sp-scroll-column.is-layout-flex > .wp-block-column,
    div.wp-block-columns.sp-scroll-column[class*="wp-container-"] > .wp-block-column {
        flex: 0 0 160px !important;     
        min-width: 160px !important;    
        max-width: 160px !important;    
        width: 160px !important;        
        
        /* ★重要：WordPressの「引き伸ばし仕様」を破壊して高さを自動にする */
        height: auto !important;
        
        /* ★重要：縦方向（上下）の配置を単体でも中央に強制する */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-self: center !important; 
        
        margin: 0 !important; 
    }

    /* 3. 画像：子カラムのど真ん中に配置 */
    div.wp-block-columns.sp-scroll-column img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-width: none !important;
        margin: 0 auto !important; /* 左右中央 */
    }
}

