/* =======================================================
   一般社団法人 日本文化教育発信機構
   Global Stylesheet — The Serene Custodian Design System
   ======================================================= */

/* --- Google Fonts はHTMLで読み込み済み --- */

/* -------------------------------------------------------
   Font Unification — すべての文字を Noto Serif JP に統一
   (Tailwindのデフォルト・インラインスタイルを上書き)
   ------------------------------------------------------- */
html,
body,
button,
input,
select,
textarea,
.font-body,
.font-sans,
.font-label,
.font-headline,
.font-serif {
    font-family: "Noto Serif JP", serif !important;
}

/* Material Symbolsだけは例外（アイコンフォント） */
.material-symbols-outlined {
    font-family: "Material Symbols Outlined" !important;
}

/* -------------------------------------------------------
   Material Symbols
   ------------------------------------------------------- */
.material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
    user-select: none;
}

/* -------------------------------------------------------
   Layout & Writing Mode Utilities
   ------------------------------------------------------- */
.writing-vertical {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

/* -------------------------------------------------------
   Washi Paper Texture（和紙テクスチャ）
   ------------------------------------------------------- */
.washi-texture {
    background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCgBPb-_rTEoMkrCum0BdpzrSpkuytUbrifMRMrKa6mn_xKyuzu6-x_1JajD7av5xktMbiJNB7-fO-1WIafZgOjJfy7y8mjhkhv8u6ze9E8hM1lxbVA7U5y_5ZnZUQV9PSfzfs5QWHHjcnzBmn5RAr9bT0So6Rei0TtXUbUf7a5J5I6ovieXxMlc1VZFzrd3_g1UYyKQG9eMINsJdRMfR4PehyOaeR09i8fgbOGB5JGCKwQaVfvlR_As8pjzMTz3EAnw_Ui96NwrA");
}

/* -------------------------------------------------------
   Glassmorphism（障子ガラス効果）
   ------------------------------------------------------- */
.glass-card {
    background: rgba(251, 249, 244, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.shoji-blur {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background-color: rgba(251, 249, 244, 0.8);
}

/* -------------------------------------------------------
   Blur Vignette
   ------------------------------------------------------- */
.blur-vignette {
    mask-image: radial-gradient(circle, black 50%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle, black 50%, transparent 100%);
}

/* -------------------------------------------------------
   Ink Stamp Gradient（印章グラデーション）
   ------------------------------------------------------- */
.ink-stamp {
    background: linear-gradient(135deg, #021936 0%, #1a2e4c 100%);
}

/* -------------------------------------------------------
   Kintsugi Border（金継ぎ風ボーダー）
   ------------------------------------------------------- */
.kintsugi-border {
    position: relative;
    border: 1px solid rgba(115, 91, 36, 0.2);
}

.kintsugi-border::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 40px;
    height: 40px;
    border-top: 2px solid #e3c381;
    border-right: 2px solid #e3c381;
    pointer-events: none;
}

/* -------------------------------------------------------
   Japanese Text Justification
   ------------------------------------------------------- */
.text-justify-jp {
    text-align: justify;
    text-justify: inter-character;
}

/* -------------------------------------------------------
   Custom Scrollbar
   ------------------------------------------------------- */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #e4e2dd;
    border-radius: 2px;
}

/* -------------------------------------------------------
   Navigation — Active State
   ------------------------------------------------------- */
.nav-link.active {
    color: #735b24;
    border-bottom: 1px solid #735b24;
    padding-bottom: 2px;
    opacity: 1;
}

/* -------------------------------------------------------
   Navigation — Scroll Shrink
   ------------------------------------------------------- */
nav.scrolled {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    box-shadow: 0 2px 20px rgba(2, 25, 54, 0.06);
}

/* -------------------------------------------------------
   Form Inputs — Global Overrides
   ------------------------------------------------------- */
input:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: #735b24 !important;
    box-shadow: none !important;
}

/* -------------------------------------------------------
   Donation Amount Buttons
   ------------------------------------------------------- */
.amount-btn.selected {
    background-color: #735b24;
    color: #ffffff;
    border-color: #735b24;
}

/* -------------------------------------------------------
   Page Transition Fade-in
   ------------------------------------------------------- */
body {
    animation: fadeIn 0.4s ease-in;
}

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

/* -------------------------------------------------------
   Mobile Menu Transition
   ------------------------------------------------------- */
#mobile-menu {
    transition: max-height 0.3s ease, opacity 0.3s ease;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
}

#mobile-menu.open {
    max-height: 500px;
    opacity: 1;
}

/* -------------------------------------------------------
   Responsive Image Helpers
   ------------------------------------------------------- */
.img-bleed-right {
    margin-right: calc(-1 * (100vw - 100%) / 2);
}

/* -------------------------------------------------------
   Vertical Side Decoration
   ------------------------------------------------------- */
.side-decoration {
    position: fixed;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    pointer-events: none;
    z-index: 10;
}

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

/* -------------------------------------------------------
   Hover Effects（ホバーエフェクト）
   ------------------------------------------------------- */

/* 画像ズーム — コンテナに付与。中のimgが拡大する */
.hover-zoom {
    overflow: hidden;
}
.hover-zoom img {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hover-zoom:hover img {
    transform: scale(1.08);
}

/* ボタン拡大 — ボタン/リンクに付与 */
.hover-grow {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-grow:hover {
    transform: scale(1.06);
    box-shadow: 0 4px 15px rgba(2, 25, 54, 0.15);
}

/* カード浮き上がり — カード要素に付与 */
.hover-lift {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(2, 25, 54, 0.12);
}

/* 画像オーバーレイ — 画像コンテナに付与 */
.hover-overlay {
    position: relative;
    overflow: hidden;
}
.hover-overlay .overlay-content {
    position: absolute;
    inset: 0;
    background: rgba(2, 25, 54, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.hover-overlay:hover .overlay-content {
    opacity: 1;
    pointer-events: auto;
}
.hover-overlay .overlay-content a,
.hover-overlay .overlay-content span {
    color: #ffffff;
    font-size: 0.875rem;
    letter-spacing: 0.15em;
    border: 1px solid rgba(255, 255, 255, 0.6);
    padding: 0.75rem 1.5rem;
    transition: background 0.3s ease;
}
.hover-overlay .overlay-content a:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* スマホではホバー効果を軽減（タッチデバイス向け） */
@media (hover: none) {
    .hover-zoom:hover img {
        transform: none;
    }
    .hover-grow:hover {
        transform: none;
        box-shadow: none;
    }
    .hover-lift:hover {
        transform: none;
        box-shadow: none;
    }
}

/* -------------------------------------------------------
   Scroll Reveal Animation
   ------------------------------------------------------- */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* -------------------------------------------------------
   Mobile Responsive Overrides
   ------------------------------------------------------- */

/* スマホ全般 (767px以下) */
@media (max-width: 767px) {
    /* ナビバーのパディング調整 */
    nav .py-6 {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    /* ヒーローセクションの画像オーバーレイ強化 */
    .hero-img-reveal + div,
    .hero-img-reveal .absolute {
        background: linear-gradient(to right, rgba(251,249,244,0.95) 0%, rgba(251,249,244,0.7) 50%, transparent 100%) !important;
    }

    /* テーブルの横スクロール防止 */
    table {
        display: block;
        overflow-x: auto;
    }

    /* フッターのグリッドを1カラムに */
    footer .grid {
        grid-template-columns: 1fr !important;
    }

    /* カードの最小高さを調整 */
    .min-h-\[90vh\] {
        min-height: 70vh;
    }

    /* 大きな文字サイズの上限 */
    .text-6xl, .text-7xl, .text-8xl {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }

    /* 横スクロール防止 */
    body {
        overflow-x: hidden;
    }

    /* ボタンのパディング調整 */
    a[class*="px-8"], button[class*="px-8"] {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

/* 小さいスマホ (374px以下) */
@media (max-width: 374px) {
    nav a[class*="text-xs"] {
        font-size: 0.625rem;
    }
}