@charset "utf-8";

/* CSS Document */

/* ----- DPでお手頃に東京へ ----- */
.routemap{
  width: 100%;
  height: 700px;
  background-image: url(/content/dam/jretravel/site/page/shutoken/images/routemap.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  position: relative;
  aspect-ratio: 16 / 9;
}

.routemap a{
  text-decoration: none;
  }

.routemap button {
  padding: 4px 15px;
  border: 1px solid #000;
  font-weight: bold;
  font-size: 2.3rem;
  border-radius: 5px;
  position: absolute;
  transform: translate(-50% , -50%);
  transition: 0.2s;
  cursor: pointer;
  line-height: 1.4;
  letter-spacing:0.06em;
}

.odaiba button{
  font-size: 1.8rem;
  text-align: start;
  padding: 8px 17px;
  letter-spacing:0;
}

button.daiba,
button.harajuku{
  border: none;
  padding: 0;
  background-color: #fff;
  font-size: 1.6rem;
}

/* ボタンカラーセット */
.ueno button{
  background-color: #ffe583;
  border-color: #6b540a;
}
.tokyo button{
  background-color: #ff9c86;
  border-color: #721809;
}
.ginza button{
  background-color: #de8dff;
  border-color: #510575;
}
.odaiba button{
  background-color: #a3c8ff;
  border-color: #084184;
}
.odaiba button.daiba{
  background-color: #fff;
}
.sibuya button{
  background-color: #ef8ea2;
  border-color: #560a1c;
}
.sibuya button.harajuku{
  background-color: #fff;
}
.sinjuku button{
  background-color: #91f57f;
  border-color: #18660a;
}

/* ポップアップ */
.station_box{
  padding-bottom: 20px;
  font-size: 1.8rem;
  border-radius: 20px;
  width: fit-content;
  position: absolute;
  font-size: 1.2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease;
  z-index: 10;
}

  .station_ttl{
    padding: 3px 20px;
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
    background-color: #c6c6c6;
    border-radius: 20px 20px 0 0 ;
  }
  .station_box a {
  color: #000;
  position: relative;
  transition: .2s;
}
a.station_btn {
    font-size: 1.8rem;
    text-decoration: underline;
}
.station_content{
  display: flex;
  flex-wrap: wrap;
  max-width: 280px;
  padding: 13px 20px 10px;
  column-gap: 40px;
  row-gap:4px;
  font-weight: bold;
  font-size: 2rem;
  position: relative;
}
.station_content a{
  display: flex;
  align-items: center;
  width: fit-content;
  padding-left: 0.8em;
}

.station_content a::before{
    color: #a52a2a;
    content: "";
    position: absolute;
    top: -1px;
    bottom: 0;
    margin: auto;
    left: 0;
    width: 0.7em;
    height: 0.7em;
    border: .2em solid currentColor;
    border-radius: 100% 100% 0 100%;
    background: radial-gradient(circle at 50% 50%, transparent 70%, currentColor 70%) no-repeat;
    box-sizing: border-box;
    transform: rotate(45deg);
}
.station_btn::after,
.station_content a::after {
  position: absolute;
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  transform: rotate(45deg);
  top: 40%;
  right: -12px;
}
.station_btn::after{
  right: 18px;
}

.station_btn{
  text-decoration: underline;
  padding: 0 30px 0 20px;
}
.sibuya .station_btn{
  font-size: 1.4rem;
}

  .triangle {
    position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 26px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 0;
  z-index: -1;
  bottom: 12%;
  left: -15%;
}
.triangle01 {
    position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 26px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 0;
  z-index: -1;
  bottom: 12%;
  right: -15%;
}

/* ポップアップカラー */
 .ueno .station_ttl{
  background-color: #ffe583;
 }
 .ueno .station_box{
  background-color: #fff8e0;
 }
 .ueno .triangle{
  border-right: 48px solid #fff8e0;
 }
 .tokyo .station_ttl{
  background-color: #ff9c86;
 } 
 .tokyo .station_box{
  background-color: #ffe6e0;
 }
 .tokyo .triangle{
  border-right: 48px solid #ffe6e0;
 }
 .ginza .station_ttl{
  background-color: #de8dff;
 }
 .ginza .station_box{
  background-color: #f6e0ff;
 }
 .ginza .triangle{
  border-right: 48px solid #f6e0ff;
 }
 .odaiba .station_ttl{
  background-color: #a3c8ff;
 }
 .odaiba .station_box{
  background-color: #e0edff;
 }
 .odaiba .triangle{
  border-right: 48px solid #e0edff;
 }
 .sibuya .station_ttl{
  background-color: #ef8ea2;
 }
 .sibuya .station_box{
  background-color: #ffe0e7;
 }
 .sibuya .triangle01{
  border-left: 48px solid #ffe0e7;
 }
 .sinjuku .station_ttl{
  background-color: #91f57f;
 }
 .sinjuku .station_box{
  background-color: #e5ffe0;
 }
 .sinjuku .triangle01{
  border-left: 48px solid #e5ffe0;
 }

/* ポップアップ位置調整 */
.ueno .station_box { top: 19%; right: 21%; }
.tokyo .station_box { top: 37%; right: 20%; }
.ginza .station_box { bottom: 19%; right: 20%; }
.odaiba .station_box { bottom: 6%; right: 17%; }
.sibuya .station_box { top: 42%; left: 21%; }
.sinjuku .station_box { top: 6%; left: 19%; }


.map_list li:hover .station_box,
.map_list li.active .station_box {
  opacity: 1;
  visibility: visible;
}
.routemap_sp{
  display: none;
}

/*----- hover -----*/

@media (any-hover: hover) {

.ueno button:hover{
  background-color: #fff8e0;
  border-color: #ffe583;
  color: #ffe583;
}
.tokyo button:hover{
  background-color: #ffe6e0;
  border-color: #ff9c86;
  color: #ff9c86;
}
.ginza button:hover{
  background-color: #f6e0ff;
  border-color: #de8dff;
  color: #de8dff;
}

.odaiba .odaiba_area:hover button{
  background-color: #e0edff;
  border-color: #a3c8ff;
  color: #a3c8ff;
}
.odaiba .odaiba_area:hover .daiba {
  background-color: #fff;
  color: #a3c8ff; 
}
.sibuya .sibuya_area:hover button{
  background-color: #ffe0e7;
  border-color: #ef8ea2;
  color: #ef8ea2;
}
.sibuya .sibuya_area:hover .harajuku{
  background-color: #fff;
  color: #ef8ea2;
}
.sinjuku button:hover{
  background-color: #e5ffe0;
  border-color: #91f57f;
  color: #91f57f;
}
.station_btn:hover,
.station_content a:hover{
  opacity: 0.7;
}
.station_content a:hover{
  text-decoration: none;
}

}

/*----- PCのみ -----*/
/* ボタン位置調整 */
@media (min-width: 1602px) {
  .ueno button { top: 33%; right: 35%; }
  .tokyo button { top: 64%; right: 35.5%; }
  .ginza button { bottom: 19%; right: 35%; }
  .odaiba button { bottom: -5%; right: 29.5%; }
  .odaiba button.daiba { bottom: 10%; right: 45%; }
  .sibuya button { top: 62%; left: 40%; }
  .sibuya button.harajuku { top: 54%; left: 37.5%; }
  .sinjuku button { top: 39%; left: 39%; }
}

/* 1280px */
@media (max-width: 1601px) {
  .ueno button { top: 33%; right: 30%; }
  .tokyo button { top: 64%; right: 31%; }
  .ginza button { bottom: 19%; right: 30%; }
  .odaiba button { bottom: -5%; right: 23%; }
  .odaiba button.daiba { bottom: 10%; right: 43.5%; }
  .sibuya button { top: 62%; left: 36.5%; }
  .sibuya button.harajuku { top: 54%; left: 33.5%; }
  .sinjuku button { top: 39%; left: 35.5%; }
  
/* ポップアップ位置調整 */
.ueno .station_box { top: 19%; right: 11%; }
.tokyo .station_box { top: 37%; right: 10%; }
.ginza .station_box { bottom: 19%; right: 10%; }
.odaiba .station_box { bottom: 6%; right: 6%; }
.sibuya .station_box { top: 42%; left: 12%; }
.sinjuku .station_box { top: 6%; left: 11%; }
}


@media screen and (min-width: 768px) {

}
/*----- SPのみ -----*/

@media (max-width: 767px) {
.routemap{
  background-image: none;
  height: unset;
}
.routemap_sp{
  display: block;
}
.routemap button{
  display: none;
}
.station_box{
  position: unset;
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.station_box .triangle01,
.station_box .tringle{
  display: none;
}
.map_list{
  margin: 10px auto;
  width: 96%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.station_ttl{
  padding: 5px 0;
  font-size: 1.4rem;
}
.sibuya .station_ttl{
  font-size: 1.2rem;
}
.sibuya .station_btn{
  font-size: 1.2rem;
}
.station_content{
  margin-bottom: auto;
  padding: 10px;
  column-gap: 30px;
  font-size: 1.4rem;
}
a.station_btn{
  padding: 0 0 0 10px;
  font-size: 1.2rem;
}
.station_btn::after{
  content: unset;
}
 .station_content a::after{
  top: 34%;
  right: -10px;
 }
 
/* 駅リスト入れ替え */
.map_list .sinjuku{
  order: 1;
}
.map_list .ueno{
  order: 2;
}
.map_list .sibuya{
  order: 3;
}
.map_list .odaiba{
  order: 4;
}

}

.map_list li button {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.routemap.ready .map_list li button {
  opacity: 1;
}


/* ----- 受験生コーナー ----- */

  :root {
  --red: #ad251a;
}

  .juken{
    background-image: url(/content/dam/jretravel/site/page/shutoken/images/juken2025_bg01.png),url(/content/dam/jretravel/site/page/shutoken/images/juken2025_bg02.png),url(/content/dam/jretravel/site/page/shutoken/images/juken2025_bg01.png),url(/content/dam/jretravel/site/page/shutoken/images/juken2025_bg02.png);
    background-repeat: no-repeat, no-repeat,no-repeat,no-repeat;
    background-position: top left , top right, bottom left -10px , bottom right -10px;
    background-size: 33%,33%,25%,25%;
    padding-bottom: 50px;
  }
  .juken_h2{
    text-align: center;
    margin-bottom: 30px;
  }
.juken_h3{
  text-align: center;
  margin-bottom: 20px;
}

.juken_h3 img{
  padding: 4px 4px 0 0;
}

.juken .swiper-container .swiper-button-next:after, .juken .swiper-container .swiper-button-prev:after{
  color: var(--red);
}
.juken .base_prod.bdr li{
  border-color: var(--red);
  border-radius: 10px;
}
.btn_red{
  background-color: var(--red);
  color: #fff;
}
.txt_wrapper{
  max-width: 700px;
  margin: 0 auto 20px;
}
.block{
  display: block;
  font-weight: bold;
  font-size: 1.6rem;
}
.juken_btn a {
  display: block;
  max-width: fit-content;
  width: 100%;
  font-size: 1.6rem;
  color: #fff;
  background: var(--red);
  padding: 12px 60px 12px 40px;
  font-weight: bold;
  border-radius: 5px;
  position: relative;
  margin: auto;
  line-height: 1.2;
  transition: .2s;
    text-decoration: none;
}

.juken_btn a::before {
  position: absolute;
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  top: 50%;
  right: 20px;
  margin-top: -4px;
}

.juken .btn_wrapper .productButton .btn_box>a{
  display: flex;
  align-items: center;
  height: 50px;
}

.juken .productButton .btn_box>a>.btn_box_r>.arrow-right {
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}
.juken .productButton .btn_box.f_sm>a>.btn_box_l>.btn_inner>.btn_ttl{
  font-size: 1.4rem;
  padding: 0 39px ;
  text-align: start;
  white-space: normal;
  word-break: keep-all;
  text-wrap: balance;
}

.juken .space{
margin:30px auto;
}
.juken_btn01 a{
max-width: 250px;
  padding: 8px 50px 8px 40px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
  .juken_area{
    margin-top: 50px;
  }
  .juken_area .txt_wrapper{
    max-width: fit-content;
  }

.juken .base_prod .hotel li{
padding: unset;
overflow: hidden;
}
.juken .details_box {
   padding: 0 10px 10px;
}


  @media (any-hover: hover) {
  .juken_btn a:hover {
    opacity: 0.8;
    text-decoration: none;
  }
}
@media screen and (max-width: 767px) {
  .br_pc{
    display: none;
  }
  .juken{
    background-size: 35%;
    background-position: top 50px left -10px,top 50px right -10px,bottom 10px left -10px,bottom 10px right -10px;
  }
  .juken_h2{
    margin-bottom: 10px;
  }
  .juken_h2 img{
    width: 88%;
  }
  .juken_h3{
    font-size: 1.8rem;
  }
  .juken_h3 img{
    width: 33px;
  }
  .txt_wrapper{
    width: 94%;
    margin-bottom: 5px;
  }
  .block{
    font-size: 1.4rem;
  }
  
.btn_wrapper{
  margin: 0 auto;
  width: 96%;
  grid-template-columns: repeat(2,1fr);
}
.juken .w94{
  width: 94%;
  margin: 0 auto;
}
.juken .productButton .btn_box.f_sm>a>.btn_box_l>.btn_inner>.btn_ttl{
  padding: 0;
  margin: 0  auto;
  width: 140px;
}
.juken_btn01 a{
  padding: 10px 32px 10px 15px;
  font-size: 1.4rem;
}
.juken_btn a.f_sm{
  font-size: 1.1rem;
}

.juken .base_prod .hotel{
width: 98%;
margin: unset;
margin-left: auto;
}
.juken .base_prod.clm3 li{
max-width: 350px;
width: 100% !important;
}
}