@charset "UTF-8";

html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, header, hgroup, section, srticle, aside, footer, figure, figcaption, nav
{
margin:0;
padding:0;
font-size:100%;
}

body
{
width:100%;
background:#ffffff;
font-family:ArialMT, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", メイリオ, sans-serif;
-webit-text-size-adjust:100%;
line-height:1.2;
color:#333333;
font-size:12px;
}

.contents{
display:flex;
justify-content:flex-end;
}

#tag{
display:inline-block;
line-height:48px;
margin:0 5% 0 0;
padding:0 3px 0 3px;
border-radius:0 0 4px 4px;
border-right:solid 2px #dddddd;
background:-webkit-linear-gradient(bottom,rgba(71,136,254,1) 0%,rgba(0,89,255,1) 99%,rgba(23,23,232,1) 100%);
background:linear-gradient(to top,rgba(71,136,254,1) 0%,rgba(0,89,255,1) 99%,rgba(23,23,232,1) 100%);
box-shadow:0 2px 0 #dddddd;
font-size:14px;
font-weight:bold;
color:#ffffff;
}

h1{
margin:16px 0 0 8px;
font-size:1.2em;
}

h1::after{
content:"";
display:block;
width:98%;
height:2px;
background:-webkit-linear-gradient(right,rgba(71,136,254,0.8) 0%,rgba(3,123,243,1) 100%);
background:linear-gradient(to left,rgba(71,136,254,0.8) 0%,rgba(3,123,243,1) 100%);
}

legend{
padding:0 5px 0 5px;
font-weight:bold;
color:#777777;
}

fieldset{
margin:20px 8px;
padding-bottom:20px;
}

p{
margin:18px 0 16px 8px;
}

.checkbox{
display:flex;
}

.box{
display:inline-block;
margin:0 10px 0 0;
}

.radiobox{
display:flex;
}

.radio{
display:inline-block;
margin:0 10px 0 0;
}

textarea{
margin:8px 0 4px 0;
}

dt{
margin:14px 0 6px 2px;
padding:0 0 0 5px;
border-left:solid 5px #037bf3;
}

.bottom:not(:last-child){
margin: 0 0 12px 0;
padding: 0 0 14px 0;
border-bottom:solid 1px #cccccc;
}

.comment{
margin: 5px 0 5px 5px;
}

#btn{
display:block;
width:220px;
height:44px;
margin:20px auto;
border-radius:7px;
background:-webkit-linear-gradient(top,rgba(71,136,254,1) 0%,rgba(0,89,255,1) 99%,rgba(23,23,232,1) 100%);
background:linear-gradient(to bottom,rgba(71,136,254,1) 0%,rgba(0,89,255,1) 99%,rgba(23,23,232,1) 100%);
font-size:1.2em;
font-weight:bold;
color:#ffffff;
}

.attention{
margin: 0 0 12px 8px;
font-size:0.9em;
color:#037bf3;
}

.title{
font-size:1em;
font-weight:bold;
line-height:1;
}

.kome{
margin:0 0 0 6px;
font-size:0.9em;
color:#037bf3;
}

.reply{
margin:50px 10px 120px 0;
}

@media(min-width:768px){

body{
max-width:860px;
margin-left:auto;
margin-right:auto;
}

#btn{
cursor:pointer;
}

h1{
font-size:1.8em;
}

h1::after{
width:99%;
box-shadow:2px 2px 0 #dddddd;
}

fieldset{
margin-bottom:24px;
}

legend{
font-size:1.1em;
}

.attention{
font-size:1em;
}

.kome{
font-size:1em;
}

#btn{
width:330px;
margin:30px auto;
}

#tag{
line-height:40px;
margin:0 2% 0 0;
padding:0 25px 0 25px;
font-size:1.6em;
}

}