:root {
  --font-yugothic: "MFW-YuGoPr6N-Bold";
  --font-yugothic-e: "MFW-YuGoStdN-ExtraBold";
  --small-gray: #8A8A8A;
  --part1-purple: #95549E;
  --red: #EE512B;
  --pink: #F54F94;
  --orange: #FF9D0D;
}
.part-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
}

#content {
  background-color: #fff;
  border-bottom: 2px solid #E3E3E3;
  font-family: var(--font-yugothic);
  font-weight: bold;
  font-feature-settings: 'palt';
  small,span,h1,h2,h3,h4,li {
    font-feature-settings: 'palt';
    letter-spacing: 0.08em;
  }
  img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
  }
  p {
    font-size: 16px;
    text-align: justify;
    letter-spacing: 0.05em;
    line-height: 2;
  }
  #page-head {
    h1 {
      height: 123px;
      padding: 21px 0;
      background: #fff;
      text-align: center;
      @media (width <= 800px) {
        height: 90px;
        padding: 15px 0;
      }
      img {
        width: 204px;
        margin-right: -2px;
        @media (width <= 800px) {
          width: 150px;
          margin-right: 0;
        }
      }
    }
  }

  #opinion {
    container-type: inline-size;
    background: #EFEFEF;
    padding-top: clamp(42px, 6.0526vw - 16.8421px, 80px);
    padding-bottom: clamp(47px, 4.7368vw + 2.2105px, 78px);
    padding-left: clamp(23px, calc(2.8947vw - 2.32px), 44px);
    padding-right: clamp(23px, calc(2.8947vw - 2.32px), 44px);
    @media (width <= 800px) {
      padding-top: calc(40 / 375 * 100%);
      padding-bottom: calc(40 / 375 * 100%);
      padding-left: calc(14 / 375 * 100%);
      padding-right: calc(14 / 375 * 100%);
    }
    > h1 {
      width: fit-content;
      margin: 0 auto;
      margin-bottom: clamp(37px, 5.7895vw - 17.6316px, 75px);
      padding: 4px 2px 2px 5px;
      background: #858585;
      color: #fff;
      font-size: clamp(19.84px, 2.6816vw - 5.8553px, 37.05px);
      font-feature-settings: 'palt';
      text-align: center;
      letter-spacing: 0.08em;
      line-height: 1;
      @media (width <= 800px) {
        margin-bottom: calc(40 / 347 * 100cqw);
        padding-top: calc(3 / 347 * 100cqw);
        padding-bottom: calc(3 / 347 * 100cqw);
        padding-left: calc(4 / 347 * 100cqw);
        padding-right: calc(2 / 347 * 100cqw);
        font-size: calc(23.66 / 347 * 100cqw);
      }
    }
    .opinion-wrap {
      container-type: inline-size;
      display: flex;
      justify-content: space-between;
      align-items: stretch;
      flex-wrap: wrap;
      gap: calc(26 / 936 * 100cqw);
      margin: 0 auto;
      @media (width < 960px) {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: calc(14 / 347 * 100cqw);
      }
    }
    .post {
      container-type: inline-size;
      flex-basis: calc(455 / 936 * 100%);
      display: flex;
      aspect-ratio: 91 / 48;
      overflow: hidden;
      @media (width <= 800px) {
        aspect-ratio: 347 / 210;
      }
      .img {
        width: 22.79%;
        clip-path: polygon(100% 0, 100% 100%, calc(0% + calc(35/455*100cqw)) 100%, 0 calc(100% - calc(35/455*100cqw)), 0 0);
        @media (width <= 800px) {
          width: calc(91 / 347 * 100cqw);
        }
        img {
          width: 100%;
          height: auto;
          object-fit: cover;
          aspect-ratio: 13/30;
        }
      }
      .text {
        position: relative;
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: space-between;
        padding-top: calc(19 / 455 * 100cqw);
        padding-bottom: calc(21 / 455 * 100cqw);
        padding-left: calc(25 / 455 * 100cqw);
        background: #fff;
        clip-path: polygon(calc(100% - calc(35/455*100cqw)) 0, 100% calc(0% + calc(35/455*100cqw)), 100% 100%, 0 100%, 0 0);
        @media (width <= 800px) {
          padding-top: calc(19 / 347 * 100cqw);
          padding-bottom: calc(16 / 347 * 100cqw);
          padding-right: calc(19 / 347 * 100cqw);
        }
        h1 {
          font-size: calc(19 / 455 * 100cqw);
          letter-spacing: 0.08em;
          line-height: 1.65;
          @media (width <= 800px) {
            font-size: calc(15.5 / 347 * 100cqw);
          }
        }
        .pc-title {
          @media (width <= 800px) {
            display: none;
          }
        }
        .sp-title {
          @media (width > 800px) {
            display: none;
          }
        }
        .profile {
          .positon {
            font-size: max(9px, calc(9.46 / 455 * 100cqw));
            letter-spacing: 0.08em;
            line-height: 1.6;
            @media (width <= 800px) {
              font-size: calc(9.3 / 347 * 100cqw);
            }
          }
          .name {
            margin-right: calc(9/455*100cqw);
            margin-top: calc(7/455*100cqw);
            font-size: calc(14/455*100cqw);
            letter-spacing: 0.08em;
            line-height: 1.1;
            float: left;
            text-align: left;
            @media (width <= 800px) {
              font-size: calc(12 / 347 * 100cqw);
            }
            span:first-child {
              font-size: max(9px, calc(9.46 / 455 * 100cqw));
              letter-spacing: 0.08em;
              line-height: 1.3;
              @media (width <= 800px) {
                font-size: calc(9.3 / 347 * 100cqw);
              }
            }
            span:last-child {
              font-size: calc(12.5 / 455 * 100cqw);
              margin-left: calc(1 / 455 * 100cqw);
            }
          }
        }
        .profile.is-multiple {
          padding-right: calc(50/455*100cqw);
          @media (width <= 800px) {
            padding-right: calc(45/347*100cqw);
          }
          .name {
            font-size: calc(14/455*100cqw);
            @media (width <= 800px) {
              font-size: calc(9.5 / 347 * 100cqw);
            }
          }
        }
        .button {
          position: absolute;
          bottom: calc(25 / 455 * 100cqw);
          right: calc(24 / 455 * 100cqw);
          display: inline-flex;
          .arrow-pc {
            display: inline-flex;
          }
          .arrow-sp {
            display: none;
          }
          svg {
            width: calc(45 / 455 * 100cqw);
            height: auto;
          }
          @media (width <= 800px) {
            bottom: calc(16 / 347 * 100cqw);
            right: calc(17 / 347 * 100cqw);
            width: calc(32 / 347 * 100cqw);
            justify-content: center;
            border-radius: 100px;
            border: solid 1px #E6E6E6;
            aspect-ratio: 1 / 1;
            .arrow-pc {
              display: none;
            }
            .arrow-sp {
              display: inline-flex;
              svg {
                width: calc(7 / 347 * 100cqw);
              }
            }
          }
        }
      }
    }
  }
  #topics {
    container-type: inline-size;
    padding-left: calc(36 / 1002 * 100%);
    padding-right: calc(29 / 1002 * 100%);
    @media (width < 960px) {
      padding: 0 calc(14.5 / 375 * 100%) calc(51 / 375 * 100%);
    }
    .topics-wrap {
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
      gap: calc(26 / 937 * 100cqw);
      @media (width < 960px) {
        gap: calc(14 / 346 * 100cqw);
        flex-direction: column;
      }
    }
    .post {
      container-type: inline-size;
      position: relative;
      min-height: calc(446 / 937 * 100cqw);
      display: flex;
      flex-basis: calc(295 / 937 * 100cqw);
      flex-direction: column;
      gap: calc(18 / 937 * 100cqw);
      padding: calc(30 / 937 * 100cqw);
      background: #fff;
      clip-path: polygon(0 0, 100% 0, 100% calc(100% - calc(25 / 937 * 100cqw)), calc(100% - calc(25 / 937 * 100cqw)) 100%, 0 100%);
      @media (width < 960px) {
        width: 100%;
        min-height: inherit;
        flex-direction: row;
        gap: calc(15 / 346 * 100cqw);
        padding: 0;
        aspect-ratio: 346 / 138;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - calc(26 / 346 * 100cqw)), calc(100% - calc(26 / 346 * 100cqw)) 100%, 0 100%);
      }
      .img {
        aspect-ratio: 1/1;
        @media (width < 960px) {
          width: calc(138/346*100cqw);
        }

      }
      img {
        aspect-ratio: 1 / 1;
        object-fit: cover;
      }
      .text {
        display: flex;
        flex-direction: column;
        flex: 1;
        justify-content: space-between;
        @media (width < 960px) {
          height: 100%;
          padding-top: calc(12 / 346 * 100cqw);
          padding-bottom: calc(11 / 346 * 100cqw);
        }
      }

      h1 {
        font-size: calc(17 / 235 * 100cqw);
        line-height: 1.65;
        @media (width < 960px) {
          font-size: calc(14 / 346 * 100cqw);
        }
      }
      span {
        color: #767676;
        font-size: max(9px, calc(10 / 235 * 100cqw));
        line-height: 1.5;
        @media (width < 960px) {
          font-size: calc(10/346*100cqw);
        }
      }
    }
  }
  .backtop {
    gap: 14px;
    margin: 0px 0 2px;
    border-top: 2px solid #E3E3E3;
    font-size: 24px;
    font-feature-settings: 'palt';
    letter-spacing: 0.08em;
    @media (width <= 800px) {
      gap: 9px;
      font-size: 20px;
      letter-spacing: 0.03em;
    }
    img {
      width: 26px;
      height: 26px;
      @media (width <= 800px) {
        width: 18px;
        height: 18px;
      }
    }
  }
}