/* =========================
   ab7_form.css（修正版）
   適用対象：#eventDate 配下のみ
========================= */
@charset "UTF-8";

/* --- テキストフィールド--- */
#eventDate form input[type="text"],
#eventDate form textarea{
    font-size:16px;
    margin:1px 0;
    background-color:#fff;
    color:#111;
    border:1px #bbc solid;
    padding:0.5em;
    border-radius:5px;
    line-height:1.4;
    box-sizing:border-box;
}

#eventDate form .search{
    background-image:url("../_css/_form_icon/Icon-material-search_GY.png");
    background-repeat:no-repeat;
    background-position:center left 0.5em;
    background-size:1.1em 1.1em;
    padding-left:2em !important;
    width:480px;
}

#eventDate form .calendar{
    background-image:url("../_css/_form_icon/icon_calender.png");
    background-repeat:no-repeat;
    background-position:center right 0.5em;
    background-size:1.1em 1.1em;
    padding-right:2em !important;
    width:170px;
    cursor:pointer;
}

#eventDate form input[type="text"]:focus,
#eventDate form textarea:focus{
    background-color:#f7fff7;
}

/* --- placeholder --- */
#eventDate ::-webkit-input-placeholder{
    color:#aaa;
    font-style:oblique;
    font-size:90%;
}
#eventDate ::-moz-placeholder{
    color:#aaa;
    font-style:oblique;
    font-size:90%;
}
#eventDate :-ms-input-placeholder{
    color:#aaa;
    font-style:oblique;
    font-size:90%;
}
/* typo 修正：placeholder-shownr → placeholder-shown */
#eventDate :placeholder-shown{
    color:#aaa;
    font-style:oblique;
    font-size:90%;
}

/* --- プルダウンメニュー --- */
#eventDate .selectbox01{
    display:inline-flex;
    align-items:center;
    position:relative;
}
#eventDate .selectbox01::after{
    position:absolute;
    right:1em;
    width:1em;
    height:1em;
    background-color:#777;
    clip-path:polygon(10% 20%, 0 30%, 30% 60%, 50% 80%, 70% 60%, 100% 30%, 90% 20%, 50% 60%);
    content:'';
    pointer-events:none;
}

/* テンプレの select 共通指定に負けないように、#eventDate スコープで固定 */
#eventDate .selectbox01 select{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    min-width:300px;
    padding:0.5em 3em 0.5em 0.5em;
    border:1px solid #cccccc;
    border-radius:5px;
    background-color:#fff;
    color:#111;
    font-size:16px;
    cursor:pointer;
    box-sizing:border-box;
    height:auto;           /* テンプレの高さ固定に寄せたくない場合の保険 */
    min-height:2.2em;
}

/* --- チェクボックス --- */
#eventDate .checkbox01{
    display:flex;
    flex-wrap:wrap;
    gap:1em 2em;
    border:none;
    width:730px;
    margin-left:8px;
}
#eventDate .checkbox01 label{
    display:flex;
    align-items:center;
    gap:0 .5em;
    position:relative;
    cursor:pointer;
    font-size:15px;
    white-space:nowrap;
    min-width:20em;
}
#eventDate .checkbox01 label::before,
#eventDate .checkbox01 label:has(:checked)::after{
    content:'';
}
#eventDate .checkbox01 label::before{
    width:24px;
    height:24px;
    border-radius:5px;
    border:1px solid #aaa;
    background-color:#fefefe;
}
#eventDate .checkbox01 label:has(:checked)::before{
    background-color:#aaa;
}
#eventDate .checkbox01 label:has(:checked)::after{
    position:absolute;
    top:1px;
    left:8px;
    transform:rotate(45deg);
    width:7px;
    height:15px;
    border:solid #fff;
    border-width:0 3px 3px 0;
}
#eventDate .checkbox01 input{
    display:none;
}

/* ------- submitBtn ------- */
/* テンプレの input[type=submit]/button 共通指定に負けないよう、型+クラス+スコープで指定 */
#eventDate input[type="submit"].submitBtn1,
#eventDate button.submitBtn1{
    border-radius:7px;
    border:1px solid #000;
    font-size:16px;
    color:#fff;
    cursor:pointer;
    line-height:2.5;
    padding:0 5em;
    background-color:#222;
    background-image:url("../_css/_form_icon/Icon material-search_WH.svg");
    background-repeat:no-repeat;
    background-position:center left 3.5em;
    background-size:1.1em 1.1em;
    margin:0 0.5em;
}
#eventDate input[type="submit"].submitBtn1:hover,
#eventDate button.submitBtn1:hover{
    opacity:0.75;
}

#eventDate input[type="button"].submitBtn2,
#eventDate button.submitBtn2{
    border-radius:7px;
    border:1px solid #555;
    font-size:16px;
    color:#111;
    cursor:pointer;
    line-height:2.5;
    padding:0 1em;
    background-color:#fff;
    margin:0 0.5em;
}
#eventDate input[type="button"].submitBtn2:hover,
#eventDate button.submitBtn2:hover{
    opacity:0.75;
}

/* --- pagination --- */
#eventDate .Pagination{
    font-size:19px;
    margin-bottom:1em;
}
#eventDate .Pagination a{
    display:inline-block;
    min-width:2em;
    margin:0 .5em;
    text-align:center;
    white-space:nowrap;
    color:#1E77C9;
    font-weight:550;
    text-decoration:none;
    opacity:1;
    transition:.2s linear;
}
#eventDate .Pagination a:hover{
    text-decoration:none;
    opacity:0.7;
    transition:.2s linear;
}
#eventDate .Pagination span{
    display:inline-block;
    min-width:2em;
    margin:0 .5em;
    text-align:center;
    white-space:nowrap;
}
#eventDate .Pagination a.pNum{
    color:#777;
}

/* ---------------------------- スマホ --------------------------- */
@media screen and (max-width:767px){

#eventDate form input[type="text"],
#eventDate form textarea{
    font-size:4.3vw;
}
#eventDate form .search{
    width:91vw;
}
#eventDate .selectbox01 select{
    min-width:91vw;
    width:91vw;
    font-size:4.3vw;
    box-sizing:border-box;
}
#eventDate form .calendar{
    width:40vw;
}

/* --- チェクボックス --- */
#eventDate .checkbox01{
    display:block;
    width:100%;
    margin-left:0;
}
#eventDate .checkbox01 label{
    font-size:4vw;
    margin-bottom:1.2em;
}
#eventDate .checkbox01 label::before{
    width:6.5vw;
    height:6.5vw;
    border-radius:5px;
}
#eventDate .checkbox01 label:has(:checked)::after{
    position:absolute;
    top:0.3vw;
    left:2.1vw;
    width:1.9vw;
    height:4vw;
    border:solid #fff;
    border-width:0 3px 3px 0;
}

/* ------- submitBtn ------- */
#eventDate input[type="submit"].submitBtn1,
#eventDate button.submitBtn1{
    font-size:4.3vw;
    line-height:2.5;
    padding:0 25vw;
    margin:0 0.5em;
}
#eventDate input[type="button"].submitBtn2,
#eventDate button.submitBtn2{
    font-size:4.3vw;
    line-height:2.5;
    padding:0 4vw;
    margin:0 0.5em;
}

/* --- pagination --- */
#eventDate .Pagination{
    font-size:4vw;
    margin-bottom:1em;
}
#eventDate .Pagination a{
    display:inline-block;
    min-width:7.5vw;
    margin:0 .2em;
}
#eventDate .Pagination span{
    min-width:7.5vw;
    margin:0 .2em;
}
#eventDate .Pagination s{
    font-size:3vw;
    font-weight:550;
    color:#aaa;
    padding:0;
    margin:0;
}
}/* スマホ */