@charset "UTF-8";

body {
background: #fff;
font-family: "Noto Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
color: #222222;
}
img {
width:100%;
max-width: 100%;
height: auto;
vertical-align: bottom;
}
a {
color: #222222;
text-decoration: none;
}

#header, #main {
margin-left: auto;
margin-right: auto;
width: 96%;
max-width: 1024px;
}
#header div h1 {
float: left;
width: 40%;
max-width: 350px;
}
#header div > a {
display: block;
float: right;
background: #6D6D6D;
border: 1px solid #6D6D6D;
border-radius: 3px; 
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
color: #fff;
}
#header div > a span {
text-align: right;
}
#header div > a i {
font-size: 1.05em;
}

#gNav ul {
display: table;
}
#gNav ul li {
display: table-cell;
}
#gNav ul li a {
display: block;
width: 100%;
text-align: center;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
border-right: 1px solid #222;
}
#gNav ul li:nth-last-of-type(1) a {
border-right: none;
}
#gNav ul li a i {
display: block;
}

#main h3 {
display: table;
margin-left: auto;
margin-right: auto;
font-size: 0.9em;
border-bottom: 4px solid #846B2E;
padding:0 4px 5px;
}

#introSalon {
background: #F2EDCB;
}
#introSalon div {
width: 90%;
max-width: 480px;
margin: 0 auto;
}
#introSalon div address, #introSalon div p {
font-size: 0.75em;
padding-bottom: 30px;
}
#introSalon div p span {
display: block;
font-family: "Courier New", Courier, "monospace";
}
#introSalon iframe {
width: 100%;
vertical-align: bottom;
}

#introSalon div address {
width: 48%;
float: left;
}
#introSalon div p {
width: 48%;
float: right;
}

#footer p {
font-size: 0.6em;
text-align: center;
padding: 30px 0 10px;
}

@media screen and (max-width:480px){
body {
font-size: 12px;
}
#header {
padding: 8px 0;
}
#header div > a {
font-size: 1em;
padding: 3px 8px;
}
#header div > a span {
font-size: 0.8em;
padding-right: 5px;
}
#header div > a i {
padding-right: 5px;
}

#gNav ul li {
width: 25%;
}
#gNav ul li:first-child {
display: none;
}

#introSalon > p {
font-size: 0.8em;
padding: 10px;
}
}
@media screen and (min-width:481px){
#header div > a {
font-size: 1.3em;
padding: 4px 12px;
}
#header div > a span {
font-size: 0.5em;
padding-right: 10px;
}
#header div > a i {
padding-right: 10px;
}	

#gNav ul li {
width: 20%;
}
	
#introSalon > p {
font-size: 0.6em;
text-align: center;
}
}
@media (min-width:481px) and (max-width:768px){
body {
font-size: 16px;
}
#header {
padding: 12px 0;
}
#introSalon iframe {
height: 300px;
}
}
@media screen and (max-width:768px){
#gNav ul {
width: 100%;
margin: 24px auto 0;
}
#gNav ul li a {
font-size: 0.8em;
}
#gNav ul li a i {
font-size: 1.3em;
padding-bottom: 4px;
}
#main h3, #introSalon > p {
margin-bottom: 24px;
}
#introSalon {
padding-top: 30px;
}
}
@media screen and (min-width:769px){
a[href^="tel:"] {
pointer-events: none;
}

body {
font-size: 20px;
}
#header {
padding: 16px 0;
}
#gNav ul {
width: 768px;
margin: 20px auto 0;
}
#gNav ul li a {
font-size: 0.7em;
}
#gNav ul li a i {
font-size: 1.5em;
padding-bottom: 6px;
}
	
#main h3 {
margin-bottom: 40px;
}

#introSalon {
padding-top: 50px;
}
#introSalon > p {
padding-bottom: 40px;
}
#introSalon iframe {
height: 400px;
}
}