@charset "utf-8";

#sub main {margin-top: 0;}


/* mainimage */
#mv{background: #004f99;overflow: hidden;position: relative;}
#mv .main_base img{width: 100%;}
#mv .main_left_img{height: 100%;position: absolute;left: 0;top: 0;opacity: 0;animation: 1s fadeInLeft 0.5s forwards;}
#mv .main_left_img img{height: 100%;}
#mv .main_right_img{height: 100%;position: absolute;right: 0;top: 0;opacity: 0;animation: 1s fadeInRight 0.5s forwards;}
#mv .main_right_img img{height: 100%;}
#mv h2{position: absolute;left: 0;top: 0;width: 100%;opacity: 0;animation: 1s fadeInUp 1.5s forwards;}
#mv h2 img{width: 100%;}

@keyframes fadeInLeft {
0% {opacity: 0;transform: translateX(-30px);}
100% {opacity: 1;transform: translateX(0);}
}

@keyframes fadeInRight {
0% {opacity: 0;transform: translateX(30px);}
100% {opacity: 1;transform: translateX(0);}
}

@keyframes fadeInUp {
0% {opacity: 0;transform: translateY(30px);}
100% {opacity: 1;transform: translateY(0);}
}

/* 共通 */
header,footer,.footer_spmenu{display: none!important;}
article{position: relative;background: #e6e6e6;padding-bottom: 150px;}
article::before{content: "";position: absolute;left: 0;top: 0;width: 100%;height: 395px;background: url("../img/top_bk.webp") no-repeat center top;opacity: 0.6;z-index: 1;}
article::after{content: "";position: absolute;left: 0;bottom: 0;width: 100%;height: 802px;background: url("../img/bottom_bk.webp") no-repeat center bottom;opacity: 0.6;z-index: 1;}
.note{font-size: 10px;margin-top: 1.5em;}
footer{margin-top: 80px;}
.wrap{max-width: 1300px;margin: 0 auto;width: 100%;background: #fff;z-index: 2;padding: 0 20px 80px;}
.wrap section{padding-top: 100px;position: relative;z-index: 2;max-width: 1000px;margin-inline: auto;}
.contents_tit{font-size: 42px;text-align: center;line-height: 1;color: #fff;letter-spacing: 0.1em;background: #004f99;padding: 0.2em;}
.contents_tit + .item{margin-top: 50px;}
/* .cap{position: absolute;left: 10px;bottom: 10px;font-size: 12px;text-shadow: 0 0 0.2em #000,0 0 0.2em #000,0 0 0.2em #000,0 0 0.2em #000;color: #fff;}
.cap_bk{font-size: 12px;position: absolute;right: 0;bottom: 0;background: #fff;padding: 0 0.3em;} */
.item{margin-top: 60px;}
.item_tit{font-size: 27px;letter-spacing: 0.15em;font-weight: 500;text-align: center;}
.item .time{font-size: 53px;font-family: "Allura", cursive;width: 4em;transform: rotate(-12deg)}
.item .time span{display: block;text-align: right;}
.item .time span i{display: inline-block;margin-right: 0.15em;}
.item .time + p{margin-top: 1em;}
.item .place{font-size: 20px;letter-spacing: 0.1em;}
.item .place big{color: #867756;line-height: 1;font-size: 2em;}
.item .place + p{margin-top: 1em;}
.item p{font-size: 14px;letter-spacing: 0.1em;line-height: 1.7;}
.item p small{font-size: 0.6em;}
.column_item01{display: flex;justify-content: space-between;margin-top: 30px;}
.column_item01 > dt{width: 65.7%;}
.column_item01 > dd{width: 29%;margin-top: 20px;}
.column_item02{display: flex;justify-content: space-between;align-items: flex-end;margin-top: 30px;}
.column_item02 > dd{width: 53%;margin-bottom: 25px;}
.column_item02 > dt{width: 44%;/* margin-right: -15px; */}
/* .column_item02 > dt figure{border: 15px solid #fff;margin-bottom: -10px;display: inline-block;} */
.column_item03{display: flex;justify-content: space-between;margin-top: 50px;}
.column_item03 > dd{width: 69.4%;background: #dee1ef;padding: 30px 30px 0;}
.column_item03 > dt{width: 30.5%;}

.sat .item_tit{color: #004f99;}
.sat .time{color: #004f99;}
.sun .item_tit{color: #a3614a;}
.sun .time{color: #a3614a;}


/* life information */
#lifeinformation{
    z-index: 100;
    position: sticky;
}
.lifeinformation_listmap{
	width: 100%;
	max-width: 1425px;
	margin: 0 auto 210px;
}
.lifeinfo_btn{
	display: flex;
	justify-content: space-between;
}
.lifeinfo_btn li{
	border: 1px solid #999;
	width: 11.5%;
	height: 60px;
	display: flex;
	align-content: center;
	justify-content: center;
	background: #fff;
}
.lifeinfo_btn li div{
	display: flex;
	align-items: center;
	padding-left: 35px;
	margin-right: 10px;
	font-size: 0.9em;
    line-height: 1.3;
}
.lifeinfo_btn li.shopping div{
	background: url("../img/map/pin_shopping.svg") no-repeat left center;
	background-size: auto 30px;
}
.lifeinfo_btn li.gourmet div{
	background: url("../img/map/pin_gourmet.svg") no-repeat left center;
	background-size: auto 30px;
}
.lifeinfo_btn li.park div{
	background: url("../img/map/pin_park.svg") no-repeat left center;
	background-size: auto 30px;
}
.lifeinfo_btn li.public div{
	background: url("../img/map/pin_public.svg") no-repeat left center;
	background-size: auto 30px;
}
.lifeinfo_btn li.medical div{
	background: url("../img/map/pin_medical.svg") no-repeat left center;
	background-size: auto 30px;
}
.lifeinfo_btn li.education div{
	background: url("../img/map/pin_education.svg") no-repeat left center;
	background-size: auto 30px;
}
.lifeinfo_btn li.finance div{
	background: url("../img/map/pin_finance.svg") no-repeat left center;
	background-size: auto 30px;
}
.lifeinfo_btn li.leisure div{
	background: url("../img/map/pin_leisure.svg") no-repeat left center;
	background-size: auto 30px;
}
.lifeinfo_btn li.active{
	background: #eeeeee;
}
.googlemap{
	border: 1px solid #999;
	margin-top: 5px;
}
.googlemap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.googlemap #gmap {
  width: 70%;
  height: 600px;
  border-right: solid 1px #eeeeee;
}
.h_item{
  padding: 10px 0px 10px 0px;
  background-color: #f0f0f0;
  width: 30%;
}
.lifeinfo_column{
	max-height: 580px;
  overflow: auto;
}
.lifeinfo_column .panel{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 0.9em;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 14px 24px;
  cursor: pointer;
  border-bottom: 1px solid #dbd6d4;
}
.lifeinfo_column .panel .marker_img{
  width: 19px;
  margin: 0 5px 0 0;
}
.lifeinfo_column .panel .panel_txt {
  width: calc(100% - 25px);
}

@media screen and (min-width: 1921px){
article::before{background-size: cover;height: 20.573vw;}
article::after{background-size: cover;height: 41.77vw;}
}

@media screen and (min-width: 768px){
.item:nth-of-type(even) .column_item01 > dt{order: 2;}
/* .item:nth-of-type(even) .column_item01 > dt .cap{left: auto;right: 10px;} */
.item:nth-of-type(even) .column_item02 > dd{order: 2;}
/* .item:nth-of-type(even) .column_item02 > dt{margin-right: 0;margin-left: -15px;} */




}

@media screen and (max-width: 767px){
/* 共通 */
article{position: relative;background: #e6e6e6;padding-bottom: 0px;}
article::after{background: url("../img/bottom_bk.webp") no-repeat 60% bottom/300%;}
.note{font-size: 8px;margin-top: 1.5em;}
footer{margin-top: 40px;}
.wrap{padding: 0 5% 40px;}
.wrap section{padding-top: 50px;}
.contents_tit{font-size: 28px;}
.contents_tit + .item{margin-top: 30px;}
.cap{left: auto;right: 10px;font-size: 11px;}
.cap_bk{font-size: 11px;}
.item{margin-top: 40px;}
.item_tit{font-size: 19px;letter-spacing: 0.1em;}
.item .time{font-size: 37px;text-shadow: 0 0 0.1em #fff,0 0 0.1em #fff,0 0 0.1em #fff,0 0 0.1em #fff,0 0 0.1em #fff;position: absolute;left: 15px;top: 10px;}
.item .time + p{margin-top: 0.7em;}
.item .place{font-size: 16px;}
.item .place + p{margin-top: 0.5em;}
.item p{font-size: 15px;}
.column_item01{flex-wrap: wrap;margin-top: 30px;position: relative;}
.column_item01 > dt{width: 100%;}
.column_item01 > dt img{width: 100%;}
.column_item01 > dd{width: 100%;margin-top: 0;}
.column_item02{flex-wrap: wrap;margin-top: 20px;}
.column_item02 > dd{width: 100%;order: 2;margin-top: 10px;}
.column_item02 > dt{width: 100%;}
.column_item02 > dt figure{border: none;margin-bottom: 0;}
.column_item02 > dt img{width: 100%;}
.column_item03{flex-wrap: wrap;margin-top: 20px;}
.column_item03 > dd{width: 100%;background: #e6edf3;padding: 0 20px 15px;order: 2;}
.column_item03 > dt{width: 100%;padding: 20px 20px 10px;background: #e6edf3;}
.column_item03 > dt img{width: 100%;}
}

#intro{}
.intro_tit{font-size: 32px;text-align: center;color: #004f99;letter-spacing: 0.2em;font-weight: 600;padding-left: 0.15em;}
.intro_tit + p{text-align: center;letter-spacing: 0.05em;line-height: 1.8;font-size: 18px;margin-top: 2em;}

.spa_info{background:#f0e6e0;padding:1em;margin-top:-15px;text-align:center;}
.spa_info p{color:#a3614a;font-size: 1em;line-height: 1.5;font-family:YakuHanJP, 'Public Sans', 'Noto Sans JP', sans-serif;}
.spa_info .note{color:#000;font-size: 0.6em;margin-top: -0.2em;}
.spa_info .note a{color:#000;text-decoration: underline}
.spa_info .note a:hover{text-decoration: none}

.carshare_wrap{position: relative;max-width: 1300px;margin: 0 auto;width: 100%;z-index: 2;padding: 0 0 80px;}
#carshare{background:#004f99;padding:50px;}
#carshare h4{color:#fff;margin-top:20px;}
#carshare dl{color:#fff;display: flex;justify-content: space-between;position: relative;z-index: 2;max-width: 1000px;margin-inline: auto;margin-top:50px;}
#carshare dt{width: 53%;}
#carshare dt .ttl{background:#fff;padding: 0.3em 1em;text-align:center;color:#004f99;margin: 30px auto 10px;}
#carshare dt .read{text-indent: -1em;padding-left: 1em;font-size: 0.9em;}
#carshare dd{width: 44%;margin-bottom: 25px;}

@media screen and (max-width: 767px){
#intro{}
.intro_tit{font-size: 20px;}
.intro_tit + p{font-size: 15px;}

#carshare dl{flex-direction: column-reverse;}
#carshare dt{width: 100%;}
#carshare dd{width: 100%;}


	
	.innertext {
		width: 100%;
		margin: 0;
	}
	.googlemap{
		margin: 0 10px;
		flex-wrap: wrap;
	}
	.googlemap #gmap {
		width: 100%;
		height: 50vh;
		border-right:none;
	}
	.h_item {
		padding: 30px 20px;
    width: 100%;
	}
	.lifeinfo_btn {
		margin: 0 10px;
		flex-wrap: wrap;
	}
	.lifeinfo_btn li{
		width: 49%;
		height: 50px;
		margin-bottom: 10px;
	}
}