@charset "UTF-8";


/* 全体の構成 */
.content{
    background-color: #FFF;
    box-sizing: border-box;
}
.content *{
    box-sizing: border-box;
}
.content img{
    display: block;
}

/* 汎用 */
.area_container{
    position: relative;
    padding: 12vw 5.3333vw 21.3334vw;
}
.area_title img{
    position: absolute;
    top: -6.6666vw;
    left: 50%;
    transform: translateX(-50%);
    height: 13.3332vw;
}
.area_news{
    display: block;
    width: 100%;
    height: 69.3333vw;
    margin: 0 auto;
    position: relative;
}
.area_news + .area_news{
    margin-top: 6.6666vw;
}
.area_news img{
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
    border-radius: 1.08vw;
}
.area_news .area_news_btn,
.area_news_column .area_news_btn{
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
    padding: 4.2666vw 4vw 2.9334vw;
    background-color: #F04E98;
    font-size: 3.777vw;
    font-weight: bold;
    color: #FFF;
    line-height: 1;
    z-index: 0;
    border-radius: 0 0 2.6666vw 2.6666vw;
}
.area_news .area_news_btn:after,
.area_news_column .area_news_btn:after {
    font-family: "Font Awesome 5 Pro";
    content: "\f054";
    position: absolute;
    right: 2.6666vw;
    bottom: 3.2vw;
    font-size: 1.3rem;
    font-weight: 400;
}
.area_news_column_wrap{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 7.7334vw 0;
    margin: 0 auto;
    position: relative;
}
.area_news_column{
    position: relative;
    display: block;
    width: 43.0666vw;
    height: 69.3333vw;
}
.area_news_column img{
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}
.area_text_none{
    font-family: "メイリオ", Meiryo, "Noto Sans JP", sans-serif;
    font-size: 5.0666vw;
    font-weight: bold;
    line-height: 1.421;
    color: #F04E98;
    text-align: center;
    margin: 6.1334vw auto 0;
}
.area_text_caution {
    width: 80vw;
    margin: 0 auto;
}
.area_text_caution li{
    font-size: 2.9333vw;
    line-height: 1.5454;
    color: #3F2021;
    margin: 0 auto;
    text-indent: -1em;
    padding-left: 1em;
    text-align: justify;
}
.area_text_caution + .area_news_column_wrap{
    margin-top: 6.1334vw;
}

/* トップエリア */
.top_area{
    background-color: #FFF4ED;
    padding: 4.5334vw 0 10.2666vw;
}
.top_area h1 .top_title{
    width: 80vw;
    margin: 0 auto;
}
.top_area .top_main{
    width: 100%;
    margin: 4vw auto 0;
}
.top_area p{
    font-size: 3.777vw;
    font-weight: bold;
    line-height: 1.5;
    color: #F04E98;
    text-align: center;
    margin: 0 auto;
}

/* ピックアップ */
.pickup_area{
    background-color: #FDE0ED;
}
.pickup_area .area_title img{
    width: 53.6vw;
}

/* サービス */
.service_area{
    background-color: #DEF5F9;
}
.service_area .area_title img{
    width: 44.2666vw;
}

/* 商品 */
.product_area{
    background-color: #E1D4F0;
}
.product_area .area_title img{
    width: 33.6vw;
}

/* コンテンツ */
.content_area{
    background-color: #FDE0ED;
}
.content_area .area_title img{
    width: 49.6vw;
}
.area_subtitle{
    width: 26.9334vw;
    margin: 9.6vw auto 0;
}
.area_subtitle img{
    width: 100%;
}
.area_movie{
    width: 100%;
    margin: 6vw auto 0;
}
/* .area_movie + .area_movie{
    margin: 7.4666vw auto 0;
} */
.area_movie span{
    display: block;
    font-size: 3.777vw;
    font-weight: bold;
    line-height: 1;
    color: #F04E98;
    text-align: center;
}
.area_movie span{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "メイリオ", Meiryo, "Noto Sans JP", sans-serif;
    font-size: 3.777vw;
    font-weight: bold;
    line-height: 1;
    color: #F04E98;
    text-align: center;
}
.area_movie span:before {
    content: "";
    display: block;
    height: 0.2vw;
    width: 5.3334vw;
    margin-right: 5.8668vw;
    background-color: #F04E98;
}
.area_movie span:after {
    content: "";
    display: block;
    height: 0.4vw;
    width: 5.3334vw;
    margin-left: 5.8668vw;
    background-color: #F04E98;
}
.area_movie iframe{
    width: 100%;
    height: 50.8vw;
    border-radius: 2.6666vw;
    margin-top: 3.7334vw;
}

/* コラボレーション */
.collaboration_area{
    background-color: #DEF5F9;
}
.collaboration_area .area_title img{
    width: 68.2666vw;
}

/* 働くお母さんへ */
.mother_area{
    padding: 12vw 5.3333vw 13.3334vw;
    background-color: #E1D4F0;
}
.mother_area .area_title img{
    width: 61.6vw;
}
.area_text_note{
    font-size: 2.9333vw;
    line-height: 1.5454;
    color: #3F2021;
    margin: 5.8666vw auto 0;
}

@media print, screen and (min-width: 768px) {
    /* 全体の構成 */
    main {
        position: relative;
        z-index: 0;
    }
    main:before {
        content: "";
        display: block;
        position: fixed;
        top: 100px;
        left: 0;
        width: 100%;
        height: 100vh;
        background: url(../img/forfamily_bg.jpg) top center no-repeat;
        background-size: cover;
        z-index: -1;
        pointer-events: none;
    }
    footer {
        position: relative;
        z-index: 1;
    }
    .content{
        position: relative;
        padding-bottom: 0;
        width: 540px;
        margin: 0 auto;
        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.5);
    }

    /* 汎用 */
    .area_container{
        padding: 65px 29px 115px;
    }
    .area_title img{
        top: -36px;
        height: 72px;
    }
    .area_news{
        height: 374px;
    }
    .area_news + .area_news{
        margin-top: 36px;
    }
    .area_news img {
        border-radius: 5px;
    }
    .area_news .area_news_btn,
    .area_news_column .area_news_btn{
        padding: 23px 22px 16px;
        font-size: 20px;
        border-radius: 0 0 14px 14px;
    }
    .area_news .area_news_btn:after,
    .area_news_column .area_news_btn:after{
        right: 14px;
        bottom: 17px;
    }
    .area_news_column_wrap{
        gap: 42px 0;
    }
    .area_news_column{
        width: 233px;
        height: 374px;
    }
    .area_text_none{
        font-size: 27px;
        margin: 33px auto 0;
    }

    .area_text_caution {
        width: 432px;
    }
    .area_text_caution li{
        font-size: 15.84px;
    }
    .area_text_caution + .area_news_column_wrap{
        margin-top: 33.13px;
    }

    /* トップエリア */
    .top_area{
        padding: 24px 0 55px;
    }
    .top_area h1 .top_title{
        width: 432px;
    }
    .top_area .top_main{
        margin: 22px auto 0;
    }
    .top_area p{
        font-size: 20px;
    }

    /* セクションタイトル */
    .pickup_area .area_title img{
        width: 289px;
    }
    .service_area .area_title img{
        width: 239px;
    }
    .product_area .area_title img{
        width: 181px;
    }
    .content_area .area_title img{
        width: 268px;
    }
    .collaboration_area .area_title img{
        width: 369px;
    }
    .mother_area .area_title img{
        width: 333px;
    }

    /* コンテンツ */
    .area_subtitle{
        width: 145px;
        margin: 6.9333vw auto 0;
    }
    .area_movie{
        margin: 32px auto 0;
    }
    .area_movie span{
        font-size: 20px;
    }
    .area_movie span:before{
        height: 1px;
        width: 29px;
        margin-right: 32px;
    }
    .area_movie span:after{
        height: 2px;
        width: 29px;
        margin-left: 32px;
    }
    .area_movie iframe{
        height: 274px;
        border-radius: 14px;
        margin-top: 20px;
    }

    /* 働くお母さんへ */
    .mother_area{
        padding: 65px 29px 72px;
    }
    .area_text_note{
        font-size: 16px;
        margin: 32px auto 0;
    }

}