@charset "UTF-8";

/* =========================================================
	 共通変数・基本設定
========================================================= */

/* CSS変数定義
	 色などをまとめて管理している */
:root {

	/* メインピンク */
	--pink: #FF3E8A;

	/* メインイエロー */
	--yellow: #FFD600;

	/* シアン */
	--cyan: #00E5FF;

	/* グリーン */
	--green: #00E676;

	/* オレンジ */
	--orange: #FF6B35;

	/* 背景色 */
	--bg: #FFF8F0;

	/* ダークカラー */
	--dark: #1A0533;
}


/* アプリ全体ラッパー */
#pitatto {
	/* 日本語折返し制御 */
	word-wrap: normal;
	/* 横幅100% */
	width: 100%;
	/* 最大幅 */
	max-width: 755px;
	/* 中央寄せ */
	margin: 0 auto;
	/* フォント */
	font-family: 'Nunito', sans-serif;
	/* 背景色 */
	background: var(--bg);
	/* 文字色 */
	color: var(--dark);
	/* 最低高さ */
	min-height: 100vh;
	/* 横スクロール防止 */
	overflow-x: hidden;
	/* 疑似要素配置用 */
	position: relative;
}


/* 全要素共通設定 */
#pitatto * {
	/* padding含めてサイズ計算 */
	box-sizing: border-box;
	/* デフォルトmargin除去 */
	margin: 0;
	/* デフォルトpadding除去 */
	padding: 0;
	/* タップ時ハイライト無効 */
	-webkit-tap-highlight-color: transparent;
}

/* emタグの斜体解除 */
#pitatto em {
	font-style: normal;
}

/* リンク下線除去 */
#pitatto a {
	text-decoration: none;
}

/* 画像共通設定 */
#pitatto img {
	/* 親幅超え防止 */
	max-width: 100%;
	/* 下余白防止 */
	vertical-align: bottom;
}

/* テーブル枠結合 */
#pitatto table {
	border-collapse: collapse;
}

/* =========================================================
	 装飾パーツ（浮遊アニメーション）
========================================================= */

#pitatto {
	/* 浮遊丸共通 */
	.deco {
		/* 固定配置 */
		position: absolute;
		/* 円形 */
		border-radius: 50%;
		/* 背景側 */
		z-index: 0;
		/* 操作無効 */
		pointer-events: none;
		/* 浮遊アニメ */
		animation: deco_float 6s ease-in-out infinite;
	}

	/* 右上装飾 */
	.deco1 {
		width: 180px;
		height: 180px;
		background: var(--cyan);
		opacity: .18;
		top: -60px;
		right: -40px;
		animation-duration: 7s;
	}

	/* 左下装飾 */
	.deco2 {
		width: 120px;
		height: 120px;
		background: var(--pink);
		opacity: .18;
		bottom: 80px;
		left: -30px;
		animation-duration: 9s;
		animation-delay: -3s;
	}


	/* 中央右装飾 */
	.deco3 {
		width: 80px;
		height: 80px;
		background: var(--yellow);
		opacity: .25;
		top: 40%;
		right: 10px;
		animation-duration: 5s;
		animation-delay: -1s;
	}

	/* 浮遊アニメーション */
	@keyframes deco_float {
		/* 初期位置 */
		0%,
		100% {
			transform: translateY(0) rotate(0deg);
		}
		/* 中間位置 */
		50% {
			transform: translateY(-20px) rotate(15deg);
		}
	}

	/* =========================================================
		 紙吹雪
	========================================================= */

	/* 紙吹雪コンテナ */
	#confetti {
		position: fixed;
		inset: 0;
		z-index: 999;
		pointer-events: none;
		overflow: hidden;
	}

	/* 紙吹雪パーツ */
	.cf {
		position: absolute;
		width: 10px;
		height: 10px;
		opacity: 0;
		animation: cf_fall 2.4s ease-in forwards;
	}

	/* 落下アニメ */
	@keyframes cf_fall {
		/* 開始 */
		0% {
			transform:
				translateY(-10px)
				rotate(0deg);
			opacity: 1;
		}
		/* 終了 */
		100% {
			transform:
				translateY(110vh)
				rotate(800deg);
			opacity: 0;
		}
	}

	/* =========================================================
		 レイアウト・ヘッダー
	========================================================= */

	/* ページ本体 */
	.page {
		position: relative;
		max-width: 500px;
		margin: 0 auto;
		padding: 10% 5% 20%;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 24px;
	}

	/* タイトル */
	.hero_title {
		font-family: 'Dela Gothic One', cursive;
		font-size: clamp(32px, 8vw, 44px);
		line-height: 1.1;
		text-align: center;
		/* グラデーション文字 */
		background:
			linear-gradient(
				135deg,
				var(--pink) 0%,
				var(--orange) 50%,
				var(--yellow) 100%
			);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		letter-spacing: 0.2em;
		/* 影 */
		filter:	drop-shadow(3px 3px 0 rgba(255, 62, 138, .18));
	}

	/* サブタイトル */
	.hero_sub {
		text-align: center;
		font-size: min(3.2vw, 15px);
		font-weight: 700;
		color: rgba(26, 5, 51, .55);
		line-height: 1.6;
	}

	/* =========================================================
		 ゲームカード
	========================================================= */

	/* メインカード */
	.game_card {
		position: relative;
		width: 100%;
		background: #fff;
		border: 3px solid var(--dark);
		border-radius: 28px;
		/* box-shadow: 3px 3px 0 var(--dark); */
		padding: 7% 5% 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* gap: 1.5em; */
	}

	/* =========================================================
		 プログレスバー
	========================================================= */

	/* バーラッパー */
	.bar_wrap {
		width: 100%;
		position: relative;
	}

	/* バー背景 */
	.bar_track {
		width: 100%;
		height: 52px;
		background: #F0EBF8;
		border: 3px solid var(--dark);
		border-radius: 999px;
		overflow: hidden;
		position: relative;
	}

	/* 動くバー */
	.bar_fill {
		height: 100%;
		width: 0%;
		background:
			linear-gradient(
				90deg,
				var(--cyan),
				var(--green)
			);
		border-radius: 999px;
		transition: width .05s linear;
		position: relative;
	}

	/* バー先端の光 */
	.bar_fill::after {
		content: '';
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		width: 14px;
		background: rgba(255, 255, 255, .4);
		border-radius: 0 999px 999px 0;
	}

	/* =========================================================
		 ゾーン表示
	========================================================= */

	/* ゾーン横並び */
	.zones_row {
		display: flex;
		width: 100%;
		margin-top: 8%;
		gap: 4px;
		align-items: stretch;
	}

	/* ゾーン共通 */
	.zone_chip {
		padding: 10px 3px;
		border-radius: .8em;
		text-align: center;
		font-size: min(4vw, 14px);
		font-weight: 800;
		border: 2px solid var(--dark);
		/* box-shadow: 2px 2px 0 var(--dark); */
		line-height: 1;
		transition: transform .12s,box-shadow .12s;
		display: block;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		span {
			font-size: min(4.5vw, 22px);
		}
	}

	/* アクティブゾーン */
	.zone_chip.active {
		transform:
			scale(1.1)
			translateY(-3px);
		/* box-shadow: 3px 4px 0 var(--dark); */
		z-index: 2;
	}

	/* 左150円 */
	.zc1 {
		background: #FFE5EE;
		color: #C00050;
		flex: 26%;
		display: flex;
		align-items: center;
	}

	/* 左300円 */
	.zc2 {
		background: #FFFBDA;
		color: #7A6000;
		flex: 20%;
		display: flex;
		align-items: center;
	}

	/* 中央700円 */
	.zc3 {
		background: #E5FFF3;
		color: #006B3A;
		flex: 8%;
	}

	/* 右150円 */
	.zc4 {
		background: #FFE5EE;
		color: #C00050;
		flex: 26%;
		display: flex;
		align-items: center;
	}

	/* 右300円 */
	.zc5 {
		background: #FFFBDA;
		color: #7A6000;
		flex: 20%;
		display: flex;
		align-items: center;
	}

	/* 説明文 */
	.instr {
		font-weight: 700;
		color: rgba(26, 5, 51, .5);
		text-align: center;
		line-height: 1.3;
		letter-spacing: 0.2em;
		margin: 1% 0 0;
		
		.instr_text {
			font-size: min(4.5vw, 22px);
		}
		strong{
			font-size: min(8.3vw, 37px);
			letter-spacing: .1em;
			margin: 2% 0 0;
			display: block;
		}
		span {
			font-size: min(12vw, 77px);
			background: linear-gradient(135deg, var(--pink) 0%, var(--orange) 50%, var(--yellow) 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			filter: drop-shadow(3px 3px 0 rgba(255, 62, 138, .18));
			line-height: 0.9;
			display: inline-block;
		}
	}
	/* =========================================================
		 タップボタン
	========================================================= */
	.tap_btn {
		width: 140px;
		height: 140px;
		margin-top: 8%;
		border-radius: 50%;
		border: 4px solid var(--dark);
		background:
			linear-gradient(
				135deg,
				var(--pink),
				var(--orange)
			);
		box-shadow:
			0 5px 0 var(--dark),
			0 0 0 8px rgba(255, 62, 138, .12);
		cursor: pointer;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		transition:
			transform .08s,
			box-shadow .08s;
		user-select: none;
		position: relative;
		overflow: hidden;
	}

	/* 押下状態 */
	.tap_btn:active,
	.tap_btn.pressed {
		transform:
			scale(.93)
			translate(3px, 3px);
		box-shadow:
			2px 2px 0 var(--dark),
			0 0 0 8px rgba(255, 62, 138, .12);
	}

	/* 無効状態 */
	.tap_btn.disabled {
		opacity: .4;
		cursor: default;
	}

	/* アイコン */
	.tap_btn_icon {
		font-size: 42px;
		line-height: 1;
	}

	/* ボタン文字 */
	.tap_btn_text {
		font-family: 'Dela Gothic One', cursive;
		font-size: 16px;
		color: #fff;
		text-shadow:
			1px 1px 0 rgba(0, 0, 0, .2);
	}

	.tap_count {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		line-height: 1;
		margin-top: 3%;
	}

	.btn_products {
		width: 100%;
		height: auto;
		color: #fff;
		border-radius: 2.5em;
		border: 2px solid var(--dark);
		background: linear-gradient(135deg, var(--pink), var(--orange));
		box-shadow: 0 3px 0 var(--dark);
		cursor: pointer;
		font-weight: 700;
		font-size: min(4.5vw, 24px);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 3% 0 0;
		padding: 2% 0;
		transition: transform .08s, box-shadow .08s;
		user-select: none;
		position: relative;
		overflow: hidden;
		letter-spacing: .2em;
		&:after {
			content: "";
			display: block;
			position: absolute;
			top: 50%;
			right: 30%;
			transform: translateY(-50%);
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 5px 0 5px 9px;
			border-color: transparent transparent transparent #ffffff;
		}
		&:active {
			transform: scale(.93) translate(3px, 3px);
			box-shadow: 2px 2px 0 var(--dark), 0 0 0 8px rgba(255, 62, 138, .12);
		}
		&.pressed {
			transform: scale(.93) translate(3px, 3px);
			box-shadow: 2px 2px 0 var(--dark), 0 0 0 8px rgba(255, 62, 138, .12);
		}
		&.re{
			font-size: min(4.5vw, 16px);
			font-weight: 900;
			line-height: 1.3;
			background: #585656;
			padding: 5% 0;
			&:after {
				content: "";
				display: block;
				position: absolute;
				top: 50%;
				right: 22%;
				transform: translateY(-50%);
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 5px 0 5px 9px;
				border-color: transparent transparent transparent #ffffff;
			}
		}
	}

	/* =========================================================
		Ripple（ボタン波紋エフェクト）
	===================
	/* 波紋本体 */
	.ripple {
		/* 絶対配置 */
		position: absolute;
		/* 円形 */
		border-radius: 50%;
		/* 白半透明 */
		background: rgba(255, 255, 255, .4);
		/* 波紋アニメーション */
		animation: ripple_anim .5s ease-out forwards;
		/* クリック無効 */
		pointer-events: none;
	}

	/* 波紋アニメーション */
	@keyframes ripple_anim {
		/* 開始時 */
		from {
			/* サイズ0 */
			transform: scale(0);
			/* 表示 */
			opacity: 1;
		}

		/* 終了時 */
		to {
			/* 4倍に拡大 */
			transform: scale(4);
			/* フェードアウト */
			opacity: 0;
		}
	}

	/* =========================================================
		Countdown（カウントダウン）
	========================================================= */

	/* カウント数字 */
	.countdown {
		/* 見出し用フォント */
		font-family: 'Dela Gothic One', cursive;
		/* 大きめ文字 */
		font-size: min(20vw, 100px);
		/* 文字色 */
		color: var(--dark);
		/* 中央寄せ */
		display: flex;
		align-items: center;
		justify-content: center;
		/* 色変更アニメ */
		transition: color .2s;
		line-height: 1;
	}

	/* 残り1秒時 */
	.countdown.urgent {
		/* ピンク化 */
		color: var(--pink);
		/* 揺れるアニメ */
		animation: shake .2s ease-in-out infinite alternate;
	}

	/* 揺れアニメ */
	@keyframes shake {
		/* 左回転 */
		from {
			transform: rotate(-4deg);
		}
		/* 右回転 */
		to {
			transform: rotate(4deg);
		}
	}

	/* =========================================================
		タップ回数表示
	========================================================= */

	/* タップ説明テキスト */
	.tap_counter {
		/* 小さめ文字 */
		font-size: min(5vw, 23px);
		/* 太字 */
		font-weight: 800;
		/* 薄め文字色 */
		color: rgba(26, 5, 51, .4);
		margin-top: 8%;
	}

	/* 既存の .tap_btn.disabled を上書き、または追記 */
	.tap_btn.disabled {
		opacity: 1; /* 透明度は下げず、色味で表現 */
		background: #ccc; /* グレーに変更 */
		border-color: #999;
		box-shadow: none; /* 立体感を消す */
		cursor: not-allowed;
		transform: none !important; /* 押した時の凹みを無効化 */
	}

	.tap_btn.disabled .tap_btn_icon {
		filter: grayscale(1); /* 絵文字を白黒に */
		opacity: 0.5;
	}

	.tap_btn.disabled .tap_btn_text {
		color: #666;
	}

	/* 既にプレイ済みの時のカウントダウンエリアも調整 */
	.tap_btn.disabled + .tap_count {
		opacity: 0.5;
	}

	.tap_btn.disabled {
		background: #ccc !important;
		border-color: #999 !important;
		box-shadow: none !important;
		cursor: not-allowed;
		/* これを追加：クリックを物理的に通さない */
		pointer-events: none; 
		transform: none !important;
	}
	/* =========================================================
		Result（結果モーダル）
	========================================================= */

	/* モーダル背景 */
	.result_overlay {
		/* 初期非表示 */
		display: none;
		/* 全画面固定 */
		position: fixed;
		inset: 0;
		/* 前面表示 */
		z-index: 200;
		/* 半透明背景 */
		background: rgba(26, 5, 51, .7);
		/* 背景ぼかし */
		backdrop-filter: blur(6px);
		/* 中央配置 */
		align-items: center;
		justify-content: center;
		/* 余白 */
		padding: 24px;
	}

	/* 表示状態 */
	.result_overlay.show {
		/* flex表示 */
		display: flex;
	}

	/* 結果ボックス */
	.result_box {
		/* 背景 */
		background: #fff;
		/* 枠線 */
		border: 4px solid var(--dark);
		/* 角丸 */
		border-radius: 32px;
		/* 立体影 */
		box-shadow: 3px 3px 0 var(--dark);
		/* 内側余白 */
		padding: 1.8% 1.4% 2.5%;
		/* 横幅 */
		width: 100%;
		/* 最大幅 */
		max-width: 380px;
		/* 縦並び */
		display: flex;
		flex-direction: column;
		/* 中央寄せ */
		align-items: center;
		/* 要素間余白 */
		gap: 5px;
		/* テキスト中央 */
		text-align: center;
		/* 登場アニメ */
		animation:
			pop_in .35s cubic-bezier(.22, 1, .36, 1) forwards;
	}


	/* モーダル登場 */
	@keyframes pop_in {
		/* 開始 */
		from {
			transform:
				scale(.8)
				translateY(30px);
			opacity: 0;
		}
		/* 終了 */
		to {
			transform:
				scale(1)
				translateY(0);
			opacity: 1;
		}
	}

	/* 結果アイコン */
	.result_rank {
		/* 大サイズ */
		font-size: 52px;
		line-height: 1;
		/* バウンド */
		animation: bounce 1s ease infinite;
	}

	/* バウンド */
	@keyframes bounce {
		0%,
		100% {
			transform: translateY(0);
		}
		50% {
			transform: translateY(-10px);
		}
	}

	/* 結果タイトル */
	.result_title {
		font-family: 'Dela Gothic One', cursive;
		font-size: min(4.5vw, 20px);
		line-height: 1.2;
		letter-spacing: .15em;
		span{
			font-size: min(8vw, 37px);
		}
	}

	/* 結果メッセージ */
	.result_msg {
		font-size: 13px;
		font-weight: 700;
		color: rgba(26, 5, 51, .55);
		margin: 5% 0 0;
	}

	/* =========================================================
		クーポン表示エリア
	========================================================= */

	/* クーポン枠 */
	.coupon_area {
		width: 100%;
		margin: 3% 0 0;
		background:
			linear-gradient(
				135deg,
				#FFF8F0,
				#FFF0FA
			);
		/* 点線枠 */
		border: 3px dashed rgba(26, 5, 51, .2);
		border-radius: 18px;
		padding: 18px 16px 14px;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6px;
	}

	/* ラベル */
	.cpn_label {
		font-size: min(4.9vw, 22px);
		font-weight: 800;
		color: rgba(26, 5, 51, 1);
		/* 文字間 */
		letter-spacing: .1em;
	}

	/* クーポンコード */
	.cpn_code {
		font-family: 'Dela Gothic One', cursive;
		font-size: min(7.5vw, 40px);
		background: linear-gradient(135deg, var(--pink), var(--orange));
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		letter-spacing: .12em;
		line-height: 1.2;
	}

	/* 有効期限 */
	.cpn_expire {
		font-size: min(3.5vw, 14px);
		color: rgba(26, 5, 51, .35);
	}

	/* =========================================================
		コピーボタン
	========================================================= */

	/* コピー */
	.copy_btn {
		width: 100%;
		padding: 16px;
		margin: 5% 0 0;
		background:
			linear-gradient(
				135deg,
				var(--pink),
				var(--orange)
			);
		border: 3px solid var(--dark);
		border-radius: 999px;
		box-shadow: 2px 2px 0 var(--dark);
		color: #fff;
		font-family: 'Dela Gothic One', cursive;
		font-size: 16px;
		cursor: pointer;
		transition:
			transform .1s,
			box-shadow .1s;
		letter-spacing: .15em;
	}

	/* 押下 */
	.copy_btn:active {
		transform: translate(2px, 2px);
		box-shadow: 2px 2px 0 var(--dark);
	}

	/* リトライボタン */
	.retry_btn {
		font-size: 13px;
		font-weight: 800;
		color: rgba(26, 5, 51, .4);
		text-decoration: underline;
		cursor: pointer;
		background: none;
		border: none;
		margin: 5% 0 0;
	}
	.cpn_text {
		font-size: min(4.3vw, 19px);
		font-weight: 800;
		color: rgba(241, 68, 45, .8);
		cursor: pointer;
		background: none;
		border: none;
		margin: 5% 0 0;
	}
	/* =========================================================
		Info section（説明セクション）
	========================================================= */

	/* セクションタイトル */
	.section_title {
		font-family: 'Dela Gothic One', cursive;
		font-size: min(4.9vw, 28px);
		align-self: flex-start;
		display: flex;
		align-items: center;
		gap: 8px;
		letter-spacing: .15em;
		width:100%;
		&.top {
			margin: 5% 0 0;
		}
	}

	/* タイトル横線 */
	.section_title::after {
		content: '';
		flex: 1;
		height: 3px;
		background:
			linear-gradient(
				90deg,
				var(--pink),
				transparent
			);
		border-radius: 2px;
	}

	/* 情報カードグリッド */
	.info_chips {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 2.8em 1.1em;
		width: 100%;
	}

	/* 情報カード */
	.info_chip {
		position: relative;
		background: #fff;
		border: 2px solid var(--dark);
		border-radius: 16px;
		box-shadow: 1px 1px 0 var(--dark);
		padding: 7% 5%;
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	/* アイコン */
	.info_chip .ic {
		font-size: min(6.6vw, 40px);
		font-weight: 700;
		position: absolute;
		left: -6%;
		line-height: 1;
		top: -10%;
		background: #fff;
		border-radius: 10em;
		&.ch{
			background: none;
		}
	}

	/* タイトル */
	.info_chip .it {
		font-size: min(4.9vw, 22px);
		font-weight: 900;
		text-align: center;
	}

	/* 説明 */
	.info_chip .id {
		font-size: min(3.4vw, 18px);
		color: rgba(26, 5, 51, 1);
		line-height: 1.4;
		text-align: center;
	}

	/* =========================================================
		Prize table（景品テーブル）
	========================================================= */
	/* テーブル */
	.prize_table {
		width: 100%;
		background: #fff;
		border: 2px solid var(--dark);
		border-radius: 20px;
		/* box-shadow: 4px 4px 0 var(--dark); */
		overflow: hidden;
	}

	/* ヘッダー */
	.pt_head {
		background: var(--dark);
		color: #fff;
		font-size: min(4.3vw, 22px);
		font-weight: 800;
		padding: 10px 16px;
		letter-spacing: .06em;
	}

	/* 行 */
	.pt_row {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10px 16px;
		border-bottom: 1px solid rgba(26, 5, 51, .06);
		font-size: min(4.4vw, 18px);
	}

	/* 最終行 */
	.pt_row:last-child {
		border-bottom: none;
	}

	/* 景品名 */
	.pt_row .pname {
		display: flex;
		align-items: baseline;
		font-weight: 800;
		letter-spacing: .1em;
		span {
			font-size: min(10vw, 35px);
		}
		strong {
			font-size: min(8vw, 28px);
		}
	}

	/* ゾーン表示 */
	.pt_row .pzone {
		font-size: 11px;
		color: rgba(26, 5, 51, .4);
	}

	/* =========================================================
		フッター
	========================================================= */

	.note {
		font-size: 15px;
		color: rgba(26, 5, 51, 1);
		text-align: center;
		line-height: 1.8;
		padding: 0 10px;
	}

	/* =========================================================
		Toast（コピー通知）
	========================================================= */

	/* トースト */
	.toast {
		position: fixed;
		bottom: 28px;
		left: 50%;
		transform:
			translateX(-50%)
			translateY(16px);
		background: var(--dark);
		color: var(--yellow);
		font-size: 13px;
		font-weight: 900;
		padding: 10px 22px;
		border-radius: 999px;
		/* 初期透明 */
		opacity: 0;
		transition: all .3s;
		pointer-events: none;
		z-index: 500;
		white-space: nowrap;
	}

	/* 表示状態 */
	.toast.show {
		opacity: 1;
		transform:
			translateX(-50%)
			translateY(0);
	}

	/* =========================================================
		1日1回制限オーバーレイ
	========================================================= */
	/* オーバーレイ全体 */
	.daily_overlay {
		/* 初期非表示 */
		display: none;
		/* game_card全体を覆う */
		position: absolute;
		inset: 0;
		/* 前面表示 */
		z-index: 30;
		/* 半透明背景 */
		background: rgba(0,0,0,.5);
		/* ぼかし */
		backdrop-filter: blur(4px);
		/* 中央配置 */
		align-items: center;
		justify-content: center;
		/* 角丸継承 */
		border-radius: 1.5rem;
		/* 内側余白 */
		padding: 20px;
		text-align: center;
	}

	/* 表示状態 */
	.daily_overlay.show {
		display: flex;
	}

	/* 中身 */
	.daily_overlay_inner {
		background: #fff;
		border: 3px solid var(--dark);
		border-radius: 24px;
		padding: 10% 8%;
		/* box-shadow: 4px 4px 0 var(--dark); */
		max-width: 100%;
	}

	/* アイコン */
	.daily_overlay_icon {
		font-size: 52px;
		margin-bottom: 10px;
	}

	/* タイトル */
	.daily_overlay_title {
		font-family: 'Dela Gothic One', cursive;
		line-height: 1.4;
		font-size: min(4.4vw, 17px);
		margin-bottom: 8px;
		letter-spacing: .2em;
	}

	/* 説明 */
	.daily_overlay_text {
		font-size: 13px;
		font-weight: 700;
		color: rgba(26,5,51,.55);
		line-height: 1.6;
	}

	.result_overlay {
		opacity: 0;
		visibility: hidden;
		transition: .25s;
	}

	.result_overlay.show {
		opacity: 1;
		visibility: visible;
	}

	.limit_text {
		margin-top: 15px;
		font-size: 14px;
		font-weight: 800;
		color: #FF3E8A;
		text-align: center;
		min-height: 1.5em;
	}
}



@media screen and (max-width: 400px) {
	#pitatto {
		.result_box {
			padding: 4% 5% 5%;
			gap: 0;
		}
	}
}