@charset "UTF-8";
/* CSS Document */

#Movie { width: 100%; height: auto; }
#Movie video { width: 100%; height: 100%; }

#Bnr { background: #f5f4f5; height: 230px; display: flex; align-items: center; position: relative; overflow: hidden; mix-blend-mode: multiply; z-index: 0; }
#Bnr::after { content: ""; width: 0; height: 0; border-style: solid; border-width: 0 630px 630px 0; border-color: transparent #eae7e9 transparent transparent; position: absolute; top: 0; right: 0%; z-index: -1; }
#Bnr ul { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; width: 95%; margin: 0 auto; }
#Bnr ul li { max-width: 386px; width: 32%; }

#Lead { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 400px }
#Lead::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 540px 0 0 540px; border-color: transparent transparent transparent #082d93; position: absolute; left: 0; top: 0; z-index: -1; }
#Lead::after { content: ""; width: 0; height: 0; border-style: solid; border-width: 0 630px 630px 0; border-color: transparent #e40a1f transparent transparent; position: absolute; top: -230px; right: 0; z-index: -1; }
#Lead .inner { max-width: 765px; padding-left: 115px; margin: 0 auto; }
#Lead h2 { font-size: 3.125em; font-weight: 700; line-height: 1.3em; }
#Lead p { font-size: 1.125em; line-height: 1.7em; margin-top: 35px; }

#Service h2 { background: #fac83e; height: 140px; display: flex; justify-content: center; align-items: center; flex-direction: column; position: relative; overflow: hidden; z-index: 0; font-weight: 700; font-size: 0.875em; }
#Service h2::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 540px 0 0 540px; border-color: transparent transparent transparent #fac83e; position: absolute; left: 0; bottom: 0; z-index: -1; mix-blend-mode: multiply; opacity: .5; }
#Service h2::after { content: ""; width: 0; height: 0; border-style: solid; border-width: 0 0 140px 140px; border-color: transparent transparent #fac83e transparent; position: absolute; right: 0; bottom: 0; z-index: -1; mix-blend-mode: multiply; opacity: .5; }
#Service h2 span { width: 168px; margin: 0 auto; text-align: center; }
#Service h2 span::before { content: ""; display: block; width: 100%; height: 40px; background: url("../../images/top/ttl_service.svg") no-repeat; margin-bottom: 10px; }

#Service #Nav { max-width: 1000px; width: 95%; margin: 30px auto 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; }
#Service #Nav > * { max-width: 316px; width: 32%; font-size: 1.375em; line-height: 1.2em; font-weight: bold; margin-top: 40px; }
#Service #Nav img { margin-bottom: 25px; }
#Service #Nav span { font-size: 0.938rem; }
#Service #Nav a { color: #231815; text-decoration: none; }
#Service #Nav ul li a { display: flex; align-items: center; width: 100%; border: 1px solid #9fa0a0; box-sizing: border-box; height: 76px; padding: 6px; }
#Service #Nav ul li a::before { content: ""; display: block; width: 60px; height: 60px; margin-right: 13px; background-size: 100% auto; }
#Service #Nav ul li.support { display: none; }
#Service #Nav ul li.support a::before { background-image: url("../../images/top/ic_support.svg"); }
#Service #Nav ul li.gs { margin-top: 0; }
#Service #Nav ul li.gs a::before { background-image: url("../../images/top/ic_gs.svg"); }
#Service #Nav ul li.oil a::before { background-image: url("../../images/top/ic_oil.svg"); }
#Service #Nav ul li.cl a::before { background-image: url("../../images/top/ic_cl.svg"); }
#Service #Nav ul li.kerosene a::before { background-image: url("../../images/top/ic_kerosene.svg"); }
#Service #Nav ul li.gas a::before { background-image: url("../../images/top/ic_gas.svg"); }
#Service #Nav ul li.rice a::before { background-image: url("../../images/top/ic_rice.svg"); }
#Service #Nav ul li + li { margin-top: 20px; }

#News { margin-top: 70px; height: 450px; box-sizing: border-box; background: #f5f4f5; position: relative; overflow: hidden; z-index: 0; }
#News::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 0 440px 440px 0; border-color: transparent #f5f4f5 transparent transparent; position: absolute; top: 0; right: 0; mix-blend-mode: multiply; z-index: -1; }
#News::after { content: ""; width: 0; height: 0; border-style: solid; border-width: 300px 0 0 300px; border-color: transparent transparent transparent #f5f4f5; position: absolute; bottom: 0; left: 0; mix-blend-mode: multiply; z-index: -1; }
#News h2 { background: #fac83e; height: 140px; display: flex; justify-content: center; align-items: center; flex-direction: column; position: relative; overflow: hidden; font-weight: 700; font-size: 0.875em; z-index: 0; }
#News h2::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 140px 140px 0 0; border-color: #fac83e transparent transparent transparent; position: absolute; left: 0; bottom: 0; z-index: -1; mix-blend-mode: multiply; opacity: .5; }
#News h2::after { content: ""; width: 0; height: 0; border-style: solid; border-width: 0 440px 440px 0; border-color: transparent #fac83e transparent transparent; position: absolute; right: 0; top: 0; z-index: -1; mix-blend-mode: multiply; opacity: .5; }
#News h2 span { width: 275px; margin: 0 auto; text-align: center; }
#News h2 span::before { content: ""; display: block; width: 100%; height: 40px; background: url("../../images/top/ttl_info.svg") no-repeat; margin-bottom: 10px; }
#News dl { max-width: 790px; width: 95%; margin: 40px auto 0 auto; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; line-height: 1.5em;  }
#News dl dt { width: 290px; display: flex; align-items: center; margin-top: 30px; }
#News dl dt span { display: block; color: #FFF; width: 114px; text-align: center; margin-left: 15px; }
#News dl dt .sale { background: #e40a1f; }
#News dl dt .open { background: #082c93; }
#News dl dt .info { background: #f39800; }
#News dl dd { width: calc(100% - 290px); padding-left: 15px; margin-top: 30px; box-sizing: border-box; }
#News dl dd a { text-decoration: none; color: #231815; }


#SubNai { max-width: 1000px; width: 95%; margin: 0 auto; padding: 80px 0; }
#SubNai ul { display: flex; justify-content: space-between; }
#SubNai ul li { max-width: 316px; width: 32%; font-size: 1.250em; }
#SubNai ul li a { color: #231815; text-decoration: none; font-weight: 700; }
#SubNai ul li img { margin-bottom: 15px; }

@media screen and (max-width:1200px) {
  #Bnr { height: 180px; }
  #Bnr::after { border-width: 0 49vw 49vw 0; top: 0; right: 0%; z-index: -1; }
  
  #Lead::before { border-width: 39vw 0 0 39vw; top: auto; bottom: -140px; }
  #Lead::after { border-width: 0 49vw 49vw 0; top: -180px; }
  
  #Service h2::before { border-width: 39vw 0 0 39vw; }
  
  #News { margin-top: 70px; height: auto; padding-bottom: 70px; }
  #News::before { border-width: 0 30vw 30vw 0; }
  #News::after { border-width: 18vw 0 0 18vw; }
  #News h2::after { border-width: 0 30vw 30vw 0; }
  
}

@media screen and (max-width:990px) {
  #Bnr { height: auto; padding: 20px 0; }
  #Bnr::after { display: none; }
  
  #Lead .inner { width: 90%; padding-left: 0; display: flex; align-items: center; flex-direction: column; }
  #Lead h2 { font-size: 2.125rem; }
  #Lead p { font-size: 1.00rem; line-height: 1.7em; margin-top: 35px; }
  
  #Service #Nav { max-width: 650px; }
  #Service #Nav > * { max-width: 316px; width: 48%; font-size: 1.125rem; line-height: 1.2em; margin-top: 40px; }
  #Service #Nav > div:last-of-type { display: none; }
  #Service #Nav ul li a::before { width: 55px; height: 55px; margin-right: 10px; background-repeat: no-repeat; background-position: center; }
  #Service #Nav ul li.support { display: block; }
  #Service #Nav ul li.gs { margin-top: 20px; }
}

@media screen and (max-width:640px) {
  #Bnr { padding: 15px 0; }
  #Bnr ul { width: 100%; }
  #Bnr ul li { max-width: 386px; width: 33%; }
  #Bnr ul li a { display: flex; justify-content: center; align-items: center; height: 44px; color: #FFF; text-decoration: none; font-size: 0.750rem; font-weight: 700; }
  #Bnr ul li:nth-child(1) a { background: #e40a1f; }
  #Bnr ul li:nth-child(1) a::before { content: "車検無料見積もり"; }
  #Bnr ul li:nth-child(2) a { background: #082c93; }
  #Bnr ul li:nth-child(2) a::before { content: "WEB車検予約"; }
  #Bnr ul li:nth-child(3) a { background: #e99521; }
  #Bnr ul li:nth-child(3) a::before { content: "新着キャンペーン"; }
  #Bnr ul img { display: none; }
  
  #Lead { height: auto; padding: 30px 0; }
  #Lead h2 { font-size: 1.500rem; }
  #Lead p { font-size: 0.750rem; margin-top: 25px; }
  #Lead::before { border-width: 33vw 0 0 33vw; top: auto; bottom: -80px; }
  #Lead::after { border-width: 0 23vw 23vw 0; top: 0; }
  
  #Service h2 { height: 80px; }
  #Service h2 span::before { height: 28px; background: url("../../images/top/ttl_service.svg") no-repeat center; }
  #Service h2::before { border-width: 33vw 0 0 33vw; }
  #Service h2::after { border-width: 0 0 80px 80px; }
  #Service #Nav { margin-top: 0; }
  #Service #Nav > * { margin-top: 20px; }
  #Service #Nav div { text-align: center; }
  #Service #Nav img { margin-bottom: 10px; }
  #Service #Nav span { display: none; }
  #Service #Nav ul { max-width: 100%; width: 100%; }
  #Service #Nav ul li br { display: none; }
  #Service #Nav ul li.support { margin-top: 55px; }
  #Service #Nav ul li a { font-size: 1.00rem; }
  #Service #Nav ul li + li,#Service #Nav ul,#Service #Nav ul li.support + li { margin-top: -1px; }
  
  #News { margin-top: 40px; height: auto; padding-bottom: 40px; }
  #News::before { border-width: 0 33vw 33vw 0; }
  #News::after { display: none; }
  #News h2 { height: 80px; }
  #News h2::before { border-width: 80px 80px 0 0; }
  #News h2::after { border-width: 0 33vw 33vw 0;  }
  #News h2 span { width: 275px; margin: 0 auto; text-align: center; }
  #News h2 span::before { height: 28px; background: url("../../images/top/ttl_info.svg") no-repeat center; }
  #News dl { margin: 30px auto 0 auto; display: block; font-size: 0.813rem; }
  #News dl dt { width: 100%; justify-content: flex-start; margin-top: 20px; }
  #News dl dt::after { width: 66px; height: 16px; margin-left: 10px; font-size: 0.625rem; }
  #News dl dd { width: 100%; padding-left: 0; margin-top: 5px; }
  
  #SubNai { padding: 30px 0; }
  #SubNai ul { display: block; }
  #SubNai ul li { max-width: 100%; width: 100%; font-size: 1.125rem; }
  #SubNai ul li + li { margin-top: 10px; }
  #SubNai ul li a { border: 1px solid #9fa0a0; display: flex; align-items: center; padding: 6px; }
  #SubNai ul li a strong { width: calc(100% - 140px); text-align: center; }
  #SubNai ul li img { margin-bottom: 0; width: 140px; margin-left: 0; margin-right: auto; }
  
}