@charset "UTF-8";
/* ######################################################################################

　トップページ　ファーストビューの要素

###################################################################################### */
/* ====================================================
    メインイメージ
==================================================== */
.mainImg {position: relative;}
.mainImg .slickSlider img{width: 100%;}

@media print, screen and (min-width: 768px) {
    .mainImg{
        height: 570px;    
    }
    .mainImg:before{
        content: "";
        position: absolute;
        top: 0;
        left: calc(50% - 432px);
        width: 177px;
        height: 100%;
        background: rgba(255, 255, 255, 0.85);
        z-index: 1;
    }
    .mainImg-copy {
        position: absolute;
        top: 0;
        left: calc(50% - 470px);
        z-index: 2;
    }
    .mainImg .slickSlider img{
        width: 100%;
        height: 570px;
    }
}
@media screen and (max-width: 767px) {
    .mainImg{
        height: 66.666vw;    
    }
    .mainImg:before{
        content: "";
        position: absolute;
        top: 0;
        left: 4.5%;
        width: 21.8%;
        height: 100%;
        background: rgba(255, 255, 255, 0.85);
        z-index: 1;
    }
    .mainImg-copy {
        position: absolute;
        top: 3.5%;
        left: 1%;
        z-index: 2;
        width: 32%;
    }
    .mainImg .slickSlider img{
        width: 100%;
        height: 66.666vw;
    }
}


/* ====================================================
    contents01：園⻑・副園長からのメッセージ
==================================================== */
@media screen and (max-width: 767px) {
    .wallBelt.contents01 {padding-bottom: 0;}
}

/* youtubeList
-------------------------------------*/
.wallBelt.contents01 .youtubeList li{position: relative; height: 100%;}
.wallBelt.contents01 .youtubeList li .youtube {position: relative;}
.wallBelt.contents01 .youtubeList li p + p{margin-top: 1.5em;}
.wallBelt.contents01 .youtubeList li p{
    line-height: 1.625;
    font-feature-settings: "palt";
}
.wallBelt.contents01 .youtubeList li .name{margin-bottom: 0; text-align: center;}

@media print, screen and (min-width: 768px) {
    .wallBelt.contents01 .youtubeList li{
        border-radius: 20px;
        padding: 25px 100px;
    }
    .wallBelt.contents01 .youtubeList li + li{margin-top: 70px;}
    .wallBelt.contents01 .youtubeList li .youtubeTitle{
        padding: 0.5em;
        text-align: center;
        border-radius: 15px;
    }
    .wallBelt.contents01 .youtubeList li .name{margin-top: 1em; }
    .wallBelt.contents01 .youtubeList li p{font-size: 20px; line-height: 1.55;}
}
@media screen and (max-width: 767px) {
    .wallBelt.contents01 .youtubeList{margin-left: -15px; margin-right: -15px;}
    .wallBelt.contents01 .youtubeList li{padding: 10px 15px;}
    .wallBelt.contents01 .youtubeList li + li{margin-top: 30px;}
    .wallBelt.contents01 .youtubeList li .youtubeTitle{
        margin-bottom: 0.5em;
        padding: 0.25em 0.25em 0.4em;
        text-align: center;
        font-size: 14px;
        border-radius: 8px;
    }
    .wallBelt.contents01 .youtubeList li p{margin-bottom: 0.5em; font-size: 1.4rem;}
	.wallBelt.contents01 .moreWarp .cp_container,
	.wallBelt.contents01 .moreWarp .cp_container p{font-size: 1.4rem; line-height: 1.625; font-feature-settings: "palt";}
    .wallBelt.contents01 .youtubeList li .youtubeTitle img{height: 14px; width: auto;}
    .wallBelt.contents01 .youtubeList li .name{margin-top: 0.65em;}
    .wallBelt.contents01 .youtubeList li .name img{height: 33px; width: auto;}
}
@media screen and (max-width: 370px) {
    .wallBelt.contents01 .youtubeList li .youtubeTitle img{width: 100%; height: auto;}
}

/* 色 */
.wallBelt.contents01 .youtubeList li.purple{background: #d5b984;}
.wallBelt.contents01 .youtubeList li.purple .youtubeTitle{background: #fbf4e7;}

.wallBelt.contents01 .youtubeList li.pink{background: #e9c1bc;}
.wallBelt.contents01 .youtubeList li.pink .youtubeTitle{background: #F7E6E5;}


@media print, screen and (min-width: 768px) {
    .wallBelt.contents01 .youtubeList li.purple:after{
        bottom: -40px;
        left: 70px;
        width: 78px;
        height: 102px;
    }   
}
@media screen and (max-width: 767px) {
    .wallBelt.contents01 .youtubeList li.purple:after{
        bottom: -20px;
        left: 10px;
        width: 39px;
        height: 51px;
    }   
}