@charset "UTF-8";

html {
	font-size: 62.5%;
	}
body {
	font-size: 1.6rem;
	line-height: 1.8rem;
	font-family: "Kaisei Decol", serif;
	background:
    radial-gradient(circle at top, #3b1e68 0%, transparent 40%),
    radial-gradient(circle at bottom right, #ff8a1f33 0%, transparent 30%),
    linear-gradient(
    180deg,
    #090611 0%,
    #0b1020 45%,
    #151a33 100%);
	background-attachment: fixed;
}
img { width: 100%; height: 100%; }
h1,h2,h3 { font-family: "Spicy Rice", serif;
			font-weight: 400; font-style: normal; letter-spacing: 0.5rem; }
.pc { display: inline-block; }
.mb { display: none; }
	#container { width: 100%; height: auto; display: flex; flex-direction: column;
				scroll-padding-top: 100px; scroll-behavior: smooth; }

	main {
		width: 1000px;
		height: 100svh;
		margin: 100px auto 0;
	}

	#links a {
		display: flex;
		align-items: center;
		padding: 10px 12px;
		color: #111827;
		text-decoration: none;
		transition: color 0.2s;
	}

	#links a:hover {
		color: rgb(104, 37, 40);
	}

	#links a svg {
		height: 1em;
		margin-left: 8px;
	}

	#links a.button {
		color: white;
		background: linear-gradient(83.21deg, #3245ff 0%, #bc52ee 100%);
		box-shadow:
			inset 0 0 0 1px rgba(255, 255, 255, 0.12),
			inset 0 -2px 0 rgba(0, 0, 0, 0.24);
		border-radius: 10px;
	}

	#links a.button:hover {
		color: rgb(230, 230, 230);
		box-shadow: none;
	}

	pre {
		font-family:
			ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono',
			monospace;
		font-weight: normal;
		background: linear-gradient(14deg, #d83333 0%, #f041ff 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		margin: 0;
	}

	p {
		font-size: 16px;
		line-height: 24px;
		letter-spacing: -0.006em;
	}

	code {
		display: inline-block;
		background:
			linear-gradient(66.77deg, #f3cddd 0%, #f5cee7 100%) padding-box,
			linear-gradient(155deg, #d83333 0%, #f041ff 18%, #f5cee7 45%) border-box;
		border-radius: 8px;
		border: 1px solid transparent;
		padding: 6px 8px;
	}

.stars {
		position: fixed;
		inset: 0;
		z-index: -1;
		background-image:
    		radial-gradient(2px 2px at 20px 30px, white, transparent),
    		radial-gradient(2px 2px at 120px 80px, #ffe7a8, transparent),
    		radial-gradient(1px 1px at 220px 150px, white, transparent);
		background-size: 250px 300px;
}

.flex { display: flex; align-items: flex-start; }
Header { display: flex; justify-content: space-between;  align-items: center;
		background-color: #000; width: 100%; height: 100px; z-index: 100;
		position: fixed; top: 0; }
Header a h1 { color: #7850b4; cursor: pointer; &:hover{ opacity: 0.4; } }

#sitename { display: flex; align-items: center; padding: 0 0 0 100px; }
#sitename img { width: 70px; height: 70px; }
#sitename h1 { font-size: 50px; padding: 0 0 0 20px; }

/** nav **/
nav ul { display: flex; }
nav ul li+ li { border-left: 1px solid #636161; }
nav ul li a { font-size: 20px;font-family: "Spicy Rice", serif;
			font-weight: 400; font-style: normal; letter-spacing: 0.5rem;
			padding: 10px 12px 15px; color: #f8b500; cursor: pointer;
			&:hover { background-color: #b79fcb; color: #000;} }

/** about **/
.top { margin: 0 auto; padding: 0; height: 90svh; /** background-color: #F5EFE6; **/ }
.top img { width: 1000px; height: 700px; }
.top > p { margin: 100px auto 0; padding: 150px 0; text-align: center;
		background-color: #F5EFE6;  width: 70%; border-radius: 50%; }

/** skill&profile **/
.skill { width: 100%; height: 90svh; margin: 0 auto; text-align: center; }
.boxH { width: 50%; height: 70%; padding: 50px 0;
		backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
		&.s { background: rgba(255,255,255,0.1); }
		&.p { background: rgba(255,255,255,0.1); }
		&.p h2 { text-decoration: underline; }
		}
.skill-card {
			background: #F5EFE6; border: 3px solid #f8b500;
			border-radius: 20px;
			margin: 10px 20px; padding: 10px;
			width: auto;
			transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.skill-card > h3 { color: #b79fcb; }
.skill h2 { font-size: 1.7rem; text-align: center;
			&:first-letter { font-size: 2.4rem; color: #0068b7; }}
.icon-profile { width: 120px; height: 120px; margin: 0 auto;
				border-radius: 50%; border: 4px solid #f8b500; }
.and { width:200px; height:200px; border-radius:50%; border: #000 1px solid;
		display: flex; align-items: center; justify-content: center;
		position: absolute; top: -300%; left: 35%; z-index: 100;
		transform: translate(-300%, 35%); background-color: rgba(255,255,255,0.3);
		&h2 { display: inline-block; line-height: 1rem; }
	}
.and h2:first-letter { font-size: 2.4rem; color: #0068b7; }
.fuwafuwa {
	animation: fuwafuwa 3s ease-in-out infinite alternate;
	display: inline-block;
	transition: 1.5s ease-in-out;
}
@keyframes fuwafuwa {
	0% { transform:translate(0, 0) rotate(-7deg); }
	50% { transform:translate(0, -7px) rotate(0deg); }
	100% { transform:translate(0, 0) rotate(7deg); }
}

/** illustration **/
.illust { width: 100%; height: 90svh; }
.inst { width: 100%; padding: 100px 0 0; }
.chara { width: calc(50% - 10px);
		overflow: hidden;
		transition: transform 0.3s ease;
		cursor: pointer;
		background-color: #F5EFE6;
		&:hover { transform: scale(1.02); }
	}
.chara h3 { text-align: center; padding: 7px 0;
			&:first-letter { font-size: 2rem; color: #0068b7; }}
/*モーダル*/
.modal { display: none; position: fixed; z-index: 999; inset: 0;
		width: 100%; height: 100%; overflow-y: auto;
		background-color: rgba(0,0,0,0.6); margin: 0 auto;
		opacity: 0; justify-content: center; align-items: center;
		visibility: hidden; overflow-y: auto;
		transition: opacity 0.4s ease, visibility 0.4s ease;
		backdrop-filter: blur(6px);
		overscroll-behavior: contain;
		z-index: 9999;
}
.modal.show { display: flex; opacity: 1; visibility: visible; }
/* モーダル内容 */
.modal-content { background-color: #fff;
				padding: 2em; border-radius: 10px;
				width: 800px; text-align: center;
				position: relative;
				transform: translateY(40px) scale(0.9); opacity: 0;
				transition: transform 0.45s cubic-bezier(.2,.8,.2,1), opacity 0.45s ease;
}
/* 表示時 */
.modal.show { display: flex; }
.modal.show .modal-content { transform: translateY(0) scale(1);
							opacity: 1; animation: floating 4s ease-in-out infinite;
}
.modal-content > img { width: auto; height: 90%; margin: 0 auto; }
/* 浮遊 */
@keyframes floating {
	0% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
	100% { transform: translateY(0); }
}

/* 閉じるボタン */
.close { position: absolute; top: 10px; right: 16px; font-size: 28px; cursor: pointer; }
.close:hover { color: #b79fcb; }
/** スライダー **/
.slideshow { display: flex; align-items: center; justify-content: center; }
.slides { position: relative;
			height:70vh; margin: 0 auto;
			display: flex; justify-content: center;
			align-items: center;
}
.slide { display: none;
			max-width: 100%; max-height: 100%;
			width: auto; height: auto;
			object-fit: contain; opacity: 0;
			transition: opacity 0.4s ease;
}
.slide.active { opacity: 1; z-index: 2; display: block; }
.prev,.next {
	border: #b79fcb 1px solid; color: #000;
	font-size: 2rem; cursor: pointer; padding: 10px;
	border-radius: 50%; backdrop-filter: blur(6px);
}
.slideshow img { width: 100%; display: none; }
.slideshow img.active { display: block; }
/* スマホ */
@media (max-width: 768px) {
	.slides { width: 100%; height: auto;
				display: flex; flex-direction: column; gap: 1rem;
	}
	.slide { position: static; opacity: 1; height: auto; }
}

/** Contact **/
.mailfoam { padding: 100px 0 0; width: 500px; height: auto; margin: 0 auto; }
#contact h2 { font-size: 3rem; color: #fff; text-align: center;
				&::first-letter { font-size: 3.5rem; color: #f8b500; }}
form { align-items: center;
		flex-direction: column; justify-content:center; }
.form { width: 100%; border: #fff 1px solid; margin: 20px 0 0; padding: 5px;
		background-color: #0b1020; color: #fff; }
form > button { width: 100%; height: auto; border: #fff 1px solid;
				color: #fff; margin: 20px auto 0; padding: 20px 0;
				}
/* 成功モーダル */
.success-modal { position: fixed; inset: 0;
					display: flex; justify-content: center; align-items: center;
					background: rgba(0,0,0,0.7); backdrop-filter: blur(8px);
					opacity: 0; visibility: hidden;
					transition: 0.4s ease; z-index: 9999;
}
/* 表示 */
.success-modal.show { opacity: 1; visibility: visible; }
/* 内容 */
.success-content { position: relative; padding: 3rem; border-radius: 24px;
					background: linear-gradient(180deg, #1b1830 0%, #101528 100%);
					color: white; text-align: center; overflow: hidden;
					transform: scale(0.8) translateY(30px);
					opacity: 0; transition: 0.4s ease;
}
/* 表示アニメ */
.success-modal.show .success-content { transform: scale(1) translateY(0); opacity: 1; }
/* 星 */
.success-stars span { position: absolute; width: 6px; height: 6px; border-radius: 50%;
						background: radial-gradient(circle, #fff 0%, #ffd978 70%, transparent 100% ); animation: starPop 1.2s ease forwards;
}
/* 星アニメ */
@keyframes starPop {
	0% { transform: translate(0,0) scale(0); opacity: 1; }
	100% { transform: translate(var(--x), var(--y)) scale(1.8); opacity: 0; }
}

.social { width: 500px; height: auto; margin: 0 auto; justify-content: center; gap: 10; }
.social > li { margin: 40px 20px 0 20px;}
.social > li a { display: block; padding: 20px; background-color: #3b1e68;
					border-radius: 50%; color: #f8b500; }





	@media screen and (max-height: 368px) {
		#news {
			display: none;
		}
	}

	@media screen and (max-width: 768px) {
		#container {
			display: flex;
			flex-direction: column;
		}

		#links {
			flex-wrap: wrap;
		}

		#links a.button {
			padding: 14px 18px;
		}

		h1 {
			line-height: 1.5;
		}
	}


@media (prefers-color-scheme: dark) {
	.astro-code,
	.astro-code span {
    color: var(--shiki-dark) !important;
    background-color: var(--shiki-dark-bg) !important;
	}
}


/** スマホ用 **/
@media screen and (max-width: 768px) {
.mb { display: block; }
.pc { display: none; }
main {
	width: 100%;
	height: auto;
	margin: 100px auto 0;
}

Header { flex-direction: column; align-items: center;
		width: 100%; height: 120px; background-color: #111827;}
Header a h1 { &:hover{ opacity: 0.4; } }

#sitename { align-items: center; padding: 0; }
#sitename img { width: 50px; height: 50px; }
#sitename h1 { font-size: 50px; padding: 0 0 0 15px; }

/** nav **/
nav { padding: 10px 0 15px; width: 100%; background-color: #f8b500; }
nav ul li { margin: 0 auto; width: auto; }
nav ul li a { font-size: 20px;font-family: "Spicy Rice", serif;
			font-weight: 400; font-style: normal; letter-spacing: 0.5rem;
			padding: 10px 12px 15px; color: #000;
			&:active { background-color: #b79fcb; color: #000; transform: scale(0.96);}
		 }

/** about **/
.top { margin: 0 auto; padding: 0; width: 100%; height: 100svh; /** background-color: #F5EFE6; **/ }
.top img { width: 100%; height: 700px; }
.top > p { margin: 100px auto 0; padding: 150px 0; text-align: center;
	 background-color: #F5EFE6;  width: 90%; border-radius: 50%; }

/** skill&profile **/
.skill { width: 100%; height: 100svh; margin: 0 auto;
		text-align: center; flex-direction: column; }
.boxH { width: 100%; height: auto; padding: 50px 0;
		&.s { background-color: #b79fcb; }
		&.p h2 { text-decoration: underline; }
		&.p { background-color: #dbebc4; }
		}
.skill-card {
			background: #F5EFE6; border: 3px solid #f8b500;
			border-radius: 20px;
			margin: 10px 20px; padding: 10px;
			width: auto;
			transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.skill-card > h3 { color: #b79fcb; }
.skill h2 { font-size: 1.7rem; text-align: center;
			&:first-letter { font-size: 2.4rem; color: #0068b7; }}
.icon-profile { width: 120px; height: 120px; margin: 0 auto;
				border-radius: 50%; border: 4px solid #f8b500; }
.and { width:150px; height:150px; border-radius:50%; border: #000 1px solid;
		display: flex; align-items: center; justify-content: center;
		position: absolute; top: 85%; left: -465%; z-index: 100; font-size: 1.4rem;
		transform: translate(85%, -465%); background-color: rgba(255,255,255,0.3);
		&h2 { display: inline-block; }
	}
.and h2 { line-height: 0.7rem; font-size: 1.3rem; }
.and h2:first-letter { font-size: 1.8rem; }

/** illustration **/
.illust { width: 100%; height: 90svh; }
.inst { width: 100%; padding: 100px 0 0; }
.chara { width: calc(50% - 10px);
		overflow: hidden;
		transition: transform 0.3s ease;
		cursor: pointer;
		background-color: #F5EFE6;
		&:hover { transform: scale(1.02); }
	}
.chara h3 { text-align: center; padding: 7px 0;
			&:first-letter { font-size: 2rem; color: #0068b7; }}
/*モーダル*/
.modal { display: none; position: fixed; z-index: 999; inset: 0;
		width: 100%; height: 100%; overflow-y: auto;
		background-color: rgba(0,0,0,0.6); margin: 0 auto;
		opacity: 0; justify-content: center; align-items: center;
		visibility: hidden; overflow-y: auto;
		transition: opacity 0.4s ease, visibility 0.4s ease;
		backdrop-filter: blur(6px);
		overscroll-behavior: contain;
		z-index: 9999;
}
.modal.show { display: flex; opacity: 1; visibility: visible; }
/* モーダル内容 */
.modal-content { background-color: #fff;
				padding: 2em; border-radius: 10px;
				width: 800px; text-align: center;
				position: relative;
				transform: translateY(40px) scale(0.9); opacity: 0;
				transition: transform 0.45s cubic-bezier(.2,.8,.2,1), opacity 0.45s ease;
}
/* 表示時 */
.modal.show { display: flex; }
.modal.show .modal-content { transform: translateY(0) scale(1);
							opacity: 1; animation: floating 4s ease-in-out infinite;
}
.modal-content > img { width: auto; height: 90%; margin: 0 auto; }
/* 浮遊 */
@keyframes floating {
	0% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
	100% { transform: translateY(0); }
}

/* 閉じるボタン */
.close { position: absolute; top: 10px; right: 16px; font-size: 28px; cursor: pointer; }
.close:hover { color: #b79fcb; }
/** スライダー **/
.slideshow { display: flex; align-items: center; justify-content: center; }
.slides { position: relative;
			height:70vh; margin: 0 auto;
			display: flex; justify-content: center;
			align-items: center;
}
.slide { display: none;
			max-width: 100%; max-height: 100%;
			width: auto; height: auto;
			object-fit: contain; opacity: 0;
			transition: opacity 0.4s ease;
}
.slide.active { opacity: 1; z-index: 2; display: block; }
.prev,.next {
	border: #b79fcb 1px solid; color: #000;
	font-size: 2rem; cursor: pointer; padding: 10px;
	border-radius: 50%; backdrop-filter: blur(6px);
}
.slideshow img { width: 100%; display: none; }
.slideshow img.active { display: block; }
/* スマホ */
@media (max-width: 768px) {
	.slides { width: 100%; height: auto;
				display: flex; flex-direction: column; gap: 1rem;
	}
	.slide { position: static; opacity: 1; height: auto; }
}

/** Contact **/
.mailfoam { padding: 200px 0 0; width: auto; height: auto; margin: 0 auto; padding: 0 20px; }
.form { width: 100%; border: #fff 1px solid; margin: 20px 0 0; padding: 5px;
		background-color: #0b1020; color: #fff; }
form > button { width: 100%; height: auto; border: #fff 1px solid;
				color: #fff; margin: 20px auto 0; padding: 20px 0;
				}
/* 成功モーダル */
.success-modal { position: fixed; inset: 0;
					display: flex; justify-content: center; align-items: center;
					background: rgba(0,0,0,0.7); backdrop-filter: blur(8px);
					opacity: 0; visibility: hidden;
					transition: 0.4s ease; z-index: 9999;
}
/* 表示 */
.success-modal.show { opacity: 1; visibility: visible; }
/* 内容 */
.success-content { position: relative; padding: 3rem; border-radius: 24px;
					background: linear-gradient(180deg, #1b1830 0%, #101528 100%);
					color: white; text-align: center; overflow: hidden;
					transform: scale(0.8) translateY(30px);
					opacity: 0; transition: 0.4s ease;
}
/* 表示アニメ */
.success-modal.show .success-content { transform: scale(1) translateY(0); opacity: 1; }
/* 星 */
.success-stars span { position: absolute; width: 6px; height: 6px; border-radius: 50%;
						background: radial-gradient(circle, #fff 0%, #ffd978 70%, transparent 100% ); animation: starPop 1.2s ease forwards;
}
/* 星アニメ */
@keyframes starPop {
	0% { transform: translate(0,0) scale(0); opacity: 1; }
	100% { transform: translate(var(--x), var(--y)) scale(1.8); opacity: 0; }
}

.social { width: 100%; height: auto; margin: 195px auto 90px auto;
		justify-content: center; }
.social > li { margin: 0 15px}
.social > li a { display: block; padding: 20px; background-color: #3b1e68;
					border-radius: 50%; color: #f8b500; }

}