/* -----------------------
  point
----------------------- */
.point {
  background: url(../img/point_bg.jpg) no-repeat center top / cover;
  padding-top: min(26.92vw, 210px);
  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;
}

.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-01::before {
  width: min(61.79vw, 482px);
  height: min(253.97vw, 1981px);
  top: min(5.51vw, 43px);
}
.point-03::before {
  width: min(57.44vw, 448px);
  height: min(125.51vw, 979px);
  top: min(6.15vw, 48px);
}
.point-01.trigger.move::before,
.point-03.trigger.move::before {
  animation: half_square_line 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);
  }
}

.point-02::before {
  width: min(0.26vw, 2px);
  height: min(367.69vw, 2868px);
  top: min(28.85vw, 225px);
  background-color: #312008;
  clip-path: inset(0 0 100% 0);
  transition: all 3s 0s ease;
  transition-delay: 1s;
}
.point-02.trigger.move::before {
  clip-path: inset(0);
}

.point-box .ttl-box {
  display: grid;
}
.point-box .ttl-box > img {
  grid-area: 1 / 1 / 2 / 3;
}
.point-box .ttl-box .ttl-txt {
  width: min(21.54vw, 168px);
}
.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-details {
  position: relative;
  z-index: 3;
}
.point-details .bg-slider {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
}
.point-details .bg-slider .slide-item {
  height: min(10.26vw, 80px);
}
.point-details .bg-slider .slide-item img {
  width: auto;
  max-height: 100%;
}
.point-details .details-ttl {
  padding-left: min(5.13vw, 40px);
}
.point-details .details-ttl span.trigger {
  position: relative;
  height: min(10.77vw, 84px);
  display: block;
  background-color: #312008;
  transition: all 1.2s 0s ease;
  transition-delay: .25s;
  clip-path: inset(0 100% 0 0);
}
.point-details .details-ttl span.trigger.move {
  clip-path: inset(0);
}
.point-details .details-ttl span::after {
  content: '';
  background: linear-gradient(to right, #fff 25%, #312008 25%);
  width: min(0.51vw, 4px);
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
}
.point-details .details-ttl span + span {
  margin-top: min(0.77vw, 6px);
}


.point-01-details-01 {
  background: url(../img/point_01_details-01_bg.png) no-repeat center top / 100% auto;
  padding-top: min(8.08vw, 63px);
}
.point-01-details-01 .photo {
  width: min(44.36vw, 346px);
  height: min(93.21vw, 727px);
  position: absolute;
  right: 0;
  top: min(21.28vw, 166px);
}
.point-01-details-01 .ttl-01 {
  width: min(72.95vw, 569px);
}
.point-01-details-01 .ttl-02 {
  width: min(64.36vw, 502px);
}

.point-02-details-01 {
  background: url(../img/point_02_details-01_bg.png) no-repeat center top / 100% auto;
}
.point-02-details-01 .details-ttl {
  position: absolute;
  top: min(8.59vw, 67px);
  z-index: 3;
}
.point-02-details-01 .ttl-01 {
  width: min(67.05vw, 523px);
  margin-bottom: max(-6.03vw, -47px);
}

.point-02-details-02 {
  position: relative;
}
.point-02-details-02 .ttl {
  width: min(16.28vw, 127px);
  height: min(121.54vw, 948px);
  position: absolute;
  top: 0;
  right: 0;
}

.point .message {
  position: relative;
}
.point .message .photo {
  width: min(62.31vw, 486px);
  position: absolute;
  bottom: 0;
  left: 0;
}
.point .message .txt {
  width: 50%;
  margin: 0 0 0 auto;
  transition-delay: .75s;
}