@charset "utf-8";

html{-webkit-text-size-adjust: 100%;}
img{-ms-interpolation-mode: bicubic;}

body{
	font-size:12px;
}
.sp{
	display:none !important;
}
.boxsize *{
	box-sizing:border-box;
	line-height:160%;
}
figure{
	margin:0;
	position:relative;
}
figcaption{
	font-size:10px;
	position:absolute;
	bottom:5px;
	right:10px;
	color: #FFF;
    text-shadow: 1px 1px 1px #333, -1px 1px 1px #333, 1px -1px 1px #333, -1px -1px 1px #333;
}
figure img{
	width:100%;
}
.back01{
	background-image: url("../img/title_bg.jpg");
	background-size: contain;
	background-repeat: repeat-y;
}
.back02{
	background-image: url("../img/bg01.png"), url("../img/bg02.png");
	background-position: left top, right top;
	background-repeat: repeat-y;
}


/*-----------------------------
title_wrap
-------------------------------*/
.title_wrap{
	background-image: url("../img/title_bg.png");
	background-position: center top;
	background-repeat: no-repeat;
	margin: 0 auto 30px;
}
.title_wrap h2{
	width: 960px;
	margin: 0 auto 20px;
}
.title_lead{
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	font-size:24px;
	text-align: center;
	text-shadow: 1px 1px #FFF, -1px -1px #FFF;
	width: 960px;
	margin: 0 auto;
}
.title_lead .small01{
	font-size: 14px;
	margin: 10px auto 0;
	display: block;
}



/*---------------------
search_wrap
--------------------------*/
.search_wrap{
	display: flex;
	justify-content: center; 
	align-items: center;
	flex-direction: row-reverse;
	background-color:rgb(173 160 197 / 35%);
	padding: 20px 0;
	margin: 0 0 70px;
}
.search_ttl{
	font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 20px;
	color: #FFF;
    text-align: center;
    background-color: #805098;
    border-radius: 100px;
    padding: 3px;
    margin-bottom: 10px;
}
.rank_nav{
	background-image: url("../img/bg03.png");
	background-position: center center;
	background-repeat: no-repeat;
	padding: 130px 0 0;
	height: 480px;
}
.rank_nav li{
	width: 500px;
	margin: 0 0 20px;
}
.rank_nav li a{
	text-align: center;
	background-color: #FFF;
	border-radius: 10px;
	padding: 15px;
	box-shadow: 0 3px 6px #d6d5d4;
	display: block;
}
.rank_nav li a:hover{
	opacity: 1;
	background-color: #805098;
}
.rank_nav li img{
	width: 100%;
}





/*----------------------
nav
----------------------*/
.byarea_list{
	font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
	display: flex;
	justify-content: center;
	margin: 0 auto 30px;
	width: 960px;
}
.byarea_list li{
	margin: 0 5px 10px;
}
.byarea_list li a{
	font-size: 16px;
	color: #805098;
	background-color: #FFF; 
	border-radius: 1px;
	box-shadow: 0 1px 1px #d6d5d4;
	padding: 3px 10px;
}
.byarea_list li a:hover{
	opacity: 1;
	background-color:#f0e6f5;
}




.onsen_list{
	font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-wrap: wrap;
	margin: 0 auto 30px;
	width: 960px;
}
.onsen_list .dt_box{
	display: flex;
	flex-wrap: wrap;
	margin: 0 5px 10px;
	width: 180px;
}
.onsen_list .dt_box dt{
	font-size: 18px;
	text-shadow: 1px 1px #fff;
	border-bottom: 1px solid;
	margin: 0 0 10px;
	width: 100%;
}
.onsen_list .dt_box dd{
	margin: 0 5px 10px;
}
.onsen_list .dt_box dd a{
	font-size: 14px;
	color: #418e86;
	background-color: #FFF; 
	border-radius: 1px;
	box-shadow: 0 1px 1px #d6d5d4;
	/*padding: 3px 10px;*/  /*ルビ対応前*/
  padding: 8px 10px 5px;
}
.onsen_list .dt_box dd a:hover{
	opacity: 1;
	background-color:#ecf6f5;
}

.city_list{
	font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	margin: 0 auto 30px;
	width: 960px;
}
.city_list .dt_box{
	display: flex;
	flex-wrap: wrap;
	margin: 0 0.5% 10px;
	width:19%;
}
.city_list .dt_box dt{
	font-size: 18px;
	text-shadow: 1px 1px #fff;
	border-bottom: 1px solid;
	margin: 0 0 10px;
	width: 100%;
}
.city_list .dt_box dd{
	margin: 0 5px 10px;
}
.city_list .dt_box dd a{
	font-size: 14px;
	color:#596295;
	background-color: #FFF; 
	border-radius: 1px;
	box-shadow: 0 1px 1px #d6d5d4;
	padding: 3px 10px;
}
.city_list .dt_box dd a:hover{
	opacity: 1;
	background-color:#e9ecfb;
}



/*----------------------
ranking_sec
----------------------*/
.ranking_sec{
	padding: 30px 0 0;
}
.ranking_sec h3{
	text-align: center;
	margin: 0 0 40px;
}


.rank_wrap{
	background-color: #FFF;
	border-radius: 20px;
	padding: 20px 30px 40px;
	margin: 0 auto 60px;
	width: 960px;
	box-sizing: content-box;
}
.category_title{
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	font-size:40px;
	text-align: center;
	margin: 0 auto 20px;
	display: flex;
	align-items: center;
}
.category_title:before, .category_title:after {
	content: "";
	flex-grow: 1;
	height: 5px;
	display: block;
}

#byarea_sec .category_title{
	color: #805098;
}
#byarea_sec .category_title:before {
	margin-right: .4em;
	background-image: linear-gradient(to right, #ffffff 0%, #805098 100%);
}
#byarea_sec .category_title:after {
	margin-left: .4em;
	background-image: linear-gradient(to left, #ffffff 0%, #805098 100%);
}
#onsen_sec .category_title{
	color: #418e86;
}
#onsen_sec .category_title:before {
	margin-right: .4em;
	background-image: linear-gradient(to right, #ffffff 0%, #418e86 100%);
}
#onsen_sec .category_title:after {
	margin-left: .4em;
	background-image: linear-gradient(to left, #ffffff 0%, #418e86 100%);
}
#city_sec .category_title{
	color: #596295;
}
#city_sec .category_title:before {
	margin-right: .4em;
	background-image: linear-gradient(to right, #ffffff 0%, #596295 100%);
}
#city_sec .category_title:after {
	margin-left: .4em;
	background-image: linear-gradient(to left, #ffffff 0%, #596295 100%);
}

.yadorank_list{
	width: 960px;
	margin: 0 auto 30px;
}
.yadorank_list .yado01{
	display: flex;
	margin: 0 0 30px;
}
.yadorank_list .yado01 .left_box{
	width: 470px;
	margin: 0 30px 0 0;
	position: relative;
}
.numic{
	position: absolute;
	left:-25px;
	top:-20px;
	z-index: 10;
  width: 22%;
}
.yadorank_list .yado01 .left_box .yadoimg img{
	width: 470px;
	height: 322px;
	object-fit: cover;
}

.yadorank_list .yado01 .right_box{
	width: 460px;
}
.yadorank_list .yado01 h5{
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	margin: 0 0 15px;
}
.yado_area{
	font-size: 20px;
	display: block;
}
.yado_area .map01{
	font-size: 18px;
	color:#777;
	background-color: #f5f5f5;
	border: solid 1px;
	border-radius: 1px;
	padding: 1px 10px;
	margin: 0 0 0 10px;
}
.yado_area .map01:hover{
	opacity: 1;
	color:#FFF;
	background-color:#f6dd5d;
}
.yado_name{
	font-size: 30px;
	display: block;
}
.yado_lead{
	font-size: 15px;
	margin: 0 0 25px;
}
.yado_lead span {
    font-size: 12px;
}
.plan_link01{
	display: flex;
	justify-content: center;
}
.plan_link01 a{
	width: 200px;
	font-size: 14px;
	color: #FFF;
	text-align: center;
	border-radius: 3px;
	box-shadow: 0 3px 6px #d6d5d4;
	padding: 10px;
	margin: 0 10px;
}

#byarea_sec .plan_link01 a, #byarea_sec .areaplan_link02 a{
	/*background-color:#805098;*/
      background-image: linear-gradient(to bottom, #c5ed5f 0%, #92cc00 50%); 
}
#onsen_sec .plan_link01 a, #onsen_sec .areaplan_link02 a{
	/*background-color:#418e86;*/
      background-image: linear-gradient(to bottom, #c5ed5f 0%, #92cc00 50%); 
}
#city_sec .plan_link01 a, #city_sec .areaplan_link02 a{
	/*background-color:#596295;*/
      background-image: linear-gradient(to bottom, #c5ed5f 0%, #92cc00 50%); 
}

.plan_link01 a:hover, .areaplan_link02 a:hover{
	opacity: 0.7;
	/*background-color:#f6dd5d !important;*/
}

.plan_link01 a.off, .plan_link02 a.off{
	background: #ccc !important;
	pointer-events: none;
}

.areaplan_link02{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.areaplan_link02 a{
	width: 420px;
	font-size: 20px;
	color: #FFF;
	text-align: center;
	border-radius: 3px;
	box-shadow: 0 3px 6px #d6d5d4;
	padding: 15px 0;
	margin: 0 10px 10px;
}


/*------------------------
form
---------------------------*/
.areaplan_link01{
	display: flex;
	justify-content: center;
}
.form_ttl {
	font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
	font-size: 26px;
	color: #805098;
	margin: 0 0 10px;
}
.planBOX01{
	margin: 0 15px 15px;
}
.planBOX01 form{
	display: flex;
	align-items: center;
	justify-content: center;
}
.planBOX01 select {
  width:300px;
  height: 50px;
  border-color: #808080;
	box-shadow: 0 3px 6px #d6d5d4;
  margin: 0 3px 0 0;;
}
.planBOX01 .btn01 {
  width:120px;
  height: 50px;
}
.btn01 {
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  font-size: 14px;
  border-radius: 3px !important;
	box-shadow: 0 3px 6px #d6d5d4;
}
#byarea_sec .btn01{
/*  background-color: #805098;*/
    background-image: linear-gradient(to bottom, #c5ed5f 0%, #92cc00 50%);     
}

.btn01:hover {
	opacity: 0.7;
  /*background-color: #f6dd5d;*/
}


/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}


/*---------------------
#box_search
--------------------------*/
#box_search{
	margin:0 50px 0 0;
	width: 325px;
}
#box_search #search{
	width: 325px;
}
#search .tabs {
    position: relative;
    width: 325px;
    z-index: 10;
	display: flex;
	justify-content: center;
}
#search .tabs li {
    overflow-y: hidden;
    overflow-x: visible;
    position: relative;
    /*width: 105px;
    height: 39px;*/
    padding: 0 6px 1px;
}
#search .tabs .dom,
#search .tabs .int { margin-left: -7px; }
#search .tabs li a {
    display: block;
    /*width: 103px;*/
    padding: 10px 40px;
    border-radius: 5px 5px 0 0;
    text-align: center;
}
#search .tabs .yado a {
    border: 1px solid #d7d7d7;
    border-bottom: none;
    background: #fff;
    color: #332f2a;
}
#search .tabs .dom a {
    border: 1px solid #ff705f;
    border-bottom: none;
    background: #ffefed;
    color: #ff5340;
}
#search .tabs .int a {
    border: 1px solid #006dc5;
    border-bottom: none;
    background: #e8f5ff;
    color: #006dc5;
}

#search .tabs .current:after {
    position: absolute;
    bottom: 0;
    left: 7px;
    width: 142px;
    content: " ";
}
#search .tabs .yado.current:after { border-top: 1px solid #fff; }
#search .tabs .dom.current:after { border-top: 1px solid #ffefed; }
#search .tabs .int.current:after { border-top: 1px solid #e8f5ff; }
#search .tabs .current a {
    box-shadow: 0 3px 6px #d6d5d4;
}

/* 切り替わりコンテンツ */
#box_search .wrap {
    position: relative;
    margin-top: -1px;
    z-index: 1;
}
#box_search .box_tab .tab_contents {
    display: none;
    min-height: 378px;
    padding: 15px 15px 10px;
    border: 1px solid #d7d7d7;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 3px 6px #d6d5d4;
	background-color: #FFF;
}
#box_search #search_dom.tab_contents { border-color: #ff705f; }
#box_search #search_int.tab_contents { border-color: #006dc5; }

.form_search .date.dom input,
.form_search .date.yado input { background: #fff url(../../../shared/images/common/ico_calendar_dom.png) no-repeat right center; }
.form_search .date.int input { background: #fff url(../../../shared/images/common/ico_calendar_int.png) no-repeat right center; }

.form_search .date.yado input { width: 200px; }

#box_search label {
    position: relative;
    display: inline-block;
    margin: 0 15px 10px 0;
    padding-left: 23px;
}
#box_search label.selected { color: #00b2df; }
#box_search label input {
    position: absolute;
    top: 0;
    left: 0;
}
#box_search label:after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 20px;
    height: 20px;
    background: url(../../../shared/images/common/ico_check.png) no-repeat left top;
    content: " ";
}
#box_search label.selected:after {
    background-position: left -30px;
}

#box_search .group { display: inline-block; }
#search .group label { margin-right: 10px; }
#box_search .group:before {
    margin-left: -10px;
    content: "（";
}
#box_search .group:after {
    display: inline;
    margin-left: -10px;
    font-size: 14px;
    content: "）";
    visibility: visible;
}
#search .box_button {
    position: absolute;
    bottom: 16px;
    left: 15px;
    width: 293px;
}


/*-------------------------------
contents おすすめの国内旅行情報
---------------------------------*/
.ef {
	display: -webkit-flex;
	display: flex;
	justify-content: space-between;
}
/*color*/
.red { color: #D32F2F; }
.gray { color: #8c8c8c; }
.contents_wrap {  
	background-color: rgb(255 255 255 / 70%);
  padding: 30px 0;
	width: 900px;
	margin: 0 auto 60px;
}
.column_wrap {
  width: 800px;
  margin: 0 auto 20px;
}
.contents_ttl {
  font-size: 18px;
  font-weight: bold;
  background: #efefef;
  padding: 4px 8px;
}
/*column*/
.column_box {
  color: #332f2a;
  margin-top: 16px;
}
.column_box + .column_box {
  margin-top: 36px;
}
.column_box > figure {
  /*width: 192px;*/
	width: 200px;
}
.column_txt {
  /*width: 512px;*/
	width: 540px;
}
.column_box h3 {
  font-size: 16px;
  font-weight: bold;
}
.column_date {
  font-size: 13px;
}
.column_comment {
  font-size: 14px;
}
/*more-view*/
.list-item {
  opacity: 1;
}
.list-item.is-hidden {
  position: absolute;
  opacity: 0;
  height: 0;
  margin: 0;
}
.list-item.is-hidden a {
  pointer-events: none;
}
/* おすすめの国内旅行情報ここまで */

.bunner-slide_wrap{
	width: 960px;
	margin: 0 auto 100px;
}

/*-------------------------------
faq
---------------------------------*/
#faq {
	background-color: #FFF;
	border: solid 1px #999;
  padding: 25px 30px;
	margin: 50px auto 80px;
	width: 960px
}
.faq_lead {
  font-size: 24px;
	color: #604c3f;
  margin: 0 auto 10px;
}
#faq dl {
	font-size: 14px;
	margin:0;
}
#faq dt {
  font-weight: bold;
	margin: 0 0 8px;
}
#faq dt:not(:first-of-type) {
  border-top: 1px dashed #999;
  padding: 10px 0 0;
  margin: 20px auto 8px;
}
#faq dt:before,
#faq dd:before {
  font-size: 26px;
  font-weight: bold;
  margin-right: 6px;
}
#faq dt:before {
  content: "Q.";
  color: #62b9c3;
}
#faq dd:before {
  content: "A.";
  color: #d3628f;
}
#faq dd{
	margin-left:10px !important;
}

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