@charset "UTF-8";
/* --

 contents.css

 ------------------------------------

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

	$contents

-----------------------------------*/
/**======================================
	setting
======================================**/
@import url(https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500,700,900&display=swap&subset=japanese);
@import url(https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap);
/* animation
------------------------------------------------- */
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2em);
            transform: translateY(2em);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2em);
            transform: translateY(2em);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    z-index: -1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    z-index: -1;
  }
}
@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(1em);
            transform: translateX(1em);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(1em);
            transform: translateX(1em);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-1em);
            transform: translateX(-1em);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-1em);
            transform: translateX(-1em);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@-webkit-keyframes txtst1 {
  0% {
    -webkit-transform: rotate(-350deg) translateY(100%);
            transform: rotate(-350deg) translateY(100%);
  }
  100% {
    -webkit-transform: rotate(-360deg) translateY(0);
            transform: rotate(-360deg) translateY(0);
  }
}
@keyframes txtst1 {
  0% {
    -webkit-transform: rotate(-350deg) translateY(100%);
            transform: rotate(-350deg) translateY(100%);
  }
  100% {
    -webkit-transform: rotate(-360deg) translateY(0);
            transform: rotate(-360deg) translateY(0);
  }
}
@-webkit-keyframes txtst2 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-0.625rem);
            transform: translateX(-0.625rem);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes txtst2 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-0.625rem);
            transform: translateX(-0.625rem);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@-webkit-keyframes txtst3 {
  0% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes txtst3 {
  0% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes mask1 {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  35% {
    clip-path: inset(0);
  }
  65% {
    clip-path: inset(0);
    opacity: 1;
  }
  90% {
    clip-path: inset(0 0 0 70%);
    opacity: 0.3;
  }
  100% {
    clip-path: inset(0 0 0 100%);
    opacity: 0.1;
  }
}
@keyframes mask1 {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  35% {
    clip-path: inset(0);
  }
  65% {
    clip-path: inset(0);
    opacity: 1;
  }
  90% {
    clip-path: inset(0 0 0 70%);
    opacity: 0.3;
  }
  100% {
    clip-path: inset(0 0 0 100%);
    opacity: 0.1;
  }
}
@-webkit-keyframes mask2 {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  65% {
    clip-path: inset(0);
  }
  100% {
    clip-path: inset(0);
  }
}
@keyframes mask2 {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  65% {
    clip-path: inset(0);
  }
  100% {
    clip-path: inset(0);
  }
}
@-webkit-keyframes mask3 {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  25% {
    clip-path: inset(0);
  }
  70% {
    clip-path: inset(0);
    opacity: 1;
  }
  100% {
    clip-path: inset(0 0 0 100%);
    opacity: 0.1;
  }
}
@keyframes mask3 {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  25% {
    clip-path: inset(0);
  }
  70% {
    clip-path: inset(0);
    opacity: 1;
  }
  100% {
    clip-path: inset(0 0 0 100%);
    opacity: 0.1;
  }
}
@-webkit-keyframes toggle-top {
  0% {
    -webkit-transform: translateY(-4px) rotate(0deg);
            transform: translateY(-4px) rotate(0deg);
  }
  50% {
    -webkit-transform: translateY(0) rotate(0deg);
            transform: translateY(0) rotate(0deg);
  }
  100% {
    -webkit-transform: translateY(-7px) rotate(0deg);
            transform: translateY(-7px) rotate(0deg);
  }
}
@keyframes toggle-top {
  0% {
    -webkit-transform: translateY(-4px) rotate(0deg);
            transform: translateY(-4px) rotate(0deg);
  }
  50% {
    -webkit-transform: translateY(0) rotate(0deg);
            transform: translateY(0) rotate(0deg);
  }
  100% {
    -webkit-transform: translateY(-7px) rotate(0deg);
            transform: translateY(-7px) rotate(0deg);
  }
}
@-webkit-keyframes toggle-bottom {
  0% {
    -webkit-transform: translateY(4px) rotate(0deg);
            transform: translateY(4px) rotate(0deg);
  }
  50% {
    -webkit-transform: translateY(0px) rotate(0deg);
            transform: translateY(0px) rotate(0deg);
  }
  100% {
    -webkit-transform: translateY(7px) rotate(0deg);
            transform: translateY(7px) rotate(0deg);
  }
}
@keyframes toggle-bottom {
  0% {
    -webkit-transform: translateY(4px) rotate(0deg);
            transform: translateY(4px) rotate(0deg);
  }
  50% {
    -webkit-transform: translateY(0px) rotate(0deg);
            transform: translateY(0px) rotate(0deg);
  }
  100% {
    -webkit-transform: translateY(7px) rotate(0deg);
            transform: translateY(7px) rotate(0deg);
  }
}
@-webkit-keyframes toggle-top-close {
  0% {
    -webkit-transform: translateY(-8px) rotate(0deg);
            transform: translateY(-8px) rotate(0deg);
  }
  50% {
    -webkit-transform: translateY(0) rotate(0deg);
            transform: translateY(0) rotate(0deg);
  }
  100% {
    -webkit-transform: translateY(0) rotate(-45deg);
            transform: translateY(0) rotate(-45deg);
  }
}
@keyframes toggle-top-close {
  0% {
    -webkit-transform: translateY(-8px) rotate(0deg);
            transform: translateY(-8px) rotate(0deg);
  }
  50% {
    -webkit-transform: translateY(0) rotate(0deg);
            transform: translateY(0) rotate(0deg);
  }
  100% {
    -webkit-transform: translateY(0) rotate(-45deg);
            transform: translateY(0) rotate(-45deg);
  }
}
@-webkit-keyframes toggle-bottom-close {
  0% {
    -webkit-transform: translateY(8px) rotate(0deg);
            transform: translateY(8px) rotate(0deg);
  }
  50% {
    -webkit-transform: translateY(0) rotate(0deg);
            transform: translateY(0) rotate(0deg);
  }
  100% {
    -webkit-transform: translateY(0) rotate(45deg);
            transform: translateY(0) rotate(45deg);
  }
}
@keyframes toggle-bottom-close {
  0% {
    -webkit-transform: translateY(8px) rotate(0deg);
            transform: translateY(8px) rotate(0deg);
  }
  50% {
    -webkit-transform: translateY(0) rotate(0deg);
            transform: translateY(0) rotate(0deg);
  }
  100% {
    -webkit-transform: translateY(0) rotate(45deg);
            transform: translateY(0) rotate(45deg);
  }
}
@-webkit-keyframes shine {
  100% {
    left: 100%;
  }
}
@keyframes shine {
  100% {
    left: 100%;
  }
}
/*
.imgscale {
	transform: scale(1.1);
	transition: 1.2s 0.1s;
}
.photo.isAnimate .imgscale {
	transform: scale(1);
}
.fadein {
    opacity: 0;
}
.fadein.isAnimate {
    animation: fadeInUp 0.4s ease 0.1s 1 forwards;
}


@keyframes slide-hover {
 0% {
     transform: translateX(-5em);
     opacity: 0;
 }
 30% {
     transform: translateX(0);
     opacity: 1;
 }
 60% {
     transform: translateX(0);
     opacity: 1;
 }
 100% {
     transform: translateX(5em);
     opacity: 0;
 }
}

@keyframes move-arrow1 {
 0% {
  transform: translateX(0);
  opacity: 1;
 }
 30% {
  transform: translateX(200%);
  opacity: 0;
 }
 60% {
  transform: translateX(-200%);
  opacity: 0;
 }
 100% {
  transform: translateX(0);
  opacity: 1;
 }
}

@keyframes move-arrow2 {
 0% {
  transform: translateX(0) translateY(0);
  opacity: 1;
 }
 30% {
  transform: translateX(200%) translateY(-200%);
  opacity: 0;
 }
 60% {
  transform: translateX(-200%) translateY(200%);
  opacity: 0;
 }
 100% {
  transform: translateX(0) translateY(0);
  opacity: 1;
 }
}

@keyframes move-arrow3 {
 0% {
  transform: translateX(0);
  opacity: 1;
 }
 30% {
  transform: translateX(-200%);
  opacity: 0;
 }
 60% {
  transform: translateX(200%);
  opacity: 0;
 }
 100% {
  transform: translateX(0);
  opacity: 1;
 }
}

@keyframes move-arrow4 {
 0% {
  transform: translateY(0);
  opacity: 1;
 }
 30% {
  transform: translateY(-200%);
  opacity: 0;
 }
 60% {
  transform: translateY(200%);
  opacity: 0;
 }
 100% {
  transform: translateY(0);
  opacity: 1;
 }
}

@keyframes move-arrow5 {
 0% {
  transform: translateY(0);
  opacity: 1;
 }
 30% {
  transform: translateY(200%);
  opacity: 0;
 }
 60% {
  transform: translateY(-200%);
  opacity: 0;
 }
 100% {
  transform: translateY(0);
  opacity: 1;
 }
}

@keyframes rotation {
	0% {
		transform:rotate(0);
	}
	100% {
		transform:rotate(360deg);
	}
}

@keyframes circleScale1 {
 0% {
   transform: translate(-50%, -50%) scale(0.8);
   background: radial-gradient(rgba(220,170,0,1), rgba(220,170,0,0.2));
 }
 100% {
   transform: translate(-50%, -50%) scale(4.8);
   background: radial-gradient(rgba(220,170,0,1), rgba(220,170,0,0.2));
   opacity: 0;
 }
}

@keyframes circleScale2 {
 0% {
   transform: translate(-50%, -50%) scale(0.8);
   background: radial-gradient(rgba(220,170,0,1), rgba(220,170,0,0.2));
 }
 100% {
   transform: translate(-50%, -50%) scale(6);
   background: radial-gradient(rgba(220,170,0,1), rgba(220,170,0,0.2));
   opacity: 0;
 }
}

@keyframes rotateRight {
 0% {
  transform: rotate(0deg);
 }
 50% {
  transform: rotate(180deg);
 }
 100% {
  transform: rotate(180deg);
 }
}

@keyframes rotateLeft {
 0% {
  transform: rotate(0deg);
 }
 50% {
  transform: rotate(0deg);
 }
 100% {
  transform: rotate(180deg);
 }
}
*/
.contents__title {
  width: 100%;
  aspect-ratio: 1366/336;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: clamp(2rem, 3.2942898975vw, 4.5rem);
  background-repeat: no-repeat;
  background-size: 110%;
  line-height: 1;
}
#tourism .contents__title {
  background-image: url("../images/tourism/tourism-bg-01.svg");
  background-position: 50% clamp(-2rem, -3.6603221083vw, -5rem);
}
#gourmet .contents__title {
  background-image: url("../images/gourmet/gourmet-bg-01.svg");
  background-position: 2% 50%;
}
#sapa .contents__title {
  background-image: url("../images/sapa/sapa-bg-01.svg");
  background-position: 50%;
  margin-bottom: 0;
}
.contents__title span {
  font-size: clamp(4.8rem, 8.78477306vw, 12rem);
  display: inline-block;
  padding: 1rem 0 clamp(1.68rem, 2.5622254758vw, 3.5rem);
  position: relative;
}
.contents__title span .sa, .contents__title span .pa {
  display: inline-block;
  text-align: center;
  position: relative;
}
.contents__title span .sa:before, .contents__title span .pa:before {
  font-size: clamp(1rem, 1.4641288433vw, 2rem);
  display: block;
  width: 120%;
  text-align: center;
  position: absolute;
  top: -1rem;
  left: -10%;
  right: -10%;
  margin: auto;
  white-space: nowrap;
}
.contents__title span .sa:before {
  content: "サービスエリア";
}
.contents__title span .pa:before {
  content: "パーキングエリア";
}
.contents__title span::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: clamp(0.5rem, 1.0248901903vw, 1.4rem);
  background: #FEE07E;
  position: absolute;
  left: 0;
  bottom: 0;
}
@media screen and (max-width: 768px) {
  .contents__title {
    aspect-ratio: 430/160;
    background-size: cover;
    background-size: contain;
    background-size: 140%;
    margin-bottom: clamp(2rem, 8.3720930233vw, 3.6rem);
  }
  .contents__title span {
    font-size: clamp(3.6rem, 11.1627906977vw, 4.8rem);
  }
  .contents__title span .sa:before, .contents__title span .pa:before {
    font-size: clamp(0.8rem, 2.3255813953vw, 1rem);
  }
}
.contents__inner {
  width: 90%;
  max-width: 120rem;
  margin: auto;
  position: relative;
}
.contents .spot__wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: clamp(6rem, 7.3206442167vw, 10rem) 4%;
}
.contents .spot__unit {
  width: 30.6666666667%;
}
.contents .spot__image {
  border-radius: 25px;
  overflow: hidden;
}
.contents .spot__name {
  padding: clamp(1rem, 1.4641288433vw, 2rem) 0;
}
.contents .spot__name b, .contents .spot__name span {
  display: inline-block;
}
.contents .spot__name b {
  font-size: clamp(2.4rem, 2.3426061493vw, 3.2rem);
  line-height: 1.40625;
}
.contents .spot__name span {
  font-size: clamp(1.6rem, 1.4641288433vw, 2rem);
  font-weight: 400;
}
.contents .spot__text p {
  line-height: 2;
}
@media screen and (max-width: 768px) {
  .contents .spot__unit {
    width: 100%;
  }
  .contents .spot__name {
    text-align: center;
  }
  .contents .spot__name b, .contents .spot__name span {
    display: block;
  }
}
.contents .sapa__wrap {
  width: 90%;
  max-width: 112.4rem;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: clamp(1rem, 0.9516837482vw, 1.3rem) 5%;
}
.contents .sapa__unit {
  width: 47.5%;
}
.contents .sapa__unit a:hover img {
  opacity: 0.7;
}
@media screen and (max-width: 768px) {
  .contents .sapa__unit {
    width: 100%;
  }
}
.contents .mark {
  margin-top: clamp(4rem, 7.3206442167vw, 10rem);
}
.contents .mark__title {
  font-size: clamp(1.6rem, 1.4641288433vw, 2rem);
  padding-bottom: clamp(1rem, 2.196193265vw, 30rem);
}
.contents .mark__title span {
  position: relative;
  padding-right: 2em;
}
.contents .mark__title span::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 2px;
  background: #1D5198;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.contents .mark__wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: clamp(3rem, 3.2942898975vw, 4.5rem) 3.5%;
}
.contents .mark__unit {
  width: 31%;
}
.contents .mark dt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.contents .mark dt .icon {
  width: clamp(2.4rem, 2.7818448023vw, 3.8rem);
}
.contents .mark dt .icon img {
  width: 100%;
  height: auto;
}
.contents .mark dt b {
  padding-left: 0.5em;
  color: #1D5198;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.contents .mark dd {
  font-size: clamp(1.4rem, 1.1713030747vw, 1.6rem);
  padding-top: 0.5em;
}
@media screen and (max-width: 1024px) {
  .contents .mark__unit {
    width: 46.5%;
  }
}
@media screen and (max-width: 768px) {
  .contents .mark__unit {
    width: 100%;
  }
  .contents .mark dt .icon {
    width: 2rem;
  }
}