/* =================================================================== 
 *
 *  Cassini RESET 20230811
 *
 * =================================================================== */

/* 全体のリセット */
#main *, *::before, #main *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 隠し要素の表示制御 */
#main :where([hidden]:not([hidden='until-found'])) {
    display: none !important;
}

/* ビューポート設定とカラー */
#main :where(html) {
    -webkit-text-size-adjust: 100%; /* モバイルでのテキストサイズ自動調整を無効化 */
    color-scheme: dark light;
}

/* 古いブラウザへのフォールバック */
@supports not (min-block-size: 100dvb) {
    #main :where(html) {
        block-size: 100%;
    }
}

/* デフォルトのbody設定 */
#main :where(body) {
    min-height: 100vh;
    line-height: 1.5;
    font-family: system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden; /* 横スクロールを防止 */
}

/* フォーム要素 */
#main :where(input, button, textarea, select) {
    font: inherit;
    color: inherit;
}

/* ボタンとリンクの設定 */
#main :where(button, label, select, summary, [role='button'], [role='option']) {
    cursor: pointer;
}

/* 無効化された要素のカーソル */
#main :where(:disabled) {
    cursor: not-allowed;
}

/* アンカー要素のスタイル */
#main :where(a) {
    text-underline-offset: .2ex;
}

/* リストとメディア要素の調整 */
#main :where(ul, ol) {
    list-style: none;
}

/* 画像の調整 */
#main :where(img, picture, svg) {
    max-width: 100%;
    height: auto;
}

/* 見出しや段落のスタイル */
#main :where(p, h1, h2, h3, h4, h5, h6) {
    overflow-wrap: break-word;
    line-height: 1.2;
}

/* 水平線のスタイル */
#main :where(hr) {
    border: none;
    border-top: 1px solid;
    color: inherit;
    overflow: visible;
}

/* フォーカス時のアウトライン */
#main :where(:focus-visible) {
    outline: 2px solid var(--focus-color, Highlight);
    outline-offset: 2px;
}

/* モバイル用設定 */

@media screen and (max-width: 768px) {
    #main :where(body) {
        font-size: 14px;
        line-height: 1.4;
    }
    
    #main :where(h1, h2, h3) {
        font-size: 1.2em;
        line-height: 1.3;
    }

    #main :where(p) {
        margin: 10px 0;
        font-size: 1em;
    }

    #main :where(img, video) {
        width: 100%;
        height: auto;
    }
    
}