@charset "UTF-8";
html {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100vh;
}

main {
  min-height: 1px;
}

footer {
  margin-top: auto;
}

body {
  overflow-x: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "游ゴシック体", YuGothic, "Yu Gothic Medium", sans-serif;
  font-size: 16px;
  color: #222222;
  background: #ffffff;
}

p {
  line-height: 1.6;
}

a {
  text-decoration: none;
  color: #1a0dab;
}
a:hover {
  text-decoration: none;
  opacity: 0.8;
  color: #1a0dab;
}
a.btn {
  text-decoration: none;
}

:focus,
button:focus {
  outline: none;
}

img {
  max-width: 100%;
  height: auto;
}
@media (min-width: 768px) {
  img {
    image-rendering: -webkit-optimize-contrast;
  }
}

iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  border: none;
}

ul {
  list-style: none;
  -webkit-padding-start: 0;
          padding-inline-start: 0;
}

dt,
dd {
  line-height: 1;
  margin: 0;
}

.list-attention {
  list-style: none;
  margin-bottom: 0;
}
.list-attention li {
  padding-left: 1em;
  text-indent: -1em;
}
.list-attention li + li {
  margin-top: 12px;
}

.maker {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(70%, transparent), color-stop(70%, #f8e96b));
  background: -webkit-linear-gradient(transparent 70%, #f8e96b 70%);
  background: linear-gradient(transparent 70%, #f8e96b 70%);
}

footer {
  text-align: center;
  background-color: #222222;
  background-image: -webkit-repeating-linear-gradient(315deg, transparent, transparent 8px, #262626 8px, #262626 16px);
  background-image: repeating-linear-gradient(135deg, transparent, transparent 8px, #262626 8px, #262626 16px);
  background-size: auto auto;
  padding: 40px 0 40px 0;
}
@media (max-width: 575px) {
  footer {
    padding: 20px 0 20px 0;
  }
}
footer .link-pageup {
  position: fixed;
  right: 10px;
  bottom: 10px;
  width: 50px;
}
@media (max-width: 991px) {
  footer .link-pageup {
    width: 30px;
  }
}
footer .copyright {
  display: block;
  color: #ffffff;
  font-size: 14px;
}
@media (max-width: 575px) {
  footer .copyright {
    font-size: 12px;
  }
}
footer .logo-movic {
  display: inline-block;
  width: 120px;
  margin-top: 40px;
}
@media (max-width: 575px) {
  footer .logo-movic {
    width: 100px;
    margin-top: 20px;
  }
}

.img-center img {
  width: 100%;
  display: block;
  margin: 0 auto;
}

.area-about h2 {
  text-align: center;
  margin: 40px 0 56px 0;
}
@media (max-width: 575px) {
  .area-about h2 {
    padding: 0 20px 0 20px;
    margin: 0px 0 24px 0;
  }
}
.area-about p {
  font-size: 18px;
  line-height: 1.8;
  text-align: center;
}
@media (max-width: 767px) {
  .area-about p {
    font-size: 14px;
    text-align: left;
  }
}
.area-about .button-official {
  display: block;
  width: 200px;
  color: #222222;
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  background: #ffcfc5 url(../img/icon-newwindow.png) no-repeat right 20px center;
  background-size: 12px auto;
  border-radius: 50px;
  padding: 12px 0 12px 0;
  margin: 40px auto 0 auto;
}
@media (max-width: 575px) {
  .area-about .button-official {
    font-size: 14px;
    margin: 24px auto 0 auto;
  }
}

.area-lead {
  background-color: #fbfbfb;
  background-image: url(../img/bg-lead-top.png), -webkit-repeating-linear-gradient(left, transparent, transparent 20px, #f4f4f4 20px, #f4f4f4 40px);
  background-image: url(../img/bg-lead-top.png), repeating-linear-gradient(90deg, transparent, transparent 20px, #f4f4f4 20px, #f4f4f4 40px);
  background-size: auto auto, auto auto;
  background-repeat: repeat-x, repeat;
  padding: 96px 0 40px;
  margin-top: 80px;
}
@media (max-width: 767px) {
  .area-lead {
    background-size: 30px, auto auto;
    padding: 48px 0 40px;
  }
}
.area-lead p {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  text-shadow: -1px -1px 0 #ffffff, -1px 0 0 #ffffff, -1px 1px 0 #ffffff, 0 -1px 0 #ffffff, 0 1px 0 #ffffff, 1px -1px 0 #ffffff, 1px 0 0 #ffffff, 1px 1px 0 #ffffff;
}
@media (max-width: 767px) {
  .area-lead p {
    font-size: 18px;
  }
}
.area-lead strong {
  font-size: 34px;
}
@media (max-width: 575px) {
  .area-lead strong {
    font-size: 23px;
  }
}
.area-lead strong span {
  color: #00b095;
}
.area-lead ul {
  margin: 40px 0 0 0;
}
@media (max-width: 575px) {
  .area-lead ul {
    margin: 20px 0 0 0;
  }
}
@media (max-width: 575px) {
  .area-lead li {
    padding: 0 4px 0 4px;
  }
}

.area-goods {
  padding-top: 186px;
}
@media (max-width: 991px) {
  .area-goods {
    padding-top: 146px;
  }
}
@media (max-width: 575px) {
  .area-goods {
    padding-top: 100px;
  }
}

.list-goods-left li,
.list-goods-right li {
  max-width: 240px;
  padding: 0 10px 0;
  margin: 64px 0 0 0;
}
@media (max-width: 767px) {
  .list-goods-left li,
  .list-goods-right li {
    max-width: 340px;
    margin: 40px 0 0 0;
  }
}

@media (max-width: 767px) {
  .list-goods-left li:nth-of-type(1) {
    margin-right: 25%;
  }
}
.list-goods-left li:nth-of-type(3) {
  margin-right: 25%;
}
@media (max-width: 767px) {
  .list-goods-left li:nth-of-type(3) {
    margin-right: 0;
  }
}

.list-goods-right.row {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.list-goods-right li:nth-of-type(1) {
  margin-left: 25%;
}

.info-goods {
  text-align: center;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 12px;
}
.info-goods dt img {
  border: 4px solid #f4f4f4;
  border-radius: 12px;
}
.info-goods .name,
.info-goods .price {
  font-size: 18px;
  margin: 16px 0 0 0;
}
@media (max-width: 991px) {
  .info-goods .name,
  .info-goods .price {
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  .info-goods .name,
  .info-goods .price {
    margin: 12px 0 0 0;
  }
}
.info-goods .tax {
  font-size: 12px;
}
.info-goods .button-order,
.info-goods .button-detail {
  display: block;
  font-size: 16px;
  font-weight: bold;
  border-radius: 22px;
  padding: 13px;
}
@media (max-width: 991px) {
  .info-goods .button-order,
  .info-goods .button-detail {
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  .info-goods .button-order,
  .info-goods .button-detail {
    padding: 10px;
  }
}
.info-goods .button-order {
  color: #ffffff;
  margin: 20px 0 0 0;
}
@media (max-width: 767px) {
  .info-goods .button-order {
    margin: 16px 0 0 0;
  }
}
.info-goods .button-detail {
  margin: 16px 0 0 0;
}
@media (max-width: 767px) {
  .info-goods .button-detail {
    margin: 14px 0 0 0;
  }
}

.loid {
  background: url(../img/img-loid.png) no-repeat right 40px top 80px;
  background-size: 540px auto;
}
@media (max-width: 1199px) {
  .loid {
    background: url(../img/img-loid.png) no-repeat right 0 top 80px;
    background-size: 50%;
  }
}
@media (max-width: 767px) {
  .loid {
    background: url(../img/img-loid.png) no-repeat right 10px top 60px;
    background-size: 80%;
  }
}
@media (max-width: 575px) {
  .loid {
    background: url(../img/img-loid.png) no-repeat right 10px top 40px;
    background-size: 80%;
  }
}
.loid .button-order {
  border: 1px solid #29bca5;
  background: #29bca5 url(../img/arrow-white.png) no-repeat right 12px center;
  background-size: 5px auto;
}
.loid .button-detail {
  color: #1fa792;
  border: 1px solid #29bca5;
  background: #ddfffa url(../img/arrow-loid.png) no-repeat right 12px center;
  background-size: 5px auto;
}

.anya {
  background: url(../img/img-anya.png) no-repeat left 40px top 80px;
  background-size: 580px auto;
}
@media (max-width: 1199px) {
  .anya {
    background: url(../img/img-anya.png) no-repeat left 0 top 80px;
    background-size: 50%;
  }
}
@media (max-width: 767px) {
  .anya {
    background: url(../img/img-anya.png) no-repeat left 10px top 60px;
    background-size: 80%;
  }
}
@media (max-width: 575px) {
  .anya {
    background: url(../img/img-anya.png) no-repeat left 30px top 60px;
    background-size: 80%;
  }
}
.anya .button-order {
  border: 1px solid #f78aa1;
  background: #f78aa1 url(../img/arrow-white.png) no-repeat right 12px center;
  background-size: 5px auto;
}
.anya .button-detail {
  color: #f78aa1;
  border: 1px solid #f78aa1;
  background: #feeef1 url(../img/arrow-anya.png) no-repeat right 12px center;
  background-size: 5px auto;
}

.yor {
  background: url(../img/img-yor.png) no-repeat right 0 top 80px;
  background-size: 500px auto;
}
@media (max-width: 1199px) {
  .yor {
    background: url(../img/img-yor.png) no-repeat right 0 top 80px;
    background-size: 50%;
  }
}
@media (max-width: 767px) {
  .yor {
    background: url(../img/img-yor.png) no-repeat right 0 top 60px;
    background-size: 80%;
  }
}
@media (max-width: 575px) {
  .yor {
    background: url(../img/img-yor.png) no-repeat right 10px top 35px;
    background-size: 80%;
  }
}
.yor .button-order {
  border: 1px solid #fc7f4e;
  background: #fc7f4e url(../img/arrow-white.png) no-repeat right 12px center;
  background-size: 5px auto;
}
.yor .button-detail {
  color: #fc7f4e;
  border: 1px solid #fc7f4e;
  background: #feebe3 url(../img/arrow-yor.png) no-repeat right 12px center;
  background-size: 5px auto;
}

.area-attention {
  background: #f4f4f4;
  padding: 48px 0 48px 0;
  margin-top: 160px;
}
@media (max-width: 575px) {
  .area-attention {
    padding: 24px 0 24px 0;
    margin-top: 80px;
  }
}
.area-attention .list-attention {
  font-size: 16px;
}
@media (max-width: 575px) {
  .area-attention .list-attention {
    font-size: 13px;
  }
}