/* ============================================= tool-core.css - kigencheck.jp ツール共通スタイル tool/index.php の で読み込む ============================================= */ /* -------------------------------------------- CSS変数 -------------------------------------------- */ :root { --kc-pink: #f78da7; --kc-pink-light: #fff0f4; --kc-pink-mid: #fcd5de; --kc-pink-dark: #d95f80; --kc-ok: #6bc46a; --kc-ok-light: #f0faf0; --kc-warn: #f0a500; --kc-warn-light: #fffbf0; --kc-ng: #e05252; --kc-ng-light: #fff5f5; --kc-gray: #555; --kc-gray-light: #f5f5f5; --kc-radius: 14px; --kc-shadow: 0 4px 16px rgba(0,0,0,0.08); } /* -------------------------------------------- ツールヘッダー -------------------------------------------- */ .kc-tool-header { background: linear-gradient(135deg, #2c1a0e, #3d2512); border-radius: 12px 12px 0 0; padding: 6px 20px; margin-bottom: 0; display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .kc-tool-label { color: #f5c842; font-size: 0.72rem; font-weight: 700; letter-spacing: .12em; flex-shrink: 0; } .kc-tool-title { color: #fff; font-size: 1rem; font-weight: 700; margin: 0; line-height: 1.4; } /* -------------------------------------------- モード選択 -------------------------------------------- */ .kc-mode-lead { font-size: 0.92rem; color: var(--kc-gray); margin: 0 0 14px; text-align: center; } .kc-mode-btns { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; } .kc-mode-btn { width: 100%; padding: 13px 16px; border-radius: var(--kc-radius); border: 2px solid var(--kc-pink-mid); background: #fff; color: var(--kc-gray); font-size: 0.9rem; cursor: pointer; text-align: left; transition: all 0.2s; line-height: 1.5; } .kc-mode-btn:hover { border-color: var(--kc-pink); background: var(--kc-pink-light); } .kc-mode-btn.active { border-color: var(--kc-pink); background: var(--kc-pink-light); color: var(--kc-pink-dark); font-weight: 700; } /* -------------------------------------------- セクションリード -------------------------------------------- */ .kc-section-lead { font-size: 0.88rem; color: var(--kc-gray); margin: 16px 0 8px; font-weight: 600; } /* -------------------------------------------- セレクトボックス -------------------------------------------- */ .kc-select { width: 100%; padding: 12px 14px; border-radius: var(--kc-radius); border: 1.5px solid var(--kc-pink-mid); background: #fff; font-size: 0.9rem; color: #333; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23f78da7' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; margin-bottom: 4px; transition: border-color 0.2s; } .kc-select:focus { outline: none; border-color: var(--kc-pink); box-shadow: 0 0 0 3px rgba(247,141,167,0.15); } /* -------------------------------------------- 日付入力 -------------------------------------------- */ .kc-date-input { width: 100%; padding: 12px 14px; border-radius: var(--kc-radius); border: 1.5px solid var(--kc-pink-mid); background: #fff; font-size: 0.9rem; color: #333; margin-bottom: 4px; transition: border-color 0.2s; } .kc-date-input:focus { outline: none; border-color: var(--kc-pink); box-shadow: 0 0 0 3px rgba(247,141,167,0.15); } /* -------------------------------------------- 計算ボタン -------------------------------------------- */ .kc-calc-btn { width: 100%; padding: 14px; margin-top: 12px; border-radius: var(--kc-radius); border: none; background: linear-gradient(135deg, var(--kc-pink), var(--kc-pink-dark)); color: #fff; font-size: 1rem; font-weight: 700; cursor: pointer; letter-spacing: 0.04em; transition: all 0.2s; box-shadow: 0 3px 10px rgba(247,141,167,0.35); } .kc-calc-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(247,141,167,0.45); } .kc-calc-btn:active { transform: translateY(0); } /* -------------------------------------------- 結果エリア - 共通 -------------------------------------------- */ .kc-conclusion { margin-top: 20px; padding: 20px; border-radius: var(--kc-radius); border: 2px solid transparent; } .kc-conclusion.ok { background: var(--kc-ok-light); border-color: var(--kc-ok); } .kc-conclusion.warn { background: var(--kc-warn-light); border-color: var(--kc-warn); } .kc-conclusion.ng { background: var(--kc-ng-light); border-color: var(--kc-ng); } .kc-status-label { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; } .kc-limit-date { font-size: 0.95rem; color: var(--kc-gray); margin-bottom: 4px; } .kc-limit-date strong { color: #333; font-size: 1.05rem; } .kc-days-left { font-size: 0.9rem; color: var(--kc-gray); } .kc-days-left strong { font-size: 1.1rem; color: #333; } /* -------------------------------------------- プログレスバー -------------------------------------------- */ .kc-progress-wrap { width: 100%; height: 10px; background: #e8e8e8; border-radius: 999px; overflow: hidden; margin-top: 14px; } .kc-progress-bar { height: 100%; border-radius: 999px; transition: width 0.6s ease; } .kc-progress-label { font-size: 0.78rem; color: #888; margin-top: 4px; text-align: right; } /* -------------------------------------------- キャラクター会話 -------------------------------------------- */ .character-conversation { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; padding: 16px; border-radius: var(--kc-radius); background: #fff; box-shadow: var(--kc-shadow); } .character-conversation img { width: 72px; height: 72px; object-fit: contain; flex-shrink: 0; border-radius: 50%; } .kc-bubble { flex: 1; font-size: 0.9rem; line-height: 1.65; color: #333; padding: 10px 14px; background: var(--kc-gray-light); border-radius: 0 12px 12px 12px; position: relative; } .kc-bubble::before { content: ''; position: absolute; left: -10px; top: 12px; border: 5px solid transparent; border-right-color: var(--kc-gray-light); } .character-conversation.kc-ok .kc-bubble { background: var(--kc-ok-light); } .character-conversation.kc-ok .kc-bubble::before { border-right-color: var(--kc-ok-light); } .character-conversation.kc-warn .kc-bubble { background: var(--kc-warn-light); } .character-conversation.kc-warn .kc-bubble::before { border-right-color: var(--kc-warn-light); } .character-conversation.kc-ng .kc-bubble { background: var(--kc-ng-light); } .character-conversation.kc-ng .kc-bubble::before { border-right-color: var(--kc-ng-light); } /* -------------------------------------------- Googleカレンダーボタン -------------------------------------------- */ .kc-gcal-btn { display: block; width: 100%; margin-top: 14px; padding: 13px; border-radius: var(--kc-radius); background: #4285f4; color: #fff; font-size: 0.92rem; font-weight: 700; text-align: center; text-decoration: none; transition: all 0.2s; box-shadow: 0 3px 10px rgba(66,133,244,0.3); } .kc-gcal-btn:hover { background: #2a75f3; transform: translateY(-1px); box-shadow: 0 5px 14px rgba(66,133,244,0.4); } /* -------------------------------------------- ローディング -------------------------------------------- */ .kc-loading { text-align: center; padding: 40px 20px; color: var(--kc-pink); font-size: 1rem; animation: kcPulse 1.2s ease-in-out infinite; } @keyframes kcPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* -------------------------------------------- レスポンシブ -------------------------------------------- */ @media (max-width: 480px) { .kc-tool-title { font-size: 0.88rem; } .kc-mode-btn { font-size: 0.85rem; padding: 11px 12px; } .kc-calc-btn { font-size: 0.92rem; padding: 13px; } .character-conversation img { width: 56px; height: 56px; } .kc-bubble { font-size: 0.85rem; } .kc-gcal-btn { font-size: 0.85rem; padding: 12px; } .kc-conclusion { padding: 16px; } }