@charset "UTF-8";
body {
  -webkit-animation: fadeIn 1.5s ease 0s 1 normal;
  animation: fadeIn 1.5s ease 0s 1 normal; }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
.top section,
.landing section {
  opacity: 0.1;
  transform: translate(0, 30px);
  transition: all 300ms; }

.top section.scrollin,
.landing section.scrollin {
  opacity: 1;
  transform: translate(0, 0); }

dl.accordion dt {
  background: #3fa5d8;
  cursor: pointer;
  padding: 10px 0 10px 30px;
  margin: 30px 0 0;
  color: #fff;
  position: relative; }
  dl.accordion dt:first-child {
    margin-top: 0; }
  dl.accordion dt:before {
    font-family: "Times New Roman";
    content: "Q";
    position: absolute;
    top: 12px;
    left: 10px; }
  dl.accordion dt:after {
    font-family: "Font Awesome 5 Free";
    content: "\f0d7";
    font-weight: bold;
    position: absolute;
    top: 12px;
    right: 10px; }

dl.accordion dt.open {
  content: "\f0d8"; }

dl.accordion dd {
  background: #f2f9f9;
  padding: 10px;
  line-height: 1.5;
  display: none;
  border-right: 5px solid #3fa5d8;
  border-bottom: 5px solid #3fa5d8;
  border-left: 5px solid #3fa5d8; }

* {
  margin: 0;
  padding: 0; }

body {
  overflow-y: scroll; }

body, textarea, input {
  margin: 0;
  padding: 0;
  font-family: "Arial","Meiryo",sans-serif;
  color: #555;
  font-size: 16px;
  letter-spacing: 0.1em; }

.wrap {
  width: 100%;
  overflow-x: hidden; }

.clearfix::after {
  content: "";
  display: block;
  clear: both; }

.center {
  margin: 0 auto;
  text-align: center;
  display: block; }

h2, h3 {
  font-weight: normal;
  text-align: center;
  margin-bottom: 20px; }

h1 {
  font-size: 100px;
  font-weight: bold;
  line-hight: 0;
  color: #fff;
  text-align: center;
  text-shadow: 0 0 30px #41c2c2;
  letter-spacing: 0; }
  h1 span {
    font-size: 18px; }

.top h1 {
  line-height: 1.2; }
  .top h1 span {
    font-size: 30px; }

header h1 span {
  display: block; }

h2 {
  color: #41c2c2; }
  h2 span {
    font-size: 12px;
    display: block; }

nav ul {
  display: flex;
  position: relative; }

nav li {
  display: block; }

nav li a {
  font-size: 13px;
  color: #555;
  margin: 0 10px; }

nav li a:hover {
  background: #fff;
  border-radius: 5px; }

.member-txt a {
  border-radius: 5px;
  background: #ff9000;
  color: #fff; }

nav li.member-txt a:hover {
  background: #fff;
  color: #ff9000; }

p {
  font-size: 14px;
  margin-bottom: 20px; }

a, a:hover {
  color: #555;
  text-decoration: none; }

ul:not(ol) {
  list-style: none; }

ul.list-style {
  margin-left: 20px; }

ol {
  padding-left: 20px; }

.font-orange {
  color: #ff9000; }

.bg-orange {
  background: #ff9000;
  color: #fff; }

.img-left {
  width: 30%;
  float: left;
  margin: 0 20px 20px 0; }

.btn-member a {
  background: #ff9000;
  padding: 10px;
  border-radius: 5px;
  color: #fff;
  width: 180px;
  margin: 0 10px; }

header, footer {
  width: 100%;
  background: #8ee6f0;
  background: -moz-linear-gradient(left, #8ee6f0 0%, #90f4d9 50%, #82f09c 100%);
  background: -webkit-linear-gradient(left, #8ee6f0 0%, #90f4d9 50%, #82f09c 100%);
  background: linear-gradient(to right, #8ee6f0 0%, #90f4d9 50%, #82f09c 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$freeBg', endColorstr='$freeBg',GradientType=1 ); }

textarea {
  width: 90%;
  padding: 10px 5%; }

table {
  margin: 0 auto;
  text-align: center;
  table-layout: fixed;
  border-collapse: collapse; }

table th,
table td {
  font-size: 13px;
  padding: 10px;
  border-bottom: 1px solid #12776f;
  display: table-cell;
  vertical-align: middle; }

.va-btm {
  vertical-align: bottom; }

table a:hover {
  opacity: 0.8; }

.table-btn-free a {
  display: block;
  background: #3fa5d8;
  padding: 10px;
  border-radius: 5px;
  color: #fff; }

.table-btn-regular a {
  display: block;
  background: #41c2c2;
  padding: 10px;
  border-radius: 5px;
  color: #fff; }

.table-btn-pro a {
  display: block;
  background: #3fc96e;
  padding: 10px;
  border-radius: 5px;
  color: #fff; }

.table-btn-member a {
  display: block;
  background: #ff9000;
  padding: 10px;
  border-radius: 5px;
  color: #fff; }

.th-item {
  background: #f2f9f9; }

.th-item-none {
  background: #3fa5d8;
  position: relative; }

.th-item-free {
  background: #3fa5d8;
  background: -moz-linear-gradient(left, #3fa5d8 0%, #41c2c2 100%);
  background: -webkit-linear-gradient(left, #3fa5d8 0%, #41c2c2 100%);
  background: linear-gradient(to right, #3fa5d8 0%, #41c2c2 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$freeColor', endColorstr='$regularColor',GradientType=1 );
  color: #fff; }

.th-item-regular {
  background: #41c2c2;
  background: -moz-linear-gradient(left, #41c2c2 0%, #3fc96e 99%);
  background: -webkit-linear-gradient(left, #41c2c2 0%, #3fc96e 99%);
  background: linear-gradient(to right, #41c2c2 0%, #3fc96e 99%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$regularColor', endColorstr='$proColor',GradientType=1 );
  color: #fff; }

.th-item-pro {
  background: #3fc96e;
  color: #fff; }

table td:last-child {
  border-right: none; }

/* ここから作業 */
.accordion {
  margin: 0 auto;
  width: 100%; }
  .accordion ul {
    list-style: none; }

.accordion label {
  cursor: pointer;
  background: #eee;
  display: block;
  padding: 10px 5%; }
  .accordion label:before {
    font-family: "Times New Roman";
    font-weight: bold;
    font-size: 20px;
    content: 'Q';
    margin-right: 5px;
    color: #3fa5d8; }

.accordion .toggle {
  display: none; }

.accordion .toggle + div {
  max-height: 0;
  overflow: hidden;
  transition: all .5s ease-out;
  padding: 0 5%;
  margin: 10px 0; }
  .accordion .toggle + div:before {
    font-family: "Times New Roman";
    font-weight: bold;
    font-size: 20px;
    content: 'A';
    color: #ff9000; }

.accordion .toggle:checked + div {
  max-height: 999px;
  transition: all 2s ease-in; }

.service-area {
  width: 100%;
  margin: 0;
  padding: 0; }

.img-shadow {
  box-shadow: 2px 2px 5px #ccc; }

input, textarea, select {
  width: 92%;
  border-radius: 5px;
  padding: 5px 10px;
  border-style: none; }

select {
  font-size: 16px;
  padding-bottom: 10px; }

input[type='submit'] {
  width: 200px;
  background: #ff9000;
  color: #fff;
  padding: 10px 20px;
  margin: 0 auto 10px; }

input[type='email'],
input[type='text'],
textarea,
select {
  background: #fff;
  border: 1px solid #777; }

input[type='file'] {
  width: auto;
  font-size: 14px; }

.copyrights {
  padding: 10px 0 20px;
  margin: 0;
  text-align: center; }

.login-regular {
  box-shadow: 0 0 10px #41c2c2; }
  .login-regular h2 {
    color: #41c2c2; }

.login-pro {
  box-shadow: 0 0 10px #3fc96e; }
  .login-pro h2 {
    color: #3fc96e; }

.login-gold {
  box-shadow: 0 0 10px #ff9000; }
  .login-gold h2 {
    color: #ff9000; }

/*===============
sp
===============*/
@media screen and (min-width: 320px) and (max-width: 640px) {
  main, header, footer, section {
    max-width: 100%; }

  .top header {
    margin: 0 auto;
    padding: 0; }
    .top header h1 {
      z-index: 6666;
      position: relative;
      text-align: left; }
      .top header h1 img {
        margin-top: 20px;
        width: 60%; }

  .top header > div > div:nth-child(1) {
    width: 95%;
    margin: 0 0 0 10px;
    padding-top: 60px; }

  .top header > div > div:nth-child(2) {
    width: 95%;
    margin: 0 auto;
    padding-bottom: 20px;
    position: relative; }
    .top header > div > div:nth-child(2) ul {
      margin: 0;
      padding: 0; }
    .top header > div > div:nth-child(2) ul li {
      font-size: 12px;
      text-shadow: 0 0 5px #fff;
      background: url("../img/ico_check.png") center left no-repeat;
      padding-left: 18px; }

  .top header .img {
    position: absolute;
    bottom: 0;
    right: -20px;
    width: 62%;
    z-index: 1; }

  nav {
    z-index: 10000;
    width: 100%;
    padding: 10px 0;
    position: fixed;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: #8ee6f0;
    background: -moz-linear-gradient(left, #8ee6f0 0%, #90f4d9 50%, #82f09c 100%);
    background: -webkit-linear-gradient(left, #8ee6f0 0%, #90f4d9 50%, #82f09c 100%);
    background: linear-gradient(to right, #8ee6f0 0%, #90f4d9 50%, #82f09c 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$freeBg', endColorstr='$freeBg',GradientType=1 ); }

  nav li a {
    padding: 10px;
    border-radius: 5px;
    display: block; }

  .btn-member {
    display: block;
    text-align: center; }

  .accbox ul li {
    line-height: 2; }
    .accbox ul li::before {
      position: relative;
      top: -2px;
      left: -18px;
      margin-left: 10px;
      display: inline-block;
      width: 6px;
      height: 6px;
      content: '';
      border-radius: 100%;
      background: #41c2c2; }

  .accbox {
    margin: 0;
    padding: 0;
    max-width: 400px;
    border-bottom: 1px solid #41c2c2; }

  .accbox label {
    display: block;
    cursor: pointer;
    background: #f2f9f9;
    padding: 20px 0 1px;
    position: relative; }

  .accbox input {
    display: none; }

  .accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s; }

  .cssacc:checked + .accshow {
    height: auto;
    padding: 5px 20px;
    background: #f2f9f9;
    opacity: 1; }

  .accbox label:before {
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    color: #41c2c2;
    font-weight: bold;
    position: absolute;
    top: 25px;
    right: 10px; }

  .cssacc:checked + label:before {
    content: '\f078'; }

  .table-box {
    width: 100%;
    margin: 0 auto 40px;
    overflow-x: auto;
    white-space: nowrap;
    border-top: 1px solid #12776f;
    border-right: 1px solid #12776f;
    border-left: 1px solid #12776f; }

  .table-sticky {
    position: -webkit-sticky;
    /* Safari */
    position: sticky;
    left: 0;
    z-index: 80; }

  .th-item, th-item-none {
    height: 50px; }

  .table-outer {
    width: 100%; }

  table td {
    border-right: 1px solid #12776f; }

  footer div > ul {
    display: flex;
    justify-content: center; }
    footer div > ul li {
      width: 100%;
      text-align: center;
      font-size: 12px;
      padding: 10px 0; }

  footer ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0; }
    footer ul li a {
      display: block;
      padding: 5px 0; }

  footer a {
    display: block; }

  .sp-br {
    display: block;
    margin-bottom: 20px; }

  .btn-member {
    display: inline-block; }

  /* index service-area */
  .service-area section {
    padding: 20px;
    display: flex; }

  .service-area p,
  .service-area h2 {
    margin: 0 10px 0 0; }

  .service-1 {
    background: rgba(27, 150, 194, 0.1);
    background: -moz-linear-gradient(top, #fff 0%, #d9f7ff 100%);
    background: -webkit-linear-gradient(top, #fff 0%, #d9f7ff 100%);
    background: linear-gradient(to bottom, #fff 0%, #d9f7ff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$colorF', endColorstr='#d9f7ff',GradientType=0 );
    border-top: 1px solid #3fa5d8;
    border-bottom: 1px solid #fff; }

  .service-1 h2 {
    display: block;
    color: #3fa5d8; }
    .service-1 h2 span {
      font-size: 12px;
      display: block; }

  .service-2 {
    background: rgba(42, 177, 177, 0.1);
    background: -moz-linear-gradient(top, #fff 0%, #dcfdfd 100%);
    background: -webkit-linear-gradient(top, #fff 0%, #dcfdfd 100%);
    background: linear-gradient(to bottom, #fff 0%, #dcfdfd 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$colorF', endColorstr='#dcfdfd',GradientType=0 );
    border-top: 1px solid #41c2c2;
    border-bottom: 1px solid #fff; }

  .service-2 h2 {
    color: #41c2c2; }
    .service-2 h2 span {
      font-size: 12px;
      display: block; }

  .service-3 {
    background: rgba(9, 183, 100, 0.1);
    background: -moz-linear-gradient(top, #fff 0%, #d3ffeb 100%);
    background: -webkit-linear-gradient(top, #fff 0%, #d3ffeb 100%);
    background: linear-gradient(to bottom, #fff 0%, #d3ffeb 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$colorF', endColorstr='#d3ffeb',GradientType=0 );
    border-top: 1px solid #3fc96e;
    border-bottom: 1px solid #3fc96e; }

  .service-3 h2 {
    color: #3fc96e; }
    .service-3 h2 span {
      font-size: 12px;
      display: block; }

  .service-area section h2 {
    text-shadow: 0 0 5px #fff; }

  .service-area .btn-free,
  .service-area .btn-regular,
  .service-area .btn-pro {
    display: block;
    min-width: 100px;
    height: 40px;
    border-radius: 5px;
    text-align: center;
    color: #fff;
    margin: 15px auto 0;
    padding-top: 20px;
    box-shadow: 0 0 5px #fff; }

  .service-area .btn-free {
    background: #3fa5d8; }

  .service-area .btn-regular {
    background: #41c2c2; }

  .service-area .btn-pro {
    background: #3fc96e; }

  /* index service-compare-area */
  .service-compare-area {
    padding: 40px 10px;
    margin: 0 auto; }

  .service-compare-area h2 span {
    font-size: 12px;
    display: block;
    color: #555; }

  /* index service-contents-area */
  .service-contents-area section h2 {
    font-size: 18px; }

  .arrow_sp {
    background: url(../img/arrow_sp.png) center bottom no-repeat;
    padding-bottom: 40px;
    margin-bottom: 20px; }

  .free h1, .service h1 {
    font-size: 32px;
    padding: 80px 0 20px; }
    .free h1 span, .service h1 span {
      font-size: 12px; }

  .free h2 {
    font-size: 18px;
    color: #3fa5d8; }
  .free section {
    padding: 40px 10px; }
    .free section textarea {
      height: 200px; }
  .free .box {
    border: 1px solid #3fa5d8;
    padding: 10px 10px 0;
    margin-bottom: 20px; }
    .free .box p {
      margin-bottom: 10px; }

  .table-box2 {
    width: 100%; }

  .about-box {
    width: 100%; }
    .about-box h2:nth-child(2) {
      margin-top: 30px; }
    .about-box li {
      line-height: 2;
      margin-bottom: 10px; }

  .service h2 {
    font-size: 18px;
    color: #41c2c2; }
  .service h3 {
    font-size: 16px;
    color: #3fa5d8 !important; }
  .service section {
    padding: 40px 10px; }
    .service section input[type='email'] {
      width: 80%; }
    .service section table {
      margin-bottom: 30px; }
    .service section th {
      display: block;
      background: #f2f9f9;
      border-bottom: 1px solid #41c2c2; }
    .service section td {
      display: block;
      border-bottom: 1px solid #41c2c2; }

  /* ログイン */
  .login h1 {
    font-size: 32px;
    padding: 80px 0 20px; }
    .login h1 span {
      font-size: 12px; }

  .login main {
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center; }
    .login main section {
      margin: 20px 10px 40px;
      padding: 20px; }
      .login main section h2 {
        font-size: 18px; }
      .login main section input {
        margin-bottom: 20px; }

  /* ゴールド会員 */
  .member h1 {
    font-size: 24px;
    color: #ff9000; }
  .member h2 {
    font-size: 18px;
    color: #ff9000; }
  .member section {
    padding: 40px 10px; }
  .member .box {
    border: 1px solid #ff9000;
    padding: 10px 10px 0;
    margin-bottom: 20px; }
    .member .box p {
      margin-bottom: 10px; }

  .lan-step-list {
    width: 80%;
    margin: 10px auto 0; }
    .lan-step-list li {
      font-size: 13px;
      color: #fff; }
      .lan-step-list li br {
        display: none; }
      .lan-step-list li i {
        display: none; }

  .landing header {
    width: 100%;
    background: url("../img/img-lan-top_sp.jpg") top center no-repeat;
    background-size: 100% auto;
    padding-bottom: 10px; }
    .landing header .contbox {
      margin: 0;
      padding: 0; }

  .landing img {
    max-width: 100%; }

  .landing header h1 {
    line-height: 0;
    margin-bottom: 10px; }

  .landing header h1 img:nth-child(1) {
    margin: 70px 0 0;
    padding: 0; }

  .landing header p {
    margin: 0;
    padding: 0;
    line-height: 0; }

  .landing-q {
    background: #f2f9f9;
    padding: 10px; }
    .landing-q ul {
      margin: 0 auto;
      width: 750px; }
      .landing-q ul li {
        font-size: 13px;
        padding-left: 20px;
        vertical-align: top;
        height: 16px;
        margin-bottom: 5px; }
        .landing-q ul li:nth-child(1) {
          background: url("../img/q-no-lan_sp.png") top left no-repeat; }
        .landing-q ul li:nth-child(2) {
          background: url("../img/q-no-lan_sp.png") top -16px left no-repeat; }
        .landing-q ul li:nth-child(3) {
          background: url("../img/q-no-lan_sp.png") top -32px left no-repeat; }
        .landing-q ul li:nth-child(4) {
          background: url("../img/q-no-lan_sp.png") top -48px left no-repeat; }

  .landing-handbook {
    padding: 40px 20px 10px; }

  .landing-better {
    background: url("../img/img-better-lan_sp.jpg") 0 0 no-repeat;
    background-size: cover; }
    .landing-better ul {
      width: 80%;
      margin-left: 20%; }
      .landing-better ul li {
        height: 40px;
        font-size: 20px;
        background: url("../img/img-better-list-lan_sp.png") center left no-repeat;
        padding-left: 40px;
        text-shadow: 0 0 5px #fff;
        font-weight: bold; }
    .landing-better h2 {
      background: #3fc96e;
      color: #fff;
      font-size: 30px;
      line-height: 1;
      padding: 10px; }
      .landing-better h2 span {
        display: block;
        font-size: 30px; }

  .landing-function {
    background: url("../img/bg-function.gif") 0 0 repeat;
    padding: 20px 0; }
    .landing-function ol {
      width: 90%;
      margin: 0 auto;
      list-style: none;
      padding-left: 0; }
      .landing-function ol li {
        font-size: 16px;
        border: 1px solid #41c2c2;
        background: #fff url("../img/number-function.png") top left no-repeat;
        margin-bottom: 20px;
        padding-top: 10px;
        padding-left: 10px; }
        .landing-function ol li span {
          color: #fff;
          float: left;
          font-size: 24px; }
      .landing-function ol p {
        width: 90%;
        margin: 0 auto 20px; }
      .landing-function ol h3 {
        text-align: left;
        padding: 0 10px 0 50px;
        color: #41c2c2;
        font-weight: bold;
        display: block;
        height: 45px; }

  .landing-price {
    padding: 0; }
    .landing-price h2 {
      background: #ff9000;
      color: #fff;
      font-size: 24px;
      line-height: 1;
      padding: 10px; }
      .landing-price h2 span {
        display: inline;
        font-size: 24px;
        padding-left: 10px; }
    .landing-price .img {
      width: 70%;
      text-align: center; }
      .landing-price .img:nth-child(2) {
        width: 70%;
        margin: 0 15%; }
    .landing-price .form {
      background: rgba(255, 144, 0, 0.2);
      padding: 10px 10px 40px; }
      .landing-price .form p input {
        margin-top: 20px; }

  .necessary {
    color: #ff9000;
    font-size: 12px; }

  a .bnr-gold-member {
    display: none; } }
/*===============
pc
===============*/
@media screen and (min-width: 641px) {
  body, .wrap {
    display: flex;
    flex-direction: column;
    min-height: 100vh; }

  .contbox {
    width: 960px;
    margin: 0 auto; }
    .contbox section {
      min-height: 50vh; }

  header {
    position: relative; }

  .top header > div,
  .service header > div,
  .free header > div {
    display: flex; }

  header > div > div:nth-child(1) {
    width: 100%;
    margin: 50px 0 0 0; }

  header > div > div:nth-child(2) {
    width: 100%;
    height: 280px;
    margin: 50px auto 0;
    position: relative; }
    header > div > div:nth-child(2) ul {
      margin: 120px 0 0 0;
      padding: 0; }
    header > div > div:nth-child(2) ul li {
      font-size: 16px;
      text-shadow: 0 0 5px #fff;
      background: url("../img/ico_check.png") center left no-repeat;
      padding-left: 18px; }

  header .img {
    position: absolute;
    top: 20px;
    right: 0; }

  header h1 {
    width: 100%;
    padding: 50px 20px 0;
    z-index: 777;
    text-shadow: 0 0 30px #41c2c2; }

  .top h1 {
    font-size: 30px;
    font-weight: bold;
    color: #fff;
    line-height: 1.2; }
    .top h1 span {
      font-size: 50px; }

  nav {
    position: fixed;
    width: 100%;
    padding: 20px 0;
    z-index: 999;
    background: #8ee6f0;
    background: -moz-linear-gradient(left, #8ee6f0 0%, #90f4d9 50%, #82f09c 100%);
    background: -webkit-linear-gradient(left, #8ee6f0 0%, #90f4d9 50%, #82f09c 100%);
    background: linear-gradient(to right, #8ee6f0 0%, #90f4d9 50%, #82f09c 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$freeBg', endColorstr='$freeBg',GradientType=1 ); }
    nav ul {
      justify-content: space-around; }
      nav ul a {
        padding: 10px; }

  .accbox input {
    display: none; }

  /* index service-area */
  .service-area {
    width: 960px;
    margin: 0 auto;
    padding: 60px 0 0; }
    .service-area div {
      display: flex;
      padding: 40px 0; }
      .service-area div section div {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        margin: 0 40px; }
        .service-area div section div p:nth-child(2) {
          width: 70%;
          text-align: center;
          margin: 0 auto; }
      .service-area div h2 {
        font-size: 36px !important;
        display: block; }
        .service-area div h2 span {
          font-size: 12px;
          display: block; }

  .service-1 h2 {
    color: #3fa5d8; }

  .service-2 h2 {
    color: #41c2c2; }

  .service-3 h2 {
    color: #3fc96e; }

  .service-area > div section {
    padding-bottom: 40px; }

  .service-area > div a:hover section {
    box-shadow: 0 0 10px #42d4b6; }

  .service-area .btn-free {
    background: #3fa5d8; }

  .service-area .btn-regular {
    background: #41c2c2; }

  .service-area .btn-pro {
    background: #3fc96e; }

  .service-area .btn-free,
  .service-area .btn-regular,
  .service-area .btn-pro {
    display: block;
    max-width: 100px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    margin: 0 auto;
    padding-top: 40px;
    box-shadow: 0 0 5px #fff; }

  /* index service-compare-area */
  .service-compare-area {
    width: 960px;
    padding: 40px 0;
    margin: 0 auto; }

  .service-compare-area h2 span {
    color: #555; }

  .service-compare-area table {
    width: 100%;
    border-top: 1px solid #12776f;
    border-right: 1px solid #12776f;
    border-left: 1px solid #12776f; }

  .service-compare-area table td {
    border-left: 1px solid #12776f; }

  .table-box {
    margin-bottom: 40px; }

  .img-left {
    width: 150px;
    float: left;
    margin: 0 20px 20px 0; }

  ul.list-style {
    list-style: disc; }

  /* index service-contents-area */
  .service-contents-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 960px;
    margin: 0 auto; }
    .service-contents-area section {
      width: 440px;
      padding: 20px; }

  footer {
    margin-top: auto; }

  footer div > ul {
    width: 50%;
    margin: 0 auto;
    display: flex;
    justify-content: center; }
    footer div > ul li {
      width: 50%;
      text-align: center;
      font-size: 12px;
      padding: 10px 0; }

  h1 {
    color: #fff;
    font-weight: bold;
    line-hight: 0;
    margin: 20px 0; }
    h1 span {
      font-size: 18px; }

  .free section {
    width: 960px;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    padding: 40px 0 !important; }
    .free section div {
      width: 46%; }
      .free section div:nth-child(2) {
        margin-left: 4%; }

  .arrow_pc {
    background: url(../img/arrow_pc.png) center center no-repeat; }

  .service main {
    width: 960px;
    padding: 40px 5% !important;
    display: flex; }
    .service main section:nth-child(1) {
      width: 60%; }
      .service main section:nth-child(1) table {
        margin-bottom: 30px;
        width: auto; }
      .service main section:nth-child(1) th {
        background: #f2f9f9;
        border-bottom: 1px solid #41c2c2;
        width: 180px; }
      .service main section:nth-child(1) td {
        border-bottom: 1px solid #41c2c2;
        min-width: 320px; }
        .service main section:nth-child(1) td textarea {
          max-width: 320px; }
    .service main section:nth-child(2) {
      width: 30%; }
    .service main div.content {
      width: 90%; }

  .about-box {
    width: 30%;
    box-shadow: 0 0 1px #41c2c2;
    padding: 20px;
    font-size: 14px; }
    .about-box h2:nth-child(2) {
      margin-top: 30px; }
    .about-box li {
      margin-bottom: 10px; }
      .about-box li a {
        color: #ff9000; }

  .landing header {
    width: 100%;
    height: 855px;
    background: url("../img/img-lan-top_pc.jpg") top center no-repeat;
    padding-bottom: 0; }
    .landing header .contbox {
      width: 960px;
      margin: 0 auto; }

  .lan-box {
    display: flex;
    flex-direction: column; }

  .landing header h1,
  .landing header p {
    width: 100%;
    line-height: 0;
    margin: 0;
    padding: 0; }

  .landing header img:nth-child(1) {
    margin: 70px 0 0; }

  .lan-step-list {
    width: 100%;
    margin: 70px auto 0;
    display: flex; }
    .lan-step-list li {
      font-size: 16px;
      color: #555;
      width: 324px;
      height: 88px;
      padding: 100px 20px 0 80px; }
      .lan-step-list li i {
        display: inline-block;
        font-size: 40px;
        float: left;
        padding-right: 10px; }
      .lan-step-list li br {
        display: block; }
      .lan-step-list li span {
        display: none; }
      .lan-step-list li:nth-child(1) {
        background: url("../img/img-lan-step1.png") top left no-repeat; }
        .lan-step-list li:nth-child(1) i {
          color: #3fa5d8; }
      .lan-step-list li:nth-child(2) {
        background: url("../img/img-lan-step2.png") top left no-repeat; }
        .lan-step-list li:nth-child(2) i {
          color: #41c2c2; }
      .lan-step-list li:nth-child(3) {
        background: url("../img/img-lan-step3.png") top left no-repeat; }
        .lan-step-list li:nth-child(3) i {
          color: #3fc96e; }

  .landing-q {
    background: #f2f9f9;
    padding: 40px 0 60px; }
    .landing-q ul li {
      list-style-type: none;
      font-size: 30px;
      padding-left: 50px;
      vertical-align: top;
      height: 38px;
      margin-bottom: 10px; }
      .landing-q ul li:nth-child(1) {
        background: url("../img/q-no-lan_pc.png") top left no-repeat; }
      .landing-q ul li:nth-child(2) {
        background: url("../img/q-no-lan_pc.png") top -38px left no-repeat; }
      .landing-q ul li:nth-child(3) {
        background: url("../img/q-no-lan_pc.png") top -76px left no-repeat; }
      .landing-q ul li:nth-child(4) {
        background: url("../img/q-no-lan_pc.png") bottom left no-repeat; }

  .landing-handbook {
    width: 780px;
    padding: 40px 0;
    margin: 0 auto; }
    .landing-handbook p {
      font-size: 23px; }

  .landing-better {
    background: url("../img/img-better-lan_pc.jpg") 0 0 no-repeat;
    height: 540px; }
    .landing-better ul {
      width: 50%;
      margin: 80px 0 20px 60%; }
      .landing-better ul li {
        height: 40px;
        font-size: 33px;
        background: url("../img/img-better-list-lan_pc.png") top left no-repeat;
        padding: 0 0 40px 50px;
        text-shadow: 1px 1px 10px #fff,-1px 1px 10px #fff,1px -1px 10px #fff,-1px -1px 10px #fff;
        font-weight: normal; }
    .landing-better h2 {
      background: #3fc96e;
      color: #fff;
      font-size: 30px;
      line-height: 1;
      padding: 20px 0; }
      .landing-better h2 span {
        display: inline;
        font-size: 30px; }

  .landing-function {
    background: url("../img/bg-function.gif") 0 0 repeat; }
    .landing-function h2 {
      padding-top: 40px; }
    .landing-function ol {
      width: 100%;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      list-style: none; }
      .landing-function ol li {
        width: 290px !important;
        border: 1px solid #41c2c2;
        background: #fff url("../img/number-function.png") top left no-repeat;
        margin-bottom: 20px;
        padding-top: 10px;
        padding-left: 10px; }
        .landing-function ol li h3 {
          text-align: left;
          padding: 0 10px 0 50px;
          color: #41c2c2;
          font-weight: bold;
          display: block;
          height: 45px; }
        .landing-function ol li p {
          width: 90%;
          margin: 0 auto 20px; }
        .landing-function ol li span {
          color: #fff;
          float: left;
          font-size: 24px; }

  .landing-price {
    padding: 0; }
    .landing-price .form {
      background: rgba(255, 144, 0, 0.2);
      padding: 40px 0 20px;
      margin-top: 30px;
      clear: both; }
    .landing-price dl {
      width: 75%;
      margin: 0 auto; }
    .landing-price dt {
      float: left;
      clear: left;
      width: 20%;
      text-align: right;
      margin-bottom: 20px;
      padding-bottom: 5px; }
    .landing-price dd {
      float: right;
      clear: right;
      width: 80%;
      margin-bottom: 20px; }
    .landing-price h2 {
      background: #ff9000;
      color: #fff;
      font-size: 24px;
      line-height: 1;
      padding: 20px 10px;
      margin-bottom: 60px;
      display: block; }
      .landing-price h2 span {
        display: inline;
        font-size: 24px;
        padding-left: 10px; }
    .landing-price img:nth-child(1) {
      float: right;
      margin-top: -20px; }
    .landing-price img:nth-child(2) {
      width: 394px !important;
      float: left;
      margin-right: 0 !important;
      margin-left: 0 !important; }
    .landing-price img:nth-child(3) {
      float: right;
      margin-bottom: 40px; }
    .landing-price input[type='image'] {
      width: 440px;
      clear: both;
      display: block;
      margin: 0 auto; }

  .accordion {
    margin: 0 auto;
    width: 90%; }
    .accordion ul {
      list-style: none; }

  .login main {
    display: flex;
    justify-content: center;
    align-items: center; }
    .login main section {
      width: 33.33333%;
      width: -webkit-calc(100% / 3);
      width: calc(100% / 3);
      margin: 40px 10px 0;
      padding: 20px;
      min-height: auto; }
      .login main section h2 {
        font-size: 18px; }
      .login main section input {
        margin-bottom: 20px; }

  a .bnr-gold-member {
    position: fixed;
    right: 10px;
    bottom: 10px; }

  a:hover .bnr-gold-member {
    filter: contrast(130%); }

  .necessary {
    color: #ff9000;
    font-size: 12px; } }

/*# sourceMappingURL=style.css.map */