@charset "utf-8";

/* top.css */

/* top area_01
-------------------------------------- */

section.area_01{
	width: 100%;
	margin: 0;
	padding: 0;
	position: relative;
	height: 780px;
	/* background-image:
	url('../img/top/section_01_bg.jpg'); */
	background-repeat: no-repeat;
	background-size: cover!important;
	background-position: center center!important;
	display: flex;
	align-items: center;
	justify-content: center;
}


section.area_01 h2{
	display: block;
	max-width: 1200px;
	width: 90%;
	margin: 0 auto;
	height: 100%;
	background-image: url('../img/top/section_01_read.png');
	background-repeat: no-repeat;
	background-size: 55%;
	background-position: right 0 bottom 50%;
	text-indent: -9999px;
}

@media all and (max-width: 768px) {
	section.area_01{
		width: 100%;
		margin: 0;
		height: 600px;
		background-image: url('../img/common/header_bg.png'),url('../img/top/section_01_bg.jpg');
		background-repeat: no-repeat,no-repeat;
		background-size: 130%,cover;
		background-position: 50% 0,50% 0;
		position: relative;
	}
	section.area_01 h2{
		display: block;
		max-width: 1200px;
		width: 100%;
		margin: 0 auto;
		height: 100%;
		background-image: url('../img/top/section_01_read.png');
		background-repeat: no-repeat;
		background-size: 70%;
		background-position: right 50% bottom 50%;
		text-indent: -9999px;
	}
}

@media all and (max-width: 520px) {
	section.area_01 h2{
		background-size: 90%;
	}
}

/* top area_02
-------------------------------------- */

section.area_02{
	width: 100%;
	margin: 0;
	padding: 250px 0 50px;
	position: relative;
	background-image: url('../img/top/okojyo.png'),
	url('../img/top/zizou.png'),url('../img/top/section_02_bg.jpg');
	background-repeat: no-repeat,
	no-repeat,
	no-repeat;
	background-color: #211b12;
	background-position: 0 1.5%,
	100% 0,50% 0;
	background-size: 20%,
	20%,cover;
}

@media all and (max-width: 1024px) {

	section.area_02{
		padding: 50px 0 20px;
		background-image: none;
		background-color: #211b12;
	}
}

section.area_02 div.inner{
	max-width: 1200px;
	width: 100%;
	min-height: 650px;
	margin: 0 auto 80px;
	position: relative;
}

section.area_02 div.inner > img.left_img{
	position: absolute;
	top: 0;
	left: 0;
}

section.area_02 div.inner > img.right_img{
	max-width: 80%;
	position: absolute;
	top: 0;
	right: 0;
}

section.area_02 div.inner > div.right_box{
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 2;
	width: 42%;
	padding: 40px 50px 50px;
	box-sizing: border-box;
	background-color: rgba(255,255,255,0.8);
	text-align: center;
}

section.area_02 div.inner > div.left_box{
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2;
	width: 42%;
	padding: 40px 50px 50px;
	box-sizing: border-box;
	background-color: rgba(255,255,255,0.8);
	text-align: center;
}

section.area_02 div.inner > div > h2{
	color: #013532;
	font-size: 3rem;
	font-weight: 700;
	background-repeat: no-repeat;
	background-size: 80px;
	line-height: 80px;
	background-position: 0 0;
	padding: 0 0 0 90px;
	border-bottom: 1px solid #262118;
	margin-bottom: 20px;
	text-align: left;
}

section.area_02 div.inner > div > h2.spa{
	background-image: url('../img/top/section_icon_01.png');
}

section.area_02 div.inner > div > h2.treck{
	background-image: url('../img/top/section_icon_02.png');
}

section.area_02 div.inner > div > h2.nature{
	background-image: url('../img/top/section_icon_03.png');
}

section.area_02 div.inner > div > p{
	text-align: left;
	font-size: 1.6rem;
	line-height: 2;
	margin-bottom: 20px;
}

section.area_02 div.inner > div > a{
	max-width: 300px;
	width: 70%;
	margin: 0 auto;
	padding: 15px 0 15px;
	display: block;
	background-color: #fff;
	color: #013532;
	font-size: 2rem;
	font-weight: 700;
	background-repeat: no-repeat;
	background-size: 33px;
	background-image: url('../img/top/link_icon.png');
	line-height: 33px;
	background-position: 10% 50%;
	box-sizing: border-box;
}

section.area_02 div.inner:nth-of-type(3) > div > a{
	max-width: 350px;
	width: 85%;
	padding: 15px 0 15px 10px;
}

@media all and (max-width: 1024px) {
	section.area_02 div.inner{
		max-width: 1200px;
		width: 100%;
		min-height: 450px;
		margin: 0 auto;
		position: relative;
	}

	section.area_02 div.inner > img.left_img{
		max-width: 1024px;
		width: 100%;
		position: static;
		margin: auto;
	}

	section.area_02 div.inner > img.right_img{
		max-width: 1024px;
		width: 100%;
		position: static;
		margin: auto;
	}

	section.area_02 div.inner > div.right_box{
		position: relative;
		width: 90%;
		padding: 20px 25px 25px;
		text-align: center;
		margin: -50px auto 25px;
	}

	section.area_02 div.inner > div.left_box{
		position: relative;
		width: 90%;
		padding: 20px 25px 25px;
		text-align: center;
		margin: -50px auto 25px;
	}


}

@media all and (max-width: 520px) {

	section.area_02 div.inner > div > h2{
		color: #013532;
		font-size: 2rem;
		font-weight: 700;
		background-repeat: no-repeat;
		background-size: 40px;
		line-height: 40px;
		background-position: 0 0;
		padding: 0 0 0 50px;
		border-bottom: 1px solid #262118;
		margin-bottom: 20px;
		text-align: left;
	}

	section.area_02 div.inner > div > a{
		max-width: 300px;
		width: 90%;
		margin: 0 auto;
		padding: 15px 0 15px;
		display: block;
		background-color: #fff;
		color: #013532;
		font-size: 1.8rem;
		font-weight: 700;
		background-repeat: no-repeat;
		background-size: 25px;
		background-image: url('../img/top/link_icon.png');
		line-height: 25px;
		background-position: 10% 50%;
		box-sizing: border-box;
	}

	section.area_02 div.inner:nth-of-type(3) > div > a{
		width: 100%;
		padding: 15px 0 15px 20px;
		background-position: 5% 50%;
	}

	section.area_02 div.inner > div > p{
		font-size: 1.4rem;
		line-height: 2;
		margin-bottom: 20px;
	}

}

/* area_kabuki
----------------------------------- */

section.area_kabuki{
	width: 100%;
	height: 0;
	padding-top: 30%;
	margin: 0;
	position: relative;
	background-image: url(../img/top/kabuki_bg.jpg);
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: 100%;
	overflow: hidden;
}

section.area_kabuki div.kabuki_area{
	max-width: 1080px;
	width: 90%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
}

section.area_kabuki div.kabuki_area div{
	width: 40%;
	color: #fff;
	float: left;
	margin: 0 auto 0 0;
}

section.area_kabuki div.kabuki_area div h2{
	font-size: 3.6rem;
	font-weight: 700;
	background-repeat: no-repeat;
	background-size: 70px;
	line-height: 70px;
	background-position: 0 0;
	padding: 0 0 0 90px;
	border-bottom: 1px solid #fff;
	padding-bottom: 10px;
	margin-bottom: 20px;
	text-align: left;
	background-image: url('../img/top/section_icon_04.png');
}

section.area_kabuki div.kabuki_area div a{
	display: block;
	width: 100%;
	margin: 20px 0;
}

@media all and (max-width: 768px) {
	section.area_kabuki{
		height: auto;
		padding-top: 20px;
		padding-bottom: 20px;
		position: relative;
		background-image: none;
		background-color: #262118;
	}

	section.area_kabuki div.kabuki_area{
		width: 100%;
		position: static;
		transform: translateY(0) translateX(0);
		-webkit- transform: translateY(0) translateX(0);
	}

	section.area_kabuki div.kabuki_area div{
		width: 100%;
		color: #fff;
		float: none;
		margin: 0 auto;
	}

	section.area_kabuki div.kabuki_area div h2{
		font-size: 3rem;
		display: block;
		width: 90%!important;
		margin: 0 auto 20px;
		box-sizing: border-box;
	}

	section.area_kabuki div.kabuki_area div>img{
		margin-bottom: 20px;
	}

	section.area_kabuki div.kabuki_area div p{
		width: 90%;
		margin: 0 auto;
	}

	section.area_kabuki div.kabuki_area div a{
		display: block;
		width: 80%;
		margin: 20px auto;
	}
}

/* area_topbanner
------------------------------------- */

.area_topbanner{
	width: 100%;
	margin: 0;
	background-image: url(../img/top/section_03_bg.jpg);
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: 100%;
	padding-top: 18.958%;
	padding-bottom: 50px;
	background-color: #fff;
}

.area_topbanner .blog_link{
	margin: 0 auto;
}

@media all and (max-width: 768px) {
	.area_topbanner{
		padding-bottom: 10px;
	}
}

/* top area_03
-------------------------------------- */

section.area_03{
	width: 100%;
	margin: 0;
	padding: 100px 0 0;
	position: relative;
	/* background-color: rgba(1,53,50,1); */
	background-color: #0b2911;
}

section.area_03 div.inner{
	max-width: 740px;
	width: 90%;
	margin: 0 auto;
	position: relative;
}

section.area_03 div.inner .cat_link{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 30px;
}

section.area_03 div.inner .cat_link li{
	width: calc((100% - 40px) / 5);
	margin-right: 10px;
	margin-bottom: 20px;
	box-sizing: border-box;
}

section.area_03 div.inner .cat_link li:nth-of-type(1){
	background-color: #568b61;
}
section.area_03 div.inner .cat_link li:nth-of-type(2){
	background-color: #ad201f;
}

section.area_03 div.inner .cat_link li:nth-of-type(3){
	background-color: #3e641c;
}

section.area_03 div.inner .cat_link li:nth-of-type(4){
	background-color: #2374a1;
}

section.area_03 div.inner .cat_link li:nth-of-type(5){
	background-color: #d65f26;
}

section.area_03 div.inner .cat_link li:nth-of-type(6){
	background-color: #167a80;
}

section.area_03 div.inner .cat_link li:nth-of-type(7){
	background-color: #fab14e;
}

section.area_03 div.inner .cat_link li:nth-of-type(8){
	background-color: #2374a1;
}

section.area_03 div.inner .cat_link li:nth-of-type(9){
	background-color: #616161;
}

section.area_03 div.inner .cat_link li:nth-of-type(5n){
	margin-right: 0;
}

section.area_03 div.inner .cat_link li a{
	display: block;
	width: 100%;
	height: 100%;
	padding: 5px 0;
	text-align: center;
	color: #fff;
}

section.area_03 div.inner h2.news_ttl{
	display: block;
	width: 100%;
	margin-bottom: 20px;
	font-size: 2.4rem;
	font-weight: 700;
	color: #fff;
	border-bottom: 1px solid #fff;
}

section.area_03 div.inner h2.news_ttl a{
	float: right;
	font-weight: normal;
	color: #fff;
}

section.area_03 div.inner ul.news_area{
	width: 100%;
	border-bottom: 1px solid #fff;
}

section.area_03 div.inner ul.news_area li{
	width: 100%;
	display: block;
	border-bottom: 1px dotted #fff;
	padding: 0 0 20px;
	margin-bottom: 20px;
}

section.area_03 div.inner ul.news_area li:last-child{
	margin-bottom: 0;
	border-bottom: none;
}

section.area_03 div.inner ul.news_area li a{
	display: block;
	width: 100%;
	color: #fff;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

section.area_03 div.inner ul.news_area li a span.label{
	display: inline-block;
	width: 16%;
	text-align: center;
	padding: 5px 0;
	font-size: 1.4rem;
	margin-right: 10px;
	font-weight: 700;
	white-space: normal;
}

section.area_03 div.inner ul.news_area li a span.label_1{
	background-color: #131f50;
	color: #fff;
}

section.area_03 div.inner ul.news_area li a span.label_2{
	background-color: #ad201f;
	color: #fff;
}

section.area_03 div.inner ul.news_area li a span.label_3{
	background-color: #3e641c;
	color: #fff;
}

section.area_03 div.inner ul.news_area li a span.label_4{
	background-color: #58411a;
	color: #fff;
}

section.area_03 div.inner ul.news_area li a span.label_5{
	background-color: #d65f26;
	color: #fff;
}

section.area_03 div.inner ul.news_area li a span.label_6{
	background-color: #167a80;
	color: #fff;
}

section.area_03 div.inner ul.news_area li a span.label_7{
	background-color: #fab14e;
	color: #fff;
}

section.area_03 div.inner ul.news_area li a span.label_8{
	background-color: #2374a1;
	color: #fff;
}

section.area_03 div.inner ul.news_area li a span.label_9{
	background-color: #adad00;
	color: #fff;
}

section.area_03 div.inner ul.news_area li a span.label_10{
	background-color: #616161;
	color: #fff;
}

section.area_03 div.inner ul.news_area li a span.date{
	display: inline-block;
	width: 16%;
	text-align: center;
	padding: 5px 0;
	font-size: 1.5rem;
	margin-right: 10px;
	border-right: 1px solid #fff;
	font-weight: normal;
}

@media all and (max-width: 768px) {

	section.area_03{
		width: 100%;
		margin: 0;
		padding: 40px 0 45px;
		position: relative;
		background-image:
			none,
			none,
			none
		;
		background-repeat:
			no-repeat,
			no-repeat,
			no-repeat
		;
		background-size:
			100%,
			20%,
			20%
		;
		background-position:
			0 0,
			0 100%,
			100% 100%
		;
		background-color: #0b2911;
	}

	section.area_03 div.inner .cat_link li{
		width: calc((100% - 10px) / 2);
		margin-right: 10px;
		margin-bottom: 10px;
		box-sizing: border-box;
	}

		section.area_03 div.inner .cat_link li:nth-of-type(4n){
		margin-right: 10px;
	}

		section.area_03 div.inner .cat_link li:nth-of-type(2n){
		margin-right: 0;
	}

	section.area_03 div.inner h2.news_ttl{
		font-size: 2rem;
		padding-bottom: 40px;
		text-align: center;
	}

	section.area_03 div.inner h2.news_ttl a{
		display: none;
	}

	section.area_03 div.inner ul.news_area li a{
		font-size: 1.4rem;
	}

	section.area_03 div.inner ul.news_area li a span.label{
		width: 30%;
		font-size: 1.2rem;
		margin-bottom: 10px;
	}

	section.area_03 div.inner ul.news_area li a span.date{
		display: inline-block;
		width: 30%;
		font-size: 1.4rem;
		margin-right: 10px;
		border-right: none;
	}

	section.area_03 div.inner > a{
		color: #fff;
		margin-top: 10px;
		text-align: right;
		font-size: 1.4rem;
	}
}

/* top area_04
-------------------------------------- */

section.area_04{
	width: 100%;
	margin: 0;
	padding: 45px 0 50px;
	position: relative;
	background-image: url('../img/top/section_04_bg.jpg');
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: auto 100%;
}

section.area_04 h2{
	text-align: center;
	font-size: 4.8rem;
	font-weight: 700;
	letter-spacing: 1px;
	color: #fde3b0;
	margin-bottom: 50px;
}

section.area_04 h2 span{
	display: block;
	font-size: 2rem;
	color: #fff;
	font-weight: normal;
}

section.area_04 > a{
	max-width: 390px;
	width: 70%;
	margin: 50px auto 0;
	padding: 20px 0 20px 100px;
	display: block;
	background-color: #fff;
	color: #013532;
	font-size: 2.3rem;
	font-weight: 700;
	background-repeat: no-repeat;
	background-size: 33px;
	line-height: 33px;
	background-position: 15% 50%;
	background-image: url('../img/top/insta_icon.png');
	box-sizing: border-box;
}

#instafeed{
	width: 100%;
	font-size: 0;
	padding: 20px 0;
}

#instafeed a{
	display: inline-block;
	width: calc((100% - 180px) / 10);
	margin-right: 20px;
	margin-bottom: 20px;
}

#instafeed a:nth-of-type(10n){
	margin-right: 0;
}

@media all and (max-width: 768px) {

	#instafeed a{
		width: calc((100% - 80px) / 5);
	}

	#instafeed a:nth-of-type(5n){
		margin-right: 0;
	}

}

@media all and (max-width: 520px) {

	section.area_04 h2{
		font-size: 3rem;
		margin-bottom: 30px;
	}

	section.area_04 h2 span{
		font-size: 1.6rem;
	}

	section.area_04 > a{
		max-width: 390px;
		width: 90%;
		margin: 50px auto 0;
		padding: 10px 0 10px 0;
		display: block;
		background-color: #fff;
		color: #013532;
		font-size: 1.8rem;
		font-weight: 700;
		background-repeat: no-repeat;
		background-size: 33px;
		line-height: 33px;
		background-position: 10% 50%;
		background-image: url('../img/top/insta_icon.png');
		box-sizing: border-box;
		text-align: center;
	}

	#sbi_images{
		width: 90%;
		margin: auto;
		text-align: center;
	}

	#sb_instagram.sbi_col_7.sbi_disable_mobile #sbi_images .sbi_item{
		width: calc((100% - 20px) / 2)!important;
	}

	#sbi_images>div:nth-of-type(5n){
		margin-right: 20px;
	}

	#sbi_images>div:nth-of-type(2n){
		margin-right: 0;
	}
}

div.blog_link{
	max-width: 1200px;
	width: 90%;
	margin: 50px auto 0;
	overflow: hidden;
	text-align: center;
}

div.blog_link ul{
	width: 100%;
	margin: auto;
	font-size: 0;
}

div.blog_link ul li{
	width: calc((100% - 60px) / 4);
	display: inline-block;
	margin-right: 20px;
}

div.blog_link ul li:last-child{
	margin-right: 0;
}

div.blog_link ul li a{
	display: block;
	width: 100%;
	height: 0;
	padding-top: 55.33%;
	background-size: 100%;
	background-repeat: no-repeat;
	position: relative;
	color: #fff;
	box-sizing: border-box;
	text-shadow: 0 0 30px #000;
}

div.blog_link ul li a.bn_11{
	background-image: url('../img/banner/banner_yama.jpg');
}

div.blog_link ul li a.bn_12{
	background-image: url('../img/banner/banner_fall.jpg');
}

div.blog_link ul li a.bn_13{
	background-image: url('../img/banner/banner_map.jpg');
}

div.blog_link ul li a:before{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	width: 95%;
	height: 95%;
	background-color: rgba(0,0,0,0.4);
	vertical-align: middle;
}

div.blog_link ul li a p{
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
}

div.blog_link ul li a p span:nth-of-type(1){
	display: block;
	width: 80%;
	margin: 0 auto 10px;
	padding: 5px 0;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	text-align: center;
	font-size: 0.83vw;
	font-weight: 700;
}

div.blog_link ul li a p span:nth-of-type(2){
	display: block;
	margin: 0 auto;
	text-align: center;
	font-size: 1.3vw;
	line-height: 1.5;
	font-weight: 700;
	color: #fef1d7;
}

div.blog_link ul li a p span.line_1{
	display: block;
	margin: 1em auto;
	text-align: center;
	font-size: 1.3vw;
	line-height: 1.5;
	font-weight: 700;
	color: #fef1d7;
}

@media all and (max-width: 768px) {

	div.blog_link ul li{
		width: calc((100% - 20px) / 2);
		display: inline-block;
		margin-right: 20px;
		margin-bottom: 20px;
	}

	div.blog_link ul li:nth-of-type(2n){
		margin-right: 0;
	}

	div.blog_link ul li a p span:nth-of-type(1){
		width: 90%;
		font-size: 1.95vw;
	}
	div.blog_link ul li a p span:nth-of-type(2){
		font-size: 3.25vw;
	}
}

@media all and (max-width: 340px) {
	div.blog_link ul li a p span:nth-of-type(1){
		font-size: 0.78vw;
		letter-spacing: -1px;
	}
}