/* =========================================================
   Scoped Kintone-Themed CSS (方式B：.kin-theme 内だけ適用)
   Version: 1.0
   Load order: LAST (after the site CSS)
   ========================================================= */

/* ---------------------------------------------------------
   0) (任意) Proxima Nova 配信設定
   - 使用する場合のみ、パスを自社環境に変更して有効化してください
   --------------------------------------------------------- */
/*
@font-face {
  font-family: "Proxima Nova";
  src: url("/assets/fonts/proximanova-regular.woff2") format("woff2"),
       url("/assets/fonts/proximanova-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("/assets/fonts/proximanova-bold.woff2") format("woff2"),
       url("/assets/fonts/proximanova-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
*/

/* ---------------------------------------------------------
   1) Design Tokens（.kin-theme 配下にのみ定義）
   --------------------------------------------------------- */
.kin-theme {
  /* Brand — Primary */
  --kin-red: #EF3F24;
  --kin-black: #000000;
  --kin-gray-700: #4D4D4D;
  --kin-gray-600: #707070;
  --kin-gray-300: #D9D9D9;
  --kin-gray-100: #F2F2F2;
  --kin-white: #FFFFFF;

  /* Brand — Secondary */
  --kin-shamrock: #3FA862;
  --kin-cerulean: #00AEFC;
  --kin-aloe: #00AFAA;
  --kin-sunshine: #FFBA00;
  --kin-med-red: #FF7A64;

  /* Accent — Tertiary (use sparingly) */
  --kin-light-red: #F7DEDA;
  --kin-med-blue: #91C1F3;
  --kin-light-blue: #E6F3FD;
  --kin-light-yellow: #FFFF5C;
  --kin-light-green: #C8F1E3;

  /* Typography stacks */
  --font-en: "Proxima Nova", "Open Sans", Arial, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-jp: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;

  /* Sizing & effects */
  --radius-xs: 6px;
  --radius: 12px;
  --shadow-sm: 0 2px 10px rgba(0,0,0,.06);
  --shadow: 0 6px 24px rgba(0,0,0,.08);

  /* Text colors（コントラスト強め） */
  --text-strong: #0F1214;  /* 見出しなど */
  --text-base:   #1A1D21;  /* 本文 */
  --text-muted:  #666A70;  /* 補足 */

  /* Interactive */
  --link: #00AEFC;
  --focus: #00AEFC;

  /* Layout */
  --bg-page: var(--kin-white);
  --bg-soft: var(--kin-gray-100);
  --border: var(--kin-gray-300);
}

/* ---------------------------------------------------------
   2) Base Typography（ベース文字設定）
   --------------------------------------------------------- */
.kin-theme {
  color: var(--text-base);
  background: var(--bg-page);
  font-family: var(--font-jp), var(--font-en);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-weight: 500; /* Noto Sans JP の“痩せ見え”対策 */
}

.kin-theme :is(h1,h2,h3,h4,h5,h6,
.hero-title,.section-title,.card-title) {
  font-family: var(--font-en), var(--font-jp);
  color: var(--text-strong);
  letter-spacing: .01em;
}
.kin-theme h1, .kin-theme .text-3xl { font-weight: 700; line-height: 1.2; }
.kin-theme h2 { font-weight: 700; line-height: 1.3; }
.kin-theme h3 { font-weight: 700; }

.kin-theme :is(p,li,dd,td) { color: var(--text-base); }

/* ---------------------------------------------------------
   3) Links
   --------------------------------------------------------- */
.kin-theme a {
  color: var(--link);
  text-decoration: none;
}
.kin-theme a:hover { text-decoration: underline; }
.kin-theme a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------------------------------------------------------
   4) Buttons
   --------------------------------------------------------- */
.kin-theme :is(.button,.btn,button[type],[role="button"]) {
  font-family: var(--font-en), var(--font-jp);
  border-radius: var(--radius);
  padding: .7rem 1.1rem;
  border: 1px solid transparent;
  transition: transform .02s ease, box-shadow .2s ease, filter .15s ease;
  cursor: pointer;
}

.kin-theme :is(.btn-primary,.button.primary,button.is-primary,
button[type="submit"].primary,.btn.-primary) {
  background: var(--kin-red);
  color: var(--kin-white);
  box-shadow: var(--shadow-sm);
}
.kin-theme :is(.btn-primary,.button.primary,button.is-primary):hover {
  filter: brightness(.95);
}
.kin-theme .btn-primary:active { transform: translateY(1px); }

.kin-theme :is(.btn-outline,.button.outline,.btn.-outline) {
  background: var(--kin-white);
  color: var(--kin-red);
  border-color: var(--kin-red);
}
.kin-theme :is(.btn-ghost,.button.ghost) {
  background: transparent; color: var(--kin-red);
}

.kin-theme .btn-info    { background: var(--kin-cerulean); color: var(--kin-white); }
.kin-theme .btn-success { background: var(--kin-shamrock); color: var(--kin-white); }
.kin-theme .btn-warning { background: var(--kin-sunshine); color: var(--kin-black); }
.kin-theme .btn-danger  { background: var(--kin-med-red); color: var(--kin-black); }

.kin-theme :is(.button,.btn,button):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* ---------------------------------------------------------
   5) Forms
   --------------------------------------------------------- */
.kin-theme :is(input[type="text"],input[type="search"],input[type="email"],input[type="url"],
input[type="tel"],input[type="password"],textarea,select) {
  font-family: var(--font-jp), var(--font-en);
  border: 1px solid var(--border);
  background: var(--kin-white);
  color: var(--text-base);
  border-radius: var(--radius-xs);
  padding: .6rem .75rem;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.kin-theme :is(input,textarea)::placeholder { color: var(--text-muted); opacity: 1; }

.kin-theme :is(input,textarea,select):focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--focus) 20%, transparent);
  outline: none;
}

/* ---------------------------------------------------------
   6) Cards / Panels
   --------------------------------------------------------- */
.kin-theme :is(.card,.panel,.box,.well,.module) {
  background: var(--kin-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  color: var(--text-base);
}
.kin-theme :is(.card-header,.panel-header,.module-header) {
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
  font-family: var(--font-en), var(--font-jp);
  font-weight: 700;
}
.kin-theme :is(.card-body,.panel-body,.module-body) { padding: 1rem; }

/* ---------------------------------------------------------
   7) Navigation / Header / Footer（スコープ内のもののみ）
   --------------------------------------------------------- */
.kin-theme :is(.site-header,.navbar) {
  background: var(--kin-white);
  border-bottom: 1px solid var(--border);
}
.kin-theme :is(.navbar a,.site-nav a) { color: var(--text-base); }
.kin-theme :is(.navbar a,.site-nav a):hover { color: var(--kin-red); }

/* ---------------------------------------------------------
   8) Tables
   --------------------------------------------------------- */
.kin-theme table { width: 100%; border-collapse: collapse; }
.kin-theme :is(th,td) { border-bottom: 1px solid var(--border); padding: .7rem .6rem; }
.kin-theme thead th {
  font-family: var(--font-en), var(--font-jp);
  color: var(--text-strong);
  background: var(--bg-soft);
}

/* ---------------------------------------------------------
   9) Badges / Tags / Status
   --------------------------------------------------------- */
.kin-theme :is(.badge,.tag,.status) {
  display: inline-block;
  padding: .25rem .5rem;
  border-radius: 999px;
  font-size: .85rem;
  line-height: 1;
  border: 1px solid transparent;
}
.kin-theme .badge--primary { background: var(--kin-red); color: var(--kin-white); }
.kin-theme .badge--info    { background: var(--kin-cerulean); color: var(--kin-white); }
.kin-theme .badge--success { background: var(--kin-shamrock); color: var(--kin-white); }
.kin-theme .badge--warning { background: var(--kin-sunshine); color: var(--kin-black); }
.kin-theme .badge--muted   { background: var(--bg-soft); color: var(--text-base); border-color: var(--border); }

/* ---------------------------------------------------------
   10) Alerts
   --------------------------------------------------------- */
.kin-theme :is(.alert,.notice,.message) {
  border-radius: var(--radius);
  padding: .9rem 1rem;
  border: 1px solid var(--border);
}
.kin-theme .alert--info    { background: var(--kin-light-blue); border-color: color-mix(in oklab, var(--kin-cerulean) 30%, white); }
.kin-theme .alert--success { background: var(--kin-light-green); border-color: color-mix(in oklab, var(--kin-shamrock) 30%, white); }
.kin-theme .alert--warning { background: var(--kin-light-yellow); border-color: color-mix(in oklab, var(--kin-sunshine) 30%, white); }
.kin-theme .alert--danger  { background: var(--kin-light-red); border-color: color-mix(in oklab, var(--kin-med-red) 30%, white); }

/* ---------------------------------------------------------
   11) Content Links（読み物エリア）
   --------------------------------------------------------- */
.kin-theme :is(.prose a,.content a) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------------------------------------------------------
   12) Hero/キャッチのテキスト影（控えめ版）
   --------------------------------------------------------- */
.kin-theme :is(.mv,.hero,.cta-banner,.catch,
.mv h1,.mv h2,.mv p,.hero h1,.hero h2,.hero p) {
  text-shadow: 0 1px 1px rgba(0,0,0,.18),
               0 2px 6px rgba(0,0,0,.12);
}

/* ---------------------------------------------------------
   13) トラペゾイド（任意の装飾）
   --------------------------------------------------------- */
.kin-theme .trapezoid {
  --angle: 8deg;
  background: var(--kin-red);
  color: var(--kin-white);
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  clip-path: polygon(0 0,100% 0,100% 100%,12% 100%);
}
.kin-theme .trapezoid a { color: var(--kin-white); }

/* ---------------------------------------------------------
   14) Utilities
   --------------------------------------------------------- */
.kin-theme .kin-text-strong { color: var(--text-strong) !important; }
.kin-theme .kin-text-muted  { color: var(--text-muted) !important; }
.kin-theme .kin-bg-soft     { background: var(--bg-soft) !important; }
.kin-theme .kin-border      { border: 1px solid var(--border) !important; border-radius: var(--radius); }

/* ---------------------------------------------------------
   15) Dark mode（任意）
   --------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  .kin-theme {
    --bg-page: #0F1115;
    --bg-soft: #171A21;
    --text-strong: #F8FAFC;
    --text-base: #E5E7EB;
    --text-muted: #A1A1AA;
    --border: #2A2F3A;
    --link: #4FC3FF;
  }
  .kin-theme :is(.site-header,.navbar) { background: #0F1115; border-bottom-color: var(--border); }
  .kin-theme :is(.card,.panel,.box,.well,.module) {
    background: #131722; border-color: var(--border); box-shadow: none;
  }
  .kin-theme thead th { background: #1A1F2B; }
  .kin-theme .trapezoid { color: var(--kin-white); }
}