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


/*==============================================================*/
/*illust_star-------*/
.bg_yellow{position:relative;}
.bg_yellow .illust01{width:80px; position: absolute; top:-245px; left:12%; z-index:2}
.bg_yellow .illust02{width:80px; position: absolute; top: -137px; right:12%; z-index:2}
.bg_yellow .illust03{width:80px; position: absolute; top:152px; left:6%; z-index:2}
.bg_yellow .illust01 img,
.bg_yellow .illust02 img,
.bg_yellow .illust03 img{width:100%;}
#section1{position:relative;}
#section1 .illust04{width:80px; position: absolute; top:180px; right:7%; z-index:2}
#section1 .illust05{width:80px; position: absolute; top:263px; left:27%; z-index:2}
#section1 .illust06{width:80px; position: absolute; top:354px; right:27%; z-index:2;}
#section1 .illust07{width:80px; position: absolute; top:618px; left:6%; z-index:2}
#section1 .illust08{width:80px; position: absolute; top:870px; right:12%; z-index:2}
#section1 .illust09{width:80px; position: absolute; bottom: 0; left:23%; z-index:2;}
@media only screen and (max-width: 1024px) {
.bg_yellow .illust01{width:8%; max-width:80px; top:-140px; left: 4%;}
.bg_yellow .illust02{width:8%; max-width:80px; top:-70px; right:8%;}
.bg_yellow .illust03{width:8%; max-width:80px;}
#section1 .illust04{width:8%; max-width:80px; top:-70px;}
#section1 .illust05{width:8%; max-width:80px; top: 97px; left:15%;}
#section1 .illust06{width:8%; max-width:80px; top:205px; right:15%;}
#section1 .illust07{width:8%; max-width:80px; top:435px; left:6%;}
#section1 .illust08{width:8%; max-width:80px; top:690px;}
#section1 .illust09{width:8%; max-width:80px; bottom: 0; left:23%;}
}
#section5{position:relative;}
#section5 .illust01{width:100px; position: absolute; top:-40px; left:12%; z-index:2}
#section5 .illust02{width:80px; position: absolute; top:68px; left:6%; z-index:2}
#section5 .illust03{width:100px; position: absolute; top:-40px; right:12%; z-index:2}
#section5 .illust04{width:80px; position: absolute; top:68px; right:7%; z-index:2}
#section5 .illust05{width:80px; position: absolute; bottom:-40px; left:12%; z-index:2}
#section5 .illust06{width:100px; position: absolute; bottom:68px; left:6%; z-index:2}
#section5 .illust07{width:80px; position: absolute; bottom:-40px; right:12%; z-index:2}
#section5 .illust08{width:100px; position: absolute; bottom:68px; right:7%; z-index:2}
@media only screen and (max-width: 1024px) {
#section5 .illust01{width:10%; max-width:100px; left:20%;}
#section5 .illust02{width:8%; max-width:80px; top:15px; left:12%;}
#section5 .illust03{width:10%; max-width:100px; top:-40px; right:20%;}
#section5 .illust04{width:8%; max-width:80px; top:15px; right:12%; }
#section5 .illust05{width:8%; max-width:80px; bottom:-40px; left:12%;;}
#section5 .illust06{width:10%; max-width:100px; bottom:15px; left:6%;}
#section5 .illust07{width:8%; max-width:80px; bottom:-40px; right:12%;}
#section5 .illust08{width:10%; max-width:100px; bottom:15px; right:7%; }
}

/*==============================================================*/
  /* キラキラアニメーションの設定 */
.sparkle01 {animation: sparkle 1.5s infinite alternate;}
.sparkle02 {animation: sparkle 2s infinite alternate;}
.sparkle03 {animation: sparkle 2.5s infinite alternate;}
@keyframes sparkle {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
    filter: brightness(1.2) drop-shadow(0 0 8px rgba(255, 255, 255, 0.7)); 
  }
}
@keyframes sparkle_consecutive {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;

  }
}


/*==============================================================*/
/*スクロールarrow--------*/
.arrow {
  display: block;
  margin: 0 auto;
  width: 4px;
  height: 100px;
  position: relative;
}
.arrow::before {
  content:"";
  display: block;
  width: 16px;
  height: 80px;
  background-color: #ccc;
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(1, 0);
  transform-origin: left top;
  transition-duration: 1s;
  transition-delay: 1s;
}
.arrow::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-width: 40px 40px 0px 40px;
  border-style: solid;
  border-color: #ccc transparent transparent transparent;
  position: absolute;
  bottom: -10px;
  left: -33px;
  transform: scale(1, 0);
  transform-origin: left top;
  transition-duration: 0.5s;
  transition-delay: 1.5s;
}
.arrow.active::before,
.arrow.active::after {
  transform: scale(1, 1);
}

/*==============================================================*/
/*icon_arrow--------*/
.icon_arrow {
  display: block;
  margin: 0 auto;
  width:8px;
  height:30px;
  position: relative;
}
.icon_arrow::before {
  content: "";
  display: block;
  width: 8px;
  height: 20px;
  background-color: #ccc;
  position: absolute;
  top: 0;
  left: 0;
}
.icon_arrow::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-width:14px 14px 0px 14px;
  border-style: solid;
  border-color: #ccc transparent transparent transparent;
  position: absolute;
  bottom:0;
  left:-10px;
}

/*==============================================================*/
/*consecutive stars--------*/
.consecutive_stars01 {
  display: block;
  margin: 0 auto;
  width: 800px;
  height: 180px;
  position: relative;
  top:-100px;
}
.consecutive_stars01::before{
  content: "";
  display: block;
  width:100%;
  max-width: 800px;
  height: 100%;
  background-image: url(../img/consecutive_stars.svg);
  background-repeat: no-repeat; 
  background-size: 100%; 
  position: absolute;
  bottom: 0;
}

.consecutive_stars02 {
  display: block;
  margin: 0 auto;
  width: 20px;
  height:110px;

}
.consecutive_stars02::before{
  content: "";
  display: block;
  width: 20px;
  height:160px;
  background-image: url(../img/icon_star5.svg);
  background-repeat:repeat-y; 
  background-size: 100% 30px;
  background-position:center;
}
@media only screen and (max-width: 1024px) {
.consecutive_stars01 {
  width:95%;
  max-width: 800px;
}
}

/*==============================================================*/
  /* 回転星アニメーションの設定 */
.rotateStar {animation: rotateStar 3s linear infinite;}


/* 回転星アニメーションの定義 */
@keyframes rotateStar {
    0% {
        transform: rotate(0deg); /* Z軸を中心に0度 */
    }
    100% {
        transform: rotate(360deg); /* Z軸を中心に360度回転 */
    }
}
/*==============================================================*/
/*スクロールmarker--------*/
.contents .box .circle h3 {
    display: inline-block;
}
.marker span{
    background: -webkit-linear-gradient(transparent 0%,#efea3a85 0%);
    background: -moz-linear-gradient(transparent 0%,#efea3a85 0%);
    background: linear-gradient(transparent 0%,#efea3a85 0%);
    background-repeat: no-repeat;
    background-size: 200% .8em;
    background-position: 200% .5em;
    transition: 2s;
    transition-delay: 1s;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
	
/* 1つ目のbox内のmarker */
.contents .box:nth-of-type(1) .marker span{
    transition-delay: 0.5s;
}

/* 2つ目のbox内のmarker */
.contents .box:nth-of-type(2) .marker span{
    transition-delay: 1.5s;
}

/* 3つ目のbox内のmarker */
.contents .box:nth-of-type(3) .marker span{
    transition-delay: 2.5s;
}
.marker.is-active span{
    background-position: 100% .5em;
}

/*button--------*/
a.deco_btn {
  position: relative;
  text-decoration: none;
  color: #fff;
  border:2px solid #71c7d4;
  overflow: hidden;
  z-index: 0;
}
a.deco_btn:after {
  position: absolute;
  top: 50%;
  left: 50%;
  content:'';
  height: 0;
  width: 100%;
  background : #fff;
  opacity: 0;
  transform: translate(-50%,-50%) rotate(45deg);
  transition: 0.3s;
  z-index: -1;
}
a.deco_btn:hover {
  color: #71c7d4;
}
a.deco_btn:hover:after {
  height: 250%;
  opacity: 1;
}
a.deco_btn:active:after {
  height: 350%;
  opacity: 1;
}





/*==============================================================*/
/*popup design*/
.popup-background{
  /*position size*/
  position: fixed;
  z-index : 100;
  top : 0;
  left : 0;
  height : 100vh;
  width : 100vw;

  /*design*/
  background-color: gray;
  opacity : 0.5
}
.popup{
  /*position size*/
  --height : 400px;
  --width : 400px;
  z-index : 101;
  position: fixed;
  top : calc(50vh - calc(var(--height) / 2));
  left : calc(50vw - calc(var(--width) / 2));
  height : var(--height);
  width : var(--width);

  /*design*/
  overflow : hidden;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0px 0px 3px 1px gray;
}
.popup > .close-button{
  /*position size*/
  --size : 20px;
  position:absolute;
  top : calc(var(--size)/4);
  left : calc(var(--width) - var(--size) * 5/4);/*css variables are available in children*/
  height : var(--size);
  width : var(--size);

  /*design*/
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  color : gray;
  font-size: var(--size);
  border-radius: calc(var(--size)/5);
}
.popup > .close-button:hover{
  /*design*/
  background-color:#ee7c1a;
  color : white;
}
.popup > .content{
  padding:8%;
  text-align: center;
}
.popup > .content img{
	width:86%;
}
.popup > .content p{
	font-weight:500;
	margin-bottom:14px;
}
/*hide popup*/
.popup-flag{
  display: none;
}
.popup-flag:not(:checked) + .popup-background{
  display:none;
}
.popup-flag:not(:checked) + * + .popup{
  display:none;
}


/*==============================================================*/
/*スクロールアニメーション*/ 

.fade_in {
  opacity: 0; /* 初期状態では非表示 */
  transform: translateY(20px); /* 初期状態では少し下にずらす（必要に応じて調整） */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* アニメーションの速度とイージング */
}

.fade_in.is-visible {
  opacity: 1; /* 表示されたら不透明にする */
  transform: translateY(0); /* 元の位置に戻す */
}