.japanese-text{font-family:Hiragino Kaku Gothic Pro,Yu Gothic,Meiryo,MS PGothic,sans-serif}.layout-container{display:grid;grid-template-columns:1fr;gap:.5rem;max-width:100%}.left-column{width:100%;max-width:100%}@media(min-width:1024px){.layout-container{grid-template-columns:1fr 320px;gap:0}}html{scroll-behavior:smooth;scroll-padding-top:2rem}.kana-display-block{background:linear-gradient(135deg,#fff,#fffbeb);border-radius:1rem;border:1px solid #FDE68A;box-shadow:0 4px 6px -1px #f59e0b1a,0 2px 4px -1px #f59e0b0f;overflow:hidden;transition:all .3s ease}.kana-display-block:hover{box-shadow:0 10px 15px -3px #f59e0b26,0 4px 6px -2px #f59e0b1a;border-color:#fbbf24}.kana-display-area{background:linear-gradient(to bottom,#fffbeb,#fff);padding:1rem;text-align:center;position:relative}@media(min-width:1024px){.kana-display-area{padding:0}}.kana-character{color:#111827;text-shadow:2px 2px 4px rgba(245,158,11,.1);transition:all .3s ease}.kana-display-area:hover .kana-character{transform:scale(1.05);text-shadow:3px 3px 6px rgba(245,158,11,.2)}.kana-header-image{width:100%;max-width:300px;height:auto;margin:0 auto;display:block;padding:2rem 1rem;transition:all .3s ease}.kana-display-area:hover .kana-header-image{transform:scale(1.05)}@media(max-width:639px){.kana-header-image{max-width:200px;padding:1rem}}.kana-copy-area{padding:.5rem 1.5rem 1.5rem;background:#fff}.copy-buttons-container{display:flex;flex-direction:row;gap:.5rem}@media(min-width:1024px){.copy-buttons-container{flex-direction:column;gap:.75rem}}.copy-kana-btn{width:100%;padding:.875rem 1.25rem;border-radius:.75rem;font-size:.875rem;font-weight:600;background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 4px #f59e0b33;position:relative;overflow:hidden}.copy-kana-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s ease}.copy-kana-btn:hover{transform:translateY(-2px);box-shadow:0 6px 12px #f59e0b4d;background:linear-gradient(135deg,#d97706,#f59e0b)}.copy-kana-btn:hover:before{left:100%}.copy-kana-btn:active{transform:translateY(0);box-shadow:0 2px 4px #f59e0b33}.sound-btn{width:100%;padding:.75rem 1rem;border-radius:.5rem;font-size:.75rem;font-weight:500;background-color:#f9fafb;color:#6b7280;border:1px solid #E5E7EB;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.375rem;transition:all .2s ease}.sound-btn:hover{background-color:#f3f4f6;color:#374151}.sound-btn:active{transform:scale(.98)}.example-item{position:relative}.example-item .flex{box-shadow:0 1px 3px #0000000d}.example-item:hover .flex{background:linear-gradient(to right,#fef3c7,#fffbeb);border-color:#fbbf24;box-shadow:0 4px 12px #f59e0b26;transform:translate(4px)}.example-number{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f59e0b,#fbbf24);box-shadow:0 2px 8px #f59e0b40;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.example-number:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.3) 0%,transparent 70%);opacity:0;transition:opacity .3s ease}.example-item:hover .example-number{transform:scale(1.1) rotate(5deg);box-shadow:0 4px 12px #f59e0b66}.example-item:hover .example-number:before{opacity:1}.example-number-inner{font-size:1.125rem;font-weight:700;color:#fff;position:relative;z-index:1}.example-sound-btn{background:none;border:none;cursor:pointer;padding:.25rem;border-radius:.375rem;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center}.example-sound-btn:hover{background-color:#fef3c7}.example-sound-btn .sound-icon{width:20px;height:20px;color:#f59e0b;transition:all .3s ease}.example-sound-btn:hover .sound-icon{transform:scale(1.15)}.info-label{color:#fbbf24!important}.stroke-step-btn{padding:.375rem .625rem;font-size:.6875rem;font-weight:600;color:#78350f;background-color:#fef3c7;border:2px solid #FDE68A;border-radius:.5rem;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);white-space:nowrap}@media(min-width:640px){.stroke-step-btn{padding:.5rem 1rem;font-size:.75rem}}@media(min-width:768px){.stroke-step-btn{font-size:.875rem}}.stroke-step-btn:hover{background-color:#fde68a;border-color:#fbbf24;transform:translateY(-1px);box-shadow:0 2px 8px #f59e0b33}.stroke-step-btn:active{transform:translateY(0) scale(.98)}.stroke-step-btn.active{background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#fff;border-color:#f59e0b;box-shadow:0 4px 12px #f59e0b4d}.stroke-step-btn.active:hover{background:linear-gradient(135deg,#d97706,#f59e0b);transform:translateY(-1px)}.kana-link-item{display:flex;align-items:center;justify-content:center;padding:.75rem;border-radius:.5rem;border:2px solid #E5E7EB;background-color:#fff;font-size:1.5rem;transition:all .2s ease;text-decoration:none;color:#374151;position:relative}.kana-link-item:hover{background:linear-gradient(135deg,#fef3c7,#fffbeb);border-color:#fde68a;transform:translateY(-2px);box-shadow:0 4px 8px #f59e0b26}.kana-link-item.active{background:linear-gradient(135deg,#f59e0b,#fbbf24);border-color:#f59e0b;color:#fff;box-shadow:0 4px 12px #f59e0b4d}.kana-link-item.active:hover{background:linear-gradient(135deg,#d97706,#f59e0b);transform:translateY(-2px)}.kana-table-container{display:flex;flex-direction:column;gap:2rem}@media(min-width:1024px){.kana-table-container{display:grid;grid-template-columns:1fr 1fr;gap:2rem}}.kana-column{display:flex;flex-direction:column;gap:1rem}.kana-column-title{font-size:1.125rem;font-weight:600;color:#111827;padding-bottom:.5rem;border-bottom:2px solid #FDE68A}@media(max-width:639px){.basic-info-section{padding:1rem!important}.basic-info-title{margin-bottom:.75rem!important;font-size:1.125rem!important}.basic-info-grid{gap:.5rem!important}.info-item{padding:.5rem!important;gap:.375rem!important}.kana-display-area{padding:.75rem!important}.kana-copy-area{padding:.5rem 1rem 1rem!important}.copy-buttons-container{gap:.375rem!important}.copy-kana-btn{padding:.625rem .875rem!important;font-size:.8125rem!important}.sound-btn{padding:.5rem .75rem!important}#examples{padding:.75rem!important}#examples h2{margin-bottom:.625rem!important;font-size:1.125rem!important}#stroke-order{padding:.75rem!important}#stroke-order h2{margin-bottom:.625rem!important;font-size:1.125rem!important}#related-kana{padding:.75rem!important}#related-kana h2{margin-bottom:.625rem!important;font-size:1.125rem!important}.kana-link-item{padding:.5rem;font-size:1.25rem}.kana-column-title{font-size:1rem}}