@charset "utf-8";
/* CSS Document */
/* CSS */
.header {
  position: relative;
}

/* ロゴ中央配置 */
.logo {
  position: absolute;
  top: 42%;
  left: 74%;
  width: clamp(105px, 28vw, 480px);
  transform: translate(-50%, -50%);
  filter: drop-shadow(1px 1px 1px rgba(255, 255, 255, 1));
}

/* レイヤー */
.slide,
.bg-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

/* 波マスク */
.slide {
  z-index: 2;

  mask-repeat: no-repeat;
  mask-image: repeating-radial-gradient(
    circle at 50% 50%,
    black 0%,
    transparent 20%,
    black 40%
  );
  mask-size: 200% 100%;

  animation: waveX 3s ease-in-out forwards;
}

/* ロゴ画像 */
.logo img {
  width: 100%;
  display: block;
}

/* 波の動き（左→右） */
@keyframes waveX {
  0% {
    mask-position: -100% 0%;
  }
  10% {
    mask-position: -20% 2%;
  }
  65% {
    mask-position: 40% -2%;
  }
  100% {
    mask-position: 100% 0%;
  }
}

/* 微妙に上下ゆれ（自然さ出す） */
.slide .image {
  animation: floatY 5s ease-in-out 1 forwards;
}

@keyframes floatY {
  0% { transform: translateY(0); }
  50% { transform: translateY(4px); }
  100% { transform: translateY(0); }
}
/*
.jyukyo{
	    position: absolute;
    top: 66.8%;
    right: 12.7%;
    transform: translateY(-50%);
    z-index: 60;
    width: clamp(22px, 3.59vw, 70px);
    height: clamp(25px, 6vw, 98px);
}
.house{
	width: clamp(16px, 2.88vw, 58px);
	height:auto;
	position: absolute;
	bottom: 0;
    right: 0;
	opacity: 0;
	animation: fade-in 2s ease-in-out forwards;
}
.heart{
	position: absolute;
	top:0;
	left:0;
	width: 50%;
	height:50%;
}
.heart1{
    width: clamp(4.5px, 0.85vw, 15px);
    height: auto;
    position: absolute;
    top: 28%;
    left: 28%;
	transform: translateY(1.5px);
	opacity: 0;
	animation: kumo 2.5s ease 1.5s infinite;
}
.heart2 {
    width: clamp(2.2px, 0.45vw, 7.5px);
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
	transform: translateY(1.5px);
	opacity: 0;
	animation: kumo 2.5s ease-out 1.8s infinite;
}

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes kumo {
  0% { opacity: 0;
	   transform: translateY(1.5px);}
  40% { opacity: 1;
	     transform: translateY(0);}
  100% { opacity: 0;
	    transform: translateY(0);}
}
*/

/**/
.copy {
  text-align: center;
}
.copy h2 span {
  text-transform: capitalize;
}
.button_sec .lead {
  text-align: center;
  font-size: var(--fs-16);
}
.yok01_container1 {
  text-align: start;
  display: grid;
  grid-template-columns: 0.6fr 1fr;
  gap: 5%;
  letter-spacing: -0.06em;
}
.yok01_container1 p span {
  text-transform: capitalize;
}
/**/
.yok02 {
  font-family: var(--font-mincho);
  padding: 5em 0;
  margin-bottom: 10vh;
}
.yok02_box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 3%;
  align-items: center;
  line-height: 1;
  margin-bottom: 2.5em;
  row-gap: 2.0em;
}
.yok02_list {
  display: flex;
  column-gap: 0.5em;
  align-items: flex-end;
  flex-wrap: wrap;
  justify-content: center;
  height: 10vh;
}
.yok02 .Route {
  font-size: var(--fs-44);
  line-height: 1.1;
}
.yok02 .Route.route {
  padding-bottom: 0;
}
.yok02 .Route span {
  font-size: var(--fs-18);
}
.yok02 .Route span.train {
  padding-left: 1.5em;
}
.yok02 .Route span.train.ion {
  padding-left: 0;
}
.yok02 .Route2 span {
  padding-left: 0;
}
.yok02 .Way {
  font-size: var(--fs-18);
  line-height: 1.1;
}
.yok02 .Way span {
  padding-left: 1.0em;
}
.yok02 .time, .yok02 .Route .kukaku {
  font-size: var(--fs-25);
}
.yok02 .time span {
  font-family: var(--font-cin);
  font-size: var(--fs-56);
  line-height: 1;
}
.yok02 .all {
  vertical-align: 0.5em;
}
/**/
.yok03 .image {
  margin-bottom: 15vh;
}
.yok03 .yok03_container {
  display: grid;
  grid-template-columns: 0.3fr 0.7fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 5%;
  grid-row-gap: 1.2em;
  align-items: stretch;
}
.yok03 .text {
  text-align: start;
  grid-area: 1 / 3 / 3 / 4;
}
.yok03 .image1 {
  grid-area: 1 / 1 / 2 / 3;
}
.yok03 .image2 {
  grid-area: 2 / 2 / 3 / 3;
}
.yok03 figcaption {
  text-align: start;
  font-size: var(--fs-cap);
}
/**/
.yok04 {
  background-color: rgba(184, 228, 255, 0.35);
  padding: 12vh 0;
}
.yok04 .grid1_1 {
  align-items: stretch;
}
.yok04_inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 2.5em;
  row-gap: 1.2em;
  margin-bottom: 7vh;
}
.yok04 dl {
  flex-basis: 30%;
}
.yok04 dl dt {
  font-size: var(--fs-28);
  font-weight: 500;
  white-space: nowrap;
}
.yok04 dl dt.red {
  color: #ff1d25;
}
.yok04 dl dt.green {
  color: #7ac943;
}
.yok04 dl dt.purple {
  color: #662d91;
}
.yok04 dl dt.blue {
  color: #3fa9f5;
}
.yok04 dl dt.orange {
  color: #ff931e;
}
.yok04 dl dt span {
  font-family: var(--font-EB);
  font-size: var(--fs-56);
  font-style: italic;
}
.yok04 dl dd {
  font-size: var(--fs-18);
  padding-left: 3em;
}
.yok04_lead {
  font-size: var(--fs-23);
  text-align: center;
  margin-bottom: 7vh;
}
.yok04 h3 {
  text-align: center;
  font-size: var(--fs-28);
}
/**/
.yok05_box {
  text-align: center;
  padding: 2.5em;
  border: solid 1px #333333;
  white-space: nowrap;
  height: fit-content;
  width: fit-content;
}
.yok05_inner {
  display: flex;
  align-items: center;
  justify-content: center;
}
.yok05_inner .orange, .yok05_inner .red {
  font-family: var(--font-EB);
  font-size: var(--fs-56);
  font-style: italic;
  line-height: 1;
}
.yok05_inner .orange {
  color: #ff931e;
}
.yok05_inner .red {
  color: #ff1d25;
}
.yok05_inner .t_la {
  font-size: var(--fs-20);
}
.yok05_inner .t_nom {
  font-size: var(--fs-16);
}
.yok05_inner .t_sm {
  font-size: var(--fs-14);
  line-height: 1.2;
}
.yok05_inner .plus {
  display: block;
  font-size: var(--fs-16);
}
/**/
.yok06 {
  text-align: center;
}
.yok06 .lead.lead_s {
  font-size: var(--fs-14);
}
/*スライダー*/
.slider {
  font-size: var(--fs-16);
  position: relative;
  margin-bottom: 10vh;
}
.slider::before {
  content: "";
  width: 5.2em;
  height: 1px;
  background-color: #333333;
  position: absolute;
  top: 250%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.slider_container {
  margin-bottom: 10vh;
}
/**/
.yok07 {
  background-color: #f0f5f6;
  padding: 8vh 0;
}
.yok07_title {
  text-align: center;
  margin-bottom: 5vh;
}
.yok07_how h3 {
  font-family: "Jost", sans-serif;
  font-size: var(--fs-35);
  text-transform: capitalize;
  gap: 1.0em;
  white-space: nowrap;
}
.yok07_how h3 span {
  text-transform: lowercase;
}
.yok07_how p {
  font-size: var(--fs-18);
}
.yok07_how {
  display: flex;
  column-gap: 1.5em;
  align-items: center;
  margin-bottom: 2.0em;
}
.Howto {
  display: flex;
  justify-content: space-between;
}
.Howto li {
  flex-basis: 22%;
}
.Howto li:nth-child(2), .Howto li:nth-child(3), .Howto li:nth-child(4) {
  position: relative;
}
.Howto li:nth-child(2)::before, .Howto li:nth-child(3)::before, .Howto li:nth-child(4)::before, .Howto li:nth-child(2)::after, .Howto li:nth-child(3)::after, .Howto li:nth-child(4)::after {
  content: "";
  position: absolute;
  top: 25%;
  left: -16%;
  width: 1.4em;
  height: 2px;
  border-radius: 9999px;
  background-color: #333333;
  transform-origin: calc(100% - 1.25px) 50%;
}
.Howto li:nth-child(2)::before, .Howto li:nth-child(3)::before, .Howto li:nth-child(4)::before {
  transform: rotate(45deg);
}
.Howto li:nth-child(2)::after, .Howto li:nth-child(3)::after, .Howto li:nth-child(4)::after {
  transform: rotate(-45deg);
}
/**/
.yok08_inner {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.yok08 img {
  width: clamp(250px, 35.2vw, 520px);
}
/**/
.yok09_inner {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: flex-start;
  gap: 5%;
}
.yok09_imagebox {
  flex-basis: 55%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 1.5em;
  grid-row-gap: 5vh;
}
.image1 {
  grid-area: 1 / 1 / 2 / 2;
}
.image2 {
  grid-area: 1 / 2 / 2 / 3;
}
.image3 {
  grid-area: 2 / 1 / 3 / 2;
}
.image4 {
  grid-area: 2 / 2 / 3 / 3;
}
.yok09_imagebox figcaption {
  text-align: start;
  font-size: var(--fs-cap);
}
/*エントリーボタン*/
.ENTRY_button {
  text-align: center;
}
.button_text {
  font-size: clamp(40px, 6.2vw, 90px);
  color: #3fa9f5;
}
.image-button {
  font-family: var(--font-Jos);
  font-size: var(--fs-35);
  text-transform: uppercase;
  color: #ffffff;
  background-color: #3fa9f5;
  box-shadow: 1.5px 1.5px 5px #0a476d;
  display: inline-block;
  width: 12em;
  transition: transform 0.2s ease-in; /* ホバー時のアニメーション */
}
.image-button:hover {
  opacity: 0.8; /* 少し薄くする */
  transform: translateY(1.5px);
  box-shadow: none;
}
/**/
.location_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  row-gap: 3.0em;
}
.location_list ul {
  flex-basis: 31%;
}
.location_list ul li {
  font-size: var(--fs-cap);
}
/*フッター*/
.last_sec {
    font-family: var(--font-kakugothic);
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    padding: 0 10%;
}
.last_sec ul {
  font-size: var(--fs-cap);
  margin-bottom: 2.0em;
}
.shopinfo {
  flex-basis: 30%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.8em;
}
.footer_btn_area {
  text-align: start;
}
.footer_button {
  text-align: center;
  margin-bottom: 0;
  display: inline-block;
}
.detailBtn {
  padding: 0;
}
.detailLink {
  position: relative;
  display: inline-block;
  color: #ffffff;
  border-radius: 5px;
  padding: 0.2em 1.0em;
  background-color: #333333;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
  transition: background 0.3s ease;
}
/* hover */
.detailLink:hover {
  color: #333333;
  border: solid 1px #333333;
  background-color: #ffffff;
}
/*スライダーcss*/
.carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
}
.viewport {
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.track {
  display: flex;
  transition: transform 0.4s ease;
}
.track li {
  width: 20%;
  flex: 0 0 20%; /* 5枚表示 */
  list-style: none;
}
.track img {
  width: 100%;
  display: block;
  pointer-events: none;
}
/* ナビ共通 */
.navc {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 18%; /* ← 高さ基準に変更 */
  aspect-ratio: 1/1; /* 真円 */
  background: #333333;
  color: #ffffff;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(10px, 1.2vw, 24px);
  cursor: pointer;
  z-index: 10;
  opacity: .85;
}
/* 左右位置 */
.prev {
  left: 2%;
}
.next {
  right: 2%;
}
/*ドットナビ*/
.dots {
  text-align: center;
  margin-top: 15px;
}
.dots span {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background: #ccc;
  border-radius: 50%;
  cursor: pointer;
}
.dots .active {
  background: #333;
}

/*=========レスポンシブ=====================

=======SP対応・ブレイクポイント768px=========*/
@media (max-width: 1024px) {
.jyukyo {
    top: 65.2%;
	}
  .yok03 .yok03_container {
    display: grid;
    grid-template-columns: 0.6fr 0.4fr;
    grid-template-rows: 1fr 1.5fr;
    grid-column-gap: 1.2em;
    grid-row-gap: 2.5em;
    align-items: flex-end;
    justify-items: center;
  }
  .yok03 .text {
    grid-area: 2 / 1 / 3 / 3;
    align-self: center;
  }
  .yok03 .image1 {
    grid-area: 1 / 1 / 2 / 2;
  }
  .yok03 .image2 {
    grid-area: 1 / 2 / 2 / 3;
  }
  /**/
  .yok05 .grid1_1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 1.5em;
  }
  @media (max-width: 768px) {
    .track li {
      flex: 0 0 50%; /* スライダー2枚表示 */
    }
    .navc {
      height: 10%;
    }
    .yok01_container1 {
      grid-template-columns: 1fr;
      justify-items: center;
    }
    .yok03 .image {
      margin-bottom: 0em;
    }
    .yok04 .grid1_1 {
      display: flex;
      flex-direction: column;
      gap: 2.0em;
    }
	.yok07 .Howto li:nth-child(2)::before, .Howto li:nth-child(3)::before, .Howto li:nth-child(4)::before, .Howto li:nth-child(2)::after, .Howto li:nth-child(3)::after, .Howto li:nth-child(4)::after {
    width: 0.8em;
	  }
    .yok09_inner {
      flex-direction: column-reverse;
      align-items: center;
      gap: 1.5em;
    }
    .yok09_imagebox {
      padding: 0 7%;
    }
    .location_list ul {
      flex-basis: 48%;
    }
    .last_sec {
      display: flex;
      align-items: center;
      flex-direction: column;
      row-gap: 2.0em;
      margin-bottom: 2.0em;
    }
    .footer_btn_area {
      text-align: center;
    }
  }
  @media (max-width: 560px) {
    /**/
    .yok02 {
      padding: 0;
    }
    /**/
    .yok03 .yok03_container {
      grid-template-rows: 0.6fr 1.5fr;
	  padding-top: 3.0em;
    }
	  /**/
	  .yok04 h2,.yok04 h3{
    font-size: var(--fs-20);
	  }
    /**/
  .yok05 h2{
    font-size: var(--fs-25);
	  }
    .yok05_box {
      padding: 0.8em;
    }
    /**/
    .yok07_how {
      flex-direction: column;
    }
    .Howto {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      row-gap: 2.0em;
    }
    .Howto li {
      flex-basis: 46%;
    }
    .Howto li:nth-child(2)::before, .Howto li:nth-child(3)::before, .Howto li:nth-child(4)::before, .Howto li:nth-child(2)::after, .Howto li:nth-child(3)::after, .Howto li:nth-child(4)::after {
      width: 0.7em;
      height: 0.5px;
      left: -12%;
    }
    /**/
    .yok08_inner {
      flex-direction: column;
      row-gap: 1.5em;
	  align-items: center;
    }
    /**/
    .yok09_imagebox {
      grid-row-gap: 2vh;
      grid-column-gap: 0.5em;
      padding: 0;
    }
    .location_list {
      row-gap: 1em;
    }
    /**/
    .last_sec {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: column;
      row-gap: 1.5em;
    }
    .navc {
      height: 12%;
      font-size: 8px;
    }
  }