@charset "utf-8";
/* CSS Document */


/* kv
   ================================================================== */
.kv{
	margin: 0 0 0;
	position: relative;
    background-image: url("../images/kv/frame.svg");
	background-repeat: no-repeat;
	background-position: center 0;
	background-size: 100%;
}

.kv .top{
	position: relative;
    z-index: 1;
}

.kv .top .inner{
	padding-top: 3vw;
}

.kv .site_logo{
	margin: 0 auto;
    width: 22vw;
    line-height: 0;
}

.kv .main{
	margin: 0 auto;
    width: 100%;
    line-height: 0;
}

.kv .product{
	margin: -49vw auto 0;
    width: 70vw;
}

.kv .color_bg{
	margin: -15vw auto 0;
    padding: 20vw 0 0;
    position: relative;
    background: #2390F7;
}

.kv .color_bg:before{
	content: "";
    background-image: url("../images/kv/wave.svg");
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 100%;
	width: 100%;
	height: 8vw;
	position: absolute;
	bottom: 100%;
	left: 0;
}

.kv .color_bg .text{
	font-size: 4.5vw;
    line-height: 200%;
    color: #fff;
    font-weight: 700;
    text-align: center;
}

.kv .color_bg .catch{
	margin: 5vw auto 0;
    width: 80vw;
}

.kv .period_box{
	margin: 8vw auto 0;
    padding: 8vw 1vw 5vw;
    border: 4px solid #FF6700;
    background: #fff;
    border-radius: 10px;
    position: relative;
    z-index: 2;
}

.kv .period_box .ttl{
    margin: auto;
	position: absolute;
    top: -5vw;
    left: 0;
    right: 0;
    text-align: center;
}

.kv .period_box .ttl > span{
    padding: 0 3vw;
    width: auto;
    height: 10vw;
    font-size: 5vw;
    color: #fff;
    font-weight: 700;
    text-align: center;
    background: #FF6700;
    border-radius: 10px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.kv .period_box p{
    margin: 0 0 0;
    /*font-size: 5vw;*/
    font-size: 3.9vw;
    font-weight: 700;
    text-align: center;
}

.kv .bottom_bg{
    margin: -10vw 0 0;
    line-height: 0;
    position: relative;
    z-index: 1;
}


/* about
   ================================================================== */
.about{
	margin: 0 0 0;
    padding: 20vw 0;
	position: relative;
}

.about .text{
    font-weight: 700;
    text-align: center;
}

.about .photos{
	margin: 3vw 0;
    line-height: 0;
}

.about .photos li{
    line-height: 0;
}

.about .anime_btn{
    margin: 15vw 0 0;
}

.about .tsushima{
    margin: 15vw 0 0;
}

.about .tsushima .ttl{
    padding: 0 0 5vw;
	font-size: 4.5vw;
    line-height: 200%;
    font-weight: 700;
    text-align: center;
    background-image: url("../images/about/title_item.svg");
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 100%;
}

.about .tsushima .banner{
    margin: 1vw 0 0;
    line-height: 0;
}

.about .tsushima .banner .box{
    display: block;
    line-height: 0;
}


/* participation
   ================================================================== */
.participation{
	margin: 0 0 0;
    padding-bottom: 15vw;
}

.participation .list{
	margin: 0 0 0;
    border-radius: 10px;
    overflow: hidden;
    background: #CBEAFF;
}

.participation .list > li{
	padding: 6vw 1vw;
    text-align: center;
    font-weight: 700;
    position: relative;
}

.participation .list .siz_l{
	font-size: 6vw;
}

.participation .list > li:before{
	content: "";
    margin: auto;
	background: #CBEAFF;
    height: calc(tan(60deg) * 7vw / 2);
    width: 40vw;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
	position: absolute;
	top: calc(100% - 1px);
	left: 0;
    right: 0;
    z-index: 1;
}

.participation .list > li:nth-child(2):before,
.participation .list > li:nth-child(2){
	background: #EBF7FF;
}

.participation .list > li:nth-child(3){
	background: #fff;
}

.participation .list > li:nth-child(3):before{
	display: none;
}


/* to_video
   ================================================================== */
.to_video{
	padding: 20vw 0;
}

.to_video .movie{
	margin: 0 0 0;
    line-height: 0;
}

.movie > *{
	width: 100%;
}

.movie > iframe{
	height: 50vw;
}

.movie .thm{
	background: #fff;
    position: relative;
    z-index: 1;
}

.movie .thm a{
	display: block;
    line-height: 0;
}

.movie .thm a img{
	width: 100%;
}

.to_video .balloon{
    margin: -7vw -2vw 0;
	padding: 15vw 6vw 10vw;
    box-sizing: border-box;
    background-image: url("../images/to_video/webp/balloon.webp");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% 100%;
}

.to_video .balloon p{
    font-weight: 700;
}

.to_video .photo{
    margin: 8vw auto 0;
    width: 80%;
}

.sns_list{
    margin: 15vw 0 0;
}

.sns_list .ttl{
    font-size: 8vw;
    font-weight: 700;
    font-family: 'Zen Maru Gothic';
    letter-spacing: 0;
    text-align: center;
}

.sns_list .list{
    margin: 6vw 0 0;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,.16);
}

.sns_list .list li{
    border-top: 1px solid #ccc;
}

.sns_list .list li:first-child{
    border-top: none;
}

.sns_list .list .box{
    padding: 5vw 3vw 5vw 16vw;
    font-size: 5vw;
    font-weight: 700;
    display: flex;
    align-items: center;
}

.sns_list .list .box img{
    margin-right: 3vw;
    width: 8vw;
}

.sns_list .note{
    margin: 5vw 0 0;
    font-size: 3.5vw;
    font-weight: 400;
    text-align: center;
}


/* what
   ================================================================== */
.what{
	margin: 0 0 0;
}

.what .block_title{
    margin: 0 -7vw;
	white-space: nowrap;
}

.what .product{
    margin: 0 auto;
    width: 80%;
}

.what p{
    margin: 6vw 0 0;
    font-weight: 700;
    color: #fff;
}

.what .anime_btn{
    margin: 10vw 0 0;
}

.what .anime_btn + .anime_btn{
    margin: 4vw 0 0;
}


/* about_character
   ================================================================== */
.about_character{
	padding: 20vw 0 0;
    overflow: hidden;
}

.about_character .bottom{
	padding: 8vw 0 20vw;
    background-image: url("../images/about_character/webp/bg.webp");
	background-repeat: no-repeat;
	background-position: center 0;
	background-size: cover;
}

.about_character .bottom .ttl{
	text-align: center;
}

.about_character .bottom .ttl > span{
	display: block;
}

.about_character .bottom .ttl > span + span{
	margin: 1.5vw 0 0;
}

.about_character .bottom .ttl > span > span{
    padding: 2vw 2vw;
    font-size: 5vw;
    line-height: 1;
    font-weight: 700;
    color: #0538A3;
    background: #fff;
	display: inline-block;
}

.about_character .bottom .character_box{
    padding: 32vw 0 0;
    position: relative;
    line-height: 0;
    text-align: center;
}

.about_character .bottom .character_box .character{
    width: 40vw;
}

.about_character .bottom .character_box .tree{
    width: 40vw;
    position: absolute;
    bottom: 5vw;
}

.about_character .bottom .character_box .left{
    left: -15vw;
}

.about_character .bottom .character_box .right{
    right: -15vw;
}

.about_character .bottom .list{
    margin: 8vw 0 0;
    padding: 2vw 5vw 5vw;
    background: #fff;
    border-radius: 10px;
}

.about_character .bottom .list > li{
    margin: 3vw 0 0;
    padding: 0 0 0 6vw;
    font-weight: 700;
    position: relative;
}

.about_character .bottom .list > li:before{
	content: "";
	background: #FF6700;
	width: 4vw;
	height: 4vw;
	position: absolute;
	top: 2.6vw;
	left: 0;
    border-radius: 50px;
}


/* tried
   ================================================================== */
.tried{
	margin: 0 0 0;
}

.tried .movie{
    margin: 0;
}

.tried .note{
    margin: 3vw 0 0;
    font-weight: 700;
    color: #fff;
    text-align: center;
}


/* precautions
   ================================================================== */
.precautions{
	padding: 20vw 0 0;
}

.precautions .title{
	font-size: 5vw;
    font-weight: 700;
    text-align: center;
}

.precautions .title + p{
    margin: 3vw auto 0;
    width: 90%;
	font-size: 3.0vw;
}

.precautions .btn_ttl{
    margin: 8vw 0 0;
	font-size: 3.6vw;
    font-weight: 700;
    text-align: center;
}

.precautions .anime_btn{
    margin: 6vw auto 0;
}


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


    /* kv
       ================================================================== */
    .kv{
        margin: 0 0 0;
    }

    .kv .top .inner{
        padding-top: 30px;
    }

    .kv .site_logo{
        margin: 0 auto;
        width: 170px;
    }

    .kv .main{
        margin: 0 auto;
    }

    .kv .product{
        margin: -374px auto 0;
        width: 530px;
    }

    .kv .color_bg{
        margin: -40px auto 0;
        padding: 100px 0 0;
    }

    .kv .color_bg:before{
        height: 134px;
    }

    .kv .color_bg .text{
        font-size: 36px;
        line-height: 80px;
    }

    .kv .color_bg .catch{
        margin: 60px auto 0;
        width: 577px;
    }

    .kv .period_box{
        margin: 76px auto 0;
        padding: 68px 10px 50px;
    }

    .kv .period_box .ttl{
        top: -35px;
    }

    .kv .period_box .ttl > span{
        padding: 0 30px;
        height: 70px;
        font-size: 40px;
    }

    .kv .period_box p{
        /*font-size: 40px;*/
        font-size: 31px;
    }

    .kv .bottom_bg{
        margin: -66px 0 0;
    }


    /* about
       ================================================================== */
    .about{
        padding: 200px 0 120px;
    }

    .about .text{
        line-height: 80px;
    }

    .about .photos{
        margin: 40px 0;
    }

    .about .anime_btn{
        margin: 120px 0 0;
    }

    .about .tsushima{
        margin: 120px 0 0;
    }

    .about .tsushima .ttl{
        padding: 0 0 40px;
        font-size: 36px;
        line-height: 72px;
    }

    .about .tsushima .banner{
        margin: 10px 0 0;
    }


    /* participation
       ================================================================== */
    .participation{
        padding-top: 255px;
        padding-bottom: 120px;
    }

    .participation .list{
        margin: 0 0 0;
        border-radius: 10px;
        overflow: hidden;
        background: #CBEAFF;
    }

    .participation .list > li{
        padding: 38px 10px;
        line-height: 72px;
    }

    .participation .list .siz_l{
        font-size: 44px;
    }

    .participation .list > li:before{
        height: calc(tan(60deg) * 37px / 2);
        width: 220px;
    }


    /* to_video
       ================================================================== */
    .to_video{
        padding: 200px 0 180px;
    }

    .to_video .movie{
        margin: 0 0 0;
    }

    .movie > iframe{
        height: 387px;
    }

    .to_video .balloon{
        margin: -40px -20px 0;
        padding: 100px 40px 80px;
    }

    .to_video .balloon p{
        line-height: 68px;
    }

    .to_video .photo{
        margin: 40px auto 0;
        width: 580px
    }

    .sns_list{
        margin: 120px 0 0;
    }

    .sns_list .ttl{
        font-size: 56px;
    }

    .sns_list .list{
        margin: 40px 0 0
    }

    .sns_list .list .box{
        padding: 36px 10px 36px 150px;
        font-size: 40px;
    }

    .sns_list .list .box img{
        margin-right: 20px;
        width: 60px;
    }

    .sns_list .note{
        margin: 65px 0 0;
        font-size: 28px;
    }


    /* what
       ================================================================== */
    .what{
        margin: 0 0 0;
    }

    .what .block_title{
        margin: 0 -50px;
    }

    .what .product{
        width: 530px;
    }

    .what p{
        margin: 60px 0 0;
        line-height: 73px;
    }

    .what .anime_btn{
        margin: 84px 0 0;
    }

    .what .anime_btn + .anime_btn{
        margin: 40px 0 0;
    }


    /* about_character
       ================================================================== */
    .about_character{
        padding: 200px 0 0;
    }

    .about_character .bottom{
        padding: 60px 0 200px;
    }

    .about_character .bottom .ttl > span + span{
        margin: 8px 0 0;
    }

    .about_character .bottom .ttl > span > span{
        padding: 14px 30px;
        font-size: 40px;
    }

    .about_character .bottom .character_box{
        padding: 286px 0 0;
    }

    .about_character .bottom .character_box .character{
        width: 325px;
    }

    .about_character .bottom .character_box .tree{
        width: 305px;
        bottom: 65px;
    }

    .about_character .bottom .character_box .left{
        left: -120px;
    }

    .about_character .bottom .character_box .right{
        right: -120px;
    }

    .about_character .bottom .list{
        margin: 60px 0 0;
        padding: 20px 40px 40px;
    }

    .about_character .bottom .list > li{
        margin: 20px 0 0;
        padding: 0 0 0 50px;
        line-height: 68px;
    }

    .about_character .bottom .list > li:before{
        width: 33px;
        height: 33px;
        top: 20px;
    }


    /* tried
       ================================================================== */
    .tried{
        margin: 0 0 0;
    }

    .tried .movie{
        margin: 0;
    }

    .tried .note{
        margin: 40px 0 0
    }


    /* precautions
       ================================================================== */
    .precautions{
        padding: 200px 0 0;
    }

    .precautions .title{
        font-size: 36px;
    }

    .precautions .title + p{
        margin: 40px auto 0;
        width: 90%;
        font-size: 24px;
        line-height: 52px;
    }

    .precautions .btn_ttl{
        margin: 40px 0 0;
        font-size: 28px;
    }

    .precautions .anime_btn{
        margin: 40px auto 0;
    }
    

}