@charset "UTF-8";
/* CSS Document */
/* full-page-scroll
================================================== */
.full-page-scroll {
	width: 100%;
	height: 100vh;
	scroll-snap-type: y mandatory;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
@supports (-webkit-touch-callout: none) {
	.full-page-scroll {
		height: -webkit-fill-available;
	}
}
.section {
	position: relative;
	scroll-snap-align: start;
}
#area01 {
	width: 100%;
	height: 100vh;
	background-image: url(../images/bg01.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
#area02 {
	width: 100%;
	height: 100vh;
	background-image: url(../images/bg02.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
#area03 {
	width: 100%;
	height: 100vh;
	background-image: url(../images/bg03.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
#area04 {
	width: 100%;
	height: 100vh;
	background-image: url(../images/bg04.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
#area05 {
	width: 100%;
	height: 100vh;
	background-image: url(../images/bg01.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
@supports (-webkit-touch-callout: none) {
	#area01, #area02, #area03, #area04, #area05 {
		height: -webkit-fill-available;
	}
}
/* content
================================================== */
.content {
	position: relative;
	z-index: 10;
}
/* swiperArea
================================================== */
#swiperArea {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
}
.swiper-container {
	width: 100%;
	height: 100vh;
}
.swiper-slide {
	width: 100%;
	height: 100vh;
	overflow: hidden;
}
.swiper-wrapper {
	width: 100%;
	height: 100vh;
}
.swiper-slide {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
/* mainBox
================================================== */
.mainBox {
	width: 100%;
	height: 100vh;
	position: relative;
}
@supports (-webkit-touch-callout: none) {
	.mainBox {
		height: -webkit-fill-available;
	}
}
/* area01 mainBox child
================================================== */
#area01 .mainBox .child {
	width: 30%;
	/* 水平・垂直方向の中央揃え */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -65%);
}
@media screen and (max-width: 639px) {
	#area01 .mainBox .child {
		width: 50%;
	}
}
/* h1
================================================== */
#area01 .mainBox .child h1 {
	padding-top: 2%;
	font-size: 1.4vw;
	text-align: center;
	color: #fff;
	display: flex;
	align-items: center;
}
@media screen and (max-width: 639px) {
	#area01 .mainBox .child h1 {
		font-size: 4vw;
	}
}
#area01 .mainBox .child h1:before, .mainBox .child h1:after {
	content: "";
	height: 1px;
	flex-grow: 1;
	background-color: #fff;
}
#area01 .mainBox .child h1:before {
	margin-right: 2%;
}
#area01 .mainBox .child h1:after {
	margin-left: 2%;
}
/* area02-05 mainBox child
================================================== */
.mainBox .child {
	width: 30%;
	/* 水平・垂直方向の中央揃え */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -65%);
}
@media screen and (max-width: 639px) {
	.mainBox .child {
		width: 70%;
	}
}
/* h2
================================================== */
.mainBox .child h2 {
	padding: 0 0 20px;
	font-size: 2.4vw;
	text-align: center;
	color: #fff;
	display: flex;
	align-items: center;
}
@media screen and (max-width: 639px) {
	.mainBox .child h2 {
		font-size: 6vw;
	}
}
.mainBox .child h2:before, .mainBox .child h2:after {
	content: "";
	height: 1px;
	flex-grow: 1;
	background-color: #fff;
}
.mainBox .child h2:before {
	margin-right: 2%;
}
.mainBox .child h2:after {
	margin-left: 2%;
}
/* スクロールアニメ
================================================== */
.scrolldown1 {
	position: absolute;
	left: 50%;
	bottom: 10px;
	height: 50px;
}
.scrolldown1 span {
	position: absolute;
	top: -15px;
	left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	color: #fff;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	white-space: nowrap;
}
.scrolldown1::after {
	content: "";
	position: absolute;
	top: 0;
	width: 1px;
	height: 30px;
	background: #fff;
	animation: pathmove 1.4s ease-in-out infinite;
	opacity: 0;
}
@keyframes pathmove {
	0% {
		height: 0;
		top: 0;
		opacity: 0;
	}
	30% {
		height: 30px;
		opacity: 1;
	}
	100% {
		height: 0;
		top: 50px;
		opacity: 0;
	}
}
/* newsArea
================================================== */
#newsArea {
	padding: 5% 5% 400px;
	background-image: url(../images/bg06.jpg);
	background-color: rgba(255, 255, 255, 0.4);
	background-blend-mode: lighten;
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: cover;
}
@media screen and (max-width: 639px) {
	#newsArea {
		padding: 40px 5% 260px;
	}
}
/* bannerArea
================================================== */
#bannerArea {
	max-width: 1200px;
	margin: 0 auto 40px;
}
.bannerBox {
	background-color: #006934;
	box-shadow: 0 0 12px 0 rgba(0, 0, 0, .2);
}
/* infoArea
================================================== */
#infoArea {
	max-width: 1200px;
	margin: 0 auto;
	background-color: #fff;
	box-shadow: 0 0 12px 0 rgba(0, 0, 0, .2);
}
#infoBlock {
	padding: 40px 3% 0;
}
@media screen and (max-width: 639px) {
	#infoBlock {
		padding: 30px 5% 0;
	}
}
#infoBlock .fLeft {
	width: 15%;
}
#infoBlock .fRight {
	width: 80%;
	padding-top: 8px;
}
@media screen and (max-width: 639px) {
	#infoBlock .fLeft {
		float: none;
		width: 100%;
	}
	#infoBlock .fRight {
		float: none;
		width: 100%;
	}
}
#infoBlock .fLeft h3 {
	padding: 15px 0;
}
@media screen and (max-width: 639px) {
	#infoBlock .fLeft h3 {
		float: left;
		width: 50%;
	}
	#infoBlock .btnMore {
		margin-top: 5px;
		float: right;
	}
}
#infoBlock .infoBox {
	padding: 0 0 20px 0;
}
#infoBlock .infoBox:last-child {
	border-bottom: none;
}
#infoBlock .infoBox .infoDay {
	float: left;
	width: 90px;
	font-size: 70%;
}
@media screen and (max-width: 639px) {
	#infoBlock .infoBox .infoDay {
		float: none;
		width: 100%;
		line-height: 120%;
	}
}
#infoBlock .infoBox p {
	line-height: 140%;
	font-weight: 500;
}
#infoBlock .infoBox p a {
	color: #222;
	/*線の基点とするためrelativeを指定*/
	position: relative;
	/*リンクの形状*/
	padding: 0 0 15px;
	text-decoration: none;
	outline: none;
	display: block;
}
/*線の設定*/
#infoBlock .infoBox p a::before, #infoBlock .infoBox p a::after {
	content: '';
	/*絶対配置で線の位置を決める*/
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 0;
	/*線の形状*/
	background: #ddd;
	width: 100%;
	height: 1px;
	/*アニメーションの指定*/
	transition: all 0.3s ease-in-out;
}
/*hover時に伸びる線の形状*/
#infoBlock .infoBox p a::after {
	width: 0;
	background: #006934;
}
/*hover時に100%に伸びる*/
#infoBlock .infoBox p a:hover::after {
	width: 100%;
}
/* infoPointArea
================================================== */
.infoPointArea {
	padding-top: 5px;
}
.infoPoint {
	padding-bottom: 20px;
}
.infoPoint a {
	line-height: 140%;
	font-weight: 500;
	display: block;
	background-color: #006934;
	color: #fff;
	padding: 5px 1em;
	border: solid 1px #006934;
	-webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
	transition: .3s;
}
.infoPoint a:hover {
	background-color: #fff;
	color: #006934;
	border: solid 1px #006934;
	transition: .3s;
}
/* sectionBtn btnMore
================================================== */
.sectionBtn .btnMore {
	width: 100%;
	text-align: center;
	border: solid 1px #fff;
}
/* newsArea スクロールアニメ
================================================== */
@media screen and (max-width: 639px) {
	#newsArea .scrolldown1 {
		bottom: 40px;
	}
}
#newsArea .scrolldown1 span {
	color: #006934;
}
#newsArea .scrolldown1::after {
	background: #006934;
}
/* liveBlock
================================================== */
#liveBlock {
	padding: 0 3% 40px;
}
@media screen and (max-width: 639px) {
	#liveBlock {
		padding: 0 5% 30px;
	}
}
#liveBlock .fLeft {
	width: 15%;
}
#liveBlock .fRight {
	width: 80%;
	padding-top: 8px;
}
@media screen and (max-width: 639px) {
	#liveBlock .fLeft {
		float: none;
		width: 100%;
	}
	#liveBlock .fRight {
		float: none;
		width: 100%;
	}
}
#liveBlock .fLeft h3 {
	padding: 15px 0;
}
@media screen and (max-width: 639px) {
	#liveBlock .fLeft h3 {
		float: left;
		width: 50%;
	}
}
/* youtube
================================================== */
.youtube{
	position: relative;
	padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
	height: 0;
	overflow: hidden;
}
.youtube iframe{
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}