@charset "utf-8";

/* ---------------------------------------------------------

	01. お客様サポート

--------------------------------------------------------- */
/*
.bg_area{width:100%;overflow: hidden}
.support_area{background: #D7F1F2;margin: 0 -200%;padding: 0 200%;}
.support{width:1023px;padding:20px 0 0;margin:0 auto 50px;text-align: center;}
.support > img{width:220px; margin:0 auto;}
.support > img + p{margin:0 auto 20px; }
.support > ul li{display: inline-flex}
.support > ul li a > p{margin:0 auto 20px; }
*/

/*ーーーーーーーーーーーーーーーーーーーーー
	お客様サポート - for SP
ーーーーーーーーーーーーーーーーーーーーーー*/
/*
@media screen and (max-width: 568px) {
.support{width:98%;padding:20px 1% 1%}
.support > img{width:auto}
.support > img + p{margin:10px auto 20px; }
.support > ul li{display: block}
.support > ul li a > p{margin:0 auto 20px; }

}
*/

/*new ver.OKなら↑を消す　200909*/
.spt_area {
  background: #D7F1F2;
}

.spt_box ul {
  display: flex;
  margin: 2% 0
}

.spt_box ul li {
  border: 3px solid #13b5b1;
  border-radius: 5px;
  margin-right: 5px;
  padding: 8px;
  background: #fff;
  width: calc(100%/6);
  text-align: center;
}

.spt_box ul li a {
  display: block;
  width: 100%;
}

.spt_box img {
  height: 25px;
  margin: 0 0 10px 0;
  display: inline-block;
}

.spt_box ul li p {
  line-height: 1.4;
  text-align: left;
}

.spt_contents.cncrg_box {
  width: 80%;
  margin: 2% auto 1%
}

.spt_contents.cncrg_box li {
  width: 100%;
  padding: 2%;
}

.spt_contents.cncrg_box li a {
  display: inline-flex;
  align-items: center;
}

.spt_contents.cncrg_box li a img {
  display: inline-flex;
  height: 60px;
  margin: 0;
}

.spt_contents.cncrg_box li a p {
  margin: 1% 0 1% 3%;
  width: 100%;
}

.spt_contents.cncrg_box li a p span {
  font-weight: bold;
}


@media all and (max-width: 568px) {
  .spt_box ul {
    width: 94%;
    margin: 4% 2% 0;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .spt_box ul li {
    width: calc(100%/3.1);
    margin: 0 0 5px;
  }

  .spt_contents.cncrg_box {
    width: 94%;
    margin: 2% 2% 4%
  }
}

/* ---------------------------------------------------------

	02. びゅうたび記事紹介ボックス

--------------------------------------------------------- */
.clm_viewtabi_intro {
  background: #fff;
  border: 1px solid #11b6b2;
  padding: 0 1.5% .5%;
}

.viewtabi_intro_ttl {
  display: flex;
  align-items: center;
  border-bottom: 3px solid #e8f4f4;
  padding-left: 2%;
}

.viewtabi_intro_ttl dd {
  color: #029e9a;
  font-weight: bold;
  font-size: 16px;
  margin-left: 4%;
  line-height: 1.8;
}

.viewtabi_intro_ul {
  margin: 2.5% 0.5% 0 1%;
  display: flex;
  flex-wrap: wrap;
}

.viewtabi_intro_ul li {
  margin: 0 0 1.5% 1.5%;
  width: 48%;
  padding: 0.5% 0;
}

.viewtabi_intro_ul li a {
  display: flex;
  text-decoration: none;
  color: #222;
}

.viewtabi_intro_ul li a:hover {
  opacity: 0.8;
}

.viewtabi_intro_ul li:nth-child(odd) {
  border-right: 1px dashed #029e9a;
  padding-right: 2%;
}

.viewtabi_intro_ul li .viewtabi_intro_img {
  width: 50%;
}

.viewtabi_intro_inner {
  width: 42%;
  margin: -0.8% 0 0 3%;
  line-height: 1.5;
}

.viewtabi_intro_inner>p:nth-child(1) {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 5px
}

.viewtabi_intro_txt {
  font-size: 1.2rem;
  text-align: justify;
  text-justify: inter-ideograph;
  margin-bottom: 3%;
}

.viewtabi_intro_area,
.viewtabi_intro_author {
  display: inline-block;
  color: #999;
  font-size: 0.95em;
}

.viewtabi_intro_area {
  width: 35%;
}

.viewtabi_intro_author {
  width: 63%;
  text-align: right;
}

/*ーーーーーーーーーーーーーーーーーーーーー
	びゅうたび記事紹介ボックス （メイン） - for SP
ーーーーーーーーーーーーーーーーーーーーーー*/
@media screen and (max-width: 568px) {
  .clm_viewtabi_intro {
    padding: 0;
    border-right: none;
    border-left: none;
    border-bottom: none;
  }

  .viewtabi_intro_ttl {
    display: block;
    border-bottom: 1px solid #11b6b2;
    padding-left: 0;
  }

  .viewtabi_intro_ttl dt img {
    display: block;
    margin: 0 auto;
    /*max-width: 50%;*/
  }

  .viewtabi_intro_ttl dd {
    color: #029e9a;
    font-weight: bold;
    font-size: 16px;
    margin: 0 3% 5%;
    line-height: 1.5;
  }

  .viewtabi_intro_ul {
    display: block;
    margin: 0;
  }

  .viewtabi_intro_ul li {
    width: 100%;
    border-bottom: 1px solid #029e9a;
    margin: 0;
    padding: 5% 3% 4%;
  }

  .viewtabi_intro_ul li:nth-child(odd) {
    border-right: none;
    padding-right: 3%;
  }

  .viewtabi_intro_ul .viewtabi_intro_img {
    width: 44%;
  }

  .viewtabi_intro_inner {
    width: 52%;
  }

  .viewtabi_intro_inner>p:first-child {
    font-weight: bold;
    font-size: 1.6rem;
    margin: 0 0 10px;
    line-height: 1.4;
  }

  /*.viewtabi_intro_txt { font-weight: bold;}*/
}

/* ---------------------------------------------------------

	03. エリア

--------------------------------------------------------- */

.area_contentsbox .area_ttl {
  margin: 1.5rem 0 0;
  transition: all 0.5s;
  color: #029e9a;
  font-size: 1.6rem;
  font-weight: bold;
  pointer-events: none;
}

.area_contentsbox a {
  color: #222;
  text-decoration: none;
}

.area_contentsbox a:hover {
  color: #06c;
  text-decoration: underline;
}

.area_contentsbox .list>li:nth-child(even) {
  background: #f8f8f8;
  margin: .25em 0;
}

.area_contentsbox .list .list_content a::after {
  content: '|';
  display: inline-block;
  margin-left: 1.5rem;
  font-weight: normal;
}

.area_contentsbox .list:nth-child(6) li:after {
  content: '';
  display: none
}

.area_contentsbox .list .list_content li {
  display: inline-block;
  margin-left: 1.3rem;
  padding: 1rem 0;
}

.area_contentsbox .list .list_content li:first-child {
  margin-left: 0;
}

.area_contentsbox .list .list_content li:first-child a,
.area_contentsbox .list_hkd,
.area_contentsbox .list_izu a {
  padding-left: 0;
  font-weight: bold;
}


/*-------------------------------
	03. エリア sp
-------------------------------*/


@media screen and (max-width:568px) {
  .area_contentsbox a {
    color: #222;
    text-decoration: underline;
  }

  .area_contentsbox .area_ttl {
    font-size: 2.0rem;
    text-align: center;
  }

  .area_contentsbox .list>li:nth-child(even) {
    background: #fff;
    margin: inherit;
  }

  .area_contentsbox .list_hkd,
  .area_contentsbox .list_izu {
    margin: .5rem 0 1rem 0;
  }

  .area_contentsbox .list_content li:first-child,
  .list_hkd li,
  .list_izu li {
    background: #e8f4f4;
    padding: 5px 0 5px 20px;
    position: relative;
    display: block;
    width: 100%;
  }

  .area_contentsbox .list {
    padding: 1.0rem 2rem;
  }

  .area_contentsbox .list .list_content li:first-child:after {
    content: none !important;
  }

  .area_contentsbox .list .list_content a::after {
    content: none;
  }

  .area_contentsbox .list_content li {
    margin-left: 0 !important;
    position: relative;
    padding: 5px 0 5px 20px !important;
    width: 49%;
  }

  .area_contentsbox .list_content li a:before,
  .area_contentsbox .list_content li:first-child a::before,
  .area_contentsbox .list_hkd a::before,
  .area_contentsbox .list_izu a::before {
    content: '';
    border-top: 2px solid #999;
    border-right: 2px solid #999;
    display: block;
    height: .7rem;
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: rotate(45deg) translate(-35%, -40%);
    transform: rotate(45deg) translate(-35%, -40%);
    width: .7rem;
  }

}

/* ---------------------------------------------------------

	04. お知らせ

--------------------------------------------------------- */
.attention_box {
  border: 1px double #666;
  border-radius: 15px;
  padding: 10px 10px 10px 15px;
  margin: 10px 0;
  width: 100%;
  font-weight: bold;
  font-size: 1.4rem;
  line-height: 150%;
}

.attention_box .att_notice_box {
  display: none
}

.att_notice_box {
  margin: 5px 0 0
}

.att_notice_box>p {
  padding: 2px 0
}

.att_notice_box img {
  margin: 0 0 5px 0;
}

.att_notice_box .outside_icon {
  padding: 0 0 6px 15px;
}

.attention_box>.info_tab_notice {
  margin: 0;
  display: inline-block;
  border: none;
  font-size: 1.4rem;
  padding: 0;
}

.pm_icon {
  position: relative;
  width: 20px;
  height: 20px;
  background: #ccc;
  border-radius: 50%;
  top: 4px;
  left: 10px;
  display: inline-block;
}

.pm_icon::before,
.pm_icon_plus::after {
  position: absolute;
  top: 9px;
  left: 50%;
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  border-top: 2px solid #fff;
  transform: translateX(-50%);
}

.pm_icon_plus:after {
  top: 3px;
  left: -2px;
  transform: rotate(90deg);
}

.pm_icon.on:after {
  transform: rotate(0);
  -webkit-transform: rotate(0);
  top: 9px;
  left: 16%;
  background-color: transparent;
}

/*IE11*/
@media all and (-ms-high-contrast: none) {
  .pm_icon {
    top: 0;
  }
}



/* ---------------------------------------------------------

	05. びゅうたびバナーとSNS

--------------------------------------------------------- */

.sns_box {
  display: inline-flex;
  align-items: flex-start;
  padding: 5px;
  margin-top: 10px;
}

.sns_box_left {
  display: inline-block;
  margin-left: auto;
}

.sns_box_right {
  display: inline-block;
  align-items: flex-start;
  margin-left: 50px;
}

.sns_box_right>p {
  font-size: 1.3rem;
  padding: 0px 10px 10px 0px;
}

.sns_box_right>ul>li {
  display: inline-flex;
  width: 32px;
  height: 32px;
}

.sns_box_right>ul>li:nth-child(3) {
  display: none
}

@media all and (min-width:569px) {
  .sns_box_right>ul>li {
    margin-left: 10px;
  }
}

@media all and (max-width:568px) {
  .sns_box {
    width: 94%;
    margin: 0 /*3%*/;
    display: inherit;
  }

  .sns_box_right {
    display: inherit;
    margin: 30px 0 0;
  }

  .sns_box_right>p {
    display: block;
    text-align: center;
  }

  .sns_box_right>ul {
    width: 100%;
    text-align: center;
  }

  .sns_box_right>ul>li:nth-child(2) {
    margin: 0 0 0 5%;
  }
}

/* ---------------------------------------------------------

	06. 特集一覧コンテンツ

--------------------------------------------------------- */

.bnr_txt {
  margin-bottom: 1.4em;
}

.bnr_txt2 {
  margin-bottom: 0em;
  /*2行になった場合こちら*/
}

.bnr_txt .textitem,
.bnr_txt2 .textitem {
  display: inline-block;
  position: relative;
  padding: 0 0 5px 20px;
  vertical-align: top;
  line-height: 130%;
}

.bnr_txt .textitem:hover,
.bnr_txt2 .textitem:hover {
  text-decoration: underline !important;
  color: #06c;
}

.bnr_txt .textitem:before {
  content: '';
  width: 16px;
  height: 16px;
  background: #47adb0;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 0px;
  margin-top: -10px;
}

.bnr_txt .textitem:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 50%;
  left: 6px;
  margin-top: -6px;
}

/*2行になった場合こちら*/
.bnr_txt2 .textitem:before {
  content: '';
  width: 16px;
  height: 16px;
  background: #47adb0;
  border-radius: 50%;
  position: absolute;
  top: 30%;
  left: 0px;
  margin-top: -10px;
}

.bnr_txt2 .textitem:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 30%;
  left: 6px;
  margin-top: -6px;
}


@media screen and (max-width: 568px) {

  .bnr_txt,
  .bnr_txt2 {
    height: auto !important;
  }
}

.bnr_contnt_box .bnr_box .clm_list_txtarea {
  display: none;
}


/* ---------------------------------------------------------

	07. おすすめ特集　3枠リード文あり

--------------------------------------------------------- */
div.safety_box {
  padding: .5rem
}

/*PCのみwide指定*/
@media all and (min-width:569px) {
  .safety_box {
    width: 333px;
  }
}

.safety_ttl {
  position: relative;
}

.safety_ttl li {
  font-size: 1.6rem;
  margin: 5px 0;
  padding: 0 0 0 25px;
  line-height: 150%;
}

.safety_ttl li:before {
  content: '';
  width: 16px;
  height: 16px;
  background: #47adb0;
  border-radius: 50%;
  position: absolute;
  top: 15px;
  left: 5px;
  margin-top: -10px;
}

.safety_ttl li:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 15px;
  left: 11px;
  margin-top: -6px;
}

.safety_txt {
  line-height: 150%;
  padding: 0 5px;
}


/* ---------------------------------------------------------

	08. お知らせ文言（パンくずとスライダー間）

--------------------------------------------------------- */
/*　▼0623対応内容▼　*/

/*.wrap .title.top:after {
  content: '大阪府、静岡県（伊豆以外）の商品は、当社の承諾なく第三者に譲渡・転売する事象の発生により販売を停止しておりましたが、11月1日11時より販売を再開いたします。';
    font-size: 1.35rem;
    display: block;
    margin: 15px auto;
    color: #555;
    font-weight: bold;
    line-height: 1.5;
    border: 1px #999 solid;
    padding: 10px;
    width: 94%;
    white-space: pre-wrap;
    text-align: left;
  }

  @media all and (min-width:569px) {
    .wrap .title.top:after {
      margin: 30px auto;
    }
}
.clm1_box_bdr .top:after {
    content: none;
}*/

/*　▲0623対応内容▲　*/


/* ---------------------------------------------------------

	09. お知らせ文言（検索パネル上）

--------------------------------------------------------- */
/*　▼メンテナンス文言onlyの場合ここをコメントアウト解除する　
    260325  対応内容▼　*/
/*
#panel .newSearchPanel .newSearchPanelBody:before {
  content: 'メンテナンスのため、3/25（水）4:00～7:00頃はサービスがご利用いただけません。\A※メンテナンスの時間は予告なく変更する場合がございます。';
  font-size: 1.35rem;
  display: block;
  margin: -15px auto 30px;
  color: #555;
  font-weight: bold;
  line-height: 1.5;
  border: 1px #999 solid;
  padding: 10px;
  width: 100%;
  white-space: pre-wrap;
  text-align: left;
}

@media all and (min-width:569px) {
  #panel .newSearchPanel .newSearchPanelBody:before {
	content: 'メンテナンスのため、3/25（水）4:00～7:00頃はサービスがご利用いただけません。※メンテナンスの時間は予告なく変更する場合がございます。';
    margin: -15px auto 30px;
  }
}*/

/*
#panel .newSearchPanel .newSearchPanelBody:before {
  content: '特急列車利用の商品（伊豆・草津・房総・常磐方面）で一部お申し込みいただけない期間がございましたが、受付開始いたしました。';
  font-size: 1.35rem;
  display: block;
  margin: -15px auto 30px;
  color: #555;
  font-weight: bold;
  line-height: 1.5;
  border: 1px #999 solid;
  padding: 10px;
  width: 100%;
  white-space: pre-wrap;
  text-align: left;
}

@media all and (min-width:569px) {
  #panel .newSearchPanel .newSearchPanelBody:before {
    margin: -15px auto 30px;
  }
}*/

/*　▼サポデメンテナンスonly　*/
/*#panel .newSearchPanel .newSearchPanelBody:before {
  content: 'ただいま、オンライン販売サポートデスクの電話がつながりにくい状態です。その場合は、恐れ入りますが時間をおいてお掛け直しください。';
  font-size: 1.35rem;
  display: block;
  margin: -15px auto 30px;
  color: #555;
  font-weight: bold;
  line-height: 1.5;
  border: 1px #999 solid;
  padding: 10px;
  width: 100%;
  white-space: pre-wrap;
  text-align: left;
}

@media all and (min-width:569px) {
  #panel .newSearchPanel .newSearchPanelBody:before {
    margin: -15px auto 30px;
  }
}*/
/*　▲サポデメンテナンスonly　*/

/* ▼山形新幹線対応（新着下） */
@media all and (min-width:569px) {div.info_attbox p{padding: 1.5rem 2.5rem 1.5rem 2.2rem;}}
@media all and (max-width:568px) {div.info_attbox p{padding: 1.5rem 2.5rem 0 2.2rem;}a.info_att{font-size: 1.2rem;}a.info_att.outside_icon{background-position: 0px 2px;}}
a.info_att{color: #222;}
a.info_att:hover{color: #06c;text-decoration: underline;}
/* ▲山形新幹線対応（新着下） */

/* ▼Instagram注意喚起 */
.whatsnew{margin:0 0 30px}
.cmn_contents:has(.whatsnew):after {
  content: '【ご注意】\AびゅうトラベルInstagramを装った偽アカウントが確認されています。\A正式なアカウントからDMで個人情報をお伺いすることは一切ありません（正式なアカウントは「@viewtravel_dp」です）。\A不審なアカウントからのDMやリンクにはアクセスせずに削除し、ブロック対応をお願いいたします。（11/17更新）';
  font-size: 1.35rem;
  display: block;
  margin: 30px 0;
  color: #555;
  line-height: 1.5;
  border: 1px #999 solid;
  padding: 10px;
  width: 99%;
  white-space: pre-wrap;
  text-align: left;
}
@media all and (max-width:569px) {/*SP表示*/
  .cmn_contents:has(.whatsnew):after {
	content: '【ご注意】\AびゅうトラベルInstagramを装った偽アカウントが確認されています。\A正式なアカウントからDMで個人情報をお伺いすることは一切ありません（正式なアカウントは「@viewtravel_dp」です）。\A不審なアカウントからのDMやリンクにはアクセスせずに削除し、ブロック対応をお願いいたします。（11/17更新）';
	margin: 30px auto;
	padding:2%;
	width:95%;
  }
}
/* ▲Instagram注意喚起 */

/* ▼JS対応（pdfup）ver. 検索パネル上に表示 */
.panel_attbox{
  font-size: 1.35rem;
  display: block;
  margin: -15px auto 30px;
  color: #555;
  font-weight: bold;
  line-height: 1.5;
  border: 1px #999 solid;
  padding: 10px;
  width: 100%;
  white-space: pre-wrap;
  text-align: left;
  /*　js表示の場合はコメントアウトのblock表示*/
  display: none; /*block or none*/
}
.panel_attbox a[href*=".pdf"]:before {background-size: 11px;padding: 0 0 0 12px;}
@media all and (min-width:569px) {
  .panel_attbox {margin: -15px auto 30px;}
}
.panel_attbox .outside_icon {background-position: 5px 1px;padding:0 0 0 20px;margin: 0 0 0 10px;}
/*ulタグ使うときは下記*/
.panel_attbox ul li{list-style: disc;margin: 0 0 0 30px;}
@media screen and (min-width:569px){
  .panel_attbox {line-height: 1.8;}
}
@media screen and (max-width:568px){
  .panel_attbox ul{margin:2% 0}
  .panel_attbox ul li{margin: 0 0 0 15px;}
  .panel_attbox .outside_icon {margin: 0 0 0 -4px;}
}

  /*jsup時のメンテナンス文言追加の場合はここをコメントアウト解除　→　251215メンテナンス文言*/
  /*.panel_attbox:before {content:'・ ';}
  .panel_attbox p {display: inline;}
  .panel_attbox:after {
    content: '\A・ 12/15（月）4:00～4:30頃、12/16（火）4:00～6:30頃はメンテナンスのためサービスがご利用いただけません。※時間は予告なく変更の場合があります。';
  }*/
  /*content: '・ 8/19（月）4:00～5:00頃はメンテナンスのためサービスがご利用になれません。※時間は予告なく変更の場合があります。'; 240819メンテナンス文言*/
/* ▼JS対応（pdfup）ver. 検索パネル上に表示 */



/*　▼1212対応内容▼　*/
/*.ski_att {
  font-size: 1.35rem;
  display: block;
  margin: -15px auto 0px;
  color: #555;
  font-weight: bold;
  line-height: 1.2;
  border: 1px #999 solid;
  padding: 0 10px 0;
  width: 100%;
  white-space: pre-wrap;
  text-align: left;*/
/*　*  word-break: keep-all;*　*/
/*}

@media all and (min-width:569px) {
  .ski_att {
    margin: -15px auto 30px;
  }*/
  /*　*.ski_att a.outside_icon {
    background-position: 0 2px;
  }*
  　*/
/*}

.ski_att a.outside_icon {
  margin-left: .5%;
  background-position: 0 3px;
  padding: 0 0 0 13px;
}*/
/*　▲1212対応内容▲　*/

/* ---------------------------------------------------------

	99. 修正

--------------------------------------------------------- */
/*　スライドショーテキスト　*/
.slider_mv_txt {
  text-shadow: 1px 4px 6px #222, -2px -2px 4px #222
}

@media screen and (max-width: 568px) {
  .top .section h1 {
    padding: 0 0 0 10px
  }

  .header_sp_menu .sp_menubox .header_snav_reserve a.outside_icon {
    white-space: nowrap;
  }

  .cmn_breadcrumb {
    width: 94%;
  }

  .cmp-text {
    width: 94%;
    margin: 0 auto;
  }
}


/*　検索パネル用クリアボタン　*/
/*.cancelBtn{display: none !important}*/


/*おすすめ特集（バナー）*/
@media screen and (max-width: 568px) {
  .bnr_txt {
    margin-bottom: 0 !important;
  }

  .article_contens .ac_txt {
    display: none
  }
}
/*---------------------------------
  全国旅行支援タイトル
-----------------------------------*/
/*.searchpanel2 + .ace-section h4{word-break:keep-all;}*/
@media screen and (max-width: 568px) {
  .searchpanel2+.ace-section h4>span {display: block}
}

.box_cmnt_att{width:1000px;/*margin:2% auto;*/padding:0 0 2%;}
.box_cmnt_att p {
  border: 1px solid;
  /*margin: 26% 0 -30px;*/
  padding:2%;
}
@media all and (max-width:767px){.box_cmnt_att{width:98%;margin:0 1% 3%;}
.box_cmnt_att p {
  border: 1px solid;
  /*margin: 72% 0 -15px;*/
  padding: 2%;
  }
}