@media screen and (max-width: 900px) {

}


@media screen and (max-width: 700px) {

}






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

.pc {display: none;}
.mb {display: block;}


.youtube iframe {
height: 200px;
}



body .container {
width: 100%;
}

header .sitetitle h1 {
font-size: 140%;
}
header .sitetitle p {
padding: 1px 0;
font-size: 80%;
}

header .headertop .sitetitle h1 {
padding: 8px 0 0;
text-align: left;
font-size: 150%;
line-height: 100%;
}
header .headertop .sitetitle h1 span {
display: block;
font-size: 50%;
}







nav #menu{
display: none;
}
nav #menu li{
width: 100%;
border-top: 0px #333333 solid;
border-bottom: 0px #333333 solid;
border-right: 0px #333333 solid;
border-legt: 0px #333333 solid;
}
nav #menu li.home {
width: 100%;
border: 0px #333333 solid;
}

nav #menu li a{
margin: 0;
padding: 15px 0;
border-bottom: 1px solid #c0c0c0;
}
nav #toggle{
display: block;
position: relative;
width: 100%;
}
nav #toggle a{
display: block;
position: relative;
padding: 12px 0 10px;
border-top: 1px solid #c0c0c0;
border-bottom: 1px solid #c0c0c0;
color: #723838;
text-align: center;
text-decoration: none;
}
nav #toggle:before{
display: block;
content: "";
position: absolute;
top: 50%;
left: 10px;
width: 20px;
height: 20px;
margin-top: -10px;
background: #725538;
}
nav #toggle a:before, #toggle a:after{
display: block;
content: "";
position: absolute;
top: 50%;
left: 10px;
width: 20px;
height: 4px;
background: #ffffff;
}
nav #toggle a:before{
margin-top: -5.5px;
}
nav #toggle a:after{
margin-top: 2.5px;
}



#top .theme {
padding: 40px 0 10px;
}
#top .theme img {
width: 90%;
}
#top .theme p {
font-size: 80%;
}

#top .information {
padding: 10px 30px;
}
#top .information p {
letter-spacing: 0.2em;
line-height: 150%;
font-size: 120%;
}




#jihanki table {
width: 95%;
}




section.jihanki {
width: 95%;
}
section.jihanki h2 {
font-size: 110%;
}
section.jihanki h3 {
font-size: 150%;
}
section.jihanki p {
font-size: 100%;
}
section.jihanki iframe {
width: 100%;
height: 300px;
}




#ponzu .ponzu img {
width: 50%;
}
#ponzu .ponzu h2 {
font-size: 180%;
}


#fugu .fugu img {
margin: 30px auto;
width: 90%;
}



#recruit .recruit img {
margin: 50px auto;
width: 90%;
}


#masscom .masscom img {
margin: 50px auto;
width: 90%;
}









#contact table {
width: 95%;
}
#contact th {
width: 20%;
}

#contact textarea.mfjusyo,
#contact textarea.mftoi {
width: 100%;
}




footer {
margin: 80px 0 0;
}
footer p {
text-align: center;
line-height: 180%;
font-size: 90%;
}
footer p.sitetitle {
font-size: 130%;
}















}









@media screen and (max-width: 500px) {

header .information .sns {
width: 70%;
}

}



@media screen and (max-width: 400px) {

#fee h3 span {
font-size: 70%;
}

#fee table {
font-size: 90%;
}


}



@media screen and (max-width: 350px) {

header .information .sns {
width: 90%;
}

#fee h3 span {
font-size: 70%;
}

#fee table {
font-size: 90%;
}


}