@charset "UTF-8";
/* Add here all your css styles (customizations) */
/* updated 2020.06.18 */
/* Responsive typography */
@media (max-width: 575.98px) {
  html {
    font-size: 12px;
  }
  #content-block {
    margin-top: 62px;
  }
  .mt-xs-2 {
    margin-top: 0.5rem;
  }
  .mt-xs-3 {
    margin-top: 1.0rem;
  }
  .mt-xs-4 {
    margin-top: 1.5rem;
  }
  .pb-xs-5 {
    padding-bottom: 2rem !important;
  }
  .text-xs-center {
    text-align: center !important;
  }
  .justify-content-xs-center {
    -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
  }
  p {
    line-height: 1.6;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  html {
    font-size: 12px;
  }
  .g-font-adjustable {
    font-size: 100% !important;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  html {
    font-size: 12px;
  }
}

@media (min-width: 992px) {
  .g-width-80x--lg {
    width: 80% !important;
  }
}

.table-bordered td, .table-bordered th {
  border: 1px solid #dee1e4;
}

.navbar .u-main-softek-nav-1 .nav-item:hover > .nav-link {
  color: #da5a5a !important;
}

/* u-go-to-v1 */
.u-go-to-v1 {
  color: #fff;
  background-color: rgba(44, 128, 255, 0.82) !important;
}

/* header height margin */
.header-margin {
  padding-top: 80px;
  margin-top: -80px;
}

/* 3th BG color(dark blue) */
.g-bg-third {
  background-color: #26304d !important;
}

.g-bg-third--hover:hover {
  background-color: #26304d !important;
}

/* SofTek blue BG color */
.g-bg-softekblue {
  background-color: #527bcc !important;
}

.g-bg-softekblue--hover:hover {
  background-color: #527bcc !important;
}

.g-bg-softekblue--active {
  background-color: #527bcc !important;
}

.g-brd-softekblue {
  border-color: #527bcc !important;
}

.g-brd-softekblue--hover:hover {
  border-color: #527bcc !important;
}

.g-brd-softekblue--active, .g-brd-softekblue--active.active {
  border-color: #527bcc !important;
}

.g-color-softekblue {
  color: #527bcc !important;
}

.g-color-softekblue--hover:hover {
  color: #527bcc !important;
}

.g-color-softekblue--active {
  color: #527bcc !important;
}

/* Blue base color */
.g-bg-bluebase1 {
  background-color: #f3f9ff !important;
}

.g-bg-bluebase2 {
  background-color: #e6efff !important;
}

.g-bg-bluebase3 {
  background-color: #cce5ff !important;
}

.g-bg-bluebase4 {
  background-color: #0E67C9 !important;
}

.g-bg-blue-gradation1 {
  background: url("/assets/img/Common/skyblue2_bg5x30.gif") repeat-x scroll left bottom #f3f9ff;
}

/* gray gradation color */
.g-bg-gray-f3f4f5 {
  background-color: #f3f4f5 !important;
}

.g-bg-gray-gradation1 {
  background: url("/assets/img/Common/grey-bg025-noline.gif") repeat-x scroll 0 bottom transparent;
}

/* re series BG colors */
.g-bg-orange-light {
  background-color: #fbf5dc !important;
}

/* mos-green series BG colors */
.g-bg-mosgreen {
  background-color: #e6f2df !important;
}

/* blue series colors */
.g-color-3366 {
  color: #3366ff !important;
}

.g-color-0033 {
  color: #0033cc !important;
}

.g-color-cleanblue {
  color: #527bcc !important;
}

.g-color-titleblue {
  color: #0063b2 !important;
}

.g-color-cc00 {
  color: #cc0000 !important;
}

.g-color-0E67 {
  color: #0E67C9 !important;
}

/* text highlight */
.g-text-hilight {
  background-color: #fefed0 !important;
}

/* boarder line */
.g-brd-style-double {
  border-style: double !important;
}

.g-brd-kiniro {
  border-color: #e0d7a7 !important;
}

.g-brd-kiniro2 {
  border-color: #d2c698 !important;
}

.g-brd-cecd {
  border-color: #cecdbf !important;
}

/* Anchor default color */
a {
  color: #0033cc;
}

/* text shadow  */
.g-text-shadow {
  text-shadow: 0px 1px 1px #ccc;
}

.g-text-white-shadow {
  text-shadow: 0px 1px 1px #333;
}

/* h2 title base-1 */
.title-base-1 {
  border: none;
  border-top: 3px solid #937f60;
  padding: 10px 10px 7px;
  background-color: #f8f8f8;
}

/* pre.display */
.display {
  background-color: #edf4fe;
  border: 1px solid #999;
  line-height: 120%;
  padding: 1em;
  white-space: pre;
  font-family: "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
}

.display2 {
  -webkit-box-shadow: 2px 2px 3px #dddddd;
          box-shadow: 2px 2px 3px #dddddd;
}

/* _width */
@media (min-width: 768px) {
  .g-max-width-350--md {
    max-width: 350px;
  }
  .g-font-size-14--md {
    font-size: 1rem !important;
  }
}

.g-max-width-440 {
  max-width: 440px;
}

/* font-size */
.g-font-size-10 {
  font-size: 0.7142858rem !important;
}

.g-font-size-12 {
  font-size: 0.8571428rem !important;
}

.g-font-size-1_25x {
  font-size: 1.25rem !important;
}

.g-font-size-1_16x {
  font-size: 1.16em !important;
}

.g-font-size-1_05x {
  font-size: 1.05em !important;
}

.g-font-size-0_93x {
  font-size: 93.33% !important;
}

.g-font-size-0_89x {
  font-size: 89% !important;
}

.g-font-size-0_86x {
  font-size: 86.67% !important;
}

.g-font-size-0_83x {
  font-size: 83% !important;
}

.g-font-size-0_80x {
  font-size: 80% !important;
}

.g-font-size-0_74x {
  font-size: 73.33% !important;
}

/* table padding change */
.table td, .table th {
  padding: 0.5rem 0.6rem !important;
}

/* paragraph class */
.paragraph p, .paragraph dl, .paragraph pre {
  margin-left: 1rem;
}

.paragraph h2, .paragraph h3, .paragraph h4 {
  color: #0063b2;
}

/*  2-side configuration style for bootstrap
    SID support page */
.wrapper2side {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

/* Master-slider modified css */
.ms-bullets.ms-dir-h {
  bottom: 5px !important;
}

/* ---------------------------------------------------
    SIDEBAR STYLE for 2-side
----------------------------------------------------- */
#sidebar {
  padding-top: 69px;
  padding-left: 30px;
  padding-right: 30px;
  width: 330px;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 50;
  background: #fff;
  color: #111;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  border-right: 1px solid #ddd;
}

#sidebar.active {
  margin-left: -330px;
}

#sidebar h6.subject {
  font-weight: 600;
  padding-bottom: 4px;
  margin: 30px 0px 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

#sidebar ul li a {
  padding: 0px;
  margin: 0 0 6px;
  line-height: 1.4;
  font-size: 1.0rem;
  display: block;
  text-decoration: none;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

#sidebar ul li a:hover {
  background: #eee;
}

a[data-toggle="collapse"] {
  /*   position: relative; */
}

a[aria-expanded="false"]::after, a[aria-expanded="true"]::after {
  content: '\e900';
  display: inline;
  font-family: 'hs-icons' !important;
  font-size: 10px;
  margin-left: 7px;
}

a[aria-expanded="true"]::after {
  content: '\e903';
}

ul ul a {
  font-size: 0.9rem !important;
  padding-left: 0px !important;
}

.navbar-btn {
  -webkit-box-shadow: none;
          box-shadow: none;
  outline: none !important;
  border: none;
}

/* Side bar Google 検索結果 */
.gsc-results-wrapper-overlay {
  margin-top: 90px !important;
}

/* ---------------------------------------------------
    2-side CONTENT STYLE
----------------------------------------------------- */
#content-block {
  margin-top: 69px;
  width: calc(100% - 330px);
  min-height: 100vh;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px 1rem 0px;
}

#content-block.active {
  width: 100%;
}

/* ---------------------------------------------------
    2-side MEDIAQUERIES
----------------------------------------------------- */
@media (max-width: 768px) {
  #sidebar {
    margin-left: -330px;
  }
  #sidebar.active {
    margin-left: 0;
  }
  #content-block {
    width: 100%;
  }
  #content-block.active {
    width: calc(100% - 330px);
  }
  #sidebarCollapse span {
    display: none;
  }
}

/*  pre font-size */
div.g-pa-15 > pre {
  font-size: 100%;
}

/* lead text for header-title to do center align or left align*/
.lead_text {
  font-size: 1.1em;
  text-align: center;
}

.display-768 {
  display: block;
}

@media screen and (max-width: 767px) {
  .lead_text {
    font-size: 1em;
    text-align: left;
  }
  .display-768 {
    display: none;
  }
}

/* SIDfm Blog */
.blog-rightside-list .blog-date {
  margin-bottom: 0;
  font-weight: bold;
}

.blog-rightside-list .blog-title {
  margin-top: 1em;
}

.blog-rightside-list .blog-title a {
  color: #444;
  text-decoration: none;
}

.blog-rightside-list .blog-title a:hover {
  color: #527bcc;
}

article {
  text-align: justify;
}

#blog .title-category-pos {
  position: absolute;
  top: -30px;
  right: 0;
}

#blog h1 {
  margin: 0.7em 0 1em;
  font-size: 1.8em;
  line-height: 1.3;
  padding: 1.4em 0;
  font-weight: bold;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(/assets/include/svg/svg-bg3.svg);
  border-bottom: 3px double #d6e3f2;
}

#blog article h2 {
  margin: 1.4em 0 1.0em;
  font-size: 1.4em;
  padding: 1em 1em 0.75em 10px;
  color: #000d29;
  border-left: 8px double #5b7a99;
  text-shadow: 0 1px 1px #ccc;
  background-color: #f1f3f7;
}

#blog article h3 {
  margin: 1.4em 0;
  font-size: 1.2em;
  padding-left: 6px;
  border-left: 10px solid #ccc;
  padding-left: 0.5em;
  font-weight: bold;
}

#blog h5 {
  font-size: 1.2em;
}

#blog article p {
  font-size: 1.0714em;
  font-weight: normal;
  line-height: 1.75;
  margin: 1em 0;
}

#blog .category p {
  font-size: 1rem;
  font-weight: normal;
  margin: 1em 0;
}

#blog article ul, #blog article ol {
  font-size: 1.0713em;
}

#blog article ul li, #blog article ol li {
  margin-bottom: 0.2rem;
}

@media (max-width: 575.98px) {
  #blog article p {
    font-size: 1.08em;
    line-height: 1.7;
  }
}

#blog pre {
  font-size: 1.0714rem;
  font-family: "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
}

pre.display {
  background-color: #f9f9f9;
  line-height: 140%;
  margin: 0;
  padding: 1.07143rem;
  white-space: pre;
  border: 1px solid #ccc;
  -webkit-box-shadow: 2px 2px 3px #dddddd;
          box-shadow: 2px 2px 3px #dddddd;
}

#blog img {
  padding: 0.71429rem !important;
  border: solid 1px #ddd;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  -webkit-box-shadow: 0 2px 5px #eee;
          box-shadow: 0 2px 5px #eee;
  margin: 0.715rem 0 1.2285rem;
}

#blog .category .date {
  margin-bottom: 5px;
  margin-top: 0;
  color: #007eff;
}

#blog .category h5, #blog .index-page h5 {
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1.6;
  letter-spacing: 0.03rem;
}

#blog .category a, #blog .index-page a.title {
  color: #000;
  text-decoration: none;
}

#blog .category a:hover, #blog .index-page a.title:hover {
  color: #2d6adf;
}

#blog .index-page .date {
  margin-bottom: 2px;
  margin-top: 2px;
  font-size: 0.93rem;
}

#blog .descript {
  font-size: 0.93rem;
  font-weight: normal;
  margin: 0.5em 0;
  text-align: justify;
}

#blog .sidfm-mark {
  font-weight: bold;
  color: #527bcc;
  margin: 0 0 -1.2em 1em;
  font-size: 1.2rem;
}

#blog .sidfm {
  margin: .5em 2em;
  padding: 1.5em 1.5em;
  border-radius: .5em;
  background-color: #f9faff;
  font-size: 0.96rem;
  border: 2px solid #e6e6e6;
}

#blog .example-mark {
  font-weight: bold;
  margin: 0 0 -1.2em 1em;
  font-size: 1.2rem;
  color: #b72222;
}

#blog .example {
  margin: .5em 2em;
  padding: 1.5em 1.5em;
  border-radius: .5em;
  background-color: #fff9f9;
  font-size: 0.96rem;
  border: 2px solid #e6e6e6;
}

#blog .note-mark {
  font-weight: bold;
  margin: 0 0 -1.2em 1em;
  font-size: 1.14rem;
  color: #117a8b;
}

#blog .note {
  margin: .5em 2em;
  padding: 1.5em 1.5em;
  border-radius: .5em;
  background-color: #fafffa;
  font-size: 0.96rem;
  border: 2px solid #e6e6e6;
}

/* pager arrows */
.pager {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 20px 0 40px;
  line-height: 1.4;
}

.pager .pager-prev {
  margin: 0 auto 1em 0;
  position: relative;
}

.pager .pager-prev::before {
  content: '';
  position: absolute;
  top: 50%;
  margin: -14px 0 0;
  border: 14px solid transparent;
  border-right-color: transparent;
  width: 0;
  height: 0;
  display: block;
  z-index: -2;
}

.pager .pager-prev::after {
  content: '';
  position: absolute;
  top: 50%;
  margin: -14px 0 0;
  border: 14px solid transparent;
  border-right-color: transparent;
  width: 0;
  height: 0;
  display: block;
  z-index: -1;
}

.pager .pager-next {
  margin: 0 0 1em auto;
  position: relative;
}

.pager .pager-next::before {
  content: '';
  position: absolute;
  top: 50%;
  margin: -14px 0 0;
  border: 14px solid transparent;
  border-left-color: transparent;
  width: 0;
  height: 0;
  display: block;
  z-index: -2;
}

.pager .pager-next::after {
  content: '';
  position: absolute;
  top: 50%;
  margin: -14px 0 0;
  border: 14px solid transparent;
  border-left-color: transparent;
  width: 0;
  height: 0;
  display: block;
  z-index: -1;
}

.pager .pager-prev::before {
  left: 0;
  border-right-color: #bb2a2a;
}

.pager .pager-prev:after {
  left: 2px;
  border-right-color: #fff;
}

.pager .pager-next:before {
  right: 0;
  border-left-color: #bb2a2a;
}

.pager .pager-next:after {
  right: 2px;
  border-left-color: #fff;
}

.pager .pager-prev a {
  display: block;
  padding: 15px 15px 15px 50px;
}

.pager .pager-next a {
  display: block;
  padding: 15px 50px 15px 15px;
}