@charset "UTF-8";
html {
  font-size: 62.5%;
}

/*----------------------------------
body
----------------------------------*/
body {
  background: #fafafa;
  position: relative;
  margin: 0;
  opacity: 0;
  -webkit-animation: fadeInAll 0.5s ease forwards;
          animation: fadeInAll 0.5s ease forwards;
}
@-webkit-keyframes fadeInAll {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeInAll {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
body * {
  font-family: "Shippori Mincho B1", "游明朝", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "Noto Serif JP", "MS Mincho", serif;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 2;
  box-sizing: border-box;
  color: #000;
}
@media (max-width: 767.99px) {
  body * {
    font-size: 3.8461538462vw;
    line-height: 2;
  }
}
body main {
  overflow: hidden;
}
body section {
  position: relative;
}
body a,
body button {
  border: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
@media (hover: hover) and (pointer: fine) {
  body a:hover,
body button:hover {
    opacity: 0.5;
  }
}
body a,
body p {
  width: 100%;
}
body img {
  width: 100%;
  height: auto;
  vertical-align: middle;
}
body sup {
  font-size: 75%;
}
body sub {
  font-size: 75%;
}

/*----------------------------------
utility
----------------------------------*/
@media (max-width: 767.99px) {
  .u-pc {
    display: none;
  }
}

@media (min-width: 768px) {
  .u-sp {
    display: none;
  }
}

/*----------------------------------
animation
----------------------------------*/
/* fadein */
.fadein {
  opacity: 0;
  transition: 1500ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: opacity, transform;
  transform: translate3d(0, 20px, 0) rotate(0.001deg);
  transition-delay: 0.3s;
}

.fadein.is-show {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(0.001deg);
}

/* blurin */
.blurin {
  opacity: 0;
}

.blurin.is-show {
  -webkit-animation: fadeInBlur 1s ease forwards;
          animation: fadeInBlur 1s ease forwards;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

@-webkit-keyframes fadeInBlur {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@keyframes fadeInBlur {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}
/*----------------------------------
header
----------------------------------*/
@property --progress {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 76px;
  z-index: 100;
  background-color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (max-width: 767.99px) {
  .header {
    height: 17.4358974359vw;
  }
}
@media (prefers-reduced-motion: reduce) {
  .header {
    transition-duration: 1ms;
  }
}
.header.is-show {
  opacity: 1;
  pointer-events: auto;
}
.header__link {
  position: fixed;
  top: 20px;
  left: 20px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  pointer-events: none;
}
@media (max-width: 767.99px) {
  .header__link {
    top: 4.1025641026vw;
    left: 50%;
    transform: translateX(-50%);
  }
}
.header.is-show .header__link {
  pointer-events: auto;
}
.header__link img {
  width: auto;
  height: 30px;
  --progress: 0;
  --feather: 50%;
  -webkit-mask-image: linear-gradient(160deg, #fff calc(var(--progress) * 150% - var(--feather)), transparent calc(var(--progress) * 150%));
  mask-image: linear-gradient(160deg, #fff calc(var(--progress) * 150% - var(--feather)), transparent calc(var(--progress) * 150%));
  translate: 0 -0.5rem;
  transition: --progress 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), translate 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (max-width: 767.99px) {
  .header__link img {
    height: 8.2051282051vw;
  }
}
.header.is-show .header__link img {
  --progress: 1;
  translate: 0 0;
}
@media (prefers-reduced-motion: reduce) {
  .header__link img {
    transition-duration: 1ms;
  }
}
.header.is-hide {
  opacity: 0;
}
.header.is-hide .header__link {
  pointer-events: none;
}

/*----------------------------------
footer
----------------------------------*/
.footer {
  padding: 100px 40px 115px;
  text-align: center;
}
@media (max-width: 767.99px) {
  .footer {
    padding: 25.641025641vw 5.1282051282vw;
  }
}
.footer__link {
  display: block;
  margin-inline: auto;
  width: 416px;
}
@media (max-width: 767.99px) {
  .footer__link {
    width: 100%;
  }
}
.footer__copy {
  margin-top: 50px;
  width: 360px;
}
@media (max-width: 767.99px) {
  .footer__copy {
    margin-top: 10.2564102564vw;
    width: 77.4358974359vw;
  }
}

/*----------------------------------
main
----------------------------------*/
main .mainvisual__inner {
  width: 100%;
  margin-inline: auto;
  padding: 40px 40px 0;
}
@media (min-width: 768px) {
  main .mainvisual__inner {
    max-width: 1366px;
  }
}
@media (max-width: 767.99px) {
  main .mainvisual__inner {
    padding: 5.1282051282vw 5.1282051282vw 0;
  }
}
main .mainvisual__img {
  width: 100%;
}
@media (min-width: 768px) {
  main .mainvisual__txt {
    margin-top: 80px;
    padding-left: 20.2177293935%;
  }
}
@media (min-width: 768px) and (max-width: 1024.99px) {
  main .mainvisual__txt {
    padding-left: 0;
  }
}
@media (max-width: 767.99px) {
  main .mainvisual__txt {
    margin-top: 20.5128205128vw;
  }
}
@media (min-width: 768px) {
  main .mainvisual__txt img {
    max-width: 740px;
  }
}
@media (min-width: 768px) and (max-width: 1024.99px) {
  main .mainvisual__txt img {
    max-width: 100%;
  }
}
@media (max-width: 767.99px) {
  main .mainvisual__txt img {
    width: 100%;
  }
}
main .section {
  margin-top: 140px;
}
@media (max-width: 767.99px) {
  main .section {
    margin-top: 25.641025641vw;
  }
}
main .section__inner {
  width: 100%;
  margin-inline: auto;
  padding-inline: 40px;
  display: flex;
}
@media (min-width: 768px) {
  main .section__inner {
    max-width: 1366px;
  }
}
@media (min-width: 768px) and (max-width: 1024.99px) {
  main .section__inner {
    flex-direction: column;
  }
}
@media (max-width: 767.99px) {
  main .section__inner {
    padding-inline: 5.1282051282vw;
    flex-direction: column;
  }
}
main .section__num-wrap {
  width: 20.2177293935%;
  flex-shrink: 0;
  padding-top: 25px;
}
@media (min-width: 768px) {
  main .section__num-wrap {
    max-width: 260px;
  }
}
@media (min-width: 768px) and (max-width: 1024.99px) {
  main .section__num-wrap {
    width: 100%;
    max-width: inherit;
    border-top: solid 1px #b3b5b2;
  }
}
@media (max-width: 767.99px) {
  main .section__num-wrap {
    width: 100%;
    padding-top: 5.1282051282vw;
    border-top: solid 1px #b3b5b2;
  }
}
main .section__num {
  font-family: "Figtree", sans-serif;
  font-weight: 300;
  font-size: 4rem;
  line-height: 1;
  color: #b3b5b2;
}
@media (max-width: 767.99px) {
  main .section__num {
    font-size: 10.2564102564vw;
  }
}
main .section__cts-wrap {
  width: 100%;
  padding-top: 25px;
}
@media (min-width: 768px) {
  main .section__cts-wrap {
    border-top: solid 1px #b3b5b2;
  }
}
@media (min-width: 768px) and (max-width: 1024.99px) {
  main .section__cts-wrap {
    border: none;
  }
}
@media (max-width: 767.99px) {
  main .section__cts-wrap {
    padding-top: 4.6153846154vw;
  }
}
main .section__ttl img {
  width: auto;
  height: 28px;
}
@media (max-width: 767.99px) {
  main .section__ttl img {
    height: 20vw;
  }
}
main .section__txt.txt--01 {
  font-family: "Noto Sans JP", "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", メイリオ, sans-serif;
  font-weight: 300;
  font-size: 2rem;
  line-height: 1.45;
  color: #b3b5b2;
}
@media (min-width: 768px) {
  main .section__txt.txt--01 {
    margin-top: 20px;
  }
}
@media (max-width: 767.99px) {
  main .section__txt.txt--01 {
    font-size: 5.1282051282vw;
    margin-top: 2.5641025641vw;
  }
}
main .section__txt.txt--02 {
  font-size: 1.5rem;
  line-height: 2;
}
@media (min-width: 768px) {
  main .section__txt.txt--02 {
    margin-top: 25px;
    max-width: 740px;
  }
}
@media (max-width: 767.99px) {
  main .section__txt.txt--02 {
    margin-top: 10.2564102564vw;
    font-size: 3.8461538462vw;
  }
}
@media (max-width: 767.99px) {
  main .section .section__txt.txt--01 + .section__txt.txt--02 {
    margin-top: 6.4102564103vw;
  }
}
main .section__img {
  margin-top: 20px;
}
@media (max-width: 767.99px) {
  main .section__img {
    margin-top: 5.1282051282vw;
  }
}
main .section01 {
  margin-top: 100px;
}
@media (max-width: 767.99px) {
  main .section01 {
    margin-top: 15.3846153846vw;
  }
}
@media (max-width: 767.99px) {
  main .section01 .section__ttl img {
    height: 32.3076923077vw;
  }
}
main .section04 {
  padding-bottom: 140px;
}
@media (max-width: 767.99px) {
  main .section04 {
    padding-bottom: 25.641025641vw;
  }
}
@media (min-width: 768px) {
  main .info__inner {
    margin-inline: auto;
    width: 766px;
  }
}
@media (min-width: 768px) and (max-width: 1365.99px) {
  main .info__inner {
    width: 56.0761346999vw;
  }
}
@media (min-width: 768px) and (max-width: 1024.99px) {
  main .info__inner {
    width: 100%;
    padding-left: 40px;
  }
}
@media (max-width: 767.99px) {
  main .info__inner {
    padding-left: 5.1282051282vw;
  }
}
@media (min-width: 768px) {
  main .info__txt-wrap {
    width: calc(100vw - (100vw - 766px) / 2);
  }
}
@media (min-width: 768px) and (max-width: 1365.99px) {
  main .info__txt-wrap {
    width: 78.0380673499vw;
  }
}
@media (min-width: 768px) and (max-width: 1024.99px) {
  main .info__txt-wrap {
    width: 100%;
  }
}
@media (max-width: 767.99px) {
  main .info__txt-wrap {
    width: 100%;
  }
}
main .info__txt {
  border-top: solid 1px #b3b5b2;
  padding-top: 25px;
  font-size: 1.5rem;
  line-height: 2;
}
@media (min-width: 768px) {
  main .info__txt {
    max-width: 1026px;
  }
}
@media (max-width: 767.99px) {
  main .info__txt {
    padding-top: 6.4102564103vw;
    font-size: 3.8461538462vw;
    padding-right: 5.1282051282vw;
  }
}
main .info__link {
  width: 100%;
  height: 70px;
  background: #fff;
  margin-top: 25px;
  display: flex;
  align-items: center;
  padding: 17px 20px 23px;
  -moz-column-gap: 20px;
       column-gap: 20px;
  border: solid 1px #fff;
}
@media (min-width: 768px) {
  main .info__link {
    width: 100%;
  }
}
@media (max-width: 767.99px) {
  main .info__link {
    height: 17.9487179487vw;
    margin-top: 6.4102564103vw;
    padding: 4.1025641026vw 5.1282051282vw 6.4102564103vw;
    -moz-column-gap: 3.0769230769vw;
         column-gap: 3.0769230769vw;
  }
}
@media (hover: hover) and (pointer: fine) {
  main .info__link:hover {
    opacity: 1;
    border-top: solid 1px #b3b5b2;
    border-left: solid 1px #b3b5b2;
    border-bottom: solid 1px #b3b5b2;
  }
}
main .info__link img {
  width: 265px;
}
@media (max-width: 767.99px) {
  main .info__link img {
    width: 67.9487179487vw;
  }
}
main .info__link::after {
  content: "";
  background: url(/ja/madeinjapan_ceratech/assets/images/icon-arrow.svg) no-repeat right center/contain;
  width: 18px;
  height: 8px;
  display: inline-block;
  margin-top: 6px;
}
@media (max-width: 767.99px) {
  main .info__link::after {
    width: 4.6153846154vw;
    height: 2.0512820513vw;
    margin-top: 2.3076923077vw;
  }
}
/*# sourceMappingURL=style.css.map */