/* ☆2026-04-24 11:45:43 */
/* スマホで生年月日入力欄と文字のスペースを空ける */
@media screen and (max-width: 600px) {
#birth_year {
margin-right: 4px !important;
}
#birth_month {
margin-right: 4px !important;
}
#birth_day {
margin-right: 4px !important;
}
}



/* ☆2026-04-15 18:40:58 */
/* CTAバナーレイアウト */

/* バナー表示時にフェードインアニメーション */
  #goto_recruit_banner_block {
    animation: fadeInAd 2.5s ease-in-out; /* 1.5秒かけて表示 */
    opacity: 0;
    animation-fill-mode: forwards; /* アニメーション後、状態を維持 */
  }
  @keyframes fadeInAd {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }

/* フローティングバナースタイル */

/* バナーの配置 */
#goto_recruit_banner_block {
    position: fixed;
    bottom: 80px;
    right: 2px;
/*box-shadow: 2px 2px 4px #999;*/
    z-index: 99999 !important;
}

/* バナーデザイン */
/* スマートフォンサイズに適用
/* 横幅320px以上767px未満
/* -------------------------------------------------------------------- */
@media screen and (min-width:320px) and (max-width:767px) {
.goto_recruit_banner a {
width: 150px;
height: 100px;
border-radius: 8px 8px 0 0;
/*border: 3px solid #5ca3ff;*/
color: #fff;
display:block;
text-align: center;
text-decoration: none;
}
}

/* タブレットサイズに適用
/* 横幅768px以上1024px未満
/* -------------------------------------------------------------------- */
@media screen and (min-width:768px) and ( max-width:1024px) {
.goto_recruit_banner a {
width: 240px;
height: 160px;
border-radius: 8px 8px 0 0;
/*border: 3px solid #5ca3ff;*/
color: #fff;
display:block;
text-align: center;
text-decoration: none;
}
}

/* PCサイズに適用
/* 横幅1024px以上
/* -------------------------------------------------------------------- */
@media screen and (min-width:1024px) {
.goto_recruit_banner a {
width: 240px;
height: 160px;
border-radius: 8px 8px 0 0;
/*border: 3px solid #5ca3ff;*/
color: #fff;
display:block;
text-align: center;
text-decoration: none;
}
}

/* バナーのサイズ・角丸 */
/* スマートフォンサイズに適用
/* 横幅320px以上767px未満
/* -------------------------------------------------------------------- */
@media screen and (min-width:320px) and (max-width:767px) {
.goto_recruit_banner img {
width: 150px;
height: 100px;
border-radius: 4px 4px 0 0;
}
}
/* タブレットサイズに適用
/* 横幅768px以上1024px未満
/* -------------------------------------------------------------------- */
@media screen and (min-width:768px) and ( max-width:1024px) {
.goto_recruit_banner img {
width: 240px;
height: 160px;
border-radius: 4px 4px 0 0;
}
}
/* PCサイズに適用
/* 横幅1024px以上
/* -------------------------------------------------------------------- */
@media screen and (min-width:1024px) {
.goto_recruit_banner img {
width: 240px;
height: 160px;
border-radius: 4px 4px 0 0;
}
}

/* バナーマウスホバーで透過 */
.goto_recruit_banner a:hover {
opacity: 0.6;
}

/* 閉じるボタン */
.close-btn {
position: absolute;
top: 0;
right: 0;
cursor: pointer;
background: rgba(0,0,0,0.5);
color: #fff;
margin: 3px 3px auto auto;
padding: 2px 6px;
font-size: 20px;
z-index: 100;
}

/* CTAのぬけがら（？）のスペースを埋める */
.g-1 {
margin: 0px;
width: auto !important;
max-width: auto !important;
height: auto !important;
max-height: auto !important;
}

/* ☆2026-04-24 */
/* エントリーフォーム */
/* 同意確認ポップアップ */

/* 背景のオーバーレイ（より暗く、ぼかしを強く） */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    /* 背景色を0.4から0.7に濃くしました */
    background: rgba(0, 0, 0, 0.7); 
    /* ぼかしを少し強めて、背後の情報を遮断します */
    backdrop-filter: blur(4px); 
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

/* ポップアップ本体の横幅を拡大 */
.modal-content {
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.4), 
        0 5px 15px rgba(0, 0, 0, 0.2); 
    text-align: center;
    /* 横幅を 500px から 650px に広げました */
    max-width: 650px; 
    width: 95%; /* スマホ表示も考慮して少し余裕を持たせています */
    position: relative;
}

/* ポップアップ本体のスマホ時の設定 */
@media screen and (max-width: 600px) {
    .modal-content {
        padding: 30px 20px !important; /* 左右の余白（20px）を少し狭くしてボタンの可動域を広げる */
    }
}

.modal-content p {
    font-size: 16px;
    margin-bottom: 30px;
    color: #333;
}

/* 送信ボタン */
.submit-btn input#submit {
    background-color: #00c5b6 !important;
}


/* ボタンのレイアウト調整 */
.modal-buttons {
display: flex !important; /* flexを強制 */
justify-content: center !important;
margin-top: 30px !important;
    /* 改行させないための設定 */
    flex-wrap: nowrap;

}

/* ボタン共通スタイル */
.modal-buttons button {
    flex: 1; /* ボタンの幅を均等にする */
    max-width: 160px; /* 広がりすぎないよう制限 */
    padding: 12px 0;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    transition: all 0.3s ease;
}

/* ポップアップ内の「応募する」ボタン */
.btn-submit {
    background-color: #00c5b6 !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em;
margin-left: 20px !important; /* 左側に20pxの隙間を作る */
    padding: 12px 30px !important; /* 左右余白を少し調整 */
    border-radius: 50px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    border: none !important;
    transition: all 0.3s ease !important;
    /* テキストの折り返しを強制的に防ぐ */
    white-space: nowrap; 
    /* 横幅をテキストに合わせる */
    flex: 0 1 auto; 
}

/* ホバー（マウスを乗せた時）の動き */
.btn-submit:hover {
    /*background-color: #46827b !important; 少し濃い色に */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

/* 左側のキャンセルボタン */
.btn-cancel {
    background: #f8f8f8 !important;
    color: #666 !important;
    font-size: 16px !important;
    font-weight: bold;
margin-right: 20px !important; /* 右側に20pxの隙間を作る */
    padding: 12px 30px !important;
    border-radius: 50px !important;
    border: 1px solid #ddd !important;
    white-space: nowrap;
    flex: 0 1 auto;
}


/* 表示状態 */
.modal-overlay.is-active {
    display: flex;
}

/* --- スマホ対応：画面幅が500px以下の時 --- */
@media screen and (max-width: 600px) {
    /* 親要素のFlex設定を解除して、ただの箱にする */
    .modal-buttons {
        display: block !important; /* flexを解除 */
        width: 100% !important;
        margin: 20px 0 0 0 !important;
        padding: 0 !important;
    }

    /* 各ボタンを独立させて、横幅を無理やり広げる */
    .btn-cancel, .btn-submit {
        display: block !important;
        width: 100% !important;     /* 親の幅いっぱいに */
        min-width: 100% !important; /* 縮むのを禁止 */
        max-width: 100% !important; /* 広がるのを邪魔させない */
        
        /* ボタン同士の上下の隙間 */
        margin-left: 0 !important;   /* PC用の余白を消去 */
        margin-right: 0 !important;  /* PC用の余白を消去 */
        margin-bottom: 15px !important; 
        
        padding: 15px 0 !important;
        box-sizing: border-box !important;
    }
    
    /* 最後のボタン（応募する）の下マージンは不要 */
    .btn-submit {
        margin-bottom: 0 !important;
    }
}

/* ☆2026-04-24 11:20:56 */
/* 右上の×ボタン */
.btn-close-x {
position: absolute !important;
    /* 数値をマイナス側に大きくして、もっと外へ飛ばします */
    top: -25px !important;    
    right: -25px !important;  
    
    width: 44px !important;   /* 少し大きくして押しやすく */
    height: 44px !important;
    background: #666 !important; /* 画像に近いグレーに調整 */
    color: #fff !important;
    /*border-radius: 50% !important; */
    /*border: 2px solid #fff !important;*/
    font-size: 20px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 10005 !important; /* 最前面に */
}

.btn-close-x:hover {
    background: #000 !important;
    transform: scale(1.1);
}

/* 3. スマホでも枠外を維持する設定 */
@media screen and (max-width: 600px) {
    /* スマホで「枠内」に戻る設定を解除し、外側に固定します */
    .btn-close-x {
        top: -15px !important;
        right: -8px !important; /* 右に寄りすぎると画面外に消えるので調整 */
        width: 36px !important;
        height: 36px !important;
    }
}