/* === reset.css === */ /* ========================================================================== reset.css — 真のリセットのみ。スコープなし（グローバル） モダンブラウザ前提。各セクション固有の見た目はセクションCSSで定義する。 ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, figure, blockquote, dl, dd, pre { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { min-height: 100vh; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ol, ul { list-style: none; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } /* === variables.css === */ /* ========================================================================== variables.css — CSS変数（色・フォント）最小限。スコープなし（グローバル） 各セクションは原則これらを参照すれば統一感が出る。 セクション固有のカラーが必要な場合はセクションCSS内で個別定義してよい。 ========================================================================== */ :root { /* === ブランドカラー === */ --kr-blue: #4A7FE5; --kr-blue-deep: #3360C4; --kr-blue-light: #E8EFFC; --kr-purple: #8B7CF6; --kr-purple-light: #F0EDFE; /* === ニュートラル === */ --kr-bg: #FFFFFF; --kr-bg-soft: #F7F8FB; --kr-text: #1A1F2E; --kr-text-sub: #5A6276; --kr-text-mute: #8B92A5; --kr-border: #E5E8EF; --kr-border-soft: #EFF1F6; /* === アクセント === */ --kr-accent: #F08C3A; --kr-line-green: #06C755; /* === グラデーション === */ --kr-grad-hero: linear-gradient(180deg, #F4F0FE 0%, #E8EFFC 100%); /* === シャドウ === */ --kr-shadow-sm: 0 2px 8px rgba(20, 30, 60, 0.06); --kr-shadow-md: 0 8px 24px rgba(20, 30, 60, 0.08); --kr-shadow-lg: 0 16px 48px rgba(20, 30, 60, 0.12); /* === フォント === --kr-font-body / --kr-font-accent はビルド時に へ inline 注入される。 切替は config.json の "site.fontTheme" + src/data/font-themes.js を参照。 ここに直書きしないこと（ビルド注入と二重定義になり予期せぬ上書きが起こる）。 */ /* === レイアウト === */ --kr-container: 1200px; --kr-radius-sm: 8px; --kr-radius-md: 14px; --kr-radius-lg: 22px; --kr-radius-pill: 999px; } body { font-family: var(--kr-font-body); color: var(--kr-text); background: var(--kr-bg); } /* === sections\_partials\header\default.css === */ /* ========================================================================== sections/header/default.css #kr-header で完全スコープ。他セクションと衝突しない。 ========================================================================== */ #kr-header { position: sticky; top: 0; left: 0; right: 0; z-index: 100; background: rgba(255, 255, 255, 0.85); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid transparent; transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } #kr-header.kr-header--scrolled { background: rgba(255, 255, 255, 0.95); border-bottom-color: var(--kr-border-soft); box-shadow: var(--kr-shadow-sm); } #kr-header .header-inner { display: flex; align-items: center; gap: 28px; max-width: var(--kr-container); margin: 0 auto; padding: 14px 24px; } /* === Logo === */ #kr-header .header-logo { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; font-family: var(--kr-font-body); font-weight: 700; font-size: 18px; color: var(--kr-text); letter-spacing: 0.02em; } #kr-header .logo-mark { display: inline-flex; } #kr-header .logo-text { line-height: 1; } /* === Nav === */ #kr-header .header-nav { flex: 1; display: flex; justify-content: center; } #kr-header .nav-list { display: flex; align-items: center; gap: 28px; } #kr-header .nav-link { font-size: 14px; font-weight: 500; color: var(--kr-text-sub); transition: color 0.15s ease; padding: 6px 0; position: relative; } #kr-header .nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--kr-blue); border-radius: 2px; transform: scaleX(0); transform-origin: center; transition: transform 0.2s ease; } #kr-header .nav-link:hover { color: var(--kr-text); } #kr-header .nav-link:hover::after { transform: scaleX(1); } /* === ドロップダウン（PC） === */ #kr-header .nav-item { position: relative; } #kr-header .nav-link--toggle { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: none; cursor: pointer; font: inherit; color: inherit; } #kr-header .nav-link-arrow { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.2s ease; margin-left: 2px; } #kr-header .nav-link--toggle[aria-expanded="true"] .nav-link-arrow { transform: rotate(-135deg) translate(-2px, -2px); } #kr-header .nav-sub-list { position: absolute; top: 100%; left: 50%; /* padding-top でボタンとの間に「見た目の隙間」を確保しつつ、ホバー領域は連続させる （margin だとホバー判定が途切れるため使わない） */ padding: 14px 0 8px; transform: translateX(-50%) translateY(-4px); min-width: 168px; background: transparent; border: none; list-style: none; margin: 0; opacity: 0; pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; z-index: 110; } /* 実際の白いカード見た目は内側 ul ではなく ::before で描画 */ #kr-header .nav-sub-list::before { content: ""; position: absolute; top: 8px; left: 0; right: 0; bottom: 0; background: #fff; border: 1px solid var(--kr-border-soft); border-radius: var(--kr-radius-md); box-shadow: var(--kr-shadow-md); z-index: -1; } #kr-header .nav-sub-list > li { position: relative; } /* 親 li にホバー、または toggle ボタンがフォーカス、aria-expanded=true で開く */ #kr-header .nav-item--has-children:hover .nav-sub-list, #kr-header .nav-item--has-children:focus-within .nav-sub-list, #kr-header .nav-link--toggle[aria-expanded="true"] + .nav-sub-list { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } #kr-header .nav-item--has-children:hover .nav-link--toggle .nav-link-arrow, #kr-header .nav-item--has-children:focus-within .nav-link--toggle .nav-link-arrow { transform: rotate(-135deg) translate(-2px, -2px); } #kr-header .nav-sub-link { display: block; padding: 10px 18px; font-size: 14px; font-weight: 500; color: var(--kr-text); white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; } #kr-header .nav-sub-link:hover { background: var(--kr-bg-soft); color: var(--kr-blue); } /* === Actions === */ #kr-header .header-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } #kr-header .action-login { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--kr-text-sub); transition: color 0.15s ease; } #kr-header .action-login::before { content: ""; width: 16px; height: 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%235A6276' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='5' r='3'/%3E%3Cpath d='M2 14c0-3.3 2.7-6 6-6s6 2.7 6 6'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; } #kr-header .action-login:hover { color: var(--kr-text); } #kr-header .action-cta { display: inline-flex; align-items: center; justify-content: center; padding: 10px 22px; font-size: 14px; font-weight: 700; color: #fff; background: var(--kr-blue); border-radius: var(--kr-radius-pill); transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; box-shadow: 0 4px 14px rgba(74, 127, 229, 0.32); white-space: nowrap; } #kr-header .action-cta:hover { background: var(--kr-blue-deep); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(74, 127, 229, 0.42); } /* === Hamburger（モバイル用、PCでは非表示） === */ #kr-header .header-burger { display: none; width: 40px; height: 40px; position: relative; flex-shrink: 0; } #kr-header .burger-bar { position: absolute; left: 8px; right: 8px; height: 2px; background: var(--kr-text); border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease; } #kr-header .burger-bar:nth-child(1) { top: 13px; } #kr-header .burger-bar:nth-child(2) { top: 19px; } #kr-header .burger-bar:nth-child(3) { top: 25px; } #kr-header .header-burger[aria-expanded="true"] .burger-bar:nth-child(1) { top: 19px; transform: rotate(45deg); } #kr-header .header-burger[aria-expanded="true"] .burger-bar:nth-child(2) { opacity: 0; } #kr-header .header-burger[aria-expanded="true"] .burger-bar:nth-child(3) { top: 19px; transform: rotate(-45deg); } /* === Mobile menu（PCでは非表示） === */ #kr-header .header-menu { display: none; } /* ========================================================================== レスポンシブ ========================================================================== */ /* タブレット以下: ナビをハンバーガーに格納 */ @media (max-width: 900px) { #kr-header .header-inner { gap: 12px; padding: 12px 16px; } #kr-header .header-nav, #kr-header .header-actions { display: none; } #kr-header .header-burger { display: block; margin-left: auto; } #kr-header .header-menu { display: block; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--kr-border-soft); box-shadow: var(--kr-shadow-md); padding: 16px 16px 24px; transform-origin: top; animation: kr-menu-in 0.18s ease both; } #kr-header .header-menu[hidden] { display: none; } #kr-header .menu-list { display: flex; flex-direction: column; } #kr-header .menu-link { display: block; padding: 14px 8px; font-size: 16px; font-weight: 500; color: var(--kr-text); border-bottom: 1px solid var(--kr-border-soft); } #kr-header .menu-link:active { background: var(--kr-bg-soft); } /* ドロップダウン親（モバイルでは見出し + サブメニューをインデント） */ #kr-header .menu-group { border-bottom: 1px solid var(--kr-border-soft); } #kr-header .menu-group-label { padding: 14px 8px 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--kr-text-sub); text-transform: uppercase; } #kr-header .menu-sub-list { padding: 0 0 4px; } #kr-header .menu-link--sub { padding: 10px 8px 10px 24px; border-bottom: none; } #kr-header .menu-link--sub::before { content: "└ "; color: var(--kr-text-sub); margin-right: 2px; } #kr-header .menu-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; } #kr-header .menu-login { display: block; text-align: center; padding: 12px; font-size: 14px; font-weight: 500; color: var(--kr-text-sub); border: 1px solid var(--kr-border); border-radius: var(--kr-radius-md); } #kr-header .menu-cta { display: block; text-align: center; padding: 14px; font-size: 15px; font-weight: 700; color: #fff; background: var(--kr-blue); border-radius: var(--kr-radius-pill); box-shadow: 0 4px 14px rgba(74, 127, 229, 0.32); } @keyframes kr-menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } } /* スマホ: ロゴサイズ調整 */ @media (max-width: 480px) { #kr-header .logo-text { font-size: 16px; } } /* === sections\_partials\footer\default.css === */ /* ========================================================================== sections/footer/default.css #kr-footer で完全スコープ。他セクションと衝突しない。 構成: 上部（ブランド + 3列ナビ）+ 下部（SNS + 統計 + コピーライト） ========================================================================== */ #kr-footer { background: #1A1F2E; color: rgba(255, 255, 255, 0.78); padding: 56px 24px 32px; } #kr-footer .footer-inner { max-width: var(--kr-container); margin: 0 auto; } /* === 上部 === */ #kr-footer .footer-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: 48px; padding-bottom: 32px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } /* === ブランド === */ #kr-footer .footer-brand { display: flex; flex-direction: column; gap: 12px; } #kr-footer .brand-logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: #fff; font-family: var(--kr-font-body); font-size: 18px; font-weight: 700; letter-spacing: 0.02em; } #kr-footer .brand-mark { display: inline-flex; } #kr-footer .brand-desc { font-size: 13px; line-height: 1.8; color: rgba(255, 255, 255, 0.6); max-width: 320px; } /* === ナビ === */ #kr-footer .footer-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } #kr-footer .nav-heading { font-family: var(--kr-font-body); font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 14px; letter-spacing: 0.04em; } #kr-footer .nav-list { list-style: none; display: flex; flex-direction: column; gap: 10px; } #kr-footer .nav-list a { font-size: 13px; color: rgba(255, 255, 255, 0.65); text-decoration: none; transition: color 0.18s ease; } #kr-footer .nav-list a:hover { color: #fff; } /* === 下部 === */ #kr-footer .footer-bottom { display: flex; flex-direction: column; gap: 18px; padding-top: 24px; align-items: center; } #kr-footer .footer-social { display: flex; gap: 10px; align-items: center; } #kr-footer .social-link { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.65); background: rgba(255, 255, 255, 0.06); transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease; } #kr-footer .social-link:hover { color: #fff; background: rgba(255, 255, 255, 0.14); transform: translateY(-2px); } #kr-footer .footer-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } #kr-footer .stat-pill { display: inline-block; padding: 6px 14px; font-size: 11px; font-weight: 500; color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.06); border-radius: var(--kr-radius-pill); border: 1px solid rgba(255, 255, 255, 0.08); } #kr-footer .stat-pill strong { font-family: var(--kr-font-accent); font-weight: 700; color: #fff; margin: 0 2px; } #kr-footer .footer-copyright { font-size: 11px; color: rgba(255, 255, 255, 0.4); text-align: center; letter-spacing: 0.02em; } /* ========================================================================== レスポンシブ ========================================================================== */ /* タブレット: 縦積み */ @media (max-width: 900px) { #kr-footer { padding: 48px 24px 24px; } #kr-footer .footer-top { grid-template-columns: 1fr; gap: 32px; } #kr-footer .footer-nav { gap: 24px; } } /* スマホ: ナビを2列または1列 */ @media (max-width: 600px) { #kr-footer { padding: 40px 16px 20px; } #kr-footer .footer-top { gap: 28px; padding-bottom: 24px; } #kr-footer .footer-nav { grid-template-columns: 1fr 1fr; gap: 20px; } #kr-footer .nav-heading { font-size: 12px; margin-bottom: 10px; } #kr-footer .nav-list a { font-size: 12px; } #kr-footer .brand-desc { font-size: 12px; } } /* 超小型: ナビ1列 */ @media (max-width: 400px) { #kr-footer .footer-nav { grid-template-columns: 1fr; } } /* === sections\_partials\breadcrumb\default.css === */ /* ========================================================================== sections/_partials/breadcrumb/default.css #kr-breadcrumb で完全スコープ。下層ページのヘッダー直下に挿入される。 ========================================================================== */ #kr-breadcrumb { background: #fff; border-bottom: 1px solid var(--kr-border-soft); padding: 14px 24px; font-size: 13px; } #kr-breadcrumb .breadcrumb-inner { max-width: var(--kr-container); margin: 0 auto; } #kr-breadcrumb .breadcrumb-list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0; margin: 0; } #kr-breadcrumb .breadcrumb-item { display: inline-flex; align-items: center; gap: 6px; } #kr-breadcrumb .breadcrumb-item a { color: var(--kr-text-sub); text-decoration: none; transition: color 0.15s ease; } #kr-breadcrumb .breadcrumb-item a:hover { color: var(--kr-blue); } #kr-breadcrumb .breadcrumb-item[aria-current="page"] { color: var(--kr-text); font-weight: 500; } #kr-breadcrumb .breadcrumb-sep { color: var(--kr-text-sub); opacity: 0.5; font-size: 12px; } @media (max-width: 600px) { #kr-breadcrumb { padding: 10px 16px; font-size: 12px; } } /* === sections\_partials\cta-banner\default.css === */ /* ========================================================================== sections/_partials/cta-banner/default.css #kr-cta-banner で完全スコープ。下層ページの末尾（フッターの前）に挿入される。 ========================================================================== */ #kr-cta-banner { background: linear-gradient(135deg, var(--kr-blue), var(--kr-blue-deep)); color: #fff; padding: 56px 24px; text-align: center; } #kr-cta-banner .cta-banner-inner { max-width: var(--kr-container); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 18px; } #kr-cta-banner .cta-banner-title { font-size: clamp(20px, 3vw, 28px); font-weight: 700; line-height: 1.5; margin: 0; } #kr-cta-banner .cta-banner-sub { font-size: 14px; color: rgba(255, 255, 255, 0.85); max-width: 540px; line-height: 1.7; margin: 0; } #kr-cta-banner .cta-banner-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; } #kr-cta-banner .cta-banner-btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; font-size: 15px; font-weight: 700; border-radius: var(--kr-radius-pill); transition: transform 0.15s ease, box-shadow 0.15s ease; white-space: nowrap; } #kr-cta-banner .cta-banner-btn--primary { background: #fff; color: var(--kr-blue-deep); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); } #kr-cta-banner .cta-banner-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24); } #kr-cta-banner .cta-banner-btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.5); } #kr-cta-banner .cta-banner-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.8); } @media (max-width: 600px) { #kr-cta-banner { padding: 40px 16px; } #kr-cta-banner .cta-banner-actions { flex-direction: column; width: 100%; } #kr-cta-banner .cta-banner-btn { width: 100%; } } /* === sections\hero\default.css === */ /* ========================================================================== sections/hero/default.css #kr-hero で完全スコープ。他セクションと衝突しない。 type-a 準拠: ライトな紫〜青グラデ + 左テキスト・右動画+フローティングカード ========================================================================== */ #kr-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #F4F0FE 0%, #EAF1FD 100%); padding: 80px 24px 100px; isolation: isolate; } /* === 背景の装飾ブロブ === */ #kr-hero .hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; } #kr-hero .bg-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; will-change: transform; } #kr-hero .blob-1 { width: 460px; height: 460px; top: -120px; left: -100px; background: radial-gradient(circle, #C5B8FB 0%, transparent 70%); animation: kr-blob-drift-1 18s ease-in-out infinite; } #kr-hero .blob-2 { width: 520px; height: 520px; top: 20%; right: -160px; background: radial-gradient(circle, #B7CDFB 0%, transparent 70%); animation: kr-blob-drift-2 22s ease-in-out infinite; } #kr-hero .blob-3 { width: 360px; height: 360px; bottom: -120px; left: 30%; background: radial-gradient(circle, #DDC8FB 0%, transparent 70%); opacity: 0.4; animation: kr-blob-drift-3 26s ease-in-out infinite; } @keyframes kr-blob-drift-1 { 0% { transform: translate(0, 0) scale(1); } 25% { transform: translate(40px, 30px) scale(1.05); } 50% { transform: translate(20px, 60px) scale(0.95); } 75% { transform: translate(-30px, 40px) scale(1.03); } 100% { transform: translate(0, 0) scale(1); } } @keyframes kr-blob-drift-2 { 0% { transform: translate(0, 0) scale(1); } 25% { transform: translate(-50px, 40px) scale(0.97); } 50% { transform: translate(-30px, -30px) scale(1.06); } 75% { transform: translate(20px, -50px) scale(1.02); } 100% { transform: translate(0, 0) scale(1); } } @keyframes kr-blob-drift-3 { 0% { transform: translate(0, 0) scale(1); } 20% { transform: translate(50px, -30px) scale(1.08); } 40% { transform: translate(-20px, -50px) scale(0.92); } 60% { transform: translate(-50px, 20px) scale(1.04); } 80% { transform: translate(20px, 30px) scale(1); } 100% { transform: translate(0, 0) scale(1); } } @media (prefers-reduced-motion: reduce) { #kr-hero .bg-blob { animation: none; } } /* === レイアウト === */ #kr-hero .hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; max-width: var(--kr-container); margin: 0 auto; } /* === 左カラム === */ #kr-hero .hero-text { display: flex; flex-direction: column; gap: 28px; } #kr-hero .hero-title { font-family: var(--kr-font-body); font-weight: 900; font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1.35; letter-spacing: 0.01em; color: var(--kr-text); } #kr-hero .title-line { display: block; } #kr-hero .title-eyebrow { font-size: clamp(1.15rem, 2.2vw, 1.7rem); font-weight: 800; color: var(--kr-text); letter-spacing: 0.04em; line-height: 1.4; } #kr-hero .title-brand { font-size: clamp(2.8rem, 6vw, 4.4rem); font-weight: 900; letter-spacing: 0.02em; line-height: 1.15; margin-top: 4px; } #kr-hero .title-accent { background: linear-gradient(90deg, #4A7FE5 0%, #8B7CF6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } #kr-hero .hero-lead { font-size: clamp(0.95rem, 1.05vw, 1.05rem); line-height: 1.85; color: var(--kr-text-sub); max-width: 520px; } #kr-hero .lead-br { display: inline; } /* === CTAボタン === */ #kr-hero .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; } #kr-hero .action-primary { display: inline-flex; align-items: center; gap: 10px; padding: 16px 32px; font-size: 15px; font-weight: 700; color: #fff; background: linear-gradient(120deg, #4A7FE5 0%, #6B5BE6 100%); border-radius: var(--kr-radius-pill); box-shadow: 0 10px 28px rgba(74, 127, 229, 0.35); transition: transform 0.18s ease, box-shadow 0.18s ease; } #kr-hero .action-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(74, 127, 229, 0.45); } #kr-hero .action-arrow { transition: transform 0.18s ease; } #kr-hero .action-primary:hover .action-arrow { transform: translateX(3px); } #kr-hero .action-secondary { display: inline-flex; align-items: center; padding: 15px 30px; font-size: 15px; font-weight: 600; color: var(--kr-text); background: #fff; border: 1px solid var(--kr-border); border-radius: var(--kr-radius-pill); transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease; } #kr-hero .action-secondary:hover { border-color: var(--kr-blue); background: var(--kr-blue-light); transform: translateY(-2px); } /* === 統計バッジ === */ #kr-hero .hero-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; } #kr-hero .stat-item { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: var(--kr-radius-pill); box-shadow: var(--kr-shadow-sm); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } #kr-hero .stat-icon { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; background: var(--kr-blue-light); border-radius: 50%; } #kr-hero .stat-text { display: flex; flex-direction: column; line-height: 1.2; } #kr-hero .stat-label { font-size: 11px; color: var(--kr-text-mute); font-weight: 500; } #kr-hero .stat-value { font-family: var(--kr-font-accent); font-size: 18px; font-weight: 700; color: var(--kr-text); } #kr-hero .stat-value small { font-family: var(--kr-font-body); font-size: 11px; font-weight: 500; color: var(--kr-text-sub); margin-left: 2px; } /* === 右カラム（ビジュアル） === */ #kr-hero .hero-visual { position: relative; display: flex; align-items: center; justify-content: center; } #kr-hero .visual-stage { position: relative; width: 100%; max-width: 540px; aspect-ratio: 16 / 11; } #kr-hero .video-card { position: absolute; inset: 0; border-radius: var(--kr-radius-lg); overflow: hidden; box-shadow: 0 24px 60px rgba(40, 50, 100, 0.22); background: #1a2236; } #kr-hero .video-thumb { position: relative; width: 100%; height: 100%; overflow: hidden; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.55) 100%), linear-gradient(135deg, #2D3F6B 0%, #5B6FA8 50%, #8FA8D6 100%); } #kr-hero .video-thumb::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 25% 30%, rgba(255, 255, 255, 0.18) 0%, transparent 40%), radial-gradient(circle at 75% 70%, rgba(255, 255, 255, 0.12) 0%, transparent 50%); z-index: 2; pointer-events: none; } /* サムネ画像（admin 設定 or fv API から流入）。あれば gradient より前面に置く */ #kr-hero .video-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; display: block; } /* サムネ画像があるときは radial gradient を消し、暗化を上から重ねる */ #kr-hero .video-thumb.has-thumb { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100%); } #kr-hero .video-thumb.has-thumb::before { display: none; } /* badge / play / meta はサムネより常に前面 */ #kr-hero .video-badge, #kr-hero .video-play, #kr-hero .video-meta { z-index: 3; } #kr-hero .video-badge { position: absolute; top: 16px; left: 16px; display: inline-block; padding: 5px 12px; font-size: 11px; font-weight: 700; color: #fff; background: var(--kr-accent); border-radius: var(--kr-radius-pill); letter-spacing: 0.05em; box-shadow: 0 4px 12px rgba(240, 140, 58, 0.4); } #kr-hero .video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68px; height: 68px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); border: 2px solid rgba(255, 255, 255, 0.65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease, background 0.2s ease; } #kr-hero .video-play::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); z-index: -1; } #kr-hero .video-play:hover { transform: translate(-50%, -50%) scale(1.08); background: rgba(255, 255, 255, 0.28); } #kr-hero .video-play svg { margin-left: 3px; } #kr-hero .video-meta { position: absolute; bottom: 18px; left: 18px; right: 18px; display: flex; justify-content: space-between; align-items: flex-end; color: #fff; } #kr-hero .video-title { font-size: 18px; font-weight: 700; line-height: 1.35; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } #kr-hero .video-time { font-family: var(--kr-font-accent); font-size: 12px; font-weight: 500; opacity: 0.9; } /* === フローティングカード === */ #kr-hero .float-card { position: absolute; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; background: #fff; border-radius: var(--kr-radius-md); box-shadow: 0 10px 28px rgba(40, 50, 100, 0.16); z-index: 2; animation: kr-hero-float 6s ease-in-out infinite; } #kr-hero .float-card--top-right { top: -8%; right: -8%; animation-delay: 0s; } #kr-hero .float-card--mid-left { top: 38%; left: -12%; animation-delay: 1.5s; } #kr-hero .float-card--bottom-right { bottom: -6%; right: -2%; animation-delay: 3s; } #kr-hero .card-icon { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--kr-radius-sm); flex-shrink: 0; } #kr-hero .card-icon--blue { background: #E8EFFC; } #kr-hero .card-icon--orange { background: #FCEFE4; } #kr-hero .card-icon--pink { background: #FCE8F0; } #kr-hero .card-text { display: flex; flex-direction: column; line-height: 1.25; } #kr-hero .card-title { font-size: 13px; font-weight: 700; color: var(--kr-text); } #kr-hero .card-meta { font-size: 11px; color: var(--kr-text-mute); margin-top: 1px; } @keyframes kr-hero-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* ========================================================================== レスポンシブ ========================================================================== */ /* 中型画面: 余白調整 */ @media (max-width: 1180px) { #kr-hero { padding: 64px 24px 88px; } #kr-hero .hero-inner { gap: 32px; } #kr-hero .float-card--top-right { right: -2%; } #kr-hero .float-card--mid-left { left: -4%; } } /* タブレット: 2カラム→1カラムへ */ @media (max-width: 900px) { #kr-hero { padding: 56px 20px 72px; } #kr-hero .hero-inner { grid-template-columns: 1fr; gap: 36px; } #kr-hero .hero-title { font-size: clamp(1.85rem, 5.4vw, 2.6rem); text-align: left; } #kr-hero .title-eyebrow { font-size: clamp(1rem, 2.6vw, 1.4rem); } #kr-hero .title-brand { font-size: clamp(2.4rem, 7.5vw, 3.4rem); } #kr-hero .hero-lead { max-width: 100%; } #kr-hero .lead-br { display: none; } #kr-hero .hero-visual { margin-top: 4px; } #kr-hero .visual-stage { max-width: 480px; margin: 0 auto; } } /* スマホ: コンパクト */ @media (max-width: 600px) { #kr-hero { padding: 40px 16px 64px; } #kr-hero .hero-text { gap: 22px; } #kr-hero .hero-title { font-size: clamp(1.6rem, 7vw, 2rem); line-height: 1.4; } #kr-hero .title-eyebrow { font-size: clamp(0.92rem, 3.5vw, 1.1rem); } #kr-hero .title-brand { font-size: clamp(2.1rem, 9vw, 2.8rem); } #kr-hero .hero-lead { font-size: 14px; line-height: 1.8; } #kr-hero .hero-actions { gap: 10px; } #kr-hero .action-primary, #kr-hero .action-secondary { flex: 1; justify-content: center; padding: 14px 20px; font-size: 14px; } /* スマホでは統計バッジを横スクロール */ #kr-hero .hero-stats { margin: 0 -16px; padding: 0 16px 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } #kr-hero .hero-stats::-webkit-scrollbar { display: none; } #kr-hero .stat-item { flex-shrink: 0; padding: 8px 14px; } #kr-hero .stat-value { font-size: 16px; } /* フローティングカードはコンパクトに */ #kr-hero .visual-stage { aspect-ratio: 16 / 10; } #kr-hero .float-card { padding: 8px 12px 8px 10px; gap: 8px; } #kr-hero .card-icon { width: 30px; height: 30px; } #kr-hero .card-icon svg { width: 16px; height: 16px; } #kr-hero .card-title { font-size: 12px; } #kr-hero .card-meta { font-size: 10px; } #kr-hero .float-card--top-right { top: -16px; right: -8px; } #kr-hero .float-card--mid-left { top: 40%; left: -16px; } #kr-hero .float-card--bottom-right { bottom: -16px; right: -4px; } #kr-hero .video-play { width: 56px; height: 56px; } #kr-hero .video-title { font-size: 15px; } #kr-hero .video-time { font-size: 11px; } } /* 超小型 */ @media (max-width: 380px) { #kr-hero .float-card--top-right { right: -16px; } #kr-hero .float-card--mid-left { display: none; } #kr-hero .visual-stage { max-width: 100%; } } /* === sections\popular\default.css === */ /* ========================================================================== sections/popular/default.css #kr-popular で完全スコープ。他セクションと衝突しない。 type-a 準拠: 「人気の動画カリキュラム」横スクロールカルーセル ========================================================================== */ #kr-popular { background: #FFFFFF; padding: 56px 0 64px; position: relative; } #kr-popular .popular-inner { max-width: var(--kr-container); margin: 0 auto; padding: 0 24px; } /* === ヘッダー === */ #kr-popular .popular-header { text-align: left; margin-bottom: 22px; } #kr-popular .popular-title { display: inline-flex; align-items: center; gap: 8px; font-family: var(--kr-font-body); font-size: clamp(1.2rem, 2vw, 1.45rem); font-weight: 800; color: var(--kr-text); line-height: 1.4; } #kr-popular .title-icon { font-size: 1.1em; line-height: 1; filter: drop-shadow(0 2px 6px rgba(255, 180, 0, 0.35)); } #kr-popular .popular-lead { margin-top: 4px; font-size: 13px; color: var(--kr-text-mute); } /* === カルーセルステージ === */ #kr-popular .popular-stage { position: relative; } #kr-popular .carousel-viewport { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -8px; padding: 6px; } #kr-popular .carousel-viewport::-webkit-scrollbar { display: none; } #kr-popular .carousel-track { display: flex; gap: 16px; padding: 0 4px; } /* === 矢印ボタン === */ #kr-popular .carousel-arrow { position: absolute; top: 35%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; background: #FFFFFF; color: var(--kr-text-sub); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(20, 30, 60, 0.12); transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease; z-index: 2; border: 1px solid var(--kr-border-soft); } #kr-popular .carousel-arrow:hover:not(:disabled) { background: var(--kr-blue); color: #fff; border-color: var(--kr-blue); } #kr-popular .carousel-arrow:disabled { opacity: 0.3; cursor: not-allowed; } #kr-popular .carousel-arrow--prev { left: -22px; } #kr-popular .carousel-arrow--next { right: -22px; } /* === カード（PCで6枚表示） === */ #kr-popular .course-card { flex: 0 0 calc((100% - 80px) / 6); scroll-snap-align: start; list-style: none; } #kr-popular .card-link { display: block; text-decoration: none; color: inherit; transition: transform 0.2s ease; } #kr-popular .card-link:hover { transform: translateY(-3px); } #kr-popular .card-link:hover .card-play { background: rgba(255, 255, 255, 0.32); } #kr-popular .card-link:hover .card-title { color: var(--kr-blue); } /* === サムネイル === */ #kr-popular .card-thumb { position: relative; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 14px rgba(20, 30, 60, 0.1); } /* ランキングバッジ（top 3） */ #kr-popular .card-rank { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 2px; min-width: 26px; height: 26px; padding: 0 6px; font-family: var(--kr-font-accent); font-size: 14px; font-weight: 800; color: #fff; background: rgba(0, 0, 0, 0.55); border-radius: 6px; z-index: 2; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); line-height: 1; } #kr-popular .card-rank--1 { background: linear-gradient(135deg, #F7B500 0%, #F39200 100%); box-shadow: 0 2px 8px rgba(247, 181, 0, 0.45); } #kr-popular .card-rank--2 { background: linear-gradient(135deg, #C8CFD9 0%, #98A0AD 100%); box-shadow: 0 2px 8px rgba(150, 160, 175, 0.4); } #kr-popular .card-rank--3 { background: linear-gradient(135deg, #D88958 0%, #B8703F 100%); box-shadow: 0 2px 8px rgba(184, 112, 63, 0.4); } #kr-popular .rank-crown { font-size: 12px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)); margin-right: 1px; } #kr-popular .rank-num { font-weight: 800; } #kr-popular .thumb-bg { position: absolute; inset: 0; } /* 実画像サムネ（API から thumbnail_url が返っているとき）。 未設定/読み込み失敗時は onerror で thumb-bg グラデに置換される */ #kr-popular .card-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* サムネは全カード ダークネイビー系で統一（実際の動画スクショに置き換え可能） */ #kr-popular .thumb-bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, #1E2A47 0%, #2D3F6B 50%, #4A5E91 100%); } #kr-popular .thumb-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.18) 0%, transparent 45%), radial-gradient(circle at 75% 80%, rgba(255, 255, 255, 0.08) 0%, transparent 50%); } /* 各カードに微妙な色相違いを与える */ #kr-popular .thumb-bg--01::before { background: linear-gradient(135deg, #1E2A47 0%, #2D3F6B 50%, #4A5E91 100%); } #kr-popular .thumb-bg--02::before { background: linear-gradient(135deg, #1A2B45 0%, #283F60 50%, #3D5680 100%); } #kr-popular .thumb-bg--03::before { background: linear-gradient(135deg, #232140 0%, #34315A 50%, #514E80 100%); } #kr-popular .thumb-bg--04::before { background: linear-gradient(135deg, #1F2840 0%, #2C3958 50%, #43547A 100%); } #kr-popular .thumb-bg--05::before { background: linear-gradient(135deg, #1B2438 0%, #283354 50%, #3F4D78 100%); } #kr-popular .thumb-bg--06::before { background: linear-gradient(135deg, #20284A 0%, #2F3B66 50%, #485590 100%); } #kr-popular .thumb-bg--07::before { background: linear-gradient(135deg, #1A2440 0%, #2A3760 50%, #4A5586 100%); } /* 再生ボタン（小さく控えめに） */ #kr-popular .card-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); border: 1.5px solid rgba(255, 255, 255, 0.6); display: flex; align-items: center; justify-content: center; z-index: 1; transition: background 0.2s ease; pointer-events: none; } #kr-popular .card-play svg { margin-left: 1px; } /* === ボディ === */ #kr-popular .card-body { padding: 10px 4px 0; } #kr-popular .card-title { font-size: 13px; font-weight: 700; line-height: 1.45; color: var(--kr-text); margin-bottom: 6px; transition: color 0.18s ease; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #kr-popular .card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; } #kr-popular .meta-lessons { color: var(--kr-text-mute); font-weight: 500; } #kr-popular .meta-preview { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--kr-blue); font-size: 11px; white-space: nowrap; } #kr-popular .meta-preview-icon { font-size: 9px; line-height: 1; } #kr-popular .popular-empty { text-align: center; color: var(--kr-text-mute); font-size: 13px; padding: 32px 0; } /* ========================================================================== レスポンシブ ========================================================================== */ /* 中型: 5枚 */ @media (max-width: 1180px) { #kr-popular .course-card { flex: 0 0 calc((100% - 64px) / 5); } #kr-popular .carousel-arrow--prev { left: -8px; } #kr-popular .carousel-arrow--next { right: -8px; } } /* タブレット: 4枚 + 矢印あり */ @media (max-width: 980px) { #kr-popular .course-card { flex: 0 0 calc((100% - 48px) / 4); } } /* タブレット小: 3枚 + 矢印を消してネイティブスワイプ */ @media (max-width: 760px) { #kr-popular { padding: 44px 0 56px; } #kr-popular .course-card { flex: 0 0 calc((100% - 32px) / 3); } #kr-popular .carousel-arrow { display: none; } /* 左は popular-inner の padding に揃える、右だけ画面端まで延ばして edge-to-edge swipe を維持 */ #kr-popular .carousel-viewport { margin: 0 -16px 0 0; padding: 6px 16px; } } /* スマホ: 2.4枚見せ */ @media (max-width: 600px) { #kr-popular .popular-inner { padding: 0 16px; } #kr-popular .popular-title { font-size: 1.1rem; } #kr-popular .popular-lead { font-size: 12px; } #kr-popular .course-card { flex: 0 0 42%; } #kr-popular .carousel-track { gap: 12px; } #kr-popular .card-title { font-size: 12px; } #kr-popular .card-play { width: 30px; height: 30px; } } /* 超小型 */ @media (max-width: 380px) { #kr-popular .course-card { flex: 0 0 60%; } } /* === sections\method\default.css === */ /* ========================================================================== sections/method/default.css #kr-method で完全スコープ。他セクションと衝突しない。 構成: タイトル + 4ステップカード（PC: 横並び + 矢印 / モバイル: 縦積み） ========================================================================== */ #kr-method { background: #FFFFFF; padding: 64px 0 80px; position: relative; } #kr-method .method-inner { max-width: var(--kr-container); margin: 0 auto; padding: 0 24px; } /* === ヘッダー（左寄せ） === */ #kr-method .method-header { text-align: left; margin-bottom: 32px; } #kr-method .method-title { font-family: var(--kr-font-body); font-size: clamp(1.4rem, 2.2vw, 1.7rem); font-weight: 800; color: var(--kr-text); line-height: 1.4; } #kr-method .method-lead { margin-top: 6px; font-size: 13px; color: var(--kr-text-mute); } /* === ステップ群 === */ #kr-method .method-steps { display: flex; align-items: stretch; gap: 16px; list-style: none; } #kr-method .step-card { flex: 1; display: flex; flex-direction: column; padding: 24px 22px; background: #fff; border: 1px solid var(--kr-border-soft); border-radius: var(--kr-radius-md); transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } #kr-method .step-card:hover { border-color: var(--kr-blue); transform: translateY(-3px); box-shadow: 0 10px 28px rgba(74, 127, 229, 0.12); } #kr-method .step-num { margin-bottom: 14px; } #kr-method .step-num span { display: inline-block; font-family: var(--kr-font-accent); font-size: 30px; font-weight: 800; letter-spacing: 0.02em; background: linear-gradient(135deg, #4A7FE5 0%, #8B7CF6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; line-height: 1; } #kr-method .step-title { font-family: var(--kr-font-body); font-size: 16px; font-weight: 700; color: var(--kr-text); margin-bottom: 8px; line-height: 1.5; } #kr-method .step-desc { font-size: 13px; line-height: 1.75; color: var(--kr-text-sub); } /* === 矢印 === */ #kr-method .step-arrow { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; list-style: none; width: 20px; } /* ========================================================================== レスポンシブ ========================================================================== */ /* タブレット: 矢印を消して2列折り返し */ @media (max-width: 900px) { #kr-method { padding: 56px 0 64px; } #kr-method .method-steps { flex-wrap: wrap; gap: 14px; } #kr-method .step-card { flex: 1 1 0; min-width: 0; } #kr-method .step-arrow { display: none; } #kr-method .step-num span { font-size: 26px; } } /* スマホ: 1列縦積み */ @media (max-width: 600px) { #kr-method { padding: 44px 0 56px; } #kr-method .method-inner { padding: 0 16px; } #kr-method .method-header { margin-bottom: 24px; } #kr-method .method-title { font-size: 1.2rem; } #kr-method .method-lead { font-size: 12px; } #kr-method .method-steps { flex-direction: column; gap: 12px; } #kr-method .step-card { flex: 1 1 100%; min-width: 0; padding: 20px 18px; } #kr-method .step-num { margin-bottom: 8px; } #kr-method .step-num span { font-size: 22px; } #kr-method .step-title { font-size: 15px; margin-bottom: 6px; } #kr-method .step-desc { font-size: 12px; line-height: 1.7; } } /* === sections\dashboard\default.css === */ /* ========================================================================== sections/dashboard/default.css #kr-dashboard で完全スコープ。他セクションと衝突しない。 構成: タイトル + 「あなたの学習ダッシュボード（例）」カード（左メトリクス + 右現在の講座） ========================================================================== */ #kr-dashboard { background: linear-gradient(180deg, #F5F7FB 0%, #FFFFFF 100%); padding: 64px 0 80px; position: relative; } #kr-dashboard .dashboard-inner { max-width: var(--kr-container); margin: 0 auto; padding: 0 24px; } /* === ヘッダー（左寄せ） === */ #kr-dashboard .dashboard-header { text-align: left; margin-bottom: 28px; } #kr-dashboard .dashboard-title { font-family: var(--kr-font-body); font-size: clamp(1.4rem, 2.2vw, 1.7rem); font-weight: 800; color: var(--kr-text); line-height: 1.4; } #kr-dashboard .dashboard-lead { margin-top: 6px; font-size: 13px; color: var(--kr-text-mute); } /* === ダッシュボードカード === */ #kr-dashboard .dashboard-card { background: #fff; border-radius: 16px; border: 1px solid var(--kr-border-soft); box-shadow: 0 12px 36px rgba(20, 30, 60, 0.06); overflow: hidden; max-width: 880px; } #kr-dashboard .card-top { padding: 18px 24px; border-bottom: 1px solid var(--kr-border-soft); } #kr-dashboard .card-heading { font-family: var(--kr-font-body); font-size: 15px; font-weight: 700; color: var(--kr-text); display: inline-flex; align-items: center; gap: 8px; } #kr-dashboard .card-tag { display: inline-block; padding: 2px 8px; font-size: 10px; font-weight: 700; color: var(--kr-text-mute); background: var(--kr-bg-soft); border-radius: var(--kr-radius-pill); letter-spacing: 0.05em; } #kr-dashboard .card-body { display: grid; grid-template-columns: 1.05fr 1fr; gap: 24px; padding: 24px; } /* === 左: メトリクス === */ #kr-dashboard .metrics { display: flex; flex-direction: column; gap: 14px; } #kr-dashboard .metric { background: var(--kr-bg-soft); border-radius: 12px; padding: 16px 18px; } #kr-dashboard .metric-label { display: block; font-size: 12px; font-weight: 500; color: var(--kr-text-sub); margin-bottom: 8px; } #kr-dashboard .metric-value { display: inline-flex; align-items: baseline; gap: 2px; flex-wrap: wrap; font-family: var(--kr-font-accent); color: var(--kr-text); line-height: 1; } #kr-dashboard .metric--big .metric-value { align-items: center; gap: 4px; } #kr-dashboard .value-icon { display: inline-flex; margin-right: 4px; } #kr-dashboard .value-num { font-family: var(--kr-font-accent); font-size: 28px; font-weight: 800; letter-spacing: 0.01em; } #kr-dashboard .metric--small .value-num { font-size: 24px; } #kr-dashboard .value-unit { font-family: var(--kr-font-body); font-size: 13px; font-weight: 500; color: var(--kr-text-sub); margin-right: 6px; } #kr-dashboard .value-target { font-family: var(--kr-font-body); font-size: 12px; font-weight: 500; color: var(--kr-text-mute); margin-left: 4px; } #kr-dashboard .metric-bar { margin-top: 12px; height: 6px; background: rgba(74, 127, 229, 0.12); border-radius: 999px; overflow: hidden; } #kr-dashboard .metric-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, #4A7FE5 0%, #8B7CF6 100%); border-radius: 999px; } #kr-dashboard .metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } #kr-dashboard .metric--small { padding: 14px 16px; } /* === 右: 現在の講座 === */ #kr-dashboard .current-course { background: var(--kr-bg-soft); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 14px; } #kr-dashboard .current-label { font-size: 12px; font-weight: 500; color: var(--kr-text-sub); } #kr-dashboard .course-row { display: flex; gap: 12px; align-items: center; } #kr-dashboard .course-thumb { position: relative; flex: 0 0 100px; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(20, 30, 60, 0.1); } #kr-dashboard .course-thumb .thumb-bg { position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.16) 0%, transparent 45%), linear-gradient(135deg, #2D3F6B 0%, #5B6FA8 50%, #8FA8D6 100%); } #kr-dashboard .course-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); border: 1.5px solid rgba(255, 255, 255, 0.7); display: flex; align-items: center; justify-content: center; } #kr-dashboard .course-play svg { margin-left: 1px; } #kr-dashboard .course-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } #kr-dashboard .course-title { font-size: 13px; font-weight: 700; color: var(--kr-text); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #kr-dashboard .course-progress-label, #kr-dashboard .course-progress-pct { font-size: 11px; color: var(--kr-text-sub); line-height: 1.4; } #kr-dashboard .course-progress-label strong, #kr-dashboard .course-progress-pct strong { font-family: var(--kr-font-accent); font-size: 13px; font-weight: 700; color: var(--kr-text); } #kr-dashboard .course-bar { margin-top: 4px; height: 4px; background: rgba(74, 127, 229, 0.12); border-radius: 999px; overflow: hidden; } #kr-dashboard .course-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, #4A7FE5 0%, #8B7CF6 100%); border-radius: 999px; } #kr-dashboard .resume-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(120deg, #4A7FE5 0%, #6B5BE6 100%); border-radius: 10px; text-decoration: none; box-shadow: 0 6px 16px rgba(74, 127, 229, 0.3); transition: transform 0.18s ease, box-shadow 0.18s ease; } #kr-dashboard .resume-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(74, 127, 229, 0.4); } /* ========================================================================== レスポンシブ ========================================================================== */ /* タブレット: カード内縦積み */ @media (max-width: 900px) { #kr-dashboard { padding: 56px 0 64px; } #kr-dashboard .card-body { grid-template-columns: 1fr; gap: 16px; padding: 20px; } } /* スマホ */ @media (max-width: 600px) { #kr-dashboard { padding: 44px 0 56px; } #kr-dashboard .dashboard-inner { padding: 0 16px; } #kr-dashboard .dashboard-title { font-size: 1.2rem; } #kr-dashboard .dashboard-lead { font-size: 12px; } #kr-dashboard .dashboard-card { border-radius: 14px; } #kr-dashboard .card-top { padding: 14px 18px; } #kr-dashboard .card-heading { font-size: 14px; } #kr-dashboard .card-body { padding: 16px; gap: 14px; } #kr-dashboard .metric { padding: 14px 16px; } #kr-dashboard .value-num { font-size: 24px; } #kr-dashboard .metric--small .value-num { font-size: 20px; } #kr-dashboard .metric-grid { gap: 10px; } #kr-dashboard .current-course { padding: 14px; } #kr-dashboard .course-row { gap: 10px; } #kr-dashboard .course-thumb { flex: 0 0 84px; } } /* === sections\reasons\default.css === */ /* ========================================================================== sections/reasons/default.css #kr-reasons で完全スコープ。他セクションと衝突しない。 構成: タイトル + 6項目グリッド（PC: 3列×2 / タブレット: 2列×3 / モバイル: 1列） ========================================================================== */ #kr-reasons { background: #FFFFFF; padding: 72px 0 88px; position: relative; } #kr-reasons .reasons-inner { max-width: var(--kr-container); margin: 0 auto; padding: 0 24px; } /* === ヘッダー（左寄せ） === */ #kr-reasons .reasons-header { text-align: left; margin-bottom: 32px; } #kr-reasons .reasons-title { font-family: var(--kr-font-body); font-size: clamp(1.4rem, 2.2vw, 1.7rem); font-weight: 800; color: var(--kr-text); line-height: 1.4; } #kr-reasons .reasons-lead { margin-top: 6px; font-size: 13px; color: var(--kr-text-mute); } /* === グリッド === */ #kr-reasons .reasons-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; list-style: none; } #kr-reasons .reason-item { background: #fff; border: 1px solid var(--kr-border-soft); border-radius: var(--kr-radius-md); padding: 26px 22px; transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } #kr-reasons .reason-item:hover { border-color: var(--kr-blue); transform: translateY(-3px); box-shadow: 0 10px 28px rgba(74, 127, 229, 0.12); } #kr-reasons .reason-icon { display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center; background: var(--kr-blue-light); border-radius: 14px; margin-bottom: 16px; } #kr-reasons .reason-title { font-family: var(--kr-font-body); font-size: 15px; font-weight: 700; color: var(--kr-text); margin-bottom: 8px; line-height: 1.5; } #kr-reasons .reason-desc { font-size: 13px; line-height: 1.8; color: var(--kr-text-sub); } /* ========================================================================== レスポンシブ ========================================================================== */ /* タブレット: 2列 */ @media (max-width: 900px) { #kr-reasons { padding: 56px 0 72px; } #kr-reasons .reasons-list { grid-template-columns: repeat(2, 1fr); gap: 14px; } #kr-reasons .reason-item { padding: 22px 18px; } } /* スマホ: 1列 */ @media (max-width: 600px) { #kr-reasons { padding: 44px 0 56px; } #kr-reasons .reasons-inner { padding: 0 16px; } #kr-reasons .reasons-header { margin-bottom: 22px; } #kr-reasons .reasons-title { font-size: 1.2rem; } #kr-reasons .reasons-lead { font-size: 12px; } #kr-reasons .reasons-list { grid-template-columns: 1fr; gap: 12px; } #kr-reasons .reason-item { padding: 20px 18px; } #kr-reasons .reason-icon { width: 44px; height: 44px; margin-bottom: 12px; } #kr-reasons .reason-icon svg { width: 22px; height: 22px; } #kr-reasons .reason-title { font-size: 14px; } #kr-reasons .reason-desc { font-size: 12px; line-height: 1.75; } } /* === sections\voices\default.css === */ /* ========================================================================== sections/voices/default.css #kr-voices で完全スコープ。他セクションと衝突しない。 構成: タイトル + 3カードの受講生テスティモニアル ========================================================================== */ #kr-voices { background: linear-gradient(180deg, #FFFFFF 0%, #F4F0FE 100%); padding: 72px 0 88px; position: relative; } #kr-voices .voices-inner { max-width: var(--kr-container); margin: 0 auto; padding: 0 24px; } /* === ヘッダー（左寄せ） === */ #kr-voices .voices-header { text-align: left; margin-bottom: 32px; } #kr-voices .voices-title { font-family: var(--kr-font-body); font-size: clamp(1.4rem, 2.2vw, 1.7rem); font-weight: 800; color: var(--kr-text); line-height: 1.4; } #kr-voices .voices-lead { margin-top: 6px; font-size: 13px; color: var(--kr-text-mute); } /* === グリッド === */ #kr-voices .voices-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; list-style: none; max-width: 880px; margin: 0 auto; } #kr-voices .voice-card { position: relative; background: #fff; border: 1px solid var(--kr-border-soft); border-radius: var(--kr-radius-md); padding: 26px 24px 22px; transition: transform 0.2s ease, box-shadow 0.2s ease; display: flex; flex-direction: column; gap: 14px; overflow: hidden; } #kr-voices .voice-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(74, 127, 229, 0.12); } #kr-voices .voice-quote-mark { position: absolute; top: 6px; right: 18px; font-family: Georgia, "Times New Roman", serif; font-size: 64px; line-height: 1; font-weight: 700; color: rgba(74, 127, 229, 0.12); pointer-events: none; } #kr-voices .voice-text { font-size: 14px; line-height: 1.85; color: var(--kr-text); flex: 1; position: relative; z-index: 1; } /* === プロフィール === */ #kr-voices .voice-profile { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--kr-border-soft); } #kr-voices .profile-avatar { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-family: var(--kr-font-accent); font-size: 16px; font-weight: 800; flex-shrink: 0; } #kr-voices .profile-avatar--blue { background: linear-gradient(135deg, #4A7FE5 0%, #6B8FE8 100%); } #kr-voices .profile-avatar--orange { background: linear-gradient(135deg, #F08C3A 0%, #FFB070 100%); } #kr-voices .profile-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } #kr-voices .profile-name { font-size: 13px; font-weight: 700; color: var(--kr-text); line-height: 1.4; } #kr-voices .profile-role { font-size: 11px; color: var(--kr-text-mute); line-height: 1.4; } /* ========================================================================== レスポンシブ ========================================================================== */ /* === 「📅 受講後の感想」ラベル === */ #kr-voices .voice-day-label { display: inline-block; align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--kr-blue, #4A7FE5); background: rgba(74, 127, 229, 0.1); padding: 4px 10px; border-radius: 999px; } /* 第1期生バッジ */ #kr-voices .voice-badge { display: inline-block; font-size: 10.5px; font-weight: 700; color: #2c8a3a; background: rgba(76, 175, 80, 0.12); padding: 2px 8px; border-radius: 999px; margin-left: 4px; letter-spacing: 0.02em; } /* プロフィール内のリンクは色をそのまま継承 */ #kr-voices .profile-name a, #kr-voices .profile-role a { color: inherit; text-decoration: none; } #kr-voices .profile-role a { text-decoration: underline; text-underline-offset: 2px; } #kr-voices .profile-name a:hover, #kr-voices .profile-role a:hover { color: var(--kr-blue, #4A7FE5); } /* === 「詳しく見る」ボタン === */ #kr-voices .voice-detail-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--kr-blue, #4A7FE5); background: rgba(74, 127, 229, 0.08); border: 1px solid rgba(74, 127, 229, 0.2); border-radius: 999px; cursor: pointer; font-family: inherit; transition: background 0.15s, border-color 0.15s, transform 0.1s; align-self: flex-start; } #kr-voices .voice-detail-btn:hover { background: rgba(74, 127, 229, 0.14); border-color: rgba(74, 127, 229, 0.4); transform: translateY(-1px); } /* === ポップアップモーダル === */ #kr-voices .voice-modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 24px; } #kr-voices .voice-modal[hidden] { display: none; } #kr-voices .voice-modal-overlay { position: absolute; inset: 0; background: rgba(13, 23, 50, 0.65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: kr-voice-modal-fade 200ms ease-out both; } #kr-voices .voice-modal-window { position: relative; width: 100%; max-width: 620px; max-height: calc(100vh - 48px); background: #ffffff; border-radius: 18px; box-shadow: 0 28px 70px rgba(13, 23, 50, 0.35); overflow: hidden; display: flex; flex-direction: column; animation: kr-voice-modal-pop 220ms cubic-bezier(0.2, 0.9, 0.3, 1.1) both; } #kr-voices .voice-modal-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.95); color: #1f2a44; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; box-shadow: 0 4px 14px rgba(13, 23, 50, 0.18); transition: transform 120ms ease, background 120ms ease; } #kr-voices .voice-modal-close:hover { background: #ffffff; transform: scale(1.05); } #kr-voices .voice-modal-header { display: flex; align-items: flex-start; gap: 16px; padding: 22px 24px 16px; border-bottom: 1px solid #eef0f6; flex-shrink: 0; } /* voice-modal-avatar は profile-avatar と同居しているが、 セレクタ詳細度が同じで後勝ち。modal 内では大きめにする。 */ #kr-voices .voice-modal-header .voice-modal-avatar.profile-avatar { width: 56px; height: 56px; font-size: 22px; flex-shrink: 0; } #kr-voices .voice-modal-headline { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } #kr-voices .voice-modal-name { font-family: var(--kr-font-accent, inherit); font-size: 20px; font-weight: 700; color: #1f2a44; margin: 0; line-height: 1.3; } #kr-voices .voice-modal-role { font-size: 13px; color: #5a6585; margin: 0; } #kr-voices .voice-modal-body { padding: 18px 24px 24px; overflow-y: auto; font-size: 14px; line-height: 1.95; color: #2c3654; display: flex; flex-direction: column; gap: 12px; } #kr-voices .voice-modal-text { color: #2c3654; } #kr-voices .voice-modal-text p { margin: 0 0 14px; } #kr-voices .voice-modal-text p:last-child { margin-bottom: 0; } #kr-voices .voice-modal-text strong { color: #1f2a44; font-weight: 700; background: linear-gradient(transparent 60%, rgba(247, 181, 0, 0.35) 60%); padding: 0 2px; } #kr-voices .voice-modal-links { list-style: none; margin: 8px 0 0; padding: 14px 0 0; border-top: 1px solid #eef0f6; display: flex; flex-direction: column; gap: 8px; } #kr-voices .voice-modal-links li { margin: 0; } #kr-voices .voice-modal-links a { display: inline-flex; align-items: center; gap: 6px; color: var(--kr-blue, #4A7FE5); text-decoration: underline; text-underline-offset: 2px; font-size: 13.5px; font-weight: 600; } #kr-voices .voice-modal-links a:hover { color: #2f5fc9; } @keyframes kr-voice-modal-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes kr-voice-modal-pop { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { #kr-voices .voice-modal-overlay, #kr-voices .voice-modal-window { animation: none; } } /* タブレット以下: 1カラム */ @media (max-width: 720px) { #kr-voices { padding: 56px 0 72px; } #kr-voices .voices-list { grid-template-columns: 1fr; gap: 14px; } #kr-voices .voice-modal { padding: 12px; } #kr-voices .voice-modal-window { max-height: calc(100vh - 24px); border-radius: 14px; } } /* スマホ */ @media (max-width: 600px) { #kr-voices { padding: 44px 0 56px; } #kr-voices .voices-inner { padding: 0 16px; } #kr-voices .voices-title { font-size: 1.2rem; } #kr-voices .voices-lead { font-size: 12px; } #kr-voices .voices-header { margin-bottom: 22px; } #kr-voices .voice-card { padding: 22px 20px 18px; } #kr-voices .voice-text { font-size: 13px; line-height: 1.8; } #kr-voices .voice-quote-mark { font-size: 52px; top: 4px; right: 14px; } #kr-voices .profile-avatar { width: 36px; height: 36px; font-size: 14px; } #kr-voices .profile-name { font-size: 12px; } #kr-voices .profile-role { font-size: 10.5px; } #kr-voices .voice-modal-name { font-size: 17px; } #kr-voices .voice-modal-body { font-size: 13.5px; } } /* === sections\blog\default.css === */ /* ========================================================================== sections/blog/default.css - LP「最新のブログ」セクション - 4枚のカードを 4列グリッド（PC）／ 2列（タブレット）／ 1列（スマホ） - サムネ画像16:9 + タイトル + 公開日 ========================================================================== */ #kr-blog { padding: 80px 0; background: var(--kr-bg); } #kr-blog .blog-inner { max-width: var(--kr-container); margin: 0 auto; padding: 0 24px; } #kr-blog .blog-header { text-align: center; margin-bottom: 40px; } #kr-blog .blog-title { font-family: var(--kr-font-accent, inherit); font-size: 32px; font-weight: 700; line-height: 1.3; color: var(--kr-text); margin: 0 0 12px; display: inline-flex; align-items: center; gap: 12px; } #kr-blog .blog-title .title-icon { font-size: 1.1em; } #kr-blog .blog-lead { font-size: 15px; color: var(--kr-text-sub); margin: 0; } #kr-blog .blog-list { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } #kr-blog .blog-card { display: flex; flex-direction: column; background: var(--kr-bg); border: 1px solid var(--kr-border); border-radius: var(--kr-radius-md); overflow: hidden; text-decoration: none; color: inherit; transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; cursor: pointer; } #kr-blog .blog-card:hover { transform: translateY(-3px); box-shadow: var(--kr-shadow-md); border-color: var(--kr-blue); } #kr-blog .blog-card-skeleton { pointer-events: none; opacity: 0.6; cursor: default; } #kr-blog .blog-thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--kr-blue) 0%, var(--kr-purple) 100%); overflow: hidden; } #kr-blog .blog-thumb-skeleton { background: linear-gradient(90deg, var(--kr-bg-soft) 0%, var(--kr-border-soft) 50%, var(--kr-bg-soft) 100%); background-size: 200% 100%; animation: kr-blog-skel 1.4s ease-in-out infinite; } @keyframes kr-blog-skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { #kr-blog .blog-thumb-skeleton { animation: none; } #kr-blog .blog-card { transition: none; } } #kr-blog .blog-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; } #kr-blog .blog-thumb-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 36px; color: rgba(255, 255, 255, 0.85); } #kr-blog .blog-card-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; } #kr-blog .blog-card-meta { font-size: 12px; color: var(--kr-text-mute); margin: 0; letter-spacing: 0.02em; } #kr-blog .blog-card-title { font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--kr-text); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } #kr-blog .blog-actions { display: flex; justify-content: center; } #kr-blog .blog-more-link { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border: 1px solid var(--kr-border); border-radius: var(--kr-radius-pill); background: var(--kr-bg-soft); color: var(--kr-text); font-size: 14px; font-weight: 600; text-decoration: none; transition: background 150ms ease, border-color 150ms ease, transform 100ms ease; } #kr-blog .blog-more-link:hover { background: var(--kr-bg); border-color: var(--kr-blue); color: var(--kr-blue); transform: translateY(-1px); } @media (max-width: 960px) { #kr-blog .blog-list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { #kr-blog { padding: 56px 0; } #kr-blog .blog-title { font-size: 24px; } #kr-blog .blog-lead { font-size: 13.5px; } #kr-blog .blog-list { grid-template-columns: 1fr; gap: 16px; } #kr-blog .blog-card-title { font-size: 14.5px; } } /* === sections\pricing\default.css === */ /* ========================================================================== sections/pricing/default.css #kr-pricing で完全スコープ。TOPページ内の料金プランセクション。 旧 /pricing/ 単体ページの内容を統合（プラン + お申込みの流れ + 注意事項 + FAQ）。 ========================================================================== */ #kr-pricing { padding: 96px 24px; background: var(--kr-bg); } #kr-pricing .pricing-inner { max-width: 920px; margin: 0 auto; } /* === ヘッダ === */ #kr-pricing .pricing-header { text-align: center; margin-bottom: 56px; } #kr-pricing .pricing-eyebrow { font-family: var(--kr-font-accent); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--kr-blue); margin-bottom: 12px; } #kr-pricing .pricing-title { font-size: clamp(28px, 4vw, 40px); font-weight: 700; line-height: 1.3; margin-bottom: 16px; color: var(--kr-text); } #kr-pricing .pricing-lead { font-size: 15px; line-height: 1.9; color: var(--kr-text-sub); } /* === 共通ブロック === */ #kr-pricing .pricing-block { margin-bottom: 56px; } #kr-pricing .block-title { font-size: 20px; font-weight: 700; color: var(--kr-text); margin-bottom: 24px; text-align: center; } /* === お申込みの流れ === */ #kr-pricing .flow-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } #kr-pricing .flow-step { display: flex; gap: 14px; padding: 20px; background: #fff; border: 1px solid var(--kr-border-soft); border-radius: var(--kr-radius-lg); } #kr-pricing .flow-step-num { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--kr-blue); color: #fff; font-family: var(--kr-font-accent); font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } #kr-pricing .flow-step-body { min-width: 0; } #kr-pricing .flow-step-title { font-size: 14px; font-weight: 700; color: var(--kr-text); margin: 0 0 6px; } #kr-pricing .flow-step-desc { font-size: 12px; line-height: 1.7; color: var(--kr-text-sub); margin: 0; } /* === プラン === */ #kr-pricing .plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; } #kr-pricing .plan-card { position: relative; background: #fff; border: 1px solid var(--kr-border-soft); border-radius: var(--kr-radius-lg); padding: 32px 28px; display: flex; flex-direction: column; } #kr-pricing .plan-card--highlight { border-color: var(--kr-blue); box-shadow: 0 12px 32px rgba(74, 127, 229, 0.15); } #kr-pricing .plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 4px 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: #fff; background: var(--kr-blue); border-radius: var(--kr-radius-pill); } #kr-pricing .plan-name { font-size: 18px; font-weight: 700; color: var(--kr-text); margin: 0 0 4px; } #kr-pricing .plan-for { font-size: 13px; color: var(--kr-text-sub); margin: 0 0 18px; } #kr-pricing .plan-price { font-family: var(--kr-font-accent); color: var(--kr-blue-deep, var(--kr-text)); margin: 0 0 6px; display: flex; align-items: baseline; gap: 2px; } #kr-pricing .plan-price-currency { font-size: 18px; font-weight: 700; } #kr-pricing .plan-price-amount { font-size: 36px; font-weight: 700; letter-spacing: 0.01em; } #kr-pricing .plan-price-unit { font-size: 13px; color: var(--kr-text-sub); font-weight: 500; } #kr-pricing .plan-price-note { font-size: 12px; color: var(--kr-text-sub); margin: 0 0 14px; line-height: 1.6; } #kr-pricing .plan-slots { font-size: 12px; color: var(--kr-blue); background: var(--kr-bg); border: 1px solid var(--kr-border-soft); padding: 6px 12px; border-radius: var(--kr-radius-pill); align-self: flex-start; margin-bottom: 16px; } #kr-pricing .plan-features { list-style: none; padding: 0; margin: 0 0 24px; flex: 1; display: flex; flex-direction: column; gap: 10px; } #kr-pricing .plan-features li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.7; color: var(--kr-text); } #kr-pricing .plan-features li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--kr-blue); font-weight: 700; } #kr-pricing .plan-inquiry { margin-bottom: 20px; padding: 14px 16px; background: var(--kr-bg); border-radius: 10px; } #kr-pricing .plan-inquiry-title { font-size: 12px; font-weight: 700; color: var(--kr-text); margin: 0 0 8px; } #kr-pricing .plan-inquiry-list { list-style: decimal; padding-left: 18px; margin: 0; font-size: 12px; line-height: 1.7; color: var(--kr-text-sub); display: flex; flex-direction: column; gap: 2px; } #kr-pricing .plan-cta { display: inline-flex; align-items: center; justify-content: center; padding: 14px; font-family: var(--kr-font-accent); font-size: 14px; font-weight: 700; color: #fff; background: var(--kr-blue); border-radius: var(--kr-radius-pill); text-decoration: none; box-shadow: 0 4px 14px rgba(74, 127, 229, 0.32); transition: transform 0.15s ease, box-shadow 0.15s ease; } #kr-pricing .plan-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(74, 127, 229, 0.42); } #kr-pricing .plan-cta--secondary { color: var(--kr-blue); background: #fff; border: 1px solid var(--kr-blue); box-shadow: none; } #kr-pricing .plan-cta--secondary:hover { background: var(--kr-bg); box-shadow: none; } #kr-pricing .plan-cta-note { font-size: 12px; color: var(--kr-text-sub); margin: 12px 0 0; line-height: 1.6; text-align: center; } /* === 注意事項 === */ #kr-pricing .notice-block .block-title { font-size: 16px; text-align: left; } #kr-pricing .notice-list { list-style: disc; padding-left: 22px; margin: 0; font-size: 13px; line-height: 1.9; color: var(--kr-text-sub); background: #fff; border: 1px solid var(--kr-border-soft); border-radius: var(--kr-radius-lg); padding: 20px 22px 20px 44px; } #kr-pricing .notice-list li + li { margin-top: 4px; } /* === FAQ === */ #kr-pricing .faq-item { background: #fff; border: 1px solid var(--kr-border-soft); border-radius: 10px; margin-bottom: 8px; overflow: hidden; } #kr-pricing .faq-item[open] { border-color: var(--kr-blue); box-shadow: 0 4px 14px rgba(74, 127, 229, 0.08); } #kr-pricing .faq-q { list-style: none; cursor: pointer; padding: 14px 18px; font-size: 14px; font-weight: 700; color: var(--kr-text); position: relative; padding-right: 40px; } #kr-pricing .faq-q::-webkit-details-marker { display: none; } #kr-pricing .faq-q::after { content: ''; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--kr-text-sub); border-bottom: 2px solid var(--kr-text-sub); transform: translateY(-70%) rotate(45deg); transition: transform 0.2s ease; } #kr-pricing .faq-item[open] .faq-q::after { transform: translateY(-30%) rotate(225deg); } #kr-pricing .faq-a { padding: 0 18px 16px; font-size: 13px; line-height: 1.9; color: var(--kr-text-sub); } #kr-pricing .faq-a ul { margin: 8px 0; padding-left: 20px; } #kr-pricing .faq-a strong { color: var(--kr-text); } #kr-pricing .faq-section-title { font-size: 14px; font-weight: 700; color: var(--kr-text); margin: 24px 0 12px; padding-top: 16px; border-top: 1px solid var(--kr-border-soft); } /* === レスポンシブ === */ @media (max-width: 760px) { #kr-pricing .flow-list { grid-template-columns: 1fr; } } @media (max-width: 600px) { #kr-pricing { padding: 64px 16px; } #kr-pricing .plan-card { padding: 28px 22px; } #kr-pricing .plan-price-amount { font-size: 32px; } } /* === sections\final-cta\default.css === */ /* ========================================================================== sections/final-cta/default.css #kr-final-cta で完全スコープ。他セクションと衝突しない。 構成: 青グラデフルワイド + タイトル + 説明 + 大CTAボタン ========================================================================== */ #kr-final-cta { position: relative; background: linear-gradient(120deg, #4A7FE5 0%, #6B5BE6 50%, #8B7CF6 100%); padding: 56px 24px; overflow: hidden; isolation: isolate; } /* === 装飾 === */ #kr-final-cta .cta-deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; } #kr-final-cta .deco-circle { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.08); filter: blur(20px); } #kr-final-cta .deco-circle--1 { width: 320px; height: 320px; top: -120px; left: -80px; background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 70%); } #kr-final-cta .deco-circle--2 { width: 260px; height: 260px; bottom: -100px; right: 10%; background: radial-gradient(circle, rgba(255, 255, 255, 0.12), transparent 70%); } #kr-final-cta .deco-circle--3 { width: 180px; height: 180px; top: 30%; right: -50px; background: radial-gradient(circle, rgba(255, 255, 255, 0.15), transparent 70%); } /* === レイアウト === */ #kr-final-cta .cta-inner { position: relative; z-index: 1; max-width: var(--kr-container); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 32px; } #kr-final-cta .cta-text { display: flex; flex-direction: column; gap: 6px; } #kr-final-cta .cta-title { font-family: var(--kr-font-body); font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 800; color: #fff; line-height: 1.4; letter-spacing: 0.01em; } #kr-final-cta .cta-lead { font-size: 13px; color: rgba(255, 255, 255, 0.85); line-height: 1.7; } /* === ボタン === */ #kr-final-cta .cta-actions { flex-shrink: 0; } #kr-final-cta .cta-button { display: inline-flex; align-items: center; gap: 10px; padding: 16px 32px; font-size: 15px; font-weight: 800; color: var(--kr-blue); background: #fff; border-radius: var(--kr-radius-pill); text-decoration: none; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); transition: transform 0.18s ease, box-shadow 0.18s ease; white-space: nowrap; } #kr-final-cta .cta-button:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.24); } #kr-final-cta .cta-button svg { transition: transform 0.18s ease; } #kr-final-cta .cta-button:hover svg { transform: translateX(3px); } /* ========================================================================== レスポンシブ ========================================================================== */ /* タブレット: 縦積み */ @media (max-width: 900px) { #kr-final-cta { padding: 48px 24px; } #kr-final-cta .cta-inner { flex-direction: column; align-items: flex-start; gap: 24px; } } /* スマホ */ @media (max-width: 600px) { #kr-final-cta { padding: 40px 16px; } #kr-final-cta .cta-inner { gap: 20px; } #kr-final-cta .cta-title { font-size: 1.2rem; } #kr-final-cta .cta-lead { font-size: 12px; } #kr-final-cta .cta-button { width: 100%; justify-content: center; padding: 16px 24px; font-size: 14px; } } /* === sections\lesson-modal\default.css === */ /* === sections/lesson-modal/default.css === */ #kr-lesson-modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 24px; -webkit-overflow-scrolling: touch; } #kr-lesson-modal[hidden] { display: none; } #kr-lesson-modal .modal-backdrop { position: absolute; inset: 0; background: rgba(13, 23, 50, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: kr-modal-fade 200ms ease-out both; } #kr-lesson-modal .modal-window { position: relative; width: 100%; max-width: 880px; max-height: calc(100vh - 48px); background: #ffffff; border-radius: 18px; box-shadow: 0 30px 80px rgba(13, 23, 50, 0.35); overflow: hidden; display: flex; flex-direction: column; animation: kr-modal-pop 240ms cubic-bezier(0.2, 0.9, 0.3, 1.1) both; } #kr-lesson-modal .modal-close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.92); color: #1f2a44; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; box-shadow: 0 4px 14px rgba(13, 23, 50, 0.18); transition: transform 120ms ease, background 120ms ease; } #kr-lesson-modal .modal-close:hover { background: #ffffff; transform: scale(1.05); } #kr-lesson-modal .modal-close:focus-visible { outline: 2px solid #4A7FE5; outline-offset: 2px; } #kr-lesson-modal .modal-stage { position: relative; width: 100%; background: #0d1732; flex-shrink: 0; } #kr-lesson-modal .modal-video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #1a2950 0%, #0d1732 100%); overflow: hidden; } /* スライド/エラー表示時はアスペクト比を解除し、内容に応じた高さに */ #kr-lesson-modal[data-state="slides"] .modal-video, #kr-lesson-modal[data-state="error"] .modal-video { aspect-ratio: auto; overflow: visible; } #kr-lesson-modal .modal-video::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(74, 127, 229, 0.25) 0%, transparent 50%), radial-gradient(circle at 70% 70%, rgba(232, 91, 151, 0.15) 0%, transparent 50%); pointer-events: none; } #kr-lesson-modal .modal-video-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: rgba(255, 255, 255, 0.92); text-align: center; padding: 24px; } #kr-lesson-modal .placeholder-icon { display: inline-flex; width: 64px; height: 64px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #ffffff; margin-bottom: 8px; } #kr-lesson-modal .placeholder-text { font-size: 16px; font-weight: 700; margin: 0; letter-spacing: 0.04em; } #kr-lesson-modal .placeholder-sub { font-size: 12px; margin: 0; color: rgba(255, 255, 255, 0.6); } #kr-lesson-modal .modal-info { padding: 24px 28px 28px; overflow-y: auto; } #kr-lesson-modal .modal-eyebrow { display: inline-block; margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: #ffffff; background: linear-gradient(135deg, #4A7FE5, #6E7FFF); padding: 4px 10px; border-radius: 999px; } #kr-lesson-modal .modal-eyebrow[hidden] { display: none; } #kr-lesson-modal .modal-title { font-family: var(--kr-font-accent, inherit); font-size: 22px; font-weight: 700; line-height: 1.4; color: #1f2a44; margin: 0 0 12px; } #kr-lesson-modal .modal-meta { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 13px; color: #5a6585; } #kr-lesson-modal .modal-meta-item { display: inline-flex; align-items: center; position: relative; } #kr-lesson-modal .modal-meta-item[hidden] { display: none; } #kr-lesson-modal .modal-meta-item + .modal-meta-item::before { content: "・"; margin-right: 6px; color: #aab1c6; } #kr-lesson-modal .modal-desc { font-size: 14px; line-height: 1.7; color: #4a5675; margin: 0 0 18px; } #kr-lesson-modal .modal-desc[hidden] { display: none; } #kr-lesson-modal .modal-guide { margin: 0 0 16px; border: 1px solid #e2e6f1; border-radius: 10px; background: #f7f9fd; overflow: hidden; } #kr-lesson-modal .modal-guide[hidden] { display: none; } #kr-lesson-modal .modal-guide-summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 700; color: #1f2a44; user-select: none; transition: background 120ms ease; } #kr-lesson-modal .modal-guide-summary::-webkit-details-marker { display: none; } #kr-lesson-modal .modal-guide-summary:hover { background: #eef2fa; } #kr-lesson-modal .modal-guide-summary-icon { color: #4A7FE5; transition: transform 200ms ease; flex-shrink: 0; } #kr-lesson-modal .modal-guide[open] .modal-guide-summary-icon { transform: rotate(180deg); } #kr-lesson-modal .modal-guide-body { padding: 4px 16px 14px; font-size: 14px; line-height: 1.75; color: #2c3654; border-top: 1px solid #e2e6f1; background: #ffffff; max-height: 380px; overflow-y: auto; } #kr-lesson-modal .modal-guide-body h2 { font-size: 16px; font-weight: 700; color: #1f2a44; margin: 16px 0 8px; } #kr-lesson-modal .modal-guide-body h3 { font-size: 14px; font-weight: 700; color: #1f2a44; margin: 14px 0 6px; } #kr-lesson-modal .modal-guide-body p { margin: 0 0 10px; } #kr-lesson-modal .modal-guide-body ul, #kr-lesson-modal .modal-guide-body ol { margin: 0 0 10px; padding-left: 20px; } #kr-lesson-modal .modal-guide-body li { margin: 4px 0; } #kr-lesson-modal .modal-guide-body code { background: #f0f3fa; color: #4A7FE5; padding: 2px 6px; border-radius: 4px; font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } #kr-lesson-modal .modal-guide-body pre { background: #1f2a44; color: #f5f7fb; padding: 12px 14px; border-radius: 8px; overflow-x: auto; font-size: 12.5px; margin: 8px 0 12px; } #kr-lesson-modal .modal-guide-body pre code { background: transparent; color: inherit; padding: 0; } #kr-lesson-modal .modal-guide-body a { color: #4A7FE5; text-decoration: underline; } #kr-lesson-modal .modal-guide-body strong { font-weight: 700; color: #1f2a44; } #kr-lesson-modal .modal-actions { display: flex; flex-wrap: wrap; gap: 12px; } #kr-lesson-modal .modal-cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; background: linear-gradient(135deg, #4A7FE5 0%, #6E7FFF 100%); color: #ffffff; font-size: 14px; font-weight: 700; text-decoration: none; box-shadow: 0 8px 22px rgba(74, 127, 229, 0.32); transition: transform 120ms ease, box-shadow 120ms ease; } /* hidden 属性で隠す（HTML 標準の hidden は display:none だが、上の display:inline-flex が打ち消すので明示する）。 FV 動画のように next_lesson_id=null のときの「続きを見る」、CTA未指定時の「カリキュラム詳細」が対象 */ #kr-lesson-modal .modal-cta[hidden] { display: none; } #kr-lesson-modal .modal-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(74, 127, 229, 0.42); } #kr-lesson-modal .modal-cta:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; } /* セカンダリ（白背景・青枠）— 「このカリキュラムの詳細を見る」など補助CTA用 */ #kr-lesson-modal .modal-cta--secondary { background: #ffffff; color: #4A7FE5; border: 1.5px solid #4A7FE5; box-shadow: 0 4px 12px rgba(74, 127, 229, 0.14); } #kr-lesson-modal .modal-cta--secondary:hover { background: rgba(74, 127, 229, 0.06); box-shadow: 0 8px 20px rgba(74, 127, 229, 0.2); } @keyframes kr-modal-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes kr-modal-pop { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* タブレット以下 */ @media (max-width: 720px) { #kr-lesson-modal { padding: 12px; } #kr-lesson-modal .modal-window { max-height: calc(100vh - 24px); border-radius: 14px; } #kr-lesson-modal .modal-info { padding: 18px 20px 22px; } #kr-lesson-modal .modal-title { font-size: 18px; } } @media (prefers-reduced-motion: reduce) { #kr-lesson-modal .modal-backdrop, #kr-lesson-modal .modal-window { animation: none; } } /* === プレビュー状態切替の hidden（display: flex/block を上書き） === */ #kr-lesson-modal .modal-video-placeholder[hidden], #kr-lesson-modal .modal-slides[hidden], #kr-lesson-modal .modal-video-player[hidden], #kr-lesson-modal .modal-video-error[hidden] { display: none; } /* === プレビュー: 動画タイプ === */ /* 親 .modal-video は aspect-ratio:16/9 + overflow:hidden。video が縦長/正方形でも コントロールバー（再生・音量・フルスクリーン）が見切れないように object-fit:contain で letterbox。 */ #kr-lesson-modal .modal-video-player { position: absolute; inset: 0; width: 100%; height: 100%; max-height: 60vh; object-fit: contain; background: #000; display: block; } /* === プレビュー: スライドプレイヤー === */ #kr-lesson-modal .modal-slides { position: relative; width: 100%; background: #0d1732; display: flex; flex-direction: column; } #kr-lesson-modal .modal-slides-image { width: 100%; max-height: 56vh; object-fit: contain; background: #0d1732; display: block; } #kr-lesson-modal .modal-slides-controls { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: rgba(0,0,0,0.5); position: relative; z-index: 1; } #kr-lesson-modal .modal-slides-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.1); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s; } #kr-lesson-modal .modal-slides-btn:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.5); } #kr-lesson-modal .modal-slides-btn--play { background: rgba(74,158,255,0.85); border-color: rgba(74,158,255,1); } #kr-lesson-modal .modal-slides-btn--play:hover { background: rgba(74,158,255,1); } #kr-lesson-modal .modal-slides-counter { margin-left: auto; color: rgba(255,255,255,0.85); font-size: 0.84rem; font-variant-numeric: tabular-nums; } /* === プレビュー: エラー表示 === */ #kr-lesson-modal .modal-video-error { padding: 40px 24px; text-align: center; color: #b3bdd6; background: #f5f7fb; } #kr-lesson-modal .modal-video-error .placeholder-text { color: #ff6b6b; font-weight: 600; } @media (max-width: 600px) { #kr-lesson-modal .modal-slides-image { max-height: 48vh; } } /* === sections\pages\courses-list\default.css === */ /* ========================================================================== sections/pages/courses-list/default.css #kr-courses-list で完全スコープ。 各コースを 2 カラム表示（左：コース情報、右：カリキュラム一覧）。 ========================================================================== */ #kr-courses-list { padding: 64px 24px 96px; background: var(--kr-bg); } #kr-courses-list .page-inner { max-width: var(--kr-container); margin: 0 auto; } #kr-courses-list .page-header { text-align: center; margin-bottom: 48px; } #kr-courses-list .page-eyebrow { font-family: var(--kr-font-accent); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--kr-blue); margin-bottom: 12px; } #kr-courses-list .page-title { font-size: clamp(28px, 4vw, 40px); font-weight: 700; line-height: 1.3; margin-bottom: 16px; color: var(--kr-text); } #kr-courses-list .page-lead { font-size: 15px; line-height: 1.9; color: var(--kr-text-sub); max-width: 640px; margin: 0 auto; } /* === コース行（2 カラム） === */ #kr-courses-list .course-list { display: flex; flex-direction: column; gap: 20px; } /* === ローディング: スケルトン（fetch 中の見た目） === */ #kr-courses-list .course-skeleton { height: 152px; border-radius: var(--kr-radius-lg); border: 1px solid var(--kr-border-soft); background: linear-gradient( 90deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.07) 50%, rgba(0, 0, 0, 0.03) 100% ); background-size: 200% 100%; animation: kr-courses-shimmer 1.4s ease-in-out infinite; } @keyframes kr-courses-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } /* prefers-reduced-motion に配慮: アニメ無効化 */ @media (prefers-reduced-motion: reduce) { #kr-courses-list .course-skeleton { animation: none; } } #kr-courses-list .course-status { margin: 16px auto 0; font-size: 13px; color: var(--kr-text-sub); text-align: center; } #kr-courses-list .course-status[hidden] { display: none; } #kr-courses-list .course-status.is-error { color: #c0392b; } /* === エラー: 取得失敗時 === */ #kr-courses-list .course-error { background: #fff; border: 1px solid var(--kr-border-soft); border-radius: var(--kr-radius-lg); padding: 28px 24px; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; } #kr-courses-list .course-error-text { margin: 0; font-size: 14px; line-height: 1.7; color: var(--kr-text-sub); word-break: break-word; } #kr-courses-list .course-error-retry { display: inline-flex; align-items: center; padding: 10px 20px; font-family: var(--kr-font-accent); font-size: 13px; font-weight: 700; color: #fff; background: var(--kr-blue); border: none; border-radius: var(--kr-radius-pill); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } #kr-courses-list .course-error-retry:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(74, 127, 229, 0.32); } #kr-courses-list .course-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; background: #fff; border: 1px solid var(--kr-border-soft); border-radius: var(--kr-radius-lg); padding: 28px 32px; transition: border-color 0.18s ease, box-shadow 0.18s ease; } #kr-courses-list .course-row:hover { border-color: var(--kr-blue); box-shadow: var(--kr-shadow-md); } /* === 左カラム: コース情報 === */ #kr-courses-list .course-info { display: flex; flex-direction: column; gap: 12px; min-width: 0; } #kr-courses-list .course-title { font-size: 20px; font-weight: 700; line-height: 1.5; color: var(--kr-text); margin: 0; } #kr-courses-list .course-desc { font-size: 13px; line-height: 1.8; color: var(--kr-text-sub); margin: 0; } #kr-courses-list .course-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--kr-text-sub); margin-top: 4px; } #kr-courses-list .course-cta { display: inline-flex; align-items: center; align-self: flex-start; margin-top: 8px; padding: 10px 18px; font-family: var(--kr-font-accent); font-size: 13px; font-weight: 700; color: #fff; background: var(--kr-blue); border: none; border-radius: var(--kr-radius-pill); text-decoration: none; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } #kr-courses-list .course-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(74, 127, 229, 0.32); } /* === 右カラム: カリキュラム === checkbox-hack でアコーディオン化（PC/タブレット = 常時展開・サマリー非表示、 スマホ = サマリーをタップして展開）。
ではなく純CSS で実装 */ #kr-courses-list .course-curriculum { border-left: 1px solid var(--kr-border-soft); padding-left: 28px; min-width: 0; } /* state を持つチェックボックスは常に視覚的に隠す（DOM には残し state を保持） */ #kr-courses-list .curriculum-state { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; clip: rect(0 0 0 0); } /* 既定（PC/タブレット）: サマリー（label）は非表示・本文は常に表示 */ #kr-courses-list .curriculum-summary { display: none; } #kr-courses-list .curriculum-body { display: block; } #kr-courses-list .curriculum-label { font-family: var(--kr-font-accent); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--kr-blue); margin-bottom: 12px; text-transform: uppercase; display: block; } #kr-courses-list .curriculum-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } #kr-courses-list .curriculum-item { font-size: 14px; line-height: 1.6; color: var(--kr-text); } /* セクションタイトルはクリッカブルなリンク。アプリの該当レッスンへ飛ぶ */ #kr-courses-list .curriculum-link { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: baseline; padding: 4px 0; text-decoration: none; color: inherit; border-radius: 6px; transition: background 0.15s ease, color 0.15s ease; } #kr-courses-list .curriculum-link:hover, #kr-courses-list .curriculum-link:hover .curriculum-title { color: var(--kr-blue); } #kr-courses-list .curriculum-link:hover { background: var(--kr-bg-soft); } #kr-courses-list .curriculum-num { font-family: var(--kr-font-accent); font-size: 12px; font-weight: 700; color: var(--kr-blue); background: var(--kr-bg-soft); width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } #kr-courses-list .curriculum-title { font-weight: 500; word-break: break-word; } #kr-courses-list .curriculum-count { font-size: 12px; color: var(--kr-text-sub); white-space: nowrap; } #kr-courses-list .curriculum-empty { font-size: 13px; color: var(--kr-text-sub); margin: 0; } /* === タブレット === */ @media (max-width: 880px) { #kr-courses-list .course-row { grid-template-columns: 1fr; gap: 20px; padding: 24px; } #kr-courses-list .course-curriculum { border-left: none; border-top: 1px solid var(--kr-border-soft); padding-left: 0; padding-top: 18px; } } /* === モバイル: checkbox-hack でアコーディオン化 === */ @media (max-width: 600px) { #kr-courses-list { padding: 40px 16px 64px; } #kr-courses-list .course-row { padding: 20px; } #kr-courses-list .course-title { font-size: 18px; } /* スマホでは label をクリック可能なヘッダとして表示 */ #kr-courses-list .curriculum-summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; margin: 0; cursor: pointer; user-select: none; } #kr-courses-list .curriculum-summary .curriculum-label { margin-bottom: 0; } /* 開閉トグル ▼ を CSS で描画（疑似要素なので JS 不要） */ #kr-courses-list .curriculum-arrow { width: 10px; height: 10px; border-right: 2px solid var(--kr-text-sub); border-bottom: 2px solid var(--kr-text-sub); transform: rotate(45deg); transition: transform 0.2s ease; margin-right: 4px; } /* 既定: 閉じた状態で本文を隠す */ #kr-courses-list .curriculum-body { display: none; } /* 開いた状態: チェックボックスがチェックされたら本文を表示・矢印を回転 */ #kr-courses-list .curriculum-state:checked ~ .curriculum-body { display: block; margin-top: 8px; padding-bottom: 4px; } #kr-courses-list .curriculum-state:checked ~ .curriculum-summary .curriculum-arrow { transform: rotate(225deg); margin-right: 0; margin-bottom: -4px; } #kr-courses-list .curriculum-item { font-size: 13px; } #kr-courses-list .curriculum-link { grid-template-columns: 24px 1fr; } #kr-courses-list .curriculum-count { grid-column: 2; margin-left: 0; font-size: 11px; } } /* ========================================================================== ポップアップ（）— 全レッスン詳細を表示 default.js で showModal() / close() で開閉する ========================================================================== */ dialog.curriculum-dialog { /* 中央寄せ */ max-width: 720px; width: calc(100% - 32px); max-height: calc(100vh - 64px); padding: 0; border: none; border-radius: 16px; background: #fff; color: var(--kr-text); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18); overflow: hidden; /* スクロールは内側 */ } dialog.curriculum-dialog::backdrop { background: rgba(20, 26, 40, 0.55); backdrop-filter: blur(2px); } body.kr-dialog-open { overflow: hidden; } dialog.curriculum-dialog .dialog-inner { display: flex; flex-direction: column; max-height: calc(100vh - 64px); } dialog.curriculum-dialog .dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 28px 16px; border-bottom: 1px solid var(--kr-border-soft); flex-shrink: 0; } dialog.curriculum-dialog .dialog-eyebrow { font-family: var(--kr-font-accent); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--kr-blue); margin: 0 0 6px; } dialog.curriculum-dialog .dialog-title { font-size: 20px; font-weight: 700; line-height: 1.4; margin: 0 0 8px; color: var(--kr-text); } dialog.curriculum-dialog .dialog-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--kr-text-sub); margin: 0; } dialog.curriculum-dialog .dialog-close { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--kr-border-soft); background: #fff; color: var(--kr-text-sub); font-size: 22px; line-height: 1; cursor: pointer; flex-shrink: 0; transition: background 0.15s ease, color 0.15s ease; } dialog.curriculum-dialog .dialog-close:hover { background: var(--kr-bg-soft); color: var(--kr-text); } dialog.curriculum-dialog .dialog-start-cta { display: flex; align-items: center; justify-content: center; margin: 16px 28px 0; padding: 12px 22px; font-family: var(--kr-font-accent); font-size: 14px; font-weight: 700; color: #fff; background: var(--kr-blue); border-radius: var(--kr-radius-pill); text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; } dialog.curriculum-dialog .dialog-start-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(74, 127, 229, 0.32); } dialog.curriculum-dialog .dialog-body { padding: 16px 28px 28px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 18px; } dialog.curriculum-dialog .dialog-section { border: 1px solid var(--kr-border-soft); border-radius: 12px; padding: 14px 16px; background: var(--kr-bg); } dialog.curriculum-dialog .dialog-section-title { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; margin: 0 0 10px; color: var(--kr-text); } dialog.curriculum-dialog .dialog-section-num { font-family: var(--kr-font-accent); font-size: 11px; font-weight: 700; color: var(--kr-blue); background: #fff; border: 1px solid var(--kr-border-soft); width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } dialog.curriculum-dialog .dialog-lesson-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } dialog.curriculum-dialog .dialog-lesson-link { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: baseline; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--kr-text); transition: background 0.15s ease, color 0.15s ease; } dialog.curriculum-dialog .dialog-lesson-link:hover, dialog.curriculum-dialog .dialog-lesson-link:hover .dialog-lesson-title { color: var(--kr-blue); } dialog.curriculum-dialog .dialog-lesson-link:hover { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } dialog.curriculum-dialog .dialog-lesson-num { font-family: var(--kr-font-accent); font-size: 11px; color: var(--kr-text-sub); font-weight: 600; } dialog.curriculum-dialog .dialog-lesson-title { font-size: 13px; line-height: 1.55; word-break: break-word; } dialog.curriculum-dialog .dialog-section-empty, dialog.curriculum-dialog .dialog-empty { font-size: 13px; color: var(--kr-text-sub); margin: 0; } @media (max-width: 600px) { dialog.curriculum-dialog { width: 100%; max-height: 100vh; border-radius: 14px 14px 0 0; margin: auto 0 0; align-self: end; } dialog.curriculum-dialog .dialog-header { padding: 18px 20px 12px; } dialog.curriculum-dialog .dialog-title { font-size: 17px; } dialog.curriculum-dialog .dialog-start-cta { margin: 12px 20px 0; } dialog.curriculum-dialog .dialog-body { padding: 14px 20px 20px; } } /* === sections\pages\course-detail\default.css === */ /* ========================================================================== sections/pages/course-detail/default.css #kr-course-detail で完全スコープ。 ========================================================================== */ #kr-course-detail { padding: 64px 24px 96px; background: var(--kr-bg); } #kr-course-detail .page-inner { max-width: var(--kr-container); margin: 0 auto; } #kr-course-detail .course-header { display: grid; grid-template-columns: 280px 1fr; gap: 40px; align-items: flex-start; margin-bottom: 56px; } #kr-course-detail .course-cover { height: 220px; border-radius: var(--kr-radius-lg); background: linear-gradient(135deg, #E8EFFD, #F4E8FD); display: flex; align-items: center; justify-content: center; } #kr-course-detail .cover-emoji { font-size: 96px; } #kr-course-detail .info-level { display: inline-block; padding: 4px 12px; font-size: 12px; font-weight: 600; background: var(--kr-bg-soft); color: var(--kr-text-sub); border-radius: var(--kr-radius-pill); margin-bottom: 14px; } #kr-course-detail .info-title { font-size: clamp(24px, 3.4vw, 34px); font-weight: 700; line-height: 1.4; color: var(--kr-text); margin-bottom: 14px; } #kr-course-detail .info-desc { font-size: 15px; line-height: 1.9; color: var(--kr-text-sub); margin-bottom: 20px; } #kr-course-detail .info-meta { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; color: var(--kr-text-sub); margin-bottom: 16px; } #kr-course-detail .info-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; } #kr-course-detail .meta-tag { display: inline-block; padding: 4px 10px; font-size: 12px; background: var(--kr-bg-soft); color: var(--kr-text-sub); border-radius: var(--kr-radius-pill); } #kr-course-detail .info-actions { display: flex; gap: 12px; flex-wrap: wrap; } #kr-course-detail .action-cta { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; font-size: 14px; font-weight: 700; color: #fff; background: var(--kr-blue); border-radius: var(--kr-radius-pill); box-shadow: 0 4px 14px rgba(74, 127, 229, 0.32); transition: transform 0.15s ease, box-shadow 0.15s ease; } #kr-course-detail .action-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(74, 127, 229, 0.42); } #kr-course-detail .action-secondary { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; font-size: 14px; font-weight: 600; color: var(--kr-text); background: transparent; border: 1px solid var(--kr-border); border-radius: var(--kr-radius-pill); transition: background 0.15s ease; } #kr-course-detail .action-secondary:hover { background: var(--kr-bg-soft); } #kr-course-detail .curriculum { background: #fff; border: 1px solid var(--kr-border-soft); border-radius: var(--kr-radius-lg); padding: 40px; } #kr-course-detail .curriculum-title { font-size: 20px; font-weight: 700; margin-bottom: 24px; color: var(--kr-text); } #kr-course-detail .curriculum-section { margin-bottom: 28px; } #kr-course-detail .curriculum-section:last-child { margin-bottom: 0; } #kr-course-detail .cs-title { font-size: 15px; font-weight: 700; color: var(--kr-blue); padding-bottom: 8px; border-bottom: 1px solid var(--kr-border-soft); margin-bottom: 12px; } #kr-course-detail .cs-lessons { list-style: none; display: flex; flex-direction: column; gap: 8px; padding: 0; } #kr-course-detail .cs-lesson { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 14px; color: var(--kr-text-sub); background: var(--kr-bg-soft); border-radius: var(--kr-radius-md); } #kr-course-detail .lesson-icon { color: var(--kr-blue); font-size: 10px; } #kr-course-detail .curriculum-empty { color: var(--kr-text-sub); font-size: 14px; } @media (max-width: 800px) { #kr-course-detail .course-header { grid-template-columns: 1fr; gap: 24px; } #kr-course-detail .course-cover { height: 180px; } } @media (max-width: 600px) { #kr-course-detail { padding: 40px 16px 64px; } #kr-course-detail .curriculum { padding: 24px 20px; } } /* === sections\pages\how-to-start\default.css === */ /* ========================================================================== sections/pages/how-to-start/default.css #kr-how-to-start で完全スコープ。 ========================================================================== */ #kr-how-to-start { padding: 64px 24px 96px; background: var(--kr-bg); } #kr-how-to-start .page-inner { max-width: 760px; margin: 0 auto; } #kr-how-to-start .page-header { text-align: center; margin-bottom: 56px; } #kr-how-to-start .page-eyebrow { font-family: var(--kr-font-accent); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--kr-blue); margin-bottom: 12px; } #kr-how-to-start .page-title { font-size: clamp(28px, 4vw, 40px); font-weight: 700; line-height: 1.3; margin-bottom: 16px; color: var(--kr-text); } #kr-how-to-start .page-lead { font-size: 15px; line-height: 1.9; color: var(--kr-text-sub); } #kr-how-to-start .step-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 20px; } #kr-how-to-start .step-item { display: grid; grid-template-columns: 80px 1fr; gap: 24px; background: #fff; border: 1px solid var(--kr-border-soft); border-radius: var(--kr-radius-lg); padding: 28px 32px; align-items: flex-start; } #kr-how-to-start .step-num { font-family: var(--kr-font-accent); font-size: 36px; font-weight: 700; color: var(--kr-blue); line-height: 1; letter-spacing: -0.02em; } #kr-how-to-start .step-title { font-size: 18px; font-weight: 700; color: var(--kr-text); margin-bottom: 10px; line-height: 1.5; } #kr-how-to-start .step-desc { font-size: 14px; line-height: 1.9; color: var(--kr-text-sub); } @media (max-width: 600px) { #kr-how-to-start { padding: 40px 16px 64px; } #kr-how-to-start .step-item { grid-template-columns: 1fr; gap: 4px; padding: 24px 20px; } #kr-how-to-start .step-num { font-size: 28px; } } /* === sections\pages\about\default.css === */ /* ========================================================================== sections/pages/about/default.css #kr-about で完全スコープ。 ========================================================================== */ #kr-about { padding: 64px 24px 96px; background: var(--kr-bg); } #kr-about .page-inner { max-width: 920px; margin: 0 auto; } #kr-about .page-header { text-align: center; margin-bottom: 64px; } #kr-about .page-eyebrow { font-family: var(--kr-font-accent); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--kr-blue); margin-bottom: 12px; } #kr-about .page-title { font-size: clamp(24px, 3.6vw, 36px); font-weight: 700; line-height: 1.5; margin-bottom: 20px; color: var(--kr-text); } #kr-about .page-lead { font-size: 15px; line-height: 2; color: var(--kr-text-sub); max-width: 720px; margin: 0 auto; } /* === コミュニティ紹介ブロック === */ #kr-about .community { background: linear-gradient(180deg, #F6F1FE 0%, #EAF1FD 100%); border: 1px solid rgba(139, 124, 246, 0.18); border-radius: var(--kr-radius-lg); padding: 40px; margin-bottom: 56px; } #kr-about .com-header { margin-bottom: 28px; text-align: center; } #kr-about .com-title { font-size: clamp(20px, 2.6vw, 26px); font-weight: 800; color: var(--kr-text); line-height: 1.5; } #kr-about .com-block { background: #fff; border-radius: var(--kr-radius-md); padding: 24px 26px; margin-bottom: 16px; box-shadow: 0 1px 0 rgba(40, 50, 100, 0.04); } #kr-about .com-block:last-child { margin-bottom: 0; } #kr-about .com-block-title { font-size: 16px; font-weight: 700; color: var(--kr-blue); margin-bottom: 12px; line-height: 1.5; } #kr-about .com-block-body { font-size: 14px; line-height: 1.95; color: var(--kr-text); } #kr-about .com-block-intro { font-size: 13px; line-height: 1.85; color: var(--kr-text-sub); margin-bottom: 16px; } #kr-about .cyc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; } #kr-about .cyc-step { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: flex-start; padding: 14px 16px; background: var(--kr-bg-soft); border-radius: var(--kr-radius-md); } #kr-about .cyc-num { font-family: var(--kr-font-accent); font-size: 22px; font-weight: 800; line-height: 1.1; background: linear-gradient(135deg, #4A7FE5 0%, #8B7CF6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; padding-top: 2px; } #kr-about .cyc-label { font-size: 15px; font-weight: 700; color: var(--kr-text); margin-bottom: 4px; line-height: 1.4; } #kr-about .cyc-desc { font-size: 13px; line-height: 1.85; color: var(--kr-text-sub); } #kr-about .instructor { background: #fff; border: 1px solid var(--kr-border-soft); border-radius: var(--kr-radius-lg); padding: 40px; margin-bottom: 56px; } #kr-about .ins-grid { display: grid; grid-template-columns: 160px 1fr; gap: 28px; align-items: flex-start; } #kr-about .ins-photo img { width: 100%; height: auto; border-radius: var(--kr-radius-lg); display: block; } #kr-about .ins-eyebrow { font-family: var(--kr-font-accent); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; color: var(--kr-blue); margin-bottom: 8px; } #kr-about .ins-name { font-size: 24px; font-weight: 700; color: var(--kr-text); margin-bottom: 4px; } #kr-about .ins-name small { font-size: 14px; font-weight: 500; color: var(--kr-text-sub); margin-left: 6px; } #kr-about .ins-title { font-size: 13px; color: var(--kr-text-sub); margin-bottom: 18px; } #kr-about .ins-stats { display: flex; flex-wrap: wrap; gap: 16px; list-style: none; padding: 0; margin-bottom: 20px; } #kr-about .stat-item { display: flex; flex-direction: column; padding: 12px 18px; background: var(--kr-bg-soft); border-radius: var(--kr-radius-md); min-width: 96px; } #kr-about .stat-value { font-family: var(--kr-font-accent); font-size: 22px; font-weight: 700; color: var(--kr-blue); line-height: 1.2; } #kr-about .stat-value small { font-size: 12px; margin-left: 2px; } #kr-about .stat-label { font-size: 11px; color: var(--kr-text-sub); margin-top: 2px; } #kr-about .ins-summary { font-size: 14px; color: var(--kr-text); margin-bottom: 12px; line-height: 1.7; } #kr-about .ins-bio { font-size: 14px; color: var(--kr-text-sub); line-height: 1.9; } #kr-about .company { background: #fff; border: 1px solid var(--kr-border-soft); border-radius: var(--kr-radius-lg); padding: 40px; } #kr-about .cmp-title { font-size: 20px; font-weight: 700; margin-bottom: 24px; color: var(--kr-text); } #kr-about .cmp-list { display: flex; flex-direction: column; } #kr-about .cmp-row { display: grid; grid-template-columns: 140px 1fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--kr-border-soft); } #kr-about .cmp-row:last-child { border-bottom: none; } #kr-about .cmp-row dt { font-size: 13px; color: var(--kr-text-sub); font-weight: 600; } #kr-about .cmp-row dd { font-size: 14px; color: var(--kr-text); line-height: 1.7; } #kr-about .cmp-businesses { list-style: none; padding: 0; } #kr-about .cmp-businesses li { padding-left: 16px; position: relative; margin-bottom: 4px; } #kr-about .cmp-businesses li::before { content: ''; position: absolute; left: 0; top: 12px; width: 4px; height: 4px; background: var(--kr-blue); border-radius: 50%; } #kr-about .cmp-row dd a { color: var(--kr-blue); text-decoration: underline; } @media (max-width: 720px) { #kr-about .instructor, #kr-about .company, #kr-about .community { padding: 28px 20px; } #kr-about .ins-grid { grid-template-columns: 1fr; gap: 20px; } #kr-about .ins-photo img { max-width: 140px; margin: 0 auto; } #kr-about .cmp-row { grid-template-columns: 1fr; gap: 4px; } #kr-about .com-block { padding: 20px 18px; } #kr-about .cyc-step { grid-template-columns: 36px 1fr; gap: 12px; padding: 12px 14px; } #kr-about .cyc-num { font-size: 18px; } } @media (max-width: 600px) { #kr-about { padding: 40px 16px 64px; } } /* === sections\pages\faq\default.css === */ /* ========================================================================== sections/pages/faq/default.css #kr-faq-page で完全スコープ（TOPの #kr-faq と区別）。 ========================================================================== */ #kr-faq-page { padding: 64px 24px 96px; background: var(--kr-bg); } #kr-faq-page .page-inner { max-width: 760px; margin: 0 auto; } #kr-faq-page .page-header { text-align: center; margin-bottom: 56px; } #kr-faq-page .page-eyebrow { font-family: var(--kr-font-accent); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--kr-blue); margin-bottom: 12px; } #kr-faq-page .page-title { font-size: clamp(28px, 4vw, 40px); font-weight: 700; line-height: 1.3; margin-bottom: 16px; color: var(--kr-text); } #kr-faq-page .page-lead { font-size: 15px; line-height: 1.9; color: var(--kr-text-sub); } #kr-faq-page .faq-group { margin-bottom: 48px; } #kr-faq-page .faq-group:last-child { margin-bottom: 0; } #kr-faq-page .group-title { font-size: 18px; font-weight: 700; color: var(--kr-blue); padding-bottom: 10px; border-bottom: 2px solid var(--kr-blue); margin-bottom: 18px; } #kr-faq-page .qa-list { display: flex; flex-direction: column; gap: 12px; } #kr-faq-page .qa-item { background: #fff; border: 1px solid var(--kr-border-soft); border-radius: var(--kr-radius-md); overflow: hidden; } #kr-faq-page .qa-item[open] { border-color: var(--kr-blue); } #kr-faq-page .qa-q { cursor: pointer; padding: 18px 22px; padding-right: 50px; font-size: 15px; font-weight: 600; color: var(--kr-text); list-style: none; position: relative; line-height: 1.6; } #kr-faq-page .qa-q::-webkit-details-marker { display: none; } #kr-faq-page .qa-q::after { content: '+'; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 300; color: var(--kr-blue); transition: transform 0.2s ease; } #kr-faq-page .qa-item[open] .qa-q::after { content: '−'; } #kr-faq-page .qa-a { padding: 0 22px 20px 22px; font-size: 14px; line-height: 1.9; color: var(--kr-text-sub); border-top: 1px solid var(--kr-border-soft); padding-top: 16px; margin-top: 0; } @media (max-width: 600px) { #kr-faq-page { padding: 40px 16px 64px; } #kr-faq-page .qa-q { padding: 16px 18px; padding-right: 44px; font-size: 14px; } #kr-faq-page .qa-a { padding: 0 18px 16px 18px; padding-top: 14px; } } /* === sections\pages\privacy\default.css === */ /* ========================================================================== sections/pages/privacy/default.css #kr-privacy で完全スコープ。 ========================================================================== */ #kr-privacy { padding: 64px 24px 96px; background: var(--kr-bg); } #kr-privacy .page-inner { max-width: 760px; margin: 0 auto; } #kr-privacy .legal-title { font-size: clamp(26px, 3.6vw, 36px); font-weight: 700; line-height: 1.3; margin-bottom: 8px; color: var(--kr-text); } #kr-privacy .legal-meta { font-size: 13px; color: var(--kr-text-sub); margin-bottom: 40px; font-family: var(--kr-font-accent); } #kr-privacy .legal-section { margin-bottom: 36px; } #kr-privacy .legal-section h2 { font-size: 17px; font-weight: 700; color: var(--kr-blue); margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--kr-border-soft); } #kr-privacy .legal-section p { font-size: 14px; color: var(--kr-text-sub); margin-bottom: 12px; line-height: 1.9; } #kr-privacy .legal-section ul { list-style: none; padding: 0; margin: 0 0 12px 0; } #kr-privacy .legal-section ul li { position: relative; padding-left: 18px; margin-bottom: 8px; font-size: 14px; color: var(--kr-text-sub); line-height: 1.9; } #kr-privacy .legal-section ul li::before { content: ''; position: absolute; left: 0; top: 12px; width: 5px; height: 5px; background: var(--kr-blue); border-radius: 50%; } #kr-privacy .legal-section strong { color: var(--kr-text); } #kr-privacy .legal-contact { margin-top: 56px; padding: 28px 32px; background: #fff; border: 1px solid var(--kr-border-soft); border-radius: var(--kr-radius-lg); } #kr-privacy .legal-contact h3 { font-family: var(--kr-font-accent); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--kr-blue); margin-bottom: 12px; } #kr-privacy .legal-contact p { font-size: 13px; color: var(--kr-text-sub); margin-bottom: 6px; line-height: 1.7; } #kr-privacy .legal-contact strong { color: var(--kr-text); } #kr-privacy .legal-contact a { color: var(--kr-blue); text-decoration: underline; } @media (max-width: 600px) { #kr-privacy { padding: 40px 16px 64px; } #kr-privacy .legal-contact { padding: 22px 20px; } } /* === sections\pages\legal\default.css === */ /* ========================================================================== sections/pages/legal/default.css #kr-legal で完全スコープ。 ========================================================================== */ #kr-legal { padding: 64px 24px 96px; background: var(--kr-bg); } #kr-legal .page-inner { max-width: 820px; margin: 0 auto; } #kr-legal .legal-title { font-size: clamp(26px, 3.6vw, 36px); font-weight: 700; line-height: 1.3; margin-bottom: 8px; color: var(--kr-text); } #kr-legal .legal-meta { font-size: 13px; color: var(--kr-text-sub); margin-bottom: 24px; font-family: var(--kr-font-accent); } #kr-legal .legal-intro { font-size: 14px; color: var(--kr-text-sub); margin-bottom: 36px; line-height: 1.9; } #kr-legal .legal-table { background: #fff; border: 1px solid var(--kr-border-soft); border-radius: var(--kr-radius-lg); overflow: hidden; } #kr-legal .legal-row { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 22px 28px; border-bottom: 1px solid var(--kr-border-soft); } #kr-legal .legal-row:last-child { border-bottom: none; } #kr-legal .row-label { font-size: 13px; font-weight: 700; color: var(--kr-blue); letter-spacing: 0.04em; } #kr-legal .row-value { font-size: 14px; color: var(--kr-text); line-height: 1.9; } #kr-legal .row-value strong { font-weight: 700; } #kr-legal .row-value ul { list-style: none; padding: 0; margin: 0; } #kr-legal .row-value ul li { position: relative; padding-left: 16px; margin-bottom: 6px; } #kr-legal .row-value ul li::before { content: ''; position: absolute; left: 0; top: 12px; width: 4px; height: 4px; background: var(--kr-blue); border-radius: 50%; opacity: 0.7; } #kr-legal .row-value a { color: var(--kr-blue); text-decoration: underline; } @media (max-width: 640px) { #kr-legal { padding: 40px 16px 64px; } #kr-legal .legal-row { grid-template-columns: 1fr; gap: 6px; padding: 20px 22px; } #kr-legal .row-label { font-size: 12px; } } /* === sections\pages\howto-index\default.css === */ /* ========================================================================== sections/pages/howto-index/default.css #kr-howto-index で完全スコープ。 ========================================================================== */ #kr-howto-index { padding: 64px 24px 96px; background: var(--kr-bg); } #kr-howto-index .page-inner { max-width: var(--kr-container); margin: 0 auto; } #kr-howto-index .page-header { text-align: center; margin-bottom: 56px; } #kr-howto-index .page-eyebrow { font-family: var(--kr-font-accent); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--kr-blue); margin-bottom: 12px; } #kr-howto-index .page-title { font-size: clamp(28px, 4vw, 40px); font-weight: 700; line-height: 1.3; margin-bottom: 16px; color: var(--kr-text); } #kr-howto-index .page-lead { font-size: 15px; line-height: 1.9; color: var(--kr-text-sub); max-width: 640px; margin: 0 auto; } #kr-howto-index .empty-state { text-align: center; padding: 80px 0; color: var(--kr-text-sub); font-size: 15px; } /* カテゴリタブ（カテゴリが1つ以上あるときだけ render される） */ #kr-howto-index .howto-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 32px; } #kr-howto-index .howto-tab { appearance: none; -webkit-appearance: none; background: #fff; border: 1px solid var(--kr-border-soft); color: var(--kr-text-sub); padding: 8px 18px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; font-family: inherit; line-height: 1.4; } #kr-howto-index .howto-tab:hover { border-color: var(--kr-blue); color: var(--kr-blue); } #kr-howto-index .howto-tab.is-active { background: var(--kr-blue); border-color: var(--kr-blue); color: #fff; } #kr-howto-index .howto-empty-cat { text-align: center; padding: 40px 0; color: var(--kr-text-sub); font-size: 14px; } #kr-howto-index .howto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; margin-bottom: 32px; } #kr-howto-index .howto-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--kr-border-soft); border-radius: var(--kr-radius-lg); overflow: hidden; text-decoration: none; color: inherit; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } #kr-howto-index .howto-card:hover { transform: translateY(-4px); box-shadow: var(--kr-shadow-md); border-color: var(--kr-blue); } #kr-howto-index .card-thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--kr-bg-soft); display: block; } #kr-howto-index .card-thumb--placeholder { display: flex; align-items: center; justify-content: center; font-size: 48px; background: linear-gradient(135deg, #E8EFFD, #F4E8FD); } #kr-howto-index .card-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; } #kr-howto-index .card-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } #kr-howto-index .card-meta { font-family: var(--kr-font-accent); font-size: 11px; color: var(--kr-text-sub); letter-spacing: 0.04em; margin: 0; } #kr-howto-index .card-category { font-size: 11px; font-weight: 600; color: var(--kr-blue); background: rgba(74, 158, 255, 0.08); padding: 2px 10px; border-radius: 999px; letter-spacing: 0.02em; } #kr-howto-index .card-title { font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--kr-text); } #kr-howto-index .card-excerpt { font-size: 13px; line-height: 1.7; color: var(--kr-text-sub); flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } #kr-howto-index .card-cta { font-size: 12px; font-weight: 600; color: var(--kr-blue); margin-top: 8px; border-top: 1px solid var(--kr-border-soft); padding-top: 12px; } #kr-howto-index .info-note { font-size: 12px; color: var(--kr-text-sub); text-align: center; line-height: 1.7; padding: 20px; background: var(--kr-bg-soft); border-radius: var(--kr-radius-md); } @media (max-width: 600px) { #kr-howto-index { padding: 40px 16px 64px; } #kr-howto-index .howto-grid { grid-template-columns: 1fr; } } /* === sections\pages\howto-article\default.css === */ /* ========================================================================== sections/pages/howto-article/default.css #kr-howto-article で完全スコープ。 ========================================================================== */ #kr-howto-article { padding: 64px 24px 96px; background: var(--kr-bg); } #kr-howto-article .page-inner { max-width: 720px; margin: 0 auto; } #kr-howto-article .article-header { margin-bottom: 48px; padding-bottom: 32px; border-bottom: 1px solid var(--kr-border-soft); } #kr-howto-article .article-eyebrow { font-family: var(--kr-font-accent); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--kr-blue); margin-bottom: 14px; } #kr-howto-article .article-title { font-size: clamp(24px, 3.6vw, 34px); font-weight: 700; line-height: 1.5; color: var(--kr-text); margin-bottom: 16px; } #kr-howto-article .article-meta { font-family: var(--kr-font-accent); font-size: 13px; color: var(--kr-text-sub); letter-spacing: 0.02em; } /* === Article Body (Markdown化された本文) === */ #kr-howto-article .article-body { font-size: 16px; line-height: 1.95; color: var(--kr-text); position: relative; } #kr-howto-article.is-truncated .article-body { /* truncated 時はフェードアウト用の余白 */ padding-bottom: 40px; } #kr-howto-article .article-body p { margin: 0 0 1.4em; } #kr-howto-article .article-body h2 { font-size: 22px; font-weight: 700; color: var(--kr-text); margin: 2.2em 0 0.8em; padding-bottom: 0.4em; border-bottom: 2px solid var(--kr-blue); line-height: 1.5; } #kr-howto-article .article-body h3 { font-size: 18px; font-weight: 700; color: var(--kr-text); margin: 2em 0 0.6em; line-height: 1.5; } #kr-howto-article .article-body strong { font-weight: 700; color: var(--kr-blue-deep); } #kr-howto-article .article-body em { font-style: italic; } #kr-howto-article .article-body hr { border: none; border-top: 1px solid var(--kr-border-soft); margin: 2.4em 0; } #kr-howto-article .article-body blockquote { margin: 1.6em 0; padding: 16px 24px; background: var(--kr-bg-soft); border-left: 4px solid var(--kr-blue); border-radius: 0 var(--kr-radius-md) var(--kr-radius-md) 0; } #kr-howto-article .article-body blockquote p { margin: 0; } #kr-howto-article .article-body ul, #kr-howto-article .article-body ol { margin: 1.2em 0; padding-left: 1.5em; } #kr-howto-article .article-body li { margin-bottom: 0.4em; } #kr-howto-article .article-body a { color: var(--kr-blue); text-decoration: underline; text-underline-offset: 3px; } #kr-howto-article .article-body a:hover { color: var(--kr-blue-deep); } #kr-howto-article .article-body img { max-width: 100%; height: auto; border-radius: var(--kr-radius-md); margin: 1.4em 0; display: block; } #kr-howto-article .article-body code { background: var(--kr-bg-soft); padding: 2px 8px; border-radius: 4px; font-family: var(--kr-font-mono, ui-monospace, monospace); font-size: 0.9em; } #kr-howto-article .article-body pre { background: #0F172A; color: #E2E8F0; padding: 18px 22px; border-radius: var(--kr-radius-md); overflow-x: auto; margin: 1.4em 0; } #kr-howto-article .article-body pre code { background: transparent; padding: 0; color: inherit; } /* === Paywall Notice === */ #kr-howto-article .paywall-notice { position: relative; margin-top: -60px; padding: 80px 32px 36px; background: linear-gradient(180deg, transparent, var(--kr-bg-soft) 60px, var(--kr-bg-soft)); border-radius: var(--kr-radius-lg); text-align: center; } #kr-howto-article .paywall-fade { position: absolute; top: 0; left: 0; right: 0; height: 80px; background: linear-gradient(180deg, var(--kr-bg) 0%, transparent 100%); pointer-events: none; margin-top: -80px; } #kr-howto-article .paywall-eyebrow { font-family: var(--kr-font-accent); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--kr-blue); margin-bottom: 12px; } #kr-howto-article .paywall-title { font-size: 22px; font-weight: 700; color: var(--kr-text); margin-bottom: 12px; line-height: 1.5; } #kr-howto-article .paywall-desc { font-size: 14px; line-height: 1.9; color: var(--kr-text-sub); margin-bottom: 24px; } #kr-howto-article .paywall-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; } #kr-howto-article .pw-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 26px; font-size: 14px; font-weight: 700; border-radius: var(--kr-radius-pill); transition: transform 0.15s ease, box-shadow 0.15s ease; white-space: nowrap; } #kr-howto-article .pw-btn--primary { color: #fff; background: var(--kr-blue); box-shadow: 0 4px 14px rgba(74, 127, 229, 0.32); } #kr-howto-article .pw-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(74, 127, 229, 0.42); } #kr-howto-article .pw-btn--ghost { color: var(--kr-text); background: transparent; border: 1px solid var(--kr-border); } #kr-howto-article .pw-btn--ghost:hover { background: rgba(255, 255, 255, 0.6); } #kr-howto-article .back-link { text-align: center; margin-top: 40px; font-size: 14px; } #kr-howto-article .back-link a { color: var(--kr-blue); text-decoration: underline; } @media (max-width: 600px) { #kr-howto-article { padding: 40px 16px 64px; } #kr-howto-article .article-body { font-size: 15px; } #kr-howto-article .article-body h2 { font-size: 19px; } #kr-howto-article .article-body h3 { font-size: 16px; } #kr-howto-article .paywall-notice { padding: 70px 22px 30px; } #kr-howto-article .paywall-actions { flex-direction: column; } #kr-howto-article .pw-btn { width: 100%; } } /* === sections\pages\events-list\default.css === */ /* ========================================================================== sections/pages/events-list/default.css #kr-events-list で完全スコープ。 イベントカード一覧。スクロール最適化のため2カラム → スマホ1カラム。 ========================================================================== */ #kr-events-list { padding: 64px 24px 96px; background: var(--kr-bg); } #kr-events-list .page-inner { max-width: var(--kr-container); margin: 0 auto; } #kr-events-list .page-header { text-align: center; margin-bottom: 48px; } #kr-events-list .page-eyebrow { font-family: var(--kr-font-accent); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--kr-blue); margin-bottom: 12px; } #kr-events-list .page-title { font-size: clamp(28px, 4vw, 40px); font-weight: 700; line-height: 1.3; margin-bottom: 16px; color: var(--kr-text); } #kr-events-list .page-lead { font-size: 15px; line-height: 1.9; color: var(--kr-text-sub); max-width: 640px; margin: 0 auto; } /* === イベントカードグリッド === */ #kr-events-list .events-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } /* === スケルトン === */ #kr-events-list .event-skeleton { height: 220px; border-radius: var(--kr-radius-lg); border: 1px solid var(--kr-border-soft); background: linear-gradient( 90deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.07) 50%, rgba(0, 0, 0, 0.03) 100% ); background-size: 200% 100%; animation: kr-events-shimmer 1.4s ease-in-out infinite; } @keyframes kr-events-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } @media (prefers-reduced-motion: reduce) { #kr-events-list .event-skeleton { animation: none; } } #kr-events-list .events-status { margin: 16px auto 0; font-size: 13px; color: var(--kr-text-sub); text-align: center; } #kr-events-list .events-status[hidden] { display: none; } /* === 空状態 === */ #kr-events-list .events-empty { grid-column: 1 / -1; text-align: center; padding: 64px 24px; font-size: 14px; color: var(--kr-text-sub); background: #fff; border: 1px solid var(--kr-border-soft); border-radius: var(--kr-radius-lg); } /* === エラー === */ #kr-events-list .event-error { grid-column: 1 / -1; background: #fff; border: 1px solid var(--kr-border-soft); border-radius: var(--kr-radius-lg); padding: 28px 24px; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; } #kr-events-list .event-error-text { margin: 0; font-size: 14px; line-height: 1.7; color: var(--kr-text-sub); word-break: break-word; } #kr-events-list .event-error-retry { display: inline-flex; align-items: center; padding: 10px 20px; font-family: var(--kr-font-accent); font-size: 13px; font-weight: 700; color: #fff; background: var(--kr-blue); border: none; border-radius: var(--kr-radius-pill); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } #kr-events-list .event-error-retry:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(74, 127, 229, 0.32); } /* === イベントカード === */ #kr-events-list .event-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--kr-border-soft); border-radius: var(--kr-radius-lg); overflow: hidden; text-decoration: none; color: inherit; transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } #kr-events-list .event-card:hover { border-color: var(--kr-blue); box-shadow: var(--kr-shadow-md); transform: translateY(-2px); } #kr-events-list .event-card__thumb { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--kr-bg-soft); } #kr-events-list .event-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } #kr-events-list .event-card__body { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; } #kr-events-list .event-card__badges { display: flex; flex-wrap: wrap; gap: 6px; } #kr-events-list .event-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; font-family: var(--kr-font-accent); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; border-radius: var(--kr-radius-pill); white-space: nowrap; } #kr-events-list .event-badge--open { background: rgba(74, 127, 229, 0.12); color: var(--kr-blue-deep, #3360C4); } #kr-events-list .event-badge--finalized { background: rgba(34, 145, 80, 0.12); color: #1e7a3f; } #kr-events-list .event-badge--full { background: rgba(180, 50, 50, 0.1); color: #b43232; } #kr-events-list .event-badge--locked { background: rgba(240, 140, 58, 0.12); color: #c9651d; } #kr-events-list .event-badge--past { background: rgba(120, 120, 120, 0.12); color: #6b7280; } #kr-events-list .event-badge-icon { font-size: 12px; line-height: 1; } #kr-events-list .event-card__title { font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--kr-text); margin: 0; word-break: break-word; } #kr-events-list .event-card__date { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; color: var(--kr-text); font-weight: 600; } #kr-events-list .event-card__date--deadline { font-weight: 500; color: var(--kr-text-sub); } #kr-events-list .event-card__date-icon { font-size: 14px; line-height: 1; } #kr-events-list .event-card__date-main { font-family: var(--kr-font-accent); } #kr-events-list .event-card__date-relative { font-size: 11px; font-family: var(--kr-font-accent); font-weight: 700; color: var(--kr-blue); background: rgba(74, 127, 229, 0.08); padding: 2px 8px; border-radius: var(--kr-radius-pill); } #kr-events-list .event-card__meta-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--kr-text-sub); } #kr-events-list .event-card__meta-icon { font-size: 13px; line-height: 1; } #kr-events-list .event-card__desc { font-size: 13px; line-height: 1.7; color: var(--kr-text-sub); margin: 4px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } #kr-events-list .event-card__cta { margin-top: auto; padding-top: 8px; font-family: var(--kr-font-accent); font-size: 13px; font-weight: 700; color: var(--kr-blue); align-self: flex-end; } /* === 「終了したイベント」セクション === */ #kr-events-list .events-section-heading { margin: 48px 0 18px; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; color: var(--kr-text-sub); font-family: var(--kr-font-accent); text-transform: uppercase; padding-bottom: 8px; border-bottom: 1px solid var(--kr-border-soft); } #kr-events-list .events-list--past { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; opacity: 0.78; } #kr-events-list .events-list--past .event-card { filter: grayscale(0.2); } #kr-events-list .events-list--past .event-card:hover { filter: none; opacity: 1; } #kr-events-list .events-empty--inline { margin-bottom: 0; padding: 32px 24px; } /* === タブレット: 2カラム === */ @media (max-width: 1024px) { #kr-events-list .events-list, #kr-events-list .events-list--past { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } } /* === スマホ: 1カラム === */ @media (max-width: 600px) { #kr-events-list { padding: 40px 16px 64px; } #kr-events-list .events-list, #kr-events-list .events-list--past { grid-template-columns: 1fr; gap: 16px; } #kr-events-list .event-card__body { padding: 16px 18px 18px; } #kr-events-list .event-card__title { font-size: 16px; } } /* === sections\pages\event-detail\default.css === */ /* ========================================================================== sections/pages/event-detail/default.css #kr-event-detail で完全スコープ。 ========================================================================== */ #kr-event-detail { padding: 64px 24px 96px; background: var(--kr-bg); } #kr-event-detail .page-inner { max-width: 800px; margin: 0 auto; } /* === 戻るリンク === */ #kr-event-detail .event-detail__back { margin-bottom: 20px; } #kr-event-detail .event-detail__back-link { display: inline-flex; align-items: center; padding: 6px 12px; font-family: var(--kr-font-accent); font-size: 13px; font-weight: 600; color: var(--kr-text-sub); text-decoration: none; border-radius: var(--kr-radius-pill); transition: color 0.15s ease, background 0.15s ease; } #kr-event-detail .event-detail__back-link:hover { background: var(--kr-bg-soft); color: var(--kr-text); } /* === ヒーロー（タイトル + バッジ） === */ #kr-event-detail .event-detail__hero { margin-bottom: 28px; } #kr-event-detail .event-detail__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; min-height: 22px; } #kr-event-detail .event-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; font-family: var(--kr-font-accent); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; border-radius: var(--kr-radius-pill); white-space: nowrap; } #kr-event-detail .event-badge--open { background: rgba(74, 127, 229, 0.12); color: var(--kr-blue-deep, #3360C4); } #kr-event-detail .event-badge--finalized { background: rgba(34, 145, 80, 0.12); color: #1e7a3f; } #kr-event-detail .event-badge--full { background: rgba(180, 50, 50, 0.1); color: #b43232; } #kr-event-detail .event-badge--locked { background: rgba(240, 140, 58, 0.12); color: #c9651d; } #kr-event-detail .event-badge-icon { font-size: 12px; line-height: 1; } #kr-event-detail .event-detail__title { font-size: clamp(24px, 3.6vw, 32px); font-weight: 700; line-height: 1.4; margin: 0 0 14px; color: var(--kr-text); word-break: break-word; } #kr-event-detail .event-detail__desc { font-size: 15px; line-height: 1.9; color: var(--kr-text-sub); margin: 0; white-space: pre-wrap; word-break: break-word; } /* === 画像 === */ #kr-event-detail .event-detail__images { margin-bottom: 28px; border-radius: var(--kr-radius-lg); overflow: hidden; background: var(--kr-bg-soft); } #kr-event-detail .event-detail__image-item { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; } #kr-event-detail .event-detail__image-item img { width: 100%; height: 100%; object-fit: cover; display: block; } #kr-event-detail .event-detail__images--multi { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; background: transparent; border-radius: 0; overflow: visible; } #kr-event-detail .event-detail__images--multi .event-detail__image-item { border-radius: var(--kr-radius-lg); } /* === 情報カード（日時・場所・参加人数） === */ #kr-event-detail .event-detail__info-card { background: #fff; border: 1px solid var(--kr-border-soft); border-radius: var(--kr-radius-lg); padding: 22px 24px; margin-bottom: 28px; display: flex; flex-direction: column; gap: 14px; } #kr-event-detail .event-detail__info-row { display: flex; gap: 12px; align-items: flex-start; } #kr-event-detail .event-detail__info-icon { font-size: 18px; line-height: 1.4; flex-shrink: 0; } #kr-event-detail .event-detail__info-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-size: 14px; line-height: 1.6; color: var(--kr-text); min-width: 0; } #kr-event-detail .event-detail__info-label { font-size: 12px; color: var(--kr-text-sub); font-weight: 600; width: 100%; } #kr-event-detail .event-detail__info-main { font-family: var(--kr-font-accent); font-weight: 600; word-break: break-word; } #kr-event-detail .event-detail__info-relative { font-size: 11px; font-family: var(--kr-font-accent); font-weight: 700; color: var(--kr-blue); background: rgba(74, 127, 229, 0.08); padding: 2px 8px; border-radius: var(--kr-radius-pill); } #kr-event-detail .event-detail__info-link { color: var(--kr-blue); text-decoration: underline; word-break: break-all; } /* === CTA === */ #kr-event-detail .event-detail__cta { background: #fff; border: 1px solid var(--kr-border-soft); border-radius: var(--kr-radius-lg); padding: 24px; text-align: center; margin-bottom: 32px; } #kr-event-detail .event-detail__cta-btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; font-family: var(--kr-font-accent); font-size: 15px; font-weight: 700; color: #fff; background: var(--kr-blue); border-radius: var(--kr-radius-pill); text-decoration: none; box-shadow: 0 4px 14px rgba(74, 127, 229, 0.32); transition: transform 0.15s ease, box-shadow 0.15s ease; } #kr-event-detail .event-detail__cta-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(74, 127, 229, 0.42); } #kr-event-detail .event-detail__cta-disabled { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; font-family: var(--kr-font-accent); font-size: 14px; font-weight: 700; color: var(--kr-text-sub); background: var(--kr-bg-soft); border-radius: var(--kr-radius-pill); } #kr-event-detail .event-detail__cta-note { margin: 12px 0 0; font-size: 12px; line-height: 1.7; color: var(--kr-text-sub); } /* === 候補日リスト === */ #kr-event-detail .event-detail__options { background: #fff; border: 1px solid var(--kr-border-soft); border-radius: var(--kr-radius-lg); padding: 24px; margin-bottom: 28px; } #kr-event-detail .event-detail__options-title { font-size: 16px; font-weight: 700; margin: 0 0 8px; color: var(--kr-text); } #kr-event-detail .event-detail__options-lead { font-size: 12px; line-height: 1.7; color: var(--kr-text-sub); margin: 0 0 16px; } #kr-event-detail .event-detail__options-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } #kr-event-detail .event-detail__option-item { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 12px 14px; background: var(--kr-bg-soft); border-radius: var(--kr-radius-md); font-size: 13px; line-height: 1.6; } #kr-event-detail .event-detail__option-date { font-family: var(--kr-font-accent); font-weight: 600; color: var(--kr-text); } #kr-event-detail .event-detail__option-note { font-size: 12px; color: var(--kr-text-sub); } /* === ローディング / 状態表示 === */ #kr-event-detail .event-detail__loading { display: flex; flex-direction: column; gap: 14px; margin: 28px 0; } #kr-event-detail .event-skeleton { height: 80px; border-radius: var(--kr-radius-lg); border: 1px solid var(--kr-border-soft); background: linear-gradient( 90deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.07) 50%, rgba(0, 0, 0, 0.03) 100% ); background-size: 200% 100%; animation: kr-event-detail-shimmer 1.4s ease-in-out infinite; } @keyframes kr-event-detail-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } @media (prefers-reduced-motion: reduce) { #kr-event-detail .event-skeleton { animation: none; } } #kr-event-detail .event-detail__status { font-size: 13px; color: var(--kr-text-sub); text-align: center; } #kr-event-detail .event-detail__status[hidden] { display: none; } /* === エラー === */ #kr-event-detail .event-error { background: #fff; border: 1px solid var(--kr-border-soft); border-radius: var(--kr-radius-lg); padding: 28px 24px; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; margin-top: 12px; } #kr-event-detail .event-error-text { margin: 0; font-size: 14px; line-height: 1.7; color: var(--kr-text-sub); } #kr-event-detail .event-error-retry { padding: 10px 20px; font-family: var(--kr-font-accent); font-size: 13px; font-weight: 700; color: #fff; background: var(--kr-blue); border: none; border-radius: var(--kr-radius-pill); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } #kr-event-detail .event-error-retry:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(74, 127, 229, 0.32); } /* === Not Found === */ #kr-event-detail .event-detail__not-found { text-align: center; padding: 32px 24px; background: #fff; border: 1px solid var(--kr-border-soft); border-radius: var(--kr-radius-lg); } /* === レスポンシブ === */ @media (max-width: 600px) { #kr-event-detail { padding: 40px 16px 64px; } #kr-event-detail .event-detail__info-card, #kr-event-detail .event-detail__cta, #kr-event-detail .event-detail__options { padding: 18px; } #kr-event-detail .event-detail__cta-btn { width: 100%; padding: 14px 20px; } } /* === sections\pages\story-index\default.css === */ /* ========================================================================== sections/pages/story-index/default.css #kr-story-index で完全スコープ。 ========================================================================== */ #kr-story-index { padding: 64px 24px 96px; background: var(--kr-bg); } #kr-story-index .page-inner { max-width: 820px; margin: 0 auto; } #kr-story-index .page-header { text-align: center; margin-bottom: 56px; } #kr-story-index .page-eyebrow { font-family: var(--kr-font-accent); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--kr-blue); margin-bottom: 12px; } #kr-story-index .page-title { font-size: clamp(28px, 4vw, 40px); font-weight: 700; line-height: 1.3; margin-bottom: 16px; color: var(--kr-text); } #kr-story-index .page-lead { font-size: 15px; line-height: 1.9; color: var(--kr-text-sub); } #kr-story-index .story-list { display: flex; flex-direction: column; gap: 16px; } #kr-story-index .story-card { display: grid; grid-template-columns: 80px 1fr 40px; gap: 24px; align-items: center; background: #fff; border: 1px solid var(--kr-border-soft); border-radius: var(--kr-radius-lg); padding: 28px 32px; text-decoration: none; color: inherit; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } #kr-story-index .story-card:hover { transform: translateY(-2px); box-shadow: var(--kr-shadow-md); border-color: var(--kr-blue); } #kr-story-index .story-card:hover .card-arrow { transform: translateX(4px); color: var(--kr-blue); } #kr-story-index .card-num { font-family: var(--kr-font-accent); font-size: 38px; font-weight: 700; color: var(--kr-blue); line-height: 1; letter-spacing: -0.02em; } #kr-story-index .card-title { font-size: 18px; font-weight: 700; color: var(--kr-text); margin-bottom: 8px; line-height: 1.5; } #kr-story-index .card-desc { font-size: 13px; color: var(--kr-text-sub); line-height: 1.7; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #kr-story-index .card-meta { font-family: var(--kr-font-accent); font-size: 11px; color: var(--kr-text-sub); letter-spacing: 0.04em; } #kr-story-index .card-arrow { font-size: 22px; color: var(--kr-text-sub); transition: transform 0.2s ease, color 0.2s ease; text-align: right; } @media (max-width: 600px) { #kr-story-index { padding: 40px 16px 64px; } #kr-story-index .story-card { grid-template-columns: 60px 1fr 24px; gap: 16px; padding: 22px 20px; } #kr-story-index .card-num { font-size: 28px; } #kr-story-index .card-title { font-size: 16px; } } /* === sections\pages\story-article\default.css === */ /* ========================================================================== sections/pages/story-article/default.css #kr-story-article で完全スコープ。 ========================================================================== */ #kr-story-article { padding: 64px 24px 96px; background: var(--kr-bg); } #kr-story-article .page-inner { max-width: 720px; margin: 0 auto; } #kr-story-article .article-header { margin-bottom: 48px; padding-bottom: 32px; border-bottom: 1px solid var(--kr-border-soft); } #kr-story-article .article-eyebrow { font-family: var(--kr-font-accent); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--kr-blue); margin-bottom: 14px; } #kr-story-article .article-title { font-size: clamp(24px, 3.6vw, 34px); font-weight: 700; line-height: 1.5; color: var(--kr-text); margin-bottom: 16px; letter-spacing: -0.01em; } #kr-story-article .article-meta { font-family: var(--kr-font-accent); font-size: 13px; color: var(--kr-text-sub); letter-spacing: 0.02em; } /* === Article Body (Markdown化された本文) === */ #kr-story-article .article-body { font-size: 16px; line-height: 1.95; color: var(--kr-text); } #kr-story-article .article-body p { margin: 0 0 1.4em; } #kr-story-article .article-body h2 { font-size: 22px; font-weight: 700; color: var(--kr-text); margin: 2.2em 0 0.8em; padding-bottom: 0.4em; border-bottom: 2px solid var(--kr-blue); line-height: 1.5; } #kr-story-article .article-body h3 { font-size: 18px; font-weight: 700; color: var(--kr-text); margin: 2em 0 0.6em; line-height: 1.5; } #kr-story-article .article-body strong { font-weight: 700; color: var(--kr-blue-deep); } #kr-story-article .article-body em { font-style: italic; color: var(--kr-text); } #kr-story-article .article-body hr { border: none; border-top: 1px solid var(--kr-border-soft); margin: 2.4em 0; } #kr-story-article .article-body blockquote { margin: 1.6em 0; padding: 16px 24px; background: var(--kr-bg-soft); border-left: 4px solid var(--kr-blue); border-radius: 0 var(--kr-radius-md) var(--kr-radius-md) 0; color: var(--kr-text); font-style: normal; } #kr-story-article .article-body blockquote p { margin: 0; } #kr-story-article .article-body ul, #kr-story-article .article-body ol { margin: 1.2em 0; padding-left: 1.5em; } #kr-story-article .article-body li { margin-bottom: 0.4em; } #kr-story-article .article-body a { color: var(--kr-blue); text-decoration: underline; text-underline-offset: 3px; } #kr-story-article .article-body a:hover { color: var(--kr-blue-deep); } #kr-story-article .article-body code { background: var(--kr-bg-soft); padding: 2px 8px; border-radius: 4px; font-family: var(--kr-font-mono, ui-monospace, monospace); font-size: 0.9em; } #kr-story-article .article-body pre { background: #0F172A; color: #E2E8F0; padding: 18px 22px; border-radius: var(--kr-radius-md); overflow-x: auto; margin: 1.4em 0; } #kr-story-article .article-body pre code { background: transparent; padding: 0; color: inherit; } /* === 前後記事ナビ === */ #kr-story-article .article-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--kr-border-soft); } #kr-story-article .nav-link { display: flex; flex-direction: column; gap: 6px; padding: 18px 22px; border: 1px solid var(--kr-border-soft); border-radius: var(--kr-radius-md); text-decoration: none; color: inherit; background: #fff; transition: border-color 0.15s ease, transform 0.15s ease; } #kr-story-article .nav-link:hover { border-color: var(--kr-blue); transform: translateY(-2px); } #kr-story-article .nav-next { text-align: right; } #kr-story-article .nav-label { font-family: var(--kr-font-accent); font-size: 11px; letter-spacing: 0.08em; color: var(--kr-blue); font-weight: 600; } #kr-story-article .nav-title { font-size: 14px; font-weight: 600; color: var(--kr-text); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #kr-story-article .nav-spacer { display: block; } #kr-story-article .back-link { text-align: center; margin-top: 40px; font-size: 14px; } #kr-story-article .back-link a { color: var(--kr-blue); text-decoration: underline; } @media (max-width: 600px) { #kr-story-article { padding: 40px 16px 64px; } #kr-story-article .article-body { font-size: 15px; } #kr-story-article .article-body h2 { font-size: 19px; } #kr-story-article .article-body h3 { font-size: 16px; } #kr-story-article .article-nav { grid-template-columns: 1fr; } }