@charset "utf-8";


/* ----------------------------------------------------
    共通項目
---------------------------------------------------- */
.wrap{
    width: 700px;
    margin: 0 auto;
    text-align: center;
}

@media screen and (max-width: 640px) {
    .wrap{
        width: 96%;
        text-align: center;
    }

}


/* ----------------------------------------------------
    Contact
---------------------------------------------------- */


/* タイトル部分 */
.sec6{
    background: #EAEAEA;
    margin: 0 auto;
    padding-top: 50px;
    padding-bottom: 50px;
}

.sec6 img{
    width: 205px;
}

.sec6 h4{
    font-size: 115px;
    font-weight: bolder;
    color: #F897A4;
}

.sec6 .wrap p{
    text-align: left;
    font-size:12px;
}

.sec6 p:nth-child(2){
    font-weight: lighter;
    font-size: 14px;
}

@media screen and (max-width: 640px) {
    .sec6 h4{
        font-size: 80px;
        font-weight: bolder;
        color: #F897A4;
    }
}


/* 入力部分 */

/* 入力部分共通 */
.form_container{
    width: 700px;
    margin: 0 auto;
    text-align: center;
}

@media screen and (max-width: 640px) {
    .form_container{
        width: 95vw;
        margin: 0 auto;
        text-align: center;
    }
}

.tit_form{/* 項目名 */
    display: flex;
    align-items: center;
    margin: 20px auto 3px;
}

.hissu{
    background: #ff9c00;
    color: #ffff;
    padding: 2px 2px;
    margin-right: 8px;
    font-size: 12px;
}

.input_item{
    width: 100%;
    padding: 12px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

@media screen and (max-width: 640px) {
    .input_item{
        width: 95%;
        padding: 12px;
        border-radius: 5px;
        border: 1px solid #ccc;
    }
}

/*個別部分*/

.seimei{/*姓名*/
    display: flex;
    justify-content: space-between;
}
@media screen and (max-width: 640px) {
    .seimei{/*姓名*/
        display: column;
        justify-content: space-between;
    }
}
.sei{
    width: 45%;
}

.emailcheckbox{/*メール*/
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 16px;
}

.emailcheckbox input{
    font-size: 14px;
}

textarea{/*お問い合わせ*/
    width: 100%;
    padding: 7px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

@media screen and (max-width: 640px) {
    textarea{/*お問い合わせ*/
        width: 95%;
        padding: 7px;
        border-radius: 5px;
        border: 1px solid #ccc;
    }
}


/* チェックボックス */
.checkbox{
    width: fit-content;
    display: grid;
    align-items: center;
    grid-template-columns: auto 1fr; /* auto はアイコン、1fr はラベル文字列を想定 */
    gap: 10px;
    padding: 8px;
    font-size: 16px;
    font-weight: normal;
    line-height: 1.5;
    color: #404040;
}

.checkbox .checkbox-label { /* 子要素セレクタ */
    justify-self: start; /* ラベル自身を左寄せ */
    font-size: 12px;
}


.checkbox_icon {/* チェックボックスのアイコン */
    position: relative;
    width: 14px;
    height: 14px;
    appearance: none;
    background: #FFFFFF;

    border: solid 2px #808080;
    border-radius: 4px;
    box-shadow: 0 0 0 0 transparent;

    /* チェックマーク */
    &::before {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        content: "";
        opacity: 0;
        mask-image: url("icon.svg");
        mask-repeat: no-repeat;
        mask-size: contain;
        background-color: #F897A4;
    }
    &:checked::before {
        opacity: 1;
    }
}

.btncopy{
    /*font-size: 16px;*/
    font-size: 12px;
    text-align: center;
}




.warn_div {
    width: 95%;
    text-align: left;
}
.warn_message {
    font-size: 12px;
    color: #F897A4;
}

.regbtn {/* お問い合わせボタン */
    background-color: #ff9c00;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    width: 300px;
    display: block;
    margin: 10px auto;
}

regbtn:hover {
    background-color: #f5c6cc;
}

.warn_nm_div {
    padding-left: 0px;
    padding-right:24px;
    text-align:left;
}

.a_link {
    text-decoration: none;
    color: #000000;
}