@charset "UTF-8";
/* リセット
------------------------------------------*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

.hero-images {
  position: relative; }

.main-msg {
  position: absolute;
  top: 25px;
  text-align: center;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; }
  .main-msg p {
    text-align: center;
    font-weight: bold;
    font-size: 1.5em;
    line-height: 1;
    padding-bottom: 1.5em;
    color: #227FDD;
    text-shadow: 2px  2px 1px #fff, -2px  2px 1px #fff, 2px -2px 1px #fff, -2px -2px 1px #fff, 2px  0px 1px #fff, 0px  2px 1px #fff, -2px  0px 1px #fff, 0px -2px 1px #fff; }
  .main-msg .caution1 {
    color: #DF0909; }
  .main-msg .caution2 {
    color: #000; }

/*　共通
------------------------------------------*/
.text-center {
  text-align: center; }

.responsiveimg {
  width: 100%;
  height: auto; }

/*　スマートフォン
------------------------------------------*/
section {
  width: 100%;
  margin: 0;
  padding: 0; }

.row {
  width: 100%;
  margin: 0 auto;
  padding: 0; }

h1 {
  font-size: 28px;
  color: #227AEF;
  font-weight: 700; }

h2 {
  font-size: 28px;
  color: #227AEF;
  font-weight: 700; }

.header {
  padding: 36px 0;
  margin: 0; }

.sp-top-image {
  display: block; }
  .sp-top-image img {
    text-align: center;
    width: 100%;
    height: auto; }

.top-image {
  display: none; }

.cont1 {
  padding: 60px 0;
  margin: 0; }

.cont2 {
  background-color: #D9F5FF;
  padding: 60px 0;
  margin: 0; }

.rows {
  width: 100%;
  margin: 3rem auto 0;
  padding: 0;
  display: block; }

.rows550 {
  width: 100%;
  margin: 3rem auto 0;
  padding: 0;
  display: flex; }

.col3 {
  width: 90%;
  height: auto;
  margin: 0 auto 2rem; }

.col4 {
  width: 90%;
  height: auto;
  margin: 0 auto 2rem; }

.col-12 {
  width: 100%;
  height: auto;
  display: block;
  line-height: 1.5; }

.point3 h3 {
  text-align: center;
  font-size: 21px;
  font-weight: 700;
  padding-top: 1rem;
  padding-bottom: 2rem; }
.point3 p {
  line-height: 1.5; }

.point-img {
  padding-bottom: 0.4rem; }
  .point-img img {
    width: 100%;
    height: auto; }

.point-box {
  width: 90%;
  border: 3px solid #227AEF;
  border-radius: 3px;
  background-color: #fff;
  padding: 1rem;
  margin: 1rem auto;
  color: #227AEF;
  box-sizing: border-box; }
  .point-box .pickup1 {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.5; }
  .point-box .caution {
    padding-top: 0.5rem;
    font-size: 12px;
    line-height: 1.5; }

.step-img {
  padding-bottom: 0.4rem; }
  .step-img img {
    width: 100%;
    height: auto; }

.pocketimg {
  width: 90%;
  margin: 1rem auto; }

.box3-1 {
  padding-top: 2rem; }
  .box3-1 p {
    line-height: 1.6; }
  .box3-1 .docomo {
    color: #D62E31; }

.box4-1 {
  padding-top: 2rem; }
  .box4-1 h3 {
    font-size: 21px;
    font-weight: 700;
    margin-bottom: 1rem; }

.box5-1 {
  padding-top: 2rem; }
  .box5-1 h3 {
    font-size: 21px;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.5; }
  .box5-1 p {
    margin-bottom: 1rem;
    line-height: 1.5; }

.btn {
  display: block;
  width: 80%;
  background-color: #aaa;
  border: 0;
  border-radius: 6px;
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 2rem;
  margin-left: auto;
  margin-right: auto;
  padding: 1.2rem;
  box-sizing: border-box;
  font-size: 1.2rem;
  text-decoration: none;
  color: #000; }
  .btn.contact {
    background-color: #78DEED; }
  .btn.line {
    background-color: #5CCA38; }
  .btn.phone {
    background-color: #FB9A00; }
  .btn:hover {
    opacity: 0.8; }

.btn-default {
  background-color: #78deed; }

.plan-box {
  padding: 3em 1em 0; }

.plan1, .plan2 {
  background-color: #fff;
  padding: 2em;
  margin-bottom: 2em; }
  .plan1 h3, .plan2 h3 {
    color: #227aef;
    font-weight: bold;
    padding-bottom: 2em; }
    .plan1 h3 .total, .plan2 h3 .total {
      background-color: #227aef;
      color: #fff;
      font-size: 14px;
      padding: 0.8em;
      font-weight: normal;
      vertical-align: middle;
      margin-right: 1em; }
    .plan1 h3 .maxgb, .plan2 h3 .maxgb {
      font-size: 36px;
      line-height: 36px;
      margin-top: 1em;
      vertical-align: middle; }

.kakaku {
  position: relative; }
  .kakaku .plice1 {
    font-size: 70px;
    font-weight: bold; }
  .kakaku .plice2 {
    font-size: 36px;
    font-weight: 500; }
  .kakaku .plice3 {
    font-size: 20px;
    font-weight: 500; }

/*　 フォーム
------------------------------------------*/
#mailform {
  padding: 3em 1em;
  box-sizing: border-box; }

.mailform {
  padding: 3em 0 0;
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 3em; }
  .mailform th, .mailform td {
    font-size: 1.2em;
    padding: 0.4em;
    line-height: 1;
    text-align: left;
    display: block; }
  .mailform th {
    font-weight: bold;
    padding-top: 3em; }
  .mailform span {
    line-height: 1.5;
    display: block;
    padding-bottom: 0.5em; }

.ico_require {
  display: inline-block !important;
  background-color: #e4002b;
  color: #fff;
  text-align: right;
  vertical-align: middle;
  font-weight: normal;
  width: max-content;
  padding: 0.4em  0.5em;
  line-height: 1 !important;
  font-size: 0.75em;
  margin-top: 0.3em; }

.ferror {
  font-size: 0.8em;
  border: 3px solid #f00;
  padding: 0.2em;
  color: #f00;
  display: inline-block;
  margin-bottom: 0.5em; }

.noinput {
  background-color: #fff4f4;
  border: 1px solid #ccc; }

input[type=text],
input[type=email],
input[type=tel] {
  font-size: 1em;
  padding: 0.3em;
  box-sizing: border-box;
  margin-bottom: 0.3em; }

textarea {
  font-size: 1em;
  padding: 0.3em;
  box-sizing: border-box;
  margin-bottom: 0.3em; }

.mfp1 {
  width: 100%; }

.mfp2 {
  width: 100%;
  height: 3em; }

.mfp3 {
  width: 100%;
  height: 6em; }

label {
  display: block; }

.progressbar {
  margin: 2em auto 3em; }

.progressbar {
  position: relative;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }

.progressbar li {
  position: relative;
  list-style-type: none;
  text-align: center;
  text-transform: uppercase;
  width: 33.333%;
  color: #999999;
  font-weight: bold;
  counter-increment: steps; }

.progressbar li:before {
  display: block;
  width: 26px;
  height: 26px;
  margin: 7px auto 20px auto;
  content: '';
  line-height: 26px;
  font-size: 12px;
  text-align: center;
  border-radius: 50%;
  background-color: #F5F5F5;
  content: counter(steps); }

.progressbar li:after {
  position: absolute;
  z-index: -1;
  top: 15px;
  left: -50%;
  width: 100%;
  height: 2px;
  content: '';
  background-color: #F5F5F5; }

.progressbar li:first-child:after {
  content: none; }

.progressbar li.active,
.progressbar li.complete {
  color: #0070BD; }

.progressbar li.active:before,
.progressbar li.complete:before {
  background-color: #0070BD;
  color: #FFF; }

.progressbar li.active:after,
.progressbar li.complete:after {
  background-color: #0070BD; }

/*　PC
------------------------------------------*/
@media (min-width: 640px) {
  .top-image {
    display: block; }
    .top-image img {
      text-align: center;
      max-width: 1200px;
      width: 100%;
      height: auto; }

  .sp-top-image {
    display: none; }

  .row {
    max-width: 1000px; }

  .rows {
    max-width: 1000px; }

  .rows550 {
    max-width: 550px; }

  .point-box {
    width: 35%;
    margin: 2rem auto 4rem; }

  .pocketimg {
    max-width: 500px;
    margin: 0 auto; }

  .rows {
    width: 100%;
    margin: 3rem auto 0;
    padding: 0;
    display: flex;
    justify-content: space-around;
    align-items: flex-start; }

  .col3 {
    width: 30%;
    height: auto; }

  .col4 {
    width: 22%;
    height: auto; }
    .col4 p {
      line-height: 1.5; }

  .plan-box {
    padding: 3em 0 3em;
    display: flex;
    justify-content: space-between; }
    .plan-box .plan1, .plan-box .plan2 {
      width: 45%;
      box-sizing: border-box; }
    .plan-box .point-box {
      width: 90%; }

  .btn {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto; }

  .main-msg {
    position: absolute;
    top: 90px;
    text-align: center;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; }
    .main-msg p {
      text-align: center;
      font-weight: bold;
      font-size: 36px;
      line-height: 1;
      padding-bottom: 36px;
      color: #227FDD;
      text-shadow: 2px  2px 1px #fff, -2px  2px 1px #fff, 2px -2px 1px #fff, -2px -2px 1px #fff, 2px  0px 1px #fff, 0px  2px 1px #fff, -2px  0px 1px #fff, 0px -2px 1px #fff; }

  /*　 フォーム
  ------------------------------------------*/
  .mailform {
    width: 100%;
    border-collapse: collapse; }
    .mailform th, .mailform td {
      display: table-cell;
      border: 1px solid #ccc; }
    .mailform th {
      width: 10em;
      text-align: right !important;
      padding-top: 0.5em;
      vertical-align: top; }
    .mailform .mfptr {
      border: 0px; }
    .mailform span {
      display: block; } }