@charset "utf-8";

/* モバイルレイアウト : 480 px およびそれ以下. */

.todo_main {
	position:relative;
	height:170px;
	background:url(../images/todo/bg_main_todo.jpg) center center no-repeat;
	background-size: cover;
}
#main_img p {
	width:100%;
	height:1em;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	color:#fff;
	font-size:34px;
	text-align:center;
    margin: auto;
}

#spotlist_title {
	color:#fff;
	text-align:center;
	padding:3px 5px;
	background-color:#e58011;
	margin: 2.0rem auto 0 auto;
}

.form_spot_box0,
.form_spot_box1, 
.form_spot_box2,
.form_spot_box3 {
	border:1px solid #ddd;
	border-top:none;
}
.form_spot_box0 h3,
.form_spot_box1 h3, 
.form_spot_box2 h3,
.form_spot_box3 h3 {
	height:30px;
	position:relative;
}
.form_spot_box0 h3 img,
.form_spot_box1 h3 img, 
.form_spot_box2 h3 img,
.form_spot_box3 h3 img {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	text-align:center;
    margin: auto;
}
.form_spot_box_l {background-color:#F9F4F2;}
.form_spot_box_r {padding:15px;}

.form_spot_box0 ul,
.form_spot_box1 ul, 
.form_spot_box2 ul, 
#todo_spotlist_box_wrapper {
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;

	-webkit-flex-flow:row wrap;	
	flex-flow: row wrap;
}
.form_spot_box0 ul,
.form_spot_box1 ul {
	-webkit-justify-content:flex-start;
	justify-content:flex-start;
}
.form_spot_box2 ul, 
#todo_spotlist_box_wrapper {
	-webkit-justify-content:space-between;
	justify-content:space-between;
}
.form_spot_box0 ul,
.form_spot_box1 ul, 
.form_spot_box2 ul {
	list-style:none;
	padding:0;
	font-size:14px;
	padding-bottom:0;
}
.form_spot_box0 ul li,
.form_spot_box1 ul li, 
.form_spot_box2 ul li{margin-bottom:1em;}

.form_spot_box1 ul li{width:25%;}
.form_spot_box0 ul li,
.form_spot_box2 ul li{width:45%;}

.form_spot_box3-l input {
	display:block;
	width:99%;
	border:1px solid #aaa;
	margin:0 auto 15px;
}

.button_submit, 
.button_reset {
	display:block;
	padding:5px 0;
	border:none;
	margin:5px auto;
	border:1px solid #F87C8F;
	}
.button_submit {
	float:left;
	width:100%;
	color:#fff;
	background-color:#F87C8F;
	}
.button_reset {
	/*float:right;*/
	width:;
	color:#F87C8F;
	background-color:#fff;
	}
	
.button_submit:hover, 
.button_reset:hover {opacity:0.7;}

#todo_spot_title_kana {font-size:10px;}
#spot_title_jp {font-size:16px;}

#todo_spot_read_top {
	color:#e58011;
	font-size:12px;
	font-weight:bold;
	padding:3px 5px 14px 8px;	
}
#todo_spot_read_bottom {
	width:100%;
	max-width:800px;
	font-size:14px;
	margin:0 auto 20px;
}
#todo_spot_gallary {
	width:100%;
	max-width:800px;
	margin:0 auto 20px;
}
#youtube_box {
	width:100%;
	max-width:640px;
	margin:0 auto 20px;
}
#map {
	width:100%;
	max-width:950px;
	margin:0 auto 15px;
}
#map_mgb {margin-bottom:30px;}
#map h2, 
#todo_spot_table caption {
	color:#fff;
	font-size:16px;
	padding:0.3em 0.6em;
	background-color:#D6CBBF;
}
#link_trip {
	text-align:right;
	margin-bottom:30px;
}

#todo_spot_table_box {
	width:100%;
	max-width:730px;
	margin:0 auto;
}
#todo_spot_table {
	width:100%;
	border-collapse:collapse;
	margin-bottom:20px;
}
#todo_spot_table th, 
#todo_spot_table td {
	font-size:12px;
	border:1px solid #ccc;
	padding:0.6em 0.3em;
}
#todo_spot_table th {
	width:5em;
	font-weight:normal;
	text-align:center;
	background-color:#E5E1DF;
}

/*------------------------------------------
一覧
------------------------------------------*/
#todo_spotlist_box_wrapper {margin-top: 20px;}
#todo_spotlist_box_wrapper a {
	display: block;
	text-decoration: none;
	color: #333;
	border: 1px solid #ddd;
	}
#todo_spotlist_box_wrapper a:hover {opacity: 0.7;}

.todo_spotlist_box {
	width:49%;
	margin-bottom: 15px;
}
.todo_spotlist_box h3, 
.todo_spotlist_box p {padding:5px 10px;}

.todo_spotlist_box h3 {
 line-height: 16px;
	color: #fff;
	font-size: 14px;
	text-align: center;
	background-color: #e58011;
}
.todo_spotlist_box p {font-size: 12px;}
.destination_link {
  margin: 2.5rem auto 3.0rem auto;
  text-align: center;
}
.destination_link a {
  text-decoration: none!important;
}
.destination_link_btn {
  margin: 1rem auto;
  padding: 0.8rem 2.0rem;
  color: #fff;
  background: #F87C8F;
  border-radius: 6px;
}


/******************** タブレット ********************/
@media only screen and (min-width:560px){
.todo_main {
	position:relative;
	height:270px;
	background:url(../images/todo/bg_main_todo.jpg) center center no-repeat;
	background-size: cover;
}
#spotlist_title {
	color:#fff;
	font-size:22px;
	text-align:center;
	padding:10px;
	background-color:#e58011;
}

.form_spot_box0,
.form_spot_box1, 
.form_spot_box2, 
.form_spot_box3 {
	display: -webkit-flex;
 display: -moz-flex;
 display: -ms-flex;
 display: -o-flex;
 display: flex;
	-webkit-flex-flow:row wrap;	
	flex-flow: row wrap;
}
.form_spot_box_l {
	float:left;
	width:15%;
	position:relative;
}
.form_spot_box_r {
	float:right;
	width:85%;
	padding:0;
}
.form_spot_box0 h3,
.form_spot_box1 h3, 
.form_spot_box2 h3,
.form_spot_box3 h3{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	text-align:center;
 margin: auto;
	font-size: 1.0rem;
}

.form_spot_box_padding {
	padding: 15px 15px 0;
	border-left:1px solid #ddd;
}
.form_spot_box0 .form_spot_box_padding {
	padding: 15px;
	border-left:1px solid #ddd;
}
.form_spot_box0 ul,
.form_spot_box1 ul, 
.form_spot_box2 ul {width:100%;}
.form_spot_box1 ul li{width:15%;}
.form_spot_box2 ul li{width:25%;}


.form_spot_box3-l {
	float:left;
	width:38%;
	padding:20px 10px;
	border-left:1px solid #ddd;
	border-bottom:none;
	margin:0;
}
.form_spot_box3-l input {
	display:block;
	width:99%;
	padding: 4px;
	font-size:16px;
	/*font-size:23px;*/
	margin:0;
}

.form_spot_box3-r {
	float:right;
	width:44%;
	padding:15px;
	border-left:1px solid #ddd;
}
.button_submit, 
.button_reset {
	width:25%;
	margin:0;
	padding:4px 0;
	}

#todo_spot_title_kana {font-size:15px;}
#spot_title_jp {font-size:22px;}

#todo_spot_read_top {
	color:#e58011;
	font-size:21px;
	padding:10px 34px 34px 48px;	
}
#todo_spot_gallary {
	margin:0 auto 50px;
}
#todo_spot_read_bottom {
	font-size:16px;
	line-height:1.6;
}
#youtube_box {
	margin:0 auto 80px;
}

#map h2, 
#todo_spot_table caption {
	font-size:18px;
	font-weight:bold;
	padding:0.6em;
}
#link_trip {
	margin-bottom:40px;
}

#todo_spot_table th, 
#todo_spot_table td {
	font-size:14px;
	padding:0.6em;
	}
#todo_spot_table th { width:8em;}
#todo_spot_read_bottom {
	margin-bottom:50px;
}
/*------------------------------------------
一覧
------------------------------------------*/
#todo_spotlist_box_wrapper {
	margin-top: 40px;

	-webkit-justify-content:flex-start;
	justify-content:flex-start;
}
.todo_spotlist_box {
	width:24%;
	margin-left: 0.5%;
	margin-right: 0.5%;
	}

}

/******************** デスクトップ ********************/
@media only screen and (min-width:960px){
.todo_main {
	position:relative;
	height:370px;
	background:url(../images/todo/bg_main_todo.jpg) center center no-repeat;
	background-size: cover;
}
.form_spot_box3-l {
	width:42%;
	padding:20px;
}

}