@charset "UTF-8";

/*グラデーションアニメーション++++++++++++++++++ */
html {
    background: linear-gradient(45deg, rgba(237, 230, 225, 1), rgb(251, 188, 188));
    background-size: 1300% 1300%;
    animation: grad 10s ease infinite;
}

@keyframes grad {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


/*============================== ヘッダー============================== */
.header_inner {
    display: flex;
    justify-content: space-between;
    z-index: 100;
    position: relative;
    width: 100%;
    background-color: transparent;
    top: 0;
    padding-top: 8px;
    padding-left: 2px;
    padding-right: 2px;
    margin-bottom: 50px;
}

/* ==============================ロゴ================================== */

header .log {
    position: absolute;
    top: 0;
    left: 10px;
    width: 0%;
    display: block;

}

header .log img {
    width: 80px;
}

/* ==========================ナビゲーション================================ */

header nav {
    background-color: rgba(237, 230, 225, 0.9);
    position: fixed;
    top: 0;
    right: 0;
    width: 60%;
    margin-bottom: 50px;
    height: 100vh;
    padding-top: 50px;
    padding-left: 30px;
    padding-right: 30px;
    transition: 0.3s;
    opacity: 0;
    visibility: hidden;
    /*header.onになっていない場合はメニューが表示されない⇒opacity: 0;とvisibility: hidden;のセットで  */
}

/*header.onになったらメニューが表示される   */
header.on nav {
    opacity: 1;
    visibility: visible;
}

nav a {
    color: rgb(86, 77, 69);
    font-size: 2.5rem;
    line-height: 2.5;
    display: block;
    text-align: end;
    text-decoration: none;
    border-bottom: 1px solid #afa07f;
}

/* ロゴマークとハンバーガーメニューを横並びにする */
.header_inner {
    display: flex;
    align-items: center;
    /* 高さを揃える */
    /* justify-content: space-between; */
    position: relative;
}

.header_inner h1 {
    width: 200px;
    position: absolute;
    left: 45%;
    top: 10%;
}

.hum {
    color: darkslategrey;
    border: 1px solid darkslategrey;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
    position: absolute;
    top: 10px;
    right: 10px;
}

.hum .hum_line::before,
.hum .hum_line::after {
    content: "";
    display: block;
    /* ハンバーガー線を縦並びにするためdisplay: block;でブロック要素にして改行させる */
    width: 20px;
    height: 2px;
    background-color: darkslategrey;
    transition: 0.3s;
}

/* headerにクラスonがつくと✕になり、onが外れると二本線になる（jquery使用） */
.hum .hum_line::before {
    transform: translateY(-2px);
    /* ハンバーガー線の上の線を2pX上にずらす */
}

.hum .hum_line::after {
    transform: translateY(4px);
    /* ハンバーガー線の上の線を4pX下にずらす */
}

/* ✕印を作る（javaを使用）　 */
header.on .hum .hum_line::before {
    /* header.onは間に半角スペースを入れない */
    transform: translateY(2px) rotate(45deg);
    /* ハンバーガー線を45度回転 */
}

header.on .hum .hum_line::after {
    transform: translateY(0) rotate(-45deg);
    /* ハンバーガー線を－45度回転 */
}

/* ==============ヘッドビジュアル================================= */
.head_visual {
    background-color: transparent#fff;
    display: block;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 30px;
    position: relative;
}

.head_visual .hv1 img {
    position: absolute;
    left: 10px;
    width: 10px;
    height: auto;
    display: inline-block;
}

.head_visual .hv1 {
    transform: rotate(120deg);
}

.head_visual .hv2 img {
    position: absolute;
    right: 20px;
    width: 10px;
    height: auto;
}

.head_visual .hv2 {
    transform: rotate(-120deg);
}

/* ==============メインタイトル================================= */

main {
    margin-top: 70px;
}

.main_title_inner {
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.title {
    position: absolute;
    top: 40%;
    left: 45%;
    transform: translateX(-40%);
    color: rgb(226, 135, 158);
    font-size: 7vw;
    font-family: 'Sevillana', cursive;
    text-shadow: 1px 2px 5px #afa07f;
    z-index: 10;

}

.title span {
    font-size: 2vw;
    display: block;
    text-align: center;

}

/*=================== キービジュアル ===========================*/
.slide_item {
    max-width: 80vw;
    margin-left: auto;
    margin-right: auto;
}

ul.slick-dots {
    display: none;
    border-color: blue;
}

/* ==================お店からのメッセージ========================= */
.message {
    width: 60vw;
    height: auto;
    margin-top: 100px;
    margin-bottom: 70px;
    margin-left: auto;
    margin-right: auto;
    /* color: #0b0303; */

    padding: 10px 20px 20px;
    background-color: #efdce4;
    border-radius: 3%;
    /* text-align: center; */
    /* padding: 5%; */
}

.message h1 {
    text-align: center;
    padding-bottom: 20px;
}

.message span {
    font-family: 'Sevillana', cursive;
    text-shadow: 1px 2px 5px #afa07f;
    font-size: 1.3rem;
}


/*===========================ニュース======================== */
.news {
    padding-bottom: 10px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 50px;
}

.news h2 {
    /* padding-top: 10px; */
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    margin-bottom: 0
}

.card {
    text-decoration: none;
}

.news_inner {
    padding-top: 2rem;
    width: 100vw;
    height: 350px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    position: relative;
}

.news_core {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.news_title {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    font-size: 1.3rem;

}

.news_title::before {
    content: "💗";
    color: bisque;
    width: 2rem;

}

.mes_time {
    display: block;
    text-align: end;

}


/* 画像枠に高さの制限を設定 */
.par_pic {
    height: 250px;
    overflow: hidden;
}

.card_pic {
    width: 100%;
    margin-bottom: 30px;
}

.section_btn {
    text-align: right;
    margin-right: 5vw;
}

.section_btn a {
    text-decoration: none;
    color: rgb(226, 135, 158);
}

/*=================フッター================== */

footer {
    background-image: url(../img/Garden3.png);
    background-size: 100vw;
    background-repeat: no-repeat;
    height: auto;
    /* background-color: transparent; */
    margin-right: auto;
    margin-left: auto;
    margin-top: 30px;
}

.footer_inner img {
    width: 60px;
    padding-top: 90px;
    margin-left: auto;
    margin-right: auto;
}

.footer_inner small {
    display: block;
    /* margin-top: 1px; */
    text-align: center;
    color: #fff;
}


/* ==================================================================== 

フラワーページ

======================================================================*/


.flower_main {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.flower_left {
    position: absolute;
    margin-top: 100px;
    left: 0;
    margin-right: 5px;
    width: 15vw;
    height: 300px;
    z-index: 10;

}


.flower_right {
    position: absolute;
    margin-top: 100px;
    right: 0;
    margin-right: 5px;
    width: 15vw;
    height: 600px;
    z-index: 10;
}


.flower_sec {
    width: 70vw;
    margin-left: auto;
    margin-right: auto;
}

.flower_title {
    position: relative;
    top: 0;
    color: rgb(226, 135, 158);
    font-size: 4rem;
    font-family: 'Sevillana', cursive;
    text-shadow: 1px 2px 5px #afa07f;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
}

.flower_sec p {
    width: 60vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 60px;
}


.flower_sec span {
    font-family: 'Sevillana', cursive;
    text-shadow: 1px 2px 5px #afa07f;
    font-size: 1.3rem;
}

.flower_img {
    width: 50vw;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

.flower_img img {
    margin-bottom: 60px;
    box-shadow: 4px 4px 15px lightsalmon;
}




/* ==================================================================== 

アバウトページ

======================================================================*/

.about_title {
    color: rgb(226, 135, 158);
    font-size: 4rem;
    font-family: 'Sevillana', cursive;
    text-shadow: 1px 2px 5px #afa07f;
    margin-left: 10vw;
    margin-bottom: 30px;
}

.about_img {
    width: 50vw;
    height: 50vw;
    margin-right: auto;
    margin-left: auto;
}

.about_img img {
    border-radius: 50%;
    box-shadow: 4px 4px 15px lightsalmon;
    margin-bottom: 20px;
}

.about_img h2 {
    font-size: 1rem;
    text-align: center;
    color: rgb(226, 135, 158);
}

.about_mes {
    width: 60vw;
    height: auto;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
}

.about_mes span {
    font-family: 'Sevillana', cursive;
    text-shadow: 1px 2px 5px #afa07f;
    font-size: 1.3rem;
}

.head_visual .hv1 img {
    position: absolute;
    left: 10px;
    width: 10px;
    height: auto;
    display: inline-block;
}

.about_visual {
    margin-top: 100px;
    /* position: relative; */
}


.hv3 {
    transform: rotate(-30deg);
    position: relative;
}

.hv3 img {
    position: absolute;
    right: 20px;
    top: 10px;
    width: 100px;
    height: auto;
    transition: transform 5s;
    z-index: 10;
}

.hv3 img:hover {
    transform: translateX(-40vw) translateY(-50vh) rotate(90deg);
}


.hv4 {
    transform: rotate(30deg);
    position: relative;
}

.hv4 img {
    position: absolute;
    left: 20px;
    top: 10px;
    width: 100px;
    height: auto;
    transition: transform 5s;
    z-index: 10;
}

.hv4 img:hover {
    transform: translateX(20vw) translateY(-65vh) rotate(120deg);

}

.info h2 {
    color: rgb(226, 135, 158);
    font-size: 2rem;
    font-family: 'Sevillana', cursive;
    text-shadow: 1px 2px 5px #afa07f;
    margin-left: 10vw;
    margin-bottom: 10px;
}

.info table {
    width: 85vw;
    margin-left: 10vw;
    margin-bottom: 50px;
    border-collapse: collapse;
}

.info table tr {
    border-bottom: 2px dotted orchid;
    text-decoration: none;
}

.info table th {
    width: 20%;
    padding: 5px;
    text-align: left;
}

.info table td {
    width: 80%;
    padding: 5px;
}


/* ==================================================================== 

ニュース一覧ページ

======================================================================*/

.new_all_inner {
    width: 60vw;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 40px;
}

.news_all_title {
    color: rgb(226, 135, 158);
    text-shadow: 1px 2px 5px #afa07f;
    font-size: 1.5rem;
    width: 100%;
    text-align: center;
}

dt time {
    text-align: right;
    display: block;
}

p.has-medium-font-size {
    font-size: 1rem !important;
}

.wp-block-button__link {
    display: none !important;
}


/* ==================================================================== 

ニュース個別ページ

======================================================================*/

.head_visual {
    margin-bottom: 50px;
}

h1.news_post_title {
    color: rgb(226, 135, 158);
    font-family: sans-serif;
    font-size: 2rem;
    text-shadow: 1px 2px 5px #afa07f;
    display: block;
    text-align: center;
    margin-bottom: 30px;
}

.post_content time {
    display: block;
    width: 90vw;
    text-align: right;
    margin-bottom: 10px;

}

.post_content .content {
    width: 90vw;
    margin-top: 10px;
    padding-left: 5vw;
}

.section_btn a {
    display: block;
    margin-top: 30px;

}

/*============================================================================

                                    PC向けデザイン

============================================================================= */

@media screen and (min-width:960px) {

    .header_inner {
        margin-top: 20px;
        padding-top: 30px;
        padding-left: 10px;
        padding-right: 20px;
    }

    /* ハンバーガーメニューは非表示⇒セレクタの詳細度を合わせる */
    header .hum {
        display: none;
    }

    header .log img {
        width: 120px;
    }

    header nav {
        visibility: visible;
        opacity: 1;

        /* position: static; */
        /* ポジションをFIXから通常に戻す */
        width: 30vw;
        height: auto;
        /* padding: 0; */
        background-color: transparent;
    }

    header nav ul {
        display: flex;
        gap: 20px;
        width: 100%;
        justify-content: space-around;
        text-align: center;
    }


    header nav a {
        font-size: 1rem;
        border-bottom: none;
        line-height: 1;
    }

    /* ----------------------------トップページ(PC)--------------------------------------------- */
    /* * {
        outline: 2px red solid;
    } */

    .head_visual {
        height: 50px;
    }

    .head_visual .hv1 img,
    .head_visual .hv2 img {
        width: 50px;
        height: auto;
    }

    .message p {
        font-size: 1.1rem;
    }

    .news {
        width: 90vw;
        margin-left: auto;
        margin-right: auto;
    }

    .latest {
        width: 90vw;
        display: flex;
        justify-content: start;
        margin-left: auto;
        margin-right: auto;
    }


    .news_title {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px;
        font-size: 1.3rem;
    }

    .news_inner {
        padding-top: 2rem;
        width: 30vw;
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
        /* position: relative; */
        height: 400px;
    }


    .news_core {

        width: 100%;
        height: 200px;
        margin-left: auto;
        margin-right: auto;
    }

    .news_core h3 {
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }

    .news_core h3::before {
        content: "💗";
        width: 2rem;
    }

    .mes_time {
        width: 90%;
        display: block;
        text-align: end;
    }

    time {
        display: block;
        width: 100%;
        /* padding-left: 500px; */
    }

    .par_pic {
        margin-top: 30px;
        margin-bottom: 50px;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        width: 100%;
    }

    .card_pic {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        padding-left: 35px;
        padding-right: 35px;
    }


    .section_btn {
        margin-left: 0;
    }

    footer {
        height: 400px;
    }

    .footer_inner img {
        width: 90px;
        padding-top: 250px;
        margin-left: auto;
        margin-right: auto;
    }

    .footer_inner address {
        font-size: 1rem;
        margin-left: 20px;
        margin-top: -50px;
        color: #fff;
    }

    .footer_inner small {
        display: block;
        margin-top: 5px;
        text-align: center;
        color: #fff;
    }


    .about_img h2 {
        font-size: 1.5rem;
    }

    .about_mes p {
        font-size: 1.2rem;
    }

    .info table {
        font-size: 1.2rem;
    }

    .flower_sec p {
        font-size: 1.2rem;
    }


    /* =================ニュース一覧ページ======================================================*/


    .news_all_title {
        font-size: 2.5rem;
        width: 100%;
        text-align: center;
    }




    /* =================ニュース個別ページ======================================================*/


    h1.news_post_title {
        font-size: 2.5rem;
    }

    .news_visual .hv4 {
        display: block;
        margin-top: 200px;
    }

    .section_btn a {
        font-size: 1.2rem;
    }



    /*========================min-width:960px=======================*/
}


/*============================================================================

                                    タブレット向けデザイン

============================================================================= */

@media (min-width:510px) and (max-width:959px) {
    .footer_inner img {
        padding-top: 150px;
    }

    /*========================min-width:510px max-width:959px=======================*/
}