@charset "utf-8";

/* ================================================================================= ini */
* {
margin: 0;
padding: 0;
}

html {
/*font-size: 62.5%;*/
scroll-behavior: smooth;
}

body {
font-family: Roboto,"Helvetica Neue",Arial,sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px;
margin-bottom: 8px;
overflow-wrap: break-word;
}

h1,h2,h3,h4,h5,h6 {
font-size: 100%;
}

p {
font-size: 14px;
font-weight: 400;
line-height: 28px;
}

hr {
border: none;
height: 1px;
background-color: #f1f3f4;
margin: 16px 0;
}

table {
border-collapse: collapse;
}

table th {
white-space: nowrap;
}

ul,ol {
list-style: none;
}

img {
border: none;
vertical-align: middle;
}

em,address {
font-style: normal;
}

a {
text-decoration: none;
outline: none;
}

a:hover {
text-decoration: underline;
}

/* ================================================================================= common */
#page {
margin: 0 auto;
box-sizing: border-box; 
}

#header {
width: 100%;
text-align: center;
padding: 16px 16px;
margin: 0 auto;
background: #fff;
color: #1f1f1f;
font-family: Google Sans,Roboto-Medium,HelveticaNeue-Medium,Helvetica Neue,sans-serif-medium,Arial,sans-serif;
font-size: 24px;
font-weight: 500;
box-sizing: border-box;
position: fixed;
top: 0;
z-index: 1;
border-bottom: 1px solid #f1f3f4;
line-height: 1.2;
}

#header img.logo {
max-width: 800px;
}

#container {
width: 800px;
margin: 100px auto 100px;
box-sizing: border-box;
padding: 30px 0;
}

#footer {
width: 100%;
text-align: center;
padding: 10px 0;
margin: 0 auto;
box-sizing: border-box; 
font-size: 10.5px;
font-weight: 200;
}

.btn01 {
margin-top: 30px;
}

.btn01 li a {
display: flex;
width: 100%;
height: 36px;
font-size: 14px;
font-weight: 600;
text-align: center;
text-decoration: none;
margin: 0 auto 16px;
box-sizing: border-box;
background-color: transparent;
border: 1px solid #d2d2d2;
color: #474747;
border-radius: 8px;
align-items: center;
justify-content: center;
}

.btn01 li a:hover {
background-color: #a4c9fc;
}

ul.btn01 li span {
font-size: 18px;
}

ul.btn01 li span.tyuu {
font-size: 14px;
}

.qu {
width: 100%;
margin: 16px 0;
display: flex;
gap: 15px;
align-items: center;
}

.qu p {
font-size: 18px;
font-weight: 500;
line-height: 24px;
}


/* ================================================================================= form */
#form textarea {
width: calc(100% - 30px);
min-height: 25.0em;
padding: 15px;
font-size: 14px;
/*font: normal 100%/1.2 'メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;*/
font-family: Roboto,"Helvetica Neue",Arial,sans-serif;
margin-bottom: 16px;
}

#form .form_btn input {
display: flex;
width: 100%;
height: 36px;
font-size: 14px;
font-weight: 600;
text-align: center;
text-decoration: none;
margin: 0 auto 16px;
box-sizing: border-box;
background-color: transparent;
border: 1px solid #d2d2d2;
color: #474747;
border-radius: 8px;
align-items: center;
justify-content: center;
}

#form .form_btn input:hover {
background-color: #a4c9fc;
}

input[type="text\""] {
display: flex;
width: 100%;
height: 36px;
font-size: 14px;
font-weight: 600;
text-align: center;
text-decoration: none;
margin: 0 auto 16px;
box-sizing: border-box;
background-color: transparent;
border: 1px solid #d2d2d2;
color: #474747;
border-radius: 8px;
align-items: center;
justify-content: center;

}



/* ##################################################################################################################### < 800px */
@media only screen and (max-width:800px) {

html {
}

body {
/*font-size: 1.4rem;
line-height: 1.6;*/
}

img {
max-width: 100%;
height: auto;
}

#page {
width:100%;
}

#header {
width: 100%;
}

#header img.logo {
max-width: calc(100vw / 1 );
}

#container {
width: 100%;
margin: 93px auto 30px;
padding: 16px 15px;
}

#footer {
width: 100%;
font-size: 80%;
}

.btn01 li a {
}

.spbr {
display: block;
}

}