/* =======================================
   main-content-onsen.css（完全最適化版：配置微調整済）
======================================= */

/* ===== 共通変数 ===== */
:root {
    --content-width: 800px;
    --content-wide: 1000px;
    --gap-base: 30px; /* 画像とテキストの間隔を少し広めに設定 */
}

/* ===== メインコンテンツ全体 ===== */
#main-content {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 20px;
}

#main-content * ,
#main-content *::before,
#main-content *::after {
    box-sizing: border-box;
}

/* =======================================
   メインブロック（導入文）
======================================= */

.main-block {
    margin-bottom: 60px;
}

.block-top {
    color: #000;
    font-size: 2rem;
    font-weight: bold;
    padding: 40px 20px 20px;
    margin: 0;
    text-align: center;
}

.block-bottom {
    display: flex;
    gap: var(--gap-base);
    padding: 20px;
    align-items: center;
}

.block-text {
    flex: 1;
    padding: 10px;
    font-size: 1.2rem;
    font-weight: bold;
}

.block-image {
    flex: 1;
    display: flex;
    justify-content: flex-start; /* 左側の画像は右（テキスト）へ寄せる */
}

.block-image img {
    max-width: 100%;
    height: auto;
}

/* =======================================
   追加ブロック（殿湯・姫湯）
======================================= */

.onsen-extra {
    margin-bottom: 80px;
}

.onsen-extra-inner {
    max-width: var(--content-width);
    margin: 0 auto;
}

.extra-title {
    font-size: 2rem;
    font-weight: bold;
    padding: 20px;
    text-align: center;
    margin: 0;
}

.extra-lead {
    font-size: 1.2rem;
    text-align: center;
    padding: 0 20px 30px;
    margin: 0;
}

.extra-row {
    display: flex;
    gap: var(--gap-base);
    margin-bottom: 40px;
    align-items: center; /* 縦方向の中央を揃える */
}

.extra-row.reverse {
    flex-direction: row-reverse;
}

.extra-image {
    flex: 1;
    display: flex;
    justify-content: flex-end; /* 画像を右（テキスト側）へ密着させる */
}

.extra-image img {
    max-width: 100%;
    height: auto;
    display: block;
}

.extra-text {
    flex: 1;
    padding: 0;
    font-size: 1.1rem;
    line-height: 1.8;
}

.extra-text h3 {
    font-size: 1.1rem;   /* .extra-text と同じサイズに統一 */
    font-weight: normal; /* 太字も必要なら bold のままでもOK */
    margin: 0 0 0.5em 0; /* 上下マージン調整 */
}

.extra-text h3::before {
    content: "■"; /* 記号をCSSで制御 */
    color: #000; /* ブラック */
    margin-right: 0.5em;
}


/* =======================================
   テキスト06 セクション（客室カード）
======================================= */

.text06-section {
    max-width: var(--content-wide);
    margin: 80px auto;
    padding: 0 20px;
}

.text06-title {
    color: #000;
    font-size: 2rem;
    padding: 15px 20px;
    margin-bottom: 40px;
    text-align: center;
}

.card-row {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.four-col {
    justify-content: space-between;
}

.four-col .card {
    flex: 1 1 calc(25% - 15px);
    max-width: calc(25% - 15px);
}

.three-col {
    justify-content: center;
}

.three-col .card {
    flex: 1 1 calc(25% - 15px);
    max-width: calc(25% - 15px);
}

.card {
    border: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

.card-image-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

.card-text {
    padding: 15px;
    font-size: 0.9rem;
    font-weight: bold;
    text-align: center;
}

/* お風呂の名前と部屋名を囲むH3のスタイル */
.card-text h3 {
  font-size: 1.1rem;   /* お風呂の名前の大きさ */
  font-weight: bold;
  line-height: 1.4;    /* 行間の調整 */
  margin-bottom: 10px; /* 下のボタンとの余白 */
  color: #333;
}

/* 部屋名の部分（span）のスタイル */
.card-text h3 span {
  font-size: 0.85rem;  /* 部屋名を少し小さくしてメインを引き立てる */
  font-weight: normal; /* 部屋名は細くするとスッキリ見えます */
  color: #666;         /* 文字色を少し薄くして補足情報らしく */
}


.card-link {
    display: block;
    width: fit-content;
    margin: 14px auto 0;
    padding: 6px 14px;
    font-size: 0.85rem;
    color: #000;
    text-decoration: none;
    border: 1px solid #000;
    background: transparent;
    transition: all 0.2s ease;
}

.card-link:hover {
    background: #000;
    color: #fff;
}

/* =======================================
   温泉分析表
======================================= */

.onsen-analysis {
    max-width: var(--content-width);
    margin: 80px auto;
    padding: 0 20px;
}

.analysis-title {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
}

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

.analysis-table th,
.analysis-table td {
    border: 1px solid #ccc;
    padding: 15px;
    vertical-align: top;
}

.analysis-table th {
    width: 30%;
    background: #f5f5f5;
    text-align: left;
}

/* =======================================
   SP対応（スマホ表示）
======================================= */

@media screen and (max-width: 768px) {

    /* 縦並びに強制切り替え */
    .block-bottom,
    .extra-row {
        flex-direction: column !important;
        align-items: center;
        padding: 10px;
        gap: 20px;
    }

    .extra-row.reverse {
        flex-direction: column !important;
    }

    /* 画像の中央寄せ（PC版の右寄せを解除） */
    .block-image,
    .extra-image {
        width: 100%;
        justify-content: center !important; 
    }

    .block-image img,
    .extra-image img {
        margin: 0 auto;
        max-width: 90%;
    }

    /* テキストの中央寄せ */
    .block-text,
    .extra-text {
        text-align: center;
        padding: 0 10px 20px;
    }

    /* カードの2列レイアウト */
    .card-row .card {
        flex: 1 1 calc(50% - 10px);
        max-width: calc(50% - 10px);
    }

    /* 最後の1枚を中央に */
    .card-row .card:last-child {
        flex: 0 0 calc(50% - 10px);
        margin: 0 auto 20px;
    }
    

    /* 分析表の縦表示 */
    .analysis-table th,
    .analysis-table td {
        display: block;
        width: 100%;
    }
}