@charset "utf-8";
/* 文字コードの指定 */
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');

/*----------------------------------------------------------- 
    お問合せ(contact)の CSS
------------------------------------------------------------*/
main{
    width:100%;
    background-color:  var(--base-color);
    font-size: var(--font-size-m);
}

h2{
    font-size: var(--font-size-l);
}

h3{
    font-size: var(--font-size-m);
}

.form_wrap{
    margin-top: 2rem;
}

.message{
    text-align: left;
}

.item_container{
    display: flex;
    flex-direction : column;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
}

.item_wrap{
    display: flex;
    flex-wrap:wrap;
    flex-direction: row;
    align-items: center;
    padding: .5rem 0;
    border-right: .1rem solid var(--main-border-color);
    border-left: .5rem solid var(--main-color1);
    border-top: .1rem solid var(--main-border-color);
    width: 100%;
    box-sizing: border-box;
}

.item_wrap:last-child{
    border-bottom: .1rem solid var(--main-border-color);
}

.item_wrap span.type_required::before {
    position: absolute;
    content: '必 須';
    right: 1rem;
    top: 0;
    height: 100%;
    background-color: var(--accent-color2);
    padding: .5rem 1rem;
    display: inline-block;
    font-size: var(--font-size-s);
    line-height: 1;
    color: var(--invert-main-text-color);
    box-sizing: border-box;
}
.item_title{
    position: relative;
    width:30%;
    padding-left: 1rem;
    box-sizing: border-box;
    
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.item{
    width:70%;
    padding-left: 1rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
}
input{
    width: 99%;
    font-size: var(--font-size-m);
}
input:focus {
    background-color: var(--input-focus-back-color);
    outline: .2rem black solid;
}

textarea{
    padding: .5rem .5rem; 
    border: .2rem solid var(--main-border-color); 
    border-radius: .3rem;
    box-sizing: border-box;
    line-height: 1.2;
    width: 99%;
    font-size: var(--font-size-m);
}
textarea:focus {
    background-color: var(--input-focus-back-color);
    outline: .2rem black solid;
}

.item span{
    padding-left: 2rem;
    height: 100%;
}
/* エラーメッセージ用 */
.error_msg {
    padding:0 .1rem;
    padding-left: 1rem;
	font-weight: normal;
	color: var(--accent-color2);
	margin: 0;
    overflow-wrap: normal;
    width: 100%;
    text-align: left;
}
/* 同意書チェック */
.agree_wrap{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.agree_comment{
    font-weight: 700;
    width: 100%;
    text-align: center;
}

.agree_check_wrap{
    margin-top: 2rem;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-weight: 700;
}

.agree_check_wrap .agree_check_box{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-weight: 700;
}

.agree{
    width:var(--font-size-l);
    height:var(--font-size-l);
    margin: 0 1rem;
}

.agree:checked+label{
    color: var(--main-color);
}

.btn_submit{
    opacity: 0.5;
}

.btn_submit:enabled{
    color: var(--white);
    background: var(--accent-color2);
}

.agree_wrap a{
    color: var(--accent-color);
    text-decoration:underline;
}

/* --------------------------------------------------
	以上が 1300pxを超えるＰＣ端末環境設定
----------------------------------------------------- */
/* --------------------------------------------------
	ここから 1300px以下のタブレッド端末環境設定
----------------------------------------------------- */
@media screen and (max-width: 1300px){
}
/* --------------------------------------------------
	ここから 768px以下のタブレッド端末環境設定
----------------------------------------------------- */
@media screen and (max-width: 768px){
    .item_wrap{
        flex-direction: column;;
    }

    .item_title{
        width: 100%;
        padding-top: .5rem;
        padding-bottom: .5rem;
    }

    .item{
        width: 100%;
    }

    .item_wrap span.type_required::before {
        display:none;
    }
    .item_title .label_type_required::after{
        content: '必 須';
        margin-left: 1rem;
        height: 100%;
        background-color: var(--accent-color2);
        padding: .5rem 1rem;
        display: inline-block;
        font-size: var(--font-size-s);
        line-height: 1;
        color: var(--invert-main-text-color);
        box-sizing: border-box;
    }
}
/* --------------------------------------------------
	ここから 480px以下のモバイル端末環境設定
----------------------------------------------------- */
@media screen and (max-width:480px){
}