@charset "UTF-8";
/* =====================
  components
===================== */
::-moz-selection {
  color: white; }
::selection {
  color: white; }

/*  for responsive
------------------------*/
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle; }

[data-lg] {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  position: relative; }
  @media screen and (max-width: 1199px) {
    [data-lg] {
      padding: 0 15px; } }

[data-md] {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  position: relative; }
  @media screen and (max-width: 959px) {
    [data-md] {
      padding: 0 15px; } }

[data-sm] {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  position: relative; }
  @media screen and (max-width: 639px) {
    [data-sm] {
      padding: 0 15px; } }

@media screen and (min-width: 960px) {
  .is-sp {
    display: none !important; } }

@media screen and (max-width: 959px) {
  .is-pc {
    display: none !important; } }

/*  fixed rate box
------------------------*/
[data-box] {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  background: no-repeat center center;
  background-size: cover; }
  [data-box]::before {
    content: "";
    display: block; }
  [data-box] .inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 100%; }

.sectionTtl {
/*  margin: 0 0 1em;*/
  margin: 0;
  font-size: 34px;
  font-size: 3.4rem;
  line-height: 180%;
  font-weight: bold;
  letter-spacing: .1em;
  text-align: center; }
  .sectionTtl.alignLeft {
    text-align: left; }
  @media screen and (max-width: 959px) {
    .sectionTtl {
      font-size: 22px;
      font-size: 2.2rem; } }

.linkStyle a {
  color: #1f286f;
  text-decoration: none;
  -webkit-transition: .4s;
  transition: .4s;
  position: relative; }
  .linkStyle a::after {
    position: absolute;
    bottom: -4px;
    left: 0;
    content: '';
    width: 0;
    height: 2px;
    background-color: #ec6c00;
    -webkit-transition: .4s;
    transition: .4s; }
  .linkStyle a:hover {
    color: #ec6c00; }
    .linkStyle a:hover::after {
      width: 100%; }

.linkStyle2 a {
  color: #1f286f;
  text-decoration: none;
  -webkit-transition: .4s;
  transition: .4s; }
  .linkStyle2 a:hover {
    color: #ec6c00; }

.marker {
  padding: 0 .25em 2px .25em;
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 45%, #ffd300 80%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 45%, #ffd300 80%); }

.marker2 {
  padding: 0 .25em 0px .25em;
  background-repeat: repeat-x;
  background-position: right bottom;
  background-size: 0.6em 0.2em,1.6em 0.2em,3.4em 0.2em,3.6em 0.2em;
  background-image: -webkit-radial-gradient(center center, 0.2em 0.2em, #ec6c00, rgba(246, 89, 115, 0)), -webkit-radial-gradient(center center, 0.4em 0.2em, #ec6c00, rgba(246, 89, 115, 0)), -webkit-radial-gradient(center center, 0.7em 0.2em, #ec6c00, rgba(246, 89, 115, 0)), -webkit-radial-gradient(center center, 7.1em 0.2em, #ec6c00, rgba(246, 89, 115, 0));
  background-image: radial-gradient(0.2em 0.2em at center center, #ec6c00, rgba(246, 89, 115, 0)), radial-gradient(0.4em 0.2em at center center, #ec6c00, rgba(246, 89, 115, 0)), radial-gradient(0.7em 0.2em at center center, #ec6c00, rgba(246, 89, 115, 0)), radial-gradient(7.1em 0.2em at center center, #ec6c00, rgba(246, 89, 115, 0)); }

.ribbon {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  padding: 10px;
  margin: 0 0 5px -35px;
  width: calc(100% + 20px);
  font-size: 22px;
  color: white;
  background: #00a0e9;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); }
  .ribbon:before {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 10px transparent;
    border-right: solid 15px #6081b7; }

.ribbon2 {
  padding: .5em .75em;
  box-sizing: border-box;
  border: 2px solid #00a0e9;
  border-left: 20px solid #00a0e9; }

.ribbon3 {
  position: relative;
  padding: 0.6em;
  background: #ec6c00; }
  .ribbon3:after {
    position: absolute;
    content: '';
    top: 100%;
    left: 30px;
    border: 15px solid transparent;
    border-top: 15px solid #ec6c00;
    width: 0;
    height: 0; }

.bordered {
  padding: 0 0 .25em;
  border-bottom: solid 3px #00a0e9;
  position: relative; }
  .bordered:after {
    position: absolute;
    content: "";
    display: block;
    border-bottom: solid 3px #b6e0e8;
    bottom: -3px;
    width: 40%;
    left: 50%;
    margin: 0 0 0 -20%; }

.stamp {
  display: inline-block;
  margin: 0 .1em;
  padding: .4em .1em;
  color: Crimson;
  font-weight: bold;
  letter-spacing: -.1em;
  border: 3px solid Crimson;
  border-radius: 50%;
  background: white;
  -webkit-transform: rotate(-15deg);
          transform: rotate(-15deg); }

.accent {
  background-image: -webkit-linear-gradient(left bottom, salmon 0%, salmon 40%, #ec6c00 100%);
  background-image: linear-gradient(to right top, salmon 0%, salmon 40%, #ec6c00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 120%; }

.balloon {
  position: relative;
  display: inline-block;
  margin: .5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  background: #ffd300;
  border-radius: 10px; }
  .balloon:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -15px;
    border: 15px solid transparent;
    border-top: 15px solid #ffd300; }

.cardBox {
  padding: 2em 1.5em;
  box-sizing: border-box;
  box-shadow: 0 2px 5px #ccc; }
  .cardBox .img {
    text-align: center; }
  .cardBox .ttl {
    color: #1f286f;
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: bold; }

.moreButton {
  text-align: center; }
  .moreButton a {
    position: relative;
    display: inline-block;
    font-weight: bold;
    padding: 0.5em 1em;
    text-decoration: none;
    border-left: solid 4px #00a0e9;
    border-right: solid 4px #00a0e9;
    color: #00a0e9;
    background: #e1f3ff;
    -webkit-transition: .4s;
    transition: .4s; }
    .moreButton a:hover {
      background: #00a0e9;
      color: #FFF; }

.nextButton {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-bottom: 2px solid #bbb; }
  .nextButton a {
    position: absolute;
    bottom: -20px;
    left: 50%;
    z-index: 10;
    margin: 0 0 0 -20px;
    color: #1f286f;
    background: #eeeeee;
    border-radius: 50%; }

.contactBtn a {
  margin: -4px 0 0;
  display: block;
  padding: 0 1.5em;
  text-decoration: none;
  background: #ec6c00;
  color: #FFF;
  border-bottom: solid 4px #b25101;
  border-radius: 3px; }
  .contactBtn a:active {
    -webkit-transform: translateY(4px);
            transform: translateY(4px);
    border-bottom: none; }

.downloadBtn a {
  margin: -4px 0 0;
  display: block;
  padding: 0 1.5em;
  text-decoration: none;
  /*background: #00a0e9;*/
  background: #0a0;
  color: #FFF;
  /*border-bottom: solid 4px #1583ba;*/
  border-bottom: solid 4px #060;
  border-radius: 3px; }
  .downloadBtn a:active {
    -webkit-transform: translateY(4px);
            transform: translateY(4px);
    border-bottom: none; }

.lineBtn a {
  margin: -4px 0 0;
  display: block;
  padding: 0 1.5em;
  text-decoration: none;
  background: #00a0e9;
  color: #FFF;
  border-bottom: solid 4px #1583ba;
  border-radius: 3px; }
  .lineBtn a:active {
    -webkit-transform: translateY(4px);
            transform: translateY(4px);
    border-bottom: none; }

#backTop {
  position: fixed;
  bottom: 55px;
  left: 25px;
  z-index: 10; }
  @media screen and (max-width: 639px) {
    #backTop {
      bottom: 10px;
      left: 10px; } }

.user-login {
  padding: 10px; }
  .user-login form {
    text-align: center; }
  .user-login input {
    padding: .5em 1em;
    border: none;
    border-radius: 0;
    outline: none;
    background: none;
    border: 1px solid #aaa;
    font-size: 16px;
    font-size: 1.6rem;
    vertical-align: middle; }
    .user-login input:focus {
      border-color: #00a0e9; }
  .user-login button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: white;
    /*ボタン色*/
    color: #333333;
    border: 1px solid #333333;
    border-bottom: solid 4px #666;
    border-radius: 3px;
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: bold;
    vertical-align: middle; }
    .user-login button:active {
      -webkit-transform: translateY(4px);
      transform: translateY(4px);
      /*下に動く*/
      box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
      /*影を小さく*/
      border-bottom: none; }

/* =====================
  layouts
===================== */
/*  global
------------------------*/
html {
  height: 100%; }
  @media screen and (min-width: 640px) {
    html {
      font: 400 62.5% helvetica, arial, YuGothic, "Yu Gothic", "メイリオ", sans-serif;
      letter-spacing: .1em;
      color: #333; } }
  @media screen and (max-width: 639px) {
    html {
      font: 400 56.25% helvetica, arial, YuGothic, "Yu Gothic", "メイリオ", sans-serif;
      letter-spacing: .1em;
      color: #333; } }

body {
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column; }

html,
body {
  overflow-x: hidden; }

/*  for responsive
------------------------*/

[data-lg] {
  max-width: 1280px;/*-- 2022 tano --*/
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;}
  @media screen and (max-width: 1199px) {
    [data-lg] {
      padding: 0 15px; } }

[data-md] {
	
  max-width: 1280px;/*-- 2022 tano --*/
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1; }
  @media screen and (max-width: 959px) {
    [data-md] {
      padding: 0 15px; } }

[data-sm] {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1; }
  @media screen and (max-width: 639px) {
    [data-sm] {
      padding: 0 15px; } }

/*  header
------------------------*/
.globalHeader {
  padding: 15px 10px;
  box-sizing: border-box;
  height: 100px;/*-- 2022 tano --*/
  margin-top: -4px;/*-- 2022 tano --*/
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.2);
  -webkit-transition: 1s;
  transition: 1s; }
  @media screen and (max-width: 959px) {
    .globalHeader {
      padding: 15px; } }
  .globalHeader.scrolled {
    background: rgba(255, 255, 255, 0.9); }
  .globalHeader .logo {
    position: absolute;
    top: -5px;
    left: 0;
    width: 200px;
    height: auto; }
    @media screen and (max-width: 959px) {
      .globalHeader .logo {
        top: -5px;
        left: 50%;
        width: 100px;
        margin: 0 0 0 -50px; } }
  .globalHeader .spMenu {
    color: #1f286f; }
  .globalHeader nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
            justify-content: flex-end; }
    .globalHeader nav ul li {
      margin: 0 0 0 3em; }
      .globalHeader nav ul li a {
        font-size: 18px;
        font-size: 1.8rem;
        font-weight: bold;
        line-height: 40px; }

/*  main
------------------------*/
@media screen and (max-width: 959px) {
  main {
    margin-top: 10px; } }

.sectionStyle {
  padding: 50px 0;
  position: relative; }
  @media screen and (max-width: 959px) {
    .sectionStyle {
      padding: 20px 0; } }

@media screen and (min-width: 960px) {
  .user-login {
    position: absolute;
    top: 60px;
    right: 0;
    z-index: 10;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 0 0 0 5px; } }

/*  footer
------------------------*/
.globalFooter {
  padding: 15px 0;
  background: white;
  border-top: 2px solid #ddd; }
  .globalFooter .copyright {
    margin: 0 0 .75em;
    font-size: 10px;
    font-size: 1.0rem;
    text-align: right; }
@media screen and (max-width: 639px) {
.globalFooter .copyright {
	letter-spacing: -0.7px; }}

  .globalFooter nav ul {
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
            justify-content: flex-end;
    list-style: none; }
    .globalFooter nav ul li {
      margin: 0 0 0 1em;
      font-size: 12px;
      font-size: 1.2rem; }
  .globalFooter .floatingBtn {
    position: fixed;
    right: 10px;
    bottom: -280px;
    z-index: 100;
    padding: 1.5em 1em;
    display: inline-block;
    text-align: center;
    background: #1f286f;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
    -webkit-transition: .4s;
    transition: .4s; }
    .globalFooter .floatingBtn:hover {
      bottom: 0; }
    .globalFooter .floatingBtn .mascot {
      position: absolute;
      top: -96px;
      right: 0;
      width: 86px; }
    .globalFooter .floatingBtn h3 {
      margin: 0 0 15px;
      color: white;
      font-size: 13px;
      font-size: 1.3rem; }
    .globalFooter .floatingBtn hr {
      margin: 15px auto;
      width: 80%; }
    .globalFooter .floatingBtn .phone {
      margin: 0 0 15px;
      color: white; }
      .globalFooter .floatingBtn .phone p {
        margin: .5em 0;
        font-size: 13px;
        font-size: 1.3rem; }
      .globalFooter .floatingBtn .phone a {
        color: white;
        font-size: 22px;
        font-size: 2.2rem; }
    .globalFooter .floatingBtn .web {
      margin: 0 0 15px; }
      .globalFooter .floatingBtn .web .contactBtn {
        width: 100%; }
        .globalFooter .floatingBtn .web .contactBtn a {
          padding: 1em;
          font-size: 12px;
          font-size: 1.2rem; }
    .globalFooter .floatingBtn .line {
      padding: 1em .5em;
      color: white;
      font-size: 12px;
      font-size: 1.2rem;
      background: #1fc100;
      border-radius: 3px; }
      .globalFooter .floatingBtn .line p {
        margin: 0 0 .5em; }
      .globalFooter .floatingBtn .line .line_code {
        width: 60%; }
      .globalFooter .floatingBtn .line .line_id {
        padding: 1em 0 0;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
                align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
                justify-content: center;
        font-size: 12px;
        font-size: 1.2rem; }
        .globalFooter .floatingBtn .line .line_id p {
          padding: 0 5px;
          margin: 0;
          color: white; }
        .globalFooter .floatingBtn .line .line_id a {
          padding: 2px 25px 2px 5px;
          display: block;
          color: #1f286f;
          border-radius: 3px;
          text-decoration: none;
          background: white url(../img/icon_search.png) no-repeat right 5px center;
          background-size: 10px 10px; }
/*  sp menu
------------------------*/
.uk-offcanvas-bar {
  background: white; }
  .uk-offcanvas-bar nav ul {
    margin: 30px 0 10px;
    padding: 0; }
    .uk-offcanvas-bar nav ul li {
      border-bottom: 1px solid white; }
      .uk-offcanvas-bar nav ul li a {
        padding: 1em 1em;
        display: block;
        color: white;
        font-size: 14px;
        font-size: 1.4rem;
        text-align: center;
        text-decoration: none;
        background: #00a0e9;
        position: static; }
  .uk-offcanvas-bar .contactInfo {
    padding: 2em 1.5em;
    text-align: center;
    background: #1f286f; }
    .uk-offcanvas-bar .contactInfo h3 {
      margin: 0;
      color: white; }
    .uk-offcanvas-bar .contactInfo hr {
      margin: 15px auto;
      width: 80%; }
    .uk-offcanvas-bar .contactInfo .phone {
      margin: 0 0 15px;
      color: white; }
      .uk-offcanvas-bar .contactInfo .phone p {
        margin: .5em 0;
        font-size: 15px;
        font-size: 1.5rem; }
      .uk-offcanvas-bar .contactInfo .phone a {
        color: white;
        font-size: 24px;
        font-size: 2.4rem;
        text-decoration: none; }
    .uk-offcanvas-bar .contactInfo .web {
      margin: 0 0 15px; }
      .uk-offcanvas-bar .contactInfo .web .contactBtn {
        width: 100%; }
        .uk-offcanvas-bar .contactInfo .web .contactBtn a {
          padding: 1em;
          font-size: 15px;
          font-size: 1.5rem; }
    .uk-offcanvas-bar .contactInfo .line {
      padding: 1em;
      color: white;
      font-size: 15px;
      font-size: 1.5rem;
      background: #1fc100;
      border-radius: 3px; }
      .uk-offcanvas-bar .contactInfo .line p {
        margin: 0 0 .5em; }
      .uk-offcanvas-bar .contactInfo .line .line_code {
        width: 60%; }
      .uk-offcanvas-bar .contactInfo .line .line_id {
        padding: 1em 0 0;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
                align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
                justify-content: center;
        font-size: 12px;
        font-size: 1.2rem; }
        .uk-offcanvas-bar .contactInfo .line .line_id p {
          padding: 0 5px;
          margin: 0;
          color: white; }
        .uk-offcanvas-bar .contactInfo .line .line_id a {
          padding: 2px 25px 2px 5px;
          display: block;
          color: #1f286f;
          border-radius: 3px;
          text-decoration: none;
          background: white url(../img/icon_search.png) no-repeat right 5px center;
          background-size: 10px 10px; }
  .uk-offcanvas-bar button.uk-offcanvas-close {
    color: black; }
    .uk-offcanvas-bar button.uk-offcanvas-close:hover {
      color: black !important; }
  .video-wrap{
   max-width: 100%;
   width:960px;
   margin-left: auto;
   margin-right: auto;}
  .video{
     position: relative;
     padding-bottom: 56.25%;
     height: 0;
     overflow: hidden;}
  .video iframe{
     position: absolute;
     top: 0;
     left: 0;
     rigiht:0;
     width: 100%;
     height: 100%;}
   .img-wrap{
   max-width: 100%;
   width:80%;
   margin-left: auto;
   margin-right: auto;}

/*  additional
------------------------*/
/* =====================
  mainvisual
===================== */
#mainvisual {
  position: relative; }
  #mainvisual:before {
    padding: calc(9 /16 * 100%) 0 0; }
  #mainvisual iframe {
    width: 100% !important;
    height: 100% !important; }
  #mainvisual .catch {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
            justify-content: center;
    background: rgba(0, 0, 0, 0.2) url(../img/mainvisual_texture.png) center center; }
    #mainvisual .catch h1 {
      margin: 50px 0;
      padding: 0 15px;
      color: white;
      font-size: 48px;
      font-size: 4.8rem;
      font-weight: bold;
      line-height: 160%;
      letter-spacing: .125em;
      text-align: center;
      text-shadow: 0 0 4px rgba(0, 0, 0, 0.65); }
      #mainvisual .catch h1 small {
        margin: 1em 0 0;
        display: block;
        font-size: 20px;
        font-size: 2rem;
        line-height: 160%; }
      @media screen and (max-width: 959px) {
        #mainvisual .catch h1 {
          font-size: 32px;
          font-size: 3.2rem; }
          #mainvisual .catch h1 small {
            font-size: 15px;
            font-size: 1.5rem; } }
    #mainvisual .catch .playBtn {
      margin: 30px auto; }
      @media screen and (max-width: 959px) {
        #mainvisual .catch .playBtn {
          margin: 10px auto; } }
      #mainvisual .catch .playBtn a {
        color: white;
        font-size: 26px;
        font-size: 2.6rem;
        margin: auto;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
                justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
                align-items: center;
        -webkit-transition: all .3s ease;
        transition: all .3s ease; }
        #mainvisual .catch .playBtn a:hover {
          opacity: 0.70; }
        @media screen and (max-width: 959px) {
          #mainvisual .catch .playBtn a {
            font-size: 18px;
            font-size: 1.8rem; } }
        #mainvisual .catch .playBtn a img {
          margin-right: .5em;
          width: 80px;
          height: 80px;
          -webkit-transition: .3s;
          transition: .3s; }
          @media screen and (max-width: 959px) {
            #mainvisual .catch .playBtn a img {
              width: 40px;
              height: 40px; } }
        #mainvisual .catch .playBtn a:hover img {
          -webkit-transform: scale(1.15);
                  transform: scale(1.15); }

/* =====================
  intro
===================== */
#intro {
  background: white;
  background-image: -webkit-linear-gradient(bottom, #dfe9f3 0%, white 100%);
  background-image: linear-gradient(to top, #dfe9f3 0%, white 100%); }
  #intro .nextButton a {
    background: white; }
  @media screen and (min-width: 640px) {
    #intro .sectionTtl {
      letter-spacing: .25em; } }
  #intro .problems {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap; }
    #intro .problems .problem-wrap {
      width: calc(100% / 3); }
      @media screen and (max-width: 959px) {
        #intro .problems .problem-wrap {
          margin: 0 0 30px;
          width: 100%; } }
    #intro .problems .problem {
      margin: 15px;
      padding: 10px 15px;
      box-sizing: border-box;
      background: #b6e0e8;
      border: 5px solid #00a0e9;
      border-radius: 5px;
      position: relative; }
      @media screen and (min-width: 960px) {
        #intro .problems .problem {
          min-height: 230px; } }
      #intro .problems .problem:before {
        padding: 30px;
        box-sizing: border-box;
        position: absolute;
        top: 5px;
        left: 5px;
        content: "";
        width: calc(100% - 10px);
        height: calc(100% - 10px);
        background: white; }
      #intro .problems .problem .ribbon {
        font-size: 16px;
        font-size: 1.6rem;
        font-weight: bold; }
      #intro .problems .problem > *:not(:first-child) {
        position: relative;
        z-index: 1; }
    #intro .problems .result {
      margin: 40px 15px 0;
      padding: 10px 15px;
      position: relative;
      background-color: white;
      border: 5px solid #ec6c00;
      border-radius: 5px; }
      #intro .problems .result p {
        margin: 0;
        font-size: 16px;
        font-size: 1.6rem;
        line-height: 160%;
        font-weight: bold; }
      #intro .problems .result::before {
        position: absolute;
        top: -30px;
        left: 50%;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        content: "";
        display: inline-block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 15px 30px 0 30px;
        border-color: #00a0e9 transparent transparent transparent; }
  #intro .resolve {
    margin: 45px 0 0; }
    #intro .resolve .result {
      margin: 0;
      padding: 0; }
      #intro .resolve .result li {
        margin: .5em 1em;
        list-style: none;
        color: #1f286f;
        font-size: 20px;
        font-size: 2rem;
        font-weight: bold; }
        #intro .resolve .result li strong {
          font-size: 180%; }
        #intro .resolve .result li small {
          font-size: 60%; }
    #intro .resolve .catch {
      font-size: 30px;
      font-size: 3rem;
      font-weight: bold; }
      #intro .resolve .catch strong {
        padding: .2em;
        color: #1f286f;
        font-size: 130%; }
      #intro .resolve .catch .stamp {
        font-size: 44px;
        font-size: 4.4rem; }
  #intro .obj {
    text-align: center; }
    @media screen and (min-width: 960px) {
      #intro .obj {
        position: absolute;
        bottom: -75px;
        right: 0; } }

/* =====================
  feature
===================== */
#feature {
  background: #b6e0e8; }
  #feature .nextButton a {
    background: #b6e0e8; }
  #feature .txt {
    font-size: 20px;
    font-size: 2rem;
    line-height: 200%; }
  #feature .moreButton {
    margin: 45px 0 0;
    font-size: 18px;
    font-size: 1.8rem; }
  #feature .obj01 {
    position: absolute;
    top: 30px;
    right: 0;
    max-width: 350px;
    height: auto; }
    @media screen and (max-width: 959px) {
      #feature .obj01 {
        display: none; } }
  @media screen and (min-width: 960px) {
    #feature .obj02 {
      position: absolute;
      right: 50px;
      top: 160px;
      max-width: 650px;
      height: auto; } }
  @media screen and (min-width: 960px) {
    #feature .txt-wrap {
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
              justify-content: space-between; } }
  @media screen and (min-width: 960px) {
    #feature .txt-wrap .txt {
      width: 50%; } }
  #feature .txt-wrap .device {
    position: relative; }
    @media screen and (max-width: 959px) {
      #feature .txt-wrap .device {
        padding: 15px 10px 5px;
        background-color: white;
        border: 2px solid #00a0e9; } }
    @media screen and (min-width: 960px) {
      #feature .txt-wrap .device {
        width: 46%; } }
    #feature .txt-wrap .device .multi-device-ready {
      margin: .5em;
      padding: .25em .5em;
      font-size: 16px;
      font-size: 1.6rem;
      font-weight: bold;
      text-align: center;
      background-color: white;
      border: 3px solid #00a0e9;
      border-radius: 100px; }
    #feature .txt-wrap .device .bg-obj {
      position: absolute;
      z-index: -1;
      bottom: 15px;
      -webkit-transform: scale(1.2);
              transform: scale(1.2); }
      @media screen and (max-width: 959px) {
        #feature .txt-wrap .device .bg-obj img {
          display: none; } }
  #feature .uk-accordion-title {
    margin: 45px 0 0;
    padding: 10px 15px;
    font-size: 14px;
    font-size: 1.4rem;
    background-color: white;
    border: 2px solid #ddd; }
    @media screen and (max-width: 959px) {
      #feature .uk-accordion-title {
        margin: 15px 0 0; } }
    @media screen and (min-width: 960px) {
      #feature .uk-accordion-title {
        margin-left: auto;
        max-width: 45%; } }
  #feature .device-list {
    margin: 0;
    padding: 15px 15px 0;
    background-color: white;
    border: 2px solid #ddd; }
    @media screen and (min-width: 960px) {
      #feature .device-list {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex; } }
    #feature .device-list .device-list__item {
      padding: 0 20px 20px;
      box-sizing: border-box; }
      @media screen and (min-width: 960px) {
        #feature .device-list .device-list__item {
          width: 50%;
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          -webkit-flex-wrap: wrap;
                  flex-wrap: wrap; } }
      #feature .device-list .device-list__item .ttl {
        margin: 0 0 .5em;
        padding: 0 0 .5em;
        width: 100%;
        font-weight: bold;
        text-align: center;
        border-bottom: 1px solid #ccc; }
      #feature .device-list .device-list__item table {
        width: 100%; }
        #feature .device-list .device-list__item table th,
        #feature .device-list .device-list__item table td {
          padding: 1em 0;
          font-size: 14px;
          font-size: 1.4rem;
          border-bottom: 1px solid #ddd; }
        #feature .device-list .device-list__item table ul {
          margin: 0; }

/* =====================
  movie
===================== */
#movie {
  min-height: 450px;
  background: #eeeeee url(../img/sample03.jpg) no-repeat center center;
  background-size: cover;
  position: relative; }
  #movie .nextButton a {
    background: #eeeeee; }
  #movie .catch {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
            justify-content: center;
    background: rgba(0, 0, 0, 0.6) url(../img/mainvisual_texture02.png) center center; }
    #movie .catch h1 {
      margin: 50px 0;
      padding: 0 15px;
      color: white;
      font-size: 48px;
      font-size: 4.8rem;
      font-weight: bold;
      line-height: 160%;
      letter-spacing: .125em;
      text-align: center; }
      #movie .catch h1 small {
        margin: 1em 0 0;
        display: block;
        font-size: 20px;
        font-size: 2rem;
        line-height: 160%; }
      @media screen and (max-width: 959px) {
        #movie .catch h1 {
          font-size: 32px;
          font-size: 3.2rem; }
          #movie .catch h1 small {
            font-size: 15px;
            font-size: 1.5rem; } }
      #movie .catch h1 .playBtn {
        margin: 15px 0; }
        #movie .catch h1 .playBtn a {
          margin: auto;
          display: block;
          width: 80px;
          height: auto;
          -webkit-transition: all .3s ease;
          transition: all .3s ease; }
          #movie .catch h1 .playBtn a:hover {
            opacity: 0.70; }
          #movie .catch h1 .playBtn a:hover {
            text-decoration: none !important; }
        #movie .catch h1 .playBtn img {
          width: 80px;
          height: auto; }

#more-movie {
  text-align: center; }
  #more-movie .movie-wrap {
    margin: 0 0 15px; }
    #more-movie .movie-wrap:before {
      padding: calc(9 /16 * 100%) 0 0; }
  #more-movie iframe {
    width: 100% !important;
    height: 100% !important; }
  #more-movie .uk-modal-dialog {
    width: 90%; }

/* =====================
  merit
===================== */
#merit {
  background: white;
  background-image: -webkit-linear-gradient(bottom, #dfe9f3 0%, white 100%);
  background-image: linear-gradient(to top, #dfe9f3 0%, white 100%); }
  @media screen and (min-width: 960px) {
    #merit .sectionTtl {
      padding: 0 150px 0 0; } }
  #merit .nextButton a {
    background: white; }
  #merit .workflow {
    margin: 0 0 30px; }
    @media screen and (min-width: 960px) {
      #merit .workflow {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
                justify-content: space-between; } }
    #merit .workflow .sector {
      margin: 0 0 20px;
      padding: 10px 5px; }
      @media screen and (min-width: 960px) {
        #merit .workflow .sector {
          width: calc(50% - 50px); } }
      #merit .workflow .sector .sectorTtl {
        width: 100%; }
        #merit .workflow .sector .sectorTtl p {
          margin: 5px 0 0;
          padding: 8px 5px;
          color: white;
          font-size: 24px;
          font-size: 2.4rem;
          font-weight: bold;
          background: #ec6c00;
          text-align: center;
          vertical-align: middle; }
    #merit .workflow .devider {
      padding: 10px 0 20px; }
      @media screen and (min-width: 960px) {
        #merit .workflow .devider {
          width: 100px;
          height: 100px; } }
      #merit .workflow .devider span {
        margin: auto;
        position: relative;
        display: block;
        width: 70px;
        height: 20px;
        background: #ec6c00; }
        @media screen and (min-width: 960px) {
          #merit .workflow .devider span {
            top: 250px; } }
        #merit .workflow .devider span::before {
          position: absolute;
          top: 0;
          left: 0;
          content: "";
          display: block;
          width: 70px;
          height: 20px;
          background: #ec6c00;
          -webkit-transform: rotate(90deg);
                  transform: rotate(90deg); }
    #merit .workflow .flow {
      position: relative; }
      #merit .workflow .flow ul {
        margin: 0;
        padding: 0; }
        #merit .workflow .flow ul li {
          list-style: none;
          margin: 0 0 .5em 0;
          padding: .5em 0;
          font-size: 18px;
          font-size: 1.8rem;
          font-weight: bold;
          border-bottom: 1px dashed #ddd;
          text-align: center; }
          #merit .workflow .flow ul li span {
            margin: 0 .2em 0 0;
            color: #00a0e9; }
    #merit .workflow .sector .cardBox {
      background-color: white; }
  #merit .resolves ul {
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap; }
    #merit .resolves ul li {
      list-style: none;
      position: relative;
      margin: 15px;
      width: calc(100% / 3 - 30px);
      font-size: 17px;
      font-size: 1.7rem;
      font-weight: bold; }
      #merit .resolves ul li .stamp {
        position: absolute;
        top: -10px;
        right: -5px;
        font-size: 24px;
        font-size: 2.4rem; }
      @media screen and (max-width: 959px) {
        #merit .resolves ul li {
          width: 100%; } }
  #merit .results {
    margin: 25px 0 0;
    padding: 25px 0;
    position: relative; }
    #merit .results:before {
      position: absolute;
      top: 0;
      left: 50%;
      margin: 0 0 0 -25px;
      content: "";
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 20px 25px 0 25px;
      border-color: #ec6c00 transparent transparent transparent; }
    #merit .results h3 {
      margin: 30px auto;
      max-width: 180px;
      color: #1f286f;
      font-size: 24px;
      font-size: 2.4rem;
      font-weight: bold;
      text-align: center; }
    #merit .results .details {
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-wrap: wrap;
              flex-wrap: wrap; }
    #merit .results .detail {
      margin: 15px;
      width: calc(100% / 3 - 30px);
      background: #00a0e9; }
      @media screen and (max-width: 959px) {
        #merit .results .detail {
          width: 100%; } }
      #merit .results .detail .img {
        margin: 0; }
      #merit .results .detail .ttl {
        margin: 1em 0 0;
        color: white; }
    #merit .results .img {
      margin: 30px auto 0;
      max-width: 600px; }
  @media screen and (max-width: 639px) {
    #merit .obj {
      text-align: center; } }
  @media screen and (min-width: 640px) {
    #merit .obj {
      position: absolute;
      top: -30px;
      right: 0;
      z-index: -1; } }

.uk-tooltip {
  padding: .5em;
  font-size: 15px;
  font-weight: bold; }

/* =====================
  function
===================== */
#function {
  background: #eeeeee;
  background-image: -webkit-linear-gradient(bottom, #c4c5c7 0%, #dcdddf 52%, #ebebeb 100%);
  background-image: linear-gradient(to top, #c4c5c7 0%, #dcdddf 52%, #ebebeb 100%); }
  #function .nextButton a {
    background: #eeeeee; }
  #function .functions ul {
    margin: 0 auto;
    padding: 0;
    max-width: 700px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap; }
    #function .functions ul li {
      list-style: none;
      margin: 15px;
/*      width: calc(100% / 4 - 30px);*/
      width: calc(100% / 5 - 30px);
      cursor: pointer; }
      @media screen and (max-width: 959px) {
        #function .functions ul li {
          margin: 10px;
          width: calc(100% / 4 - 20px); } }
  #function .main {
    counter-reset: number 0; }
    #function .main .function {
      padding: 45px 0;
      border-bottom: dotted 4px #00a0e9;
      position: relative;
      counter-increment: number 1; }
      @media screen and (min-width: 960px) {
        #function .main .function {
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          -webkit-box-pack: justify;
          -webkit-justify-content: space-between;
                  justify-content: space-between; }
          #function .main .function:nth-child(even) {
            -webkit-box-orient: horizontal;
            -webkit-box-direction: reverse;
            -webkit-flex-direction: row-reverse;
                    flex-direction: row-reverse; } }
    #function .main .conts {
      padding: 5px 0;
      width: 30%;
      position: relative; }
      @media screen and (max-width: 959px) {
        #function .main .conts {
          width: 100%; } }
      #function .main .conts:before {
        position: absolute;
        top: -90px;
        right: 0px;
        content: counter(number);
        color: white;
        font-size: 300px;
        font-size: 30rem;
        font-family: TIMES, sans-serif; }
      #function .main .conts h3 {
        color: #1f286f;
        font-size: 24px;
        font-size: 2.4rem;
        font-weight: bold;
        position: relative;
        z-index: 1; }
      #function .main .conts p {
        font-size: 14px;
        font-size: 1.4rem;
        position: relative;
        z-index: 1; }
      #function .main .conts img {
        position: relative;
        z-index: 1; }
    #function .main .img {
      padding: 5px 0;
      width: 67%;
      position: relative;
      z-index: 1; }
      @media screen and (max-width: 959px) {
        #function .main .img {
          width: 100%; } }
    #function .main .function04 .img {
      position: relative; }
    @media screen and (min-width: 960px) {
      #function .main .function04 .sub {
        position: absolute;
        right: -320px;
        bottom: 50px;
        max-width: 350px;
        height: auto; } }
  #function .sub {
/*    padding: 45px 0;*/
    padding: 45px 0 0 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap; }
    #function .sub .cardBox {
      padding: 0; }
    #function .sub .function {
      margin: 10px;
/*      width: calc(100% / 3 - 20px);
*/      width: calc(100% / 4 - 20px);
		padding-bottom: 10px;
      background: white; }
      @media screen and (max-width: 959px) {
        #function .sub .function {
          width: 100%; } }
    #function .sub h3 {
      padding: 10px 15px;
      color: #1f286f;
      font-size: 24px;
      font-size: 2.4rem;
      font-weight: bold;
      position: relative;
      z-index: 1;
      background: #b6e0e8; }
    #function .sub ul {
      margin: 1em 0 .5em;
      padding: 0 15px; }
      #function .sub ul li {
        margin: .5em 0;
        font-size: 14px;
        font-size: 1.4rem;
        font-weight: bold; }
    #function .sub img {
      padding: 10px 15px; }
    #function .sub .notes {
      margin: .5em 2em;
      font-size: 13px;
      font-size: 1.3rem;
      position: relative;
      z-index: 1; }
  #function .optional .attention p {
    margin: 0;
    color: white;
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: bold; }
  #function .optional .wrap {
    padding: 45px 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap; }
    #function .optional .wrap .cardBox {
      padding: 0; }
    #function .optional .wrap .function {
      margin: 10px;
/*      width: calc(100% / 3 - 20px);*/
      width: calc(100% / 4 - 20px);
      background: white; }
      @media screen and (max-width: 959px) {
        #function .optional .wrap .function {
          width: 100%; } }
    #function .optional .wrap h3 {
      padding: 10px 15px;
      color: #1f286f;
      font-size: 24px;
      font-size: 2.4rem;
      font-weight: bold;
      position: relative;
      z-index: 1;
      background: #b6e0e8; }
    #function .optional .wrap ul {
      padding: 0 15px; }
      #function .optional .wrap ul li {
        font-size: 14px;
        font-size: 1.4rem;
        font-weight: bold; }
    #function .optional .wrap img {
      padding: 10px 15px; }
    #function .optional .wrap .notes {
      font-size: 13px;
      font-size: 1.3rem;
      position: relative;
      z-index: 1; }
    #function .optional .wrap .comingsoon {
      position: relative; }
      #function .optional .wrap .comingsoon:after {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        content: "";
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.1) url(../img/icon_comingsoon.png) no-repeat left top; }

/* =====================
  case
===================== */
#case {
  background: white; }
  #case .nextButton a {
    background: white; }
  #case .img {
    margin: 0 auto 30px;
    max-width: 600px; }
  #case .desc {
    font-size: 16px;
    font-size: 1.6rem;
    text-align: center; }
  #case .details .detail .img {
    padding: 2px;
    border: 4px solid #ddd; }
    #case .details .detail .img a {
      display: block;
      position: relative;
      -webkit-transition: all .3s ease;
      transition: all .3s ease; }
      #case .details .detail .img a:hover {
        opacity: 0.70; }
      #case .details .detail .img a:before {
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.1); }
      #case .details .detail .img a:after {
        position: absolute;
        top: 50%;
        left: 50%;
        content: "";
        width: 50px;
        height: 50px;
        margin: -25px 0 0 -25px;
        background: url(../img/play_btn.svg) no-repeat center center;
        background-size: cover; }
  #case .details .detail h3 {
    margin: .5em 0;
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 180%;
    font-weight: bold; }
    #case .details .detail h3 small {
      display: block;
      font-size: 13px;
      font-size: 1.3rem;
      line-height: 130%;
      font-weight: normal; }
  #case .details .detail p {
    margin: .5em 0;
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 165%;
    text-align: justify; }
  #case .swiper-container {
    padding: 10px 10px 40px;
    box-sizing: border-box; }
  #case .swiper-button-prev {
    left: 0px; }
    @media screen and (min-width: 960px) {
      #case .swiper-button-prev {
        left: -30px; } }
  #case .swiper-button-next {
    right: 0px; }
    @media screen and (min-width: 960px) {
      #case .swiper-button-next {
        right: -30px; } }

/* =====================
  cta02
===================== */
#cta02 {
  padding: 10vw 0;
  position: relative;
  background: url(../img/cta02_bg2.jpg) no-repeat center center;
  background-size: cover; }
  #cta02:before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%; }
  #cta02 h1 {
    margin: 50px 0;
    padding: 0 15px;
    color: white;
    font-size: 48px;
    font-size: 4.8rem;
    font-weight: bold;
    line-height: 160%;
    letter-spacing: .125em;
    text-align: center;
    position: relative;
    z-index: 1; }
    #cta02 h1 small {
      margin: 1em 0 0;
      display: block;
      font-size: 20px;
      font-size: 2rem;
      line-height: 160%; }
    @media screen and (max-width: 959px) {
      #cta02 h1 {
        font-size: 32px;
        font-size: 3.2rem; }
        #cta02 h1 small {
          font-size: 15px;
          font-size: 1.5rem; } }
  #cta02 .contactBtn {
    margin: auto;
    max-width: 300px;
    position: relative;
    text-align: center;
    z-index: 1; }
    #cta02 .contactBtn a {
      padding: .5em;
      font-size: 22px;
      font-size: 2.2rem; }

/* =====================
  price
===================== */
#price {
  background: #b6e0e8; }
  #price .choice {
    margin: -25px 10px 0 0; }
    @media screen and (max-width: 639px) {
      #price .choice {
        max-width: 120px;
        height: auto; } }
  #price .details .basic .wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
    text-align: center; }
    #price .details .basic .wrap h3 {
      margin: 0 0 5px;
      padding: .25em;
      font-size: 18px;
      font-size: 1.8rem;
      font-weight: bold;
      border-bottom: 1px solid #ddd; }
    #price .details .basic .wrap small {
      display: block;
      position: relative;
      display: inline-block;
      margin: .5em 0;
      padding: 2px 10px;
      min-width: 120px;
      max-width: 100%;
      color: #333;
      background: #ddd; }
      #price .details .basic .wrap small:before {
        content: "";
        position: absolute;
        top: 95%;
        left: 50%;
        margin-left: -8px;
        border: 8px solid transparent;
        border-top: 8px solid #ddd; }
      #price .details .basic .wrap small span {
        font-size: 13px;
        font-size: 1.3rem;
        font-weight: bold; }
    #price .details .basic .wrap .price {
      margin: 0 0 5px;
      display: block;
      font-size: 20px;
      font-size: 2rem;
      font-weight: bold; }
      #price .details .basic .wrap .price strong {
        margin: 0 .1em;
        font-size: 44px;
        font-size: 4.4rem; }
    #price .details .basic .wrap .plan__item {
      margin: 5px 0;
      width: calc(100% / 5);
      background: white; }
      @media screen and (max-width: 959px) {
        #price .details .basic .wrap .plan__item {
          width: 100%; } }
      #price .details .basic .wrap .plan__item h3 {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
                align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
                justify-content: center;
        color: black; }
      @media screen and (max-width: 959px) {
        #price .details .basic .wrap .plan__item .plan-price {
          padding: 5px 0; } }
      @media screen and (min-width: 960px) {
        #price .details .basic .wrap .plan__item .plan-price {
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          -webkit-flex-wrap: wrap;
                  flex-wrap: wrap;
          -webkit-box-pack: center;
          -webkit-justify-content: center;
                  justify-content: center;
          -webkit-box-align: center;
          -webkit-align-items: center;
                  align-items: center; } }
      #price .details .basic .wrap .plan__item.focus {
        background: #00a0e9; }
        @media screen and (min-width: 960px) {
          #price .details .basic .wrap .plan__item.focus {
            -webkit-transform: scale(1.1);
                    transform: scale(1.1);
            box-shadow: 0 0 3px 1px rgba(180, 180, 180, 0.8); } }
        #price .details .basic .wrap .plan__item.focus h3 {
          color: white; }
        #price .details .basic .wrap .plan__item.focus .price {
          color: white; }
        #price .details .basic .wrap .plan__item.focus .desc {
          color: white; }
        #price .details .basic .wrap .plan__item.focus .running {
          color: white; }
      #price .details .basic .wrap .plan__item .desc {
        padding: 0 2em; }
        #price .details .basic .wrap .plan__item .desc p {
          font-size: 13px;
          font-size: 1.3rem;
          line-height: 150%;
          text-align: left; }
      #price .details .basic .wrap .plan__item .running {
        font-size: 13px;
        font-size: 1.3rem;
        font-weight: bold; }
      #price .details .basic .wrap .plan__item .contactBtn {
        margin: 1em 0 0;
        padding: 1em 2em; }
        #price .details .basic .wrap .plan__item .contactBtn a {
          padding: 1em 0;
          font-size: 14px;
          font-size: 1.4rem;
          font-weight: bold; }
  #price .details .basic .notes {
    margin: 30px 0; }
    #price .details .basic .notes p {
      font-size: 12px;
      font-size: 1.2rem; }
      @media screen and (min-width: 960px) {
        #price .details .basic .notes p {
          margin: 1em;
          text-align: center; } }
  #price .details .basic .plan-detail {
    margin: 0 0 30px; }
    @media screen and (max-width: 959px) {
      #price .details .basic .plan-detail {
        overflow: auto;
        white-space: nowrap; } }
    #price .details .basic .plan-detail table {
      width: 100%;
      border-collapse: collapse;
      background-color: white; }
      #price .details .basic .plan-detail table th,
      #price .details .basic .plan-detail table td {
        padding: 1em;
        font-size: 14px;
        font-size: 1.4rem; }
      #price .details .basic .plan-detail table thead {
        border-bottom: 2px solid #aaa; }
        #price .details .basic .plan-detail table thead .contactBtn {
          margin: 10px 0 0; }
          #price .details .basic .plan-detail table thead .contactBtn a {
            padding: .5em;
            font-size: 12px;
            font-size: 1.2rem; }
      #price .details .basic .plan-detail table tbody th,
      #price .details .basic .plan-detail table tbody td {
        border: 1px solid #ddd; }
      #price .details .basic .plan-detail table tbody td {
        text-align: center;
        vertical-align: middle; }
      #price .details .basic .plan-detail table tbody .icon-circle {
        display: inline-block;
        width: 16px;
        height: 16px;
        border-radius: 50%; }
        #price .details .basic .plan-detail table tbody .icon-circle.green {
          border: 1px solid #00a0e9; }
      #price .details .basic .plan-detail table tbody .green {
        color: #00a0e9;
        font-weight: bold; }
  #price .details .optional {
    background: white;
    border: 2px solid #ccc; }
    @media screen and (min-width: 960px) {
      #price .details .optional {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex; } }
    #price .details .optional .ttl {
      padding: 10px;
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
              align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
              justify-content: center;
      -webkit-flex-wrap: wrap;
              flex-wrap: wrap;
      text-align: center;
      background: #ec6c00; }
      #price .details .optional .ttl h3 {
        margin: .5em;
        color: white;
        font-size: 20px;
        font-size: 2rem;
        font-weight: bold; }
      #price .details .optional .ttl small {
        display: block; }
      @media screen and (min-width: 960px) {
        #price .details .optional .ttl {
          width: 50%; } }
    #price .details .optional .detail {
      padding: 10px;
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
              align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
              justify-content: center;
      -webkit-flex-wrap: wrap;
              flex-wrap: wrap; }
      @media screen and (min-width: 960px) {
        #price .details .optional .detail {
          width: 50%;
          border-left: 1px solid #ccc; } }
      #price .details .optional .detail ul {
        margin: 0;
        padding: 0; }
        #price .details .optional .detail ul li {
          list-style: none;
          font-size: 18px;
          font-size: 1.8rem;
          font-weight: bold; }
      #price .details .optional .detail .price {
        margin: 0 0 5px 1em;
        font-size: 14px;
        font-size: 1.4rem;
        font-weight: bold; }
        #price .details .optional .detail .price strong {
          margin: 0 .1em;
          font-size: 24px;
          font-size: 2.4rem; }
      #price .details .optional .detail.comingsoon {
        position: relative; }
        #price .details .optional .detail.comingsoon:after {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 10;
          content: "";
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.1) url(../img/icon_comingsoon2.png) no-repeat center center;
          background-size: contain; }
  #price .details .joint {
    margin: 50px 0 0;
    min-height: 50px;
    text-align: center; }
    #price .details .joint span {
      position: relative;
      left: 50%;
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
      display: block;
      width: 50px;
      height: 5px;
      background-color: #ec6c00; }
      #price .details .joint span::before {
        position: absolute;
        content: "";
        display: block;
        width: 50px;
        height: 5px;
        background-color: #ec6c00;
        -webkit-transform: rotate(90deg);
                transform: rotate(90deg); }
  @media screen and (min-width: 960px) {
    #price .details .other {
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
              justify-content: space-between;
      -webkit-flex-wrap: wrap;
              flex-wrap: wrap; } }
  #price .details .other .initial {
    margin: 10px 0;
    border: 2px solid white;
    text-align: center;
    background: #f3f3f3; }
    @media screen and (min-width: 960px) {
      #price .details .other .initial {
        width: 50%;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
                align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
                justify-content: center; } }
    #price .details .other .initial h3 {
      margin: .5em;
      color: #ec6c00;
      font-size: 24px;
      font-size: 2.4rem;
      font-weight: bold;
      text-align: center;
      text-shadow: 2px 1px 0px white; }
    #price .details .other .initial .price {
      margin: 0 0 5px 0;
      color: #ec6c00;
      font-size: 40px;
      font-size: 4rem;
      font-weight: bold;
      text-shadow: 4px 3px 0px white;
      position: relative; }
      #price .details .other .initial .price:after {
        position: absolute;
        top: 0;
        right: 0;
        content: "";
        width: 90px;
        height: 110px;
        background: url(../img/icon_kirakira.png) no-repeat;
        background-size: contain; }
      #price .details .other .initial .price strong {
        margin: 0;
        font-size: 150px;
        font-size: 15rem; }
    #price .details .other .initial .mascotImg {
      max-width: 100px;
      height: auto; }
  #price .details .other .conditions {
    margin: 10px 0;
    padding: 20px 15px;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
            align-items: center;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
    background: white;
    border: 2px solid #ddd; }
    @media screen and (min-width: 960px) {
      #price .details .other .conditions {
        width: 48%; } }
    #price .details .other .conditions ul {
      margin: 0;
      padding: 0; }
      #price .details .other .conditions ul li {
        padding: 0 1em 0 1.1em;
        list-style: none;
        position: relative;
        font-size: 11px;
        font-size: 1.1rem; }
        #price .details .other .conditions ul li:before {
          position: absolute;
          top: 0;
          left: 0;
          content: "※";
          width: 1em; }
    #price .details .other .conditions p {
      margin: .5em 0;
      font-size: 12px;
      font-size: 1.2rem; }
  #price .details .chance {
    margin: 30px 0;
    padding: 15px;
    background: #ec6c00; }
    #price .details .chance .ttl {
      text-align: center; }
      #price .details .chance .ttl h3 {
        margin: 0 0 .5em;
        color: white;
        font-size: 24px;
        font-size: 2.4rem;
        font-weight: bold; }
    #price .details .chance .conts {
      background: white;
      position: relative; }
      @media screen and (min-width: 640px) {
        #price .details .chance .conts {
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          -webkit-box-pack: center;
          -webkit-justify-content: center;
                  justify-content: center;
          -webkit-box-align: center;
          -webkit-align-items: center;
                  align-items: center; } }
      #price .details .chance .conts .attention {
        color: #1f286f;
        font-size: 16px;
        font-size: 1.6rem;
        line-height: 220%;
        font-weight: bold;
        text-align: center;
        position: relative;
        padding: 10px 0 0;
        text-align: center;
        color: #FFF;
        background: #00a0e9;
        box-sizing: border-box; }
        @media screen and (max-width: 639px) {
          #price .details .chance .conts .attention br {
            display: none; } }
        @media screen and (min-width: 640px) {
          #price .details .chance .conts .attention {
            margin: 0 15px 0 0;
            padding: 15px 15px;
            display: inline-block;
            border-radius: 50%; }
            #price .details .chance .conts .attention:before {
              content: "";
              position: absolute;
              top: 50%;
              right: -25px;
              margin-top: -15px;
              border: 15px solid transparent;
              border-left: 15px solid #00a0e9;
              z-index: 0; } }
        #price .details .chance .conts .attention p {
          margin: 0; }
        #price .details .chance .conts .attention strong {
          font-size: 36px;
          font-size: 3.6rem; }
      #price .details .chance .conts .txt {
        padding: 10px 5px; }
        #price .details .chance .conts .txt p {
          margin: .5em 0;
          color: #ec6c00;
          font-size: 24px;
          font-size: 2.4rem;
          font-weight: bold;
          text-align: center; }
          @media screen and (max-width: 639px) {
            #price .details .chance .conts .txt p {
              font-size: 16px;
              font-size: 1.6rem; } }
          #price .details .chance .conts .txt p strong {
            font-size: 42px;
            font-size: 4.2rem; }
            @media screen and (max-width: 639px) {
              #price .details .chance .conts .txt p strong {
                font-size: 30px;
                font-size: 3rem; } }
    #price .details .chance .moreInfo {
      margin: 15px 0 0; }
      #price .details .chance .moreInfo p {
        margin: 0;
        color: white;
        font-size: 14px;
        font-size: 1.4rem;
        text-align: center; }
        #price .details .chance .moreInfo p a {
          color: white;
          text-decoration: underline;
          -webkit-transition: all .3s ease;
          transition: all .3s ease; }
          #price .details .chance .moreInfo p a:hover {
            opacity: 0.70; }
  #price .nextButton a {
    background: #b6e0e8; }

/* =====================
  faq
===================== */
#faq {
  background: white;
  background-image: -webkit-linear-gradient(bottom, #b6e0e8 0%, #ffffff 100%);
  background-image: linear-gradient(to top, #b6e0e8 0%, #ffffff 100%); }
  #faq .nextButton a {
    background: white; }
  #faq .wrap li {
    padding: 2em 1.5em;
    box-shadow: 0 2px 5px #ccc;
    background: white; }
  #faq .wrap .uk-accordion-title {
    padding: 0 0 0 30px;
    color: #1f286f;
    font-size: 20px;
    font-size: 2rem;
    font-weight: bold;
    position: relative; }
    #faq .wrap .uk-accordion-title:before {
      position: absolute;
      top: 0;
      left: 0;
      content: "Q.";
      width: 1em;
      height: auto;
      font-family: TIMES, sans-serif;
      color: #ec6c00; }
  #faq .wrap .uk-accordion-content {
    padding: 0 0 0 30px;
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 200%;
    position: relative; }
    #faq .wrap .uk-accordion-content:before {
      position: absolute;
      top: 0;
      left: 0;
      content: "A.";
      width: 1em;
      height: auto;
      font-size: 20px;
      font-size: 2rem;
      font-weight: bold;
      font-family: TIMES, sans-serif;
      color: #00a0e9; }
  @media screen and (min-width: 640px) {
    #faq .obj {
      position: absolute;
      top: -100px;
      right: 0;
      z-index: -1; } }

/* =====================
  cta
===================== */
#cta {
  background: #00a0e9; }
  #cta .sectionTtl {
    color: white; }
  #cta .desc {
    margin: 0 0 45px;
    color: white;
    font-size: 21px;
    font-size: 2.1rem;
    line-height: 150%;
    font-weight: bold;
    text-align: center; }
  #cta .contacts {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
            justify-content: space-between; }
  #cta .contactInfo {
    padding: 20px;
    box-sizing: border-box;
    background: white;
    border-radius: 10px;
    width: calc(100% - 320px); }
    @media screen and (max-width: 959px) {
      #cta .contactInfo {
        width: 100%; } }
    #cta .contactInfo .web {
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-wrap: wrap;
              flex-wrap: wrap;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
              justify-content: space-between; }
      #cta .contactInfo .web h4 {
        margin: 0 0 .5em;
        color: yellow;
        font-size: 18px;
        font-size: 1.8rem;
        font-weight: bold; }
      #cta .contactInfo .web .download {
        margin: 0 0 20px;
        width: calc(50% - 10px); }
        @media screen and (max-width: 959px) {
          #cta .contactInfo .web .download {
            width: 100%; } }
        #cta .contactInfo .web .download .downloadBtn a {
          padding: 15px;
          text-align: center; }
        #cta .contactInfo .web .download .downloadBtn p {
          margin: .5em 0 0;
          font-size: 26px;
          font-size: 2.6rem;
          font-weight: bold; }
      #cta .contactInfo .web .form {
        margin: 0 0 20px;
        width: calc(50% - 10px); }
        @media screen and (max-width: 959px) {
          #cta .contactInfo .web .form {
            width: 100%; } }
        #cta .contactInfo .web .form .contactBtn a {
          padding: 15px;
          text-align: center; }
        #cta .contactInfo .web .form .contactBtn p {
          margin: .5em 0 0;
          font-size: 26px;
          font-size: 2.6rem;
          font-weight: bold; }
      /*#cta .contactInfo .web .line {
        margin: 0 0 20px;
        padding: 15px;
        width: 100%;
        background: #1fc100;
        border-radius: 5px;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
                flex-wrap: wrap;
        -webkit-box-align: center;
        -webkit-align-items: center;
                align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
                justify-content: center; }*/
        #cta .contactInfo .web .line {
        margin: 0 0 20px;
        width: 100%; }
        @media screen and (max-width: 959px) {
          #cta .contactInfo .web .line {
            width: 100%; } }
        #cta .contactInfo .web .line .lineBtn a {
          padding: 15px;
          text-align: center; }
        #cta .contactInfo .web .line .lineBtn p {
          margin: .5em 0 0;
          font-size: 26px;
          font-size: 2.6rem;
          font-weight: bold; }

        @media screen and (max-width: 959px) {
          #cta .contactInfo .web .line {
            -webkit-box-pack: center;
            -webkit-justify-content: center;
                    justify-content: center;
            text-align: center; } }
        @media screen and (min-width: 640px) {
          #cta .contactInfo .web .line .txt {
            padding: 0 0 0 50px; } }
        #cta .contactInfo .web .line .txt h4 {
          margin: 0 0 1em;
          width: 100%; }
        #cta .contactInfo .web .line .txt .wrap {
          margin: 0 0 15px;
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          -webkit-box-align: center;
          -webkit-align-items: center;
                  align-items: center; }
          #cta .contactInfo .web .line .txt .wrap .logo {
            display: block;
            color: white;
            font-size: 26px;
            font-size: 2.6rem;
            font-weight: bold; }
          #cta .contactInfo .web .line .txt .wrap p {
            margin: 0 0 0 1em;
            color: white;
            font-size: 13px;
            font-size: 1.3rem;
            text-align: left; }
        #cta .contactInfo .web .line .line_code {
          margin: auto;
          width: 200px;
          text-align: center; }
          #cta .contactInfo .web .line .line_code img {
            width: 130px;
            height: auto; }
        #cta .contactInfo .web .line .line_id {
          padding: 1em 0;
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          -webkit-box-align: center;
          -webkit-align-items: center;
                  align-items: center;
          -webkit-box-pack: center;
          -webkit-justify-content: center;
                  justify-content: center;
          font-size: 14px;
          font-size: 1.4rem; }
          #cta .contactInfo .web .line .line_id p {
            padding: 0 5px;
            margin: 0;
            color: white; }
          #cta .contactInfo .web .line .line_id a {
            padding: 2px 25px 2px 5px;
            display: block;
            color: #1f286f;
            border-radius: 3px;
            text-decoration: none;
            background: white url(../img/icon_search.png) no-repeat right 5px center;
            background-size: 12px 12px; }
    #cta .contactInfo .phone {
      text-align: center; }
      #cta .contactInfo .phone h4 {
        margin: 1em 0 .5em;
        font-size: 18px;
        font-size: 1.8rem;
        font-weight: bold; }
      #cta .contactInfo .phone p {
        margin: .5em 0;
        font-size: 15px;
        font-size: 1.5rem;
        font-weight: bold; }
        #cta .contactInfo .phone p .open {
          margin: 0 .5em 0 0;
          padding: .25em 1em;
          color: white;
          font-size: 13px;
          font-size: 1.3rem;
          background: #1f286f; }
      #cta .contactInfo .phone a {
        color: black;
        font-size: 42px;
        font-size: 4.2rem;
        font-weight: bold;
        text-decoration: none; }
        @media screen and (max-width: 639px) {
          #cta .contactInfo .phone a {
            font-size: 30px;
            font-size: 3rem; } }
        #cta .contactInfo .phone a strong {
          font-size: 140%; }
  #cta .mascot {
    width: 280px; }
    @media screen and (max-width: 959px) {
      #cta .mascot {
        display: none; } }
    #cta .mascot .brandName {
      margin: 15px auto;
      width: 280px;
      height: 280px;
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-wrap: wrap;
              flex-wrap: wrap;
      -webkit-box-align: center;
      -webkit-align-items: center;
              align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
              justify-content: center;
      background: #1f286f;
      border-radius: 50%; }
      #cta .mascot .brandName h3 {
        color: white;
        font-size: 40px;
        font-size: 4rem;
        font-weight: bold;
        text-align: center; }
        #cta .mascot .brandName h3 small {
          display: block;
          font-size: 12px;
          font-size: 1.2rem; }
    #cta .mascot .mascotImg {
      margin: -100px auto 0;
      max-width: 260px;
      height: auto; }

/* =====================
  news
===================== */
#news {
  background: #eeeeee; }
  #news .list ul {
    margin: 0;
    padding: 0; }
    #news .list ul li {
      padding: 1em 0;
      list-style: none; }
      #news .list ul li:not(:last-of-type) {
        border-bottom: 2px solid #ddd; }
      #news .list ul li p {
        margin: .5em 0;
        font-size: 14px;
        font-size: 1.4rem;
        color: #333333; }
      #news .list ul li .date {
        font-size: 13px;
        font-size: 1.3rem; }
      #news .list ul li a p {
        color: #1f286f; }

/* =====================
  aboutUs
===================== */
#aboutUs .companyName {
  margin: 0 0 35px;
  text-align: center; }
  #aboutUs .companyName a {
    color: black;
    font-size: 20px;
    font-size: 2rem;
    line-height: 160%;
    font-weight: bold; }

#aboutUs .partners h3 {
  text-align: center;
  color: black;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: bold; }

#aboutUs .partners .list {
  border: 2px solid #b6e0e8; }
  #aboutUs .partners .list ul {
    margin: 0;
    padding: 2em;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap; }
    @media screen and (max-width: 959px) {
      #aboutUs .partners .list ul {
        padding: 1em; } }
    #aboutUs .partners .list ul li {
      margin: .5em 0;
      list-style: none;
      width: calc(100% / 3);
      color: #1f286f;
      font-size: 12px;
      font-size: 1.2rem;
      letter-spacing: -.1em;
      font-weight: bold; }
      @media screen and (max-width: 959px) {
        #aboutUs .partners .list ul li {
          width: 100%; } }

/* =====================
  contact
===================== */
#contact {
  margin: 50px 0 0; }
  #contact a {
    color: #00a0e9;
    -webkit-transition: all .3s ease;
    transition: all .3s ease; }
    #contact a:hover {
      opacity: 0.70; }
  #contact .intro .point {
    padding: 15px 5px;
    background: #00a0e9;
    text-align: center; }
    #contact .intro .point .wrap {
      padding: 0 0 0 65px;
      display: inline-block;
      position: relative; }
      #contact .intro .point .wrap:before {
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        width: 50px;
        height: 100%;
        background: url(../img/icon_smartphone.svg) no-repeat center center;
        background-size: contain; }
    #contact .intro .point h3 {
      margin: 0 0 .5em;
      color: white;
      font-size: 22px;
      font-size: 2.2rem;
      font-weight: bold;
      text-align: center; }
      @media screen and (max-width: 639px) {
        #contact .intro .point h3 {
          font-size: 18px;
          font-size: 1.8rem; } }
    #contact .intro .point p {
      margin: .5em 0 0;
      color: white;
      font-size: 16px;
      font-size: 1.6rem;
      font-weight: bold;
      text-align: center; }
      @media screen and (max-width: 639px) {
        #contact .intro .point p {
          font-size: 14px;
          font-size: 1.4rem; } }


   #contact .intro .live {
        margin: 20px 0;
        width: 100%;}

#contact .intro .live .lineBtn {
		      width: 50%;
    		  margin: 0 auto; }

        @media screen and (max-width: 959px) {
          #contact .intro .live .lineBtn {
            width: 90%;
			margin: 0;} }

   #contact .intro .live .lineBtn a {
		  color: #FFFFFF!important;
          padding: 15px;
          text-align: center; }
   #contact .intro .live .lineBtn p {
          margin: .5em 0 ;
          font-size: 26px;
          font-size: 2.6rem;
          font-weight: bold; }

  #contact .intro .message {
    padding: 1em;
    background: #eeeeee; }
    #contact .intro .message p {
      margin: 0;
      font-size: 20px;
      font-size: 2.2rem;
      font-weight: bold;
      line-height: 160%;
      text-align: center; }

   #contact .intro .message ol li {
      margin: 0 auto;
      font-size: 16px;
      font-size: 1.6rem;
      line-height: 160%;
      text-align: left; }

  #contact .notes {
    padding: 1em;
    background: #eeeeee; }
    #contact .notes p {
      margin: 0;
      font-size: 13px;
      font-size: 1.3rem;
      line-height: 160%; }
  #contact #mail_form {
    margin: 30px 0;
    padding: 2em 1.5em;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 2px 5px #ccc;
    border: none;
    border-radius: 0; }
    #contact #mail_form dl dt,
    #contact #mail_form dl dd {
      font-size: 16px;
      font-size: 1.6rem;
      border: none; }
    @media screen and (min-width: 640px) {
      #contact #mail_form dl dt {
        padding: 21px 0; } }
    #contact #mail_form dl dt .required {
      margin: 0 1em 0 0; }
    #contact #mail_form ul {
      margin: 0;
      padding: 0; }
    #contact #mail_form input,
    #contact #mail_form textarea {
      padding: 3px 1em;
      font-size: 16px;
      font-size: 1.6rem;
      line-height: 160%; }
  #contact #form_submit {
    text-align: center;
    border: none !important; }
    #contact #form_submit #form_submit_button {
      margin: 15px 0;
      padding: 1em 2em;
      display: inline-block;
      color: #FFF;
      font-size: 16px;
      font-size: 1.6rem;
      background: #00a0e9;
      border: none;
      border-bottom: solid 4px #1583ba;
      border-radius: 3px; }
      #contact #form_submit #form_submit_button:active {
        -webkit-transform: translateY(4px);
                transform: translateY(4px);
        border-bottom: none; }



/* =====================
  request
===================== */
#request {
  margin: 50px 0 0; }

      @media screen and (max-width: 639px) {
        #request {
 		 margin: 0; }

		#request .sectionTtl {
     font-size: 2.0rem!important; }

}

  #request a {
    color: #00a0e9;
    -webkit-transition: all .3s ease;
    transition: all .3s ease; }
    #request a:hover {
      opacity: 0.70; }
  #request .intro .point {
    padding: 15px 5px;
    background: #0a0;
    text-align: center; }
    #request .intro .point .wrap {
      padding: 0 0 0 65px;
      display: inline-block;
      position: relative; }
      #request .intro .point .wrap:before {
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        width: 50px;
        height: 100%;
        background: url(../img/document.png) no-repeat center center;
        background-size: contain; }
    #request .intro .point h3 {
      margin: 0 0 .5em;
      color: white;
      font-size: 22px;
      font-size: 2.2rem;
      font-weight: bold;
      text-align: center; }
      @media screen and (max-width: 639px) {
        #request .intro .point h3 {
          font-size: 18px;
          font-size: 1.8rem; } }
    #request .intro .point p {
      margin: .5em 0 0;
      color: white;
      font-size: 16px;
      font-size: 1.6rem;
      font-weight: bold;
      text-align: center; }
      @media screen and (max-width: 639px) {
        #request .intro .point p {
          font-size: 14px;
          font-size: 1.4rem; } }

    #request .intro .download {
        margin: 0 auto 20px;
        width: calc(50% - 10px); }
        @media screen and (max-width: 959px) {
          #request .intro .download {
            width: 90%; } }

   #request .intro .download .downloadBtn a {
		  color: #FFFFFF!important;
          padding: 15px;
          text-align: center; }
   #request .intro .download .downloadBtn p {
          margin: .5em 0 ;
          font-size: 26px;
          font-size: 2.6rem;
          font-weight: bold; }

   #request .intro .live {
        margin: 20px 0;
        width: 100%;}

#request .intro .live .lineBtn {
		      width: 50%;
    		  margin: 0 auto; }

        @media screen and (max-width: 959px) {
          #request .intro .live .lineBtn {
            width: 90%;
			margin: 0;} }

   #request .intro .live .lineBtn a {
		  color: #FFFFFF!important;
          padding: 15px;
          text-align: center; }
   #request .intro .live .lineBtn p {
          margin: .5em 0 ;
          font-size: 26px;
          font-size: 2.6rem;
          font-weight: bold; }

  #request .intro .message {
    padding: 1em;
    background: #eeeeee; }
    #request .intro .message p {
      margin: 0;
      font-size: 20px;
      font-size: 2.2rem;
      font-weight: bold;
      line-height: 160%;
      text-align: center; }

   #request .intro .message ol li {
      margin: 0 auto;
      font-size: 16px;
      font-size: 1.6rem;
      line-height: 160%;
      text-align: left; }

  #request .notes {
    padding: 1em;
    background: #eeeeee; }
    #request .notes p {
      margin: 0;
      font-size: 13px;
      font-size: 1.3rem;
      line-height: 160%; }
  #request #mail_form {
    margin: 30px 0;
    padding: 2em 1.5em;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 2px 5px #ccc;
    border: none;
    border-radius: 0; }
    #request #mail_form dl dt,
    #request #mail_form dl dd {
      font-size: 16px;
      font-size: 1.6rem;
      border: none; }
    @media screen and (min-width: 640px) {
      #request #mail_form dl dt {
        padding: 21px 0; } }
    #request #mail_form dl dt .required {
      margin: 0 1em 0 0; }
    #request #mail_form ul {
      margin: 0;
      padding: 0; }
    #request #mail_form input,
    #request #mail_form textarea {
      padding: 3px 1em;
      font-size: 16px;
      font-size: 1.6rem;
      line-height: 160%; }
  #request #form_submit {
    text-align: center;
    border: none !important; }
    #request #form_submit #form_submit_button {
      margin: 15px 0;
      padding: 1em 2em;
      display: inline-block;
      color: #FFF;
      font-size: 16px;
      font-size: 1.6rem;
      background: #00a0e9;
      border: none;
      border-bottom: solid 4px #1583ba;
      border-radius: 3px; }
      #request #form_submit #form_submit_button:active {
        -webkit-transform: translateY(4px);
                transform: translateY(4px);
        border-bottom: none; }



/* floating banner 20190729 */

.globalFooter {
  padding-bottom: 105px;
}

#backTop {
  bottom: 110px;
}

#floatingBnr {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  background: rgba(255,255,255,.8);
  padding: 10px;
  font-size: 0;
  box-sizing: border-box;
  text-align: center;
}

/* 20190730追記 */
#floatingBnr .inner {
  max-width: 960px;
  margin: 0 auto;
}
/* // 20190730追記 */

#floatingBnr p {
  display: inline-block;
  width: calc(50% - 6px);
  vertical-align: top;
}

#floatingBnr p a {
  display: block;
  box-sizing: border-box;
  color: #fff;
  border-radius: 5px;
}

#floatingBnr p a:hover {
  opacity: .7;
  text-decoration: none;
}

#floatingBnr .fb_tel {
  margin: 0 5px 0 0;
}

#floatingBnr .fb_tel a {
  background: #0a0;
  height: 84px;
  padding: 10px 0 0;
  border-bottom: 5px solid #060;
}

#floatingBnr .fb_tel a span {
  display: block;
}

#floatingBnr .fb_tel a .fb_tel01 {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.3;
}

#floatingBnr .fb_tel a .fb_time {
  font-size: 11px;
}

#floatingBnr .fb_tel a .fb_num {
  display: inline-block;
  background: url(../img/document.png) no-repeat left center;
  background-size: 33px auto;
  vertical-align: middle;
  font-size: 20px;
  font-weight: bold;
  padding-left: 40px;
  margin-top: 12px;
}

#floatingBnr .fb_req {
  margin: 0 0 0 5px;
}
#floatingBnr .fb_req a {
  background: #0a0;
  height: 84px;
  border-bottom: 5px solid #060;
  line-height: 79px;
}

#floatingBnr .fb_req a span {
  display: inline-block;
  background: url(../img/document.png) no-repeat left center;
  background-size: contain;
  vertical-align: middle;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.2;
  padding-left: 50px;
}


#floatingBnr .fb_net {
  margin: 0 0 0 5px;
}
#floatingBnr .fb_net a {
  background: #ec6c00;
  height: 84px;
  border-bottom: 5px solid #b25101;
  line-height: 79px;
}

#floatingBnr .fb_net a span {
  display: inline-block;
  background: url(../img/mail.png) no-repeat left center;
  background-size: contain;
  vertical-align: middle;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.2;
  padding-left: 50px;
}

#floatingBnr .fb_live {
  margin: 5px 0 0 5px;
}
#floatingBnr .fb_live a {
  background: #00a0e9;
  height: 84px;
  border-bottom: 5px solid #1583ba;
  line-height: 79px;
}

#floatingBnr .fb_live a span {
  display: inline-block;
  background: url(../img/document.png) no-repeat left center;
  background-size: contain;
  vertical-align: middle;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.2;
  padding-left: 50px;
}

@media screen and (max-width: 640px) {

.globalFooter {
  padding-bottom: 97px;
}

#backTop {
  bottom: 88px;
}

#floatingBnr .fb_tel a {
  height: 62px;
  padding: 8px 0 0;
  line-height: inherit;
}

#floatingBnr .fb_tel a .fb_tel01 {
  font-size: 12px;
}

#floatingBnr .fb_tel a .fb_time {
  font-size: 10px;
}

#floatingBnr .fb_tel a .fb_num {
  background-size: 14px auto;
  font-size: 14px;
  padding-left: 20px;
  margin-top: 10px;
}

#floatingBnr .fb_req a {
  height: 62px;
  line-height: 57px;
}

#floatingBnr .fb_req a span {
  font-size: 13px;
  padding-left: 20px;
}

#floatingBnr .fb_net a {
  height: 62px;
  line-height: 57px;
}

#floatingBnr .fb_net a span {
  font-size: 13px;
  padding-left: 20px;
}

#floatingBnr .fb_live a {
  height: 62px;
  line-height: 57px;
}

#floatingBnr .fb_live a span {
  font-size: 13px;
  padding-left: 20px;
}

}



/*voice*/
.voice_bg{
	background: #bbe2ea;
}
.ma_auto{
	margin: 0 auto;
	text-align: center;
}
.voice_tit{
	margin-bottom: 40px;
}
.voice_box{
	background: #fff;
	border-radius: 10px 10px 0 0;
}
.voice_box_mb{
	margin-bottom: 50px;
}
.voice_box_in{
	padding: 0 50px 50px 50px;
	font-size: 18px;
}
.voice_ul dt{
	font-size: 26px;
	padding-bottom: 20px;
	margin-bottom: 30px;
	border-bottom: 2px dashed #00a0e9;
}
.voice_fl{
	float: left;
	width: 60%;
}
.voice_fr{
	float: right;
	width: 37%;
}
.voice_sec{
	margin-bottom: 40px;
}
.voice_fl02{
	float: left;
	width: 37%;
}
.voice_fr02{
	float: right;
	width: 60%;
}
.caution{
	font-size: 14px;
	margin-bottom: 0;
	margin-top: 0;
	text-indent: -1em;
	padding-left: 1em;
}

/* 20231127追加 */
.voice_ttl {
  padding-bottom: 32px;
  position: relative;
}
.voice_ttl span {
  padding: 20px 30px;
  display: inline-block;
  border: 4px solid #469ee3;
  border-radius: 10px;
  font-weight: bold;
  font-size: 30px;
}
.voice_ttl span::before {
  position: absolute;
  left: 100px;
  bottom: 0px;
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 24px 36px 0;
  border-color: transparent #469ee3 transparent transparent;
}
.voice_ttl span::after {
  position: absolute;
  left: 105px;
  bottom: 12px;
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 15px 25px 0;
  border-color: transparent #fff transparent transparent;
}
.voice_ttl strong {
  color:  #dd8f39;
}
.voice_fr .iframe {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.voice_fr .iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


@media screen and (min-width: 641px) {
	.br_pc{
		display: block;
	}
	.br_sp{
		display: none;
	}
}

@media screen and (max-width: 640px) {
	.br_pc{
		display: none;
	}
	.br_sp{
		display: block;
	}
	.sp_ma_auto{
		text-align: center;
	}
	.voice_tit{
		margin-bottom: 20px;
	}
	.voice_box_in{
		padding: 0 15px 15px 15px;
		font-size: 14px;
	}
	.voice_box_mb{
		margin-bottom: 30px;
	}
	.voice_ul dt{
		font-size: 16px;
		padding-bottom: 15px;
		margin-bottom: 15px;
	}
	.voice_sec{
		margin-bottom: 15px;
	}
	.voice_fl{
		float: none;
		width: 100%;
	}
	.voice_fr{
		float: none;
		width: 100%;
	}
	.voice_fl02{
		float: none;
		width: 100%;
	}
	.voice_fr02{
		float: none;
		width: 100%;
	}
	.caution{
		font-size: 12px;
	}
	.voicemov{
		margin-bottom: 15px;
	}
  /* 20231127追加 */
  .voice_ttl span {
    padding: 15px;
    font-size: 24px;
  }
}





/* =====================
  ithojo2020
===================== */


/* =====================
  newsinfo
===================== */
#newsinfo {
  max-width: 680px;
  margin: 20px auto;
  font-size: 140%;
}


#newsinfo h1{
  text-align: center;
  font-size: 150%;
}





/*---------------------
20191010追加
---------------------*/

/*header*/
.gh_hl{
	float: left;
	width: 40%;
	margin-top: 20px;/*-- 2022 tano --*/
}
.gh_hr{
	float: right;
	width: 60%;
}
.gh_hrl{
	float: left;
	width: 55%;
	margin: 0;
	margin: 0;
}
.gh_hrr li{
	float: left;
	list-style: none;
	margin: 0;
	padding-top:10px;
}
.header_b{
	background: rgba(255,255,255,50%);/*-- 2022 tano --*/
}

@media screen and (max-width: 959px) {
	.gh_hl{
	float: none;
    position: absolute;
    margin: 7px auto 10px 5px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
	}
	
	.logo_b a img{
		width:50%;
	}
	
	.sp-contact{
		width: 130px;/*-- 2022 tano --*/
		height: 36px;/*-- 2022 tano --*/
		font-size: 16px;/*-- 2022 tano --*/
		background-color: #ec6c00;/*-- 2022 tano --*/
		position: relative;/*-- 2022 tano --*/
		margin-top: -8.5%;/*-- 2022 tano --*/
		right: 2%;/*-- 2022 tano --*/
		border-radius: 30px;/*-- 2022 tano --*/
		float: right;
	}
	
	.sp-contact a{
		line-height: 37px;
		text-align: center;
		color: #fff;
	}
}

@media (min-width: 641px) and (max-width: 959px) {
	.gh_hl{
		float: none;
		position: absolute;
		margin: 0 auto;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		width: 30%;
	}
}

/*mv*/

#mainimgarea{
	width: 100%;/*-- 2022 tano --*/
    height: 950px;/*-- 2022 tano --*/
	margin-top: -100px;/*-- 2022 tano --*/
	background-image:url("../img/new-mv-img.png");/*-- 2022 tano --*/
	background-repeat: no-repeat;/*-- 2022 tano --*/
    background-position:50% 50%;/*-- 2022 tano --*/
	margin-bottom: -4px;/*-- 2022 tano --*/
	position: relative;/*-- 2022 tano --*/
}

#mainimgarea h1{
	margin: 0;
}
#mainimgarea h1{
	width: 152%;
}


/*---------------------
20210720追加
---------------------*/

/*-- 2022 tano --*/
.mvbtn {
    width: 1280px;
    height: 300px;
    margin: 0 auto;
    position: relative;
	margin-top: -304px;
}

@media (min-width: 960px){
	#mvbtn{
	  position: absolute;/*-- 2022 tano --*/
	  right: 0px;/*-- 2022 tano --*/
	  bottom: 100px;/*-- 2022 tano --*/
	  z-index:1;
	}

	
	#mvbtn2{
	/*--  margin-top: -500px; 2022 tano --*/
    /*--  margin-left: -628px; 2022 tano --*/
	/*--  padding-bottom:40px; --*/
	}


	#mvbtn a{
	  padding:12px;
	  display: block;
	  width: 135px;
	  height: 60px;
	  text-align:center;
	  vertical-align: middle;
	  text-decoration: none;
	  line-height:2em;
	  color: #FFF;
	  border-radius: 60px;
	  margin: 20px 0 0 0;
	}


	.mvdownload a{
	  float:left;
	  margin-right:10px;
	  margin-bottom:10px;
	  background: #0a0;
	}
	.mvform a{
	  float:left;
	  background: #00aa00;
	  width: 605px !important;
	  margin-bottom:10px;
	}
	.mvline a{
	  clear:left;
	  background: #00a0e9;
	  margin-top: 20px;
	  vertical-align: middle;
	  width:605px !important;
	}
	#mvbtn a:active {
	    -webkit-transform: translateY(4px);
	            transform: translateY(4px);
	    border-bottom: none;
	}

	#mvbtn h4 {
		color: #fff;
		font-size: 30px;
		letter-spacing: 0.13em;
		line-height: 2;
	}
	#mvbtn p {
	  margin-top:-15px;
	  font-size: 20px;
	  font-weight: bold;
	}
}


@media (min-width: 641px) and (max-width: 959px) {
	#mainimgarea{
		margin-top: 2%;
	}

	#mvbtn{
	  width:100%;
	  height:100%;
	  margin-left:5%;
	  position: relative;
	  left:10px;
	  z-index:1;
	}

	#mvbtn2{
	  margin-top:calc(-100vw / 4.5);

	}

	#mvbtn a{
	  border-bottom: solid 4px #222;
	  border-radius: 3px;
	}

	#mvbtn h4 {
	  display:none;
	}
	#mvbtn p {
	  color: white;
	  text-align:center;
	  font-size: 15px;
	  height:5%;
	  padding: 10px;
	  font-weight: bold;
	}

	.mvdownload a{
	  margin-right:10px;
	  margin-bottom:-16px;
	  background: #0a0;
	  display: block;
	  width: 30%;
	  height: calc(100vw / 20);
	}

	.mvform a{
	  margin-bottom:5px;
	  background: #ec6c00;
	  display: block;
	  width: 30%;
	  height: calc(100vw / 20);
	}

	.mvline a{
	  margin-bottom:12px;
	  background: #00a0e9;
	  display: block;
	  width: 30%;
	  height: calc(100vw / 20);
	  vertical-align: middle;
	}

}

/*---------------------
2021078追加
---------------------*/

@media screen and (max-width: 640px) {
	.globalHeader{
		height: 60px;
	}
	
	#mvbtn{
	  margin:0 auto;
	  position: relative;
	  z-index:1;
	}

	#mvbtn2{
	  width: 90%;
      margin: 0 auto;
	  margin-top:-68%;
	  padding-bottom:32px;
	}


	#mvbtn a{
		padding: 13px 6px 6px 6px;
		display: block;
		width: 37.5%;
		height: 25px;
		text-align:center;
		vertical-align: middle;
		text-decoration: none;
		line-height:2em;
		color: #FFF;
		border-radius: 30px;
	}


	.mvdownload a{
	  float:left;
	  margin-right:5px;
	  margin-bottom:5px;
	  background: #0a0;
	}
	.mvform a{
	  float:right;
	  background: #00aa00;
	  width: 37% !important;
	  margin-bottom:5px;
	  margin-top: -46px;
	}
	
	.mvline a{
	  clear:left;
	  background: #00a0e9;
	  margin-top: 20px;
	  vertical-align: middle;
	  width:53% !important;
	}
	.mvline p{
	  margin-top: 8px !important;
	}

	#mvbtn a:active {
	    -webkit-transform: translateY(4px);
	            transform: translateY(4px);
	    border-bottom: none;
	}


	#mvbtn h4 {
	  color: #fff;
	  font-size: 1.6rem;
	  /*-- display:none;	--*/
	}

	
	#mvbtn p {
	  margin-top:8px;
	  font-size: 14px;
	  font-weight: bold;
	}
	

	#mainimgarea{
	margin-top: -224px;/*-- 2022 tano --*/
	background-image:url("../img/sp-new-mv-img.png");/*-- 2022 tano --*/
	background-size: 230%;/*-- 2022 tano --*/
    background-repeat: no-repeat;/*-- 2022 tano --*/
    background-position: 70% 36%;/*-- 2022 tano --*/
	margin-bottom: -4px;/*-- 2022 tano --*/
	position: relative;/*-- 2022 tano --*/
	}

	#mainimgarea h1{
		width: 100%;
	}

}

/*---------------------
20211007追加
---------------------*/
@media screen and (min-width: 960px) {
	.footer-content{
	padding: 1%;
	 width: 44%;}
	.footer-content ul{
	display: flex;
	font-size: 1.2rem;
	padding: 0;}
	.footer-content ul li{
	list-style: none;
	margin: 0 0 0 1em;}
}
@media screen and (max-width: 959px){
	.footer-content{
	 padding: 1%;
	 width: 48%;}
	.footer-content ul{
	display: flex;
	font-size: 1.2rem;
	padding: 0;}
	.footer-content ul li{
	list-style: none;
	margin: 0 0 0 1em;}
}
@media screen and (max-width: 640px) {
	[data-lg]{
	padding: 0 10px;}
	.footer-content ul{
	padding: 0;
	display: block;}
	.footer-content ul li{
	margin-bottom: 1em;}
	.globalFooter nav ul{
	flex-wrap: wrap;}
}


/*---------------------
20220219追加
---------------------*/
.latest-media {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.latest-media .item {
  margin: 0 0 30px;
  padding: 0 20px;
  box-sizing: border-box;
  list-style: none;
}
@media screen and (min-width: 750px) {
  .latest-media .item {
    width: 33.33%;
  }
}
.latest-media .item a {
  display: block;
  text-decoration: none;
  transition: all 400ms ease;
  opacity: .8;
  background-color: white;
  box-shadow: 0 1px 4px 0 rgb(0 0 0 / 20%);
}
.latest-media .item a:hover,
.latest-media .item a:hover .thumbnail {
  opacity: .8;
}
.latest-media .item .thumbnail {
  width: 100%;
  aspect-ratio: 79 / 48;
  object-fit: cover;
  transition: all 400ms ease;
}
.latest-media .item .conts {
  padding: 20px;
}
.latest-media .item .date {
  margin-bottom: 1em;
  color: #333;
  font-size: 12px;
  font-size: 1.2rem;
}
.latest-media .item .ttl {
  margin-top: 0;
  padding-top: 0;
  color: #333;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: bold;
}
.latest-media .item .txt {
  color: #333;
  font-size: 14px;
  font-size: 1.4rem;
}

/*---------------------
202207追加tano
---------------------*/
#new-titel {
	position: relative;
	width: 1280px; 
	height: 350px; 
	margin: auto;
}
.new-titel {
	font-family: Hiragino Mincho ProN, "Hiragino Mincho ProN" , "Yu Mincho", "serif";
	letter-spacing: 0.4em;
	position: absolute;
	top: 252px; 
	left: 0; 
}

.new-titel-top{
	font-size: 24px;
	color: #fff;
}

.new-titel-top {
	width: 596px;
    display: flex;
    align-items: center;
	margin-bottom: -7px;
}
 
.new-titel-top:before,
.new-titel-top:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #fff;
}
 
.new-titel-top:before {
    margin-right: 1rem;
}
 
.new-titel-top:after {
    margin-left: 1rem;
}

.new-titel-main{
	font-size: 64px;
	color: #fff;
	margin-bottom: -38px;
}

.new-titel-main2{
	font-size: 128px;
	color: #fff;
	margin-left: -6px;
}

.new-titel-main2 span{
	letter-spacing: 0.15em;
}

.sub-tbox {
    width: 624px;
	top: 280px;
    right: 0;
    position: absolute;
	font-size: 20px;
	color: #fff;
}

.sub-titel {
    text-align: center;
	margin-bottom: 30px;
}

.sub-titel1{
	font-size:50px;
	color:#fff;
}
span.sub-titel1 {
    font-weight: 800;
}

.sub-titel2{
	font-size:26px;
	color:#fff;
	margin-left: 5px;
}

.sub-titel3{
	font-size:36px;
	color:#fff;
}

.sub-workflow{
    width: 100%;
}

.sub-workflow-list{
	display: -webkit-box;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-flex-wrap: wrap;
	flex-wrap:         wrap;
	margin-left: -30px;
}

.sub-workflow-list::after{
	content: "";
	width: 28%;
}

.sub-workflow-list li{
	width: 28%;
	margin-bottom: 0.7em;
	padding: 0.5em;
	border: 2px #fff solid;
	border-radius: 30px;
	list-style: none;
	text-align: center;
	background-color: #575757;
}

.sub-workflow-list li a{
	display: block;
	line-height: 1;
	position: relative;
	color: #0063cc;
	background: #dff0ff;
	text-decoration: none;
	padding: 10px 15px;
	font-weight: 500;
}

.sub-workflow-list li a::after{
	content: "";
	width: 0;
	height: 0;
	border-top: 4px solid #0063cc;
	border-right: 3px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 3px solid transparent;
	position: absolute;
	right: 10px;
	top: calc(50%);
}

@media(min-width:751px){
    .sp{
        display: none;
    }
}
@media(max-width:750px){
    .pc{
        display: none;
    }
}

@media screen and (max-width: 959px) {
	
	
	
	#mainimgarea {
		height: 1010px;
	}

	#new-titel {
		width: 84%;
		height: 800px;
		margin-left: 4.6em;
	}
	
	.new-titel {
		width: 100%;
	}
	
	.new-titel-top {
    	width: 96%;
		margin-bottom: -15px;
	}
	
	.new-titel-top {
		font-size: 14px;
	}
	
	.new-titel-main {
		font-size: 8.2vw;
		color: #fff;
		margin-bottom: -30px;
	}
	
	.new-titel-main2 {
		font-size: 16.5vw;
		letter-spacing: 0.1em;
	}
	
	.sub-tbox {
		width: 100%;
		margin-top: 43%;
	}
	
	.sub-titel {
	    width: 50%;
		float: right;
	}
	
	.sub-titel1 {
	    font-size: 8vw;
	}
	
	.sub-workflow {
		width: 97%;
    	clear: both;
	}
	
	.sub-titel2 {
		font-size: 3.3vw;
	}
	
	.sub-titel3 {
		font-size: 4.9vw;
	}
	
	.sub-workflow-list {
		margin-left: -42px;
	}
	
	.sub-workflow-list li {
		width: 27%;
		height: 13px;
		border: 1px #fff solid;
		border-radius: 30px;
		font-size: 11px;
		line-height: 1.3em;
	}
	
	.mvbtn {
		width: 100%;
		height: auto;
		margin-top: -320px;
	}
	
	
}


/*---------------------
20220831追加
---------------------*/
	table {
		border-collapse:  collapse;
	}

	table th,
	table td {
		padding: 1em 10px 1em 0.5em;
		border: 1px solid;
	}
	
	table .del{
	text-decoration-line: line-through;
	text-decoration-style: solid;
	text-decoration-color: black;
}


/*---------------------
20230530追加
---------------------*/
.flex {
  display: flex; /*横並び*/
}
.flex .image {
  width: 640px; /*画像サイズ指定*/
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.flex .h2 {
  margin: 0 0 0 20px;
  padding: 0;
}


/*---------------------
20231130追加
---------------------*/
.c-btn {
  margin-bottom: 30px;
  text-align: center;
}
.c-btn a {
  padding: 1em 3em;
  position: relative;
  display: inline-block;
  font-weight: bold;
  font-size: 20px;
  text-decoration: none;
  color: #fff;
  background: #00a0e9;
  transition: .4s;
}
.c-btn.external a::after {
  margin-left: 0.5em;
  content: "";
  position: relative;
  display: inline-block;
  width: 15px;
  height: 15px;
  background-color: #fff;
  clip-path: polygon(0 33%, 50% 33%, 50% 15%, 100% 50%, 50% 85%, 50% 67%, 0 67%);
}
.c-btn a:hover {
  opacity: .7;
}
@media(max-width:750px){
  .c-btn a {
    padding: 1em 2em;
    font-size: 18px;
  }
}