@charset "utf-8";

.bg-slider {
	width: 100%;
	height: 75vh;
	overflow: hidden;
}

.bg-opa {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	position: relative;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,0.1);
}

.bg-slider picture{width: 100%}

.bg-slider picture img{
	width: 100%;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	max-width: inherit;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	z-index: -5;
}

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

.second-key {
	position: absolute;
	top: 35%;
	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) {
	.bg-slider {height: calc(100vh - 60px)!important;}
}