@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Cardo:ital,wght@0,400;0,700;1,400&display=swap');

html,body {
	/*font-size:clamp(10px, 1.33vw, 20px);*/
	font-size:clamp(20px, 2.56vw, 20px);
	font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif !important;
	position:relative;
}
body::before {
	content:"";
	width:100%;
	height:100vh;
	position:fixed;
	top:0;
	left:0;
	background:url(../img/pc_bk.jpg) no-repeat right;
	background-size:cover;
}
body.popup-open { overflow-y:hidden; }

.en-font {
	font-family: "Cardo", serif;
  font-weight: 400;
  font-style: normal;
}
.yugo {
	font-family: 'Outfit', "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
}

img {
    width:100%;
    height:auto;
    max-width:100%;
}

a { transition:0.2s ease all; }

.pc-on { display:none; }



.in-box {
	width:85%;
	margin:0 auto;
}

#main {
	width:100%;
	position:relative;
	z-index:10;
}

#view-area {
	position:relative;
}
#view-area .area-bk {
	width:100%;
	height:100vh;
	background:url(../img/bk.jpg) no-repeat;
	background-size:100% auto;
	position:fixed;
	top:0;
	left:0;
}
#view-area.open { overflow-y:hidden; }


/** .main-box **/
.main-box {
	padding-top:2rem;
	margin:.5rem auto 0;
	max-width:500px;
	position:relative;
	background:url(../img/top_deco.png) no-repeat center top;
	background-size:95% auto;
}
.main-box .site-ttl {
	position:relative;
	z-index:1;
	font-size:1.875rem;
	color:#5b1b14;
	text-align:center;
	letter-spacing:.1em;
}
.main-box .cover-pic {
	width:83.72%;
	margin:0 auto;
}
.main-box .info-box {
	text-align:center;
	margin:.7rem auto 1.5rem;
}
.main-box .info-box .album-name {
	font-size:1.375rem;
	color:#5b1b14;
	letter-spacing:1em;
	text-align:center;
	margin:1.5rem 0 .3rem;
	padding-left:.5rem;
}
.main-box .info-box .album-name.jp {
	font-size:3.8rem;
	text-align:right;
	margin-top:0;
	letter-spacing:0;
	padding-right:2.2rem;
}
.main-box .info-box .txt {
	font-size:.8rem;
	margin-top:2.5rem;
	color:#5b1b14;
}
.main-box .info-box .txt span {
	padding-bottom:.1rem;
	border-bottom:2px solid #5b1b14;
	display:inline-block;
	font-weight:bold;
}
.main-box .info-box .txt span::after {
	content:"";
	display:block;
	width:100%;
	height:1px;
	background:#5b1b14;
	margin-top:.5rem;
}



/** .sub-box **/
.sub-box {
	margin:0 auto;
	padding-bottom:1.75rem;
	max-width:500px;
}


.link-box {
	background:#5b1b14;
	position:relative;
	z-index:1;
	padding-top:3rem;
	margin-top:2rem;
}
.link-box .box {
	border:1px solid rgba(255,255,255,.5);
	color:#fff;
	font-size:.8rem;
	text-align:center;
	height:3.75rem;
	width:50%;
	margin:0 auto;
}
.link-box .box span {
	font-size:.95rem;
	display:block;
	margin-top:.2rem;
	font-weight:100;
}
.link-box .box a {
	display:flex;
	height:100%;
	width:100%;
  justify-content:center;
  align-items:center;
}
.link-box .box a:hover { background:rgba(255,255,255,.5); }

.copy {
	padding:1rem 0 4rem;
	text-align:center;
	font-size:.8rem;
	color:#fff;
	display:block;
	font-weight:100;
}

#popup-box {
	height:0;
  position:fixed;
  top:0;
  width:100%;
  z-index:60;
  opacity:0;
}
#popup-box.open { animation:ugoki .5s linear forwards alternate; height:100%; }
#popup-box.close { animation:ugoki3 .5s linear forwards alternate; }
#popup-box #scl-box {  overflow-y:auto; padding:2.5rem 0; height:100%; position:relative; }
#popup-box .bk {
	position:fixed;
	width:100%;
	height:0;
	top:0;
	left:0;
	right:0;
	margin:0 auto;
	background:rgba(203,183,166,.6);
	animation:ugoki-2 .5s linear forwards alternate;
}
#popup-box.open .bk { height:100%; animation:ugoki .5s linear forwards alternate; }
@keyframes ugoki{
    0%{
        opacity: 0;
    }  
    100%{
        opacity: 1;
    }
}
@keyframes ugoki-2{
    0%{
        opacity: 1;
    }  
    100%{
        opacity: 0;
        height:0;
    }
}
#popup-box .txt-box {
	background: url(../img/bk.jpg) repeat-y;
  background-size: 100% auto;
	color:#5b1b14;
	/*font-size:.875rem;*/
	font-size:17px;
	padding:3rem 2rem;
	box-sizing:border-box;
	line-height:2.85em;
	position:relative;
	z-index:1;
	width:100%;
	opacity: 0;
	animation:ugoki2-2 .5s linear forwards alternate;
}
#popup-box.open .txt-box { animation:ugoki2 .5s .5s linear forwards alternate; }
@keyframes ugoki2{
    0%{
        transform:translate(0, 2rem);
        opacity:0;
    }  
    100%{
        transform:translate(0, 0);
        opacity:1;
    }
}
@keyframes ugoki2-2{
    0%{
        transform:translate(0, 0);
        opacity:1;
    }  
    100%{
        transform:translate(0, 2rem);
        opacity:0;
    }
}
@keyframes ugoki3{
    0%{
        opacity: 1;
        height:100%;
    }  
    100%{
        opacity: 0;
        height:0;
    }
}
/*#popup-box .txt-box::before {
	content:"";
	width:calc(100% - 4rem);
	height:100%;
	background:url(../img/line.png) repeat-y;
	background-size:100% auto;
	position:absolute;
	top:3rem;
	left:2rem;
}*/
:root {
  --lhpx: 54;     /* 行の高さ（em） */
  --rule: 1px;    /* 罫線の太さ */
  --color: #5b1b14;
}

#popup-box .txt-box .song-box {
	display:none;
	/*background-image:
  linear-gradient(180deg, rgba(100, 100, 100, 0) 0%, rgba(100, 100, 100, 0) 99%, #5b1b14 100%);
  background-size:100% 2.85em;
  line-height:2.85em;*/
  line-height: calc(var(--lhpx) * 1px);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 calc(var(--lhpx) * 1px - var(--rule)),
    var(--color) 0 calc(var(--lhpx) * 1px)
  );
  background-repeat: repeat-y;
  background-origin: content-box;
  background-clip: content-box;
  padding-block: 8px; /* 好みで微調整（文字が線に触れないように） */
}
@supports (-webkit-touch-callout: none) {
  #popup-box .txt-box .song-box { -webkit-text-size-adjust: 100%; }
}
#popup-box .txt-box .song-box.open { display:block; }
#popup-box .batsu {
	font-size:2.5rem;
	color:#5b1b14;
	display:inline-block;
  position:fixed;
  top:4rem;
  right:1rem;
  cursor:pointer;
  line-height:1;
  z-index:1;
  opacity:0;
}
#popup-box.open .batsu { animation:ugoki .5s 1s linear forwards alternate; }
#popup-box .txt-box .name { text-align:right; }


@media screen and (min-width: 1150px) {
	.pc-on { display:block; }
	.sp-on { display:none; }

	body {
		-ms-overflow-style:none; /* IE, Edge 対応 */
  		scrollbar-width:none;    /* Firefox 対応 */
	}
	body::-webkit-scrollbar {
		display:none; /* Chrome, Safari 対応 */
	}

	#view-area {
		overflow-y:scroll;
		-ms-overflow-style:none; /* IE, Edge 対応 */
  	scrollbar-width:none;    /* Firefox 対応 */
  	box-sizing:border-box;
  	width:390px;
  	position:absolute;
  	left:0;
		right:0;
		margin:0 auto;
	}
	#view-area::-webkit-scrollbar {
		display:none; /* Chrome, Safari 対応 */
	}
	#view-area .area-bk {
		width:390px;
		left:0;
		right:0;
		margin:0 auto;
	}
	.main-box { width:390px; }
	.sub-box { max-width:390px; }
	/*#btm-nav.fixed { max-width:390px; left:calc(100% - 390px - 294px); right:inherit; }*/
	#btm-nav { display:none !important; }

	#popup-box .bk { max-width:390px; }
	#popup-box .batsu { right:calc((100% / 2) - 8.5rem); }

	#main {
		display:flex;
		justify-content:flex-start;
		width:100%;
		/*max-width:1500px;*/
		/*height:100vh;
		overflow:hidden;*/
		position:relative;
		margin:0 auto;
	}
	#popup-box { width:390px; }

	.pc-layout.pc-l {
		width:calc((100% - 392px) / 2);
		padding:0;
		position:fixed;
		text-align:center;
		left:0;
		top:0;
		height:100vh;
	}

	.pc-layout .logo { font-size:2.25rem; color:#fff; text-align:center; letter-spacing:.1em; position:absolute; bottom:6.5rem; left:0; right:0; margin:0 auto; }
	.pc-layout .name-box { margin-top:13rem; }
	.pc-layout .name-box .name { font-size:1.8rem; color:#fff; letter-spacing:1em; margin-top:2rem; }
	.pc-layout .name-box .name.jp { font-size:5rem; color:#fff; text-align:right; padding-right:4.2rem; margin-top:.2rem; }
	.pc-layout .name-box .sub1 { font-size:1rem; color:#fff; }
	.pc-layout .name-box .sub1 span { padding-bottom:.1rem; border-bottom:2px solid #fff; display:inline-block; font-weight:bold; }
	.pc-layout .name-box .sub1 span::after {
    content:"";
    display:block;
    width:100%;
    height:1px;
    background:#fff;
    margin-top:.5rem;
	}
	.pc-layout .name-box .sub2 { font-size:1rem; margin-top:2rem; color:#fff; }


}







/* release */
.main-box .release-txt {
	font-size:1rem;
	text-align:center;
	color:#5b1b14;
	margin-top:.7rem;
}
.sub-box { padding-bottom:1.3rem; position:relative; }
.sub-box .about { margin-top:2.5rem; }
.sub-box .about h2 {
	font-size:2.125rem;
	text-align:center;
	color:#5b1b14;
	letter-spacing:.02em;
}
.sub-box .about .about-in {
	width:87%;
	background:rgba(255,255,255,.7);
	padding:1.5rem;
	margin:.7rem auto 0;
}
.sub-box .about .cd-box .cd {
	text-align:center;
}
.sub-box .about .cd-box .cd .cd-top {
	font-size:1rem;
	text-align:center;
	color:#5b1b14;
	margin-top:1rem;
}
.sub-box .about .cd-box .cd .cd-ttl { font-size:1.5rem; color:#5b1b14; line-height:1.3; margin:.3rem 0 .2rem; }
.sub-box .about .cd-box .cd .cd-ttl .kana {
	font-size:.5rem;
	display:block;
}
.sub-box .about .cd-box .cd .cd-sub { font-size:.6875rem; line-height:1.5; color:#5b1b14; }
.sub-box .about .info-txt {
	font-size:.8rem;
	line-height:1.8;
	margin:1rem 0;
	color:#5b1b14;
}
.sub-box .btn-box .btn-c a {
	color:#fff;
	font-size:1.2rem;
	text-align:center;
	display:block;
	line-height:3.75rem;
	background:#5b1b14;
}
.sub-box .btn-box .btn-c {
	width:87%;
	margin:0 auto .8rem;
}
.sub-box .btn-box .btn-w {
	width:87%;
	margin:0 auto;
}
.sub-box .btn-box .btn-w a {
	border:1px solid #5b1b14;
	font-size:1.2rem;
	text-align:center;
	display:block;
	line-height:3.75rem;
	color:#5b1b14;
}


#letter-sec {
	padding-top:3rem;
	overflow-x:hidden;
}
#letter-sec h2 {
	font-size:2.125rem;
	color:#5b1b14;
	margin-bottom:1rem;
	position:relative;
}
#letter-sec h2 .mini {
	display:block;
	font-size:.875rem;
	margin-left:.5em;
}
#letter-sec h2::before {
	content:"";
	width:10rem;
	height:3.975rem;
	background:url(../img/letter_deco.png) no-repeat;
	background-size:cover;
	display:block;
	position:absolute;
	bottom:.5rem;
	right:-3.5rem;
}
#letter-sec .title-list li {
	border:1px solid #5b1b14;
	padding:1.5rem 1.2rem;
	margin-bottom:.5rem;
	cursor:pointer;
}
#letter-sec .title-list li .name {
	font-size:1rem;
	letter-spacing:.14em;
	color:#5b1b14;
}
#letter-sec .title-list li .song-title {
	font-size:.72rem;
	margin-top:.5rem;
	letter-spacing:.03em;
	color:#5b1b14;
}