body {
  letter-spacing: .08em;
  line-height: 1.8;
  background-color: #fdfdf8;
  color: #69544c;
  font-family: 'Kosugi Maru', sans-serif;
}
img {
  vertical-align: bottom;
}
div {
  border: solid 1px #fff098;
}
/***** 見出し *****/
h2 {
  display: inline-block;
  font-family: 'Cherry Bomb One', cursive;
  letter-spacing: .15em;
  width: 100%;
  height: 120px;
  line-height: 120px;
  margin-bottom: 10px;
  font-size: 32px;
  text-align: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50%;
  background-color: #ecf7e4;
}
.info h2 {
  background-image: url(../img/head-info.png);
}
.piyoko h2 {
  background-image: url(../img/head-piyoko.png);
}
.illust.new h2 {
  background-image: url(../img/head-illust-new.png);
}
.illust.list h2 {
  background-image: url(../img/head-illust-list.png);
}
.about h2 {
  background-image: url(../img/head-about.png);
}
h3 {
  display: inline-block;
  font-family: 'Cherry Bomb One', cursive;
  letter-spacing: .15em;
  width: 100%;
  height: 60px;
  line-height: 60px;
  margin-bottom: 10px;
  font-size: 24px;
  text-align: center;
  border: solid 1px #fff098;
}
h4 {
  font-family: 'Cherry Bomb One', cursive;
  letter-spacing: .15em;
  font-size: 20px;
  border: solid 1px #fff098;
}
header,
.box .wrap {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}
/***** ヘッダー *****/
header h1 {
  display: inline-block;
  flex-shrink: 0;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}
header h1 .logo {
  display: block;
  width: 300px;
  height: 75px;
  background-image: url(../img/logo_2.png);
  background-size: 95%;
  background-repeat: no-repeat;
  background-position: center;
}
/***** アイキャッチ *****/
.mainpic {
  width: 100%;
  padding-top: 40%;
  background-image: url(../img/mainpic.avif);
  background-size: 100% auto;
}
/***** ボタン *****/
.more-btn,
.more-main {
  display: block;
  margin: 20px auto 0;
  padding: 10px 20px;
  border-radius: 5px;
  border: solid 1px #fff098;
}
.more-btn:hover,
.more-main:hover {
  background-color: #fff098;
  cursor: pointer;
}
.box.illust.list .wrap {
  text-align: center;
}
/***** グリッド *****/
.grid {
  display: grid;
  gap: 5px;
}
.grid a:hover {
  opacity: .8;
}
.info .grid {
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.illust .grid {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.info .grid a {
  display: block;
}
/***** あやまるについて *****/
.flex {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  flex-direction: row-reverse;
}
.img {
  text-align: center;
}
.img img {
  max-width: 300px;
  border-radius: 50%;
  overflow: hidden;
}
.sns-link {
  margin-top: 15px;
  display: flex;
  gap: 20px;
  font-size: 24px;
}
.prof {
  position: relative;
}
/***** まんまるぴよことは？ *****/
.piyoko {
  text-align: center;
}
.top {
  width: 90%;
  max-width: 550px;
}
.char img {
  width: 100%;
}
.right {
  background-image: linear-gradient(180deg, #ccc 1px, transparent 1px);/* 罫線の色と太さ  */
  background-size: 100% 2.5em;/* 行の高さ */
  line-height: 2.5em;/* 文字の高さ */
  padding-bottom: 1px;/* 最終行の下にも罫線を引く */
  text-align: left;
}
.right p {
  margin: 0 10px;
}
.char .grid {
  margin: auto auto 30px auto;
  width: 85%;
}
.slick-prev:before,
.slick-next:before {
  color: #69544c;
}
.slick-slide {
  display: flex !important;
}
.char .grid > div {
  display: grid;
  grid-template-columns: 1fr 2fr;
}
.left {
  flex: 1;
}
.right {
  flex: 2;
}
/***** フッター *****/
footer {
  background-color: #ecf7e4;
  text-align: center;
}
.page-top {
  display: block;
  width: 100px;
  margin: 0 auto;
}
@media screen and (max-width: 959px) {
  /* 959px以下に適用されるCSS（タブレット用） */
  .illust .grid {
    grid-template-columns: 1fr 1fr;
  }
  .prof {
    position: static;
    width: 100%;
  }
  .btm {
    position: static;
  }
  .flex {
    display: block;
  }
  .img {
    margin: 0 auto 20px;
  }
  .info .piyoko {
    grid-column-start: 1;
    grid-column-end: 3;
  }
  .img img {
    width: 50%;
  }
}
@media screen and (max-width: 480px) {
  /* 480px以下に適用されるCSS（スマホ用） */
  .piyoko h2 {
    height: 100px;
    line-height: 100px;
  }
  .char .grid {
    grid-template-columns: 1fr;
  }
}