@charset "UTF-8";
@import "/com_css/articles.css";
/*----------------------------
  メインカラム
----------------------------*/
#header {
    margin-bottom: 12px;
}
#main_column h1 {
	font-weight: bold;
	font-size: 18px;
	overflow: hidden;
	position: relative;
	margin-bottom: 15px;
	color: #000;
}
#main_column .h_line {
	display: inline-block;
	position: relative;
	max-width: 550px;
	line-height: 1.4;
}
#main_column .h_line::before {
	content: "";
	border-top: 3px solid #fef102;
	width: 300%;
	position: absolute;
	top: 50%;
	left: 100%;
	margin: -3px 0 0 15px;
}
#main_column h1::after {
	content: "";
	border-top: 3px solid #ff5f5f;
	width: 80px;
	position: absolute;
	top: 50%;
	right: 0;
	margin: -3px 0 0 15px;
	z-index: 1;
}
/*----------------------------
 メインカラムTOP　2カラム部分
----------------------------*/
.main_top {
	/*overflow: hidden;*/
	
}
.main_top::after {
	content: "";
	clear: both;
	display: block;
}
.main_top .top_left {
	width: 200px;
	float: left;
}
.box_b_dash {
	border: 1px dotted #ccc;
	border-bottom: none;
	position: relative;
}


.box_b_dash a.more_btn_ss{
	top: 8px;
	right: 10px;
}

.main_top .top_left .box_b_dash:last-child {
	border-bottom: 1px dotted #ccc;
}

.icon_h {
	line-height: 1.4;
	font-size: 14px;
	padding: 7px 0 4px;
	margin: 0 10px 10px;
	border-bottom: 1px dotted #ccc;
	color: #000;
}
.box_b_dash .book_h::before {
	content: "";
	width: 17px;
	height: 15px;
	display: inline-block;
	background: url(/com_img/common_icon.png) no-repeat 0 -66px /17px;
	margin-right: 8px;
	margin-top: -3px;
	vertical-align: middle;
}
.box_b_dash .where_h{
	padding: 8px 10px 4px;
	margin: 0;
	border-bottom: none;
}
.box_b_dash .where_h2 {/*ガイドブックトップ用*/
	padding: 10px;
}
.box_b_dash .where_h::before {
	content: "";
	width: 12px;
	height: 16px;
	display: inline-block;
	background: url(/com_img/common_icon.png) no-repeat 0 -60px /12px;
	margin-right: 10px;
	vertical-align: middle;
}
.box_b_dash .weather_h::before {
	content: "";
	width: 25px;
	height: 19px;
	display: inline-block;
	background: url(/com_img/common_icon.png) no-repeat 0 -158px /25px;
	margin-right: 10px;
	margin-top: -3px;
	vertical-align: middle;
}

/*------------ガイドブック------------*/
.book_list_slider .flex-prev, .book_list_slider .flex-next{
    width: 20px;
    height: 20px;
    position: absolute;
    top: 40%;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
	z-index: 10;
}
.book_list_slider .flex-prev{
	background: url(/com_img/prev_arrow.png) no-repeat left center /13px;
	left: 10px;
}
.book_list_slider .flex-next{
	background: url(/com_img/next_arrow.png) no-repeat right center /13px;
	right: 10px;
}
.book_list_slider{
	height: 111px;
	overflow: hidden;
}
.book_list_slider li{
	text-align: center;
	margin-bottom: 10px;
	line-height: 0;
	height: 100px;
	overflow: hidden;
}
.book_list_slider li a{
	display: inline-block;
}
.book_list_slider li a img{
	border: 1px solid #dedede;
	/*width: 63px;*/
	height: 98px;
}
.round_btn_wrap{
	text-align: center;
	padding-bottom: 12px;
}
a.round_btn{
	border-radius: 30px;
	background-color: #fef102;
	-webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);
	box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);
	display: inline-block;
	text-align: center;
	margin: 0 auto 2px;
	transition: all .3s;
	color: #000;
	font-size: 12px;
	line-height: 1.4;
	padding: 7px 15px 5px;
	font-weight: bold;
}
a.round_btn:hover {
	margin: 2px 0 0;
	box-shadow: none;
	text-decoration: none;
	background-color: #fff984;
}


/*------------世界地図------------*/
.main_top .top_left .world_map {
	width: 100%;
	height: 115px;
	background: url(/com_img/world_map.png) no-repeat 3px 0 /193px;
	position: relative;
}
.main_top .top_left .world_map li {
	position: absolute;
}
.main_top .top_left .world_map a {
	border-radius: 20px;
	background-color: #fef102;
	-webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);
	box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);
	font-size: 70%;
	display: block;
	padding: 1px 8px 0;
	color: #000;
	margin: 0 0 2px;
	transition: all .3s;
	line-height: 1.6;
}
.main_top .top_left .world_map a:hover {
	margin: 2px 0 0;
	box-shadow: none;
	text-decoration: none;
	background-color: #fff984;
}
.main_top .top_left .world_map li.europe {
	top: 6px;
	left: 6px;
}
.main_top .top_left .world_map li.asia {
	top: 44px;
	left: 59px;
}
.main_top .top_left .world_map li.namerica {
	top: 8px;
	left: 151px;
}
.main_top .top_left .world_map li.samerica {
	top: 85px;
	left: 147px;
}
.main_top .top_left .world_map li.hawaii {
	top: 32px;
	left: 110px;
}
.main_top .top_left .world_map li.resort {
	top: 60px;
	left: 105px;
}
.main_top .top_left .world_map li.oceania {
	top: 93px;
	left: 68px;
}
.main_top .top_left .world_map li.meast {
	top: 32px;
	left: 20px;
}
.main_top .top_left .world_map li.africa {
	top: 74px;
	left: 6px;
}
.main_top .top_left .world_map li.japan {
	top: 18px;
	left: 75px;
}


/*----------検索窓---------*/
.main_top .top_left .h_search {
	padding: 5px 10px 10px;
}
.main_top .top_left .h_search.book {
	padding: 10px;
}
.main_top .top_left .h_search .s_txt {
	font-size: 12px;
	display: block;
}
.header_top_right .h_search input.b_submit, .main_top .top_left .h_search input.b_submit {
	width: 30px;
	height: 20px;
	background: url(/com_img/search_icon.png) no-repeat center center /16px #fef102;
	vertical-align: bottom;
	display: block;
	float: right;
	border: 1px solid #ccc!important;
	border-left: none;
}
.main_top .top_left .h_search .book_search {
    margin-top: 5px;
}

.main_top .top_left .h_search .google_search .width,
.main_top .top_left .h_search .book_search .width{
	width: 147px;
	height: 20px;
	border: 1px solid #ccc!important;
	border-right: none!important;
	box-sizing: border-box;
}

.main_top .top_left .h_search .google_search .width:placeholder-shown, 
.main_top .top_left .h_search .google_search .width::-webkit-input-placeholder,
.main_top .top_left .h_search .book_search .width:placeholder-shown, 
.main_top .top_left .h_search .book_search .width::-webkit-input-placeholder{
color: #bbb;
}
.main_top .top_left .h_search .google_search .width:focus::-webkit-input-placeholder {
color: #fff !important;
}
.main_top .top_left .h_search .google_search .width:focus {
	background-image: none !important;
}
.main_top .top_left .h_search .book_search .search_radio{
	font-size: 11px;
}

/*----------天気---------*/
.weather_list {
	padding: 0 10px 10px;
	overflow: hidden;
}
.weather_city {
	text-align: center;
	font-weight: normal;
	font-size: 12px;
	padding-bottom: 5px;
}
.weather_icon {
	width: 55%;
	float: left;
	text-align: center;
}
.weather_icon img {
	height: 30px;
	width: auto;
}
.weather_temp {
	width: 45%;
	float: right;
	padding-top: 5px;
	font-weight: bold;
}
.highest_temp {
	color: #ff0000;
}
.lowest_temp {
	color: #00c0e9;
}


/*----------小さいmoreボタン（一覧へのリンク等）---------*/
a.more_btn_ss {
	border-radius: 20px;
	background-color: #fef102;
	border: 1px solid #ccc;
	font-size: 10px;
	display: inline-block;
	padding: 2px 8px 0;
	line-height: 1.2;
	color: #000;
	margin: 0;
	transition: all .3s;
	position: absolute;
	top: 10px;
	right: 0;
}
a.more_btn_ss:hover {
	text-decoration: none;
	background-color: #fffaa0;
}


/*----------メイン記事スライド---------*/
.main_top .top_right {
	width: 530px;
	float: right;
	margin-right: -6px;
}
.main_top .main_article {
	width: 500px;
	height: 317px;
	position: relative;
	/*margin: 0 8px 25px 24px;
	-webkit-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.4);
	-moz-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.4);
	box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.4);
	overflow: hidden;
	*/
}
.main_top .main_article .main_img {
	width: 100%;
	vertical-align: top;
}
.main_top .main_article .recommend {
	position: absolute;
	top: 5px;
	right: 5px;
}
.main_top .main_article a {
	display: block;
	color: #fff;
	width: 100%;
    height: 0;
    padding: 63.4% 0 0;
    position: relative;
    overflow: hidden;
}
.main_top .main_article a .main_img{
	width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.main_top .main_article a .main_img.position_top{
	width: 100%;
    height: auto;
    position: absolute;
    top: 0%;
    left: 50%;
    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
}
.main_top .main_article a .main_img.position_bottom{
	width: 100%;
    height: auto;
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translate(-50%, -100%);
    -ms-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
}

.main_top .main_article .gradient_bg {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 90%;
	padding: 10px;
	box-sizing: border-box;
	background: -webkit-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.6) 100%);
	background: -o-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.6) 100%);
	background: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.6) 100%);
}
.main_top .main_article .title_area {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 10px 15px;
	width: 100%;
	box-sizing: border-box;
}
.main_top .main_article .main_article_title {
	line-height: 1.4;
	font-size: 26px;
	padding-bottom: 5px;
	text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.6);
}

.top_article_slide{
	width: 500px;
	height: 317px;
	margin: 0 8px 25px 24px;
	-webkit-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.4);
	-moz-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.4);
	box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.4);
	overflow: hidden;
	position: relative;
}

.article_slide_navi .flex-prev, .article_slide_navi .flex-next{
    width: 22px;
    height: 22px;
    position: absolute;
    top: 45%;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
	z-index: 10;
	display: none;
}
.article_slide_navi .flex-prev{
	background: url(/com_img/prev_arrow_w.png) no-repeat left center ;
	left: 10px;
}
.article_slide_navi .flex-next{
	background: url(/com_img/next_arrow_w.png) no-repeat right center;
	right: 10px;
}


.main_top .main_article .arrow_w {
	float: right;
}