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

}









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

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



body .container {
width: 100%;
}


header .sitetitle h1 {
padding: 30px 0;
font-size: 200%;
}
header .sitetitle p {
padding: 0 0 30px 0;
text-align: center;
}


div.menuandimg {
display: block;
padding: 0;
}




nav #menu{
display: none;
}
nav #menu li{
width: 100%;
margin: 0;
font-size: 100%;
border-radius: 0;
border: 0px #0080ff solid;
}
nav #menu li a{
margin: 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;
}



div.siteimg img {
width: 90%;
margin: 20px auto 0;
}


section {
font-size: 110%;
line-height: 140%;
}

section h2 {
padding: 15px;
text-align: left;
}

section h3 {
margin: 0 0 5px 20px;
}





#tatoeba li {
float: none;
margin: 0 15px 0 40px;
}
#tatoeba p {
}


#mazuwa p {
padding: 0 1em 0 2em;
text-indent: -1em;
}


#zehi p.soudanin {
text-align: left;
padding: 0 1em 20px 2em;
text-indent: -1em;
}
#zehi p.korean {
text-align: left;
padding: 0 1em;
}


#date p {
font-size: 90%;
}

#date p.brackets {
padding: 5px 0 20px 5em;
}
#date img {
display: none;
}
#date p.date {
padding: 5px 0 0 3em;
}
#date p.seconddate {
padding: 5px 0 0 9em;
}




#place p {
padding: 5px 0 0 1em;
}
#place p.brackets {
padding: 5px 0 0 5em;
}
#place img {
width: 80%;
margin: 20px 50px 10px;
}




#fee p {
padding: 0 10px 20px 30px;
font-size: 90%;
}
#fee p.free {
padding: 0 0 20px 40px;
}
#fee img {
width: 200px;
margin: 10px auto 0;
}


#contact p {
padding: 0 15px 0 30px;
}


#announce p {
padding: 0 15px 0 30px;
}

#announce dl {
padding: 20px 20px 0 30px;
}




footer {
padding: 30px 0 15px 2em;
background: #c7e2d5;
}











}









@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%;
}


}