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


/*-----------------------------
hero-image
------------------------------*/
.hero-box{
	position:relative;
	height: 45.21vw;
}
.hero-box h2{
	position:absolute;
	width: 15.05vw;
	top:32.6vw;
	right: 19.9vw;
	z-index: 20;
}
.hero-img01{
	position:absolute;
	width: 25.78vw;
	top:0.52vw;
	left: 2.34vw;
}
.hero-img01-1{
	position:absolute;
	width: 2.96vw;
	top:38.6vw;
	left: 13.12vw;
}
.hero-img01-2{
	position:absolute;
	width: 5.2vw;
	top:35.6vw;
	right: -2.6vw;
}
.hero-img02{
	position:absolute;
	width: 26.67vw;
	top:23.54vw;
	left: 33.91vw;
	z-index: 30;
}
.hero-img02-1{
	position:absolute;
	width: 2.65vw;
	top:-17.7vw;
	left: 0.36vw;
}
.hero-img02-2{
	position:absolute;
	width: 12.76vw;
	top:-12.81vw;
	left:3.95vw;
}
.hero-img03{
	position:absolute;
	width: 39.64vw;
	top:2.44vw;
	right: 3.18vw;
}
.img03{
	position:absolute;
	z-index: 10;
}
.hero-img03-1{
	position:absolute;
	width: 35.52vw;
	top:11.5vw;
	right: 5.2vw;
	
}
.hero-img03-2{
	position:absolute;
	width: 14.53vw;
	top:29.74vw;
	right: 1vw;
}
/*pagetop ボタン----------------------*/
	main {
	  position: relative;
	}
	.pagetop {
	  display: none;
	  position: fixed;
	  bottom: 10px;
	  right: 10px;
	  width: 10%;
	  z-index: 90;
	}

/*-----------------------------
年間行事
------------------------------*/
.year-lead{
	margin: 100px 0 164px;
}
.year-box{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;	
}
.year-box li{
	width: 210px;
	margin: 0 50px 200px;
	border-bottom: 1px dashed #333;
	text-align: center;
	position:relative;
	
}



.year-box li>img,.event{
	position:relative;
	z-index: 10;
}

.event{
	display: block;
	font-size:1.6rem;
	line-height: 1.8;
	padding: 22px 0 3px;
}
.illust4{
	position:absolute;
	z-index: 1;
	max-width: initial;
	top:-50px;
	left: 160px;
}
.illust5{
	position:absolute;
	z-index: 1;
	top:-73px;
	left: 121px;
}
.illust6{
	position:absolute;
	z-index: 1;
	top:-65px;
	left: 106px;
}
.illust7 {
    position: absolute;
    z-index: 1;
    top: -82px;
    left: 119px;
}
.illust8{
	position: absolute;
    z-index: 1;
    top: -84px;
    left: 141px;
}
.illust9{
	position: absolute;
    z-index: 1;
    top: -90px;
    left: 142px;
}
.illust10{
	position: absolute;
    z-index: 1;
    top: -120px;
    left: 159px;
}
.illust11{
	position: absolute;
    z-index: 1;
    top: -105px;
    left: 170px;
}
.illust12{
	position: absolute;
    z-index: 1;
    top: -121px;
    left: 117px;
}
.illust1{
	position: absolute;
    z-index: 1;
    top: -96px;
    left: 109px;
}
.illust2{
	position: absolute;
    z-index: 1;
    top: -131px;
    left: 103px;
}
.illust3{
	position: absolute;
    z-index: 1;
    top: -65px;
    left: 143px;
}
.illust.illust5 img{
	max-width: initial;
}
.year-text{
	line-height: 2;
	margin-top: -100px;
	margin-bottom: 86px;
	font-size:1.6rem;
}

@media screen and (max-width: 768px) {
  	div{ 
	  	width: 100%; 
	}
	.pc{
		display: none;
	}
	.sp{
		display: block;
	}
	.inner{
		box-sizing: border-box;
		width: 100%;
		padding:0 15px;
	} 
	/*-----------------------------
	hero-image
	------------------------------*/
	.hero-box{
		position:relative;
		height: 98vw;
		background: url("../images/common/sp_bg.jpg") no-repeat;
		background-size: contain;
		margin-top: 50px;
	}
	.hero-box h2{
		position:absolute;
		width: 31.87vw;
		top:72.27vw;
		right: 56vw;
		z-index: 20;
	}

	.hero-img02{
		position: absolute;
		width: 57.01vw;
		top: 52vw;
		left: 40.27vw;
		z-index: 10;
	}
	
	.hero-img03{
		position: absolute;
		width: 66.67vw;
		top: 0.4vw;
		left: 0;
	}
	/*pagetop ボタン----------------------*/
	main {
	  position: relative;
	}
	.pagetop {
	  display: none;
	  position: fixed;
	  bottom: 10px;
	  right: 10px;
	  width: 18%;
	  z-index: 90;
	}
	/*-----------------------------
	年間行事
	------------------------------*/
	.year-lead{
		margin: 40px 0 67px;
	}
	.year-box{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	/*	margin-left: -50px;*/

	}
	.year-box li{
		width: 180px;
		margin: 0 20px 65px;
		border-bottom: 1px dashed #333;
		text-align: center;
		position: relative;

		}


	.year-box li>img,.event{
		position:relative;
		width: 50%;
		z-index: 10;
	}
	.year-box li .event{
		width: auto;
	}
	.event{
		display: block;
		font-size: 1.1rem;
		line-height: 1.8;
		padding: 11px 0 2px;
		margin: 0 auto;
	}
	.illust4{
		position: absolute;
		z-index: 1;
		max-width: 43%;
		top: -38px;
    	left: 74px;
	}
	.illust5{
		position: absolute;
		z-index: 1;
		width: 59%;
		top: -44px;
		left: 65px;
	}
	.illust6{
		position:absolute;
		z-index: 1;
		width: 52%;
		top: -26px;
		left: 54px;
	}
	.illust7 {
		position: absolute;
		z-index: 1;
		width: 57%;
		top: -30px;
		left: 65px;
	}
	.illust8{
		position: absolute;
		z-index: 1;
		width: 50%;
		top: -33px;
		left: 78px
	}
	.illust9{
		position: absolute;
		z-index: 1;
		width: 50%;
		top: -45px;
		left: 71px;
	}
	.illust10{
		position: absolute;
		z-index: 1;
		width: 66%;
		top: -57px;
		left: 80px;
	}
	.illust11{
		position: absolute;
		z-index: 1;
		width: 48%;
		top: -53px;
		left: 85px;
	}
	.illust12{
		position: absolute;
		z-index: 1;
		width: 59%;
		top: -43px;
		left: 71px;
	}
	.illust1{
		position: absolute;
		z-index: 1;
		width: 60%;
		top: -42px;
		left: 65px;
	}
	.illust2{
		position: absolute;
		z-index: 1;
		width: 96%;
		top: -63px;
		left: 53px;
	}
	.illust3{
		position: absolute;
		z-index: 1;
		width: 50%;
		top: -28px;
		left: 74px;
	}
/*
	.month10{
		width: 53%;
		height: 36px;
	}
*/
	.year-text{
		font-size: 1.2rem;
		line-height: 2;
		margin-top: 0;
		margin-bottom: 50px;
	}
	
}


@media screen and (max-width: 560px) {
	.year-box li{
		width: 125px;
		}

}