/**************************************************
    共通設定
**************************************************/

/*左右のマージン設定*/
.marginarea_left_right {
    margin-left: 5%;
    margin-right: 5%;
}

/*セクションタイトルの青ブロック設定*/
.section-title-blue {
    background-color: #003366; /* 濃い青 */
    color: white;
    padding: 1vw 3vw;
    font-size: clamp(0px,3vw,25px);
    /*font-size: 3vw;*/
    font-weight: bold;
    text-align: center;
    margin-bottom: 3vw;
    width: 100%;
    margin: 0 auto;
}


/*サブセクション*/
.section-title-half-blue-line {
    /*width: 1100px;*/
    width: 100%;
    height: 0.3vw; /* 線の太さ */
    background-color: #003366; /* 青色（Bootstrapのprimary色） */
    margin-bottom: 6vw/*min(8vw,50px); /*青blockと.content-listの重なりを防ぐため余白の追加*/
}

.section-title-half-blue-block {
    background-color: #003366; /* 濃い青 */
    color: white;
    padding: 1vw 1vw;
    font-size: clamp(0px,2.3vw,25px);
    font-weight: bold;
    text-align: center;
    width: 43%;
    max-width: 300px;
    margin-left: 0;
}


/*  箇条書きリスト1  */
.content-list {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: 3vw;
}
    .content-list li {
        margin-bottom: 1.8vw;
        line-height: 1.2;
        color: #000;
        font-size: clamp(0px,2vw,20px);
    }

/*　ボタン　*/
/* apply-button-area: ボタンを囲むコンテナのスタイル */
.apply-button-area {
    text-align: center;
    margin-top: 8vw;
    margin-bottom: 10vw;
}

/* apply-button: 新規申し込みボタンのスタイル */
.apply-button {
    display: inline-block; /* ボタンとして機能させるためにブロック要素化 */
    background-color: #ff0000; /* 赤色の背景 */
    color: #ffffff; /* 白色の文字 */
    font-size: clamp(15px,2vw,40px); /* フォントサイズ */
    font-weight: bold; /* 太字 */
    padding: 0.5vw 7vw; /* 上下と左右のパディング */
    width: auto;
    border-radius: 4vw; /* 角丸 */
    transition: background-color 0.3s ease; /* ホバー時のアニメーション */
}

    /* apply-button: ホバー時のスタイル */
    .apply-button:hover {
        background-color: #cc0000; /* ホバー時に少し暗い赤色に */
        cursor: pointer; /* カーソルを指マークに */
    }

    /* apply-button: アクティブ時のスタイル */
    .apply-button:active {
        background-color: #990000; /* クリック時にさらに暗い赤色に */
        box-shadow: 0 0.2vw 0.4vw rgba(0, 0, 0, 0.1); /* 影を少し小さく */
        transform: translateY(1px); /* クリック時に少し下に移動するような効果 */
    }


/*バリデーション結果のエラーメッセージの設定*/
.validation-message {
    color: red;
    text-align: center;
    font-size: 1.6vw;
    /*エラーを複数表示する形式の場合、<ul><li>...</li></ul> 形式で出力されるため箇条書きの点を削除*/
    list-style-type: none;
    min-height: 2.0vw;
}

/**************************************************
    PC
**************************************************/
@media (min-width:768px) {
    .main {
        font-size: 1rem;
    }

    .btn-1 {
        color: white;
        //background-color: rgba(50, 40, 205, 1);
    }

    .marginarea_left_right {
        margin-left: 15%;
        margin-right: 15%;
    }
    
}

/**************************************************
    タブレット
    今のところ設定不要
**************************************************/
/*@media (max-width: 1020px) and (min-width: 768px){

}*/

/**************************************************
    スマホ
**************************************************/
@media (max-width:767px) {
    .section-title-half-blue-line {
        margin-bottom: 10vw; /*青blockと.content-listの重なりを防ぐため余白の追加*/
    }

    .content-list {
        margin-bottom: 5vw;
    }

        .content-list li {
            margin-bottom: 1.8vw;
            line-height: 1.5;
            font-size: 2.3vw;
        }

    .apply-button-area {
        text-align: center;
        margin-top: 15vw;
        margin-bottom: 8vw;
    }

    .apply-button {
        padding: 0.7vw 10vw; /* 上下と左右のパディング */
    }

    .main {
        font-size: 1rem;
    }

    .validation-message {
        font-size: 3vw;
    }