@charset "UTF-8";

/* L1 ########################################  ######################################## */
/* L2 ****************************************  **************************************** */
/* L3 ========================================  ======================================== */
/* L4 ----------------------------------------  ---------------------------------------- */

/* L1 ######################################## 旧スタイル上書き ######################################## */

html, body {
	overflow-x: visible;
}

body {
	background-image: url(../images/back_body.jpg);
}

#sns {
	display: none !important;
}

strong {
	color: initial;
}

/* L1 ######################################## アニメーション ######################################## */

@keyframes fade-up {
	from {
		opacity: 0;
		transform: translateY(100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes vibration {
	0% { transform: translate(0px, 0px) rotateZ(0deg) }
	94% { transform: translate(0px, 0px) rotateZ(0deg) }
    94.5% { transform: translate(1px, 1px) rotateZ(1deg) }
    95% { transform: translate(0px, 1px) rotateZ(0deg) }
    95.5% { transform: translate(1px, 0px) rotateZ(-1deg) }
    96% { transform: translate(0px, 0px) rotateZ(0deg) }
    96.5% { transform: translate(1px, 1px) rotateZ(1deg) }
    97% { transform: translate(0px, 1px) rotateZ(0deg) }
    97.5% { transform: translate(1px, 0px) rotateZ(-1deg) }
    98% { transform: translate(0px, 0px) rotateZ(0deg) }
    98.5% { transform: translate(1px, 1px) rotateZ(1deg) }
    99% { transform: translate(0px, 1px) rotateZ(0deg) }
    99.5% { transform: translate(1px, 0px) rotateZ(-1deg) }
    100% { transform: translate(0px, 0px) rotateZ(0deg) }
}

@keyframes frame {
	0% {
		transform: rotate(-2deg) skewX(20deg);
	}
	50% {
		transform: rotate(2deg) skewX(-20deg);
	}
	100% {
		transform: rotate(-2deg) skewX(20deg);
	}
}

/* L1 ######################################## 共通スタイル ######################################## */

ruby {
	line-height: 1.0;
}

ruby rp,
ruby rt {
	font-size: max(10px, 25%);
}

#contents p {
	margin-block: 0.5em;
	margin-inline: auto;
}

p.section-L1 {
	position: relative;
	inline-size: fit-content;
	min-inline-size: 45%;
	margin-block: 2em;
	padding-block: 0.8em;
	padding-inline: 5%;
	color: #ffffff;
	font-family: "Zen Kaku Gothic New";
	font-size: 100%;
	font-weight: bold;
	letter-spacing: 0.2em;
	text-indent: -0.1em;
	text-align: center;
	background: rgba(51, 102, 153, 1);
	background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1) 5px, transparent 5px, transparent 10px);
	border-radius: 5px;
}

p.section-L1::before {
	content: '';
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	transform: rotate(-2deg) skewX(20deg);
	inline-size: calc(100% - 8px);
	block-size:  calc(100% - 8px);
	font-size: 110% !important;
	letter-spacing: 0;
	border: 4px solid #ffffff;
	border-radius: 5px;
	box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.1);
	animation: frame 20s infinite
}

p.section-L2 {
	padding-block: 0.5em;
	padding-inline: 2%;
	color: #666600;
	font-size: 105% !important;
	border: 2px dotted #999999;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 10px;
	text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}

p.info {
	margin-block: 1em;
	text-align: center;
}

p.info::before {
	content: "\f075";
	margin-inline-end: 0.3em;
	font-family: "Font Awesome 6 Free";
	font-weight: 400;
}

div.image-center {
	margin-block: 0.5em;
	margin-inline: auto;
	text-align: center;
}

figure {
	display: inline-block;
	padding-block: 10px;
	padding-inline: 10px;
	text-align: center;
	background: rgba(255, 255, 255, 0.5);
	box-sizing: border-box;
}

figure.youtube {
	background: rgba(51, 102, 153, 0.5);
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
	figure {
		animation-name: fade-up;
		animation-timing-function: ease-out;
		animation-fill-mode: both;
		animation-timeline: view();
		animation-range: entry 0 cover 30%;
	}
}

figure:has(> figcaption) {
	padding-block-end: 8px;
}

figcaption {
	padding-block-start: 8px;
	color: #666666;
	font-size: clamp(12px, 10.544px + 0.45vw, 16px);
	text-align: center;
	line-height: 1.0;
}

figcaption::before {
	content: "\f03e";
	margin-inline-end: 0.3em;
	font-family: "Font Awesome 6 Free";
	font-weight: 400;
}

figure:has(> iframe) figcaption::before {
	content: "\f167";
	font-family: "Font Awesome 6 Brands";
	font-weight: 400;
}

figure.youtube figcaption {
	color: #ffffff;
}

figure img {
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}


nav.link ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.4em;
}

nav.link li {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-block: 0.5em;
	padding-inline: 0.3em;
	color: #ffffff;
	text-align: center;
	line-height: 1.0;
	background: rgba(0, 0, 0, 0.6);
	border-radius: 3em;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
}

nav.link li a::before {
	display: inline-block;
	margin-inline-end: 0.3em;
	font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands";
	font-weight: 400;
	
	animation: vibration 5s infinite;
}

nav.link li.apple-music a::before {
	content: "\f179";
}

nav.link li.spotify a::before {
	content: "\f1bc";
}

nav.link li.youtube-music a::before {
	content: "\f144";
}

nav.link li.amazon-music a::before {
	content: "\f270";
}

nav.link li.line-music a::before {
	content: "\f3c0";
}

nav.link li.others a::before {
	content: "\f090";
	font-weight: 800;
}

nav.link a {
	display: inline-block;
	padding-block: 0.4em;
	padding-inline: 1em;
	color: #ffffff !important;
	text-decoration: underline;
	text-decoration-thickness: 0.4em;
	text-decoration-color: rgba(255, 255, 0, 0.3);
	text-underline-offset: -0.1em;
	text-decoration-skip-ink: none;
}

/* L1 ######################################## コンテンツ ######################################## */

#contents {
	inline-size: auto;
	max-inline-size: 1200px;
	margin-block: 0  2em;
	margin-inline: auto !important;
	padding-block: 0 1em;
	color: #333333;
	font-family: "Zen Kaku Gothic New";
	font-size: clamp(14px, 12.544px + 0.45vw, 18px);
	line-height: 1.6;
	background: rgba(255, 255, 255, 0.75);
	box-sizing: border-box;
}

/* L1 ######################################## オフィシャルリンク ######################################## */

#link {
	padding-inline: 4%;
}

#link nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.2em;
	margin-block: 1em;
	margin-inline: auto;
	font-size: clamp(15px, 11.36px + 1.14vw, 25px);
}

#link ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.2em;
}

#link ul::before {
	color: #ffffff;
	padding-block: 5px 3px;
	padding-inline: 5px;
	font-size: 50%;
	line-height: 1.0;
	border: 1px solid #ffffff;
	border-radius: 5px;
}


#link ul:nth-child(1)::before {
	content: "島袋 優";
}

#link ul:nth-child(2)::before {
	content: "BEGIN";
}

#link ul li {
	inline-size: clamp(30px, 22.72px + 2.27vw, 50px);
	block-size: clamp(30px, 22.72px + 2.27vw, 50px);
	color: #ffffff;
	text-align: center;
	line-height: 1.0;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 50%;
}

#link ul li.official {
	font-size: 85%;
}

#link ul li.instagram {
	font-size: 115%;
}

#link  a {
	display: flex;
	justify-content: center;
	align-items: center;
	inline-size: 100%;
	block-size: 100%;
	color: #ffffff !important;
	text-decoration: none;
	border-radius: 50%;
}

/* L1 ######################################## メインビジュアル ######################################## */

#main-visual {
	
}

#main-visual img {
	width: 100%;
	height: auto;
}

/* L1 ######################################## 更新履歴 ######################################## */

#modified {
	width: 100%;
	margin-block-start: 1em;
	padding-inline: 4%;
	box-sizing: border-box;
}

#modified div.box {
	margin-block: 1.5em;
	padding-block: 0.5em;
	padding-inline: 3%;
	background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1) 2px, transparent 2px, transparent 4px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1) 2px, transparent 2px, transparent 4px);
	border-radius: 10px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

#modified strong {
	color: #336699;
	text-decoration: underline;
	text-decoration-thickness: 0.4em;
	text-decoration-color: rgba(0, 0, 0, 0.1);
	text-underline-offset: -0.1em;
	text-decoration-skip-ink: none;
}

#modified ul {
	margin-block: 0.5em;
	margin-inline-start: 2em;
}

#modified ul p {
	margin: 0;
}

#modified ul p.note {
	color: #666666;
	font-size: 80%;
}

#modified .video {
	inline-size: fit-content;
	margin-inline: auto;
}

#modified figure iframe {
	inline-size: auto;
	max-block-size: 400px;
	block-size: 40vw;
	aspect-ratio: 16/9;
}


/* L1 ######################################## タイトル ######################################## */

#title {
	margin-block-start: 1.5em;
}

#title p.sub {
	inline-size: fit-content;
	margin-block-end: 1em;
	margin-inline: auto;
	line-height: 1.0;
	font-size: 120%;
}

#title p.main {
	margin-block: 0;
	margin-inline: auto;
	padding-block: 0.4em;
	padding-inline: 1.2em;
	color: #666600;
	font-family: "Zen Kaku Gothic New";
	font-size: 300%;
	text-align: center;
	line-height: 1.0;
	background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.5), transparent);
}

#title p.release {
	inline-size: fit-content;
	margin-inline: auto;
	font-size: 160%;
	font-family: "Oswald";
}

#title p.release::before {
	content: "\f51f";
	margin-inline-end: 0.3em;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
}

#title p.release em {
	display: inline-block;
	margin-inline: 0.1em;
	font-size: 150%;
	font-style: normal;
}

/* L1 ######################################## イントロダクション ######################################## */

#intro {
	overflow-x: hidden;
	width: 100%;
	padding-inline: 4%;
	box-sizing: border-box;
}

#intro div.text {
	margin-inline: auto;
}

#intro p.catch {
	inline-size: fit-content;
	position: relative;
	margin-block-end: 1em;
	padding-inline: 1em;
	color: #666600;
	font-size: 120%;
	text-align: center;
	background: rgba(255, 255, 255, 0.85);
}

#intro p.catch::before,
#intro p.catch::after {
	content: '';
	position: absolute;
	inset-block-start: 50%;
	inline-size: 200px;
	block-size: 2px;
}
#intro p.catch::before {
	right: 100%;
	
	background-image: linear-gradient(to right, rgba(102, 102, 0, 0), rgba(102, 102, 0, 0.2), rgba(102, 102, 0, 0.2));
}
#intro p.catch::after {
	left: 100%;
	
	background-image: linear-gradient(to right, rgba(102, 102, 0, 0.2), rgba(102, 102, 0, 0.2), rgba(102, 102, 0, 0));
}

#intro div.comment {
	margin-block: 2em;
	padding-block: 0.5%;
	padding-inline: 3%;
	background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1) 2px, transparent 2px, transparent 4px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1) 2px, transparent 2px, transparent 4px);
	border-radius: 10px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

#intro div.comment p {
	color: #1d5690;
	font-size: 95%;
	font-weight: bold;
}

#intro div.comment p.signature {
	text-align: right;
}


#intro div.profile {

}

#intro div.profile p {
	font-size: 90%;
}

#intro div.profile p.section-L2::before {
	content: "\f2bd";
	margin-inline-end: 0.3em;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
}


/* L1 ######################################## 商品情報 ######################################## */

.product {
	margin-block-start: 1em;
	padding-block-start: 0.5em;
	padding-inline: 4%;
}

.product dl {

}

/*
.product dl {
	display: grid;
	grid-template-rows: repeat(8, auto);
	grid-template-columns: 1fr 400px;
	grid-column-gap: 20px;
	row-gap: 0.5em;
}

@media (max-width: 768px) {
	.product dl {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 768px) {
	.product dt {
		grid-column: 1 / -1;
	}
	
	.product dd.artist,
	.product dd.series,
	.product dd.data {
		grid-column: 1 / -1;
	}
	
	.product dd.jacket {
		grid-column: 2 / 3;
		grid-row: 4 / -1;
	}
}
*/

.product dl > * {
	margin-block-start: 0.5em;
}

.product dl > *:first-child {
	margin-block-start: 0;
}

/* L2 **************************************** 商品タイトル **************************************** */

.product dt {
	color: #666600;
	font-size: clamp(1.8rem, 0.636rem + 5.82vw, 5rem);
	line-height :1.0;
}

/* L2 **************************************** アーティスト名・シリーズ名 **************************************** */

.product dd.author::before {
	content: "\f2bd";
	margin-inline-end: 0.3em;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
}

/* L2 **************************************** 商品データ **************************************** */

.product dd.data ul {
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.product dd.data li {
	list-style-type: none;
	display: flex;
	padding: 0.2em 0.5em;
	color: #666666;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 5px;
}

/* L2 **************************************** 配信サービス **************************************** */

.product dd.service {
	margin-block: 1em;
}


/* L2 **************************************** ジャケット **************************************** */

.product dd.jacket {
	position: relative;
	z-index: 1;
	float: right;
	margin-block: 1em 0.5em;
	margin-inline: 1em 0.5em;
	text-align: center;
}

.product dd.jacket img {
	inline-size: 40vw;
	max-inline-size: 400px;
}

@media (max-width: 768px) {
	.product dd.jacket {
		float: none;
		margin-block-start: 0.5em;
		margin-inline: auto;
	}
	
	.product dd.jacket img {
		inline-size: 100%;
	}
}

/* L2 **************************************** 曲リスト **************************************** */

.product dd.track-list > p.section {
	font-size: 110%;
}

.product dd.track-list > ol,
.product dd.track-list > ul {
	list-style-type: none;
	counter-reset: num;
}

.product dd.track-list > * > li:nth-child(odd) {
	background: rgba(0, 0, 0, 0.04);
}
.product dd.track-list > * > li:nth-child(even) {
	background: rgba(0, 0, 0, 0.08);
}

.product dd.track-list > *.dark > li:nth-child(odd) {
	background: rgba(0, 0, 0, 0.08);
}
.product dd.track-list > *.dark > li:nth-child(even) {
	background: rgba(0, 0, 0, 0.04);
}

.product dd.track-list > * > li {
	position: relative;
	padding-block: 0.5em;
	padding-inline: 3.5em 1em;
}

.product dd.track-list > ol > li::before {
	position: absolute;
	inset-block-start: 1.1em;
	inset-inline-start: 1em;
	
	display: flex;
	justify-content: center;
	align-items: center;
	counter-increment: num;
	content: counter(num);
	inline-size: 1.6em;
	block-size: 1.6em;
	
	color: #ffffff;
	text-align: center;
	line-height: 1.0;
	
	background: #336699;
	
	border-radius: 50%;
}

.product dd.track-list > * > li * {
	margin-block: 0;
}

/* L3 ======================================== 曲タイトル ======================================== */

.product dd.track-list > * > li p.title {
	color: #444444;
	font-size: 110%;
	font-weight: bold;
}

.product dd.track-list > * > li p.title + p {
	
}

/* L3 ======================================== 作家クレジット ======================================== */

.product dd.track-list > * > li ul.credit {
	margin-block-start: 0.5em;
	list-style-type: none;
	font-size: 80%;
}


/* L1 ######################################## ゲストアーティスト ######################################## */

#guest {
	margin-block-start: 1em;
	padding-block-start: 0.5em;
	padding-inline: 4%;
}

#guest div.artist {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

#guest div.artist figure {
	flex-grow: 1;
}

#guest div.artist figcaption::before {
	display: none;
}

#guest div.artist figure:has(> iframe) figcaption::before {
	display: inline-block;
}

#guest div.artist figure img {
	block-size: 45vw;
	max-block-size: 300px;
}

#guest div.artist figure iframe {
	inline-size: auto;
	block-size: 45vw;
	max-block-size: 300px;
	aspect-ratio: 16/9;
}

/* L1 ######################################## ミュージックビデオ ######################################## */

#video {
	margin-block-start: 1em;
	padding-block-start: 0.5em;
	padding-inline: 4%;
	text-align: center;

}

#video .video {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
	gap: 5px;
	margin: 1em 0;
}

#video .video figure {
	display: inline-block;
	inline-size: 100%;
}

#video iframe {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 16/9;
}


/* L1 ######################################## スケジュール ######################################## */

#schedule {
	margin-block-start: 1em;
	padding-block-start: 0.5em;
	padding-inline: 4%;
}

#schedule .event + .event {
	margin-block-start: 2em;
}

#schedule p.title {
	color: #336699;
}

#schedule p.title strong {
	color: #336699;
	font-size: 125%;
}

#schedule ul.data {
	list-style-type: none;
	padding: 5px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	background: rgba(0, 0, 0, 0.05);
}

#schedule ul.data > li {
	position: relative;
	padding-block: 0.2em;
	padding-inline-start: 10.5em;
}

#schedule ul.data > li + li  {
	margin-block-start: 2px;
}


#schedule ul.data > li:nth-child(even) {
	background: rgba(0, 0, 0, 0.04);
}

#schedule ul.data li span.category {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	min-inline-size: 10em;
	block-size: 100%;
	color: #333333;
	text-align: center;
	border: 1px solid #cccccc;
	background: rgba(255, 255, 255, 0.8) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.1) 51%, rgba(0, 0, 0, 0) 100%);;
	box-sizing: border-box;
	border-radius: 5px;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.05);
}

@media (max-width: 768px) {
	#schedule ul.data {
		padding: 0;
	}
	
	#schedule ul.data > li {
		padding-inline: 4%;
	}
	
	#schedule ul.data li span.category {
		position: relative;
		margin-inline: -4%;
		border-radius: 0;
	}
	
	#schedule ul.data > li:nth-child(even) {
		background: transparent;
	}
}

#schedule ul.data li span.category em {
	font-style: normal;
	font-size: 85%;
}

#schedule ul.data * {
	margin: 0;
}

#schedule ul.data p.note {
	color: #666666;
	font-size: 85%;
}

#schedule ul.data p.note::before {
	content: "\f044";
	margin-inline-end: 0.3em;
	font-family: "Font Awesome 6 Free";
	font-weight: 800;
}

#schedule ul.data ul {
	margin-inline-start: 40px;
}

/* L1 ######################################## 購入特典 ######################################## */

#tokuten {
	margin-block-start: 1em;
	padding-block-start: 0.5em;
	padding-inline: 4%;
}

#tokuten > .container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 5px;
}

#tokuten .item {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 2;
	padding: 5px;
	background: rgba(0, 0, 0, 0.05);
}

#tokuten div.image-center {
	margin-block: 0;
}

#tokuten .item img {
	inline-size: 100%;
	block-size: auto;
	max-block-size: 350px;
}

#tokuten .goods p {
	width: fit-content;
	margin-inline: auto;
}

#tokuten .goods p:nth-child(1) {
	margin-block-start: 1em;
	padding-block: 0.2em;
	padding-inline: 1em;
	color: #ffffff;
	font-size: 90%;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 5px;
}

#tokuten .goods p:nth-child(1)::before {
	content: "\f06b";
	margin-inline-end: 0.3em;
	font-family: "Font Awesome 6 Free";
	font-weight: 800;
}

#tokuten .goods p:nth-child(2) {
	font-size: 120%;
	color: #666600;
	font-weight: bold;
	text-align: center;
}

/* L1 ######################################## 配信＆購入 ######################################## */

#distribution,
#buy {
	margin-block-start: 1em;
	padding-block-start: 0.5em;
	padding-inline: 4%;
}
.navi nav {
	margin-block: 3em;
}

#buy.navi nav {
	margin-block-end: 1em
}

#buy.navi li a::before {
	content: "\f51f";
	font-weight: 900;
}