@charset "utf-8";
/* CSS Document */

/*------------------------------------------
スマホ/sp
------------------------------------------*/

body{
}

/*------------ メインビジュアル --------------*/
.mv{
	position: relative;
	width: 100%;
	margin: 0;
	background-color: #2560ac;
	height: 100vh;/**/
	overflow: hidden;/**/
}
.mv__bg_img{
	position: absolute;
    bottom: 0;
	right: -12%;
    width: 180%;
    margin: 0;
}
.mv__logo{
	position: absolute;
    top: 12%;
    left: 50%;
    transform: translateX(-50%);
    width: 20%;
    z-index: 2;
}
.mv__ttl{
	position: absolute;
    top: 34%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    z-index: 2;
}
.mv__list{
	position: absolute;
    top: 45%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    z-index: 2;
	display: flex;
	justify-content:space-between;
	align-items:flex-start;
}
.mv__li{
	width: 32%;
}

.mv__note{
	position: absolute;
	top: 15px;
	right: 5%;
	font-size: 2.6vw;
	padding:0 2%;
	text-align: center;
	color: #fff;
}
.mv__date{
	display: block;
    position: absolute;
    bottom: 15px;
    left: 5%;
    font-size: 4.0vw;
    font-weight: 600;
    padding: 1.0rem 1.2rem;
    color: #fff;
    background-color: var(--main-color);
}

/*------------ サブビジュアル --------------*/
.subv{
	width: 100%;
    margin: 2.5rem auto 0;
}
.subv__ttl{
	font-weight: 400;
    font-size: 7.0vw;
    line-height: 1.4;
    margin: 0 auto 2.0rem;
    color: var(--main-color);
	text-align: center;
	width: 90%;
	letter-spacing: 0.5rem;
}
.subv__img{
	width: 100%;
}


/*------------ life Information --------------*/
.location{
	width: 90%;
	margin: 4rem auto 7rem;
}
.location__ttl{
	width: 100%;
	color: #fff;
	font-size: 5.0vw;
	line-height: 1.0;
	background-color:#cfdc29;
	padding: 1.0rem;
	border-left: 6px solid #5e766a;
	margin-bottom: 2.0rem;
}
.location__facility{
	display: flex;
	flex-flow: row wrap;
	justify-content:space-between;
	align-items:flex-start;
	margin-bottom: 2.0rem;
}
.location__facility_li{
	width: 48.2%;
}
.location__facility_txt{
	font-size: 3.4vw;
	line-height: 1.4;
	margin: 1.2rem 0 1.8rem;
}
.location__facility_txt span{
	font-weight:600;
}
.location__facility_note_li{
	font-size: 1.2rem;
	line-height: 1.4;
	margin: 0 0 0.3rem 1.2rem;
	text-indent: -1.2rem;
}
.location__facility_img{
	width: 100%;
	margin-bottom: 2.0rem;
}
.location__traffic_img{
	width: 100%;
	margin-top: 3.0rem;
}


/*------------ Access --------------*/
.access{
	width: 90%;
	margin: 4rem auto 2rem;
}
.access__ttl{
	width: 100%;
	color: #fff;
	font-size: 5.0vw;
	line-height: 1.0;
	background-color:#cfdc29;
	padding: 1.0rem;
	border-left: 6px solid #5e766a;
	margin-bottom: 2.0rem;
}
.access__img{
	width: 100%;
	margin-bottom: 1.0rem;
}
.access__note_li{
	font-size: 1.2rem;
	line-height: 1.4;
	margin: 0 0 0.3rem 1.2rem;
	text-indent: -1.2rem;
}


/*------------ リード文 --------------*/
.lead{
	width: 90%;
	margin: 0 auto;
	padding: 3rem 0 1.5rem;
}
.lead__ttl{
    font-weight: bold;
    font-size: 1.8rem;
    line-height: 1.6;
	margin-bottom: 5.0rem;
	color:var(--main-color);
}
.lead__txt{
	font-size: 1.4rem;
    text-align: left;
    line-height: 1.5;
}


/*------------ CONTACT --------------*/
.contact{
	background-image: url("../images/contact_background.jpg");
    background-repeat: no-repeat;
    background-position: top left;
	background-size:cover;
	padding: 4rem 0;
}
.contact__ttl{
	font-weight: bold;
    font-size: 4.5vw;
	line-height: 1.6;
	text-align: center;
	margin-bottom: 3rem;
	color: #1d1d1d;
}
.contact__list{
	display: flex;
	flex-flow: row wrap;
	justify-content:space-between;
	align-items:flex-start;
	width: 90%;
	margin: 0 auto;
}
.contact__li{
	width: 100%;
	text-align: center;
	margin-bottom: 1.8rem;
}
.contact__li a{
	display: block;
	width: 100%;
	background-color: #fff;
	padding: 3rem 3rem;
}
.contact__img{
	width: 85%;
	margin: 0 auto 3rem;
	transition: all 0.5s ease-in-out;
}
.contact__dtl{
	width: 100%;
	text-align: center;
	font-size: 1.4rem;
	line-height: 1.2;
	margin-top: 1.3rem;
}
.contact__dtl span{
	font-size: 1.6rem;
	font-weight: 600;
	color: var(--main-color);
}
.contact__btn{
	background-color: var(--main-color);
	color: #fff;
	font-size: 1.4rem;
	padding:1.5rem 0;
    background-image: url(../images/contact_arrow.svg);
    background-repeat: no-repeat;
    background-position: center right 1rem;
	background-size: 1.0rem;
	overflow: hidden;
	position: relative;
	z-index: 1;
}
.contact__btn::after {
	background-color: #af4844;
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 100%;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: .3s cubic-bezier(0.45, 0, 0.55, 1);
	z-index: -1;
    background-image: url(../images/contact_arrow.svg);
    background-repeat: no-repeat;
    background-position: center right 1rem;
	background-size: 1.0rem;
}
a:hover .contact__btn::after{
	transform: scale(1, 1);
}
a:hover .contact__btn{
	animation: contact_arrow__anime 0.5s forwards ease-in-out 0s;
}
@keyframes contact_arrow__anime {
  0% {
    background-position: center right 1rem;
  }
  100% {
    background-position: center right -1rem;
  }
}
a:hover .contact__img {
	 transform: scale(1.2);
}

/*------------------------------------------
SP画面横画面
------------------------------------------*/
@media screen and (min-width: 480px) {
	.mv{
		height: 140vw;/**/
	}
}

	
/*------------------------------------------
PC画面
------------------------------------------*/
@media screen and (min-width: 768px) {
	
	/*------------ メインビジュアル --------------*/
	.mv{
		width: 100%;/**/
		margin: 0;/**/
		height: 100vh;/**/
	}
	.mv__bg_img{
		position: absolute;/**/
		right: 0;/**/
		bottom: -8vw;/**/
		width: 100%;/**/
	}
	.mv__logo{
		top: 6%;/**/
		width: calc(80px + 40 * ((100vw - 768px) / 1152));/**/
	}
	.mv__ttl{
		top:25%;/**/
		width: 90%;/**/
		max-width: 1000px;/**/
	}
	.mv__list{
		top: 37%;/**/
		width: 80%;/**/
		max-width: 600px;/**/
	}
	.mv__li{
		width: 30%;/**/
	}
	
	.mv__note{
		bottom: auto;/**/
		top: 15px;/**/
		right:1rem;/**/
		font-size: 1.2rem;/**/
		padding:0;/**/
		text-align: right;/**/
	}
	.mv__date{
		bottom:auto;/**/
		top:4%;/**/
		left: 2%;/**/
		font-size: calc(12px + 6 * ((100vw - 768px) / 1152));/**/
		padding:2.1rem 2.5rem 1.8rem;/**/
	}
	
	
	/*------------ サブビジュアル --------------*/
	.subv{
		width: 90%;/**/
		max-width: 1200px;/**/
		margin: 10rem auto;/**/
		background-color: #f7f7f7;
	}
	.subv__list{
		display: flex;/**/
		flex-flow: row wrap;/**/
		justify-content:space-between;/**/
		align-items:center;/**/
		flex-direction: row-reverse;/**/
	}
	.subv__l{
		width: 42%;/**/
	}
	.subv__r{
		width: 52%;/**/
	}
	.subv__ttl{
		font-weight: 600;/**/
		font-size: calc(24px + 12 * ((100vw - 768px) / 1152));/**/
		line-height: 1.4;/**/
		margin: 0 auto;/**/
		text-align: left;/**/
		width: 100%;/**/
		letter-spacing: 1.0rem;/**/
	}


	/*------------ life Information --------------*/
	.location{
		max-width: 1200px;/**/
		margin: 0 auto 10rem;/**/
	}
	.location__ttl{
		font-size: 3.0rem;/**/
		padding: 1.8rem 1.5rem 1.5rem;/**/
		border-left: 10px solid #5e766a;/**/
		margin-bottom: 6.0rem;/**/
	}
	.location__facility{
		display: flex;
		flex-flow: row wrap;
		justify-content:space-between;
		align-items:flex-start;
		margin-bottom: 0;/**/
	}
	.location__facility_li{
		width: 23.7%;/**/
	}
	.location__facility_txt{
		font-size: 1.4rem;/**/
		margin: 1.2rem 0 3.5rem;/**/
	}
	.location__facility_note{
		/*position: absolute;
		bottom: 4rem;
		right: 0;*/
		margin: 0 auto 0 0;/**/
    	width: fit-content;/**/
	}
	
	.location__facility_img{
		width: calc(550px + 275 * ((100vw - 768px) / 1152));/**/
		margin-bottom: 5.0rem;/**/
	}
	.location__traffic_img{
		display: block;/**/
		width: 70%;/**/
		margin:4.0rem auto 0;/**/
	}


	/*------------ Access --------------*/
	.access{
		max-width: 1200px;/**/
		margin: 0 auto 6rem;/**/
	}
	.access__ttl{
		font-size: 3.0rem;/**/
		padding: 1.8rem 1.5rem 1.5rem;/**/
		border-left: 10px solid #5e766a;/**/
		margin-bottom: 6.0rem;/**/
	}
	.access__img{
		border: 1px solid #ddd;/**/
        padding: 8%;/**/
        margin-bottom: 1.0rem;/**/
	}
	.access__note_li{
		margin: 0 auto 0 1.2rem;/**/
    	width: fit-content;/**/
	}

	
	/*------------ リード文 --------------*/
	.lead{
		text-align: center;/**/
		padding: 6rem 0 1rem;/**/
	}
	.lead__ttl{
		font-size: calc(26px + 13 * ((100vw - 768px) / 1152));/**/
		margin-bottom: 10.0rem;/**/
		text-align: center;/**/
	}
	.lead__txt{
		font-size: calc(12px + 6 * ((100vw - 768px) / 1152));/**/
		text-align: center;/**/
	}	
	
	
	
	/*------------ CONTACT --------------*/
	.contact{
		text-align: center;/**/
		padding: 8rem 0;/**/
	}
	.contact__ttl{
		font-size: calc(32px + 18 * ((100vw - 768px) / 1152));/**/
		font-weight:normal;/**/
		margin-bottom: 2rem;/**/
	}
	.contact__txt{
		font-size: 1.5rem;/**/
    	margin-bottom: 3.5rem;/**/
	}
	.contact__list{
		max-width: 1200px;/**/
	}
	.contact__li{
		width: 31.5%;/**/
		/*margin-bottom: 0.0rem;*/
	}
	.contact__li a{
		padding:3.5rem 3rem 3.5rem;/**/
		box-shadow: 0px 0 15px rgba(0, 0, 0, 0.08);/**/
	}
	.contact__img{
		margin: 0 auto 4rem;/**/
	}
	.contact__dtl{
		font-size: 1.5rem;/**/
		margin-top: 2.0rem;/**/
	}
	.contact__dtl span{
		font-size: 2.0rem;/**/
	}
	.contact__btn{
		font-size: 1.5rem;/**/
		padding:1.8rem 0;/**/
	}
	
}