/* Scss Document */
/* Add here all your css styles (customizations) */
.trial a.btn, a.trialbtn {
  background-color: #28a745;
  background-image: -webkit-linear-gradient(225deg, #1e9238, #7fd43e);
  background-image: -o-linear-gradient(225deg, #1e9238, #7fd43e);
  background-image: linear-gradient(225deg, #1e9238, #7fd43e); }

#pheader.g-bg-primary {
  background-color: #f59b00;
  background-image: -webkit-linear-gradient(225deg, #f59b00, #f5d400);
  background-image: -o-linear-gradient(225deg, #f59b00, #f5d400);
  background-image: linear-gradient(225deg, #f59b00, #f5d400); }

/* ----- general styles ---------- */
.g-color-swmyel {
  color: #fdc600; }

.g-color-swmorg {
  color: #f78e00; }

.g-color-swmred {
  color: #df4840; }

.g-color-swmgrn {
  color: #3d963b; }

.g-color-swmblu {
  color: #3d87c3; }

.g-color-swmgry {
  color: #4e5255; }

html > body > .main .g-bg-primary {
  color: #ffc100; }

.bg-col-yel, .bg-color-swmyel {
  background-color: #fdc600; }

.bg-col-org, .bg-color-swmorg {
  background-color: #f78e00; }

.bg-col-red, .bg-color-swmred {
  background-color: #df4840; }

.bg-col-grn, .bg-color-swmgrn {
  background-color: #3d963b; }

.bg-col-blu, .bg-color-swmblu {
  background-color: #3d87c3; }

.bg-col-gry, .bg-color-swmgry {
  background-color: #4e5255; }

.bg-grn-grd,
.g-bg-green-lineargradient {
  background-color: #28a745;
  background-image: -webkit-linear-gradient(225deg, #1e9238, #7fd43e);
  background-image: -o-linear-gradient(225deg, #1e9238, #7fd43e);
  background-image: linear-gradient(225deg, #1e9238, #7fd43e); }

.bg-yel-grd,
.g-bg-yel-lineargradient {
  background-color: #f59b00;
  background-image: -webkit-linear-gradient(225deg, #f59b00, #f5d400);
  background-image: -o-linear-gradient(225deg, #f59b00, #f5d400);
  background-image: linear-gradient(225deg, #f59b00, #f5d400); }

.bg-org-grd,
.g-bg-org-lineargradient {
  background-color: #f59b00;
  background-image: -webkit-linear-gradient(225deg, #ed6d0f, #f5d400);
  background-image: -o-linear-gradient(225deg, #ed6d0f, #f5d400);
  background-image: linear-gradient(225deg, #ed6d0f, #f5d400); }

.bg-red-grd,
.g-bg-red-lineargradient {
  background-color: #dc3545;
  background-image: -webkit-linear-gradient(225deg, #ff4040, #ffab7a);
  background-image: -o-linear-gradient(225deg, #ff4040, #ffab7a);
  background-image: linear-gradient(225deg, #ff4040, #ffab7a); }

.bg-grn-grd,
.g-bg-grn-lineargradient {
  background-color: #28a745;
  background-image: -webkit-linear-gradient(225deg, #1e9238, #7fd43e);
  background-image: -o-linear-gradient(225deg, #1e9238, #7fd43e);
  background-image: linear-gradient(225deg, #1e9238, #7fd43e); }

.bg-blu-grd,
.g-bg-blu-lineargradient {
  background-color: #007bff;
  background-image: -webkit-linear-gradient(225deg, #0050c2, #5180fa);
  background-image: -o-linear-gradient(225deg, #0050c2, #5180fa);
  background-image: linear-gradient(225deg, #0050c2, #5180fa); }

p {
  font-weight: 600; }

strong {
  font-weight: 600; }

.lead {
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
  color: #4e5255; }

p.lead, .lead p {
  text-align: left; }

.imgbox img {
  width: 100%; }

address {
  font-size: 1.2rem; }

@media all and (min-width: 960px) {
  .sp,.tb {
    display: none; } }

@media (min-width: 768px) and (max-width: 960px) {
  .sp,.pc {
    display: none; } }

@media all and (max-width: 768px) {
  .pc,.tb {
    display: none; } }

/* ----- Header menu ---------- */
.js-mega-menu {
  margin: 1.5rem 15px;
  background: #fff;
  border-radius: 8px; }

header#js-header.u-header {
  width: auto; }

/* ----- Page-header ---------- */
#pheader {
  padding: 140px 0 80px; }
  @media all and (max-width: 768px) {
    #pheader {
      padding: 120px 0 80px; } }
  #pheader h1, #pheader h2 {
    color: #fff; }
  #pheader h1 {
    font-weight: 700; }
  #pheader h2 {
    font-size: 1.2rem;
    text-align: left; }
  @media all and (max-width: 768px) {
    #pheader h2 {
      text-align: center; } }

/* ----- Section header ---------- */
header h5 {
  font-size: 1.8rem;
  font-weight: 800; }

.sec_header {
  padding: 6rem 0 3rem; }
  .sec_header h3 {
    font-size: 1.5rem; }
  .sec_header h4 {
    font-size: 1.2rem;
    color: #4e5255; }

@media all and (min-width: 769px) {
  .sec_header h2 {
    font-size: 3rem;
    color: #fdc600;
    ont-weight: 700;
    letter-spacing: 0.5rem; }
  .concept {
    padding: 7rem 0 7rem; }
    .concept .sec_header {
      background: #fdc600;
      padding: 6rem 0 6rem;
      border-radius: 8px; }
      .concept .sec_header h2, .concept .sec_header h3 {
        color: #fff; }
    .concept .sec_contet {
      margin: -4rem 0 0; }
    .concept .sec_inner_wrap {
      margin: -6rem 6rem 0rem;
      background-color: #fff;
      border: 0px solid #fdc600;
      border-radius: 8px;
      padding: 6rem 4rem 5rem 4rem; } }

@media all and (max-width: 768px) {
  .sec_header {
    padding: 3rem 0 4rem;
    background: #ffd65e; }
    .sec_header h2 {
      font-size: 2.6rem; }
    .sec_header h2, .sec_header h3 {
      color: #fff; }
  .sec_header.inverce {
    background: #fff; }
    .sec_header.inverce h2 {
      color: #fdc600;
      padding-top: 2rem; }
    .sec_header.inverce h3 {
      color: #052c52; }
    .sec_header.inverce h4 {
      color: #4e5255;
      font-size: 1.2rem;
      padding: 2rem 0; }
  .sec_content {
    margin: -4rem 0 0; }
  .sec_inner {
    background-color: #fff;
    border-radius: 8px;
    padding: 1.5rem 2rem; }
  #sec2 .container, .value .container, .cmap .container {
    width: auto; }
  #sec2 .sec_inner, .value .sec_inner, .cmap .sec_inner {
    margin: -3rem 15px 0;
    padding: 1.5rem 1rem; }
  #sec3 .sec_inner, .topics .sec_inner {
    margin: 0;
    padding: 3rem 1rem; }
  .container .sec_inner {
    margin-left: 0;
    margin-right: 0; }
  .concept .sec_inner_wrap {
    margin: 0; } }

.sec_header.inverce h2 {
  color: #fdc600;
  padding-top: 2rem; }
  .sec_header.inverce h2.g-color-swmblu {
    color: #3d87c3; }
  .sec_header.inverce h2.g-color-swmgrn {
    color: #3d963b; }
  .sec_header.inverce h2.g-color-swmyel {
    color: #fdc600; }
  .sec_header.inverce h2.g-color-swmorg {
    color: #f78e00; }
  .sec_header.inverce h2.g-color-swmred {
    color: #df4840; }

.mv_copy {
  padding-top: 4rem;
  text-align: left; }
  @media all and (max-width: 768px) {
    .mv_copy {
      padding-top: 7rem;
      text-align: center; } }
  .mv_copy .logo {
    margin-bottom: 2rem;
    text-align: center; }
    .mv_copy .logo img {
      width: 30%; }
    @media all and (min-width: 769px) {
      .mv_copy .logo {
        display: none; } }
  @media all and (min-width: 769px) {
    .mv_copy .lead {
      text-align: left; } }
  .mv_copy .bn_area {
    padding-top: 2rem; }
    .mv_copy .bn_area.slide-left {
      -webkit-animation: slide-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
      animation: slide-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
    .mv_copy .bn_area.slide-right {
      -webkit-animation: slide-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
      animation: slide-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
    .mv_copy .bn_area.slide-top {
      -webkit-animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
      animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
    @media all and (max-width: 768px) {
      .mv_copy .bn_area {
        padding-top: 1.5rem; } }
    .mv_copy .bn_area img {
      width: 400px; }
      @media all and (max-width: 768px) {
        .mv_copy .bn_area img {
          width: 340px; } }

@-webkit-keyframes slide-top {
  0% {
    -webkit-transform: translateY(100px);
    transform: translateY(100px); }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px); } }

@keyframes slide-top {
  0% {
    -webkit-transform: translateY(100px);
    transform: translateY(100px); }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px); } }

.concept, .value, .cmap, .topics {
  padding-bottom: 7rem; }

@media all and (min-width: 769px) {
  .cfooter_link {
    display: none; } }

@media all and (max-width: 768px) {
  .topcontent {
    padding: 0 1rem 0rem; } }

.topcontent .sec_inner {
  margin-top: -4rem;
  background-color: #fff;
  border-radius: 10px; }

.topcontent .sec_header {
  background: none; }
  .topcontent .sec_header h2 {
    color: #fdc600; }
    .topcontent .sec_header h2.g-color-swmgrn {
      color: #3d963b; }
    .topcontent .sec_header h2.g-color-swmblu {
      color: #3d87c3; }
    .topcontent .sec_header h2.g-color-swmred {
      color: #df4840; }
  .topcontent .sec_header h3 {
    font-size: 1.5rem; }
    @media all and (max-width: 768px) {
      .topcontent .sec_header h3 {
        color: #4e5255; } }

.topcontent.basic .sec_header h2 {
  color: #3d963b; }

.topcontent .eyecatch {
  margin-top: -1rem;
  padding-bottom: 3rem; }
  @media all and (max-width: 768px) {
    .topcontent .eyecatch {
      overflow: hidden;
      margin-top: -3rem;
      margin-right: -12px;
      margin-left: -12px; } }
  .topcontent .eyecatch img {
    border-radius: 8px; }
    @media all and (max-width: 768px) {
      .topcontent .eyecatch img {
        height: 255px;
        margin-left: 0;
        border-radius: 0; } }
  @media all and (min-width: 769px) {
    .topcontent .eyecatch.row {
      margin-left: 0;
      margin-right: 0; } }
  @media all and (max-width: 768px) {
    .topcontent .eyecatch.about-ect img {
      margin-left: 120%; } }

.topcontent .lead {
  text-align: center;
  margin: 0 auto;
  padding: 0 10rem; }
  @media all and (max-width: 768px) {
    .topcontent .lead {
      padding: 0; } }

.p-trial {
  padding: 0;
  margin: 0; }

.p-trial .eyecatch img {
  position: relative;
  left: 202px; }

.sec_header.subheader h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #3d963b; }
  .sec_header.subheader h2.g-color-swmblu {
    color: #3d87c3; }
  .sec_header.subheader h2.g-color-swmred {
    color: #df4840; }
  .sec_header.subheader h2.g-color-swmorg {
    color: #f78e00; }

.sec_header.subheader h3 {
  font-size: 1.2rem;
  color: #4e5255; }

.iteration article {
  border-radius: 10px; }
  .iteration article .atclheader {
    background-color: #fdc600;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px; }
  .iteration article .atclimg {
    border: 2px solid #fdc600;
    border-width: 0 2px; }
  .iteration article .atcltxt {
    border: 2px solid #fdc600;
    border-top-width: 0;
    border-radius: 0 0 10px 10px; }
  .iteration article.input .atclheader {
    background-color: #3d963b; }
  .iteration article.input .atclimg {
    border-color: #3d963b; }
  .iteration article.input .atcltxt {
    border-color: #3d963b; }
  .iteration article.output .atclheader {
    background-color: #f78e00; }
  .iteration article.output .atclimg {
    border-color: #f78e00; }
  .iteration article.output .atcltxt {
    border-color: #f78e00; }

.iteration h3 {
  color: #fff;
  font-size: 1.4rem; }

.squarelist li {
  padding: 0.5rem; }

.squarelist .u-icon-v2 {
  width: 4rem;
  height: 4rem;
  border: 2px solid; }
  .squarelist .u-icon-v2 > i {
    top: 56%; }

.squarelist h5 {
  margin-bottom: 0;
  font-size: 1.4rem;
  color: #4e5255; }
  @media all and (max-width: 768px) {
    .squarelist h5 {
      font-size: 1.2rem;
      text-align: left; } }

.map h3 {
  padding-bottom: 1rem; }

.routeguide .nav-tabs {
  padding: 0 10px; }
  @media all and (max-width: 768px) {
    .routeguide .nav-tabs {
      margin-bottom: -9px; } }
  .routeguide .nav-tabs .nav-item {
    font-size: 1.1rem;
    font-weight: 500; }
    @media all and (max-width: 768px) {
      .routeguide .nav-tabs .nav-item {
        width: 50%; } }
    .routeguide .nav-tabs .nav-item .nav-link {
      padding: 1.2rem 1rem;
      background-color: #bbb;
      border: 0;
      color: #eee;
      font-size: 1.2rem; }
      @media all and (max-width: 768px) {
        .routeguide .nav-tabs .nav-item .nav-link {
          padding: 1.2rem 0rem; } }
      .routeguide .nav-tabs .nav-item .nav-link.active {
        background-color: #fdc600;
        color: #fff; }

@media all and (max-width: 768px) {
  .routeguide article.stp1 {
    border-top: 2px solid #fdc600; } }

@media all and (min-width: 769px) {
  .achivelist {
    padding-top: 6rem; } }

.achivelist h3 {
  border-bottom: 2px solid #fdc600; }

.wkitem h3 {
  padding: 4rem 0 2rem; }
  @media all and (max-width: 768px) {
    .wkitem h3 {
      padding: 1rem 0; } }

@media all and (max-width: 768px) {
  .slick-track {
    padding-top: 1.5rem; } }

.trial {  }
  @media all and (min-width: 769px) {
    .trial {
      background-color: #fbfbf0; } }
  @media all and (min-width: 769px) {
    .trial .g-bg-img-hero {
      /*background: url(assets/img/bg/bg_masume.jpg);*/ } }
  @media all and (max-width: 768px) {
    .trial .mesh {
      padding-left: 0;
      padding-right: 0; } }
  .trial .mbit h2 {
    padding-top: 7.5rem; }
    @media all and (max-width: 768px) {
      .trial .mbit h2 {
        padding-top: 2rem; } }
  .trial a.btn {
    font-size: 1.4rem;
    font-weight: 500; }
    @media all and (max-width: 768px) {
      .trial a.btn {
        width: 100%; } }

@media all and (min-width: 768px) {
  .colored_list {
    margin-bottom: 4rem; }
    .colored_list .col_container > div {
      border-radius: 4px;
      margin: 0 1rem;
      padding: 4rem 1rem 2rem; }
      .colored_list .col_container > div .u-icon-v2.u-icon-size--lg {
        width: 2rem;
        height: 2rem; }
      .colored_list .col_container > div .u-icon-v2 {
        border: 0;
        width: 3rem;
        height: 3rem;
        text-align: center; }
      .colored_list .col_container > div i {
        color: #fff; }
      .colored_list .col_container > div h3 {
        color: #fff;
        font-size: 1.4rem; }
  .colored {
    padding-top: 3rem; }
    .colored .col_container > div {
      padding: 1rem 1rem 1rem; }
      .colored .col_container > div .u-icon-v2.u-icon-size--lg {
        width: 2rem;
        height: 2rem; }
      .colored .col_container > div .u-icon-v2 {
        border: 0;
        width: 3rem;
        height: 3rem;
        text-align: center; }
      .colored .col_container > div i {
        color: #fff; }
      .colored .col_container > div h3 {
        color: #fff;
        font-size: 1.4rem; }
      .colored .col_container > div div {
        border-radius: 4px;
        padding: 1rem; }
      .colored .col_container > div p {
        background-color: #fff;
        border-radius: 8px;
        padding: 1rem; } }

.pager {
  padding: 3rem 0rem;
  text-align: center; }
  .pager .pagenation ul {
    padding-left: 0; }
  .pager .pagenation li {
    list-style: none;
    display: inline;
    padding: 0 1rem;
    font-size: 1.2rem;
    font-weight: 500; }

/* ----- for device type ---------- */
@media all and (max-width: 576px) {
  html {
    /*font-size: 16px;*/ } }

@media all and (max-width: 768px) {
  html {
    font-size: 12px; }
    html > body {
      font-family: "Noto Sans JP", sans-serif; }
  .navbar .navbar-brand {
    padding: 0; }
  .navbar .navbar-toggler {
    top: 12px; }
  .hamburger {
    padding: 6px 8px 7px 6px;
    margin: 0 1.2rem;
    background-color: #fdc600;
    border-radius: 4px;
    color: white; }
    .hamburger .hamburger-box {
      width: 22px;
      height: 25px; }
    .hamburger .hamburger-inner {
      width: 100%;
      height: 2px;
      border-radius: 0;
      background-color: #fff; }
      .hamburger .hamburger-inner::after, .hamburger .hamburger-inner::before {
        width: 100%;
        height: 2px;
        border-radius: 0; }
    .hamburger .menutxt {
      padding: 0 12px 0 5px;
      font-weight: 500;
      font-size: 1.2rem; }
  h1, h2, h3 {
    font-weight: 700;
    letter-spacing: 1px; }
  h2 {
    letter-spacing: 0.2rem; }
  h1 {
    font-size: 2.5rem; }
  h2 {
    font-size: 1.8rem; }
  h3 {
    font-size: 1.3rem; }
  .u-list-inline {
    font-style: 1rem; }
  p {
    color: #444;
    font-size: 1.2rem;
    letter-spacing: 0.1rem;
    line-height: 2; }
  .g-bg-primary {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffd65e+0,f2be04+100 */
    background: #ffc100; }
  .colored_list .col_container {
    margin: 0 1rem; }
    .colored_list .col_container > div {
      border-radius: 4px;
      margin-bottom: 1rem;
      padding: 1rem; }
      .colored_list .col_container > div .u-icon-v2 {
        display: none; }
      .colored_list .col_container > div h3 {
        color: #fff; }
  .colored {
    padding-top: 5rem; }
    .colored .col_container > div {
      border-top-right-radius: 8px;
      border-top-left-radius: 8px;
      margin-top: -2.7rem;
      padding-bottom: 4rem; }
      .colored .col_container > div div {
        margin-top: 0rem; }
    .colored .col_container h3 {
      background-color: #fff;
      margin-bottom: 0;
      padding: 3rem 1rem 0.5rem;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      font-weight: 700; }
    .colored .col_container p {
      background-color: #fff;
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
      padding: 1rem;
      text-align: justify; }
    .colored .col_container > div span {
      background-color: #fff;
      border-width: 4px;
      font-weight: 700;
      margin-top: -2rem; }
    .colored .col_container > div:nth-child(1) {
      background-color: #007bff;
      /*background-image: linear-gradient(225deg, #7fd43e, #1e9238);*/
      background-image: -webkit-linear-gradient(225deg, #0050c2, #5180fa);
      background-image: -o-linear-gradient(225deg, #0050c2, #5180fa);
      background-image: linear-gradient(225deg, #0050c2, #5180fa);
      border-top-right-radius: 8px;
      border-top-left-radius: 8px;
      padding-bottom: 4rem; }
      .colored .col_container > div:nth-child(1) h3 {
        color: #007bff; }
      .colored .col_container > div:nth-child(1) span {
        color: #125cd0;
        border-color: #125cd0; }
    .colored .col_container > div:nth-child(2) {
      background-color: #dc3545;
      /*background-image: linear-gradient(225deg, #7fd43e, #1e9238);*/
      background-image: -webkit-linear-gradient(225deg, #be1715, #ed6d0f);
      background-image: -o-linear-gradient(225deg, #be1715, #ed6d0f);
      background-image: linear-gradient(225deg, #be1715, #ed6d0f); }
      .colored .col_container > div:nth-child(2) h3 {
        color: #dc3545; }
      .colored .col_container > div:nth-child(2) span {
        color: #dc3545;
        border-color: #dc3545; }
    .colored .col_container > div:nth-child(4) {
      background-color: #f59b00;
      /*background-image: linear-gradient(225deg, #7fd43e, #1e9238);*/
      background-image: -webkit-linear-gradient(225deg, #f59b00, #f5d400);
      background-image: -o-linear-gradient(225deg, #f59b00, #f5d400);
      background-image: linear-gradient(225deg, #f59b00, #f5d400); }
      .colored .col_container > div:nth-child(4) h3 {
        color: #ffc107; }
      .colored .col_container > div:nth-child(4) span {
        color: #f5b000;
        border-color: #f5b000; }
    .colored .col_container > div:nth-child(3) {
      background-color: #28a745;
      /*background-image: linear-gradient(225deg, #7fd43e, #1e9238);*/
      background-image: -webkit-linear-gradient(225deg, #1e9238, #7fd43e);
      background-image: -o-linear-gradient(225deg, #1e9238, #7fd43e);
      background-image: linear-gradient(225deg, #1e9238, #7fd43e); }
      .colored .col_container > div:nth-child(3) h3 {
        color: #28a745; }
      .colored .col_container > div:nth-child(3) span {
        color: #28a745;
        border-color: #28a745; } }

@media all and (max-width: 992px) {
  html {
    /*font-size: 12px;*/ } }

@media all and (max-width: 1200px) {
  html {
    /*font-size: 13px;*/ } }

/* Footer fixedmenu ---add190624 */
.js-go-to.u-go-to-v1 {
  bottom: 75px !important; }

.btnCont {
  position: fixed;
  right: 0;
  bottom: 15px;
  display: none; }
  .btnCont a:hover {
    color: #ffffff; }

footer ul li {
  position: relative;
  padding-left: 20px; }
  footer ul li i.g-mt-10 {
    position: absolute;
    margin-top: 0 !important;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%); }

#shortcode4 p.lead {
  color: #ffffff; }

@media all and (max-width: 768px) {
  .btnCont {
    right: 0;
    bottom: 0;
    padding: 0; }
    .btnCont a {
      width: calc(50% - 2px);
      margin: 0 !important; }
  .copyBlc {
    padding-bottom: 10vw; }
  .js-go-to.u-go-to-v1 {
    bottom: 9vw !important;
    right: 1vw !important; }
  .container .g-px-50 {
    padding-left: 0 !important;
    padding-right: 0 !important; } }

.ft-applications a.btn {
  font-size: 1.2rem;
  padding: 1.2rem 1rem; }