@charset "UTF-8";
:root {
  --color-default: #333;
  --color-inverted: white;
  --color-black: black;
  --color-link: inherit;
  --color-gray: #ccc;
  --bg-default: white;
  --bg-inverted: #333;
  --bg-light: url(/images/common/bg_light.jpg);
  --bg-dark: url(/images/common/bg_dark.jpg);
  --basic-margin: 40px;
  --wide-margin: 70px;
  --mobile-basic-margin: 27px;
  --section-padding: 96px;
  --mobile-section-padding: 40px;
  --mobile-content-padding: 15px;
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
}

/*
====================================================================
 H2
====================================================================
*/
.section-block--01 h2 span, .section-block--03 h2 span {
  text-align: center;
}
.section-block--01 h2 span.en::after, .section-block--03 h2 span.en::after {
  left: calc(50% + 6px);
}

/*
====================================================================
 SECTION 01
====================================================================
*/
.section-block--01 {
  background: url(/images/about/bg_message.jpg) center top/cover no-repeat;
}
.section-block--01 .section-block__body {
  opacity: 0;
  transform: translateY(15%);
  transition: opacity 2s var(--ease-out-cubic), transform 2s var(--ease-out-quint);
  transition-delay: 1.5s;
}
.section-block--01 .section-block__body.in-viewport {
  opacity: 1;
  transform: translateY(0);
  font-weight: 500;
}
.section-block--01 .signature {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin: 40px 0 0 auto;
}
.section-block--01 .signature img {
  height: 24px;
}

/*
====================================================================
 SECTION 02
====================================================================
*/
main {
  overflow-x: unset;
}

.section-block--02 {
  background-image: var(--bg-dark);
  background-position: center top;
  background-repeat: repeat;
  color: var(--color-inverted);
}
.section-block--02 h2 .en::after {
  background-color: var(--bg-default);
}
.section-block--02 .section-block__body {
  width: 100%;
  position: relative;
}
.section-block--02 .section-block__content {
  width: 87.3%;
  margin: 0 auto;
  position: relative;
}
.section-block--02 .section-block__content div {
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(15%);
  transition: opacity 2s var(--ease-out-cubic), transform 2s var(--ease-out-quint);
  transition-delay: 1.5s;
  font-weight: 500;
}
.section-block--02 .section-block__content div.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.section-block--02 .section-block__content p:first-of-type {
  margin-bottom: 1em;
}
.section-block--02 .section-block__content picture {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  position: absolute;
  right: 0;
  bottom: -168px;
  z-index: 1;
  opacity: 0;
  transform: translateY(15%);
  transition: opacity 2s var(--ease-out-cubic), transform 2s var(--ease-out-quint);
  transition-delay: 2s;
}
.section-block--02 .section-block__content picture.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/*
====================================================================
 SECTION 03
====================================================================
*/
.section-block--03 {
  background-image: var(--bg-light);
  background-position: center top;
  background-repeat: repeat;
}
.section-block--03 .section-block__body {
  width: 1000px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(15%);
  transition: opacity 2s var(--ease-out-cubic), transform 2s var(--ease-out-quint);
  transition-delay: 1.5s;
}
.section-block--03 .section-block__body.in-viewport {
  opacity: 1;
  transform: translateY(0);
}
.section-block--03 .section-block__body h3::before {
  content: "■";
}
.section-block--03 .section-block__body p:not(:last-of-type) {
  margin-bottom: 1.5em;
}
.section-block--03 .attention {
  border: 1px solid var(--color-default);
  border-radius: 10px;
  padding: 10px 18px;
  margin-top: 10px;
  font-size: 16px;
}
.section-block--03.in-viewport .section-block__body {
  opacity: 1;
  transform: translateY(0);
}

/*----------------------------------------------------------------*/
@media (width < 768px) {
  /*----------------------------------------------------------------*/
  /*
  ====================================================================
   SP / SECTION 01
  ====================================================================
  */
  .section-block--01 {
    background-image: url(/images/sp/about/bg_message.jpg);
    background-position: left top;
    background-repeat: repeat-y;
    background-size: 100% auto;
  }
  /*
  ====================================================================
   SECTION 02
  ====================================================================
  */
  main {
    overflow-x: hidden;
  }
  .section-block--02 .section-block__content {
    width: 100%;
  }
  .section-block--02 .section-block__content div {
    transition-delay: 0s;
  }
  .section-block--02 .section-block__content picture {
    position: static;
    transition-delay: 0s;
  }
  /*
  ====================================================================
   SECTION 03
  ====================================================================
  */
  .section-block--03 h2 {
    letter-spacing: 0;
    margin-right: -15px;
    margin-left: -15px;
  }
  .section-block--03 .section-block__body {
    width: 100%;
    transition-delay: 0s;
  }
  .section-block--03 .attention {
    padding: 15px 18px;
    margin-top: 15px;
  }
  /*----------------------------------------------------------------*/
}
/*----------------------------------------------------------------*//*# sourceMappingURL=about.css.map */