@charset "utf-8";


/*　基本情報　*/


.outline dl {
      /* width: 80%; */
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
}

.outline dl dt {
    width: 16%;
    margin: 0 2% 20px 0;
    text-align: center;
    background: #2896c7;
    border-radius: 3px;
    color: #FFF;
    font-size: 14px;
    vertical-align: top;
}

.outline dl dd {
    width: 80%;
    margin: 0 0 20px 0;
    border-bottom: 1px dotted #2896c7;
}

.kaigai_htl{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.kaigai_htl-box{
    background: #fff;
    display: block;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
}
.kaigai_htl2col .txtbox{
  padding:16px;
}
.kaigai_htl2col .tit{
    font-size: 20px;
    font-weight: bold;
}
.kaigai_htl2col .name_en{
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
}
.kaigai_htl2osusume{
  padding: 0 16px 16px;
}
.kaigai_htl2more{
  padding:0 16px;
}
.kaigai_htl2osusume .subtit{
  font-weight: bold;
}
.kaigai_htl2osusume .txt{
    font-size: 13px;
    line-height: 1.8;
    background: #f2f5f9;
    padding: 16px;
    border-radius: 4px;
}
.kaigai_htl2osusume .access{
  margin:8px 0;
}
.kaigai_htl2osusume .access dd {
    border: 1px solid #ccc;
    font-size: 13px;
    line-height: 1.8;
    padding: 16px;
    border-radius: 8px;
}
.typeList,
.targetList{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 8px;
    font-size:90%;
}
.typeList span{
  color:#fff;
  background: #656565;
  border-radius: 2px;
  padding:0 4px;
}
.targetList span{
  color:#fff;
  background: #88b5d3;
  border-radius: 2px;
  padding:0 4px;
}
.kaigai_htl2osusume .access dd{
  
}
.kaigai_htl2more a {
    width: 100%;
    display: block;
    border: 2px solid #2896c6;
    color: #2896c6;
    font-weight: bold;
    margin: 0 0 16px;
    border-radius: 8px;
    padding: 12px;
}
.kaigai_htl2more a::before {
    margin-right: 8px;
    content: "\f054";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.5rem;
}
.kaigai_htl2more a[class*=dep_]{
  background: #2896c6;
  color:#fff;
}

/* ----------------------------------
  areaseasonBlk
 ---------------------------------- */
.areaseasonBlk {
  padding: 30px 0;
}
.areaseasonBlk table {
    border-collapse: collapse;
    margin: 20px;
}

.areaseasonBlk .table01 {
    width: 100%;
    margin: 40px auto 50px;
    padding: 0;
    border-collapse: separate;
    border-spacing: 2px;
}

.areaseasonBlk .table01 th.bg_none {
    background: none;
    border: none;
}

.areaseasonBlk .table01 th.bg_red {
    background: #ff0000;
}

.areaseasonBlk .table01 th {
    background: #5d9bcd;
    color: #FFF;
    font-weight: normal;
}

.areaseasonBlk .table01 th, 
.areaseasonBlk .table01 td {
    padding: 8px 4px;
    vertical-align: middle;
    text-align: center;
    border: solid 2px #ddd;
}

.areaseasonBlk .table01 .high_temp {
    color: #ff8602;
}

.areaseasonBlk .table01 .area {
    background: #ff8602;
    color: #FFF;
}

.areaseasonBlk .table01 .area02 {
    background: #5d9bcd;
    color: #fff;
}

.areaseasonBlk .table01 td {
    background: rgba(255, 255, 255, 0.8);
}

.areaseasonBlk .table01 .low_temp {
    color: #5d9bcd;
}

.areaseasonBlk .osusumeWrap:last-of-type {
    border: none;
    margin-top: 28px;
    padding-bottom: 30px;
}

.areaseasonBlk .osusumeWrap .item01 {
    padding: 24px 0;
    position: relative;
}

.areaseasonBlk .osusumeWrap .item01:not(:last-of-type) {
    border-bottom: 1px solid #a0a0a0;
}

.areaseasonBlk .osusumeWrap .__top{
    margin-bottom: 16px;
}

.areaseasonBlk .__top{
    margin: 16px 0;
}

.areaseasonBlk .osusumeWrap .__top img {
  position: absolute;
    margin-left: 300px;
    margin-top: -30px;
    width: 70px;
    height: 70px;
}

.areaseasonBlk .osusumeWrap .titleS,
.areaseasonBlk .titleS{
    font-size: 20px;
    margin-bottom: 0;
    padding: 0;
    font-weight: bold;
}

.areaseasonBlk .osusumeWrap .titleS .cloth img,
.areaseasonBlk .osusumeWrap .titleS .belong img{
  width: 80%;
  margin: 0 10px;
}

.areaseasonBlk .osusumeWrap .osusume {
    font-size: 14px;
    margin: 0 12px;
    padding: 4px 12px;
    background: #e773c2;
    color: #fff;
    border-radius: 10em;
    line-height: 1em;
}

.areaseasonBlk .osusumeWrap .star {
    font-size: 20px;
    padding: 0;
    color: #f39800;
    letter-spacing: 0.2em;
}

.areaseasonBlk .osusumeWrap .p,
.areaseasonBlk .p{
    line-height: 1em;
}

.areaseasonBlk .osusumeWrap .copy {
    text-align: left;
    line-height: 1.6em;
}

.areaseasonBlk{
  padding:32px 0;
}
.areaseasonBlk .text {
  margin-top: 30px;
}
.kaigaiServise{
  padding:80px 0;
}
.kaigaiServiseLink {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 16px 0 32px;
}
.kaigaiServiseLink a,
.kaigaiServiseList li{
    width: 300px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 32px;
}
.kaigaiServiseLink a img ,
.kaigaiServiseList img {
    display: block;
    margin: 0 auto;
    width: auto;
}
.kaigaiServiseLink a .tit,
.kaigaiServiseList .tit{
    display: block;
    font-weight: bold;
    text-align: center;
    margin: 8px 0;
    font-size: 105%;
}
.kaigaiServiseTxtbox {
  color:#fff;
    width: 800px;
    display: flex;
    margin: 56px auto;
    align-items: center;
    gap: 24px;
}
.kaigaiServiseTxtbox .tit{
    font-weight: bold;
    font-size: 20px;
    text-align: left;
}
.kaigaiServiseList ul{
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 16px 0 32px;
}
.kaigaiServiseList li {
    width: 300px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 32px;
}
.supWrap{
  padding:80px 0;
}

/*kaigaiContact*/
.kaigaiContact {
    color: #fff;
    text-align: center;
    background: #2896c7;
    padding: 80px 0;
}

.kaigaiContact .tit {
    font-size: 21px;
    text-align: center;
    margin-bottom: 15px;
}

.kaigaiContact .txt {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
}

.kaigaiContact .link {
    width: 70%;
    margin:  0 auto;
}

.kaigaiContact .link ul li a {
    height: 100%;
    font-weight: bold;
    border: 1px solid #fff;
    background-repeat: no-repeat;
    background-position: left 50px center;
    padding: 10px 0 10px 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.kaigaiContact .link ul li a:hover {
    text-decoration: underline;
}

.kaigaiContact .link ul li.tel a {
    font-size: 27px;
    background-image: url(/import/tenant_1/www.wbf.co.jp/vietnam/special/halongbay-daytrip/images/fig_contact001.webp);
}

.kaigaiContact .link ul li.mail a {
    font-size: 21px;
    background-image: url(/import/tenant_1/www.wbf.co.jp/vietnam/special/halongbay-daytrip/images/fig_contact002.webp);
}

.kaigaiContact .sub {
    font-size: 14px;
}
.kaigaiContact .link ul li.tel a:hover,
.kaigaiContact .link ul li.mail a:hover{
  color:#fff;
}
.supList a{
  min-height:80px;
}
.couponBox_inr dt{
  margin:8px 0;
}
.couponBox_inr dd{
    background: #eee;
    padding: 16px;
    margin: 8px 0;
    border-radius: 4px;
    font-size:90%;
}
.couponBox_inr dd b{
  display: block;
}
.cc_ttl {
    background: #2996c6;
    color:#fff;
}
.cc_ttl::after {
      content: "";
    background: #2996c6;
}

.kaigaiServise .area--ttl2 {
    text-align: center;
    color: #fff;
}
.kaigaiServise .area--ttl2 span {
    color: #fff;
    font-weight: bold;
}
.kbtn{
      background: #2996c6;
    padding: 24px;
    display: block;
    margin: 0 auto;
    width: 400px;
    text-align: center;
    margin-top: 24px;
    border-radius: 8px;
    font-weight: bold;
    color: #fff;
}
.kbtn + .getdpprice.pri{
    text-align: center;
}
.kbtn span{
  display:block;
}

.couponBox .area__sclBox ul {
    padding-bottom: 0;
    margin: 0 auto;
    max-width: var(--pc-width);
    width: 96%;
}
.couponBox .area__sclBox li {
    margin-right: 0;
    min-width: 8rem;
    cursor:pointer;
}


.couponBox .area__sclBox li:nth-of-type(1) span {
    border-radius: 8px 0 0 0;
    border-left: 1px solid #ccc;
}
.couponBox .area__sclBox li:last-of-type span{
  border-radius:0 8px 0 0;  
}
.couponBox .area__sclBox li>span {
    border-radius: 0;
    border-bottom: 0;
    font-size: 18px;
    padding: 10px;
    border-left:none;
}
.couponBox .area__sclBox li.sel>span{
  border: 1px solid #2698c4;
  background: #2698c4;
  color:#fff;
}
.ao__box-List, .abl_tag {
    font-size: 85%;
}
.ao__box-List:not(:has(*)) {
    background: #333;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
    width: auto;
    display: inline-block !important;
}
.kbtn_2col{
    display: flex;
    justify-content: center;
    gap: 16px;
}
.kbtn_2col a{
  width:100%;
}

@media screen and (max-width: 768px) {
    body[class*=area_] .def__dpp .dwWrap__left {
        display: block;
    }
  .kaigai_htl {
      display: flex;
  }
    .kaigai_htl-box {
        background: #fff;
        display: block;
        border: 1px solid #ccc;
        border-radius: 5px;
        overflow: hidden;
        width: 300px;
        flex-shrink: 0;
    } 
    .kaigai_htl2more a{font-size:90%;}
    .areaseasonBlk .table01 {
      width: 200%;
    }
    .areaseasonBlk .tableScroll {
        overflow-x: scroll;
    }
    .areaseasonBlk #whetherWrap .table01 {
        padding-left: 15px;
        padding-right: 15px;
    }
  .kaigaiServise {
      padding: 24px;
  } 
  .kaigaiServiseLink,
  .kaigaiServiseLink a,
  .kaigaiServiseTxtbox{
    display: block;
  }
    .kaigaiServiseLink a {
        width: 100%;
        font-size: 85%;
        padding: 16px;
        margin-bottom: 16px;
    }
    .kaigaiServiseTxtbox{
      width: 100%;
    }
    .kaigaiServiseTxtbox{
        font-size: 90%;
        border-top: 1px solid #aaa;
        padding-top: 32px;
    }
    .kaigaiServiseTxtbox .txt{
      margin-top: 8px;
  }
  .kaigaiServiseList ul{
    display: block;
    width: 100%;
  }
  .kaigaiServiseList li {
      width: 100%;
      font-size: 90%;
      padding: 24px;
  }
  .kaigaiServiseList li:nth-of-type(2){
    margin:8px 0;
  }
.supWrap {
    padding: 32px 16px;
}
.gourmet_tourBox .at___box{
  display: flex;
}
.grmBox{
    background: #fff;
    display: block;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
    width: 300px;
    flex-shrink: 0;
}
.outline dl{
  align-items: flex-start;
}
.outline dl dt{width:25%;}
.outline dl dd{width:70%;}
 .areaseasonBlk {
    padding: 32px 20px;
} 
.kbtn{width:100%;}
.kbtn span{font-size:90%;display:block;}
.couponBox_inr dd{font-size:90%;}
    .text_inner p {
        background: none;
        padding: 16px 0;
    }
    .ao__box--img {
        margin-bottom: 20px;
    }  
    .couponBox .area__sclBox {
        margin: 0 16px;
    }
    .couponBox .area__sclBox ul{
      width: calc(9rem * 4);
    }
    .kbtn_2col{
      flex-wrap:wrap;}
    }
    .couponBox .area__sclBox li>span{font-size:90%;}
}