@charset "UTF-8";

/* Reset some default styles */
html, body, div, span, h1, h2, h3, p, a, img, ul, ol, li, table, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 elements reset */
article, aside, footer, header, nav, section {
  display: block;
}

body {
  color: azure;
  background-color: #353232;
}

img {
  width: 50%;
  height: auto;
}

li {
  list-style: none;
}
/* <weight>: Use a value from 400 to 900 */

.mst {
  font-family: "Orbitron", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  font-size: 2.5rem;
  margin: 20px 30px;
}

.hero {
  font-family: "WDXL Lubrifont JP N", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin: 20px auto;
}

.hero img {
  width: 50%;
  height: auto;
  display: block;
  margin: 0 auto;
  border: 5px solid azure;
  border-radius: 10px;
}

.hero .title {
  font-size: 2rem;
  text-align: center;
  margin-top: 10px;
}

.books {
  text-align: center;
  justify-content: center;
  margin: 20px auto;
}

.books h2 {
  font-family: "WDXL Lubrifont JP N", sans-serif;
  font-size: 1.8rem;
  margin-top: 50px;
  position: relative;
  padding-bottom: 10px;
}

.books h2::after {
  content: '';
  background-color: #96101D;
  width: 1em;
  height: 5px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

.book {
  margin-top: 20px;
}
.books img {
  border: 5px solid azure;
}

.books .new_label {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: 10px;
}
.books .new_label::before,
.books .new_label::after {
  content: '';
  width: 3px;
  height: 20px;
  background-color: #96101D;
}
.books .new_label::before {
  margin-right: 10px;
  transform: rotate(-35deg);
}
.books .new_label::after {
  margin-left: 10px;
  transform: rotate(35deg);
}

.books .book_name {
  font-family: "WDXL Lubrifont JP N", sans-serif;
  font-size: 1.6rem;
  margin-top: 10px;
  margin-bottom: 10px;
}

.books .description {
  font-family: "BIZ UDPGothic", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.7rem;
  margin-bottom: 10px;
  line-height: 20px;
}

.books .price {
  font-family: "BIZ UDPGothic", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.7rem;
  margin-bottom: 10px;
}

.books .price span {
  font-family: "BIZ UDPGothic", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1.3rem;
  margin-right: 5px;
}

.buy .button {
  display: inline-block;
  padding: 12px 40px;
  font-size: 1rem;
  font-weight: 700;
  color: #353232;
  background-color: azure;
  border: none;
  border-radius: 5px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  margin-bottom: 40px;
}

/* タップ時（:active）のスタイル */
.buy .button:active {
  background-color: rgb(205, 215, 215); /* タップ時の背景色 */
  transform: scale(0.95); /* タップ時に少し縮小 */
}

.social-links {
  text-align: center;
  margin: 20px 20px;
}

.social-links h2 {
  font-family: "WDXL Lubrifont JP N", sans-serif;
  font-size: 1.8rem;
  position: relative;
  padding-bottom: 10px;
}

.social-links h2::after {
  content: '';
  background-color: #96101D;
  width: 1em;
  height: 5px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

.social-links li {
  margin-bottom: 20px;
}

.social-links li:first-child {
  margin-top: 30px; /* 最初の要素の上に余白を追加 */
}

.social-links li:last-child {
  margin-bottom: 30px;
}

.social-links img {
  padding: 10px;
  border: 1px solid azure; /* 白い縁取りを追加 */
}

.social-links .twitter-tweet {
  text-align: center; /* 親要素で中央揃え */
  width: 100%; /* 親要素の幅に合わせる */
  max-width: 100%; /* 最大幅を画面幅に制限 */
  overflow: hidden; /* 横スクロールを防ぐ */
  margin: 20px auto; /* 中央揃え */
}

.footer {
  text-align: center;
  padding: 20px;
  background-color: #353232;
  color: azure;
  font-family: "BIZ UDPGothic", sans-serif;
  font-size: 0.7rem;
}

/* PC向けのスタイル（レスポンシブ対応） */
@media (min-width: 768px) {
  body {
    max-width: 400px; /* スマホサイズの幅を維持 */
    margin: 0 auto; /* 上下に余白を追加 */
    background-image: url("../img/black_00131.jpg"); /* 相対パスで背景画像を指定 */
    background-size: cover; /* 画像を要素全体に敷き詰める */
    background-repeat: no-repeat; /* 画像の繰り返しを防ぐ */
    background-position: center; /* 画像を中央に配置 */
  }

  .pc {
    border: 3px solid azure; /* 白い縁取りを追加 */
    background-color: #353232;
  }
}