@import "reset.css";
@charset "UTF-8";

body {
color: #060606;
font-family: sans-serif;
text-align: justify;
text-justify: distribute;
}

body .container {
max-width: 800px;
margin: 0 auto;
}

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

*, 
*:before, 
*:after { 
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; 
} 


ruby rt {
font-size: 30%;
}


header {
margin: 0 auto;
border-top: 5px #4e95dc solid;
border-bottom: 5px #4e95dc solid;
background: #ffd5aa;
}

header .sitetitle h1 {
padding: 50px 0;
text-align: center;
font-weight: bold;
font-size: 350%;
}
header .sitetitle p {
padding: 10px 50px 50px 10px;
text-align: right;
}





div.menuandimg {
padding: 20px 0 0;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
}



nav #menu {
max-width: 900px;
margin: 0 auto;
}

nav #menu li {
margin: 25px 0;
width: 200px;
font-size: 120%;
text-align: center;
border-radius: 10px;
border: 3px #0080ff solid;
}
nav #menu li a{
display: block;
padding: 20px 0 10px;
text-decoration: none;
color: #333333;
}
nav #menu li a:hover{
background: #f3f3f3;
}
nav #toggle{ 
display: none;
}


div.siteimg img {
display: block;
margin: 0 50px 0 0;
}





section {
margin: 50px auto;
font-size: 120%;
line-height: 150%;
}

section h2 {
padding: 15px 0;
text-align: center;
font-size: 140%;
font-weight: bold;
}

section h3 {
margin: 0 0 10px 0;
padding: 0;
font-weight: bold;
background: #ffff80;
}



#tatoeba ul {
list-style-type: disc;
list-style-position: inside;
}
#tatoeba ul ::marker{
font-size: 50%;
}
#tatoeba ul span {
vertical-align: -0.25em;
}
#tatoeba li {
float: left;
margin: 0 30px;
line-height: 200%;
text-indent: -15px;
}
#tatoeba h2 {
margin: 0 0 0 15px;
padding: 0;
line-height: 200%;
text-align: left;
font-size: 110%;
font-weight: normal;
}
#tatoeba p {
clear: left;
margin: 0 0 0 1.5em;
line-height: 200%;
}


#mazuwa p {
text-indent: 3em;
line-height: 230%;
}


#zehi p {
padding: 0 0 30px 0;
text-align: center;
line-height: 180%;
}


#date p.dateandtime {
padding: 5px 0 0 2em;
}
#date p.brackets {
padding: 5px 0 20px 18em;
}
#date h4 {
padding: 5px 0 0 2em;
}
#date p.date {
padding: 5px 0 0 4em;
}
#date p.seconddate {
padding: 5px 0 0 10em;
}
#date img {
display: block;
float: right;
width: 200px;
}


#place {
clear: right;
}
#place p {
padding: 5px 0 0 2em;
}
#place p.brackets {
padding: 5px 0 0 6em;
}
#place img {
width: 500px;
display: block;
margin: 20px auto 10px;
}
#place a {
display: block;
font-size: 80%;
text-align: center;
color: #060606;
}
#place a:hover {
color: #2b95ff;
}



#fee p {
padding: 0 0 20px 80px;
}
#fee p.free {
font-size: 120%;
}
#fee img {
margin: 0 0 0 40px;
float: right;
}


#contact {
clear: right;
}

#contact p {
padding: 0 0 0 80px;
}

#announce p {
padding: 0 0 0 80px;
}
#announce p.big {
font-style: italic;
font-weight: bold;
color: #363636;
}
#announce p.red {
color: #cc3333;
}

#announce dl {
padding: 20px 0 0 80px;
}
#announce dt {
float: left;
padding: 0 8px;
border: 1px #999999 solid;
border-radius: 6px;
}
#announce dd {
padding: 0 0 0 90px;
}






footer {
margin: 100px 0 0;
padding: 30px 0 15px 0;
background: #c7e2d5;
}

footer p {
line-height: 140%;
}