@charset "UTF-8";
/*
Theme Name: Cocoon Child
Theme URI: https://wp-cocoon.com/
Description: Cocoon専用の子テーマ
Author: わいひら
Author URI: https://nelog.jp/
Template: cocoon-master
Version: 1.1.3
*/

/************************************
** 1. 共通レイアウト
************************************/
.logo-text {
  display: none;
}

.page .entry-title {
  text-align: center;
}

body.page-id-●●● {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/rugira02.webp') no-repeat center center fixed;
  background-size: cover;
}

.page .date-tags {
  display: none;
}

/************************************
** 2. リンクエフェクト
************************************/
a {
  position: relative;
  color: #202124;
  text-decoration: underline;
  transition: all 0.3s ease;
}

a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

a:hover::after {
  opacity: 1;
}

a span, a p, a strong, a em {
  position: relative;
  z-index: 2;
}

/************************************
** 3. ローディング画面
************************************/
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 1s ease;
}

#loading-logo {
  width: 200px;
  opacity: 1;
  transition: opacity 1s ease;
}

.loaded #loading-screen {
  opacity: 0;
  pointer-events: none;
}

/************************************
** 4. キャラクター一覧（横スクロール）
************************************/
.character-wrapper {
  width: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

.character-carousel {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 20px;
  padding: 20px;
  margin: 0 auto;
  box-sizing: border-box;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-start;
  scrollbar-width: none;
  -ms-overflow-style: none;
  will-change: scroll-position;
}

.character-carousel::-webkit-scrollbar {
  display: none;
}

.character-item {
  flex: 0 0 auto;
  width: 120px;
  text-align: center;
  scroll-snap-align: center;
  position: relative;
}

.character-item a {
  display: block;
  width: 120px;
  height: 120px;
  position: relative;
  text-decoration: none !important;
  border-bottom: none !important;
}

.character-item img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid #fff;
  transition: all 0.3s ease;
  z-index: 1;
}

.character-item .hover-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 2;
}

.character-item:hover .hover-img {
  opacity: 1;
}

.character-item p {
  margin-top: 6px;
  color: #fff;
  font-size: 14px;
  font-family: 'Noto Sans JP', sans-serif;
}

/************************************
** 5. キャラクター紹介（共通）
************************************/
.character-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-family: 'Noto Serif JP', serif;
}

.character-section.rugira-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/rugira02-1.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.fuzisawa-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/02-2huzisawa.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  width: 100%;
  gap: 40px;
  position: relative;
}

.character-text {
  flex: 1;
  color: #fff;
  z-index: 2;
}

.character-text p {
  font-size: 36px;
  font-weight: normal;
  margin: 4px 0;
  font-family: 'Noto Serif JP', serif;
}

.character-name {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 0;
}

.char-quote {
  font-size: 13px;
  font-family: 'Noto Serif JP', serif;
  margin-bottom: 0;
}

/************************************
** 6. 立ち絵エリア
************************************/
.character-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  box-sizing: border-box;
  font-family: 'Noto Serif JP', serif;
}

/* 各キャラ背景 */
/* こちら彼岸花撲滅委員会 */
.character-section.kotirazeninhiganbana-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/zeninhaikei.webp') no-repeat center center fixed;
  background-size: cover;
}
.character-section.meika-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/01meikahaikei.webp') no-repeat center center fixed;
  background-size: cover;
}
.character-section.minaduki-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/02minadukitatie.webp') no-repeat center center fixed;
  background-size: cover;
}
.character-section.viola-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/03viora-2.webp') no-repeat center center fixed;
  background-size: cover;
}
/* 暗殺グループ */
.character-section.ansatugurupu-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/zentaihaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.rugira-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/rugira02-1.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.fuzisawa-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/02-2huzisawa.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.liam-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/03-2liam.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.hakase-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/04-2hakase.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.kannnaduki-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/05-2kannnaduki.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.sofia-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/06sofia.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.palsia-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/07palsia.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.takane-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/0takanehaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.azuno-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/08azunohaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.ran-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/09ranhaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.kasumi-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/10kasumihaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.yuduru-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/11yuduru-2.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.howaito-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/12howaitohaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.asuna-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/20asuna-1.jpg') no-repeat center center fixed;
  background-size: cover;
}

.character-section.gasumasukutaisa-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/27gasumasukutaisa-1.jpg') no-repeat center center fixed;
  background-size: cover;
}

.character-section.kuro-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/23kuro-1.jpg') no-repeat center center fixed;
  background-size: cover;
}

.character-section.balaena-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/13belaenahaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.kurai-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/26kurai-1.jpg') no-repeat center center fixed;
  background-size: cover;
}

.character-section.ruberutonaitomea-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/14ruberutohaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.kannagi-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/15kannagihaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.texino-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/24texino-1.jpg') no-repeat center center fixed;
  background-size: cover;
}

.character-section.satiko-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/16satikohaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.rai-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/0raihaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.kurage-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/21kurage-1.jpg') no-repeat center center fixed;
  background-size: cover;
}

.character-section.foresto-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/22huxoresuto.png') no-repeat center center fixed;
  background-size: cover;
}

/* 目玉の魔女 */
.character-section.medama-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/medamanomazyohaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.sinseihaduki-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/24texino-1.jpg') no-repeat center center fixed;
  background-size: cover;
}

/* 此岸の魔術師 */
.character-section.iva-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/21kurage-1.jpg') no-repeat center center fixed;
  background-size: cover;
}
.character-section.vadon-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/27gasumasukutaisa-1.jpg') no-repeat center center fixed;
  background-size: cover;
}
.character-section.charlotte-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/3sya-roxuttohaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

/* DEMOND教 */
.character-section.lily-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/0liliehaikei.webp') no-repeat center center fixed;
  background-size: cover;
}
.character-section.mui-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/natumeguhaikei.webp') no-repeat center center fixed;
  background-size: cover;
}
.character-section.mutunozaki-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/0mutunozakihaikei.webp') no-repeat center center fixed;
  background-size: cover;
}
.character-section.iduki-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/idukihaikei.webp') no-repeat center center fixed;
  background-size: cover;
}
/* 悲願の魔術師 */
.character-section.licokis-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/20asuna.jpg') no-repeat center center fixed;
  background-size: cover;
}

/* 咲来編暗殺グループ */
.character-section.hrugira-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/yousyoukirugirahaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.hfuzisawa-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/hfuzisawahaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.hkannaduki-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/hkannadukihaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.htakane-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/htakanehaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.hliam-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/hliamhaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.hazuno-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/hazunohaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.sriauxei-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/27gasumasukutaisa.jpg') no-repeat center center fixed;
  background-size: cover;
}

/* No.0編 */
.character-section.nrugira-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/0rugirahaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.nsofia-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/0sofiahaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.nfuzisawa-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/0fuzisawahaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.nliam-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/0liamhaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.nhakase-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/0hakasehaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.nkannagi-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/0kannagihaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.nno007-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/0no007.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.ntakane-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/0takanehaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.nyuduru-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/0yuduruhaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.nazuno-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/hazunohaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.nkannaduki-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/hkannadukihaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.nrai-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/0raihaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.nlily-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/0liliehaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.nmui-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/natumeguhaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.nmutunozaki-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/0mutunozakihaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.niduki-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/idukihaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.nsyaroxtuto-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/3sya-roxuttohaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

/* 崩壊都市編 */
.character-section.mminaduki-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/02minadukitatie.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.mmeika-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/01meikahaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.mviola-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/03viora-2.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.mtouma-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/toumahaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.mhakase-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/mhakasehaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.mfuzisawa-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/mfuzisawahaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.mkannaduki-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/05-2kannnaduki.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.msofia-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/msofiahaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.mhowai-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/12howaitohaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.mpalsia-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/mpalsiahaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.mberaena-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/13belaenahaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

.character-section.mrubelt-bg {
  background: url('https://genso-serenade.com/wp-content/uploads/2025/07/14ruberutohaikei.webp') no-repeat center center fixed;
  background-size: cover;
}

/* 共通の紹介レイアウト */
.character-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  width: 100%;
  gap: 40px;
  position: relative;
}

/* 共通テキストの基本サイズを18pxに */
.character-text p {
  font-size: 18px;
  font-weight: normal;
  margin: 4px 0;
  font-family: 'Noto Serif JP', serif;
}

/* 台詞専用 */
.char-quote {
  font-size: 20px;
  margin-bottom: 8px;
  font-family: 'Noto Serif JP', serif;
}

/* 名前専用 */
.character-name {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #fff;
}

.char-quote {
  font-size: 13px;
  font-family: 'Noto Serif JP', serif;
  margin-bottom: 0px;
}
.character-text p,
.character-name,
.char-quote {
  color: #fff;
  text-shadow:
     2px  2px 4px rgba(0, 0, 0, 0.6);
}

/************************************
** 6. 立ち絵エリア
************************************/
.character-image {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  transform: translateX(100px);
  animation: fadeInRight 1.2s ease forwards;
}

.character-image img {
  max-height: 90vh;
  height: auto;
  width: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* 特殊サイズ調整 */
.character-image.scale-80 img {
  transform: scale(1.0);
}

.character-image.scale-90 img {
  transform:scale(1.1);
}

.character-image.scale-100 img {
  transform: translateY(15px)scale(1.0);
}

.character-image.scale-110 img {
  transform: translateY(15px)scale(1.5);
}

.character-image.scale-120 img {
  transform: scale(1.5);
  transform-origin: center center; /* 拡大の基準を中心にする */
  margin-left: -25%; /* 必要に応じて位置を調整 */
}
/************************************
** 7. アニメーション
************************************/
@keyframes fadeInRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.glitch {
  background: #000 no-repeat center;
  background-size: 0; // `.glitch` 自体には背景画像を表示しないようにする
  height: 100vh; // width や height は自由
  overflow: hidden;
  position: relative;
}

/************************************
** 8. レスポンシブ対応
************************************/
@media screen and (max-width: 768px) {
  .character-content {
    position: relative;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .character-text {
    position: absolute;
    left: 5%;
    bottom: 5%;
    text-align: left;
    font-size: 12px;
    padding: 10px;
    width: 100%;
  }

  .character-text p,
  .character-text li,
  .char-quote,
  .character-name {
    font-size: 14px; /* お好みのサイズに調整 */
    line-height: 1.4;
  }

.character-image {
justify-content: center !important;
}

  .character-image img {
    max-width: 180% !important;
    transform: translateX(200px) !important;
  }

  .character-item {
    width: 80px;
  }

  .character-item a,
  .character-item img,
  .character-item .hover-img {
    width: 80px;
    height: 80px;
  }

  .character-item p {
    font-size: 11px;
  }
	
  .character-image.scale-100 img {
    transform: translateY(-90px) scale(1.0);
  }
}


  .mobile-menu-visible {
    display: block;
    text-align: center;
    margin-top: 10px;
  }

  .mobile-menu-visible ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .mobile-menu-visible li {
    flex: 0 0 40%;
    max-width: 45%;
  }

  .mobile-menu-visible li a {
    color: #c6a32d;
    text-decoration: none;
    font-size: 13px;
    display: block;
    padding: 5px 0;
  }
@media screen and (min-width: 769px) {
  .mobile-menu-visible {
    display: none !important;
  }
}
/************************************
** 9. PCヘッダー修正（中央寄せ・背景）
************************************/
/* ① ロゴ非表示 */
@media screen and (min-width: 769px) {
  .logo {
    display: none !important;
  }
}

/* ② メニュー中央寄せ＋③背景変更 */
@media screen and (min-width: 769px) {
  #navi {
    display: flex;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.6); /* 80%白 */
  }

  #navi ul {
    display: flex;
    justify-content: center;
    gap: 20px; /* メニュー項目間の余白調整 */
  }

  #navi ul li {
    float: none !important;
  }
}
.character-list-wrapper {
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  p.mobile-small-text {
    font-size: 13px !important;
  }
}
.character-display {
  text-align: center;
  margin-top: 30px;
}

.character-display h2 {
  font-size: 2rem;
  margin-bottom: 5px;
}

.character-display p {
  font-size: 1.2rem;
  color: #777;
  margin-bottom: 15px;
}

.main-character-image {
  width: 240px;
  height: 240px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: 0.3s;
}

.character-selector {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

.character-grid {
  display: grid;
  grid-template-columns: repeat(3, 80px);
  gap: 15px;
}

.character-grid img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  cursor: pointer;
  border-radius: 0; /* 正方形 */
  transition: transform 0.2s ease;
  border: 2px solid transparent;
}

.character-grid img:hover {
  transform: scale(1.05);
  border-color: #999;
}

.character-grid img.active {
  border-color: #333;
}
/************************************
** 10. TOPの横スクロール選択
************************************/
.custom-carousel {
  position: relative;
  overflow: visible; /* ← 画像外側に矢印を出すために変更 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}

@media screen and (min-width: 769px) {
  .custom-carousel {
    max-width: 40%;  /* ← この数値を自由に変えてOK */
    margin: 0 auto;
  }

  .carousel-track {
    overflow-x: hidden !important; /* PC版だけスクロールバー非表示 */
  }

  .arrow-btn {
    display: block;
    font-size: 1.4rem;           /* ← 少し小さめ */
    padding: 0.3em 0.5em;        /* ← 小さめな見た目 */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.4);
    color: #fff;
    border: none;
    cursor: pointer;
    z-index: 10;
    user-select: none;
    border-radius: 0.3em;
  }

  .prev-btn {
    left: -2.2em;  /* ← 画像の外に配置（見栄え良く） */
  }

  .next-btn {
    right: -2.2em;
  }

  .arrow-btn:hover {
    background-color: rgba(0, 0, 0, 0.6);
  }
}

@media screen and (max-width: 768px) {
  .arrow-btn {
    display: none; /* スマホでは矢印非表示 */
  }
}

.carousel-track {
  display: flex;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  width: 100%;
}

.carousel-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  box-sizing: border-box;
}

.carousel-slide img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  border: none;
}

/* トップページだけに表示する背景（スマホ） */
.page-id-12::before {
  content: "";
  display: block;
  background-image: url("https://genso-serenade.com/wp-content/uploads/2025/07/無題-2024-10-05-00-45-50.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 600px; /* 好きな高さに調整 */
}

/* パソコンではPC画像に切り替え */
@media screen and (min-width: 769px) {
  .page-id-12::before {
    background-image: url("https://genso-serenade.com/wp-content/uploads/2025/07/02minadukitatie.webp");
    height: 700px; /* PC時の高さ */
  }
}
.page-id-123 {
  margin-top: 600px; /* ::before で指定した高さと同じに */
}
@media screen and (min-width: 769px) {
  .page-id-123 {
    margin-top: 700px;
  }
}

/* トップページだけに表示する背景（スマホ） */
.page-id-12::before {
  content: "";
  display: block;
  background-image: url("https://genso-serenade.com/wp-content/uploads/2025/07/無題-2024-10-05-00-45-50.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 600px; /* 好きな高さに調整 */
}

/* トップページだけに表示する背景（スマホ） */
.page-id-12::before {
  content: "";
  display: block;
  background-image: url("https://genso-serenade.com/wp-content/uploads/2025/07/無題-2024-10-05-00-45-50.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 550px; /* 好きな高さに調整 */
}

/* パソコンではPC画像に切り替え */
@media screen and (min-width: 769px) {
  .page-id-12::before {
    background-image: url("https://genso-serenade.com/wp-content/uploads/2025/07/02minadukitatie.webp");
    height: 800px; /* PC時の高さ */
  }
}
.page-id-123 {
  margin-top: 550px; /* ::before で指定した高さと同じに */
}
@media screen and (min-width: 769px) {
  .page-id-123 {
    margin-top: 800px;
  }
}

/* フッター下部全体を中央揃え */
.footer-bottom {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ロゴを中央揃えに */
.footer-bottom-logo {
  margin: 0 auto;
  float: none;
  text-align: center;
}

/* メニューを中央揃えに（PCでも） */
.footer-bottom-menu {
  display: inline-block;
  float: none;
  text-align: center;
  margin: 0 auto;
}

/* コピーライトを中央揃えに */
.footer-bottom-content {
  text-align: center;
  float: none;
  margin: 0 auto;
}
/* フッターロゴのホバー時に画像全体をほんのり白くする */
.footer-bottom-logo a img {
  transition: filter 0.3s ease;
}

.footer-bottom-logo a:hover img {
  filter: brightness(1.15); /* 画像全体をほんのり明るく */
}
body.page-id-1202 .character-slider,
body.page-id-1522 .character-slider,
body.page-id-1133 .character-slider{
  display: flex;
  gap: 1px; /* お好みで調整 */
  overflow-x: auto; /* 横スクロール可能にする */
  padding: 10px 0;
  scrollbar-width: none; /* Firefox: スクロールバー非表示 */
}

body.page-id-1202 .character-slider::-webkit-scrollbar,
body.page-id-1522 .character-slider::-webkit-scrollbar,
body.page-id-1133 .character-slider::-webkit-scrollbar{
  display: none; /* Chrome/Safari: スクロールバー非表示 */
}

body.page-id-1202 .character-item, 
body.page-id-1522 .character-item, 
body.page-id-1133 .character-item{
  flex: 0 0 auto; /* 要素の幅を自動にして横並び */
  text-align: center;
  cursor: pointer;
}

body.page-id-1202.character-item img, 
body.page-id-1522.character-item img, 
body.page-id-1133.character-item img{
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

body.page-id-1202.character-item:hover img, 
body.page-id-1522.character-item:hover img, 
body.page-id-1133.character-item:hover img {
  transform: scale(1.05);
}
/* 立ち絵が背景からはみ出すのを防ぐ */
body.page-id-1202 .character-section, 
body.page-id-1522 .character-section, 
body.page-id-1133 .character-section {
  position: relative;
  overflow: hidden;
}
@media screen and (min-width: 769px) {
body.page-id-1202.character-text,
body.page-id-1522.character-text,
body.page-id-1133.character-text{
    padding-left: 60px;     /* 左から内側へ寄せる */
    max-width: 600px;       /* 横幅を制限（任意） */
    box-sizing: border-box; /* パディングを含めて調整 */
  }
}

 body.page-id-1202.character-text p,
 body.page-id-1522.character-text p,
body.page-id-1133.character-text p,
.character-name,
.char-quote {
  color: #fff;
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
     2px  2px 4px rgba(0, 0, 0, 0.6);
}


@media screen and (max-width: 768px) {
  /* すべての段落テキストを小さく */
  .wp-block-paragraph,
  .wp-block-group p,
  .entry-content p {
    font-size: 14px;
    line-height: 1.4;
    word-break: keep-all;
  }
}
@media screen and (max-width: 768px) {
body.page-id-1202.wp-block-paragraph, 
body.page-id-1522.wp-block-paragraph, 
body.page-id-1133.wp-block-paragraph, {
    font-size: 13px;
  }
}
@media screen and (max-width: 768px) {
  body.page-id-1202 .character-image,
  body.page-id-1522 .character-image,
  body.page-id-1133 .character-image {
    justify-content: center !important;
  }

  body.page-id-1202.character-image img,
  body.page-id-1522.character-image img,
  body.page-id-1133.character-image img {
    max-width: 140% !important;
    transform: translateX(20px) !important;
  }
}
.character-text p {
  line-break: anywhere;
  word-break: break-word;
}
.character-text p {
  line-break: loose;
  word-break: keep-all;
}
.text-fix {
  line-break: anywhere;          /* 行のどこでも折り返せる */
  word-break: break-word;        /* 英語の長文にも効果あり */
  white-space: normal;           /* 自然な改行 */
}
.text-fix {
  line-break: loose;             /* 日本語の禁則をゆるめる */
  word-break: keep-all;          /* 単語の途中で折り返さない */
}