@import url("global.css");
#topimage {
  position: relative;
  align-content: center;
  min-height: 530px;
  box-sizing: border-box;
  padding-block: 40px;
  margin-bottom: 130px;
}
#topimage .bg {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: max(30px,calc((100% - 1780px) / 2));
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  overflow: hidden;
}
#topimage .bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right, #111 44%, transparent 90%);
  opacity: 0.25;
}
#topimage .inner {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: left;
  color: #fff;
  max-width: 1640px;
  box-sizing: border-box;
  margin-inline: auto;
  padding-inline: 50px;
}
@media only screen and (max-width: 1700px) {
  #topimage .inner {
    padding-left: 80px;
  }
}
#topimage .catch {
  font-size: min(32px,3vw);
  margin-bottom: 30px;
  word-break: keep-all;
}
#topimage .text {
  width: 50%;
  letter-spacing: 0;
  line-height: 2;
}
#topimage .text p + p {
  margin-top: 20px;
}

.sec_after {
  display: flex;
  margin-bottom: 160px;
}
.sec_after:last-of-type {
  margin-bottom: 0;
}
.sec_after .stickynavi {
  width: 28%;
  flex-shrink: 0;
}
.sec_after .stickynavi ul {
  position: sticky;
  top: 130px;
}
.sec_after .stickynavi ul li {
  margin-bottom: 20px;
}
.sec_after .stickynavi ul li a {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sec_after .stickynavi ul li a::before {
  content: "";
  width: 7px;
  height: 7px;
  display: block;
  background-color: #999;
  border-radius: 50%;
}
.sec_after .stickynavi ul li a.current {
  font-weight: 500;
}
.sec_after .stickynavi ul li a.current::before {
  background-color: #4A4234;
}
.sec_after .main_area {
  flex: 1;
  margin-left: 80px;
}
.sec_after .main_area .inner_block + .inner_block {
  margin-top: 70px;
  border-top: 1px solid #c9c9c9;
  padding-top: 50px;
}
.sec_after .main_area .inner_block .innerblock_title {
  margin-bottom: 30px;
  position: relative;
  padding-left: 20px;
  line-height: 1.45;
  font-size: clamp(19px, 3.2vw, 27px);
  font-weight: 500;
}
.sec_after .main_area .inner_block .innerblock_title::before {
  content: "";
  width: 8px;
  height: 8px;
  display: block;
  background-color: #4A4234;
  border-radius: 1px;
  rotate: 45deg;
  position: absolute;
  left: 0;
  top: 16px;
}
.sec_after .main_area .inner_block .innerblock_title span {
  font-size: 85%;
}
.sec_after .main_area .inner_block .lead {
  margin-bottom: 20px;
  font-size: clamp(16px, 2.4vw, 21px);
}

/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint ( 1300px )

------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 959px )

------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  #topimage {
    min-height: 520px;
    margin-bottom: 60px;
  }
  #topimage .bg {
    left: 3vw;
  }
  #topimage .bg::before {
    opacity: 0.3;
    background: rgba(17, 17, 17, 0.44);
  }
  #topimage .inner {
    display: block;
    padding-inline: 10vw 5vw;
  }
  #topimage .catch {
    margin-bottom: 30px;
    font-size: min(28px,4.7vw);
  }
  #topimage .text {
    width: 100%;
    line-height: inherit;
  }
  #topimage .text p + p {
    margin-top: 1em;
  }
  .sec_after .main_area {
    margin-left: 40px;
  }
  .sec_after .main_area .inner_block .innerblock_title::before {
    top: 14px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 644px )

------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  #topimage {
    min-height: 420px;
    padding-block: 40px;
  }
  #topimage .bg {
    left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  #topimage .bg::before {
    opacity: 0.5;
  }
  #topimage .inner {
    padding-inline: 5vw;
  }
  #topimage .catch {
    margin-bottom: 30px;
  }
  #topimage .text br {
    display: none;
  }
  #topimage .text p {
    font-size: 13px;
  }
  .sec_after {
    display: block;
  }
  .sec_after .stickynavi {
    display: none;
  }
  .sec_after .main_area {
    margin-left: 0;
  }
  .sec_after .main_area .inner_block + .inner_block {
    margin-top: 40px;
    padding-top: 40px;
  }
  .sec_after .main_area .inner_block .innerblock_title {
    margin-bottom: 20px;
  }
  .sec_after .main_area .inner_block .innerblock_title::before {
    top: 8px;
  }
  .sec_after .main_area .inner_block .lead {
    margin-bottom: 10px;
  }
}