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

 :root{
    --brand:#0ea5e9; /* アクセント色はお好みで */
    --ink:#222; --muted:#6b7280; --bg:#ffffff; --card:#f8fafc; --ok:#10b981; --ng:#ef4444;
  }


#confetti {
  pointer-events: none !important;
}

#confetti.hidden {
  display: none !important;
}


  .wrap{max-width:680px;margin:0 auto;}
/*  .card{background:var(--card); border-radius:16px; padding:24px; box-shadow:0 6px 22px rgba(0,0,0,.06)}*/
/*  h1{font-size:20px;margin:0 0 12px}
  p{margin:0 0 12px;color:var(--muted)}*/

 h2{font-size:40px;
	 text-align: center;
	 font-weight: bold;
	 color: #000;
	 line-height: 1em;
	 padding-top: 20px;
	 margin:0 0 12px}
  .machine{display:grid; gap:16px; place-items:center; text-align:center; padding:16px 0}
  .display{
    font-variant-numeric:tabular-nums; letter-spacing:.02em;
    font-size:42px; font-weight:800; line-height:1.1;
    padding:16px 20px; border-radius:12px; min-width:260px;
    /*background:#fff;*/ border:2px dashed #cbd5e1;
  }
  .code{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:18px;}
  .btn{
    appearance:none; border:0; border-radius:999px; padding:14px 24px; font-weight:700;
    /*background:var(--brand);*/
	 background-color: #99853F; color:#fff; cursor:pointer; transition:transform .04s ease, box-shadow .2s;
    box-shadow:0 8px 18px rgba(14,165,233,.25);
	  font-size: 20px;
  }
  .btn:disabled{opacity:.5; cursor:not-allowed; box-shadow:none}
  .row{display:flex; gap:8px; flex-wrap:wrap; justify-content:center;padding-bottom: 30px;
    padding-top: 20px;}
  .note{font-size:12px; color:#fff;}
  .badge{
	  display:block;
	  padding:6px 10px;
	  border-radius:999px;
	  font-size:16px;
	  font-weight:700;
	  background:#eef2ff;
	  color:#3730a3;
width: 200px;
margin: auto;
	  text-align: center;
}
  .copy{background:#fff;color: #000;}
  .hidden{display:none}
  .pulse{animation:pulse 1.6s ease-out 1}
  @keyframes pulse{0%{transform:scale(1)} 40%{transform:scale(1.06)} 100%{transform:scale(1)}}
  .confetti{position:fixed; inset:0; pointer-events:none; overflow:hidden}



/* 右下に固定表示（位置はお好みで） */
.bf-mascot{
   position: fixed;
  right: 20px;
  bottom: 20%;
  transform: translateY(50%);
  z-index: 50;
  pointer-events: none; /* マスコットがボタンを邪魔しないように */
}

/* いつもの、ゆらゆら（常時アニメ） */
.bf-mascot img{
  width: 180px;
  transform-origin: 50% 80%;
  animation: mascotFloat 3s ease-in-out infinite;
}

@keyframes mascotFloat{
  0%   { transform: translateY(0) rotate(0deg); }
  25%  { transform: translateY(-4px) rotate(-1.5deg); }
  50%  { transform: translateY(0) rotate(1deg); }
  75%  { transform: translateY(-3px) rotate(-1deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* ★ 高く跳ねるジャンプアニメ */
#mascot.jump img{
  animation: mascotHighJump 0.95s cubic-bezier(.2,1.1,.2,1.0);
}

@keyframes mascotHighJump {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  18% {
    transform: translateY(-35px) rotate(-4deg) scale(1.05);
  }
  38% {
    transform: translateY(-110px) rotate(4deg) scale(1.12); /* ← ★最高地点 */
  }
  60% {
    transform: translateY(-45px) rotate(-3deg) scale(1.06);
  }
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
}


/* ページデザイン用 */


#container_kuji{
	width: 100%;
	overflow: hidden;
	background-image: url("../img/kuji_bg.gif");
	background-repeat: repeat;
	color: #fff;
}

.kuji_tate {
	background-image: url("../img/kuji_tate_bg.png");
	background-repeat:repeat-y;
	background-size: 1692px;
	background-position: center;
}

.kuji_main_mv {
	background-image: url("../img/kuji_main_bg_pc02.png");
	background-repeat: no-repeat;
	background-position: center top;
	width: 100%;
	margin-bottom: 20px;
	height: 560px;
}


.kuji_ni_chosen {
	width: 687px;
	margin: auto;
	padding-top: 230px;
}

.kuji_ni_chosen img {
	width: 100%;
}

.kuji_main_mv p {
	font-size: clamp(18px, 5.2vw, 26px);
	color: #000;
	font-weight: bold;
	text-align: center;
	padding-top: 130px;
	line-height: 1.5em;
}


.kuji_jouken {
	width: 1000px;
	margin: auto;
}

.tit_jouken {
	font-size: 22px;
	font-weight: bold;
	color: #000;
	text-align: center;
	padding: 15px 0px;
}

.txt_jouken {
	color: #fff;
	font-size: 18px;
	text-align: center;
	padding-bottom: 30px;
}


.joken_list {
	background-color: #fff;
	color: #000;
	width: 800px;
	margin: auto;
	padding: 10px;
	font-size: 15px;
	border-collapse: collapse; /* ←追加：線を重ねず1本にする */
}

.joken_list td {
	padding: 10px;
	border: 1px solid #000; /* ←追加：各セルを1px線で区切る */
	width: 20px;
}

.list_t {
	background-color: rgba(230,229,229,1.00);
	font-weight: bold;
	font-size: 18px;
}

.joken_att {
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	color: #fff;
	padding-top: 20px;
}

.chusen {
	font-size: 17px;
	text-align: center;
	padding-top: 20px;
}

.kuji_attention {
	width: 800px;
	background-color: rgba(211,211,211,1.00);
	color: #000;
	padding: 20px;
	margin:0 auto 30px auto;
	
}

.att_tit {
	font-size: 20px;
	font-weight: bold;
}

.kuji_attention li {
	font-size: 15px;
	line-height: 1.5em;
	padding-bottom: 5px;
}

.back_btn {
	padding-top: 30px;
	padding-bottom: 40px;
	width: 453px;
	margin: auto;
}


@media only screen and (max-width: 767px) {
	
	
 h2{
	 font-size:35px;
	 }
	
	
.kuji_main_mv {
	background-image: url("../img/kuji_main_bg_sp02.png");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100%;
	width: 100%;
	margin-bottom: 20px;
	height: 460px;
}
	
.kuji_main_mv p {
	font-size: 14px;
	color: #000;
	font-weight: bold;
	text-align: center;
	padding-top: 115px;
	line-height: 1.5em;
}


.kuji_ni_chosen {
	width: 90%;
	margin: auto;
	padding-top: 130px;
}
	
.txt_jouken {
	color: #fff;
	font-size: 15px;
	text-align: center;
}
	
.kuji_jouken {
	width: 100%;
	margin: auto;
}
	
.joken_list {

	width: 90%;
}
	
.joken_att {
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	color: #fff;
}

	p.chusen {
		font-size: 15px;
	}
	
.kuji_attention {
	width: 80%;
	background-color: rgba(211,211,211,1.00);
	color: #000;
	padding: 20px;
	margin:0 auto 30px auto;
	
}
	
.bf-mascot{
  display: none;
}

	
.back_btn {
	width: 90%;
	margin: auto;
}
	
	.back_btn img {
		width:100%;
	}


	
}

@media screen and (max-width: 390px) {
	
.kuji_main_mv {
	height: 420px;
}
	
	.kuji_main_mv p {
	padding-top: 35px;
	font-size: 15px;
}
	
}