@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 rgba(124,108,6,1.00);
  }
  .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(45, 37, 16, 0.45);
	  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;}
  .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("../img2026/kuji_bg.gif");
	background-repeat: repeat;
}

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

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


.kuji_ni_chosen {
	width: 852px;
	margin: auto;
	padding-top: 50px;
}

.kuji_ni_chosen img {
	width: 100%;
}

.kuji_lead_box {
	background-image: url("../img2026/main_lead_bg_pc.png");
	background-repeat: no-repeat;
	width: 734px;
	height: 210px;
	margin:20px auto 0px auto;
}

.kuji_main_mv p {
	font-size:15px;
	color: #000;
	font-weight: bold;
	text-align: center;
	padding-top: 90px;
	line-height: 1.5em;
}


.kuji_jouken {
	width: 1000px;
	margin: auto;
	color: #000;
}

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

.txt_jouken {
	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;
	padding-top: 20px;
}

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

.kuji_attention {
	width: 800px;
	background-color:#FFFDD0;
	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("../img2026/main_bg_sp.png");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100%;
	width: 100%;
	margin-bottom: 20px;
	height: 560px;
}
	
	
.kuji_lead_box {
	background-image: url("../img2026/main_lead_bg_sp.png");
	background-repeat: no-repeat;
	background-size: 100%;
	width: 95%;
	height: 226px;
	margin:10px auto 0px auto;
}
	
.kuji_main_mv p {
	font-size: 13px;
	color: #000;
	font-weight: bold;
	text-align: center;
	padding-top: 50px;
	line-height: 1.5em;
}


.kuji_ni_chosen {
	width: 90%;
	margin: auto;
	padding-top: 20px;
}
	
.txt_jouken {
	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;
}

	p.chusen {
		font-size: 15px;
	}
	
.kuji_attention {
	width: 80%;
	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: 530px;
}
	
	.kuji_main_mv p {
	padding-top: 58px;
	font-size: 13px;
}
	
}


/*/////////////////////////////　フッター　////////////////////////////*/
footer {
  text-align: left;
  position: relative;
  padding: 0 0 0 0;
}

footer ul {
  margin: 0 auto;
  padding: 0;
  font-size: 12px;
  line-height: 1.4;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  bottom: 11px;
  right: 40px;
}

footer li {
  margin: 0 0 0 24px;
  padding: 0;
}

footer .copyright {
  background: #ececec;
  padding: 24px 40px;
  text-align: left;
  margin: 0 auto;
  font-size: 1rem;
}

footer .copyright a {
  color: inherit !important;
  text-decoration: none;
}

footer div {
  color: #fff;
  background: #445289;
  padding: 40px calc(50% - 450px);
  padding: 40px -webkit-calc(50% - 450px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

footer dl {
  margin: 0 0 0px 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}

footer dd {
  font-size: 13px;
  margin: 0 12px 0 0;
  padding: 0;
}

footer dt {
  margin: 0 16px 0 0;
  padding: 0;
  font-size: 15px;
  font-weight: bold;
}

footer dd a {
  color: #fff !important;
  font-size: 100%;
  vertical-align: baseline;
  text-decoration: none;
  margin: 0;
  padding: 0;
}

footer dd a:hover {
  text-decoration: underline;
}

@media only screen and (max-width: 767px) {
  footer {
    padding: 30px 0 0 0;
  }
  footer ul {
    text-align: center;
    display: block;
    position: static;
  }
  footer li {
    margin: 0;
    padding: 0 15px;
  }
  footer .copyright {
    padding: 15px 20px;
  }
  footer div {
    display: block;
    padding: 20px;
    margin-top: 20px;
  }
  footer dl {
    margin: 0;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  footer dt {
    width: 100%;
    margin: 0 0 12px 0;
  }
}