/* キャッチフレーズ（subtitle）の色だけをピンポイント爆撃！ */
         .subtitle {
         color: #1976d2 !important;
         /* ここで好きな色に変えるゾ！ */
         font-weight: bold !important;
         text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
         /* 文字を読みやすくする魔法だゾ */
         }
         body {
         margin: 0;
         padding: 0px;
         /* body または 背景を指定している div に */
         background: linear-gradient(180deg, #183DB2 0%, #1386D7 100%) fixed;
         min-height: 100vh;
         font-family: sans-serif;
         }
         .box {
         background: rgba(255, 255, 255, 0.5);
         /* ←ここを0.1にするともっと透けるゾ */
         padding: 50px;
         border-radius: 20px;
         text-align: center;
         }
         /* 2. #app も透明にする（念のためこれだけ残すと安心） */
         #app {
         background: transparent !important;
         }
         /* 3. container で幅を絞りつつ、透明にする（監督の最新案！） */
         .container {
         max-width: 750px !important;
         margin: 0 auto !important;
         /* min-height: 100vh;  ← これをコメントアウトか削除！ */
         display: block;
         /* ← flex から block に変えて、自然な並びにするゾ */
         padding: 16px;
         /* ← 24から16へ、左右の余白をスマホ用にダイエット */
         background: transparent !important;
         }
         /* 4. ボタンの並び方の設定（個性派バージョン！） */
         .grid {
         display: grid;
         grid-template-columns: 1fr;
         /* スマホは1列 */
         gap: 15px;
         margin-bottom: 20px;
         }
         @media (min-width: 600px) {
         .grid {
         grid-template-columns: 1fr 1fr 1fr;
         /* PCは3列 */
         }
         }
         /* ボタン共通の土台：ここを「card-btn」という名前にします */
         .card-btn {
         padding: 20px 10px;
         border-radius: 20px;
         border: 1px solid #ccc;
         cursor: pointer;
         transition: transform 0.2s, box-shadow 0.2s;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         text-decoration: none;
         }
         /* 押した時にちょっと沈む演出 */
         .card-btn:active {
         transform: scale(0.95);
         }
         .btn-word {
         background: #12B4E2 !important;
         border: 2px solid #58DFFF !important;
         color: #ffffff !important;
         font-weight: 900 !important;
         font-size: 1.5rem !important;
         text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
         }
         .btn-gram {
         background: #13C59C !important;
         border: 2px solid #45FFD2 !important;
         color: #ffffff !important;
         font-weight: 900 !important;
         font-size: 1.5rem !important;
         text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
         }
         .btn-panic {
         background: #F0A50F !important;
         border: 2px solid #FFD172 !important;
         color: #ffffff !important;
         font-weight: 900 !important;
         font-size: 1.5rem !important;
         text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
         }
         /* 既存の .btn-panic の下あたりに追加 */
         .btn-random {
         background: #f59e0b !important;
         /* オレンジ色 */
         border: 2px solid #ffcc00 !important;
         color: #ffffff !important;
         font-weight: 900 !important;
         font-size: 1.5rem !important;
         }
         /* しんちゃん語録の吹き出し風デザイン */
         .panic-comment {
         background-color: rgba(255, 255, 255, 0.8);
         border-left: 5px solid #ffcc00;
         padding: 10px;
         margin-top: 15px;
         border-radius: 5px;
         color: #324851;
         font-size: 0.9rem;
         line-height: 1.4;
         }
         .header {
         text-align: center;
         margin-bottom: 32px;
         }
         .title {
         font-weight: bold;
         margin-bottom: 8px;
         }
         .subtitle {
         animation: pulse 2s infinite;
         }
         @keyframes pulse {
         0%,
         100% {
         opacity: 1;
         }
         50% {
         opacity: 0.7;
         }
         }
         .content {
         flex: 1;
         max-width: 1280px;
         margin: 0 auto;
         width: 100%;
         }
         .grid {
         display: grid;
         grid-template-columns: 1fr;
         gap: 24px;
         margin-bottom: 32px;
         }
         @media (min-width: 768px) {
         .grid {
         grid-template-columns: repeat(2, 1fr);
         }
         }
         .card {
         /* ↓ 32pxから16pxに。これで上下の厚みが半分になります！ */
         padding: 16px;
         border-radius: 16px;
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
         transition: all 0.3s ease;
         cursor: pointer;
         border: 3px solid;
         /* ↓ もしこれでも長ければ、これを追加してみてください */
         display: flex;
         flex-direction: column;
         justify-content: center;
         }
         .card:hover {
         transform: translateY(-4px);
         box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
         }
         .card-icon {
         /* ↓ 60pxから45pxに。これで縦のスペースを節約！ */
         font-size: 45px;
         /* ↓ アイコン下の隙間も16pxから8pxに */
         margin-bottom: 8px;
         }
         .card-title {
         color: #324851;
         font-weight: 800;
         /* ↓ タイトルの下の隙間も12pxから4pxに */
         margin-bottom: 4px;
         font-size: 1.4rem;
         /* 文字を少し小さくするとさらにスリムに */
         }
         .card-text {
         /* ↓ テキスト下の隙間も8pxから0pxに */
         margin-bottom: 0px;
         opacity: 0.7;
         font-size: 0.9rem;
         /* 補足説明も少しダイエット */
         }
         .badge {
         display: inline-block;
         padding: 8px 12px;
         border-radius: 20px;
         color: white;
         margin-top: 8px;
         }
         .stats-container {
         padding: 32px;
         border-radius: 16px;
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
         margin-bottom: 24px;
         }
         .stats-title {
         font-weight: bold;
         margin-bottom: 24px;
         display: flex;
         align-items: center;
         gap: 8px;
         }
         .star-icon {
         display: inline-block;
         animation: twinkle 1.5s ease-in-out infinite;
         }
         @keyframes twinkle {
         0%,
         100% {
         transform: scale(1);
         }
         50% {
         transform: scale(1.2);
         }
         }
         .stat-item {
         margin-bottom: 24px;
         }
         .stat-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-bottom: 8px;
         }
         .stat-label {
         font-weight: 600;
         }
         .stat-value {
         font-weight: bold;
         }
         .progress-bar {
         width: 100%;
         height: 16px;
         border-radius: 8px;
         }
         .total-stats {
         margin-top: 24px;
         padding: 16px;
         border-radius: 12px;
         text-align: center;
         }
         .total-text {
         font-weight: bold;
         }
         .top-bar {
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-bottom: 16px;
         flex-wrap: wrap;
         gap: 12px;
         }
         .btn {
         padding: 12px 24px;
         border-radius: 12px;
         font-weight: bold;
         border: none;
         cursor: pointer;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
         transition: all 0.3s ease;
         color: white;
         }
         .btn:hover {
         transform: translateY(-2px);
         box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
         }
         .filter-buttons {
         display: flex;
         gap: 8px;
         flex-wrap: wrap;
         }
         .filter-btn {
         padding: 6px 10px;
         /* ← 左右を16から10へ、上下を8から6へ！ */
         border-radius: 8px;
         font-weight: 600;
         font-size: 14px;
         /* ← 文字サイズを少しだけ小さく指定するゾ */
         border: 2px solid;
         cursor: pointer;
         transition: all 0.2s ease;
         white-space: nowrap;
         /* ← これを入れると、ボタンの中で文字が勝手に改行されないゾ！ */
         }
         .level-badge {
         display: inline-block;
         padding: 8px 16px;
         border-radius: 20px;
         color: #000;
         font-weight: bold;
         }
         .progress-text {
         margin-top: 8px;
         opacity: 0.7;
         }
         .word-card {
         width: 100%;
         padding: 24px;
         border-radius: 24px;
         box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
         margin-bottom: 24px;
         min-height: 300px;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         cursor: pointer;
         transition: all 0.3s ease;
         border: 4px solid;
         }
         .word-card:hover {
         transform: translateY(-4px);
         box-shadow: 0 24px 70px rgba(0, 0, 0, 0.2);
         }
         .word-emoji {
         font-size: 48px;
         /* ← 56から48へ少し小さく */
         margin-bottom: 8px;
         /* ← 16から8へ、下の隙間を半分に！ */
         animation: bounce 1s ease-in-out infinite;
         }
         @keyframes bounce {
         0%,
         100% {
         transform: translateY(0);
         }
         50% {
         transform: translateY(-10px);
         }
         }
         .word-label {
         font-weight: bold;
         opacity: 0.7;
         margin-bottom: 4px;
         }
         .word-main {
         font-weight: bold;
         margin-bottom: 4px;
         /* ← 16から4へ！一気に詰めちゃうゾ */
         }
         .word-pronunciation {
         font-style: italic;
         margin-bottom: 8px;
         }
         .tap-hint {
         margin-top: 24px;
         animation: pulse 2s infinite;
         font-weight: bold;
         }
         .answer-box {
         padding: 12px;
         border-radius: 12px;
         margin-bottom: 8px;
         }
         .answer-text {
         font-weight: bold;
         margin-bottom: 4px;
         }
         .answer-detail {
         font-style: italic;
         }
         .navigation {
         display: flex;
         gap: 16px;
         width: 100%;
         }
         .nav-btn-prev {
         padding: 16px 32px;
         border-radius: 12px;
         font-weight: bold;
         border: 3px solid;
         cursor: pointer;
         transition: all 0.3s ease;
         }
         .nav-btn-next {
         flex: 1;
         padding: 16px 32px;
         border-radius: 12px;
         font-weight: bold;
         border: none;
         cursor: pointer;
         color: black;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
         transition: all 0.3s ease;
         }
         .nav-btn-prev:hover,
         .nav-btn-next:hover {
         transform: translateY(-2px);
         }
         .question-card {
         width: 100%;
         padding: 32px;
         border-radius: 24px;
         box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
         margin-bottom: 24px;
         border: 4px solid;
         }
         .question-icon {
         text-align: center;
         font-size: 48px;
         margin-bottom: 8px;
         }
         .question-text {
         font-weight: bold;
         text-align: center;
         margin-bottom: 24px;
         }
         .options {
         display: flex;
         flex-direction: column;
         gap: 5px;
         }
         .option-btn {
         width: 100%;
         padding: 16px;
         border-radius: 12px;
         text-align: left;
         transition: all 0.3s ease;
         font-weight: 600;
         border: 3px solid;
         cursor: pointer;
         }
         .option-btn:hover {
         transform: translateY(-2px);
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
         }
         /* 解説ボックスの改善（監督との「城」を完全キープ！） */
         .explanation-box {
         background: #ffffff !important;
         /* 混じりっけなしの白！ */
         background-image: none !important;
         /* 紫のグラデを粉砕！ */
         border: 3px solid #f59e0b !important;
         /* 監督こだわりの枠線 */
         border-radius: 16px !important;
         padding: 15px !important;
         margin-top: 15px !important;
         box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
         display: block !important;
         opacity: 1 !important;
         /* 透けるのを禁止！ */
         }
         .explanation-title {
         font-size: 22px !important;
         color: #d97706 !important;
         /* 濃いオレンジでハッキリ */
         font-weight: 800 !important;
         margin-bottom: 8px !important;
         display: block !important;
         }
         .explanation-text {
         font-size: 16px !important;
         color: #000000 !important;
         /* 文字はクッキリ「漆黒」 */
         line-height: 1.6 !important;
         font-weight: bold !important;
         }
         .next-question-btn {
         width: 100%;
         padding: 16px 32px;
         border-radius: 12px;
         font-weight: bold;
         border: none;
         color: white;
         cursor: pointer;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
         transition: all 0.3s ease;
         }
         .next-question-btn:hover {
         transform: translateY(-2px);
         }
         .center-content {
         flex: 1;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         max-width: 900px;
         margin: 0 auto;
         width: 100%;
         }
      </style>
      <style>
         @view-transition {
         navigation: auto;
         }
         /* スタンプがポンッと出るアニメーション */
         @keyframes stamp-pop {
         0% {
         transform: translate(-50%, -50%) scale(0);
         opacity: 0;
         }
         50% {
         transform: translate(-50%, -50%) scale(1.5);
         opacity: 1;
         }
         100% {
         transform: translate(-50%, -50%) scale(1);
         opacity: 1;
         }
         }
         .stamp-mark {
         position: fixed;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         font-size: 150px;
         /* ドカンと大きく！ */
         z-index: 10000;
         pointer-events: none;
         animation: stamp-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
         }