/*********************
*
* 文字化け注意！！：
* 保存の際は必ず Unicode8
*
**********************/
html{
    padding:0;
    margin:0;
    background-color:#fff;
}
a img:hover{
    opacity: 0.8;
    background-color: transparent;
}

body{
    font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, sans-serif;
}
input{
    font-size:15px;
}
.req_on, .req_off, .form_any {
    font-size: 12px;
    float: left;
}
.req_on, .req_off {
    margin-right: 5px;
    padding: 5px;
    font-size: 0.8em;
    color: #ffffff;
    display: inline-block;
    float: left;
    font-weight: 500;
    margin-bottom: 5px;
}
.req_on {
    background: red;
}
.req_off {
    background: #27a424;
}
.form_title {
    display: inline-block;
    vertical-align: text-bottom;
    width: 33%;
    text-align: left;
    font-weight: 500;
    font-size: 15px;
}
.form_title label[for="as_maker"]{
    font-size: 0.9em;
    vertical-align: middle;
    display: inline-grid;
    line-height: 1.4;
}

.form_style dt label[for="as_maker"],
.form_style dt label[for="name"],
.form_style dt label[for="phone_number"]{
    color: red;
}
.form_area {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
    width: 60%;
}
/* ▼ readonly input（選択用）と select 両方に共通スタイル */
.form_area input[readonly],
.form_area select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    font-size: 16px;
    border: 1px solid #ccc;
    background-color: #fff;
    box-sizing: border-box;
    cursor: pointer;
}
/* ▼ select に三角 */
.form_area.triangle::after {
    content: "";
    position: absolute;
    top: 18px;
    right: 10px;
    margin-top: -3px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #333;
    pointer-events: none;
}
dl:nth-child(2) select {
    border-radius: unset;
}
#form_box input:not(.submit_btn),
#form_box select{
    padding: 1px 27px 0 10px; /* 右側に三角用余白 */
    line-height: normal;
}
.contact_form dd input,
.contact_form dd select {
    height: 36px;
}
.err_msg{
    font-size:13px;
    text-align: left;
    line-height: 1.6;
}
.contact_form{
    padding-bottom: 20px;
}
#next_btn{
    padding: 20px 0;
    box-sizing: border-box;
    border-radius: 4px;
    width: 75%;
}
.submit_btn_box input.submit_btn {
    font-weight: bold;
    color: #fff;
    width: 100%;
    max-width: 370px;
    height: inherit;
    padding: 6px 0;
    border: 1px solid firebrick;
    border-radius: 4px;
    font-size: 1.6em;
    text-align: center;
    margin: 0 auto;
    display: block;
    background: linear-gradient(to bottom, #e70012 0%,#e70012 36%,#e70012 36%,#a8000d 51%,#d90011 100%);
}
#ssl_information_footer_form {
    text-align: left;
    width: 90%;
    margin: 20px auto 0;
    font-size: 0.8rem;
    line-height: 1.4;
}
#ssl_information_footer_form .ssl_ttl {
    padding-bottom: 3px;
    margin: 7px auto 2px;
    font-size: 1.2em;
    font-weight: bold;
}
#ssl_information_footer_form .ssl_ttl:before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(/img/ssl_icon.png) center;
    background-repeat: no-repeat;
    background-position: left;
    vertical-align: inherit;
    background-size: contain;
    margin-right: 4px;
}

/*‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
    共通
_______________________________________________________*/

.content_area {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}
.content_ttl{
    background: linear-gradient(to right, rgba(253,112,17,1) 0%,rgba(244,80,9,1) 100%);
    text-align: center;
    padding: 10px;
    margin-bottom: 50px;
    font-size: 32px;
    position: relative;
    color: #ffffff;
    line-height: 1.4;
}
.content_ttl img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
.content_flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.item {
    flex: 1;
}
.bgcolor{
    background-color: #fbecbd;
}
.flex{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.flex-wrap{
    flex-wrap :wrap;
    -ms-flex-wrap: wrap;
}
.flex-between{
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
}
/*__________________________cv__________________________*/
.cv {
    padding-top: 20px;
    width: 100%;      
    padding-bottom: 60px;
}
.cv .outline{
    margin-top: 0;
}
.cv .cv_ttl {
    color: #ffffff;
    background: #c70000;
    padding: 15px 0 5px;
    font-size: 34px;
    text-align: center;
    line-height: 1.5;
    font-weight: bold;
}
.cv .cv_ttl:before,
.cv .cv_ttl:after{
    content: '';
    display: inline-block;
    width: 0;
    height: 5px;
    vertical-align: middle;
    border-right: 0px solid transparent;
    border-top: 40px solid #fff;
    border-left: 10px solid transparent;
    margin: 0 3%;
    transform:skew(20deg,0deg);
}
.cv .cv_ttl:after{
    transform:skew(-20deg,0deg) scale(-1, 1);
}
.cv .flex {
    background-color: #ffffff;
    height: 160px;
    border: solid #c70000 6px;
}
.cv .flex:nth-of-type(2){
    border:solid 6px #ff4800;
    background-color: #ffffff;
    height: 180px;
}
.cv .flex .cv-tel,
.cv .flex .cv-web{
    text-align: center;
    padding: 20px 0 0;
}
.cv .flex .cv-tel{
    width: 80%;
    padding-left: 8%;
}
.cv .flex .cv-web{
    width:120%;
}
.cv .flex .cv_txt{
    padding:0 0 5px;
    font-size: 20px;
    font-weight: bold;
}
.cv .flex .cv_txt span{
    font-weight: normal;
}
.cv .flex .cv-tel{
    background: url("/carme/bn-buy/_index/img/cv-tel-bg.jpg") no-repeat;
    background-position: left 15px bottom -60px;
    background-size: 65px;
}
.cv .flex .cv-tel p:not(.cv_txt){
    font-size: 16px;
}
.cv .flex .cv-tel-num{
    color: #c70000;
    font-size: 42px;
    display: block;
    line-height: 1.2;
    font-weight: bold;
}
.cv .flex .cv-web-btn{
    background-color: #00af4e;
    display: block;
    position: relative;
    width: 90%;
    padding: 15px 0;
    text-decoration: none;
    font-weight: bold;
    margin: 0 auto;
    border-radius: 10px;
    border-bottom: 7px solid #005622;
}
.cv .flex .cv-web-btn:hover{
    bottom: -5px;
    border-bottom: 2px solid #005622;
}
.cv .flex .cv-web-btn span{
    color: #fff600;
}
.cv .flex .cv-web-btn p{
    color: #ffffff;
    font-size: 30px;
    line-height: 1.2;
}

/*‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
    ヘッダー
_______________________________________________________*/

header {
    background-color: #c70000;
    position: inherit;
    z-index: inherit;
    height: auto;
}
header .content_area {
    margin: auto;
    padding: 10px;
}
header .content_area img:nth-of-type(1) {
    float: left;
    margin-top: 4px;
    width: 20%;
}
header .content_area img:nth-of-type(2) {
    margin-right: 0;
    margin-left: auto;
    display: inherit;
}

/*‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
    メインビジュアル
_______________________________________________________*/

.main {
    background: linear-gradient(to right,  rgba(245,191,191,1) 0%,rgba(248,187,182,1) 100%);
}
.main > .content_area{
    position: relative;
}
.main > .content_area > img{
    display: block;
}
.main_form {
    width: 400px;
    background-color: #ffffff;
    color: #000000;
    position: absolute;
    z-index: 1;
    right: 0;
    top: 20px;
    border-radius: 4px;
}
.main_form .form_head {
    text-align: center;
    background-color: #1bbe5c;
    border-radius: 4px 4px 0 0;
    padding: 6px 0;
}
.main_form .form_head img{
    width: 225px;
}
.main_form form {
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.4);
    text-align: left;
    border-radius: 4px;
}
.main_form section {
    padding: 10px 4% 0;
}
.main_form section#user_area{
    padding-top: 0;
}
.main_form .heading {
    border-bottom: 1px solid #bbb;
    font-size: 1.2rem;
    margin-bottom: 15px;
    font-weight: bold;
}
.main_form .heading:before {
    content: '';
    width: 30px;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-bottom: 5px;
}
.main_form #car_area .heading:before {
    background-image: url(/img/form_icon_car.png);
}
.main_form #user_area .heading:before {
    background-image: url(/img/form_icon_customer.png);
}

.main_under {
    background-color: #dedede;
}
.main_under .content_area img{
    margin-left: 0;
    margin-right: auto;
    display: block;
    padding: 40px 0 50px;
}

/*‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
    初めての方へ
_______________________________________________________*/
.for-guest {
    border: 3px solid #0da349;
    background-color: #ffffff;
    color: #0da349;
    max-width: 750px;
    margin: 20px auto 10px;
    padding-bottom: 40px;
    box-sizing: border-box;
}
.for-guest h2 {
    background:url("/carme/bn-buy/_index/img/for-guest-bg.png") no-repeat calc(50% - 200px) 0;
    background-size: contain;
    text-align: center;
    font-size: 2em;
    line-height: 1.4;
    padding-top: 30px;
    margin: 5px 10px 0;
    margin-bottom: 10px;
}
.for-guest h2 span:after{
    content: '';
    width: 34px;
    height: 36px;
    display: inline-block;
    background: url("/carme/bn-buy/_index/img/for-guest-icon.png") no-repeat center;
    background-size: contain;
    vertical-align: top;
}
.for-guest .content_area {
    width: 50%;
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.4;
    padding: 0 10px 0;
    text-align: left;
    font-size: 1.2rem;
}
.for-guest .content_flex {
    height: 70px;
    font-weight: bold;
    font-size: 1.4em;
    margin-bottom: 10px;
    margin-top: 10px;
}
.for-guest .content_flex .item {
    text-align: center;
    background-color: #d8f6e4;
    padding: 10px 3%;
    width: 100%;
    border: 1px solid #ffffff;
}
.for-guest p.for-guest_footer {
    background: #32b16c;
    color: #ffffff;
    padding: 10px;
    border-radius: 30px;
    width: 90%;
    font-size: 20px;
    margin: 0 auto;
    box-shadow: 0 6px 1px 0 #eaeaea;
}
.for-guest p.for-guest_footer  em{
    color: #ff3600;
    font-size: 1.2em;
    padding: 0;
    background: #fff000;
}
.for-guest p.for-guest_footer span{
    color: #fff000;
}

/*‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
    カーネクストが選ばれる理由
_______________________________________________________*/

.reason{
    background-image: url("/carme/bn-buy/_index/img/reason_bg.jpg");
    background-size: auto;
    background-repeat: repeat-x;
    background-position: bottom -30px center;
}
.reason .flex div {
    border: 10px solid #efe7e7;
    background-color: #f8f3f3;
    max-width: 450px;
    width: 100%;
    margin: 0 auto 20px;
    position: relative;
    padding: 10px 0 20px;
}

.reason .flex div:before{
    content:'';
    background:  url("/carme/bn-buy/_index/img/checkmark.png") no-repeat;
    background-size: contain;
    width: 30px;
    height: 30px;
    display: inline-block;
    padding-right: 10px;
    position: absolute;
    top: 10px;
    left: 10px;
}
h3.article-title {
    font-size: 2em;
    padding: 15px 0 0;
    line-height: 1.4;
}
h3.article-title em,
h3.article-title + p em{
    color: #c70000;
    font-style: normal;
}   
h3.article-title + p{
    font-size: 1.2em;
    line-height: 1.6;
    padding: 20px 40px 0 40px;
    text-align: left;
}
.reason_content_2{
    text-align: center;
    padding-top: 40px;
    height: 430px;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
}
.reason_content_2:after {
    content: '';
    background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 66%);
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: -40%;
    right: 0;
    overflow: hidden;
    left: -5%;
    margin: 0 auto;
    z-index: 0;
}
.reason_content_2 img {
    position: absolute;
    z-index: 1;
    width: 93vw;
    max-width: 900px;
    margin: 0 auto;
    animation: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.reason .cv {
    background: #d0efeb;
}

/*‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
    カーネクストの買取事例
_______________________________________________________*/
.jirei > .content_area{
   display: flex;              /* フレックスボックスにする */
    justify-content: space-between;
    flex-wrap: wrap;
}
.jirei .kyouka{
    background-color: #ffffff;
    border: 1px solid #c70000;
    box-shadow: 0 0 8px -2px #ff0000;
    border-radius: 6px;
    padding: 0 0 20px;
    margin-bottom: 30px;
}
.jirei .kyouka h3{
    color: #ffffff;
    font-weight: bold;
    font-size: 24px;
    display: inline-block;
    padding: 3px 10px;
    margin-top: -20px;
    margin-bottom: 14px;
    background-color: #c70000;
}
.jirei .kyouka h3:before,
.jirei .kyouka h3:after{
    content: url("/carme/bn-buy/_index/img/kyouka-icon.png");
    vertical-align: middle;
}
.jirei .jirei-card {
    background-color: #ffffff;
    padding: 1.2%;
    margin-bottom: 20px;    
    width: 298px;
    height: auto;
}
.jirei .jirei-card img {
    width: inherit;
}
.jirei-card h3 {
    text-align: center;
    font-size: 1.2em;
    padding: 10px 0;
}
.jirei-card h3 + p {
    text-align: center;
    color: #c70000;
    margin: 0 0 10px;
}
.jirei-card h3 + p em {
    font-weight: bold;
    font-size: 1.6em;
    font-style: normal;
}
.jirei-card dl {
    background-color: #dedede;
    max-width: 250px;
    margin: 0 auto;
}
.jirei-card dt{
    background-color: #999999;
    color: #ffffff;
    width: 50%;
    float: left;
}
.jirei-card dd {
    border-bottom: 1px solid #ffffff;
}
.jirei-card dd,
.jirei-card dt {
    padding: 6px 0;
}
.jirei_footer_text {
    padding: 10px 0 30px;
    text-align: center;
    font-weight: bold;
    font-size: 1.6em;
    line-height: 1.4;
    width: 100%;
    background: url("/carme/bn-buy/_index/img/jirei_arrow.png") no-repeat center top -20px;
    background-size: contain;
}
/*‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
    カンタン4ステップ 車買取の流れ
_______________________________________________________*/

/*‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
    流れ
_______________________________________________________*/
.flow h2{
    margin-bottom: 50px;
}
.flow .content_ttl + p{
    text-align: center;
    font-size: 1.6em;
    font-weight: bold;
    padding: 0 0 70px;
}
.flow li{
    width: 24%;
    text-align: center;
    position: relative;
}
.flow li p{
    text-align: right;
    width: 90%;
    margin-left: -10px;
    font-size: 1.2em;
    font-weight: bold;
}
.flow .step-num{
    color: #ff2626;
    font-weight: bold;
    text-align: left;
    display: inline-block;
    width: 80%;
    position: absolute;
    top: -30px;
    right: 0;
    left: 0;
    margin: 0 auto;
    line-height: 1.2;
    padding: 0;
}
.flow .step-num em{
    font-size: 1.5em;
    font-style: normal;
}
.flow img {
    width: 100%;
}
.arrow-2::before {
    content: "";
    position: absolute;
    right: -15px;
    top: -30px;
    bottom: 0;
    margin: auto;
    box-sizing: border-box;
    width: 4px;
    height: 4px;
    border: 10px solid transparent;
    border-left: 15px solid #8d8d8d;
    transform: skew(-20deg,-5deg);
}
.arrow-2:last-child:before{
    display: none;
}

/*‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
    よくあるご質問
_______________________________________________________*/
.qa .content_ttl {
    padding: 20px 0;
}
.qa > .content_area {
    text-align:left;
}
.qa-list{
    padding: 15px 0 20px;
}
.qa .content_area li {
    background-color: #ffffff;
    padding-right: 10px;
    width: calc(100% / 3 - 25px);
}
.qa .content_area li h3 {
    color: #2b4794;
    position: relative;
    padding: 10px 0 20px 50px;
    font-size: 1.2em;
    line-height: 1.6;
}
.qa .content_area li h3:before {
    content: '';
    background: url("/carme/bn-buy/_index/img/qa_q.png") no-repeat;
    width: 40px;
    height: 40px;
    display: inline-block;
    background-size: contain;
    position: absolute;
    left: -5px;
    top: 10px;
}
.qa .content_area li p {
    position: relative;
    line-height: 1.6;
    padding: 0 0 0 50px;
}
.qa .content_area li p:before {
    content: '';
    background: url("/carme/bn-buy/_index/img/qa_a.png") no-repeat;
    width: 40px;
    height: 40px;
    display: inline-block;
    background-size: contain;
    position: absolute;
    left: -5px;
}
.qa .cv.content_area {
    padding-bottom: 20px;
}

/*‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
    フッター
_______________________________________________________*/
footer {
    background-color: #fff;
    text-align: center;
    padding: 20px 0 20px;
    color: #a2a2a2;
}
footer .content_area{
    padding:5px 0 20px;
    display: table;
}
footer .content_area p {
    display: table-cell;
}
footer .content_area p a {
    color: #000;
    padding: 0 20px;
}

/* 追加 */

/* 点滅 */
.target_item {
    border: 3px solid #f12;
    animation-name: borderFlashing;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}
@keyframes borderFlashing {
    0% {box-shadow: 0 0 0 0 #f12, 0 0 0 0 #fff, 0 0 0 1px #f12}
    100% {box-shadow: 0 0 0 0 #f12, 0 0 0 0 rgba(255,255,255,0), 0 0 0 5px rgba(100,164,134,0)}
}

/* 送信項目のエラーメッセージ */
.err_msg {
    color: #f00;
}

/* 送信ボタン後のloading画像 */
#loading_img {
    display: none;  /* 編集しないで下さい */
    /* サイズや位置は追記して変更してください。
    loading画像は /img/af15/load.gif を読み込んでいますが、svgなど他の画像を使用、または全画面で表示したいなどがある場合は変更しますので言ってください */
}

/* レイヤー */
#layer {
    display: none;   /* 編集しないで下さい */
    position: fixed; /* 編集しないで下さい */
    width: 100%;     /* 編集しないで下さい */
    height: 100%;    /* 編集しないで下さい */
    top: 0;          /* 編集しないで下さい */
    left: 0;         /* 編集しないで下さい */
    z-index: 990;    /* 編集しないで下さい */
    background-color: #fff;
    opacity: 0.8;
}

/* レイヤーのコンテンツ */
#layer_carbox {
    display: none;    /* 編集しないで下さい */
    z-index: 991;     /* 編集しないで下さい */
    position: fixed;  /* 編集しないで下さい */
    width: 100%;
    border: 1px solid #ccc;
    background-color: #fff;
}
.tab_box {
    display: none;  /* 編集しないで下さい */
}
.tab_box li {
    text-decoration: underline;
    cursor: pointer;  /* 編集しないで下さい */
}
.tab_box li:hover {
    text-decoration: none;
}
.loading_img {
    display: none;  /* 編集しないで下さい */
    width: 10%;
}