@charset "utf-8";

:root {
	--commoncolor: #003B82; /* 共通カラー（紺色） */
	--basecolor: #3498db; /* ベースカラー（エリア色） */
	--baselightcolor: #f3fafd; /* ベースカラー（薄いエリア色） */
	--subcolor: #a3d172; /* タイトルのバーグラデーション右（左はエリア色） */
}

/* MATERIAL ICON
-----------------------------------------------------------*/
.m-ico{font-style:normal;vertical-align:middle;font-weight:400;font-size:2rem}.m-ico:before{font-family:'Material Icons Round';content:attr(data-icon);font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 20;font-size:100%;line-height:1}.m-ico.-ml{margin-left:4px}.m-ico.-mr{margin-right:4px}.m-ico.-fsl:before{font-size:2.6rem}.ico-wrap{display:inline-flex;align-items:center}@media print,screen and (min-width:1000px){.m-ico{font-size:2.4rem}.m-ico:before{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24}}
.infoNews__block .m-ico:before{transform: rotate(90deg);}

/* Button
-----------------------------------------------------------*/
.btn{position:relative;display:flex;flex-direction:column;justify-content:center;align-self:center;min-height:55px;padding:2px 2.8rem 2px 4px;line-height:1.3;text-align:center;color:#fff!important;font-weight:700;border-radius:8px;border:solid 3px transparent;background:var(--basecolor);transition:opacity .3s ease-out}.btn.-shadow{box-shadow:0 2px 6px 0 rgba(0,0,0,.3)}.btn.-secondly{color:var(--basecolor)!important;border-color:var(--basecolor);background:#fff; padding: 2px 2.8rem 2px 4px;}.btn .m-ico.-arrow,.btn .m-ico.-blank{position:absolute;right:4px;top:50%;transform:translateY(-50%);line-height:1}.btn .m-ico.-arrow{display:inline-flex;align-items:center;font-size:2.8rem}.btn__txt{font-weight:700}.btn__txt .m-ico{display:inline-flex;align-items:center}@media print,screen and (min-width:1000px){.btn:hover{opacity:.6}}

/* INFORMATION
/* INFORMATION
------------------------------------------------------*/
.information {
  padding: 24px 8px;
  background: var(--baselightcolor);
}

/* カルーセル外枠 */
.infoNews {
  position: relative;
  margin: 0 auto 16px;
  width: 100%;
  /*max-width: 1280px;*/
  max-width: 90%;
} 

.infoNews__ttl {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
  padding-bottom: 20px;
}

/* カセット全体（SP・PC共通：横スクロール＆カルーセル化） */
.infoNews__cassettes {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 8px 16px 16px 16px;
  margin-left: -8px;
  margin-right: -8px;
}

/* スクロールバーの非表示化 */
.infoNews__cassettes::-webkit-scrollbar {
  display: none;
}
.infoNews__cassettes {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* SP用：カセット（カード）幅の設定 */
.infoNews__cassete {
  position: relative;
  flex: 0 0 80%; /* 右端をチラ見せさせる幅 */
  padding: 16px;
  border-radius: 8px;
  background: #fffdf1;
  scroll-snap-align: center;
  box-sizing: border-box;
}

/* グラデーション枠線 */
.infoNews__cassete::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: 8px;
  background: linear-gradient(to right, var(--basecolor), var(--subcolor));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* --------------------------------------------------
 * SP用レイアウト（左：画像、右：タイトル、下：説明文、最下部：ボタン）
 * -------------------------------------------------- */
.infoNews__block {
  display: grid;
  grid-template-areas:
    "img name"
    "txt txt"
    "bts bts";
  grid-template-columns: 100px 1fr;
  grid-template-rows: auto auto auto;
  gap: 12px 12px;
  align-items: center;
  height: 100%;
}

/* 1. タイトル領域 (SP) */
.infoNews__bd {
  display: contents;
}

.infoNews__name {
  grid-area: name;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  align-self: center;
}

/* 2. 説明文領域 (SP) */
.infoNews__txt {
  grid-area: txt;
  margin: 0;
  font-size: 1.3rem;
  color: #333;
  line-height: 1.5;
}

/* 3. 画像領域 (SP) */
.infoNews__img,
.infoNews__pamphlet {
  grid-area: img;
  width: 100%;
  margin: 0;
  text-align: center;
}

.infoNews__img-box img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}

/* 4. ボタン領域 (SP) */
.infoNews__bts,
.infoNews__list {
  grid-area: bts;
  margin-top: 4px;
  width: 100%;
}

.infoNews__bts {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
}

.infoNews__bt {
  width: 100%;
}

.infoNews__bt-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  min-height: 44px;
}

/* ナンバリングリスト用スタイル */
.infoNews__list {
  counter-reset: item;
}

.infoNews__list li {
  counter-increment: item;
  padding: 8px 0;
}

.infoNews__list li:not(:first-child) {
  border-top: solid 1px #d9d9d9;
}

.infoNews__list a {
  position: relative;
  display: block;
  padding-left: 2.3rem;
  padding-right: 2rem;
  line-height: 1.5;
  text-decoration: none;
  font-weight: 700;
}

.infoNews__list a::before {
  position: absolute;
  left: 0;
  top: -1px;
  content: counter(item);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.8rem;
  height: 1.8rem;
  line-height: 1;
  text-align: center;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  font-family: "Noto Sans JP", sans-serif;
  border-radius: 50%;
  background: #d9981b;
  letter-spacing: 0;
}

.infoNews__list .m-ico {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* スクロール誘導矢印アイコン */
.infoNews::after {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  border: 1px solid #ccc;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  pointer-events: none;
  z-index: 5;
}

/* --------------------------------------------------
 * PC（1000px以上）用レスポンシブ設定
 * -------------------------------------------------- */
@media screen and (min-width: 1000px) {
  .information {
    padding: 40px 0;
  }

  .infoNews {
    margin-bottom: 32px;
  }

  .infoNews__ttl {
    font-size: 3.0rem;
  }

  .infoNews__cassettes {
    gap: 8px;
    margin-left: 0;
    margin-right: 0;
    padding: 8px 4px 16px 4px;
  }

  /* PC用のカセット幅を480pxに拡大（右側が少しはみ出てスライド可能に） */
  .infoNews__cassete {
    flex: 0 0 480px !important;
    padding: 24px;
    scroll-snap-align: start;
  }

  /* 上部：画像＋テキスト / 下部：ボタン（横幅いっぱい） */
  .infoNews__block {
    display: grid !important;
    grid-template-areas:
      "infoNew-img infoNew-bd"
      "infoNew-bt infoNew-bt" !important;
    grid-template-columns: 180px 1fr !important;
    grid-template-rows: 1fr auto !important;
    gap: 4px 24px !important;
    align-items: start;
  }

  .infoNews__bd {
    display: block !important;
    grid-area: infoNew-bd !important;
  }

  .infoNews__name {
    grid-area: auto !important;
    font-size: 1.8rem;
    margin-bottom: 8px;
  }

  .infoNews__txt {
    grid-area: auto !important;
    font-size: 1.4rem;
    color: #666;
    line-height: 1.5;
    margin-top: 8px;
  }

  .infoNews__img,
  .infoNews__pamphlet {
    grid-area: infoNew-img !important;
    width: 180px;
    margin: 0;
  }

  /* ボタンエリアを左右いっぱいに広げる */
  .infoNews__bts,
  .infoNews__list {
    grid-area: infoNew-bt !important;
    grid-column: 1 / -1 !important;
    margin-top: 16px;
    width: 100% !important;
  }

  .infoNews__bt {
    width: 100% !important;
  }

  .infoNews__bt-link {
    width: 100% !important;
  }

  .infoNews__list a {
    padding-left: 2.8rem;
  }

  .infoNews__list a::before {
    width: 2.2rem;
    height: 2.2rem;
    line-height: 2.2rem;
    font-size: 1.4rem;
  }

  .infoNews::after {
    right: -12px;
    width: 36px;
    height: 36px;
    font-size: 22px;
  }
}


/* SLIDER
------------------------------------------------------*/
.js-tiny-slider.is-cassette,.js-tiny-slider.is-cassette-single{padding-top:2px;padding-bottom:8px}.js-tiny-slider:not(.tns-slider){display:flex;overflow:hidden}.js-tiny-slider.tns-slider{display:flex;touch-action: pan-y}.js-tiny-slider.tns-slider .tns-item{height:auto}.tns-outer{position:relative;touch-action: pan-y}.tns-outer{display:flex;flex-direction:column-reverse}.js-tiny-slider.-center{margin-left:auto;margin-right:auto}.tiny-slider-controls{display:flex;align-items:center;align-self:center;position:relative;text-align:center;margin-top:12px;padding:0 56px;height:4rem}.tns-nav{margin-top:8px}.tns-nav,.tiny-custom-nav{display:flex;justify-content:center;gap:8px}.tns-nav button,.tiny-custom-nav button{cursor:pointer;width:10px;height:10px;border-radius:50vw;background:#BCBDC2;transition:width .2s ease-out,opacity .3s ease-out}.tns-nav button.tns-nav-active,.tiny-custom-nav button.is-active{pointer-events:none;background:var(--commoncolor)}.tns-outer.is-cassette .tiny-custom-nav button.is-active{width:32px}.tns-outer.is-map .tiny-custom-nav{gap:4px}.tns-outer.is-map .tns-nav button,.tns-outer.is-map .tiny-custom-nav button{width:8px;height:8px}.tns-controls button{position:absolute;top:50%;transform:translateY(-50%);z-index:10;margin-top:-9px;color:#fff;font-size:2.5rem;font-size:0}.tns-controls button .m-ico{display:flex;justify-content:center;align-items:center}.tiny-slider-controls .tns-controls button{display:flex;justify-content:center;align-items:center;margin-top:0;width:4rem;height:4rem;line-height:1;border-radius:50vw;background:var(--commoncolor);transition:opacity .3s ease-out}.tiny-slider-controls .tns-controls button:disabled{opacity:.3;pointer-events:none}.tns-controls [data-controls="prev"]{left:4px}.tns-controls [data-controls="next"]{right:4px}.tiny-slider-controls .tns-controls [data-controls="prev"]{left:0}.tiny-slider-controls .tns-controls [data-controls="next"]{right:0}@media print,screen and (min-width:1000px){.tns-nav button:not(.tns-nav-active):hover,.tiny-custom-nav button:not(.is-active):hover{opacity:.6}.tiny-slider-controls .tns-controls button:not(:disabled):hover{opacity:.6}}


/* 今おすすめのJTB海外ツアー スライダー 20260831
------------------------------------------------------*/
.infoNews__cassete{box-sizing:border-box; height:100%;}
.infoNews__img img{width:100%; display:block;}
/*.infoNews {max-width: 1350px;}*/

@media screen and (max-width: 999px) {
/*.infoNewsSlider .tns-item {width: 100% !important; padding-right:0px !important;}*/
.infoNews__cassettes {gap: 16px; padding: 0 0 0 16px;}
.infoNews {max-width: 100%;}    
}

@media screen and (min-width: 1000px) {
.infoNews__item{width: calc(100% / 4 - 1px) !important;}
}

/*20260903追加
.infoNewsSlider {opacity: 0;}
.infoNewsSlider.is-loaded {opacity: 1;}
.tns-ovh .m-ico:before{display:none;}
*/

.infoNews__img a{padding: 0 !important;}

/*レイアウト調整*/
@media screen and (min-width:1000px) and (max-width:1800px) {

  .infoNews__block{
    grid-template-areas:
      "infoNew-img"
      "infoNew-bd"
      "infoNew-bt" !important;

    grid-template-columns: 1fr !important;
  }

  .infoNews__bd{
    grid-area: infoNew-bd !important;
  }

  .infoNews__img{
    grid-area: infoNew-img !important;
    width: 100% !important;
  }

  .infoNews__bts{
    grid-area: infoNew-bt !important;
  }

}