@charset "utf-8";

/* -------------------------------------------------------------------------------------------

Gutenberg Editor
※親要素は.is-root-container or .wp-block-post-content + .is-layout-flow

※CSSのネストに注意。ネストの中にも.editor-styles-wrapperが勝手に付与されるため、プレーン以外のcssはネスト出来ない

------------------------------------------------------------------------------------------- */

.wp-block-post-content {

    & section:not(:last-child),
    & aside:not(:last-child) {
        margin: 78px 0;
    }

    & aside.wp-block-group+aside.wp-block-group {
        margin-top: -48px;
    }

    & h2+aside,
    & h3+aside {
        margin-top: 0 !important;
    }

}


/* 見出し
--------------------------------------------------------------- */

.wp-block-post-content {

    & h2:not(.init) {
        font-size: 26px;
        font-weight: 700;
        line-height: 1.4;
        border-bottom: 2px solid;
        padding-bottom: .5em;
        border-image: linear-gradient(to right, var(--category-color-main) 20%, #ccc 20%) 1;
        margin-bottom: 1.5em;
    }

    & h2:not(.init):not(:first-child) {
        margin-top: 3em;
    }

    & h3:not(.init):not(:first-child) {
        margin-top: 4em;
    }

    & h3:not(.init) {
        font-size: 20px;
        font-weight: 600;
        line-height: 1.4;
        padding-left: .8em;
        border-left: 4px solid var(--category-color-main);
        margin-bottom: 1.5em;
    }

    & h4:not(.init) {
        position: relative;
        font-weight: 700;
        font-size: 1.1em;
        padding-left: 1em;
        margin-bottom: .5em;

        &::before {
            content: "";
            position: absolute;
            top: .85em;
            left: 0;
            display: block;
            width: 6px;
            min-width: 0;
            aspect-ratio: 1/1;
            border-radius: 100vmax;
            background: var(--category-color-main);
        }

    }

    & h5:not(.init) {}

}



/* リスト ※カラムブロック等の選択画面にまで影響するので注意。list-style以外で装飾するとモロ影響が出る
--------------------------------------------------------------- */

/* - ul */

.wp-block-post-content {

    & ul:not(.init) {
        list-style: disc;
        padding-left: 1.5em;

        &:not(.init):not(:last-child) {
            margin: 1.3em 0
        }

        & li:not(:last-child) {
            margin-bottom: .3em;
        }

    }

    .text-link-list li {
        line-height: 1.4;

        &:not(:last-child) {
            margin-bottom: 1em;
        }
    }


    & ol:not(.init) {
        list-style-type: none;
        counter-reset: item;
        padding: 0;

        & li {
            position: relative;
            padding-left: 2.5em;
        }

        & li:not(:last-child) {
            margin-bottom: 1em;
        }

        & li::before {
            box-sizing: border-box;
            position: absolute;
            top: .2em;
            left: 0;
            counter-increment: item;
            content: counter(item);
            width: 28px;
            min-width: 0;
            aspect-ratio: 1/1;
            display: grid;
            place-content: center;
            color: #fff;
            font-size: 13px;
            font-family: "Helvetica Neue", Arial, sans-serif;
            background: #333;
            border-radius: 100vmax;
            line-height: 1;
        }

        &:not(.init):not(:last-child) {
            margin: 1.5em 0
        }

    }

}



/* テーブル
--------------------------------------------------------------- */

.wp-block-table:not(.init) {
    margin-block: 3em;
}

.wp-block-table:not(.init) td,
.wp-block-table:not(.init) th {
    font-size: .9em;
    padding: .6em 1.5em;
}

.wp-block-table:not(.init) tr td:first-child {
    font-weight: 700;
}

.wp-block-table.is-style-stripes:not(.init) tr td:first-child {
    padding-right: 0;
}

.wp-block-table:not(.init):not(:has(.has-fixed-layout)) tr td:first-child,
.wp-block-table:not(.init):not(:has(.has-fixed-layout)) tr th:first-child {
    width: 1em;
    white-space: nowrap;
}

.wp-block-table:not(.init) thead {
    background: #efefef;
}

.wp-block-table:not(.init) thead+tbody tr td:first-child {
    width: auto;
    font-weight: 500;
}

.wp-block-table.is-style-stripes {
    border-bottom: 0;
}

.wp-block-table.is-style-stripes td {
    border-bottom: 1px solid #f0f0f0;
}

.wp-block-group:has(.table-many-column) {
    margin: 3em auto;
}

.wp-block-table.table-many-column {
    font-size: .8em;

    & thead {
        background: #efefef;
    }

    & th {
        min-width: 100px;
    }

    & th,
    & td {
        text-align: center;
        vertical-align: middle;
        padding: .8em;
        line-height: 1.6;
    }

}



/* 画像
--------------------------------------------------------------- */


.wp-block-image:not(.init):not(:last-child) {
    margin-bottom: 3em;
}

.wp-block-image.init {
    &.margin {
        margin: 3em auto;
    }
}

@media screen and (min-width:1024px),
print {

    .wp-block-image:not(.init) img {
        border-radius: var(--border-radius-base);
        overflow: hidden;
    }

}

.wp-element-caption {
    color: #666;
    font-size: .86em;
    text-align: center;
    padding-inline: 1.5em;
    margin: .5em 0 0;
}




/* ギャラリー
--------------------------------------------------------------- */

.wp-block-post-content .wp-block-gallery figure.wp-block-image figcaption {}

/* - ※必要に応じて不要な設定を削除 */
/*
.wp-block-gallery.has-nested-images figcaption {
  flex-basis: auto;
  flex-grow: 0;
}
*/



/* 埋め込みコンテンツ
--------------------------------------------------------------- */

.wp-block-embed {
    margin-block: 3em;
}

.wp-block-embed.aligncenter {
    width: fit-content;
}

.wp-block-embed-twitter .wp-block-embed__wrapper {
    width: fit-content;
}

.wp-block-embed .wp-element-caption {
    color: #666;
    font-size: .86em;
    text-align: center;
    padding-inline: 1.5em;
    margin: .5em 0 0;
}

.twitter-tweet-rendered {
    min-width: 500px;
}

.wp-block-embed-youtube iframe {
    width: 100%;
    min-width: 0;
    height: auto;
    aspect-ratio: 1/.563;
}



/* ボタン
--------------------------------------------------------------- */

.wp-block-post-content .wp-block-button:not(.init) .wp-block-button__link {}

.wp-block-post-content .wp-block-button:not(.init) .wp-block-button__link::after {}

.wp-block-post-content .wp-block-button:not(.init) .wp-block-button__link[target="_blank"]:after {}

@media (hover: hover) {

    .wp-block-post-content .wp-block-button:not(.init) .wp-block-button__link:hover {}

    .wp-block-post-content .wp-block-button:not(.init) .wp-block-button__link:hover::after {}

}


/* pタグ - Gutenbergスタイル
--------------------------------------------------------------- */

.wp-block-post-content {

    & p:not(.init):not(:last-child) {
        margin-bottom: 2.5em;
    }

    & p:empty {
        margin-bottom: 2.5em;
    }

}


/* aタグ
--------------------------------------------------------------- */

.wp-block-post-content {

    & a:not([class]) {
        color: #2050DD;
        text-decoration: underline;
    }
}


/* hr
--------------------------------------------------------------- */

.wp-block-post-content hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 3em auto 2.5em;
    padding: 0;
}


/* タイポグラフィ
--------------------------------------------------------------- */

.wp-block-post-content {

    & em {
        font-style: italic;
    }

}

.aligncenter {
    margin-inline: auto;
}


/* エディターツール
--------------------------------------------------------------- */

code {
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .9em;
    padding: .3em .4em;
    margin: 0 .1em;
    background-color: #e7edf3;
    border-radius: 3px;
    border: solid 1px #d6dde4;
    line-height: 1;
}

.wp-block-post-content {

    .hcb_wrap.hcb_wrap,
    .cp_embed_wrapper {
        margin-block: 2em;

        &+.wp-element-caption {
            margin-top: -1em;
        }

    }

}


/* 文章コンポーネント
--------------------------------------------------------------- */

/* - ボーダーブロック */

.border-block-1 {
    position: relative;
    padding: 1.5em 2em;
    border: 1px solid #888;
    border-radius: var(--border-radius-base);
    margin: 3em 0;
}

.border-block-1:has(.border-block-title) {
    padding-top: 1.8em;
}

.border-block-1 .border-block-title {
    position: absolute;
    top: -.5em;
    left: 25px;
    display: grid;
    grid-template-columns: 16px 1fr;
    gap: .5em;
    align-items: center;
    font-weight: 700;
    padding-inline: .7em;
    line-height: 1;
    background: #fff;

    &::before {
        content: "";
        display: block;
        width: 100%;
        aspect-ratio: 1/1;
        background: url(../img/common/ico_pen.svg) center center / contain no-repeat;
    }
}

.border-block-1 p:not(.init):not(:last-child) {
    margin-bottom: 1em;
}

/* - ボーダーブロック内　一覧リスト */

.wp-block-post-content {
    .border-block-ul {
        font-size: .94em;
        margin: 1em;
        margin-left: 0;
        line-height: 1.4;

        & a {
            text-decoration: none;
        }

        & li:not(:last-child) {
            margin-bottom: 1.3em !important;
        }
    }
}


/* 広告コンポーネント
--------------------------------------------------------------- */

/* - モック用 */

.mock-ins {
    box-sizing: border-box;
    display: grid;
    place-content: center;
    min-height: 250px;
    color: #fff;
    text-decoration: none;
    padding: 1.5em;
    background: #333;
}


/* - もしも系 */

.mos-block,
.af-block {
    width: fit-content;
    margin-inline: auto !important;
    margin-bottom: 1.5em;

    & img {
        display: block;
        margin: auto;
    }
}

.mos-list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px 20px;
    font-size: .9em;
    line-height: 1.6;
    margin: 80px 0 50px;

    & img {
        display: block;
        margin: auto;
    }

    & a {
        color: var(--color-default) !important;
        text-decoration: none !important;
    }

    &::before {
        --height: 26px;
        position: absolute;
        top: calc(-1 * (var(--height) + 20px));
        left: 0;
        content: "広告";
        display: grid;
        place-content: center;
        height: var(--height);
        color: #666;
        font-size: .9em;
        font-weight: 500;
        border-radius: 3px;
        padding: 0 .5em;
        background: #eee;
        line-height: 1;
    }

    &:last-child {
        margin-bottom: 0;
    }

    @media screen and (min-width: 1024px),
    print {

        /* - PC サイドバー版 */

        &.is-sidebar {
            grid-template-columns: minmax(0, 1fr);
            gap: 15px 0;
            font-size: 12px;
            line-height: 1.4;

            &>div:last-child>a {
                padding-bottom: 0;
                border-bottom: 0;
            }

            & a {

                display: grid;
                grid-template-columns: 120px minmax(0, 1fr);
                gap: 0 15px;
                align-items: center;
                padding-bottom: 15px;
                border-bottom: 1px solid #ccc;

                & img {
                    display: block;
                }

                & br {
                    display: none;
                }
            }
        }

    }
}

.relation-item-wrapper {
    margin: 80px 0 50px;
}

.relation-item-wrapper .mos-list {
    margin: 0;
}


/* - もしもカラム型 */

.mos-list-column {

    &>div {
        line-height: 0;
    }

    &>div a {
        display: grid;
        grid-template-columns: 45% 1fr;
        align-items: center;
        gap: 15px;
        font-size: 12px;
        font-weight: 500;
        text-decoration: none;
        padding: 15px 0;
        line-height: 1.4;
        border-bottom: 1px solid var(--color-border-main);
    }

    & br {
        display: none;
    }

}

/* - もしも - かんたんリンク */

.easyLink-box p {
    margin-top: inherit;
    line-height: inherit;
}


.wp-block-group:has(.easyLink-box) {
    margin: 3em 0;

    &:last-child {
        margin-bottom: 0;
    }

}

.wp-block-group div.easyLink-box {
    max-width: none;
    align-items: center;
    line-height: 1.4;
}

@media screen and (min-width: 1024px),
print {

    div.easyLink-box div.easyLink-info p.easyLink-info-name {
        font-size: 16px !important;
    }

    .wp-block-group div.easyLink-box div.easyLink-info p.easyLink-info-btn a {
        width: calc(50% - 5px);
    }

    .wp-block-group div.easyLink-box.easyLink-size-s div.easyLink-info p.easyLink-info-btn a,
    .wp-block-group div.easyLink-box.easyLink-size-xs div.easyLink-info p.easyLink-info-btn a {
        width: calc(50% - 10px);
    }

}



/* - Google系 */

ins.adsbygoogle[data-ad-status="unfilled"] {
    display: none !important;
}

.google-square-column {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    margin: 0;

    &:has(ins:not([data-ad-status="unfilled"])) {
        margin: 50px 0 30px;
    }

    .insert-block {
        margin: 0 !important;
    }

    .column-item {
        display: grid;
        place-content: center;
        width: auto;
    }
}

.insert-block {

    &:has(ins:not([data-ad-status="unfilled"])) {
        margin: 90px 0;
    }

    &:last-child {
        margin-bottom: 0 !important;
    }

    &.is-list-insert {
        margin-block: 2em !important;
    }

}


/* カスタムブロック - ブログカード
--------------------------------------------------------------- */

.wp-block-post-content .post-card {
    position: relative;
    margin: 3em auto;

    &:last-child {
        margin-bottom: 0;
    }

    & a {
        --padding: 25px;
        --imgsize: 300px;
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--padding);
        color: #333;
        text-decoration: none;
        padding: calc(var(--padding) + 10px) var(--padding) var(--padding);
        border: 1px solid #888;
        border-radius: 10px;
        line-height: 1.6;
    }

    /* -- サムネイルがある場合 */
    & a:has(> .post-card-thumbnail) {
        grid-template-columns: var(--imgsize) auto;
    }

    & img {
        width: 100%;
        height: auto;
        border-radius: 8px;
        overflow: hidden;
    }

    & p {
        margin: 0;
    }

    /* -- 関連記事はこちら */
    .post-card-heading {
        position: absolute;
        top: -.5em;
        left: 20px;
        display: flex;
        align-items: center;
        gap: 7px;
        width: fit-content;
        padding-inline: .5em;
        font-size: .94em;
        font-weight: 400;
        background: #fff;
        line-height: 1;
        z-index: 1;
    }

    /* -- 関連記事はこちら - チェックアイコン */
    .post-card-heading::before {
        content: "";
        display: block;
        width: 16px;
        aspect-ratio: 1/.75;
        background: #333;
        clip-path: polygon(15% 50%, 5% 60%, 40% 100%, 100% 30%, 90% 15%, 40% 80%);
    }

    /* -- テキストブロック  */
    .post-card-content {
        overflow: hidden;
    }

    /* -- 記事タイトル */
    .post-card-title {
        font-size: 1.25em;
        font-weight: 700;
        line-height: 1.4;
        margin-bottom: .5em;
    }

    /* -- 抜粋 */
    .post-card-content .post-card-title+p {
        color: #666;
        font-size: 14px;
        margin: 0;
    }

    /* -- キャプション */
    .post-card-caption {
        width: fit-content;
        color: #666;
        font-size: .9em;
        margin: .8em auto 0;
    }

}

/* - コンパクトモード */
.wp-block-post-content .post-card.is-compact {

    & a {
        --padding: 20px;
        --imgsize: 100px;
    }

    .post-card-title {
        font-size: 18px;
    }

    /* -- 抜粋を2行に ※モダンCSS注意 */
    .post-card-content .post-card-title+p {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .post-card-heading {
        left: 15px;
    }

}


/* Twitter - カスタムHTML
--------------------------------------------------------------- */

.twitter-tweet {
    margin: 3em auto !important;
}


/* ブロック - 引用符
--------------------------------------------------------------- */

.wp-block-quote {
    position: relative;
    padding: 1em 2.5em 1em 4em;
    background: #f7f7f7;
    border: 1px solid #ccc;

    &:not(:last-child) {
        margin-bottom: 2.5em;
    }

    &::before {
        position: absolute;
        top: 1rem;
        left: 1.3rem;
        content: "“";
        color: #666;
        font-size: 3rem;
        font-weight: 900;
        line-height: 1;
    }

    & p:not(:empty) {
        margin: 0 !important;
    }

    & cite {
        & a {
            color: #666;
            font-size: .88em;
        }
    }
}




/* 以下、SP
--------------------------------------------------------------- */

@media screen and (max-width:1023px) {

    .wp-block-post-content {

        & section:not(:last-child),
        & aside:not(:last-child) {
            margin: 60px 0;
        }

        & aside.wp-block-group+aside.wp-block-group {
            margin-top: -30px;
        }

    }

    /* SP 見出し
    --------------------------------------------------------------- */

    .wp-block-post-content {

        & h2:not(.init) {
            font-size: 20px;
            padding-bottom: .5em;
            margin-bottom: 1.5em;
        }

        & h3:not(.init) {
            font-size: 18px;
            margin-bottom: 1.5em;
        }

    }


    /* SP リスト
    --------------------------------------------------------------- */

    /* - SP ul */
    .wp-block-post-content {

        & ol:not(.init) {

            & li::before {
                top: .1em;
                width: 26px;
                font-size: 12px;
            }

        }
    }


    /* SP テーブル
    --------------------------------------------------------------- */

    .table-many-column {
        font-size: 1em;
    }

    .table-scroll {
        overflow-x: auto;
        white-space: nowrap;

        & table {
            table-layout: auto !important;
        }

    }



    /* SP 画像
    --------------------------------------------------------------- */

    .wp-block-post-content .wp-block-image:not(.init) {
        margin-inline: calc(-1* var(--container-padding)) !important;
    }


    /* SP 文章コンポーネント
    --------------------------------------------------------------- */

    /* - SP ボーダーブロック */

    .border-block-1 {
        padding: 1.5em;
        margin: 2.5em 0;
    }


    /* SP 埋め込みコンテンツ
    --------------------------------------------------------------- */

    .twitter-tweet-rendered {
        min-width: 330px;
    }


    /* SP 広告コンポーネント
    --------------------------------------------------------------- */

    /* - SP もしも系 */

    .mos-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 20px;
        font-size: .8em;

        & img {
            display: block;
            margin: auto;
        }

        & a {
            color: var(--color-default) !important;
        }

    }

    .relation-item-wrapper {
        padding: 30px 0;
    }


    /* - SP もしもカラム型 */

    .mos-list-column {

        &>div a {
            gap: 15px;
            align-items: center;
            font-size: 13px;
            padding: 15px 0;
        }

    }


    /* - SP もしも - かんたんリンク */

    .wp-block-group div.easyLink-box.easyLink-size-s div.easyLink-img p.easyLink-img-box {
        width: 220px;
        height: 220px;
    }

    .wp-block-group div.easyLink-box.easyLink-size-s div.easyLink-img p.easyLink-img-box span>img {
        max-width: 220px;
        max-height: 220px;
    }


    /* - SP Google系 */

    .google-square-column {
        display: grid;
        grid-template-columns: 1fr;
        gap: 50px;

        &:has(ins:not([data-ad-status="unfilled"])) {
            margin: 50px 0;
        }
    }

    .insert-block {
        &:has(ins:not([data-ad-status="unfilled"])) {
            margin: 70px 0;
            min-height: 280px;
        }

        &.is-list-insert {
            min-height: 0 !important;
        }

    }


    /* SP カスタムブロック - ブログカード
    --------------------------------------------------------------- */

    /* -- SP コンパクトモード以外は1行に */
    .wp-block-post-content {

        .post-card {
            & a {
                border-radius: 8px;

                & img {
                    border-radius: 6px;
                }

            }
        }

        .post-card:not(.is-compact) {

            & a {
                grid-template-columns: 1fr !important;
            }

            .post-card-title+p {
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }

        }

        .post-card.is-compact {

            /* -- SP 記事タイトル */
            .post-card-title {
                font-size: 16px;
            }

        }
    }

}