@charset "UTF-8";

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

/* タイトル */
.headline{
  font-size: 22px;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
}

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

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

/*===============================================
  ヘッダー
===============================================*/
.page_header{
  text-align: center;
  padding-top: 30px;
}

.page_header h1{
  font-size: 32px;
  margin-bottom: 20px;
  font-family: "ヒラギノ明朝 Pro W6","Hiragino Mincho Pro","HGS明朝E","ＭＳ Ｐ明朝",serif;
  padding-bottom: 20px;
  border-bottom: 1px solid #3247b3;
  line-height: 1.4;
}

.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 #3247b3;
}

.list_nav li{
  background-color: rgba(50, 71, 179,.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(50, 71, 179,.5);
}

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

/*===============================================
 ギャラリー
===============================================*/
.photo_list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 40px 30px;
}

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

.photo_list_item a{
  display: block;
  width: 100%;
}

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

.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;
}

/*===============================================
  画面の横幅が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;
  }
}