@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
p,
span {
  font-weight: inherit;
}

@font-face {
  font-family: "NotoSansJP";
  font-style: normal;
  font-weight: 400;
  src: local("Noto Sans CJK JP"), local("NotoSansJP-Regular"), local("NotoSansJP-Regular"), url("/font/NotoSansJP-Regular.woff2") format("woff2"), url("/font/NotoSansJP-Regular.woff") format("woff");
}
@font-face {
  font-family: "NotoSansJP";
  font-style: normal;
  font-weight: 700;
  src: local("NotoSansJP-Bold"), local("NotoSansJP-Bold"), url("/font/NotoSansJP-Bold.woff2") format("woff2"), url("/font/NotoSansJP-Bold.woff") format("woff");
}
@font-face {
  font-family: "NotoSansJP";
  font-style: normal;
  font-weight: 900;
  src: local("NotoSansJP-Black"), local("NotoSansJP-Black"), url("/font/NotoSansJP-Black.woff2") format("woff2"), url("/font/NotoSansJP-Black.woff") format("woff");
}
html .all-wrapper {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */
  word-break: normal;
  -moz-tab-size: 4;
  -o-tab-size: 4;
     tab-size: 4;
}

body .all-wrapper {
  font-family: "NotoSansJP", "Noto Sans", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
  line-height: 1.5;
  contain: paint;
  color: #000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  text-align: left;
}
@media screen and (min-width: 767px) {
  body .all-wrapper {
    font-size: 16px;
  }
}
body .all-wrapper * {
  box-sizing: border-box;
}

.all-wrapper {
  position: relative;
  /* 一部ブラウザで消えなかった場合は以下も追記 */
}
.all-wrapper img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
.all-wrapper summary {
  display: block;
  list-style: none;
}
.all-wrapper summary::-webkit-details-marker {
  display: none;
}
.all-wrapper input {
  line-height: 1;
}

@media screen and (min-width: 321px) {
  .br-sp {
    display: block;
  }
}
@media screen and (min-width: 767px) {
  .br-sp {
    display: none;
  }
}

.br-pc {
  display: none;
}
@media screen and (min-width: 767px) {
  .br-pc {
    display: block;
  }
}

.disp-sp {
  display: block;
}
@media screen and (min-width: 767px) {
  .disp-sp {
    display: none;
  }
}

.disp-pc {
  display: none;
}
@media screen and (min-width: 767px) {
  .disp-pc {
    display: block;
  }
}

.hidden {
  overflow: hidden;
  position: absolute;
  top: -10px;
  width: 1px;
  height: 1px;
  margin: 0 !important;
  padding: 0 !important;
}

.l-contents {
  padding-right: 24px;
  padding-left: 24px;
}
@media screen and (min-width: 767px) {
  .l-contents {
    padding: 0;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
  }
}

.u-fwb {
  font-weight: bold;
}

.u-db {
  display: block;
}

.u-w100 {
  width: 100%;
}

.u-tac {
  text-align: center;
}

.u-indent {
  padding-left: 1em;
  text-indent: -1em;
}

.u-break-word {
  word-break: break-word;
}

.u-caution {
  color: #ff0000;
}

/* 全国 */
:root {
  --bg: #fff;
  --bgBlack: #000;
  --text: #000;
  --textwhite: #fff;
  --border: #ccc;
  --hover: #ee762f;
  --font: "Noto Sans JP", sans-serif;
  --campaign: #fdf151;
  --supplies: #c54000;
  /* SP */
  --fz10: 2.66vw;
  --fz11: 2.93vw;
  --fz12: 3.2vw;
  --fz14: 3.73vw;
  --fz16: 4.26vw;
  --fz18: 4.8vw;
  --fz20: 5.33vw;
  --fz24: 6.4vw;
  --fz30: 8vw;
  /* PC */
  --fz14pc: min(1.129vw, 14px);
  --fz16pc: min(1.29vw, 16px);
  --fz18pc: min(1.45vw, 18px);
  --fz20pc: min(1.66vw, 20px);
  --fz22pc: min(1.774vw, 22px);
  --fz24pc: min(1.935vw, 24px);
  --fz32: min(2.66vw, 32px);
  --fz40pc: min(3.2vw, 40px);
  --fz44pc: min(3.73vw, 44px);
}

.u-dib {
  display: inline-block;
}

.all-container {
  background: #ebebeb;
}

.ec-mv {
  background: var(--bg);
}
.ec-mv__inner {
  padding: 15px;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  max-width: 1240px;
}
@media screen and (min-width: 767px) {
  .ec-mv__inner {
    padding: 20px;
    border-radius: 16px;
    margin: auto;
  }
}

.all-section-wrapper {
  padding-bottom: 15px;
}
@media screen and (min-width: 767px) {
  .all-section-wrapper {
    padding-bottom: 40px;
    background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 5%);
  }
}

.section-block {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
@media screen and (min-width: 767px) {
  .section-block {
    gap: 20px;
  }
}

.section__inner {
  padding: 15px;
  background: var(--bg);
}
@media screen and (min-width: 767px) {
  .section__inner {
    background: var(--bg);
    margin: auto;
    max-width: 1240px;
    padding: 20px;
    overflow: hidden;
  }
}
@media screen and (min-width: 767px) {
  .section__inner.-catch {
    height: 17.4vw;
  }
}
.section__title {
  margin-bottom: 15px;
  font-size: var(--fz20);
  font-weight: bold;
  color: var(--text);
  line-height: 1.25;
  letter-spacing: -0.8px;
}
@media screen and (min-width: 767px) {
  .section__title {
    margin-bottom: 10px;
    font-size: var(--fz32);
    letter-spacing: -0.96px;
  }
}

.grid {
  display: grid;
  grid-column: 1/-1;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}
@media screen and (min-width: 767px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
}

.campaign-grid {
  display: grid;
  grid-column: 1/-1;
  grid-template-columns: repeat(1, 1fr);
  gap: 15px;
}
@media screen and (min-width: 767px) {
  .campaign-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
}

.grid-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 165/300;
}
@media screen and (min-width: 767px) {
  .grid-item {
    border-radius: 16px;
    aspect-ratio: 286/337;
  }
}
.grid-item.-column2 {
  grid-column: 1/-1; /* 3行目 - 画面幅いっぱい */
  aspect-ratio: 345/200;
}
@media screen and (min-width: 767px) {
  .grid-item.-column2 {
    aspect-ratio: 590/337;
    grid-column: 1/3;
  }
}
.grid-item.-column2 .-no-bg {
  aspect-ratio: 345/80;
}
@media screen and (min-width: 767px) {
  .grid-item.-column2 .-no-bg {
    aspect-ratio: 590/133;
  }
}
.grid-item.-column2 .grid-item__tag {
  bottom: 4%;
}
@media screen and (min-width: 767px) {
  .grid-item.-column2 .grid-item__tag {
    bottom: 3%;
  }
}
.grid-item.-column4 {
  grid-column: 1/-1; /* 3行目 - 画面幅いっぱい */
  aspect-ratio: 345/200;
}
@media screen and (min-width: 767px) {
  .grid-item.-column4 {
    aspect-ratio: 1220/337;
  }
}
.grid-item.-column4 .grid-item__tag {
  bottom: 4%;
}
@media screen and (min-width: 767px) {
  .grid-item.-column4 .grid-item__tag {
    right: 2%;
    bottom: 3%;
  }
}
.grid-item__link {
  cursor: pointer;
  border-radius: 8px;
  position: relative;
  display: block;
  text-decoration: none;
  height: 100%;
  color: var(--text) !important;
  transition: 0.3s ease;
  width: 100%;
}
.grid-item__link:hover {
  text-decoration: none;
  color: var(--text);
}
.grid-item__link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  border: 5px solid transparent;
  transition: border-color 0.3s ease;
  pointer-events: none;
  box-sizing: border-box;
  z-index: 10;
}
@media screen and (min-width: 767px) {
  .grid-item__link {
    border-radius: 16px;
  }
}
.grid-item__title {
  border-radius: 8px 8px 0 0;
  position: relative;
  z-index: 1;
  background-color: #e9d5c1;
  padding: 16px 15px;
  z-index: 2;
  font-size: var(--fz14);
  font-weight: bold;
  letter-spacing: 0.28px;
  aspect-ratio: 165/100;
}
@media screen and (min-width: 767px) {
  .grid-item__title {
    aspect-ratio: 285/133;
    border-radius: 16px 16px 0 0;
    font-size: var(--fz22pc);
  }
}
.grid-item__title.-no-bg {
  background-color: transparent;
  color: #fff;
}
.grid-item__title.-shadow {
  color: var(--textwhite);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.5) 75%, rgba(0, 0, 0, 0) 100%);
  aspect-ratio: 345/56;
}
@media screen and (min-width: 767px) {
  .grid-item__title.-shadow {
    aspect-ratio: 590/150;
  }
}
.grid-item__title.-campaign {
  border-radius: 8px 0 0 8px;
  background-color: #da3931;
  color: var(--campaign);
  width: 50vw;
  height: 100%;
}
@media screen and (min-width: 767px) {
  .grid-item__title.-campaign {
    aspect-ratio: 590/150;
  }
}
.grid-item__title.-ellipsis span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.grid-item__bgWrap {
  position: relative;
  overflow: hidden;
  height: 100%;
}
.grid-item__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.5s ease;
  z-index: 1;
}
.grid-item__tag {
  position: absolute;
  z-index: 1;
  bottom: 2%;
  right: 2%;
  background-color: var(--bg);
  color: var(--text);
  display: inline-flex;
  padding: 4px 8px;
  padding: 1% 3%;
  justify-content: center;
  align-items: center;
  gap: 2px;
  border-radius: 99px;
  text-align: center;
  font-size: var(--fz12);
  line-height: 1.7;
  letter-spacing: 0.24px;
  font-family: var(--font);
  font-weight: 500;
}
@media screen and (min-width: 767px) {
  .grid-item__tag {
    bottom: 3%;
    right: 4%;
    padding: 3px 12px;
    font-size: var(--fz14pc);
  }
}
.grid-item__tag::before {
  content: "";
  display: inline-block;
  width: 4vw;
  height: 4vw;
  background: url("../_images/book_ribbon.svg") no-repeat center center;
  background-size: contain;
}
@media screen and (min-width: 767px) {
  .grid-item__tag::before {
    width: 20px;
    height: 20px;
    line-height: 1.7;
  }
}
.grid-item__tag.-column::before {
  background: url("../_images/book_ribbon.svg") no-repeat center center;
  background-size: contain;
}
.grid-item__tag.-app::before {
  background: url("../_images/smartphone.svg") no-repeat center center;
  background-size: contain;
}
.grid-item__tag.-movie::before {
  background: url("../_images/movie.svg") no-repeat center center;
  background-size: contain;
}
.grid-item__tag.-service::before {
  background: url("../_images/service.svg") no-repeat center center;
  background-size: contain;
}
.grid-item__tag.-product::before {
  background: url("../_images/product.svg") no-repeat center center;
  background-size: contain;
}
.grid-item__tag.-racing::before {
  background: url("../_images/racing.svg") no-repeat center center;
  background-size: contain;
}
.grid-item__tag.-garage::before {
  background: url("../_images/garage.svg") no-repeat center center;
  background-size: contain;
}
.grid-item__tag.-campaign::before {
  background: url("../_images/campaign.svg") no-repeat center center;
  background-size: contain;
}
.grid-item__tag.-feature::before {
  background: url("../_images/feature.svg") no-repeat center center;
  background-size: contain;
}
.grid-item__tag.-mobility::before {
  background: url("../_images/mobility.svg") no-repeat center center;
  background-size: contain;
}

@media (hover: hover) {
  .grid-item__link:hover {
    text-decoration: none;
    color: var(--text);
  }
  .grid-item__link:hover::before {
    border-color: var(--hover);
  }
  .grid-item__link:hover .grid-item__tag {
    background-color: var(--hover);
  }
}
.slide-grid-wrapper {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.product-item {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media screen and (min-width: 767px) {
  .product-item {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }
}
@media screen and (min-width: 767px) {
  .product-item__inner {
    height: 100%;
  }
}
.product-item__item {
  border: 5px solid var(--supplies);
}
@media screen and (min-width: 767px) {
  .product-item__link:hover {
    text-decoration: none !important;
  }
}
.product-item__imgBox {
  position: relative;
}
.product-item__img {
  display: block;
  margin: auto;
}
.product-item__more {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 34%;
  display: flex;
  align-items: center;
  padding: 7px 0 7px 13px;
  border-radius: 999px 0 0 999px;
  background: var(--supplies);
  z-index: 1;
}
.product-item__textBox {
  display: flex;
  flex-direction: column;
  min-height: 184px;
  min-height: auto;
  padding: 16px 11px;
  overflow: hidden;
  justify-content: flex-end;
}
@media screen and (min-width: 767px) {
  .product-item__textBox {
    min-height: 184px;
  }
}
.product-item__name {
  font-size: min(5.33vw, 20px);
  color: #000;
  line-height: 1.25;
  letter-spacing: -1px;
  font-weight: bold;
}
.product-item__price {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  margin-top: 16px;
  display: flex;
  align-items: baseline;
  font-size: min(12.8vw, 48px);
  letter-spacing: -2.4px;
  color: #e70012;
  line-height: 0;
}
.product-item__yen {
  margin-left: 3px;
}

/*----------------------
/*  各画像設定・各グリッド設定
---------------------- */
@media screen and (min-width: 767px) {
  .grid-item.assessment-movie {
    grid-column: 1/3;
  }
}
.grid-item.assessment-movie .grid-item__link {
  background: url("../_images/assessment.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
@media screen and (min-width: 767px) {
  .grid-item.assessment-movie .grid-item__link {
    grid-column: 1/3; /* 2行目右 - 2カラム分の幅 */
  }
}

.grid-item.selling .grid-item__title {
  background: #e9ecf1;
  color: var(--text);
}
.grid-item.selling .grid-item__bg {
  background: url("../_images/selling_sp.png") no-repeat;
  background-size: contain;
}
@media screen and (min-width: 767px) {
  .grid-item.selling .grid-item__bg {
    background: url("../_images/selling_pc.png") no-repeat;
    background-size: contain;
  }
}

.grid-item.selling-timing .grid-item__title {
  background: #000000;
  color: var(--textwhite);
}
.grid-item.selling-timing .grid-item__bg {
  background: url("../_images/selling_timing_sp.png") no-repeat;
  background-size: contain;
}
@media screen and (min-width: 767px) {
  .grid-item.selling-timing .grid-item__bg {
    background: url("../_images/selling_timing_pc.png") no-repeat;
    background-size: contain;
  }
}

@media screen and (min-width: 767px) {
  .grid-item.free-inspection-movie {
    grid-column: 1/3;
  }
}
.grid-item.free-inspection-movie .grid-item__link {
  background: url("../_images/free_inspection.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
@media screen and (min-width: 767px) {
  .grid-item.free-inspection-movie .grid-item__link {
    grid-column: 1/3;
  }
}

.grid-item.damage-tire .grid-item__title {
  background: #d3d0cb;
  color: var(--text);
}
.grid-item.damage-tire .grid-item__bg {
  background: url("../_images/damage_tire_sp.png") no-repeat;
  background-size: contain;
}
@media screen and (min-width: 767px) {
  .grid-item.damage-tire .grid-item__bg {
    background: url("../_images/damage_tire_pc.png") no-repeat;
    background-size: contain;
  }
}
/* --- 7/11修正 battery-dead　→ cracks-tire --- */
.grid-item.cracks-tire .grid-item__title {
  background: #d3d0cb;
  color: var(--text);
}
.grid-item.cracks-tire .grid-item__bg {
  background: url("../_images/cracks_tire_sp.png") no-repeat;
  background-size: contain;
}
@media screen and (min-width: 767px) {
  .grid-item.cracks-tire .grid-item__bg {
    background: url("../_images/cracks_tire_pc.png") no-repeat;
    background-size: contain;
  }
}
/* --- 7/11修正ここまで --- */

@media screen and (min-width: 767px) {
  .grid-item.purchase-sales {
    grid-column: 1/3;
  }
}
.grid-item.purchase-sales .grid-item__link {
  background: url("../_images/purchase_sales.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
@media screen and (min-width: 767px) {
  .grid-item.purchase-sales .grid-item__link {
    grid-column: 1/3;
  }
}

.grid-item.vehicle-inspection-cost .grid-item__title {
  background: #000;
  color: var(--textwhite);
}
.grid-item.vehicle-inspection-cost .grid-item__bg {
  background: url("../_images/vehicle_inspection_cost_sp.png") no-repeat;
  background-size: contain;
}
@media screen and (min-width: 767px) {
  .grid-item.vehicle-inspection-cost .grid-item__bg {
    background: url("../_images/vehicle_inspection_cost_pc.png") no-repeat;
    background-size: contain;
  }
}

.grid-item.when-to-get .grid-item__title {
  background: #000;
  color: var(--textwhite);
}
.grid-item.when-to-get .grid-item__bg {
  background: url("../_images/when_to_get_sp.png") no-repeat;
  background-size: contain;
}
@media screen and (min-width: 767px) {
  .grid-item.when-to-get .grid-item__bg {
    background: url("../_images/when_to_get_pc.png") no-repeat;
    background-size: contain;
  }
}

.grid-item.campaign {
  aspect-ratio: 345/123;
}
@media screen and (min-width: 767px) {
  .grid-item.campaign {
    aspect-ratio: 285/337;
  }
}
.grid-item.campaign .grid-item__bg {
  background: url("../_images/cam_vehicle_inspection.png") no-repeat;
  background-size: contain;
}
@media screen and (min-width: 767px) {
  .grid-item.campaign .grid-item__bg {
    aspect-ratio: 285/337;
  }
}

.grid-item.disabled {
  border-radius: 8px 0 8px 8px;
}
@media screen and (min-width: 767px) {
  .grid-item.disabled {
    border-radius: 16px 0 16px 16px;
  }
}

.grid-campaignContent {
  display: flex;
}
@media screen and (min-width: 767px) {
  .grid-campaignContent {
    flex-direction: column;
    height: 100%;
  }
}
.grid-campaignContent__campaignTitle {
  border-radius: 8px 0 0 8px;
  position: relative;
  z-index: 1;
  padding: 16px;
  z-index: 2;
  font-size: var(--fz14);
  font-weight: bold;
  background-color: #da3931;
  color: var(--campaign);
  width: 50vw;
}
@media screen and (min-width: 767px) {
  .grid-campaignContent__campaignTitle {
    border-radius: 16px 16px 0 0;
    font-size: var(--fz22pc);
    width: 100%;
    aspect-ratio: 285/133;
  }
}
.grid-campaignContent__img {
  display: block;
  width: 50vw;
  overflow: hidden;
  border-radius: 0 8px 8px 0;
  border-left: none;
}
.grid-campaignContent__img.-border {
  border: 1px solid var(--border);
}
@media screen and (min-width: 767px) {
  .grid-campaignContent__img {
    border-top: none;
    border-radius: 0 0 16px 16px;
  }
}

.campaign-date {
  display: inline-flex;
  align-items: center;
  font-size: var(--fz12);
  font-weight: bold;
  line-height: 1.4;
}
@media screen and (min-width: 767px) {
  .campaign-date {
    font-size: var(--fz20pc);
  }
}
.campaign-date__period {
  padding: 1px 6px 1px 6px;
  display: block;
  background: var(--bgBlack);
  color: var(--textwhite);
}
.campaign-date__date {
  padding: 1px 6px 1px 6px;
  display: block;
  color: var(--text);
  background: var(--campaign);
}

.comingSoonTag {
  pointer-events: none;
  cursor: none;
  position: relative;
  background: rgba(0, 0, 0, 0.4);
}
.comingSoonTag::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: url(../_images/comming_soon.png), rgba(0, 0, 0, 0.4);
  background-repeat: no-repeat;
  background-size: 80px 81px, cover;
  background-position: top right, center;
  z-index: 10;
}
@media screen and (min-width: 767px) {
  .comingSoonTag::after {
    background-size: 100px 101px, cover;
  }
}

.endTag {
  pointer-events: none;
  cursor: none;
  position: relative;
  background: rgba(0, 0, 0, 0.4);
}
.endTag::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: url(../_images/end.png), rgba(0, 0, 0, 0.4);
  background-repeat: no-repeat;
  background-size: 80px 81px, cover;
  background-position: top right, center;
  z-index: 10;
}
@media screen and (min-width: 767px) {
  .endTag::after {
    background-size: 100px 101px, cover;
  }
}

.youtube-player {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 100;
}

@media screen and (min-width: 767px) {
  .grid-item.synchroweather {
    grid-column: 1/3;
  }
}
.grid-item.synchroweather .grid-item__title {
  font-size: var(--fz16);
}
@media screen and (min-width: 767px) {
  .grid-item.synchroweather .grid-item__title {
    font-size: var(--fz22pc);
  }
}
.grid-item.synchroweather .grid-item__link {
  background: url("../_images/synchroweather_sp.png") no-repeat;
  background-size: contain;
  background-position: center;
}
@media screen and (min-width: 767px) {
  .grid-item.synchroweather .grid-item__link {
    background: url("../_images/synchroweather_pc.png") no-repeat;
    background-size: contain;
    background-position: center;
  }
}

@media screen and (min-width: 767px) {
  .grid-item.camSummer {
    grid-column: 1/3;
  }
}
.grid-item.camSummer .grid-item__title {
  font-size: var(--fz16);
}
@media screen and (min-width: 767px) {
  .grid-item.camSummer .grid-item__title {
    font-size: var(--fz22pc);
  }
}
.grid-item.camSummer .grid-item__link {
  background: url("../_images/cam_summer.jpg") no-repeat;
  background-size: contain;
  background-position: center;
}

@media screen and (min-width: 767px) {
  .grid-item.switch {
    grid-column: 3/5;
  }
}
.grid-item.switch .grid-item__title {
  font-size: var(--fz16);
}
@media screen and (min-width: 767px) {
  .grid-item.switch .grid-item__title {
    font-size: var(--fz22pc);
  }
}
.grid-item.switch .grid-item__link {
  background: url("../_images/cam_switch_sp.png") no-repeat;
  background-size: contain;
  background-position: center;
  border: 1px solid #dee;
}
@media screen and (min-width: 767px) {
  .grid-item.switch .grid-item__link {
    background: url("../_images/cam_switch_pc.png") no-repeat;
    background-size: contain;
    background-position: center;
  }
}

@media screen and (min-width: 767px) {
  .grid-item.comfort-goods {
    grid-column: 1/-1;
    aspect-ratio: 1220/235;
  }
}
.grid-item.comfort-goods .grid-item__link {
  background: url("../_images/comfort_goods_sp.png") no-repeat;
  background-size: contain;
  background-position: center;
}
@media screen and (min-width: 767px) {
  .grid-item.comfort-goods .grid-item__link {
    background: url("../_images/comfort_goods_pc.png") no-repeat;
    background-size: cover;
    background-position: center;
  }
}

@media screen and (min-width: 767px) {
  .grid-item.rear {
    grid-column: 1/-1;
    aspect-ratio: 1220/235;
  }
}
.grid-item.rear .grid-item__link {
  background: url("../_images/cam_rear_sp.jpg") no-repeat;
  background-size: contain;
  background-position: center;
}
@media screen and (min-width: 767px) {
  .grid-item.rear .grid-item__link {
    background: url("../_images/cam_rear_pc.jpg") no-repeat;
    background-size: cover;
    background-position: center;
  }
}

.feature-bnr {
  text-align: center;
}

@media screen and (min-width: 767px) {
  .grid-item.car-wash-goods {
    grid-column: 1/3;
  }
}
.grid-item.car-wash-goods .grid-item__title {
  letter-spacing: 0.32px;
}
@media screen and (min-width: 767px) {
  .grid-item.car-wash-goods .grid-item__title {
    font-size: var(--fz22pc);
  }
}
.grid-item.car-wash-goods .grid-item__link {
  background: url("../_images/img_car_wash_goods.png") no-repeat;
  background-size: contain;
  background-position: center;
}
@media screen and (min-width: 767px) {
  .grid-item.car-wash-goods .grid-item__link {
    grid-column: 3/5;
  }
}

@media screen and (min-width: 767px) {
  .grid-item.car-care {
    grid-column: 3/5;
  }
}
.grid-item.car-care .grid-item__title {
  letter-spacing: 0.32px;
}
@media screen and (min-width: 767px) {
  .grid-item.car-care .grid-item__title {
    font-size: var(--fz22pc);
  }
}
.grid-item.car-care .grid-item__link {
  background: url("../_images/carcare.png") no-repeat;
  background-size: contain;
  background-position: center;
}
@media screen and (min-width: 767px) {
  .grid-item.car-care .grid-item__link {
    grid-column: 3/5;
  }
}

@media screen and (min-width: 767px) {
  .grid-item.van-life {
    grid-column: 1/3;
  }
}
.grid-item.van-life .grid-item__title {
  letter-spacing: 0.32px;
}
@media screen and (min-width: 767px) {
  .grid-item.van-life .grid-item__title {
    font-size: var(--fz22pc);
  }
}
.grid-item.van-life .grid-item__link {
  background: url("../_images/img_van_life.png") no-repeat;
  background-size: contain;
  background-position: center;
}
@media screen and (min-width: 767px) {
  .grid-item.van-life .grid-item__link {
    grid-column: 1/3;
  }
}

@media screen and (min-width: 767px) {
  .grid-item.gordon-miller-goods {
    grid-column: 3/5;
  }
}
.grid-item.gordon-miller-goods .grid-item__title {
  letter-spacing: 0.32px;
}
@media screen and (min-width: 767px) {
  .grid-item.gordon-miller-goods .grid-item__title {
    font-size: var(--fz22pc);
  }
}
.grid-item.gordon-miller-goods .grid-item__link {
  background: url("../_images/img_gordon_miller_goods.png") no-repeat;
  background-size: contain;
  background-position: center;
}
@media screen and (min-width: 767px) {
  .grid-item.gordon-miller-goods .grid-item__link {
    grid-column: 3/5;
  }
}

@media screen and (min-width: 767px) {
  .grid-item.wiper {
    grid-column: 1/3;
  }
}
.grid-item.wiper .grid-item__title {
  letter-spacing: 0.32px;
}
@media screen and (min-width: 767px) {
  .grid-item.wiper .grid-item__title {
    font-size: var(--fz22pc);
  }
}
.grid-item.wiper .grid-item__link {
  background: url("../_images/img_wiper.png") no-repeat;
  background-size: contain;
  background-position: center;
}
@media screen and (min-width: 767px) {
  .grid-item.wiper .grid-item__link {
    grid-column: 1/3;
  }
}

@media screen and (min-width: 767px) {
  .grid-item.countermeasure-goods {
    grid-column: 3/5;
  }
}
.grid-item.countermeasure-goods .grid-item__title {
  letter-spacing: 0.32px;
}
@media screen and (min-width: 767px) {
  .grid-item.countermeasure-goods .grid-item__title {
    font-size: var(--fz22pc);
  }
}
.grid-item.countermeasure-goods .grid-item__link {
  background: url("../_images/img_countermeasure_goods.png") no-repeat;
  background-size: contain;
  background-position: center;
}
@media screen and (min-width: 767px) {
  .grid-item.countermeasure-goods .grid-item__link {
    grid-column: 3/5;
  }
}

@media screen and (min-width: 767px) {
  .grid-item.roof-box {
    grid-column: 1/3;
  }
}
.grid-item.roof-box .grid-item__title {
  letter-spacing: 0.32px;
}
@media screen and (min-width: 767px) {
  .grid-item.roof-box .grid-item__title {
    font-size: var(--fz22pc);
  }
}
.grid-item.roof-box .grid-item__link {
  background: url("../_images/img_roof_box.png") no-repeat;
  background-size: contain;
  background-position: center;
}
@media screen and (min-width: 767px) {
  .grid-item.roof-box .grid-item__link {
    grid-column: 1/3;
  }
}

@media screen and (min-width: 767px) {
  .grid-item.smartphone-goods {
    grid-column: 3/5;
  }
}
.grid-item.smartphone-goods .grid-item__title {
  letter-spacing: 0.32px;
}
@media screen and (min-width: 767px) {
  .grid-item.smartphone-goods .grid-item__title {
    font-size: var(--fz22pc);
  }
}
.grid-item.smartphone-goods .grid-item__link {
  background: url("../_images/img_smartphone_goods.png") no-repeat;
  background-size: contain;
  background-position: center;
}
@media screen and (min-width: 767px) {
  .grid-item.smartphone-goods .grid-item__link {
    grid-column: 3/5;
  }
}

@media screen and (min-width: 767px) {
  .grid-item.engine-oil-change {
    grid-column: 1/3; /* 2行目右 - 2カラム分の幅 */
  }
}
.grid-item.engine-oil-change .grid-item__title {
  letter-spacing: 0.32px;
}
@media screen and (min-width: 767px) {
  .grid-item.engine-oil-change .grid-item__title {
    font-size: var(--fz22);
  }
}
.grid-item.engine-oil-change .grid-item__link {
  background: url("../_images/engine_oil_change.png") no-repeat;
  background-size: contain;
  background-position: center;
}
@media screen and (min-width: 767px) {
  .grid-item.engine-oil-change .grid-item__link {
    grid-column: 3/5; /* 2行目右 - 2カラム分の幅 */
  }
}

.grid-item.engine-oil-introduction .grid-item__title {
  color: var(--text);
}
.grid-item.engine-oil-introduction .grid-item__link {
  background: #deddbf;
}
@media screen and (min-width: 767px) {
  .grid-item.engine-oil-introduction .grid-item__link {
    grid-column: 3/5; /* 2行目右 - 2カラム分の幅 */
  }
}
.grid-item.engine-oil-introduction .grid-item__bg {
  background: url("../_images/engine_oil_introduction_sp.png") no-repeat;
  background-size: contain;
}
@media screen and (min-width: 767px) {
  .grid-item.engine-oil-introduction .grid-item__bg {
    background: url("../_images/engine_oil_introduction_pc.png") no-repeat;
    background-size: contain;
  }
}

.grid-item.maint-pack .grid-item__title {
  background: #043491;
  color: var(--textwhite);
  letter-spacing: 0.32px;
}
.grid-item.maint-pack .grid-item__bg {
  background: url("../_images/maint_pack_sp.png") no-repeat;
  background-size: contain;
  background-position: top;
}
@media screen and (min-width: 767px) {
  .grid-item.maint-pack .grid-item__bg {
    background: url("../_images/maint_pack_pc.png") no-repeat;
    background-size: contain;
  }
}
.grid-item.maint-pack .grid-item__bgBottom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: #043491;
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 1;
  aspect-ratio: 165/37;
}
@media screen and (min-width: 767px) {
  .grid-item.maint-pack .grid-item__bgBottom {
    aspect-ratio: 285/54;
  }
}
.grid-item.maint-pack .grid-item__bgBottom .grid-item__tag {
  position: relative;
  bottom: auto;
}

.grid-item.glass-water-repellent .grid-item__link {
  background: url("../_images/glass_water_repellent_sp.png") no-repeat;
  background-size: contain;
  background-position: top;
}
@media screen and (min-width: 767px) {
  .grid-item.glass-water-repellent .grid-item__link {
    background: url("../_images/glass_water_repellent_pc.png") no-repeat;
    background-size: contain;
  }
}

.grid-item.water-repellent-coating .grid-item__link {
  background: url("../_images/water_repellent_coating_sp.png") no-repeat;
  background-size: contain;
  background-position: top;
}
@media screen and (min-width: 767px) {
  .grid-item.water-repellent-coating .grid-item__link {
    background: url("../_images/water_repellent_coating_pc.png") no-repeat;
    background-size: contain;
  }
}

@media screen and (min-width: 767px) {
  .grid-item.rain {
    grid-column: 3/5;
  }
}
.grid-item.rain .grid-item__title {
  letter-spacing: 0.32px;
}
@media screen and (min-width: 767px) {
  .grid-item.rain .grid-item__title {
    font-size: var(--fz22pc);
  }
}
.grid-item.rain .grid-item__link {
  background: url("../_images/rain.png") no-repeat;
  background-size: contain;
  background-position: center;
}
@media screen and (min-width: 767px) {
  .grid-item.rain .grid-item__link {
    grid-column: 3/5; /* 2行目右 - 2カラム分の幅 */
  }
}

@media screen and (min-width: 767px) {
  .grid-item.need-maintenance {
    grid-column: 1/3;
  }
}
.grid-item.need-maintenance .grid-item__link {
  background: url("../_images/need_maintenance.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
@media screen and (min-width: 767px) {
  .grid-item.need-maintenance .grid-item__link {
    grid-column: 3/5; /* 2行目右 - 2カラム分の幅 */
  }
}

.grid-item.reading-air-conditioner-inspection .grid-item__title {
  color: var(--text);
}
.grid-item.reading-air-conditioner-inspection .grid-item__link {
  background: #e3e7f6;
}
@media screen and (min-width: 767px) {
  .grid-item.reading-air-conditioner-inspection .grid-item__link {
    grid-column: 3/5; /* 2行目右 - 2カラム分の幅 */
  }
}
.grid-item.reading-air-conditioner-inspection .grid-item__bg {
  background: url("../_images/reading_air_conditioner_inspection_sp.png") no-repeat;
  background-size: contain;
}
@media screen and (min-width: 767px) {
  .grid-item.reading-air-conditioner-inspection .grid-item__bg {
    background: url("../_images/reading_air_conditioner_inspection_pc.png") no-repeat;
    background-size: contain;
  }
}

.grid-item.reading-needs-to-be-replaced .grid-item__title {
  color: var(--textwhite);
}
.grid-item.reading-needs-to-be-replaced .grid-item__link {
  background: #000000;
}
@media screen and (min-width: 767px) {
  .grid-item.reading-needs-to-be-replaced .grid-item__link {
    grid-column: 3/5;
  }
}
.grid-item.reading-needs-to-be-replaced .grid-item__bg {
  background: url("../_images/reading_needs_to_be_replaced_sp.png") no-repeat;
  background-size: contain;
}
@media screen and (min-width: 767px) {
  .grid-item.reading-needs-to-be-replaced .grid-item__bg {
    background: url("../_images/reading_needs_to_be_replaced_pc.png") no-repeat;
    background-size: contain;
  }
}

@media screen and (min-width: 767px) {
  .grid-item.reading-sunshade {
    grid-column: 1/3;
  }
}
.grid-item.reading-sunshade .grid-item__title {
  letter-spacing: 0.32px;
}
@media screen and (min-width: 767px) {
  .grid-item.reading-sunshade .grid-item__title {
    font-size: var(--fz22pc);
  }
}
.grid-item.reading-sunshade .grid-item__link {
  background: url("../_images/reading_sunshade.png") no-repeat;
  background-size: contain;
  background-position: center;
}

@media screen and (min-width: 767px) {
  .grid-item.reading-virus-measures {
    grid-column: 3/5;
  }
}
.grid-item.reading-virus-measures .grid-item__title {
  letter-spacing: 0.32px;
  color: var(--text);
}
@media screen and (min-width: 767px) {
  .grid-item.reading-virus-measures .grid-item__title {
    font-size: var(--fz22pc);
  }
}
.grid-item.reading-virus-measures .grid-item__link {
  background: url("../_images/reading_virus_measures.png") no-repeat;
  background-size: contain;
  background-position: center;
}
@media screen and (min-width: 767px) {
  .grid-item.reading-virus-measures .grid-item__link {
    grid-column: 3/5; /* 2行目右 - 2カラム分の幅 */
  }
}

@media screen and (min-width: 767px) {
  .grid-item.reading-racing-sports {
    grid-column: 1/3;
  }
}
.grid-item.reading-racing-sports .grid-item__title {
  letter-spacing: 0.32px;
}
@media screen and (min-width: 767px) {
  .grid-item.reading-racing-sports .grid-item__title {
    font-size: var(--fz22pc);
  }
}
.grid-item.reading-racing-sports .grid-item__link {
  background: url("../_images/reading_racing_sports.png") no-repeat;
  background-size: contain;
  background-position: center;
}

@media screen and (min-width: 767px) {
  .grid-item.reading-garage-life {
    grid-column: 3/5;
  }
}
.grid-item.reading-garage-life .grid-item__title {
  letter-spacing: 0.32px;
}
@media screen and (min-width: 767px) {
  .grid-item.reading-garage-life .grid-item__title {
    font-size: var(--fz22pc);
  }
}
.grid-item.reading-garage-life .grid-item__link {
  background: url("../_images/reading_reading_garage_lifes.png") no-repeat;
  background-size: contain;
  background-position: center;
}
@media screen and (min-width: 767px) {
  .grid-item.reading-garage-life .grid-item__link {
    grid-column: 3/5; /* 2行目右 - 2カラム分の幅 */
  }
}

@media screen and (min-width: 767px) {
  .grid-item.chart {
    grid-column: 1/5;
  }
}
.grid-item.chart .grid-item__link {
  background: url("../_images/chart_sp.png") no-repeat;
  background-size: contain;
  background-position: center;
}
@media screen and (min-width: 767px) {
  .grid-item.chart .grid-item__link {
    background: url("../_images/chart_pc.png") no-repeat;
    background-size: cover;
    background-position: center;
  }
}

.safety-inspection {
  padding-bottom: 4%;
  overflow: hidden;
  position: relative;
  border-radius: 8px;
  background: #1b2330;
}
@media screen and (min-width: 767px) {
  .safety-inspection {
    border-radius: 16px;
    padding-bottom: 0;
    aspect-ratio: 1200/337;
    min-height: 337px;
    display: flex;
  }
}
@media screen and (min-width: 767px) {
  .safety-inspection__imgWrap {
    width: 43%;
    aspect-ratio: 440/337;
  }
}
.safety-inspection__img {
  -o-object-fit: cover;
     object-fit: cover;
}
.safety-inspection__list {
  margin: -5% auto 0%;
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 94%;
}
@media screen and (min-width: 767px) {
  .safety-inspection__list {
    padding: 2% 0;
    margin: 0 0 0 -7%;
    flex-direction: row;
    gap: 20px;
    justify-content: flex-end;
    padding: 2% 0;
    width: 62%;
  }
}

.safety-inspection-item {
  border-radius: 8px;
  background: var(--bg);
}
@media screen and (min-width: 767px) {
  .safety-inspection-item {
    aspect-ratio: 760/297;
  }
}
.safety-inspection-item__title {
  padding: 5px;
  border-radius: 8px 8px 0 0;
  background: #064497;
  color: var(--textwhite);
  font-size: var(--fz18);
  font-weight: bold;
  text-align: center;
}
@media screen and (min-width: 767px) {
  .safety-inspection-item__title {
    padding: 11px;
    font-size: var(--fz22pc);
  }
}
.safety-inspection-item__content {
  border-radius: 0 0 5px 5px;
  padding: 15px;
}
@media screen and (min-width: 767px) {
  .safety-inspection-item__content {
    padding: 20px;
  }
}
@media screen and (min-width: 767px) {
  .safety-inspection-item__list {
    display: flex;
    gap: 8px;
  }
}
.safety-inspection-item__item {
  display: flex;
}
@media screen and (min-width: 767px) {
  .safety-inspection-item__item {
    width: 356px;
  }
}
.safety-inspection-item__item:not(:first-child) {
  margin-top: 8px;
}
@media screen and (min-width: 767px) {
  .safety-inspection-item__item:not(:first-child) {
    margin-top: 0;
  }
}
.safety-inspection-item__ico {
  flex-basis: 24px;
  flex-shrink: 0;
}
.safety-inspection-item__textBold {
  margin: 15px auto 12px;
  font-weight: bold;
  text-align: center;
}
@media screen and (min-width: 767px) {
  .safety-inspection-item__textBold {
    margin: 20px auto 16px;
  }
}
.safety-inspection-item__linkWrap {
  margin: auto;
  width: min(280px, 100%);
}
@media screen and (min-width: 767px) {
  .safety-inspection-item__linkWrap {
    width: min(400px, 100%);
    text-align: center;
  }
}

@media screen and (min-width: 767px) {
  .grid-item.mobilitylife {
    grid-column: 1/5;
  }
}
.grid-item.mobilitylife .grid-item__link {
  background: url("../_images/mobility_life_sp.png") no-repeat;
  background-size: contain;
  background-position: center;
}
@media screen and (min-width: 767px) {
  .grid-item.mobilitylife .grid-item__link {
    background: url("../_images/mobility_life_pc.png") no-repeat;
    background-size: cover;
    background-position: center;
  }
}

@media screen and (min-width: 767px) {
  .grid-item.free-safety-inspections-in-progress {
    grid-column: 1/5;
  }
}
.grid-item.free-safety-inspections-in-progress .grid-item__link {
  background: url("../_images/img_free_safety_inspections_in_progress_sp.png") no-repeat;
  background-size: contain;
  background-position: center;
}
@media screen and (min-width: 767px) {
  .grid-item.free-safety-inspections-in-progress .grid-item__link {
    background: url("../_images/img_free_safety_inspections_in_progress_pc.png") no-repeat;
    background-size: cover;
    background-position: center;
  }
}

@media (hover: hover) {
  .assessment-item__link:hover {
    text-decoration: none;
    color: var(--text);
  }
  .assessment-item__link:hover .link-btn {
    background: #000;
    color: var(--textwhite);
  }
}
.link-btn {
  padding: 15px;
  border-radius: 999px;
  background: #ff6e00 !important;
  color: var(--textwhite) !important;
  font-weight: bold;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 16px;
}
.link-btn:hover {
  text-decoration: none;
  color: var(--textwhite);
  background: var(--text);
}
@media screen and (min-width: 767px) {
  .link-btn {
    font-size: var(--fz20pc);
  }
}

/*----------------------

タイヤの商品一覧

---------------------- */
.product-slider-container {
  position: relative;
  margin-top: 30px;
  overflow: visible; /* 右側が見切れるように設定 */
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  padding: 0 15px;
}
@media screen and (min-width: 767px) {
  .product-slider-container {
    padding: 0;
    width: 1200px;
    margin: auto;
  }
}
.product-slider-container.-products {
  margin-top: 40px;
}

.swiper-container {
  width: 100%;
  overflow: visible !important; /* 強制的にはみ出しを表示 */
  /* コンテナを少し右に拡張 */
  margin-right: -10%;
}

.tire-slide,
.oil-slide {
  width: 132px !important;
}
@media screen and (min-width: 767px) {
  .tire-slide,
.oil-slide {
    width: 240px !important;
  }
}

.product-slide {
  width: 150px !important;
}
@media screen and (min-width: 767px) {
  .product-slide {
    width: 200px !important;
  }
}

.product-slide-item {
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: space-between;
  height: auto;
  aspect-ratio: 132/296;
  margin: auto;
  transition: all 0.3s ease;
  color: var(--text) !important;
}
.product-slide-item:hover {
  text-decoration: none;
  color: #000;
}
.product-slide-item:hover .more-btn {
  background: #000;
  color: var(--textwhite);
}
@media screen and (min-width: 767px) {
  .product-slide-item {
    aspect-ratio: 240/518;
    gap: 16px;
  }
}
.product-slide-item.-oil {
  aspect-ratio: 130/234;
}
@media screen and (min-width: 767px) {
  .product-slide-item.-oil {
    aspect-ratio: 240/410;
  }
}
.product-slide-item__imgWrap {
  width: 100%;
  padding-top: 100%;
  position: relative;
  overflow: hidden;
}
.product-slide-item__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.product-slide-item__textBox {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media screen and (min-width: 767px) {
  .product-slide-item__textBox {
    margin-top: 16px;
    gap: 16px;
  }
}
.product-slide-item__textBox.-oil {
  gap: 8px;
}
@media screen and (min-width: 767px) {
  .product-slide-item__textBox.-oil {
    gap: 16px;
  }
}
.product-slide-item__title {
  font-size: 12px;
  font-weight: bold;
  line-height: 1.35;
  letter-spacing: -0.6px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden; /* 溢れた部分を隠す */
  text-overflow: ellipsis; /* 溢れた部分に「...」を表示 */
  -webkit-line-clamp: 2;
}
@media screen and (min-width: 767px) {
  .product-slide-item__title {
    font-size: 20px;
  }
}
.product-slide-item__title.-oil {
  font-weight: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden; /* 溢れた部分を隠す */
  text-overflow: ellipsis; /* 溢れた部分に「...」を表示 */
  -webkit-line-clamp: 3;
  line-height: 1.35;
}
@media screen and (min-width: 767px) {
  .product-slide-item__title.-oil {
    font-size: 16px;
  }
}
.product-slide-item__type {
  font-size: 12px;
  font-weight: bold;
  line-height: 1.35;
  letter-spacing: -0.6px;
}
@media screen and (min-width: 767px) {
  .product-slide-item__type {
    font-size: 18px;
  }
}
.product-slide-item__type.-oil {
  font-weight: normal;
}
@media screen and (min-width: 767px) {
  .product-slide-item__type.-oil {
    font-size: 16px;
  }
}
.product-slide-item__desc {
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: -0.55px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden; /* 溢れた部分を隠す */
  text-overflow: ellipsis; /* 溢れた部分に「...」を表示 */
  -webkit-line-clamp: 3;
}
@media screen and (min-width: 767px) {
  .product-slide-item__desc {
    font-size: 14px;
  }
}
.product-slide-item__price {
  display: flex;
  align-items: baseline;
  font-size: 18px;
  font-weight: bold;
  color: #e70012;
  letter-spacing: -0.9px;
}
@media screen and (min-width: 767px) {
  .product-slide-item__price {
    font-size: 34px;
    letter-spacing: -1.7px;
    line-height: 1;
  }
}
@media screen and (min-width: 767px) {
  .product-slide-item__price.-oil {
    font-size: 28px;
  }
}
.product-slide-item__set {
  font-size: 10px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.4px;
  color: var(--text);
  font-family: var(--font);
}
@media screen and (min-width: 767px) {
  .product-slide-item__set {
    font-size: 13px;
  }
}
.product-slide-item__bottom {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media screen and (min-width: 767px) {
  .product-slide-item__bottom {
    gap: 16px;
  }
}

.tax_yen {
  margin-left: 1%;
  width: 13px;
  height: 14px;
}
@media screen and (min-width: 767px) {
  .tax_yen {
    width: 28px;
    height: 25px;
  }
}

.more-btn {
  border-radius: 99px;
  border: 1px solid #666;
  padding: 2px 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 12px;
  width: 61%;
}
@media screen and (min-width: 767px) {
  .more-btn {
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: -0.28px;
    width: 96px;
  }
}

.swiper-button-next,
.swiper-button-prev {
  background-color: #fff;
  width: 24px;
  height: 60px;
  border-radius: 50%;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px 0px 0px 4px;
  background: #fff;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.5);
}

.swiper-button-next.product-next {
  z-index: 20;
  right: 0;
  left: auto;
  width: 6%;
  height: 16%;
}
@media screen and (min-width: 767px) {
  .swiper-button-next.product-next {
    right: -20px;
    width: 40px;
    height: 100px;
  }
}
.swiper-button-next::after {
  content: "" !important;
  background: url("../_images/arrow_forward_ios.svg") no-repeat center center;
  background-size: contain;
  rotate: 180deg;
  width: 2vw;
  height: 4vw;
}
@media screen and (min-width: 767px) {
  .swiper-button-next::after {
    width: 10px;
    height: 19px;
  }
}

.swiper-button-prev {
  border-radius: 0 4px 4px 0;
}
.swiper-button-prev.product-prev {
  z-index: 20;
  left: 0;
  right: auto;
  width: 6%;
  height: 16%;
}
@media screen and (min-width: 767px) {
  .swiper-button-prev.product-prev {
    left: -20px;
    width: 40px;
    height: 100px;
  }
}
.swiper-button-prev::after {
  content: "" !important;
  background: url("../_images/arrow_forward_ios.svg") no-repeat center center;
  background-size: contain;
  width: 2vw;
  height: 4vw;
}
@media screen and (min-width: 767px) {
  .swiper-button-prev::after {
    width: 10px;
    height: 19px;
  }
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  opacity: 0.35;
}

.product-card {
  width: 100%;
  min-height: 276px;
  border-radius: 8px;
  border: 1px solid #eee;
  overflow: hidden;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s ease;
  color: var(--text) !important;
}
@media screen and (min-width: 767px) {
  .product-card {
    border-radius: 16px;
    min-height: 366px;
  }
}
.product-card:hover {
  text-decoration: none;
  color: #000;
}
.product-card__info {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.product-card__title {
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.28px;
}
@media screen and (min-width: 767px) {
  .product-card__title {
    font-size: 18px;
  }
}
.product-card__show {
  font-size: 12px;
  color: #666;
  text-decoration: none;
  text-decoration: underline;
}
@media screen and (min-width: 767px) {
  .product-card__show {
    font-size: 14px;
  }
}

.product-card2 {
  display: block;
  position: relative;
  text-decoration: none;
  height: 100%;
}
@media screen and (min-width: 767px) {
  .product-card2 {
    border-radius: 16px;
    min-height: 337px;
  }
}
.product-card2:hover {
  text-decoration: none;
  color: #000;
}
.product-card2__imgWrap {
  height: 253px;
  border-radius: 8px;
  overflow: hidden;
  transform: translateZ(0);
}
@media screen and (min-width: 767px) {
  .product-card2__imgWrap {
    height: 337px;
    border-radius: 16px;
  }
}
.product-card2__imgWrap::before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 150%;
}
.product-card2__img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.product-card2__info {
  border-radius: 8px 8px 0px 0px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.64) 75%, rgba(0, 0, 0, 0) 100%);
  width: 100%;
  position: absolute;
  z-index: 10;
  top: 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 80px;
}
@media screen and (min-width: 767px) {
  .product-card2__info {
    height: 140px;
  }
}
.product-card2__title {
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.28px;
  color: var(--textwhite);
}
@media screen and (min-width: 767px) {
  .product-card2__title {
    font-size: 18px;
  }
}
.product-card2__show {
  font-size: 12px;
  color: var(--textwhite);
}
@media screen and (min-width: 767px) {
  .product-card2__show {
    font-size: 14px;
  }
}

@media (hover: hover) {
  .product-card:hover {
    text-decoration: none;
    color: #000;
    filter: drop-shadow(0px 0px 12px rgba(0, 0, 0, 0.12));
  }
  .product-card:hover .product-card__show {
    text-decoration: none;
  }
}
.movie-slide {
  width: 150px !important;
}
@media screen and (min-width: 767px) {
  .movie-slide {
    width: 220px !important;
    aspect-ratio: 220/391;
  }
}

.grid-item.microfiber-cloth .grid-item__link {
  background: url("../_images/microfiber-cloth.png") no-repeat;
  background-size: cover;
  background-position: top;
}

.grid-item.foam-shower .grid-item__link {
  background: url("../_images/foam-shower.png") no-repeat;
  background-size: cover;
  background-position: top;
}

.grid-item.shampoo .grid-item__link {
  background: url("../_images/shampoo.png") no-repeat;
  background-size: cover;
  background-position: top;
}

.grid-item.car-wash-sponge .grid-item__link {
  background: url("../_images/car-wash-sponge.png") no-repeat;
  background-size: cover;
  background-position: top;
}

.grid-item.whee-brush .grid-item__link {
  background: url("../_images/whee-brush.png") no-repeat;
  background-size: cover;
  background-position: top;
}

.grid-item.water-repellent-coating .grid-item__link {
  background: url("../_images/water-repellent-coating.png") no-repeat;
  background-size: cover;
  background-position: top;
}

/* 画像読み込み前の状態を防ぐ */
.js-catchImg[src] {
  display: block;
}

.chara-container {
  position: relative;
}

.cta-section {
  position: relative;
  position: -webkit-sticky;
  position: sticky;
  top: 100vh;
  z-index: 100;
  width: 100%;
}
@media screen and (min-width: 767px) {
  .cta-section {
    margin: auto;
    width: 1240px;
  }
}
.cta-section__picture {
  display: block;
  position: absolute;
  z-index: 10;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  visibility: hidden;
}
@media screen and (min-width: 767px) {
  .cta-section__picture {
    right: 0;
    left: auto;
    transform: translateX(0);
  }
}

.chara {
  position: relative;
  display: block;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform: translateX(110%);
  opacity: 0;
  width: 327px;
  height: 51px;
  max-width: none !important;
}
.chara.visible {
  transform: translateX(0);
  opacity: 1;
}
.chara.fixed {
  bottom: 0;
  z-index: 1000;
}
.chara.slide-out {
  transform: translateX(200px);
  opacity: 0;
}

.js-details .icon {
  transform: rotate(180deg);
}

.js-details.is-opened .icon {
  transform: rotate(0);
}

@media screen and (min-width: 767px) {
  .p-faq {
    padding: 170px 0 0;
    margin: auto;
  }
  .p-faq:not(:first-child) {
    padding-top: 120px;
  }
}
.p-faq__title {
  padding: 9px 24px;
  background: #000;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
}
@media screen and (min-width: 767px) {
  .p-faq__title {
    padding: 10px 24px;
    font-size: 22px;
  }
}
.p-faq__question {
  position: relative;
  padding: 12px;
  font-weight: 400;
  text-align: left;
  color: #000;
  background: #f4f4f4;
  display: flex;
  align-items: center;
  list-style: none;
  cursor: pointer;
}
@media screen and (min-width: 767px) {
  .p-faq__question {
    padding: 20px 18px;
    align-items: flex-start;
  }
}
.p-faq__questionInner {
  flex-shrink: 0;
  flex-basis: 100%;
  display: flex;
  align-items: flex-start;
}
.p-faq__answer {
  padding: 12px;
  font-weight: 400;
  text-align: left;
  color: #000;
  display: flex;
  align-items: flex-start;
}
@media screen and (min-width: 767px) {
  .p-faq__answer {
    padding: 20px 18px;
  }
}
.p-faq__details {
  border-top: 1px solid #fff;
}
.p-faq .faq-icon {
  margin-right: 12px;
}
.p-faq__para:not(:first-child) {
  margin-top: 16px;
}
.p-faq__note {
  margin-top: 16px;
  font-size: 12px;
}
.p-faq__button {
  background: none;
  border: none;
  text-decoration: underline;
  padding: 0;
  font-size: 16px;
  transition: all 0.3s;
}
@media screen and (min-width: 767px) {
  .p-faq__button:hover {
    text-decoration: none;
    opacity: 0.7;
  }
}

.js-details.is-opened .js-arrow::after {
  width: 0;
}

/* ------- モーダル ------- */
html.is-modal {
  overflow: hidden;
}

.modal {
  cursor: pointer;
  transition: 0.2s;
}
.modal:hover {
  opacity: 0.7;
}

#backMaskBase {
  background: #000;
  display: none;
  height: 100%;
  left: 0px;
  opacity: 0.8;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
}

#modalWin {
  display: none;
  height: 0;
  left: 0;
  margin: 0;
  padding: 0;
  position: relative;
  top: 0;
  width: 100%;
  z-index: 101;
}

#modalContent {
  display: none;
  height: auto;
  margin: 0 auto;
  padding-top: min(50%, 480px);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 854px;
  max-width: 90%;
  z-index: 102;
}

#modalContent .closeBtn {
  cursor: pointer;
  height: 25px;
  position: absolute;
  right: -2px;
  text-align: center;
  top: -25px;
  width: 25px;
  z-index: 100;
}
@media only screen and (max-width: 767px) {
  #modalContent .closeBtn {
    top: -40px;
  }
}

#modalContent .closeBtn div {
  display: inline-block;
  position: relative;
  margin: 5px 0 0 0;
  padding: 0;
  width: 2px;
  height: 17px;
  background: #fff;
  transform: rotate(45deg);
}

#modalContent .closeBtn div:before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: -7px;
  width: 16px;
  height: 2px;
  margin-top: -1px;
  background: #fff;
}

.modalinner {
  text-align: left;
  padding: 0;
}

.mvfrm {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* ------- モーダルここまで ------- */
/*# sourceMappingURL=ec.css.map */