@charset "utf-8";
/* CSS Document */
	.only_htb{
		display: none;
	}
.sec_mb{
	margin-bottom: 15vh;
}
.mb_head{
	margin-bottom: 1.0em;
}
.mb_lead{
	margin-bottom: 2.0em;
}
/*資料請求ボタン*/
.button{
	width: 60%;
	aspect-ratio:863/122;
	margin: 0 auto;
}
.image-button {
  display: inline-block; /* リンクの範囲を画像に合わせる */
  border: none;
  text-decoration: none;
  transition: transform 0.2s ease-in; /* ホバー時のアニメーション */
}


/* ホバー時の効果 */
.image-button:hover {
  opacity: 0.8; /* 少し薄くする */
  transform: translateX(5px);
}
/**/
h3{
	font-family: var(--font-kakugo);
	font-size: var(--fs-40);
	font-weight: 500;
	white-space: nowrap;
}
.lead{
	font-family: var(--font-marugo);
	font-size: var(--fs-18);
	font-weight: 400;
}
.leadS{
	font-family: var(--font-marugo);
	font-size: var(--fs-16);
	font-weight: 400;
	margin-bottom: 4.0em;
}
.lead_EN{
	font-family: var(--font-num);
	font-size: var(--fs-28);
	text-transform: uppercase;
}
/**/
.yok01 h2{
	font-family: var(--font-noto);
	font-size: clamp(45px, calc(45px + 45 * var(--fluid)), 90px);
	font-weight: 900;
	white-space: nowrap;
}
.container_h2{
  max-width: 1920px;
  width: 75vw;
  margin: 0 auto;
  word-break: break-all;
}
.yok01 h2 span{
	text-transform: capitalize;
}
.yok01 p span{
	text-transform: uppercase;
}
.yok01_list{
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	column-gap: 15%;
	align-items: center;
}
/**/
.yok02_container{
	background-image:  linear-gradient(45deg,rgba(248, 241, 182, 1) 0%, rgba(248, 209, 226, 1) 44%, rgba(186, 227, 249, 1) 48%, rgba(222, 199, 224, 1) 70%, rgba(221, 235, 194, 1) 100%);
	padding: 3.5em 0;
	margin-bottom: 10vh;
}
.yok02 h3{
	text-align: center
}
.yok02_box{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 3%;
	margin-bottom: 2.5em;
	row-gap: 0.6em;
}
.yok02_list{
	display: flex;
	column-gap: 0.5em;
	align-items: flex-end;
}

.yok02 ul{
	font-family: var(--mincho);
}
.yok02 .Route{
	font-size: var(--fs-44);
	line-height: 1.1;
}
.yok02 .Route span{
	font-size: var(--fs-18);
	padding-left: 1.5em;
}
.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{
	font-size: var(--fs-25);
	 margin-bottom: -0.9em;
}
.yok02 .time span{
	font-family: var(--font-num);
	font-size: var(--fs-56);
}
.yok02 .all{
	padding-bottom: 0.8em;
}
.colBL{
	color: #2e3192;
	text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0,0.3);
}
.colSA{
	color: #29abe2;
	text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0,0.3);
}
.colBG{
	color: #0071bc;
	text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0,0.3);
}
.caption{
	font-size: 12px;
	text-align: end;
}
/**/
.yok03_list{
	display: grid;
	grid-template-columns: 1.0fr 1.2fr;
	align-items: center;
}
/**/
.yok04{
	text-align: center;
}
.yok04 .lead{
	margin-bottom: 10vh;
}
.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;
}
.pl02 h4{
  font-size: var(--fs-35);
  line-height: 1.6em;
	margin-bottom: 1.5em;
}
.pl02 .next{
	font-size: var(--fs-25);
	text-transform: capitalize;
}

/**/
.yok05_inner{
	background-image: linear-gradient(45deg,rgba(248, 241, 182, 1) 0%, rgba(248, 209, 226, 1) 44%, rgba(186, 227, 249, 1) 48%, rgba(222, 199, 224, 1) 70%, rgba(221, 235, 194, 1) 100%);
	padding: 4.0em 0;
	margin-bottom: 10vh;
}
.yok05_title{
	text-align: center;
	margin-bottom: 5vh;
}
.yok05_how h3{
	font-family: "Jost", sans-serif;
	font-size: var(--fs-35);
	text-transform: capitalize;
	white-space: nowrap;
}
.yok05_how h3 span{
	text-transform: lowercase;
}
.yok05_how p{
	font-size: var(--fs-18);
}
.yok05_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);
}
/**/
.yok06_list{
	display: grid;
	grid-template-columns: 2fr 1fr;
	column-gap: 5%;
	align-items: center;
	margin-bottom: 10vh;
}
.yok06 h4{
	font-family: var(--font-marugo);
	font-size: var(--fs-20);
	margin-bottom: 2.5em;
}
.yok06 li{
	font-size: var(--fs-14);
}
.yok06_list2{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	row-gap:3.0em;
}
.yok06_list2 ul{
	flex-basis: 28%;
}
/*youtube*/
.yt-grid {
    display: flex;
    flex-wrap: wrap; 
    gap: 20px; /* 隙間の広さ */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  }

  .yt-item {
    position: relative;
    /* 1000px以上で3つ並びを維持する計算 */
    flex: 1 1 calc(33.333% - 14px); 
    min-width: 280px; 
    aspect-ratio: 16 / 9;
    background-color: #000;
    cursor: pointer;
    overflow: hidden;
    border-radius: 10px; /* 角丸 */
  }
 .yt-item iframe, .yt-item img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
    object-fit: cover;
  }

  /* YouTube風の再生ボタン */
  .play-icon {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 60px; height: 40px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    transition: 0.2s;
    pointer-events: none;
  }
  .play-icon::after {
    content: "";
    border-style: solid;
    border-width: 10px 0 10px 18px;
    border-color: transparent transparent transparent #fff;
  }
 .yt-item:hover .play-icon {
    background: #ff0000;
  }
/*フッター*/
.last_sec ul{
	font-family: var(--font-marugo);
	font-size: var(--fs-cap);
}
.last_sec{
	display:flex;
	justify-content: space-between;
	align-items: flex-end;
	padding: 0 10%;
}


/*スライダー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;
}
/*フェードインアニメーション--------------*/
/* 基本フェードイン */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s ease, transform 1.2s ease;
  will-change: opacity, transform;
}
/* 表示されたら付くクラス */
.fade-in.in-view {
  opacity: 1;
  transform: translateY(0);
}
/* オプション：複数要素を順番に遅らせる（必要なら） */
.fade-in.delay-1 {
  transition-delay: 0.20s;
}
.fade-in.delay-2 {
  transition-delay: 0.40s;
}
.fade-in.delay-3 {
  transition-delay: 0.60s;
}
/* 表示されたら付くクラス */
.fade-in.in-view {
  opacity: 1;
  transform: translateY(0);
}

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

=======SP対応・ブレイクポイント768px=========*/

@media (max-width: 1250px) {
.yok01_list {
    display: block;
}
	
}
 @media (max-width: 1024px) {
	.only_htb{
		display: inline;
	}
.yok03_list {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
}
.yok02 .Route{
	font-size: var(--fs-40);
	line-height: 1.1;
}
	}
@media (max-width: 768px) {
 .track li {
    flex: 0 0 50%; /* スライダー2枚表示 */
  }
.navc{
		height: 10%;
	}
.SEC_container70 {
  max-width: 768px;
  width: 85vw;
  margin: 0 auto;
  word-break: break-all;
}
.container_h2{
  max-width: 768px;
  width: 90vw;
  margin: 0 auto;
  word-break: break-all;
}
.sec_mb{
	margin-bottom: 10vh;
}

h3 {
    font-size: var(--fs-35);
	}
.button {
    width: 80%;
    aspect-ratio: 863 / 122;
    margin: 0 auto;
}
.yok06_list2 ul {
    flex-basis: 45%;
}	
}

 
@media (max-width: 560px) {
.yok01 h2 {
    font-size: clamp(40px, calc(40px + 20 * var(--fluid)), 60px);
}
    h3 {
        font-size: var(--fs-30);
    }
	.lead {
    font-size: var(--fs-16);
}
.leadS {
    font-size: var(--fs-14);
	margin-bottom: 3.0em;
}
.yok02 .Route{
	font-size: var(--fs-35);
	line-height: 1.1;
	letter-spacing: -0.05em;
}

.yok02 .Route span{
	font-size: var(--fs-14);
	padding-left: 1.0em;
}
.yok02 .Route2 span{
	padding-left: 0;
}
.yok02 .Way{
	font-size: var(--fs-14);
	line-height: 1.1;
}
.yok02 .Way span{
	padding-left: 0.5em;
}
.yok02 .time{
	font-size: var(--fs-25);
	 margin-bottom: -0.5em;
}
.yok02 .time span{
	font-family: var(--font-num);
	font-size: var(--fs-40);
}
.yok02 .all{
	padding-bottom: 0.2em;
}
.caption {
    font-size: 10px;
    text-align: start;
}
.yok06_list {
    display: block;
	}
	.yok06_list .image{
		text-align: center;
		margin-top: 2.0em;
	}
	.yok06_list .image img{
		width: 80%;
		height:auto;
	}
.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%;
	}
.yok05_how {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    row-gap: 1.0em;
	}
 .last_sec {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10%;
    flex-direction: column;
    row-gap: 1.5em;
}
.navc {
    height: 12%;
    font-size: 8px;
	}
}
@media (max-width: 400px) {
.yok01 h2 {
    font-size: var(--fs-56);
}
.yok02 .Route{
	font-size: var(--fs-28);
	line-height: 1.1;
	letter-spacing: -0.05em;
}
.yok02 .Route3{
	font-size: var(--fs-23);
}
.yok02 .Route span{
	font-size: var(--fs-cap);
	padding-left: 1.0em;
}
.yok02 .Route2 span{
	padding-left: 0;
}
.yok02 .Way{
	font-size: var(--fs-cap);
	line-height: 1.1;
}
.yok02 .Way span{
	padding-left: 0.5em;
}
.yok02 .time{
	font-size: var(--fs-18);
	 margin-bottom: -0.5em;
}
.yok02 .time span{
	font-family: var(--font-num);
	font-size: var(--fs-28);
}
.yok02 .all{
		font-size: var(--fs-14);
	padding-bottom: 0;
}
}