@charset "utf-8";

/* =========================================
   Reset & Base Settings
========================================= */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: 'Noto Serif JP', serif;
	color: #333;
	line-height: 1.8;
	background-color: #f7f5f0;
	/* 少し黄みがかった和紙のベース色 */
	overflow-x: hidden;
	position: relative;
}

/* =========================================
   Background Effects
========================================= */
/* WebGL（水面）のキャンバス */
#waterCanvas {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: -2;
	pointer-events: auto;
	/* マウスイベントを受け取る */
}

/* 和紙のテクスチャレイヤー */
.washi-texture {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: -1;
	pointer-events: none;
	/* SVGを用いた簡単な和紙風ノイズテクスチャ */
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.15'/%3E%3C/svg%3E");
	mix-blend-mode: multiply;
}

/* =========================================
   Layout & Components
========================================= */
.content-wrapper {
	position: relative;
	z-index: 1;
	max-width: 800px;
	margin: 0 auto;
	padding: 40px 20px;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.header {
	text-align: center;
	margin-bottom: 60px;
	margin-top: 40px;
	animation: fadeIn 2s ease-out;
}

.header h1 {
	font-size: 2.5rem;
	font-weight: 300;
	letter-spacing: 0.2em;
	color: #1a2a3a;
}

.subtitle {
	font-size: 0.9rem;
	color: #556b82;
	letter-spacing: 0.1em;
	margin-top: 10px;
}

/* 自己紹介カード（グラスモーフィズム・和風アレンジ） */
.profile-card {
	background: rgba(255, 255, 255, 0.4);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 4px;
	/* 和風なので角は丸めすぎない */
	padding: 50px 40px;
	max-width: 700px;
	width: 100%;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
	animation: slideUp 1.5s ease-out;
}

/* リスト全体の枠組み */
.portfolio-list {
	list-style: none;
	/* デフォルトの点を消す */
	padding: 0;
	margin: 10px 0;
	max-height: 200px;
	/* ②高さの上限を設定 */
	overflow-y: auto;
	/* 縦方向にスクロールさせる */
	border: 1px solid #bbb;
	border-radius: 8px;
	background-color: rgba(255, 255, 255, 0.2);
}

/* 各リスト項目 */
.portfolio-list li {
	padding: 10px 15px;
	border-bottom: 1px solid #f5f5f5;
	color: #333;
	line-height: 1.4;
	font-size: 0.95rem;
	transition: background-color 0.3s ease;
}

.portfolio-list li:last-child {
	border-bottom: none;
}

/* ホバー時に少し色を変えて視認性を上げる */
.portfolio-list li:hover {
	background-color: #fafafa;
}

/* ③スクロールバーのカスタマイズ（Webkitブラウザ向け） */
.portfolio-list::-webkit-scrollbar {
	width: 8px;
	/* スクロールバーの幅 */
}

.portfolio-list::-webkit-scrollbar-track {
	background: #f1f1f1;
	/* バーの背景部分 */
	border-radius: 0 8px 8px 0;
}

.portfolio-list::-webkit-scrollbar-thumb {
	background: #ccc;
	/* つまみ部分の色 */
	border-radius: 10px;
	border: 2px solid #f1f1f1;
	/* 隙間を作ってスッキリ見せる */
}

.portfolio-list::-webkit-scrollbar-thumb:hover {
	background: #999;
	/* ホバー時に少し濃くする */
}

/* Firefox向けの標準プロパティ */
.portfolio-list {
	scrollbar-width: thin;
	scrollbar-color: #ccc #f1f1f1;
}

.profile-item {
	margin-bottom: 40px;
}

.profile-item:last-child {
	margin-bottom: 0;
}

.item-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: #233547;
	border-bottom: 1px solid #aebac9;
	padding-bottom: 8px;
	margin-bottom: 16px;
	display: inline-block;
}

.item-desc {
	font-size: 1rem;
	color: #444;
	text-align: justify;
}

/* Footer Links */
.footer {
	margin-top: auto;
	padding-top: 60px;
	padding-bottom: 20px;
	text-align: center;
}

.social-links {
	display: flex;
	gap: 20px;
	justify-content: center;
	margin-bottom: 30px;
}

.link-btn {
	display: inline-block;
	padding: 10px 30px;
	color: #1a2a3a;
	text-decoration: none;
	border: 1px solid #1a2a3a;
	border-radius: 30px;
	font-size: 0.9rem;
	transition: all 0.3s ease;
	background: rgba(255, 255, 255, 0.3);
}

.link-btn:hover {
	background: #1a2a3a;
	color: #fff;
	box-shadow: 0 4px 15px rgba(26, 42, 58, 0.2);
}

.copyright {
	font-size: 0.8rem;
	color: #777;
}

/* =========================================
   Page Top Button
========================================= */
.page-top-btn {
	position: fixed;
	bottom: 30px;
	right: 30px;
	width: 50px;
	height: 50px;
	background: rgba(26, 42, 58, 0.8);
	color: #fff;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	z-index: 100;
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	transition: all 0.4s ease;
	display: flex;
	justify-content: center;
	align-items: center;
	backdrop-filter: blur(5px);
}

.page-top-btn.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.page-top-btn:hover {
	background: rgba(26, 42, 58, 1);
	transform: translateY(-5px);
}

.page-top-btn svg {
	width: 24px;
	height: 24px;
}

/* =========================================
   Animations
========================================= */
@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Responsive */
@media (max-width: 600px) {
	.profile-card {
		padding: 30px 20px;
	}

	.social-links {
		flex-direction: column;
		gap: 15px;
	}
}