*,*::before,*::after{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  font-size: 13px;
  line-height: 1.4;
  color: #333;
  font-family: 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,'ＭＳ ゴシック',sans-serif;
}

sup{
  font-size: 10px;
}

header{
  padding: 20px;
  background: #e7e7e7;
  position: relative;
  min-width: 1000px;
}

header h1{
  font-size: 18px;
  text-align: center;
}

header p{
  position: absolute;
  top: 50%;
  transform: translateY(-20px);
}

header p:first-child{
  left: 20px;
}

header p:last-child{
  right: 20px;
}

header p a{
  display: block;
  padding: 0 15px;
  height: 40px;
  line-height: 40px;
  border-radius: 999px;
  background: #fff;
  border: solid 1px #333;
  font-size: 14px;
  text-decoration: none;
}

.category{
  width: 820px;
  margin: 50px auto 50px;
}

.category h2{
  font-size: 18px;
  text-align: center;
}

.cat-block + .cat-block{
  margin-top: 40px;
}

ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: none;
  margin-top: 20px;
}
/*
ul li{
  width: 32%;
}
*/
ul li{
  width: 32%;
  /* 以下の設定を追加または修正 */
  min-height: 5em; /* 2行のテキストが収まる最小の高さを設定 */
}

ul::after{
  width: 32%;
  display: block;
  content: '';
}
/*
ul li:nth-child(n + 4){
  margin-top: 2%;
}
*/
ul li:nth-child(n + 4){
  margin-top: 2%;
  /* この margin-top は、上記 min-height を設定した場合、
     全体のレイアウトを見て調整が必要になることがあります。 */
}
/*
ul li a{
  border-radius: 10px;
  padding: 1.2em 1em;
  display: block;
  color: #fff;
  text-decoration: none;
  text-align: center;
}
*/
ul li a{
  border-radius: 10px;
  padding: 1.2em 1em; /* パディングは維持 */
  display: flex;
  align-items: center;    /* 垂直中央揃え */
  justify-content: center; /* 水平中央揃え（テキストの行数に関わらず真ん中に来る）*/
  height: 100%;
  position: relative; /* 矢印の絶対配置の基準にする */
  
  color: #fff;
  text-decoration: none;
}

ul li a:hover{
  opacity: 0.7;
}
/*
ul li a span{
  display: block;
  background: url(../img/icn_arw.png) no-repeat right center;
  background-size: 16px;
  padding-right:10px;
}
*/
/* 既存の ul li a span の設定は、矢印の背景に関する部分を削除します */
ul li a span{
  display: block;
  /* 以下の行を削除: 矢印を擬似要素で表示するため */
  /* background: url(../img/icn_arw.png) no-repeat right center; */
  /* background-size: 16px; */
  /* padding-right:10px; */
  text-align: center; /* テキストを span の中央に */
}

/* --- 矢印をボタン右端に配置するための追加CSS --- */
ul li a::after{
  content: '';
  display: block;
  width: 16px; /* 矢印のサイズ */
  height: 16px;
  
  /* 矢印画像の設定 */
  background: url(../img/icn_arw.png) no-repeat center center;
  background-size: 16px;
  
  /* ボタンの右端・中央に絶対配置 */
  position: absolute;
  right: 15px; /* ボタンの右端からの距離を調整 */
  top: 50%;
  transform: translateY(-50%);
}


.c01 a{
  background: #dc1c40;
}

.c02 a{
  background: #1f97b9;
}