@charset "utf-8";

#campaign-contents .campaign-contents-inner {
  background: #EAFFFF;
  background: radial-gradient(circle, rgba(234, 255, 255, 1) 4%, rgba(106, 172, 255, 1) 100%);
}

/*
*********************************************************
#section-aeon-exhibition-kv
*********************************************************
*/
#section-aeon-exhibition-kv {
  position: relative;
  margin: 0 auto;
}

#section-aeon-exhibition-kv .aeon-exhibition-kv-inner {
  margin: 0 auto;
}

#section-aeon-exhibition-kv .aeon-exhibition-kv-inner .kv {
  position: relative;
  overflow: hidden;
  max-width: 1130px;
  margin: 0 auto;
  aspect-ratio: 1130 / 1292;
}

#section-aeon-exhibition-kv .aeon-exhibition-kv-inner .kv .btn-wrap {
  position: absolute;
  bottom: calc(58 / 1292 * 100%);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

#section-aeon-exhibition-kv .aeon-exhibition-kv-inner .kv .btn-nml.btn-lg {
  font-size: 2rem;
  width: 516px;
  min-height: 58px;
}

#section-aeon-exhibition-kv .aeon-exhibition-kv-inner .kv .btn-nml.cv-btn.accent-org {
  background: #db6000;
  border: none;
}

#section-aeon-exhibition-kv .aeon-exhibition-kv-inner .kv .btn-nml.cv-btn.accent-org:hover {
  background: #fd8c35;
  opacity: 1;
}

#section-aeon-exhibition-kv .aeon-exhibition-kv-inner .kv img {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 1130px;
  width: 100%;
  height: auto;
}

/* -------------------------------------- */
/* ----------------- SP ----------------- */
/* -------------------------------------- */
@media (max-width:768px) {
  #section-aeon-exhibition-kv .aeon-exhibition-kv-inner .kv {
    max-width: inherit;
    aspect-ratio: 1500 / 2570;
  }

  #section-aeon-exhibition-kv .aeon-exhibition-kv-inner .kv .btn-wrap {
    bottom: calc(100 / 2570 * 100%);
    width: 80%;
  }

  #section-aeon-exhibition-kv .aeon-exhibition-kv-inner .kv .btn-wrap .btn-ttl {
    margin-bottom: 6px;
    color: #004098;
  }

  #section-aeon-exhibition-kv .aeon-exhibition-kv-inner .kv .btn-nml.btn-lg {
    width: 100%;
    min-height: auto;
    font-size: 1.4rem;
    padding: 10px 0;
  }
}

/*
*********************************************************
section-present
*********************************************************
*/
#section-present {
  text-align: center;
  padding-top: 70px;
}

/* --------------------- title-wrap --------------------  */
#section-present .title-wrap.get-id {
  color: #fff;
}

#section-present .title-wrap.test-drive {
  color: #003c88;
}

#section-present .title-wrap h2 {
  font-weight: bold;
  line-height: 1.4;
}

#section-present .title-wrap h3 {
  font-weight: bold;
  line-height: 1.5;
}

#section-present .title-wrap.get-id h2 {
  color: #fff67f;
  font-size: 3.8rem;
  padding-block-end: 15px;
  text-shadow:
    0 0 33px rgba(0, 83, 139, 1),
    0 0 45px rgba(0, 83, 139, 0.8),
    3px 3px 9px rgba(0, 83, 139, 0.7),
    -3px -3px 9px rgba(0, 83, 139, 0.7),
    3px -3px 9px rgba(0, 83, 139, 0.7),
    -3px 3px 9px rgba(0, 83, 139, 0.7);
}

#section-present .title-wrap.get-id h2 span {
  font-size: 8.0rem;
  line-height: 1.6;
}

#section-present .title-wrap.get-id h3 {
  font-size: 3.4rem;
  font-weight: bold;
  text-shadow:
    0 0 23px rgba(0, 83, 139, 1),
    0 0 45px rgba(0, 83, 139, 0.8),
    3px 3px 9px rgba(0, 83, 139, 0.7),
    -3px -3px 9px rgba(0, 83, 139, 0.7),
    3px -3px 9px rgba(0, 83, 139, 0.7),
    -3px 3px 9px rgba(0, 83, 139, 0.7);
}

#section-present .title-wrap.test-drive {
  margin-bottom: 25px;
}

#section-present .title-wrap.test-drive h2 {
  display: inline-block;
  position: relative;
  font-size: 5.4rem;
  padding: 10px 60px;
}

#section-present .title-wrap.test-drive h2::before,
#section-present .title-wrap.test-drive h2::after {
  content: '';
  position: absolute;
  top: 20%;
  width: 160px;
  height: 3px;
  background: linear-gradient(90deg, #003c88 0%, #003c88 100%);
}

#section-present .title-wrap.test-drive h2::before {
  left: -25px;
  transform: translateY(-50%) rotate(60deg);
  transform-origin: left top;
}

#section-present .title-wrap.test-drive h2::after {
  right: -25px;
  transform: translateY(-50%) rotate(-60deg);
  transform-origin: right top;
}

#section-present .title-wrap.test-drive h3 {
  font-size: 3.2rem;
}

@media (min-width: 769px) and (max-width: 1030px) {
  #section-present .title-wrap.get-id {
    padding-left: 16px;
    padding-right: 16px;
  }

  #section-present .title-wrap.get-id h2 {
    font-size: 2.85vw;
  }

  #section-present .title-wrap.get-id h2 span {
    font-size: 6vw;
  }

  #section-present .title-wrap.get-id h3 {
    font-size: 2.85vw;
  }
}

@media (min-width: 769px) and (max-width: 950px) {
  #section-present .title-wrap.get-id h2 {
    padding-block-end: 15px;
  }

  #section-present .title-wrap.test-drive h2 {
    font-size: 3.4rem;
  }

  #section-present .title-wrap.test-drive h2::before,
  #section-present .title-wrap.test-drive h2::after {
    width: 120px;
  }

  #section-present .photo-wrap.present .waonpoint p,
  #section-present .photo-wrap.present .iwrap p,
  #section-present .photo-wrap p.sp-only.note,
  #section-present .photo-wrap.precrash-brake p {
    font-size: 1.4rem;
  }
}

/* --------------------- photo-wrap --------------------  */
#section-present .photo-wrap.present {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
}

@media (min-width: 769px) and (max-width: 1030px) {
  #section-present .photo-wrap.present {
    padding-left: 16px;
    padding-right: 16px;
  }
}

#section-present .photo-wrap.present .waonpoint,
#section-present .photo-wrap.present .iwrap {
  flex: 0 0 auto;
  min-width: 0;
}

#section-present .photo-wrap.present .waonpoint {
  max-width: 545px;
  padding-top: 40px;
  width: 545px;
}

#section-present .photo-wrap.present .iwrap {
  max-width: 375px;
  width: 375px;
}

#section-present .photo-wrap.present img {
  width: 100%;
  height: auto;
  display: block;
}

#section-present .photo-wrap.precrash-brake {
  margin-bottom: 0;
  padding: 0 16px;
}

#section-present .photo-wrap.precrash-brake img {
  width: 100%;
  max-width: 940px;
  height: auto;
  display: block;
  margin: 0 auto;
}

#section-present .photo-wrap.present .waonpoint p,
#section-present .photo-wrap.precrash-brake p {
  color: #003c88;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.4;
  margin-top: 16px;
}

/* ---------------------------------------------  */
/* --------------------- SP --------------------  */
/* ---------------------------------------------  */
@media (max-width: 768px) {
  #section-present {
    padding-top: 30px;
  }

  #section-present .title-wrap.get-id h2 {
    font-size: 5.3vw;
    line-height: 1.6;
    text-shadow:
      0 0 12px rgba(0, 83, 139, 1),
      0 0 24px rgba(0, 83, 139, 0.8),
      2px 2px 6px rgba(0, 83, 139, 0.7),
      -2px -2px 6px rgba(0, 83, 139, 0.7),
      2px -2px 6px rgba(0, 83, 139, 0.7),
      -2px 2px 6px rgba(0, 83, 139, 0.7);
  }

  #section-present .title-wrap.get-id h2 span {
    font-size: 7vw;
  }

  #section-present .title-wrap.get-id h3 {
    font-size: 4vw;
    line-height: 2;
    text-shadow:
      0 0 12px rgba(0, 83, 139, 1),
      0 0 24px rgba(0, 83, 139, 0.8),
      2px 2px 6px rgba(0, 83, 139, 0.7),
      -2px -2px 6px rgba(0, 83, 139, 0.7),
      2px -2px 6px rgba(0, 83, 139, 0.7),
      -2px 2px 6px rgba(0, 83, 139, 0.7);
  }

  #section-present .title-wrap.test-drive h2::before,
  #section-present .title-wrap.test-drive h2::after {
    width: 30px;
    height: 2px;
  }

  #section-present .photo-wrap.present {
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
    padding: 0 16px;
  }

  #section-present .photo-wrap.present .waonpoint {
    width: 80%;
    max-width: inherit;
    padding-top: 20px;
  }

  #section-present .photo-wrap.present .iwrap {
    width: 60%;
    max-width: inherit;
  }

  #section-present .photo-wrap.precrash-brake img {
    max-width: 100%;
  }

  #section-present .photo-wrap.present .waonpoint p,
  #section-present .photo-wrap.present .iwrap p,
  #section-present .photo-wrap p.sp-only.note,
  #section-present .photo-wrap.precrash-brake p {
    color: #003c88;
    font-size: 1.0rem;
    font-weight: normal;
    margin-top: 8px;
  }

  #section-present .title-wrap.test-drive h2 {
    font-size: 5vw;
    padding: 10px 60px 5px;
  }

  #section-present .title-wrap.test-drive h2::before,
  #section-present .title-wrap.test-drive h2::after {
    top: 10%;
    width: 18vw;
  }

  #section-present .title-wrap.test-drive h2::before {
    left: 4vw;
  }

  #section-present .title-wrap.test-drive h2::after {
    right: 4vw;
  }

  #section-present .title-wrap.test-drive h3 {
    font-size: 4vw;
  }

  #section-present .photo-wrap.precrash-brake {
    padding: 0 16px;
  }

  #section-present .photo-wrap.precrash-brake p {
    margin-top: 25px;
  }
}

@media (min-width: 600px) and (max-width: 768px) {
  #section-present .title-wrap.test-drive h2::before {
    left: -2vw;
  }

  #section-present .title-wrap.test-drive h2::after {
    right: -2vw;
  }

  #section-present .photo-wrap.present .waonpoint p,
  #section-present .photo-wrap.present .iwrap p,
  #section-present .photo-wrap p.sp-only.note,
  #section-present .photo-wrap.precrash-brake p {
    font-size: 1.4rem;
  }
}

@media (max-width: 360px) {

  #section-present .photo-wrap p.sp-only.note,
  #section-present .photo-wrap.precrash-brake p {
    text-align: justify;
  }
}

@media (max-width: 320px) {
  #section-present .title-wrap.test-drive h2 {
    font-size: 4.6vw;
    padding: 10px 40px 5px;
  }
}

/*
*********************************************************
video-container
*********************************************************
*/
#section-present .video-container {
  padding: 60px 16px 32px;
  margin-bottom: 0;
}

#section-present .video-container .content-pb {
  padding-bottom: 0;
}

@media (max-width: 768px) {
  #section-present .inner-xs-wrap {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #section-present .video-container {
    width: 100% !important;
    margin: 0 !important;
    padding: 40px 16px !important;
    box-sizing: border-box !important;
  }

  /* 左右16px余白内で1:1の正方形を維持 */
  #section-present .video-container .video_area {
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100vw - 32px) !important;
  }
}

/*
*********************************************************
section-shoplist
*********************************************************
*/
#section-shoplist {
  padding: 80px 0;
  margin-bottom: 60px;
}

#section-shoplist .h2-wrap {
  text-align: center;
  margin-bottom: 24px;
}

#section-shoplist .h2-wrap h2 {
  color: #003c88;
  font-size: 4.4rem;
  font-weight: bold;
}

#section-shoplist .acc-wrap {
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 15px;
}

#section-shoplist .acc-wrap summary {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  position: relative;
  color: white;
  font-size: 3.2rem;
  font-weight: normal;
  cursor: pointer;
  list-style: none;
  height: 80px;
  margin: 0 auto;
  padding: 10px 20px 25px 20px;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  transition: background-color 0.3s ease;
}

#section-shoplist .acc-wrap summary::before,
#section-shoplist .acc-wrap summary::after {
  content: '';
  position: absolute;
  bottom: 13px;
  width: 12px;
  height: 3px;
  background: #fff;
}

#section-shoplist .acc-wrap summary::before {
  left: calc(50% - 12px);
  transform: rotate(30deg);
  transform-origin: center bottom;
}

#section-shoplist .acc-wrap summary::after {
  right: calc(50% - 12px);
  transform: rotate(-30deg);
  transform-origin: center bottom;
}

#section-shoplist .acc-wrap:nth-child(odd) summary {
  background: #0089ca;
}

#section-shoplist .acc-wrap:nth-child(even) summary {
  background: #0069ac;
}

#section-shoplist .acc-wrap:nth-child(odd) summary:hover {
  background: #00659b;
}

#section-shoplist .acc-wrap:nth-child(even) summary:hover {
  background: #005088;
}

#section-shoplist .acc-wrap summary::-webkit-details-marker {
  display: none;
}

#section-shoplist .acc-wrap .acc-contents {
  background: #f8f9fa;
  border-left: 2px solid #4A90E2;
  border-right: 2px solid #4A90E2;
  border-bottom: 2px solid #4A90E2;
  max-width: 740px;
  margin: 0 auto;
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.3s ease;
}

#section-shoplist .acc-wrap .acc-contents.show {
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.4s ease;
}

#section-shoplist .acc-wrap .acc-contents .acc-contents-inner {
  min-height: 0;
}

#section-shoplist .acc-contents-inner {
  min-height: 50px;
}

#section-shoplist .list-table {
  width: 100%;
  max-width: 740px;
  border-collapse: collapse;
  background-color: #fff;
  color: #003c88;
  font-size: 2.4rem;
}

#section-shoplist .list-table td {
  vertical-align: top;
  border: 1px solid #0075c2;
  line-height: 1.5;
  padding: 15px;
}

#section-shoplist .list-table .venue-name {
  vertical-align: middle;
  width: 50%;
  font-weight: bold;
  text-align: right;
}

#section-shoplist .list-table .dates {
  vertical-align: middle;
  width: 50%;
  background: #fff;
  text-align: left;
  font-weight: bold;
}

@media (min-width: 769px) and (max-width: 889px) {
  #section-shoplist .h2-wrap h2 {
    font-size: 4rem;
  }
}

/* ---------------------------------------------  */
/* --------------------- SP --------------------  */
/* ---------------------------------------------  */
@media (max-width: 768px) {
  #section-shoplist {
    padding-top: 30px;
    padding-bottom: 40px;
    margin-bottom: 40px;
  }

  #section-shoplist .acc-wrap .acc-contents {
    max-width: inherit;
  }

  #section-shoplist .h2-wrap {
    margin-bottom: 12px;
  }

  #section-shoplist .h2-wrap h2 {
    font-size: 5vw;
  }

  #section-shoplist .acc-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }

  #section-shoplist .acc-wrap summary {
    font-size: 4.8vw;
    font-weight: bold;
    height: 66px;
  }

  #section-shoplist .list-table {
    max-width: inherit;
    font-size: 3vw;
  }

  #section-shoplist .acc-wrap summary::before,
  #section-shoplist .acc-wrap summary::after {
    bottom: 15px;
  }

  #section-shoplist .list-table td {
    padding: 10px;
  }
}

@media(min-width: 600px)and (max-width: 768px) {
  #section-shoplist .acc-wrap summary {
    font-size: 2.8rem;
    height: 76px;
  }
}

@media (max-width: 320px) {
  #section-shoplist .list-table td {
    padding: 10px 5px;
  }

  #section-shoplist .acc-wrap summary {
    font-size: 1.6rem;
    height: 60px;
  }
}

/*
*********************************************************
section
*********************************************************
*/
#section-eyesight .section {
  background-color: rgba(255, 255, 255, 0.4);
  text-align: justify;
  margin-top: 0 !important;
}

#section-eyesight .section .note-list {}

#section-eyesight .section .note-list>li>.txt {
  text-align: justify;
}

/*
*********************************************************
#section-eyesight .eyesight-acc
*********************************************************
*/
#section-eyesight .eyesight-acc {
  overflow: hidden;
  max-width: 810px;
  margin: 0 auto;
}

#section-eyesight .eyesight-summary {
  background-color: rgba(255, 255, 255, 0.6);
  border-top: 1px solid var(--silver);
  border-bottom: 1px solid var(--silver);
  font-weight: var(--fwBold);
  font-size: 1.6rem;
  text-align: center;
  cursor: pointer;
  list-style: none;
  padding: 18px 56px 18px 24px;
}

#section-eyesight .eyesight-summary:hover {
  background: #e9ecef;
}

/* +-アイコン */
#section-eyesight .eyesight-summary {
  position: relative !important;
}

#section-eyesight .eyesight-summary::before,
#section-eyesight .eyesight-summary::after {
  content: '' !important;
  position: absolute !important;
  right: 26px !important;
  top: 50% !important;
  width: 20px !important;
  height: 1px !important;
  background: var(--black);
  transition: all 0.3s ease !important;
}

#section-eyesight .eyesight-summary::before {
  transform: translateY(-50%) !important;
}

#section-eyesight .eyesight-summary::after {
  transform: translateY(-50%) rotate(90deg) !important;
  transition: transform 0.3s ease !important;
}

#section-eyesight .eyesight-acc.open .eyesight-summary::after {
  transform: translateY(-50%) rotate(0deg) !important;
}

#section-eyesight .eyesight-contents {
  background: #fff;
  display: none;
}

#section-eyesight .eyesight-inner {
  padding: 20px;
}

/* ---------------------------------------------  */
/* --------------------- SP --------------------  */
/* ---------------------------------------------  */
@media screen and (max-width: 768px) {
  #section-eyesight .eyesight-acc {
    margin: 0 16px;
    max-width: none;
  }

  #section-eyesight .eyesight-summary {
    padding: 15px;
    font-size: 1.6rem;
  }

  #section-eyesight .eyesight-summary::before,
  #section-eyesight .eyesight-summary::after {
    right: 15px !important;
    width: 16px !important;
    height: 2px !important;
  }

  #section-eyesight .eyesight-inner {
    padding: 15px;
  }
}