@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic&display=swap');

/*---------------------------------------------------------------------------------------------------------------------
	ベーススタイル
---------------------------------------------------------------------------------------------------------------------*/
html,
body { width: 100%; font-size: 16px; overflow-x: hidden; overflow-y: auto; }
body { font-family: "Zen Maru Gothic", sans-serif; color: #000; line-height: 1.9; overflow:hidden; position:relative; }
html.nonSc,
body.nonSc { overflow-y: hidden; }

*, *::before, *::after { box-sizing: border-box; }

/*a*/
a { text-decoration: none; transition: 0.6s; }
a img { transition: 0.6s; }

/*img*/
img { width: 100%; max-width: 100%; }

/*display*/
.spOnly { display: none !important; }

@media screen and (min-width: 751px) {
    .over a:hover,
     a.over:hover { opacity: 0.6; }
}

@media screen and (max-width: 750px) {
	.pcOnly { display: none !important; }
	.spOnly { display: block !important; }
}

/*---------------------------------------------------------------------------------------------------------------------
	share
---------------------------------------------------------------------------------------------------------------------*/
/* コンテンツサイズ */
.contentsOuter { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.contentsLOuter { max-width: 1300px; margin: 0 auto; padding: 0 20px; }

/* ボタン01 */
.common_btn { background-color: #014fa4; color: #fff; padding: 0 20px 1px; border-radius: 40px; font-size: 1.69rem; letter-spacing: 0.07em; text-align: center; display: block; }

/* ボタン02 */
.arrow_btn { display: inline-block; border-radius: 40px; background-color: #0767b1; padding: 2.9% 1.5%; max-width: 300px; width: 23vw; color: #fff; font-size: 1.5rem; text-align: center; }
.arrow_btn span { background: url("/parking/recruit/common/images/common_arrow_white.png") no-repeat right 3px center / contain; padding: 0 12%; display: block; line-height: 1; transition: 0.2s; }
.arrow_btn:hover span { background-position: right center; }

@media screen and (max-width: 1340px) {
	.arrow_btn { font-size: 1.87vw; }
}

@media screen and (max-width: 750px) {
	.arrow_btn { max-width: 100%; width: 60vw; font-size: 4.4vw; padding: 4% 2.5%; border-radius: 50px; }
	.arrow_btn span { line-height: 1.15; background-position: right center; }
}

/*---------------------------------------------------------------------------------------------------------------------
	header
---------------------------------------------------------------------------------------------------------------------*/
#headerWrap { padding: 10px 0; width: 100%; position: fixed; z-index: 99; background-color: #fff; }
#headerWrap .contentsOuter { display: flex; justify-content: space-between; padding-left: 5px; padding-right: 5px; }

/*logo*/
#headerWrap #headerLogo { flex: 1; max-width: 525px; }
#headerWrap #headerLogo a { display: flex; align-items: flex-end; justify-content: space-between; position: relative; z-index: 101; color: #000; }
#headerWrap #headerLogo a img { width: 100%; }
#headerWrap #headerLogo .logoBox img { width: 260px; }
#headerWrap #headerLogo a p { line-height: 1; }
#headerWrap #headerLogo a p img { width: 245px; }

#headerWrap #headerLogo a:hover { opacity: 0.6; }

/*link*/
#headerWrap #haederLink { display: flex; align-items: center; justify-content: flex-end; flex: 1; }
#headerWrap #haederLink #headerMenu #hamMenu { position: fixed; top: 0; left: 100%; transition: 0.7s; width: 100%; z-index: 100; }
#headerWrap #haederLink #headerMenu #hamMenu #humInner { width: 100%; }
#headerWrap #haederLink #headerMenu #hamMenu #humInner #humBox { padding: 0; height: 100vh; background-color: #fff; }
#headerWrap #haederLink #headerMenu #hamMenu #humInner #humBox ul { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; min-width: 700px; padding: 100px 20px 0; max-width: 1080px; margin: 0 auto; }
#headerWrap #haederLink #headerMenu #hamMenu #humInner #humBox ul li { border-bottom: 1px solid #b2cadf; width: 47.5%; }
#headerWrap #haederLink #headerMenu #hamMenu #humInner #humBox ul li a { font-size: 1.8rem; color: #004e96; font-weight: bold; line-height: 1.2; padding-top: 25px; padding-bottom: 25px; display: flex; flex-direction: column; justify-content: center; height: 100%; }
#headerWrap #haederLink #headerMenu #hamMenu #humInner #humBox ul li a span { font-size: 1.1rem; color: #000; font-family: "Roboto Condensed", serif; font-weight: 300; display: inline-block; margin-left: 4px; margin-top: 5px; line-height: 1; }

#headerWrap #haederLink #headerMenu #hamMenu #humInner #humBox .linkBox { margin-top: 40px; }
#headerWrap #haederLink #headerMenu #hamMenu #humInner #humBox .linkBox a.graBtn { padding: 7px 60px 9px; }
#headerWrap #haederLink #headerMenu #hamMenu #humInner #humBox .linkBox { margin: 50px auto 0; max-width: 250px; }
#headerWrap #haederLink #headerMenu #hamMenu #humInner #humBox .linkBox .common_btn { position: relative; background: #014fa4 url("/parking/recruit/common/images/common_icon_win.png") no-repeat center right 17px; }


#headerWrap #haederLink #headerMenu #hamMenu #humInner #humBox .toLink { position: absolute; top: 28px; width: 100%; left: 0; right: 0; padding: 0 20px; max-width: 1240px; margin: 0 auto; text-align: right; }
#headerWrap #haederLink #headerMenu #hamMenu #humInner #humBox .toLink a { display: inline-block; color: #004e96; padding-right: 50px; }
#headerWrap #haederLink #headerMenu #hamMenu #humInner #humBox .toLink a::after { content: url("/parking/recruit/common/images/icon_win.png"); margin-left: 5px; }

#headerWrap #haederLink #headerMenu #hamMenu #humInner #humBox .bgTxt { pointer-events: none; text-align: left; position: absolute; left: -14px; bottom: -3vw; color: #93c5ff; font-size: 19.2vw; font-family: "Roboto Condensed", serif; opacity: 0.15; line-height: 1; width: 15em; overflow: hidden; }

/*close*/
#headerWrap #haederLink #headerMenu #headerMenuBtn p { font-size: 0.6rem; }
#headerWrap #haederLink #headerMenu #headerMenuBtn:hover { opacity: 0.7; }
#headerWrap #haederLink #headerMenu #headerMenuBtn { width: 50px; height: 50px; padding: 10px 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; cursor: pointer; transition: all .4s; position: relative; z-index: 102; margin-left: 20px; }
#headerWrap #haederLink #headerMenu #headerMenuBtn > div { position: relative; width: 26px; height: 20px; }
#headerWrap #haederLink #headerMenu #headerMenuBtn > div span,
#headerWrap #haederLink #headerMenu #headerMenuBtn > div::before,
#headerWrap #haederLink #headerMenu #headerMenuBtn > div::after { content: ''; display: inline-block; transition: transform .4s; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: #7e7e7e; width: 100%; }
#headerWrap #haederLink #headerMenu #headerMenuBtn > div span { top: calc(50% - 1px); }
#headerWrap #haederLink #headerMenu #headerMenuBtn > div::before { top: 0; }
#headerWrap #haederLink #headerMenu #headerMenuBtn > div::after { bottom: 0; }

/*open*/
#headerWrap.gMenuOn #haederLink #headerMenu #headerMenuBtn { background: #fff; border-radius: 10px; }
#headerWrap.gMenuOn #haederLink #headerMenu #headerMenuBtn > div span { opacity: 0; }
#headerWrap.gMenuOn #haederLink #headerMenu #headerMenuBtn > div::before { top: 5px; left: 0; transform: translateY(4px) rotate(-45deg); width: 26px; }
#headerWrap.gMenuOn #haederLink #headerMenu #headerMenuBtn > div::after { bottom: 5px; right: 0; transform: translateY(-4px) rotate(45deg); width: 26px; }
#headerWrap.gMenuOn #haederLink #headerMenu #hamMenu { left: 0; min-width: 1200px; }

@media screen and (max-width: 1240px) {
	#headerWrap.gMenuOn #haederLink #headerMenu #hamMenu { min-width: 0; }
}

@media screen and (max-width: 750px) {

    #headerWrap { align-items: center; padding: 0 10px 0 0; margin: 0 auto; }
    #headerWrap::after { content:''; display:block; width:100%; height:100%; position:absolute; left:0; top:0; z-index:100; }
    #headerWrap.gMenuOn::after { background-color:#fff; } 
	
	#headerWrap .contentsOuter { padding: 0; }
    
    /*logo*/
    #headerWrap #headerLogo { width: 43%; max-width: 100%; margin-left: 0; display: flex; align-items: center; }
	#headerWrap #headerLogo a { display: block; width: 100%; }
	#headerWrap #headerLogo a:hover { opacity: 1; }
    #headerWrap #headerLogo .logoBox { width: 43%; max-width: 190px; display: inline-block; }
	#headerWrap #headerLogo a p { display: inline-block; width: 31%; max-width: 135px; margin-left: 1%; }

    /*link*/
    #headerWrap #haederLink { flex: 0; }
    #headerWrap #haederLink > .linkBox { display: none; }
    #headerWrap #haederLink #headerMenu #hamMenu { max-height: 100vh; left: 100%; transition: 0.7s; z-index: 100; }
    #headerWrap #haederLink #headerMenu #hamMenu #humInner { overflow-y: scroll; max-height: 100vh; }
    #headerWrap #haederLink #headerMenu #hamMenu #humInner #humBox { padding: 0 5% 50px 5%; width: 100%; height: auto; }
    #headerWrap #haederLink #headerMenu #hamMenu #humInner #humBox ul { display: block; width: 100%; padding: 10px 0 0; min-width: auto; }
    #headerWrap #haederLink #headerMenu #hamMenu #humInner #humBox ul li { width: 100%; }
    #headerWrap #haederLink #headerMenu #hamMenu #humInner #humBox ul li a { font-size: 1.6rem; padding-top: 30px; padding-bottom: 30px; }
    #headerWrap #haederLink #headerMenu #hamMenu #humInner #humBox ul li a span { font-size: 1rem; }
    #headerWrap #haederLink #headerMenu #hamMenu #humInner #humBox .toLink { position: static; font-size: 0.7rem; padding-top: 80px; text-align: right; padding-right: 0; }
    #headerWrap #haederLink #headerMenu #hamMenu #humInner #humBox .toLink a { padding-right: 0; }
    #headerWrap #haederLink #headerMenu #hamMenu #humInner #humBox .toLink a::after { margin-left: 5px; }
    #headerWrap #haederLink #headerMenu #hamMenu #humInner #humBox .linkBox { text-align: center; margin-top: 40px; max-width: 300px; width: 70%; }
    #headerWrap #haederLink #headerMenu #hamMenu #humInner #humBox .linkBox .common_btn { font-size: 1rem; padding: 7px 60px 9px; background-size: 16px 16px; background-position: center right 22px; }

    /*close*/
    #headerWrap #haederLink #headerMenu #headerMenuBtn { margin-top: 10px; }

    /*open*/
    #headerWrap.gMenuOn #haederLink #headerMenu #hamMenu { min-width: 100%; }

}

/*---------------------------------------------------------------------------------------------------------------------
    panNavi
---------------------------------------------------------------------------------------------------------------------*/
#panNavi ul { display: flex; flex-wrap: wrap; font-size: 90%; color: #666; }
#panNavi ul li:nth-child(n+2) { position: relative; padding-left: 20px; }
#panNavi ul li:nth-child(n+2)::before { position: absolute; content: ">"; left: 5px; top: -2px; }
#panNavi ul li a { color: #666; text-decoration: underline; }
#panNavi ul li a:hover { opacity: 0.7; }

@media screen and (max-width: 750px) {
    #panNavi { padding-bottom: 20px; }
}

/*---------------------------------------------------------------------------------------------------------------------
	pageTop
---------------------------------------------------------------------------------------------------------------------*/
#pageTop { width: 60px; display: block; position: fixed; right: 20px; bottom: 20px; transition: transform .4s ease-out; transform: translateY(150%); }
#pageTop a:hover { opacity: 0.7; }
#pageTop.sc { transform: translateY(0); }

@media screen and (max-width: 750px) {
    #pageTop { width: 50px; right: 10px; bottom: 10px; }
}

/*---------------------------------------------------------------------------------------------------------------------
	bottomCatchphrase
---------------------------------------------------------------------------------------------------------------------*/
#bottomCatchphraseSec { padding: 90px 0; background: url("/parking/recruit/common/images/bottom_catchphrase_bg.png") no-repeat bottom center; }
#bottomCatchphraseSec #bottomCatchphraseTxt { max-width: 578px; width: 44vw; text-align: center; margin: 0 auto; }

@media screen and (max-width: 1340px) {
	#bottomCatchphraseSec { padding: 6.6vw 0 5.9vw; }
}

@media screen and (max-width: 750px) {
	#bottomCatchphraseSec { padding: 9.8vw 0 8vw; }
	#bottomCatchphraseSec #bottomCatchphraseTxt { width: 100%; max-width: 100%; }
}

/*---------------------------------------------------------------------------------------------------------------------
	footer
---------------------------------------------------------------------------------------------------------------------*/
#footerWrap { background: #d4d5d9; padding: 20px; display: flex; justify-content: center; }
#footerWrap #footerSec #footerTxt { font-size: 1rem; line-height: 1.4; }
#footerWrap #footerSec #footerLink { font-size: 1.4rem; text-align: right; margin-top: 5px; }
#footerWrap #footerSec #footerLink a { display: inline-block; position: relative; color: #000; }
#footerWrap #footerSec #footerLink a::after { content: ""; position: absolute; bottom: 0.3em; left: 0; display: block; width: 0; height: 1px; background-color: #000; transition: 0.4s; }
#footerWrap #footerSec #footerLink a:hover::after { width: 100%; }
#footerWrap #footerSec #footerLink span { padding-right: 25px; }
#footerWrap #footerSec #footerLink span::after { content: url("/parking/recruit/common/images/icon_win.png"); position: absolute; right: 0; top: 0; display: block; }
#footerWrap #footerSec #footerCopy { font-size: 0.8rem; display: block; text-align: center; margin-top: 7px; }


@media screen and (max-width: 750px) {
	
	#footerWrap #footerSec #footerLink { font-size: 1rem; line-height: 1.4; text-align: left; }
	#footerWrap #footerSec #footerLink a:hover::after { width: 0; }
    #footerWrap #footerSec #footerLink span { padding-right: 0; }
	#footerWrap #footerSec #footerLink span::before,
	#footerWrap #footerSec #footerLink span::after { width: 10px; top: 1em; }
    #footerWrap #footerSec #footerLink span::after { position: static; display: inline-block; margin-left: 5px; }
	#footerWrap #footerSec #footerCopy { margin-top: 15px; font-size: 0.7rem; }
	
}

/*---------------------------------------------------------------------------------------------------------------------
	contents
---------------------------------------------------------------------------------------------------------------------*/
.contentsWrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.contentsWrapW { width: 100%; margin-top: 106px; }

@media screen and (max-width: 1200px) {
    .contentsWrap { max-width: 94%; padding: 0; }
}

@media screen and (max-width: 750px) {
	.contentsWrapW { margin-top: 60px; }
}