/* ----------------------------------------
レイアウト
---------------------------------------- */

section:nth-of-type(n + 2) {
  border-top: 1px solid #d0d0d0;
}

section h2 {
  font-size: 1.2em;
}
@media screen and (min-width: 520px) {
  section h2 {
    font-size: 1.4em;
  }
}

.three-columns {
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}
@media screen and (min-width: 960px) {
  .three-columns {
    width: unset;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px;
    row-gap: 20px;
  }
}

/* ----------------------------------------
page header
---------------------------------------- */

.page-header {
  padding: 20px 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 20px;
}
@media screen and (min-width: 520px) {
  .page-header {
    --max-article-width: 1000px;

    row-gap: 2em;
    padding-top: 30px;
    padding-inline: max(40px, calc((100vw - var(--max-article-width)) / 2));
  }
}

.page-header > .breadcrumbs {
  width: 100%;
}

.page-header > h1 {
  text-align: center;
  font-size: 22px;
  font-weight: bold;
}
@media screen and (min-width: 520px) {
  .page-header > h1 {
    font-size: 30px;
  }
}
@media screen and (min-width: 745px) {
  .page-header > h1 {
    font-size: 36px;
  }
}

/* ----------------------------------------
社債とは
---------------------------------------- */

.what-is-corporate-bonds > h3 {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 40px;
}
.what-is-corporate-bonds > h3:nth-of-type(n + 2) {
  margin-top: 40px;
}
.what-is-corporate-bonds > h3::before,
.what-is-corporate-bonds > h3::after {
  content: "";
  border-top: 1px solid #d0d0d0;
}
@media screen and (min-width: 960px) {
  .what-is-corporate-bonds > h3 {
    grid-template-columns: 60px auto 1fr;
  }
  .what-is-corporate-bonds > h3:nth-of-type(n + 2) {
    margin-top: 60px;
  }
}

.what-is-corporate-bonds .three-columns {
  align-items: center;
  row-gap: 35px;
  column-gap: 3em;
}

.what-is-corporate-bonds .feature {
  max-width: 290px;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 0.5em;
}
.feature > .feature-image {
  max-width: 248px;
}

.feature > .caption {
  display: flex;
  column-gap: 1em;
}

.feature > .caption > .description {
  line-height: 1.6;
  font-size: 16px;
  font-weight: bold;
}
@media screen and (min-width: 960px) {
  .feature > .caption > .description {
    font-size: 18px;
  }
}

.what-is-corporate-bonds ul {
  display: flex;
  flex-direction: column;
  row-gap: 1.5em;
}

.what-is-corporate-bonds li {
  line-height: 1.6;
}

.what-is-corporate-bonds li > strong {
  display: block;
}

.what-is-corporate-bonds .risk {
  display: flex;
  flex-direction: column;
  row-gap: 1.5em;
  font-size: 16px;
}
@media screen and (min-width: 960px) {
  .what-is-corporate-bonds .risk {
    font-size: 18px;
  }
}

/* ----------------------------------------
Siiibo証券で社債に投資する仕組み
---------------------------------------- */

.siiibo-scheme > ul {
  padding-left: 1em;
  display: flex;
  flex-direction: column;
  row-gap: 0.5em;
}

.siiibo-scheme li {
  list-style: disc;
}

.siiibo-scheme img {
  max-width: min(100%, 729px);
}

.siiibo-scheme .note {
  max-width: 750px;
  width: 100%;
}

/* ----------------------------------------
Siiibo証券の少人数私募社債とは
---------------------------------------- */

.siiibo-private-placement-bonds > .description {
  display: flex;
  flex-direction: column;
  row-gap: 1em;
  text-align: left;
  line-height: 1.7;
}
@media screen and (min-width: 520px) {
  .siiibo-private-placement-bonds > .description {
    text-align: center;
  }
}

/* ----------------------------------------
図説：Siiibo証券の少人数私募社債とは
---------------------------------------- */

.figure_corporate_bond {
  position: relative;
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  row-gap: 20px;
  padding: 30px 20px 20px;
  font-size: 12px;
  border: 1px solid #c4c4c4;
}
@media screen and (min-width: 520px) {
  .figure_corporate_bond {
    margin-top: 50px;
  }
}
@media screen and (min-width: 590px) {
  .figure_corporate_bond {
    grid-template-columns: 1fr auto;
    column-gap: 20px;
  }
}
@media screen and (min-width: 700px) {
  .figure_corporate_bond {
    grid-template-columns: 1fr 240px;
  }
}
@media screen and (min-width: 768px) {
  .figure_corporate_bond {
    padding: 35px 25px 25px;
    column-gap: 25px;
  }
}

.figure_corporate_bond ul > li {
  list-style: none;
}
.private_bond {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  row-gap: 20px;
  padding: 30px 20px 20px;
  border: 1px solid #c4c4c4;
}
@media screen and (min-width: 768px) {
  .private_bond {
    padding: 35px 25px 25px;
    column-gap: 25px;
  }
}
@media screen and (min-width: 850px) {
  .private_bond {
    grid-template-columns: 1fr auto;
  }
}
@media screen and (min-width: 1000px) {
  .private_bond {
    grid-template-columns: 1fr 220px;
  }
}

.bond_title,
.private_bond_title {
  position: absolute;
  top: 0;
  left: 50%;
  display: flex;
  font-size: min(4vw, 15px);
  font-weight: bold;
  background-color: #fff;
  /* ここで線の上の文字を実装しているが、要素としては元の位置にあるのでz-indexを追加 */
  z-index: 1;
}
.bond_title {
  transform: translate(-2em, -12.5px);
}
.private_bond_title {
  transform: translate(-3em, -12.5px);
}
.bond_title::before,
.bond_title::after,
.private_bond_title::before,
.private_bond_title::after {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  background-color: #fff;
}

.siiibo_private_bond {
  border: 1px solid #c4c4c4;
}
@media screen and (min-width: 900px) {
  .siiibo_private_bond {
    font-size: 1.25vw;
    font-size: min(1.25vw, 15px);
  }
}
.siiibo_private_bond_title {
  text-align: center;
  line-height: 2;
  font-weight: bold;
  background-color: #ebeff0;
  border-bottom: 1px solid #c4c4c4;
}

.siiibo_private_bond_body {
  padding: 1em;
}
.siiibo_private_bond_body > :nth-child(n + 2) {
  margin-top: 0.5em;
}
.siiibo_private_bond_body > ul {
  padding: 0;
  row-gap: 0;
}

.qualified_investor {
  border: 1px solid #c4c4c4;
}
@media screen and (min-width: 900px) {
  .qualified_investor {
    font-size: 1.25vw;
    font-size: min(1.25vw, 15px);
  }
}
.qualified_investor_title {
  text-align: center;
  line-height: 2;
  font-weight: bold;
  border-bottom: 1px solid #c4c4c4;
}

.qualified_investor_body {
  padding: 1em;
}

.publicly_offered_bonds {
  height: min-content;
  border: 1px solid #c4c4c4;
}
@media screen and (min-width: 900px) {
  .publicly_offered_bonds {
    font-size: 1.25vw;
    font-size: min(1.25vw, 15px);
  }
}
@media screen and (max-width: 899px) {
  .publicly_offered_bonds {
    font-size: 12px;
  }
}

.publicly_offered_bonds_title {
  text-align: center;
  line-height: 2;
  font-weight: bold;
  border-bottom: 1px solid #c4c4c4;
}

.publicly_offered_bonds_body {
  padding: 1em;
}

.publicly_offered_bonds_body ul {
  padding: 0;
  row-gap: 0;
}