@charset "UTF-8";
@import url(cmn.css);
@import url(base.css);
@import url(animation.css);

/*---------------*/
.wrapper{
    max-width: 1440px;
    padding-left: 5%;
    padding-right: 5%;
}
/*------------------------------------*/
header{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 20px;
}
header .wrapper{
    display: flex;
    justify-content: space-between;
}
header .logo{
    width: 408px;
    margin-right: 7%;
}
header .inner{
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
    flex-grow: 1;
}
header nav{
   width: calc(100% - 125px);
    min-width: 410px;
}
header nav ul{
    display: flex;
    max-width: 400px;
    justify-content: space-around;
}
header nav ul li a{
    font-family: "M PLUS 1p","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","游ゴシック体","Yu Gothic",YuGothic,"ＭＳ Ｐゴシック","メイリオ",Meiryo,sans-serif;
    font-weight: 800;
    transition: .2s ease-in-out;
}
header nav ul li a:hover{
    color: #41FFF4;
}
@media screen and (max-width: 744px){
    header{
        padding-top: 10px;
    }
    header .logo{
        width: 40%;
        max-width: 270px;
        margin-right: 0;
    }
    header .inner{
        opacity: 0;
        pointer-events: none;
        position: fixed;
        top: 0;
        right: -410px;
        width: 40vw;
        height: 100vh;
        height: 100dvh;
        z-index: 9;
        background: #070045;
        transition: .3s ease-in-out;
        max-width: none;
        padding: 70px 20px 50px;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }
    .open header .inner{
        opacity: 1;
        pointer-events: auto;
        right: 0;
    }
    header nav{
      width: 100%;
      min-width: 0;
    }
    header nav ul{
        max-width: none;
        flex-direction: column; 
    }
    header nav ul li{
        text-align: center;
        margin-bottom: 15px;
    }
    header nav ul li a{
        display: block;
        padding: 15px 0;
    }
    #translate{
        margin-top: 30px;
    }
}
@media screen and (max-width: 375px){
    header .logo{
        width: 35%;
        max-width: 130px;
        margin-right: 0;
    }
    header .inner{
        width: 62%;
        min-width: 200px;
        right: -210px;
    }
    #translate button{
        font-size: 1.6rem;
    }
}

/*---------------mv---------------------*/
#mv{
    margin: 0 auto;
    overflow: hidden;
}
#mv figure{
	width: 100%;
	aspect-ratio: 1 / 1;
	max-height:1920px;
}
#mv figure img{
	object-fit: cover;
	object-position: 50% 20%;
	width: 100%;
	height: 100%;
}

#mv .text{
    background: #C000BA;
    color: #fff;
    font-family: 'Permanent Marker', cursive;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 50px;
}
.scroll-child{
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: absolute;
    left: 0;
    top: 0;
    animation-duration: 20s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    white-space: nowrap;
    width: 1700px;
    height: 100%;
}
.scroll-child:nth-child(1) {
  animation-name: first;
}
.scroll-child:nth-child(2) {
  animation-name: second;
}
.scroll-child li{
    line-height: 1.3;
    margin-left: 25px;
}
.scroll-child img{
    vertical-align: middle;
}

@keyframes first {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}
 
@keyframes second {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0%);
  }
}

@media screen and (max-width: 744px){
    #mv .text{
        height: 32px;
    }
    .scroll-child{
        width: 1400px;
    }
}
@media screen and (max-width: 375px){
    #mv .text{
        height: 22px;
    }
    .scroll-child{
        width: 800px;
    }
    
}

/*------------main------------------------*/
main .wrapper{
    padding-top: 60px;
    padding-bottom: 60px;
    border-bottom: 1px solid #fff;
}
main section:first-child .wrapper{
    padding-top: 120px;
}
main section:last-child .wrapper{
    padding-bottom: 145px;
}
@media screen and (max-width: 744px){
    main .wrapper{
        padding-top: 40px;
        padding-bottom: 40px;
    }
    main section:first-child .wrapper{
        padding-top: 80px;
    }
    main section:last-child .wrapper{
        padding-bottom: 110px;
    }
}
@media screen and (max-width: 375px){
    main .wrapper{
        padding-top: 30px;
        padding-bottom: 30px;
    }
    main section:first-child .wrapper{
        padding-top: 60px;
    }
    main section:last-child .wrapper{
        padding-bottom: 90px;
    }
}
/*------------news------------------------*/
#news ul{
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: 0;
}

#news ul li a{
    display: flex;
    font-weight: 600;
}
#news ul li+li{
    margin-top: 30px;
}
#news .date{
    width: 200px;
}
#news .title{
    width: calc(100% - 200px);
    text-decoration: underline;
}
#news .more{
    text-align: center;
    margin-top: 30px;
    font-weight: 600;
}
#news .more a{
    text-decoration: underline;
}
@media screen and (max-width: 744px){
    #news ul{
        width: 100%;
        margin-right: auto;
    }
    #news .date{
        width: 120px;
    }
    #news .title{
        width: calc(100% - 120px);
    }
}
@media screen and (max-width: 375px){
    #news .date{
        width: 100px;
    }
    #news .title{
        width: calc(100% - 100px);
    }
}

/*------------profile------------------------*/
#profile ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 93%;
    margin: 0 auto;
    max-width: 1273px
}
#profile ul li{
    width: 33.3%;
}

@media screen and (max-width: 375px){
    #profile ul{
        width: 100%;
        justify-content: flex-end;
    }
    #profile ul li{
        width: 50%;
    }
    #profile ul li:nth-child(1){
        order: 2;
        transform: translateX(-24%);
    }
    #profile ul li:nth-child(2){
        order: 1;
        transform: translateY(50%) rotate(-26deg);
    }
    #profile ul li:nth-child(3){
        order: 4;
        transform: translateX(-5%) rotate(10deg);
    }
    #profile ul li:nth-child(4){
        order: 3;
        transform: translateY(50%) rotate(-3deg);
    }
    #profile ul li:nth-child(5){
        order: 5;
        transform: translateX(-10%) rotate(26deg);
    }
    #profile ul li img {
      max-width: 110%;
    }
}

/*--------------modal----------------------*/
#mw{
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: -1; /*初期値非表示*/
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s linear, visibility 0.2s linear, z-index 0.2s linear;
}
#mw.open{
    z-index: 999;
    opacity: 1;
    visibility: visible;
}
.modalbg{
    position: absolute;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.7);
    z-index: -1;
}

.modal{
    width: 75%;
    max-width: 890px;
    background: rgba(7,0,69,0.85);
    border-radius: 10px;
    border: 5px solid #fff;
    box-shadow: 0 4px 4px rgba(0,0,0,0.25);
    height: 75vw;
    min-height: 380px;
    max-height: 777px;
    padding: 40px;
    position: relative;
    overflow: hidden;
}
.modal .inner{
    position: absolute;
    left: 0;
    top: 0;
    background-image: url("../images/webp/bg_mikoto.webp");
    background-position: left -130px bottom 10px;
    background-repeat: no-repeat;
    background-size: auto 85%;
    height: 100%;
    padding: 40px 20px;
}
#mw.mikoto .modal .inner{
    background-image: url("../images/webp/bg_mikoto.webp");
    background-position: left -130px bottom 10px;
}
#mw.yuzuha .modal .inner{
    background-image: url("../images/webp/bg_yuzuha.webp");
    background-size: auto 82%;
    background-position: left -87px bottom 10px;
}
#mw.maestra .modal .inner{
    background-image: url("../images/webp/bg_maestra.webp");
    background-position: left -130px bottom 10px;
}
#mw.waka .modal .inner{
    background-image: url("../images/webp/bg_waka2.webp");
    background-size: auto 78%;
    background-position: left -52px bottom 10px;
}
#mw.itsuki .modal .inner{
    background-image: url("../images/webp/bg_itsuki.webp");
    background-position: left -164px bottom;
    background-size: auto 90%;
}

.modal h3{
    font-family: 'Barlow Condensed',"Noto Sans JP","游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
    font-weight: 600;
    font-size: 10rem;
    line-height: 1;
    text-transform: uppercase;
    transition: .2s ease-in-out;
}
.modal ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 65%;
    margin: 45px 0 0 auto;
}
.modal ul li{
    width: 33.3%;
}
.modal ul li:nth-child(1){
    transform: translateY(30px);
}
.modal ul li:nth-child(5){
    transform: rotate(20deg);
}
.modal ul li img{
    max-width: 100%;
    filter: grayscale(100%);
    transition: filter .2s ease-in-out;
}
.modal ul li img.active,
.modal ul li a:hover img{
    filter: grayscale(0);
}
.modal .inner_text{
    position: relative;
    width: 65%;
    margin-right: 0;
    margin-left: auto;
    margin-top: 20px;
}
.modal dl{
    background: rgba(0,0,0,0.5);
    width: 100%;
    padding: 20px;
    box-shadow: 0 4px 5px rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
#mw.mikoto dl.mikoto,
#mw.yuzuha dl.yuzuha,
#mw.yuzuha dl.yuzuha,
#mw.maestra dl.maestra,
#mw.waka dl.waka,
#mw.itsuki dl.itsuki{
    opacity: 1;
}

.modal dl dt{
    font-weight: 600;
    font-size: 3.0rem;
    margin-bottom: 10px;
}
.modal dl dd{
    font-size: 2.4rem;
}
.modal .close{
    position: absolute;
    top: 20px;
    right: 20px;
    color: #070045;
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 5px;
    font-size: 5.5rem;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
    font-size: 30px;
}
@media screen and (max-height: 780px){
    .modal{
        max-width: 710px;
        max-height: 570px;
    }
    .modal .inner{
        padding: 25px;
    }
    #mw.mikoto .modal .inner {
      background-position: left -76px bottom 10px;
    }
    #mw.yuzuha .modal .inner {
        background-size: auto 80%;
        background-position: left -49px bottom 10px;
    }
    #mw.maestra .modal .inner {
        background-size: auto 80%;
        background-position: left -35px bottom 10px;
    }
    #mw.itsuki .modal .inner {
      background-position: left -103px bottom;
    }
    .modal h3{
        font-size: 8.5rem;
    }
    .modal ul{
        width: 45%;
        min-width: 350px;
        margin-top: 30px;
    }
    .modal .inner_text{
        width: 55%;
        margin-right: 5%;
    }
    .modal dl dt{
        font-size: 2.8rem;
    }
    .modal dl dd{
        font-size: 2.2rem;
    }    
}
@media screen and (max-width: 1280px){
    .modal h3{
        font-size: 7.8rem;
    }
    .modal ul{
        width: 60%;
    }
    .modal .inner_text{
        width: 55%;
    }
}
@media screen and (max-height: 1080px) and (max-width: 900px){
    .modal{
        max-height: 555px;
    }
    #mw.mikoto .modal .inner {
      background-position: left -76px bottom 10px;
    }
    #mw.yuzuha .modal .inner {
        background-size: auto 80%;
        background-position: left -55px bottom 10px;
    }
    #mw.maestra .modal .inner {
        background-size: auto 80%;
        background-position: left -35px bottom 10px;
    }
    #mw.itsuki .modal .inner {
      background-position: left -103px bottom;
    }
    .modal ul{
        margin-top: 20px;
    }
    .modal dl{
        padding: 15px;
    }
    .modal dl dt{
        font-size: 2.6rem;
        margin-bottom: 5px;
    }
    .modal dl dd{
        font-size: 2.0rem;
    }
}

@media screen and (max-width: 744px){
    .modal{
        width: 85%;
    }
    .modal h3{
        font-size: 7.5rem;
        margin-bottom: 25px;
    }
}
@media screen and (max-width: 550px){
    .modal{
        padding: 15px;
    }
    .modal .inner{
        padding: 10px;
    }
    .modal ul {
        width: 65%;
        min-width: 0!important;
        margin-top: 50px;
    }
    .modal h3{
        font-size: 5.5rem;
    }
    .modal ul li:nth-child(1) {
      transform: translateY(14px);
    }
    #mw.mikoto .modal .inner {
        background-position: left -57px bottom 10px;
    }
    #mw.maestra .modal .inner {
        background-position: left -55px bottom 10px;
    }
    #mw.yuzuha .modal .inner {
        background-position: left -62px bottom 10px;
    }
    #mw.itsuki .modal .inner {
        background-position: left -100px bottom;
    }
    .modal .inner_text {
        margin-top: 10px;
    }
    .modal dl dt{
        font-size: 1.8rem;
    }
    .modal dl dd{
        font-size: 1.6rem;
    } 
}
@media screen and (max-width: 375px){
    .modal{
        min-height: 340px;
    }
    .modal h3{
        font-size: 5rem;
    }
    .modal ul {
        margin-top: 35px;
        gap: 13px 0;
    }
    .modal dl{
        padding: 10px;
    }
    .modal dl dt{
        font-size: 1.6rem;
    }
    .modal dl dd{
        font-size: 1.4rem;
    }
    .modal .close{
        width: 20px;
        height: 20px;
        border-radius: 3px;
        font-size: 2rem;
        line-height: 17px;
    }
    .modal ul li img {
        max-width: 100%;
    }
    #mw.maestra .modal .inner {
        background-position: left -52px bottom 10px;
    }
}
/*------------music------------------------*/
#music .inner{
    display: flex;
    justify-content: space-between;
    width: 100%;
	background: #212121;
	padding: 20px 5% 20px 20px;
	align-items: center;
	gap: 30px 50px;
	font-size: 1.6rem;
}
#music .inner figure{
	width: 55%;
}
#music .inner > div{
	width: calc(45% - 50px);
}
#music .inner h3{
	font-family: 'Barlow Condensed',"Noto Sans JP","游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
	font-weight: 800;
	font-size: 4.8rem;
	margin-bottom: 40px;
	line-height: 1;
	color: #C000BA;
}
#music .inner h3 span{
	display: block;
	padding-bottom: 20px;
	border-bottom: 2px solid #fff;
	color: #fff;
	font-size: 150%;
	margin-bottom: 20px;
}
#music .inner .detail{
	margin-bottom: 30px;
}

#music .inner dl{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
}
#music .inner dl dt{
	width: 150px;
	font-weight: 600;
}
#music .inner dl dd{
	flex: 1;
}
#music .inner p + p{
	margin-top: 15px;
}
#music .inner + .inner{
	margin-top: 40px;
}

@media screen and (max-width: 900px){
	#music .inner{
		display: block;
		padding: 20px;
		max-width: 600px;
		margin-right: auto;
		margin-left: auto;
	}
	#music .inner figure,
	#music .inner > div{
		width: 100%;
	}
	#music .inner figure{
		margin-bottom: 30px;
	}
}
@media screen and (max-width: 744px){
	#music .inner{
		font-size: 1.5rem;
	}
	#music .inner h3{
		font-size: 3.5rem;
	}
}
@media screen and (max-width: 375px){
	#music .inner figure{
		margin-bottom: 20px;
	}
	#music .inner{
		font-size: 1.4rem;
	}
	#music .inner h3{
		font-size: 2.3rem;
		margin-bottom: 20px;
	}
	#music .inner h3 span{
		padding-bottom: 10px;
		margin-bottom: 10px;
	}
	#music .inner dl dt{
		width: 120px;
	}
	#music .inner .detail{
		margin-bottom: 20px;
	}
	#music .inner p + p{
		margin-top: 8px;
	}

	#music .inner + .inner{
		margin-top: 25px;
	}
}


/*------------media------------------------*/
#media ul{
    display: flex;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
    box-sizing: border-box;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}
#media ul li{
    width: calc((100% - 60px) / 3);
}
@media screen and (max-width: 744px){
    #media ul{
        width: 100%;
        gap: 20px;
    }
    #media ul li{
        width: calc((100% - 40px) / 3);
    }
}

@media screen and (max-width: 375px){
    #media ul{
        gap: 10px;
    }
    #media ul li{
        width: calc((100% - 20px) / 3);
    }
}