@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:wght@400;700;900&display=swap");
body {
  all: unset;
}
body *:not(dialog, script, style) {
  all: unset;
}

html {
  height: 100%;
}
html body {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: start;
  line-height: 1.5;
}
html body img {
  max-width: 100%;
  vertical-align: bottom;
}
html body a,
html body button:not(:disabled),
html body select,
html body label {
  cursor: pointer;
}
html body strong {
  font-weight: bold;
}

body {
  --normal: 400 100% "Roboto", sans-serif;
  --bold: 700 100% "Roboto", sans-serif;
  --noto-bold: 700 100% "Roboto", "Noto Sans JP", sans-serif;
  --noto-black: 900 100% "Roboto", "Noto Sans JP", sans-serif;
  font: var(--normal);
}

body {
  --black: #000000;
  --blue: #008fdb;
  --yellow: #fff200;
  --orange: #ffc400;
  --green: #6eb800;
  --red: #ff0000;
  --gray: #999999;
  --lightgray: rgba(0,0,0,0.2);
}
@media (max-width: 567px) {
  body {
    --content: calc(100vw - 2rem);
  }
}
@media (min-width: 568px) {
  body {
    --content: 50.4rem;
  }
}

html {
  font-size: 20px;
}
@media (max-width: 567px) {
  html {
    font-size: 5.1282051282vw;
  }
}
@media (min-width: 568px) {
  html {
    font-size: 1.7985611511vw;
  }
}
@media (min-width: 1112px) {
  html {
    font-size: 20px;
  }
}

html[lang=ja] *[lang=en],
html[lang=en] *[lang=ja] {
  display: none;
}

.c-breadcrumbs {
  margin-right: auto;
  margin-top: 0.5rem;
  margin-left: 1.25rem;
}
.c-breadcrumbs ul {
  display: flex;
  flex-wrap: wrap;
  font-size: 70%;
  column-gap: 0.25em;
}
.c-breadcrumbs ul li {
  display: flex;
  align-items: center;
  column-gap: 0.25em;
}
.c-breadcrumbs ul li:nth-of-type(1) img {
  width: 2em;
}
.c-breadcrumbs ul li:not(:first-child)::before {
  content: "";
  width: 1.25em;
  aspect-ratio: 1/1;
  background: url(../images/icon_chevron_right.svg) no-repeat center center/contain;
}
.c-breadcrumbs ul li:not(:first-child) a {
  text-decoration: underline;
}

.c-formitem__select, .c-formitem__text, .c-formitem__textarea {
  border: 1px solid var(--lightgray);
  box-sizing: border-box;
}
.c-formitem__text, .c-formitem__textarea {
  border-radius: 0.1rem;
  padding: 0.5em 0.5em;
}
.c-formitem__text::placeholder, .c-formitem__textarea::placeholder {
  color: var(--gray);
}
.c-formitem__text[name=name] {
  width: 12em;
}
.c-formitem__text[name=email] {
  width: 16em;
}
.c-formitem__text[name=tel] {
  width: 10em;
}
.c-formitem__text[name=zipcode] {
  width: 6em;
}
.c-formitem__text[name=zipcode]::before {
  content: "〒";
  color: var(--gray);
}
.c-formitem__textarea {
  line-height: 1.4;
  width: 100%;
}
.c-formitem__textarea[name=address] {
  height: 6.6em;
}
.c-formitem__textarea[name=content] {
  height: 15em;
}
.c-formitem__select {
  border-radius: 0.2rem;
  padding: 0.25em 2em 0.25em 1em;
  background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url(../images/icon_dropdown.svg) no-repeat right 0.25em center/1.25em;
  max-width: 20em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-formitem__button {
  border-radius: 0.1rem;
  display: flex;
  column-gap: 0.2em;
  align-items: center;
  height: 3em;
  padding: 0 1em;
  font: var(--bold);
}
.c-formitem__button::before, .c-formitem__button::after {
  width: 2em;
}
.c-formitem__button--cart {
  background: var(--yellow);
}
.c-formitem__button--cart::before {
  content: "";
  aspect-ratio: 1/1;
  mask: url(../images/icon_cart.svg);
  background-color: var(--black);
}
.c-formitem__button--next {
  background: var(--yellow);
}
.c-formitem__button--next::after {
  content: "";
  aspect-ratio: 1/1;
  mask: url(../images/icon_arrow_right.svg);
  background-color: var(--black);
}
.c-formitem__button--back {
  background: var(--lightgray);
}
@media (max-width: 567px) {
  .c-formitem__button--back {
    font-size: 75%;
  }
}
.c-formitem__button--back::before {
  content: "";
  aspect-ratio: 1/1;
  mask: url(../images/icon_arrow_left.svg);
  background-color: var(--black);
}
.c-formitem__button--checkout {
  background: var(--orange);
}
.c-formitem__button--checkout::before {
  content: "";
  aspect-ratio: 1/1;
  mask: url(../images/icon_bag.svg);
  background-color: var(--black);
}
.c-formitem__button--payment {
  background: var(--orange);
}
.c-formitem__button--payment::before {
  content: "";
  aspect-ratio: 1/1;
  mask: url(../images/icon_check2.svg);
  background-color: var(--black);
}
.c-formitem__button--sendmail {
  background: var(--orange);
}
.c-formitem__button--sendmail::before {
  content: "";
  aspect-ratio: 1/1;
  mask: url(../images/icon_email.svg);
  background-color: var(--black);
}
.c-formitem__button--link {
  height: auto;
  padding: 0;
  color: var(--blue);
}
.c-formitem__button--link::before {
  content: "";
  aspect-ratio: 1/1;
  mask: url(../images/icon_arrow_left.svg);
  background-color: var(--blue);
  width: 1.4em;
}

.c-page-title {
  margin: 1rem 0 3rem;
  font: var(--noto-bold);
}
@media (max-width: 567px) {
  .c-page-title {
    font-size: 120%;
  }
}
@media (min-width: 568px) {
  .c-page-title {
    font-size: 160%;
  }
}
.c-page-title::before {
  content: "";
  background: no-repeat center center/contain;
}
.c-page-title span[lang=ja] {
  font-feature-settings: "palt";
}
.c-page-title span[lang=en] {
  font-size: 115%;
}
body.page-guide .c-page-title {
  display: grid;
}
body.page-guide .c-page-title::before {
  width: 100%;
}

body.page-inquiry .c-page-title {
  display: grid;
}
body.page-inquiry .c-page-title::before {
  width: 100%;
}

body.page-guide .c-page-title::before {
  height: 3.1rem;
  background-image: url(../images/chara_3.png);
}

body.page-inquiry .c-page-title::before {
  height: 4.2rem;
  background-image: url(../images/chara_4.png);
}

body.page-cart .c-page-title {
  display: flex;
  align-items: center;
}
body.page-cart .c-page-title::before {
  width: 2em;
  aspect-ratio: 1/1;
}

body.page-order .c-page-title {
  display: flex;
  align-items: center;
}
body.page-order .c-page-title::before {
  width: 2em;
  aspect-ratio: 1/1;
}

body.page-payment .c-page-title {
  display: flex;
  align-items: center;
}
body.page-payment .c-page-title::before {
  width: 2em;
  aspect-ratio: 1/1;
}

body.page-legal .c-page-title {
  display: flex;
  align-items: center;
}
body.page-legal .c-page-title::before {
  width: 2em;
  aspect-ratio: 1/1;
}

body.page-privacy .c-page-title {
  display: flex;
  align-items: center;
}
body.page-privacy .c-page-title::before {
  width: 2em;
  aspect-ratio: 1/1;
}

body.page-terms .c-page-title {
  display: flex;
  align-items: center;
}
body.page-terms .c-page-title::before {
  width: 2em;
  aspect-ratio: 1/1;
}

body.page-cart .c-page-title::before {
  background-image: url(../images/icon_cart.svg);
}

body.page-order .c-page-title::before {
  background-image: url(../images/icon_bag.svg);
}

body.page-payment .c-page-title::before {
  background-image: url(../images/icon_bag.svg);
}

body.page-legal .c-page-title::before {
  background-image: url(../images/icon_document.svg);
}

body.page-privacy .c-page-title::before {
  background-image: url(../images/icon_document.svg);
}

body.page-terms .c-page-title::before {
  background-image: url(../images/icon_document.svg);
}

.c-wawawa-loading {
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
  border-radius: 0.1rem;
  background: white;
}

.c-wawawa-loading {
  border: none;
  border-radius: 50%;
  display: grid;
  padding: 0.5rem;
  width: 3rem;
  height: 3rem;
}
.c-wawawa-loading--loading::before {
  content: "";
  aspect-ratio: 1/1;
  mask: url(../images/icon_update.svg);
  background-color: var(--lightgray);
  animation-name: wawawa-loading--loading;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.c-wawawa-loading--ok::before {
  content: "";
  aspect-ratio: 1/1;
  mask: url(../images/icon_check.svg);
  background-color: var(--green);
}
@keyframes wawawa-loading--loading {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(-360deg);
  }
}

.p-cart {
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
  border-radius: 0.1rem;
  background: white;
}

.p-cart {
  display: grid;
  grid-row-gap: 1.5rem;
  box-sizing: border-box;
}
@media (max-width: 567px) {
  .p-cart {
    width: var(--content);
    padding: 1rem;
  }
}
@media (min-width: 568px) {
  .p-cart {
    width: 40rem;
    padding: 2rem;
  }
}
.p-cart__items {
  display: grid;
  grid-row-gap: 1rem;
}
@media (max-width: 567px) {
  .p-cart__items {
    grid-template-columns: auto 1fr;
  }
}
@media (min-width: 568px) {
  .p-cart__items {
    grid-template-columns: auto 1fr auto auto auto;
  }
}
.p-cart__item {
  display: grid;
  grid-template-columns: subgrid;
  grid-column-gap: 1rem;
  align-items: center;
  border-bottom: 1px solid var(--lightgray);
  padding: 0 0.5rem 1rem;
  font-size: 80%;
}
@media (max-width: 567px) {
  .p-cart__item {
    grid-column: 1/4;
    grid-row-gap: 0.5em;
    grid-template-areas: "image . delete" "image name name" "image price quantity" "image . .";
  }
  .p-cart__item-image {
    grid-area: image;
  }
  .p-cart__item-name {
    grid-area: name;
  }
  .p-cart__item-price {
    grid-area: price;
  }
  .p-cart__item-quantity {
    grid-area: quantity;
  }
  .p-cart__item-delete {
    grid-area: delete;
  }
}
@media (min-width: 568px) {
  .p-cart__item {
    grid-column: 1/6;
  }
}
.p-cart__item-error {
  grid-column: 1/6;
  display: flex;
  align-items: center;
  justify-self: center;
  padding: 0.25em 1em;
  height: 2em;
  font-size: 90%;
  background: var(--yellow);
}
.p-cart__item-image {
  width: 5rem;
}
.p-cart__item-image img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: contain;
}
.p-cart__item-price {
  text-align: right;
}
@media (min-width: 568px) {
  .p-cart__item-price {
    justify-self: end;
  }
}
.p-cart__item-quantity {
  justify-self: end;
}
.p-cart__item-quantity select {
  text-align-last: right;
}
@media (max-width: 567px) {
  .p-cart__item-delete {
    justify-self: end;
  }
}
.p-cart__item-delete button {
  content: "";
  aspect-ratio: 1/1;
  mask: url(../images/icon_close.svg);
  background-color: var(--lightgray);
  width: 1.5rem;
}
.p-cart__total {
  display: grid;
  grid-row-gap: 0.5rem;
  justify-items: end;
}
.p-cart__total dl {
  display: flex;
  column-gap: 0.5rem;
  align-items: baseline;
}
.p-cart__total dl dt {
  font-size: 70%;
}
.p-cart__total p {
  font-size: 70%;
  text-align: right;
  line-height: 1.3;
}
.p-cart__checkout {
  margin-left: auto;
}
.p-cart__checkout a {
  display: flex;
  align-items: center;
  height: 3em;
  border-radius: 0.1rem;
  padding: 0 1em;
  background: var(--orange);
  font: var(--bold);
}
.p-cart__checkout a::before {
  content: "";
  aspect-ratio: 1/1;
  mask: url(../images/icon_bag.svg);
  background-color: var(--black);
  width: 2em;
}
.p-cart--empty {
  display: grid;
  grid-row-gap: 0.5rem;
  font-size: 90%;
}
.p-cart--empty::before {
  content: "";
  width: 100%;
  height: 6rem;
  background: url(../images/chara_5.png) no-repeat center bottom/contain;
}

.p-footer {
  display: grid;
  grid-row-gap: 2rem;
  justify-items: center;
  padding: 6rem 0 4rem;
  opacity: 0.6;
}
@media (max-width: 567px) {
  .p-footer__logo img {
    height: 4rem;
  }
}
@media (min-width: 568px) {
  .p-footer__logo img {
    height: 5rem;
  }
}
@media (max-width: 567px) {
  .p-footer__nav {
    font-size: 60%;
  }
}
@media (min-width: 568px) {
  .p-footer__nav {
    font-size: 70%;
  }
}
.p-footer__nav ul {
  display: grid;
  grid-auto-flow: column;
}
@media (max-width: 567px) {
  .p-footer__nav ul {
    grid-column-gap: 0.5rem;
  }
}
@media (min-width: 568px) {
  .p-footer__nav ul {
    grid-column-gap: 1rem;
  }
}
.p-footer__nav a {
  text-decoration: underline;
}
.p-footer__copy {
  font-size: 60%;
}

.p-guide {
  display: grid;
  grid-row-gap: 3rem;
}
.p-guide section {
  display: grid;
  grid-row-gap: 1.5rem;
  justify-items: center;
  max-width: var(--content);
}
.p-guide section h2 {
  font: var(--noto-bold);
}
.p-guide section p {
  font-size: 80%;
  line-height: 1.8;
}
.p-guide section table {
  display: grid;
  grid-template-columns: max-content repeat(3, 1fr);
  font-size: 80%;
}
@media (max-width: 567px) {
  .p-guide section table {
    font-size: 70%;
  }
}
@media (min-width: 568px) {
  .p-guide section table {
    font-size: 80%;
  }
}
.p-guide section table thead, .p-guide section table thead tr,
.p-guide section table tbody,
.p-guide section table tbody tr {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1/5;
}
.p-guide section table tr {
  grid-column-gap: 1.5rem;
  border-bottom: 1px solid var(--lightgray);
}
.p-guide section table thead tr {
  padding: 0.2rem;
}
.p-guide section table thead th {
  text-align: center;
}
.p-guide section table tbody tr {
  padding: 0.4rem;
}
.p-guide section table tbody td {
  text-align: right;
}
.p-guide section figure {
  display: grid;
  grid-row-gap: 1rem;
  justify-items: center;
  border: 1px solid var(--lightgray);
  border-radius: 0.4rem;
  padding: 1.5rem;
  font-size: 80%;
}
.p-guide section figure figcaption {
  font: var(--bold);
}
@media (max-width: 567px) {
  .p-guide section figure img {
    width: 10rem;
  }
}
@media (min-width: 568px) {
  .p-guide section figure img {
    width: 12rem;
  }
}

.p-header__nav {
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
  border-radius: 0.1rem;
  background: white;
}

.p-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3rem;
}
@media (max-width: 567px) {
  .p-header {
    margin-right: 2.5rem;
    padding: 0 0.5rem;
  }
}
@media (min-width: 568px) {
  .p-header {
    margin-right: 3rem;
    padding: 0 1rem;
  }
}
@media (max-width: 567px) {
  .p-header__logo img {
    height: 2rem;
  }
}
@media (min-width: 568px) {
  .p-header__logo img {
    height: 2.8rem;
  }
}
.p-header__menu {
  display: flex;
  align-items: center;
}
@media (max-width: 567px) {
  .p-header__menu {
    column-gap: 0.5rem;
  }
}
@media (min-width: 568px) {
  .p-header__menu {
    column-gap: 1rem;
  }
}
.p-header__cart img {
  width: 2rem;
}
.p-header__lang {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 0.75em;
  align-items: center;
  font: var(--bold);
}
@media (max-width: 567px) {
  .p-header__lang {
    font-size: 60%;
  }
}
@media (min-width: 568px) {
  .p-header__lang {
    font-size: 80%;
  }
}
.p-header__lang::before {
  content: "";
  grid-column: 2;
  width: 1px;
  height: 1.1em;
  background: var(--black);
}
.p-header__nav {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10;
  display: grid;
  padding: 3rem 3rem 2rem 2rem;
  background: white;
}
body:not(.isNavOpen) .p-header__nav {
  visibility: hidden;
  opacity: 0;
  transform: translateX(1rem);
}

body:is(.isNavOpen) .p-header__nav {
  transition: 200ms;
}

.p-header__nav ul {
  display: grid;
  grid-row-gap: 0.5em;
  font: var(--bold);
  font-size: 90%;
}
.p-header__nav ul li a {
  display: flex;
  align-items: center;
}
.p-header__nav ul li a::before {
  content: "";
  width: 2.5em;
  height: 2.5em;
  background: no-repeat center center/contain;
}
.p-header__nav ul li:nth-of-type(1) a::before {
  background-image: url(../images/chara_1.png);
}
.p-header__nav ul li:nth-of-type(2) a::before {
  background-image: url(../images/chara_2.png);
  background-size: 70%;
}
.p-header__nav ul li:nth-of-type(3) a::before {
  background-image: url(../images/chara_3.png);
  background-size: 70%;
}
.p-header__nav ul li:nth-of-type(4) a::before {
  background-image: url(../images/chara_4.png);
  background-size: 70%;
}
.p-header__navbtn {
  display: grid;
  position: fixed;
  justify-content: center;
  align-items: center;
  right: 0;
  top: 0;
  z-index: 11;
  width: 3rem;
  aspect-ratio: 1/1;
}
.p-header__navbtn img {
  grid-column: 1;
  grid-row: 1;
  width: 2rem;
  transition: 200ms;
}
body:not(.isNavOpen) .p-header__navbtn img[close] {
  opacity: 0;
  transform: scale(0.5);
}

body:is(.isNavOpen) .p-header__navbtn img[open] {
  opacity: 0;
  transform: scale(0.5);
}

.p-history {
  display: grid;
  grid-row-gap: 1.5rem;
  justify-items: center;
  margin-top: 4rem;
}
.p-history__title {
  font: var(--noto-bold);
}
.p-history__title span[lang=ja] {
  font-feature-settings: "palt";
}
.p-history__list {
  display: flex;
  align-items: star;
}
@media (max-width: 567px) {
  .p-history__list {
    column-gap: 0.5rem;
    width: var(--content);
  }
}
@media (min-width: 568px) {
  .p-history__list {
    column-gap: 1rem;
    width: 40rem;
  }
}
.p-history__list a {
  display: grid;
  align-content: start;
  justify-items: center;
  grid-row-gap: 0.5rem;
  max-width: 6rem;
  font-size: 60%;
  line-height: 1.3;
}
@media (max-width: 567px) {
  .p-history__list a:nth-of-type(n+5) {
    display: none;
  }
}
@media (min-width: 568px) {
  .p-history__list a:nth-of-type(n+7) {
    display: none;
  }
}

.p-inquiry-input {
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
  border-radius: 0.1rem;
  background: white;
}

.p-inquiry {
  display: grid;
}
.p-inquiry-input {
  display: grid;
  grid-row-gap: 1.5rem;
  justify-items: center;
  box-sizing: border-box;
}
@media (max-width: 567px) {
  .p-inquiry-input {
    width: var(--content);
    padding: 1rem;
  }
}
@media (min-width: 568px) {
  .p-inquiry-input {
    padding: 2rem;
  }
}
.p-inquiry-input dl {
  display: grid;
  font-size: 70%;
  align-items: start;
}
@media (max-width: 567px) {
  .p-inquiry-input dl {
    grid-row-gap: 0.5em;
    justify-self: stretch;
  }
}
@media (min-width: 568px) {
  .p-inquiry-input dl {
    grid-template-columns: max-content 1fr;
    grid-gap: 1rem 1.5rem;
  }
}
.p-inquiry-input dl dt,
.p-inquiry-input dl dd {
  display: grid;
}
@media (min-width: 568px) {
  .p-inquiry-input dl dt,
  .p-inquiry-input dl dd {
    align-items: center;
    min-height: 3rem;
  }
}
.p-inquiry-input dl dt {
  font: var(--bold);
}
@media (max-width: 567px) {
  .p-inquiry-input dl dt:nth-of-type(n+2) {
    margin-top: 1em;
  }
}
.p-inquiry-input dl dd {
  grid-row-gap: 0.25em;
}
.p-inquiry-input__error {
  color: var(--red);
}
.p-inquiry-input__error:empty {
  display: none;
}
.p-inquiry-complete {
  font-size: 80%;
}
@media (max-width: 567px) {
  .p-inquiry-complete {
    width: var(--content);
  }
}

.p-legal {
  display: grid;
  width: var(--content);
}
.p-legal dl {
  display: grid;
  font-size: 80%;
}
@media (max-width: 567px) {
  .p-legal dl {
    grid-row-gap: 0.25em;
  }
}
@media (min-width: 568px) {
  .p-legal dl {
    grid-template-columns: max-content 1fr;
    grid-gap: 1.5em 2em;
  }
}
.p-legal dl dt {
  font: var(--bold);
}
@media (max-width: 567px) {
  .p-legal dl dt:nth-of-type(n+2) {
    margin-top: 1.5em;
  }
}
.p-legal dl dd {
  display: grid;
  grid-row-gap: 0.5em;
}
.p-legal dl dd ul {
  display: grid;
}
.p-legal dl dd ul li {
  display: flex;
}
.p-legal dl dd ul li::before {
  content: "・";
}

.p-main {
  display: grid;
  justify-items: center;
}

body:not(.page-payment__complete) .p-order {
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
  border-radius: 0.1rem;
  background: white;
}

.p-order {
  display: grid;
  box-sizing: border-box;
}
@media (max-width: 567px) {
  .p-order {
    width: var(--content);
    padding: 1rem;
  }
}
@media (min-width: 568px) {
  .p-order {
    width: 30rem;
    padding: 2rem;
  }
}
.p-order-input {
  display: grid;
  grid-row-gap: 1.5rem;
}
.p-order-input dl {
  display: grid;
  font-size: 70%;
}
@media (max-width: 567px) {
  .p-order-input dl {
    grid-row-gap: 0.25rem;
  }
}
@media (min-width: 568px) {
  .p-order-input dl {
    grid-template-columns: max-content 1fr;
    grid-gap: 1.5rem;
  }
}
.p-order-input dl dt,
.p-order-input dl dd {
  display: grid;
}
@media (min-width: 568px) {
  .p-order-input dl dt,
  .p-order-input dl dd {
    align-items: center;
  }
}
.p-order-input dl dt {
  font: var(--bold);
}
@media (min-width: 568px) {
  .p-order-input dl dt {
    height: 3em;
  }
}
@media (max-width: 567px) {
  .p-order-input dl dt:nth-of-type(n+2) {
    margin-top: 0.75rem;
  }
}
@media (min-width: 568px) {
  .p-order-input dl dd {
    min-height: 3em;
  }
}
.p-order-input button {
  margin-left: auto;
}
.p-order-input__address {
  grid-row-gap: 1rem;
  justify-items: start;
  padding-top: 0.5em;
  width: 100%;
}
.p-order-input__address-japan {
  display: grid;
  grid-row-gap: 0.5rem;
  justify-items: start;
  width: 100%;
}
.p-order-input__address-japan[disabled] {
  display: none;
}
.p-order-input__address-detail {
  display: grid;
  width: 100%;
}
.p-order-input__error {
  color: var(--red);
}
.p-order-input__error:empty {
  display: none;
}
.p-order-confirm {
  display: grid;
  grid-row-gap: 1rem;
}
.p-order-confirm__items {
  display: grid;
  grid-row-gap: 1rem;
  border-bottom: 1px solid var(--lightgray);
  padding-bottom: 1rem;
}
@media (max-width: 567px) {
  .p-order-confirm__items {
    grid-template-columns: auto 1fr auto;
  }
}
@media (min-width: 568px) {
  .p-order-confirm__items {
    grid-template-columns: auto 1fr auto auto;
  }
}
.p-order-confirm__item {
  display: grid;
  grid-template-columns: subgrid;
  grid-column-gap: 0.5rem;
  align-items: center;
  font-size: 80%;
}
@media (max-width: 567px) {
  .p-order-confirm__item {
    grid-column: 1/4;
    grid-template-areas: "image . ." "image name name" "image price quantity" "image . .";
  }
  .p-order-confirm__item-image {
    grid-area: image;
  }
  .p-order-confirm__item-name {
    grid-area: name;
  }
  .p-order-confirm__item-price {
    grid-area: price;
  }
  .p-order-confirm__item-quantity {
    grid-area: quantity;
  }
}
@media (min-width: 568px) {
  .p-order-confirm__item {
    grid-column: 1/5;
  }
}
.p-order-confirm__item-image img {
  width: 4rem;
  aspect-ratio: 1/1;
  object-fit: contain;
  overflow: clip;
}
.p-order-confirm__item-price {
  text-align: right;
}
.p-order-confirm__item-quantity {
  text-align: right;
}
.p-order-confirm__shipping {
  display: grid;
  grid-template-columns: max-content 1fr;
  font-size: 80%;
  border-bottom: 1px solid var(--lightgray);
  padding-bottom: 1rem;
}
@media (max-width: 567px) {
  .p-order-confirm__shipping {
    grid-row-gap: 0.5rem;
  }
}
@media (min-width: 568px) {
  .p-order-confirm__shipping {
    grid-gap: 1rem;
  }
}
.p-order-confirm__shipping dt {
  font: var(--bold);
}
@media (max-width: 567px) {
  .p-order-confirm__shipping dt:nth-of-type(1) {
    grid-column: 1/3;
  }
}
.p-order-confirm__shipping dd {
  display: grid;
}
.p-order-confirm__shipping dd:last-child {
  justify-self: end;
}
.p-order-confirm__shipping dd:nth-of-type(1) {
  grid-column: 1/3;
}
.p-order-confirm__total {
  display: flex;
  column-gap: 1em;
  align-items: baseline;
  justify-content: end;
  font: var(--bold);
}
.p-order-confirm__total small {
  font-size: 66%;
}
.p-order-confirm__btns {
  display: flex;
  margin-top: 1rem;
  align-items: end;
  justify-content: space-between;
}
.p-order-payment {
  display: grid;
  grid-row-gap: 1.5rem;
  justify-items: center;
}
.p-order-payment__title {
  font: var(--bold);
  font-size: 90%;
  text-align: center;
}
.p-order-payment__amount {
  display: flex;
  align-items: baseline;
  column-gap: 1em;
  border-bottom: 1px solid var(--lightgray);
  padding: 0.2em;
  font: var(--bold);
}
.p-order-payment__amount dt {
  font-size: 70%;
}
.p-order-payment__amount dd {
  font-size: 120%;
}
.p-order-payment__error {
  color: var(--red);
  font: var(--bold);
  font-size: 80%;
}
.p-order-payment__error:empty {
  display: none;
}
.p-order-payment__select {
  display: grid;
  grid-column-gap: 1rem;
}
@media (max-width: 567px) {
  .p-order-payment__select {
    grid-auto-flow: row;
    grid-auto-rows: 1fr;
    grid-row-gap: 1rem;
  }
}
@media (min-width: 568px) {
  .p-order-payment__select {
    grid-auto-flow: column;
    grid-auto-columns: 12rem;
  }
}
.p-order-payment__select button {
  display: grid;
  align-items: center;
  justify-items: center;
  grid-row-gap: 0.5rem;
  border-radius: 0.4rem;
  padding: 1.5rem;
  font-size: 90%;
  box-shadow: 0 0 0 1px var(--lightgray);
  transition: 200ms;
}
.p-order-payment__select button:hover {
  box-shadow: 0 0 0 1px var(--black);
}
.p-order-payment__select button img {
  width: 100%;
}
.p-order-payment__bank {
  display: grid;
  grid-row-gap: 1.5rem;
  justify-items: center;
}
.p-order-payment__bank dl,
.p-order-payment__bank p {
  font-size: 80%;
}
.p-order-payment__bank dl {
  display: grid;
}
@media (max-width: 567px) {
  .p-order-payment__bank dl {
    justify-items: center;
  }
}
@media (min-width: 568px) {
  .p-order-payment__bank dl {
    grid-template-columns: max-content max-content;
    grid-column-gap: 0.5em;
    align-items: center;
  }
}
.p-order-payment__bank dl dt {
  font: var(--bold);
}
@media (max-width: 567px) {
  .p-order-payment__bank dl dt:nth-of-type(n+2) {
    margin-top: 0.5em;
  }
}
@media (min-width: 568px) {
  .p-order-payment__bank dl dt {
    text-align: right;
  }
  .p-order-payment__bank dl dt::after {
    content: ":";
  }
}
.p-order-payment__bank p {
  display: grid;
  grid-row-gap: 1.5rem;
  text-align: center;
}
.p-order-payment__bank p small {
  font-size: 80%;
}
.p-order-payment__card {
  display: grid;
  grid-row-gap: 2rem;
  justify-items: center;
}
.p-order-payment__backtoselect {
  font-size: 70%;
}
.p-order-payment__complere {
  display: grid;
  grid-row-gap: 0.5rem;
  font-size: 90%;
}
.p-order-payment__complere::before {
  content: "";
  width: 100%;
  height: 6rem;
  background: url(../images/chara_6.png) no-repeat center bottom/contain;
}

.p-privacy {
  display: grid;
  width: var(--content);
}
.p-privacy h2 {
  margin-top: 1em;
  font: var(--bold);
  font-size: 80%;
}
.p-privacy p {
  margin-top: 0.5em;
  font-size: 70%;
}
.p-privacy ul {
  display: grid;
  margin-top: 0.5em;
  font-size: 70%;
}
.p-privacy ul li::before {
  content: "・";
}

.p-product {
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
  border-radius: 0.1rem;
  background: white;
}

.p-product {
  display: grid;
  box-sizing: border-box;
}
@media (max-width: 567px) {
  .p-product {
    grid-row-gap: 0.5rem;
    grid-template-areas: "images" "." "title" "price" "description" "." "cart";
    width: var(--content);
    margin-top: 1.5rem;
    padding: 1rem;
  }
}
@media (min-width: 568px) {
  .p-product {
    grid-gap: 1rem 2rem;
    grid-template-columns: 20rem 1fr;
    grid-template-areas: "images title" "images price" "images description" "images ." "images cart";
    width: 44rem;
    margin-top: 3rem;
    padding: 2rem;
  }
}
.p-product__title {
  grid-area: title;
  font: var(--bold);
  font-size: 120%;
}
.p-product__images {
  all: unset;
  grid-area: images;
  display: grid;
  grid-row-gap: 1rem;
}
.p-product__images.is-open {
  grid-template-rows: 1fr auto;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 3rem;
}
.p-product__images.is-open::backdrop {
  background: rgba(0, 0, 0, 0.8);
}
.p-product__images-mainpics {
  display: grid;
}
.p-product__images.is-open .p-product__images-mainpics {
  justify-self: center;
  display: flex;
  justify-content: center;
  height: 100%;
  overflow: hidden;
}

.p-product__images-mainpics img {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
}
.p-product__images-mainpics img:not(.is-show) {
  visibility: hidden;
}
.p-product__images.is-open .p-product__images-mainpics img {
  object-fit: contain;
}
.p-product__images.is-open .p-product__images-mainpics img:not(.is-show) {
  display: none;
}

.p-product__images-thumbs {
  display: flex;
  column-gap: 0.5rem;
  overflow: hidden;
  justify-content: center;
}
.p-product__images.is-open .p-product__images-thumbs {
  justify-self: center;
}

.p-product__images-thumbs img {
  aspect-ratio: 1/1;
  max-height: 4rem;
  height: 100%;
  object-fit: cover;
  overflow: clip;
  cursor: pointer;
  transition: 200ms;
  width: 100%;
}
.p-product__images-thumbs img:hover {
  filter: brightness(120%);
}
.p-product__images-btn {
  width: 2.5rem;
  position: absolute;
}
.p-product__images-btn--close {
  content: "";
  aspect-ratio: 1/1;
  mask: url(../images/icon_close.svg);
  background-color: white;
  right: 0;
  top: 0;
}
.p-product__images-btn--prev {
  content: "";
  aspect-ratio: 1/1;
  mask: url(../images/icon_chevron_left.svg);
  background-color: white;
  left: 0;
  bottom: 50%;
}
.p-product__images-btn--next {
  content: "";
  aspect-ratio: 1/1;
  mask: url(../images/icon_chevron_right.svg);
  background-color: white;
  right: 0;
  bottom: 50%;
}
.p-product__images.is-open .p-product__images-btn {
  display: flex;
}

.p-product__price {
  grid-area: price;
  font-size: 80%;
}
.p-product__description {
  grid-area: description;
  font-size: 70%;
}
.p-product__cart {
  grid-area: cart;
  display: grid;
  grid-row-gap: 0.75rem;
  justify-items: end;
}
.p-product__cart-select {
  display: flex;
  column-gap: 0.5em;
  align-items: baseline;
  font-size: 80%;
}
.p-product__cart-select select {
  font-size: 120%;
}
.p-product__cart-soldout {
  display: flex;
  align-items: center;
  height: 3em;
  padding: 0 1em;
  background: var(--lightgray);
  font: var(--bold);
  opacity: 0.3;
}
.p-product__modal {
  border: none;
  background: none;
  overflow: visible;
}
.p-product__modal::backdrop {
  background: rgba(0, 0, 0, 0.8);
}
.p-product__modal img {
  object-fit: contain;
}
@media (max-width: 567px) {
  .p-product__modal img {
    width: calc(100vw - 2rem);
    height: calc(100vw - 2rem);
  }
}
@media (min-width: 568px) {
  .p-product__modal img {
    width: calc(100vw - 6rem);
    height: calc(100vh - 2rem);
  }
}
.p-product__modal-btn {
  width: 2.5rem;
  position: fixed;
}
.p-product__modal-btn--close {
  content: "";
  aspect-ratio: 1/1;
  mask: url(../images/icon_close.svg);
  background-color: white;
}
@media (max-width: 567px) {
  .p-product__modal-btn--close {
    top: calc(50vh + 50vw);
    left: 50vw;
    transform: translateX(-50%);
  }
}
@media (min-width: 568px) {
  .p-product__modal-btn--close {
    right: 0;
    top: 0;
  }
}
@media (max-width: 567px) {
  .p-product__modal-btn--prev, .p-product__modal-btn--next {
    top: calc(50vh + 50vw);
  }
}
@media (min-width: 568px) {
  .p-product__modal-btn--prev, .p-product__modal-btn--next {
    transform: translateY(50%);
  }
}
.p-product__modal-btn--prev {
  content: "";
  aspect-ratio: 1/1;
  mask: url(../images/icon_chevron_left.svg);
  background-color: white;
}
@media (max-width: 567px) {
  .p-product__modal-btn--prev {
    right: 70vw;
  }
}
@media (min-width: 568px) {
  .p-product__modal-btn--prev {
    left: 0;
    bottom: 50%;
  }
}
.p-product__modal-btn--next {
  content: "";
  aspect-ratio: 1/1;
  mask: url(../images/icon_chevron_right.svg);
  background-color: white;
}
@media (max-width: 567px) {
  .p-product__modal-btn--next {
    left: 70vw;
  }
}
@media (min-width: 568px) {
  .p-product__modal-btn--next {
    right: 0;
    bottom: 50%;
  }
}

.p-terms {
  display: grid;
  width: var(--content);
  font-size: 70%;
}
.p-terms h2 {
  margin-top: 1.5em;
}
.p-terms p,
.p-terms ul,
.p-terms ol {
  margin-top: 0.5em;
}
.p-terms ul,
.p-terms ol {
  display: grid;
}
.p-terms ol {
  grid-row-gap: 0.5em;
}
.p-terms ol > li {
  display: list-item;
  list-style-type: decimal;
  list-style-position: inside;
}
.p-terms ol > li > ul {
  margin-left: 0.5em;
}
.p-terms ul > li::before {
  content: "・";
}

.p-top-profile, .p-top-gallery__item:hover figure {
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
  border-radius: 0.1rem;
  background: white;
}

.p-top {
  display: grid;
  grid-row-gap: 3rem;
  justify-items: center;
}
@media (min-width: 568px) {
  .p-top {
    margin-top: 1rem;
  }
}
.p-top-hero {
  position: relative;
  display: grid;
  width: 100%;
  overflow: hidden;
}
@media (max-width: 567px) {
  .p-top-hero {
    margin-bottom: -2rem;
  }
}
@media (min-width: 568px) {
  .p-top-hero {
    margin-bottom: -1rem;
  }
}
.p-top-hero::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: 1rem;
  background: url(../images/top_hero_horizon.png) no-repeat left bottom/100% 100%;
  transform: translateY(1px);
}
.p-top-hero__inner {
  display: grid;
  grid-auto-flow: column;
}
@media (max-width: 567px) {
  .p-top-hero__inner {
    grid-column-gap: 0.5rem;
  }
}
@media (min-width: 568px) {
  .p-top-hero__inner {
    grid-column-gap: 1rem;
  }
}
.p-top-hero__inner img {
  width: auto;
  max-width: none;
  transition: 200ms;
}
@media (max-width: 567px) {
  .p-top-hero__inner img {
    height: 12rem;
  }
}
@media (min-width: 568px) {
  .p-top-hero__inner img {
    height: 20rem;
  }
}
.p-top-hero__inner img:hover {
  filter: brightness(120%);
}
.p-top-head {
  display: grid;
  grid-row-gap: 1rem;
  justify-items: center;
}
@media (max-width: 567px) {
  .p-top-head__title img {
    height: 5rem;
  }
}
@media (min-width: 568px) {
  .p-top-head__title img {
    height: 8.8rem;
  }
}
.p-top-head__nav ul {
  display: flex;
  align-items: center;
  font: var(--bold);
}
@media (max-width: 567px) {
  .p-top-head__nav ul {
    column-gap: 0.5rem;
  }
  html[lang=ja] .p-top-head__nav ul {
    font-size: 65%;
  }
  html[lang=en] .p-top-head__nav ul {
    font-size: 70%;
  }
}
@media (min-width: 568px) {
  .p-top-head__nav ul {
    column-gap: 1rem;
    font-size: 80%;
  }
}
.p-top-head__nav ul li a {
  display: flex;
  align-items: center;
  column-gap: 0.2em;
}
.p-top-head__nav ul li a::before {
  content: "";
  width: 3em;
  aspect-ratio: 2/3;
  background: no-repeat center center/100% auto;
}
.p-top-head__nav ul li:nth-of-type(1) a::before {
  background-image: url(../images/chara_2.png);
}
.p-top-head__nav ul li:nth-of-type(2) a::before {
  background-image: url(../images/chara_3.png);
}
.p-top-head__nav ul li:nth-of-type(3) a::before {
  background-image: url(../images/chara_4.png);
}
.p-top-gallery {
  display: grid;
  width: var(--content);
}
@media (max-width: 567px) {
  .p-top-gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 2rem 1rem;
  }
}
@media (min-width: 568px) {
  .p-top-gallery {
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 0.5rem;
  }
}
.p-top-gallery__item {
  display: grid;
  align-items: start;
}
.p-top-gallery__item figure {
  display: grid;
  grid-row-gap: 0.5em;
  transition: 200ms;
}
@media (min-width: 568px) {
  .p-top-gallery__item figure {
    padding: 1rem;
  }
}
.p-top-gallery__item figure img {
  width: 100%;
  transition: 400ms;
}
.p-top-gallery__item figure figcaption {
  display: grid;
  grid-row-gap: 0.2em;
  justify-items: center;
  font: var(--bold);
  font-size: 80%;
}
.p-top-gallery__item figure figcaption small {
  font: var(--normal);
  font-size: 85%;
}
.p-top-gallery__item:hover figure {
  transform: translateY(-0.5rem);
}
.p-top-gallery__item:hover figure img {
  filter: brightness(110%);
}
.p-top-gallery__item.is-soldout figcaption small {
  display: flex;
  align-items: center;
  height: 1.75em;
  padding: 0 0.75em;
  background: var(--lightgray);
  opacity: 0.3;
}
.p-top-profile {
  display: grid;
  justify-items: start;
  box-sizing: border-box;
}
@media (max-width: 567px) {
  .p-top-profile {
    grid-gap: 1rem;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "pic title" "pic link" "pic ." "text text";
    box-sizing: border-box;
    width: var(--content);
    padding: 1.25rem;
  }
}
@media (min-width: 568px) {
  .p-top-profile {
    grid-gap: 0.5rem 2rem;
    grid-template-columns: 10.7rem 1fr;
    grid-template-areas: "pic ." "pic title" "pic text" "pic link" "pic .";
    width: 42rem;
    padding: 2rem;
  }
}
.p-top-profile__pic {
  grid-area: pic;
}
.p-top-profile__title {
  grid-area: title;
}
.p-top-profile__text {
  grid-area: text;
}
.p-top-profile__link {
  grid-area: link;
}
.p-top-profile__title {
  font: var(--noto-bold);
  font-size: 120%;
}
@media (max-width: 567px) {
  .p-top-profile__title {
    display: grid;
  }
}
@media (min-width: 568px) {
  .p-top-profile__title {
    display: flex;
    column-gap: 0.5em;
    align-items: baseline;
  }
}
.p-top-profile__title small {
  font-size: 58%;
}
.p-top-profile__text {
  font-size: 70%;
}
.p-top-profile__link {
  display: grid;
  color: var(--blue);
  font: var(--bold);
}
@media (max-width: 567px) {
  .p-top-profile__link {
    grid-row-gap: 0.25rem;
    font-size: 60%;
  }
}
@media (min-width: 568px) {
  .p-top-profile__link {
    grid-auto-flow: column;
    grid-column-gap: 1em;
    font-size: 80%;
  }
}
.p-top-profile__link a {
  display: flex;
  column-gap: 0.1em;
  align-items: center;
}
.p-top-profile__link a::before {
  content: "";
  width: 2em;
}
.p-top-profile__link-insta a::before {
  content: "";
  aspect-ratio: 1/1;
  mask: url(../images/icon_insta.svg);
  background-color: var(--blue);
}
.p-top-profile__link-web a::before {
  content: "";
  aspect-ratio: 1/1;
  mask: url(../images/icon_website.svg);
  background-color: var(--blue);
}