@charset "UTF-8";

main {
  position: relative;
}

/* ---------------------------------
  page_title
--------------------------------- */
.page_title .inner::after {
  content: "Strength";
}


/* ---------------------------------
  bg_wrapper
--------------------------------- */
.bg_wrapper {
  position: relative;
  contain: paint;
}


/* ---------------------------------
  strength_bg
--------------------------------- */
.strength_bg {
  position: relative;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
}
.strength_bg.sticky {
  position: sticky;
}
.strength_bg::before {
  content: "";
  background-image: url("../../images/strength/strength_bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -3;
}
.strength_bg.sticky::before {
  height: 100vh;
}
@media screen and (max-width: 767px) {
  .strength_bg.sticky::before {
    height: 100vh;
  }
}


/* ---------------------------------
  nav_block
--------------------------------- */
.nav_block {
  color: #fff;
  padding: 100px 0;
}
.nav_block h2 {
  font-size: 24px;
  line-height: 1.6;
  text-align: center;
  margin-bottom: 40px;
  font-weight: 500;
}
.nav_list {
  display: flex;
  justify-content: center;
  margin-bottom: 64px;
}
.nav_list li {
  width: 240px;
  font-size: 24px;
  line-height: 1.6;
  font-weight: 500;
}
.nav_list li:not(:last-child) {
  border-right: 1px solid #fff;
}
.nav_list li a {
  padding: 23px 0;
  display: flex;
  flex-flow: column;
  align-items: center;
  grid-row-gap: 16px;
  transition: opacity .3s;
}
.nav_list li a:hover {
  opacity: .7;
}
.nav_list li a::before {
  content: "";
  width: 80px;
  height: 80px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.nav_list li:nth-child(1) a::before {
  background-image: url("../../images/strength/nav_icon01.svg");
}
.nav_list li:nth-child(2) a::before {
  background-image: url("../../images/strength/nav_icon02.svg");
}
.nav_list li:nth-child(3) a::before {
  background-image: url("../../images/strength/nav_icon03.svg");
}
.nav_list li:nth-child(4) a::before {
  background-image: url("../../images/strength/nav_icon04.svg");
}
.nav_list li:nth-child(5) a::before {
  background-image: url("../../images/strength/nav_icon05.svg");
}
.nav_list li a::after {
  content: "";
  background-color: #CDC298;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-image: url("../../images/common/arrow_black.svg");
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(90deg);
}
.strength_text_block {
  text-align: center;
}
.strength_text {
  display: inline-block;
}
.strength_text p:nth-child(1) {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
  color: #fff;
  text-shadow: none;
  display: flex;
  column-gap: 24px;
  white-space: nowrap;
}
.strength_text p:nth-child(1)::before,
.strength_text p:nth-child(1)::after {
  content: "";
  height: 30px;
  width: 100%;
  transform: translateY(50%);
  border-top: 2px solid #fff;
}
.strength_text p:nth-child(1)::before {
  border-left: 2px solid #fff;
  border-top-left-radius: 20px;
}
.strength_text p:nth-child(1)::after {
  border-right: 2px solid #fff;
  border-top-right-radius: 20px;
}
.strength_text p:nth-child(2) {
  border: 2px solid #fff;
  border-top: 0;
  border-radius: 0 0 20px 20px;
  padding: 30px 80px;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.52;
  color: #E6D38F;
  text-shadow: 0 4px 15px rgba(0,0,0,.25);
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
}
@media screen and (max-width: 1281px) {
.nav_list {
  display: flex;
  justify-content: center;
  margin: 0 auto 64px;
  max-width: 960px;
}
.nav_list li a::before {
  content: "";
  width: 64px;
  height: 64px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.strength_text p:nth-child(2) {
  border: 2px solid #fff;
  border-top: 0;
  border-radius: 0 0 20px 20px;
  padding: 30px 64px;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.52;
  color: #E6D38F;
  text-shadow: 0 4px 15px rgba(0,0,0,.25);
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
}
}
@media screen and (max-width: 767px) {
  .nav_block {
    padding: 20px 0 280px;
    background-position: left bottom;
  }
  .nav_block h2 {
    font-size: 16px;
    margin-bottom: 32px;
  }
  .nav_list {
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 32px;
    column-gap: 24px;
    row-gap: 16px;
  }
  .nav_list li {
    width: calc(calc(100% - 48px) / 3);
    font-size: 14px;
  }
  .nav_list li:not(:last-child) {
    border-right: 0
  }
  .nav_list li a {
    padding: 8px 0;
    grid-row-gap: 8px;
  }
  .nav_list li a::before {
    width: 40px;
    height: 40px;
  }
  .nav_list li a::after {
    width: 16px;
    height: 16px;
    background-size: 10px;
  }
  .strength_text_block {
    text-align: center;
  }
  .strength_text {
    display: block;
  }
  .strength_text p:nth-child(1) {
    font-size: 14px;
  }
  .strength_text p:nth-child(1)::before,
  .strength_text p:nth-child(1)::after {
    height: 30px;
    transform: translateY(50%);
  }
  .strength_text p:nth-child(1)::before {
    border-top-left-radius: 10px;
  }
  .strength_text p:nth-child(1)::after {
    border-top-right-radius: 10px;
  }
  .strength_text p:nth-child(2) {
    width: 100%;
    border-radius: 0 0 10px 10px;
    padding: 10px 0 30px;
    font-size: 18px;
  }
}



/* ---------------------------------
  strength_detail_block
--------------------------------- */
.strength_detail_block {
  counter-reset: strength_number;
  padding-bottom: 120px;
  position: relative;
}
.strength_detail_content {
  box-shadow: 0 0 40px rgba(0,0,0,.05);
  background-color: #fff;
  border-radius: 20px;
  display: flex;
  column-gap: clamp(20px, calc(20px + (80 - 20) * (100vw - 768px) / (1340 - 768)), 80px);
  align-items: flex-start;
  padding: 100px clamp(20px, calc(20px + (80 - 20) * (100vw - 768px) / (1340 - 768)), 80px);
  counter-increment: strength_number;
  top: 10%;
}
.strength_detail_content:not(:first-child) {
  margin-top: 40px;
}
.strength_detail_content img {
  width: clamp(250px, calc(250px + (502 - 250) * (100vw - 768px) / (1340 - 768)), 502px);
  border-radius: 10px;
}
.strength01 {
  z-index: 11;
}
.strength02 {
  z-index: 12;
}
.strength03 {
  z-index: 13;
}
.strength04 {
  z-index: 14;
}
.strength05 {
  z-index: 15;
}
.strength_title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 24px;
}
.strength_title span {
  font-family: 'urbanist';
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  line-height: 1.2;
  letter-spacing: .05em;
  padding-bottom: 16px;
  border-bottom: 2px solid #CDC298;
  margin-bottom: 32px;
}
.strength_title span::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #CDC298;
  margin-right: 8px;
}
.strength_title span::after {
  content: "0" counter(strength_number);
  padding-left: .5em;
}
.strength_detail_text {
  display: flex;
  flex-flow: column;
  row-gap: 16px;
}
.strength02_list {
  font-weight: 500;
  display: flex;
  column-gap: 32px;
}
.strength02_list li {
  text-indent: -1em;
  margin-left: 1em;
}
.strength02_list li:not(:last-child) {
  padding-bottom: 4px;
}
.strength02_list li::before {
  content: "・"
}
.strength02_list ul:nth-child(1) {
  width: 280px;
}
.strength03 .strength_detail_text {
  row-gap: 8px;
}
.strength03 a {
  margin-left: auto;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  align-items: center;
  column-gap: 16px;
  transition: opacity .3s;
}
.strength03 a:hover {
  opacity: .7;
}
.strength03 a::after {
  content: "";
  background-color: #002B69;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-image: url("../../images/common/arrow_white.svg");
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: center;
}
.strength04_list li {
  display: flex;
  align-items: flex-start;
  column-gap: 13px;
  padding-left: 5px;
  font-weight: 500;
}
.strength04_list li:not(:last-child) {
  padding-bottom: 4px;
}
.strength04_list li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #CDC298;
  flex-shrink: 0;
  margin-top: 11px;
}
@media screen and (max-width: 1281px) {
  .strength_detail_content {
    box-shadow: 0 0 40px rgba(0,0,0,.05);
    background-color: #fff;
    border-radius: 20px;
    display: flex;
    column-gap: clamp(20px, calc(20px + (64 - 20) * (100vw - 768px) / (1040 - 768)), 64px);
    align-items: flex-start;
    padding: 80px clamp(20px, calc(20px + (64 - 20) * (100vw - 768px) / (1040 - 768)), 64px);
    counter-increment: strength_number;
    top: 10%;
  }
  .strength_detail_content img {
    width: clamp(250px, calc(250px + (401 - 250) * (100vw - 768px) / (1040 - 768)), 401px);
    border-radius: 10px;
  }
}
@media screen and (max-width: 767px) {
  .strength_detail_block {
    margin-top: -215px;
    padding-bottom: 80px;
  }
  .strength_detail_content {
    border-radius: 10px;
    flex-flow: column;
    row-gap: 24px;
    padding: 20px 16px 16px;
    position: relative;
  }
  .strength_detail_content + .strength_detail_content {
    margin-top: 24px;
  }
  .strength_detail_content img {
    width: 100%;
  }
  .strength_title {
    font-size: 18px;
    margin-bottom: 16px;
  }
  .strength_title span {
    margin-bottom: 16px;
  }
  .strength02_list {
    flex-flow: column;
    row-gap: 4px;
  }
  .strength02_list ul:nth-child(1) {
    width: 100%;
  }
  .strength03 .strength_detail_text {
    row-gap: 8px;
  }
  .strength03 a {
    font-size: 16px;
  }
}


/* ---------------------------------
  other_page_link
--------------------------------- */
.other_page_link li {
  width: 50%;
}
@media screen and (max-width: 767px) {
  .other_page_link li {
    width: 100%;
  }
}