/* 全局样式初始化 */  
* {  
  margin: 0;  
  padding: 0;  
  box-sizing: border-box;  
}  

:root {  
  --primary-color: #5271ff;  
  --line-color: #06c755;  
  --wechat-color: #07c160;  
  --text-primary: #333;  
  --text-secondary: #666;  
  --light-bg: #f8f9fa;  
  --card-bg: #ffffff;  
  --border-radius: 12px;  
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);  
  --transition: all 0.3s ease;  
  --peaky-dark: #0a0a0a;  
  --peaky-gold: #c0aa77;  
  --peaky-silver: #c5c5c7;  
  --peaky-dark-gray: #222222;  
  --peaky-accent: #a32e2e;  
  --peaky-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);  
  --peaky-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);  
  --peaky-font: 'Georgia', serif; 
  --golden-ratio: 1.618;  
  --math-primary: #1565c0;  
  --math-secondary: #283593;  
  --math-accent: #00bcd4;  
  --fractal-primary: #6a1b9a;  
  --fractal-secondary: #4a148c;  
  --fractal-accent: #9c27b0;  
  --bg-light: #ffffff;  
  --text-primary: #212121;  
  --math-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);  
  --math-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 
  --finance-primary: #2e7d32;  
  --finance-secondary: #1b5e20;  
  --finance-accent: #4caf50;  
  
  --code-primary: #0288d1;  
  --code-secondary: #01579b;  
  --code-accent: #29b6f6;  
  
  --ebook-primary: #d81b60;  
  --ebook-secondary: #880e4f;  
  --ebook-accent: #ec407a;
}  

body {  
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;  
  background-color: var(--light-bg);  
  color: var(--text-primary);  
  line-height: 1.6;  
}  

.app-container {  
  max-width: 1000px;  
  margin: 0 auto;  
  padding: 30px 20px;  
}  

/* 语言选择器 */  
.language-selector {  
  display: flex;  
  justify-content: center;  
  margin-bottom: 30px;  
  gap: 10px;  
}  

.lang-btn {  
  background: var(--card-bg);  
  border: none;  
  padding: 10px 16px;  
  border-radius: 30px;  
  cursor: pointer;  
  font-weight: 500;  
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);  
  transition: var(--transition);  
  display: flex;  
  align-items: center;  
  gap: 8px;  
}  

.lang-btn .flag {  
  font-size: 1.2em;  
}  

.lang-btn.active {  
  background: var(--primary-color);  
  color: white;  
  transform: translateY(-2px);  
  box-shadow: 0 5px 15px rgba(82, 113, 255, 0.3);  
}  

.lang-btn:hover:not(.active) {  
  background: #eaefff;  
  transform: translateY(-1px);  
}  

/* 页面标题部分 */  
.header {  
  text-align: center;  
  margin-bottom: 40px;  
}  

.main-title {  
  font-size: 2.5rem;  
  font-weight: 600;  
  color: var(--primary-color);  
  margin-bottom: 12px;  
}  

.subtitle {  
  font-size: 1.1rem;  
  color: var(--text-secondary);  
  font-weight: 300;  
}  

/* 联系卡片容器 */  
.contact-cards {  
  display: flex;  
  justify-content: center;  
  flex-wrap: wrap;  
  gap: 30px;  
  margin-bottom: 40px;  
}  

/* 联系卡片样式 */  
.contact-card {  
  background: var(--card-bg);  
  border-radius: var(--border-radius);  
  width: 340px;  
  overflow: hidden;  
  box-shadow: var(--shadow);  
  transition: var(--transition);  
}  

.contact-card:hover {  
  transform: translateY(-10px);  
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);  
}  

.card-header {  
  padding: 20px;  
  display: flex;  
  align-items: center;  
  gap: 15px;  
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);  
}  

.app-icon {  
  width: 36px;  
  height: 36px;  
  border-radius: 50%;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  font-size: 18px;  
  color: white;  
}  

.line-icon {  
  background: var(--line-color);  
}  

.wechat-icon {  
  background: var(--wechat-color);  
}  

.card-header h2 {  
  font-size: 1.4rem;  
  font-weight: 500;  
}  

.card-content {  
  padding: 25px;  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
}  

/* 二维码容器 */  
.qr-container {  
  position: relative;  
  margin-bottom: 20px;  
  display: flex;  
  justify-content: center;  
}  

/* 二维码图片通用样式 */  
.qr-img {  
  width: 180px;  
  height: 180px;  
  border-radius: 8px;  
  object-fit: contain; /* 改为contain确保完整显示 */  
  transition: var(--transition);  
  border: 1px solid rgba(0, 0, 0, 0.06);  
  background-color: white; /* 确保二维码背景是白色 */  
}  

/* 微信二维码特殊处理 */  
#wechatQR {  
  width: 200px; /* 稍微加大尺寸 */  
  height: 200px;  
  padding: 5px; /* 添加内边距以确保边缘清晰 */  
}  

/* 相应调整微信卡片的二维码容器，使其能容纳更大的图片 */  
.wechat-card .qr-container {  
  margin-bottom: 25px; /* 增加底部间距 */  
}  

.scan-animation {  
  position: absolute;  
  top: 0;  
  left: 0;  
  width: 100%;  
  height: 4px;  
  background: linear-gradient(90deg, transparent, var(--primary-color), transparent);  
  animation: scanAnimation 2s infinite;  
  opacity: 0;  
  transition: opacity 0.3s;  
}  

/* 确保扫描动画也适配微信二维码 */  
.wechat-card .scan-animation {  
  width: 200px;  
  left: 50%;  
  transform: translateX(-50%);  
}  

.qr-container:hover .scan-animation {  
  opacity: 1;  
}  

@keyframes scanAnimation {  
  0% {  
      top: 0;  
  }  
  50% {  
      top: calc(100% - 4px);  
  }  
  100% {  
      top: 0;  
  }  
}  

/* ID和操作按钮 */  
.id-container {  
  width: 100%;  
  text-align: center;  
}  

.id-label {  
  font-size: 0.85rem;  
  color: var(--text-secondary);  
  margin-bottom: 6px;  
  font-weight: 500;  
}  

.id-value {  
  font-size: 1.1rem;  
  font-weight: 500;  
  margin-bottom: 15px;  
  background: #f5f7ff;  
  padding: 8px 16px;  
  border-radius: 20px;  
  display: inline-block;  
}  

.action-btn {  
  padding: 10px 24px;  
  border: none;  
  border-radius: 30px;  
  color: white;  
  font-weight: 500;  
  cursor: pointer;  
  transition: var(--transition);  
  font-size: 0.95rem;  
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);  
}  

.line-btn {  
  background: var(--line-color);  
}  

.wechat-btn {  
  background: var(--wechat-color);  
}  

.action-btn:hover {  
  transform: translateY(-2px);  
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);  
}  

.action-btn:active {  
  transform: translateY(1px);  
}  

/* 指引区域样式 */  
.guide-wrapper {  
  background: var(--card-bg);  
  border-radius: var(--border-radius);  
  padding: 30px;  
  box-shadow: var(--shadow);  
  margin-bottom: 40px;  
}  

.guide-title {  
  text-align: center;  
  margin-bottom: 25px;  
  font-size: 1.6rem;  
  font-weight: 500;  
  color: var(--primary-color);  
}  

.guide-container {  
  display: flex;  
  flex-wrap: wrap;  
  gap: 30px;  
}  

.guide-section {  
  flex: 1;  
  min-width: 250px;  
}  

.guide-header {  
  display: flex;  
  align-items: center;  
  gap: 12px;  
  margin-bottom: 15px;  
  padding-bottom: 10px;  
  border-bottom: 2px solid #f2f4f8;  
}  

.guide-header i {  
  font-size: 20px;  
  color: var(--primary-color);  
}  

.guide-header h4 {  
  font-size: 1.1rem;  
  font-weight: 500;  
}  

.guide-section ol {  
  padding-left: 25px;  
}  

.guide-section li {  
  margin-bottom: 12px;  
  color: var(--text-secondary);  
}  

.guide-section strong {  
  color: var(--primary-color);  
  font-weight: 500;  
}  

/* 页脚 */  
footer {  
  text-align: center;  
  padding: 20px 0;  
  color: var(--text-secondary);  
  font-size: 0.9rem;  
}  

/* 模态框样式 */  
.modal {  
  display: none;  
  position: fixed;  
  z-index: 1000;  
  left: 0;  
  top: 0;  
  width: 100%;  
  height: 100%;  
  background-color: rgba(0, 0, 0, 0.5);  
}  

/* 当显示模态框时 */  
.modal[style="display: block"] {  
  display: flex !important;  
  justify-content: center;  
  align-items: center;  
}  

.modal-content {  
  position: relative;  
  background: var(--card-bg);  
  margin: 15% auto;  
  width: 90%;  
  max-width: 450px;  
  border-radius: var(--border-radius);  
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);  
  overflow: hidden;  
  transform: translateY(20px);  
  opacity: 0;  
  animation: modalAppear 0.3s forwards;  
}  

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

.modal-header {  
  padding: 15px 20px;  
  background: #f8f9fa;  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);  
}  

.modal-title {  
  font-size: 1.2rem;  
  font-weight: 500;  
}  

.close-btn {  
  font-size: 1.5rem;  
  color: #aaa;  
  cursor: pointer;  
  transition: color 0.2s;  
}  

.close-btn:hover {  
  color: #555;  
}  

.modal-body {  
  padding: 20px;  
}  

/* 响应式设计 */  
@media (max-width: 768px) {  
  .main-title {  
      font-size: 2rem;  
  }  
  
  .contact-cards {  
      gap: 20px;  
  }  
  
  .contact-card {  
      width: 100%;  
      max-width: 340px;  
  }  
  
  .guide-section {  
      flex: 100%;  
  }  
  
  /* 响应式调整微信二维码尺寸 */  
  #wechatQR {  
      width: 180px;  
      height: 180px;  
  }  
  
  .wechat-card .scan-animation {  
      width: 180px;  
  }  
}  

@media (max-width: 480px) {  
  .app-container {  
      padding: 20px 15px;  
  }  
  
  .language-selector {  
      flex-wrap: wrap;  
  }  
  
  .lang-btn {  
      font-size: 0.9rem;  
  }  
  
  .main-title {  
      font-size: 1.75rem;  
  }  
  
  .subtitle {  
      font-size: 1rem;  
  }  
  
  .card-header {  
      padding: 15px;  
  }  
  
  .card-content {  
      padding: 20px 15px;  
  }  
  
  /* 小屏幕设备上二维码尺寸调整 */  
  .qr-img {  
      width: 150px;  
      height: 150px;  
  }  
  
  #wechatQR {  
      width: 170px;  
      height: 170px;  
  }  
  
  .wechat-card .scan-animation {  
      width: 170px;  
  }  
  
  .guide-wrapper {  
      padding: 20px 15px;  
  }  
}  

/* style4.css の修正部分 */  

@media (max-width: 600px) {  
  .container {  
      padding: 20px 15px;  
      margin: 10px;  
      width: 95%;  
  }  

  h1 {  
      font-size: 1.5em;  
      line-height: 1.3;  
  }  

  .link-buttons {  
      margin-top: 15px;  
  }  

  .link-button {  
      padding: 12px 15px;  
      font-size: 0.9em;  
      margin: 8px 0;  
  }  

  #language-switch {  
      flex-direction: column;  
  }  

  .lang-button {  
      width: 100%;  
      margin: 5px 0;  
      padding: 12px;  
  }  

  /* プログレスバーのモバイル対応 */  
  .progress-container {  
      width: 90%;  
      margin: 15px auto;  
  }  

  .progress-bar {  
      height: 8px;  
  }  

  .step {  
      width: 25px;  
      height: 25px;  
      font-size: 0.8em;  
  }  
}  

/* タップターゲットの最適化 */  
button, .link-button {  
  min-width: 44px;  
  min-height: 44px;  
}  



/* Peaky Blinders 报童帽音频控制按钮 - 顶部显眼版本 */  
.peaky-audio-container {  
  position: fixed;  
  z-index: 100;  
  /* 将容器放在顶部中央，只露出帽子下半部分 */  
  top: -20px;  
  right: 30px; /* 放在右上角 */  
  transition: top 0.3s ease;  
}  

/* 主按钮 */  
.peaky-audio-btn {  
  position: relative;  
  width: 60px;  
  height: 60px;  
  background: transparent;  
  border: none;  
  cursor: pointer;  
  padding: 0;  
  transition: transform 0.3s ease;  
  z-index: 10;  
}  

/* 鼠标悬停时下降显示更多 */  
.peaky-audio-container:hover {  
  top: -15px;  
}  

/* 激活状态完全显示 */  
.peaky-audio-container.active {  
  top: 5px;  
}  

/* 帽子图像 - 移除黑色背景 */  
.peaky-cap-img {  
  width: 100%;  
  height: 100%;  
  object-fit: contain;  
  mix-blend-mode: multiply; /* 帮助去除黑色背景 */  
  background-color: transparent;  
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.4));  
  transition: filter 0.3s ease;  
}  

/* 音频标签样式 - 调整到帽子下方 */  
.audio-label {  
  position: absolute;  
  top: 60px; /* 放在帽子下方 */  
  left: 50%;  
  transform: translateX(-50%);  
  white-space: nowrap;  
  font-family: 'Georgia', serif;  
  font-size: 9px;  
  color: #eee;  
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);  
  background: rgba(30, 25, 22, 0.9);  
  padding: 3px 7px;  
  border-radius: 4px;  
  opacity: 0;  
  transition: opacity 0.3s ease;  
  letter-spacing: 0.5px;  
}  

.peaky-audio-btn:hover .audio-label {  
  opacity: 1;  
}  

/* 添加注意力提示效果 - 帽子轻微摇动 */  
@keyframes cap-attention {  
  0%, 100% { transform: rotate(0deg); }  
  25% { transform: rotate(-5deg); }  
  75% { transform: rotate(5deg); }  
}  

/* 页面加载后短暂摇动以吸引注意 */  
.peaky-audio-container:not(.attention-shown) {  
  animation: cap-attention 2s ease 1s;  
}  

/* 播放状态效果 */  
.peaky-audio-btn.playing .peaky-cap-img {  
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.4)) brightness(1.1);  
  animation: subtle-pulse 2s infinite alternate;  
}  

/* 静音状态 */  
.peaky-audio-btn.muted .peaky-cap-img {  
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3)) grayscale(40%) brightness(0.9);  
}  

/* 错误状态 */  
.peaky-audio-btn.error .peaky-cap-img {  
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3)) grayscale(50%) sepia(20%);  
  opacity: 0.8;  
}  

/* 细微动画效果 */  
@keyframes subtle-pulse {  
  0% {  
      transform: scale(1);  
  }  
  100% {  
      transform: scale(1.05);  
  }  
}  

/* 响应式调整 */  
@media (max-width: 768px) {  
  .peaky-audio-container {  
      right: 20px; /* 移动设备上略微靠近边缘 */  
  }  
}  

@media (max-width: 480px) {  
  .peaky-audio-container {  
      right: 10px;  
  }  
  
  .peaky-audio-btn {  
      width: 50px;  
      height: 50px;  
  }  
}  

/* Instagram图标样式 */  
.instagram-icon {  
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);  
  display: flex;  
  justify-content: center;  
  align-items: center;  
}  

.instagram-icon i {  
  color: white;  
}  

/* Facebook图标样式 */  
.facebook-icon {  
  background: #1877f2;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
}  

.facebook-icon i {  
  color: white;  
}  

/* Instagram按钮样式 */  
.instagram-btn {  
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);  
}  

/* Facebook按钮样式 */  
.facebook-btn {  
  background: #1877f2;  
}  

/* 确保两行布局在移动端也保持 */  
.top-row, .bottom-row {  
  display: flex;  
  justify-content: center;  
  gap: 20px;  
  margin-bottom: 30px;  
  flex-wrap: wrap;  
}  

/* 移动端适配 - 确保保持两行结构 */  
@media (max-width: 768px) {  
  .top-row, .bottom-row {  
    gap: 15px;  
  }  
  
  .contact-card {  
    width: 300px; /* 在移动端稍微缩小卡片 */  
  }  
}  

/* 在更小的屏幕上进一步调整 */  
@media (max-width: 600px) {  
  .contact-card {  
    width: 280px;  
  }  
  
  .card-content {  
    flex-direction: column;  
  }  
  
  .qr-container {  
    margin: 0 auto 15px;  
  }  
  
  .id-container {  
    text-align: center;  
  }  
}  

/* 确保极小屏幕上一行只显示一个卡片 */  
@media (max-width: 480px) {  
  .top-row, .bottom-row {  
    flex-direction: column;  
    align-items: center;  
  }  
  
  .contact-card {  
    margin-bottom: 20px;  
  }  
}  

/* 指引区域样式更新 - 支持四个社交媒体 */  
.guide-container {  
  display: grid;  
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));  
  gap: 20px;  
  width: 100%;  
}  

@media (max-width: 768px) {  
  .guide-container {  
    grid-template-columns: 1fr;  
  }  
}  

/* 小红书图标 - 使用背景图像 */  
.xiaohongshu-icon {  
  position: relative;  
  background-color: transparent !important;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  overflow: hidden;  
}  

.xiaohongshu-icon:before {  
  content: "";  
  position: absolute;  
  top: 0;  
  left: 0;  
  width: 100%;  
  height: 100%;  
  background-image: url('redlogo.png'); /* 需要替换为实际存储的图片路径 */  
  background-size: cover;  
  background-position: center;  
}  

.xiaohongshu-icon i {  
  display: none;  
}  

.xiaohongshu-btn {  
  background: #fe2c55;  
}  







/* 三行卡片布局 */  
.top-row, .middle-row, .bottom-row {  
  display: flex;  
  justify-content: center;  
  gap: 20px;  
  margin-bottom: 30px;  
  flex-wrap: wrap;  
}  

.bottom-row {  
  margin-bottom: 50px;  
}  

/* 小红书卡片居中 */  
.bottom-row .xiaohongshu-card {  
  margin: 0 auto;  
}  

/* 响应式调整 */  
@media (max-width: 768px) {  
  .top-row, .middle-row, .bottom-row {  
    gap: 15px;  
  }  
}  

@media (max-width: 480px) {  
  .top-row, .middle-row, .bottom-row {  
    flex-direction: column;  
    align-items: center;  
  }  
  
  .contact-card {  
    margin-bottom: 20px;  
  }  
}  

/* 修复指南区域的第5个部分边框颜色 */  
.guide-section:nth-child(5) {  
  border-left-color: #fe2c55;  
}  

.guide-section:nth-child(5) .guide-header i {  
  color: #fe2c55;  
}  

/* 模态框居中修复 */  
.modal {  
  display: none;  
  position: fixed;  
  z-index: 1000;  
  left: 0;  
  top: 0;  
  width: 100%;  
  height: 100%;  
  background-color: rgba(0, 0, 0, 0.5);  
}  

.modal[style="display: block"] {  
  display: flex !important;  
  justify-content: center;  
  align-items: center;  
}  

/* 小红书指南图标 - 使用与卡片相同的图片 */  
.xiaohongshu-guide-icon {  
  position: relative;  
  width: 20px;  
  height: 20px;  
  border-radius: 15%;  
  overflow: hidden;  
  background-color: transparent !important;  
  display: block;  
}  

.xiaohongshu-guide-icon:before {  
  content: "";  
  position: absolute;  
  top: 0;  
  left: 0;  
  width: 100%;  
  height: 100%;  
  background-image: url('redlogo.png');  
  background-size: cover;  
  background-position: center;  
}  

/* ボタンコンテナ - 間隔を縮小 */  
.math-beauty-buttons {  
  display: flex;  
  justify-content: center;  
  gap: 15px; /* 間隔を縮小 */  
  margin: 15px 0; /* 上下マージンを縮小 */  
  flex-wrap: wrap;  
  padding: 0 15px;  
}  

/* ボタン共通スタイル - 幅を拡大、高さはそのまま */  
.math-beauty-btn {  
  position: relative;  
  width: 180px; /* 幅を拡大：150px → 180px */  
  height: 45px; /* 高さはそのまま */  
  border-radius: 6px;  
  overflow: hidden;  
  box-shadow: var(--math-shadow);  
  transition: var(--math-transition);  
  text-decoration: none;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  background: var(--bg-light);  
  padding: 8px 16px;  
}  

/* ボタン背景 */  
.btn-background {  
  position: absolute;  
  top: 0;  
  left: 0;  
  width: 100%;  
  height: 100%;  
  opacity: 0.07;  
  transition: var(--math-transition);  
}  

/* フィボナッチ螺旋パターン (Math Blog) */  
.fibonacci-spiral {  
  position: absolute;  
  width: 100%;  
  height: 100%;  
  background:   
    radial-gradient(circle at 61.8% 61.8%, transparent 61.8%, var(--math-primary) 61.9%, var(--math-primary) 67.8%, transparent 67.9%),  
    radial-gradient(circle at 38.2% 38.2%, var(--math-primary) 38.2%, transparent 38.3%);  
  transform: rotate(0deg);  
  transition: transform 1.5s ease;  
}  

/* フラクタルパターン (My Group) */  
.fractal-pattern {  
  position: absolute;  
  width: 100%;  
  height: 100%;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  opacity: 0.5;  
  transition: var(--math-transition);  
}  

/* シェルピンスキー三角形 */  
.sierpinski-triangle {  
  position: relative;  
  width: 70%;  
  height: 70%;  
}  

.triangle {  
  position: absolute;  
  background-color: var(--fractal-primary);  
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);  
  transition: transform 0.5s ease, opacity 0.5s ease;  
}  

.triangle.t1 {  
  top: 0;  
  left: 25%;  
  width: 50%;  
  height: 50%;  
}  

.triangle.t2 {  
  top: 50%;  
  left: 0;  
  width: 50%;  
  height: 50%;  
}  

.triangle.t3 {  
  top: 50%;  
  left: 50%;  
  width: 50%;  
  height: 50%;  
}  

/* ボタンコンテンツ - レイアウト変更 */  
.btn-content {  
  position: relative;  
  z-index: 2;  
  display: flex;  
  flex-direction: row;  
  align-items: center;  
  gap: 10px; /* アイコンとテキストの間隔を少し広げる */  
  color: var(--text-primary);  
}  

/* アイコンスタイル */  
.math-beauty-btn i {  
  font-size: 1.1rem;  
  transition: var(--math-transition);  
}  

.blog-btn i {  
  color: var(--math-primary);  
}  

.group-btn i {  
  color: var(--fractal-primary);  
}  

/* ボタンテキスト */  
.btn-text {  
  font-size: 0.9rem;  
  font-weight: 500;  
  transition: var(--math-transition);  
}  

/* Math Blogボタン特有スタイル */  
.blog-btn {  
  border-bottom: 2px solid var(--math-primary);  
}  

.blog-btn .btn-text {  
  color: var(--math-secondary);  
}  

/* Group Buttonボタン特有スタイル */  
.group-btn {  
  border-bottom: 2px solid var(--fractal-primary);  
}  

.group-btn .btn-text {  
  color: var(--fractal-secondary);  
}  

/* ホバーエフェクト */  
.math-beauty-btn:hover {  
  transform: translateY(-3px);  
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);  
}  

.blog-btn:hover .fibonacci-spiral {  
  transform: rotate(180deg);  
  opacity: 0.12;  
}  

/* フラクタルアニメーション */  
.group-btn:hover .fractal-pattern {  
  opacity: 0.8;  
}  

.group-btn:hover .triangle.t1 {  
  transform: scale(0.8) translate(0, 3px);  
}  

.group-btn:hover .triangle.t2 {  
  transform: scale(0.8) translate(-3px, -3px);  
}  

.group-btn:hover .triangle.t3 {  
  transform: scale(0.8) translate(3px, -3px);  
}  

.math-beauty-btn:hover i {  
  transform: scale(1.1);  
}  

/* コッホ雪片エフェクト */  
.group-btn::before {  
  content: '';  
  position: absolute;  
  top: -10px;  
  right: -10px;  
  width: 25px;  
  height: 25px;  
  background-color: transparent;  
  border: 1px solid var(--fractal-accent);  
  opacity: 0;  
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);  
  transition: all 0.5s ease;  
}  

.group-btn::after {  
  content: '';  
  position: absolute;  
  bottom: -8px;  
  left: -8px;  
  width: 20px;  
  height: 20px;  
  background-color: transparent;  
  border: 1px solid var(--fractal-accent);  
  opacity: 0;  
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);  
  transition: all 0.5s ease;  
}  

.group-btn:hover::before, .group-btn:hover::after {  
  opacity: 0.5;  
  transform: rotate(45deg);  
}  

/* スクロールインジケーター - 色と透明度の両方が変化 */  
.scroll-indicator {  
  display: none; /* デフォルトは非表示 */  
  position: fixed;  
  bottom: 30px;  
  left: 0;  
  right: 0;  
  z-index: 99;  
  text-align: center;  
  pointer-events: none;  
  flex-direction: column;  
  align-items: center;  
  animation: fadeInUp 1.5s forwards;  
  opacity: 1; /* 初期状態は完全表示 */  
  transition: all 0.5s ease; /* スムーズな変化 */  
}  

/* 基本スタイル */  
.scroll-line {  
  width: 2px;  
  height: 40px;  
  margin-bottom: 8px;  
  position: relative;  
  /* 色はJSで変更 */  
  background: linear-gradient(to bottom, var(--peaky-gold), transparent);  
  transition: all 0.4s ease;  
}  

.scroll-line::after {  
  content: '';  
  position: absolute;  
  bottom: 15px;  
  left: -3px;  
  width: 7px;  
  height: 7px;  
  /* 色はJSで変更 */  
  border-right: 1px solid var(--peaky-gold);  
  border-bottom: 1px solid var(--peaky-gold);  
  transform: rotate(45deg);  
  animation: scrollArrow 1.5s infinite;  
  transition: all 0.4s ease;  
}  

.scroll-text {  
  font-family: var(--peaky-font);  
  font-size: 13px;  
  /* 色はJSで変更 */  
  color: var(--peaky-gold);  
  letter-spacing: 1.5px;  
  text-transform: uppercase;  
  opacity: 0.8;  
  transition: all 0.4s ease;  
}  

/* スクロールアニメーション */  
@keyframes scrollArrow {  
  0%, 100% {  
    transform: translateY(0) rotate(45deg);  
    opacity: 0.6;  
  }  
  50% {  
    transform: translateY(8px) rotate(45deg);  
    opacity: 1;  
  }  
}  

@keyframes fadeInUp {  
  from {  
    opacity: 0;  
    transform: translateY(20px);  
  }  
  to {  
    opacity: 1;  
    transform: translateY(0);  
  }  
}  

/* モバイル端末でのみスクロールインジケーターを表示 */  
@media (max-width: 768px) {  
  .scroll-indicator {  
    display: flex;  
  }  
}  

/* 色の変化と透明度のクラス */  
.scroll-indicator.stage-1 {  
  opacity: 1;  
  /* ゴールド：初期色 */  
}  

.scroll-indicator.stage-2 {  
  opacity: 0.9;  
  /* 明るいゴールド */  
}  

.scroll-indicator.stage-2 .scroll-line {  
  background: linear-gradient(to bottom, #d4be92, transparent);  
}  

.scroll-indicator.stage-2 .scroll-line::after {  
  border-right-color: #d4be92;  
  border-bottom-color: #d4be92;  
}  

.scroll-indicator.stage-2 .scroll-text {  
  color: #d4be92;  
}  

.scroll-indicator.stage-3 {  
  opacity: 0.85;  
  /* さらに薄く */  
}  

.scroll-indicator.stage-3 .scroll-line {  
  background: linear-gradient(to bottom, #e0d3b3, transparent);  
}  

.scroll-indicator.stage-3 .scroll-line::after {  
  border-right-color: #e0d3b3;  
  border-bottom-color: #e0d3b3;  
}  

.scroll-indicator.stage-3 .scroll-text {  
  color: #e0d3b3;  
}  

.scroll-indicator.stage-4 {  
  opacity: 0.8;  
  /* 淡い金色 */  
}  

.scroll-indicator.stage-4 .scroll-line {  
  background: linear-gradient(to bottom, #ece1ca, transparent);  
}  

.scroll-indicator.stage-4 .scroll-line::after {  
  border-right-color: #ece1ca;  
  border-bottom-color: #ece1ca;  
}  

.scroll-indicator.stage-4 .scroll-text {  
  color: #ece1ca;  
}  

.scroll-indicator.stage-5 {  
  opacity: 0.7;  
  /* クリーム色 */  
}  

.scroll-indicator.stage-5 .scroll-line {  
  background: linear-gradient(to bottom, #f2ead8, transparent);  
}  

.scroll-indicator.stage-5 .scroll-line::after {  
  border-right-color: #f2ead8;  
  border-bottom-color: #f2ead8;  
}  

.scroll-indicator.stage-5 .scroll-text {  
  color: #f2ead8;  
}  

.scroll-indicator.stage-6 {  
  opacity: 0.6;  
  /* かなり薄い */  
}  

.scroll-indicator.stage-6 .scroll-line {  
  background: linear-gradient(to bottom, #f7f3e8, transparent);  
}  

.scroll-indicator.stage-6 .scroll-line::after {  
  border-right-color: #f7f3e8;  
  border-bottom-color: #f7f3e8;  
}  

.scroll-indicator.stage-6 .scroll-text {  
  color: #f7f3e8;  
}  

.scroll-indicator.stage-7 {  
  opacity: 0.4;  
  /* ほとんど白に近い */  
}  

.scroll-indicator.stage-7 .scroll-line {  
  background: linear-gradient(to bottom, #faf8f0, transparent);  
}  

.scroll-indicator.stage-7 .scroll-line::after {  
  border-right-color: #faf8f0;  
  border-bottom-color: #faf8f0;  
}  

.scroll-indicator.stage-7 .scroll-text {  
  color: #faf8f0;  
}  

.scroll-indicator.stage-8 {  
  opacity: 0.2;  
  /* 白に近い */  
}  

.scroll-indicator.stage-8 .scroll-line {  
  background: linear-gradient(to bottom, #fffdfa, transparent);  
}  

.scroll-indicator.stage-8 .scroll-line::after {  
  border-right-color: #fffdfa;  
  border-bottom-color: #fffdfa;  
}  

.scroll-indicator.stage-8 .scroll-text {  
  color: #fffdfa;  
}  

.scroll-indicator.stage-9 {  
  opacity: 0.1;  
  /* ほぼ透明 */  
}  

.scroll-indicator.stage-9 .scroll-line {  
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), transparent);  
}  

.scroll-indicator.stage-9 .scroll-line::after {  
  border-right-color: rgba(255, 255, 255, 0.8);  
  border-bottom-color: rgba(255, 255, 255, 0.8);  
}  

.scroll-indicator.stage-9 .scroll-text {  
  color: rgba(255, 255, 255, 0.8);  
}  

.scroll-indicator.stage-10 {  
  opacity: 0;  
  /* 完全に透明 */  
}  
/* 改良されたトップボタン */  
.top-button {  
  position: fixed;  
  right: 20px;  
  bottom: -70px;  
  width: 46px;  
  height: 46px;  
  border-radius: 50%;  
  background: var(--bg-light);  
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  text-decoration: none;  
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);  
  opacity: 0;  
  z-index: 100;  
  transform: scale(0.8);  
  cursor: pointer;  
}  

/* 表示状態のクラス */  
.top-button.visible {  
  bottom: 20px;  
  opacity: 1;  
  transform: scale(1);  
}  

/* ボタン内部コンテンツ */  
.top-button-inner {  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  justify-content: center;  
  gap: 2px;  
  transition: transform 0.2s ease;  
}  

/* アイコン */  
.top-button i {  
  font-size: 1rem;  
  color: var(--math-accent);  
  transition: transform 0.2s ease;  
}  

/* テキスト */  
.top-button .top-text {  
  font-size: 0.65rem;  
  font-weight: 500;  
  color: var(--math-accent);  
}  

/* プログレスサークル */  
.progress-circle {  
  position: absolute;  
  top: 0;  
  left: 0;  
  transform: rotate(-90deg);  
}  

.progress-circle-path {  
  fill: none;  
  stroke: var(--math-accent);  
  stroke-width: 2px;  
  stroke-linecap: round;  
  stroke-dasharray: 126; /* 2πr の値 */  
  stroke-dashoffset: 126; /* 初期状態では非表示 */  
  transition: stroke-dashoffset 0.3s ease;  
}  

/* クリック状態 */  
.top-button.clicked .top-button-inner {  
  transform: translateY(-3px);  
}  

.top-button.clicked i {  
  transform: translateY(-2px);  
}  

/* ホバー効果 */  
.top-button:hover {  
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);  
}  

.top-button:hover .top-button-inner {  
  transform: translateY(-2px);  
}  

/* アクティブ効果 */  
.top-button:active .top-button-inner {  
  transform: translateY(0);  
  transition: transform 0.1s ease;  
}  

/* モバイル端末の対応 */  
@media (max-width: 768px) {  
  .top-button {  
    right: 15px;  
    width: 42px;  
    height: 42px;  
  }  
  
  .top-button.visible {  
    bottom: 65px; /* スクロールインジケーターとの重なり防止 */  
  }  
  
  .progress-circle {  
    width: 42px;  
    height: 42px;  
  }  
  
  .progress-circle-path {  
    cx: 21;  
    cy: 21;  
    r: 18;  
    stroke-dasharray: 113;  
    stroke-dashoffset: 113;  
  }  
  
  .top-button i {  
    font-size: 0.9rem;  
  }  
  
  .top-button .top-text {  
    font-size: 0.6rem;  
  }  
}  

/* ボタンコンテナの整理 - ラップしやすくする */  
.math-beauty-buttons {  
  max-width: 800px;  
  margin: 20px auto;  
}  

/* 金融ボタン特有のスタイル */  
.finance-btn {  
  border-bottom: 2px solid var(--finance-primary);  
}  

.finance-btn .btn-text {  
  color: var(--finance-secondary);  
}  

.finance-btn i {  
  color: var(--finance-primary);  
}  

.finance-pattern {  
  position: absolute;  
  width: 100%;  
  height: 100%;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  opacity: 0.5;  
  transition: var(--math-transition);  
}  

.chart-pattern {  
  position: relative;  
  width: 70%;  
  height: 60%;  
  display: flex;  
  align-items: flex-end;  
  justify-content: space-between;  
}  

.bar {  
  position: relative;  
  width: 15%;  
  background-color: var(--finance-primary);  
  transition: height 0.5s ease, opacity 0.5s ease;  
}  

.bar.b1 {  
  height: 40%;  
}  

.bar.b2 {  
  height: 60%;  
}  

.bar.b3 {  
  height: 30%;  
}  

.bar.b4 {  
  height: 70%;  
}  

.trend-line {  
  position: absolute;  
  top: 30%;  
  left: 0;  
  width: 100%;  
  height: 2px;  
  background-color: var(--finance-accent);  
  transform: rotate(-5deg);  
  transform-origin: left center;  
  transition: transform 0.5s ease;  
}  

/* 金融ボタンのホバーエフェクト */  
.finance-btn:hover .chart-pattern {  
  opacity: 0.8;  
}  

.finance-btn:hover .bar.b1 {  
  height: 60%;  
}  

.finance-btn:hover .bar.b2 {  
  height: 80%;  
}  

.finance-btn:hover .bar.b3 {  
  height: 50%;  
}  

.finance-btn:hover .bar.b4 {  
  height: 90%;  
}  

.finance-btn:hover .trend-line {  
  transform: rotate(5deg);  
}  

/* 金融ボタンの雪片エフェクト */  
.finance-btn::before {  
  content: '';  
  position: absolute;  
  top: -8px;  
  right: -8px;  
  width: 20px;  
  height: 20px;  
  background-color: transparent;  
  border: 1px solid var(--finance-accent);  
  opacity: 0;  
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);  
  transition: all 0.5s ease;  
}  

.finance-btn:hover::before {  
  opacity: 0.5;  
  transform: rotate(45deg);  
}  

/* 代码ボタン特有のスタイル */  
.code-btn {  
  border-bottom: 2px solid var(--code-primary);  
}  

.code-btn .btn-text {  
  color: var(--code-secondary);  
}  

.code-btn i {  
  color: var(--code-primary);  
}  

.code-pattern {  
  position: absolute;  
  width: 100%;  
  height: 100%;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  opacity: 0.5;  
  transition: var(--math-transition);  
}  

.binary-grid {  
  position: relative;  
  width: 70%;  
  height: 70%;  
  display: grid;  
  grid-template-columns: repeat(3, 1fr);  
  grid-template-rows: repeat(2, 1fr);  
  gap: 3px;  
}  

.bit {  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  font-family: "Courier New", monospace;  
  font-size: 0.7rem;  
  color: var(--code-primary);  
  background-color: rgba(2, 136, 209, 0.05);  
  border: 1px solid rgba(2, 136, 209, 0.1);  
  border-radius: 2px;  
  transition: transform 0.3s ease, background-color 0.3s ease;  
}  

/* 代码ボタンのホバーエフェクト */  
.code-btn:hover .binary-grid {  
  opacity: 0.9;  
}  

.code-btn:hover .bit.b1 {  
  transform: scale(1.1);  
  background-color: rgba(2, 136, 209, 0.1);  
}  

.code-btn:hover .bit.b2 {  
  transform: scale(1.1);  
  background-color: rgba(2, 136, 209, 0.1);  
  transition-delay: 0.05s;  
}  

.code-btn:hover .bit.b3 {  
  transform: scale(1.1);  
  background-color: rgba(2, 136, 209, 0.1);  
  transition-delay: 0.1s;  
}  

.code-btn:hover .bit.b4 {  
  transform: scale(1.1);  
  background-color: rgba(2, 136, 209, 0.1);  
  transition-delay: 0.15s;  
}  

.code-btn:hover .bit.b5 {  
  transform: scale(1.1);  
  background-color: rgba(2, 136, 209, 0.1);  
  transition-delay: 0.2s;  
}  

.code-btn:hover .bit.b6 {  
  transform: scale(1.1);  
  background-color: rgba(2, 136, 209, 0.1);  
  transition-delay: 0.25s;  
}  

/* 代码ボタンの特殊エフェクト */  
.code-btn::after {  
  content: '';  
  position: absolute;  
  bottom: -8px;  
  right: -8px;  
  width: 20px;  
  height: 2px;  
  background-color: var(--code-accent);  
  opacity: 0;  
  transform: rotate(45deg);  
  transition: all 0.5s ease;  
}  

.code-btn:hover::after {  
  opacity: 0.6;  
  width: 30px;  
}  

/* 电子书ボタン特有のスタイル */  
.ebook-btn {  
  border-bottom: 2px solid var(--ebook-primary);  
}  

.ebook-btn .btn-text {  
  color: var(--ebook-secondary);  
}  

.ebook-btn i {  
  color: var(--ebook-primary);  
}  

.ebook-pattern {  
  position: absolute;  
  width: 100%;  
  height: 100%;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  opacity: 0.5;  
  transition: var(--math-transition);  
}  

.book-shape {  
  position: relative;  
  width: 60%;  
  height: 70%;  
  perspective: 100px;  
}  

.page {  
  position: absolute;  
  top: 5%;  
  left: 50%;  
  width: 40%;  
  height: 90%;  
  background-color: #fff;  
  border: 1px solid rgba(216, 27, 96, 0.2);  
  transform-origin: left center;  
  transition: transform 0.5s ease, box-shadow 0.5s ease;  
}  

.page.p1 {  
  transform: translateX(-50%) rotateY(0deg);  
  background-color: rgba(216, 27, 96, 0.05);  
  z-index: 3;  
}  

.page.p2 {  
  transform: translateX(-50%) rotateY(5deg);  
  background-color: rgba(216, 27, 96, 0.03);  
  z-index: 2;  
}  

.page.p3 {  
  transform: translateX(-50%) rotateY(10deg);  
  background-color: rgba(216, 27, 96, 0.01);  
  z-index: 1;  
}  

/* 电子书ボタンのホバーエフェクト */  
.ebook-btn:hover .book-shape {  
  opacity: 0.9;  
}  

.ebook-btn:hover .page.p1 {  
  transform: translateX(-50%) rotateY(-20deg);  
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);  
}  

.ebook-btn:hover .page.p2 {  
  transform: translateX(-50%) rotateY(-10deg);  
  box-shadow: 1px 0 3px rgba(0, 0, 0, 0.05);  
  transition-delay: 0.05s;  
}  

.ebook-btn:hover .page.p3 {  
  transform: translateX(-50%) rotateY(0deg);  
  transition-delay: 0.1s;  
}  

/* 电子书ボタンの特殊エフェクト */  
.ebook-btn::before {  
  content: '';  
  position: absolute;  
  top: -5px;  
  left: -5px;  
  width: 10px;  
  height: 10px;  
  border-radius: 50%;  
  background-color: var(--ebook-accent);  
  opacity: 0;  
  transition: all 0.5s ease;  
}  

.ebook-btn:hover::before {  
  opacity: 0.5;  
  transform: scale(1.2);  
}  

/* レスポンシブデザイン調整 */  
@media (max-width: 768px) {  
  .math-beauty-buttons {  
    gap: 15px;  
  }  
  
  .math-beauty-btn {  
    width: 160px;  
  }  
}  

@media (max-width: 480px) {  
  .math-beauty-buttons {  
    gap: 10px;  
  }  
  
  .math-beauty-btn {  
    width: 140px;  
    height: 40px;  
    font-size: 0.85rem;  
  }  
}