@charset "UTF-8";

@font-face {
  font-family: "Alte DIN 1451 Mittelschrift";
  src: url("../fonts/din1451alt.ttf") format("truetype"),
  url("../fonts/din1451alt.woff") format("woff");
}

:root {
  --font-japanese: "Inter", sans-serif;
  --font-number: "Alte DIN 1451 Mittelschrift", sans-serif;
  --font-order: "Noto Serif JP", serif;
}

strong {
  font-weight: bold;
}

#fv .fv .rightBox .bottom-pc img {
  width: 468px;
}

.appeal {
  color: #FD7467;
}

.sp-break {
  display: none;
}

@media (max-width: 750px) {
  .sp-break {
    display: block;
  }
}

.pc-break {
  display: block;
}

@media (max-width: 750px) {
  .pc-break {
    display: none;
  }
}

/* 見出し */
.basewid h2 {
    font-size: 2rem;
    line-height: 1.4;
    color: #333;
    padding-left: 0;
    text-align: center;
}

@media (max-width: 750px) {
  .basewid h2 {
    font-size: 5.13vw;
  }
}

.basewid h2:before,
.basewid h2:after {
  display: none;
}

/* コンテナ */
.container {
  max-width: 996px;
  padding: 0 0.625rem;
  margin: 0 auto;
  font-family: var(--font-japanese);
}

@media (max-width: 750px) {
  .container {
    padding: 0 2.56vw;
  }
}

/* レンタカー人気エリア */
.popular-area {
  background-color: #f7f8ef;
  padding-top: 4.5rem;
  padding-bottom: 3.625rem;
}

@media (max-width: 750px) {
  .popular-area {
    padding-top: 8.21vw;
    padding-bottom: 4.62vw;
  }
}

.popular-area-figure {
  margin-top: 2rem;
}

@media (max-width: 750px) {
  .popular-area-figure {
    margin-top: 5.13vw;
  }
}

.popular-area-img {
  width: 100%;
  height: auto;
}

.popular-area-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem 1rem;
  margin-top: 1.125rem;
  padding-left: 0.375rem;
}

@media (max-width: 750px) {
  .popular-area-list {
    gap: 1.03vw 1.54vw;
    margin-top: 4.10vw;
    padding-left: 0.77vw;
  }
}

.popular-area-item {
  border: 1px solid #4EAC84;
  width: calc((100% - 2rem) / 3);
  min-width: 312px;
  border-radius: 0.625rem;
  position: relative;
  z-index: 1;
}

@media (max-width: 750px) {
  .popular-area-item {
    width: calc((100% - 1.54vw) / 2);
    min-width: auto;
  }
}

.popular-area-item-link {
  text-decoration: none;
  background-color: #fff;
  padding-left: 1.25rem;
  padding-right: 1.875rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.8125rem;
  position: relative;
  border-radius: 0.625rem;
}

.popular-area-item-link:hover {
  text-decoration: none;
}

@media (max-width: 750px) {
  .popular-area-item-link {
    height: 12.31vw;
    padding-left: 2.56vw;
    padding-right: 2.05vw;
  }
}

.popular-area-item-link::before {
  content: "";
  display: block;
  width: 100%;
  background-color: #4EAC84;
  position: absolute;
  top: 50%;
  left: -0.375rem;
  transform: translateY(-50%);
  border-radius: 0.625rem;
  height: 100%;
  z-index: -1;
}

.popular-area-item-area {
  font-size: 1.25rem;
  font-weight: bold;
  color: #4EAC84;
}

@media (max-width: 750px) {
  .popular-area-item-area {
    font-size: 3.08vw;
    line-height: 1.3;
  }
}

.popular-area-item-price {
  font-size: 2.4375rem;
  color: #333333;
  font-family: var(--font-number);
}

@media (max-width: 750px) {
  .popular-area-item-price {
    font-size: 6.41vw;
  }
}

.popular-area-item-price-unit {
  font-size: 1.25rem;
  font-weight: bold;
  margin-left: 0.25rem;
  vertical-align: middle;
}

@media (max-width: 750px) {
  .popular-area-item-price-unit {
    font-size: 3.59vw;
  }
}

.popular-area-caption {
  font-size: 1.125rem;
  margin-top: 0.625rem;
  text-align: right;
}

@media (max-width: 750px) {
  .popular-area-caption {
    font-size: 3.08vw;
    margin-top: 1.03vw;
  }
}

/* アンカーリンク */
.anchor-link-section {
  margin-top: 3.125rem;
}

.anchor-link {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem 0.9375rem;
  justify-content: center;
}

@media (max-width: 750px) {
  .anchor-link {
    gap: 1.03vw;
    flex-direction: column;
    align-items: center;
  }
}

.anchor-link-item {
  width: 19.6875rem;
}

@media (max-width: 750px) {
  .anchor-link-item {
    width: 64.87vw;
  }
}

.anchor-link-item-link {
  font-size: 1rem;
  color: #333333;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid #333333;
  display: flex;
  height: 3.125rem;
  position: relative;
  justify-content: center;
  align-items: center;
}

@media (max-width: 750px) {
  .anchor-link-item-link {
    font-size: 3.59vw;
    height: 8.72vw;
  }
}

.anchor-link-item-link:hover {
  text-decoration: none;
}

.anchor-link-item-link-arrow {
  font-size: 1rem;
  color: #333333;
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 750px) {
  .anchor-link-item-link-arrow {
    font-size: 3.59vw;
    right: 2.56vw;
  }
}

/* 北海道でレンタカー予約 */
.reservation {
  padding-top: 3.75rem;
}

@media (max-width: 750px) {
  .reservation {
    padding-top: 10.26vw;
  }
}

.reservation-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2.375rem;
  margin-top: 2.5rem;
}

@media (max-width: 750px) {
  .reservation-list {
    gap: 5.64vw;
    margin-top: 10.26vw;
    flex-direction: column;
    align-items: center;
  }
}

.reservation-item {
  width: calc((100% - 4.75rem) / 3);
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 750px) {
  .reservation-item {
    width: calc(100% - 5.64vw * 2);
  }
}

.reservation-item-img-wrap {
  width: 7.0625rem;
}

@media (max-width: 750px) {
  .reservation-item-img-wrap {
    width: 22.31vw;
  }
}

.reservation-item-img {
  width: 100%;
  height: auto;
}

.reservation-item-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-top: 0.75rem;
  position: relative;
}

@media (max-width: 750px) {
  .reservation-item-title {
    font-size: 4.36vw;
    margin-top: 1.54vw;
  }
}

.reservation-item-title::before {
  content: "";
  display: block;
  width: 2.625rem;
  height: 2px;
  background-color: #0C8953;
  position: absolute;
  bottom: -0.625rem;
  left: 50%;
  transform: translateX(-50%);
}

@media (max-width: 750px) {
  .reservation-item-title::before {
    width: 10.90vw;
    bottom: -2.05vw;
  }
}

.reservation-item-text {
  font-size: 0.9375rem;
  line-height: 1.7;
  margin-top: 1.5rem;
  text-align: center;
}

@media (max-width: 750px) {
  .reservation-item-text {
    font-size: 3.59vw;
    margin-top: 3.85vw;
  }
}

/* 今すぐチェック！ */
.check {
  margin-top: 2rem;
  background-color: #F8F0EF;
  padding: 2rem 1.75rem;
  width: calc(100% - 1rem * 2);
}

@media (max-width: 750px) {
  .check {
    margin-top: 6.92vw;
    padding: 4.36vw 8.21vw;
  }
}

.check-title {
  font-size: 1.8125rem;
  font-weight: bold;
  color: #333333;
}

@media (max-width: 750px) {
  .check-title {
    font-size: 4.62vw;
    text-align: center;
  }
}

.check-content {
  margin-top: 0.9375rem;
  display: flex;
  align-items: flex-end;
  gap: 1.25rem;
}

@media (max-width: 750px) {
  .check-content {
    flex-direction: column;
    align-items: center;
    margin-top: 4.10vw;
    gap: 2.56vw;
  }
}

.check-text {
  font-size: 1rem;
  line-height: 1.7;
}

@media (max-width: 750px) {
  .check-text {
    font-size: 3.59vw;
    line-height: 1.6;
  }
}

.check-link {
  background-color: #0C8953;
  color: #fff;
  font-weight: 500;
  font-size: 1.25rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19.1875rem;
  height: 3.125rem;
}

@media (max-width: 750px) {
  .check-link {
    width: 45.38vw;
    height: 8.72vw;
    line-height: 1.2;
    font-size: 3.33vw;
    margin-inline: auto 0;
  }
}

/* 季節別おすすめドライブコース */
.recommend-drive-course {
  padding-top: 4.375rem;
  padding-bottom: 6.25rem;
}

@media (max-width: 750px) {
  .recommend-drive-course {
    padding-top: 10.26vw;
    padding-bottom: 10.26vw;
  }
}

.recommend-drive-course-list {
  display: flex;
  flex-wrap: wrap;
}

.recommend-drive-course-tab {
  display: flex;
  gap: 0.375rem;
  justify-content: center;
  margin-top: 2.5rem;
}

@media (max-width: 750px) {
  .recommend-drive-course-tab {
    margin-top: 4.36vw;
  }
}

.recommend-drive-course-tab-item {
  font-size: 1.3125rem;
  width: 11.625rem;
  height: 3.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border: 1px solid #0C8953;
  border-radius: 0.3125rem 0.3125rem 0 0;
  cursor: pointer;
}

@media (max-width: 750px) {
  .recommend-drive-course-tab-item {
    font-size: 3.85vw;
    width: 25.64vw;
    height: 11.03vw;
    flex-direction: column;
    align-items: center;
    line-height: 1.3;
  }
}

.recommend-drive-course-tab-item.active {
  background-color: #0C8953;
  color: #fff;
}

.recommend-drive-course-tab-item-date {
  font-size: 0.9375rem;
}

@media (max-width: 750px) {
  .recommend-drive-course-tab-item-date {
    font-size: 2.82vw;
  }
}

.recommend-drive-course-contents {
  display: flex;
  gap: 3.125rem;
  margin-top: 1.25rem;
}

@media (max-width: 750px) {
  .recommend-drive-course-contents {
    flex-direction: column-reverse;
    gap: 4.62vw;
    margin-top: 2.82vw;
    width: calc(100% - 6.92vw * 2);
    margin-inline: auto;
  }
}

.recommend-drive-course-item-heading {
  background-color: #F7F8EF;
  padding: 1.125rem;
  position: relative;
}

@media (max-width: 750px) {
  .recommend-drive-course-item-heading {
    padding: 3.59vw;
  }
}

.recommend-drive-course-item-order {
  font-size: 1.25rem;
  line-height: 1.4;
}

@media (max-width: 750px) {
  .recommend-drive-course-item-order {
    font-size: 4.36vw;
  }
}

.recommend-drive-course-item-spot {
  margin-top: .625rem;
}

.recommend-drive-course-item-spot-item {
  font-size: 1.0625rem;
  line-height: 1.4;
}

@media (max-width: 750px) {
  .recommend-drive-course-item-spot-item {
    font-size: 3.59vw;
  }
}

.recommend-drive-course-item-distance {
  border: 1px solid #505050;
  padding: 0 0.5rem;
  height: 1.6875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.0625rem;
  position: absolute;
  right: 0.9375rem;
  bottom: 0.75rem;
}

@media (max-width: 750px) {
  .recommend-drive-course-item-distance {
    font-size: 3.85vw;
    height: 6.15vw;
  }
}

.recommend-drive-course-item-text {
  font-size: 0.9375rem;
  line-height: 1.7;
  margin-top: 1.3125rem;
}

@media (max-width: 750px) {
  .recommend-drive-course-item-text {
    font-size: 3.59vw;
    margin-top: 3.85vw;
    text-align: center;
    line-height: 1.4;
  }
}

.recommend-drive-course-item-note {
  font-size: 0.75rem;
  margin-top: 0.25rem;
  line-height: 1.6;
}

@media (max-width: 750px) {
  .recommend-drive-course-item-note {
    font-size: 3.08vw;
    margin-top: 3.08vw;
    text-align: center;
  }
}

.swiper-container {
  position: relative;
}

.swiper {
  width: 34.4375rem;
}

@media (max-width: 750px) {
  .swiper {
    width: calc(100% + 6.92vw * 2);
    margin-left: -6.92vw;
  }
}

.swiper-slide-image {
  width: 100%;
  height: auto;
}

.swiper-pagination-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  margin-top: 0.5rem;
}

.swiper-pagination-bullets.swiper-pagination-horizontal {
  display: flex;
  gap: 0.625rem;
  justify-content: center;
}

.swiper-pagination-bullet {
  width: 0.625rem;
  height: 0.625rem;
  border: 1px solid #333333;
  border-radius: 50%;
}

.swiper-pagination-bullet-active {
  background-color: #333333;
}

/* レンタカーで巡る観光スポット */
.sightseeing {
  padding-top: 7.4375rem;
  padding-bottom: 5.625rem;
  background-color: #D8EBE1;
}

@media (max-width: 750px) {
  .sightseeing {
    padding-top: 8.21vw;
    padding-bottom: 7.69vw;
  }
}

.sightseeing-list {
  margin-top: 4.5rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

@media (max-width: 750px) {
  .sightseeing-list {
    margin-top: 5.13vw;
    gap: 8.21vw;
  }
}

.sightseeing-item:not(:last-child){
  padding-bottom: 1.875rem;
  position: relative;
}

@media (max-width: 750px) {
  .sightseeing-item:not(:last-child) {
    padding-bottom: 5.13vw;
  }
}

.sightseeing-item:not(:last-child):after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #AAAAAA;
  position: absolute;
  bottom: 0;
  left: 0;
}

@media (max-width: 750px) {
  .sightseeing-item:not(:last-child):after {
    width: 30.77vw;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}

.sightseeing-item-title {
  font-size: 1.75rem;
  font-weight: bold;
  color: #4EAC84;
  display: flex;
  gap: 0.3125rem;
  align-items: flex-end;
  line-height: 1.4;
}

@media (max-width: 750px) {
  .sightseeing-item-title {
    font-size: 4.36vw;
  }
}

.sightseeing-item:nth-child(even) .sightseeing-item-title {
  flex-direction: row-reverse;
  text-align: right;
}

.sightseeing-item-title-order {
  font-size: 4.75rem;
  font-family: var(--font-order);
  margin-bottom: -0.25rem;
}

@media (max-width: 750px) {
  .sightseeing-item-title-order {
    margin-bottom: 0.51vw;
    font-size: 12.31vw;
  }
}

.sightseeing-item-content {
  display: flex;
  gap: 1.5rem;
  margin-top: 1.1875rem;
}

@media (max-width: 750px) {
  .sightseeing-item-content {
    margin-top: 3.08vw;
    flex-direction: column;
    align-items: center;
  }
}

.sightseeing-item:nth-child(even) .sightseeing-item-content {
  flex-direction: row-reverse;
}

@media (max-width: 750px) {
  .sightseeing-item:nth-child(even) .sightseeing-item-content {
    flex-direction: column;
  }
}

.sightseeing-item-img-wrap {
  width: 29.4375rem;
}

@media (max-width: 750px) {
  .sightseeing-item-img-wrap {
    width: 100%;
  }
}

.sightseeing-item-img {
  width: 100%;
  height: auto;
}

.sightseeing-item-text-wrap {
  flex: 1;
}

.sightseeing-item-text {
  font-size: 1.0625rem;
  line-height: 1.6;
}

@media (max-width: 750px) {
  .sightseeing-item-text {
    font-size: 3.33vw;
    line-height: 1.4;
  }
}

.sightseeing-item-caption {
  font-size: 1.0625rem;
  line-height: 1.6;
  margin-top: 1.25rem;
  color: #1D6345;
}

@media (max-width: 750px) {
  .sightseeing-item-caption {
    font-size: 3.33vw;
    line-height: 1.4;
  }
}

/* よくある質問 */
.faq {
  margin-top: 4.375rem;
}

@media (max-width: 750px) {
  .faq {
    margin-top: 10.26vw;
  }
}

.faq-list {
  margin-top: 2.5rem;
}

@media (max-width: 750px) {
  .faq-list {
    margin-top: 7.18vw;
  }
}

.faq-item-title {
  font-size: 1.125rem;
  font-weight: bold;
  padding: 1rem 0;
  padding-right: 2em;
  color: #006E2E;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  list-style: none;
  border-bottom: 1px solid #DDDDDD;
  line-height: 1.7;
}

@media (max-width: 750px) {
  .faq-item-title {
    font-size: 3.59vw;
    padding: 5.13vw 0;
    padding-right: 2em;
    gap: 1.03vw;
  }
}

.faq-item-title::-webkit-details-marker {
  display: none;
}

.faq-item-title::before,
.faq-item-title::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #666666;
  transition: all 0.3s ease;
}

.faq-item-title::before {
  width: 1.125rem;
  height: 2px;
  right: 1.25rem;
}

@media (max-width: 750px) {
  .faq-item-title::before {
    width: 3.08vw;
    right: 3.08vw;
  }
}

.faq-item-title::after {
  width: 2px;
  height: 1.125rem;
  right: 1.75rem;
}

@media (max-width: 750px) {
  .faq-item-title::after {
    height: 3.08vw;
    right: 4.36vw;
  }
}

.faq-item[open] .faq-item-title::after {
  transform: translateY(-50%) rotate(90deg);
  opacity: 0;
}

.faq-item-title-icon {
  display: block;
  width: 2.0625rem;
  flex-shrink: 0;
}

@media (max-width: 750px) {
  .faq-item-title-icon {
    width: 4.62vw;
    flex-shrink: 0;
  }
}

.faq-item-title-icon-img {
  width: 100%;
  height: auto;
}

.faq-item-content {
  padding: 1rem 0 2.5rem;
  background-color: #fff;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

@media (max-width: 750px) {
  .faq-item-content {
    padding: 5.13vw 0 10.26vw;
    gap: 1.03vw;
  }
}

.faq-item-content-icon {
  display: block;
  width: 2.0625rem;
  flex-shrink: 0;
}

@media (max-width: 750px) {
  .faq-item-content-icon {
    width: 4.62vw;
    flex-shrink: 0;
  }
}

.faq-item-content-icon-img {
  width: 100%;
  height: auto;
}

.faq-item-text {
  font-size: 1rem;
  line-height: 1.7;
  flex: 1;
}

@media (max-width: 750px) {
  .faq-item-text {
    font-size: 2.82vw;
  }
}

/* レンタカーを探す */
.search {
  margin-top: 5.625rem;
  padding-bottom: 5rem;
}

.search-section {
  margin-top: 1.25rem;
}

@media (max-width: 750px) {
  .search-section {
    margin-top: 5.13vw;
  }
}

.search-section:not(:first-child) {
  margin-top: 1.875rem;
}

@media (max-width: 750px) {
  .search-section:not(:first-child) {
    margin-top: 5.13vw;
  }
}

.search-section-title {
  font-size: 1.25rem;
  font-weight: 700;
  border-bottom: 1px solid #0C8953;
  border-left: 5px solid #0C8953;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 3px 0 0 3px;
}

@media (max-width: 750px) {
  .search-section-title {
    font-size: 4.36vw;
    padding: 1.28vw 3.21vw;
  }
}

.search-section-title-icon.airport {
  width: 1.5625rem;
}

.search-section-title-icon.train {
  width: 1.4375rem;
}

.search-section-title-icon.city {
  width: 1.8125rem;
}

.search-section-title-icon-img {
  width: 100%;
  height: auto;
}

.search-section-list {
  margin-top: 1.875rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 1rem;
}

@media (max-width: 750px) {
  .search-section-list {
    margin-top: 3.08vw;
    gap: 2.56vw 2.05vw;
  }
}

.search-section-item-link {
  width: 11.375rem;
  color: #333333;
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid #DDDDDD;
  padding-bottom: 1.125rem;
  padding-left: 1.8125rem;
  position: relative;
  display: block;
}

@media (max-width: 750px) {
  .search-section-item-link {
    width: 28.21vw;
    font-size: 3.33vw;
    padding-bottom: 2.82vw;
  }
}

.search-section-item-link::before {
  content: "▶";
  font-size: 0.6875rem;
  color: #0C8953;
  position: absolute;
  left: 0.5rem;
  top: 0;
}

@media (max-width: 750px) {
  .search-section-item-link::before {
    font-size: 2.31vw;
  }
}

/* フッター */
#footer.pc-footer {
  margin-top: 6.4375rem;
}