@charset "utf-8";

html { width: 100%; overflow: auto; font-size: 62.5%;}
body {
    text-align: center;
    font-size:1.4rem;
    color: #222;
    width: 100%;
    position:relative;
    overflow:hidden;
}
h1.siteName, p.siteName { width: 220px; height:88px;  position: fixed; left: 0; top: 0; z-index: 500; background: #83142B; display: -webkit-flex; display: flex;  -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; transition: 0;}
h1.siteName a, p.siteName a { display: -webkit-flex; display: flex;  -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; width: 100%; height: 100%;}
h1.siteName img, p.siteName img { width: 170px; transition: 0;}

body.fixed { padding-top: 58px;}
body.fixed h1.siteName, body.fixed p.siteName { height: 50px; transition: 0.3s ease; }
body.fixed h1.siteName img, body.fixed p.siteName img { width: 128px; transition: 0.3s ease;}
.pcNon { display: none !important;}
.spNon { display: block !important;}

@media screen and ( max-width:980px ){
    h1.siteName, p.siteName { width: 180px; height: 78px; position: absolute;}
    h1.siteName img, p.siteName img { width: 138px; }
}
@media screen and ( max-width:970px ){
    body { padding-top: 52px;}
    h1.siteName, p.siteName { width: calc(100vw - 56px); height:52px !important; -webkit-justify-content: flex-start; justify-content: flex-start; position: fixed;}
    h1.siteName a, p.siteName a { width: 140px;}
    h1.siteName img, p.siteName img { width: 120px;}
    .pcNon { display: block !important;}
    .spNon { display: none !important;}
    
    body.opened { position: fixed; left: 0;}
    .hamburger {
        width: 56px; height: 52px;position: fixed; right: 0; top: 0; z-index: 500;
        padding: 17px 17px;
        display: block;
        cursor: pointer;
        font: inherit;
        color: inherit;
        background-color: #2C303C;
        overflow: visible;
        transition-property: background;
        transition-duration: 0.15s;
        transition-timing-function: ease;
    }
    .hamburger.is-active {background-color: #13141A;}
    .hamburger-box {
        width: 22px;
        height: 18px;
        display: inline-block;
        position: relative;
    }
    .hamburger-inner {
        display: block;
        top: 1px;
        margin-top: -1px;
    }
    .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
        width: 22px;
        height: 2px;
        background-color: #fff;
        position: absolute;
        transition-property: transform, opacity;
        transition-duration: 0.15s;
        transition-timing-function: ease;
    }
    .hamburger-inner::before, .hamburger-inner::after {content: "";display: block; }
    .hamburger--slider-r .hamburger-inner::before {top: 9px;}
    .hamburger--slider-r .hamburger-inner::after {top: 17px; }
    .hamburger--slider-r.is-active .hamburger-inner {transform: translate3d(0, 8px, 0) rotate(-45deg); }
    .hamburger--slider-r.is-active .hamburger-inner::before {transform: rotate(45deg) translate3d(5.71429px, -6px, 0);opacity: 0; }
    .hamburger--slider-r.is-active .hamburger-inner::after {transform: translate3d(0, -17px, 0) rotate(90deg); }
}


/* ----------------------------------------------------------------------------
	header
---------------------------------------------------------------------------- */
header { padding-right: 30px; padding-left: 222px; padding-top: 2px; background: #171920; color: #fff; text-align: right; height: 80px; border-bottom: #83142B 3px solid;display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content:flex-end;justify-content:flex-end; -webkit-align-items: center; align-items: center;}
header a { color: #fff; text-decoration: none;}
header .hNav { font-size: 0; line-height: 1.0; margin: 4px 0 0;}
header .hNav li { display: inline-block; font-size: 1.3rem; position: relative; margin-right: 1px;}
header .hNav li:after { content: ""; width: 1px; height: 90%; position: absolute; right: -1px; top: 5%; background: #fff;}
header .hNav li a { display: inline-block; padding: 0 1.2em; transition: opacity 0.2s ease-out;}
header .hNav li span { display: inline-block; padding: 0 1.2em; opacity: 0.5; }
.pc header .hNav li a:hover { opacity: 0.6; }
header .hNav li.bsParking a { padding-right: 0; }
header .hNav li.bsParking:after { content: none;}

@media screen and ( max-width:1030px ){
    header { padding-right: 15px; padding-left: 172px; padding-top: 5px; height: 78px; }
    header .hNav { width: 100%;}
    header .hNav li a, header .hNav li span { padding: 0 1.1em;}
}
@media screen and ( max-width:970px ){
    #menuBtn { width:100vw; height: 52px; background: #171920; color: #fff; position: fixed; left: 0; top: 0; z-index: 100;}
    .topMenu { opacity: 0;visibility: hidden; position: fixed; left: 0; top: 52px; background : rgba(23, 25, 32, 0.94); z-index: 100; padding: 2% 6% 20%; width: 100vw; height: calc(100vh - 52px); overflow-y: scroll;}
    .topMenu.is-active { opacity: 1;visibility: visible; transition: opacity 0.3s ease-out;}
    .menuInner { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-start; justify-content:flex-start; -webkit-box-orient: vertical;-webkit-box-direction: reverse;flex-direction: column-reverse;}
    header { padding: 0; height: auto; margin-top: 2.1em; -webkit-flex-direction: column; flex-direction: column; -webkit-box-orient: vertical;/* -webkit-box-direction: reverse;flex-direction: column-reverse;*/ background: none; border: none; text-align: left;}
    header .hNav li { display: block; font-size: 1.4rem; margin: 0 0 1px 0;}
    header .hNav li:after { content: none;}
    header .hNav li a, header .hNav li span { display: block; padding: 0.6em 3px;}
}

#langSelectWrap { position: relative; margin: -10px 2.2em -15px 0; }
#langSelectWrap .langSelect { margin: 0; width: 104px; height: 32px;}
#MicrosoftTranslatorWidget { width: 104px !important; height: 32px !important; position: absolute; left: 0; top: 0; z-index: 10; overflow: hidden;}
#LauncherTranslatePhrase { width: 100% !important; height: 100% !important; opacity: 0; padding: 0 !important;}
#LauncherLogo { display: none !important;}
#WidgetLauncher { margin: 0 !important; width: 100% !important; height: 100% !important;}
@media screen and ( max-width:990px ){
    #langSelectWrap { margin-right: 1.2em; }
}
@media screen and ( max-width:970px ){
    #langSelectWrap { margin: 15px auto 0; width: 70%; }
    #langSelectWrap .langSelect { margin: 0 auto; width: 100%; height: 50px;}
    #MicrosoftTranslatorWidget { width: 100% !important; height: 50px !important; position: absolute; left: 0; top: 0; z-index: 10; overflow: hidden;}
    #LauncherTranslatePhrase { width: 100% !important; height: 100% !important; opacity: 0; padding: 0 !important;}
    #WidgetFloaterPanels { left: 50% !important; transform: translate(-80%, 0); top: 0 !important; }
    #__LanguageMenu_popup { width: 100vw !important; height: 80vh !important; overflow: auto;}
}


/*header .busParking { font-size: 1.3rem; display: inline-block; margin-right: 3.4em;}
header .busParking a { text-decoration: underline; color: rgba(255,255,255,0.75);}*/
.langSelect { margin-left: 2.2em; }
.langSelect li { position: relative;}
.langSelect a { display: block; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; transition: background 0.15s ease-out;}
.pc .langSelect a:not(.selected):hover { background:#434753; }
.langSelect a.selected { cursor: default; opacity: 0.5;}
.langSelect .trigger { border: #747579 1px solid; color: #B3B3B3; font-size: 1.1rem; padding: 0.8em 1.2em; padding-right: 40px; cursor: pointer; position: relative;}
/*.langSelect .trigger:after {
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translate(0%, -50%);
    border-style: solid;
    border-width: 4.5px 3.5px 0 3.5px;
    border-color: #747579 transparent transparent transparent;
    content: '';
}*/
.langSelect .trigger.is-active:after {
    border-width: 0 3.5px 4.5px 3.5px;
    border-color: transparent transparent #747579 transparent;
}

.langSelect .trigger + ul { display: none; background: #171920; border: #747579 1px solid; position: absolute; left: 50%; bottom: -10px; z-index: 100; transform: translate(-50%, 100%); width: 120%; text-align: left; font-size: 1.3rem;}
.langSelect .trigger + ul li { border-bottom: #747579 1px solid; }
.langSelect .trigger + ul li:last-child { border: none;}
.langSelect .trigger + ul li a { padding: 0.8em 1.1em;}

.langSelect .trigger + ul:before {
    content: "";width: 0;height: 0;
    border-style: solid;
    border-width: 0 8px 8px 8px;
    border-color: transparent transparent #747579 transparent;
    position: absolute; left: 50%;
    top: 0;
    transform: translate(-50%, -100%);
}
.langSelect .trigger + ul:after {
    content: "";width: 0;height: 0;
    border-style: solid;
    border-width: 0 8px 8px 8px;
    border-color: transparent transparent #171920 transparent;
    position: absolute; left: 50%;
    top: 1px;
    transform: translate(-50%, -100%);
}
@media screen and ( max-width:980px ){
    .langSelect { margin: -10px 0 0; }
    .langSelect .trigger { padding: 0.6em 1.5em; padding-right: 40px;}
}
@media screen and ( max-width:970px ){
    
    .langSelect { width: 100%; margin: 0 0 2em;}
    .langSelect .trigger { font-size: 1.5rem; padding: 0.95em 1.2em; padding-right: 40px; }
    .langSelect .trigger:after { border-width: 6.5px 5.5px 0 5.5px; right: 15px;}
    .langSelect .trigger.is-active:after { border-width: 0 5.5px 6.5px 5.5px;}
    
    .langSelect .trigger + ul { position: relative; left: auto; bottom: auto; transform: translate(0%, -1px); width: 100%; font-size: 1.4rem; }
    .langSelect .trigger + ul li a { padding: 0.95em 1.2em;}
    .langSelect .trigger + ul:before,.langSelect .trigger + ul:after { content: none;}
    
}

#gnavi { width: 100%; background: #2E3240; color: #fff; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center;}
#gnavi ul { font-size: 0; letter-spacing: 0; width: 100%; padding-left: 220px; display: -webkit-flex; display: flex; -webkit-justify-content:space-between; justify-content:space-between;}
#gnavi li { font-size: 1.6rem; flex-grow:1; overflow: hidden;}
#gnavi li a, #gnavi li span { color: #fff; text-decoration: none; height: 58px; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; position: relative; z-index: 2; transition: background 0.15s ease-out, background-color 0.4s ease-out; }
#gnavi li span { opacity: 0.5;}
#gnavi li a:before { content: ""; display: block; width: 0; height: 0; position: absolute; right: 4px; bottom: 4px; transform: translate(120%, 120%); z-index: -1; opacity: 0.8; border-style: solid;border-width: 0 0 7px 7px;border-color: transparent transparent #fff transparent; transition: transform 0.15s ease-out; }
.pc #gnavi li a:hover { background:#83142B; }
.pc #gnavi li a:hover:before { transform: translate(0%, 0%); }

#gnavi.fixed { position: fixed; left: 0; top: 0; z-index: 100; }
#gnavi.fixed li a, #gnavi.fixed li span { height: 50px; }

#gnavi li.visit a:after { content: ""; width: 80%; height: 72%; background:#83142B; display: block; position: absolute; left: 10%; top: 16%; z-index: -2;}


@media screen and ( max-width:980px ){
    #gnavi ul { padding-left: 0px; }
    #gnavi li { font-size: 1.5rem; }
    #gnavi li a, #gnavi li span { height: 50px; }
    #gnavi li.visit a:after { width: 100%; height: 100%; left: 0; top: 0;}
}
@media screen and ( max-width:970px ){
    #gnavi { background: none;}
    #gnavi ul { display: block;}
    #gnavi li { border-bottom: rgba(255, 255, 255, 0.4) 1px solid;}
    #gnavi li a, #gnavi li span { height: 2.8em; -webkit-justify-content:flex-start; justify-content:flex-start; position: relative; padding: 1px 3px 0; }
    #gnavi li.visit a:after { opacity: 0.4;}
}


/* ----------------------------------------------------------------------------
	contents
---------------------------------------------------------------------------- */
.contents { width: 100%; max-width: 1100px; padding: 72px 30px 76px; margin: 0 auto; text-align: left;}
h1.pageTtl { font-size: 3.2rem; font-weight: bold; letter-spacing: 0.8px; text-align: center;}
h1.pageTtl p { color: #A41936; font-size: 1.3rem; line-height: 1.3; display: block; font-weight: 600; margin-top: 1em;}
h1.pageTtl span { position: relative; display: inline-block; padding: 0 14px;}
h1.pageTtl span:before, h1.pageTtl span:after { content: ""; width: 14px; height: 1px; display: block; position: absolute; left: 0; top: 50%;transform: translate(-100%, 0); background: #A41936;}
h1.pageTtl span:after {  left: auto; right: 2px; transform: translate(100%, 0);}

@media screen and ( max-width:980px ){
    .contents { padding: 6.2% 24px 10%;}
}
@media screen and ( max-width:700px ){
    .contents { padding: 6.5% 18px 10%;}
    h1.pageTtl p { margin-top: 0.8em;}
}
@media screen and ( max-width:500px ){
    .contents { padding: 8.0% 12px 13%;}
    h1.pageTtl { font-size: 2.8rem; letter-spacing: 0.8px;}
    h1.pageTtl p { margin-top: 0.5em;}
    h1.pageTtl span { padding: 0 11px;}
}


/* ----------------------------------------------------------------------------
	footer
---------------------------------------------------------------------------- */
#goTop { position: absolute; right: 56px; top: -36px; width: 70px; height: 70px; background: url(../img/pt_bg.svg) no-repeat center top; background-size: 70px 70px; text-align: center; padding-top: 6px; cursor: pointer;-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; opacity: 0; visibility: hidden;}
#goTop.active { opacity: 1; visibility: visible;}
#goTop p { font-size: 1.3rem; font-weight: bold; color: #A41936; letter-spacing: 1px; padding-left: 1px; }
#goTop span { width: 16px; display: block; margin: 0 auto 4px; transition: 0.1s transform ease-out;}

.pc #goTop:hover span { transform: translate( 0, -2px); }

footer { background: #2E3240; color: #fff; padding: 40px 30px 12px; text-align: left; font-size: 1.3rem; position: relative;}
footer a { color: #fff; text-decoration: none;}
footer .logo { width: 192px; opacity: 0.25 !important; margin-bottom: 28px; margin-left: -1px;}
footer .lBox { float: left; margin-bottom: 18px;}
footer .lBox p { opacity: 0.5; }
footer .gMapLink { border: #82848C 1px solid; display: block; font-size: 1.0rem; padding: 0.5em 1.4em; padding-left: 1.8em; margin-left: 20px; background: url(../img/tri.svg) no-repeat 6px center; background-size: 3px 4px; transition: background 0.15s ease-out;}
.pc footer .gMapLink:hover { background-color: #434753;}
footer .lBox .inlineFlex { margin-bottom: 3px;}
footer .lBox .telLink { margin-right: 1.5em; display: inline-block;}
footer .lBox .time { white-space: nowrap; font-size: 1.1rem; letter-spacing: 0.5px;}

footer .rBox { float: right; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content:flex-end; justify-content:flex-end; padding-bottom: 28px;}
footer .socialList { width: 22px; text-align: center; margin-left: 30px;}
footer .socialList li { margin-bottom: 21px;}
footer .socialList li img { height: 22px;}
footer ul:not(.socialList) li { width: 13.2em; padding-left: 15px; margin-bottom: 12px; opacity: 0.7; position: relative;}
footer ul:not(.socialList) li:before { content: ""; display: block; width: 0;height: 0;border-style: solid;border-width: 2.5px 0 2.5px 4px;border-color: transparent transparent transparent #993146; position: absolute; left: 4px; top: 50%; transform: translate(0%, -50%);}
.pc footer ul li a { transition: opacity 0.15s ease-out; }
.pc footer ul li a:hover { opacity: 0.7; }

#copyRight { text-align: center; position: relative; clear: both; font-size: 1.2rem; letter-spacing: 0.5px;}
#copyRight:before { content: ""; width: 100vw; height: 1px; background: #83142B; position:absolute; left: 50%; top: 50%; transform: translate(-50%, 0%); z-index: 0;}
#copyRight span { display: inline-block; background:#2E3240; color: #6D707A; position: relative; z-index: 1; padding: 0 1.2em;}

@media screen and ( max-width:980px ){
    footer { padding: 28px 25px 15px; }
    footer .rBox { float: none; -webkit-justify-content:space-between; justify-content:space-between; padding-bottom: 4%;}
    footer .socialList { width: 26px; margin: 0 6px 0 30px;}
    footer .socialList li img { height: 26px;}
    footer .lBox { float: none; margin-bottom: 7%; display: -webkit-flex; display: flex;-webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center;}
    footer .logo { width: 180px; margin: 0 28px 0 0;}
}
@media screen and ( max-width:630px ){
    #goTop { display: none;}
    footer { padding: 28px 22px 15px; }
    footer ul:not(.socialList) li { width: 11.5em; padding-left: 13px;}
    footer .socialList { width: 26px; margin: 0 0 0 18px;}
}
@media screen and ( max-width:544px ){
    footer { padding: 28px 15px 10px; }
    footer .rBox { padding: 0;}
    footer .socialList { width: 100%; margin: 3% auto 6%; padding: 0 28%;display: -webkit-flex; display: flex; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items: center; align-items: center;}
    footer .socialList li { margin: 0;}
    footer .socialList li img { height: 5vw;}
}
@media screen and ( max-width:482px ){
    footer { padding: 8% 15px 5px; }
    footer .rBox { width: 80%; margin: 0 auto 7%;}
    footer .socialList { margin: 0 auto; padding: 0 22%;}
    footer .socialList li img { height: 7vw;}
    footer ul:not(.socialList) { display: none;}
    footer .lBox { margin-bottom: 9%; -webkit-flex-direction: column; flex-direction: column; }
    footer .logo { width: 60%; max-width:240px; margin: 0 auto 5%;}
    footer .logo + div { display: inline-block;}
    #copyRight { font-size: 1.1rem; letter-spacing: 0.4px;}
}