@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap");
:root {
  --font-fam: "noto serif JP";
  --theme-color: #fff;
  --font-color: #111;
}

@media (min-width: 1024px) {
  .container {
    background: url(../img/index/bg_left.png), url(../img/index/bg_right.png);
    background-repeat: repeat-y;
    background-position: top left, top right;
    background-size: min(20.31vw, 390px) auto;
  }
}

#method_mv {
  border-bottom: solid clamp(8.5px, 1.1067708333vw, 17px) #1B6489;
}

#rule_mv {
  background: url(../img/index/rule/bg.png) repeat-x;
  background-size: clamp(18px, 2.34375vw, 37px) auto;
  background-position: top clamp(5px, 0.6510416667vw, 8.5px) center;
  background-color: #fff;
  padding-top: 80px;
  font-size: clamp(1.6rem, 2vw, 1.9rem);
  font-weight: 500;
}

img {
  width: 100%;
}

.br-sp {
  display: block;
}
@media (min-width: 768px) {
  .br-sp {
    display: none;
  }
}

.br-pc {
  display: none;
}
@media (min-width: 768px) {
  .br-pc {
    display: block;
  }
}

.fv {
  position: relative;
}
.fv img {
  display: block;
  position: relative;
  z-index: 5;
}
@media (min-width: 1024px) {
  .fv img {
    min-height: 662px;
    object-fit: cover;
  }
}

.cp_txt {
  margin-top: 4vw;
  font-family: "noto sans JP", sans-serif;
  color: #001D3E;
  position: relative;
  z-index: 5;
}
@media (min-width: 768px) {
  .cp_txt {
    margin-top: 30px;
  }
}
.cp_txt strong {
  color: #001D3E;
  display: block;
  text-align: center;
  line-height: 1.2;
  font-size: 6.4vw;
  font-weight: bold;
  letter-spacing: -1.2px;
}
@media (min-width: 768px) {
  .cp_txt strong {
    font-size: clamp(2.4rem, 3.12vw, 4rem);
  }
}
.cp_txt strong span {
  color: #001D3E;
  font-size: 9.6vw;
  font-weight: bold;
}
@media (min-width: 768px) {
  .cp_txt strong span {
    font-size: clamp(3.6rem, 4.68vw, 6rem);
  }
}
.cp_txt strong span:has(img) {
  line-height: 1;
}
.cp_txt strong span img {
  display: inline-block;
  width: 79.73vw;
  vertical-align: middle;
}
@media (min-width: 768px) {
  .cp_txt strong span img {
    width: clamp(29.9rem, 38.93vw, 42.35rem);
  }
}
.cp_txt p {
  margin-top: 5.33vw;
  color: #001D3E;
  font-size: 3.73vw;
  text-align: center;
  font-weight: normal;
}
@media (min-width: 768px) {
  .cp_txt p {
    margin-top: 30px;
    font-size: clamp(1.6rem, 1.56vw, 2.4rem);
  }
}
.cp_txt p span {
  color: #DE441A;
  font-weight: normal;
}
.cp_txt p a {
  color: #001D3E;
  text-decoration: underline;
}

.contents {
  margin-top: clamp(5rem, 6.25vw, 10rem);
  width: min(100% - 20px, 1040px);
  margin-inline: auto;
}
.contents ul {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 3.12vw, 3.5rem);
}
.contents ul li {
  position: relative;
}