@charset "UTF-8";

/* CSS INFORMATION -================================================= */
/* File name : cherry_blossom2020.css */
/* Description : 桜まつり用CSS */
/* ================================================================== */

/* ================================================================== */
/*    cherry_blossom2020
/* ================================================================== */
.flowers_content {
    padding-top: calc(19 / 750 * 100%);
}

.cherry_all_area {
    border: 1px solid #c1962b;
}

.cherry_all_area h2 {
    margin: 0;
    padding: calc(32 / 648 * 100%) 0;
    background: url(../images/flowers/cherry_blossom2020/cherry_all_area_sp.jpg) no-repeat left top;
    background-size: cover;
    border: 0;
}

.page_box .cherry_all_area h2 span {
    display: inline-block;
    padding: 0.5em 1em;
    background-color: rgba(255, 68, 130, 0.85);
    color: #fff;
    font-size: 3rem;
    font-weight: 700;
}

.cherry_all_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: calc(20 / 650 * 100%) 0;
}

.cherry_all_box::before {
    content: "";
    display: block;
    width: calc(184 / 648 * 100%);
    padding-top: calc(128 / 648 * 100%);
}

.cherry_all_box.cherry_flow1::before,
.cherry_section_area dl dd.cherry_flow1::before {
    background: url(../images/flowers/cherry_blossom2020/cherry_flow1.png) no-repeat center center;
    background-size: calc(132 / 184 * 100%) auto;
}

.cherry_all_box.cherry_flow2::before,
.cherry_section_area dl dd.cherry_flow2::before {
    background: url(../images/flowers/cherry_blossom2020/cherry_flow2.png) no-repeat center center;
    background-size: calc(132 / 184 * 100%) auto;
}

.cherry_all_box.cherry_flow3::before,
.cherry_section_area dl dd.cherry_flow3::before {
    background: url(../images/flowers/cherry_blossom2020/cherry_flow3.png) no-repeat center center;
    background-size: calc(132 / 184 * 100%) auto;
}

.cherry_all_box.cherry_flow4::before,
.cherry_section_area dl dd.cherry_flow4::before {
    background: url(../images/flowers/cherry_blossom2020/cherry_flow4.png) no-repeat center center;
    background-size: calc(132 / 184 * 100%) auto;
}

.cherry_all_box.cherry_flow5::before,
.cherry_section_area dl dd.cherry_flow5::before {
    background: url(../images/flowers/cherry_blossom2020/cherry_flow5.png) no-repeat center center;
    background-size: calc(132 / 184 * 100%) auto;
}

.cherry_all_box.cherry_flow6::before,
.cherry_section_area dl dd.cherry_flow6::before {
    background: url(../images/flowers/cherry_blossom2020/cherry_flow6.png) no-repeat center center;
    background-size: calc(132 / 184 * 100%) auto;
}

.page_box .cherry_all_box dl {
    width: calc(444 / 648 * 100%);
    margin: 0 calc(20 / 648 * 100%) 0 auto;
    padding: 0 0 0 calc(24 / 648 * 100%);
    border-left: 1px solid #c1962b;
}

.page_box .cherry_all_box dl dt {
    margin: 0;
    padding: 0 0 0.45em;
    border-bottom: 1px dashed #c1962b;
    color: #ff4482;
    font-size: 3.6rem;
    line-height: 1.4;
}

.page_box .cherry_all_box dl dt::before {
    width: auto;
    margin: 0;
    padding: 0;
    background-color: transparent;
    position: relative;
}

.page_box .cherry_flow1 dl dt::before,
.cherry_section_area dl dd.cherry_flow1::after {
    content: "つぼみです";
}

.page_box .cherry_flow2 dl dt::before,
.cherry_section_area dl dd.cherry_flow2::after {
    content: "少し咲きました";
}

.page_box .cherry_flow3 dl dt::before,
.cherry_section_area dl dd.cherry_flow3::after {
    content: "そろそろ見頃です";
}

.page_box .cherry_flow4 dl dt::before,
.cherry_section_area dl dd.cherry_flow4::after {
    content: "満開です！";
}

.page_box .cherry_flow5 dl dt::before,
.cherry_section_area dl dd.cherry_flow5::after {
    content: "散り始めです";
}

.page_box .cherry_flow6 dl dt::before,
.cherry_section_area dl dd.cherry_flow6::after {
    content: "葉桜です";
}

.page_box .cherry_all_box dl dd {
    padding: 0.55em 0 0;
    font-size: 2.8rem;
    line-height: 1.5;
}

.page_box .cherry_flow1 dl dd::before {
    content: "まだ花は見られません。";
    display: block;
}

.page_box .cherry_flow2 dl dd::before {
    content: "まだまだです！";
    display: block;
}

.page_box .cherry_flow3 dl dd::before {
    content: "花が咲いてきました。もうすぐ満開です！";
    display: block;
}

.page_box .cherry_flow4 dl dd::before {
    content: "今年も綺麗な桜が咲きました！";
    display: block;
}

.page_box .cherry_flow5 dl dd::before {
    content: "";
    display: block;
}

.page_box .cherry_flow6 dl dd::before {
    content: "また来年！";
    display: block;
}

.page_box p.cherry_all_date {
    margin-top: 0.5em;
    color: #ca9c2f;
    font-size: 2rem;
    text-align: right;
}

.cherry_sec1 {
    margin: 0 0 calc(110 / 650 * 100%);
}

.cherry_sec2 {
    margin: 0 0 calc(70 / 650 * 100%);
}

.cherry_section_area dl {
    margin: 0 0 calc(55 / 650 * 100%);
}

.cherry_section_area dl dt {
    margin-bottom: calc(15 / 650 * 100%);
}

.cherry_section_area dl dd {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: calc(14 / 648 * 100%) 0;
    border: 1px solid #c1962b;
    background-color: #fff8fb;
    color: #ff4482;
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 1.4;
}

.cherry_section_area dl dd::before {
    content: "";
    display: block;
    width: calc(134 / 648 * 100%);
    padding-top: calc(90 / 648 * 100%);
    background-size: auto 100% !important;
}

.cherry_section_area dl dd::after {
    width: calc(514 / 648 * 100%);
    padding: 0.55em 1em;
    border-left: 1px solid #c1962b;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.cherry_facebook {
    margin: 0 0 calc(70 / 650 * 100%);
    border: 1px solid #c1962b;
}

.cherry_map {
    cursor: pointer;
}

.page_box .cherry_manners li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    padding: 0;
    color: #808080;
}

.page_box .cherry_manners li.center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.page_box .cherry_manners li::before {
    display: none;
}

.cherry_manners li em {
    width: calc(88 / 650 * 100%);
    padding: 0.55em 0.2em 0.55em 0;
    background: url(../images/flowers/cherry_blossom2020/bg_sakura.png) no-repeat left top;
    background-size: auto 100%;
    color: #ff4482;
    font-size: 4rem;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    letter-spacing: -0.2em;
    text-align: center;
}

.cherry_manners li span {
    width: calc(540 / 650 * 100%);
}

.page_box_btn a {
    width: calc(500 / 650 * 100%);
    padding: 1em 1.8em 1em 1em;
    font-size: 2.8rem;
}

.cherry_barbecue .page_box_btn {
    margin: 0 0 calc(90 / 650 * 100%);
}

.cherry_bnr {
    margin: 0 0 calc(45 / 650 * 100%);
}

.cherry_bnr a {
    padding: calc(8 / 650 * 100%);
    border: 1px solid #ca9c2f;
    background-color: #fff;
}

@media screen and (min-width: 768px) {
    .flowers_content {
        padding-top: calc(25 / 730 * 100%);
    }

    .cherry_all_area h2 {
        padding: calc(30 / 668 * 100%) 0;
    }

    .page_box .cherry_all_area h2 span {
        padding: 0.85em 1.8em;
        font-size: 2rem;
        letter-spacing: 0.05em;
    }

    .big.page_box .cherry_all_area h2 span {
        font-size: calc(2rem * 1.2);
    }

    .small.page_box .cherry_all_area h2 span {
        font-size: calc(2rem * 0.8);
    }

    .cherry_all_box {
        padding: calc(12 / 668 * 100%) 0;
    }

    .cherry_all_box::before {
        width: calc(192 / 668 * 100%);
        padding-top: calc(124 / 668 * 100%);
        border-right: 1px solid #c1962b;
    }

    .page_box .cherry_all_box dl {
        width: calc(455 / 668 * 100%);
        margin: 0 calc(20 / 668 * 100%) 0 auto;
        padding: 0 0 0 calc(25 / 668 * 100%);
        border-left: 0;
    }

    .page_box .cherry_all_box dl dt {
        padding: 0 0 0.7em 0.2em;
        font-size: 2.4rem;
    }

    .big.page_box .cherry_all_box dl dt {
        font-size: calc(2.4rem * 1.2);
    }

    .small.page_box .cherry_all_box dl dt {
        font-size: calc(2.4rem * 0.8);
    }

    .page_box .cherry_all_box dl dd {
        padding: 0.8em 0 0 0.4em;
        font-size: 1.6rem;
    }

    .big.page_box .cherry_all_box dl dd {
        font-size: calc(1.6rem * 1.2);
    }

    .small.page_box .cherry_all_box dl dd {
        font-size: calc(1.6rem * 0.8);
    }

    .page_box p.cherry_all_date {
        margin-top: 0.4em;
        font-size: 1.2rem;
    }

    .big.page_box p.cherry_all_date {
        font-size: calc(1.2rem * 1.2);
    }

    .small.page_box p.cherry_all_date {
        font-size: calc(1.2rem * 0.8);
    }

    .cherry_sec1 {
        margin: 0 0 calc(55 / 670 * 100%);
    }

    .cherry_sec2 {
        margin: 0 0 calc(40 / 670 * 100%);
    }

    .cherry_section_area {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .cherry_section_area dl {
        width: calc(320 / 670 * 100%);
        margin: 0 0 calc(35 / 670 * 100%);
    }

    .cherry_section_area dl dt::before {
        width: calc(8 / 320 * 100%);
        padding-top: calc(8 / 320 * 100%);
    }

    .cherry_section_area dl dd {
        padding: calc(9 / 320 * 100%) 0;
        font-size: 2rem;
    }

    .big .cherry_section_area dl dd {
        font-size: calc(2rem * 1.2);
    }

    .small .cherry_section_area dl dd {
        font-size: calc(2rem * 0.8);
    }

    .cherry_section_area dl dd::before {
        width: calc(96 / 318 * 100%);
        padding-top: calc(60 / 318 * 100%);
    }

    .cherry_section_area dl dd::after {
        width: calc(221 / 318 * 100%);
        padding: 0.65em 1em;
    }

    .cherry_facebook {
        max-width: 500px;
        margin: 0 auto;
    }

    .page_box .cherry_manners li {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .cherry_manners li em {
        width: calc(44 / 670 * 100%);
        font-size: 2rem;
    }

    .cherry_manners li span {
        width: calc(610 / 670 * 100%);
        font-size: 1.4rem;
    }

    .big .cherry_manners li span {
        font-size: calc(1.4rem * 1.2);
    }

    .small .cherry_manners li span {
        font-size: calc(1.4rem * 0.8);
    }

    .page_box_btn a {
        width: calc(280 / 670 * 100%);
        padding: 0.6em 2.3em;
        font-size: 1.4rem;
    }

    .big .page_box_btn a {
        font-size: calc(1.4rem * 1.2);
    }

    .small .page_box_btn a {
        font-size: calc(1.4rem * 0.8);
    }

    .cherry_barbecue .page_box_btn {
        margin: 0 0 calc(45 / 670 * 100%);
    }

    .cherry_bnr {
        margin: 0 0 calc(20 / 670 * 100%);
    }

    .cherry_bnr a {
        padding: calc(6 / 670 * 100%);
    }

    .cherry_bnr a:hover {
        opacity: 0.7;
    }
}

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

}

.page_box .redbold {
  color: red;
  font-weight: bold;
  font-size: 2.8rem;
}

@media screen and (min-width: 768px) {
  .page_box .redbold {
    font-size: 1.6rem;
  }
}