@import url("reset.css");


header{
  width: 100%;
  height: 100vh;
  background-image: url(../image/top/impacthair_main1.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
header:after {
    content: "";
    display: block;
    clear: both;
}
header h1 img{
    width: 500px;
}
header h1{
    float: left;
}
.top-header{
	height: 190px;
    background-color: #fff;
    padding: 60px 0 0 80px;
    box-sizing: border-box;
    position: relative;
}
.weather{
	color: #ff0000;
	font-family: 'Rubik', sans-serif;
	font-weight: 300;
	letter-spacing: 2px;
	position: absolute;
	right: 30px;
}
.nowtime{
	position: absolute;
	right: 113px;
	top:6px;

}
.nowtime p{
	text-align: right;
	margin: 4px 0;
}
.weather h3{
	font-size: 80px;
	position: absolute;
	right: 0;
}
.icon{
	position: absolute;
	    right: 210px;
    top: 10px;
}
.top-information{
	margin: 120px auto;
	max-width: 1196px;
}
.top-information h1{
	text-align: center;
	margin-bottom: 80px;
}
.top-information h1 img{
	width: 310px;
}
.top-info-contents{
	display: flex;
	justify-content: space-between;
	padding: 0 20px;
	box-sizing: border-box;
}
.top-info-contents .info{
	text-align: center;
	position: relative;
	width: 30%;
}
.top-info-contents .info:hover{
	opacity: 0.8;
}
.top-info-contents .info h2{
	margin: 20px 0 0;
	color: #f00;
}
.top-info-contents .info h2 a{
	text-decoration: none;
	color: #f00;
}
.top-info-contents .info  h3{
	margin: 0 0 30px;
	font-family: 'Rubik', sans-serif;
	color: #f00;
}
/*
.top-info-contents .info img{
	width: 100%;
}
*/
.info-icon{
	width: 42px;
	position: absolute;
	top:20px;
	left:10px;
	z-index: 2;
}
.info-icon img{
	width: 100%;
}
.point-slide{
	display: none;
}
a.more-btn{
  display: inline-block;
  width: 128px;
  margin: 70px 0px 40px;
  padding: 16px 20px;
  box-sizing: border-box;
  border: 1px solid #f00;
  background: transparent;
  color: #f00;
  text-align: center;
  text-decoration: none;
  line-height: 1;
  transition: .3s;
  font-family: 'Rubik', sans-serif;
  font-weight: 100;
  letter-spacing: 2px;
  font-size: 16px;
  border-radius: 8px;
}
a.more-btn:hover {
  background: #f00;
  color: #fff;
}
.insta-contents{
	background-color: #ebebeb;
	padding: 110px 0 100px;
	box-sizing: border-box;
}
.insta-contents h1,.menu h1,.staff-contents h1,.reservation h1,.recruit h1,.about-contents h1{
	font-family: 'Rubik', sans-serif;
	font-weight: 100;
	letter-spacing: 2px;
	text-align: center;
	color: #f00;
	font-size: 36px;
	line-height: 2;
}
.insta-contents h1 img{
	width: 42px;
}
.insta-slide{
	display: flex;
}
.menu{
	padding: 100px 0 30px;
    
    margin: 50px 0;
}
.menu-contents{
	
	margin: 100px auto;
	padding: 0 20px;
	box-sizing: border-box;
}
.menu-left{
	width: 100%;
max-width:600px;
	color: #f00;
	letter-spacing: 1px;
	margin: 0 auto;
}
.menu-left h3{
	border-bottom: solid #f00 1px;
	padding: 0 0 24px;
	margin-bottom: 20px;
}
.menu-left p{
	line-height: 2.2;
	margin: 0 0 50px ;
}
.menu-left a.more-btn{
	margin-top: 0;
}
.menu-right{
	float: right;
	width: 47%;
}
.menu-right img{
	width: 100%;
}
.staff-flex{
	
	margin: 100px auto;
	max-width: 1196px;
	padding: 0 20px ;
	box-sizing: border-box;
display: flex
;
    flex-wrap: wrap;

}
.staff{
	width: 360px;
	text-align: center;
	color: #f00;
	
	margin-right: 38px;
	margin-bottom: 70px;

}
.staff:nth-child(3n){
	margin-right: 0;
}
.staff img{
	width: 100%;
}
.staff h3{
	font-size: 14px;
	margin: 26px 0 14px;
	font-family: 'Rubik', sans-serif;
  font-weight: 100;
}
.staff h2{
	font-size: 16px;
	letter-spacing: 1px;
	font-family: 'Rubik', sans-serif;
  font-weight: 500;
}
.reservation{
margin: 100px auto;
	max-width: 1196px;
	padding: 0 20px ;
	box-sizing: border-box;
	text-align: center;
	color: #f00;
}
.reserve{

}
a.reserve-btn{
  display: inline-block;
  width: 100%;
  margin: 70px 0px 40px;
  padding: 80px 20px;
  box-sizing: border-box;
  border: 1px solid #f00;
  background: transparent;
  color: #f00;
  text-align: center;
  text-decoration: none;
  line-height: 1;
  transition: .3s;
  font-family: 'Rubik', sans-serif;
  font-weight: 100;
  letter-spacing: 2px;
  font-size: 24px;
  border-radius: 8px;
}
a.reserve-btn:hover {
  background: #f00;
  color: #fff;
}
.reservation p{

}
.about-contents{
	color: #f00;
	/*margin: 200px auto 0 auto;

	max-width: 1196px;
	padding: 0 20px ;*/
	box-sizing: border-box;
}
.shop-detal{
    background-image: url(../image/about/impacthair_1f.jpg);
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    display: flex
;
    align-items: center;
   }
.about-contents h2{
	text-align: center;
	font-size: 16px;
	line-height: 2;
	margin: 90px 0 140px;
}
.about-contents h2 a{
	color: #f00;
}
.about-contents img{
width: 100%;
    height: auto;
}
.left-block{
	float: left;
	width: 48%;
}
.right-block{
	float: right;
	width: 48%;
}
.left-block,.right-block{
	text-align: center;
}
.left-block img,.right-block img{
	width: 100%;
	margin-bottom: 30px;
}
.shop-text{
	width: 820px;
	margin: 0px auto;
	line-height: 2;
	text-align: justify;
}
.shop-text span{
	background-color: #fff;
    padding: 3px 2px;
}
.thumbnail {
  width: 360px;
  height: 360px;
  object-fit: cover;
  object-position: center;
  display: block;
}
.impact-opt{

}
.impact-opt .left-block,.impact-opt .right-block{
	border-top: solid #f00 1px;
	border-bottom: solid #f00 1px;
	padding: 50px 0;
}
.impact-opt .left-block h3,.impact-opt .right-block h3{
margin: 50px 0 24px;
}
.impact-opt .left-block h2,.impact-opt .right-block h2{
font-size: 24px;
margin: 0 auto 60px;
font-family: 'Rubik', sans-serif;
  font-weight: 100;
  letter-spacing: 1px;
}
.block-text{
text-align: left;
line-height: 2;
border-bottom: solid #f00 1px;
padding: 0 0 40px;
}
.impact-opt h4{
	margin-top: 60px;
	margin-bottom: 15px;
	display: inline-block;
	border:solid #f00 1px;
	padding: 7px 30px;
	box-sizing: border-box;
	width:auto;
	font-family: 'Rubik', sans-serif;
  font-weight: 100;
  border-radius: 20px;
  letter-spacing: 1px;
}

.recruit{
margin: 220px auto;
text-align: center;
color: #f00;
}
.recruit h1{

}
.recruit h2{
	font-size: 26px;
	margin: 80px 0 50px;
}
.recruit p{
	line-height: 2;
	margin: 0 0 30px;
}

footer{
padding: 50px 0;
background-color: #ebebeb;
color: #f00;
position: relative;
}
.footer-contents{
	margin:0 auto;
	max-width: 1196px;
	padding: 0 280px 0 20px;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
}
.footer-contents p{
	line-height: 2;
}
footer a{
color: #f00;
}
p.copyright{
	font-size: 12px;
	text-align: center;
margin: 70px 0 0;
}
.footer-contents ul li{
	margin: 0 0 18px 0;
}
.footer-contents ul li a{
	color: #f00;
	text-decoration: none;
}
.footer-contents ul li a:hover{
	text-decoration: underline;
}
.footer-insta{
	max-width: 1196px;
	padding: 0 280px 0 20px;
	box-sizing: border-box;
	margin: 20px auto 50px;
}
.footer-insta img{
	width: 28px;
}
.up-btn{
position: absolute;
top:44px;
right: 34px;
}
.up-btn img{
	width: 36px;
}
@media screen and (max-width: 768px){
.top-header{
	    height: 140px;
	   padding: 34px 0 0 40px;
}
header h1 img {
    width: 360px;
        margin: 12px 0 0 0;
}
.weather{
	right: 20px;
    top: 30px;
}
.staff{
	width: 216px;
}
.shop-text{
	width: 100%;
}

.right-block p,.left-block p{
	line-height: 1.6;
}
p.block-text{
	line-height: 2;
}
.footer-contents{
	padding: 0 110px 0 20px;
}
}
@media screen and (max-width: 640px){
	.top-header {
    height: 100px;
    padding: 0;
}
header h1{
	float: none;
}
header h1 img {
    width: 260px;
}
header h1 {
    float: none;
    text-align: center;
    padding: 22px 0 0 0;
}
.nowtime{
	    right: 75px;
    top: 6px;
}
.weather{
	top:116px;
}
.weather h3{
	font-size: 60px;
}
.top-information h1 img {
    width: 200px;
}
.top-info-contents{
	display: block;
}
.top-info-contents .info{
	    width: 80%;
    margin: 0 auto 80px auto;
}
.insta-slide {
    display: block;
}
.nowtime{
	top:3px;
}
.nowtime p{
	font-size:12px;
}
.menu-contents {
	padding: 0 40px;
}
.about-contents{
}
.menu-left{
	float: none;
	width: 100%;
}
.menu-right{
	display: none;
}
.insta-contents h1, .menu h1, .staff-contents h1, .reservation h1, .recruit h1, .about-contents h1{
	font-size: 26px;
}
.staff,.staff:nth-child(3n){
	float: none;
	
	margin: 0 auto 70px;
}
.reserve {
    margin: 0 20px;
}
a.reserve-btn{
	padding: 36px;
    margin-bottom: 20px;
}
.left-block,.right-block {
    float: none;
    width: 100%;
    margin-bottom: 50px;
}
.left-block img, .right-block img{
	margin-bottom: 12px;
}
.shop-text{
	margin: 50px auto;
        padding: 0 40px;
        box-sizing: border-box;
}
.impact-opt .left-block{
	border-bottom: none;
}
.recruit{
	padding: 0 40px;
    box-sizing: border-box;
    margin: 120px auto;
}
.recruit h2 {
    font-size: 20px;
    margin: 30px 0 30px;
}
.recruit p{
	text-align: left;
}
.footer-contents {
    padding: 0 40px;
    display: block;
}
.footer-contents p{
	margin: 40px 0 50px;
}
.footer-insta{
	padding: 0 40px;
	margin-top: 50px;
}
p.copyright {
    
    text-align: left;
    padding: 0 40px;
}
.up-btn {
    top: 22px;
    right: 24px;
}
.icon {
    position: absolute;
    right: 150px;
    top: 0px;
}
.thumbnail{
	width: 100%;
    height: 300px;
}
.top-information a.more-btn{
margin-top: 0;
}
}