@import '../../../assets/css/lib.styl' ;
@import '../../../assets/css/style.styl'

//--------------個別スタイル---------------
html
  scroll-behavior: smooth;
.inner
  width calc(100% - 40px)
  margin 0 auto
  +tablet()
    max-width 950px

get_vw_wide(size, viewport=1200)
  100/viewport * size * 1vw

get_vw_small(size, viewport=390)
  100/viewport * size * 1vw
  
fz_vw_wide(font-size){
  font-size get_vw_wide(font-size)
}
fz_vw_small(font-size){
  font-size get_vw_small(font-size)
}

// - * section-top * - //
.section-top
  // background linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 6%, #FFC300 6%, #FFC300 5% 100%)
  // background #FFC300
  // padding-bottom 20px
  
.section-top-inner
  padding 10px 20px 16px
  +tablet()
    max-width 1200px
    margin 0 auto
  .carmo-logo
    height 44px
    position relative
    background #fff
    img
      position absolute
      left 50%
      top 50%
      transform translate(-50%, -50%)
  .advantage-top-img-area
    margin-top 20px

body .section-top-campaign-wrapper
  margin-bottom -1rem
  position relative
  top -1rem
main
  +tablet()
    max-width 600px
    margin auto
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
// .carmo-logo
//  position absolute
//  right 10px
//  +mobile()
//    top 2.3%
//    width 100px
//  +tablet()
//    top 1.3%
//    width 110px
//  +desktop()
//    top 1.3%
//    width 160px
//  img
//    vertical-align top
.annotation
  text-align left
  color #666666
  font-size calc(10 / 16 * 1rem)
  line-height 1.2
.section-top-fv-inner
  padding 0
  +tablet()
    margin 0 auto
    max-width 1200px
    padding 10px 0 0

figure.has-text-centered
  img
    margin 0 auto

.is-img-pc-350
  +tablet()
    max-width 350px
.is-img-pc-500
  +tablet()
    max-width 500px
.is-img-pc-700
  +tablet()
    max-width 700px
.line-height-1
  line-height 1
.line-height-2
  line-height 2.0
.input
  +mobile()
    width 70%
  +tablet()
    width 500px

.is-size-19
  font-size 19px
.is-size-24
  font-size 24px
.link-area
  // background #FFC300
  padding-bottom 20px
  li
    margin-bottom 10px
    a
      display block
      background #fff url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/f0addbd405ed4837b17ffdad4bbafc37/link-marker.svg") no-repeat right 10px center
      padding 10px
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 10px;
      text-align center
      font-weight bold
.is-margin-negative
  margin 0 -20px
.has-section-border-top
  border-top 1px solid #DDE0E0
// - * section-recommend * - //
.section-recommend
  padding 20px 0
  +tablet()
    background #6E221B url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/16e23cc8e0a34b209d0ed8ab46303114/def_bg_pc.svg") no-repeat center /cover
  +mobile()
    background #6E221B url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/ec4ba095c1134c5d9c7b3ee1f4f3816f/def_bg_sp.svg") no-repeat center /cover

triangleBase(){
  display block
  position absolute
  content ""
  width 0
  height 0
  border-style solid
}

balloonTriangle-top(width,height,color){
  triangleBase()
  borderWitdh = (width/2)px
  border-right borderWitdh solid transparent
  border-left borderWitdh solid transparent
  border-bottom (height)px solid color
  border-top 0
}

balloonTriangle-bottom(width,height,color){
  triangleBase()
  borderWitdh = (width/2)px
  border-right borderWitdh solid transparent
  border-left borderWitdh solid transparent
  border-top (height)px solid color
  border-bottom 0
}

balloonTriangle-right(width,height,color){
  triangleBase()
  borderWitdh = (width/2)px
  border-top borderWitdh solid transparent
  border-bottom borderWitdh solid transparent
  border-left (height)px solid color
  border-right 0
}

balloonTriangle-left(width,height,color){
  triangleBase()
  borderWitdh = (width/2)px
  border-top borderWitdh solid transparent
  border-bottom borderWitdh solid transparent
  border-right (height)px solid color
  border-left 0
}

.def-point
  flex-wrap wrap
  justify-content center
  gap 1%
  dl
    flex-basis 32%
  dt
    background #6E221B
    border-top-left-radius 9px
    border-top-right-radius 9px
    padding 5px
    position relative
    &:before
      balloonTriangle-bottom(12,12,#6E221B)
      bottom -10px
      left 50%
      transform translateX(-50%)
  dd
    font-size 0.9rem

  +mobile()
    background: #FFFFFF;
    border-radius: 9px;
    padding 20px
    margin-bottom 20px!important
    
  +tablet()
    padding-bottom 20px
    dl
      background: #FFFFFF;
      border-radius: 9px;
      padding 20px
      max-width 312px
  
.def-point-2
  justify-content space-between
  .small
    font-size 0.5em
  
  .column
    flex-grow 0
    flex-basis 49%
    +mobile()
      margin-bottom 20px!important

.recommend-price
  h2
    .small
      font-size 0.5em
.recommend-price-items-wrapper
  position relative
  padding 30px 20px
.recommend-price-items
  border 3px solid #FFC300
  padding 10px 15px 20px
  display grid
  grid-template-columns repeat(auto-fit,minmax(160px,1fr))
  column-gap 10px
  row-gap 10px
  align-items center
  padding-bottom 30px
  +mobile()
    grid-template-columns repeat(auto-fit,minmax(125px,1fr))
    column-gap 10px
.recommend-price-item
  border-radius 30px
  font-size 18px
  position relative
  .small
    font-size 0.8em
  @media screen and (max-width:970px) 
    font-size 16px
    .small
      font-size 0.5em
  +mobile()
    font-size 16px
    .small
      font-size 0.5em
  @media screen and ( max-width:389px )
    font-size 18px 
  &:before
    position absolute
    content ""
    width 100%
    height 50%
    background #FFC300
    left 0
    bottom 0
    z-index 0
    border-radius 16px
  p
    position relative
.recommend-price-text-01
  display inline-block
  position absolute
  font-size 30px
  left 50%
  transform translateX(-50%)
  bottom 9px
  width 70%
  +tablet()
    line-height 1
    bottom 11px
    width 450px
    font-size 40px
  &:after,
  &:before
    content "●"
    display inline-block
    position absolute
    color #FFC300
    transform scale(50%)
  &:before
    left -10px
    +tablet()
      left -20px
  &:after
    right -10px
    +tablet()
      right -20px
  .is-hidden-mobile
    display inline !important
    +mobile()
      display none !important
.recommend-price-text-02
  font-size 36px
  padding 5px 0
  position relative
  display inline-block
  +tablet()
    font-size clamp(51px, get_vw_wide(66), 78px)
  +mobile()
    fz_vw_small(36)
  .strong
    font-size 1.5em
  &:before,
  &:after
    content url(https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/35d0b1f455194db0af94076af34901fd/icon-price-item-deco.png)
    display inline-block
    position absolute
    bottom 0
  &:before
    left -45%
    transform scale(50%)
  &:after
    right -45%
    transform scaleX(50%) scaleY(50%) scale(-1,1)
  +tablet()
    &:before
      left -20%
      transform scale(50%)
    &:after
      right -20%
      transform scaleX(50%) scaleY(50%) scale(-1,1)
.has-text-pale-yellow
  color #F9F3AD
.is-size-18
  font-size 18px
  +tablet()
    font-size 20px
.is-size-22
  font-size 22px
  +tablet()
    font-size 30px
  @media screen and ( max-width:374px )
    font-size 20px
.is-size-24
  font-size 24px
  +tablet()
    font-size 32px
.is-size-26
  font-size 26px
  +tablet()
    font-size 34px

.is-border-radius
  border-radius 9px

.section-howto
  padding 20px 0 0
.triangle-yelow
  background-color: #FFC300;
  position relative
  margin-bottom 30px
  padding 10px
  +tablet()
    margin-bottom 50px
  
.triangle-yelow:after
  display block
  position absolute
  bottom -19px
  left 0
  right 0
  margin auto
  content ""
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 190px solid transparent;
  border-left: 190px solid transparent;
  border-top: 20px solid #ffc300;
  border-bottom none

.triangle-red
  background-color: #EB4637;
  position relative
  margin-bottom 20px
  color #fff
  padding 10px 0 5px
  
.triangle-red:after
  display block
  position absolute
  bottom -19px
  left 0
  right 0
  margin auto
  content ""
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 190px solid transparent;
  border-left: 190px solid transparent;
  border-top: 20px solid #EB4637;
  border-bottom none

.triangle-gray
  background-color: #E6E6E6;
  position relative
  margin-bottom 30px
  padding 10px
  +tablet()
    margin-bottom 50px
  
.triangle-gray:after
  display block
  position absolute
  bottom -19px
  left 0
  right 0
  margin auto
  content ""
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 190px solid transparent;
  border-left: 190px solid transparent;
  border-top: 20px solid #E6E6E6;
  border-bottom none

// - * section-cartype * - //
.section-cartype
  // padding 10px 0 0
  &.new-car
    +tablet()
      padding-top 0 !important
  .cartype-img
    max-width 100%
    +tablet()
      min-height 140px
      display flex
    img
      +tablet()
        max-height 140px
  .cartype-li
    +tablet()
      width 100%
      border-right 0!important
      &:not(:last-of-type)
        border-bottom 1px solid #ccc
      
    +mobile()
      padding-top 20px
  .cartype-li-3line
    +tablet()
      width 32%
      
  .cartype-ttl
    min-height 42px
    margin-bottom 0
    justify-content center
    font-size 25px!important
    font-weight bold
    
  .point-tag
    background-color $yellow!important
    color #000
    font-size 13px!important
    min-width 7em!important
    padding 3px 4px
.cartype-btn a
  line-height 1.3
.cartype-btn-red
  max-width 550px
  margin auto
  a
    background $primary url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/126d0643b875490f9e1931c13e074099/arrow-white.svg") no-repeat right 10px center
    color #fff
    border-radius 45px
    font-size 18px
    max-width 550px
    padding 16px 0  
.cartype-btn-large
  a
    border-radius 45px
.cartype-btn-yellow
  a
    background-color $yellow
    color #000
body .section-cartype .cartype-ttl
  // align-items center
  // color #00B2FF
  // font-size 1.125rem
  // line-height 1
  .point-tag
    align-items center 
    display flex 
    height 24px
    justify-content center
    padding 1px 7px 0
    line-height 1
    min-width 6em
  .plan-text
    position relative
    top 4px

.section-carlist-item-model
  .section-carlist-btn li 
    padding-top 15px
    a img
      height 28px
    a span
      line-height 1.3
      display flex
      flex-wrap wrap
      font-size 12px
      font-weight bold
      min-height 31px
      align-items center
      justify-content center
      margin-top 5px

.section-carlist-btn
  max-width 940px
  margin auto
  display flex
  flex-wrap wrap
  justify-content center
  gap 8px
  li 
    border-radius: 10px;
    border: 2px solid #DEDEDE;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding 10px
    width 108px
    a img
      width 100%

  +mobile()
    display grid
    grid-template-columns repeat(auto-fill,minmax(105px, 1fr));
    gap 10px
    justify-items center
    li
      max-width 105px
      padding 8px


      
.cartype-detail-list
  display flex
  margin-bottom 2px
  &:nth-child(3) dt
    min-width 63px
  dd
    text-align left
.cartype-detail-btn
  cursor pointer

.cta-car-img
  +tablet()
    display flex
    min-height 180px
    justify-content space-around
    align-items center
//other-car-select
.other-car-select
  padding 20px 0
  h2
    +mobile()
      font-size 19px
    +tablet()
      font-size 30px

.cartype-btn-large
  a
    max-width 550px
    padding 16px 0
    font-size 20px

.is-border-bottom
  border-bottom 1px solid #B4B4B5

.carmo-image
  +mobile()
    max-width 255px
  +tablet()
    max-width 390px

.caption-img-area
  background-color: #ECEBEB;
  
.caption-img-area-txt
  display inline-block
  background url('https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/f2d8074e9ecd43f283b989a2a1b101df/carmo-face.png') no-repeat left center
  background-size 80px 45px
  padding 20px 0 20px 90px
  margin 0 auto
  text-align left

//価格の高さ
.price-height
  +tablet()
    min-height 90px
    display flex
    justify-content center
    align-items center

//mach
.mach-deli
  border-top 10px solid $yellow

.used-car
  border-top 8px solid #E6E6E6
//usedecar
.used-car-promise
  justify-content space-between
  .column
    border-radius 12px
    flex-grow 0
    flex-basis 49%
  dl
    border 3px solid #EB4637
    border-radius 9px
    margin-bottom 20px!important
  dt
    background #EB4637
    color #fff
    padding 7px
  dd
    padding 10px 20px
    img
      height 180px
//assessment
.assessment-head
  justify-content center
  position:relative;
  max-width:18rem
  background:#FFC300;
  padding:14px 7px;
  margin 20px auto 20px
  +tablet()
    max-width:25rem

.assessment-head:after
  border: solid transparent;
  content:'';
  height:0;
  width:0;
  pointer-events:none;
  position:absolute;
  border-color: rgba(255, 195, 0, 0);
  border-top-width:10px;
  border-bottom-width:10px;
  border-left-width:10px;
  border-right-width:10px;
  margin-left: -10px;
  border-top-color:#FFC300;
  top:100%;
  left:50%;

.area-3crown
  background: linear-gradient(180deg, #FFC300 0%, #FFEEB6 100%);

.media-info
  justify-content space-between
  +tablet()
    max-width 1000px
    margin auto
  .column
    flex-grow 0
    flex-basis 49%

.area-twitter
  position: relative;
  width: 100%;
  overflow-y: scroll;
  justify-content space-between
  .column
    background #fff
    flex-grow 0
    flex-basis 300px
    margin-right 10px
    border-radius 8px
    padding 7px
    
  img
    max-width 300px
    
.apri-list
  justify-content space-between
  .column
    flex-grow 0
    flex-basis 48%
.apri-list-campaign
  border-radius 12px
.apri-list-point
  display inline-block
  background-image: url('https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/725d51dbf3324f02936c1a5f23707e04/apri-list-campaign-left.svg'), url('https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/b02df5c5b59848e3a02941206787ba45/apri-list-campaign-right.svg');
  background-repeat: no-repeat, no-repeat;
  background-position: left center, right center;
  padding 0 14px

.worries
  .columns
    justify-content space-between
  .column
    flex-grow 0
    flex-basis 48%
.worries-arrow
  position:relative;
  padding:10px;
  text-align:center;
  border:1px solid #FFC300;
  border-radius:10px;

.worries-arrow:after,.worries-arrow:before
  border: solid transparent;
  content:'';
  height:0;
  width:0;
  pointer-events:none;
  position:absolute;
  top:100%;
  left:50%;

.worries-arrow:after
  border-color: rgba(255, 255, 255, 0);
  border-top-width:10px;
  border-bottom-width:10px;
  border-left-width:10px;
  border-right-width:10px;
  margin-left: -10px;
  border-top-color:#FFFFFF;

.worries-arrow:before
  border-color: rgba(255, 195, 0, 0);
  border-top-width:11px;
  border-bottom-width:11px;
  border-left-width:11px;
  border-right-width:11px;
  margin-left: -11px;
  margin-top: 1px;
  border-top-color:#FFC300;

.border-note
  background-color: #fff;
  background-image:
  linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #fff 0%, #fff 100%), linear-gradient(180deg, rgba(100, 100, 100, 0) 0%, rgba(100, 100, 100, 0) 97.5%, #646464 100%);
  background-size: 8px 100%,100% 2em;
  line-height: 2em;

// - * section-voice * - //
.section-voice
  background none
  .voice-case-area
    background $yellow
    padding 30px 20px 10px
  .voice-ttl
    font-size 32px
    text-shadow 2px 2px 0 $black
    position relative
    margin-bottom 30px
    z-index 1
    &:before
      position absolute
      content ''
      width 100%
      height 23px
      background $black
      left 0
      bottom -7px
      z-index 0
    &:after
      position absolute
      content ''
      transform translateY(-50%)
      width 0
      height 0
      border-style solid
      border-width 16px 12px 0px 12px
      border-color $black transparent transparent transparent
      left 50%
      transform translateX(-50%)
      bottom -20px
    span
      position relative
      z-index 1
      letter-spacing: 2px;
  .voice-case .case-upper .text.r-0
    +tablet()
      right 0
      left auto
  .voice-case .case-upper .voice-fig img
    margin-left 0

//campaign
.campaign-new
  position:relative;
  background:#FFFFFF;
  padding:4px;
  text-align:center;
  border:1px solid #FF7E01;
  color:#FF7E01;
  margin 10px auto 20px
  font-weight bold
  font-size 14px!important
  max-width 500px

.campaign-new:after,.campaign-new:before
  border: solid transparent;
  content:'';
  height:0;
  width:0;
  pointer-events:none;
  position:absolute;
  top:100%;
  left:50%;

.campaign-new:after
  border-color: rgba(255, 255, 255, 0);
  border-top-width:9px;
  border-bottom-width:9px;
  border-left-width:6px;
  border-right-width:6px;
  margin-left: -6px;
  border-top-color:#FFFFFF;

.campaign-new:before
  border-color: rgba(255, 126, 1, 0);
  border-top-width:10px;
  border-bottom-width:10px;
  border-left-width:7px;
  border-right-width:7px;
  margin-left: -7px;
  margin-top: 1px;
  border-top-color:#FF7E01;

.campaign-used
  position:relative;
  background:#FFFFFF;
  padding:4px;
  text-align:center;
  border:1px solid #FFC300;
  color:#FFC300;
  margin 10px 10px 20px
  font-weight bold
  font-size 14px!important
  border:1px solid #FFC300;
  max-width 500px

.campaign-used:after,.campaign-used:before
  border: solid transparent;
  content:'';
  height:0;
  width:0;
  pointer-events:none;
  position:absolute;
  top:100%;
  left:50%;

.campaign-used:after
  border-color: rgba(255, 255, 255, 0);
  border-top-width:9px;
  border-bottom-width:9px;
  border-left-width:6px;
  border-right-width:6px;
  margin-left: -6px;
  border-top-color:#FFFFFF;

.campaign-used:before
  border-color: rgba(255, 195, 0, 0);
  border-top-width:10px;
  border-bottom-width:10px;
  border-left-width:7px;
  border-right-width:7px;
  margin-left: -7px;
  margin-top: 1px;
  border-top-color:#FFC300;
  
// step
.section-step
  .inner
    margin-top 60px
    +tablet()
      max-width 1200px!important
.step-area
  .columns
    justify-content center

.step-area-container
  border 4px solid $yellow
  padding 20px 10px
  text-align center
  position relative
  margin-bottom 30px

.step-heading
  font-size 20px
  font-weight bold
  background linear-gradient(transparent 70%, #FFC300 70%)
  margin 20px auto
  padding 0 0.5em


//step ribon
.step-number
  position absolute
  top -13px
  left 20px
  display inline-block
  text-align center
  background #FFC300
  padding 0 7px
  font-weight bold

.step-number:before
  position absolute
  content ''
  right -10px
  width 0
  height 0
  border-right 10px solid transparent
  border-bottom 10px solid #B18800

.step-img
  min-height 120px
  display flex
  justify-content center
  align-items center

.recommend-text
  display inline-block
  padding 0 20px
  background url(https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/58f5e8bc60804670adefafadde99cb58/recom-l.svg) no-repeat left center,url(https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/b5e42cfa951845029111f0c5d811800b/recom-r.svg) no-repeat right center
  min-height 1.2rem

.recommend-text-dummy
  +tablet()
    padding-top 1.2rem!important


//flow-bubble-yellow


.flow-bubble-yellow
  position:relative;
  border:4px solid #FFC300;
  margin-bottom:30px;
  z-index:1;

.flow-bubble-yellow:after,.flow-bubble-yellow:before
  border: solid transparent;
  content:'';
  height:0;
  width:0;
  pointer-events:none;
  position:absolute;
  top:100%;
  left:50%;

.flow-bubble-yellow:after
  border-color: rgba(255, 255, 255, 0);
  border-top-width:10px;
  border-bottom-width:10px;
  border-left-width:10px;
  border-right-width:10px;
  margin-left: -10px;
  border-top-color:#FFFFFF;
.flow-bubble-yellow:before
  border-color: rgba(255, 195, 0, 0);
  border-top-width:13px;
  border-bottom-width:13px;
  border-left-width:13px;
  border-right-width:13px;
  margin-left: -13px;
  margin-top: 3px;
  border-top-color:#FFC300;

//gray
.flow-bubble-gray
  position:relative;
  border:4px solid #C4C4C4;
  margin-bottom:30px;
  z-index:1;
.flow-bubble-gray:after,.flow-bubble-gray:before{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    top:100%;
    left:50%;
}
.flow-bubble-gray:after{
    border-color: rgba(255, 255, 255, 0);
    border-top-width:10px;
    border-bottom-width:10px;
    border-left-width:10px;
    border-right-width:10px;
    margin-left: -10px;
    border-top-color:#FFFFFF;
}
.flow-bubble-gray:before{
    border-color: rgba(255, 195, 0, 0);
    border-top-width:13px;
    border-bottom-width:13px;
    border-left-width:13px;
    border-right-width:13px;
    margin-left: -13px;
    margin-top: 3px;
    border-top-color:#C4C4C4;
}

.ballon
  padding: 0.4rem 1.5rem;


footer
  +mobile()
    padding 1rem 1rem 85px 1rem 
//ABtest 20220606
.footer-ctabtn
  width 100%
  position fixed
  bottom 0
  transform translate(0, 100px)
  transition all 1000ms
  z-index 1000
  background #EAEAEA
  +tablet()
    display none
  img
    vertical-align top
.footer-ctabtn-list
  display flex
  justify-content center
  gap 0 10px
  li a
    display block
    padding 4px 0
    border 1px solid #ffffff
    border-radius 10px
    box-shadow 0 4px 4px 0px rgba(0,0,0,0.5)
    img
      vertical-align middle
      margin-right 4px
.footer-ctabtn-list-single
  li a
    display block
    padding 10px 0
    border 1px solid #ffffff
    border-radius 10px
    box-shadow 0 4px 4px 0px rgba(0,0,0,0.5)
    font-size 18px
    background #EB4637 url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/1145a68aeedb4ec5916de4043e1334b9/icon-arrow-orange.svg") right 10px center no-repeat
    img
      vertical-align middle
      margin-right 4px

.footer-ctabtn-list-1
  li
    flex-grow 1
    flex-basis 49%
.footer-ctabtn-txt
  font-size 7px
.fadein
  +mobile()
    transform translate(0)

.arrow-anime
  animation: move-y .5s infinite alternate ease-in-out;

@keyframes move-y {
  from {
    transform: translateY(-5px);
  }
  to {
    transform: translateY(5px);
  }
}

.accordion-body
  background url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/ef8e3e4099214b92bcd0608b6e5c3bdf/icon-a.svg") left top no-repeat
  padding-left 50px
  margin-top 14px
  min-height 3rem
.morelook-button
  background url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/f5b1cc6067504d4cb96569f0ef1c1973/icon-q.svg") left center no-repeat
  padding 10px 50px
  font-weight bold
  position relative
.open-btn
  display block
  width 27px
  height 27px
  position absolute
  top 50%
  right 10px
  transform translateY(-50%)
  background url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/eee33049427f49178ac1e72f2dbfbbd7/icon-open.svg") top center no-repeat

.selected .open-btn
  background url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/08758791f4d74c9390cb9b1875862716/icon-close.svg") top center no-repeat

.faq-box
  border 1px solid #FFC300
  border-radius 7px
  padding 14px
  margin-bottom 10px
  .js-accordion-outerTgt
    +tablet()
      height auto !important

body .section-voice .voice-case-area
  @media screen and (min-width: 1024px)
    .voice-case
      width 80%
      .case-upper
        .voice-fig
          max-width 441px
    padding 40px 20px 10px
.voice-case
  margin-bottom: 44px;
  position relative
  &::before
    content ''
    left -20px
    min-height 49px
    min-width 278px
    position absolute
    top -1rem
    z-index 10
  &.is-first
    &::before
      background url("/lp/assets/img/object/component/main/voice-case-heading-first.svg") no-repeat 0 0 / cover
  &.is-second
    &::before
      background url("/lp/assets/img/object/component/main/voice-case-heading-second.svg") no-repeat 0 0 / cover
      min-width 292px
  &.is-third
    &::before
      background url("/lp/assets/img/object/component/main/voice-case-heading-third.svg") no-repeat 0 0 / cover
      min-width 310px
  .case-upper
    .text
      top calc(50% + 20px)
      .text-main
        font-size 16px
        padding 3px 4px
    

.cartype
  &-suggest
    &-heading
      padding-top 9rem
      position relative
    &-balloon
      background #eb4637
      border-radius 3.125rem
      color #fff
      left 50%
      padding 1rem
      position absolute
      top 0.5rem
      transform translateX(-50%)
      width calc(100% - 3rem)
      z-index 20
      @media screen and (min-width: 1024px)
        width 950px
      &:after
        border-style solid
        border-right 12px solid transparent
        border-left 12px solid transparent
        border-top 26px solid #eb4637
        border-bottom: 0;
        bottom calc(-26px + 10px)
        content ""
        height 0
        left 50%
        position absolute
        transform translateX(-50%)
        width 0
    &-arrow
      background #FFC300
      position relative
      &:after
        border-style: solid;
        border-right: 190px solid transparent;
        border-left: 190px solid transparent;
        border-top: 20px solid #ffc300;
        border-bottom: none;
        bottom: -19px;
        content ""
        display: inline-block;
        height 0
        left 50%
        position absolute
        transform translateX(-50%)
        width 0
      &.has-balloon
        margin-bottom 1rem
        padding-top 2rem
        z-index 10
      &-text
        font-size 1.25rem
        font-weight 800
        line-height 1.3
        padding 0.5rem 0
        text-align center
        &-red
          color #FF3333
  &-carphoto-container
    position relative
  &-name-circle
    align-items center
    background #000
    border 2px solid #fff
    border-radius 50%
    bottom 2rem
    color #fff
    display flex
    font-size 0.875rem
    font-weight 800
    height 100px
    justify-content center
    line-height 1.3
    position absolute
    right -0.5rem
    text-align center
    width 100px
    &.is-second
      height 110px
      letter-spacing -0.05rem
      width 110px
    &-text-min
      font-size 0.6875rem
    &-text-balancer
      margin-right -0.5rem

.voice-case-bottom-balloon
  &-container
    padding 0 1.25rem
  &-item
    background #fff
    border 1px solid #F6C443
    border-radius 0.625rem
    min-height 9rem
    margin 0 0 0.625rem
    padding 0.875rem
    position relative
    width 100%
    +tablet()
      min-height 8rem
    &:last-of-type
      margin 0 0 1.5rem
  &-comment
    font-size 0.9375rem
    font-weight 700 
  &-name
    bottom 1.5rem
    font-size 0.75rem
    font-weight 700
    left 0.875rem
    position absolute
  &-image
    bottom 0.6875rem
    max-width 116px
    position absolute
    right 0.875rem
    &.is-hastler
      right 0.5rem

.link-area
  padding-bottom 0
  ul li
    margin-bottom 0
    .link-area-anchor
      background #FF3333
      color #fff
      position relative
      &:after
        background url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/f0addbd405ed4837b17ffdad4bbafc37/link-marker.svg") no-repeat 0 0 / cover
        content ""
        display inline-block
        height 24px
        position absolute
        right 0.5rem
        top 50%
        transform translateY(-50%)
        width 24px
      &-head
        display block
        font-size 0.75rem
        margin 0 auto
        text-align center
        position relative
        width fit-content
        &:before
          background url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/2cba1840da3f499b8d46e06ce9585c04/link-shape-left.svg") no-repeat 0 0 / cover
          content ""
          display inline-block
          height 12px
          position absolute
          left -1rem
          top 50%
          transform translateY(-50%)
          width 12px
        &:after
          background url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/7c3aed63ddc04bbfbfa1f54ca79e70d7/link-shape-right.svg") no-repeat 0 0 / cover
          content ""
          display inline-block
          height 12px
          position absolute
          right -1rem
          top 50%
          transform translateY(-50%)
          width 12px

.push
  &-container
    margin 2rem auto 0
    padding 0 1.25rem
  &-subheading
    align-items center
    background #6E221B
    border-radius 33px
    color #F9F3AD
    display flex
    font-size 1.375rem
    font-weight 800
    height 66px
    justify-content center
    margin 2rem auto
    position relative
    width 100%
    &:after
      background url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/5deef8c7da0244f0b77c0dac385754eb/push-thunder.svg") no-repeat 0 0 / cover
      bottom -30px
      content ""
      display inline-block
      height 34px
      position absolute
      left 50%
      transform translateX(-50%)
      width 33px
  &-subheading-speech
    font-size 1.25rem
    font-weight 800
    margin 0 auto 1rem
    position relative
    text-align center
    span
      position relative
      &:before
        background url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/a9b71f2f67684dc19b28cf4d036bec5b/push-subheading-speech-left.svg") no-repeat 0 0 / cover
        content ""
        display inline-block
        height 32px 
        left -30px
        position absolute
        width 30px
      &:after
        background url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/3d0fdb3aa4674c4ca833b83fe0e34f3a/push-subheading-speech-right.svg") no-repeat 0 0 / cover
        content ""
        display inline-block
        height 32px 
        position absolute
        width 30px
      &.is-second
        &:before
          left 0.375rem

  &-text
    font-weight 800
    text-align center
    &-marker
      background linear-gradient(transparent 50%, #FFC300 50%)
      padding 0 0.5rem 0.25rem
    &-min
      font-size 0.6875rem
    &-yen
      font-size 0.75rem
    &-asterisk
      bottom -1px
      font-size .75rem
      position relative
    &-asterisk-notice
      display inline-block
      font-size .625rem
  &-notice
    &-list
      list-style-type none
      font-size 0.625rem
      margin 2rem 0
  &-text-bottom
    text-align center
  &-item-bottom
    margin 0 auto 2rem
  &-item-bottom-first
    display flex
    justify-content center
    text-align center 
    width 100%
  &-carname
    font-size 0.6875rem
    font-weight 700
  &-carprice
    color #EB4637
    font-size 1.125rem
    font-weight 800
  &-carmonthly
    border 1px solid #666666
    display inline-block
    font-size 0.625rem
    padding 0.0625rem 0 0.0625rem 0.375rem
    text-align center


.especially
  &-container
    padding 1.25rem
  &-heading
    margin 0 auto 2.375rem
  &-item
    margin 0 auto 1.5rem
    position relative
    &:last-of-type
      margin 0 auto
  &-text
    bottom 1.5625rem
    font-size 1.0625rem
    font-weight 900
    left 50%
    line-height 1.7
    position absolute
    text-align center 
    transform translateX(-50%)
    width calc(100% - 1.25rem)
    &-marker
      background linear-gradient(transparent 50%, #FFC300 50%)
      padding 0 0.5rem 0.25rem

.solution
  &-container
    background #FFF7CE
    padding 1.25rem
  &-heading
    margin 0 auto 2.375rem
  &-image
    display block
    margin 0 auto 0.75rem
  &-item
    margin 0 auto 1.5rem
    position relative
    &:last-of-type
      margin 0 auto
  &-text
    max-width 335px
    margin: auto
    font-size 1rem
    line-height 1.3
    position relative
    padding 0 0 0 3.875rem
    &:before
      background url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/bbedfb7618994203af461d3e8be717f9/solution-arrow.svg") no-repeat 0 0 / cover
      bottom 0.5rem
      content ""
      display inline-block
      height 36px
      left 0
      position absolute
      width 41px
    &-large
      font-size 1.375rem
      font-weight 900
    &-min
      bottom 3px
      font-size .875rem
      position relative
    &-notice
      display block
      font-size .625rem
      padding 0 0 0 3.875rem

.consultation
  &-container
    margin 0 auto 2rem
    width 100%
  &-image
    display block
    width 100%
  &-container-bottom
    padding 0 1.25rem
    width 100%
  &-text
    margin 0 auto 1rem
    &-min
      display block
      font-size 0.8125rem
      text-align center
  &-link
    &-container
      display flex
      gap 0 0.5rem
      justify-content space-between
      margin 0 auto 1.5rem
    &-link
      width 50%

.motto
  &-container-bottom
    background #FFF9E6
    margin 0 auto 1.125rem  
    padding 1.5rem 1.25rem
    width 100%
  &-heading
    &-top,
    &-bottom
      align-items center
      background #FFC300
      display flex
      font-size 1.25rem
      font-weight 800
      justify-content center
      height 64px
    &-middle
      display block
      position relative
      width 100%
    &-catchcopy
      background #fff
      font-size 1.25rem
      font-weight 800
      left 50%
      padding 0.5rem 0.875rem
      position absolute
      text-align center 
      top 50%
      transform translate(-50%, -50%)
      width calc(100% - 2.5rem)
  &-subheading
    border-bottom 2px solid #000
    border-top 2px solid #000
    font-size 1.25rem
    font-weight 800
    line-height 1.3
    margin 2rem auto
    padding 1.5rem 0.5rem
    text-align center
    width fit-content

//section-satis
.section-satis
  padding 20px 0
  margin-top 10px
  background:url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/5daadcfb61374968a2b9fcee2945cb30/satis-bg.png") no-repeat top center / contain
  
.section-satis-content
  position relative
  margin-top 50px
  

.section-satis-content-heading
  position relative
  top -50px
  margin-bottom -50px
  text-align center

.search-heading
  display inline-block
  padding 0 30px
  background url(https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/abb0d1d3c14348c486333a78e5c769c9/sh-l.svg) no-repeat left center,url(https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/865fbb20501a468c8176eaeca65f74fa/sh-r.svg) no-repeat right center
  min-height 3rem
  font-size 1.2rem
  line-height 1.1
.v-baseline
  vertical-align baseline

.search-heading
  display inline-block
  padding 0 30px
  background url(https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/abb0d1d3c14348c486333a78e5c769c9/sh-l.svg) no-repeat left center,url(https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/865fbb20501a468c8176eaeca65f74fa/sh-r.svg) no-repeat right center
  min-height 3rem
  font-size 1.2rem
  line-height 1.1

//company
.company-wrapper
  max-width 1116px
  margin auto
  border-bottom 1px solid #000
.company-sompo,
.company-carmo
  padding 20px
  .company-header
    font-weight 900
  .company-contact
    .small
      font-size 12px
.company-carmo,.company-sompo
  border-top 1px solid #000
.data-number
  font-size 10px
  font-weight bold
  padding 20px
  max-width 1116px
  margin auto

//push-item-cs
.push-item-cs
  position relative
  +tablet()
    max-width 400px
    margin 0 auto
  > p
    padding 20px
    border 2px solid #B6B6B6 
    border-radius 20px
    margin-top 10px
  > div
    position relative
    text-align right
    top -40px
    margin-bottom -40px

.recommend-head
  text-align center
  p
    display inline-block
    padding 0 35px
    background url(https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/59f31c9530d14201ae7f5ef0c641cf42/dec-txt-l.svg) no-repeat left center,url(https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/2603a551bb8a41bfb9b31f22c1922df8/dec-txt-r.svg) no-repeat right center
    min-height 3rem
    font-size 1.4rem
    line-height 1.1
    margin 30px auto 20px
    font-weight bold
.recommend-head-h3
  position relative
  background #FFC300
  padding 10px
  text-align center
  font-size 1.4rem
  border-radius 10px
  font-weight bold
  margin-bottom 30px
  strong
    display block
    font-size 1rem
    font-weight normal

.recommend-head-h3:after
  border solid transparent
  content ''
  height 0
  width 0
  pointer-events none
  position absolute
  border-color rgba(255, 195, 0, 0)
  border-top-width 10px
  border-bottom-width 10px
  border-left-width 10px
  border-right-width 10px
  margin-left -10px
  border-top-color #FFC300
  top 100%
  left 50%

.push-container
  margin-top 80px

//.push-item

.push-item-bottom-first
  width 100%
  margin-top 20px
  justify-content center
  gap 10px
  +mobile()
    justify-content space-between
.push-item-bottom-first-content
  width 33%
  > picture
    display flex
    min-height 80px
.push-carprice
  img
    vertical-align middle
    margin-top -4px
  .lowest-price-view
    font-size 1.1rem

.push-carname
  padding-bottom 3px
  background:linear-gradient(transparent 40%, #EBEBEB 40%);
  position relative
  .maker
    font-weight normal
    font-size 0.6rem
  .carname
    font-weight bold
    font-size 0.8rem
  &::before
    position absolute
    content " "
    bottom -8px
    left 0
    clip-path polygon(0 0, 0% 100%, 100% 0)
    background #EBEBEB
    width 8px
    height 8px


.reassurance
  &-item
    padding 0 1.25rem 1rem
    &.is-third
      padding 0 1.25rem
  &-image
    display block
    width 100%
  &-subheading
    align-items center
    background #FFE4DE
    border-radius 33px
    color #323737
    display flex
    font-size 1.375rem
    font-weight 800
    height 66px
    justify-content center
    line-height 1
    margin 2rem auto 1rem
    position relative
    width 100%
    @media screen and (max-width: 375px)
      font-size 5.333vw // 20px / w375px
    &.is-third
      border-radius calc(5.125rem / 2)
      height 5.125rem // 82px
      line-height 1.3
      padding 0.5rem 0 0
    &-number
      align-items center
      background #FFC300
      border 2px solid #fff
      border-radius 0.75rem
      display flex
      font-size 0.75rem
      height 1.5rem
      justify-content center
      left 50%
      padding 0.5rem 0.5rem
      position absolute
      top -0.75rem
      transform translateX(-50%)
  &-text
    font-weight 800
    margin 0 auto 1rem
    text-align center
    @media screen and (max-width: 359px)
      font-size 4vw // 15px / w375px
    &-marker
      background linear-gradient(transparent 50%, #FFC300 50%)
      padding 0 0.5rem 0.25rem
    &-min
      font-size 0.6875rem
    &-yen
      font-size 0.75rem
    &-asterisk
      bottom -1px
      font-size .75rem
      position relative
    &-asterisk-notice
      display inline-block
      font-size .625rem
  &-subtext
    font-size 0.8125rem // 13px
    font-weight 700
    margin 1.5rem auto 2.5rem
    text-align center

//push-item-cs
.reassurance-item-cs
  &-container
    position relative
    +tablet()
      max-width 400px
      margin 0 auto
  &-frame
    border 2px solid #B6B6B6 
    border-radius 20px
    font-size 0.75rem
    margin-top 10px
    padding 20px
    @media screen and (max-width: 374px)
      font-size 2.933vw // 11px / w375px
  &-heading
    align-items center
    background #fff
    display flex
    font-size 1.0625rem // 17px
    font-weight 700
    justify-content center
    left 50%
    padding 0 1rem
    position absolute
    top -0.75rem
    transform translateX(-50%)
    width 290px
    &::before,
    &::after
      content ''
      display inline-block
      height 32px
      position absolute
      top 50%
      transform translateY(-50%)
      width 30px
    &::before
      background url(https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/1fc851ad117d4cbeacacea7e1139efe0/icon-speach-left.svg) no-repeat 0 0 / contain
      left -1rem
    &::after
      background url(https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/7fcf0845658b40f89a241283ff0843b8/icon-speach-right.svg) no-repeat 0 0 / contain
      right -1rem
  &-list
    font-size 0.8125rem // 13px
    font-weight 700
    margin 0 auto 0.5rem
    padding 0 0 0 1.75rem
    @media screen and (max-width: 374px)
      font-size 3.467vw // 13px / w375px
    &-item
      position relative
      &::before
        background url(https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/908c65f63f1348798e128f4240f6065a/icon-cs-checkmark.svg) no-repeat 0 0 / contain
        content ''
        display inline-block
        height 17px
        left -1.75rem
        position absolute
        top 50%
        transform translateY(-55%)
        width 22px
  &-thumbnail   
    margin-bottom -40px
    position relative
    text-align right
    top -40px

    /* minireset.css v0.0.3 | MIT License | github.com/jgthms/minireset.css */
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}
ul {
  list-style: none;
}
button,
input,
select,
textarea {
  margin: 0;
}
html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
img,
audio,
video {
  height: auto;
  max-width: 100%;
}
iframe {
  border: 0;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
  text-align: left;
}
html {
  background-color: $body-background-color;
  font-size: 16px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  min-width: 300px;
  overflow-x: hidden;
  overflow-y: scroll;
  text-rendering: $body-rendering;
  text-size-adjust: 100%;
}
body {
  font-size: 16px;
  font-family: Hiragino Sans, 'ヒラギノ角ゴシック', Hiragino Kaku Gothic ProN, 'ヒラギノ角ゴ ProN W3', sans-serif;
}
article,
aside,
figure,
footer,
header,
hgroup,
section {
  display: block;
}
body,
button,
input,
select,
textarea {
  font-family: $body-family;
}
code,
pre {
  -moz-osx-font-smoothing: auto;
  -webkit-font-smoothing: auto;
  font-family: $code-family;
}
body {
  color: $body-color;
  font-size: 1rem;
  font-weight: $body-weight;
  line-height: $body-line-height;
}
a {
  color: #198fff;
  cursor: pointer;
  text-decoration: none;
}
a strong {
  color: currentColor;
}
a:hover {
  color: $link-hover;
}
code {
  background-color: $code-background;
  color: $code;
  font-size: $code-size;
  font-weight: $code-weight;
  padding: $code-padding;
}
hr {
  background-color: $hr-background-color;
  border: none;
  display: block;
  height: $hr-height;
  margin: $hr-margin;
}
img {
  height: auto;
  max-width: 100%;
  vertical-align: bottom;
}
input[type="checkbox"],
input[type="radio"] {
  vertical-align: baseline;
}
small {
  font-size: 0.875em;
}
span {
  font-style: inherit;
  font-weight: inherit;
}
strong {
  color: $text-strong;
  font-weight: 700;
}
pre {
  background-color: $pre-background;
  color: $pre;
  font-size: 0.875em;
  overflow-x: auto;
  padding: 1.25rem 1.5rem;
  white-space: pre;
  word-wrap: normal;
}
pre code {
  background-color: transparent;
  color: currentColor;
  font-size: 1em;
  padding: 0;
}
table td,
table th {
  text-align: left;
  vertical-align: top;
}
table th {
  color: $text-strong;
}
pre {
  margin: 0;
  padding: 0;
}
ol {
  list-style: none;
}
button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}
.is-block {
  display: block !important;
}
@media screen and (max-width: 599px) {
  .is-block-mobile {
    display: block !important;
  }
}
@media screen and (min-width: 600px) {
  .is-block-tablet {
    display: block !important;
  }
}
@media screen and (min-width: 1025px) {
  .is-block-desktop {
    display: block !important;
  }
}
.is-flex {
  display: flex !important;
}
@media screen and (max-width: 599px) {
  .is-flex-mobile {
    display: flex !important;
  }
}
@media screen and (min-width: 600px) {
  .is-flex-tablet {
    display: flex !important;
  }
}
@media screen and (min-width: 1025px) {
  .is-flex-desktop {
    display: flex !important;
  }
}
.is-inline {
  display: inline !important;
}
@media screen and (max-width: 599px) {
  .is-inline-mobile {
    display: inline !important;
  }
}
@media screen and (min-width: 600px) {
  .is-inline-tablet {
    display: inline !important;
  }
}
@media screen and (min-width: 1025px) {
  .is-inline-desktop {
    display: inline !important;
  }
}
.is-inline-block {
  display: inline-block !important;
}
@media screen and (max-width: 599px) {
  .is-inline-block-mobile {
    display: inline-block !important;
  }
}
@media screen and (min-width: 600px) {
  .is-inline-block-tablet {
    display: inline-block !important;
  }
}
@media screen and (min-width: 1025px) {
  .is-inline-block-desktop {
    display: inline-block !important;
  }
}
.is-inline-flex {
  display: inline-flex !important;
}
@media screen and (max-width: 599px) {
  .is-inline-flex-mobile {
    display: inline-flex !important;
  }
}
@media screen and (min-width: 600px) {
  .is-inline-flex-tablet {
    display: inline-flex !important;
  }
}
@media screen and (min-width: 1025px) {
  .is-inline-flex-desktop {
    display: inline-flex !important;
  }
}
@media screen and (min-width: 600px) {
  .is-hidden-tablet {
    display: none !important;
  }
}
@media screen and (min-width: 600px) {
  .is-hidden-mobile {
    display: block !important;
  }
}
@media screen and (max-width: 599px) {
  .is-hidden-mobile {
    display: none !important;
  }
}
.has-text-centered {
  text-align: center;
}
.has-text-justified {
  text-align: justify;
}
.has-text-left {
  text-align: left;
}
.has-text-right {
  text-align: right;
}
@media screen and (max-width: 599px) {
  .has-text-centered-mobile {
    text-align: center;
  }
}
@media screen and (min-width: 600px) {
  .has-text-centered-tablet {
    text-align: center;
  }
}
@media screen and (min-width: 1025px) {
  .has-text-centered-desktop {
    text-align: center;
  }
}
@media screen and (max-width: 599px) {
  .has-text-justified-mobile {
    text-align: justify;
  }
}
@media screen and (min-width: 600px) {
  .has-text-justified-tablet {
    text-align: justify;
  }
}
@media screen and (min-width: 1025px) {
  .has-text-justified-desktop {
    text-align: justify;
  }
}
@media screen and (max-width: 599px) {
  .has-text-left-mobile {
    text-align: left;
  }
}
@media screen and (min-width: 600px) {
  .has-text-left-tablet {
    text-align: left;
  }
}
@media screen and (min-width: 1025px) {
  .has-text-left-desktop {
    text-align: left;
  }
}
@media screen and (max-width: 599px) {
  .has-text-right-mobile {
    text-align: right;
  }
}
@media screen and (min-width: 600px) {
  .has-text-right-tablet {
    text-align: right;
  }
}
@media screen and (min-width: 1025px) {
  .has-text-right-desktop {
    text-align: right;
  }
}
.is-block {
  display: block;
}
@media screen and (max-width: 599px) {
  .is-block-mobile {
    display: block;
  }
}
@media screen and (min-width: 600px) {
  .is-block-tablet {
    display: block;
  }
}
@media screen and (min-width: 1025px) {
  .is-block-desktop {
    display: block;
  }
}
.is-flex {
  display: flex;
}
@media screen and (max-width: 599px) {
  .is-flex-mobile {
    display: flex;
  }
}
@media screen and (min-width: 600px) {
  .is-flex-tablet {
    display: flex;
  }
}
@media screen and (min-width: 1025px) {
  .is-flex-desktop {
    display: flex;
  }
}
.is-inline {
  display: inline;
}
@media screen and (max-width: 599px) {
  .is-inline-mobile {
    display: inline;
  }
}
@media screen and (min-width: 600px) {
  .is-inline-tablet {
    display: inline;
  }
}
@media screen and (min-width: 1025px) {
  .is-inline-desktop {
    display: inline;
  }
}
.is-inline-block {
  display: inline-block;
}
@media screen and (max-width: 599px) {
  .is-inline-block-mobile {
    display: inline-block;
  }
}
@media screen and (min-width: 600px) {
  .is-inline-block-tablet {
    display: inline-block;
  }
}
@media screen and (min-width: 1025px) {
  .is-inline-block-desktop {
    display: inline-block;
  }
}
.is-inline-flex {
  display: inline-flex;
}
@media screen and (max-width: 599px) {
  .is-inline-flex-mobile {
    display: inline-flex;
  }
}
@media screen and (min-width: 600px) {
  .is-inline-flex-tablet {
    display: inline-flex;
  }
}
@media screen and (min-width: 1025px) {
  .is-inline-flex-desktop {
    display: inline-flex;
  }
}
.is-hidden {
  display: none;
}
@media screen and (max-width: 599px) {
  .is-hidden-mobile {
    display: none;
  }
}
@media screen and (min-width: 600px) {
  .is-hidden-tablet {
    display: none;
  }
}
@media screen and (min-width: 1025px) {
  .is-hidden-desktop {
    display: none;
  }
}
.is-invisible {
  visibility: hidden;
}
@media screen and (max-width: 599px) {
  .is-invisible-mobile {
    visibility: hidden;
  }
}
@media screen and (min-width: 600px) {
  .is-invisible-tablet {
    visibility: hidden;
  }
}
@media screen and (min-width: 1025px) {
  .is-invisible-desktop {
    visibility: hidden;
  }
}
.is-pulled-left {
  float: left;
}
.is-pulled-right {
  float: right;
}
.is-clipped {
  overflow: hidden;
}
.is-size-1 {
  font-size: $sizes;
}
@media screen and (max-width: 599px) {
  .is-size-1-mobile {
    font-size: $sizes;
  }
}
@media screen and (min-width: 600px) {
  .is-size-1-tablet {
    font-size: $sizes;
  }
}
@media screen and (min-width: 1025px) {
  .is-size-1-desktop {
    font-size: $sizes;
  }
}
.is-capitalized {
  text-transform: capitalize;
}
.is-lowercase {
  text-transform: lowercase;
}
.is-uppercase {
  text-transform: uppercase;
}
.is-italic {
  font-style: italic;
}
.has-text-weight-light {
  font-weight: 300;
}
.has-text-weight-normal {
  font-weight: 400;
}
.has-text-weight-semibold {
  font-weight: 600;
}
.has-text-weight-bold {
  font-weight: 700;
}
.has-text-weight-black {
  font-weight: 900;
}
.w-100 {
  width: 100%;
}
@media screen and (min-width: 600px) {
  .columns {
    display: flex;
    flex-shrink: 1;
  }
}
@media screen and (max-width: 599px) {
  .columns.is-mobile {
    display: flex;
    flex-shrink: 1;
  }
}
.column {
  display: block;
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
}
.is-size-1 {
  font-size: 36px !important;
}
.is-size-2 {
  font-size: 28px !important;
}
.is-size-3 {
  font-size: 20px !important;
}
.is-size-4 {
  font-size: 16px !important;
}
.is-size-5 {
  font-size: 14px !important;
}
.is-size-6 {
  font-size: 12px !important;
}
.is-size-7 {
  font-size: 10px !important;
}
@media screen and (max-width: 599px) {
  .is-size-1-mobile {
    font-size: 36px !important;
  }
}
@media screen and (max-width: 599px) {
  .is-size-2-mobile {
    font-size: 28px !important;
  }
}
@media screen and (max-width: 599px) {
  .is-size-3-mobile {
    font-size: 20px !important;
  }
}
@media screen and (max-width: 599px) {
  .is-size-4-mobile {
    font-size: 16px !important;
  }
}
@media screen and (max-width: 599px) {
  .is-size-5-mobile {
    font-size: 14px !important;
  }
}
@media screen and (max-width: 599px) {
  .is-size-6-mobile {
    font-size: 12px !important;
  }
}
@media screen and (max-width: 599px) {
  .is-size-7-mobile {
    font-size: 10px !important;
  }
}
.has-text-primary {
  color: #eb4637 !important;
}
.has-text-white {
  color: #fff;
}
.has-text-black {
  color: #000;
}
.has-text-red {
  color: #eb4637;
}
.has-text-orange {
  color: #f47f2a;
}
.has-text-kiiro {
  color: #ffc300;
}
.has-text-navy {
  color: #006186;
}
a {
  color: #000;
}
a:hover,
a:visited {
  color: #000;
}
a.has-text-white:hover,
a.has-text-white:visited {
  color: #fff;
}
.is-padding-auto {
  padding: auto !important;
}
.is-padding-wide-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.is-padding-updown-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.is-padding-0 {
  padding: 0 !important;
}
.is-padding-1 {
  padding: 4px !important;
}
.is-padding-2 {
  padding: 8px !important;
}
.is-padding-3 {
  padding: 12px !important;
}
.is-padding-4 {
  padding: 16px !important;
}
.is-padding-5 {
  padding: 20px !important;
}
.is-padding-6 {
  padding: 24px !important;
}
.is-padding-7 {
  padding: 28px !important;
}
.is-padding-bottom-0 {
  padding-bottom: 0 !important;
}
.is-padding-bottom-1 {
  padding-bottom: 4px !important;
}
.is-padding-bottom-2 {
  padding-bottom: 8px !important;
}
.is-padding-bottom-3 {
  padding-bottom: 12px !important;
}
.is-padding-bottom-4 {
  padding-bottom: 16px !important;
}
.is-padding-bottom-5 {
  padding-bottom: 20px !important;
}
.is-padding-bottom-6 {
  padding-bottom: 24px !important;
}
.is-padding-bottom-7 {
  padding-bottom: 28px !important;
}
.is-padding-top-0 {
  padding-top: 0 !important;
}
.is-padding-top-1 {
  padding-top: 4px !important;
}
.is-padding-top-2 {
  padding-top: 8px !important;
}
.is-padding-top-3 {
  padding-top: 12px !important;
}
.is-padding-top-4 {
  padding-top: 16px !important;
}
.is-padding-top-5 {
  padding-top: 20px !important;
}
.is-padding-top-6 {
  padding-top: 24px !important;
}
.is-padding-top-7 {
  padding-top: 28px !important;
}
.is-padding-left-2 {
  padding-left: 8px !important;
}
.is-padding-left-3 {
  padding-left: 12px !important;
}
.is-padding-left-4 {
  padding-left: 16px !important;
}
.is-padding-left-5 {
  padding-left: 20px !important;
}
.is-padding-left-6 {
  padding-left: 24px !important;
}
.is-padding-left-7 {
  padding-left: 28px !important;
}
.is-padding-right-2 {
  padding-right: 8px !important;
}
.is-padding-right-3 {
  padding-right: 12px !important;
}
.is-padding-right-4 {
  padding-right: 16px !important;
}
.is-padding-right-5 {
  padding-right: 20px !important;
}
.is-padding-right-7 {
  padding-right: 28px !important;
}
.is-margin-auto {
  margin: auto !important;
}
.is-margin-wide-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.is-margin-updown-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.is-margin-0 {
  margin: 0 !important;
}
.is-margin-1 {
  margin: 4px !important;
}
.is-margin-2 {
  margin: 8px !important;
}
.is-margin-3 {
  margin: 12px !important;
}
.is-margin-4 {
  margin: 16px !important;
}
.is-margin-5 {
  margin: 20px !important;
}
.is-margin-6 {
  margin: 24px !important;
}
.is-margin-7 {
  margin: 28px !important;
}
.is-margin-bottom-0 {
  margin-bottom: 0 !important;
}
.is-margin-bottom-1 {
  margin-bottom: 4px !important;
}
.is-margin-bottom-3 {
  margin-bottom: 12px !important;
}
.is-margin-bottom-4 {
  margin-bottom: 16px !important;
}
.is-margin-bottom-5 {
  margin-bottom: 20px !important;
}
.is-margin-bottom-6 {
  margin-bottom: 24px !important;
}
.is-margin-bottom-7 {
  margin-bottom: 28px !important;
}
.is-margin-top-0 {
  margin-top: 0 !important;
}
.is-margin-top-1 {
  margin-top: 4px !important;
}
.is-margin-top-3 {
  margin-top: 12px !important;
}
.is-margin-top-4 {
  margin-top: 16px !important;
}
.is-margin-top-5 {
  margin-top: 20px !important;
}
.is-margin-top-6 {
  margin-top: 24px !important;
}
.is-margin-top-7 {
  margin-top: 28px !important;
}
.is-margin-left-1 {
  margin-left: 4px !important;
}
.is-margin-left-2 {
  margin-left: 8px !important;
}
.is-margin-left-3 {
  margin-left: 12px !important;
}
.is-margin-left-4 {
  margin-left: 16px !important;
}
.is-margin-left-5 {
  margin-left: 20px !important;
}
.is-margin-left-7 {
  margin-left: 28px !important;
}
.is-margin-right-1 {
  margin-right: 4px !important;
}
.is-margin-right-2 {
  margin-right: 8px !important;
}
.is-margin-right-3 {
  margin-right: 12px !important;
}
.is-margin-right-4 {
  margin-right: 16px !important;
}
.is-margin-right-5 {
  margin-right: 20px !important;
}
.is-margin-right-6 {
  margin-right: 24px !important;
}
.is-margin-right-7 {
  margin-right: 28px !important;
}
.is-line-height-0 {
  line-height: 1;
}
.is-line-height-small {
  line-height: 1.2;
}
.is-line-height-normal {
  line-height: 1.5;
}
.is-line-height-large {
  line-height: 2;
}
.is-relative {
  position: relative;
}
.is-valign-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.is-vertical-align-bottom {
  vertical-align: bottom;
}
.is-flex {
  display: flex;
}
.has_verticel_centered {
  align-items: center;
}
.has_verticel_flow {
  flex-flow: column;
}
.has_column_reverse_tablet {
  flex-direction: column-reverse;
}
@media screen and (max-width: 599px) {
  .has_column_reverse_tablet {
    flex-direction: unset;
  }
}
.has-background-white {
  background-color: #fff;
}
.has-background-kiiro {
  background-color: #ffc300;
}
.has-background-black {
  background-color: #000;
}
.has-background-grey-lighter {
  background-color: #dce0e0;
}
.has-background-primary {
  background-color: #eb4637;
}
.has-background-red {
  background: #eb4637;
}
.has-background-pale-yellow {
  background: #fdfaf1;
}
.has-background-yellow-dark {
  background: #ffbe2c;
}
.has-background-navy {
  background: #006186;
}
.has-background-palenavy {
  background: #e3eff2;
}
.has-background-pale-grey {
  background: #f3f1e8;
}
.has-bakground-cream {
  background-color: #fff6df;
}
.has-bakground-blue {
  background-color: #003586;
}
.has-bakground-lite-blue {
  background-color: #0088ab;
}
.input {
  background-color: #fff;
  color: #363636;
  box-shadow: inset 0 0.0625rem 0.125rem rgba(10,10,10,0.1);
  max-width: 100%;
  width: 100%;
  padding: calc(0.375em - 1px) 0.75em;
  align-items: center;
  border: 1px solid #dce0e0;
  border-radius: 0.25rem;
  display: inline-flex;
  line-height: 1.5;
  position: relative;
  vertical-align: top;
}
.input.is-small {
  font-size: 10px;
}
.input.is-medium {
  font-size: 14px;
}
.input.is-large {
  font-size: 16px;
}
.input.is-fullwidth {
  display: block;
  width: 100%;
}
.input.is-inline {
  display: inline;
  width: auto;
}
.button.is-warning {
  background-color: #ffc300;
  border-color: transparent;
  color: rgba(0,0,0,0.7);
  box-shadow: 0 3px 0 0 rgba(0,0,0,0.16);
  border-radius: 5px;
  padding: calc(0.375em - 1px) 0.75em;
}
.header-logo {
  font-size: 0;
  max-width: 8rem;
}
.width-660 {
  max-width: 660px !important;
  margin-right: auto !important;
  margin-left: auto !important;
}
.width-980 {
  max-width: 980px !important;
  margin-right: auto !important;
  margin-left: auto !important;
}
.img-centerd {
  margin-right: auto;
  margin-left: auto;
}
.is-vcentered {
  align-items: center;
}
.is-hcentered {
  justify-content: center;
}
.is-padding-bottom-7 {
  padding-bottom: 1.5rem;
}
.is-image-center {
  margin: auto;
}
strong {
  color: inherit;
  font-weight: inherit;
}
.has-border-navy {
  border: 1px solid #006186;
}
footer {
  padding: 1rem 1rem 2rem 1rem;
}
.footer-list {
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 30px;
}
@media screen and (min-width: 600px) {
  .footer-list {
    max-width: 1200px;
    margin: 0 auto 30px;
  }
}
.footer-list .footer-item {
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  width: calc(50% - 7.5px);
  margin-bottom: 10px;
  font-size: 10px;
}
@media screen and (min-width: 600px) {
  .footer-list .footer-item {
    width: 13.5%;
    font-size: 14px;
  }
}
.footer-list .footer-item > a {
  color: #ccc;
  line-height: 1.2;
  width: 100%;
  height: 100%;
}
.footer-list .footer-item.footer-tel {
  width: 100%;
  height: auto;
}
@media screen and (min-width: 600px) {
  .footer-list .footer-item.footer-tel {
    width: 29.5%;
  }
}
.footer-list .footer-item.footer-tel .tel-num {
  white-space: nowrap;
}
.footer-list .footer-item.footer-tel .tel-num img {
  vertical-align: middle;
}
.footer-list .footer-item.footer-tel .tel-detail {
  font-size: 11px;
  color: #262626;
}
.footer-logo {
  margin: 0 auto;
  width: 70%;
}
.footer-logo img {
  width: 170px;
}
.fotter-logo-area {
  max-width: 300px;
  margin: auto;
  align-items: center;
}
copy {
  color: #262626;
}
.faq-special-area {
  background-color: #fff7ce;
  padding: 20px;
}
.faq-special-area h3 {
  font-weight: bold;
  font-size: 1.2rem;
  text-align: center;
  margin-bottom: 10px;
}
.faq-special-area .faq-box {
  background-color: #fff;
}
.faq-other-heading {
  padding: 7px 0;
  font-weight: bold;
  font-size: 1.2rem;
  text-align: center;
  margin: 30px 0 10px;
  background-color: #dfdfdf;
}
.ballon {
  display: inline-block;
  position: relative;
  padding: 0.4rem 3rem;
  text-align: center;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
}
.ballon:after {
  border: solid transparent;
  content: '';
  height: 0;
  width: 0;
  pointer-events: none;
  position: absolute;
  border-color: rgba(235,70,55,0);
  border-top-width: 10px;
  border-bottom-width: 10px;
  border-left-width: 10px;
  border-right-width: 10px;
  margin-left: -10px;
  top: 100%;
  left: 50%;
}
.ballon-red {
  background: #eb4637;
}
.ballon-red:after {
  border-color: rgba(235,70,55,0);
  border-top-color: #eb4637;
}
.ballon-black {
  background: #373232;
}
.ballon-black:after {
  border-color: rgba(3,115,35,0);
  border-top-color: #373232;
}
@media screen and (min-width: 600px) {
  .is-padding-side-tablet {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
@media screen and (min-width: 600px) {
  .is-box-height-tablet {
    min-height: 11rem;
  }
}
@media screen and (min-width: 600px) {
  .is-box-height-tablet-icon {
    min-height: 90px;
  }
}
.is-nowrap {
  white-space: nowrap;
}
.is-image-vertical-center img {
  vertical-align: bottom;
}
.is-size-20px {
  font-size: 20px;
}
.other-car-area {
  background-color: #ecebeb;
}
.has-text-underline-yellow {
  border-bottom: 5px solid #ffef7a;
}
.is-arrowTrans:before {
  will-change: transform;
}
.is-arrowTrans.is-scrollIn:before {
  animation: arrow-right 1.2s infinite;
}
@-webkit-keyframes  {
  12.5% {
    transform: translate(-0.05em, -50%);
  }
  25% {
    transform: translate(0.2em, -50%);
  }
}
@-moz-keyframes arrow-right {
  12.5% {
    transform: translate(-0.05em, -50%);
  }
  25% {
    transform: translate(0.2em, -50%);
  }
}
@-webkit-keyframes arrow-right {
  12.5% {
    transform: translate(-0.05em, -50%);
  }
  25% {
    transform: translate(0.2em, -50%);
  }
}
@-o-keyframes arrow-right {
  12.5% {
    transform: translate(-0.05em, -50%);
  }
  25% {
    transform: translate(0.2em, -50%);
  }
}
@keyframes arrow-right {
  12.5% {
    transform: translate(-0.05em, -50%);
  }
  25% {
    transform: translate(0.2em, -50%);
  }
}
.is-fadeIn {
  opacity: 0;
  transform: translateY(2rem);
  transition-duration: 0.5s;
  will-change: opacity transform;
}
.is-fadeIn.is-scrollIn {
  opacity: 1;
  transform: translateY(0);
}
.is-fadeIn02 {
  opacity: 0;
  transform: translateY(2rem);
  transition-duration: 0.5s;
  will-change: opacity transform;
}
.is-fadeIn02.is-scrollIn {
  opacity: 1;
  transform: translateY(0);
}
.section-how-to-use {
  position: relative;
  background-color: #ffc300;
  padding: 0px 0 75px;
}
@media screen and (max-width: 599px) {
  .section-how-to-use {
    margin-bottom: 60px;
  }
}
@media screen and (max-width: 599px) {
  .section-how-to-use .how-to-use-img {
    padding: 10px 0 30px;
  }
}
@media screen and (min-width: 600px) {
  .section-how-to-use .how-to-use-img {
    padding: 20px 0 30px;
  }
}
.section-how-to-use-baloon {
  position: absolute;
}
@media screen and (min-width: 600px) {
  .section-how-to-use-baloon {
    left: 50%;
    transform: translateX(-50%);
  }
}
@media screen and (max-width: 599px) {
  .section-how-to-use-baloon {
    width: 95%;
  }
}
@media screen and (min-width: 600px) {
  .section-cartype {
    background: #fff;
    padding: 85px 0 0;
  }
}
.section-cartype .inner {
  width: 100%;
  padding: 0 10px;
}
@media screen and (min-width: 1025px) {
  .section-cartype .inner {
    padding: 0 15px;
  }
}
@media screen and (min-width: 600px) {
  .section-cartype .cartype-list {
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 20px;
    justify-content: center;
  }
}
.section-cartype .cartype-li {
  padding: 11px 0 14px;
}
@media screen and (min-width: 600px) {
  .section-cartype .cartype-li {
    width: 33%;
    padding: 0;
  }
  .section-cartype .cartype-li:not(:last-of-type) {
    border-right: 1px solid #ccc;
  }
}
@media screen and (max-width: 599px) {
  .section-cartype .cartype-li {
    padding: 11px 10px 14px;
  }
  .section-cartype .cartype-li:not(:last-of-type) {
    border-bottom: 1px solid #ccc;
  }
}
.section-cartype .cartype-ttl {
  color: #198fff;
  font-size: 1rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 13px;
  text-align: left;
}
.section-cartype .cartype-ttl .point-tag {
  border-radius: 14px;
  background-color: #373232;
  font-size: 0.7rem;
  padding: 2px 14px;
  margin-right: 8px;
  text-align: center;
}
.section-cartype .cartype-img img {
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}
@media screen and (max-width: 599px) {
  .section-cartype .cartype-img {
    max-width: 100px;
    padding: 0 0 10px;
    margin-right: 10px;
  }
}
@media screen and (min-width: 600px) {
  .section-cartype .cartype-img {
    text-align: center;
    max-width: 140px;
    min-height: 100px;
    margin: auto;
  }
}
@media screen and (min-width: 1025px) {
  .section-cartype .cartype-img {
    max-width: 140px;
    min-height: 100px;
    margin-right: 10px;
  }
}
.section-cartype .cartype-price {
  font-size: 24px;
  white-space: nowrap;
}
.section-cartype .cartype-price span {
  color: #606060;
}
.section-cartype .cartype-price .is-size-4 {
  font-size: 16px !important;
}
@media screen and (min-width: 600px) {
  .section-cartype .is-valign-center {
    padding: 15px 0;
    display: block;
  }
}
@media screen and (min-width: 1025px) {
  .section-cartype .is-valign-center {
    padding: 15px 0;
    display: flex;
  }
}
.cartype-btn a {
  display: block;
  width: 100%;
  padding: 10px 0;
  border-radius: 0.75rem;
  margin-top: 3px;
  line-height: 1;
  position: relative;
  background: #ffbe2c url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/00b13464bc8943e488c0a17e1c45d19d/arrow.svg") no-repeat right 14px center;
  box-shadow: 0px 4px 4px rgba(0,0,0,0.25);
  margin: auto;
}
.caption-img-area {
  background-color: #ecebeb;
}
.caption-img-area-txt {
  display: inline-block;
  background: url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/f2d8074e9ecd43f283b989a2a1b101df/carmo-face.png") no-repeat left center;
  background-size: 80px 45px;
  padding: 20px 0 20px 90px;
  margin: 0 auto;
  text-align: left;
}
.section-cartype2 {
  background-color: #ffc300;
  padding: 20px 20px;
}
.section-cartype2 .inner {
  padding: 0;
}
@media screen and (min-width: 600px) {
  .section-cartype2 .cartype-list {
    max-width: 760px;
    margin: 0 auto 0.5rem;
    justify-content: space-between;
  }
}
.section-cartype2 .section-cartype2-copy1 {
  color: #373232;
}
@media screen and (min-width: 600px) {
  .section-cartype2 .section-cartype2-copy1 {
    font-size: 2.5rem;
  }
}
@media screen and (max-width: 599px) {
  .section-cartype2 .section-cartype2-copy1 {
    font-size: 2rem;
    line-height: 1.35;
    margin-bottom: 25px;
  }
}
.section-cartype2 .section-cartype2-copy2 {
  color: #373232;
  font-size: 1.25rem;
}
@media screen and (min-width: 600px) {
  .section-cartype2 .section-cartype2-copy2 {
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 599px) {
  .section-cartype2 .section-cartype2-copy2 {
    margin-bottom: 15px;
  }
}
.section-cartype2 .cartype-li {
  background-color: #fff;
}
.section-cartype2 .cartype-li-quick {
  position: relative;
}
.section-cartype2 .cartype-li-quick .cartype-caption {
  margin: 0 -10px 0 3px;
}
.section-cartype2 .cartype-li-quick:after {
  content: '';
  position: absolute;
  top: 27px;
  transform: translateY(-50%);
  right: 10px;
  background: url("/lp/assets/img/object/component/common/icon-limited-number.svg") no-repeat 0 0;
  width: 43px;
  height: 43px;
}
@media screen and (min-width: 600px) {
  .section-cartype2 .cartype-li {
    width: 49%;
    padding: 20px 10px 15px;
    margin-bottom: 0 !important;
    border-right: none;
  }
}
@media screen and (max-width: 599px) {
  .section-cartype2 .cartype-li {
    padding: 15px;
    margin-bottom: 10px;
  }
  .section-cartype2 .cartype-li:not(:last-of-type) {
    border-bottom: none;
  }
}
.section-cartype2 .cartype-ttl {
  color: #198fff;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 13px;
}
.section-cartype2 .cartype-ttl-quick {
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: normal;
  color: #373232;
}
.section-cartype2 .price-box {
  flex-wrap: wrap;
  flex-flow: column wrap;
  justify-content: start;
  align-items: flex-start;
}
.section-cartype2 .price-box .cartype-name {
  font-size: 18px;
  font-weight: bold;
  letter-spacing: normal;
  color: #000;
}
.section-cartype2 .price-box .grade-color-area {
  padding-left: 5px;
}
.section-cartype2 .price-box .grade-color-area .grade-color-img {
  backface-visibility: hidden;
}
@media screen and (min-width: 600px) {
  .section-cartype2 .cartype-caption {
    max-width: 760px;
    margin: auto;
  }
}
.delivery-heading {
  display: inline-block;
  padding-bottom: 0.1em;
  background: linear-gradient(to top, #fff 0%, #fff 40%, rgba(255,255,255,0) 41%, rgba(255,255,255,0) 100%);
}
.media-title {
  max-width: 335px;
  margin-right: auto;
  margin-left: auto;
  background: #000;
  border-radius: 24px;
  padding: 4px;
  font-size: 18px;
  color: #fff;
  font-weight: bold;
}
@media screen and (min-width: 600px) {
  .tv-cm {
    width: 335px;
    margin-bottom: 65px;
  }
}
@media screen and (max-width: 599px) {
  .tv-cm {
    margin-bottom: 35px;
  }
}
@media screen and (min-width: 600px) {
  .reason-img-area2 {
    display: flex;
    flex-flow: row-reverse nowrap;
    width: 700px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 55px;
  }
  .reason-img-area2 .reason-compare-img,
  .reason-img-area2 .reason-carmokun-copy {
    width: 334px;
  }
}
@media screen and (max-width: 599px) {
  .reason-img-area2 .reason-compare-img,
  .reason-img-area2 .reason-carmokun-copy {
    margin-bottom: 35px;
  }
}
.section-company-info {
  border-bottom: 1px solid #ccc;
}
.company-info-title {
  background: #ffc300;
}
.section-voice {
  background: #eb4637;
  padding-top: 22px;
  padding-bottom: 1px;
}
@media screen and (min-width: 600px) {
  .section-voice .inner {
    max-width: 1200px;
  }
}
@media screen and (min-width: 600px) {
  .section-voice .service-img {
    margin-bottom: 50px;
  }
}
@media screen and (max-width: 599px) {
  .section-voice .service-img {
    margin-bottom: 30px;
  }
}
@media screen and (min-width: 600px) {
  .section-voice .recommend-copy {
    font-size: 30px;
    margin-bottom: 30px;
  }
}
@media screen and (max-width: 599px) {
  .section-voice .recommend-copy {
    font-size: 18px;
    margin-bottom: 25px;
  }
}
@media screen and (min-width: 600px) {
  .section-voice .voice-case-area {
    justify-content: space-between;
  }
}
.section-voice .voice-case {
  margin-bottom: 30px;
}
@media screen and (min-width: 600px) {
  .section-voice .voice-case {
    width: 80%;
    margin: 0 auto 30px;
  }
}
@media screen and (min-width: 1025px) {
  .section-voice .voice-case {
    width: 30%;
  }
}
.section-voice .voice-case .case-upper {
  position: relative;
  margin-bottom: 20px;
}
.section-voice .voice-case .case-upper .text {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.section-voice .voice-case .case-upper .text.r-0 {
  right: 0;
  left: auto;
}
@media screen and (min-width: 600px) {
  .section-voice .voice-case .case-upper .text.r-0 {
    left: 0;
    right: auto;
  }
}
.section-voice .voice-case .case-upper .text-main {
  display: table;
  margin-bottom: 6px;
  line-height: 1;
  padding: 8px 10px;
  font-size: 18px;
  white-space: nowrap;
}
.section-voice .voice-case .case-upper .user-detail {
  padding: 8px 10px;
  line-height: 1;
  display: table;
}
.section-voice .voice-case .case-upper .voice-fig img {
  width: 70%;
}
@media screen and (min-width: 600px) {
  .section-voice .voice-case .case-upper .voice-fig img {
    margin-left: 30%;
  }
}
.other-car-select {
  padding: 20px 0;
}
@media screen and (max-width: 599px) {
  .other-car-select h2 {
    font-size: 19px;
  }
}
@media screen and (min-width: 600px) {
  .other-car-select h2 {
    font-size: 30px;
  }
}
.cartype-btn-large a {
  max-width: 550px;
  padding: 16px 0;
  font-size: 20px;
}
.is-border-bottom {
  border-bottom: 1px solid #b4b4b5;
}
@media screen and (max-width: 599px) {
  .carmo-image {
    max-width: 255px;
  }
}
@media screen and (min-width: 600px) {
  .carmo-image {
    max-width: 390px;
  }
}
.caption-img-area {
  background-color: #ecebeb;
}
.caption-img-area-txt {
  display: inline-block;
  background: url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/f2d8074e9ecd43f283b989a2a1b101df/carmo-face.png") no-repeat left center;
  background-size: 80px 45px;
  padding: 20px 0 20px 90px;
  margin: 0 auto;
  text-align: left;
}
.delivery-area {
  max-width: 600px;
  margin: 0 auto;
}
.delivery-image {
  text-align: center;
  margin-bottom: 10px;
}
.delivery-image img {
  margin: auto;
}
@media screen and (min-width: 1025px) {
  .delivery-image img {
    height: 110px;
  }
}
@media screen and (max-width: 599px) {
  .delivery-image img {
    height: 70px;
  }
}
.v-middle {
  vertical-align: middle;
}
.delivery-box {
  border-radius: 5px;
}
.delivery-heading {
  display: inline-block;
  padding-bottom: 0.1em;
  background: linear-gradient(to top, #fff 0%, #fff 40%, rgba(255,255,255,0) 41%, rgba(255,255,255,0) 100%);
}
.point-box {
  margin-top: 2rem;
  position: relative;
  border: 1px solid #000;
  padding: 0 20px 20px;
}
.point-box .ballon {
  position: relative;
  top: -1em;
}
@media screen and (min-width: 600px) {
  .point-box:not(:last-child) {
    margin-right: 10px;
  }
}
.media-title {
  max-width: 335px;
  margin-right: auto;
  margin-left: auto;
  background: #000;
  border-radius: 24px;
  padding: 4px;
  font-size: 18px;
  color: #fff;
  font-weight: bold;
}
@media screen and (min-width: 600px) {
  .tv-cm {
    width: 335px;
    margin-bottom: 65px;
  }
}
@media screen and (max-width: 599px) {
  .tv-cm {
    margin-bottom: 35px;
  }
}
@media screen and (min-width: 600px) {
  .reason-img-area2 {
    display: flex;
    flex-flow: row-reverse nowrap;
    width: 700px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 55px;
  }
  .reason-img-area2 .reason-compare-img,
  .reason-img-area2 .reason-carmokun-copy {
    width: 334px;
  }
}
@media screen and (max-width: 599px) {
  .reason-img-area2 .reason-compare-img,
  .reason-img-area2 .reason-carmokun-copy {
    margin-bottom: 35px;
  }
}
@media screen and (max-width: 599px) {
  .is-size-0 {
    font-size: 3rem;
  }
}
@media screen and (min-width: 600px) {
  .is-size-0 {
    font-size: 2.5rem;
  }
}
@media screen and (max-width: 599px) {
  .is-margin-top-7-mobile {
    margin-top: 1.5rem;
  }
}
@media screen and (min-width: 600px) {
  .is-margin-top-7-tablet {
    margin-top: 1.5rem;
  }
}
@media screen and (min-width: 600px) {
  .is-margin-top-4-tablet {
    margin-top: 1rem;
  }
}
.is-align-items-center {
  align-items: center;
}
@media screen and (max-width: 599px) {
  .has-text-centered-mobile {
    text-align: center;
  }
}
.advantage-column {
  width: 100%;
  line-height: 1.2;
  justify-content: space-between;
}
.advantage-column .column {
  flex-grow: 0;
  position: relative;
}
@media screen and (min-width: 600px) {
  .advantage-column .column {
    padding: 15px 0;
    flex-basis: 33%;
  }
}
@media screen and (max-width: 599px) {
  .advantage-column .column {
    flex-basis: 32%;
  }
  .advantage-column .column img {
    max-height: 80px;
  }
}
.point-box-area {
  justify-content: space-between;
}
.point-box-area .column {
  flex-basis: 24%;
  flex-grow: 0;
  position: relative;
}
@media screen and (max-width: 599px) {
  .point-box-area .column {
    display: flex;
    margin-bottom: 10px;
    text-align: left;
    justify-content: center;
    align-items: center;
  }
}
@media screen and (min-width: 600px) {
  .point-box-area .column {
    text-align: center;
  }
}
@media screen and (min-width: 600px) {
  .point-box-area figure {
    height: 90px;
  }
  .point-box-area figure img {
    max-height: 90px;
  }
}
@media screen and (max-width: 599px) {
  .point-box-area figure {
    flex-basis: 45%;
    flex-grow: 0;
    margin-right: 1rem;
    text-align: center;
  }
}
@media screen and (max-width: 599px) {
  .point-box-area p {
    flex-basis: 55%;
    flex-grow: 0;
  }
}
.difference-table table {
  width: 100%;
}
.difference-table table td,
.difference-table table th {
  border: 1px solid #707070;
  padding: 0.75rem 0.5rem;
  vertical-align: middle;
}
.difference-table table td {
  text-align: center;
  line-height: 1.2;
}
@media screen and (max-width: 599px) {
  .difference-table table td {
    width: 25%;
  }
}
.table-boid-cell {
  border: none !important;
}
.mach-deli-text-border {
  border-bottom: 6px solid #ffc300;
}
.border-bottom-yellow {
  border-bottom: 10px solid #ffc300;
}
.js-display-banner-container {
  margin: 20px auto;
}
.section-company-info {
  border-bottom: 1px solid #ccc;
}
.company-info-title {
  background: #ffc300;
}
footer {
  padding: 1rem 1rem 2rem 1rem;
}
.footer-list {
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 30px;
}
@media screen and (min-width: 600px) {
  .footer-list {
    max-width: 1200px;
    margin: 0 auto 30px;
  }
}
.footer-list .footer-item {
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  width: calc(50% - 7.5px);
  margin-bottom: 10px;
  font-size: 10px;
}
@media screen and (min-width: 600px) {
  .footer-list .footer-item {
    width: 13.5%;
    font-size: 14px;
  }
}
.footer-list .footer-item > a {
  color: #ccc;
  line-height: 1.2;
  width: 100%;
  height: 100%;
}
.footer-list .footer-item.footer-tel {
  width: 100%;
  height: auto;
}
@media screen and (min-width: 600px) {
  .footer-list .footer-item.footer-tel {
    width: 29.5%;
  }
}
.footer-list .footer-item.footer-tel .tel-num {
  white-space: nowrap;
}
.footer-list .footer-item.footer-tel .tel-num img {
  vertical-align: middle;
}
.footer-list .footer-item.footer-tel .tel-detail {
  font-size: 11px;
  color: #262626;
}
.footer-logo {
  margin: 0 auto;
  width: 70%;
}
.footer-logo img {
  width: 170px;
}
.fotter-logo-area {
  max-width: 300px;
  margin: auto;
  align-items: center;
}
copy {
  color: #262626;
}
html {
  scroll-behavior: smooth;
}
.inner {
  width: calc(100% - 40px);
  margin: 0 auto;
}
@media screen and (min-width: 600px) {
  .inner {
    max-width: 950px;
  }
}
.section-top-inner {
  padding: 10px 20px 16px;
}
@media screen and (min-width: 600px) {
  .section-top-inner {
    max-width: 1200px;
    margin: 0 auto;
  }
}
.carmo-logo {
  height: 44px;
  position: relative;
  background: #fff;
}
.carmo-logo img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.advantage-top-img-area {
  margin-top: 20px;
}
body .section-top-campaign-wrapper {
  margin-bottom: -1rem;
  position: relative;
  top: -1rem;
}
@media screen and (min-width: 600px) {
  main {
    max-width: 600px;
    margin: auto;
    box-shadow: 0px 4px 4px rgba(0,0,0,0.25);
  }
}
.annotation {
  text-align: left;
  color: #666;
  font-size: calc(10 / 16 * 1rem);
  line-height: 1.2;
}
.section-top-fv-inner {
  padding: 0;
}
@media screen and (min-width: 600px) {
  .section-top-fv-inner {
    margin: 0 auto;
    max-width: 1200px;
    padding: 10px 0 0;
  }
}
figure.has-text-centered img {
  margin: 0 auto;
}
@media screen and (min-width: 600px) {
  .is-img-pc-350 {
    max-width: 350px;
  }
}
@media screen and (min-width: 600px) {
  .is-img-pc-500 {
    max-width: 500px;
  }
}
@media screen and (min-width: 600px) {
  .is-img-pc-700 {
    max-width: 700px;
  }
}
.line-height-1 {
  line-height: 1;
}
.line-height-2 {
  line-height: 2;
}
@media screen and (max-width: 599px) {
  .input {
    width: 70%;
  }
}
@media screen and (min-width: 600px) {
  .input {
    width: 500px;
  }
}
.is-size-19 {
  font-size: 19px;
}
.is-size-24 {
  font-size: 24px;
}
.link-area {
  padding-bottom: 20px;
}
.link-area li {
  margin-bottom: 10px;
}
.link-area li a {
  display: block;
  background: #fff url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/f0addbd405ed4837b17ffdad4bbafc37/link-marker.svg") no-repeat right 10px center;
  padding: 10px;
  box-shadow: 0px 4px 4px rgba(0,0,0,0.25);
  border-radius: 10px;
  text-align: center;
  font-weight: bold;
}
.is-margin-negative {
  margin: 0 -20px;
}
.has-section-border-top {
  border-top: 1px solid #dde0e0;
}
.section-recommend {
  padding: 20px 0;
}
@media screen and (min-width: 600px) {
  .section-recommend {
    background: #6e221b url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/16e23cc8e0a34b209d0ed8ab46303114/def_bg_pc.svg") no-repeat center/cover;
  }
}
@media screen and (max-width: 599px) {
  .section-recommend {
    background: #6e221b url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/ec4ba095c1134c5d9c7b3ee1f4f3816f/def_bg_sp.svg") no-repeat center/cover;
  }
}
.def-point {
  flex-wrap: wrap;
  justify-content: center;
  gap: 1%;
}
.def-point dl {
  flex-basis: 32%;
}
.def-point dt {
  background: #6e221b;
  border-top-left-radius: 9px;
  border-top-right-radius: 9px;
  padding: 5px;
  position: relative;
}
.def-point dt:before {
  display: block;
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  border-top: 12px solid #6e221b;
  border-bottom: 0;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
}
.def-point dd {
  font-size: 0.9rem;
}
@media screen and (max-width: 599px) {
  .def-point {
    background: #fff;
    border-radius: 9px;
    padding: 20px;
    margin-bottom: 20px !important;
  }
}
@media screen and (min-width: 600px) {
  .def-point {
    padding-bottom: 20px;
  }
  .def-point dl {
    background: #fff;
    border-radius: 9px;
    padding: 20px;
    max-width: 312px;
  }
}
.def-point-2 {
  justify-content: space-between;
}
.def-point-2 .small {
  font-size: 0.5em;
}
.def-point-2 .column {
  flex-grow: 0;
  flex-basis: 49%;
}
@media screen and (max-width: 599px) {
  .def-point-2 .column {
    margin-bottom: 20px !important;
  }
}
.recommend-price h2 .small {
  font-size: 0.5em;
}
.recommend-price-items-wrapper {
  position: relative;
  padding: 30px 20px;
}
.recommend-price-items {
  border: 3px solid #ffc300;
  padding: 10px 15px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  column-gap: 10px;
  row-gap: 10px;
  align-items: center;
  padding-bottom: 30px;
}
@media screen and (max-width: 599px) {
  .recommend-price-items {
    grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
    column-gap: 10px;
  }
}
.recommend-price-item {
  border-radius: 30px;
  font-size: 18px;
  position: relative;
}
.recommend-price-item .small {
  font-size: 0.8em;
}
@media screen and (max-width: 970px) {
  .recommend-price-item {
    font-size: 16px;
  }
  .recommend-price-item .small {
    font-size: 0.5em;
  }
}
@media screen and (max-width: 599px) {
  .recommend-price-item {
    font-size: 16px;
  }
  .recommend-price-item .small {
    font-size: 0.5em;
  }
}
@media screen and (max-width: 389px) {
  .recommend-price-item {
    font-size: 18px;
  }
}
.recommend-price-item:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 50%;
  background: #ffc300;
  left: 0;
  bottom: 0;
  z-index: 0;
  border-radius: 16px;
}
.recommend-price-item p {
  position: relative;
}
.recommend-price-text-01 {
  display: inline-block;
  position: absolute;
  font-size: 30px;
  left: 50%;
  transform: translateX(-50%);
  bottom: 9px;
  width: 70%;
}
@media screen and (min-width: 600px) {
  .recommend-price-text-01 {
    line-height: 1;
    bottom: 11px;
    width: 450px;
    font-size: 40px;
  }
}
.recommend-price-text-01:after,
.recommend-price-text-01:before {
  content: "●";
  display: inline-block;
  position: absolute;
  color: #ffc300;
  transform: scale(50%);
}
.recommend-price-text-01:before {
  left: -10px;
}
@media screen and (min-width: 600px) {
  .recommend-price-text-01:before {
    left: -20px;
  }
}
.recommend-price-text-01:after {
  right: -10px;
}
@media screen and (min-width: 600px) {
  .recommend-price-text-01:after {
    right: -20px;
  }
}
.recommend-price-text-01 .is-hidden-mobile {
  display: inline !important;
}
@media screen and (max-width: 599px) {
  .recommend-price-text-01 .is-hidden-mobile {
    display: none !important;
  }
}
.recommend-price-text-02 {
  font-size: 36px;
  padding: 5px 0;
  position: relative;
  display: inline-block;
}
@media screen and (min-width: 600px) {
  .recommend-price-text-02 {
    font-size: clamp(51px, 5.5vw, 78px);
  }
}
@media screen and (max-width: 599px) {
  .recommend-price-text-02 {
    font-size: 9.23076923076923vw;
  }
}
.recommend-price-text-02 .strong {
  font-size: 1.5em;
}
.recommend-price-text-02:before,
.recommend-price-text-02:after {
  content: url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/35d0b1f455194db0af94076af34901fd/icon-price-item-deco.png");
  display: inline-block;
  position: absolute;
  bottom: 0;
}
.recommend-price-text-02:before {
  left: -45%;
  transform: scale(50%);
}
.recommend-price-text-02:after {
  right: -45%;
  transform: scaleX(50%) scaleY(50%) scale(-1, 1);
}
@media screen and (min-width: 600px) {
  .recommend-price-text-02:before {
    left: -20%;
    transform: scale(50%);
  }
  .recommend-price-text-02:after {
    right: -20%;
    transform: scaleX(50%) scaleY(50%) scale(-1, 1);
  }
}
.has-text-pale-yellow {
  color: #f9f3ad;
}
.is-size-18 {
  font-size: 18px;
}
@media screen and (min-width: 600px) {
  .is-size-18 {
    font-size: 20px;
  }
}
.is-size-22 {
  font-size: 22px;
}
@media screen and (min-width: 600px) {
  .is-size-22 {
    font-size: 30px;
  }
}
@media screen and (max-width: 374px) {
  .is-size-22 {
    font-size: 20px;
  }
}
.is-size-24 {
  font-size: 24px;
}
@media screen and (min-width: 600px) {
  .is-size-24 {
    font-size: 32px;
  }
}
.is-size-26 {
  font-size: 26px;
}
@media screen and (min-width: 600px) {
  .is-size-26 {
    font-size: 34px;
  }
}
.is-border-radius {
  border-radius: 9px;
}
.section-howto {
  padding: 20px 0 0;
}
.triangle-yelow {
  background-color: #ffc300;
  position: relative;
  margin-bottom: 30px;
  padding: 10px;
}
@media screen and (min-width: 600px) {
  .triangle-yelow {
    margin-bottom: 50px;
  }
}
.triangle-yelow:after {
  display: block;
  position: absolute;
  bottom: -19px;
  left: 0;
  right: 0;
  margin: auto;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 190px solid transparent;
  border-left: 190px solid transparent;
  border-top: 20px solid #ffc300;
  border-bottom: none;
}
.triangle-red {
  background-color: #eb4637;
  position: relative;
  margin-bottom: 20px;
  color: #fff;
  padding: 10px 0 5px;
}
.triangle-red:after {
  display: block;
  position: absolute;
  bottom: -19px;
  left: 0;
  right: 0;
  margin: auto;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 190px solid transparent;
  border-left: 190px solid transparent;
  border-top: 20px solid #eb4637;
  border-bottom: none;
}
.triangle-gray {
  background-color: #e6e6e6;
  position: relative;
  margin-bottom: 30px;
  padding: 10px;
}
@media screen and (min-width: 600px) {
  .triangle-gray {
    margin-bottom: 50px;
  }
}
.triangle-gray:after {
  display: block;
  position: absolute;
  bottom: -19px;
  left: 0;
  right: 0;
  margin: auto;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 190px solid transparent;
  border-left: 190px solid transparent;
  border-top: 20px solid #e6e6e6;
  border-bottom: none;
}
@media screen and (min-width: 600px) {
  .section-cartype.new-car {
    padding-top: 0 !important;
  }
}
.section-cartype .cartype-img {
  max-width: 100%;
}
@media screen and (min-width: 600px) {
  .section-cartype .cartype-img {
    min-height: 140px;
    display: flex;
  }
}
@media screen and (min-width: 600px) {
  .section-cartype .cartype-img img {
    max-height: 140px;
  }
}
@media screen and (min-width: 600px) {
  .section-cartype .cartype-li {
    width: 100%;
    border-right: 0 !important;
  }
  .section-cartype .cartype-li:not(:last-of-type) {
    border-bottom: 1px solid #ccc;
  }
}
@media screen and (max-width: 599px) {
  .section-cartype .cartype-li {
    padding-top: 20px;
  }
}
@media screen and (min-width: 600px) {
  .section-cartype .cartype-li-3line {
    width: 32%;
  }
}
.section-cartype .cartype-ttl {
  min-height: 42px;
  margin-bottom: 0;
  justify-content: center;
  font-size: 25px !important;
  font-weight: bold;
}
.section-cartype .point-tag {
  background-color: #ffc300 !important;
  color: #000;
  font-size: 13px !important;
  min-width: 7em !important;
  padding: 3px 4px;
}
.cartype-btn a {
  line-height: 1.3;
}
.cartype-btn-red {
  max-width: 550px;
  margin: auto;
}
.cartype-btn-red a {
  background: #eb4637 url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/126d0643b875490f9e1931c13e074099/arrow-white.svg") no-repeat right 10px center;
  color: #fff;
  border-radius: 45px;
  font-size: 18px;
  max-width: 550px;
  padding: 16px 0;
}
.cartype-btn-large a {
  border-radius: 45px;
}
.cartype-btn-yellow a {
  background-color: #ffc300;
  color: #000;
}
body .section-cartype .cartype-ttl .point-tag {
  align-items: center;
  display: flex;
  height: 24px;
  justify-content: center;
  padding: 1px 7px 0;
  line-height: 1;
  min-width: 6em;
}
body .section-cartype .cartype-ttl .plan-text {
  position: relative;
  top: 4px;
}
.section-carlist-item-model .section-carlist-btn li {
  padding-top: 15px;
}
.section-carlist-item-model .section-carlist-btn li a img {
  height: 28px;
}
.section-carlist-item-model .section-carlist-btn li a span {
  line-height: 1.3;
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: bold;
  min-height: 31px;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
}
.section-carlist-btn {
  max-width: 940px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.section-carlist-btn li {
  border-radius: 10px;
  border: 2px solid #dedede;
  background: #fff;
  box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25);
  padding: 10px;
  width: 108px;
}
.section-carlist-btn li a img {
  width: 100%;
}
@media screen and (max-width: 599px) {
  .section-carlist-btn {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
    gap: 10px;
    justify-items: center;
  }
  .section-carlist-btn li {
    max-width: 105px;
    padding: 8px;
  }
}
.cartype-detail-list {
  display: flex;
  margin-bottom: 2px;
}
.cartype-detail-list:nth-child(3) dt {
  min-width: 63px;
}
.cartype-detail-list dd {
  text-align: left;
}
.cartype-detail-btn {
  cursor: pointer;
}
@media screen and (min-width: 600px) {
  .cta-car-img {
    display: flex;
    min-height: 180px;
    justify-content: space-around;
    align-items: center;
  }
}
.other-car-select {
  padding: 20px 0;
}
@media screen and (max-width: 599px) {
  .other-car-select h2 {
    font-size: 19px;
  }
}
@media screen and (min-width: 600px) {
  .other-car-select h2 {
    font-size: 30px;
  }
}
.cartype-btn-large a {
  max-width: 550px;
  padding: 16px 0;
  font-size: 20px;
}
.is-border-bottom {
  border-bottom: 1px solid #b4b4b5;
}
@media screen and (max-width: 599px) {
  .carmo-image {
    max-width: 255px;
  }
}
@media screen and (min-width: 600px) {
  .carmo-image {
    max-width: 390px;
  }
}
.caption-img-area {
  background-color: #ecebeb;
}
.caption-img-area-txt {
  display: inline-block;
  background: url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/f2d8074e9ecd43f283b989a2a1b101df/carmo-face.png") no-repeat left center;
  background-size: 80px 45px;
  padding: 20px 0 20px 90px;
  margin: 0 auto;
  text-align: left;
}
@media screen and (min-width: 600px) {
  .price-height {
    min-height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.mach-deli {
  border-top: 10px solid #ffc300;
}
.used-car {
  border-top: 8px solid #e6e6e6;
}
.used-car-promise {
  justify-content: space-between;
}
.used-car-promise .column {
  border-radius: 12px;
  flex-grow: 0;
  flex-basis: 49%;
}
.used-car-promise dl {
  border: 3px solid #eb4637;
  border-radius: 9px;
  margin-bottom: 20px !important;
}
.used-car-promise dt {
  background: #eb4637;
  color: #fff;
  padding: 7px;
}
.used-car-promise dd {
  padding: 10px 20px;
}
.used-car-promise dd img {
  height: 180px;
}
.assessment-head {
  justify-content: center;
  position: relative;
  max-width: 18rem;
  background: #ffc300;
  padding: 14px 7px;
  margin: 20px auto 20px;
}
@media screen and (min-width: 600px) {
  .assessment-head {
    max-width: 25rem;
  }
}
.assessment-head:after {
  border: solid transparent;
  content: '';
  height: 0;
  width: 0;
  pointer-events: none;
  position: absolute;
  border-color: rgba(255,195,0,0);
  border-top-width: 10px;
  border-bottom-width: 10px;
  border-left-width: 10px;
  border-right-width: 10px;
  margin-left: -10px;
  border-top-color: #ffc300;
  top: 100%;
  left: 50%;
}
.area-3crown {
  background: linear-gradient(180deg, #ffc300 0%, #ffeeb6 100%);
}
.media-info {
  justify-content: space-between;
}
@media screen and (min-width: 600px) {
  .media-info {
    max-width: 1000px;
    margin: auto;
  }
}
.media-info .column {
  flex-grow: 0;
  flex-basis: 49%;
}
.area-twitter {
  position: relative;
  width: 100%;
  overflow-y: scroll;
  justify-content: space-between;
}
.area-twitter .column {
  background: #fff;
  flex-grow: 0;
  flex-basis: 300px;
  margin-right: 10px;
  border-radius: 8px;
  padding: 7px;
}
.area-twitter img {
  max-width: 300px;
}
.apri-list {
  justify-content: space-between;
}
.apri-list .column {
  flex-grow: 0;
  flex-basis: 48%;
}
.apri-list-campaign {
  border-radius: 12px;
}
.apri-list-point {
  display: inline-block;
  background-image: url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/725d51dbf3324f02936c1a5f23707e04/apri-list-campaign-left.svg"), url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/b02df5c5b59848e3a02941206787ba45/apri-list-campaign-right.svg");
  background-repeat: no-repeat, no-repeat;
  background-position: left center, right center;
  padding: 0 14px;
}
.worries .columns {
  justify-content: space-between;
}
.worries .column {
  flex-grow: 0;
  flex-basis: 48%;
}
.worries-arrow {
  position: relative;
  padding: 10px;
  text-align: center;
  border: 1px solid #ffc300;
  border-radius: 10px;
}
.worries-arrow:after,
.worries-arrow:before {
  border: solid transparent;
  content: '';
  height: 0;
  width: 0;
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: 50%;
}
.worries-arrow:after {
  border-color: rgba(255,255,255,0);
  border-top-width: 10px;
  border-bottom-width: 10px;
  border-left-width: 10px;
  border-right-width: 10px;
  margin-left: -10px;
  border-top-color: #fff;
}
.worries-arrow:before {
  border-color: rgba(255,195,0,0);
  border-top-width: 11px;
  border-bottom-width: 11px;
  border-left-width: 11px;
  border-right-width: 11px;
  margin-left: -11px;
  margin-top: 1px;
  border-top-color: #ffc300;
}
.border-note {
  background-color: #fff;
  background-image: linear-gradient(90deg, rgba(237,119,128,0) 0%, rgba(237,119,128,0) 50%, #fff 0%, #fff 100%), linear-gradient(180deg, rgba(100,100,100,0) 0%, rgba(100,100,100,0) 97.5%, #646464 100%);
  background-size: 8px 100%, 100% 2em;
  line-height: 2em;
}
.section-voice {
  background: none;
}
.section-voice .voice-case-area {
  background: #ffc300;
  padding: 30px 20px 10px;
}
.section-voice .voice-ttl {
  font-size: 32px;
  text-shadow: 2px 2px 0 #000;
  position: relative;
  margin-bottom: 30px;
  z-index: 1;
}
.section-voice .voice-ttl:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 23px;
  background: #000;
  left: 0;
  bottom: -7px;
  z-index: 0;
}
.section-voice .voice-ttl:after {
  position: absolute;
  content: '';
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 16px 12px 0px 12px;
  border-color: #000 transparent transparent transparent;
  left: 50%;
  transform: translateX(-50%);
  bottom: -20px;
}
.section-voice .voice-ttl span {
  position: relative;
  z-index: 1;
  letter-spacing: 2px;
}
@media screen and (min-width: 600px) {
  .section-voice .voice-case .case-upper .text.r-0 {
    right: 0;
    left: auto;
  }
}
.section-voice .voice-case .case-upper .voice-fig img {
  margin-left: 0;
}
.campaign-new {
  position: relative;
  background: #fff;
  padding: 4px;
  text-align: center;
  border: 1px solid #ff7e01;
  color: #ff7e01;
  margin: 10px auto 20px;
  font-weight: bold;
  font-size: 14px !important;
  max-width: 500px;
}
.campaign-new:after,
.campaign-new:before {
  border: solid transparent;
  content: '';
  height: 0;
  width: 0;
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: 50%;
}
.campaign-new:after {
  border-color: rgba(255,255,255,0);
  border-top-width: 9px;
  border-bottom-width: 9px;
  border-left-width: 6px;
  border-right-width: 6px;
  margin-left: -6px;
  border-top-color: #fff;
}
.campaign-new:before {
  border-color: rgba(255,126,1,0);
  border-top-width: 10px;
  border-bottom-width: 10px;
  border-left-width: 7px;
  border-right-width: 7px;
  margin-left: -7px;
  margin-top: 1px;
  border-top-color: #ff7e01;
}
.campaign-used {
  position: relative;
  background: #fff;
  padding: 4px;
  text-align: center;
  border: 1px solid #ffc300;
  color: #ffc300;
  margin: 10px 10px 20px;
  font-weight: bold;
  font-size: 14px !important;
  border: 1px solid #ffc300;
  max-width: 500px;
}
.campaign-used:after,
.campaign-used:before {
  border: solid transparent;
  content: '';
  height: 0;
  width: 0;
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: 50%;
}
.campaign-used:after {
  border-color: rgba(255,255,255,0);
  border-top-width: 9px;
  border-bottom-width: 9px;
  border-left-width: 6px;
  border-right-width: 6px;
  margin-left: -6px;
  border-top-color: #fff;
}
.campaign-used:before {
  border-color: rgba(255,195,0,0);
  border-top-width: 10px;
  border-bottom-width: 10px;
  border-left-width: 7px;
  border-right-width: 7px;
  margin-left: -7px;
  margin-top: 1px;
  border-top-color: #ffc300;
}
.section-step .inner {
  margin-top: 60px;
}
@media screen and (min-width: 600px) {
  .section-step .inner {
    max-width: 1200px !important;
  }
}
.step-area .columns {
  justify-content: center;
}
.step-area-container {
  border: 4px solid #ffc300;
  padding: 20px 10px;
  text-align: center;
  position: relative;
  margin-bottom: 30px;
}
.step-heading {
  font-size: 20px;
  font-weight: bold;
  background: linear-gradient(transparent 70%, #ffc300 70%);
  margin: 20px auto;
  padding: 0 0.5em;
}
.step-number {
  position: absolute;
  top: -13px;
  left: 20px;
  display: inline-block;
  text-align: center;
  background: #ffc300;
  padding: 0 7px;
  font-weight: bold;
}
.step-number:before {
  position: absolute;
  content: '';
  right: -10px;
  width: 0;
  height: 0;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #b18800;
}
.step-img {
  min-height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.recommend-text {
  display: inline-block;
  padding: 0 20px;
  background: url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/58f5e8bc60804670adefafadde99cb58/recom-l.svg") no-repeat left center, url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/b5e42cfa951845029111f0c5d811800b/recom-r.svg") no-repeat right center;
  min-height: 1.2rem;
}
@media screen and (min-width: 600px) {
  .recommend-text-dummy {
    padding-top: 1.2rem !important;
  }
}
.flow-bubble-yellow {
  position: relative;
  border: 4px solid #ffc300;
  margin-bottom: 30px;
  z-index: 1;
}
.flow-bubble-yellow:after,
.flow-bubble-yellow:before {
  border: solid transparent;
  content: '';
  height: 0;
  width: 0;
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: 50%;
}
.flow-bubble-yellow:after {
  border-color: rgba(255,255,255,0);
  border-top-width: 10px;
  border-bottom-width: 10px;
  border-left-width: 10px;
  border-right-width: 10px;
  margin-left: -10px;
  border-top-color: #fff;
}
.flow-bubble-yellow:before {
  border-color: rgba(255,195,0,0);
  border-top-width: 13px;
  border-bottom-width: 13px;
  border-left-width: 13px;
  border-right-width: 13px;
  margin-left: -13px;
  margin-top: 3px;
  border-top-color: #ffc300;
}
.flow-bubble-gray {
  position: relative;
  border: 4px solid #c4c4c4;
  margin-bottom: 30px;
  z-index: 1;
}
.flow-bubble-gray:after,
.flow-bubble-gray:before {
  border: solid transparent;
  content: '';
  height: 0;
  width: 0;
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: 50%;
}
.flow-bubble-gray:after {
  border-color: rgba(255,255,255,0);
  border-top-width: 10px;
  border-bottom-width: 10px;
  border-left-width: 10px;
  border-right-width: 10px;
  margin-left: -10px;
  border-top-color: #fff;
}
.flow-bubble-gray:before {
  border-color: rgba(255,195,0,0);
  border-top-width: 13px;
  border-bottom-width: 13px;
  border-left-width: 13px;
  border-right-width: 13px;
  margin-left: -13px;
  margin-top: 3px;
  border-top-color: #c4c4c4;
}
.ballon {
  padding: 0.4rem 1.5rem;
}
@media screen and (max-width: 599px) {
  footer {
    padding: 1rem 1rem 85px 1rem;
  }
}
.footer-ctabtn {
  width: 100%;
  position: fixed;
  bottom: 0;
  transform: translate(0, 100px);
  transition: all 1000ms;
  z-index: 1000;
  background: #eaeaea;
}
@media screen and (min-width: 600px) {
  .footer-ctabtn {
    display: none;
  }
}
.footer-ctabtn img {
  vertical-align: top;
}
.footer-ctabtn-list {
  display: flex;
  justify-content: center;
  gap: 0 10px;
}
.footer-ctabtn-list li a {
  display: block;
  padding: 4px 0;
  border: 1px solid #fff;
  border-radius: 10px;
  box-shadow: 0 4px 4px 0px rgba(0,0,0,0.5);
}
.footer-ctabtn-list li a img {
  vertical-align: middle;
  margin-right: 4px;
}
.footer-ctabtn-list-single li a {
  display: block;
  padding: 10px 0;
  border: 1px solid #fff;
  border-radius: 10px;
  box-shadow: 0 4px 4px 0px rgba(0,0,0,0.5);
  font-size: 18px;
  background: #eb4637 url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/1145a68aeedb4ec5916de4043e1334b9/icon-arrow-orange.svg") right 10px center no-repeat;
}
.footer-ctabtn-list-single li a img {
  vertical-align: middle;
  margin-right: 4px;
}
.footer-ctabtn-list-1 li {
  flex-grow: 1;
  flex-basis: 49%;
}
.footer-ctabtn-txt {
  font-size: 7px;
}
@media screen and (max-width: 599px) {
  .fadein {
    transform: translate(0);
  }
}
.arrow-anime {
  animation: move-y 0.5s infinite alternate ease-in-out;
}
.accordion-body {
  background: url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/ef8e3e4099214b92bcd0608b6e5c3bdf/icon-a.svg") left top no-repeat;
  padding-left: 50px;
  margin-top: 14px;
  min-height: 3rem;
}
.morelook-button {
  background: url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/f5b1cc6067504d4cb96569f0ef1c1973/icon-q.svg") left center no-repeat;
  padding: 10px 50px;
  font-weight: bold;
  position: relative;
}
.open-btn {
  display: block;
  width: 27px;
  height: 27px;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  background: url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/eee33049427f49178ac1e72f2dbfbbd7/icon-open.svg") top center no-repeat;
}
.selected .open-btn {
  background: url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/08758791f4d74c9390cb9b1875862716/icon-close.svg") top center no-repeat;
}
.faq-box {
  border: 1px solid #ffc300;
  border-radius: 7px;
  padding: 14px;
  margin-bottom: 10px;
}
@media screen and (min-width: 600px) {
  .faq-box .js-accordion-outerTgt {
    height: auto !important;
  }
}
@media screen and (min-width: 1024px) {
  body .section-voice .voice-case-area {
    padding: 40px 20px 10px;
  }
  body .section-voice .voice-case-area .voice-case {
    width: 80%;
  }
  body .section-voice .voice-case-area .voice-case .case-upper .voice-fig {
    max-width: 441px;
  }
}
.voice-case {
  margin-bottom: 44px;
  position: relative;
}
.voice-case::before {
  content: '';
  left: -20px;
  min-height: 49px;
  min-width: 278px;
  position: absolute;
  top: -1rem;
  z-index: 10;
}
.voice-case.is-first::before {
  background: url("/lp/assets/img/object/component/main/voice-case-heading-first.svg") no-repeat 0 0/cover;
}
.voice-case.is-second::before {
  background: url("/lp/assets/img/object/component/main/voice-case-heading-second.svg") no-repeat 0 0/cover;
  min-width: 292px;
}
.voice-case.is-third::before {
  background: url("/lp/assets/img/object/component/main/voice-case-heading-third.svg") no-repeat 0 0/cover;
  min-width: 310px;
}
.voice-case .case-upper .text {
  top: calc(50% + 20px);
}
.voice-case .case-upper .text .text-main {
  font-size: 16px;
  padding: 3px 4px;
}
.cartype-suggest-heading {
  padding-top: 9rem;
  position: relative;
}
.cartype-suggest-balloon {
  background: #eb4637;
  border-radius: 3.125rem;
  color: #fff;
  left: 50%;
  padding: 1rem;
  position: absolute;
  top: 0.5rem;
  transform: translateX(-50%);
  width: calc(100% - 3rem);
  z-index: 20;
}
@media screen and (min-width: 1024px) {
  .cartype-suggest-balloon {
    width: 950px;
  }
}
.cartype-suggest-balloon:after {
  border-style: solid;
  border-right: 12px solid transparent;
  border-left: 12px solid transparent;
  border-top: 26px solid #eb4637;
  border-bottom: 0;
  bottom: calc(-26px + 10px);
  content: "";
  height: 0;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 0;
}
.cartype-suggest-arrow {
  background: #ffc300;
  position: relative;
}
.cartype-suggest-arrow:after {
  border-style: solid;
  border-right: 190px solid transparent;
  border-left: 190px solid transparent;
  border-top: 20px solid #ffc300;
  border-bottom: none;
  bottom: -19px;
  content: "";
  display: inline-block;
  height: 0;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 0;
}
.cartype-suggest-arrow.has-balloon {
  margin-bottom: 1rem;
  padding-top: 2rem;
  z-index: 10;
}
.cartype-suggest-arrow-text {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.3;
  padding: 0.5rem 0;
  text-align: center;
}
.cartype-suggest-arrow-text-red {
  color: #f33;
}
.cartype-carphoto-container {
  position: relative;
}
.cartype-name-circle {
  align-items: center;
  background: #000;
  border: 2px solid #fff;
  border-radius: 50%;
  bottom: 2rem;
  color: #fff;
  display: flex;
  font-size: 0.875rem;
  font-weight: 800;
  height: 100px;
  justify-content: center;
  line-height: 1.3;
  position: absolute;
  right: -0.5rem;
  text-align: center;
  width: 100px;
}
.cartype-name-circle.is-second {
  height: 110px;
  letter-spacing: -0.05rem;
  width: 110px;
}
.cartype-name-circle-text-min {
  font-size: 0.6875rem;
}
.cartype-name-circle-text-balancer {
  margin-right: -0.5rem;
}
.voice-case-bottom-balloon-container {
  padding: 0 1.25rem;
}
.voice-case-bottom-balloon-item {
  background: #fff;
  border: 1px solid #f6c443;
  border-radius: 0.625rem;
  min-height: 9rem;
  margin: 0 0 0.625rem;
  padding: 0.875rem;
  position: relative;
  width: 100%;
}
@media screen and (min-width: 600px) {
  .voice-case-bottom-balloon-item {
    min-height: 8rem;
  }
}
.voice-case-bottom-balloon-item:last-of-type {
  margin: 0 0 1.5rem;
}
.voice-case-bottom-balloon-comment {
  font-size: 0.9375rem;
  font-weight: 700;
}
.voice-case-bottom-balloon-name {
  bottom: 1.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  left: 0.875rem;
  position: absolute;
}
.voice-case-bottom-balloon-image {
  bottom: 0.6875rem;
  max-width: 116px;
  position: absolute;
  right: 0.875rem;
}
.voice-case-bottom-balloon-image.is-hastler {
  right: 0.5rem;
}
.link-area {
  padding-bottom: 0;
}
.link-area ul li {
  margin-bottom: 0;
}
.link-area ul li .link-area-anchor {
  background: #f33;
  color: #fff;
  position: relative;
}
.link-area ul li .link-area-anchor:after {
  background: url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/f0addbd405ed4837b17ffdad4bbafc37/link-marker.svg") no-repeat 0 0/cover;
  content: "";
  display: inline-block;
  height: 24px;
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
}
.link-area ul li .link-area-anchor-head {
  display: block;
  font-size: 0.75rem;
  margin: 0 auto;
  text-align: center;
  position: relative;
  width: fit-content;
}
.link-area ul li .link-area-anchor-head:before {
  background: url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/2cba1840da3f499b8d46e06ce9585c04/link-shape-left.svg") no-repeat 0 0/cover;
  content: "";
  display: inline-block;
  height: 12px;
  position: absolute;
  left: -1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
}
.link-area ul li .link-area-anchor-head:after {
  background: url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/7c3aed63ddc04bbfbfa1f54ca79e70d7/link-shape-right.svg") no-repeat 0 0/cover;
  content: "";
  display: inline-block;
  height: 12px;
  position: absolute;
  right: -1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
}
.push-container {
  margin: 2rem auto 0;
  padding: 0 1.25rem;
}
.push-subheading {
  align-items: center;
  background: #6e221b;
  border-radius: 33px;
  color: #f9f3ad;
  display: flex;
  font-size: 1.375rem;
  font-weight: 800;
  height: 66px;
  justify-content: center;
  margin: 2rem auto;
  position: relative;
  width: 100%;
}
.push-subheading:after {
  background: url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/5deef8c7da0244f0b77c0dac385754eb/push-thunder.svg") no-repeat 0 0/cover;
  bottom: -30px;
  content: "";
  display: inline-block;
  height: 34px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 33px;
}
.push-subheading-speech {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0 auto 1rem;
  position: relative;
  text-align: center;
}
.push-subheading-speech span {
  position: relative;
}
.push-subheading-speech span:before {
  background: url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/a9b71f2f67684dc19b28cf4d036bec5b/push-subheading-speech-left.svg") no-repeat 0 0/cover;
  content: "";
  display: inline-block;
  height: 32px;
  left: -30px;
  position: absolute;
  width: 30px;
}
.push-subheading-speech span:after {
  background: url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/3d0fdb3aa4674c4ca833b83fe0e34f3a/push-subheading-speech-right.svg") no-repeat 0 0/cover;
  content: "";
  display: inline-block;
  height: 32px;
  position: absolute;
  width: 30px;
}
.push-subheading-speech span.is-second:before {
  left: 0.375rem;
}
.push-text {
  font-weight: 800;
  text-align: center;
}
.push-text-marker {
  background: linear-gradient(transparent 50%, #ffc300 50%);
  padding: 0 0.5rem 0.25rem;
}
.push-text-min {
  font-size: 0.6875rem;
}
.push-text-yen {
  font-size: 0.75rem;
}
.push-text-asterisk {
  bottom: -1px;
  font-size: 0.75rem;
  position: relative;
}
.push-text-asterisk-notice {
  display: inline-block;
  font-size: 0.625rem;
}
.push-notice-list {
  list-style-type: none;
  font-size: 0.625rem;
  margin: 2rem 0;
}
.push-text-bottom {
  text-align: center;
}
.push-item-bottom {
  margin: 0 auto 2rem;
}
.push-item-bottom-first {
  display: flex;
  justify-content: center;
  text-align: center;
  width: 100%;
}
.push-carname {
  font-size: 0.6875rem;
  font-weight: 700;
}
.push-carprice {
  color: #eb4637;
  font-size: 1.125rem;
  font-weight: 800;
}
.push-carmonthly {
  border: 1px solid #666;
  display: inline-block;
  font-size: 0.625rem;
  padding: 0.0625rem 0 0.0625rem 0.375rem;
  text-align: center;
}
.especially-container {
  padding: 1.25rem;
}
.especially-heading {
  margin: 0 auto 2.375rem;
}
.especially-item {
  margin: 0 auto 1.5rem;
  position: relative;
}
.especially-item:last-of-type {
  margin: 0 auto;
}
.especially-text {
  bottom: 1.5625rem;
  font-size: 1.0625rem;
  font-weight: 900;
  left: 50%;
  line-height: 1.7;
  position: absolute;
  text-align: center;
  transform: translateX(-50%);
  width: calc(100% - 1.25rem);
}
.especially-text-marker {
  background: linear-gradient(transparent 50%, #ffc300 50%);
  padding: 0 0.5rem 0.25rem;
}
.solution-container {
  background: #fff7ce;
  padding: 1.25rem;
}
.solution-heading {
  margin: 0 auto 2.375rem;
}
.solution-image {
  display: block;
  margin: 0 auto 0.75rem;
}
.solution-item {
  margin: 0 auto 1.5rem;
  position: relative;
}
.solution-item:last-of-type {
  margin: 0 auto;
}
.solution-text {
  max-width: 335px;
  margin: auto;
  font-size: 1rem;
  line-height: 1.3;
  position: relative;
  padding: 0 0 0 3.875rem;
}
.solution-text:before {
  background: url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/bbedfb7618994203af461d3e8be717f9/solution-arrow.svg") no-repeat 0 0/cover;
  bottom: 0.5rem;
  content: "";
  display: inline-block;
  height: 36px;
  left: 0;
  position: absolute;
  width: 41px;
}
.solution-text-large {
  font-size: 1.375rem;
  font-weight: 900;
}
.solution-text-min {
  bottom: 3px;
  font-size: 0.875rem;
  position: relative;
}
.solution-text-notice {
  display: block;
  font-size: 0.625rem;
  padding: 0 0 0 3.875rem;
}
.consultation-container {
  margin: 0 auto 2rem;
  width: 100%;
}
.consultation-image {
  display: block;
  width: 100%;
}
.consultation-container-bottom {
  padding: 0 1.25rem;
  width: 100%;
}
.consultation-text {
  margin: 0 auto 1rem;
}
.consultation-text-min {
  display: block;
  font-size: 0.8125rem;
  text-align: center;
}
.consultation-link-container {
  display: flex;
  gap: 0 0.5rem;
  justify-content: space-between;
  margin: 0 auto 1.5rem;
}
.consultation-link-link {
  width: 50%;
}
.motto-container-bottom {
  background: #fff9e6;
  margin: 0 auto 1.125rem;
  padding: 1.5rem 1.25rem;
  width: 100%;
}
.motto-heading-top,
.motto-heading-bottom {
  align-items: center;
  background: #ffc300;
  display: flex;
  font-size: 1.25rem;
  font-weight: 800;
  justify-content: center;
  height: 64px;
}
.motto-heading-middle {
  display: block;
  position: relative;
  width: 100%;
}
.motto-heading-catchcopy {
  background: #fff;
  font-size: 1.25rem;
  font-weight: 800;
  left: 50%;
  padding: 0.5rem 0.875rem;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 2.5rem);
}
.motto-subheading {
  border-bottom: 2px solid #000;
  border-top: 2px solid #000;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.3;
  margin: 2rem auto;
  padding: 1.5rem 0.5rem;
  text-align: center;
  width: fit-content;
}
.section-satis {
  padding: 20px 0;
  margin-top: 10px;
  background: url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/5daadcfb61374968a2b9fcee2945cb30/satis-bg.png") no-repeat top center/contain;
}
.section-satis-content {
  position: relative;
  margin-top: 50px;
}
.section-satis-content-heading {
  position: relative;
  top: -50px;
  margin-bottom: -50px;
  text-align: center;
}
.search-heading {
  display: inline-block;
  padding: 0 30px;
  background: url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/abb0d1d3c14348c486333a78e5c769c9/sh-l.svg") no-repeat left center, url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/865fbb20501a468c8176eaeca65f74fa/sh-r.svg") no-repeat right center;
  min-height: 3rem;
  font-size: 1.2rem;
  line-height: 1.1;
}
.v-baseline {
  vertical-align: baseline;
}
.search-heading {
  display: inline-block;
  padding: 0 30px;
  background: url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/abb0d1d3c14348c486333a78e5c769c9/sh-l.svg") no-repeat left center, url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/865fbb20501a468c8176eaeca65f74fa/sh-r.svg") no-repeat right center;
  min-height: 3rem;
  font-size: 1.2rem;
  line-height: 1.1;
}
.company-wrapper {
  max-width: 1116px;
  margin: auto;
  border-bottom: 1px solid #000;
}
.company-sompo,
.company-carmo {
  padding: 20px;
}
.company-sompo .company-header,
.company-carmo .company-header {
  font-weight: 900;
}
.company-sompo .company-contact .small,
.company-carmo .company-contact .small {
  font-size: 12px;
}
.company-carmo,
.company-sompo {
  border-top: 1px solid #000;
}
.data-number {
  font-size: 10px;
  font-weight: bold;
  padding: 20px;
  max-width: 1116px;
  margin: auto;
}
.push-item-cs {
  position: relative;
}
@media screen and (min-width: 600px) {
  .push-item-cs {
    max-width: 400px;
    margin: 0 auto;
  }
}
.push-item-cs > p {
  padding: 20px;
  border: 2px solid #b6b6b6;
  border-radius: 20px;
  margin-top: 10px;
}
.push-item-cs > div {
  position: relative;
  text-align: right;
  top: -40px;
  margin-bottom: -40px;
}
.recommend-head {
  text-align: center;
}
.recommend-head p {
  display: inline-block;
  padding: 0 35px;
  background: url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/59f31c9530d14201ae7f5ef0c641cf42/dec-txt-l.svg") no-repeat left center, url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/2603a551bb8a41bfb9b31f22c1922df8/dec-txt-r.svg") no-repeat right center;
  min-height: 3rem;
  font-size: 1.4rem;
  line-height: 1.1;
  margin: 30px auto 20px;
  font-weight: bold;
}
.recommend-head-h3 {
  position: relative;
  background: #ffc300;
  padding: 10px;
  text-align: center;
  font-size: 1.4rem;
  border-radius: 10px;
  font-weight: bold;
  margin-bottom: 30px;
}
.recommend-head-h3 strong {
  display: block;
  font-size: 1rem;
  font-weight: normal;
}
.recommend-head-h3:after {
  border: solid transparent;
  content: '';
  height: 0;
  width: 0;
  pointer-events: none;
  position: absolute;
  border-color: rgba(255,195,0,0);
  border-top-width: 10px;
  border-bottom-width: 10px;
  border-left-width: 10px;
  border-right-width: 10px;
  margin-left: -10px;
  border-top-color: #ffc300;
  top: 100%;
  left: 50%;
}
.push-container {
  margin-top: 80px;
}
.push-item-bottom-first {
  width: 100%;
  margin-top: 20px;
  justify-content: center;
  gap: 10px;
}
@media screen and (max-width: 599px) {
  .push-item-bottom-first {
    justify-content: space-between;
  }
}
.push-item-bottom-first-content {
  width: 33%;
}
.push-item-bottom-first-content > picture {
  display: flex;
  min-height: 80px;
}
.push-carprice img {
  vertical-align: middle;
  margin-top: -4px;
}
.push-carprice .lowest-price-view {
  font-size: 1.1rem;
}
.push-carname {
  padding-bottom: 3px;
  background: linear-gradient(transparent 40%, #ebebeb 40%);
  position: relative;
}
.push-carname .maker {
  font-weight: normal;
  font-size: 0.6rem;
}
.push-carname .carname {
  font-weight: bold;
  font-size: 0.8rem;
}
.push-carname::before {
  position: absolute;
  content: " ";
  bottom: -8px;
  left: 0;
  clip-path: polygon(0 0, 0% 100%, 100% 0);
  background: #ebebeb;
  width: 8px;
  height: 8px;
}
.reassurance-item {
  padding: 0 1.25rem 1rem;
}
.reassurance-item.is-third {
  padding: 0 1.25rem;
}
.reassurance-image {
  display: block;
  width: 100%;
}
.reassurance-subheading {
  align-items: center;
  background: #ffe4de;
  border-radius: 33px;
  color: #323737;
  display: flex;
  font-size: 1.375rem;
  font-weight: 800;
  height: 66px;
  justify-content: center;
  line-height: 1;
  margin: 2rem auto 1rem;
  position: relative;
  width: 100%;
}
@media screen and (max-width: 375px) {
  .reassurance-subheading {
    font-size: 5.333vw;
  }
}
.reassurance-subheading.is-third {
  border-radius: calc(5.125rem / 2);
  height: 5.125rem;
  line-height: 1.3;
  padding: 0.5rem 0 0;
}
.reassurance-subheading-number {
  align-items: center;
  background: #ffc300;
  border: 2px solid #fff;
  border-radius: 0.75rem;
  display: flex;
  font-size: 0.75rem;
  height: 1.5rem;
  justify-content: center;
  left: 50%;
  padding: 0.5rem 0.5rem;
  position: absolute;
  top: -0.75rem;
  transform: translateX(-50%);
}
.reassurance-text {
  font-weight: 800;
  margin: 0 auto 1rem;
  text-align: center;
}
@media screen and (max-width: 359px) {
  .reassurance-text {
    font-size: 4vw;
  }
}
.reassurance-text-marker {
  background: linear-gradient(transparent 50%, #ffc300 50%);
  padding: 0 0.5rem 0.25rem;
}
.reassurance-text-min {
  font-size: 0.6875rem;
}
.reassurance-text-yen {
  font-size: 0.75rem;
}
.reassurance-text-asterisk {
  bottom: -1px;
  font-size: 0.75rem;
  position: relative;
}
.reassurance-text-asterisk-notice {
  display: inline-block;
  font-size: 0.625rem;
}
.reassurance-subtext {
  font-size: 0.8125rem;
  font-weight: 700;
  margin: 1.5rem auto 2.5rem;
  text-align: center;
}
.reassurance-item-cs-container {
  position: relative;
}
@media screen and (min-width: 600px) {
  .reassurance-item-cs-container {
    max-width: 400px;
    margin: 0 auto;
  }
}
.reassurance-item-cs-frame {
  border: 2px solid #b6b6b6;
  border-radius: 20px;
  font-size: 0.75rem;
  margin-top: 10px;
  padding: 20px;
}
@media screen and (max-width: 374px) {
  .reassurance-item-cs-frame {
    font-size: 2.933vw;
  }
}
.reassurance-item-cs-heading {
  align-items: center;
  background: #fff;
  display: flex;
  font-size: 1.0625rem;
  font-weight: 700;
  justify-content: center;
  left: 50%;
  padding: 0 1rem;
  position: absolute;
  top: -0.75rem;
  transform: translateX(-50%);
  width: 290px;
}
.reassurance-item-cs-heading::before,
.reassurance-item-cs-heading::after {
  content: '';
  display: inline-block;
  height: 32px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
}
.reassurance-item-cs-heading::before {
  background: url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/1fc851ad117d4cbeacacea7e1139efe0/icon-speach-left.svg") no-repeat 0 0/contain;
  left: -1rem;
}
.reassurance-item-cs-heading::after {
  background: url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/7fcf0845658b40f89a241283ff0843b8/icon-speach-right.svg") no-repeat 0 0/contain;
  right: -1rem;
}
.reassurance-item-cs-list {
  font-size: 0.8125rem;
  font-weight: 700;
  margin: 0 auto 0.5rem;
  padding: 0 0 0 1.75rem;
}
@media screen and (max-width: 374px) {
  .reassurance-item-cs-list {
    font-size: 3.467vw;
  }
}
.reassurance-item-cs-list-item {
  position: relative;
}
.reassurance-item-cs-list-item::before {
  background: url("https://images.microcms-assets.io/assets/576cfa02bd414638bb533bb0b49429bb/908c65f63f1348798e128f4240f6065a/icon-cs-checkmark.svg") no-repeat 0 0/contain;
  content: '';
  display: inline-block;
  height: 17px;
  left: -1.75rem;
  position: absolute;
  top: 50%;
  transform: translateY(-55%);
  width: 22px;
}
.reassurance-item-cs-thumbnail {
  margin-bottom: -40px;
  position: relative;
  text-align: right;
  top: -40px;
}
@-moz-keyframes move-y {
  from {
    transform: translateY(-5px);
  }
  to {
    transform: translateY(5px);
  }
}
@-webkit-keyframes move-y {
  from {
    transform: translateY(-5px);
  }
  to {
    transform: translateY(5px);
  }
}
@-o-keyframes move-y {
  from {
    transform: translateY(-5px);
  }
  to {
    transform: translateY(5px);
  }
}
@keyframes move-y {
  from {
    transform: translateY(-5px);
  }
  to {
    transform: translateY(5px);
  }
}

/*# sourceMappingURL=lp-1.css.map */