:root {
  --color-primary: #8ad9f6;
  --color-primary-rgb: 138, 217, 246;
  --color-primary-shade: #438cad;
  --color-primary-tint: #96ddf7;
  --color-secondary: #fff100;
  --color-secondary-rgb: 255, 241, 0;
  --color-secondary-shade: #e0d400;
  --color-secondary-tint: #fff21a;
  --color-tertiary: #ff8e00;
  --color-tertiary-rgb: 255, 142, 0;
  --color-tertiary-shade: #e07d00;
  --color-tertiary-tint: #ff991a;
  --color-dark: #42210b;
  --color-dark-rgb: 66, 33, 11;
  --color-dark-shade: #3a1d0a;
  --color-dark-tint: #553723;
  --size-unit: 8px;
}
*,
::after,
::before {
  box-sizing: border-box;
}
* {
  padding: 0;
  margin: 0;
}
html {
  height: 100%;
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body#frippy {
  width: 100%;
  min-height: 100vh;
  font-family:
    "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "BIZ UDPGothic", Meiryo,
    sans-serif;
  font-size: clamp(1.25rem, 1.036rem + 1.07vw, 2rem);
  font-style: normal;
  font-weight: 500;
  font-feature-settings: "palt" 1;
  color: #42210b;
  color: var(--color-dark);
  text-align: justify;
  text-justify: inter-ideograph;
  word-break: break-all;
  text-wrap: pretty;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  print-color-adjust: exact;
  background: #8ad9f6;
  background: var(--color-primary);
}
#frippy {
	.container {
	  position: relative;
	  z-index: 1;
	  display: flex;
	  display: flex;
	  -webkit-flex-direction: column;
	  flex-direction: column;
	  -webkit-justify-content: center;
	  justify-content: center;
	  width: 100%;
	  overflow: clip;
	  line-height: 1.6;
	}
	footer,
	header {
	  -webkit-flex-shrink: 0;
	  flex-shrink: 0;
	}
	main {
	  -webkit-flex: 1 0 auto;
	  flex: 1 0 auto;
	  min-height: 1px;
	}
	img,
	picture {
	  display: block;
	}
	img {
	  max-width: 100%;
	  height: auto;
	  vertical-align: bottom;
	  transition: 0.3s all;
	}
	a:not([class]) {
	  color: currentcolor;
	  text-decoration-skip-ink: auto;
	  -webkit-text-decoration-skip: ink;
	}
	a {
	  text-decoration: none;
	  transition:
	    0.3s color,
	    0.3s background;
	}
	a:link {
	  color: #8ad9f6;
	  color: var(--color-primary);
	}
	a:hover {
	  color: #fff100;
	  color: var(--color-secondary);
	}
	a[href^="tel:"] {
	  color: inherit;
	  text-decoration: none;
	  pointer-events: none;
	}
	button,
	h1,
	h2,
	h3,
	h4,
	input,
	label {
	  font-size: 100%;
	  line-height: 1.2;
	}
	.mincho,
	h1,
	h2,
	h3,
	h4 {
	  font-style: normal;
	  font-weight: 700;
	}
	ol,
	ul {
	  list-style-type: none;
	}
	button,
	input,
	select,
	textarea {
	  font: inherit;
	}
	textarea:not([rows]) {
	  min-height: 10em;
	}
	summary::-webkit-details-marker {
	  display: none;
	}
	:target {
	  scroll-margin-block: 5px;
	}
	.mb-small {
	  margin-bottom: calc(8px * 2);
	  margin-bottom: calc(var(--size-unit) * 2);
	}
	.mb-medium {
	  margin-bottom: calc(8px * 5);
	  margin-bottom: calc(var(--size-unit) * 5);
	}
	.mb-large {
	  margin-bottom: calc(8px * 10);
	  margin-bottom: calc(var(--size-unit) * 10);
	}
	.mt-small {
	  margin-top: calc(8px * 2);
	  margin-top: calc(var(--size-unit) * 2);
	}
	.mt-medium {
	  margin-top: calc(8px * 5);
	  margin-top: calc(var(--size-unit) * 5);
	}
	.mt-large {
	  margin-top: calc(8px * 10);
	  margin-top: calc(var(--size-unit) * 10);
	}
	.fz-large {
	  font-size: 240%;
	}
	.fz-medium {
	  font-size: 160%;
	}
	.fz-small {
	  font-size: 80%;
	}
	.fz-larger {
	  font-size: larger;
	}
	.fz-smaller {
	  font-size: smaller;
	}
	.f-bold {
	  font-weight: 700;
	}
	.t-center {
	  text-align: center;
	  word-break: keep-all;
	  text-wrap: balance;
	}
	.secondary {
	  color: #fff100;
	  color: var(--color-secondary);
	}
	.block {
	  display: block;
	}
	.notice {
	  color: #ff8e00;
	  color: var(--color-tertiary);
	}
	button {
	  padding: 0;
	  font: inherit;
	  color: inherit;
	  cursor: pointer;
	  outline: 0;
	  /*background: 0 0;*/
	  border: none;
	}
	.btn {
	  position: relative;
	  display: grid;
	  -webkit-align-items: center;
	  align-items: center;
	  width: 100%;
	  max-width: 440px;
	  padding: min(3.2vw, 8px * 2);
	  padding: min(3.2vw, var(--size-unit) * 2);
	  margin-inline: auto;
	  font-weight: 700;
	  line-height: 1.1;
	  color: #42210b;
	  color: var(--color-dark);
	  text-align: center;
	  white-space: nowrap;
	  text-decoration: none;
	  cursor: pointer;
	  background-color: #fff100;
	  background-color: var(--color-secondary);
	  border: 4px solid #fff;
	  border-radius: 100vmax;
	  transition: 0.3s all;
	}
	.btn.next {
	  grid-template-columns: 1fr auto 1fr;
	  -webkit-column-gap: calc(8px * 2);
	  -webkit-column-gap: calc(var(--size-unit) * 2);
	  -moz-column-gap: calc(8px * 2);
	  -moz-column-gap: calc(var(--size-unit) * 2);
	  column-gap: calc(8px * 2);
	  column-gap: calc(var(--size-unit) * 2);
	}
	.btn.next::before {
	  content: "";
	}
	.btn.next::after {
	  top: 50%;
	  display: block;
	  width: 0;
	  height: 0;
	  content: "";
	  border-color: transparent transparent transparent #42210b;
	  border-color: transparent transparent transparent var(--color-dark);
	  border-style: solid;
	  border-width: 12px 0 12px 16px;
	}
	.btn.border {
	  color: #8ad9f6;
	  color: var(--color-primary);
	  background-color: var(--color-light);
	  border: 1px solid currentcolor;
	}
	.btn.close {
	  color: #553723;
	  color: var(--color-dark-tint);
	  background-color: var(--color-light-shade);
	}
	a.btn {
	  color: var(--color-light-tint);
	}
	.btn-flex {
	  display: flex;
	  display: flex;
	  gap: calc(8px * 4);
	  gap: calc(var(--size-unit) * 4);
	  width: 100%;
	}
	.btn-flex li {
	  -webkit-flex: 1;
	  flex: 1;
	}
	a.btn-arrow {
	  position: relative;
	  display: flex;
	  display: flex;
	  gap: 8px;
	  gap: var(--size-unit);
	  -webkit-align-items: center;
	  align-items: center;
	}
	a.btn-arrow:link {
	  color: #42210b;
	  color: var(--color-dark);
	}
	a.btn-arrow:visited {
	  color: #553723;
	  color: var(--color-dark-tint);
	}
	a.btn-arrow:hover {
	  color: #fff100;
	  color: var(--color-secondary);
	}
	a.btn-arrow::after {
	  display: block;
	  width: 24px;
	  height: 24px;
	  content: "";
	  background: url(../img/common/btn_arrow.svg) no-repeat 0 0;
	  background-size: cover;
	}
	.disc {
	  margin-left: 1.2em;
	  list-style-type: disc;
	}
	.disc li {
	  position: relative;
	}
	.disc li + li {
	  margin-top: 0.5em;
	}
	.disc li ul li {
	  margin-top: 0.5em;
	}
	.indent {
	  margin-top: 1em;
	  margin-left: 1em;
	  text-indent: -1em;
	}
	.notice {
	  color: #ff8e00;
	  color: var(--color-tertiary);
	}
	.js .fadein {
	  opacity: 0;
	  -webkit-transform: translateY(calc(8px * 5));
	  -webkit-transform: translateY(calc(var(--size-unit) * 5));
	  transform: translateY(calc(8px * 5));
	  transform: translateY(calc(var(--size-unit) * 5));
	  transition:
	    opacity 0.8s ease,
	    -webkit-transform 0.8s ease;
	  transition:
	    opacity 0.8s ease,
	    transform 0.8s ease;
	  transition:
	    opacity 0.8s ease,
	    transform 0.8s ease,
	    -webkit-transform 0.8s ease;
	}
	.js .fadein.is-show {
	  opacity: 1;
	  -webkit-transform: translateY(0);
	  transform: translateY(0);
	}
	header {
	  position: sticky;
	  position: sticky;
	  top: 0;
	  left: 0;
	  z-index: 2;
	  width: 100%;
	  min-height: 72px;
	  padding: calc(8px * 3) calc(8px * 3) calc(8px * 4);
	  padding: calc(var(--size-unit) * 3) calc(var(--size-unit) * 3)
	    calc(var(--size-unit) * 4);
	  transition:
	    0.3s padding,
	    0.3s font-size;
	}
	header::after,
	header::before {
	  position: absolute;
	  left: 0;
	  display: block;
	  width: 100%;
	  content: "";
	}
	header::before {
	  top: 0;
	  z-index: -2;
	  height: calc(100% - 24px);
	  background-color: #fff100;
	  background-color: var(--color-secondary);
	}
	header::after {
	  bottom: 0;
	  z-index: -1;
	  width: 100%;
	  height: 100%;
	  background: url(../img/common/bg_header.svg) repeat-x 50% 100%;
	  background-size: 160px 24px;
	}
	.header-inner {
	  position: relative;
	  width: min(100%, 1360px);
	  margin-inline: auto;
	}
	.g-nav {
	  display: flex;
	  display: flex;
	  -webkit-flex-wrap: wrap;
	  flex-wrap: wrap;
	  gap: calc(8px * 3);
	  gap: calc(var(--size-unit) * 3);
	  -webkit-align-items: center;
	  align-items: center;
	  -webkit-justify-content: center;
	  justify-content: center;
	  width: 100%;
	}
	.g-nav ul {
	  display: flex;
	  display: flex;
	  -webkit-align-items: center;
	  align-items: center;
	  -webkit-justify-content: center;
	  justify-content: center;
	}
	.g-nav li {
	  font-weight: 700;
	}
	.header-nav {
	  -webkit-flex-wrap: wrap;
	  flex-wrap: wrap;
	  gap: 8px;
	  gap: var(--size-unit);
	}
	.header-nav a {
	  display: block;
	  padding: 8px calc(8px * 2);
	  padding: var(--size-unit) calc(var(--size-unit) * 2);
	  color: #42210b;
	  color: var(--color-dark);
	  border-radius: 100vmax;
	}
	.header-nav a.current {
	  background-color: #ff8e00;
	  background-color: var(--color-tertiary);
	}
	.sns-nav {
	  gap: calc(8px * 2);
	  gap: calc(var(--size-unit) * 2);
	}
	.sns-nav li {
	  padding: 8px;
	  padding: var(--size-unit);
	  background-color: #fff;
	  border: 1px solid #42210b;
	  border: 1px solid var(--color-dark);
	  border-radius: 100vmax;
	}
	.sns-nav li img {
	  width: 24px;
	  height: auto;
	}
	.menu-btn {
	  display: none;
	}
	.menu-text {
	  position: absolute;
	  width: 1px;
	  height: 1px;
	  padding: 0;
	  overflow: hidden;
	  white-space: nowrap;
	  border: 0;
	  clip: rect(0, 0, 0, 0);
	}
	.is-scroll {
	  font-size: 90%;
	}
	#overlay {
	  position: fixed;
	  top: 0;
	  left: -100%;
	  z-index: 2;
	  width: 100%;
	  height: 100dvh;
	  background: rgb(0 0 0 / 50%);
	  opacity: 0;
	  transition: 0.3s ease-out;
	}
	#overlay.block {
	  left: 0;
	  opacity: 1;
	}
	main {
	  position: relative;
	  z-index: 0;
	  width: 100%;
	}
	.contents-box {
	  position: relative;
	  width: min(100%, 1360px);
	  padding: calc(8px * 10) 0;
	  padding: calc(var(--size-unit) * 10) 0;
	  margin-inline: auto;
	}
	.hero {
	  position: relative;
	  display: flex;
	  display: flex;
	  -webkit-flex-direction: column;
	  flex-direction: column;
	  -webkit-align-items: center;
	  align-items: center;
	  width: 100%;
	  padding: 0 calc(8px * 5);
	  padding: 0 calc(var(--size-unit) * 5);
	}
	.nav-button-next,
	.nav-button-prev {
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  z-index: 1;
	  display: grid;
	  place-content: center;
	  width: 48px;
	  height: 48px;
	  margin: auto;
	  cursor: pointer;
	}
	.nav-button-prev {
	  left: 0;
	}
	.nav-button-next {
	  right: 0;
	}
	.nav-button-next::before,
	.nav-button-prev::before {
	  position: absolute;
	  inset: 0;
	  content: "";
	  background-color: rgb(255 142 0 / 80%);
	  background-color: rgb(var(--color-tertiary-rgb), 0.8);
	  border-radius: 50%;
	}
	.nav-button-next::after,
	.nav-button-prev::after {
	  width: 1.2rem;
	  height: 1.2rem;
	  content: "";
	  border: solid #fff;
	  border-width: 3px 3px 0 0;
	}
	.nav-button-prev::after {
	  margin-left: 0.4rem;
	  -webkit-transform: rotate(-135deg);
	  transform: rotate(-135deg);
	}
	.nav-button-next::after {
	  margin-right: 0.4rem;
	  -webkit-transform: rotate(45deg);
	  transform: rotate(45deg);
	}
	.swiper-button-disabled {
	  pointer-events: none;
	  cursor: normal;
	  opacity: 0.5;
	}
	.modal-open {
	  position: relative;
	  cursor: pointer;
	}
	.modal-content {
	  padding: calc(8px * 3);
	  padding: calc(var(--size-unit) * 3);
	}
	.modal-inner {
	  display: flex;
	  display: flex;
	  -webkit-flex-direction: column;
	  flex-direction: column;
	  gap: calc(8px * 3);
	  gap: calc(var(--size-unit) * 3);
	  -webkit-align-items: center;
	  align-items: center;
	}
	.modal-close {
	  width: fit-content;
	  width: fit-content;
	  width: fit-content;
	  padding: 8px calc(8px * 3);
	  padding: var(--size-unit) calc(var(--size-unit) * 3);
	  margin-inline: auto;
	  color: #fff;
	  background-color: #42210b;
	  background-color: var(--color-dark);
	  border-radius: 100vmax;
	}
	.iziModal {
	  padding: 0 calc(8px * 5);
	  padding: 0 calc(var(--size-unit) * 5);
	  background-color: transparent;
	  box-shadow: none;
	}
	.iziModal-wrap {
	  padding: calc(8px * 3);
	  padding: calc(var(--size-unit) * 3);
	  background-color: #fff;
	  border-radius: 8px;
	  box-shadow: 0 0 8px rgb(0 0 0 / 40%);
	}
	.iziModal-navigate > button {
	  opacity: 0.7;
	}
	.chara {
	  position: relative;
	  padding: 0 calc(8px * 5);
	  padding: 0 calc(var(--size-unit) * 5);
	}
	.chara::before {
	  position: absolute;
	  top: 40%;
	  left: 50%;
	  z-index: -1;
	  display: block;
	  width: 1920px;
	  height: 756px;
	  content: "";
	  background: url(../img/common/bg_frippy_front.png) no-repeat -160px 0;
	  background-size: contain;
	  -webkit-transform: translateX(-50%);
	  transform: translateX(-50%);
	}
	.chara-wrap {
	  position: relative;
	  display: flex;
	  display: flex;
	  -webkit-align-items: center;
	  align-items: center;
	  -webkit-justify-content: center;
	  justify-content: center;
	  width: 100%;
	  aspect-ratio: 1252/606;
	  padding: 0 calc(8px * 2);
	  padding: 0 calc(var(--size-unit) * 2);
	}
	.chara-wrap::before {
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  z-index: -1;
	  width: min(100%, 1252px);
	  height: 100%;
	  pointer-events: none;
	  content: "";
	  background: url(../img/top/bg_chara.svg) no-repeat 50% 50%;
	  background-size: contain;
	  -webkit-transform: translate(-50%, -50%);
	  transform: translate(-50%, -50%);
	}
	.chara-list {
	  position: relative;
	  width: min(100%, 1100px);
	  padding: 0 calc(8px * 10);
	  padding: 0 calc(var(--size-unit) * 10);
	  overflow: clip;
	}
	.chara-list [class*="swiper"]:focus {
	  outline: 0;
	}
	.chara-list .swiper-slide {
	  display: flex;
	  display: flex;
	  -webkit-flex-direction: column;
	  flex-direction: column;
	  gap: calc(8px * 3);
	  gap: calc(var(--size-unit) * 3);
	  -webkit-align-items: center;
	  align-items: center;
	  -webkit-justify-content: center;
	  justify-content: center;
	  padding: calc(8px * 4) 0;
	  padding: calc(var(--size-unit) * 4) 0;
	  text-align: center;
	}
	.chara-list .swiper-slide a {
	  color: #42210b;
	  color: var(--color-dark);
	}
	.chara-list .swiper-button-lock {
	  display: none;
	}
	.comic {
	  padding: 0 calc(8px * 5);
	  padding: 0 calc(var(--size-unit) * 5);
	}
	.comic-wrap {
	  position: relative;
	  display: flex;
	  display: flex;
	  gap: calc(8px * 3);
	  gap: calc(var(--size-unit) * 3);
	  -webkit-justify-content: center;
	  justify-content: center;
	  width: 100%;
	  aspect-ratio: 1258/592;
	  padding: 0 min(2.4vw, 8px * 8);
	  padding: 0 min(2.4vw, var(--size-unit) * 8);
	}
	.comic-wrap::before {
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  z-index: -1;
	  width: min(100%, 1258px);
	  height: 100%;
	  pointer-events: none;
	  content: "";
	  background: url(../img/top/bg_comic.svg) no-repeat 50% 50%;
	  background-size: contain;
	  -webkit-transform: translate(-50%, -50%);
	  transform: translate(-50%, -50%);
	}
	.comic-btn {
	  position: relative;
	  width: 32%;
	}
	.comic-btn a {
	  position: absolute;
	  top: 46%;
	  left: 32%;
	  width: fit-content;
	  width: fit-content;
	  width: fit-content;
	  -webkit-transform: translateY(-50%);
	  transform: translateY(-50%);
	}
	.comic-img {
	  display: flex;
	  display: flex;
	  -webkit-align-items: flex-start;
	  align-items: flex-start;
	  -webkit-justify-content: center;
	  justify-content: center;
	  width: 68%;
	}
	.wallpaper {
	  position: relative;
	  padding: 0 calc(8px * 5);
	  padding: 0 calc(var(--size-unit) * 5);
	}
	.wallpaper::before {
	  position: absolute;
	  top: 40%;
	  left: 50%;
	  z-index: -1;
	  display: block;
	  width: 1920px;
	  height: 756px;
	  content: "";
	  background: url(../img/common/bg_frippy_back.png) no-repeat right -160px top 0;
	  background-size: contain;
	  -webkit-transform: translateX(-50%);
	  transform: translateX(-50%);
	}
	.wallpaper-wrap {
	  position: relative;
	  display: grid;
	  grid-template-rows: repeat(8, 1fr);
	  grid-template-columns: repeat(12, 1fr);
	  width: 100%;
	  aspect-ratio: 1280/700;
	  padding-left: min(1.6vw, 8px * 12);
	  padding-left: min(1.6vw, var(--size-unit) * 12);
	}
	.wallpaper-wrap::before {
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  z-index: -1;
	  width: min(100%, 1280px);
	  height: 100%;
	  pointer-events: none;
	  content: "";
	  background: url(../img/top/bg_wallpaper.svg) no-repeat 50% 50%;
	  background-size: contain;
	  -webkit-transform: translate(-50%, -50%);
	  transform: translate(-50%, -50%);
	}
	.wallpaper-img1 {
	  position: relative;
	  z-index: 0;
	  grid-area: 1/1/5/6;
	}
	.wallpaper-img2 {
	  position: relative;
	  z-index: -1;
	  grid-area: 4/3/8/10;
	}
	.wallpaper-btn {
	  grid-area: 3/7/5/12;
	}
	.wallpaper-btn .btn {
	  width: fit-content;
	  width: fit-content;
	  width: fit-content;
	}
	.furikuji-wrap {
	  position: relative;
	  width: min(100%, 1338px);
	  aspect-ratio: 1338/1226;
	  padding: 38% 26% 0;
	  margin-inline: auto;
	}
	.furikuji-txt {
	  position: absolute;
	  top: 0;
	  left: 0;
	  z-index: 0;
	  width: 100%;
	}
	.furikuji-youtube {
	  position: relative;
	  z-index: 1;
	  width: 100%;
	  aspect-ratio: 16/9;
	}
	.furikuji-youtube iframe {
	  width: 100%;
	  height: 100%;
	}
	.main-footer {
	  padding: 0 calc(8px * 5);
	  padding: 0 calc(var(--size-unit) * 5);
	}
	.main-footer-img {
	  width: fit-content;
	  width: fit-content;
	  width: fit-content;
	  margin-inline: auto;
	  margin-top: calc(8px * 5);
	  margin-top: calc(var(--size-unit) * 5);
	}
	[class*="bg-peanuts"] {
	  position: absolute;
	  top: 0;
	  left: 50%;
	  z-index: -1;
	  display: block;
	  width: min(100%, 1360px);
	  height: 100%;
	  -webkit-transform: translateX(-50%);
	  transform: translateX(-50%);
	}
	[class*="bg-peanuts"] img {
	  position: absolute;
	}
	.bg-peanuts01 img {
	  top: 100%;
	  left: 0;
	}
	.bg-peanuts02 img {
	  top: 240px;
	  right: -120px;
	}
	.bg-peanuts03 img {
	  right: -160px;
	  bottom: 200px;
	}
	.bg-peanuts04 img {
	  bottom: -120px;
	  left: -120px;
	}
	.bg-peanuts05 img {
	  top: 200px;
	  right: -80px;
	}
	.bg-peanuts06 img {
	  bottom: -120px;
	  left: 80px;
	}
	.bg-peanuts07 img {
	  top: 160px;
	  left: -40px;
	}
	.bg-peanuts08 img {
	  top: 260px;
	  right: -160px;
	}
	.bg-peanuts09 {
	  z-index: -2;
	}
	.bg-peanuts09 img {
	  bottom: 200px;
	  left: -120px;
	}
	.animate01 img {
	  animation: floating01 2.4s ease-in-out infinite alternate-reverse;
	}
	.animate02 img {
	  animation: floating02 2.4s ease-in-out infinite alternate-reverse;
	}
	.page-inner {
	  padding-right: calc(8px * 5);
	  padding-right: calc(var(--size-unit) * 5);
	  padding-left: calc(8px * 5);
	  padding-left: calc(var(--size-unit) * 5);
	}
	.contents-main {
	  position: relative;
	  width: min(100%, 1180px);
	  padding: calc(8px * 8);
	  padding: calc(var(--size-unit) * 8);
	  margin-inline: auto;
	  margin-top: calc(8px * 5);
	  margin-top: calc(var(--size-unit) * 5);
	  background-color: #fff;
	  border-radius: 32px;
	  box-shadow: 16px 16px 0 #fff100;
	  box-shadow: 16px 16px 0 var(--color-secondary);
	}
	.page-inner-list {
	  display: grid;
	  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	  gap: calc(8px * 6);
	  gap: calc(var(--size-unit) * 6);
	}
	.page-inner-list li {
	  display: flex;
	  display: flex;
	  -webkit-flex-direction: column;
	  flex-direction: column;
	  gap: 8px;
	  gap: var(--size-unit);
	  -webkit-align-items: center;
	  align-items: center;
	}
	.page-inner-list .btn {
	  padding: 8px calc(8px * 3);
	  padding: var(--size-unit) calc(var(--size-unit) * 3);
	}
	.izi-modal {
	  display: none;
	}
	.comic-swiper {
	  width: 100%;
	  overflow: hidden;
	}
	.comic-swiper .swiper-wrapper {
	  padding-bottom: calc(8px * 5);
	  padding-bottom: calc(var(--size-unit) * 5);
	}
	.comic-swiper .swiper-slide {
	  width: 100%;
	  padding: 0 calc(8px * 9);
	  padding: 0 calc(var(--size-unit) * 9);
	}
	.comic-swiper .swiper-slide img {
	  width: 100%;
	}
	.comic-swiper .swiper-pagination-bullet {
	  width: 16px;
	  height: 16px;
	}
	.comic-swiper .swiper-pagination-bullet-active {
	  background-color: #ff8e00;
	  background-color: var(--color-tertiary);
	}
	.wallpaper-header-notice {
	  position: relative;
	  display: grid;
	  grid-template-columns: 1fr auto 1fr;
	  place-content: center;
	  width: min(100%, 1180px);
	  margin-inline: auto;
	}
	.wallpaper-header-notice::after,
	.wallpaper-header-notice::before {
	  content: "";
	}
	.wallpaper-header-notice::before {
	  display: block;
	  width: 281px;
	}
	.wallpaper-header-notice dl {
	  display: grid;
	  grid-template-columns: 160px 1fr;
	  gap: 8px calc(8px * 2);
	  gap: var(--size-unit) calc(var(--size-unit) * 2);
	  -webkit-align-items: center;
	  align-items: center;
	  width: fit-content;
	  width: fit-content;
	  width: fit-content;
	  margin-top: calc(8px * 3);
	  margin-top: calc(var(--size-unit) * 3);
	}
	.wallpaper-header-notice dt {
	  position: relative;
	  padding: 4px;
	  text-align: center;
	  border: 2px solid currentcolor;
	  border-radius: 100vmax;
	}
	.wallpaper-header-ttl {
	  position: absolute;
	  bottom: calc(100% - 13px);
	  left: 0;
	}
	.list-flex {
	  display: flex;
	  display: flex;
	  gap: calc(8px * 2);
	  gap: calc(var(--size-unit) * 2);
	  -webkit-justify-content: center;
	  justify-content: center;
	}
	.list-flex.column {
	  -webkit-flex-direction: column;
	  flex-direction: column;
	  -webkit-align-items: center;
	  align-items: center;
	  padding: 0 calc(8px * 4);
	  padding: 0 calc(var(--size-unit) * 4);
	  margin-top: calc(8px * 5);
	  margin-top: calc(var(--size-unit) * 5);
	}
	footer {
	  position: relative;
	  z-index: 1;
	  display: flex;
	  display: flex;
	  -webkit-align-items: center;
	  align-items: center;
	  -webkit-justify-content: center;
	  justify-content: center;
	  width: 100%;
	  min-height: 476px;
	  padding: calc(8px * 4) calc(8px * 2);
	  padding: calc(var(--size-unit) * 4) calc(var(--size-unit) * 2);
	  background: url(../img/common/bg_footer.png) repeat-x 50% 0;
	  background-size: 1896px 476px;
	}
	footer::before {
	  position: absolute;
	  bottom: 0;
	  left: 0;
	  z-index: -1;
	  display: block;
	  width: 100%;
	  height: calc(100% - 476px);
	  content: "";
	  background-color: #fdebc7;
	}
	.copyright {
	  padding-top: 186px;
	  text-align: center;
	}
	#pagetop {
	  position: fixed;
	  right: calc(8px * 2);
	  right: calc(var(--size-unit) * 2);
	  bottom: calc(8px * 2);
	  bottom: calc(var(--size-unit) * 2);
	  z-index: 99;
	}
	#pagetop a {
	  display: block;
	  cursor: pointer;
	  transition: opacity 0.4s ease;
	}
	#pagetop img {
	  -webkit-filter: drop-shadow(0 0 8px rgb(66 33 11 / 15%));
	  -webkit-filter: drop-shadow(0 0 8px rgb(var(--color-dark-rgb), 0.15));
	  filter: drop-shadow(0 0 8px rgb(66 33 11 / 15%));
	  filter: drop-shadow(0 0 8px rgb(var(--color-dark-rgb), 0.15));
	}
	@media (any-hover: hover) {
	  .btn:hover {
	    background-color: #ff8e00;
	    background-color: var(--color-tertiary);
	  }
	  .btn.border:hover {
	    color: #fff100;
	    color: var(--color-secondary);
	    background-color: var(--color-light);
	  }
	  .btn.close:hover {
	    background-color: #d5d5d5;
	  }
	  .header-nav a:hover {
	    background-color: #fff;
	  }
	  .chara-list .swiper-slide a:hover {
	    color: #ff8e00;
	    color: var(--color-tertiary);
	  }
	  .chara-list .swiper-slide a:hover img {
	    -webkit-transform-origin: center bottom;
	    transform-origin: center bottom;
	    scale: 1.1;
	  }
	}
	@media (min-width: 768px) {
	  .is-scroll {
	    padding: calc(8px * 2) calc(8px * 2) calc(8px * 3);
	    padding: calc(var(--size-unit) * 2) calc(var(--size-unit) * 2)
	      calc(var(--size-unit) * 3);
	  }
	}
	@media (max-width: 1023.98px) {
	  header {
	    padding: 8px calc(8px * 2);
	    padding: var(--size-unit) calc(var(--size-unit) * 2);
	  }
	  .g-nav {
	    position: fixed;
	    top: 0;
	    right: -100%;
	    z-index: 4;
	    -webkit-flex-direction: column;
	    flex-direction: column;
	    width: 100%;
	    height: 100dvh;
	    padding-top: calc(8px * 5);
	    padding-top: calc(var(--size-unit) * 5);
	    overflow: auto;
	    transition: translate 0.3s ease-out;
	  }
	  .g-nav.block {
	    background-color: #fff100;
	    background-color: var(--color-secondary);
	    translate: -100% 0 0;
	  }
	  .g-nav .header-nav {
	    -webkit-flex-direction: column;
	    flex-direction: column;
	  }
	  .menu-btn {
	    position: absolute;
	    top: 0;
	    right: 0;
	    z-index: 99;
	    display: block;
	    width: 40px;
	    height: 40px;
	    text-align: center;
	    background-color: #fff;
	    border: 0;
	    border-radius: 100vmax;
	  }
	  .menu-btn span {
	    position: absolute;
	    right: 8px;
	    display: block;
	    width: 24px;
	    height: 4px;
	    background-color: #8ad9f6;
	    background-color: var(--color-primary);
	    border-radius: 2px;
	    transition:
	      width 0.4s,
	      right 0.4s,
	      rotate 0.4s;
	  }
	  .menu-btn span:nth-child(1) {
	    top: 10px;
	  }
	  .menu-btn span:nth-child(2) {
	    top: 18px;
	  }
	  .menu-btn span:nth-child(3) {
	    top: 26px;
	  }
	  .menu-btn.active span {
	    top: 18px;
	  }
	  .menu-btn.active span:nth-child(1) {
	    rotate: 45deg;
	  }
	  .menu-btn.active span:nth-child(2) {
	    right: 50%;
	    width: 0;
	  }
	  .menu-btn.active span:nth-child(3) {
	    rotate: -45deg;
	  }
	  .contents-box {
	    padding: calc(8px * 6) 0;
	    padding: calc(var(--size-unit) * 6) 0;
	  }
	  .hero {
	    padding: 0 calc(8px * 3);
	    padding: 0 calc(var(--size-unit) * 3);
	  }
	  .iziModal {
	    padding: 0 calc(8px * 2);
	    padding: 0 calc(var(--size-unit) * 2);
	  }
	  .iziModal-wrap {
	    padding: calc(8px * 2) 8px;
	    padding: calc(var(--size-unit) * 2) var(--size-unit);
	  }
	  .chara {
	    padding: 0 calc(8px * 2);
	    padding: 0 calc(var(--size-unit) * 2);
	  }
	  .comic {
	    padding: 0 calc(8px * 2);
	    padding: 0 calc(var(--size-unit) * 2);
	  }
	  .comic-wrap {
	    -webkit-flex-direction: column-reverse;
	    flex-direction: column-reverse;
	    -webkit-align-items: center;
	    align-items: center;
	    margin-top: calc(8px * 2);
	    margin-top: calc(var(--size-unit) * 2);
	  }
	  .comic-btn {
	    width: 100%;
	  }
	  .comic-btn a {
	    position: relative;
	    top: 0;
	    left: 0;
	    -webkit-transform: translateX(0);
	    transform: translateX(0);
	  }
	  .wallpaper {
	    padding: 0 calc(8px * 2);
	    padding: 0 calc(var(--size-unit) * 2);
	  }
	  .wallpaper-wrap {
	    display: grid;
	    grid-template-rows: repeat(2, 1fr);
	    grid-template-columns: repeat(2, 1fr);
	    padding-left: 0;
	    margin-top: calc(8px * 2);
	    margin-top: calc(var(--size-unit) * 2);
	  }
	  .wallpaper-img1 {
	    grid-area: 1/1/2/2;
	  }
	  .wallpaper-img2 {
	    grid-area: 1/2/2/3;
	  }
	  [class*="bg-peanuts"] img {
	    scale: 0.5;
	  }
	  .page-inner {
	    padding-right: calc(8px * 2);
	    padding-right: calc(var(--size-unit) * 2);
	    padding-left: calc(8px * 2);
	    padding-left: calc(var(--size-unit) * 2);
	  }
	  .contents-main {
	    padding: calc(8px * 2);
	    padding: calc(var(--size-unit) * 2);
	  }
	  .page-inner-list {
	    padding: calc(8px * 2);
	    padding: calc(var(--size-unit) * 2);
	  }
	  .wallpaper-header-notice::before {
	    width: 176px;
	  }
	  .wallpaper-header-ttl {
	    width: 160px;
	  }
	  footer {
	    min-height: 238px;
	    padding-top: 160px;
	    background-size: 948px 238px;
	  }
	  footer::before {
	    height: calc(100% - 238px);
	  }
	  .copyright {
	    padding-top: 0;
	  }
	  #pagetop a {
	    -webkit-transform-origin: right bottom;
	    transform-origin: right bottom;
	    scale: 0.6;
	  }
	}
	@media (max-width: 768px) {
	  .wallpaper-btn {
	    grid-area: 2/1/3/3;
	  }
	  .main-footer {
	    padding: 0 calc(8px * 2);
	    padding: 0 calc(var(--size-unit) * 2);
	  }
	  .main-footer-img {
	    max-width: 60%;
	  }
	}
	@media (max-width: 639.98px) {
	  .wallpaper-header-notice {
	    margin-bottom: -24px;
	  }
	  .wallpaper-header-notice dl {
	    grid-template-columns: repeat(1, 1fr);
	    place-items: center;
	    width: 100%;
	  }
	  .wallpaper-header-notice dt {
	    width: fit-content;
	    width: fit-content;
	    width: fit-content;
	    padding: 4px 24px;
	  }
	}
}


@keyframes floating01 {
  0% {
    -webkit-transform: translateY(-8px) rotate(4deg);
    transform: translateY(-8px) rotate(4deg);
  }
  100% {
    -webkit-transform: translateY(16px) rotate(-6deg);
    transform: translateY(16px) rotate(-6deg);
  }
}
@keyframes floating01 {
  0% {
    -webkit-transform: translateY(-8px) rotate(4deg);
    transform: translateY(-8px) rotate(4deg);
  }
  100% {
    -webkit-transform: translateY(16px) rotate(-6deg);
    transform: translateY(16px) rotate(-6deg);
  }
}
@keyframes floating02 {
  0% {
    -webkit-transform: translateY(16px) rotate(-4deg);
    transform: translateY(16px) rotate(-4deg);
  }
  100% {
    -webkit-transform: translateY(-8px) rotate(6deg);
    transform: translateY(-8px) rotate(6deg);
  }
}
@keyframes floating02 {
  0% {
    -webkit-transform: translateY(16px) rotate(-4deg);
    transform: translateY(16px) rotate(-4deg);
  }
  100% {
    -webkit-transform: translateY(-8px) rotate(6deg);
    transform: translateY(-8px) rotate(6deg);
  }
}