@charset "UTF-8";

/* CSS Document */

body {
    margin: 0px auto
}

.box {
    display: flex;
    flex-wrap: wrap;
}

a:hover {
    opacity: 0.7
}

a:hover {
    opacity: 0.7
}

a:hover {
    opacity: 0.7
}

.modalArea {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(30, 30, 30, 0.9);
    z-index: 1010;
}

.modalWrapper {
    position: absolute;
    padding: 10px 30px;
    background-color: white;
    height: 90%;
    overflow: auto;
}

.closeModalButton {
    position: fixed;
    top: 4rem;
    right: 4rem;
    cursor: pointer;
}

@media screen and (min-width:780px) {
    .sp {
        display: none
    }
    .contents {
        max-width: 1440px;
        margin: 0px auto;
        padding: 10% 5% 3%;
    }
    .p15 {
        padding: 0 15px
    }
    .text-c p {
        text-align: center
    }
    .box-half64_1 {
        width: 55%
    }
    .box-half64_2 {
        width: 35%
    }
    .box-half46_1 {
        width: 35%
    }
    .box-half46_2 {
        width: 55%
    }
    .box-half37_1 {
        width: 20%
    }
    .box-half37_2 {
        width: 75%
    }
    .box-half73_1 {
        width: 75%
    }
    .box-half73_2 {
        width: 20%
    }
    .box-half28_1 {
        width: 10%
    }
    .box-half28_2 {
        width: 85%
    }
    .box-half82_1 {
        width: 85%
    }
    .box-half82_2 {
        width: 10%
    }
    .box-half55 {
        width: 46%
    }
    .box-half333 {
        width: 31%;
    }
    .box-half4 {
        width: 22%
    }
    #main {
        margin-top: 100px;
    }
    #main .mv {
        position: relative
    }
    #main .mv div {
        position: absolute;
        top: 25%;
        max-width: 357px;
        right: 0;
        left: 0;
        margin: 0 auto;
        width: 30%
    }
    #c01 {
        background: linear-gradient(90deg, #fff 0%, #fff 70%, #f7f7f7 70%, #f7f7f7 100%);
    }
    #c01 .ttl {
        padding: 30px 5%;
        border-bottom: 1px solid #cfcfcf
    }
    #c01 .about {
        display: flex;
        flex-wrap: wrap;
        padding: 10% 0
    }
    #c01 .about div:nth-child(1) {
width: 30%; padding: 10% 7.5%;
    }
    #c01 .about div:nth-child(1) p {
        padding: 5% 0
    }
    #c01 .about div:nth-child(1) img {
        max-width: 354px
    }
    #c01 .about div:nth-child(2) {
        width: 55%
    }
    #c02 {
        margin-bottom: 5%
    }
    #c02 .ttl {
        padding: 30px 5%;
        border-bottom: 1px solid #cfcfcf
    }
    #c02 .project {
        padding: 10% 5% 3%
    }
    #c02 .project div:nth-child(1) {
        text-align: center;
    }
    #c02 .project div:nth-child(1) p {
        text-align: center;
        margin-bottom: 5%
    }
    #c02 .project div:nth-child(1) img {
        max-width: 472px;
        margin-bottom: 3%
    }
    #c02 .project div:nth-child(2) {
        width: 100%
    }
    #c02 .project2 {
        display: flex;
        flex-wrap: wrap;
        max-width: 750px;
        margin: 0 auto
    }
    #c02 .project2 div:nth-child(1) {
padding: 5%; width: 30%; text-align: center;
    }
    #c02 .project2 div:nth-child(1) a img {
        width: 60%;
        margin-top: 9%
    }
    #c02 .project2 div:nth-child(2) {
        width: 10%;
        margin: 15% auto 0;
        text-align: center
    }
    #c02 .project2 div:nth-child(3) {
padding: 5%; width:30%; text-align: center;
    }
    #c02 .project2 div:nth-child(3) a img {
        width: 60%;
        margin-top: 15%
    }


    #c03 {
        margin-bottom: 5%
    }
    #c03 .ttl {
        padding: 30px 5%;
        border-bottom: 1px solid #cfcfcf
    }
    #c03 .movie {
        padding: 10% 5% 3%;
        display: flex;
        flex-wrap: wrap;
        margin: 0 auto;
        max-width: 475px
    }
#c03 .movie div:nth-child(1){
width: 13%; margin-right: 7%; text-align: center; padding-top: 13px
}
#c03 .movie div:nth-child(2){
width: 80%; 
}
#c03 .movie div:nth-child(2) p{
line-height: 180% !important; letter-spacing: 3px;
}
    #c03 .p {
        max-width: 825px;
        margin: 0 auto
    }
    #c04 {
        margin-bottom: 5%
    }
    #c04 .ttl {
        padding: 30px 5%;
        border-bottom: 1px solid #cfcfcf
    }
    #c04 .music {
        padding: 10% 5% 3%;
        display: flex;
        flex-wrap: wrap;
        margin: 0 auto;
        max-width: 420px
    }
#c04 .music div:nth-child(1){
width: 13%; margin-right: 7%; text-align: center; padding-top: 13px
}
#c04 .music div:nth-child(2){
width: 80%; 
}
#c04 .music div:nth-child(2) p{
line-height: 180% !important; letter-spacing: 3px;
}
    #c04 .music2 {
        background: linear-gradient(180deg, #f7f7f7 0%, #f7f7f7 70%, #fff 70%, #fff 100%);
        padding: 5%
    }
    #c04 .music2 .box {
        display: flex;
        flex-wrap: wrap;
        max-width: 1150px;
        margin: 0 auto;
    }
    #c04 .music2 .box div:nth-child(1) {
        width: 45%;
        margin: 0 auto
    }
    #c04 .music2 .box div:nth-child(2) {
        width: 50%;
        margin: 10% auto 0;
        text-align: right;
        position: relative;
    }
    #c04 .music2 .box div:nth-child(2) img {
        margin-bottom: 3%
    }
    #c04 .music2 .box div:nth-child(2) p {
        width: 88%;
        float: right;
        text-align: left;
        margin-bottom: 6%;
        line-height: 180% !important
    }
    img.spotify {
        float: left;
        position: absolute;
        top: 0px;
        left: 0px;
    }
    iframe.spotify {
        margin-top: 85px;
    }
    #c04 .music2 .box div:nth-child(2) img:nth-child(1) {
        width: 19.2%;
    }
    #c04 .music2 .box div:nth-child(2) a img:nth-child(1) {
        width: 88%;
    }
    #c04 .music3 {
        max-width: 900px;
        margin: 0 auto;
        text-align: center;
        padding: 0 5% 5%
    }
    #c04 .music3 .com {
        display: flex;
        flex-wrap: wrap;
        border: 1px solid #cfcfcf;
        padding: 3%;
        margin-top: 5%
    }
    #c04 .music3 .com div:nth-child(1) {
        width: 80%;
        margin: 0 auto;
        text-align: left;
        margin-right: 5%
    }
    #c04 .music3 .com div:nth-child(2) {
        width: 10%;
        margin: 0 auto;
        margin-top: 3%
    }
    #c05 {}
    #c05 .ttl {
        padding: 30px 5%;
        border-bottom: 1px solid #cfcfcf
    }
    #c05 .interview {
        display: flex;
        flex-wrap: wrap;
        padding: 10% 0;
        background: linear-gradient(90deg, #fff 0%, #fff 70%, #f7f7f7 70%, #f7f7f7 100%);
    }
    #c05 .interview div:nth-child(1) {
width: 30%; padding: 5% 7.5%;
    }
    #c05 .interview div:nth-child(1) p {
        padding: 5% 0
    }
    #c05 .interview div:nth-child(1) img {
        max-width: 231px
    }
    #c05 .interview div:nth-child(2) {
        width: 55%
    }
    #c05 .interview-list {
        margin-top: 5%;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: scroll;
        max-width: 1285px;
        margin: 10% auto;
    }
    #c05 .interview-list div {
        /*width: 330px;*/
        flex: 0 0 288px;
        text-align: center;
        border-bottom: 1px solid #cfcfcf;
    }
    #c05 .interview-list div:first-child {
        /*border-bottom: 3px solid #000;*/
    }
    #c05 .interview-list div img {
        width: 60%;
        padding: 0 20%;
        margin-bottom: 15%;
        border-right: 1px solid #cfcfcf;
    }


.pop {background: #fff; padding: 5% 5% 5% 0}
.pop_p {
 width: 46%;
margin-right: 5%
}
.pop_txt {
width: 48%;
padding-bottom: 20%;
}
.pop_txt h3{
margin-top: 30px
}
.pop_no1{margin-bottom: 5%; margin-left: 8%; max-width: 250px}
.pop_no2{margin-bottom: 5%; margin-left: 8%; max-width: 200px}
.pop_no3{margin-bottom: 5%; margin-left: 8%; max-width: 200px}
.pop_no4{margin-bottom: 5%; margin-left: 8%; max-width: 330px}
.pop_no5{margin-bottom: 5%; margin-left: 8%; max-width: 350px}
.pop_no6{margin-bottom: 5%; margin-left: 8%; max-width: 200px}
.pop_no7{margin-bottom: 5%; margin-left: 8%; max-width: 200px}
.pop_no8{margin-bottom: 5%; margin-left: 8%; max-width: 250px}
.name01{color:#bc6867}
.name02{color:#5572ba}
.close{position: absolute; top:-5%; right:-3%}


.box_pro{
display: flex; flex-wrap: wrap;
margin: 5% 0}
.pop_no{margin-bottom: 5%; margin-left: 5%;}
.txt_bg{background: #f5f5f5; padding:3% 4%; margin-top: 20px}
.txt_bb{border-bottom: 1px solid #b3b3b3; padding-bottom: 20px; margin-bottom: 20px}

.box_pro1{
width: 20%; margin-right: 5%}
.box_pro2{
width: 70%}
.box_pro3{
width: 30%; margin-right: 5%}
.box_pro4{
width: 60%; margin-right: 5%}
	
.box_pro4 p{margin-bottom: 20px; line-height: 180% !important}

.btn_bk{background: #000;}
.btn_bk p{color:#fff; padding: 5px; text-align: center}
	
.btn_wt{border: 1px solid #000; margin-top:30px}
.btn_wt p{padding: 5px; text-align: center}

}

@media screen and (max-width:779px) {
    .pc {
        display: none
    }
    .contents {
        width: 90%;
        margin: 0px auto;
        padding: 15% 0 3%;
    }
    .text-c p {
        text-align: left
    }
    .box-half64_1 {
        width: 100%
    }
    .box-half64_2 {
        width: 100%
    }
    .box-half46_1 {
        width: 100%
    }
    .box-half46_2 {
        width: 100%
    }
    .box-half37_1 {
        width: 20%
    }
    .box-half37_2 {
        width: 75%
    }
    .box-half73_1 {
        width: 75%
    }
    .box-half73_2 {
        width: 20%
    }
    .box-half28_1 {
        width: 15%
    }
    .box-half28_2 {
        width: 80%
    }
    .box-half82_1 {
        width: 80%
    }
    .box-half82_2 {
        width: 15%
    }
    .box-half55 {
        width: 100%
    }
    .box-half333 {
        width: 66%
    }
    .box-half4 {
        width: 46%
    }
    #main {
        margin-top: 100px;
    }
    #main .mv {
        position: relative
    }
    #main .mv div {
        position: absolute;
        top: 10%;
        max-width: 357px;
        right: 0;
        left: 0;
        margin: 0 auto;
        width: 45%
    }
    #c01 {
        background: linear-gradient(90deg, #fff 0%, #fff 70%, #f7f7f7 70%, #f7f7f7 100%);
        margin-bottom: 5%
    }
    #c01 .ttl {
        padding: 30px 5%;
        border-bottom: 1px solid #cfcfcf
    }
    #c01 .about {
        display: flex;
        flex-wrap: wrap;
        padding: 10% 0
    }
    #c01 .about div:nth-child(1) {
        width: 100%;
        padding: 10% 5%
    }
    #c01 .about div:nth-child(1) p {
        padding: 5% 0
    }
    #c01 .about div:nth-child(1) img {
        max-width: 354px; width: 85%;
    }
    #c01 .about div:nth-child(2) {
        width: 100%
    }
    #c02 {
        margin-bottom: 10%
    }
    #c02 .ttl {
        padding: 30px 5%;
        border-bottom: 1px solid #cfcfcf
    }
    #c02 .project {
        padding: 10% 5% 3%
    }
    #c02 .project div:nth-child(1) {
        text-align: center;
    }
    #c02 .project div:nth-child(1) p {
        text-align: left;
        margin-bottom: 5%
    }
    #c02 .project div:nth-child(1) img {
        max-width: 472px;
        margin-bottom: 5%
    }
    #c02 .project div:nth-child(2) {
        width: 100%
    }
    #c02 .project2 {
        display: block;
        flex-wrap: wrap;
        max-width: 750px;
        margin: 0 auto
    }
    #c02 .project2 div:nth-child(1) {
        padding: 5%;
        width: 55%;
        text-align: center; margin: 0 auto;
    }
    #c02 .project2 div:nth-child(1) a img {
        width: 60%;
        margin-top: 9%
    }
    #c02 .project2 div:nth-child(2) {
        width: 10%;
        margin: 15% auto 0;
        text-align: center; margin: 0 auto;
    }
    #c02 .project2 div:nth-child(3) {
        padding: 5%;
        width: 55%;
        text-align: center; margin: 0 auto;
    }
    #c02 .project2 div:nth-child(3) a img {
        width: 60%;
        margin-top: 15%
    }
    #c03 {
        margin-bottom: 5%
    }
    #c03 .ttl {
        padding: 30px 5%;
        border-bottom: 1px solid #cfcfcf
    }
    #c03 .movie {
        padding: 10% 5% 3%;
        display: flex;
        flex-wrap: wrap;
        margin: 0 auto;
        max-width: 475px
    }
    #c03 .movie div:nth-child(1) {
        width: 15%;
        margin-right: 10%;
        text-align: center;
        padding-top: 10px
    }
    #c03 .movie div:nth-child(2) {
        width: 70%;
    }
    #c03 .movie div:nth-child(2) p {
        line-height: 180% !important
    }
    #c03 .p {
        max-width: 825px;
        margin: 0 auto
    }
    #c04 {
        margin-bottom: 5%
    }
    #c04 .ttl {
        padding: 30px 5%;
        border-bottom: 1px solid #cfcfcf
    }
    #c04 .music {
        padding: 10% 5% 3%;
        display: flex;
        flex-wrap: wrap;
        margin: 0 auto;
        max-width: 420px
    }
    #c04 .music div:nth-child(1) {
        width: 15%;
        margin-right: 10%;
        text-align: center;
        padding-top: 10px
    }
    #c04 .music div:nth-child(2) {
        width: 70%;
    }
    #c04 .music div:nth-child(2) p {
        line-height: 180% !important
    }
    #c04 .music2 {
        background: linear-gradient(180deg, #f7f7f7 0%, #f7f7f7 100%, #fff 100%, #fff 100%);
        padding: 5%
    }
    #c04 .music2 .box {
        display: flex;
        flex-wrap: wrap;
        max-width: 1150px;
        margin: 0 auto;
    }
    #c04 .music2 .box div:nth-child(1) {
        width: 100%;
        margin: 0 auto
    }
    #c04 .music2 .box div:nth-child(2) {
        width: 100%;
        margin: 10% auto 0;
        text-align: right
    }
    #c04 .music2 .box div:nth-child(2) img {
        margin-bottom: 3%
    }
    #c04 .music2 .box div:nth-child(2) p {
        width: 100%;
        float: right;
        text-align: left;
        margin-bottom: 6%;
        line-height: 180% !important
    }
    img.spotify {
        float: left;
        position: absolute;
        top: 0px;
        left: 0px;
    }
iframe.spotify {
    margin-top: 85px;
    width: 100%;
}
    #c04 .music2 .box div:nth-child(2) img:nth-child(1) {
        width: 19.2%;
    }
    #c04 .music2 .box div:nth-child(2) a img:nth-child(1) {
        width: 100%;
    }
    #c04 .music3 {
        max-width: 900px;
        margin: 10% auto;
        text-align: center;
        padding: 0 5% 5%
    }
    #c04 .music3 .com {
        display: flex;
        flex-wrap: wrap;
        border-bottom: 1px solid #cfcfcf;
        border-top: 1px solid #cfcfcf;
        padding: 10% 5%;
        margin-top: 5%
    }
    #c04 .music3 .com div:nth-child(1) {
        width: 100%;
        margin: 0 auto;
        text-align: left;
    }
    #c04 .music3 .com div:nth-child(2) {
        width: 30%;
        margin: 10% auto 0;
    }

    #c05 {}
    #c05 .ttl {
        padding: 30px 5%;
        border-bottom: 1px solid #cfcfcf
    }
    #c05 .interview {
        display: flex;
        flex-wrap: wrap;
        padding: 10% 0;
        background: linear-gradient(90deg, #fff 0%, #fff 70%, #f7f7f7 70%, #f7f7f7 100%);
    }
    #c05 .interview div:nth-child(1) {
        width: 100%;
        padding: 5%
    }
    #c05 .interview div:nth-child(1) p {
        padding: 5% 0
    }
    #c05 .interview div:nth-child(1) img {
        max-width: 231px
    }
    #c05 .interview div:nth-child(2) {
        width: 100%
    }
    #c05 .interview-list {
        margin-top: 5%;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: scroll;
        max-width: 1150px;
        margin: 10% auto;
    }
    #c05 .interview-list div {
        width: 25%;
        flex: 0 0 48%;
        text-align: center;
        border-bottom: 1px solid #cfcfcf;
    }
    #c05 .interview-list div:first-child {
        border-bottom: 3px solid #000;
    }
    #c05 .interview-list div img {
width: 90%;
    padding: 0 5%;
        margin-bottom: 15%;
        border-right: 1px solid #cfcfcf;
    }

.pop {background: #fff; padding: 10% 5% 5% 0}
.pop_p {
 width: 95%;
}
.pop_txt {
width: 80%; margin:0 auto 30%
}
.pop_txt h3{
margin-top: 30px
}
.pop_no1{margin-bottom: 5%; margin-left: 5%; max-width: 250px}
.pop_no2{margin-bottom: 5%; margin-left: 5%; max-width: 200px}
.pop_no3{margin-bottom: 5%; margin-left: 5%; max-width: 200px}
.pop_no4{margin-bottom: 5%; margin-left: 5%; max-width: 330px}
.pop_no5{margin-bottom: 5%; margin-left: 5%; max-width: 350px}
.pop_no6{margin-bottom: 5%; margin-left: 5%; max-width: 200px}
.pop_no7{margin-bottom: 5%; margin-left: 5%; max-width: 200px}
.pop_no8{margin-bottom: 5%; margin-left: 5%; max-width: 250px}
.name01{color:#bc6867}
.name02{color:#5572ba}
.close{position: absolute; top:0; right:0}


.box_pro{
display: flex; flex-wrap: wrap;
margin: 5% 0}
.pop_no{margin-bottom: 5%; margin-left: 5%;}
.txt_bg{background: #f5f5f5; padding:3% 4%; margin-top: 20px}
.txt_bb{border-bottom: 1px solid #b3b3b3; padding-bottom: 20px; margin-bottom: 20px}

.box_pro1{
width: 20%; margin-right: 5%}
.box_pro2{
width: 70%}
.box_pro3{
width: 30%; margin-right: 5%}
.box_pro4{
width: 60%; margin-right: 5%}
	
.box_pro4 p{margin-bottom: 20px; line-height: 180% !important}

.btn_bk{background: #000;}
.btn_bk p{color:#fff; padding: 5px; text-align: center}
	
.btn_wt{border: 1px solid #000; margin-top:30px}
.btn_wt p{padding: 5px; text-align: center}

}