@charset "utf-8";
/*
Template: jstork19
Theme Name: stork19_custom
Theme URI:http://open-cage.com/stork19/
Version: 1.0.0
Author: opencage
Author URI: https://open-cage.com/
*/




/* --- 1. DotGothic16の適用（フォント名指定） --- */
/*
   サイト全体の文字（本文、見出しなど）にDotGothic16を適用します。
   BestTen-CRTを削除したため、ここにはDotGothic16のみを指定します。
*/
body, h1, h2, h3, h4, p {
    font-family: 'DotGothic16', sans-serif;
}

/* --- 2. ドットフォントの表示をきれいに保つための共通設定 --- */
body {
    /* フォントをぼやけさせず、ドットを際立たせるための設定 */
    text-rendering: optimizeSpeed; 
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: grayscale;
}

/* --- 3. PC (画面幅が1025px以上) の文字サイズ設定 --- */
@media screen and (min-width: 1025px) {
    body {
        font-size: 30px; 
    }
}

/* --- 4. タブレット (画面幅が769px〜1024px) の文字サイズ設定 --- */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    body {
        font-size: 24px; 
    }
}



/* 【子テーマ：style.css に上書き】 */
/* --- コンテナの並び方設定 (HTMLの data-direction に連動) --- */

/* 縦並びの設定 (data-direction="tate") */
[data-direction="tate"] {
    display: flex !important;           /* Flexboxを適用 */
    flex-direction: column !important;  /* 縦並びにする */
    gap: 0 !important;                  /* 子要素間の隙間をゼロにする */
    
    /* 縦並びの場合、横方向（左右）の中央寄せを行う */
    align-items: center !important;     /* 子要素（ルーレット）を中央に揃える */
    
    /* コンテナ全体を記事の中央に配置する */
    width: fit-content !important;      /* 幅をコンテンツ（画像）の幅に合わせる */
    margin: 0 auto !important;          /* ★コンテナ自体を中央に配置★ */
}

/* 縦並びの個々のルーレット画像の設定 */
[data-direction="tate"] [data-gimmick-type="roulette"] {
    margin-bottom: 0 !important; 
    
    /* Flexboxの子要素が親要素に合わせて拡大・縮小するのを防ぎ、元のサイズを維持 */
    flex-shrink: 0 !important; 
    
    /* 画像サイズは「auto」で元のサイズを維持する */
    width: auto !important;
    height: auto !important; 
}

/* 横並びの設定 (data-direction="yoko") */
[data-direction="yoko"] {
    display: flex !important; 
    gap: 0 !important;        
    
    /* 横並びの場合、子要素を横方向（左右）の中央寄せにする */
    justify-content: center !important; 
    
    /* コンテナ全体を記事の中央に配置する */
    width: fit-content !important; 
    margin: 0 auto !important;          /* ★コンテナ自体を中央に配置★ */
    margin-bottom: 0 !important;
}

/* --- 個々のルーレット画像の設定 (共通) --- */
[data-gimmick-type="roulette"] {
    cursor: pointer !important; /* クリック可能であることを示す */
    border: none !important;    /* 枠線を削除 */
    box-sizing: border-box !important;
    
    /* 画像の下にできる意図しない隙間を削除 */
    vertical-align: top !important; 
}

/* ギミッククリア時のCSS (.roulette-cleared) は、ここでは省略 */