/* 後でstyle.cssで共通化 */
.lower-section {
  padding: 6.5rem 2.5rem 10rem;
}

@media (width < 768px) {
  .lower-section {
    padding: 4.5rem 0 7.5rem;
  }
}

section {
  scroll-margin-top: 120px;
}

.post-card {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem 2.1277%;
}

.post-item {
  width: 31.9149%;
  border: 1px solid #ccc;
  background: #fff;
  box-shadow: 2px 2px 6px 0px rgba(255, 255, 255, 0.10);
  border-radius: 0.5rem;
  overflow: hidden;
}

.post-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  &[target] {
    .link-text {
      background-image: url(/assets/images/common/blue-arrow-up-right-from-square.svg);
      background-size: .875rem .875rem;
    }
  }
  &:hover{
    text-decoration: none;
    color: #343B8B;

    .post-figure {
      &::after {
        opacity: 1;
      }
    }
  }
  .post-title {
    color: inherit;
  }

}

.post-figure {
  width: 100%;
  overflow: hidden;
  position: relative;
  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }

  &::before {
    content: "";
    display: block;
    padding-top: 55.8659%;
  }
  &::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.30);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: .3s;
  }
}

.post-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.6;
  padding: 24px;
  min-height: 160px;
  position: relative;

  .lead-text {
    font-size: 0.875rem;
    margin-bottom: 24px;
  }

  .link-text {
    color: #0055AD;
    background: no-repeat 100% 50%;
    background-image: url(/assets/images/common/arrow-btn.svg);
    display: inline-block;
    padding-right: 20px;
    margin-top: auto;
  }
}

.post-title {
  font-size: 1rem;
  font-weight: 700;
  font-variation-settings: "wght" 700;
  margin: 0 0 24px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  transition: .3s;
}

.post-lead {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.post-date {
  display: block;
  font-size: 0.875rem;
  color: #666;
  margin: 1.5rem 0 0;
}

.pickup-card {
  margin-bottom: 72px;
  .post-item {
    width: 100%;
    position: relative;

    a {
      display: flex;
      padding: 24px;

      &:hover {
        text-decoration: none;
      }

      .post-figure {
        width: auto;
        flex: 0 0 400px;
        min-height: 240px;

        img {
          border-radius: 8px;
        }

        &::before {
          padding-top: 24px;
        }
      }
      .post-text {
        .post-title {
          font-size: 1.5rem;
        }
      }
    }
  }
  .post-item::before {
    width: 72px;
    height: 72px;
    content: "PICKUP";
    position: absolute;
    top: 8px;
    left: 8px;
    background-color: #9747FF;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 40px;
    z-index: 1;
    font-size: 15px;
    color: #fff;
  }

  .post-link {
    flex-direction: row;
  }
}

@media (width >= 992px) {
  .post-link {
    &:hover {
      text-decoration: none;
      & .post-figure {
        &::after {
          opacity: 1;
        }
      }
      & .post-title, p {
        color: #0055AD;
      }
      & .link-text {
        text-decoration: underline;
      }
    }
  }
}

@media (768px <= width) {
  .sp {
    display: none;
  }
}

@media (width < 768px) {
  .pc {
    display: none;
  }

  .pickup-card {
    & .post-item {
      a {
        flex-direction: column;
        padding: 0;

        .post-figure {
          flex: 0 0 auto;
          min-height: auto;

          img {
            border-radius: 8px 8px 0 0;
          }

          &::before {
            padding-top: 58.4795%;
          }
        }

        .post-text {
          padding: 24px;

          .post-title {
            font-size: 1rem;
          }
        }
      }
    }
  }

  .post-list {
    flex-direction: column;
  }

  .post-item {
    width: 100%;
  }

  .post-figure {
    &::before {
      padding-top: 58.4795%;
    }
  }
}
/**/


/* 詳細 */
.column-head {
  max-width: 50rem;
  margin: 0 auto 2rem;

  & h1 {
    font-size: 1.75rem;
    font-weight: 500;
    font-variation-settings: "wght" 500;
    line-height: 1.5;
    margin: 0 0 1rem;
  }

  & .publish-date {
    display: flex;
    font-size: 0.875rem;
    color: #666;
    margin: 0 0 2rem;
    gap: 16px;

    &.modified_date::before {
      content: " ";
    }
  }
}

.column-body {
  max-width: 50rem;
  margin: 0 auto;
  padding: 0 0 6.5rem;
  letter-spacing: 0;
  line-height: 1.6;

  strong {
    font-weight: 700;
    font-variation-settings: "wght" 700;
  }

  .numbering_list {
    margin: 16px 0 16px 40px;
    list-style: numeric;
    line-height: 160%;
  }

  pre {
    padding: 20px;
    background-color: #eee;
    color: #000;
    overflow: auto;
  }

  & .toc {
    background: #F9F9F9;
    border-radius: .25rem;
    margin: 0 0 4rem;

    & summary {
      display: flex;
      justify-content: space-between;
      padding: 1.5rem 3rem;
      cursor: pointer;
      &::after {
        content: "";
        display: block;
        width: 1.5rem;
        height: 1.5rem;
        background: url('data:image/svg+xml;utf-8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17 14.5L12 9.5L7 14.5" stroke="%23666666" stroke-width="2" stroke-linecap="round"/></svg>') no-repeat center center;
        background-size: 100% 100%;
        transform: rotate(180deg);
      }
    }

    &[open] {
      & summary {
        &::after {
          transform: none;
        }
      }
    }
  }

  & .toc-contents {
    padding: 0 3rem 1.5rem;
  }

  & .toc-list {
    & li {
      padding: .75rem 0;
      border-bottom: 1px dashed #ccc;
      &:last-child {
        border-bottom: none;
      }
      & a {
        font-weight: 500;
        font-variation-settings: "wght" 500;
        color: #333;
        text-decoration: none;
      }
    }
  }

  & .toc-list--child {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .5rem 0 0 1.5rem;
    & li {
      padding: 0;
      border-bottom: none;
      & a {
        font-size: 0.875rem;
        font-weight: 400;
        font-variation-settings: "wght" 400;
      }
    }
  }

  & h2 {
    scroll-margin-top: 120px;
    color: #343B8B;
    font-size: 2rem;
    font-weight: 700;
    font-variation-settings: "wght" 700;
    line-height: 1.5;
    margin: 4rem 0 1.5rem;

    & + figure {
      margin-top: 0;
    }
  }

  & h3 {
    scroll-margin-top: 120px;
    color: #343B8B;
    font-size: 1.25rem;
    font-weight: 700;
    font-variation-settings: "wght" 700;
    line-height: 1.5;
    margin: 3.5rem 0 1rem;
    padding-bottom: 16px;
    border-bottom: 4px solid #343B8B;

    & + figure {
      margin-top: 0;
    }
  }

  & h4 {
    font-size: 1.125rem;
    font-weight: 500;
    font-variation-settings: "wght" 500;
    line-height: 1.6;
    margin: 2.5rem 0 1rem;
    padding-left: 10px;
    border-left: 16px solid #343B8B;

    & + figure {
      margin-top: 0;
    }
  }

  & p {
    margin: 0 0 1rem;
  }

  & a:not(.cta-btn):not(.click-area):not(.toc-list>li>a):not(.modaal_img) {
    color: #0055AD;
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }
  & a[target="_blank"] {
    &::after {
      content: "";
      display: inline-block;
      width: 1rem;
      height: 1rem;
      background: url(../images/common/blue-arrow-up-right-from-square.svg);
      background-size: 100% 100%;
      margin: 0 4px -2px 8px;
    }
  }

  & figure:not(.image) {
    margin: 1.5rem 0;
    text-align: center;
  }

  & dl {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 1.5rem 0;
    & dt {
      font-weight: 500;
      font-variation-settings: "wght" 500;
    }
  }

  & .box {
    padding: 1rem;
    background: #F9F9F9;
    border-radius: .25rem;
    margin: 0 0 2rem;
  }

  & .list {
    background-color: #F9F9F9;
    padding: 16px;
    margin: 16px 0;

    & li {
      &::before {
        content: "・";
      }
    }
  }

  .table-area {
    margin-bottom: 1.25rem;
    padding: 0.25rem 0;

    table {
      width: 100%;

      th, td {
        border-spacing: 0;
        border-collapse: collapse;
        border: 1px solid #ccc;
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
        padding-right: 1.25rem;
        padding-left: 1.25rem;
        display: table-cell;
        font-size: 1rem;
        line-height: 1.5;
        color: #333;
      }

      th {
        background-color: #f5f5f5;
        text-align: left;
        width: calc(240px - 1.25rem);
        font-weight: normal;
      }

      .small-text {
        font-size: 0.875rem;
      }

      .small-cell {
        min-width: 10rem;
      }

      .center {
        text-align: center;
      }

      .list {
        background-color: transparent;
        padding: 0;
        margin: 0;

        li {
          padding-left: 0.875rem;
          text-indent: -0.875rem;
        }
      }
    }

    .blue {
      .thead {
        background-color: #467AEC;
        color: #fff;
        text-align: center;
        width: auto;
        font-variation-settings: "wght" 700;
      }
    }
    .imageflux_price {
      .fourth-cell {
        width: 20%;
      }
      .thead {
        background-color: #666;
      }
      .premium {
        background-color: #467AEC;
      }
      .ruby {
        font-size: 0.5rem;
      }
      .text {
        display: block;
        font-size: 1rem;
        color: inherit;
      }
      th, td {
        font-size: 0.75rem;
      }
    }
  }
  @media screen and (max-width: 767px) {
    .table-area {
      overflow-x: scroll;
      width: 100%;
      padding-bottom: 0.625rem;
      display: block;
      .table {
        width: 200%;
      }
    }
  }

  .large-btn {
    text-align: center;

    .cta-btn {
      width: 100%;
      max-width: 400px;
      height: 64px;
      font-size: 18px;
      font-variation-settings: "wght" 500;

      .text {
        color: inherit;
      }
    }
  }
}

.column-card-list {
  padding: 8px 0;
  margin-bottom: 1.25rem;

  .click-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 8px;
    transition: all 0.2s ease-in-out;
    border-radius: 8px;
    background-color: #f9f9f9;

    :hover {
      text-decoration: underline;
    }

    .image {
      padding-bottom: 0;
      width: 30%;
      border-radius: 8px 0 0 8px;
      overflow: hidden;

      img {
        transition: all 0.2s ease-in-out;
      }
    }
    .text-area {
      padding-left: 16px;
      padding-right: 8px;
      width: 70%;

      .lead {
        font-size: 1rem;
        margin-bottom: 16px;
      }

      .more-link {
        color: #0055AD;
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        line-height: 1;
      }
    }
  }

  & a[target="_blank"] {
    &::after {
      display: none;
    }
  }

  & .text-area .separate-tab{
    &::after {
        content: "";
        display: inline-block;
        width: 1rem;
        height: 1rem;
        background: url(../images/common/blue-arrow-up-right-from-square.svg);
        background-size: 100% 100%;
        margin: 0 4px -2px 8px;
    }
  }
}

.series_card_list .column-card-list {
  margin-bottom: 0;
  padding: 0;
}


.document {
  margin: 2.0rem 0;
  padding-top: 0.5rem;

  .cta.bg-gray {
    background-color: #F4F4F4;
  }
  .cta {
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #f9f9f9;

    .headline {
      padding: 0.5rem 0;
      margin: 0;
      margin-bottom: 1.5rem;
      border: none;
      text-align: center;

      .text {
        font-size: 1.5rem;
        font-variation-settings: "wght" 700;
        text-align: center;
       }
    }

    .flex-layout {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-bottom: 1rem;

      .image {
        width: 50%;
      }

      .text-area {
        width: calc(50% - 1.25rem);
        padding-left: 1.25rem;
        line-height: 2;
      }
    }
    .text {
      color: inherit;
    }
  }
}

@media screen and (max-width: 767px) {
  .document {
    .cta {
      .flex-layout {
        flex-direction: column;
        .image,
        .text-area {
          margin-top: 0;
          padding-left: 0;
          width: auto;
        }
      }
    }
  }
}


.reference-area {
  padding: 56px 20px 20px 24px;
  background-color: #fff;
  box-shadow: 0 8px 16px rgb(193 200 222 / 30%);
  border-radius: 8px;
  position: relative;
  margin-top: 80px;

  .title {
    line-height: 1;
    display: block;
    margin-bottom: 1rem;
    font-weight: normal;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    background-color: #343b8b;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;

    .text {
      font-size: 0.875rem;
      color: #fff;
      display: block;
      text-align: center;
      padding: 0.75rem 0;
    }
  }

  h4 {
    margin-top: 0;
    padding-left: 0;
    border-left: 0;
  }

  .minheadline {
    margin: 0;
    padding-bottom: 0;

    .text {
      font-size: 1rem;
      padding-bottom: 0;
      font-variation-settings: "wght" 500;
    }
  }
  .note {
    margin-bottom: 0;
    padding-top: 0.625rem;
    padding-left: 0;
    font-size: 0.875rem;
    text-align: left;
    line-height: 1.75;
  }
}


.column-related {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  & h2 {
    text-align: left;
  }
}

@media (width >= 992px) {
  .column-body {
    .toc-list {
      & li {
        & a {
          &:hover {
            text-decoration: underline;
          }
        }
      }
    }

    & a {
      &:hover {
        text-decoration: none;
      }
    }
  }
}

@media (width < 768px) {
  .column-head {
    margin: 0 .5rem 2rem;

    & h1 {
      font-size: 1.375rem;
    }

    & .publish-date {
      margin: 0 0 2.5rem;
    }

    & figure {
      margin: 0 -.5rem;
      border-radius: 0.25rem;
      overflow: hidden;
    }

  }

  .column-body {
    margin: 0;
    padding: 0 0 4.5rem;

    & .toc {
      margin: 0 0 4rem;

      & summary {
        padding: 1rem;
      }
    }

    & .toc-contents {
      padding: .5rem 1rem 1rem;
    }

    & .toc-list--child {
      gap: 1rem;
      padding: 1rem 0 0 1.5rem;
    }

    & h2 {
      font-size: 1.375rem;
    }

    & h3 {
      font-size: 1.125rem;
    }

    & h4 {
      font-size: 1rem;
      margin: 3rem 0 1rem;
    }

    & p {
      margin: 0 0 1.5rem;
    }

    & figure {
      margin: 2rem 0 1.5rem;
    }
  }

  .column-related {
    gap: 2.5rem;
    & h2 {
      font-size: 1.375rem;
    }
  }

  .column-card-list {
    & .click-area {
      flex-direction: column;

      .image {
        width: 100%;
        margin: 0;
      }

      .text-area {
        width: 100%;
        padding: 16px 8px;
        line-height: 200%;
      }
    }
  }
}