@charset "utf-8";
/*2026.6.8-so*/
/*------------------------------------------------
* 接骨院向けカスタムスタイル
-------------------------------------------------*/

/************共通************/
/* basic.cssを上書き */
.tx-aqua {
    color: #3DBBBB !important;
}
.btn-turquoise:hover {
  background-color: #0097B0;
  border-color: #0097B0;
  color: #fff;
}
.back-aqua {
  background-color: #3DBBBB;
}
/* 見出しあしらい */
.section-title-en {
    display: block;
    font-size: 0.8rem;
    color: #00afcc;
    font-weight: bold;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

/* メニューカード*/
.menu-card {
    border: none !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
/* セクション背景のバリエーション */
.section-white { background-color: #ffffff; }
.section-soft-aqua { background-color: #e3f7f7; }
/* カードの共通デザイン */
.modern-card {
    border: none !important;
    background: #fff;
}

/* 丸角の統一 */
.rounded-4 { border-radius: 1rem !important; }
.rounded-5 { border-radius: 2rem !important; }

/************トップページ************/
.hero-section {
    position: relative;
    height: 80vh;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(255, 255, 255, 0.6); /* 白の透過オーバーレイ */
    z-index: 1;
}
.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
}
/* ヒーローエリアのテキスト装飾 */
.hero-content h1 {
    letter-spacing: 0.15em;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.8);
    line-height: 1.6;
}

/* --- スマホ表示時のヒーローエリア見出し調整 --- */
@media (max-width: 767px) {
    .hero-content h1 {
        font-size: 1.5rem !important;      /* 文字サイズ（お好みで調整してください） */
        letter-spacing: 0.05em !important; /* 字間（標準は0、広くするなら0.1emなど） */
        line-height: 1.4 !important;       /* 行間（改行された時のバランス調整用） */
    }
}
@media (max-width: 575.98px) {
    .hero-1 {
        font-size: 2.0rem !important;
		line-height: 1.4 !important; 
    }
}
.hero-sub-text {
    display: inline-block;
    background: rgba(0, 175, 204, 0.1);
    color: #00afcc;
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    font-weight: bold;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
}
/* コンセプトセクションの画像デコレーション */
.concept-image-wrapper {
    position: relative;
    padding: 20px;
}
/* 背後に薄い水色のボックスを配置しておしゃれに */
.concept-image-wrapper::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80%;
    height: 80%;
    background-color: rgba(230, 243, 249, 1.0);
    border-radius: 20px;
    z-index: 0;
}
.concept-img {
    position: relative;
    z-index: 1;
    border-radius: 20px;
}
/************about************/
/* 施術の流れなどのステップ用バッジ */
.step-badge {
    background-color: #00afcc;
    color: #ffffff !important;
    font-size: 0.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 22px;
    line-height: 1;
    letter-spacing: 0.02em;
    font-weight: bold;
    border-radius: 50rem; /* rounded-pillと同じ効果 */
}

/* テキストとの位置合わせ調整 */
.step-container {
    display: flex;
    align-items: start;
}

.step-left {
    margin-right: 1rem;
    flex-shrink: 0;
}




/************スマホ用フローティングCTA（横並び・スリム版）************/
@media (max-width: 767px) {
    .sp-floating-cta {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        display: flex;
        z-index: 9999;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        height: 54px; /* 全体の高さを低めに固定 */
    }

    .sp-floating-cta a {
        flex: 1;
        display: flex;
        flex-direction: row; /* 横並びに変更 */
        align-items: center;
        justify-content: center;
        text-decoration: none;
        font-weight: bold;
        font-size: 0.95rem; /* 横並びなので文字は少し大きくてもOK */
        transition: background-color 0.3s;
    }

    .sp-floating-cta a i {
        font-size: 1.1rem;
        /* marginはHTML側のme-2で制御、もしくはここで指定 */
    }

    /* 電話ボタン（アクア） */
    .btn-cta-tel {
        background-color: #00afcc;
        color: #ffffff !important;
    }

    /* Web予約ボタン（白） */
    .btn-cta-web {
        background-color: #ffffff;
        color: #00afcc !important;
        border-left: 1px solid #eee;
    }

    /* クリック時の反応 */
    .sp-floating-cta a:active {
        background-color: #f0f0f0; /* Web予約側 */
    }
    .btn-cta-tel:active {
        background-color: #008fa6; /* 電話側を少し暗く */
    }

    /* ① 以前設定した余白設定を一旦リセット（隙間の原因を消す） */
    body {
        padding-bottom: 0 !important;
    }
    .footer-area {
        padding-bottom: 0 !important;
    }

    /* ② コピーライトの入っている「一番下の黒い帯」自体の余白を増やす */
    /* これにより、黒い背景色がCTAの裏側までそのまま伸びます */
    .footer-area > div:last-child {
        padding-bottom: 75px !important; /* CTAの高さ分。足りなければ80pxなどに調整 */
    }
}

/* PCでは完全に非表示 */
@media (min-width: 768px) {
    .sp-floating-cta {
        display: none !important;
    }
}
@media (max-width: 767px) {
    #back-to-top {
        bottom: 80px !important; /* ボタンの高さ分上に避ける */
    }
}