@charset "UTF-8";

/* 詳細ページ ================================================ */
/* ==========================================================

    body id="single"

    読み込み
    H2：pageTitle
    投稿の本文：singlePost
    ページ遷移ナビ：postNav

============================================================ */
/* 読み込み ================================================= */

@import url("./common.css");   /* 共通：全ページ */

/* 読み込み ================================================= */
/* ========================================================= */
/* H2 ====================================================== */

section{

    &.pageTitle{
        /* この一覧の共通部分は、common.cssの「タイトルデザイン」で一元管理している */

        /* 共通部分の個別設定（上書き含む）*/
        /* この「お知らせ」のH2だけ独自のデザイナなので、下記で上書き設定している */
        &::before{
            background-image: none;
        }

        .boxArea{
            height: auto;
            padding-bottom: clamp(60px, 11.42vw - 8.57px, 140px);

            /* ピース：左下 */
            &::before{
                bottom: -5%;
                left: -11%;
            }

            /* ピース：右下 */
            &::after{
                bottom: -28%;
                right: -5%;
                width: 14%;
            }

            .tlDesignNews{
                /* ↓「.pageTitle::before」（H2の背景画像）とあわせる */
                width: clamp(480px, 60.46vw + 117.21px, 1000px);   /* MIN：600px ～ MAX：1460px（両サイドの余白が5%の場合）*/
                margin-left: clamp(24px, 14.65vw - 63.90px, 150px);
                /* これ以下は「.tlDesign01」とあわせない独自の設定 */
                margin-top: 0;
                padding: 0;

                h2{
                    position: relative;
                    width: fit-content;
                    font-weight: 500;
                    margin: 0 auto;

                    /* 下線 */
                    &::after{
                        position: absolute;
                        bottom: calc(clamp(2px, 0.57vw - 1.42px, 6px) * -1);
                        left: 0;
                        content: "";
                        display: inline-block;
                        width: 100%;
                        height: 1px;
                        background-color: #231815;
                    }

                }

                .timeNews{
                    margin-top: clamp(20px, 2.85vw + 2.85px, 40px);
                }

                h3{
                    text-align: justify;
                    letter-spacing: 0;
                }

                /* カテゴリー */
                .categoryArea{
                    clear: both;
                    display: flow-root;
                    margin-top: clamp(15px, 2.14vw + 2.14px, 30px);

                    /* リンクあり版 */
                    .catIcon{
                        float: left;
                        margin: 0 clamp(10px, 1.42vw + 1.42px, 20px) 0 0;

                        li{
                            margin-top: 0;
                        }

                    }

                    /* リンクなし版 */
                    .categoryList{
                        float: left;
                        display: flow-root;
                        margin: 0 clamp(5px, 0.71vw + 0.71px, 10px) 0 0;

                        li{
                            float: left;
                            margin: 0 clamp(5px, 0.71vw + 0.71px, 10px) 0 0;
                        }

                    }

                    .tagIcon{
                        clear: none;
                        float: left;
                        margin: 3px 0 0;

                        li{
                            margin-top: 0;
                        }

                    }

                }

            }

        }

        @media screen and (width <= 834px){

            .boxArea{

                /* ピース：左下 */
                &::before{
                    bottom: -5%;
                    left: -14%;
                }

            }

        }

        @media screen and (width <= 600px){
            margin-bottom: 0;

            .boxArea{
                padding-bottom: 5vh;

                /* ピース：左下 */
                &::before{
                    z-index: -1;
                }

                /* ピース：右下 */
                &::after{
                    bottom: 5%;
                    right: -10%;
                    width: 25%;
                }

                .tlDesignNews{
                    width: 100%;
                    margin-left: 0;

                    /* カテゴリー */
                    .categoryArea{
                        margin-top: 2vh;

                        /* リンクあり版 */
                        .catIcon{
                            float: none;
                            margin: 0;

                            li{
                                margin-top: 0.7vh;
                            }

                        }

                        /* リンクなし版 */
                        .categoryList{
                            float: none;
                            margin: 0;
                        }

                        .tagIcon{
                            clear: both;
                            float: none;
                            margin-top: 2vh;

                            li{
                                margin-top: 0.7vh;
                            }

                        }

                    }

                }

            }

        }

    }

}

/* H2 ====================================================== */
/* ========================================================= */
/* 投稿の本文 =============================================== */

/*
    本文はビジュアルエディタで自由に入力させるため、
    reset.cssでリセットされたタグを、再度、リセット（デフォルトに戻す）する
    「見出し2（H2）」や「見出し3（H3）」などビジュアルエディタ内で使用させるHタグを選定し、
    デザインのCSSを設定する＆そのデザインのCSSをビジュアルエディタにも反映させる
    「見出し」以外の設定（カラーやリストなど）はビジュアルエディタで
    自由にデザインしてもらう（当然、レスポンシブなどはできない、が仕方ない）

    【注意】
    こちらの設定を修正したら、
    visualeditor.css（管理画面用）にも同様の修正をする

    基本的には投稿（実質「お知らせ」のみ）の詳細ページにのみ使用（固定ページの本文には反映させない）
*/

.contents{

    section.singlePost{

        .boxArea{

            /* 投稿内容 */
            .visualeditor{
                /* ↓「.pageTitle::before」（H2の背景画像）とあわせる */
                width: clamp(480px, 60.46vw + 117.21px, 1000px);   /* MIN：600px ～ MAX：1460px（両サイドの余白が5%の場合）*/
                margin-left: clamp(24px, 14.65vw - 63.90px, 150px);

                /* ↓ ここから */



                /* ALLリセット */
                *, ::before, ::after{
                    all: revert;
                    margin: 0;
                    margin-top: clamp(10px, 1.43vw + 1.43px, 20px);

                    @media screen and (width <= 600px){
                        margin-top: 3vh;
                    }

                }

                /* 文字 */

                /* ベース */
                font-family: var(--font-family-Base), var(--font-family-Back);
                font-size: var(--font-size-Base);
                font-weight: var(--font-weight-Base);
                line-height: var(--line-height-Base);

                /* 小 */
                .editorContentfS{
                    font-size: var(--font-size-S);
                    font-weight: var(--font-weight-S);
                    line-height: var(--line-height-S);
                }

                /* 中 */
                .editorContentfL{
                    font-size: var(--font-size-XL);
                    font-weight: var(--font-weight-XL);
                    line-height: var(--line-height-XL);
                }

                /* 大 */
                .editorContentfXL{
                    font-size: clamp(20px, 1.71vw + 9.71px, 32px) !important;
                    font-weight: var(--font-weight-XL);
                    line-height: var(--line-height-XL);
                }

                @media screen and (width <= 600px){

                    /* ベース */
                    font-size: var(--font-size-Base-Sp);
                    line-height: var(--line-height-Base-Sp);

                    /* 小 */
                    .editorContentfS{
                        font-size: var(--font-size-S-Sp);
                    }

                    /* 中 */
                    .editorContentfL{
                        font-size: var(--font-size-XL-Sp);
                    }

                    /* 大 */
                    .editorContentfXL{
                        font-size: 20px;
                    }

                }

                /* テキストリンク */
                a{
                    transition: var(--transition-TxtLink);

                    &:link,
                    &:visited{
                        color: var(--color-Design-Pink03);
                        text-decoration: underline;
                    }

                    @media (hover:hover){

                        &:hover{
                            text-decoration: none;
                        }

                    }

                }

                /* 画像 */

                /* 大（デフォルト）*/
                img{
                    width: 60%;
                    max-width: max-content;
                    vertical-align: bottom;
                    margin: 0 auto;
                    padding: 0;
                    box-sizing: border-box;
                    border-style: solid;
                    border-width: 0;

                    @media screen and (width <= 600px){
                        width: 90%;
                    }

                }

                /* 中央配置 */
                p:has(img){
                    text-align: center;
                }

                /* 中 */
                .editorContentImgM{
                    width: 100%;
                    text-align: center;

                    img{
                        width: 35%;

                        @media screen and (width <= 600px){
                            width: 60%;
                            margin: 0 20%;
                        }

                    }

                }

                /* 小 */
                .editorContentImgS{
                    width: 100%;
                    text-align: center;

                    img{
                        width: 20%;

                        @media screen and (width <= 600px){
                            width: 40%;
                            margin: 0 30%;
                        }

                    }

                }

                /* 動画 */
                /* ここは管理画面のみのclass指定が存在するので「visualeditor.css」にコピペするときは要注意！ */
                .wp-video{
                    width: 80% !important;
                    max-width: max-content;
                    text-align: center;
                    margin-left: auto;
                    margin-right: auto;

                    /*
                    「visualeditor.css」にのみ設定分
                    .mejs-container{
                        width: 100% !important;
                        min-width: 100% !important;
                    */

                    video{
                        width: 100% !important;
                    }

                    /* } */

                    @media screen and (width <= 600px){
                        width: 100% !important;
                    }

                }

                /* 上部を余白を0にする要素 */
                li,
                video{
                    margin-top: 0 !important;
                }



                /* ↑ ここまで */

                @media screen and (width <= 600px){
                    width: 100%;
                    margin-left: 0;
                }

            }

            /* 施設紹介リンク */
            .linkFacility{
                display: flow-root;
                margin-top: 30px;
                text-align: center;

                ul{
                    display: flex;
                    justify-content: center;
                    width: 100%;
                    margin-top: 20px;

                    li{
                        width: 15%;
                        min-width: 100px;
                        margin: 0 2%;

                        img{
                            width: 100%;

                            &.bnCasa{
                                border: 1px solid var(--color-Design-Casa01);
                            }

                            &.bnConcierge{
                                border: 1px solid var(--color-Design-Concierge01);
                            }

                            &.bnDayservice{
                                border: 1px solid var(--color-Design-Dayservice01);
                            }

                        }

                    }

                }

                @media screen and (width <= 600px){
                    margin-top: 2vh;

                    ul{
                        margin-top: 2vh;

                        li{
                            width: 35%;
                            margin: 0 5%;
                        }

                    }

                }

            }

        }

    }

}

/* 投稿の本文 =============================================== */
/* ========================================================= */
/* ページ遷移ナビ =========================================== */

section.postNav{
    margin-top: clamp(60px, 5.71vw + 25.71px, 100px);
    background-color: var(--color-Bg-Beige01);

    .boxArea{
        padding: clamp(20px, 4.28vw - 5.71px, 50px) 0;

        .transitionList{
            display: flex;
            justify-content: center;
            align-items: center;

            li{
                margin: 0 clamp(15px, 2.14vw + 2.14px, 30px);

                &:first-child{
                    position: relative;

                    &::after{
                        position: absolute;
                        content: "｜";
                        top: 0;
                        right: calc(clamp(22px, 2.57vw + 6.57px, 40px) * -1);
                    }

                }

                a{
                    transition: var(--transition-TxtLink);

                    &:link,
                    &:visited{
                        color: var(--color-Design-Pink03);
                        text-decoration: underline;
                    }

                    @media (hover:hover){

                        &:hover{
                            text-decoration: none;
                        }

                    }

                }

                .noLink{
                    color: #ccc;
                }

            }

        }

        /* ボタン */
        .bt{
            width: clamp(180px, 14.28vw + 94.28px, 280px);

            a{
                padding-right: 12%;

                /* 矢印 */
                &::before{
                    right: 9%;
                    width: 10%;
                }

            }

            @media screen and (width <= 600px){
                width: 200px;

                a{

                    /* 矢印 */
                    &::before{
                        right: 7%;
                        width: 10%;
                    }

                }

            }

        }

    }

    @media screen and (width <= 600px){
        margin-top: 5vh;

        /* ボタン */
        .bt{
            width: 200px;
        }

    }

}

/* ページ遷移ナビ =========================================== */
/* ========================================================= */