/*
Theme Name: レクスト豊各院
Theme URI:
Author: ideacloud.co.jp
Author URI: https://ideacloud.co.jp
Description: レクスト豊各院用のワードプレステーマです。WP REST APIを使用したヘッドレス構成を前提としています。
Requires PHP: 8.0
Version: 0.0.0
Text Domain: houkakuin
*/

:root{
    --color-loading-bg: #F2F2F2;
    --color-primary-green: #3E7D2B;
}

/* ==============================================
ブロックエディタの見た目も合わせるためデフォルトの設定を削除
============================================== */
.editor-styles-wrapper :where(:not(.is-layout-flex,.is-layout-grid))>.wp-block{
    margin: 0;
    padding: 0;
}
.editor-styles-wrapper li div{
    display: inline-block;
}

.event-content h2,
.editor-styles-wrapper h2{
    font-size: 35px;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: 0.05rem;
    border-bottom: 1px solid black;
    margin-bottom: 12px;
}

.event-content h3,
.editor-styles-wrapper h3{
    font-size: 32px;
    font-weight: bold;
    line-height: 1.4;
    letter-spacing: 0.05rem;
}

.event-content h4,
.editor-styles-wrapper h4{
    font-size: 28px;
    font-weight: bold;
    line-height: 1.4;
    letter-spacing: 0.05rem;
}
.event-content h4::before,
.editor-styles-wrapper h4::before{
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 24px;
    background-color: var(--color-primary-green);
    border-radius: 100%;
}

.event-content p,
.editor-styles-wrapper p{
    font-size: 18px !important;
    line-height: 1.8;
}
.event-content p a,
.editor-styles-wrapper p a{
    color: var(--color-primary-green);
    font-weight: 500;
    border-bottom: 1px solid var(--color-primary-green);
}

.event-content ul,
.editor-styles-wrapper ul,
.event-content ol,
.editor-styles-wrapper ol{
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.event-content ol,
.editor-styles-wrapper ol{
    counter-reset: list-counter;
}
.event-content li,
.editor-styles-wrapper li{
    display: inline-block;
    font-size: 18px;
    line-height: 1.8;
    letter-spacing: 0.05rem;
}
.event-content ul li::before,
.editor-styles-wrapper ul li::before{
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    background-color: var(--color-primary-green);
    border-radius: 100%;
}
.event-content ol li::before,
.editor-styles-wrapper ol li::before{
    content: counter(list-counter) ".";
    counter-increment: list-counter;
    display: inline-block;
    margin-right: 8px;
    font-size: 18px;
    line-height: 1.8;
    letter-spacing: 0.05rem;
}

.event-content > *,
.editor-styles-wrapper :where(:not(.is-layout-flex,.is-layout-grid)) > .wp-block + *:not(li){
    margin-top: 40px;
}

@media screen and (max-width: 767px) {
    .event-content h2,
    .editor-styles-wrapper h2{
        font-size: 25px;
    }

    .event-content h3,
    .editor-styles-wrapper h3{
        font-size: 22px;
    }

    .event-content h4,
    .editor-styles-wrapper h4{
        font-size: 20px;
    }
    .event-content h4::before,
    .editor-styles-wrapper h4::before{
        margin-right: 12px;
    }

    .event-content p,
    .editor-styles-wrapper p{
        font-size: 16px !important;
    }

    .event-content ul,
    .editor-styles-wrapper ul,
    .event-content ol,
    .editor-styles-wrapper ol{
        gap: 8px;
    }

    .event-content li,
    .editor-styles-wrapper li{
        font-size: 16px;
    }
}

#loading {
    display: none;
    pointer-events: none;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--color-loading-bg);
    z-index: 100;
}
.home #loading {
    display: flex;
    pointer-events: all;
    opacity: 1;
    overflow-y: hidden;
    transition: all .5s 2s ease-in-out;
}
.home #loading.finished {
    opacity: 0;
    pointer-events: none;
}