@charset "utf-8";

#car-p-page {
    max-width: 1200px;
    margin: 0 auto;
    line-height: 1.4;
    font-family: 'M PLUS 1p', sans-serif;
    font-style: normal;
    text-align: center;
}
/* ------------------------------　a下線非表示ここから　------------------------------ */
#car-p-page a {
    cursor: pointer;
    text-decoration: none;
    color: #000000;
}

#car-p-page a:hover {
    color: #E60012;
}
/* ------------------------------　a下線非表示ここまで　------------------------------ */

#car-p-page .clearfix::after {   /* float解除したい親要素に */
  content: "";
  display: block !important; 
  clear: both !important; 

}

#car-p-page .background100 {
    margin: 0 calc(50% - 50vw);
    width: 100vw;
}

#car-p-page .background100-00 {
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    background-color:#dcdcdcdc;
    padding: 4% 0;
    border-bottom: #E60012 7px solid;
}

#car-p-page .background-return  {
    max-width: 1100px;
    margin: 0% auto;
}

#car-p-page .background-return02  {
    max-width: 1100px;
    margin: 1% auto;
}

#car-p-page .line01{
  border-bottom: #000000 solid 4px;
  margin: 0 40%;
}

@media(min-width:768px) {/* ---------- 幅768ブレイクポイント以上で非表示 ---------- */
#car-p-page .hidden-01{
    display: none;
}
}

@media(max-width:767px) {/* ---------- 幅767ブレイクポイント以下で非表示 ---------- */
#car-p-page .hidden-02{
    display: none;
}
}

/* ------------------------------　ページ内スクロールここから　------------------------------ */
@media(max-width:767px) {
#car-p-page .scroll{
  height: 160px;
  overflow: auto;
}
#car-p-page .line00{
  border: #e4f1fc solid 8px;
  padding: 2%;
}
}
/* ------------------------------　ページ内スクロールここまで　------------------------------ */

/* ------------------------------　イメージレスポンシブ対応ここから　------------------------------ */
#car-p-page .img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
    margin:  0 auto;
}
@media(max-width:1100px) {
#car-p-page .img-responsive {
    display: block;
    max-width: 94%;
    height: auto;
    margin:  0 auto;
    padding: 0 3%;
}
}

/* ------------------------------　イメージレスポンシブ対応ここまで　------------------------------ */

/* リンクのhover/focus */

#car-p-page a img:hover {
        /* opacity: 0.9; */
     box-shadow: none ;
    }

#car-p-page a:hover.opa,
#car-p-page a:focus.opa,
#car-p-page a img:hover.opa,
#car-p-page a img:focus.opa{
    opacity: 0.8;
    -webkit-transition: opacity .1s 0s, visibility 0s 0s;
    transition: opacity .1s 0s, visibility 0s 0s;
}

/* ------------------------------ 基本カラム割ここから ------------------------------ */
#car-p-page .col-21{
    float: left;
    width: 23%;
    padding: 1% 1% 2% 1%;
}

/* ---------- 幅767ブレイクポイント以下での挙動ここから ---------- */
@media(max-width:767px) {
#car-p-page .col-21{
    float: left;
    width: 46%;
    padding: 3% 1% 4% 1%;
    margin: 0 1%;
}
}

/* ------------------------------ 使用フォントここから ------------------------------ */

/* ---------- 使用フォントサイズここから（幅に対するおおよそのpx値） ---------- */
#car-p-page .f-size50 {
    font-size: 5.0vw;
}
#car-p-page .f-size40 {
    font-size: 4.0vw;
}
#car-p-page .f-size32 {
    font-size: 3.2vw;
}
#car-p-page .f-size24 {
    font-size: 2.4vw;
}
#car-p-page .f-size21 {
    font-size: 2.1vw;
}
#car-p-page .f-size18 {
    font-size: 1.8vw;
}
#car-p-page .f-size16 {
    font-size: 1.6vw;
}
#car-p-page .f-size15 {
    font-size: 1.5vw;
}
#car-p-page .f-size14 {
    font-size: 1.4vw;
}
#car-p-page .f-size12 {
    font-size: 1.2vw;
}
#car-p-page .f-size10 {
    font-size: 1.0vw;
}

/* ---------- 使用フォントサイズここから（幅1100px以上ではコレより大きくしない） ---------- */
@media(min-width:1100px) {
#car-p-page .f-size50 {
    font-size: 55px;
}
#car-p-page .f-size40 {
    font-size: 44px;
}
#car-p-page .f-size32 {
    font-size: 35.2px;
}
#car-p-page .f-size24 {
    font-size: 26.4px;
}
#car-p-page .f-size21 {
    font-size: 23.1px;
}
#car-p-page .f-size18 {
    font-size: 19.8px;
}
#car-p-page .f-size16 {
    font-size: 17.6px;
}
#car-p-page .f-size15 {
    font-size: 16.5px;
}
#car-p-page .f-size14 {
    font-size: 15.4px;
}
#car-p-page .f-size12 {
    font-size: 13.2px;
}
}

/* ---------- 幅767ブレイクポイント以下での挙動ここから ---------- */
@media(max-width:767px) {
 #car-p-page .f-size50 {
    font-size: 5.0vw;
}
#car-p-page .f-size40 {
    font-size: 4.0vw;
}
#car-p-page .f-size32 {
    font-size: 3.2vw;
}
#car-p-page .f-size24 {
    font-size: 2.7vw;
}
#car-p-page .f-size21 {
    font-size: 2.4vw;
}
#car-p-page .f-size18 {
    font-size: 2.2vw;
}
#car-p-page .f-size16 {
    font-size: 2.1vw;
}
#car-p-page .f-size15 {
    font-size: 2.1vw;
}
#car-p-page .f-size14 {
    font-size: 1.75vw;
}
#car-p-page .f-size12 {
    font-size: 1.75vw;
}
}

/* ---------- 幅599ブレイクポイント以下での挙動ここから ---------- */
@media(max-width:599px) {
#car-p-page .f-size50 {
    font-size: 28px;
}
#car-p-page .f-size40 {
    font-size: 22px;
}
#car-p-page .f-size32 {
    font-size: 18px;
}
#car-p-page .f-size24 {
    font-size: 17.1px;
}
#car-p-page .f-size21 {
    font-size: 16.2px;
}
#car-p-page .f-size18 {
    font-size: 15.3px;
}
#car-p-page .f-size16 {
    font-size: 14.4px;
}
#car-p-page .f-size15 {
    font-size: 14.0px;
}
#car-p-page .f-size14 {
    font-size: 11px;
}
#car-p-page .f-size12 {
    font-size: 12px;
}
#car-p-page .f-size12-s {
    font-size: 12px;
}
}

/* ---------- 使用フォント太さ ---------- */
#car-p-page .f-weight100 {
    font-weight: 100;
}
#car-p-page .f-weight300 {
    font-weight: 300;
}
#car-p-page .f-weight400 {
    font-weight: 400;
}
#car-p-page .f-weight500 {
    font-weight: 500;
}
#car-p-page .f-weight700 {
    font-weight: 700;
}
#car-p-page .f-weight900 {
    font-weight: 900;
}

/* ------------------------------ 使用フォントここまで ------------------------------ */


/* ------------------------------ text関係ここから ------------------------------ */
/* ---------- テキスト揃え位置ここから ---------- */
#car-p-page .text-a-c {
    text-align: center; 
}
#car-p-page .text-a-l {
    text-align: left; 
    /* transform: rotate(-0.05deg); */
}
#car-p-page .text-a-r {
    text-align: right; 
}

@media(max-width:767px) {
    #car-p-page .text-a-l-s {
    text-align: left; 
}
}
/* ---------- テキスト揃え位置ここまで ---------- */

/* ---------- テキスト行間ここから ---------- */
#car-p-page .line-h10{
    line-height: 1.0;
    display: block;
}
#car-p-page .line-h11{
    line-height: 1.1;
    display: block;
}
#car-p-page .line-h12{
    line-height: 1.2;
    display: block;
}
#car-p-page .line-h13{
    line-height: 1.3;
    display: block;
}
#car-p-page .line-h14{
    line-height: 1.4;
    display: block;
}
#car-p-page .line-h15{
    line-height: 1.5;
    display: block;
}
#car-p-page .line-h16{
    line-height: 1.6;
    display: block;
}
#car-p-page .line-h17{
    line-height: 1.7;
    display: block;
}
#car-p-page .line-h18{
    line-height: 1.8;
    display: block;
}
/* ---------- テキスト行間ここまで ---------- */
/* ------------------------------ text関係ここまで ------------------------------ */


/* ------------------------------ 使用カラーここから ------------------------------ */
/* ---------- 文字色ここから ---------- */
#car-p-page .f-color-black {
    color: #000000;
}
#car-p-page .f-color-white {
    color: #FFFFFF;
}
/* ---------- 文字色ここまで ---------- */
@media(min-width:768px) {
#car-p-page .b-color {
    background-color: #e4f1fc;
}
#car-p-page .b-color-w {
    background-color: #ffffff;
}
}


/* ------------------------------ 吹き出しここから ------------------------------ */
#car-p-page .arrow_box{
    position:relative;
    width:40%;
    background:#E60012;
    padding:10px;
    text-align:center;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
}
#car-p-page .arrow_box:after{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    border-color: rgba(230, 0, 18, 0);
    border-top-width:10px;
    border-bottom-width:10px;
    border-left-width:10px;
    border-right-width:10px;
    margin-left: -10px;
    border-top-color:#E60012;
    top:100%;
    left:50%;
}

@media(max-width:767px) {
    #car-p-page .arrow_box{
    position:relative;
    width:80%;
    background:#E60012;
    padding:10px 2%;
    text-align:center;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
}
#car-p-page .arrow_box:after{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    border-color: rgba(230, 0, 18, 0);
    border-top-width:10px;
    border-bottom-width:10px;
    border-left-width:10px;
    border-right-width:10px;
    margin-left: -10px;
    border-top-color:#E60012;
    top:100%;
    left:50%;
}
}
/* ------------------------------ 吹き出しここまで ------------------------------ */


/* ------------------------------ 各marginここから 上-右-下-左　％ ------------------------------ */
#car-p-page .margin2-0-0-0 {
    margin:  2% 0 0 0;
}
#car-p-page .margin4-0-0-0 {
    margin:  4% 0 0 0;
}
#car-p-page .margin8-0-0-0 {
    margin:  8% 0 0 0;
}
#car-p-page .margin2-8-0-8 {
    margin:  0% 8% 0 8%;
}
#car-p-page .margin12-30-0-30 {   /* 吹き出しの位置 */
    margin:  12% 30% 0 30%;
}

@media(max-width:767px) {
#car-p-page .margin0-0-0-0-s {
    margin:  0 0 0 0;
}

#car-p-page .margin2-a-0-a-s {
    margin:  2% auto;
}

#car-p-page .margin2-0-0-0-s {
    margin:  2% 0 0 0;
}
#car-p-page .margin4-0-0-0-s {
    margin:  4% 0 0 0;
}
#car-p-page .margin2-8-0-8 {
    margin:  0% 3% 0 3%;
}

#car-p-page .margin0-0-0-2-s {
    margin:  0 0 0 2%;
}
#car-p-page .margin0_5-0-0-2-s {
    margin:  0.5% 0 0 2%;
}
#car-p-page .margin1-0-0-2-s {
    margin:  1% 0 0 2%;
}


#car-p-page .margin8-10-0-10-s{   /* 吹き出しの位置 */
    margin:  8% 10% 0 10%;
}
#car-p-page .margin12-10-0-10-s {   /* 吹き出しの位置 */
    margin:  12% 8% 0 8%;
}
}
/* ------------------------------ 各marginここまで ------------------------------ */


/* ------------------------------ 各paddingここから 上-右-下-左　％ ------------------------------ */
#car-p-page .padding8-0-12-0 {
    padding:  8% 0 12% 0;
}
#car-p-page .padding4-4-4-4 {
    padding:  4%;
}
#car-p-page .padding2-0-2-0 {
    padding:  2% 0;
}

@media(max-width:767px) {
    #car-p-page .padding0-4-0-4-s {
    padding:  0 4%;
}
    #car-p-page .padding0-10-0-10-s {
    padding:  0 8.5%;
}
}
/* ------------------------------ 各paddingここまで ------------------------------ */
