@charset "UTF-8";

/* プロフィール
   読み込み順は functions.php（後に読み込んだ指定が勝つので順番を変えない） */

/* --------------------------------------------------------------------- */
/* プロフィール */
/* --------------------------------------------------------------------- */

/* プロフィール概要
------------------------------------------------------- */

.profile {
  display: flex;
  justify-content: space-between;
  margin-bottom: 200px;

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    /* 縦並びにして順番を入れ替え */
    flex-direction: column-reverse;
    margin-bottom: 80px;
  }
}

.profile-text {
  margin-right: 30px;

  /* スマホサイズ以下のみ */
  @media (max-width: 767px) {
    margin-right: 0;
    text-align: center;
  }
}

/* 名前画像 */
.profile-text img {
  height: 58px;
  margin-top: 70px;
  margin-bottom: 10px;

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    height: 31px;
    margin-top: 10px;
  }
}

/* 似顔絵 */
#nigaoe {
  height: 380px;
  /* 縦方向中央に配置 */
  margin-top: auto;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    height: 300px;
  }

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    height: 122px;
    width: 122px;
    margin: auto;
    margin-top: 30px;
  }
}

/* 略歴
---------------------------------------------------- */

.personal-record {
  background-color: var(--color-bg-blue-light);
}

.personal-record div {
  padding: 75px 0;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    padding: 50px 0;
  }
}

/* 略歴　タイトル */
.personal-record h1 {
  color: var(--color-blue);
  margin-top: 0;

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    text-align: center;
  }
}

/* 制作環境
------------------------------------------------------ */
.production-environment {
  margin-top: 100px;
  margin-bottom: 80px;
}

.production-environment p {
  margin-bottom: 20px;
}

/* 登録
------------------------------------------------------ */
.registration {
  margin-bottom: 80px;
}

/* 趣味
------------------------------------------------------ */
.hobby {
  margin-bottom: 80px;
}