@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap');

body{
margin:0;
padding:0;
font-family: 'Noto Sans JP', sans-serif;
font-size:16px;
color:#000000;
line-height:170%;
letter-spacing:0.1em;
}
body > div{
display: flex;
flex-direction: column;
min-height: 100vh;
}
header{
text-align:center;
/*border-bottom:2px solid #000;*/
}
header h1{
font-weight:500;
}
header img{
width:100%;
}
main{
padding:20px 0;
}
footer{
margin-top: auto;
text-align:center;
padding:20px 0;
}
h2{
font-weight:500;
text-align:center;
}
input[type="text"]{
box-sizing:border-box;
}
button{
display:block;
margin:20px auto;
background:#0066ff;
color:#ffffff;
border:0;
border-radius:5px;
}
button:hover{
cursor:pointer;
}
button.back{
background:#999;
}
button.cancel{
background:#ff0000;
}
select{
padding:3px;
color: #000;
}
dl,dt,dd{
margin:0;
}
dd{
margin-bottom:20px;
}
dl#table{
}
dl#table dt{
margin-bottom:10px;
}
dl#table dt span{
display:block;
}
dl#table dd strong{
display:block;
color:#ff0000;
}
div#submitArea{
margin:50px 0;
text-align:center;
}
#flashMessage{
color:#ff0000;
font-weight:500;
margin-bottom:20px;
}
#flashMessage.change{
background:#0066ff;
margin-bottom:40px;
padding:20px 0;
color:#fff;
text-align:center;
}
span.red{
font-weight:bold;
color:#ff0000;
}
p.attention{
border-bottom:2px solid #999;
}
div.show{
background:#e39000;
color:#fff;
text-align:center;
font-weight:500;
}

/*
   PC -----------------------------------
 */
@media screen and (min-width: 429px){

.sp{
display:none;
}

input[type="text"]{
padding:3px 5px;
}
input[type="text"].middle{
width:50%;
}
input[type="text"].long{
width:90%;
}
input[type="text"].vshort{
width:100px;
}


select{
width:60%;
}

body > div{
width:700px;
margin:0 auto;
}
header h1{
font-size:30px;
margin:30px 0;
}
dl#table dt span{
font-size:12px;
line-height:180%;
}
dl#table dd strong{
font-size:15px;
}
button{
padding:15px 0;
width:300px;
}
p.attention{
font-size:15px;
padding-bottom:20px;
margin-bottom:50px;
}
div.show{
font-size:18px;
padding:30px 0;
}


} /* END:PC */

/*
   MOBILE -----------------------------------
 */
@media screen and (max-width:428px){

.sp{

}

main,footer{
margin:0 20px;
}
header h1{
font-size:20px;
margin:0 0;
}
select{
width:80%;
}

dl#table dt span{
font-size:12px;
line-height:160%;
}
dl#table dd strong{
font-size:15px;
}
dl#table input[type="text"]{
width:100%;
}
dl#table input[type="text"].vshort{
width:100px;
}
h2{
font-size:17px;
margin:10px;
}
button{
padding:15px 0;
width:300px;
}
h2 + p,
#flashMessage{
font-size:14px;
line-height:150%;
}

p.attention{
font-size:13px;
padding-bottom:30px;
margin-bottom:30px;
}
div.show{
font-size:16px;
padding:30px 0;
}



} /* END:MOBILE */