/* -----------------------
  point
----------------------- */
.point {
  background: url(../img/point_bg_top.jpg) no-repeat center top / 100% auto, url(../img/point_bg_bottom.jpg) no-repeat center bottom / 100% auto,#f5d09c;
  position: relative;
}

.point .dot-line-vertical {
  height: min(17.05vw, 133px);
  position: absolute;
  top: max(-8.59vw, -67px);
  left: calc(50% - min(0.26vw, 2px));
}

.point-box {
  position: relative;
}
.point-box::before {
  content: '';
  position: absolute;
  left: min(5.13vw, 40px);
  z-index: 6;
  pointer-events: none;
  width: min(89.74vw, 700px);
  top: min(21.92vw, 171px);
}

.point-01::before,
.point-03::before {
  background:
    linear-gradient(to left, #312008, #312008) no-repeat left top,
    linear-gradient(to bottom, #312008, #312008) no-repeat left top;
  background-size:
    100% min(0.26vw, 2px),
    0 0;
  clip-path: inset(0 0 0 100%);
}
.point-02::before {
  background:
    linear-gradient(to right, #312008, #312008) no-repeat right top,
    linear-gradient(to bottom, #312008, #312008) no-repeat right top;
  background-size:
    100% min(0.26vw, 2px),
    0 0;
  clip-path: inset(0 100% 0 0);
}
.point-01::before,
.point-02::before {
  height: min(270.9vw, 2113px);
}
.point-03::before {
  height: min(225.26vw, 1757px);
}
.point-01.trigger.move::before,
.point-03.trigger.move::before {
  animation: half_square_line 3s linear forwards;
}
.point-02.trigger.move::before {
  animation: half_square_line2 3s linear forwards;
}
@keyframes half_square_line {
  0% {
    background-size:
      100% min(0.26vw, 2px),
      0 0;
    clip-path: inset(0 0 0 100%);
  }
  20% {
    background-size:
      100% min(0.26vw, 2px),
      min(0.26vw, 2px) 0;
    clip-path: inset(0);
  }
  100% {
    background-size:
      100% min(0.26vw, 2px),
      min(0.26vw, 2px) 100%;
    clip-path: inset(0);
  }
}
@keyframes half_square_line2 {
  0% {
    background-size:
      100% min(0.26vw, 2px),
      0 0;
    clip-path: inset(0 100% 0 0);
  }
  20% {
    background-size:
      100% min(0.26vw, 2px),
      min(0.26vw, 2px) 0;
    clip-path: inset(0);
  }
  100% {
    background-size:
      100% min(0.26vw, 2px),
      min(0.26vw, 2px) 100%;
    clip-path: inset(0);
  }
}

.point-01 {
  margin-top: min(11.41vw, 89px);
}
.point-02 {
  margin-top: min(18.21vw, 142px);
}
.point-03 {
  margin-top: min(15.51vw, 121px);
}


.point-box .ttl-box {
  display: grid;
  position: relative;
}
.point-box .ttl-box > img {
  grid-area: 1 / 1 / 2 / 3;
}
.point-box .ttl-box .ttl-txt {
  width: min(25.26vw, 197px);
}
.point-box .ttl-box .ttl-txt:first-of-type {
  transition-delay: 0s;
}
.point-box:nth-of-type(odd) .ttl-box .ttl-txt {
  grid-area: 1 / 2 / 2 / 3;
}
.point-box:nth-of-type(even) .ttl-box .ttl-txt {
  grid-area: 1 / 1 / 2 / 3;
}

.point-box .ttl-box .icon-txt-box {
  position: absolute;
  width: min(14.23vw, 111px);
  height: min(6.03vw, 47px);
  top: min(3.08vw, 24px);
  left: min(34.1vw, 266px);
  transform: rotate(-11deg);
}
.point-box .ttl-box .icon-txt-box .icon-txt {
  fill: #de7165;
}
.point-box .ttl-box .icon-txt-box .icon-txt-mask {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 594;
  stroke-dashoffset: 594;  
}
.point-box .ttl-box .icon-txt-box.trigger.move .icon-txt-mask {
  animation: handwriting 1.3s ease-in-out forwards;
}
@keyframes handwriting {
  0% {
    stroke-dashoffset: 594;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
#point-01-icon {
  mask: url(#point-01-icon-mask);
}
#point-02-icon {
  mask: url(#point-02-icon-mask);
}
#point-03-icon {
  mask: url(#point-03-icon-mask);
}

.point-box .details-ttl.hasHighlight {
  position: relative;
}
.point-box .details-ttl.hasHighlight::after{
  content: '';
  width: min(23.59vw, 184px);
  height: min(23.85vw, 186px);
  background: url(../img/point_detail_circle.png) no-repeat center / contain;
  transform: rotate(0deg);
  animation: rotateInfinite 6s linear infinite;
  transition-delay: .25s;
  position: absolute;
  top: 0;
}
.point-01 .details-ttl.hasHighlight::after {
  right: min(3.33vw, 26px);
}
.point-02 .details-ttl.hasHighlight::after {
  left: min(5.13vw, 40px);
}
@keyframes rotateInfinite {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

.point-details {
  position: relative;
  z-index: 3;
  background: linear-gradient(to bottom, #fff, #fff) no-repeat center bottom / min(82.05vw, 640px) calc(100% - min(8.08vw, 63px));
}
.point-03 .point-details {
  background-size: min(82.05vw, 640px) 100%;
}
.point-details .details-ttl {
  display: grid;
}
.point-details .details-ttl span,
.point-details .details-ttl img  {
  grid-area: 1 / 1;
}
.point-details .details-ttl span {
  clip-path: inset(0 100% 0 0);
  transition: all 0.8s 0s ease;
}
.point-details .details-ttl span + span {
  transition-delay: .25s;
}
.point-details .details-ttl span.trigger.move {
  clip-path: inset(0);
}

.point-03 .point-details .details-ttl {
  position: relative;
}
.point-03 .point-details .details-ttl .icon-txt-box {
  position: absolute;
  width: min(34.74vw, 271px);
  height: min(20.51vw, 160px);
  top: max(-3.59vw, -28px);
  left: max(-1.54vw, -12px);
}
.point-03 .point-details .details-ttl .icon-txt {
  fill: #de7165;
}
.point-03 .point-details .details-ttl .icon-txt-mask {
  fill: none;
  stroke: #fff;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 172;
  stroke-dashoffset: 172;
  transform: rotate(-10deg) translate(4%, 30%) scale(0.9);
}
.point-03 .point-details .details-ttl .icon-txt-box.trigger.move .icon-txt-mask {
  animation: handwritingLiftUp 1.3s ease-out forwards;
}

.point-03 .details-area {
  position: relative;
}
.point-03 .details-area .nav-area {
  position: absolute;
  top: 0;
  left: 0;
  padding-top: min(70.38vw, 549px);
  width: 100%;
  z-index: 7;
}
.point-03 .details-area .nav-area.sec-start {
  position: fixed;
  top: 0;
  left: 0;
}
.point-03 .details-area .nav-area.sec-end {
  position: absolute;
  top: initial;
  bottom: min(66.67vw, 520px);
}
.point-03 .details-area .nav-area .point-liftup-nav {
  width: 100vw;
  max-width: 780px;
  margin: 0 auto;
  background: url(../img/liftup_nav_bg.png) no-repeat left top / contain;
  padding-top: min(9.36vw, 73px);
}
.point-liftup-nav li {
  width: min(7.05vw, 55px);
  margin: 0 auto 0 0;
}
.point-liftup-nav .liftup-nav-link {
  display: inline-block;
}
.point-liftup-nav .liftup-nav-link img {
  opacity: 0;
  transition: opacity .3s;
}
.point-liftup-nav .liftup-nav-link.is-current img {
  opacity: 1;
}
.point-liftup-nav .liftup-nav-link-01 {
  background: url(../img/liftup_nav_01_off.png) no-repeat left top / contain;
}
.point-liftup-nav .liftup-nav-link-02 {
  background: url(../img/liftup_nav_02_off.png) no-repeat left top / contain;
}
.point-liftup-nav .liftup-nav-link-03 {
  background: url(../img/liftup_nav_03_off.png) no-repeat right top / contain;
}
.point-liftup-nav .liftup-nav-link-04 {
  background: url(../img/liftup_nav_04_off.png) no-repeat right top / contain;
}

.point-03 .point-details + .point-details {
  margin-top: min(8.33vw, 65px);
}

.point-03 .point-details .icon-box {
  position: relative;
}
.point-03 .point-details .icon-box .icon {
  position: absolute;
  top: 0;
  right: 0;
  width: min(27.56vw, 215px);
  height: 100%;
  z-index: 3;
}
.point-03 .point-details .icon-box .icon-01 {
  transition-delay: 0s;
}

.point-03 .point-details .chk-area {
  position: relative;
}
.point-03 .point-details .chk-list {
  width: min(3.46vw, 27px);
  position: absolute;
  left: min(21.15vw, 165px);
  top: min(10.64vw, 83px);
  display: grid;
  gap: min(3.85vw, 30px);
}
.point-03 .point-details .chk-list .chk {
  height: min(3.59vw, 28px);
  line-height: 1;
  clip-path: inset(0 100% 0 0);
  transition: all 0.2s 0s ease-in-out;
  transition-delay: 0;
}
.point-03 .point-details .chk-list .chk.trigger.move {
  clip-path: inset(0);
}
.point-03 .point-details .chk-list .chk:nth-child(2) {
  transition-delay: 0.2s;
}
.point-03 .point-details .chk-list .chk:nth-child(3) {
  transition-delay: 0.4s;
}

.point .message {
  position: relative;
}
.point .message .photo {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
  transition-delay: 0s;
}