@charset "utf-8";
:root{
    --color-black: #262626;
    --color-white: #fffefc;
    --color-orange-derk: #E74322;
    --color-orange-light: #E57411;
    --color-green-light: #3aaa8a;
    --color-green-dark: #2f6223;
    --color-red-dark: #CA1717;
    --color-red-light: #E60013;
    --color-beige-light: #FCF9e7;
    --color-beige-dark: #F4f1e2;
}

.nav__item{
    color: var(--color-black);
}

.section__mainTitle{
    margin-top: 64px; 
}

.form{
    padding: 0 8.6% 0 8.6%;
}

.form__txt{
    font-size: 1.1rem;
    letter-spacing: 0.06em;
    padding: 0 8.6% 0 8.6%;
    margin-bottom: 18px;
    line-height: 1.45;
}

.form-group {
    margin-bottom: 25px;
    border-bottom: 1px solid #F3F3F3;
    padding-bottom: 20px;
}

.form__border{
    border: 0.5px solid #FFC812;
    width: 91.4vw;
    margin: 0 auto 36px;
}

label {
    display: block;
    font-weight: 400;
    margin: 32px 8px 28px;
    font-size: 1.4rem;
}

label span {
    color: var(--color-orange-derk);
    font-size: 1.1rem;
    margin-left: 9px;
}

/* 入力フィールドの装飾 */
input[type="text"],
input[type="email"],
textarea,
select {
    width: 100%;
    padding: 17px;
    border: 0.5px solid #F3F3F3;
    border-radius: 8px;
    background-color: var(--color-white);
    box-sizing: border-box;
    font-size: 1.4rem;
    color: var(--color-black);
}

.not-selected {
    color: #C9C9C9 !important;
}

.border{
    border: 0.5px solid #FFC812;
}

input::placeholder,
textarea::placeholder {
    color: #C9C9C9;
    opacity: 1;
}

/* 1. 入力する文字（黒くする） */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    color: var(--color-black); /* 入力した文字はハッキリした黒 */
}

input::placeholder,
textarea::placeholder {
    color: #C9C9C9;    /* 薄いグレー */
    opacity: 1;     /* Firefoxで薄くなりすぎるのを防ぐ */
}

.input,.textarea{
    color: var(--color-black);
}

/* 性別（ラジオボタン）の横並び */
.radio-group {
    display: flex;
}

.radio-item {
    display: inline-flex !important;
    align-items: center;
    margin-right: 15px;
    cursor: pointer;
}

/* ラジオボタン自体のデザイン */
input[type="radio"] {
    margin-right: 8px;
    cursor: pointer;
    accent-color: var(--color-orange-derk);
    width: 18px;
    height: 18px;
    width: auto;
    appearance: auto;
    -webkit-appearance: radio;
    margin: 0 8px 0 0;
    flex-shrink: 0;
}

/* ラジオボタン自体のサイズと見た目を固定する */
.radio-item input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    appearance: radio !important;
    margin: 0 5px 0 0 !important;
}

/* ラジオボタンの文字のスタイル */
.radio-item label {
    font-weight: normal;
    cursor: pointer;
    color: var(--color-black);
}

/* 生年月日の横並び */
.birth-inputs {
    display: flex;
    gap: 18px;
}

/* プライバシーポリシー */
.privacy-box {
    background: var(--color-white);
    padding: 15px;
    border-radius: 8px;
    margin-top: 30px;
    height: 224px;
}

.privacy__title{
    font-size: 1.8rem;
    letter-spacing: 0.04em;
    font-weight: 500;
    text-align: center;
    margin-bottom: 15px;
}

.policy-content {
    height: 148px;
    overflow-y: scroll;
    font-size: 1.1rem;
    color: var(--color-black);
    padding: 10px;
    font-size: 1.1rem;
    line-height: 1.91;
    letter-spacing: 0.04em;
}

.privacy-check {
    text-align: center;
    margin: 20px 0;
}

.policy-content::-webkit-scrollbar {
    width: 6px;
}

.policy-content::-webkit-scrollbar-track {
    background: var(--color-beige-dark) ;
    border-radius: 10px;
}

.policy-content::-webkit-scrollbar-thumb {
    background: #FFC812;
    border-radius: 10px;
}

.policy-content::-webkit-scrollbar-thumb:hover {
    background: #FFC812;
}

.privacy-check {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px 0;
}

/* チェックボックス自体のスタイル */
.privacy-check input[type="checkbox"] {
    width: 20px;
    height: 20px ;
    margin-right: 10px;
    cursor: pointer;
    accent-color: var(--color-orange-derk);
    -webkit-appearance: checkbox;
    appearance: checkbox;
    display: inline-block;
}

/* 横の文字のスタイル */
.privacy-check label {
    display: inline;
    margin-bottom: 0;
    cursor: pointer;
    font-size: 1.4rem;
    color: var(--color-black) ;
    margin-top: 0 !important;
} 

@media screen and (min-width: 1025px){
    .form__txt{
        font-size: 1.6rem;
        letter-spacing: 0.06em;
        padding: 0 23% 0 23%;
        margin-bottom: 64px;
        line-height: 1.6875;
    }

    .form__border{
        width: 62.5vw;
    }

    .form{
        max-width: 62.5vw;
        margin: 0 auto;
        padding: 0;
    }

    label {
        margin: 32px 8px 28px;
        font-size: 1.25vw;
    }

    .form-group{
        display: flex;
        margin: 90px 0 90px 0;
    }

    .form-group label {
    flex: 0 0 13.8vw;
    margin: 0;
    display: block;
  }

    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group select,
    .form-group textarea,
    .form-group .radio-group,
    .form-group .birth-inputs {
        flex: 1;                  
        width: auto;
    }

    .privacy-box {
        margin-top: 60px;
        height: 482px;
        padding: 25px;
    }

    .privacy__title{
        font-size: 1.9rem;
        margin-bottom: 50px;
    }

    .policy-content {
        height: 359px;
        overflow-y: scroll;
        font-size: 1.3rem;
        color: var(--color-black);
        padding: 10px;
        font-size: 1.3rem;
        line-height: 1.6;
    }

    .privacy-check{
        margin-top: 67px;
    }

    .privacy-check label {
    font-size: 1.8rem;
} 
}

/* 応募するボタン */
.btn-apply{
    position: relative;
    text-align: center;
    justify-content: center;
    margin: 60px auto 100px;
    color: var(--color-white);
    font-size: 1.8rem;
    background-color: var(--color-red-light);
    border: 1px solid var(--color-red-light);
    padding: 18px 10% 18px 10% ;
    border-radius: 50px;
    width: 48.2vw;
    display: flex;
}

.btn-apply:active{
    background: var(--color-white);
    color: var(--color-red-light);
}

/* ボタン　タブレット　769px*/
@media screen and (min-width: 769px){
    .btn-apply{
        margin: 60px 0 112px;
        font-size: 2.7rem;
        padding: 18px 8% 18px 8% ;
        width: 37vw;
        margin: 67px auto 150px;
    }
}

/* ボタン　pc　1025px*/
@media screen and (min-width: 1025px){
    .btn-apply{
        margin: 100px auto 240px;
        width: 32vw;
        padding: 30px 10% 30px 10% ;
        font-weight: 500;
    }

    .btn-apply:hover{
    background: var(--color-white);
    color: var(--color-red-light);
}
}