@charset "utf-8";

/*============================
Variables
============================*/

:root {
--color-text: #0f1a2e;
--color-textSub: #44506a;
--color-textFaint: #8290a8;
--color-textOnBlue: #eef3fc;
--color-bg: #fafbfd;
--color-white: #fff;
--color-border: #dce3ee;
--color-navy: #1e2a55;
--color-navyDeep: #121a3a;
--color-navyMid: #2a3f86;
--color-blueDark: #3f5fc9;
--color-blue: #4483dd;
--color-blueLight: #33aadd;
--color-blueBright: #3b5bcf;
--color-indigo: #5566dd;
--color-teal: #22b8b0;
--color-violet: #8a6cf0;
--color-orange: #f5a623;
--color-yellow: #f2c94c;
--color-sky: #eef4fc;
--color-gray: #f3f5f8;
--color-grayLine: #e2e6ec;
--color-pale: #edf2fa;
--color-footerText: #9fb0cf;
--color-footerSub: #c9d6f0;
--color-footerLink: #e6ecf8;
--color-footerLine: #34407a;
--color-navKicker: #9fb6e8;
--color-companies: #e6332a;
--color-sharingKyoto: #f2b705;
--color-xin: #7b4bc4;
--color-fft: #f07c1a;
/* 黒（マスク用のグラデーションなど） */
--color-black: #000;
/* トップ：私たちの強み・サービス・開発支援事例 */
--color-cardPale: #f1f7fd;
--color-textOnGrad: #eaf1fd;
--color-textOnYellow: #4a3f12;
--color-stepBlue2: #3b94dd;
--color-stepBlue3: #477ddd;
--color-arcBlue: #5b7ce6;
--color-navyNight: #0f1a3a;
--color-securityIcon: #5fd0ff;
--color-photoBg: #11244f;
/* 事業内容・会社案内・開発支援事例 */
--color-yellowLight: #ffd76a;
--color-ctaBlue1: #3f6fb8;
--color-ctaBlue2: #4f86cc;
--color-ctaBlue3: #5b9ad8;
--color-idea: #d4a832;
--color-ideaText: #8a6a12;
--color-design: #4f7fbf;
--color-designText: #2f5d99;
--color-paperLight: #f1f2f4;
--color-paperMid: #eceef1;
--color-paperDark: #e6e8ec;
--grad-main: linear-gradient(120deg, #33aadd 0%, #5566dd 100%);
--grad-soft: linear-gradient(135deg, #e5eefa 0%, #d3e1f6 100%);
--grad-yellow: linear-gradient(90deg, #f5a623 0%, #f2c94c 100%);
--grad-navy: linear-gradient(150deg, #1e2a55 0%, #121a3a 100%);
--bg-hex: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'><g fill='none' stroke='%235566DD' stroke-opacity='.10' stroke-width='1'><path d='M28 0L56 16.2V48.5L28 64.7L0 48.5V16.2Z'/><path d='M28 64.7V97M0 48.5L-28 64.7M56 48.5L84 64.7'/><path d='M0 16.2L28 32.3L56 16.2M28 32.3V64.7'/></g></svg>");
--bg-hexWhite: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'><g fill='none' stroke='%23FFFFFF' stroke-opacity='.07' stroke-width='1'><path d='M28 0L56 16.2V48.5L28 64.7L0 48.5V16.2Z'/><path d='M28 64.7V97M0 48.5L-28 64.7M56 48.5L84 64.7'/><path d='M0 16.2L28 32.3L56 16.2M28 32.3V64.7'/></g></svg>");
--bg-dots: radial-gradient(rgba(63, 95, 201, .12) 1px, transparent 1.4px);
--fs-xxs: .6875rem;
--fs-xs: .75rem;
--fs-sm: .8125rem;
--fs-md: .875rem;
--fs-base: 1rem;
--fs-lg: 1.0625rem;
--fs-xl: 1.25rem;
--fs-xxl: 1.375rem;
--fs-body: 1rem;
--fs-title: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
--space-xs: .5rem;
--space-sm: .75rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-xxl: 3.5rem;
--space-section: 7.5rem;
--color-glass: rgba(255, 255, 255, .06);
--color-glassLine: rgba(255, 255, 255, .16);
--color-whiteSoft: rgba(255, 255, 255, .78);
--color-whiteFaint: rgba(255, 255, 255, .55);
--shadow-card: 0 24px 40px -30px rgba(30, 42, 85, .55);
--font-base: "Noto Sans JP", "Hiragino Sans", system-ui, sans-serif;
--font-en: Inter, sans-serif;
--container-width: 75rem;
--header-height: 4.875rem;
--pc-min-width: 64rem;
}

/*============================
Layout
============================*/

html { scroll-behavior: smooth; }
/* WebP切り替え用の<picture>はレイアウトに影響させない（中の<img>に直接スタイルを当てる） */
picture { display: contents; }
/* PCレイアウトの最小幅（これより狭い画面では横スクロール。タブレットは global.js で縮小表示） */
body { min-width: var(--pc-min-width); background: var(--color-bg); font-family: var(--font-base); font-size: var(--fs-body); line-height: 2.1; color: var(--color-text); -webkit-font-smoothing: antialiased; font-feature-settings: "palt" 1; line-break: strict; }

/*============================
#header
============================*/

#header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--color-border); background: rgba(250, 251, 253, .94); backdrop-filter: blur(6px); }
#header .inner { display: flex; align-items: center; gap: 1.75rem; height: var(--header-height); }
#header .logo .link { display: block; text-decoration: none; }
#header .logo .image { display: block; width: auto; height: 2.75625rem; transition: opacity .25s; }
#header .logo .link:hover .image { opacity: .75; }
#header .globalNav { margin-right: var(--space-sm); margin-left: auto; }
#header .globalNav .list { display: flex; gap: 2rem; font-size: 1rem; font-weight: 500; letter-spacing: .04em; color: var(--color-text); }
#header .globalNav .link { display: inline-block; position: relative; padding: .375rem 0; text-decoration: none; transition: color .25s; }
#header .globalNav .link::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; border-radius: 2px; background: var(--grad-main); transform: scaleX(0); transform-origin: center; transition: transform .3s cubic-bezier(.3, .7, .3, 1); }
#header .globalNav .link:hover, #header .globalNav .link:focus-visible, #header .globalNav .link[aria-current="page"] { color: var(--color-blueDark); }
#header .globalNav .link:hover::after, #header .globalNav .link:focus-visible::after, #header .globalNav .link[aria-current="page"]::after { transform: scaleX(1); }
#header .docButton { font-size: .9125rem; justify-content: center; min-width: 9.375rem; padding: .5625rem 2rem; line-height: 1.5; }
#header .hamburger { display: none; }

/*============================
#spNav（SP用メニュー）
============================*/

#spNav { display: none; }

/*============================
#footer
============================*/

#footer { padding: var(--space-xxl) 0 2.25rem; background: var(--color-navy); font-size: var(--fs-sm); line-height: 2; color: var(--color-footerText); }
#footer .top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xl); }
#footer .logo .image { display: block; width: auto; height: 3.1875rem; filter: brightness(0) invert(1); }
#footer .name { margin-top: var(--space-sm); font-size: var(--fs-sm); letter-spacing: .04em; color: var(--color-footerSub); white-space: nowrap; }
#footer .cert { padding: var(--space-xs) var(--space-sm); border-radius: 8px; background: var(--color-white); line-height: 0; }
#footer .cert .image { display: block; width: auto; height: 4rem; }
#footer .footerNav { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-footerLine); }
#footer .footerNav .list { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-xl); font-size: var(--fs-md); font-weight: 700; }
#footer .footerNav .link, #footer .subNav .link { color: var(--color-footerLink); text-decoration: none; transition: color .25s; }
#footer .footerNav .link:hover, #footer .subNav .link:hover { color: var(--color-white); text-decoration: underline; text-underline-offset: 4px; }
#footer .footerNav .ext { font-family: var(--font-en); font-weight: 500; }
#footer .subNav { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-lg); font-size: var(--fs-sm); }
#footer .copyright { margin-top: var(--space-lg); font-size: .71875rem; }
#footer .copyright .text { font-size: inherit; }

/* 少し狭いPC幅ではナビの間隔を詰めて読みやすさを保つ。 */
@media (min-width: 641px) and (max-width: 1100px) {
 #header .inner { gap: 1rem; }
 #header .globalNav .list { gap: 1rem; font-size: .9375rem; }
 #header .docButton { min-width: 0; padding-inline: 1.25rem; font-size: .9125rem; }
}