@media screen and (max-width: 1000px) {
    /* ==========================================================================
       【スマホ版】単体動作スタイルシート
    ========================================================================== */

    /* ===== CSS変数定義 (カラーパレット) ===== */
    :root {
        --color-primary: #FFD54F;      /* メインの明るいイエロー */
        --color-primary-dark: #FFC107; /* 少し濃いイエロー (ホバー用) */
        --color-accent: #81D4FA;       /* アクセントの水色 */
        --color-accent-dark: #4FC3F7;  /* 濃い水色 */
        --color-background: #FFFDE7;   /* 全体の背景色 (ごく薄いクリーム) */
        --color-surface: #FFFFFF;      /* カードなどの表面色 (白) */
        --color-text: #6D4C41;         /* メインテキスト (温かいブラウン) */
        --color-heading: #5D4037;      /* 見出し (濃いブラウン) */
        --color-border: #F5E9D4;       /* 境界線 */
        --font-body: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
        --font-heading: 'Kiwi Maru', serif;
    }

    /* ===== 基本設定 ===== */
    html {
        scroll-behavior: smooth;
    }

    body {
        font-family: var(--font-body);
        color: var(--color-text);
        background-color: var(--color-background);
        margin: 0;
        line-height: 1.8;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .container {
        width: 90%;
        max-width: 960px;
        margin: 0 auto;
        padding: 0 15px;
    }

    /* ===== タイポグラフィ ===== */
    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-heading);
        color: var(--color-heading);
        margin: 0 0 1rem 0;
        line-height: 1.4;
    }

    a {
        color: var(--color-primary-dark);
        text-decoration: none;
        transition: color 0.3s;
    }

    a:hover {
        color: var(--color-accent-dark);
    }

    .text-center {
        text-align: center;
    }

    .small-text {
        font-size: 0.85rem;
        color: #888;
    }

    /* ===== ヘッダー & ハンバーガーメニュー ===== */
    .header {
        background-color: var(--color-surface);
        border-bottom: 2px dashed var(--color-border);
        padding: 1rem 0;
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .header-container {
        display: flex;
        justify-content: center; /* ロゴを中央に配置するために変更 */
        align-items: center;
        position: relative;      /* メニューボタンを配置する基準として追加 */
    }

    .header-logo {
        font-family: var(--font-heading);
        font-size: 1.8rem;
        font-weight: 500;
        color: var(--color-heading);
        text-decoration: none;
    }

    /* ハンバーガーメニューボタン */
    .menu-toggle {
        display: block;
        background: transparent;
        border: none;
        padding: 0;
        cursor: pointer;
        z-index: 101;
        position: absolute;          /* 位置を固定するために追加 */
        right: 15px;                 /* 右端に配置 (コンテナの余白を考慮) */
        top: 50%;                    /* 上下中央に配置 */
        transform: translateY(-50%); /* 上下中央に配置 */
    }

    .hamburger-icon {
        display: block;
        width: 28px;
        height: 3px;
        background-color: var(--color-heading);
        border-radius: 3px;
        position: relative;
        transition: background-color 0.2s;
    }

    .hamburger-icon::before,
    .hamburger-icon::after {
        content: '';
        display: block;
        width: 28px;
        height: 3px;
        background-color: var(--color-heading);
        position: absolute;
        left: 0;
        transition: all 0.2s;
        border-radius: 3px;
    }

    .hamburger-icon::before { top: -8px; }
    .hamburger-icon::after { bottom: -8px; }

    /* ナビゲーションメニュー */
    .header-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--color-surface);
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        padding: 1rem 0;
    }
    .header-nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .header-nav ul li { width: 100%; text-align: center; }
    .header-nav ul li a {
        color: var(--color-text);
        font-weight: 700;
        font-size: 0.9rem;
        display: block;
        padding: 1rem;
        border-bottom: 1px solid var(--color-border);
    }
    .header-nav ul li:last-child a { border-bottom: none; }
    .header.nav-open .header-nav { display: block; }

    /* ===== ボタン ===== */
    .btn {
        display: inline-block;
        padding: 0.8rem 2rem;
        border-radius: 50px;
        font-weight: 700;
        text-decoration: none;
        border: 2px solid transparent;
        transition: all 0.3s ease;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    .btn-primary {
        background-color: var(--color-primary);
        color: var(--color-heading);
    }
    .btn-lg {
        font-size: 1.15rem;
        padding: 1.2rem 3rem;
    }
    .btn-secondary {
        background-color: var(--color-surface);
        color: var(--color-heading);
        border-color: var(--color-border);
    }
    .header-nav .btn {
        width: 80%;
        margin: 1rem auto 0;
    }
    .header-nav .btn-primary-outline {
        border-color: var(--color-primary);
        color: var(--color-primary-dark);
        padding: 0.5rem 1.25rem;
        box-shadow: none;
    }

    /* ===== ヒーローセクション ===== */
    .hero {
        background-image: url('../images/HP-illust.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        color: var(--color-surface);
        padding: 5rem 0;
        padding-bottom: 4rem;
        text-align: center;
    }
    .hero-title {
        color: #fff;
        font-size: 2rem; /* スマホ用に調整 */
        text-shadow: 2px 2px 5px rgba(0,0,0,0.15);
        margin-bottom: 1rem;
    }
    .hero-subtitle {
        font-size: 1.1rem;
        color: black;
        opacity: 0.9;
        margin-bottom: 3.5rem;
    }
.hero-subtitle-first{
    color: #fff;
}

    /* ===== 汎用セクション ===== */
    .section {
        padding: 4rem 0;
    }
    .section-title {
        text-align: center;
        font-size: 1.8rem; /* スマホ用に調整 */
        margin-bottom: 2rem; /* スマホ用に調整 */
        position: relative;
        padding-bottom: 1rem;
    }
    .section-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 4px;
        background-image: linear-gradient(to right, var(--color-primary) 50%, var(--color-accent) 50%);
        border-radius: 2px;
    }

    /* ===== 特徴セクション ===== */
    .features-grid {
        display: grid;
        grid-template-columns: 1fr; /* スマホ用に調整 */
        gap: 1.8rem;
    }
    .card {
        background-color: var(--color-surface);
        border: 2px solid var(--color-border);
        border-radius: 20px;
        padding: 2.5rem 2rem;
        transition: all 0.3s ease-in-out;
        text-align: center;
    }
    .card-title {
        font-size: 1.4rem;
        color: var(--color-accent-dark);
        margin-bottom: 1rem;
    }
    .card-text {
        margin: 0;
        font-size: 0.95rem;
    }

    /* ===== CTAセクション ===== */
    .cta-section {
        background-color: var(--color-surface);
        border-top: 2px dashed var(--color-border);
        border-bottom: 2px dashed var(--color-border);
    }
    .contact-info {
        margin: 2rem 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.5rem;
    }
    .contact-link {
        display: inline-block;
        background-color: var(--color-surface);
        border: 2px solid var(--color-border);
        padding: 1rem 2rem;
        border-radius: 30px;
        color: var(--color-text);
        font-weight: 700;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    /* ===== お知らせセクション ===== */
    .news-list {
        border-top: 2px dotted var(--color-border);
    }
    .news-item {
        display: flex;
        align-items: center;
        padding: 1.5rem 1rem;
        border-bottom: 2px dotted var(--color-border);
        color: var(--color-text);
        text-decoration: none;
        transition: background-color 0.3s;
        border-radius: 15px;
    }
    .news-date {
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--color-accent-dark);
        background-color: #E1F5FE;
        padding: 0.3rem 0.8rem;
        border-radius: 20px;
        margin-right: 1.5rem;
    }
    .news-title {
        margin: 0;
        flex-grow: 1;
    }
    .news-arrow {
        font-size: 1.5rem;
        color: var(--color-primary);
        transition: transform 0.3s;
    }

    /* ===== フッター ===== */
    .footer {
        background-color: var(--color-heading);
        color: var(--color-background);
        text-align: center;
        padding: 3rem 0;
        margin-top: 2rem;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
    }
    .footer-nav {
        display: flex;
        justify-content: center;
        flex-wrap: wrap; /* スマホ用に折り返し設定 */
        gap: 1.5rem;
        margin-bottom: 1rem;
    }
    .footer-nav a {
        color: var(--color-background);
        opacity: 0.8;
    }
    .copyright {
        margin: 0;
        font-size: 0.85rem;
        opacity: 0.7;
    }

    /* ===== 背景装飾 ===== */
    body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        /* 元の9個 */
        url('../images/music1.svg'),
        url('../images/music2.svg'),
        url('../images/music3.svg'),
        url('../images/music1.svg'),
        url('../images/music2.svg'),
        url('../images/music3.svg'),
        url('../images/music1.svg'),
        url('../images/music2.svg'),
        url('../images/music3.svg'),
        /* 追加の9個 */
        url('../images/music1.svg'),
        url('../images/music2.svg'),
        url('../images/music3.svg'),
        url('../images/music1.svg'),
        url('../images/music2.svg'),
        url('../images/music3.svg'),
        url('../images/music1.svg'),
        url('../images/music2.svg'),
        url('../images/music3.svg');
    background-repeat: no-repeat;
    background-size:
        /* 元の9個 */
        3%, 2.5%, 4%,
        3.5%, 2%, 3%,
        4%, 3%, 2.5%,
        /* 追加の9個 */
        2.5%, 3.5%, 2%,
        4%, 2%, 3.5%,
        3%, 4%, 2.5%;
    background-position:
        /* 元の9個 */
        10% 20%, 80% 30%, 15% 85%,
        90% 10%, 40% 55%, 65% 75%,
        5% 95%,  95% 60%, 50% 5%,
        /* 追加の9個 (再配置) */
        25% 40%, 70% 90%, 85% 45%,
        30% 70%, 5% 50%, 95% 80%,
        60% 25%, 20% 5%, 75% 15%;
    opacity: 0.3;
    z-index: -1;
}

    /* ==========================================================================
       about.html のための追加修正
    ========================================================================== */
    .info-card {
        padding: 1.5rem; /* パディングを調整 */
        width: 80%;
        margin-bottom: 1.5rem;
    }
    .map-container iframe {
        width: 100%;     /* 横幅を画面に合わせる */
        height: 300px;   /* 高さを調整 */
    }

    /* ==========================================================================
    about.html のための追加修正（修正後）
    ========================================================================== */
    /* 汎用info-cardのスタイルを再定義し、中央揃えと適切なマージンを設定 */
    .section .info-card {
    padding: 1.5rem;
    width: 85%;
    margin: 0 auto 1.5rem auto; /* 上下左右のマージンを調整し中央揃えに */
    height: auto; /* heightプロパティをリセット */
    }

    /* グリッドレイアウト内のカードは、マージンをリセットしてgapで間隔を管理 */
    .about-grid .info-card {
    width: auto;
    margin: 0;
    }

    .map-container iframe {
    width: 100%;     /* 横幅を画面に合わせる */
    height: 300px;   /* 高さを調整 */
    }

    /* ==========================================================================
    contact.html のための追加修正（新規追加）
    ========================================================================== */
    /* 長いメールアドレスがはみ出ないように強制的に改行させる */
    .contact-card .contact-info-large {
    overflow-wrap: break-word;
    word-wrap: break-word; 
    }

    .header-nav,.header-nav * {
        all:initial;
    }
    .header-nav .btn-primary-outline:hover{
        background-color:initial;
        color:var(--color-primary-dark);
    }

    .header-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #ffffff;
        box-shadow: 0 3px 6px rgba(0,0,0,0.1);
        z-index: 1000;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
    }

    .header-nav.active {
        display: flex;
    }

    .header-nav ul{
        width: 100%;
        list-style: none;
        flex-direction: column;
        margin: 0 auto;
    }

    .header-nav ul li{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    .header-nav ul li a{
        padding: 12px 20px!important;
        text-align: center;
        border-bottom: 1px solid #f0f0f0;
        font-size: 1em;
        text-decoration: none;
        color: var(--color-primary-dark);
        margin: auto auto!important;
        border: none;
        /* padding: 12px 20px; */
    }

    .hamburger-icon {
        display: block;
        width: 24px;
        height: 2px;
        background-color: var(--color-primary-dark); /* アイコンの色 (ダークグリーン) */
        position: relative;
        transition: background-color 0.2s ease-in-out;
    }

    .hamburger-icon::before,
    .hamburger-icon::after {
        content: '';
        display: block;
        width: 24px;
        height: 2px;
        background-color: var(--color-primary-dark); /* アイコンの色 */
        position: absolute;
        left: 0;
        transition: transform 0.2s ease-in-out, top 0.2s ease-in-out, bottom 0.2s ease-in-out;
    }

    .hamburger-icon::before {
        top: -7px; /* 上の線の位置 */
    }

    .hamburger-icon::after {
        bottom: -7px; /* 下の線の位置 */
    }

    /* メニュー展開時のトグルボタンのスタイル (X印に変化) */
    .menu-toggle.active .hamburger-icon {
        background-color: transparent; /* 中央の線を消す */
    }

    .menu-toggle.active .hamburger-icon::before {
        top: 0;
        transform: rotate(45deg);
    }

    .menu-toggle.active .hamburger-icon::after {
        bottom: 0; /* or top: 0; */
        transform: rotate(-45deg);
    }

    .pc-text{
        display: none;
    }

    .sp-text{
        display: inline;
    }
}