@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(--Main);
}

.u-mobile {
  display: none;
  @media screen and (max-width: 767px) {
    display: block;
    width: 60%; /* 背景のTCOロゴサイズをスマホでは縮小させたい */
  }
}

.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: 100%;
  margin-inline: auto;
}

/* google-map */
#map {
  width: 100%;
  height: 500px;
  border: 2px solid #ccc;
  border-radius: 8px;
}

.map-info-box {
  background-color: #4e05f8e3;
  padding: 15px;
  border-radius: 8px;
}

.map-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}



/* garraway */

.garraway {
  aspect-ratio: 16/9;
  width: 85%;
  height: auto;
/*  padding: 2vw 0 2vw;*/
position: relative;
@media screen and (max-width: 767px) {
  width: 100%;
}

}
.ga-inner {
}

.ga-title-main {
  width: 100%;
  position: relative;
  margin-inline: auto;

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

.ga-title-logo {
  width: 85%;
  height: 85%;
  position: relative;
  margin-inline: auto;

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

.ga-title-bg {
  width: 100%;
  position: relative;
  z-index: -1;

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

.ga-wrap {
  background-image: url(../img/11.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;
  }
}

.ga-item {
}

.ga-offer {
  color: #000080;

  background-image: url(../img/11.png);
  background-position: center;

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


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

.ga-prize {
  font-weight: bold;
  color: #d93025;
}

.ga-float img {
  width: 25%;
  height: 25%;
}


.ga-overlay {
  width: 30%;
  position: absolute;
  top: 80%; 
  left: 80%;
  transform: translate(-50%, -50%);
}











/* expo */

.expo {
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
/*  padding: 2vw 0 2vw;*/
  position: relative;
}

.expo-inner {
}

.expo-title-main {
  width: 100%;
  position: relative;
  margin-inline: auto;

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



/* fs */

.fs {
  background-image: url(../img/car_bg.png);  
/*  background-position: center  ;
  background-position: left 968px;  TCOEXPOタイトルページには背景は表示させない 
  background-size: cover;
  background-repeat: no-repeat;*/
  background-position: left 968px;
  background-size: contain;
  background-repeat: repeat-y;

  aspect-ratio: 16/9;
  width: 100%;
  height: auto;

  padding: 2vw 0 2vw;
  position: relative;
}

.fs-inner {
}

.fs-title-main {
  width: 70%;
  position: relative;
  z-index: 1; 
  margin-inline: auto;

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

.fs-title-bg {
  width: 100%;
  position: relative;
  z-index: 0;
/*  中央に寄せたい  
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: calc(120 * var(--torem));
  @media screen and (max-width: 768px) {
    margin-top: calc(30 * var(--torem));
  }
*/
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/*
.fs-img01 {
  width: 60%;
  position: absolute;
  left: 10px;
  top: 13%;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.fs-img02 {
  width: 60%;
  position: absolute;
  right: 10px;
  top: 13%;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.fs-img03 {
  width: 60%;
  position: absolute;
  left: 10px;
  top: 15%;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.fs-img04 {
  width: 60%;
  position: absolute;
  right: 10px;
  top: 15%;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}


.fs-img05 {
  width: 60%;
  position: absolute;
  left: 10px;
  top: 20%;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.fs-img06 {
  width: 60%;
  position: absolute;
  right: 10px;
  top: 20%;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.fs-img07 {
  width: 60%;
  position: absolute;
  left: 200px;
  top: 22%;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.fs-img08 {
  width: 60%;
  position: absolute;
  left: 10px;
  top: 24%;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.fs-img09 {
  width: 60%;
  position: absolute;
  right: 10px;
  top: 24%;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.fs-img10 {
  width: 60%;
  position: absolute;
  left: 10px;
  top: 42%;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.fs-img11 {
  width: 60%;
  position: absolute;
  right: 10px;
  top: 42%;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.fs-img12 {
  width: 60%;
  position: absolute;
  left: 10px;
  top: 50%;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.fs-img13 {
  width: 60%;
  position: absolute;
  right: 10px;
  top: 50%;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.fs-img14 {
  width: 60%;
  position: absolute;
  left: 10px;
  top: 52%;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.fs-img15 {
  width: 60%;
  position: absolute;
  right: 10px;
  top: 52%;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.fs-img16 {
  width: 60%;
  position: absolute;
  left: 10px;
  top: 54%;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.fs-img17 {
  width: 60%;
  position: absolute;
  right: 10px;
  top: 54%;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.fs-img18 {
  width: 60%;
  position: absolute;
  left: 10px;
  top: 55%;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.fs-img19 {
  width: 60%;
  position: absolute;
  right: 10px;
  top: 55%;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.fs-img20 {
  width: 60%;
  position: absolute;
  left: 10px;
  top: 57%;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.fs-img21 {
  width: 60%;
  position: absolute;
  right: 10px;
  top: 57%;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.fs-img22 {
  width: 60%;
  position: absolute;
  left: 10px;
  top: 59%;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.fs-img23 {
  width: 60%;
  position: absolute;
  right: 10px;
  top: 59%;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.fs-img24 {
  width: 60%;
  position: absolute;
  left: 10px;
  top: 61%;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.fs-img25 {
  width: 60%;
  position: absolute;
  right: 10px;
  top: 61%;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}


.fs-img26 {
  width: 60%;
  position: absolute;
  left: 10px;
  top: 62%;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.fs-img27 {
  width: 60%;
  position: absolute;
  right: 10px;
  top: 62%;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.fs-img28 {
  width: 60%;
  position: absolute;
  left: 10px;
  top: 64%;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.fs-img29 {
  width: 60%;
  position: absolute;
  right: 10px;
  top: 64%;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
*/

/*.fs-img10 {
  width: 100%;
  position: absolute;
  left: 0%;
  top: 66%;
  z-index: 1;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.fs-img05 {
  width: 100%;
  position: absolute;

  right: 3.5vw;
  bottom: 2vw;

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

.fs-overlay {
  width: 50%;
  position: absolute;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
}


/* cm */

.cm {
  background-image: url(../img/04shin.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;
}

.cm-inner {
}

.cm-title-main {
  width: 100%;
  
  position: relative;
  z-index: 1;

  margin-inline: auto;

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

.cm-title-bg {
  width: 100%;
  position: relative;
  z-index: 0;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.cm-img01 {
  width: 50%;
  position: absolute;
  z-index: 1;
  top: 85%;
  left: 25%;

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

.cm-img02 {
  width: 40%;
  position: absolute;
  z-index: 1;
  top: 95%;
  left: 5%;

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

.cm-img03 {
  width: 40%;
  position: absolute;
  z-index: 1;
  top: 95%;
  left: 30%;

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

.cm-img04 {
  width: 40%;
  position: absolute;
  z-index: 1;
  top: 95%;
  right: 5%;

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

.cm-overlay {
  width: 50%;
  position: absolute;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
}


/* 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%;
}

.mv-img02 {
  height: 60%;
  left: 8%;
  position: absolute;
  top: 20%;
  width: 40%;
}
.mv-img03 {
  height: 60%;
  left: 58%;
  position: absolute;
  top: 20%;
  width: 40%;
}



/* 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: 100%;
/*  max-width: 900px;
*/
  position: absolute;
/*  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
*/
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.fv-img01 {
  width: 30%;
  position: absolute;
  left: 35vw;
  top: 29vw;
  animation: pikopiko 2.5s steps(2) infinite;

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

.fv-img02 {
  width: 28%;
  position: absolute;
  right: 6vw;
  top: 30vw;
  animation: pikopiko 2.5s steps(2) infinite;

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

.fv-img03 {
  width: 28%;
  position: absolute;
  left: 56vw;
  bottom: 2vw;
  animation: fuwafuwa-r 1s ease-in-out infinite alternate;

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

.fv-img04 {
  width: 20%;
  position: absolute;
  animation: pikopiko 2.5s steps(2) infinite;
  right: 17vw;
  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;
  }

  .fv-overlay {
    width: 50%;
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
  }

}
@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);
  }
}


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

.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 {
  margin: 20px auto 0px;
  width: 70%;
  background-color: #fff;
}

/* イベント情報 */
.event {
  padding: 30px 0;
  background-color: #fff;

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

.event-inner {
}

.event-bnr {
}

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

   @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: 100%;
  position: relative;
  z-index: 0; 
/*
  margin-inline: auto;
*/
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.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;
  }
}

/* CAR */

.car {
  background-image: url(../img/car_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;
*/
  background-color: #fff;
  padding: 30px;

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

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

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

.car-list {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 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;
  }
}


.car-item {
}

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

.car-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* 均等に配置 */
  grid-gap: 10px; /* 画像間のスペース */
  @media screen and (max-width: 768px) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* 均等に配置 */
    grid-gap: 5px; /* 画像間のスペース */
  }
}

.car-container img {
  width: 100%; /* 画像の幅を調整 */
  height: auto;
}

.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;
  }
}


/* 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: 100%;
  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);
  }
}

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

/* リース */

.lease {
/*  padding: 30px 0;
  margin: 20px auto 0px;
  width: 100%;*/
  margin-inline: auto;
  width: 70%;
  height: 100%;
  background-color: #ffd600 50%;

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

.lease-inner {
}

.lease-title {
  display: flex;
  justify-content: center;
  align-items: center;
img {
  max-width: 100%;
}
/*
  width: 100%;
  margin-inline: auto;
  @media screen and (max-width: 768px) {
    width: 100%;
  }
*/
}

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

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

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

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

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


/* 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: #aff3f8;
}

.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 {

  justify-content: center;
  align-items: center;  
  
  width: 70%;
  margin-top: calc(120 * var(--torem));

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

.old-safe-title {
  width: 100%;
  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(8, auto); /*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 {

}