/*
Theme Name: KurulaLa Theme
Theme URI: https://kurulalaproject.com
Author: Kurupi
Author URI: https://kurulalaproject.com
Description: KuruLaLa Project のオリジナルテーマ（病みかわ×パステルホラー）
Version: 1.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kurulala
Tags: custom, responsive, music, pastel-horror
*/

/* =====================
   Base
===================== */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  background-image: url("images/123.png"); /* テーマ内のimagesフォルダ */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 0.5s ease-in-out; /* ふわっと切り替え */
}
body.noise-bg {
  background: url("images/556.jpg") no-repeat center/cover;
transition: background-image 0.5s ease-in-out; /* ふわっと切り替え */
}

body.kurupi-bg {
  background: url("images/444.jpg") no-repeat center/cover;
transition: background-image 0.5s ease-in-out; /* ふわっと切り替え */
}

section,
.profile-container,
.video-section,
.music-section {
  scroll-margin-top: 100px;
}

/* =====================
   Header
===================== */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.8); /* 半透明ホワイト */
  backdrop-filter: blur(12px); /* ガラス風ぼかし */
  display: flex;
  justify-content: center; /* 中央寄せ */
  align-items: center;
  padding: 10px 0;
  z-index: 200;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ヘッダー内コンテンツ全体 */
header .inner {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  justify-content: space-between; /* ロゴ左・ナビ右 */
  align-items: center;
}

/* ロゴ */
header .logo {
  font-size: 2em;
  font-weight: bold;
  background: linear-gradient(90deg, #ff9de2, #7da6ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}

/* ナビゲーション */
header nav {
  display: flex;
  align-items: center;
}

header nav a {
  margin: 0 20px;
  text-decoration: none;
  color: #000;
  font-weight: bold;
  transition: color 0.3s ease;
}

header nav a:hover {
  color: #ff91e6; /* ホバー時のふんわりピンク */
}

/* =====================
   Body余白調整（崩れ防止）
===================== */
body {
  padding-top: 70px; /* 固定ヘッダーの高さ分 */
}

/* =====================
   Headings
===================== */
h1 {
  font-size: 2.8em;
  background: linear-gradient(180deg, #fff, #ff008c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
h2, h3 {
  font-weight: bold;
  color: #7e0269;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
  margin-bottom: 20px;
}

/* =====================
   Profile
===================== */
.profile-container {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 50px; margin-top: 30px;
  background: #fbefff;
}
.profile-box {
  background: #ead3e6;
  border-radius: 30px;
  width: 340px; padding: 30px;
  text-align: center;
  box-shadow: 0 5px 30px rgba(87,11,87,0.4);
  transition: transform 0.3s;
}
.profile-box:hover { transform: scale(1.05); }
.profile-img {
  width: 280px; height: 280px;
  border-radius: 50%; object-fit: cover;
  margin-bottom: 15px;
}
.profile-box h3 {
  font-size: 1.8em;
  color: #f203ff;
  text-shadow: 0 0 15px #fff;
}
.profile-box p { font-size: 1em; line-height: 1.5; }

.link-container {
  margin-top: 15px; display: flex; gap: 15px; justify-content: center;
}
.btn-black {
  background: #ff01cc; color: #fff;
  padding: 12px 20px; border-radius: 30px;
  text-decoration: none; transition: 0.3s;
}
.btn-black:hover { background: #000; }

/* =====================
   Video Section
===================== */
.video-section {
  margin-top: 50px; padding: 80px 0;
  background: #111; color: #fff; text-align: center;
}
.video-section h2 {
  color: #ff80df;
  text-shadow: 0 0 8px #fff, 0 0 12px #ff00aa;
}
.video-slider {
  overflow: hidden; width: 100%; margin: 50px auto;
}
.slider-track {
  display: flex; gap: 30px;
  animation: scroll-left 60s linear infinite;
}
.video-slider iframe {
  width: 600px; height: 400px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  flex-shrink: 0;
}
@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-80%); }
}

/* =====================
   Stamp Section
===================== */
.stamp-section {
  text-align: center; padding: 80px 0; background: #f0fff0;
}
.stamp-container {
  display: flex; flex-direction: column; align-items: center; gap: 30px;
  color: #ff0000; font-size: 16px;
}
.stamp-img {
  width: 200px; border-radius: 15px;
  box-shadow: 0 10px 15px rgba(0,0,0,0.7);
}
.stamp-btn {
  background: #00c300; color: #fff;
  padding: 12px 30px; border-radius: 30px;
  font-size: 20px; font-weight: bold;
  text-decoration: none; transition: 0.3s;
}
.stamp-btn:hover { background: #00e000; transform: scale(1.05); }

/* =====================
   Music Section
===================== */
.music-section {
  text-align: center; padding: 80px 0; background: #fff0f5;
}
.music-links {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 30px; margin-top: 15px;
}
.music-btn {
  padding: 12px 25px; border-radius: 30px;
  font-weight: bold; font-size: 15px;
  text-decoration: none; color: #fff;
  transition: all 0.3s ease;
  box-shadow: 0 20px 20px rgba(233,153,244,0.3);
}
.music-btn.spotify { background: #1db954; }
.music-btn.apple { background: #fa233b; }
.music-btn.line { background: #00c300; }
.music-btn.youtube { background: #ff0000; }
.music-btn.amazon { background: #ff9900; }
.music-btn:hover { transform: scale(1.1); opacity: 0.9; }

/* =====================
   Effects
===================== */
.fade-in { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
.fade-in.active { opacity: 1; transform: translateY(0); }

body.glitch {
  filter: hue-rotate(90deg) contrast(200%) brightness(150%);
  transition: filter 0.2s;
}

/* =====================
   Responsive
===================== */


@media (max-width: 600px) {
  header { flex-direction: column; padding: 10px; }
  header nav { margin-top: 10px; }
  header nav a { font-size: 17px; padding: 5px 8px; }

  .profile-box { width: 90%; padding: 20px; }
  .profile-img { width: 200px; height: 200px; }

  
  .video-section h2 { font-size: 2em; margin-bottom: 15px; }

  .stamp-section .category-box h2 {
    font-size: 1.2em !important;
    margin: 10px 0 !important;
  }
}
.noise-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0; /* 初期は非表示 */
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: lighten; /* 白飛びしないように */
  transition: opacity 0.2s ease-in-out;
}
.noise-overlay {
  display: none !important;
}
body.glitch {
  filter: hue-rotate(90deg) contrast(200%) brightness(150%);
  transform: skewX(5deg);
  transition: all 0.2s;
}
/* =====================
   Profile Page 調整版
===================== */

/* 背景はbodyだけに設定 */
body {
  background: url("images/123.png") no-repeat center top / cover;
  background-attachment: fixed; /* スクロールしても固定 */
  background-size: cover;
}

/* page-profile は透明にして背景を重ねない */
.page-profile {
  background: none;
  min-height: 100vh;
  padding: 100px 20px 100px;
  display: flex;
  align-items: center; /* 縦中央寄せ */
  justify-content: center; /* 横中央寄せ */
  flex-direction: column;
}

/* 全体のラッパー */
.profile-wrapper {
  max-width: 900px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: center;
  justify-content: center;
}

/* 各カード（くるぴ・らら） */
.profile-card {
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 25px;
  padding: 60px 70px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  color: #4a3b31;
  line-height: 1.9;
  text-align: center; /* ← テキスト中央寄せ */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.profile-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
}
/* ★中央寄せポイント */
  text-align: center;            /* 横方向の中央寄せ */
  display: flex;                 
  flex-direction: column;        /* 縦方向に整列 */
  align-items: center;           /* コンテンツを中央に */
  justify-content: center;       /* 高さ方向の中央寄せ（高さが固定の場合） */
}
/* 見出し */
.profile-card h1,
.profile-card h2 {
  font-size: 2.4em;
  background: linear-gradient(90deg, #ff9de2, #7da6ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 25px;
  text-shadow: 0 0 8px rgba(255, 200, 255, 0.6);
}

/* 本文 */
.profile-card p {
  font-size: 1.05em;
  color: #333;
  margin-bottom: 1.2em;
  text-align: center; /* ← これで文章も中央揃え */
}

/* 戻るリンク */
.profile-wrapper .back {
  color: #7da6ff;
  font-weight: bold;
  text-decoration: none;
  margin-top: 20px;
  transition: color 0.3s ease, transform 0.3s ease;
}
.profile-wrapper .back:hover {
  color: #ff9de2;
  transform: translateY(-2px);
}

/* スマホ対応 */
@media (max-width: 768px) {
  .profile-card {
    padding: 30px 25px;
  }
  .profile-card h1,
  .profile-card h2 {
    font-size: 1.8em;
  }
  .profile-card p {
    font-size: 0.95em;
  }
}


#news {
  margin: 40px auto;
  max-width: 800px;
  color: #fff;
}

#news h2 {
  font-size: 22px;
  margin-bottom: 15px;
  border-bottom: 1px solid #444;
  padding-bottom: 5px;
}

.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.news-item {
  padding: 8px 0;
  border-bottom: 1px solid #333;
}

.news-date {
  margin-right: 10px;
  font-weight: bold;
  color: #aaa;
}

.news-item a {
  color: #fff;
  text-decoration: none;
}

.news-item a:hover {
  text-decoration: underline;
}
.news-section {
  background: #fff0f9; /* 薄いピンク背景 */
  padding: 40px 20px;
  margin: 50px auto;
  border-radius: 20px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
  max-width: 900px;
  text-align: center;
}

.news-section h2 {
  font-size: 2em;
  margin-bottom: 20px;
  color: #d400ff;
  text-shadow: 0 0 5px rgba(255, 200, 255, 0.8);
}

.news-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.news-item {
  margin: 10px 0;
  padding: 10px 15px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
  transition: transform 0.2s;
}

.news-item:hover {
  transform: scale(1.02);
}

.news-date {
  font-size: 0.9em;
  color: #666;
  margin-right: 10px;
}

.news-item a {
  font-weight: bold;
  color: #ff00aa;
  text-decoration: none;
}

.news-item a:hover {
  text-decoration: underline;
}

/* NEWS 個別ページ */
.news-single-section {
  max-width: 800px;
  margin: 60px auto;
  padding: 30px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.news-title {
  font-size: 2em;
  color: #7e0269;
  margin-bottom: 15px;
}

.news-meta {
  font-size: 0.9em;
  color: #666;
  margin-bottom: 20px;
}

.news-content {
  font-size: 1.1em;
  line-height: 1.8;
  color: #333;
}

.news-back {
  margin-top: 30px;
  text-align: right;
}

.news-back a {
  color: #ff00aa;
  font-weight: bold;
  text-decoration: none;
}

.news-back a:hover {
  text-decoration: underline;
}

.back-btn {
  display: inline-block;
  padding: 12px 24px;
  margin: 20px 0;
  background: linear-gradient(90deg, #ff9de2, #7da6ff);
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  border-radius: 30px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.back-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
}
/* スマホサイズ用（幅600px以下） */
@media (max-width: 600px) {
  header nav a {
    font-size: 12px;   /* ←ここで小さくする */
    margin: 0 8px;     /* 余白も調整すると綺麗 */
  }
}
/* =====================
   Responsive - Mobile
===================== */
@media (max-width: 600px) {
  .video-slider iframe {
    width: 90%; /* 画面幅に収まる */
    height: auto;
  }
  .slider-track {
    flex-wrap: wrap; /* スマホでは自動改行 */
    animation: none; /* 自動スクロールを止める */
    justify-content: center;
  }
}  /* ← ← ← ここで media を閉じる */

/* 動画サイズを画面幅に合わせる（共通） */
.video-slider iframe {
  width: 100%;
  height: auto;
}


/* =====================
   Responsive（スマホ用）
===================== */
@media (max-width: 600px) {
  .profile-content {
    padding: 25px;
  }

  .profile-content h2 {
    font-size: 1.8em;
  }

  .profile-content p {
    font-size: 0.95em;
  }
}