@charset "UTF-8";

/*****STANDART CSS******/
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
}

abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var,
video {
  margin: 0;
}

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /******SMOOTH SCROLL ANCHOR******/
}

.noto300 {font-family: 'Noto Sans JP', sans-serif; font-weight: 300;}
.noto500 {font-family: 'Noto Sans JP', sans-serif; font-weight: 500;}
.noto700 {font-family: 'Noto Sans JP', sans-serif; font-weight: 700;}
.noto800 {font-family: 'Noto Sans JP', sans-serif; font-weight: 800;}
.noto900 {font-family: 'Noto Sans JP', sans-serif; font-weight: 900;}

/*****STANDART CSS******/
/* ---------common--------- */
body { margin: 0; color: #333; font-feature-settings: "palt"; font-size: 16px; line-height: 28px;}

ul { list-style: none; margin: 0; padding: 0;}
a { -webkit-transition: .3s; transition: .3s; text-decoration: none; color: #000;}
img { width: 100%; vertical-align: bottom;}

/* パンくずリスト */
.bread { width: 100%; margin-top: 15px;}
.bread .inner { margin-bottom: 0 !important; padding-top: 0 !important;}
.bread ul { display: -webkit-box; display: -ms-flexbox; display: flex;}
.bread ul li {padding: 5px;}
.bread ul li a { -webkit-transition: .15s; transition: .15s;}
.bread ul li a:hover { opacity: 0.7;}
.bread ul li:after { content: '\003e'; margin-left: 10px; margin-right: 10px; color: #000;}
.bread ul li:last-child:after { content: "";}

/* flex */
.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}
.between {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.center {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: center;
}

/* header */
header {position: fixed;top: 0;z-index: 1001;width: 100%;background-color: #fff;padding: 10px 0;vertical-align: middle;height: 70px;}
header .inner {width: 100%;}
.header_row {align-items: center;}
header .header_left {display: flex; align-items: center;}
header .header_left p{font-size: 16px; margin-right: 4px;}
.logo {max-width: 200px;width: 100%;}
.logo h1 {display: contents;max-width: 260px;width: 100%;}
.logo h1 img {display: block;}
header .header_right {width: 108px; height: 50px; display: flex; align-items: center; justify-content: space-between;}
header .header_right .icon_mail {width: 50px; height: 50px;}
header .header_right .icon_mail a:hover {opacity: 0.7;}
header .header_right .icon_line {width: 50px; height: 50px;}
header .header_right .icon_line a:hover {opacity: 0.7;}

nav a { color: #333;}

.wrapper0 {overflow:hidden;}
.wrapper {width: 100%; background: #fff;}
.wrapper2 {width: 100%; background: linear-gradient(90deg, rgba(102, 204, 204, 1), rgba(0, 153, 204, 1));}
.wrapper3 {width: 100%; background: #fff;}
.wrapper4 {width: 100%; background: url("../images/bg_obliqueline2.png");}
.mv_pc {width: 100%; display: block; margin-top: 70px; background:linear-gradient(to right, #16b550, #8dcf50); background:-webkit-linear-gradient(left, #16b550, #8dcf50); background: -moz-linear-gradient(left, #16b550, #8dcf50);}
.mv_pc p {max-width: 626px; width: 100%; padding: 0; margin: 0 auto;}
.mv_sp {display: none;}

/* inner */
.inner { max-width: 624px; width: 100%; padding: 0 10px 0 10px; margin: 0 auto;}
h2.section1 { font-size: 40px; color: #fe9202; text-align: center; line-height: 50px; margin: 50px 0;}
h2.about {max-width: 420px; width: 100%; margin: 0 auto 50px;}
h2 span {}
.container { width: 100%;}
p.three_check {width: 100%;margin-bottom: 50px;}
h3.about {font-size: 28px; text-align: center; margin-bottom: 30px; color: #000;}
h3.about span {color: #ff2400;}

.base1{ padding: 70px 0 30px 0;}
.about1 { max-width: 456px; width: 100%; margin: 0 auto 20px; display: flex; align-items: center; justify-content: space-between;}
.about1 .about1_1 { max-width: 270px; width: 100%; margin-left: 16px;}
.about1 .about1_2 { max-width: 152px; width: 100%;}
.about1 .about1_2 img { width: 100%;}
.about2 {max-width: 456px; width: 100%; margin: 0 auto 20px; text-align: center;}
.about2 h4 {max-width: 456px; width: 100%; margin: 0 auto 20px; text-align: center; padding: 5px 0; background: #28a745;
font-size: 18px; color: #fff; line-height: 26px;}
.about2 ul {width: 100%; display: flex; justify-content: space-between;}
.about2 ul li {max-width: 74px; width: 100%;}
.about2 ul li img {width: 100%;}
.about3 {max-width: 456px; width: 100%; margin: 0 auto 50px; text-align: center;}
.about4 {max-width: 456px; width: 100%; margin: 0 auto 30px; text-align: center;}
.base2{padding: 50px 0 50px 0;}
.base3{padding: 50px 0 10px 0;}
.base4{margin-bottom: 45px;}
.base5{margin-bottom: 45px;}

.annotation {
	max-width: 456px; width: 100%; padding: 30px; margin: 0 auto 20px; border-radius: 10px; border: 1px solid #777;
}
.annotation p {font-size: 17px; line-height: 24px; }
.annotation p.annotation_read1 {font-size: 17px; line-height: 24px; margin-bottom: 18px;}
.annotation span.green{ color: #28a745;}
.annotation span.red{ color: #ff2400;}
p.sample {font-size: 18px;  text-align: center;}
p.sample_qr {width: 90px; margin: 0 auto;}
p.flow {max-width: 596px; width: 100%; margin: 0 auto;}
p.space {max-width: 596px; width: 100%; margin: 0 auto 20px;}
h3.difference {font-size: 28px; text-align: center; margin-bottom: 35px; color: #46b86e;}
p.difference {max-width: 596px; width: 100%; margin: 0 auto;}
p.difference img {width: 100%;}
p.difference_table {max-width: 596px; width: 100%; margin: 0 auto;}
p.difference_table img {width: 100%;}
p.difference_read {font-size: 28px; color: #000; text-align: center; line-height: 32px; margin-bottom: 70px;}
p.difference_read span {color: #46b86e; background: url("../images/difference_read_bg.png") repeat-x bottom;}
h3.special_features {max-width: 498px; width: 100%;margin: 0 auto 25px; /*text-align: center; font-size: 34px; line-height: 32px; color: #46b86e;*/}
.special_features_base {max-width: 565px; width: 100%; margin: 0 auto 80px;}
p.special_features {font-size: 20px; color: #000; text-align: center; line-height: 26px; margin-bottom: 30px;}
p.item {font-size: 20px;}
p.item_read {font-size: 18px; line-height: 24px; text-align: left; margin-bottom: 25px;}
h2.system {font-size: 50px; color: #28a745; text-align: center; margin: 40px 0;}
p.system {font-size: 20px; color: #000; text-align: center; margin-bottom: 30px;}
p.system_two_month {max-width: 596px; width: 100%; margin: 0 auto;}
p.system_plan_table {max-width: 596px; width: 100%; margin: 0 auto;}
p.annotation2 { font-size: 17px; line-height: 24px; margin: 10px 0 80px; text-align: center;}
.cant_this { max-width: 554px; width: 100%; padding: 20px; margin: 0 auto 20px; border: 2px solid #000; box-sizing: border-box;}
.cant_this h3 { width: 100%; padding: 2px ; margin: 0 auto 20px; text-align: center; background: #46b86e; color: #fff; font-size: 24px;}
.cant_this ul { list-style-position: inside; margin-left: 10px;}
.cant_this li{
    position: relative;
    list-style: none;
    line-height: 1.5;
	margin-bottom: 15px;
}
.cant_this li.red{
	color: #ff2400;
}
.cant_this li.red2{
	color: #ff2400;
	margin-bottom: 0!important;
}
.cant_this li::before{
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #000;
    position: absolute;
    left: -10px;
    top: calc(0.75em - 3px);
}
.cant_this li.red::before{
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff2400;
    position: absolute;
    left: -10px;
    top: calc(0.75em - 3px);
}
.cant_this li.red2::before{
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff2400;
    position: absolute;
    left: -10px;
    top: calc(0.75em - 3px);
}
p.bow {max-width: 596px; width: 100%; margin: 0 auto 80px;}
h2.contact {font-size: 50px; color: #28a745; text-align: center; margin: 40px 0; padding: 0;}

/* display */
.pc {display: block;}
.sp {display: none;}

@media (max-width: 768px) {
.pc {display: block;}
.sp {display: none;}
.inner { width: 95%;}
}

@media (max-width: 599px) {
.pc {display: none;}
.sp {display: block;}
}
@media (max-width: 1080px) {
}
@media (max-width: 880px) {
}
@media (max-width: 768px) {
}
@media (max-width: 599px) {

/* header */
header {
  position: fixed;
  top: 0;
  z-index: 1001;
  width: 100%;
  background-color: #fff;
  vertical-align: middle;
  height: 60px;
}
.header_row {align-items: center;}
header .header_left {display: flex; align-items: center;}
header .header_left p{font-size: 10px; margin-right: 4px;}
.logo {max-width: 120px;width: 100%;}
.logo h1 {display: contents;}
.logo h1 img {display: block;}
header .header_right {width: 90px; height: 40px; display: flex; align-items: center; justify-content: space-between;}
header .header_right .icon_mail {width: 40px; height: 40px;}
header .header_right .icon_line {width: 40px; height: 40px;}

.mv_pc {display: none;}
.mv_sp {
    width: 100%;
    display: block;
    margin-top: 60px; /*padding-bottom: 30px;*/
    background: linear-gradient(to right, #16b550, #8dcf50);
    background: -webkit-linear-gradient(left, #16b550, #8dcf50);
    background: -moz-linear-gradient(left, #16b550, #8dcf50);
}
/*.mv_sp {width: 100%; background: #fff; display: block;margin-top: 60px; padding-bottom: 30px;}*/
h2{ font-size: 24px; color: #0066cc; text-align: center;}
h2.section1{ font-size: 30px; color: #fe9202; text-align: center; line-height: 40px;}
h2 span { font-size: 19px; color: #fe9202; text-align: center;}
h2.about {
max-width: 95%; width: 100%; margin: 0 auto 30px;
    /*font-size: 36px;
    color: #28a745;
    text-align: center;
*/
}
h3.about {
    font-size: 24px;
    text-align: center;
    margin-bottom: 30px;
    color: #000;
}
.base1{padding: 30px 0 30px 0;}
.base2{padding: 20px 0 10px 0;}

.about1 {
    max-width: 95%;
    width: 100%;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.about1 .about1_1 {
    max-width: 61%;
    width: 100%;
    margin-left: 0;
}
.about1 .about1_2 {
    max-width: 38%;
    width: 100%;
}
.about2 h4 {
    max-width: 95%;
    width: 100%;
    margin: 0 auto 20px;
    text-align: center;
    padding: 5px 0;
    background: #28a745;
    font-size: 18px;
    color: #fff;
    line-height: 26px;
}
.about3 {
    max-width: 95%;
    width: 100%;
    margin: 0 auto 30px;
    text-align: center;
}
p.sample a {font-size: 18px;  text-align: center; color: #28a745; text-decoration: underline;}

.annotation {
    max-width: 95%;
    width: 100%;
    padding: 20px;
    margin: 0 auto 20px;
    border-radius: 10px;
    border: 1px solid #777;
}
p.space {
    max-width: 95%;
    width: 100%;
    margin: 0 auto 20px;
}
h3.difference {
    font-size: 24px;
    text-align: center;
    margin-bottom: 35px;
    color: #46b86e;
}
p.difference_read {
    font-size: 22px;
    color: #000;
    text-align: center;
    line-height: 32px;
    margin-bottom: 50px;
}
h3.special_features {
	max-width: 95%;
	width: 100%;
    margin-bottom: 0 auto 25px;
/*
    font-size: 24px;
    text-align: center;
    line-height: 32px;
    color: #46b86e;
*/
}
.special_features_base {
    max-width: 95%;
    width: 100%;
    margin: 0 auto 50px;
}
p.annotation2 {
    font-size: 16px;
    line-height: 24px;
    margin: 10px 0 40px;
    text-align: center;
}
.cant_this {
    max-width: 95%;
    width: 100%;
    padding: 20px;
    margin: 0 auto 20px;
    border: 2px solid #000;
    box-sizing: border-box;
}
.cant_this h3 {
    font-size: 18px;
	padding: 0;
}
h2.system {
    font-size: 36px;
    margin: 30px 0;
}
p.bow {
    max-width: 95%;
    width: 100%;
    margin: 0 auto 50px;
}
h2.contact {
    font-size: 36px;
    margin: 30px 0;
}
.contact_mail span {display: none!important;}
.contact_line span {display: none!important;}
}


.footer_nav {width: 720px; margin: 0 auto; padding: 40px 0 40px 0;}

.contact_mail span {display: inline-block;}
.contact_mail a {width: 320px; height: 100px; margin: 0 20px 0 20px; border-radius: 50px; border: 4px solid #0066cc; box-sizing: border-box; font-size: 24px; color: #0066cc; text-align: center; line-height: 94px; box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.5); display: block;}
/*.footer_nav .contat_mail a {width: 320px; height: 100px; color: #0066cc; box-sizing: border-box; display: block;}*/
.contact_mail a:hover {width: 320px; height: 100px;background: #0066cc; color: #fff; box-sizing: border-box; display: block; border-radius: 50px;}

.contact_line span {display: inline-block;}
.contact_line a {width: 320px; height: 100px; margin: 0 20px 0 20px; border-radius: 50px; border: 4px solid #00b900; box-sizing: border-box; font-size: 24px; color: #00b900; text-align: center; line-height: 92px; box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.5); display: block;}
/*.footer_nav .contat_line a {width: 320px; height: 100px; color: #00b900; box-sizing: border-box; display: block;}*/
.contact_line a:hover {width: 320px; height: 100px; background: #00b900; color: #fff; box-sizing: border-box; display: block;}

/* footer */
footer { width: 100%; padding: 10px 0 10px 0;background:linear-gradient(to right, #16b550, #8dcf50); background:-webkit-linear-gradient(left, #16b550, #8dcf50); background: -moz-linear-gradient(left, #16b550, #8dcf50);}
footer .copy { font-size: 14px; text-align: center; color:#fff;}
footer .copy a { font-size: 14px; text-align: center; color:#fff;}

#contact {padding-top: 80px;margin-top: -80px;}
.contact {padding: 0 0 20px 0;}
.contact .inner { max-width: 624px; width: 100%; padding: 0 15px 0 15px; margin: 0 auto;}

.contact span.optional,
.contact span.required {display: none !important;}

.contact form#mail_form {
  width: 100%;
  padding: 20px 0 20px 0;
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  margin-bottom: 0;
  margin-top: 0;
}

@media (max-width: 768px) {
.contact form#mail_form {width: 100%;}
}

.contact form#mail_form dl {
  margin-bottom: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media (max-width: 768px) {
  .contact form#mail_form dl {
    display: block;
    text-align: center;
    width: 100%;
  }
}

.contact form#mail_form dl dt {
  text-align: left;
  color: #28a745;
  font-weight: bold;
  line-height: 1.6;
/*  width: 25%;*/
  font-weight: bold;
}
.contact form#mail_form dl dt span{
  color: #000;display: inline-block;
}
/*
@media (max-width: 768px) {
.contact form#mail_form dl dt { text-align: center;width: 100%;}
}
*/

.contact form#mail_form dl dd {padding: 0;width: 70%;}

/*
@media (max-width: 768px) {
.contact form#mail_form dl dd {width: 100%;}
}
*/

.contact form#mail_form dl dd input {
  width: 100%;
  max-width: 100%;
  background-color: #fff;
  border-radius: 0;
  border: 1px solid #CDD6DD;
}

.contact form#mail_form dl dd input::-webkit-input-placeholder {color: #CDD6DD;}
.contact form#mail_form dl dd input:-ms-input-placeholder {color: #CDD6DD;}
.contact form#mail_form dl dd input::-ms-input-placeholder {color: #CDD6DD;}
.contact form#mail_form dl dd input::placeholder {color: #CDD6DD;}

@media (max-width: 768px) {
.contact form#mail_form dl dd input {width: 95%;}
}

.contact form#mail_form dl dd textarea {background-color: #fff;border-radius: 0;border: 1px solid #CDD6DD;}
.contact form#mail_form dl dd textarea::-webkit-input-placeholder {color: #CDD6DD;}
.contact form#mail_form dl dd textarea:-ms-input-placeholder {color: #CDD6DD;}
.contact form#mail_form dl dd textarea::-ms-input-placeholder {color: #CDD6DD;}
.contact form#mail_form dl dd textarea::placeholder {color: #CDD6DD;}

@media (max-width: 768px) {
.contact form#mail_form dl dd textarea {width: 95%;margin: 0 auto;}
}

.contact form#mail_form p#form_submit {border: none;}
.contact form#mail_form p#form_submit #form_submit_button {
  background-color: #28a745;
  border-radius: 40px;
  border: 1px solid #28a745;
  padding: 10px 100px;
  cursor: pointer;
  -webkit-transition: .3s;
  transition: .3s;
  font-weight: bold;
}
.contact form#mail_form p#form_submit #form_submit_button:hover {background-color: #fff;color: #28a745;}
.thanks {padding: 200px 0;text-align: center;background:linear-gradient(to right, #16b550, #8dcf50); background:-webkit-linear-gradient(left, #16b550, #8dcf50); background: -moz-linear-gradient(left, #16b550, #8dcf50);color: #fff;margin-bottom: 30px;}
.thanks h2 {font-size: 36px;color: #fff;margin-bottom: 10px;}

@media (max-width: 599px) {
 
#contact {padding-top: 60px; margin-top: -60px;}

.contact form#mail_form dl dd {padding: 0;width: 100%;}
.contact form#mail_form dl dd input { width: 100%;}
.contact form#mail_form dl dd textarea {width: 100%;margin: 0 auto;}


.thanks h2 {font-size: 24px;}
}

.thanks p {margin-bottom: 20px;}

.thanks a {
  background-color: #fff;
  color: #0099FF;
  padding: 5px 0;
  width: 200px;
  border-radius: 40px;
  display: block;
  margin: 0 auto;
  -webkit-transition: .3s;
  transition: .3s;
  border: 1px solid #0099FF;
}
.thanks a:hover {
  background-color: #0066cc;
  color: #fff;
  padding: 5px 0;
  width: 200px;
  border-radius: 40px;
  display: block;
  margin: 0 auto;
  -webkit-transition: .3s;
  transition: .3s;
  border: 1px solid #0099FF;
}

@media (max-width: 720px) {

.footer_nav {width: 100%; margin: 0 auto; padding: 40px 0 40px 0;}

.contact_mail {width: 48%; height: 100px; margin: 0 1% 0 1%;}
.contact_mail span {display: inline-block;}
.contact_mail a {width: 100%; height: 100px; margin: 0; border-radius: 50px; border: 4px solid #0066cc; box-sizing: border-box; font-size: 24px; color: #0066cc; text-align: center; line-height: 96px; box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.5); display: block;}
/*.footer_nav .contat_mail a {width: 320px; height: 100px; color: #0066cc; box-sizing: border-box; display: block;}*/
.contact_mail a:hover {width: 100%!important; height: 100px;background: #0066cc; color: #fff; box-sizing: border-box; display: block; border-radius: 50px;}

.contact_line {width: 48%; height: 100px; margin: 0 1% 0 1%;}
.contact_line span {display: inline-block;}
.contact_line a {width: 100%; height: 100px; margin: 0; border-radius: 50px; border: 4px solid #00b900; box-sizing: border-box; font-size: 24px; color: #00b900; text-align: center; line-height: 96px; box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.5); display: block;}
/*.footer_nav .contat_line a {width: 320px; height: 100px; color: #00b900; box-sizing: border-box; display: block;}*/
.contact_line a:hover {width: 100%!important; height: 100px; background: #00b900; color: #fff; box-sizing: border-box; display: block;}

}
@media (max-width: 599px) {
.wrapper4 .inner {max-width: 100%; width:100%; padding: 30px 0 30px 0;}

p.price {max-width: 100%;width: 100%;margin: 0 auto 20px auto;}
.base3{padding: 20px 0 20px 0;}


/*footer { width: 100%; background: #0066cc; padding: 10px 0 80px 0;}*/
footer  {width: 100%; padding: 10px 0 80px 0; text-align: center;background:linear-gradient(to right, #16b550, #8dcf50); background:-webkit-linear-gradient(left, #16b550, #8dcf50); background: -moz-linear-gradient(left, #16b550, #8dcf50);color: #fff;}

.footer_nav {width: 100%; margin: 0 auto; padding: 10px 0 10px 0; position: fixed; bottom:0;background: #fff;}

.contact_mail {width: 48%; height: 50px; margin: 0 1% 0 1%;}
.contact_mail span {display: inline-block;}
.contact_mail a {width: 100%; height: 50px; margin: 0; border-radius: 50px; border: 4px solid #0066cc; box-sizing: border-box; font-size: 13px; color: #0066cc; text-align: center; line-height: 42px; box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.5); display: block;}
/*.footer_nav .contat_mail a {width: 320px; height: 100px; color: #0066cc; box-sizing: border-box; display: block;}*/
.contact_mail a:hover {width: 100%!important; height: 50px;background: #0066cc; color: #fff; box-sizing: border-box; display: block; border-radius: 50px;}

.contact_line {width: 48%; height: 50px; margin: 0 1% 0 1%;}
.contact_line span {display: inline-block;}
.contact_line a {width: 100%; height: 50px; margin: 0; border-radius: 50px; border: 4px solid #00b900; box-sizing: border-box; font-size: 13px; color: #00b900; text-align: center; line-height: 42px; box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.5); display: block;}
/*.footer_nav .contat_line a {width: 320px; height: 100px; color: #00b900; box-sizing: border-box; display: block;}*/
.contact_line a:hover {width: 100%!important; height: 50px; background: #00b900; color: #fff; box-sizing: border-box; display: block;}

}
@media (max-width: 320px) {
header .header_left p{display: none;font-size: 7px; margin-right: 4px;}
}