@charset "UTF-8";

/*===============================================
  共通
===============================================*/
main{
  display: grid;
  gap: 30px;
  margin-bottom: 30px;
}

/* タイトル */
.headline{
  font-size: 22px;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e64b78;
  padding-bottom: 10px;
}

.headline span{
  font-size: 0.7em;
}

.headline::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f0d7";
  color: #e64b78;
  margin-right: 0.3em;
}

/*===============================================
  ヘッダー
===============================================*/
.page_header img{
  margin-bottom: 20px;
}

.page_header p{
  font-size: 17px;
  line-height: 1.6;
  margin-bottom: 30px;
}

.list_nav{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
  padding: 0 10px;
  border-bottom: 4px solid #e64b78;
}

.list_nav li{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(230, 75, 120,.4);
  color: #fff;
  padding: 24px 20px 20px;
  border-radius: 6px 6px 0 0;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color .2s;
  line-height: 1;
}

.list_nav li:not(.select):hover{
  background-color: rgba(230, 75, 120,.5);

}

.list_nav li.select{
  background-color: #e64b78;
}

/*===============================================
 ギャラリー
===============================================*/
.photo_list_wrap + .photo_list_wrap{
  margin-top: 60px;
}

.photo_list{
  display: grid;
  grid-template-columns: repeat(5,1fr);
  align-items: start;
  gap: 30px 20px;
}

.photo_list_item{
  display: grid;
  gap: 10px;
}

.photo_list_item a{
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.photo_list_item a img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  border: 1px solid #ccc;
}

.photo_list--taisyo .photo_list_item a img{
  max-width:120%;
  max-height:120%;
}

.photo_list_item >div{
  display: grid;
  justify-items: center;
  gap: 4px;
  width: 100%;
}

.photo_list_item h4{
  font-size: 16px;
}

.photo_list_item p{
  margin: 0;
  font-size: 13px;
  line-height: 1.3;
  color: #444;
}


.gallery--hide{
  display:none;
}


/* 各賞スタイル変更 */
.photo_list--taisyo{
  grid-template-columns: 1fr;
  justify-items: center;
}

.photo_list--taisyo .photo_list_item{
  max-width: 350px;
}

.photo_list--kinsyo{
  grid-template-columns: repeat(4,1fr);
}

/*===============================================
  画面の横幅が600px以下
===============================================*/
@media screen and (max-width: 600px){
  .page_header{
    padding-top: 0;
  }

  .page_header h1{
    font-size: 26px;
  }

  .page_header h1 span{
    display: block;
  }

  .page_header p{
    font-size: 15px;
  }

  .headline{
    font-size: 20px;
  }

  .list_nav{
    gap: 6px;
  }

  .list_nav li{
    padding: 20px 16px 16px;
    font-size: 15px;
    border-radius: 4px 4px 0 0;
  }

  .photo_list{
    grid-template-columns: repeat(3,1fr);
    gap: 20px 10px;
  }

  .photo_list_item h4{
    font-size: 14px;
  }

  .photo_list_item p{
    font-size: 10px;
  }
}