body {
    width: 100%;
    margin: 0 auto;
    max-width: 980px; /* bodyの最大幅はlp-containerと合わせるか、全体を包むラッパーを設けて調整 */
    margin-bottom: 30px;
}

img {
    width: 100%;
    vertical-align: bottom;
}

/*PCルール*/
.pc {
    position: relative;
}
.d1 {
    position: absolute;
    width: 27%;
    left: 25%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    top: 93%;
}
.d2 {
    position: absolute;
    width: 27%;
    left: 76%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top: 93%;
}
.d3 {
    position: absolute;
    width: 27%;
    left: 26%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top: 28%;
}
.d4 {
    position: absolute;
    width:27%;
    left: 74%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top:28%;
}
.d5 {
    position: absolute;
    width:27%;
    left: 26%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top: 60%;
}
.d6 {
    position: absolute;
    width:27%;
    left: 74%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top: 60%;
}

.d7 {
    position: absolute;
    width:27%;
    left: 26%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top: 92%;
}
.d8 {
    position: absolute;
    width:27%;
    left: 74%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top: 92%;
}
.d9 {
    position: absolute;
    width:27%;
    left: 26%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top: 30%;
}
.d10 {
    position: absolute;
    width:27%;
    left: 72%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top: 30%;
}
.d11 {
    position: absolute;
    width:27%;
    left: 26%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top: 61%;
}
.d12 {
    position: absolute;
    width:27%;
    left: 29%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top: 42%;
}
.d13 {
    position: absolute;
    width:27%;
    left: 74%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top: 42%;
}
.d14 {
    position: absolute;
    width:27%;
    left: 28%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top: 65%;
}
.d15 {
    position: absolute;
    width:27%;
    left: 75%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top:65%;
}

.d16 {
    position: absolute;
    width:27%;
    left: 27%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top:41%;
}

.d17 {
    position: absolute;
    width:27%;
    left: 75%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top:41%;
}

.d18 {
    position: absolute;
    width:27%;
    left: 27%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top:82%;
}

.d19 {
    position: absolute;
    width:27%;
    left: 72%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top:61%;
}

.d20 {
    position: absolute;
    width:27%;
    left: 26%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top:92%;
}
.d21 {
    position: absolute;
    width: 27%;
    left: 72%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top: 92%;
}

.d22 {
    position: absolute;
    width:25%;
    left: 29%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top:84%;
}

.d23 {
    position: absolute;
    width:25%;
    left: 75%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top:65%;
}
.d24 {
    position: absolute;
    width:25%;
    left: 75%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top:65%;
}
.d25 {
    position: absolute;
    width:25%;
    left: 75%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top:65%;
}



/*spルール*/
.phone {
    position: relative;
}
.d31 {
    position: absolute;
    width: 27%;
    left: 25%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    top: 94%;
}
.d32 {
    position: absolute;
    width: 27%;
    left: 76%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top: 94%;
}
.d23 {
    position: absolute;
    width: 25%;
    left: 27%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top:36.5%;
}
.d34 {
    position: absolute;
    width:25%;
    left: 77%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top:36.5%;
}
.d35 {
    position: absolute;
    width:25%;
    left: 27%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top: 45%;
}
.d36 {
    position: absolute;
    width:25%;
    left: 77%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
    top: 45%;
}


/* LPコンテナの共通スタイル */
.lp-container {
    max-width: 980px; /* PC版の最大幅と合わせる */
    width: 100%; /* 親要素の幅いっぱいに広げる */
    margin: 0 auto; /* 上下の余白なし、左右中央寄せ */
    background-color: #ffffff; /* LPコンテナの背景色を白に統一 */
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    padding: 0; /* LPコンテナ自体のパディングを0に設定 */
}

h1 {
    display: flex; /* h1をFlexコンテナにする */
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
    color: #2c3e50;
    margin-bottom: 40px;
    font-size: 2.5em; /* テキストがある場合に適用 */
    padding-top: 30px; /* LPコンテナのパディング削除に伴い、上部に余白を設ける */
}

h1 img {
    max-width: 100%; /* 画像がh1の幅を超えないように */
    height: auto; /* 縦横比を維持 */
    display: block; /* 画像の表示形式をブロック要素にして余計な余白をなくす */
}

/* タブのボタンを囲む部分 */
.tab-buttons {
    display: flex; /* ボタンを横に並べる */
    justify-content: center; /* ボタンを中央に配置 */
    margin-bottom: 25px;
    border-bottom: 2px solid #eee;
    padding: 0 30px; /* 上下0、左右30px (PC版デフォルト) */
}

/* 個々のタブボタン */
.tab-button {
    padding: 15px 25px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-bottom: none; /* アクティブなタブと隙間ができないように */
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    color: #555;
    transition: background-color 0.3s ease, color 0.3s ease;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    margin: 0 2px;
}

.tab-button:hover {
    background-color: #e0e0e0;
    color: #333;
}

/* 選択されているタブのボタンのスタイル */
/* 各タブに異なるアクティブな色を設定 */
.tab-button.active {
    color: white;
    position: relative;
    z-index: 1;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

/* 柔整一般 */
.tab-button[data-tab="tab1"].active {
    background-color: #177ce7b2; /* 青 */
    border-color: #177ce7b2;
}
/* スポーツ */
.tab-button[data-tab="tab2"].active {
    background-color: #43435e; /* 緑 */
    border-color: #43435e;
}
/* ジュニア */
.tab-button[data-tab="tab3"].active {
    background-color: #ffc107; /* 黄色 */
    border-color: #ffc107;
    color: #333; /* 黄色に合わせた文字色 */
}
/* フェムケア */
.tab-button[data-tab="tab4"].active {
    background-color: #e45d8ac2; /* 赤 */
    border-color: #e45d8ac2;
}
/* その他 */
.tab-button[data-tab="tab5"].active {
    background-color: #bebebe; /* 紫 */
    border-color: #bebebe;
}

/* アクティブなタブボタンの下線 */
.tab-button.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px; /* タブコンテンツとの隙間を埋めるため */
    height: 2px;
    background-color: inherit; /* 親要素（tab-button.active）の背景色を継承 */
}

/* 各コンテンツの中身 */
.tab-content {
    padding: 0 30px; /* LPコンテナのpadding削除に伴い、左右にパディングを追加 (PC版デフォルト) */
    border: 1px solid #ddd;
    border-top: none; /* タブボタンとの隙間を埋めるため */
    background-color: #ffffff; /* すべてのタブコンテンツの背景色を白に統一 */
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    display: none; /* 最初はすべてのコンテンツを非表示 */
    animation: fadeIn 0.5s ease-out; /* フェードインアニメーション */
    overflow: hidden; /* 画像がはみ出さないように */
    position: relative; /* 子要素の絶対配置の基準にする */
    transition: background-color 0.5s ease; /* 背景色切り替えを滑らかに */
    max-width: 920px; /* コンテンツの最大幅を設定 (tab-buttonsの980pxより少し小さく調整) */
    margin: 0 auto; /* 左右マージンを自動調整して中央配置 */
}

/* 選択されているコンテンツだけを表示する */
.tab-content.active {
    display: block;
    justify-content: center;
}

/* フェードインのアニメーション */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* デザイン画像自体のスタイル */
.tab-content img {
    width: 100%; /* 親要素の幅いっぱいに表示 */
    height: auto; /* 縦横比を保つ */
    display: block; /* 余白が出ないように */
    border-radius: 8px; /* 角を丸くする（好みで調整） */
}

/* 画像の下にボタンやテキストを配置する場合のスタイル */
.content-overlay {
    padding: 25px 0; /* 左右のパディングはtab-contentで指定済みなので0に (PC版デフォルト) */
    text-align: center;
}

.content-overlay h2 {
    color: #007bff;
    margin-top: 0;
    font-size: 1.8em;
    border-bottom: 2px dashed #e0f0ff;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.btn-call-to-action {
    display: inline-block;
    background-color: #28a745; /* 緑色 */
    color: white;
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 20px;
    transition: background-color 0.3s ease;
}

.btn-call-to-action:hover {
    background-color: #218838;
}

footer {
    text-align: center;
    margin-top: 60px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    color: #777;
    font-size: 0.9em;
}

/* カルーセル全体のコンテナ */
.carousel-container {
    position: relative;
    /* lp-containerと幅を揃える */
    width: 100%;
    max-width: 980px; /* lp-containerのmax-widthと合わせる */
    margin: 20px auto;
    overflow: hidden; /* カルーセル本体の表示領域は常にhiddenに */
    border-radius: 0%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    /* カルーセル内のスライドが見切れるように調整 */
    padding: 0 50px; /* 左右にパディングを追加して、スライドの一部が見えるようにする */
    box-sizing: border-box; /* paddingをwidthに含める */
}


/* スライドを横に並べるインナーコンテナ */
.carousel-inner {
    display: flex;
    transition: transform 0.5s ease;
    /* 無限ループで瞬時に移動する際にトランジションを一時的に無効にするための設定 */
    will-change: transform; /* アニメーションのパフォーマンス改善 */
}

/* 各スライドのスタイル */
.carousel-slide {
    flex-shrink: 0;
    width: calc(100% - 100px); /* carousel-containerのpadding分を引いて、メインスライドが中央にくるように調整 */
    /* 計算例: 980px (max-width) - 100px (左右padding 50px * 2) = 880px。その幅にスライドが収まる */
    margin: 0 5px; /* スライド間の隙間 */
    box-sizing: border-box; /* パディングをwidthに含める */
}


/* カルーセル内の画像 */
.carousel-slide img {
    width: 100%;
    display: block;
    vertical-align: bottom;
}

/* ナビゲーションボタン */
.carousel-prev,
.carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 24px;
    z-index: 10;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.carousel-prev {
    left: 10px; /* carousel-containerのpadding外に配置 */
}

.carousel-next {
    right: 10px; /* carousel-containerのpadding外に配置 */
}

.carousel-prev:hover,
.carousel-next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* 初期状態ではPC用・SP用テキスト両方を非表示にする */
.tab-button .pc-text,
.tab-button .sp-text {
    display: none;
}

/* PC画面サイズではPC用テキストを表示し、スマホ用テキストを非表示にする */
@media screen and (min-width: 1081px) {
    .tab-button .pc-text {
        display: inline;
    }
    .tab-button .sp-text {
        display: none;
    }
}

/* スマホ向け*/
@media screen and (max-width:1080px) {
    /* スマホ画面サイズでは、PC用のテキストを非表示にし、スマホ用のテキストを表示する */
    .tab-button .pc-text {
        display: none; /* PC用テキストを非表示 */
    }

    .pc {
        display: none; /* PC用コンテンツを非表示 */
    }

    .tab-button .sp-text {
        display: inline; /* スマホ用テキストを表示 */
    }

    /* 他のスマホ用スタイル（既存のもの） */
    body {
        max-width: 100%;
        width: 100%;
    }
    img{
        width: 100%;
    }

    .tab-buttons,
    .tab-content,
    .content-overlay {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* カルーセルもスマホ向けに調整 */
    .carousel-container {
        padding: 0 20px; /* スマホでは左右のパディングを減らす */
    }
    .carousel-slide {
        width: calc(100% - 40px); /* carousel-containerのpadding分を引いて調整 */
        margin: 0 3px; /* スライド間の隙間を調整 */
    }
    .carousel-prev {
        left: 0px; /* スマホでは左右端に配置 */
    }

    .carousel-next {
        right: 0px; /* スマホでは左右端に配置 */
    }
}

/* PC向け */
@media screen and (min-width:1081px){
    /* PC画面サイズでは、PC用のテキストを表示し、スマホ用のテキストを非表示にする（冗長ですが明示のために記述） */
    .tab-button .pc-text {
        display: inline; /* PC用テキストを表示 */
    }

    .phone {
        display: none; /* スマホ用コンテンツを非表示 */
    }

    .tab-button .sp-text .phone {
        display: none; /* スマホ用テキストを非表示 */
    }


    /* 他のPC用スタイル（既存のもの） */
    body {
        max-width: 980px;
    }
    img{
        width: 100%;
    }

    .lp-container {
        width: 100%;
    }

    .button-overlay {
        width: 70%;
    }

    .tab-buttons,
    .tab-content,
    .content-overlay {
        padding-left: 30px;
        padding-right: 30px;
    }

    /* PC用カルーセル設定 */
    .carousel-container {
        padding: 0 50px; /* PCでは左右のパディングを維持 */
    }
    .carousel-slide {
        width: calc(100% - 100px); /* PCではpadding分を引いた幅 */
        margin: 0 5px; /* 隙間を維持 */
    }
}