/* -------------------------------
　　　　　フォント指定
------------------------------- */
@font-face{
	font-family:'Shippori Mincho';
	src:url('../font/ShipporiMincho.woff') format('woff');
}

@font-face{
	font-family:'sorttmillgoudy';
	src:url('../font/SortsMillGoudy.woff') format('woff');
}

@font-face{
	font-family:'WebSubsetFont';
	src:url('../font/WebSubsetFont.woff') format('woff');
}


/* -------------------------------
　　　　　　骨組み
------------------------------- */
*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}


body{
	background:url(../images/star.jpg);
	background-repeat:repeat;
	background-attachment:fixed;
	background-color: #00050a;
	background-image:linear-gradient(
	135deg,rgba(60,17,66,0.4) 0%,/* 左上は微かな紫 */
	transparent 40%,transparent 60%,
 	rgba(10, 30, 50, 0.4) 100%/* 右下は微かな青 */
	),url(../images/star.jpg);
	background-size:auto;
	background-blend-mode:screen;
	color:#fff;
	font-size:12px;
	line-height:1.6;
	font-family:"WebSubsetFont","メイリオ",sans-serif;
	min-height:100vh;
	overflow-x:hidden;
	width:100%;
	position:relative;
}

#starry_sky{
	width:100%;
	height:100dvh;
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	pointer-events: none;
	overflow:hidden;
}

.star{
	background-color:white;
	position:absolute;
	border-radius:50%;
	animation-name:star-twinkle;
	animation-iteration-count:infinite;
	transition:transform 0.4s ease-out; 
}

@keyframes star-twinkle{
	50%{
	transform: scale(0.2);   
}} 

.shooting-star{
	position:fixed;
	top:0;
	left:0;
	width:100px;
	height:2px;
	background:linear-gradient(-90deg, white, transparent);
	animation:shoot 8s infinite;
	opacity:0;
	pointer-events:none;
	z-index:10;
}

@keyframes shoot{
	0%{
	transform: translate(0,0) rotate(40deg); 
	opacity:0;}
	5%{ 
	opacity:1;}
	15%{ 
	transform:translateX(60vw) translateY(60vw) rotate(45deg); 
	opacity:0;}
	100% {
	opacity:0;}
}

.sparkle {
	position:absolute;
	width:1px;
	height:1px;
	background-color:rgba(255, 255, 255, 0.8);
	border-radius:50%;
	pointer-events:none;
	z-index:9999;
	box-shadow:0 0 3px 0.5px rgba(255, 255, 255, 0.6),
	0 0 6px var(--glow-color);
	transition:transform 0.5s ease-out,opacity 0.5s ease-out;
	opacity:0;
	transform: scale(0);
}

:root {
	--glow-color:rgba(170, 240, 248, 0.8);
}

#stardust-garden{
	position:relative;
	overflow:hidden;
	z-index:50;
	background:rgba(255, 255, 255, 0.04);
	

backdrop-filter:blur(10px);
	-webkit-backdrop-filter:blur(10px);
	

border:1px solid rgba(255, 255, 255, 0.1);
	margin:0 auto 35px;
	padding-bottom:50px;
	width:92%;
	max-width:340px;
	min-height:100vh;
	border-radius:8px;
	touch-action:pan-y;
}

/* -------------------------------
　　　　　　ヘッダー
------------------------------- */
.main-visual{
	width:200px;
	height:200px;
	margin:30px auto 0;
	border-radius:50%;
	background-image:url(../images/visual.png);
	background-size:cover;
	background-position:center;
	border:2px solid rgba(170,240,248,0.3);
	box-shadow:0 0 20px rgba(170,240,248,0.2),
	inset 0 0 30px rgba(0, 0, 0, 0.6);
	animation:pulse 6s infinite ease-in-out;
	position:relative;
	overflow:hidden;
}

@keyframes shine {
	100% {left:150%;}

}

.main-visual::before {
	content:'';

	position:absolute;
	top:0;

	left:-100%;
	width:50%;
	height:100%;
	background:linear-gradient(to right,rgba(255, 255, 255, 0) 0%,

	rgba(255, 255, 255, 0.5) 50%,

	rgba(255, 255, 255, 0) 100%
);
	transform: skewX(-25deg);
	animation: shine 3s infinite;

}


@keyframes twinkle{
	0%,
	100%{
		opacity:1;
		text-shadow:0 0 8px rgba(71,185,255,0.7);
	}
	50%{
		opacity:0.8;
		text-shadow:0 0 15px rgba(97,222,250,0.9);
	}
}


.garden-title{
	font-family:"Shippori Mincho", serif;
	font-size:1.9rem;
	font-weight:700;
	letter-spacing:0.15em;
	text-shadow:0 0 8px rgba(97,222,250,0.7), 
	0 0 15px rgba(255,255,255,0.2);
	text-align:center;
	margin:25px 0 30px;
	animation:twinkle 4s infinite ease-in-out;
}



/* -------------------------------
　　　　　　main
------------------------------- */
.portal-container{
	padding:20px;
	background:linear-gradient(
	to bottom,
	transparent 0%,
	rgba(71,256,246, 0.06) 50%,
	transparent 100%
);
	margin:0 13px;
}

.panel-title{
	margin-top:35px;
	margin-bottom:20px;
	font-weight:1000;
	text-align:left;
	border-bottom:1px solid rgba(170, 240, 248, 0.2);
	padding-bottom:8px;
	display:flex;
	flex-direction:column;
}

#fan-fiction-group>.panel-title{
	margin-top:0;
}

.jp-title{
	font-family:"Shippori Mincho", serif;
	font-size:1.5rem;
	letter-spacing:0.1em;
	background-color:#1a0f0a; 
	background:linear-gradient(to bottom,
	#cfb53b 0%,#fcf6ba 45%,#aa8954 50%,
	#ffecbb 55%,#8a6e2f 100%);
	-webkit-background-clip:text;
	-webkit-text-fill-color: transparent;
	filter:drop-shadow(0 2px 2px rgba(0,0,0,0.8))
	drop-shadow(0 0 5px rgba(212, 175, 55, 0.2));
}

.en-sub {
	font-family:"sorttmillgoudy",sans-serif;
	font-size:0.8rem;
	letter-spacing:0.2em;
	color:rgba(255, 255, 255, 0.4);
	margin-top: 2px;
}

.work-list,.story-list,.toy-list {
	list-style:none;
	padding-left:5px;
}

.work-list li,.story-list li,
.toy-list li{
	margin-bottom:12px;
	position:relative;
	padding-left:15px;
}

.work-list li::before,
.story-list li::before,
.toy-list li::before{
	content: '✦';
	position:absolute;
	left:0;
	color: rgba(212,175, 55,0.8);
	font-size: 0.8rem;
	text-shadow:0 0 4px rgba(212,175,55,0.8),
	0 0 12px rgba(212,175,55,0.4); 
}

a{
	color:#97defe;
	text-decoration:none;
	transition:all 0.5s ease;
}

li:nth-of-type(even) a{
	color:#d0dce0;
}

a:hover{
	color:#b4ffff;
	text-shadow:0 0 10px rgba(170, 240, 248, 0.6);
}

li:nth-of-type(even) a:hover{
	color:#fff;
	text-shadow:0 0 10px rgba(170, 240, 248, 0.6);
}


small{
	font-size:0.85em;
	color:rgba(255, 255, 255, 0.4);
	margin-left:5px;
	font-family:"sorttmillgoudy",sans-serif;
	letter-spacing:0.2em;
}

/* -------------------------------
　　　　　　footer
------------------------------- */

#garden-footer{
	text-align:center;
	padding:40px 0 20px;
	font-size:0.7rem;
	color:rgba(255, 255, 255, 0.2);
	letter-spacing:0.15em;
	font-family:"sorttmillgoudy","WebSubsetFont",sans-serif;
	white-space:nowrap;
}

#garden-footer::before{
 	content:'ーーー';
	display:block;
	margin-bottom:10px;
	opacity: 0.3;
}