@charset "UTF-8";
/***** Categories Icon Settings *****/
/*
Bootstrap Icons (MIT License、帰属表示不要)
https://icons.getbootstrap.com/

このテーマのアイコンフォントはBootstrap Iconsに統一している。
カテゴリカードのアイコンボックス・カテゴリページ見出しアイコンは塗りつぶし(-fill)
バリエーション、ログインボタン・記事一覧の矢印・賛成数・チャット/フォームボタン等の
小さなアイコンも本フォント(content にアイコンのコードポイントを指定)。
フォント本体は assets/bootstrap-icons.woff2 としてテーマに同梱しており、
外部URLは参照していない。
(以前はこれらの小さなアイコンに、raw.githubusercontent.com から直接読み込む
Entypoフォントを使っていたが、外部依存をなくすため廃止した。
検索窓の虫眼鏡はフォントではなくSVG画像。.search::before を参照)
*/
@font-face {
  font-family: "Bootstrap Icons";
  src: url(/hc/theming_assets/01M3ZY4EA3VQPH7M22QKYCWBEF) format("woff2");
  font-weight: normal;
  font-style: normal;
}
a.blocks-item-link::before {
  /* カテゴリーブロック共通のアイコンボックス(縁取りなしの84x84px正方形)。 */
  font-family: "Bootstrap Icons";
  font-size: 64px;
  line-height: 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 84px;
  width: 84px;
  height: 84px;
  margin-right: 16px;
  box-sizing: border-box;
}
/* 見出し(アイコン+カテゴリ名)を縦方向中央揃えにするため、親(h1)自体を
   flexコンテナにしている。 */
.subhead h1 {
  align-items: center;
  display: flex;
}
.subhead h1:before {
  display: none;
}
@media (min-width: 768px) {
  /* カタログ(カテゴリー)ページ見出しのアイコン(縁取りなし)。 */
  .subhead h1:before {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    font-family: "Bootstrap Icons";
    font-size: 36px;
    line-height: 1;
    font-weight: normal;
    text-align: center;
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    margin-right: 10px;
    box-sizing: border-box;
  }
}


/*
【新しいカテゴリのアイコンについて】
新しいカテゴリを作成しても、このファイルにそのカテゴリ用の設定を追加
しない限り、下の「デフォルト」ルールがそのまま適用される。つまり新しい
カテゴリのアイコンは、何もしなければ自動的にbook(塗りつぶし無し、
線画)になる。

【特定のカテゴリに別のアイコンを設定する手順】
1. 使いたいアイコンを選ぶ
   https://icons.getbootstrap.com/ でアイコンを探し、名前を控える
   (例: "gear-fill")。本テーマではフォントに厚み・実在感が出る
   塗りつぶし(-fill)系を基本として使っている(カテゴリ名に「ガイド」を
   含むものだけ、例外的に線画のbookを使用。検索結果の虫眼鏡・リリース
   ノートの新聞アイコンは、塗りつぶし版が存在しないため線画のまま)。

2. アイコン名に対応するコードポイント(content値)を調べる
   アイコン名(例: "gear-fill")だけでは実際には使えず、本フォントの
   どの文字コード(例: "\f3e2")に割り当てられているかを調べる必要が
   ある。調べ方は以下のいずれか。
     a. https://github.com/twbs/icons/blob/main/font/bootstrap-icons.json
        を開き、アイコン名をキーにして16進のコードポイントを検索する
        (Bootstrap Icons公式が配布している、アイコン名→コードポイント
        の対応表そのもの)。
     b. ローカルに Node.js がある場合は
        npm install bootstrap-icons
        を実行し、
        node_modules/bootstrap-icons/font/bootstrap-icons.css
        内の該当行
        .bi-gear-fill::before { content: "\f3e2"; }
        を探す(このテーマのassets/bootstrap-icons.woff2も、同じ
        bootstrap-iconsパッケージ内のフォントファイルをコピーしたもの)。

3. 下のカテゴリ一覧と同じ形式でルールを追加する
   カテゴリIDは、Zendesk管理画面のカテゴリURL末尾の数字で確認できる。
   下の各カテゴリのルールのように、開き中括弧の直後に「カテゴリ名を
   示すメモ」をコメントとして添えてよいが、そのコメントの中に
   半角の「*」「/」を連続して書かないこと(コメントがそこで途切れて
   しまい、このコメント全体やこの直後のルールが壊れる)。

   記述例(実際にCSSへ追記する際は、コメント記号を含むこの部分全体を
   一度ファイルの外にコピーしてから使うこと):
   セレクタ1: #blocks-cat-<カテゴリID> .blocks-item-link
   セレクタ2: .subhead h1.cat-<カテゴリID>
   のそれぞれに ::before を付けたものをカンマ区切りで並べ、
   宣言ブロックの中に content: "\f3e2"; のようにコードポイントを書く。
   この2つのセレクタ(カテゴリカードのアイコン・カテゴリページ見出し)は
   必ずセットで指定すること(どれか1つでも欠けると、その箇所だけデフォルトの
   bookに戻ってしまう)。左サイドバーのカテゴリ・セクション一覧には、
   アイコンは表示しない。
*/
.blocks-item .blocks-item-link::before,
.subhead h1::before {/*デフォルト(book、塗りつぶし無し)*/
  content: "\f194";
}


.subhead h1.results::before {/*検索結果*/
  content: "\f52a";
}
.subhead h1.newrequest::before {/*お問い合わせ*/
  content: "\f32c";
}
.subhead h1.errorpage::before {/*エラー*/
  content: "\f33a";
  border: none;
  font-size: 30px;
}
.subhead h1.cat-360001582951::before {/*お知らせ*/
  content: "\f189";
}
#blocks-cat-115000185131 .blocks-item-link::before,
.subhead h1.cat-115000185131::before {/*ご利用ガイド*/
  content: "\f194";
}
#blocks-cat-115000207651 .blocks-item-link::before,
.subhead h1.cat-115000207651::before {/*BizRobo*/
  content: "\f430";
}
#blocks-cat-115000207671 .blocks-item-link::before,
.subhead h1.cat-115000207671::before {/*WinActor*/
  content: "\f430";
}
#blocks-cat-58255186197017 .blocks-item-link::before,
.subhead h1.cat-58255186197017::before {/*使い方*/
  content: "\f504";
}
#blocks-cat-55090246397849 .blocks-item-link::before,
.subhead h1.cat-55090246397849::before {/*ワークスペース　クイックスタート*/
  content: "\f844";
}
#blocks-cat-56076222251801 .blocks-item-link::before,
.subhead h1.cat-56076222251801::before {/*コネクタ　クイックスタート*/
  content: "\f844";
}
#blocks-cat-38791125041561 .blocks-item-link::before,
.subhead h1.cat-38791125041561::before {/*作業プロセス*/
  content: "\f44c";
}
#blocks-cat-38764283591193 .blocks-item-link::before,
.subhead h1.cat-38764283591193::before {/*ワークスペース利用者ガイド*/
  content: "\f194";
}
#blocks-cat-38764332818585 .blocks-item-link::before,
.subhead h1.cat-38764332818585::before {/*ワークスペース管理者・運用者ガイド*/
  content: "\f194";
}
#blocks-cat-53658138379289 .blocks-item-link::before,
.subhead h1.cat-53658138379289::before {/*組織管理・テナント設定ガイド*/
  content: "\f194";
}
#blocks-cat-49391407724185 .blocks-item-link::before,
.subhead h1.cat-49391407724185::before {/*コネクタ環境運用ガイド*/
  content: "\f194";
}
#blocks-cat-51381478064921 .blocks-item-link::before,
.subhead h1.cat-51381478064921::before {/*開発者ガイド*/
  content: "\f194";
}
#blocks-cat-56319445894425 .blocks-item-link::before,
.subhead h1.cat-56319445894425::before {/*製品ナレッジ*/
  content: "\f38a";
}
#blocks-cat-44701176253337 .blocks-item-link::before,
.subhead h1.cat-44701176253337::before {/*ベストプラクティス*/
  content: "\f468";
}
#blocks-cat-38764275434521 .blocks-item-link::before,
.subhead h1.cat-38764275434521::before {/*リリースノート*/
  content: "\f4a3";
}
#blocks-cat-38764466444825 .blocks-item-link::before,
.subhead h1.cat-38764466444825::before {/*困ったときは*/
  content: "\f33a";
}
#blocks-cat-44493027869081 .blocks-item-link::before,
.subhead h1.cat-44493027869081::before {/*Category for Product Doc Writer Only*/
  content: "\f604";
}
#blocks-cat-39067868338585 .blocks-item-link::before,
.subhead h1.cat-39067868338585::before {/*Quollio 社内 限定記事*/
  content: "\f71d";
}
#blocks-cat-39067973067289 .blocks-item-link::before,
.subhead h1.cat-39067973067289::before {/*ドキュメントライター限定　ドキュメントの書き方*/
  content: "\f604";
}
/***** Noto Sans *****/
@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 200;
  src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 300;
  src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-DemiLight.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-DemiLight.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-DemiLight.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 400;
  src: local('NotoSansJP-Regular.otf'),
       url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 500;
  src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 700;
  src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.otf) format('opentype');
}


/***** Base *****/
* {
  box-sizing: border-box;
}

body {
  background-color: #FFFFFF;
  color: #333333;
  font-family: 'Lexend', 'BIZ UDPGothic', 'Hiragino Kaku Gothic ProN', Meiryo, メイリオ, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

#user-menu .my-activities {
  display: none;
}

@media (min-width: 1024px) {
  body > main {
    min-height: 65vh;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Lexend', 'BIZ UDPGothic', 'Hiragino Kaku Gothic ProN', Meiryo, メイリオ, sans-serif;
  font-weight: 400;
  margin-top: 0;
}

h1 {
  font-size: 30px;
}

h2 {
  font-size: 22px;
}

h3 {
  font-size: 18px;
  font-weight: 600;
}

h4 {
  font-size: 16px;
}

a {
  color: rgba(28, 100, 242, 1);
  text-decoration: none;
}

a:hover, a:active, a:focus {
  text-decoration: underline;
}

input,
textarea {
  color: #000;
  font-size: 14px;
}

input {
  font-weight: 300;
  max-width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: border .12s ease-in-out;
}

input:focus {
  border: 1px solid rgba(17, 25, 40, 1);
}

input[disabled] {
  background-color: #ddd;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url(/hc/theming_assets/01KPMEXHFRNQW7EWF70T87HKR3) no-repeat #fff;
  background-position: right 10px center;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 30px 8px 10px;
  outline: none;
  color: #555;
  width: 100%;
}

select:focus {
  border: 1px solid rgba(17, 25, 40, 1);
}

select::-ms-expand {
  display: none;
}

textarea {
  border: 1px solid #ddd;
  border-radius: 2px;
  resize: vertical;
  width: 100%;
  outline: none;
  padding: 10px;
}

textarea:focus {
  border: 1px solid rgba(17, 25, 40, 1);
}

.container {
/*   max-width: 1160px; */
  max-width: 90%;
  margin: 0 auto;
  padding: 0 5%;
}

@media (min-width: 1160px) {
  .container {
    padding: 0;
    width: 90%;
  }
}

.container-divider {
  border-top: 1px solid #ddd;
  margin-bottom: 20px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.error-page {
  max-width: 1160px;
  margin: 30px auto;
  padding: 0 5%;
}

@media (min-width: 1160px) {
  .error-page {
    padding: 0;
    width: 90%;
  }
}

.dropdown-toggle::after {
  color: inherit;
}

/***** Buttons *****/
.button, [role="button"] {
  border: 1px solid rgba(17, 25, 40, 1);
  border-radius: 4px;
  color: rgba(17, 25, 40, 1);
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  line-height: 2.34;
  margin: 0;
  padding: 0 20px;
  text-align: center;
  transition: background-color .12s ease-in-out, border-color .12s ease-in-out, color .15s ease-in-out;
  user-select: none;
  white-space: nowrap;
  width: 100%;
  -webkit-touch-callout: none;
}

@media (min-width: 768px) {
  .button, [role="button"] {
    width: auto;
  }
}

.button::after, [role="button"]::after {
  color: rgba(17, 25, 40, 1);
}

.button:hover, .button:active, .button:focus, .button[aria-selected="true"], [role="button"]:hover, [role="button"]:active, [role="button"]:focus, [role="button"][aria-selected="true"] {
/*   background-color: rgba(17, 25, 40, 1); */
  color: rgba(17, 25, 40, 1);
  text-decoration: none;
}

.button[aria-selected="true"]:hover, .button[aria-selected="true"]:focus, .button[aria-selected="true"]:active, [role="button"][aria-selected="true"]:hover, [role="button"][aria-selected="true"]:focus, [role="button"][aria-selected="true"]:active {
  background-color: #000;
  border-color: #000;
}

.button[data-disabled], [role="button"][data-disabled] {
  cursor: default;
}

.button-large, input[type="submit"] {
  background-color: rgba(17, 25, 40, 1);
  border: 0;
  border-radius: 4px;
  color: rgba(17, 25, 40, 1);
  font-size: 14px;
  font-weight: 400;
  line-height: 2.72;
  min-width: 190px;
  padding: 0 1.9286em;
  width: 100%;
}

@media (min-width: 768px) {
  .button-large, input[type="submit"] {
    width: auto;
  }
}

.button-large:hover, .button-large:active, .button-large:focus, input[type="submit"]:hover, input[type="submit"]:active, input[type="submit"]:focus {
  background-color: #000;
}

.button-large[disabled], input[type="submit"][disabled] {
  background-color: #ddd;
}

.button-secondary {
  color: #666;
  border: 1px solid #ddd;
  background-color: transparent;
}

.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: #333333;
  border: 1px solid #ddd;
  background-color: #f7f7f7;
}

/***** Tables *****/
.table {
  width: 100%;
  table-layout: fixed;
}

@media (min-width: 768px) {
  .table {
    table-layout: auto;
  }
}

.table th,
.table th a {
  color: #666;
  font-size: 13px;
  font-weight: 300;
  text-align: left;
}

[dir="rtl"] .table th, [dir="rtl"]
.table th a {
  text-align: right;
}

.table tr {
  border-bottom: 1px solid #ddd;
  display: block;
  padding: 20px 0;
}

@media (min-width: 768px) {
  .table tr {
    display: table-row;
  }
}

.table td {
  display: block;
}

@media (min-width: 768px) {
  .table td {
    display: table-cell;
  }
}

@media (min-width: 1024px) {
  .table td, .table th {
    padding: 20px 30px;
  }
}

@media (min-width: 768px) {
  .table td, .table th {
    padding: 10px 20px;
    height: 60px;
  }
}

/***** Forms *****/
.form {
  max-width: 650px;
  padding-bottom: 50px;
}

.form-field ~ .form-field {
  margin-top: 25px;
}

.form-field label {
  display: block;
  font-size: 13px;
  margin-bottom: 5px;
}

.form-field input {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  width: 100%;
}

.form-field input:focus {
  border: 1px solid rgba(17, 25, 40, 1);
}

.form-field input[type="text"] {
  border: 1px solid #ddd;
  border-radius: 4px;
}

.form-field input[type="text"]:focus {
  border: 1px solid rgba(17, 25, 40, 1);
}

.form-field input[type="checkbox"] {
  width: auto;
}

.form-field .nesty-input {
  border-radius: 4px;
  height: 40px;
  line-height: 40px;
  outline: none;
  vertical-align: middle;
}

.form-field .nesty-input:focus {
  border: 1px solid rgba(17, 25, 40, 1);
  text-decoration: none;
}

.form-field textarea {
  vertical-align: middle;
}

.form-field input[type="checkbox"] + label {
  margin: 0 0 0 10px;
}

.form-field.required > label::after {
  content: "*";
  color: #f00;
  margin-left: 2px;
}

.form-field p {
  color: #666;
  font-size: 12px;
  margin: 5px 0;
}

[data-loading="true"] input,
[data-loading="true"] textarea {
  background: transparent url(/hc/theming_assets/01J7JBQWKVMPQ77XNG2X1WN9AM) 99% 50% no-repeat;
  background-size: 16px 16px;
}

.form footer {
  margin-top: 40px;
  padding-top: 30px;
}

.form footer a {
  color: #666;
  cursor: pointer;
  margin-right: 15px;
}

.form .suggestion-list {
  font-size: 13px;
  margin-top: 30px;
}

.form .suggestion-list label {
  border-bottom: 1px solid #ddd;
  display: block;
  padding-bottom: 5px;
}

.form .suggestion-list li {
  padding: 10px 0;
}

.form .suggestion-list li a:visited {
  color: #093c9f;
}

h2.form-title {
  margin-top: 30px;
}
@media (min-width: 768px) {
  h2.form-title {
    margin-top: 0;
  }
}

.loader {
  width: 32px;
  height: 32px;
  position: absolute;
  top: 200px;
  left: 0;
  right: 0;
  margin: auto;
}

/***** Header *****/
.header {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
  position: relative;
  align-items: center;
  display: flex;
  height: 71px;
  justify-content: space-between;
}

@media (min-width: 1160px) {
  .header {
    padding: 0;
    width: 90%;
  }
}

.logo img {
  max-height: 30px;
  margin-top: 5px;
}

.user-nav {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .user-nav {
    position: relative;
  }
}

.user-nav[aria-expanded="true"] {
  background-color: #fff;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15), 0 4px 10px 0 rgba(0, 0, 0, 0.1);
  border: solid 1px #ddd;
  right: 0;
  left: 0;
  top: 71px;
  z-index: 1;
}

.user-nav[aria-expanded="true"] > a {
  display: block;
  margin: 20px;
}

.nav-wrapper a {
  border: 0;
  color: rgba(28, 100, 242, 1);
  display: none;
  font-size: 14px;
  padding: 0 20px 0 0;
  width: auto;
}

@media (min-width: 768px) {
  .nav-wrapper a {
    display: inline-block;
  }
}

[dir="rtl"] .nav-wrapper a {
  padding: 0 0 0 20px;
}

.nav-wrapper a:hover, .nav-wrapper a:focus, .nav-wrapper a:active {
  background-color: transparent;
  color: rgba(28, 100, 242, 1);
  text-decoration: underline;
}

/*
  .sign-in added alongside the pre-existing .login selector: the actual
  template (both this theme's header.hbs and production's) renders the
  sign-in link with class="sign-in", not class="login" -- .login appears
  to be left over from an earlier version of the template and was never
  reachable, which is why this button styling (border, hover fill, and the
  login icon below) never actually applied to it.
*/
.nav-wrapper a.login,
.nav-wrapper a.sign-in {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid rgba(28, 100, 242, 1);
  border-radius: 4px;
}
.nav-wrapper a.login:hover,
.nav-wrapper a.sign-in:hover {
  text-decoration: none;
  background-color: rgba(28, 100, 242, 1);
  color: #fff;
}

/*
  .nav-wrapper a (above) sets color:rgba(28, 100, 242, 1) and is more specific than
  the newer engine's bare .ask-ai class, so without this override the
  "Ask AI" button's own icon/label would render in the same blue as its
  background and effectively disappear. Same override pattern as
  .nav-wrapper a.login just above.
*/
.nav-wrapper a.ask-ai,
.nav-wrapper a.ask-ai:visited {
  display: inline-flex;
  color: rgba(17, 25, 40, 1);
}
.nav-wrapper a.ask-ai:hover,
.nav-wrapper a.ask-ai:focus,
.nav-wrapper a.ask-ai:active {
  background-color: rgba(28, 100, 242, 1);
  border-color: rgba(28, 100, 242, 1);
  color: rgba(17, 25, 40, 1);
  text-decoration: none;
}

.nav-wrapper .icon-menu {
  display: inline-block;
  margin-right: 10px;
  color: rgba(28, 100, 242, 1);
}

@media (min-width: 768px) {
  .nav-wrapper a.login,
  .nav-wrapper a.sign-in {
    padding: 6px 20px;
  }
  .nav-wrapper a.login::before,
  .nav-wrapper a.sign-in::before {
    content: "\f1be"; /* bi-box-arrow-in-right (ログイン) */
    font-family: "Bootstrap Icons";
    font-style: normal;
    font-weight: normal;
    vertical-align: -0.125em;
    margin-right: 5px;
  }
  .nav-wrapper .icon-menu {
    display: none;
  }
}

[dir="rtl"] .nav-wrapper .icon-menu {
  margin-left: 10px;
  margin-right: 0;
}

/***** User info in header *****/
.user-info {
  display: inline-block;
}

.user-info .dropdown-toggle::after {
  display: none;
}

@media (min-width: 768px) {
  .user-info .dropdown-toggle::after {
    display: inline-block;
  }
}

.user-info > [role="button"] {
  border: 0;
  color: rgba(28, 100, 242, 1);
  min-width: 0;
  padding: 0;
  white-space: nowrap;
}

.user-info > [role="button"]:hover {
  color: rgba(28, 100, 242, 1);
  background-color: transparent;
}

.user-info > [role="button"]::after {
  color: rgba(28, 100, 242, 1);
  padding-right: 15px;
}

[dir="rtl"] .user-info > [role="button"]::after {
  padding-left: 15px;
  padding-right: 0;
}

#user #user-name {
  display: none;
  font-size: 14px;
}

@media (min-width: 768px) {
  #user #user-name {
    display: inline-block;
  }
}

#user #user-name:hover {
  text-decoration: underline;
}

/***** User avatar *****/
.user-avatar {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
}

.avatar {
  display: inline-block;
  position: relative;
}

.avatar img {
  height: 40px;
  width: 40px;
}

.avatar .icon-agent::before {
  background-color: rgba(17, 25, 40, 1);
  border: 2px solid #fff;
  border-radius: 50%;
  bottom: -4px;
  color: rgba(17, 25, 40, 1);
  content: "\f4da"; /* bi-person-fill */
  font-size: 14px;
  height: 14px;
  line-height: 14px;
  position: absolute;
  right: -2px;
  text-align: center;
  width: 14px;
}

/***** Footer *****/
.footer {
  border-top: 1px solid #ddd;
  padding: 0 0 20px 0;
}
.footer a {
  color: #666;
}
.footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
}
.footer-upper {
  background-color: #f6f6f6;
  padding: 30px 0;
}
.footer-upper .footer-inner {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}
.footer-upper .footer-inner ul {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  width: 100%;
}
.footer-upper .footer-inner ul li {
  text-align: center;
  line-height: 2.5em;
}
.footer-upper .footer-inner img {
  max-height: 34px;
  width: auto;
  margin: 10px;
}
.footer-bottom {
  border-top: 1px solid #ddd;
}
.footer-bottom .footer-inner {
  width: 100%;
  margin-top: 20px;
  display: flex;
  flex-flow: column-reverse nowrap;
  justify-content: center;
}
.footer-bottom .footer-inner > *{
  text-align: center;
}
.footer-bottom .footer-inner .copy {
  font-size: 12px;
  font-family: "Quicksand";
  margin: 0;
}
.footer img.footerLogo {
  width: 150px;
  height: auto;
}
.footer-language-selector {
  color: #666;
  display: inline-block;
  font-weight: 300;
  font-size: 13px;
  margin-top: 10px;
}
.footer-language-selector .dropdown-toggle {
  display: inline-block;
  border: 1px solid #b3b3b3;
  border-radius: 4px;
  padding: 5px 10px;
}
.footer .dropdown-menu-end {
  left: 0 !important;
}
@media (min-width: 1160px) {
  .footer-inner {
    padding: 0;
    width: 90% !important;
  }
}

@media (min-width: 768px) {
  .footer {
    padding: 0 0 30px 0;
    margin-top: 60px;
  }
  .footer-upper {
    padding: 50px 0;
  }
  .footer-upper .footer-inner ul {
    flex-flow: row nowrap;
    justify-content: space-around;
  }
  .footer-upper .footer-inner ul li {
    text-align: center;
    line-height: 1.4em;
  }
  .footer-upper .footer-inner img {
    margin: 0;
  }
  .footer-bottom .footer-inner {
    align-items: center;
    margin-top: 30px;
    flex-flow: row nowrap;
    justify-content: space-between;
  }
  .footer-language-selector {
    margin-left: 30px;
    margin-top: 0;
  }
  .footer-language-selector .dropdown-toggle {
    padding: 0 10px;
  }
}

/***** Breadcrumbs *****/
.breadcrumbs {
  margin: 0 0 15px 0;
  padding: 0;
}

@media (min-width: 768px) {
  .breadcrumbs {
    margin: 0;
  }
}

.breadcrumbs li {
  color: #666;
  display: inline;
  font-weight: 300;
  font-size: 13px;
  max-width: 450px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/*
  パンくずリスト先頭(ホーム)の家アイコンを非表示にしている。{{breadcrumbs}}は
  Zendesk組み込みヘルパーでマークアップを直接編集できないため、CSS側で
  アイコン用の::beforeを生成しないようにする方式を取っている。
*/
.breadcrumbs li + li::before {
  content: ">";
  margin: 0 4px;
}
.breadcrumbs li a:visited {
  color: rgba(28, 100, 242, 1);
}

/***** Search field *****/
.search {
  position: relative;
}
.search input[type="search"] {
  /*
    検索欄の見た目(ホーム画面・記事ページ等の検索窓で共通)。
    PS Portal(QTテンプレート Type3)と同じ表現:
     - くぼみ用の inset 影は使わない
     - 薄いグレーの枠線(黒22%)の内側に白い1pxの線を重ねた「二重のふち」
       (ホーム画面の検索窓の見た目に全ページを統一。PS Portalの #848F99 より薄い)
       (PS Portalは外枠を .search 側に付けているが、このテーマは .search の
       高さが40px固定でクリアボタンも中に絶対配置しているため、外枠は
       入力欄自体の border、内側の白線は inset 影で描いて同じ見た目にしている)
     - 背景は白80%で、ヒーロー/サブヘッドの背景画像がうっすら透ける
    フォーカス時の変化は下の .search:focus-within を参照。
  */
  border: 1px solid rgba(0, 0, 0, 0.22);
  border-radius: 30px;
  box-shadow: inset 0 0 0 1px #fff;
  box-sizing: border-box;
  color: #999;
  height: 40px;
  padding-left: 40px;
  padding-right: 20px;
  -webkit-appearance: none;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  transition: border-color 0.12s ease-in-out, background-color 0.12s ease-in-out;
}
[dir="rtl"] .search input[type="search"] {
  padding-right: 40px;
  padding-left: 20px;
}
/* プレースホルダー(「ドキュメント・ナレッジを検索」等)は従来の見た目
   (Chromeの既定色 #757575)に固定。ブラウザによってはプレースホルダーが
   入力文字の色を引き継ぐため、下の :focus で文字色を濃くしても
   プレースホルダーまで濃くならないよう明示している。 */
.search input[type="search"]::placeholder {
  color: #757575;
  opacity: 1;
}
/*
  フォーカス時(クリックして入力しようとしたとき)。
  - 背景: 完全な白
  - 枠線: ブランドカラー(PS Portalと同じ)
  - 入力中のキーワード: 本文と同程度の濃い色(#222)。PS Portalは#555
  :focus ではなく :focus-within(PS Portalと同じ)にしているのは、
  クリアボタン(×)にフォーカスが移っても枠や背景が元に戻らないようにするため。
*/
.search:focus-within input[type="search"] {
  background-color: #fff;
  border-color: rgba(17, 25, 40, 1);
  color: #222;
}
/*
  Hides the browser's own native search-input "clear" icon so it doesn't
  double up with the .clear-button added just below (Chromium/WebKit still
  render this native control once the field has a value, even with the
  plain -webkit-appearance: none above -- it needs these pseudo-elements
  targeted directly). Matches the equivalent rule already present in the
  stock Copenhagen theme this package was originally built from.
*/
.search input[type="search"]::-webkit-search-decoration,
.search input[type="search"]::-webkit-search-cancel-button,
.search input[type="search"]::-webkit-search-results-button,
.search input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}
/*
  虫眼鏡アイコン。PS Portalと同じ、細い線で描いたSVG(グレー #999)。
  (以前はEntypoフォントの文字だったが、Entypo廃止に伴いSVGに置き換えた)
  pointer-events: none で、アイコン上をクリックしても入力欄にフォーカスが入る。
*/
.search::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 12 12'%3E%3Ccircle cx='4.5' cy='4.5' r='4' fill='none' stroke='%23999'/%3E%3Cpath stroke='%23999' stroke-linecap='round' d='M11 11L7.5 7.5'/%3E%3C/svg%3E");
  display: block;
  width: 16px;
  height: 16px;
  line-height: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 15px;
  z-index: 1;
  pointer-events: none;
}
[dir="rtl"] .search::before {
  right: 15px;
  left: auto;
}
/*
  Zendesk's built-in accessible "clear search" button: script.js's
  appendClearSearchButton() (inherited from the latest stock Copenhagen
  theme this package was originally built from) unconditionally appends a
  <button class="clear-button"> inside every form[role="search"] on page
  load, regardless of theme, and toggles a "search-has-value" class on the
  form once the field has text. The production theme's script.js never had
  this (much older, independently-forked) accessibility feature, so its
  style.css never needed matching CSS -- which is why this rule went
  missing here once style.css was replaced wholesale with production's,
  leaving the button to render as raw/unstyled browser button chrome,
  out of place below the search field, in the real Zendesk account even
  though production itself never shows this (confirmed by the user).
  Positioned to match this theme's existing .search icon convention
  (absolutely placed within .search, hidden until search-has-value) rather
  than reusing stock Copenhagen's own separate flex-based .search layout,
  which would conflict with the rounded/inset-shadow input design already
  used throughout this theme.
*/
.search .clear-button {
  display: none;
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  color: #999;
  cursor: pointer;
}
.search .clear-button:hover,
.search .clear-button:focus {
  color: rgba(17, 25, 40, 1);
  outline: 0;
}
.search-has-value .clear-button {
  display: flex;
}
.search-has-value input[type="search"] {
  padding-right: 40px;
}
[dir="rtl"] .search .clear-button {
  right: auto;
  left: 15px;
}
[dir="rtl"] .search-has-value input[type="search"] {
  padding-right: 20px;
  padding-left: 40px;
}
.subhead {
  background-image: url(/hc/theming_assets/01JA7KA04PWAE5824SAHZEQQJC);
  background-position: center;
  background-size: cover;
}
.subhead .wrapcolor {
  padding: 20px;
}
.subhead .container {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  flex: 1 0 auto;
}
.subhead .container h1 {
  color: rgba(17, 25, 40, 1);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
  font-size: 22px;
  line-height: 30px;
}
.subhead .search {
  width: 100%;
  max-width: 500px;
  height: 40px;
  /*margin-top: 20px;*/
}
.subhead .range {
  width: 130px;
  border: 1px solid #fff;
  border-radius: 30px 0 0 30px;
  box-sizing: border-box;
  color: #666;
  height: 40px;
  padding-left: 15px;
  padding-right: 15px;
  -webkit-appearance: none;
  font-size: 12px;
  letter-spacing: 0;
}
.subhead .search.all input[type="search"] {
  border-radius: 30px 30px 30px 30px;
  padding-left: 45px;
}
.subhead .search.all::before {
  /* .search::before と同じSVGアイコンを使う(個別の上書きはしない) */
}
.subhead .search_wrap {
  display: flex;
  align-items: center;
}
/*
  検索結果画面(search_results.hbs)の検索窓だけ、ホーム画面(.hero .search)と
  同じ大きさで表示するための上書き。見出し(h1)と並ぶカテゴリ/セクション/記事
  ページの .subhead .search (幅500px / 1024px以上で280px固定) はそのまま。
  位置(左寄せ)は .subhead .container 側を一切変更していないため現状維持。
*/
.subhead .search.search-full {
  max-width: 600px;
}
@media (min-width: 768px) {
  .subhead .container h1 {
    /* .subhead h1より詳細度が高く、実際に効いているのはこちらの値 */
    font-size: 22px;
    line-height: 30px;
    padding-right: 40px;
  }
}
@media (min-width: 1024px) {
  .subhead .container {
    flex-flow: row nowrap;
    justify-content: space-between;
  }
  .subhead .container h1 {
    margin-bottom: 0;
  }
  .subhead .search {
    width: 280px;
    margin-top: 0;
  }
  .subhead .search.search-full {
    width: 100%;
    max-width: 600px;
  }
}

/***** Hero component *****/
.hero {
  background-image: url(/hc/theming_assets/01JA7KA04PWAE5824SAHZEQQJC);
  background-position: center;
  background-size: cover;
  height: auto;
  text-align: center;
  width: 100%;
  position: relative;
  margin-bottom: 0 !important;
}
.wrapcolor {
  padding: 0 20px;
/*   background-color: rgba(17, 25, 40, 1); */
  opacity: 0.85;
}
.hero-inner {
  position: relative;
  max-width: 1160px;
  margin: 0 auto;
  padding: 30px 0;
}
.hero-inner h1 {
  color: rgba(17, 25, 40, 1);
  font-size: 44px;
  font-family: "Quicksand";
  font-weight: 400;
  margin: 0;
  line-height: 1.3;
}
.hero-inner .faqtitle {
  margin-top: 60px;
  margin-bottom: 20px;
}
.hero-inner .faqtitle h2 {
  color: rgba(17, 25, 40, 1);
  margin-top: 0;
  margin-bottom: 0;
  display: inline-block;
  width: 180px;
}
.hero-inner .faqtitle hr {
  height: 1px;
  border: none;
  border-bottom: 1px solid #fff;
  display: inline-block;
  width: calc(50% - 100px);
}
.hero-inner p {
  color: rgba(17, 25, 40, 1);
}
.hero .search {
  max-width: 600px;
  margin: 0 auto;
}
.page-header {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 10px 0;
}

@media (min-width: 768px) {
  .hero {
    margin-bottom: 40px !important;
  }
  .hero-inner h1 {
    margin: 30px 0;
  }
  .page-header {
    align-items: baseline;
    flex-direction: row;
    margin: 0;
  }
}

.page-header .section-subscribe {
  flex-shrink: 0;
  margin-bottom: 10px;
}

@media (min-width: 768px) {
  .page-header .section-subscribe {
    margin-bottom: 0;
  }
}

.page-header h1 {
  flex-grow: 1;
  margin-bottom: 10px;
}

.page-header-description {
  font-style: italic;
  font-weight: 300;
  margin: 0 0 30px 0;
  word-break: break-word;
  font-size: 24px;
}

@media (min-width: 1024px) {
  .page-header-description {
    flex-basis: 100%;
  }
}

.page-header .icon-lock::before {
  content: "\f47a"; /* bi-lock-fill */
  font-size: 20px;
  position: relative;
  left: -5px;
  vertical-align: baseline;
}

.sub-nav {
  display: none;
}

@media (min-width: 768px) {
  .sub-nav {
    display: flex;
    align-items: baseline;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px 0 35px;
  }
}

@media (min-width: 768px) {
  .sub-nav input[type="search"] {
    min-width: 300px;
  }
}

.sub-nav input[type="search"]::after {
  font-size: 15px;
}

/***** News topics (最新のお知らせ) *****/
/*
  カテゴリカード(.blocks-item)と同じ枠線の色・角丸・影を付けたカード風の
  見た目にしている。カードと違いこの要素自体はリンクではない(クリックして
  遷移する先が無い)ため、:hover/:active時の変化(影が濃くなる、少し持ち
  上がる等)は付けていない。
  この要素は、もう「container」クラスを併せ持たせていない(左右の中央寄せ・
  余白は、home_page.hbs側で1段外側に用意した<div class="container">に
  任せている)。これにより、カードの枠線そのものが「最近表示したページ」の
  見出しや他のカテゴリカードの枠線と同じ横位置に揃う(カード内部の見出し・
  説明文はそこから.blocks-item同様にpadding分だけ内側に入る)。
*/
.newstopics {
  background-color: #fff;
  border: 1px solid rgba(143, 141, 141, 1);
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  padding: 20px;
  margin-top: 30px;
  margin-bottom: 15px;
  /* 表示/非表示はhome_page.hbs側のinline style="display:none;"と
     script.jsのrenderAnnouncementTopics()が切り替える(.home-recent-articles
     と同じ方式)。ここでCSS側からdisplay:noneを固定してしまうと、JS側で
     removeProperty('display')しても永久に表示されなくなるため指定しない。 */
}
.newstopics h4 {
  /* 「最近表示したページ」の見出し(.home-recent-articles-title)と
     同じフォントサイズ・太さに揃えている。 */
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 10px;
}
.newstopics h4::before {
  /* 見出し先頭のベルアイコン(お知らせカテゴリと同じbi-bell-fill)。
     フォント本体・色はカテゴリアイコン(a.blocks-item-link::before等、
     本ファイル先頭の「Categories Icon Settings」セクション参照)と共通。
     サイズは見出し文字(20px)の約1.5倍(30px)に拡大している。 */
  font-family: "Bootstrap Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 30px;
  content: "\f189";
  display: inline-block;
  margin-right: 10px;
  vertical-align: -7px;
  color: rgba(17, 25, 40, 1);
}
.newstopics h4 .blocks-item-description {
  /*
    ラベル「最新のお知らせ（更新日順、2件まで）」の続きに、同じ行で
    テキストを続けて表示するための上書き。blocks-item-description本体は
    カテゴリカードの説明文を2行までに制限する目的でdisplay:-webkit-box +
    margin-top + min-heightを持つブロック要素になっているため、そのままだと
    ここでも改行されてしまう。ここではそれらを打ち消してインライン表示に
    戻し、font-size/color/太さ(300)はそのまま維持している。
  */
  display: inline;
  margin: 0;
  min-height: 0;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  font-weight: 300;
}
.newstopics ul {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
}
.newstopics ul li {
  display: block;
  padding: 6px 0;
  border-top: 1px dotted #ddd;
  width: 100%;
}
.newstopics ul li:last-of-type {
  border-bottom: 1px dotted #ddd;
}
.newstopics ul li span {
  display: block;
}
@media (min-width: 768px) {
  .newstopics ul li:last-of-type {
    border-bottom: none;
  }
  .newstopics ul li span {
    display: inline;
    margin-right: 30px;
  }
}


/***** Home: 最近表示したページ (カテゴリカード表示域の上、5件) *****/
/*
  ホーム画面のカテゴリカードより上に表示する「最近表示したページ」(最大5件)。
  見出し・リストはscript.js側の_renderRecentArticlesHome()がJSで組み立てる
  (DOM自体はtemplates/home_page.hbs側の空の#home-recent-articlesに描画)。
  閲覧履歴が無い場合は、script.js側(renderRecentArticlesOnHome)がこの
  セクションをdisplay:noneのままにする(=カード自体が一切描画されない)。

  見た目は.newstopics/.blocks-item(カテゴリカード)と同じ枠線の色・角丸・影を
  付けたカード風にしている。この要素自体はリンクではないため、.blocks-item
  のような:hover/:active時の変化は付けていない。
*/
.home-recent-articles {
  background-color: #fff;
  border: 1px solid rgba(143, 141, 141, 1);
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  padding: 20px;
  /*
    上の「最新のお知らせ」との間隔(margin-top)、下のカテゴリカード一覧
    との間隔(margin-bottom)とも、カード同士の標準間隔である15pxに統一
    している(.blocks-listのコメント参照)。以前はmargin-bottomだけ30px
    のままだったが、カテゴリカードの間隔に揃えてほしいという指示により
    15pxに変更した。
  */
  margin-top: 15px;
  margin-bottom: 15px;
}

.home-recent-articles-title {
  /* カテゴリカードのカテゴリ名(.blocks-item-title)と同じフォントサイズ・
     太さに揃えている */
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 10px;
}
.home-recent-articles-title::before {
  /* 見出し先頭の時計アイコン(bi-clock-history、「履歴」を表す定番アイコン)。
     フォント本体・色は.newstopics h4::beforeと共通(カテゴリアイコンと同じ)。
     サイズは見出し文字(20px)の約1.5倍(30px)に拡大している。 */
  font-family: "Bootstrap Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 30px;
  content: "\f292";
  display: inline-block;
  margin-right: 10px;
  vertical-align: -7px;
  color: rgba(17, 25, 40, 1);
}

.home-recent-articles-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-recent-articles-item {
  /* 行間は、カテゴリカード内のセクション一覧(.blocks-item-sections a、
     padding: 5px 0)と同じ間隔に揃えている */
  border-bottom: 1px solid #eee;
  overflow: hidden;
  padding: 5px 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-recent-articles-item:last-child {
  border-bottom: none;
}

.home-recent-articles-item a {
  color: rgba(28, 100, 242, 1);
  font-size: 15px;
  text-decoration: none;
}

.home-recent-articles-item a:hover {
  text-decoration: underline;
}

.home-recent-articles-path {
  color: gray;
  font-size: 15px;
}

/***** Blocks (カテゴリカード) *****/
/*
  枠線付きのカードレイアウト。
  ・ホバー(フォーカス含む)時の背景色は、テーマ設定の「ボタンのホバー色」
    (button_hover_color、既定値#ecf9fd)を使用。管理画面のテーマカスタマイズ
    から変更可能。
  ・ホバー時の枠線の色は#8ab0bc固定。太さは通常時と同じ1pxのまま。
  ・各カードには、そのカテゴリ配下のセクション一覧(最大3件)と「もっと見る」
    リンクを表示する。セクションが3件以下(または0件)のカテゴリのカードは
    「もっと見る」を表示しない。
  ・Community機能は無効化しており、このブロックはホーム画面のカテゴリ表示
    でのみ使用している。
*/
.blocks-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  /*
    カード間の縦横の間隔は「最新のお知らせ」と「最近表示したページ」の
    間隔(15px)に合わせている。.blocks-itemの左右margin(7.5px×2枚分=15px)を
    行の両端で打ち消すため、ここは その半分のマイナスmargin(-7.5px)にしている。
  */
  margin: 0 -7.5px;
  padding: 0;
}
.blocks-item {
  background-color: #fff;
  /* 枠線の色は管理画面の「カードの枠線の色」設定(card_border_color)から変更可能 */
  border: 1px solid rgba(143, 141, 141, 1);
  border-radius: 6px;
  /*
    カードが画面から少し浮き出て見えるよう、薄い影を付けている。
    ホバー時は影を少し濃く・広くしつつ、カード自体も2px上に動かす
    ことで「持ち上がる」感触を出している。
  */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /*
    カード同士の間隔(横・縦とも)は、「最新のお知らせ」と「最近表示した
    ページ」の間隔と同じ15pxに揃えている。flexアイテムのmarginは隣接する
    もの同士で相殺されない(縦方向でも margin-collapsingが起きない)ため、
    横方向は左右7.5pxずつ(隣り合うカードの間で7.5+7.5=15px)、縦方向は
    下側のみ15px(折り返した次の行のカードとの間が15px)としている。
  */
  margin: 0 7.5px 15px;
  /* 同じ行(flexの折り返し単位)にある他のカードがセクション3件分で高く
     なる場合は、flexboxのデフォルトのstretch挙動でそちらに自動的に揃うため、
     min-heightはあくまで下限として小さめに留めている。 */
  min-height: 180px;
  padding: 20px;
  text-align: left;
  transition: background-color 0.12s ease-in-out, border-color 0.12s ease-in-out,
    box-shadow 0.12s ease-in-out, transform 0.12s ease-in-out;
  /* 幅の計算式は、カード1枚あたりが消費する左右margin合計(7.5px×2=15px)を
     差し引いている(margin変更に合わせて30px→15pxに更新)。 */
  width: calc(100% - 15px);
}
@media (min-width: 768px) {
  .blocks-item {
    flex: 0 0 calc(50% - 15px);
    max-width: calc(50% - 15px);
  }
}
@media (min-width: 1024px) {
  .blocks-item {
    flex: 0 0 calc(33.333% - 15px);
    max-width: calc(33.333% - 15px);
  }
}
.blocks-item:hover,
.blocks-item:focus-within {
  background-color: rgba(254, 254, 143, 1);
  border-color: #8ab0bc;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
  transform: translateY(-2px);
}
.blocks-item:hover *,
.blocks-item:focus-within * {
  color: rgba(17, 25, 40, 1);
}
/*
  クリック(タップ)時に「押し込まれた」感触を出す。:hoverで付けた浮き上がり
  (transform/box-shadow)を打ち消して、影を薄く・位置を沈める方向に上書き
  する。:activeは押している要素だけでなく親要素(.blocks-item)にも効くため、
  カード内のどのリンクを押してもカード全体に反映される。
*/
.blocks-item:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transform: translateY(1px);
  transition-duration: 0.05s;
}
.blocks-item-link {
  align-items: flex-start;
  color: rgba(17, 25, 40, 1);
  display: flex;
  flex: 0 0 auto;
  text-decoration: none;
}
.blocks-item-link:hover, .blocks-item-link:focus, .blocks-item-link:active {
  text-decoration: none;
}
.blocks-item-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}
.blocks-item-title {
  /* R2 v1.2相当の見た目に合わせ、18px/500から拡大・太字化 */
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3em;
  margin: 0;
  /*
    カテゴリ名を1行までに制限している(.blocks-item-descriptionと同じ理由)。
    特に長いカテゴリ名が2行に折り返すと、その分だけ他のカードより縦に
    長くなり、flexboxのstretch挙動で同じ行の他のカードまで一緒に高さが
    揃ってしまい、行ごとに高さが不揃いになってしまうため。
    このspan要素は何も指定しないとdisplay: inlineになり、inline要素には
    text-overflow/overflow/white-space(1行制限)が効かないため、
    display: blockを明示的に指定している(これが無いと長いカテゴリ名が
    折り返されたまま1行制限が効かない)。
  */
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.blocks-item-description {
  color: gray;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.4em;
  margin: 10px 0 0;
  /*
    説明文を2行までに制限している。カテゴリによって説明文の長さが大きく
    異なる場合(例: 長い注意書きが入っているカテゴリ)、flexboxのデフォルトの
    stretch挙動により、同じ行(折り返し単位)にある他のカードまで一緒に
    縦に伸びてしまい、その行だけ不揃いに高くなってしまうため。
    さらに、説明文が「ある」カテゴリと「ない」カテゴリが混在すると、
    以前はmargin-topを:not(:empty)でのみ付けていたため、説明文の有無
    そのものでカードの高さが変わり、結果として行ごとに高さが不揃いに
    なっていた。そのため、説明文が無いカードにも2行分の高さを常に確保し
    (margin-topも常に適用)、どのカードも同じ高さになるようにしている。
  */
  min-height: calc(1.4em * 2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.blocks-item-sections {
  list-style: none;
  margin: 0;
  padding: 10px 0 0;
}
.blocks-item-sections li {
  border-top: 1px solid #eee;
}
.blocks-item-sections li:first-child {
  border-top: none;
}
/* カードに表示するセクションは最大3件まで(R1/旧レイアウトと同じ) */
.blocks-item-sections li:nth-child(n + 4) {
  display: none;
}
.blocks-item-sections a {
  color: #333333;
  display: block;
  /* セクション同士の間隔を詰めるため8px→5pxに縮小 */
  padding: 5px 0;
  /*
    セクション名も1行までに制限している(.blocks-item-title/
    .blocks-item-descriptionと同じ理由)。ウィンドウ幅が狭く列の横幅が
    小さくなると、長いセクション名だけ2行に折り返してしまい、その分だけ
    他のカードより縦に長くなり、同じ行の他のカードまで一緒に高さが
    揃ってしまって行ごとに不揃いになるため。
  */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.blocks-item-sections a:hover {
  color: rgba(17, 25, 40, 1);
  text-decoration: underline;
}
/*
  セクションが3件以下(=もっと見る必要がない)場合は「もっと見る」を見えなく
  している。display: noneではなくvisibility: hiddenにしているのは、
  「もっと見る」の有無でカード自体の高さが変わってしまうと、同じ行(flexの
  折り返し単位)にある他のカードまでflexboxのstretch挙動で一緒に高さが
  揃ってしまい、行ごとに高さが不揃いになってしまうため(.blocks-item-title/
  .blocks-item-descriptionと同じ理由)。visibility: hiddenなら見た目には
  何も表示されないまま、レイアウト上の高さだけは常に確保される。
*/
.blocks-item-sections:has(li:nth-last-child(-n + 3):first-child) + .blocks-list-more {
  visibility: hidden;
}
/*
  カテゴリカード右下の「すべて表示」(英語画面では「more」)ボタン。
  以前は先頭に「>」(Bootstrap Iconsのchevron-right)を付けたリンクだったが、
  アイコンと文字の位置がずれるため「>」をやめ、上下が水平線の楕円(角丸が
  高さの半分のピル形)の枠で囲んだボタンにしている。
  - 文字は少し小さく(0.8em)し、上下の余白と枠線を足したボタンの高さが、
    以前の文字1行分の高さとほぼ同じになるようにしている(カードが大きくならない)
  - ボタンは右寄せ(align-self)。上の余白は .blocks-item-sections 側の
    margin-bottom で取る(margin-top: auto でカードの下端にそろえるため)
  - 見た目をボタン形にしているだけで、ボタンとしてのマウスオーバー処理は
    しない。背景は透明なので、カードにマウスオーバーしたときは楕円の内側も
    カード全体と同じ背景色になる
*/
.blocks-list-more {
  align-self: flex-end;
  border: 1px solid rgba(17, 25, 40, 1);
  border-radius: 999px;
  color: rgba(17, 25, 40, 1);
  display: inline-block;
  font-size: 0.8em;
  line-height: 1.4;
  margin-top: auto;
  padding: 2px 12px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.blocks-item-sections:has(+ .blocks-list-more) {
  margin-bottom: 10px;
}

/***** Homepage *****/
.section {
  margin-bottom: 40px;
}

@media (min-width: 768px) {
  .section {
    margin-bottom: 60px;
  }
}

.section h2 {
  margin-bottom: 10px;
  text-align: center;
}

/***** Promoted articles *****/
.promoted-articles {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .promoted-articles {
    flex-direction: row;
  }
}
.promoted-articles-item {
  flex: 1 0 auto;
  text-align: left;
}
.promoted-articles-item:nth-child(2n) {
  padding-right: 0;
}
.promoted-articles-item a {
  color: rgba(17, 25, 40, 1);
  display: block;
  padding: 10px 0 10px 1.3em;
  position: relative;
}
.promoted-articles-item:last-child a {
  border: 0;
}
.promoted-articles-item a::before {
  content: "\f285"; /* bi-chevron-right */
  font-family: "Bootstrap Icons";
  font-style: normal;
  font-weight: normal;
  /* Bootstrap Iconsのchevronは幅が1emあり、Entypoより横に広いため、
     文字の約0.8倍に縮めて本文との間隔を保っている */
  font-size: 0.8em;
  line-height: inherit;
  color: rgba(17, 25, 40, 1);
  position: absolute;
  left: 5px;
}
.promoted-articles-item a .uvc {
  display: inline-block;
  margin-left: 1em;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}
.promoted-articles-item a .uvc::before {
  content: "\f407"; /* bi-hand-thumbs-up (賛成数) */
  font-family: "Bootstrap Icons";
  font-style: normal;
  font-weight: normal;
  position: relative;
  bottom: 1px;
  margin-right: 2px;
}
@media (min-width: 768px) {
  .promoted-articles-item {
    align-items: flex-start;
    flex: 0 0 auto;
    padding-right: 30px;
    width: 50%;
  }
  [dir="rtl"] .promoted-articles-item {
    padding: 0 0 0 30px;
  }
}

/***** Community section in homepage *****/
.community {
  text-align: center;
}

.community-image {
  min-height: 300px;
  background-image: url(/hc/theming_assets/01J5Z6YW6YPE04DGECKJAQAWNT);
  background-position: center;
  background-repeat: no-repeat;
  max-width: 100%;
}

.community,
.activity {
  border-top: 1px solid #ddd;
  padding: 30px 0;
}

/***** Recent activity *****/
.recent-activity-header {
  margin-bottom: 10px;
  text-align: center;
}

.recent-activity-list {
  padding: 0;
}

.recent-activity-item {
  border-bottom: 1px solid #ddd;
  overflow: auto;
  padding: 20px 0;
}

.recent-activity-item-parent {
  font-size: 16px;
}

.recent-activity-item-parent, .recent-activity-item-link {
  margin: 6px 0;
  color: #333333;
  display: inline-block;
  width: 100%;
}

@media (min-width: 768px) {
  .recent-activity-item-parent, .recent-activity-item-link {
    width: 70%;
    margin: 0;
  }
}

.recent-activity-item-link {
  font-size: 14px;
  font-weight: 300;
}

.recent-activity-item-meta {
  margin: 15px 0 0 0;
  float: none;
}

@media (min-width: 768px) {
  .recent-activity-item-meta {
    margin: 0;
    float: right;
  }
  [dir="rtl"] .recent-activity-item-meta {
    float: left;
  }
}

.recent-activity-item-time, .recent-activity-item-comment {
  color: #666;
  display: inline-block;
  font-size: 13px;
  font-weight: 300;
}

.recent-activity-item-comment {
  padding-left: 5px;
}

[dir="rtl"] .recent-activity-item-comment {
  padding: 0 5px 0 0;
}

.recent-activity-item-comment::before {
  display: inline-block;
}

.recent-activity-item-comment span::before {
  color: rgba(17, 25, 40, 1);
  content: "\f268"; /* bi-chat */
  display: inline-block;
  font-size: 15px;
  padding-right: 3px;
  vertical-align: middle;
}

[dir="rtl"] .recent-activity-item-comment span::before {
  padding-left: 3px;
}

.recent-activity-controls {
  padding-top: 15px;
}

/***** Category pages *****/
.category-container {
  display: flex;
  flex-flow: column-reverse nowrap;
  align-items: flex-start;
  margin-top: 30px;
}
.category-content {
  width: 100%;
}
.section-tree {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
.section-tree .section {
  flex: initial;
  margin-bottom: 20px;
  padding-bottom: 20px;
}
.section-tree .section-tree-title {
  display: block;
}
.section-tree .section-tree-title a {
  display: block;
  background-color: #f3f3f3;
  padding: 10px;
}
.section-tree .icon-lock::before {
  vertical-align: baseline;
}
.section-tree-title {
  margin-bottom: 0;
}
.section-tree-title a {
  color: #333333;
}
.section-tree .see-all-articles {
  display: block;
  padding: 15px 0;
  text-align: right;
}
.article-list-item {
  border-bottom: 1px dotted #ddd;
  font-size: 16px;
  padding: 0;
  position: relative;
}


.article-list-item:last-of-type {
  border-bottom: none;
}
.article-list-item a {
  display: block;
  color: #333333;
  padding: 15px 0 15px 1.4em;
}

.icon-star::before {
  color: rgba(17, 25, 40, 1);
  font-size: 18px;
}
.section-empty {
  margin-left: 30px;
}


@media (min-width: 768px) {
  .category-container {
    flex-flow: row nowrap;
    justify-content: space-between;
    margin-top: 0;
  }
  .category-content {
    width: calc(100% - 260px);
  }
  .section-tree .section {
    display: flex;
    flex-flow: column nowrap;
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px dotted #ddd;
  }
  .section-tree .section:first-of-type {
    border-top: 1px dotted #ddd;
    padding-top: 40px;
  }
  .section-tree .section-tree-title {
    width: 250px;
    padding-right: 30px;
  }
  .section-tree .section-tree-title a {
    display: inline;
    padding: 0;
    background-color: transparent;
  }
  .section-tree .article-list {
    width: 100%;
    margin-left: 30px;
  }
  .article-list-item {
    border-bottom: 1px dotted #ddd;
    font-size: 16px;
    padding: 15px 0 15px 1.4em;
    position: relative;
  }
  .article-list-item a {
    display: inline;
    padding: 0;
  }
  
  
  
  
  
}

@media (min-width: 1024px) {
  .category-content {
    width: calc(100% - 320px);
  }
  .section-tree .section {
    flex-flow: row nowrap;
  }
  .section-tree .article-list {
    width: calc(100% - 280px);
  }
  
}


/***** Section pages *****/
.section-container {
  display: flex;
  flex-flow: column-reverse nowrap;
  align-items: flex-start;
  margin-top: 30px;
}
.section-content {
  width: 100%;
  margin-bottom: 40px;
}
.section-subscribe .dropdown-toggle::after {
  display: none;
}

@media (min-width: 768px) {
  .section-container {
    flex-flow: row nowrap;
    justify-content: space-between;
    margin-top: 0;
  }
  .section-content {
    width: calc(100% - 260px);
    margin-bottom: 0;
  }
}

@media (min-width: 1024px) {
  .section-content {
    width: calc(100% - 320px);
  }
}


/***** Article *****/
.article-container {
  display: flex;
  flex-flow: column-reverse nowrap;
  align-items: flex-start;
  margin-top: 30px;
}
.article {
  width: 100%;
  margin-bottom: 40px;
}
@media print{
  .article {
    width: 100% !important;
  }
}
.article-header {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 40px;
  margin-top: 20px;
}
.article-title {
  display: block;
  color: rgba(17, 25, 40, 1);
  border-left: 5px solid rgba(17, 25, 40, 1);
  padding: 10px 20px;
  background-color: #f6f6f6;
  font-size: 24px;
  width: 100%;
}
.article-author {
  margin-bottom: 10px;
}
/* 鍵アイコン(記事ヘッダー)。テンプレート側のcurrentColor使用インライン
   SVGに対する位置調整のみ(色は見出しの文字色に自動追従)。 */
.article-title .icon-lock {
  position: relative;
  left: -5px;
  top: 3px;
  vertical-align: baseline;
}

/*
  記事一覧(category_page.hbs/section_page.hbs)の鍵アイコン。
  .article-list-link/.article-list-itemはdisplay:blockのため、アイコンを
  <a>の外側に置くとタイトル文字列の下に回り込んでしまう。そのため
  テンプレート側で<a>の内側・タイトル文字列の直後にSVGを置き、ここでは
  タイトル文字との間隔と縦位置だけ調整している。
*/
.article-list-link .icon-lock {
  margin-left: 4px;
  position: relative;
  top: 2px;
  vertical-align: baseline;
}

.article [role="button"] {
  flex-shrink: 0;
  /*Avoid collapsing elements in Safari (https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored)*/
  width: 100%;
}

@media (min-width: 768px) {
  .article-container {
    flex-flow: row nowrap;
    justify-content: space-between;
    margin-top: 0;
  }
  .article {
    width: calc(100% - 260px);
    margin-bottom: 0;
  }
  .article-header {
    flex-direction: row;
    margin-top: 0;
  }
  .article-title {
    flex-basis: 100%;
    font-size: 30px;
    /* Take entire row */
  }
  .article [role="button"] {
    width: auto;
  }
}

@media (min-width: 1024px) {
  .article {
    width: calc(100% - 500px);
  }
}

/*
  左サイドバー(.category-nav)と記事本文(.article)の間隔。
  ≥1024pxでは各要素の基準幅の合計がコンテナ幅を超えるため、記事本文と
  右の見出しサイドバー(.anchor-header)がflex-shrinkで縮んで幅が決まり、
  左サイドバーと記事本文の間に隙間ができていなかった。
  記事本文に margin-left を付け、同じ量だけ .anchor-header の width と
  padding-left を減らしている。こうすると
   - 各要素の外側サイズの合計が変わらない
   - .anchor-header の内側(コンテンツ)幅も変わらない
  ため、flex-shrink の配分が以前と同一になり、記事本文の幅は一切変わらない。
  記事本文はこの分だけ右へずれ、見出しサイドバーとの余白がその分狭くなる。
  (.anchor-header 側は後方の「見出しサイドバー（右）」の定義に負けないよう
  .article-container > で詳細度を上げている)
  間隔を変えるときは3か所の 32px を同じ値にそろえること
  (padding-left が負にならないよう、40px程度までを目安に)。
*/
@media (min-width: 1024px) {
  .article {
    margin-left: 32px;
  }
  .article-container > .anchor-header {
    width: calc(25% - 32px);
    padding-left: calc(5% - 32px);
  }
}
@media print {
  .article {
    margin-left: 0 !important;
  }
}

.article-body img {
  cursor: zoom-in;
}
@media all and (-ms-high-contrast:none) {
  .article-body img {
    cursor: pointer\0;
  }
}

.article-info {
  max-width: 100%;
}

.article-meta {
  display: inline-block;
  vertical-align: middle;
}

.article-body img {
  height: auto;
  max-width: 100%;
}

.article-body ul, .article-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}

[dir="rtl"] .article-body ul, [dir="rtl"] .article-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}

.article-body ul > ul, .article-body ol > ol, .article-body ol > ul, .article-body ul > ol, .article-body li > ul, .article-body li > ol {
  margin: 0;
}

.article-body ul {
  list-style-type: disc;
}

.article-body a:visited {
  color: #093c9f;
}

.article-body code {
  background: #e6e6e6;
  border: 3px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
  font-weight: bold;
}

.article-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}

.article-body blockquote {
  border-left: 1px solid #ddd;
  color: #666;
  font-style: italic;
  padding: 0 15px;
}

.article-body > p:last-child {
  margin-bottom: 0;
}

.article-content {
  line-height: 1.6;
  margin: 40px 0;
  word-wrap: break-word;
}

/*
  Content tags shown at the bottom of a tagged article/post
  (article_page.hbs, community_post_page.hbs: .content-tags /
  .content-tag-list / .content-tag-item). These had no styling at all in
  stock Copenhagen, so they rendered as plain inline text with no visual
  indication that each tag is a clickable link (clicking one opens the
  search results page scoped to that content tag, which is also where the
  "関連コンテンツ" filter sidebar on search_results.hbs gets populated).
  Styled as small rounded chips, reusing the card-border/button-hover
  convention used elsewhere in this theme (pagination, category cards).

  On article_page.hbs this section now sits between the article footer
  and .article-relatives (recently-viewed/related-articles), so it gets
  the same border-top/padding treatment as .article-relatives, giving a
  matching horizontal separator line above both blocks.
*/
.content-tags {
  border-top: 1px solid #ddd;
  padding: 20px 0;
}

.content-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.content-tag-item a {
  display: inline-block;
  padding: 4px 14px;
  border: 2px solid #4f4e4e;
  border-radius: 999px;
  box-sizing: border-box;
  color: #333333;
  text-decoration: none;
  font-size: 13px;
}

.content-tag-item a:hover {
  background: rgba(254, 254, 143, 1);
}

.article-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}

.article-comment-count {
  color: #666;
  font-weight: 300;
}

.article-comment-count:hover {
  text-decoration: none;
}

.article-comment-count .icon-comments {
  color: rgba(17, 25, 40, 1);
  /* アイコン本体はテンプレート側のインラインSVG */
  display: inline-block;
  font-size: 18px;
  padding: 5px;
}

.article-sidebar {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}

@media (min-width: 1024px) {
  .article-sidebar {
    border: 0;
    flex: 0 0 17%;
    height: auto;
  }
}

.article-relatives {
  border-top: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
}

@media (min-width: 768px) {
  .article-relatives {
    flex-direction: row;
  }
}

.article-relatives > * {
  margin-right: 0;
}

.article-relatives > *:last-child {
  margin: 0;
}

@media (min-width: 768px) {
  .article-relatives > * {
    /* 横並びになるこの幅以上ではflex-growを揃えて常に50%ずつになるようにして
     いる。min-width:0は、リンクのテキストが長い場合にflexアイテムがこの幅を
     超えて広がってしまうのを防ぐための定石。 */
    flex: 1 1 0%;
    min-width: 0;
    padding-right: 20px;
    border-right: 1px dotted #ddd;
  }
  .article-relatives > *:last-child {
    padding-right: 0;
    border-right: none;
    padding-left: 20px;
  }
  .article-relatives > *:first-child {
    padding-left: 0;
  }
}

.article-votes {
  border-top: 1px solid #ddd;
  padding: 30px 0;
  text-align: center;
}

.article-vote {
  background: transparent;
  border: 1px solid rgba(17, 25, 40, 1);
  color: rgba(17, 25, 40, 1);
  margin: 10px 5px;
  min-width: 90px;
  width: auto;
}

.article-vote::before {
  font-size: 8px;
  margin-right: 10px;
}

[dir="rtl"] .article-vote::before {
  margin-right: 0;
  margin-left: 10px;
}

.article-vote::after {
  content: attr(title);
  /* Yes/No label*/
}

.article-vote:focus, .article-vote:active {
  background-color: transparent;
  color: rgba(17, 25, 40, 1);
}

.article-vote:hover {
  background-color: rgba(17, 25, 40, 1);
}

.article-vote:hover::before, .article-vote:hover::after, .article-vote[aria-selected="true"]::before, .article-vote[aria-selected="true"]::after {
  color: rgba(17, 25, 40, 1);
}

.article-vote-up::before {
  content: "\f633"; /* bi-check-lg */
}

.article-vote-down::before {
  content: "\f659"; /* bi-x-lg */
}

.article-more-questions {
  margin: 10px 0 20px;
  text-align: center;
}

.article-return-to-top {
  border-top: 1px solid #ddd;
}

@media (min-width: 1024px) {
  .article-return-to-top {
    display: none;
  }
}

.article-return-to-top a {
  color: #333333;
  display: block;
  padding: 20px 0;
}

.article-return-to-top a:hover, .article-return-to-top a:focus {
  text-decoration: none;
}

.article-return-to-top .icon-arrow-up::before {
  font-size: 16px;
  margin-left: 5px;
}

[dir="rtl"] .article-return-to-top .icon-arrow-up::before {
  margin-right: 10px;
}

.article-unsubscribe {
/*   background-color: rgba(17, 25, 40, 1); */
  color: rgba(17, 25, 40, 1);
  text-decoration: none;
}

.article-unsubscribe:hover {
  background-color: #000;
  border-color: #000;
}

.vd-afterlink {
  display: none;
}
.vd-afterlink ul {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  padding: 50px 0 30px 0;
  position: relative;
}
.vd-afterlink ul::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 16px 40px 0 40px;
  border-color: #dddddd transparent transparent transparent;
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  margin: auto;
}
.vd-afterlink ul li {
  display: inline-block;
}
.vd-afterlink ul li a {
  display: inline-block;
  background-color: rgba(28, 100, 242, 1);
  color: #fff;
  border-radius: 4px;
  padding: 10px 30px;
}
.vd-afterlink ul li a:link,
.vd-afterlink ul li a:visited,
.vd-afterlink ul li a:hover,
.vd-afterlink ul li a:active {
  text-decoration: none;
}
.vd-afterlink ul li a:hover {
  opacity: 0.7;
}
.vd-afterlink ul li a.chatbtn {
  margin-right: 30px;
}
.vd-afterlink ul li a.chatbtn::before {
  content: "\f268"; /* bi-chat */
  font-family: "Bootstrap Icons";
  font-style: normal;
  font-weight: normal;
  vertical-align: -0.125em;
  margin-right: 8px;
}
.vd-afterlink ul li a.formbtn::before {
  content: "\f32f"; /* bi-envelope */
  font-family: "Bootstrap Icons";
  font-style: normal;
  font-weight: normal;
  vertical-align: -0.125em;
  margin-right: 8px;
}

.sidenav-title {
  font-size: 15px;
  position: relative;
}

.sidenav-item {
  border-radius: 4px;
  color: #333333;
  display: block;
  font-weight: 300;
  margin-bottom: 10px;
  padding: 10px;
}

.sidenav-item.current-article, .sidenav-item:hover {
  background-color: rgba(17, 25, 40, 1);
  color: rgba(17, 25, 40, 1);
  text-decoration: none;
}

/*
  "最近表示した記事"/"関連記事" (rendered by Zendesk's own {{recent_articles}}/
  {{related_articles}} helpers inside .article-relatives) were still
  showing noticeably bigger than .content-tags' "関連コンテンツ" heading
  even after the previous round, which means the old
  ".recent-articles h3, .related-articles h3" selector below was never
  actually matching Zendesk's real output in the first place (it's
  present, unchanged, in the production theme too, so this looks like
  long-standing dead CSS rather than something this rebuild broke).
  Targeting any heading level under the .article-relatives wrapper we
  control ourselves (instead of guessing the class Zendesk puts on the
  inner heading) is the safer way to actually reach it.
*/
.article-relatives h1,
.article-relatives h2,
.article-relatives h3,
.article-relatives h4,
.recent-articles h3,
.related-articles h3,
.content-tags h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 20px 0;
}

.recent-articles li,
.related-articles li {
  margin-bottom: 15px;
}
/*
  記事ページ下部の「最近表示した記事」「関連記事」のリンク。
  以前は先頭に「>」(chevron)アイコンを付け、そのぶん左に1.2emの余白を
  取っていたが、アイコンを廃止し、記事名を見出しと同じ左端から表示している。
*/
.recent-articles li a,
.related-articles li a {
  display: block;
  padding: 5px 0;
  position: relative;
}

@media (min-width: 768px) {
  .recent-articles li a,
  .related-articles li a {
    display: inline-block;
  }
}

/***** Attachments *****/
/* Styles attachments inside posts, articles and comments */
.attachments .attachment-item {
  padding-left: 20px;
  position: relative;
  margin-bottom: 10px;
}

.attachments .attachment-item:last-child {
  margin-bottom: 0;
}

.attachments .attachment-item::before {
  color: #333333;
  content: none; /* テンプレート側のインラインSVG(クリップ)を使う */
  font-size: 15px;
  left: 0;
  position: absolute;
  top: 5px;
}

[dir="rtl"] .attachments .attachment-item {
  padding-left: 0;
  padding-right: 20px;
}

[dir="rtl"] .attachments .attachment-item::before {
  left: auto;
  right: 0;
}

.upload-dropzone span {
  color: #666;
}

/***** Social share links *****/
.share {
  padding: 0;
  white-space: nowrap;
}

.share li, .share a {
  display: inline-block;
}

.share a {
  border-radius: 50%;
  height: 25px;
  line-height: 25px;
  overflow: hidden;
  width: 25px;
}

.share a::before {
  color: #666;
  display: block;
  font-size: 23px;
  text-align: center;
  width: 100%;
}

.share a:hover {
  text-decoration: none;
}

.share a:hover::before {
  color: rgba(17, 25, 40, 1);
}

.share-twitter::before {
  content: "\f8db"; /* bi-twitter-x */
}

.share-facebook::before {
  content: "\f344"; /* bi-facebook */
}

.share-linkedin::before {
  content: "\f472"; /* bi-linkedin */
}

.share-googleplus::before {
  content: "\f3f0"; /* bi-google */
}

/***** Comments *****/
/* Styles comments inside articles, posts and requests */
.comment {
  border-bottom: 1px solid #ddd;
  padding: 20px 0;
}

.comment-heading {
  margin-bottom: 5px;
  margin-top: 0;
}

.comment-overview {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  padding: 20px 0;
}

.comment-overview p {
  margin-top: 0;
}

.comment-callout {
  color: #666;
  display: inline-block;
  font-weight: 300;
  font-size: 13px;
  margin-bottom: 0;
}

.comment-callout a {
  color: rgba(17, 25, 40, 1);
}

.comment-sorter {
  display: inline-block;
  float: right;
}

.comment-sorter a {
  color: #666;
  font-weight: 300;
  font-size: 13px;
  text-decoration: none;
}

[dir="rtl"] .comment-sorter {
  float: left;
}

.comment-wrapper {
  display: flex;
  position: relative;
}

.comment-wrapper.comment-official {
  border: 1px solid rgba(17, 25, 40, 1);
  padding: 40px 20px 20px;
}

@media (min-width: 768px) {
  .comment-wrapper.comment-official {
    padding-top: 20px;
  }
}

.comment-info {
  min-width: 0;
  padding-right: 20px;
  width: 100%;
}

[dir="rtl"] .comment-info {
  padding-right: 0;
  padding-left: 20px;
}

.comment-author {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .comment-author {
    justify-content: space-between;
  }
}

.comment-avatar {
  margin-right: 10px;
}

[dir="rtl"] .comment-avatar {
  margin-left: 10px;
  margin-right: 0;
}

.comment-meta {
  flex: 1 0 auto;
}

.comment-labels {
  flex-basis: 100%;
}

@media (min-width: 768px) {
  .comment-labels {
    flex-basis: auto;
  }
}

.comment .status-label:not(.status-label-official) {
  margin-top: 10px;
}

@media (min-width: 768px) {
  .comment .status-label:not(.status-label-official) {
    margin-top: 0;
  }
}

.comment-form {
  display: flex;
  padding-top: 30px;
  word-wrap: break-word;
}

.comment-container {
  width: 100%;
}

.comment-form-controls {
  display: none;
  margin-top: 10px;
  text-align: left;
}

@media (min-width: 768px) {
  [dir="ltr"] .comment-form-controls {
    text-align: right;
  }
}

.comment-form-controls input[type="submit"] {
  margin-top: 15px;
}

@media (min-width: 1024px) {
  .comment-form-controls input[type="submit"] {
    margin-left: 15px;
  }
  [dir="rtl"] .comment-form-controls input[type="submit"] {
    margin-left: 0;
    margin-right: 15px;
  }
}

.comment-form-controls input[type="checkbox"] {
  margin-right: 5px;
}

.comment-form-controls input[type="checkbox"] [dir="rtl"] {
  margin-left: 5px;
}

.comment-ccs {
  display: none;
}

.comment-ccs + textarea {
  margin-top: 10px;
}

.comment-attachments {
  margin-top: 10px;
}

.comment-attachments a {
  color: rgba(17, 25, 40, 1);
}

.comment-body {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  font-family: 'Lexend', 'BIZ UDPGothic', 'Hiragino Kaku Gothic ProN', Meiryo, メイリオ, sans-serif;
  line-height: 1.6;
}

.comment-body img {
  height: auto;
  max-width: 100%;
}

.comment-body ul, .comment-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}

[dir="rtl"] .comment-body ul, [dir="rtl"] .comment-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}

.comment-body ul > ul, .comment-body ol > ol, .comment-body ol > ul, .comment-body ul > ol, .comment-body li > ul, .comment-body li > ol {
  margin: 0;
}

.comment-body ul {
  list-style-type: disc;
}

.comment-body a:visited {
  color: #093c9f;
}

.comment-body code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}

.comment-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}

.comment-body blockquote {
  border-left: 1px solid #ddd;
  color: #666;
  font-style: italic;
  padding: 0 15px;
}

.comment-mark-as-solved {
  display: inline-block;
}

/***** Vote *****/
/* Used in article comments, post comments and post */
.vote {
  display: inline-block;
  text-align: center;
  width: 35px;
}

.vote a {
  outline: none;
}

.vote a:active, .vote a:hover, .vote a:focus {
  text-decoration: none;
}

.vote-sum {
  color: #666;
  display: block;
  margin: 3px 0;
}

[dir="rtl"] .vote-sum {
  direction: ltr;
  unicode-bidi: bidi-override;
}

.vote-up:hover::before,
.vote-down:hover::before {
  color: rgba(17, 25, 40, 1);
}

.vote-up::before, .vote-down::before {
  color: #666;
  font-size: 24px;
}

.vote-up::before {
  content: none; /* テンプレート側のインラインSVG(矢印)を使う */
}

.vote-down::before {
  content: none; /* テンプレート側のインラインSVG(矢印)を使う */
}

.vote-voted::before {
  color: rgba(17, 25, 40, 1);
}

.vote-voted:hover::before {
  color: #000;
}

/***** Actions *****/
/* Styles admin and en user actions(edit, delete, change status) in comments and posts */
.actions {
  text-align: center;
  flex-shrink: 0;
  /*Avoid collapsing elements in Safari*/
}

.actions .dropdown-toggle {
  font-size: 0;
  margin: 15px 0;
}

.actions .dropdown-toggle:hover::before, .actions .dropdown-toggle:focus::before, .actions .dropdown-toggle:active::before {
  background-color: #f7f7f7;
}

.actions .dropdown-toggle::before {
  background-color: transparent;
  border-radius: 50%;
  color: #666;
  content: none; /* テンプレート側のインラインSVG(歯車)を使う */
  display: block;
  font-size: 13px;
  margin: auto;
  padding: 5px;
}

/***** Community *****/
.community-hero {
  background-image: url(/hc/theming_assets/01J5Z6YVT5G0PZV0ZCKN5D8W3J);
  margin-bottom: 10px;
}

.community-footer {
  padding-top: 50px;
  text-align: center;
}

.community-featured-posts, .community-activity {
  padding-top: 40px;
  width: 100%;
}

.community-header {
  margin-bottom: 30px;
}

.community-header h4 {
  margin-bottom: 0;
}

.post-to-community {
  margin-top: 10px;
}

@media (min-width: 768px) {
  .post-to-community {
    margin: 0;
  }
}

/* Community topics grid */
.topics {
  max-width: none;
  width: 100%;
}

.topics-item .meta-group {
  justify-content: center;
  margin-top: 20px;
}

/* Community topic page */
.topic-header {
  border-bottom: 1px solid #ddd;
  font-size: 13px;
}

@media (min-width: 768px) {
  .topic-header {
    padding-bottom: 10px;
  }
}

.topic-header .dropdown {
  display: block;
  border-top: 1px solid #ddd;
  padding: 10px 0;
}

@media (min-width: 768px) {
  .topic-header .dropdown {
    border-top: 0;
    display: inline-block;
    margin-right: 20px;
    padding: 0;
  }
}

.no-posts-with-filter {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* Topic, post and user follow button */
.community-follow {
  margin-bottom: 10px;
  width: 100%;
}

@media (min-width: 768px) {
  .community-follow {
    margin-bottom: 0;
    width: auto;
  }
}

.community-follow .dropdown {
  width: 100%;
}

.community-follow [role="button"] {
  line-height: 30px;
  padding: 0 10px 0 15px;
  position: relative;
  width: 100%;
}

@media (min-width: 768px) {
  .community-follow [role="button"] {
    width: auto;
  }
}

.community-follow [role="button"]:hover {
  background-color: rgba(17, 25, 40, 1);
}

.community-follow [role="button"]:hover::after, .community-follow [role="button"]:focus::after {
  border-color: rgba(17, 25, 40, 1);
  color: rgba(17, 25, 40, 1);
}

.community-follow [role="button"][aria-selected="true"] {
  background-color: rgba(17, 25, 40, 1);
  color: rgba(17, 25, 40, 1);
}

.community-follow [role="button"][aria-selected="true"]::after {
  border-left: 1px solid rgba(17, 25, 40, 1);
  color: rgba(17, 25, 40, 1);
}

.community-follow [role="button"][aria-selected="true"]:hover {
  background-color: #000;
  border-color: #000;
}

.community-follow [role="button"]::after {
  border-left: 1px solid rgba(17, 25, 40, 1);
  content: attr(data-follower-count);
  color: rgba(17, 25, 40, 1);
  display: inline-block;
  font-family: 'Lexend', 'BIZ UDPGothic', 'Hiragino Kaku Gothic ProN', Meiryo, メイリオ, sans-serif;
  margin-left: 15px;
  padding-left: 10px;
  position: absolute;
  right: 10px;
}

@media (min-width: 768px) {
  .community-follow [role="button"]::after {
    position: static;
  }
}

[dir="rtl"] .community-follow [role="button"]::after {
  border-left: 0;
  border-right: 1px solid rgba(17, 25, 40, 1);
  margin: 0 10px 0 0;
  padding: 0 10px 0 0;
}

/***** Striped list *****/
/* Used in community posts list and requests list */
.striped-list {
  padding: 0;
}

.striped-list-item {
  align-items: flex-start;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 0;
}

@media (min-width: 768px) {
  .striped-list-item {
    align-items: center;
    flex-direction: row;
  }
}

.striped-list-info {
  flex: 2;
}

.striped-list-title {
  color: rgba(28, 100, 242, 1);
  margin-bottom: 10px;
  margin-right: 5px;
}

.striped-list-title:hover, .striped-list-title:focus, .striped-list-title:active {
  text-decoration: underline;
}

.striped-list-title:visited {
  color: #093c9f;
}

.striped-list .meta-group {
  margin: 5px 0;
}

.striped-list-count {
  color: #666;
  font-weight: 300;
  font-size: 13px;
  justify-content: flex-start;
  text-transform: capitalize;
}

@media (min-width: 768px) {
  .striped-list-count {
    display: flex;
    flex: 1;
    justify-content: space-around;
  }
}

.striped-list-count-item::after {
  content: "·";
  display: inline-block;
  padding: 0 5px;
}

@media (min-width: 768px) {
  .striped-list-count-item::after {
    display: none;
  }
}

.striped-list-count-item:last-child::after {
  display: none;
}

.striped-list-number {
  font-weight: 300;
  text-align: center;
}

@media (min-width: 768px) {
  .striped-list-number {
    color: #333333;
    display: block;
    font-weight: 400;
  }
}

/***** Status labels *****/
/* Styles labels used in posts, articles and requests */
.status-label {
  background-color: #1eb848;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  margin-right: 2px;
  padding: 3px 10px;
  vertical-align: middle;
  white-space: nowrap;
  display: inline-block;
}

.status-label:hover, .status-label:active, .status-label:focus {
  text-decoration: none;
}

.status-label-pinned, .status-label-featured, .status-label-official {
  background-color: rgba(17, 25, 40, 1);
}

.status-label-official {
  border-radius: 0;
  margin-right: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 100%;
}

@media (min-width: 768px) {
  .status-label-official {
    border-radius: 0 0 4px 4px;
    right: 30px;
    width: auto;
  }
}

[dir="rtl"] .status-label-official {
  left: 30px;
  right: auto;
}

.status-label-pending, .status-label-not-planned {
  background-color: #eee;
  color: #666;
}

.status-label-pending {
  text-align: center;
}

.status-label-open {
  background-color: #e03b30;
}

.status-label-closed {
  background-color: #ddd;
}

.status-label-solved {
  background-color: #999;
}

.status-label-new {
  background-color: #ffd12a;
}

.status-label-hold {
  background-color: #000;
}

.status-label-open, .status-label-closed, .status-label-solved, .status-label-new, .status-label-hold, .status-label-answered {
/*  text-transform: lowercase;  */
}

/***** Post *****/
/*
* The post grid is defined this way:
* Content | Sidebar
* 70%     | 30%
*/
.post {
  flex: 1;
  margin-bottom: 10px;
}

@media (min-width: 1024px) {
  .post {
    flex: 1 0 70%;
    max-width: 70%;
  }
}

.post-container {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .post-container {
    flex-direction: row;
  }
}

.post-header {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 10px;
}

@media (min-width: 768px) {
  .post-header {
    align-items: baseline;
    flex-direction: row;
  }
}

.post-header .status-label {
  vertical-align: super;
}

.post-title {
  margin-bottom: 20px;
  width: 100%;
}

@media (min-width: 768px) {
  .post-title {
    margin-bottom: 0;
    padding-right: 10px;
  }
}

.post-title h1 {
  display: inline;
  vertical-align: middle;
}

@media (min-width: 768px) {
  .post-title h1 {
    margin-right: 5px;
  }
}

.post-author {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
}

.post-avatar {
  margin-bottom: 30px;
}

.post-content {
  font-family: 'Lexend', 'BIZ UDPGothic', 'Hiragino Kaku Gothic ProN', Meiryo, メイリオ, sans-serif;
  line-height: 1.6;
  word-break: break-word;
}

.post-info-container {
  display: flex;
  margin-bottom: 40px;
}

.post-info {
  min-width: 0;
  padding-right: 20px;
  width: 100%;
}

[dir="rtl"] .post-info {
  padding-right: 0;
  padding-left: 20px;
}

.post-meta {
  display: inline-block;
  flex: 1;
  margin-left: 10px;
  vertical-align: middle;
}

[dir="rtl"] .post-meta {
  margin-left: 0;
  margin-right: 10px;
}

.post-body img {
  height: auto;
  max-width: 100%;
}

.post-body ul, .post-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}

[dir="rtl"] .post-body ul, [dir="rtl"] .post-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}

.post-body ul > ul, .post-body ol > ol, .post-body ol > ul, .post-body ul > ol, .post-body li > ul, .post-body li > ol {
  margin: 0;
}

.post-body ul {
  list-style-type: disc;
}

.post-body a:visited {
  color: #093c9f;
}

.post-body code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}

.post-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}

.post-body blockquote {
  border-left: 1px solid #ddd;
  color: #666;
  font-style: italic;
  padding: 0 15px;
}

.post-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}

.post-comment-count {
  color: #666;
  font-weight: 300;
}

.post-comment-count:hover {
  text-decoration: none;
}

.post-comment-count .icon-comments {
  color: rgba(17, 25, 40, 1);
  /* アイコン本体はテンプレート側のインラインSVG */
  display: inline-block;
  font-size: 18px;
  padding: 5px;
}

.post-sidebar {
  border-top: 1px solid #ddd;
  flex: 1;
  padding: 30px 0;
  text-align: center;
}

@media (min-width: 1024px) {
  .post-sidebar {
    border: 0;
    flex: 1 0 30%;
    padding: 0 0 0 50px;
    text-align: initial;
  }
  [dir="rtl"] .post-sidebar {
    padding: 0 50px 0 0;
  }
}

.post-sidebar h5 {
  font-weight: 600;
}

@media (min-width: 1024px) {
  .post-sidebar h5 {
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
  }
}

.post-comments {
  margin-bottom: 20px;
}

@media (min-width: 1024px) {
  .post-comments {
    margin-bottom: 0;
  }
}

/* Navigation element that collapses on mobile */
.collapsible-nav {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex-direction: column;
  max-height: 45px;
  overflow: hidden;
  font-size: 14px;
}

@media (min-width: 768px) {
  .collapsible-nav {
    border: 0;
    height: auto;
    flex-direction: row;
    max-height: none;
  }
}

.collapsible-nav-list {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .collapsible-nav-list {
    flex-direction: row;
  }
}

.collapsible-nav-list li {
  color: #333333;
  line-height: 45px;
  order: 1;
}

@media (min-width: 768px) {
  .collapsible-nav-list li {
    line-height: normal;
    margin-right: 30px;
  }
  [dir="rtl"] .collapsible-nav-list li {
    margin-left: 30px;
    margin-right: 0;
  }
  .collapsible-nav-list li a {
    text-decoration: none;
    padding: 15px 0;
  }
}

.collapsible-nav-list li a {
  color: #333333;
  display: block;
}

@media (min-width: 768px) {
  .collapsible-nav-list li:hover {
    border-bottom: 4px solid #ddd;
  }
  .collapsible-nav-list li:hover a {
    padding: 15px 0 11px 0;
    text-decoration: none;
  }
}

.collapsible-nav-list li[aria-selected="true"] {
  order: 0;
  position: relative;
}

@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected="true"] {
    border-bottom: 4px solid rgba(17, 25, 40, 1);
    order: 1;
    padding: 15px 0 11px 0;
  }
}

.collapsible-nav-list li[aria-selected="true"] a {
  color: #333333;
}

.collapsible-nav-list li[aria-selected="true"]::after {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  content: "\f282"; /* bi-chevron-down */
  position: absolute;
  right: 0;
}

@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected="true"]::after {
    display: none;
  }
}

[dir="rtl"] .collapsible-nav-list li[aria-selected="true"]::after {
  left: 0;
  right: auto;
}

.collapsible-nav[aria-expanded="true"] {
  max-height: none;
}

.collapsible-nav[aria-expanded="true"] li[aria-selected="true"]::after {
  content: "\f659"; /* bi-x-lg */
}

/* Sidebar navigation that collapses on mobile */
.collapsible-sidebar {
  flex: 1;
  max-height: 45px;
  overflow: hidden;
  padding: 10px 0;
  position: relative;
}

@media (min-width: 1024px) {
  .collapsible-sidebar {
    max-height: none;
    padding: 0;
  }
}

.collapsible-sidebar[aria-expanded="true"] {
  max-height: none;
}

.collapsible-sidebar[aria-expanded="true"] .collapsible-sidebar-title::after {
  content: "\f659"; /* bi-x-lg */
}

@media (min-width: 1024px) {
  .collapsible-sidebar[aria-expanded="true"] .collapsible-sidebar-title::after {
    display: none;
  }
}

.collapsible-sidebar-title {
  margin-top: 0;
}

.collapsible-sidebar-title::after {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  content: "\f282"; /* bi-chevron-down */
  position: absolute;
  right: 10px;
}

@media (min-width: 1024px) {
  .collapsible-sidebar-title::after {
    display: none;
  }
}

[dir="rtl"] .collapsible-sidebar-title::after {
  left: 10px;
  right: auto;
}

/***** My activities *****/
.my-activities-nav {
  background-color: #f2f2f2;
  border: 0;
  margin-bottom: 20px;
}

.my-activities-sub-nav {
  background-color: transparent;
  border-bottom: 1px solid #ddd;
  margin-bottom: 30px;
}

@media (min-width: 768px) {
  .my-activities-sub-nav li:hover {
    border-bottom: 4px solid #ddd;
  }
}

.my-activities-sub-nav li[aria-selected="true"] {
  border-color: rgba(17, 25, 40, 1);
}

.my-activities-table .striped-list-title {
  /* My activities tables */
  display: block;
  margin-bottom: 10px;
  max-width: 350px;
  white-space: normal;
}

@media (min-width: 1024px) {
  .my-activities-table .striped-list-title {
    margin-bottom: 0;
    max-width: 500px;
    min-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.my-activities-table thead {
  display: none;
}

@media (min-width: 768px) {
  .my-activities-table thead {
    display: table-header-group;
  }
}

.my-activities-table th:first-child,
.my-activities-table td:first-child {
  padding-left: 0;
}

@media (min-width: 1024px) {
  .my-activities-table th:first-child,
  .my-activities-table td:first-child {
    width: 500px;
  }
}

.my-activities-table th:last-child,
.my-activities-table td:last-child {
  padding-right: 0;
}

.my-activities-table td:not(:first-child) {
  display: none;
}

@media (min-width: 768px) {
  .my-activities-table td:not(:first-child) {
    display: table-cell;
  }
}

/* Requests table */
.requests-search {
  width: 100%;
  border: 1px solid #ddd !important;
}
.requests-search:focus {
  border-color: rgba(17, 25, 40, 1) !important;
}

.requests-table-toolbar {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .requests-table-toolbar {
    flex-direction: row;
  }
}

.requests-table-toolbar .search {
  flex: 1;
  width: 100%;
}

.requests-table-toolbar .request-table-filter {
  width: 100%;
}

@media (min-width: 768px) {
  .requests-table-toolbar .request-table-filter {
    width: auto;
  }
}

.requests-table-toolbar .request-filter {
  display: block;
}

@media (min-width: 768px) {
  .requests-table-toolbar .request-filter {
    margin: 0 0 0 30px;
  }
  [dir="rtl"] .requests-table-toolbar .request-filter {
    margin: 0 30px 0 0;
  }
}

.requests-table-toolbar .request-filter-label {
  font-size: 13px;
  margin-top: 30px;
}

@media (min-width: 768px) {
  .requests-table-toolbar .request-filter-label {
    margin-top: 0;
  }
}

.requests-table-toolbar select {
  max-height: 40px;
  margin-bottom: 30px;
  width: 100%;
}

@media (min-width: 768px) {
  .requests-table-toolbar select {
    margin-bottom: 0;
    max-width: 300px;
    width: auto;
  }
}

.requests-table-toolbar .organization-subscribe,
.requests-table-toolbar .organization-unsubscribe {
  line-height: 40px;
  max-height: 40px;
  padding: 0 20px;
}

@media (min-width: 768px) {
  .requests-table-toolbar .organization-subscribe,
  .requests-table-toolbar .organization-unsubscribe {
    margin-left: 10px;
  }
  [dir="rtl"] .requests-table-toolbar .organization-subscribe, [dir="rtl"]
  .requests-table-toolbar .organization-unsubscribe {
    margin: 0 10px 0 0;
  }
}

.requests-table-toolbar .organization-unsubscribe {
  background-color: rgba(17, 25, 40, 1);
  color: rgba(17, 25, 40, 1);
}

.requests-table-toolbar + .requests-search-info {
  margin-top: 15px;
}

.requests-table-toolbar + .requests-search-info.meta-data::after {
  content: "";
  margin: 0;
}

.requests-table-toolbar + .requests-search-info + .requests {
  margin-top: 20px;
}

.requests-table-toolbar + .requests {
  margin-top: 40px;
}

.requests .requests-table-meta {
  display: block;
}

@media (min-width: 768px) {
  .requests .requests-table-meta {
    display: none;
  }
}

.requests .requests-table thead {
  display: none;
}

@media (min-width: 768px) {
  .requests .requests-table thead {
    display: table-header-group;
  }
}

.requests .requests-table-info {
  display: block;
}

@media (min-width: 768px) {
  .requests .requests-table-info {
    display: table-cell;
    vertical-align: middle;
    width: auto;
  }
}

.requests .requests-table .requests-link {
  position: relative;
}

.requests .requests-table .requests-sort-symbol {
  position: absolute;
  left: calc(100% + 3px);
  bottom: 0;
  font-size: 10px;
}

/* Following table */
.subscriptions-unsubscribe a {
  background: rgba(17, 25, 40, 1);
  border-radius: 4px;
  color: rgba(17, 25, 40, 1);
  display: inline-block;
  font-size: 12px;
  line-height: 2.34;
  padding: 0 20px;
  text-align: center;
  width: 100%;
}

@media (min-width: 768px) {
  .subscriptions-unsubscribe a {
    width: auto;
  }
}

.subscriptions-unsubscribe a:hover {
  background-color: #000;
  text-decoration: none;
}

.subscriptions-table td:last-child {
  display: block;
}

@media (min-width: 768px) {
  .subscriptions-table td:last-child {
    display: table-cell;
  }
}

.subscriptions-table td:first-child {
  display: flex;
  align-items: center;
}

.subscriptions-table .user-avatar {
  margin-right: 10px;
}

.subscriptions .striped-list-title {
  display: inline-block;
  vertical-align: middle;
}

/* Contributions table */
.contributions-table td:last-child {
  color: #666;
  font-size: 13px;
  font-weight: 300;
}

@media (min-width: 768px) {
  .contributions-table td:last-child {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }
}

.no-activities {
  color: #666;
}

/***** Request *****/
.request-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media (min-width: 1024px) {
  .request-container {
    align-items: flex-start;
    flex-direction: row;
  }
}

.request-container .comment-container {
  min-width: 0;
}

.request-breadcrumbs {
  margin-bottom: 40px;
}

@media (min-width: 1024px) {
  .request-breadcrumbs {
    margin-bottom: 60px;
  }
}

.request-main {
  flex: 1 0 auto;
  order: 1;
}

.request-main .comment-fields, .request-main .request-submit-comment {
  display: none;
}

.request-main .comment-fields.shown {
  display: block;
}

.request-main .request-submit-comment.shown {
  display: inline;
}

@media (min-width: 1024px) {
  .request-main {
    flex: 0 0 66%;
    order: 0;
    min-width: 0;
  }
}

.request-main .comment-form-controls {
  display: block;
}

.request-main .comment-ccs {
  display: block;
}

.request-main .comment-show-container {
  border-radius: 2px;
  border: 1px solid #ddd;
  cursor: pointer;
  display: flex;
  padding: 8px 15px;
  width: 100%;
}

.request-main .comment-show-container.hidden {
  display: none;
}

.request-main .comment-show-container-content {
  align-self: center;
  color: #666;
  margin-left: 10px;
}

.request-main .form-field.comment-ccs > ul {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}

.request-main .form-field.comment-ccs > ul[data-hc-focus="true"] {
  border: 1px solid rgba(17, 25, 40, 1);
}

.request-main .form-field.comment-ccs > input[type="text"] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}

.request-main .comment-ccs + textarea {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: 0;
}

.request-main .comment-ccs + textarea:focus {
  border-top: 1px solid rgba(17, 25, 40, 1);
}

.request-main input#mark_as_solved {
  display: none;
}

.request-title {
  width: 100%;
}

@media (min-width: 1024px) {
  .request-title {
    border-bottom: 1px solid #ddd;
    margin-bottom: 0;
    max-width: 66%;
    padding-bottom: 20px;
  }
}

.request-sidebar {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  order: 0;
}

@media (min-width: 1024px) {
  .request-sidebar {
    background-color: #f7f7f7;
    border: 0;
    font-size: 13px;
    flex: 0 0 auto;
    padding: 0 20px;
    width: 30%;
  }
}

.request-sidebar h5 {
  font-size: 15px;
  font-weight: 600;
  position: relative;
}

@media (min-width: 1024px) {
  .request-sidebar h5 {
    display: none;
  }
}

.request-details {
  border-bottom: 1px solid #ddd;
  font-size: 0;
  margin: 0;
  padding-bottom: 20px;
}

.request-details:last-child {
  border: 0;
}

.request-details dt, .request-details dd {
  display: inline-block;
  vertical-align: top;
  font-size: 13px;
  margin: 20px 0 0 0;
}

.request-details dd {
  padding: 0 10px;
  width: 60%;
}

.request-details dd::after {
  content: "\A";
  white-space: pre;
}

.request-details dt {
  color: #666;
  font-weight: 300;
  width: 40%;
}

.request-details .request-collaborators {
  display: inline-block;
}

.request-attachments dt, .request-attachments dd {
  width: 100%;
}

.request-attachments dd {
  margin: 10px 0 0 0;
}

.request-form textarea {
  min-height: 120px;
}

.request-follow-up {
  padding-top: 20px;
}

/***** Pagination *****/
.pagination {
  margin: 20px 0;
  text-align: center;
}

.pagination * {
  display: inline-block;
}

/*
  .pagination li used to be a fixed 40x40 (30x30 from 768px) circle, sized
  only for a single page-number digit. The pagination helper also renders
  plain-text links on this same markup for prev/next/first/last (e.g. a
  Japanese "次へ ›" / "最新 »" label on the search results page), and that
  text has nowhere to go in a rigid 40px circle -- it wraps character by
  character into a vertical stack instead of showing as one line. Switched
  to a min-width/auto-height "pill" so any content (a digit or a full text
  label with an arrow) sizes itself and reads as a proper button, per
  request.
*/
.pagination li {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 枠線の色は管理画面の「カードの枠線の色」設定(card_border_color)から変更可能。
     .blocks-item(カテゴリカード)と同じ設定・考え方。太さは視認性のため2pxに
     しており(.blocks-itemの1pxより少し太め)、box-sizing: border-boxで
     min-height/min-widthに含めている。 */
  border: 2px solid rgba(143, 141, 141, 1);
  border-radius: 20px;
  box-sizing: border-box;
  min-height: 40px;
  min-width: 40px;
  height: auto;
  width: auto;
  float: left;
  margin-left: 5px;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .pagination li {
    min-height: 30px;
    min-width: 30px;
    border-radius: 15px;
  }
}

[dir="rtl"] .pagination li {
  float: right;
}

.pagination li:hover:not(.pagination-current) {
  /* ホバー時の背景色は、テーマ設定の「ボタンのホバー色」(button_hover_color)を
     使用。.blocks-item(カテゴリカード)のホバーと同じ設定・考え方。 */
  background-color: rgba(254, 254, 143, 1);
}

.pagination li:hover:not(.pagination-current) span, .pagination li:hover:not(.pagination-current) a {
  color: #333333;
  text-decoration: none;
}

.pagination a, .pagination span {
  font-size: 15px;
  /* 文字を少し濃く・太くして視認性を上げている(以前は #666
     で薄めのグレーだった)。 */
  color: #333333;
  font-weight: 600;
  padding: 10px 16px;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .pagination a, .pagination span {
    font-size: 13px;
    padding: 5px 14px;
  }
}

.pagination-current {
  background-color: rgba(17, 25, 40, 1);
}

.pagination-current a, .pagination-current span {
  color: rgba(17, 25, 40, 1);
}

.pagination-first {
  border-radius: 3px 0 0 3px;
}

[dir="rtl"] .pagination-first {
  border-radius: 0 3px 3px 0;
}

.pagination-last {
  border-radius: 0 3px 3px 0;
}

[dir="rtl"] .pagination-last {
  border-radius: 3px 0 0 3px;
}

/***** Metadata *****/
.meta-group {
  display: block;
}

.meta-group * {
  display: inline;
}

.meta-data {
  color: #666;
  font-size: 13px;
  font-weight: 300;
}

.meta-data:not(:last-child)::after {
  content: "\00B7";
  margin: 0 5px;
}

/***** Icons *****/
/*
  アイコン共通のフォント指定。以前は標準Copenhagen由来の "copenhagen-icons"
  を指定していたが、このフォントはテーマに含まれておらず(@font-faceなし)、
  OSのフォント・絵文字(💬📎☰など)で表示されていたため、同梱の
  Bootstrap Iconsに統一した。各アイコンの content は Bootstrap Icons の
  コードポイント(コメントにアイコン名)。テンプレート側にインラインSVGの
  アイコンがある箇所(コメントの投票・操作メニュー・添付ファイル・検索結果の
  コメント数)は、二重表示を避けるため content: none にしている。
*/
[class^="icon-"]::before,
[class*=" icon-"]::before,
.icon,
.recent-activity-item-comment span::before,
.article-vote::before,
.attachments .attachment-item::before,
.share a::before,
.vote-up::before,
.vote-down::before,
.actions .dropdown-toggle::before,
.collapsible-nav-list li[aria-selected="true"]::after,
.collapsible-sidebar-title::after,
.search-result-votes::before,
.search-result-meta-count::before {
  font-family: "Bootstrap Icons";
  font-style: normal;
  font-weight: normal;
  speak: none;
  line-height: 1em;
  vertical-align: middle;
  -webkit-font-smoothing: antialiased;
}


.icon-lock::before {
  content: "\f47a"; /* bi-lock-fill */
}

.icon-star::before {
  content: "\f586"; /* bi-star-fill */
}

.icon-linkedin::before {
  content: "\f472"; /* bi-linkedin */
}

.icon-twitter::before {
  content: "\f8db"; /* bi-twitter-x */
}

.icon-googleplus-::before {
  content: "\f3f0"; /* bi-google */
}

.icon-facebook::before {
  content: "\f344"; /* bi-facebook */
}

.icon-agent::before {
  content: "\f4da"; /* bi-person-fill */
}

.icon-close::before {
  content: "\f659"; /* bi-x-lg */
}

.icon-arrow-up::before {
  content: "\f148"; /* bi-arrow-up */
}

.icon-arrow-down::before {
  content: "\f128"; /* bi-arrow-down */
}

.icon-attachments::before {
  content: "\f4b3"; /* bi-paperclip */
}

.icon-comments::before {
  content: "\f268"; /* bi-chat */
}

.icon-search::before {
  content: "\f52a"; /* bi-search */
}

.icon-vote::before {
  content: "\f407"; /* bi-hand-thumbs-up */
}

.icon-handle::before {
  content: "\f282"; /* bi-chevron-down */
}

.icon-check::before {
  content: "\f633"; /* bi-check-lg */
}

.icon-gear::before {
  content: "\f3e5"; /* bi-gear */
}

.icon-menu::before {
  content: "\f479"; /* bi-list */
  font-size: 24px;
}

.icon-article::before {
  content: "\f3b9"; /* bi-file-text */
}

.icon-post::before {
  content: "\f444"; /* bi-journal-text */
}

.icon-notification-alert::before {
  content: "\f33b"; /* bi-exclamation-triangle */
}

.icon-notification-error::before {
  content: "\f623"; /* bi-x-circle */
}

.icon-notification-info::before {
  content: "\f431"; /* bi-info-circle */
}

.icon-notification-success::before {
  content: "\f26b"; /* bi-check-circle */
}

/* User Profiles */
.profile-header {
  padding: 30px 0;
  background-color: #f7f7f7;
}

.profile-header .container {
  display: flex;
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .profile-header .container {
    flex-wrap: nowrap;
  }
}

.profile-header .profile-info {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
}

.profile-avatar {
  position: relative;
  line-height: 0;
  align-self: center;
  margin-right: 10px;
}

[dir="rtl"] .profile-avatar {
  margin-left: 10px;
  margin-right: 0;
}

.profile-avatar .user-avatar {
  width: 65px;
  height: 65px;
}

.profile-avatar .icon-agent::before {
  bottom: 0;
  right: 0;
}

.profile-header .basic-info {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}

.profile-header .basic-info .name {
  margin: 0;
}

.profile-header .options {
  display: flex;
  flex-basis: 100%;
  margin-top: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .profile-header .options {
    flex-wrap: nowrap;
    flex-basis: auto;
    margin-top: 0;
    margin-left: 10px;
  }
  [dir="rtl"] .profile-header .options {
    margin-left: 0;
    margin-right: 10px;
  }
  .profile-header .options > :not(:last-child) {
    margin-bottom: 0;
    margin-right: 10px;
  }
  [dir="rtl"] .profile-header .options > :not(:last-child) {
    margin-left: 10px;
    margin-right: 0;
  }
}

.profile-header .options [data-action="edit-profile"] {
/*   background-color: rgba(17, 25, 40, 1); */
  border: 0;
  color: rgba(17, 25, 40, 1);
  line-height: normal;
  padding: 8px 20px;
}

.profile-header .description {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  margin: 15px 0;
  flex-basis: 100%;
}

.profile-stats {
  font-size: 13px;
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
}

.profile-stats .stat {
  display: flex;
  margin-bottom: 10px;
}

.profile-stats .stat-label {
  color: #666;
  font-weight: 300;
  flex: 0 0 100px;
  margin-right: 10px;
}

[dir="rtl"] .profile-stats .stat-label {
  margin-left: 10px;
  margin-right: 0;
}

.profile-stats-activity {
  border-top: solid 1px #ddd;
  margin-top: 15px;
}

@media (min-width: 768px) {
  .profile-stats-activity {
    border-top: 0;
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .profile-stats-activity .stat {
    flex-direction: column;
  }
}

.profile-stats-activity .stat:first-child {
  margin-top: 10px;
}

@media (min-width: 768px) {
  .profile-stats-activity .stat:first-child {
    margin-top: 0;
  }
}

@media (min-width: 768px) {
  .profile-stats-activity .stat:not(:last-child) {
    margin-right: 40px;
  }
  [dir="rtl"] .profile-stats-activity .stat:not(:last-child) {
    margin-left: 40px;
    margin-right: 0;
  }
}

@media (min-width: 768px) {
  .profile-stats-activity .stat-label {
    flex: 0 1 auto;
  }
}

.profile-stats-counters {
  border-bottom: solid 1px #ddd;
}

@media (min-width: 768px) {
  .profile-stats-counters {
    flex: 0 0 200px;
    border-bottom: 0;
    margin-left: 40px;
  }
  [dir="rtl"] .profile-stats-counters {
    margin-left: 0;
    margin-right: 40px;
  }
}

@media (min-width: 1024px) {
  .profile-stats-counters {
    flex: 0 0 270px;
    margin-left: 60px;
  }
  [dir="rtl"] .profile-stats-counters {
    margin-right: 60px;
    margin-left: 0;
  }
}

@media (min-width: 768px) {
  .profile-stats-counters .stat {
    flex-direction: column;
  }
}

@media (min-width: 1024px) {
  .profile-stats-counters .stat {
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .profile-stats-counters .stat:not(:last-child) {
    margin-bottom: 15px;
  }
}

@media (min-width: 768px) {
  .profile-stats-counters .stat-label {
    flex: 0 1 auto;
  }
}

@media (min-width: 1024px) {
  .profile-stats-counters .stat-label {
    flex: 0 0 100px;
  }
}

.profile-private-badge {
  flex-basis: 100%;
  border: solid 1px rgba(17, 25, 40, 1);
  border-radius: 4px;
  color: rgba(17, 25, 40, 1);
  padding: 7px 20px;
  font-size: 12px;
  text-align: center;
  margin-bottom: 5px;
}

.profile-private-badge::after {
  content: "\f47a"; /* bi-lock-fill */
  margin-left: 5px;
  font-family: "Bootstrap Icons";
  vertical-align: middle;
  line-height: 15px;
}

@media (min-width: 768px) {
  .profile-private-badge {
    flex-basis: auto;
  }
}

.profile-nav {
  background-color: #f2f2f2;
  border: 0;
  margin-bottom: 37px;
}

.profile-section {
  width: 100%;
}

@media (min-width: 1024px) {
  .profile-section {
    width: calc(100% - 330px);
  }
}

.profile-section-header {
  display: flex;
  flex-wrap: wrap;
}

.profile-section-title {
  flex-basis: 100%;
  margin-bottom: 0;
}

.profile-section-description {
  flex-basis: 100%;
  padding: 10px 0;
  color: #666;
  font-weight: 300;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 768px) {
  .profile-section-description {
    flex: 1 0 50%;
    padding-bottom: 0;
  }
}

.profile-section-sorter {
  flex-basis: 100%;
  border-top: solid 1px #eee;
  font-size: 13px;
}

.profile-section-sorter .dropdown-toggle {
  padding: 10px 0;
  width: 100%;
}

.profile-section-sorter .dropdown-toggle::after {
  position: absolute;
  right: 0;
}

[dir="rtl"] .profile-section-sorter .dropdown-toggle::after {
  left: 0;
  right: initial;
}

@media (min-width: 768px) {
  .profile-section-sorter .dropdown-toggle::after {
    position: relative;
  }
}

@media (min-width: 768px) {
  .profile-section-sorter {
    flex: 0 1 auto;
    padding-top: 0;
    border-top: 0;
    margin-left: 20px;
  }
  [dir="rtl"] .profile-section-sorter {
    margin-left: 0;
    margin-right: 20px;
  }
}

.profile-contribution {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  padding: 20px 0;
  position: relative;
}

.profile-contribution-header {
  margin-bottom: 5px;
}

.profile-contribution-title {
  margin: 0 0 5px 0;
  display: inline;
  line-height: 21px;
  font-size: 15px;
  vertical-align: middle;
}

.profile-contribution-body {
  margin: 10px 0;
}

.profile-contribution-list > .profile-contribution {
  border-top: 1px solid #eee;
}

@media (min-width: 768px) {
  .profile-contribution-list > .profile-contribution {
    padding-left: 30px;
  }
  [dir="rtl"] .profile-contribution-list > .profile-contribution {
    padding-right: 30px;
    padding-left: 0;
  }
}

.profile-contribution-list > .profile-contribution:last-child {
  border-bottom: 1px solid #eee;
}

.profile-contribution-list > .profile-contribution::before {
  left: 0;
  position: absolute;
  font-size: 16px;
  color: #ccc;
  font-family: "Bootstrap Icons";
  line-height: 25px;
}

[dir="rtl"] .profile-contribution-list > .profile-contribution::before {
  right: 0;
}

.profile-contribution-list .profile-contribution-header {
  margin-left: 30px;
}

[dir="rtl"] .profile-contribution-list .profile-contribution-header {
  padding-right: 30px;
  padding-left: 0;
}

@media (min-width: 768px) {
  .profile-contribution-list .profile-contribution-header {
    margin-left: 0;
  }
  [dir="rtl"] .profile-contribution-list .profile-contribution-header {
    padding-right: 0;
  }
}

.profile-comments .profile-contribution-breadcrumbs {
  margin-left: 30px;
}

[dir="rtl"] .profile-comments .profile-contribution-breadcrumbs {
  padding-right: 30px;
  padding-left: 0;
}

@media (min-width: 768px) {
  .profile-comments .profile-contribution-breadcrumbs {
    margin-left: 0;
  }
  [dir="rtl"] .profile-comments .profile-contribution-breadcrumbs {
    padding-right: 0;
  }
}

.profile-section .no-activity,
.profile-section .private-activity {
  display: block;
  margin-top: 40px;
  color: #999;
}

.profile-section .private-activity::before {
  content: "\f47a"; /* bi-lock-fill */
  font-family: "Bootstrap Icons";
  font-style: normal;
  font-size: 12px;
  font-weight: normal;
  vertical-align: middle;
  margin-right: 10px;
}

[dir="rtl"] .profile-section .private-activity::before {
  margin-right: 0;
  margin-left: 10px;
}

.profile-activity-list {
  margin-top: 25px;
}

.profile-activity {
  position: relative;
  padding-bottom: 30px;
}

@media (min-width: 768px) {
  .profile-activity {
    padding-left: 20px;
  }
  [dir="rtl"] .profile-activity {
    padding-right: 20px;
    padding-left: 0;
  }
}

@media (min-width: 768px) {
  .profile-activity:not(:last-child) {
    border-left: 1px solid #ddd;
  }
  [dir="rtl"] .profile-activity:not(:last-child) {
    border-left: 0;
    border-right: 1px solid #ddd;
  }
}

.profile-activity-header {
  display: flex;
  align-items: center;
  margin-left: 35px;
}

[dir="rtl"] .profile-activity-header {
  margin-left: 0;
  margin-right: 35px;
}

@media (min-width: 768px) {
  .profile-activity-header {
    margin-left: 0;
  }
  [dir="rtl"] .profile-activity-header {
    margin-right: 0;
  }
}

.profile-activity-header .user-avatar {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  min-width: 40px;
  align-self: flex-start;
}

[dir="rtl"] .profile-activity-header .user-avatar {
  margin-left: 10px;
  margin-right: 0;
}

.profile-activity-description {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  margin: 0;
  min-width: 0;
  width: 100%;
}

.profile-activity-description span:first-child {
  font-weight: 600;
  display: inline;
}

.profile-activity-contribution {
  padding: 20px;
  margin-top: 10px;
  border-radius: 8px;
  background-color: #f7f7f7;
}

@media (min-width: 768px) {
  .profile-activity-contribution {
    margin-top: 0;
    margin-left: 50px;
  }
  [dir="rtl"] .profile-activity-contribution {
    margin-left: 0;
    margin-right: 50px;
  }
}

.profile-activity::before {
  position: absolute;
  left: 0;
  width: 28px;
  border-radius: 50%;
  content: "";
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-color: #FFFFFF;
  background-position: 50% 50%;
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  color: #ccc;
  font-family: "Bootstrap Icons";
}

[dir="rtl"] .profile-activity::before {
  right: 0;
}

@media (min-width: 768px) {
  .profile-activity::before {
    left: -14px;
  }
  [dir="rtl"] .profile-activity::before {
    right: -14px;
  }
}

.profile-articles > .profile-contribution::before,
.profile-activity-list > li[class$="-article"]::before {
  content: "\f3b9"; /* bi-file-text */
}

.profile-posts > .profile-contribution::before,
.profile-activity-list > li[class$="-post"]::before {
  content: "\f444"; /* bi-journal-text */
}

.profile-comments > .profile-contribution::before,
.profile-activity-list > li[class$="-comment"]::before {
  content: "\f268"; /* bi-chat */
  line-height: 35px;
}

/***** Search results *****/
.search-results {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media (min-width: 1024px) {
  .search-results {
    flex-direction: row;
  }
}

.search-results-column {
  flex: 1;
}

@media (min-width: 1024px) {
  .search-results-column {
    flex: 0 0 75%;
  }
}

/*
  検索結果の左サイドバー（source_filters / type_filters / subfilters）。
  このテーマ既存の .collapsible-sidebar（クリックで開閉する仕組み、
  script.js側に既存の汎用ハンドラあり）と .sidenav-item（既存のサイド
  ナビ項目スタイル）をそのまま流用し、複数ブランド分のソース一覧が
  長くなる場合のみ .multibrand-filter-list--collapsed / .see-all-filters
  で「もっと見る」展開ができるようにしている。
*/
.search-results-sidebar {
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}

@media (min-width: 1024px) {
  .search-results-sidebar {
    border: 0;
    flex: 0 0 20%;
    height: auto;
  }
}

.search-results-sidebar .filters-in-section {
  margin-bottom: 30px;
}

.search-results-sidebar .sidenav-item {
  border-radius: 4px;
  padding: 10px 36px;
  margin-bottom: 4px;
  color: #333333;
}

.search-results-sidebar .sidenav-item:hover,
.search-results-sidebar .sidenav-item.current {
  /* ホバー時の背景色は、テーマ設定の「ボタンのホバー色」(button_hover_color)を
     使用。.blocks-item/.pagination liのホバーと同じ設定・考え方
     (以前は固定色#e9ebedだった)。 */
  background-color: rgba(254, 254, 143, 1);
  text-decoration: none;
}

.search-results-sidebar .sidenav-subitem {
  unicode-bidi: embed;
}

/* ブランド数(6件超)が多い場合は7件目以降を折りたたんでおき、「もっと見る」で展開する */
.search-results-sidebar .multibrand-filter-list--collapsed li:nth-child(1n+6):not(.see-all-filters-item) {
  display: none;
}

.search-results-sidebar .multibrand-filter-list .doc-count {
  color: #666;
}

.search-results-sidebar .see-all-filters {
  background: none;
  border: none;
  cursor: pointer;
  display: block;
  padding: 10px;
  color: rgba(28, 100, 242, 1);
}

.search-results-sidebar .see-all-filters[aria-hidden="true"] {
  display: none;
}

.search-results-sidebar .see-all-filters:hover {
  text-decoration: underline;
}

.search-results-sidebar .see-all-filters::after {
  /* 「すべて表示」の右の下向き矢印(Bootstrap Icons)。以前は文字「⌄」(太字)だったが、
     ページのフォントに含まれずOSのフォントで表示されていたため置き換えた。
     アイコンフォントに太字はないため font-weight は normal(太字にすると
     ブラウザが無理に太らせてにじむ)。文字との間隔は margin で取る。 */
  content: "\f282"; /* bi-chevron-down */
  content: "\f282" / "";
  font-family: "Bootstrap Icons";
  font-style: normal;
  font-weight: normal;
  font-size: 0.8em;
  margin-left: 0.3em;
  vertical-align: -0.1em;
}

/*
  content_tag_filters（コンテンツタグによる絞り込み）は、見た目・挙動とも
  source_filters/subfiltersと同じ.sidenav-item/.multibrand-filter-list
  スタイルを流用しているため、専用のCSSは不要。
*/

/* 該当なし時のイラスト付き表示 */
.search-results .no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4rem;
  text-align: center;
}

.search-results .no-results .headline {
  color: #2f3941;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.45px;
  margin-top: 20px;
}

.search-results .no-results .action-prompt {
  color: #68737d;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.154px;
  margin-top: 8px;
}

.search-results .no-results .action-prompt a {
  color: rgba(28, 100, 242, 1);
}

.search-results .no-results .action-prompt a:visited {
  color: rgba(28, 100, 242, 1);
}

.search-results-list {
  margin-bottom: 25px;
}

.search-results-list > li {
  border-bottom: 1px solid #ddd;
  padding: 20px 0;
}

.search-results-list > li:first-child {
  border-top: 1px solid #ddd;
}

.search-result-description {
  margin-top: 15px;
}

.search-result-votes, .search-result-meta-count {
  color: #666;
  display: inline-block;
  font-size: 13px;
  font-weight: 300;
  padding: 4px 5px;
  position: relative;
}

.search-result-votes::before, .search-result-meta-count::before {
  color: rgba(17, 25, 40, 1);
}

[dir="ltr"] .search-result-votes, [dir="ltr"] .search-result-meta-count {
  margin-left: 5px;
}

[dir="ltr"] .search-result-votes::before, [dir="ltr"] .search-result-meta-count::before {
  margin-right: 3px;
}

[dir="rtl"] .search-result-votes, [dir="rtl"] .search-result-meta-count {
  margin-right: 5px;
}

[dir="rtl"] .search-result-votes::before, [dir="rtl"] .search-result-meta-count::before {
  margin-left: 3px;
}

.search-result-votes::before {
  content: none; /* テンプレート側のインラインSVGを使う */
}

.search-result-meta-count::before {
  content: none; /* テンプレート側のインラインSVGを使う */
}

.search-result .meta-group {
  align-items: center;
}
.search-result > a {
  font-size: 18px;
}
.search-result-breadcrumbs {
  margin: 0;
}
.search-result-breadcrumbs li:first-of-type::before,
.profile-contribution-breadcrumbs li:first-of-type::before {
  content: none;
}
.search-act {
  margin-left: 20px;
  padding-bottom: 50px;
}
.search-act li {
  padding: 20px 0;
  position: relative;
  line-height: 20px;
}
.search-act li::before {
  content: "\f138"; /* bi-arrow-right */
  font-family: "Bootstrap Icons";
  font-style: normal;
  font-weight: normal;
  vertical-align: -0.125em;
  margin-right: 10px;
}
.search-act li.chatbtn a::before {
  content: "\f268"; /* bi-chat */
  font-family: "Bootstrap Icons";
  font-style: normal;
  font-weight: normal;
  margin-right: 5px;
  font-size: 20px;
  line-height: 20px;
  color: rgba(28, 100, 242, 1);
  display: inline-block;
  vertical-align: -3px;
}
.search-act li.formbtn a::before {
  content: "\f32f"; /* bi-envelope */
  font-family: "Bootstrap Icons";
  font-style: normal;
  font-weight: normal;
  margin-right: 5px;
  font-size: 20px;
  line-height: 20px;
  color: rgba(28, 100, 242, 1);
  display: inline-block;
  vertical-align: -3px;
}
.search-act .search {
  display: inline-block;
  margin-left: 10px;
}
.search-act .search input[type="search"] {
  max-width: 100%;
  border: 1px solid #ddd;
  height: 30px;
  margin-top: 5px;
}
@media (min-width: 768px) {
  .search-act .search input[type="search"] {
    margin-top: 0;
  }
}
/***** Added by Quollio Technologies
abbrを、色付きの<code>と同義で（設定値の強調）に使用するタグとして使用
*****/
.article-body abbr {
/*  font-style: italic; */
  color: #b81a1a; /* 少し暗い赤 */
  background: #f2f2f2; /*少し暗くカスタム*/
  border: 2px solid #ddd;                     /*少し太くカスタム*/
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
/***** Added by Quollio Technologies - start *****/
.custom-article-note {
  background-color: #ffffff; 
  border: 1px solid #999999;
  border-radius: 6px; 
  border-left: 1px solid #999999; /* 左側のボーダーでアクセント */
  border-right: 1px solid #999999; /* 左側のボーダーでアクセント */
  padding: 12px 24px;
}

.custom-green-notice {
  background-color: #f2fcfb;
  border: 1px solid #0fab29;
  border-radius: 6px; 
  border-left: 5px solid #0fab29; /* 左側のボーダーでアクセント */
  padding: 12px 24px;
}

.custom-red-notice {
  background-color: #feeeed; 
  border: 1px solid #e81515;
  border-radius: 6px; 
  border-left: 5px solid #e81515; /* 左側のボーダーでアクセント */
  padding: 12px 24px;
}

.custom-yellow-notice {
  background-color: #fafad2; 
  border: 1px solid #ffcc00;
  border-radius: 6px; 
  border-left: 5px solid #ffcc00; /* 左側のボーダーでアクセント */
  padding: 12px 24px;
}

.custom-info-msg {
  background-color: #F7F7F7; 
  border: 2px solid #0fab29;
  border-radius: 6px; 
  border-left: 5px solid #0fab29; /* 左側のボーダーでアクセント */
  padding: 12px 24px;
}

.custom-error-msg {
  background-color: #F7F7F7; 
  border: 2px solid #e81515;
  border-radius: 6px; 
  border-left: 5px solid #e81515; /* 左側のボーダーでアクセント */
  padding: 12px 24px;
}

.custom-warn-msg {
  background-color: #F7F7F7; 
  border: 2px solid #e8c515;
  border-radius: 6px; 
  border-left: 5px solid #e8c515; /* 左側のボーダーでアクセント */
  padding: 12px 24px;
}

.custom-debug-msg {
  background-color: #F7F7F7; 
  border: 2px solid #444345;
  border-radius: 6px; 
  border-left: 5px solid #444345; /* 左側のボーダーでアクセント */
  padding: 12px 24px;
}

.custom-stats-msg {
  background-color: #F7F7F7; 
  border: 1px solid #157eed;
  border-radius: 6px;
  border-left-style: double;    /* 左辺は二重線 */
  border-left: 5px double #157eed; /* 左側のボーダーでアクセント */
  border-right: 5px double #157eed; /* 左側のボーダーでアクセント */
  padding: 12px 24px;
}

zd-summary-block {
  background-color: #FFFFFF;     /* 背景色は白 */
  border: 1px solid #FFFFFF !important;
  border-radius: 6px;
  border-left: 3px solid #6B7280 !important;   /* 左側のアクセント線*/
  border-right: 3px solid #6B7280 !important;   /* 右側のアクセント線*/
  padding: 15px 20px;            /* 内側の余白 */
  display: block;
  margin-bottom: 40px;
}

/***** Added by Quollio Technologies - end *****/

/***** 見出しサイドバー（右）記事限定  *****/
.anchor-link{
  padding: 0 0 10px 0;
}
.anchor-link-H2{
  padding-left: 1em;
}
.anchor-link-H3{
  padding-left: 2em;
}
.anchor-link-H4{
  padding-left: 3em;
}
.anchor-link-area{
	padding-top: 10px;
  /*border-top: 1px solid #DDDDDD;
  border-bottom: 1px solid #DDDDDD;*/
}
.anchor-header{
  display: none;
  overflow: auto;
  height: 70vh;
  overflow-x: hidden;
}

@media (min-width: 1024px){
  .anchor-header{
    position: sticky;
    top: 80px;
    z-index: 1;
    display: block;
/*     margin-top: 40px; */
    padding-left: 5%;
    width: 25%;
  }
}

@media print{
  .anchor-header{
  	display: none;
  }
}

.anchor-space{
  padding-top: 1%;
}


a.now{
  color: #1c64f2 !important;
  font-weight: bold;
}
.open-dotted-line{
  background-image: linear-gradient(to right, #333 25%, rgba(255, 255, 255, 0) 0%);
  background-position: bottom;
  background-size: 6px 1px;
  background-repeat: repeat-x;
}

/* Added aka modified Callout and Accordion, by Quollio Technologies */
.wysiwyg-callout.wysiwyg-callout-error {
  --zd-wysiwyg-callout-error-bg: #feeeed;
  --zd-wysiwyg-callout-error-icon-color: #b30000;
  --zd-wysiwyg-callout-icon-size: 42px; /* デフォルトより大きく */

  border: 1px solid #b30000;
  border-left: 5px solid #b30000; /* 左側のボーダーでアクセント */
  border-radius: 6px; 
  /* padding: 12px 24px; */
}

.wysiwyg-callout.wysiwyg-callout-warning {
  --zd-wysiwyg-callout-warning-bg: #fdfce4;
  --zd-wysiwyg-callout-warning-icon-color: #997a00;
  --zd-wysiwyg-callout-icon-size: 42px; /* デフォルトより大きく */
  
  border: 1px solid #997a00;
  border-left: 5px solid #b8860b; /* 左側のボーダーでアクセント */
  border-radius: 6px;
}

.wysiwyg-callout.wysiwyg-callout-tip {
  --zd-wysiwyg-callout-tip-bg: #f2fcfb;
  --zd-wysiwyg-callout-tip-icon-color: #0a7a1e;
  --zd-wysiwyg-callout-icon-size: 42px; /* デフォルトより大きく */
  
  border: 1px solid #0a7a1e;
  border-left: 5px solid #0a7a1e; /* 左側のボーダーでアクセント */
  border-radius: 6px;
}

.wysiwyg-callout.wysiwyg-callout-info {
  --zd-wysiwyg-callout-info-bg: #f6f9fc;
  --zd-wysiwyg-callout-info-icon-color: #2c5d93;
  --zd-wysiwyg-callout-icon-size: 42px; /* デフォルトより大きく */

  border: 1px solid #2c5d93;
  border-left: 5px solid #2c5d93; /* 左側のボーダーでアクセント */
  border-radius: 6px;
}

.wysiwyg-disclosure {
  --zd-wysiwyg-disclosure-header-bg: #FAF6F3;
  --zd-wysiwyg-disclosure-header-bg-hover: #F2FAFA;
  --zd-wysiwyg-disclosure-border-color: #000000;
  border-radius: 6px;
  overflow: hidden; /* 角丸を有効にするために必要な場合が多い */
}

.wysiwyg-disclosure-content {
  background-color: #ffffff; /* 本文側の背景(公式プロパティ無し・直接指定) */
}

/* =========================================================================
   Dropdown component (base styles)
   ヘッダーのユーザーメニュー（.dropdown-toggle / 直後の兄弟要素
   .dropdown-menu、script.js側のDropdownコンポーネントと対になる）が
   正しく開閉・表示されるために必要な基本スタイル。
   ========================================================================= */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  cursor: pointer;
  background: none;
  border: 0;
  display: inline-block;
  padding: 0;
  text-align: initial;
  vertical-align: middle;
}
.dropdown-toggle:hover {
  text-decoration: none;
}
.dropdown-toggle > * {
  display: inline-block;
}
.dropdown-toggle[aria-expanded=true] + .dropdown-menu {
  display: block;
}

.dropdown-menu {
  background: #fff;
  border: 1px solid #d8dcde;
  border-radius: 3px;
  box-shadow: 0px 20px 30px 0px rgba(23, 73, 77, 0.15);
  display: none;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  left: 0;
  margin-top: 1px;
  min-width: 170px;
  padding: 10px 0;
  position: absolute;
  text-align: left;
  z-index: 1000;
}
[dir=rtl] .dropdown-menu {
  text-align: right;
}
.dropdown-menu [role=separator] {
  border-bottom: 1px solid #e9ebed;
  margin: 4px 0;
}
.dropdown-menu [role=menuitem],
.dropdown-menu [role=menuitemradio] {
  color: #2f3941;
  cursor: pointer;
  display: block;
  padding: 7px 40px 7px 20px;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  -webkit-appearance: none;
  text-align: start;
  line-height: inherit;
  width: 100%;
}
[dir=rtl] .dropdown-menu [role=menuitem],
[dir=rtl] .dropdown-menu [role=menuitemradio] {
  padding: 7px 20px 7px 40px;
}
.dropdown-menu [role=menuitem]:hover, .dropdown-menu [role=menuitem]:focus,
.dropdown-menu [role=menuitemradio]:hover,
.dropdown-menu [role=menuitemradio]:focus {
  background: rgba(31, 115, 183, 0.08);
  text-decoration: none;
  color: #2f3941;
}
.dropdown-menu [role=menuitem][aria-selected=true], .dropdown-menu [role=menuitem][aria-checked=true],
.dropdown-menu [role=menuitemradio][aria-selected=true],
.dropdown-menu [role=menuitemradio][aria-checked=true] {
  cursor: default;
}
.dropdown-menu [role=menuitem][hidden], .dropdown-menu [role=menuitem][aria-hidden=true],
.dropdown-menu [role=menuitemradio][hidden],
.dropdown-menu [role=menuitemradio][aria-hidden=true] {
  display: none !important;
}

.dropdown-menu-end {
  left: auto;
  right: 0;
}

.dropdown-menu-top {
  bottom: 100%;
  margin-bottom: 1px;
}

[dir=rtl] .dropdown-menu {
  left: auto;
  right: 0;
  text-align: right;
}
[dir=rtl] .dropdown-menu-end {
  left: 0;
  right: auto;
}

.dropdown-chevron-icon {
  vertical-align: middle;
}

.user-info {
  position: relative;
}

/* Article image lightbox */
.image-lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 40px;
  box-sizing: border-box;
}

.image-lightbox-image {
  max-width: 100%;
  max-height: 100%;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
}

.image-lightbox-close {
  position: absolute;
  top: 16px;
  right: 24px;
  background: none;
  border: 0;
  color: #fff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  padding: 8px;
}

body.image-lightbox-open {
  overflow: hidden;
}

/* =============================================================
   Stock Copenhagen v4.51.4 UI components (newer engine)

   The header/mobile-nav (.nav-wrapper-desktop/.nav-wrapper-mobile/
   .ask-ai), the collapsible article/category/section sidebars
   (.collapsible-sidebar-toggle/-body, .all-categories-sidebar/-tree),
   and the section-page sidebar list (.section-list) use the newer
   Copenhagen base's own markup/JS, which has no equivalent in the
   older base the production theme (style.css above) was built on.
   Appended verbatim from the stock v4.51.4 stylesheet so these
   components render styled rather than bare; nothing here overrides
   the production rules above it.
   ============================================================= */
.user-nav {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .user-nav {
    position: relative;
  }
}
.user-nav[aria-expanded=true] {
  background-color: #fff;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15), 0 4px 10px 0 rgba(0, 0, 0, 0.1);
  border: solid 1px #ddd;
  right: 0;
  left: 0;
  top: 71px;
  z-index: 1;
}
.user-nav[aria-expanded=true] > a {
  display: block;
  margin: 20px;
}
.user-nav[aria-expanded=true] > .user-nav-list li {
  display: block;
}
.user-nav[aria-expanded=true] > .user-nav-list a {
  display: block;
  margin: 20px;
}

.user-nav-list {
  display: block;
  list-style: none;
}
.user-nav-list > li {
  display: inline-block;
}

@media (max-width: 768px) {
  .nav-wrapper-desktop {
    display: none;
  }
}
@media (min-width: 768px) {
  .nav-wrapper-desktop {
    display: none;
  }
}
@media (min-width: 1024px) {
  .nav-wrapper-desktop {
    display: inline-block;
  }
}
.nav-wrapper-desktop a {
  border: 0;
  color: rgba(28, 100, 242, 1);
  display: none;
  font-size: 14px;
  padding: 0 20px 0 0;
  width: auto;
}
@media (min-width: 768px) {
  .nav-wrapper-desktop a {
    display: inline-block;
  }
}
[dir=rtl] .nav-wrapper-desktop a {
  padding: 0 0 0 20px;
}
.nav-wrapper-desktop a:hover, .nav-wrapper-desktop a:focus, .nav-wrapper-desktop a:active {
  background-color: transparent;
  color: rgba(28, 100, 242, 1);
  text-decoration: underline;
}

@media (min-width: 1024px) {
  .nav-wrapper-mobile {
    display: none;
  }
}
.nav-wrapper-mobile .menu-button-mobile {
  background: none;
  border: 0;
  width: auto;
  min-width: 71px;
  cursor: pointer;
}
.nav-wrapper-mobile .menu-button-mobile .icon-menu {
  padding: 7px;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.nav-wrapper-mobile .menu-button-mobile[aria-expanded=true] .icon-menu {
  background: #f3f3f3;
}
.nav-wrapper-mobile .menu-list-mobile {
  position: absolute;
  background-color: #fff;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15);
  border-top: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
  right: 0;
  left: 0;
  top: 71px;
  z-index: 2;
}
.nav-wrapper-mobile .menu-list-mobile[aria-expanded=false] {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile[aria-expanded=true] {
  display: block;
}
.nav-wrapper-mobile .menu-list-mobile-items .item {
  margin: 4px 0;
}
.nav-wrapper-mobile .menu-list-mobile-items li:empty:not(.nav-divider) {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider {
  border-bottom: 0.1px solid #ddd;
  padding: 0;
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider:last-child {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile-items button {
  background: none;
  border: none;
  padding: 8px 24px;
  width: 100%;
  height: 100%;
  color: #333333;
  cursor: pointer;
  text-align: start;
}
.nav-wrapper-mobile .menu-list-mobile-items button:active, .nav-wrapper-mobile .menu-list-mobile-items button:focus, .nav-wrapper-mobile .menu-list-mobile-items button:hover {
  background-color: #f3f3f3;
  text-decoration: underline;
}
.nav-wrapper-mobile .menu-list-mobile-items a {
  display: block;
  padding: 8px 24px;
  width: 100%;
  height: 100%;
  color: #333333;
}
.nav-wrapper-mobile .menu-list-mobile-items a:active, .nav-wrapper-mobile .menu-list-mobile-items a:focus, .nav-wrapper-mobile .menu-list-mobile-items a:hover {
  background-color: #f3f3f3;
}
.nav-wrapper-mobile .menu-list-mobile-items .my-profile {
  display: flex;
  line-height: 1.5;
}
.nav-wrapper-mobile .menu-list-mobile-items .my-profile .my-profile-tooltip {
  font-size: 12px;
  color: #68737D;
}
.nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  margin-top: 1px;
}
[dir=rtl] .nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
  margin-right: 0;
  margin-left: 8px;
}

.skip-navigation {
  align-items: center;
  background-color: black;
  color: white;
  display: flex;
  font-size: 14px;
  justify-content: center;
  left: -999px;
  margin: 20px;
  padding: 20px;
  overflow: hidden;
  position: absolute;
  top: auto;
  z-index: -999;
}
[dir=rtl] .skip-navigation {
  left: initial;
  right: -999px;
}
.skip-navigation:focus, .skip-navigation:active {
  left: auto;
  overflow: auto;
  text-align: center;
  text-decoration: none;
  top: auto;
  z-index: 999;
}
[dir=rtl] .skip-navigation:focus, [dir=rtl] .skip-navigation:active {
  left: initial;
  right: auto;
}

#zd-modal-container ~ .skip-navigation {
  display: none;
}

.ask-ai {
  align-items: center;
  background-color: rgba(28, 100, 242, 1);
  border: 1px solid rgba(28, 100, 242, 1);
  border-radius: 4px;
  color: rgba(17, 25, 40, 1);
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  gap: 6px;
  line-height: 1.4286;
  padding: 6px 14px;
}
.ask-ai:visited {
  color: rgba(17, 25, 40, 1);
}
.ask-ai .ask-ai-icon {
  flex-shrink: 0;
}

.nav-wrapper-desktop .ask-ai {
  margin-inline-end: 16px;
  padding: 6px 14px;
}
.nav-wrapper-desktop .ask-ai, .nav-wrapper-desktop .ask-ai:visited {
  color: rgba(17, 25, 40, 1);
}
.nav-wrapper-desktop .ask-ai:hover, .nav-wrapper-desktop .ask-ai:focus, .nav-wrapper-desktop .ask-ai:active {
  background-color: rgba(28, 100, 242, 1);
  border-color: rgba(28, 100, 242, 1);
  color: rgba(17, 25, 40, 1);
  text-decoration: none;
}

.nav-wrapper-mobile .ask-ai {
  margin: 4px 24px;
  padding: 6px 14px;
  width: auto;
  height: auto;
}
.nav-wrapper-mobile .ask-ai, .nav-wrapper-mobile .ask-ai:visited {
  color: rgba(17, 25, 40, 1);
}
.nav-wrapper-mobile .ask-ai:hover, .nav-wrapper-mobile .ask-ai:focus, .nav-wrapper-mobile .ask-ai:active {
  background-color: rgba(28, 100, 242, 1);
  border-color: rgba(28, 100, 242, 1);
  color: rgba(17, 25, 40, 1);
  text-decoration: none;
}


/* Sidebar navigation that collapses on mobile */
.collapsible-sidebar {
  flex: 1;
  max-height: 45px;
  overflow: hidden;
  padding: 10px 0;
  position: relative;
}
@media (min-width: 1024px) {
  .collapsible-sidebar {
    max-height: none;
    padding: 0;
  }
}
.collapsible-sidebar-title {
  margin-top: 0;
}
.collapsible-sidebar-toggle {
  position: absolute;
  top: 22.5px;
  transform: translateY(-50%);
  right: 0;
  padding: 0;
  border: 0;
  background: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
@media (min-width: 1024px) {
  .collapsible-sidebar-toggle {
    display: none;
  }
}
[dir=rtl] .collapsible-sidebar-toggle {
  left: 0;
  right: auto;
}
.collapsible-sidebar-toggle-icon {
  display: none;
}
.collapsible-sidebar-toggle[aria-expanded=false] .chevron-icon {
  display: inline-block;
}
.collapsible-sidebar-toggle[aria-expanded=true] .x-icon {
  display: inline-block;
}
.collapsible-sidebar-toggle:focus {
  outline: none;
  border: 1px solid rgba(17, 25, 40, 1);
}
.collapsible-sidebar-body {
  display: none;
}
@media (min-width: 1024px) {
  .collapsible-sidebar-body {
    display: block;
  }
}
.collapsible-sidebar.expanded {
  max-height: none;
}
.collapsible-sidebar.expanded .collapsible-sidebar-body {
  display: block;
}


/***** All-categories/sections sidebar tree (category & section pages) *****/
.all-categories-sidebar {
  margin-bottom: 30px;
}
@media (min-width: 1024px) {
  .all-categories-sidebar {
    border-right: 1px solid rgba(143, 141, 141, 1);
    flex: 0 0 240px;
    margin-bottom: 0;
    padding-right: 20px;
  }
}
.all-categories-tree {
  list-style: none;
  margin: 0;
  padding: 0;
}
.all-categories-tree-sections {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}
[dir=ltr] .all-categories-tree-sections {
  padding-left: 14px;
}
[dir=rtl] .all-categories-tree-sections {
  padding-right: 14px;
}
.all-categories-tree-sections .sidenav-item {
  font-size: 13px;
  margin-bottom: 8px;
  margin-top: 0;
}
.sidenav-item[aria-current=page] {
  color: rgba(17, 25, 40, 1);
  font-weight: 600;
}

.section-list {
  margin: 40px 0;
}

.section-list-item {
  border-bottom: 1px solid #ddd;
  font-size: 16px;
  padding: 15px 0;
}
.section-list-item:first-child {
  border-top: 1px solid #ddd;
}
.section-list-item a {
  align-items: center;
  color: #333333;
  display: flex;
  justify-content: space-between;
}

.see-all-sections-trigger {
  cursor: pointer;
  display: block;
  padding: 15px;
  text-align: center;
}
.see-all-sections-trigger[aria-hidden=true] {
  display: none;
}

/* ==========================================================================
   左サイドバー(カテゴリ > セクション > サブセクション)と、カテゴリ画面・
   セクション画面の一覧の見た目
   QTテンプレート(Copenhagen改 QTテンプレート Type3 v1.0)と同じ見た目・操作に
   するため、同テンプレートの該当部分のスタイルをそのまま取り込んでいる。
   以前の左ナビ(.navbar系)と、その丸アイコン(.category-nav li a::before)は
   廃止した(左サイドバーにアイコンは表示しない)。
   ========================================================================== */
.category-container {
  display: flex;
  flex-flow: column-reverse nowrap;
  align-items: flex-start;
  margin-top: 30px;
}
.category-content {
  width: 100%;
}
.section-tree .section {
  flex: initial;
  margin-bottom: 20px;
  padding-bottom: 20px;
}
.section-tree .section-tree-title {
  display: block;
}
.section-tree .section-tree-title a {
  display: block;
  background-color: #f3f3f3;
  padding: 10px;
}
.section-tree-title {
  margin-bottom: 0;
}
.section-tree .see-all-articles {
  display: block;
  padding: 15px 0;
  text-align: right;
}
.article-list-item {
  border-bottom: 1px dotted #ddd;
  font-size: 16px;
  padding: 0;
  position: relative;
}
.article-list-item:last-of-type {
  border-bottom: none;
}
.article-list-item a {
  display: block;
  color: #333333;
  padding: 15px 0;
}
.section-empty {
  margin-left: 30px;
}
.category-nav {
  width: 110%;
  position: relative;
  left: -5%;
}
.category-nav ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.category-nav-item {
  border-top: 1px solid #ddd;
}
.category-nav-row {
  display: flex;
  align-items: center;
}
.category-nav-link {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  text-decoration: none;
  color: rgba(17, 25, 40, 1);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  padding: 10px 8px 10px 20px;
}
.category-nav-link:hover {
  color: rgba(28, 100, 242, 1);
}
.category-nav-item.active > .category-nav-row > .category-nav-link {
  color: rgba(17, 25, 40, 1);
  font-weight: 700;
}
.category-nav-toggle {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
  width: 40px;
  flex: 0 0 auto;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: gray;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
/* 開閉アイコン(Bootstrap Icons)。ボタンの名前は script.js が aria-label で付ける */
.category-nav-toggle::before {
  content: "\f64d"; /* bi-plus-lg */
  font-family: "Bootstrap Icons";
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
}
.category-nav-item.expanded > .category-nav-row > .category-nav-toggle::before {
  content: "\f63b"; /* bi-dash-lg */
}
.category-nav-sections {
  margin: 0;
  padding: 0 0 8px;
  list-style: none;
}
.category-nav-sections li {
  border-top: 1px dotted #ccc;
}
.category-nav-sections li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 20px 8px 34px;
  text-decoration: none;
  color: #333333;
  font-size: 14px;
}
.category-nav-sections li a:hover {
  color: rgba(28, 100, 242, 1);
}
.category-nav-sections li a::after {
  /* 右端の矢印(Bootstrap Icons)。2つ目の content は「/ ""」で読み上げ対象から
     外す指定(対応していないブラウザは1つ目が使われる) */
  content: "\f285"; /* bi-chevron-right */
  content: "\f285" / "";
  font-family: "Bootstrap Icons";
  font-style: normal;
  font-weight: normal;
  color: gray;
}
.category-nav-sections li.current > a {
  color: rgba(17, 25, 40, 1);
  font-weight: 700;
}
@media (min-width: 768px) {
  .category-container {
  flex-flow: row nowrap;
    justify-content: space-between;
    margin-top: 0;
  }
  .category-content {
  width: calc(100% - 260px);
  }
  .section-tree .section {
  display: flex;
    flex-flow: column nowrap;
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px dotted #ddd;
  }
  .section-tree .section:first-of-type {
  border-top: 1px dotted #ddd;
    padding-top: 40px;
  }
  .section-tree .section-tree-title {
  width: 250px;
    padding-right: 30px;
  }
  .section-tree .section-tree-title a {
  display: inline;
    padding: 0;
    background-color: transparent;
  }
  .section-tree .article-list {
  width: 100%;
    margin-left: 30px;
  }
  .article-list-item {
  border-bottom: 1px dotted #ddd;
    font-size: 16px;
    padding: 15px 0;
    position: relative;
  }
  .article-list-item a {
  display: inline;
    padding: 0;
  }
  .category-nav {
  width: 220px;
    flex: 0 0 auto;
    left: 0;
  }
  .category-nav-item:first-child {
  border-top: none;
  }
}
@media (min-width: 1024px) {
  .category-content {
  width: calc(100% - 320px);
  }
  .section-tree .section {
  flex-flow: row nowrap;
  }
  .section-tree .article-list {
  width: calc(100% - 280px);
  }
  .category-nav {
  width: 280px;
  }
}
.section-container {
  display: flex;
  flex-flow: column-reverse nowrap;
  align-items: flex-start;
  margin-top: 30px;
}
.section-content {
  width: 100%;
  margin-bottom: 40px;
}
@media (min-width: 768px) {
  .section-container {
  flex-flow: row nowrap;
    justify-content: space-between;
    margin-top: 0;
  }
  .section-content {
  width: calc(100% - 260px);
    margin-bottom: 0;
  }
}
@media (min-width: 1024px) {
  .section-content {
  width: calc(100% - 320px);
  }
}
.category-nav-item.active > .category-nav-row > .category-nav-link {
  font-weight: 400;
}
.category-nav-sections li.current > a {
  font-weight: 400;
}
@media (min-width: 768px) {
  .section-tree .section {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
/* ==========================================================================
   左サイドバー(カテゴリ・セクション一覧)のホバー・選択中の背景色
   選択中(.active/.current、常時表示)は「選択済みの背景色」
   (selected_bg_color)、マウスホバー時は「ボタンのホバー色」
   (button_hover_color)と、テンプレート設定で別々に指定できる。
   ========================================================================== */
.category-nav-link:hover {
  background-color: rgba(254, 254, 143, 1);
  border-radius: 4px;
}
.category-nav-item.active > .category-nav-row > .category-nav-link {
  background-color: #d6eef8;
  border-radius: 4px;
}
/* セクション名の背景は、右端の「›」アイコン部分(gap 8px + アイコン幅 +
   右パディング20px ≒ 40px)を除いた範囲にとどめる。カテゴリ名側は
   開閉アイコン(.category-nav-toggle, 40px)がリンクの外側の兄弟要素になって
   いて背景の対象外なのに対し、セクション名の「›」はリンク内部の疑似要素
   なので、単純にbackground-colorを指定するとアイコンの下にも背景が
   回り込んでしまう。カテゴリ側と見た目を揃えるため、右端40分を
   透明にするグラデーションで背景を切っている。 */
.category-nav-sections li a:hover {
  background-image: linear-gradient(to right, rgba(254, 254, 143, 1) 0, rgba(254, 254, 143, 1) calc(100% - 40px), transparent calc(100% - 40px), transparent 100%);
  border-radius: 4px;
}
.category-nav-sections li.current > a {
  background-image: linear-gradient(to right, #d6eef8 0, #d6eef8 calc(100% - 40px), transparent calc(100% - 40px), transparent 100%);
  border-radius: 4px;
}
/* ==========================================================================
   左サイドバー(カテゴリ・セクション一覧)の見出し「カテゴリとセクション」を
   非表示にする(カテゴリ/セクション/記事の各ページ共通)。
   記事ページ左サイドバー下部の「このセクションの記事」見出しは対象外
   (.category-navの直下の見出しのみ)。
   ========================================================================== */
.category-nav > .sidenav-title {
  display: none;
}
@media (min-width: 768px) {
  .category-content,
  .section-content {
    box-sizing: border-box;
    padding-left: 40px;
  }
}
@media (min-width: 768px) {
  .sub-nav:has(+ .category-container),
  .sub-nav:has(+ .section-container) {
    margin-bottom: 10px;
    padding-bottom: 20px;
  }
}
/* ==========================================================================
   左サイドバー: セクション名もマウスホバー(フォーカス)時に下線を表示
   (カテゴリ名側は a:hover の下線がそのまま効いている。セクション側は
   `.category-nav-sections li a { text-decoration: none }` の詳細度が
   a:hover より高く下線が消えていたため、明示的に指定する)
   ========================================================================== */
.category-nav-link:hover,
.category-nav-link:focus,
.category-nav-sections li a:hover,
.category-nav-sections li a:focus {
  text-decoration: underline;
}
/* ==========================================================================
   サブセクション対応
   1) 左サイドバーの階層: サブセクション(.category-nav-subsection)は、セクションと
      同じ見た目・ホバー・選択中の表現で、親セクションの直下に並べる。違いは
      階層の深さに応じて左のインデントが増えることだけ(depth-2 = サブセクション、
      depth-3 = さらにその下...)。
   ========================================================================== */
.category-nav-sections li.depth-2 a { padding-left: 54px;
}
.category-nav-sections li.depth-3 a { padding-left: 74px;
}
.category-nav-sections li.depth-4 a { padding-left: 94px;
}
.category-nav-sections li.depth-5 a,
.category-nav-sections li.depth-6 a,
.category-nav-sections li.depth-7 a { padding-left: 114px;
}
/* 2) カテゴリ画面・セクション画面の一覧で、行がサブセクションのときは、
      左サイドバーの階層で使っている開閉アイコンと同じ「+」を右端に表示する
      (.category-nav-toggleの::beforeと同じ記号・色・大きさ。40px幅の枠の中央)。 */
.article-list-item-subsection {
  padding-right: 40px;
}
.article-list-item-subsection::after {
  content: "\f64d"; /* bi-plus-lg (左サイドバーの開閉アイコンと同じ) */
  content: "\f64d" / "";
  font-family: "Bootstrap Icons";
  font-style: normal;
  font-weight: normal;
  position: absolute;
  top: 50%;
  right: 0;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: gray;
  font-size: 20px;
  line-height: 1;
  pointer-events: none;
}
/* 左サイドバーの階層で、セクション名の右に出す矢印の大きさ
   (Bootstrap Iconsは文字の「›」より幅が広いため、文字のときの22pxより小さくしている) */
.category-nav-sections li a::after {
  font-size: 12px;
  line-height: 1;
}
/* カテゴリ画面・セクション画面で、サブセクション行の右端の「+」を大きくする。
   行全体がクリックでき(script.js)、マウスが載った行はポインタ表示にする */
.article-list-item-subsection {
  cursor: pointer;
}
.article-list-item-subsection::after {
  font-size: 18px;
}
/* 左サイドバーの階層: セクション名にホバーしたとき、右端の「›」には下線を引かない。
   下線(a:hover の text-decoration)は、リンク内の通常の子要素(疑似要素の「›」を含む)
   にも伝わってしまう。絶対配置の要素には伝わらない仕様なので、「›」を絶対配置にして
   いる(位置は従来どおり右端から20px・縦中央。文字との重なりを避けるため、右の
   パディングを「›」の分だけ広げている)。 */
.category-nav-sections li a {
  padding-right: 40px;
  position: relative;
}
.category-nav-sections li a::after {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

/***** 記事のパラグラフの行間(QTテンプレートと同じ 1.6) *****/
.article-body p {
  line-height: 1.6;
}