@charset "utf-8";
/* CSS Document */

/* ===== Simple Reset CSS ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: sans-serif;
  line-height: 1.5;
  color: #333;
  background: #fff;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

button, input, select, textarea {
  font: inherit;
  border: none;
  background: none;
  outline: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* ===== Simple Reset CSS ===== */
  #Wrap {
            max-width: 100%;
            overflow-x: hidden;
        }


		/*ローディング*/
		    /* ページ全体初期非表示 */
    body.loaded .main-content {
      opacity: 1;
      pointer-events: auto;
    }
    .main-content {
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.8s ease;
    }

    /* ローディング画面 */
    .loading-screen {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      flex-direction: column;
    }

    .logo {
      width: auto;
      height: 100px;
      margin-bottom: 20px;
    }

    .spinner {
      width: 60px;
      height: 60px;
      border: 6px solid #ccc;
      border-top: 6px solid #56a8a1;
      border-radius: 50%;
      animation: spin 1.2s linear infinite;
    }

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

    /* ローディング非表示 */
    body.loaded .loading-screen {
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.8s ease;
    }
 /*ローディング*/
		.fv {
    background: url(../img/bk_01.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    position: relative;
    padding-bottom: 200px;
}
		
		.campaign-badge{
			max-width: 730px;
			width: 80%;
			margin: 0 auto;
			position: relative;
			padding: 100px 0 0;
		}
		.mv_title{
  position: absolute;
  top: 43%;
  left: 50%;
  transform: translate(-50%, -33%);
		}
		#yoando2025 p.mv_text01{
		writing-mode: vertical-rl;
		position: absolute;
  top: 44%;
		right: 10%;
font-size: 1.75rem;
font-weight: bold;
color: #004e40;
text-align: center;}

		p.mv_text02{
		writing-mode: sideways-lr;
		position: absolute;
  top: 54%;
		left: 10%;
font-size: 1.75rem;
font-weight: bold;
color: #428f7e;}
		
		.wave01{
			position: absolute;
			bottom: 15%;
			left: 10%;
			  animation: slow-rotate-wave 5s linear infinite;
  transform-origin: center center; /* 回転中心 */
		}
		
		.wave02{
			
			position: absolute;
			bottom: 15%;
			right: 10%;
			animation: slow-rotate-wave02 5s linear infinite;
  transform-origin: center center;
		}
		.reverse{
			  transform: scaleX(-1); /* 左右反転 */
			
		}
		
@keyframes slow-rotate-wave {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(5deg); }
  100% { transform: rotate(0deg); }
}
@keyframes slow-rotate-wave02 {
  0%   { transform: rotate(5deg); }
  50%  { transform: rotate(0deg); }
  100% { transform: rotate(5deg); }
}


#yoando2025 p{
	    text-align: left;
}


/*暖簾*/

.noren_space{
			position: relative;
	margin-top: 0px;
		}	

.noren{
	
	position: absolute;
	width: 100%;
	top: -100px;
	
}
 .noren-container {
      position: relative;
      width: 100%;
      max-width: 800px;
      height: auto;
	 margin: 0px auto 0;
	 z-index: 3;
    }

    .noren-svg {
      width: 100%;
      height: auto;
      aspect-ratio: 31 / 12; /* 620:240比率を維持 */
      display: block;
    }

    .noren-text {
      position: absolute;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      color: white;
      pointer-events: none;
     text-shadow:
    0 0 3px rgba(0, 0, 0, 0.6),
    0 0 6px rgba(0, 0, 0, 0.4),
    1px 1px 2px rgba(0, 0, 0, 0.3),
   -1px -1px 2px rgba(0, 0, 0, 0.3);
      padding: 0 10px;
      width: 100%;
    }

    .noren-text-title {
      font-size: clamp(16px, 4vw, 28px);
      font-weight: bold;
      letter-spacing: 1.2px;
      line-height: 1.4;
    }

    .noren-text-date {
      font-size: clamp(12px, 2.8vw, 16px);
      margin-top: 6px;
      line-height: 1.4;
    }


/*暖簾*/


/*youtube*/
.video {
    max-width: 800px;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
	position: relative;
}

.video iframe {
   
    width: 100%;
    height: 100%;
}
/*youtube*/

/*挨拶*/

		h2{
    text-align: center;
    color: #920303;
      font-family: "Zen Antique", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 60px;
    margin-bottom: 30px;
}
			
.movie::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/bk_02.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.1; /* 背景の透け具合 */
  z-index: 0;
}

.movie {
  position: relative;
  background-color: rgb(240 255 248 / 80%);
  padding: 200px 0 200px;
  overflow: hidden;
  z-index: 1;
}
/* 初期状態（透明・画面外） */
.wave-img {
  position: absolute;
  opacity: 0;
  transition: all 1s ease-out;
}

/* 上から出るやつ */
.wave-img.top {

  transform: translateY(100px);
}

/* 下から出るやつ */
.wave-img.bottom {
	
  transform: translateY(-100px);

}

/* ふわっと出るやつ */
.wave-img.fuwa {


}

/* 表示トリガー */
.wave-img.show {
  opacity: 1;
  transform: translateY(0);
}

.wave-img.animate.deco02,.wave-img.animate.deco03 {
  animation: rotateSlow 20s ease-in-out infinite;
}
@keyframes rotateSlow {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


.wave-img.animate.deco01,.wave-img.animate.deco04 {
  animation: float 3s ease-in-out infinite;
}
/* ゆらゆらアニメーション */
@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(10px); }
  100% { transform: translateY(0); }
}

/* --- 各画像の位置調整 --- */

.wave-img.top.deco01{
    right: 3%;
    width: 18%;
	bottom: 10%;
	left: inherit;
}
.wave-img.fuwa.deco02 {
    top: 18%;
    right: 5%;
}

.wave-img.fuwa.deco03 {
    top: 18%;
    left: 5%;
}
.wave-img.bottom.deco04{
  left: 5%;
	top: 5%;
    width: 15%;
}
/*挨拶*/


/*波紋*/
.ripple-group {
  position: absolute;
  width: 120px;
  height: 120px;
  pointer-events: none;
}

.ripple-group::before,
.ripple-group::after,
.ripple-group span {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 3px solid rgba(100, 180, 200, 0.4);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.3);
}

/* ripple1 - ゆっくり、開始早め */
.ripple1::before {
  animation: ripple 12s ease-out infinite;
}
.ripple1::after {
  animation: ripple 12s ease-out infinite;
  animation-delay: 3s;
}
.ripple1 span {
  animation: ripple 12s ease-out infinite;
  animation-delay: 6s;
}

/* ripple2 - 中速、開始少し遅め */
.ripple2::before {
  animation: ripple 10s ease-out infinite;
  animation-delay: 2s;
}
.ripple2::after {
  animation: ripple 10s ease-out infinite;
  animation-delay: 5s;
}
.ripple2 span {
  animation: ripple 10s ease-out infinite;
  animation-delay: 8s;
}

/* ripple3 - 速め、遅れて開始 */
.ripple3::before {
  animation: ripple 8s ease-out infinite;
  animation-delay: 4s;
}
.ripple3::after {
  animation: ripple 8s ease-out infinite;
  animation-delay: 6s;
}
.ripple3 span {
  animation: ripple 8s ease-out infinite;
  animation-delay: 9s;
}

/* ripple4 - ゆっくりでランダム風 */
.ripple4::before {
  animation: ripple 11s ease-out infinite;
  animation-delay: 5s;
}
.ripple4::after {
  animation: ripple 11s ease-out infinite;
  animation-delay: 8s;
}
.ripple4 span {
  animation: ripple 11s ease-out infinite;
  animation-delay: 11s;
}

@keyframes ripple {
  0% {
    transform: scale(0.3);
    opacity: 0.5;
  }
  70% {
    opacity: 0.2;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

.ripple1 { top: 20%; left: 25%; }
.ripple2 { top: 60%; left: 45%; }
.ripple3 { top: 40%; left: 75%; }
.ripple4 { top: 70%; left: 10%; }

/*波紋*/




/*リボン*/

.ribbon_wrap {
  margin: -100px auto 100px;
  max-width: 480px;
  width: 72%;
  z-index: 2;
  position: relative;
}

/* リボン本体 */
.ribbon9 {
  display: inline-block;
  position: relative;
  height: auto;
  text-align: center;
  box-sizing: border-box;
  margin: 40px auto;
  max-width: 480px;
  width: 100%;
}

/* 左リボン端（三角） */
.ribbon9:before {
  content: '';
  position: absolute;
  width: 10px;
  top: 80%;
  transform: translateY(-50%);
  left: -55px;
  z-index: -2;
  border: 40px solid #333;
  border-left-color: transparent;
}

/* 右リボン端（三角） */
.ribbon9:after {
  content: '';
  position: absolute;
  width: 10px;
  top: 80%;
  transform: translateY(-50%);
  right: -55px;
  z-index: -2;
  border: 40px solid #333;
  border-right-color: transparent;
}

/* リボン中身 */
.ribbon9 h3 {
  font-family: "Zen Antique", serif;
  position: relative;
  margin: 0;
  padding: 10px;
  font-size: 32px;
  color: #920302;
  background: #fff;
  border: 7px solid #333;
  width: 100%;
  line-height: 1.5em;
  letter-spacing: 0.2em;
  box-sizing: border-box;
	text-align: center;
}

/* 左右画像共通スタイル */
.ribbon-end {
  position: absolute;
  top: 50%;
  width: 120px;
  height: 120px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: translateY(-50%);
  z-index: 10;
  pointer-events: none;
}

/* 左画像 */
.ribbon-end.left {
  left: -150px;
  background-image: url("../img/deco_05.png");
}

/* 右画像 */
.ribbon-end.right {
  right: -150px;
  background-image:  url("../img/deco_05.png");
	 transform: translateY(-50%) scaleX(-1); /* ← 左右反転を追加 */
}

/*リボン*/

/*2大プラン*/
.plan{
	background-image: url("../img/bk_01.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}


.plan_item{
	max-width: 800px;
	width: 85%;
	margin: 0 auto ;
	padding-bottom: 200px;
}

.plan_img{
	position: relative;
}

.mark{
	position: absolute;
	left: -16%;
	top:-16%;
}
.mark.plan02{
    position: absolute;
    left: -16%;
    top: -41%;
}



    .container {
    
      height: 100vh;
	position: relative;
    }

    .fade-fuwa  {
      opacity: 0;
      transform: translateY(60px); /* 下から */
      transition: opacity 1.2s ease-out, transform 1.2s ease-out;
    }

    .fade-fuwa.visible {
      opacity: 1;
      transform: translateY(0);
      animation: fuwaFuwa 3s ease-in-out infinite;
    }

.plan1item{
	position: absolute;
	width: 50%;
} 
.img1{
top: 0%;
left: 0%;}

.img2{
    top: 10%;
    left: 33%;
}

.img3{
    top: 0%;
    left: 69%;
}

.img4{
    top: 41%;
    left: 13%;
}

.img5{
bottom: 0%;
right: 0%;}
    @keyframes fuwaFuwa {
      0% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
      100% { transform: translateY(0); }
    }



@media screen and (max-width: 800px) {
	
	.container{
		 height:66vh;
	}
.plan1item{
	position: absolute;
	width: 67%;
} 
.img1 {
        top: 16%;
        left: -5%;
    }


.img2{
    top: 10%;
    left:31%;
}

.img3{
        top: 30%;
        left: 64%;
    }

.img4{
        top: 45%;
        left: -23%;
    }

.img5 {
        bottom: 0%;
        right: 9%;
    }

}

.setname{
	font-size: 36px;
	font-weight: bold;
	text-align: center;
	margin: 20px auto;
	
}
.text{
	font-size: 18px;
	margin-bottom: 30px;
	
}

a.btn-red,a.btn-red:visited {
    display: block;
    padding: 12px 36px;
    background-color: #920303;
    color: #fff;
    font-size: 20px;
    text-align: center;
    border-radius: 50px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    max-width: 300px;
    width: 100%;
    margin: 0 auto;
}

.btn-red:hover {
  background-color: #b00404;
}

.btn-red .arrow {
  display: inline-block;
  margin-left: 8px;
  font-size: 12px; /* 少し小さめ */
  vertical-align: middle;
}

/* item */




.item_title{
	color: #920303;
	font-size: 36px;
	font-weight: bold;
}

.specialset{
	margin-bottom: 80px;
}

.item_name{
	font-size: 24px;
	margin: 20px 0;
}
#yoando2025 p.set {
    display: block;
    border: 1px solid;
    padding: 5px;
    margin-bottom: 20px;
    width: 120px;
    text-align: center;
}
.setitem{
	margin-bottom: 20px;
}

.price_befor{
	margin-bottom: 20px;
}

.price{
	color: #920303;
	font-size: 36px;
	font-weight: bold;
	display: block;
}

.price span{
	font-size: 24px;
}

hr{
	margin: 20px auto;
}

.item_list{
	margin-bottom: 200px;
}



/* itemセクション全体 */
.item {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding-top: 300px;
}

/* 上下背景画像 */
.item::before,
.item::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100vw;
  height: 200px;
  background-image: url('../img/bk_03.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: -2;
}

.item::before {
  top: 0;
}

.item::after {
  bottom: 0;
  transform: scaleY(-1);
}

/* item_wrap */
.item_wrap {
  max-width: 800px;
  width: 85%;
  margin: 0 auto 200px;
  font-size: 20px;
  position: relative;
  z-index: 2;
}

/* デコレーション背景画像（右上・左中・右下） */
.bg_deco {
  position: absolute;
  width: 615px;
  height: 283px;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.5;
  z-index: -1;
  pointer-events: none;
  transition: transform 0.2s ease;
}

 .bg_deco.forpro {
  width: 500px;
	 height: 1000px;}

/* 右上 */
.bg_deco1 {
  top: 10%;
	transform: translateY(-10%);
  right: 0;
  background-image: url('../img/deco_06.png');
}

/* 左中央 */
.bg_deco2 {
  top:20%;
  left: 0;
  transform: translateY(-20%);
  background-image: url('../img/deco_06.png');
}

/* 右下 */
.bg_deco3 {
  bottom: 30%;
	transform: translateY(-30%);
  right: 0;
  background-image: url('../img/deco_06.png');
}






/* 右上 */
.bg_deco4 {
  top: 0%;
  right: 0;
  background-image: url('../img/deco_07.png');
}

/* 左中央 */
.bg_deco5 {
  top:10%;
  left: 0;
  transform: translateY(-10%);
  background-image: url('../img/deco_07.png');
}

/* 右下 */
.bg_deco6 {
  bottom: 15%;
	transform: translateY(-15%);
  right: 0;
  background-image: url('../img/deco_07.png');
}


.xset {
  position: relative;
background-image: url('../img/bk_04.jpg');
  overflow: hidden;
	background-repeat: no-repeat;
	background-size: cover;
	
	    padding: 150px 0 0;
}
.cap{
	font-size: 14px;
}
#Contents{
	margin-bottom: 0;
}
@media screen and (max-width: 800px) {
	.item {
 
  padding-top: 100px;
}
.mv_title {
  
    top: 49%;
   width: 24%;
	}

	#yoando2025 p.mv_text01{
    top: 49%;
    right: 10%;
    font-size: 16px;
}	
	
	p.mv_text02{
    top: 59%;
    font-size: 16px;
}
.wave01 {
    bottom: 22%;
    left: 0%;
    width: 24%;
}
	.wave02 {
    bottom: 22%;
    right: 0%;
    width: 24%;
}
	
	
	.movie{
		padding: 100px 0 200px;
	}
	
	
	h2{
		    font-size: 36px;
	}
	.ribbon_wrap{
		margin-bottom: 0;
	}
	.ribbon9 h3{
		font-size: 24px;
	}
	
	.ribbon9:before {
    left: -35px;
    z-index: -2;
    border: 30px solid #333;
		border-left-color: transparent;
}
	.ribbon9:after {
    right: -35px;
    z-index: -2;
    border: 30px solid #333;
		border-right-color: transparent;
   }
	
	.ribbon-end.left,.ribbon-end.right{
		display: none;
	}
	.mark {
    position: absolute;
    left: -7%;
    top: -16%;
    width: 35%;
}
	
	.mark.plan02 {
    position: absolute;
     left: -7%;
		top: -55%;}
	
	.setname{
		font-size: 24px;
	}
	
	.text {
		font-size: 16px;}
	
	.bg_deco.forpro {
    width: 300px;
    height: 600px;
		
}
	.bg_deco{
		opacity: 0.3;
	}
	.item_title{
		font-size: 24px;
	}
	
	.item_wrap{
		font-size: 16px;
	}
	.price {
		font-size: 26px;}
	.price span {
    font-size: 20px;
}
	.bg_deco4 {
    top: 0%;
    left: 0;
	}
	
	.bg_deco5 {
    top: 1%;
    left: 0;
	}
	.bg_deco6 {
   bottom: 19%;
    left: 0;
	}
}

#tblLayout {
    width: 100%;
	margin: 0;}
#tblLayout td {
    vertical-align: top;
    border: none;
    padding: 0;
}



 table#listtable {
  
      width: 100%;
      border-collapse: collapse;
      margin: 20px auto 50px; 
    }

   table#listtable th,table#listtable td {
      border: 1px solid #ccc;
      padding: 10px;
      vertical-align: top;
	       width: 30%;
    }
table#listtable tbody{
	margin-bottom: 50px;
	
    display: block;
	background-color: #fff;
}
   table#listtable th {
      background-color: #e0f0ff; /* 薄いブルー */
      text-align: left;
    }

table#listtable td p{
		padding: 10px;

	color: #fff;
	text-align: center;
	border-radius: 10px;
	margin-bottom: 10px;
}

table#listtable td.blue p{
	background: #0B419A;
	
}

table#listtable td.green p{
	
	background: #9AB718;
}

table#listtable td.pink p{
	
	background: #D6896D;
	
}

table#listtable td.black p{
	
	background: #000000;
	
}
table#listtable td.gold p{
	
	background: #D5D181;
	
}

table#listtable td span{
	display: block;
	margin-bottom: 10px;
	font-weight: bold;
}

    @media screen and (max-width: 768px) {
      table#listtable,table#listtable thead,table#listtable tbody,table#listtable th,table#listtable td,table#listtable tr {
        display: block;
      }

     table#listtable thead {
        display: none;
      }

     table#listtable tr {
        margin-bottom: 15px;
        border: 1px solid #ccc;
        padding: 10px;
      }

     table#listtable td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        width: 100%;
      }
/*
      td::before {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: bold;
        color: #333;
      }

      td:nth-of-type(1)::before { content: "時間"; }
      td:nth-of-type(2)::before { content: "行動"; }
      td:nth-of-type(3)::before { content: "目的"; }*/
    }