* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  max-width: 600px; /* ページ全体の最大幅を600pxに制限 */
  margin: 0 auto;
  font-family: "M PLUS 1p", sans-serif;
  background-color: #e70909;
}

.container {
  text-align: center;
  position: relative;
}

.line0 {
  line-height: 0;
  vertical-align: bottom;
}

.item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.item img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.bg_img {
  position: relative;
}

/*----------トップ----------*/
.btn-1 {
  width: 90%;
  position: absolute;
  top: 43%;
  left: 50%;
  transform: translate(-50%, -42%);
}

.btn-1img {
  width: 100%;
}

.btn-pnt-1 {
  width: 90%;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -99%);
}

.btn-pnt-1img {
  width: 100%;
}

/*----------人気のマンガもお得に----------*/

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列のグリッド */
  max-width: 98%;
}

.comic_check {
  width: 100%;
  position: absolute;
  top: 24%;
  left: 50%;
  transform: translate(-50%, -20%);
  margin: 0 auto;
  gap: 4% 0%;
}

.btn-2 {
  width: 90%;
  position: absolute;
  top: 59%;
  left: 50%;
  transform: translate(-50%, -42%);
}

.btn-2img {
  width: 100%;
}

.event_btn {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 通常は2列のグリッド */
  max-width: 98%;
  margin: 0 auto;
  gap: 2% 1%; /* グリッドの隙間 */
  width: 95%;
  position: absolute;
  top: 73%;
  left: 50%;
  transform: translate(-50%, -20%);
}

/* 最後のボタンを1列で表示するためのスタイル */
.event_btn .item:nth-child(5) {
  grid-column: span 2; /* 2列分の幅を占める */
}

/*event1--------------------*/

.event1 {
  background-image: url("img/bg/CP1-bottom.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center; /* 中央配置 */
  justify-content: center; /* 縦方向に中央配置 */
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列で並べる */
  grid-template-rows: repeat(5, auto);
  background-color: #f9f9f9;
  padding: 12px 0px;
  border-radius: 20px;
  border: 2px solid #016670; /* ラインの色 */
  margin: 0 auto; /* 水平方向に中央配置 */
}

.text-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  height: 100%;
}

.text-section h2 {
  font-size: 13px;
  text-align: left;
  font-family: 'Noto SansJP', sans-serif;
  font-weight: 700;
  width: 89px;
  margin: 0;
  flex-grow: 1;
}

.text-section a {
  line-height: 0;
}

.image-section {
  display: flex;
  align-items: stretch;
}

.image-section img {
  width: 100%;
  height: auto;
}

.book-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(1, auto);
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2%;
  border-radius: 2%;
  gap: 5px;
}

/* 「片田舎のおっさん...」のタイトル */
.book-container:nth-child(2) .text-section h2 {
  font-size: 6px;
}

.book-container:nth-child(3) .text-section h2, .book-container:nth-child(5) .text-section h2 {
  font-size: 11px;
}

.book-container:nth-child(8) .text-section h2, .book-container:nth-child(9) .text-section h2 {
  font-size: 12px;
  line-height: 13px;
}

.comic_off {
  width: 98%;
  align-items: center;
  margin: 0 auto;
}

.button {
  width: 100%; /* ボタン画像の幅に合わせて調整 */
  height: auto;
}

.text-section {
  margin: left;
}

.btn-3 {
  width: 90%;
  margin: 6% auto 9% auto; /* 上マージンを追加し、中央配置 */
  display: block;
}

.btn-3img {
  width: 100%;
}

/*event2--------------------*/
.event2 {
  background-image: url("img/bg/CP2-bottom.png");
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center; /* 中央配置 */
  justify-content: center; /* 縦方向に中央配置 */
  width: 100%;
}

.event2-li {
  width: 88%;
  text-align: left;
  display: flex;
  line-height: 1.8;
  color: #ffffff;
  background-color: #b70c0c;
  border-radius: 14px;
  margin-bottom: 17%;
  line-height: 190%;
  font-size: 13px;
  margin: 0 22.5px;
  padding: 16px;
}

.event2-li ul {
  list-style-position: outside;
  margin: 0;
  padding: 0;
  padding-left: 16px;
}

.event2-link {
  color: #fff395;
  text-decoration: none;
}

.CPbtn-2 {
  width: 90%;
  margin: 4% auto 8% auto; /* 上下に余白を追加し、中央配置 */
  display: block;
}

.CPbtn-2img {
  width: 100%;
}

/*event3.4.5--------------------*/
.event3 {
  background-image: url("img/bg/CP3-bottom.png");
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center; /* 中央配置 */
  justify-content: center; /* 縦方向に中央配置 */
  width: 100%;
}

.event3-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 2列のグリッド */
  grid-template-rows: repeat(2, auto);
}

.ev3-check {
  width: 95%;
  margin: 0 auto;
  gap: 2% 1%;
  margin: 5% auto 0 auto;
}

.CPbtn-3 {
  width: 90%;
  margin: 10% auto 13% auto; /* 上マージンを追加し、中央配置 */
  display: block;
}

.CPbtn-3img {
  width: 100%;
}

.event4 {
  background-image: url("img/bg/CP4.png");
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center; /* 中央配置 */
  justify-content: center; /* 縦方向に中央配置 */
  width: 100%;
}

.CPbtn-4 {
  width: 90%;
  margin: 178% auto 5% auto; /* 上マージンを追加し、中央配置 */
  display: block;
}

.CPbtn-4img {
  width: 100%;
}

.CPbtn-5 {
  width: 90%;
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translate(-50%, -20%);
}

.CPbtn-5img {
  width: 100%;
}

.btn-pnt-2 {
  width: 90%;
  position: absolute;
  top: 88%;
  left: 50%;
  transform: translate(-50%, -99%);
}

.btn-pnt-2img {
  width: 100%;
}