@charset "utf-8";
/* CSS設計:だいたいBEM */


html {
    font-size: 62.5%;
}
body {
    font-family: 'Shippori Mincho',"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", serif;
    color: #0E0B09;
    background-color: #fff;
    font-size: 1.6em;
    letter-spacing: .1em;
    line-height: 1.5;
}
.br {
    display: inline-block;
}
.text-lead {
    font-size: 1.8rem;
}
.img-L {
    margin: 0 auto;
    width: 100%;
    max-width: 700px;
}
.img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/*== ボタン共通設定 */
.btn{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
	overflow: hidden;
    /*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
   	border: 1px solid #D3678F;/* ボーダーの色と太さ */
    padding: 24px 30px;
    text-align: center;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s;
    background-color: #D3678F;
    font-weight: 500;
    font-size: 2rem;
}
.btn--S {
    border: 1px solid #857674;/* ボーダーの色と太さ */
    padding: 3px 8px;
    background-color: #ffffff78;
    border-radius: 2px;
    font-size: 1.5rem;
}

/*ボタン内spanの形状*/
.btn span {
	position: relative;
	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	color:#fff;
}
.btn--S span {
	color:#857674;
}

.btn:hover span{
	color:#D3678F;
}
.btn--S:hover span{
	color:#fff;
}
/*== 背景が流れる（左から右） */
.bgleft:before {
 	content: '';
    /*絶対配置で位置を指定*/
 	position: absolute;
 	top: 0;
 	left: 0;
 	z-index: 2;
    /*色や形状*/
 	background:#fff;/*背景色*/
 	width: 100%;
	height: 100%;
    /*アニメーション*/
 	transition: transform .4s cubic-bezier(0.8, 0, 0.2, 1) 0s;
 	transform: scale(0, 1);
	transform-origin: right top;
}
.btn--S.bgleft:before { 
    background-color: #857674;
}

/*hoverした際の形状*/
.bgleft:hover:before{
	transform-origin:left top;
	transform:scale(1, 1);
}






/*------------------
    op
------------------*/
#op-wrapper{
    
    position: fixed;
    
    width: 100%;
    height: 100%;
    z-index: 9999;
}
.op {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 100%;
    height: 100%;
    background: #FFE0DA fixed;
    mix-blend-mode: multiply;
}

#op-img {
    width: 98%;
    max-width: 100px;
}







.bg-paper-texture {
    background: url(../img/paper_texture.jpg);
}


.header {
    background-color: #FFE0DA;
    overflow: hidden;
    mix-blend-mode: multiply;
}
.header__inner {
    display: flex;
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    min-height: 692px;
    height: 100vh;
    max-height: 740px;
    z-index: 1;
    justify-content: center;
    
}

.header {
    mix-blend-mode: multiply;
}

.header-square {
    position: absolute;
    top: 5%;
    width: clamp(0px, 80vw, 650px);
    height: clamp(0px, 90%, 650px);
    background-color: #fff;
}

.header-catchcopy {
    position: absolute;
    font-weight: 500;
    top: 12%;
    font-size: clamp(1rem, 3vw, 2.4rem);
    letter-spacing: .18em;
    line-height: 2;
}
.girl02 {
    position: absolute;
    bottom: -1%;
    right: 52%;
    max-width: 430px;
    width: 70%;
}
.girl01 {
    position: absolute;
    bottom: -1%;
    left: 40%;
    max-width: 560px;
    width: 91%;
}
.site-logo {
    position: absolute;
    bottom: -0.5%;
    max-width: 560px;
    width: 91%;
}
.postmark {
    display: block;
    position: absolute;
    left: 15%;
    bottom: 16%;
    width: 400px;
}

.header-1 {z-index: 1;}
.header-2 {z-index: 2;}
.header-3 {z-index: 3;}
.header-4 {z-index: 4;}
.header-5 {z-index: 5;}
.header-6 {z-index: 6;}
.flash-sunlight-1 {animation: flash 2s linear infinite;}
.flash-sunlight-2 {animation: flash 2.5s linear infinite;}
.flash-sunlight-3 {animation: flash 6s linear infinite;}
.flash-shine {animation: flash 3s ease infinite;}
.flash-flower {animation: flash-2 1.5s ease infinite;}
.fade-in {animation: fade-in 1.8s ease-out;}
.fade-in-down {animation: fade-in-down 1.8s ease-out;}
.rotate {animation: rotate 5s cubic-bezier(.2,.38,.8,.61) infinite;}
.scale-up {animation: scale-up 0.5s ease-out;}

@keyframes fade-in {
  0% {opacity: 0; transform: translateY(-10px);}
  100% {opacity: 1;transform: translateY(0);}
}
@keyframes fade-in-down {
  0% {opacity: 0; transform: translateY(-50px);}
  100% {opacity: 1; transform: translateY(0);}
}
@keyframes flash-2 {
    0% {opacity: 1;}
    50% {opacity: 0.6;}
}
@keyframes rotate {
    0% {transform:rotate(0);}
    100% {transform:rotate(360deg);}
}
@keyframes scale-up {
    0% {transform:scale(0);}
    50% {transform:scale(0.8);}
    100% {transform:scale(1);}
}

.fadeInToTop { animation: fadeInToTop 2.4s forwards ease; opacity: 0;}
@keyframes fadeInToTop {
    0% { opacity: 0; top: 40%; }
    30%   { opacity: 1; top: 40%; }
    50%   { opacity: 1; top: 40%; }
    100%   { opacity: 1; }
}

.fadeInToRightTrigger{ opacity: 0; }

.fadeInToRight { animation: fadeInToRight 1s forwards ease-out; opacity: 0;}
@keyframes fadeInToRight {
    from { opacity: 0; transform: translate(-50px); }
    to   { opacity: 1; transform: translate(0); }
}
.fadeInToLeft { animation: fadeInToLeft 1s 2.6s forwards ease-out; opacity: 0;}
@keyframes fadeInToLeft {
    from { opacity: 0; transform: translate(50px); }
    to   { opacity: 1; transform: translate(0); }
}
.stampAnimation { animation: stampAnimation 1s 4s forwards ease; opacity: 0;}
@keyframes stampAnimation {
    0% { opacity: 0; transform: scale(1.1) rotate(-10deg); }
    35%   { opacity: 1; transform: scale(1.2)  rotate(-6deg); }
    65%   { opacity: 1; transform: scale(1.2)  rotate(-6deg); }
    100%   { opacity: 1; transform: scale(1.0)  rotate(-7deg); }
}
.fadeInToBottom { animation: fadeInToBottom 1.2s 3s forwards ease-out; opacity: 0;}
@keyframes fadeInToBottom {
    from { opacity: 0; transform: translate(0,-50px); }
    to   { opacity: 1; transform: translate(0); }
}
.fuwafuwa {
-webkit-animation:fuwafuwa 3s infinite ease-in-out alternate;
animation:fuwafuwa 3s infinite ease-in-out alternate;
}

@-webkit-keyframes fuwafuwa {
0% {-webkit-transform:translate(0, 0);}
50% {-webkit-transform:translate(0, -10px);}
100% {-webkit-transform:translate(0, 0);}
}

@keyframes fuwafuwa {
0% {transform:translate(0, 0);}
50% {transform:translate(0, -10px);}
100% {transform:translate(0, 0);}
}



.main {
    opacity: 0;
    background: url(../img/paper_texture.jpg);
}

.sec {
    position: relative;
    padding: 4rem 0;
}
.sec--bg1 {
    background-color: #FFE0DA;
    mix-blend-mode: multiply;
}
.sec--bg2 {
    background-color: #edfaff;
    mix-blend-mode: multiply;
}

.sec__inner {
    position: relative;
    margin: 0 auto;
    padding: 0 2rem;
    max-width: 1024px;
}

.sec__head {
    margin-bottom: 1rem;
    font-size: 4rem;
}
.sec__content {
    margin: 2rem 0;
}
.sec__content--bg {
    padding: 2rem;
    background-color: #fff;
    border-radius: 5px;
}

.sec__description {
    font-size: 2rem;
}

.sec__bodyInnerContent {
    margin: 6rem 0;
}



.head {
    font-weight: bold;
}
.head--bg {
    padding: 0.3em 0;
    background-image: url(../img/rose_fabric.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center; 
}

.head__elem {
    font-size: 1em;
    height: 3em;
    line-height: 1em;
}

.headSub {
    margin-bottom: 1rem;
    font-size: 2rem;
}

.headSub--3 {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    height: 4.6em;
}
.headSub--3.head--bg {
    padding: 1em 0;
    background-image: url(../img/star.png);
    background-size: 5em;
}



.album-title {
    font-weight: bold;
}





.mediaL {
    display: flex;
    gap: 2rem;
}
.mediaL__imgwrap {
    flex: 1;
}
.mediaL__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    gap: 4rem;
}

.mediaL__title {
    font-size: 2rem;
    margin-bottom: 1rem;;
}
.mediaL--reverse {
    flex-direction: row-reverse;
}











.tracklist {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.tracklist > ul > li {
    padding: 4px 8px;
    font-size: 2rem;
    border-bottom: 1px solid #857674;
}

.spec {
    padding: 16px;
    border: 1px solid #857674;
    font-size: 14px;
}
.spec__detail {
    margin-bottom: 1.6rem;
}
.price {
    font-size: 2.4rem;
    font-weight: 500;
}

.text-smaller {
    font-size: 0.6em;
}

.spec-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}







.goods-img {
    margin: 2.6rem auto;
    max-width: 500px;
}
.package-design__img {
    margin: 0 auto;
    width: 100%;
    max-width: 800px;
}


.goods__info {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 4px;
}
.goods__title {
    font-size: 2rem;
    font-weight: bold;
}









.youtube {
margin: 0 auto;
    width: 100%;
}
.youtube--L { max-width: 600px; }
.youtube--S { max-width: 400px; }

.youtube__inner {
    position: relative;
    margin: 24px auto;
    padding-top: 56.25%;
}
.youtube__inner iframe,
.youtube__inner img{
	position: absolute;
	top: 0;
	left: 0;
    width: 100%;
    height: 100%;
}




.mediaM-container {
    display: flex;
    flex-direction: column;
    gap: 6rem;
    margin-left: 2rem;
    align-items: center;
}
.mediaM {
    display: flex;
    align-items: center;
    position: relative;
    max-width: 700px;
    margin: 0 auto;
}
.mediaM--bg1 {
    background-color: #B9EAF9;
    border: 2px solid #B9EAF9;
}
.mediaM--bg2 {
    background-color: #F2E6C2;
    border: 2px solid #F2E6C2;
}
.mediaM--bg3 {
    background-color: #F1DCE1;
    border: 2px solid #F1DCE1;
}
.mediaM__imgwrap {
    margin: -2rem 2rem 2rem -2rem;
    flex: 0 1 30%;
    border: 1px solid #ddd;
}
.mediaL__img {
    width: 100%;
}
.mediaM__body {
    flex: 1;
    margin: 20px;
    text-align: left;
}
.mediaL__title {
    font-size: 2rem;
    margin-bottom: 1rem;;
}
.mediaL--reverse {
    flex-direction: row-reverse;
}

.discography-link {
    display: block;
}
.discography-link:hover .mediaM__imgwrap {
    margin: -1rem 1rem 1rem -1rem;
    transition: .4s;
}
.discography-link:hover .mediaM {
    background-color: #fff;
    transition: .4s;
}

 .discography__subtitle {
    font-size: 1.2rem;
 }


.discography__title {
    font-size: 2.4rem;
}
.discography__info {
    margin-top: 1.6rem;
    font-size: 1.2rem;
}



.staff-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: 600px;
    margin: 0 auto;
    gap: 4.8rem;

}
.staff-producer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
}
.staff-producer__name {
    font-size: 2rem;
}
.staff {
    display: flex;
    gap: 1.6rem;
}
 .staff__col {
    display: flex;
    padding: 8px;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    gap: 3.2rem;
 }

.staff__title {
    display: flex;
    padding: 4px 8px;
    align-items: center;
    gap: 8px; 
    border-bottom: 1px solid #857674;
    color: #857674;
    font-size: 1.2rem;
}
.staff__name {

}
.staff__name span {
    font-size: .8em;
}
.staff__contents {
    display: flex;
    flex-direction: column;
    gap: 8px; 
    padding: 8px;
    border-bottom: 1px solid #857674;

}
.staff-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.staff__link {
    display: flex;
    gap: 0.8rem;
    
}














.cards {
    display: flex;
    flex-wrap: wrap;
    margin: -1rem;  /* cards__item-inner の相殺*/
}
.cards--col1 {
    flex-direction: column;
}
.cards--col2 > .cards__item {
    max-width: calc(100% / 2);
    flex-basis: calc(100% / 2); 
}
.cards--col3 > .cards__item {
    max-width: calc(100% / 3);
    flex-basis: calc(100% / 3); 
}
.cards--spaceBetween {
    justify-content: space-between;
}
.cards__item {
    flex: 1;
}
.cards__item-inner {
    margin: 1rem; /* .cards で外側相殺*/
}






.card__inner {
    padding: 1rem;
    
}

 
.price-boxes {
    display: inline-flex;
}



.price-box {
    margin: 1rem;
    border: 1px solid #aaa;
    border-radius: 5px;
}
.price-box__head {
    padding: 2rem 1rem;
    background-color: #59AFAF;
    color: #fff;
}
.price-box__head--plan2 {
    background-color: #5984AF;
}
.price-box__plan {
    margin-bottom: 0.5em;
    font-weight: bold;
}
.price-box__price {
    font-weight: bold;
    font-size: 2.8rem;
}
.price-box__price--per {
    font-size: 0.5em;
}
.price-box__body {
    text-align: left;
}
.price-box__features {
    padding: 2rem;
}
.price-box__feature {
    margin: .8em 0;
    font-size: 1.4rem;
    font-weight: bold;
}

.price-box__feature:before {
    content: "●";
    color: #59AFAF;
    padding-right: .5em;
}
.price-box__feature--plan2:before { 
    color: #5984AF;

}





.story-section {
    height: 100vh;
}

.story {
    display: inline-block;
    position: relative;
    margin: 20px 0;
}
.story__bg {
    width: 100%;
    max-width: 800px;
}
.story__bg2 {
    position: absolute;
    right: 5%;
    bottom: 20%;
    width: 50%;
    opacity: 0.2;
}
.story__elem {
    position: absolute;
    top: 10%;
    left: 10%;
    right:10%;
    text-align: left;
}
.story__catchcopy {
    font-size: 1.6rem;
    color: #80330d;
    margin-bottom: 1.6rem;
}
.story__text {
    color: #7d513a;
    line-height: 1.7rem;
}




.character__fg {
    position: absolute;
    top: -20px;
    bottom: 0;
     left: 2px;
     height: 200px;
}








.cdInfo {
    position: relative;
    color: #542E26;
}
.cdInfo__bg {
    width: 100%;
}
.cdInfo__bg2{
    position: absolute;
    top: -34px;
    bottom: 0;
    left: -34px;
    right: 0;
    width: 108%;
}
.cdInfo__inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
}



/*------------------
  banner
 ------------------*/
 .bn-img-wrapper{
    margin:  0 auto;
    padding: 5px;
    max-width: 510px;
    text-align: center;
}
.bn-img{
    display: block;
    padding: 10px 0;
}
.bn-200{width: 200px;}
.bn-400{width: 400px;}
.bn-500{width: 500px;}













.release  {
    display: block;
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 800px;
}
.release__bg {
    width: 100%;
}

.release__content {
    display: flex;
    align-items: center;
    position: absolute;
    padding: 6rem;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    
}
.release__contentInner{
    width: 50%;
}
.release__fg {
   position: absolute;
    top: -10%;
    bottom: 0;
    right: -10%;
    height: 110%
}

.events {
    display: flex;
    flex-direction: column;
    margin: 1rem auto;
}
.events__elem {
    margin: 1rem;
}
.event__space {
    margin-top: 1rem;
    font-size: 3rem;
}
.hrImg {
    margin: 1rem;
}

.shops {
    display: flex;
    flex-wrap: wrap;
    margin: 1rem auto;
}
.shops__elem {
    flex: 1;
    margin: 1rem;
}
.shops__elem--L {
    flex: 100%;
}
.shop__link { 
    display: inline-block;
    padding: 1rem;
    width: 150px;
    background-color: #665240;
    text-align: center;
    border: 1px solid rgb(243,238,237);
    font-size: 16px;
    font-weight: normal;
    border-radius: 3px;
    
}
.shop__link:hover {
    
    background: rgba(99, 99, 99, 0.5);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}
.shop__text {
    margin-top: .5rem;
}



.cornerBevel{
    margin-top: 2rem;
    background: #ffffff42;
    position: relative;
}
.cornerBevel:before,
.cornerBevel:after{
    width: 100%;
    height: 0;
    display: block;
    position: absolute;
    left: 0;
    content: "";
}
.cornerBevel:before{
    border-bottom: solid 2rem #ffffff42;
    border-right: solid 2rem transparent;
    bottom: 100%;
}
.cornerBevel:after{
    border-top: solid 2rem #ffffff42;
    border-left: solid 2rem transparent;
    top: 100%;
}

.spacial__cdset {
    max-width: 800px;
    margin: 0 auto;
}
.specialCD {
    margin-top: 6rem;
}
.specialCD__infoText {
    margin-bottom: 1rem;
}
.strong {
    font-size: 1.4em;
}

.specialCdInfo {
    position: relative;
    margin-top: 4rem;

}

.specialCdInfo__inner {
    margin: 0 auto;
    width: 500px;
    
}



.discoPickUp__elem {
    margin: 6rem 0;
}
.discoPickUp__text {
    margin: 2rem 0;
}
.discoPickUp__link {
    margin: 2rem 0;
}
.discoPickUp__media {
    margin: 3rem 0;
}


.disco {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
}
.disco > a{
    margin: 1rem;


}

.link__elem {
    margin: 4rem 0;
}
.linkIcons {
    display: flex;
    justify-content: center;
}

.linkIcon__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem;
    width: 80px;
    height: 80px;
    background-color: #e6d1ac;
    border-radius: 5px;
    color: #7d513a;
    font-size: 1.2rem;
    font-weight: bold;
}
.linkIcon__inner:hover {
    background: rgba(99, 99, 99, 0.5);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}
.footer {

}
.footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.4rem;
    padding: 1.6rem;
}
.footer__logo {
    width: 12rem;
    
}
.copyright {
    font-size: 1.2rem;
}
@media screen and (max-width: 600px){
    html{ font-size: 50%;}
    .br { display: inline;}
    .girl01 {
        left: calc(50% - 120px);
        width: 600px;
        max-width: none;
   }
   .girl02 {
       width: 500px;
  }
  .postmark {
    left: 8px;
  }
    .cards,
    .price-boxes {
        flex-direction: column;
    }
    .mediaL { flex-direction: column; }
    .mediaL__imgwrap {
        margin: 0 auto;
        max-width: 300px;
    }
    .cards--col2 > .cards__item,
    .cards--col3 > .cards__item {
        max-width: none;
    }
    .bn-200{max-width: 39%;}
    .bn-400{max-width: 78%;}
    .bn-500{max-width: 98%;}
}
@media screen and (max-width: 425px){
    .mobile-br {
        display: block;
    }
    .header-catchcopy {
        top: 9%;
        font-size: clamp(1rem, 3.9vw, 2.4rem);

    }
    .mediaM-container {
        margin: 3rem 0;
        gap: 10rem;
    }
    .mediaM {
        flex-direction: column;
    }
    .mediaM__imgwrap {
        margin: -3rem 3rem 0;
        max-width: 300px;
    }
    .staff {
        flex-direction: column;
    }
}