@charset "UTF-8";
 html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
nav ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
content: none;
}
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
} ins {
background-color: #ff9;
color: #000;
text-decoration: none;
} mark {
background-color: #ff9;
color: #000;
font-style: italic;
font-weight: bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom: 1px dotted;
cursor: help;
}
table {
border-collapse: collapse;
border-spacing: 0;
} hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #cccccc;
margin: 1em 0;
padding: 0;
}
input, select {
vertical-align: middle;
}
body {
font-family: noto-sans-cjk-jp, sans-serif;
font-style: normal;
color: #303030;
line-height: 1.5;
}
li {
list-style: none;
}
.img {
width: 100%;
}
.title {
position: relative;
}
.title__text {
font-size: 42px;
font-weight: 900;
text-align: center;
white-space: nowrap;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.title__img {
max-width: 310px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.underline {
background: linear-gradient(transparent 60%, #f0e800 60%);
}
.btn__img {
width: 365px;
}
.br__sp {
display: none;
}
.top {
text-align: center;
}
.top__container {
position: relative;
margin-bottom: 47px;
display: inline-block;
}
.top__img {
padding-top: 65px;
width: 100%;
}
.top__btn {
position: absolute;
bottom: 7%;
right: 10%;
}
.top__inner {
display: flex;
justify-content: center;
margin-bottom: 100px;
}
.top__circle {
width: 192px;
height: 192px;
position: relative;
margin-right: 30px;
}
.top__circleText {
position: absolute;
border: solid 6.4px #1d2d66;
border-radius: 50%;
width: 192px;
height: 192px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 20px;
font-weight: 700;
color: #1d2d66;
background-color: #fff;
z-index: 2;
}
.top__circle:nth-child(3) {
margin-right: 0;
}
.top__circle::before {
content: "";
position: absolute;
bottom: -20px;
right: -20px;
width: 100%;
height: 100%;
border-radius: 50%;
background-image: repeating-linear-gradient(-135deg, #1d2d66, #1d2d66 5px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 9px);
z-index: 1;
}
.top__title {
font-size: 46px;
font-weight: 900;
text-align: center;
margin-bottom: 62px;
}
.top__red {
width: 100%;
}
.reason {
margin-top: 200px;
margin-bottom: 140px;
text-align: center;
}
.reason__inner {
padding-top: 160px;
display: flex;
justify-content: space-between;
max-width: 910px;
width: 100%;
margin: 0 auto 65px;
}
.reason__side {
max-width: 210px;
margin-top: 50px;
}
.reason__circle {
position: relative;
margin-bottom: 20px;
}
.reason__yellow {
width: 100%;
height: 100%;
display: flex;
margin: 0 auto;
}
.reason__large {
width: 268px;
}
.reason__small {
width: 172px;
}
.reason__title {
font-size: 20px;
font-weight: 900;
white-space: nowrap;
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%, -50%);
}
.reason__text {
font-size: 16px;
text-align: left;
}
.reason__bottom {
display: flex;
}
.reason__list {
margin-right: 10px;
text-align: left;
}
.reason__list:nth-child(2) {
margin-right: 0;
}
.reason__img {
max-width: 407px;
width: 100%;
margin-bottom: 30px;
}
.reason__red {
font-size: 25px;
font-weight: 700;
color: #dd3e4e;
}
.reason__redLarge {
font-size: 30px;
}
.trouble {
text-align: center;
margin-bottom: 110px;
}
.trouble__container {
position: relative;
}
.trouble__picture {
position: relative;
}
.trouble__picture::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%);
border: 162px solid transparent;
border-top: 80px solid #e7e7e7;
}
.trouble__img {
max-width: 100%;
height: 100%;
vertical-align: bottom;
}
.trouble__title {
font-size: 42px;
white-space: nowrap;
position: absolute;
top: 120px;
left: 50%;
transform: translate(-50%);
}
.trouble__inner {
margin-top: 150px;
display: flex;
justify-content: center;
}
.trouble__pair {
max-width: 651px;
width: 100%;
}
.trouble__group {
margin-left: 50px;
}
.trouble__good {
width: 131px;
}
.trouble__box {
margin-top: 35px;
}
.trouble__item {
font-size: 28px;
font-weight: 400;
text-align: left;
}
.voice {
text-align: center;
padding-bottom: 166px;
background-image: url(https://free-up.jp/car-up/wp-content/themes/carup/img/voice_bg.png);
background-size: 100%;
background-repeat: no-repeat;
}
.voice__top {
padding-top: 170px;
}
.voice__people {
width: 776px;
margin-top: 160px;
padding-bottom: 70px;
}
.voice__text {
border: 1px solid #303030;
display: inline-block;
padding: 62px 98px;
font-size: 21px;
line-height: 2.4;
font-weight: 500;
background-color: #fff;
margin-bottom: 90px;
}
.voice__inner {
max-width: 747px;
width: 100%;
margin: 0 auto;
}
.voice__group {
display: flex;
justify-content: space-between;
margin-bottom: 100px;
}
.voice__group:nth-child(even) {
flex-direction: row-reverse;
}
.voice__img {
margin: 0 auto;
}
.voice__illust {
width: 100%;
height: 100%;
}
.voice__y {
width: 125px;
}
.voice__t {
width: 104px;
}
.voice__i {
width: 158px;
}
.voice__n {
width: 115px;
}
.voice__item {
max-width: 504px;
height: 100%;
padding: 25px 40px;
box-sizing: border-box;
text-align: left;
border: 1px solid #303030;
border-radius: 10px;
}
.voice__odd {
position: relative;
margin-left: 40px;
}
.voice__odd::before {
content: "＜";
font-size: 20px;
position: absolute;
left: -6%;
top: 50%;
transform: translateY(-50%);
}
.voice__even {
position: relative;
margin-right: 40px;
}
.voice__even::before {
content: "＞";
font-size: 20px;
position: absolute;
right: -6%;
top: 50%;
transform: translateY(-50%);
}
.voice__name {
margin-bottom: 40px;
font-size: 18px;
}
.voice__comment {
font-size: 18px;
line-height: 1.75;
}
.flow {
margin-bottom: 180px;
}
.flow__inner {
max-width: 1074px;
width: 100%;
padding: 130px 50px 0;
box-sizing: border-box;
margin: 0 auto;
display: flex;
justify-content: space-between;
text-align: center;
}
.flow__group {
width: 20%;
}
.flow__box {
padding: 25px 28px;
box-sizing: border-box;
position: relative;
}
.flow__box::before {
content: "";
background-color: #808080;
width: 2px;
height: 315px;
display: block;
position: absolute;
left: 0;
top: 0;
}
.flow__box::after {
content: "";
display: block;
background-image: url(https://free-up.jp/car-up/wp-content/themes/carup/img/flow_arrow_pc.svg);
width: 42px;
height: 42px;
position: absolute;
right: -22px;
top: 135px;
z-index: 1;
}
.flow__boxLast::after {
content: "";
background-image: none;
background-color: #808080;
width: 2px;
height: 315px;
display: block;
position: absolute;
right: 0;
top: 0;
}
.flow__number {
font-family: "din-2014", sans-serif;
font-size: 42px;
font-weight: 800;
color: #dd3e4e;
}
.flow__icon {
width: 65px;
margin-bottom: 28px;
}
.flow__kye {
width: 50px;
}
.flow__title {
font-size: 15px;
font-weight: 700;
margin-bottom: 30px;
}
.flow__text {
text-align: left;
}
.faq {
text-align: center;
padding: 0 50px;
}
.faq__inner {
max-width: 1100px;
width: 100%;
box-sizing: border-box;
border: 5.7px solid #dd3e4e;
background-color: #efefef;
margin: 0 auto;
padding-top: 90px;
padding-bottom: 80px;
}
.faq__title {
font-size: 42px;
font-weight: 900;
margin-bottom: 85px;
}
.faq__accordion {
text-align: left;
max-width: 750px;
width: 100%;
margin: 0 auto;
}
.faq__item {
margin-bottom: 16px;
}
.faq__text {
font-size: 18px;
display: block;
padding-left: 50px;
position: relative;
transform-origin: left top;
transform: scale(0.94, 1);
transition: 0.5s ease;
}
.faq__text:hover {
transition: 0.5s ease;
transform: scale(1, 1);
}
.faq__text::before {
content: "Q";
font-size: 42px;
font-weight: 900;
color: #e19b9f;
position: absolute;
left: 0;
top: 40%;
transform: translateY(-50%);
}
.faq__toggle {
width: 20px;
height: 20px;
position: absolute;
right: 43px;
top: 50%;
transform: translateY(-50%);
}
.faq__border {
width: 20px;
height: 1px;
background-color: #030303;
display: block;
position: absolute;
top: 50%;
}
.faq__border:nth-child(2) {
width: 20px;
height: 1px;
background-color: #030303;
display: block;
transform: rotate(90deg);
}
.faq__question {
text-align: left;
padding: 24px 43px;
background-color: #fff;
position: relative;
cursor: pointer;
}
.faq__question.open {
background-color: #e19b9f;
color: #fff;
}
.faq__question.open .faq__text::before {
color: #fff;
}
.faq__question.open .faq__border {
background-color: #fff;
transition: 0.3s;
}
.faq__question.open .faq__border:nth-child(2) {
background-color: transparent;
}
.faq__answer {
font-size: 16px;
padding: 33px 43px;
background-color: #fff;
display: none;
}
.support {
text-align: center;
margin-top: 250px;
margin-bottom: 140px;
}
.support__title {
font-size: 34px;
font-weight: 700;
display: inline-block;
position: relative;
}
.support__titleRed {
font-size: 64px;
color: #dd3e4e;
margin-top: 70px;
margin-bottom: 20px;
}
.support__title::before {
content: "";
display: block;
background-image: url(https://free-up.jp/car-up/wp-content/themes/carup/img/support_left.svg);
background-repeat: no-repeat;
width: 60px;
height: 90px;
position: absolute;
left: -80px;
top: 50%;
transform: translateY(-50%);
}
.support__title::after {
content: "";
display: block;
background-image: url(https://free-up.jp/car-up/wp-content/themes/carup/img/support_right.svg);
background-repeat: no-repeat;
width: 80px;
height: 121px;
position: absolute;
right: -90px;
top: 50%;
transform: translateY(-50%);
}
.support__text {
font-size: 26px;
}
.support__inner {
display: flex;
justify-content: center;
}
.support__box {
text-align: left;
}
.support__text {
font-size: 26px;
margin-top: 26px;
margin-bottom: 37px;
}
.support__btn {
width: 311px;
}
.support__man {
width: 311px;
}
.copy {
background-color: #dd3e4e;
text-align: center;
font-size: 14px;
color: #fff;
padding: 47px 0;
}
.header img{
width: 100%;
max-width: 160px;
height: 60px;
background-color: #fff;
}
.corp{
max-width: 535px;
width: 100%;
padding: 160px 0 5px;
color: #303030;
margin: 0 auto;
line-height: 3;
text-align: left;
}
.corp tr{
font-size: 16px;
padding: 15px 0;
}
.corp td{    
width: 140px;
}
.corp th{
font-weight: normal;
}
.addline {
width: 100%;
margin: 0 auto 150px;
max-width: 710px;
}
.openbtn p {
display: none;
}
.nav_privacy {
display: none;
} .nav {
position: fixed;
height: 30px;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: #fff;
color: #414141;
border-bottom: 1px solid #e4e4e4;
text-align: center;
padding: 20px;
z-index: 10;
}
.nav ul {
margin-right: 50px;
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.nav ul li a {
color: #666;
padding: 10px;
text-decoration: none;
}
.anchor{
position: relative;
top: -300px;
display: block;
} .button_wrap {
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
font-weight: bold;
text-align: center;
display: inline-block;
}
.button_wrap a{
text-decoration: none;
}
.button_text_wrap {
display: inline-block;
}
.button_text_wrap .button_text_decoration {
margin-bottom: -8px;
padding-right: 3px;
margin-left: auto;
}
.button_text_wrap p {
margin-bottom: 5px;
color: #fff;
}
.register_button {
width: 350px;
height: 80px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
flex-direction: row;
color: #fff;
background-color: #06C755;
-webkit-box-shadow: 3px 3px 6px #00000099;
box-shadow: 3px 3px 6px #00000099;
border-radius: 53px;
-webkit-animation: register_button 2s infinite;
animation: register_button 2s infinite;
}
@-webkit-keyframes register_button {
0% {
-webkit-transform: translate(0px, 2px);
transform: translate(0px, 2px);
}
5% {
-webkit-transform: translate(0px, -2px);
transform: translate(0px, -2px);
}
10% {
-webkit-transform: translate(0px, 2px);
transform: translate(0px, 2px);
}
15% {
-webkit-transform: translate(0px, -2px);
transform: translate(0px, -2px);
}
20% {
-webkit-transform: translate(0px, 2px);
transform: translate(0px, 2px);
}
25% {
-webkit-transform: translate(0px, -2px);
transform: translate(0px, -2px);
}
30% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
@keyframes register_button {
0% {
-webkit-transform: translate(0px, 2px);
transform: translate(0px, 2px);
}
5% {
-webkit-transform: translate(0px, -2px);
transform: translate(0px, -2px);
}
10% {
-webkit-transform: translate(0px, 2px);
transform: translate(0px, 2px);
}
15% {
-webkit-transform: translate(0px, -2px);
transform: translate(0px, -2px);
}
20% {
-webkit-transform: translate(0px, 2px);
transform: translate(0px, 2px);
}
25% {
-webkit-transform: translate(0px, -2px);
transform: translate(0px, -2px);
}
30% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
.register_button p {
font-size: 1.2em;
margin: 0 5%;
}
.register_button p span {
color: #FFF700;
font-size: 1.2em;
}
.register_button:hover {
opacity: 0.8;
-webkit-transition: .5s;
transition: .5s;
}
.button_img {
width: 40px;
height: 40px;
background: url(https://free-up.jp/car-up/wp-content/themes/carup/img/LINE_Brand_icon.png) no-repeat center center/cover;
}
.button_arrow {
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 15px;
border-color: transparent transparent transparent #fff;
}
.button_text_decoration {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 15px;
height: 20px;
}
.button_text_decoration span {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
width: 100%;
background: #fff;
}
.button_text_decoration span:nth-of-type(1) {
-webkit-transform: rotate(70deg);
transform: rotate(70deg);
}
.button_text_decoration span:nth-of-type(3) {
-webkit-transform: rotate(110deg);
transform: rotate(110deg);
}
#button_fixed,
#button_fixed_sp {
position: fixed;
right: 2%;
bottom: -500px;
z-index: 10;
}
#button_fixed .button_text_wrap p,
#button_fixed_sp .button_text_wrap p {
color: #414141;
}
#button_fixed .button_text_wrap span,
#button_fixed_sp .button_text_wrap span {
height: 1px;
background-color: #414141;
}
#button_fixed_sp {
display: none;
left: 0;
right: 0;
margin: auto;
z-index: 10;
}
@media screen and (max-width: 1024px) {
.header img{
padding-top: 10px;
padding-left: 10px;
width: 100%;
max-width: 160px;
height: 60px;
background-color: #fff;
}
.nav_privacy {
display: block;
}
.nav {
background-color: transparent;
border-bottom: none;
padding-left: 0;
padding-top: 15px;
}
.nav ul {
display: block;
}
.openbtn { position: fixed;
background: #DD3E4E;
cursor: pointer;
width: 50px;
height: 50px;
top: 3px;
right: 15px;
border-radius: 5px;
}
.openbtn p {
display: block;
} .openbtn {
position: relative;
}
.openbtn p {
color: #fff;
font-size: 7px;
position: absolute;
left: 0;
right: 0;
margin: auto;
bottom: 0;
}
.openbtn p:nth-of-type(1) {
visibility: visible;
}
.openbtn p:nth-of-type(2) {
visibility: hidden;
}
.openbtn span {
display: inline-block;
-webkit-transition: all .4s;
transition: all .4s; position: absolute;
left: 14px;
height: 2px;
border-radius: 5px;
background: #fff;
width: 45%;
}
.openbtn span:nth-of-type(1) {
top: 13px;
}
.openbtn span:nth-of-type(2) {
top: 19px;
}
.openbtn span:nth-of-type(3) {
top: 25px;
} .openbtn.active p:nth-of-type(1) {
visibility: hidden;
}
.openbtn.active p:nth-of-type(2) {
visibility: visible;
}
.openbtn.active span:nth-of-type(1) {
top: 14px;
left: 18px;
-webkit-transform: translateY(6px) rotate(-45deg);
transform: translateY(6px) rotate(-45deg);
width: 30%;
}
.openbtn.active span:nth-of-type(2) {
opacity: 0;
}
.openbtn.active span:nth-of-type(3) {
top: 26px;
left: 18px;
-webkit-transform: translateY(-6px) rotate(45deg);
transform: translateY(-6px) rotate(45deg);
width: 30%;
}
.globalMenuSp {
height: 100vh;
position: fixed;
visibility: hidden;
z-index: 50;
top: 0;
left: 0;
color: #707070;
background: #fafafa;
text-align: center;
width: 80%;
opacity: 0;
-webkit-transition: opacity .6s ease, visibility .6s ease;
transition: opacity .6s ease, visibility .6s ease;
}
.globalMenuSp ul {
margin: 0 auto;
padding: 0;
width: 100%;
}
.globalMenuSp ul li {
margin-top: 30px;
list-style-type: none;
width: 100%;
-webkit-transition: .4s all;
transition: .4s all;
}
.globalMenuSp ul li:last-child {
margin-bottom: 30px;
padding-bottom: 0;
}
.globalMenuSp ul li:hover {
background: #ddd;
}
.globalMenuSp ul li a {
display: block;
color: #707070;
padding: 1em 0;
text-decoration: none;
} .globalMenuSp.active {
opacity: 100;
visibility: visible;
}
.br__pc {
display: none;
}
.btn__img {
width: 35.6vw;
}
.top__btn {
bottom: 3%;
right: 7%;
}
.reason {
margin-bottom: 13vw;
}
.reason__inner {
display: block;
padding-left: 6.1vw;
padding-right: 6.1vw;
box-sizing: border-box;
margin-bottom: 0;
}
.reason__box {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 4.8vw;
}
.reason__box:nth-child(2) {
flex-direction: row-reverse;
}
.reason__side {
max-width: 100%;
margin: 0;
}
.reason__small {
width: 25.7vw;
height: 100%;
}
.reason__large {
width: 34.7vw;
}
.reason__title {
font-size: 2.9vw;
}
.reason__text {
margin-left: 4.4vw;
font-size: 2.5vw;
}
.reason__bottom {
margin-right: 4.4vw;
white-space: nowrap;
font-size: 2.5vw;
}
.reason__red {
font-size: 2.7vw;
}
.reason__redLarge {
font-size: 3.7vw;
}
.trouble {
margin-bottom: 10vw;
}
.trouble__title {
top: 8vw;
}
.trouble__inner {
display: block;
}
.trouble__group {
margin-left: 0;
}
.trouble__good {
width: 12.8vw;
margin-top: 2.9vw;
}
.trouble__box {
display: flex;
justify-content: center;
}
.trouble__list {
margin-right: 4.4vw;
}
.trouble__list:nth-child(2) {
margin-right: 0;
}
.trouble__item {
font-size: 2.8vw;
}
.voice__container {
padding: 0 6.1vw;
box-sizing: border-box;
}
.voice__people {
max-width: 100%;
}
.voice__text {
font-size: 2.7vw;
padding: 5.2vw 3.1vw;
text-align: left;
}
.voice__item {
padding: 2.4vw 3.9vw;
}
.flow__inner {
display: block;
padding-left: 6.1vw;
padding-right: 6.1vw;
box-sizing: border-box;
padding-top: 15.6vw;
}
.flow__group {
width: 100%;
margin: 0 auto;
padding: 9vw 0;
border-top: solid 0.5vw #808080;
position: relative;
}
.flow__group::after {
content: "";
display: block;
background-image: url(https://free-up.jp/car-up/wp-content/themes/carup/img/flow_arrow_sp.svg);
width: 8.9vw;
height: 8.9vw;
position: absolute;
bottom: -4.6vw;
left: 50%;
transform: translate(-50%);
z-index: 1;
}
.flow__group:nth-child(5) {
border-bottom: solid 0.5vw #808080;
}
.flow__group:nth-child(5)::after {
content: none;
}
.flow__box {
display: flex;
justify-content: center;
align-items: center;
}
.flow__box::before {
content: none;
}
.flow__box::after {
content: none;
}
.flow__content {
width: 43vw;
text-align: left;
}
.flow__icon {
width: 14.6vw;
margin-right: 7.3vw;
margin-bottom: 0;
}
.flow__number {
font-size: 4.1vw;
}
.flow__title {
font-size: 2.5vw;
margin-bottom: 2.2vw;
}
.flow__text {
font-size: 2.5vw;
}
.faq {
padding-left: 6.1vw;
padding-right: 6.1vw;
box-sizing: border-box;
}
.faq__inner {
padding-left: 2.9vw;
padding-right: 2.9vw;
}
.support {
margin-top: 16.2vw;
padding: 0 6.1vw;
}
.support__title {
font-size: 3.3vw;
}
.support__titleRed {
font-size: 6.2vw;
}
.support__text {
font-size: 2.5vw;
}
}
@media screen and (max-width: 750px) {
.br__sp {
display: block;
}
.title__text {
white-space: nowrap;
font-size: 6vw;
}
.btn__img {
width: 83vw;
}
.top__container {
margin-bottom: 3.5vw;
}
.top__box {
padding: 0 5.7vw;
box-sizing: border-box;
}
.top__inner {
margin-right: 4.3vw;
margin-bottom: 11.4vw;
}
.top__circle {
width: 25vw;
height: 25vw;
margin-right: 4.5vw;
}
.top__circleText {
width: 25vw;
height: 25vw;
font-size: 3.5vw;
white-space: nowrap;
border: solid 0.9vw #1d2d66;
}
.top__circle::before {
bottom: -3vw;
right: -3vw;
background-image: repeating-linear-gradient(-135deg, #1d2d66, #1d2d66 0.7vw, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 1.29vw);
}
.top__title {
font-size: 6.5vw;
white-space: nowrap;
margin-bottom: 5vw;
}
.reason {
margin-top: 27vw;
margin-bottom: 12vw;
}
.reason__inner {
padding: 20vw 5.7vw 0;
}
.reason__small {
width: 37.7vw;
}
.reason__large {
width: 51vw;
}
.reason__title {
font-size: 4.3vw;
}
.reason__text {
font-size: 3.7vw;
margin-left: 6.4vw;
}
.reason__bottom {
display: block;
}
.reason__item {
font-size: 3.7vw;
}
.reason__red {
font-size: 4vw;
}
.reason__redLarge {
font-size: 5.4vw;
}
.reason__img {
margin: 5.7vw 0 7.7vw;
padding: 0 5.7vw;
box-sizing: border-box;
}
.trouble {
margin-bottom: 14vw;
}
.trouble__title {
font-size: 6vw;
}
.trouble__picture::before {
border: 18vw solid transparent;
border-top: 11vw solid #e7e7e7;
}
.trouble__inner {
margin-top: 18.5vw;
padding: 0 5.7vw;
box-sizing: border-box;
}
.trouble__good {
width: 18.7vw;
}
.trouble__box {
margin-top: 5.7vw;
}
.trouble__item {
font-size: 4vw;
}
.trouble__img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}
.voice {
background-image: url(https://free-up.jp/car-up/wp-content/themes/carup/img/voice_bg_sp.png);
background-size: 100%;
padding-bottom: 20vw;
}
.voice__container {
padding: 0 5.7vw;
}
.voice__top {
padding-top: 28.5vw;
}
.voice__people {
margin-top: 17vw;
padding-bottom: 12vw;
}
.voice__text {
font-size: 4vw;
line-height: 1.8;
padding: 7vw 5.7vw;
margin-bottom: 12.8vw;
}
.voice__name {
font-size: 3.7vw;
margin-bottom: 5.7vw;
}
.voice__comment {
font-size: 3.7vw;
}
.voice__item {
padding: 4.3vw;
}
.voice__y {
width: 17.8vw;
}
.voice__t {
width: 14.8vw;
}
.voice__i {
width: 22.5vw;
}
.voice__n {
width: 16.4vw;
}
.voice__odd {
margin-left: 5.7vw;
}
.voice__odd::before {
left: -8%;
font-size: 2.8vw;
}
.voice__even {
margin-right: 5.7vw;
}
.voice__even::before {
right: -8%;
font-size: 2.8vw;
}
.voice__group {
margin-bottom: 10.4vw;
}
.flow {
margin-bottom: 16vw;
}
.flow__inner {
padding: 24.3vw 5.7vw 0;
}
.flow__group {
padding: 6.4vw 0;
}
.flow__number {
font-size: 6vw;
}
.flow__icon {
width: 21.4vw;
}
.flow__title {
font-size: 3.7vw;
}
.flow__text {
font-size: 3.7vw;
}
.flow__box {
padding: 3.5vw 0;
}
.faq {
padding: 0 5.7vw;
}
.faq__inner {
padding: 8.5vw 4.7vw 4vw;
border: solid 0.81vw #dd3e4e;
}
.faq__title {
margin-bottom: 12.8vw;
font-size: 6vw;
}
.faq__text {
align-items: center;
font-size: 3.7vw;
padding-left: 7.1vw;
}
.faq__text::before {
font-size: 6vw;
}
.faq__question {
padding: 4.3vw 5vw 4.3vw 3.3vw;
}
.faq__answer {
font-size: 3.7vw;
padding: 4.3vw 3.8vw;
}
.faq__toggle {
right: 3.3vw;
width: 2.9vw;
height: 2.9vw;
}
.faq__border {
width: 2.9vw;
}
.faq__border:nth-child(2) {
width: 2.9vw;
}
.support {
margin-top: 13.7vw;
margin-bottom: 10.2vw;
padding: 0 5.7vw;
}
.support__title {
font-size: 4.3vw;
}
.support__titleRed {
font-size: 8vw;
margin-top: 7.1vw;
margin-bottom: 2.9vw;
}
.support__title::before {
width: 8.5vw;
height: 12.8vw;
left: -10vw;
}
.support__title::after {
width: 11.4vw;
height: 16vw;
right: -11vw;
}
.support__inner {
display: block;
position: relative;
height: 100%;
text-align: center;
}
.support__text {
font-size: 3.7vw;
margin-bottom: 13vw;
margin-top: 7vw;
text-align: center;
display: inline-block;
}
.support__box {
position: relative;
z-index: 1;
}
.support__man {
position: absolute;
top: 0;
right: 1vw;
width: 39vw;
z-index: 0;
transform: rotate(5deg);
}
.support__btn {
display: block;
margin: 0 auto;
}
.copy {
font-size: 2.8vw;
padding: 7vw 0;
}
.header {
margin: 0 auto;
padding: 1vw;
text-align: center;
}
.corp {
max-width: 90%;
width: 100%;
padding: 20vw 0 5px;
color: #303030;
margin: 30vw auto 0;
line-height: 1.2;
text-align: center;
}
.corp tr {
font-size: 16px;
padding: 15px 0;
display: block;
text-align: center;
}
.corp td {
display: block;
text-align: center;
}
.corp th {
font-weight: normal;
display: block;
}
.addline {
width: 95%;
margin: 2vw auto 15vw;
}
}
@media screen and (max-width: 480px) {
.nav{
margin: 0;
}
.header img{
padding: 0;
margin: -5px 0 0 -10px;
}
#button_fixed {
display: none;
}
#button_fixed_sp {
display: block;
}
.register_button,
#button_fixed_sp {
width: 300px;
height: 70px;
}
.register_button p,
#button_fixed_sp p {
font-size: 1em;
}
.button_text_wrap .button_text_decoration {
padding-top: 10px;
margin-bottom: 0.5px;
margin-left: auto;
}
.button_text_wrap p {
font-size: 0.8em;
}
.button_text_decoration {
margin-right: 2px;
width: 15px;
height: 10px;
}
}
@media screen and (max-width: 320px) {
.register_button,
#button_fixed_sp {
width: 280px;
height: 60px;
}
.register_button p,
#button_fixed_sp p {
font-size: .9em;
}
.button_text_wrap .button_text_decoration {
padding-top: 5px;
margin-left: auto;
}
.button_text_wrap p {
font-size: 0.8em;
}
.button_img {
width: 30px;
height: 30px;
}
.button_arrow {
width: 0;
height: 0;
border-style: solid;
border-width: 8px 0 8px 10px;
border-color: transparent transparent transparent #fff;
}
}