

.contentWrap {
  background-position:0 0;
}


.category {
  margin-top: min(10vw,172px);
}


/* ----------------------- .paragraph_title 段落タイトル ----------------------- */

.paragraph_title_h2 {
  font-size: min(2.6vw , 28px);
  margin-bottom: 1.4em;
  line-height: 1.7em;
  letter-spacing: 0.1em;
}
.paragraph_title_h2_margin {
  margin-top: min(6.81vw , 70px);
}

.paragraph_title_h3 {
  font-size: min(2.22vw , 24px);
  letter-spacing: 0.1em;
  margin-bottom: 1em;
  line-height: 1.7em;
}
.paragraph_title p {
    line-height: 2.2em;
  }



.bunkatu {
  border: 1px solid rgba(255,255,255,0.3);
  margin-top: min(10vw,172px);
  margin-bottom: min(10vw,172px);
}

/* ================ SP ================ */
@media screen and (max-width: 767px) {
  .paragraph_title_h2 {
    font-size: 5vw;
  }
  .paragraph_title_h3 {
    font-size: 4.5vw;
  }
.paragraph_title_h3_margin {
  margin-top: 0;
}
  .paragraph_title p {
    font-size: 3.3vw;
  }
}
/* ----------------------- / .paragraph_title 段落タイトル ----------------------- */







/* -----------------------  #root_map 路線図 ----------------------- */
#root_map {
  width: min(55.19vw , 596px);
  margin-left: auto;
  margin-right: auto;
  margin-top: min(10vw,172px);
}
/* ================ SP ================ */
@media screen and (max-width: 1000px) {
  #root_map {
    width: 80%;
  }
}
/* ================ SP ================ */
@media screen and (max-width: 767px) {
  #root_map {
    width: 96%;
  }
  #root_map .ann {
    text-align: left;
  }
}
/* ----------------------- / #root_map 路線図 ----------------------- */










/* ----------------------- 埼玉高速鉄道埼玉スタジアム線「鳩ヶ谷」駅から ----------------------- */

.train_saitama {
  margin-top: min(10vw,108px);
}

.train_wrap {
  display: flex;
  justify-content: space-between;
}
.train_saitama > div:last-of-type {
  margin-top: min(6.11vw , 66px);
}

.train_catch {
  margin-right: min(3.33vw , 36px);
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.train_catch > div {
  height:calc(100% - 2px);
  width: calc(100% - 2px);
  display: flex;
  justify-content: center;
  align-items: center;
}
.train_catch span {
  color: #fff;
  writing-mode:vertical-rl;
}

.train_catch_red  {background-color: #6a1014;}
.train_catch_blue {background-color: #27436a;}

.train_catch_red  > div {border: 1px solid rgba(255,255,255,0.4);}
.train_catch_blue > div {border: 1px solid rgba(255,255,255,0);}

.train_catch_red  > div > span {letter-spacing: 0.8em;font-size: 140%;}
.train_catch_blue > div > span {letter-spacing: 0.3em;}
/*-----*/

.train_saitama1_wrap,
.train_saitama2_wrap{
  display: flex;
  justify-content: space-between;
  gap:min(3.33vw,36px);
}


.train_saitama .pageCaption {
  width: 100%;
  margin:min(3.7vw,30px) auto 0;
}
/* ================ 1000 ================ */
@media screen and (max-width: 1000px) {
  .train_saitama1_wrap,
  .train_saitama2_wrap{
    gap:min(1.5vw,18px);
  }
  .train_catch {
    margin-right:min(1.5vw,18px);
  }
  .train_catch_blue > div > span {letter-spacing: 0.05em;}
}
/* ================ SP ================ */
@media screen and (max-width: 767px) {
  .train_saitama .paragraph_title_h2 {
    letter-spacing: 0.03em;
  }
  .train_saitama1_wrap{
    gap:0;
    flex-direction: column;
  }
  .train_saitama1_wrap > div:not(:first-of-type) {
  margin-top: 5vw;
  }
  .train_saitama1_wrap > div > img {
    width: 75%;
  }

/*-----*/

  .train_catch_green {margin-top:min(10vw,108px);}

  .train_saitama2_wrap {
    flex-wrap: wrap;
  }
  .train_saitama2_wrap > div {
    width: 48%;
  }
}

/* ----------------------- / 埼玉高速鉄道埼玉スタジアム線「鳩ヶ谷」駅から ----------------------- */











/* ----------------------- 通勤時間帯 ----------------------- */
.commute {
  margin-top: min(10vw,172px);
}
.commute .gold1 {color:#c9b689;}
.commute .gold2 {color:#ccbb5f;}

.commute h2 {
  background-color: #236;
  text-align: center;
  padding: 0.3em 0;
  letter-spacing: 0.2em;
}
.commute h2 small {
  font-size: 60%;
}
.commute h2 span:last-of-type {
  font-size: 150%;
}
.commute_wrap {
  display: flex;
  align-items: flex-start;
  background-color: #333;
  gap: min(4.65vw,80px);
}
.commute_wrap > figure {
  width: min(38.37vw,660px);
}
.commute_wrap > div {
  width: min(35.35vw,608px);
}
.commute_wrap h3 {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.commute_time {
  margin: min(1.3vw , 13px) 0;
}
.commute_wrap > div .gold2 {
  font-size: 140%;
}

/* ================ 1200 ================ */
@media screen and (max-width: 1200px) {
  .commute_wrap > figure {
    width: 45vw;
  }
  .commute_wrap > div {
    width: 45vw;
  }
  .commute_wrap > div .ann {
    margin-bottom: 0.3em;
  }
}
/* ================ SP ================ */
@media screen and (max-width: 767px) {
  .commute_wrap {
    flex-direction: column;
    gap:0;
  }
  .commute h2 {
    line-height: 1.9em;
  }
  .commute_wrap > figure {
    width: 100vw;
  }
  .commute_wrap > div {
    width: 96vw;
    margin-left: auto;
    margin-right: auto;
  }
  .commute_wrap > div p {
    font-size: 3.3vw;
  }
  .commute_time {
    margin: min(3vw , 36px) 0;
  }
}

/* ----------------------- / 通勤時間帯 ----------------------- */













/* ----------------------- シミュレーション ----------------------- */

.simulation {
  background-color: #111733;
  margin-top: min(10vw,172px);
  text-align: center;
}

.simulation_wrap {
  padding: min(5vw,54px) 0;
}
.simulation_wrap h2 {
  margin-bottom: 1em;
}
.simulation_wrap p {
  margin-bottom: 2em;
}
.simulation_wrap img {
  margin-bottom: min(1.39vw , 15px);
}


/* ================ SP ================ */
@media screen and (max-width: 767px) {
  .simulation_wrap h2 {
    line-height: 1.8em;
    letter-spacing: 0.1em;
  }
}

/* ----------------------- / シミュレーション ----------------------- */





/* ----------------------- 身近に利用できるバスアクセス ----------------------- */
.bus {
}
.bus > h2 {
  border-bottom: 1px solid rgba(255,255,255,0.7);
  margin-top: min(15vw,162px);
  margin-bottom: 0.7em;
}
.bus_wrap {
  display: flex;
  justify-content: space-between;
  gap: min(3.704vw,40px);
  margin-bottom: min(6.81vw , 70px);
}
.bus_wrap h3 {
  letter-spacing: 0.2em;
}
.bus_wrap p {
  margin-bottom: 1em;
}
.bus_left {
  width: min(64.815vw,700px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.bus_map.pc {
  width: min(31.481vw,340px);
}
.bus1_ph {
  display: flex;
  justify-content: space-between;
  gap: min(0.741vw,8px);
}
/*-----*/
.ion_wrap {
  display: flex;
  justify-content: space-between;
  gap: min(2.78vw,30px);
}
.ion_wrap div:last-of-type {
  width: min(40.74vw,440px);
}
/*-----*/
.bus_fig2 {
  display: flex;
  justify-content: space-between;
}
.bus_fig2 img {
  width: min(31.481vw,340px);
}
/*-----*/

.bus .pageCaption {
  margin:min(3.7vw,30px) auto 0;
  width: 100%;
}
.bus .pageCaption li{
  text-align: right;
}
/* ================ 1200 ================ */
@media screen and (max-width: 1200px) {
  .bus_wrap {
    gap: min(1.39vw,15px);
  }
  .ion_wrap {
    gap: min(1.39vw,15px);
  }
  .bus_fig2 img {
    width: 32%;
  }
}

/* ================ SP ================ */
@media screen and (max-width: 767px) {
  .bus_wrap h3 {
    letter-spacing: 0.1em;
    margin-bottom: 1.5em;
  }
  .bus .ann {
    text-align: left;
  }
  .bus_map.sp {
    margin-bottom: min(6.81vw , 70px);
  }
  .bus_left {
    width: 100%
  }
  .bus_wrap p {
    font-size: 3.3vw;
    margin-bottom: 1em;
  }
/*-----*/
  .ion_wrap {
    gap: 0;
    flex-direction: column;
  }
  .ion_wrap div:last-of-type {
    width: 100%
  }
  .bus_fig2 {
    flex-direction: column;
  }
  .bus_fig2 img {
    width: 80%;
    margin-right: auto;
    margin-left: auto;
  }
 .bus_fig2 img:not(:last-of-type) {
    margin-bottom: 10vw;
 }
  .bus .pageCaption li {
    text-align: left;
  }
}



/* ----------------------- / 身近に利用できるバスアクセス ----------------------- */






/* ----------------------- カーアクセス ----------------------- */

.car_wrap {
  background-image: url("../img/access/car_line.png");
  background-repeat: repeat-y;
  background-size: 100%;
  background-position: center;
  width: 100%;
  margin-top: min(15vw,162px);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.car_wrap > div {
  width: min(29.63vw , 320px);
}


.car_catch {
  text-align: center;
  margin-bottom: 1em;
  color: #fff;
  width: 100%;
  background-color: #335583;
}

.car_catch span {
  letter-spacing: 0.2em;
  display: inline-block;
  transform: translateX(0.1em);
}
.car_ph {
  margin-bottom: min(3vw,32px);
}
.car_ph figure,
.car_ph img {
  margin-bottom: min(0.5vw , 5px);
}
.car_time {
  width: auto;
  height: min(5.556vw , 60px);
}

/*-----*/

.car .pageCaption {
  margin:min(3.7vw,30px) auto 0;
  width: 100%;
}
.car .pageCaption li{
  text-align: right;
}

/* ================ 1100 ================ */
@media screen and (max-width: 1100px) {
.car_wrap {
  background-size: 98%;
}
}

/* ================ SP ================ */
@media screen and (max-width: 767px) {
  .car_wrap {
    background-image:none;
  }
  .car_time {
    height: 12vw;
  }
  .car_wrap > div {
    width: 48%;
  }
  .car_wrap > div:nth-of-type(1),
  .car_wrap > div:nth-of-type(2),
  .car_wrap > div:nth-of-type(3) {
    width: 100%;
  }
  .car_wrap > div:nth-of-type(1) {order: 1}
  .car_wrap > div:nth-of-type(2) {order: 4;margin-top: 8vw;}
  .car_wrap > div:nth-of-type(3) {order: 7;margin-top: 8vw;}
  .car_wrap > div:nth-of-type(4) {order: 2}
  .car_wrap > div:nth-of-type(5) {order: 5}
  .car_wrap > div:nth-of-type(6) {order: 8}
  .car_wrap > div:nth-of-type(7) {order: 3}
  .car_wrap > div:nth-of-type(8) {order: 6}
  .car_wrap > div:nth-of-type(9) {order: 9}
/*-----*/
  .car .pageCaption li{
    text-align: left;
  }
}


/* ----------------------- / カーアクセス ----------------------- */






/* ----------------------- 高速道路概念図 ----------------------- */

#road_map {
  width: min(69.44vw , 750px);
  margin-left: auto;
  margin-right: auto;
  margin-top: min(10vw,172px);
}
/* ================ SP ================ */
@media screen and (max-width: 1000px) {
  #road_map {
    width: 80%;
  }
}
/* ================ SP ================ */
@media screen and (max-width: 767px) {
  #road_map {
    width: 96%;
  }
  #road_map .ann {
    text-align: left;
  }
}




/* ----------------------- / 高速道路概念図 ----------------------- */



/*---------------------------------------------------------------------------------------------------------------*/



/* ----------------------- 路線図 共通 ----------------------- */
.train_root h2 {
  border-left: 10px solid #6a1014;
  padding: 0.8em 0 0.8em 0.8em;
  margin-top: min(10vw,172px);
}
.train_root h2#train_ttl2{
  border-color: #27436a;
}
.train_root h2 p {
  font-size: 65%;
  line-height: 1.5em;
  margin-top: 0.8em;
}
/* ----------------------- / 路線図 共通 ----------------------- */

/* ----------------------- 路線図 縦 ----------------------- */
.train_root_fig {
  position: relative;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
.train_root_fig > div.station {
  position: absolute;
  left: min(15.278vw , 165px);
  width: min(22.222vw , 240px);
  text-align: center;
  box-shadow: 1px 3px 8px #000;
  color: #fff;
  opacity: 0;
}
.station_L {
  background-color: #999;
  font-size: min(2.222vw , 24px);
  height: min(5.556vw , 60px);
  line-height: min(5.556vw , 60px);
}
.station_S {
  background-color: #666;
  font-size: min(1.296vw , 14px);
  height: min(1.852vw , 20px);
  line-height: min(1.852vw , 20px);
}
.station_H {
  background-color: #6a1014;
  font-size: min(2.963vw , 32px);
  height: min(7.407vw , 80px);
  line-height: min(7.407vw , 80px);
  border:  1px solid rgba(255,255,255,.5);
}

/* --vw は、Javascriptで計算した、スクロールバーを含まないWindow幅の実寸 */
.station_1 {top:0;}
.station_2 {top:min(calc(var(--vw) / 1080 * 88),88px);}
.station_3 {top:min(calc(var(--vw) / 1080* 136),136px);}
.station_4 {top:min(calc(var(--vw) / 1080* 244),244px);}
.station_5 {top:min(calc(var(--vw) / 1080* 300),300px);}
.station_6 {top:min(calc(var(--vw) / 1080* 380),380px);}
.station_7 {top:min(calc(var(--vw) / 1080* 464),464px);}
.station_8 {top:min(calc(var(--vw) / 1080* 592),592px);}
.station_9 {top:min(calc(var(--vw) / 1080* 668),668px);}
.station_10{top:min(calc(var(--vw) / 1080* 752),752px);}
.station_11{top:min(calc(var(--vw) / 1080* 832),832px);}
.station_12{top:min(calc(var(--vw) / 1080* 880),880px);}
.station_13{top:min(calc(var(--vw) / 1080* 928),928px);}
.station_14{top:min(calc(var(--vw) / 1080* 968),968px);}
.station_15{top:min(calc(var(--vw) / 1080* 1048),1048px);}
.station_16{top:min(calc(var(--vw) / 1080* 1096),1096px);}
.station_17{top:min(calc(var(--vw) / 1080* 1156),1156px);}
.station_18{top:min(calc(var(--vw) / 1080* 1216),1216px);}
.station_19{top:min(calc(var(--vw) / 1080* 1280),1280px);}
.station_20{top:min(calc(var(--vw) / 1080* 1384),1384px);}
.station_21{top:min(calc(var(--vw) / 1080* 1444),1444px);}
.station_22{top:min(calc(var(--vw) / 1080* 1508),1508px);}

/* ================ SP ================ */
@media screen and (max-width: 767px) {
  .train_root h2 {
    letter-spacing: 0;
  }
  .train_root_fig > div.station {
    left: 21vw;
    width: 20vw;
  }
  .station_L {
    font-size: 3vw;
    height: 3em;
    line-height: 3em;
  }
  .station_S {
    font-size: 2vw;
    height: 3em;
    line-height: 3em;
  }
  .station_H {
    font-size:3.5vw;
    height: 3em;
    line-height: 3em;
  }
  :root{
    --spWidth: 592;
  }
  .station_2 {top:calc(100vw / var(--spWidth) * 80);}
  .station_3 {top:calc(100vw / var(--spWidth) * 136);}
  .station_4 {top:calc(100vw / var(--spWidth) * 236);}
  .station_5 {top:calc(100vw / var(--spWidth) * 300);}
  .station_6 {top:calc(100vw / var(--spWidth) * 380);}
  .station_7 {top:calc(100vw / var(--spWidth) * 466);}
  .station_8 {top:calc(100vw / var(--spWidth) * 584);}
  .station_9 {top:calc(100vw / var(--spWidth) * 668);}
  .station_10{top:calc(100vw / var(--spWidth) * 752);}
  .station_11{top:calc(100vw / var(--spWidth) * 824);}
  .station_12{top:calc(100vw / var(--spWidth) * 872);}
  .station_13{top:calc(100vw / var(--spWidth) * 920);}
  .station_14{top:calc(100vw / var(--spWidth) * 968);}
  .station_15{top:calc(100vw / var(--spWidth) * 1040);}
  .station_16{top:calc(100vw / var(--spWidth) * 1096);}
  .station_17{top:calc(100vw / var(--spWidth) * 1148);}
  .station_18{top:calc(100vw / var(--spWidth) * 1208);}
  .station_19{top:calc(100vw / var(--spWidth) * 1280);}
  .station_20{top:calc(100vw / var(--spWidth) * 1376);}
  .station_21{top:calc(100vw / var(--spWidth) * 1436);}
  .station_22{top:calc(100vw / var(--spWidth) * 1508);}

  /*-----*/

  .train_root_fig > img.minutes {
    position: absolute;
    left: 9vw;
    width: 10vw;
  }
  .minutes_1 {top:0;}
  .minutes_5 {top:calc(100vw / var(--spWidth) * 300);}
  .minutes_6 {top:calc(100vw / var(--spWidth) * 380);}
  .minutes_7 {top:calc(100vw / var(--spWidth) * 466);}
  .minutes_9 {top:calc(100vw / var(--spWidth) * 668);}
  .minutes_10{top:calc(100vw / var(--spWidth) * 752);}
  .minutes_14{top:calc(100vw / var(--spWidth) * 968);}
  .minutes_19{top:calc(100vw / var(--spWidth) * 1280);}
  .minutes_22{top:calc(100vw / var(--spWidth) * 1508);}
}


/* ----------------------- / 路線図 縦 ----------------------- */



/* ----------------------- 路線図 ----------------------- */
.train_root_map {
  display: flex;
  justify-content: center;
  position: relative;
}
.train_root_map > figure {
  width: min(55.185vw , 596px)
}
.train_root_map > figure > img:nth-of-type(2) {
  position: absolute;
  top:0;
  left: 0;
}
.train_root_map > img {
  position: absolute;
  width: min(20.19vw , 218px);
}
#train_root_f1 {top:min(10vw , 108px);left:0}
#train_root_f2 {top:min(44.07vw , 476px);left:0}
#train_root_f3 {top:min(10vw , 108px);right:0}
#train_root_f4 {top:min(44.07vw , 476px);right:0}

/* ================ SP ================ */
@media screen and (max-width: 767px) {
  .train_root .pageCaption {
    width: 96%;
  }
  .train_root_map > figure {
    width: 100%;
  }
  .train_root_map {
    margin-bottom: 125vw;
  }
  .train_root_map > img {
    width: 48%;
  }
  #train_root_f1 {top:127vw}
  #train_root_f2 {top:182vw}
  #train_root_f3 {top:127vw}
  #train_root_f4 {top:182vw}

  /*-----*/

  .train_icons {
    padding: 5vw 2vw;
  }
  .train_icons ul {
    display: flex;
    flex-wrap: wrap;
  }
  .train_icons li {
    display: flex;
    align-items: center;
    margin: 0.8em 0.8em  0.8em 0;
  }
  .train_icons li img {
    height: 5vw;
    width: auto;
    margin-right: 0.2em;
  }

}
/* ----------------------- / 路線図 ----------------------- */


























