/*レイアウト*/
body{background:#eee;}
h1{
    font-size:1.5em;
    color:#1b9aaa;
    text-align:center;
    margin:40px 0 20px;
}
form{
    width:90%;
    max-width:800px;
    margin:0 auto 40px;
    background:#fff;
    padding:40px 0;
}
dl{
    margin:0 auto;
    width:500px;
}
.form-item{
    display:flex;
    justify-content:center;
    margin-bottom:40px;
}
dt{width:200px;}
dd{width:300px;}
input[type="text"],input[type="email"],select,textarea{
    display:block;
    width:100%;
    font-size:16px;
}
.form-submit{text-align:center;}

/*モバイル用CSS*/
@media screen and (max-width:768px){
    form{padding:20px 0;}
    dl{width:80%;}
    .form-item{display:block;
               transform: translateX(-10%);}
    dt{width:100%;}
    dd{width:100%;}
}

/*装飾*/
dt,dd,select,input,textarea{color:#666;}
dt::before{
    content:"◆";
    color:#1b9aaa;
    padding-right:6px;
}
input[type="text"],
input[type="email"],select,textarea{
    border:1px solid #ccc;
    background:#fff;
    padding:0.3em+；
}
select{height:2em;}

.label-radio{margin-right:1em;}
input[type="radio"]{
    width:16px;
    height:16px;
    margin-right:4px;
}

textarea{min-height:100px;}

input[type="submit"]{
    background:#1b9aaa;
    width:200px;
    padding:0.5em;
    color:#fff;
    font-size:16px;
    border:none;
    border-radius:4px;
}

/*PC用ホバー設定*/
@media screen and (min-width:769px){
    input[type="submit"]:hover{
        background:#147581;
    }
}

/*モバイル用CSS*/
@media screen and (max-width:768px) {
    dt{margin-bottom:10px;}
    input[type="submit"]{
        padding:1em;
    }
}