@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap');

/*
 * Style Override: Case 1 - Clean & Modern (Subsidiary-Based)
 * デジタルゲイト デザインリニューアル案 Case 1
 * ホワイト／ブラックベース＋差し色（赤・紺）
 */

/* =========================================================
   カラーパレット
   --color-navy : #064091  ← ロゴの紺（差し色）
   --color-red  : #ce1122  ← ロゴの赤（差し色・アクション）
   --color-black: #111111  ← 見出し・強調
   --color-text : #333333  ← 本文
   --color-muted: #888888  ← 補助テキスト
   --color-light: #f5f5f5  ← セクション背景
   --color-border:#e0e0e0  ← 区切り線
   ========================================================= */
:root {
    --color-navy  : #064091;
    --color-red   : #ce1122;
    --color-black : #111111;
    --color-text  : #333333;
    --color-muted : #888888;
    --color-white : #ffffff;
    --color-light : #f5f5f5;
    --color-border: #e0e0e0;
}

/* =========================================================
   ベース
   ========================================================= */
body {
    background-color: var(--color-white);
    color: var(--color-text);
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    letter-spacing: 0.03em;
    line-height: 1.8;
}

a {
    color: var(--color-text);
    transition: color 0.2s;
}

/* =========================================================
   ヘッダー
   ========================================================= */
.head {
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-white);
}

.headSh {
    background-color: var(--color-white);
}

.shadow {
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.07);
}

.headTxt {
    font-size: 11px;
    color: var(--color-muted);
    letter-spacing: 0.05em;
    font-weight: 500;
}

/* ナビタイトル（DIGITAL GATE）*/
.navTit {
    color: var(--color-black);
    font-size: 15px;
    letter-spacing: 0.05em;
}

/* DIGITAL GATE の英字部分だけ赤（差し色） */
.navTit span {
    color: var(--color-red);
    letter-spacing: 3px;
    font-size: 10px;
}

/* ナビリンク */
.nav li a {
    font-weight: 600;
    font-size: 13.5px;
    letter-spacing: 0.02em;
    color: var(--color-text);
}

/* ホバー下線：赤の細線（差し色） */
.nav li a::after {
    height: 2px;
    background: var(--color-red);
    bottom: 0;
}

.nav li a:hover {
    color: var(--color-black);
}

/* ヘッダー右上：電話番号・メール問合せ CTA
   head_tel.jpg 画像を CSS テキスト/疑似要素で置換
   --------------------------------------------------------- */

/* 元の画像を非表示 */
.head .floatR img {
    display: none;
}

/* p.floatR を縦並びの flex コンテナに */
.head .floatR {
    float: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    padding-top: 14px;
}

/* ラベル行（平日営業時間） */
.head .floatR::before {
    content: "通話無料　お問合せ・お見積り（平日10:00〜18:00）";
    display: block;
    font-size: 11px;
    color: var(--color-muted);
    letter-spacing: 0.04em;
    line-height: 1;
}

/* a タグを横並び flex に */
.head .floatR a {
    display: flex;
    align-items: center;
    gap: 0;
    text-decoration: none;
    line-height: 1;
}

/* 電話番号（::before） */
.head .floatR a::before {
    content: "0120-935-836";
    display: inline-block;
    font-size: 26px;
    font-weight: 700;
    color: var(--color-navy);
    letter-spacing: 0.08em;
    padding-right: 16px;
    margin-right: 16px;
    border-right: 1px solid var(--color-border);
    line-height: 1;
}

/* メール問合せボタン（::after） */
.head .floatR a::after {
    content: "メール問合せ";
    display: inline-block;
    background-color: var(--color-red);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    padding: 12px 18px;
    border-radius: 2px;
    letter-spacing: 0.06em;
    line-height: 1;
    transition: background-color 0.2s;
}

.head .floatR a:hover::after {
    background-color: #a50e1b;
}

/* =========================================================
   FV（ファーストビュー）
   ・top_fv3.jpg / top_fv_bg3.jpg（ヘッドセット女性）を廃止
   ・ホワイトベース＋サブタルな幾何学装飾（CSS製）
   ========================================================= */
.fvBg02 {
    background-image: none;
    background-color: var(--color-white);
}

.fvBg {
    background-image: none;
    background-color: var(--color-white);
    height: 454px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--color-border);
}

/* 背景：極薄のグリッドパターン（デジタル感） */
.fvBg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    z-index: 0;
    pointer-events: none;
}

/* 左側の薄い円形グラデーション（余白を自然に埋める） */
.fvBg::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 22%;
    transform: translate(-50%, -50%);
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(6, 64, 145, 0.05) 0%,
        transparent 70%);
    z-index: 0;
    pointer-events: none;
}

/* テキストを装飾の上に表示 */
.fvBox {
    position: relative;
    z-index: 1;
}

/* h2：白・斜体 → 黒・通常 */
.fvBg h2 {
    color: var(--color-black);
    font-style: normal;
    font-size: 44px;
    letter-spacing: 0.02em;
    line-height: 1.5;
}

.fvBg h2 span {
    color: var(--color-black);
    font-size: 32px;
}

/* h2の左に紺の細いアクセントライン（差し色） */
.fvBg h2::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 1em;
    background-color: var(--color-navy);
    margin-right: 14px;
    vertical-align: middle;
    border-radius: 2px;
}

/* サブコピー */
.fvBg p.text {
    color: var(--color-text);
    font-size: 20px;
    line-height: 1.6;
}

/* 「20年以上の実績」：黄色マーカー廃止 → 赤アンダーライン（差し色） */
.fvBg p span {
    background-color: transparent;
    color: var(--color-black);
    font-weight: 700;
    border-bottom: 2px solid var(--color-red);
}

/* クライアント名 */
.fvBg p.comp {
    color: var(--color-muted);
    font-size: 14px;
    letter-spacing: 0.05em;
}

/* =========================================================
   フッター
   ========================================================= */
/* フッター上帯：古いグレー → 締まりのあるチャコール */
.footBg {
    background-color: #1a1a1a;
    padding: 40px 0;
}

.footTxt01 {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.05em;
}

.footer {
    background-color: #fafafa;
    border-bottom: 1px solid var(--color-border);
    padding: 50px 0 30px;
}

.foot01 p {
    color: var(--color-black);
    font-size: 12px;
    letter-spacing: 0.08em;
    font-weight: 700;
    text-transform: uppercase;
}

.foot01 ul li {
    font-size: 13px;
}

.foot01 ul li a:hover {
    color: var(--color-navy);
    text-decoration: none;
}

.copy {
    background-color: #fafafa;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.04em;
    padding: 14px 0;
}

/* =========================================================
   フッターCTA
   ・foot_img03.jpg（ヘッドセット女性）廃止 → CSS製ボタン
   ========================================================= */
.footCon img {
    display: none;
}

.footCon a {
    display: block;
    background-color: var(--color-red);
    color: #ffffff;
    padding: 28px 24px 24px;
    text-align: center;
    border-radius: 2px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 12px rgba(206, 17, 34, 0.25);
    min-width: 260px;
}

.footCon a:hover {
    background-color: #a50e1b;
    color: #ffffff;
    box-shadow: 0 4px 20px rgba(206, 17, 34, 0.35);
}

.footCon a::before {
    content: "お問合せ・お見積り";
    display: block;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.footCon a::after {
    content: "無料で対応いたします →";
    display: block;
    font-size: 13px;
    opacity: 0.85;
    letter-spacing: 0.04em;
}

/* =========================================================
   セクション共通
   ========================================================= */
.bgBlue {
    background-color: var(--color-light);
}

/* セクションメタラベル（BUSINESS / SERVICE など）
   小さな赤テキスト → 控えめな差し色として使用 */
.topMtit01 {
    font-size: 11px;
    color: var(--color-red);
    text-align: center;
    letter-spacing: 6px;
    font-weight: 700;
    transform: none;       /* 旧: scale(0.7, 1) を解除 */
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* セクション大見出し：青 → ほぼ黒 */
.topTit01 {
    font-size: 32px;
    color: var(--color-black);
    text-align: center;
    margin-bottom: 40px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.3;
}

/* =========================================================
   BUSINESSセクション
   ========================================================= */
.topBusTxt01 {
    font-size: 19px;
    color: var(--color-black);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.4;
    margin-bottom: 12px;
}

.topBusTxt02 {
    font-size: 14px;
    line-height: 1.9;
    color: var(--color-text);
    font-weight: 400;
}

/* =========================================================
   事例セクション
   ========================================================= */
.topCaseTxt {
    color: var(--color-black);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.topCaseTxt a {
    color: var(--color-black);
}

.topCaseTxt a:hover {
    color: var(--color-navy);
}

/* 事例カード：ホバーで紺の細枠＋影（差し色） */
.topCaseImg {
    border: 1px solid var(--color-border);
    transition: border-color 0.25s, box-shadow 0.25s;
}

.topCaseImg:hover {
    border: 1px solid var(--color-navy);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    padding: 1px;
}

/* =========================================================
   CTAボックス
   ・top_con_img.jpg / top_con_img02.jpg（フリー素材女性）廃止
   ・ホワイトベースのシンプルなボックスに置換
   ========================================================= */
.topContDott {
    display: none;
}

.topContBox {
    position: relative;
    background-color: var(--color-light);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-navy);    /* 紺の細線（差し色） */
    border-radius: 2px;
    padding: 60px 40px;
    text-align: center;
    overflow: hidden;
}

/* 右下の極薄装飾 */
.topContBox::before {
    content: '';
    position: absolute;
    bottom: -40px;
    right: -40px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 40px solid rgba(6, 64, 145, 0.04);
    pointer-events: none;
}

.topContBox::after {
    content: none;
}

/* テキストを通常フローに（旧: position:absolute を解除） */
.topContTxt {
    position: static;
    color: var(--color-black);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.7;
    margin-bottom: 40px;
    text-align: center;
    letter-spacing: 0.02em;
}

/* 黄色マーカー廃止 → 赤の細いアンダーライン（差し色） */
.topContTxt span {
    background-color: transparent;
    color: var(--color-black);
    border-bottom: 2px solid var(--color-red);
    line-height: 1.0;
    padding-bottom: 2px;
}

/* 旧の padding-top（画像ずらし用）を解除 */
.topContImg,
.topContImg02 {
    padding-top: 0;
}

/* CTAバナー画像を非表示 */
.topContImg img,
.topContImg02 img {
    display: none;
}

/* CTAボタン：赤（差し色として適切なアクションカラー） */
.topContImg a,
.topContImg02 a {
    display: inline-block;
    background-color: var(--color-red);
    color: #ffffff;
    padding: 18px 56px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.08em;
    border-radius: 2px;
    transition: background-color 0.2s ease, transform 0.2s ease;
    box-shadow: 0 2px 12px rgba(206, 17, 34, 0.25);
}

.topContImg a:hover,
.topContImg02 a:hover {
    background-color: #a50e1b;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(206, 17, 34, 0.35);
}

.topContImg a::after,
.topContImg02 a::after {
    content: "お問合せ・お見積りはこちら（無料）";
}

/* =========================================================
   実績（jsk）セクション
   ========================================================= */
.topJskTxt01,
.topJskTxt02,
.topJskTxt03 {
    color: var(--color-black);
}

.topJskTxt03 {
    font-size: 44px;
    letter-spacing: 0.02em;
}

.topJskTxt10 {
    font-size: 42px;
    color: var(--color-black);
    letter-spacing: 0.02em;
}

/* 強調テキスト：黄色マーカー廃止 → 赤アンダーライン */
.topJskTxt10 .span02 {
    color: var(--color-black);
    border-bottom: 3px solid var(--color-red);
    line-height: 1.0;
}

/* =========================================================
   FLOWセクション
   ========================================================= */
.topFlowTxt01 a::after,
.topFlowTxt02 a::after {
    background: var(--color-navy);
    height: 2px;
}

/* =========================================================
   お客様の声（USER VOICE）
   ========================================================= */
.topVoiceCont {
    background-color: var(--color-light);
    border-left: 3px solid var(--color-navy);   /* 紺の差し色 */
    border-radius: 0 2px 2px 0;
    padding: 40px;
}

.topVoiceTxt01 {
    font-size: 22px;
    color: var(--color-black);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.5;
}

.topVoiceTxt02 {
    font-size: 16px;
    color: var(--color-black);
    border-bottom: 1px solid var(--color-border);
    font-weight: 600;
    letter-spacing: 0.02em;
    padding-bottom: 10px;
}

/* =========================================================
   下層ページ共通
   ========================================================= */
/* ページタイトル帯：古いグレー → チャコール */
.underFvBg {
    background-color: #1a1a1a;
    height: 160px;
    margin-bottom: 70px;
}

.underFvTit {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding-top: 58px;
}

/* 下層ページ内見出し */
.underTit01 {
    color: var(--color-black);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* =========================================================
   スマートフォン用ナビゲーション
   ========================================================= */
.hamburger__line {
    background-color: var(--color-black);
}

.global-nav {
    background-color: #1a1a1a;
}

.global-nav__item a {
    color: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    letter-spacing: 0.03em;
}

.global-nav__item a:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.06);
}

/* =========================================================
   サブセクション背景
   ========================================================= */
.bgBlue2,
.topBg01 {
    background-color: var(--color-light);
}