@charset "utf-8";
/* ===========================================================================
   IS Decisions JP — ブランド刷新レイヤー
   本国 www.isdecisions.com の「製品ページ」の配色に合わせるための上書き層。

   基準ページ:
     UserLock  … https://www.isdecisions.com/en/userlock
     FileAudit … https://www.isdecisions.com/en/fileaudit

   本国の製品ページはトップページと違い、ヘッダーもヒーローも「白〜淡いラベンダー
   グレー」の明るい面で、文字が濃紺。インディゴはリンクとCTAだけに使われている。
   レイアウトは変更しない（色・書体・角丸・ロゴの見え方のみ）。

   2026-08-12 interminds
   =========================================================================== */

:root {
  /* --- 本国の製品ページから実測 --- */
  --isd-primary:        #444ce7;  /* リンク・主要CTA（UserLock系） */
  --isd-primary-dark:   #3538cd;
  --isd-primary-soft:   #eef0fe;

  --isd-ink:            #1c1233;  /* 見出し h1 */
  --isd-nav:            #292342;  /* ナビ文字・ロゴ */
  --isd-body:           #464d69;  /* 本文・リード文 */
  --isd-muted:          #9ba1bf;  /* 補足・区切り */

  --isd-surface:        #ffffff;
  --isd-surface-alt:    #f8f9fc;  /* ヘッダー・淡い面 */
  --isd-surface-hero:   #f5f8ff;  /* ヒーロー上部 */
  --isd-surface-hero-2: #e6e9f3;  /* ヒーロー下部 */
  --isd-border:         #e6e9f3;
  --isd-border-btn:     #e2e8f0;  /* 二次ボタンの罫 */

  --isd-radius:         6px;      /* 本国のボタン角丸 */
  --isd-radius-lg:      12px;
}

/* 製品ごとのアクセント切り替えは行わない。
   本国サイトでも製品ページ本文の主要CTAは UserLock / FileAudit とも #444CE7 で、
   バイオレットは FileAudit のロゴマークにしか使われていないため。
   （切り替えたい場合は body.isd-fileaudit で --isd-primary を上書きすれば効く） */

/* ===========================================================================
   1. ヘッダー — 明るい面 ＋ 濃紺の文字、スクロール追従
   =========================================================================== */

/* 本国サイトと同じく、ヘッダーと製品バーがひとまとまりで画面上部に留まる */
.isd-sticky {
  position: -webkit-sticky;   /* 旧 Safari 用 */
  position: sticky;
  top: 0;
  z-index: 300;
  transition: box-shadow .18s ease;
}
.isd-sticky.is-scrolled { box-shadow: 0 4px 20px rgba(28, 18, 51, .10); }

#header {
  background: var(--isd-surface);   /* 白 */
  border-bottom: none;
}

/* サイトロゴ（本国サイトの SVG） */
#header .isd-logo { display: inline-block; line-height: 0; }
#header img.site-logo {
  width: 180px;
  height: auto;
  max-width: 100%;
}
@media (max-width: 900px) { #header img.site-logo { width: 140px; } }

#navigation .jqueryslidemenu > ul > li > a,
#navigation > ul > li > a,
#header #navigation a {
  color: var(--isd-nav);
}
#navigation .jqueryslidemenu > ul > li > a:hover,
#navigation > ul > li > a:hover {
  color: var(--isd-primary);
}

/* --- リンクに背景色を付けない（本国の製品ページに背景付きリンクは無い） --- */
#navigation .menu > li > a,
#navigation .menu > li > a:link,
#navigation .menu > li > a:visited,
#navigation .menu > li > a:hover,
#navigation .menu > li > a:active,
#navigation .menu > li.hover > a,
#navigation .menu > li.hover > a:link,
#navigation .menu > li.hover > a:visited,
#navigation .menu > li.hover > a:hover,
#navigation .menu > li.hover > a:active,
#navigation .menu > li.current-menu-item > a,
#navigation .menu > li.current-menu-ancestor > a,
#navigation .menu > li.current_page_item > a,
#navigation .menu > li.current_page_ancestor > a,
#navigation .menu > li.current-page-ancestor > a {
  background-color: transparent;
  background-image: none;
}
#navigation .menu > li.hover > a,
#navigation .menu > li.hover > a:visited { color: var(--isd-primary); }
#navigation .menu > li.hover > a > i     { color: var(--isd-primary); }

/* 現在地は文字色のみで示す */
#navigation .menu > li.current-menu-item > a,
#navigation .menu > li.current-menu-ancestor > a,
#navigation .menu > li.current_page_item > a,
#navigation .menu > li.current_page_ancestor > a {
  color: var(--isd-primary);
  font-weight: 700;
}

/* ドロップダウン */
#navigation .sub-menu {
  border: 1px solid var(--isd-border);
  border-radius: var(--isd-radius);
  box-shadow: 0 8px 24px rgba(28, 18, 51, .10);
  background: var(--isd-surface);
}
#navigation .sub-menu a,
#navigation .sub-menu a:visited {
  color: var(--isd-nav);
  background: transparent;
}
#navigation .sub-menu a:hover {
  color: var(--isd-primary);
  background: var(--isd-primary-soft);   /* 面としてのホバーは残す（文字の背景色ではない） */
}

/* --- ヘッダーの並び替え：ロゴ｜ナビ｜検索 を1行に -------------------------
   検索窓は絶対配置で右上に浮いていたので、フローに戻して
   グローバルナビ（サポート）の右隣に置く。 */
/* 親テーマはロゴとナビを .inner 内で position:absolute で配置している。
   検索をサポートの右隣に置くため、3つとも通常フローに戻して flex で並べる。 */
#header .inner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 14px;
  padding-bottom: 14px;
}
/* 親テーマの clearfix（.inner:before / :after）は flex 環境ではフレックス
   アイテムになってしまい、ロゴの前に余白を作る。無効化する。 */
#header .inner::before,
#header .inner::after { display: none !important; }

#header .inner > #logo,
#header .inner > .isd-logo {
  position: static !important;
  flex: 0 0 auto;
  order: 1;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  margin: 0 !important;
  padding: 0 !important;   /* 親テーマの #logo{padding:0 10px} を打ち消し、.inner の左端に揃える */
}

#header .inner > #navigation {
  position: static !important;
  flex: 1 1 auto;
  float: none;
  min-width: 0;
  order: 2;
  top: auto !important;
  right: auto !important;
  margin: 0 !important;
  height: auto !important;
}
#header #navigation > .menu,
#header #navigation > div > .menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;   /* 検索の直前まで寄せる */
  float: none;
}
#header #navigation > .menu > li { float: none; }

#header .inner > #top_area {
  position: static !important;
  flex: 0 0 auto;
  order: 3;
  width: auto;
  top: auto !important;
  right: auto !important;
  margin: 0 !important;
  text-align: right;
}
#header #top_area .widget { margin: 0; padding: 0; }
#header #top_area .widgettitle { display: none; }

/* --- 検索窓とボタンを一体化 --------------------------------------------- */
#header #searchform {
  position: relative;
  display: block;
  width: 210px;
  margin: 0;
}
#header #searchform input[type="text"],
#header #searchform .text_input {
  width: 100%;
  box-sizing: border-box;
  height: 38px;
  padding: 0 38px 0 12px;      /* 右側はアイコン分をあける */
  margin: 0;
  border: 1px solid var(--isd-border-btn);
  border-radius: var(--isd-radius);
  background: var(--isd-surface);
  color: var(--isd-nav);
  font-size: 13px;
  line-height: 38px;
}
#header #searchform input[type="text"]:focus {
  border-color: var(--isd-primary);
  outline: none;
}

/* ボタンは枠の中に溶け込ませ、文字ではなくルーペアイコンにする */
#header #searchform button,
#header #searchform button.button.gray,
#header #searchform input[type="submit"] {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 36px;
  height: 36px;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0 !important;
  border-radius: 0 var(--isd-radius) var(--isd-radius) 0;
  background: transparent !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23292342' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  box-shadow: none;
  cursor: pointer;
  font-size: 0;
  text-indent: -9999px;   /* 「検索する」の文字を隠す */
  overflow: hidden;
}
#header #searchform button span { display: none !important; }
#header #searchform button:hover { opacity: .65; }

@media (max-width: 1100px) { #header #searchform { width: 160px; } }

/* ===========================================================================
   1-b. 製品バー — 本国の製品ページと同じ「製品ロゴ＋製品内メニュー＋CTA」の帯
   =========================================================================== */

.isd-productbar {
  background: var(--isd-surface);
  border-bottom: 1px solid var(--isd-border);
}
.isd-productbar .inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 20px;
  padding-bottom: 10px;
}
.isd-productbar__logo { flex: 0 0 auto; line-height: 0; }
.isd-productbar__logo img { height: 28px; width: auto; display: block; }

.isd-productbar__nav { flex: 1 1 auto; min-width: 0; }
.isd-productbar__nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;   /* メニューは右寄せ */
  gap: 4px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.isd-productbar__nav li { margin: 0; padding: 0; list-style: none; }
.isd-productbar__nav li:before { content: none; }
.isd-productbar__nav a,
.isd-productbar__nav a:link,
.isd-productbar__nav a:visited {
  display: inline-block;
  padding: 6px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--isd-nav);
  background: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.isd-productbar__nav a:hover,
.isd-productbar__nav a:focus { color: var(--isd-primary); }
.isd-productbar__nav li.is-current > a,
.isd-productbar__nav li.is-current > a:link,
.isd-productbar__nav li.is-current > a:visited {
  color: var(--isd-primary);
  border-bottom-color: var(--isd-primary);
  font-weight: 700;
}

.isd-productbar__cta { flex: 0 0 auto; display: flex; gap: 8px; }
.isd-btn {
  display: inline-block;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  border-radius: var(--isd-radius);
  border: 1px solid transparent;
  white-space: nowrap;
}
/* 親テーマに a:link,a:visited,… { color:#666 } があるため、
   同じ詳細度になるよう擬似クラスまで書く必要がある。 */
a.isd-btn--primary,
a.isd-btn--primary:link,
a.isd-btn--primary:visited,
a.isd-btn--primary:active,
a.isd-btn--primary:focus {
  background: var(--isd-primary);
  border-color: var(--isd-primary);
  color: #fff;
}
a.isd-btn--primary:hover {
  background: var(--isd-primary-dark);
  border-color: var(--isd-primary-dark);
  color: #fff;
}
a.isd-btn--ghost,
a.isd-btn--ghost:link,
a.isd-btn--ghost:visited,
a.isd-btn--ghost:active,
a.isd-btn--ghost:focus {
  background: var(--isd-surface);
  border-color: var(--isd-border-btn);
  color: var(--isd-nav);
}
a.isd-btn--ghost:hover {
  background: var(--isd-surface-alt);
  color: var(--isd-primary);
}

@media (max-width: 900px) {
  .isd-productbar .inner { flex-wrap: wrap; gap: 10px 16px; min-height: 0; }
  .isd-productbar__nav { order: 3; flex-basis: 100%; }
  .isd-productbar__nav ul { gap: 2px 16px; }
  .isd-productbar__cta { margin-left: auto; }
  .isd-btn { padding: 7px 12px; font-size: 12px; }
}

/* ===========================================================================
   2. ヒーロー（#feature） — 本国と同じく明るい面に濃紺の見出し
   =========================================================================== */

/* 明るいヒーロー（独自の背景画像を持たないページ）だけを対象にする。
   導入事例のように写真を敷いているページは、親テーマどおり白抜き文字のまま。 */
body.isd-hero-light.no-gradient #feature,
body.isd-hero-light.has-gradient #feature,
body.isd-hero-light #feature {
  background-color: var(--isd-surface-hero);
  background-image: linear-gradient(180deg, var(--isd-surface-hero) 0%, var(--isd-surface-hero-2) 100%);
}
body.isd-hero-light #feature h1,
body.isd-hero-light #feature h2 { color: var(--isd-ink); }

/* ヒーロー内の製品ロゴは本文側から削除済み（2段目の製品バーと重複するため）。
   万一戻ってきた場合の保険としてルールだけ残す。 */
#feature img[src*="logo-userlock"],
#feature img[src*="logo-fileaudit"] { display: none; }

/* --- 製品トップページのヒーロー ------------------------------------------
   本国サイトの画像に差し替えたうえで、従来どおり
   [one_half]（テキスト）＋[one_half_last]（画像）の2カラムで表示する。
   背景配置はスマホで文字と画像が重なるため採用しない。 */
body.isd-product-top #feature .feature-introduce img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-left: auto;     /* カラム内で右寄せ */
}

/* --- ヒーローのテキストを上下中央に ---------------------------------------
   float ベースの2カラムを flex に置き換えて縦位置をそろえる。
   1000px 以下では wrap して従来どおり縦積みになる。 */
@media (min-width: 1001px) {
  /* アーカイブ（カテゴリートップ）は見出しを1行に流すので flex にしない */
  body:not(.archive) #feature .feature-introduce {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  #feature .feature-introduce > .one_half,
  #feature .feature-introduce > .one_half.last,
  #feature .feature-introduce > .two_third,
  #feature .feature-introduce > .one_third.last {
    float: none;
  }
  /* clearfix 用の空要素は flex アイテムになってしまうので無効化 */
  #feature .feature-introduce > .clearboth,
  #feature .feature-introduce::before,
  #feature .feature-introduce::after { display: none; }
}

/* --- 利用シーン・導入事例のカテゴリートップ ------------------------------
   製品トップページと同じ配色にそろえる。
   子テーマ style.css の
     body.archive #feature { background-image: url(...) !important; }
     body.archive #feature { background: #72818b; }
   が効いているため、!important で打ち消す必要がある。
   高さは既存の指定（300px）をそのまま残す。 */
body.archive.category.isd-userlock #feature,
body.archive.category.isd-fileaudit #feature {
  background-color: var(--isd-surface-hero) !important;
  background-image: linear-gradient(180deg, var(--isd-surface-hero) 0%, var(--isd-surface-hero-2) 100%) !important;
}
body.archive.category.isd-userlock #feature h1,
body.archive.category.isd-userlock #feature h2,
body.archive.category.isd-fileaudit #feature h1,
body.archive.category.isd-fileaudit #feature h2 { color: var(--isd-ink); }

body.archive.category.isd-userlock #feature .feature-introduce,
body.archive.category.isd-userlock #feature p,
body.archive.category.isd-fileaudit #feature .feature-introduce,
body.archive.category.isd-fileaudit #feature p { color: var(--isd-body); }

/* 子テーマ style.css の
     @media (min-width:1025px){ body.archive #feature { height:300px } }
   による余分な高さを解除し、中身なりの高さにする。 */
body.archive #feature { height: auto; }
@media only screen and (min-width: 1025px) {
  body.archive #feature { height: auto; }
}

/* カテゴリートップの見出しは「利用シーン - コンプライアンス」と1行で見せる。
   h1 と h2 をインラインに流し、ベースラインをそろえる。 */
body.archive.category #feature .feature-introduce {
  text-align: left;
  padding: 44px 0;
}
body.archive.category #feature .feature-introduce h1,
body.archive.category #feature .feature-introduce h2 {
  display: inline;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
  line-height: 1.5;
}
/* 区切りは h2 側に付ける。h2 が無いカテゴリー（導入事例など）では
   区切りだけが残らないようにするため。 */
body.archive.category #feature .feature-introduce h2::before {
  content: "-";
  margin: 0 .55em;
  font-size: 18px;
  font-weight: 400;
  color: var(--isd-muted);
}
body.archive.category #feature .feature-introduce h2 {
  font-size: 18px;
  font-weight: 700;
}

body.isd-hero-light .feature-introduce,
body.isd-hero-light .feature-introduce .meta-icon,
body.isd-hero-light #feature p { color: var(--isd-body); }

.feature-introduce a         { color: var(--isd-primary); }
.feature-introduce a:hover   { color: var(--isd-primary-dark); }

/* ページヘッダー帯も同様に */
#page_header,
.page_header {
  background-color: var(--isd-surface-hero);
  background-image: linear-gradient(180deg, var(--isd-surface-hero) 0%, var(--isd-surface-hero-2) 100%);
}
#page_header h1,
#page_header h2,
.page_header h1 { color: var(--isd-ink); }

/* ===========================================================================
   3. ボタン
   =========================================================================== */

.button,
.button.primary,
.button.large,
input[type="submit"],
button[type="submit"] { border-radius: var(--isd-radius); }

/* 主要CTA：インディゴ地に白 */
.button.primary,
.button.blue,
.button.orange,
input[type="submit"],
button[type="submit"] {
  background: var(--isd-primary);
  color: #fff !important;
  border: 1px solid var(--isd-primary);
}
.button.primary:hover,
.button.blue:hover,
.button.orange:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background: var(--isd-primary-dark);
  border-color: var(--isd-primary-dark);
  color: #fff !important;
}

/* ヘッダーのCTA：1つ目＝主要（インディゴ）、2つ目＝二次（白地＋罫） */
/* ヘッダー1段目には CTA を置かない（本国サイトと同じ）。
   「無料体験版」「お問い合わせ」はグローバルナビの項目に .gnav_button が
   付いているので、それを非表示にする。メニュー自体は変更していない。 */
#header .gnav_button { display: none !important; }

/* ===========================================================================
   4. 旧ブランド色が直接書かれている箇所の置き換え
   =========================================================================== */

/* フッター上のナビゲーション帯は表示しない。
   ウィジェット（外観 > ウィジェット > フッター）の HTML 自体は残してあるので、
   不要が確定したら管理画面から削除できる。 */
.fullwidth.primary_green,
ul.footerLinks { display: none !important; }

.primary_green                { background: var(--isd-primary); }
.price_table th               { background: var(--isd-primary); }
.feature-introduce a:hover    { color: var(--isd-primary-dark); }
ul.list_color_green li:before { color: var(--isd-primary); }
h2.cs_section                 { border-top-color: var(--isd-primary); }
.section_label                { color: var(--isd-primary); }
.archive .entry_meta a:hover  { color: var(--isd-primary) !important; }

.inpage_menu a:hover {
  color: var(--isd-primary) !important;
  border-bottom-color: var(--isd-primary) !important;
  background: transparent !important;
}

.product_tab ul li a:hover    { color: var(--isd-primary); background: transparent; }
.product_tab a.current        { color: var(--isd-primary) !important; }
.product_tab li.prod_list a   { background: var(--isd-primary); color: #fff !important; }

/* ===========================================================================
   5. リンクに背景色を付けない（全体方針）
   =========================================================================== */

#header a,
#page a,
#page a:link,
#page a:visited,
#page a:hover,
#page a:active,
#sidebar a,
#footer a,
.entry a,
.entry a:hover {
  background-color: transparent;
  background-image: none;
}
/* ボタン・タブ・カード状のリンクは面として色を持つので除外 */
#page a.button,
#page a.button:hover,
#page .product_tab li.prod_list a,
#page .portfolios.sortable header a,
#page .portfolios.sortable header a.current,
#page .portfolios.sortable header a:hover,
.gnav_button a,
.gnav_button a:hover {
  background-image: none;
}
#page a.button,
#page a.button:hover        { background-color: var(--isd-primary); }
#page a.button:hover        { background-color: var(--isd-primary-dark); }
#page .portfolios.sortable header a.current,
#page .portfolios.sortable header a:hover { background-color: var(--isd-primary); }

/* ===========================================================================
   6. 面・罫・カード
   =========================================================================== */

.framed_box {
  border-color: var(--isd-border) !important;
  border-radius: var(--isd-radius-lg);
}
.cta, #cta, #trial { border-radius: var(--isd-radius-lg); }
hr, .divider, .divider_line { border-color: var(--isd-border); }

/* ===========================================================================
   7. タイポグラフィ
   =========================================================================== */

body,
input, textarea, select, button {
  font-family: "Noto Sans JP", "Noto Sans", sans-serif;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Noto Sans JP", "Noto Sans", sans-serif;
  color: var(--isd-ink);
  letter-spacing: .01em;
}

/* 子テーマ style.css の #main h2 { letter-spacing:0.15em } を無効化 */
#main h2 { letter-spacing: normal; }
a        { color: var(--isd-primary); }
a:hover  { color: var(--isd-primary-dark); }

body { line-break: strict; overflow-wrap: anywhere; }

/* ===========================================================================
   8. Cookie 同意バナー（CookieYes）
   =========================================================================== */

.cky-btn-accept {
  background: var(--isd-primary) !important;
  border-color: var(--isd-primary) !important;
  border-radius: var(--isd-radius) !important;
}
.cky-btn-accept:hover {
  background: var(--isd-primary-dark) !important;
  border-color: var(--isd-primary-dark) !important;
}
.cky-btn-reject {
  color: var(--isd-primary) !important;
  border-color: var(--isd-primary) !important;
  border-radius: var(--isd-radius) !important;
}

/* ===========================================================================
   9. その他
   =========================================================================== */

/* 注意: body に .scroll-to-top クラスが付くため、`.scroll-to-top a` と書くと
   ページ内の全リンクに背景色が付いてしまう。ID で限定すること。 */
a#scroll_to_top,
#scroll_to_top        { background: var(--isd-primary); }
a#scroll_to_top:hover,
#scroll_to_top:hover  { background: var(--isd-primary-dark); }

::selection { background: var(--isd-primary); color: #fff; }
/* ===========================================================================
   製品機能一覧の見出し（アイコン＋テキスト）
   画像で表現していた見出しを、アイコンとテキストに置き換える。
   アイコンは mask-image で敷いているので、色は --isd-feat-color で決まる。
   =========================================================================== */

/* --- 原因の解消 -----------------------------------------------------------
   子テーマ style.css に h3 のぶら下げ装飾がある。

     h3        { margin-left:  1.5em; }
     h3:before { margin-left: -1.5em; content:"0c8"; }  ← Font Awesome の■

   h3 を 1.5em 字下げし、その分だけ ::before を左に引き出す作りのため、
   .isd-feat（h3）のアイコンが列の左外へはみ出していた。
   ■ の装飾自体を使わない方針としたため、ルールごと無効化する。
   （margin-right:10px も .isd-feat のアイコン右余白を広げていた） */
h3            { margin-left: 0; }
h3:before,
h3::before    { content: none; margin: 0; }

.isd-feat {
  display: flex;
  align-items: center;       /* テキストはアイコンに対して上下中央 */
  gap: 16px;
  margin: 0 0 .6em;
  max-width: 100%;           /* 親（one_third）からはみ出さない */
  box-sizing: border-box;
  min-width: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--isd-ink);
  letter-spacing: normal;
  overflow-wrap: anywhere;   /* 長い語でも列幅を押し広げない */
}
.isd-feat::before {
  content: "";
  flex: 0 0 auto;
  /* まず素の 70px 角で確定させる（min()/aspect-ratio 非対応ブラウザ向け） */
  width: 70px;
  height: 70px;
  /* 対応ブラウザでは、列が狭いときにアイコンも縮める（列幅の28%を上限） */
  width: min(70px, 28%);
  max-width: 70px;
  height: auto;
  aspect-ratio: 1 / 1;
  background-color: var(--isd-feat-color, var(--isd-primary));
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* FileAudit のページはパープル、それ以外は各製品のアクセント色 */
body.isd-fileaudit { --isd-feat-color: #7a6ae8; }

.isd-feat--mfa::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021.5s7.5-3.6%207.5-9.5V5.2L12%202.5%204.5%205.2V12c0%205.9%207.5%209.5%207.5%209.5Z%22%2F%3E%3Cpath%20d%3D%22m8.8%2011.8%202.3%202.3%204.1-4.4%22%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021.5s7.5-3.6%207.5-9.5V5.2L12%202.5%204.5%205.2V12c0%205.9%207.5%209.5%207.5%209.5Z%22%2F%3E%3Cpath%20d%3D%22m8.8%2011.8%202.3%202.3%204.1-4.4%22%2F%3E%3C%2Fsvg%3E");
}

.isd-feat--logout::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.5%203.5h3a2%202%200%200%201%202%202v13a2%202%200%200%201-2%202h-3%22%2F%3E%3Cpath%20d%3D%22M10%2016.5%2014.5%2012%2010%207.5%22%2F%3E%3Cpath%20d%3D%22M14.5%2012H3.5%22%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.5%203.5h3a2%202%200%200%201%202%202v13a2%202%200%200%201-2%202h-3%22%2F%3E%3Cpath%20d%3D%22M10%2016.5%2014.5%2012%2010%207.5%22%2F%3E%3Cpath%20d%3D%22M14.5%2012H3.5%22%2F%3E%3C%2Fsvg%3E");
}

.isd-feat--device::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.5%22%20y%3D%224%22%20width%3D%2219%22%20height%3D%2212.5%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8.5%2020.5h7M12%2016.5v4%22%2F%3E%3Crect%20x%3D%229.2%22%20y%3D%228.6%22%20width%3D%225.6%22%20height%3D%224.4%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M10.5%208.6V7.4a1.5%201.5%200%200%201%203%200v1.2%22%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.5%22%20y%3D%224%22%20width%3D%2219%22%20height%3D%2212.5%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8.5%2020.5h7M12%2016.5v4%22%2F%3E%3Crect%20x%3D%229.2%22%20y%3D%228.6%22%20width%3D%225.6%22%20height%3D%224.4%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M10.5%208.6V7.4a1.5%201.5%200%200%201%203%200v1.2%22%2F%3E%3C%2Fsvg%3E");
}

.isd-feat--clock::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5.2l3.4%202%22%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5.2l3.4%202%22%2F%3E%3C%2Fsvg%3E");
}

.isd-feat--network::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2.5%209.2a15%2015%200%200%201%2019%200%22%2F%3E%3Cpath%20d%3D%22M5.6%2012.6a10.5%2010.5%200%200%201%2012.8%200%22%2F%3E%3Cpath%20d%3D%22M8.8%2016a6%206%200%200%201%206.4%200%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2219.4%22%20r%3D%221.2%22%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2.5%209.2a15%2015%200%200%201%2019%200%22%2F%3E%3Cpath%20d%3D%22M5.6%2012.6a10.5%2010.5%200%200%201%2012.8%200%22%2F%3E%3Cpath%20d%3D%22M8.8%2016a6%206%200%200%201%206.4%200%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2219.4%22%20r%3D%221.2%22%2F%3E%3C%2Fsvg%3E");
}

.isd-feat--multi::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15.5%2020v-1.8a3.5%203.5%200%200%200-3.5-3.5H6.5A3.5%203.5%200%200%200%203%2018.2V20%22%2F%3E%3Ccircle%20cx%3D%229.2%22%20cy%3D%227.6%22%20r%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M21%2020v-1.8a3.5%203.5%200%200%200-2.6-3.4%22%2F%3E%3Cpath%20d%3D%22M16%204.4a3.5%203.5%200%200%201%200%206.6%22%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15.5%2020v-1.8a3.5%203.5%200%200%200-3.5-3.5H6.5A3.5%203.5%200%200%200%203%2018.2V20%22%2F%3E%3Ccircle%20cx%3D%229.2%22%20cy%3D%227.6%22%20r%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M21%2020v-1.8a3.5%203.5%200%200%200-2.6-3.4%22%2F%3E%3Cpath%20d%3D%22M16%204.4a3.5%203.5%200%200%201%200%206.6%22%2F%3E%3C%2Fsvg%3E");
}

.isd-feat--activity::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.5%22%20y%3D%224%22%20width%3D%2219%22%20height%3D%2213%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M6%2011h2.4l1.6-3%202.6%206%201.7-3.4H18%22%2F%3E%3Cpath%20d%3D%22M8.5%2020.5h7%22%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.5%22%20y%3D%224%22%20width%3D%2219%22%20height%3D%2213%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M6%2011h2.4l1.6-3%202.6%206%201.7-3.4H18%22%2F%3E%3Cpath%20d%3D%22M8.5%2020.5h7%22%2F%3E%3C%2Fsvg%3E");
}

.isd-feat--report::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.5%202.5h7L19%208v11.5a2%202%200%200%201-2%202H6.5a2%202%200%200%201-2-2v-15a2%202%200%200%201%202-2Z%22%2F%3E%3Cpath%20d%3D%22M13.5%202.5V8H19%22%2F%3E%3Cpath%20d%3D%22M8.2%2013h7.6M8.2%2016.6h5.2%22%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.5%202.5h7L19%208v11.5a2%202%200%200%201-2%202H6.5a2%202%200%200%201-2-2v-15a2%202%200%200%201%202-2Z%22%2F%3E%3Cpath%20d%3D%22M13.5%202.5V8H19%22%2F%3E%3Cpath%20d%3D%22M8.2%2013h7.6M8.2%2016.6h5.2%22%2F%3E%3C%2Fsvg%3E");
}

.isd-feat--chart::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%203.5v17h17%22%2F%3E%3Cpath%20d%3D%22M8%2017V11M12.5%2017V7M17%2017v-4%22%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%203.5v17h17%22%2F%3E%3Cpath%20d%3D%22M8%2017V11M12.5%2017V7M17%2017v-4%22%2F%3E%3C%2Fsvg%3E");
}

.isd-feat--sso::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2215.6%22%20r%3D%225.4%22%2F%3E%3Cpath%20d%3D%22m11.9%2011.8%209.4-9.4%22%2F%3E%3Cpath%20d%3D%22m15.4%208.3%202.2%202.2M18.3%205.4l2.2%202.2%22%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2215.6%22%20r%3D%225.4%22%2F%3E%3Cpath%20d%3D%22m11.9%2011.8%209.4-9.4%22%2F%3E%3Cpath%20d%3D%22m15.4%208.3%202.2%202.2M18.3%205.4l2.2%202.2%22%2F%3E%3C%2Fsvg%3E");
}

.isd-feat--monitor::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M2%2012s3.6-7%2010-7%2010%207%2010%207-3.6%207-10%207-10-7-10-7Z%22%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M2%2012s3.6-7%2010-7%2010%207%2010%207-3.6%207-10%207-10-7-10-7Z%22%2F%3E%3C%2Fsvg%3E");
}

.isd-feat--alert::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%208.5a6%206%200%201%200-12%200c0%206.5-2.5%208.5-2.5%208.5h17S18%2015%2018%208.5%22%2F%3E%3Cpath%20d%3D%22M13.7%2020.5a2%202%200%200%201-3.4%200%22%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%208.5a6%206%200%201%200-12%200c0%206.5-2.5%208.5-2.5%208.5h17S18%2015%2018%208.5%22%2F%3E%3Cpath%20d%3D%22M13.7%2020.5a2%202%200%200%201-3.4%200%22%2F%3E%3C%2Fsvg%3E");
}

.isd-feat--cloud::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17.5%2019.5a4.5%204.5%200%200%200%20.4-8.98A6.2%206.2%200%200%200%206.2%209.6%204.2%204.2%200%200%200%206.9%2019.5Z%22%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17.5%2019.5a4.5%204.5%200%200%200%20.4-8.98A6.2%206.2%200%200%200%206.2%209.6%204.2%204.2%200%200%200%206.9%2019.5Z%22%2F%3E%3C%2Fsvg%3E");
}

.isd-feat--audit::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13.5%202.5H6.5a2%202%200%200%200-2%202v15a2%202%200%200%200%202%202h4%22%2F%3E%3Cpath%20d%3D%22M13.5%202.5%2019%208v3%22%2F%3E%3Cpath%20d%3D%22M13.5%202.5V8H19%22%2F%3E%3Ccircle%20cx%3D%2216.5%22%20cy%3D%2216.5%22%20r%3D%223.4%22%2F%3E%3Cpath%20d%3D%22m21.6%2021.6-2.7-2.7%22%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13.5%202.5H6.5a2%202%200%200%200-2%202v15a2%202%200%200%200%202%202h4%22%2F%3E%3Cpath%20d%3D%22M13.5%202.5%2019%208v3%22%2F%3E%3Cpath%20d%3D%22M13.5%202.5V8H19%22%2F%3E%3Ccircle%20cx%3D%2216.5%22%20cy%3D%2216.5%22%20r%3D%223.4%22%2F%3E%3Cpath%20d%3D%22m21.6%2021.6-2.7-2.7%22%2F%3E%3C%2Fsvg%3E");
}

.isd-feat--permission::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021.5s7.5-3.6%207.5-9.5V5.2L12%202.5%204.5%205.2V12c0%205.9%207.5%209.5%207.5%209.5Z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210.6%22%20r%3D%221.7%22%2F%3E%3Cpath%20d%3D%22M12%2012.3v2.6%22%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021.5s7.5-3.6%207.5-9.5V5.2L12%202.5%204.5%205.2V12c0%205.9%207.5%209.5%207.5%209.5Z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210.6%22%20r%3D%221.7%22%2F%3E%3Cpath%20d%3D%22M12%2012.3v2.6%22%2F%3E%3C%2Fsvg%3E");
}

.isd-feat--schedule::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.2%22%20y%3D%224.4%22%20width%3D%2217.6%22%20height%3D%2216.4%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%202.5v3.8M16%202.5v3.8M3.2%2010h17.6%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2215.4%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M12%2013.9v1.6l1.2.8%22%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.2%22%20y%3D%224.4%22%20width%3D%2217.6%22%20height%3D%2216.4%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%202.5v3.8M16%202.5v3.8M3.2%2010h17.6%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2215.4%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M12%2013.9v1.6l1.2.8%22%2F%3E%3C%2Fsvg%3E");
}

@media (max-width: 767px) {
  .isd-feat { font-size: 16px; gap: 14px; }
  .isd-feat::before { width: 56px; height: 56px; width: min(56px, 28%); max-width: 56px; height: auto; }
}


/* ============================================================
   CTA（体験版ダウンロード）
   旧CTAは「ロゴ＋コピー＋画面写真」を1枚に焼き込んだ緑背景の画像だった。
   これをロゴSVG・テキスト・画面写真の3要素に分け、背景は塗りにする。
   ============================================================ */

#trial,
#cta,
.cta {
  background-color: var(--isd-primary);
  background-image: none;
}

.isd-cta,
.isd-cta p,
.isd-cta h2,
.isd-cta h3,
.isd-cta h4 { color: #fff; }

.isd-cta .isd-cta-body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap;
  text-align: left;
  padding: 10px 0;
}

/* 画面写真。横幅の広い画像でも右のコピーが折り返さないよう上限を割合で決める */
.isd-cta .isd-cta-shot { flex: 0 1 auto; min-width: 0; max-width: 44%; }
.isd-cta .isd-cta-shot img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 280px;
  height: auto;
  border-radius: var(--isd-radius);
}

/* ロゴ＋コピー */
.isd-cta .isd-cta-copy { flex: 0 1 420px; max-width: 50%; }
.isd-cta .isd-cta-logo {
  display: block;
  width: 250px;
  max-width: 100%;
  height: auto;
  margin: 0 0 20px;
}
.isd-cta .isd-cta-lead {
  margin: 0;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.55;
}

/* トップページなど、半分幅に2つ並べる場合は縦積み（旧画像と同じ並び） */
.isd-cta .isd-cta-body--stack {
  flex-direction: column;
  gap: 18px;
  text-align: center;
}
.isd-cta .isd-cta-body--stack .isd-cta-copy,
.isd-cta .isd-cta-body--stack .isd-cta-shot { max-width: 100%; }
.isd-cta .isd-cta-body--stack .isd-cta-logo {
  width: 210px;
  margin: 0 auto;
}
.isd-cta .isd-cta-body--stack .isd-cta-shot img {
  height: 220px;
  max-height: 220px;
  width: auto;
  margin: 0 auto;
}
.isd-cta .isd-cta-body--stack .isd-cta-lead { font-size: 18px; }

@media (max-width: 767px) {
  .isd-cta .isd-cta-body { gap: 24px; text-align: center; }
  .isd-cta .isd-cta-copy,
  .isd-cta .isd-cta-shot { flex: 1 1 100%; max-width: 100%; }
  .isd-cta .isd-cta-logo { margin: 0 auto 16px; }
  .isd-cta .isd-cta-lead { font-size: 18px; }
  .isd-cta .isd-cta-shot img { max-height: 220px; margin: 0 auto; }
  .isd-cta .isd-cta-body--stack .isd-cta-shot img { height: auto; max-height: 200px; }
}

/* ============================================================
   記事ヒーローのカテゴリー表示（.entry_meta .categories）

   ヒーローの背景写真が暗いため、既定のインディゴ文字（skin.css の
   #page .entry_meta a）では読めない。背景色付きのチップにする。

   カテゴリーの区切り「, 」はタグではなく素のテキストのため、
   セレクタで指定できない。親の font-size を 0 にし、
   子要素だけ元に戻すことで見えなくする。
   ============================================================ */

/* 記事ヒーローの高さは style.css の body.insights #feature で 400px 固定。
   カテゴリーを1行分下に置くと内容がはみ出し、白いチップが
   ヒーロー外の白い帯に重なって見えなくなる。
   固定値を下限に読み替えて、必要なときだけ伸びるようにする。
   ・チップを表示する記事だけが対象（:has）
   ・高さを固定しているのは insights のみなので、他は従来のまま触らない */
body.single.insights #feature:has(.entry_meta .categories a:not(:last-child)) {
  height: auto;
  min-height: 400px;
}

/* .feature-introduce は上下中央揃えのため flex にしてあり、そのままだと
   entry_meta が本文の「横」に並んでしまう。1行を占有させて下に落とす */
#feature .entry_meta {
  flex: 0 0 100%;
  width: 100%;
  margin: 0;
  text-align: center;
}
/* 表示するチップが1つも無い記事（カテゴリーが1個だけの30件）では
   余白を作らない。ヒーローの高さを従来のまま保つため */
#feature .entry_meta:has(.categories a:not(:last-child)) { margin: 16px 0 26px; }

#feature .entry_meta .categories {
  font-size: 0;                 /* 区切りの「, 」を消す */
  line-height: 1.2;
}
#feature .entry_meta .categories > * { font-size: 13px; }
/* 先頭のフォルダアイコンは、既存の style.css で .meta-icon が
   display:none にされているため表示されない（従来どおり） */

#feature .entry_meta .categories a,
#feature .entry_meta .categories a:link,
#feature .entry_meta .categories a:visited {
  display: inline-block;
  margin: 0 8px 8px 0;
  padding: 5px 14px;
  border-radius: 999px;
  background: #fff;
  color: var(--isd-primary);
  font-weight: 700;
  text-decoration: none;
  vertical-align: middle;
}
#feature .entry_meta .categories a:hover,
#feature .entry_meta .categories a:active,
#feature .entry_meta .categories a:focus {
  background: var(--isd-primary);
  color: #fff;
}

/* 末尾のカテゴリー（「利用シーン」「製品カタログ・チラシ」などの
   セクション名）は、既存の style.css の
   .entry_meta a:last-child { display:none } で従来から隠している。
   チップ化の display 指定が勝ってしまうため、ここで隠し直す */
#feature .entry_meta .categories a:last-child { display: none; }

/* 背景写真の無いヒーロー（明るい面）では配色を反転する */
body.isd-hero-light #feature .entry_meta .categories a,
body.isd-hero-light #feature .entry_meta .categories a:link,
body.isd-hero-light #feature .entry_meta .categories a:visited {
  background: var(--isd-primary);
  color: #fff;
}
body.isd-hero-light #feature .entry_meta .categories a:hover,
body.isd-hero-light #feature .entry_meta .categories a:active,
body.isd-hero-light #feature .entry_meta .categories a:focus {
  background: var(--isd-primary-dark);
  color: #fff;
}

/* ------------------------------------------------------------
   句の途中で改行させない（見出しの意図した位置でだけ折り返す）
   句ごとに inline-block で包む。画面幅が句より狭いときだけ、
   その句の中で折り返す（はみ出しは起こさない）。
   Chrome 系では日本語の文節単位で折り返す（auto-phrase）。
   ------------------------------------------------------------ */
.isd-nobr {
  display: inline-block;
  word-break: auto-phrase;
}