/* shonankyo.css */
/* 独自作成クラスはエディターの同名ブロックの 追加CSSクラス で指定しています */
/* プラグインが PCファーストのコードのため遵守 */

/* 共通設定 */
    body{
        color:#828282;
        font-size: var(--wp--preset--font-size--medium) ;   /* デフォルトの large 設定を medium に上書き */  
        text-align: justify;      
    }
    body a{
        color: #1ca594;
    }
    body a:visited{
        color: revert;
    }

    strong {
        font-weight: 600;
    }

    /* 大見出し */
    h2{
        border-radius: 15px;
        background: linear-gradient(147deg,rgb(81,148,15) 1%,rgba(81,148,15,0.81) 100%);
        margin-top:1%;
        margin-bottom:1%;
        padding: 1.5% 3% 1.5% 3%;

        font-style: normal;
        font-weight: 600;
        font-size: var(--wp--preset--font-size--large) !important;
        color: var(--wp--preset--color--base) !important;
    }

    /* 中見出し */
    h3{
        border-radius: 15px;
        border: 2px solid rgb(81, 148, 15);
        background: #f9f9f9;
        margin-top:1%;
        margin-bottom:1%;
        padding: 1.5% 3% 1.5% 3%;

        font-style: normal;
        font-weight: 600;
        font-size: var(--wp--preset--font-size--large) !important;
    }

    /* デフォルトの余白設定の上書き */
        :root :where(.is-layout-flex) {
            gap: 0.5rem;
        }
        .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){
            max-width: none;
            margin-left:auto;
            margin-right: auto;
        }
        :where(.wp-block-columns) {
            margin-bottom: 0.5em;
        }

        .has-global-padding {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

    /* テーブル */
    tr{
        background-color: #f9f9f9;
    }
    /* 縞設定 */
    tr:nth-child(2n+1){   
        background-color: #fff8dc;
    }

    /* スクロールボックス */
        .scroll-box{
            max-height: 250px; /* 高さを制限 */
            overflow-y: auto; /* 縦スクロールを追加 */
            /*border: 2px solid #ccc;  枠線を追加 */
            padding: 10px; /* 内側の余白 */
            background-color: #f9f9f9; /* 背景色 */
        }

    /* 詳細ブロック */
        summary{
            color: #264f0e;
        }

/* メインコンテンツ */
    .main-contents{
        display: flex;
        justify-content: center;

        color: #828282;

        margin-block-start: 0;
        padding-block-start: 1.2rem;
    }
    /* コンテンツ幅 通常版 */
    .main-contents-inner-nomal{
        width: 80%;
        max-width: 800px;
        margin: 2% 5% 2% 15% !important;
    }
    /* コンテンツ幅 幅広版 */
    .main-contents-inner-width{
        width: 100%;
        max-width: 1080px;
        margin: 2% 0 2% 0 !important;
    }

    /* SP版設定 */
    @media only screen and (max-width: 768px) {
        .main-contents{
            display: flex;  /* 重複だが、明示のため記載 */
            justify-content: center;
            flex-direction: column-reverse; /* ワイド版 サイドバーコンテンツを後半に表示する */
        }
        /* コンテンツ幅 通常版 */
        .main-contents-inner-nomal{
            width: 100%;
            max-width:fit-content;
            margin: 2% 0% 2% 0% !important;
        }
        /* コンテンツ幅 幅広版 */
        .main-contents-inner-width{
            width: 100%;
            /* max-width:fit-content; */
            margin: 2% 0% 2% 0% !important;
            display: flex;  /* 重複だが、明示のため記載 */
            flex-direction: column-reverse;     /* サイドバーコンテンツを後半に表示する */
        }
    }

    /* メインコンテンツ背景画像 */
    .main-contents-background{
        /* デフォルトの余白設定を上書き */
        margin-block-start: 0;
        padding-block-start: 1.2rem;
    }

    /* 両サイドのみに背景を表示するようオーバーレイを配置 */
    .main-contents-background::before {
        /* デフォルトの上書き */
        background-color: unset !important;
        opacity: 1;

        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, rgba(240, 240, 240, 0) 0%, rgba(240, 240, 240, 1) 15%, rgba(240, 240, 240, 1) 95%, rgba(240, 240, 240, 0) 100%); /* 右寄りにオーバーレイかける */
        z-index: 1;
    }
    /* SP版 */
    @media only screen and (max-width: 768px) {
        .main-contents-background::before {
            background: linear-gradient(to right, rgba(240, 240, 240, 0) 0%, rgba(240, 240, 240, 1) 5%, rgba(240, 240, 240, 1) 95%, rgba(240, 240, 240, 0) 100%);   /* 中央寄りに変更 */
        }
    }