@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap"); #car-number-system *,
#car-number-system *::before,
#car-number-system *::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#car-number-system img {
border: 0;
margin: 0;
display: block;
width: 100%;
max-width: initial;
}
#car-number-system ul,
#car-number-system ol {
list-style: none;
margin: 0;
padding: 0;
}
#car-number-system h1,
#car-number-system h2,
#car-number-system h3 {
margin: 0;
}
#car-number-system p {
margin: 0;
padding: 0;
}
#car-number-system a {
color: inherit;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
#car-number-system a:hover {
opacity: 0.7;
text-decoration: none;
}
#car-number-system dl {
margin: 0;
}
#car-number-system {
font-family: "Noto Sans JP", sans-serif; }
@media only screen and (min-width: 768px) and (max-width: 959px) {
#car-number-system { }
}
@media only screen and (max-width: 767px) {
#car-number-system {
margin-top: 0;
}
}
#car-number-system .container {
width: 100%;
max-width: initial;
padding: 0;
position: relative;
overflow: hidden;
}
#car-number-system .container .deco01 {
position: absolute;
top: 0;
left: 0;
mix-blend-mode: multiply;
width: 93.2142857143vw;
width: 1305px;
}
@media only screen and (min-width: 1000px) and (max-width: 1200px) {
#car-number-system .container .deco01 {
width: 1200px;
}
}
@media only screen and (min-width: 860px) and (max-width: 999px) {
#car-number-system .container .deco01 {
width: 1100px;
}
}
@media only screen and (min-width: 768px) and (max-width: 859px) {
#car-number-system .container .deco01 {
width: 1000px;
}
}
#car-number-system .container .deco02 {
position: absolute;
bottom: 0;
right: 0;
mix-blend-mode: multiply;
width: 670px;
}
@media only screen and (max-width: 767px) {
#car-number-system .container .deco02 {
width: 100%;
}
}
#car-number-system .inner {
-webkit-box-sizing: border-box;
box-sizing: border-box;
max-width: 1030px;
width: 100%;
margin: 0 auto;
padding: 0 15px;
}
#car-number-system .section-head {
background-color: #edf2f5;
padding: 43px 0 30px;
}
@media only screen and (max-width: 767px) {
#car-number-system .section-head {
padding: 26px 0 16px;
}
}
#car-number-system .section-head--white {
background-color: #fff;
padding: 0;
}
#car-number-system .section__container {
padding: 57px 0 110px;
}
@media only screen and (max-width: 767px) {
#car-number-system .section__container {
padding: 40px 0 60px;
}
}
#car-number-system .c-text {
font-size: 1.6rem;
line-height: 2.25;
-webkit-font-feature-settings: "palt";
font-feature-settings: "palt";
}
@media only screen and (max-width: 767px) {
#car-number-system .c-text {
font-size: 1.5rem;
line-height: 1.875;
}
}
#car-number-system .line-title {
font-size: 2.8rem;
line-height: 1.607;
letter-spacing: 0.1em;
text-align: center;
position: relative;
padding-bottom: 34px;
}
@media only screen and (max-width: 767px) {
#car-number-system .line-title {
font-size: 2.2rem;
padding-bottom: 20px;
}
}
#car-number-system .line-title::before {
position: absolute;
content: "";
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 58px;
height: 3px;
background: -webkit-gradient(linear, left top, right top, from(#03a0a1), to(#03cac1));
background: -webkit-linear-gradient(left, #03a0a1, #03cac1);
background: linear-gradient(to right, #03a0a1, #03cac1);
}
#car-number-system .line-title--point {
-webkit-font-feature-settings: "palt";
font-feature-settings: "palt";
}
@media only screen and (min-width: 701px) {
#car-number-system .scroll::-webkit-scrollbar {
height: 0;
}
#car-number-system .scroll::-webkit-scrollbar-track {
background: none;
}
#car-number-system .scroll::-webkit-scrollbar-thumb {
background: none;
}
}
@media only screen and (max-width: 700px) {
#car-number-system .scroll::-webkit-scrollbar {
height: 4px;
}
#car-number-system .scroll::-webkit-scrollbar-track {
background: #ccc;
}
#car-number-system .scroll::-webkit-scrollbar-thumb {
background: #888;
}
}
#car-number-system h2.section-head__title {
font-size: 3.1rem;
font-weight: 700;
letter-spacing: 0.075em;
text-align: center;
position: relative;
padding-bottom: 26px;
}
@media only screen and (max-width: 767px) {
#car-number-system h2.section-head__title {
font-size: 2.2rem;
}
}
#car-number-system h2.section-head__title::before {
position: absolute;
content: "";
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 40px;
height: 13px;
background-image: url(//systemk-camera.jp/images/page/systems/lp/ico_arrow-green.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
} #car-number-system .mv {
background-image: url(//systemk-camera.jp/images/page/systems/lp/img_mv-pc.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height: 44.1428571429vw;
height: 618px;
padding-top: 148px;
}
@media only screen and (max-width: 767px) {
#car-number-system .mv {
background-image: url(//systemk-camera.jp/images/page/systems/lp/img_mv-sp.jpg);
background-position: center top;
height: 158.6666666667vw;
height: 595px;
padding-top: 127px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
}
#car-number-system .mv__inner {
-webkit-box-sizing: border-box;
box-sizing: border-box;
max-width: 1100px;
width: 100%;
margin: 0 auto;
padding: 0 51px;
position: relative;
}
@media only screen and (max-width: 767px) {
#car-number-system .mv__inner {
padding: 0 15px;
}
}
#car-number-system .mv-contents {
position: relative;
z-index: 5;
width: 666px;
}
@media only screen and (max-width: 1000px) {
#car-number-system .mv-contents {
margin: 0 auto;
}
}
@media only screen and (max-width: 767px) {
#car-number-system .mv-contents {
width: 80vw;
width: 300px;
}
}
#car-number-system .mv-contents-title__head {
background-color: rgba(255, 255, 255, 0.86);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
padding: 16px 0;
text-align: center;
}
@media only screen and (max-width: 767px) {
#car-number-system .mv-contents-title__head {
padding: 24px 0 11px;
}
}
#car-number-system .mv-contents-title__head h1 {
font-size: 4.3rem;
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.135em;
}
@media only screen and (max-width: 767px) {
#car-number-system .mv-contents-title__head h1 {
font-size: 3.1rem;
line-height: 1.3226;
}
}
#car-number-system .mv-contents-title__head p {
font-size: 1.6rem;
font-weight: 700;
letter-spacing: 0.1em;
color: #03a0a1;
}
@media only screen and (max-width: 767px) {
#car-number-system .mv-contents-title__head p {
margin-top: 9px;
font-size: 1.4rem;
font-weight: 500;
line-height: 1.3929;
letter-spacing: 0;
}
}
#car-number-system .mv-contents-title__foot {
background-color: #03a0a1;
font-size: 3.1rem;
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.04em;
text-align: center;
color: #fff;
padding: 7px 10px 8px;
}
@media only screen and (max-width: 767px) {
#car-number-system .mv-contents-title__foot {
font-size: 1.8rem;
padding: 12px 0 11px;
letter-spacing: 0.02em;
}
}
#car-number-system .mv-contents__lists {
margin-top: 77px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-column-gap: 27px;
-moz-column-gap: 27px;
column-gap: 27px;
}
@media only screen and (max-width: 767px) {
#car-number-system .mv-contents__lists {
margin-top: 43px;
-webkit-column-gap: 3.5%;
-moz-column-gap: 3.5%;
column-gap: 3.5%;
}
}
#car-number-system .mv-contents-list {
background-color: rgba(255, 255, 255, 0.86);
padding: 16px 24px;
width: 166px;
height: 136px;
}
@media only screen and (max-width: 767px) {
#car-number-system .mv-contents-list {
width: 31%;
height: 20vw;
height: 75px;
padding: 9px 12px;
}
}
#car-number-system .mv-contents-list__title {
width: 100%;
height: 100%;
font-size: 21px;
font-weight: 700;
line-height: 1.38;
letter-spacing: 0;
text-align: center;
border-top: 1px solid #03a0a1;
border-bottom: 1px solid #03a0a1;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
@media only screen and (max-width: 767px) {
#car-number-system .mv-contents-list__title {
font-size: 1.5rem;
}
}
@media only screen and (max-width: 767px) {
#car-number-system .mv-contents-list:last-child .mv-contents-list__title {
white-space: nowrap;
letter-spacing: -0.02em;
}
} #car-number-system .about {
margin-top: 82px;
}
@media only screen and (max-width: 767px) {
#car-number-system .about {
margin-top: 40px;
}
}
#car-number-system .about__contents {
margin-top: 64px;
}
@media only screen and (max-width: 767px) {
#car-number-system .about__contents {
margin-top: 30px;
}
}
#car-number-system .about__flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-column-gap: 6.2%;
-moz-column-gap: 6.2%;
column-gap: 6.2%;
}
@media only screen and (max-width: 900px) {
#car-number-system .about__flex {
-webkit-column-gap: 3.2%;
-moz-column-gap: 3.2%;
column-gap: 3.2%;
}
}
@media only screen and (max-width: 830px) {
#car-number-system .about__flex {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
}
#car-number-system .about__right {
width: 476px;
}
@media only screen and (max-width: 830px) {
#car-number-system .about__right {
width: 100%;
}
}
#car-number-system .about__movie {
aspect-ratio: 476/268;
width: 100%;
position: relative;
}
#car-number-system .about__movie iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
#car-number-system .about__left {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
@media only screen and (max-width: 830px) {
#car-number-system .about__left {
margin-top: 15px;
}
}
#car-number-system .about__text {
text-align: justify;
} #car-number-system .point {
margin-top: 133px;
}
@media only screen and (max-width: 767px) {
#car-number-system .point {
margin-top: 60px;
}
}
#car-number-system .point-content__title {
font-size: 2.2rem;
line-height: 1.2727;
letter-spacing: 0.075em;
}
@media only screen and (min-width: 960px) and (max-width: 1020px) {
#car-number-system .point-content__title {
font-size: 2rem;
}
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
#car-number-system .point-content__title {
font-size: 1.8rem;
}
}
@media only screen and (max-width: 767px) {
#car-number-system .point-content__title {
font-size: 1.6rem;
}
}
#car-number-system .point-content__text {
margin-top: 29px;
font-size: 1.6rem;
line-height: 2.0625;
text-align: justify;
-webkit-font-feature-settings: "palt";
font-feature-settings: "palt";
letter-spacing: 0.07em;
}
@media only screen and (max-width: 899px) {
#car-number-system .point-content__text {
margin-top: 0;
font-size: 1.5rem;
}
}
@media only screen and (max-width: 767px) {
#car-number-system .point-content__text {
margin-top: 15px;
line-height: 1.6;
}
}
#car-number-system .point__contents {
margin-top: 61px;
}
@media only screen and (max-width: 767px) {
#car-number-system .point__contents {
margin-top: 30px;
}
}
#car-number-system .point__item {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding-bottom: 49px;
}
@media only screen and (max-width: 899px) {
#car-number-system .point__item {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
}
@media only screen and (max-width: 767px) {
#car-number-system .point__item {
padding-bottom: 30px;
}
}
#car-number-system .point__item:not(:first-child) {
margin-top: 64px;
}
@media only screen and (max-width: 767px) {
#car-number-system .point__item:not(:first-child) {
margin-top: 34px;
}
}
#car-number-system .point__item:not(:last-child) {
border-bottom: 1px solid #808080;
}
#car-number-system .point__item:last-child {
padding-bottom: 0;
}
#car-number-system .point-content {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
#car-number-system .point__item--01 .point-content__img {
width: 406px;
}
@media only screen and (min-width: 768px) and (max-width: 899px) {
#car-number-system .point__item--01 .point-content__img {
width: 48%;
}
}
@media only screen and (max-width: 767px) {
#car-number-system .point__item--01 .point-content__img {
width: 100%;
}
}
#car-number-system .point__item--01 .point-content__text {
padding-left: 18px;
padding-right: 80px;
padding-right: 13.5%;
}
@media only screen and (max-width: 899px) {
#car-number-system .point__item--01 .point-content__text {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 0;
}
}
#car-number-system .point__item--01 .point-content__title {
background-color: rgba(3, 160, 161, 0.1);
padding: 8px 0 8px 126px;
position: relative;
}
@media only screen and (max-width: 899px) {
#car-number-system .point__item--01 .point-content__title {
padding-left: 80px;
}
}
@media only screen and (max-width: 767px) {
#car-number-system .point__item--01 .point-content__title {
padding-left: 70px;
}
}
#car-number-system .point__item--01 .point-content__title::before {
position: absolute;
content: "";
top: 43%;
left: 19px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 57px;
height: 72px;
background-image: url(//systemk-camera.jp/images/page/systems/lp/ico_system-point01.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
@media only screen and (max-width: 899px) {
#car-number-system .point__item--01 .point-content__title::before {
top: 40%;
left: 12px;
width: 54px;
height: 60px;
}
}
@media only screen and (max-width: 767px) {
#car-number-system .point__item--01 .point-content__title::before {
left: 10px;
width: 45px;
height: 56px;
}
}
#car-number-system .point__item--02 {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
@media only screen and (max-width: 899px) {
#car-number-system .point__item--02 {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
}
#car-number-system .point__item--02 .point-content__img {
width: 465px;
width: 46.5%;
}
@media only screen and (min-width: 768px) and (max-width: 899px) {
#car-number-system .point__item--02 .point-content__img {
width: 48%;
}
}
@media only screen and (max-width: 767px) {
#car-number-system .point__item--02 .point-content__img {
width: 100%;
}
}
#car-number-system .point__item--02 .point-content__text {
padding-right: 18px;
padding-left: 53px;
}
@media only screen and (max-width: 899px) {
#car-number-system .point__item--02 .point-content__text {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 0;
}
}
#car-number-system .point__item--02 .point-content__title {
background-color: rgba(3, 160, 161, 0.1);
padding: 8px 0 8px 137px;
position: relative;
}
@media only screen and (max-width: 899px) {
#car-number-system .point__item--02 .point-content__title {
padding-left: 80px;
}
}
@media only screen and (max-width: 767px) {
#car-number-system .point__item--02 .point-content__title {
padding-left: 70px;
}
}
#car-number-system .point__item--02 .point-content__title::before {
position: absolute;
content: "";
top: 43%;
left: 45px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 64px;
height: 70px;
background-image: url(//systemk-camera.jp/images/page/systems/lp/ico_system-point02.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
@media only screen and (max-width: 899px) {
#car-number-system .point__item--02 .point-content__title::before {
top: 40%;
left: 12px;
width: 54px;
height: 59px;
}
}
@media only screen and (max-width: 767px) {
#car-number-system .point__item--02 .point-content__title::before {
left: 10px;
width: 50px;
height: 54px;
}
}
#car-number-system .point__item--03 .point-content__img {
width: 406px;
}
@media only screen and (min-width: 768px) and (max-width: 899px) {
#car-number-system .point__item--03 .point-content__img {
width: 48%;
}
}
@media only screen and (max-width: 767px) {
#car-number-system .point__item--03 .point-content__img {
width: 100%;
}
}
#car-number-system .point__item--03 .point-content__text {
padding-left: 18px;
padding-right: 80px;
padding-right: 13.5%;
}
@media only screen and (max-width: 899px) {
#car-number-system .point__item--03 .point-content__text {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 0;
}
}
#car-number-system .point__item--03 .point-content__title {
background-color: rgba(3, 160, 161, 0.1);
padding: 8px 0 8px 126px;
position: relative;
}
@media only screen and (max-width: 899px) {
#car-number-system .point__item--03 .point-content__title {
padding-left: 80px;
}
}
@media only screen and (max-width: 767px) {
#car-number-system .point__item--03 .point-content__title {
padding-left: 70px;
}
}
#car-number-system .point__item--03 .point-content__title::before {
position: absolute;
content: "";
top: 43%;
left: 19px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 64px;
height: 72px;
background-image: url(//systemk-camera.jp/images/page/systems/lp/ico_system-point03.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
@media only screen and (max-width: 899px) {
#car-number-system .point__item--03 .point-content__title::before {
top: 40%;
left: 12px;
width: 54px;
height: 60px;
}
}
@media only screen and (max-width: 767px) {
#car-number-system .point__item--03 .point-content__title::before {
left: 10px;
width: 50px;
height: 56px;
}
}
#car-number-system .point__flex-sp {
margin-top: 20px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-column-gap: 3.2%;
-moz-column-gap: 3.2%;
column-gap: 3.2%;
}
@media only screen and (max-width: 767px) {
#car-number-system .point__flex-sp {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
}
@media only screen and (min-width: 678px) and (max-width: 899px) {
#car-number-system .point__item--01 .point__flex-sp,
#car-number-system .point__item--03 .point__flex-sp {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
}
@media only screen and (max-width: 767px) {
#car-number-system .point__item--01 .point__flex-sp,
#car-number-system .point__item--03 .point__flex-sp {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
} #car-number-system .ai {
margin-top: 105px;
padding-bottom: 134px;
position: relative;
z-index: 5;
}
@media only screen and (max-width: 767px) {
#car-number-system .ai {
margin-top: 60px;
padding-bottom: 70px;
}
}
#car-number-system .ai__container {
max-width: 887px;
width: 100%;
margin: 0 auto;
}
#car-number-system .ai__title {
font-size: 2.6rem;
font-weight: 700;
letter-spacing: 0.075em;
color: #fff;
background: -webkit-gradient(linear, left top, right top, from(#03a0a1), to(#03cac1));
background: -webkit-linear-gradient(left, #03a0a1, #03cac1);
background: linear-gradient(to right, #03a0a1, #03cac1);
padding: 12px 10px;
text-align: center;
}
@media only screen and (max-width: 767px) {
#car-number-system .ai__title {
font-size: 2rem;
}
}
#car-number-system .ai__flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
@media only screen and (max-width: 600px) {
#car-number-system .ai__flex {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
}
#car-number-system .ai__img {
width: 37.7%;
overflow: hidden;
}
@media only screen and (max-width: 767px) {
#car-number-system .ai__img {
width: 30%;
}
}
@media only screen and (max-width: 600px) {
#car-number-system .ai__img {
width: 100%;
height: 200px;
}
}
#car-number-system .ai__img img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
max-width: initial;
}
#car-number-system .ai-content {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 28px 43px 27px 7%;
background-color: #fff;
border-bottom: 1px solid #03a0a1;
border-right: 1px solid #03a0a1;
}
@media only screen and (min-width: 768px) and (max-width: 900px) {
#car-number-system .ai-content {
padding: 28px 4% 27px 4%;
}
}
@media only screen and (max-width: 767px) {
#car-number-system .ai-content {
padding: 21px 15px 15px 15px;
}
}
@media only screen and (max-width: 600px) {
#car-number-system .ai-content {
border-left: 1px solid #03a0a1;
}
}
#car-number-system .ai-content__title {
font-size: 2.2rem;
font-weight: 700;
line-height: 1.2727;
letter-spacing: 0.075em;
-webkit-font-feature-settings: "palt";
font-feature-settings: "palt";
}
@media only screen and (min-width: 768px) and (max-width: 900px) {
#car-number-system .ai-content__title {
font-size: 2rem;
}
}
@media only screen and (max-width: 767px) {
#car-number-system .ai-content__title {
font-size: 1.8rem;
}
}
#car-number-system .ai-content__text {
margin-top: 16px;
font-size: 1.6rem;
line-height: 2.0625;
text-align: justify;
-webkit-font-feature-settings: "palt";
font-feature-settings: "palt";
}
@media only screen and (max-width: 767px) {
#car-number-system .ai-content__text {
font-size: 1.5rem;
line-height: 1.6;
}
} #car-number-system .case {
background: -webkit-gradient(linear, left top, right top, from(#03a0a1), to(#03cac1));
background: -webkit-linear-gradient(left, #03a0a1, #03cac1);
background: linear-gradient(to right, #03a0a1, #03cac1);
padding: 48px 0 78px;
}
@media only screen and (max-width: 767px) {
#car-number-system .case {
padding: 40px 0 60px;
}
}
#car-number-system .case__title {
font-size: 2.6rem;
font-weight: 700;
letter-spacing: 0.075em;
padding: 9px 20px;
background-color: #fff;
text-align: center;
}
@media only screen and (max-width: 767px) {
#car-number-system .case__title {
font-size: 2rem;
}
}
#car-number-system .case__contents {
margin-top: 65px;
}
@media only screen and (max-width: 767px) {
#car-number-system .case__contents {
margin-top: 30px;
}
}
#car-number-system .case-flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-column-gap: 4.5%;
-moz-column-gap: 4.5%;
column-gap: 4.5%;
}
@media only screen and (max-width: 900px) {
#car-number-system .case-flex {
-webkit-column-gap: 3%;
-moz-column-gap: 3%;
column-gap: 3%;
}
}
@media only screen and (max-width: 767px) {
#car-number-system .case-flex {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
}
#car-number-system .case-flex__img {
width: 357px;
}
@media only screen and (max-width: 767px) {
#car-number-system .case-flex__img {
width: 100%;
}
}
#car-number-system .case-flex__content {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
color: #fff;
}
@media only screen and (max-width: 767px) {
#car-number-system .case-flex__content {
margin-top: 20px;
}
}
#car-number-system .case-flex__title-wrap {
padding-bottom: 20px;
border-bottom: 2px solid #fff;
}
#car-number-system .case-flex__title {
font-size: 2.2rem;
line-height: 1;
letter-spacing: 0.075em;
}
#car-number-system .case-flex__sub-title {
margin-top: 8px;
font-size: 1.8rem;
line-height: 1.4;
letter-spacing: 0.075em;
-webkit-font-feature-settings: "palt";
font-feature-settings: "palt";
}
#car-number-system .case-flex__text {
margin-top: 15px;
text-align: justify;
}
#car-number-system .case-flex__btn {
margin-top: 15px;
margin-right: auto;
}
@media only screen and (max-width: 767px) {
#car-number-system .case-flex__btn {
margin-right: initial;
}
}
#car-number-system .case-flex__btn a {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
color: #fff;
font-size: 1.6rem;
background-color: #343a40;
width: 248px;
height: 42px;
position: relative;
}
@media only screen and (max-width: 767px) {
#car-number-system .case-flex__btn a {
margin: 0 auto;
}
}
#car-number-system .case-flex__btn a::before {
position: absolute;
content: "";
top: 50%;
right: 14px;
-webkit-transform: translateY(-50%) rotate(-45deg);
transform: translateY(-50%) rotate(-45deg);
width: 10px;
height: 10px;
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
}
#car-number-system .case__items {
margin-top: 60px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-column-gap: 2.2%;
-moz-column-gap: 2.2%;
column-gap: 2.2%;
}
@media only screen and (max-width: 767px) {
#car-number-system .case__items {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
row-gap: 15px;
}
}
#car-number-system .case-item {
width: 23.35%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
@media only screen and (max-width: 767px) {
#car-number-system .case-item {
width: 48.9%;
}
}
#car-number-system .case-item__body {
background-color: #fff;
text-align: center;
padding: 11px 0 16px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
#car-number-system .case-item__title {
font-size: 1.6rem;
font-weight: 700;
color: #03a0a1;
}
#car-number-system .case-item__text {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
margin-top: 8px;
font-size: 1.6rem;
line-height: 1.3125;
-webkit-font-feature-settings: "palt";
font-feature-settings: "palt";
}
@media only screen and (max-width: 900px) {
#car-number-system .case-item__text {
font-size: 1.5rem;
}
} #car-number-system .cta {
background-color: #343a40;
padding: 52px 0 49px;
text-align: center;
}
@media only screen and (max-width: 767px) {
#car-number-system .cta {
padding: 40px 0 45px;
}
}
#car-number-system .cta__lead {
font-size: 3rem;
line-height: 1.4;
letter-spacing: 0.075em;
font-weight: 700;
color: #fff;
-webkit-font-feature-settings: "palt";
font-feature-settings: "palt";
}
@media only screen and (min-width: 768px) and (max-width: 900px) {
#car-number-system .cta__lead {
font-size: 2.4rem;
}
}
@media only screen and (max-width: 767px) {
#car-number-system .cta__lead {
font-size: 2rem;
}
}
@media only screen and (max-width: 374px) {
#car-number-system .cta__lead {
font-size: 1.8rem;
}
}
#car-number-system .cta__btn-wrap {
margin-top: 43px;
padding: 0 40px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-column-gap: 2.8%;
-moz-column-gap: 2.8%;
column-gap: 2.8%;
}
@media only screen and (min-width: 768px) and (max-width: 1000px) {
#car-number-system .cta__btn-wrap {
padding: 0 20px;
}
}
@media only screen and (max-width: 767px) {
#car-number-system .cta__btn-wrap {
margin-top: 38px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
padding: 0;
}
}
#car-number-system .cta__btn-wrap a {
display: inline-block;
width: 48.6%;
background-color: #ffd217;
padding: 13px 0 11px;
}
#car-number-system .cta__btn-wrap a.cta__btn_green {
background-color: #03a0a1;
}
@media only screen and (max-width: 767px) {
#car-number-system .cta__btn-wrap a {
max-width: 447px;
width: 100%;
margin: 0 auto;
}
}
#car-number-system .cta__btn-wrap a span {
font-size: 2.3rem;
font-weight: 700;
letter-spacing: 0.05em;
color: #343a40;
position: relative;
padding-left: 36px;
}
#car-number-system .cta__btn-wrap a.cta__btn_green span {
color: #ffffff;
}
@media only screen and (min-width: 901px) and (max-width: 1000px) {
#car-number-system .cta__btn-wrap a span {
font-size: 2rem;
}
}
@media only screen and (min-width: 768px) and (max-width: 900px) {
#car-number-system .cta__btn-wrap a span {
font-size: 1.8rem;
padding-left: 20px;
}
}
@media only screen and (max-width: 767px) {
#car-number-system .cta__btn-wrap a span {
font-size: 1.8rem;
padding-left: 26px;
}
}
@media only screen and (max-width: 374px) {
#car-number-system .cta__btn-wrap a span {
font-size: 1.6rem;
}
}
#car-number-system .cta__btn-wrap a span::before {
position: absolute;
content: "";
top: 50%;
left: 0;
-webkit-transform: translateY(-50%) rotate(-45deg);
transform: translateY(-50%) rotate(-45deg);
width: 14px;
height: 14px;
border-right: 2px solid #343a40;
border-bottom: 2px solid #343a40;
}
#car-number-system .cta__btn-wrap a.cta__btn_green span::before {
border-right: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
}
@media only screen and (min-width: 768px) and (max-width: 900px) {
#car-number-system .cta__btn-wrap a span::before {
width: 10px;
height: 10px;
}
}
@media only screen and (max-width: 767px) {
#car-number-system .cta__btn-wrap a span::before {
width: 12px;
height: 12px;
}
}
@media only screen and (max-width: 767px) {
#car-number-system .cta__btn-wrap a:nth-child(2) {
margin-top: 20px;
}
} #car-number-system .function__items {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-column-gap: 2%;
-moz-column-gap: 2%;
column-gap: 2%;
row-gap: 22px;
}
@media only screen and (max-width: 767px) {
#car-number-system .function__items {
-webkit-column-gap: 6%;
-moz-column-gap: 6%;
column-gap: 6%;
}
}
#car-number-system .function__item {
width: 23.5%;
border: 1px solid #03a0a1;
position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 930px) {
#car-number-system .function__item {
width: 32%;
}
}
@media only screen and (max-width: 767px) {
#car-number-system .function__item {
width: 47%;
}
}
#car-number-system .function__name { position: relative;
width: 100%;
display: block;
margin:0px 0px 0.3em 0px; white-space: nowrap;
text-align: center;
font-size: 1.6rem;
font-weight: 500;
line-height: 1.4375;
letter-spacing: 0;
}
@media only screen and (min-width: 1400px) {
#car-number-system .function__name { }
}
@media only screen and (max-width: 767px) {
#car-number-system .function__name {
font-size: 1.4rem;
}
}
#car-number-system .function__text {
position: relative; margin: 0px 18px 0px 18px;
display: block;
font-weight: normal;
}
@media only screen and (max-width: 767px) {
#car-number-system .function__text {
font-size: 1.2rem;
line-height: 1.3em;
margin: 0px 10px 10px 10px; }
}
#car-number-system .function__textbox {
position: absolute;
bottom: 2vw;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 100%;
height: auto;
}
@media only screen and (min-width: 1400px) {
#car-number-system .function__textbox {
bottom: 18px;
}
}
#car-number-system .function__item img {
margin-bottom: 50px;
} #car-number-system .system-expand__item {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-column-gap: 3.6%;
-moz-column-gap: 3.6%;
column-gap: 3.6%;
padding: 19px 0;
border-bottom: 1px solid #ccc;
}
#car-number-system .system-expand__item:first-child {
padding-top: 0;
}
#car-number-system .system-expand__item:last-child {
border-bottom: none;
}
@media only screen and (max-width: 767px) {
#car-number-system .system-expand__item:last-child {
padding-bottom: 0;
}
}
@media only screen and (max-width: 767px) {
#car-number-system .system-expand__item {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
padding-top: 22px;
}
}
#car-number-system .system-expand__img {
width: 300px;
}
@media only screen and (max-width: 767px) {
#car-number-system .system-expand__img {
width: 100%;
}
}
#car-number-system .system-expand__content {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
@media only screen and (max-width: 767px) {
#car-number-system .system-expand__content {
margin-top: 18px;
}
}
#car-number-system .system-expand__content p {
margin-top: 17px;
font-size: 1.6rem;
font-weight: 500;
line-height: 1.5625;
-webkit-font-feature-settings: "palt";
font-feature-settings: "palt";
letter-spacing: 0.05em;
text-align: justify;
}
@media only screen and (max-width: 767px) {
#car-number-system .system-expand__content p {
margin-top: 15px;
font-size: 1.5rem;
}
}
#car-number-system .system-expand__content > ul {
margin-top: 5px;
}
@media only screen and (max-width: 767px) {
#car-number-system .system-expand__content > ul {
margin-top: 15px;
}
}
#car-number-system .system-expand__content > ul > li {
position: relative;
padding-left: 7px;
}
#car-number-system .system-expand__content > ul > li::before {
position: absolute;
content: "";
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 4px;
height: 4px;
border-radius: 50%;
background-color: #000;
}
#car-number-system .system-expand__title {
font-size: 1.8rem;
font-weight: 700;
letter-spacing: 0;
color: #03a0a1;
} #car-number-system .system-feature__container {
padding-top: 24px;
}
#car-number-system .system-feature__items {
margin-top: 56px;
padding: 0 17px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-column-gap: 2.2%;
-moz-column-gap: 2.2%;
column-gap: 2.2%;
row-gap: 18px;
}
@media only screen and (max-width: 767px) {
#car-number-system .system-feature__items {
margin-top: 26px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
padding: 0;
}
}
#car-number-system .system-feature__item {
width: 48.9%;
padding: 20px 0;
border: 1px solid #03a0a1;
}
@media only screen and (max-width: 767px) {
#car-number-system .system-feature__item {
width: 100%;
}
}
#car-number-system .system-feature__img {
width: 82%;
margin: 0 auto;
padding-left: 44px;
}
#car-number-system .system-feature__content {
margin-top: 9px;
padding: 0 20px;
}
@media only screen and (max-width: 767px) {
#car-number-system .system-feature__content {
padding: 12px 15px 0;
margin-top: 0;
}
}
#car-number-system .system-feature__content p {
margin-top: 3px;
font-size: 1.6rem;
-webkit-font-feature-settings: "palt";
font-feature-settings: "palt";
letter-spacing: 0.02em;
text-align: justify;
}
@media only screen and (max-width: 767px) {
#car-number-system .system-feature__content p {
font-size: 1.5rem;
}
}
@media only screen and (max-width: 767px) {
#car-number-system .system-feature__item:nth-child(2) .system-feature__content {
margin-top: -4px;
padding-top: 0;
}
}
@media only screen and (max-width: 767px) {
#car-number-system .system-feature__item:nth-child(3) .system-feature__content {
padding-top: 2px;
}
}
#car-number-system .system-feature__title {
font-size: 1.8rem;
font-weight: 700;
letter-spacing: 0;
color: #03a0a1;
}
.system-feature__item {
position: relative;
}
.system-feature__item::before {
position: absolute;
content: "";
top: -1px;
left: -1px;
width: 69px;
height: 70px;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
@media only screen and (max-width: 767px) {
.system-feature__item::before {
width: 55px;
height: 55px;
}
}
.system-feature__item--01::before {
background-image: url(//systemk-camera.jp/images/page/systems/lp/ico_point01.svg);
}
.system-feature__item--02::before {
background-image: url(//systemk-camera.jp/images/page/systems/lp/ico_point02.svg);
}
.system-feature__item--03::before {
background-image: url(//systemk-camera.jp/images/page/systems/lp/ico_point03.svg);
}
.system-feature__item--04::before {
background-image: url(//systemk-camera.jp/images/page/systems/lp/ico_point04.svg);
} #car-number-system .system-composition {
margin-top: 53px;
}
#car-number-system .system-composition__container {
padding: 80px 0;
}
@media only screen and (max-width: 767px) {
#car-number-system .system-composition__container {
padding: 0;
}
}
#car-number-system .system-composition__container .system-composition__img-box {
position: relative;
}
@media only screen and (max-width: 700px) {
#car-number-system .system-composition__container .system-composition__img-box {
padding-bottom: 25px;
}
}
@media only screen and (max-width: 700px) {
#car-number-system .system-composition__container .system-composition__img-box span {
display: block;
position: absolute;
bottom: 4px;
left: 0;
font-size: 1.2rem;
letter-spacing: 0.05em;
}
#car-number-system .system-composition__container .system-composition__img-box span::after {
position: absolute;
content: "";
top: 50%;
right: -20px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 15px;
height: 10px;
background-image: url(//systemk-camera.jp/images/page/systems/lp/scroll-arrow.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
}
@media only screen and (max-width: 767px) {
#car-number-system .system-composition__container .system-composition__img {
padding: 40px 0;
}
}
@media only screen and (max-width: 700px) {
#car-number-system .system-composition__container .system-composition__img {
overflow-x: scroll;
margin-right: calc(50% - 50vw);
}
#car-number-system .system-composition__container .system-composition__img img {
width: 700px;
padding-right: 20px;
}
} #car-number-system .system-device__container {
padding-bottom: 92px;
}
@media only screen and (max-width: 767px) {
#car-number-system .system-device__container {
padding-bottom: 70px;
}
}
#car-number-system .system-device__btn {
cursor: pointer;
display: block;
margin: 0 auto;
max-width: 434px;
width: 100%;
height: 50px;
background-color: #343a40;
color: #fff;
font-size: 2rem;
font-weight: 700;
letter-spacing: 0.05em;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
}
#car-number-system .system-device__btn::before {
position: absolute;
content: "";
top: 50%;
right: 19px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 15px;
height: 2px;
background-color: #fff;
}
#car-number-system .system-device__btn::after {
position: absolute;
content: "";
top: 50%;
right: 19px;
-webkit-transform: translateY(-50%) rotate(90deg);
transform: translateY(-50%) rotate(90deg);
width: 15px;
height: 2px;
background-color: #fff;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
#car-number-system .system-device__btn.is-show::after {
-webkit-transform: translateY(-50%) rotate(0);
transform: translateY(-50%) rotate(0);
}
#car-number-system .system-device__lists {
display: none;
max-width: 690px;
margin: 33px auto 0;
}
@media only screen and (max-width: 767px) {
#car-number-system .system-device__lists {
margin-top: 15px;
}
}
#car-number-system .system-device__list {
-webkit-font-feature-settings: "palt";
font-feature-settings: "palt";
font-size: 1.6rem;
font-weight: 400;
letter-spacing: 0.075em;
padding: 18px 12px;
border-bottom: 1px solid #999;
} #car-number-system .network-camera__point {
margin-top: 52px;
}
#car-number-system .network-camera-point {
border: 1px solid #03a0a1;
padding: 34px 34px 25px;
position: relative;
margin-left: auto;
margin-right: auto;
}
@media only screen and (min-width: 642px) and (max-width: 1029px) {
#car-number-system .network-camera-point {
max-width: 612px;
width: 100%;
padding: 34px 30px 25px;
}
}
@media only screen and (max-width: 767px) {
#car-number-system .network-camera-point {
max-width: 500px;
width: 100%;
padding: 24px 15px 15px;
}
}
#car-number-system .network-camera-point__title {
position: absolute;
top: -17px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
color: #03a0a1;
background-color: #fff;
border: 1px solid #03a0a1;
width: 345px;
height: 31px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 1.8rem;
font-weight: 700;
letter-spacing: 0.075em;
}
@media only screen and (max-width: 767px) {
#car-number-system .network-camera-point__title {
width: 300px;
font-size: 1.7rem;
}
}
#car-number-system .network-camera-point__lists {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;
row-gap: 20px;
}
@media only screen and (max-width: 767px) {
#car-number-system .network-camera-point__lists {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
row-gap: 12px;
}
}
#car-number-system .network-camera-point__list {
text-align: center;
font-size: 1.5rem;
line-height: 1.666;
letter-spacing: 0;
width: 170px;
height: 156px;
background-color: rgba(3, 160, 161, 0.1);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
@media only screen and (max-width: 767px) {
#car-number-system .network-camera-point__list {
width: 100%;
height: 83px;
}
}
#car-number-system .network-camera-point__list:nth-child(4) {
-webkit-font-feature-settings: "palt";
font-feature-settings: "palt";
}
@media only screen and (max-width: 1029px) {
#car-number-system .network-camera-point__list:nth-child(4) {
width: 48.1%;
}
}
@media only screen and (max-width: 767px) {
#car-number-system .network-camera-point__list:nth-child(4) {
width: 100%;
}
}
@media only screen and (min-width: 642px) and (max-width: 1029px) {
#car-number-system .network-camera-point__list:nth-child(5) {
width: 48.1%;
}
}
@media only screen and (max-width: 767px) {
#car-number-system .network-camera-point__list:nth-child(5) {
width: 100%;
}
}
#car-number-system .network-camera__items {
margin-top: 68px;
max-width: 930px;
}
#car-number-system .camera-item {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-column-gap: 6.5%;
-moz-column-gap: 6.5%;
column-gap: 6.5%;
}
@media only screen and (max-width: 700px) {
#car-number-system .camera-item {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
}
#car-number-system .camera-item:not(:first-child) {
margin-top: 60px;
}
@media only screen and (max-width: 700px) {
#car-number-system .camera-item:not(:first-child) {
margin-top: 60px;
}
}
#car-number-system .camera-item__img {
width: 238px;
border: 1px solid #999;
}
@media only screen and (max-width: 700px) {
#car-number-system .camera-item__img {
max-width: 260px;
width: 100%;
margin: 0 auto;
}
}
#car-number-system .camera-item__contents {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding-bottom: 6px;
}
@media only screen and (max-width: 700px) {
#car-number-system .camera-item__contents {
margin-top: 15px;
}
}
@media only screen and (max-width: 767px) {
#car-number-system .camera-item__contents {
padding-bottom: 0;
}
}
#car-number-system .camera-item__name {
font-size: 1.8rem;
font-weight: 700;
letter-spacing: 0.075em;
color: #03a0a1;
}
#car-number-system .camera-item__text {
margin-top: 10px;
font-size: 1.6rem;
line-height: 1.625;
letter-spacing: 0.04em;
-webkit-font-feature-settings: "palt";
font-feature-settings: "palt";
text-align: justify;
}
@media only screen and (max-width: 767px) {
#car-number-system .camera-item__text {
font-size: 1.5rem;
}
}
@media only screen and (max-width: 700px) {
#car-number-system .camera-item__btn {
margin: 20px auto 0;
}
}
#car-number-system .camera-item__btn a {
font-size: 1.6rem;
width: 248px;
height: 42px;
background-color: #343a40;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
color: #fff;
position: relative;
}
#car-number-system .camera-item__btn a::before {
position: absolute;
content: "";
top: 50%;
right: 15px;
-webkit-transform: translateY(-50%) rotate(-45deg);
transform: translateY(-50%) rotate(-45deg);
width: 10px;
height: 10px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
#car-number-system .number-recognition__lists {
margin-top: 35px;
padding-left: 22px;
}
@media only screen and (max-width: 767px) {
#car-number-system .number-recognition__lists {
padding-left: 10px;
}
}
#car-number-system .number-recognition__lists li {
font-size: 1.6rem;
font-weight: 500;
-webkit-font-feature-settings: "palt";
font-feature-settings: "palt";
padding-left: 20px;
position: relative;
}
@media only screen and (max-width: 767px) {
#car-number-system .number-recognition__lists li {
font-size: 1.5rem;
}
}
#car-number-system .number-recognition__lists li::before {
position: absolute;
content: attr(data-text);
top: 6px;
left: 0;
width: 15px;
height: 15px;
background-color: #03a0a1;
border-radius: 50%;
color: #fff;
font-size: 1.2rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
padding-bottom: 1px;
}
#car-number-system .number-recognition__lists li:not(:first-child) {
margin-top: 12px;
} #car-number-system .number-recognition__img-box {
position: relative;
padding-bottom: 25px;
}
@media only screen and (max-width: 700px) {
#car-number-system .number-recognition__img-box span {
display: block;
position: absolute;
bottom: 4px;
left: 0;
font-size: 1.2rem;
letter-spacing: 0.05em;
}
#car-number-system .number-recognition__img-box span::after {
position: absolute;
content: "";
top: 50%;
right: -20px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 15px;
height: 10px;
background-image: url(//systemk-camera.jp/images/page/systems/lp/scroll-arrow.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
}
#car-number-system .number-recognition__img {
margin-top: 35px;
}
@media only screen and (max-width: 700px) {
#car-number-system .number-recognition__img {
overflow-x: scroll;
margin-right: calc(50% - 50vw);
padding-bottom: 20px;
}
#car-number-system .number-recognition__img img {
width: 700px;
}
} #car-number-system .faq__contents {
max-width: 810px;
width: 100%;
margin: 0 auto;
}
#car-number-system .faq__list:not(:first-child) {
margin-top: 13px;
}
#car-number-system .faq-list__f {
cursor: pointer;
font-size: 1.8rem;
font-weight: 500;
letter-spacing: 0.07em;
border: 1px solid #03a0a1;
padding-right: 50px;
position: relative;
}
@media only screen and (max-width: 767px) {
#car-number-system .faq-list__f {
font-size: 1.5rem;
padding-right: 36px;
}
}
#car-number-system .faq-list__f::before {
position: absolute;
content: "";
top: 29px;
right: 12px;
width: 13px;
height: 1px;
background-color: #03a0a1;
}
@media only screen and (max-width: 767px) {
#car-number-system .faq-list__f::before {
top: 21px;
}
}
#car-number-system .faq-list__f::after {
position: absolute;
content: "";
top: 29px;
right: 12px;
width: 13px;
height: 1px;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
background-color: #03a0a1;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
@media only screen and (max-width: 767px) {
#car-number-system .faq-list__f::after {
top: 21px;
}
}
#car-number-system .faq-list__f span {
display: block;
padding: 15px 0 15px 80px;
position: relative;
}
@media only screen and (max-width: 767px) {
#car-number-system .faq-list__f span {
padding: 10px 0 10px 50px;
}
}
#car-number-system .faq-list__f span::before {
position: absolute;
content: "q";
text-transform: uppercase;
top: 0;
left: 0;
width: 56px;
height: 100%;
background-color: #03a0a1;
color: #fff;
font-size: 2.1rem;
line-height: 1.3888;
letter-spacing: 0.07em;
font-family: "Roboto", sans-serif;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
@media only screen and (max-width: 767px) {
#car-number-system .faq-list__f span::before {
width: 40px;
font-size: 1.7rem;
}
}
#car-number-system .faq-list__a {
display: none;
font-size: 1.8rem;
font-weight: 700;
line-height: 1.3888;
letter-spacing: 0.1em;
padding: 18px 47px 18px 92px;
border-bottom: 1px solid #666;
margin-bottom: 17px;
-webkit-font-feature-settings: "palt";
font-feature-settings: "palt";
}
#car-number-system .faq-list__a a {
color: #03a0a1;
text-decoration: underline;
}
@media only screen and (max-width: 767px) {
#car-number-system .faq-list__a {
padding: 12px 35px 12px 50px;
font-size: 1.5rem;
}
}
#car-number-system .faq-list__f.is-show::after {
-webkit-transform: rotate(0);
transform: rotate(0);
} #car-number-system .catalog {
background-color: #edf2f5;
padding: 50px 0 28px;
}
#car-number-system .catalog__content {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
}
#car-number-system .catalog__title {
font-size: 3.1rem;
font-weight: 700;
letter-spacing: 0.075em;
}
@media only screen and (max-width: 767px) {
#car-number-system .catalog__title {
font-size: 2.4rem;
}
}
#car-number-system .catalog__download {
margin-top: 30px;
width: 320px;
}
#car-number-system .catalog__caption {
margin-top: 12px;
display: inline-block;
font-size: 1.5rem;
letter-spacing: 0.07em;
} #car-number-system .connection-items {
padding-top: 79px;
}
@media only screen and (max-width: 767px) {
#car-number-system .connection-items {
padding-top: 40px;
}
}
#car-number-system .connection-items__container {
padding-top: 21px;
}
#car-number-system .connection-items__flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-column-gap: 2.4%;
-moz-column-gap: 2.4%;
column-gap: 2.4%;
}
@media only screen and (max-width: 767px) {
#car-number-system .connection-items__flex {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
}
#car-number-system .connection-items__img {
width: 48.8%;
}
@media only screen and (max-width: 767px) {
#car-number-system .connection-items__img {
width: 100%;
}
}
@media only screen and (max-width: 767px) {
#car-number-system .connection-items__img:nth-child(2) {
margin-top: 30px;
}
} #car-number-system .contact {
background-color: #0071aa;
text-align: center;
padding: 58px 0 63px;
}
@media only screen and (max-width: 767px) {
#car-number-system .contact {
padding: 40px 0;
}
}
#car-number-system .contact__title {
font-size: 3rem;
font-weight: 700;
letter-spacing: 0.075em;
color: #fff;
}
@media only screen and (max-width: 767px) {
#car-number-system .contact__title {
font-size: 2rem;
}
}
@media only screen and (max-width: 374px) {
#car-number-system .contact__title {
font-size: 1.8rem;
}
}
#car-number-system .contact__btn {
margin-top: 23px;
}
#car-number-system .contact__btn a {
width: 447px;
height: 58px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
background-color: #fff;
margin: 0 auto;
}
@media only screen and (max-width: 767px) {
#car-number-system .contact__btn a {
max-width: 447px;
width: 100%;
height: 53px;
}
}
#car-number-system .contact__btn a span {
font-size: 2.3rem;
font-weight: 700;
letter-spacing: 0.075em;
color: #0071aa;
position: relative;
padding-left: 34px;
padding-right: 34px;
}
@media only screen and (max-width: 767px) {
#car-number-system .contact__btn a span {
font-size: 1.8rem;
padding-left: 26px;
padding-right: 26px;
}
}
@media only screen and (max-width: 374px) {
#car-number-system .contact__btn a span {
font-size: 1.6rem;
}
}
#car-number-system .contact__btn a span::before {
position: absolute;
content: "";
top: 50%;
left: 0;
-webkit-transform: translateY(-50%) rotate(-45deg);
transform: translateY(-50%) rotate(-45deg);
width: 14px;
height: 14px;
border-bottom: 2px solid #0071aa;
border-right: 2px solid #0071aa;
}
@media only screen and (max-width: 767px) {
#car-number-system .contact__btn a span::before {
width: 12px;
height: 12px;
}
} @media only screen and (min-width: 768px) {
.u-sp {
display: none;
}
}
@media only screen and (max-width: 767px) {
.u-pc {
display: none;
}
}
#car-number-system p.u-no-mt {
margin-top: 0;
}
@media only screen and (max-width: 641px) {
#car-number-system .u-641 {
display: none;
}
}
@media only screen and (max-width: 374px) {
#car-number-system .u-374 {
display: none;
}
}
@media only screen and (max-width: 899px) {
#car-number-system .u-900 {
display: none;
}
}
@media only screen and (min-width: 900px) {
#car-number-system .u-899 {
display: none;
}
}
@media only screen and (min-width: 701px) {
#car-number-system .u-700 {
display: none;
}
}
#car-number-system .u-ib {
display: inline-block;
} .mv-btn-wrap {
position: absolute;
z-index: 10;
right: -5%;
bottom: 0;
}
a.mv-btn {
display: block;
text-align: center;
vertical-align: middle;
text-decoration: none;
width: auto;
margin: auto;
padding: 2rem 6rem;
font-size: 18px;
font-weight: bold;
border-radius: 0.3rem;
border-bottom: 7px solid #FF9617;
background: #ffd217;
-webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
position: relative;
}
a.mv-btn:hover {
margin-top: 6px;
border-bottom: 1px solid #FF9617;
color: #fff;
opacity: 1 !important;
}
.mv-btn-wrap a.mv-btn span::before {
position: absolute;
content: "";
top: 50%;
left: 1rem;
-webkit-transform: translateY(-50%) rotate(-45deg);
transform: translateY(-50%) rotate(-45deg);
width: 14px;
height: 14px;
border-right: 2px solid #343a40;
border-bottom: 2px solid #343a40;
}
@media only screen and (max-width: 1000px) {
.mv-btn-wrap {
position: relative;
right: auto;
bottom: -4rem;
text-align: center;
}
a.mv-btn {
display: inline-block;
}
}
@media only screen and (max-width: 767px) {
a.mv-btn {
padding: 1.5rem 3rem;
font-size: 1.5rem;
}
}