@charset "UTF-8";
/*
 * Integrated Modern CSS for WordPress
 * Combines: Typography, Reset, Utilities
 * Updated: 2025
 * 
 */

@font-face {
  font-family: "Roboto Mono";
  src: url("../webfonts/RobotoMono-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Yomogi";
  src: url("../webfonts/Yomogi-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ============================================
   CSS Custom Properties (Variables)
   ============================================ */
:root {
  /* Legacy Color Compatibility (from cmn_style.css) */
  --color-primary: #285AB3;
  --color-primary-hover: #68abfc;
  --color-secondary: #10c0c5;
  --color-accent: #ed6759;
  --color-text: #333333;
  --color-text-light: #767676;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-red: #d14271;
  --color-orange: #f06520;
  --color-orange-light: #ffcc99;
  --color-pink: #d8657e;
  --color-pink-bright: #ff6666;
  --color-baby-pink: #e9a5b4;
  --color-blue: #3371cb;
  --color-alpine-blue: #638fcb;
  --color-lime: #5ebaba;
  --color-green: #3371cb;
  --color-green-light: #f2fceb;
  --color-marker-blue: #0095d9;

  /* ============================================
     ページ共通トークン（top-page.css / technology.css /
     business-page.css で使用。各ページ側では再定義せず、
     ここだけを編集すれば全ページに反映される） */
  --color-primary-dark: #1C3E73;
  --color-bg-alt: #F5F5F5;
  --color-border: #E1E6ED;
  --color-border-soft: #EEF1F5;
  --color-text-sub: #5b6570;
  --radius-s: 4px;
  --radius-m: 8px;
  --ease-base: 0.35s ease;
  --font-mono: "Roboto Mono", monospace;

  /* technology.html / 事業案内ページ用：ネイビー系トークン */
  --color-navy: #0B2D5C;
  --color-navy-blue: #1957A6;
  --color-navy-cyan: #00A9C7;
  --color-navy-light: #EAF2FC;
  --color-navy-text: #1A2233;
  --color-navy-text-sub: #5B6675;
}	
	
 :root {
    color-scheme: light dark;
    
    /* ライトモード用カラー変数 */
    --bg-body: transparent;
    --text-primary: #374151;
    --bg-ppolicy: #f9fafb;
    --border-ppolicy: #2563eb;
    --bg-pcompany: #f3f4f6;
    --border-pcompany: #6b7280;
    --text-secondary: #6b7280;
    --link-color: #2563eb;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* ダークモード用カラー変数 */
        --bg-body: transparent;
        --text-primary: #e5e5e5;
        --bg-ppolicy: #1f2937;
        --border-ppolicy: #60a5fa;
        --bg-pcompany: #1a1a1a;
        --border-pcompany: #9ca3af;
        --text-secondary: #9ca3af;
        --link-color: #60a5fa;
    }
}
  /* Highlight Colors */
  --highlight-yellow: rgba(255, 228, 0, 0.4);
  --highlight-blue: rgba(0, 244, 252, 0.7);
  --highlight-red: #ffd0d1;
  --highlight-blue-light: #a8dafb;
  

}
  /* Japanese-optimized Typography */
  --font-family-base: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
                      "ヒラギノ角ゴ ProN W3", "Yu Gothic Medium", "游ゴシック Medium",
                      "YuGothic", "游ゴシック体", "Meiryo", -apple-system, 
                      BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-heading: "Noto Sans JP", "Hiragino Kaku Gothic ProN", 
                        "ヒラギノ角ゴ ProN W3", "Yu Gothic", "游ゴシック", "YuGothic", 
                        "游ゴシック体", "Meiryo", sans-serif;
  --font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", 
                      "ヒラギノ角ゴ ProN W3", Consolas, "Courier New", monospace;
ol, ul {
	list-style: none　!important; 
	list-style-type: none　!important; 
}

/* Text Elements */
p {
  margin-top: 0;
  margin-bottom: var(--space-md);
}
/* Links (compatible with original styles) */
a {
  color: var(--color-primary);
  text-decoration: underline;
  transition: color 0.2s ease-in-out;
}

a:visited {
  /* Keep same color for now for compatibility */
}

a:hover,
a:active,
a:focus {
  color: var(--color-primary-hover);
  text-decoration: underline;
}
/* Hover Effects */
.alpha a:hover img,
.hover-opacity:hover {
  opacity: 0.7;
  transition: opacity 0.2s ease-in-out;
}

/* CEO Signature (Legacy) */
img.ceo-sign {
  width: 22rem;
  height: 12rem;
  max-width: 100%;
}
/* Legacy Color Classes */
.colwhite { color: var(--color-white); }
.colblack { color: var(--color-black); }
.colnomal { color: var(--color-text); }
.colred { color: var(--color-red); }
.colorange { color: var(--color-orange); }
.colorange2 { color: var(--color-orange-light); }
.colpink { color: var(--color-pink); }
.colpink-spapp { color: var(--color-pink-bright); }
.colbabypink { color: var(--color-baby-pink); }
.colblue { color: var(--color-blue); }
.colalpineblue { color: var(--color-alpine-blue); }
.collime { color: var(--color-lime); }
.colgreen { color: var(--color-green); }
.colgreen0 { color: var(--color-green-light); }
.colmarkerblue { color: var(--color-marker-blue); }
.colbblue { background-color: var(--color-lime); }

/* Legacy Highlighting Effects (improved) */
.highlight_yellow {
  background: linear-gradient(transparent 60%, var(--highlight-yellow) 60%);
  padding: 0 0.2em;
}

.highlight_blue {
  background: linear-gradient(transparent 60%, var(--highlight-blue) 60%);
  padding: 0 0.2em;
}

.marker-under {
  background: linear-gradient(transparent 60%, var(--highlight-yellow) 60%);
}

.marker-under-red {
  background: linear-gradient(transparent 60%, var(--highlight-red) 60%);
}

.marker-under-blue {
  background: linear-gradient(transparent 60%, var(--highlight-blue-light) 60%);
}