/* 共通定義 */
.about_title {
  display: inline-flex;
  width: 240px;
  padding-bottom: 2px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  flex-shrink: 0;

  span {
    color: #000;
    font-family: Khand;
    font-size: 60px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 0.05em;
  }

  .about_subtitle {
    display: flex;
    align-items: center;
    gap: 15px;

    .square {
      width: 15px;
      height: 15px;
      background: var(--MAIN-COLOR, #1860cc);
    }

    span {
      color: #000;
      font-family: "Sawarabi Gothic";
      font-size: 24px;
      font-style: normal;
      font-weight: 400;
      line-height: 100%;
    }
  }
}

main {
  .misson {
    margin: 100px auto 0;
    width: 1300px;
    display: flex;
    align-items: center;
    gap: 100px;

    .mission_en {
      color: var(--text_color, #222);
      font-family: Khand;
      font-size: 30px;
      font-style: normal;
      font-weight: 600;
      line-height: 100%;
    }
    .mission_ja {
      color: var(--text_color, #222);
      font-family: Khand;
      font-size: 24px;
      font-style: normal;
      font-weight: 600;
      line-height: 100%;
    }
  }

  .vision {
    margin: 100px auto 0;
    width: 1300px;
    display: flex;
    align-items: flex-start;
    gap: 100px;

    .vision_ul {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      gap: 20px;
      margin: 0;
      list-style: none;
      padding-left: 0;

      li {
        position: relative;
        padding-left: 20px;
        color: var(--text_color, #222);
        font-family: "Sawarabi Gothic";
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 100%;
      }

      li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 10px;
        height: 10px;
        background-color: #666;
      }
    }
  }

  .about_us {
    margin: 100px auto 0;
    width: 1300px;
    display: flex;
    align-items: flex-start;
    gap: 100px;

    .about_us_column {
      display: inline-flex;
      justify-content: space-between;
      gap: 65px;

      &:first-child {
        .about_us_cell {
          padding: 20px 20px 40px;
        }
      }

      .about_us_cell {
        display: flex;
        width: 410px;
        padding: 40px 20px;
        align-items: flex-start;
        gap: 40px;
        border-bottom: 1px solid #aaa;

        span {
          color: var(--text_color, #222);
          font-family: "Sawarabi Gothic";
          font-style: normal;
          font-weight: 400;
          line-height: 100%;
          flex-shrink: 0;

          &:first-child {
            width: 170px;
            font-size: 16px;
            line-height: 120%;
            letter-spacing: 0.03em;
          }
        }
      }
    }
  }

  .uniform {
    margin: 100px auto 0;
    width: 1300px;
    display: flex;
    align-items: flex-start;
    gap: 100px;

    .fp_gk {
      display: inline-flex;
      gap: 150px;

      .member_uniform {
        width: 407px;
        height: 470px;
        flex-shrink: 0;

        .player {
          margin: 0;
          list-style: none;
          padding-left: 0;

          li {
            position: relative;
            padding-left: 20px;
            color: #000;
            font-family: Khand;
            font-size: 36px;
            font-style: normal;
            font-weight: 600;
            line-height: 100%;
          }

          li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 10px;
            height: 10px;
            background-color: #666;
          }
        }

        .home_away {
          display: flex;
          width: 407px;
          height: 374px;
          justify-content: center;
          align-items: flex-start;
          gap: 53px;
          flex-shrink: 0;

          .uniform_img {
            width: 177px;
            height: 350px;
          }
        }
      }
    }
  }
}

@media (width <= 1300px) {
  /* 共通定義 */
  .about_title {
    width: 195px;

    span {
      font-size: 40px;
    }

    .about_subtitle {
      .square {
        width: 10px;
        height: 10px;
      }

      span {
        font-size: 20px;
      }
    }
  }

  main {
    .misson {
      width: 750px;
      gap: 40px;

      .mission_ja {
        font-size: 20px;

        &::before {
          content: "\a";
          white-space: pre;
        }
      }
    }

    .vision {
      width: 750px;
      gap: 40px;

      .vision_ul {
        li {
          font-size: 16px;
          line-height: 120%;
        }
      }
    }

    .about_us {
      width: 750px;
      gap: 40px;

      .about_us_table {
        display: flex;
        flex-direction: column;

        .about_us_column {
          flex-direction: column;
          gap: 0;

          &:first-child {
            .about_us_cell {
              padding: 40px 20px;
            }
            .about_us_cell:first-child {
              padding: 20px 20px 40px;
            }
          }
        }
      }
    }

    .uniform {
      width: 750px;
      gap: 40px;

      .fp_gk {
        display: inline-flex;
        flex-direction: column;
        gap: 0;

        .member_uniform {
          width: 407px;
          height: 470px;
          flex-shrink: 0;

          .player {
            margin: 0;
            list-style: none;
            padding-left: 0;

            li {
              position: relative;
              padding-left: 20px;
              color: #000;
              font-family: Khand;
              font-size: 36px;
              font-style: normal;
              font-weight: 600;
              line-height: 100%;
            }

            li::before {
              content: "";
              position: absolute;
              left: 0;
              top: 50%;
              transform: translateY(-50%);
              width: 10px;
              height: 10px;
              background-color: #666;
            }
          }

          .home_away {
            display: flex;
            width: 407px;
            height: 374px;
            justify-content: center;
            align-items: flex-start;
            gap: 53px;
            flex-shrink: 0;
          }
        }
      }
    }
  }
}

@media (width <= 768px) {
  /* 共通定義 */
  .about_title {
    width: auto;
    align-items: center;

    span {
      font-size: 30px;
    }

    .about_subtitle {
      gap: 15px;

      .square {
        width: 10px;
        height: 10px;
      }

      span {
        font-size: 18px;
      }
    }
  }

  main {
    .misson {
      width: auto;
      padding: 0 20px;
      flex-direction: column;
      gap: 30px;
    }

    .vision {
      width: auto;
      padding: 0 20px;
      flex-direction: column;
      gap: 30px;
      align-items: center;

      .vision_ul {
        li {
          font-size: 14px;
        }
      }
    }

    .about_us {
      width: auto;
      padding: 0 20px;
      flex-direction: column;
      gap: 30px;
      align-items: center;

      .about_us_table {
        .about_us_column {
          .about_us_cell {
            width: 300px;
            align-items: flex-start;
            gap: 0;

            &:first-child {
              .about_us_cell {
                padding: 40px 20px;
              }
              .about_us_cell:first-child {
                padding: 20px 20px 40px;
              }
            }

            span {
              font-size: 12px;

              &:first-child {
                width: 150px;
                font-size: 13px;
              }
            }
          }
        }
      }
    }

    .uniform {
      width: 90%;
      min-width: 345px;
      flex-direction: column;
      gap: 30px;
      align-items: center;

      .fp_gk {
        width: 100%;
        display: inline-flex;
        gap: 100px;

        .member_uniform {
          width: auto;
          height: auto;
          flex-shrink: 0;

          .home_away {
            width: auto;
            height: auto;
            gap: 10px;

            .uniform_img {
              width: 150px;
              height: 277px;
            }
          }
        }
      }
    }
  }
}