@charset 'UTF-8';

h1 {
	font-size:400%;
	font-weight:600;
	letter-spacing:5px;
}
.skyblue {
	background-color:rgb(218,233,246);
	background:-moz-linear-gradient(0deg, rgba(218,233,246,1) 0%, rgba(98,154,205,1) 70%);
	background:-webkit-linear-gradient(0deg, rgba(218,233,246,1) 0%, rgba(98,154,205,1) 70%);
	background:linear-gradient(0deg, rgba(218,233,246,1) 0%, rgba(98,154,205,1) 70%);
}
.ico {
	margin-left:auto;
	margin-right:auto;
	margin-bottom:30px;
}
h2+p {
	letter-spacing:2px;
	margin-top:3%;
}
.tab-group {
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	margin-bottom:3%;
}
.tab {
	background-color:#fff;
	padding:5px;
	list-style:none;
	text-align:center;
	font-size:180%;
	font-weight:600;
	cursor:pointer;
	border-radius:50px;
}
.tab-group.col-2 .tab {
	width:48%;
}
.tab-group.col-3 .tab {
	width:31%;
}
.tab.is-active {
	background:#fff16d;
	transition:all 0.2s ease-out;
}
.tabContent {
	display:none;
}
.tabContent.is-show {
	display:block;
}

.trekking header nav li a,
.trekking header nav li a:visited,
.trekking header nav li a:hover,
.birdseye header nav li a,
.birdseye header nav li a:visited,
.birdseye header nav li a:hover {
	color:#222;
}

/*トレッキング*/
.trekking #sec-1 {
	height:100vh;
	position:relative;
	background-repeat:no-repeat;
	background-position:top center;
	background-size:cover;
	position:relative;
}
.trekking.asahiyama #sec-1 {
	background-image:url(../images/il02.jpg);
}
.trekking.katsura #sec-1 {
	background-image:url(../images/il03.jpg);
}
.trekking.waka #sec-1 {
	background-image:url(../images/il01.jpg);
}
.trekking.amakazari #sec-1 {
	background-image:url(../images/il04.jpg);
}
.trekking.maki #sec-1 {
	background-image:url(../images/il05.jpg);
}
.trekking.motodori #sec-1 {
	background-image:url(../images/il06.jpg);
}
.trekking.kasumi #sec-1 {
	background-image:url(../images/il07.jpg);
}
.trekking.kojo #sec-1 {
	background-image:url(../images/il08.jpg);
}
.trekking.masu #sec-1 {
	background-image:url(../images/il09.jpg);
}
.trekking.kanaiyama #sec-1 {
	background-image:url(../images/il10.jpg);
}
.trekking.shiozaki #sec-1 {
	background-image:url(../images/il11.jpg);
}
.trekking.haruyama #sec-1 {
	background-image:url(../images/il12.jpg);
}
.trekking.hagino #sec-1 {
	background-image:url(../images/il13.jpg);
}
.elevation_wrap {
	position:absolute;
	top:150px;
	right:0;
	z-index:9997;
	width:100vw;
	height:134px;
	overflow:hidden;
	padding:20px 0 0;
}
.elevation_container {
	position:absolute;
	top:0;
	right:0;
	z-index:9997;
	width:100vw;
	height:134px;
	animation:loop 30s -15s linear infinite;
}
.elevation {
	position:absolute;
	top:20px;
	right:0;
	z-index:9998;
}
@keyframes loop {
	0% {
		transform: translateX(100%);
	}
	100% {
		transform: translateX(-100%);
	}
}
.elevation p {
	width:100%;
	text-align:center;
	color:#0068b7;
	font-size:200%;
	font-weight:600;
	line-height:1.2;
	margin:0;
	position:absolute;
	top:50%;
	left:48%;
	-webkit-transform:translate(-50%,-50%);
	-moz-transform:translate(-50%,-50%);
	transform :translate(-50%,-50%);
}
.elevation span {
	display:block;
	font-size:110%;
}
.trekking #sec-1 h1 {
	line-height:1.3;
}
.trekking #sec-1 h1 span {
	display:block;
	font-size:50%;
}
.trekking #sec-1 .logo,
.trekking #sec-1 .title,
.trekking #sec-1 > a {
	position:absolute;
}
.trekking #sec-1 .logo {
	top:50px;
	left:70px;
	z-index:9998;
}
.trekking #sec-1 .title {
	top:60px;
	left:340px;
	z-index:9998;
}
.trekking #sec-1 .title p {
	font-size:220%;
	font-weight:600;
	margin:0;
}
.trekking #sec-1 > a,
.trekking #sec-1 > a:visited,
.trekking #sec-1 > a:hover {
	display:block;
	width:100%;
	text-align:right;
	font-size:140%;
	color:#fff;
	bottom:1em;
	right:1em;
}
.trekking #sec-1 ul {
	display:flex;
	background-image:url(../images/bg3.png);
	background-repeat:no-repeat;
	background-position:top center;
	background-color:rgba(255,255,255,0.7);
	margin-top:3%;
}
.trekking #sec-1 li a:hover,
.trekking #sec-1 li a:visited,
.trekking #sec-1 li a {
	display:block;
	text-decoration:none;
	font-size:160%;
	font-weight:600;
	color:#222;
	padding:10px;
}
.trekking #sec-1 li img {
	display:inline;
	vertical-align:sub;
	width:auto;
	height:20px;
	margin-right:5px;
}
.trekking #sec-2 div+div .ico {
	margin-top:5%;
}
.trekking #sec-2 #mov {
	background:url(../images/page/movBack.jpg) no-repeat bottom center;
	padding:7% 0 2%;
}
.trekking #sec-2 .mov_cont {
	max-width:1000px;
	background-image:url(../images/bg3.png);
	background-repeat:no-repeat;
	background-position:top center;
	background-color:rgba(255,255,255,0.7);
	margin:0 auto;
}
.trekking #sec-2 .mov_wrap {
	position:relative;
	width:100%;
	padding-top:56.25%;
}
.trekking #sec-2 #mov iframe {
	position:absolute;
	top:0;
	right:0;
	width:100%;
	height:100%;
}
.trekking #sec-2 #mov p {
	font-size:200%;
	font-weight:600;
	padding-top:.5em;
	margin-bottom:.5em;
}
.trekking #sec-3 .tab {
	margin-top:5%;
}
.trekking #sec-3 .tab.pink.is-active {
	color:#fff;
	background:#ee819e;
}
.trekking #sec-3 .tab.orange.is-active {
	color:#fff;
	background:#f3981c;
}
.trekking #sec-3 .tab.green.is-active {
	color:#fff;
	background:#009944;
}
.trekking #sec-3 .course .time {
	font-weight:600;
	border-top:3px dashed #fff;
	border-bottom:3px dashed #fff;
	padding:5px 0;
}
.trekking #sec-3 .course .time img,
.trekking #sec-3 .course .detail img {
	display:inline-block;
	vertical-align:text-top;
	margin-right:3px;
}
.trekking #sec-3 .course .detail li {
	display:inline-block;
	font-size:180%;
	margin-bottom:1em;
}
.trekking #sec-3 .course.tate .detail {
	float:left;
	width:30%;
}
.trekking #sec-3 .course.tate .map {
	float:right;
	width:65%;
}
.trekking #sec-3 .course.tate .detail li {
	display:block;
	text-align:center;
	margin-bottom:0;
}
.trekking #sec-3 .course .detail li:not(:last-child) {
	margin-right:5px;
}
.trekking #sec-3 .course .detail.tate li:not(:last-child) {
	margin-right:0;
}
.trekking #sec-3 .course .detail .point {
	font-weight:600;
	background-color:rgba(255,255,255,0.3);
	border:1px solid #fff;
	border-radius:50px;
	padding:0 1em;
}
.trekking #sec-3 .course .detail .point.goal {
	color:#e7211a;
}
.trekking #sec-3 .course .detail .arrow:before,
.trekking #sec-3 .course .detail .arrow:after,
.trekking #sec-3 .course .detail .arrow-single:before {
	content:'\f061';
	font-family:'FontAwesome';
	color:#999;
}
.trekking #sec-3 .course.tate .detail .arrow:before,
.trekking #sec-3 .course.tate .detail .arrow:after,
.trekking #sec-3 .course.tate .detail .arrow-single:before {
	display:block;
	content:'\f063';
}
.trekking #sec-3 .spot {
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}
.trekking #sec-3 .spot:after {
	display:block;
	content:'';
	width:31%;
	height:0;
}
.trekking #sec-3 .spot li {
	width:31%;
	margin-top:3%;
}
.trekking #sec-3 .spot h3 {
	font-size:180%;
	font-weight:600;
}
.trekking #sec-3 .spot p {
	margin:0;
}
.trekking .container.map {
	max-width:none;
	background:url(../images/bg3.png) no-repeat bottom center;
}
.trekking #sec-5 h2 {
	margin:0 0 3%;
}
.trekking #sec-5 iframe {
	width:100%;
}
.trekking .road ul,
.map_navi ul {
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	margin:0 auto;
}
.trekking .road li {
	width:45%;
	max-width:290px;
	margin:0 1%;
}
.trekking .road li p {
	margin:5px 0 1em;
}
.map_navi li {
	width:30%;
	margin:5% 1% 0;
}
.map_navi a,
.map_navi a:visited,
.map_navi a:hover {
	display:block;
	color:#222;
	position:relative;
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter: "alpha(opacity=100)";
	-moz-opacity: 1;
	-khtml-opacity: 1;
}
.map_navi .cloud,
.map_navi .cloud2 {
	position:absolute;
	bottom:10px;
	right:0;
}
.map_navi h3 {
	text-align:left;
	font-size:280%;
	font-weight:600;
	line-height:1.3;
	-ms-writing-mode:tb-rl;
	writing-mode:vertical-rl;
	position:absolute;
	top:80px;
	right:15px;
}
.map_navi h3 span {
	display:block;
	font-size:50%;
	letter-spacing:2px;
	margin-top:2px;
}
.map_navi h3 span+span {
	line-height:1.5;
	letter-spacing:1px;
	background:url(../images/front/ico_mov.png) no-repeat top center;
	background-size:100% auto;
	padding-top:1.4em;
	margin-top:0;
	margin-right:3px;
}

/*鳥瞰図*/
body.birdseye {
	background-color:#dee4cb;
}
.birdseye-cloud_wrap {
	position:absolute;
	top:30vh;
	right:0;
	z-index:9997;
	width:100vw;
	height:254px;
	overflow:hidden;
	padding:20px 0 0;
}
.birdseye-cloud_container {
	position:absolute;
	top:0;
	right:0;
	z-index:9997;
	width:100vw;
	height:254px;
	animation:loop 60s -30s linear infinite;
}
.birdseye-cloud {
	position:absolute;
	top:20px;
	right:0;
	z-index:9998;
}
.birdseye #sec-1 {
	background:url(../images/page/birdseye_bg_1.jpg) no-repeat top center;
	background-size:100% auto;
}
.birdseye #sec-1 .container {
	padding-top:30vh;
}
.birdseye #sec-1 img {
	margin:0 auto 30px;
}
.birdseye #sec-1 h1 {
	text-align:center;
	line-height:1.3;
}
.birdseye #sec-1 p {
	letter-spacing:2px;
	max-width:800px;
	margin:3% auto 1em;
}
.birdseye #sec-1 .tac > a,
.birdseye #sec-1 .tac > a:visited,
.birdseye #sec-1 .tac > a:hover {
	display:inline-block;
	font-size:180%;
	color:#222;
	font-weight:600;
	text-decoration:none;
	border-radius:50px;
	background-color:#fff16d;
	padding:.5em 1em;
	margin:3% 0;
}
.birdseye #sec-1 .tac div {
	display:inline-block;
	position:relative;
}
.birdseye #sec-1 .tac div p {
	width:80%;
	color:#fff;
	font-weight:600;
	line-height:1.3;
	margin:0;
	position:absolute;
	top:33%;
	left:50%;
	-webkit-transform:translate(-50%,-50%);
	-moz-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
	padding:0 10%;
}
.birdseye #sec-2 .container {
	padding-top:3%;
}
.birdseye #sec-2 ul {
	display:flex;
	justify-content:space-around;
	flex-wrap:wrap;
	max-width:1200px;
	margin:0 auto;
}
.birdseye #sec-2 li {
	margin-top:5%;
}
.birdseye #sec-2 li a,
.birdseye #sec-2 li a:visited,
.birdseye #sec-2 li a:hover {
	display:block;
	color:#fff;
	position:relative;
	opacity:1;
	filter:alpha(opacity=100);
	-ms-filter:"alpha(opacity=100)";
	-moz-opacity:1;
	-khtml-opacity:1;
	overflow:hidden;
}
.birdseye #sec-2 li a:hover {
	color:#222;
}
.birdseye #sec-2 li img+img {
	position:absolute;
	top:0;
	left:0;
}
.birdseye #sec-2 li h3 {
	text-align:left;
	font-size:280%;
	font-weight:600;
	line-height:1.3;
	-ms-writing-mode:tb-rl;
	writing-mode:vertical-rl;
	position:absolute;
	top:50%;
	left:50%;
	-webkit-transform:translate(-50%,-50%);
	-moz-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
}
.birdseye #sec-2 li h3 span {
	display:block;
	font-size:50%;
	letter-spacing:2px;
	margin-top:2px;
}
.birdseye #sec-2 li img:last-child {
	position:absolute;
	bottom:0;
	right:0;
}
.birdseye #sec-2 {
	background:url(../images/page/birdseye_bg_2.jpg) no-repeat bottom center;
	background-size:100% auto;
}
.birdseye #sec-2 .container {
	padding-bottom:40vh;
}

/*個人情報*/
.privacy #sec-1 {
	min-height:80vh;
}
.privacy dl {
	max-width:800px;
	font-size:180%;
	margin:3% auto 0;
}
.privacy dt {
	font-weight:600;
	margin-bottom:.5em;
}
.privacy dd {
	border-left:1px solid #676765;
	padding-left:1em;
	margin-left:.5em;
}
.privacy dd:not(:last-child) {
	margin-bottom:3%;
}
.privacy dd div {
	word-break:break-all;
	margin-top:1em;
}


@media only screen and (max-width: 1200px) {
}
@media only screen and (max-width: 1050px) {
	.trekking #sec-1 .logo {
		max-width:15vw;
		top:10px;
		left:10px;
	}
	.trekking #sec-1 .title {
		top:10px;
		left:20vw;
	}
}
@media only screen and (max-width: 900px) {
	.map_navi ul {
		max-width:100%;
	}
	.map_navi .cloud,
	.map_navi .cloud2 {
		width:40%;
	}
	.map_navi h3 {
		top:15px;
		right:5px;
	}
	.birdseye #sec-2 li {
		width:30%;
	}
	.birdseye #sec-2 li img:last-child {
		width:50%;
	}
	.privacy #sec-1 {
		min-height:90vh;
	}
	.trekking .road ul {
		display:block;
	}
	.trekking .road li {
		width:auto;
		max-width:none;
	}
}
@media only screen and (max-width: 600px) {
	h1 {
		font-size:300%;
		letter-spacing:0;
	}
	.ico {
		max-width:20%;
		margin-bottom:5%;
	}
	.container.map .ico {
		max-width:34%;
	}
	.elevation_wrap {
		top:45vh;
	}
	.trekking #sec-1 .logo {
		max-width:none;
		max-height:14vh;
		left:5%;
	}
	.trekking #sec-1 .title {
		width:90%;
		top:16vh;
		left:50%;
		-webkit-transform:translateX(-50%);
		-moz-transform:translateX(-50%);
		transform :translateX(-50%);
		text-align:center;
	}
	.trekking #sec-1 .title p {
		font-size:180%;
	}
	.trekking #sec-1 li a:hover,
	.trekking #sec-1 li a:visited,
	.trekking #sec-1 li a {
		padding:10px 5px;
	}
	.trekking #sec-1 li img {
		display:block;
		margin:0 auto 5px;
	}
	.trekking #sec-2 #mov {
		background:none;
		padding:7% 0 0;
	}
	.trekking #sec-3 .spot li,
	.map_navi li,
	.birdseye #sec-2 li {
		width:48%;
	}
	.map_navi h3,
	.birdseye #sec-2 li h3 {
		font-size:200%;
	}
	.birdseye #sec-1 .container {
		padding-top:10vh;
	}
	.birdseye #sec-2 .container {
		padding-bottom:20vh;
	}
	.privacy #sec-1 {
		min-height:auto;
	}
}