@charset "UTF-8";

.text-bar {
display: inline-block;
}
.btn_wr>a {
color: #fff;
margin-left: auto;
margin-right: auto;
height: 69px;
line-height: 1;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
border-radius: 5px;
min-width: 126px;
}
.btn_wr>a:nth-of-type(1) {
background: #399D26;
box-shadow: 0 1px .5px #0A3300;
font-size: 1.125em;
}
.btn_wr>a:nth-of-type(2) {
margin-top: 11.353%;
background: #F38200;
box-shadow: 0 1px .5px #F31212;
font-size: 1.125em;
box-sizing: border-box;
padding-top: 8px;
}
.btn_wr>a:nth-of-type(2) span.tel {
font-size: 1.167em;
}
.btn_wr>a:nth-of-type(2) span.time {
font-size: 0.667em;
}
.periodice-top { background-color: #FFFBE9;
background-position: center center;
background-size: cover;
box-sizing: border-box;
padding-top: 6.5%;
padding-bottom: 2.3%;
}
.top-logo {
display: flex;
justify-content: center;
margin-bottom: 45px;
}
.top-logo-img-wrapper {
width: 147px;
height: 147px;
background-color: #fff;
box-sizing: border-box; border: 1px solid #707070;
border-radius: 17px;
margin-right: 1.5%;
}
.top-logo-text {
font-size: 28px;
font-weight: bold;
padding: 1% 62.5px;
background-color: #096;
color: #fff;
}
.top-logo-title { margin-top: 0px;
padding-top: 0px;
font-size: 78px;
color: #096;
}
.top-text {
font-size: 18px;
font-weight: bold;
line-height: 2.2;
text-align: center;
margin-bottom: 45px;
}
.top-text-red {
color: #FF0000;
font-size: 20px;
}
.periodice-contact {
padding-top: 78px;
position: relative;
}
.periodice-contact::before {
content: "";
position: absolute;
z-index: -1;
background: #FFFBE9;
width: 100vw;
height: 100%;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.contact-title {
font-size: 38px;
line-height: 1;
padding: 26px 0;
color: #fff;
background-color: #35A592;
width: 100%;
text-align: center;
border-radius: 13px;
margin-bottom: 100px;
}
.contact-box {
display: flex;
justify-content: space-between;
padding-bottom: 70px;
margin-right: calc(50% - 50vw);
}
.contact-body {
flex: 0 1 685px;
margin-right: 2%;
}
.contact-body p {
background-color: #fff;
font-size: 30px;
font-weight: bold;
line-height: 1.5;
padding: 1% 0 1% 3%;
margin-bottom: 40px;
border-radius: 8px;
box-shadow: 0px 1px 6px rgb(0, 0, 0, .16);
}
.contact-text-green {
color: #399D26;
}
.contact-body p:last-of-type {
margin-bottom: 132px;
}
.contact-btn-wrapper {
color: #fff;
font-weight: bold;
text-align: center;
margin: 0 auto 115px;
}
.contact-btn {
display: inline-block;
color: #fff;
background-color: #CF0000;
font-weight: bold;
font-size: 22px;
line-height: 1;
box-sizing: border-box;
padding: 2.5% 2% 2.5% 5%;
border-radius: 5px;
box-shadow: 0 1px 1px #940014;
}
.contact-btn::after {
content: '>';
display: inline-block;
margin-left: 24px;
width: 30px;
height: 30px;
color: #CF0000;
background-color: #fff;
border-radius: 50%;
line-height: 30px;
}
.contact-img-wrapper {
position: relative;
flex: 0 1 48%;
}
.contact-img-wrapper::before {
padding-top: 83%;
display: block;
content: '';
}
.contact-img-wrapper img {
position: absolute;
top: 0%;
left: 0;
width: 100%; }
@media screen and (max-width: 1023px) {
.contact-box {
display: block;
margin: 0;
}
.contact-body p:last-of-type {
margin-bottom: 100px;
}
.contact-btn-wrapper {
margin-bottom: 100px;
}
}
.periodice-step {
margin-top: 72px;
text-align: center;
}
.step-text {
display: inline-block;
box-sizing: border-box;
padding: 10px 20px;
font-size: 38px;
line-height: 1;
border-radius: 42px;
color: #fff;
font-weight: bold; background-color: #096;
margin-bottom: 31px;
}
.top-step5 {
margin-bottom: 30px;
position: relative;
}
.top-step5::after {
content: '';
position: absolute;
width: 25px;
height: 25px; background-color: #096;
transform: translateX(-50%) translateY(-10%) rotate(45deg);
top: 50%;
left: 50%;
z-index: -1;
}
.step-text-big {
font-size: 50px;
}
.step-title {
font-size: 38px;
font-weight: bold;
margin-bottom: 48px;
padding: 10px 0;
line-height: 1;
}
.top-step-title {
display: flex;
flex-direction: row;
align-items: center;
}
.top-step-title::before,
.top-step-title::after {
content: '';
height: 1px;
background-color: #707070;
flex-grow: 1;
}
.top-step-title::before {
margin-right: 60px;
}
.top-step-title::after {
margin-left: 60px;
}
.step-title-small {
font-size: 20px;
}
.step-box {
box-sizing: border-box;
padding: 48px 19px 10px; border-radius: 20px;
border: 1px solid #707070;
margin-bottom: 20px;
min-height: 388px;
}
.step-box:last-of-type {
margin-bottom: 75px;
}
.step-top .step-text{
margin-right: 1%;
}
.step-top {
display: flex;
}
.step-bottom {
text-align: left;
display: flex;
}
.step-img-wrapper{
width: 170px;
margin-right: 1%;
}
.step-box-text {
font-size: 18px;
}
.step-box-btn {
position: relative;
width: 45%;
min-width: 300px;
display: inline-block;
box-sizing: border-box;
padding: 18px 1em 18px 0;
border: 1px solid #707070;
border-radius: 5px;
box-shadow: 0px 1px 1px #C4C4C4;
font-size: 22px;
text-align: center;
font-weight: bold;
line-height: 1;
margin-top: auto;
align-self: center; left: 20px;
top: -15px;
}
.step-box-btn::after {
position: absolute;
right: .8em;
content: '>';
display: inline-block;
color: #EC8D1C;
}
.periodice-prepare {
box-sizing: border-box;
padding: 22px 40px 28px;
background-color: #FFBC70;
}
.prepare-title { background-color: #fff;
font-size: 31px;
box-sizing: border-box; text-align: center;
border-radius: 32px;
max-width: 648px;
margin: 0 auto 30px;
}
.prepare-box {
box-sizing: border-box;
padding: 34px 10% 44px;
background-color: #fff;
}
.prepare-list {
display: flex;
justify-content: space-between;
color: #E60E0E;
font-weight: bold;
padding: 0 10%;
font-size: 22px;
margin-bottom: 15px;
flex-wrap: wrap;
}
.prepare-box p {
padding: 24px 10%;
border-top: 1px solid #707070;
} section#third h2,
section.maint-item h2 {
font-size: 3.25em;
} section#first h2,
section#second h2,
section.contact-item h2 {
font-size: 2.625em
} section#second>p,
section.contact-item>p:nth-of-type(1) {
font-size: 1.563em;
} section#third .sikaku>h3,
section.maint-item ul li {
font-size: 1.375em;
} section.contact-item>p:nth-of-type(2) {
font-size: 1.25em;
}
@media screen and (max-width: 768px) {
section.maint-item h2 {
font-size: 1.8em;
}
section.contact-item h2 {
font-size: 1.625em
}
section.contact-item>p:nth-of-type(1) {
font-size: 1.263em;
}
section.maint-item ul li {
font-size: 1.275em;
} section.contact-item>p:nth-of-type(2) {
font-size: 1.05em;
}
.top-text {
text-align: left;
}
}
section.maint-item ul::before {
content: "";
position: absolute;
width: 100vw;
height: 100%;
left: 50%;
transform: translateX(-50%);
z-index: -1;
} section.contact-item {
width: 117.75%;
margin-top: 7.1666%;
padding-bottom: 4.812%;
text-align: center;
border-radius: 14px;
box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
position: relative;
left: 50%;
transform: translateX(-50%);
}
section.contact-item h2 {
line-height: 3.14;
display: flex;
justify-content: center;
align-items: center;
background: #004098;
color: #fff;
font-weight: bold;
border-radius: 14px 14px 0 0;
}
section.contact-item>p:nth-of-type(1) {
margin: 2.9% auto 0;
font-weight: bold;
width: 79.97%;
text-align: left;
}
section.contact-item>p:nth-of-type(2) {
margin-top: 4%;
}
section.contact-item .btn_wr {
display: flex;
justify-content: center;
margin-top: 1.769%;
}
section.contact-item .btn_wr a {
width: 229px;
margin: 0 25px;
}
@media screen and (min-width: 768px) {
section.contact-item .btn_wr a { }
section.contact-item .btn_wr {
font-size: 16px;
}
}
@media screen and (max-width: 950px) {
section.contact-item h2 {
line-height: 1.3;
}
}
@media screen and (max-width: 768px) {
section.contact-item {
width: 96%;
font-size: 12px;
}
section.contact-item>p:nth-of-type(1) {
width: 96%;
font-size: 14px;
}
section.contact-item>p:nth-of-type(2) {
width: 96%;
}
section.contact-item .btn_wr a {
margin: 10px;
}
section.providing-tech div.ri .btn_wr {
width: auto;
}
.btn_wr>a {
height: 45px;
margin-top: 15px;
}
.btn_wr>a:nth-of-type(2) {
font-size: 1em;
margin-top: 15px;
}
.btn_wr>a:nth-of-type(2) span {
margin: 0 6px;
}
section.providing-tech div.le>p {
font-size: 14px;
}
} section.maint-item {
margin-top: 12.5666%;
}
section.maint-item h2 {
padding-top: 3.8333%;
position: relative;
}
section.maint-item h2::before {
content: '';
position: absolute;
width: 4.3em;
height: 3px;
top: 0;
left: 0;
background: #707070;
}
section.maint-item h2 span {
font-size: 0.577em;
}
section.maint-item ul {
margin-top: 2.333%;
padding-top: 2.666%;
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-bottom: 10.8333%;
}
section.maint-item ul::before {
top: 0;
background: #F3F3F3;
}
section.maint-item ul li { border-bottom: #707070 solid .5px;
position: relative;
width: 47.416%; padding: 1.75% 0;
box-sizing: border-box;
padding-right: 10px;
}
section.maint-item ul li:nth-of-type(1),
section.maint-item ul li:nth-of-type(2) {
border-top: #707070 solid .5px;
}
section.maint-item ul li:hover {
background-color: #fff;
box-shadow: 0 3px 6px rgb(0, 0, 0, 0.16);
}
section.maint-item ul li a {
display: flex;
align-items: center;
font-weight: bold;
}
section.maint-item ul li a p {
line-height: 1.3;
border-bottom: 1px solid #000;
}
section.maint-item ul li::after {
content: "";
position: absolute;
height: 27.5px;
width: 9.37px;
top: 50%;
right: 1.5px;
transform: translateY(-50%);
background: url(//www.truck-one.com/wp-content/themes/truckone/assets/images/maint/arrow.png) center center no-repeat;
background-size: contain
}
section.maint-item li img {
width: 38.664%;
margin-right: 4.218%;
}
@media screen and (max-width: 768px) {
section.maint-item h2 {
font-size: 22px;
}
section.maint-item ul li {
font-size: 14px;
padding-right: 7px;
}
section.maint-item ul li::after {
width: 6px;
height: 18px;
}
}
@media screen and (max-width: 768px) {
.periodice-top {
padding: 5.333%;
}
.top-logo {
align-items: center;
justify-content: space-between;
margin-bottom: 30px;
}
.top-logo-text {
font-size: 3vw;
padding: 1% 0;
text-align: center;
line-height: 1.6;
}
.top-text{
line-height: 1.6;
font-weight: 600;
font-size: 14px;
margin-bottom: 30px;
}
.top-text-red {
font-size: 14px;
}
.top-text br:first-of-type {
display: none;
}
.top-logo-title {
font-size: 9vw;
}
.top-logo-img-wrapper {
padding: 1.5% 6% 0;
width: 24%;
height: auto;
}
.top-logo-img-wrapper img {
height: 100%;
object-fit: contain;
}
.contact-title {
font-size: 5vw;
padding: 15px 0;
margin-bottom: 50px;
}
.contact-body {
margin: 0 5%;
}
.contact-body p {
font-size: 3.4vw;
padding: 2% 8%;
margin-bottom: 15px;
font-weight: 500;
}
.contact-body p:last-of-type {
margin-bottom: 50px;
}
.contact-btn-wrapper{
margin-bottom: 50px;
}
.contact-btn {
font-size: 3.4vw;
padding: 2% 4% 2% 5%;
}
.contact-btn::after{
width: 25px;
height: 25px;
line-height: 25px;
margin-left: 10px;
}
.step-text{
font-size: 18px;
padding: 7px 20px;
}
.step-text-big{
font-size: 22px;
}
.step-title{
font-size: 20px;
}
.top-step-title{
justify-content: center;
margin-bottom: 20px;
}
.top-step-title::before,
.top-step-title::after {
display: none;
}
.contact-box {
display: block;
}
.step-box {
display: block;
padding: 15px;
margin-bottom: 20px;
}
.step-top{
margin-bottom: 10px;
align-items: center;
}
.step-top .step-text{
margin-bottom: 0;
margin-right: 10px;
padding: 5px 12px;
}
.step-top .step-title{
margin-bottom: 0;
padding: 0;
text-align: left;
}
.step-title-small{
font-size: 14px;
}
.step-bottom{
flex-direction: column;
}
.step-img-wrapper{
width: 100%;
margin-bottom: 15px;
}
.step-img-wrapper img{
object-fit: cover;
height: 180px;
}
.step-box-text{
font-weight: 500;
margin-bottom: 0px;
font-size: 16px;
}
.step-box-text br{
display: none;
}
.step-box-text .step3-br{
display: block;
}
.step-box-btn {
top: 0;
left: 0;
font-size: 14px;
right: 0;
min-width: 250px;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 10px;
}
.periodice-prepare,
.prepare-box,
.prepare-list,
.prepare-box p {
padding-right: 5%;
padding-left: 5%;
}
}