@charset "utf-8";
:root {
  /* --- 文字 --------------------------------------------------- */
  --color-text-strong: #111111;   /* 見出し・強調 */
  --color-base: #333333;          /* 本文 */
  --color-text-mute: #666666;     /* 補足・注釈 */
  --color-text-weak: #8b948f;     /* プレースホルダー・任意ラベル */
  /* --- 文字（青みグレー：ちいサポ・制作実績） ------------------ */
  --color-ink: #173755;           /* 濃い青みグレー */
  --color-ink-mute: #52657d;      /* 淡い青みグレー */
  /* --- 面 ----------------------------------------------------- */
  --color-white: #ffffff;
  --color-surface: #f4f7fb;       /* 淡い青みの面 */
  --color-surface-blue: #edf5fc;
  --color-surface-cyan: #e7f6fb;
  --color-surface-green: #f3f7f2;
  --color-surface-beige: #f6efe3;
  --color-surface-cream: #fff4cc;
  --color-surface-warm: #fcf3e8;
  /* --- 線 ----------------------------------------------------- */
  --color-border: #d9e1ea;
  --color-border-strong: #cfd8e3;
  --color-border-rgb: 217, 225, 234;
  /* --- ブランド ------------------------------------------------ */
    --color-navy: #123c96;        /* ナビ・キャッチの青 */
  --color-teal: #326464;   
  --color-line: #00b900;        /* LINE */
  --color-skyblue: #dceef8;
  --color-red: #E60012;
  --color-gold: #c39000;
  --color-gold-light: #ffd35d;
  --color-green: #00B900;
  --color-orange: #ff8400;
  --color-grey: #e3e3e3;
  /* フォントサイズ */
  --font-size-base: clamp(0.969rem, 0.917rem + 0.07vw, 1rem);
  --line-height-base: 1.75;
  --letter-spacing-base: 0.035em;
  --font-size-caption: 0.9375rem;
  --font14-size: 14px;
  --font18-size: 18px;
  --font-base: "Noto Sans JP", sans-serif;
  --font-serif: "Noto Serif JP", serif;
  --font-en: "Bebas Neue", sans-serif;
  /* 幅設定 */
  --width-pc: 1200px;
  --width980: 980px;
  /* 共通コンテンツ幅*/
  --container-max: 1200px;
  --container-padding-pc: 40px;
  --container-padding-sp: 24px;
  --container-padding-xs: 20px;
  --content-readable: 900px;
  /* 間隔 */
  --space-10: 10px;
  --space-20: 20px;
  --space-30: 30px;
  --space-40: 40px;
  --space-60: 60px;
}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
* {
    margin: 0px;
    padding: 0px;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
html {
 color: var(--color-base);
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
body {
font-family: var(--font-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
  overflow-wrap: anywhere;
  word-break: normal;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
@media (max-width: 700px) {
  body {
    font-size: clamp(1rem, 0.95rem + 0.5vw, 1.125rem);
    line-height: 1.6;
  }
}
ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
/* 上のリセットで display を戻しているため、hidden属性も効くようにしておく
   （JSで表示を切り替えるところで使います） */
[hidden] {
  display: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}
del {
	text-decoration: line-through;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
address{
	font-style: normal;
}
address p{
	text-decoration: none;
}
article{
	overflow-x: hidden;
}
/* リンク設定 */
a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none;
  color: inherit;
	transition: 0.5s;
}
a img {
	border: none;
}
a img:hover {
	opacity: 0.7;
	transition: 0.5s;
}
/* 文字寄せ */
.txt_left{ text-align: left!important; }
.txt_center{ text-align: center; }
.txt_right{ text-align: right; }
/* 幅サイズ */
.pt10{ padding-top:var(--space-10); }
.pt20{ padding-top:var(--space-20); }
.pt30{ padding-top:var(--space-30); }
.pt40{ padding-top:var(--space-40); }
.pt60{ padding-top:var(--space-60); }
.pb10{ padding-bottom:var(--space-10); }
.pb20{ padding-bottom:var(--space-20); }
.pb30{ padding-bottom:var(--space-30); }
.pb40{ padding-bottom:var(--space-40); }
.pb60{ padding-bottom:var(--space-60); }
.mt10{ margin-top:var(--space-10); }
.mt20{ margin-top:var(--space-20); }
.mt30{ margin-top:var(--space-30); }
.mt40{ margin-top:var(--space-40); }
.mt60{ margin-top:var(--space-60); }
.mb10{ margin-bottom:var(--space-10); }
.mb20{ margin-bottom:var(--space-20); }
.mb30{ margin-bottom:var(--space-30); }
.mb40{ margin-bottom:var(--space-40); }
.mb60{ margin-bottom:var(--space-60); }
/* リスト */
ul.emphasis-list {
    margin: 1.5em 0;
    list-style: none;
    padding-left: 1.5em;
}
ul.item-list {
    margin: 1.5em 0;
    list-style: none;
    padding-left: 1.5em;
    font-size: 0.95em;
}
ul.emphasis-list li {
    margin-bottom: 0.5em;
    border: none;
    width: 100% !important;
    position: relative;
    padding-left: 1em;
    list-style: none;
	line-height: 1.5em;
}
ul.item-list li {
    margin-bottom: 0.5em;
    border: none;
    width: 100% !important;
    position: relative;
    padding-left: 1em;
    list-style: none;
}
/* Font Awesome アイコン */
ul.emphasis-list li::before ,ul.item-list li::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f058";
    position: absolute;
    left: -1.5em;
    top: 0;
    color: var(--text-color);
}
/* スマホ用調整 */
@media only screen and (max-width: 980px) {
 ul.emphasis-list {
        margin: 1.5em 0;
        list-style: none;
        padding-left: 1em;
    }
    ul.emphasis-list li::before { left: -0.5em; }
    ul.item-list {
        margin: 1em 0;
        list-style: none;
        padding-left: 1em;
    }
    ul.item-list li::before { left: -0.5em; }
}
@media only screen and (max-width: 700px) {
   ul.emphasis-list li {
   font-size: clamp(1.313rem, 1.26rem + 0.26vw, 1.375rem);
    }
}
/* =========================================
   Responsive BR Only
========================================= */
.small-sp-only,
.sp-only,
.small-tab-only,
.tab-only,
.big-tab-only {
  display: none;
}
@media screen and (max-width: 350px) { .small-sp-only { display: inline; } }
@media screen and (max-width: 480px) { .sp-only { display: inline; } }
@media screen and (max-width: 700px) { .small-tab-only { display: inline; } }
@media screen and (max-width: 980px) { .tab-only { display: inline; } }
@media screen and (max-width: 1199px) { .big-tab-only { display: inline; } }
/* =========================================
   Responsive BR OFF
========================================= */
.tab-off,
.big-tab-off,
.normal-sp-off{
  display: inline;
}
@media screen and (max-width: 480px) { .normal-sp-off { display: none; } }
@media screen and (max-width: 980px) { .tab-off { display: none; } }
@media screen and (max-width: 1199px) { .big-tab-off { display: none; } }
/* =========================================
   AIOSEO Breadcrumb
========================================= */
.breadcrumb-area {
  padding: 22px 0 0;
  background: var(--color-white);
}
.breadcrumb-area .aioseo-breadcrumbs {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55em;
  max-width: 100%;
  padding: 12px 22px;
  background: var(--color-surface-green);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--color-text-mute);
}
.breadcrumb-area .aioseo-breadcrumb {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.breadcrumb-area .aioseo-breadcrumb a,
.breadcrumb-area .aioseo-breadcrumbs a {
  color: var(--color-text-mute);
  text-decoration: none;
}
.breadcrumb-area .aioseo-breadcrumb a:hover,
.breadcrumb-area .aioseo-breadcrumbs a:hover {
  color: var(--color-blue);
}
.breadcrumb-area .aioseo-breadcrumb-separator {
  color: var(--color-text-weak);
  margin: 0 0.15em;
}
.breadcrumb-area .aioseo-breadcrumb:last-child {
  color: var(--color-text-weak);
}
@media screen and (max-width: 700px) {
    .breadcrumb-area {
    padding: 16px 0 0;
    overflow-x: hidden;
  }
  .breadcrumb-area .content-inner { overflow-x: visible; }
  .breadcrumb-area .aioseo-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 0.35em 0.5em;
    padding: 12px 16px;
    font-size: 11px;
    line-height: 1.7;
    border-radius: 18px;
  }
  .breadcrumb-area .aioseo-breadcrumb {
    white-space: normal;
    min-width: 0;
  }
  .breadcrumb-area .aioseo-breadcrumb a,
  .breadcrumb-area .aioseo-breadcrumbs a { overflow-wrap: anywhere; }
}
/* =========================================
   ページ幅構成
========================================= */
.base-section {
  background: var(--color-white);
}
.content-section {
  padding: 60px 0;
}
.content-inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-padding-pc);
  padding-right: var(--container-padding-pc);
}
.content-readable {
  max-width: var(--content-readable);
  margin: 0 auto;
}
@media screen and (max-width: 1199px) {
  .content-section { padding: 60px 0; }
  .content-inner {
    max-width: 100%;
	 padding-left: 80px;
  padding-right: 80px;
  }
}
@media screen and (max-width: 700px) {
  .content-section { padding: 40px 0; }
  .content-inner {
    padding-left: var(--container-padding-sp);
    padding-right: var(--container-padding-sp);
  }
  .content-readable { max-width: 100%; }
}
@media screen and (max-width: 480px) {
  .content-inner {
    padding-left: var(--container-padding-xs);
    padding-right: var(--container-padding-xs);
  }
}
.very {
  display: inline;
  background-image: linear-gradient(transparent 65%, rgba(var(--color-gold-rgb), 0.5) 35%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: left bottom;
  transition: background-size 1s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.very.is-active {
  background-size: 100% 100%;
}

/* フッターのCSSは public/css/footer.css にまとめてあります */

/* =========================================
   共通ボタン（サイト全体で流用）
   例）<a class="ts-button ts-button--outline-teal" href="#">
         詳しく見る<i class="fas fa-plus" aria-hidden="true"></i>
       </a>
========================================= */
.ts-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 210px;
  padding: 14px 32px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-text-strong);
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

.ts-button i {
  flex: 0 0 auto;
  font-size: 0.875em;
  line-height: 1;
}

/* 枠線グリーン → hoverで塗り */
.ts-button--outline-teal {
  border-color: var(--color-teal);
  color: var(--color-text-strong);
}

.ts-button--outline-teal:hover,
.ts-button--outline-teal:focus-visible {
  background: var(--color-teal);
  color: var(--color-white);
  transform: translateY(-2px);
}

/* 塗りグリーン（白背景のカードの上などで使う） */
.ts-button--teal {
  border-color: var(--color-teal);
  background: var(--color-teal);
  color: var(--color-white);
}

.ts-button--teal:hover,
.ts-button--teal:focus-visible {
  background: var(--color-white);
  color: var(--color-teal);
  transform: translateY(-2px);
}

/* LINE */
.ts-button--line {
  border-color: var(--color-line);
  background: var(--color-line);
  color: var(--color-white);
}

.ts-button--line:hover,
.ts-button--line:focus-visible {
  background: var(--color-white);
  color: var(--color-line);
  transform: translateY(-2px);
}

@media screen and (max-width: 1199px) {
  .ts-button {
    min-width: 180px;
    padding: 12px 24px;
    font-size: 1rem;
  }
}

@media screen and (max-width: 700px) {
  .ts-button {
    min-width: 0;
    width: 100%;
    max-width: 320px;
    padding: 14px 20px;
    font-size: 0.9375rem;
  }
}

/* =========================================
   共通チップ（絞り込みボタン・タグ）
   導入実績の絞り込みと、よくあるご質問の絞り込みで
   同じものを使っています。
   例）<button class="ts-chip is-current" type="button">すべて</button>
       <a class="ts-chip" href="#">防犯カメラ</a>
========================================= */
.ts-chip {
  display: inline-block;
  padding: 6px var(--space-20);
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-base);
  font-family: inherit;
  font-size: var(--font14-size);
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.ts-chip:hover,
.ts-chip:focus-visible {
  border-color: var(--color-teal);
  color: var(--color-teal);
}

/* いま選ばれているもの */
.ts-chip.is-current {
  border-color: var(--color-teal);
  background: var(--color-teal);
  color: var(--color-white);
}

/* 349px以下：長い項目名が画面からはみ出すので、折り返しを許可します */
@media screen and (max-width: 349px) {
  .ts-chip {
    max-width: 100%;
    white-space: normal;
  }
}

/* =========================================
   スクロール到達で表示（サイト全体で流用）
   ・JS（scroll-reveal.js）が画面に入った要素へ .is-inview を付与します
   ・data-reveal を付けた要素が対象です
   ・.is-inview は「自分」でも「親」でも効きます。
     clip-path を使う .reveal-wipe は、自分に data-reveal を付けると
     IntersectionObserver が面積0と判定して発火しないため、
     必ず親要素に data-reveal を付けてください。

   1) .reveal-chars … 1文字ずつ下から上がる（見出し用）
      各文字の span に --char-index を渡します
   2) .reveal-wipe  … 左からワイプして現れる（リード文用）
      --wipe-delay で開始を遅らせられます
   3) .reveal-deal  … 左からカードを配るようにずれて出る（カード用）
      各要素に --deal-index を渡します
      --deal-base で全体の開始を遅らせられます
========================================= */
.reveal-chars__char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  transition:
    opacity 0.5s ease,
    transform 0.5s cubic-bezier(0.22, 0.8, 0.3, 1);
  transition-delay: calc(var(--char-index, 0) * 0.04s);
}

.reveal-chars.is-inview .reveal-chars__char,
.is-inview .reveal-chars__char {
  opacity: 1;
  transform: translateY(0);
}

.reveal-wipe {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition:
    opacity 0.25s ease,
    clip-path 0.6s cubic-bezier(0.22, 0.8, 0.3, 1);
  transition-delay: var(--wipe-delay, 0s);
}

/*
 * 4) .reveal-up … 下からふわっと上がる（順番に出したいとき）
 *    --up-delay で開始をずらします。
 */
.reveal-up {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.5s ease,
    transform 0.5s cubic-bezier(0.22, 0.8, 0.3, 1);
  transition-delay: var(--up-delay, 0s);
}

.reveal-up.is-inview,
.is-inview .reveal-up {
  opacity: 1;
  transform: translateY(0);
}

/*
 * 右からワイプ（画像用）。
 * .reveal-wipe と一緒に付けて使います：class="reveal-wipe reveal-wipe--right"
 * 隠れている向きだけを反転させ、表示後の状態は .reveal-wipe と共通です。
 */
.reveal-wipe--right {
  clip-path: inset(0 0 0 100%);
}

.reveal-wipe.is-inview,
.is-inview .reveal-wipe {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

.reveal-deal {
  opacity: 0;
  transform: translateX(calc(var(--space-40) * -1));
  transition:
    opacity 0.6s ease,
    transform 0.6s cubic-bezier(0.22, 0.8, 0.3, 1);
  transition-delay: calc(var(--deal-base, 0s) + var(--deal-index, 0) * 0.12s);
}

.reveal-deal.is-inview,
.is-inview .reveal-deal {
  opacity: 1;
  transform: translateX(0);
}

/* モーション低減設定のときは動かさず、最初から表示する */
@media (prefers-reduced-motion: reduce) {
  .reveal-chars__char,
  .reveal-wipe,
  .reveal-deal,
  .reveal-up {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
}