@charset "UTF-8";
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
.site-body {
  margin-top: 0; }

.breadcrumb {
  margin-bottom: 0; }

.feadInBlock {
  opacity: 0;
  transform: translate(-300px, 0);
  transition: opacity 0.75s ease-out, transform 0.75s ease-out; }
  .feadInBlock.toTop {
    transform: translate(0, 100px); }
  .feadInBlock.toBottom {
    transform: translate(0, -100px); }
  .feadInBlock.toLeft {
    transform: translate(300px, 0); }
  .feadInBlock.show {
    opacity: 1;
    transform: translate(0, 0); }
    .feadInBlock.show.toTop {
      transform: translate(0, 0); }
    .feadInBlock.show.toBottom {
      transform: translate(0, 0); }
    .feadInBlock.show.toLeft {
      transform: translate(0, 0); }

.fixedBtn {
  padding: 2.75em 0.65em 1em 0.5em;
  color: #000;
  font-weight: bold;
  text-decoration: none;
  letter-spacing: 0.15em;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  border-radius: 5px 0 0 5px;
  background: #ff0;
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 50;
  transition: 0.3s all;
  transform: translateY(-50%); }
  .fixedBtn:before {
    content: "\e163";
    display: block;
    height: 1em;
    color: #005cca;
    font-size: 1.33rem;
    font-family: "Material Icons";
    position: absolute;
    top: 0.75em;
    right: 0.2em;
    transform: rotate(-30deg); }
  .fixedBtn:hover {
    color: #fff;
    background: #005cca; }
    .fixedBtn:hover:before {
      color: #fff; }

#kv {
  width: 100%;
  margin: 0 auto;
  background: url("/dcms_media/image/products_dataless_kv.webp") no-repeat 50% 50%/cover; }
  #kv > div {
    width: 1200px;
    margin: 0 auto;
    padding: 7rem 0 2.5rem 0; }
    #kv > div > div {
      display: flex;
      margin-bottom: 3rem;
      align-items: center;
      gap: 2rem; }
      #kv > div > div p {
        line-height: 1.25;
        font-size: 3rem;
        font-weight: bold; }
        #kv > div > div p span {
          color: #fff;
          font-size: 4rem;
          font-weight: bold;
          text-shadow: 10px -2px 0 #00000055; }
          #kv > div > div p span br {
            display: none; }
    #kv > div img {
      display: block;
      width: 400px;
      padding: 2rem 1rem;
      border-radius: 1rem;
      background: #ffffffc6; }
    #kv > div ul {
      display: flex;
      margin-top: 3rem;
      gap: 1rem; }
      #kv > div ul li {
        flex: 1; }
        #kv > div ul li a {
          display: block;
          padding: 1.25rem 1rem 0.25rem 1rem;
          color: #fff;
          font-size: 1.25rem;
          font-weight: bold;
          text-align: center;
          line-height: 1.25;
          text-decoration: none;
          background: #4685fb;
          transition: 0.3s; }
          #kv > div ul li a:after {
            content: "▼";
            display: block;
            text-align: center;
            transition: 0.3s;
            transform: scale(0.7, 0.4); }
          #kv > div ul li a:hover {
            color: #2f5597;
            background: #e1f0f3;
            transform: translateY(0.25rem); }
            #kv > div ul li a:hover:after {
              color: #2f5597;
              transform: scale(0.7, 0.4) translateY(0.75rem); }

section {
  padding: 10vh 0; }
  section > div {
    width: 1200px;
    margin: auto; }
    section > div .chach {
      margin-bottom: 1rem;
      font-size: 1.25rem;
      font-weight: bold; }
    section > div h2 {
      display: inline-block;
      margin: 0 0 2rem 0;
      padding: 0.25rem 1rem;
      color: #fff;
      font-size: 2rem;
      font-weight: bold;
      background: #005cca; }
      section > div h2 span {
        font-size: 1.5rem; }
    section > div h3 {
      margin: 0 0 2rem 0;
      padding: 0.25rem 1rem;
      font-size: 1.5rem;
      font-weight: bold; }
    section > div > img {
      display: block;
      width: 90%;
      margin: 1rem auto;
      border: 10px #fff solid;
      background: #fff; }

.inquiry {
  text-align: center; }
  .inquiry p {
    margin: 2em 0 1em 0;
    font-size: 1.25em;
    font-weight: bold; }
    .inquiry p br {
      display: none; }
  .inquiry a {
    display: inline-block;
    width: 40%;
    margin: 0 0 1em 0;
    padding: 0.25em 0;
    color: #333;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border-radius: 9999px;
    background: #ff0;
    transition: 0.3s all; }
    .inquiry a:hover {
      color: #fff;
      background: #005cca; }

#about {
  color: #012648;
  background: #e1f0f3; }
  #about h2 {
    color: #012648;
    background: #fff; }
    #about h2 + p {
      font-size: 1.5rem;
      font-weight: bold;
      text-align: center; }
      #about h2 + p + div {
        margin-top: 1rem;
        padding: 1.5rem 3rem;
        background: #fff; }
        #about h2 + p + div h3 {
          margin: 0;
          padding: 0;
          font-size: 1.25rem; }
        #about h2 + p + div ul {
          display: flex;
          margin: 1rem 0 0 2rem;
          font-size: 1.25rem;
          flex-wrap: wrap; }
          #about h2 + p + div ul li {
            margin: 0 3rem 0 1rem;
            list-style: disc; }
  #about .flex {
    margin-top: 3rem;
    gap: 5rem;
    position: relative; }
    #about .flex div {
      border: 1px #456 solid;
      background: #fff; }
      #about .flex div h3 {
        margin: 0;
        color: #fff;
        text-align: center;
        background: #456; }
      #about .flex div img {
        width: auto;
        padding: 1rem;
        box-sizing: border-box; }
      #about .flex div > ul {
        margin: 1rem;
        list-style: inherit; }
        #about .flex div > ul li {
          margin-left: 2rem;
          font-size: 1.25rem;
          list-style: disc; }
          #about .flex div > ul li ul li {
            margin-left: 1.5rem;
            list-style: circle; }
      #about .flex div:nth-of-type(2) {
        border: 1px #4472c4 solid; }
        #about .flex div:nth-of-type(2) h3 {
          background: #4472c4; }
    #about .flex:before {
      content: "▼";
      color: #2f5597;
      font-size: 3rem;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(-90deg); }

#bg {
  color: #fff;
  background: #2f5597; }
  #bg h2 {
    color: #2f5597;
    background: #fff; }
  #bg div .flex {
    flex-wrap: wrap;
    gap: 2rem; }
    #bg div .flex li {
      display: flex;
      width: calc(50% - 1rem);
      align-items: center;
      gap: 1rem; }
      #bg div .flex li img {
        width: 25%; }
      #bg div .flex li h3 {
        margin: 0;
        padding: 0; }
      #bg div .flex li p {
        margin-left: 1.75rem;
        font-size: 1.25rem; }
  #bg div .appeal {
    margin-top: 3rem;
    padding: 1rem;
    color: #4472c4;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    border-radius: 1rem;
    background: #e1f0f3; }

#solution .chach {
  color: #4472c4; }
#solution h2 {
  color: #fff;
  background: #4472c4; }
#solution div.b01 {
  width: 80%;
  margin: auto;
  justify-content: space-around;
  align-items: center; }
  #solution div.b01 p {
    width: 50%;
    padding: 1rem 0;
    color: #012648;
    font-size: 1.25rem;
    font-weight: bold;
    text-align: center;
    border-radius: 1rem;
    background: #e1f0f3; }
    #solution div.b01 p:nth-of-type(2) {
      width: 5rem;
      font-size: 1.5rem;
      background: none; }
  #solution div.b01 + p {
    margin: 2rem 0;
    color: #2f5597;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center; }
#solution div.b02 {
  width: 70%;
  margin: auto;
  padding: 2rem 2rem 1rem 2rem;
  color: #2f5597;
  border: 1px #4472c4 dashed;
  border-radius: 1rem;
  background: #e1f0f3;
  justify-content: space-around;
  align-items: flex-end; }
  #solution div.b02 div {
    width: 30%;
    font-weight: bold;
    text-align: center; }
    #solution div.b02 div img {
      display: block;
      padding: 1rem; }
  #solution div.b02 > p {
    width: 5rem;
    color: #4472c4;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    background: none; }

#lineup {
  background: #e1f0f3; }
  #lineup h2 {
    color: #4472c4;
    background: #fff; }
  #lineup .tableCaption {
    display: none; }
  #lineup table {
    font-size: 0.875rem; }
    #lineup table caption {
      display: none; }
    #lineup table th, #lineup table td {
      padding: 0.5rem;
      border: 1px #ccc dotted;
      border-width: 0 1px;
      background: #fff; }
    #lineup table thead tr th {
      color: #fff;
      font-weight: bold;
      white-space: nowrap;
      vertical-align: middle;
      border-color: #fff;
      background: #2f5597; }
      #lineup table thead tr th:first-child {
        border: none;
        background: none; }
    #lineup table tbody tr:nth-of-type(even) th, #lineup table tbody tr:nth-of-type(even) td {
      background: #eee; }
    #lineup table tbody tr th, #lineup table tbody tr td {
      vertical-align: middle; }
    #lineup table tbody tr th {
      color: #4472c4;
      font-weight: bold;
      white-space: nowrap; }
    #lineup table tbody tr td:nth-of-type(2) {
      text-align: center; }
    #lineup table tbody tr td ul {
      margin-left: 1.5rem;
      list-style: disc; }
      #lineup table tbody tr td ul li {
        list-style: disc; }

#SSCfA {
  color: #fff;
  background: #2f5597; }
  #SSCfA div h2 {
    display: flex;
    padding: 0;
    color: #2f5597;
    background: none;
    align-items: center;
    justify-content: space-around; }
    #SSCfA div h2 span {
      display: block;
      margin: 0 1rem 0 0;
      padding: 0 1rem;
      font-size: 2rem;
      background: #fff; }
      #SSCfA div h2 span br {
        display: none; }
    #SSCfA div h2 img {
      display: block;
      width: 400px;
      padding: 1rem;
      border-radius: 1rem;
      background: #fff; }
  #SSCfA div .extext {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center; }

#onestop {
  color: #012648;
  background: #e1f0f3; }
  #onestop div h2 {
    color: #fff;
    background: #4472c4; }
  #onestop div .extext {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center; }
  #onestop div .flex {
    margin-top: 2rem;
    gap: 1rem; }
    #onestop div .flex li {
      width: 25%;
      padding: 0 1.5rem;
      font-size: 1.25rem;
      text-align: center; }
      #onestop div .flex li img {
        display: block;
        width: 400px;
        padding: 1rem; }
      #onestop div .flex li p {
        margin-top: 0.5rem; }

@media screen and (max-width: 1024px) {
  .site-body #dcms_layoutPageBlock #kv {
    background: url("/dcms_media/image/products_dataless_kv.webp") no-repeat 70% 0/cover; }
    .site-body #dcms_layoutPageBlock #kv > div {
      width: auto; }
      .site-body #dcms_layoutPageBlock #kv > div > div {
        display: block;
        margin: 0;
        padding: 0 1rem; }
        .site-body #dcms_layoutPageBlock #kv > div > div p {
          font-size: 1.5rem; }
          .site-body #dcms_layoutPageBlock #kv > div > div p span {
            font-size: 2.75rem; }
        .site-body #dcms_layoutPageBlock #kv > div > div img {
          width: 47vw;
          margin-top: 1rem;
          padding: 1rem; }
      .site-body #dcms_layoutPageBlock #kv > div > ul {
        margin-top: 1rem;
        padding: 0 1rem;
        flex-wrap: wrap; }
        .site-body #dcms_layoutPageBlock #kv > div > ul li {
          width: calc(50% - 1.5rem);
          flex: auto; }
          .site-body #dcms_layoutPageBlock #kv > div > ul li a {
            font-size: 1rem; }
  .site-body #dcms_layoutPageBlock section > div {
    width: auto;
    padding: 0 2rem; }
    .site-body #dcms_layoutPageBlock section > div h2 {
      font-size: 1.5rem; }
  .site-body #dcms_layoutPageBlock section#bg > div .flex li h3 {
    font-size: 1rem; }
  .site-body #dcms_layoutPageBlock section#bg > div .flex li p {
    margin-left: 0;
    font-size: 0.75rem; }
  .site-body #dcms_layoutPageBlock section#bg > div .appeal {
    text-align: left; }
    .site-body #dcms_layoutPageBlock section#bg > div .appeal br {
      display: none; }
  .site-body #dcms_layoutPageBlock section#solution > div .b01 {
    width: auto; }
    .site-body #dcms_layoutPageBlock section#solution > div .b01 p {
      width: calc(50% - 1.5rem); }
      .site-body #dcms_layoutPageBlock section#solution > div .b01 p:nth-of-type(2) {
        width: 3rem; }
  .site-body #dcms_layoutPageBlock section#solution > div .b02 {
    width: auto; }
  .site-body #dcms_layoutPageBlock section#lineup > div .tableWrap {
    overflow-x: scroll; }
    .site-body #dcms_layoutPageBlock section#lineup > div .tableWrap .tableCaption {
      display: inline-block;
      margin: 0 0 0.5rem 9rem;
      padding: 0.25rem 0.5rem;
      font-size: 0.875rem;
      font-weight: bold;
      text-align: left;
      background: #ffff00; }
    .site-body #dcms_layoutPageBlock section#lineup > div .tableWrap table {
      width: 150%; }
  .site-body #dcms_layoutPageBlock section#SSCfA > div h2 {
    display: block; }
    .site-body #dcms_layoutPageBlock section#SSCfA > div h2 span {
      display: inline-block;
      margin-bottom: 0.75rem; }
  .site-body #dcms_layoutPageBlock section#onestop div .flex {
    gap: 1rem; }
    .site-body #dcms_layoutPageBlock section#onestop div .flex li {
      padding: 0; }
      .site-body #dcms_layoutPageBlock section#onestop div .flex li p {
        font-size: 0.875rem; } }
@media screen and (max-width: 500px) {
  .site-body #dcms_layoutPageBlock #kv > div {
    background: #18bad766; }
    .site-body #dcms_layoutPageBlock #kv > div > div {
      padding: 1rem; }
      .site-body #dcms_layoutPageBlock #kv > div > div p span br {
        display: block; }
      .site-body #dcms_layoutPageBlock #kv > div > div img {
        width: 80vw; }
  .site-body #dcms_layoutPageBlock section p.chach {
    font-size: 1rem; }
  .site-body #dcms_layoutPageBlock section#about > div h2 + p {
    padding: 0 0.5rem;
    font-size: 1.125rem;
    text-align: left; }
    .site-body #dcms_layoutPageBlock section#about > div h2 + p + div {
      padding: 0.5rem 0 1rem 0; }
      .site-body #dcms_layoutPageBlock section#about > div h2 + p + div h3 {
        margin: 0.5rem 0 0 0.5rem; }
  .site-body #dcms_layoutPageBlock section#about > div .flex {
    display: block; }
    .site-body #dcms_layoutPageBlock section#about > div .flex:before {
      transform: translate(-50%, -65%) rotate(0); }
    .site-body #dcms_layoutPageBlock section#about > div .flex > div:nth-of-type(1) {
      margin-bottom: 5rem; }
  .site-body #dcms_layoutPageBlock section#bg > div .flex {
    display: block; }
    .site-body #dcms_layoutPageBlock section#bg > div .flex li {
      width: auto;
      margin: 1.5rem 0; }
  .site-body #dcms_layoutPageBlock section#bg > div .appeal {
    font-size: 1rem; }
  .site-body #dcms_layoutPageBlock section#solution > div .flex.b01 {
    display: block; }
    .site-body #dcms_layoutPageBlock section#solution > div .flex.b01 p {
      width: auto; }
      .site-body #dcms_layoutPageBlock section#solution > div .flex.b01 p:nth-of-type(2) {
        padding: 0.5rem 0; }
  .site-body #dcms_layoutPageBlock section#solution > div .flex.b02 {
    display: block; }
    .site-body #dcms_layoutPageBlock section#solution > div .flex.b02 > div {
      width: 100%; }
      .site-body #dcms_layoutPageBlock section#solution > div .flex.b02 > div img {
        width: 50%;
        margin: auto;
        padding: 0; }
    .site-body #dcms_layoutPageBlock section#solution > div .flex.b02 > p {
      width: auto;
      text-align: center; }
      .site-body #dcms_layoutPageBlock section#solution > div .flex.b02 > p:nth-of-type(2) {
        transform: rotate(90deg); }
  .site-body #dcms_layoutPageBlock section#solution > div > img {
    width: 100%;
    margin: 1rem 0 0 0;
    border: none; }
  .site-body #dcms_layoutPageBlock section#lineup > div .tableWrap .tableCaption {
    width: 100%;
    margin: 0 0 0.5rem 0; }
  .site-body #dcms_layoutPageBlock section#lineup > div .tableWrap table {
    width: 300%; }
  .site-body #dcms_layoutPageBlock section#SSCfA > div h2 span {
    width: 100%;
    margin: 0;
    line-height: 1.25; }
    .site-body #dcms_layoutPageBlock section#SSCfA > div h2 span br {
      display: block; }
  .site-body #dcms_layoutPageBlock section#SSCfA > div h2 img {
    width: auto; }
  .site-body #dcms_layoutPageBlock section#SSCfA > div .extext {
    font-size: 1rem;
    text-align: left; }
  .site-body #dcms_layoutPageBlock section#SSCfA > div img {
    width: 100%;
    margin: 1rem 0; }
  .site-body #dcms_layoutPageBlock section#onestop > div .extext {
    font-size: 1rem;
    text-align: left; }
  .site-body #dcms_layoutPageBlock section#onestop > div .flex {
    flex-wrap: wrap;
    gap: 0.5rem; }
    .site-body #dcms_layoutPageBlock section#onestop > div .flex li {
      width: calc(50% - 0.25rem); }
  .site-body #dcms_layoutPageBlock section.inquiry > div a {
    width: auto;
    padding: 0 3rem; } }
/* 検索窓対応 */
.mf-filters,
.mf-search-bar,
.mf-search-box .mf-search-bar .mf-search-bar_input-buttons,
.mf-search-bar_dropdown-list_item > div {
  width: auto; }