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

@media only screen and (max-width: 1399px){
/*--------------------menu */
#top-head,
.inner {
width: 100%;
padding: 0;
}
#top-head {
top: 0;
position: fixed;
margin-top: 0;
background: none;
}
/* Fixed reset */
#top-head.fixed {
padding-top: 0;
background: transparent;
}
#mobile-head {
background: #3c4907;
width: 100%;
height: 56px;
z-index: 999;
position: relative;
}
#top-head.fixed .logo,
#top-head .logo {
position: absolute;
left: 13px;
top: 8px;
color: #333;
font-size: 26px;
}
#global-nav {
position: absolute;
/* 開いてないときは画面外に配置 */
top: -500px;
background: #586d17;
width: 100%;
text-align: center;
padding: 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
#global-nav ul {
list-style: none;
position: static;
right: 0;
bottom: 0;
font-size: 14px;
}
#global-nav ul li {
float: none;
position: static;
}
#top-head #global-nav ul li a,
#top-head.fixed #global-nav ul li a {
width: 100%;
display: block;
color: #fff;
padding: 18px 0;
}
#nav-toggle {
display: block;
}
/* #nav-toggle 切り替えアニメーション */
.open #nav-toggle span:nth-child(1) {
top: 11px;
-webkit-transform: rotate(315deg);
-moz-transform: rotate(315deg);
transform: rotate(315deg);
}
.open #nav-toggle span:nth-child(2) {
width: 0;
left: 50%;
}
.open #nav-toggle span:nth-child(3) {
top: 11px;
-webkit-transform: rotate(-315deg);
-moz-transform: rotate(-315deg);
transform: rotate(-315deg);
}
/* #global-nav スライドアニメーション */
.open #global-nav {
/* #global-nav top + #mobile-head height */
-moz-transform: translateY(556px);
-webkit-transform: translateY(556px);
transform: translateY(556px);
}
#global-nav ul li.hptop{
display: block;
}
#global-nav ul li.hptop a{
background: #3c4907;
}
#latin_america h5,
#north_america h5{
padding: 38px 0 0 50px;
}
#latin_america h5 span.kaigyo,
#north_america h5 span.kaigyo{
display: block;
padding-left: 0;
}
}
@media only screen and (max-width: 768px) {
/*--------------------pankuzu */
#breadcrumb{
display: none;
}
.w1000,.w1200{
width: 100%;
margin: 0 auto;
}
h6{
font-size: 120%;
}
h6 span{
font-size: 110%;
}
#heritage{
background-size: 150%;
background-position: bottom left;
}
#round-trip{
background-size: 60%;
}
#rail{
background: none;
background-color: #f5f5f5;
}
#rail .tour,
#greatview .tour{
padding-bottom: 0;
}
#greatview p.sp_page{
width: 95%;
margin: 0 auto;
}
/*--------------------top */
#top{
background-image: url("../img/bg_top_sp.jpg");
width: 100%;
height: 460px;
position: relative;
}
.title{
width: 75%;
margin: 0 auto;
position: absolute;
right: 0;
left: 0;
bottom: 110px
}
.title img{
width: 100%;
padding-top: 0;
}
/*--------------------zoo_tour */
#zoo_tour ul{
width: 95%;
margin: 0 auto;
flex-wrap: wrap;
justify-content: space-between;
}
#zoo_tour ul li{
width: calc(100% / 2 - 1%);
margin: 0;
padding-bottom: 10px;
}
/*--------------------area */
.area ul.areaname{
display: block;
}
.area ul.areaname li.dest{
height: auto;
}
.area ul li.areaimage{
height: 110px;
}
.area ul.areaname li{
width: 100%;
}
.area ul li img{
height: 100%;
margin: 0;
}
li.dest h5{
width: 95%;
margin: 0 auto;
font-size: 320%;
font-weight: 400;
padding: 20px 0 10px 0;
}
#latin_america h5,
#north_america h5{
padding: 20px 0 10px 0;
}
#latin_america h5,
#africa h5{
line-height: 1.2em;
}
#latin_america h5 span{
padding-top: 7px;
}
li.dest p{
width: 95%;
margin: 0 auto;
padding: 0 0 40px;
}
span.kaigyo{
display: block;
}
li.dest h5 span.kaigyo{
padding-left: 0;
}
/*--------------------tour */
.tour{
width: 95%;
margin: 0 auto;
}
.ui-widget.ui-widget-content{
display: block!important;
}
#app, .hasDatepicker{
width: 95%;
margin: 0 auto;
}
.cal_btn_dest{
width: 90%;
}
.searchGadget_select,
.Gadget_wrap .f-search-panel,
.ga-main-mintlmap{
width: 90%;
margin: 0 auto;
}
.Gadget_wrap .f-search-display__title{
color: #fff;
height: 1.8em;
margin: 10px auto 5px;
}
.Gadget_wrap .f-search-keyword .f-search-display__title{
color: #222;
}
#reco_bnr .w1000,
#reco_movie .w1000{
width: 90%;
margin: 0 auto;
}
#nav_tabipad h3{
width: 95%;
margin: 0 auto;
text-align: center;
}
/*--------------------contact */
#contact{
width: 100%;
margin: 0 auto;
padding: 20px 0 50px;
}
.contacts{
width: 98%;
font-size: 1.2em
}
.contact_tyo ul{
display: block;
margin: 0 auto;
}
.contact_tyo ul li{
width: 90%;
}
.contact_tyo ul li.left-sp{
padding-left: 7px;
}
.contact_tyo ul li p{
font-size:2rem;
}
.contact_tyo dl dd.migizoroe{
padding: 0;
}
.contact_tyo dl dd span{
display: block;
padding: 0;
margin-bottom: 10px;
}
}