@charset "utf-8";
body {
  line-height: 1.8;
  font-family: "游ゴシック体","YuGothic","游ゴシック Medium","Yu Gothic Medium","游ゴシック","Yu Gothic","Noto Sans JP","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif !important;
  color: #000;
  font-feature-settings: "pkna";
  font-optical-sizing: auto;
  font-variation-settings: "slnt" 0;
}
/* -----------------------------------------
Icons
----------------------------------------- */
.text-link::after, .breadcrumb-item:first-child::before,.breadcrumb-item+.breadcrumb-item::before, .btn-post-index-title::after, #post p a[target="_blank"]::after, .point-of-article ul li::before {
  font-family: "Material Symbols Outlined";
}
/* -----------------------------------------
Animations
----------------------------------------- */
@keyframes pulseMotion {
  0% {
    transform: translate(-50%, -50%) scale(1, 1);
    background-color: rgba(9, 111, 200, 0.2)
  }
  100% {
    transform: translate(-50%, -50%) scale(3, 3);
    background-color: rgba(9, 111, 200, 0)
  }
}
/* -----------------------------------------
Common
----------------------------------------- */
ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.en {
  font-family: 'Chillax-Medium', sans-serif;
}
.logo-color {
  color: #228ACB;
}
.uncategorized, .uncategorized:hover {
  color: #1F3542; 
 }
 .dx, .dx:hover {
  color: #5E54A3; 
 }
 .control, .control:hover {
  color: #087AD0;
}
.approval, .approval:hover {
  color: #BB3B89;
}
.business, .business:hover {
  color: #F7A038;
}
.column, .column:hover {
  color: #119287;
}
.text-link {
  color: #000;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: 0.5s;
  padding-right: 1.25rem;
}
.text-link .icon {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: #096FC8;
}
.text-link .icon.arrow {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  width: 1.125rem;
  height: .125rem;
  background: none;
}
.text-link .icon.arrow::before {
  position: absolute;
  content: "";
  top: -0.25rem;
  right: .0625rem;
  width: .625rem;
  height: .625rem;
  border-top: .125rem solid #096FC8;
  border-right: .125rem solid #096FC8;
  transform: rotate(45deg);
}
.text-link:hover {
  color: #096FC8;
}
.text-link:hover .icon.arrow {
  background: #096FC8;
  transform: translate(1rem, 0);
}
.hover-opacity {
  transition-property: opacity;
  transition-duration: 0.5s;
}
.hover-opacity:hover {
  opacity: 0.7; 
}
@keyframes loading {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.loading {
  overflow: hidden;
  position: relative;
  background: #f0f0f0;
  transition: all .5s;
}
.loading::before {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.50), transparent);
  animation: loading 1.0s linear infinite;
}
.loading--hidden,.js-fadeup--completed {
  background-color: initial !important;
}
/* もっと見る */
.btn-read-more, .btn-download {
  background-color: #333;
  padding: .5rem 1.25rem;
  font-size: .875rem;
  color: #fff;
  text-decoration: none;
  border-radius: 2rem;
  column-gap: 1rem;
  padding: .625rem 1.5rem;
}
.btn-read-more[target="_blank"]::after, .btn-download[target="_blank"]::after {
  content: "";
  background: url(../images/ico_blank_white.svg) center center no-repeat;
  background-size: cover;
  column-gap: .5rem;
  width: 1rem;
  height: 1rem;
}
.btn-read-more:hover, .btn-download:hover {
  color: #fff;
}
.hover-scale {
  -webkit-transition: all .3s;
  transition: all .3s;
}
.hover-scale:hover {
  transform: scale(1.1,1.1);
}
@media (min-width: 576px) and (max-width: 767.9808px) {
  /* もっと見る */
  .btn-read-more, .btn-download {
    font-size: .9375rem;
  }
}
@media (min-width: 768px) and (max-width: 991.9808px) {
  /* もっと見る */
  .btn-read-more, .btn-download {
    font-size: .9375rem;
  }
}
@media (min-width: 992px) and (max-width: 1199.9808px) {
  /* もっと見る */
  .btn-read-more, .btn-download {
    margin-bottom: 0;
  }
}
@media (min-width: 1200px) {
  /* もっと見る */
  .btn-read-more, .btn-download {
    font-size: 1rem;
    margin-bottom: 0;
  }
}
/* -----------------------------------------
各記事共通
----------------------------------------- */
.article-group {
  row-gap: 2.5rem;
}
.article-container {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}
.article-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  row-gap: .5rem;
}
.articles-section-header-inner {
  row-gap: .5rem;
}
.article-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
/* ラベル */
.article-label {
  padding: .125rem .5rem;
  font-size: .625rem;
  position: absolute;
  left: .5rem;
  top: .5rem;
  z-index: 1;
  border-radius: 1.25rem;
}
.article-label.new {
  background-color: #DE331C;
  color: #fff;
  animation: bounce 2s ease-in-out forwards;
  animation-iteration-count: infinite;
}
@keyframes bounce {
  0% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
  50% {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
  }
}

/* 画像 */
.article-thumbnail {
  padding-top: 57%;
  margin-bottom: 0;
  border-radius: .5rem;
  position: relative;
  overflow: hidden;
}
.article-thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article-link:hover ~ .article-thumbnail img, .article-link:hover ~ .article-row .article-thumbnail img {
  transform: scale(1.1);
}
/* 日付・カテゴリー */
.article-date-category {
  column-gap: .5rem;
}
.article-date {
  font-size: .6875rem;
  color: #555;
}
.article-category {
  font-size: .6875rem;
  text-decoration: none;
  position: relative;
  z-index: 1;
  white-space: nowrap;
}
.article-category:hover {
  text-decoration: underline;
}
/* タイトル */
.article-title {
  line-height: 1.5;
  font-size: 1rem;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  padding-top: 0;
}
.article-title br {
  display: none;
}
.article-link:hover ~ .article-title, .article-link:hover ~ .article-row .article-title, #suggestions-box .suggestion-item-link:hover {
  color: #228ACB;
}
/* タグ */
.article-tag-list {
  gap: .5rem;
  position: relative;
  z-index: 1;
}
.article-tag {
  transition: all 0.2s ease;
  font-size: .625rem;
  background-color: #fff;
  border: .0625rem solid #ccc;
  border-radius: .25rem;
  color: #000;
  text-decoration: none;
  padding: .1875rem .375rem;
  font-weight: normal !important;
}
.article-tag:hover {
  background-color: #f5f5f5;
}
@media (min-width: 768px) and (max-width: 991.9808px) {
  .article-container {
    row-gap: 1.5rem;
  }
  .article-inner {
    row-gap: 1rem;
  }
  /* タイトル */
  .article-title {
    font-size: 1.125rem;
  }
  /* 日付・カテゴリー */
  .article-date, .article-category {
    font-size: .75rem;
  }
  /* タグ */
  .article-tag-list {
    gap: .5rem;
  }
  .article-tag {
    font-size: .6875rem;
    padding: .25rem .5rem;
  }
}
@media (min-width: 992px) and (max-width: 1199.9808px) {
  .article-container {
    row-gap: 1.5rem;
  }
  .article-inner {
    row-gap: 1rem;
  }
  .articles-section-header-inner {
    row-gap: unset;
  }
  /* タイトル */
  .article-title {
    font-size: 1.125rem;
  }
  /* 日付・カテゴリー */
  .article-date, .article-category {
    font-size: .75rem;
  }
  /* タグ */
  .article-tag-list {
    gap: .625rem;
  }
  .article-tag {
    font-size: .75rem;
    padding: .25rem .5rem;
  }
}
@media (min-width: 1200px) {
  .article-container {
    row-gap: 1.5rem;
  }
  .article-inner {
    row-gap: 1rem;
  }
  .articles-section-header-inner {
    row-gap: unset;
  }
  /* タイトル */
  .article-title {
    font-size: 1.25rem;
  }
  /* 日付・カテゴリー */
  .article-date, .article-category {
    font-size: .8125rem;
  }
  /* タグ */
  .article-tag-list {
    gap: .75rem;
  }
  .article-tag {
    font-size: .75rem;
    padding: .25rem .5rem;
  }
}

/* -----------------------------------------
人気の記事一覧共通
----------------------------------------- */
.articles-container {
  counter-reset: number 0;  
}
.ico-popular-award {
  position: absolute;
  z-index: 1;
  left: -.5rem;
  top: -.5rem;
  width: 1.25rem;
  height: 1.25rem;
  background: url(../images/ico_popular_award.svg) no-repeat center center;
  background-size: cover;
  font-size: .8125rem;
}
.ico-popular-award::before {
  counter-increment: number 1;
  content: counter(number);
}

/* -----------------------------------------
記事一覧共通
----------------------------------------- */
.articles-container-group-list:nth-child(odd) {
  background-color: #fff;
}
.articles-container-group-list:nth-child(even) {
  background-color: #F4F9FC;
}
.articles-container-group-list .articles-container-group:not(:last-child) {
  border-bottom: .0625rem solid #ccc;
}
.articles-container-group {
  padding: 4rem 0;
}
.articles-container-row {
  row-gap: 1.5rem;
}
.articles-group-row {
  row-gap: 2rem;
}
.articles-row {
  row-gap: 4rem;
}
.articles-section-header {
  row-gap: .5rem;
}
.articles-section-header .jp-title {
  font-size: 1.5rem;
  letter-spacing: 4px !important;
  padding-top: 0;
}
.articles-container-group .article-title {
  font-size: .875rem;
}
.article-main-text {
  gap: .5rem;
}
/* タグで探す */
.tags-container {
  row-gap: 2.5rem;
}
.tags-list {
  gap: 1rem;
}
.tags-list .article-tag {
  padding: .25rem .625rem;
  font-size: .75rem;
}
@media (min-width: 576px) and (max-width: 767.9808px) {
  /* -----------------------------------------
  記事一覧共通
  ----------------------------------------- */
  .articles-container-row {
    row-gap: 2rem;
  }
  .articles-group-row {
    row-gap: 2.5rem;
  }
  /* -----------------------------------------
  人気の記事一覧共通
  ----------------------------------------- */
  .ico-popular-award {
    width: 1.5rem;
    height: 1.5rem;
    font-size: .875rem;
  }
  .articles-container-group {
    padding: 5rem 0;
  }
  .articles-container-group .article-title {
    font-size: 1rem;
  }  
  /* タグで探す */
  .tags-list .article-tag {
    padding: .25rem .625rem;
  }  
}
@media (min-width: 768px) and (max-width: 991.9808px) {
  /* -----------------------------------------
  記事一覧共通
  ----------------------------------------- */
  .articles-container-row {
    row-gap: 2rem;
  }
  .articles-group-row {
    row-gap: 2.5rem;
  }
  /* -----------------------------------------
  人気の記事一覧共通
  ----------------------------------------- */
  .ico-popular-award {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 1rem;
  }
  .articles-container-group {
    padding: 6.25rem 0;
  }
  .article-container .article-row {
    row-gap: 1rem;
  }
  .articles-container-group .article-title {
    font-size: 1.125rem;
  }  
  .article-main-text {
    gap: .75rem;
  }
    /* タグで探す */
  .tags-list .article-tag {
    padding: .375rem .625rem;
  }
}
@media (min-width: 992px) and (max-width: 1199.9808px) {
  /* -----------------------------------------
  記事一覧共通
  ----------------------------------------- */
  .articles-group-row {
    row-gap: 3rem;
  }
  /* -----------------------------------------
  人気の記事一覧共通
  ----------------------------------------- */
  .ico-popular-award {
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
    left: -0.75rem;
    top: -0.75rem;
  }
  .articles-container-group {
    padding: 7.5rem 0;
  }
  .articles-row {
    row-gap: 5rem;
  }
  .articles-section-header {
    writing-mode: vertical-rl;
    align-items: flex-start;
  }
  .articles-section-header-inner {
    top: 6.25rem;
    position: sticky;
  }
  .articles-section-header .jp-title {
    text-orientation: upright;
    font-size: 1.625rem;
  }
  .article-container .article-row {
    row-gap: 1rem;
  }
  .articles-container-group .article-title {
    font-size: 1.25rem;
  }  
  .article-main-text {
    gap: .75rem;
  }
  /* タグで探す */
  .tags-container {
    padding: 0 .75rem;
  }
  .tags-list .article-tag {
    padding: .375rem .625rem;
  }
}
@media (min-width: 1200px) {
  /* -----------------------------------------
  記事一覧共通
  ----------------------------------------- */
  .articles-group-row {
    row-gap: 3.5rem;
  }
  /* -----------------------------------------
  人気の記事一覧共通
  ----------------------------------------- */
  .ico-popular-award {
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
    left: -0.75rem;
    top: -0.75rem;
  }
  .articles-container-group {
    padding: 7.5rem 0;
  }
  .articles-row {
    row-gap: 6.25rem;
  }
  .articles-section-header {
    writing-mode: vertical-rl;
    align-items: flex-start;
  }
  .articles-section-header-inner {
    top: 6.875rem;
    position: sticky;
  }
  .articles-section-header .jp-title {
    font-size: 1.75rem;
    line-height: 1.25;
  }
  .article-container .article-row {
    row-gap: 1rem;
  }
  .articles-container-group .article-title {
    font-size: 1.25rem;
  }
  .article-main-text {
    gap: 1rem;
  }
  /* タグで探す */
  .tags-container {
    padding: 0 .75rem;
  }
  .tags-list .article-tag {
    padding: .625rem .75rem;
  }
}

/* -----------------------------------------
Banner
----------------------------------------- */
.banner-row {
  row-gap: 1rem;
  padding: 0 2rem;
}
@media (min-width: 576px) and (max-width: 767.9808px) {
  .banner-row {
    row-gap: 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 991.9808px) {
  .banner-row {
    row-gap: 2rem;
    padding: unset;
  }
}
@media (min-width: 992px) and (max-width: 1199.9808px) {
  .banner-row {
    row-gap: 2rem;
    padding: unset;
  }
}
@media (min-width: 1200px) {
  .banner-row {
    padding: unset;
  }  
}
/* -----------------------------------------
Back To Top
----------------------------------------- */
#back-to-top {
  display: flex;
  align-items: center;
  writing-mode: vertical-rl;
  background-color: #333;
  color: #fff;
  padding: 1.5rem .75rem 2rem;
  border-radius: 2.25rem;
  column-gap: 1rem;
  font-size: .875rem;
  position: absolute;
  right: 1rem;
  top: 1rem;
}
@media (min-width: 992px) {
  #back-to-top {
    top: inherit;
    bottom: 1rem;
    right: 1rem;
  }
}
/* -----------------------------------------
Bradcrumb
----------------------------------------- */
.breadcrumb-container {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.breadcrumb {
  display: block;
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.breadcrumb-item:first-child {
  position: relative;
  padding-left: 1.125rem;
}
.breadcrumb-item {
  white-space: nowrap;
  font-size: .75rem;
  color: #555;
  line-height: 1;
  display: inline;
}
.breadcrumb-item+.breadcrumb-item {
  padding-left: .25rem;
}
.breadcrumb-item+.breadcrumb-item::before {
  padding-right: .25rem;
  float: inherit;
}
.breadcrumb-item:last-child {
  color: #888;
}
.breadcrumb-item br {
  display: none;
}
.breadcrumb-item a {
  color: #555;
}
.breadcrumb-item a:hover {
  color: #096FC8;
  text-decoration: none;
}
.breadcrumb-item+.breadcrumb-item::before {
  content: "\e5cc";
  color: #999;
  vertical-align: text-top;
}
.breadcrumb-item:first-child::before {
  content: "\e88a";
  font-size: 1rem;
  font-variation-settings: 'FILL' 1;
  position: absolute;
  top: -0.125rem;
  left: 0;
}
/* -----------------------------------------
CTA
----------------------------------------- */
.slide-anime-nav {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  justify-content: right;
  position: fixed;
  right: 2rem;
  z-index: 1000;
}
.slide-anime-nav.document-download {
  top: 9.375rem;
}
.slide-anime-nav.demo-trail {
  top: 14.375rem;
}
.slide-anime-nav-inner {
  border-radius: 4rem;
  width: 4rem;
  height: 4rem;
  padding: 0 1.25rem;
  transition: transform 0.15s ease .15s;
  transform: translateX(0);
  display: flex;
  align-items: center;
  justify-content: center;
}
.slide-anime-nav-inner:hover {
  width: 100%;
  padding: 0 2rem;
  transform: translateX(1rem);
}
.slide-anime-nav-inner.document-download,.slide-anime-nav-inner.document-download a:hover {
  background-color: #E36035;
}
.slide-anime-nav-inner.demo-trail, .slide-anime-nav-inner.demo-trail a:hover {
  background-color: #414993;
  top: 8.75rem;
}
.slide-anime-nav-inner a {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;
  text-decoration: none;
  column-gap: .5rem;
}
.slide-anime-nav-inner a:hover {
  text-decoration: none;
}
.slide-anime-nav-inner:hover a::after {
  display: block;
  content: attr(data-text);
  font-weight: bold;
}