@charset "UTF-8";
/*--Layout--*/
body {
  position: relative;
  background: url("img/check.png");
  font-family: sans-serif;
}

body * {
  box-sizing: border-box;
}

body img {
  max-width: 100%;
}

body p + p {
  margin-top: 1em;
}

header {
  background: url("img/bg.jpg") center top no-repeat;
}

header .catch {
  text-align: center;
}

header .catch img {
  vertical-align: middle;
}

header .catch-scene {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

header .catch-scene li {
  margin: 3px;
}

header .catch-scene li img {
  display: block;
  margin: auto;
  border: solid 3px #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

@media (max-width: 1200px) {
  header {
    background: none;
  }
  header .catch-scene {
    background: #cce1ff;
    background: linear-gradient(180deg, #cce1ff, #f2f8ff);
    padding: 10px;
  }
}

@media (max-width: 768px) {
  header .catch-scene {
    flex-wrap: wrap;
  }
  header .catch-scene li {
    width: calc( 50% - 12px);
    margin: 3px 6px;
  }
}

main h2 {
  background: #cce1ff;
  color: #006bff;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 20px;
}

.section1 {
  width: 1200px;
  margin: auto;
  background: url("img/pr.png") left top no-repeat;
  padding-left: 280px;
}

@media (max-width: 1200px) {
  .section1 {
    width: auto;
    margin-right: 10px;
    margin-left: 10px;
  }
}

.section1 .main-PR {
  background: rgba(255, 255, 255, 0.8);
  padding: 10px 20px;
}

.section1 .main-PR li {
  margin-bottom: 1em;
}

.section1 .main-PR h3 {
  font-size: 1.25rem;
  font-weight: bold;
  background: url("img/ck.png") left center no-repeat;
  padding: 5px 0 5px 50px;
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .section1 {
    background-position: -60px 60px;
    padding: 0;
  }
  .section1 .main-PR {
    margin-left: 150px;
  }
}

@media (max-width: 480px) {
  .section1 {
    background: none;
  }
  .section1 .main-PR {
    margin: 0;
    padding: 0;
  }
}

.section2 {
  background: #fff;
  padding: 20px 0;
}

.section2 h2 {
  width: 1200px;
  margin: auto;
  text-align: center;
}

@media (max-width: 1200px) {
  .section2 h2 {
    width: auto;
    margin-right: 0;
    margin-left: 0;
  }
}

@media (max-width: 1200px) {
  .section2 h2 {
    margin-left: 10px;
    margin-right: 10px;
  }
}

.section2 .section2-body {
  width: 1200px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
}

@media (max-width: 1200px) {
  .section2 .section2-body {
    width: auto;
    margin-right: 10px;
    margin-left: 10px;
  }
}

.section2 .section2-body li {
  margin: 10px 10px 20px;
  width: calc( 50% - 30px);
}

.section2 .section2-body h3 {
  margin: 10px 0 20px;
}

.section2 .section2-body h3 * {
  vertical-align: middle;
  font-weight: bold;
  font-size: 1.25rem;
}

.section2 .section2-body h3 img {
  width: 120px;
  margin-right: 20px;
}

.section2 .section2-body table {
  width: 100%;
  border: solid 1px #ccc;
}

.section2 .section2-body table th, .section2 .section2-body table td {
  color: #555;
  padding: 2px 5px;
}

.section2 .section2-body table th {
  font-weight: bold;
}

.section2 .section2-body table tr {
  border-bottom: solid 1px #ccc;
}

.section2 .section2-body table tr:nth-child(1) th, .section2 .section2-body table tr:nth-child(1) td {
  color: #009324;
  background: #e6f4e9;
}

@media (max-width: 768px) {
  .section2 .section2-body {
    flex-direction: column;
  }
  .section2 .section2-body li {
    width: auto;
  }
  .section2 .section2-body table tbody, .section2 .section2-body table tr, .section2 .section2-body table td, .section2 .section2-body table th {
    display: block;
  }
}

.section2 .section2-img {
  width: 1200px;
  margin: auto;
  text-align: center;
  margin-top: 30px;
}

@media (max-width: 1200px) {
  .section2 .section2-img {
    width: auto;
    margin-right: 10px;
    margin-left: 10px;
  }
}

.section2 .section2-img h4 {
  font-size: 1.125rem;
  font-weight: bold;
  margin-bottom: 10px;
  color: #666;
}

.section2 .section2-img p {
  margin: 0 auto 30px;
  max-width: 700px;
}

.section3 {
  background: url("img/bg.jpg") center no-repeat;
  padding: 20px 0;
}

.section3 h2 {
  width: 1200px;
  margin: auto;
  text-align: center;
}

@media (max-width: 1200px) {
  .section3 h2 {
    width: auto;
    margin-right: 0;
    margin-left: 0;
  }
}

@media (max-width: 1200px) {
  .section3 h2 {
    margin-left: 10px;
    margin-right: 10px;
  }
}

.section3 iframe {
  width: 640px;
  height: 360px;
  margin: 40px auto;
  display: block;
  border: solid 1px #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
  .section3 iframe {
    width: calc( 100% - 10px);
    height: calc( 100vw * 0.55 );
  }
}

.section4 {
  background: #fff;
  padding: 40px 0;
}

.section4 .section4-body {
  width: 1200px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
}

@media (max-width: 1200px) {
  .section4 .section4-body {
    width: auto;
    margin-right: 10px;
    margin-left: 10px;
  }
}

.section4 .section4-body > p {
  margin: 0 30px;
}

.section4 .section4-body > p:nth-child(1) img {
  width: 300px;
}

@media (max-width: 768px) {
  .section4 .section4-body {
    flex-direction: column;
  }
}

.section4 h3 {
  width: 1200px;
  margin: auto;
  font-size: 1.25rem;
  font-weight: bold;
  color: #006bff;
  margin-bottom: 10px;
  text-align: center;
  border-bottom: solid 3px #006bff;
}

@media (max-width: 1200px) {
  .section4 h3 {
    width: auto;
    margin-right: 10px;
    margin-left: 10px;
  }
}

.section4 .section4-flow {
  width: 1200px;
  margin: auto;
  counter-reset: step;
}

@media (max-width: 1200px) {
  .section4 .section4-flow {
    width: auto;
    margin-right: 10px;
    margin-left: 10px;
  }
}

.section4 .section4-flow li {
  background: #f2f8ff;
  padding: 10px 10px 10px 60px;
  margin-bottom: 10px;
  position: relative;
}

.section4 .section4-flow li:before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 50px;
  text-align: center;
  color: #80b5ff;
  font-size: 2.4rem;
  font-weight: 900;
}

.section4 .section4-flow h4 {
  font-size: 1.125rem;
  font-weight: bold;
}

.section4 .section4-flow strong {
  font-weight: bold;
  color: #009324;
}

#mailformpro {
  background: #fff;
}

#mailformpro h2 {
  width: 1200px;
  margin: auto;
  font-size: 1.25rem;
  font-weight: bold;
  color: #006bff;
  margin-bottom: 10px;
  text-align: center;
  border-bottom: solid 3px #006bff;
}

@media (max-width: 1200px) {
  #mailformpro h2 {
    width: auto;
    margin-right: 10px;
    margin-left: 10px;
  }
}

#mailformpro .mfp_buttons {
  margin-bottom: 40px;
}

.p-form {
  width: 1200px;
  margin: auto;
  border-top: solid 1px #ccc;
}

.p-form tr {
  border-bottom: solid 1px #ccc;
}

.p-form th {
  width: 12em;
}

.p-form th, .p-form td {
  text-align: left;
  vertical-align: top;
  padding: 10px 0;
}

.p-form input[type="text"],
.p-form input[type="mail"],
.p-form textarea {
  width: 100% !important;
  padding: 10px;
}

.p-form input[name="送付先郵便番号"] {
  width: 7em !important;
  padding: 5px;
}

.p-form input, .p-form textarea, .p-form select {
  box-shadow: none;
}

.p-form #order {
  opacity: 0.2;
}

.p-form input:checked ~ #order {
  opacity: 1;
}

@media (max-width: 1200px) {
  .p-form {
    width: calc(100% - 20px);
    margin: auto 10px;
  }
}

@media (max-width: 568px) {
  .p-form tr, .p-form th, .p-form td {
    display: block;
    width: 100%;
  }
  .p-form th {
    padding-bottom: 0;
  }
  .p-form td {
    padding-top: 0;
  }
}

.buynow {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

.buynow a {
  padding: 20px;
  background: #009324;
  border-radius: 100px;
  display: block;
  color: #fff;
  text-decoration: none;
  font-size: 1.25rem;
  text-align: center;
  line-height: 1.2;
  border: solid 2px #fff;
}

.buynow a:hover {
  color: #ff0;
}

.company {
  background: #fff;
  padding-bottom: 30px;
}

.company .company-body {
  width: 1200px;
  margin: auto;
  border: dotted 1px #888;
  padding: 1em;
}

@media (max-width: 1200px) {
  .company .company-body {
    width: auto;
    margin-right: 10px;
    margin-left: 10px;
  }
}

.company h2, .company h3 {
  font-size: 1.125rem;
  font-weight: bold;
}

.company .p-company {
  margin: 10px 0 40px;
}

.company .p-company th, .company .p-company td {
  text-align: left;
}

@media (max-width: 568px) {
  .company .p-company tr, .company .p-company th, .company .p-company td {
    display: block;
    width: 100%;
  }
  .company .p-company th {
    padding-bottom: 0;
    font-weight: bold;
  }
  .company .p-company td {
    padding-top: 0;
    padding-bottom: 10px;
  }
}

.company .privacypolicy {
  font-size: 0.875rem;
}

.company .privacypolicy ol {
  list-style: decimal;
  padding-left: 2em;
}

.company .privacypolicy p + p, .company .privacypolicy ol + p {
  margin-top: 1em;
}

.thanks {
  width: 1200px;
  margin: auto;
  background: #fff;
  min-height: 97vh;
  padding: 40px 0;
  text-align: center;
}

@media (max-width: 1200px) {
  .thanks {
    width: auto;
    margin-right: 10px;
    margin-left: 10px;
  }
}

.thanks h1 {
  background: #cce1ff;
  color: #006bff;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 20px;
}

.thanks .btn {
  text-align: center;
  margin-top: 40px;
}

.thanks .btn a {
  display: inline-block;
  padding: 5px 20px;
  color: #fff;
  text-decoration: none;
  background: #006bff;
}

.thanks .btn a:hover {
  opacity: 0.8;
}

.thanks ul {
  margin: 1em 0;
}

footer {
  background: #cce1ff;
}

footer .copyright {
  font-size: 0.9375rem;
  color: #006bff;
  text-align: center;
}

/*--CPU--*/
.u-mg0 {
  margin: 0px !important;
}

.u-mt0 {
  margin-top: 0px !important;
}

.u-mr0 {
  margin-right: 0px !important;
}

.u-mb0 {
  margin-bottom: 0px !important;
}

.u-ml0 {
  margin-left: 0px !important;
}

.u-pd0 {
  padding: 0px !important;
}

.u-pt0 {
  padding-top: 0px !important;
}

.u-pr0 {
  padding-right: 0px !important;
}

.u-pb0 {
  padding-bottom: 0px !important;
}

.u-pl0 {
  padding-left: 0px !important;
}

.u-mg10 {
  margin: 10px !important;
}

.u-mt10 {
  margin-top: 10px !important;
}

.u-mr10 {
  margin-right: 10px !important;
}

.u-mb10 {
  margin-bottom: 10px !important;
}

.u-ml10 {
  margin-left: 10px !important;
}

.u-pd10 {
  padding: 10px !important;
}

.u-pt10 {
  padding-top: 10px !important;
}

.u-pr10 {
  padding-right: 10px !important;
}

.u-pb10 {
  padding-bottom: 10px !important;
}

.u-pl10 {
  padding-left: 10px !important;
}

.u-mg20 {
  margin: 20px !important;
}

.u-mt20 {
  margin-top: 20px !important;
}

.u-mr20 {
  margin-right: 20px !important;
}

.u-mb20 {
  margin-bottom: 20px !important;
}

.u-ml20 {
  margin-left: 20px !important;
}

.u-pd20 {
  padding: 20px !important;
}

.u-pt20 {
  padding-top: 20px !important;
}

.u-pr20 {
  padding-right: 20px !important;
}

.u-pb20 {
  padding-bottom: 20px !important;
}

.u-pl20 {
  padding-left: 20px !important;
}

.u-mg30 {
  margin: 30px !important;
}

.u-mt30 {
  margin-top: 30px !important;
}

.u-mr30 {
  margin-right: 30px !important;
}

.u-mb30 {
  margin-bottom: 30px !important;
}

.u-ml30 {
  margin-left: 30px !important;
}

.u-pd30 {
  padding: 30px !important;
}

.u-pt30 {
  padding-top: 30px !important;
}

.u-pr30 {
  padding-right: 30px !important;
}

.u-pb30 {
  padding-bottom: 30px !important;
}

.u-pl30 {
  padding-left: 30px !important;
}

.u-mg40 {
  margin: 40px !important;
}

.u-mt40 {
  margin-top: 40px !important;
}

.u-mr40 {
  margin-right: 40px !important;
}

.u-mb40 {
  margin-bottom: 40px !important;
}

.u-ml40 {
  margin-left: 40px !important;
}

.u-pd40 {
  padding: 40px !important;
}

.u-pt40 {
  padding-top: 40px !important;
}

.u-pr40 {
  padding-right: 40px !important;
}

.u-pb40 {
  padding-bottom: 40px !important;
}

.u-pl40 {
  padding-left: 40px !important;
}

.u-mg50 {
  margin: 50px !important;
}

.u-mt50 {
  margin-top: 50px !important;
}

.u-mr50 {
  margin-right: 50px !important;
}

.u-mb50 {
  margin-bottom: 50px !important;
}

.u-ml50 {
  margin-left: 50px !important;
}

.u-pd50 {
  padding: 50px !important;
}

.u-pt50 {
  padding-top: 50px !important;
}

.u-pr50 {
  padding-right: 50px !important;
}

.u-pb50 {
  padding-bottom: 50px !important;
}

.u-pl50 {
  padding-left: 50px !important;
}

.u-fs-xxsmall {
  font-size: 0.75rem;
}

.u-fs-xsmall {
  font-size: 0.875rem;
}

.u-fs-small {
  font-size: 0.9375rem;
}

.u-fs-normal {
  font-size: 1rem;
}

.u-fs-large {
  font-size: 1.125rem;
}

.u-fs-xlarge {
  font-size: 1.25rem;
}

.u-fs-xxlarge {
  font-size: 1.5rem;
}

.u-fs-xxxlarge {
  font-size: 1.75rem;
}

.u-fc-background {
  color: #fff;
}

.u-fc-text {
  color: #444;
}

.u-fc-primary {
  color: #006bff;
}

.u-fc-secondary {
  color: #009324;
}

.u-fc-link {
  color: #ee8200;
}

.u-fc-visited {
  color: #e5541f;
}

.u-fc-hover {
  color: #cc0000;
}

.u-fc-active {
  color: #ee8200;
}

.u-ls-disc {
  list-style-type: disc !important;
  padding-left: 1.5em !important;
}

.u-ls-circle {
  list-style-type: circle !important;
  padding-left: 1.5em !important;
}

.u-ls-square {
  list-style-type: square !important;
  padding-left: 1.5em !important;
}

.u-ls-decimal {
  list-style-type: decimal !important;
  padding-left: 1.5em !important;
}

.u-ls-ur {
  list-style-type: upper-roman !important;
  padding-left: 1.5em !important;
}

.u-ls-none {
  list-style-type: none !important;
  padding-left: 1.5em !important;
}

.u-ls-play li:before {
  font-family: 'FontAwesome';
  margin-right: 0.5em;
  content: "";
}

.u-ls-cog li:before {
  font-family: 'FontAwesome';
  margin-right: 0.5em;
  content: "";
}

.u-require {
  padding: 2px 5px;
  background: #c20f17;
  color: #fff;
  border-radius: 4px;
  margin: 0 4px;
}

a.u-btn {
  background-color: #fff;
  color: #2a71b9;
  border: solid 1px #2a71b9;
  border-radius: 4px;
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
}

.u-fb {
  font-weight: bold;
}

.u-tr {
  text-align: right;
}

.u-tc {
  text-align: center;
}

.u-tl {
  text-align: left;
}

.u-w100 {
  width: 100% !important;
}

.u-important {
  font-size: 1.125rem;
  color: #006bff;
}

.u-strong {
  font-size: 1.125rem;
  color: #006bff;
}

.u-atention {
  font-size: 1.125rem;
  color: #c00;
}

.u-caution {
  font-size: 0.9375rem;
  color: #009324;
}