@charset "utf-8";

.first-view img {
  height: 360px;
  width: 100vw;
}

/* body全体の横幅 */
.wi-90 {
  width: 90%;
  margin: 0 auto;
}

.topicarea {
  margin-top: 60px;
}

/* .slider-imgの設定 */
.topicarea .slider-img {
  width: 1000px;
  height: 600px;
  margin: 20px auto 0;
}


/* お知らせの設定 */
.news {
  background-color: lightskyblue;
  width: 1000px;
  height: 180px;
  margin: 60px auto 0;
  border-radius: 40px;
}

.news-text {
  width: 800px;
  color: #fff;
  font-size: 25px;
  margin-left: 20px;
  padding: 20px;
}

/* 本文 */
.news-text p {
  width: fit-content;
  margin-top: 20px;
  border-bottom: 3px solid #eee;
}

.mrg-10 {
  margin-right: 50px;
}

.picup {
  margin-top: 60px;
}

/* 上のtabの設定 */

/* タブのボタン */
.tab-area {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

.tab {
  width: 18%;
  height: 60px;
  background-color: #fff;
  color: #fbcc6e;
  border-radius: 10px 10px 0 0;
  line-height: 60px;
  text-align: center;
  border: 5px solid #fbcc6e;
  border-bottom: none;
  cursor: pointer;
  font-family: "M PLUS 1p", sans-serif;
  font-size: 1.5rem;
  margin-right: 30px;
}

/* タブを選択したときのスタイル */
.tab.is-show {
  background-color: #fbcc6e;
  color: #fff;
}

/* tab全体 */
.content-area {
  position: relative;
  width: 100%;
}

.content-area .content {
  height: 80vh;
  background-color: #fbcc6e;
  padding: 20px;
  border: 5px solid #fbcc6e;
  border-radius: 10px;
}


/* tab内の漫画情報を入れるスペース */

/* 二番目以降は見えない */
.content {
  display: none;
}

/* クリックされた時のスタイル設定 */
.content.is-show {
  display: block;
}

/* 各コンテンツのスタイル設定 */

.comic-content {
  display: flex;
  justify-content: space-around;
  margin-left: 20px;
}

.comic {
  margin-top: 15px;
  margin-left: 10px;
}

.comic img {
  width: 215px;
  aspect-ratio: 1/1.6;
}

.comic h3 {
  width: fit-content;
  margin: 20px auto 0;
}



.morebuton {
  position: absolute;
  bottom: 25px;
  display: block;
  width: 250px;
  height: 85px;
  border-radius: 40px;
  background-color: #fff;
}

.butonline {
  border: 3px solid #fbcc6e;
  height: 65px;
  border-radius: 40px;
  margin: 10px;
}

.morebuton button {
  background-color: transparent;
  border: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  font-weight: bold;
  font-size: 25px;
  color: #fbcc6e;
  cursor: pointer;
}




/* 二つ目のタブの設定 */
.tabgroup2 {
  margin-top: 60px;
}

/* タブのボタン */
.tabgroup2 .tab-area {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

.tabgroup2 .tab2 {
  width: 18%;
  height: 60px;
  background-color: #fff;
  color: #b1e971;
  border-radius: 10px 10px 0 0;
  line-height: 60px;
  text-align: center;
  border: 5px solid #b1e971;
  border-bottom: none;
  cursor: pointer;
  font-family: "M PLUS 1p", sans-serif;
  font-size: 1.5rem;
  margin-right: 30px;
}

/* タブを選択したときのスタイル */
.tab2.open {
  background-color: #b1e971;
  color: #fff;
}

/* tab全体 */
.content-area2 {
  position: relative;
  width: 100%;
}

.content-area2 .content2 {
  height: 80vh;
  background-color: #b1e971;
  padding: 20px;
  border: 5px solid #b1e971;
  border-radius: 10px;
}


/* tab内の漫画情報を入れるスペース */

/* 二番目以降は見えない */
.content2 {
  display: none;
}

/* クリックされた時のスタイル設定 */
.content2.open {
  display: block;
}

/* 各コンテンツのスタイル設定 */


.content2 .morebuton {
  position: absolute;
  bottom: 25px;
  display: block;
  width: 250px;
  height: 85px;
  border-radius: 40px;
  background-color: #fff;
}

.content2 .butonline {
  border: 3px solid #b1e971;
  height: 65px;
  border-radius: 40px;
  margin: 10px;
}

.content2 .morebuton button {
  background-color: transparent;
  border: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  font-weight: bold;
  font-size: 25px;
  color: #b1e971;
  cursor: pointer;
}



/* staffおすすめエリアの設定 */
.staff {
  margin-top: 60px;
}

/* エリア背景 */
.staff>.comic-content {
  position: relative;
  height: 80vh;
  background-color: #f3fc80;
  padding: 20px;
  margin-top: 20px;
  border: 5px solid #f3fc80;
  border-radius: 10px;
}

.staff .morebuton {
  position: absolute;
  bottom: 20px;
}

.staff .butonline {
  border-color: #dfe772;
}

.staff button {
  color: #dfe772;
}


/* カテゴリーから探す */
.category {
  margin-top: 60px;
}

.category h2 {
  margin-left: 50px;
}

.category ul {
  width: 60%;
  display: flex;
  flex-wrap: wrap;
  margin: 20px auto 0;
  justify-content: space-around;
}

.category ul li {
  width: 40%;
  height: 80px;
  list-style: none;
  line-height: 80px;
  text-align: center;
  border: 2px solid #333;
  border-radius: 20px;
  margin: 9px;
}

.category ul li a {
  text-decoration: none;
  display: block;
}

.category button {
  background-color: transparent;
  font-weight: bold;
  text-decoration: underline 2px solid #333;
  border: none;
  font-size: 20px;
  width: fit-content;
  display: block;
  margin: 10px auto 0;
}

/* footerbanerの設定 */
.baner {
  display: flex;
  width: 80%;
  margin: 60px auto 0;
  flex-wrap: wrap;
  justify-content: space-around;
}

.baner a {
  width: 45%;
}

.baner a :first-child,
.baner a :nth-child(3) {
  margin-right: 10px;
}

.baner a:nth-child(3),
.baner a:nth-child(4) {
  margin-top: 15px;
}