@charset "utf-8";

@import url("./normalize.css");

/* @group heading */
h1 {
font-size: 2.25em;
line-height: 1.3333;
margin-bottom: 0.6667em;
}

h2 {
font-size : 1.25em;
line-height : 1.2;
margin-bottom : 1.2em;
}
/* @end */

/* @group header */
header { margin-bottom: 1.5em; }

/* @group nav */
nav {
margin-bottom : 1.5em;
text-align:center;
}

nav ul { overflow : hidden; padding : 0; }
nav ul li {
width : 33%;
float : left;
border-right: 1px solid #333;
}

nav ul li:last-child { border: none; }
nav ul li a { display : block; padding : 0.75em 0; }
nav ul li a:hover {background-color: #333; color: #FFF; }

.button::before,
.button::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}

.button,
.button::before,
.button::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}

/* @end */
/* @end */

/* @group contents */
#contents {
width : 90%;
margin : 0 auto;
text-align : center;
}

#contents p {
margin-bottom : 1.5em;
text-align : justify;
}

#contents img {
margin-bottom : 1.5em;
box-shadow : 0 0 5px #2F1F1F;
}

#contents ul { padding : 0; }

#contents p.name {
text-align : center;
font-size : 1.125em;
margin-bottom : 0.444em;
}
/* @end */

/* @group footer */
footer {
margin : 3em 0;
text-align : center;
}
/* @end */

/* 768px */
@media screen and (min-width : 768px){

html { font-size : 87.5%; }

/* @group header */
#head,nav ul { max-width : 960px; margin : 0 auto; }

.image {
position : relative;
max-width : 1280px;
padding-top : 525px;
overflow : hidden;
margin: 0 auto;
}

.image img {
position : absolute;
top: 50%;
left : 50%;
-webkit-transform : translate(-50%, -50%);
-ms-transform : translate(-50%, -50%);
transform : translate(-50%, -50%);
}
/* @end */

/* @group contents */
#business img { max-width : 481px; }

#business ul li p { width : 71.01%; margin: 0 auto 1.5em auto; }
  
#profile  { width : 70%; margin: 0 auto 1.3em auto; }

#main, #business, { overflow : hidden; }
  

#address { width : 36%; padding-right : 4%; float : left; }

#MAP { width : 50%; float : right; }
/* @end */

}

/* 1024px */
@media screen and (min-width : 1024px){
html { font-size : 100%; }

/* @group header */
.image img {
-webkit-transform : translate(-50%, -60%);
-ms-transform : translate(-50%, -60%);
transform : translate(-50%, -60%);
}
/* @end */

/* @group contents */
#contents { overflow : hidden; width : 960px; }

#main {margin : 0 10px; }

#business ul li { width: 29%; padding: 0 2%; float: left; }

#business ul li p { width: 100%; }

#business img { width : 100%; }
  
#profile ul li { width : 100%; }

#address { width : 48%; padding-right : 2%; }

#MAP { width : 50%; }
/* @end */

}