/*Base*/
/*reset*/
html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, dl, dt, dd, ol, ul, li, fieldset, form, legend, table, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  background: transparent;
  box-sizing: border-box;
  font-size: 100%;
  font-style: normal;
  text-align: justify;
}

span, del, dfn, em, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, label, caption, time, mark {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  background: transparent;
  box-sizing: border-box;
  line-height: 1;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main, picture, source {
  display: block;
  box-sizing: border-box;
}

ol, ul, li {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

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

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

ins {
  text-decoration: none;
}

mark {
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

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

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

picture {
  width: 100%;
}

img {
  vertical-align: bottom;
  font-size: 0;
  line-height: 0;
  width: 100%;
  height: auto;
  border: 0;
  display: block;
}

h2, h3, h4, h5 {
  font-weight: 400;
  line-height: 1;
}

/*base*/
html {
  -webkit-overflow-scrolling: touch;
}

html, body {
  height: 100%;
}

a {
  text-decoration: none;
  will-change: transform;
  color: inherit;
}

/* CSS Document */
.moksui-top {
  position: relative;
  overflow: hidden;
}
.moksui-top__thought, .moksui-top__products {
  background: #fff9f0;
  color: #487963;
  font-family: "Noto Sans JP", sans-serif;
}
.moksui-top__thought {
  padding: calc(150 * var(--u)) 0 calc(130 * var(--u));
}
@media screen and (max-width: 750px) {
  .moksui-top__thought {
    padding: calc(170 * var(--u)) 0 calc(95 * var(--u));
  }
}
.moksui-top__thought-inner {
  position: relative;
  min-height: calc(1730 * var(--u));
}
@media screen and (max-width: 750px) {
  .moksui-top__thought-inner {
    min-height: 0;
    width: 100%;
  }
}
.moksui-top__thought-copy {
  position: relative;
  width: 100%;
}
@media screen and (max-width: 750px) {
  .moksui-top__thought-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
.moksui-top__thought-copy h1, .moksui-top__product-title {
  margin: 0 0 calc(115 * var(--u));
  font-family: "Noto Sans JP", sans-serif;
  font-size: calc(20 * var(--u));
  font-weight: 400;
  letter-spacing: calc(5 * var(--u));
}
@media screen and (max-width: 750px) {
  .moksui-top__thought-copy h1, .moksui-top__product-title {
    margin-bottom: calc(80 * var(--u));
    font-size: calc(17 * var(--u));
    letter-spacing: calc(4 * var(--u));
  }
}
.moksui-top__thought-copy h2, .moksui-top__product-copy h2 {
  margin: 0 0 calc(55 * var(--u));
  font-family: "Shippori Mincho", serif;
  font-size: calc(26 * var(--u));
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: calc(4 * var(--u));
}
@media screen and (max-width: 750px) {
  .moksui-top__thought-copy h2, .moksui-top__product-copy h2 {
    margin-bottom: calc(53 * var(--u));
    font-size: calc(21 * var(--u));
    letter-spacing: calc(3 * var(--u));
  }
}
.moksui-top__thought-copy > p, .moksui-top__product-copy p {
  width: calc(350 * var(--u));
  margin: 0;
  font-size: calc(13 * var(--u));
  line-height: 2.6;
  letter-spacing: calc(1.4 * var(--u));
}
@media screen and (max-width: 750px) {
  .moksui-top__thought-copy > p, .moksui-top__product-copy p {
    width: calc(510 * var(--u));
    font-size: calc(12 * var(--u));
    line-height: 2;
    letter-spacing: calc(1.4 * var(--u));
    text-align: center;
  }
}
.moksui-top__thought-copy > .moksui-top__button {
  margin: calc(80 * var(--u)) 0 0;
  font-size: calc(13 * var(--u));
}
@media screen and (max-width: 750px) {
  .moksui-top__thought-copy > .moksui-top__button {
    margin: calc(80 * var(--u)) 0 0;
  }
}
.moksui-top__thought-copy h1 {
  font-size: calc(25 * var(--u));
}
.moksui-top__thought-copy h2 {
  font-size: calc(35 * var(--u));
}
.moksui-top__thought-copy > p {
  width: calc(460 * var(--u));
  font-size: calc(16 * var(--u));
}
@media screen and (max-width: 750px) {
  .moksui-top__thought-copy > p {
    width: calc(510 * var(--u));
    font-size: calc(20 * var(--u));
  }
}
.moksui-top__thought-copy > p span {
  display: block;
}
.moksui-top__thought-lead {
  margin-bottom: calc(60 * var(--u)) !important;
}
@media screen and (max-width: 750px) {
  .moksui-top__thought-lead {
    margin-bottom: calc(87 * var(--u)) !important;
  }
}
@media screen and (max-width: 750px) {
  .moksui-top__thought-text {
    margin-top: calc(85 * var(--u)) !important;
  }
}
.moksui-top__thought-images picture {
  position: absolute;
  display: block;
  overflow: hidden;
  border-radius: calc(42 * var(--u));
}
.moksui-top__thought-images picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.moksui-top__thought-images picture:nth-child(1) {
  top: calc(280 * var(--u));
  right: calc(-426 * var(--u));
  width: calc(1026 * var(--u));
  height: calc(652 * var(--u));
}
.moksui-top__thought-images picture:nth-child(2) {
  top: calc(980 * var(--u));
  left: calc(-250 * var(--u));
  width: calc(626 * var(--u));
  height: calc(438 * var(--u));
}
.moksui-top__thought-images picture:nth-child(3) {
  top: calc(1210 * var(--u));
  right: calc(-217 * var(--u));
  width: calc(744 * var(--u));
  height: calc(520 * var(--u));
}
@media screen and (max-width: 750px) {
  .moksui-top__thought-images {
    display: none;
  }
}
.moksui-top__thought-images-sp {
  display: none;
}
@media screen and (max-width: 750px) {
  .moksui-top__thought-images-sp {
    display: block;
    width: 100%;
  }
}
@media screen and (max-width: 750px) {
  .moksui-top__thought-images-sp img {
    display: block;
    width: 100%;
    height: auto;
  }
}
.moksui-top__thought-image--third-sp {
  display: none;
}
@media screen and (max-width: 750px) {
  .moksui-top__thought-image--third-sp {
    display: block;
    width: calc(520 * var(--u));
    margin-top: calc(156 * var(--u));
    overflow: hidden;
    border-radius: calc(28 * var(--u));
  }
}
@media screen and (max-width: 750px) {
  .moksui-top__thought-image--third-sp img {
    display: block;
    width: 100%;
    height: auto;
  }
}
.moksui-top__products {
  padding: calc(163 * var(--u)) 0 calc(300 * var(--u));
}
@media screen and (max-width: 750px) {
  .moksui-top__products {
    padding: calc(103 * var(--u)) 0 calc(130 * var(--u));
  }
}
.moksui-top__product-title {
  margin-bottom: calc(50 * var(--u));
  font-size: calc(25 * var(--u));
  text-align: center;
}
@media screen and (max-width: 750px) {
  .moksui-top__product-title {
    margin-bottom: calc(65 * var(--u));
  }
}
.moksui-top__products-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media screen and (max-width: 750px) {
  .moksui-top__products-inner {
    flex-direction: column;
  }
}
.moksui-top__product-image {
  width: calc(495 * var(--u));
  position: relative;
  inset: calc(20 * var(--u)) 0 0 -3.3%;
}
@media screen and (max-width: 750px) {
  .moksui-top__product-image {
    width: calc(497 * var(--u));
    inset: 0 0 0 3%;
  }
}
.moksui-top__product-image img {
  display: block;
  width: 100%;
  height: auto;
}
.moksui-top__product-copy {
  width: calc(460 * var(--u));
}
@media screen and (max-width: 750px) {
  .moksui-top__product-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: calc(33 * var(--u)) 0 0;
  }
}
.moksui-top__product-copy h2 {
  margin-bottom: calc(43 * var(--u));
  font-size: calc(35 * var(--u));
}
@media screen and (max-width: 750px) {
  .moksui-top__product-copy h2 {
    margin-bottom: calc(46 * var(--u));
  }
}
.moksui-top__product-copy p {
  width: 100%;
  font-size: calc(16 * var(--u));
}
@media screen and (max-width: 750px) {
  .moksui-top__product-copy p {
    font-size: calc(20 * var(--u));
  }
}
.moksui-top__product-button {
  width: 100%;
  max-width: calc(230 * var(--u));
  margin: calc(45 * var(--u)) auto 0;
  font-size: calc(13 * var(--u));
}
@media screen and (max-width: 750px) {
  .moksui-top__product-button {
    margin: calc(42 * var(--u)) auto 0;
  }
}
.moksui-top__contact {
  background: #fff9f0;
}
.moksui-top__contact-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(630 * var(--u));
  height: calc(100 * var(--u));
  margin: 0 auto;
  border-radius: 999px;
  background: #487963;
  box-shadow: 0 calc(7 * var(--u)) calc(12 * var(--u)) rgba(72, 121, 99, 0.22);
  color: #fff;
  font-size: calc(20 * var(--u));
  letter-spacing: calc(2 * var(--u));
  text-decoration: none;
}
@media screen and (max-width: 750px) {
  .moksui-top__contact-link {
    width: calc(460 * var(--u));
  }
}
.moksui-top__contact-link::after {
  width: calc(18 * var(--u));
  height: calc(8 * var(--u));
  margin-left: calc(35 * var(--u));
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  content: "";
  flex-shrink: 0;
  transform: skew(45deg);
}/*# sourceMappingURL=top.css.map */