/* common.css (修正版) */
:root { 
    --base-font-size: 14px; 
    --base-line-height: 1.6; 
    --main-font: "Open Sans", "Helvetica Neue", Helvetica, Arial, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    --main-blue: #13519c;
}

body { 
    font-family: var(--main-font);
    line-height: var(--base-line-height); 
    color: #333; 
    margin: 0; 
    padding: 0; 
    font-size: var(--base-font-size);
    transition: font-size 0.2s, line-height 0.2s;
}

/* ヘッダー全体のレイアウト */
.full-width-header {
    width: 100%;
    background-color: #ffffff;
    padding: 8px 15px; 
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    border-bottom: 3px solid #e6f0fa;
}
.header-left { display: flex; align-items: center; flex-shrink: 0; }
.full-width-header img { width: 24px; height: 24px; margin-right: 8px; display: block; flex-shrink: 0; }
.office-name-ja { font-size: 16px; font-weight: 700; letter-spacing: 0.05em; line-height: 1; white-space: nowrap; }
.logo-link { text-decoration: none; color: #333 !important; display: flex; align-items: center; }

/* 文字サイズ変更セレクター */
.font-size-selector { 
    display: flex; 
    align-items: center; 
    gap: 3px;
    flex-wrap: wrap; 
    justify-content: flex-end;
}

.font-size-label { 
    font-size: 0.8em; 
    color: #666; 
    white-space: nowrap; 
}

.font-btn {
    border: 1px solid #ddd; 
    background: #fff; 
    padding: 0.2em 0.5em; 
    cursor: pointer;
    font-size: 0.75em; 
    border-radius: 2px; 
    min-width: 3.5em; 
    font-family: var(--main-font);
    white-space: nowrap;
    box-sizing: border-box;
}
.font-btn.active { background-color: var(--main-blue); color: #fff; border-color: var(--main-blue); }

/* メインコンテナ */
.main-container { max-width: 800px; margin: 0 auto; padding: 0.5em 20px; min-height: 70vh; }
.page-title { text-align: center; color: var(--main-blue); font-size: 1.8em; margin: 1.5em 0; font-weight: bold; }

/* 料金表 */
.price-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #000;
    margin-bottom: 1.5em;
    table-layout: fixed; /* 列の幅を固定 */
}

/* 最上行の設定 */
.price-table thead th {
    background-color: #f2f2f2; /* 濃いグレー */
    text-align: center;
    border: 1px solid #000;
}

.price-table th, .price-table td {
    border: 1px solid #000;
    padding: 1.0em 1em;
    vertical-align: middle;
    word-wrap: break-word;
}

/* 左側（項目）：白背景 */
.price-table tbody th {
    width: 65%;
    background-color: #fff;
    text-align: left;
    font-weight: bold;
    color: #333;
}
/* 右側（金額）：白背景 */
.price-table td {
    width: 40%;
    background-color: #fff;
    text-align: right;
    font-weight: bold;
    color: #333;
word-break: break-all; /* 枠内で確実に折り返すための保険 */
}

/* スマホ表示（画面幅650px以下）の調整 */
@media screen and (max-width: 650px) {
    /* 右列の幅を55%まで広げて、1行収まりやすくしつつ改行も許容する */
    .price-table th { 
        width: 45%; 
        padding: 0.7em 0.8em; 
    }
    .price-table td { 
        width: 55%; 
        padding: 0.7em 0.8em;
        font-size: 0.9em; /* スマホのみ文字をわずかに小さくして1行を死守します */
    }
}


.price-table td .small-text {
    display: block;
    white-space: normal; /* 改行を許可 */
    font-size: 0.8em;
    margin-top: 4px;
}

.small-text { font-size: 0.8em; display: inline; margin-top: 0.4em; font-weight: normal; color: #666; }
.tax-in { font-size: 0.8em; color: #444; font-weight: normal; margin-left: 0.4em; display: inline; }

/* 共通パーツ */
.note-area { color: #333; font-size: 0.9em; margin-top: 1.5em; padding: 1.5em; background-color: #f9f9f9; border-radius: 4px; border-left: 4px solid #ccc; }
.site-footer { width: 100%; background-color: #ffffff; color: #666; padding: 1.5em 0; text-align: center; font-size: 10px; }
.footer-back { text-align: center; margin: 3em 0 2em 0; }
.btn-back { display: inline-block; background-color: #f0f0f0; color: #666; padding: 0.8em 2em; text-decoration: none; border-radius: 40px; font-size: 0.8em; border: 1px solid #ddd; }
.page-top-btn { position: fixed; right: 20px; bottom: 80px; width: 38px; height: 38px; background-color: rgba(180, 180, 180, 0.7); color: #fff; display: flex; justify-content: center; align-items: center; border-radius: 50%; text-decoration: none; visibility: hidden; opacity: 0; transition: 0.3s; z-index: 1000; }
.page-top-btn.is-active { visibility: visible; opacity: 1; }
.custom-alert-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; justify-content: center; align-items: center; z-index: 2000; }
.custom-alert-box { background: #fff; padding: 1.5em; border-radius: 8px; max-width: 300px; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.2); font-size: 1em; }
.custom-alert-btn { margin-top: 1em; padding: 0.5em 1.5em; background: var(--main-blue); color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 0.9em; }

/* レスポンシブ調整（スマホ対応） */
@media screen and (max-width: 650px) {
    /* 文字サイズボタンを「3つ」と「2つ」に分ける */
    .font-size-label {
        width: 100%;
        text-align: right;
        margin-bottom: 4px;
        display: block;
    }
    .font-size-selector {
        justify-content: flex-end;
        gap: 4px;
    }
    .font-btn {
        flex: 0 1 calc(33.3% - 6px); /* 最小・小・中 */
        min-width: 0;
        text-align: center;
    }
    /* 「中」の後に強制改行を入れる */
    .font-btn:nth-of-type(3):after {
        content: "";
        flex-basis: 100%;
        height: 0;
        display: block;
    }
    /* 「大」「最大」を50%幅にする */
    .font-btn:nth-of-type(4),
    .font-btn:nth-of-type(5) {
        flex: 0 1 calc(50% - 6px);
    }

    /* 料金表のスマホ表示：表形式を維持しつつ幅を調整 */
    .price-table th { width: 55%; padding: 0.8em; }
    .price-table td { width: 45%; padding: 0.8em; }
}