/* スマートフォン対応 */
@media (max-width: 1200px) {
    /*00 baseメイン*/
    body,html {
        width: 100vw;
        padding: 0 ;
        margin: 0;
    }
    h2,h3{
        margin: 20px 0;
        text-align: center;
    }
    section {
        margin-bottom: 10px; /* 各セクションの上下に余白を追加 */
    }

    .mainContent {
        width: 100%;
        padding: 0 ;
        margin: 0;
    }
    .container {
        max-width: 100%;
        padding: 0 ;
        margin: 0;
        width: 100%;
        text-align: left;
    }
    /*メイン画像*/
    .main-image {
        position: relative;
        width: 100%;
        max-width: 100%;
        height: 100vh;
        margin: 0;
        padding: 0;
        margin-bottom: 40px;
        display: flex;
        align-items: center; 
    }
    .main-image img {
        width: 100%;
        max-width: 100%;
        border-radius: 0px;
        margin: 0;
        padding: 0;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        object-fit: cover;
    }
    /*メイン画像上のメッセージ*/
    .overlay-title {
        font-size: 1.5rem;
    }
    .overlay-description {
        font-size: 1.2rem;
    }
    .overlay-button {
        padding: 8px 20px;
        font-size: 1.2rem;
    }
    .overlay-content {
        margin: 0; 
        margin-top: 10%;
        width: 80%; 
    }
    /* グリッドメニューを非表示 */
    .grid-container {
        width: 90%;
        display: none;
    }
    .content-section {
        width: 80%;      /* 幅を100%に設定 */
        max-width: none;  /* 最大幅を解除 */
        margin: 0 10%;
        padding: 0;
    }
    .quote-section {
        margin: 20px 0;
        padding: 15px 20px;
        background-color: #f9f9f9;
        border-left: 5px solid #7b7b7b;
        font-style: italic;
    }
    .quote-section blockquote {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
        color: #333;
    }
    .quote-section p {
        margin: 0 0 10px;
        line-height: 1.6;
    }
    .quote-section p:last-child {
        margin-bottom: 0;
    }
    .global-menu ul {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: #8bd321;
        position: absolute;
        top: 60px;
        left: 0;
    }
    .global-menu ul.nav-menu_visible {
        display: flex;
    }
    .nav-toggle {
        display: block;
        background-color: #8bd321;
        padding: 10px;
        cursor: pointer;
        color: white;
        text-align: center;
        font-weight: bold;
        border: none;
        width: 100%;
    }

    .nav-toggle:hover {
        background-color: #8bd321;
    }


    .main-content {
        width: 100%;
    }

    .side-menu {
        width: 100%;
        margin-top: 20px;
    }

    .grid-item {
        width: 100%; /* 幅を100%にして、1列に配置 */
        margin-bottom: 20px; /* 各アイテムの間に適切な余白を設定 */
    }
    .nav-toggle {
        display: flex;
        justify-content: flex-end;
        padding: 10px;
        background-color: #8bd321;
        border: none;
        cursor: pointer;
        width: 100%;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1001;
        position: relative;
    }

    .menu-icon {
        font-size: 24px;
        color: white;
    }

    .close-icon {
        font-size: 24px;
        color: white;
        display: none;
    }

    .nav-toggle a {
        color: #ffffff; /* リンクの文字色を白に設定 */
        text-decoration: none;
    }  

    .global-menu {
        position: fixed;
        top: 0;
        width: 100%;
        margin: 0;
        background-color: #ffffff; /* 背景を白に設定 */
        z-index: 1000;
    }

    .global-menu ul {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: #8bd321;
        position: absolute;
        top: 50px; 
        left: 0;
        z-index: 1000;
    }

    .global-menu ul li {
        position: relative;
    }


    .global-menu ul li a {
        color: #ffffff; /* 文字をマゼンダに設定 */
        text-decoration: none;
        font-weight: bold;
    }

    .submenu {
        display: none;
        flex-direction: column;
        background-color: #8bd321; /* 背景色を反転 */
        padding: 0;
        margin: 0;
    }
    
    .submenu.submenu-visible {
        display: flex; /* .submenu-visibleクラスが付与された時に表示 */
    }

    .submenu li {
        flex: 1; /* 各項目の高さを均等に */
        display: flex;
        align-items: center; /* 垂直方向に中央揃え */
    }

    .submenu li a {
        color: #ffffff; /* 文字色を反転 */
        padding: 10px 20px;
        text-decoration: none;
        width: 100%;
        text-align: left;
    }

    .submenu li a:hover {
        background-color: #ffffff;
        color: #8bd321;
    }
    
    .submenu-visible {
        display: flex;
        flex-direction: column;
    }

    .global-menu ul.nav-menu_visible {
        display: flex;
    }

    .nav-toggle.menu-open .menu-icon {
        display: none;
    }

    .nav-toggle.menu-open .close-icon {
        display: block;
    }

    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); /* 透過度50%の黒色 */
        z-index: 999; /* 罰ボタンやサブメニューの下に表示 */
        display: none; /* 初期状態は非表示 */
    }
    
    .submenu-visible + .overlay {
        display: block; /* サブメニューが表示されたときにオーバーレイを表示 */
    }

    .global-menu ul li:hover .submenu {
        display: block; /* サブメニュー上でも表示を維持 */
    }

    .global-menu ul li:not(:hover) .submenu {
        display: none; /* カーソルが外れたら非表示にする */
    }

    .submenu li {
        padding: 10px 0;
    }
    
    .submenu li a {
        color: #ff00ff;
        text-decoration: none;
        padding: 10px 20px;
        display: block;
    }
    
    .submenu li a:hover {
        background-color: #ffe4e1;
        color: white;
    }
        .plan-comparison {
            grid-template-columns: 1fr; /* スマートフォンでは1列表示 */
        }
    
    .header-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;
        padding: 0px 20px;
        width: 90%;
        position: relative;
        margin:10px 0;
    }

    .site-header {
        width: 100vw;
        height: 60px;
        margin: 0;
        padding: 0;  /* スマホ時は40pxに */
    }    
    .site-logo {
        margin: 0;
        padding: 0;
        font-size: 1rem;
    }
        
    .nav-link {
        padding: 3px 10px;
        font-size: 0.8rem;
    }

    .site-logo {
        margin: 0;
        font-size: 1.1rem;  /* フォントサイズも少し大きく */
        font-weight: bold;
        color: #8bd321;
    }
    
    .nav-link {
        padding: 6px 12px;
        font-size: 0.9rem;
    }

    .main-image {
        margin-top: 15px;  /* スマホ時は少し小さめの余白 */
    }

    /* メイントレーナー*/
    .trainer-container {
        display: grid; /* グリッドレイアウトを使用 */
        grid-template-columns: repeat(1, 1fr); /* 3列に設定 */
        width: 90%;
        gap: 0; /* 各カラムの間にスペースを追加 */
        margin: 20px 5%; /* 上下のマージンを追加 */
    }
    .team-member {
        border: 1px solid #ccc; /* ボーダーを追加 */
        border-radius: 8px; /* 角を丸くする */
        padding: 15px; /* 内側の余白を追加 */
        text-align: center; /* テキストを中央揃え */
        background-color: #f9f9f9; /* 背景色を追加 */
        transition: box-shadow 0.3s; /* ホバー時の影のトランジション */
    }
    /* ハンバーガーメニューボタン */
    .hamburger-menu {
        display: block;
        position: fixed;
        top: -5px;
        right: 15px;
        width: 30px;
        height: 30px;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 1001;
    }
    .hamburger-menu span {
        display: block;
        width: 100%;
        height: 2px;
        background-color: #333;
        margin: 6px 0;
        transition: 0.4s;
    }
    /* ハンバーガーメニュー開時のアニメーション */
    .hamburger-menu.active span:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 6px);
    }
    .hamburger-menu.active span:nth-child(2) {
        opacity: 0;
    }
    .hamburger-menu.active span:nth-child(3) {
        transform: rotate(45deg) translate(-5px, -6px);
    }
    /* モバイルメニュー */
    .mobile-menu {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.98);
        z-index: 1000;
        padding: 60px 20px 20px;
        overflow-y: auto;
    }
    .mobile-menu.active {
        display: block;
    }
    .mobile-nav-item {
        display: flex;
        align-items: center;
        padding: 15px 0;
        text-decoration: none;
        color: #333;
        border-bottom: 1px solid #eee;
    }
    .mobile-nav-number {
        font-size: 1.2rem;
        font-weight: bold;
        color: #8bd321;
        margin-right: 15px;
        min-width: 30px;
    }
    .mobile-nav-title {
        font-size: 1rem;
        font-weight: 500;
    }
    .header-nav .nav-link {
        display: none;  /* スマホではヘッダーのホームに戻るを非表示 */
    }
    .hamburger-menu {
        display: block;
        background: none;
        border: none;
        width: 30px;      /* 幅を広げる */
        height: 24px;     /* 高さを調整 */
        position: relative;
        cursor: pointer;
        padding: 0;
        margin-left: 10px;  /* ロゴとの間隔 */
    }
    
    .hamburger-menu span {
        display: block;
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: #333;
        border-radius: 2px;  /* 線を少し丸く */
        transition: all 0.3s ease;  /* アニメーションをスムーズに */
    }
    
    .hamburger-menu span:nth-child(1) {
        top: 0;
    }
    
    .hamburger-menu span:nth-child(2) {
        top: 11px;  /* 中央の線の位置を調整 */
    }
    
    .hamburger-menu span:nth-child(3) {
        top: 22px;  /* 下の線の位置を調整 */
    }
    
    /* メニューが開いているときの状態 */
    .hamburger-menu.active span:nth-child(1) {
    transform: translateY(11px) rotate(-45deg);
    }
    .hamburger-menu.active span:nth-child(2) {
        opacity: 0;
    }
    .hamburger-menu.active span:nth-child(3) {
        transform: translateY(-11px) rotate(45deg);
    }
    .mobile-menu {
        display: none;
        position: fixed;
        top: 50px;  /* ヘッダーの高さに合わせる */
        left: 0;
        width: 100%;
        height: calc(100vh - 50px);  /* ヘッダーの高さを引く */
        background: white;
        z-index: 999;
        overflow-y: auto;
    }
    
    .mobile-menu.active {
        display: block;
    }

    .header-nav .nav-link {
        display: none;  /* スマホではヘッダーのホームに戻るを非表示 */
    }
        
    .hamburger-menu {
        display: block;
        background: none;
        border: none;
        width: 30px;      /* 幅を広げる */
        height: 24px;     /* 高さを調整 */
        position: relative;
        cursor: pointer;
        padding: 0;
        margin-left: 10px;  /* ロゴとの間隔 */
    }
        
    .hamburger-menu span {
        display: block;
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: #333;
        border-radius: 2px;  /* 線を少し丸く */
        transition: all 0.3s ease;  /* アニメーションをスムーズに */
    }
        
    .hamburger-menu span:nth-child(1) {
        top: 0;
    }
        
    .hamburger-menu span:nth-child(2) {
        top: 11px;  /* 中央の線の位置を調整 */
    }
        
    .hamburger-menu span:nth-child(3) {
        top: 22px;  /* 下の線の位置を調整 */
    }
        
    /* メニューが開いているときの状態 */
    .hamburger-menu.active span:nth-child(1) {
        transform: translateY(11px) rotate(-45deg);
    }
        
    .hamburger-menu.active span:nth-child(2) {
        opacity: 0;
    }
        
    .hamburger-menu.active span:nth-child(3) {
        transform: translateY(-11px) rotate(45deg);
    }
        
    .mobile-menu {
        display: none;
        position: fixed;
        top: 50px;  /* ヘッダーの高さに合わせる */
        left: 0;
        width: 100%;
        height: calc(100vh - 50px);  /* ヘッダーの高さを引く */
        background: white;
        z-index: 999;
        overflow-y: auto;
    }
        
    .mobile-menu.active {
        display: block;
    }
    .overlay-button {
        padding: 12px 30px;
        font-size: 1rem;    
    }

    /* 01会社紹介 */
    .company-table {
        width: 100%;
        max-width: 1200px;
        margin: 0;
        border-collapse: collapse;
    }

    .company-row {
        justify-content: space-between;
        padding: 10px 0;
        border-bottom: 1px solid #ddd;
        text-align: left;
    }

    .company-item {
        font-weight: bold;
        font-size: 19px;
        text-align: left;
        color:  #2c2c2c;
    }

    .company-content {
        text-align: left;
        color:  #2c2c2c;
        font-size: 19px;
    }

    .company-content p {
        padding: 0 20px;
        margin: 0 ;
        line-height: 25px;
    }

    .company-attention{
        text-align: left;
        width: 80%;
        font-size: 16px;
    }

    /*事業紹介*/
    /*健康とは？*/
    .company-introduction {
        max-width: 100%;  /* 最大幅を80%に設定 */
        text-align: left;
        margin: 0;  /* 中央揃え */
        line-height: 1.6;  /* 行間を調整 */
        font-size: 1rem;  /* フォントサイズを調整 */
        color: #333;  /* テキストの色を調整 */
    }
    /* 02健康経営 */


    
    /* 03サービス */
    .service-container {
        display: block; 
        align-items: center; /* 垂直方向に中央揃え */
        gap: 0; /* 要素間の隙間 */
        margin: 0; /* 上下のマージン */
        padding: 0;
    }

    .service-item-image {
        width: 100%; /* 幅を100%に設定 */
        max-width: 100%; /* 最大幅を設定 */
        height: auto; /* 高さは自動 */
        border-radius: 0; /* 角を丸くする */
    }
    .benefits-table {
        width: 100%;
        border-collapse: collapse;
        margin: 20px 0;
    }
    .benefits-table th, .benefits-table td {
        border: 1px solid #ddd;
        padding: 12px;
        text-align: left;
    }
    .benefits-table th {
        background-color: #f2f2f2;
        font-weight: bold;
    }

    /* 03導入プラン */
    /*ご利用の流れ*/
    .steps-container {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex; /* 追加: フレックスボックスを使用 */
        flex-direction: column; /* 追加: 縦に並べる */
    }

    .step-item {
        width: 100%;
        height: auto; 
        margin: 20px 0;
        padding: 0;
        background-color: #ffffff;
        border: solid 1px #8bd321;
        border-radius: 10px;
    }

    .step-item:last-child {
        width: 100%;
        height: auto; 
        margin: 20px 0;
        padding: 0;
        background-color: #ffffff;
        border: solid 1px #8bd321;
        border-radius: 10px;
    }
    .step-number {
        position: absolute;
        top: -20px;
        left: 45%;
        background-color: #8bd321;
        color: #ffffff;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: bold;
    }
    .step-image {
        width: 90%;
        height: 150px;
        margin: 20px 5%;
        padding: 0; 
        margin-bottom: 10px;
        border-radius: 10px;
        object-fit: cover;
    }
    .step-title {
        font-size: 16px;
        font-weight: bold;
        color: #333;
        margin: 10px 0 5px;
        text-align: left;
    }

    .step-description {
        width: 100%;
        padding: 10px;
        margin: 0;
        line-height: 18px;
        font-size: 15px;
        color: #666;
        text-align: left;
    }
    .step-description li {
        padding: 0 10px;
        text-align: left;
    }

    /*04参考プランと参考料金*/
    .table-container {
        width: 100%; /* コンテナの幅を100%に設定 */
        overflow-x: auto; /* 横スクロールを可能にする */
        -webkit-overflow-scrolling: touch; /* iOSデバイスでのスムーズなスクロールを有効にする */
    }
    
    #price_plan_table {
        width: 1200px; /* テーブルの幅を固定値にする例。必要に応じて変更 */
        margin: 50px auto; /* 中央寄せに調整 */
        border-collapse: collapse;
    }
    
    #price_plan_table, .price_plan {
        border: 1px solid rgb(255, 255, 255);
    }
    
    th.price_plan, td.price_plan {
        text-align: center;
        padding: 8px;
        background-color: #8bd321; /* thの背景色 */
        color: #ffffff;
        font-weight: bold; /* ヘッダーのフォントを太く */
    }
    
    td.price_plan {
        background-color: #ebf1ee; /* tdの軽い背景色を追加 */
        font-weight: normal;
        color: #333333;
    }
    

    /*プランの種類*/
    .plans-container {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex; /* 追加: フレックスボックスを使用 */
        flex-direction: column; /* 追加: 縦に並べる */
    }

    .plans-item {
        width: 100%;
        height: auto; 
        margin: 20px 0;
        padding: 0;
        background-color: #ffffff;
        border: none;
        border-radius: 10px;
    }

    .plans-item:last-child {
        width: 100%;
        height: auto; 
        margin: 20px 0;
        padding: 0;
        background-color: #ffffff;
        border: none;
        border-radius: 10px;
    }
    .plans-number {
        position: absolute;
        top: -20px;
        left: 45%;
        background-color: #8bd321;
        color: #ffffff;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: bold;
    }
    .plans-image {
        width: 90%;
        height: 150px;
        margin: 20px 5%;
        padding: 0; 
        margin-bottom: 10px;
        border-radius: 10px;
        object-fit: cover;
    }
    .plans-title {
        font-size: 16px;
        font-weight: bold;
        color: #333;
        margin: 10px 0 5px;
        text-align: left;
    }

    .plans-description {
        width: 100%;
        padding: 10px;
        margin: 0;
        line-height: 18px;
        font-size: 15px;
        color: #666;
        text-align: left;
    }
    .plans-description li {
        padding: 0 10px;
        text-align: left;
    }


    /*05SanitasLab認定トレーナー紹介 06導入事例*/
    .case-studies-container {
        display: block;
        width: 90%;
        padding: 0 5%;
        margin: 0;
        height: auto;
    }
    .case-studies-container > :nth-child(2n){
        margin-left: 0px;
    }
    .case-studies-container > :nth-child(n+3){
        margin-top: 0px;
    }

    .case-study-item {
        display: block;
        text-align: center;
        align-items: center;
        width: 100%;
        height: auto;
        padding: 10px 0;
        margin: 15px 0;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0,0,0,.2);
        font-size: 16px;
    }

    .case-study-image {
        text-align: center;
        border-radius: 50%;
        max-width: 200px; 
        height: auto; 
        margin:0; 
    }

    .case-study-item-content {
        margin: 0; 
        width: 90%; 
        height:auto;
        margin:0 5%; 
    }

    .case-study-item h3 {
        margin: 0; /* タイトルのマージンをリセット */
        width: 100%; 
        height:auto;
    }

    .case-study-item p {
        margin: 5px 0 0; /* 説明のマージンを設定 */
        width: 100%; 
        height:auto;
        border-bottom: solid 1px #333;
    } 

    /*06Q&A*/
    .faq-question {
        text-align: left;
        padding-left: 10px;
        position: relative; /* 擬似要素を相対的に配置するために必要 */
        padding-right: 20px; /* 三角形のスペースを確保 */
    }
        
    .faq-question::after {
        content: ""; /* 擬似要素の内容を空に設定 */
        position: absolute; /* 絶対位置で配置 */
        right: 0; /* 右端に配置 */
        top: 50%; /* 垂直中央に配置 */
        transform: translateY(-50%); /* 垂直中央に調整 */
        border-left: 5px solid transparent; /* 左側の透明なボーダー */
        border-right: 5px solid transparent; /* 右側の透明なボーダー */
        border-top: 10px solid #8bd321;/* 上側のボーダーを黒に設定（下三角形） */
        width: 0; /* 幅は0に設定 */
        height: 0; /* 高さは0に設定 */
    }
    .faq-item {
        border-bottom: 1px solid #ccc; /* 薄い線で区切る */
        padding: 10px 0; /* 上下の余白 */
    }
        
    .faq-answer {
        display: none; /* 初期状態で非表示 */
        margin-top: 5px; /* 上の余白 */
        padding-left: 10px;
    }
    .faq-button-container {
        margin-top: 30px;
        padding: 10px 0;
        margin-bottom: 25px;
        text-align: center; /* 子要素を中央に配置 */
    }
    .faq-button {
        background-color: #8bd321;
        color: white;
        border: none;
        padding: 12px 24px;
        margin-bottom: 20px;
        cursor: pointer;
        border-radius: 5px;
        font-size: 19px;
        transition: background-color 0.3s;
    }
    .faq-button:hover {
        background-color: #ffffff;
        color: #8bd321;
        border: none;
        padding: 12px 24px;
        cursor: pointer;
        border-radius: 5px;
        border: solid 2px #8bd321;
        font-size: 19px;
        transition: background-color 0.3s;
    }

    /*予約問合せ*/
    .contact-container{
        background-color: #ffffff;
        padding: 30px;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        max-width: 600px;
        width: 70%;
        margin: 40px auto;
        margin-top: 50px;
    }

    .form-group  {
        font-size: 16px;
    }

    /* Ipad(800pxから1200px)の表示調整*/
    @media (min-width: 800px) {
        /*00:画像上のメッセージ*/
        .overlay-content {
            left: 10%;  
            margin-top: 200px;
            width: 75%;  
        }
        /*03:導入プラン*/
        .step-number {
            position: absolute;
            top: -30px;
            left: -30px;
            background-color: #8bd321;
            color: #ffffff;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            font-weight: bold;
        }
        .step-image {
            width: 100%;
            height: 200px;
            margin: 0;
            padding: 0; 
            margin-bottom: 10px;
            border-radius: 10px;
            object-fit: cover;
        }
        .step-image img{
            width: 100%;
            height: 200px;
            margin: 0;
            padding: 0; 
        }

        /*05SanitasLab認定トレーナー紹介 06導入事例*/
        .case-studies-container {
            margin-left: auto;
            margin-right: auto;
            width: 90%;
            height: auto;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: flex-start;
        }
        .case-studies-container > :nth-child(2n){
            margin-left: 20px;
        }
        .case-studies-container > :nth-child(n+3){
            margin-top: 20px;
        }

        .case-study-item {
            display: flex; /* フレックスボックスを使用 */
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: center; /* 垂直方向に中央揃え */
            width: calc((100% - 20px * 1) / 2);
            height: auto;
            padding: 10px 0;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,.2);
            font-size: 16px;
        }

        .case-study-image {
            border-radius: 50%;
            width: 100%; 
            max-width: 100%; 
            height: auto; /* 高さを自動調整 */
            margin:0 ; /* 画像とテキストの間にスペースを追加 */
        }

        .case-study-item-content {
            width: 90%; 
            height:auto;
            margin:0 5%; 
        }

        .case-study-item h3 {
            margin: 0; /* タイトルのマージンをリセット */
            width: 100%; 
            height:auto;
        }


        .case-study-item p {
            margin: 5px 0 0; /* 説明のマージンを設定 */
            width: 100%; 
            height:auto;
            border-bottom: solid 1px #333;
        }
    }
}