@charset "utf-8";
/* CSS Document */

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
投稿内容部分 page.php single.php　共通
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/

#the_content {
    font-size: 1.8rem;
    line-height: 1.6;
    @media screen and (max-width: 480px) {
        font-size: 1.4rem;
    }

    /*--------------------*/
    /* 本文 */
    p {
        margin: 1.8em 0;
        line-height: 2.4;
        /* 背景がある場合 */
        &.has-background {
            padding: 1.25em 2em;

            @media screen and (max-width: 480px) {
                padding: 1em 1.25em;
            }
        }
    }

    /*--------------------*/
    /* タイトル */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        line-height: 1.5;
        margin: 1.25em 0;
    }

    h1 {
        font-size: 2em;
    }

    h2 {
        font-size: 1.75em;
        text-align: center;
    }

    h3 {
        font-size: 1.5em;
    }

    h4 {
        font-size: 1.25em;
    }

    h5,
    h6 {
        font-size: 1em;
    }

    h6 {
        color: #666;
    }

    /*--------------------*/
    /* リスト */
    ul {
        list-style-type: disc;
    }

    ol {
        list-style-type: decimal;
    }

    ul,
    ol {
        padding: 0 0 0 2em;
        margin: 2em 0;

        &li {
            margin: 0.5em 0;
        }
    }

    /*--------------------*/
    /* テキスト付き要素 */
    figure {
        /* 画像 */
        /* 埋込要素 */
        &.wp-block-image,
        &.wp-block-embed {
            margin: 6rem auto;

            @media screen and (max-width: 480px) {
                margin: 3rem auto;
            }
        }

        /* テーブル */
        &.wp-block-table {
            margin: 3em 0;

            @media screen and (max-width: 480px) {
                margin: 2em 0;
            }

            /* 通常のテーブル */
            &.is-style-regular {
                table {
                    border: 2px solid #000;
                }
            }
        }

        /* テーブル・画像などのキャプション */
        figcaption {
            &.wp-element-caption {
                font-size: 0.77em;
                color: #333;
                margin: 0.5em 0 0;
            }
        }
    }

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

    .wp-block-buttons {
        margin: 4em 0;

        .wp-block-button {
            margin: 0.25em;

            .wp-block-button__link {
                min-width: 10em;
                background-color: lightblue;
            }
        }
    }

    /* ファイル */

    .wp-block-file {
        margin: 1em 0 1em 2em;
        display: list-item;
        list-style-type: disc;

        .wp-block-file__button {
            padding: 0.25em 1em;
            background-color: lightcoral;
        }
    }
}

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
single.php
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/

body.single {
    #maincontent_area {
        padding: 0 2rem;
        margin-bottom: 15rem;
        @media screen and (max-width: 480px) {
            margin-bottom: 8rem;
        }
        .entry_contents_wrap {
            .post_term {
                display: flex;
                justify-content: center;
                .terms {
                    font-size: 2.2rem;
                    min-width: 6.8em;
                    background-color: var(--color-blue);
                    text-align: center;
                    color: #fff;
                    letter-spacing: 0.1em;
                    padding: 0.33em 1em 0.43em 1.1em;
                    @media screen and (max-width: 480px) {
                        font-size: 1.4rem;
                    }
                }
            }
        }
    }
    &.casestudy-template-default {
        #maincontent_area {
            @media screen and (max-width: 480px) {
                padding: 0 1rem;
            }
            .entry_contents_wrap {
                max-width: 100rem;
                margin: auto;

                .post_term {
                    margin-bottom: 5rem;
                    @media screen and (max-width: 480px) {
                        margin-bottom: 2rem;
                    }
                }
                .post_date {
                    text-align: center;
                    font-size: 2.1rem;
                    letter-spacing: 0.04em;
                    padding-left: 0.04rm;
                    margin-bottom: 3.6rem;
                    @media screen and (max-width: 480px) {
                        font-size: 1.2rem;
                        margin-bottom: 2rem;
                    }
                }
                .entry_title {
                    text-align: center;
                    font-size: 3.8rem;
                    letter-spacing: 0.05em;
                    font-weight: 500;
                    line-height: 1.5;
                    margin-bottom: 1.2em;
                    padding-left: 0.05em;
                    @media screen and (max-width: 480px) {
                        font-size: 1.8rem;
                    }
                }
            }

            .entry_contents {
                background-color: var(--color-blue);
                padding: 10.6rem 9.8rem;
                color: #fff;
                @media screen and (max-width: 480px) {
                    padding: 3rem;
                }
            }

            /* 工事内容 */
            .koujinaiyou {
                display: flex;
                flex-wrap: wrap;
                margin-top: 3rem;
                @media screen and (max-width: 480px) {
                    display: block;
                    margin-top: 2rem;
                }
                .item {
                    font-size: 1.8rem;
                    padding: 1.2em 2em 1.3em 0;
                    display: flex;
                    gap: 1.2rem;
                    line-height: 1.5;
                    width: 50%;
                    box-sizing: border-box;
                    border-bottom: 1px solid #fff;
                    @media screen and (max-width: 480px) {
                        width: 100%;
                        font-size: 1.4rem;
                        padding: 0.7em 0 0.8em;
                    }
                    &.biko,
                    &.hattyusya {
                        width: 100%;
                    }
                    .head {
                        width: 5.6em;
                        flex-shrink: 0;
                        span {
                            display: inline-block;
                            text-align-last: justify;
                            width: 4.6em;
                            letter-spacing: 0.14em;
                            &::after {
                                content: "／";
                                position: absolute;
                            }
                        }
                    }
                }
            }
        }
        .page_nav_wrap {
            max-width: 100rem;
            margin: 8rem auto 0;
            @media screen and (max-width: 480px) {
                margin: 4rem auto 0;
            }
        }
    }

    &.news-template-default {
        #maincontent_area {
            background-color: var(--color-ex-light-blue);
            margin-top: 7.4rem;
            .entry_contents_wrap {
                max-width: 80rem;
                margin: auto;
                .post_term {
                    transform: translateY(-50%);
                    margin-bottom: 4rem;
                    @media screen and (max-width: 480px) {
                        margin-bottom: 1rem;
                    }
                }
                .post_date {
                    font-size: 2rem;
                    letter-spacing: 0.04em;
                    margin-bottom: 2.4rem;
                    @media screen and (max-width: 480px) {
                        font-size: 1.2rem;
                        margin-bottom: 1.6rem;
                    }
                }
                .entry_title {
                    font-size: 3rem;
                    letter-spacing: 0.05em;
                    line-height: 1.6;
                    margin-bottom: 1.2em;
                    @media screen and (max-width: 480px) {
                        font-size: 1.8rem;
                    }
                }
                .news_main_img {
                    border-radius: 2rem;
                    overflow: hidden;
                    @media screen and (max-width: 480px) {
                        border-radius: 1rem;
                    }
                }
                #the_content {
                    figure {
                        &.wp-block-image {
                            max-width: 64rem;
                        }
                    }
                }
            }
            .page_nav_wrap {
                margin: 15rem auto 0;
                transform: translateY(50%);
                @media screen and (max-width: 480px) {
                    margin: 4rem auto 0;
                }
            }
        }
    }
}