/* style.css */

/* 基本設定 */
body {
    margin: 0;
    font-family: sans-serif; /* フォントを指定 */
}

/* メインコンテナ */
.main {
    position: relative; /* 固定ボタンの基準のため */
}

.fixed-btn {
    position: fixed;
    bottom: 20px;
    left: 50%; /* 中央寄せのために追加 */
    transform: translateX(-50%); /* 中央寄せのために追加 */
    
    background-color: #ff7f88;
    color: #ffffff !important;
    padding: 15px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    z-index: 100; /* 他の要素より手前に表示 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    white-space: nowrap; /* 文字が折り返さないようにする */
}

/* ★★★ここから追加または修正★★★ */
.fixed-btn:active {
    color: #ffffff; /* クリック時の文字色を白に固定 */
    /* background-color: #ff7f88; /* 必要であれば背景色も通常時と同じに固定 */
}
/* ★★★ここまで追加または修正★★★ */


.container {
    max-width: 750px;
    margin: 0 auto;
    padding: 0 10px;
}

/* 各セクションのボックス */
.section-box-blue {
    background-color: #cb1e2e;
    padding: 15px 0;
    margin: 15px 0;
}

.section-box-darkblue { /* recommend & first-time use sections */
    background-color: #cb1e2e;
    padding: 15px 0;
    margin: 20px 0;
}

/* セクション内の白いコンテンツエリア */
.section-content {
    margin: 0 15px; /* 親要素の.section-box-blue/darkblueのpaddingと合わせて調整 */
    background-color: #fff;
    line-height: 1.2;
    padding: 20px 15px; /* 左右の余白をこちらで確保 */
}

/* 各セクションのタイトル */
.section-title {
    text-align: center;
    font-size: 1.4em; /* 140% */
    font-weight: bold;
    line-height: 1.2;
    color: #ffca00;
    border-top: 1px solid #ffca00;
    border-bottom: 1px solid #ffca00;
    padding: 15px 0;
    margin: 20px 0;
}

.section-title.red-border { /* おすすめキャンペーン用 */
    color: #ffca00;
    border-top: 1px solid #ffca00;
    border-bottom: 1px solid #ffca00;
}

/* キャンペーン説明テキスト */
.campaign-text-bold {
    text-align: center;
    font-size: 1.2em; /* 120% */
    font-weight: bold;
    line-height: 1.2;
    margin: 15px 0;
    color: #f36c6c;
}

.campaign-text-bold span {
    font-size: 1.2em; /* 120% */
}

/* 注意書きテキスト */
.note-text {
    text-align: left;
    font-size: 0.9em; /* 90% */
    line-height: 1.8;
    margin: 15px 0;
}

/* 赤字ハイライト */
.highlight-red {
    color: #e71f1f;
}

.highlight-red-dark { /* 元の #ff0000 */
    color: #ff0000;
}

/* 中央寄せ */
.text-center {
    text-align: center;
}

/* ボタンリンク */
.btn-login {
    width: 80%;
    max-width: 300px;
    padding: 15px 0;
    text-align: center;
    background: linear-gradient(to right, #3bb, #ff7f88);
    display: block;
    text-decoration: none;
    border-radius: 50px;
    color: #ffffff !important;
    margin: 20px auto;
    font-size: 1.2em; /* 120% */
}

/* ★★★ここから追加または修正★★★ */
.btn-login:active {
    color: #ffffff; /* クリック時の文字色を白に固定 */
    /* background: linear-gradient(to right, #3bb, #ff7f88); /* 必要であれば背景色も通常時と同じに固定 */
}
/* ★★★ここまで追加または修正★★★ */

/* 画像リンク */
.img-link img {
    max-width: 100%; /* 親要素の幅に合わせる */
    height: auto;
    display: block; /* 画像の下の余白をなくす */
    margin: 0 auto; /* 中央寄せ */
}

/* widthが指定されている画像リンクに対応（より具体的な指定の場合） */
.img-link-specific img {
    width: 100%; /* 親要素の幅いっぱいに広がる */
    height: auto;
    display: block;
    margin: 0 auto;
}

/* その他細かい調整 */
.margin-top-50px {
    margin-top: 50px;
}
.margin-bottom-15px {
    margin-bottom: 15px;
}
.small-text {
    font-size: 70%;
}
.underline {
    text-decoration: underline;
}s