/*TOPページ*/
#cnt-top{
    margin-left: 80px;
    width: calc(100% - 80px);
    height: calc(90vh - 80px);
    position: relative;
}
#cnt-top .image-top{
    width: 100%;
    height: 100%;
	position: relative;
}
#cnt-top .image-top:after{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.05);
	z-index: 1;
}
#cnt-top .image-top li{
	width: 100%;
    height: 100%;
	display: none;
}
#cnt-top .image-top li:first-child{
	display: block;
}
#cnt-top .image-top .image{
    width: 100%;
    height: 100%;
}
#cnt-top .image-top .image1{
    background: url(../img/index/top1.jpg) center / cover no-repeat;
}
#cnt-top .image-top .image2{
    background: url(../img/index/top2.jpg) center / cover no-repeat;
}
#cnt-top .image-top .image3{
    background: url(../img/index/top3.jpg) center / cover no-repeat;
}
#cnt-top .image-top .image4{
    background: url(../img/index/top4.jpg) center / cover no-repeat;
}
#cnt-top .image-top .image5{
    background: url(../img/index/top5.jpg) center / cover no-repeat;
}
#cnt-top .image-top .image6{
    background: url(../img/index/top6.jpg) center / cover no-repeat;
}
#cnt-top .image-top p{
	text-align: right;
    color: #fff;
    transform: translateY(-40px);
	padding: 0 20px;
    line-height: 1.3;
}
#cnt-top .cap-box{
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
}
#cnt-top .cap-box h2{
	margin-top: 3%;
}
#cnt-top .cap-box h2 span.copy{
	font-family: 'Hina Mincho';
	font-size: 1.35vw;
    margin-top: 28px;
    margin-left: 7vw;
    display: block;
    color: #fff;
    font-weight: normal;
    letter-spacing: .15em;
	opacity: 0;
}
#cnt-top .cap-box h2 span.copy span{
	opacity: 0;
}
#cnt-top .cap-box h2 img{
	width: 60vw;
}
#cnt-top .topics{
	position: absolute;
	right: 0;
	bottom: 50px;
	width: 30%;
    min-width: 400px;
    padding: 25px;
	z-index: 1;
	background: #fff;
}
#cnt-top .topics:before{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	border-top: 20px solid #00aabf;
    border-right: 20px solid transparent;
}
#cnt-top .topics:after{
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	border-bottom: 20px solid #5bbd74;
    border-right: 20px solid transparent;
}
#cnt-top .topics h4{
	font-family:  YuMincho,"游明朝", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", Honoka, Meiryo, "メイリオ", serif;
	color: #00aabf;
	font-weight: 700;
	font-size: 1.4em;
}
#cnt-top .topics .text-box{
	margin: 10px 0 0 22px;
}
#cnt-top .topics .text-box .day{
	font-size: .8em;
	font-family: "Barlow","游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
}
#cnt-top .topics .text-box h3{
	font-size: 1.2em;
}
#cnt-top .topics .text-box h3 a{
	color: #323232;
}
#cnt-top .topics .text-box p{
	margin-top: 10px;
	font-size: .9em;
	line-height: 1.4;
}
#cnt-top .topics .text-box a{
	margin-top: 20px;
}

#cnt1,
#cnt2,
#cnt3,
#cnt4{
    width: 100%;
    position: relative;
}
#cnt1:before{
	content: "";
    position: absolute;
    background: url(../img/index/back-image1.gif) top / 100% no-repeat;
    left: 0;
    top: 50px;
    width: 40%;
	max-width: 800px;
    height: 100%;
    z-index: -1;
}
#cnt1:after{
	content: "";
    position: absolute;
    background: url(../img/index/back-image2.jpg) top / 100% no-repeat;
    right: 0;
    top: 200px;
    width: 30%;
    max-width: 560px;
    height: 300%;
    z-index: -1;
}
#cnt1 .text-box{
	width: 1100px;
	margin: 0 auto;
	display: flex;
	padding: 0 50px;
}
#cnt1 .text-box .title-box{
	position: relative;
	width: 40%;
	padding-top: 100px;
}
#cnt1 .text-box .title-box:after{
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	width: 200px;
    height: 100%;
	z-index: -1;
	background: url(../img/index/back-image3.jpg) bottom / 100% no-repeat;
}
#cnt1 .text-box .title-box h2{
	font-size: 2em;
	letter-spacing: .1em;
	color: #fff;
	font-weight: normal;
}
#cnt1 .text-box .title-box h2 span.h2-1,
#cnt1 .text-box .title-box h2 span.h2-2{
	display: table;
	padding: 15px;
}
#cnt1 .text-box .title-box h2 span.h2-1{
	background: #5bbd74;
}
#cnt1 .text-box .title-box h2 span.h2-2{
	background: #00aabf;
	margin-top: 15px;
	font-size: .9em;
}
#cnt1 .text-box .text{
	position: relative;
	width: 60%;
	padding: 100px 0 0 50px;
	font-size: 1.1em;
	line-height: 2.8em;
	font-weight: 700;
}
#cnt1 .text-box .text:after{
	content: "";
	position: absolute;
	top: 50px;
	right: 0;
	width: 250px;
    height: 100%;
	z-index: -1;
	background: url(../img/index/back-image4.jpg) top / 100% no-repeat;
}
#cnt1 .text-box .text a.link{
	margin-top: 40px;
}

#cnt2:after{
	content: "";
    position: absolute;
    background: url(../img/index/back-image6.jpg) bottom / 100% no-repeat;
    right: 0;
    bottom: -120px;
    width: 12%;
	min-width: 200px;
	max-width: 300px;
	height: 100%;
    z-index: -1;
}
#cnt2 .area-box{
	width: 1100px;
	margin: 200px auto;
	padding: 0 40px 0 50px;
	display: flex;
	position: relative;
}
#cnt2 .area-box:after{
	content: "";
    position: absolute;
    background: url(../img/index/back-image5.jpg) top / 100% no-repeat;
    left: -110px;
    top: 200px;
    width: 350px;
	height: 350px;
    z-index: -1;
}
#cnt2 .area-box .title-box,
#cnt3 .area-box .title-box,
#cnt5 .area-box .title-box{
	-ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    display: inline-block;
	font-size: 1.7em;
    letter-spacing: .15em;
	font-weight: 700;
}
#cnt2 .area-box .title-box span.en-copy,
#cnt3 .area-box .title-box span.en-copy,
#cnt5 .area-box .title-box span.en-copy{
	font-family:  YuMincho,"游明朝", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", Honoka, Meiryo, "メイリオ", serif;
	display: block;
	font-size: 1rem;
    letter-spacing: .1em;
	font-weight: normal;
}
#cnt2 .area-box ul,
#cnt3 .area-box ul{
	display: flex;
	flex-wrap: wrap;
	margin-left: 70px;
}
#cnt2 .area-box ul li{
	width: 33.333%;
	padding: 0 12px;
}
#cnt2 .area-box ul li img{
	width: 100%;
	height: auto;
}
#cnt2 .area-box ul li .text-box{
	padding: 10px 0 70px;
}
#cnt2 .area-box ul li .text-box .cate-box{
	display: flex;
	flex-wrap: wrap;
}
#cnt2 .area-box ul li .text-box .cate{
	margin-right: 2px;
	font-size: .8em;
	line-height: 1.4;
    font-weight: 700;
    border: 1px solid #5bbd74;
    display: table;
    padding: 5px 8px;
	margin-bottom: 2px;
	font-family: "Barlow","游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
}
#cnt2 .area-box ul li .text-box .cate a{
	color: #00aabf;
}
#cnt2 .area-box ul li .text-box .day{
	font-size: .85em;
	font-family: "Barlow","游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
}
#cnt2 .area-box ul li .text-box h3 a{
	color: #323232;
}
#cnt2 .area-box .link-box{
	margin: 0 auto;
    padding-left: 70px;
}

#cnt3 .line-image {
	width: calc(100% - 80px);
	margin-left: auto;
	background: #edecdf;
}
#cnt3 .line-image img{
	width: 1400px;
	height: auto;
	margin: 0 auto;
	transform: translateY(-30px);
}
#cnt3 .line-image.bottom img{
	transform: translateY(30px);
}
#cnt3 .area-box-bk{
	position: relative;
}
#cnt3 .area-box-bk:before{
	content: "";
	position: absolute;
	z-index: -1;
	width: calc(100% - 80px);
	left: 80px;
	height: 100%;
	background: #edecdf;
}
#cnt3 .area-box{
	width: 1100px;
	margin: 0 auto;
	padding: 120px 50px 120px 50px;
	display: flex;
	position: relative;
}
#cnt3 .area-box:after{
	content: "";
    position: absolute;
    background: url(../img/index/back-image7.gif) top / 100% no-repeat;
    left: 5px;
    top: 250px;
    width: 250px;
	height: 300px;
    z-index: -1;
}
#cnt3 .area-box ul li{
	width: 50%;
	padding: 0 15px;
	margin-bottom: 30px;
}
#cnt3 .area-box ul li .image{
	position: relative;
}
#cnt3 .area-box ul li:nth-child(2n){
	transform: translateY(100px) scale(.8);
}
#cnt3 .area-box ul li.in:nth-child(2n){
	transform: translateY(100px) scale(1);
}
#cnt3 .area-box ul li .title{
	position: absolute;
	padding: 15px 30px;
	font-size: 1.1em;
	line-height: 1.3;
	left: 0;
	bottom: 0;
	display: flex;
	background: #fff;
	font-weight: 700;
	color: #00aabf;
}
#cnt3 .area-box ul li .title:after{
	content: "";
	background: #bfdebb;
	width:  calc(100% - 40px);
	height: 1px;
	position: absolute;
	left: 20px;
	bottom: 0;
}
#cnt3 .area-box ul li img{
	width: 100%;
	height: auto;
}
#cnt3 .area-box ul li .text-box{
	padding: 30px;
	background: #fff;
}
#cnt3 .area-box ul li .text-box .link-box{
	margin: 20px 0 0 auto;
}
#cnt3 .area-box .link-box{
	margin: 140px auto 0;
    padding-left: 70px;
}

#cnt4 {
	margin-top: 150px;
}
#cnt4 .title-box{
	display: table;
	margin: 0 auto;
	font-size: 2em;
    letter-spacing: .1em;
    font-weight: 700;
}
#cnt4 .title-box span.en-copy{
	font-weight: normal;
	font-family:  YuMincho,"游明朝", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", Honoka, Meiryo, "メイリオ", serif;
	display: block;
    font-size: 1rem;
    letter-spacing: .1em;
}
#cnt4 .area-box{
	display: flex;
	margin-top: 70px;
}
#cnt4 .area-box .image-box{
	position: relative;
	width: calc(50vw - 250px);
	height: 400px;
	background: url(../img/index/image-furusato.jpg) center / cover no-repeat;
}
#cnt4 .area-box .image-box .title{
	position: absolute;
	right: 30px;
	top: 30px;
	color: #fff;
	font-weight: 700;
	background: #5bbd74;
	font-family: "Barlow","游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
	padding: 2px 8px;
}
#cnt4 .area-box .text-box{
	display: flex;
	width: calc(50vw + 250px);
	position: relative;
}
#cnt4 .area-box .text-box:after{
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 70%;
	min-width: 500px;
	height: 200%;
	background: url(../img/index/back-image7.jpg) bottom / 100% no-repeat;
	z-index: -2;
}
#cnt4 .area-box .text-box .text{
	width: 500px;
	margin-left: 70px;
}
#cnt4 .area-box .text-box .text a{
	margin-top: 40px;
}

#cnt5 .line-image1{
	position: relative;
	z-index: -1;
	margin: 70px 0 70px auto;
	width: 84vw;
	max-width: calc(100% - 150px);
}
#cnt5 .line-image2{
	position: relative;
	z-index: -1;
	margin: 70px 0;
	width: 84vw;
	max-width: calc(100% - 150px);
}
#cnt5 .line-image1 img,
#cnt5 .line-image2 img{
	width: 100%;
}
#cnt5 .area-box {
	display: flex;
	flex-wrap: wrap;
}
#cnt5 .area-box .title-box{
	width: 80px;
    margin-left: auto;
	position: relative;
}
#cnt5 .area-box .title-box:after{
	content: "";
    position: absolute;
    background: url(../img/index/back-image8.jpg) top / 100% no-repeat;
    left: -50px;
    top: 190px;
    width: 180px;
    height: 100%;
    z-index: -1;
}
#cnt5 .area-box .g-map{
	width: calc(50% + 420px);
    height: 500px;
}
#cnt5 .area-box .g-map .map{
	background: #333;
	height: 100%;
	margin-left: 70px;
}
#cnt5 .area-box .g-map .map iframe{
	width: 100%;
	height: 500px;
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
}
#cnt5 .link-box{
	width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 70px;
}

/* //////////////////////////////////////////////

SP

////////////////////////////////////////////// */

@media screen and (max-width: 1300px) {
	#cnt2 .area-box,
	#cnt3 .area-box {
		width: 1050px;
	}
	#cnt2 .area-box ul,
	#cnt3 .area-box ul {
		margin-left: 20px;
	}
	#cnt5 .area-box .g-map .map {
		margin-left: 40px;
	}
	#cnt3 .area-box:after{
		width: 180px;
		height: 220px;
	}
}
@media screen and (max-width: 1200px) {
	#cnt-top .cap-box h2{
		margin-top: 5%;
	}
	#cnt1 .text-box {
		display: block;
		width: calc(100% - 100px);
		margin-left: auto;
		margin-right: 0;
		padding: 0 50px 0 0;
	}
	#cnt1 .text-box .title-box,
	#cnt1 .text-box .text{
		width: 100%;
		padding-left: 50px;
	}
	#cnt1 .text-box .text{
		padding-top: 50px;
	}
	#cnt1:after{
		top: 100%;
		max-width: 330px;
	}
	#cnt2:after{
		height: 300px;
	}
	#cnt2 .area-box,
	#cnt3 .area-box,
	#cnt5 .area-box{
		display: block;
		width: calc(100% - 80px);
		margin-left: auto;
		margin-right: 0;
	}
	#cnt2 .area-box .title-box,
	#cnt3 .area-box .title-box,
	#cnt5 .area-box .title-box{
		writing-mode: initial;
		margin-bottom: 50px;
	}
	#cnt2 .area-box:after{
		top: 0;
		left: -50px;
		width: 250px;
		height: 300px;
	}
	#cnt2 .area-box ul,
	#cnt3 .area-box ul{
		margin-left: 0;
	}
	#cnt2 .area-box ul li {
		width: 50%;
	}
	#cnt3 .area-box:after{
		top: 70px;
		height: 250px;
	}
	#cnt4{
		display: none;
	}
	#cnt5 .area-box .title-box {
		width: 100%;
		padding-left: 0;
	}
	#cnt5 .area-box .title-box:after{
		left: initial;
		top: -100px;
		width: 150px;
		height: 250px;
		right: 0;
	}
	#cnt5 .area-box .g-map {
		width: 100%;
	}
	#cnt5 .area-box .g-map .map{
		margin-left: 50px;
	}
}
@media screen and (max-width: 1000px) {
	#cnt-top{
		width: 100%;
		margin-left: 0;
	}
	#cnt-top .cap-box h2 img {
		width: 80vw;
	}
	#cnt-top .cap-box h2 span.copy {
		font-size: 2.35vw;
	}
	#cnt1 .text-box{
		width: 100%;
		padding-right: 5vw;
	}
	#cnt2 .area-box,
	#cnt3 .area-box,
	#cnt5 .area-box{
		width: 100%;
	}
	#cnt2 .area-box{
		padding: 0 50px;
	}
	#cnt2 .area-box:after{
		left: 0px;
	}
	#cnt3 .area-box-bk:before{
		width: 95vw;
		left: 5vw;
	}
	#cnt2 .area-box .link-box,
	#cnt3 .area-box .link-box{
		padding-left: 0;
	}
	#cnt3 .line-image {
		width: 100%;
	}
	#cnt3 .area-box{
		padding: 150px 8vw 120px;
	}
	#cnt2 .area-box .title-box,
	#cnt3 .area-box .title-box,
	#cnt5 .area-box .title-box{
		margin: 0 auto 50px;
    	display: table;
		text-align: center;
	}
	#cnt5 .line-image1,
	#cnt5 .line-image2{
		width: 90vw;
		max-width: 90vw;
	}
	#cnt5 .area-box{
		padding: 150px 35px 120px 50px;
	}
	#cnt5 .area-box .g-map .map {
		margin-left: 30px;
	}
}
@media screen and (max-width: 768px) {
	#cnt-top{
		height: auto;
	}
	#cnt-top .image-top {
		height: calc(90vh - 80px);
	}
	#cnt-top .image-top p{
		transform: translateY(-100%);
		margin-top: -70px;
		text-align: left;
	}
	#cnt-top .cap-box{
		width: 100%;
	}
	#cnt-top .cap-box h2 img {
		width: 120vw;
		margin-left: 5vw;
	}
	#cnt-top .cap-box h2 span.copy {
		font-size: 3.85vw;
		margin-left: 8.5vw;
	}
	#cnt-top .topics {
		position: relative;
		top: -50px;
		right: initial;
		bottom: initial;
		left: 5%;
		width: 90vw;
		min-width: 90vw;
		padding: 25px;
	}
	#cnt-top .topics:before{
		border-top: 20px solid #00aabf;
		border-right: 20px solid transparent;
	}
	#cnt-top .topics:after{
		border-bottom: 20px solid #5bbd74;
		border-right: 20px solid transparent;
	}
	#cnt-top .topics .text-box {
		margin: 10px 0 0 0;
	}
	#cnt-top .topics .text-box h3 {
		font-size: 1.1em;
	}
	#cnt1 .text-box{
		padding-right: 7vw;
	}
	#cnt1 .text-box .title-box,
	#cnt1 .text-box .text{
		padding-left: 7vw;
	}
	#cnt1 .text-box .title-box h2 span.h2-1{
		padding: 10px;
	}
	#cnt1 .text-box .title-box h2 span.h2-2{
		margin-top: 8px;
		padding: 10px;
	}
	#cnt1 .text-box .title-box h2 span.h2-1 span,
	#cnt1 .text-box .title-box h2 span.h2-2 span{
		opacity: 1;
	}
	#cnt1:before {
		top: 0;
		width: 80%;
		z-index: 0;
	}
	#cnt1:after {
		top:66%;
		max-width: 40%;
		width: 40%;
	}
	#cnt1 .text-box .title-box{
		padding-top: 80px;
	}
	#cnt1 .text-box .title-box:after{
		width: 82px;
		bottom: 20px;
	}
	#cnt1 .text-box .title-box h2 {
		font-size: 1.25em;
	}
	#cnt1 .text-box .text{
		line-height: 2.2em;
		padding-top: 30px;
	}
	#cnt1 .text-box .text:after{
    	width: 95px;
		top: 14px;
		right: 50px;
	}
	#cnt2 .area-box{
		margin: 100px auto;
	}
	#cnt1 .text-box .text a.link {
		margin-top: 30px;
	}
	#cnt2 .area-box .title-box,
	#cnt3 .area-box .title-box,
	#cnt5 .area-box .title-box{
		font-size: 1.5em;
		letter-spacing: .05em;
		margin: 0 auto 50px;
	}
	#cnt2 .area-box .title-box span.en-copy,
	#cnt3 .area-box .title-box span.en-copy,
	#cnt5 .area-box .title-box span.en-copy{
		font-size: .9rem;
	}
	#cnt2 .area-box {
		padding: 0 4vw;
	}
	#cnt2 .area-box:after{
		width: 200px;
		height: 250px;
	}
	#cnt2 .area-box ul li{
		padding: 0 1vw;
	}
	#cnt2 .area-box ul li .text-box {
		padding: 10px 0 50px;
	}
	#cnt2 .area-box ul li .text-box .cate {
		font-size: .7em;
		margin-bottom: 2px;
	}
	#cnt2 .area-box ul li .text-box h3{
		font-size: .9em;
	}
	#cnt2:after {
		width: 100px;
		min-width: 100px;
		height: 200px;
		bottom: -70px;
	}
	#cnt2 .area-box .link-box {
		padding-left: 0;
		margin: 0 auto;
	}
	#cnt3 .area-box-bk:before {
		width: 100%;
		left: 0;
	}
	#cnt3 .area-box {
		padding: 70px 5vw;
	}
	#cnt3 .area-box:after {
		top: 20px;
		width: 150px;
		height: 150px;
	}
	#cnt3 .line-image img{
		width: 100%;
		transform: translateY(0px);
	}
	#cnt3 .line-image.bottom img{
		transform: translateY(10px);
	}
	#cnt3 .area-box ul li {
		width: 100%;
		padding: 0 2vw;
	}
	#cnt3 .area-box ul li:nth-child(2n){
		transform: translateY(0) scale(.8);
	}
	#cnt3 .area-box ul li.in:nth-child(2n){
		transform: translateY(0) scale(1);
	}
	#cnt3 .area-box .link-box {
		margin: 30px auto 0;
	}
	#cnt5 .line-image1 {
		margin: 30px 0 30px auto;
	}
	#cnt5 .area-box{
		margin: 50px auto;
		padding: 0;
	}
	#cnt5 .area-box .title-box:after {
		top: -40px;
		width: 100px;
	}
	#cnt5 .area-box .g-map{
		display: none;
	}
	#cnt5 .link-box{
		display: table;
		margin: 30px auto 0;
	}
	#cnt5 .link-box a.link{
		justify-content: center;
	}
	#cnt5 .line-image1 {
		margin: 50px 0 50px auto;
	}
	#cnt5 .line-image2 {
		margin: 50px auto 50px 0;
	}
	#cnt5 .line-image1 img, #cnt5 .line-image2 img{
		animation: none;
	}
}