@charset "utf-8";
/*-----------------------------------------------
 * MUSIC
-------------------------------------------------*/
#music {
  padding-bottom: 0;
}
#music .contentTitle__en {
  height: 72px;
}
#music .contentTitle__ja:before,
#music .contentTitle__ja:after {
  background-image: linear-gradient(var(--color-green), var(--color-green));
}
.musicContent {
  position: relative;
  width: 100%;
  margin-top: 48px;  
}
@media screen and (max-width: 768px) {
  #music {
    padding-bottom: calc(264 / var(--vw-min) * 100vw);
    overflow: hidden;
  }
  #music .contentTitle__en {
    height: calc(84 / var(--vw-min) * 100vw);
  }
  .musicContent {
    margin-top: calc(96 / var(--vw-min) * 100vw);
  }
}
/*-----------------------------------------------
 * musicNav
-------------------------------------------------*/
.musicNav{
  color: var(--color-pink);
  text-align: center;
  font-weight: 500;
}
.musicNav li{
  border: 1px solid;
  border-color: var(--color-pink);
  border-radius: 8px;
  background-color: #fff;
}
.musicNav li a{
  position: relative;
  text-decoration: none;
  color: var(--color-pink);
  display: block;
  width: 100%;
  padding: 10px 24px;
}
.musicNav li a::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background-image: url('../img/common/arrow.svg');
  background-size: contain;
  background-repeat: no-repeat;
}
@media screen and (min-width: 769px) {
  .musicNav{
    position: relative;
    z-index: 2;
    margin-bottom: -27px;
  }
  .musicNav ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;    
	}
	.musicNav li{
		width: calc((100% - 460px) / 3);
		margin-left: 10px;
    font-size: min(calc(18 / var(--vw-min) * 100vw), 18px);
    background-color: #fff;
	}
  .musicNav li:first-child{
    margin-left: 0;
  } 
  .musicNav li:hover {
    background-color: #ffe2ef;
  }  
  .musicNav li:hover a {
    color: var(--color-pink);
  }
  .musicNav li,
  .musicNav li a {
    transition: background-color 0.3s, color 0.3s;
  }  
}
@media screen and (max-width: 768px) {
  .musicNav{
    padding-bottom: 2vw;
  }
  .musicNav ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;    
	}
	.musicNav li{
		width: calc((100% - 10vw) / 2);
    margin-bottom: 2vw;    
	}
  .musicNav li:nth-child(even){
    margin-left: 2vw;
  }
  .musicNav li a{
    padding: 2vw 4vw;
  }
  .musicNav li a::after {
    right: 1vw;
    width: 2vw;
    height: 2vw;
  }
}

.musicNav__activ{
  background-color: #ffe2ef !important;
}
/*-----------------------------------------------
 * musicContWrap
-------------------------------------------------*/
.musicContWrap{
  padding: 80px 0;
  background-color: var(--color-pink);
}
@media screen and (min-width: 769px) {
  .musicContWrap{
    position: relative;
  }
}
@media screen and (max-width: 768px) {
  .musicContWrap{
    padding: 10vw 0;
  }
}
.musicContWrap > p{
  color: #fff;
  font-size: min(calc(36 / var(--vw-min) * 100vw), 36px);
}
@media screen and (max-width: 768px) {
  .musicContWrap > p{
    font-size: calc(48 / var(--vw-min) * 100vw);
  }
}

/* musicSubtxt */
.musicSubtxt{
  font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
  display: block;
}
@media screen and (max-width: 768px) {
  .musicSubtxt{
    font-size: calc(32 / var(--vw-min) * 100vw);
  }
}

/* artistImg */
.artistImg{
  width: 620px;
  margin: 0 auto;
  padding-top: 20px;
}
.artistImg img{
  width: 100%;
}
@media screen and (max-width: 768px) {
  .artistImg{
    width: 90%;
    padding-top: 2vw;
  }
}

/* music__profile */
.music__profile{
  width: 620px;
  margin: 0 auto;
  padding-top: 20px;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .music__profile{
    width: 90%;
    padding-top: 4vw;
  }
}

/* music__category */
.music__category{
  color: var(--color-pink);
  background-color: #fff;
  font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
  display: inline-block;
  padding: 3px 8px;
  font-weight: 800;
}
@media screen and (max-width: 768px) {
  .music__category{
    font-size: calc(32 / var(--vw-min) * 100vw);
    padding: 0.5vw 2vw;
  }
}

/* music__ctxt */
@media screen and (max-width: 768px) {
  .music__ctxt{
    font-size: calc(32 / var(--vw-min) * 100vw);
  }
}

/* musicLangWrap */
.musicLangWrap{
	position: relative;
	padding-top: min(calc(8 / var(--vw-min) * 100vw), 8px);
}
@media screen and (max-width:768px){
	.musicLangWrap{
		padding-top: 3vw;
	}
}

.musicLists{
	display: flex;
	gap: min(calc(8 / var(--vw-min) * 100vw), calc(8px * var(--max-percent)));
}
.musicList{
	position: relative;
	display: inline-block;
	line-height: 1;
}
.musicList__link{
	min-width: min(calc(100 / var(--vw-min) * 100vw), calc(100px * var(--max-percent)));
	display: inline-block;
	font-family: var(--font-en);
	font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
	text-align: center;
	text-decoration: none;
	line-height: 1;
	border: 2px solid var(--color-main);
	border-radius: 40px;
	overflow: hidden;
	padding: min(calc(10 / var(--vw-min) * 100vw), calc(10px * var(--max-percent))) min(calc(34 / var(--vw-min) * 100vw), calc(34px * var(--max-percent)));
	color: var(--color-main);
	position: relative;
	background-color: #fff;
  width: 201px;
}
.musicList__link > span{
	position: relative;
}
.musicList__link:after{
	content: '';
	position: absolute;
	top: 0;
	right: min(calc(10 / var(--vw-min) * 100vw), calc(10px * var(--max-percent)));
	bottom: 0;
	margin: auto 0;
	width: min(calc(14 / var(--vw-min) * 100vw), calc(14px * var(--max-percent)));
	height: min(calc(14 / var(--vw-min) * 100vw), calc(14px * var(--max-percent)));
	-webkit-mask: url(../img/common/arrow_circle.svg) no-repeat center / contain;
	mask: url(../img/common/arrow_circle.svg) no-repeat center / contain;
	background-color: var(--color-main);
}
@media screen and (hover:hover) and (pointer: fine){
	.musicList__link,
	.musicList__link:after{
		transition: .3s ease;
	}
	.musicList__link:before{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(var(--color-main), var(--color-main)) right bottom / 0 100% no-repeat;
		transition: background-size 0.4s;
		opacity: 20%;
	}
	.musicList__link:hover::before{
		background-size: 100% 100%;
		background-position: left bottom;
	}
}
@media screen and (max-width:768px){
	.musicLists{
		gap: 0;
	}
	.musicList__link{
		font-size: calc(24 / var(--vw-min) * 100vw);
		padding: var(--sp-size-12) var(--sp-size-48);
    width: 31vw;
	}
	.musicList__link:after{
		width: var(--sp-size-24);
		height: var(--sp-size-24);
		right: var(--sp-size-12);
	}
}

/*-----------------------------------------------
 * musicGoodsWrap
-------------------------------------------------*/
.musicGoodsWrap{
  color: #fff;
}
.musicGoodsWrap img{
  width: 100%;
}

/* ul */
@media screen and (min-width: 769px) {
  .musicGoodsWrap{
    width: calc(100% - calc(100 / var(--vw-min) * 100vw));
    max-width: min(calc(1080 / var(--vw-min) * 100vw), 1080px);
    margin: 0 auto;
    padding-top: 40px
  }
  .musicGoodsWrap ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.musicGoodsWrap li:first-child{
		width:40%;
	}
  .musicGoodsWrap li:last-child{
		width:55%;
	}  
}

@media screen and (max-width:768px){
  .musicGoodsWrap{
    font-size: calc(32 / var(--vw-min) * 100vw);
  }
  .musicGoodsWrap li{
    width: 90%;
    margin:0 auto
  }
  .musicGoodsWrap li:first-child{
    margin-top: 2vw;
    margin-bottom: 6vw;
  }
  .musicGoodsWrap_link{
    width: 35vw;
  }
}

/* dl */
@media screen and (min-width: 769px) {
  .musicGoodsWrap dd {
    margin-top: 8px;
    line-height: 1.5;
  }
}
@media screen and (max-width:768px){
  .musicGoodsWrap dd {
    margin-top:2vw;
    line-height: 1.5;
  }
}

/* ondemand */
@media screen and (min-width: 769px) {
  .ondemand{
    margin-top: 20px;    
  }
}
@media screen and (max-width:768px){
  .ondemand{
    margin-top: 4vw;
  }
}

/* musicGoodsLink */
.musicGoodsLink{
	position: relative;
	padding-top: min(calc(8 / var(--vw-min) * 100vw), 8px);
}
@media screen and (max-width:768px){
	.musicGoodsLink{
		padding-top: 3vw;
	}
}
@media screen and (min-width: 769px) {
  .musicListsLink{
	display: flex;
	gap: min(calc(8 / var(--vw-min) * 100vw), calc(8px * var(--max-percent)));
}
}
.musicListLink{
	position: relative;
	display: inline-block;
	line-height: 1;
}
.musicList__linkR{
	min-width: min(calc(100 / var(--vw-min) * 100vw), calc(100px * var(--max-percent)));
	display: inline-block;
	font-family: var(--font-en);
	font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
	text-align: center;
	text-decoration: none;
	line-height: 1;
	border: 2px solid var(--color-main);
	border-radius: 40px;
	overflow: hidden;
	padding: 1vw 2.8vw 1vw 2vw;
	color: var(--color-main);
	position: relative;
	background-color: #fff;
}
.musicList__linkR > span{
	position: relative;
}
.musicList__linkR:after{
	content: '';
	position: absolute;
	top: 0;
	right: min(calc(10 / var(--vw-min) * 100vw), calc(10px * var(--max-percent)));
	bottom: 0;
	margin: auto 0;
	width: min(calc(14 / var(--vw-min) * 100vw), calc(14px * var(--max-percent)));
	height: min(calc(14 / var(--vw-min) * 100vw), calc(14px * var(--max-percent)));
	-webkit-mask: url(../img/common/arrow_circle.svg) no-repeat center / contain;
	mask: url(../img/common/arrow_circle.svg) no-repeat center / contain;
	background-color: var(--color-main);
}
@media screen and (hover:hover) and (pointer: fine){
	.musicList__linkR,
	.musicList__linkR:after{
		transition: .3s ease;
	}
	.musicList__linkR:before{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(var(--color-main), var(--color-main)) right bottom / 0 100% no-repeat;
		transition: background-size 0.4s;
		opacity: 20%;
	}
	.musicList__linkR:hover::before{
		background-size: 100% 100%;
		background-position: left bottom;
	}
}
@media screen and (max-width:768px){
	.musicListsLink{
		gap: 0;
	}
	.musicList__linkR{
		font-size: calc(24 / var(--vw-min) * 100vw);
		padding: 2vw 3.2vw 2vw 2vw;    
	}
	.musicList__linkR:after{
		width: var(--sp-size-24);
		height: var(--sp-size-24);
		right: var(--sp-size-12);
	}
}

/*-----------------------------------------------
 * beneit
-------------------------------------------------*/
.beneit {
  margin: 0 auto;
  background-color: #fff;
  padding: 3vw;
}
.benefit_tit {
  color: var(--color-pink);
  text-align: center;
  font-weight: 800;
  font-size: min(calc(36 / var(--vw-min) * 100vw), 36px);
}
@media screen and (max-width: 768px) {
  .benefit_tit {
    font-size: calc(48 / var(--vw-min) * 100vw);
  }
}
.benefit_info {
  line-height: 1.8;
  margin-bottom: 20px;
}
.benefit_name {
  color: var(--color-pink);
  display: block;
  font-weight: 500;
}
.benefit_goods {
  color: #000;
  display: block;
  font-weight: 500;
}
.musicList__linkR {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: var(--color-main);
}
.musicList__linkR span {
  position: relative;
  z-index: 1;
}

@media screen and (min-width: 769px) {
  .beneit {
    width: 70%;
  }
  .beneit ul {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: left;
    padding-top: 40px;
  }
  .beneit li {
    display: flex;
    flex-direction: column;
    width: 30%;
    margin-left: 5%;
    margin-bottom: 5%;
  }
  .beneit li:nth-child(3n + 1) {
    margin-left: 0;
  }
  .beneit dt img {
    width: 100%;
  }
  .beneit li dl {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .beneit li dl dd {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-top: 20px;
  }
  .beneit li dl dd .musicList__linkR {
    margin-top: auto;
  }

  @media screen and (hover: hover) and (pointer: fine) {
    .musicList__linkR,
    .musicList__linkR:after {
      transition: .3s ease;
    }
    .musicList__linkR:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(var(--color-main), var(--color-main)) right bottom / 0 100% no-repeat;
      transition: background-size 0.4s;
      opacity: 0.2;
    }
    .musicList__linkR:hover::before {
      background-size: 100% 100%;
      background-position: left bottom;
    }
  }
}
@media screen and (max-width: 768px) {
  .beneit{
    width: 95%;
    margin: 0 auto;
  }
  .beneit ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4vw;
    padding-top: 4vw;
    font-size: calc(32 / var(--vw-min) * 100vw);
  }
  .beneit li {
    display: flex;
    flex-direction: column;
    margin-bottom: 4vw;
  }
  .beneit dt img {
    width: 100%;
  }
  .beneit li dl {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .beneit li dl dt {
    margin-bottom: 12px;
  }
  .beneit li dl dd {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-top: 12px;
  }
  .beneit li dl dd .musicList__linkR {
    margin-top: auto;
  }
  .musicListsLink {
    gap: 0;
  }
  .musicList__linkR {
    font-size: calc(24 / var(--vw-min) * 100vw);
    padding:3.1vw 4.2vw 3vw 3vw;
  }
  .musicList__linkR:after {
    width: var(--sp-size-24);
    height: var(--sp-size-24);
    right: var(--sp-size-12);
  }
}


/*-----------------------------------------------
 * parts
-------------------------------------------------*/
.center{
  text-align: center;
}

.mt{
  margin-top: 8px;
}
@media screen and (max-width: 768px) {
  .mt{
    margin-top: 3vw;
  }
}

.mt_g{
  margin-top: 30px;
}
@media screen and (max-width: 768px) {
  .mt_g{
    margin-top: 8vw;
  }
}

.indent1{
    display: block;
    padding-left: 1.2em;
    text-indent: -1.2em;
}
@media screen and (max-width: 768px) {
  .indent1{
    padding-left: 1em;
    text-indent: -1em;
}
}

.indent__cout{ 
    display: block;
    padding-left: 1em;
    text-indent: -1em;
}