* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
    
       html {
           width: 100%;
           overflow-x: hidden;
       }

        body {
            font-family: 'M PLUS Rounded 1c', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', sans-serif;
            line-height: 1.6;
            background-color: #006634;
            color: white; /* 必要なら文字色も調整 */
            overflow-x: hidden;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }


        /* Header */
        /* 全体のヘッダー背景色と中央寄せ */
        .header {
            background-color: #006634;
            color: #fff;
            padding: 20px 0;
            justify-content: center; /* 全体を中央に */
            text-align: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: relative; /* 調整のため */
            width: 100%; 
        }

        /* ロゴ画像の中央表示 */
        .logo-wrapper {
            text-align: center;
           }
        .logo-img {
            height: 100px;
            width: auto;
            display: inline-block;
            justify-content: center;
           }

      .logo {
            font-size: 2.5em;
            font-weight: bold;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

            @media screen and (max-width: 768px) {
            .logo-img {
                height: 42px; /* スマホ時は少し小さく */
                }
            }

            @media screen and (max-width: 768px) {
            .logo-img {
                height: 60px;
            }
            .nav-list {
                flex-direction: column;
                gap: 1em;
               }
            }
           @media screen and (max-width: 768px) {
            .logo-wrapper {
               display: flex;
               justify-content: flex-start; /* 左寄せ */
               padding-left: 1em; /* 任意：少し余白 */
             }

            .logo-img {
               margin: 0;
              }
             }

        /* メニューリストの中央揃え */
            .nav-list {
                list-style: none;
                padding: 0;
                margin: 0 auto;
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 1.5em;
                }
             .nav-list li a {
                color: white;
                text-decoration: none;
                font-weight: bold;
                font-size: 1rem;
                padding: 0.5em 0.8em;
                }

         /* お問い合せだけボタン風に */
            .contact-btn {
                background: linear-gradient(135deg, #FF8630, #fbbf24);
                padding: 2px 8px;
                border-radius: 5px;
                font-weight: bold;
                color: #92400e;
                }

            

            /* モバイル用 */
            @media screen and (max-width: 768px) {
            .nav-list {
                display: none;
                flex-direction: column;
                background: #004d00;
                position: absolute;
                top: 60px;
                right: 0;
                width: 200px;
                padding: 1em;
            }
            .nav-list.active {
                display: flex;
            }
            .hamburger {
                display: flex;
            }
            }


        /* スライドショー */
        .slider {
          position: relative;
          width: 100vw;
          height: 80vh;
          overflow: hidden;
          margin: 0 auto;
          padding: 0;
        }

        .slide {
          position: absolute;
          width: 100%;
          height: 100%;
          object-fit: cover;
          opacity: 0;
          transition: opacity 1s ease-in-out;
          border-radius: 10px;
        }

        .slide.active {
          opacity: 1;
        }

        /* スマホ対応 */
        @media screen and (max-width: 768px) {
          .slider {
            height: 50vh;
          }

          .slide {
            border-radius: 0;
          }
        }



        /* Main Content */
        main {
            padding: 0 0;
        }
        
        .section {
            background: #006634;
            color: #fff;
            margin-bottom: 30px;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }
        
        .section h2 {
            color: #fff;
            font-size: 32px;
            margin-bottom: 20px;
            border-bottom: 3px solid #006634;
            padding-bottom: 10px;
        }
        
        /* Operating Hours */
        .hours-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        
        .hours-table th,
        .hours-table td {
            border: 1px solid #fff;;
            padding: 12px;
            text-align: left;
        }
        
        .hours-table th {
            background-color: #006634;
            color: #fff;
            font-weight: bold;
        }
        
        .hours-table tr:nth-child(even) {
            background-color: #006634;
        }
        
        /* Events */
        .events-section {
            background: linear-gradient(135deg, #12A75E, #f0f8f0);
        }
        
        .event-item {
            background: #5AA86B;
            color: #fff;
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 10px;
            border-left: 5px solid #006634;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .event-title {
            font-weight: bold;
            color: #fff;
            margin-bottom: 5px;
        }

        .marquee {
          width: 100%;
          overflow: hidden;
          white-space: nowrap;
          box-sizing: border-box;
          font-size: 20px;
          animation: scrollText 10s linear infinite;
        }
        
       /* Coach Section */ 
        .coach-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 15px;
            max-width: 1100px;
            margin: 0 auto;
            padding: 0;
            box-sizing: border-box;
            }


        @media (max-width: 768px) {
            .coach-grid {
                grid-template-columns: repeat(2, 1fr); /* スマホは2列 */
               }
            }
        .coach-image {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 50%;
            margin-bottom: 10px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
            }

        .coach-card {
        /* background: #3B9873; */
            border-radius: 15px;
            padding: 10px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
            display: block;
            text-decoration: none !important;
            color: inherit;
        }

        .coach-card:hover {
            transform: translateY(-5px);
            text-decoration: none !important;
        }
        
        .coach-image {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 15px;
            border: 5px solid #006634;
        }
        
        .coach-top {
            font-size: 1.0em;
            font-weight: bold;
            color: #fff;
            margin-bottom: 5px;
            text-decoration: none !important;
        }

            /* SNSセクション全体 */
            .sns-section {
                padding: 40px 20px;
                text-align: center;
            }
            
            /* 3カラムを中央揃えで並べる */
            .sns-grid {
                display: flex;
                justify-content: center;     /* 全体を中央寄せ */
                align-items: flex-start;
                gap: 40px;                   /* 各ボックスの間隔 */
                flex-wrap: wrap;             /* スマホで折り返し */
                margin-top: 20px;
            }
            
            /* SNSボックス */
            .sns-box {
                padding: 20px;
                border-radius: 12px;
                width: 280px;                /* 固定幅で整列しやすい */
                text-align: center;
                box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            }
            
            .sns-img {
                width: 100%;
                height: auto;
                margin-top: 10px;
                border-radius: 8px;
            }



            /* 夏限定キャンペーン */
            .campaign-section {
                max-width: 900px;
                margin: 0 auto 30px;
                border-radius: 15px;
                overflow: hidden;
                box-shadow: 0 5px 20px rgba(0,0,0,0.15);
            }

            .campaign-header {
               background: linear-gradient(135deg, #fff6e9, #fdeee0); 
                text-align: center;
                padding: 30px 20px;
            }

            .campaign-title {
                color: #e6362e!important;
                font-size: 2em;
                font-weight: bold;
                margin-bottom: 15px;
            }

            .campaign-sub {
                color: #333;
                font-size: 22px!important;
                line-height: 1.7;
                margin-bottom: 20px;
            }

            .campaign-ticket-btn {
                display: inline-block;
                background: #e6362e;
                color: #fff;
                font-weight: bold;
                font-size: 1.3em;
                padding: 15px 30px;
                border-radius: 10px;
                margin-bottom: 25px;
            }

            .campaign-photo {
                width: 100%;
                max-width: 700px;
                height: auto;
                border-radius: 10px;
                display: block;
                margin: 0 auto;
                box-shadow: 0 4px 10px rgba(0,0,0,0.15);
            }

            .campaign-period {
                background: #2f6fb5;
                color: #fff;
                text-align: center;
                padding: 20px;
            }

            .campaign-period-label {
                font-size: 1em;
                margin-bottom: 8px;
            }

            .campaign-period-date {
                font-size: 1.7em;
                font-weight: bold;
                margin-bottom: 6px;
            }

            .campaign-period-time {
                font-size: 1.2em;
                font-weight: bold;
            }

            .campaign-notes {
                background: #fff;
                color: #333;
                list-style: none;
                padding: 20px 25px;
                margin: 0;
            }

            .campaign-notes li {
                padding: 6px 0;
                border-bottom: 1px dashed #ddd;
            }

            .campaign-notes li:last-child {
                border-bottom: none;
            }

            .campaign-footer-banner {
                background: #f7e017;
                text-align: center;
                padding: 20px;
            }

            .campaign-footer-text {
                color: #e6362e;
                font-size: 1.3em;
                font-weight: bold;
                margin-bottom: 8px;
            }

            .campaign-footer-store {
                color: #006634;
                font-weight: bold;
            }

            @media (max-width: 768px) {
                .campaign-title {
                    font-size: 1.5em;
                }

                .campaign-sub {
                    font-size: 1em;
                }

                .campaign-ticket-btn {
                    font-size: 1.1em;
                    padding: 12px 20px;
                }

                .campaign-period-date {
                    font-size: 1.3em;
                }
            }

            .job-section {
                text-align: center;
                padding: 10px 10px;
            }
            
            /* 真ん中に大きく表示する */
            .job-wrapper {
                display: flex;
                justify-content: center;
            }
            
            .job-box {
                width: 100%;
                max-width: 800px;   /* ← ここがポイント！画像の最大幅の親コンテナを大きくする */
                text-align: center;
            }
            
            /* 画像サイズ */
            .job-image {
                width: 100%;
                max-width: 800px;
                height: auto;
                margin: 10px auto;
                display: block;
            }
            
            @media (max-width: 768px) {
                .job-image {
                    max-width: 600px;
                    width: 90%;
                }
            }

        
        /* Footer */

        .site-footer {
            background-color: #006634;
            color: #fff;
            text-align: center;
            padding: 10px 10px;
            margin-top: -30px;
            }

            .footer-logo {
            width: 220px;
            margin-bottom: 15px;
            }

            .footer-text {
            font-size: 0.9rem;
            margin-top: 20px;
            margin-bottom: 10px;
            }

            .footer-links a {
            color: #fff;
            margin: 0 10px;
            text-decoration: none;
            font-size: 0.95rem;
            }

            .footer-links a:hover {
            text-decoration: underline;
            }

        
        
        .contact-info strong {
            color: #a7d4a7;
        }
        
        /* Responsive Design */
        @media (max-width: 768px) {
            .container {
                padding: 0 15px;
            }
            
            .logo {
                font-size: 2em;
            }
            
            .section {
                padding: 20px;
            }
            
            .coach-grid {
                grid-template-columns: 1fr;
            }
            
            .hours-table {
                font-size: 0.9em;
            }
        }
        
        /* Animations */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .section {
            animation: fadeIn 0.6s ease-out;
        }
        
        /* Highlight colors */
        .highlight {
            background: linear-gradient(135deg, #fef3c7, #fbbf24);
            padding: 2px 8px;
            border-radius: 5px;
            font-weight: bold;
            color: #92400e;
        }

        /* 追加で全体を中央寄せ */
        body {
        text-align: center;
        }
        .slider {
        text-align: left; /* ← これを追加して中央寄せの影響を防ぐ */
        margin: 1em auto;
        }

        /* テーブル内の文字中央揃え */
        .hours-table th,
        .hours-table td {
        text-align: center !important;
        }

        /* レッスン・イベント情報の中央揃え */
        .event-item {
        text-align: center;
        }

        /* フッター内のテキスト中央揃え */
        .contact-info {
        text-align: center;
        }

        .slide {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity 1s ease-in-out;
        }

       /* 幅を狭くするクラス */
        .section.narrow {
            max-width: 800px!important;
            margin: 0 auto;
        }

            /* レスポンシブ　メニューバー　*/
             .menu-toggle {
              font-size: 30px;
              cursor: pointer;
              position: fixed;
              top: 20px;
              right: 20px;
              z-index: 1001;
              color: white;
            }
            
            .mobile-menu {
              position: fixed; 
              right: -300px;
              top: 0;
              width: 300px;
              height: 100%;
              background: #006634;
              color: white;
              padding: 60px 20px;
              transition: right 0.3s ease;
              z-index: 1002;
              border-radius: 2px;
            }
            
            .mobile-menu ul {
              list-style: none;
              padding: 0;
            }
            
            .mobile-menu ul li {
              margin: 20px 0;
            }
            
            .mobile-menu ul li a {
              color: white;
              text-decoration: none;
              font-size: 1.2rem;
            }
            
            .overlay {
              position: fixed;
              top: 0;
              left: 0;
              width: 100vw;
              height: 100vh;
              background: rgba(0,0,0,0.4);
              display: none;
              z-index: 1000;
            }
            
            /* メニューが表示されてるときのクラス */
            .menu-open #mobileMenu {
              right: 0;
            }
            
            .menu-open #overlay {
              display: block;
            }
            
            
            @media screen and (min-width: 768px) {
              .menu-toggle,
              .mobile-menu,
              .overlay {
                display: none;
              }
            }
            
            /* スマホ用メニュー */
            /* ハンバーガーアイコン */
            .hamburger-menu {
              position: absolute;
              top: 20px;
              right: 20px;
              z-index: 1001;
              display: none; /* スマホ時のみ表示 */
            }
            
            .hamburger-menu img {
              width: 66px;
              height: 66px;
              cursor: pointer;
            }
            
            /* サイドメニュー */
            .side-menu {
              position: fixed;
              top: 0;
              right: -100%;
              width: 80%;
              max-width: 300px;
              height: 100%;
              background-color: #006634;
              transition: right 0.3s ease-in-out;
              z-index: 1002;
              padding: 60px 20px 20px;
              box-shadow: -3px 0 10px rgba(0, 0, 0, 0.3);
              overflow-y: auto;
            }
            
            /* ✖ボタンの位置固定 */
            .side-menu img#closeIcon {
              position: absolute;
              top: 20px;
              right: 20px;
              width: 30px;
              height: 30px;
              cursor: pointer;
            }
            
            /* メニューリスト */
            .side-menu ul {
              list-style: none;
              padding: 0;
              margin-top: 80px;
            }
            
            .side-menu li {
              margin: 20px 0;
            }
            
            .side-menu a {
              color: #fff;
              text-decoration: none;
              font-size: 20px;
            }
            
            /* オーバーレイ */
            .overlay {
              position: fixed;
              top: 0;
              left: 0;
              width: 100vw;
              height: 100vh;
              background: rgba(0,0,0,0.4);
              display: none;
              z-index: 1000;
            }
            
            /* 開いたとき */
            .menu-open #sideMenu {
              right: 0;
            }
            .menu-open #overlay {
              display: block;
            }
            
            /* スマホのみ表示 */
            @media screen and (max-width: 768px) {
              .hamburger-menu {
                display: block;
              }
              .desktop-nav {
                display: none;
              }
            }
            
            
            /* top コーチ紹介リンク */
            .coach-button-wrapper {
              width: 100%;
              display: flex;
              justify-content: center!important; /* 中央揃え */
              margin-top: 15px;
            }
            
            .coach-button {
              background: #fff;
              color: #006634;
              text-decoration: none;
              padding: 10px 30px;
              border-radius: 40px;
              font-size: 16px;
              border: 1px solid #ccc;
              transition: all 0.3s ease;
              box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }
            
            .coach-button:hover {
              background: #006634;
              color: #fff;
              border: 1px solid #fff;
            }