.article-avatar {
    /* レスポンシブ計算用の基準幅（関数の引数のような役割） */
    --color-white: #fff;
    --color-base: #000;
    --color-primary: #2757b9;
    --color-profile01: #1f5720;
    --color-profile02: #af3030;
    --color-profile03: #d46729;
    --base: 1024;
    max-width: 1024px;
    margin: 0 auto;
    font-family: "Noto Sans JP", sans-serif;
    font-feature-settings: "palt";
    container-type: inline-size;
    container-name: base;

    @media (max-width: 672px) {
      position: relative;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      width: 100vw;
      overflow: hidden;
    }
  
    * {
      box-sizing: border-box !important;
    }
  
    p {
      margin: 0;
      line-height: 1.5;
      font-feature-settings: "palt";
      letter-spacing: 0.02em;
    }
  
    img {
      width: 100%;
      height: auto;
      vertical-align: bottom;
    }
  
    .c-heading {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
    }
  
    .c-heading__en-title {
      width: 80%;
      text-align:center;

      @container (width >= 768px) {
        width: 100%;
      }
      svg {
        width: 100%;
      }

      img {
        width: fit-content;
        max-width: 100%;

      }
    }
  
    .c-heading__ja-title {
      font-size: clamp(18px, 24 / var(--base) * 100cqw, 24px);
      font-weight: bold;
    }
  
    .c-container {
      width: 100%;
      padding: 0 clamp(24px, 48 / var(--base) * 100cqw, 48px);
      margin: 0 auto;
    }
  
    .c-container--full {
      @container (width >= 1024px) {
        padding: 0;
      }
    }
  
    .mv {
      position: relative;
  
      img {
        width: 100%;
        height: auto;
        @container (width >= 1024px) {
          border-radius: 16px;
        }
      }
    }
  
    .about {
      padding: clamp(40px, 60 / var(--base) * 100cqw, 60px) 0;
    }
  
    .about__inner {
      position: relative;
      padding: clamp(36px, 72 / var(--base) * 100cqw, 72px) clamp(16px, 64 / var(--base) * 100cqw, 64px);
      border-radius: clamp(24px, 48 / var(--base) * 100cqw, 48px);
      background: linear-gradient(to bottom, #e6f5ff 30%, #e2cffa);
    }
  
    .about__deco {
      position: absolute;
      height: auto;
    }
  
    .about__deco--01 {
      top: 8%;
      right: calc(clamp(12px, 24 / var(--base) * 100cqw, 24px) * -1);
      width: clamp(60px, 90 / 612 * 100cqw, 90px);
  
      @container (width >= 612px) {
        top: 4%;
        width: clamp(68px, 170 / var(--base) * 100cqw, 170px);
      }
  
      @container (width >= 1024px) {
        right: -48px;
      }
    }
  
    .about__deco--02 {
      top: 26%;
      left: calc(clamp(12px, 24 / var(--base) * 100cqw, 24px) * -1);
      width: clamp(60px, 90 / 612 * 100cqw, 90px);
  
      @container (width >= 612px) {
        top: 25%;
        width: clamp(68px, 170 / var(--base) * 100cqw, 170px);
      }
  
      @container (width >= 1024px) {
        left: -48px;
      }
    }
  
    .about__deco--03 {
      top: 34%;
      right: calc(clamp(12px, 24 / var(--base) * 100cqw, 24px) * -1);
      width: clamp(70px, 105 / 612 * 100cqw, 105px);
  
      @container (width >= 612px) {
        top: 45%;
        width: clamp(78px, 195 / var(--base) * 100cqw, 195px);
      }
  
      @container (width >= 1024px) {
        right: -48px;
      }
    }
  
    .about__title {
      font-size: clamp(40px, 80 / var(--base) * 100cqw, 80px);
      font-weight: bold;
      text-align: center;
      color: var(--color-primary);
      line-height: 1.6;
    }
  
    .about__desc {
      margin-top: 32px;
      font-size: clamp(14px, 32 / var(--base) * 100cqw, 32px);
      text-align: center;
      line-height: 2;
  
      .sp-only {
        @container (width >= 612px) {
          display: none;
        }
      }
    }
  
    .designer-message {
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 12px;
      padding: clamp(16px, 40 / var(--base) * 100cqw, 40px);
      margin-top: clamp(32px, 64 / var(--base) * 100cqw, 64px);
    }
  
    .designer-message__title {
      display: block;
      width: clamp(190px, 385 / var(--base) * 100cqw, 385px);
      height: auto;
      text-align: center;
      color: var(--color-primary);
      line-height: 1.6;
    }
  
    .desiner-mesage__name {
      display: block;
      margin-top: 16px;
      font-weight: normal;
      font-size: clamp(16px, 20 / var(--base) * 100cqw, 20px);
      span {
        background-color: var(--color-primary);
        color: var(--color-white);
        padding: 0.3em 0.5em;
        border-radius: 8px;
        margin-right: 8px;
      }
    }
  
    .designer-message__desc {
      margin-top: clamp(8px, 16 / var(--base) * 100cqw, 16px);
      font-size: clamp(16px, 20 / var(--base) * 100cqw, 20px);
      line-height: 1.8;
    }
  
    .designer-message__profile {
      margin-top: 24px;
      padding-top: 24px;
      border-top: 1px solid #D2D2D2;
  
      h4 {
        color: var(--color-primary);
        font-size: clamp(14px, 18 / var(--base) * 100cqw, 18px);
        font-weight: bold;
      }
  
    
  
      p {
        margin-top: 8px;
        font-size: clamp(16px, 20 / var(--base) * 100cqw, 20px);
  
      }
    }
  
    .movie {
      padding: clamp(10px, 20 / var(--base) * 100cqw, 20px) 0 clamp(30px, 60 / var(--base) * 100cqw, 60px);

      .c-heading__en-title {
        img {
          width: clamp(206px, 258 / var(--base) * 100cqw, 258px);
        }
      }
    }
  
    .movie__thumbnail {
      position: relative;
      margin-top: clamp(24px, 40 / var(--base) * 100cqw, 40px);
      border-radius: 12px;
      overflow: hidden;
      width: 100%;
      aspect-ratio: 16 / 9;
      cursor: pointer;
      transition: opacity 0.3s ease;
  
      @media (hover) {
        &:hover {
          opacity: 0.6;
        }
      }
  
      &::after {
        content: "";
        background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTIiIGhlaWdodD0iNTciIHZpZXdCb3g9IjAgMCA1MiA1NyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNDkuNjc4MiAyNC43MTk3QzUyLjQyODUgMjYuMjQyMiA1Mi40Mjg1IDMwLjE5NjMgNDkuNjc4MiAzMS43MTg4TDUuOTM3MjcgNTUuOTMyNUMzLjI3MTI1IDU3LjQwODQgMS4yNjgwM2UtMDYgNTUuNDgwMiAxLjQwMTIzZS0wNiA1Mi40MzNMMy41MTgwNmUtMDYgNC4wMDU1MUMzLjY1MTI2ZS0wNiAwLjk1ODI1NiAzLjI3MTI1IC0wLjk2OTg5NyA1LjkzNzI3IDAuNTA1OTM2TDQ5LjY3ODIgMjQuNzE5N1oiIGZpbGw9IndoaXRlIi8+PC9zdmc+");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        pointer-events: none;
        position: absolute;
        width: 62px;
        height: 56px;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      }
      img {
        border-radius: 12px;
      }
  
      iframe {
        width: 100%;
        height: 100%;
      }
  
      &.is-playing {
        &::after {
          display: none;
        }
  
        img {
          display: none;
        }
      }
    }
  
    .profile {
      padding: clamp(30px, 60 / var(--base) * 100cqw, 60px) 0;

      .c-heading__en-title {
        img {
          width: clamp(263px, 329 / var(--base) * 100cqw, 329px);
        }
      }
    }
  
    .profile__list {
      list-style: none;
      padding: 0;
      margin-top: clamp(24px, 40 / var(--base) * 100cqw, 40px);
      display: flex;
      flex-direction: column;
      gap: clamp(16px, 24 / var(--base) * 100cqw, 24px);
    }
  
    .profile-box {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: clamp(24px, 56 / var(--base) * 100cqw, 56px);
      border-radius: 12px;
      padding: clamp(24px, 64 / var(--base) * 100cqw, 64px);
  
      @container (min-width: 612px) {
        flex-direction: row;
        justify-content: flex-start;
      }
    }
  
    .profile-box--01 {
      background: url("/documents/d/tosei/avatar_profile_bg_01_sp-jpg") no-repeat center center / cover;
  
      @container (min-width: 612px) {
        background-image: url("/documents/d/tosei/avatar_profile_bg_01_pc-jpg");
      }

      .profile-box__img {
        width: clamp(152px, 191 / var(--base) * 100cqw, 191px);
      }
  
      .profile-box__place span {
        background-color: var(--color-profile01);
      }
    }
  
    .profile-box--02 {
      background: url("/documents/d/tosei/avatar_profile_bg_02_sp-jpg") no-repeat center center / cover;
  
      @container (min-width: 612px) {
        background-image: url("/documents/d/tosei/avatar_profile_bg_02_pc-jpg");
      }

      .profile-box__img {
        width: clamp(159px, 191 / var(--base) * 100cqw, 199px);
      }
  
      .profile-box__place span {
        background-color: var(--color-profile02);
      }
    }
  
    .profile-box--03 {
      background: url("/documents/d/tosei/avatar_profile_bg_03_sp-jpg") no-repeat center center / cover;
  
      @container (min-width: 612px) {
        background-image: url("/documents/d/tosei/avatar_profile_bg_03_pc-jpg");
      }

      .profile-box__img {
        width: clamp(168px, 202 / var(--base) * 100cqw, 202px);
      }
  
      .profile-box__place span {
        background-color: var(--color-profile03);
      }
    }
  
    .profile-box__img {
      flex-shrink: 0;
    }
  
    .profile-box__title {
      font-size: clamp(32px, 48 / var(--base) * 100cqw, 48px);
      font-weight: bold;
    }
  
    .profile-box__place {
      margin-top: 12px;
      width: fit-content;
      padding: 8px;
      padding-right: 1.5em;
      border-radius: clamp(8px, 16 / var(--base) * 100cqw, 16px);
      background-color: var(--color-white);
      font-size: clamp(16px, 22 / var(--base) * 100cqw, 22px);
      span {
        display: inline-block;
        margin-right: 0.5em;
        color: var(--color-white);
        padding: 0.1em 0.5em;
        border-radius: 8px;
      }
    }
  
    .profile-box__desc {
      margin-top: clamp(16px, 24 / var(--base) * 100cqw, 24px);
  
      p {
        line-height: 1.8;
        font-size: clamp(16px, 20 / var(--base) * 100cqw, 20px);
      }
    }
  
    .updates {
      display: none;
      padding: clamp(30px, 60 / var(--base) * 100cqw, 60px) 0;

      .c-heading__en-title {
        img {
          width: clamp(289px, 361 / var(--base) * 100cqw, 361px);
        }
      }
    }
  
    .sns {
      padding: clamp(30px, 60 / var(--base) * 100cqw, 60px) 0;

      .c-heading__en-title {
        img {
          width: clamp(121px, 152 / var(--base) * 100cqw, 152px);
        }
      }
    }
  
    .sns__list {
      list-style: none;
      padding: 0;
      margin-top: clamp(24px, 40 / var(--base) * 100cqw, 40px);
      display: flex;
      flex-direction: column;
      gap: clamp(16px, 24 / var(--base) * 100cqw, 24px);
      margin-inline: auto;

      @container (min-width: 800px) {
        flex-direction: row;
        justify-content: center;
        gap: clamp(16px, 24 / var(--base) * 100cqw, 24px);
      }


      li {
        flex-grow: 1;
        container-type: inline-size;
        container-name: sns-block;
      }

      &.sns__list--tokyodouga {

        @container (min-width: 800px) {
          max-width: 400px;
        }

        .sns-block {
          display: block;
        }
      }
    }
  
    .sns-block {
      position: relative;
      display: flex;
      align-items: center;
      gap: 16px;
      border: 4px solid var(--color-primary);
      border-radius: 12px;
      padding: clamp(20px, 32 / 400 * 100cqw, 32px);
      text-decoration: none;
      color: var(--color-base);
      font-size: 16px;
      font-weight: bold;
      transition: opacity 0.3s ease;
      width: 100%;
      height: 100%;

      img {
        width: auto;
      }

      span {
        display: inline-block;
      }

    }
  
    a.sns-block {
      padding-right: calc(clamp(48px, 64 / 400 * 100cqw, 64px) + 12px);
      &:after {
        content: "";
        position: absolute;
        top: 50%;
        right: clamp(24px, 32 / 400 * 100cqw, 32px);
        width: 26px;
        height: 26px;
        transform: translateY(-50%);
        background: url("/documents/d/tosei/avatar_sns-block_icon-svg") no-repeat center center / contain;
      }
      
      @media (hover) {
        &:hover {
          opacity: 0.6;
        }
      }
    }
  
    .sns__instagram {
      margin-top: clamp(48px, 72 / var(--base) * 100cqw, 72px);
      margin-inline: auto;
  
      @container (min-width: 800px) {
        max-width: 100%;
      }
    }
  
    .instagram-block {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-decoration: none;
      gap: clamp(8px, 16 / 800 * 100vw, 16px);
      border: 4px solid var(--color-primary);
      border-radius: 12px;
      padding: clamp(24px, 32 / var(--base) * 100cqw, 32px);
      transition: opacity 0.3s ease;
  
      @container (min-width: 800px) {
        gap: clamp(8px, 32 / var(--base) * 100cqw, 32px);
        flex-direction: row;
        align-items: flex-end;
        padding: clamp(32px, 54 / var(--base) * 100cqw, 54px) 0;
        padding-right: 32px;
      }
  
      @media (hover) {
        &:hover {
          opacity: 0.6;
        }
      }
  
      &:after {
        display: none; // デフォルトの打ち消し
      }
    }
  
    .instagram-block__img {
      position: relative;
      width: clamp(294px, 476 / var(--base) * 100cqw, 476px);
      min-height: 94px;
  
      @container (min-width: 800px) {
        flex-shrink: 0;
        margin-bottom: calc(clamp(32px, 54 / var(--base) * 100cqw, 54px) * -1);
      }
      img {
        position: absolute;
        width: 100%;
        height: auto;
        left: 0;
        bottom: 0;
      }
    }
  
    .instagram-block__body {
      position: relative;
  
      width: 100%;
      padding-right: 42px;
  
      &:after {
        content: "";
        position: absolute;
        top: 50%;
        right: 0;
        width: 26px;
        height: 26px;
        transform: translateY(-50%);
        background: url("/documents/d/tosei/avatar_sns-block_icon-svg") no-repeat center center / contain;
      }
    }
  
    .instagram-block__title {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 16px;
  
      img {
        width: 32px;
        height: 32px;
      }
  
      span {
        color: var(--color-base);
        font-size: clamp(16px, 24 / var(--base) * 100cqw, 24px);
        font-weight: bold;
      }
    }
  
    .instagram-block__desc {
      margin-top: clamp(8px, 24 / var(--base) * 100cqw, 24px);
      color: var(--color-base);
      font-size: 16px;
      line-height: 1.6;
    }
  
    .message {
      padding: clamp(30px, 60 / var(--base) * 100cqw, 60px) 0;
    }
  
    .message__inner {
      background-color: #f1f4f2;
      padding: clamp(24px, 64 / var(--base) * 100cqw, 64px);
      border-radius: 12px;
  
      & + .message__inner {
        margin-top: clamp(16px, 32 / var(--base) * 100cqw, 32px);
      }
    }
  
    .message__title {
      font-size: clamp(24px, 32 / var(--base) * 100cqw, 32px);
      font-weight: bold;
      text-align: center;
      line-height: 1.6;
  
      span {
        display: inline-block;
      }
    }
  
    .message__desc {
      margin-top: clamp(16px, 40 / var(--base) * 100cqw, 40px);
  
      p {
        font-size: clamp(16px, 20 / var(--base) * 100cqw, 20px);
        line-height: 1.8;
  
        &.text-center {
          text-align: center;
        }
      }
    }
  
    .message__notes {
      margin-top: 1em;
  
      p {
        font-size: clamp(12px, 14 / var(--base) * 100cqw, 14px);
      }
    }
  }