/*
  CSSの`@import`は、複数ファイルの読み込みが遅いなどの理由で非推奨になっている
  ここでは1つのファイルだけを読み込む目的で使用することにする

  複数ファイルを読み込む場合は、

  - Sassの`@use`を使う
  - Frontmaterで複数のCSSファイルを指定できるようにする

  などの代替案を検討すること
*/
@import url("/assets/css/markdown.css");

main {
  --max-article-width: 980px;
}
@media screen and (min-width: 520px) {
  main {
    padding-inline: 40px;
  }
}
@media screen and (min-width: 615px) {
  main {
    padding-inline: max(40px, calc((100vw - var(--max-article-width)) / 2));
  }
}

.article-header h1 {
  text-align: center;
  font-size: 22px;
  font-feature-settings: "palt";
}
@media screen and (min-width: 520px) {
  .article-header h1 {
    font-size: 30px;
  }
}
@media screen and (min-width: 745px) {
  .article-header h1 {
    font-size: 36px;
  }
}

p.page-description {
  text-align: left;
}
@media screen and (min-width: 520px) {
  p.page-description {
    text-align: center;
  }
}

.markdown {
  row-gap: 0;
}
@media screen and (min-width: 745px) {
  .markdown {
    row-gap: 80px;
  }
}

.two-columns {
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 0;
}
.two-columns > .box:nth-child(2) {
  border-top: 1px solid #cdcdcd;
}
@media screen and (min-width: 745px) {
  .two-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .two-columns > .box:nth-child(2) {
    border-top: none;
    border-left: 1px solid #cdcdcd;
  }
}

/* ----------------------------------------
「そのまま保有」または「中途換金」を定期的に選択できる社債です。
---------------------------------------- */

.hold-or-encash {
  width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.hold-or-encash .box {
  padding: 53px 0;
  border-radius: 0;
  align-items: center;
}
@media screen and (min-width: 745px) {
  .hold-or-encash .box {
    padding: 0 1.5em;
    row-gap: 35px;
  }
  .hold-or-encash .box > * {
    max-width: 335px;
  }
}

.hold-or-encash .box .balloon {
  width: 100%;
  max-width: 335px;
}

.hold-or-encash .box > h3 {
  text-align: center;
}

.hold-or-encash .descriptions {
  display: flex;
  flex-direction: column;
  row-gap: 0.25em;
}

.hold-or-encash p.description {
  text-align: center;
  font-size: 14px;
}
@media screen and (min-width: 520px) {
  .hold-or-encash p.description {
    font-size: 16px;
  }
}

/* ----------------------------------------
満期前に換金する方法
---------------------------------------- */

.encashment {
  width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  row-gap: 58px;
}

.encashment .note {
  font-size: clamp(12px, 2.5vw, 14px);
  color: inherit;
}

.table-and-notes {
  display: flex;
  flex-direction: column;
  row-gap: 1em;
}

.table-wrapper {
  overflow-x: auto;
  word-break: keep-all;
}

table.scrollable {
  width: 100%;
  /* 460px以上では横スクロールが発生しないような値 */
  font-size: clamp(10px, 2vw, 14px);
}

table.scrollable tr > :first-child {
  position: sticky;
  left: 0;
  border-left: none; /* 意匠を反映 */
  border-right: none; /* stickyに追従しないborderが2番目の要素のborder-rightのように見えてしまうのを防ぐ */
}
table.scrollable tr > :first-child::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 1px;
  height: 100%;
  border-right: 1px solid #cdcdcd;
}

table.scrollable th,
table.scrollable td {
  padding: 1.5em 5px;
  text-align: center;
  border-color: #cdcdcd;
}
@media screen and (min-width: 745px) {
  table.scrollable th,
  table.scrollable td {
    padding-block: 20px;
  }
}
table.scrollable tr > :nth-child(2) {
  border-left: none;
}
table.scrollable tr > :last-child {
  border-right: none;
}

table.scrollable > thead th {
  font-size: clamp(12px, 2.2vw, 18px);
  background-color: #fbfbfb;
  color: #1e8fda;
}

table.scrollable > tbody th {
  padding-inline: clamp(0.5em, 1.25vw, 1em);
  font-weight: normal;
  background-color: #fff;
  color: #7c7c7c;
}

table td > b {
  display: block;
  font-size: clamp(12px, 2.5vw, 16px);
}