@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&display=swap');

/* 調整 */
/*------------------------------------------------*/
.noteBox{
  border: none;
  padding: 0;
}
.imgBox {
  padding: 0;
  text-align: left;
  background: transparent;
}

/* 共通 */
/*------------------------------------------------*/
#contents{
  background-color: #F6F6F6;
  color: #231F20;
  font-family: "Noto Sans JP", sans-serif;
  padding-bottom: 7.3vw;
}
.switch_pc{
  display: block;
}
.switch_sp{
  display: none;
}
.ancArea{
  width: 41.8vw;
  height: 4.95vw;
}
.ancArea .ancBox{
  display: flex;
  justify-content: space-between;
}
.ancArea .ancBox .box .ancBtn{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 20.3vw;
  height: 4.45vw;
  border: 0.2vw solid #231F20;
  border-radius: 36.37vw;
  box-shadow:0 0.5vw 0 -0.2vw #62BB46, 0 0.474vw 0 0 #231F20;
  font-weight: 700;
  font-size: 1.19vw;
  line-height: 1.35;
  letter-spacing: 0.26em;
  color: #231F20;
  background: #FFDF00;
  text-decoration: none;
  cursor: pointer;
  }
  .ancArea .ancBox .box .ancBtn::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1.8vw;
  width: 0.59vw;
  height: 0.59vw;
  margin: auto;
  border-top: 0.19vw solid #231F20;
  border-right: 0.19vw solid #231F20;
  transform: translateY(-2px) rotate(135deg);
  box-sizing: border-box;
  }
  .ancArea .ancBox .box .ancBtn:hover{
  box-shadow: none;
  top:0.474vw;
  }
#area01{
  scroll-margin-top:-120px;
}
#area02{
  scroll-margin-top:300px;
}

/* topArea */
/*------------------------------------------------*/
.topArea .pageicon{
  width: 21.164021164vw;
  margin: 0 auto;
  padding-top: 2.1825396825vw;
  height: 13.0291005291vw;
  box-sizing: content-box;
}
.topArea .pageTtl{
  margin-top: -0.4vw;
  font-size: 1.9841269841vw;
  font-weight: 700;
/*  line-height: 1.37;*/
  text-align: center;
  letter-spacing: 0.26em;
}
.topArea .ttl_exp{
  margin-top: 2.6455026455vw;
  font-size:1.388vw;
  font-weight: 600;
  line-height:1.9;
  text-align: center;
  letter-spacing: 0.36em;
}
.topArea .ancArea{
  margin: 3vw auto 0 auto;
}

/* 共通 */
/*------------------------------------------------*/
.area_wrap{
  width:80.292vw;
  margin: 0 auto;
  padding:3.2vw 5.88622vw 5.2vw 5.88622vw;
  border-radius:3.968vw ;
  background-color: #fff;
}
.area_wrap .areaTtl{
  font-size: 1.85vw;
  font-weight: 600;
  line-height: 1.64;
  text-align: center;
  letter-spacing: 0.3em;
}
.area_wrap .areaTtl .ttl{
  background: linear-gradient(transparent 60%, #FFDF00 0%);
  display: inline;
}
.area_wrap .areaIcon{
  margin:2.7vw auto 0 auto;
  width: 11.9vw;
  height: 2.82vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #231F20;
  border-radius: 4.96vw;
}
.area_wrap .areaIcon .icon{
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 1.06vw;
  font-weight: 800;
  line-height: 1.51;
  letter-spacing: 0.25em;
  color: #FFF;
  margin-top: 0.12vw;
  padding-left: 0.3vw;
}
.area_wrap .area_exp{
  margin-top: 1.6vw;
  font-size: 1.19vw;
  font-weight: 600;
  line-height: 2.17;
  letter-spacing: 0.31em;
  text-align: center;
}
.area_wrap .flowArea{
  position: relative;
  margin-top: 3vw;
  height: 30.2vw;
}
.area_wrap .flowArea .flow{
  display: flex;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.area_wrap .flow .flowBox{
  width:127.6vw;
  margin-right: 1.177vw;
}
.area_wrap .flow .flowBox:last-child{
  margin-right: 0;
}
.area_wrap .flow .flowBox.flow03{
  width:260.24vw;
}
.area_wrap .flow .flowBox:nth-child(odd) .box01,
.area_wrap .flow .flowBox:nth-child(odd) .box02{
  background-color: #E1FFB7;
}
.area_wrap .flow .flowBox:nth-child(even) .box01,
.area_wrap .flow .flowBox:nth-child(even) .box02{
  background-color: #F3F3F3;
}
.area_wrap .flow .flowBox.flow01 .box01{
  background-color: #fff;
}
.area_wrap .flow .flowBox.flow03 .box01{
  background-color: #62BB46;
}
.area_wrap .flow .flowBox .box01{
  height: 2.51vw;
  padding-top: 0.3vw;
  margin-bottom: 0.8vw;
  border-radius: 0.66vw;
  font-weight: 700;
  font-size: 0.93vw;
  line-height: 2;
  letter-spacing: 0.17em;
  text-align: center;
}
.area_wrap .flow .flowBox .box02{
  border-radius: 1.98vw;
  padding: 2vw 1.52vw;
  height: 27vw;
  position: relative;
}
.area_wrap .flow .flowBox.flow03 .box02{
  display: flex;
  justify-content: space-between;
}
.area_wrap .flow .flowBox.flow03 .box02 .inner{
  width:42.4%;
  box-sizing: content-box;
}
.area_wrap .flow .flowBox.flow03 .box02 .inner:nth-child(2n){
  border-left: 0.26vw solid #fff;
  padding-left: 1.8vw;
}
.area_wrap .flow .flowBox .box02 .txtBox01{
  border-radius: 6.613vw;
  background-color: #fff;
  font-weight: 700;
  font-size: 0.93vw;
  line-height: 1.2;
  text-align: center;
  letter-spacing: 0.19em;
  height: 3vw;
  padding-top: 0.25vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.area_wrap .flow .flowBox.flow01 .box02 .txtBox01{
  padding-top: 0;
}
.area_wrap .flow .flowBox .box02 .txtBox01 .note{
  display: block;
  font-size: 0.72vw;
  line-height: 1.82;
  letter-spacing: 0.15em;
}
.area_wrap .flow .flowBox .box02 .txtBox02{
  font-size: 0.859vw;
  font-weight: 700;
  line-height: 1.54;
  letter-spacing: 0.15em;
  text-align: center;
  margin-top: 1.4vw;
}
.area_wrap .flow .flowBox .box02 .txtBox03{
  font-weight: 500;
  font-size: 0.93vw;
  line-height:1.93;
  letter-spacing: 0.06em;
  margin-top:1.1vw;
  text-align: justify;
}
.area_wrap .flow .flowBox .box02 .txtBox04{
  font-weight: 500;
  font-size: 0.72vw;
  line-height: 1.73;
  letter-spacing: 0.15em;
  /*position: absolute;
  bottom: 1.6vw;*/
  padding-top: 1.2vw;
}
.area_wrap .flowBox.flow01 .box02 .txtBox04{
  padding-top: 4vw;
}
.area_wrap .flow .flowBox .box02 .imgBox01{
  padding-top: 0.4vw;
  box-sizing: content-box;
}
.area_wrap .flow .flowBox .box02 .imgBox01 img {
  width: 95%;
  margin: 0 auto;
  display: block;
}
.area_wrap .flow .flowBox.flow02 .box02 .imgBox01,
.area_wrap .flow .flowBox.flow04 .box02 .imgBox01{
  padding-right: 14%;
}
.area_wrap .flow .flowBox.flow03 .box02 .imgBox01{
  padding-top: 0.5vw;  
}
.area_wrap .flow .flowBox.flow03 .box02 .imgBox01 img{
  width: 88%;
  padding-right: 11%;
  box-sizing: content-box;
}
.area_wrap .flow .flowBox.flow01 .box02 .imgBox01{
  width: 69%;
  padding: 1.2vw 0 0 2.7vw;
  box-sizing: content-box;
}
.area_wrap .flowArea .flowicon{
  width: 6.8vw;
  position: absolute;
  top: 0.7vw;
  left: 24.9vw;
  z-index: 2;
}
.area_wrap .flowArea .bg_arrow{
  width: 100%;
  position: absolute;
  top: 15.5vw;
  right: -4%;
  z-index: 0;
}

/* ご乗車方法 */
/*------------------------------------------------*/
#area01.area_wrap{
  margin-top: 4vw;
  margin-bottom: 4vw;
  position: relative;
}
#area01.area_wrap::after{
  content: '';
  background: url(../img/chara_img01_pc.png) no-repeat;
  position: absolute;
  bottom:-6vw;
  left:-6vw;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 15.2vw;
  height: 15.2vw;
  z-index: 10;
}
.case02.area_part{
  margin-top: 4.25vw;
  padding-top: 1.72vw;
  border-top: 0.26vw solid #EAEAEA;
}
.case02 .flowArea{
  height: 41vw;
}
.case02 .flowArea .flow .flowBox .box02 .txtBox03.ft_adj{
  letter-spacing: -0.03em;
}
.fukiBox{
  font-weight: 500;
  font-size: 0.93vw;
  line-height: 1.64;
  letter-spacing: 0.08em;
  color: #fff;
  text-align: justify;
  --background-color: #F35C5C; /* 吹き出しの色 */
  --border-color: #F35C5C; /*線の色 */
  --pick-size:3vw; /* 飛び出しのサイズ */
  --pick-radius:1.325vw; /* 飛び出しの丸め */
  --pick-thin: 0.2; /* 飛び出しの幅 */
  background-color: var(--background-color);
  border-radius:0.66vw;
  padding:0.99vw 1.653vw 0.8vw 1.653vw;
  position: absolute;
  top: 31.2vw;
  width: 40.5vw;
  right:20.4%;
}
.fukiBox .note{
  font-size: 0.72vw;
  line-height:2.45;
  letter-spacing: 0.08em;
}
.fukiBox::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-style: solid;
  border-color:var(--border-color) transparent transparent var(--border-color);
  right: -0.2vw;
  top: -2.1vw;
  border-width: var(--pick-size);
  border-radius:calc(var(--pick-radius)*1.5)  0px 0px 0px;
  transform: scaleX(var(--pick-thin)) rotate(45deg);
}

/* ご注意ください */
/*------------------------------------------------*/
.attArea{
  border: 0.26vw solid #F2F1F1;
  padding:1.2vw 2vw 2.4vw 2vw;
}
.attArea .ttlBox{
  text-align:center;
  margin-bottom: 1vw;
}
.attArea .ttlBox .ttl{
  position: relative;
  display: inline-block;
  padding-left: 3vw;
  font-weight: 600;
  font-size: 1.124vw;
  line-height: 1.88;
  letter-spacing: 0.29em;
}
.attArea .ttlBox .ttl::before{
  content: '';
  background: url(../img/icon_attention.png) no-repeat;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  left: 0;
  width: 2.2vw;
  height: 2.2vw;
}
.attArea .txtBox{
  font-weight: 500;
  font-size: 0.859vw;
  line-height: 2.08;
  letter-spacing: 0.04em;
  text-align: justify;
}

/* ご利用可能な新幹線の乗車区間 */
/*------------------------------------------------*/
#area02.area_wrap{
  padding-top: 4.3vw;
  padding-bottom: 3.2vw;
  position: relative;
}
#area02.area_wrap::after {
  content: '';
  background: url(../img/chara_img02_pc.png) no-repeat;
  position: absolute;
  bottom: -8vw;
  right: -7.8%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 17.2vw;
  height: 15.2vw;
  z-index: 10;
}
.ttl_icon{
  text-align: center;
  margin-top: 1.6vw;
}
.ttl_icon .iconBox{
  width: 9.8vw;
  padding: 0.5vw 0.5vw 0.65vw 0.9vw;
  border-radius: 3.3vw;
  display: inline-block;
  background-color: #DFDFDF;
  font-weight: 700;
  font-size: 0.99vw;
  line-height: 1.2;
  letter-spacing: 0.19em; 
}
.ride_attArea{
  border: 0.26vw solid #F2F1F1;
}
.ride_attArea.exArea01{
  padding:2.9vw 2.7vw 2.6vw 2.7vw;
}
.ride_attArea.exArea02{
  margin-top:1.8vw;
  padding:3.3vw 3.64vw 3.2vw 3.64vw;
}
.ride_attArea.exArea02 a{
  color: #231F20;
  text-decoration: underline;
  text-underline-offset: 0.4vw;
}
.ride_attArea .ttlBox{
  background-color: #231F20;
  text-align: center;
}
.ride_attArea .ttlBox .ttl{
  color: #FFF;
  font-weight: 500;
  font-size: 1.256vw;
  line-height: 1.68;
  letter-spacing: 0.18em;
  position: relative;
  padding: 0.8vw 0 0.88vw 3vw;
  display: inline-block;
}
.ride_attArea.exArea01 .ttlBox .ttl::before{
  content: '';
  background: url(../img/icon_attention.png) no-repeat;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transform: translateY(-50%);
  position: absolute;
  top: 49%;
  left: 0;
  width: 2.2vw;
  height: 2.2vw;
}
.ride_attArea.exArea01 .detailBox{
  display: flex;
  justify-content:space-between;
  margin-top: 1.7vw;
}
.ride_attArea.exArea01 .detailBox .ex_box{
  width: 48%;
}
.ride_attArea.exArea01 .detailBox .txtBox{
  font-weight: 500;
  font-size: 0.99vw;
  line-height:1.67;
  letter-spacing: 0.14em;
  text-align: justify;
}
.ride_attArea.exArea01 .detailBox .txtBox .txt{
  text-indent: -2em;
  padding-left: 2em;
}
.ride_attArea.exArea01 .detailBox .imgBox{
  margin-top: 1.5vw;
}
.ride_attArea.exArea01 .detailBox .noteBox{
  font-weight: 400;
  font-size: 0.8vw;
  line-height: 1.5;
  letter-spacing: 0.03em;
  margin-top: 0.8vw;
  text-align: justify;
}
.ride_attArea.exArea02 .ttlBox .ttl{
  padding-left: 0;
}
.ride_attArea.exArea02 .detailBox{
  margin-top: 1.7vw;
  font-weight: 500;
  font-size:0.859vw;
  line-height: 1.69;
  letter-spacing: 0.07em;
  text-align: justify;  
}
.ride_attArea.exArea02 .detailBox li{
  margin-bottom:0.3vw;
}
.ride_attArea.exArea02 .detailBox .note{
  margin-top: 0.2vw;
}
.ride_attArea.exArea02 .detailBox .note li{
  font-weight: 400;
  font-size: 0.859vw;
  line-height:1.54;
  letter-spacing: 0.07em;
  margin-bottom: 0.2vw;
}
.ride_attArea.exArea02 .detailBox .inner{
  margin-top: 0.4vw;
  margin-bottom: 0.55vw;
}
.ride_attArea.exArea02 .detailBox .inner li{
  font-weight: 400;
  font-size: 0.859vw;
  line-height:1.54;
  letter-spacing: 0.07em;
  margin-bottom: 0;
}
.ride_attArea.exArea02 .detailBox .red{
  color: #E55B5B;
}
.ride_attArea .yBox{
  background-color: #FFF9CE;
  font-weight: 400;
  font-size: 0.8vw;
  line-height: 1.75;
  letter-spacing: 0.06em;
  margin-top: 2.2vw;
  padding: 1.2vw 1.2vw 1vw 1.2vw;
  text-align: justify;
}
.ride_attArea .yBox .ttl{
  font-weight: 700;
  font-size: 1.06vw;
  line-height: 2;
  letter-spacing: 0.26em;
}
.ride_attArea.exArea02 .yBox{
  margin-top: 1.8vw;
  padding:1vw 2vw 1.2vw 2vw;
  font-size: 0.859vw;
  line-height: 1.69;
  letter-spacing: 0.07em;
}
.ride_attArea.exArea02 .yBox .ttl{
  margin-bottom: 0.35vw;
}

/* マップエリア */
/*------------------------------------------------*/
.mapArea{
  --color-areamap-01: #00A29F;
  --color-areamap-02: #ED494D;
  --color-areamap-03: #6D49A0;
  --color-areamap-04: #004DA3;
  --color-areamap-05: #C99580;
  --color-areamap-all: #62BB46;
}
.mapArea{
  width: 56.87vw;
  padding: 2.8vw 0 5.0vw 0;
  margin: 0 auto 0 auto;
}
.mapArea .txtArea{
  width: 45.5697vw;
  font-weight: 500;
  font-size: 0.72vw;
  line-height: 1.55;
  letter-spacing: 0.21em;
  margin: 0 auto 0 auto;
}
/*................*/
.tab-wrap{
}
.tab-list {
  display: flex;
  justify-content: space-between;
  width: 45.5697vw;
  padding: 1vw 0 0.7vw 0;
  margin: 0 auto 0 auto;
}
.tab-item {
  width: 8.2675vw;
  aspect-ratio: 250/212;
  text-align: center;
  cursor: pointer;
}
.tab-item.lock {
  cursor: default;
}
.tab-item .imgBox{
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width:100%;
  height: 100%;
  margin: 0 auto 0 auto;
}
/*................*/
.panel-list{
  position: relative;
}
.panel-field {
  position: relative;
}
.panel-item {
  padding: 2.314vw 3.968vw 5.357vw 3.968vw;
  width: 100%;
  border-radius: 3.3vw;
}
.panel-item.ready {
  display: none;
}
.panel-item.curr {
  display: block;
}
.panel-item.panel-00 {
  background-color: var(--color-areamap-all);
}
.panel-item.panel-01 {
  background-color: var(--color-areamap-01);
}
.panel-item.panel-02 {
  background-color: var(--color-areamap-02);
}
.panel-item.panel-03 {
  background-color: var(--color-areamap-03);
}
.panel-item.panel-04 {
  background-color: var(--color-areamap-04);
}
.panel-item.panel-05 {
  background-color: var(--color-areamap-05);
}
.panel-skin {
  position: relative;
  width: 100%;
  aspect-ratio: 2460/3800;
  overflow: hidden;
  border-radius: 2.64vw;
  background-color: #fff;
}
/*................*/
.panel-map {
  position: relative;
  width: 100%;
  height: 100%;
}
.panel-fig {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: move;
}
.panel-fig figure {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}
.panel-item.panel-00 .panel-fig figure {
  background-image: url(../img/map00.jpg);
}
.panel-item.panel-01 .panel-fig figure {
  background-image: url(../img/map01.jpg);
}
.panel-item.panel-02 .panel-fig figure {
  background-image: url(../img/map02.jpg);
}
.panel-item.panel-03 .panel-fig figure {
  background-image: url(../img/map03.jpg);
}
.panel-item.panel-04 .panel-fig figure {
  background-image: url(../img/map04.jpg);
}
.panel-item.panel-05 .panel-fig figure {
  background-image: url(../img/map05.jpg);
}
/*................*/
.panel-control {
  position: absolute;
  aspect-ratio: 1/2;
}
.panel-control .zoom {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%; 
  overflow: hidden;
}
.panel-control .zoom.zoom-in {
  top: -1%;
}
.panel-control .zoom.zoom-out {
  bottom: -1%;
}

.panel-control .zoom .wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #000;
  border-radius: 8%;
}
.panel-control .zoom .wrap .char {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
  font-size: 0;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% auto;
}
.panel-control .zoom.zoom-in .wrap .char {
  background-image: url(../img/mark_plus_02.svg);
}
.panel-control .zoom.zoom-out .wrap .char {
  background-image: url(../img/mark_minus_02.svg);
}
.panel-control .zoom .hitelm {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0.2;
  cursor: default;
}
.panel-control .zoom.active .hitelm {
  opacity: 1;
  cursor: pointer;
}
/*................*/
.panel-button {
  position: absolute;
  left: 0;
  bottom: 4.0vw;
  width: 100%;
  height: 0;
  text-align: center;
}
.panel-button .select-all {
  display: inline-block;
  vertical-align: top;
  width: 11.441vw;
  height: 2.58vw;
  border-radius: 2.58vw;
  background-color: #000;
  font-weight: 700;
  font-size: 1.12vw;
  letter-spacing: 0.34em;
  color: #fff;
  cursor: pointer;
}
.panel-button .select-all.curr {
  color: #535353;
  cursor: default;
}
