@charset "UTF-8";

/* --- Variables & Reset --- */

:root {
    
    --main-green: #2e4d2a;
    --soft-dark: #9e7e65;
    --accent-brown: #b38e5d;
    --light-bg: #fdfaf5;

}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { 
    background-color: var(--main-bg);
    color: var(--accent-brown);
    font-family: 'Noto Serif JP', serif;
    font-weight: 700;
    color: #333;
    line-height: 1.8;
    background: #fff;
}

/* Header */
header { position: fixed; width: 100%; top: 0; z-index: 1000; background: #fff; padding: 15px 0; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.header-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; }
.logo { font-family: 'Noto Serif JP', serif; font-size: 1.1rem; color: var(--main-green); font-weight: bold; }
.logo span { font-size: .9rem; color: rgb(94, 91, 91); }

/* Navigation */
.nav ul { display: flex; list-style: none; align-items: center; }
.nav li { margin-left: 20px; }
.nav a { text-decoration: none; color: #333; font-size: 0.85rem; font-weight: 700; }
.nav-btn { background: var(--soft-dark); color: #fff !important; padding: 10px 20px; border-radius: 50px; }

/* Top Visual */
.main-visual {
    height: 90vh;
    background: #444 center/cover no-repeat; /* 画像がない時も暗い色を出す */
    background-image: linear-gradient(rgba(117, 117, 117, 0.4), rgba(100, 98, 98, 0.4)), url('../img/IMG_7368.JPG');
    display: flex; align-items: center; justify-content: center; text-align: center; color: #fff;
}
.mv-text h2 { font-size: clamp(2rem, 6vw, 4rem); font-family: 'Noto Serif JP', serif; }

/* Section Layout */
.section { padding: 80px 20px; max-width: 1100px; margin: 0 auto; text-align: center; }
.bg-dark-section { background: var(--soft-dark); color: #fff; padding: 80px 20px; }
.bg-light-section { background: var(--light-bg); padding: 80px 20px; }
.container { max-width: 1000px; margin: 0 auto; }

.section-title {
    font-size: 2.2rem;
    margin-bottom: 40px;
    color: var(--soft-dark);
    text-align: center;
}
.section-title.white { color: #fff; }
.section-title span { display: block; font-size: 0.8rem; color: var(--accent-gold); margin-top: 5px; }


/* --- ABOUT Section --- */.about-simple {
    margin-bottom: 40px;
    text-align: center;
}

.about-simple h3 {
    font-family: 'Noto Serif JP', serif;
    font-size: 1.6rem; /* 少しサイズを下げて落ち着かせる */
    color: var(--accent-brown);
    margin-bottom: 10px;
}

.about-simple p {
    font-size: 0.95rem;
    color: #666;
    letter-spacing: 0.05em;
}

.about-photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.about-photo-item img {
    width: 100%;
    aspect-ratio: 4 / 3; /* 写真の比率を統一して整頓感を出す */
    object-fit: cover;
    border-radius: 8px; /* 角丸を控えめにしてシャープに */
    margin-bottom: 12px;
}

.about-photo-item p {
    font-family: 'Noto Serif JP', serif;
    font-size: 0.85rem; /* キャプションを小さく添える程度に */
    color: var(--accent-brown);
    font-weight: bold;
    text-align: left; /* 左寄せにして誠実な印象に */
}

/* スマホ対応 */
@media (max-width: 768px) {
    .about-photo-grid { grid-template-columns: 1fr; }
    .about-simple h3 { font-size: 1.3rem; }
}


/*トレーナー紹介*/
.flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    text-align: left;
    flex-wrap: nowrap;
}
.trainer-img {
    background: #fff; /* ロゴの背景を白にして浮かび上がらせる */
    padding: 40px;    /* 周りにゆとりを持たせる */
    border: 1px solid #e0d8cc; /* 繊細なベージュの枠線 */
    border-radius: 50%; /* 正方形のロゴなら丸く切り抜くとお洒落です */
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1; /* 正円・正方形を保つ */
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.trainer-logo {
    width: 80%;       /* 枠に対して少し小さめに配置 */
    height: auto;
    object-fit: contain; /* ロゴが歪まないように */
}

.trainer-img img {
    width: 100%;
    height: auto;
    border-radius:20px;
}
.trainer-info {
    flex: 1.5;
    color: #fff;
}

.trainer-sub-title {
    font-size: 0.9rem;
    color: var(--accent-gold); /* チラシのゴールド色 #b38e5d */
    margin-bottom: 5px;
    letter-spacing: 0.1em;
}

.trainer-name {
    font-family: 'Noto Serif JP', serif;
    font-size: 2rem;
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding-bottom: 10px;
}

.trainer-name span {
    font-size: 1rem;
    font-weight: normal;
    opacity: 0.7;
}

.trainer-text p {
    margin-bottom: 20px;
    line-height: 1.8;
    font-size: 0.95rem;
}

.rikka-concept {
    background: rgba(255,255,255,0.05);
    padding: 20px;
    border-left: 3px solid var(--accent-gold);
    border-radius: 0 10px 10px 0;
}

.trainer-specs {
    list-style: none;
    margin-top: 30px;
    font-size: 0.85rem;
    color: rgb(231, 231, 231);
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
}

/* PC版のレイアウト調整 */
@media screen and (min-width: 768px) {
    .flex {
        display: flex;
        align-items: center; /* 垂直方向を真ん中に */
        justify-content: center; /* 全体を中央寄せに */
        gap: 80px; /* ロゴと文字の間にしっかり余白を作る */
        max-width: 1100px;
        margin: 0 auto;
    }

    .trainer-img {
        flex: 0 0 350px; /* ロゴの幅を350pxで固定（「どーん」を防ぐ） */
        max-width: 350px;
    }

    .trainer-info {
        flex: 1; /* 残りのスペースを文章に使う */
        max-width: 600px; /* 文章が横に広がりすぎないように制限（読みやすさUP） */
    }

    .trainer-text p {
        font-size: 1.05rem; /* PCでは少し文字を大きく */
        line-height: 2.2; /* 行間をさらに広げて高級感を出す */
    }
}

/* ロゴ画像の枠をさらに上品に */
.trainer-img {
    background: #fff;
    padding: 50px;
    border-radius: 50%;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1); /* 影を少し深くして立体感を */
    border: 1px solid #eee;
}

.card h3 {
    font-size: 1.5rem;
    padding-bottom: 30px;
}

/* スマホ用レイアウト調整 */
@media (max-width: 768px) {
    .trainer-name { font-size: 1.5rem; }
    .trainer-img { max-width: 200px; margin: 0 auto 30px; }
}

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.card { 
    background: #fff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    text-align: center;
}
.facility-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* 施設紹介のレイアウト */
.facility-content {
    max-width: 800px;
    margin: 0 auto;
}

.swiper {
    width: 100%;
    margin-bottom: 20px;
}

.swiper-slide img {
    width: 100%;
    height: 450px!important;/* PCでの高さ */
    object-fit: cover;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

.swiper-wrapper {
    display: flex; /* 画像を横一列に並べる */
}

.swiper-slide {
    flex-shrink: 0; /* 画像が潰れないようにする */
    width: 100%;
    height: auto;
}

.facility-text h4 {
    font-size: 1.5rem;
    color: var(--main-green);
    margin-bottom: 10px;
}

.facility-text p {
    color: #666;
    font-size: 0.95rem;
}

/* 矢印の色をメインカラーに */
.swiper-button-next, .swiper-button-prev {
    color: var(--soft-dark);
}

@media (max-width: 768px) {
    .swiper-slide img {
        height: 300px !important; /* スマホでは少し低く */
    }
}

.f-item img { width: 100%; height: 300px; object-fit: cover; border-radius: 15px; }

/* 料金表を包む白いボックス */
.price-wrapper {
    max-width: 700px;
    margin: 0 auto;
    background: #fff;
    padding: 50px 40px;
    border-radius: 10px; /* あえて少し角を残してクラシックに */
    border: 1px solid #e0d8cc; /* ごく薄いベージュの枠線 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}

.price-table {
    width: 100%;
    border-collapse: collapse;
}

.price-table tr {
    border-bottom: 1px solid #f0f0f0; /* 繊細な仕切り線 */
}
/* 左側の項目名：左寄せ */
.price-table th {
    padding: 35px 0;
    text-align: left;
    vertical-align: middle;
    width: 60%; /* 左側の幅を確保 */
}

.price-table th span {
    display: block;
    font-size: 0.9rem;
    font-weight: normal;
    color: #999;
    margin-top: 8px;
    letter-spacing: 0.05em;
}

/* 右側の金額：右寄せ＆大きな文字 */
.price-table td {
    padding: 35px 0;
    text-align: right;
    vertical-align: middle;
    font-size: 1.5rem; /* 大きな文字サイズ */
    font-weight: 700;
    color: rgb(100, 91, 91);
    font-family: 'Noto Serif JP', serif;
}

/* 複数行を右側にまとめる設定 */
.price-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* ★右端に揃える */
    gap: 20px;
}
/* 金額の横の「小型・中型」ラベル */
.price-label {
    font-size: 0.9rem !important;
    font-weight: normal;
    color: #999;
}
/* 右側の金額エリア：右側に余白を作って内側に寄せる */
.price-table td {
    padding: 35px 40px 35px 0; /* 右側に40pxの余白を追加 */
    text-align: right;
    vertical-align: middle;
    width: 40%; /* 金額側の幅を少し狭めて中央に寄せる */
}

/* 左側の項目名：右側の余白に合わせて幅を調整 */
.price-table th {
    padding: 35px 0 35px 40px; /* 左側にも余白を足すと全体のバランスが良くなります */
    text-align: left;
    vertical-align: middle;
    width: 60%;
}
/* ラベルと金額のセットを中央に配置 */
.price-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* 子要素を中央に */
    margin-top: 15px;
    gap: 10px; /* 行間 */
}

.price-row {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px; /* ラベルと金額の間隔 */
}

/* 金額のスタイル（前のデザインを継承） */
.price-val {
    font-weight: 700;
    color: rgb(100, 91, 91);
    line-height: 1.2;
}
/* 金額横の「〜」 */
.price-val span {
    font-size: 1.1rem;
    margin-left: 4px;
}

/* スマホ用の微調整 */
@media (max-width: 768px) {
    .price-val {
        font-size: 1.4rem; /* スマホでは少し小さく */
    }
}


/* 「〜」などの補助文字 */
.price-table td span {
    font-size: 1.1rem;
    margin-left: 4px;
}

/* 下部の注意書き（静かに添える） */
.hotel-note {
    margin-top: 30px;
    text-align: left;
    font-size: 0.85rem;
    color: #999;
    line-height: 1.8;
    border-top: 1px solid #f5f5f5;
    padding-top: 20px;
}

/* スマホ対応：余白を調整 */
@media (max-width: 768px) {
    .price-wrapper { padding: 30px 20px; }
    .price-table th, .price-table td {
        display: block;
        width: 100%;
        text-align: center;
        padding: 20px 0;
    }
    .price-group {
        align-items: center; /* スマホは中央 */
        margin-top: 10px;
    }

    .price-table td {
        padding-top: 5px;   /* 項目名との間を詰める */
        padding-bottom: 25px; 
    }

    .price-row {
        align-items: center;
    }

    .price-table td .price-val {
        font-size: 1.4rem; /* スマホでは少しだけ文字を小さくして収まりを良くする */
    }
}

/*店舗情報*/
.access-flex {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    text-align: left;
    margin-top: 40px;
}

.access-info {
    flex: 1;
}

.access-info h3 {
    font-size: 1.5rem;
    color: var(--accent-brown);
    margin-bottom: 15px;
}

.address {
    font-weight: bold;
    margin-bottom: 20px;
}

.info-list p {
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
}

.info-list span {
    display: inline-block;
    width: 180px;
    color: var(--accent-brown);
    font-size: 0.85rem;
    font-weight: bold;
}

.google-map {
    flex: 1.5;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.map-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 25px;
    background: var(--accent-brown);
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-size: 0.9rem;
}

/* スマホ用レスポンシブ */
@media (max-width: 768px) {
    .access-flex {
        flex-direction: column;
        align-items: center;
    }
    .google-map {
        width: 100%;
    }
    .info-list span {
        width: 130px;
    }
}

/*コンタクト*/
.contact-box {
    background: var(--soft-dark); /* チラシのブラウン */
    color: #fff;
    text-align: center;
    padding: 80px 20px;
}

.contact-lead {
    margin-bottom: 30px;
    line-height: 1.8;
    font-size: 1rem;
}

.tel-display {
    display: inline-block;
    background: #fff; /* 番号部分は白背景で目立たせる */
    color: var(--accent-brown);
    padding: 16px 120px;
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    text-decoration: none;
}

.tel-label {
    display: block;
    font-size: 0.9rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.tel-number {
    display: block;
    font-size: 1.4rem; /* チラシのように大きく */
    font-weight: bold;
    color: var(--accent-brown);
    line-height: 1;
    margin: 10px 0;
}

.tel-time {
    font-size: 0.85rem;
    color: #888;
}

.contact-sub {
    margin-top: 30px;
    font-family: 'Noto Serif JP', serif;
    letter-spacing: 0.1em;
}

/* スマホ用：番号を少し小さく調整 */
@media (max-width: 768px) {
    .tel-display { padding: 20px 20px; width: 70%; }
    .tel-number { font-size: 1.4rem; }
}

.btn-line { display: inline-block; background: #fff; color: var(--soft-dark); padding: 15px 40px; border-radius: 50px; text-decoration: none; font-weight: bold; margin-top: 20px; }
footer { text-align: center; padding: 40px; color: #999; }

/* Animations */
.fade-in { opacity: 0; transform: translateY(30px); transition: 1s ease-out; }
.fade-in.show { opacity: 1; transform: translateY(0); }

/* Smartphone Menu */
.hamburger { display: none; cursor: pointer; width: 30px; height: 20px; position: relative; z-index: 2000;}
.hamburger span { width: 100%; height: 2px; background: var(--soft-dark); position: absolute; transition: 0.3s; }
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 9px; }
.hamburger span:nth-child(3) { bottom: 0; }

/* jsで .hamburger に .open が付いた時の動き */
.hamburger.open span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
    opacity: 0; /* 真ん中の線を消す */
}
.hamburger.open span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}


/* 1本目（上）を真ん中に下げて45度回す */
.hamburger.open span:nth-child(1) {
    top: 9px;
    transform: rotate(45deg);
}

/* 2本目（真ん中）を消す */
.hamburger.open span:nth-child(2) {
    opacity: 0;
}

/* 3本目（下）を真ん中に上げてマイナス45度回す */
.hamburger.open span:nth-child(3) {
    top: 9px; /* bottomではなくtopで位置を合わせると綺麗です */
    transform: rotate(-45deg);
}


@media screen and (min-width: 768px),print {
    .hamburger {
        display: none;
    }
}

@media (max-width: 768px) {
    .hamburger { display: block; }
    .nav {
        display: block;
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        height: 100vh;
        background: #fff;
        padding: 100px 40px;
        transition: 0.4s;
        box-shadow: -5px 0 20px rgba(0,0,0,0.1); 
        z-index: 1050;
    }
    .nav.open { right: 0; }
    .nav ul { flex-direction: column; }
    .nav li { margin: 20px 0; }
    .facility-grid { grid-template-columns: 1fr; }
    .main-visual { height: 70vh; }
    .flex {
        flex-direction: column;
        flex-wrap: wrap;
    }
    .trainer-img {
        max-width: 100%;
    }
}

/* スライダー全体の枠を固定 */
.swiper {
    width: 100%;
    height: auto;
    margin: 0 auto;
    overflow: hidden; /* 枠からはみ出る分を隠す */
    position: relative;
}

/* 画像のサイズを揃える */
.swiper-slide img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 15px;
}