@charset "utf-8";

/*共通
─────────────────────────────────────*/
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
#container {
flex: 1 0 auto;
}
.page_title {
letter-spacing: 3px;
text-align: center;
}
@media screen and (max-width:900px) {
.page_title {
margin: 3rem auto 1.5rem auto;
font-size: 1.3rem;
}
}
@media screen and (min-width:901px) {
.page_title {
margin: 4rem auto 2rem auto;
font-size: 2rem;
}
}
.top_message {
margin: 0;
text-align: center;
}
footer {
margin-top: auto;
}

/*フォーム
─────────────────────────────────────*/
.form {
margin: 3rem auto 0 auto;
max-width: 30rem;
}
.input {
width: 100%;
padding: 0.5rem;
border: 1px solid #BBB;
box-sizing: border-box;
}
.form textarea {
height: 15rem;
}
.item {
margin: 1rem 0 0 0;
}
.item:first-child {
margin: 0;
}
.hissu {
margin: 0 0 0 1rem;
color: red;
}

/*ボタン
─────────────────────────────────────*/
.btn {
margin: 3rem 0;
text-align: center;
}
.submit {
padding: 1rem 2rem;
display: inline-block;
border-radius: 5px;
background: #2AA4AA;
border: 1px solid #2AA4AA;
color: #FFF;
letter-spacing: 3px;
}
.submit:hover {
background: none;
border: 1px solid #2AA4AA;
color: #2AA4AA;
font-weight: bold;
}
.submit + .submit {
margin: 0 0 0 2rem;
}
.msg {
text-align: center;
color: red;
}