/*
Theme Name: 道の駅 りんごの森
Theme URI: https://apple-forest.example.com
Description: 山形県朝日町 道の駅「りんごの森」の公式テーマ
Author: 朝日町開発チーム
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
Text Domain: apple-forest
Tags: custom-theme, japanese
*/

body {
    font-family: 'Noto Sans JP', sans-serif;
    background-color: #FFFCF5;
    /* アイボリーホワイト */
    color: #4a4a4a;
}

h1,
h2,
h3,
.rounded-font {
    font-family: 'M PLUS Rounded 1c', sans-serif;
}

/* Custom Scrollbar hide */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Custom Scrollbar for Apple List */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Ticker Animation */
@keyframes ticker {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

.animate-ticker {
    display: inline-block;
    white-space: nowrap;
    animation: ticker 30s linear infinite;
}

/* Horizontal Scroll Section Height Helper */
.scroll-section-container {
    height: 700vh;
    /* コンテンツが増えたため、スクロール距離を長くしてゆっくり見れるように調整 */
    position: relative;
}

/* Fade In Animation */
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Utility for hiding pages - Will be less needed after splitting but kept for compatibility */
.page-section {
    display: none;
}

.page-section.active {
    display: block;
}

/* Swiper Custom Styles */
.swiper {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
}

.swiper-slide {
    background-position: center;
    background-size: cover;
    width: 300px;
    height: 175px;
    /* PCのアスペクト比(600:350)に合わせて調整 */
    /* Mobile adjustments */
}

@media (min-width: 768px) {
    .swiper-slide {
        width: 600px;
        height: 350px;
    }
}


/* =============================================================================
   WordPress 管理バー対応
   ログイン中に表示される管理バー（32px / スマホ46px）と
   固定ヘッダーが重ならないよう top 位置を自動調整する。
   実際のページデザインには一切影響しない。
============================================================================= */
body.admin-bar #main-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar #main-header {
        top: 46px;
    }
}