/*
* banso.css
*
*/
:root {
  --color-black: #231200;
  --color-white: #fff;
  --color-ktn-yellow: #ffbf00;
  --color-yellow-01: #ffcb31;
  --color-yellow-02: #ffdb4f;
  --color-yellow-03: #ffe84f;
  --color-yellow-04: #fff8b5;
  --color-orange: #ff8f00;
  --color-orange-01: #ff4c00;
  --color-bg: #fff5e1;
  --color-bg-overlay: color-mix(in srgb, var(--color-black-btn) 30%, transparent);
  --color-line-dashed: #999;
  --color-line-solid: #d6d5d5;
  --color-panel: #f3f3f3;
  --color-black-btn: #333;
  --color-black-txt: #666;
  --color-accent-red: #ff4949;
  --color-accent-pink: #e23a9a;
  --color-accent-yellowgreen: #95d542;
  --color-accent-emerald: #09cd96;
  --color-accent-turquoise: #26d1db;
  --color-accent-blue: #3139e8;
  --color-accent-bluegray: #c5cfd6;
  --color-error: #c00;
  --weight-thin: 100;
  --weight-extra-light: 200;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semi-bold: 600;
  --weight-bold: 700;
  --weight-extra-bold: 800;
  --weight-black: 900;
  --color-hover-gray: #f2f0f0;
}

/* --------------------------------
  Banso
-------------------------------- */
.banso_table {
  margin-inline: calc((var(--inline-padding) + 15px) * -1);
}
@media (min-width: 768px) {
  .banso_table {
    margin-inline: initial;
  }
}
.banso_table table {
  display: grid;

  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  overflow-wrap: break-word;
}
@media (min-width: 768px) {
  .banso_table table {
    grid-template-columns: minmax(auto, 210px) repeat(2, 1fr);
  }
}
.banso_table table tbody b {
  font-weight: 900;
}
.banso_table table thead,
.banso_table table tbody,
.banso_table table tfoot,
.banso_table table tr {
  display: contents;
}
.banso_table table th,
.banso_table table td {
  padding: 15px 10px;
}
@media (min-width: 768px) {
  .banso_table table th,
  .banso_table table td {
    padding: 20px;
  }
}
.banso_table table th[colspan="2"],
.banso_table table td[colspan="2"] {
  grid-column: auto/span 2;
}
.banso_table table th[colspan="3"],
.banso_table table td[colspan="3"] {
  grid-column: auto/span 3;
}
.banso_table table th[rowspan="2"],
.banso_table table td[rowspan="2"] {
  grid-row: auto/span 2;
}
.banso_table table td {
  background-color: var(--reversal-color);
}
@media (min-width: 768px) {
  .banso_table table td {
    padding: 30px;
  }
}
.banso_table table td > :not(:first-child) {
  margin-top: 5px;
}
@media (min-width: 768px) {
  .banso_table table td > :not(:first-child) {
    margin-top: 10px;
  }
}
.banso_table table td._bg_yellow {
  background-color: var(--color-yellow-04);
}
.banso_table table td._sub_head {
  padding: 10px;
  background-color: var(--color-black-txt);
  text-align: center;
  word-break: keep-all;
  color: var(--color-white);
  font-weight: bold;

  grid-column: auto/span 2;
}
@media (min-width: 768px) {
  .banso_table table td._sub_head {
    display: grid;
    padding: 20px;

    place-items: center;
    grid-column: initial;
  }
}
.banso_table .banso_table_head:first-child {
  display: none;
}
@media (min-width: 768px) {
  .banso_table .banso_table_head:first-child {
    display: block;
  }
}
.banso_table .banso_table_head:nth-child(2) {
  border-top-left-radius: 10px;
  background-color: var(--color-ktn-yellow);
}
.banso_table .banso_table_head:nth-child(3) {
  border-top-right-radius: 10px;
  background-color: var(--color-accent-bluegray);
}
@media (min-width: 768px) {
  .banso_table tr:first-child .banso_table_item:first-child {
    border-top-left-radius: 10px;
  }
}
.banso_table tr:last-child .banso_table_item:last-child {
  border-bottom-right-radius: 10px;
}
.banso_table tr:last-child .banso_table_item:nth-last-child(2) {
  border-bottom-left-radius: 10px;
}
@media (min-width: 768px) {
  .banso_table tr:last-child .banso_table_item:nth-last-child(2) {
    border-radius: 0;
  }
}
@media (min-width: 768px) {
  .banso_table tr:last-child .banso_table_item:first-child {
    border-bottom-left-radius: 10px;
  }
}

.step_list {
  display: grid;

  grid-template-rows: auto repeat(4, 1fr);
  gap: 60px;
}
@media (min-width: 768px) and (max-width: 1279.98px) {
  .step_list {
    display: grid;

    grid-template-rows: auto repeat(4, 1fr);
    gap: 60px;
  }
}
@media (min-width: 1280px) {
  .step_list {
    display: grid;
    position: relative;
    padding-bottom: 22px;

    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 50px 20px;
  }
  .step_list::before {
    content: "";
    position: absolute;
    right: -100%;
    bottom: -4px;
    left: -100%;
    margin: auto;
    border: 4px solid var(--color-orange);
    border-radius: 30px;
    width: calc(100% + 120px);
    height: 305px;
  }
}

.step_listItem {
  position: relative;
  padding: 40px 15px;
  border-radius: 20px;
  background-color: var(--color-panel);
}
@media (max-width: 767.98px) {
  .step_listItem:not(:first-child) {
    margin-right: 30px;
  }
  .step_listItem:not(:last-child)::before {
    content: "";
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: -66px;
    left: 0;
    margin: auto;
    margin: auto;
    width: 30px;
    background-color: var(--color-orange);

    aspect-ratio: 38/21;
    -webkit-mask-image: url("/assets_2025/img/common/deco/arw_down.svg");
            mask-image: url("/assets_2025/img/common/deco/arw_down.svg");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
  }
  .step_listItem:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -60px;
    left: 0;
    margin: auto;
    width: 4px;
    height: 60px;
    background-color: var(--color-orange);
  }
  .step_listItem:last-child::before {
    content: "";
    position: absolute;
    z-index: 1;
    right: -15px;
    bottom: calc(350% + 165px);
    margin: auto;
    width: 30px;
    transform: rotate(90deg);
    background-color: var(--color-orange);

    aspect-ratio: 38/21;
    -webkit-mask-image: url("/assets_2025/img/common/deco/arw_down.svg");
            mask-image: url("/assets_2025/img/common/deco/arw_down.svg");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
  }
  .step_listItem:last-child::after {
    content: "";
    position: absolute;
    right: -30px;
    bottom: calc(50% - 2px);
    margin: auto;
    border: 4px solid var(--color-orange);
    border-radius: 15px;
    width: 100%;
    height: calc(300% + 178px);
    pointer-events: none;

    clip-path: polygon(calc(100% - 30px) 0, 100% 0, 100% 100%, calc(100% - 30px) 100%);
  }
}
@media (min-width: 768px) and (max-width: 1279.98px) {
  .step_listItem {
    padding: 60px;
  }
  .step_listItem:not(:first-child) {
    display: grid;
    margin-right: 60px;

    gap: 20px 60px;
    grid-template-columns: 6fr 4fr;
  }
  .step_listItem:not(:last-child)::before {
    content: "";
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: -66px;
    left: 0;
    margin: auto;
    margin: auto;
    width: 30px;
    background-color: var(--color-orange);

    aspect-ratio: 38/21;
    -webkit-mask-image: url("/assets_2025/img/common/deco/arw_down.svg");
            mask-image: url("/assets_2025/img/common/deco/arw_down.svg");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
  }
  .step_listItem:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -60px;
    left: 0;
    margin: auto;
    width: 4px;
    height: 60px;
    background-color: var(--color-orange);
  }
  .step_listItem:last-child::before {
    content: "";
    position: absolute;
    z-index: 1;
    right: -15px;
    bottom: calc(350% + 165px);
    margin: auto;
    width: 30px;
    transform: rotate(90deg);
    background-color: var(--color-orange);

    aspect-ratio: 38/21;
    -webkit-mask-image: url("/assets_2025/img/common/deco/arw_down.svg");
            mask-image: url("/assets_2025/img/common/deco/arw_down.svg");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
  }
  .step_listItem:last-child::after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: calc(50% - 2px);
    margin: auto;
    border: 4px solid var(--color-orange);
    border-radius: 30px;
    width: 100%;
    height: calc(300% + 178px);
    pointer-events: none;

    clip-path: polygon(calc(100% - 60px) 0, 100% 0, 100% 100%, calc(100% - 60px) 100%);
  }
}
@media (min-width: 1280px) {
  .step_listItem {
    padding: 60px;
  }
  .step_listItem:not(:first-child) {
    display: grid;
    margin-top: 0;
    margin-right: 0;
    padding: 30px;

    grid-template-rows: subgrid;
    grid-row: span 3;
    gap: 0;
  }
  @supports (-webkit-hyphens: none) {
    .step_listItem:not(:first-child) > * {
      min-width: 0;
    }
    .step_listItem:not(:first-child) .c-img {
      align-self: start;
    }
  }
  .step_listItem:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 29px;
    left: -14px;
    margin: auto;
    width: 30px;
    transform: rotate(-90deg);
    background-color: var(--color-orange);

    aspect-ratio: 38/21;
    -webkit-mask-image: url("/assets_2025/img/common/deco/arw_down.svg");
            mask-image: url("/assets_2025/img/common/deco/arw_down.svg");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
  }
}
@media (min-width: 768px) and (max-width: 1279.98px) {
  .step_listItem > div {
    align-self: flex-end;
  }
}
.step_listItem:first-child {
  border: 1px solid var(--color-line-solid);
  background-color: transparent;
}
@media (min-width: 768px) {
  .step_listItem:first-child {
    padding: 40px 60px;
  }
  .step_listItem:first-child .c-typo_h3 {
    font-size: 2rem;
  }
}
@media (min-width: 1280px) {
  .step_listItem:first-child {
    z-index: 2;

    grid-row: 1/2;
    grid-column: 1/span 4;
  }
  .step_listItem:first-child::before {
    content: "";
    position: absolute;
    bottom: -60px;
    left: calc(12.5% - 17px);
    margin: auto;
    width: 30px;
    background-color: var(--color-orange);

    aspect-ratio: 38/21;
    -webkit-mask-image: url("/assets_2025/img/common/deco/arw_down.svg");
            mask-image: url("/assets_2025/img/common/deco/arw_down.svg");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
  }
  .step_listItem:first-child::after {
    content: "";
    position: absolute;
    bottom: -50px;
    left: calc(12.5% - 4px);
    width: 4px;
    height: 50px;
    background-color: var(--color-orange);
  }
}
.step_listItem .c-typo_h3 {
  margin-top: 5px;
  word-break: keep-all;
}
@media (min-width: 768px) {
  .step_listItem .c-typo_h3 {
    margin-top: 10px;
    font-size: 1.75rem;
    line-height: 1.5;
  }
}
.step_listItem .c-img {
  margin-top: 20px;
  width: 100%;
}
@media (min-width: 768px) and (max-width: 1279.98px) {
  .step_listItem .c-img {
    align-self: flex-start;
    margin-top: 0;

    grid-column: 2/3;
    grid-row: 1/span 2;
  }
}
.step_listItem .c-img + .c-typo_txt {
  margin-top: 20px;
}
@media (min-width: 768px) and (max-width: 1279.98px) {
  .step_listItem .c-img + .c-typo_txt {
    margin-top: 0;
  }
}
.step_listItem .c-typo_txt {
  margin-top: 20px;
}
@media (min-width: 768px) and (max-width: 1279.98px) {
  .step_listItem .c-typo_txt {
    margin-top: 0;
  }
}
@media (min-width: 1280px) {
  .step_listItem .c-typo_txt {
    margin-top: 30px;
  }
}

.step_desc {
  margin-top: 60px;
}
@media (min-width: 768px) {
  .step_desc {
    margin-top: 68px;
  }
}