@charset "utf-8";

@font-face {
	font-family: 'jtb-onsen';
	src: url("/onsen/_fonts/jtb-onsen.ttf") format("truetype"), url("/onsen/_fonts/jtb-onsen.woff") format("woff"), url("/onsen/_fonts/jtb-onsen.svg#jtb-onsen") format("svg");
	font-weight: normal;
	font-style: normal;
}

/*  メインビジュアル
============================================================================= */
.mv-area { background: url("/kokunai/area/osaka/_images/bg-mv-01.jpg") no-repeat center top; background-size: cover; }
.mv-area.mv-spr { background: url(/kokunai/area/osaka/_images/bg-mv-spr.jpg) no-repeat center top; background-size: cover; } 
.mv-area.mv-sum { background: url(/kokunai/area/osaka/_images/bg-mv-spr.jpg) no-repeat center top; background-size: cover; }
.mv-area.mv-aut { background: url(/kokunai/area/osaka/_images/bg-mv-spr.jpg) no-repeat center top; background-size: cover; }
/* .mv-area.mv-win { background: url() no-repeat center top; background-size: cover; } */

/*  地図
============================================================================= */
.pref-map-subarea{ background-image: url(/kokunai/area/osaka/_images/map.png); }
.pref-map-subarea > li.pref-map-pref{ left: 66.3%; top: 24%; }
#pref-map-01{ left: 40.42%; top: 40.69%; }
#pref-map-02{ left: 34.64%; top: 55.40%; }
#pref-map-03{ left: 38.30%; top: 20.40%; }
#pref-map-04{ left: 57.9%; top: 37.40%; }
#pref-map-05{ left: 54.57%; top: 69.8%; }
#pref-map-06{ left: 40.91%; top: 71.9%; }

/*  ツアーだからこの価格
============================================================================= */
.ttl{
    text-align: center;
    font-size: 2.0rem;
}
.setplan .ttl span{
    position: relative;
    display: inline-block;
    padding: 0 20px;
    font-weight: bold;
}
.setplan .ttl span:before
.setplan .ttl span:after{
    position: absolute;
    top: 0;
    content: "";
    display: inline-block;
    width: 5px;
    height: 130%;
    border-radius: 3px;
    background: #3498DB;
}
.setplan .ttl span:before{
    left: 0;
    transform:rotate(-30deg);
}
.setplan .ttl span:after{
    right: 0;
    transform:rotate(30deg);
}
.setplan-sect{
    margin: 30px;
}
.setplan-sect.-sub{
    margin-top: 20px;
}
.setplan-sect.-sub .ttl-sub{
    position: relative;
    font-size: 1.8rem;
}
.setplan-reference{
    margin-top: 10px;
    padding: 15px 0;
    border: solid 1px #ccc;
    border-radius: 10px;
    background: #fff;
}
.setplan-reference_box{
    padding: 0 10px;
    width: 100%;
}
.setplan-reference_box:not(:first-child){
    margin-top: 15px;
    padding-top: 15px;
    border-top: solid 1px #ccc;
}
.setplan-reference_ttl{
    padding-bottom: 15px;
    text-align: center;
    font-size: 1.8rem;
    font-weight: bold;
    border-bottom: dashed 2px #ccc;
}
.setplan-reference_ttl span{
    display: inline-block;
    padding: 0 10px;
    background: linear-gradient(transparent 60% ,#ff6 60%);
}
.setplan-reference_price{
    margin-top: 15px;
    text-align: center;
    color: #3498DB;
    font-size: 1.8rem;
    font-weight: bold;
}
.setplan-reference_price-num{
    font-size: 3.0rem;
}
.setplan-reference_conditions{
    margin-top: 10px;
    text-align: center;
    font-size: 1.3rem;
}
.setplan-reference_box .fbt{
    margin-top: 20px;
}
.setplan-sect.-sub .ttl-sub span{
    display: inline-block;
    font-size: 1.2rem;
    font-weight: normal;
}
.train-ex{
    width: 100%;
    margin-top: 10px;
    padding-bottom: 10px;
    border: solid 1px #ccc;
    background: #fff;
}
.train-ex_area{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background: #f5f5f5;
}
.train-ex_arealist{
    position: relative;
    display: flex;
    justify-content: center;
}
.train-ex_arealist:before, .train-ex_arealist:after{
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    content: "";
    display: inline-block;
    width: 100%;
}
.train-ex_arealist:before{
    height: 5px;
    background: #777;
}
.train-ex_arealist:after{
    height: 3px;
    background: linear-gradient(to right, #fff, #fff 4px, transparent 4px, transparent 9px);
    background-size:
        9px 3px;
    background-position:
        left top;
    background-repeat:
        repeat-x;
}
.train-ex_arealist_item{
    font-size: 1.8rem;
}
.train-ex_arealist_item:not(:first-child){
    margin-left: 50px;
}
.train-ex_arealist_item span{
    position: relative;
    z-index: 1;
    padding: 0 10px;
    background: #f5f5f5;
}
.train-ex_price{
    margin: 10px 10px 0;
    text-align: center;
}
.train-ex_pricetxt{
    font-size: 2.2rem;
}
.train-ex_pricetxt sub{
    margin-left: 5px;
    font-size: 1.3rem;
    vertical-align: text-bottom;
}
.train-ex_pricecondition{
    font-size: 1.3rem;
}
.train-ex_grade{
    margin: 10px 10px 0;
    text-align: center;
}
.setplan_kome{
    display: flex;
    justify-content: flex-end;
    margin-top: 7px;
    font-size: 1.2rem;
}
.setplan_kome:before{
    content: "\203B";
    margin-right: .2em;
    width: 1em;
}
}
@media screen and (max-width: 374px) {
    .setplan .ttl{
        margin: 0 10px;
    }
}
@media screen and (min-width: 960px) {
    .setplan .ttl span{
        padding: 0 30px;
    }
    .setplan-sect{
        margin-top: 50px;
    }
    .setplan-sect.-sub{
        margin-top: 50px;
    }
    .setplan-reference{
        display: flex;
        margin-top: 20px;
        padding: 20px 0;
        border-radius: 20px;
    }
    .setplan-reference_box{
        padding: 10px 30px;
    }
    .setplan-reference_box:not(:first-child){
        margin: 0;
        padding: 10px 30px;
        border-top: none;
        border-left: solid 1px #ccc;
    }
    .setplan-reference_ttl{
        font-size: 2.0rem;
    }
    .setplan-reference_conditions{
        font-size: 1.4rem;
    }
    .setplan-reference_box .fbt{
        margin-top: 30px;
    }
    .setplan-reference_box .fbt a{
        max-width: 550px;
    }
    
    .setplan-sub{
        display: flex;
        justify-content: space-between;
    }
    .setplan-sub .setplan-sect:first-child{
        width: calc(55% - 20px);
    }
    .setplan-sub .setplan-sect:nth-child(2){
        width: calc(45% - 20px);
    }
    .setplan-sect.-sub .ttl-sub span{
        position: absolute;
        left: 0;
        top: 100%;
        width: 100%;
        text-align: center;
    }
}
/* 各ボタン */
.fbt, .feature-sect__more{
    display: flex;
    justify-content: center;
    margin-top: 30px;
}
.fbt + .fbt{
    margin-top: 10px;
}
.fbt a{
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 500px;
    min-height: 50px;
    padding: 5px 10px;
    color: #3498DB!important;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.3;
    border-radius: 0;
    background: transparent linear-gradient(112deg, #3498db, #52c8ff) 0 0 no-repeat padding-box;
    overflow: hidden;
    transition: border-radius .3s;
}
.fbt a:after{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    z-index: -2;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    margin: 2px;
    border-radius: 0;
    background: #fff;
    transition: border-radius .3s;
}
.fbt-txt p{
    text-align: center;
    margin-left: 20px;
}
.fbt-txt .m-ico + p{
    margin-left: 10px;
}
.fbt-txt p span{
    font-size: 1.2rem;
}
.fbt-txt, .feature-sect__more span{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.fbt .m-ico{
    margin-top: 1px;
    line-height: 1;
}
.m-ico:before {
    position: relative;
    top: 2px;
    font-family: 'Material Icons Round';
    content: attr(data-icon);
    font-size: 100%;
}
.fbt .m-ico.-arrow{
    font-size: 2.0rem;
    line-height: 1;
}
.fbt .m-ico.-icon{
    font-size: 2.0rem;
}
.fbt .m-ico.-icon-plus{
    margin: 0 -2px;
    font-size: 1.5rem;
}


/*クルーズ*/
.ranking__bt a { background:#195178!important;}
.ranking__bt {border-radius:8px!important;}


/* =============================================================================
    万博バナー
============================================================================= */

    .expo2025bnr{
    text-align: center;
    margin:20px 0;
}
.expo2025_h3 {
    text-align: center;
    font-size:23px
}


/*  osusume
============================================================================= */
#hot-spot .area-osusume-place>li {
    width: calc((100% - 70px) / 6);
    margin: 10px 0 0 10px;
    border: solid 1px #ccc;
    background: #fff;
  }
  #hot-spot .area-osusume-place {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    margin-left: -10px;
  }
  .area-osusume-place figure img {
    width: 100%;
    height: 150px;
  }
  @media screen and (min-width:768px){
  .area-osusume-place {
    margin: 0 10px;
    background: #fff;
    display: flex;
    /* width: 100%; */
    display: flex;
    justify-content: center;
    margin: 16px 0;
  }
  }
  #hot-spot .area-spotlist-inner-place-spot dt {
    font-size: 1.6rem;
    font-weight: bold;
    border-bottom: 3px solid #eee;
    margin-bottom: 10px;
  }
  
  
  #hot-spot .area-spotlist-place figure {
    position: relative;
  }
  
  #hot-spot .area-spotlist-place figcaption {
    position: absolute;
    right: 3px;
    left: initial;
    bottom: 7px;
    padding: 1px 5px;
    color: #fff;
    font-size: 1.0rem;
    background: rgba(0, 0, 0, 0.5);
  }
  
  #hot-spot .credit {
    display: flex;
    justify-content: flex-start;
    margin: 15px 21px 0;
    color: #323743;
    font-size: 1.2rem;
  }
  
  #hot-spot .note {
    display: flex;
    justify-content: flex-start;
    margin: 3px 21px 0;
    color: #323743;
    font-size: 1.2rem;
  }
  
  #hot-spot .area-spotlist-inner-place-osusume {
    /*padding: 10px 5px 0;*/
  }
  
  #hot-spot .area-spotlist-inner-place-osusume dl {
    margin: 5px 5px 0;
  }
  
  #hot-spot .area-spotlist-inner-place-osusume dt {
    font-size: 1.6rem;
    font-weight: normal;
    /*border-bottom: 3px solid #eee;*/
    margin-bottom: 5px;
  }
  
  .area-spotlist-inner-place-osusume {
   width: 100%;
  }
  .area-spotlist-inner-place-osusume dt {
    text-align: left;
    margin: 5px;
    height:65px;
  }
  
  .osusume__listitem{
  width: calc((100% - 40px) / 6);
  margin: 10px 0 0 10px;
  border: solid 1px #ccc;
  background: #fff;
  }
  
  .osusume__listitem a {
  font-weight: bold;
  }
  
  @media screen and (max-width:767px){
    .area-osusume-place {
      
      display: inline-block;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
      width: 100%;
  
    }
  #hot-spot .area-osusume-place>li {
      width: calc((100% - 70px) / 2);
      margin: 10px 0 0 10px;
      border: solid 1px #ccc;
      background: #fff;
    }
  .osusume__listitem{
    width: calc((100% - 20px) / 2);
    margin: 10px 0 0 10px;
    border: solid 1px #ccc;
    background: #fff;
    float:left;
    }
  
    .area-osusume-place figure img {
      width: 100%;
      height: auto;
    }
    .osusume__listitem a {
    font-size: 1.1rem;
    }
  
  }
  .yado.area {
      /*margin-bottom: 4px;*/
      font-size: 1.1rem;
      font-weight: initial;
      /*min-height: 24px;
      max-height: 24px;*/
  }
  .yado.area {
      display: block;
      font-size: 1.1rem;
      /*margin-top: 4px;*/
      color: #323743;
      overflow: hidden;
      display: -webkit-box;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      /*min-height: 25px;
      max-height: 25px;*/
  }
  .yado.area:before {
      display: inline-block;
      margin: 0 2px 1.2px -2px;
      vertical-align: middle;
      font-size: 15px;
      padding-left: 2px;
      content: '\E0C8';
      font-family: 'Material Icons Round';
  }
  


  /*  旅すご追加分【2025/06/02】
============================================================================= */
.carousel {
    justify-content: space-evenly;
    overflow-x: hidden !important;
}
p.jtbonlyTtl {
    padding-top: 50px;
}
/* 記事導線
============================================================================= */
#newsweb-sect .inner{width:100%;max-width:1236px;margin:0 auto;align-items:center;}

.news__head{
  margin-top: -20px;
}

@media screen and (min-width:768px){
.news-cassette{
  display: flex;
  width: 85%;
  margin: 0 auto;
  margin-top:40px;
}
}

.newswp{
  margin-top: 8px;
}

@media screen and (min-width:768px){
.newswp{
  margin-left: 24px;
  width: calc(100% / 4 - 24px);
 }
}

.news_item{
  display: flex;
  justify-content: space-between;
  padding: 8px;
  height: 100%;
  border-radius: 8px;
  border: solid 2.8px #873535;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 6px rgb(0 0 0 / 20%);
}

@media screen and (min-width:768px){
.news_item{
  padding: 0%;
  flex-direction: column;
  justify-content: space-evenly;
  transition: all .4s ease;
  border: solid 1px #ccc
 }
}

@media screen and (min-width:768px){
.news_item:hover{
    color:#323743bd ;
 }
}

.news_img{
 width: 45%;
}

@media screen and (min-width:768px){
.news_img{
  width: 100%;
  padding: 4px;
 }
}

.news_img img{
  height: 100%;
}

@media screen and (min-width:768px){
.news_img img{
  width: 100%;
  height: 9em;
  border-radius: 4px;
  object-fit: contain;
  /*object-fit: cover;*/
 }
}

.news_figcaption{
    font-size: 10px;
    text-align: right;
    padding-right: 5px;
    color: #000;
}

.news_text{
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 4px 8px 4px 8px;
}

@media screen and (max-width:767px){
.news_text{
  display: flex;
  width: calc(55% - 8px);
  flex-direction: column;
  text-align: left;
  padding: 0 0 0 4px;
 }
}

.news_text h3{
  line-height: 1.2;
  /*font-weight: 700;*/
  margin-bottom: auto;
}

@media screen and (min-width:768px){
.news_areadate{
  padding-top: 12px;
  text-align: right;
  font-size: 14px;
  color:black;
 }
}

.area::before{
  font-family: 'jtb-dom';
  content: "\e938";
  padding-right: 2px;
  font-size: medium;
}

.newsall_link{
  text-align: right;
  padding: 8px 0px;
}

@media screen and (min-width:768px){
.newsall_link{
  padding: 28px 92.703px 0px 92.703px;
  text-align: center;
 }
}

.newsall_link a{
  color: #323743;
  transition: all .4s ease;
}

.newsall_link a:hover{
  color: #323743bd;
}

.plan_list:before, .plan_list:after{
 width:0%!important;
}
.plan_list{
    justify-content:center!important
}
/*JTBラウンジ追加*/
#jtbonly .jtbonly-txt-otherhotel {
    line-height: 1.6;
    margin-top: 15px;
    font-size: 1.5rem;
}