html{ -webkit-text-size-adjust:none; margin:0 auto; padding:0;}
body{ margin:0;}
.clear{ clear:both; height:0;}
.center{ text-align:center;}
img{ border:0; vertical-align:bottom; max-width: 100%; height: auto;}
ul, ol{ margin:0; padding:0; list-style:none;}
p{ margin:0;}

: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;
}

/*---------------------------------------------
 CONTAINER/TOP
---------------------------------------------*/

#container{ font-family: 'Noto Sans JP', sans-serif; padding-bottom: 80px; width: 100%; margin: 0 auto; color: var(--black); font-feature-settings: "palt"; min-width: 1220px;}
#container *{ font-family: 'Noto Sans JP', sans-serif;}
#container p:not([class]){ font-size: 16px; line-height: 1.9; letter-spacing: 0.1em;}
#container p.large{ font-size: 18px; line-height: 1.9; letter-spacing: 0.1em; font-weight: 500;}
#container p:not([class]) .icon{ aspect-ratio: 1 / 1; width: 1.4em; display: inline-block; vertical-align: middle; line-height: 1;}
#container p:not([class]) .icon img{ object-fit: contain; width: 100%; height: 100%;}
#container .indent01{ text-indent: -1em !important; padding-left: 1em !important; display: inline-block !important; line-height: inherit !important; font-size: inherit !important;}
p:not([class]) a{ color: var(--black); transition: all ease 0.3s; text-decoration: underline;}
#container .cautionSection{ border-top: 1px solid var(--lightgray); margin-top: 120px;}
#container .u-caution{ font-size: 12px; line-height: 1.6; color: #666666; margin: 120px auto 0; width: var(--content-width); padding: var(--content-padding); box-sizing: border-box; }
#container .cautionSection .u-caution{ margin-top: 80px; }
#container .red{ color: var(--red) !important;}
#container p b{ font-weight: 500;}

@media (any-hover: hover) {
p:not([class]) a:hover{ opacity: 0.7;}
}

@media screen and (width > 750px){
.sp{ display: none !important;}
*{ scroll-margin-top: 10px; }
.wrapTabBox * { scroll-margin-top: 120px; }
}

@media screen and (width <= 749px){
:root{
    --content-width: 100%;
}
#container{ min-width: 0;}
.pc{ display: none !important;}
*{ scroll-margin-top: 55px; }
.wrapTabBox *{ scroll-margin-top: calc(55px + var(--comp-200)); }

#container{ width: 100%; padding-bottom: var(--comp-100);}
#container p:not([class]){ font-size: var(--comp-24); }
#container p.large{ font-size: var(--comp-26); max-width: var(--small-content-width-sp); margin-left: auto; margin-right: auto;}
#container .cautionSection{ border-top: 1px solid var(--lightgray); margin-top: var(--comp-120);}
#container .u-caution{ font-size: var(--comp-20); margin: var(--comp-120) auto 0; padding: 0; width: calc(100% - var(--comp-60) - var(--comp-60));}
#container .cautionSection .u-caution{ margin-top: var(--comp-120); }
}

/*-- breadcrumbs --*/
#breadcrumbs{ width: var(--content-width); box-sizing: border-box; padding: 16px 12px 0; margin: 0 auto 50px;}
#breadcrumbs > ol{ list-style: none; display: flex; line-height: 1.8;}
#breadcrumbs > ol li{ display: inline; align-items: center; font-size: 12px; margin-right: 15px;}
#breadcrumbs > ol li:has(> a)::after{ content: ""; display: inline-block; aspect-ratio: 1 /1; width: 6px; border-top: 1px solid var(--black); border-right: 1px solid var(--black); vertical-align: middle; transform: rotate(45deg);}
#breadcrumbs > ol li a{ color: var(--black); text-decoration: none; margin-right: 15px; transition: all ease 0.3s;}

@media (any-hover: hover) {
#breadcrumbs > ol li a:hover{ opacity: 0.7;}
}

@media screen and (width <= 749px){
#breadcrumbs{ width: var(--content-width); padding: var(--comp-30) var(--comp-40) 0; margin: 0 auto var(--comp-80);}
#breadcrumbs > ol li{ font-size: var(--comp-20); margin-right: var(--comp-20);}
#breadcrumbs > ol li:has(> a)::after{ width: var(--comp-10);}
#breadcrumbs > ol li a{ margin-right: var(--comp-20);}
}

/*-- content --*/
hgroup.mainTtlGroup{ margin-bottom: 80px;}
hgroup.mainTtlGroup:has( > .simplePageTtl:only-child){ margin-bottom: 100px;}
hgroup.mainTtlGroup > *{ width: var(--content-width); padding: var(--content-padding); margin-left: auto; margin-right: auto;}
hgroup.mainTtlGroup .lead{ margin: 30px auto 0; font-size: 18px; text-align: center; line-height: 1.75; box-sizing: border-box; letter-spacing: 0.05em;}
.simplePageTtl{ margin: 0 auto; color: var(--black); box-sizing: border-box; text-align: center; font-weight: 500; font-size: 40px; letter-spacing: 0.1em; padding-bottom: 15px; position: relative; line-height: 1.8;}
.simplePageTtl::after{ content: ""; display: block; width: 200px; height: 4px; margin: 0 auto; background-color: var(--blue); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}
.simplePageTtl + h2{ display: flex; justify-content: center; align-items: center; font-size: 32px; letter-spacing: 0.2em; font-weight: 500; gap: 20px; margin: 30px auto 0;}
.simplePageTtl + h2 .icon{ display: block; aspect-ratio: 66 / 57; width: 66px;}
.simplePageTtl + h2 .icon img{ object-fit: contain; width: 100%; height: 100%;}
.simplePageTtl + h2 .text{ max-width: calc(100% - 20px - 66px); line-height: 1.75;}

/*-- アイコンつき下線 --*/
hgroup.mainTtlGroup:has( > .basicPageTtl)::after{ content: ""; display: block; width: var(--content-width);  margin: 0 auto 60px; border-bottom: solid 1px #2f93f3; padding-top: 60px; background-image: url("../img/icon-line-car.svg"); background-repeat: no-repeat; background-size: auto 50%; background-position: right 8% bottom;}
.basicPageTtl{ margin: 0 auto; color: var(--black); box-sizing: border-box; text-align: center; font-weight: 500; font-size: 40px; letter-spacing: 0.1em; padding-bottom: 15px; position: relative; line-height: 1.8;}
.basicPageTtl + h2{ display: flex; justify-content: center; align-items: center; font-size: 32px; letter-spacing: 0.2em; font-weight: 500; gap: 20px; margin: 30px auto 0;}
.basicPageTtl + h2 .icon{ display: block; aspect-ratio: 66 / 57; width: 66px;}
.basicPageTtl + h2 .icon img{ object-fit: contain; width: 100%; height: 100%;}
.basicPageTtl + h2 .text{ max-width: calc(100% - 20px - 66px); line-height: 1.75;}
#contents > .lead{ width: var(--small-content-width); margin: 0 auto 60px; box-sizing: border-box; font-size: 16px; line-height: 1.75; }

#contents > .lead{ width: var(--small-content-width); margin: 0 auto 60px; box-sizing: border-box; font-size: 16px; line-height: 1.75; }
.contentCaution{ font-size: 16px; margin-top: 20px; max-width: var(--small-content-width); margin-right: auto; margin-left: auto;}
.contentCaution a{ color: var(--black); text-decoration: underline; transition: all ease 0.3s;}
.flexBox{ display: flex;}
.bgWhite{ background-color: #fff;}
.bgBlack{ background-color: var(--black);}
.bgWhite,
.bgBlack{ padding: 100px 0;}
.bgWhite:first-child,
.bgBlack:first-child{ padding-top: 0;}
.bgWhite > .inner,
.bgBlack > .inner{ padding: 0 12px; width: var(--content-width); margin: 0 auto; box-sizing: border-box;}
.minBgBlack,
.minBgWhite{ width: var(--content-width); padding: var(--content-padding); box-sizing: border-box; margin: 0 auto; }
.minBgBlack > .inner{ padding: 60px 108px 100px; box-sizing: border-box; background-color: var(--black);}
.minBgWhite > .inner{ padding: 100px 108px; box-sizing: border-box; background-color: #fff;}
.simpleTtl{ font-size: 24px; font-weight: 700; text-align: center; margin: 0 auto 40px; line-height: 1.8; width: 100%}
.bgBlack .inner > .simpleTtl,
.minBgBlack .inner > .simpleTtl{ color: #fff;}
.bgWhite .inner > .simpleTtl,
.minBgWhite .inner > .simpleTtl{ color: var(--black);}
.ta-right{ text-align: right !important;}

@media (any-hover: hover) {
.contentCaution a:hover{ opacity: 0.7;}
}

@media screen and (width <= 749px){
hgroup.mainTtlGroup > *{ width: 100%; padding: 0 var(--comp-60); margin-left: auto; margin-right: auto;}
hgroup.mainTtlGroup{ margin-bottom: var(--comp-100);}
hgroup.mainTtlGroup:has( > .simplePageTtl:only-child){ margin-bottom: var(--comp-80);}
hgroup.mainTtlGroup .lead{ margin: var(--comp-30) auto 0; font-size: var(--comp-27); text-align: center; box-sizing: border-box; line-height: 1.75;}
.simplePageTtl{ margin: 0 auto; padding: var(--content-padding); font-size: var(--comp-60); padding-bottom: var(--comp-20) !important; line-height: 1.5;}
.simplePageTtl::after{ content: ""; display: block; width: 27vw; height: max(2px, 0.81vw);}
.simplePageTtl + h2{ flex-wrap: wrap; font-size: var(--comp-48); gap: var(--comp-20); padding: var(--content-padding); box-sizing: border-box; margin: var(--comp-30) auto 0;}
.simplePageTtl + h2 .icon{ width: var(--comp-88);}
.simplePageTtl + h2 .text{ max-width: 100%; width: 100%; text-align: center; }

/*-- アイコンつき下線 --*/
hgroup.mainTtlGroup:has( > .basicPageTtl)::after{ content: ""; display: block; width: var(--content-width);  margin: 0 auto var(--comp-80); border-bottom: solid 1px #2f93f3; padding-top: var(--comp-80); background-image: url("../img/icon-line-car.svg"); background-repeat: no-repeat; background-size: auto 5vw; background-position: right 10% bottom;}
.basicPageTtl{ margin: 0 auto; padding: var(--content-padding); font-size: var(--comp-60); padding-bottom: var(--comp-20);}
.basicPageTtl + h2{ flex-wrap: wrap; font-size: var(--comp-48); gap: var(--comp-20); padding: var(--content-padding); box-sizing: border-box; margin: var(--comp-30) auto 0;}
.basicPageTtl + h2 .icon{ width: var(--comp-88);}
.basicPageTtl + h2 .text{ max-width: 100%; width: 100%; text-align: center; }

#contents > .lead{ width: 100%; margin: 0 auto var(--comp-60); font-size: var(--comp-24); padding: 0 var(--comp-60); }
.contentCaution{ font-size: var(--comp-24); max-width: var(--small-content-width-sp); margin-top: var(--comp-10);}
.flexBox{ display: flex;}
.bgWhite,
.bgBlack{ padding: var(--comp-100) 0;}
.bgWhite > .inner,
.bgBlack > .inner{ padding: 0; width: var(--content-width); margin: 0 auto; box-sizing: border-box;}
.minBgBlack,
.minBgWhite{ width: 100%; padding: 0; }
.minBgBlack > .inner{ padding: var(--comp-90) var(--comp-60) var(--comp-100); box-sizing: border-box; background-color: var(--black);}
.minBgWhite > .inner{ padding: var(--comp-100) var(--comp-60); box-sizing: border-box; background-color: #fff;}
.simpleTtl{ font-size: var(--comp-36); margin: 0 auto var(--comp-60);}
}

.btnSection{ border-top: 1px solid var(--lightgray); padding-top: 120px;}
.pageBtnList{ width: 980px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;}
.pageBtnList li{ width: 480px; box-sizing: border-box;}
.pageBtnList li a{ display: flex; border: 1px solid var(--black); width: 100%; box-sizing: border-box; position: relative; padding: 25px 50px 25px 25px; color: var(--black); text-decoration: none; font-size: 20px; align-items: center; font-weight: 500; gap: 10px; background-color: #fff; transition: all ease 0.3s;}
.pageBtnList li a::before{ content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 2px solid var(--blue); transition: all ease 0.3s; box-sizing: border-box; opacity: 0;}
.pageBtnList li a .icon{ aspect-ratio: 44 / 38; width: 44px; position: relative;}
.pageBtnList li a .icon img{ object-fit: contain; width: 100%; height: 100%;}
.pageBtnList li a .text{ display: block;  width: calc(100% - 44px - 10px);}
.pageBtnList 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: 30px; transition: all ease 0.3s;}

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

@media screen and (width <= 749px){
.btnSection{ padding-top: var(--comp-120);}
.pageBtnList{ width: calc(100% - var(--comp-60) - var(--comp-60)); gap: var(--comp-15); }
.pageBtnList li{ width: calc((100% - var(--comp-20) - 1px) / 2);}
.pageBtnList li a{ padding: var(--comp-30) var(--comp-30) var(--comp-30) var(--comp-20); font-size: var(--comp-22); gap: var(--comp-10); min-height: var(--comp-110); height: 100%;}
.pageBtnList li a .icon{ width: var(--comp-40);}
.pageBtnList li a .icon img{ object-fit: contain; width: 100%; height: 100%;}
.pageBtnList li a .text{ display: block; width: calc(100% - var(--comp-40) - var(--comp-15) - 1px); flex: 1;}
.pageBtnList li a::after{ width: var(--comp-12); right: var(--comp-20); } 
}

/*map*/
.map{ width: 100%; position: relative; aspect-ratio: 1196 / 673;}
.map iframe{ width: 100%; height: 100%; position: absolute; top: 0; left: 0;}

/*-- simpleList --*/
.circleList{ line-height: 1.9; max-width: var(--small-content-width); margin: 0 auto; letter-spacing: 0.05em;}
.circleList li{ text-indent: -1.4em; padding-left: 1.4em; font-size: 18px;}
.circleList li::before{ content: "●"; margin-right: 0.3em;}
#container .circleList + p:not([class]){ margin-top: 0;}

.squareList{ line-height: 1.9; max-width: var(--small-content-width); margin: 0 auto; letter-spacing: 0.05em;}
.squareList li{ text-indent: -1.4em; padding-left: 1.4em; font-size: 16px; box-sizing: border-box;}
.squareList li::before{ content: "■"; margin-right: 0.3em;}
.squareList.orange li::before{ color: #ff4e26;}
.squareList.green li::before{ color: #70c23c;}
.squareList.blue li::before{ color: #0a87bb;}
.squareList.gold li::before{ color: #a59051;}
#container .squareList + p:not([class]){ margin-top: 0;}

.simpleTable .squareList.pc02{ display: flex; flex-wrap: wrap; column-gap: 60px; width: 700px; margin: 0;}
.simpleTable .squareList.pc02 li{ width: 320px;}
.simpleTable .squareList.pc04{ display: flex; flex-wrap: wrap; column-gap: 60px; width: 580px; margin: 0;}
.simpleTable .squareList.pc04 li{ width: 100px;}
.simpleTable .squareList b{ display: inline !important;}


.dotList{ line-height: 1.9; max-width: var(--small-content-width); margin: 0 auto; letter-spacing: 0.05em;}
.dotList li{ text-indent: -0.8em; padding-left: 0.8em; font-size: 16px;}
.dotList li::before{ content: "・"; margin-right: 0.3em;}

.cautionList{ line-height: 1.9; max-width: var(--small-content-width); margin: 0 auto; letter-spacing: 0.05em;}
.cautionList li{ text-indent: -1.2em; padding-left: 1.2em; font-size: 16px;}
.cautionList li::before{ content: "※"; margin-right: 0.1em;}

@media screen and (width <= 749px){
.circleList{ max-width: var(--small-content-width-sp);}
.circleList li{ font-size: var(--comp-27);}

.squareList{ max-width: var(--small-content-width-sp); }
.squareList li{ font-size: var(--comp-24); }

.simpleTable .squareList.pc02{ display: block; width: 100%;}
.simpleTable .squareList.pc02 li{ width: 100%;}
.simpleTable .squareList.pc04{ display: block; width: 100%; }
.simpleTable .squareList.pc04 li{ width: 100%;}
.simpleTable .squareList.spInline{ display: flex !important; flex-wrap: wrap; column-gap: 2.5em;}
.simpleTable .squareList.spInline li{ display: inline-block !important; text-wrap: nowrap; width: calc(50% - 2.5em) !important;}
.simpleTable .squareList{ width: 100%; max-width: 100%;}

.dotList{ max-width: var(--small-content-width-sp); }
.dotList li{ font-size: var(--comp-24);}
.scrollBox + .dotList{ margin-top: var(--comp-20);}

.cautionList{ max-width: var(--small-content-width-sp);}
.cautionList li{ font-size: var(--comp-24);}
}

/*-- 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: 16px; 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: 18px; 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: 18px; 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: 18px; font-weight: 500; margin: 0 auto 10px; box-sizing: border-box;}
#mainMap .mapBox h2 + p{ font-size: 16px;}
#mainMap .flexBox > .textBox{ width: 560px; box-sizing: border-box; }
#mainMap .flexBox > .textBox p:not([class]){ margin-bottom: 50px; font-size: 18px;}

@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: 16px; 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: 18px;}
.weightTtl{ font-weight: 700; font-size: 18px; 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-100) auto var(--comp-40); padding-bottom: var(--comp-20); scroll-margin-top: calc(55px + var(--comp-40));  }
hgroup.sectionTtlGroup + .garyLineTtl{ margin-top: var(--comp-60);}
#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-40) auto var(--comp-20); max-width: var(--small-content-width-sp);}
}

/*-- scroll/pinch --*/
.scrollBox{ font-size: 16px; margin: 2em auto;}
h2 + .scrollBox,
h3 + .scrollBox,
h4 + .scrollBox, 
h5 + .scrollBox,
h6 + .scrollBox{ margin-top: 0;}
.pinchBox{ font-size: 16px; margin: 2em auto;}
h2 + .pinchBox,
h3 + .pinchBox,
h4 + .pinchBox, 
h5 + .pinchBox,
h6 + .pinchBox{ margin-top: 0;}
.secondSimpleSection .pinchBox figure{ margin: 0 auto;}
.pinchBox .pinchText{ display: none;}
.pinchBox:has( + .contentCaution){ margin-bottom: 0;}

@media screen and (width <= 749px){
.scrollBox{ overflow-x: scroll; width: var(--small-content-width-sp); margin: var(--comp-20) auto; }
.scrollBox .innerScrollBox{ width: 240vw;}
.scrollBox:has( > .innerScrollBox.wifiMap){ aspect-ratio: 618 / 463;} 
.scrollBox .innerScrollBox.wifiMap{ width: auto; height: 100%; max-width: none;}
.scrollBox .innerScrollBox.wifiMap figure,
.scrollBox .innerScrollBox.wifiMap figure img{ width: auto; height: 100%; max-width: none;}
.scrollBox .innerScrollBox > *{ max-width: 100%; width: 100%;}

.pinchBox{ margin: var(--comp-20) auto;}
.pinchBox .pinchText{ display: flex; align-items: center; gap: 0.5em; font-size: var(--comp-20); width: var(--small-content-width-sp); margin: var(--comp-10) auto 0;}
.pinchBox .pinchText::before{ content: ""; display: inline-block; aspect-ratio: 32 / 30; width: 1.4em; background-image: url(../img/icon-pinch.svg); background-repeat: no-repeat; background-position: center center; background-size: contain;}
}

/*-- table --*/
.simpleTable{ border: 1px solid #b2b2b2; border-collapse: collapse; font-size: 16px; 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 .w18per{ width: 18%;}
.simpleTable .w20per{ width: 20%;}
.simpleTable .w25per{ width: 25%;}
.simpleTable .w30per{ width: 30%;}
.simpleTable .cautionList{ width: 100%; max-width: 100%;}
.simpleTable a{ color: inherit; text-decoration: underline;}

.simpleTable.responsive{ width: 100%;}

@media screen and (width <= 749px){
.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; width: 100% !important; box-sizing: border-box;}
.simpleTable.responsive tbody th:has( + td),
.simpleTable.responsive tbody td:has( + td){ border-bottom: 1px solid #b2b2b2;}
}

/*-- btnList --*/
.simpleBtnList{ margin: 60px auto 0; width: 340px; display: flex; flex-wrap: wrap; gap: 20px;}
.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: 16px;}
.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: 16px; 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;}
.secondSimpleSection h2 + figure,
.secondSimpleSection h3 + figure,
.secondSimpleSection h4 + figure,
.secondSimpleSection h5 + figure,
.secondSimpleSection h6 + figure{ 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); }
.secondSimpleSection figure{ margin: var(--comp-20) auto;}
}

/*-- 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: 18px; 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: 200px; border-radius: 10px; font-size: 18px; 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: 16px; 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: 132px;}
.transferList li.w160{ width: 160px;}
.transferList li.w200{ width: 200px;}
.transferList li.w258{ width: 258px;}
.transferList li.w378{ width: 378px;}
}

@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);}
}


/*-- wi-fi --*/
figure.wifiMap{ margin-bottom: 2em;}
figure.wifiMap:has( + .contentCaution){ margin-bottom: 0;}

@media screen and (width <= 749px){
.scrollBox{ overflow-x: scroll; width: var(--small-content-width-sp); margin: var(--comp-20) auto; }
.scrollBox .innerScrollBox{ width: 240vw;}
.scrollBox:has( > .innerScrollBox.wifiMap){ aspect-ratio: 618 / 463;} 
.scrollBox .innerScrollBox.wifiMap{ aspect-ratio: 1196 / 463; height: 100%; max-width: none;}
.scrollBox .innerScrollBox.wifiMap figure,
.scrollBox .innerScrollBox.wifiMap figure img{ width: auto; height: 100%; max-width: none;}
.scrollBox .innerScrollBox > *{ max-width: 100%; width: 100%;}

figure.wifiMap{ aspect-ratio: 618 / 463;}
figure.wifiMap img{ display: block; width: 100%; height: 100%; object-fit: cover;}
}