@charset "UTF-8";

/* ==========================================================================
   Reset & Base Styles
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

body, h1, h2, h3, p, figure, ul, li {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f5f5f5;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
    display: block;
    margin: 0 auto;
}

/* ==========================================================================
   Layout
   ========================================================================== */
.lp-container {
    max-width: 960px;
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
}

.section {
    position: relative;
    width: 100%;
}

/* ==========================================================================
   LINE Button (CTA)
   ========================================================================== */
.btn-line {
    display: inline-block;
    max-width: 85%;
    transition: transform 0.2s;
}

.btn-line:hover {
    transform: scale(1.03);
}

@media (max-width: 768px) {
    .btn-line {
        max-width: 95%;
    }
}

/* ==========================================================================
   Google Map
   ========================================================================== */
.gmap-container {
    width: 100%;
    background-color: #fff;
    aspect-ratio: 3 / 2;
}

.gmap-container iframe {
    width: 100%;
    height: 100%;
    vertical-align: top;
}

/* インラインマップ用ラッパー */
.gmap-inline-wrapper {
    width: 100%;
    margin: 10% 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gmap-inline-wrapper .gmap-container {
    width: 100%;
    margin: 0;
}

@media (max-width: 768px) {
    .gmap-inline-wrapper .gmap-container {
        width: 100%;
    }
}

.inline-slider {
    width: 95%;
    margin: 0 auto;
    position: relative;
}

/* 全幅スライダー */
.swiper-trainer.inline-slider,
.swiper-before.inline-slider {
    width: 100%;
}
/* 全幅スライダーの矢印位置調整 */
.swiper-trainer .swiper-button-prev,
.swiper-before .swiper-button-prev {
    left: 1.5%;
}
.swiper-trainer .swiper-button-next,
.swiper-before .swiper-button-next {
    right: 1.5%;
}

.swiper-slide {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    max-width: 100%;
    width: 100%;
}

/* カスタムナビゲーション矢印 */
.swiper-button-next,
.swiper-button-prev {
    width: 18%;
    height: auto;
    aspect-ratio: 1 / 1;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0;
    z-index: 10;
}

/* デフォルトアイコンを非表示 */
.swiper-button-next::after,
.swiper-button-prev::after {
    display: none;
}

/* 矢印の初期位置 */
.swiper-button-prev { left: 0; }
.swiper-button-next { right: 0; }

/* White Arrows (Trainer) */
.swiper-trainer .swiper-button-prev { background-image: url('../images/arw_white_left.webp'); }
.swiper-trainer .swiper-button-next { background-image: url('../images/arw_white_right.webp'); }

/* Gray Arrows (Review, BeforeAfter) */
.swiper-review .swiper-button-prev,
.swiper-before .swiper-button-prev { background-image: url('../images/arw_gray_left.webp'); }

.swiper-review .swiper-button-next,
.swiper-before .swiper-button-next { background-image: url('../images/arw_gray_right.webp'); }

/* Responsive Arrow Size */
@media (max-width: 768px) {
    .inline-slider {
        width: 96%;
    }
    .swiper-trainer.inline-slider,
    .swiper-before.inline-slider {
        width: 100%;
    }
    .swiper-button-prev { left: 0; }
    .swiper-button-next { right: 0; }
}


/* ==========================================================================
   Sliced Image Container
   ========================================================================== */
.sliced-bg {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.sliced-bg img {
    width: 100%;
    height: auto;
    display: block;
}

/* インライン配置用CTAラッパー */
.cta-inline-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 4% 0;
}

/* 各セクションのCTA背景色 */
.bg-cta-1 { background-color: #ccdddd; }
.bg-cta-2 { background-color: #e9e2da; }
.bg-cta-3 { background-color: #fdfe96; }
.bg-cta-4 { background-color: #f7ecdd; }
.bg-cta-5 { background-color: #e1d9ce; }
.bg-cta-6 { background-color: #df7b6c; }
.bg-cta-7 { background-color: #e2dcd0; }

/* スライダー背景色ラッパー */
.slider-bg-wrapper {
    width: 100%;
    padding-top: 5%;
    padding-bottom: 10%;
}
.bg-slider-trainer { background-color: #FFF; }
.bg-slider-review { background-color: #fdffca; }
.bg-slider-before {
    background-color: #FFF;
    margin-top: -5%; /* 吹き出しの裏側に重ねる */
    padding-top: 0;
}

/* Before/After 見出し上の余白 */
.before-title-img {
    margin-top: 2%;
}

/* 吹き出し画像をスライダーに重ねる */
.sliced-bg .before-bubble-img {
    position: relative;
    z-index: 10;
    width: 80%;
    margin: 0 auto;
    display: block;
}

/* フッターセクション */
.footer-section {
    background-color: #FFF;
    padding-top: 10%;
}

/* フッター情報（ロゴ・アクセス） */
.footer-info-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #FFF;
}

.footer-logo {
    margin-bottom: 10%;
}

/* ==========================================================================
   Navigation (Hamburger Menu & Top Button)
   ========================================================================== */

/* ナビゲーション固定ラッパー */
.nav-fixed-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    pointer-events: none;
    z-index: 1000;
    overflow: hidden;
}

/* ハンバーガーボタン */
.hamburger-btn {
    position: absolute;
    pointer-events: auto;
    top: clamp(10px, 2.5vw, 25px);
    right: clamp(10px, 2.5vw, 25px);
    width: clamp(44px, 7.8vw, 75px);
    height: clamp(44px, 7.8vw, 75px);
    z-index: 1000;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hamburger-btn img {
    width: 100%;
    height: auto;
}

.hamburger-btn .icon-close {
    display: none;
}

/* メニュー展開時のボタン */
.hamburger-btn.is-active .icon-open {
    display: none;
}

.hamburger-btn.is-active .icon-close {
    display: block;
    width: 100%;
}

/* ドロワーメニュー */
.drawer-menu {
    position: absolute;
    pointer-events: auto;
    top: 0;
    right: -100%;
    width: 65%;
    max-width: clamp(300px, 40vw, 400px);
    height: auto;
    max-height: 100vh;
    background-color: rgba(125, 125, 125, 0.98);
    border-bottom-left-radius: 40px;
    z-index: 998;
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: clamp(60px, 16vw, 140px) clamp(20px, 5.3vw, 50px) clamp(30px, 8vw, 70px);
    overflow-y: auto;
}

.drawer-menu.is-active {
    right: 0;
}

.drawer-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.drawer-menu li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

.drawer-menu a {
    display: block;
    color: #FFF;
    text-decoration: none;
    font-size: clamp(14px, 3.7vw, 22px);
    font-weight: bold;
    padding: clamp(15px, 4vw, 30px) 0;
    letter-spacing: normal;
    white-space: nowrap;
}

/* トップに戻るボタン */
.back-to-top {
    position: absolute;
    pointer-events: auto;
    bottom: clamp(15px, 4vw, 38px);
    right: clamp(15px, 4vw, 38px);
    width: clamp(80px, 14.2vw, 136px);
    height: clamp(80px, 14.2vw, 136px);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    cursor: pointer;
}

.back-to-top.is-show {
    opacity: 1;
    visibility: visible;
}

.back-to-top img {
    width: 100%;
    height: 100%;
}

/* スクロール先の余白調整 */
#sec-trainer {
    scroll-margin-top: 20px;
}