@charset "UTF-8";

.my-official-discography{
position:relative;
width:100%;
/*padding:clamp(80px,10vw,150px) clamp(20px,5vw,80px);*/
padding:0 clamp(20px,5vw,80px);
overflow:hidden;
}



.my-official-discography__header{
display:flex;
flex-direction:column;
gap:14px;
width:100%;
max-width:1600px;
/*margin:0 auto clamp(40px,6vw,80px);*/
margin:0 auto 1em;
}
.my-official-discography__eyebrow{
margin:0 0 0 .2em;
font-family:"Voltaire",sans-serif;
font-size:10px;
font-weight:400;
letter-spacing:.28em;
line-height:1;
opacity:.5;
}
.my-official-discography__heading-row{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:30px;
width:100%;
/*padding-bottom:18px;
border-bottom:1px solid currentColor;
border-bottom-color:rgba(255,255,255,.16);*/
}
.my-official-discography__title{
margin:0;
/*font-family:"Oswald","Noto Sans JP",sans-serif;*/
font-family:"Voltaire",sans-serif;
font-size:clamp(36px,6vw,92px);
font-weight:400;
letter-spacing:-.01em;
/*line-height:.9;*/
}
.my-official-discography__artist{
margin:0 0 5px;
font-size:clamp(10px,1vw,13px);
font-weight:400;
letter-spacing:.16em;
line-height:1.4;
text-align:right;
opacity:.55;
}



.my-official-discography__grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:
	clamp(34px,5vw,76px)
	clamp(16px,2.5vw,38px);
width:100%;
max-width:1600px;
margin:0 auto;
}



.my-official-release-card{
min-width:0;
margin:0;
}
.my-official-release-card__link{
display:block;
color:inherit;
text-decoration:none;
}
.my-official-release-card__visual{
position:relative;
aspect-ratio:1/1;
overflow:hidden;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.12);
}
.my-official-release-card__image{
display:block;
width:100%;
height:100%;
object-fit:cover;
transition:
	transform .7s cubic-bezier(.22,.61,.36,1),
	filter .5s ease;
}
.my-official-release-card__type-overlay{
position:absolute;
top:12px;
left:12px;
z-index:3;
display:inline-flex;
align-items:center;
min-height:24px;
padding:6px 9px 5px;
border:1px solid rgba(255,255,255,.45);
background:rgba(0,0,0,.52);
-webkit-backdrop-filter:blur(5px);
backdrop-filter:blur(5px);
color:#fff;
font-family:"Voltaire",sans-serif;
font-size:9px;
font-weight:400;
letter-spacing:.18em;
line-height:1;
text-transform:uppercase;
white-space:nowrap;
pointer-events:none;
}
.my-official-release-card__placeholder{
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:100%;
background:
	linear-gradient(
		135deg,
		rgba(255,255,255,.08),
		rgba(255,255,255,.015)
	);
}
.my-official-release-card__placeholder span{
font-family:"Voltaire",sans-serif;
font-size:clamp(28px,4vw,54px);
letter-spacing:.12em;
opacity:.18;
}
.my-official-release-card__overlay{
position:absolute;
inset:0;
display:flex;
align-items:flex-end;
justify-content:flex-end;
padding:14px;
background:
	linear-gradient(
		to top,
		rgba(0,0,0,.38),
		transparent 45%
	);
opacity:0;
transition:opacity .4s ease;
}
.my-official-release-card__arrow{
position:relative;
display:block;
width:31px;
height:31px;
border:1px solid rgba(255,255,255,.75);
border-radius:50%;
color:#fff;
transform:translate(-4px,4px);
transition:transform .4s ease;
}
.my-official-release-card__arrow::before{
content:"";
position:absolute;
left:7px;
bottom:14px;
width:17px;
height:1px;
background:currentColor;
transform:rotate(-45deg);
}
.my-official-release-card__arrow::after{
content:"";
position:absolute;
top:8px;
right:7px;
width:7px;
height:7px;
border-top:1px solid currentColor;
border-right:1px solid currentColor;
}
.my-official-release-card__link:hover
.my-official-release-card__image{
transform:scale(1.045);
filter:brightness(.77);
}
.my-official-release-card__link:hover
.my-official-release-card__overlay{
opacity:1;
}
.my-official-release-card__link:hover
.my-official-release-card__arrow{
transform:translate(0,0);
}



.my-official-release-card__body{
padding-top:16px;
}
.my-official-release-card__title{
margin:0;
font-size:clamp(13px,1.3vw,18px);
font-weight:500;
letter-spacing:.03em;
line-height:1.5;
}
.my-official-release-card__title-en{
margin:2px 0 0;
font-family:"Oswald","Noto Sans JP",sans-serif;
font-size:10px;
font-weight:300;
letter-spacing:.13em;
line-height:1.45;
text-transform:uppercase;
opacity:.48;
}
.my-official-release-card__body .type_day{
margin:-0.2em 0 0;
}
.my-official-release-card__body .type_day p{
display:inline-block;
}
.my-official-release-card__date{
/*margin:0 0 7px;*/
font-family:"Voltaire",sans-serif;
font-size:9px;
font-weight:400;
letter-spacing:.17em;
line-height:1;
opacity:.42;
}



.my-official-discography__more-wrap{
display:flex;
flex-direction:column;
align-items:center;
width:100%;
margin-top:clamp(60px,8vw,110px);
}
.my-official-discography__more{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
gap:15px;
min-width:190px;
padding:16px 0 12px;
border:0;
border-bottom:1px solid currentColor;
background:none;
color:inherit;
font-family:"Voltaire",sans-serif;
font-size:11px;
font-weight:400;
letter-spacing:.2em;
line-height:1;
cursor:pointer;
opacity:.7;
transition:
	opacity .3s ease,
	border-color .3s ease;
}
.my-official-discography__more:hover{
opacity:1;
}
.my-official-discography__more:focus-visible{
outline:1px solid currentColor;
outline-offset:7px;
}
.my-official-discography__more:disabled{
cursor:wait;
opacity:.4;
}
.my-official-discography__more-icon{
position:relative;
display:block;
width:19px;
height:19px;
border:1px solid currentColor;
border-radius:50%;
transition:transform .35s ease;
}
.my-official-discography__more-icon::before,
.my-official-discography__more-icon::after{
content:"";
position:absolute;
top:50%;
left:50%;
width:7px;
height:1px;
background:currentColor;
transform:translate(-50%,-50%);
}
.my-official-discography__more-icon::after{
transform:
	translate(-50%,-50%)
	rotate(90deg);
}
.my-official-discography__more:hover
.my-official-discography__more-icon{
transform:rotate(90deg);
}
.my-official-discography__more.is-loading
.my-official-discography__more-icon{
animation:
	my-official-discography-loading
	.8s linear infinite;
}
.my-official-discography__status{
min-height:1.5em;
margin:14px 0 0;
font-size:10px;
letter-spacing:.05em;
line-height:1.5;
opacity:.55;
}
@keyframes my-official-discography-loading{
	to{
		transform:rotate(360deg);
	}
}




@media(max-width:1024px){
	.my-official-discography__grid{
	grid-template-columns:repeat(3,minmax(0,1fr));
	}
}

@media(max-width:700px){
	.my-official-discography{
	padding-right:16px;
	padding-left:16px;
	}
	.my-official-discography__heading-row{
	align-items:flex-start;
	flex-direction:column;
	gap:14px;
	}
	.my-official-discography__artist{
	margin:0;
	text-align:left;
	}
	.my-official-discography__grid{
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:34px 12px;
	}
	.my-official-release-card__body{
	padding-top:11px;
	}
	.my-official-release-card__overlay{
	display:none;
	}
	.my-official-release-card__title{
	font-size:12px;
	}
	.my-official-release-card__title-en{
	font-size:8px;
	letter-spacing:.1em;
	}
	.my-official-release-card__date{
	font-size:8px;
	}
	.my-official-release-card__type-overlay{
	top:8px;
	left:8px;
	min-height:20px;
	padding:5px 7px 4px;
	font-size:7px;
	letter-spacing:.14em;
	}
}