/* ↓↓font-family: "HGP創英角ﾎﾟｯﾌﾟ体", sans-serif; */
@font-face {
  font-family: 'HGP創英角ﾎﾟｯﾌﾟ体';
  src:url("./font/HGRPP1.TTC") format("truetype");
}

* {
  -webkit-user-select: none;     /* テキスト選択無効（iOS Safari対応） */
  -webkit-touch-callout: none;   /* 長押しメニュー無効（iOS Safari対応） */
  user-select: none;             /* その他ブラウザ用 */
  touch-action: manipulation;    /* タップ時の余計な動作抑制 */
}

img, button, .game-area {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ******************チャッチゲーム装飾********************** */
.main.game_page{
    background-image: url(../img/puzzle/puzzle_back3.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
	height: 100vh;
}
.game-page-inner{
	max-width: 768px;
	width: 100%;
    height: 100%;
	margin: 0px auto;
}

.catch_game_score{
    padding-top: 10px;
	background-image: url(../img/catch/game-score-top.png);
    background-size: cover;
    background-repeat: no-repeat;
    border-bottom: 10px solid #8c6239;
    padding-bottom: 6px;
    min-height: 23vw;
}

	.ch_h_top{
		display: flex;
	    flex-direction: row;
	    flex-wrap: nowrap;
	    align-items: flex-start;
	    justify-content: space-between;
	}
		
	.ch_h_bottom{
	    display: flex;
	    flex-direction: row;
	    flex-wrap: nowrap;
	    align-items: flex-end;
	    justify-content: center;
	}
		.cg_page_back {
		    display: block;
		    max-width: 200px;
		    background: #f57f45;
		    padding: 16px 37px;
		    text-align: center;
		    border-top-left-radius: 0px;
		    border-top-right-radius: 40px;
		    border-bottom-right-radius: 40px;
		    border-bottom-left-radius: 0px;
		    border: 4px solid #fff;
			border-left: 0px;
		    box-shadow: 5px 6px 10px -5px #000;
		}
			.cg_page_back img{
				max-width: 100%;
			}
		
		.puzzle_level_h{
			text-align: center;
			margin-left: 10px;
		}
			.puzzle_level_h_txt{
			    font-family: "HGP創英角ﾎﾟｯﾌﾟ体", sans-serif;
			    font-style: normal;
			    font-weight: 700;
			    font-optical-sizing: auto;
			    font-size: 2.9vw;
			    
			    color: #ffffff;
			    background-color: #8c6239;
			    text-align: center;
			    margin-top: 1.1vw;
			    padding: 1.7vw 0 1vw 0;
			}
				.puzzle_level_h.level1 p{ background-color: #ef94ae; } /*レベル1*/
				.puzzle_level_h.level2 p{ background-color: #fbae17; } /*レベル2*/
				.puzzle_level_h.level3 p{ background-color: #009245; } /*レベル3*/
				
				.puzzle_level_h_txt span{
					
				}
			.puzzle_level_h_img{
				max-width: 150px;
			}
				.puzzle_level_h_img img{
					width: 100%;
				}
	
	.puzzle_game_maxc{
	    max-width: 85%;
	    margin: 0 auto;	
	}
	
	.puzzle_now_txt{
		font-family: "HGP創英角ﾎﾟｯﾌﾟ体", sans-serif;
	    font-size: 20px;
	    font-weight: 500;
	    font-style: normal;
	    margin: 15px auto 7px;
	    background: #ffffffd9;
	    border-radius: 2vw;
	    padding: 16px 12px 6px 11px;
	    letter-spacing: 2px;
	    color: #754c24;
	}
		.puzzle_now_txt img{
			margin: 0px 0px 10px 0px;
		}
	
	/*ルビ文字装飾*/
	.puzzle_now_txt ruby[data-ruby] rt {
	  display: none;
	}
	 
	.puzzle_now_txt ruby[data-ruby] {
	  position: relative;
	  display: inline-block;
	}
	 
	.puzzle_now_txt ruby[data-ruby]::after {
	  content: attr(data-ruby);
	  position: absolute;
	  transform: translate(-50%, -1.7em);
	  display: block;
	  left: 50%;
	  top: 0;
	  white-space: nowrap;
	  font-size: 44%;
	  letter-spacing: 2px;
	  line-height: 34px;
	}

		.puzzle_now_txt p{
		    line-height: 29px;
		    margin-bottom: 5px;
		}
		.puzzle_now_txt .rubi1{
			line-height: 36px;
		}
		.puzzle_now_txt .rubi2{
			line-height: 31px;
		}
		.puzzle_now_txt .rubi3{
			line-height: 33px;
		}
	
	
@media screen and (max-width: 700px){
	.cg_page_back{
        max-width: 130px;
        width: 29vw;
        padding: 2vw 3vw;
        position: absolute;
        left: 0px;
	}
}
@media screen and (max-width: 600px){
	
}
@media screen and (max-width: 480px){
	
}

/*うがいのテキストだけ調整*/
.puzzle_now_word {
  white-space: nowrap;
  letter-spacing: -0.08em;
  font-feature-settings: "palt";
}

/*★エフェクト*/
.board {
  position: absolute;
}

.puzzle_clear_effect {
  position: absolute;
  inset: -12%;
  pointer-events: none;
  z-index: 30;
  overflow: visible;
}

.puzzle_clear_effect .star {
  position: absolute;
  display: block;
  color: #fff200;
  line-height: 1;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.3) rotate(var(--star-rotate, 0deg));
  animation: puzzleStarCircle 1.45s ease-out forwards;
  text-shadow:
    0 2px 0 rgba(255,255,255,0.8),
    0 0 8px rgba(255,242,0,0.8);
}

.puzzle_clear_effect .star_lead {
  font-size: 30px;
}

.puzzle_clear_effect .star_mid {
  font-size: 20px;
}

.puzzle_clear_effect .star_trail {
  font-size: 12px;
}

@keyframes puzzleStarCircle {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4) rotate(var(--star-rotate, 0deg));
  }

  25% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05) rotate(var(--star-rotate, 0deg));
  }

  70% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(var(--star-rotate, 0deg));
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.75) rotate(var(--star-rotate, 0deg));
  }
}

/*パズル完成時に空白ピースをフワッと表示*/
.complete-tile {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
  z-index: 20;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

.complete-tile.is_visible {
  opacity: 1 !important;
  visibility: visible;
  transition: opacity 0.45s ease, visibility 0s linear 0s;
}

/*キラキラ演出*/
/* キラキラ全体のレイヤー */
.fx{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:visible;
  z-index:20;

  /* JSから上書きされる初期値 */
  --final-scale:.72;
  --final-opacity:1;
  --mid-rotate:180deg;
  --final-rotate:300deg;
  --reduced-motion-duration:1000ms;
}

/* キラキラ1個分 */
/*.sparkle{
  position:absolute;
  left:50%;
  top:50%;
  width:var(--sz);
  height:var(--sz);
  color:var(--col);
  transform:translate(-50%, -50%) scale(var(--sparkle-start-scale)) rotate(0deg);
  animation:sparkle-fly var(--dur) cubic-bezier(.15,.65,.35,1) var(--delay) forwards;
}*/
.sparkle{
  position:absolute;
  left:50%;
  top:50%;
  width:var(--sz);
  height:var(--sz);
  color:var(--col);

  /* delay中に中央で見えないようにする */
  opacity:0;
  transform:translate(-50%, -50%) scale(0) rotate(0deg);

  /* both にすると delay中も 0% の状態を維持できる */
  animation:sparkle-fly var(--dur) cubic-bezier(.15,.65,.35,1) var(--delay) both;
}

/* 星の形 */
.sparkle::before{
  content:"";
  position:absolute;
  inset:0;
  background:currentColor;
  clip-path:polygon(
    50% 0,
    60% 40%,
    100% 50%,
    60% 60%,
    50% 100%,
    40% 60%,
    0 50%,
    40% 40%
  );
  filter:drop-shadow(0 0 var(--sparkle-glow) currentColor);
}

@keyframes sparkle-fly{
  0%{
    transform:translate(-50%, -50%) scale(var(--sparkle-start-scale)) rotate(0deg);
    opacity:0;
  }
  15%{
    opacity:1;
  }
  60%{
    transform:translate(var(--dx), var(--dy)) scale(var(--peak)) rotate(var(--mid-rotate));
    opacity:1;
  }
  100%{
    transform:translate(var(--dx), var(--dy)) scale(var(--final-scale)) rotate(var(--final-rotate));
    opacity:var(--final-opacity);
  }
}
/*@keyframes sparkle-fly{
  0%{
    transform:translate(-50%, -50%) scale(0) rotate(0deg);
    opacity:0;
  }


  18%{
    opacity:0;
  }

  35%{
    opacity:1;
  }

  60%{
    transform:translate(var(--dx), var(--dy)) scale(var(--peak)) rotate(var(--mid-rotate));
    opacity:1;
  }

  100%{
    transform:translate(var(--dx), var(--dy)) scale(var(--final-scale)) rotate(var(--final-rotate));
    opacity:var(--final-opacity);
  }
}*/

/* 動きを減らす設定の端末でも、見える長さにする */
@media (prefers-reduced-motion: reduce){
  .sparkle{
    animation-duration:var(--reduced-motion-duration);
    animation-iteration-count:1;
  }
}