html{ -webkit-text-size-adjust:none; margin:0 auto; padding:0;}
body{ margin:0;}
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;
    --guide-content-width: 980px;
    --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-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;}
p:not([class]) a{ color: var(--black); transition: all ease 0.3s; text-decoration: underline;}
#container .u-caution{ font-size: 12px; line-height: 1.6; color: #666666; margin: 80px auto 0; width: var(--content-width); padding: var(--content-padding); box-sizing: border-box; }

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

@media screen and (width > 750px){
.sp{ display: none !important;}
}

@media screen and (width <= 749px){
:root{
    --content-width: 100%;
}
#container{ min-width: 0;}
.pc{ display: none !important;}

#container{ width: 100%; padding-bottom: var(--comp-100);}
#container p:not([class]){ font-size: var(--comp-24); }
#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));}
}

/*-- 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 > *{ width: var(--content-width); padding: var(--content-padding); margin-left: auto; margin-right: auto; box-sizing: border-box;}
hgroup.mainTtlGroup .lead{ margin: 30px auto 0; font-size: 18px; text-align: center; line-height: 1.75; letter-spacing: 0.05em;}

/*-- アイコンつき下線 --*/
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/common/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;}

#contents{ width: 100%;}
#contents section{ padding: 40px 0;}
#contents .bgWhite{ background-color: #fff;}

@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 .lead{ margin: var(--comp-30) auto 0; font-size: var(--comp-27); text-align: center; box-sizing: border-box; line-height: 1.75;}

/*-- アイコンつき下線 --*/
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/common/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);}

#contents section{ padding: var(--comp-40) 0;}
}

/*-- heading --*/
.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;}

.icon-time,
.icon-ticket,
.icon-access,
.icon-map,
.icon-service,
.icon-info,
.icon-escape,
.icon-contact,
.icon-mail,
.icon-sitemap{ font-size: 22px; font-weight: 700; width: var(--small-content-width); margin: 100px auto 25px;  line-height: 1.8; display: flex; align-items: center; gap: 10px;}

.icon-time:first-child,
.icon-ticket:first-child,
.icon-access:first-child,
.icon-map:first-child,
.icon-service:first-child,
.icon-info:first-child,
.icon-escape:first-child,
.icon-contact:first-child,
.icon-mail:first-child,
.icon-sitemap:first-child{ margin-top: 0;}

.icon-time::before,
.icon-ticket::before,
.icon-access::before,
.icon-map::before,
.icon-service::before,
.icon-info::before,
.icon-escape::before,
.icon-contact::before,
.icon-mail::before,
.icon-sitemap::before{ content: ""; display: block; width: 42px; height: 42px; background-size: contain; background-repeat: no-repeat; background-position: center; flex-shrink: 0;}

.icon-time::before{ background-image: url("../img/icon_time.png");}
.icon-ticket::before{ background-image: url("../img/icon_fee.png");}
.icon-access::before{ background-image: url("../img/icon_access.png");}
.icon-map::before{ background-image: url("../img/icon_map.png");}
.icon-service::before{ background-image: url("../img/icon_service.png");}
.icon-info::before{ background-image: url("../img/icon_info.png");}
.icon-escape::before{ background-image: url("../img/icon_escape.png");}
.icon-contact::before{ background-image: url("../img/icon_contact.png");}
.icon-mail::before{ background-image: url("../img/icon_mail.png");}
.icon-sitemap::before{ background-image: url("../img/icon_sitemap.png");}

/*-- guide contents --*/
#container:has(.guide_contents){ min-width: 0;}
#container:has(.guide_contents) .u-caution{ width: 980px;}

.guide_contents{
    width: 980px;
    margin: 0 auto;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.cautionArea{ width: 100%; box-sizing: border-box; border-top: 1px solid var(--lightgray);}

@media screen and (width > 749px){
.cautionArea{ margin-top: 120px;}
}
.cautionArea .caution{ width: 980px; margin-left: auto; margin-right: auto;}

.guide_contents_list{ display: flex; flex-wrap: wrap; border-top: 1px solid var(--black); margin-bottom: var(--comp-120);}

@media screen and (width > 749px){
.guide_contents_list{ margin-bottom: 120px;}
}

.guide_contents_list__item{ border-bottom: 1px solid var(--black); width: 100%; position: relative;}

/* icon span reset */
.guide_contents_list__item .icon{ display: block; width: 42px; height: 42px; margin: 0; font-size: 0; line-height: 1; flex-shrink: 0;}

/* single-link item */
.guide_contents_list__item > 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: flex-start; transition: all ease 0.3s;}
.guide_contents_list__item > 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;}
.guide_contents_list__item > 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;}
.guide_contents_list__item .text{ flex: 1; line-height: 1.8;}
.guide_contents_list__item .ttl{ display: block; line-height: 42px;}
.guide_contents_list__item .desc{ display: block; font-size: 15px; font-weight: 400; line-height: 1.6;}
.guide_contents_list__item .arrow{ align-self: center;}

@media (any-hover: hover) {
.guide_contents_list__item > a:hover{ color: var(--blue);}
.guide_contents_list__item > a:hover::before{ width: 100%; transform-origin: left bottom;}
.guide_contents_list__item > a:hover::after{ width: 100%; transform-origin: left bottom;}
.guide_contents_list__item--multi .subLinks a:hover{ opacity: 0.7;}
}

/* multi-link item */
.guide_contents_list__item--multi > a::after{ display: none;}
.guide_contents_list__item--multi .itemHeader{ display: flex; gap: 15px; padding: 25px 15px 15px 0; align-items: flex-start; font-size: 20px; font-weight: 700;}
.guide_contents_list__item--multi .subLinks{ display: flex; flex-direction: column; gap: 0; padding: 0 0 20px 59px;}
.guide_contents_list__item--multi .subLinks li{ display: block;}
.guide_contents_list__item--multi .subLinks a{ display: inline-block; color: var(--black); text-decoration: underline; margin-bottom: 1em; font-size: 15px; transition: all ease 0.3s;}
.guide_contents_list__item--multi .subLinks 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); margin-left: 10px;}

@media screen and (width <= 749px){
.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); }

.guide_contents{
    width: 100%;
    padding-left: var(--comp-60) !important;
    padding-right: var(--comp-60) !important;
    box-sizing: border-box;
}

.guide_contents h2{ font-size: var(--comp-36);}

.cautionArea{ width: 100%; padding-left: var(--comp-60) !important; padding-right: var(--comp-60) !important; box-sizing: border-box;margin-top: var(--comp-120);}
.cautionArea .caution{ width: 100%;}
#container:has(.guide_contents) .u-caution{ width: 100%; margin-left: 0; margin-right: 0;}

.guide_contents_list__item .icon{ width: var(--comp-66); height: var(--comp-66);}
.guide_contents_list__item > 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);}
.guide_contents_list__item .ttl{ line-height: var(--comp-66);}
.guide_contents_list__item .desc{ font-size: var(--comp-24);}

.guide_contents_list__item--multi .itemHeader{ gap: var(--comp-30); padding: var(--comp-20) var(--comp-15) var(--comp-15) 0; font-size: var(--comp-28);}
.guide_contents_list__item--multi .subLinks{ flex-wrap: wrap; gap: 0; padding: 0 0 var(--comp-20) calc(var(--comp-66) + var(--comp-30));}
.guide_contents_list__item--multi .subLinks li{ width: 100%; white-space: normal;}
.guide_contents_list__item--multi .subLinks a{ font-size: var(--comp-24);}

.icon-time,
.icon-ticket,
.icon-access,
.icon-map,
.icon-service,
.icon-info,
.icon-escape,
.icon-contact,
.icon-mail,
.icon-sitemap{ font-size: var(--comp-32); margin: var(--comp-160) auto var(--comp-40); padding-bottom: var(--comp-20); gap: var(--comp-10);}

.icon-time::before,
.icon-ticket::before,
.icon-access::before,
.icon-map::before,
.icon-service::before,
.icon-info::before,
.icon-escape::before,
.icon-contact::before,
.icon-mail::before,
.icon-sitemap::before{ width: var(--comp-66); height: var(--comp-66);}
}

/*-- arrow --*/
a .arrow{ display: block; aspect-ratio: 1 / 1; background-color: var(--blue); border-radius: 50%; position: relative; width: 24px;}
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 screen and (width <= 749px){
a .arrow{ width: var(--comp-35);}
}