@charset "utf-8";

/*  reset CSS  */
html,body,div,h1,h2,h3,h4,h5,h6,p,address,ul,li,dl,dt,dd,table,th,td,form,fieldset { margin:0; padding:0; border: 0 none; }
img { border: 0 none; }
a { border: none; color:#008AFF; text-decoration:underline; outline:none; }
a:link { color:#008AFF; text-decoration:underline; }
a:hover { color:#CC0000; text-decoration:underline; }

body { font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif; font-size: 62.5%; /* 1em 10px */ line-height: 1.5; color: #333333; text-align: center; background-color:#000000; }

address { text-align: right; font-style: normal; padding: 10px 20px; font-size: 1em; }
h1 { font-size: 1.8em; }
h2 { font-size: 1.6em; }
p { font-size: 1.2em; }

/* ALL */
#container { width:100%; background-image: url(img/hair_line02.jpg); margin: 0 auto; text-align: left; }
#container02 { width: 100%; background-image: url(img/hair_line02.jpg); margin: 0 auto; text-align: left; }
#headerbox { width: 100%; background-color:#000000; }
#header { margin:0 auto;  width:100%; background-image: url(images/header_bg.jpg); background-repeat:no-repeat; background-position:center; }
#main { text-align: left; }
#main-wrap { margin:0 auto;  width:722px; }
#main-wrap p { padding-right:0px;  padding-left:0px; margin-left:0px; margin-right:0px; font-size:11px; width:340px;  }

#footer { background: #000000; color: #FFFFFF; clear: left; }

/* TOP PAGE */
.logo { padding: 12px 20px; text-align: left; }
.top-ttlbase { width: 100%; float: left; }
.top-ttl { padding: 20px 20px 10px 20px; text-align:center; }
.top-btn { width:720px; margin: 0 auto; text-align: center; }
.top-btn ul{ display: block; }
.top-btn ul li { width: 240px; float:left; list-style: none; display: block; }
.top-btn ul li a { margin: 10px; display: block; }

/* PAGE */
.ttl-area_titoffice { padding: 10px 0px 20px 0px; text-align: left; float: left; width:364px; }
.ttl-area_titcity { padding: 10px 0px 20px 0px; text-align: left; float: left; width:372px; }
.ttl-area_titstation { padding: 10px 0px 20px 0px; text-align: left; float: left; width:321px; }
.ttl-area_tithome { padding: 10px 0px 20px 0px; text-align: left; float: left; width:336px; }
.ttl-area_titsea { padding: 10px 0px 20px 0px; text-align: left; float: left; width:372px; }
.ttl-area_titconv { padding: 10px 0px 20px 0px; text-align: left; float: left; width:369px; }
.ttl-area_titschool { padding: 10px 0px 20px 0px; text-align: left; float: left; width:337px; }
.ttl-area_titwork { padding: 10px 0px 20px 0px; text-align: left; float: left; width:369px; }
.ttl-area_tithospital { padding: 10px 0px 20px 0px; text-align: left; float: left; width:337px; }

.ttl-area { padding: 10px 25px 20px 25px; text-align: left; float: left; width: 695px; }
.img-area { text-align:center; padding: 10px 10px 0 10px; background: #FFFFFF; border: #CCCCCC solid 1px; }
.img-container { width: 722px; margin: 0 auto; text-align: center; clear: both; }
.main-btn { width: 700px; }
.main-btn ul { display: block; }
.main-btn ul li { width: 74px; float:left; list-style: none; display: block; }
.main-btn ul li a { margin: 0 0 5px 0; display: block; }
.close-top { text-align: right; padding: 20px 25px; float: right; width: 50px; }
.close-top a { padding: 0 0 0 5px; }

/*  POPUP  */
.pop-back { background-image: url(img/hair_line02.jpg); background-repeat: repeat; }
#pop-main { width: 745px; margin: 0 auto; text-align: left; }
#pop-wrap { padding: 0 25px; }
.illust-base { float: left; position:relative; width:280px; height:280px; }
.illust-base span.guard { position:absolute; display:block; width:100%; height:100%; background-image:url(image/spacer.gif); }
.arw-base { float: left; }
.popimg-base { float: left; position:relative; width: 350px; height:280px; padding-top: 0; padding-right: 0; padding-bottom: 10px; padding-left: 0; }
.popimg-base span.guard { position:absolute; display:block; width:100%; height:100%; background-image:url(image/spacer.gif); }
.poptxt-base { text-align: left; float: left; width: 695px; padding-bottom:20px; }
.popmovie { margin: 20px 0 0 0; }
.close-btn { width: 695px; text-align: right; float: right; margin: 20px 0 0 0; display:none; }
.close-btn a { padding: 0 25px 0 5px; }
.pop-description { padding: 0 0 10px 350px; font-size: 0.9em; display:none; }
	
/*  LAYOUT  */
.btm5 { margin-bottom: 5px; }
.btm10 { margin-bottom: 10px; }
.btm20 { margin-bottom: 20px; }

/*  clearfix  */
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-table; }
/* Hides from IE-mac */
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */