/* ========================================
   受賞情報
======================================== */

.award-info {
  max-width: 900px;
  margin: 0 auto;
}


/* ----------------------------------------
   見出し
---------------------------------------- */

.award-title {
  margin: 0 0 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #333;
  font-size: 1.5rem;
}


/* ----------------------------------------
   受賞情報一覧
---------------------------------------- */

.award-list {
  margin: 0;
  padding: 0;
}


/* 各項目 */

.award-item {
  display: grid;
  grid-template-columns: 8em 1fr;
  column-gap: 2em;
  margin: 0;
  padding: 0.8rem 0;
  border-bottom: 1px solid #ddd;
}


/* 項目名 */

.award-item dt {
  margin: 0;
  font-weight: 600;
}


/* 内容 */

.award-item dd {
  margin: 0;
  line-height: 1.8;
}


/* ----------------------------------------
   受賞者
======================================== */

.recipient {
  display: grid;
  grid-template-columns: 5em 1fr;
}


/* 氏名を右寄せ
   → 氏名の右端と「（」の位置をそろえる */

.recipient-name {
  text-align: left;
  padding-right: 0.5em;
}


/* ----------------------------------------
   文章
======================================== */

/* 賞の概要・研究成果の概要など
   複数の段落がある場合 */

.award-item dd p {
  margin: 0 0 1em;
  text-indent: 1em;
}

.award-item dd p:last-child {
  margin-bottom: 0;
}


/* ----------------------------------------
   関連URL
======================================== */

.award-item a {
  text-decoration: underline;
}


/* ----------------------------------------
   受賞写真
======================================== */

.award-photo {
  margin: 2.5rem 0 0;
  text-align: center;
}

.award-photo img {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  margin: 0 auto;
}

.award-photo figcaption {
  margin-top: 0.5rem;
  color: #666;
  font-size: 0.9rem;
}


/* ----------------------------------------
   スマートフォン
======================================== */

@media (max-width: 600px) {

  /* 項目名と内容を縦並びにする */

  .award-item {
    grid-template-columns: 1fr;
    row-gap: 0.3rem;
  }

  .award-item dt {
    font-size: 0.9rem;
  }


  /* 受賞者 */

  .recipient {
    grid-template-columns: 7em 1fr;
  }


  /* 写真 */

  .award-photo {
    margin-top: 2rem;
  }

}