@charset "UTF-8";
/* ================================================ 
	KV 
==============================================================================================================================================================*/
#kv {
  margin-bottom: 30px;
  width: 100%;
  height: 100vh;
  min-height: 500px;
  max-height: 900px;
  z-index: 1;
  overflow: hidden;
  position: relative; }
  #kv #background-video {
    position: relative;
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
    object-fit: cover;
    background: url("../img/bg_kv.png") no-repeat center center;
    background-size: cover; }
  #kv .key {
    position: absolute;
    width: 94%;
    max-width: 681px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
    #kv .key h1 {
      margin-top: .4em;
      text-align: center;
      font-size: 2.2rem;
      line-height: 150%; }
  #kv h2 {
    position: absolute;
    width: 94%;
    bottom: 40px;
    left: 50%;
    transform: translate(-50%, 0);
    color: #003C8A;
    font-size: 1.4rem;
    line-height: 150%;
    font-weight: bold;
    text-align: center; }
  #kv .contat-btn {
    position: absolute;
    bottom: 10px;
    right: 20px;
    max-width: 156px; }
    #kv .contat-btn a {
      transition: .6s; }
      #kv .contat-btn a:hover {
        opacity: .7; }

/* ================================================ 
	about
==============================================================================================================================================================*/
#about {
  margin-bottom: 130px; }
  #about .inner {
    margin: 0 auto;
    padding-top: 70px;
    max-width: 1200px;
    width: 90%; }
    #about .inner h2 {
      text-align: center;
      font-size: 1.0rem;
      line-height: 150%;
      font-weight: 500; }
    #about .inner .image {
      margin-top: 100px;
      text-align: center;
      position: relative;
      z-index: 11; }
    #about .inner .about-info {
      display: flex;
      position: relative;
      top: -60px;
      margin-bottom: -60px;
      z-index: 10; }
      #about .inner .about-info li {
        width: 48%;
        margin-right: 4%;
        box-sizing: border-box;
        padding: 60px 35px 70px;
        background: #fff;
        border-radius: 16px;
        font-size: 1.0rem;
        line-height: 180%; }
        #about .inner .about-info li:last-child {
          margin-right: 0; }
        #about .inner .about-info li h3 {
          color: #003C8A;
          text-align: center;
          font-size: 1.8rem;
          line-height: 150%;
          margin-bottom: 30px; }
    #about .inner .about-function {
      margin-top: 150px; }
      #about .inner .about-function h3 {
        color: #003C8A;
        text-align: center;
        font-size: 1.6rem;
        line-height: 150%;
        font-variant: 500; }
      #about .inner .about-function ul {
        margin-top: 80px;
        display: flex; }
        #about .inner .about-function ul li {
          width: 32%;
          margin-right: 2%;
          border-radius: 16px;
          background: #fff;
          box-sizing: border-box;
          padding: 60px 40px 40px;
          position: relative; }
          #about .inner .about-function ul li:last-child {
            margin-right: 0; }
          #about .inner .about-function ul li .point {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%, -50%); }
          #about .inner .about-function ul li figure {
            text-align: center; }
          #about .inner .about-function ul li h4 {
            margin-top: 1.5em;
            color: #003C8A;
            text-align: center;
            font-size: 1.4rem;
            line-height: 150%;
            font-variant: 500; }
          #about .inner .about-function ul li p {
            margin-top: 1.2em;
            font-size: 1.0rem;
            line-height: 200%; }

/* ================================================ 
	plugin
==============================================================================================================================================================*/
#plugin {
  margin-bottom: 130px; }
  #plugin .inner {
    margin: 0 auto;
    padding-top: 70px;
    max-width: 1200px;
    width: 90%; }
    #plugin .inner h2 {
      text-align: center;
      font-size: 1.0rem;
      line-height: 150%;
      font-weight: 500; }
    #plugin .inner ul {
      margin-top: 80px;
      display: flex;
      flex-flow: row wrap; }
      #plugin .inner ul li {
        cursor: pointer;
        width: 32%;
        margin-right: 2%;
        margin-bottom: 2%;
        background: #fff;
        border-radius: 20px;
        box-sizing: border-box;
        padding: 20px;
        color: #000;
        text-decoration: none;
        position: relative;
        transition: .6s;
        border: 2px #fff solid; }
        #plugin .inner ul li::before {
          content: '';
          width: 16px;
          height: 16px;
          position: absolute;
          top: 20px;
          right: 20px;
          background: url("../img/plus.svg") no-repeat;
          background-size: 100% auto; }
        #plugin .inner ul li:nth-child(3n) {
          margin-right: 0; }
        #plugin .inner ul li:hover {
          border-color: #ccc; }
        #plugin .inner ul li h3 {
          color: #003C8A;
          font-size: 1.0rem;
          line-height: 150%;
          text-align: center; }
        #plugin .inner ul li p {
          margin-top: 1em;
          text-align: center;
          font-size: .9rem;
          line-height: 150%; }
    #plugin .inner .environment {
      margin-top: 80px; }
      #plugin .inner .environment h2 {
        color: #003C8A;
        text-align: center;
        font-size: 2.0rem;
        line-height: 150%;
        font-weight: 500; }
      #plugin .inner .environment p {
        margin-top: 40px;
        text-align: center;
        font-size: 1.0rem;
        line-height: 180%; }
        #plugin .inner .environment p a {
          color: #FF0089;
          text-decoration: none; }
          #plugin .inner .environment p a:hover {
            text-decoration: underline; }
      #plugin .inner .environment .environment-cont {
        margin-top: 40px;
        padding: 50px;
        background: #fff;
        border-radius: 20px; }
        #plugin .inner .environment .environment-cont h3 {
          text-align: center;
          font-size: 1.6rem;
          line-height: 150%; }
        #plugin .inner .environment .environment-cont .requirements {
          margin-top: 30px;
          display: flex;
          justify-content: center; }
          #plugin .inner .environment .environment-cont .requirements .flex-parts:last-child {
            margin-left: 5%; }
          #plugin .inner .environment .environment-cont .requirements .flex-parts dl {
            display: flex;
            margin-top: 1.4em; }
            #plugin .inner .environment .environment-cont .requirements .flex-parts dl dt {
              width: 160px;
              color: #0065B4;
              font-size: 1.0rem;
              line-height: 180%;
              font-weight: bold; }
            #plugin .inner .environment .environment-cont .requirements .flex-parts dl dd {
              font-size: 1.0rem;
              line-height: 180%;
              text-indent: -1em;
              padding-left: 1em; }

/* モーダルの共通スタイル */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1000; }

/* 表示状態 */
.modal.show {
  opacity: 1;
  visibility: visible; }

/* モーダル内容 */
.modal-content {
  background: #fff;
  padding: 60px 50px 30px 50px;
  border-radius: 16px;
  max-width: 900px;
  box-sizing: border-box;
  width: 90%;
  position: relative; }
  .modal-content .scroll {
    padding-right: 30px;
    height: 80vh;
    overflow: auto; }
  .modal-content h2 {
    color: #003C8A;
    font-size: 1.4rem;
    line-height: 150%; }
  .modal-content .content {
    font-size: 1.1rem;
    line-height: 180%;
    font-weight: bold; }
  .modal-content .txt {
    margin-top: 20px; }
    .modal-content .txt p {
      margin-bottom: 1em;
      font-size: 1.0rem;
      line-height: 180%; }
      .modal-content .txt p:last-child {
        margin-bottom: 0; }
      .modal-content .txt p.color1 {
        color: #FF0089; }
  .modal-content .features {
    margin-top: 30px; }
    .modal-content .features h3 {
      margin-bottom: .5em;
      color: #003C8A;
      font-size: 1.0rem;
      line-height: 150%; }
    .modal-content .features ul li {
      font-size: .9rem;
      line-height: 180%;
      text-indent: -1.0em;
      padding-left: 1em; }
    .modal-content .features p {
      margin-bottom: 1em;
      font-size: 1.0rem;
      line-height: 180%; }
      .modal-content .features p:last-child {
        margin-bottom: 0; }
      .modal-content .features p.color1 {
        color: #FF0089; }
  .modal-content .image {
    margin-top: 25px; }

/* 閉じるボタン */
.close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  cursor: pointer; }

/* スクロールロック */
body.modal-open {
  overflow: hidden; }

/* ================================================ 
	price
==============================================================================================================================================================*/
#price {
  margin-bottom: 130px; }
  #price .inner {
    margin: 0 auto;
    padding-top: 70px;
    max-width: 1200px;
    width: 90%; }
    #price .inner h2 {
      text-align: center;
      font-size: 1.0rem;
      line-height: 150%;
      font-weight: 500; }
    #price .inner .txt p {
      margin-bottom: 1.5em;
      font-size: 1.0rem;
      line-height: 200%; }
      #price .inner .txt p:last-child {
        margin-bottom: 0; }
      #price .inner .txt p a {
        color: #FF0089;
        text-decoration: none; }
        #price .inner .txt p a:hover {
          text-decoration: underline; }
    #price .inner .annotation {
      margin-top: 60px; }
      #price .inner .annotation p {
        font-size: .9rem;
        line-height: 200%;
        text-indent: -1.3em;
        padding-left: 1.3em; }
    #price .inner .tab-pattern1 {
      margin-top: 50px;
      display: flex;
      justify-content: center;
      align-items: flex-end; }
      #price .inner .tab-pattern1 li {
        text-align: center;
        color: #fff;
        width: 48%;
        box-sizing: border-box;
        margin-right: 5px;
        padding: 10px 20px 10px;
        border-radius: 16px 16px 0 0;
        background: #42B0E8;
        font-size: 1.4rem;
        line-height: 150%;
        font-weight: bold;
        cursor: pointer; }
        #price .inner .tab-pattern1 li.tab-pattern1-active {
          background: #0065B4; }
        #price .inner .tab-pattern1 li:last-child {
          margin-right: 0; }
    #price .inner .tab-pattern1-content-area {
      padding: 60px;
      background: #fff;
      border-radius: 0 0 16px 16px; }
      #price .inner .tab-pattern1-content-area .tab-pattern1-content {
        display: none; }
        #price .inner .tab-pattern1-content-area .tab-pattern1-content.show {
          display: block; }
      #price .inner .tab-pattern1-content-area .sw table {
        margin-top: 60px;
        width: 100%;
        border-collapse: collapse;
        border-top: 1px #D8D8D8 solid;
        border-left: 1px #D8D8D8 solid; }
        #price .inner .tab-pattern1-content-area .sw table th {
          background: #F2F4F7;
          border-right: 1px #D8D8D8 solid;
          border-bottom: 1px #D8D8D8 solid;
          padding: 50px 30px;
          font-size: 1.2rem;
          line-height: 150%; }
        #price .inner .tab-pattern1-content-area .sw table td {
          border-right: 1px #D8D8D8 solid;
          border-bottom: 1px #D8D8D8 solid;
          padding: 50px 30px; }
        #price .inner .tab-pattern1-content-area .sw table thead th {
          color: #0065B4;
          font-weight: bold; }
        #price .inner .tab-pattern1-content-area .sw table tbody th {
          width: 220px;
          text-align: left;
          font-weight: bold; }
          #price .inner .tab-pattern1-content-area .sw table tbody th span {
            margin-top: .5em;
            display: block;
            font-size: .8rem;
            line-height: 180%;
            font-weight: normal; }
        #price .inner .tab-pattern1-content-area .sw table tbody td {
          text-align: center;
          font-size: 2.4rem;
          line-height: 180%;
          font-weight: bold; }
          #price .inner .tab-pattern1-content-area .sw table tbody td.color1 {
            color: #FF0089; }
          #price .inner .tab-pattern1-content-area .sw table tbody td span {
            font-size: 1.2rem;
            line-height: 180%; }
      #price .inner .tab-pattern1-content-area .cloud {
        margin-top: 60px;
        height: 400px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; }
        #price .inner .tab-pattern1-content-area .cloud table {
          width: 100%;
          border-collapse: collapse;
          border-top: 1px #D8D8D8 solid;
          border-left: 1px #D8D8D8 solid; }
          #price .inner .tab-pattern1-content-area .cloud table th {
            width: calc(100% / 8);
            background: #F2F4F7;
            border-right: 1px #D8D8D8 solid;
            border-bottom: 1px #D8D8D8 solid;
            padding: 10px;
            font-size: 1.0rem;
            line-height: 150%; }
          #price .inner .tab-pattern1-content-area .cloud table td {
            width: calc(100% / 8);
            border-right: 1px #D8D8D8 solid;
            border-bottom: 1px #D8D8D8 solid;
            padding: 10px; }
          #price .inner .tab-pattern1-content-area .cloud table thead {
            position: sticky;
            top: 0;
            z-index: 2; }
            #price .inner .tab-pattern1-content-area .cloud table thead th {
              font-size: 1.0rem;
              line-height: 150%; }
            #price .inner .tab-pattern1-content-area .cloud table thead td {
              font-size: 1.0rem;
              line-height: 150%;
              background: #E4E7EB;
              text-align: center;
              font-weight: bold; }
          #price .inner .tab-pattern1-content-area .cloud table tbody th {
            text-align: left;
            font-size: 1.0rem;
            line-height: 150%; }
            #price .inner .tab-pattern1-content-area .cloud table tbody th span {
              margin-top: .5em;
              display: block;
              font-size: .8rem;
              line-height: 180%;
              font-weight: normal; }
          #price .inner .tab-pattern1-content-area .cloud table tbody td {
            text-align: center;
            font-size: 1.0rem;
            line-height: 150%; }
            #price .inner .tab-pattern1-content-area .cloud table tbody td span {
              display: block;
              font-size: .8rem;
              line-height: 150%; }
          #price .inner .tab-pattern1-content-area .cloud table tbody tr:nth-child(odd) td {
            background: #F2F4F7; }
          #price .inner .tab-pattern1-content-area .cloud table tbody tr:nth-child(even) td {
            background: #fff; }
    #price .inner .comparison {
      margin: 150px 0 40px; }
      #price .inner .comparison h2 {
        color: #003C8A;
        text-align: center;
        font-size: 2.0rem;
        line-height: 150%; }
      #price .inner .comparison .txt {
        text-align: center;
        margin-top: 30px; }
        #price .inner .comparison .txt p {
          margin-bottom: 1.5em;
          font-size: 1.0rem;
          line-height: 200%; }
          #price .inner .comparison .txt p:last-child {
            margin-bottom: 0; }
      #price .inner .comparison .table-cover {
        margin-top: 60px;
        height: 600px;
        overflow-y: auto; }
      #price .inner .comparison table {
        width: 100%;
        border-collapse: collapse; }
        #price .inner .comparison table th {
          background: #F2F4F7;
          border-right: 1px #D8D8D8 solid;
          border-bottom: 1px #D8D8D8 solid;
          padding: 30px 20px;
          font-size: 1.2rem;
          line-height: 120%; }
        #price .inner .comparison table td {
          border-right: 1px #D8D8D8 solid;
          border-bottom: 1px #fff solid;
          padding: 40px 20px; }
        #price .inner .comparison table thead {
          position: sticky;
          top: 0;
          z-index: 2; }
          #price .inner .comparison table thead th {
            color: #fff;
            font-weight: bold;
            background: #0065B4; }
          #price .inner .comparison table thead td {
            background: #F2F4F7; }
        #price .inner .comparison table tbody th {
          width: 210px;
          text-align: left;
          font-weight: bold;
          background: #D5E4F2;
          font-size: 1.0rem;
          line-height: 180%; }
          #price .inner .comparison table tbody th span {
            margin-top: .5em;
            display: block;
            font-size: .8rem;
            line-height: 180%;
            font-weight: normal; }
        #price .inner .comparison table tbody td {
          text-align: center;
          font-size: 1.0rem;
          line-height: 180%; }
        #price .inner .comparison table tbody tr:nth-child(odd) td {
          background: #F2F4F7; }
        #price .inner .comparison table tbody tr:nth-child(even) td {
          background: #fff; }

/* ================================================ 
	contact
==============================================================================================================================================================*/
#contact {
  padding-bottom: 100px; }
  #contact .inner {
    margin: 0 auto;
    max-width: 770px;
    padding-top: 70px;
    width: 90%; }
    #contact .inner h2 {
      text-align: center;
      font-size: 1.0rem;
      line-height: 150%; }
    #contact .inner p {
      margin-top: 40px;
      text-align: center;
      font-size: 1.1rem;
      line-height: 180%; }

/* ================================================ 

	TABLET 

==============================================================================================================================================================*/
@media (min-width: 768px) and (max-width: 1024px) {
  /* ================================================ 
  	KV 
  ==============================================================================================================================================================*/
  #kv .key {
    width: 80%; }

  /* ================================================ 
  	about
  ==============================================================================================================================================================*/
  #about {
    margin-bottom: 130px; }
    #about .inner {
      margin: 0 auto;
      padding-top: 70px;
      max-width: 1200px;
      width: 94%; }
      #about .inner h2 {
        text-align: center;
        font-size: 1.0rem;
        line-height: 150%; }
      #about .inner .image {
        margin-top: 100px;
        text-align: center;
        position: relative;
        z-index: 11; }
      #about .inner .about-info {
        display: flex;
        position: relative;
        top: -60px;
        margin-bottom: -60px;
        z-index: 10; }
        #about .inner .about-info li {
          width: 48%;
          margin-right: 4%;
          box-sizing: border-box;
          padding: 60px 25px 40px;
          background: #fff;
          border-radius: 16px;
          font-size: 1.0rem;
          line-height: 180%; }
          #about .inner .about-info li:last-child {
            margin-right: 0; }
          #about .inner .about-info li h3 {
            color: #003C8A;
            text-align: center;
            font-size: 1.8rem;
            line-height: 150%;
            margin-bottom: 30px; }
      #about .inner .about-function {
        margin-top: 150px; }
        #about .inner .about-function h3 {
          color: #003C8A;
          text-align: center;
          font-size: 1.6rem;
          line-height: 150%;
          font-variant: 500; }
        #about .inner .about-function ul {
          margin-top: 80px;
          display: flex; }
          #about .inner .about-function ul li {
            width: 32%;
            margin-right: 2%;
            border-radius: 16px;
            background: #fff;
            box-sizing: border-box;
            padding: 60px 15px 40px;
            position: relative; }
            #about .inner .about-function ul li:last-child {
              margin-right: 0; }
            #about .inner .about-function ul li .point {
              position: absolute;
              top: 0;
              left: 50%;
              transform: translate(-50%, -50%); }
            #about .inner .about-function ul li figure {
              text-align: center; }
            #about .inner .about-function ul li h4 {
              margin-top: 1.5em;
              color: #003C8A;
              text-align: center;
              font-size: 1.4rem;
              line-height: 150%;
              font-variant: 500; }
            #about .inner .about-function ul li p {
              margin-top: 1.2em;
              font-size: 1.0rem;
              line-height: 200%; }

  /* ================================================ 
  	plugin
  ==============================================================================================================================================================*/
  #plugin .inner ul li {
    width: 49%;
    margin-right: 2%;
    margin-bottom: 2%; }
    #plugin .inner ul li:nth-child(3n) {
      margin-right: 2%; }
    #plugin .inner ul li:nth-child(2n) {
      margin-right: 0; }
  #plugin .inner .environment {
    margin-top: 80px; }
    #plugin .inner .environment h2 {
      color: #003C8A;
      text-align: center;
      font-size: 2.0rem;
      line-height: 150%; }
    #plugin .inner .environment p {
      margin-top: 40px;
      text-align: center;
      font-size: 1.0rem;
      line-height: 180%; }
      #plugin .inner .environment p a {
        color: #FF0089;
        text-decoration: none; }
        #plugin .inner .environment p a:hover {
          text-decoration: underline; }
    #plugin .inner .environment .environment-cont {
      padding: 30px; }
      #plugin .inner .environment .environment-cont h3 {
        text-align: center;
        font-size: 1.6rem;
        line-height: 150%; }
      #plugin .inner .environment .environment-cont .requirements {
        margin-top: 30px;
        display: flex;
        justify-content: center;
        flex-flow: column wrap;
        align-items: center; }
        #plugin .inner .environment .environment-cont .requirements .flex-parts:last-child {
          margin-left: 0; }
        #plugin .inner .environment .environment-cont .requirements .flex-parts dl {
          display: flex;
          margin-top: 1.4em; }
          #plugin .inner .environment .environment-cont .requirements .flex-parts dl dt {
            width: 160px;
            color: #0065B4;
            font-size: 1.0rem;
            line-height: 180%;
            font-weight: bold; }
          #plugin .inner .environment .environment-cont .requirements .flex-parts dl dd {
            font-size: 1.0rem;
            line-height: 180%;
            text-indent: -1em;
            padding-left: 1em; }

  /* モーダルの共通スタイル */
  .modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000; }

  /* 表示状態 */
  .modal.show {
    opacity: 1;
    visibility: visible; }

  /* モーダル内容 */
  .modal-content {
    padding: 50px 40px 30px 40px; }

  /* ================================================ 
  	price
  ==============================================================================================================================================================*/
  #price .inner .tab-pattern1-content-area {
    padding: 15px; }
    #price .inner .tab-pattern1-content-area .sw table th {
      font-size: 1.2rem;
      line-height: 150%; }
    #price .inner .tab-pattern1-content-area .sw table td {
      padding: 50px 30px; }
    #price .inner .tab-pattern1-content-area .sw table tbody th {
      width: 200px; }
    #price .inner .tab-pattern1-content-area .sw table tbody td {
      font-size: 1.8rem;
      line-height: 180%; }
      #price .inner .tab-pattern1-content-area .sw table tbody td span {
        font-size: 1.2rem;
        line-height: 180%; }
    #price .inner .tab-pattern1-content-area .cloud {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch; }
      #price .inner .tab-pattern1-content-area .cloud table {
        min-width: 920px; }
  #price .inner .comparison {
    margin: 150px 0 40px; }
    #price .inner .comparison h2 {
      font-size: 1.8rem;
      line-height: 150%; }
    #price .inner .comparison table th {
      font-size: 1.1rem;
      line-height: 120%; }
    #price .inner .comparison table thead th {
      color: #fff;
      font-weight: bold;
      background: #0065B4; }
    #price .inner .comparison table tbody th {
      width: 190px;
      text-align: left;
      font-weight: bold;
      background: #D5E4F2;
      font-size: 1.0rem;
      line-height: 180%; }

  /* ================================================ 
  	contact
  ==============================================================================================================================================================*/
  #contact {
    padding-bottom: 80px; }
    #contact .inner {
      margin: 0 auto;
      max-width: 770px;
      padding-top: 70px;
      width: 94%; }
      #contact .inner h2 {
        text-align: center;
        font-size: 1.0rem;
        line-height: 150%; }
      #contact .inner p {
        margin-top: 40px;
        text-align: center;
        font-size: 1.1rem;
        line-height: 180%; } }
/* ================================================ 

	SP 

==============================================================================================================================================================*/
@media screen and (max-width: 767px) {
  .view_pc {
    display: none; }

  .view_tablet {
    display: none; }

  .view_sp {
    display: block; }

  .viewpcInline {
    display: none; }

  .viewspInline {
    display: inline; }

  /* ================================================ 
  	KV 
  ==============================================================================================================================================================*/
  #kv {
    margin-bottom: 30px;
    min-height: 500px;
    max-height: 634px; }
    #kv .key {
      width: 86%;
      top: 40%;
      transform: translate(-50%, -40%); }
      #kv .key h1 {
        font-size: 1.2rem;
        line-height: 150%; }
    #kv h2 {
      bottom: 40px;
      font-size: 1.2rem;
      line-height: 150%; }
    #kv .contat-btn {
      display: none; }

  /* ================================================ 
  	about
  ==============================================================================================================================================================*/
  #about {
    margin-bottom: 10px; }
    #about .inner {
      padding-top: 70px; }
      #about .inner h2 {
        text-align: center;
        font-size: 1.0rem;
        line-height: 150%; }
      #about .inner .image {
        width: 90%;
        margin: 50px auto 0; }
      #about .inner .about-info {
        display: block;
        top: -60px;
        margin-bottom: -60px;
        z-index: 10; }
        #about .inner .about-info li {
          width: 100%;
          margin-right: 0;
          margin-bottom: 20px;
          padding: 60px 15px 30px;
          background: #fff;
          border-radius: 16px;
          font-size: .9rem;
          line-height: 180%; }
          #about .inner .about-info li:last-child {
            margin-right: 0;
            padding-top: 30px; }
          #about .inner .about-info li h3 {
            font-size: 1.2rem;
            line-height: 150%;
            margin-bottom: 20px; }
      #about .inner .about-function {
        margin-top: 70px; }
        #about .inner .about-function h3 {
          font-size: 1.4rem;
          line-height: 150%; }
        #about .inner .about-function ul {
          margin-top: 50px;
          display: block; }
          #about .inner .about-function ul li {
            width: 100%;
            margin-right: 0;
            margin-bottom: 50px;
            border-radius: 16px;
            background: #fff;
            box-sizing: border-box;
            padding: 60px 40px 40px;
            position: relative; }
            #about .inner .about-function ul li:last-child {
              margin-right: 0; }
            #about .inner .about-function ul li .point {
              max-width: 130px; }
            #about .inner .about-function ul li figure {
              text-align: center;
              margin: 0 auto;
              max-width: 140px; }
            #about .inner .about-function ul li h4 {
              margin-top: 1.5em;
              color: #003C8A;
              text-align: center;
              font-size: 1.2rem;
              line-height: 150%;
              font-variant: 500; }
            #about .inner .about-function ul li p {
              margin-top: 1.2em;
              font-size: .9rem;
              line-height: 200%; }

  /* ================================================ 
  	plugin
  ==============================================================================================================================================================*/
  #plugin {
    margin-bottom: 10px; }
    #plugin .inner ul {
      margin-top: 30px;
      display: block; }
      #plugin .inner ul li {
        width: 100%;
        margin-right: 0;
        margin-bottom: 15px;
        padding: 20px; }
        #plugin .inner ul li:nth-child(3n) {
          margin-right: 0; }
        #plugin .inner ul li:last-child {
          margin-bottom: 0; }
        #plugin .inner ul li h3 {
          font-size: 1.0rem;
          line-height: 150%;
          text-align: center; }
        #plugin .inner ul li p {
          margin-top: 1em;
          text-align: center;
          font-size: .9rem;
          line-height: 150%; }
    #plugin .inner .environment {
      margin-top: 40px; }
      #plugin .inner .environment h2 {
        font-size: 1.4rem;
        line-height: 150%; }
      #plugin .inner .environment p {
        margin-top: 10px;
        text-align: center;
        font-size: .9rem;
        line-height: 180%; }
      #plugin .inner .environment .environment-cont {
        padding: 15px; }
        #plugin .inner .environment .environment-cont h3 {
          font-size: 1.2rem;
          line-height: 150%; }
        #plugin .inner .environment .environment-cont .requirements {
          margin-top: 10px;
          display: flex;
          justify-content: center;
          flex-flow: column wrap;
          align-items: center; }
          #plugin .inner .environment .environment-cont .requirements .flex-parts:last-child {
            margin-left: 0; }
          #plugin .inner .environment .environment-cont .requirements .flex-parts dl {
            display: block;
            margin-top: 1.2em; }
            #plugin .inner .environment .environment-cont .requirements .flex-parts dl dt {
              width: 100%;
              font-size: .9rem;
              line-height: 180%; }
            #plugin .inner .environment .environment-cont .requirements .flex-parts dl dd {
              font-size: .9rem;
              line-height: 180%; }

  /* モーダルの共通スタイル */
  .modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000; }

  /* 表示状態 */
  .modal.show {
    opacity: 1;
    visibility: visible; }

  /* モーダル内容 */
  .modal-content {
    padding: 40px 10px 30px 25px; }
    .modal-content .scroll {
      padding-right: 15px;
      height: 80vh; }
    .modal-content h2 {
      font-size: 1.3rem;
      line-height: 150%; }
    .modal-content .content {
      font-size: 1.0rem;
      line-height: 180%; }
    .modal-content .txt {
      margin-top: 15px; }
      .modal-content .txt p {
        margin-bottom: .8em;
        font-size: .9rem;
        line-height: 180%; }
    .modal-content .features {
      margin-top: 20px; }
      .modal-content .features h3 {
        margin-bottom: .5em;
        color: #003C8A;
        font-size: .9rem;
        line-height: 150%; }
      .modal-content .features ul li {
        font-size: .8rem;
        line-height: 180%;
        text-indent: -1.0em;
        padding-left: 1em; }
      .modal-content .features p {
        margin-bottom: .8em;
        font-size: .9rem;
        line-height: 180%; }
    .modal-content .image {
      margin-top: 15px; }

  /* ================================================ 
  	price
  ==============================================================================================================================================================*/
  #price {
    margin-bottom: 10px; }
    #price .inner h2 {
      font-size: 1.0rem;
      line-height: 150%; }
    #price .inner .txt p {
      margin-bottom: 1.2em;
      font-size: .9rem;
      line-height: 200%; }
    #price .inner .annotation {
      margin-top: 30px; }
      #price .inner .annotation p {
        font-size: .8rem;
        line-height: 200%; }
    #price .inner .tab-pattern1 {
      margin-top: 40px; }
      #price .inner .tab-pattern1 li {
        width: 48%;
        margin-right: 5px;
        padding: 10px;
        font-size: 1.0rem;
        line-height: 150%; }
        #price .inner .tab-pattern1 li.tab-pattern1-active {
          background: #0065B4; }
        #price .inner .tab-pattern1 li:last-child {
          margin-right: 0; }
    #price .inner .tab-pattern1-content-area {
      padding: 15px; }
      #price .inner .tab-pattern1-content-area .sw table {
        display: none; }
      #price .inner .tab-pattern1-content-area .sw .sw-list {
        margin-top: 25px; }
        #price .inner .tab-pattern1-content-area .sw .sw-list:last-child {
          margin-bottom: 0; }
        #price .inner .tab-pattern1-content-area .sw .sw-list h3 {
          margin-bottom: 10px;
          color: #fff;
          text-align: center;
          font-size: 1.1rem;
          line-height: 150%;
          background: #0065B4;
          padding: 10px 5px; }
        #price .inner .tab-pattern1-content-area .sw .sw-list dl dt {
          margin-bottom: 10px;
          padding: 10px 20px;
          background: #D5E4F2;
          font-size: .9rem;
          line-height: 150%; }
          #price .inner .tab-pattern1-content-area .sw .sw-list dl dt.flex {
            display: flex;
            align-items: center; }
            #price .inner .tab-pattern1-content-area .sw .sw-list dl dt.flex p {
              width: 9em;
              margin-right: 10px; }
            #price .inner .tab-pattern1-content-area .sw .sw-list dl dt.flex span {
              flex: 1;
              font-size: .6rem;
              line-height: 150%;
              padding-left: 1em;
              text-indent: -1em; }
        #price .inner .tab-pattern1-content-area .sw .sw-list dl dd {
          margin-bottom: 20px;
          text-align: center;
          font-size: 1.4rem;
          line-height: 150%;
          font-weight: 700; }
          #price .inner .tab-pattern1-content-area .sw .sw-list dl dd.color1 {
            color: #FF0089; }
          #price .inner .tab-pattern1-content-area .sw .sw-list dl dd span {
            font-size: .9rem;
            line-height: 150%; }
        #price .inner .tab-pattern1-content-area .sw .sw-list dl:last-child dd {
          margin-bottom: 0; }
      #price .inner .tab-pattern1-content-area .cloud {
        margin-top: 30px;
        height: auto;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; }
        #price .inner .tab-pattern1-content-area .cloud table {
          min-width: 1000px; }
          #price .inner .tab-pattern1-content-area .cloud table th {
            width: 100px;
            font-size: .9rem;
            line-height: 150%; }
          #price .inner .tab-pattern1-content-area .cloud table td {
            width: calc((100% - 100px)/ 7); }
          #price .inner .tab-pattern1-content-area .cloud table thead {
            position: static; }
            #price .inner .tab-pattern1-content-area .cloud table thead th {
              font-size: .9rem;
              line-height: 150%; }
            #price .inner .tab-pattern1-content-area .cloud table thead td {
              font-size: .9rem;
              line-height: 150%; }
          #price .inner .tab-pattern1-content-area .cloud table tbody th {
            font-size: .9rem;
            line-height: 150%; }
            #price .inner .tab-pattern1-content-area .cloud table tbody th span {
              font-size: .7rem;
              line-height: 180%; }
          #price .inner .tab-pattern1-content-area .cloud table tbody td {
            font-size: .9rem;
            line-height: 150%; }
            #price .inner .tab-pattern1-content-area .cloud table tbody td span {
              font-size: .7rem;
              line-height: 150%; }
    #price .inner .comparison {
      margin: 30px 0 40px; }
      #price .inner .comparison h2 {
        font-size: 1.4rem;
        line-height: 150%; }
      #price .inner .comparison .txt {
        margin-top: 20px;
        margin-bottom: 30px; }
        #price .inner .comparison .txt p {
          margin-bottom: 1.3em;
          font-size: .9rem;
          line-height: 200%; }
          #price .inner .comparison .txt p:last-child {
            margin-bottom: 0; }
      #price .inner .comparison .table-cover {
        display: none; }
      #price .inner .comparison .comparison-list {
        margin-bottom: 30px;
        padding: 20px;
        border-radius: 16px;
        background: #fff; }
        #price .inner .comparison .comparison-list:last-child {
          margin-bottom: 0; }
        #price .inner .comparison .comparison-list h3 {
          margin-bottom: 10px;
          color: #fff;
          text-align: center;
          font-size: 1.1rem;
          line-height: 150%;
          background: #0065B4;
          padding: 10px 5px; }
        #price .inner .comparison .comparison-list dl dt {
          margin-bottom: 10px;
          padding: 10px 20px;
          background: #D5E4F2;
          font-size: .9rem;
          line-height: 150%; }
          #price .inner .comparison .comparison-list dl dt.flex {
            display: flex;
            align-items: center; }
            #price .inner .comparison .comparison-list dl dt.flex p {
              width: 9em;
              margin-right: 10px; }
            #price .inner .comparison .comparison-list dl dt.flex span {
              flex: 1;
              font-size: .6rem;
              line-height: 150%;
              padding-left: 1em;
              text-indent: -1em; }
        #price .inner .comparison .comparison-list dl dd {
          margin-bottom: 20px;
          text-align: center;
          font-size: .9rem;
          line-height: 150%; }
        #price .inner .comparison .comparison-list dl:last-child dd {
          margin-bottom: 0; }

  .sticky-col {
    position: sticky;
    left: 0;
    background-color: #fff;
    z-index: 1; }

  .scroll-hint-icon {
    top: 50px;
    left: calc(50% - 20px); }

  /* ================================================ 
  	contact
  ==============================================================================================================================================================*/
  #contact {
    padding-bottom: 50px; }
    #contact .inner h2 {
      font-size: 1.0rem;
      line-height: 150%; }
    #contact .inner p {
      margin-top: 30px;
      font-size: .9rem;
      line-height: 180%; } }