@import "reset/set.css";
@import "set/variables.css";

/* =========================
  ✅全体の共通スタイル
========================= */

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans-ja);
  font-size: 16px;
  line-height: 1.5;
  color: var(--Text_Main);
  background-color: var(--MainBg);
}

.u-mobile {
  display: none;
  @media screen and (max-width: 767px) {
    display: block;
  }
}

.u-desktop {
  display: block;
  @media screen and (max-width: 767px) {
    display: none;
  }
}

.inner {
  max-width: var(--max-container-size);
  margin-inline: auto;
  padding-inline: var(--offset-xs);

  @media screen and (max-width: 767px) {
    padding-inline: 15px;
  }
}

/* header */

.header {
  background-color: #fff;
  padding: calc(10 * var(--torem)) 0 calc(20 * var(--torem));
}

.header-inner {
}

.header-logo {
  width: 50%;
  margin-inline: auto;
}


/* fv */

.fv {
  background-image: url(../img/fv-bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
  padding: 2vw 0 2vw;
  position: relative;
}

.fv-inner {
}

.fv-title-main {
  width: 70%;
  max-width: 900px;
  position: relative;
  z-index: 1;

  margin-inline: auto;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.fv-title-bg {
  width: 48vw;
  max-width: 700px;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.fv-img01 {
  width: 27%;
  position: absolute;
  left: 6.9vw;
  top: 17vw;
  animation: pikopiko 2.5s steps(2) infinite;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.fv-img02 {
  width: 28%;
  position: absolute;
  left: 6.9vw;
  bottom: 4vw;
  animation: pikopiko 2.5s steps(2) infinite;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.fv-img03 {
  width: 100%;
/*  width: 30%;*/
  position: absolute;
  right: 6vw;
  top: 20vw;
/*  animation: fuwafuwa-r 1s ease-in-out infinite alternate;*/

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.fv-img04 {
  width: 100%;
/*  width: 20%;*/
  position: absolute;
/*  animation: pikopiko 2.5s steps(2) infinite;*/
/*  right: 17vw;*/
  right: 2vw;
  bottom: 2vw;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.fv-img05 {
  width: 20%;
  position: absolute;

  right: 3.5vw;
  bottom: 2vw;

  

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@keyframes pikopiko {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes fuwafuwa {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(5px);
  }
}

@keyframes fuwafuwa-r {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-5px);
  }
}

/* movie */

.mv {
  background-image: url(../img/cm_bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  aspect-ratio: 16/9;
  width: 100%;
  height: 100;
  padding: 2vw 0 2vw;
  position: relative;
}

.mv-inner {
}

.mv-title-main {
  padding-top: 56.25%;
  position: relative;
}

.mv-img01 {
  height: 40%;
  left: 32%;
  position: absolute;
  top: 20%;
  width: 40%;
}


/* ナビゲーションバー */

.nav {
  padding: calc(20 * var(--torem));
  background-color: #fff;

  @media screen and (max-width: 768px) {
    padding: calc(5 * var(--torem));
  }
}

nav.fixed {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: transparent;
  z-index: 10;
}

.nav-inner {
}

.nav-list {
  display: block grid;
  grid-template-columns: auto auto auto auto;
  gap: 0.5rem;
}

.nav-item {
}

.nav-link {
}

/* 公式アプリ */

.apli {
  width: 100%;
}

/* イベント情報 */
.event {
  padding: 30px 0;

  @media screen and (max-width: 768px) {
    padding: 20px 0;
  }
}

.event-inner {
}

.event-bnr {
}

.event-title {
  /* margin-top: 20px; */
  margin: 20px auto 0px;
  width: 80%;

   @media screen and (max-width: 768px) {
    margin: 10px auto;
    width: 85%;
  }
}

.event-wrap {
  background-image: url(../img/event-bg.png);
  background-position: center;
  background-size: contain;
  background-repeat: repeat;

  margin-top: 20px;
  padding: 20px 30px;

  @media screen and (max-width: 768px) {
    padding: 20px 10px;
    margin-top: 0px;
  }
}

.event-show-title {
  width: 90%;
  margin-inline: auto;
}

.event-show-list {
  display: block grid;
  gap: 50px 20px;
  margin-top: 30px;

  @media screen and (max-width: 768px) {
    gap: 20px;
  }
}

.event-show-item {
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

.event-day-list {
  display: block grid;
  gap: 20px;
  margin-top: 30px;
}

.event-day-item {
}

.event1 {
}

.event2 {
}

.event-workshop {
  display: block grid;
  grid-template-columns: 40% auto;
  gap: 20px;
  margin-top: 30px;
}

.event-workshop-title {
}

.event-workshop-member {
}

/* 遊び場 */

.viva {
  padding: 0px 0px 30px 0px;

  @media screen and (max-width: 768px) {
    padding: 0px 0px 20px 0px;
  }
}

.viva-inner {
}

.viva-wrap {
  background-image: url(../img/viva-bg-orange.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 30px;

  @media screen and (max-width: 768px) {
    padding: 20px 10px;
  }
}

.viva-title {
  width: 90%;
  margin-inline: auto;
}

.viva-list {
  display: block grid;
  grid-template-columns: auto 1px auto;
  margin-top: 30px;
  gap: 20px;

  @media screen and (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

.viva-item {
}

.viva-line {
  width: 1px;
  height: 100%;
  background-color: #231815;

  @media screen and (max-width: 768px) {
    display: none;
  }
}

.viva-wrap02 {
  background-image: url(../img/viva-bg-blue.png);
  background-size: contain;
  background-position: center;
  background-repeat: repeat;
  padding: 30px;
  margin-top: 30px;

  @media screen and (max-width: 768px) {
    padding: 20px 10px;
    margin-top: 20px;
  }
}

.viva-list02 {
  display: block grid;
  grid-template-columns: auto;

  gap: 20px;
}

/* 地元と繋がる */

.conect {
  margin-top: 0px;

  @media screen and (max-width: 768px) {
    margin-top: 0px;
  }
}

.conect-wrap {
  background-image: url(../img/conect-bg-green.png);
  background-size: 100px 100px; 
  background-size: cover;
  background-position: center;
  background-repeat: repeat;
  padding: 30px;

  @media screen and (max-width: 768px) {
    padding: 20px 10px;
    background-size: contain;
  }
}

.conect-inner {
}

.conect-title {
  width: 90%;
  margin-inline: auto;
}

.conect-list {
  margin-top: 20px;
  display: block grid;
  gap: 20px;
}

.conect-item {
  padding: 30px;
  background-color: rgb(225, 225, 225, 0.8);

  @media screen and (max-width: 768px) {
    padding: 10px;
  }
}

/* グルメ */

.gourmet {
  margin-top: 30px;

  @media screen and (max-width: 768px) {
    margin-top: 20px;
  }
}

.gourmet-inner {
}

.gourmet-wrap {
  background-image: url(../img/gourmet-bg.png);
  background-size: contain;
  background-position: center;
  background-repeat: repeat;
  padding: 30px;

  @media screen and (max-width: 768px) {
    padding: 20px 10px;
  }
}

.gourmet-title {
  width: 40%;
  margin-inline: auto;

  @media screen and (max-width: 768px) {
    width: 50%;
  }
}

.gourmet-list {
  display: block grid;
  grid-template-columns: auto auto;
  margin-top: 50px;
  gap: calc(40 * var(--torem));

  @media screen and (max-width: 768px) {
    margin-top: 20px;
    gap: calc(10 * var(--torem));
  }
}

.gourmet-item {
}

.gourmet-car-title {
  width: 60%;
  margin-inline: auto;
  margin-top: 40px;

  @media screen and (max-width: 768px) {
    width: 70%;
    margin-top: 20px;
  }
}

.gourmet-car-list {
  display: block grid;
  margin-top: 50px;
  gap: calc(40 * var(--torem));

  @media screen and (max-width: 768px) {
    margin-top: 20px;
    gap: calc(10 * var(--torem));
  }
}

.gourmet-car-item {
}

/* 体験 */

.try {
  margin-top: 20px;
}

.try-inner {
}

.try-list {
  display: block grid;
  gap: 6px;

  @media screen and (max-width: 768px) {
    gap: 6px;
  }
}

.try-item {
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.try-item.mt {
  img {
    margin-top: -4px;

    @media screen and (max-width: 768px) {
      margin-top: 0px;
    }
  }
}

.try-item.--sp {
  display: none;
  @media screen and (max-width: 768px) {
    display: block;
  }
}

.try-item.--sp.mt {
  margin-top: 6px;
}

/* ママブース */
.mama {
  margin-top: 15px;

  @media screen and (max-width: 768px) {
    margin-top: 4px;
  }
}

.mama-inner {
}

.mama-wrap {
  background-color: #9de0dc;
  padding: 30px 20px;

  @media screen and (max-width: 768px) {
    padding: 20px 10px;
  }
}

.mama-title {
  width: 90%;
  margin-inline: auto;

  @media screen and (max-width: 768px) {
    width: 100%;
  }
}

.mama-list {
  display: block grid;
  grid-template-columns: auto auto auto;
  gap: 30px;
  margin-top: 30px;

  @media screen and (max-width: 768px) {
    gap: 10px;
    margin-top: 10px;
  }
}

.mama-item {
}

/* ガラポン大抽選会 */

.garapon {
  margin-top: 30px;
  width: 100%;
  background-color: #fff;

  @media screen and (max-width: 768px) {
    margin-top: 20px;
  }
}

/* CTA */

.cta {
  background-color: #fff;
  padding: 30px;


  @media screen and (max-width: 768px) {
    padding: 20px 10px;
    /* この-1pxは上のセクションとの間を詰めるため */
    margin-top: -1px;
  }
}

.cta-inner {
  @media screen and (max-width: 768px) {
    padding: 0;
  }
}

.cta-title {
  width: 90%;
  margin-inline: auto;
}

.cta-list {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, auto);
  gap: 10px;

  @media screen and (max-width: 768px) {
    margin-top: 10px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, auto);
    gap: 5px;
  }
}

.cta-item {
}

.cta-link img {
  display: block;
  width: 100%;
  height: 100%;
}

.cta1 {
  grid-area: 1 / 1 / 4 / 3;

  @media screen and (max-width: 768px) {
    grid-area: 1 / 1 / 3 / 4;
  }
}
.cta2 {
  grid-area: 1 / 3 / 2 / 4;
  @media screen and (max-width: 768px) {
    grid-area: 3 / 1 / 4 / 2;
  }
}
.cta3 {
  grid-area: 1 / 4 / 2 / 5;
  @media screen and (max-width: 768px) {
    grid-area: 3 / 2 / 4 / 3;
  }
}
.cta4 {
  grid-area: 1 / 5 / 2 / 6;

  @media screen and (max-width: 768px) {
    grid-area: 3 / 3 / 4 / 4;
  }
}
.cta5 {
  grid-area: 2 / 3 / 3 / 4;

  @media screen and (max-width: 768px) {
    grid-area: 4 / 1 / 5 / 2;
  }
}
.cta6 {
  grid-area: 2 / 4 / 3 / 5;

  @media screen and (max-width: 768px) {
    grid-area: 4 / 2 / 5 / 3;
  }
}
.cta7 {
  grid-area: 2 / 5 / 3 / 6;

  @media screen and (max-width: 768px) {
    grid-area: 4 / 3 / 5 / 4;
  }
}
.cta8 {
  grid-area: 3 / 3 / 4 / 4;

  @media screen and (max-width: 768px) {
    grid-area: 5 / 1 / 6 / 2;
  }
}
.cta9 {
  grid-area: 3 / 4 / 4 / 5;

  @media screen and (max-width: 768px) {
    grid-area: 5 / 2 / 6 / 3;
  }
}
.cta10 {
  grid-area: 3 / 5 / 4 / 6;

  @media screen and (max-width: 768px) {
    grid-area: 5 / 3 / 6 / 4;
  }
}

/* 新春おすすめ車 */

.new {
  background-image: url(../img/new-bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: repeat;
  padding: 30px;

  @media screen and (max-width: 768px) {
    padding: 20px 10px;
  }
}

.new-inner {
  @media screen and (max-width: 768px) {
    padding: 0;
  }
}

.new-bnr {
}

.new-bnr-link {
}

.new-title {
  width: 80%;
  margin-inline: auto;
  margin-top: 20px;

  @media screen and (max-width: 768px) {
    width: 90%;
    margin-top: 10px;
  }
}

.new-list {
  display: block grid;
  grid-template-columns: auto auto;
  gap: 20px;
  margin-top: 30px;

  @media screen and (max-width: 768px) {
    gap: 20px;
    grid-template-columns: 1fr;
    margin-top: 20px;
  }
}

.new-item {
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    @media screen and (max-width: 768px) {
      width: 120%;
    }
  }
}

.new-item.rize {
  img {
    width: 100%;
    height: 100%;
    object-fit: fill;

    @media screen and (max-width: 768px) {
      width: 120%;
    }
  }
}

.new-text {
  width: 50%;
  margin-inline: auto;
  margin-top: 30px;

  @media screen and (max-width: 768px) {
    width: 70%;
    margin-top: 40px;
  }
}

.new-list-other {
  display: block grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
  margin-top: 30px;

  @media screen and (max-width: 768px) {
    gap: 5px;
    margin-top: 20px;

    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }
}

.car1 {
  grid-area: 1 / 2 / 2 / 4;

  @media screen and (max-width: 768px) {
    grid-area: 1 / 1 / 2 / 3;
  }
}
.car2 {
  grid-area: 1 / 4 / 2 / 6;

  @media screen and (max-width: 768px) {
    grid-area: 1 / 3 / 2 / 5;
  }
}

.car3 {
  grid-area: 2 / 1 / 3 / 3;

  @media screen and (max-width: 768px) {
    grid-area: 2 / 2 / 3 / 4;
  }
}
.car4 {
  grid-area: 2 / 3 / 3 / 5;

  @media screen and (max-width: 768px) {
    grid-area: 3 / 1 / 4 / 3;
  }
}
.car5 {
  grid-area: 2 / 5 / 3 / 7;

  @media screen and (max-width: 768px) {
    grid-area: 3 / 3 / 4 / 5;
  }
}

.new-bottom {
  margin-top: 30px;
}

/* KINTO */

.kinto {
  padding: 30px 0;
  background-color: #5eaba5;

  @media screen and (max-width: 768px) {
    padding: 20px 0;
  }
}

.kinto-inner {
}

.kinto-title {
  width: 90%;
  margin-inline: auto;

  @media screen and (max-width: 768px) {
    width: 100%;
  }
}

.kinto-check {
  width: 80%;
  margin-inline: auto;
  margin-top: 10px;

  @media screen and (max-width: 768px) {
    width: 90%;
  }
}

.kinto-list {
  display: block grid;
  grid-template-columns: auto auto auto;
  margin-top: 30px;

  @media screen and (max-width: 768px) {
    margin-top: 10px;
  }
}

.kinto-item {
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.recommend {
  margin-top: calc(40 * var(--torem));
  display: block grid;
  gap: 20px;

  @media screen and (max-width: 768px) {
    margin-top: 20px;
    gap: 10px;
  }
}

.recommend-item {
}

.reason {
  margin-top: calc(120 * var(--torem));
  background-color: #fcdec0;
  padding: calc(80 * var(--torem)) 30px 30px;
  position: relative;

  @media screen and (max-width: 768px) {
    margin-top: calc(40 * var(--torem));
    padding: 6.4vw 10px 30px;
  }
}

.reason-title {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  width: 50%;
}

.reason-list {
  display: block grid;
  gap: 20px;
}

.reason-item {
}

.reason-item.reason4 {
  width: 70%;

  @media screen and (max-width: 768px) {
    width: 100%;
  }
}

/* 中古車 */

.old {
  background-color: #fff;
}

.old-bg {
  padding: calc(50 * var(--torem)) 0;
  background-image: url(../img/old-bg01.png);
  background-size: cover;
  background-position: center;
  background-repeat: repeat;

  @media screen and (max-width: 768px) {
    padding: 20px 0;
  }
}

.old-inner {
}

.old-title {
}

.old-bnr {
  margin-top: 30px;

  @media screen and (max-width: 768px) {
    margin-top: 10px;
  }
}

.old-kitchen {
  padding: 30px;
  background-image: url(../img/old-kitchen-bg.png);
  background-size: contain;
  background-position: center;
  background-repeat: repeat;
  margin-top: 30px;

  @media screen and (max-width: 768px) {
    padding: 20px 10px;
    margin-top: 20px;
  }
}

.old-kitchen-title {
  width: 50%;
  margin-inline: auto;

  @media screen and (max-width: 768px) {
    width: 70%;
  }
}

.old-kitchen-wrap {
  display: block grid;
  grid-template-columns: auto 1px auto;
  gap: 20px;
  margin-top: 30px;

  @media screen and (max-width: 768px) {
    gap: 10px;
    margin-top: 10px;
  }
}

.old-kitchen-item {
}

.old-kitchen-line {
  width: 1px;
  height: 100%;
  background-color: #231815;
}

.old-event {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 20px;
  margin-top: 30px;

  @media screen and (max-width: 768px) {
    gap: 10px;
    margin-top: 20px;
  }
}

.old-event-item {
}

.old-event1 {
  grid-area: 1 / 1 / 2 / 2;
}
.old-event2 {
  grid-area: 1 / 2 / 2 / 3;
}
.old-event3 {
  grid-area: 2 / 1 / 3 / 3;
}

/* ディーラーならではの安心・安全 */

.old-safe {
  margin-top: calc(120 * var(--torem));

  @media screen and (max-width: 768px) {
    margin-top: calc(30 * var(--torem));
  }
}

.old-safe-title {
  width: 90%;
  margin-inline: auto;
}

.old-safe-text {
  width: 100%;
  margin-top: 20px;
}

.old-safe-list {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(3, auto);
  gap: 0px calc(20 * var(--torem));

  @media screen and (max-width: 768px) {
    gap: 4px;
    grid-template-columns: auto;
    grid-template-rows: repeat(5, auto);
    margin-top: 10px;
  }
}

.old-safe-item {
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.safe1 {
  grid-area: 1 / 1 / 2 / 2;

  @media screen and (max-width: 768px) {
    grid-area: auto;
  }
}
.safe2 {
  grid-area: 1 / 2 / 2 / 3;

  @media screen and (max-width: 768px) {
    grid-area: auto;
  }
}
.safe3 {

  grid-area: 2 / 1 / 3 / 2;
  @media screen and (max-width: 768px) {
    grid-area: auto;
    margin-top: -6px;
  }
}
.safe4 {
  grid-area: 2 / 2 / 3 / 3;
  @media screen and (max-width: 768px) {
    grid-area: auto;
    margin-top: -6px;
  }
}
.safe5 {
  grid-area: 3 / 1 / 4 / 3;
  @media screen and (max-width: 768px) {
    grid-area: auto;
    margin-top: -26px;
  }
}

.old-safe-bnr {
  margin-top: calc(60 * var(--torem));

  @media screen and (max-width: 768px) {
    margin-top: calc(20 * var(--torem));
  }
}

.old-safe-bnr-link {
}

.old-center-title {
  margin-top: calc(40 * var(--torem));
  width: 90%;
  margin-inline: auto;

  @media screen and (max-width: 768px) {
    margin-top: 0;
  }
}

.old-center-list {
  display: block grid;
  grid-template-columns: auto auto auto auto;
  grid-template-rows: auto auto;

  @media screen and (max-width: 768px) {
    grid-template-columns: auto auto;
    grid-template-rows: repeat(4, auto);
  }
}

.old-center-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.old-store-title {
  width: 90%;
  margin-inline: auto;
  margin-top: 20px;
}

.store-list {
  margin-bottom: 2rem;
  margin-top: 20px;
  display: block grid;
  grid-template-columns: repeat(7, auto);
  grid-template-rows: repeat(2, auto);
  gap: 10px;

  @media screen and (max-width: 768px) {
    grid-template-columns: repeat(3, auto);
    grid-template-rows: repeat(5, auto);
    gap: 5px;
    margin-top: 10px;
  }
}

.store-item {
}

.store-item-link {
}