html {
            scroll-behavior: smooth;
            font-size: 62.5%;
          }

          body {
            max-width: 600px;
            margin: 0 auto;
            font-family: "A P-OTF Shin Maru Go Pr6N", "M PLUS Rounded 1c", sans-serif;
            background-color: #18086A;
            font-style: normal;
          }

          * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
          }

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

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

/* フロートボタン */
.floating-button {
  position: fixed;
  bottom: 16px;
  left: 50%;
  z-index: 999;
  display: none;
  transform: translateX(calc(300px - 120px));
}

@media screen and (max-width: 600px) {
  .floating-button {
    transform: none;
    right: 16px;
    left: auto;
  }
}

.floating-button img {
  width: 120px; /* お好みで調整 */
  height: auto;
}

.floating-button:hover img {
  transform: scale(1.05);
}
/* フロートボタンここまで */

 /* mainVisual_C */
/* === (画像内ボタン) === */
.mainVisual_C {
  position: relative;
}

.mainVisual_C .mainVisual_button {
  position: absolute;
  bottom: 6rem;
  padding: 0 1.8rem;
  width: 100%;
}

/* frame_button_B */
/* === (枠外ボタン) === */
.frame_button_B .frame_area {
  display: flex;
  padding: 4rem 1.6rem 6rem 1.6rem;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
  border-radius: 2.4rem 2.4rem 0px 0px;
  background: #EC61CD;
  position: relative;
  z-index: 1;
  margin-top: -24px;
}

.frame_area p{
  color: #18086A;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
}

.frame_button_B .frame_inner {
  display: flex;
  padding: 1.6rem 1.6rem 2.4rem;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
  align-self: stretch;
  border-radius: 1.6rem;
  border: 2px solid #000;
  background: #f5f5f5;
}
.frame_button_B .frame_image {
  width: 100%;
}
.frame_button_B .frame_text {
  color: #232323;
  text-align: center;
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 600;
  line-height: 20px; /* 166.667% */
}

.frame_button_B .frame_button {
  width: 100%;
}

.frame_button_B .detail_item {
  position: relative;
  display: flex;
  margin-top: calc(16px + 8px);
  padding: 3.2rem 2.4rem 2.4rem 2.4rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.4rem;
  align-self: stretch;
  border: 2px solid #18086A;
  background: #F6F6F6;
}

.frame_button_B .detail_item--notice {
  gap: 1.2rem;
}

.frame_button_B .detail_item h3 {
  position: absolute;
  top: -19px;
  display: flex;
  padding: 0 1.6rem;
  align-items: center;
  gap: 0.8rem;
  background: #EC61CD;
  color: #18086A;
  border: 2px solid #18086A;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
  line-height: 32px; /* 200% */
}

.frame_button_B .detail_item p {
  color: #18086A;
  text-align: center;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 171.429% */
}


/* howto */
.howto .frame_area {
  display: flex;
  padding: 4rem 1.6rem 6rem 1.6rem;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
  border-radius: 2.4rem 2.4rem 0px 0px;
  background: #5B75FF;
  position: relative;
  z-index: 1;
  margin-top: -24px;
}

.frame_area p{
  color: #18086A;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
}

.howto .frame_inner {
  display: flex;
  padding: 1.6rem 1.6rem 2.4rem;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
  align-self: stretch;
  border-radius: 1.6rem;
  border: 2px solid #000;
  background: #f5f5f5;
}
.howto .frame_image {
  width: 100%;
}
.howto .frame_text {
  color: #232323;
  text-align: center;
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 600;
  line-height: 20px; /* 166.667% */
}

.howto .frame_button {
  width: 100%;
}

.howto .detail_item {
  position: relative;
  display: flex;
  margin-top: calc(16px + 8px);
  padding: 3.2rem 2.4rem 2.4rem 2.4rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.4rem;
  align-self: stretch;
  border: 2px solid #18086A;
  background: #F6F6F6;
}

.howto .detail_item--notice {
  gap: 1.2rem;
}

.howto .detail_item h3 {
  position: absolute;
  top: -19px;
  display: flex;
  padding: 0 1.6rem;
  align-items: center;
  gap: 0.8rem;
  background: #EC61CD;
  color: #18086A;
  border: 2px solid #18086A;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
  line-height: 32px; /* 200% */
}

.howto .detail_item p {
  color: #18086A;
  text-align: center;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 171.429% */
}




/* grid_A */
/* === (書影３列_ボタンなし) === */
.grid_A {
  display: flex;
  padding: 4rem 1.6rem 6rem 1.6rem;
  flex-direction: column;
  gap: 1.6rem;
  background: #EC61CD;
  border-radius: 2.4rem 2.4rem 0px 0px;
  position: relative;
  z-index: 1;
  margin-top: -24px;
}
.grid_A .grid_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem 0.8rem;
  list-style: none;
}

.grid_A .grid_item {
  border: 2px solid #420403;
}

.grid_A .grid_button {
  width: 100%;
}

.grid_A .grid_item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* detail_A */
/* === (テキスト内リンク有) === */
.detail_A h2 {
  max-width: 280px;
  width: 100%;
}

.detail_A .detail_list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.detail_A {
  position: relative;
  display: flex;
  padding: 4rem 1.6rem;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
  background: #18086A;
  border-radius: 2.4rem 2.4rem 0px 0px;
  position: relative;
  z-index: 1;
  margin-top: -24px;
}

.detail_A .detail_item {
  position: relative;
  display: flex;
  margin-top: calc(16px + 8px);
  padding: 3.2rem 2.4rem 2.4rem 2.4rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.4rem;
  align-self: stretch;
  border: 2px solid #18086A;
  background: #fff;
}

.detail_A .detail_item--notice {
  gap: 1.2rem;
}

.detail_A .detail_item h3 {
  position: absolute;
  top: -19px;
  display: flex;
  padding: 0 1.6rem;
  align-items: center;
  gap: 0.8rem;
  background: #EC61CD;
  color: #18086A;
  border: 2px solid #18086A;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
  line-height: 32px; /* 200% */
}

.detail_A .detail_item p {
  color: #18086A;
  text-align: center;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 171.429% */
}

.detail_A .detail_item a {
  color: #5B75FF;
  text-decoration-line: underline;
}

.detail_A .detail_item .notice {
  color: #18086A;
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 500;
  line-height: 18px; /* 150% */
  list-style: disc;
}

.detail_A .detail_item .notice_list {
  width: 100%;
  padding: 1.6rem 1.6rem 1.6rem calc(1.6rem + 1em);
  border-radius: 1.6rem;
  border: 0.5px solid #000;
  background: #fff;
  list-style: disc;
  color: #232323;
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 500;
  line-height: 180%; /* 21.6px */
}

footer{
  color: #18086A;
  text-align: center;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; 
  display: flex;
  padding: 8px 0px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  background: #F081D7;
}