@charset "UTF-8";

/*====================================================基本設定===============================================*/

*{
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
}

body {
  font-family: 'Noto Serif JP', serif;
  margin: 0;
  padding: 0;
  text-align: center;
  color: #2c1a10; 

  /* 背景（椿） */
  background: url("tubaki.png") no-repeat center center fixed;
  background-size: cover;
}

/* オーバーレイ */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(248, 244, 230, 0.65); 
  z-index: -1;
}

/* タイトル */
.label-frame {
  display: inline-block;
  padding: 35px 60px;
  margin: 60px 0 40px;
  border: 4px solid #2c1a10; 
  border-radius: 16px;
  background: #fdfaf5; 
  position: relative;
  box-shadow: 6px 6px 0 #a2886c; 
}

.label-frame h1 {
  font-size: 2.2rem;
  margin: 0;
  color: #9c2b1b; 
  letter-spacing: 0.05em;
}

/* ラベル */
.label-frame::before,
.label-frame::after {
  content: "";
  position: absolute;
  height: 4px;
  width: 50px;
  background: #2c1a10;
  top: 12px;
}

.label-frame::before {
  left: 20px;
}
.label-frame::after {
  right: 20px;
}

/* ナビゲーション */
.task-list {
  list-style: none;
  padding: 0;
  margin: 0 0 60px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.task-list li a {
  display: block;
  text-decoration: none;
  background: #c1442e; 
  color: #fffdf7;
  padding: 15px;
  border-radius: 8px;
  font-weight: bold;
  border: 2px solid #2c1a10;
  box-shadow: 4px 4px 0 #7a4d2a;
  transition: all 0.3s ease;
}

.task-list li a:hover {
  background: #9c2b1b; 
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #7a4d2a;
}



/* Webサイトデザイン */
.task-list .center-item {
  grid-column: 1 / -1;   
  display: flex;
  justify-content: center; 
}
.task-list .center-item a {
  width: 250px; 
}