.hidden {
  display: none;
}

#url1,
#url2 {
  height: 70px;
}

#url1 {
  padding-top: 7px;
  padding-bottom: 7px;
}

#url2 {
  padding-top: 2px;
  padding-bottom: 2px;
}

#url1 img,
#url2 img {
  height: 100%;
}

.car-life,
.bosai-service,
.wellness-service,
.pickup-service {
  text-align: center;
  padding:0 79px;
  background: #FFFFFF 0% 0% no-repeat padding-box;
  box-shadow: 0px 4px 12px #00000029;
  border-radius: 8px;
  margin-bottom: 30px;
}

.bosai-service,
.wellness-service,
.pickup-service {
  margin-bottom: 42px;
}

.bosai-service + .bosai-service {
  margin-top: 40px;
}

.service-new {
  position: relative;
}

.service-new::before {
  position: absolute;
  top: -20px;
  right: -5px;
  width: 70px;
  height: 70px;
  background-image: url(https://d18f657670wm8u.cloudfront.net/benefits/riyo_el/common/images/icon_new_circle.png?20240918);
  background-size: 100%;
  content: '';
}

.pickup-service {
  margin-top: 42px;
}

.car-life-normaltxt,
.bosai-service-normaltxt,
.wellness-service-normaltxt,
.pickup-service-normaltxt {
  font-size:13px;
}

.car-life-btn,
.bosai-service-btn,
.wellness-service-btn,
.pickup-service-btn {
  margin-top:20px;
}

.btn-area{
  margin:7px 0 30px;
  background: #3DB750 0% 0% no-repeat padding-box;
  display: inline-block;
  color:white;
  border-radius: 40px;
}

.btn-area .car-life-text,
.btn-area .bosai-service-text,
.btn-area .wellness-service-text,
.btn-area .pickup-service-text {
  position: relative;
  padding: 14px 97px;
}

.btn-area .pickup-service-text {
  padding: 12px 89px;
}

.btn-area .car-life-text.contractor-only,
.btn-area .bosai-service-text.contractor-only,
.btn-area .wellness-service-text.contractor-only,
.btn-area .pickup-service-text.contractor-only {
  padding: 14px 33px;
}

.car-life>.car-life-text,
.bosai-service>.bosai-service-text,
.wellness-service>.wellness-service-text,
.pickup-service>.pickup-service-text {
  margin: 15px 0 12px;
  font-size: 18px;
}

.pickup-service>.pickup-service-text {
  margin-bottom: 10px;
}

.pickup-service-benefits-text {
  max-width: 280px;
  margin: 10px auto;
  font-size: 15px;
  color: #D60000;
  background: #FFF2F2;
}

.car-life-map,
.bosai-service-media,
.wellness-service-media,
.pickup-service-media {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 20px;
}

.pickup-service-media {
  margin-top: 0;
}

.map-dummy{
  width:16px;
  height:10px;
}
.map-image{
  width:37%;
  height:100%;
}

.bnr-swiper{
  margin-top: 29px;
}

.bnr-swiper .swiper{
  max-width: 670px;
}

.bnr-swiper .swiper-pagination.swiper-pagination{
  bottom: -26px;
}

.bnr-swiper .swiper1 {
  max-width: 317px;
}

.swiper-pagination_2 {
  position: absolute;
  text-align: center;
  transition: .3s opacity;
  transform: translate3d(0,0,0);
  z-index: 10;
  bottom: -26px!important;
}

.swiper-pagination_3 {
  position: absolute;
  text-align: center;
  transition: .3s opacity;
  transform: translate3d(0,0,0);
  z-index: 10;
  bottom: -26px!important;
}

.swiper-pagination_4 {
  position: absolute;
  text-align: center;
  transition: .3s opacity;
  transform: translate3d(0,0,0);
  z-index: 10;
  bottom: -26px!important;
}

.swiper-pagination_5 {
  position: absolute;
  text-align: center;
  transition: .3s opacity;
  transform: translate3d(0,0,0);
  z-index: 10;
  bottom: -26px!important;
}

.swiper-pagination-bullet{
  width:11px !important;
  height:11px !important;
}
.swiper-pagination-bullet-active{
  background-color:#666666 !important;
}

.car-life-logo .logo-img,
.bosai-service-logo .logo-img,
.wellness-service-logo .logo-img,
.pickup-service-logo .logo-img {
  max-width: 55%;
  height:auto;
  margin-top: 30px;
}

.car-life-logo .heading-lv4,
.bosai-service-logo .heading-lv4,
.wellness-service-logo .heading-lv4,
.pickup-service-logo .heading-lv4 {
  margin-bottom: 15px;
}

.bosai-service-logo {
  padding-top: 30px;
}

.bosai-service-logo .logo-img {
  margin-top: 0px;
}

.pickup-service-logo .heading-lv4 {
  margin-top: 10px;
}

.wellness-service-bubble {
  position: relative;
  margin-bottom: 13px;
  padding-top: 30px;
}

.wellness-service-bubble::after {
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 122px;
  height: 6px;
  background-image: url("https://d18f657670wm8u.cloudfront.net/benefits/riyo_el/common/images/icon_bubble.svg?20231227");
  transform: translateX(-50%);
  content: "";
}

.wellness-service-bubble .icon-img {
  margin-right: 3px;
  vertical-align: middle;
}

.finance-service,
.carlife-service {
  text-align: center;
  padding: 0 53px;
  background: #FFFFFF 0% 0% no-repeat padding-box;
  box-shadow: 0px 4px 12px #00000029;
  border-radius: 8px;
  margin-bottom: 30px;
}

.finance-service-logo img {
  width: 41px;
  height: 41px;
  margin-top: 32px;
}

.carlife-service-logo {
  margin-bottom: 20px;
}

.carlife-service-logo img {
  margin-top: 32px;
}

.finance-service-text-contents,
.carlife-service-text-contents {
  text-align: left;
}

.carlife-service-text-contents {
  width: 160px;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
}

.finance-service>.finance-service-text,
.carlife-service>.carlife-service-text {
  margin: 20px 0 12px;
  font-size: 16px;
}

.carlife-service-ontext {
  text-align: center;
  font-size: 12px;
  font-weight: bold;
}

.finance-service-btn,
.carlife-service-btn {
  margin-top: 20px;
}

.finance-service-btn .btn-area,
.carlife-service-btn .btn-area {
  margin: 7px 0 30px;
  width: 100%;
  background: #E3A600 0% 0% no-repeat padding-box;
  display: inline-block;
  color: white;
  border-radius: 30px;
  max-width: 380px;
}

.finance-service-btn .btn-area .finance-service-text,
.carlife-service-btn .btn-area .carlife-service-text {
  position: relative;
  padding: 11px;
}

.carlife-service-content {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.pr-card {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}

img.pr-card-img {
  margin-bottom: 10px;
  width: 100%;
}

.btn_icon_blank {
  position: absolute;
  top: 32%;
  right: 10%;
}

.column.type2 {
  gap: 16px;
  width: 100%;
  margin: 0 auto;
  margin-top: 40px;
}

.column.type2 .column-col-2 {
  flex: 0 0 48.8%;
  margin-bottom: 0;
  padding: 0 22px;
}

@media screen and (max-width:280px) {
  #url1 img,
  #url2 img {
    height: auto;
  }
}

@media screen and (max-width:767px) {
  .column.type2 {
    flex-flow: row wrap;
    gap: 28px;
    margin-top: 25px;
  }

  .column.type2 .column-col-2 {
    flex: none;
  }

  .car-life,
  .bosai-service,
  .wellness-service,
  .pickup-service {
    padding:0 20px;
  }

  .bosai-service,
  .wellness-service,
  .pickup-service {
    margin-bottom: 56px;
  }

  .bosai-service + .bosai-service {
    margin-top: 25px;
  }

  .pickup-service-logo .heading-lv4 {
    margin-top: 5px;
  }

  .btn-area {
    width: 100%;
  }

  .btn-area .car-life-text,
  .btn-area .bosai-service-text,
  .btn-area .wellness-service-text,
  .btn-area .pickup-service-text {
    padding: 14px 31px;
    font-size: 16px;
  }

  .btn-area .car-life-text.contractor-only,
  .btn-area .bosai-service-text.contractor-only,
  .btn-area .wellness-service-text.contractor-only,
  .btn-area .pickup-service-text.contractor-only {
    padding: 14px 31px;
  }

  .car-life>.car-life-text {
    text-align: left;
    font-size: 15px;
  }

  .bosai-service>.bosai-service-text,
  .wellness-service>.wellness-service-text,
  .pickup-service>.pickup-service-text {
    font-size: 15px;
  }

  .pickup-service>.pickup-service-text {
    font-size: 12px;
    text-align: center;
  }

  .map-dummy{
    width:5px;
    height:10px;
  }

  .map-image{
    width:48%;
    height:100%;
  }

  .car-life-logo .logo-img,
  .bosai-service-logo .logo-img,
  .wellness-service-logo .logo-img,
  .pickup-service-logo .logo-img {
    max-width: 70%;
  }

  .bnr-swiper .swiper{
    max-width: 100%;
    margin:0 auto;
  }

  .finance-service,
  .carlife-service {
    padding: 0 22px;
    margin-bottom: 0;
  }

  .riyo_el .top-content-header {
    padding: 40px 0 0;
  }
  .pr-card-text {
    font-size: 4vw;
  }

  .service-new::before {
    top: -20px;
    right: -5px;
    width: 50px;
    height: 50px;
  }
}

.gasoline-api {
  width: 320px;
  margin: 0 auto;
  padding: 10px;
}

.gasoline-price {
  position: relative;
  padding-top: 30px;
}

.gasoline-logo {
  width: 380px;
  margin: 0 auto;
  padding: 14px 47px;
  background-color: #FFF5E8;
}

.gasoline-logo .logo-img {
  margin-top: 0;
}

.gasoline-title {
  font-size: 22px;
  font-weight: bold;
}

.gasoline-price .car-life-btn {
  margin-right: auto;
  margin-left: auto;
}

.gasoline-place {
  width: 300px;
  bottom: 105px;
}

.gasoline-map {
  width: 380px;
  bottom: 0;
}

.gasoline-price .btn-area {
  margin: 0;
}

.gasoline-price .car-life-text {
  padding: 14px 86px;
}

.gasoline-map .car-life-text {
  padding: 14px 78px;
}

.gasoline-map .btn-area {
  margin-bottom: 30px;
}

@media screen and (max-width:787px) {
  .gasoline-logo {
    width: 100%;
    padding: 10px 0;
  }

  .gasoline-logo .logo-img {
    width: 91px;
  }

  .gasoline-title {
    font-size: 18px;
  }

  .gasoline-map .btn-area .btn_icon_blank {
    right: 7%;
  }

  .gasoline-api {
    width: 100%;
  }

  .gasoline-place {
    width: 220px;
    bottom: 105px;
  }

  .gasoline-map {
    width: 290px;
  }

  .gasoline-map .car-life-text,
  .gasoline-price .car-life-text {
    padding: 14px 46px;
    font-size: 14px;
  }
}

@media screen and (min-width:788px) {
  .banner-section .slick-slide {
    width: auto!important;
  }
}

@media screen and (max-width:375px) {
  .gasoline-map,
  .gasoline-place {
    width: 100%;
  }
}


/* SOMPO JAPAN逕ｨ繝舌リ繝ｼ */
.is-sompo .card-button,
.is-sompo a {
  box-shadow: 0 4px 12px rgba(0,0,0,.16);
}
.is-sompo a:hover {
  opacity: 0.65;
}

.gasoline-api {
  color: #343a40;
}

.gas-title {
  margin-bottom: 0.5rem;
  line-height: 1.1;
  font-size: 16px;
}

.my-2 {
  margin-top: 0.5rem!important;
  margin-bottom: 0.5rem!important;
  font-size: 11px;
}

.pref-price-panel {
  position: relative;
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.col-4 {
  flex: 0 0 33.33333%;
  max-width: 33.33333%;
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.gasoline-api label {
  display: inline-block;
  margin-bottom: 0.5rem;
  margin-top: 22px;
  font-size: 12px;
}

.px-1 {
  padding-right: 0.25rem!important;
  padding-left: 0.25rem!important;
}

.pref-price-panel .average .price {
  margin-top: 10px;
  font-size: 24px;
  font-weight: 500;
}

.pref-price-panel .average .option {
  margin-top: 18px;
  font-size: 14px;
  font-weight: 500;
}

.green {
  color: #28a745;
}

.red {
  color: #dc3545;
}

.gasLogo {
  margin-top: 2.5rem;
  text-align: center;
}

.gasLogo a {
  color: #0075c2;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  background-color: transparent;
}

.gasLogo .logo {
  height: 2.4rem;
  margin-top: -5px;
}