/* ==========================================
   Apply Page
========================================== */
/* ページタイトル */
.page-title{
    margin-bottom:40px;
    text-align:center;
    font-size:2rem;
    color:var(--color-main);
}


/* ==========================
   セクション
========================== */
.form-section{
    background:var(--color-surface);
    border-radius:20px;
    padding:30px;
    margin-bottom:35px;
    box-shadow:var(--shadow-lg);
}

.form-section h2{
    margin:0 0 25px;
    padding-bottom:12px;
    border-bottom:3px solid var(--color-main-light);
    color:var(--color-main);
}


/* ==========================
   入力欄
========================== */
.form-group{
    margin-bottom:22px;
}

.form-group label{
    display:block;
    margin-bottom:8px;
    font-weight:bold;
}

/* ラジオボタン横並び用 */
.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 5px;
}

.radio-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: normal;
    margin-bottom: 0;
}

.radio-group input[type="radio"] {
    width: auto;
    margin: 0;
}

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;
    padding:10px;
    font-size:16px;
    border:2px solid var(--color-border);
    border-radius:5px;
    transition:.2s;
    box-sizing:border-box;
    background:var(--color-surface);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    outline:none;
    border-color:var(--color-main);
    box-shadow:var(--focus-ring);
}


/* ==========================
   必須
========================== */
.required{
    margin-left:8px;
    padding:2px 8px;
    background:var(--color-error);
    color:var(--color-white);
    border-radius:20px;
    font-size:12px;
}


/* ==========================
   自治体表示
========================== */
.readonly-box{
    background:var(--color-surface-sub);
    border:2px solid var(--color-border);
    border-radius:5px;
    padding:10px;
    font-weight:bold;
    color:var(--color-heading);
}

/* =========================
   応募作品
========================= */
.form-note{
    margin-bottom:20px;
    color:var(--color-text-light);
    font-size:0.95rem;
    line-height:1.8;
}


/* =========================
   テーマカード
========================= */
.entry-card{
    background:var(--color-surface-sub);
    border-radius:18px;
    padding:1px;
    margin-bottom:25px;
}

/* 作品ごとの見出し */
.entry-title{
    font-size:1.2rem;
    color:var(--color-main);
    margin-bottom:20px;
}

/* アコーディオン（青い枠線） */
.entry-details{
    border:1px solid var(--color-border-main);
    border-radius:5px;
    overflow:hidden;
    background:var(--color-surface);
}

/* アコーディオンのヘッダー */
.entry-details summary{
    list-style:none;
    cursor:pointer;
    padding:10px 10px;
    background:var(--color-main-pale);
    font-size:1.1rem;
    font-weight:bold;
    transition:.2s;
    user-select:none;
}

.entry-details summary:hover{
    background:var(--color-main-light);
}

.entry-details summary::-webkit-details-marker{
    display:none;
}

/* アコーディオンの「＋」「－」アイコン */
.entry-details summary::before{
    content:"＋";
    display:inline-block;
    margin-right:10px;
    font-size:18px;
    color:var(--color-main-dark);
    transition:.2s;
}

.entry-details[open] summary::before{
    content:"－";
}

/* カード内のコンテンツエリア */
.entry-body{
    padding:10px;
    background:var(--color-surface);
}

/* サムネイル画像 */
.preview{
    display:block;
    max-width:220px;
    max-height:220px;
    border:1px solid var(--color-border);
    border-radius:8px;
    margin-top:10px;
}

.image-links{
    margin-top:8px;
    font-size:14px;
}

.image-links a{
    color:var(--color-main-dark);
    text-decoration:none;
}

/* キャッチコピー入力欄 */
.catchcopy{
    width:100%;
    resize:vertical;
}


/* ==========================
   作品エリア
========================== */
/* 作品タイプ */
.radio-group {
    display: flex;
    gap: 24px;
    align-items: center;
    flex-wrap: wrap;
}

.radio-group label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    margin: 0;
}

.radio-group input[type="radio"] {
    width: auto;
    margin: 0;
}

/* ==========================
   チェックボックスとラジオボタンの色を緑にする
========================== */

input[type="checkbox"],
input[type="radio"]{
    accent-color:var(--color-main);
}

/* ==========================
   チェックボックス
========================== */
.check-box{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-bottom:20px;
    line-height:1.8;
}

.check-box input{
    margin-top:5px;
    transform:scale(1.3);
}

.check-box a{
    color:var(--color-main);
    font-weight:bold;
    text-decoration:none;
}

.check-box a:hover{
    text-decoration:underline;
}


/* ==========================
   ボタン
========================== */
.button-area{
    text-align:center;
    margin:50px 0;
}

.center{
    text-align:center;
}

/* ==========================
   個人情報保護方針・応募規約　のわく
========================== */
.terms-box{
    height:220px;
    overflow-y:auto;
    border:1px solid var(--color-border);
    background:var(--color-surface-sub);
    padding:10px;
    border-radius:5px;
    margin-bottom:10px;
    line-height:1.8;
    font-size: 12px;
}

/* ==========================
   エラー表示
========================== */
.error{
    color:var(--color-error);
    font-size:14px;
    margin-top:5px;
}

.error-area{
    display:none;
    background:var(--color-error-bg);
    border:2px solid var(--color-error);
    color:#C0392B;
    border-radius:10px;
    padding:20px;
    margin:30px 0;
}

.error-area ul{
    margin:0;
    padding-left:20px;
}

.error-area li{
    margin:8px 0;
    line-height:1.6;
}


/* ===========================
   エラー項目
=========================== */
.input-error{
    border:2px solid var(--color-error) !important;
    background:var(--color-error-light);
}

.input-error:focus{
    border-color:var(--color-error);
    box-shadow:var(--focus-ring-error);
}

/*==============================
確認ダイアログ
==============================*/
.confirm-modal{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.confirm-modal.show{
    display:flex;
}

.modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.modal-overlay.show{
    display:flex;
}
.confirm-box{
    width:90%;
    max-width:420px;
    background:var(--color-white);
    border-radius:var(--radius-lg);
    padding:35px;
    text-align:center;
    box-shadow:var(--shadow-lg);
    animation:popup .25s ease;
}

@keyframes popup{
    from{
        opacity:0;
        transform:translateY(15px) scale(.95);
    }

    to{
        opacity:1;
        transform:none;
    }
}

.confirm-box h3{
    color:var(--color-heading);
    margin-bottom:15px;
}

.confirm-box p{
    color:var(--color-text);
    line-height:1.8;
}

.confirm-buttons{
    display:flex;
    justify-content:center;
    gap:15px;
    margin-top:30px;
}

.confirm-buttons button{
    min-width:130px;
}

/*--ダイアログボタン--*/

.btn-secondary{
    background: var(--color-surface);
    color: var(--color-main-dark);
    border: 2px solid var(--color-main);
    border-radius: var(--radius);
    padding: 12px 28px;
    font-size: 1rem;
    cursor: pointer;
    transition:
        background .2s,
        color .2s,
        transform .2s,
        box-shadow .2s;
}

.btn-secondary:hover{
    background: var(--color-main-pale);
    box-shadow: var(--shadow);
}

.btn-secondary:active{
    transform: translateY(0);
}


/* ==========================
   スマホ
========================== */
@media (max-width:768px){
    .form-section{
        padding:20px;
    }

    .page-title{
        font-size:1.6rem;
    }
}