/********************************************pankz**************************************************************/
  #contens-pankz-bg {
    /*background-color: rgba(243,244,244,.5);*/
  }
  .page #contens-pankz-bg{
    margin-top: 90px;
    margin-bottom: 20px;
  }

/********************************************contents title&text*************************************************/
  #page-title {
    text-align: var(--left);
  }
    #page-title > p {
      text-align: var(--left);
      font-size: var(--font-size-5xl);
      font-weight: var(--font-weight800);
      color: var(--blue);
    }
  #page-text {
    text-align: var(--left);
    margin: 30px 0 50px;
  }
    #page-text > p {
      font-size: var(--font-size-md);
      font-weight: var(--font-weight300);
      line-height: var(--base-line);
    }
      #page-text > p a {
        color: var(--blue);
        text-decoration: underline;
      }
        #page-text > p a:hover {
          color: var(--green);
        }
  #block-title {
    position: var(--base-potision);
    font-size: var(--font-size-2xl);
    margin-top: 30px;
    padding-top: 20px;
  }
      #block-title::before {
        content: attr(data-en);
        position: var(--child-potision);
        left: var(--base-zero);
        color: var(--green);
        font-size: var(--font-size-md);
        font-weight: var(--font-weight400);
        font-family: luxus-brut, cursive;
        font-style: italic;
        transform: rotate(-5deg);
        top: 5px;
      }
/********************************************flow slider**************************************************************/
  .caro-flex {

  }
    .flow-carousel-cell {
      position: var(--base-potision);
      background-color: var(--white);
      width: var(--base-width);
      height: 200px;
      margin-right: 20px;
      max-width: 200px;
      padding: 10px 5px;
      border: 1px solid #ccc;
      counter-increment: gallery-cell;
    }
      .flow-carousel-cell::before {
        content: attr(data-en);
        position: var(--child-potision);
        color: var(--blue);
        font-size: var(--font-size-md);
        font-weight: var(--font-weight400);
        top: var(--base-zero);
        left: 5px;
        transform: rotate(-5deg);
      }
      .flow-carousel-cell > span {
        text-align: var(--center);
        display: var(--display-block);
      }
        .flow-carousel-cell img {
          width: var(--base-width);
          height: var(--base-height);
          max-width: 100px;
          max-height: 100px;
        }
      .flow-carousel-cell p {
        display: var(--display-block);
        text-align: var(--left);
        font-weight: var(--font-weight400);
      }
      .flow-carousel-cell p.title {
        font-size: var(--font-size-2xl);
        font-weight: var(--font-weight600);
        color: var(--green);
        border-bottom: var(--border);
      }
      .flow-carousel-cell p.text {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight400);
        text-align: var(--left);
        color: var(--font);
        padding: 10px 0 5px;
      }
/********************************************news page**************************************************************/
  #main-news-list-box {
    width: var(--base-width);
    margin: 50px auto;
  }
    #main-news-list-box > .list-box {
      position: var(--base-potision);
      border-bottom: var(--border);
      margin-bottom: 20px;
      padding-bottom: 15px;
    }
      #main-news-list-box > .list-box:after {
        content: "\e5cc";
        position: var(--child-potision);
        top: 50%;
        right: 10px;
        font-family: 'Material Icons Round';
        margin-top: -12px;
        cursor: pointer;
      }
      #main-news-list-box > .list-box > a {
        color: var(--font);
      }
        #main-news-list-box > .list-box > a:hover {
          color: var(--green);
        }
        #main-news-list-box > .list-box > a > p {
          line-height: var(--base-line);
        }
        #main-news-list-box > .list-box > a > span span.blue {
          color: var(--blue);
        }
    #main-news-list-box > .main-nt-detail {
      border-top: var(--border);
      border-bottom: var(--border);
      padding: 20px 0;
    }
      #main-news-list-box > .main-nt-detail > span.title {
        font-size: var(--font-size-2xl);
        color: var(--font);
      }
      #main-news-list-box > .main-nt-detail > p {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight300);
        line-height: var(--base-line);
        margin-top: 15px;
      }
/********************************************enterprise page********************************************************/
  .flow-box {
    margin: 30px auto;
    box-sizing: border-box;
  }
  .flow-box nav {
    display: var(--display-block);
    text-align: var(--center);
  }
    .flow {
      width: var(--base-width);
      height: auto;
      max-width: 502px;
      min-height: 400px;
      margin: 20px auto;
    }
      .flow ul {
        position: var(--base-potision);
        padding-top: 20px; 
        margin: auto;
      }
        .flow li {
          float: var(--left); 
          text-align: var(--center);
          position: var(--base-potision);
          padding: 20px 3px 0 3px; 
          list-style-type: none; 
        }
          .flow li::before,
          .flow li::after {
            content: '';
            border-top: var(--border);
            position: var(--child-potision); 
            top: var(--base-zero); 
            right: 50%;
            width: 50%; 
            height: 20px;
          }
          .flow li::after {
            border-left: var(--border);
            left: 50%;
            right: auto; 
          }
            .flow li:only-child::after,
            .flow li:only-child::before {
              content: '';
              display: none;
            }
              .flow li:only-child {
                padding-top: var(--base-zero);
              }
                .flow li:first-child::before,
                .flow li:last-child::after {
                  border: 0 none;
                }
                  .flow li:last-child::before {
                    border-right: var(--border);
                    border-radius: 0 5px 0 0;
                  }
                  .flow li:first-child::after {
                      border-radius: 5px 0 0 0;
                  }
                  .flow ul ul::before {
                    content: '';
                    position: var(--child-potision);
                    top: var(--base-zero); 
                    border-left: var(--border);
                    width: var(--base-zero);
                    height: 20px;
                    left: 50%;
                  }
          .flow li a {
            display: var(--display-inline);
            color: var(--font);
            font-size: var(--font-size-md);
            border: var(--border);
            text-decoration: none;
            text-transform: uppercase;
            padding: 5px 20px;
            border-radius: 5px;
          }
            .flow li a:hover,
            .flow li a:hover+ul li a {
              color: var(--white);
              background: var(--green);   
              border: 1px solid var(--green);
            }
            .flow li a.no:hover,
            .flow li a:hover+ul li a.no {
              color: var(--white);
              background: var(--font)!important;   
              border: var(--border);
            }
              .flow li a:hover+ul li::after, 
              .flow li a:hover+ul li::before, 
              .flow li a:hover+ul::before, 
              .flow li a:hover+ul ul::before {
                content: '';
                border-color: var(--green);
              }

/********************************************service page*******************************************************/
  #table-title {
    text-align: var(--left);
    color: var(--font);
    margin-top: 30px;
  }
    #table-title > p {
      font-size: var(--font-size-2xl);
      letter-spacing: .2em;
    }
      #table-title > p span {
        font-size: var(--font-size-4xl);
        font-weight: var(--font-weight700);
        color: var(--green);
      }
  #table-wrap {
    background: var(--white);
    height: auto;
    margin: 30px 0;
    width: 100%;
  }
    #table-wrap > table {
      width: var(--base-width);
      border-collapse: collapse;
    }
      #table-wrap > table tr:nth-child(odd) {
        background: rgba(224,255,255,.2);
      }
      #table-wrap > table tr th,
      #table-wrap > table tr td {
        text-align: var(--center);
        padding: 0 2em;
        height: 90px;
        border-bottom: 1px solid #ddd;
      }
      #table-wrap > table tr td.menu-name {
        text-align: var(--left);
        color: var(--blue);
        font-size: var(--font-size-sm);
      }
      #table-wrap > table tr th {
        font-weight: normal;
        font-size: .875rem;
        color: #666;
        background: #eee;
        border-bottom: 2px solid var(--font)!important;
        /* position: sticky;
        top: 70px; */
      }
      .table-coution {
        text-align: var(--right);
        font-size: var(--font-size-xs);
        margin-top: 10px;
      }
  #service-bg {
    background-color: rgba(204,204,204,.1);
    margin: 50px 0;
    padding: 50px 0;
  }
    .service-flow-chart {
      text-align: var(--center);
      margin-top: 15px;
    }
      .service-flow-chart img {
        width: var(--base-width);
        max-width: var(--cont-width);
      }
    .service-terms {
      margin: 20px 0 0;
    }
      .service-terms > .service-terms-title {
        background-color: var(--font);
        display: var(--display-inline);
        text-align: var(--center);
        color: var(--white);
        line-height: var(--base-line);
        padding: 0 20px;
      }
      .service-terms > .service-terms-text,
      .service-terms > .service-terms-text-coution {
        text-align: var(--left);
      }
      .service-terms > .service-terms-text-coution {
        margin-top: 10px;
      }
        .service-terms > .service-terms-text p,
        .service-terms > .service-terms-text-coution p {
          text-indent: -1em;
          padding-left: 1em;
        }
        .service-terms > .service-terms-text p {
          font-size: var(--font-size-md);
        }
        .service-terms > .service-terms-text-coution p {
          font-size: var(--font-size-xs);
        }
          .service-terms > .service-terms-text p:before {
            content: '・';
          }
          .service-terms > .service-terms-text-coution p:before {
            content: '※';
          }
  #service-premium-box {
    margin-top: 30px;
  }
    #service-premium-box > .service-premium-title {
      position: var(--base-potision);
      font-size: var(--font-size-2xl);
      display: table-cell;
      padding-left: 55px;
      letter-spacing: .2em;
    }
      #service-premium-box > .service-premium-title:before {
        border-top: solid 3px var(--blue);
        position: absolute;
        content: '';
        top: 50%;
        width: 40px;
        left: 0;
        height: 3px;
      }
/********************************************company page*******************************************************/
  #company-table {
    margin: 30px 0;
    padding: 20px 0;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }
  #company-table > table {
    width: var(--base-width);
    color: var(--font);
  }
    #company-table > table th {
      font-weight: var(--font-weight400);
      position: var(--base-potision);
      text-align: var(--left);
      width: 15%;
    }
      #company-table > table th:after {
        position: var(--child-potision);
        display: var(--display-block);
        content: "";
        width: 30px;
        height: 1px;
        background-color: #333;
        top:calc(50% - 1px);
        right:-15px;
      }
      #company-table > table td {
        text-align: var(--left);
        padding:15px 0 15px 30px;
        width: 85%;
      }
        #company-table > table td a {
          color: var(--font);
        }

  #company-img-box {
    position: var(--base-potision);
    margin: 50px 0 100px;
  }
    #company-img-box > .company-img-text {
      position: var(--child-potision);
      left: 10%;
      z-index: 2;
    }
      #company-img-box > .company-img-text p {
        font-size: var(--font-size-3xl);
        font-family: var(--font-family);
        background-color: rgba(255, 255, 255, .7);
        display: table-cell;
        writing-mode: vertical-rl;
        text-orientation: upright;
        letter-spacing: .5em;
      }
    #company-img-box > .company-img {
      position: var(--base-potision);
      text-align: var(--right);
      right: var(--base-zero);
      z-index: 1;
    }
      #company-img-box > .company-img img {
        width: var(--base-width);
        max-width: 650px;
      }
/********************************************support page*******************************************************/
  .smile-logo {
    text-align: var(--left);
  }
    .smile-logo img {
      width: var(--base-width);
      max-width: 450px;
    }
    .smile-title {
      margin-top: 30px;
      text-align: var(--left);
    }
      .smile-title > span {
        font-size: var(--font-size-2xl);
        font-weight: var(--font-weight600);
        color: var(--green);
      }
      .smile-title > p {
        font-size: var(--font-size-md);
        color: var(--font);
        line-height: var(--base-line);
        margin-top: 15px;
        margin-bottom: 4rem;
      }
        .smile-title > p.small-coution {
          font-size: var(--font-size-sm);
          line-height: 1.25em;
          margin-top: 5px;
        }
        .smile-title > p > span.under {
          text-decoration:underline wavy var(--blue);
        }
    .smile-title2 {
      text-align: var(--center);
      margin-top: 80px;
    }
      .smile-title2 > span {
        font-size: var(--font-size-4xl);
        font-weight: var(--font-weight400);
        background: -webkit-linear-gradient(0deg, #156ADF, #1dbaf5 30%, #aad6f0);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 2.5rem;
        font-weight: bold;
        position: relative;
      }
      .smile-title2 > p {
        font-size: var(--font-size-xl);
        color: var(--font);
        line-height: var(--base-line);
        margin-top: 15px;
      }
        .smile-title2 > span > span.small {
          font-size: var(--font-size-xl)!important;
          color: var(--font)!important;
        }
    .smile-title3 {
      text-align: var(--left);
      margin-top: 30px;
    }
      .smile-title3 > span {
        font-size: var(--font-size-4xl);
        font-weight: var(--font-weight600);
        color: var(--green);
        background: -webkit-linear-gradient(0deg, #156ADF, #1dbaf5 30%, #aad6f0);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 2.5rem;
        font-weight: bold;
        position: relative;

      }
      .smile-title3 > p.sub-title {
        font-size: var(--font-size-3xl);
        color: var(--font);
        margin-top: 15px;
      }
      .smile-title3 > p.sub-title2 {
        font-size: var(--font-size-md);
        color: var(--font);
        margin-top: 15px;
      }
        .smile-title3 > p > span.big {
          font-size: var(--font-size-3xl);
          font-weight: var(--font-weight900);
        }
        .smile-title3 > p.sub-title::before {
          content: attr(data-en);
          display: var(--display-block);
          color: var(--font);
          font-size: var(--font-size-xl);
          font-weight: var(--font-weight700);
        }
  .smile-plan-title1,
  .smile-plan-title2 {
    background-color: var(--white);
    border: 5px solid var(--blue);
    position: var(--base-potision);
    margin-top: 80px;
    padding: 0 .5em ;
  }
  .smile-plan-title1 > span,
  .smile-plan-title2 > span {
    color: var(--blue);
    font-size: var(--font-size-3xl);
    font-family: var(--font-family);
    padding: 0 5px;
    text-align: left;
  }
    .smile-plan-title1:before,
    .smile-plan-title2:before {
      color: var(--white);
      background: var(--blue);
      font-size: var(--font-size-2xl);
      position: absolute;
      top: -38px;
      left: -5px;
      height: 38px;
      padding: 0 1em;
    }
    .smile-plan-title1:before {
      content: 'Standard Plan';
    } 
    .smile-plan-title2:before {
      content: 'Option Plan';
    }
  .support-img {
    text-align: var(--center);
    margin: 30px 0;
  }
    .support-img img {
      width: var(--base-width);
      max-width: var(--cont-width);
    }

  .sokode-box {
    display: var(--display-flex);
    justify-content: var(--center);
    align-items: var(--cont-width);
  }
    .sokode-box > .sokode {
      position: var(--base-potision);
      width: 24px;
      height: 24px;
    }
      .sokode > .chevron {
        position: var(--child-potision);
        width: 28px;
        height: 8px;
        opacity: 0;
        transform: scale3d(0.5, 0.5, 0.5);
        animation: move 3s ease-out infinite;
      }
        .sokode > .chevron:first-child {
          animation: move 3s ease-out 1s infinite;
        }
          .sokode > .chevron:nth-child(2) {
            animation: move 3s ease-out 2s infinite;
          }
          .sokode > .chevron:before,
          .sokode > .chevron:after {
            content: ' ';
            background: var(--font);
            position: var(--child-potision);
            top: var(--base-zero);
            height: var(--base-height);
            width: 51%;
          }
          .sokode > .chevron:before {
            left: var(--base-zero);
            transform: skew(0deg, 30deg);
          }
          .sokode > .chevron:after {
            right: var(--base-zero);
            width: 50%;
            transform: skew(0deg, -30deg);
          }
            @keyframes move {
              25% {
                opacity: 1;
              }
              33% {
                opacity: 1;
                transform: translateY(30px);
              }
              67% {
                opacity: 1;
                transform: translateY(40px);
              }
              100% {
                opacity: 0;
                transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
              }
            }
            .sokode > .text {
              font-size: var(--font-size-xl);
              color: var(--font);
              display: var(--display-block);
              margin-top: 75px;
              margin-left: -30px;
              text-transform: uppercase;
              white-space: nowrap;
              opacity: .25;
              animation: pulse 2s linear alternate infinite;
            }
              @keyframes pulse {
                to {
                  opacity: 1;
                }
              }
  .smile-process {
    margin-top: 100px;
  }
  .smile-process2 {
    margin-top: 30px;
  }
  .smile-plan-img {
    margin-bottom: 40px;
  }
  .support-img {
    text-align: var(--center);
  }
    .support-img img.pc {
      display: var(--display-block);
    }
    .support-img img.sp {
      display: none;
    }

  .smile-pack-text {
    margin-top: 20px;
  }
    .smile-pack-text > p {
      font-weight: var(--font-weight300);
    }
      .smile-pack-text > p::before {
        content: '◇';
        margin-right: 5px;
      }

  .smile-pack-table {
    margin-top: 30px;
  }
  .smile-pack-table img {
    width: var(--base-width);
  }
  .sub-title-box {
    background-color: var(--blue);
    display: var(--display-inline);
    color: var(--white)!important;
    font-size: var(--font-size-xl)!important;
    padding: 2px 15px;
  }
.smile-compensate-table > table {
  width: var(--base-width);
  border-collapse: collapse;
}
  .smile-compensate-table > table th,
  .smile-compensate-table > table td {
    text-align: var(--center);
    padding: 10px;
    border: solid 1px #ccc;
    box-sizing: border-box;
  }
  .smile-compensate-table > table th {
    color: var(--white);
    font-weight: var(--font-weight400);
    
  }
    .smile-compensate-table > table td.table-left {
      text-align: var(--left);
      font-size: var(--font-size-sm);
    }
      .smile-compensate-table > table td.table-left p {
        text-indent: -1em;
        padding-left: 1em;
      }
        .smile-compensate-table > table td.table-left p:before {
          content: '※';
        }

  .smile-cost-flex > div > table {
    margin: var(--base-zero);
    width: var(--base-width);
    border-spacing: var(--base-zero);
    border-collapse: collapse;
  }
    .smile-cost-flex > div > table tbody.head {
      background: var(--font);
      border: var(--border);
      color: var(--white);
      width: var(--base-width);
      text-align: var(--center);
      padding: 10px;
    }
      .smile-cost-flex > div > table th {
        background: var(--font);
        border-left: var(--border);
        border-right: var(--border);
        color: var(--white);
        text-align: var(--left);
        border-top: 1px solid var(--white);
        border-bottom: 1px solid var(--white);
        width: 30%;
        padding: 10px;
      }
      .smile-cost-flex > div > table td {
        text-align: var(--center);
        border: var(--border);
        padding: 10px;
      }

  .smile-support-flow-text-box {
    background-color: rgba(204,204,204,.2);
    padding: 5px;
  }
    .smile-support-flow-text-box > p {
      font-size: var(--font-size-xs);
      text-indent: -1em;
      padding-left: 1em;
    }
      .smile-support-flow-text-box > p:before {
        content: '※';
      }
/********************************************request&contact**************************************************************/
  #form-text {
    background-color: rgba(204,204,204,.2);
    padding: 5px;
    margin-bottom: 1rem;
  }
    #form-text > p {
      font-size: var(--font-size-xs);
      font-weight: var(--font-weight400);
      text-indent: -1em;
      padding-left: 1em;
    }
      #form-text > p:before {
        content: '※';
      }
/********************************************support flow flex**************************************************************/
  .support-flow-flex {
    display: var(--display-flex);
    flex-wrap: var(--wrap);
    justify-content: space-around;
    align-items: stretch;
    margin: 20px 0;
  }
    .support-flow-flex > div {
      position: var(--base-potision);
      width: 20%;
    }
    .support-flow-flex > div > div.center {
      text-align: var(--center);
      margin: 15px auto;
    }
      .support-flow-flex > div > span {
        width: var(--base-width);
        display: var(--display-block);
        text-align: var(--left);
      }
      .support-flow-flex > div > div.center img {
        width: var(--base-width);
        text-align: var(--center);
        max-width: 80px;
        height: 80px;
      }
      .support-flow-flex > div > p {
        font-size: var(--font-size-sm);
      }
/********************************************process flex**************************************************************/
  .process-flex,
  .process-flex-img {
    display: var(--display-flex);
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: stretch;
  }
  .process-flex-img {
    margin-top: 10px;
  }
    .process-flex > div,
    .process-flex-img > div {
      width: calc(100% / 2);
      margin-bottom: 10px;
    }
    .process-flex-img > div {
      padding: 0 5px;
      overflow: hidden;
    }
      .process-flex > div > .process-title1,
      .process-flex > div > .process-title2,
      .process-flex > div > .process-title3,
      .process-flex > div > .process-title4,
      .process-flex > div > .process-title5,
      .process-flex > div > .process-title6 {
        font-size: var(--font-size-2xl);
        font-weight: var(--font-weight600);
        position: var(--base-potision);
        text-align: var(--left);
        padding-left: 60px;
        line-height: 1em;
      }
        .process-flex > div > .process-title1 > span > span.small,
        .process-flex > div > .process-title2 > span > span.small,
        .process-flex > div > .process-title3 > span > span.small,
        .process-flex > div > .process-title4 > span > span.small,
        .process-flex > div > .process-title5 > span > span.small,
        .process-flex > div > .process-title6 > span > span.small {
          font-size: var(--font-size-xs);
        }
          .process-flex > div > .process-title1 > span::before,
          .process-flex > div > .process-title2 > span::before,
          .process-flex > div > .process-title3 > span::before,
          .process-flex > div > .process-title4 > span::before,
          .process-flex > div > .process-title5 > span::before,
          .process-flex > div > .process-title6 > span::before {
            font-family: 'Material Icons Round';
            font-size: var(--font-size-5xl);
            color: var(--blue);
            position: var(--child-potision);
            left: var(--base-zero);
            top: 50%;
            transform: translateY(-50%);
          }
          .process-flex > div > .process-title1 > span::before {
            content: "\e400";
          }
          .process-flex > div > .process-title2 > span::before {
            content: "\e401";
          }
          .process-flex > div > .process-title3 > span::before {
            content: "\e3fb";
          }
          .process-flex > div > .process-title4 > span::before {
            content: "\e3fd";
          }
          .process-flex > div > .process-title5 > span::before {
            content: "\e3fe";
          }
          .process-flex > div > .process-title6 > span::before {
            content: "\e3ff";
          }
            .process-flex > div > .process-flex-img > div > span {
              color: var(--white);
              text-align: var(--center);
              background-color: var(--font);
              padding: 0 20px;
            }
              .process-flex > div > .process-flex-img > div > span.green {
                background-color: #E88C3B;
              }
              .process-flex > div > .process-flex-img > div img {
                width: var(--base-width);
                transition: transform .6s ease;
              }
                .process-flex > div > .process-flex-img > div img:hover {
                  transform: scale(1.1);
                }
/********************************************plan flex**************************************************************/
  #palan-flex-box {
    border: solid 1px #ccc;
    margin-bottom: 80px;
  }
  #palan-flex-box > .plan-flex {
    display: var(--display-flex);
    flex-wrap: var(--wrap);
    justify-content: var(--center);
    align-items: var(--center);
    border: var(--font);
    align-content: stretch;
  }
    #palan-flex-box > .plan-flex > .plan-title {
      width: var(--base-width);
      background-color: var(--font);
      text-align: var(--center);
      font-size: var(--font-size-2xl);
      color: var(--white);
      line-height: var(--base-line);
    }
    #palan-flex-box > .plan-flex > .compensate-coution {
      background-color: var(--blue);
    }
    #palan-flex-box > .plan-flex > .plan-child {
      height: var(--base-height);
      border-right: var(--border);
      text-align: var(--center);
      font-size: var(--font-size-3xl);      
      padding: 10px;
      width: 30%;
    }
      #palan-flex-box > .plan-flex > .plan-child > span {
        font-size: var(--font-size-sm);
      }
      #palan-flex-box > .plan-flex > .plan-child > span.block {
        display: var(--display-block);
      }
    #palan-flex-box > .plan-flex > .plan-child:nth-child(3) {
      border: none;
      flex: 1;
    }
  #palan-flex-box > .plan-coution {
    padding: 10px;
    border: none;
  }
    #palan-flex-box > .plan-coution > p {
      font-size: var(--font-size-xs);
      line-height: 1.65em;
      text-align: justify;
      text-indent: -1em;
      padding-left: 1em;
    }
    #palan-flex-box > .plan-coution > p.right {
      text-align: var(--right);
    }
      #palan-flex-box > .plan-coution > p:before {
        content: '※';
      }

  .smile-cost-flex {
    display: var(--display-flex);
    flex-wrap: var(--wrap);
    justify-content: space-around;
    align-items: stretch;
    align-content: stretch;
    margin-bottom: 80px;
  }
    .smile-cost-flex > div {
      width: 50%;
      padding: 5px;
    }
      .smile-cost-flex > div > p {
        font-size: var(--font-size-md);
        line-height: var(--base-line);
        margin-bottom: 15px;
        text-indent: -1em;
        padding-left: 1em;
      }
        .smile-cost-flex > div > p:before {
          content: '●';
        }
        .smile-cost-flex > div > span {
          font-size: var(--font-size-xs);
        }
/********************************************service premium flex**************************************************************/
  .service-premium-flex {
    display: var(--display-flex);
    flex-wrap: var(--wrap);
    justify-content: space-between;
    align-items: stretch;
    margin-top: 100px; 
  }
    .service-premium-flex > div.fourth-column {
      width: 24%;
      padding: 0 ;
    }
    .service-premium-flex > div.third-column {
      width: 32.5%;
      padding: 0 ;
    }
      .service-premium-flex > div img {
        width: var(--base-width);
      }
      .service-premium-flex > div > span.number {
        color: var(--blue);
        font-size: var(--font-size-xl);
        font-weight: var(--font-weight500);
        letter-spacing: .1em;
      }
      .service-premium-flex > div > p.service-text {
        color: var(--font);
        font-size: var(--font-size-sm);
        height: var(--base-height);
        max-height: 40px;
        margin-top: 5px;
        letter-spacing: .1em;
      }
      .service-premium-flex > div > p.sub-midashi {
        background-color: var(--blue);
        color: var(--white);
        display: var(--display-inline);
        font-size: var(--font-size-sm);
        margin-top: 20px;
        padding: 2px 15px;
      }
      .service-premium-flex > div > p.service-item-text {
        color: var(--font);
        font-size: var(--font-size-sm);
        padding: var(--base-zero);
        margin-top: 5px;
        text-indent: -1em;
        padding-left: 1em;
      }
        .service-premium-flex > div > p.service-item-text:before {
          content: '■';
        }
/********************************************request flex**************************************************************/
  #request-flex {
    display: var(--display-flex);
    align-items: stretch;
    justify-content: space-between;
    margin-bottom: 50px;
  }
    #request-flex > div {
      font-weight: var(--font-weight300);
      color: var(--font);
      width: 49%;
      background-color: rgba(204, 204, 204, .2);
      padding: 10px;
    }
      #request-flex > div > span {
        font-weight: var(--font-weight500)!important;
      }
      #request-flex > div > p {
        font-size: var(--font-size-sm);
        margin-top: 15px;
        text-indent: -1em;
        padding-left: 1em;
      }
        #request-flex > div > p:before {
          content: '●';
        }
/********************************************person flex**************************************************************/
.person-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  margin-bottom: 80px;
}
  .person-flex > div {
    width: 49%;
  }
    .person-flex > div > span {
      font-size: var(--font-size-3xl);
      font-weight: var(--font-weight500);
      color: var(--green);
    }
    .person-flex > div > p {
      font-size: var(--font-size-md);
      font-weight: var(--font-weight300);
      color: var(--font);
      line-height: var(--base-line);
      margin-bottom: 30px;
    }
    .person-flex > div > img {
      width: var(--base-width);
      max-width: 400px;
    }
.side-menu {
border: 1px solid #14161C;
background-color: #3b3f4d;
border-radius: 4px;
padding: 0px 0px;
margin: 2em auto;
list-style: none;
-webkit-box-shadow: inset 0px 2px 3px 0px rgba(0,0,0,0.4),0px 1px 2px 0px rgba(255,255,255,0.2);
box-shadow: inset 0px 2px 3px 0px rgba(0,0,0,0.4),0px 1px 2px 0px rgba(255,255,255,0.2);
}

.side-menu>li:last-child a {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom: none;
position: relative;
vertical-align: middle;
}

.side-menu>li:first-child a {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
-webkit-box-shadow: none;
box-shadow: none;
position: relative;
vertical-align: middle;
}

.side-menu>li a {
display: block;
border-radius: 0px;
border-bottom: 1px solid #292D38;
-webkit-box-shadow: inset 0px 1px 0px 0px #434756;
box-shadow: inset 0px 1px 0px 0px #434756;
color: #fff;
font-size: 16px;
font-weight: 300;
text-transform: uppercase;
padding: 15px 18px;
vertical-align: middle;
position: relative;
}
.side-menu>li a p {
display: inline-block;
vertical-align: top;
}

.side-menu>li a:hover {
display: block;
padding: 15px 18px;
margin: 0;
list-style: none;
-webkit-box-shadow: inset 0px 2px 3px 0px rgba(0,0,0,0.4),0px 1px 2px 0px rgba(255,255,255,0.2);
box-shadow: inset 0px 2px 3px 0px rgba(0,0,0,0.4),0px 1px 2px 0px rgba(255,255,255,0.2);
background-color: var(--blue);
}

.side-menu.side-menu-notifications .badge {
background-color: #B5A370;
color: #4F4836;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700;
-webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.5),inset 0px 1px 2px 0px rgba(255,255,255,0.2);
box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.5),inset 0px 1px 2px 0px rgba(255,255,255,0.2);
padding: 5px 10px;
}

.side-menu>li a .badge{
background-color: #2e323f;
color: #81889a;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700;
-webkit-box-shadow: inset 1px 1px 2px 0px rgba(0,0,0,0.5),0px 1px 2px 0px rgba(255,255,255,0.15);
box-shadow: inset 1px 1px 2px 0px rgba(0,0,0,0.5),0px 1px 2px 0px rgba(255,255,255,0.15);
padding: 5px 10px;
margin-top: 2px;
}

.alert-animated {
background-color: #B5A370;
animation: animated-alert 1s;
-moz-animation: animated-alert 1s;
-webkit-animation: animated-alert 1s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
}

.pull-right {
float: right !important;
}

.badge {
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
color: #ffffff;
line-height: 1;
vertical-align: baseline;
white-space: nowrap;
text-align: center;
background-color: #999999;
border-radius: 10px;
}

.side-menu>li a span {
margin-right: 15px;
padding-right: 15px;
font-size: 25px;
width: 45px;
color: #fff;
display: inline-block;
text-align: center;
border-right: 1px solid #292D38;
-webkit-box-shadow: 1px 0px 0px 0px #434756;
box-shadow: 1px 0px 0px 0px #434756;
}

@media only screen and (min-width: 300px) and (max-width: 767px) {
/********************************************pankz**************************************************************/
  .page #contens-pankz-bg {
    margin-top: 45px;
    margin-bottom: 20px;
  }
/********************************************contents title&text************************************************/
    #page-title > p {
      font-size: var(--font-size-4xl);
      line-height: 1em;
    }
    #page-title > span {
      line-height: var(--base-line);
    }
  #page-text {
    margin: 10px 0 30px;
  }
    #page-text > p {
      font-size: var(--font-size-xs);
    }
  #block-title {
    font-size: var(--font-size-md);
    margin-top: 10px;
    padding-top: 10px;
  }
      #block-title::before {
        top: -1px;
        font-size: var(--font-size-xs);
      }
/********************************************news page************************************************************/
  #main-news-list-box {
    margin: 20px auto;
  }
/********************************************enterprise page********************************************************/
  .flow {
    max-width: 380px;
    min-height: 350px;
    margin: auto;
  }
    .flow li a {
      padding: 5px;
      font-size: var(--font-size-xs);
    }
/********************************************service page*******************************************************/
    #table-title > p {
      font-size: var(--font-size-md);
      letter-spacing: 1px;
    }
      #table-title > p span {
        font-size: var(--font-size-3xl);
      }

      #table-wrap {
        overflow-x: scroll!important;
        overflow-y: hidden;
        white-space: nowrap;
      }

      #table-wrap table {
        width: 100%;
      }


      #table-wrap > table tr th,
      #table-wrap > table tr td {
        padding: 1em;
        height: auto;
      }
        .heading {
          /* display: none; */
        }
          #table-wrap > table tr td {
            /* display: var(--display-block); */
            font-size: var(--font-size-xs);
          }
          #table-wrap > table tr td::before {
            content: attr(data-label);
            font-size: var(--font-size-xs);
            color: var(--font);
            display: var(--display-block);
            margin-bottom: 0.25rem;
          }
            #table-wrap > table tr td.menu-name {
              text-align: var(--center);
              background: #eee;
              position: sticky;
              left: 0;
            }
            .menu-name {
              position: sticky;
              left: 0;
            }
  #service-bg {
    margin: 20px 0;
    padding: 20px 0;
  }
    .service-terms {
      margin: 10px 0 0;
    }
      .service-terms > .service-terms-title {
        font-size: var(--font-size-xs);
        padding: 0 10px;
      }
      .service-terms > .service-terms-text,
      .service-terms > .service-terms-text-coution {
        font-size: var(--font-size-sm);
      }
      .service-terms > .service-terms-text-coution {
        margin-top: 5px;
      }
        .service-terms > .service-terms-text p,
        .service-terms > .service-terms-text-coution p {
          font-size: var(--font-size-sm);
        }
        .service-terms > .service-terms-text p {
          font-size: var(--font-size-sm);
        }
        .service-terms > .service-terms-text-coution p {
          font-size: var(--font-size-xs);
        }
    #service-premium-box > .service-premium-title {
      font-size: var(--font-size-md);
      padding-left: 30px;
      letter-spacing: 0;
    }
      #service-premium-box > .service-premium-title:before {
        width: 20px;
        border-top: solid 3px var(--blue);
      }
/********************************************company page*******************************************************/

#company-table > table {
  font-weight: bold;
}

    #company-table > table th {
      font-size: var(--font-size-sm);
      width: 25%;
    }
      #company-table > table td {
        font-size: var(--font-size-sm);
        width: 75%;
      }
  #company-img-box > .company-img-text {
    top: -15px;
    left: 2%;
  }
    #company-img-box > .company-img-text p {
      letter-spacing: .1em;
      font-size: var(--font-size-xl);
    }
    #company-img-box > .company-img img {
      max-width: 300px;
      object-fit: cover;
    }
/********************************************support page*******************************************************/
    .smile-logo img {
      max-width: 300px;
    }
    .smile-title {
      margin-top: 20px;
    }
      .smile-title > span {
        font-size: var(--font-size-md);
      }
      .smile-title > p {
        font-size: var(--font-size-xs);
        margin-top: 5px;
        text-align: justify;
      }
      .smile-title2 > span {
        font-size: var(--font-size-2xl);
      }
      .smile-title2 > p {
        font-size: var(--font-size-md);
        margin-top: 5px;
      }
        .smile-title2 > span > span.small {
          font-size: var(--font-size-xs)!important;
        }
    .smile-title3 {
      margin-top: 15px;
    }
      .smile-title3 > span {
        font-size: var(--font-size-xl);
      }
      .smile-title3 > p.sub-title {
        font-size: var(--font-size-xs)!important;
        margin-top: 5px;
      }
      .smile-title3 > p.sub-title2 {
        font-size: var(--font-size-xs);
        margin-top: 5px;
      }
        .smile-title3 > p > span.big {
          font-size: var(--font-size-xl);
        }
        .smile-title3 > p.sub-title::before {
          font-size: var(--font-size-xs);
        }

  .smile-plan-title1,
  .smile-plan-title2 {
    margin-top: 50px;
  }
  .smile-plan-title1 > span,
  .smile-plan-title2 > span {
    padding: 3px 5px;
    font-size: var(--font-size-md);
  }
    .smile-plan-title1:before,
    .smile-plan-title2:before {
      font-size: var(--font-size-md);
      top: -34px;
      height: 30px;
      padding: 3px .5em 0 .5em;
    }
  .smile-pack-text {
    margin-top: 5px;
  }
    .smile-pack-text > p {
      font-weight: var(--font-weight300);
      font-size: var(--font-size-xs);
    }
  .support-img {
    margin: 30px 0 10px;
  }
    .sokode-box > .sokode {
      width: 20px;
      height: 20px;
    }
      .sokode > .chevron {
        width: 20px;
        height: 5px;
      }
      .sokode > .text {
        font-size: var(--font-size-md);
        margin-top: 60px;
      }
  .smile-process2 {
    margin-top: 10px;
  }
  .avoid-fogging {
    margin-bottom: 150px;
  }
    .support-img img.pc {
      display: none;
    }
    .support-img img.sp {
      display: var(--display-block);
    }

  .smile-pack-table {
    overflow-x: scroll;
  }
  .smile-pack-table img {
    width: 200%;
  }
  .smile-compensate-table > table .head {
    display:none;
  }
  .smile-compensate-table > table td,
  .smile-compensate-table > table th {
    font-size: var(--font-size-sm);
    display: var(--display-block);
    width: var(--base-width);
    padding: 5px ;
    border-bottom:none;
  }
  .smile-compensate-table > table td {
    display: block;
    width: 100%;
    border-bottom:none;
    text-align:center;
    display: block;
  }
  .smile-compensate-table > table td:before {
    color: var(--font);
    content: attr(data-label);
    text-align: var(--center);
    padding: 0px 10px;
    background-color: #ccc;
    width: 100%;
    display: block;
  }
  .smile-compensate-table > table tr:last-child {
    border-bottom: solid 1px #ccc;
  }

  .last td:last-child {
    border-bottom: solid 1px #ccc;
    width: 100%;
  }
  .smile-cost-flex > table {
    width: 80%;
  }
  .smile-cost-flex > table th,
  .smile-cost-flex > table td {
　　border-bottom: none;
    display: block;
    width: 100%;
  }
    .smile-cost-flex > div > table tbody.head {
      font-size: var(--font-size-xs);
      padding: 5px 0;
    }
      .smile-cost-flex > div > table th {
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight300);
        width: 30%;
        padding: 5px;
      }
      .smile-cost-flex > div > table td {
        text-align: var(--center);
        border: var(--border);
        padding: 5px;
      }
        .smile-cost-flex > div > table td:nth-child(2) {
          width: 35%;
        }
        .smile-cost-flex > div > table td:nth-child(3) {
          text-align: var(--right);
        }
/********************************************support flow flex**************************************************************/
  .support-flow-flex {
    margin: 10px 0;
    columns: 3;
  }
    .support-flow-flex > div {
      width: 30%!important;
    }
      .support-flow-flex > div > span {
        font-size: var(--font-size-sm);
      }
      .support-flow-flex > div.sp-none {
        display: none;
      }
      .support-flow-flex > div > div.center {
        margin: 10px auto;
      }
        .support-flow-flex > div > div.center img {
          max-width: 50px;
          height: 50px;
        }
/********************************************process flex**************************************************************/
  .process-flex {
    flex-wrap: wrap;
  }
    .process-flex > div {
      width: var(--base-width)!important;
    }
      .process-flex > div > .process-title1,
      .process-flex > div > .process-title2,
      .process-flex > div > .process-title3,
      .process-flex > div > .process-title4,
      .process-flex > div > .process-title5,
      .process-flex > div > .process-title6 {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight400);
        padding-left: 30px;
      }
          .process-flex > div > .process-title1 > span::before,
          .process-flex > div > .process-title2 > span::before,
          .process-flex > div > .process-title3 > span::before,
          .process-flex > div > .process-title4 > span::before,
          .process-flex > div > .process-title5 > span::before,
          .process-flex > div > .process-title6 > span::before {
            font-size: var(--font-size-3xl);
          }
            .process-flex > div > .process-flex-img > div {
              padding: 0 5px;
            }
            .process-flex > div > .process-flex-img > div > span {
              font-size: var(--font-size-xs);
              padding: 0 10px;
              vertical-align: bottom;
            }
/********************************************plan flex**************************************************************/
  #palan-flex-box {
    margin-bottom: 20px;
  }
    #palan-flex-box > .plan-flex > .plan-title {
      font-size: var(--font-size-sm);
    }
    #palan-flex-box > .plan-flex > .plan-child {
      padding: 5px 10px;
      text-align: var(--left);
      font-size: var(--font-size-sm);
    }
      #palan-flex-box > .plan-flex > .plan-child > span {
        font-size: var(--font-size-xs);
      }
  #palan-flex-box > .plan-coution {
    padding: 5px;
  }
  .smile-cost-flex {
    margin-bottom: 60px;
  }
    .smile-cost-flex > div {
      width: var(--base-width);
      padding: 0;
    }
      .smile-cost-flex > div > p {
        font-size: var(--font-size-xs);
        margin-bottom: 5px;
      }
/********************************************service premium flex**************************************************************/
  .service-premium-flex > div.fourth-column,
  .service-premium-flex > div.third-column {
    width: var(--base-width);
    padding: 0 0 20px 0;
  }
    .service-premium-flex > div > span.number {
      font-size: var(--font-size-md);
    }
    .service-premium-flex > div > p.service-text {
      height: auto;
      margin-top: 5px;
    }
    .service-premium-flex > div > p.sub-midashi {
      margin-top: 5px;
    }
    .service-premium-flex > div > p.service-item-text {
      font-size: var(--font-size-xs);
      margin-top: 5px;
    }
/********************************************request flex**************************************************************/
  #request-flex {
    display: var(--display-block);
  }
    #request-flex > div {
      width: var(--base-width);
    }
      #request-flex > div > p {
        margin-top: 10px;
        text-align: justify;
      }
/********************************************person flex**************************************************************/
.person-flex {
  margin-top: 10px;
  margin-bottom: 50px;
}
  .person-flex > div {
    width: 100%;
    margin-bottom: 20px;
    text-align: center;
  }
    .person-flex > div > span {
      font-size: var(--font-size-2xl);
    }
    .person-flex > div > p {
      font-size: var(--font-size-xs);
      margin-bottom: 15px;
    }
.download-button {
 position: relative;
 border-width: 0;
 color: white;
 font-size: 15px;
 font-weight: 600;
 border-radius: 4px;
 z-index: 1;
 text-align: center;
}

.download-button .docs {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 10px;
 min-height: 40px;
 padding: 0 10px;
 border-radius: 4px;
 z-index: 1;
 background-color: #242a35;
 border: solid 1px #e8e8e82d;
 transition: all .5s cubic-bezier(0.77, 0, 0.175, 1);
}

.download-button:hover {
 box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.download {
 position: absolute;
 inset: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 max-width: 50%;
 margin: 0 auto;
 z-index: -1;
 border-radius: 4px;
 transform: translateY(0%);
 background-color: var(--blue);
 border: var(--border);
 transition: all .5s cubic-bezier(0.77, 0, 0.175, 1);
}

.download-button:hover .download {
 transform: translateY(100%)
}

.download svg polyline,.download svg line {
 animation: docs 1s infinite;
}

@keyframes docs {
 0% {
  transform: translateY(0%);
 }

 50% {
  transform: translateY(-15%);
 }

 100% {
  transform: translateY(0%);
 }
}
}