@charset "utf-8";
body{
    background-color: #38b549;
}

.sectionName{
    font-size: 50px;
    margin-bottom: 0;
    color: #fff;
}


header{
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;     /*調べました　z-index ：値が大きいほど前面に表示される*/
}
header img{
    width: 150px;
    margin-right: 50px;
}
header nav{
    display: flex;
    justify-content: space-around;
}
header nav a{
    padding-right: 8px;
    text-decoration: none;
    font-weight: bold;
    display: block;
    font-size: 20px;
    color: #ffde2e;
}
header nav a:last-child{
    padding-left: 0;
}
header .icon{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-left: 50px;
}
header .icon a{
    padding-right: 8px;
}
header .icon a:last-child{
    padding-left: 0;
}
header .icon .youtube,
header .icon .tiktok,
header .icon .insta{
    background-repeat: no-repeat;
    background-size: contain;
    width: 40px;
    height: 40px;
    display: block;
}
header .icon .youtube{
    background-image: url(../images/header/icon_youtube.svg);
}
header .icon .tiktok{
    background-image: url(../images/header/icon_tiktok.svg);
}
header .icon .insta{
    background-image: url(../images/header/icon_insta.svg);
}
header .icon .youtube span,
header .icon .tiktok span,
header .icon .insta span{
    display: none;
}

main{
    padding-top: 40px;
}


/*index*/
.index{
    height: 460px;
    position: relative;
}
img.slideBack{
    position: absolute;
    width: 2000px;
    top: -690px;
    left: 50%;
    margin-left: -1000px;
}
.slide{
    position: relative;
    margin: auto;
    height: 500px;
    overflow: hidden;       /*調べました　overflow:　横方向にあふれた場合の表示方法を制限する。　hidden:　隠す*/
}
img.slideHead{
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -225px;
    width: 450px;
}
.slideBtn{
    position: absolute;
    top: 40px;
    left: 50%;
    margin-left: -440px;
    width: 880px;
    z-index: 8;
}
.slideBtn .slide1,
.slideBtn .slide2,
.slideBtn .slide3,
.slideBtn .slide4,
.slideBtn .slide5,
.slideBtn .slide6{
    background-repeat: no-repeat;
    background-size: contain;
    width: 60px;
    height: 60px;
    margin: 15px;
    display: block;
    border: none;
    cursor: pointer;
}
.slideBtn .slide1{
    background-image: url(../images/index/btn1_on.svg);
    width: 70px;
    height: 70px;
    margin: 10px;
}
.slideBtn .slide2{
    background-image: url(../images/index/btn2_off.svg);
}
.slideBtn .slide3{
    background-image: url(../images/index/btn3_off.svg);
}
.slideBtn .slide4{
    background-image: url(../images/index/btn4_off.svg);
}
.slideBtn .slide5{
    background-image: url(../images/index/btn5_off.svg);
}
.slideBtn .slide6{
    background-image: url(../images/index/btn6_off.svg);
}
img.slideImg{
    position: absolute;
    top: 90px;
    left: 50%;
    margin-left: -275px;
    width: 550px;
    z-index: 9;
}

.about{
    position: relative;
    height: 400px;
    background-color: #009247;
    padding: 100px;
    color: #fff;
    text-align: center;
    font-weight: bold;
    z-index: 7;
}
.about h3{
    margin-top: 0;
}
.about p{
    padding: 8px;
}
img.couple{
    position: absolute;
    width: 300px;
    bottom: 0;
    right: -0;
}

.menu{
    text-align: center;
    padding: 60px 0;
}

.menu ul{
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
}
.menu ul li{
    padding-right: 30px;
}
.menu ul li:last-child{
    padding-right: 0;
}
.menu ul li a{
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 15px 25px;
    font-size: 20px;
    font-weight: bold;
    border-radius: 40px;
    color: #fff;
}

.menu ul li a:hover{
    box-shadow: 0px 6px 12px rgba(0,0,0,0.2); /*調べました　box-shadow ：横方向のズレ 縦方向のズレ ぼかし 色*/
}
.menu ul li a.menuChara{
    background-color: #35b1f4;
    border-bottom: 10px solid #175171;
}
.menu ul li a.menuYoutube{
    background-color: #ed3d3d;
    border-bottom: 10px solid #5f1515;
}
.menu ul li a.menuTiktok{
    background-color: #8f48ed;
    border-bottom: 10px solid #3d196c;
}

.contact{
    height: 600px;
    position: relative;
    width: 100%;
    margin-top: 70px;
    color: #6d6225;
}
.contactImg{
    height: 100%;
    width: 100%;
    display: block;
}
#contact_bang{
    position: absolute;
    top: -25px;
    left: 50%;
    margin-left: -300px;
    width: 150px;
    z-index: -1;
}
#contact_bang2{
    position: absolute;
    top: -70px;
    right: 50%;
    margin-right: -350px;
    width: 220px;
}
.contact h1{
    position: absolute;
    top: -40px;
    left: 50%;
    margin-left: -124px;
    margin-top: 0;
}
.contact h3{
    position: absolute;
    top: 30px;
    left: 50%;
    margin-left: -56px;
    margin-top: 0;
    color: #fff;
    font-weight: bold;
}
.contactText{
    position: absolute;
    bottom: 10%;
    width: 500px;
    text-align: center;
    left: 50%;
    margin-left: -250px;
    font-size: large;
    font-weight: bold;
}
.contactText #message{
    margin-bottom: 30px;
    color: #ed3d3d;
    font-weight: bold;
}
.contactText .row{
    display: flex;
    justify-content: space-between;
    margin: 20px;
}
.contactText input, textarea{
    padding: 5px;
    font-size: large;
    width: 60%;
    color: #6d6225;
    border: 1px solid #baa738;
    border-radius: 10px;
}
.contactText #check{
    border: none;
    border-bottom: 1px solid #009247;
    background-color: transparent;
    color: #009247;
    margin-bottom: 20px;
}
.contactText #check:hover{
    font-weight: bold;
    border-bottom: 3px solid #009247; 
}
.contactText #submit{
    border: none;
    border-bottom: 10px solid #005c2c;
    border-radius: 20px;
    background-color: #009247;
    color: #fff;
    padding: 10px 60px;
    font-size: 18px;
    font-weight: bold;
}
.contactText #submit:hover{
    box-shadow: 0px 6px 12px rgba(0,0,0,0.2);
}



/*chara*/
.chara .top{
    height: 200px;
    position: relative;
    overflow: hidden;
}
img.charaBack{
    position: absolute;
    width: 2000px;
    top: -900px;
    left: 50%;
    margin-left: -1000px;
}
img.ufo{
    position: absolute;
    width: 80px;
    top: 20px;
    left: 50%;
    margin-left: -40px;
}
.chara .top h1{
    margin: 0;
    position: absolute;
    top: 70px;
    left: 50%;
    margin-left: -161px;
}
.chara .top h3{
    position: absolute;
    top: 135px;
    left: 50%;
    margin-left: -56px;
    margin-top: 0;
    margin-bottom: 0;
    color: #fff;
}
.bang,
.okj,
.pun{
    height: 1000px;
    position: relative;
}
.bang{
    background-image: url(../images/chara/chara_back_bang.png);
}
.okj{
    background-color: #fff;
    background-image: url(../images/chara/chara_back_okj.png);
}
.pun{
    background-color: #fff;
    background-image: url(../images/chara/chara_back_pun.png);
}
.charaBar{
    position: absolute;
    top: 0;
    width: 100%;
}
.board{
    position: absolute;
    top: 200px;
    left: 50%;
    margin-left: -450px;
}
.charaName{
    position: absolute;
    top: 290px;
    left: 50%;
    margin-left: -380px;
}
.okj .charaName{
    margin-left: -300px;
}
.pun .charaName{
    margin-left: -350px;
}
.chara h2{
    position: absolute;
    top: 380px;
    left: 50%;
    margin-left: -380px;
    text-align: center;
    color: #005c2c;
}
.okj h2{
    color: #ff6080;
    top: 390px;
}
.pun h2{
    color: #35b1f4;
    top: 400px;
    margin-left: -340px;
}
.charaSelect{
    position: absolute;
    top: 200px;
    right: 50%;
    margin-right: -450px;
}
.chara ul{
    position: absolute;
    top: 600px;
    left: 50%;
    margin-left: -510px;
    display: flex;
    text-align: center;
    list-style: none;
    padding: 0;
}
.chara .okj ul,
.chara .pun ul{
    margin-left: -340px;
}
.chara ul li{
    margin: 10px;
}
.chara ul img{
    width: 150px;
}
.chara ul img:hover{
    cursor: pointer;
}
.chara ul label{
    min-width: 6pc;
    display: inline-block; 
    padding: 4px 6px;
    color: #005c2c;
    font-size: small;
    font-weight: bold;
    border: 1px solid #005c2c;
    border-bottom: 5px solid #005c2c;
    border-radius: 8px;
    background-color: #fff;
}
.okj ul label{
    color: #ff6080;
    border: 1px solid #ff6080;
    border-bottom: 5px solid #ff6080;
}
.pun ul label{
    color: #35b1f4;
    border: 1px solid #35b1f4;
    border-bottom: 5px solid #35b1f4;
}


/*youtube*/
.youtube{
    height: 690px;
    position: relative;
}
.youtube img.left{
    position: absolute;
    left: 0;
    height: 95%;
}
.youtube img.right{
    position: absolute;
    right: 0;
    height: 95%;
}
.youtubeTop{
    height: 130px;
    width: 100%;
    padding-top: 50px;
    position: fixed;
    top: 0;
    display: flex;
    justify-content: center;
    text-align: center;
    background-image: url(../images/youtube/curtain_top.svg);
    background-position: center bottom;
}
.youtubeTop .arrow{
    width: 200px;
    margin: auto 0;
    padding-bottom: 20px;
}
.youtubeTop .arrow img:hover{
    width: 54px;
    cursor: pointer;
}
.youtubeTop .arrowR{
    padding-left: 40px;
}
.youtubeTop .name{
    margin: 0 50px;
    color: #fff;
}
.youtubeTop .name h1,
.youtubeTop .name h3{
    margin: 0;
}
.youtubeTop a{
    width: 200px;
    height: 40px;
    margin-top: 30px;
    margin-bottom: 20px;
    padding: 5px;
    text-decoration: none;
    font-size: 24px;
    font-weight: bold;
    color: #000;
    border: 1px solid #515151;
    border-radius: 8px;
    background-color: #fff;
}
.youtubeBack{
    height: 615px;
    margin-top: 80px;
    background-image: url(../images/youtube/back.svg);
    background-position: center bottom;
    background-size: auto 100%;
}
.youtube ul{
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
}
.youtube ul li{
    width: 270px;
    height: 220px;
    margin-right: 15px;
    padding: 3px;
    border: 1px solid #000;
    border-bottom: 5px solid #000;
    border-radius: 10px;
    background-color: #fff;
    text-align: center;
}
.youtube ul li:last-child{
    margin-right: 0;
}
.youtube ul img{
    width: 250px;
    margin: 5px;
}
.youtube ul a{
    text-decoration: none;
    color: #000;
}
.youtube ul p{
    margin: 0;
    padding: 0 5px;
    font-weight: bold;
    font-size: large;
    text-align: left;
}
.youtube .upImg{
    padding-top: 90px;
}


/*tiktok*/
.tiktok{
    height: 690px;
    position: relative;
}
.tiktok img.left{
    position: absolute;
    left: 0;
    height: 95%;
}
.tiktok img.right{
    position: absolute;
    right: 0;
    height: 95%;
}
.tiktokBack{
    height: 615px;
    margin-top: 80px;
    background-image: url(../images/youtube/back.svg);
    background-position: center bottom;
    background-size: auto 100%;
}
.tiktok ul{
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    padding-top: 100px;
}
.tiktok ul li{
    width: 200px;
    margin-right: 15px;
    padding: 5px;
    padding-bottom: 10px;
    border: 1px solid #000;
    border-bottom: 5px solid #000;
    border-radius: 10px;
    background-color: #fff;
    text-align: center;
    overflow: hidden;
}
.tiktok ul a{
    text-decoration: none;
    color: #000;
}
.tiktok ul li video{
    width: 100%;
    aspect-ratio: 9 / 16;
}
.tiktok ul li p{
    height: 4rem;
    line-height: 1.2;
    margin: 0;
    padding: 0 5px;
    font-weight: bold;
    font-size: large;
    text-align: left;
}