#mainbody #title {
background-color: #241763;
}
#mainbody #title dl:after {
background-image: url("image/mainimage2.jpg");
}
@media screen and (min-width: 641px),print {
#page {}

#details {
text-align: left;
width: 90%;
max-width: 1000px;
margin: 100px auto 150px auto;
padding: 0 1em 0 1em;
box-sizing: border-box;
}
#details dl {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
text-align: left;
font-size: clamp(0.813rem, 0.699rem + 0.57vw, 1.125rem);
line-height: 1.8em;
color: #595959;
border-bottom: 1px solid #B2B2B2;
margin: 0 0 50px 0;
width: 100%;
}
#details dt {
max-width: 20%;
width: 22vw;
box-sizing: border-box;
background-color: #F4F4F4;
padding: 1em;
border-top: 1px solid #B2B2B2;
}
#details dd {
max-width: 80%;
width: 78vw;
box-sizing: border-box;
padding: 1em 1.5em 1em 1.5em;
border-top: 1px solid #B2B2B2;
}
#details dd p {
margin-bottom: 1em;
}
#mainbody p.bt {
font-size: clamp(1rem, 0.636rem + 1.82vw, 2rem);
line-height: 1.8em;
font-family: ryo-gothic-plusn, sans-serif;
font-weight: 700;
font-style: normal;
max-width: 560px;
width: 60%;
margin: 0px auto 0 auto;
height: auto;
}
#mainbody p.bt a {
color: #FFF;
background-color: #463C69;
display: block;
border-radius: 0;
text-align: center;
text-decoration: none;
padding: 0.7em 0 0.7em 0;
position: relative;
}
#mainbody p.bt a:after {
content: '';
display: inline-block;
width: 38px;
height: 30px;
background-image: url("../image/icon_mail.png");
background-size: contain;
vertical-align: middle;
position: absolute;
border-style: none;
transform: rotate(0);
top: 35%;
right: 5%;
}
#mainbody p.bt a:hover {
background-color: #830324;
}
#mainbody p.bt a:hover:after {
right: 5%;
border-color: none;
}
#contact {
padding: 0px 0 30px 0;
}
#contact dl {
border: 1px solid #e0699f;
width: 80%;
margin: 40px auto 0 auto;
}
#contact dd {
width: 100%;
max-width: 100%;
padding: 30px 0 30px 0;
text-align: center;
border: none;
}
}

@media screen and (min-width: 0px) and (max-width: 640px) {

#details {
text-align: left;
width: 100%;
margin: 40px auto 50px auto;
padding: 0 1em 0 1em;
box-sizing: border-box;
}
#details dl {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
text-align: left;
font-size: clamp(0.813rem, 0.699rem + 0.57vw, 1.125rem);
line-height: 1.3em;
color: #595959;
border-bottom: 1px solid #B2B2B2;
margin: 0 0 30px 0;
width: 100%;
}
#details dt {
max-width: 20%;
width: 22vw;
box-sizing: border-box;
background-color: #F4F4F4;
padding: 0.5em;
border-top: 1px solid #B2B2B2;
}
#details dd {
max-width: 80%;
width: 78vw;
box-sizing: border-box;
padding: 1em 1.5em 1em 1.5em;
border-top: 1px solid #B2B2B2;
}
#details dd p {
margin-bottom: 1em;
}
#mainbody p.bt {
font-size: clamp(1rem, 0.636rem + 1.82vw, 2rem);
line-height: 1.3em;
font-family: ryo-gothic-plusn, sans-serif;
font-weight: 700;
font-style: normal;
width: 80%;
margin: 0px auto 0 auto;
height: auto;
}
#mainbody p.bt a {
color: #FFF;
background-color: #463C69;
display: block;
border-radius: 0;
text-align: center;
text-decoration: none;
padding: 0.7em 0 0.7em 0;
position: relative;
}
#mainbody p.bt a:after {
content: '';
display: inline-block;
width: 19px;
height: 15px;
background-image: url("../image/icon_mail.png");
background-size: contain;
vertical-align: middle;
position: absolute;
border-style: none;
transform: rotate(0);
top: 35%;
right: 5%;
}
#contact dl {
width: 100%;
margin: 20px auto 40px auto;
padding: 0;
}
#contact dd {
width: 100%;
max-width: 100%;
padding: 20px 0 0px 0;
text-align: center;
border: none;
}
}