:root{
    --black: #333333;
    --blue: #2f93f3;
    --red: #f03333;
    --pink: #ec9d9c;
    --gray: #999999;
    --lightgray: #e5e9eb;
    --base-font-color: #333333;
    --content-width: 1220px;
    --small-content-width: 1196px;
    --small-content-width-sp: calc(100% - var(--comp-60) - var(--comp-60));
    --content-padding: 0 12px;

    --comp-250: 33.7837837837837vw;
    --comp-230: 31.081081081081vw;
    --comp-220: 29.7297297297297vw;
    --comp-210: 28.3783783783783vw;
    --comp-200: 27.027027027027vw;
    --comp-195: 26.3513513513513vw;
    --comp-190: 25.6756756756756vw;
    --comp-185: 25vw;
    --comp-180: 24.3243243243243vw;
    --comp-175: 23.6486486486486vw;
    --comp-170: 22.9729729729729vw;
    --comp-165: 22.2972972972972vw;
    --comp-160: 21.6216216216216vw;
    --comp-155: 20.9459459459459vw;
    --comp-150: 20.2702702702702vw;
    --comp-145: 19.5945945945945vw;
    --comp-140: 18.9189189189189vw;
    --comp-135: 18.2432432432432vw;
    --comp-130: 17.5675675675675vw;
    --comp-125: 16.8918918918918vw;
    --comp-120: 16.2162162162162vw;
    --comp-115: 15.5405405405405vw;
    --comp-110: 14.8648648648648vw;
    --comp-105: 14.1891891891891vw;
    --comp-100: 13.5135135135135vw;
    --comp-95: 12.83783783783783vw;
    --comp-90: 12.1621621621621vw;
    --comp-85: 11.48648648648648vw;
    --comp-80: 10.8108108108108vw;
    --comp-75: 10.13513513513513vw;
    --comp-70: 9.459459459459459vw;
    --comp-65: 8.738738738738738vw;
    --comp-60: 8.108108108108108vw;
    --comp-55: 7.432432432432432vw;
    --comp-50: 6.756756756756756vw;
    --comp-45: 6.081081081081081vw;
    --comp-40: 5.405405405405405vw;
    --comp-35: 4.729729729729729vw;
    --comp-30: 4.054054054054054vw;
    --comp-25: 3.378378378378378vw;
    --comp-20: 2.702702702702702vw;
    --comp-15: 2.027027027027027vw;
    --comp-10: 1.351351351351351vw;
    --comp-5: 0.6756756756756756vw;

    --comp-88: 11.8918918918918vw;
    --comp-66: 8.91891891891891vw;
    --comp-48: 6.48648648648648vw;
    --comp-46: 6.21621621621621vw;
    --comp-42: 5.67567567567567vw;
    --comp-36: 4.86486486486486vw;
    --comp-34: 4.59459459459459vw;
    --comp-32: 4.32432432432432vw;
    --comp-28: 3.78378378378378vw;
    --comp-27: 3.64864864864865vw;
    --comp-26: 3.51351351351351vw;
    --comp-24: 3.24324324324324vw;
    --comp-22: 2.97297297297297vw;
    --comp-20: 2.70270270270270vw;
    --comp-18: 2.43243243243243vw;
    --comp-16: 2.16216216216216vw;
    --comp-14: 1.89189189189189vw;
    --comp-12: 1.62162162162162vw;
    --comp-8: 1.081081081081081vw;
    --comp-6: 0.81081081081081vw;
}

/*-- btnList --*/
.btnListType01{ display: flex; flex-wrap: wrap; gap: 10px;}
.btnListType01:not(:first-child){ margin-top: 25px;}
.btnListType01:not(:last-child){ margin-bottom: 25px;}
.btnListType01 li{ width: calc((100% - 10px) / 2);}
.btnListType01 li a{ border: 1px solid var(--black); display: block; position: relative; text-decoration: none; color: var(--black); font-size: 14px; padding: 20px 50px 20px 25px; transition: all ease 0.3s;}
.btnListType01 li a::after{ content: ""; display: block; aspect-ratio: 1 / 1; width: 12px; border-top: 2px solid var(--black); border-right: 2px solid var(--black); position: absolute; top: 50%; transform: rotate(45deg) translateY(-50%); right: 24px; transition: all ease 0.3s;}

@media (any-hover: hover) {
.btnListType01 a:hover{ color: var(--blue); border: 1px solid var(--blue);}
.btnListType01 a:hover::after{ border-color: var(--blue); }
}

@media screen and (width <= 749px){
.btnListType01{ gap: var(--comp-15);}
.btnListType01:not(:first-child){ margin-top: var(--comp-30);}
.btnListType01:not(:last-child){ margin-bottom: var(--comp-30);}
.btnListType01 li{ width: calc((100% - var(--comp-15) - 1px) / 2);}
.btnListType01 li a{ font-size: var(--comp-22); padding: var(--comp-25) var(--comp-35) var(--comp-25) var(--comp-20);}
.btnListType01 li a::after{ width: var(--comp-14); right: var(--comp-25); }
}

.btnListType02{ display: flex; flex-wrap: wrap; border-top: 1px solid var(--black); }
.btnListType02 li{ border-bottom: 1px solid var(--black); width: 100%;}
.btnListType02 li a{ display: flex; gap: 15px; position: relative; padding: 25px 15px 25px 0; box-sizing: border-box; color: var(--black); text-decoration: none; font-size: 20px; font-weight: 700; width: 100%; align-items: center; position: relative; transition: all ease 0.3s;}
.btnListType02 li a::before{ content: ""; display: block; width: 0; height: 2px; background-color: var(--blue); transform-origin: right bottom; opacity: 1; position: absolute; top: -1px; left: 0; transition: width ease 0.6s;}
.btnListType02 li a::after{ content: ""; display: block; width: 0; height: 2px; background-color: var(--blue); transform-origin: right bottom; opacity: 1;  position: absolute; bottom: -1px; left: 0; transition: width ease 0.6s;}
.btnListType02 li a .icon{ aspect-ratio: 44 / 38; width: 44px;}
.btnListType02 li a .icon img{ object-fit: contain; width: 100%; height: 100%;}
.btnListType02 li a .text{ width: calc(100% - 44px - 15px - 24px - 15px ); line-height: 1.8;}
.btnListType02 li a .arrow{ display: block; aspect-ratio: 1 / 1; background-color: var(--blue); border-radius: 50%; position: relative; width: 24px;}
.btnListType02 li a .arrow::before{ content: ""; aspect-ratio: 5 / 8; width: 20.833333333333%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%);}

@media (any-hover: hover) {
.btnListType02 li a:hover{ color: var(--blue); }
.btnListType02 li a:hover::before{ width: 100%; transform-origin: left bottom;}
.btnListType02 li a:hover::after{ width: 100%; transform-origin: left bottom;}
}

@media screen and (width <= 749px){
.btnListType02 li a{ gap: var(--comp-30); padding: var(--comp-20) var(--comp-15) var(--comp-20) 0; font-size: var(--comp-28); min-height: var(--comp-140);}
.btnListType02 li a .icon{ width: var(--comp-65);} 
.btnListType02 li a .text{ width: calc(100% - var(--comp-65) - var(--comp-30) - var(--comp-35) - var(--comp-30) );}
.btnListType02 li a .arrow{ width: var(--comp-35);}
}

.btnListType03{ display: flex; width: 100%; flex-wrap: wrap; gap: 10px;}
.btnListType03 li{ width: 100%;}
.btnListType03 li > a,
.btnListType03 li > span{ background-color: #fff; display: block; width: 100%; position: relative; padding: 30px 70px 30px 30px; text-decoration: none; color: var(--black); font-size: 14px; box-sizing: border-box; line-height: 1.8; position: relative; transition: all ease 0.3s;}
.btnListType03 li > span{ color: var(--gray);}
.btnListType03 li > a::after{ content: ""; display: block; aspect-ratio: 1 / 1; width: 12px; border-top: 2px solid var(--black); border-right: 2px solid var(--black); position: absolute; top: 50%; transform: rotate(45deg) translateY(-50%); right: 40px; transition: all ease 0.3s;}
.btnListType03 li > a::before{ content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 3px solid var(--blue); transition: all ease 0.3s; box-sizing: border-box; opacity: 0; pointer-events: none;}
.btnListType03 li small,
.btnListType03 li small{ font-size: 14px;}

@media (any-hover: hover) {
.btnListType03 li > a:hover{ color: var(--blue);}
.btnListType03 a:hover::before{ opacity: 1; }
.btnListType03 li > a:hover::after{ border-color: var(--blue);}
}

@media screen and (width <= 749px){
.btnListType03{ gap: var(--comp-15);}
.btnListType03 li > a,
.btnListType03 li > span{ padding: var(--comp-25) var(--comp-80) var(--comp-25) var(--comp-30); font-size: var(--comp-28); min-height: var(--comp-200); display: flex; align-items: center; justify-content: center; flex-direction: column; }
.btnListType03 li > span{ color: var(--gray);}
.btnListType03 li > a::after{ width: var(--comp-14); right: var(--comp-30);}
.btnListType03 li .inner{ display: block; width: 100%;}
.btnListType03 li small,
.btnListType03 li small{ font-size: var(--comp-24);}
}

/*-- boxList --*/
.grayBoxList{ display: flex; flex-wrap: wrap; gap: 10px;}
.grayBoxList div{ background-color: var(--lightgray); width: 100%; box-sizing: border-box; }
.grayBoxList div dt{ background-color: var(--black); color: #fff; font-weight: 700; display: inline-block; font-size: 22px; padding: 3px 20px; line-height: 1.6;}
.grayBoxList div dd{ font-size: 14px; padding: 20px 30px 30px; margin: 0; box-sizing: border-box; line-height: 1.9; }
.grayBoxList + .contentCaution{ margin-top: 20px;}

@media screen and (width <= 749px){
.grayBoxList{ gap: var(--comp-15);}
.grayBoxList div dt{ font-size: var(--comp-32); padding: var(--comp-5) var(--comp-30); line-height: 1.6;}
.grayBoxList div dd{ font-size: var(--comp-28); padding: var(--comp-20) var(--comp-30) var(--comp-25); }
.grayBoxList + .contentCaution{ margin-top: var(--comp-20);}
}

/*-- main-map --*/
#mainMap .flexBox{ justify-content: space-between; }
#mainMap .flexBox > .mapBox{ width: 580px; padding-top: 10px;}
#mainMap .mapBox .map{ aspect-ratio: 580 / 400; margin-bottom: 20px;}
#mainMap .mapBox .textBox{ display: flex; justify-content: space-between; align-items: center;}
#mainMap .mapBox .textBox .text{ width: 100%;}
#mainMap .mapBox .textBox .btnListType01{ width: 180px; margin-top: 0;}
#mainMap .mapBox .textBox .btnListType01 li{ width: 100%;}
#mainMap .mapBox h2{ font-size: 14px; font-weight: 500; margin: 0 auto 10px; box-sizing: border-box;}
#mainMap .mapBox h2 + p{ font-size: 14px;}
#mainMap .flexBox > .textBox{ width: 560px; box-sizing: border-box; }
#mainMap .flexBox > .textBox p:not([class]){ margin-bottom: 50px; font-size: 14px;}

@media screen and (width <= 749px){
#mainMap .inner{ width: 100%; padding: 0;}
#mainMap .flexBox{ flex-wrap: wrap;}
#mainMap .flexBox > .mapBox{ width: 100%; padding-top: 0; margin-bottom: var(--comp-80);}
#mainMap .mapBox .map{ margin-bottom: var(--comp-30);}
#mainMap .mapBox .textBox{ display: block; }
#mainMap .mapBox .textBox .text{ width: 100%;}
#mainMap .mapBox .textBox .btnListType01{ width: calc(100% - (var(--comp-60) * 2)); margin-top: var(--comp-30);}
#mainMap .mapBox .textBox .btnListType01 li{ width: calc((100% - var(--comp-15) - 1px) / 2);;}
#mainMap .mapBox h2{ padding: 0 var(--comp-60); margin-bottom: var(--comp-10);}
#mainMap .mapBox h2 + p{ font-size: var(--comp-24);  width: calc(100% - (var(--comp-60) * 2)); margin-right: auto; margin-left: auto;}
#mainMap .mapBox .btnListType01{ width: calc(100% - (var(--comp-60) * 2)); margin-right: auto; margin-left: auto;}
#mainMap .flexBox > .textBox{ width: 100%; padding: 0 var(--comp-60);}
#mainMap .flexBox > .textBox p:not([class]){ margin-bottom:var(--comp-50); font-size: var(--comp-27);}
}


/*---------------------------------------------
 SECOND
---------------------------------------------*/
/*-- contents/section --*/
.secondSimpleSection:not(:last-child){ margin-bottom: 100px;}
.secondSimpleSection:has( + .btnSection){ margin-bottom: 120px;}
.secondSimpleSection p:not([class]),
.secondSimpleSection p.large{ margin: 2em auto; }
.secondSimpleSection p:not([class]):first-child{ margin-top: 0;}
.secondSimpleSection p:not([class]):last-child{ margin-bottom: 0;}
.secondSimpleSection p.mapText{ font-size: 14px; margin-top: 20px; width: var(--small-content-width); margin-left: auto; margin-right: auto; letter-spacing: 0.05em;}
.secondSimpleSection figure,
.secondSimpleSection .map, 
.secondSimpleSection p:not([class]),
.secondSimpleSection p.large{ width: var(--small-content-width); margin-left: auto; margin-right: auto;}
.secondSimpleSection > figure img{ display: block; margin: 0 auto;}

@media screen and (width <= 749px){
.secondSimpleSection:not(:last-child){ margin-bottom: var(--comp-100);}
.secondSimpleSection:has( + .btnSection){ margin-bottom: var(--comp-120);}
.secondSimpleSection p:not([class]){ margin: var(--comp-20) auto; }
.secondSimpleSection figure, 
.secondSimpleSection .map, 
.secondSimpleSection p:not([class]){ width: var(--small-content-width-sp); margin-left: auto; margin-right: auto;}
.secondSimpleSection .map{ aspect-ratio: 618 / 800;}
.secondSimpleSection p.mapText{ font-size: var(--comp-24); margin-top: var(--comp-20); width: var(--small-content-width-sp); }
}

/*-- heading --*/
hgroup.sectionTtlGroup{ max-width: var(--small-content-width); margin: 100px auto 60px;}
hgroup.sectionTtlGroup:first-child{ margin-top: 0;}
hgroup.sectionTtlGroup:last-child{ margin-bottom: 0;}
.lineTtl{ border-bottom: 2px solid var(--lightgray); position: relative; box-sizing: border-box; font-size: 28px; font-weight: 700; padding-bottom: 10px; margin: 100px auto 38px; width: var(--small-content-width);}
.lineTtl:first-child{ margin-top: 0;}
.lineTtl:last-child{ margin-bottom: 0;}
.lineTtl::after{ content: ""; display: block; width: 100px; height: 2px; background-color: var(--blue); position: absolute; bottom: -2px; left: 0;}
.lineTtl:has( + p),
.lineTtl:has( + .circleList){ margin-bottom: 25px;}
.garyLineTtl{ border-bottom: 1px solid var(--lightgray); font-size: 22px; font-weight: 700; width: var(--small-content-width); margin: 100px auto 35px; padding-bottom: 10px; line-height: 1.8;}
.garyLineTtl:first-child{ margin-top: 0;}
hgroup.sectionTtlGroup + .garyLineTtl{ margin-top: 60px;}
#container hgroup.sectionTtlGroup p{ font-size: 14px;}
.weightTtl{ font-weight: 500; font-size: 14px; line-height: 1.75; margin: 35px auto 15px; max-width: var(--small-content-width);}

@media screen and (width <= 749px){
hgroup.sectionTtlGroup{ max-width: 100%; margin: var(--comp-100) auto var(--comp-60);}
.lineTtl{ font-size: var(--comp-42); margin: var(--comp-100) auto var(--comp-40); width: calc(100% - var(--comp-20) - var(--comp-20)); padding: 0 var(--comp-40) var(--comp-15);}
.lineTtl::after{ width: var(--comp-150); }
.lineTtl:has( + p), 
.lineTtl:has( + .circleList){ margin-bottom: var(--comp-40);}
.garyLineTtl{ font-size: var(--comp-32); width: var(--small-content-width-sp); margin: var(--comp-160) auto var(--comp-40); padding-bottom: var(--comp-20); }
hgroup.sectionTtlGroup + .garyLineTtl{ margin-top: var(--comp-100);}
#container hgroup.sectionTtlGroup p{ max-width: var(--small-content-width-sp); margin-right: auto; margin-left: auto; font-size: var(--comp-27);}
.weightTtl{ font-weight: 500; font-size: var(--comp-27); line-height: 1.75; margin: var(--comp-50) auto var(--comp-30); max-width: var(--small-content-width-sp);}
}

/*-- table --*/
.scrollBox{ font-size: 14px; margin: 2em auto;}
.simpleTable{ border: 1px solid #b2b2b2; border-collapse: collapse; font-size: 14px; max-width: var(--small-content-width); margin: 2em auto; line-height: 1.75;}
.simpleTable:only-child{ margin-top: 0; margin-bottom: 0;}
.simpleTable thead th{ background-color: var(--black); color: #fff; text-align: center; vertical-align: middle; border: 1px solid #b2b2b2; padding: 15px 25px;}
.simpleTable tbody th,
.simpleTable tbody td{ border: 1px solid #b2b2b2; padding: 15px 25px; text-align: left;}
.simpleTable tbody th{ background-color: var(--lightgray);}
.simpleTable tbody th.black{ background-color: var(--black); color: #fff; text-align: center;}
.simpleTable .w15per{ width: 15%;}
.simpleTable .w16per{ width: 16%;}
.simpleTable .w17per{ width: 17%;}
.simpleTable .w20per{ width: 20%;}
.simpleTable .w25per{ width: 25%;}
.simpleTable .w30per{ width: 30%;}
.simpleTable .cautionList{ width: 100%; max-width: 100%;}

.simpleTable.responsive{ width: 100%;}

@media screen and (width <= 749px){
.scrollBox{ overflow-x: scroll; width: var(--small-content-width-sp); margin: var(--comp-20) auto; }
.scrollBox .innerScrollBox{ width: 240vw;}
.simpleTable{ font-size: var(--comp-24); width: 100%; max-width: 100%;}
.simpleTable thead th{ padding: var(--comp-25) var(--comp-30);}
.simpleTable tbody th,
.simpleTable tbody td{ padding: var(--comp-25) var(--comp-30); }

.simpleTable.responsive{ width: var(--small-content-width-sp); display: block !important; border: none;}
.simpleTable.responsive *{ display: block !important; }
.simpleTable.responsive tbody > *{ border: 1px solid #b2b2b2;}
.simpleTable.responsive tbody > *:not(:first-child){ border-top: none;}
.simpleTable.responsive tbody th,
.simpleTable.responsive tbody td{ border: none;}
}

/*-- btnList --*/
.simpleBtnList{ margin: 60px auto 0; width: 340px; display: flex; flex-wrap: wrap; gap: 20px;list-style: none;}
.simpleBtnList li{ width: 100%;}
.simpleBtnList li a{ color: var(--black); text-decoration: none; border: 1px solid var(--black); min-height: 64px; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; padding: 10px 55px 10px 15px; position: relative; line-height: 1.6; transition: all ease 0.3s;font-size: 14px;}
.simpleBtnList li a::before{ content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 3px solid var(--blue); transition: all ease 0.3s; box-sizing: border-box; opacity: 0; pointer-events: none;}
.simpleBtnList li a::after{ content: ""; display: block; aspect-ratio: 1 / 1; width: 12px; border-top: 2px solid var(--black); border-right: 2px solid var(--black); position: absolute; top: 50%; transform: rotate(45deg) translateY(-50%); right: 24px; transition: all ease 0.3s; transition: all ease 0.3s;}
.simpleBtnList li a small{ font-size: 12px;}

@media (any-hover: hover) {
.simpleBtnList li a:hover{ color: var(--blue); border-color: var(--blue);}
.simpleBtnList li a:hover::before{ opacity: 1; }
.simpleBtnList li a:hover::after{ border-color: var(--blue);}
}

@media screen and (width <= 749px){
.simpleBtnList{ margin: var(--comp-60) auto 0; width: calc(100% - var(--comp-110) - var(--comp-110)); gap: var(--comp-20);}
.simpleBtnList li a{ min-height: var(--comp-110); padding: var(--comp-10) var(--comp-70) var(--comp-10) var(--comp-30); font-size: var(--comp-24);}
.simpleBtnList li a::after{ width: var(--comp-16); right: var(--comp-30);}
.simpleBtnList li a small{ font-size: var(--comp-18);}
}

/*-- tab --*/

.tabListBox{ display: flex; width: 100%; padding-bottom: 40px; margin-bottom: 40px; position: sticky; top: 0; left: 0; z-index: 10; background-color: #fff;}
.innerTabListBox{ border-bottom: 1px solid var(--black); width: 100%;}
.tabList{ display: flex; justify-content: space-between; width: var(--small-content-width); margin: 0 auto; gap: 10px;}
.tabList li{ flex: 1; display: block;}
.tabList li button{ background-color: var(--black); color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; border: none; font-size: 20px; text-align: center; padding: 20px; box-sizing: border-box; border: 1px solid var(--black); border-bottom: none; cursor: pointer; font-weight: 700; transition: all 0.3s ease; height: 100%; }
.tabList li button.active{ background-color: #fff; color: var(--black); position: relative;}
.tabList li button.active::after{ content: ""; height: 3px; width: 100%; background-color: #fff; position: absolute; bottom: -1px; left: 0;}

@media (any-hover: hover) {
.tabList li button:hover{ background-color: #fff; color: var(--black);} 
}

@media screen and (width <= 749px){
.stickyTabBox{ scroll-margin-top: 55px;}
.tabListBox{ margin-bottom: var(--comp-40); padding-bottom: var(--comp-40); top: 55px;}
.tabList{ width: calc(100% - var(--comp-20) - var(--comp-20)); gap: var(--comp-10);}
.tabList li button{ font-size: var(--comp-24); padding: var(--comp-20) var(--comp-15); }
.tabList li button.active{ background-color: #fff; color: var(--black); position: relative;}
.tabList li button.active::after{ content: ""; height: 3px; width: 100%; background-color: #fff; position: absolute; bottom: -2px; left: 0;}
}

/*-- img --*/
.imgFlexBox{ display: flex; width: var(--small-content-width); margin: 0 auto; gap: 40px;}
.imgFlexBox figure{ margin: 0 !important;}
.imgFlexBox figure figcaption{ font-size: 14px; margin-top: 20px; line-height: 1.75; }
.secondSimpleSection figure{ margin: 60px auto;}
.secondSimpleSection figure:last-child{ margin-bottom: 0;}
.secondSimpleSection figure:first-child{ margin-top: 0;}

@media screen and (width <= 749px){
.imgFlexBox{ flex-wrap: wrap; width: var(--small-content-width-sp); gap: var(--comp-40);} 
.imgFlexBox figure{ width: 100%; margin: 0;}
.imgFlexBox figure figcaption{ font-size: var(--comp-24); margin-top: var(--comp-20); }
}

/*-- train_bus --*/
.transferList{ display: flex; width: var(--small-content-width); margin: 0 auto;}
.transferList .station{ background-color: var(--lightgray); border: 2px solid #808080; border-radius: 10px; font-size: 14px; font-weight: 500; padding: 0 10px; text-align: center; min-height: 120px; display: flex; flex-direction: row; align-items: center; justify-content: center; box-sizing: border-box;}
.transferList .end{ box-sizing: border-box; width: 120px; border-radius: 10px; font-size: 14px; font-weight: 700; padding: 30px 10px; color: #fff; background-color: var(--black); text-align: center; display: flex; flex-direction: row; align-items: center; justify-content: center; min-height: 120px; box-sizing: border-box;}
.transferList .time{ display: flex; flex-direction: column; flex-wrap: wrap; align-items: center;}
.transferList .time::before{ content: ""; display: block; width: 100%; order: 2; box-sizing: border-box;}
.transferList .time.kintetsu::before{ background-color: #003399; height: 8px;}
.transferList .time.kansai::before{ background-color: #ff3300; height: 8px;}
.transferList .time.ise::before{ background-color: #fba100; height: 8px;}
.transferList .time.other{ box-sizing: border-box; padding: 0 5px;}
.transferList .time.other::before{ border-bottom: 8px dotted #808080; height: 0;}
.transferList .time > span{ width: 100%; height: calc((100% - 8px) / 2); display: flex; box-sizing: border-box; flex-direction: row; font-size: 14px; font-weight: 500; text-align: center; justify-content: center; letter-spacing: 0.05em;}
.transferList .time > span:nth-of-type(1){ align-items: flex-end; padding-bottom: 10px; order: 1;}
.transferList .time > span:nth-of-type(2){ align-items: flex-start; padding-top: 10px; order: 3;}
.transferList .time:has(> span:only-of-type)::after{ content: ""; display: block; height: calc((100% - 8px) / 2); width: 100%; order: 3;} 
.transferList .time.other .innerOther{ display: flex; align-items: center; justify-content: center; gap: 10px;}
.transferList .time.other > span .icon{ display: inline-block; aspect-ratio: 44 / 38; width: 44px;}

@media screen and (width > 749px){
.transferList li.w132{ width: 112px;}
.transferList li.w160{ width: 120px;}
.transferList li.w200{ width: 120px;}
.transferList li.w258{ width: 200px;}
.transferList li.w378{ width: 250px;}
}

@media screen and (width <= 749px){
.transferList{ flex-wrap: wrap; width: var(--small-content-width-sp); }
.transferList .station{ border-radius: var(--comp-10); font-size: var(--comp-27); padding: var(--comp-25); min-height: 0; width: 100%;}
.transferList .end{ width: 100%; border-radius: var(--comp-10); font-size: var(--comp-27); padding: var(--comp-25); color: #fff; min-height: 0;}
.transferList .time{ display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; justify-content: center; position: relative; width: 100%; box-sizing: border-box; padding: var(--comp-60) var(--comp-75);}
.transferList .time::before{ content: ""; display: block; width: var(--comp-12); position: absolute; left: var(--comp-30); top: 0;}
.transferList .time.kintetsu::before{ background-color: #003399; height: 100%;}
.transferList .time.kansai::before{ background-color: #ff3300; height: 100%;}
.transferList .time.ise::before{ background-color: #fba100; height: 100%;}
.transferList .time.other{ box-sizing: border-box; padding: var(--comp-40) var(--comp-75);}
.transferList .time.other::before{ border: none; height: 100%; width: var(--comp-12); top: 0; background-image: radial-gradient(circle, #808080 40%, transparent 40%); background-size: var(--comp-12) var(--comp-30); background-repeat: repeat-y; background-position: center center;}
.transferList .time > span{ width: 100%; height: auto; display: flex; flex-direction: row; font-size: var(--comp-24); }
.transferList .time:not(.other) > span{ display: block; padding: 0;}
.transferList .time > span:nth-of-type(1){ align-items: flex-end; padding-bottom: 0; order: 1;}
.transferList .time > span:nth-of-type(2){ align-items: flex-start; padding-top: var(--comp-20); order: 3;}
.transferList .time:has(> span:only-of-type)::after{ content: none; } 
.transferList .time.other .innerOther{ padding: 0; width: 100%; gap: var(--comp-10);}
.transferList .time.other > span .icon{ width: var(--comp-66);}
.transferList .time{ min-height: var(--comp-160);}
.transferList:has( > .time.other > span:nth-of-type(2)) .time{ min-height: var(--comp-220);}
}


.transferList li {
	margin: 0px 0px 0px 0px;
}

.map-tab-menu {
	display: -webkit-flex; /* Safari */
	display: flex;

	-webkit-flex-direction: row; /* Safari */
	flex-direction:         row;

	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap:         wrap;
	
	border-bottom: 1px solid #333;
	
	margin: 0px 0px 20px 0px;
}

.map-tab-menu .tab-base {
	box-sizing: border-box;
	width: calc(33.3% - 12px);
	margin: 0px 6px 0px 6px;
	color: #fff;
	background-color: #333;
	border-left: 1px solid #333;
	border-right: 1px solid #333;
	border-top: 1px solid #333;
	line-height: 1;
	padding: 14px 4px 14px 4px;
	text-align: center;
	font-weight: bold;
	font-size: 18px;
	cursor: pointer;
}

.map-tab-menu .tab-base.open {
	background-color: #fff;
	color: #333;
}