@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Halant:wght@300&family=Klee+One&family=Oooh+Baby&display=swap");

/*－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

  トップページ

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－*/
:root {
  --color-header: #a22041;
  --color-text: #2c3056;
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/*－－－－－－－－－－ 写真 －－－－－－－－－－*/
header {
  position: relative;
}

header .image {
  position: relative;
  margin: auto;
  width: 280px;
}

header .image img {
  width: 100%;
  position: relative;
  z-index: 3;
  box-shadow: var(--shadow);
}

header .image::before,
header .image::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: var(--shadow);
}

header .image::before {
  top: 10px;
  left: 10px;
  background: var(--color-cover);
  z-index: 2;
}

header .image::after {
  top: 20px;
  left: 20px;
  border: 1px solid var(--color-accent);
}

/*－－－－－－－－－－ サイト名 －－－－－－－－－－*/
header h1 {
  position: absolute;
  top: 5em;
  left: 50%;
  transform: rotate(-15deg);
  color: var(--color-header);
  z-index: 3;
}

/*－－－－－－－－－－ 詩のエリア －－－－－－－－－－*/
#poetry {
  margin: 5rem 0;
  text-align: center;
}

/*－－－－－－－－－－ News －－－－－－－－－－*/
.news {
  max-height: 100px;
  overflow-y: auto;
  border: 1px solid #eee;
  box-shadow: var(--shadow);
  margin-top: 1rem;
  margin-bottom: 2rem;
}

.news ul {
  margin: -10px 0;
  padding: 0;
}

.news ul li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  margin: 0.8rem 0;
}

.news ul li time {
  color: var(--color-text);
}

/*－－－－－－－－－－ Link －－－－－－－－－－*/
#link .flex {
  display: flex;
  gap: 5px;
  margin: 0;
}

#link .flex li {
  margin: 4px;
  background: var(--color-cover);
  padding: 0.3em 0.75em;
  transition: background var(--transition);
}

#link .flex li:hover {
  background: var(--color-accent);
  color: #fff;
}

/*－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

  トップページ専用３カラム設定

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－*/
main#top {
  display: flex;
  flex-direction: column !important;
  align-items: center;
}

main#top .boxLeft,
main#top .boxCenter,
main#top .boxRight {
  width: 100% !important;
  max-width: 1000px;
  margin: 0 auto 3rem;
}

main section {
  width: 100%;
  margin-bottom: 10rem;
}

/*－－－－－－－－－－ レスポンシブ対応 －－－－－－－－－－*/
@media screen and (max-width: 375px) {
  header .image {
    left: -2rem;
    width: 75%;
  }

  header h1 {
    top: 4em;
  }

  .news ul li {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
}