@charset "utf-8";

@import "reset.css";

body {
border-top:5px solid #372722;
background-color:#372722;
}

body.popup {
border-top:none;
background-color:#000;
}

/* container */
#wrapper01 {
background-color:#22170F;
}

#wrapper02 {
width:900px;
margin:0 auto;
padding-bottom:28px;
}

#wrapper04 {
width:820px;
margin:0 auto;
background:#22170F;
}

/* header */
#header01 {
margin-bottom:4px;
padding-top:9px;
}
#header01 p {
float:left;
padding-left:5px;
margin-right:10px;
}
#header01 h1 {
margin-left:135px;
color:#ccc;
}
#header01 ul {
float:right;
margin-top:10px;
}
#header01 ul li {
float:left;
margin-left:20px;
}

/* header02 */
#header02 .div01{
position:relative;
height:47px;
background:url(../common/popup_bg_01.png) #4C3322 bottom;
border-bottom:#5A3E29 solid 1px;
}
#header02 .div01 p{
position:absolute;
top:9px;
left:29px;
}
#header02 .div01 h1 {
padding-top:9px;
margin-left:135px;
color:#ccc;
}
#header02 .div01 .img01{
position:absolute;
top:21px;
left:743px;
cursor:pointer;
}
#header02 h2{
height:56px;
line-height:56px;
color:#fff;
font-size:20px;
text-indent:29px;
}

/* global nav */
#gnavi01 {
clear:both;
height:100%;
border-top:1px solid #79271C;
padding-top:1px;
padding-left:31px;
background:transparent url(../common/gnavi_bg_01.png) left 1px no-repeat;
}
#gnavi01 ul {
height:54px;
padding-right:31px;
background:transparent url(../common/gnavi_bg_02.png) right top no-repeat;
}
#gnavi01 ul li {
float:left;
}
#gnavi01 ul li img {
display:block;
vertical-align:top;
}
/* global nav02 */
#gnavi02 {
border-top:#762619 1px solid;
padding-top:1px;
height:40px;
}
#gnavi02 ul{
height:40px;
background:url(../common/popup_bg_03.png);
padding-left:30px;
}
#gnavi02 ul li{
float:left;
height:40px;
}
#gnavi02 ul li a{
display:block;
height:40px;
float:left;
background:url(../common/popup_bg_02.png)
}
#gnavi02 ul .li01 a{
width:190px;
background-position:0px 0px;
}
#gnavi02 ul .li02 a{
width:190px;
background-position:-190px 0px;
}
#gnavi02 ul .li03 a{
width:189px;
background-position:-380px 0px;
}
#gnavi02 ul .li04 a{
width:191px;
background-position:-569px 0px;
}
#gnavi02 ul .li01 a.on,
#gnavi02 ul .li01 a:hover{
width:190px;
background-position:0px -40px;
}
#gnavi02 ul .li02 a.on,
#gnavi02 ul .li02 a:hover{
width:190px;
background-position:-190px -40px;
}
#gnavi02 ul .li03 a.on,
#gnavi02 ul .li03 a:hover{
width:189px;
background-position:-380px -40px;
}
#gnavi02 ul .li04 a.on,
#gnavi02 ul .li04 a:hover{
width:191px;
background-position:-569px -40px;
}

/* breadcrumb */
#bread01 {
clear:both;
margin:6px 0 9px;
}
#bread01 ul li {
display:inline;
margin-right:4px;
padding-left:7px;
background:transparent url(../common/bread_bg_01.png) left center no-repeat;
color:#998A88;
}
#bread01 ul li.first {
padding-left:0;
background:none;
}
#bread01 ul li a {
color:#998A88;
}
#bread01 ul li a:hover {
text-decoration:underline;
}

/* main contents */
#content01,
#content02,
#content03 {
clear:both;
}
#content01 a,
#content02 a {
color:#B03226;
}
#content01 a:hover,
#content02 a:hover {
text-decoration:underline;
}
/* toppage contents */
#content01 {
clear:both;
padding:22px 5px 0;
background:transparent url(../common/content_bg_01.png) left bottom repeat-x;
}
/* other contents */
#content02 {
padding:15px 15px 23px;
background-color:#fff;
color:#22170F;
}
#content03 .back-to-top,
#content02 .back-to-top {
font-size:1.2em;
text-align:right;
}
#content03 .back-to-top a,
#content02 .back-to-top a {
padding-left:12px;
background:transparent url(../common/content_bg_02.png) left center no-repeat;
}
#content03 {
padding:15px 30px;
background:url(../common/popup_bg_04.png) repeat-x 0px 1px #fff;
}
/* contents footer nav */
.footer-nav {
margin-top:23px;
border-top:1px dotted #C2BBB7;
padding-top:10px;
}
.footer-nav ul {
text-align:center;
}
.footer-nav ul li {
display:inline;
padding:0 1em;
}

/* footer */
#footer01 {
clear:both;
padding:6px 0 38px;
}
#footer01 ul {
width:900px;
margin:0 auto;
color:#ccc;
}
#footer01 ul li {
float:left;
}
#footer01 ul li.keyword {
float:left;
margin-left:200px;
}
#footer01 ul li.copyright {
float:right;
}
#footer01 ul li a {
color:#ccc;
}
#footer01 ul li a:hover {
text-decoration:underline;
}
/* footer */
#footer02 {
clear:both;
position:relative;
margin-top:20px;
height:26px;
}
#footer02 p{
position:absolute;
left:10px;
line-height:26px;
color:#CCCCCC;
font-size:10px;
}
#footer02 address{
padding-right:10px;
background:#372722;
text-align:right;
line-height:26px;
color:#CCCCCC;
font-size:10px;
}