@charset "utf-8";
/*------------------------------------------------------------
	index
------------------------------------------------------------*/
.mainVisual {
    padding: 130px 0 0;
    text-align: center;
    position: relative;
    width: 100%;
    }
.mainVisual::after{
    position: absolute;
    content:"";
    background: url("../images/common/hd_logo_bg.png")no-repeat center;
    background-size: 100%;
    top: 0;
    left: -50px;
    width: 361px;
    height: 337px;
    }
.mainVisual.topmain::before{
    position: absolute;
    content:"";
    background: url("../images/common/music01.png")no-repeat center;
    background-size: 100%;
    top: 100px;
    right: 0;
    width: 1000px;
    height: 200px;
    z-index: 1;
    }
@media all and (max-width: 1400px) {
 .mainVisual::after{
    background: url("../images/common/hd_logo_bg.png")no-repeat center;
    background-size: 100%;
    top: 0;
    left: -50px;
    width: 361px;
    height: 337px;
    }
.mainVisual.topmain::before{
    width: 750px;
    height: 150px;
    }
}
@media all and (max-width: 1000px) {
 .mainVisual::after{
    background: url("../images/common/hd_logo_bg.png")no-repeat center;
    background-size: 100%;
    top: 0;
    left: -50px;
    width: 261px;
    height: 237px;
    }
.mainVisual.topmain::before{
    width: 515px;
    height: 100px;
    }
}
@media all and (max-width: 1200px) {}
@media all and (max-width: 896px) {
.mainVisual {padding: 20px;box-sizing: border-box;}
.mainVisual::before{top: 0;}
    .mainVisual.topmain::before{
      top: 50px;
        width: 70%;
    }
}
@media all and (max-width: 540px) {
.mainVisual::after{
    background: url("../images/common/hd_logo_bg.png")no-repeat center;
    background-size: 100%;
    top: -50px;
    left: -50px;
    width: 200px;
    height: 200px;
    }
.mainVisual.topmain::before{display: none;}
} 


#main{}
#main .ttl-01{
    font-size: 2.4rem;
    line-height: 1.5;
    letter-spacing: 0.075rem;
    text-align: center;
    margin-bottom: 60px;
    }
#main .ttl-01 span{
    display: block;
    font-family: 'Overpass', sans-serif;
    color: #ff9f15;
    font-size: 7.0rem;
    line-height: 1.1;
    letter-spacing: 0.05rem;
    font-weight: 500;
    }
  
#main .campaign{
    padding: 130px 0 100px;
    background: url("../images/index/music_ttl01.png")no-repeat center 35px;
    }
#main .campaign .campaignBox{margin: 10px 0 60px}
#main .campaign .campaignBox .flex{}
#main .campaign .campaignBox li{
    width: 23%;
    margin: 1%;
    background: #fff;
    box-sizing: border-box;
    border-radius: 30px;
    overflow: hidden;
    }
#main .campaign .campaignBox li figure{
    padding: 0;
    margin:0 0 30px;
    }
#main .campaign .campaignBox li figure img{
    width: 100%;
    overflow: hidden;
    height: 150px;
    object-fit: cover;
    }
#main .campaign .campaignBox li span.cate{
    background: #f4c319;
    color: #fff;
    padding: 2px 15px;
    margin:0 30px;
    border-radius: 100px;
    }
#main .campaign .campaignBox li p{
    display: block;
    margin: 10px 30px 30px;
    }

/* */
#main .campaign.greeting{padding: 130px 0 120px;}
#main .campaign.greeting .ttl-01{font-family: 'Overpass', sans-serif;}
#main .campaign.greeting .ttl-01 span{font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;}
#main .campaign.greeting .cen{
    text-align: center;
    font-weight: bold;
    font-size: 1.8rem;
    line-height: 2.2;
    }
#main .greeting .cp_box {width: auto;margin: 30px auto;}
#main .greeting .cp_box input {display: none;}
/*続きを読むボタン*/
#main .greeting .cp_box label {
    font-weight: bold;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 80%;
    max-width: 200px;
    margin:40px auto;
    padding: 0.3em 1em;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    color: #fff;
    border: 2px solid #f0863c;
    border-radius: 3px;
    background: #f0863c;
    }
/*＋マーク*/
#main .greeting .cp_box label::after {
    position: absolute;
    content: '';
    right: 16px;
    width: 16px;
    height: 16px;
    background: #fff;
    clip-path: polygon(0 40%, 40% 40%, 40% 0, 60% 0, 60% 40%, 100% 40%, 100% 60%, 60% 60%, 60% 100%, 40% 100%, 40% 60%, 0 60%);
    }
#main .greeting .cp_box label:hover::after {color: #f0863c;}
#main .greeting .cp_box label:hover {
    transition: all 0.3s;
    color: #f0863c;
    background: #fff;
    }
#main .greeting .cp_box label:hover::after {background: #f0863c;}
/*-マーク*/
#main .greeting .cp_box input:checked ~ label::after {
    background: #fff;
    clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0 60%);
    }
#main .greeting .cp_box input:checked ~ label:hover::after {background: #f0863c;}
#main .greeting .cp_box div.cp_container {
    position: relative;
    z-index: 10;
    overflow: hidden;
    height: 0;
    margin-top: -1px;
    }
#main .greeting .cp_box input:checked ~ div.cp_container {transition: height 0.5s ease-in-out;}
#main .greeting .cp_box input:checked ~ div.cp_container {height: auto;}
#main .greeting h3{
    color: #ff9f15;
    font-size: 4.0rem;
    line-height: 1.1;
    letter-spacing: 0.05rem;
    font-weight: 500;
    text-align: center;
    margin: 45px 0;
    padding-bottom: 45px;
    border-bottom: 1px solid #ff9f15;
    transition: all 0.5s;
    }
#main .greeting .greetingBox{
    max-width: 920px;
    margin:0 auto;
    }
#main .greeting .greetingBox h4{
    margin: 35px 0 12px;
    font-size: 1.8rem;
    }


/* */
#main .classroom{
    background: url("../images/index/music_ttl02.png")no-repeat center 35px , #f6f0e9;
    padding: 140px 0 110px;
    }
#main .classroom .ttl-01{
    position: relative;
    }
#main .classroom .ttl-01::after{
    position: absolute;
    content: "";
    background: url("../images/index/classroom_ttl.png")no-repeat center;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 583px;
    height: 334px;
    z-index: 1;
    }


#main .classroom .ttl-01 span{
    position: relative;
    z-index: 2;
    }
#main .classroom .roomBox .flex{}
#main .classroom .roomBox li{
    width: 30%;
    margin: 1% 1.6%;
    }
#main .classroom .roomBox li a{
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    }
#main .classroom .youchien{margin: 60px 1.6%;box-sizing: border-box;}
/*#main .classroom .youchien a{
    display: block;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    background: #ff9f15;
    color: #fff;
    padding: 60px 0;
    border-radius: 30px;
    font-size: 2.4rem;
    }
#main .classroom .youchien span{
    background: url("../images/index/youchien_img1.png")no-repeat left center,url("../images/index/youchien_img2.png")no-repeat right center;
    padding: 80px 200px;
    font-weight: bold;
    }*/

#main .classroom .snsBox div{width: 48%;text-align: center;}
#main .classroom .snsBox div{}

@media all and (max-width: 1100px) {
    #main .classroom .roomBox li a{}
    /*#main .classroom .youchien span{
    background: url("../images/index/youchien_img1.png")no-repeat left center,url("../images/index/youchien_img2.png")no-repeat right center;
    background-size: 110px;
    padding: 60px 130px;
    }*/
}

#main .rental{
    background:url("../images/index/music_ttl03.png")no-repeat center 45px, url("../images/index/space_bg.jpg")no-repeat center/cover;
    padding: 130px 0 110px
    }
#main .rental .content{position: relative;z-index: 2;}
#main .rental .rentalBox{}
#main .rental .rentalBox .flex{max-width: 1000px;margin: auto}
#main .rental .rentalBox li{
    width: 30%;
    margin:0 1.6%;
    box-sizing: border-box;
    }
#main .rental .rentalBox li img{
    border-radius: 20px;
    width: 100%;
    overflow: hidden;
    height: 250px;
    object-fit: cover;
    border: 3px solid #f0863c;
    box-sizing: border-box;
    }
#main .rental .rentalBox li p{
    display: block;
    font-weight: bold;
    padding: 10px 0;
}

#main .others{
    background:url("../images/index/music_ttl04.png")no-repeat center 45px;
    padding: 130px 0 190px;
    position: relative;
    }
#main .others::after{
    position: absolute;
    content: "";
    top: -273px;
    right: 0;
    background: url("../images/index/bg.png")no-repeat top;
    width: 279px;
    height: 546px;
    z-index: 1;
    }
#main .others .content{position: relative;z-index: 2;}
#main .others .othersBox{margin-bottom: 30px;}
#main .others .othersBox .flex{}
#main .others .othersBox a{
    display: block;
    width: 100%;
    background: #fff;
    padding: 20px 40px;
    box-sizing: border-box;
    border-radius: 30px;
    }
#main .others .othersBox a div{
    background: url("../images/index/menu_01.png")no-repeat left center;
    padding: 20px 0 20px 95px;
    margin: auto;
    font-size: 2.8rem;
    font-weight: 600;
    }
#main .others .othersBox li:nth-child(2) a div{
    background: url("../images/index/menu_02.png")no-repeat left center;
    }
#main .others .othersBox li:nth-child(3) a div{
    background: url("../images/index/menu_03.png")no-repeat left center;
    }
#main .others .othersBox a div span{
    display: block;
    font-family: 'Overpass', sans-serif;
    font-size: 2.0rem;
    color: #00a34c;
    font-weight: 400;
    }
#main .others .othersBox li:nth-child(2) a div span{color: #e48bb2;}
#main .others .othersBox li:nth-child(3) a div span{color: #f4c319;}   
    
    
#main .others .othersBox li{width: 30%;margin: 1% 1.6%;}
#main .others .othersBox2 li{width: 24%;margin: 1% 0.5%;}
#main .others .othersBox2 li a{
    display: block;
    width: 100%;
    border-radius: 100px;
    background: #1877f2;
    text-align: center;
    color: #fff;
    font-family: 'Overpass', sans-serif;
    font-size: 2.0rem;
    padding: 30px 0;
    font-weight: bold;
    }
#main .others .othersBox2 li:nth-child(1) a{
    background-image: linear-gradient(7deg, rgba(247, 238, 12, 1), rgba(253, 101, 13, 1) 26%, rgba(252, 25, 88, 1) 43%, rgba(229, 0, 161, 1) 61%, rgba(176, 6, 244, 1) 79%, rgba(115, 51, 253, 1) 95%);
}
#main .others .othersBox2 li:nth-child(1) a span{
    background: url("../images/index/ic_sns01.png")no-repeat center left;
    background-size: 30px;
    padding: 8px 0 8px 45px;
    }
#main .others .othersBox2 li:nth-child(2) a span{
    background: url("../images/index/ic_sns02.png")no-repeat center left;
    background-size: 16px;
    padding: 6px 0 6px 28px;
    }
#main .others .othersBox2 li:nth-child(3) a{background: #d91226;}
#main .others .othersBox2 li:nth-child(3) a span{
    background: url("../images/index/ic_sns03.png")no-repeat center left;
    background-size: 30px;
    padding: 4px 0 4px 45px;
    }
#main .others .othersBox2 li:nth-child(4) a{
    background: #333;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    }
@media all and (max-width: 1180px) {
#main .others .othersBox a{
    padding: 20px 15px;
    }   
#main .others .othersBox a div{
    font-size: 2.2rem;
    }
#main .others .othersBox a div span{
    font-size: 1.5rem;
    }
#main .others .othersBox li{width: 31%;margin: 1% 1%;}
#main .others .othersBox2 li{}  
    
}


@media all and (max-width: 896px) {

#main .ttl-01{
    font-size: 1.8rem;
    line-height: 1.5;
    letter-spacing: 0.05rem;
    margin-bottom: 30px;
    }
#main .ttl-01 span{
    font-size: 3.1rem;
    line-height: 1.3;
    letter-spacing: 0;
    }
    
#main .campaign{
    background: url("../images/index/music_ttl01_sp.png")no-repeat center 5px;
    padding: 40px 0;
    }
#main .campaign .campaignBox{margin: 10px 0 30px}
#main .campaign .campaignBox li{
    width: 48%;
    margin: 1%;
    }
#main .campaign .campaignBox li figure{
    padding: 0;
    margin:0 0 15px;
    }
#main .campaign .campaignBox li span.cate{
    padding: 2px 10px;
    margin:0 15px;
    font-size: 1.2rem;
    }
#main .campaign .campaignBox li p{
    margin: 5px 15px 15px;
    }
/* */
#main .campaign.greeting{padding: 40px 0 80px;}
#main .campaign.greeting .cen{
    text-align: left;
    font-size: 1.6rem;
    line-height: 1.8;
    }
#main .greeting h3 {
    font-size: 2.6rem;
    margin:0 0 25px 0;
    padding-bottom: 25px;
    }
#main .greeting .greetingBox h4 {
    margin: 25px 0 6px;
    font-size: 1.6rem;
    }
/* */   
#main .classroom{
    background: url("../images/index/music_ttl02_sp.png")no-repeat center 15px , #f6f0e9;
    padding: 50px 0 40px;
    }
#main .classroom .ttl-01::after{
    background: url("../images/index/classroom_ttl.png")no-repeat center;
    background-size: 100%;
    bottom: 0;
    width: 380px;
    height: 230px;
    }


#main .classroom .roomBox li{
    width: 46%;
    margin: 1% 2%;
    }
#main .classroom .roomBox li a{
    /*border-radius: 20px;
    padding: 30px;
    font-size: 2.0rem;*/
    }
#main .classroom .youchien{margin: 20px 2%;}
/*#main .classroom .youchien a{
    padding: 30px 0;
    border-radius: 20px;
    font-size: 1.8rem;
    }
#main .classroom .youchien span{
    background: url("../images/index/youchien_img1.png")no-repeat left center,url("../images/index/youchien_img2.png")no-repeat right center;
    background-size: 65px;
    padding: 80px 80px;
    font-weight: bold;
    }*/


#main .rental{
    background:url("../images/index/music_ttl03_sp.png")no-repeat center 25px, url("../images/index/space_bg.jpg")no-repeat center/cover;
    padding: 40px 0 40px
    }
#main .rental .rentalBox{max-width: 420px;margin: auto;}
#main .rental .rentalBox li{
    width: 96%;
    margin:2%;
    }
#main .rental .rentalBox li img{
    border-radius: 20px;
    height: 220px;
    }

    
#main .others{
    background:url("../images/index/music_ttl04_sp.png")no-repeat center 35px;
    padding: 40px 0 40px;
    }
#main .others::after{
    content: "";
    top: -173px;
    background: url("../images/index/bg.png")no-repeat top;
    background-size: 100%;
    width: 159px;
    height: 316px;
    }
#main .others .othersBox{margin:0 auto 30px;max-width: 450px}
#main .others .othersBox a{
    width: 100%;
    padding: 15px 20px;
    border-radius: 20px;
    }
#main .others .othersBox a div{
    background: url("../images/index/menu_01.png")no-repeat left center;
    background-size: 50px;
    padding: 15px 0 15px 65px;
    margin: auto;
    font-size: 2.2rem;
    font-weight: 600;
    }
#main .others .othersBox li:nth-child(2) a div{
    background: url("../images/index/menu_02.png")no-repeat left center;
    background-size: 50px;
    }
#main .others .othersBox li:nth-child(3) a div{
    background: url("../images/index/menu_03.png")no-repeat left center;
    background-size: 50px;
    }
#main .others .othersBox a div span{
    font-size: 1.5rem;
    }
    
    
#main .others .othersBox li,
#main .others .othersBox2 li{
    width: 90%;
    margin: 1% 5%;
    }
   
    #main .others .othersBox2{max-width: 450px;margin: auto;}
#main .others .othersBox2 li a{
    font-size: 2.2rem;
    padding: 30px 0;
    }
#main .others .othersBox2 li:nth-child(1) a span{
    background: url("../images/index/ic_sns01.png")no-repeat center left;
    background-size: 43px;
    padding: 8px 0 8px 55px;
    }
#main .others .othersBox2 li:nth-child(2) a span{
    background: url("../images/index/ic_sns02.png")no-repeat center left;
    background-size: 20px;
    padding: 6px 0 6px 45px;
    }
#main .others .othersBox2 li:nth-child(3) a span{
    background: url("../images/index/ic_sns03.png")no-repeat center left;
    background-size: 39px;
    padding: 4px 0 4px 45px;
    }
    
    
    
}

@media all and (max-width: 540px) {
    
#main .ttl-01{font-size: 1.6rem;}
#main .ttl-01 span{font-size: 2.8rem;}
    
#main .campaign{padding: 40px 0;}
#main .campaign .campaignBox li {border-radius: 10px;}
#main .campaign .campaignBox li figure img {height: 100px;}
/* */
#main .campaign.greeting{padding: 40px 0 50px;}
#main .campaign.greeting .cen{
    font-size: 1.4rem;
    padding-top: 20px;
    line-height: 1.8;
    }
#main .greeting .cp_box label{margin-top: 20px;}
#main .greeting h3 {
    font-size: 2.0rem;
    margin:0 0 20px 0;
    padding-bottom: 20px;
    }
/* */
#main .classroom{
    background:#f6f0e9;
    padding: 50px 0 40px;
    }
#main .classroom .ttl-01::after{
    background: url("../images/index/classroom_ttl.png")no-repeat center;
    background-size: 100%;
    bottom: 0;
    width: 280px;
    height: 165px;
    }


#main .classroom .roomBox li{
    width: 46%;
    margin: 1% 2%;
    }
#main .classroom .roomBox li a{
    /*border-radius: 10px;
    padding: 20px;
    font-size: 1.7rem;*/
    }
/*#main .classroom .youchien a{
    padding: 20px 0;
    border-radius: 10px;
    font-size: 1.7rem;
    }
#main .classroom .youchien span{
    background: none;
    padding: 40px 20px;
    }*/

#main .rental .rentalBox li img{
    border-radius: 10px;
    height: 180px;
    }

    
#main .others{
    padding: 40px 0 40px;
    }
#main .others::after{
    content: "";
    top: -100px;
    background: url("../images/index/bg.png")no-repeat top ;
    background-size: 100%;
    width: 110px;
    height: 216px;
    }
#main .others .othersBox{margin:0 auto 30px;max-width: 450px}
#main .others .othersBox a{
    width: 100%;
    padding: 15px 20px;
    border-radius: 20px;
    }
#main .others .othersBox a div{
    background: url("../images/index/menu_01.png")no-repeat left center;
    background-size: 40px;
    padding: 10px 0 10px 55px;
    font-size: 2.0rem;
    }
#main .others .othersBox li:nth-child(2) a div{
    background: url("../images/index/menu_02.png")no-repeat left center;
    background-size: 40px;
    }
#main .others .othersBox li:nth-child(3) a div{
    background: url("../images/index/menu_03.png")no-repeat left center;
    background-size: 40px;
    }
#main .others .othersBox a div span{
    font-size: 1.4rem;
    }
        
#main .others .othersBox2 li a{
    font-size: 2.0rem;
    padding: 20px 0;
    }
#main .others .othersBox2 li:nth-child(1) a span{
    background: url("../images/index/ic_sns01.png")no-repeat center left;
    background-size: 23px;
    padding: 8px 0 8px 32px;
    }
#main .others .othersBox2 li:nth-child(2) a span{
    background: url("../images/index/ic_sns02.png")no-repeat center left;
    background-size: 10px;
    padding: 6px 0 6px 22px;
    }
#main .others .othersBox2 li:nth-child(3) a span{
    background: url("../images/index/ic_sns03.png")no-repeat center left;
    background-size: 22px;
    padding: 4px 0 4px 32px;
    }   
    
    
}