@media print, screen and (min-width: 800px) {
  .beforeArea {
    padding: 40px;
  }
}

@media screen and (max-width: 800px) {
  .beforeArea {
    padding: calc(30 / 375 * 100vw) calc(24 / 375 * 100vw);
  }
}

.beforeArea__head {
  border-bottom: 1px solid #d3d2cf;
  text-align: center;
}

@media print, screen and (min-width: 800px) {
  .beforeArea__head {
    padding-bottom: 22px;
  }
}

@media screen and (max-width: 800px) {
  .beforeArea__head {
    padding-bottom: calc(22 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .beforeArea__head + .beforeArea__cont {
    margin-top: 30px;
  }
}

@media screen and (max-width: 800px) {
  .beforeArea__head + .beforeArea__cont {
    margin-top: calc(20 / 375 * 100vw);
  }
}

.beforeArea__ttl {
  font-weight: 700;
}

@media print, screen and (min-width: 800px) {
  .beforeArea__ttl {
    font-size: 20px;
  }
}

@media screen and (max-width: 800px) {
  .beforeArea__ttl {
    font-size: calc(17 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .beforeArea__cont {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

@media print, screen and (min-width: 800px) {
  .beforeArea__cont .beforeSlider {
    width: 443px;
  }
}

@media screen and (max-width: 800px) {
  .beforeArea__item + .beforeArea__item {
    margin-top: calc(20 / 375 * 100vw);
  }
}

.beforeBox {
  background-color: #f4f4f5;
}

@media print, screen and (min-width: 800px) {
  .beforeBox {
    border-radius: 16px;
    padding: 22px 32px;
    width: 415px;
  }
}

@media screen and (max-width: 800px) {
  .beforeBox {
    border-radius: calc(16 / 375 * 100vw);
    padding: calc(16 / 375 * 100vw);
  }
}

.beforeBox__desc .txt {
  text-align: center;
}

@media print, screen and (min-width: 800px) {
  .beforeBox__desc .txt {
    font-size: 14px;
  }
}

@media screen and (max-width: 800px) {
  .beforeBox__desc .txt {
    font-size: calc(14 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .beforeBox__desc .txt + .beforeBox__notice {
    margin-top: 10px;
  }
}

@media screen and (max-width: 800px) {
  .beforeBox__desc .txt + .beforeBox__notice {
    margin-top: calc(10 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .beforeBox__desc .photo {
    margin: 0 auto;
    width: 197px;
  }
}

@media print, screen and (min-width: 800px) {
  .beforeBox__desc .photo + .txt {
    margin-top: 10px;
  }
}

@media screen and (max-width: 800px) {
  .beforeBox__desc .photo + .txt {
    margin-top: calc(10 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .beforeBox__desc + .beforeBox__desc {
    margin-top: 22px;
  }
}

@media screen and (max-width: 800px) {
  .beforeBox__desc + .beforeBox__desc {
    margin-top: calc(20 / 375 * 100vw);
  }
}

.beforeBox__label {
  background: #ffffff;
  display: block;
  margin: 0 auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

@media print, screen and (min-width: 800px) {
  .beforeBox__label {
    border-radius: 8px;
    font-size: 13px;
    padding: 2px 10px;
  }
}

@media screen and (max-width: 800px) {
  .beforeBox__label {
    border-radius: calc(8 / 375 * 100vw);
    font-size: calc(12 / 375 * 100vw);
    padding: calc(2 / 375 * 100vw) calc(10 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .beforeBox__label + .txt {
    margin-top: 12px;
  }
}

@media screen and (max-width: 800px) {
  .beforeBox__label + .txt {
    margin-top: calc(12 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .beforeBox__label + .photo {
    margin-top: 10px;
  }
}

@media screen and (max-width: 800px) {
  .beforeBox__label + .photo {
    margin-top: calc(10 / 375 * 100vw);
  }
}

.beforeBox__notice {
  background-color: #ffff8a;
  line-height: 1.25;
  text-align: center;
  width: 100%;
}

@media print, screen and (min-width: 800px) {
  .beforeBox__notice {
    border-radius: 8px;
    font-size: 12px;
    padding: 6px;
  }
}

@media screen and (max-width: 800px) {
  .beforeBox__notice {
    border-radius: calc(8 / 375 * 100vw);
    font-size: calc(10 / 375 * 100vw);
    padding: calc(6 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .beforeSect__head + .beforeSect__cont {
    margin-top: 60px;
  }
}

@media screen and (max-width: 800px) {
  .beforeSect__head + .beforeSect__cont {
    margin-top: calc(86 / 375 * 100vw);
  }
}

.beforeSlider {
  --progress: 50%;
}

.beforeSlider.sai-animate .beforeSlider__ttl--before {
  -webkit-animation: sliderMove 3s ease-in-out;
          animation: sliderMove 3s ease-in-out;
}

.beforeSlider.sai-animate .beforeSlider__ttl--after {
  -webkit-animation: sliderMoveInverse 3s ease-in-out;
          animation: sliderMoveInverse 3s ease-in-out;
}

.beforeSlider.sai-animate .beforeSlider__before {
  -webkit-animation: sliderMove 3s ease-in-out;
          animation: sliderMove 3s ease-in-out;
}

.beforeSlider.sai-animate.is-stopped {
  -webkit-animation: none;
          animation: none;
}

.beforeSlider.sai-animate.is-stopped .beforeSlider__ttl--before {
  -webkit-animation: none;
          animation: none;
}

.beforeSlider.sai-animate.is-stopped .beforeSlider__ttl--after {
  -webkit-animation: none;
          animation: none;
}

.beforeSlider.sai-animate.is-stopped .beforeSlider__before {
  -webkit-animation: none;
          animation: none;
}

.beforeSlider.sai-animate.is-stopped .beforeSlider__after {
  -webkit-animation: none;
          animation: none;
}

.beforeSlider__head .txt {
  text-align: center;
}

@media print, screen and (min-width: 800px) {
  .beforeSlider__head .txt {
    font-size: 14px;
  }
}

@media screen and (max-width: 800px) {
  .beforeSlider__head .txt {
    font-size: calc(10 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .beforeSlider__head + .beforeSlider__cont {
    margin-top: 10px;
  }
}

@media screen and (max-width: 800px) {
  .beforeSlider__head + .beforeSlider__cont {
    margin-top: calc(10 / 375 * 100vw);
  }
}

.beforeSlider__input {
  cursor: col-resize;
  height: 100%;
  left: 0;
  margin: 0;
  opacity: 0;
  padding: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 3;
}

.beforeSlider__ttl {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #ffff8a;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-family: "adobe-garamond-pro", serif;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  width: 100%;
  z-index: 1;
}

.beforeSlider__ttl--before {
  background-color: #f4f4f5;
  width: var(--progress);
  will-change: width;
}

.beforeSlider__ttl--after {
  background-color: #ffff8a;
  width: calc(100% - var(--progress));
  will-change: width;
}

@media print, screen and (min-width: 800px) {
  .beforeSlider__ttl {
    height: 45px;
  }
}

@media screen and (max-width: 800px) {
  .beforeSlider__ttl {
    height: calc(45 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .beforeSlider__ttl .inner {
    font-size: 24px;
  }
}

@media screen and (max-width: 800px) {
  .beforeSlider__ttl .inner {
    font-size: calc(18 / 375 * 100vw);
  }
}

.beforeSlider__bar {
  height: 100%;
  max-width: none;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateX(50%) translateY(-50%);
          transform: translateX(50%) translateY(-50%);
  width: auto;
  z-index: 2;
}

.beforeSlider__inner {
  overflow: hidden;
  position: relative;
  white-space: nowrap;
}

.beforeSlider__top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

.beforeSlider__label {
  background: #f4f4f5;
  display: block;
  margin: 0 auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

@media print, screen and (min-width: 800px) {
  .beforeSlider__label {
    border-radius: 8px;
    font-size: 13px;
    padding: 2px 10px;
  }
}

@media screen and (max-width: 800px) {
  .beforeSlider__label {
    border-radius: calc(8 / 375 * 100vw);
    font-size: calc(12 / 375 * 100vw);
    padding: calc(2 / 375 * 100vw) calc(10 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .beforeSlider__label + .txt {
    margin-top: 12px;
  }
}

@media screen and (max-width: 800px) {
  .beforeSlider__label + .txt {
    margin-top: calc(12 / 375 * 100vw);
  }
}

.beforeSlider__cont {
  position: relative;
}

.beforeSlider__before {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: var(--progress);
  will-change: width;
  z-index: 2;
}

.beforeSlider__before .photo {
  height: 100%;
  overflow: hidden;
  width: 100%;
}

.beforeSlider__before .photo__image {
  height: 100%;
  max-width: none;
  width: auto;
}

.beforeSlider__before .beforeSlider__ttl {
  background-color: #f4f4f5;
}

.beforeSlider__after .beforeSlider__ttl {
  background-color: #ffff8a;
}

@-webkit-keyframes sliderMove {
  0%, 100% {
    width: var(--progress);
  }
  25% {
    width: 0%;
  }
  75% {
    width: 100%;
  }
}

@keyframes sliderMove {
  0%, 100% {
    width: var(--progress);
  }
  25% {
    width: 0%;
  }
  75% {
    width: 100%;
  }
}

@-webkit-keyframes sliderMoveInverse {
  0%, 100% {
    width: calc(100% - var(--progress));
  }
  25% {
    width: 100%;
  }
  75% {
    width: 0%;
  }
}

@keyframes sliderMoveInverse {
  0%, 100% {
    width: calc(100% - var(--progress));
  }
  25% {
    width: 100%;
  }
  75% {
    width: 0%;
  }
}

.beforeTab__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media print, screen and (min-width: 800px) {
  .beforeTab__head {
    gap: 10px;
  }
}

@media screen and (max-width: 800px) {
  .beforeTab__head {
    gap: calc(10 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .beforeTab__head + .beforeTab__cont {
    margin-top: 30px;
  }
}

@media screen and (max-width: 800px) {
  .beforeTab__head + .beforeTab__cont {
    margin-top: calc(20 / 375 * 100vw);
  }
}

.beforeTab__btn {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #ffffff;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0;
  -webkit-transition: background-color .3s ease, color .3s ease;
  transition: background-color .3s ease, color .3s ease;
  width: 100%;
}

@media print, screen and (min-width: 800px) {
  .beforeTab__btn {
    height: 40px;
    padding: 10px;
    width: 160px;
  }
}

@media screen and (max-width: 800px) {
  .beforeTab__btn {
    height: calc(40 / 375 * 100vw);
    width: calc(110 / 375 * 100vw);
  }
}

.beforeTab__btn.is-active {
  background-color: #45433f;
}

.beforeTab__btn.is-active .inner {
  color: #ffffff;
}

.beforeTab__btn .inner {
  color: #000000;
  font-weight: 400;
  text-align: center;
}

@media print, screen and (min-width: 800px) {
  .beforeTab__btn .inner {
    font-size: 14px;
  }
}

@media screen and (max-width: 800px) {
  .beforeTab__btn .inner {
    font-size: calc(12 / 375 * 100vw);
  }
}

.beforeTab__item {
  background-color: #ffffff;
  display: none;
  margin: 0 auto;
  overflow: hidden;
}

@media print, screen and (min-width: 800px) {
  .beforeTab__item {
    border-radius: 16px;
    max-width: 978px;
  }
}

@media screen and (max-width: 800px) {
  .beforeTab__item {
    border-radius: calc(16 / 375 * 100vw);
  }
}

.beforeTab__item.is-active {
  display: block;
}

@media screen and (max-width: 800px) {
  .beforeTab__cont {
    padding: 0 calc(16 / 375 * 100vw);
  }
}

.bgLightAnimation {
  -webkit-filter: blur(10px);
          filter: blur(10px);
  -webkit-filter: grayscale(80%);
          filter: grayscale(80%);
  height: 100%;
  left: 0;
  mix-blend-mode: lighten;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  -webkit-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  width: 100%;
  z-index: 2;
}

.bgLightAnimation.is-loaded {
  opacity: .3;
}

.bgLayer {
  position: relative;
  z-index: 1;
}

.bgLayer:after {
  width: 100vw;
  content: '';
  inset: 0;
  position: absolute;
  z-index: -1;
}

@media print, screen and (min-width: 800px) {
  .bgLayer:after {
    margin-left: calc((100vw - 1366px) / -2);
  }
}

@media print, screen and (min-width: 800px) and (max-width: 1366px) {
  .bgLayer:after {
    margin-left: -20px;
    width: calc(100% + 40px);
  }
}

@media screen and (max-width: 800px) {
  .bgLayer:after {
    margin-left: -32px;
  }
}

.wrap--small .bgLayer:before, .wrap--small .bgLayer:after {
  width: 100vw;
}

@media print, screen and (min-width: 800px) {
  .wrap--small .bgLayer:before, .wrap--small .bgLayer:after {
    margin-left: calc((100vw - 998px) / -2);
  }
}

@media print, screen and (min-width: 800px) and (max-width: 1366px) {
  .wrap--small .bgLayer:before, .wrap--small .bgLayer:after {
    margin-left: -20px;
    width: calc(100% + 40px);
  }
}

@media screen and (max-width: 800px) {
  .wrap--small .bgLayer:before, .wrap--small .bgLayer:after {
    margin-left: -32px;
  }
}

.bgLayer--pattern01:after {
  background-color: #666c71;
}

.bgLayer--pattern02:after {
  background-color: #ffffff;
}

.bgLayer--pattern03 {
  color: #ffffff;
}

.bgLayer--pattern03:after {
  background-color: #333333;
}

.bgLayer--gradation01 {
  color: #ffffff;
}

.bgLayer--gradation01:after {
  background: -webkit-gradient(linear, right top, left top, from(rgba(51, 51, 51, 0)), color-stop(50%, rgba(255, 255, 255, 0.1)), to(rgba(51, 51, 51, 0))), #333333;
  background: linear-gradient(270deg, rgba(51, 51, 51, 0) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(51, 51, 51, 0) 100%), #333333;
}

.bgLayer--gradation02 {
  color: #ffffff;
}

.bgLayer--gradation02:after {
  background: -webkit-gradient(linear, right top, left top, from(#534f44), color-stop(50%, #6e6a5e), to(#534f44));
  background: linear-gradient(270deg, #534f44 0%, #6e6a5e 50%, #534f44 100%);
}

.bgLayer--texture01:after {
  background: no-repeat center top / 100% auto;
}

@media print, screen and (min-width: 800px) {
  .bgLayer--texture01:after {
    background-image: url("../images/pc/bg-cloth-01@1.5x.jpg");
  }
}

@media screen and (max-width: 800px) {
  .bgLayer--texture01:after {
    background-image: url("../images/sp/bg-cloth-01@2x.jpg");
  }
}

.bgLayer--texture02 {
  color: #ffffff;
}

.bgLayer--texture02:after {
  background: no-repeat center top / 100% auto;
}

@media print, screen and (min-width: 800px) {
  .bgLayer--texture02:after {
    background-image: url("../images/pc/bg-cloth-02@1.5x.jpg");
  }
}

@media screen and (max-width: 800px) {
  .bgLayer--texture02:after {
    background-image: url("../images/sp/bg-cloth-02@2x.jpg");
  }
}

.cvBtn {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #45433f;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: hidden;
}

@media print, screen and (min-width: 800px) {
  .cvBtn {
    height: 56px;
    width: 335px;
  }
}

@media screen and (max-width: 800px) {
  .cvBtn {
    height: calc(56 / 375 * 100vw);
    width: calc(310 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .cvBtn:hover .cvBtn__inner {
    -webkit-animation: btnhover-animation-out .3s forwards,btnhover-animation-in .4s .4s forwards;
            animation: btnhover-animation-out .3s forwards,btnhover-animation-in .4s .4s forwards;
  }
}

@media (hover: hover) and (pointer: fine) {
  .cvBtn:hover .cvBtn__inner {
    -webkit-animation: btnhover-animation-out .3s forwards,btnhover-animation-in .4s .4s forwards;
            animation: btnhover-animation-out .3s forwards,btnhover-animation-in .4s .4s forwards;
  }
}

.cvBtn__inner {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media print, screen and (min-width: 800px) {
  .cvBtn__inner {
    gap: 11px;
  }
}

@media screen and (max-width: 800px) {
  .cvBtn__inner {
    gap: calc(11 / 375 * 100vw);
  }
}

.cvBtn__icon {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

@media print, screen and (min-width: 800px) {
  .cvBtn__icon {
    width: 16px;
  }
}

@media screen and (max-width: 800px) {
  .cvBtn__icon {
    width: calc(16 / 375 * 100vw);
  }
}

.cvBtn__icon__image {
  height: auto;
  width: 100%;
}

.cvBtn__txt {
  color: #ffffff;
  font-weight: 600;
  text-align: center;
  line-height: 1.5;
}

.cvBtn__txt:before {
  content: '';
  margin-top: calc((1 - 1.5) * .5em);
}

.cvBtn__txt:after {
  margin-bottom: calc((1 - 1.5) * .5em);
}

.cvBtn__txt:before, .cvBtn__txt:after {
  content: '';
  display: block;
  height: 0;
  width: 0;
}

@media print, screen and (min-width: 800px) {
  .cvBtn__txt {
    font-size: 15px;
  }
}

@media screen and (max-width: 800px) {
  .cvBtn__txt {
    font-size: calc(15 / 375 * 100vw);
  }
}

@-webkit-keyframes btnhover-animation-out {
  0% {
    opacity: .9;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  to {
    opacity: 0;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}

@keyframes btnhover-animation-out {
  0% {
    opacity: .9;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  to {
    opacity: 0;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}

@-webkit-keyframes btnhover-animation-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes btnhover-animation-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

.fixedBg {
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  width: 100%;
  z-index: -1;
}

.fixedBg__visual {
  height: 100%;
  width: 100%;
}

.fixedBg .photo {
  height: 100%;
  width: 100%;
}

.fixedBg .photo__pic {
  height: 100%;
  width: 100%;
}

.fixedBg .photo__image {
  height: 100%;
  left: 0;
  -o-object-fit: cover;
     object-fit: cover;
  position: fixed;
  top: 0;
  width: 100%;
  will-change: transform;
}

.generalBtn {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #ffffff;
  border: 1px solid #d3d2cf;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media print, screen and (min-width: 800px) {
  .generalBtn {
    height: 56px;
    width: 300px;
  }
}

@media screen and (max-width: 800px) {
  .generalBtn {
    height: calc(46 / 375 * 100vw);
    width: calc(240 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .generalBtn:hover .generalBtn__txt {
    -webkit-animation: btnhover-animation-out .3s forwards,btnhover-animation-in .4s .4s forwards;
            animation: btnhover-animation-out .3s forwards,btnhover-animation-in .4s .4s forwards;
  }
}

@media (hover: hover) and (pointer: fine) {
  .generalBtn:hover .generalBtn__txt {
    -webkit-animation: btnhover-animation-out .3s forwards,btnhover-animation-in .4s .4s forwards;
            animation: btnhover-animation-out .3s forwards,btnhover-animation-in .4s .4s forwards;
  }
}

.generalBtn__txt {
  line-height: 1.5;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  text-align: center;
}

.generalBtn__txt:before {
  content: '';
  margin-top: calc((1 - 1.5) * .5em);
}

.generalBtn__txt:after {
  margin-bottom: calc((1 - 1.5) * .5em);
}

.generalBtn__txt:before, .generalBtn__txt:after {
  content: '';
  display: block;
  height: 0;
  width: 0;
}

@media print, screen and (min-width: 800px) {
  .generalBtn__txt {
    font-size: 12px;
  }
}

@media screen and (max-width: 800px) {
  .generalBtn__txt {
    font-size: calc(12 / 375 * 100vw);
  }
}

@keyframes btnhover-animation-out {
  0% {
    opacity: .9;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  to {
    opacity: 0;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}

@keyframes btnhover-animation-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

.heading {
  letter-spacing: .08em;
  position: relative;
  line-height: 1.28;
}

.heading:before {
  content: '';
  margin-top: calc((1 - 1.28) * .5em);
}

.heading:after {
  margin-bottom: calc((1 - 1.28) * .5em);
}

.heading:before, .heading:after {
  content: '';
  display: block;
  height: 0;
  width: 0;
}

.heading sup {
  font-size: 10px;
  vertical-align: text-top;
}

.heading .caption {
  display: inline-block;
  letter-spacing: .1em;
}

@media print, screen and (min-width: 800px) {
  .heading + .txt {
    margin-top: 24px;
  }
}

@media screen and (max-width: 800px) {
  .heading + .txt {
    margin-top: calc(24 / 390 * 100vw);
  }
}

.heading + .caption {
  padding-top: 10px;
}

@media print, screen and (min-width: 800px) {
  .heading + .photo {
    margin-top: 56px;
  }
}

@media screen and (max-width: 800px) {
  .heading + .photo {
    margin-top: calc(64 / 390 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .heading--large {
    font-size: 28px;
  }
}

@media screen and (max-width: 800px) {
  .heading--large {
    font-size: calc(28 / 390 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .heading--large + .txt {
    margin-top: 40px;
  }
}

@media screen and (max-width: 800px) {
  .heading--large + .txt {
    margin-top: calc(40 / 390 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .heading--default {
    font-size: 20px;
  }
}

@media screen and (max-width: 800px) {
  .heading--default {
    font-size: calc(20 / 390 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .heading--medium {
    font-size: 18px;
  }
}

@media screen and (max-width: 800px) {
  .heading--medium {
    font-size: calc(16 / 390 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .heading--medium + .txt {
    margin-top: 16px;
  }
}

@media screen and (max-width: 800px) {
  .heading--medium + .txt {
    margin-top: calc(18 / 390 * 100vw);
  }
}

.heading--small {
  font-weight: 600;
}

@media print, screen and (min-width: 800px) {
  .heading--small {
    font-size: 16px;
  }
}

@media screen and (max-width: 800px) {
  .heading--small {
    font-size: calc(14 / 390 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .heading--small + .txt {
    margin-top: 16px;
  }
}

@media screen and (max-width: 800px) {
  .heading--small + .txt {
    margin-top: calc(16 / 390 * 100vw);
  }
}

.heading--center {
  text-align: center;
}

@media print, screen and (min-width: 800px) {
  .heading--center + .txt {
    text-align: center;
  }
}

.parallaxPhoto {
  overflow: hidden;
  position: relative;
}

.parallaxPhoto--no-overflow {
  overflow: visible;
}

.photo {
  position: relative;
}

.photo__capIn, .photo__capOut {
  position: absolute;
}

.photo__capIn {
  bottom: 5px;
  right: 5px;
}

.photo__capOut {
  padding-top: 5px;
  right: 0;
  top: 100%;
}

.photo__pic {
  display: block;
}

.photo--full .photo__image {
  width: 100%;
}

.photo--fit {
  height: 100%;
  max-height: initial;
}

.photo--fit .photo__pic,
.photo--fit .photo__image {
  height: 100%;
  max-height: initial;
  -o-object-fit: cover;
     object-fit: cover;
}

.photo--shadow {
  -webkit-box-shadow: 0 20px 20px rgba(18, 15, 4, 0.1);
          box-shadow: 0 20px 20px rgba(18, 15, 4, 0.1);
}

.sectTtl {
  text-align: center;
}

.sectTtl .ja {
  color: #ffffff;
  display: block;
  font-weight: 600;
  letter-spacing: .047em;
  line-height: 1.5;
}

.sectTtl .ja:before {
  content: '';
  margin-top: calc((1 - 1.5) * .5em);
}

.sectTtl .ja:after {
  margin-bottom: calc((1 - 1.5) * .5em);
}

.sectTtl .ja:before, .sectTtl .ja:after {
  content: '';
  display: block;
  height: 0;
  width: 0;
}

@media print, screen and (min-width: 800px) {
  .sectTtl .ja {
    font-size: 20px;
  }
}

@media screen and (max-width: 800px) {
  .sectTtl .ja {
    font-size: calc(15 / 375 * 100vw);
    letter-spacing: .047rem;
  }
}

.sectTtl .en {
  color: #ffff8a;
  display: block;
  font-family: "adobe-garamond-pro", serif;
  font-weight: 400;
  line-height: 1.25;
}

.sectTtl .en:before {
  content: '';
  margin-top: calc((1 - 1.25) * .5em);
}

.sectTtl .en:after {
  margin-bottom: calc((1 - 1.25) * .5em);
}

.sectTtl .en:before, .sectTtl .en:after {
  content: '';
  display: block;
  height: 0;
  width: 0;
}

@media print, screen and (min-width: 800px) {
  .sectTtl .en {
    font-size: 56px;
    letter-spacing: .005em;
    margin-top: 9px;
  }
}

@media screen and (max-width: 800px) {
  .sectTtl .en {
    font-size: calc(44 / 375 * 100vw);
    margin-top: calc(9 / 375 * 100vw);
  }
}

.txt {
  letter-spacing: .01em;
  line-height: 1.75;
}

.txt:before {
  content: '';
  margin-top: calc((1 - 1.75) * .5em);
}

.txt:after {
  margin-bottom: calc((1 - 1.75) * .5em);
}

.txt:before, .txt:after {
  content: '';
  display: block;
  height: 0;
  width: 0;
}

@media print, screen and (min-width: 800px) {
  .txt {
    font-size: 16px;
  }
}

@media screen and (max-width: 800px) {
  .txt {
    font-size: calc(13 / 375 * 100vw);
  }
}

.conceptArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  width: 100%;
}

.conceptArea.is-fixed .conceptArea__sticky {
  position: fixed;
}

.conceptArea.is-end .conceptArea__sticky {
  position: fixed;
}

.conceptArea.is-end .conceptArea__head {
  position: fixed;
}

.conceptArea.is-hidden {
  opacity: 0;
  -webkit-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.conceptArea:before {
  background-color: #ffff8a;
  bottom: 100%;
  content: '';
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: -1;
}

@media print, screen and (min-width: 800px) {
  .conceptArea:before {
    border-radius: 0 calc(100 / 1440 * 100vw) 0 0;
    height: calc(120 / 1440 * 100vw);
    width: calc(290 / 1440 * 100vw);
  }
}

@media screen and (max-width: 800px) {
  .conceptArea:before {
    border-radius: 0 calc(80 / 375 * 100vw) 0 0;
    height: calc(36 / 375 * 100vh);
    width: calc(100 / 375 * 100vw);
  }
}

.conceptArea__head {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  z-index: 3;
}

.conceptArea__sticky {
  --bgOpacity: 0;
  -webkit-filter: blur(calc(var(--bgOpacity) * 20px));
          filter: blur(calc(var(--bgOpacity) * 20px));
  width: 100%;
}

.conceptArea__sticky:after {
  background-color: #000000;
  content: '';
  display: block;
  height: 100%;
  left: 0;
  opacity: var(--bgOpacity);
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

.conceptArea__inner {
  width: 100%;
}

@media print, screen and (min-width: 800px) {
  .conceptArea__inner {
    padding-bottom: calc(227 / 1440 * 100vw);
  }
}

@media screen and (max-width: 800px) {
  .conceptArea__inner {
    padding-bottom: calc(120 / 375 * 100vw);
  }
}

.conceptArea__wrapper {
  position: relative;
  width: 100%;
}

.conceptArea__spacer {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

@media print, screen and (min-width: 800px) {
  .conceptArea__spacer {
    width: 1070px;
  }
}

@media screen and (max-width: 800px) {
  .conceptArea__spacer {
    width: calc(325 / 375 * 100vw);
  }
}

.conceptArea__num {
  font-family: "adobe-garamond-pro", serif;
  padding-top: 50svh;
  position: sticky;
  top: 0;
}

.conceptArea__num .will-change {
  display: inline-block;
}

.conceptArea__num .inner {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  white-space: nowrap;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

@media print, screen and (min-width: 800px) {
  .conceptArea__num .inner {
    font-size: 12px;
    gap: 7px;
    letter-spacing: .1em;
    margin-left: 89px;
  }
}

@media screen and (max-width: 800px) {
  .conceptArea__num .inner {
    font-size: calc(9 / 375 * 100vw);
    gap: calc(7 / 375 * 100vw);
    letter-spacing: .1rem;
    margin-left: calc(20 / 375 * 100vw);
  }
}

.conceptArea__num .line {
  background-color: #d3d2cf;
  width: 1px;
}

@media print, screen and (min-width: 800px) {
  .conceptArea__num .line {
    height: 46px;
  }
}

@media screen and (max-width: 800px) {
  .conceptArea__num .line {
    height: calc(38 / 375 * 100vw);
  }
}

.conceptArea__item {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 100%;
}

@media print, screen and (min-width: 800px) {
  .conceptArea__item + .conceptArea__item {
    margin-top: calc(225 / 1440 * 100vw);
  }
}

@media screen and (max-width: 800px) {
  .conceptArea__item + .conceptArea__item {
    margin-top: calc(120 / 375 * 100vw);
  }
}

.conceptArea__bg {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  will-change: width, transform;
  z-index: -1;
}

.conceptArea__part {
  background-color: #ffff8a;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  position: absolute;
  will-change: opacity;
}

.conceptArea__part--01 {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  left: 0;
  top: 0;
}

@media print, screen and (min-width: 800px) {
  .conceptArea__part--01 {
    height: calc(960 / 1440 * 100vw);
    width: calc(290 / 1440 * 100vw);
  }
}

@media screen and (max-width: 800px) {
  .conceptArea__part--01 {
    height: calc(800 / 375 * 100vw);
    width: calc(100 / 375 * 100vw);
  }
}

.conceptArea__part--02 {
  background-color: #ffff8a;
}

@media print, screen and (min-width: 800px) {
  .conceptArea__part--02 {
    border-radius: calc(80 / 1440 * 100vw) calc(4 / 1440 * 100vw) calc(4 / 1440 * 100vw) calc(4 / 1440 * 100vw);
    height: calc(220 / 1440 * 100vw);
    right: 0;
    top: calc(835 / 1440 * 100vw);
    width: calc(220 / 1440 * 100vw);
  }
}

@media screen and (max-width: 800px) {
  .conceptArea__part--02 {
    border-radius: calc(40 / 375 * 100vw) calc(4 / 375 * 100vw) calc(4 / 375 * 100vw) calc(4 / 375 * 100vw);
    height: calc(120 / 375 * 100vw);
    right: 0;
    top: calc(448 / 375 * 100vw);
    width: calc(44 / 375 * 100vw);
  }
}

.conceptArea__part--03 {
  background-color: #ffff8a;
}

@media print, screen and (min-width: 800px) {
  .conceptArea__part--03 {
    border-radius: calc(4 / 1440 * 100vw) calc(60 / 1440 * 100vw) calc(4 / 1440 * 100vw) calc(4 / 1440 * 100vw);
    height: calc(160 / 1440 * 100vw);
    left: 0;
    top: calc(1825 / 1440 * 100vw);
    width: calc(160 / 1440 * 100vw);
  }
}

@media screen and (max-width: 800px) {
  .conceptArea__part--03 {
    border-radius: calc(0 / 375 * 100vw) calc(40 / 375 * 100vw) calc(0 / 375 * 100vw) calc(0 / 375 * 100vw);
    height: calc(120 / 375 * 100vw);
    left: 0;
    top: calc(1001 / 375 * 100vw);
    width: calc(80 / 375 * 100vw);
  }
}

.conceptArea__part--04 {
  background-color: #f4f4f5;
  right: 0;
}

@media print, screen and (min-width: 800px) {
  .conceptArea__part--04 {
    border-radius: calc(60 / 1440 * 100vw) calc(4 / 1440 * 100vw) calc(4 / 1440 * 100vw) calc(4 / 1440 * 100vw);
    height: calc(160 / 1440 * 100vw);
    top: calc(1629 / 1440 * 100vw);
    width: calc(160 / 1440 * 100vw);
  }
}

@media screen and (max-width: 800px) {
  .conceptArea__part--04 {
    border-radius: calc(4 / 375 * 100vw) calc(4 / 375 * 100vw) calc(4 / 375 * 100vw) calc(80 / 375 * 100vw);
    height: calc(180 / 375 * 100vw);
    top: calc(684 / 375 * 100vw);
    width: calc(101 / 375 * 100vw);
  }
}

.conceptArea__part--05 {
  background-color: #f4f4f5;
}

@media print, screen and (min-width: 800px) {
  .conceptArea__part--05 {
    border-radius: calc(4 / 1440 * 100vw) calc(80 / 1440 * 100vw) calc(4 / 1440 * 100vw) calc(4 / 1440 * 100vw);
    bottom: calc(-61 / 1440 * 100vw);
    height: calc(330 / 1440 * 100vw);
    left: 0;
    width: calc(330 / 1440 * 100vw);
  }
}

@media screen and (max-width: 800px) {
  .conceptArea__part--05 {
    border-radius: 0 calc(40 / 375 * 100vw) 0 0;
    height: calc(90 / 375 * 100vw);
    right: 0;
    top: calc(1110 / 375 * 100vw);
    width: calc(90 / 375 * 100vw);
  }
}

.conceptArea__part--06 {
  background-color: #ffff8a;
  bottom: 0;
  right: 0;
}

@media print, screen and (min-width: 800px) {
  .conceptArea__part--06 {
    bottom: calc(-100 / 1440 * 100vw);
    height: calc(997 / 1440 * 100vw);
    width: calc(290 / 1440 * 100vw);
  }
}

@media screen and (max-width: 800px) {
  .conceptArea__part--06 {
    bottom: calc(-100 / 375 * 100vw);
    height: calc(429 / 375 * 100vw);
    width: calc(100 / 375 * 100vw);
  }
}

.conceptCard {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

@media print, screen and (min-width: 800px) {
  .conceptCard {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

.conceptCard__visual {
  overflow: hidden;
}

@media print, screen and (min-width: 800px) {
  .conceptCard__visual {
    height: calc(735 / 1440 * 100vw);
    width: calc(980 / 1440 * 100vw);
  }
}

@media screen and (max-width: 800px) {
  .conceptCard__visual {
    height: calc(343 / 375 * 100vw);
    width: calc(343 / 375 * 100vw);
  }
}

.conceptCard__visual .photo {
  height: 100%;
  opacity: 0;
  overflow: hidden;
  -webkit-transform: scale(1.08);
          transform: scale(1.08);
  -webkit-transition: opacity 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s, -webkit-transform 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
  transition: opacity 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s, -webkit-transform 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
  transition: opacity 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s, transform 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
  transition: opacity 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s, transform 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s, -webkit-transform 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
  width: 100%;
  will-change: opacity, transform;
}

.conceptCard__visual .photo__pic {
  height: 100%;
  width: 100%;
}

.conceptCard__visual .photo__image {
  height: auto;
  max-height: unset;
  width: 100%;
  will-change: transform;
}

.conceptCard__visual.sai-animate .photo {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}

.conceptCard__txt {
  --start-delay: 0s;
  z-index: 2;
}

.conceptCard__txt .photo {
  -webkit-filter: blur(200px);
          filter: blur(200px);
  opacity: 0;
  position: relative;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  -webkit-transition: opacity 2s cubic-bezier(0.215, 0.61, 0.355, 1) var(--start-delay), -webkit-transform 2s cubic-bezier(0.215, 0.61, 0.355, 1) var(--start-delay);
  transition: opacity 2s cubic-bezier(0.215, 0.61, 0.355, 1) var(--start-delay), -webkit-transform 2s cubic-bezier(0.215, 0.61, 0.355, 1) var(--start-delay);
  transition: opacity 2s cubic-bezier(0.215, 0.61, 0.355, 1) var(--start-delay), transform 2s cubic-bezier(0.215, 0.61, 0.355, 1) var(--start-delay);
  transition: opacity 2s cubic-bezier(0.215, 0.61, 0.355, 1) var(--start-delay), transform 2s cubic-bezier(0.215, 0.61, 0.355, 1) var(--start-delay), -webkit-transform 2s cubic-bezier(0.215, 0.61, 0.355, 1) var(--start-delay);
  width: 100%;
  will-change: opacity, transform, filter;
}

.conceptCard__txt .photo__image {
  width: 100%;
  will-change: transform;
}

.conceptCard__txt.sai-animate .photo {
  -webkit-filter: blur(0);
          filter: blur(0);
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.conceptCard--01 {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  margin-left: auto;
}

@media print, screen and (min-width: 800px) {
  .conceptCard--01 .conceptCard__cont {
    margin-right: calc(-196 / 1440 * 100vw);
    margin-top: calc(297 / 1440 * 100vw);
  }
}

@media screen and (max-width: 800px) {
  .conceptCard--01 .conceptCard__cont {
    margin-left: calc(38 / 375 * 100vw);
    margin-top: calc(-57 / 715 * 100%);
  }
}

@media print, screen and (min-width: 800px) {
  .conceptCard--01 .conceptCard__txt--1 {
    width: calc(184 / 1440 * 100vw);
  }
}

@media screen and (max-width: 800px) {
  .conceptCard--01 .conceptCard__txt--1 {
    width: calc(136 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .conceptCard--01 .conceptCard__txt--2 {
    margin-top: calc(20 / 1440 * 100vw);
    width: calc(181 / 1440 * 100vw);
  }
}

@media screen and (max-width: 800px) {
  .conceptCard--01 .conceptCard__txt--2 {
    margin-top: calc(15 / 375 * 100vw);
    width: calc(134 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .conceptCard--01 .conceptCard__txt--3 {
    margin-top: calc(15 / 1440 * 100vw);
    width: calc(253 / 1440 * 100vw);
  }
}

@media screen and (max-width: 800px) {
  .conceptCard--01 .conceptCard__txt--3 {
    margin-top: calc(8 / 375 * 100vw);
    width: calc(187 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .conceptCard--01 .conceptCard__txt--4 {
    margin-top: calc(50 / 1440 * 100vw);
    width: calc(315 / 1440 * 100vw);
  }
}

@media screen and (max-width: 800px) {
  .conceptCard--01 .conceptCard__txt--4 {
    margin-top: calc(32 / 375 * 100vw);
    width: calc(236 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .conceptCard--02 .conceptCard__cont {
    margin-left: calc(-174 / 1440 * 100vw);
    margin-top: calc(343 / 1440 * 100vw);
  }
}

@media screen and (max-width: 800px) {
  .conceptCard--02 .conceptCard__cont {
    margin-left: calc(70 / 375 * 100vw);
    margin-top: calc(-91 / 715 * 100%);
  }
}

@media print, screen and (min-width: 800px) {
  .conceptCard--02 .conceptCard__txt--1 {
    width: calc(219 / 1440 * 100vw);
  }
}

@media screen and (max-width: 800px) {
  .conceptCard--02 .conceptCard__txt--1 {
    width: calc(161 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .conceptCard--02 .conceptCard__txt--2 {
    margin-left: calc(100 / 1440 * 100vw);
    margin-top: calc(20 / 1440 * 100vw);
    width: calc(168 / 1440 * 100vw);
  }
}

@media screen and (max-width: 800px) {
  .conceptCard--02 .conceptCard__txt--2 {
    margin-left: calc(70 / 375 * 100vw);
    margin-top: calc(20 / 375 * 100vw);
    width: calc(126 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .conceptCard--02 .conceptCard__txt--3 {
    margin-left: calc(100 / 1440 * 100vw);
    margin-top: calc(34 / 1440 * 100vw);
    width: calc(254 / 1440 * 100vw);
  }
}

@media screen and (max-width: 800px) {
  .conceptCard--02 .conceptCard__txt--3 {
    margin-left: calc(70 / 375 * 100vw);
    margin-top: calc(32 / 375 * 100vw);
    width: calc(187 / 375 * 100vw);
  }
}

.conceptCard--03 {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  margin-left: auto;
}

@media print, screen and (min-width: 800px) {
  .conceptCard--03 .conceptCard__cont {
    margin-right: calc(-175 / 1440 * 100vw);
    margin-top: calc(290 / 1440 * 100vw);
  }
}

@media screen and (max-width: 800px) {
  .conceptCard--03 .conceptCard__cont {
    margin-left: calc(38 / 375 * 100vw);
    margin-top: calc(-50 / 715 * 100%);
  }
}

@media print, screen and (min-width: 800px) {
  .conceptCard--03 .conceptCard__txt--1 {
    width: calc(213 / 1440 * 100vw);
  }
}

@media screen and (max-width: 800px) {
  .conceptCard--03 .conceptCard__txt--1 {
    width: calc(157 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .conceptCard--03 .conceptCard__txt--2 {
    margin-left: calc(61 / 1440 * 100vw);
    margin-top: calc(20 / 1440 * 100vw);
    width: calc(168 / 1440 * 100vw);
  }
}

@media screen and (max-width: 800px) {
  .conceptCard--03 .conceptCard__txt--2 {
    margin-left: calc(46 / 375 * 100vw);
    margin-top: calc(20 / 375 * 100vw);
    width: calc(126 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .conceptCard--03 .conceptCard__txt--3 {
    margin-left: calc(61 / 1440 * 100vw);
    margin-top: calc(34 / 1440 * 100vw);
    width: calc(274 / 1440 * 100vw);
  }
}

@media screen and (max-width: 800px) {
  .conceptCard--03 .conceptCard__txt--3 {
    margin-left: calc(46 / 375 * 100vw);
    margin-top: calc(32 / 375 * 100vw);
    width: calc(202 / 375 * 100vw);
  }
}

.foundationSect__head {
  -webkit-transition: opacity 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s, -webkit-transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
  transition: opacity 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s, -webkit-transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
  transition: opacity 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s, transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
  transition: opacity 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s, transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s, -webkit-transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}

.foundationSect__head .heading {
  font-weight: 700;
  line-height: 1.5;
}

.foundationSect__head .heading:before {
  content: '';
  margin-top: calc((1 - 1.5) * .5em);
}

.foundationSect__head .heading:after {
  margin-bottom: calc((1 - 1.5) * .5em);
}

.foundationSect__head .heading:before, .foundationSect__head .heading:after {
  content: '';
  display: block;
  height: 0;
  width: 0;
}

@media print, screen and (min-width: 800px) {
  .foundationSect__head .heading {
    font-size: 22px;
    letter-spacing: .069em;
  }
}

@media screen and (max-width: 800px) {
  .foundationSect__head .heading {
    font-size: calc(17 / 375 * 100vw);
    letter-spacing: .053rem;
  }
}

@media print, screen and (min-width: 800px) {
  .foundationSect__head + .foundationSect__cont {
    margin-top: 40px;
  }
}

@media screen and (max-width: 800px) {
  .foundationSect__head + .foundationSect__cont {
    margin-top: calc(36 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .foundationSect__inner {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 20px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

@media screen and (max-width: 800px) {
  .foundationSect__txt {
    text-align: center;
  }
}

.foundationSect__txt .foundationInfo {
  font-weight: 700;
}

.foundationSect__txt .foundationInfo__ttl {
  display: block;
  line-height: 1.5;
}

.foundationSect__txt .foundationInfo__ttl:before {
  content: '';
  margin-top: calc((1 - 1.5) * .5em);
}

.foundationSect__txt .foundationInfo__ttl:after {
  margin-bottom: calc((1 - 1.5) * .5em);
}

.foundationSect__txt .foundationInfo__ttl:before, .foundationSect__txt .foundationInfo__ttl:after {
  content: '';
  display: block;
  height: 0;
  width: 0;
}

@media print, screen and (min-width: 800px) {
  .foundationSect__txt .foundationInfo__ttl {
    font-size: 20px;
    letter-spacing: .063em;
  }
}

@media screen and (max-width: 800px) {
  .foundationSect__txt .foundationInfo__ttl {
    font-size: calc(17 / 375 * 100vw);
    letter-spacing: .063rem;
  }
}

.foundationSect__txt .foundationInfo .price {
  display: block;
  line-height: 1.5;
}

.foundationSect__txt .foundationInfo .price:before {
  content: '';
  margin-top: calc((1 - 1.5) * .5em);
}

.foundationSect__txt .foundationInfo .price:after {
  margin-bottom: calc((1 - 1.5) * .5em);
}

.foundationSect__txt .foundationInfo .price:before, .foundationSect__txt .foundationInfo .price:after {
  content: '';
  display: block;
  height: 0;
  width: 0;
}

@media print, screen and (min-width: 800px) {
  .foundationSect__txt .foundationInfo .price {
    font-size: 18px;
    letter-spacing: .056em;
    margin-top: 9px;
  }
}

@media screen and (max-width: 800px) {
  .foundationSect__txt .foundationInfo .price {
    font-size: calc(16 / 375 * 100vw);
    letter-spacing: .056rem;
    margin-top: calc(8 / 375 * 100vw);
  }
}

.foundationSect__txt .foundationInfo .price .num {
  display: inline-block;
  font-family: "Inter", sans-serif;
  line-height: 1.5;
}

.foundationSect__txt .foundationInfo .price .num:before {
  content: '';
  margin-top: calc((1 - 1.5) * .5em);
}

.foundationSect__txt .foundationInfo .price .num:after {
  margin-bottom: calc((1 - 1.5) * .5em);
}

.foundationSect__txt .foundationInfo .price .num:before, .foundationSect__txt .foundationInfo .price .num:after {
  content: '';
  display: block;
  height: 0;
  width: 0;
}

@media print, screen and (min-width: 800px) {
  .foundationSect__txt .foundationInfo .price .num {
    font-size: 20px;
    letter-spacing: .063em;
  }
}

@media screen and (max-width: 800px) {
  .foundationSect__txt .foundationInfo .price .num {
    font-size: calc(18 / 375 * 100vw);
    letter-spacing: .063rem;
  }
}

@media print, screen and (min-width: 800px) {
  .foundationSect__txt .foundationInfo .price .small {
    font-size: 14px;
    letter-spacing: .044em;
  }
}

@media screen and (max-width: 800px) {
  .foundationSect__txt .foundationInfo .price .small {
    font-size: calc(12 / 375 * 100vw);
    letter-spacing: .044rem;
  }
}

.foundationSect__txt .foundationInfo .color {
  display: block;
  line-height: 1.5;
}

.foundationSect__txt .foundationInfo .color:before {
  content: '';
  margin-top: calc((1 - 1.5) * .5em);
}

.foundationSect__txt .foundationInfo .color:after {
  margin-bottom: calc((1 - 1.5) * .5em);
}

.foundationSect__txt .foundationInfo .color:before, .foundationSect__txt .foundationInfo .color:after {
  content: '';
  display: block;
  height: 0;
  width: 0;
}

@media print, screen and (min-width: 800px) {
  .foundationSect__txt .foundationInfo .color {
    font-size: 16px;
    letter-spacing: .044em;
    margin-top: 9px;
  }
}

@media screen and (max-width: 800px) {
  .foundationSect__txt .foundationInfo .color {
    font-size: calc(14 / 375 * 100vw);
    letter-spacing: .044rem;
    margin-top: calc(8 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .foundationSect__txt .foundationInfo + .txt {
    margin-top: 20px;
  }
}

@media screen and (max-width: 800px) {
  .foundationSect__txt .foundationInfo + .txt {
    margin-top: calc(20 / 375 * 100vw);
  }
}

.foundationSect__txt .txt {
  font-weight: 400;
  line-height: 1.75;
}

.foundationSect__txt .txt:before {
  content: '';
  margin-top: calc((1 - 1.75) * .5em);
}

.foundationSect__txt .txt:after {
  margin-bottom: calc((1 - 1.75) * .5em);
}

.foundationSect__txt .txt:before, .foundationSect__txt .txt:after {
  content: '';
  display: block;
  height: 0;
  width: 0;
}

@media print, screen and (min-width: 800px) {
  .foundationSect__txt .txt {
    letter-spacing: .05em;
  }
}

@media screen and (max-width: 800px) {
  .foundationSect__txt .txt {
    letter-spacing: .041rem;
  }
}

.foundationSect__visual {
  position: relative;
}

@media print, screen and (min-width: 800px) {
  .foundationSect__visual {
    width: 452px;
  }
}

@media screen and (max-width: 800px) {
  .foundationSect__visual {
    margin: 0 auto;
    width: calc(311 / 375 * 100vw);
  }
}

@media screen and (max-width: 800px) {
  .foundationSect__visual + .foundationSect__txt {
    margin-top: calc(24 / 375 * 100vw);
  }
}

.foundationSect__visual .photo {
  opacity: 0;
  -webkit-transform: scale(1.05) translateY(20px);
          transform: scale(1.05) translateY(20px);
  -webkit-transition: opacity 2s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 2s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 2s cubic-bezier(0.215, 0.61, 0.355, 1), transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 2s cubic-bezier(0.215, 0.61, 0.355, 1), transform 2s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
  will-change: opacity, transform;
}

.foundationSect__visual.sai-animate .photo {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}

.foundationSect__top {
  z-index: 2;
}

.foundationSect__bottom {
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}

.foundationSect__cont .cvBtn {
  margin: 0 auto;
}

@media print, screen and (min-width: 800px) {
  .foundationSect__cont .cvBtn {
    margin-top: 40px;
  }
}

@media screen and (max-width: 800px) {
  .foundationSect__cont .cvBtn {
    margin-top: calc(40 / 375 * 100vw);
  }
}

@media screen and (max-width: 800px) {
  .historySect {
    margin: 0 auto;
    width: calc(264 / 375 * 100vw);
  }
}

.historySect__head {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

@media print, screen and (min-width: 800px) {
  .historySect__head {
    gap: 20px;
  }
}

@media screen and (max-width: 800px) {
  .historySect__head {
    gap: calc(20 / 375 * 100vw);
  }
}

.historySect__head:before, .historySect__head:after {
  background-color: #727171;
  content: '';
  display: block;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  height: 1px;
  opacity: .4;
  width: 100%;
}

.historySect__head .en {
  font-family: "adobe-garamond-pro", serif;
  white-space: nowrap;
}

@media print, screen and (min-width: 800px) {
  .historySect__head .en {
    font-size: 16px;
  }
}

@media screen and (max-width: 800px) {
  .historySect__head .en {
    font-size: calc(16 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .historySect__head + .historySect__cont {
    margin-top: 20px;
  }
}

@media screen and (max-width: 800px) {
  .historySect__head + .historySect__cont {
    margin-top: calc(20 / 375 * 100vw);
  }
}

.historySect__cont {
  position: relative;
}

.historySect__cont:before {
  background-color: #727171;
  bottom: 0;
  content: '';
  display: block;
  height: 1px;
  left: 0;
  opacity: .4;
  position: absolute;
  width: 100%;
}

@media print, screen and (min-width: 800px) {
  .historySect__cont {
    padding-bottom: 20px;
  }
}

@media screen and (max-width: 800px) {
  .historySect__cont {
    padding-bottom: calc(20 / 375 * 100vw);
  }
}

.historySect__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media print, screen and (min-width: 800px) {
  .historySect__item {
    gap: 20px;
  }
}

@media screen and (max-width: 800px) {
  .historySect__item {
    gap: calc(20 / 375 * 100vw);
  }
}

.historySect__item .ttl {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  white-space: nowrap;
  line-height: 1.5;
}

.historySect__item .ttl:before {
  content: '';
  margin-top: calc((1 - 1.5) * .5em);
}

.historySect__item .ttl:after {
  margin-bottom: calc((1 - 1.5) * .5em);
}

.historySect__item .ttl:before, .historySect__item .ttl:after {
  content: '';
  display: block;
  height: 0;
  width: 0;
}

@media print, screen and (min-width: 800px) {
  .historySect__item .ttl {
    font-size: 12px;
  }
}

@media screen and (max-width: 800px) {
  .historySect__item .ttl {
    font-size: calc(10 / 375 * 100vw);
    font-weight: 600;
  }
}

.historySect__item .txt {
  line-height: 1.75;
}

.historySect__item .txt:before {
  content: '';
  margin-top: calc((1 - 1.75) * .5em);
}

.historySect__item .txt:after {
  margin-bottom: calc((1 - 1.75) * .5em);
}

.historySect__item .txt:before, .historySect__item .txt:after {
  content: '';
  display: block;
  height: 0;
  width: 0;
}

@media print, screen and (min-width: 800px) {
  .historySect__item .txt {
    font-size: 12px;
  }
}

@media screen and (max-width: 800px) {
  .historySect__item .txt {
    font-size: calc(11 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .historySect__item + .historySect__item {
    margin-top: 20px;
  }
}

@media screen and (max-width: 800px) {
  .historySect__item + .historySect__item {
    margin-top: calc(20 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .lastSect {
    margin-left: calc(228 / 1440 * 100vw);
    width: 300px;
  }
}

.lastSect__head {
  text-align: center;
}

.lastSect__head .heading {
  font-weight: 700;
}

@media print, screen and (min-width: 800px) {
  .lastSect__head .heading {
    font-size: 22px;
  }
}

@media screen and (max-width: 800px) {
  .lastSect__head .heading {
    font-size: calc(17 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .lastSect__head .heading + .txt {
    margin-top: 60px;
  }
}

@media screen and (max-width: 800px) {
  .lastSect__head .heading + .txt {
    margin-top: calc(353 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .lastSect__head + .lastSect__cont {
    margin-top: 60px;
  }
}

@media screen and (max-width: 800px) {
  .lastSect__head + .lastSect__cont {
    margin-top: calc(40 / 375 * 100vw);
  }
}

.lastSect__head .txt {
  line-height: 1.75;
}

.lastSect__head .txt:before {
  content: '';
  margin-top: calc((1 - 1.75) * .5em);
}

.lastSect__head .txt:after {
  margin-bottom: calc((1 - 1.75) * .5em);
}

.lastSect__head .txt:before, .lastSect__head .txt:after {
  content: '';
  display: block;
  height: 0;
  width: 0;
}

@media print, screen and (min-width: 800px) {
  .lastSect__head .txt {
    font-size: 16px;
    letter-spacing: .05em;
  }
}

@media screen and (max-width: 800px) {
  .lastSect__head .txt {
    font-size: calc(14 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .lastSect__cont .historySect + .lastSect__btn {
    margin-top: 60px;
  }
}

@media screen and (max-width: 800px) {
  .lastSect__cont .historySect + .lastSect__btn {
    margin-top: calc(60 / 375 * 100vw);
  }
}

.lastSect__btn {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

@media print, screen and (min-width: 800px) {
  .lastSect__btn {
    gap: 19px;
  }
}

@media screen and (max-width: 800px) {
  .lastSect__btn {
    gap: calc(20 / 375 * 100vw);
  }
}

.mainVisual {
  position: relative;
  z-index: 1;
}

@media print, screen and (min-width: 800px) {
  .mainVisual {
    padding-top: 10px;
  }
}

@media screen and (max-width: 800px) {
  .mainVisual {
    min-height: 100svh;
    padding-top: calc(20 / 375 * 100vw);
  }
}

.mainVisual.sai-animate .mainVisual__visual .photo {
  -webkit-filter: brightness(1);
          filter: brightness(1);
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}

.mainVisual.sai-animate .mainVisual__make .photo {
  -webkit-mask-position: 50% 50%;
          mask-position: 50% 50%;
  -webkit-transition: 1s cubic-bezier(0.43, 0.02, 0.05, 1) 0s;
  transition: 1s cubic-bezier(0.43, 0.02, 0.05, 1) 0s;
  -webkit-transition: -webkit-mask-position 2.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
  transition: -webkit-mask-position 2.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
  transition: mask-position 2.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
  transition: mask-position 2.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s, -webkit-mask-position 2.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
}

.mainVisual.sai-animate .mainVisual__txt {
  -webkit-mask-position: 100% 50%;
          mask-position: 100% 50%;
  -webkit-transition: 1s cubic-bezier(0.43, 0.02, 0.05, 1) 0s;
  transition: 1s cubic-bezier(0.43, 0.02, 0.05, 1) 0s;
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: opacity 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s, -webkit-transform 1.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s;
  transition: opacity 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s, -webkit-transform 1.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s;
  transition: opacity 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s, transform 1.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s;
  transition: opacity 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s, transform 1.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s, -webkit-transform 1.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s;
}

.mainVisual:after {
  background-color: #ffff8a;
  content: '';
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

@media print, screen and (min-width: 800px) {
  .mainVisual:after {
    border-radius: 0 0 0 calc(100 / 1440 * 100vw);
    width: calc(200 / 1440 * 100vw);
  }
}

@media screen and (max-width: 800px) {
  .mainVisual:after {
    border-radius: 0 0 0 calc(80 / 375 * 100vw);
    width: calc(137 / 375 * 100vw);
  }
}

.mainVisual__inner {
  position: relative;
}

@media print, screen and (min-width: 800px) {
  .mainVisual__inner {
    margin-top: 20px;
  }
}

@media screen and (max-width: 800px) {
  .mainVisual__inner {
    margin-top: calc(24 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .mainVisual__icon {
    display: block;
    margin: 0 auto;
    width: 180px;
  }
}

@media screen and (max-width: 800px) {
  .mainVisual__icon {
    margin-left: calc(20 / 375 * 100vw);
    width: calc(148 / 375 * 100vw);
  }
}

.mainVisual__icon__image {
  height: auto;
  width: 100%;
}

.mainVisual__make {
  position: relative;
  z-index: 1;
}

@media print, screen and (min-width: 800px) {
  .mainVisual__make {
    margin-left: calc(139 / 1440 * 100vw);
    margin-top: calc(-386 / 1440 * 100vw);
    width: calc(693 / 1440 * 100vw);
  }
}

@media screen and (max-width: 800px) {
  .mainVisual__make {
    margin-left: auto;
    margin-top: calc(-80 / 375 * 100vw);
    width: calc(368 / 375 * 100vw);
  }
}

.mainVisual__make .photo {
  width: 100%;
  -webkit-mask-image: -webkit-gradient(linear, left top, right top, color-stop(25%, rgba(255, 255, 255, 0)), color-stop(33%, white), color-stop(66%, white), color-stop(75%, rgba(255, 255, 255, 0)));
  -webkit-mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 25%, white 33%, white 66%, rgba(255, 255, 255, 0) 75%);
          mask-image: -webkit-gradient(linear, left top, right top, color-stop(25%, rgba(255, 255, 255, 0)), color-stop(33%, white), color-stop(66%, white), color-stop(75%, rgba(255, 255, 255, 0)));
          mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 25%, white 33%, white 66%, rgba(255, 255, 255, 0) 75%);
  -webkit-mask-position: 100% 50%;
          mask-position: 100% 50%;
  -webkit-mask-size: 400% 100%;
          mask-size: 400% 100%;
}

.mainVisual__make .photo__image {
  width: 100%;
}

.mainVisual__txt {
  opacity: 0;
  position: absolute;
  -webkit-transform: translateY(10%);
          transform: translateY(10%);
  z-index: 1;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(25%, rgba(255, 255, 255, 0)), color-stop(33%, white), color-stop(66%, white), color-stop(75%, rgba(255, 255, 255, 0)));
  -webkit-mask-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 25%, white 33%, white 66%, rgba(255, 255, 255, 0) 75%);
          mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(25%, rgba(255, 255, 255, 0)), color-stop(33%, white), color-stop(66%, white), color-stop(75%, rgba(255, 255, 255, 0)));
          mask-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 25%, white 33%, white 66%, rgba(255, 255, 255, 0) 75%);
  -webkit-mask-position: 100% 100%;
          mask-position: 100% 100%;
  -webkit-mask-size: 100% 400%;
          mask-size: 100% 400%;
}

@media print, screen and (min-width: 800px) {
  .mainVisual__txt {
    bottom: calc(224 / 1440 * 100vw);
    left: calc(595 / 1440 * 100vw);
    width: calc(362 / 1440 * 100vw);
  }
}

@media screen and (max-width: 800px) {
  .mainVisual__txt {
    bottom: calc(279 / 375 * 100vw);
    left: calc(124 / 375 * 100vw);
    width: calc(181 / 375 * 100vw);
  }
}

.mainVisual__txt .photo {
  width: 100%;
}

.mainVisual__txt .photo__image {
  width: 100%;
}

.mainVisual__visual {
  overflow: hidden;
}

@media print, screen and (min-width: 800px) {
  .mainVisual__visual {
    width: calc(1270 / 1440 * 100vw);
  }
}

@media screen and (max-width: 800px) {
  .mainVisual__visual {
    width: calc(355 / 375 * 100vw);
  }
}

.mainVisual__visual .photo {
  -webkit-filter: brightness(1.3);
          filter: brightness(1.3);
  opacity: 0;
  -webkit-transform: scale(1.08);
          transform: scale(1.08);
  -webkit-transition: opacity 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s, -webkit-transform 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s, -webkit-filter 2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
  transition: opacity 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s, -webkit-transform 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s, -webkit-filter 2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
  transition: transform 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s, filter 2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s, opacity 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s;
  transition: transform 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s, filter 2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s, opacity 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s, -webkit-transform 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s, -webkit-filter 2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
  width: 100%;
  will-change: transform, filter;
}

.mainVisual__visual .photo__image {
  width: 100%;
}

.mainVisual__scroll {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 3;
}

@media print, screen and (min-width: 800px) {
  .mainVisual__scroll {
    max-height: calc(788 / 1440 * 100vw);
    width: calc(200 / 1440 * 100vw);
  }
}

@media screen and (max-width: 800px) {
  .mainVisual__scroll {
    max-height: 100vh;
    width: calc(137 / 375 * 100vw);
  }
}

.pointCard {
  --opacity: 0;
  --calcOpacity: calc(max(var(--opacity) - .5, 0) * 2);
  border-radius: 0 0 0 0;
  -webkit-clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
          clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
  overflow: hidden;
  position: relative;
  -webkit-transition: border-radius 1.2s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-clip-path 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: border-radius 1.2s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-clip-path 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: clip-path 1.2s cubic-bezier(0.215, 0.61, 0.355, 1), border-radius 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: clip-path 1.2s cubic-bezier(0.215, 0.61, 0.355, 1), border-radius 1.2s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-clip-path 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  will-change: clip-path, border-radius;
}

@media print, screen and (min-width: 800px) {
  .pointCard {
    width: 426px;
  }
}

@media screen and (max-width: 800px) {
  .pointCard {
    margin: 0 auto;
    width: calc(355 / 375 * 100vw);
  }
}

.pointCard.sai-animate {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

@media print, screen and (min-width: 800px) {
  .pointCard.sai-animate {
    border-radius: 4px 60px 4px 60px;
  }
}

@media screen and (max-width: 800px) {
  .pointCard.sai-animate {
    border-radius: calc(40 / 375 * 100vw) calc(4 / 375 * 100vw) calc(40 / 375 * 100vw) calc(4 / 375 * 100vw);
  }
}

.pointCard.sai-animate .pointCard__txt, .pointCard.sai-animate .pointCard__ttl, .pointCard.sai-animate .pointCard__num {
  opacity: 1;
}

.pointCard__txt, .pointCard__ttl, .pointCard__num {
  opacity: 0;
  -webkit-transition: opacity 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
  transition: opacity 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}

.pointCard__txt {
  position: absolute;
  will-change: opacity;
}

@media print, screen and (min-width: 800px) {
  .pointCard__txt {
    bottom: 32px;
    right: 32px;
  }
}

@media screen and (max-width: 800px) {
  .pointCard__txt {
    bottom: calc(20 / 375 * 100vw);
    right: calc(24 / 375 * 100vw);
  }
}

.pointCard__cont {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.pointCard__num {
  color: #ffff8a;
  font-family: "adobe-garamond-pro", serif;
  font-weight: 400;
  left: 50%;
  letter-spacing: 0;
  line-height: 1.5;
  position: absolute;
  text-align: center;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  white-space: nowrap;
}

@media print, screen and (min-width: 800px) {
  .pointCard__num {
    font-size: 68px;
  }
}

@media screen and (max-width: 800px) {
  .pointCard__num {
    font-size: calc(56 / 375 * 100vw);
  }
}

.pointCard__ttl {
  color: #ffff8a;
  font-weight: 600;
  letter-spacing: .3em;
  position: absolute;
  will-change: opacity;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
}

@media print, screen and (min-width: 800px) {
  .pointCard__ttl {
    font-size: 22px;
    left: 32px;
    top: 40px;
  }
}

@media screen and (max-width: 800px) {
  .pointCard__ttl {
    font-size: calc(18 / 375 * 100vw);
    left: calc(32 / 375 * 100vw);
    top: calc(24 / 375 * 100vw);
  }
}

@media screen and (max-width: 800px) {
  .pointCard + .pointCard {
    margin-top: calc(10 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .pointCard--01 .pointCard__txt {
    width: 289px;
  }
}

@media screen and (max-width: 800px) {
  .pointCard--01 .pointCard__txt {
    width: calc(247 / 375 * 100vw);
  }
}

.pointCard--02 .pointCard__txt {
  right: unset;
}

@media print, screen and (min-width: 800px) {
  .pointCard--02 .pointCard__txt {
    left: 32px;
    width: 235px;
  }
}

@media screen and (max-width: 800px) {
  .pointCard--02 .pointCard__txt {
    left: calc(32 / 375 * 100vw);
    width: calc(201 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .pointCard--03 .pointCard__txt {
    width: 307px;
  }
}

@media screen and (max-width: 800px) {
  .pointCard--03 .pointCard__txt {
    width: calc(263 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .pointsSect__head + .pointsSect__cont {
    margin-top: 60px;
  }
}

@media screen and (max-width: 800px) {
  .pointsSect__head + .pointsSect__cont {
    margin-top: calc(80 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .pointsSect__cont {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 32px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.scroll {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

@media print, screen and (min-width: 800px) {
  .scroll {
    gap: 7px;
  }
}

.scroll .en {
  color: #000000;
  font-family: "adobe-garamond-pro", serif;
  -webkit-transform: rotate(90deg) translateX(-50%);
          transform: rotate(90deg) translateX(-50%);
  -webkit-transform-origin: center center;
          transform-origin: center center;
}

@media print, screen and (min-width: 800px) {
  .scroll .en {
    font-size: 16px;
    letter-spacing: .1em;
  }
}

@media screen and (max-width: 800px) {
  .scroll .en {
    font-size: calc(12 / 375 * 100vw);
    letter-spacing: .1rem;
  }
}

.scroll .line {
  background-color: #d3d2cf;
  overflow: hidden;
  position: relative;
  width: 1px;
}

@media print, screen and (min-width: 800px) {
  .scroll .line {
    height: 46px;
  }
}

@media screen and (max-width: 800px) {
  .scroll .line {
    height: calc(46 / 375 * 100vw);
  }
}

.scroll .line:before {
  -webkit-animation: scroll 3s ease-in-out infinite;
          animation: scroll 3s ease-in-out infinite;
  background-color: #727171;
  content: '';
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
}

@media print, screen and (min-width: 800px) {
  .scroll .line:before {
    height: 20px;
  }
}

@media screen and (max-width: 800px) {
  .scroll .line:before {
    height: calc(20/ 375 * 100vw);
  }
}

@-webkit-keyframes scroll {
  0% {
    top: 0;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  100% {
    top: 100%;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes scroll {
  0% {
    top: 0;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  100% {
    top: 100%;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

.slideIcon {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-backdrop-filter: blur(2.4px);
          backdrop-filter: blur(2.4px);
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.1));
          filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.1));
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media print, screen and (min-width: 800px) {
  .slideIcon {
    height: 87px;
    width: 87px;
  }
}

@media screen and (max-width: 800px) {
  .slideIcon {
    height: calc(72 / 375 * 100vw);
    width: calc(72 / 375 * 100vw);
  }
}

.slideIcon__txt {
  font-family: "adobe-garamond-pro", serif;
  font-weight: 400;
  letter-spacing: .056em;
  line-height: 1.5;
}

@media print, screen and (min-width: 800px) {
  .slideIcon__txt {
    font-size: 15px;
  }
}

@media screen and (max-width: 800px) {
  .slideIcon__txt {
    font-size: calc(12 / 375 * 100vw);
  }
}

.slideIcon__image {
  height: auto;
  width: 100%;
}

@media print, screen and (min-width: 800px) {
  .slideIcon__image {
    width: 17px;
  }
}

@media screen and (max-width: 800px) {
  .slideIcon__image {
    width: calc(14 / 375 * 100vw);
  }
}

.stepCard {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.stepCard__head {
  position: relative;
}

@media print, screen and (min-width: 800px) {
  .stepCard__head {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 30px;
  }
}

@media print, screen and (min-width: 800px) {
  .stepCard__head + .stepCard__cont {
    margin-top: 20px;
  }
}

@media screen and (max-width: 800px) {
  .stepCard__head + .stepCard__cont {
    margin-top: calc(20 / 375 * 100vw);
  }
}

.stepCard__ttl {
  font-weight: 700;
  line-height: 1.5;
}

.stepCard__ttl:before {
  content: '';
  margin-top: calc((1 - 1.5) * .5em);
}

.stepCard__ttl:after {
  margin-bottom: calc((1 - 1.5) * .5em);
}

.stepCard__ttl:before, .stepCard__ttl:after {
  content: '';
  display: block;
  height: 0;
  width: 0;
}

@media print, screen and (min-width: 800px) {
  .stepCard__ttl {
    font-size: 18px;
    letter-spacing: .056em;
  }
}

@media screen and (max-width: 800px) {
  .stepCard__ttl {
    font-size: calc(15/ 375 * 100vw);
    letter-spacing: .056rem;
    margin-top: calc(10 / 375 * 100vw);
  }
}

.stepCard__step {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  position: relative;
}

@media print, screen and (min-width: 800px) {
  .stepCard__step .icon {
    width: 52px;
  }
}

@media screen and (max-width: 800px) {
  .stepCard__step .icon {
    width: calc(43 / 375 * 100vw);
  }
}

.stepCard__step .icon__image {
  height: auto;
  width: 100%;
}

.stepCard__step .inner {
  font-family: "adobe-garamond-pro", serif;
  font-weight: 400;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  white-space: nowrap;
}

@media print, screen and (min-width: 800px) {
  .stepCard__step .inner {
    font-size: 17px;
    left: 14px;
    letter-spacing: .056em;
  }
}

@media screen and (max-width: 800px) {
  .stepCard__step .inner {
    font-size: calc(14 / 375 * 100vw);
    left: calc(12 / 375 * 100vw);
    letter-spacing: .056rem;
  }
}

@media print, screen and (min-width: 800px) {
  .stepCard__step .inner .num {
    font-size: 22px;
  }
}

@media screen and (max-width: 800px) {
  .stepCard__step .inner .num {
    font-size: calc(18 / 375 * 100vw);
  }
}

.stepCard__cont {
  border: 1px solid #f4f4f5;
}

.stepCard__cont .photo__image {
  pointer-events: none;
  user-drag: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

@media print, screen and (min-width: 800px) {
  .stepCard--01 {
    width: 356px;
  }
}

@media screen and (max-width: 800px) {
  .stepCard--01 {
    width: calc(270 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .stepCard--02 {
    width: 603px;
  }
}

@media screen and (max-width: 800px) {
  .stepCard--02 {
    width: calc(460 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .stepCard--03 {
    width: 603px;
  }
}

@media screen and (max-width: 800px) {
  .stepCard--03 {
    width: calc(460 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .stepsSect__head + .stepsSect__cont {
    margin-top: 40px;
  }
}

@media screen and (max-width: 800px) {
  .stepsSect__head + .stepsSect__cont {
    margin-top: calc(20 / 375 * 100vw);
  }
}

.stepsSect__cont {
  position: relative;
}

@media print, screen and (min-width: 800px) {
  .stepsSect__cont {
    margin-right: -68px;
  }
}

@media screen and (max-width: 800px) {
  .stepsSect__cont {
    margin-right: calc(-24 / 375 * 100vw);
  }
}

.stepsSect__cont .slideIcon {
  left: 50%;
  pointer-events: none;
  position: absolute;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-transition: opacity 2s ease;
  transition: opacity 2s ease;
  z-index: 3;
}

@media print, screen and (min-width: 800px) {
  .stepsSect__cont .slideIcon {
    bottom: 78px;
  }
}

@media screen and (max-width: 800px) {
  .stepsSect__cont .slideIcon {
    bottom: calc(66 / 375 * 100vw);
  }
}

.stepsSect__cont.is-scrolled .slideIcon {
  opacity: 0;
}

.stepsSect__slidearea {
  cursor: -webkit-grab;
  cursor: grab;
  overflow: scroll;
  position: relative;
  white-space: nowrap;
  width: 100%;
}

.stepsSect__slidearea:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.stepsSect__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

@media print, screen and (min-width: 800px) {
  .stepsSect__list {
    gap: 32px;
    padding-right: 80px;
  }
}

@media screen and (max-width: 800px) {
  .stepsSect__list {
    gap: calc(32 / 375 * 100vw);
    padding-right: calc(40 / 375 * 100vw);
  }
}

.tipsBox {
  background-color: #ffffff;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

@media print, screen and (min-width: 800px) {
  .tipsBox {
    border-radius: 32px;
    max-width: 867px;
    padding: 50px 0 30px;
  }
}

@media screen and (max-width: 800px) {
  .tipsBox {
    border-radius: calc(16 / 375 * 100vw);
    padding: calc(57 / 375 * 100vw) 0 calc(30 / 375 * 100vw);
    width: calc(343 / 375 * 100vw);
  }
}

.tipsBox:after {
  background-color: #ffff8a;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

@media print, screen and (min-width: 800px) {
  .tipsBox:after {
    width: 60px;
  }
}

@media screen and (max-width: 800px) {
  .tipsBox:after {
    width: calc(32 / 375 * 100vw);
  }
}

.tipsBox__head {
  position: relative;
  z-index: 2;
}

@media print, screen and (min-width: 800px) {
  .tipsBox__head {
    padding-left: 68px;
  }
}

@media screen and (max-width: 800px) {
  .tipsBox__head {
    padding-left: calc(24 / 375 * 100vw);
  }
}

.tipsBox__head:before {
  background-color: #ffff8a;
  content: '';
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 100%;
  z-index: -1;
}

@media print, screen and (min-width: 800px) {
  .tipsBox__head:before {
    height: 100px;
    width: 100px;
  }
}

@media screen and (max-width: 800px) {
  .tipsBox__head:before {
    height: calc(100 / 375 * 100vw);
    width: calc(100 / 375 * 100vw);
  }
}

.tipsBox__head .heading {
  font-weight: 700;
  line-height: 1.5;
}

.tipsBox__head .heading:before {
  content: '';
  margin-top: calc((1 - 1.5) * .5em);
}

.tipsBox__head .heading:after {
  margin-bottom: calc((1 - 1.5) * .5em);
}

.tipsBox__head .heading:before, .tipsBox__head .heading:after {
  content: '';
  display: block;
  height: 0;
  width: 0;
}

@media print, screen and (min-width: 800px) {
  .tipsBox__head .heading {
    font-size: 22px;
    letter-spacing: .069em;
  }
}

@media screen and (max-width: 800px) {
  .tipsBox__head .heading {
    font-size: calc(17 / 375 * 100vw);
    letter-spacing: .069rem;
  }
}

@media print, screen and (min-width: 800px) {
  .tipsBox__head + .tipsBox__cont {
    margin-top: 34px;
  }
}

@media screen and (max-width: 800px) {
  .tipsBox__head + .tipsBox__cont {
    margin-top: calc(41 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .tipsBox__cont {
    padding: 0 68px;
  }
}

@media screen and (max-width: 800px) {
  .tipsBox__cont {
    padding: 0 calc(24 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .tipsBox--color .tipsBox__cont {
    margin-left: 47px;
  }
}

@media print, screen and (min-width: 800px) {
  .tipsBox--color .tipsBox__cont .photo {
    width: 577px;
  }
}

@media screen and (max-width: 800px) {
  .tipsBox--color .tipsBox__cont .photo {
    width: calc(280 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .tipsBox + .tipsBox {
    margin-top: 20px;
  }
}

@media screen and (max-width: 800px) {
  .tipsBox + .tipsBox {
    margin-top: calc(20 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 800px) {
  .tipsSect__head + .tipsSect__cont {
    margin-top: 60px;
  }
}

@media screen and (max-width: 800px) {
  .tipsSect__head + .tipsSect__cont {
    margin-top: calc(80 / 375 * 100vw);
  }
}

.lp-concept {
  position: relative;
  z-index: 1;
}

@media print, screen and (min-width: 800px) {
  .lp-concept {
    padding-bottom: 300px;
  }
}

@media screen and (max-width: 800px) {
  .lp-concept {
    padding-bottom: calc(150 / 375 * 100vw);
  }
}

.lp-foundation {
  background-color: #ffffff;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

@media print, screen and (min-width: 800px) {
  .lp-foundation {
    border-radius: calc(60 / 1440 * 100vw) calc(60 / 1440 * 100vw) 0 0;
    -webkit-box-shadow: 0 -20px 20px 0 rgba(0, 0, 0, 0.02);
            box-shadow: 0 -20px 20px 0 rgba(0, 0, 0, 0.02);
    padding: calc(160 / 1440 * 100vw) 0;
  }
}

@media screen and (max-width: 800px) {
  .lp-foundation {
    border-radius: calc(16 / 375 * 100vw) calc(16 / 375 * 100vw) 0 0;
    -webkit-box-shadow: 0 calc(-10 / 375 * 100vw) calc(10 / 375 * 100vw) 0 rgba(0, 0, 0, 0.05);
            box-shadow: 0 calc(-10 / 375 * 100vw) calc(10 / 375 * 100vw) 0 rgba(0, 0, 0, 0.05);
    padding: calc(80 / 375 * 100vw) 0 calc(100 / 375 * 100vw);
  }
}

.lp-foundation:after {
  background-color: #ffff8a;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

@media print, screen and (min-width: 800px) {
  .lp-foundation:after {
    width: calc(290 / 1440 * 100vw);
  }
}

@media screen and (max-width: 800px) {
  .lp-foundation:after {
    width: calc(100 / 375 * 100vw);
  }
}

.lp-points {
  position: relative;
  z-index: 2;
}

@media print, screen and (min-width: 800px) {
  .lp-points {
    padding: calc(127 / 1440 * 100vw) 0 calc(127 / 1440 * 100vw);
  }
}

@media screen and (max-width: 800px) {
  .lp-points {
    padding: calc(100 / 375 * 100vw) 0 calc(100 / 375 * 100vw);
  }
}

.lp-before {
  position: relative;
  z-index: 2;
}

@media print, screen and (min-width: 800px) {
  .lp-before {
    padding: calc(127 / 1440 * 100vw) 0 calc(127 / 1440 * 100vw);
  }
}

@media screen and (max-width: 800px) {
  .lp-before {
    padding: calc(100 / 375 * 100vw) 0 calc(100 / 375 * 100vw);
  }
}

.lp-tips {
  position: relative;
  z-index: 2;
}

@media print, screen and (min-width: 800px) {
  .lp-tips {
    padding: calc(120 / 1440 * 100vw) 0 calc(120 / 1440 * 100vw);
  }
}

@media screen and (max-width: 800px) {
  .lp-tips {
    padding: calc(100 / 375 * 100vw) 0 calc(100 / 375 * 100vw);
  }
}

.lp-last {
  background-color: #e0dee1;
  position: relative;
  z-index: 2;
}

@media print, screen and (min-width: 800px) {
  .lp-last {
    padding: calc(160 / 1440 * 100vw) 0 calc(160 / 1440 * 100vw);
  }
}

@media screen and (max-width: 800px) {
  .lp-last {
    padding: calc(120 / 375 * 100vw) 0 calc(100 / 375 * 100vw);
  }
}

@media screen and (max-width: 800px) {
  .lp-last .fixedBg .photo__image {
    height: auto;
    position: absolute;
  }
}