/* * 基本スタイルとTailwind CSSからの変換スタイル
    * このHTMLファイルは外部のCSSファイルに依存せず、ここにあるスタイルのみで表示されます。
    * htmlのフォントサイズなしのため、1rem＝16px基準
    */

/* 基本設定 */
html {
    scroll-behavior: smooth;
}
body {
    font-family: 'メイリオ', 'Noto Sans JP', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    background-color: #FFFFFF; 
    color: #1F2937; /* text-gray-800 */
}

a {
    color: inherit;
    text-decoration: inherit;
}
a:hover {
    opacity: 0.6;
}

img {
    max-width: 100%;
    height: auto;
}

hr {
    width: 40px;
    margin-left: 0;
    margin-right: 0;
}

/* ナビゲーションカスタムクラス */
.nvlink {
    display: block;
    padding: 10px 2px 5px 2px;
}

/* 見出し用のカスタムクラス */
.section-title {
    font-size: 1.25rem; /* 20px */
    font-weight: bold;
    display: flex;
    align-items: center;
}

.section-title::before {
    content: '';
    display: inline-block;
    width: 1.875rem;
    height: 1.1rem;
    margin-right: 0.5rem;
    background-image: url("../img/section-icon.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
section[id] {
    scroll-margin-top: 90px;
}

    /* 追従メニュー用のスタイル */
    .sticky-nav {
        position: -webkit-sticky; /* Safari対応 */
        position: sticky;
        top: 0;
        z-index: 1000;
        background-color: rgba(255, 255, 255, 0.98); /* 背景を少し透過 */
    }

    /* レイアウト & ボックスモデル */
    .max-w-4xl { max-width: 1100px; } /* 最大幅を1100pxに変更 */
    .mx-auto { margin-left: auto; margin-right: auto; }
    .p-2 { padding: 0.5rem; }
    .p-4 { padding: 1rem; }
    .p-6 { padding: 1.5rem; }
    .pb-4 { padding-bottom: 1rem; }
    .pt-4 { padding-top: 1rem; }
    .pt-8 { padding-top: 2rem; }
    .mb-2 { margin-bottom: 0.5rem; }
    .mb-4 { margin-bottom: 1rem; }
    .mb-6 { margin-bottom: 1.5rem; }
    .mb-8 { margin-bottom: 2rem; }
    .mb-12 { margin-bottom: 3rem; }
    .my-0 { margin-top: 0; margin-bottom: 0; }
    .my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
    .mt-2 { margin-top: 0.5rem; }
    .mt-12 { margin-top: 3rem; }
    .ml-1 { margin-left: 0.25rem; }
    .space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: 1rem; }
    .gap-8 { gap: 2rem; }
    .w-full { width: 100%; }
    .w-24 { width: 6rem; }
    .h-8 { height: 2rem; }
    .h-10 { height: 2.5rem; }
    .h-24 { height: 6rem; }

    /* Flexbox & Grid */
    .flex { display: flex; }
    .grid { display: grid; }
    .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .flex-col { flex-direction: column; }
    .flex-col-reverse { flex-direction: column-reverse; }
    .flex-wrap { flex-wrap: wrap; }
    .flex-shrink-0 { flex-shrink: 0; }
    .items-start { align-items: flex-start; }
    .items-center { align-items: center; }
    .items-end { align-items: flex-end; }
    .justify-center { justify-content: center; }
    .justify-between { justify-content: space-between; }
    
    /* ボーダー & 角丸 & 影 */
    .border-b { border-bottom: 1px solid #E5E7EB; }
    .border-t { border-top: 1px solid #E5E7EB; }
    .rounded-lg { border-radius: 0.5rem; }
    .rounded-md { border-radius: 0.375rem; }
    .rounded-full { border-radius: 9999px; }
    .shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
    .shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }

    /* 背景 */
    .bg-white { background-color: #ffffff; }
    .bg-blue-50 { background-color: #EFF6FF; }

    /* タイポグラフィ */
    .text-xs { font-size: 0.75rem; }
    .text-sm { font-size: 0.875rem; }
    .text-base { font-size: 1rem; }
    .text-lg { font-size: 1.125rem; }
    .text-xl { font-size: 1.25rem; }
    .text-2xl { font-size: 1.5rem; }
    .text-3xl { font-size: 1.875rem; }
    .text-4xl { font-size: 2.25rem; }
    .font-bold { font-weight: 700; }
    .font-normal { font-weight: 400; }
    .leading-relaxed { 
        line-height: 1.625;
        text-align: justify;
    }
    .text-center { text-align: center; }
    .text-white { color: #ffffff; } /* 白色テキスト用のクラスを追加 */

    /* その他 */
    .object-cover { object-fit: cover; }
    
    /* ロゴスタイル */
    .logo-image {
        max-width: 710px;
        width: 100%;
        height: auto;
    }

    /* SP用ナビゲーションスタイル (767px以下で適用) */
    nav ul {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3つの均等な列を作成 */
        gap: 0.5rem;
        padding: 0;
        list-style: none;
        margin: 0;
        width: 100%;
        font-size: 12px;
    }
    nav li {
        text-align: center;
    }
    .navfont {
        font-size: 0.875rem;
    }

    /* イベント概要セクションのカスタムスタイル */
    .overview-section-container {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    /* Swiper.js カスタムスタイル */
    .swiper {
        width: 100%;
        height: auto;
    }
    .swiper-slide {
        background: transparent;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .swiper-slide img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
    }
    
    /* Swiperのナビゲーションとページネーションを非表示にする */
    .swiper-button-next,
    .swiper-button-prev,
    .swiper-pagination {
        display: none;
    }

    /* フッタースタイル */
    .site-footer {
        background-color: #e10600;
        padding: 1rem 1rem; /* 上下の余白を設定 */
    }
    .footer-content {
        max-width: 1100px;
        margin: 0 auto;
        text-align: center;
    }


    /* レスポンシブスタイル (画面幅768px以上で適用) */
    @media (min-width: 768px) {
        nav {
            display: flex;
            justify-content: center;
        }
        
        nav ul {
            display: flex; /* PC表示ではgridからflexに戻す */
            gap: 0;
            width: auto;
            font-size: 0.875rem; /* PC表示では元のサイズ(14px)に戻す */
        }
        nav li {
            flex-basis: auto;
            flex-grow: 0;
        }
        .navfont {
            font-size: 1rem;
        }
        .nvlink {
            padding: 20px 10px;
        }

        .section-title {
            font-size: 1.55rem; /* 25px */
        }
        .section-title::before {
            width: 2.5rem;
            height: 1.43rem;
        }
        
        .md\:p-8 { padding: 2rem; }
        .md\:flex-row { flex-direction: row; }
        .md\:mb-0 { margin-bottom: 0; }
        .md\:text-left { text-align: left; }
        .md\:w-1\/2 { width: 50%; }
        .md\:w-30 { width: 30%; }
        .md\:w-70 { width: 70%; }
        .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

        .section-content-wrapper {
            max-width: 905px;
            margin-left: auto;
        }
        .section-content-wrapper-2 {
            max-width: 905px;
            margin: 0px auto;
        }
        .overview-section-container {
            max-width: 1100px;
            margin-left: auto;
            margin-right: auto;
            width: 100%;
        }
    }