@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Zen+Old+Mincho:wght@400;600;700;900&family=Shippori+Mincho:wght@400;500;600;700;800&display=swap');

:root {
    /* Colors - Base (温かみのあるクリーム・ベージュ系) */
    --paper-white: #F5F0E1;
    --paper-cream: #F8F4E8;
    --pure-white: #FFFEF9;

    /* Colors - Text (墨色・古都の茶) */
    --sumi-black: #3E3A39;
    --koto-brown: #8E6E48;
    --koto-brown-light: #A58860;
    --koto-brown-dark: #6B5235;

    /* Colors - Accent (桜・藤・若葉) */
    --sakura-pink: #F2E4DC;
    --sakura-dark: #E8D4C8;
    --sakura-blush: #F0DED5;
    --fuji-purple: #C4B7D4;
    --wakaba-green: #B8C9A3;

    /* Gold Gradient (金箔) */
    --gold-leaf: linear-gradient(135deg, #BF953F 0%, #FCF6BA 40%, #B38728 70%, #AA771C 100%);
    --gold-soft: linear-gradient(135deg, #C9A55C 0%, #E8D5A3 50%, #B8954A 100%);
    --gold-subtle: linear-gradient(135deg, rgba(191, 149, 63, 0.1) 0%, rgba(252, 246, 186, 0.1) 40%, rgba(179, 135, 40, 0.1) 100%);

    /* Fonts */
    --font-jp: 'Zen Old Mincho', 'Shippori Mincho', serif;
    --font-en: 'Cormorant Garamond', serif;

    /* Spacing - 余白を大切に */
    --letter-spacing-wide: 0.12em;
    --section-padding: clamp(4rem, 10vw, 8rem);
}

/* Global Reset & Base Styles */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    background-color: var(--paper-cream);
    color: var(--sumi-black);
    font-family: var(--font-jp);
    letter-spacing: var(--letter-spacing-wide);
    line-height: 2;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Washi Paper Texture Overlay - より繊細に */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: multiply;
}

/* Typography Utilities */
.font-jp {
    font-family: var(--font-jp);
}

.font-en {
    font-family: var(--font-en);
    letter-spacing: 0.2em;
}

/* Vertical Writing Mode for Headings */
.writing-vertical {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 0.25em;
}

/* Text Colors */
.text-sumi-black {
    color: var(--sumi-black);
}

.text-koto-brown {
    color: var(--koto-brown);
}

.text-paper-white {
    color: var(--paper-white);
}

.text-sakura-pink {
    color: var(--sakura-pink);
}

/* Background Colors */
.bg-paper-white {
    background-color: var(--paper-white);
}

.bg-paper-cream {
    background-color: var(--paper-cream);
}

.bg-sumi-black {
    background-color: var(--sumi-black);
}

.bg-sakura-pink {
    background-color: var(--sakura-pink);
}

/* ========================================
   Gold Button - 落ち着いた金色ボタン（京都らしく控えめに）
   ======================================== */
.btn-gold {
    background: linear-gradient(135deg, #A08050 0%, #C9A868 50%, #9A7848 100%);
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    border: 1px solid rgba(160, 128, 80, 0.3);
    font-family: var(--font-en);
    letter-spacing: 0.2em;
}

.btn-gold::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transition: left 0.6s ease;
}

.btn-gold:hover::before {
    left: 100%;
}

.btn-gold:hover {
    box-shadow: 0 8px 25px rgba(142, 110, 72, 0.2);
    transform: translateY(-2px);
}

/* ========================================
   Section Headers with Gold Accent
   ======================================== */
.section-header {
    position: relative;
    display: inline-block;
}

.section-header::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 1px;
    background: var(--gold-leaf);
}

/* ========================================
   Card Styles - より柔らかいガラス効果
   ======================================== */
.card-glass {
    background: rgba(255, 254, 249, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(142, 110, 72, 0.15);
    border-radius: 20px;
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.card-glass:hover {
    transform: translateY(-4px);
    box-shadow:
        0 25px 50px rgba(142, 110, 72, 0.08),
        0 0 0 1px rgba(142, 110, 72, 0.08);
}

/* ========================================
   Skills Section - 温かみのあるデザイン
   ======================================== */
#skills {
    background-color: transparent;
}

.skill-card {
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    background: rgba(255, 254, 249, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(142, 110, 72, 0.15);
    position: relative;
    overflow: hidden;
}

.skill-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--gold-soft);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
}

.skill-card:hover::before {
    transform: scaleX(1);
}

.skill-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.06),
        0 8px 20px rgba(142, 110, 72, 0.08);
    border-color: var(--koto-brown-light);
}

/* ========================================
   News Cards - 洗練されたカード
   ======================================== */
.news-card {
    background: var(--pure-white);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    border: 1px solid rgba(142, 110, 72, 0.1);
}

.news-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(142, 110, 72, 0.08);
}

/* ========================================
   Character Cards
   ======================================== */
.character-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.character-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(191, 149, 63, 0.25), transparent) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.character-card:hover::after {
    opacity: 1;
}

/* ========================================
   Initial Hide & Fade-in Logic
   ======================================== */
.flex.min-h-screen:not(.main-content-visible) {
    opacity: 0 !important;
    visibility: hidden !important;
}

.flex.min-h-screen.main-content-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 1.8s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* ========================================
   Animations - より優雅に
   ======================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.animate-fadeIn {
    animation: fadeInUp 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.animate-scaleIn {
    animation: scaleIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ========================================
   Roadmap Cards - 統一感のあるデザイン
   ======================================== */
.roadmap-card {
    background: var(--pure-white);
    border-radius: 16px;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    border: 1px solid rgba(142, 110, 72, 0.1);
}

.roadmap-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gold-soft);
    border-radius: 0 0 16px 16px;
}

.roadmap-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 25px 50px rgba(142, 110, 72, 0.1);
}

/* ========================================
   Footer - 墨色のフッター
   ======================================== */
footer {
    background-color: var(--sumi-black) !important;
}

footer a {
    transition: color 0.3s ease;
}

footer a:hover {
    color: var(--sakura-blush) !important;
}

/* ========================================
   Scrollbar Styling - 控えめなスクロールバー
   ======================================== */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--paper-cream);
}

::-webkit-scrollbar-thumb {
    background: var(--koto-brown-light);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--koto-brown);
}

/* ========================================
   Selection Styling
   ======================================== */
::selection {
    background-color: rgba(191, 149, 63, 0.2);
    color: var(--sumi-black);
}

/* ========================================
   Soft Blur Background Sections
   ======================================== */
.section-blur-bg {
    position: relative;
}

.section-blur-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(245, 240, 225, 0.4),
            rgba(248, 244, 232, 0.6));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: -1;
}

/* ========================================
   Link Styles
   ======================================== */
a {
    transition: all 0.3s ease;
}

/* ========================================
   Responsive Typography & Spacing
   ======================================== */

/* Fluid Typography */
html {
    font-size: 16px;
}

@media (max-width: 768px) {
    html {
        font-size: 14px;
    }

    body {
        letter-spacing: 0.08em;
        line-height: 1.7;
    }

    .writing-vertical {
        letter-spacing: 0.18em;
    }

    :root {
        --section-padding: clamp(3rem, 8vw, 5rem);
    }
}

@media (max-width: 480px) {
    html {
        font-size: 13px;
    }

    :root {
        --section-padding: 3rem;
    }
}

/* Gold Luster Effect for Borders */
.border-gold {
    border: 1px solid transparent;
    background: linear-gradient(var(--paper-cream), var(--paper-cream)) padding-box,
        var(--gold-soft) border-box;
}

/* Ethereal Overlay */
.overlay-mist {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(248, 244, 232, 0.9);
}

/* ========================================
   セクション余白 - 贅沢な余白
   ======================================== */
section {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
}

/* ========================================
   Component Responsive Tweaks
   ======================================== */

/* Card Adjustments */
@media (max-width: 640px) {

    .card-glass,
    .roadmap-card,
    .news-card {
        border-radius: 12px;
    }

    .btn-gold {
        width: 100%;
        justify-content: center;
        letter-spacing: 0.15em;
    }
}

/* Navigation & Header Adjustments */
@media (max-width: 768px) {
    h1 {
        word-break: keep-all;
        overflow-wrap: break-word;
    }

    .section-header::after {
        width: 60px;
        bottom: -8px;
    }
}

/* Image Aspect Ratios for Mobile */
@media (max-width: 480px) {
    .news-card img {
        height: 200px;
    }
}

/* ========================================
   追加: ギャラリーボーダー色の調整
   ======================================== */
.border-sakura-pink {
    border-color: rgba(142, 110, 72, 0.2);
}

.hover\:border-koto-brown:hover {
    border-color: var(--koto-brown);
}

/* ========================================
   追加: ローズ系カラーを金・茶系に置換
   ======================================== */
.bg-rose-500,
.from-rose-400,
.via-pink-400,
.to-amber-400 {
    background: var(--gold-soft) !important;
}

.text-rose-500,
.text-rose-600 {
    color: var(--koto-brown) !important;
}

.hover\:text-rose-700:hover {
    color: var(--koto-brown-dark) !important;
}

.border-rose-100 {
    border-color: rgba(142, 110, 72, 0.15) !important;
}

.hover\:shadow-rose-300\/50:hover,
.hover\:shadow-rose-500\/30:hover,
.hover\:shadow-pink-500\/30:hover {
    box-shadow: 0 25px 50px rgba(142, 110, 72, 0.12) !important;
}

/* スキルカードのアイコン背景を茶系に */
.bg-rose-100 {
    background-color: rgba(142, 110, 72, 0.1) !important;
}

.text-rose-500 {
    color: var(--koto-brown) !important;
}

/* キャラクターナンバーバッジの調整 */
.from-amber-500,
.to-rose-500,
.from-rose-500,
.to-pink-500,
.from-pink-500,
.to-amber-500 {
    background: var(--gold-leaf) !important;
}

/* ========================================
   ギャラリースライドショー
   ======================================== */
.gallery-img {
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* ========================================
   FV Image Mobile Adjustments
   ======================================== */
.fv-hero-img {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    object-fit: cover;
    object-position: right 15%;
    color: transparent;
}

@media (max-width: 1024px) {
    .fv-hero-img {
        object-position: center center !important;
    }

    /* Container fills the section */
    .fv-hero-container {
        height: 100% !important;
        bottom: auto !important;
    }

    /* Section height becomes 70vh to remove bottom whitespace */
    .fv-section {
        height: 70vh !important;
        min-height: auto !important;
    }

    /* Shift text up */
    .fv-text-container {
        transform: translateY(-20px);
        margin-bottom: 20px;
    }
}

/* ========================================
   Multi-Image FV Styles (Flex Layout)
   ======================================== */
.hero-images {
    display: flex;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.hero-image {
    flex: 1;
    height: 100%;
    position: relative;
    overflow: hidden;
    /* opacity: 0; removed for debugging */
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* 個別の調整 (アニメーション一時無効化) */
.hero-image:nth-child(1) {
    /* animation: fvSlideInLeft ... */
    z-index: 2;
}

.hero-image:nth-child(1) img {
    object-position: center 20%;
    /* 左だけ少し下（頭上）をトリミングして位置合わせ */
    transform: scale(1.05);
    /* 少し拡大してサイズ感をあわせる */
    transform-origin: center 30%;
}

.hero-image:nth-child(2) {
    /* animation: fvFadeInZoom ... */
    z-index: 1;
}

.hero-image:nth-child(3) {
    /* animation: fvSlideInRight ... */
    z-index: 2;
}

/* Animations (Keep definitions but don't use) */
@keyframes fvFadeInZoom {
    from {
        opacity: 0;
        transform: scale(1.05);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fvSlideInLeft {
    from {
        opacity: 0;
        transform: translateX(-5%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fvSlideInRight {
    from {
        opacity: 0;
        transform: translateX(5%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 768px) {
    .hero-images {
        flex-direction: row;
    }

    .hero-image img {
        object-position: center top;
    }
}