@charset "UTF-8";
html {
  scroll-behavior: smooth; }

hr.bar {
  border-top: 6px dotted #003366;
  width: 24px;
  margin-top: 6rem;
  margin-bottom: 6rem;
  margin-left: auto;
  margin-right: auto; }

/*----------------------------
チェックリスト
----------------------------*/
ul.checklist {
  background: #FAFAFA;
  padding: 0;
  position: relative;
  font-size: 1.6rem;
  margin-top: 2rem;
  margin-bottom: 2rem; }
  ul.checklist li {
    line-height: 1.6;
    padding: 1rem 2rem 1rem 4rem;
    border-bottom: 6px solid white;
    position: relative; }
    ul.checklist li:before {
      font-family: "Font Awesome 5 Free";
      content: "\f058";
      position: absolute;
      left: 0.5em;
      top: 50%;
      margin-top: -1.1rem;
      color: #003366;
      font-size: 2.2rem;
      line-height: 1; }

/*----------------------------
テーブル
----------------------------*/
table.tablebasic {
  width: 100%;
  font-size: 1.4rem;
  margin-top: 2rem;
  margin-bottom: 2rem; }
  table.tablebasic th, table.tablebasic td {
    border: 1px solid #B8B8B8;
    padding: 0.4rem 0.8rem; }
    table.tablebasic th .small, table.tablebasic td .small {
      font-size: 0.8em; }
    table.tablebasic th a, table.tablebasic td a {
      color: inherit;
      font-weight: bold; }
  table.tablebasic th {
    background-color: #d2eaff;
    text-align: center;
    font-size: 1.6rem; }
  table.tablebasic td.gray {
    background: #FAFAFA; }
  table.tablebasic td.st {
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    font-size: 1.4rem; }
  table.tablebasic td.vam {
    vertical-align: middle; }

/*----------------------------
機能紹介
----------------------------*/
.funcbox {
  background: #FAFAFA;
  padding: 2rem 2rem 1rem 2rem; }
  .funcbox .ttl {
    color: #003366;
    text-align: center;
    font-size: 2.2rem;
    font-weight: bold;
    padding-top: 0.5rem;
    margin-bottom: 2rem; }
  .funcbox .img {
    margin-bottom: 1.5rem;
    text-align: center; }
  .funcbox .txt {
    font-size: 1.6rem;
    line-height: 1.6;
    margin-bottom: 2rem; }
  .funcbox .price {
    color: #003366;
    font-weight: bold;
    text-align: center;
    margin-top: -1.2rem;
    margin-bottom: 2rem; }
  .funcbox .btn {
    margin-bottom: 2rem;
    font-size: 1.6rem; }
  .funcbox + .funcbox {
    margin-top: 2rem; }
  .funcbox ul.list {
    color: #003366;
    margin-top: 0.6rem;
    margin-bottom: 0.6rem; }
    .funcbox ul.list li {
      line-height: 1.6;
      padding: 0.2rem 1rem 0.2rem 3rem;
      position: relative;
      font-weight: bold; }
      .funcbox ul.list li:before {
        font-family: "Font Awesome 5 Free";
        content: "\f058";
        position: absolute;
        left: 0.5em;
        top: 50%;
        margin-top: -0.4rem;
        color: #003366;
        font-size: 1.4rem;
        line-height: 1; }

.star {
  font-size: 1.4em;
  background:#001C4E;
  color:#fff;
  padding: 2rem;
  position: relative;
  padding-left: 1.9em;
  margin-top: 1em;
  line-height: 1em;
}

.star:first-child {
  margin-top: 0;
}

.star:before {
  content: "★";
  position: absolute;
  font-size: 1.2em;
  padding-left:0.4em;
  left: 0;
}
.star > span {
    margin-left:1em;
    font-size:1.4rem;
    font-weight:100;}
    
.flexbox{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center; }
.flexbox >img.wd {
   max-width:480px;
   height:auto;}
.flexbox >img.ht {
   max-width:300px;
   height:auto;}

    
.payttl {
        font-size: 1.6rem;
        font-weight: bold;
        padding-top: 2em;
        text-align:left;
        color: #001C4E; }
picture { margin:0 auto;text-align:center;}
.w50{width:50%; margin-right:2em;text-align:left;}
.marlt{margin-left:.5em;}
        
@media screen and (max-width: 768px) {
    .marlt{margin:0 auto;}
    .star {line-height:120%;}
    .flexbox{
        width:100%;
        display:block;
        align-items:center; }
    .flexbox >img.wd {
        width:90%;
        height:auto;}
     .flexbox >img.ht {
        margin-top:1em;
        max-width:90%;
        height:auto;}
        
    .w50{width:100%;}
}
.premiaflex{
    display:flex;
    justify-content:space-around;
    align-items:center;}
.premiaimg{
     width:45%;
     position: relative;}
.premiacoment{
    position: absolute;
    text-align:right;
    font-size:18px;
    color: #EC4E20;
    background:#fff;
    opacity:0.7;
    top:0.3em;
    right: 0.3em;
    font-weight: bold; }
.premiaarrow {
    display: inline-block;
    width: 80px;
    height: 130px;
    background: #EC4E20;
    clip-path: polygon(0 22.4%, 55.8% 22.4%, 55.8% 0, 100% 50%, 55.8% 100%, 55.8% 77.6%, 0 77.6%);}
    
@media screen and (max-width: 768px) {
    .premiaflex{
        width:100%;
        display:block;
        align-items:center;
        text-align:center;}
    .premiaimg{
         width:100%;
         position: relative;}
    .premiaarrow {
        display: inline-block;
        width: 130px;
        height: 80px;
        background: #EC4E20;/*
        background: #038bcb;*/
        clip-path: polygon(0 42.6%, 28.6% 42.6%, 28.6% 0, 71.4% 0, 71.4% 42.6%, 100% 42.6%, 50% 100%);
        margin:0.3em;}
}
@import url("optiontable.css");