@charset "utf-8";
/* CSS Document */
.br-pc{display: block;}
.br-sp{display: none;}

.nopc{display: none;}
.nosp{display: block;}

.breadcrumb{
  width:100%!important;
}

img{
  max-width: 100%;
}
p{
  color: #000;
}
a,a:visited,a:active{
  text-decoration: none;
}
thead, tbody,.flightSchedule thead tr {
  background-color: #fff;
}
.goTop__img--sp{
  display:none;
}
/* 下から上へ出現 ------*/
.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
}
/* ------*/
main *{
  box-sizing: border-box
}
#result{
    display: flex;
    flex-wrap: wrap;
}
.main-title{
  width: 100%;
  position: relative;
  text-align: center;
  overflow: hidden;
  margin: auto;
  background-image: url(../images/main_1920_pc.png);
}
.mainvisual {
  background: transparent url(/kyushu/charter/hanoi/images/main_1920_pc.png) top center no-repeat;
}
.mainvisual .img-wrap.pc {
  width:100%;
  display: block;
  position: relative;
  height: 550px;
  margin: 0 auto;
}
.mainvisual .img-wrap img{
  display: block;
  margin: auto;
}
.mainvisual .img-wrap .catch {
  position: absolute;
  top: 245px;
  right: 90px;
}
.mainvisual .img-wrap .text {
  position: absolute;
  bottom: 0;
  right: 20px;
  margin-bottom: 15px;
}
/* ナビ　*/
.area-nav{
  background: #ec0e91;
  border-bottom: 5px solid #bf327f;
  margin-bottom: 4%;
}
.area-list{
  width: 960px;
  margin: auto;
  display: flex;
  justify-content: space-between
}
.area-list li{
  width: calc(100% / 3);
  justify-content: center;
  border-right: 1px solid #FFF;
}
.area-list li:first-child{
  border-left: 1px solid #FFF;
}
.area-list li a{
  display: flex;
  font-size: 1.1rem;
  color: #FFF;
  text-align: center;
  padding: 5%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.area-list li a:hover {
  background: #d83d92;
  color: #fff;
  width: 100%;
}
.area-list li a::after{
  content: "";
  background-size: contain;
  width: 16px;
  height: 11px;
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto
}
section {
  width: 100%;
  color: #555555;
}
.section__container,.section__guide,.section__hotel {
  width: 992px;
  margin: 0 auto;
}
/* スケジュール案内 */
.bkblue{
  background: #f2f9ff;
}
.heading--title {
  font-size: 2rem;
  font-weight: normal;
  text-align: center;
  margin-top: 2rem;
  font-weight: 600;
}
.heading--title img{
  margin: 0.6%;
}
p.heading--md {
  margin: 20px auto 5px;
  font-size: 1rem;
  padding: 0.8%;
  border-top: 1px dotted #03334a;
  border-bottom: 1px dotted #03334a;
  text-align: center;
}
p.heading--koyo {
  margin: 0 auto 1%;
  font-size: 1rem;
  padding: 0.8%;
  border-top: 1px dotted #03334a;
  border-bottom: 1px dotted #03334a;
  text-align: center;
}
.grid-row{
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: flex-start;
margin-bottom: 5%;
}
.grid-col { width: 25%;}
.grid-col2 { width: 50%;}

thead,tbody {
  background-color: #fff;
}
.koyo-area {
  width: 992px;
  margin: 0 auto;
}
.flightSchedule,.koyoSchedule {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
.flightSchedule caption,.koyoSchedule thead {
  background: #000;
  color: #FFF;
  font-size: 1.1rem;
  font-weight: normal;
  margin-bottom: 3px;
  padding: 1%;
}
.flightSchedule tr,.koyoSchedule tr { border: #333 solid 1px;}
.flightSchedule td,.koyoSchedule td { font-weight: 700;}
.flightSchedule td, .flightSchedule th,.koyoSchedule td, .koyoSchedule th {
  text-align: center;
  padding: 0.4rem;
  font-size: 1rem;
  vertical-align: middle;
}
p.s-text {
  font-size: 0.9rem;
  background-color: #fff;
  padding: 2%;
  margin: 0 auto 4%;
}
.heading--subTitle{
  font-size: 1.5em;
}
.hoshi{
  font-size: 1rem;
  vertical-align: middle;
}
.season_ttl{
  font-size: 2rem;
  font-weight: 600;
  color: #001866;
  text-align: center;
}
.map_point,.tourist{
  padding: 3%;
}
/*各タイトル部分*/
.pref_namebox{
  width: 992px;
  margin: 0 auto;
}
h2{
  text-align: center;
  font-size: 2rem;
  background-color: #ec0e91;
  padding: 1.5% 0 1%;
  color: #fff;
  font-weight: 600;
  margin: 0 auto 3%;
}
#hanoi .about p{
  margin: 2% 4%;
  font-size: 1.1rem;
}
#hanoi .intro .mainttl{
  text-align: center;
  font-size: 1.8rem;
  font-weight: 600;
}
#hanoi .intro .about ul{
  display: flex;
  width:100%;
  box-sizing:border-box;
}
#hanoi .intro .about ul li img{
  border-radius: 1.2rem;
}
/*観光スポット情報*/
.tourist ul{
  display: flex;
}
.tourist ul li{
  width: 23%;
  margin: 1%;
  background-color: #ebf5ff;
  padding: 1.2%;
  border-radius: 0.4rem;
}
.tourist ul li .tr_ttl{
  text-align: center;
  font-size: 1.3rem;
  font-weight: 600;
  color: #001866;
  padding: 1.5% 0 0;
}
/*▼▼▼ ツアーここから ▼▼▼*/
.bkfff{
  background-color: #fff;
}
/*ここがポイント*/
.imp_kokopt{
  margin-top: 2%;
  padding: 0 5%;
}
/*ツアー説明箇所*/
.item_box_text{
	margin:0 auto;
  padding: 1% 0;
}
.item_box_text .ttl {
  font-size: 1.9rem;
  font-weight: bold;
  text-align: center;
  color: #001866;
  border-bottom: dotted 2px #001866;
  margin-top: 1.5%;
}
.privelege .point {
  text-align: center;
  font-size: 1.5rem;
  padding: 2%;
}
.hotel_class {
margin:5px 0;
font-weight:bold;
color:#fff;
font-size:12px;
}
.privelege .small_txt{
  font-size: 1rem;
  vertical-align: top;
}
.tour_season_ttl{
  text-align: center;
  font-size: 2.5rem;
  color: #ec0e91;
  font-weight: 600;
}
/*imp内容説明／画像部分*/
#tour .imp_naiyo{
  margin: 4% auto;
}
#tour .tour_info,#tour .hotel_info,
#tour .gourmet_info{
  padding: 2%;
  width: 100%;
  margin: auto;
}
#tour .tour_info .width,#tour .hotel_info .width,
#tour .gourmet_info .width{
  padding: 0 5%;
}
.imp_tour{
  margin: 2% 0;
  padding: 5% 0;
}
.free_tour_product {
  margin-bottom: 3%;
}
.hotel_choice{
  margin: 5% auto;
}
/*4並び*/
.tourbox04,.tourbox03{
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  justify-content: center;
}
.tourbox04 .tour_block{
  width: calc(100% / 4);
  padding: 0.7%;
}
.tourbox04 .tour_block:empty{
  display: none;
}
/*2並び*/
.tourbox03 .tour_block{
  width: 28%;
  padding: 0.7%;
}
.tourbox03 .tour_block:empty{
  display: none;
}
.imp_tour{
  padding: 1% 0;
}
.free_tour_product.newyear,
.imp_tour.newyear{
  background: #f5f3f1;
  border: 1px solid #e6ded6;
  padding: 2% 0 1%;
}
.newyear_tit {
  text-align: center;
  font-size: 2.5em;
  font-weight: bold;
}
.headfoot-is-sp .tour_season_ttl,
.headfoot-is-sp .newyear_tit {
  font-size: 1.5em;
}
.pref_namebox .tour_block a{
  display: flex;
  background-color: #fff;
  padding: 3%;
  border: 0.5px #6274b1 solid;
  flex-direction: column;
  background: #f9faff;
  height: 100%;
}
.pref_namebox .tour_block a:hover{
  opacity: 0.7;
}
.pref_namebox .tour_block a dl{
  display: flex;
  flex-direction: column;
}
.pref_namebox .tour_block a img{
  width: 100%;
  height: 155px;
  object-fit: cover;
}
.pref_namebox .tour_block a .tour_ttl{
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 2%;
}
.pref_namebox .tour_block a .tour_point{
  font-size: 1rem;
  padding:1%;
  text-align: center;
  background: #e0e7fb;
}
.pref_namebox .tour_block a .tour_point:empty,
.pref_namebox .tour_block a .tour_label:empty{
  display: none;
}
.pref_namebox .tour_block a .block_bottom{
  margin-top: auto !important;
  text-align: center;
}
.pref_namebox .tour_block a .tour_label{
  background-color: #001866;
  color: #fff;
  font-size: 0.9rem;
  text-align: center;
  padding: 2% 0 1%;
}
.pref_namebox .tour_block .price_bottom{
  margin-top: auto;
}
.pref_namebox .tour_block a .tour_price{
  font-size: 1.2rem;
  font-weight: 600;
  color: #db0e0e;
  margin-top: auto;
}
.pref_namebox .tour_block a .tour_fuel{
  font-size: 0.9rem;
}
.sp_tourbox{
  display: flex;
    flex-direction: column;
    height: 100%;
}
.sp_tour_right{
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
  flex: 1 1 auto;
}
.more {
  margin-bottom: 3em;
}
.more a{
  text-align: center;
  display: block;
  margin: 4%;
  background: #ec0e91;
  color: #fff;
  padding: 1%;
  font-size: 1.4rem;
  border-radius: 25px;
}
.pamphlet a{
  text-align: center;
  display: block;
  margin: 4%;
  background: #001866;
  color: #fff;
  padding: 1%;
  font-size: 1.4rem;
  border-radius: 25px;
}
.more a:hover,.pamphlet a:hover{
  opacity: 0.7;
}
/*ここがポイント*/
.here_point{
  margin: 5% auto;
  width: 96%;
  background-color: #ffeff8;
  padding: 2%;
  border: 1px solid #ec0e91;
}
.here_point P{
  font-size: 1.6rem;
  color: #ec0e91;
  text-align: center;
  font-weight: 600;
}
.here_point ul{
  font-size: 1.4rem;
  color: #000;
  font-weight: 600;
}
.here_point ul li{
  padding:0.5%;
}
.here_point ul li .txt_small{
  font-size:1rem;
  font-weight: 0;
}
/*ベトナム基本情報*/
#info .inform .info_bnr{
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
  padding: 1%;
}
.info_txt {
  margin: 0 auto 3%;
  padding-bottom: 3%;
  width: 992px;
}
.info_txt ul {
  list-style-type: square;
  line-height: 2;
  margin: auto;
  width: 80%;
}
/*おすすめ特集*/
#feature,.eigyo_store{
  width: 960px;
  margin: 3% auto;
}
#feature .recommend{
  text-align: center;
  font-size: 2rem;
  background: #ec0e91;
  color: #fff;
  margin: 2% 0;
}
#feature ul{
  display: flex;
}
#feature ul li{
  margin: 0 1%;
}
#feature .sonohoka{
  display: block;
  text-align: center;
  margin: 2% auto;
  background: #ec0e91;
  width: 50%;
  padding: 1%;
  color: #fff;
  font-size: 1.3rem;
  border-radius: 0.5rem;
  position: relative;
}
#feature .sonohoka:before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 15px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 0;
  right: 15px;
  bottom: 0;
  margin: auto;
}
/*営業所案内ここから*/
#inqbox{
  width:100%;
  margin:40px auto 20px;
  background: #FFF;
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid
}
.inq-title{
  font-size:18px;
  font-weight:bold;
  color:#0057B8;
  padding-left:30px;
  margin-bottom: 5px;
  position: relative
}
.inq-title.inq-title__tel{
  border-bottom: 1px solid #333;
}
.inq-title.inq-title__tel:before{
  content:"";
  background: url("/kokunai/kanto/image/icon_tel.png") no-repeat;
  background-size: contain;
  width:22px;
  height:22px;
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  margin: auto;
}
.inq-title.inq-title__shop{
  margin-top: 20px;
}
.inq-title.inq-title__shop a{
  color:#0057B8!important;
  text-decoration: underline
}
.inq-title.inq-title__shop a:hover{
  opacity: 0.8
}
.inq-title.inq-title__shop:before{
  content:"";
  background: url("/kokunai/kanto/image/icon_shop.png") no-repeat;
  background-size: contain;
  width:22px;
  height:22px;
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  margin: auto;
}
.tel-list>li{
  padding: 5px;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  display: none;
}
.tel-list>li:before{
  content:"";
  margin-right: 5px;
  margin-left: 5px;
  border-top:1px dotted;
  flex-grow: 1;
  order:2
}
.tel-list>li .area{
  font-size:18px;
  font-weight:bold;
  order:1
}
.tel-list>li .phone_num{
  font-size:20px;
  font-weight:bold;
  order:3
}
.tel-list>li .phone_num span{
  color:#BF1010;
}
#inqbox.all .tel-list>li:not(.honshu):not(.cc){
  display: flex
}
#inqbox.kyu .tel-list>li.kyushu{
  display: flex
}
#inqbox.hon .tel-list>li.honshu{
  display: flex
}
.data-txt{
  font-size:12px;
  padding-left: 1.0em;
  position: relative
}
.data-txt.data-txt__red{
  font-weight: bold;
  color: #BF1010;
}
.data-txt:before{
  content:"※";
  position: absolute;
  top:0;
  left:0
}
.data-txt>.data-link{
  display: inline-block;
  margin-left: 0.5em;
  color: #333;
}
.data-txt>.data-link a{
  text-decoration: underline
}
.usj-stay{
  display: none
}
#inqbox.stay .usj-stay{
  display: block;
  margin-top: 20px;
}
#inqbox.stay .tel-list>li.kansai{
  display: flex
}
.mongon{
  text-align: center;
  font-size:0.9rem;
  padding: 1.5%;
}
/*▼▼完売▼▼*/
.soldout {position: relative;}
.soldout a{ pointer-events: none !important }
.soldout .half{
  background: rgba(0,0,0,0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  height:100%;
  }
.soldout .half::after{
  position: absolute;
  content: 'SOLD OUT';
  font-size: 3.5rem;
  color: #fff;
  font-weight: bold;
}
.soldout .half .tour_price { color: #4c4c4c !important;}

/*------------------------------------------------*/
/*▼▼スマホここから▼▼▼*/
.headfoot-is-sp .br-sp,.headfoot-is-sp .nopc{ display: block;}
.headfoot-is-sp .br-pc,.headfoot-is-sp .nosp{ display: none;}
.headfoot-is-sp #searchArea{
  margin: auto;
  width: 96%;
}
.headfoot-is-sp .section__container,.headfoot-is-sp .section__guide, .headfoot-is-sp.section__hotel {
  width: 100%;
  margin: 0 auto;
}
.headfoot-is-sp .heading--subTitle {
  font-size: 1.3em;
}
.headfoot-is-sp .main,
.headfoot-is-sp .breadcrumb ul.breadlist,
.headfoot-is-sp .info_txt{
  width: 100%;
}
.headfoot-is-sp .breadcrumb ul.breadlist{
  white-space: nowrap;
  overflow-x: scroll;
}
.headfoot-is-sp .mainvisual .img-wrap img{
  width: 92%;
  margin: auto;
  display: block;
  padding: 2%;
}
.headfoot-is-sp .grid-row{
  margin: 1% 0;
}.headfoot-is-sp .grid-row .grid-col2{
  padding: 1%;
}
.headfoot-is-sp .tourbox01 .half {
  display: flex;
  align-items: flex-start;
}
.headfoot-is-sp .tourbox01 .half img{
  width: 40%;
}
.headfoot-is-sp .tourbox01 .half .one_tour{
  width:100%;
  padding:2%;
}
.headfoot-is-sp .tourbox01 .half .one_tour .tour_point,
.headfoot-is-sp .tourbox01 .half .one_tour .fuel{
  font-size: 0.8rem;
}
.headfoot-is-sp .tourbox01 .half .one_tour .tour_ttl{
  font-size: 1.1rem;
}
.headfoot-is-sp .readcopy{
  width: 95%;
  font-size: 0.9em;
  padding: 3% 1%;
}
.headfoot-is-sp #hanoi,.headfoot-is-sp #tour,.headfoot-is-sp #hotel{
  padding:5% 0;
}
.headfoot-is-sp main,
.headfoot-is-sp .prefwrap div,
.headfoot-is-sp .area-list{
  width:100%;
  box-sizing:border-box;
}
.headfoot-is-sp .mainvisual .img-wrap.pc{
  width: 100%;
  height: auto;
}
.headfoot-is-sp .mainvisual{
  background-image: url(../images/main_750_sp.png);
}
.headfoot-is-sp .main-title img{
  height: 60%;
}
.headfoot-is-sp .heading--title{
  font-size: 1.2rem;
  padding: 1rem;
}
.headfoot-is-sp.heading--subTitle {
  font-size: 1.75em;
}
.headfoot-is-sp #hanoi .intro .about ul{
  display: flex;
  flex-wrap: wrap;
}
.headfoot-is-sp #hanoi .intro .about ul li{
  width: 46%;
}
.headfoot-is-sp #tour .imgttl_imp{
  width: 94%;
  margin: 4% auto;
}
.headfoot-is-sp .tourist ul{
  display: block;
}
.headfoot-is-sp .tourist li{
  width: 98%;
  margin: 5% auto;
  padding: 4%;
}
.headfoot-is-sp .tour_block .sp_tourbox{
  display: flex;
  flex-direction: row;
}
.headfoot-is-sp .pref_namebox .tour_block a,.headfoot-is-sp .pref_namebox .tour_block .sp_tour_right,
.headfoot-is-sp .pref_namebox .tour_block .sp_tour_left{
  padding: 1%;
}
.headfoot-is-sp .pref_namebox .tour_block a .tour_ttl{
  margin-top: 0;
}
.headfoot-is-sp .pref_namebox .tour_block a .tour_point{
  font-size: 0.9rem;
}
.headfoot-is-sp .block_bottom .fuel{
  font-size: 0.8rem;
}
.headfoot-is-sp .area-list li:first-child{
  border-left:none;
}
.headfoot-is-sp div.tourbox01 {
  padding: 0 4%;
}
.headfoot-is-sp .tourbox01 a{
  width:100%;
}
.headfoot-is-sp .tourbox01 .half .one_tour .tour_price{
  font-size: 1.2rem;
}
.headfoot-is-sp .pref_namebox .tour_block a .block_bottom{
  text-align: center;
}
.headfoot-is-sp .pref_namebox .tour_block a{
  height: auto;
}
.headfoot-is-sp .imp_souki {
  padding: 1%;
}
.headfoot-is-sp #tour .item p,
.headfoot-is-sp #tour .product_tour01 .item dl{
  width: 98%;
  margin: auto;
}
.headfoot-is-sp #tour .product_tour01 .item dl dt{
  margin: 2%;
}
.headfoot-is-sp .section__guide,
.headfoot-is-sp .section__hotel{
  width: 100%;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}
.headfoot-is-sp .privelege .point{
  font-size: 1.3rem;
}
.headfoot-is-sp #feature,.headfoot-is-sp .eigyo_store{
  width:100%;
}
.headfoot-is-sp #feature ul{
  flex-wrap: wrap;
}
.headfoot-is-sp #feature ul li{
  width: 48%;
  margin: 1%;
}
.headfoot-is-sp #feature .sonohoka{
  width: 96%;
  margin: 2%;
  padding: 2%;
}
.headfoot-is-sp #inqbox{
  width:94vw;
  margin:30px auto 10px;
  background: #FFF;
  padding: 1.0em;
  box-sizing: border-box;
  border: 1px solid
}
.headfoot-is-sp .inq-title{
  font-size: calc(26vw / 750*100);
  font-weight:bold;
  color:#0057B8;
  padding-left:20px;
  padding-bottom: calc(5vw / 750*100);
  margin-bottom: calc(5vw / 750*100);
  position: relative;
}
.headfoot-is-sp .inq-title.inq-title__tel:before{
  content:"";
  background: url("/kokunai/kanto/image/icon_tel.png") no-repeat;
  background-size: contain;
  width:18px;
  height:18px;
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  margin: auto;
}
.headfoot-is-sp .inq-title.inq-title__shop{
  margin-top: calc(20vw / 750*100);
}
.headfoot-is-sp .inq-title.inq-title__shop a{
  color:#0057B8!important;
  text-decoration: underline
}
.headfoot-is-sp .inq-title.inq-title__shop a:hover{
  opacity: 0.8
}
.headfoot-is-sp .inq-title.inq-title__shop:before{
  content:"";
  background: url("/kokunai/kanto/image/icon_shop.png") no-repeat;
  background-size: contain;
  width:18px;
  height:18px;
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  margin: auto;
}
.headfoot-is-sp .tel-list>li{
  padding: 5px;
  box-sizing: border-box;
  flex-wrap: wrap;
  display: none;
}
.headfoot-is-sp .tel-list>li .area{
  width: 100%;
  font-size:calc(30vw / 750*100);
  font-weight:bold;
  order:1;
  line-height: 1.4;
  text-align: center;
  background-color: #ebebeb;
  padding:1%;
}
.headfoot-is-sp .tel-list>li:before{
content:none;
}
.headfoot-is-sp .tel-list>li .phone_num{
  width: 100%;
  font-size:calc(36vw / 750*100);
  font-weight:bold;
  order:3
}
.headfoot-is-sp .data-txt{
  font-size:calc(22vw / 750*100);
  padding-left: 1.0em;
  position: relative
}
.headfoot-is-sp #inqbox.stay .usj-stay{
  display: block;
  margin-top: calc(20vw / 750*100);
}
.headfoot-is-sp .pref_namebox .tour_block a img{
  height: auto;
}
.headfoot-is-sp .here_point{
  width: 95% !important;
}
.headfoot-is-sp .here_point ul{
  font-weight: 0;
  font-size: 1.2rem;
}
/*------------------------------------------------*/
/*▼▼タブレットここから▼▼▼*/
.is-ipad .breadcrumb ul.breadlist,
.is-ipad .section__container,
.is-ipad .section__guide,
.is-ipad .section__hotel,
.is-ipad .pref_namebox,
.is-ipad .area-list,
.is-ipad #feature,
.is-ipad .info_txt,
.is-ipad #inqbox,
.is-ipad .koyo-area{
  width: 100%;
  overflow: hidden;
}