@charset "UTF-8";
/* Body */
body {
	font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
	margin: 0;
	padding: 0;
	font-style: normal;
	font-weight: 200;
    background-color: #FFFFFF;
    line-height: 1.4;
}
/* Container */
.container {
	width: 90%;
	margin-top: 0;
	margin-left: auto;
	margin-right: auto;
	height: auto;
	background-image: url(../img/top_bg_pc.jpg);
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
/* Navigation */
header {
	width: 100%;
	height: 400px;
	background: no-repeat url("../img/logo_bg.png");	
	background-size:60% auto;
	margin: 0;
}
.logo {
	color: #fff;
	font-weight: bold;
	text-align: undefined;
	width: 10%;
	float: left;
	margin-top: 5px;
	margin-left: 25px;
	letter-spacing: 4px;
}

.logo img{
	max-width:345px;
	height:auto:
	width: 100%
}

nav {
	float: right;
	width: 50%;
	text-align: right;
	margin-right: 25px;
}
header nav ul {
	list-style: none;
	float: right;
}
nav ul li {
	float: left;
	color: #FFFFFF;
	font-size: 14px;
	text-align: left;
	margin-right: 25px;
	letter-spacing: 2px;
	font-weight: bold;
	transition: all 0.3s linear;
}
ul li a {
	color: #FFFFFF;
	text-decoration: none;
}
ul li:hover a {
	color: #2C9AB7;
}

/*drawer navi01*/

*, *:before, *:after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
ol, ul {
	list-style: none;
}
a {
	text-decoration: none;
	color: inherit;
}
.cp_offcm01 {
	position: fixed;
	top: 0;
	right: 0;
	display: inline-block;
	z-index: 99999;
}

/* menu */
.cp_offcm01 .cp_menu {
	position: fixed;
	top: 0;
	right: -100vw;
	width: 260px;
	height:auto;
	cursor: pointer;
	-webkit-transition: 0.53s transform;
	        transition: 0.53s transform;
	-webkit-transition-timing-function: cubic-bezier(.38,.52,.23,.99);
	        transition-timing-function: cubic-bezier(.38,.52,.23,.99);
	background-color: #7BB1EE;
	opacity: 1;
}
.cp_offcm01 .cp_menu ul {
	margin: 0;
	padding: 0;
}
.cp_offcm01 .cp_menu li {
	list-style: none;
}
.cp_offcm01 .cp_menu li a {
	display: block;
	padding: 20px;
	text-decoration: none;
	color: #ffffff;
	border-bottom: 1px solid #ffffff;
}

.cp_offcm01 #cp_toggle01 {
	position: absolute;
	display: none;
	opacity: 0;
}
.cp_offcm01 #cp_toggle01:checked ~ .cp_menu {
	-webkit-transform: translateX(-100vw);
	        transform: translateX(-100vw);
}
/* menu toggle */
.cp_offcm01 #cp_toggle01 ~ label {
	display: block;
	padding: 20px;
	cursor: pointer;
	-webkit-transition: 0.5s transform;
	        transition: 0.5s transform;
	-webkit-transition-timing-function: cubic-bezier(.61,-0.38,.37,1.27);
	        transition-timing-function: cubic-bezier(.61,-0.38,.37,1.27);
	text-align: center;
	color: #ffffff;
	background-color:#7bb1ee;
}
.cp_offcm01 #cp_toggle01:checked ~ label {
	-webkit-transform: translateX(-260px);
	        transform: translateX(-260px);
}
.cp_offcm01 #cp_toggle01 ~ label::before {
	font-family: 'FontAwesome';
	content: '\f0c9';
	font-size: 3em;
}
.cp_offcm01 #cp_toggle01:checked ~ label::before {
	content: '\f00d';
}


/* bnr Section */
.bnr {
	background-color: #ffffff;
	margin: 30% auto 0;
	padding: 10px;
	text-align: center;
}

.bnr img{
	width: 100%;
	max-width: 717px;
	height: auto;
}

.light {
	font-weight: bold;
	color: #717070;
}
.tagline {
	text-align: center;
	color: #FFFFFF;
	margin-top: 4px;
	font-weight: lighter;
	text-transform: uppercase;
	letter-spacing: 1px;
}


/* おすすめスポット＆MAP Section */

.spot_navi_map {
	padding: 35px 25px 0 25px;
	display: block;
	background-color: #FFFFFF;
	margin-top: 0px;
}
.spot_navi_map h2{
	width: 60%;
	text-align: center;
	padding: 0.5em 1em;
    margin: 1em auto 2em;
    color: #24140e;
    background: #ffffff;
	border: solid 2px #24140e;
    border-bottom: solid 6px #24140e;
	border-right: solid 6px #24140e;
    border-radius: 30px;
}

.spot_navi {
	width: 100%;
	text-align: center;
	margin: 20px 0 5		0px;
	overflow: hidden;
}
.bnr_spotnavi {
	width: 25%;
	float: left;
	margin: 0;
}

.bnr_spotnavi img {
    width: 100%;
	max-width: 280px;
    height: auto;
}


.bnr_spotnavi a{
	border: 0;
}

.bnr_spotnavi a:hover{
	opacity:0.50;
	filter: alpha(opacity=50);
	-moz-opacity:0.50;
}
.spot_map{
	margin: 40px auto;
	text-align:center;
}

.spot_map img{
	width: 100%;
	height: auto;
	max-width: 900px;
}


/* スポット */
.spots {
	width: 900px;
	padding: 35px 0 0 0;
	display: block;
	background-color: #FFFFFF;
	margin: 0 auto;	
	overflow: hidden;
}

.spots h3{
	text-align: center;
}

.spots h3 img.pc_img{
	width: 100%;
	height: auto;
	max-width: 900px;
}


.spots_column{
	text-align: center;
	width: 50%;
	padding: 30px 0;
    margin: 0 auto;
	float: left;
}
.spots_column h4{
	padding:0;
	margin: 0 auto;
}
.spots_column img{
    width: 100%;
    height: auto;
	max-width: 400px;
	padding:0;
	margin: 0 auto;
}
.spots_column img.cycling{
    width: 100%;
    height: auto;
	max-width: 300px;
	padding:0;
	margin: 30% auto;
}

.spots_column p{
	width: 400px;
	font-size: 100%;
	font-weight: 500;
    color: #555555;
    text-align:left;
    margin: 20px auto;
}
.spots_root{
	background: #DBDADA;
	width: 170px;
	text-align: center;
	padding: 5px;
    margin: 0 5px 0 15px;
    color: #555555;
	font-size: 90%;
	font-weight: 600;
	display: inline-block;
}
.spots_root a{
	border: 0;
	color: #555555;
	text-decoration: none;
}

.spots_root a:hover{
	opacity:0.50;
	filter: alpha(opacity=50);
	-moz-opacity:0.50;
}

.to_top{
	width: 30%;
	text-align: center;
	padding: 0.5em 1em;
    margin: 1em auto 2em;
	font-size: 100%;
    color: #24140e;
	text-decoration: none;
    background: #ffffff;
	border: solid 2px #24140e;
    border-radius: 30px;
	}
.to_top:hover {
	opacity:0.50;
	filter: alpha(opacity=50);
	-moz-opacity:0.50;
	}
a{
	text-decoration: none;
}	

/* ルート Section */

.route {
	padding: 35px 25px 0 25px;
	display: block;
	background-color: #FFFFFF;
	margin-top: 0px;
}
.route h2{
	width: 60%;
	text-align: center;
	padding: 0.5em 1em;
    margin: 2em auto;
    color: #24140e;
    background: #ffffff;
	border: solid 2px #24140e;
    border-bottom: solid 6px #24140e;
	border-right: solid 6px #24140e;
    border-radius: 30px;
}

.route h3{
	padding:0;
	margin: 0 auto;
	text-align:center;
}

.route h3 img{
	width: 100%;
	height: auto;
	max-width: 600px;
}

.map_column{
	width: 90%;
	max-width:640px;
    margin: 20px auto;
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    }

.map_column iframe {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}

.google_map{
	width: 30%;
	text-align: center;
	padding: 0.5em 1em;
    margin: 1em auto 2em;
	font-size: 100%;
    color: #24140e;
	text-decoration: none;
    background: #ffffff;
	border: solid 2px #24140e;
    border-radius: 30px;
	}
.google_map:hover {
	opacity:0.50;
	filter: alpha(opacity=50);
	-moz-opacity:0.50;
	}

.route_column{
	text-align: center;
	width: 100%;
	height:auto;
	padding: 0 15%;
	margin: 0 auto;
	display: inline-block;
	}

.route_column img{
	padding: 0;
	margin: 0 auto;
	width:100%;
	max-width: 250px;
	height: auto;
}

.route_column img.s_wood{
	padding: 0;
	margin: 0 auto;
	width:100%;
	max-width: 130px;
	height: auto;
}

.route_column p{
	width: 400px;
	font-size: 100%;
	font-weight: 500;
    color: #555555;
    text-align:left;
    margin: 20px auto;
}

.route_column_left{
   	width: 40%;
    height: auto;
	padding: 0 ;
    margin: 0 auto;
    float:left;
}

.route_column_right{
    text-align: left;
    vertical-align:middle;
	width: 60%;
    height: auto;
	padding: 0;
    margin: 0;
    float:right;
}

.route_column16_left{
   	width: 40%;
    height: auto;
	padding: 0 ;
    margin: 0 auto;
    float:left;
}

.route_column16_right{
    text-align: left;
    width: 60%;
    height: auto;
	padding: 10% 0 0 0;
    margin: 0;
    float:right;
}

.routepath_column_left{
   	width: 34%;
    height: auto;
	padding: 0;
    margin: 0 auto;
    float:left;
}

.routepath_column_left img{
	padding: 0;
	margin: 0 auto;
	width:100%;
	max-width: 84px;
}

.routepath_column_right{
    text-align: left;
    vertical-align:middle;
	width: 66%;
    height: auto;
	padding: 0;
    margin: 0;
    float:right;
}

.route_column_balloon{
  position: relative;
  display: inline-block;
  margin: 15% 0 1.5em 10px;
  padding: 10px;
  min-width: 100px;
  max-width: 100%;
  color: #24140e;
  font-size: 20px;
  background: #ffffff;
  border: 3px solid #898989;
  box-sizing: border-box;
}

.route_column_balloon:before{
  content: "";
  position: absolute;
  top: 50%;
  left: -28px;
  margin-top: -12px;
  border: 14px solid transparent;
  border-right: 14px solid #ffffff;
  z-index: 2;
}

.route_column_balloon:after{
  content: "";
  position: absolute;
  top: 50%;
  left: -34px;
  margin-top: -14px;
  border: 16px solid transparent;
  border-right: 16px solid #898989;
  z-index: 1;
}

.route_column_balloon p {
  width: 100%;
  margin: 0;
  padding: 0;
}

.route_column_balloon02{
  position: relative;
  display: inline-block;
  margin: 5% 0 1.5em 10px;
  padding: 10px;
  min-width: 100px;
  max-width: 100%;
  color: #24140e;
  font-size: 20px;
  background: #ffffff;
  border: 3px solid #898989;
  box-sizing: border-box;
}

.route_column_balloon02:before{
  content: "";
  position: absolute;
  top: 50%;
  left: -28px;
  margin-top: -12px;
  border: 14px solid transparent;
  border-right: 14px solid #ffffff;
  z-index: 2;
}

.route_column_balloon02:after{
  content: "";
  position: absolute;
  top: 50%;
  left: -34px;
  margin-top: -14px;
  border: 16px solid transparent;
  border-right: 16px solid #898989;
  z-index: 1;
}

.route_column_balloon02 p {
  width: 100%;
  margin: 0;
  padding: 0;
}



/* おすすめスポット一覧 Section */

.spots_list {
	padding: 35px 25px 0 25px;
	display: block;
	background-color: #FFFFFF;
	margin-top: 0px;
}
.spots_list h2{
	width: 60%;
	text-align: center;
	padding: 0.5em 1em;
    margin: 1em auto 2em;
    color: #24140e;
    background: #ffffff;
	border: solid 2px #24140e;
    border-bottom: solid 6px #24140e;
	border-right: solid 6px #24140e;
    border-radius: 30px;
}

.spots_list_column{
	text-align: center;
	width: 90%;
	padding: 20px 0;
    margin: 0 auto;
    }
    
.spots_list_column table{
    table-layout:fixed;
    width: 100%;
    border-collapse: collapse;
    border: solid 2px #24140e;
    }

.spots_list_column table tr:nth-child(2){
  background: #cce5ff;
}

.spots_list_column table tr:nth-child(n+3):nth-child(-n+6){
  background: #ccffcc;
}

.spots_list_column table tr:nth-child(n+7):nth-child(-n+13){
  background: #ffd6ff;
}

.spots_list_column table tr:nth-child(n+14):nth-child(-n+20){
  background: #ffffdb;
}
    
.spots_list_column table th, table td {
  border: dashed 1px #24140e;
  padding: 10px;
  }    
    
.spots_list_column table th{
	text-align:center;
	background: #ffffff;
}    
.spots_list_column table td{
	text-align:left;
} 

.spots_list_column a{
    text-decoration: none;
    font-weight: 600;
    color: #0000ff;
    text-decoration: underline;
    line-height: 2px;
    }


.spots_list_column a:hover{
    color: #7bb1ee
    }


/* footer */

footer {
	width:100%;
	text-align: center;
	padding: 10px 0;
	background-color: #7BB1EE;
	color: #FFFFFF;
	font-weight: bold;
	letter-spacing: 2px;
}

.copyright {
	text-align: center;
	padding-top: 0;
	background-color: #7BB1EE;
	color: #FFFFFF;
	text-transform: uppercase;
	font-weight: lighter;
	font-size: 16px;
	letter-spacing: 2px;
	border-top-width: 2px;	
}

.cpr{
    font-size: 18px;
    padding:0;
    margin:0;
    }

.hidden {
	display: none;
}

/* Mobile */
@media (max-width: 425px) {
.logo {
	width: 60%;
	margin: 1% 0 0 2%;
	padding: 0;
}

.logo img {
    width: 60%;
    height: auto;
}

.container {
    width: 100%;
     background-image: url(../img/top_bg.jpg);
}

header {
	width: 100%;
	height: 170px;
	background: no-repeat url("../img/logo_bg.png");
	background-size:80% auto;
	margin: 0;
}

.cp_offcm01 #cp_toggle01 ~ label {
	padding: 5px;
	}

.cp_offcm01 #cp_toggle01 ~ label::before {
	font-size: 2.0em;
}	

.cp_offcm01 #cp_toggle01 ~ label span{
	font-size: 70%;
}

.bnr {
	margin:25% auto 0;
	text-align: left;
}

.spot_navi_map {
	padding: 0 15px 0 15px;
	}

.spot_navi_map h2{
	width: 100%;
	font-size:98%;
	}

.bnr_spotnavi {
	width: 50%;
	float: left;
	margin: 0;
}

.spots {
	width: 100%;
	padding: 20px 0 0 0;
	}

.spots h3 img.pc_img{
	display:none;
}

.spots h3 img.sp_img{
	width: 100%;
	height:auto;
	max-width:400px;
	}

.spots_column{
	text-align: center;
	width:100%;
	padding: 25px 0;
	}

.spots_column p{
	width: 95%;
	font-size: 95%;
	}

.spots_column img.cycling{
    display:none;
}

.spots_root{
	width: 40%;
	font-size: 80%;
	padding: 15px 5px;
    margin: 0 5px 0 10px;
	}

.spot_map{
	display: block;
	overflow-x: scroll;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
    }		

.route {
	width: 100%;
	padding: 20px 0 0 0;
    }

.route h2{
	width: 90%;
	margin: 0.2em auto 1em;
	}

.google_map{
	width: 90%;
	}

.route_column{
	padding: 0 5%;
	}

.route_column_balloon{
  margin: 15% 0 0.5em 10px;
  }

.route_column_balloon p{
  font-size: 60%;
}

.route_column_balloon02{
  margin: 0 0 0 10px;
}

.route_column_balloon02 p {
  font-size: 60%;
}

.route_column_right img{
	width:70%;
}

.route_column img.s_wood{
	width:100%;
	max-width: 90px;
	height: auto;
}

.routepath_column_left{
	padding: 0 10.5% 0 0;
}

.spots_list {
	padding: 10px 10px 0 10px;
	}

.spots_list h2{
	width: 100%;
	font-size:98%;
	margin: 0.2em auto 1em;
	}

.spots_list_column{
	width: 100%;
	}

.spots_list_column table th{
	padding: 5px 0;
	font-size: 90%;
}    

.spots_list_column table td{
	padding: 5px;
	font-size: 100%;
} 

.footer_column {
	width: 100%;
	margin-top: 0px;
}

.to_top{
	width: 80%;
	}
	
footer {
	font-size:80%;
	}

.copyright {
    font-size:100%;
    margin:0;
    padding:0;    
	}

.cpr{
     font-size:200%;
     vertical-align: middle;
     margin:0;
     padding:0;
    }
    

}

@media (max-width: 320px) {
header {
	height: 150px;
	}

.route_column img.s_wood{
	width:100%;
	max-width: 70px;
	height: auto;
}

}	

/* 
@media (max-width: 520px) {
.logo {
    width: 100%;
    text-align: left !important;
    margin-top: 13px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 20px !important;
}
	
.logo img {
    width: 70%;
    height: auto;
}
	
}
 */

/* Small Tablets */
@media (min-width: 426px)and (max-width: 768px) {
.logo {
	width: 60%;
	margin: 1% 0 0 2%;
	padding: 0;
}

.logo img {
    width: 60%;
    height: auto;
}

.container {
    width: 100%;
    background-image: url(../img/top_bg.jpg);
}

header {
	width: 100%;
	height: 450px;
	background: no-repeat url("../img/logo_bg.png");
	background-size:80% auto;
	margin: 0;
}

.cp_offcm01 #cp_toggle01 ~ label {
	padding: 10px;
	}

.cp_offcm01 #cp_toggle01 ~ label::before {
	font-size: 2.5em;
}	
	
.container header nav {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
	float: none;
	overflow: auto;
	display: inline-block;
	background: #52bad5;
}
header nav ul {
	padding: 0px;
	float: none;
}
nav ul li {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
	text-align: center;
	padding-top: 8px;
	padding-bottom: 8px;
}

.bnr {
	margin: 10% auto 0;
}

.bnr p{
    width: 95%;
	text-align:left;
	margin-left: 3%;
   	}

.spot_navi_map h2{
	width: 80%;
	}

.bnr_spotnavi {
	width: 50%;
	float: left;
	margin: 0;
}

.spots {
	width: 100%;
	padding: 1%;
	}

.spots h3 img.sp_img{
    display:none;
    }

.spots_column{
	width: 50%;
	padding: 30px 5px;
	display: inline-block;
}

.spots_column p{
	width: 98%;
	font-size: 75%;
	height:80px;
	}

.spots_root{
	width: 40%;
	font-size: 90%;
	margin-left:5px;
	}

.footer_column {
	width: 100%;
	margin-top: 0px;
}

.spot_map{
	display: block;
	overflow-x: scroll;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
}
.spot_map img{
	width: 768px;
	height: auto;
	max-width: 900px;
}

.route {
	padding: 20px 25px 0 25px;
}

.route h2{
    margin: 1.5em auto 2em;
    }

.route_column_right img{
    width: 200px;
	height: auto;
	max-width: 250px;

}

.routepath_column_left{
	padding: 0 5% 0 0;
}

.route_column_balloon02{
   margin: 0 0 0 10px;
   }

.cpr{
     font-size:190%;
     vertical-align: middle;
     margin:0;
     padding:0;
    }


}

/* Small Desktops */
@media (min-width: 769px) and (max-width: 1096px) {
header {
	height: 300px;
}

.logo {
	width: 50%;
	margin: 1% 0 0 1%;
	padding: 0;
}

.logo img {
    width: 50%;
    height: auto;
}

.cp_offcm01 #cp_toggle01 ~ label {
	padding: 10px;
	}

.cp_offcm01 #cp_toggle01 ~ label::before {
	font-size: 2.5em;
}	

.spots_column{
	width: 50%;
	padding: 30px 5px;
	display: inline-block;
}

.spots_column p{
	width: 90%;
	font-size: 100%;
	}

.banner {
	margin-top: 0px;
	padding-top: 0px;
}


}



@media (min-width: 426px) {
.spots h3 img.sp_img{
    display:none;
    }

}

@media (min-width: 768px) {
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
color:#000000;
font-weight:normal;
}
}