@charset "UTF-8";

/* Typography Settings */
html {
    overflow-x: hidden;
    width: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    /* 
       【プロポーショナルメトリクス設定】
       "palt" 1 : 日本語フォントの文字詰め情報を有効化（Metricsカーニング相当）
    */
    font-feature-settings: "palt" 1;
    
    /* 欧文のペアカーニングを有効化 */
    font-kerning: normal;

    /* 
       一律の字間調整（トラッキング）
       0.05emに設定
    */
    letter-spacing: 0.05em;
    
    /* 両端揃え（テキストボックス内で端を綺麗に揃える） */
    text-align: justify;
    text-justify: inter-ideograph;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    width: 100%;
}

/* 欧文（英数字）用のクラス: Noto Sans を強制適用 */
.latin-text {
    font-family: 'Noto Sans', sans-serif;
}

/* Flex overflow fix for mobile stability */
* {
    min-width: 0;
}

/* Main Container Fix for iOS */
main {
    overflow-x: hidden;
}

/* Scrollbar Customization */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #fff; 
}
::-webkit-scrollbar-thumb {
    background: #e5e7eb; 
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #d1d5db; 
}

/* Detail View Transition */
.fade-in {
    animation: fadeIn 0.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

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

/* Header Scrolled State */
.header-scrolled {
    background-color: #ffffff; /* 完全な白に設定 */
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    /* ボーダー削除 */
    border-bottom: none;
}

/* Mobile Menu */
.mobile-menu-open {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Detail Page Typography Layout Utilities */
.text-justified-p {
    text-align: justify;
    text-justify: inter-ideograph;
    /* 最終行は左揃えにする */
    text-align-last: left; 
}

/* Autofill Detection Animation */
@keyframes onAutoFillStart { from { } to { } }

/* Autofill Style Fix for Light Section */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
    -webkit-text-fill-color: #111827; /* Dark text (black) */
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset; /* White background */
    transition: background-color 5000s ease-in-out 0s;
    animation-name: onAutoFillStart; /* Trigger JS listener */
}

/* Form Label Override for Filled State */
.form-group.is-filled label {
    top: -1.75rem !important; /* -top-7 equivalent */
    font-size: 0.75rem !important; /* text-xs equivalent */
    color: #9ca3af !important; /* text-gray-400 */
}

/* Detail View Container */
#detail-view {
    width: 100%;
    overflow-x: hidden;
}

/* Hero Slideshow Styles */
.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    /* デフォルトで少しぼかしておく */
    filter: blur(10px);
    /* ゆったりとした遷移時間 */
    transition: opacity 2s ease-in-out, filter 2s ease-in-out;
}

.hero-slide.active {
    opacity: 0.6; /* 60% opacity */
    filter: blur(0px); /* ピントが合う */
}