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

　わくわくのトビラ

###################################################################################### */
/* =======================================================
　フレーム・背景
========================================================== */

.pageWakuwaku #ContentsBase{
    position: relative;
    z-index: 1;
}
.pageWakuwaku .contents{
    position: relative;
    z-index: 4;
}

.pageWakuwaku .layer{position: relative; overflow:hidden;}

.pageWakuwaku .layer:before,
.pageWakuwaku .layer:after{
    content: "";
    position: absolute;
    height: 160px;
    width: 100%;
    z-index: 2;
}
.pageWakuwaku .layer:before{
    background-image: linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(245, 212, 214, 1));
}
.pageWakuwaku .layer:after{
    background-image: linear-gradient(0deg, rgba(245, 212, 214, 1), rgba(255, 255, 255, 0));
    bottom: 0;
}

@media print, screen and (min-width: 768px) {

    .pageWakuwaku .cherry  {
        content: "";
        position: absolute;
        top: 10px;
        z-index: -2;
        background:no-repeat top / cover;
    }
    .pageWakuwaku .cherry.before {
        background-image: url("../img/back_l_pc.png");
        width: 362px;
        height: 674px;
        left: -16%;
        animation-delay:0.5s;
    }
    .pageWakuwaku .cherry.after {
        background-image: url("../img/back_r_pc.png");
        width: 245px;
        height: 456px;
        right: -10%;
        animation-delay:1.0s;
    }

    
}
@media screen and (max-width: 767px) {
    .pageWakuwaku .cherry  {
        content: "";
        position: absolute;
        top: 10px;
        z-index: -2;
        background:no-repeat top / cover;
    }
    .pageWakuwaku .cherry.before {
        background-image: url("../img/back_l_pc.png");
        width: 34.61vw;
        height: 63.46vw;
        left: 5%;
        animation-delay:0.5s;
    }
    .pageWakuwaku .cherry.after {
        display: none;
    }
    
    .pageWakuwaku .contents.main{padding-bottom: 3em;}
}


/* =======================================================
　タイトル
========================================================== */
.pageWakuwaku .title{
    display: flex;
}

@media print, screen and (min-width: 768px) {
    .pageWakuwaku .contents.main{max-width: 1040px!important; padding: 50px 20px;}
    .pageWakuwaku .title{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .pageWakuwaku .title .miyako img{
        width: 424px;
        height: 100px;
    }
    
    .pageWakuwaku .title .miyako{margin-right: 2em;}
    .pageWakuwaku .title .invate {animation-duration: 0.5s; animation-delay:1.5s;}
    
}
@media screen and (max-width: 767px) {
    .pageWakuwaku .title{
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 2.2em 0;
    }
    
    .pageWakuwaku .title .miyako{width: 47.69vw; margin: 0 auto;}
    .pageWakuwaku .title .invate{width: 56.53vw; margin: 1.8em auto 0;}
}

/* =======================================================
　リード
========================================================== */
.pageWakuwaku .lead{text-align: center; letter-spacing: 0.1em;}
.pageWakuwaku .lead .red{color: #b31c22; font-weight: bold;}
@media print, screen and (min-width: 768px) {
    .pageWakuwaku .lead{margin-top: 1.5em; font-size: 1.8rem;}
    .pageWakuwaku .lead .small{font-size: 1.4rem;}
    .pageWakuwaku .lead .red{font-size: 2.0rem;}
}
@media screen and (max-width: 767px) {
    .pageWakuwaku .lead{margin-top: 1em; font-size: 1.8rem;}
    .pageWakuwaku .lead p{line-height: 1.5;}
    .pageWakuwaku .lead .small{font-size: 1.4rem;}
    .pageWakuwaku .lead .red{font-size: 2.0rem; display: block; margin-top: 0.2em;}
}

/* =======================================================
　応募ボタン
========================================================== */
.pageWakuwaku .buttonBox{margin-top: 2.45em;}

.pageWakuwaku .button{
    width: 100%;
    color: #fff;
    font-weight: bold;
    letter-spacing: 0.1em;
    border-radius: 0.3em;
    padding: 0.93em 0;
}

.pageWakuwaku .button.red{background: #d2145a; border:none;}
.pageWakuwaku .button.red:hover{background: #bf272d;}
.pageWakuwaku .button.arrow:after{
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    width: 0.3em;
    height: 0.3em;
    
}

.pageWakuwaku .button.disabled{
    pointer-events: none;
    cursor: default;
    background: #acacac;
    color: #dfdfdf;
}

.pageWakuwaku .button.disabled.arrow:after{
    border-right: 2px solid #dfdfdf;
    border-bottom: 2px solid #dfdfdf;
    width: 0.3em;
    height: 0.3em;
    
}

@media print, screen and (min-width: 768px) {
    .pageWakuwaku .buttonBox .button.red{font-size: 2.8rem;}
    .pageWakuwaku .buttonBox .button.red .small{font-size: 2.0rem;}
    
    .pageWakuwaku .textBox + .buttonBox{margin-top: 4.3em;}
}
@media screen and (max-width: 767px) {
    .pageWakuwaku .button{padding: 0.5em 0;}
    .pageWakuwaku .buttonBox .button.red{font-size: 2.8rem;letter-spacing: 0.2em;}
    .pageWakuwaku .buttonBox .button.red .small{display: block;font-size: 2.0rem; margin-top: 0.3em; letter-spacing: 0.05em;}
    .pageWakuwaku .buttonBox .button.arrow:after{right: 1em;}
    
    .pageWakuwaku .textBox + .buttonBox{margin-top: 2.2em;}
}



/* =======================================================
　メインイメージ
========================================================== */

@media print, screen and (min-width: 768px) {
    .pageWakuwaku .mainImage{margin-top: 2.1em;}
}
@media screen and (max-width: 767px) {
    .pageWakuwaku .mainImage{margin-top: 2.8em;}
}

/* =======================================================
　テキスト
========================================================== */

@media print, screen and (min-width: 768px) {
    .pageWakuwaku .textBox{margin-top: 2.1em;}
    .pageWakuwaku .textBox{
        width: 700px;
        margin: 0 auto;
        margin-top: 4.3em;
    }
    
    .pageWakuwaku .textBox .text{
        line-height: 1.8;
        font-size: 1.6rem;
        letter-spacing: 0.16em;
        margin: 1em 0;
    }
}
@media screen and (max-width: 767px) {
    .pageWakuwaku .textBox{margin-top: 3.8em;}
    .pageWakuwaku .textBox .logo{text-align: center;}
    .pageWakuwaku .textBox .text{
        line-height: 1.8;
        font-size: 1.6rem;
        letter-spacing: 0.06em;
        margin: 1.25em 0  1.9em ;
    }
    
}

/* =======================================================
　ページトップボタン
========================================================== */
.pageWakuwaku .pageTop{
    text-align: center;
}

@media print, screen and (min-width: 768px) {
    .pageWakuwaku .pageTop{margin-top: 3.55em;}
}
@media screen and (max-width: 767px) {
    .pageWakuwaku .pageTop{margin-top: 4.3em;}
}