@import"http://fonts.googleapis.com/earlyaccess/notosansjp.css";body,h1,h2,h3,h4,h5,h6,p,ol,ul,li,blockquote,pre,a,div{margin:0;padding:0;font-size:100%;line-height:inherit;box-sizing:border-box}body{-webkit-text-size-adjust:100%;line-height:1}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}th,td{vertical-align:top;text-align:left;font-weight:400}body{background:#f8f8f8;color:#222}body,input,select{font-family:Noto Sans JP,游ゴシック,Yu Gothic,YuGothic,ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,ＭＳ Ｐゴシック,sans-serif}.header-area{position:fixed;top:0;left:0;right:0;z-index:100;background:#ffe066;height:50px;display:flex;align-items:center;justify-content:center}.header-area h1{font-size:20px;margin:0;text-align:center}.main-area{position:fixed;top:50px;left:0;right:0;bottom:30px;display:flex}.list-area{width:160px;overflow-y:auto;padding:20px 10px 20px 20px;display:flex;gap:20px;flex-direction:column}.list-area .font-list-category{display:flex;gap:20px;flex-direction:column}.list-area .font-list-category-label{padding:5px 0 0;margin-bottom:10px;font-size:14px;color:#888}.list-area .font-list-btn{width:100%;background:transparent;color:#222;border:none;border-radius:4px;padding:5px 15px;margin-bottom:2px;cursor:pointer;transition:all .15s;text-align:left}.list-area .font-list-btn.selected{padding:10px 15px;background:#ffe066;color:#222}.list-area img{width:100%}.font-main-area{flex:1;padding:20px 1cqh 20px 10px;overflow-y:auto}.font-main-area .font-main-area-box{box-shadow:0 2px 16px #0001}.font-main-area .font-sample{position:relative;background:#fff;padding:90px 80px 60px;display:flex;flex-direction:column;gap:40px;word-break:break-all}.font-controls-area{width:260px;padding:20px 20px 20px 10px;overflow-y:auto}.font-controls-area .controls{display:flex;gap:10px;flex-direction:column}.setting-tabs{display:flex;gap:4px;margin-bottom:12px;border-bottom:5px solid #ffe066}.setting-tab-btn{background:#f8f8f8;border:1px solid #ccc;border:none;border-radius:8px 8px 0 0;padding:8px 20px;font-size:16px;color:#222;cursor:pointer;outline:none;transition:background .15s,color .15s}.setting-tab-btn.selected{background:#ffe066;color:#222;border-color:#ffe066 #ffe066 #fff #ffe066;z-index:1}.input-group-list{display:flex;flex-direction:column;gap:5px}.input-group{display:flex;align-items:center;justify-content:space-between}.input-group label{width:100px}.input-group .slider-container{width:150px}.input-group label{font-size:14px}.font-sample-setting{cursor:pointer;transition-duration:.2s}.font-sample-setting:hover{box-shadow:0 2px 5px #00000026}.font-info-area{background-color:#fff;border-radius:8px 8px 0 0}.font-info-area .inner{padding:30px;border-bottom:1px solid #eee}.font-info-area .font-names{display:flex;justify-content:space-between;align-items:center}.font-info-area .font-name{font-size:18px;margin-bottom:8px}.font-info-area .font-name b{font-weight:700;font-size:24px}.font-info-area .font-infos{display:flex;gap:10px;flex-direction:column;min-width:250px;text-align:right}.font-info-area .font-info{font-size:12px}.font-info-area .font-info-link{display:inline-block;padding:8px 0;border-bottom:1px solid #ccc;color:#222;text-align:center;text-decoration:none;transition-duration:.2s}.font-info-area .font-info-link:hover{background-color:#f8f8f8}.font-copy-btns{position:absolute;top:30px;right:30px}.font-copy-btn{background:#ffe066;color:#222;font-weight:700;font-size:14px;padding:8px 16px;border:none;border-radius:6px;text-transform:none}.font-embed-area{background-color:#444;color:#fff;padding:30px;font-size:14px;line-height:1.5}.font-embed-area label{display:block;font-size:16px;margin-bottom:10px}.app-footer{position:absolute;left:0;right:0;bottom:0;height:30px;font-size:12px;text-align:center;border-top:1px solid #e0e0e0;display:flex;align-items:center;justify-content:center;gap:10px}.app-footer small{color:#888;font-size:12px}.app-footer a{color:#888;text-decoration:underline;margin-left:8px}.sns-btn{display:block;position:absolute;top:10px;right:20px;display:flex;align-items:center;font-size:15px;text-decoration:none;color:#222;cursor:pointer;transition-duration:.2s}.sns-btn:hover{opacity:.8}
