/**************************************/
/* Original Styles */
/**************************************/

@charset "UTF-8";
/***** Normalize.css *****/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

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

body {
  background-color: #FFFFFF;
  color: #333333;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/***** ページトップのお知らせ ここから *****/

.info {
  border: 3px solid #009fdb;
  border-radius: 8px;
  background: #fff; 
  padding: 10px 50px;
}

.info_heading {
  color: #415466;
  font-size: 20px;
}

.info dl {
  display: flex;
  flex-wrap: wrap;
}

.info dt {
  float: left;
  font-weight: bold;
  color: #009fdb;
  font-size: 20px;
}

.info_txt dd {
  margin-left: 40px;
}

.info_txt a {
  color: #415466;
  font-weight: bold;
  font-size: 18px;
}

/***** ページトップのお知らせ ここまで *****/

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

h1, h2, h3, h4, h5, h6 {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 400;
  margin-top: 0;
}



h1.article-title{
  font-size: 22px;
}

h1 {
  font-size: 20px;
}

h2 {
  font-size: 18px;
}

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

h4 {
  font-size: 14px;
}

a {
  color: #009fdb;
  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;
  transition: border .12s ease-in-out;
}

input:not([type="checkbox"]) {
  outline: none;
}

input:not([type="checkbox"]):focus {
  border: 1px solid rgba(0, 159, 219, 1);
}

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

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23CCC' d='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E%0A") 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(0, 159, 219, 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(0, 159, 219, 1);
}

.container {
  max-width: 1160px;
  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: 0 auto;
  padding: 0 5%;
}

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

.visibility-hidden, .recent-activity-accessibility-label, .pagination-first-text, .pagination-last-text {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

/***** Buttons *****/
.button, .section-subscribe button, .article-subscribe button, .community-follow button, .requests-table-toolbar .organization-subscribe button, .subscriptions-subscribe button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link, .edit-profile-button a {
  background-color: transparent;
  border: 1px solid rgba(0, 159, 219, 1);
  border-radius: 4px;
  color: rgba(0, 159, 219, 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, .section-subscribe button, .article-subscribe button, .community-follow button, .requests-table-toolbar .organization-subscribe button, .subscriptions-subscribe button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link, .edit-profile-button a {
    width: auto;
  }
}

.button:hover, .section-subscribe button:hover, .article-subscribe button:hover, .community-follow button:hover, .requests-table-toolbar .organization-subscribe button:hover, .subscriptions-subscribe button:hover, .pagination-next-link:hover, .pagination-prev-link:hover, .pagination-first-link:hover, .pagination-last-link:hover, .edit-profile-button a:hover, .button:active, .section-subscribe button:active, .article-subscribe button:active, .community-follow button:active, .requests-table-toolbar .organization-subscribe button:active, .subscriptions-subscribe button:active, .pagination-next-link:active, .pagination-prev-link:active, .pagination-first-link:active, .pagination-last-link:active, .edit-profile-button a:active, .button:focus, .section-subscribe button:focus, .article-subscribe button:focus, .community-follow button:focus, .requests-table-toolbar .organization-subscribe button:focus, .subscriptions-subscribe button:focus, .pagination-next-link:focus, .pagination-prev-link:focus, .pagination-first-link:focus, .pagination-last-link:focus, .edit-profile-button a:focus, .button.button-primary, .section-subscribe button.button-primary, .section-subscribe button[data-selected="true"], .article-subscribe button.button-primary, .article-subscribe button[data-selected="true"], .community-follow button.button-primary, .requests-table-toolbar .organization-subscribe button.button-primary, .requests-table-toolbar .organization-subscribe button[data-selected="true"], .subscriptions-subscribe button.button-primary, .subscriptions-subscribe button[data-selected="true"], .button-primary.pagination-next-link, .button-primary.pagination-prev-link, .button-primary.pagination-first-link, .button-primary.pagination-last-link, .edit-profile-button a.button-primary {
  background-color: rgba(0, 159, 219, 1);
  color: #FFFFFF;
  text-decoration: none;
}

.button.button-primary:hover, .section-subscribe button.button-primary:hover, .section-subscribe button[data-selected="true"]:hover, .article-subscribe button.button-primary:hover, .article-subscribe button[data-selected="true"]:hover, .community-follow button.button-primary:hover, .requests-table-toolbar .organization-subscribe button.button-primary:hover, .requests-table-toolbar .organization-subscribe button[data-selected="true"]:hover, .subscriptions-subscribe button.button-primary:hover, .subscriptions-subscribe button[data-selected="true"]:hover, .button-primary.pagination-next-link:hover, .button-primary.pagination-prev-link:hover, .button-primary.pagination-first-link:hover, .button-primary.pagination-last-link:hover, .edit-profile-button a.button-primary:hover, .button.button-primary:focus, .section-subscribe button.button-primary:focus, .section-subscribe button[data-selected="true"]:focus, .article-subscribe button.button-primary:focus, .article-subscribe button[data-selected="true"]:focus, .community-follow button.button-primary:focus, .requests-table-toolbar .organization-subscribe button.button-primary:focus, .requests-table-toolbar .organization-subscribe button[data-selected="true"]:focus, .subscriptions-subscribe button.button-primary:focus, .subscriptions-subscribe button[data-selected="true"]:focus, .button-primary.pagination-next-link:focus, .button-primary.pagination-prev-link:focus, .button-primary.pagination-first-link:focus, .button-primary.pagination-last-link:focus, .edit-profile-button a.button-primary:focus, .button.button-primary:active, .section-subscribe button.button-primary:active, .section-subscribe button[data-selected="true"]:active, .article-subscribe button.button-primary:active, .article-subscribe button[data-selected="true"]:active, .community-follow button.button-primary:active, .requests-table-toolbar .organization-subscribe button.button-primary:active, .requests-table-toolbar .organization-subscribe button[data-selected="true"]:active, .subscriptions-subscribe button.button-primary:active, .subscriptions-subscribe button[data-selected="true"]:active, .button-primary.pagination-next-link:active, .button-primary.pagination-prev-link:active, .button-primary.pagination-first-link:active, .button-primary.pagination-last-link:active, .edit-profile-button a.button-primary:active {
  background-color: #005575;
  border-color: #005575;
}

.button[data-disabled], .section-subscribe button[data-disabled], .article-subscribe button[data-disabled], .community-follow button[data-disabled], .requests-table-toolbar .organization-subscribe button[data-disabled], .subscriptions-subscribe button[data-disabled], .pagination-next-link[data-disabled], .pagination-prev-link[data-disabled], .pagination-first-link[data-disabled], .pagination-last-link[data-disabled], .edit-profile-button a[data-disabled] {
  cursor: default;
}

.button-large, input[type="submit"] {
  cursor: pointer;
  background-color: rgba(0, 159, 219, 1);
  border: 0;
  border-radius: 4px;
  color: #FFFFFF;
  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: #005575;
}

.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;
  border-collapse: collapse;
  border-spacing: 0;
  border:"1";
  border: 1px solid black;
  border-color: #000000;
}

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

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

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

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

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

.table td {
  display: block;
  border: 1px solid black;
  border-color: #000000;
}

@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;
}

.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(0, 159, 219, 1);
}

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

.form-field input[type="text"]:focus {
  border: 1px solid rgba(0, 159, 219, 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(0, 159, 219, 1);
  text-decoration: none;
}

.form-field .hc-multiselect-toggle:focus {
  outline: none;
  border: 1px solid rgba(0, 159, 219, 1);
  text-decoration: none;
}

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

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

.form-field .optional {
  color: #666;
  margin-left: 4px;
}

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

.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: #005575;
}

/***** 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: 37px;
}

.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: #009fdb;
  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: #009fdb;
  text-decoration: underline;
}

.nav-wrapper a.login {
  display: inline-block;
}

.nav-wrapper .menu-button {
  background: none;
  border: 0;
  color: #009fdb;
  display: inline-block;
  margin-right: 10px;
  padding: 0;
  width: auto;
}

@media (min-width: 768px) {
  .nav-wrapper .menu-button {
    display: none;
  }
}

.nav-wrapper .menu-button .icon-menu {
  vertical-align: middle;
  width: 13px;
  height: 13px;
}

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

.nav-wrapper .menu-button:hover, .nav-wrapper .menu-button:focus, .nav-wrapper .menu-button:active {
  background-color: transparent;
  color: #009fdb;
}

.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;
}

.skip-navigation:focus, .skip-navigation:active {
  left: auto;
  overflow: auto;
  text-align: center;
  text-decoration: none;
  top: auto;
  z-index: 999;
}

/***** 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 > button {
  border: 0;
  color: #009fdb;
  min-width: 0;
  padding: 0;
  white-space: nowrap;
}

.user-info > button:hover, .user-info > button:focus {
  color: #009fdb;
  background-color: transparent;
}

.user-info > button::after {
  color: #009fdb;
  padding-right: 15px;
}

[dir="rtl"] .user-info > 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 {
  color: rgba(0, 159, 219, 1);
  border: 2px solid #fff;
  border-radius: 50%;
  bottom: -4px;
  background-color: #FFFFFF;
  font-size: 17px;
  height: 17px;
  line-height: 17px;
  position: absolute;
  right: -2px;
  text-align: center;
  width: 17px;
}

/***** Footer *****/
.footer {
  border-top: 1px solid #ddd;
  margin-top: 60px;
  padding: 30px 0;
}

.footer a {
  color: #666;
}

.footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
  display: flex;
  justify-content: space-between;
}

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

.footer-language-selector {
  color: #666;
  display: inline-block;
  font-weight: 300;
}

/***** 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 li + li::before {
  content: ">";
  margin: 0 4px;
}

.breadcrumbs li a:visited {
  color: #009fdb;
}

/***** Search field *****/
.search {
  position: relative;
}

.search input[type="search"] {
  border: 1px solid #ddd;
  border-radius: 30px;
  box-sizing: border-box;
  color: #666;
  height: 40px;
  padding-left: 40px;
  padding-right: 20px;
  -webkit-appearance: none;
  width: 100%;
}

[dir="rtl"] .search input[type="search"] {
  padding-right: 40px;
  padding-left: 20px;
}

.search input[type="search"]:focus {
  border: 1px solid rgba(0, 159, 219, 1);
  color: #555;
}

.search-full input[type="search"] {
  border: 1px solid #fff;
}

.search-icon {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  left: 15px;
  z-index: 1;
  width: 18px;
  height: 18px;
  color: #777;
}

[dir="rtl"] .search-icon {
  right: 15px;
  left: auto;
}

.search-container {
  position: relative;
}

/***** Hero component *****/
.hero {
  background-image: url(/hc/theming_assets/01KRWFEJ4NYS2N4CEJTN5SWGV8);
  background-position: center;
  background-size: cover;
  height: 300px;
  padding: 0 20px;
  text-align: center;
  width: 100%;
}

.hero-inner {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  max-width: 610px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 10px 0;
}

@media (min-width: 768px) {
  .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;
}

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

.page-header .icon-lock {
  height: 20px;
  width: 20px;
  position: relative;
  left: -5px;
  vertical-align: baseline;
}

.sub-nav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 30px;
  min-height: 50px;
  padding-bottom: 15px;
}

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

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

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

/***** Blocks *****/
/* Used in Homepage#categories and Community#topics */
.blocks-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style: none;
  padding: 0;
}

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

.blocks-item {
  border: 1px solid rgba(0, 159, 219, 1);
  border-radius: 4px;
  box-sizing: border-box;
  color: rgba(0, 159, 219, 1);
  display: flex;
  flex: 1 0 340px;
  margin: 0 0 30px;
  max-width: 100%;
  text-align: center;
}

@media (min-width: 768px) {
  .blocks-item {
    margin: 0 15px 30px;
  }
}

.blocks-item:hover, .blocks-item:focus, .blocks-item:active {
  background-color: rgba(0, 159, 219, 1);
}

.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  color: #FFFFFF;
  text-decoration: none;
}

.blocks-item-internal {
  background-color: transparent;
  border: 1px solid #ddd;
}

.blocks-item-internal .icon-lock {
  height: 15px;
  width: 15px;
  bottom: 5px;
  position: relative;
}

.blocks-item-internal a {
  color: #333333;
}

.blocks-item-link {
  color: rgba(0, 159, 219, 1);
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  border-radius: inherit;
}

.blocks-item-link:hover, .blocks-item-link:active {
  text-decoration: none;
}

.blocks-item-link:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0, 159, 219, 1);
  text-decoration: none;
}

.blocks-item-title {
  margin-bottom: 0;
  font-size: 16px;
}

.blocks-item-description {
  font-weight: 300;
  margin: 0;
}

.blocks-item-description:not(:empty) {
  margin-top: 10px;
}

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

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

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

/***** Promoted articles *****/
.promoted-articles {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

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

.promoted-articles-item {
  flex: 1 0 auto;
}

@media (min-width: 1024px) {
  .promoted-articles-item {
    align-self: flex-end;
    flex: 0 0 auto;
    padding-right: 30px;
    width: 33%;
    /* Three columns on desktop */
  }
  [dir="rtl"] .promoted-articles-item {
    padding: 0 0 0 30px;
  }
}

.promoted-articles-item:nth-child(3n) {
  padding-right: 0;
}

.promoted-articles-item a {
  display: block;
  border-bottom: 1px solid #ddd;
  padding: 15px 0;
  color: #333333;
}

.promoted-articles-item .icon-lock {
  vertical-align: baseline;
}

.promoted-articles-item:last-child a {
  border: 0;
}

@media (min-width: 1024px) {
  .promoted-articles-item:last-child a {
    border-bottom: 1px solid #ddd;
  }
}

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

.community-image {
  min-height: 300px;
  background-image: url(/hc/theming_assets/01KRWFEK2TH7E66T6SNWMA2RE7);
  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-controls {
  padding-top: 15px;
}

.recent-activity-comment-icon svg {
  vertical-align: middle;
  color: rgba(0, 159, 219, 1);
  width: 16px;
  height: 16px;
}

.recent-activity-comment-icon:after {
  content: attr(data-comment-count);
  margin-left: 3px;
}

[dir="rtl"] .recent-activity-comment-icon:after {
  margin-left: 0;
  margin-right: 3px;
}

/***** Category pages *****/
.category-container {
  display: flex;
  justify-content: flex-end;
}

.category-content {
  flex: 1;
}

@media (min-width: 1024px) {
  .category-content {
    flex: 0 0 80%;
  }
}

.section-tree {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}

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

.section-tree .section {
  flex: initial;
}

@media (min-width: 768px) {
  .section-tree .section {
    flex: 0 0 45%;
    /* Two columns for tablet and desktop. Leaving 5% separation between columns */
  }
}

.section-tree-title {
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 600;
}

.section-tree-title a {
  color: #333333;
}

.section-tree .see-all-articles {
  display: block;
  padding: 15px 0;
}

.article-list-item {
  font-size: 16px;
  padding: 15px 0;
}

.article-list-item a {
  color: #333333;
}

.icon-star {
  color: rgba(0, 159, 219, 1);
  font-size: 18px;
}

/***** Section pages *****/
.section-container {
  display: flex;
  justify-content: flex-end;
}

.section-content {
  flex: 1;
}

@media (min-width: 1024px) {
  .section-content {
    flex: 0 0 80%;
  }
}

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

.section-list--collapsed .section-list-item:nth-child(1n + 6) {
  display: none;
}

.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;
}

/***** Article *****/
.article {
  /*
  * The article grid is defined this way to optimize readability:
  * Sidebar | Content | Free space
  * 17%     | 66%     | 17%
  */
  flex: 1 0 auto;
}

@media (min-width: 1024px) {
  .article {
    flex: 1 0 66%;
    max-width: 66%;
    min-width: 640px;
    padding: 0 30px;
  }
}

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

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

.article-header {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 40px;
  margin-top: 20px;
}

@media (min-width: 768px) {
  .article-header {
    flex-direction: row;
    margin-top: 0;
  }
}

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

.article-author {
  margin-bottom: 10px;
}

@media (min-width: 768px) {
  .article-title {
    flex-basis: 100%;
    /* Take entire row */
  }
}

.article-title .icon-lock {
  position: relative;
  left: -5px;
  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 [role="button"] {
    width: auto;
  }
}

.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: #005575;
}

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

.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;
}

.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 {
  vertical-align: middle;
  color: rgba(0, 159, 219, 1);
  width: 18px;
  height: 18px;
}

.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 > * {
  flex: 1 0 50%;
  min-width: 50%;
  overflow-wrap: break-word;
  margin-right: 0;
}

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

@media (min-width: 768px) {
  .article-relatives > * {
    padding-right: 20px;
  }
}

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

.article-vote {
  margin: 10px 5px;
  min-width: 90px;
  width: auto;
}

.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 {
  transform: rotate(0.5turn);
}

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

.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(0, 159, 219, 1);
  color: #FFFFFF;
  text-decoration: none;
}

.recent-articles li,
.related-articles li {
  margin-bottom: 15px;
}

/***** 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 .attachment-icon {
  color: #333333;
  left: 0;
  position: absolute;
  top: 5px;
}

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

[dir="rtl"] .attachments .attachment-item .attachment-icon {
  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 li {
  height: 25px;
  width: 25px;
}

.share a {
  color: #666;
}

.share a:hover {
  text-decoration: none;
  color: rgba(0, 159, 219, 1);
}

.share a svg {
  height: 18px;
  width: 18px;
  display: block;
}

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

.comment-heading, .recent-articles-title,
.related-articles-title {
  margin-bottom: 5px;
  margin-top: 0;
  font-size: 18px;
  font-weight: 600;
}

.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(0, 159, 219, 1);
}

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

.comment-sorter .dropdown-toggle {
  color: #666;
  font-weight: 300;
  font-size: 13px;
}

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

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

.comment-wrapper.comment-official {
  border: 1px solid rgba(0, 159, 219, 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(0, 159, 219, 1);
}

.comment-body {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  overflow-x: auto;
}

.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: #005575;
}

.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: flex;
  flex-direction: column;
  text-align: center;
}

.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 svg {
  transform: scale(1, -1);
}

.vote-up:hover,
.vote-down:hover {
  color: rgba(0, 159, 219, 1);
}

.vote-up, .vote-down {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  color: #666;
  cursor: pointer;
  min-height: 35px;
  min-width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vote-voted {
  color: rgba(0, 159, 219, 1);
}

.vote-voted:hover {
  color: #005575;
}

/***** 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 button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  cursor: pointer;
  min-height: 35px;
  min-width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

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

.community-footer-title {
  font-size: 16px;
  margin-bottom: 20px;
}

.community-featured-posts .title {
  font-size: 18px;
  font-weight: 600;
}

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

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

.community-header .title {
  margin-bottom: 0;
  font-size: 16px;
}

.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 button {
  line-height: 30px;
  padding: 0 10px 0 15px;
  position: relative;
  width: 100%;
}

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

.community-follow button:hover {
  background-color: rgba(0, 159, 219, 1);
}

.community-follow button:hover::after, .community-follow button:focus::after {
  border-color: #FFFFFF;
  color: #FFFFFF;
}

.community-follow button[data-selected="true"] {
  background-color: rgba(0, 159, 219, 1);
  color: #FFFFFF;
}

.community-follow button[data-selected="true"]::after {
  border-left: 1px solid #FFFFFF;
  color: #FFFFFF;
}

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

.community-follow button::after {
  border-left: 1px solid rgba(0, 159, 219, 1);
  content: attr(data-follower-count);
  color: rgba(0, 159, 219, 1);
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  margin-left: 15px;
  padding-left: 10px;
  position: absolute;
  right: 10px;
}

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

[dir="rtl"] .community-follow button::after {
  border-left: 0;
  border-right: 1px solid rgba(0, 159, 219, 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: #009fdb;
  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: #005575;
}

.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: #038153;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  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(0, 159, 219, 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-not-planned, .status-label-closed {
  background-color: #e9ebed;
  color: #666;
}

.status-label-pending {
  background-color: #1f73b7;
  text-align: center;
}

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

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

.status-label-new {
  background-color: #ffb648;
  color: #703b15;
}

.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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, 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: #005575;
}

.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(0, 159, 219, 1);
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 5px;
  vertical-align: middle;
}

.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-title {
  font-size: 18px;
  font-weight: 600;
}

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

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

/* Navigation element that collapses on mobile */
.collapsible-nav {
  flex-direction: column;
  font-size: 14px;
  position: relative;
}

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

.collapsible-nav-border {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
}

@media (min-width: 768px) {
  .collapsible-nav-border {
    border-top: 0;
  }
}

.collapsible-nav-toggle {
  top: calc(45px / 2);
  transform: translateY(-50%);
  position: absolute;
  right: 0;
  padding: 0;
  border: 0;
  background: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

@media (min-width: 768px) {
  .collapsible-nav-toggle {
    display: none;
  }
}

[dir="rtl"] .collapsible-nav-toggle {
  left: 0;
  right: auto;
}

.collapsible-nav-toggle-icon {
  display: none;
}

.collapsible-nav-toggle[aria-expanded="false"] .chevron-icon {
  display: inline-block;
}

.collapsible-nav-toggle[aria-expanded="true"] .x-icon {
  display: inline-block;
}

.collapsible-nav-toggle:focus {
  outline: none;
  border: 1px solid rgba(0, 159, 219, 1);
}

.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:not([aria-current="page"]) {
    padding: 15px 0 11px 0;
    text-decoration: none;
  }
}

.collapsible-nav-list li:not([aria-selected="true"]),
.collapsible-nav-list li:not(.current) {
  display: none;
}

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

@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected="true"] {
    padding: 15px 0 11px 0;
  }
}

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

@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected="true"],
  .collapsible-nav-list li.current {
    border-bottom: 4px solid rgba(0, 159, 219, 1);
    order: 1;
  }
}

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

.collapsible-nav[aria-expanded="true"] li:not([aria-selected="true"]),
.collapsible-nav[aria-expanded="true"] li:not(.current) {
  display: block;
}

/* 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: calc(45px / 2);
  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(0, 159, 219, 1);
}

.collapsible-sidebar-body {
  display: none;
}

@media (min-width: 1024px) {
  .collapsible-sidebar-body {
    display: block;
  }
}

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

.collapsible-sidebar[aria-expanded="true"] .collapsible-sidebar-body {
  display: block;
}

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

.my-activities-sub-nav {
  margin-bottom: 30px;
}

.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%;
}

.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;
  }
}

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

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

.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 */
@media (min-width: 768px) {
  .subscriptions-subscribe button {
    width: auto;
  }
}

.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;
  color: #666;
  text-align: inherit;
  padding: 8px 25px;
  width: 100%;
}

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

.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(0, 159, 219, 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(0, 159, 219, 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 h2 {
  font-size: 15px;
  font-weight: 600;
  position: relative;
}

@media (min-width: 1024px) {
  .request-sidebar h2 {
    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-next, .pagination-prev, .pagination-first, .pagination-last {
  display: inline-block;
}

.pagination-first-link, .pagination-last-link {
  padding: 0 10px;
}

.pagination-next-link {
  padding-right: 10px;
}

.pagination-next-text {
  margin-right: 10px;
}

[dir="rtl"] .pagination-next-link {
  padding-left: 10px;
}

[dir="rtl"] .pagination-next-text {
  margin-left: 10px;
}

.pagination-prev-link {
  padding-left: 10px;
}

.pagination-prev-text {
  margin-left: 10px;
}

[dir="rtl"] .pagination-prev-link {
  padding-right: 10px;
}

[dir="rtl"] .pagination-prev-text {
  margin-right: 10px;
}

/***** 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;
}

/* 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 {
  bottom: 0;
  right: 0;
}

.profile-header .basic-info {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: 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;
  }
}

.edit-profile-button a {
  background-color: rgba(0, 159, 219, 1);
  border: 0;
  color: #FFFFFF;
  line-height: normal;
  padding: 8px 20px;
  outline-color: rgba(0, 159, 219, 1);
}

.profile-header .description {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: 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(0, 159, 219, 1);
  border-radius: 4px;
  color: rgba(0, 159, 219, 1);
  padding: 5px 20px;
  font-size: 12px;
  text-align: center;
}

.profile-private-badge .profile-private-icon {
  margin-left: 5px;
  line-height: 15px;
}

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

.profile-nav {
  background-color: #f2f2f2;
  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;
  word-wrap: 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-icon {
  left: 0;
  position: absolute;
  color: #ccc;
  line-height: 25px;
}

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

.profile-contribution-icon svg {
  vertical-align: middle;
}

.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;
}

.private-activity-icon {
  margin-right: 10px;
}

[dir="rtl"] .private-activity-icon {
  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;
  word-wrap: 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-icon {
  position: absolute;
  left: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-color: #FFFFFF;
  background-position: 50% 50%;
  text-align: center;
  color: #ccc;
}

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

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

.profile-activity-icon svg {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 1em;
  height: 1em;
  margin: auto;
}

/***** 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%;
  }
}

.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 .sidenav-item:hover, .search-results-sidebar .sidenav-item.current {
  background-color: #e9ebed;
  color: inherit;
  text-decoration: none;
}

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

.search-results-sidebar .collapsible-sidebar {
  margin-bottom: 30px;
}

.search-results-sidebar .collapsible-sidebar[aria-expanded="false"] .multibrand-filter-list {
  display: none;
}

@media (min-width: 1024px) {
  .search-results-sidebar .collapsible-sidebar[aria-expanded="false"] .multibrand-filter-list {
    display: block;
  }
}

.search-results-sidebar .multibrand-filter-list--collapsed li:nth-child(1n + 6) {
  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: #009fdb;
}

.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 {
  content: ' \2304';
  font-weight: bold;
}

.search-results-subheading {
  font-size: 18px;
  font-weight: 600;
}

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

.search-results-list > li {
  padding: 20px 0;
}

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

.search-results-list > li h2 {
  margin-bottom: 0;
}

.search-results .meta-group {
  display: block;
  align-items: center;
  clear: both;
  color: #666;
}

@media (min-width: 1024px) {
  .search-results .meta-group {
    display: flex;
  }
}

.search-results .meta-group > li {
  display: block;
}

@media (min-width: 1024px) {
  .search-results .meta-group > li {
    display: inline;
  }
}

@media (min-width: 1024px) {
  .search-results .meta-group li:first-child {
    flex: 1;
  }
}

.search-results .meta-group .meta-data {
  color: inherit;
}

[dir="ltr"] .search-results .meta-group .meta-data:not(:last-child) {
  margin-right: 20px;
}

[dir="rtl"] .search-results .meta-group .meta-data:not(:last-child) {
  margin-left: 20px;
}

.search-results .meta-group .meta-data::after {
  content: none;
}

.search-results-description {
  margin-top: 10px;
  word-break: break-word;
}

.search-result-title {
  font-size: 16px;
  display: inline-block;
}

[dir="ltr"] .search-result-icons {
  float: right;
}

[dir="rtl"] .search-result-icons {
  float: left;
}

.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-icon, .search-result-meta-count-icon {
  color: rgba(0, 159, 219, 1);
  vertical-align: middle;
  width: 13px;
  height: 13px;
}

[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 .meta-group {
  align-items: center;
}

.search-result-breadcrumbs {
  margin: 0;
}

@media (min-width: 1024px) {
  .search-result-breadcrumbs {
    display: table-row;
  }
}

@media (min-width: 1024px) {
  .search-result-breadcrumbs li {
    display: table-cell;
  }
}

.search-result-breadcrumbs li, .search-result-breadcrumbs li a, .search-result-breadcrumbs li a:visited {
  color: inherit;
}

/* By default use bold instead of italic to highlight */
.search-results-description em {
  font-style: normal;
  font-weight: bold;
}

/* Add a yellow background for Chinese */
html[lang|="zh"] .search-results-description em {
  font-style: normal;
  background: yellow;
}

/***** Notifications *****/
.notification {
  border: 1px solid;
  display: table;
  font-family: sans-serif;
  font-size: 12px;
  padding: 13px 15px;
  transition: height .2s;
  width: 100%;
  color: #555;
}

.notification a {
  color: #158ec2;
}

.notification-inner {
  margin: 0 auto;
  padding: 0 20px;
  max-width: 980px;
}

.notification-icon, .notification-text, .notification-dismiss {
  display: table-cell;
  vertical-align: middle;
}

.notification-text {
  padding: 0 15px;
  width: 100%;
}

.notification + .notification {
  margin-bottom: -1px;
  position: relative;
  top: -1px;
}

/* Error */
.notification-error {
  background: #ffeded;
  border-color: #f7cbcb;
}

.notification-error .notification-icon::before, .notification-error .notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23555555'%3E%3Ccircle cx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccircle cx='5.5' cy='9' r='1' fill='%23555555'/%3E%3C/svg%3E");
}

/* Notice */
.notification-notice {
  background: #dbf3ff;
  border-color: #b5e0f5;
}

.notification-notice .notification-icon::before, .notification-notice .notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23555555'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.5 6l2 2L9 4.5'/%3E%3Ccircle cx='6' cy='6' r='5.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* Alert / Lock */
.notification-alert {
  color: #ad5e18;
  background: #fff8ed;
  border-color: #fcdba9;
}

.notification-alert .notification-icon::before, .notification-alert .notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ad5e18' stroke-linecap='round' d='M5.06 1.27l-4.5 8.5c-.18.33.06.73.44.73h9c.38 0 .62-.4.44-.73l-4.5-8.5a.494.494 0 00-.88 0zM5.5 4v2'/%3E%3Ccircle cx='5.5' cy='8' r='.8' fill='%23ad5e18'/%3E%3C/svg%3E");
}

.notification-icon::before, .notification-inline.notification-error::before {
  background-size: cover;
  content: "";
  display: inline-block;
  height: 14px;
  width: 14px;
  vertical-align: middle;
}

/* Dismiss button */
.notification-dismiss, a.notification-dismiss {
  color: #555;
  cursor: pointer;
  opacity: .6;
  transition: opacity 100ms ease;
  text-decoration: none !important;
}

.notification-dismiss:hover {
  opacity: 1;
}

/* Inline notifications */
.notification-inline {
  border-radius: 4px;
  line-height: 14px;
  margin-top: 5px;
  padding: 5px;
  position: relative;
  text-align: left;
  vertical-align: middle;
}

[dir="rtl"] .notification-inline {
  text-align: right;
}

.notification-inline[aria-hidden="true"] {
  display: none;
}

.notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23e35b66'%3E%3Ccircle cx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccircle cx='5.5' cy='9' r='1' fill='%23e35b66'/%3E%3C/svg%3E");
  margin: -2px 5px 0 0;
}

[dir="rtl"] .notification-inline.notification-error::before {
  margin: 0 0 0 5px;
}

.notification-inline.notification-error {
  background-color: #fff0f1;
  border: 1px solid #e35b66;
  color: #cc3340;
}

.notification-inline.notification-large {
  padding: 13px 15px;
  margin-bottom: 25px;
}

.notification-left-aligned {
  text-align: left;
  padding-left: 0;
}

html[dir="rtl"] .notification-left-aligned {
  text-align: right;
  padding-left: auto;
  padding-right: 0;
}

.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-menu {
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 3px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  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[aria-expanded="true"] {
  display: block;
}

.dropdown-menu [role="separator"] {
  border-bottom: 1px solid #d8d8d8;
  color: #969696;
  display: block;
  font-weight: normal;
  font-size: 11px;
  padding: 5px 0;
  margin: 5px 20px 10px 20px;
}

.dropdown-menu [role="menuitem"] {
  color: #333;
  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"] {
  padding: 7px 20px 7px 40px;
}

.dropdown-menu [role="menuitem"]:hover, .dropdown-menu [role="menuitem"]:focus {
  background: #f3f3f3;
  text-decoration: none;
  color: #333;
}

.dropdown-menu [role="menuitem"][aria-selected="true"] {
  cursor: default;
}

.dropdown-menu [role="menuitem"][aria-selected="true"]::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M1 7l3 3 7-7'%3E%3C/path%3E%3C/svg%3E");
  display: inline-block;
  height: 12px;
  margin-left: 10px;
  width: 12px;
}

[dir="rtl"] .dropdown-menu [role="menuitem"][aria-selected="true"]::after {
  margin-left: 0;
  margin-right: 10px;
  float: left;
}

.dropdown-menu [role="menuitem"][hidden], .dropdown-menu [role="menuitem"][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;
}


/**************************************/
/* Theme Styles */
/**************************************/

/* Overwrite */
/*------------------------------------*/
/* Hide [Powered by Zendesk] */
.powered-by-zendesk{
  display: none;
}

input[type="search"] {
  font-size: 16px;
}

.article-relatives {
  border-top: 0;
  padding: 0;
}
.article-relatives > *:first-child {
  border-top: 1px solid #ddd;
  padding-top: 20px;
}
.article-relatives > *:last-child {
  padding-bottom: 20px;
}

@media (min-width: 768px){
  .article-relatives {
    border-top: 0;
    padding: 0;
  }
  .article-relatives > *,
  .article-relatives > *:first-child,
  .article-relatives > *:last-child {
    border-top: 1px solid #ddd;
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

@media (min-width: 1024px) {
  .category-content,
  .section-content,
  .search-results-column {
    flex: 0 0 100%;
  }  

  .article-sidebar {
    max-width: 17%;
  }
  .article {
    flex: 1 0 auto;
    max-width: 100%;
    width: 66%;
  }  
}

.icon-pickup::before{
  content: "";
  line-height: 1em;
  vertical-align: middle;
  -webkit-font-smoothing: antialiased;
  width: 1em;
  height: 1em;
  display: inline-block;
  margin-top: -1px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(/hc/theming_assets/01KRWFEA9JCMNBH7JQ3JET86HF);
}

.container-divider:empty{
  display: none;
}
.container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}


/* Common */
/*------------------------------------*/
.inner{
  width: 100%;
  max-width: 100%;
  padding: 0 10px;
  margin: 0 auto;
  height: auto;
}
@media (min-width: 768px){
  .inner{
    max-width: 1160px;
    padding: 0 20px;
  }
}

/* Header */
/*------------------------------------*/
.header {
  max-width: 100%;
  padding: 0;
  display: block;
}
.header .inner{
  position: relative;
  align-items: center;
  display: flex;
  height: 100px;
  justify-content: space-between;
}
.header .logo img{
  max-height: none;
}
.header .logo a{
  display: block;
}

/* SP Menu */
.header .header-menu{
  position: absolute;
  left: 20px;
  top: 50%;
  width: 30px;
  height: 25px;
  transform: translateY(-50%);
}
.header .header-menu a{
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  text-indent: -999px;
}
.header .header-menu:before,
.header .header-menu a:before,
.header .header-menu a:after{
  content: "";
  position: absolute;
  display: block;
  height: 3px;
  width: 100%;
  left: 0;
  top: 50%;
  background-color: #cccccc;
  transition: all 0.2s linear;
}
.header .header-menu:before{
  opacity: 1;
}
.header .header-menu a:before{
  transform: translateY(-10px);
}
.header .header-menu a:after{
  transform: translateY(10px);
}
.header.isMenuOpen .header-menu:before{
  opacity: 0;
}
.header.isMenuOpen .header-menu a:before{
  transform: rotate(45deg) translateY(0);
}
.header.isMenuOpen .header-menu a:after{
  transform: rotate(-45deg) translateY(0);
}
.header.isMenuOpen .links{
  max-height: 100vh;
  opacity: 1;
}
@media (min-width: 768px){
  .header .header-menu{
    display: none;
  }
  .header .navs .links{
    position: static;
    display: flex;
    justify-content: flex-end;
    border: 0;
    background-color: transparent;
    box-shadow: none;
    padding: 0;
    width: auto;
    
    max-height: none;
    opacity: 1;
  }  
}

/* Footer */
/*------------------------------------*/
.footer.footer{
}

/* Article */
/*------------------------------------*/
.article-body table{
  border-collapse: collapse;
}
.article-body th,
.article-body td{
  border: 1px solid #dddddd;
  padding: 5px;
}

/* Search */
/*------------------------------------*/
.popular-list{
  display: flex;
}
.popular-list .popular-item{
  margin-right: 10px;
}

/* Form */
/*------------------------------------*/
.information-container{
  margin-bottom: 15px;
}
.headernote-container{
  margin-bottom: 15px;
}
.agreement-container{
  margin-bottom: 15px;
}
.footernote-container{
  margin-top: 15px;
}
.agreementSection {
  margin-top: 30px;
}

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

/* Custom Layout */
/* Base */
.formSection {
  border-radius: 10px;
  border: 1px solid #dddddd;
  padding: 10px;
  margin-top: 20px;
}

/* Title */
.formSection .title{
  margin: 0 0 0 0;
  position: relative;
}
.formSection .title .frame{
  border-radius: 5px;
  padding: 5px 10px;    
  color: #FFF;
  margin-bottom: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
  background: rgba(0, 159, 219, 1);
}
.formSection .title .trigger{
  display: block;
}

.formSection .title p {
  margin: 0;
}
.formSection .title .icon{
  width: 20px;
  height: 20px;
  margin-right: 10px;
  position: absolute;
  left: 10px;
  top: 10px;
  transform: translateY(0);
  text-indent: -999px;
  border-radius: 3px;
  background-color: $brand_color2;

}
.formSection .title .icon:before,
.formSection .title .icon:after{
  width: 12px;
  height: 2px;
  background-color: #ffffff;
  border-radius: 1px;
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
  transition: transform 0.2s;
}
.formSection .title .icon:after{
  transform: translateY(-50%) translateX(-50%) rotate(90deg)
}
.formSection .title .label{
  font-size: 18px;
  font-weight: 600;
}
.formSection .title .note{
  margin-top: 5px;
}
@media (min-width: 768px) {
  .formSection .title .frame{
    padding: 10px;
    flex-direction: row;
    align-items: center;
  }
  .formSection .title .icon{
    width: 30px;
    height: 30px;
    margin-right: 10px;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
  }      
  .formSection .title .icon:before,
  .formSection .title .icon:after{
    width: 18px;
    height: 4px;
  }
  .formSection .title .note{
    margin-top: 0;
  }
}

/* Information */
.formSection .info_head,
.formSection .info_foot{
  padding: 0;
  margin: 0;
  font-size: 13px;
}
.formSection .info_head p,
.formSection .info_foot p{
  margin: 1em 0 0 0;
}
.formSection .info_head p:first-child,
.formSection .info_foot p:first-child{
  margin-top: 0;
}
.formSection .info_head .warning,
.formSection .info_foot .warning{
  color: #ff0000;
}
.formSection .info_head{
  margin-top: 20px;
}
.formSection .info_foot{
  margin-top: 20px;
}

/* Field */
.formSection .fields{
}

.formSection .fields .form-field{
  margin: 0;
}
.formSection .fields .form-field label {
  font-size: 15px;
}
.formSection .fields .form-field input, textarea {
  font-size: 16px;
  padding: 8px 10px;
}
.formSection .fields .form-field .note {
  font-size: 12px;
}
.formSection .fields .form-field [hidden]{
  display: none;
}
.formSection .fields .form-field.parent {
  padding: 20px 0;
  border-bottom: 1px solid #ccc;
}
.formSection .fields .form-field.parent:last-child{
  border-bottom: 0;
}

/* .formSection .fields .form-field.parent.required > .input-block > label::after {
  content: "必須";
  color: #ffffff;
  margin-left: 10px;
  background-color: rgba(0, 159, 219, 1);
  padding: 1px 5px;
  font-size: 11px;
  display: inline-block;
  line-height: 1.5;
} */
.formSection .fields .form-field.parent > .input-block .confirm_title{
  margin-top: 10px;
  color: #979797;
  font-size: 12px;            
}
.formSection .fields .form-field.parent > .input-block{
  display: flex;
  align-items: center;
  flex-direction: column;
  align-items: flex-start;
}
.formSection .fields .form-field.parent > .input-block > label {
  margin-bottom: 5px;
  min-width: 0;
  font-weight: 500;
}
.formSection .fields .form-field.parent > .input-block .inputs{
  display: flex;
  flex-direction: column;
}
.formSection .fields .form-field.parent > .input-block .mails{
  width: 100%;
}
.formSection .fields .form-field.parent > .input-block .upload-wrap{
  width: 100%;
}
.formSection .fields .form-field.parent > .info-block {
  padding-left: 0;
}
.formSection .fields .form-field.parent > .info-block p {
  margin: 5px 0 0 0;
}
.formSection .fields .form-field.child {
  margin-left: 0;
}
.formSection .fields .form-field.child:first-child {
  margin-left: 0;
}
.formSection .fields .form-field.child.required > .input-block > label::after {
  display: none;
}
.formSection .fields .form-field.child .input-block{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.formSection .fields .form-field.child .input-block > *{
  margin: 0;
}
.formSection .fields .form-field.child .input-block label{
  min-width: 0;
  margin: 0 10px 0 0;
}  
.formSection .fields .form-field.child .info-block {
  padding-left: 0;
}
.formSection .fields .form-field.child .info-block p {
  margin: 5px 0 0 0;
}


@media (min-width: 768px) {
  .formSection .fields .form-field{
  }
  
  .formSection .fields .form-field.parent {
    padding: 20px 0;
  }
  .formSection .fields .form-field.parent  > .input-block{
    flex-direction: row;
    align-items: flex-start;
  }
  .formSection .fields .form-field.parent  > .input-block > label {
    margin-bottom: 0;
    min-width: 200px;
    max-width: 200px;
    font-weight: 600;
  }
  .formSection .fields .form-field.parent > .input-block .inputs{
    flex-direction: row;
  }
  .formSection .fields .form-field.parent > .info-block {
    padding-left: 200px;
  }

  .formSection .fields .form-field.child {
    margin-left: 10px;
  }
  .formSection .fields .form-field.child .input-block{
  }
  /* .formSection .fields .form-field.child .info-block {
    padding-left: 200px;
  } */
}

/* Toggle */
.formSection.toggle {
}
.formSection.toggle .title .trigger:hover{
  opacity: 0.7;
  text-decoration: none;
}
.formSection.toggle .title .label{
  padding-left: 30px;
}
.formSection.toggle .body{
  overflow-y: hidden;
  max-height: 0;
  transition: max-height 0.2s linear;
}
.formSection.toggle.open {
}
.formSection.toggle.open .icon:before{pagination
  transform: translateY(-50%) translateX(-50%) rotate(180deg)
}
.formSection.toggle.open .icon:after{
  transform: translateY(-50%) translateX(-50%) rotate(0)
}
.formSection.toggle.open .body{
  max-height: 200vh;
}
@media (min-width: 768px) {
  .formSection.toggle.open .title .label{
    padding-left: 40px;
  }
}

/* pagination */

/* Custom */
.pagination.custom{
}

.pagination.custom .pagination-list{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.pagination.custom .pagination-list li {
  display: inline-block;
  border-radius: 50%;
  height: 40px;
  width: 40px;
  line-height: 40px;
  margin: 0 5px;
  vertical-align: middle;
}
.pagination.custom .pagination-list a, 
.pagination.custom .pagination-list span {
  font-size: 15px;
  color: #333333;
  padding: 10px 12px;
}
.pagination.custom .pagination-list li.disabled a,
.pagination.custom .pagination-list li.disabled span {
  opacity: 0.3;
  pointer-events: none;
}

.pagination.custom .pagination-first {}
.pagination.custom .pagination-last  {}
.pagination.custom .pagination-prev  {}
.pagination.custom .pagination-next  {}

.pagination.custom .pagination-number{} 
.pagination.custom .pagination-current{
  background-color: rgba(0, 159, 219, 1);
}
.pagination.custom .pagination-current a,
.pagination.custom .pagination-current span{
  color: #ffffff;
  pointer-events: none;
}

@media (min-width: 768px){
  .pagination.custom .pagination-list li.hideSp {
    display: inline-block !important;
  }
  .pagination.custom .pagination-list li.hidePc {
    display: none !important;
  }
}

/**************************************/
/* Brand Styles */
/**************************************/

/* Header */
/*------------------------------------*/
.header{
  background-image: url(/hc/theming_assets/01KRWFEAZQ9HWKYAJ535J6FBH3);
  background-repeat: no-repeat;
  background-size: auto 298px;
  background-position: center;
  height: 150px;
  margin-bottom: 30px;
}
.header .inner{
  height: 100%;
  padding: 15px 15px;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
}

/* 各バナー共通スタイル */
.banners {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px; 
  background-color: white;
  text-align: center;
  padding: 30px 10px; 
  width: 100%; 
}

.banners a img {
  border: 1px solid lightgray;
  box-shadow: 0 8px 15px -2px rgba(0, 0, 0, 0.3); 
  margin-top: 5px;
  margin-bottom: 20px;
  max-width: 400px;
  height: auto;
  transition: transform 0.2s;
}

.banners a img:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 20px -2px rgba(0, 0, 0, 0.4);
}

/* モバイル対応 */
@media (max-width: 768px) {
  .banners {
    gap: 20px; 
  }
  .banners a img {
    width: 90%;
  }
}


/* おしらせ */
.notice-box {
  background: #fff;
  border: 1px solid #e6e6e6;
  box-shadow: 0 4px 8px rgba(0,0,0,0.04);
  border-radius: 6px;
  overflow: hidden;
  max-width: 95%;
  margin: 0 auto;
}

/* 見出し */
.notice-title {
  margin: 0;
  padding: 16px 18px;
  background: linear-gradient(180deg, #f7f7f7, #ffffff);
  border-bottom: 1px solid #efefef;
  font-weight: 700;
  color: #009fdb;
  width: 100%;
  box-sizing: border-box;
}

/* リンク群 */
.notice-items {
  display: flex;
  flex-direction: column;
}

/* 各リンク行 */
.notice-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  padding: 14px 18px;
  border-bottom: 1px dashed #f0f0f0;
  color: #2b2b2b;
  background: transparent;
  transition: background 0.12s ease;
}

.notice-link:last-child {
  border-bottom: none;
}

.notice-link:hover {
  background: #fbfbfb;
}

.notice-link:hover .notice-chevron {
  text-decoration: none;
  color: #b3b3b3;
}

/* リンクテキスト */
.notice-link-text {
  display: block;
  flex: 1 1 auto;
  text-align: left;
  white-space: normal;
  word-break: break-word;
  font-weight: 500;
  line-height: 1.4;
  margin-right: 12px;
}

/* 右端の矢印 */
.notice-chevron {
  flex: 0 0 auto;
  font-size: 20px;
  color: #b3b3b3;
  line-height: 1;
}

/* フッター（その他のお知らせリンク） */
.notice-footer {
  padding: 10px 18px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: transparent;
  border-top: 1px solid #f5f5f5;
}

.notice-more {
  font-size: 13px;
  color: #0073e6;
  text-decoration: none;
}

.notice-more:hover {
  text-decoration: underline;
}

/* スマホ用調整 */
@media (max-width: 480px) {
  .notice-title {
    font-size: 15px;
    padding: 12px 14px;
  }
  .notice-link {
    padding: 12px 14px;
  }
  .notice-link-text {
    font-size: 13px;
  }
  .notice-chevron {
    font-size: 18px;
  }
  .notice-more {
    font-size: 12px;
  }
}

/* logo */
.header .logo{
  height: 22px;
  font-size: 18px;
  line-height: 1;
  margin-bottom: 20px;
}
.header .logo a{
  color: #ffffff;
  display: flex;
  align-items: center;
  height: 100%;
}
.header .logo img,
.header .logo svg{
  height: 100%;
}
.header .logo svg *{
  fill: #ffffff;
}
.header .logo .text{
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid #ffffff;
  display: block;
  white-space: nowrap;
}

/* navi */
.header .user-nav{
  position: relative;
}
.header .nav-wrapper{
  display: flex;
  align-items: center;
}
.header .nav-wrapper a{
  display: block;;
}
.header .header_menu{
  border: 1px solid #ffffff;
  border-radius: 20px;
  color: #ffffff;
  padding: 5px 15px;
  margin-left: 10px;
  font-size: 14px;
  line-height: 1;
}
.header .header_menu:hover{
  border-color: #005575;
  background-color: #005575;
  color: #ffffff;
  text-decoration: none;
}

.header .language-selector-wrap{
  margin-left: 20px;
}
.header .language-selector{
  font-size: 14px;
  line-height: 1;
}
.header .language-selector .dropdown-toggle{
  color: #ffffff;
}

/* search */
.header .search-frame{
  width: 280px;
  text-align: center;
  margin-bottom: 20px;
}
.header .search-frame .title{
  display: none;
}
.header .search-frame .search-wrap{
  position: relative;
}
.header .search-frame .search input[type="search"]{
  padding: 5px 60px 5px 10px;
  height: 30px;
}
.header .search-frame .search input[type="submit"]{
  position: absolute;
  right: 0;
  top: 0;
  height: 40px;
  text-indent: -9999px;
  width: 50px;
  min-width: 50px;
  padding: 0;
  border-radius: 0 20px 20px 0;
  height: 30px;
  background-color: #009fdb;
}
.header .search-frame .search input[type="submit"]:hover{
  background-color: #005575;
}
.header .search-frame .search-icon{
  position: absolute;
  left: auto;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.header .search-frame .search-icon *{
  stroke: #ffffff;
}
.header .search-frame .keywords{
  display: none;
}
.header .search-frame .comunity{
  display: none;
}

@media (min-width: 768px){
  .header{
    height: 76px;
  }
  .header .inner{
    padding: 25px 20px;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
  }
  
  /* logo */
  .header .logo{
    margin-bottom: 0;
  }
    
  /* navi */
  .header .nav-wrapper{
  }
  
  /* search */
  .header .search-frame{
    width: 320px;
    margin: 0 20px
  }
}

@media (max-width: 766px){
  .tpl_home .header {
    height: 260px;
  }
  .header .inner {
    padding: 5px; 
  }
  .header .logo {
    margin-bottom: 5px; 
  }
  .header .nav-wrapper {
    margin-top: -20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 10px;
  }

  .header .nav-wrapper > * {
    flex: 0 0 calc(50% - 10px);
    text-align: center;
  }
  
}

/* TOP PAGE */
/*------------------------------------*/
/*
.tpl_home .header{
  height: 195px;
}
*/

/* Search */
.tpl_home .header .search-frame{
  margin: 15px 0 20px 0;
}
.tpl_home .header .search-frame .title{
  display: block;
  color: #ffffff;
  font-size: 16px;
  margin-bottom: 10px;
  font-weight: bold;
}
.tpl_home .header .search-frame .search input[type="search"]{
}
.tpl_home .header .search-frame .search input[type="submit"]{
}
.tpl_home .header .search-frame .keywords{
  display: block;
  margin: 5px 0 0 0;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
}
.tpl_home .header .search-frame .popular-list{
  justify-content: center;
}
.tpl_home .header .search-frame .keywords li{
  margin: 0 0 5px 5px;
}
.tpl_home .header .search-frame .keywords a{
  color: #ffffff;
  text-decoration: underline;
  font-weight: normal;
  font-size: 13px;
}
.tpl_home .header .search-frame .keywords a:hover{
  color: #ffffff;
  text-decoration: none;
}
.tpl_home .header .search-frame .comunity{
  display: block;
  margin: 10px 0 0 0;
}
.tpl_home .header .search-frame .comunity a{
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  background-color: #009fdb;
  display: inline-block;
  border-radius: 5px;
  padding: 5px 30px;
  border: 1px solid #ffffff;
  text-decoration: none;
}
.tpl_home .header .search-frame .comunity a:hover{
  background-color: #005575;;
}

.comunity_link {
  display: flex;
  align-items: center;
}

.comunity_text {
  margin-top: 20px;
  padding-left: 20px
}

.comunity_text a{
  font-size: 12px;
  color: #ffffff;
  text-decoration: underline;
}

@media (min-width: 768px){
  .tpl_home .header{
    height: 195px;
  }
  .tpl_home .header .inner{
    padding: 25px 20px;
    align-items: flex-start;
  }
  
  /* Search */
  .tpl_home .header .search-frame{
    margin: 15px 0 30px 0;
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    width: 640px;
  }
  .tpl_home .header .search-frame .title{
    display: block;
    color: #ffffff;
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: bold;
  }
  .tpl_home .header .search-frame .search input[type="search"]{
    height: 40px;
  }
  .tpl_home .header .search-frame .search input[type="submit"]{
    height: 40px;
  }
  .tpl_home .header .search-frame .keywords{
    margin: 20px 0 0 0;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    justify-content: center;
  }
  .tpl_home .header .search-frame .keywords li{
    margin: 0 0 0 10px;
  }
  .tpl_home .header .search-frame .keywords a{
    font-size: 16px;
    font-weight: bold;
  }
  .tpl_home .header .search-frame .comunity{
    display: block;
    margin: 20px 0 0 0;
    font-size: 16px;
  }
  .tpl_home .header .search-frame .comunity a{
    font-size: 16px;
    padding: 10px 30px;
  }  
}


/* Footer */
/*------------------------------------*/
.footer{
  background-color: #F7F7F7;
  border: 0;
  padding: 0;
}
.footer .inner{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px 20px 80px 20px;
}
.footer .logo svg {
  height: 30px;
}
.footer .logo svg .cls-1,
.footer .logo svg .cls-2{
  /*fill: #ffffff; */
  /*stroke: #009fdb; */
}
.footer .links{
  margin-top: 25px;
}
.footer .links ul{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footer .links li{
  color: #707070;
  margin: 0 0 10px 0;
  padding: 0;
  line-height: 1;
}
.footer .copy{
  color: #707070;
  margin: 15px 0 0 0;
  font-size: 12px;
}

.to-pagetop{
  position: fixed;
  bottom: 20px;
  left: 20px;
  background-color: #009fdb;
  width: 50px;
  height: 50px;
  text-indent: -999px;
  border-radius: 25px;
}
.to-pagetop:before{
  content: "";
  border-top: 6px solid #ffffff;
  border-left: 6px solid #ffffff;
  position: absolute;
  left: 14px;
  top: 18px;
  width: 15px;
  height: 15px;
  display: block;
  transform: rotate(45deg);
}
@media (min-width: 768px){
  .footer .inner{
    padding: 20px 20px;
  }
  .footer .links{
    margin-top: 15px;
  }
  .footer .links ul{
    flex-direction: row;
  }
  .footer .links li{
    color: #707070;
    margin: 0 0 0 10px;
    padding: 0 0 0 10px;
    border-left: 1px solid #707070;
    line-height: 1;
  }
  .footer .links li:first-child{
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border-left: 0;
  }
  .footer .copy{
    font-size: 14px;
  }
}

/* SubNav */
/*------------------------------------*/
.sub-nav{
  margin-bottom: 0;
}
@media (min-width: 768px){
  .sub-nav{
    margin-bottom: 30px;
  }
}

/* Home */
/*------------------------------------*/
.top-section{
  margin-top: 50px;
}
.top-section .title{
  color: #009fdb;
  font-weight: bold;
  font-size: 22px;
  position: relative;
  padding-left: 40px;
}
.top-section .title:before{
  content: "";
  width: 25px;
  height: 5px;
  position: absolute;
  display: block;
  background-color: #009fdb;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.top-promoted-articles{
}
.top-promoted-articles .title{
  text-align: center;
  padding-left: 0;
}
.top-promoted-articles .title:before{
  display: none;
}
.top-promoted-articles .article-list {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-between;
}
.top-promoted-articles .promoted-articles-item{
  overflow: hidden;
  white-space: nowrap;
  padding: 0;
  max-width: 100%;
}
.top-promoted-articles .promoted-articles-item:nth-of-type(n+9){
  display: none;
}
.top-promoted-articles .promoted-articles-item a{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  padding-right: 20px;
  position: relative;
  padding: 5px 20px 0 5px;
}
.top-promoted-articles .promoted-articles-item a:after{
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-bottom: 3px solid #009fdb;
  border-right: 3px solid #009fdb;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-40%) rotate(-45deg);
}


.top-section{
}
.top-section .top-section-list {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 100%;
}
.top-section .top-section-item{
  margin-bottom: 10px;
}
.top-section .top-section-item a{
  border: 1px solid #009fdb;
  border-radius: 5px;
  padding: 10px 10px 10px 45px;
  text-align: left;
  color: #999FA6;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
.top-section .top-section-item a:hover{
  background-color: #009fdb;
  color: #ffffff;
}
.top-section .top-section-item a:before{
  content: "";
  display: block;
  position: absolute;
  left: 10px;
  top: 50%;
  width: 25px;
  height: 25px;
  background-image: url(/hc/theming_assets/01KRWFEA6FRA6QGSYPNPWX28D1);
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
  transform: translateY(-50%);
}

@media (min-width: 768px){
  .top-promoted-articles .article-list {
    flex-direction: row;
  }
  .top-promoted-articles .promoted-articles-item{
    min-width: calc(50% - 10px);
    max-width: calc(50% - 10px);
  } 
  
  .top-section .top-section-list {
    flex-direction: row;
    justify-content: flex-start;
    margin-left: -5px;
    margin-right: -5px;
  }
  .top-section .top-section-item{
    margin-bottom: 20px;
    margin: 0 5px 10px 5px;
  }
  .top-section .top-section-item a{
    padding: 45px 10px 10px 10px;
    text-align: center;
  }
  .top-section .top-section-item a:before{
    left: 50%;
    top: 10px;
    width: 30px;
    height: 30px;
    transform: translateX(-50%);
  }

  .top-faq-list .top-section-item{
    min-width: calc(25% - 10px);
    max-width: calc(25% - 10px);
  }
   .top-customize-list .top-section-item{
    min-width: calc(33.3% - 10px);
    max-width: calc(33.3% - 10px);
  }
  .top-licence-list .top-section-item{
    min-width: calc(20% - 10px);
    max-width: calc(20% - 10px);
  }
  .top-solution-list .top-section-item{
    min-width: calc(33.3% - 10px);
    max-width: calc(33.3% - 10px);
  }
  .top-command-list .top-section-item{
    min-width: calc(20% - 10px);
    max-width: calc(20% - 10px);
  }  
  .top-variable-list .top-section-item{
    min-width: calc(20% - 10px);
    max-width: calc(20% - 10px);
  }  
  .top-other-list .top-section-item{
    min-width: calc(33.3% - 10px);
    max-width: calc(33.3% - 10px);
  }  
}

/* Category */
/*------------------------------------*/
.section-tree{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
}
.section-tree .section{
  margin-bottom: 10px;
}
.section-tree .section h2{
  width: 100%;
  height: 100%;
}
/* .section-tree .section a{
  margin-bottom: 20px;
  border: 1px solid #009fdb;
  border-radius: 5px;
  padding: 45px 10px 10px 10px;
  text-align: center;
  color: #009fdb;
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
} */
.section-tree .section a,
.section-tree .section span{
  font-size: 14px;
  /* color: #333333; */
  color: #999FA6;
  border: 1px solid #009fdb;
  border-radius: 5px;
  padding: 10px 10px 10px 45px;
  text-align: left;
  color: #999FA6;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
.section-tree .section a:before,
.section-tree .section span:before{
  content: "";
  display: block;
  position: absolute;
  left: 10px;
  top: 50%;
  width: 25px;
  height: 25px;
  background-image: url(/hc/theming_assets/01KRWFEA6FRA6QGSYPNPWX28D1);
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
  transform: translateY(-50%);
}
.section-tree .section a:hover{
  /* background-color: #007aa8; */
  background-color: #009fdb;
  color: #ffffff;
}
.section-tree .section span{
  pointer-events: none;
}
.section-tree .section .no-icon:before{
  background-image: none !important;
}

@media (min-width: 768px){
  .section-tree{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    margin-left: -5px;
    margin-right: -5px;
  }
  .section-tree .section{
    min-width: calc(20% - 10px);
    max-width: calc(20% - 10px);
    margin: 0 5px 10px 5px;
  }
  .section-tree .section a,
  .section-tree .section span{
    border: 1px solid #009fdb;
    border-radius: 5px;
    padding: 45px 10px 10px 10px;
    text-align: center;
    color: #999FA6;
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
  }
  .section-tree .section a:before,
  .section-tree .section span:before{
    left: 50%;
    top: 10px;
    width: 30px;
    height: 30px;
    transform: translateX(-50%);
  }
}

/* Section */
/*------------------------------------*/
.section-title{
  color: #009fdb;
  font-weight: bold;
  font-size: 22px;
  position: relative;
}
.article-list .article-list-item{
  border-bottom: 1px solid #ddd;
}
.page-header {
  flex-direction: column;
}

/* Article */
/*------------------------------------*/
.article-container {
  flex-direction: column-reverse;
}
.article-category-menu{
  min-height: 100%;
}
.article-category-menu{
  min-height: 100%;
  overflow-y: scroll;
  padding: 10px 0;
}
.article-category-menu .category_menu_frame{
  height: 300px;
}

.article-body h1{
  border-bottom: 1px solid rgba(0, 159, 219, 1);
}
.article-body h2{
  padding-left: 12.5px;
  border-left: solid 10px #00A0DD;
}
.article-body img{
  margin-bottom: 20px;
  transition: transform 0.5s cubic-bezier(.68,-0.55,.27,1.55);
}
.article-body img:hover {
  -webkit-transform: scale(1.4);
  -moz-transform: scale(1.4);
  -o-transform: scale(1.4);
  -ms-transform: scale(1.4);
  transform: scale(1.4);
}

/* offline article */
.article-body > .container > .header,
.article-body > .container > .footer,
.article-body > .container > * .header,
.article-body > .container > * .footer{
  display: none;
}
.article-body > .container > .sub{
  /* padding-left: 15px; */
}
.article-body > .container > .sub .grade,
.article-body > .container > .sub .access,
.article-body > .container > .sub .variables{
  margin-bottom: 20px;
}
.article-body > .container > .sub table{
  font-size: 14px;
  margin-left: 15px;
}
.article-body > .container > .sub table th,
.article-body > .container > .sub table td{
  border: 0 !important;
  padding: 0 4px 0 0 !important;
  line-height: 140%;
}
.article-body > .container > .sub table td.col1{
  font-weight: bold;
}

.article-body > .container > .main{
  /* padding-left: 15px; */
}
.article-body > .container > .main table{
  margin-top: 10px;
  margin-bottom: 10px;
  border-collapse: collapse;
}
.article-body > .container > .main img{
  margin-top: 10px;
  margin-bottom: 10px;
}
.article-body > .container > .main h2:hover,
.article-body > .container > .main h3:hover,
.article-body > .container > .main h4:hover{
  background-color: #dddddd
}

.article-body > .container > .main h1{
  margin-top: 15px;
  margin-bottom: 0;
}
.article-body > .container > .main .p1,
.article-body > .container > .main .ol1,
.article-body > .container > .main .ul1,
.article-body > .container > .main .table1,
.article-body > .container > .main .img1{
  margin-left: 15px;
}
.article-body > .container > .main .dialog .img1{
  margin-left: 15px;
}

.article-body > .container > .main h2{
  margin-top: 5px;
  margin-bottom: 0;
  margin-left: 15px;
}
.article-body > .container > .main .p2,
.article-body > .container > .main .ol2,
.article-body > .container > .main .ul2,
.article-body > .container > .main .table2,
.article-body > .container > .main .img2{
  margin-left: 30px;
}

.article-body > .container > .main h3{
  margin-top: 5px;
  margin-bottom: 0;
  margin-left: 52.5px;
}
.article-body > .container > .main .overview h3{
  margin-left: 30px;
}
.article-body > .container > .main .overview .p3{
  margin-left: 45px;
}
.article-body > .container > .main .prompt h3{
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 52.5px;
}
.article-body > .container > .main .dialog h3{
  margin-left: 30px;
}
.article-body > .container > .main .p3,
.article-body > .container > .main .ol3,
.article-body > .container > .main .ul3,
.article-body > .container > .main .table3,
.article-body > .container > .main .img3{
  margin-left: 67.5px;
}

.article-body > .container > .main h4{
  margin-top: 5px;
  margin-bottom: 0;
  margin-left: 67.5px;
}
.article-body > .container > .main .p4,
.article-body > .container > .main .ol4,
.article-body > .container > .main .ul4,
.article-body > .container > .main .table4,
.article-body > .container > .main .img4{
  margin-left: 105px;
}

.article-body > .container > .main h5{
  margin-top: 5px;
  margin-bottom: 0;
  margin-left: 105px;
}
.article-body > .container > .main .p5,
.article-body > .container > .main .ol5,
.article-body > .container > .main .ul5,
.article-body > .container > .main .table5,
.article-body > .container > .main .img5{
  margin-left: 120px;
}

.article-body > .container > .main .h6{
  margin-left: 120px;
}

.article-body > .container > .main .p6{
  margin-left: 135px;
}

.article-body > .container > .main .img1{
  margin-right: -1em
}
.article-body > .container > .main .img2{
  margin-right: -3em;
}
.article-body > .container > .main .img3{
  margin-right: -5em;
}
.article-body > .container > .main .img4{
  margin-right: -7em;
}
.article-body > .container > .main .img5{
  margin-right: -9em;
}

.article-body > .container > .main .ol1 .img1,
.article-body > .container > .main .ul1 .img1{
  margin-left: 0;
}
.article-body > .container > .main .ol1 .p1,
.article-body > .container > .main .ul .p1,
.article-body > .container > .main .ol1 .ul1,
.article-body > .container > .main .ul1 .ol1{
  margin-left: 17.5px;
}
.article-body > .container > .main .ol2 .img2,
.article-body > .container > .main .ul2 .img2{
  margin-left: 0;
}
.article-body > .container > .main .ol2 .p2,
.article-body > .container > .main .ul .p2,
.article-body > .container > .main .ol2 .ul2,
.article-body > .container > .main .ul2 .ol2{
  margin-left: 17.5px;
}

.article-body > .container > .main .ol3 .img3,
.article-body > .container > .main .ul3 .img3{
  margin-left: 0;
}
.article-body > .container > .main .ol3 .p3,
.article-body > .container > .main .ul .p3,
.article-body > .container > .main .ol3 .ul3,
.article-body > .container > .main .ul3 .ol3{
  margin-left: 17.5px;
}

.article-body > .container > .main .ol4 .img4,
.article-body > .container > .main .ul4 .img4{
  margin-left: 0;
}
.article-body > .container > .main .ol4 .p4,
.article-body > .container > .main .ul .p4,
.article-body > .container > .main .ol4 .ul4,
.article-body > .container > .main .ul4 .ol4{
  margin-left: 17.5px;
}

.article-body > .container > .main .ol5 .img5,
.article-body > .container > .main .ul5 .img5{
  margin-left: 0;
}
.article-body > .container > .main .ol5 .p5,
.article-body > .container > .main .ul .p5,
.article-body > .container > .main .ol5 .ul5,
.article-body > .container > .main .ul5 .ol5{
  margin-left: 17.5px;
}

/*タイトルのナビページ*/
.article-body > .container .nav .ul1{
  line-height: 200%;
}
.article-body > .container .nav .ul1 .ul2{
  line-height: 200%;
  margin-left: 30px;
  list-style-type: disc;
}

.article-body > .container .p1_img1{
  margin: -3px 0 0 14px;
  vertical-align: middle;
}
.article-body > .container .p2_img2{
  margin: -4px 0 0 14px;
  vertical-align: middle;
}
.article-body > .container .red{
  color: red;
}
.article-body > .container .h2_p2{
  font-weight: normal;
}

.article-body > .container .table1 thead,
.article-body > .container .table2 thead,
.article-body > .container .table4 thead{
  background: #d3d3d3;
}
.article-body > .container .table1 thead td,
.article-body > .container .table2 thead td,
.article-body > .container .table4 thead td{
  padding: 7px 10px;
  border: 2px solid #a8a8a8;
}
.article-body > .container .table1 .list td,
.article-body > .container .table2 .list td,
.article-body > .container .table4 .list td{
  padding: 2px 10px;
  border: 2px solid #a8a8a8;
}

.article-body > .container .attention tr td{
  color: black;
  font-weight: normal;
}
.article-body > .container .attention tr .col1{
  border: none;
  color: red;
  font-weight: bold;
}


@media (min-width: 768px){
  .article-container {
    flex-direction: row;
  }
  .article-sidebar {
    max-width: 32%;
    flex: 0 0 32%;
    background-color: #eeeeee;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 40px;
  }
  .article-category-menu .category_menu_frame{
    height: 0;
  }
  .article {
    flex: 1 0 auto;
    max-width: 100%;
    width: 66%;
    flex: 1 0 66%;
    max-width: 66%;
    min-width: 640px;
    padding: 0 30px;
  }    
}

/* Category Menu */
/*------------------------------------*/
.category_menu_frame .category_item{
  margin-top: 10px;
}
.category_menu_frame .section_list_frame{
  height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  transition: all .2s ease-out;
}
.category_menu_frame .section_list_frame.open{
  height: auto;
  margin-top: 0;
  opacity: 1;
  transition: all .2s ease-out;
}
.category_menu_frame .section_list{
  margin-top: 10px;
}

.category_menu_frame .article_list_frame{
  height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  transition: all .2s ease-out;
}
.category_menu_frame .article_list_frame.open{
  height: auto;
  margin-top: 0;
  opacity: 1;
  transition: all .2s ease-out;
}
.category_menu_frame .article_list{
  padding-left: 1em;
}
.category_menu_frame a{
  color: #333333;
}
.category_menu_frame .category_title{
  font-weight: bold;
  margin: 0;
}
.category_menu_frame .section_title,
.category_menu_frame .article_title{
  position: relative;
  padding: 0 0 0 1.3em;
  margin: 0 0 10px 0;
  font-size: 12px;
}
.category_menu_frame .section_title:before,
.category_menu_frame .article_title:before{
  content: "";
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #666666;  
  position: absolute;
  left: 5px;
  top: 0.8em;
  transform: translateY(-50%);
}
.category_menu_frame .section_title{
  font-size: 14px;
}
.category_menu_frame .current .article_title{
  font-weight: bold;
  color: #009fdb;
}
.category_menu_frame .article_loading{
  height: 18px;
  margin-bottom: 10px;
  display: block;
  position: relative;
}
.category_menu_frame .article_loading .loader-frame {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 18px;
  height: 18px;
  display: block;
}
.category_menu_frame .article_loading .loader,
.category_menu_frame .article_loading .loader:after {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  display: block;
  text-indent: -9999px;
}
.category_menu_frame .article_loading .loader {
  font-size: 2px;
  margin: 60px auto;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(0, 0, 0, 0.2);
  border-right: 1.1em solid rgba(0, 0, 0, 0.2);
  border-bottom: 1.1em solid rgba(0, 0, 0, 0.2);
  border-left: 1.1em solid #ffffff;
  transform: translateZ(0);
  animation: load8 1.1s infinite linear;
  margin: 0;
}
@media (min-width: 768px){ 
}

/* Form */
/*------------------------------------*/
#main-content.form{
  margin: 0 auto;
}
.header_note,
.footer_note{
  font-size: 12px;
  text-align: right;
}
.header_note{
  margin: 20px 0 40px 0;
}
.footer_note{
  margin: 60px 0 0 0;
}
.header_note .required{
  color: #f00;
}



/* Icons */
/*------------------------------------*/

/* Category Icon */
/*---------------*/

/* ▼ ソリューション製品 */
/* [200137665] IJCAD */
.icon-link[data-cat-id="200137665"   ]:before{ 
  background-image: url(/hc/theming_assets/01KRWFE592G0V91A62C0RHJM5Y) !important; 
}
.icon-link[data-cat-id="200137665"   ]:hover:before{ 
  background-image: url(/hc/theming_assets/01KRWFE2511CTW1G388F4A8WN6) !important; 
}
.icon-link[data-cat-id="200137665"   ]:hover{ 
  background-color: #e09b21 !important;
  border-color: #e09b21 !important;
}

/* [200433955] IJCAD Electrical */
.icon-link[data-cat-id="200433955"   ]:before{ 
  background-image: url(/hc/theming_assets/01KRWFE4T2XQN634CZFX96GQZX) !important; 
}
.icon-link[data-cat-id="200433955"   ]:hover:before{ 
  background-image: url(/hc/theming_assets/01KRWFE2511CTW1G388F4A8WN6) !important; 
}
.icon-link[data-cat-id="200433955"   ]:hover{ 
  background-color: #c45176 !important;
  border-color: #c45176 !important;
}

/* [200128269] IJCAD Mechanical / Mechanical+ */
.icon-link[data-cat-id="200128269"   ]:before{ 
  background-image: url(/hc/theming_assets/01KRWFE50AYXQRQFQM9M7H4SSG) !important; 
}
.icon-link[data-cat-id="200128269"   ]:hover:before{ 
  background-image: url(/hc/theming_assets/01KRWFE2511CTW1G388F4A8WN6) !important; 
}
.icon-link[data-cat-id="200128269"   ]:hover{ 
  background-color: #3173aa !important;
  border-color: #3173aa !important;
}

/* [200137675] IJCAD Civil */
.icon-link[data-cat-id="200137675"   ]:before{ 
  background-image: url(/hc/theming_assets/01KRWFE5900KKM7RYR6WX6DKF3) !important; 
}
.icon-link[data-cat-id="200137675"   ]:hover:before{ 
  background-image: url(/hc/theming_assets/01KRWFE2511CTW1G388F4A8WN6) !important; 
}
.icon-link[data-cat-id="200137675"   ]:hover{ 
  background-color: #a6ab4f !important;
  border-color: #a6ab4f !important;
}

/* [360000048981] IJCAD Arch / Arch+ */
.icon-link[data-cat-id="360000048981"]:before{ 
  background-image: url(/hc/theming_assets/01KRWFE50EC2MHDBGE87H818BR) !important; 
}
.icon-link[data-cat-id="360000048981"]:hover:before{
  background-image: url(/hc/theming_assets/01KRWFE2511CTW1G388F4A8WN6) !important; 
}
.icon-link[data-cat-id="360000048981"   ]:hover{ 
  background-color: #148c55 !important;
  border-color: #148c55 !important;
}

/* [200128119] IJCAD Mobile */
.icon-link[data-cat-id="200128119"   ]:before{ 
  background-image: url(/hc/theming_assets/01KRWFE6Y4RMR1JYZMAHG3Z2E8) !important; 
}
.icon-link[data-cat-id="200128119"   ]:hover:before{ 
  background-image: url(/hc/theming_assets/01KRWFE9KKDTCD9RY3PC0B6AR3) !important; 
}


/* ▼ コマンドリファレンス */
/* [900001300503] IJCAD コマンドリファレンス */
.icon-link[data-cat-id="900001300503"   ]:before{ 
  background-image: url(/hc/theming_assets/01KRWFE4G8FRWXMBMKDB19AEPR) !important; 
}
.icon-link[data-cat-id="900001300503"   ]:hover:before{ 
  background-image: url(/hc/theming_assets/01KRWFE53BMP18R7JKP0VHBY81) !important; 
}
.icon-link[data-cat-id="900001300503"   ]:hover{ 
  background-color: #e09b21 !important;
  border-color: #e09b21 !important;
}

/* [900001300523] IJCAD Mechanical コマンドリファレンス */
.icon-link[data-cat-id="900001300523"   ]:before{ 
  background-image: url(/hc/theming_assets/01KRWFE5JRJ4D2SRHTP9F81K3R) !important; 
}
.icon-link[data-cat-id="900001300523"   ]:hover:before{ 
  background-image: url(/hc/theming_assets/01KRWFE53BMP18R7JKP0VHBY81) !important; 
}
.icon-link[data-cat-id="900001300523"   ]:hover{ 
  background-color: #3173aa !important;
  border-color: #3173aa !important;
}

/* [900000293966] IJCAD Electrical コマンドリファレンス */
.icon-link[data-cat-id="900000293966"   ]:before{ 
  background-image: url(/hc/theming_assets/01KRWFE4PY34S6JRT3QAAKAS1D) !important; 
}
.icon-link[data-cat-id="900000293966"   ]:hover:before{ 
  background-image: url(/hc/theming_assets/01KRWFE53BMP18R7JKP0VHBY81) !important; 
}
.icon-link[data-cat-id="900000293966"   ]:hover{ 
  background-color: #c45176 !important;
  border-color: #c45176 !important;
}

/* [900000294006] IJCAD Arch / Arch+ コマンドリファレンス */
.icon-link[data-cat-id="900000294006"   ]:before{ 
  background-image: url(/hc/theming_assets/01KRWFE576SNHNXKTGE8CCE015) !important; 
}
.icon-link[data-cat-id="900000294006"   ]:hover:before{ 
  background-image: url(/hc/theming_assets/01KRWFE53BMP18R7JKP0VHBY81) !important; 
}
.icon-link[data-cat-id="900000294006"   ]:hover{ 
  background-color: #148c55 !important;
  border-color: #148c55 !important;
}

/* [900000293986] IJCAD Civil コマンドリファレンス */
.icon-link[data-cat-id="900000293986"   ]:before{ 
  background-image: url(/hc/theming_assets/01KRWFE50BGZ0S8Y85W78BD0S9) !important; 
}
.icon-link[data-cat-id="900000293986"   ]:hover:before{ 
  background-image: url(/hc/theming_assets/01KRWFE53BMP18R7JKP0VHBY81) !important; 
}
.icon-link[data-cat-id="900000293986"   ]:hover{ 
  background-color: #a6ab4f !important;
  border-color: #a6ab4f !important;
}


/* ▼ システム変数 */
/* [900001305643] IJCAD システム変数 */
.icon-link[data-cat-id="900001305643"   ]:before{ 
  background-image: url(/hc/theming_assets/01KRWFE5NPKXHACKBMWZFS65MV) !important; 
}
.icon-link[data-cat-id="900001305643"   ]:hover:before{ 
  background-image: url(/hc/theming_assets/01KRWFE5NN4NJEG9PAXSY6MM32) !important; 
}
.icon-link[data-cat-id="900001305643"   ]:hover{ 
  background-color: #e09b21 !important;
  border-color: #e09b21 !important;
}

/* [900001307443] IJCAD Mechanical システム変数 */
.icon-link[data-cat-id="900001307443"   ]:before{ 
  background-image: url(/hc/theming_assets/01KRWFE58W36HV1R0R0HKNHPHJ) !important; 
}
.icon-link[data-cat-id="900001307443"   ]:hover:before{ 
  background-image: url(/hc/theming_assets/01KRWFE5NN4NJEG9PAXSY6MM32) !important; 
}
.icon-link[data-cat-id="900001307443"   ]:hover{ 
  background-color: #3173aa !important;
  border-color: #3173aa !important;
}

/* [900001307463] IJCAD Electrical システム変数 */
.icon-link[data-cat-id="900001307463"   ]:before{ 
  background-image: url(/hc/theming_assets/01KRWFE50CR5P00FTRRYKXFEPW) !important; 
}
.icon-link[data-cat-id="900001307463"   ]:hover:before{ 
  background-image: url(/hc/theming_assets/01KRWFE5NN4NJEG9PAXSY6MM32) !important; 
}
.icon-link[data-cat-id="900001307463"   ]:hover{ 
  background-color: #c45176 !important;
  border-color: #c45176 !important;
}

/* [900000302946] IJCAD Arch / Arch+ システム変数 */
.icon-link[data-cat-id="900000302946"   ]:before{ 
  background-image: url(/hc/theming_assets/01KRWFE58Y457KJE2FY316GSGH) !important; 
}
.icon-link[data-cat-id="900000302946"   ]:hover:before{ 
  background-image: url(/hc/theming_assets/01KRWFE5NN4NJEG9PAXSY6MM32) !important; 
}
.icon-link[data-cat-id="900000302946"   ]:hover{ 
  background-color: #a6ab4f !important;
  border-color: #a6ab4f !important;
}

/* [900001307483] IJCAD Civil システム変数 */
.icon-link[data-cat-id="900001307483"   ]:before{ 
  background-image: url(/hc/theming_assets/01KRWFE53C2S3FCXM406DG2AE7) !important; 
}
.icon-link[data-cat-id="900001307483"   ]:hover:before{ 
  background-image: url(/hc/theming_assets/01KRWFE5NN4NJEG9PAXSY6MM32) !important; 
}
.icon-link[data-cat-id="900001307483"   ]:hover{ 
  background-color: #148c55 !important;
  border-color: #148c55 !important;
}


/* ▼ その他 */
/* [200128139] パートナープロダクツ */
.icon-link[data-cat-id="200128139"   ]:before{ background-image: url(/hc/theming_assets/01KRWFE6Y6WJEMM644G6M581DM) !important; }
.icon-link[data-cat-id="200128139"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE6V9HBGP1CQ5HCJ9TH10) !important; }

/* [200137635] IJCAD サイトのヘルプ */
.icon-link[data-cat-id="200137635"   ]:before{ background-image: url(/hc/theming_assets/01KRWFE94AFQC63J7MM1JMFPG9) !important; }
.icon-link[data-cat-id="200137635"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEA8B39885VX6T8555AVE) !important; }

/* [200137635] IJCAD サブスクリプション特典サイト */
.icon-link[data-cat-id="none"   ]:before{ background-image: url(/hc/theming_assets/01KRWFE6R94PAYRXMPP0ARPGNW) !important; }
.icon-link[data-cat-id="none"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE9KNJ9MHDDH3TXV8FXY7) !important; }


/* Section Icon */
/*--------------*/

/* ▼ 購入前のよくある質問 */
/* [28030988689945] 体験版について */
.icon-link[data-sec-id="28030988689945"   ]:before{ background-image: url(/hc/theming_assets/01KRWFEEJ7QJD0Q2PRTMQC0X60) !important; }
.icon-link[data-sec-id="28030988689945"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEG3X9H5TR60YJF6GVK3C) !important; }

/* [900000271966] 購入について */
.icon-link[data-cat-id="900000271966"   ]:before{ background-image: url(/hc/theming_assets/01KRWFEEJ1AT3K5EJSAFKEEFFT) !important; }
.icon-link[data-cat-id="900000271966"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEG26QSQ19K3D6GDV3PM8) !important; }

/* [27871960593177] カタログダウンロード */
.icon-link[data-sec-id="27871960593177"   ]:before{ background-image: url(/hc/theming_assets/01KRWFEENQHD3KQWRDTT7S9CQV) !important; }
.icon-link[data-sec-id="27871960593177"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEE9R2DWR9YYCZ13GP52S) !important; }

/* [27871960593177] 購入前 */
.icon-link[data-sec-id="27871979503769"   ]:before{ background-image: url(/hc/theming_assets/01KRWFEENP03SVJ8DY8X2J8891) !important; }
.icon-link[data-sec-id="27871979503769"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEG3YHRB8P38J9K8GB7D3) !important; }

/* [27872029212697] 購入方法 */
.icon-link[data-sec-id="27872029212697"   ]:before{ background-image: url(/hc/theming_assets/01KRWFEENKK2QC5K3ZH3H234T5) !important; }
.icon-link[data-sec-id="27872029212697"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEEYFR1Y2FSEZ6229SMH2) !important; }

/* [27872020366489] 購入後 */
.icon-link[data-sec-id="27872020366489"   ]:before{ background-image: url(/hc/theming_assets/01KRWFE71JMZVJ8AKT1N0SAR60) !important; }
.icon-link[data-sec-id="27872020366489"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEEJ9VZK6D80BCA1J7DMH) !important; }

/* [27873022258969] 各種ドキュメント */
.icon-link[data-cat-id="27873022258969"   ]:before{ background-image: url(/hc/theming_assets/01KRWFE717DC2VHCH0P4J2BW79) !important; }
.icon-link[data-cat-id="27873022258969"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE8E61EXRXXEDYC1CGCX4) !important; }

/* [29844929000089] 各種ドキュメント - 各種セットアップマニュアル */
.icon-link[data-sec-id="29844929000089"   ]:before{ background-image: url(/hc/theming_assets/01KRWFE717DC2VHCH0P4J2BW79) !important; }
.icon-link[data-sec-id="29844929000089"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE8E61EXRXXEDYC1CGCX4) !important; }

/* [29844981467289] 各種ドキュメント - IJCAD */
.icon-link[data-sec-id="29844981467289"   ]:before{ background-image: url(/hc/theming_assets/01KRWFE592G0V91A62C0RHJM5Y) !important; }
.icon-link[data-sec-id="29844981467289"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE2511CTW1G388F4A8WN6) !important; }

/* [29844943778585] 各種ドキュメント - IJCAD Mechanical/Mechanical+ */
.icon-link[data-sec-id="29844943778585"   ]:before{ background-image: url(/hc/theming_assets/01KRWFE50AYXQRQFQM9M7H4SSG) !important; }
.icon-link[data-sec-id="29844943778585"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE2511CTW1G388F4A8WN6) !important; }

/* [29844943778585] 各種ドキュメント - IJCAD Electrical */
.icon-link[data-sec-id="29844971353625"   ]:before{ background-image: url(/hc/theming_assets/01KRWFE4T2XQN634CZFX96GQZX) !important; }
.icon-link[data-sec-id="29844971353625"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE2511CTW1G388F4A8WN6) !important; }

/* [29845029134361] 各種ドキュメント - IJCAD Civil */
.icon-link[data-sec-id="29845029134361"   ]:before{ background-image: url(/hc/theming_assets/01KRWFE5900KKM7RYR6WX6DKF3) !important; }
.icon-link[data-sec-id="29845029134361"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE2511CTW1G388F4A8WN6) !important; }

/* [29844963966105] 各種ドキュメント - IJCAD Arch */
.icon-link[data-sec-id="29844963966105"   ]:before{ background-image: url(/hc/theming_assets/01KRWFE50EC2MHDBGE87H818BR) !important; }
.icon-link[data-sec-id="29844963966105"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE2511CTW1G388F4A8WN6) !important; }

/* [28030940429849] 操作や機能について */
.icon-link[data-cat-id="27872092626457"   ]:before{ background-image: url(/hc/theming_assets/01KRWFEECB73MGXTBKS22ASEE5) !important; }
.icon-link[data-cat-id="27872092626457"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEFHEM899WW0HH6JYNFNS) !important; }

/* [27871960593177] 作図 */
.icon-link[data-sec-id="27872115727257"   ]:before{ background-image: url(/hc/theming_assets/01KRWFED33BZBYSEGVC4466JJR) !important; }
.icon-link[data-sec-id="27872115727257"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEDZWDAFD2Q41ENA7WSDZ) !important; }

/* [27871960593177] 印刷 */
.icon-link[data-sec-id="27872145671065"   ]:before{ background-image: url(/hc/theming_assets/01KRWFEERGTR27HZTJZQS7822T) !important; }
.icon-link[data-sec-id="27872145671065"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEEC67TBD3KRDB16A779Z) !important; }

/* [27871960593177] ファイル変換 */
.icon-link[data-sec-id="27872174445465"   ]:before{ background-image: url(/hc/theming_assets/01KRWFEG0QNP8Z65H4NEF64KFZ) !important; }
.icon-link[data-sec-id="27872174445465"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEE9AM83FH087J19V0HE8) !important; }

/* [27871960593177] カスタマイズ */
.icon-link[data-sec-id="27872185467289"   ]:before{ background-image: url(/hc/theming_assets/01KRWFEEREBVWWNA6WPKM5WQXJ) !important; }
.icon-link[data-sec-id="27872185467289"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEFHCK2HPC1BWRT7E65P4) !important; }

/* [27871960593177] 互換性 */
.icon-link[data-sec-id="27872240649113"   ]:before{ background-image: url(/hc/theming_assets/01KRWFEA6C1P7E8B4DABVJP0D4) !important; }
.icon-link[data-sec-id="27872240649113"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFED6QSRBK2BS72KR1399A) !important; }

/* [28030940429849] メンテナンス・サブスクリプションとサポート */
.icon-link[data-cat-id="27872198457369"   ]:before{ background-image: url(/hc/theming_assets/01KRWFEENSGGB7DXKDA00XPSQG) !important; }
.icon-link[data-cat-id="27872198457369"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEEN81GJ4YBPG8FZMEFWM) !important; }

/* [28030940429849] メンテナンス・サブスクリプション */
.icon-link[data-sec-id="27872246764569"   ]:before{ background-image: url(/hc/theming_assets/01KRWFEFYCT47SR042T116T27N) !important; }
.icon-link[data-sec-id="27872246764569"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEESAAT72RSSTX95B253J) !important; }

/* [27872931418649] インストール */
.icon-link[data-sec-id="27872931418649"   ]:before{ background-image: url(/hc/theming_assets/01KRWFEFHA7SEBC9DGCVRV67A3) !important; }
.icon-link[data-sec-id="27872931418649"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFED6SJ6EBESGCZQZCNM2J) !important; }

/* [28030940429849] サポート */
.icon-link[data-sec-id="27872282591513"   ]:before{ background-image: url(/hc/theming_assets/01KRWFEG0SMS30SVEB2SNE0ZQA) !important; }
.icon-link[data-sec-id="27872282591513"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEFYVHMQNK48B0T9BQQR7) !important; }

/* [200325169] 機能や互換性について */
.icon-link[data-sec-id="200325169"   ]:before{ background-image: url(/hc/theming_assets/01KRWFEA6YRMTR63MS1PDTH6ZH) !important; }
.icon-link[data-sec-id="200325169"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE99ZXA1S6HQ2MAV9HH4R) !important; }

/* [200386015] 開発カスタマイズについて */
.icon-link[data-sec-id="200386015"   ]:before{ background-image: url(/hc/theming_assets/01KRWFE9NG1FJWC0ERRQ0DNJVH) !important; }
.icon-link[data-sec-id="200386015"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE8GK5GCBMRW9Z22JXX6C) !important; }

/* [200361219] IJCADの基礎知識 */
.icon-link[data-sec-id="200361219"   ]:before{ background-image: url(/hc/theming_assets/01KRWFE8DZ6FVG4JJ4REP595XY) !important; }
.icon-link[data-sec-id="200361219"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE8KXT2PNWS7GBRG6N1QP) !important; }

/* [201929541] カタログダウンロード */
.icon-link[data-sec-id="201929541"   ]:before{ background-image: url(/hc/theming_assets/01KRWFE9PRYRNKGKDKCEQA60K4) !important; }
.icon-link[data-sec-id="201929541"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE9CFDGS1KRNKSVXAV4MA) !important; }

/* [200386025] 動作環境 */
.icon-link[data-sec-id="200386025"   ]:before{ background-image: url(/hc/theming_assets/01KRWFE9A5TEHC4CXEZEHCB77X) !important; }
.icon-link[data-sec-id="200386025"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE877408VT4ZCP881YDFR) !important; }

/* ▼ 新ライセンス形式(シングル・マルチ・新USB) */
/* [28030975079193] IJstoreの使い方 */
.icon-link[data-sec-id="28030975079193"]:before{ background-image: url(/hc/theming_assets/01KRWFEG1KSPES7XX901B57HTH) !important; }
.icon-link[data-sec-id="28030975079193"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEERFTSGF4GKWY8828VG0) !important; }

/* [28030975079193] セットアップ */
.icon-link[data-sec-id="28030959478425"]:before{ background-image: url(/hc/theming_assets/01KRWFEEC9FE4KZAGZZWXCYXNN) !important; }
.icon-link[data-sec-id="28030959478425"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEFYN0HZ7QJ80Z53009XJ) !important; }

/* [28030975079193] オフライン利用について */
.icon-link[data-sec-id="28031021551129"]:before{ background-image: url(/hc/theming_assets/01KRWFEERH5GQXD2DT8VH60D1R) !important; }
.icon-link[data-sec-id="28031021551129"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEFYSMSVA8EGBE377NC0N) !important; }

/* [28030975079193] トラブルシューティング */
.icon-link[data-sec-id="28031012429465"]:before{ background-image: url(/hc/theming_assets/01KRWFEE8R82EPE4GBTJTMW1MV) !important; }
.icon-link[data-sec-id="28031012429465"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFECZTEDGWPD5DYGEN2VJ9) !important; }

/* ▼ ライセンスやインストール */
/* [900000411663] ライセンスの種類 */
.icon-link[data-sec-id="900000411663"]:before{ background-image: url(/hc/theming_assets/01KRWFE9CPDD37XQR4W7R65XW8) !important; }
.icon-link[data-sec-id="900000411663"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE9JTSXM1B5AS4VXEVA01) !important; }

/* [900000417526] メンテナンス・サブスクリプション */
.icon-link[data-sec-id="900000417526"]:before{ background-image: url(/hc/theming_assets/01KRWFE8PJ71AJBDZ2SY69NS43) !important; }
.icon-link[data-sec-id="900000417526"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE6Y029GZCAYYPGGYTAN4) !important; }

/* [900000417546] バージョンアップ */
.icon-link[data-sec-id="900000417546"]:before{ background-image: url(/hc/theming_assets/01KRWFE71GS1M84HH5TK1V6SF3) !important; }
.icon-link[data-sec-id="900000417546"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE8D4GA54613VVY3ZYP5J) !important; }

/* [900000411683] ライセンスの確認 */
.icon-link[data-sec-id="900000411683"]:before{ background-image: url(/hc/theming_assets/01KRWFE77E4167VDF97PMNYKF8) !important; }
.icon-link[data-sec-id="900000411683"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE9CRA8N8T2ATKGBZNGBY) !important; }

/* [900000411703] ライセンスの移行 */
.icon-link[data-sec-id="900000411703"]:before{ background-image: url(/hc/theming_assets/01KRWFE6Y14CKAVEMH0BT81WGK) !important; }
.icon-link[data-sec-id="900000411703"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE8GVEZKY7SZCR3WD2KDJ) !important; }

/* [900000411723] ネットワークライセンスの運用 */
.icon-link[data-sec-id="900000411723"]:before{ background-image: url(/hc/theming_assets/01KRWFE8WY8WYSTPV0G0JB75K2) !important; }
.icon-link[data-sec-id="900000411723"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE8KPT2HZ0VHYJ8GAY1P6) !important; }

/* [900000417566] インストールについて */
.icon-link[data-sec-id="900000417566"]:before{ background-image: url(/hc/theming_assets/01KRWFE6YHYZHEZAQJ74YXG477) !important; }
.icon-link[data-sec-id="900000417566"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE9PVN0QSWV75PEEXR88X) !important; }

/* [900000411743] アクティベーション */
.icon-link[data-cat-id="900000272046"]:before{ background-image: url(/hc/theming_assets/01KRWFE9W0JG9RS5B8Z0NKTQKX) !important; }
.icon-link[data-cat-id="900000272046"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEA6220SH1E1P0HP7BHDV) !important; }

/* [900000417586] トラブルシューティング */
.icon-link[data-cat-id="900000417586"]:before{ background-image: url(/hc/theming_assets/01KRWFEE8R82EPE4GBTJTMW1MV) !important; }
.icon-link[data-cat-id="900000417586"]:hover:before{ background-image: url($assets-icon-com-white-trouble-svg) !important; }

/* [900000272106] トラブルシューティング */
.icon-link[data-cat-id="900000272106"]:before{ background-image: url(/hc/theming_assets/01KRWFEE8R82EPE4GBTJTMW1MV) !important; }
.icon-link[data-cat-id="900000272106"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFECZTEDGWPD5DYGEN2VJ9) !important; }


/* 旧ライセンス形式(スタンドアロン・USB・ネットワーク) アクティベーション */
/* [27872790886041] スタンドアロン版 */
.icon-link[data-sec-id="27872790886041"]:before{ background-image: url(/hc/theming_assets/01KRWFEFXQ3BFXHE87K5TRXACH) !important; }
.icon-link[data-sec-id="27872790886041"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEG1YD4ETNRQA1244KW57) !important; }
/* [27872785617689] USB版 */
.icon-link[data-sec-id="27872785617689"]:before{ background-image: url(/hc/theming_assets/01KRWFEE90C52G3EKE4PZ9NFJ2) !important; }
.icon-link[data-sec-id="27872785617689"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEG40AQEQBWEZHN192RFD) !important; }
/* [27872824487193] ネットワーク版 */
.icon-link[data-sec-id="27872824487193"]:before{ background-image: url(/hc/theming_assets/01KRWFEFQWPRC1N5KWKHBDFC0G) !important; }
.icon-link[data-sec-id="27872824487193"]:hover:before{ background-image: url($assets-icon-sec-white-online-svg) !important; }
/* [27872856631577] その他 */
.icon-link[data-sec-id="27872856631577"]:before{ background-image: url(/hc/theming_assets/01KRWFEENMJK4XA5ZZRJM06N23) !important; }
.icon-link[data-sec-id="27872856631577"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEFYYC84MDQKYACGSBYCB) !important; }
/* [27872931418649] インストール */
.icon-link[data-sec-id="27872931418649"]:before{ background-image: url(/hc/theming_assets/01KRWFEFHA7SEBC9DGCVRV67A3) !important; }
.icon-link[data-sec-id="27872931418649"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFED6SJ6EBESGCZQZCNM2J) !important; }
/* [27872934784025] アクティベーション-ライセンストラブル */
.icon-link[data-sec-id="27872934784025"]:before{ background-image: url(/hc/theming_assets/01KRWFE83HBBS8TS5T060G9A8W) !important; }
.icon-link[data-sec-id="27872934784025"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFECYV34CN9M683M89SCMA) !important; }




/* ▼ [200128119] IJCAD Mobile */
/* [200386145] 操作や機能について */
.icon-link[data-sec-id="200386145"   ]:before{ background-image: url(/hc/theming_assets/01KRWFEA6YRMTR63MS1PDTH6ZH) !important; }
.icon-link[data-sec-id="200386145"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE99ZXA1S6HQ2MAV9HH4R) !important; }


/* ▼ [200128139] パートナープロダクツ */
/* [200389715] 書籍 */
.icon-link[data-sec-id="200389715"   ]:before{ background-image: url(/hc/theming_assets/01KRWFEA8D0JMWBRHK2FSAJPF0) !important; }
.icon-link[data-sec-id="200389715"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE8WJZZQDABRWWM94QD7D) !important; }

/* [200324659] アドオンアプリケーション */
.icon-link[data-sec-id="200324659"   ]:before{ background-image: url(/hc/theming_assets/01KRWFE6ZA9AMR17HRCQX9R1BZ) !important; }
.icon-link[data-sec-id="200324659"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE8GCW672ACM60NV73MC1) !important; }

/* [201996862] サービス、他 */
.icon-link[data-sec-id="201996862"   ]:before{ background-image: url(/hc/theming_assets/01KRWFEA6YRMTR63MS1PDTH6ZH) !important; }
.icon-link[data-sec-id="201996862"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE99ZXA1S6HQ2MAV9HH4R) !important; }

/* [201919411] トレーニング情報 */
.icon-link[data-sec-id="201919411"   ]:before{ background-image: url(/hc/theming_assets/01KRWFE8KSR5P2ZS04C051SZ63) !important; }
.icon-link[data-sec-id="201919411"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE6HQ86155BJMV1M67CW0) !important; }


/* ▼ [200128269] IJCAD Mechanical / Mechanical+ */
/* [200749425] IJCAD Mechanical 購入前のよくある質問 */
.icon-link[data-sec-id="200749425"   ]:before{ background-image: url(/hc/theming_assets/01KRWFE94AFQC63J7MM1JMFPG9) !important; }
.icon-link[data-sec-id="200749425"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEA8B39885VX6T8555AVE) !important; }

/* [200389625] アップデート情報 */
.icon-link[data-sec-id="200389625"   ]:before{ background-image: url(/hc/theming_assets/01KRWFE71GS1M84HH5TK1V6SF3) !important; }
.icon-link[data-sec-id="200389625"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE8D4GA54613VVY3ZYP5J) !important; }

/* [200389645] 操作や機能に関して */
.icon-link[data-sec-id="200389645"   ]:before{ background-image: url(/hc/theming_assets/01KRWFEA6YRMTR63MS1PDTH6ZH) !important; }
.icon-link[data-sec-id="200389645"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE99ZXA1S6HQ2MAV9HH4R) !important; }

/* [201053115] Mechanical データの互換性について */
.icon-link[data-sec-id="201053115"   ]:before{ background-image: url(/hc/theming_assets/01KRWFE8WY8WYSTPV0G0JB75K2) !important; }
.icon-link[data-sec-id="201053115"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE8KPT2HZ0VHYJ8GAY1P6) !important; }

/* [115000009281] トラブルシューティング - IJCAD Mechanical */
.icon-link[data-sec-id="115000009281"]:before{ background-image: url(/hc/theming_assets/01KRWFE6Y6WJEMM644G6M581DM) !important; }
.icon-link[data-sec-id="115000009281"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE6V9HBGP1CQ5HCJ9TH10) !important; }


/* ▼ [200137635] IJCAD サイトのヘルプ */
/* [200385505] IJCAD ヘルプセンター使い方ガイド */
.icon-link[data-sec-id="200385505"   ]:before{ background-image: url(/hc/theming_assets/01KRWFE94AFQC63J7MM1JMFPG9) !important; }
.icon-link[data-sec-id="200385505"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEA8B39885VX6T8555AVE) !important; }

/* [202017922] IJCAD.JP の使い方ガイド */
.icon-link[data-sec-id="202017922"   ]:before{ background-image: url(/hc/theming_assets/01KRWFE77E4167VDF97PMNYKF8) !important; }
.icon-link[data-sec-id="202017922"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE9CRA8N8T2ATKGBZNGBY) !important; }

/* [360000072341] IJCAD.JP でのライセンス管理 */
.icon-link[data-sec-id="360000072341"]:before{ background-image: url(/hc/theming_assets/01KRWFE9CPDD37XQR4W7R65XW8) !important; }
.icon-link[data-sec-id="360000072341"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE9JTSXM1B5AS4VXEVA01) !important; }

/* [115000017562] コミュニティの使い方ガイド */
.icon-link[data-sec-id="115000017562"]:before{ background-image: url(/hc/theming_assets/01KRWFEA6FRA6QGSYPNPWX28D1) !important; }
.icon-link[data-sec-id="115000017562"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEA8CEEBN08W45YY53QEK) !important; }

/* [201930681] ヘルプセンターの記事作成リファレンス */
.icon-link[data-sec-id="201930681"   ]:before{ background-image: url(/hc/theming_assets/01KRWFE8DZ6FVG4JJ4REP595XY) !important; }
.icon-link[data-sec-id="201930681"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE8KXT2PNWS7GBRG6N1QP) !important; }

/* [200385525] エージェント専用 */
.icon-link[data-sec-id="201930681"   ]:before{ background-image: url(/hc/theming_assets/01KRWFE77JYWM2TZPKVP1XRV48) !important }
.icon-link[data-sec-id="201930681"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE71M018CA03A048AHYSQ) !important }


/* ▼ [200137665] IJCAD */


/* [900000422523] 操作や機能について-作図 */
.icon-link[data-sec-id="25420559961113"]:before{ background-image: url(/hc/theming_assets/01KRWFED33BZBYSEGVC4466JJR) !important; }
.icon-link[data-sec-id="25420559961113"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEDZWDAFD2Q41ENA7WSDZ) !important; }

/* [900000422523] 操作や機能について-文字 */
.icon-link[data-sec-id="25511201888537"]:before{ background-image: url(/hc/theming_assets/01KRWFEG0TDWFKF3Z58A45QJE7) !important; }
.icon-link[data-sec-id="25511201888537"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEG0NQ6CE416886C49WZ0) !important; }

/* [900000422523] 操作や機能について-寸法 */
.icon-link[data-sec-id="25511220564505"]:before{ background-image: url(/hc/theming_assets/01KRWFECZWTBTR04SRPD6P0J6N) !important; }
.icon-link[data-sec-id="25511220564505"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEFE06XFDZ1V0260H4XFZ) !important; }

/* [900000422523] 操作や機能について-ブロック */
.icon-link[data-sec-id="25510671819289"]:before{ background-image: url(/hc/theming_assets/01KRWFEFESNDE4HXNSXEGDXGAA) !important; }
.icon-link[data-sec-id="25510671819289"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEFXMZAE49PYHABFECXC9) !important; }

/* [900000422523] 操作や機能について-表 */
.icon-link[data-sec-id="25511227693849"]:before{ background-image: url(/hc/theming_assets/01KRWFEDFTHF0DETSFMQY0NWR9) !important; }
.icon-link[data-sec-id="25511227693849"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEE8YDG2GS5ABZQMJPQY9) !important; }

/* [900000422523] 操作や機能について-ハッチング */
.icon-link[data-sec-id="25511275715097"]:before{ background-image: url(/hc/theming_assets/01KRWFEEJBDNKY8CGF36W37N0H) !important; }
.icon-link[data-sec-id="25511275715097"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEG3TEKJH0BD9BDAX1V71) !important; }

/* [900000422523] 操作や機能について-レイアウト */
.icon-link[data-sec-id="25511249500569"]:before{ background-image: url(/hc/theming_assets/01KRWFEDX1D1XRVPW4AVC6FZZF) !important; }
.icon-link[data-sec-id="25511249500569"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEE5QW5KZQ88HHKC1ZBJ9) !important; }

/* [900000422523] 操作や機能について-印刷 */
.icon-link[data-sec-id="25511268742553"]:before{ background-image: url(/hc/theming_assets/01KRWFEERGTR27HZTJZQS7822T) !important; }
.icon-link[data-sec-id="25511268742553"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEEC67TBD3KRDB16A779Z) !important; }

/* [900000422523] 操作や機能について-インターフェース */
.icon-link[data-sec-id="25511309561369"]:before{ background-image: url(/hc/theming_assets/01KRWFEEREBVWWNA6WPKM5WQXJ) !important; }
.icon-link[data-sec-id="25511309561369"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEFHCK2HPC1BWRT7E65P4) !important; }


/* [900000422523] トラブルシューティング-作図 */
.icon-link[data-sec-id="25511178104217"]:before{ background-image: url(/hc/theming_assets/01KRWFEERC6X35NK1VZFHK14T1) !important; }
.icon-link[data-sec-id="25511178104217"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEEFB1MGKD25K2C7AK5Y8) !important; }

/* [900000422523] トラブルシューティング-起動 */
.icon-link[data-sec-id="25511209030297"]:before{ background-image: url(/hc/theming_assets/01KRWFEENGMA0DSRWEP6GZ7WJM) !important; }
.icon-link[data-sec-id="25511209030297"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEEN31CBAAJP19WXA0H02) !important; }

/* [900000422523] トラブルシューティング-エラー */
.icon-link[data-sec-id="25511207480345"]:before{ background-image: url(/hc/theming_assets/01KRWFEEF6EXAAH84RMMTDR8NA) !important; }
.icon-link[data-sec-id="25511207480345"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEERBD7P7FA9JHZ3827GA) !important; }

/* [900000422523] トラブルシューティング-その他 */
.icon-link[data-sec-id="25511275639065"]:before{ background-image: url(/hc/theming_assets/01KRWFEENMJK4XA5ZZRJM06N23) !important; }
.icon-link[data-sec-id="25511275639065"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEFYYC84MDQKYACGSBYCB) !important; }

/* [900000422523] コマンドリファレンス */
.icon-link[data-sec-id="900000422523"]:before{ background-image: url(/hc/theming_assets/01KRWFE6RPVVEZE9R88AD4GH7A) !important; }
.icon-link[data-sec-id="900000422523"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE6R3PEB3YK3VTJHFQ86V) !important; }

/* [200386385] アップデート情報 */
.icon-link[data-sec-id="200386385"   ]:before{ background-image: url(/hc/theming_assets/01KRWFE71GS1M84HH5TK1V6SF3) !important; }
.icon-link[data-sec-id="200386385"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE8D4GA54613VVY3ZYP5J) !important; }


/* [900000422523] トラブルシューティング-作図 */
.icon-link[data-sec-id="25511178104217"]:before{ background-image: url(/hc/theming_assets/01KRWFEERC6X35NK1VZFHK14T1) !important; }
.icon-link[data-sec-id="25511178104217"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEEFB1MGKD25K2C7AK5Y8) !important; }

/* [900000422523] トラブルシューティング-起動 */
.icon-link[data-sec-id="25511209030297"]:before{ background-image: url(/hc/theming_assets/01KRWFEENGMA0DSRWEP6GZ7WJM) !important; }
.icon-link[data-sec-id="25511209030297"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEEN31CBAAJP19WXA0H02) !important; }

/* [900000422523] トラブルシューティング-エラー */
.icon-link[data-sec-id="25511207480345"]:before{ background-image: url(/hc/theming_assets/01KRWFEEF6EXAAH84RMMTDR8NA) !important; }
.icon-link[data-sec-id="25511207480345"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEERBD7P7FA9JHZ3827GA) !important; }

/* [900000422523] トラブルシューティング-その他 */
.icon-link[data-sec-id="25511275639065"]:before{ background-image: url(/hc/theming_assets/01KRWFEENMJK4XA5ZZRJM06N23) !important; }
.icon-link[data-sec-id="25511275639065"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEFYYC84MDQKYACGSBYCB) !important; }


/* [200385655] 操作や機能 */
.icon-link[data-sec-id="200385655"   ]:before{ background-image: url(/hc/theming_assets/01KRWFEA6YRMTR63MS1PDTH6ZH) !important; }
.icon-link[data-sec-id="200385655"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE99ZXA1S6HQ2MAV9HH4R) !important; }

/* [200549475] トラブルシューティング - IJCAD */
.icon-link[data-sec-id="200549475"   ]:before{ background-image: url(/hc/theming_assets/01KRWFE6Y6WJEMM644G6M581DM) !important; }
.icon-link[data-sec-id="200549475"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE6V9HBGP1CQ5HCJ9TH10) !important; }

/* [201963662] カスタマイズ- インターフェース（メニュー） */
.icon-link[data-sec-id="201963662"   ]:before{ background-image: url(/hc/theming_assets/01KRWFE71WPDMAH4501S9PYJM6) !important; }
.icon-link[data-sec-id="201963662"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE71FB6354ES8X5YSWC4A) !important; }

/* [200389605] カスタマイズ - 開発言語（API） */
.icon-link[data-sec-id="200389605"   ]:before{ background-image: url(/hc/theming_assets/01KRWFE9VYJ1YJ81XAAC5Z7GQV) !important; }
.icon-link[data-sec-id="200389605"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE8GE8WXY7TXM3J72CYFZ) !important; }

/* [115000004982] システム変数 - IJCAD */
.icon-link[data-sec-id="115000004982"]:before{ background-image: url(/hc/theming_assets/01KRWFE8WY8WYSTPV0G0JB75K2) !important; }
.icon-link[data-sec-id="115000004982"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE8KPT2HZ0VHYJ8GAY1P6) !important; }


/* ▼ [200137675] IJCAD Civil */
/* [201920661] Civil のよくある質問 */
.icon-link[data-sec-id="201920661"   ]:before{ background-image: url(/hc/theming_assets/01KRWFE94AFQC63J7MM1JMFPG9) !important; }
.icon-link[data-sec-id="201920661"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEA8B39885VX6T8555AVE) !important; }

/* [200389615] アップデート情報 */
.icon-link[data-sec-id="200389615"   ]:before{ background-image: url(/hc/theming_assets/01KRWFE71GS1M84HH5TK1V6SF3) !important; }
.icon-link[data-sec-id="200389615"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE8D4GA54613VVY3ZYP5J) !important; }

/* [200328489] 操作や機能について */
.icon-link[data-sec-id="200328489"   ]:before{ background-image: url(/hc/theming_assets/01KRWFEA6YRMTR63MS1PDTH6ZH) !important; }
.icon-link[data-sec-id="200328489"   ]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE99ZXA1S6HQ2MAV9HH4R) !important; }

/* [115000003541] トラブルシューティング */
.icon-link[data-sec-id="115000003541"]:before{ background-image: url(/hc/theming_assets/01KRWFE6Y6WJEMM644G6M581DM) !important; }
.icon-link[data-sec-id="115000003541"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE6V9HBGP1CQ5HCJ9TH10) !important; }

/* [8507511112089] IJAccount */
.icon-link[data-sec-id="8507511112089"]:before{ background-image: url(/hc/theming_assets/01KRWFE6Y6WJEMM644G6M581DM) !important; }
.icon-link[data-sec-id="8507511112089"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE6V9HBGP1CQ5HCJ9TH10) !important; }


/* ▼ [200433955] IJCAD Electrical */
/* [900000422923] 操作や機能について */
.icon-link[data-sec-id="900000422923"]:before{ background-image: url(/hc/theming_assets/01KRWFEA6YRMTR63MS1PDTH6ZH) !important; }
.icon-link[data-sec-id="900000422923"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE99ZXA1S6HQ2MAV9HH4R) !important; }

/* [900000422903] Electrical のよくある質問 */
.icon-link[data-sec-id="900000422903"]:before{ background-image: url(/hc/theming_assets/01KRWFE94AFQC63J7MM1JMFPG9) !important; }
.icon-link[data-sec-id="900000422903"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEA8B39885VX6T8555AVE) !important; }

/* [900000422863] トラブルシューティング */
.icon-link[data-sec-id="900000422863"]:before{ background-image: url(/hc/theming_assets/01KRWFE6Y6WJEMM644G6M581DM) !important; }
.icon-link[data-sec-id="900000422863"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE6V9HBGP1CQ5HCJ9TH10) !important; }

/* [900000414003] アップデート情報 */
.icon-link[data-sec-id="900000414003"]:before{ background-image: url(/hc/theming_assets/01KRWFE71GS1M84HH5TK1V6SF3) !important; }
.icon-link[data-sec-id="900000414003"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE8D4GA54613VVY3ZYP5J) !important; }


/* ▼ [360000048981] IJCAD Arch / Arch+ */
/* [360000064661] IJCAD Arch/Arch+ 購入前のよくある質問 */
.icon-link[data-sec-id="360000064661"]:before{ background-image: url(/hc/theming_assets/01KRWFE94AFQC63J7MM1JMFPG9) !important; }
.icon-link[data-sec-id="360000064661"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFEA8B39885VX6T8555AVE) !important; }

/* [360000081642] IJCAD Arch/Arch+ アップデート情報 */
.icon-link[data-sec-id="360000081642"]:before{ background-image: url(/hc/theming_assets/01KRWFE71GS1M84HH5TK1V6SF3) !important; }
.icon-link[data-sec-id="360000081642"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE8D4GA54613VVY3ZYP5J) !important; }

/* [360000082321] IJCAD Arch / Arch+ の操作や機能 */
.icon-link[data-sec-id="360000082321"]:before{ background-image: url(/hc/theming_assets/01KRWFEA6YRMTR63MS1PDTH6ZH) !important; }
.icon-link[data-sec-id="360000082321"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE99ZXA1S6HQ2MAV9HH4R) !important; }

/* [360000066741] 【Arch+】 設備設計機能について */
.icon-link[data-sec-id="360000066741"]:before{ background-image: url(/hc/theming_assets/01KRWFE71WPDMAH4501S9PYJM6) !important; }
.icon-link[data-sec-id="360000066741"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE71FB6354ES8X5YSWC4A) !important; }

/* [360000066421] トラブルシューティング - IJCAD Arch */
.icon-link[data-sec-id="360000066421"]:before{ background-image: url(/hc/theming_assets/01KRWFE6Y6WJEMM644G6M581DM) !important; }
.icon-link[data-sec-id="360000066421"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE6V9HBGP1CQ5HCJ9TH10) !important; }

/* [360000066322] IJCAD Arch/Arch+ のカスタマイズ */
.icon-link[data-sec-id="360000066322"]:before{ background-image: url(/hc/theming_assets/01KRWFE6ZA9AMR17HRCQX9R1BZ) !important; }
.icon-link[data-sec-id="360000066322"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE8GCW672ACM60NV73MC1) !important; }

/* [360000081921] IJCAD Arch+ コマンドリファレンス */
.icon-link[data-sec-id="360000081921"]:before{ background-image: url(/hc/theming_assets/01KRWFE8DZ6FVG4JJ4REP595XY) !important; }
.icon-link[data-sec-id="360000081921"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE8KXT2PNWS7GBRG6N1QP) !important; }

/* [360000064982] IJCAD Arch コマンドリファレンス */
.icon-link[data-sec-id="360000064982"]:before{ background-image: url(/hc/theming_assets/01KRWFE6RPVVEZE9R88AD4GH7A) !important; }
.icon-link[data-sec-id="360000064982"]:hover:before{ background-image: url(/hc/theming_assets/01KRWFE6R3PEB3YK3VTJHFQ86V) !important; }

/* --- ヘルプセンター記事用カスタムボックス --- */

/* 1. 共通設定（全ボックス共通） */
.custom-box {
  padding: 15px;
  margin-bottom: 20px;
  border-left: 5px solid; /* デフォルトは左に太線 */
  border-radius: 4px;
  line-height: 1.5;
}

/* 2. パターンA：青い枠（対象製品など） */
.box-scope {
  background-color: #e3f2fd;
  border-color: #2196f3;
  color: #0d47a1;
  font-weight: bold;
  font-size: 1.1em;
}

/* 3. パターンB：グレーの枠（要約など） */
.box-summary {
  background-color: #f7f7f7;
  border: 1px solid #dddddd;
  border-left: none; /* 共通設定の左線を消す */
  color: #333333;
}

/* --- 要約ボックス内の要素設定（タイトル・リスト） --- */
/* タイトル部分（インデントなし） */
.box-summary strong {
  display: block;
  margin-bottom: 10px;
}

.box-summary p {
  margin-top: 0;
  margin-bottom: 5px; /* 下に少し隙間を開ける */
  margin-left: 1.2em; /* アイコン分ずらす */
  padding-left: 0;    /* ★ここが重要：pタグには内側の余白をつけない */
}

.box-summary ul,
.box-summary ol {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 1.2em; /* pタグと同じ開始位置 */
  padding-left: 20px; /* リストマーカー（数字や点）を表示するための領域 */
}

/* リストマーカーの指定 */
.box-summary ul { list-style-type: disc; }    /* 点 */
.box-summary ol { list-style-type: decimal; } /* 数字 */

.box-summary li {
  margin-bottom: 0; /* 項目の下の余白をゼロにする */
}
/* IJCAD ヘルプセンター トップページ改修 追加分 CSS（統合版） */
.container-top {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;

  /* ベース（〜767px：スマホ向け）：左右の余白20px */
  max-width: 100%;
  padding-left: 20px;
  padding-right: 20px;
}

/* タブレット（768px〜1023px）：左右の余白32px */
@media (min-width: 768px) {
  .container-top {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* ノートPC（1024px〜1439px）：左右の余白40px */
@media (min-width: 1024px) {
  .container-top {
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* 大型ディスプレイ（1440px〜）：最大幅1280pxで固定、左右の余白は0
   （1280pxを超えた分は、margin:0 autoによって自動的に左右均等になる） */
@media (min-width: 1440px) {
  .container-top {
    max-width: 1280px;
    padding-left: 0;
    padding-right: 0;
  }
}


/* バナーエリア（.hero-banner-section） */

.hero-banner-section {
  width: 100%;
  /* ヒーローエリアとの間隔40px、下のコンテンツとの間隔60px */
  margin-top: 40px;
  margin-bottom: 60px;
}

/* コンテナ（最大幅1280px・3枚横並び） */
.hero-banner-container {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;

  display: flex;
  justify-content: space-between;
  gap: 40px; /* バナー同士の間隔40px */
}

/* バナー1枚分（3等分で伸縮） */
.hero-banner-item {
  flex: 1;       /* 3等分に伸縮配置（最大幅400px相当） */
  min-width: 0;  /* 画像がはみ出すのを防ぐおまじない */
  display: block;
  text-decoration: none;
}

/* バナー画像：固定pxではなく、100%幅＋高さ自動で滑らかに伸縮させる */
.hero-banner-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

/* スマホ表示（〜767px）：1列縦並びに切り替え */
@media (max-width: 767px) {
  .hero-banner-container {
    flex-direction: column;
    gap: 20px;
    padding: 0 20px;
  }
}




/* 1. ヘッダーエリア */

.site-header {
  width: 100%;
  /* 高さ180pxで固定 */
  height: 180px;
  background-color: #ffffff;

  display: flex;
  align-items: center;         /* ロゴ・バッジを180pxの中で上下中央寄せ */
  justify-content: flex-start; /* 左寄せ */
  /* コンテナ幅(1280px)には縛られず、
     ブラウザの左端から60pxの位置に要素を配置する指定。 */
  padding-left: 60px;
  box-sizing: border-box;
}

/* ロゴとバッジをまとめて横並びにする箱 */
.header-logo-group {
  display: flex;
  align-items: center;  /* ロゴとバッジの上下中央を揃える */
  gap: 30px;             /* ロゴとバッジの間隔30px */
}

/* ロゴ画像 */
.header-logo {
  width: 180px;
  height: 50px;
  /* 画像の縦横比を保ったまま、指定した枠の中に収める指定
     （画像が変形して伸び縮みしてしまうのを防ぐ） */
  object-fit: contain;
}

/* 「ヘルプセンター」バッジ */
.header-badge {
  width: 210px;
  height: 40px;
  border-radius: 6px;
  background-color: #21AEE4;
  color: #ffffff;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 25px;
  font-weight: 700;
  /* イラレ（デザインツール）どおりの文字の収まりを再現するための指定 */
  line-height: 1;

  /* バッジの中の文字を、上下左右ともに完全中央寄せにする指定 */
  display: flex;
  align-items: center;
  justify-content: center;
}


/* 2. ヒーローエリア */

.hero-section {
  width: 100%;
  /* 高さ360pxで固定 */
  height: 360px;

  /* 上下にブランドカラーの罫線（2pt）を引いている */
  border-top: 2pt solid #21aee4;
  border-bottom: 2pt solid #21aee4;

  /* 背景画像がエリア全体をきれいに覆うようにする指定。
     background-image自体はhome_page.hbs側で指定している。 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  align-items: center; /* 内部要素全体を、360pxの高さの中で上下中央寄せ */
  box-sizing: border-box;
}

/* ヒーロー内側のコンテナ（最大幅1280px・左右40pxの余白） */
.hero-container {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;  /* サブタイトル→メインタイトル→検索バーの縦並び */
  justify-content: center;
}

/* サブタイトル（text1）：「ヘルプセンター」 */
.hero-sub-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 25px;
  color: #ffffff;
  /* text1とtext2の間隔は10px */
  margin: 0 0 10px 0;
  line-height: 1.2;
}

/* メインタイトル（text2）：「どのような問題でお困りですか？」 */
.hero-main-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 55px;
  color: #ffffff;
  /* text2と検索バーの間隔は40px */
  margin: 0 0 40px 0;
  line-height: 1.2;
}

/* 検索バーの白い箱 */
.hero-search-bar {
  width: 100%;
  height: 70px;
  border-radius: 35px;
  background-color: #ffffff;
  box-sizing: border-box;
  /* 左側に30pxの内側余白 */
  padding: 0 30px;

  display: flex;
  align-items: center;  /* アイコンと入力欄を上下中央寄せ */
  gap: 15px;             /* アイコンと入力欄の間隔15px */
}

/* 虫眼鏡アイコン（暫定：既存ヘッダーのSVGアイコンを流用） */
.hero-search-bar .search-icon {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  z-index: auto;

  width: 30px;
  height: 30px;
  flex-shrink: 0; /* アイコンが潰れて変形しないようにする指定 */
  /* アイコンがはっきり見えるよう、濃いグレーにしている。 */
  color: #6b6b6b;
}

/* 検索の入力欄について（★不具合修正★） */
.hero-search-bar .hero-search-input {
  flex: 1 1 auto;
  height: 100%;
  display: flex;
  align-items: center;
}

/* 実際の入力欄（文字を打ち込む部分） */
.hero-search-bar input[type="search"] {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  padding: 0;

  font-family: 'Noto Sans JP', sans-serif;
  font-size: 18px;
  /* 入力した文字がはっきり見えるよう、太字（Bold）・黒に近い濃さにしている */
  font-weight: 700;
  color: #1a1a1a;
}

/* プレースホルダー文字（何も入力していないときに薄く表示される文字）の色 */
.hero-search-bar input[type="search"]::placeholder {
  /* 「top_page.pdf」と同じくらいはっきり見えるよう、
     はっきり見えるよう濃いグレー・太字（Bold）にしている。 */
  color: #595959;
  font-weight: 700;
}

/* 送信ボタン：デザインに描かれていないため非表示にしている。
   非表示にしても、入力欄でEnterキーを押せば通常どおり検索される。 */
.hero-search-bar input[type="submit"] {
  display: none;
}


/* 3. カードエリア */
.card-area {
  margin-top: 60px;
}

/* カードのグループ（購入・契約 / セットアップ・ライセンス管理 / */
.card-group {
  margin-top: 50px;
}
.card-group:first-child {
  margin-top: 0;
}


/* 2. グループ見出し（「購入・契約」などの文字）のスタイル */
.card-group-title {
  /* フォントはNoto Sans JPを指定 */
  font-family: 'Noto Sans JP', sans-serif;
  /* 太字（Bold）を指定 */
  font-weight: 700;
  /* 大きい見出し（購入・契約／セットアップ・ライセンス管理／使い方・操作）は36px */
  font-size: 36px;
  /* 文字色：デザインカンプから抽出した色（濃いグレー）を指定している。
     正式なカラーコードが決まっている場合は、こちらの値を差し替える。 */
  color: #606060;
  /* 見出しの下、カード一覧との間隔 */
  margin: 0 0 24px 0;

  /* 見出しの左右位置を、下にある.card-containerと必ず揃えるための指定 */
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
  box-sizing: border-box;
}

/* 「その他」の見出しだけ、文字サイズを32pxに小さくするための修飾クラス */
.card-group-title--small {
  font-size: 32px;
}


/* 3. カードを並べるグリッド（.card-container） */
.card-container {
  /* コンテンツの最大幅（これ以上は広がらない） */
  max-width: 1280px;
  /* 左右中央寄せ */
  margin: 0 auto;
  /* 画面が1280pxより狭いときに、左右の端にできる余白 */
  padding: 0 40px;
  /* paddingを含めてmax-widthを計算するための指定（レイアウト崩れ防止のおまじない） */
  box-sizing: border-box;

  /* ここからグリッドの設定 */
  display: grid;
  /* PC（標準）は3列。「1fr」は「均等な幅」という意味。 */
  grid-template-columns: repeat(3, 1fr);
  /* カードとカードの間隔（縦・横とも45px） */
  gap: 45px;
}

/* タブレットサイズ（画面幅1024px以下）になったら2列に変更 */
@media (max-width: 1024px) {
  .card-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}

/* スマホサイズ（画面幅768px以下）になったら1列（縦積み）に変更 */
@media (max-width: 768px) {
  .card-container {
    grid-template-columns: 1fr;
    gap: 20px;
    /* スマホでは画面が狭いので、左右の余白も40px→20pxに縮める */
    padding: 0 20px;
  }

  /* 見出し側も同じタイミングで左右の余白を20pxに揃える
     （見出しとカードの左端がズレないようにするため） */
  .card-group-title {
    padding-left: 20px;
    padding-right: 20px;
  }
}


/* 4. カードの共通スタイル（.card） */
.card {
  /* カードは<a>タグ（リンク）として実装しているため */
  text-decoration: none;
  color: inherit;

  /* カードの背景は白 */
  background-color: #ffffff;

  /* 角の丸み（角R）は6px */
  border-radius: 6px;

  /* 通常時のドロップシャドウ */
  box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.3);

  /* ---- 通常時↔ホバー時の変化を滑らかにするアニメーション ----
     「transition: all 0.3s ease;」を指定している。 */
  transition: all 0.3s ease;
}

/* カードのマウスオーバー（ホバー）時の挙動 */
.card:hover {
  text-decoration: none;
  transform: translateY(-4px);
  box-shadow: 4px 8px 6px rgba(0, 0, 0, 0.25);
  background-color: rgba(33, 174, 228, 0.08);
}


/* 5.【タイプA】大きいカード（.card-large） */
.card-large {
  /* 高さは165pxで固定 */
  height: 165px;

  /* Flexboxという「要素を並べる仕組み」を使い */
  display: flex;
  flex-direction: column;   /* 上下（縦）に並べる */
  justify-content: center;  /* 縦方向の中央寄せ */
  align-items: center;      /* 横方向の中央寄せ */
  gap: 15px;                /* アイコンとテキストの間隔15px */
}

/* 大きいカードの中のアイコン画像 */
.card-large .card-icon {
  /* アイコンサイズは90×90px */
  width: 90px;
  height: 90px;
  /* 万が一カードの横幅が極端に狭くなっても、
     アイコンが押しつぶされて変形しないようにする指定。 */
  flex-shrink: 0;
}

/* 大きいカードの中のテキスト */
.card-large .card-text {
  font-family: 'Noto Sans JP', sans-serif;
  /* 強調・見出し用のテキストなので、太字(700)を指定 */
  font-weight: 700;
  /* ※要確認：デザインの「25pt」をpxに読み替えている */
  font-size: 25px;
  color: #606060;
  /* テキストは中央寄せ */
  text-align: center;
  /* 「セットアップ・起動時のトラブル」のように文字数が多いカードで */
  white-space: nowrap;
}


/* 6.【タイプB】小さいカード（.card-small） */
.card-small {
  /* 高さは120pxで固定 */
  height: 120px;

  display: flex;
  align-items: center;          /* 上下中央寄せ */
  justify-content: flex-start;  /* 中の要素を左詰めにする */

  /* 左に30px・右に20pxの内側余白（左右で幅を変えているのは、
     画面が狭くなったときに文字が右端ギリギリまで張り付くのを防ぐため） */
  padding: 0 20px 0 30px;

  /* アイコンとテキストの間隔15px */
  gap: 15px;
}

/* 小さいカードの中のアイコン画像 */
.card-small .card-icon {
  /* アイコンサイズは60×60px */
  width: 60px;
  height: 60px;
  /* アイコンが縮まないようにする */
  flex-shrink: 0;
}

/* 小さいカードの中のテキスト */
.card-small .card-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  /* ※要確認：デザインの「20pt」をpxに読み替えている */
  font-size: 20px;
  color: #606060;
  /* テキストは左詰め */
  text-align: left;
  /* テキストが2行になったときに、行間が詰まりすぎないようにする指定 */
  line-height: 1.4;
}

/* ここまで：トップページ カードエリアのCSS */
/* ==================================================================== */


/* ==================================================================== */
/* ■ トップページ改修 */
/* 1. 重要なお知らせ */
/* ==================================================================== */


/* 1. 重要なお知らせ ボックス */
.notice-box {
  /* フォントについて（重要・要確認） */
  font-family: 'Noto Sans JP', sans-serif;
  max-width: 1280px;              /* トップページの最大幅 */
  margin: 0 auto;
  background: #ffffff;
  border: 2px solid #21AEE4;      /* 枠線：水色2px */
  border-radius: 10px;            /* 実測: 角の丸み約10px */
  box-shadow: none;               /* 既存の影を打ち消す */
  overflow: hidden;               /* 角丸から見出しバーの色がはみ出さないように */
}

/* 見出しバー（水色の帯） */
.notice-box .notice-title {
  display: flex;                  /* アイコンと文字を横並びにする */
  align-items: center;            /* 縦位置を中央に揃える */
  height: 80px;                   /* 実測: 約81px */
  margin: 0;
  padding: 0 54px;                /* 実測: 左端からアイコンまで約54px */
  background: #21AEE4;            /* 既存のグラデーションを打ち消す */
  border-bottom: none;            /* 既存の下側の線を打ち消す */
  color: #ffffff;                 /* 文字色：白 */
  font-size: 36px;                /* ★実測33.8px。36px想定。要デザイナー確認 */
  font-weight: 700;
  line-height: 1;
  box-sizing: border-box;
}

/* 見出しバーの中のオレンジ警告アイコン */
.notice-box .notice-icon {
  flex: 0 0 auto;                 /* 幅を縮めない */
  width: 30px;                    /* 実測: 約30px */
  height: 30px;
  margin-right: 44px;             /* 実測: アイコンと文字の間隔 約44px */
}

/* 見出しの文字 */
.notice-box .notice-title-text {
  display: block;
}

/* お知らせ一覧を囲む薄い灰色の枠 */
.notice-box .notice-items {
  margin: 28px 40px 0;            /* 実測: 見出しバーの下28px／左右40px */
  border: 2px solid #F0F1F2;
  display: flex;
  flex-direction: column;
}

/* お知らせ1行ぶん */
.notice-box .notice-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;    /* 旧CSSの space-between（両端に離す）を打ち消す。
                                     将来お知らせ行に要素を足したときに、
                                     意図せず左右に離れてしまうのを防ぐため */
  height: 68px;                   /* 実測: 1行の高さ約68px */
  padding: 0 24px;                /* 実測: 枠の内側から文字まで約24px */
  border-bottom: 2px solid #F0F1F2;  /* 下の区切り線：2pxの実線 */
  color: #333333;
  text-decoration: none;
  box-sizing: border-box;
}

/* 最後の1行は下の区切り線を消す（枠線と二重になるため） */
.notice-box .notice-link:last-child {
  border-bottom: none;
}

/* マウスを乗せたときの薄い水色 */
.notice-box .notice-link:hover {
  background: rgba(33, 174, 228, 0.06);
}

/* お知らせの文字 */
.notice-box .notice-link-text {
  display: block;
  margin-right: 0;                /* 既存の右余白12pxを打ち消す */
  font-size: 24px;                /* ★実測23.3px。24px想定。要デザイナー確認 */
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
}

/* 右下の注記エリア */
.notice-box .notice-footer {
  display: flex;
  justify-content: flex-end;      /* 右寄せ */
  align-items: center;
  padding: 25px 64px;             /* 実測: 上下25px／右64px（お知らせ文字の右端に揃う） */
  border-top: none;               /* 既存の上側の線を打ち消す */
  background: transparent;
}

/* 注記のリンク文字 */
.notice-box .notice-more {
  font-size: 20px;                /* ★実測19.9px。要デザイナー確認（18pxの可能性あり） */
  color: #21AEE4;                 /* 文字色：ブランドの水色 */
  text-decoration: none;
  line-height: 1.4;
  text-align: right;
}

.notice-box .notice-more:hover {
  text-decoration: underline;
}


/* 2. よく読まれているヘルプ記事 */
.top-promoted-articles {
  font-family: 'Noto Sans JP', sans-serif;   /* お知らせボックスと同じ。上のコメント参照 */
  margin-top: 56px;               /* 実測: お知らせボックスの下端から約62px */
}

/* 見出し「よく読まれているヘルプ記事」 */
.top-promoted-articles .title {
  margin: 0 0 28px;               /* 実測: 見出しの下 約29px */
  padding-left: 0;
  color: #21AEE4;
  font-size: 36px;                /* ★実測34.1px。36px想定。要デザイナー確認 */
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

/* 記事の一覧（スマホ幅では1列） */
.top-promoted-articles .article-list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 記事1件ぶんの外側 */
.top-promoted-articles .promoted-articles-item {
  padding: 0;                     /* 既存の右余白30pxを打ち消す */
  overflow: hidden;
  white-space: nowrap;
  max-width: 100%;
}

/* 9件目以降は表示しない（デザインは8件） */
.top-promoted-articles .promoted-articles-item:nth-of-type(n+9) {
  display: none;
}

/* 記事へのリンク1行ぶん（水色の下線＋右端にオレンジの三角） */
.top-promoted-articles .article-list .promoted-articles-item a {
  /* ここは display: flex にしてはいけない */
  display: block;
  height: 58px;                   /* 下線2pxを足して1行60px（実測どおり） */
  line-height: 58px;              /* 高さと同じ値にして、文字を行の中央に置く */
  padding: 0 32px 0 20px;         /* 右32pxは三角矢印のスペース／左は実測約22px */
  border-bottom: none;            /* ★下線はこの<a>ではなく、外側の<li>に付けている。
                                     理由：マウスを乗せたときに文字と矢印だけを
                                     右に5px動かしたいため。この<a>に下線が
                                     付いていると、下線まで一緒に動いてしまう */
  color: #333333;
  font-size: 20px;                /* ★実測18.2px。20px想定。要デザイナー確認 */
  text-decoration: none;
  overflow: hidden;               /* はみ出した文字を隠す */
  text-overflow: ellipsis;        /* 長いタイトルは末尾を「…」で省略 */
  white-space: nowrap;            /* 1行に収める（折り返さない） */
  position: relative;             /* 三角矢印の位置決めの基準にする */
  box-sizing: border-box;
  /* マウスを乗せたときの色の変化と移動を、0.2秒かけてなめらかに行う */
  transition: transform 0.2s ease, color 0.2s ease;
}

/* 水色の下線。行の外側（<li>）に付けている */
.top-promoted-articles .article-list .promoted-articles-item {
  border-bottom: 2px solid #21AEE4;
}

/* 旧CSSは「最後の1件だけ下線を消す」「PC幅では灰色の線を足す」という
   指定になっていたため、それを打ち消す（下線は全8行に表示する） */
.top-promoted-articles .article-list .promoted-articles-item:last-child a {
  border-bottom: none;
}

/* マウスを乗せたときの動き */
.top-promoted-articles .article-list .promoted-articles-item a:hover {
  transform: translateX(5px);
  color: #21AEE4;
}

/* 三角矢印も一緒に水色に変わる
   （矢印は上の a:hover と一緒に右へ5px動く） */
.top-promoted-articles .article-list .promoted-articles-item a:hover:after {
  border-left-color: #21AEE4;
}

/* 右端のオレンジの三角矢印（▶） */
.top-promoted-articles .article-list .promoted-articles-item a:after {
  content: "";
  display: block;
  position: absolute;
  right: 9px;                     /* 実測: 右端から約9px */
  top: 50%;
  width: 0;
  height: 0;
  border: none;                   /* 既存の枠線指定を打ち消す */
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 14px solid #F7AC01;   /* 実測: 三角の幅 約14px */
  transform: translateY(-50%);    /* 既存の回転指定を打ち消す */
  /* マウスを乗せたときにオレンジ→水色へ、0.2秒かけて変化させる */
  transition: border-left-color 0.2s ease;
}

/* タブレット縦（768〜1023px）は1列のまま */
@media (min-width: 768px) and (max-width: 1023px) {
  .top-promoted-articles .promoted-articles-item {
    min-width: 100%;
    max-width: 100%;
  }
}

/* ノートPC以上（1024px〜）で2列にする */
@media (min-width: 1024px) {
  .top-promoted-articles .article-list {
    flex-direction: row;
    column-gap: 40px;             /* 実測: 左右の列の間隔40px */
    row-gap: 0;
  }
  .top-promoted-articles .promoted-articles-item {
    min-width: calc(50% - 20px);  /* 間隔40pxの半分ずつを引いて2列 */
    max-width: calc(50% - 20px);  /* 1280px幅のとき1列=620px（実測どおり） */
  }
}


/* 3. スマートフォン（〜767px）用の調整 */
@media (max-width: 767px) {

  .notice-box {
    border-radius: 8px;
  }
  .notice-box .notice-title {
    height: auto;
    min-height: 56px;
    padding: 12px 16px;
    font-size: 20px;
  }
  .notice-box .notice-icon {
    width: 24px;
    height: 24px;
    margin-right: 12px;
  }
  .notice-box .notice-items {
    margin: 16px 16px 0;
  }
  .notice-box .notice-link {
    height: auto;
    min-height: 56px;
    padding: 12px 16px;
  }
  .notice-box .notice-link-text {
    font-size: 15px;
    white-space: normal;          /* スマホでは2行に折り返す */
    word-break: break-word;
  }
  .notice-box .notice-footer {
    padding: 14px 16px;
  }
  .notice-box .notice-more {
    font-size: 12px;
  }

  .top-promoted-articles {
    margin-top: 32px;
  }
  .top-promoted-articles .title {
    margin-bottom: 16px;
    font-size: 22px;
  }
  .top-promoted-articles .article-list .promoted-articles-item a {
    height: auto;
    min-height: 48px;
    /* 上下の余白12px＋文字の行の高さ24px＋12px＝ちょうど48pxになり、
       文字が上下中央に来る（PC幅の line-height: 58px を打ち消す指定） */
    line-height: 24px;
    padding: 12px 28px 12px 4px;
    font-size: 15px;
  }
  .top-promoted-articles .article-list .promoted-articles-item a:after {
    right: 4px;
    border-top-width: 6px;
    border-bottom-width: 6px;
    border-left-width: 10px;
  }
}

/* 4. お問い合わせ／サポート（カンプ最下部のグレーの帯） */
.contact-section {
  font-family: 'Noto Sans JP', sans-serif;
  /* カードエリア（「その他」の最終行）との間の余白 */
  margin-top: 100px;
  padding: 54px 20px 48px;        /* 実測: 上54px／下48px。左右20pxは最小の余白 */
  background: #F0F1F2;
}

/* 帯の中身。最大幅1240pxで中央寄せ */
.contact-inner {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

/* 節の見出し「お問い合わせ / サポート」 */
.contact-section-title {
  margin: 0 0 40px;               /* 実測: 見出しの下 約40px */
  padding: 0;
  color: #333333;                 /* 他の見出しは水色だが、ここは黒文字 */
  font-size: 36px;                /* ★実測34.1px。36px想定。要デザイナー確認 */
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

/* カードを並べる枠（PC幅では横並び） */
.contact-cards {
  display: flex;
  flex-direction: row;
  align-items: stretch;           /* 同じ段のカードの高さを揃える */
  gap: 40px;                      /* 実測: カードの間隔40px */
}

/* 2段目（フォーラム1枚だけ）は中央寄せ */
.contact-cards--single {
  justify-content: center;
}

/* カード1枚ぶん（全体がリンクになっている） */
.contact-card {
  display: flex;
  align-items: center;            /* アイコンと文字を上下中央で揃える */
  flex: 1 1 calc(50% - 20px);     /* 間隔40pxの半分を引いて2列 */
  max-width: calc(50% - 20px);    /* 1240px幅のとき1枚=600px（実測どおり） */
  gap: 48px;                      /* 実測: アイコンと文字の間隔48px */
  min-height: 180px;              /* 実測: 1段目のカードの高さ */
  padding: 36px 45px;             /* 実測: 左右45px。上下は文字量に応じて伸びる */
  background: #ffffff;
  border-radius: 8px;             /* 実測: 角の丸み約8px */
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.12);
  /* ※アイコンの色は、SVGファイル自体に含まれている（この指定では変わらない）。
     この color は、見出し・説明文以外の文字が入った場合の既定色として残している */
  color: #21AEE4;
  text-decoration: none;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

/* マウスを乗せたとき（カードエリアと同じ動きに揃えている） */
.contact-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
  text-decoration: none;
}

/* アイコンを置く場所 */
.contact-card-icon {
  display: flex;
  flex: 0 0 90px;                 /* 幅90pxで固定（縮まない） */
  width: 90px;
  align-items: center;
  justify-content: center;
}

/* アイコン本体（SVG画像） */
.contact-card-icon img,
.contact-card-icon svg {
  display: block;
  width: 90px;
  height: auto;
}

/* 文字のかたまり（見出し＋説明文） */
.contact-card-body {
  display: block;
  flex: 1 1 auto;
  min-width: 0;                   /* 長い説明文がはみ出さないように */
}

/* カードの見出し */
.contact-card-title {
  display: block;
  color: #21AEE4;
  font-size: 30px;                /* ★実測28.3px。30px想定。要デザイナー確認 */
  font-weight: 700;
  line-height: 1.35;
}

/* カードの説明文 */
.contact-card-desc {
  display: block;
  margin-top: 6px;                /* 実測: 見出しとの間隔 約6px */
  color: #333333;
  font-size: 24px;                /* ★実測21.6px。24px想定。要デザイナー確認 */
  font-weight: 400;
  line-height: 1.4;
}

/* 1段目と2段目を区切る線 */
.contact-divider {
  height: 2px;                    /* 実測: 2px */
  margin: 40px 0;                 /* 実測: 上下に約40px */
  background: #99AEAE;            /* 実測: グレーがかった緑 */
}

/* フォーラムのカードだけの「控えめ版」 */
.contact-card--sub {
  min-height: 150px;              /* 実測: 2段目のカードの高さ */
  color: #99AEAE;                 /* アイコンをグレーにする */
}

.contact-card--sub .contact-card-title {
  color: #333333;                 /* 見出しを黒文字に */
  font-size: 26px;                /* ★実測23.5px。要デザイナー確認 */
}

.contact-card--sub .contact-card-desc {
  font-size: 22px;                /* ★実測19.4px。要デザイナー確認 */
}


/* タブレット縦（〜1023px）：カードを縦積みにする */
@media (max-width: 1023px) {
  .contact-section {
    margin-top: 72px;             /* PC幅の100pxから縮める */
  }
  .contact-cards {
    flex-direction: column;
    gap: 24px;
  }
  .contact-card {
    flex: 1 1 auto;
    max-width: 100%;
    min-height: 0;                /* 高さの下限をなくし、文字量に合わせる */
  }
  .contact-card--sub {
    min-height: 0;
  }
  .contact-section-title {
    font-size: 30px;
  }
  .contact-card-title,
  .contact-card--sub .contact-card-title {
    font-size: 26px;
  }
  .contact-card-desc,
  .contact-card--sub .contact-card-desc {
    font-size: 20px;
  }
}

/* スマートフォン（〜767px） */
@media (max-width: 767px) {
  .contact-section {
    margin-top: 48px;             /* スマホ幅ではさらに縮める */
    padding: 32px 20px;
  }
  .contact-section-title {
    margin-bottom: 24px;
    font-size: 22px;
  }
  .contact-cards {
    gap: 16px;
  }
  .contact-card {
    gap: 16px;
    padding: 20px;
    border-radius: 6px;
  }
  .contact-card-icon,
  .contact-card-icon img,
  .contact-card-icon svg {
    flex-basis: 56px;
    width: 56px;
  }
  .contact-card-title,
  .contact-card--sub .contact-card-title {
    font-size: 18px;
  }
  .contact-card-desc,
  .contact-card--sub .contact-card-desc {
    margin-top: 4px;
    font-size: 14px;
  }
  .contact-divider {
    margin: 24px 0;
  }
}

/* 5. バナーエリアのマウスオーバー */
.hero-banner-item img {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* マウスを乗せたとき：5px上に浮き上がり、影が出て立体的に見える */
.hero-banner-item:hover img {
  transform: translateY(-5px);
  box-shadow: 0 12px 20px -2px rgba(0, 0, 0, 0.4);
}

/* 6. バナーエリアの幅を「重要なお知らせ」の幅に揃える */
.hero-banner-section {
  box-sizing: border-box;
  padding-left: 20px;             /* ベース（〜767px：スマホ） */
  padding-right: 20px;
}

@media (min-width: 768px) {       /* タブレット縦 */
  .hero-banner-section {
    padding-left: 32px;
    padding-right: 32px;
  }
}

@media (min-width: 1024px) {      /* ノートPC */
  .hero-banner-section {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (min-width: 1440px) {      /* 大型ディスプレイ：余白0で1280px固定 */
  .hero-banner-section {
    padding-left: 0;
    padding-right: 0;
  }
}

/* バナーを並べる箱の余白は0にして、最大幅1280pxをいっぱいに使う
   （上の外枠が余白を持つので、二重に余白が付かないようにする） */
.hero-banner-container {
  padding-left: 0;
  padding-right: 0;
}

/* 7. ヒーロー検索ボックスの「選択中」表示（キーボード操作対応） */
.hero-search-bar {
  transition: box-shadow 0.2s ease;
}

/* 検索欄が選択されたとき：白い箱の外側に水色の光彩を出す。
   box-shadow の「0 0 0 3px」は、ぼかしの無い3pxの縁取りという意味 */
.hero-search-bar:focus-within {
  box-shadow: 0 0 0 3px rgba(33, 174, 228, 0.45);
}

/* 8. サイドバーの階層対応（記事ページ左側のメニュー） */
.category_menu_frame .sb-toggle {
  display: block;
  flex: 0 0 auto;                 /* 幅を縮めない */
  position: relative;
  width: 1.3em;
  height: 1.5em;
  cursor: pointer;
}

/* 三角の形。枠線だけで三角を描く書き方 */
.category_menu_frame .sb-toggle:before {
  content: "";
  position: absolute;
  left: 0.3em;
  top: 0.75em;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #666666;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
}

/* 開いているときは三角を下向きに回転させる */
.category_menu_frame .sb-toggle.open:before {
  transform: translateY(-50%) rotate(90deg);
}

/* 中身が無い項目の開閉ボタンは、見えない状態にする。
   要素自体は残すので、他の行と文字の開始位置が揃う */
.category_menu_frame .sb-toggle--empty {
  visibility: hidden;
  pointer-events: none;           /* クリックしても反応しない */
  cursor: default;
}

/* (2) 見出しを「開閉ボタン＋文字リンク」の横並びにする */
.category_menu_frame .category_title,
.category_menu_frame .section_title {
  display: flex;
  align-items: flex-start;
  padding-left: 0;                /* 既存の左余白1.3em（飾りの三角用）を打ち消す */
}

/* 文字リンク側。長い名前は折り返す */
.category_menu_frame .category_title > a,
.category_menu_frame .section_title > a {
  flex: 1 1 auto;
  min-width: 0;                   /* 長い名前がはみ出さないように */
}

/* (3) 既存の「飾りの三角」を消す */
.category_menu_frame .section_title:before {
  content: none;
}

/* (4) 階層が深くなるごとに字下げする */
.category_menu_frame .section_list {
  padding-left: 1.3em;            /* 開閉ボタン1つ分だけ内側へ寄せる */
}

/* 階層をさらに分かりやすくするための調整 */
.category_menu_frame .section_title > a {
  font-weight: 400;
}

/* 現在開いているセクションだけ、色と太さで目立たせる
   （どこを見ているのか分かるようにするため） */
.category_menu_frame .section_item.current > .section_title > a {
  font-weight: 700;
  color: #21AEE4;
}

/* (5) グループ見出し（仮実装） */
.category_menu_frame .sb-group {
  margin-bottom: 24px;
}

.category_menu_frame .sb-group:last-child {
  margin-bottom: 0;
}

/* グループ見出し（例：「購入・契約」） */
.category_menu_frame .sb-group-title {
  margin: 0 0 8px;
  padding: 0;
  color: #333333;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

/* 「その他」グループだけ控えめな見た目にする */
.category_menu_frame .sb-group--other .sb-group-title {
  font-size: 14px;
}

.category_menu_frame .sb-group--other .category_title {
  font-size: 12px;
  font-weight: 400;
}

.category_menu_frame .sb-group--other .category_item {
  margin-top: 4px;
}

/* サイドナビの枠：高さの下限とスクロールの指定を打ち消す */
.section-nav-sidebar .article-category-menu {
  min-height: 0;
  overflow-y: visible;

  /* サイドナビの背景：うすいグレー（仮適用） */
  padding: 0;
  box-sizing: border-box;
}

/* 高さの固定（300px）と高さ0を打ち消し、中身の分だけ伸びるようにする */
.section-nav-sidebar .article-category-menu .category_menu_frame {
  height: auto;
}

/* スマホ幅（〜767px）：サイドバーを本文の上に積む（横並びにしない） */
@media (max-width: 767px) {
  .category-container,
  .section-container {
    flex-direction: column;
  }
}


/* ==================================================================== */
/* 10. 下層ページ（L2以降）のデザイン ★仮実装 */
/* ==================================================================== */


/* 10-1. 下層ページ用コンテナ（.container-sub） */
.container-sub {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding-left: 20px;             /* ベース（〜767px：スマホ） */
  padding-right: 20px;

  /* ★実測値★ 青帯の下からパンくずリストまでの余白 約42px */
  padding-top: 42px;

  /* ページ下部（お問い合わせ欄との間）の余白 */
  padding-bottom: 60px;
}

@media (min-width: 768px) {       /* タブレット縦 */
  .container-sub {
    padding-left: 32px;
    padding-right: 32px;
  }
}

@media (min-width: 1024px) {      /* ノートPC */
  .container-sub {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (min-width: 1440px) {      /* 大型ディスプレイ：1440pxで固定 */
  .container-sub {
    max-width: 1440px;
    padding-left: 0;
    padding-right: 0;
  }
}


/* 10-2. 2カラムレイアウト（.layout-2col） */
.layout-2col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ノートPC以上（1024px〜）：横並びの2カラム */
@media (min-width: 1024px) {
  .layout-2col {
    flex-direction: row;
    align-items: flex-start;      /* 高さを揃えず、それぞれ上から始める */
  }
  .layout-2col > .sidebar {
    flex: 0 0 30%;
    /* 幅はデザインサンプルの実測値に合わせている */
    max-width: 358px;             /* 実測：約358px */
    padding: 0;                   /* グレー枠自体が幅を持つため、外側の余白は0 */
    box-sizing: border-box;
  }
  .layout-2col > .main-content {
    flex: 0 0 70%;
    max-width: 1008px;            /* 70% ＝ 最大1008px */
    padding-left: 40px;           /* 左40px・右0（中身は968px） */
    padding-right: 0;
    box-sizing: border-box;
    min-width: 0;                 /* 中身がはみ出さないようにするおまじない */
  }
}


/* 10-3. L2以降用の青い帯（検索窓＋お問い合わせボタン）★要デザイナー確認 */
.sub-header {
  width: 100%;
  min-height: 180px;              /* 実測：約180px */
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, #21AEE4 0%, #7AD3F0 100%);
  border-bottom: 4px solid #21AEE4;  /* 実測：帯の下の水色の線 */
  padding: 20px;
  box-sizing: border-box;
}

/* 帯の中身。下層ページと同じ最大幅1440pxで中央寄せ */
.sub-header-inner {
  display: flex;
  align-items: center;
  gap: 60px;                      /* 実測：検索窓とボタンの間隔 約61px */
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

/* トップページでは隠す */
.tpl_home .sub-header {
  display: none;
}

/* 検索窓（白い角丸の箱） */
.sub-header-search {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  height: 58px;                   /* 実測：約58px */
  padding: 0 24px;
  background: #ffffff;
  border-radius: 29px;            /* 高さの半分＝左右が半円になる */
  box-sizing: border-box;
}

/* 虫眼鏡アイコン */
.sub-header-search .sub-header-search-icon {
  flex: 0 0 auto;
  color: #999FA6;
}

/* {{search}} が作るフォーム部分。幅いっぱいに広げる */
.sub-header-search .sub-header-search-input {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  height: 100%;
  margin: 0;
}

/* 入力欄そのもの。枠線を消して、白い箱と一体に見せる */
.sub-header-search input[type="search"] {
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  color: #333333;
}

.sub-header-search input[type="search"]::placeholder {
  color: #999FA6;
}

/* 送信ボタンはデザインに無いので隠す。
   入力欄でEnterキーを押せば通常どおり検索される */
.sub-header-search input[type="submit"] {
  display: none;
}

/* キーボード操作対応 */
.sub-header-search {
  transition: box-shadow 0.2s ease;
}
.sub-header-search:focus-within {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.65);
}

/* お問い合わせボタン（PDFではオレンジ。★色は検討中★） */
.sub-header-contact {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 210px;                   /* 実測：約210px */
  height: 60px;                   /* 実測：約60px */
  padding: 0 24px;
  background: #F7AC01;            /* ★オレンジ。変更の可能性あり */
  border-radius: 30px;
  color: #ffffff;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;            /* 文字を折り返さない */
  transition: all 0.2s ease;
}

.sub-header-contact:hover {
  background: #e09b21;
  color: #ffffff;
  text-decoration: none;
}

/* スマホ幅：検索窓とボタンを縦に積む */
@media (max-width: 767px) {
  .sub-header {
    padding: 14px 20px;
  }
  .sub-header-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .sub-header-search {
    max-width: 100%;
  }
  .sub-header-contact {
    height: 40px;
  }
}


/* 10-4. L2以降用「お問い合わせ / サポート」欄（.sub-contact） */
.sub-contact {
  font-family: 'Noto Sans JP', sans-serif;
  width: 100%;
  padding: 48px 0;                /* 実測：上下とも約48px */
  background: #F0F1F2;
  box-sizing: border-box;
}

/* ★トップページでは隠す★（トップページには専用版があるため） */
.tpl_home .sub-contact {
  display: none;
}

/* 帯の中身。最大幅1440pxで中央寄せ、左右に30pxの余白 */
.sub-contact-inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 30px;                /* 左右の内側余白30px */
  box-sizing: border-box;
}

/* 見出し「お問い合わせ / サポート」 */
.sub-contact-title {
  margin: 0 0 24px;
  padding: 0;
  color: #333333;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

/* ボタンを並べる枠（ベース＝スマホ幅は縦積み） */
.sub-contact-buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ボタン1枚ぶん（全体がリンクになっている） */
.sub-contact-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 180px;              /* 高さ180px */
  padding: 16px 20px;
  background: #ffffff;
  border: 2px solid #21AEE4;
  border-radius: 6px;
  color: #21AEE4;
  text-decoration: none;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

/* マウスを乗せたとき（トップページのカードと同じ動きに揃えている） */
.sub-contact-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
  text-decoration: none;
}

/* アイコン。幅の指定が無いため暫定値（★要デザイナー確認）
   トップページは90pxだが、こちらはボタンが小さいので控えめにしている */
.sub-contact-icon {
  flex: 0 0 auto;
  display: block;
  width: 60px;
  height: auto;
}

/* 文字のかたまり */
.sub-contact-body {
  display: block;
}

/* ボタンの名前 */
.sub-contact-label {
  display: block;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}

/* 説明文（ボタンのラベルの下に出る小さい文字）の見た目 */
.sub-contact-desc {
  display: block;
  margin-top: 4px;
  color: #333333;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

/* ▼ フォーラムのボタンだけ控えめな見た目（トップページと同じ考え方）
     アイコンがグレー、文字が黒、枠線もグレー */
.sub-contact-btn--sub {
  border-color: #99AEAE;
  color: #333333;
}

/* タブレット以上（768px〜）：3列に並べる */
@media (min-width: 768px) {
  .sub-contact-buttons {
    flex-direction: row;
    /* ★「横並び下揃え（align-items: flex-end）」
       フォーラムだけ高さが低いので、下辺を揃えて配置する */
    align-items: flex-end;
    gap: 60px;                    /* ボタン間隔60px（固定） */
  }
  /* 高さはデザインサンプルの実測値に合わせている */
  .sub-contact-btn--1,
  .sub-contact-btn--2 {
    flex: 0 1 40%;
    max-width: 504px;             /* 幅40%・最大504px */
    min-height: 143px;            /* 実測：約143px */
  }
  .sub-contact-btn--3 {
    flex: 0 1 20%;
    max-width: 252px;             /* 幅20%・最大252px */
    min-height: 120px;            /* 実測：約120px */
  }
}


/* 10-5. 下層ページ本文のカードを3列にする　★仮実装 */
@media (min-width: 768px) {

  /* カードの並びを「必ず3列」にするための指定 */
  .main-content .section-tree {
    display: grid;
    grid-template-columns: repeat(3, 1fr);   /* 必ず3列 */
    gap: 40px;                               /* カード間のギャップ40px */
    margin-left: 0;                          /* 既存の負の余白を打ち消す */
    margin-right: 0;
  }

  /* カード1枚ぶん。既存の「20%（5列）」と個別の余白を打ち消す */
  .main-content .section-tree .section {
    min-width: 0;
    width: auto;
    max-width: none;
    margin: 0;
  }
}

/* ==================================================================== */
/* 10-6. 下層ページのデザイン調整 ★仮実装 */
/* ==================================================================== */


/* (A) ページ見出しと補助ラベル */

.sub-page-header {
  margin: 0 0 28px;
  padding: 0;
}

/* ページの見出し（例「使い方・操作」） */
.sub-page-title {
  margin: 0;
  padding: 0;
  color: #333333;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 32px;              /* ★実測からの暫定値（要デザイナー確認） */
  font-weight: 700;
  line-height: 1.4;
}

/* 補助ラベル（例「■ IJCAD 汎用 / LT / STD / PRO」） */
.sub-page-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  color: #666666;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;              /* ★暫定値（要デザイナー確認） */
  font-weight: 400;
  line-height: 1.4;
}

/* オレンジの■ */
.sub-page-label:before {
  content: "";
  flex: 0 0 auto;
  display: block;
  width: 10px;
  height: 10px;
  background-color: #F7AC01;
}


/* (B) サイドナビの「独立したパーツ」表現 */
.section-nav-sidebar {
  background-color: #F0F1F2;
  border-radius: 6px;
  padding: 20px;
  box-sizing: border-box;
}

/* 横並びのとき（1024px〜）は、左右40pxの余白を持つ
   グレーの列にし、右端に区切り線を引く */
@media (min-width: 1024px) {
  .layout-2col > .section-nav-sidebar {
    border-radius: 0;
    border-right: 1px solid #D7D7D7;   /* デザインの縦区切り線 */
    /* 内側の余白はデザインの実測値に合わせている */
    padding: 20px;
  }

  /* 本文の左余白。デザインではサイドナビの区切り線から
     本文の左端まで約85px空いている（実測） */
  .layout-2col > .main-content {
    padding-left: 85px;
  }
}

/* 各項目を「白い箱」にする */
.section-nav-sidebar .category_title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;               /* 実測：約58px */
  background-color: #ffffff;
  border: 1px solid #E4E5E6;
  border-radius: 4px;
  padding: 8px 12px;
  box-sizing: border-box;
}

/* 箱を隙間なくつなげる */
.section-nav-sidebar .category_item {
  margin-top: -1px;
}

.section-nav-sidebar .category_title {
  border-radius: 0;
}

/* サイドナビのアイコン画像の大きさ */
.category_menu_frame .sb-icon {
  flex: 0 0 auto;
  display: block;
  width: 26px;                    /* ★暫定値（要デザイナー確認） */
  height: 26px;
}

/* 記事ページのサイドバーでも、アイコンと文字が横に並ぶようにする
   （記事ページの見出しは display:flex の指定が無かったため） */
.category_menu_frame .category_title {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 項目の文字。デザインでは太字ではなく通常の太さに見える */
.section-nav-sidebar .category_title > a {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;                /* ★暫定値（要デザイナー確認） */
  font-weight: 400;
  line-height: 1.4;
}

/* グループ見出し（購入・契約 等） */
.section-nav-sidebar .sb-group-title {
  font-size: 16px;                /* 実測：約15〜16px */
  font-weight: 700;
  color: #333333;
  margin-bottom: 10px;
}

/* 「その他」グループは、アイコンが無く文字も小さい詰まった一覧 */
.section-nav-sidebar .sb-group--other .category_title {
  min-height: 40px;
  padding: 6px 12px;
}
.section-nav-sidebar .sb-group--other .category_title > a {
  font-size: 13px;
}

/* グループ見出しはグレーの上にそのまま置く（白い箱にしない） */
.section-nav-sidebar .sb-group-title {
  background: transparent;
  border: none;
  padding: 0;
}

/* 開いたセクションの一覧は、白い箱の外に出す（デザインどおり） */
.section-nav-sidebar .section_title {
  background: transparent;
  border: none;
}


/* (C) 本文のカード：白いカード＋左端の製品カラー */
@media (min-width: 768px) {

  .main-content .section-tree .section a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;             /* 実測：カードの高さ約90px */
    padding: 12px 16px;           /* 既存の上余白45px（アイコン用）を打ち消す */
    background-color: #ffffff;
    border: 1px solid #E4E5E6;    /* 既存の 1px solid 水色 を上書き */
    border-left: 3px solid #21AEE4;  /* ★既定は水色（製品以外のカテゴリ） */
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    color: #333333;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
  }

  /* アイコンを消す（デザインどおり・8-3の方針） */
  .main-content .section-tree .section a:before {
    content: none;
  }
}

/* 製品別のカラー（既存サイトの5色をそのまま使用） */
.main-content .section-tree .section a[data-product="pf"] {     /* IJCAD */
  border-left-color: #e09b21;
}
.main-content .section-tree .section a[data-product="ele"] {    /* IJCAD Electrical */
  border-left-color: #c45176;
}
.main-content .section-tree .section a[data-product="mech"] {   /* IJCAD Mechanical */
  border-left-color: #3173aa;
}
.main-content .section-tree .section a[data-product="civil"] {  /* IJCAD Civil */
  border-left-color: #a6ab4f;
}
.main-content .section-tree .section a[data-product="arch"] {   /* IJCAD Arch */
  border-left-color: #148c55;
}

/* マウスオーバー：トップページのカードと同じ動きに統一 */
.main-content .section-tree .section a {
  transition: all 0.3s ease;
}

.main-content .section-tree .section a:hover,
.main-content .section-tree .section a[data-cat-id]:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
  /* 既存の指定（青塗りつぶし・製品別の色）を打ち消す。
     相手が !important のため、こちらも !important で指定している */
  background-color: rgba(33, 174, 228, 0.08) !important;
  border-color: #E4E5E6 !important;
  color: #333333;
  text-decoration: none;
}

/* ホバー時も左端の製品カラーは保つ */
.main-content .section-tree .section a:hover {
  border-left-color: #21AEE4 !important;
}
.main-content .section-tree .section a[data-product="pf"]:hover    { border-left-color: #e09b21 !important; }
.main-content .section-tree .section a[data-product="ele"]:hover   { border-left-color: #c45176 !important; }
.main-content .section-tree .section a[data-product="mech"]:hover  { border-left-color: #3173aa !important; }
.main-content .section-tree .section a[data-product="civil"]:hover { border-left-color: #a6ab4f !important; }
.main-content .section-tree .section a[data-product="arch"]:hover  { border-left-color: #148c55 !important; }

/* ホバー時にアイコンが復活しないように打ち消す */
.main-content .section-tree .section a:hover:before {
  content: none;
}

/* ここまで：トップページ改修（お知らせ／よく読まれ／お問い合わせ） */
/* ==================================================================== */
/* ==================================================================== */
/* ■ 狭い画面での並び順（本文を先に、サイドナビを後に） */

@media (max-width: 1023px) {

  /* 下層ページ（L2・L3以降）の2カラム枠 */
  .layout-2col {
    flex-direction: column-reverse;
  }

}

/* ここまで：狭い画面での並び順 */
/* ==================================================================== */

/* ==================================================================== */
/* ■ 記事ページも狭い画面では上下に積む */

@media (max-width: 1023px) {

  /* 記事ページの「サイドナビ＋本文」を囲む枠。
     縦に積み、順番を逆にして「本文が上・サイドナビが下」にする */
  .article-container {
    flex-direction: column-reverse;
  }

  /* サイドナビ。32%の幅指定を打ち消して横幅いっぱいにする */
  .article-sidebar {
    max-width: 100%;
    flex: 0 0 auto;
  }

  /* 本文。見切れの直接の原因だった min-width: 640px を打ち消す */
  .article {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: 0 0 auto;
  }

}

/* ここまで：記事ページも狭い画面では上下に積む */
/* ==================================================================== */

/* ==================================================================== */
/* ■ 記事一覧の行スタイル／補助ラベルの■の色 */
/* デザインデータ「content_L4 .png」（記事一覧＝記事本文の1つ前のページ） */
.sub-page-label:before {
  background-color: #21AEE4;
}

/* 製品セクションの中にいる場合だけ、その製品の色にする。
   data-product という目印は script.js が付ける */
.sub-page-label[data-product="pf"]:before    { background-color: #e09b21; }  /* IJCAD 汎用 */
.sub-page-label[data-product="ele"]:before   { background-color: #c45176; }  /* Electrical */
.sub-page-label[data-product="mech"]:before  { background-color: #3173aa; }  /* Mechanical */
.sub-page-label[data-product="civil"]:before { background-color: #a6ab4f; }  /* Civil */
.sub-page-label[data-product="arch"]:before  { background-color: #148c55; }  /* Arch */


/* (B) 記事一覧（記事本文の1つ前のページ）の行スタイル */
.main-content .article-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 1件ぶんの行 */
.main-content .article-list .article-list-item {
  /* 縦棒・星マーク・タイトルを横一列に並べ、上下中央で揃える */
  display: flex;
  align-items: center;
  gap: 12px;

  min-height: 60px;               /* 実測：約60px */
  margin: 0;
  padding: 0;

  /* 下の細い区切り線。デザインに合わせて薄い色にする */
  border-bottom: 1px solid #E4E5E6;
}

/* 行の左端の縦棒（▎） */
.main-content .article-list .article-list-item:before {
  content: "";
  flex: 0 0 auto;                 /* 縮まないように固定する */
  display: block;
  width: 5px;                     /* 実測：約5px */
  height: 18px;                   /* 実測：約18px */
  background-color: #21AEE4;      /* 既定＝水色 */
}

/* 製品セクションの中では、縦棒がその製品の色になる。
   目印（data-product）は一覧全体（ul）に script.js が付ける */
.main-content .article-list[data-product="pf"]    .article-list-item:before { background-color: #e09b21; }
.main-content .article-list[data-product="ele"]   .article-list-item:before { background-color: #c45176; }
.main-content .article-list[data-product="mech"]  .article-list-item:before { background-color: #3173aa; }
.main-content .article-list[data-product="civil"] .article-list-item:before { background-color: #a6ab4f; }
.main-content .article-list[data-product="arch"]  .article-list-item:before { background-color: #148c55; }

/* 記事タイトルの文字。デザインでは黒い通常の文字（リンクの青ではない） */
.main-content .article-list .article-list-link {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;                /* ★暫定値（要デザイナー確認） */
  font-weight: 400;
  line-height: 1.5;
  color: #333333;
  text-decoration: none;
}

/* マウスを乗せたとき。トップページのおすすめ記事と同じ「青くなる」動きに
   揃えている */
.main-content .article-list .article-list-link:hover {
  color: #21AEE4;
  text-decoration: none;
}

/* ここまで：記事一覧の行スタイル／補助ラベルの■の色 */
/* ==================================================================== */

/* ==================================================================== */
/* ■ 記事ページ・検索結果ページの上余白／左余白47px */
.tpl_article .container,
.tpl_search .container {
  padding-top: 42px;    /* L2/L3ページ（.container-sub）と同じ値 */
}

/* ここは打ち消し（重要） */
.tpl_article .article-body .container {
  padding-top: 0;
}


/* (D) 本文の左余白 */
@media (min-width: 1024px) {
  .layout-2col > .main-content {
    padding-left: 85px;
  }
}

/* ここまで：記事ページ・検索結果ページの上余白／左余白47px */
/* ==================================================================== */

/* ==================================================================== */
/* ■ 記事ページのパンくずが折り返される問題 */
/* 記事本文ページで、パンくずリストが2行に折り返されてしまう */
.tpl_article .sub-nav {
  /* 縦に並べ、順番を逆にする（見た目：翻訳が上、パンくずが下） */
  flex-direction: column-reverse;

  /* 横方向は左端に揃える（既存の baseline 指定を打ち消す） */
  align-items: stretch;

  /* 上下の間隔を詰める。既存の space-between は、要素を上下の端に
     引き離してしまうため flex-start（上から順に詰める）に変える */
  justify-content: flex-start;

  /* 翻訳プルダウンとパンくずの間の余白 */
  gap: 10px;

  /* 既存の「最低50pxの高さ」を解除する。
     縦並びになったぶん自然に高くなるため、不要な余白を防ぐ */
  min-height: 0;
}

/* Google翻訳のプルダウンだけ、右端に寄せる
   （パンくずは左端のまま、翻訳は右上という配置になる） */
.tpl_article .sub-nav .lang-container {
  align-self: flex-end;
}

/* ここまで：記事ページのパンくずが折り返される問題 */
/* ==================================================================== */

/* ==================================================================== */
/* ■ パンくずの行を独立させる／全ページ共通の上下余白 */
.sub-header {
  margin-bottom: 42px;    /* 実測：青帯の下からパンくずまで 約42px */
}

/* ここは打ち消し */
.container-sub {
  padding-top: 0;
}
.tpl_article .container,
.tpl_search .container {
  padding-top: 0;
}


/* (D) グレーの「お問い合わせ/サポート」帯の上に余白を作る */
.sub-contact {
  margin-top: 60px;
}

/* ▼打ち消し：L2/L3の枠に入れていた下余白60pxは二重になるので0に戻す */
.container-sub {
  padding-bottom: 0;
}


/* (A) L2/L3：パンくずを「サイドナビと見出しの上の行」に独立させる */

@media (min-width: 1024px) {

  .layout-2col {
    /* 横に並べる（flex）から、マス目に配置する（grid）へ変更 */
    display: grid;

    /* 列の指定：左が358px（サイドナビ）、右は残り全部（1fr＝残り）
       358pxはデザインの実測値 */
    grid-template-columns: 358px 1fr;

    /* 行の指定：1行目は中身の高さぶん（auto）、2行目は残り（1fr） */
    grid-template-rows: auto 1fr;

    /* 中身を上詰めにする（高さを引き伸ばさない） */
    align-items: start;
  }

  /* パンくず：2列目（右）の1行目 ＝ 本文の上 */
  .layout-2col > .sub-nav {
    grid-column: 2;
    grid-row: 1;

    /* 本文（main-content）と同じ左余白を入れて、
       見出しの左端とぴったり揃える */
    padding-left: 85px;

    /* パンくずの下の余白。既存の指定を上書きして詰める */
    margin-bottom: 16px;
    min-height: 0;
    padding-bottom: 0;
  }

  /* サイドナビ：1列目（左）の2行目 ＝ パンくずの下 */
  .layout-2col > .sidebar {
    grid-column: 1;
    grid-row: 2;
  }

  /* 本文：2列目（右）の2行目 ＝ サイドナビと同じ高さで始まる */
  .layout-2col > .main-content {
    grid-column: 2;
    grid-row: 2;
  }

}

/* 1024px未満：grid にせず縦積みにする */
@media (max-width: 1023px) {
  .layout-2col {
    flex-direction: column;
  }
  .layout-2col > .sub-nav      { order: 1; }   /* パンくず（一番上） */
  .layout-2col > .main-content { order: 2; }   /* 本文 */
  .layout-2col > .sidebar      { order: 3; }   /* サイドナビ（一番下） */
}


/* (B) 記事本文ページ：パンくずを見出しの左端に揃える */
@media (min-width: 1024px) {
  .tpl_article .inner > .sub-nav {
    padding-left: calc(32% + 30px);
    margin-bottom: 16px;
    min-height: 0;
    padding-bottom: 0;
  }
}

/* ここまで：パンくずの行を独立させる／全ページ共通の上下余白 */
/* ==================================================================== */

/* ==================================================================== */
/* ■ サイドナビ：押せる場所を分かりやすくする */
/* カテゴリの行は、押す場所によって動きが変わる */
.section-nav-sidebar .category_title {
  cursor: pointer;
}

/* マウスを乗せたとき、白い箱をうっすら色づけて
   「今この行が押せる」ことを示す */
.section-nav-sidebar .category_title:hover {
  background-color: rgba(33, 174, 228, 0.08);   /* うっすら水色 */
}

/* カテゴリ名の文字にマウスを乗せたときは、文字を水色にする */
.section-nav-sidebar .category_title > a:hover {
  color: #21AEE4;
  text-decoration: none;
}

/* ここまで：サイドナビ：押せる場所を分かりやすくする */
/* ==================================================================== */

/* ==================================================================== */
/* ■ サイドナビ：控えめな三角印／リンクを箱全体に */
/* (A) カテゴリ名のリンクを、三角印の左どなりまで広げる */
.section-nav-sidebar .category_title > a {
  flex: 1 1 auto;
}

/* (B) カテゴリ側の三角印を「控えめ」にする */
.section-nav-sidebar .category_title > .sb-toggle--cat {
  flex: 0 0 auto;
  width: 1.1em;                   /* 三角印を置く場所の幅 */
  height: 1.2em;
}

/* 三角形そのもの。薄いグレー・小さめにする */
.section-nav-sidebar .category_title > .sb-toggle--cat:before {
  left: 0.25em;
  border-top-width: 4px;          /* 三角形の大きさ */
  border-bottom-width: 4px;       /* 三角形の大きさ */
  border-left-width: 4px;         /* 三角形の大きさ */
  border-left-color: #B4B8BB;     /* 三角形の色：うすいグレー */
}

/* マウスを乗せたときだけ、少しはっきりさせる。
   （普段は控えめ、押せることを確かめたいときだけ分かる、という考え方） */
.section-nav-sidebar .category_title > .sb-toggle--cat:hover:before {
  border-left-color: #21AEE4;     /* 水色 */
}

/* 開いているときは下向き（90度回転）になる。
   これは既存の指定（.sb-toggle.open:before）がそのまま効く */

/* ここまで：サイドナビ：控えめな三角印／リンクを箱全体に */
/* ==================================================================== */

/* ==================================================================== */
/* ■ 検索窓：虫眼鏡マークを押して検索できるようにする */
/* 青帯の検索窓が、Enterキーを押すしか検索する方法がなかった */
.sub-header-search {
  position: relative;
}

/* 透明な送信ボタン。虫眼鏡の絵にぴったり重ねる */
.sub-header-search input[type="submit"],
.sub-header-search button[type="submit"] {
  /* 上の display: none を打ち消して、表示（ただし透明）に戻す */
  display: block;

  /* 虫眼鏡の位置に重ねる */
  position: absolute;
  left: 17px;
  top: 50%;
  transform: translateY(-50%);   /* 上下の中央に揃える */
  width: 34px;
  height: 34px;

  /* 虫眼鏡の絵より前面に出して、確実に押せるようにする */
  z-index: 1;

  /* 見た目を完全に消す（既存CSSの青いボタンの見た目を打ち消し） */
  background: transparent;
  background-color: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;

  /* ボタンの中の「検索」という文字を見えなくする */
  font-size: 0;
  color: transparent;

  /* マウスカーソルを指の形にして「押せる」ことを伝える */
  cursor: pointer;
  border-radius: 50%;            /* 下のマウスオーバーの丸のため */
}

/* マウスを乗せたとき、虫眼鏡のまわりにうっすら丸を出す */
.sub-header-search input[type="submit"]:hover,
.sub-header-search button[type="submit"]:hover,
.sub-header-search input[type="submit"]:focus,
.sub-header-search button[type="submit"]:focus {
  background-color: rgba(33, 174, 228, 0.12);   /* うっすら水色の丸 */
  border-radius: 50%;
}

/* ここまで：検索窓：虫眼鏡マークを押して検索できるようにする */
/* ==================================================================== */

/* ==================================================================== */
/* ■ 検索ボタン：虫眼鏡の絵の上だけを押せる範囲にする */
.sub-header-search input[type="submit"],
.sub-header-search button[type="submit"] {
  left: 24px;      /* 虫眼鏡と同じ位置 */
  width: 20px;     /* 虫眼鏡と同じ大きさ */
  height: 20px;
  border-radius: 0;
}

/* マウスを乗せたときに薄い水色を出さない */
.sub-header-search input[type="submit"]:hover,
.sub-header-search button[type="submit"]:hover,
.sub-header-search input[type="submit"]:focus,
.sub-header-search button[type="submit"]:focus {
  background-color: transparent;
  background: transparent;
  border-radius: 0;
}


/* (B) トップページ（ヒーローエリア）の検索窓 */
.hero-search-bar {
  position: relative;
}

/* 透明な送信ボタンを、虫眼鏡の絵にぴったり重ねる */
.hero-search-bar input[type="submit"],
.hero-search-bar button[type="submit"] {
  /* 上にある display: none を打ち消す */
  display: block;

  position: absolute;
  left: 30px;                    /* 箱の左の余白と同じ＝虫眼鏡の位置 */
  top: 50%;
  transform: translateY(-50%);   /* 上下中央に揃える */
  width: 30px;                   /* 虫眼鏡と同じ大きさ */
  height: 30px;

  z-index: 1;                    /* 虫眼鏡の絵より前面に出す */

  /* Zendesk標準の青いボタンの見た目を完全に消す */
  background: transparent;
  background-color: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin: 0;

  /* ボタンの中の「検索」という文字を見えなくする
     （文字自体は残るため、読み上げソフトでは認識される） */
  font-size: 0;
  color: transparent;

  /* マウスカーソルを指の形にして「押せる」ことを伝える */
  cursor: pointer;
}

/* マウスを乗せても色を変えない（下層ページと挙動を揃える） */
.hero-search-bar input[type="submit"]:hover,
.hero-search-bar button[type="submit"]:hover,
.hero-search-bar input[type="submit"]:focus,
.hero-search-bar button[type="submit"]:focus {
  background-color: transparent;
  background: transparent;
}

/* ここまで：検索ボタン：虫眼鏡の絵の上だけを押せる範囲にする */
/* ==================================================================== */

/* ==================================================================== */
/* ■ 検索ボタンの当たり判定が190pxに広がる不具合 */
/* トップページの虫眼鏡の右あたりまでクリック範囲が伸びてしまい */
.sub-header-search input[type="submit"],
.sub-header-search button[type="submit"] {
  /* 「最低でも190px」という条件を解除する。
     0 は「最低幅の制限をなくす」という意味 */
  min-width: 0;

  /* 念のため最大幅も指定して、これ以上広がらないようにする */
  max-width: 20px;

  /* 高さ方向も同様に押さえる */
  min-height: 0;
  max-height: 20px;

  /* 文字を詰めるための余白も念のため0にする
     （既存の padding: 0 1.9286em を打ち消す） */
  padding: 0;

  /* 行の高さも0にする（既存の line-height: 2.72 を打ち消す）。
     これが残っていると、ボタンが縦に伸びる可能性がある */
  line-height: 0;

  /* 幅・高さの計算に余白や枠線を含める方式にする。
     これにより指定した20pxがそのまま見た目の大きさになる */
  box-sizing: border-box;
}

/* (B) トップページ・ヒーローエリアの検索窓（虫眼鏡は30px） */
.hero-search-bar input[type="submit"],
.hero-search-bar button[type="submit"] {
  min-width: 0;
  max-width: 30px;
  min-height: 0;
  max-height: 30px;
  padding: 0;
  line-height: 0;
  box-sizing: border-box;
}

/* ここまで：検索ボタンの当たり判定が190pxに広がる不具合 */
/* ==================================================================== */

/* ==================================================================== */
/* ■ ヘッダーロゴ：全体をクリックできるようにする */
/* ヘッダー左上の「IJCAD ヘルプセンター」のうち */
.header-logo-group .header-logo-link {
  display: flex;
  align-items: center;   /* ロゴとバッジの上下中央を揃える */
  gap: 30px;             /* ロゴとバッジの間隔30px */

  /* リンクの下線を消す。
     ロゴとバッジは絵とボタン風のラベルなので、下線は不要 */
  text-decoration: none;
}

/* マウスを乗せたときも下線を出さない */
.header-logo-group .header-logo-link:hover,
.header-logo-group .header-logo-link:focus {
  text-decoration: none;
}

/* バッジのタグを div から span に変えたことへの対応 */
.header-logo-group .header-logo-link .header-badge {
  display: flex;
  flex: 0 0 auto;        /* リンクの中で潰れたり伸びたりしないように固定 */
  box-sizing: border-box;
}

/* バッジの中の文字色を白のまま保つ */
.header-logo-group .header-logo-link .header-badge {
  color: #ffffff;
}

/* ここまで：ヘッダーロゴ：全体をクリックできるようにする */
/* ==================================================================== */

/* ==================================================================== */
/* ■ 製品カラーの「一瞬の切り替わり」を目立たなくする */
/* 「IJCAD●●」のセクションのページを開いた瞬間、カードの左端が */
.main-content .section-tree .section a:not([data-product]) {
  border-left-color: #E4E5E6;
}

/* ▼ 製品ではないと判定されたカード（目印が none）。
     水色にする */
.main-content .section-tree .section a[data-product="none"] {
  border-left-color: #21AEE4;
}
.main-content .section-tree .section a[data-product="none"]:hover {
  border-left-color: #21AEE4 !important;
}

/* ▼ 補助ラベルの■も同じ考え方にする。
     判定前は「枠と同じ薄いグレー」、製品でなければ水色 */
.sub-page-label:not([data-product]):before {
  background-color: #E4E5E6;
}
.sub-page-label[data-product="none"]:before {
  background-color: #21AEE4;
}

/* ▼ 記事一覧の縦棒も同様 */
.main-content .article-list:not([data-product]) .article-list-item:before {
  background-color: #E4E5E6;
}
.main-content .article-list[data-product="none"] .article-list-item:before {
  background-color: #21AEE4;
}

/* ここまで：製品カラーの「一瞬の切り替わり」を目立たなくする */
/* ==================================================================== */

/* ==================================================================== */
/* ■ 重要なお知らせ：三角！マークを大きくする */
/* デザインデータでは、黄色い三角！マークがもう少し大きい */
.notice-box .notice-icon {
  width: 40px;          /* 実測：青帯80pxの半分 */
  height: 40px;
  margin-right: 34px;   /* ！マークと文字のあいだの間隔 */
}

/* スマホなど狭い画面のアイコン */
@media (max-width: 767px) {
  .notice-box .notice-icon {
    width: 28px;          /* 狭い画面での！マークの大きさ */
    height: 28px;
    margin-right: 12px;   /* 狭い画面では間隔はそのまま */
  }
}

/* ここまで：重要なお知らせ：三角！マークを大きくする */
/* ==================================================================== */

/* ==================================================================== */
/* ■ 青帯の柄をトップページと揃える */
/* トップページの検索窓の青帯は「柄（模様）入り」なのに */

.sub-header {
  /* 画像をエリア全体にきれいに覆いかぶせる
     （ヒーローエリアとまったく同じ指定） */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* 背景の下敷きの色。画像が読み込まれるまで */
  background-color: #21AEE4;
}

/* ここまで：青帯の柄をトップページと揃える */
/* ==================================================================== */



/* ==================================================================== */
/* ■ 長いセクション名の読みやすさ改善 */
/* 8月6日に4つの改善を一度に適用したところ見た目が崩れ */
.main-content .section-tree .section a {
  /* (2) 左右の余白を 16px → 10px に詰める */
  padding: 12px 10px;

  /* (1) 行の間隔を 1.4 → 1.65 に広げる。
         3行に折り返したときに、行同士がくっついて見えるのを防ぐ */
  line-height: 1.65;
}

/* (3) カードの文字を14pxに統一する */
.main-content .section-tree .section a {
  font-size: 14px;
}/* ここまで：長いセクション名の読みやすさ改善 */
/* ==================================================================== */

/* ==================================================================== */
/* ■ ヘッダー右上のサインインエリア */
/* 何のための指定か */
.site-header {
  padding-right: 60px;
}

/* サインインエリアの枠 */
.site-header .header-user-area {
  margin-left: auto;
  flex: 0 0 auto;          /* 幅を縮めない・伸ばさない */
  display: flex;
  align-items: center;     /* 上下中央に揃える */
}

/* 未サインインのとき：「サインイン」のリンク */
.site-header .header-signin {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;          /* ★暫定値 */
  font-weight: 700;
  line-height: 1;
  color: #21AEE4;           /* ヘルプセンターバッジと同じ水色 */
  text-decoration: none;

  /* 押しやすい大きさを確保する（文字だけだと押しにくいため） */
  padding: 10px 4px;
}

/* マウスを乗せたとき。下線を出して「押せる」ことを伝える */
.site-header .header-signin:hover,
.site-header .header-signin:focus {
  color: #1a8cb8;           /* 少し濃い水色 */
  text-decoration: underline;
}

/* サインイン済みのとき：ユーザー名と開閉メニュー */
.site-header .user-info.dropdown {
  position: relative;
}

/* ユーザー名のボタン */
.site-header .header-user-name {
  display: flex;
  align-items: center;
  gap: 6px;                 /* 名前と下向き三角の間隔 */

  background: none;
  background-color: transparent;
  border: none;
  box-shadow: none;
  padding: 10px 4px;

  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;          /* ★暫定値 */
  font-weight: 700;
  line-height: 1;
  color: #21AEE4;

  cursor: pointer;
}

.site-header .header-user-name:hover,
.site-header .header-user-name:focus {
  color: #1a8cb8;
  background: none;
  background-color: transparent;
}

/* 開いたメニューが、青い帯の下に隠れないようにする。
   z-index は「重なり順」の指定で、数字が大きいほど手前に来る */
.site-header .user-info.dropdown .dropdown-menu {
  z-index: 100;
}

/* 狭い画面（767px以下）での調整 */
@media (max-width: 767px) {
  .site-header {
    padding-left: 20px;
    padding-right: 20px;
  }
  .site-header .header-signin,
  .site-header .header-user-name {
    font-size: 14px;
  }
}

/* ここまで：ヘッダー右上のサインインエリア */
/* ==================================================================== */

/* ==================================================================== */
/* ■ サインインを楕円のボタンにする */
/* 文字だけが表示されていて浮いている感じがする */
.site-header .header-signin,
.site-header .header-user-name {
  /* 楕円の枠線。角丸20pxで、高さより大きいため左右が半円になる */
  border: 1px solid #21AEE4;
  border-radius: 20px;

  /* 中の余白。ヘッダーの高さ180pxに合わせて広めにしている */
  padding: 8px 20px;

  /* 背景は塗らず、枠線だけの状態にする */
  background: transparent;
  background-color: transparent;

  color: #21AEE4;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;          /* 現行と同じ14px */
  font-weight: 700;
  line-height: 1;
  text-decoration: none;

  /* 枠線を含めた大きさで計算する（余白の指定どおりの見た目になる） */
  box-sizing: border-box;

  /* マウスを乗せたときの色の変化を、なめらかにする */
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ▼マウスを乗せたとき：水色で塗りつぶし、文字を白にする
     （「塗りつぶす」動き） */
.site-header .header-signin:hover,
.site-header .header-signin:focus,
.site-header .header-user-name:hover,
.site-header .header-user-name:focus {
  background-color: #21AEE4;
  border-color: #21AEE4;
  color: #ffffff;
  text-decoration: none;   /* 前に入れた下線は不要になるので消す */
}

/* ▼サインイン済みの「ユーザー名 ▼」だけの調整
     名前と下向き三角を横並びにし、中央で揃える */
.site-header .header-user-name {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* ここまで：サインインを楕円のボタンにする */
/* ==================================================================== */

/* ==================================================================== */
/* ■ 「その他」のボタン間の隙間を埋める */
/* サイドナビの「その他」グループだけ、白いボタンの間に */
.section-nav-sidebar .sb-group--other .category_item {
  margin-top: -1px;
}

/* 一番上の項目だけは、上に詰める必要がない */
.section-nav-sidebar .sb-group--other .category_item:first-child {
  margin-top: 0;
}

/* ここまで：「その他」のボタン間の隙間を埋める */
/* ==================================================================== */

/* ==================================================================== */
/* ■ セクションが1つだけのカテゴリの記事一覧 */
/* Zendeskの仕様では、記事は必ずセクションに属する */
.main-content .section-tree .js-category-articles {
  grid-column: 1 / -1;
}

/* 記事一覧そのものの余白 */
.main-content .js-category-articles {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ここまで：セクションが1つだけのカテゴリの記事一覧 */
/* ==================================================================== */


/* ==================================================================== */
/* ■ セクションカードとサイドナビの文字サイズ・カードの枠線・青帯の幅 */
/*                                                                      */
/*   このブロックは style.css の一番下に足す。                          */
/*   下の「ここまで」の行までを削除すれば、足す前の状態に戻る。         */
/* ==================================================================== */


/* --------------------------------------------------------------------
   (1) 本文エリアのセクションカードの文字を 16px にする
   -------------------------------------------------------------------- */
.main-content .section-tree .section a {
  font-size: 16px;
}


/* --------------------------------------------------------------------
   (2) サイドナビのカテゴリ名を 13px にする

   本文のセクションカードを主役、サイドナビを脇役にして
   どちらを先に見ればよいかが分かるようにする。
   -------------------------------------------------------------------- */
.section-nav-sidebar .category_title > a {
  font-size: 13px;
}


/* --------------------------------------------------------------------
   (3) サイドナビのセクション名を 13px にする

   セクション名は、カテゴリ名をクリックして開いたときに下に出る子項目。
   既存の指定は14pxのため、この指定を入れないと
   子のセクション名が親のカテゴリ名（13px）より大きくなる。
   -------------------------------------------------------------------- */
.section-nav-sidebar .section_title {
  font-size: 13px;
}


/* --------------------------------------------------------------------
   (4) サイドナビ「その他」グループのカテゴリ名を 12px にする

   「その他」は枠なし・アイコンなしの控えめな一覧。
   通常のカテゴリ名より1px小さくして、扱いの違いを保つ。
   -------------------------------------------------------------------- */
.section-nav-sidebar .sb-group--other .category_title > a {
  font-size: 12px;
}


/* --------------------------------------------------------------------
   (5) 横に長いセクション名を含む2つのカテゴリページだけ、カードを2列にする

   カード1枚の幅は3列のとき最大281px。この幅では下の4つの名前が
   16pxで3行になり、そのカードだけ高さが伸びる。
   2列にすると2行以内に収まる。

     ・スタンドアロン‧旧USB‧旧ネットワーク セットアップに関するエラー
     ・シングル‧マルチ‧USB‧ネットワーク(RLM) セットアップに関するエラー
     ・スタンドアロン‧旧USB‧旧ネットワーク ライセンスの管理
     ・シングル‧マルチ‧USB‧ネットワーク(RLM) ライセンスの管理

   カテゴリ番号の対応
     60627717365273 … セットアップ・起動時のトラブル（カード3枚）
     60623904474905 … ライセンスを管理する（カード6枚）

   :has( ) は「その中に○○を含む要素」を選ぶ書き方。
   カードに付いている data-cat-id を見て、この2ページだけを選んでいる。
   この書き方に対応していない古いブラウザでは3列のままになる。

   ★1ページだけにしたい場合は、下の2行のうち不要な行を削除する。
     行を削除するときは、上の行の末尾のカンマも合わせて調整する。
   -------------------------------------------------------------------- */
@media (min-width: 768px) {
  .main-content .section-tree:has(a[data-cat-id="60627717365273"]),
  .main-content .section-tree:has(a[data-cat-id="60623904474905"]) {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* --------------------------------------------------------------------
   (6) 2列にしたページのカードの大きさを整える

   高さ    90px → 120px
   横の隙間 40px → 80px（画面幅1024px以上。そのぶんカード幅が442px→422pxに縮む）
   縦の隙間 40px のまま

   カードの余白が広すぎて文字が小さく見えるため、
   横幅を縮めて隙間を広げ、文字とカードの比率を整えている。
   422pxでも長い名前は2行に収まる（実測で確認）。
   -------------------------------------------------------------------- */
@media (min-width: 768px) {
  .main-content .section-tree:has(a[data-cat-id="60627717365273"]) .section a,
  .main-content .section-tree:has(a[data-cat-id="60623904474905"]) .section a {
    min-height: 120px;
  }
}

/* 横の隙間を広げるのは画面幅1024px以上だけ。
   これより狭いときはサイドナビが本文の下に回り、
   カードが横に並ぶ幅が狭くなるため、隙間は40pxのままにする */
@media (min-width: 1024px) {
  .main-content .section-tree:has(a[data-cat-id="60627717365273"]),
  .main-content .section-tree:has(a[data-cat-id="60623904474905"]) {
    column-gap: 80px;
    row-gap: 40px;
  }
}


/* --------------------------------------------------------------------
   (7) カードの文字を、単語の切れ目（スペース）で折り返す

   指定しない場合、日本語はどの文字の間でも折り返せるため
   「スタンドアロン‧旧USB‧旧ネットワーク セットアッ／プに関するエラー」
   のように語の途中で切れる。

   word-break: keep-all  … 日本語を語の途中で折り返さない
   overflow-wrap: anywhere … ただし1行に収まらない場合は折り返す
                             （これが無いと文字がカードからはみ出す）

   結果
     「スタンドアロン‧旧USB‧旧ネットワーク
       セットアップに関するエラー」
     のようにスペースの位置で折り返す。

   ※画面幅1366px未満では適用しない。
     カードが狭くなり、語の途中で折り返せないと行数が増えるため。
     1366px以上での行数は、指定しない場合と同じであることを実測済み。
   -------------------------------------------------------------------- */
@media (min-width: 1366px) {
  .main-content .section-tree .section a {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
}


/* --------------------------------------------------------------------
   (8) セクションカードの枠線を濃くする（押せる箱に見えるようにする）

   既存の枠線 #E4E5E6 はほぼ白で、枠があること自体が認識しづらい。
   1段濃い #C9CDD1 にして、1枚1枚が押せる箱に見えるようにする。

   ★左端の色は変えない★
     カードの枠線は次の2つに分かれている。

       border      : 1px  上・右・下 … うすいグレーの枠
       border-left : 3px  左だけ     … 製品ごとの色
                                       （IJCAD=橙、Mechanical=青など）

     border-color と一括で指定すると左端の製品カラーまで塗り替えてしまう。
     そのため上・右・下の3つを個別に指定している。

   ★:hover 側にも同じ指定が必要な理由★
     マウスを乗せたときの指定に border-color: #E4E5E6 !important があり、
     これを打ち消さないと、マウスを乗せた瞬間だけ枠線が薄く戻ってしまう。
     相手が !important のため、こちらも !important で指定している。
     左端の製品カラーは既存の指定がそのまま効くので触らない。

   ★ページを開いた直後の左端も合わせている★
     製品の判定はページを開いた後に行われる。判定前の左端は
     「枠と同じ色にして目立たせない」指定になっているため、
     枠の色を変えたのに合わせてこちらも変える。
     （変えないと、開いた瞬間だけ左端だけが薄く見える）

   #C9CDD1 は既存では使っていない色。
   デザインの縦区切り線 #D7D7D7 と、サイドナビの矢印 #B4B8BB の
   中間くらいの濃さ。

   ★もっと濃く／薄くしたい場合★
     下に出てくる #C9CDD1 を全部同じ色に書き換える。
     濃い順に  #B4B8BB → #C9CDD1 → #D7D9DC → #E4E5E6（元の色）
   -------------------------------------------------------------------- */

/* 通常の状態。上・右・下の枠線だけを濃くする */
.main-content .section-tree .section a {
  border-top-color: #C9CDD1;
  border-right-color: #C9CDD1;
  border-bottom-color: #C9CDD1;
}

/* マウスを乗せたとき。薄い色に戻す指定を打ち消す。

   ★セレクタを3行書いている理由（重要）★
     打ち消す相手の指定は、次の2行がセットになっている。

       .main-content .section-tree .section a:hover,
       .main-content .section-tree .section a[data-cat-id]:hover {
         border-color: #E4E5E6 !important;
       }

     カードには data-cat-id という目印が付くため、実際に効くのは
     2行目の方。この2行目は [data-cat-id] が1つ多いぶん
     「指定の強さ」が上で、1行目だけを真似ても打ち消せない
     （実際に1行だけで書いてしまい、マウスを乗せた瞬間だけ
       枠線が薄く戻る不具合になった）。

     そこで、相手と同じ強さになるよう [data-cat-id] を付けた行を用意し、
     さらに data-sec-id の目印が付くカード（記事一覧を出すページ）も
     取りこぼさないように3行目を足している。
     同じ強さの場合は「後に書いた方」が優先されるため、
     このブロックが style.css の末尾にあることで打ち消せる。 */
.main-content .section-tree .section a:hover,
.main-content .section-tree .section a[data-cat-id]:hover,
.main-content .section-tree .section a[data-sec-id]:hover {
  border-top-color: #C9CDD1 !important;
  border-right-color: #C9CDD1 !important;
  border-bottom-color: #C9CDD1 !important;
}

/* ページを開いた直後（製品カラーが決まる前）の左端 */
.main-content .section-tree .section a:not([data-product]) {
  border-left-color: #C9CDD1;
}


/* --------------------------------------------------------------------
   (9) 本文が1160pxのページでは、青帯の中身も本文と同じ幅にする

   青帯（検索窓＋お問い合わせボタン）は header.hbs に1つだけ書かれた
   全ページ共通のパーツで、中身の最大幅はL2以降に合わせた1440px。
   一方、記事本文ページなどの本文の外枠は最大1160px（.inner）。
   このため青帯の検索窓が本文やサイドナビより左右に飛び出していた。

   ページごとの本文の最大幅
     1440px … カテゴリページ（L2）／セクションページ（L3・L4）
              ＝ .container-sub を使う2つのテンプレート
     1160px … 記事本文／検索結果／お問い合わせ／リクエスト一覧／
              コミュニティ／プロフィール／エラー ＝ 残りすべて

   ★セレクタの意味★
     body:not(:has(.container-sub))
       「そのページの中に .container-sub が無いなら」という条件。
       .container-sub があるのはL2・L3・L4だけなので、
       この2種類のページを除いた全ページが対象になる。
       ページの構造そのものを見て判定するので、
       今後ページが増えても指定を足す必要がない。
       :has( ) に対応していない古いブラウザでは、
       この指定がまるごと無効になり、これまでどおり1440pxになる。

   ★1120px という数字★
     本文の外枠 .inner は「左右に20pxの余白」を持つため、
     文字やサイドナビが実際に並ぶ幅は .inner の幅 − 40px。
     .inner の幅は画面幅1160px以上では最大1160pxなので、
     並ぶ幅は 1160 − 40 ＝ 1120px。
     青帯の中身をこの1120pxに合わせると、検索窓の左端が
     サイドナビの左端とぴったり揃う。

   ★min( ) を使っている理由★
     .inner の幅は画面幅1160〜1288pxの間では
     1160pxではなく「画面幅の90%」になる（実測で確認）。
     そのため「1120px」と「画面幅の90% − 40px」の
     小さい方を採用して、本文の幅に追従させている。

       画面幅1160px →  1004px（本文と一致）
       画面幅1200px →  1040px（本文と一致）
       画面幅1288px →  1119px（本文と一致）
       画面幅1289px →  1120px（ここから1120pxで一定）
       画面幅1920px →  1120px（本文と一致）

     ※100vw は縦スクロールバーの幅を含むため、数pxの誤差が
       出ることがある。位置合わせの目的には影響しない範囲。

   ★画面幅1160px以上に限定している理由★
     画面幅1159px以下では .inner が画面幅いっぱい（100%）に
     なるため、本文が並ぶ幅は「画面幅 − 40px」。
     青帯の中身も同じ「画面幅 − 40px」になっているので、
     この範囲では何もしなくてもすでに揃っている（実測で確認）。
     ここに1120pxの制限を入れると逆に青帯が内側に寄って
     ずれてしまうため、1160px以上だけを対象にしている。
   -------------------------------------------------------------------- */
@media (min-width: 1160px) {
  body:not(:has(.container-sub)) .sub-header-inner {
    max-width: min(1120px, calc(90vw - 40px));
  }
}


/* ここまで：セクションカードとサイドナビの文字サイズ・カードの枠線・青帯の幅 */
/* ==================================================================== */