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

body {
color: #303030;
background-image: url(bg.png);
background-attachment: fixed;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif, Helvetica, Verdana;
border-top: 3px #9090f9 solid;
}
body .container {
width: 850px;
margin: 0 auto;
}



.mail a {
color: #3030ff;
text-decoration: none;
}
.mail a:hover {
color: #0909ff;
text-decoration: underline;
}



header #sitetitle {
float: left;
}
header #sitetitle h1 {
padding: 25px 0 8px 8px;
font-size: 120%;
}
header #address {
float: right;
padding: 50px 0 25px;
}
header #address p {
font-size: 120%;
text-align: right;
line-height: 120%;
color: #3030ff;
}



header nav {
border-bottom: solid 1px #aaaaaa;
}
header nav,
header nav ul {
margin: 0 0 0px 0;
background: #d5eaff;
background: linear-gradient(#d5eaff, #80bfff);
color: #0080ff;
}
header nav ul li {
float: left;
width: 210px;
border-right: solid 1px #aaaaaa;
text-align: center;
}
header nav ul li.navhead {
width: 215px;
border-left: solid 1px #aaaaaa;
}
header nav ul li a {
display: block;
text-decoration: none;
padding: 18px 0;
color: #0000ff;
}
header nav ul li p {
text-decoration: none;
padding: 18px 0;
background: #80bfff;
background: linear-gradient(#d5eaff, #55aaff);
color: #0080ff;
}
header nav ul li a:hover {
background: #80bfff;
background: linear-gradient(#d5eaff, #55aaff);
color: #0080ff;
}




#main .container {
background-color: rgba(255,255,255,0.5);
}

#main #topimg img {
width: 100%;
}
#main #top h2 {
margin: 10px 0 20px 0;
padding: 0 0 3px 0;
text-align: center;
line-height: 150%;
font-size: 170%;
font-weight: bold;
color: #4040ff;
border-bottom: 1px #d4d4d4 solid;
}
#main #top h2 span {
padding: 0 3px;
font-size: 110%;
color: #ff4040;
}
#main #top p {
padding: 20px 0;
font-size: 120%;
text-align: center;
}



#main #pagetitle {
margin: 0 5px;
}
#main #pagetitle h2 {
padding: 40px 0 0 30px;
border-bottom: 1px #e0e0e0 solid;
letter-spacing: 0.1em;
font-size: 180%;
font-weight: bold;
color: #f04040;
}
#main #pagetitle h2 span {
font-size: 70%;
}

#main #pagetitle p {
padding: 20px 0 0 30px;
line-height: 150%;
}



#main section {
padding: 30px;
}

#main section p {
padding: 0 0 30px 0;
font-size: 110%;
text-indent: 0.5em;
line-height: 150%;
text-align: justify;
text-justify: distribute;
}
#main section p span {
font-weight: bold;
color: #ff0000;
}

#main section#info img {
float: right;
margin: 0 0 10px 30px;
width: 380px;
}


#main section#product p {
padding: 0 0 10px 0;
text-align: center;
line-height: 110%;
text-indent: 0;
}
#main section#product p.setsu {
padding: 0 0 30px 0;
text-align: left;
font-size: 90%;
}

#main section#product .proimg {
width: 200px;
float: left;
margin: 30px;
}





#main section#atelier table {
float: left;
width: 420px;
}

#main section#atelier th,
#main section#atelier td {
padding: 20px 10px 20px 10px;
border: 1px #d4d4d4 solid;
vertical-align: middle;
line-height: 120%;
font-size: 100%;
}
#main section#atelier th {
width: 60px;
text-align: left;
font-weight: bold;
}

#main section#atelier iframe {
float: right;
margin: 0 0 0 10px;
width: 350px;
height: 370px;
border: 1px #d4d4d4 solid;
}

#main section#atelier p {
padding: 20px 40px 0 20px;
}
#main section#atelier p.kome {
padding: 10px 5px 0 0;
text-indent: 0;
line-height: 120%;
font-size: 67%;
color: #d50000;
}


#main section h3 {
padding: 20px 20px 0;
font-size: 130%;
font-weight: bold;
}
#main section h3 span {
padding: 0 0 0 20px;
font-size: 90%;
font-weight: normal;
}



#main section.book {
float: left;
width: 300px;
margin: 20px 10px 10px 40px;
padding: 10px;
border: 1px #d4d4d4 solid;
background: #f9f9f9;
}
#main section.book h4 {
margin: 0 0 10px 0;
font-size: 100%;
font-weight: bold;
}
#main section.book img {
float: left;
height: 150px;
margin: 0 15px 10px 10px;
border: 1px #c9c9c9 solid;
}
#main section.book p {
font-size: 90%;
text-indent: 0;
}
#main section.book p span {
font-size: 95%;
letter-spacing: -0.1em;
}



#main section#goods {
padding: 0 30px 60px 30px;
}
#main section.goods {
float: left;
margin: 20px 0;
padding: 20px;
border: 0px #d4d4d4 solid;
}
#main section.goods h4 {
margin: 0px;
padding: 0;
font-size: 120%;
font-weight: bold;
text-align: center;
}
#main section.goods p {
padding: 0 10px 0;
font-size: 100%;
text-indent: 0;
text-align: center;
}
#main section.goods img {
display: block;
float: left;
height: 150px;
margin: 0 auto;
border: 1px #c9c9c9 solid;
}
#main section.goods img.tate {
height: 230px;
}





footer {
padding: 30px 0 0;
background: #d5eaff;
border-top: 1px #c0c0c0 solid;
}
footer #foot .container {
background: #d5eaff;
}

footer address p.s {
font-size: 70%;
}
footer address h1 {
padding: 0 0 5px;
font-size: 170%;
letter-spacing: 0.12em;
}
footer address p {
padding: 0 0 5px;
font-size: 100%;
}
footer address p.copyright {
text-align: right;
font-size: 90%;
}





.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearFix {
min-height: 1px;
}