/******************************共通項目******************************/
/**********全体**********/

* {
 margin: 0 0;
 padding: 0 0;
 border: 0 0;
 }

* {  
 font-family: "Microsoft Sans Serif","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",sans-serif;
 font-size: 9pt;
 line-height: 14pt;
 letter-spacing: 1px;
 color:#000;
 font-style: normal;
 font-weight: normal;
 text-decoration:none;
 }

 
a {
 outline:none;
 }


body, html {
 height: 100%;
 }


body {
 position: relative;
 -webkit-text-size-adjust : 100%;
 }

#wrapper {
 height: auto !important;
 height: 100%;
 min-height: 100%;
 }

table {
 border-spacing:0;
 }


/**********index**********/
#index {
 width: 95%;
 max-width: 1000px; 
 margin:40px auto 60px auto;
 text-align: center;
 }

div.contents-index{  
 width: 100%;
 min-width: 300px;
 max-width: 600px;
 margin: 0 auto 0 auto;
 text-align: center;
 font-size: 10pt;
 line-height: 20pt;
 letter-spacing: 1.2px;
 }

p.pagenext {
 width: 100%;
 text-align: center;
 margin: 80px auto 40px auto;
 }

p.pagenext a {
 border: 3px solid #000;
 padding: 20px 20px;
 font-size: 10pt;
 line-height: 20pt;
 letter-spacing: 1.2px;
  color: #fff;
 background: #000;
 }

p.pagenext a:hover {
 color: #000;
 background: #fff;
 border: 1px solid #000;
 }





/**********header**********/
#header {
 width: 95%;
 max-width: 1000px; 
 margin: 0 auto 60px auto;
 }



#logo-area {
 text-align: center;
 }

#copy {
 width: 150px;
 padding: 5px 10px 5px 10px;
 background: #000;
 color: #fff;
 margin-bottom: 30px;
 }

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



/**********contents**********/
#container {  
 position: relative;
 width: 95%;
 min-width: 300px;
 max-width: 1000px;
 margin: 0 auto 0 auto;
 text-align: left;
 }
 
div.contents-salon {
 width: 100%;
 margin: 0 auto 0 auto;
 }

ul.salon-230-20:after {
 content: ".";
 height: 0;
 clear: both;
 display: block;
 visibility: hidden;
 }

ul.salon-230-20 {
 width: 100%;
 list-style-type: none;
 }

ul.salon-230-20 li {
 margin: 0 20px 40px 0;
 float: left;
 width: 20%;
 min-width: 230px;
 height: 330px;
 }

ul.salon-230-20 li img {
 width: 100%;
 min-width: 230px;
 }











ul.office-230-20 {
 width: 100%;
 list-style-type: none;
 }

ul.office-230-20:after {
 content: ".";
 height: 0;
 clear: both;
 display: block;
 visibility: hidden;
 }



ul.office-230-20 li {
 margin: 0 20px 40px 0;
 float: left;
 width: 20%;
 min-width: 230px;
 height: 330px;
 }












p.salon-logo {
 text-align: center;
 }

p.salon-name {
 font-size: 11pt;
 padding: 10px 10px 10px 10px;
 background: #000;
 color: #fff;
 margin-bottom: 10px;
 }

p.salon-name a {
 font-size: 11pt;
 color: #fff;
 }

p.salon-text {
 margin-bottom: 8px;
}

p.salon-text a {
 padding-bottom: 2px;
 border-bottom: 2px solid #000;
 }

p.salon-link {
 margin: 20px 5px 0 0;
 float: left;
 }
p.salon-link a {
 padding: 5px 5px;
 }




div.contents-center {
 width: 100%;
 margin-bottom: 40px;
 }

div.contents-center:after {
 content: ".";
 height: 0;
 clear: both;
 display: block;
 visibility: hidden;
 }

div.contents-about {
 width: 45%;
 float: left;
 margin-bottom: 40px;
 }

div.contents-history {
 width: 45%;
 float: right;
 margin-bottom: 40px;
 }

table.table100-350 {
 width: 90%;
 margin: 10px auto 0 auto;
 }

table.table100-350 th{
 width: 100px;
 }

table.table100-350 td a {
 padding-bottom: 2px;
 border-bottom: 2px solid #000;
 }

p.pagetop {
 width: 100%;
 text-align: center;
 margin: 0 auto 40px auto;
 }

p.pagetop a {
 border: 1px solid #000;
 padding: 5px 5px;
 background: #fff;
 }

p.pagetop a:hover {
 color: #fff;
 background: #000;
 }


/**********media queries**********/
@media only screen and (max-width: 1080px) {
ul.salon-230-20 li, ul.office-230-20 li {
 width: 31%;
 height: 380px;
 }
}

@media only screen and (max-width: 916px) {
ul.salon-230-20 li, ul.office-230-20 li {
 width: 47%;
 height: 440px;
 }
}

@media only screen and (max-width: 716px) {
ul.salon-230-20 li, ul.office-230-20 li {
 width: 100%;
 height: 100%;
 }

div.contents-about {
 width: 100%;
 float: none;
 }

div.contents-history {
 width: 100%;
 float: none;
 }

}