/* 基础重置 */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background: #F3F1FC; /* 浅色系基调 */
	font-family: "Helvetica Neue", "PingFang SC", sans-serif;
	color: #333;
	scroll-behavior: smooth; /* 平滑滚动 */
	max-width: 100%;
	overflow-x: hidden;
}

a {
	text-decoration: none; 
	color: inherit;
	display: inline-block; 
	max-width: 100%; /* 限制最大宽度不超过父级 */
	box-sizing: border-box;
}

/* 侧边导航栏 */
.side-nav {
	position: fixed;
	left: 35px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 100;
	padding: 10px;             /* 内边距 */
	margin: -10px;
}

.side-nav ul {
    list-style: none;
}

.side-nav li a {
	display: block;
	padding: 10px 0;
	color: #000000; /* 色系示例 */
	text-decoration: none;
	font-weight: bold;
	font-size: 14px;
	letter-spacing: 2px;
	writing-mode: vertical-rl; /* 垂直排列文字 */
}

@media (max-width: 768px) {
	.side-nav {
	background-color: #F3F1FC; /* 矩形方块的背景颜色 */
	border-radius: 9px;       /* 圆角大小 */
	
	}
}

@media (max-width: 500px) {
	.side-nav {display: none;}
	
}

/* 全屏 Section 设置 */
.section {
	min-height: 100vh;
	padding: 3% 10%;
	position: relative;
    	
}

/* 首屏特化 */
.hero {
	background: linear-gradient(135deg, #2C5BB5 0%, #ffffff 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	clip-path: inset(-1000px 0px -1000px 0px);
	position: relative; 
	height: 100vh;
}

.hero::after {
	content: "";
	position: absolute;
	bottom: 0;      /* 贴在底部 */
	left: 0;        /* 从左侧开始 */
	width: 100%;  
	height: 10px;   /* 厚度 */
	background-color: #2C5BB5; /* 方块颜色 */
	
}

/* 创建背景伪元素 */
.hero::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	background-image: url('pics/夏のビーチ（日中）.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	opacity: 0.2;
	z-index: -1; 
}



.character-img {
	position: absolute;
	bottom: -100%;
	left: 20%;
	height: 220%;
width: 80%;max-width: 100vw;overflow: hidden;
	z-index: 2;
}

.character-img img {
	height: 100%;
	width: auto;
	object-fit: cover;
}

.hero-text {
	position: relative;
	z-index: 3;
	text-align: left;
	width: 100%;
}

.hero-text h1 {
	font-size: 5rem;
	color: white;
	text-shadow: 4px 4px 0px #10284A;
}

/* 通用标题装饰 */
.section-title {
	font-size: 3rem;
	color: #ff85a2;
	margin-bottom: 30px;
	border-bottom: 2px solid #ff85a2;
	display: inline-block;
}






/* 容器：锁定高度，水平居中 */
.stack-container {
	position: relative;
	width: 100%;       /* 适配父级宽度 */
	max-width: 100vh;   /* 设置一个最大宽度，防止在大屏上过大 */
	height: 60vh;       /* 核心：锁定容器高度（例如屏幕高度的60%） */
	cursor: pointer;
	margin-bottom: 20%; margin-bottom: 50vh;
}

/* 图片包裹层：全屏绝对定位 */
.img-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	
	transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* 增加平滑的贝塞尔曲线过渡 */

	display: flex;
	align-items: flex-start; 
	justify-content: flex-start; 
	padding: 10px;
	box-sizing: border-box;
}

/* 核心图片样式：完整显示 */
.img-wrapper img {
	
	max-width: 100%;
	
	width: 100%;
	height: auto;
	object-fit: contain;

	box-shadow: 0 5px 20px rgba(0,0,0,0.15);
	background: #fff;
}

/* 初始状态：A 在下，B 在上 */
.img-a {
	position: relative;
	z-index: 1;
	transform: scale(0.9) translateY(15px);
	opacity: 0.3;
}

.img-b {
	z-index: 2;
	transform: scale(1) translateY(0);
	opacity: 1;
}

/* 切换状态：当容器有 .swapped 类时，A 变到上面 */
.stack-container.swapped .img-a {
	z-index: 2;
	transform: scale(1) translateY(0);
	opacity: 1;
}

.stack-container.swapped .img-b {
	z-index: 1;
	transform: scale(0.9) translateY(15px); /* 交换：B 变到底部 */
	opacity: 0.3;
}






/* 外层容器：开启 Flex 布局 */
.card-container {
	display: flex;
	gap: 20px;          /* 框体之间的间距 */
	padding: 20px;
	flex-wrap: wrap;    /* 屏幕太窄时自动换行 */
}

.card-container > a {
	flex: 1;         
	min-width: 280px;
	max-width: 100%;
	display: flex;
	text-decoration: none;
}

/* 单个框体样式 */
.card {
    width: 100%;      /* 让 card 填满 a 的宽度 */
    height: 70vh;
    background: #fff;
    /* 其余样式保持不变 */
}


/* 上半部分：图片区域 */
.card-image {
	height: 70%;      /* 固定图片区域高度 */
	width: 100%;
}

.card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;  /* 核心：填充并裁剪，防止变形 */
}

/* 下半部分：文字区域 */
.card-content {
	padding: 20px;
}

.card-content h3 {
	margin-top: 0;
	color: #333;
	font-size: 1.5rem;
}

.card-content p {
	margin-top: 9px;
	color: #666;
	line-height: 1.6;
	font-size: 0.95rem;
}

.card {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.card:hover {
	transform: translateY(-10px); /* 向上浮动 */
	box-shadow: 0 10px 25px rgba(0,0,0,0.2); /* 阴影加深 */
}





/* 容器布局 */
.nav-container {
	display: flex;
	align-items: center;      /* 垂直居中 */
	padding: 12px 24px;
	background-color: #ffffff;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06); /* 增加一点阴影提升质感 */
	transition: all 0.3s ease;
	border: 1px solid transparent; /* 预留边框位置，防止闪烁 */
	text-decoration: none !important;
}


/* Logo 样式 */
.nav-logo img {
	width: 64px;             /* 限制高度，宽度自动比例 */
	display: block;
	margin-right: 20px;       /* 与头像的间距 */
}

/* 圆形头像框 */
.nav-avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;       /* 强制圆形 */
	overflow: hidden;         /* 隐藏超出圆框的部分 */
	margin-right: 20px;       /* 与文字的间距 */
	border: 3px solid #eee;	/* 可选：给头像加个极细的边框 */
}

.nav-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;		
}

/* 黑色粗体文字 */
.nav-username {
	color: #000000;		/* 纯黑 */
	text-decoration: none !important;
	font-weight: 800;	/* 极粗 */
	font-size: 1.1rem;
	letter-spacing: 0.5px;		/* 稍微加宽字间距，更具设计感 */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}



.nav-container:hover {
	border: 1px solid #ddd;       /* 悬停时显示淡淡的边框 */
	box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* 增加一点浮动阴影感 */
	transform: translateY(-2px);  /* 悬停时微微向上浮动 2 像素 */
}

.name {
	display: inline-block; /* 作为一个块整体对待 */
	white-space: nowrap;   /* 内部绝不换行 */
}



.bottom-bar {
	position: static;	/* 固定在屏幕底部 */
	bottom: 0;
	left: 0;
	width: 100%;	/* 横跨全屏 */
	height: 60px;	/* 设定一个合适的高度 */
    
	/* 居中内容 */
	display: flex;
	justify-content: center;
	align-items: center;

	/* 样式设计：半透明磨砂质感 */
	background: rgba(255, 255, 255, 0.8); 
	backdrop-filter: blur(10px);	/* 毛玻璃效果 */
	border-top: 1px solid rgba(0, 0, 0, 0.1);

	z-index: 999; 
}

.home-link {
	text-decoration: none;
	color: #333;
	font-size: 1.1rem;
	font-weight: bold;	
	letter-spacing: 2px;
	transition: all 0.3s ease;
}

.home-link:hover {
	color: #007AFF;		/* 悬停变蓝色 */
	transform: translateY(-2px);	/* 轻微上浮 */
}

#links {
    min-height: 90vh; /* 减小到你需要的数值 */
}