/* ============================================================
      カラー変数
    ============================================================ */
    :root {
      --color-bg:        #F8F3EA; /* ← 背景色。明るいベージュ。例: #FFF8F0 に変えると少し白寄りに */
      --color-text:      #4B4035; /* ← 本文の文字色。目に優しいチャコールブラウン */
      --color-title:     #EACD70; /* ← タイトル「まほろば！」の文字色。淡い黄色 */
      --color-accent:    #C78B44; /* ← アクセントカラー。ボタン・装飾・見出し線など */
      --color-link:      #8A623A; /* ← リンクの色 */
      --color-glass-bg:  rgba(255, 251, 244, 0.93); /* ← セクションの半透明背景色。0.93 = 少し透ける（和紙風すりガラス） */
      --color-glass-border: rgba(199, 139, 68, 0.18); /* ← セクションの枠線色 */
      --color-summary-bg: rgba(199, 139, 68, 0.08); /* ← アコーディオン見出しの背景 */
      --section-gap: 300px; /* ← セクション間の隙間。大きくすると背景画像がよく見えます。例: 60px / 120px / 200px */
    }
    
    /* ============================================================
      リセット & ベース
    ============================================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html {
      scroll-behavior: smooth; /* スムーズスクロール */
    }

    body {
      background-color: var(--color-bg);
      color: var(--color-text);
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 16px;
      line-height: 1.8;
      overflow-x: hidden;
    }

    a {
      color: var(--color-link);
      text-decoration: none;
      transition: opacity 0.2s;
    }
    a:hover { opacity: 0.7; }

    h1, h2, h3, h4, h5, h6 {
      font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
      font-weight: 700;
      line-height: 1.4;
    }

    img {
      max-width: 100%;
      height: auto;
      display: block;
    }

    /* ============================================================
      BOTエリア（将来: Webhook / Cloudflare Worker / Python 等を埋め込む）
      現在：上部右（PC時はヘッダー下のナビ付近、スマホ時は追従可能に設計）
      ここを別の場所に移動したい場合は、このdivごと切り取って貼り直すだけでOK
    ============================================================ */
    #bot-area {
      /* 現在は非表示。BOT実装時に display: block; に変更してください */
      display: none;
      position: fixed;
      top: 80px;      /* ← 上部配置にするため、固定ナビゲーション（56px）の下に設定 */
      right: 24px;
      z-index: 1000;
      width: 300px;
    }

    /* ============================================================
      固定ナビゲーション（シュリンクヘッダー対応）
    ============================================================ */
    #global-nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 900;
      /* 🌸 ほんのり桜がかった半透明すりガラス（撫子桜色）に変更 */
      background: rgba(255, 242, 244, 0.82); 
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      /* 🌸 下の細い枠線を、優しい桜色（30%の半透明）に変更 */
      border-bottom: 1px solid rgba(245, 150, 170, 0.3);
      transition: box-shadow 0.3s, padding 0.3s;
      padding: 0px 0;
    }
    #global-nav.scrolled {
      box-shadow: 0 2px 16px rgba(75, 64, 53, 0.15);
      /* 🌸 スクロール時は少しだけ不透明な桜色にして文字を読みやすくします */
      background: rgba(255, 242, 244, 0.93); 
    }

    .nav-inner {
      max-width: 100%;
      margin: 0 auto;
      padding: 0 20px;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: height 0.3s;
    }
    #global-nav.scrolled .nav-inner {
      height: 48px; /* スクロール時に少しヘッダーを縮小（シュリンク効果） */
    }

    .nav-logo {
      font-family: 'Zen Kaku Gothic New', sans-serif;
      font-size: 18px;
      font-weight: 700;
      color: var(--color-accent);
      letter-spacing: 0.1em;
      transition: font-size 0.3s;
    }
    #global-nav.scrolled .nav-logo {
      font-size: 16px; /* ロゴサイズもスクロール時に控えめに */
    }

    /* PCナビリンク */
    .nav-links {
      display: flex;
      gap: 28px;
      list-style: none;
    }
    .nav-links a {
      font-size: 13px;
      color: var(--color-text);
      letter-spacing: 0.05em;
      position: relative;
      padding-bottom: 2px;
    }
    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0;
      width: 0; height: 1.5px;
      background: var(--color-accent);
      transition: width 0.3s;
    }
    .nav-links a:hover::after { width: 100%; opacity: 1; }
    .nav-links a:hover { opacity: 1; }

    /* ハンバーガーメニュー（スマホ用） */
    .nav-hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 6px;
      background: none;
      border: none;
    }
    .nav-hamburger span {
      display: block;
      width: 24px; height: 2px;
      background: var(--color-text);
      border-radius: 2px;
      transition: all 0.3s;
    }
    .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-hamburger.open span:nth-child(2) { opacity: 0; }
    .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* スマホ用ドロワー */
    .nav-drawer {
      display: none;
      flex-direction: column;
      position: absolute;
      top: 56px; left: 0;
      width: 100%;
      background: rgba(248, 243, 234, 0.97);
      border-bottom: 1px solid var(--color-glass-border);
      padding: 12px 0;
    }
    .nav-drawer.open { display: flex; }
    .nav-drawer a {
      padding: 12px 28px;
      font-size: 15px;
      color: var(--color-text);
      border-bottom: 1px solid var(--color-glass-border);
    }
    .nav-drawer a:last-child { border-bottom: none; }

    /* ============================================================
      【重要】背景固定レイヤー（<body>直下に配置する独立固定コンテナ）
      スクロールしても背景画像が動かず、手前のコンテンツが浮き上がって滑る高級感。
    ============================================================ */
    #bg-layer {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      z-index: 0;               /* 最背面に配置 */
      pointer-events: none;     /* 背景画像をクリックできないようにする（操作妨害防止） */
      overflow: hidden;
    }

    /*
      ---- 背景画像（6〜7枚）の個別設定 ----
      各画像の角度・サイズ・位置を個別に調整。
    */
    .photo-frame {
      position: absolute;
      border-radius: 4px;
      overflow: hidden;
      box-shadow: 0 8px 32px rgba(75, 64, 53, 0.18), 0 2px 8px rgba(75, 64, 53, 0.1);
      background: #e8ddc8; /* 画像読み込み前の仮背景色 */
      opacity: 0.45;       /* すりガラスの下からほんのり見えるよう透過度を最適化 */
    }
    .photo-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* 👑 追加：高画質な画像に少し「ぼかし」をかけ、すりガラスの奥にいる質感を出す */
      filter: blur(1.5px); 
    }

    /* 浮遊アニメーション（呼吸するようにゆっくりゆらゆら動く） */
    @keyframes floatSlow1 {
      0%, 100% { transform: rotate(-8deg) translateY(0); }
      50%      { transform: rotate(-6deg) translateY(-8px); }
    }
    @keyframes floatSlow2 {
      0%, 100% { transform: rotate(6deg) translateY(0); }
      50%      { transform: rotate(8deg) translateY(6px); }
    }
    @keyframes floatSlow3 {
      0%, 100% { transform: rotate(-3deg) translateY(0); }
      50%      { transform: rotate(-4deg) translateY(-5px); }
    }
    @keyframes floatSlow4 {
      0%, 100% { transform: rotate(9deg) translateY(0); }
      50%      { transform: rotate(7deg) translateY(7px); }
    }

   
    /* 角度変更: floatSlow1内のrotate値（-8deg/-6deg）を変える */
/* 画像1 ← 左上 */
.photo-1 {
  width: 20%;
  aspect-ratio: 4/3;
  top: 14%;
  left: 3%;
  animation: floatSlow1 12s ease-in-out infinite;
}
/* 画像2 ← 左中エリア */
.photo-2 {
  width: 17%;
  aspect-ratio: 3/4;
  top: 44%;
  left: 5%;
  animation: floatSlow2 14s ease-in-out infinite;
}
/* 画像3 ← 中央上エリア */
.photo-3 {
  width: 19%;
  aspect-ratio: 4/3;
  top: 10%;
  left: 40%;
  animation: floatSlow3 16s ease-in-out infinite;
}
/* 画像4 ← 右上エリア */
.photo-4 {
  width: 20%;
  aspect-ratio: 4/3;
  top: 12%;
  right: 3%;
  animation: floatSlow4 13s ease-in-out infinite;
}
/* 画像5 ← 右中エリア */
.photo-5 {
  width: 17%;
  aspect-ratio: 3/4;
  top: 42%;
  right: 5%;
  animation: floatSlow1 15s ease-in-out infinite;
}
/* 画像6 ← 左下エリア */
.photo-6 {
  width: 18%;
  aspect-ratio: 4/3;
  bottom: 8%;
  left: 25%;
  animation: floatSlow2 15s ease-in-out infinite;
}
/* 画像7 ← 右下エリア */
.photo-7 {
  width: 17%;
  aspect-ratio: 4/3;
  bottom: 8%;
  right: 20%;
  animation: floatSlow3 13s ease-in-out infinite;
}

    /* ============================================================
      【追加演出】桜が舞い散る和幻想パーティクル（CSSのみで超軽量動作）
    ============================================================ */
    .sakura {
      position: absolute;
      background: linear-gradient(135deg, #fff5f7 0%, #ffcbd5 100%);
      border-radius: 100% 0% 100% 100%; /* 花びらの形 */
      pointer-events: none;
      z-index: 5;
      opacity: 0.6;
    }
    @keyframes fall {
      0% {
        top: -10%;
        transform: translateX(0) rotate(0deg);
      }
      100% {
        top: 110%;
        transform: translateX(150px) rotate(360deg);
      }
    }
    .sakura-1 { width: 20px; height: 16px; left: 15%; animation: fall 12s linear infinite; }
    .sakura-2 { width: 24px; height: 20px; left: 45%; animation: fall 16s linear infinite; animation-delay: -5s; }
    .sakura-3 { width: 16px; height: 12px; left: 75%; animation: fall 14s linear infinite; animation-delay: -2s; }
    .sakura-4 { width: 28px; height: 22px; left: 90%; animation: fall 18s linear infinite; animation-delay: -8s; }

    /* ============================================================
      ヒーローエリア（全画面、コンテンツ固定）
    ============================================================ */
    #hero {
      position: relative;
      min-height: 100svh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      padding-top: 56px;
      z-index: 2; /* 背景レイヤーの上に重ねる */
    }

    /* ヒーロー中央コンテンツ */
    .hero-content {
      position: relative;
      z-index: 10;
      text-align: center;
      padding: 40px 24px;
    }

    .hero-subtitle {
      font-size: 13px;
      letter-spacing: 0.3em;
      color: var(--color-accent);
      margin-bottom: 20px;
      opacity: 0;
      animation: fadeUp 0.8s ease forwards;
      animation-delay: 0.2s;
    }

    /* 
      🔴 【修正①】「まほろば！」タイトル（CSSの統合・アニメーション整理）
      1箇所の定義に集約し、競合を完全に排除。
    */
    .hero-title {
      font-family: 'Zen Kaku Gothic New', sans-serif;
      font-size: clamp(52px, 12vw, 96px); /* 画面幅に応じて最適に可変 */
      letter-spacing: 0.18em;
      color: var(--color-title);
      text-shadow:
        0 0 4px rgba(234, 205, 112, 0.2),
        0 2px 8px rgba(75, 64, 53, 0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.05em;
      margin-bottom: 24px;
      /* titleGlow（1.9秒）実行完了後、2.5秒後に自然にglowBlink（灯篭の無限明滅）へ遷移 */
      animation: titleGlow 1.9s ease forwards, glowBlink 4s ease-in-out infinite 2.5s;
    }

    /* 各文字を個別にアニメーション（「ま」から順番に0.15秒ずつ遅延） */
    .hero-title .char {
      display: inline-block;
      opacity: 0;
      transform: translateY(12px) scale(0.92);
      animation: charAppear 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    .hero-title .char:nth-child(1) { animation-delay: 0.6s; }
    .hero-title .char:nth-child(2) { animation-delay: 0.75s; }
    .hero-title .char:nth-child(3) { animation-delay: 0.9s; }
    .hero-title .char:nth-child(4) { animation-delay: 1.05s; }
    .hero-title .char:nth-child(5) { animation-delay: 1.2s; }

    .hero-tagline {
      font-size: clamp(13px, 2vw, 16px);
      letter-spacing: 0.15em;
      color: var(--color-text);
      opacity: 0;
      animation: fadeUp 0.8s ease forwards;
      animation-delay: 2.2s;
      margin-bottom: 36px;
    }

    .hero-btn {
      display: inline-block;
      padding: 14px 40px;
      border: 1.5px solid var(--color-accent);
      border-radius: 2px;
      color: var(--color-accent);
      font-family: 'Zen Kaku Gothic New', sans-serif;
      font-size: 14px;
      letter-spacing: 0.2em;
      opacity: 0;
      animation: fadeUp 0.8s ease forwards;
      animation-delay: 2.5s;
      transition: background 0.3s, color 0.3s;
    }
    .hero-btn:hover {
      background: var(--color-accent);
      color: #fff;
      opacity: 1;
    }

    /* スクロールダウン矢印 */
    .scroll-down {
      position: absolute;
      bottom: 28px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      opacity: 0;
      animation: fadeIn 1s ease forwards;
      animation-delay: 3s;
    }
    .scroll-down span {
      font-size: 10px;
      letter-spacing: 0.2em;
      color: var(--color-accent);
    }
    /* 🟡 【修正④】scroll-down::after とキーフレームのブラウザ標準対応 */
    .scroll-down::after {
      content: '';
      display: block;
      width: 1px;
      height: 40px;
      background: linear-gradient(to bottom, var(--color-accent), transparent);
      animation: scrollLine 1.5s ease infinite;
      transform-origin: top; /* ← transform-origin を動的に切り替えず、ここで「top」に固定 */
    }

    /* ============================================================
      キーフレームアニメーション
    ============================================================ */
    @keyframes charAppear {
      from { opacity: 0; transform: translateY(12px) scale(0.92); }
      to   { opacity: 1; transform: translateY(0)    scale(1); }
    }
    /* 灯篭の光（初期出現時） */
    @keyframes titleGlow {
      from { text-shadow: 0 0 0px rgba(234, 205, 112, 0), 0 2px 8px rgba(75,64,53,0.15); }
      to   { text-shadow: 0 0 14px rgba(234, 205, 112, 0.4), 0 2px 8px rgba(75,64,53,0.1); }
    }
    /* 灯篭の揺らぎ（無限ループ用） */
    @keyframes glowBlink {
      0%, 100% { text-shadow: 0 0 14px rgba(234, 205, 112, 0.4), 0 2px 8px rgba(75,64,53,0.1); }
      50%      { text-shadow: 0 0 24px rgba(234, 205, 112, 0.65), 0 0 32px rgba(199,139,68,0.2), 0 2px 8px rgba(75,64,53,0.1); }
    }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    /* 🟡 【修正④】scrollLine のシンプル化（origin切り替えバグ対策） */
    @keyframes scrollLine {
      0%   { transform: scaleY(0); opacity: 0; }
      20%  { opacity: 1; }
      80%  { transform: scaleY(1); opacity: 1; }
      100% { transform: scaleY(1); opacity: 0; }
    }

    /* スクロールフェードイン（JS と連携） */
    .fade-in-up {
      opacity: 0;
      transform: translateY(32px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }
    .fade-in-up.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ============================================================
      【重要：メインコンテンツレイヤー（フローティング補正）】
      🔴 【修正③】main-content（手前を滑るフローティングレイヤー）にz-indexを明示
    ============================================================ */
    #main-content {
      position: relative;
      z-index: 2; /* 背景レイヤー（z-index: 0）の上に確実に重なるように */
    }

    /* 
      🔴 【修正②】セクション共通（すりガラスフローティング仕様）
      壊れやすい複合セレクタ「.contents.bg1.glass-section」をシンプルな単一セレクタに統合。
    */
    .glass-section {
      position: relative;       /* 3Dレイヤー的な深度を設定するために必須 */
      z-index: 2;               /* 背景レイヤー（0）より上に重ねる */
      background: var(--color-glass-bg);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-top: 1px solid var(--color-glass-border);
      border-bottom: 1px solid var(--color-glass-border);
      padding: 80px 20px;
      margin-bottom: var(--section-gap); /* ← :root の --section-gap で一元管理 */
      box-shadow: 0 4px 24px rgba(75, 64, 53, 0.04);
    }

    .section-inner {
      max-width: 800px;
      margin: 0 auto;
    }

    /* セクション見出し装飾 */
    .section-label {
      font-size: 11px;
      letter-spacing: 0.35em;
      color: var(--color-accent);
      margin-bottom: 10px;
      text-transform: uppercase;
    }
    .section-title {
      font-size: clamp(22px, 4vw, 32px);
      color: var(--color-text);
      margin-bottom: 40px; /* 下の余白をこちらに統合 */
      display: inline-block; /* 👑 ここが重要：テキスト幅に合わせる */
      position: relative; /* 線の基準点 */
    }
    /* テキスト幅に合わせてピッタリ下線を引く */
    .section-title::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -10px; /* テキストから10px下に配置 */
      width: 100%;   /* 👑 これでテキスト幅に自動調整！ */
      height: 2px;
      background: linear-gradient(to right, var(--color-accent), transparent);
      border-radius: 2px;
    }
    /* 古い40pxの線は安全のために非表示化 */
    .section-divider {
      display: none;
    }

    /* ============================================================
      ギルド紹介（about）
    ============================================================ */
    .about-text {
      font-size: 15px;
      line-height: 2;
      color: var(--color-text);
      margin-bottom: 24px;
    }

    /* ============================================================
      ギルドの特色（features）カード
    ============================================================ */
    .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 20px;
      margin-top: 8px;
    }
    .feature-card {
      background: rgba(255, 251, 244, 0.7);
      border: 1px solid var(--color-glass-border);
      border-radius: 6px;
      padding: 28px 24px;
      transition: transform 0.3s, box-shadow 0.3s;
    }
    .feature-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(75, 64, 53, 0.1);
    }
    .feature-icon {
      font-size: 28px;
      margin-bottom: 14px;
    }
    .feature-title {
      font-size: 16px;
      color: var(--color-accent);
      margin-bottom: 10px;
    }
    .feature-desc {
      font-size: 13px;
      line-height: 1.9;
      color: var(--color-text);
    }

    /* ============================================================
      アコーディオン（details / summary — JSゼロ・SEO対応）
    ============================================================ */
    .accordion-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    details {
      border: 1px solid var(--color-glass-border);
      border-radius: 6px;
      overflow: hidden;
      background: rgba(255, 251, 244, 0.6);
      transition: background 0.3s, border-color 0.3s;
      position: relative;
    }
    details::before {
      /* 【追加演出】ホバー時に左端に伸びる和モダン金色のバー（UX向上） */
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 4px; height: 100%;
      background: var(--color-accent);
      transform: scaleY(0);
      transform-origin: top;
      transition: transform 0.3s ease;
      z-index: 5;
    }
    details:hover::before {
      transform: scaleY(1);
    }
    details:hover {
      border-color: rgba(199, 139, 68, 0.4);
    }
    details[open] {
      background: rgba(255, 251, 244, 0.85);
    }

    summary {
      list-style: none;          /* デフォルトの▶を非表示 */
      cursor: pointer;
      padding: 18px 20px;
      font-family: 'Zen Kaku Gothic New', sans-serif;
      font-size: 15px;
      font-weight: 700;
      color: var(--color-text);
      background: var(--color-summary-bg);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      user-select: none;
      transition: background 0.2s;
    }
    summary::-webkit-details-marker { display: none; } /* Safari対応 */
    summary::marker { display: none; }
    summary:hover { background: rgba(199, 139, 68, 0.13); }

    /* アコーディオン内の「最終更新日」などのバッジ装飾 */
    .accordion-tag {
      font-size: 10px;
      font-weight: 400;
      letter-spacing: 0.05em;
      background: rgba(199, 139, 68, 0.12);
      color: var(--color-accent);
      padding: 2px 8px;
      border-radius: 12px;
      margin-left: auto;
      margin-right: 8px;
    }

    /* 開閉アイコン（＋ / ×） */
    summary::after {
      content: '＋';
      font-size: 18px;
      font-weight: 400;
      color: var(--color-accent);
      flex-shrink: 0;
      transition: transform 0.3s;
    }
    details[open] > summary::after {
      content: '×';
    }

    .accordion-body {
      padding: 20px 24px 24px;
      font-size: 14px;
      line-height: 1.9;
      color: var(--color-text);
      border-top: 1px solid var(--color-glass-border);
    }
    .accordion-body p + p { margin-top: 12px; }
    .accordion-body ul {
      padding-left: 20px;
      margin-top: 10px;
    }
    .accordion-body ul li {
      margin-bottom: 6px;
    }

    /* ============================================================
      加入案内（join）CTAボタン
    ============================================================ */
    /* 👑 Joinセクション全体を中央揃えにする安全なアドオン */
    #join .section-inner {
      text-align: center;
    }
    /* 中央揃えに似合うよう、線を中央から両端へ消えるグラデーションに上書き（より美しく！） */
    #join .section-title::after {
      background: linear-gradient(to right, transparent, var(--color-accent), transparent);
    }

    .join-text {
      font-size: 15px;
      line-height: 2;
      margin-bottom: 32px;
    }
    .cta-group {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      justify-content: center; /* 👑 ボタンを中央に寄せる */
    }
    .cta-btn {
      display: inline-block;
      padding: 14px 36px;
      border-radius: 2px;
      font-family: 'Zen Kaku Gothic New', sans-serif;
      font-size: 14px;
      letter-spacing: 0.15em;
      transition: all 0.3s;
    }
    .cta-btn-primary {
      background: var(--color-accent);
      color: #fff;
      border: 1.5px solid var(--color-accent);
    }
    .cta-btn-primary:hover {
      background: transparent;
      color: var(--color-accent);
      opacity: 1;
    }
    .cta-btn-secondary {
      background: transparent;
      color: var(--color-accent);
      border: 1.5px solid var(--color-accent);
    }
    .cta-btn-secondary:hover {
      background: var(--color-accent);
      color: #fff;
      opacity: 1;
    }

/* ============================================================
      👑 新規追加：LINEオプチャ参加ボタン（美しく輝くLINEグリーン）
    ============================================================ */
.cta-btn-line {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #06C755 0%, #00B900 100%);
      color: #fff;
      border: 1.5px solid #06C755;
      box-shadow: 0 4px 16px rgba(6, 199, 85, 0.35);
      position: relative;
      overflow: hidden;
    }
    .cta-btn-line::before {
      content: '';
      position: absolute;
      top: 0; left: -75%;
      width: 50%; height: 100%;
      background: linear-gradient(120deg, transparent, rgba(255,255,255,0.5), transparent);
      transform: skewX(-20deg);
      transition: left 0.6s ease;
    }
    .cta-btn-line:hover {
      background: linear-gradient(135deg, #00B900 0%, #06C755 100%);
      color: #fff;
      opacity: 1;
      box-shadow: 0 6px 22px rgba(6, 199, 85, 0.5);
      transform: translateY(-2px);
    }
    .cta-btn-line:hover::before {
      left: 125%;
    }

    /* ============================================================
      AdSense プレースホルダー（コメントアウト状態）
    ============================================================ */
    .adsense-placeholder {
      background: rgba(199, 139, 68, 0.05);
      border: 1px dashed rgba(199, 139, 68, 0.3);
      border-radius: 4px;
      padding: 20px;
      text-align: center;
      font-size: 12px;
      color: var(--color-accent);
      margin: var(--section-gap) auto; /* ← section-gapに連動させる */
      max-width: 800px;
    }

    /* ============================================================
      フッター（SNSシェア含む）
    ============================================================ */
    #footer {
      position: relative;
      z-index: 2;               /* 背景固定レイヤーの上に重ねる */
      background: rgba(75, 64, 53, 0.98);
      color: rgba(255, 251, 244, 0.7);
      text-align: center;
      padding: 50px 20px;
      font-size: 12px;
      letter-spacing: 0.08em;
    }
    #footer a {
      color: rgba(234, 205, 112, 0.8);
    }
    #footer a:hover { opacity: 0.7; }
    .footer-share {
      display: flex;
      justify-content: center;
      gap: 16px;
      margin-bottom: 24px;
      flex-wrap: wrap;
    }
    .share-btn {
      display: inline-block;
      padding: 8px 20px;
      border-radius: 2px;
      font-size: 12px;
      letter-spacing: 0.1em;
      border: 1px solid rgba(234, 205, 112, 0.4);
      color: rgba(234, 205, 112, 0.9);
      transition: all 0.2s;
    }
    .share-btn:hover {
      background: rgba(234, 205, 112, 0.15);
      opacity: 1;
    }
    .footer-copy {
      margin-top: 16px;
      line-height: 2;
    }

    /* ============================================================
      過去のオリジナルCSS資産（デグレ防止マージ）
    ============================================================ */
    ul.cp_list {
      position: relative;
      padding: 0 0.5em;
      margin: 20px 0px;
      list-style-type: none;
      border: 2px solid #D2691E;
      background: #FFFFEE;
    }
    ul.cp_list::after {
      position: absolute;
      content: "LIST";
      padding: 1px 7px;
      letter-spacing: 0.06em;
      font-weight: bold;
      font-size: .6em;
      background: rgba(210,105,30,0.99);
      color: #FFFFFF;
      bottom: 100%;
      left: -2px;
      border-radius: 4px 4px 0px 0px;
    }
    ul.cp_list li {
      line-height: 1.5;
      padding: 0.6em 0.7em;
      border-bottom: 1px dashed #D2691E;
    }
    ul.cp_list li:last-child {
      border-bottom: none;
    }
    blockquote {
      position: relative;
      padding: 17px;
      font-style: italic;
      color: #464646;
      border: solid 2px #D2691E;
      margin: 20px 0;
      background: rgba(255, 251, 244, 0.5);
    }
    .btn-flat-border {
      display: inline-block;
      text-decoration: none;
      color: #67c5ff;
      border: solid 2px #67c5ff;
      border-radius: 3px;
      transition: .4s;
      background-color: rgba(255,255,255,0.7); 
      font-weight: bold;
      padding: 4px 12px;
      font-size: 11pt;
      cursor: pointer;
    }
    .btn-flat-border:hover {
      background: #67c5ff;
      color: white;
    }

/* ============================================================
  まほろばギャラリー（gallery）
============================================================ */
/* PCは3列のグリッド */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 16px;
}

/* ギャラリーの各アイテム */
.gallery-item {
  text-align: center;
}

/* 👑 金色の豪華な額縁 */
.gold-frame {
  position: relative;
  padding: 10px; /* 額縁の内側のマット（台紙）の幅 */
  background: #2a221b; /* マットの色（高級感のあるダークブラウン） */
  
  /* 額縁の金箔グラデーション */
  border: 5px solid;
  border-image: linear-gradient(135deg, #FFDF73 0%, #8A623A 25%, #EACD70 50%, #C78B44 75%, #FFF0B3 100%) 1;
  box-shadow: 0 8px 24px rgba(75, 64, 53, 0.4), inset 0 2px 8px rgba(0, 0, 0, 0.6);
  margin-bottom: 12px;
  transition: transform 0.3s ease;
}

/* マウスを乗せると絵画が少し浮かび上がる演出 */
.gold-frame:hover {
  transform: scale(1.03);
}

.gold-frame img {
  width: 100%;
  aspect-ratio: 1 / 1; /* 正方形に統一して美術館のように揃える */
  object-fit: cover; /* 画像が歪まないようにトリミング */
  display: block;
}

/* 画像の説明文 */
.gallery-caption {
  font-size: 12px;
  color: var(--color-text);
  font-family: 'Zen Kaku Gothic New', sans-serif;
  letter-spacing: 0.05em;
}

/* 📱 スマホ時は2列に変更 */
@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}



    /* ============================================================
      スマホ対応（レスポンシブ・iOSバグ対策）
    ============================================================ */
    @media (max-width: 768px) {
      /* ナビ */
      .nav-links { display: none; }
      .nav-hamburger { display: flex; }

      /* スマホ時：可読性を極限まで高めるため背景画像群の透明度を下げ、セクションを少し不透明化 */
      #bg-layer {
        position: fixed; /* position:fixedのままにして全画面の背景を維持（iOSのスクロールバグを回避） */
      }
      .photo-frame {
        opacity: 0.42 !important; /* スマホでは手前のテキストを読みやすくするために薄くする */
        animation-duration: 20s !important; /* 動きをさらに超低速化してチラつきを防止 */
      }

      /* スマホ向けに各背景画像をコンパクトかつ画面中央〜上下に重なり合うように再配分 */
      .photo-1 { width: 42%; top: 12%; left: -5%; }
      .photo-2 { width: 38%; top: 40%; left: -8%; transform: rotate(6deg); } /* ← translateX(-50%)をリセット */
      .photo-3 { width: 42%; top: 8%; left: 30%; }
      .photo-4 { width: 44%; top: 10%; right: -5%; }
      .photo-5 { width: 36%; top: 38%; right: -6%; }
      .photo-6 { width: 42%; bottom: 8%; left: -5%; }
      .photo-7 { width: 40%; bottom: 6%; right: -5%; }

  /* 🔴 スマホ用の変数（:root）設定 */
      :root {
        /* 必要に応じてスマホ用の変数をここに記述 */
      }

      /* 🔴 【修正②】スマホ用メディアクエリのセレクタ簡略化（.glass-section 単一で指定） */
      .glass-section {
        padding: 56px 16px;
        margin-bottom: 200px;
        /* 👑 修正：スマホの背景が不透明すぎたので、透過度を上げてすりガラス感を復活 (0.96 → 0.90) */
        background: rgba(255, 251, 244, 0.90);
      }

      /* CTAボタンを縦並びに */
      .cta-group { flex-direction: column; }
      .cta-btn { text-align: center; }
    }

    /* ============================================================
      アクセシビリティ：アニメーション軽減設定に対応
    ============================================================ */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
    }

 /* ============================================================
  トップに戻るボタン（フロート配置）
============================================================ */
#page-top {
  position: fixed;
  bottom: 96px;
  right: 24px;
  width: 48px;
  height: 48px;
  background: var(--color-glass-bg);
  border: 1.5px solid #F596AA; /* 🌸 枠線を美しい桜色に変更 */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #F596AA; /* 🌸 矢印の色を美しい桜色に変更 */
  cursor: pointer;
  z-index: 900;
  /* 初期状態は非表示（下に隠しておく） */
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 4px 12px rgba(75, 64, 53, 0.15);
}

/* スクロールしてクラスが付与されたらフワッと表示 */
#page-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ホバーでお洒落に色反転 */
#page-top:hover {
  background: #F596AA; /* 🌸 マウスを乗せた時、背景が桜色にフワッと光る */
  color: #fff;         /* 🌸 矢印は白に抜ける */
}


/* 👑 ギャラリー画像にマウスを乗せたら指マークにする */
.gold-frame img {
  cursor: pointer;
}

/* ============================================================
  画像拡大表示（モーダル / ライトボックス）
============================================================ */
#image-modal {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
#image-modal.show {
  opacity: 1;
  visibility: visible;
}
/* 暗くなる背景 */
.modal-bg {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}
/* 拡大画像とボタンの枠 */
.modal-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  z-index: 2001;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#modal-img {
  max-width: 100%;
  max-height: 85vh; /* 画面からはみ出さないように制限 */
  border-radius: 4px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.8);
  border: 4px solid var(--color-accent); /* 拡大時も世界観を崩さない枠線 */
}
/* 閉じるボタン（×） */
#modal-close {
  position: absolute;
  top: -40px; right: -10px;
  background: none; border: none;
  color: #fff; font-size: 36px;
  cursor: pointer;
  transition: transform 0.2s;
}
#modal-close:hover {
  transform: scale(1.2);
}


/* ============================================================
  👑 新規追加：ピンクの肉球マーク（カーソル追従／タップ／スクロール演出）
============================================================ */
.mahoroba-paw {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.85;
  animation: pawFadeOut 0.9s ease-out forwards;
  filter: drop-shadow(0 2px 4px rgba(245, 150, 170, 0.3));
}

@keyframes pawFadeOut {
  0% {
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(0.6);
  }
  20% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 14px)) scale(0.8);
  }
}

/* アニメーション軽減設定の方には控えめに */
@media (prefers-reduced-motion: reduce) {
  .mahoroba-paw {
    display: none;
  }
}


/* ============================================================
      👑 新規追加：ギルド紹介セクション、PCのみ左右中央配置
      ★ スマホ（768px以下）には一切影響を与えない
    ============================================================ */
    @media (min-width: 769px) {
      #about .section-inner {
        text-align: center;
      }
      #about .about-text {
        text-align: center;
      }
      #about table {
        margin-left: auto;
        margin-right: auto;
        max-width: 600px;
      }
      #about table th {
        text-align: right;
      }
    }


/* ============================================================
  👑 新規追加：AI BOT（右下フローティングチャット）
============================================================ */
#mahoroba-chat-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1500;
  box-shadow: 0 4px 16px rgba(75, 64, 53, 0.3);
  transition: transform 0.25s ease, background 0.25s ease;
}
#mahoroba-chat-toggle:hover {
  transform: scale(1.08);
  background: #F596AA;
}

#mahoroba-chat-window {
  position: fixed;
  bottom: 92px;
  right: 24px;
  width: 320px;
  max-width: calc(100vw - 32px);
  max-height: 440px;
  background: var(--color-glass-bg);
  border: 1px solid var(--color-glass-border);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(75, 64, 53, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  z-index: 1500;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: all 0.25s ease;
}
#mahoroba-chat-window.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mahoroba-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-weight: 700;
  color: var(--color-title);
  border-bottom: 1px solid var(--color-glass-border);
}
.mahoroba-chat-header button {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--color-text);
  cursor: pointer;
}

#mahoroba-chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  font-size: 13px;
}

.mahoroba-chat-msg {
  margin-bottom: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  line-height: 1.6;
  max-width: 85%;
}
.mahoroba-chat-msg-bot {
  background: rgba(199, 139, 68, 0.1);
  color: var(--color-text);
}
.mahoroba-chat-msg-user {
  background: var(--color-accent);
  color: #fff;
  margin-left: auto;
}

#mahoroba-chat-form {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--color-glass-border);
}
#mahoroba-chat-input {
  flex: 1;
  padding: 8px 12px;
  border-radius: 20px;
  border: 1px solid var(--color-glass-border);
  font-size: 13px;
  outline: none;
}
#mahoroba-chat-form button[type="submit"] {
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
}

@media (max-width: 480px) {
  #mahoroba-chat-window {
    right: 16px;
    bottom: 84px;
    width: calc(100vw - 32px);
  }
  #mahoroba-chat-toggle {
    right: 16px;
    bottom: 16px;
  }
}