@tailwind base;
@tailwind components;
@tailwind utilities;

/* 背景画像のトランジション用 */
.bg-image {
    transition: opacity 1s ease-in-out;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    will-change: opacity;
}

/* スマートフォン対応：background-attachment:fixedの代替 */
@media (max-width: 1023px) {
    .bg-image {
        background-attachment: scroll;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw; /* ビューポート幅 */
        height: 100vh; /* ビューポート高さ */
        z-index: -20;
        transform: translateZ(0); /* ハードウェアアクセラレーション */
        backface-visibility: hidden; /* 3D変換の最適化 */
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        /* iOS Safariでの背景のズームイン問題を解決 */
        min-height: 100vh;
        min-width: 100vw;
        /* iOS Safari でのスクロール時の背景固定 */
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    
    /* bodyのスクロール問題を防ぐ */
    body {
        -webkit-overflow-scrolling: touch; /* iOSでのスムーズスクロール */
        /* iOS Safari のアドレスバーによる高さの変動に対応 */
        min-height: 100vh;
        min-height: -webkit-fill-available;
        /* 背景画像のズームを防ぐ */
        overflow-x: hidden;
    }
    
    /* HTMLも同様に設定 */
    html {
        height: -webkit-fill-available;
        overflow-x: hidden;
    }
    
    /* コンテンツ領域の背景を透明に */
    .content-wrapper {
        background: transparent;
        position: relative;
        z-index: 1;
        /* スクロール時の最適化 */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    /* スマートフォンでの四隅ボーダーのz-indexを調整 */
    body::before,
    body::after {
        z-index: 49; /* 背景画像より上に表示 */
    }
}

/* さらなるiOS Safari対応 */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 1023px) {
        .bg-image {
            /* iOS Safari特有の設定 */
            height: 100vh;
            height: -webkit-fill-available;
            /* ズームを完全に防ぐ */
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            /* パフォーマンス最適化 */
            will-change: opacity;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-perspective: 1000;
            perspective: 1000;
        }
    }
}

/* スティッキー設定 */
@media (min-width: 901px) {
    .sticky-desktop {
        position: fixed;
        top: 30vh; /* 画面高さの30%の位置 */
        z-index: 10;
    }
    
    /* 縦位置の調整 */
    .content-wrapper {
        margin-top: 0;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        position: relative;
        padding-top: 30vh; /* 画面高さの30%の位置 */
    }
    
    /* 右カラムの調整 */
    .right-column {
        margin-left: 50%;
        padding-left: 25px;
    }
    
    /* 左カラムの調整 */
    .left-column {
        margin-left: calc(50% - 425px);
    }
}

/* h4タグのスタイル */
/* h5タグのスタイル */
.sub-heading {
    font-weight: bold;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    color: #E14661;
}

/* 文化庁説明文のスタイル */
.bunkacho-text {
    font-size: 10px;
    text-align: left;
}

/* Vision用のスタイル */
/* 数字のスタイル */
.number-overlay {
    position: absolute;
    top: 16px;
    left: 16px;
    background-color: #E14661;
    color: white;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 24px;
    z-index: 10;
}

/* vision01の特別な数字スタイル */
.number-overlay-special {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #E14661;
    color: white;
    width: 150px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 56px;
    z-index: 10;
    clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
}

/* 画像のアスペクト比 16:9 */
.aspect-16-9 {
    aspect-ratio: 16 / 9;
}

/* リキッドレイアウト用 */
.liquid-container {
    width: 100%;
    max-width: 1200px;
    min-width: 900px;
    margin: 0 auto;
    padding: 0 24px;
    padding-top: 15vh; /* 上から15%の位置から開始 */
}

.left-column-liquid {
    width: calc((250 / 900) * 100%);
    min-width: 250px;
}

.right-column-liquid {
    width: calc((600 / 900) * 100%);
    min-width: 600px;
}

.gap-liquid {
    width: calc((50 / 900) * 100%);
    min-width: 50px;
}

/* copy.svgのスタイル調整 */
.copy-svg {
    height: 50%; /* 高さを半分に */
    width: auto;
    margin: 0 auto; /* 左右中央配置 */
}

/* h3のマージン調整 */
.vision-heading {
    margin-top: 0 !important; /* 上マージンを削除 */
}

/* logo.svgのサイズ調整 */
.logo-svg {
    width: 66.67%; /* 2/3のサイズ */
    margin-bottom: 2rem; /* logoとcopyの間のマージンを広げる */
}

/* 右カラムの上マージンゼロ */
.right-column-content {
    padding-top: 0 !important;
}

/* 説明文のマージン調整（h2と同じに） */
.description-text {
    margin-top: 1rem; /* h2のmargin-bottomと同じ値 */
}

/* ローディング画面のスタイル */
.loading-logo {
    max-width: 300px;
    width: 80%;
    height: auto;
    animation: fadeInOut 2s ease-in-out;
}

/* スマートフォン対応 */
@media (max-width: 768px) {
    .loading-logo {
        max-width: 250px;
        width: 90%;
    }
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* フェードインブロックの初期状態 */
.fade-in-block {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* アニメーション完了後の状態 */
.fade-in-block.animated {
    opacity: 1;
    transform: translateY(0);
}



/* ボタンのスタイル調整 */
.btn-style {
    font-size: 1.125rem; /* 1.25remから1.125remに一段小さく（text-lg） */
    margin-top: 1.25rem; /* 元の2.5rem（mt-10）の半分 */
    margin-bottom: 1.25rem; /* 上下マージンを揃える */
    letter-spacing: 0.05em;
}

/* H4の赤い四角内のマージンを半分に */
.heading-box {
    display: inline-block;
    background-color: #E14661;
    color: white;
    padding: 0.25rem 0.5rem; /* 元の0.5rem 1remから半分に */
    margin-bottom: 0.5rem;
    border-radius: 2px; /* 2pxの角丸を追加 */
}

/* H2,H3の上下マージンを倍に */
.h2-style {
    margin-top: 1rem; /* 2remから1remに半分に */
    margin-bottom: 2rem; /* 元の1remから倍に */
}

.h3-style {
    margin-top: 1rem; /* 2remから1remに半分に */
    margin-bottom: 2rem; /* 元の1remから倍に */
}

/* H4の上マージンを倍に */
.h4-style {
    margin-top: 1.33rem; /* 2remから2/3の1.33remに */
}

/* 最初のH4（パスポート公開）の上マージンをゼロに */
.h4-style:first-of-type {
    margin-top: 0;
}

/* date.svgの上下マージンを半分に */
.date-section img {
    margin-top: 0;
    margin-bottom: 0;
}

/* フッターリンクのスタイル */
.footer-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 中央揃えから左寄せに変更 */
    gap: 0.5rem;
    font-size: 0.75rem; /* フォントサイズを小さく */
}

.footer-links a {
    display: block;
    text-align: left; /* 左寄せを明示 */
}

.footer-links-horizontal {
    display: flex;
    justify-content: flex-start; /* 中央揃えから左寄せに変更 */
    gap: 0.5rem;
}

/* SNSアイコンも左寄せに */
.footer-social {
    display: flex;
    justify-content: flex-start;
}

/* コピーライトも左寄せに */
.footer-copyright {
    text-align: left;
    font-size: 0.625rem; /* より小さいフォントサイズ */
}

/* 角丸のスタイル - 隣接していない辺のみ角丸にする */
/* 左カラムのロゴ部分（上辺のみ角丸） */
.logo-section {
    border-radius: 4px 4px 0 0;
}

/* 左カラムの日付部分（下辺のみ角丸） */
.date-section {
    border-radius: 0 0 4px 4px;
}

/* 右カラムの各ボックス（通常の角丸） */
.content-box {
    border-radius: 4px;
    margin-bottom: 1.875rem; /* 元の1.25rem（mb-5）から1.5倍 */
}

/* 右カラム最下部のフッター - 文化庁部分（上辺のみ角丸） */
.footer-top {
    border-radius: 4px 4px 0 0;
}

/* 右カラム最下部のフッター - 赤い部分（下辺のみ角丸） */
.footer-bottom {
    border-radius: 0 0 4px 4px;
}

/* 文字間隔を少し広げる */
body {
    letter-spacing: 0.025em;
}

/* 見出しの文字間隔調整 */
h1, h2, h3, h4, h5, h6 {
    letter-spacing: 0.05em;
}

/* テキストの左右揃え（両端揃え） */
p {
    text-align: justify;
}

/* 見出しは中央揃えまたは左揃えを維持 */
h1, h2, h3, h4, h5, h6 {
    text-align: left;
}

/* 特定の要素は中央揃えを維持 */
.text-center {
    text-align: center !important;
}

/* お知らせセクションのスタイル */
.news-item {
    margin-bottom: 1rem;
}

.news-date {
    color: #E14661;
    font-weight: bold;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.news-content {
    font-size: 0.875rem;
    line-height: 1.6;
    text-align: justify;
}

.news-divider {
    border-bottom: 1px dotted #ccc;
    margin: 1rem 0;
}

/* ヴィジョンページ専用のスタイル調整 */
.vision-logo-svg {
    width: 80%; /* 66.67%の1.2倍 = 80% */
    margin-bottom: 4rem; /* 2remの倍 = 4rem */
}

/* デバイステキストの縦書きスタイル */
.device-text-vertical {
    display: flex;
    flex-direction: row-reverse; /* 右から左の流れに変更 */
    justify-content: center; /* 横方向中央配置 */
    align-items: flex-start; /* 上揃え */
    margin: 0 auto;
    width: 100%; /* 左カラム全幅を使用 */
    height: auto;
    gap: 1rem;
    padding: 0 1rem; /* 左右に余白を追加 */
}

.vertical-line {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 1.125rem; /* h3と同じサイズ（text-lg） */
    font-weight: 700; /* h3と同じボールド */
    line-height: 1.5; /* 1.5に調整 */
    letter-spacing: 0.2em; /* 0.2emに調整 */
    color: #000; /* 黒文字 */
    white-space: nowrap;
    height: auto;
    margin: 0;
    padding: 0;
    flex-shrink: 0; /* 文字が縮まないように */
}

/* 左カラムの上マージンをゼロに */
.vision-left-column {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 左カラム固定ロジック - PC版のみ */
@media (min-width: 1024px) {
    .vision-left-column {
        position: sticky;
        top: calc(15vh + 1.5rem); /* 初期表示位置と同じ値（liquid-containerのpadding-top + pt-6） */
        height: fit-content; /* コンテンツの高さに合わせる */
        z-index: 10; /* 他の要素より前面に表示 */
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* スマホ版では通常の配置 */
@media (max-width: 1023px) {
    .vision-left-column {
        position: static; /* 通常の配置 */
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

.vision-text-container {
    padding-top: 0 !important; /* 上マージンをゼロに */
}

.vision-text-content {
    text-align: justify; /* 左右揃え */
    letter-spacing: 0.025em; /* indexページと同じ文字間隔 */
    line-height: 1.6;
}

.vision-heading-text {
    letter-spacing: 0.05em; /* 見出しの文字間隔 */
}

/* 右カラムのブロック間マージンを1.5倍に */
.vision-block-spacing {
    margin-bottom: 3.375rem; /* 2.25rem × 1.5 = 3.375rem */
}

.vision-block-spacing:last-child {
    margin-bottom: 0;
}

/* 画像プレイスホルダーのスタイル */
.image-placeholder {
    background-color: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.vision-image {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.vision-image.loaded {
    opacity: 1;
}

/* 数字オーバーレイのスタイル - SVG画像使用版 */
.number-overlay,
.number-overlay-special {
    position: absolute;
    top: -10%; /* -15%から-10%に変更して、より写真にかぶるように */
    left: -10%; /* -15%から-10%に変更して、より写真にかぶるように */
    width: 48px; /* 64pxから48pxにさらに縮小 */
    height: 48px; /* 64pxから48pxにさらに縮小 */
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none; /* 背景を削除 */
}

.number-overlay img,
.number-overlay-special img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* スマホ版では少し小さく */
@media (max-width: 1023px) {
    .number-overlay,
    .number-overlay-special {
        width: 36px; /* 48pxから36pxにさらに縮小 */
        height: 36px; /* 48pxから36pxにさらに縮小 */
        top: -5%; /* -8%から-5%に変更して、より写真にめり込むように */
        left: -5%; /* -8%から-5%に変更して、より写真にめり込むように */
    }
}

/* スマホ版のブロック間マージンも調整 */
@media (max-width: 1023px) {
    .vision-block-spacing {
        margin-bottom: 3.375rem; /* 2.25rem × 1.5 = 3.375rem */
    }
}

/* スマホ版では左マージンをゼロに */
@media (max-width: 1023px) {
    .vision-text-container {
        padding-left: 0 !important; /* 左マージンをゼロに */
        padding-right: 1rem; /* 右マージンのみ保持 */
        padding-top: 0 !important;
        padding-bottom: 1rem;
    }
    
    .vision-text-container-mobile {
        padding-left: 0; /* 左マージンをゼロに */
        padding-right: 1rem; /* 右マージンのみ保持 */
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

/* スマホ版でも同じスタイルを維持 */
@media (max-width: 1023px) {
    .device-text-vertical {
        gap: 0.75rem;
        padding: 0 0.5rem; /* スマホでは余白を少し小さく */
    }
    
    .vertical-line {
        font-size: 1rem; /* スマホでは少し小さく */
        font-weight: 700; /* ボールドは維持 */
        line-height: 1.5; /* PC版と統一 */
    }
}

/* ローディングロゴコンテナのスタイル */
#loading-screen {
    position: fixed;
    inset: 0;
    background-color: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 40;
}

/* ローディングロゴの左から右への着色アニメーション用 */
.logo-container {
    position: relative;
}

/* PC版の.logo-container - 元の状態を維持 */
@media (min-width: 769px) {
    .logo-container {
        display: inline-block;
    }
}

/* スマートフォン版の.logo-container - 中央揃え強化 */
@media (max-width: 768px) {
    .logo-container {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        padding: 0 1rem;
    }
}

#logo-gray {
    max-width: 300px;
    width: 80%;
    height: auto;
    display: block;
    filter: grayscale(100%) brightness(1.8) contrast(0.15);
    transition: none;
}

#logo-color {
    position: absolute;
    max-width: 300px;
    width: 80%;
    height: auto;
    filter: none;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.3s ease;
    pointer-events: none;
}

/* PC版の位置調整 */
@media (min-width: 769px) {
    #logo-color {
        top: 0;
        left: 0;
    }
}

/* スマートフォン版の位置調整 */
@media (max-width: 768px) {
    #logo-gray,
    #logo-color {
        max-width: 250px;
        width: 90%;
    }
    
    #logo-color {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
}