@charset "utf-8";
/* CSS Document */

header{
	background-color:#26667b;
	height:25px;
	width:100%;
	padding-top:5px;
	position:fixed;
	z-index:9000;
}

footer{
	background-color:#26667b;
	height:25px;
	width:100%;
	padding-top:5px;
	color:#fff;
	text-align:center;
}

h1{
	width:980px;
	margin:0 auto;
	color:#fff;
}

h2{
	font-family:"A-OTF 新ゴ Pro R", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック";
	font-size:30px;
	color:#26667b;
}

h2 a{
	text-decoration:none;
}

h3{
	font-family:"A-OTF 新ゴ Pro R", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック";
	font-size:18px;
}

h4{
	color: #16495a;
	font-size: 16px;
	font-weight: bold;
	padding-bottom: 3px;
	padding-left: 5px;
	border-bottom: solid 1px #333;
	margin-bottom: 20px;
}

p,li{
	font-size:14px;
	line-height:1.8;
}

.wrapper{
	position: relative;
}

.wrapper,.wrapper_flex,#top_img_pc{
	width:980px;
	margin:0 auto;
}

.wrapper_flex{
	display:flex;
}


#nav-drawer{
	display:none;
}

#top_tree{
	background-image:url(../img/top_bg_tree.jpg);
	width:100%;
	height:110px;
	position:fixed;
	top:30px;
	z-index:9000;
}

#top_logo{
	float:left;
	margin-top:15px;
}

#gnav{
	display: flex;
	float:right;
	margin-top:20px;
}

#gnav li a{
	width: 140px;
	height: 70px;
	text-indent: -10000px;
	overflow: hidden;
	display:block;
	background-image:url(../img/top_img_menu.png);
	background-repeat: no-repeat;
	margin:0 auto;
}

#gnav01 a{
	background-position: 0 0;
}
#gnav01 a:hover {
	background-position: 0 -70px;
}
#gnav02 a{
	background-position: -140px 0;
}
#gnav02 a:hover {
	background-position: -140px -70px;
}
#gnav03 a{
	background-position: -280px 0;
}
#gnav03 a:hover {
	background-position: -280px -70px;
}
#gnav04 a{
	background-position: -420px 0;
}
#gnav04 a:hover {
	background-position: -420px -70px;
}
#gnav05 a{
	background-position: -560px 0;
}
#gnav05 a:hover {
	background-position: -560px -70px;
}

#top_slant{
	background-image:url(../img/top_bg_slant.jpg);
	width:100%;
	height:6px;
	margin-bottom:30px;
	position:fixed;
	top:140px;
	z-index:9000;
}

.clearfix:after {
	content: ""; 
	display: block; 
	clear: both;
}

.left_block{
	width:700px;
	margin-right:30px;
	margin-bottom:80px;
}

#bxWrap {
	box-sizing: border-box;
	width: 100%;
	height: 370px;
	overflow: hidden;
	margin-bottom: 40px;
}

.bxArea {
	position: relative;
	left: 50%;
	width: 3000px;
	margin-left: -1500px;
}

.bxslider {
	width: 100%;
	height: 330px;
	position:relative;
	margin: 0 auto;
	z-index: 999;
	overflow: hidden;
}

.bxslider li {
	display: block;
	box-sizing: border-box;
	width: 1000px;
	height: 330px;
	text-align: center;
	position: relative;
}

.top_img_slide1,.top_img_slide2,.top_img_slide3,.top_img_slide4,.top_img_slide5,.top_img_slide6,.top_img_slide7{
	background-size:100%;
	background-repeat:no-repeat;
}

.top_img_slide1{
	background-image:url(../img/top_img_slide2.jpg);
}

.top_img_slide2{
	background-image:url(../img/top_img_slide6.jpg);
}

.top_img_slide3{
	background-image:url(../img/top_img_slide3.jpg);
}

.top_img_slide4{
	background-image:url(../img/top_img_slide7.jpg);
}

.top_img_slide5{
	background-image:url(../img/top_img_slide4.jpg);
}

.top_img_slide6{
	background-image:url(../img/top_img_slide5.jpg);
}

.top_img_slide7{
	background-image:url(../img/top_img_slide1.jpg);
}

#top_mt{
	padding-top:180px;
}

#top_img_sp{
	display:none;
}

#ttl_main_container{
	background-color:#eee;
	height:150px;
	width:100%;
	margin-bottom:50px;
	margin-top:40px;
}

.main_band,.main_band_mini{
	background-repeat:no-repeat;
	height:26px;
	padding-top:12px;
	padding-bottom: 12px;
	padding-left:40px;
	margin-bottom:40px;
	color:#fff;
}

.main_band{
	background-image:url(../img/top_bg_main_band.jpg);
}

.main_band_mini{
	background-image:url(../img/top_bg_main_band_mini.jpg);
}

#top_photo,#top_tshirt,#top_map{
	float:right;
}

#top_photo img,#top_tshirt img,#top_map img{
	width:210px;
}
	
.ttl_sub_container{
	background-color:#eee;
	height:75px;
	padding-top:25px;
	width:100%;
	margin-bottom:50px;
	margin-top:40px;
}

#foot_pagetop{
	float:right;
	background-color:#26667b;
	display:block;
	color:#fff;
	width:120px;
	text-align:center;
	padding:8px;
	text-decoration:none;
	border-top-left-radius: 5px;
 	border-top-right-radius: 5px;
}

#cycle_equip img{
	width:160px;
	margin-right:20px;
}

.equip_adjust{
	height:50px;
}

.adver{
	margin-bottom:80px;
	border:solid 1px #ccc;
	padding:15px;
	text-align:center;
}

.adver img{
	margin-bottom:10px;
}

.topBtn {
	font-size: 10px;
	line-height: 2.0;
	color: #fff;
	text-align: center;
	width: 60px;
	height: 50px;
	padding-top: 4px;
	background-color: #26667b;
	position:fixed;
	left: auto;
	margin: 0 0 0 920px;
	bottom: 10px;
	display:block; 
	z-index: 6000;
	opacity: 0.9;
	border-radius: 10px;
	text-decoration: none;
}

.topBtn:hover {
	opacity:0.5;
}

.purchase_box{
	border:2px solid #ddd;
	padding:20px 40px;
}

.purchase_left{
	float:left;
	margin-right:50px;
	width:100px;
}

.purchase_left img{
	width: 100px !important;
	height: 100px !important;
}

.purchase_right{
	float:left;
}

.purchase_btn{
	display: flex;
	margin-top:20px;
}

.amazon_btn{
	border:2px solid #000;
	height:50px;
	width:210px;
	text-align:center;
	margin-right:20px;
	position:relative;
	z-index:50;
}

.amazon_btn a{
	text-decoration:none;
	display:block;
	height:35px;
	padding-top:15px;
	color:#000;
}

.amazon_btn:hover,.rakuten_btn:hover{
	opacity:0.8;
}

.amazon_btn img,.rakuten_btn img{
	margin-left:30px;
	position:absolute;
	right:10px;
}

.rakuten_btn{
	border:2px solid #d00;
	width:210px;
	color:#d00;
	height:50px;
	text-align:center;
	position:relative;
	z-index:50;
}

.rakuten_btn a{
	text-decoration:none;
	display:block;
	height:35px;
	padding-top:15px;
	color:#d00;
}

#top_formality{
	margin-bottom: 80px;
}


/*■■■■■■■■■■■■■■■■■■■■文字装飾■■■■■■■■■■■■■■■■■■■■■■■*/

.m_deka{
	font-size : 24px;
	font-weight : bold;
	line-height: 1.2em;
}

.m_red18b{
	font-weight: bold;
	font-size : 18px;
	color : #d90000;
	line-height: 1.5em;
}

.m_red24b{
	font-weight: bold;
	font-size : 24px;
	color : #d90000;
	line-height: 1.5em;
}

.m_red36b{
	font-size : 32px;
	font-weight : bold;
	color : #cc0000;
	line-height: 1.2em;
}

.m_pink24b{
	font-size : 21px;
	font-weight : bold;
	color : #ff2492;
	line-height: 1.5em;
}


/*■■■■■■■■■■■■■■■■■■■■ブログ■■■■■■■■■■■■■■■■■■■■■■■*/

#journey_map_wrap{
	width: 600px;
	margin: 0 auto;
	padding: 25px;
}

#journey_list li{
	text-align: left;
	line-height: 2.8em;
	padding-left: 10px;
}

#journey_list li img{
	vertical-align: middle;
	width: 21px;
}

#journey_all_map{
	float: right;
	margin-bottom: 80px;
}

#journey_map{
	margin-bottom: 30px;
	text-align:center;
}

#journey_map img{
	width:600px;
}

#journey_list_sp{
	display:none;
}


/*■■■■■■■■■■■■■■■■■■■■名所・名物■■■■■■■■■■■■■■■■■■■■■■■*/

/*ボックス全体*/
.accbox {
    margin: 2em 0;
    padding: 0;
    max-width: 710px;/*最大幅*/
}

/*ラベル*/
.accbox label {
    display: block;
    margin:5px 0;
    padding : 13px 12px;
    color: #224855;
	font-size: 14px;
    font-weight: bold;
    background: #cfe5ec;
    cursor :pointer;
    transition: all 0.5s;
}

/*アイコンを表示*/
.accbox label:before {
    content: '\f054';
    font-family: 'FontAwesome';
    padding-right: 8px;
}

/*ラベルホバー時*/
.accbox label:hover {
    background :#b2d0db;
}

/*チェックは隠す*/
.accbox input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
	margin-top: 20px;
}

/*クリックで中身表示*/
.cssacc:checked + label + .accshow {
    height: auto;
    padding: 5px;
    background: #fff;
    opacity: 1;
}

.accbox .accshow p {
    margin: 15px 10px}

/*アイコンを入れ替える*/
.cssacc:checked + label:before {
    content: '\f078';
}

.japan_area{
	margin-bottom: 40px;
}

.icn_tourism,.icn_lodging,.icn_meal{
	display:block;
	color:#fff;
	padding-left: 10px;
	padding-right: 10px;
}

.icn_tourism{
	background-color:#390;
}

.icn_lodging{
	background-color:#36C;
}

.icn_meal{
	background-color:#C60;
}

.japan_area table{
	border-collapse: separate;
    border-spacing: 20px 10px;
}

.area_comment{
	margin-bottom: -10px;
}





/*■■■■■■■■■■■■■■■■■■■■日本一周する方法■■■■■■■■■■■■■■■■■■■■■■■*/

#manual_contents{
	border:solid 1px #ccc;
	margin-bottom:80px;
	padding:20px;
}

#manual_contents p{
	font-size:16px;
	color:#114252;
}

#manual_contents li{
	margin-left:20px;
}

.page_block_catch{
	font-size:16px;
	font-weight:bold;
	margin-bottom:20px;
}
	
.qa_container{
	border-collapse: collapse;
	border-spacing: 0;
	margin-bottom: 40px;
	width:100%;
}

.qa_container td{
	padding: 10px;
}

.qa_q_ttl{
	background-color: #eee;
	border: solid 1px #ccc;
	font-size: 14px;
	line-height: 1.8;
}

.qa_a_box{
	font-size: 14px;
	line-height: 1.8;
	margin-top: 10px;
}

.qa_q_icn,.qa_a_icn{
	width: 40px;
	height: 32px;
	padding-top: 8px;
	border-radius:20px;
	display: inline-block;
	color: #FFF;
	font-size: 16px;
	text-align: center;
	font-weight: bold;
}

.qa_q_icn{
	background-color: #ff6868;
}

.qa_a_icn{
	background-color: #4ac1ff;
}

.qa_icon_space{
	padding-left: 15px;
	padding-right: 20px;
	width: 30px;
}



/*■■■■■■■■■■■■■■■■■■■■書庫■■■■■■■■■■■■■■■■■■■■■■■*/

.page_block{
	margin-bottom: 80px;
}

.page_block ul{
	display:flex;
}

.page_block ul li{
	border:solid 1px #ccc;
	display:inline-block;
	margin-right:20px;
}
	
.page_block ul li a{
	display:block;
	padding:10px;
}

.page_block ul li a:hover{
	background-color:#26667b;
	color:#fff;
	}

.page_target{
	padding:10px;
	background-color:#ccc;
}

.other_img_right{
	float:right;
}



/*■■■■■■■■■■■■■■■■■■■■サイドメニュー■■■■■■■■■■■■■■■■■■■■■■■*/


.right_block{
	width:250px;
	margin-bottom:80px;
}

#side_contents{
	margin-bottom:40px;
	margin-left:16px;
}

#side_contents p{
	font-size:16px;
	font-weight:bold;
	color:#114252;
	margin-bottom:10px;
}

#side_contents li{
	font-size:12px;
}

#side_contents a{
	color:#333;
}

.side_ttl{
	background-color: #eee;
	margin-bottom:5px;
	padding: 5px;
	color:#114252;
}

.side_ttl::before{
	content: url(../img/side_icn_antidote.png);
	margin-right:2px;
	position:relative;
	top:4px;
}

.adver_right{
	float:right;
	margin-bottom:20px;
}

.side_arrow{
    position: relative;
    display: inline-block;
    padding: 0 0 0 16px;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
    font-size: 12px;
	margin-left: 10px;
}

.side_arrow::before,
.side_arrow::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}

.side_arrow::before{
    left: 3px;
    width: 4px;
    height: 4px;
    border-top: 2px solid #114252;
    border-right: 2px solid #114252;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.side_arrow:hover{
	text-decoration:underline;
}

.advertising{
	margin-bottom:60px!important;
	margin-top:60px;
}

.advertising_700{
	width:700px!important;
	margin-bottom:60px!important;
	margin-top:60px;
}


/*■■■■■■■■■■■■■■■■■■■■スマホ用■■■■■■■■■■■■■■■■■■■■■■■*/

@media screen and (max-width:600px){

h1{
	width:75%;
	margin-left: 65px;
}
	
h2{
	font-size:21px;
	line-height: 1.3em;
}

h3{
	font-size:16px;
	line-height: 1.3em;
}
	
img{
	width:90%;
	height: 90%;
	margin-left: 5%;
	margin-right: 5%;
	margin-bottom: 5%;
}

h4 img,.finger_box img{
	width:24px;
	vertical-align: middle;
	margin-top: 5px;
	margin-right: 3px;
}

p,#top_formality{
	font-size:14px;
	line-height:1.8;
	padding-left: 3%;
	padding-right: 3%;
	width: 94%;
}

.wrapper,.wrapper2{
	width:100%;
}
	
header,footer,#top_tree,#ttl_main_container,background-image{
	padding-bottom:5px;
	height:auto;
}

header,#top_tree,#top_slant{
	position:static;
}

#top_img_pc,#journey_list{
	display:none;
}

#top_img_sp{
	display:block;
}

#gnav,#side_wrap,.download,.behavior,#kanan_end{
	display:none;
}

#top_logo{
	float:none;
	text-align:center;
	padding-top:10px;
	margin:0px;
}

#top_logo img{
	width:50%;
}

#top_slant{
	margin-bottom:20px;
}

#top_mt{
	padding-top:0px;
}

#update_box{
	width:90%;
	text-align:center;
	margin-right: auto;
	margin-left: auto;
	overflow:scroll;
}

.main_band800,.main_band{
	background-image:none;
	background-color:#26667b;
	width:95%;
	height: 100%;
	padding-left: 5%;
}
	
.purchase_btn img{
	display: none;
	width: 16px;
	height: 16px;
}

.purchase_left,.purchase_right{
	float: none;
}

.ttl_sub_container{
	height:100%;
	padding: 5%;
	width:90%;
	margin-bottom:40px;
	margin-top:20px;
}

.behavior_sp{
	color:#e00;
	display:block;
	margin-bottom:80px;
}

.bxslider,.bxslider li{
	height:110px;
}

#bxWrap{
	height:140px;
}

#top_photo,#top_tshirt,#top_map{
	float:none;
}

#cycle_equip{
	width:100%;
}

#cycle_equip img{
	display: block;
	width:90%;
	height:auto;
	margin-right:5%;
}

.japan_area table{
    border-spacing: 10px 20px;
}

.japan_area table tr td:first-child{
	width:15%;
}

.icn_tourism,.icn_lodging,.icn_meal{
	text-align:center;
	padding-left: 0px;
	padding-right: 0px;
}

#journey_all_map{
	float: none;
	margin-bottom: 40px;
}

#journey_list_sp{
	display:block;
	margin-bottom:60px;
}

#journey_list_sp li{
	margin-left:5%;
	margin-bottom:20px;
}

#journey_map_wrap{
	width: 100%;
	margin: 0px;
	padding: 0px;
}

#journey_map{
	margin:0px;
}

#journey_map img{
	width:100%;
	margin:0px;
}

#page_close{
	display:none;
}

.adver .left,.adver .right{
	float: none;
}

li img{
	width: 24px;
	vertical-align: middle;
	margin-right: 5px;
	margin-bottom: 0px;
}

.topBtn {
	font-size: 10px;
	line-height: 2.0;
	width: 60px;
	height: 50px;
	padding-top: 4px;
	left: auto;
	margin: 0 0 0 80%;
	bottom: 50px;
	border-radius: 10px;
}

.topBtn img{
	width: 18px;
	height: 12px;
}

.topBtn:hover {
	opacity:0.9;
}

.advertising_700{
	width:100%!important;
}



	
	
/*■■■■■■■■■■■■■■■■■■■■ハンバーガーメニュー■■■■■■■■■■■■■■■■■■■■■■■*/

#nav-wrap{
	position:fixed;
	padding:10px;
	top:0px;
	z-index:9500;
	background-color:#26667b;
}

#nav-drawer {
  position: relative;
  display:block;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: #fff;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;/*最前面に*/
  width: 50%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 330px;/*最大幅（調整してください）*/
  height: 100%;
  background: #26667b;/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
  opacity:0.9;
	padding: 5%;
	line-height: 1.5em;
}

#nav-content li{
	margin-bottom:20px;
	color:#fff;
}

#nav-content li a{
	color:#fff;
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

#nav_upper{
	border-top: solid 1px #fff;
	padding-top: 3%;
}

#nav_under{
	border-bottom: solid 1px #fff;
	padding-bottom: 3%;
}

#nav-content img{
	width: 16px;
	vertical-align: middle;
	margin-top: 5px;
	margin-right: 3px;
}
	
#nav-content a{
	text-decoration: none;
}

.bg-slider,.bg-slider2,.bg-slider3 {
    width:100%;
	height: 120px;
    background-position:center center;
	background-repeat:no-repeat;
    background-size:contain;
    display: flex;
    align-items: center;
    justify-content: center;
	margin-bottom:40px;
	margin-top:10px;
}

.left_block{
	width:100%;
	margin-right:0px;
	margin-bottom:0px;
}

.right_block{
	display:none;
}

.wrapper_flex{
	width:100%;
	display:block;
}

}