@charset "UTF-8";
/* CSS Document */
header{
	position: relative;
	height: 160px;
	background: #fcfcfc;
	transition: all .5s ease;
	-wekit-transition: all .5s ease;
}
h1{
	font-size: 2rem;
	position: absolute;
	font-weight: 700;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
.tap{
	font-size: 1.6rem;
	position: absolute;
	top: 70%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
.index{
	background: #fcfcfc;
}
.index .indexArea{
	width: 100%;
	max-width: 680px;
	height: auto;
	margin: 0 auto;
	padding: 0 16px 30px;
	display: flex;
	justify-content: space-between;
}
.index .indexArea{
	flex-wrap: wrap;
}
.index .cnt{
  width: 100%;
  max-width: 270px;
  height: 400px;
  background-color: #fff;
  filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.2));
  font-family: 'Lato', sans-serif;
  position: relative;
}
.index .cnt .logo{
	width: 100%;
	max-width: 120px;
	position: absolute;
	top: 30px;
	left: 30px;
}
.index .cnt .name{
	width: 100%;
	max-width: 120px;
	position: absolute;
	top: 30%;
	left: 30px;
}
.index .cnt .name .jp{
	font-size: 2rem;
	font-weight: 700;
}
.index .cnt .name .en{
	font-size: 1.4rem;
}
.index .cnt .sub{
	position: absolute;
	bottom: 33%;
	left: 45px;
	font-size: 1.4rem;
}
.index .cnt .mail,
.index .cnt .sns,
.index .cnt .site{
  position: relative;
  transition: all .5s ease;
  -webkit-transition: all .5s ease;
}
.index .cnt .mail::before{
	position: absolute;
	top: 6px;
	left: -20px;
	content: "";
	background: url("../img/mail.svg") no-repeat;
	width: 13px;
	height: 13px;
}
.index .cnt .sns::before{
	position: absolute;
	top: 4px;
	left: -20px;
	content: "";
	background: url("../img/insta.svg") no-repeat;
	width: 13px;
	height: 13px;
}
.index .cnt .site::before{
	position: absolute;
	top: 4px;
	left: -20px;
	content: "";
	background: url("../img/site.svg") no-repeat;
	width: 13px;
	height: 13px;
}
.index .cnt .tel01,
.index .cnt .address
{
	transition: all .5s ease;
	-webkit-transition: all .5s ease;
}
.index .cnt .mail:hover,
.index .cnt .sns:hover,
.index .cnt .site:hover,
.index .cnt .address:hover,
.index .cnt .tel01:hover
{
	opacity: .5;
	transition: all .5s ease;
	-webkit-transition: all .5s ease;
}
.index .cnt .contact01{
	position: absolute;
	bottom: 7%;
	left: 30px;
	font-size: 1.4rem;
}
.index .cnt .works{
	width: 100%;
	max-width: 200px;
	height: auto;
	position: absolute;
	top: 20px;
	left: 20px;
}
.index .cnt .map{
	width: 100%;
	height: auto;
	position: absolute;
	bottom: 30px;
	left: 0;
}
.index .cnt .pin{
	width: 100%;
	max-width: 20px;
	height: auto;
	position: absolute;
	bottom: 93px;
	right: 89px;
	transition: all .5s ease;
	-webkit-transition: all .5s ease;
}
.index .cnt .pin:hover{
	opacity: .5;
	transition: all .5s ease;
	-webkit-transition: all .5s ease;
}
.index .cnt .qr{
	width: 100%;
	max-width: 70px;
	height: auto;
	position: absolute;
	bottom: 10px;
	right: 10px;
}
.cv_btn {
  margin: 0 auto;
}
.cv_btn img {
  animation: anime1 0.7s ease 0s infinite alternate;
  transform-origin:center;
}
.sub a ,.contact01 a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}
.sub a::after,.contact01 a::after{
  position: absolute;
  bottom: -3px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #000000;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .3s;
}
.sub a:hover::after,.contact01 a:hover::after{
  transform-origin: left top;
  transform: scale(1, 1);
}
@keyframes anime1 {
  from {
    transform: scale(0.9,0.9);
  }
  to {
    transform: scale(1,1);
  }
}
@media screen and (max-width:580px) {
	h1{
	font-size: 2rem;
	position: absolute;
	font-weight: 700;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	transition: all .5s ease;
	-wekit-transition: all .5s ease;
	 width: 100%;
    text-align: center;
}
.tap{
	font-size: 1.4rem;
	position: absolute;
	top: 70%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	transition: all .5s ease;
	-wekit-transition: all .5s ease;
	 width: 100%;
    text-align: center;
}
	header{
	position: relative;
	width: 100%;
	height: 120px;
	background: #fcfcfc;
	transition: all .5s ease;
	-wekit-transition: all .5s ease;
}
	.index .indexArea{
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0 16px 30px;
	display: flex;
	justify-content:center;
}
	.index .cnt{
  width: 100%;
  max-width: 270px;
  height: 400px;
  background-color: #fff;
  filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.2));
  font-family: 'Lato', sans-serif;
  margin-bottom: 40px;
}
}