@charset "UTF-8";
/* 375pxデザイン時のpxからvwを計算 ------------*/
/* calc内で使いたい場合: calc( 100% - vw(10) ); */
/* 絶対位置計算関数 ----------------
* 画面幅が変わっても要素位置を維持する
* $distance   基準端からの距離
* $wrapper    配置の基準となる幅（デフォルト：1300px）
/* ------------------------------ */
/* %の計算 -----------------------
* $size       計算したい値
* $viewport   基準となる値
/* ------------------------------ */
/* 最小値(px)の計算 ----------------
* $size       計算したい値
* $viewport   基準となる値
* $min        最小の画面幅
/* ------------------------------ */
/* 最大値(px)の計算 ----------------
* $size       計算したい値
* $viewport   基準となる値
* $max        最大の画面幅
/* ------------------------------ */
/* sp-only ------------*/
/* pc-only ------------*/
/* hover-only ------------*/
/* flex ------------*/
/* grid ------------*/
/* Font Awesome 疑似要素 ------------*/
/* Edge用 ------------*/
/* IE用 ------------*/
/* Safari用 ------------*/
/* Font styles ------------*/
/* Color styles ------------*/
/*------------------------------------------------
other
------------------------------------------------*/
.test {
  display: grid;
  grid-template-columns: 10rem 1fr;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 2rem;
}
.test .test__image {
  margin: 0;
}
.test .test__img {
  display: block;
  width: 100%;
  height: 10rem;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}
.test .test__name {
  margin: 1rem 0 0;
  text-align: center;
}
.test .test__main {
  padding: 2rem;
  border: 1px solid gray;
  border-radius: 1rem;
}