@charset "utf-8";

.image-container {
  width: 100%;
  height: 65vh;
  position: relative;
  overflow: hidden;
}

.image-left,
.image-right {
  position: absolute;
  height: 100%;
  width: 70%;
  min-width: 500px;
  -ms-transform: skewX(-20deg);
  -webkit-transform: skewX(-20deg);
  transform: skewX(-20deg);
  background: white;
  overflow: hidden;
  top:0;
  margin-right: 20px;
  border-top: 0;
  border-bottom: 0;
}

.image-left {
  right: 45%;
}

.image-right {
  left: 55%;
}

.image-right:after, .image-left:after{
  -ms-transform: skewX(20deg);
  -webkit-transform: skewX(20deg);
  transform: skewX(20deg);
  position: absolute;
  width: 120%;
  height: 100%;
  display: block;
  top: 0;
  content: "";
}

.image-left:after{
  right: -35%;
  background: url("https://ouchide.leiwa.clinic/images/leiwa-clinic.jpg") no-repeat center center;
  background-size: cover;
}

.image-right:after {
  left: -40%;
  background: url("https://ouchide.leiwa.clinic/images/shinryo.jpg") no-repeat center center;
  background-size: cover;
}

.first-key {
	position: absolute;
	top: 14%;
	right: 28%;
}

.second-key {
	position: absolute;
	top: 45%;
	left: 22%;
}

@media screen and (min-width: 1024px) {
	.first-key {right: 38%;}
	.second-key {left: 38%;}
}

.name {
	position: absolute;
	top: 45%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	font-size: calc(3rem + 1.8vw);
	text-shadow:3px 3px 2px #EAFFF7,-3px -3px 2px #EAFFF7, -3px 3px 2px #EAFFF7, 3px -3px 2px #EAFFF7, 0px 3px 2px #EAFFF7, 0 -3px 2px #EAFFF7, -3px 0 2px #EAFFF7, 3px 0 2px #EAFFF7, 1px 1px 2px #EAFFF7, -1px -1px 2px #EAFFF7, -1px 1px 2px #EAFFF7, 1px -1px 2px #EAFFF7, 2px 1px 2px #EAFFF7,-2px -1px 2px #EAFFF7, -2px 1px 2px #EAFFF7, 2px -1px 2px #EAFFF7, 1px 2px 2px #EAFFF7,-1px -2px 2px #EAFFF7, -1px 2px 2px #EAFFF7, 1px -2px 2px #EAFFF7, 6px 6px 3px gray, -6px -6px 3px gray, -6px 6px 3px gray, 6px -6px 3px gray, 0px 6px 3px gray,  0 -6px 3px gray, -6px 0 3px gray, 6px 0 3px gray;
}

.keyword {
	font-size: calc(1.8rem + 1vw);
	text-shadow: 1px 1px 2px #FFF, -1px -1px 2px #FFF, -1px 1px 2px #FFF, 1px -1px 2px #FFF, 3px 1px 2px #FFF,-3px -1px 2px #FFF, -3px 1px 2px #FFF, 3px -1px 2px #FFF, 1px 3px 2px #FFF,-1px -3px 2px #FFF, -1px 3px 2px #FFF, 1px -3px 2px #FFF, 4px 4px 3px gray, -4px -4px 3px gray, -4px 4px 3px gray, 4px -4px 3px gray, 0px 4px 3px gray,  0 -4px 3px gray, -4px 0 3px gray, 4px 0 3px gray;
}

.map-btn {
	position: absolute;
	left: 5%;
	bottom: 3%;
}

.btn-position {
	position: absolute;
	right: 5%;
	bottom: 3%;
}
.web-btn2 {
	text-align: right;
	margin-bottom: 3rem;
}

.web-btn2 a.cp-btn {
	width: 130px !important;
}

a.cp-btn {
	display: inline-block;
	position: relative;
	width: 140px;
	padding: 0.5em;
	font-size: 1.4rem;
	white-space: nowrap;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	background-color: #FFFFFF;
	color: #476557;
}

a.cp-btn:before {
	content: '';
	position: absolute;
	top: -12px;
	left: -4px;
	height: calc(100% + 24px);
	width: 100%;
	border-left: 4px solid #476557;
	border-right: 4px solid #476557;
}

a.cp-btn:after {
	content: '';
	position: absolute;
	top: -4px;
	left: -12px;
	height: 100%;
	width: calc(100% + 24px);
	border-top: 4px solid #476557;
	border-bottom: 4px solid #476557;
}

@media screen and (max-width: 320px) { /*iPhone SE用クエリ*/
	.map-btn {display: none;}
	.web-btn {bottom: 2%}
	.web-btn2 {bottom: 20%}
	.btn-position {display: none}
} 

@media screen and (min-width: 1024px) {
	.image-container {height: calc(100vh - 60px)!important;}
}