/* charter.css */

/* --- SNSセクションを中央寄せ --- */
#sns_container{
    text-align: center;
}

#sns_title {
    text-align: center;
}

#sns_icon{
    text-align: center;
}

/* --- 遊漁船業者登録票のテーブル用のスタイル --- */
/* style.cssではリスト(ul)で指定されていますが、このページではテーブル(table)なので専用のスタイルを記述します */
.permission table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
    max-width: 600px;
}

.permission th,
.permission td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    text-align: left;
}

.permission th {
    background-color: #f2f2f2;
    font-weight: bold;
    color: #555;
    width: 35%;
    vertical-align: top;
}

.permission td {
    color: #333;
}


/* --- LINEボタンのアイコンサイズ調整 --- */
.line_button_css .fab {
    font-size: 24px;
    vertical-align: middle;
}

/* --- レスポンシブ対応：テーブルの表示崩れを防ぐ --- */
@media screen and (max-width:768px) {
    .permission th,
    .permission td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    .permission th {
        background-color: transparent;
        padding-bottom: 0;
        font-weight: bold;
    }
    .permission td {
        padding-top: 0;
        padding-bottom: 15px;
        border-bottom: 1px solid #ddd;
    }
    .permission tr:last-child td {
        border-bottom: none;
    }
}

/* ---【修正①】ご利用料金のプラン名を太字にする --- */
.price_list h3 {
    font-weight: bold;
}

/* ---【修正②】セクションタイトルの下線を文字幅に合わせる --- */
.section_title {
    width: fit-content; /* 要素の幅をコンテンツ(文字)の長さに合わせる */
    width: -moz-fit-content; /* Firefox用の記述 */
}