@charset "UTF-8"; /* CSS Document */ /*-------------------------------------------------------------------------------------------------------------------------------------------------------- index.html --------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*mvSec*/ #mvSec { max-width: 1960px; margin: 0 auto; position: relative; } #mvSec #mvTitle { position: absolute; top: 87px; left: 429px; width: 586px; } #mvSec #mvTitle p { font-size: 1.35rem; margin-top: 25px; } #mvSec #mvText { position: absolute; bottom: 0; left: 0; right: 0; } #mvSec #mvImg { padding-top: 15px; padding-bottom: 222px; } @media screen and (max-width: 1920px) { #mvSec #mvTitle { top: 4.6vw; left: 20.7vw; width: 30.5vw; } #mvSec #mvTitle p { font-size: 1.07vw; margin-top: 1.27vw; } #mvSec #mvImg { padding-top: 0.8vw; padding-bottom: 12vw; } } @media screen and (max-width: 750px) { #mvSec #mvTitle { width: 100%; top: 3.6vw; left: 0; right: 0; text-align: center; } #mvSec #mvTitle h1 { width: 85vw; margin: 0 auto; } #mvSec #mvTitle p { font-size: 4vw; width: 85%; margin: 1.5vw auto 0; line-height: 1.6; } #mvSec #mvImg { padding-top: 19.5vw; padding-bottom: 18.5vw; } } /*1世紀を超えて受け継ぐモノづくりへの想い*/ #historySec { background: url("/parking/recruit/history/images/history_bg_pc.png") no-repeat center top; padding: 91px 0; } #historySec .contentsWrap { max-width: 1920px; } #historySec .contentsTitle { max-width: 1038px; margin: 0 auto; } #historySec h3 { max-width: 158px; margin: 12px auto 0; } #historySec .historyList { max-width: 1400px; margin: 0 auto; position: relative; } #historySec .historyList li { width: 617px; position: relative; } #historySec .historyList li::before, #historySec .historyList li::after { content: ""; display: block; position: absolute; } #historySec .historyList li::before { top: calc(50% - 11px); height: 2px; width: 150px; } #historySec .historyList li::after { top: calc(50% - 21px); height: 23px; width: 23px; border-radius: 50%; } #historySec .historyList li img { max-width: 472px; } #historySec .historyList li:nth-child(2n+1) { left: 99px; position: absolute; } #historySec .historyList li:nth-child(2n+1)::before { right: 15px; } #historySec .historyList li:nth-child(2n+1)::after { right: 3px; } #historySec .historyList li:nth-child(2n) { right: 79px; margin-left: auto; text-align: right; } #historySec .historyList li:nth-child(2n)::before { left: -5px; } #historySec .historyList li:nth-child(2n)::after { left: -15px; } #historySec #historyArea01 #historyList01 li::before, #historySec #historyArea01 #historyList01 li::after { background-color: #014fa4; } #historySec #historyArea02 #historyList02 li::before, #historySec #historyArea02 #historyList02 li::after { background-color: #1eb4d7; } #historySec #historyArea01 #historyList01 li.historyItem01 { top: -287px; } #historySec #historyArea01 #historyList01 li.historyItem01::before { top: 205px; } #historySec #historyArea01 #historyList01 li.historyItem01::after { top: 194px; } #historySec #historyArea01 #historyList01 li.historyItem02 { margin-top: 176px; } #historySec #historyArea01 #historyList01 li.historyItem03 { top: 47px; } #historySec #historyArea01 #historyList01 li.historyItem03::before { top: calc(50% - 25px); } #historySec #historyArea01 #historyList01 li.historyItem03::after { top: calc(50% - 37px); } #historySec #historyArea01 #historyList01 li.historyItem04 { margin-top: 65px; } #historySec #historyArea01 #historyList01 li.historyItem04::before { top: calc(50% - 45px); } #historySec #historyArea01 #historyList01 li.historyItem04::after { top: calc(50% - 56px); } #historySec #historyArea01 #historyList01 li.historyItem05 { top: 474px; } #historySec #historyArea01 #historyList01 li.historyItem05::before { top: calc(50% - 48px); } #historySec #historyArea01 #historyList01 li.historyItem05::after { top: calc(50% - 58px); } #historySec #historyArea01 #historyList01 li.historyItem06 { margin-top: 33px; } #historySec #historyArea01 #historyList01 li.historyItem06::before { top: calc(50% - 106px); } #historySec #historyArea01 #historyList01 li.historyItem06::after { top: calc(50% - 118px); } #historySec #historyArea01 #historyList01 li.historyItem07 { top: 733px; } #historySec #historyArea01 #historyList01 li.historyItem07::before { top: calc(50% + 17px); } #historySec #historyArea01 #historyList01 li.historyItem07::after { top: calc(50% + 6px); } #historySec #historyArea02 { margin-top: 23px; } #historySec #historyArea02 #historyList02 li.historyItem08 { top: -81px; } #historySec #historyArea02 #historyList02 li.historyItem08::before { top: 74px; } #historySec #historyArea02 #historyList02 li.historyItem08::after { top: 64px; } #historySec #historyArea02 #historyList02 li.historyItem09 { margin-top: 125px; } #historySec #historyArea02 #historyList02 li.historyItem09::before { top: calc(50% + 26px); } #historySec #historyArea02 #historyList02 li.historyItem09::after { top: calc(50% + 16px); } #historySec #historyArea02 #historyList02 li.historyItem10 { top: 170px; } #historySec #historyArea02 #historyList02 li.historyItem10::before { top: calc(50% - 4px); } #historySec #historyArea02 #historyList02 li.historyItem10::after { top: calc(50% - 15px); } #historySec #historyArea02 #historyList02 li.historyItem11 { margin-top: 122px; } #historySec #historyArea02 #historyList02 li.historyItem12 { top: 545px; } #historySec #historyArea02 #historyList02 li.historyItem12::before { top: calc(50% - 50px); } #historySec #historyArea02 #historyList02 li.historyItem12::after { top: calc(50% - 61px); } #historySec #historyArea02 #historyList02 li.historyItem13 { margin-top: 125px; } #historySec #historyArea02 #historyList02 li.historyItem14 { top: 845px; } #historySec #historyArea02 #historyList02 li.historyItem15 { margin-top: 75px; } #historySec #historyArea02 #historyList02 li.historyItem16 { top: 1040px; } #historySec #historyArea02 #historyList02 li.historyItem16 .historyItem16Line { position: absolute; width: 40px; top: calc(50% + 10px); transform: translate(-20px, -50%); } #historySec #historyArea02 #historyList02 li.historyItem16::before { top: calc(50% - 15px); width: 114px; } #historySec #historyArea02 #historyList02 li.historyItem16::after { top: calc(50% - 26px); } #historySec #historyArea02 #historyList02 li.historyItem17 { margin-top: 55px; } #historySec #historyArea02 #historyList02 li.historyItem18 { top: 1518px; } #historySec #historyArea02 #historyList02 li.historyItem18::before { top: calc(50% - 50px); } #historySec #historyArea02 #historyList02 li.historyItem18::after { top: calc(50% - 61px); } #historySec #historyFuture { max-width: 200px; margin: 85px auto 0; } @media screen and (max-width: 1542px) { #historySec { padding: 6vw 0; background: url("/parking/recruit/history/images/history_bg_res.png") no-repeat center top / 100%; } #historySec .contentsTitle { width: 67.5vw; } #historySec h3 { margin-top: 0.8vw; width: 10.1vw; } #historySec .historyList li { width: 40.1vw; } #historySec .historyList li::before { top: calc(50% - 0.6vw); width: 9.7vw; } #historySec .historyList li::after { top: calc(50% - 1.3vw); height: 1.47vw; width: 1.47vw; } #historySec .historyList li img { width: 31.3vw; max-width: 100%; position: relative; } #historySec .historyList li:nth-child(2n+1) { left: calc(50% - 39vw); } #historySec .historyList li:nth-child(2n+1)::before { right: 0.96vw; } #historySec .historyList li:nth-child(2n+1)::after { right: 0.4vw; } #historySec .historyList li:nth-child(2n) { right: calc(50% - 40.2vw); } #historySec .historyList li:nth-child(2n)::before { left: -0.01vw; } #historySec .historyList li:nth-child(2n)::after { left: -0.8vw; } #historySec #historyArea01 #historyList01 li.historyItem01 { top: -18.5vw; } #historySec #historyArea01 #historyList01 li.historyItem01::before { top: 13.25vw; } #historySec #historyArea01 #historyList01 li.historyItem01::after { top: 12.6vw; } #historySec #historyArea01 #historyList01 li.historyItem02 { margin-top: 11.42vw; } #historySec #historyArea01 #historyList01 li.historyItem03 { top: 3.1vw; } #historySec #historyArea01 #historyList01 li.historyItem03::before { top: calc(50% - 1.8vw); } #historySec #historyArea01 #historyList01 li.historyItem03::after { top: calc(50% - 2.4vw); } #historySec #historyArea01 #historyList01 li.historyItem04 { margin-top: 3.85vw; } #historySec #historyArea01 #historyList01 li.historyItem04::before { top: calc(50% - 3vw); } #historySec #historyArea01 #historyList01 li.historyItem04::after { top: calc(50% - 3.6vw); } #historySec #historyArea01 #historyList01 li.historyItem05 { top: 30.8vw; } #historySec #historyArea01 #historyList01 li.historyItem05::before { top: calc(50% - 3vw); } #historySec #historyArea01 #historyList01 li.historyItem05::after { top: calc(50% - 3.8vw); } #historySec #historyArea01 #historyList01 li.historyItem06 { margin-top: 2.14vw; } #historySec #historyArea01 #historyList01 li.historyItem06::before { top: calc(50% - 6.9vw); } #historySec #historyArea01 #historyList01 li.historyItem06::after { top: calc(50% - 7.6vw); } #historySec #historyArea01 #historyList01 li.historyItem07 { top: 47.6vw; } #historySec #historyArea01 #historyList01 li.historyItem07::before { top: calc(50% + 1vw); } #historySec #historyArea01 #historyList01 li.historyItem07::after { top: calc(50% + 0.3vw); } #historySec #historyArea02 { margin-top: -1%; } #historySec #historyArea02 #historyList02 li.historyItem08 { top: -5.5vw; } #historySec #historyArea02 #historyList02 li.historyItem08::before { top: 4.8vw; } #historySec #historyArea02 #historyList02 li.historyItem08::after { top: 4.1vw; } #historySec #historyArea02 #historyList02 li.historyItem09 { margin-top: 8.3vw; } #historySec #historyArea02 #historyList02 li.historyItem09::before { top: calc(50% + 2vw); } #historySec #historyArea02 #historyList02 li.historyItem09::after { top: calc(50% + 1.5vw); } #historySec #historyArea02 #historyList02 li.historyItem10 { top: 11.2vw; } #historySec #historyArea02 #historyList02 li.historyItem10::before { top: calc(50% - 0.2vw); } #historySec #historyArea02 #historyList02 li.historyItem10::after { top: calc(50% - 0.9vw); } #historySec #historyArea02 #historyList02 li.historyItem11 { margin-top: 8vw; } #historySec #historyArea02 #historyList02 li.historyItem12 { top: 35.8vw; } #historySec #historyArea02 #historyList02 li.historyItem12::before { top: calc(50% - 3.4vw); } #historySec #historyArea02 #historyList02 li.historyItem12::after { top: calc(50% - 4.1vw); } #historySec #historyArea02 #historyList02 li.historyItem13 { margin-top: 8vw; } #historySec #historyArea02 #historyList02 li.historyItem14 { top: 55.4vw; } #historySec #historyArea02 #historyList02 li.historyItem15 { margin-top: 4vw; } #historySec #historyArea02 #historyList02 li.historyItem16 { top: 68.5vw; } #historySec #historyArea02 #historyList02 li.historyItem16 .historyItem16Line { width: 2.6vw; transform: translate(-1.5vw, -50%); } #historySec #historyArea02 #historyList02 li.historyItem16::before { top: calc(50% - 1.6vw); width: 7vw; } #historySec #historyArea02 #historyList02 li.historyItem16::after { top: calc(50% - 2.3vw); } #historySec #historyArea02 #historyList02 li.historyItem17 { margin-top: 1vw; } #historySec #historyArea02 #historyList02 li.historyItem18 { top: 97.2vw; } #historySec #historyArea02 #historyList02 li.historyItem18::before { top: calc(50% - 2.1vw); } #historySec #historyArea02 #historyList02 li.historyItem18::after { top: calc(50% - 2.7vw); } #historySec #historyFuture { width: 12.97vw; margin-top: 5.3vw; } } @media screen and (max-width: 1500px) { #historySec #historyArea02 { margin-top: -2vw; } #historySec #historyFuture { margin-top: 4.8vw; } } @media screen and (max-width: 750px) { #historySec { background: #d7d7d7 url("/parking/recruit/history/images/history_bg_sp.png") no-repeat center top / contain; position: relative; } #historySec::before, #historySec::after { content: ""; display: block; position: absolute; width: 100%; left: 0; right: 0; background-color: #014fa4; } #historySec::before { top: 0; height: 16vw; } #historySec::after { bottom: 0; height: 16vw; } #historySec .contentsWrap { position: relative; } #historySec .contentsTitle { width: 94vw; } #historySec h3 { margin-top: 3.5vw; width: 29vw; } #historySec .historyList { width: 94%; } #historySec .historyList li { width: 100%; } #historySec .historyList li::before, #historySec .historyList li::after { display: none; } #historySec .historyList li img { width: 100%; } #historySec .historyList li:nth-child(2n+1), #historySec .historyList li:nth-child(2n) { position: static; } #historySec #historyArea01 #historyList01 li.historyItem01 { margin-top: 1vw; } #historySec #historyArea01 #historyList01 li.historyItem02 { margin-top: 0; } #historySec #historyArea01 #historyList01 li.historyItem03 { margin-top: 4.5vw; } #historySec #historyArea01 #historyList01 li.historyItem05 { margin-top: 4.4vw; } #historySec #historyArea01 #historyList01 li.historyItem06 { margin-top: 4.5vw; } #historySec #historyArea01 #historyList01 li.historyItem07 { margin-top: 1vw; } #historySec #historyArea02 { margin-top: 9vw; } #historySec #historyArea02 #historyList02 li.historyItem08 { margin-top: 8.5vw; } #historySec #historyArea02 #historyList02 li.historyItem09 { margin-top: 0; } #historySec #historyArea02 #historyList02 li.historyItem10 { margin-top: 0; } #historySec #historyArea02 #historyList02 li.historyItem11 { margin-top: 5vw; } #historySec #historyArea02 #historyList02 li.historyItem12 { margin-top: 6.5vw; } #historySec #historyArea02 #historyList02 li.historyItem13 { margin-top: 6vw; } #historySec #historyArea02 #historyList02 li.historyItem14 { margin-top: 4.5vw; } #historySec #historyArea02 #historyList02 li.historyItem16 { margin-top: 8vw; } #historySec #historyArea02 #historyList02 li.historyItem16 .historyItem16Line { display: none; } #historySec #historyArea02 #historyList02 li.historyItem17 { margin-top: 4.5vw; } #historySec #historyArea02 #historyList02 li.historyItem18 { margin-top: 4vw; } #historySec #historyFuture { margin-top: 6.7vw; width: 37vw; position: relative; z-index: 1; } }