/* ================================================
   ルックJTBMySTYLE ガクタビ 紹介ブロック
   全クラスに "jgt-" プレフィックスを付け、既存CSS
   （.title / .link / .box / .header / .wrap 等の
   汎用クラス名）との衝突を避けています。
   ================================================ */
.jgt-gakutabi{
  --jgt-orange:#f39400;
  --jgt-orange-dark:#e8820a;
  --jgt-orange-pale:#fff2df;
  --jgt-black:#231916;
  --jgt-gray-text:#4d4544;
}
/* ---- pink theme (航空券+ホテル): overrides the same variables, ----
   everything below keeps using var(--jgt-orange) etc. so no rules
   need duplicating - only the palette changes. */
.jgt-gakutabi.jgt-pink{
  --jgt-orange:#e8628f;
  --jgt-orange-dark:#d43d70;
  --jgt-orange-pale:#fdeef2;
}
.jgt-gakutabi *{
  box-sizing:border-box;
}
.jgt-wrap{
  background:#fff;
  border:3px solid var(--jgt-orange);
  border-radius:14px;
  padding:14px 18px 16px;
  margin:0 0 16px;
}

/* ---- top block: bubble + header on a pale orange panel ---- */
.jgt-top-block{
  background:var(--jgt-orange-pale);
  margin:-14px -18px 10px;
  padding:14px 18px 12px;
  border-radius:11px 11px 0 0;
}

/* ---- speech bubble ---- */
.jgt-bubble{
  display:inline-block;
  background:#fff;
  border-radius:999px;
  padding:6px 20px;
  font-size:0.95rem;
  font-weight:700;
  color:var(--jgt-orange-dark);
  line-height:1.2;
  margin:0 0 10px;
}

/* ---- header: title ---- */
.jgt-header{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.jgt-title-block{
  flex:1 1 260px;
  min-width:220px;
}
.jgt-title-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:4px;
}
.jgt-title-block .jgt-title{
  margin:0;
  font-size:clamp(1.3rem,3.4vw,1.8rem);
  font-weight:800;
  letter-spacing:0.01em;
  color:var(--jgt-black);
}
.jgt-bullet-list{
  list-style:none;
  margin:0;
  padding:0;
  font-size:0.92rem;
  color:var(--jgt-gray-text);
  line-height:1.4;
}
.jgt-bullet-list li{
  position:relative;
  padding-left:1.1em;
}
.jgt-bullet-list li::before{
  content:"・";
  position:absolute;
  left:0;
  color:var(--jgt-orange);
}

/* ---- style / parts row ---- */
.jgt-info-row{
  display:flex;
  flex-wrap:wrap;
  gap:40px;
  align-items:flex-start;
  border-bottom:2px solid #eee;
  padding-bottom:10px;
  margin-bottom:10px;
}
.jgt-pink .jgt-info-row{
  border-bottom:none;
}
.jgt-info-group{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.jgt-info-group--wide{
  flex:1 1 320px;
}
.jgt-info-label{
  background:var(--jgt-orange);
  color:#fff;
  font-size:1.05rem;
  font-weight:700;
  padding:3px 10px;
  border-radius:4px;
  width:fit-content;
}
.jgt-pill-row{
  display:flex;
  align-items:flex-start;
  gap:20px;
  flex-wrap:wrap;
}
.jgt-pill-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.jgt-pill{
  width:60px;
  height:60px;
  border-radius:50%;
  background:#fff;
  border:2px solid var(--jgt-orange);
  color:var(--jgt-orange);
  font-weight:700;
  font-size:0.8rem;
  line-height:1.25;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.jgt-pill-note{
  margin:0;
  font-size:0.72rem;
  color:var(--jgt-gray-text);
  text-align:center;
  white-space:nowrap;
}

.jgt-parts-row{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}
.jgt-part-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  width:86px;
  text-align:center;
}
.jgt-part-icon{
  width:60px;
  height:60px;
  border-radius:50%;
  background:var(--jgt-orange-pale);
  display:flex;
  align-items:center;
  justify-content:center;
}
.jgt-part-icon img{
  display:block;
  width:32px;
  height:32px;
  object-fit:contain;
}
.jgt-part-item span{
  font-size:0.7rem;
  color:var(--jgt-gray-text);
  line-height:1.2;
}

/* ---- 航空券 + 燃油タグ（航空券アイコンの隣に配置） ---- */
.jgt-part-item.jgt-part-item--air{
  width:auto;
  align-items:flex-start;
}
.jgt-part-item--air > span{
  width:60px;
  text-align:center;
}
.jgt-part-air{
  display:flex;
  align-items:center;
  gap:10px;
}
.jgt-fuel-tag{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  background:var(--jgt-orange);
  color:#fff;
  font-size:0.82rem;
  font-weight:800;
  line-height:1.25;
  padding:5px 10px;
  border-radius:8px;
  white-space:nowrap;
}
.jgt-fuel-tag small{
  font-size:0.66rem;
  font-weight:700;
}
.jgt-fuel-tag::before{
  content:"";
  position:absolute;
  left:-6px;
  top:50%;
  margin-top:-6px;
  border-style:solid;
  border-width:6px 6px 6px 0;
  border-color:transparent var(--jgt-orange) transparent transparent;
}

/* ---- lineup ---- */
.jgt-lineup-tag{
  display:inline-block;
  background:var(--jgt-orange);
  color:#fff;
  font-weight:700;
  font-size:0.9rem;
  padding:3px 14px;
  border-radius:999px;
  margin-bottom:6px;
}
.jgt-lineup-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:6px 8px;
}
.jgt-lineup-item{
  display:flex;
  align-items:baseline;
  gap:5px;
  font-size:0.92rem;
  white-space:nowrap;
}
.jgt-lineup-item .jgt-dot{
  color:var(--jgt-orange);
  font-size:0.96rem;
}
.jgt-lineup-item .jgt-place{
  color:var(--jgt-black);
}

.jgt-note{
  font-size:0.78rem;
  color:#b3b3b3;
  margin:6px 0 0;
}

/* ---- リード文（詳細はこちらボタンの上） ---- */
.jgt-lead{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:0.1em;
  margin:14px 0 0;
  text-align:center;
  font-size:clamp(1.2rem,3vw,1.6rem);
  font-weight:800;
  color:var(--jgt-orange-dark);
  line-height:1.4;
}
/* 左右の ＼ ／（折り返しても左右に付いたまま） */
.jgt-lead::before,
.jgt-lead::after{
  flex:0 0 auto;
  font-weight:800;
}
.jgt-lead::before{content:"＼";}
.jgt-lead::after{content:"／";}
.jgt-lead-note{
  display:inline-block;
  font-size:0.6em;
  font-weight:700;
  color:inherit;
}

/* ---- 詳細はこちらボタン ---- */
.jgt-link-btn{
  margin:18px 4px 4px;
}
.jgt-link-btn a{
  display:block;
  width:100%;
  font-size:1.4rem;
  color:#fff;
  font-weight:bold;
  text-align:center;
  letter-spacing:2px;
  background:var(--jgt-orange) url(../img/jtb-kaigai/icon_arrow.png) no-repeat 96% center;
  background-size:14px;
  border-radius:10px;
  padding:12px 0;
  box-shadow:4px 4px var(--jgt-orange-dark);
  text-decoration:none;
}

/* ================================================
   クーポンバナー（更にルックJTBMySTYLEなら！）
   ================================================ */
.jgt-cp{
  margin:0 0 24px;
}

/* kicker row: heading text + 3 product badges */
.jgt-cp-kicker{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  justify-content: flex-start;
}
.jgt-cp-kicker-left{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
}
.jgt-cp-kicker-text{
  display:inline-block;
  background:#fdeceb;
  border-radius:999px;
  padding:6px 20px;
  font-size:0.95rem;
  font-weight:700;
  color:#c51627;
  line-height:1.2;
}
.jgt-cp-badges{
  display:flex;
  gap:10px;
}
.jgt-cp-badge{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  width:58px;
}
.jgt-cp-badge-icon{
  width:44px;
  height:44px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.05rem;
}
.jgt-cp-badge--orange .jgt-cp-badge-icon{background:#f39400;}
.jgt-cp-badge--pink .jgt-cp-badge-icon{background:#e8628f;}
.jgt-cp-badge--teal .jgt-cp-badge-icon{background:#2ba7c7;}
.jgt-cp-badge span{
  font-size:0.62rem;
  font-weight:700;
  line-height:1.15;
  text-align:center;
}
.jgt-cp-badge--orange span{color:#f39400;}
.jgt-cp-badge--pink span{color:#e8628f;}
.jgt-cp-badge--teal span{color:#2ba7c7;}
.jgt-cp-catch{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:0.1em;
  margin:0;
  font-size:clamp(0.95rem,2.4vw,1.25rem);
  font-weight:800;
  letter-spacing:0.01em;
  color:#231916;
  line-height:1.3;
}
/* 左右の ＼ ／（折り返しても左右に付いたまま） */
.jgt-cp-catch::before,
.jgt-cp-catch::after{
  flex:0 0 auto;
  font-weight:800;
}
.jgt-cp-catch::before{content:"＼";}
.jgt-cp-catch::after{content:"／";}


/* main coupon card */
.jgt-cp-wrap{
    border: 9px solid #ff9e9e;
  border-radius:10px;
  background:#fff;
  padding:20px 24px;
}
.jgt-cp-kicker{
  margin-bottom:4px;
  padding-bottom:4px;
}
.jgt-cp-headline-row{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:16px 32px;
  margin-bottom:16px;
}
.jgt-cp-limited{
  flex:0 0 auto;
  width:90px;
  height:90px;
  border-radius:50%;
  background:#3962ab;
  color:#fff;
  font-weight:700;
  font-size:0.9rem;
  line-height:1.3;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.jgt-cp-limited-period{
  display:inline-block;
  font-size:1.05rem;
  font-weight:700;
  color:#3962ab;
  line-height:1.4;
}
.jgt-cp-headline{
  margin:0;
  flex:1 1 auto;
  min-width:0;
  font-size:1.3rem;
  font-weight:800;
  color:#231916;
  line-height:1.5;
}
.jgt-cp-mark{
  background:linear-gradient(transparent 55%, #fff987 0%) no-repeat;
  background-size:100% 100%;
  padding:0 2px;
  font-size:1.5rem;
}
.jgt-cp-sub{
  display:inline-block;
  font-size:0.92rem;
  font-weight:700;
  margin-left:6px;
}
.jgt-cp-discount{
  flex:0 0 auto;
  margin-left:auto;
}
.jgt-cp-discount-label{
  font-weight:700;
  font-size:1.1rem;
  color:#231916;
}
.jgt-cp-discount-price{
  font-size:1.8rem;
  font-weight:900;
  color:#c51627;
  line-height:1;
}
.jgt-cp-footer{
  display:flex;
  flex-wrap:nowrap;
  align-items:flex-start;
  gap:24px;
  padding-top:14px;
}
.jgt-cp-terms{
  flex:1 1 auto;
  min-width:0;
  font-size:0.88rem;
  color:#555;
  line-height:1.6;
}
.jgt-cp-depart{
  display:inline-block;
  font-size:0.86em;
}
.jgt-cp-terms-title{
  margin:0 0 4px;
  font-weight:700;
  color:#231916;
}
.jgt-cp-terms ul{
  list-style:none;
  margin:0;
  padding:0;
}
.jgt-cp-terms li{
  position:relative;
  padding-left:1.1em;
  margin-bottom:2px;
}
.jgt-cp-terms li::before{
  content:"・";
  position:absolute;
  left:0;
  top:0;
}
.jgt-cp-terms .jgt-cp-note{
  position:relative;
  padding-left:1.1em;
  margin-top:8px;
}
.jgt-cp-terms .jgt-cp-note::before{
  content:"・";
  position:absolute;
  left:0;
  top:0;
}
.jgt-cp-info{
  flex:0 0 auto;
  white-space:nowrap;
  font-size:0.9rem;
  color:#333;
  line-height:1.7;
}
.jgt-cp-info p{
  margin:0;
}
.jgt-cp-note{
  color:#c51627;
  font-weight:700;
}

/* クーポンの詳細はこちら（U-29ページへ） */
.jgt-cp-link-btn{
  margin:18px 0 0;
}
.jgt-cp-link-btn a{
  display:block;
  width:100%;
  font-size:1.4rem;
  color:#fff;
  font-weight:bold;
  text-align:center;
  letter-spacing:1px;
  background:#e8505b url(../img/jtb-kaigai/icon_arrow.png) no-repeat 96% center;
  background-size:14px;
  border-radius:10px;
  padding:12px 0;
  box-shadow:0 4px #c51627;
  text-decoration:none;
}

/* ---- responsive breakpoints ---- */
@media (max-width:820px){
  .jgt-lineup-grid{grid-template-columns:repeat(3, 1fr);}
  .jgt-cp-headline-row{flex-wrap:wrap;}
  .jgt-cp-footer{flex-direction:column; gap:10px;}
}
@media (max-width:600px){
/* ---- ガクタビ / 航空券+ホテル カード ---- */
  .jgt-wrap{padding:12px 8px; text-align:center;}
  .jgt-top-block{margin:-12px -8px 8px; padding:10px 12px 8px;}
  .jgt-bubble{padding:4px 14px; font-size:0.8rem; margin:0 0 6px;width: 100%;}
  .jgt-header{align-items:flex-start; gap:10px; text-align:left; flex-wrap:nowrap;}
  .jgt-title-block{text-align:left; flex:1 1 auto; width:auto; min-width:0;}
  .jgt-title-row{justify-content:flex-start; margin-bottom:2px;}
  .jgt-title-block .jgt-title{font-size:min(1.05rem, 3.9vw); white-space:nowrap;}
  .jgt-bullet-list{text-align:left; display:block; font-size:0.74rem; line-height:1.25;}
  .jgt-info-row{flex-direction:column; align-items:center; gap:14px; padding-bottom:6px; margin-bottom:6px;}
  .jgt-info-group{width:100%;}
  .jgt-info-group--wide{flex:none; width:100%;}
  .jgt-info-label{width:100%; text-align:center; font-size:0.82rem; padding:2px 8px;}
  .jgt-pill-row{gap:12px;justify-content: center;}
  .jgt-pill{width:48px; height:48px; font-size:0.62rem;}
  .jgt-parts-row{justify-content:flex-start; gap:8px; flex-wrap:nowrap;justify-content: center;}
  .jgt-part-item{width:54px;}
  .jgt-part-icon{width:40px; height:40px;}
  .jgt-part-icon img{width:20px; height:20px;}
  .jgt-part-item span{font-size:0.55rem;}
  .jgt-parts-row{flex-wrap:wrap; gap:8px 2px;}
  .jgt-part-item{width:64px;}
  /* スマホは燃油タグをアイコンの下に置き、吹き出しの口を上向きに */
  .jgt-part-item.jgt-part-item--air{align-items:center;}
  .jgt-part-item--air > span{width:auto;}
  .jgt-part-air{flex-direction:column; gap:5px;}
  .jgt-fuel-tag::before{
    left:50%;
    top:-5px;
    margin-top:0;
    margin-left:-5px;
    border-width:0 5px 5px 5px;
    border-color:transparent transparent var(--jgt-orange) transparent;
  }
  .jgt-fuel-tag{font-size:0.62rem; padding:3px 6px; border-radius:6px;}
  .jgt-fuel-tag small{font-size:0.5rem;}
  .jgt-lead{font-size:1.05rem; margin:10px 0 0;}
  .jgt-lineup-grid{grid-template-columns:repeat(2, 1fr); gap:3px 6px;}
  .jgt-lineup-tag{display:block; width:fit-content; margin:0 0 4px;}
  .jgt-lineup-tag{font-size:0.74rem;}
  .jgt-lineup-item{font-size:0.68rem;}
  .jgt-lineup-item .jgt-dot{font-size:0.72rem;}
  .jgt-link-btn{margin:10px 0 0;}
  .jgt-link-btn a{padding:9px 0; font-size:1.05rem;}

  /* ---- クーポンバナー ---- */
  .jgt-cp{margin:0 0 16px;}
  .jgt-cp-wrap{padding:14px; text-align:center;}
  .jgt-cp-kicker{flex-direction:column; text-align:center; margin-bottom:2px; padding-bottom:2px;}
  .jgt-cp-kicker-left{align-items:center; gap:6px;}
  .jgt-cp-kicker-text{padding:4px 14px; font-size:0.8rem;}
  .jgt-cp-catch{font-size:1rem;}
  .jgt-cp-badges{gap:6px;}
  .jgt-cp-badges img{width:170px; height:auto;}
  .jgt-cp-badge{width:48px;}
  .jgt-cp-badge-icon{width:36px; height:36px; font-size:0.85rem;}
  .jgt-cp-badge span{font-size:0.54rem;}
  .jgt-cp-headline-row{flex-direction:column; align-items:center; gap:8px; margin-bottom:10px;}
  .jgt-cp-headline{flex:none; width:100%;}
  .jgt-cp-limited{width:auto; height:auto; border-radius:6px; padding:6px 10px; font-size:0.8rem;}
  .jgt-cp-limited br{display:none;}
  .jgt-cp-limited-period{font-size:0.9rem;}
  .jgt-cp-link-btn{margin:12px 0 0;}
  .jgt-cp-link-btn a{font-size:1.05rem; padding:9px 0;}
  .jgt-cp-headline{font-size:1rem; line-height:1.4; text-align:center;}
  .jgt-cp-mark{font-size:1.2rem;}
  .jgt-cp-sub{font-size:0.8rem;}
  .jgt-cp-discount{margin-left:0; justify-content:center;}
  .jgt-cp-discount-label{font-size:0.95rem;}
  .jgt-cp-discount-price{font-size:1.7rem;}
  .jgt-cp-footer{flex-direction:column; gap:10px; text-align:left; padding-top:8px;}
  .jgt-cp-terms{flex:none; width:100%;}
  .jgt-cp-terms{font-size:0.78rem; line-height:1.45;}
  .jgt-cp-info{flex:none; min-width:0; width:100%; font-size:0.8rem; line-height:1.4;}
}
@media (max-width:380px){
  .jgt-lineup-grid{grid-template-columns:1fr 1fr;}
}