.contents-block{
    margin: 3em auto;
}
.contents-box{
    margin: 2em auto;
    position: relative;
}
h1.sp-txt{
        margin: 3em auto;
    text-align: center;
            font-size: 2.5em;
        color: #ffffff;
}
h2{
    font-size: 1.7em;
    display: flex;
    flex-wrap: wrap;
    margin: auto 1em;
}
h2 span{
    width: 100%;
}
h2 span.ttl-main{
    font-size: 1.4em;
    background: linear-gradient(transparent 60%, #ff6 60%);
    width: auto;
}
@media screen and (max-width: 749px){
    h1.sp-txt{
    font-size: 1.5em;
    margin: 0.5em auto;
}
    h2{
    font-size: 1em;
    margin: 1em;
    }
}

/************************************
** about
************************************/

.about-img{
    position: absolute;
    top: -60px;
    right: 0;
    width: 10em;
}
#about .contents-block{
    border: double;
    background-color: #ffffff;
    padding: 2em;
}
.sp-about-txt h2{
    font-size: 1.4em;
    text-align: center;
}
.sp-about-txt p{
        margin: 1em;
}

@media screen and (max-width: 749px){
    .about-img{
    top: auto;
    width: 6em;
    bottom: -40px;
}
    #about .contents-block{
        padding:0;
    }
    .sp-about-txt h2{
    font-size: 1.1em;
}
}
/************************************
** movie
************************************/
.movie ul li{
    list-style: disc;
    color: #ffffff;
    font-size: 1.1em;
    margin-left: 1em;
}
.movie p{
    color: #ffffff;
    font-size: 1.8em;
    text-align: center;
    line-height: 3em;
    font-weight: bold;
}

@media screen and (max-width: 749px){
    .movie p{
        font-size: 1.2em;
    line-height: inherit;
    margin-top: 1em;
    }
    .movie iframe{
        height: 250px;
    }
}

/************************************
** read
************************************/
.reason{
        background-color: #f2efbd;
            padding-bottom: 5em;
                overflow: hidden;
}
.read .contents-box{
    margin: 7em auto;
}
.read-ttl{
    display: flex;
    align-items: center;
    margin: 2em auto;
}
.read-img{
    width: 25em;
}
.read-ttl img{
    width: 8em;
}
.swiper-slide{
    margin: 1em;
}
.swiper-button-next, .swiper-button-prev{
        top: auto!important;
    bottom: 0;
}
.swiper-wrapper{
    padding-bottom: 5em;
}
.swiper-slide img{
        width: 100%;
    height: 20em;
    object-fit: contain;
}

@media screen and (max-width: 749px){
    .read .contents-box{
        margin: 3em auto;
        width: 100%;
        overflow: hidden;
        padding-bottom: 4em;
    }
    .watch .contents-box{
        margin: 3em auto;
        width: 100%;
        overflow: hidden;
        padding-bottom: 4em;
    }
    .search .contents-box{
        margin: 3em auto;
        width: 100%;
        overflow: hidden;
        padding-bottom: 4em;
    }
    .read-img{
            width: 100%;
    }
    .read-ttl{
            align-items: flex-start;
    }
    .read-ttl img{
        width: 5em;
    }
    .swiper-slide img{
    height: auto;
    }
    .swiper-wrapper{
        padding-bottom: 0;
    }
    .swiper-slide{
        margin: 0 auto;
    }
}

/************************************
** watch
************************************/
.watch .read-ttl{
    justify-content: flex-start;
}

/************************************
** home
************************************/
#home{
        padding-top: 2em;
    margin-bottom: 15em;
}
#home a{
    background-color: #ffffff;
    color: #2ca070;
    padding: 1em 2em;
    border-radius: 24px;
    margin: auto;
    text-align: center;
    display: block;
    width: 50%;
    font-weight: bold;
}

@media screen and (max-width: 749px){
    #home a{
        width: auto;
    }
}