html {
  scroll-behavior: smooth; /* ページ全体のスクロールをスムーズに */
  font-size: 62.5%;
}

body {
  max-width: 600px; /* ページ全体の最大幅を600pxに制限 */
  margin: 0 auto;
  font-family: 'U-OTF Shin Maru Go Upr', 'A P-OTF Shin Maru Go Pr6N',
    'A-OTF Shin Maru Go Pr6', sans-serif;
  font-style: normal;
  background-color: #0a68e7;
}

/* グローバルリセット（すべての要素に適用） */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

.header {
  width: 100%;
  height: auto;
  position: relative;
}

.header__button {
  position: absolute;
  bottom: 5%;
  right: 0;
  left: 0;
  padding: 0 16px;
}

.dividerSvg {
  position: absolute;
  bottom: -2%;
  display: block;
  width: 100%;
  height: auto;
  /* 後続の要素の背景画像に埋もれないようにするため設定 */
  z-index: 1;
}

.dividerSvg--footer {
  bottom: -0.2%;
}

.coinAndPointReturn {
  display: flex;
  width: 100%;
  padding: 40px 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  background: url('./img/bg/bg3.png') lightgray 50% / cover no-repeat;
  position: relative;
}

.goodDeal {
  padding: 40px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url('./img/bg/bg1.png') lightgray 50% / cover no-repeat;
  font-family: 'U-OTF Shin Maru Go Upr', sans-serif;
}

.goodDealComics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 16px 0 24px 0;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  align-self: stretch;
}

.comicTitle {
  width: 100%;
  border-radius: 10.667px 10.667px 0px 0px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
  background: #f3157b;
  color: #fff;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
}

.comicWrapper {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  align-self: stretch;
  padding: 0 6px;
  justify-content: center;
}

.comicImg {
  width: 60px;
  height: 75px;
  aspect-ratio: 4/5;
  display: flex;
}

.comicImg img {
  object-fit: contain;
}

.comicDetail {
  color: rgba(0, 0, 0, 0.85);
  font-size: 11px;
  font-weight: 400;
  line-height: 120%; /* 13.2px */
}

.comicDetail__price {
  color: rgba(0, 0, 0, 0.85);
  font-size: 11px;
  font-weight: 700;
  line-height: 120%;
  position: relative;
  display: inline-block;
}

.priceLine {
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 90%;
  height: auto;
  z-index: 0;
  pointer-events: none;
}

.comicDetail__goodDeal {
  /* テキストのスタイル */
  text-align: center;
  padding-top: 2px;
  font-weight: 700;
  line-height: 120%;
  display: block;
  color: #fff;
  font-size: 9px;
  width: 90px;
  /* 背景画像のスタイル */
  background: url('./img/speech-bubble/bg.svg') transparent 100% / cover
    no-repeat;
  height: 19.835px;
  margin-top: 4px;
}

.comicDetail__canpainPrice {
  color: #e8408c;
  font-size: 15px;
  font-style: normal;
  font-weight: 800;
  line-height: 120%; /* 19.2px */
  margin-top: 4px;
}

.comicAward {
  width: 100%;
  color: rgba(0, 0, 0, 0.5);
  font-size: 11px;
  /* font-size: 11px; */
  font-style: normal;
  font-weight: 500;
  line-height: 120%; /* 13.2px */
  padding: 0 6px 8px 6px;
}

.comicAward__detail {
  color: rgba(0, 0, 0, 0.5);
  font-size: 8px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  display: block;
}

.goodDealEvent {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 24px 0 32px 0;
}

.goodDealEvent img {
  display: block;
}

.events {
  position: relative;
}

.eventTop {
  background-position: center 63%;
  background-size: 100% auto;
  background-repeat: repeat;
  background-image: url(./img/bg/bg3.png);
  background-color: lightgray;
  border-radius: 30px 30px 0px 0px;
  margin-top: -26px;
  padding: 26px 0 48px 0;
}

.coinReturnEvent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 0px 1.5rem;
}

.coinReturnEvent__img {
  padding: 0 8px;
}

.recommendcomics {
  padding: 16px 0;
  border-radius: 26px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  align-self: stretch;
}

.recommendcomics__head {
  min-width: 325px;
  margin: 0 8px;
}

.recommendcomics__comics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: space-between;
  align-items: center;
  align-content: center;
  gap: 8px;
  padding: 16px 16px 18px 16px;
}

.otherRecommendcomics {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.comicContainer {
  gap: 4px;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
}

.comicContainer__img img {
  object-fit: contain;
  height: 100%;
}

.comicContainer__img--cover img {
  object-fit: cover;
}

.comicContainer__img--boder {
  border: 1px solid #cacaca;
}

.comicContainer__button {
  display: flex;
  width: 100%;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.693px;
  border-radius: 9px;
  border: 0.337px solid rgba(0, 0, 0, 0.3);
  background: #2f9bf3;
  box-shadow:
    0px 2px 0px #4b0082,
    /* 内側の影 */ 0px 4px 0px rgba(255, 255, 150, 0.7); /* 外側の影 */
}

.buttonText {
  color: #fff;
  font-family: 'A P-OTF Shin Maru Go Pr6N', sans-serif;
  font-size: 9px;
  font-weight: 600;
  line-height: 117%;
  text-shadow: 0px 0.673px 0px rgba(0, 0, 0, 0.25);
  text-align: center;
}

.buttonText--sm {
  font-size: 8px;
}

.buttonText--label {
  color: #fffbad;
  text-align: center;
  font-size: 11px;
  display: block;
}

.buttonText--label--sm {
  font-size: 8px;
}

@media (min-width: 450px) {
  .buttonText {
    font-size: calc(9px * 1.2);
  }

  span.buttonText--label--sm {
    font-size: calc(8px * 1.3);
  }

  .buttonText--label {
    font-size: calc(11px * 1.2);
  }
}

.otherRecommendcomics__text {
  color: #001aff;
  text-align: center;
  font-family: 'A-OTF Shin Maru Go Pr6N', sans-serif;
  font-size: 21px;
}

.otherRecommendcomics__text--highlight {
  font-weight: 600;
}

.otherRecommendcomics__button {
  padding: 0 24px;
}

.pointReturnEvent {
  padding: 0 8px;
  margin-top: 22px;
}

.pointReturnEvent__img {
  margin: 0 auto;
}

.pointReturnEvent__contents {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  padding: 8px;
  justify-content: center;
  align-items: center;
  gap: 24px;
  align-self: stretch;
}

.pointReturnEvent__causion {
  display: flex;
  padding: 16px 24px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  border-radius: 12px;
  background: #48c650;
}

.causionList {
  padding-left: 16px;
}

.causionList__text {
  color: #fff;
  font-family: 'A-OTF Shin Maru Go Pr6', sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 190%; /* 24.7px */
}

.causionList__text--muted {
  font-weight: 400;
}

.causionList__text--highlight {
  color: #fff395;
  font-weight: 400;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.eventBottom {
  background: url('./img/bg/bg2.png') lightgray 50% / cover no-repeat;
  border-radius: 30px 30px 0px 0px;
  padding-top: 30px;
  margin-top: -24px;
}

.freeComicsEvent {
  display: flex;
  padding: 30px 16px 45px 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.freeComicsEvent__img {
  width: 100%;
  margin: 0 auto;
  display: block;
}

.freeComics {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  gap: 16px 8px;
  padding: 24px 16px;
  border-radius: 24px;
  background: #fff;
  margin: 0 auto;
}

.freeComics__img {
  aspect-ratio: 103/146;
}

.freeComics__img img {
  object-fit: contain;
  height: 100%;
}

.dailyFreeComicsEvent {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 16px 45px 16px;
  margin: 0 auto;
}

.dailyFreeComicsEvent__img {
  margin: 0 auto;
}

.dailyFreeComics {
  display: flex;
  padding: 24px 16px;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  border-radius: 26px 16px 18px 26px;
  background: #fff;
}

.dailyFreeComics__comics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 16px;
}

.dailyFreeComics__img img {
  height: 100%;
  object-fit: contain;
}

.footer {
  position: relative;
}

.footer__fg {
  position: absolute;
  display: flex;
  flex-direction: column;
  bottom: 23%;
  padding: 0 16px;
}