@charset "utf-8";

/* =========================================================
   TOUR / SCHEDULE
========================================================= */
/* 固定ヘッダーの高さ分（PC用） */
:root{
  --headerH: 80px; /* ←実際の固定ヘッダー高さに合わせる */
}

/* アンカーで飛ぶ先に効かせる */
.detailSection{
  scroll-margin-top: calc(var(--headerH) + 16px);
}

@media (max-width: 768px){
  :root{ --headerH: 64px; }
}


/* schedule image */
.schedule-img-wrapper{padding-top: 120px;
  position:relative;
  z-index:1;
  overflow:hidden;
  width:80%;
  height:50vh;
}
.schedule-img{
  height:50vh;
  background:url("../img/02.jpg") no-repeat center;
  background-size:cover;
}
@media (max-width: 768px){
    .schedule-img-wrapper{
  width:100%;
        }
}/**/




#tokyo-detail h3{font-size: 1.4rem;font-weight: 600;margin: 0;line-height: 1.4;}
#tokyo-detail h3 small{font-size: 0.9rem;font-weight: 600;margin: 0;line-height: 1.4;}


/* fixedで左にピッタリ */
.scheduleRakuda{
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  pointer-events: none;
}

/* ★ここが回転担当（移動はJSが scheduleRakuda 自体に translateY を入れる想定） */
.scheduleRakuda__inner{
  position: absolute;
  left: 0;
  top: 0;

  width: 60px;
  height: 34px;

  /* 足の基準を左下に固定 */
  transform-origin: 0 100%;

  /* SVG余白で“足が浮く”のをここで吸収（数値は後で微調整） */
  --foot-nudge: 6px;

  /* ★回転は固定：常に90deg */
  transform: translateX(2px)
             translateY(calc(-100% + var(--foot-nudge)))
             rotate(90deg);
  transition: transform .25s ease;
}

.scheduleRakuda__flip{
  width:100%;
  height:100%;
  display:block;
  transform-origin: 50% 50%;
}

/* ★上向き：中身だけ左右反転 → rotateは変えない */
.scheduleRakuda.is-up .scheduleRakuda__flip{
  transform: scaleX(-1);
}

/* 画像 */
.scheduleRakuda__svg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 足パカ */
.scheduleRakuda__svg.is-a{ animation: rakudaStepA .9s steps(1,end) infinite; }
.scheduleRakuda__svg.is-b{ animation: rakudaStepB .9s steps(1,end) infinite; }
@keyframes rakudaStepA{ 0%,49%{opacity:1;} 50%,100%{opacity:0;} }
@keyframes rakudaStepB{ 0%,49%{opacity:0;} 50%,100%{opacity:1;} }




.tourSchedule{ 
    margin: auto;
  padding: 3% 0;
}

.tourSchedule h2{ text-align: center;
    margin: auto;}
.tourSchedule__lead{text-align: center;
  margin: 0 auto 28px;
  font-family: "Oswald", sans-serif;
  letter-spacing: .2em;
  opacity: .8;
}
.tourSchedule__inner{
  width:100%;
  max-width:980px;
  margin:0 auto;
}

/* MAIN */
.tourMain{
  border: 1px solid rgba(255,255,255,.25);
  background: transparent;
  padding: clamp(28px, 4vw, 56px);
  margin: 0 0 26px 0;
}
.tourMain__city{
  margin: 0 0 10px;
  font-family:"Oswald", sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 5vw, 68px);
  line-height: .95;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.tourMain__city .sep{ padding: 0 .25em; opacity: .65; }
.tourMain__city .jp{
  font-family:"Noto Sans JP", sans-serif;
  letter-spacing: .08em;
  font-weight: 700;
  text-transform: none;
}
.tourMain__venue{ margin:0 0 8px; font-weight:700; font-size: clamp(18px, 2.2vw, 28px); }
.tourMain__date{ margin:0; font-weight:650; font-size:16px;  opacity:.9; }

.tourMain__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}
.btnGhost, .tourLink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 5px 14px;
  border: 1.5px solid #ba8d2f;
  font-weight:650;
  letter-spacing:.08em; transition: background 0.4s ease, color 0.4s ease;
}
/*tokyo */
.btnGhost{ background:#ba8d2f; color:#fff; }
/*tour */
.tourLink{ background:#ba8d2f; color:#fff; padding:5px 14px; font-size:.8rem; }
.btnGhost:hover,.tourLink:hover{
  background:#fff;
  color:#ba8d2f;
}


.detailBtn{
  margin-left: 10px;
  display:inline-block;
  margin-top:8px;
padding:5px 14px;
  font-size:14px;
  border:1px solid #ba8d2f;
  text-decoration:none;
  transition:.3s;
  background:#ba8d2f;
  color:#fff; transition: background 0.4s ease, color 0.4s ease;
}
.detailBtn:hover{
  background:#fff;
  color:#ba8d2f;
}



.detailNote {
  margin-top: 10px;
  font-size: 12px;
  opacity: .7;
  line-height: 1.6;
}

.textLink {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.textLink:hover { opacity: .75; }






/* 共通 */
.schSvg{
  display:block;
  width:100%;
  height:auto;
}

/* LIST */
.tourGrid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
@media (min-width: 720px){
  .tourGrid{ grid-template-columns:1fr 1fr; gap:16px; }
}
.tourItem{
 border-top: 1px solid rgba(255,255,255,.18);
  padding-top:12px;
}
.tourItem__city{
  margin:0 0 6px;
  font-family:"Oswald", sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform: uppercase;
}
.tourItem__city .sep{ padding: 0 .25em; opacity:.65; }
.tourItem__city .jp{
  font-family:"Noto Sans JP", sans-serif;
  letter-spacing:.08em;
  font-weight:700;
  text-transform:none;
}
.tourItem__venue{ margin:0 0 2px; font-size:15px; }
.tourItem__date{ margin:0 0 5px; font-size:13px; opacity:.78;font-weight: 600; }



/* =========================================================
   DETAIL PAGE (white theme)
========================================================= */
.detailPage{
  max-width: 980px;
  margin: 0 auto;
  padding: 110px 20px 70px;
}
.detailHero{ margin-bottom: 28px; }
.detailHero__title{
  font-family: "Oswald", sans-serif;
  letter-spacing: .14em;
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.05;
  text-transform: uppercase;
}
.detailHero__venue{ margin-top: 10px; font-weight: 700; font-size: 18px; }
.detailHero__date{ margin-top: 6px; opacity: .85; font-weight: 650; }

.detailSection{ margin-top: 26px; }
.detailSection__title{
  font-size: 1.6rem;
  margin: 40px 0 14px;
  letter-spacing: .08em;background: #fff;padding: 0 0 0 20px;
}

.detailTable{
  width: 100%;
  border-collapse: collapse;
  border: 0;
  background: transparent;
}
.detailTable th,
.detailTable td{
  border: 0;
  padding: 14px 0;
  vertical-align: top;
}

.detailTable th{
  width: 26%;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .12em;
  opacity: .6;
  padding-right: 24px;
  position: relative;
}

/* ← これが縦線 */
.detailTable th::after{
  content:"";
  position:absolute;
  top: 8px;
  bottom: 8px;
  right: 0;
  width: 1px;
  background: rgba(189,120,38,.4);
}

.detailTable td{
  padding-left: 24px;
  font-weight: 650;
  line-height: 1.7;
}

.detailNav{ margin-top: 26px; }
.detailBack{
  display:inline-flex;
  gap:8px;
  align-items:center;
  border: 1.5px solid #000;
  padding: 10px 14px;
  font-weight: 650;
  letter-spacing: .06em;
}
.detailBack:hover{ background: rgba(0,0,0,.04); }

/* =========================================================
   Ticket Block Structure (with meta info)
========================================================= */

.ticketBlock{
  margin-bottom: 18px;
}


/* 電話番号強調 */
.ticketTel{
  font-weight: 600;
}



.ticketTel span{
  display: block;
  font-size: 12px;
  font-weight: 400;
  opacity: .8;
}

/* ================================
  meigi 
================================ */
.detailCredit{padding: 15px 0; border-bottom: 1px solid #999;
  font-size: 0.9rem;
  letter-spacing: .08em;margin:24px auto;text-align: center;
}


/* ================================
   Ticket vendors (compact + rakuda)
================================ */
.ticketVendors{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.ticketVendor{
  display: flex;
align-items: baseline; 
  gap: 12px;

  padding: 12px 16px;

  border: 1.5px solid #000;
  border-left: 6px solid #ba8d2f;

  background: #fff;

  font-size: 15px;
  font-weight: 700;

  transition: background .2s ease, transform .15s ease;
}

/* ラクダ色の“導線” */
.ticketVendor::before{ position:relative; top:-0.05em; 
  content:"";
  width: 10px;
  height: 10px;
  background: #ba8d2f;
  box-shadow: 0 0 0 2px rgba(189,120,38,.18);
  flex: 0 0 auto;
}


/* CTA */
.ticketVendor__cta{
  margin-left: auto;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  opacity: .9;
}

/* hover */
.ticketVendor:hover{
  background: #f6efe6; /* うっすらラクダベージュ */
  transform: translateY(-1px);
}

.ticketVendor.is-official{
  border-color: rgba(189,120,38,.65);
  box-shadow: 0 0 0 1px rgba(189,120,38,.20) inset;
}


/* =========================================================
  PCimage
========================================================= */
.jrTok_block{
  padding: 60px auto;
  text-align: center;
}

.jrTok_title{
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: .08em;
  margin: 0;
}

/* =========================================
   TOUR ROUTE NAV (detail page)
========================================= */

.prefIndex{
  margin: 34px auto;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,.12);
}

.prefIndex__label{
  font-family: "Oswald", sans-serif;
  letter-spacing: .18em;
  font-size: 12px;
  opacity: .75;
  margin: 0 0 10px;
}

.prefIndex__grid{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/*TOUR　ページ内リンク*/
.prefChip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border: 1px solid rgba(0,0,0,.8);
  font-size: 0.9rem;
  letter-spacing: .06em;
  background: #fff;
  line-height: 1;
  white-space: nowrap;
  transition: transform .15s ease, border-color .15s ease;
}

.prefChip:hover{ 
  color:#fff;background:#ba8d2f;
  
}

.prefChip.is-current{
  border-color: #ba8d2f;
  box-shadow: 0 0 0 1px rgba(189,120,38,.18) inset;
}
.prefChip.is-pending { opacity: .55; border-style: dashed; }


.prefIndex__back{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;

  margin-top: 18px;
  padding: 6px 2px;

  font-family: "Oswald", sans-serif;
  font-size: 14px;
  letter-spacing: .14em;

  color: rgba(0,0,0,.8);
}

/* 左のライン */
.prefIndex__back::before{
  content:"";
  width: 92px;
  height: 1px;
  background: #ba8d2f;
  opacity: .9;
  transition: width .25s ease, opacity .25s ease;
}

/* hover */
.prefIndex__back:hover{
  color: #000;
}
.prefIndex__back:hover::before{
  width: 110px;
  opacity: 1;
}



/* 注釈 ※　*/
.noticeList{
  color: rgba(0,0,0,.6);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.noticeList li{
  line-height: 1.7;
  font-size: 14px;
  opacity: .92;
}

/* テキストリンク（目立ちすぎない・でも分かる） */
.textLink{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.textLink:hover{
  opacity: .75;
}


/* =========================================
   Tablet & SP layout fix (<=1024px)
   TOUR / SCHEDULE
========================================= */
@media (max-width: 1024px){
  .tourSchedule{
    padding-left: 5% !important;
    padding-right: 5% !important;
  }
    
    /* MAIN */
.tourMain{
  border: none;
  background: transparent;
  padding: clamp(14px,2vw, 28px);
  margin: 0 0 26px 0;
}
    
/* 共通 */
.schSvg{
  display:block;margin:auto;
  width:80%;
  height:auto;
}}/**/
/* =========================
   DETAIL TABLE -> SP: stacked
========================= */
@media (max-width: 768px){

  /* detail */
  .detailPage{ padding: 90px 16px 60px; }

  /* jean reno */
  .jrTok_inner{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 30px;
  }

  .detailTable{
    border: 0;
  }

  .detailTable tr{
    display: block;
    padding: 12px 0;
    border-top: 1px solid rgba(0,0,0,.12);
  }
  .detailTable tr:first-child{
    border-top: 0;
  }

  .detailTable th,
  .detailTable td{
    display: block;
    width: 100%;
    border: 0;
    padding: 0;
  }

  .detailTable th{
    margin-bottom: 6px;
    background: transparent;
    font-size: 12px;
    letter-spacing: .08em;
    opacity: .75;
  }

  .detailTable td{
    padding-left: 0;
    font-weight: 500;
    line-height: 1.7;
  }

  .detailTable th::after{ display:none; }

    
    /* =========================================================
   Ticket Block Structure (with meta info)
========================================================= */

  .ticketBlock{
    margin-bottom: 14px;
  }

  .ticketMeta{
    font-size: 12px;
    padding-left: 14px;
  }


  .ticketTel span{
 font-size: 13px;letter-spacing: 0;
  }


    
    
    
  /* TOKYO detail image: hide on SP */
  .jrTok_img{ display:none; }
    
.noticeList li{ font-size: 13px; }
    
    
}/**/


/* 岡山：メタ情報を vendor と同一UIに揃える */
.ticketMetaMain{
  display:flex;
  align-items: baseline;          /* ←ここが肝：文字と■を同じ基準に */
  gap:12px;

  padding:12px 16px;
  border-left:6px solid transparent;

  font-size:15px;
  font-weight:700;
}

/* ■ */
.ticketMetaMain::before{
  content:"";
  width:10px;
  height:10px;
  background:#ba8d2f;
  box-shadow:0 0 0 2px rgba(189,120,38,.18);
  flex:0 0 auto;

  position: relative;             /* ←微調整のため */
  top: -0.05em;                   /* ←ベースラインに対してほんの少し上げる */
}

/* 中身 */
.ticketMetaText{
  min-width:0;
  display:grid;
  gap:4px;
}
.ticketMetaMain .ticketMetaLine{ margin:0; }
.ticketMetaMain .ticketTel{ margin:0; padding-left:0; }




/* =========================
   主催ロゴ（上品余白）
========================= */
.tmt-logo{
  margin: 80px auto 60px;   /* 上多め・下やや少なめ */
  text-align: center;
  max-width: 260px;         /* 少しだけ余裕 */
  opacity: .9;              /* 少し柔らかく */
}

.tmt-logo img{
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

@media (max-width: 768px){

  .tmt-logo{
    margin: 60px auto 40px;
    max-width: 200px;   /* 少し縮小 */
  }

}

