@charset "UTF-8";
body,
body *:not(script, dialog) {
  all: unset;
}

@media (max-width: 567px) {
  :root {
    font-size: 5.3333333333vw;
  }
}
@media (min-width: 568px) {
  :root {
    font-size: 2vw;
  }
}
@media (min-width: 1000px) {
  :root {
    font-size: 20px;
  }
}

:root {
  --black: #333333;
  --orange: #f75f00;
  --yellow: #ffc800;
  --blue: #366dd1;
  --brown: #915900;
  --gray: #dfe2e6;
  --lightgray: #eff0f2;
  --darkgray: #a4a7b0;
  --line-green: #06c755;
  --zen: "Zen Maru Gothic", sans-serif;
  --zen-b: 700;
  --ss: 0.5rem;
  --s: 0.6rem;
  --m: 0.7rem;
  --l: 0.8rem;
  --ll: 1rem;
}
@media (max-width: 567px) {
  :root {
    --content-width: calc(100vw - 2rem);
  }
}
@media (min-width: 568px) {
  :root {
    --content-width: 47rem;
  }
}

body {
  display: grid;
  grid-template-rows: max-content 1fr max-content;
  min-height: 100vh;
  color: var(--black);
  font-family: "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
  font-size: var(--m);
  line-height: 1.5;
}
body button,
body label,
body a {
  cursor: pointer;
}
body img {
  overflow: clip;
  overflow-clip-margin: content-box;
  max-width: 100%;
  vertical-align: bottom;
}
body strong {
  font-weight: bold;
}
body small {
  font-size: smaller;
}
body main {
  display: grid;
  align-content: start;
  width: var(--content-width);
  margin-inline: auto;
}

.c-page-title {
  margin: 2.4rem auto;
  text-align: center;
}
.c-page-title img {
  height: 1.5em;
  font-size: 1rem;
}
@media (max-width: 567px) {
  .c-page-title img {
    font-size: 125%;
  }
}
.c-page-title img[src*=title_cart] {
  height: 2.5em;
}
.c-page-title img[src*=title_login], .c-page-title img[src*=title_cancel], .c-page-title img[src*=title_order_complete], .c-page-title img[src*=title_privacy], .c-page-title img[src*=title_terms], .c-page-title img[src*=title_aboutus] {
  height: 1.2em;
}

.c-guide {
  display: grid;
  justify-items: center;
  grid-gap: 3rem;
}
.c-guide .content {
  display: grid;
  grid-gap: 1.4rem;
  justify-items: center;
}
.c-guide .content h2 img {
  height: 1rem;
}
.c-guide .content--shipping > div {
  display: grid;
  grid-row-gap: 0.5rem;
}
.c-guide .content--shipping > div dl {
  display: grid;
  grid-auto-flow: column;
  border-width: 1px 0 0 1px;
  font-size: var(--s);
}
@media (max-width: 567px) {
  .c-guide .content--shipping > div dl {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(24, 1fr);
  }
}
@media (min-width: 568px) {
  .c-guide .content--shipping > div dl {
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(12, 1fr);
  }
}
.c-guide .content--shipping > div dl,
.c-guide .content--shipping > div dl dt,
.c-guide .content--shipping > div dl dd {
  border-style: solid;
  border-color: var(--gray);
}
.c-guide .content--shipping > div dl dt,
.c-guide .content--shipping > div dl dd {
  border-width: 0 1px 1px 0;
  padding: 0.5em 0.75em;
}
.c-guide .content--shipping > div dl dt {
  background: var(--lightgray);
}
.c-guide .content--shipping > div dl dd {
  text-align: right;
}
@media (max-width: 567px) {
  .c-guide .content--shipping > div dl dt:nth-of-type(-n+24) {
    grid-column: 1;
  }
  .c-guide .content--shipping > div dl dd:nth-of-type(-n+24) {
    grid-column: 2;
  }
  .c-guide .content--shipping > div dl dt:nth-of-type(n+25) {
    grid-column: 3;
  }
  .c-guide .content--shipping > div dl dd:nth-of-type(n+25) {
    grid-column: 4;
  }
}
@media (min-width: 568px) {
  .c-guide .content--shipping > div dl dt:nth-of-type(-n+12) {
    grid-column: 1;
  }
  .c-guide .content--shipping > div dl dd:nth-of-type(-n+12) {
    grid-column: 2;
  }
  .c-guide .content--shipping > div dl dt:nth-of-type(n+13) {
    grid-column: 3;
  }
  .c-guide .content--shipping > div dl dd:nth-of-type(n+13) {
    grid-column: 4;
  }
  .c-guide .content--shipping > div dl dt:nth-of-type(n+25) {
    grid-column: 5;
  }
  .c-guide .content--shipping > div dl dd:nth-of-type(n+25) {
    grid-column: 6;
  }
  .c-guide .content--shipping > div dl dt:nth-of-type(n+37) {
    grid-column: 7;
  }
  .c-guide .content--shipping > div dl dd:nth-of-type(n+37) {
    grid-column: 8;
  }
}
.c-guide .content--shipping > div h3 {
  font-size: var(--l);
  text-align: center;
}
.c-guide .content--returns ul {
  display: grid;
  grid-gap: 0.5em;
}
.c-guide .content--returns ul li {
  display: flex;
  align-items: flex-start;
}
.c-guide .content--returns ul li::before {
  content: "●";
  transform: scale(0.25);
}

.c-order-flow {
  display: grid;
  grid-row-gap: 0.5rem;
  justify-items: center;
  box-sizing: border-box;
  border-radius: 1rem;
  background: var(--lightgray);
}
@media (max-width: 567px) {
  .c-order-flow {
    padding: 1.25rem;
  }
}
@media (min-width: 568px) {
  .c-order-flow {
    padding: 1.5rem;
  }
}
.c-order-flow h2 img {
  height: 0.9rem;
}
.c-order-flow ol {
  position: relative;
  display: grid;
}
@media (max-width: 567px) {
  .c-order-flow ol {
    grid-auto-rows: 1fr;
    padding-left: 6rem;
  }
  .c-order-flow ol--step {
    grid-template-rows: repeat(2, 1fr) auto;
  }
}
@media (min-width: 568px) {
  .c-order-flow ol {
    grid-auto-flow: column;
    grid-auto-columns: 7.5rem;
    grid-gap: 2em;
    align-items: start;
  }
}
.c-order-flow ol::before {
  content: "";
  display: block;
  position: absolute;
  background: linear-gradient(#c8cad0, #c8cad0);
}
@media (max-width: 567px) {
  .c-order-flow ol::before {
    left: 3rem;
    top: 3rem;
    width: 0.6rem;
    height: calc(100% - 10rem);
    transform: translateX(-50%);
  }
}
@media (min-width: 568px) {
  .c-order-flow ol::before {
    left: 50%;
    top: 3rem;
    width: calc(100% - 10rem);
    height: 0.6rem;
    transform: translate(-50%, -50%);
  }
}
.c-order-flow ol li {
  display: grid;
  position: relative;
}
@media (max-width: 567px) {
  .c-order-flow ol li {
    padding-top: 2.2rem;
  }
}
@media (min-width: 568px) {
  .c-order-flow ol li {
    display: grid;
    grid-gap: 0.5em;
    justify-items: center;
  }
}
@media (max-width: 567px) {
  .c-order-flow ol li:nth-of-type(n+2) {
    background: linear-gradient(to right, #c8cad0 50%, transparent 50%) repeat-x left top 1rem/0.4rem 0.1rem;
  }
}
.c-order-flow ol li p {
  line-height: 1.4;
}
@media (min-width: 568px) {
  .c-order-flow ol li p {
    font-size: var(--s);
  }
}
.c-order-flow ol li p .line {
  color: var(--line-green);
  font-weight: bold;
}
@media (max-width: 567px) {
  .c-order-flow ol li h3 {
    margin-bottom: 0.5em;
    text-align: center;
  }
}
.c-order-flow ol li h3 img {
  height: 1.6rem;
}
.c-order-flow ol li .image {
  width: 6rem;
}
@media (max-width: 567px) {
  .c-order-flow ol li .image {
    position: absolute;
    right: calc(100% + 0.5rem);
    top: 0;
  }
}
.c-order-flow > p {
  font-weight: bold;
  text-align: center;
}
@media (min-width: 568px) {
  .c-order-flow > p {
    font-size: var(--l);
  }
}
.c-order-flow > p strong {
  color: var(--line-green);
}
@media (min-width: 568px) {
  .c-order-flow > p span {
    display: block;
  }
}

.c-btn--reload::before, .c-btn--cart::before, .c-btn--mail::before {
  content: "";
  width: 2em;
  aspect-ratio: 1/1;
  background: no-repeat center center/contain;
}

.c-btn {
  display: grid;
  grid-auto-flow: column;
  grid-column-gap: 0.5em;
  align-items: center;
  justify-content: center;
  border-radius: 0.5em;
  padding: 0 1.5em;
  height: 3.2em;
  font-size: var(--l);
  font-weight: bold;
}
@media (min-width: 568px) {
  .c-btn {
    min-width: 8em;
  }
}
.c-btn--orange {
  background: var(--orange);
  color: white;
}
.c-btn--yellow {
  background: var(--yellow);
}
.c-btn--line {
  background: var(--line-green);
  color: white;
}
.c-btn--mail::before {
  background-image: url(../images/icon_mail_w.svg);
}
.c-btn--cart::before {
  background-image: url(../images/icon_cart_w.svg);
}
.c-btn--reload::before {
  background-image: url(../images/icon_reload_w.svg);
}
.c-btn--yellow.c-btn--cart::before {
  background-image: url(../images/icon_cart_on.svg);
}

.c-link--close, .c-link--detail, .c-link--edit, .c-link--back, .c-link--mail {
  column-gap: 0.2em;
}
.c-link--close::before, .c-link--detail::before, .c-link--edit::before, .c-link--back::before, .c-link--mail::before {
  content: "";
  width: 1.8em;
  aspect-ratio: 1/1;
  background: no-repeat center center/contain;
}

.c-link {
  display: flex;
  align-items: center;
  color: var(--blue);
  font-weight: bold;
}
.c-link--orange {
  color: var(--orange);
}
.c-link--mail::before {
  background-image: url(../images/icon_mail_link.svg);
}
.c-link--back::before {
  background-image: url(../images/icon_back_link.svg);
}
.c-link--edit::before {
  background-image: url(../images/icon_edit_link.svg);
}
.c-link--detail::before {
  background-image: url(../images/icon_detail_link.svg);
}
.c-link--close::before {
  background-image: url(../images/icon_close_link.svg);
}

.c-ordermade {
  display: grid;
  grid-gap: 1.5em;
  justify-items: center;
}
@media (max-width: 567px) {
  .c-ordermade {
    width: var(--content-width);
  }
}
.c-ordermade h2 {
  border-bottom: 0.2rem solid var(--yellow);
  font-weight: bold;
}
@media (max-width: 567px) {
  .c-ordermade h2 {
    font-size: var(--l);
  }
}
@media (min-width: 568px) {
  .c-ordermade h2 {
    font-size: var(--ll);
  }
}
@media (max-width: 567px) {
  .c-ordermade > p {
    padding: 0 0.5em;
    text-align: justify;
  }
}
@media (min-width: 568px) {
  .c-ordermade > p {
    display: grid;
    justify-items: center;
    font-weight: bold;
  }
}
.c-ordermade .instafeeds {
  display: grid;
  grid-gap: 0.5rem;
}
@media (max-width: 567px) {
  .c-ordermade .instafeeds {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 568px) {
  .c-ordermade .instafeeds {
    width: 40rem;
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 567px) {
  .c-ordermade .instafeeds figure:nth-of-type(1), .c-ordermade .instafeeds figure:nth-of-type(5), .c-ordermade .instafeeds figure:nth-of-type(7) {
    grid-column: span 2;
    grid-row: span 2;
  }
}
.c-ordermade .instafeeds figure img {
  aspect-ratio: 1/1;
  width: 100%;
  object-fit: cover;
  border-radius: 2px;
}
.c-ordermade .instalink {
  display: flex;
  align-items: center;
  color: var(--darkgray);
  text-decoration: none;
  font-weight: bold;
  white-space: nowrap;
}
.c-ordermade .instalink img {
  width: 2em;
  margin-right: 0.5em;
}
.c-ordermade .instalink span {
  border-bottom: 2px solid var(--darkgray);
}
.c-ordermade .lead ul {
  display: grid;
  grid-gap: 0.5em;
  padding: 0;
  list-style-type: none;
}
.c-ordermade .lead li {
  display: flex;
  font-weight: bold;
}
@media (max-width: 567px) {
  .c-ordermade .lead li {
    align-items: flex-start;
  }
}
@media (min-width: 568px) {
  .c-ordermade .lead li {
    align-items: center;
  }
}
.c-ordermade .lead li::before {
  flex-shrink: 0;
  content: "";
  display: block;
  aspect-ratio: 1;
  width: 1.5em;
  margin-right: 0.25em;
  background: url(../images/icon_star_orange.svg) no-repeat center center/contain;
}
@media (max-width: 567px) {
  .c-ordermade .lead li::before {
    transform: translateY(-0.1em);
  }
}
@media (min-width: 568px) {
  .c-ordermade .iphonecase {
    justify-self: center;
    width: 40rem;
  }
}
.c-ordermade .iphonecase img {
  transition: 200ms;
}
.c-ordermade .iphonecase img:hover {
  filter: brightness(110%);
}

.c-order-form {
  display: grid;
  grid-gap: 0.5rem;
}
@media (min-width: 568px) {
  .c-order-form {
    justify-items: center;
  }
}
.c-order-form__options {
  position: relative;
  display: grid;
  grid-gap: 1rem;
  padding: 1rem 1rem 0;
}
.c-order-form__options::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% - 1.5rem);
  border-radius: 1em;
  background: var(--yellow);
}
.c-order-form__options::after {
  content: "";
  height: 1.5rem;
  aspect-ratio: 1;
  position: relative;
  z-index: -1;
  left: 50%;
  background: var(--yellow);
  border-bottom-left-radius: 0.1rem;
  transform-origin: left bottom;
  transform: rotate(-45deg) scale(1.42);
}
.c-order-form__options > * {
  position: relative;
}
.c-order-form__options h3 {
  justify-self: center;
  font-size: var(--l);
  font-weight: bold;
}
.c-order-form__options dl {
  display: grid;
}
@media (min-width: 568px) {
  .c-order-form__options dl {
    grid-template-columns: max-content 1fr;
  }
}
.c-order-form__options dl dt,
.c-order-form__options dl dd {
  display: grid;
}
@media (max-width: 567px) {
  .c-order-form__options dl dt,
  .c-order-form__options dl dd {
    text-align: center;
    justify-items: center;
  }
}
@media (min-width: 568px) {
  .c-order-form__options dl dt,
  .c-order-form__options dl dd {
    align-content: center;
    justify-content: start;
    padding: 1rem 0.5rem;
    border: solid rgba(255, 255, 255, 0.5);
    border-width: 1.5px 0;
  }
}
@media (min-width: 568px) {
  .c-order-form__options dl dt:nth-of-type(n+2),
  .c-order-form__options dl dd:nth-of-type(n+2) {
    border-top: none;
  }
}
@media (max-width: 567px) {
  .c-order-form__options dl dt {
    border-top: 1.5px solid rgba(255, 255, 255, 0.5);
    padding-top: 0.5rem;
  }
}
.c-order-form__options dl dd {
  font-weight: bold;
}
@media (max-width: 567px) {
  .c-order-form__options dl dd {
    margin-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}
@media (max-width: 567px) {
  .c-order-form__options dl dd:last-child {
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.5);
  }
}
.c-order-form__options dl dd .notes {
  margin-top: 0.25rem;
  color: var(--orange);
  font-size: var(--s);
  font-weight: bold;
}
.c-order-form__options dl select,
.c-order-form__options dl input {
  padding: 0.5em 1em;
}
@media (max-width: 567px) {
  .c-order-form__options dl select,
  .c-order-form__options dl input {
    font-size: 16px;
  }
}
@media (min-width: 568px) {
  .c-order-form__options dl select,
  .c-order-form__options dl input {
    font-size: var(--l);
  }
}
.c-order-form__options dl input::placeholder {
  color: var(--gray);
}
.c-order-form__options dl input[type=text] {
  background: white;
}
.c-order-form__options dl select {
  border-radius: 0.25em;
  padding-right: 2em;
  background: white url(../images/icon_dropdown_lightgray.svg) no-repeat right 0.25em center/1.5em;
}

.c-cart-items {
  display: grid;
  grid-row-gap: 1rem;
}
@media (min-width: 568px) {
  .c-cart-items {
    justify-content: center;
  }
}
.c-cart-items .items {
  display: grid;
  grid-row-gap: 1rem;
}
.c-cart-items .item {
  display: grid;
}
@media (max-width: 567px) {
  .c-cart-items .item {
    position: relative;
    box-sizing: border-box;
    grid-template-columns: 1fr 40%;
    grid-gap: 0.5rem 1rem;
    border: 2px solid var(--gray);
    border-radius: 1rem;
    padding: 1rem;
  }
}
@media (min-width: 568px) {
  .c-cart-items .item {
    box-sizing: border-box;
    width: 40rem;
    border-bottom: 2px solid var(--gray);
    padding: 0.75rem 0;
    grid-template-columns: max-content 1fr repeat(3, 7em) max-content;
    grid-gap: 0.5em 0;
  }
  .c-cart-items .item:first-child {
    border-top: 2px solid var(--gray);
  }
  .c-cart-items .item.confirm {
    grid-template-columns: max-content 1fr repeat(3, 7em);
  }
}
@media (max-width: 567px) {
  .c-cart-items .item > div:is(.thumbnail, .name) {
    grid-column: 1/3;
    grid-row: 1;
  }
  .c-cart-items .item > div.options {
    grid-column: 1;
    grid-row: 2/5;
  }
}
@media (min-width: 568px) {
  .c-cart-items .item > div {
    display: flex;
    align-items: center;
  }
  .c-cart-items .item > div:not(.options) {
    grid-row: span 2;
  }
  .c-cart-items .item > div.name {
    grid-column: 2;
    grid-row: 1;
  }
  .c-cart-items .item > div.options {
    grid-column: 2;
    grid-row: 2;
  }
  .c-cart-items .item > div:is(.price, .quantity, .subtotal, .delete) {
    border-left: 1px solid var(--gray);
  }
}
@media (max-width: 567px) {
  .c-cart-items .item > div.thumbnail {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--gray);
  }
}
@media (min-width: 568px) {
  .c-cart-items .item > div.thumbnail {
    padding: 0 1rem;
  }
}
.c-cart-items .item > div.thumbnail img {
  width: 4.5rem;
  border-radius: 2px;
}
.c-cart-items .item > div.name {
  font-weight: bold;
}
@media (max-width: 567px) {
  .c-cart-items .item > div.name {
    align-self: center;
    padding-left: 5rem;
    padding-bottom: 1rem;
  }
}
@media (min-width: 568px) {
  .c-cart-items .item > div.name {
    align-self: end;
  }
}
@media (max-width: 567px) {
  .c-cart-items .item > div.options {
    box-sizing: border-box;
    padding-right: 1rem;
    border-right: 1px solid var(--gray);
  }
}
@media (min-width: 568px) {
  .c-cart-items .item > div.options {
    align-self: start;
  }
}
.c-cart-items .item > div.quantity select {
  display: flex;
  align-items: center;
  height: 2em;
  border: 1px solid var(--gray);
  border-radius: 0.5em;
  padding: 0 1.5em 0 1em;
  background: url(../images/icon_dropdown_lightgray.svg) no-repeat right 0.25em center/auto 1.25em;
}
@media (max-width: 567px) {
  .c-cart-items .item > div.quantity select {
    font-size: var(--l);
  }
}
@media (max-width: 567px) {
  .c-cart-items .item > div.delete {
    position: absolute;
    right: 0.25rem;
    top: 0.25rem;
  }
}
.c-cart-items .item > div.delete button {
  display: flex;
}
@media (max-width: 567px) {
  .c-cart-items .item > div.delete button {
    width: 1.5rem;
    height: 1.5rem;
    background: url(../images/icon_close_lightgray.svg) no-repeat center center/contain;
  }
}
@media (min-width: 568px) {
  .c-cart-items .item > div.delete button {
    justify-content: center;
    width: 5em;
    color: var(--blue);
    text-decoration: underline;
  }
}
@media (max-width: 567px) {
  .c-cart-items .item > div.delete button span {
    display: none;
  }
}
@media (max-width: 567px) {
  .c-cart-items .item > div.price dl {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .c-cart-items .item > div.quantity dl {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .c-cart-items .item > div.subtotal dl {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .c-cart-items .item > div.options dl {
    display: grid;
  }
}
@media (min-width: 568px) {
  .c-cart-items .item > div.options dl {
    font-size: 90%;
  }
  .c-cart-items .item > div.price dl {
    display: grid;
    grid-template-rows: auto 3em;
    align-items: center;
    justify-items: center;
    width: 100%;
  }
  .c-cart-items .item > div.quantity dl {
    display: grid;
    grid-template-rows: auto 3em;
    align-items: center;
    justify-items: center;
    width: 100%;
  }
  .c-cart-items .item > div.subtotal dl {
    display: grid;
    grid-template-rows: auto 3em;
    align-items: center;
    justify-items: center;
    width: 100%;
  }
}
@media (min-width: 568px) {
  .c-cart-items .item > div.options dl dt, .c-cart-items .item > div.options dl dd {
    float: left;
  }
}
.c-cart-items .item > div dl dt {
  color: var(--darkgray);
  font-size: 90%;
}
@media (min-width: 568px) {
  .c-cart-items .item > div.options dl dt {
    clear: both;
  }
  .c-cart-items .item > div.options dl dt::after {
    content: "｜";
    color: var(--gray);
  }
  .c-cart-items .item > div.options dl dt:not(:nth-last-of-type(1)) {
    margin-bottom: 0.25em;
  }
}
.c-cart-items .item > div.subtotal dl dd {
  font-weight: bold;
}

.c-cart-items .shipping {
  border-bottom: 2px solid var(--gray);
}
@media (max-width: 567px) {
  .c-cart-items .shipping {
    display: grid;
    grid-gap: 0.25rem;
    padding: 0.25rem 0.75rem;
  }
}
@media (min-width: 568px) {
  .c-cart-items .shipping {
    display: flex;
    align-items: center;
    padding-bottom: 0.75rem;
  }
}
.c-cart-items .shipping h3 {
  color: var(--darkgray);
}
@media (min-width: 568px) {
  .c-cart-items .shipping h3 {
    margin: 0 2.5em;
  }
}
@media (max-width: 567px) {
  .c-cart-items .shipping .address {
    display: grid;
    grid-gap: 0.25em;
  }
}
@media (min-width: 568px) {
  .c-cart-items .shipping .address {
    flex-grow: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: 1rem;
    align-items: center;
    border-right: 1px solid var(--gray);
    padding-right: 1rem;
  }
}
.c-cart-items .shipping .address strong {
  font-size: 110%;
}
@media (min-width: 568px) {
  .c-cart-items .shipping .fee {
    display: grid;
    grid-gap: 0.5em;
    justify-items: center;
    width: 7em;
  }
}
.c-cart-items .shipping .fee dt {
  color: var(--darkgray);
  font-size: 90%;
}
.c-cart-items .shipping .fee dd {
  font-weight: bold;
}
@media (max-width: 567px) {
  .c-cart-items .shipping dl {
    justify-self: end;
    display: grid;
    grid-template-columns: repeat(2, auto);
    align-items: center;
    grid-gap: 1rem;
    font-size: 115%;
  }
}
.c-cart-items .total {
  display: grid;
  grid-row-gap: 0.4rem;
  margin-left: auto;
  justify-items: end;
}
@media (max-width: 567px) {
  .c-cart-items .total {
    padding: 0 0.5rem 0.25rem;
  }
}
@media (min-width: 568px) {
  .c-cart-items .total {
    padding: 0 0.4rem 0.4rem;
  }
}
.c-cart-items .total dl {
  display: flex;
  column-gap: 1rem;
  align-items: center;
  border-bottom: 2px solid var(--gray);
}
.c-cart-items .total dl dt {
  color: var(--darkgray);
}
.c-cart-items .total dl dd {
  font-weight: bold;
  font-size: var(--ll);
}
.c-cart-items .total .notes ul {
  display: grid;
  font-size: var(--s);
  justify-items: end;
}
@media (max-width: 567px) {
  .c-cart-items .total .notes ul {
    justify-content: flex-end;
  }
}
.c-cart-items .total .notes ul li {
  color: var(--darkgray);
}
.c-cart-items .total .notes ul li::before {
  content: "※";
}
@media (min-width: 568px) {
  .c-cart-items > button {
    margin-left: auto;
  }
}

.c-mypage-menu {
  display: grid;
  padding: 0 1em;
  background: linear-gradient(var(--gray), var(--gray)) no-repeat left bottom/100% 1px;
}
@media (min-width: 568px) {
  .c-mypage-menu {
    font-size: var(--l);
  }
}
.c-mypage-menu ul {
  display: flex;
  align-items: flex-end;
}
.c-mypage-menu ul li {
  border: 1px solid transparent;
  border-radius: 0.5em 0.5em 0 0;
  box-sizing: border-box;
  margin-inline: -1px;
  color: var(--darkgray);
}
.c-mypage-menu ul li.selected {
  border-color: var(--gray);
  border-bottom-color: white;
  color: inherit;
  background: white;
}
.c-mypage-menu ul li:nth-of-type(3) {
  margin-left: auto;
}
@media (max-width: 567px) {
  .c-mypage-menu ul li:nth-of-type(3) {
    font-size: var(--s);
  }
}
@media (min-width: 568px) {
  .c-mypage-menu ul li:nth-of-type(3) {
    font-size: var(--m);
  }
}
@media (max-width: 567px) {
  .c-mypage-menu ul li:nth-of-type(3) a {
    padding: 0.75em 1em;
  }
}
.c-mypage-menu ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: inherit;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  line-height: 1.3;
}
@media (max-width: 567px) {
  .c-mypage-menu ul li a {
    padding: 0.5em 1em;
  }
}
@media (min-width: 568px) {
  .c-mypage-menu ul li a {
    padding: 0.75em 1.5em;
  }
}
@media (min-width: 568px) {
  .c-mypage-menu ul li a br {
    display: none;
  }
}

.c-edit-addresses .address-select .checkbox input + label::before, .c-edit-addresses .address-input .checkbox input + label::before {
  flex-shrink: 0;
  content: "";
  display: block;
  width: 1.5em;
  aspect-ratio: 1;
  height: 1.5em;
  border: 1px solid;
  border-radius: 50%;
  margin-right: 1em;
}
.c-edit-addresses .address-select .checkbox input:not(:checked) + label::before, .c-edit-addresses .address-input .checkbox input:not(:checked) + label::before {
  border-color: var(--gray);
  background: white;
}

.c-edit-addresses .address-select .checkbox input:is(:checked) + label::before, .c-edit-addresses .address-input .checkbox input:is(:checked) + label::before {
  border-color: var(--yellow);
  background: var(--yellow) url(../images/icon_check_w.svg) no-repeat center center/100%;
}

.c-edit-addresses {
  display: grid;
  grid-gap: 1.5rem;
}
@media (min-width: 568px) {
  .c-edit-addresses {
    width: 30rem;
    margin-inline: auto;
  }
}
.c-edit-addresses input[type=radio] {
  position: fixed;
  visibility: hidden;
}
.c-edit-addresses h2 {
  text-align: center;
}
.c-edit-addresses h2 img {
  height: 1.4em;
}
.c-edit-addresses .address-input {
  display: grid;
  grid-gap: 1rem;
  padding: 1rem;
  border-radius: 1rem;
  background: var(--lightgray);
  cursor: pointer;
}
.c-edit-addresses .address-input.not-selected dl,
.c-edit-addresses .address-input.not-selected .save {
  opacity: 0.3;
}
.c-edit-addresses .address-input .checkbox input + label {
  display: flex;
  align-items: center;
  font-weight: bold;
}
@media (min-width: 568px) {
  .c-edit-addresses .address-input dl {
    display: grid;
    grid-template-columns: max-content 1fr;
  }
}
.c-edit-addresses .address-input dl:not(:first-child) {
  border-top: 1px solid var(--gray);
}
@media (min-width: 568px) {
  .c-edit-addresses .address-input dl:not(:first-child) {
    margin-left: 1.5em;
  }
}
.c-edit-addresses .address-input dl:not(:last-child) {
  border-bottom: 1px solid var(--gray);
}
@media (min-width: 568px) {
  .c-edit-addresses .address-input dl dt,
  .c-edit-addresses .address-input dl dd {
    padding: 1em;
  }
  .c-edit-addresses .address-input dl dt:not(:nth-last-of-type(1)),
  .c-edit-addresses .address-input dl dd:not(:nth-last-of-type(1)) {
    border-bottom: 1px solid var(--gray);
  }
}
.c-edit-addresses .address-input dl dt {
  display: flex;
  align-items: center;
}
@media (max-width: 567px) {
  .c-edit-addresses .address-input dl dt {
    padding-top: 1em;
  }
}
.c-edit-addresses .address-input dl dd {
  display: grid;
  grid-gap: 0.4em;
}
@media (max-width: 567px) {
  .c-edit-addresses .address-input dl dd {
    margin-top: 0.4em;
    padding-bottom: 1em;
  }
  .c-edit-addresses .address-input dl dd:not(:nth-last-of-type(1)) {
    border-bottom: 1px solid var(--gray);
  }
}
.c-edit-addresses .address-input dl input {
  box-sizing: border-box;
  padding: 0.5em;
  background: white;
}
.c-edit-addresses .address-input dl input[name=zipcode] {
  width: 7em;
}
.c-edit-addresses .address-input dl input[name=pref_name] {
  width: 6em;
}
@media (min-width: 568px) {
  .c-edit-addresses .address-input dl input[name=address] {
    width: 24em;
  }
}
.c-edit-addresses .address-input dl input[name=name] {
  width: 10em;
}
.c-edit-addresses .address-input dl input[name=tel] {
  width: 10em;
}
@media (max-width: 567px) {
  .c-edit-addresses .address-input dl input {
    max-width: 100%;
    font-size: 16px;
  }
}
.c-edit-addresses .address-input .save {
  margin: 0.25rem auto;
}
.c-edit-addresses .address-input .save input {
  position: fixed;
  visibility: hidden;
}
.c-edit-addresses .address-input .save input + label {
  display: flex;
  font-weight: bold;
}
.c-edit-addresses .address-input .save input + label::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 1.5em;
  aspect-ratio: 1;
  margin-right: 0.5em;
}
.c-edit-addresses .address-input .save input:not(:checked) + label::before {
  background: white;
  border: 1px solid var(--gray);
}

.c-edit-addresses .address-input .save input:checked + label::before {
  background: var(--yellow) url(../images/icon_check_w.svg) no-repeat center center/contain;
}

.c-edit-addresses .address-select {
  display: grid;
  grid-gap: 1rem;
}
.c-edit-addresses .address-select h3 {
  color: var(--darkgray);
}
.c-edit-addresses .address-select label {
  border: 1px solid var(--gray);
  border-radius: 1rem;
  padding: 0.75rem 1rem;
}
.c-edit-addresses .address-select label:hover {
  border-color: var(--darkgray);
  transition: border-color 100ms;
}
.c-edit-addresses .address-select label strong {
  font-size: 100%;
}
@media (min-width: 568px) {
  .c-edit-addresses .address-select label br:nth-of-type(2) {
    display: none;
  }
}
.c-edit-addresses .address-select input:checked + label {
  border-color: var(--yellow);
}
.c-edit-addresses .address-select .checkbox input + label {
  display: flex;
  align-items: center;
}
.c-edit-addresses .control {
  display: grid;
  grid-row-gap: 1rem;
}
@media (min-width: 568px) {
  .c-edit-addresses .control {
    justify-items: center;
  }
}
.c-edit-addresses .control .back {
  margin-inline: auto;
}

.c-order-detail {
  display: grid;
  grid-gap: 2rem;
}
@media (min-width: 568px) {
  .c-order-detail {
    margin-inline: auto;
    width: 36rem;
  }
}
.c-order-detail > dl {
  display: grid;
  grid-template-columns: max-content 1fr;
}
.c-order-detail > dl > dt,
.c-order-detail > dl > dd {
  border: 1px solid var(--gray);
  margin: 0 -1px -1px 0;
  padding: 0.75em;
}
.c-order-detail > dl > dt {
  background: var(--lightgray);
  font-weight: bold;
}
.c-order-detail > dl > dt:nth-of-type(1) {
  border-top-left-radius: 0.5em;
}
.c-order-detail > dl > dd:nth-of-type(1) {
  border-top-right-radius: 0.5em;
}
.c-order-detail > dl > dt:nth-last-of-type(1) {
  border-bottom-left-radius: 0.5em;
}
.c-order-detail > dl > dd:nth-last-of-type(1) {
  border-bottom-right-radius: 0.5em;
}
.c-order-detail > dl > dd.user a {
  display: grid;
  grid-template-columns: 3em auto;
  grid-gap: 1em;
  align-items: center;
}
.c-order-detail > dl > dd.user a img {
  border-radius: 50%;
}
@media (max-width: 567px) {
  .c-order-detail > dl > dt.items,
  .c-order-detail > dl > dd.items {
    grid-column: span 2;
  }
}
.c-order-detail > dl > dd.items {
  display: grid;
  grid-gap: 1rem;
  padding: 1rem;
}
.c-order-detail > dl[data-status="1"] > dd.progress {
  color: var(--orange);
  font-weight: bold;
}
.c-order-detail > dl .shipping {
  display: grid;
}
@media (max-width: 567px) {
  .c-order-detail > dl .shipping {
    grid-gap: 0.5em;
  }
}
@media (min-width: 568px) {
  .c-order-detail > dl .shipping {
    grid-template-columns: 1fr auto;
    grid-gap: 2em;
    align-items: center;
  }
}
@media (max-width: 567px) {
  .c-order-detail > dl .shipping .edit {
    justify-self: end;
  }
}
@media (min-width: 568px) {
  .c-order-detail > dl .shipping .edit {
    padding: 0.5rem;
  }
}
.c-order-detail > dl .items dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-gap: 0.25em 1em;
  font-size: 90%;
}
.c-order-detail > dl .items dl dt {
  color: gray;
}
.c-order-detail > dl .items dl.subtotal,
.c-order-detail > dl .items dl.total {
  grid-template-columns: 1fr max-content;
  border-top: 1px solid var(--gray);
  padding-top: 1em;
  text-align: right;
}
.c-order-detail > dl .items dl.total {
  justify-self: end;
}
.c-order-detail > dl .items dl.total dt:nth-last-of-type(1),
.c-order-detail > dl .items dl.total dd:nth-last-of-type(1) {
  margin-top: 0.5em;
}
.c-order-detail > dl .items dl.total dd:nth-last-of-type(1) {
  font-weight: bold;
}
.c-order-detail > dl .items .item {
  display: grid;
}
@media (max-width: 567px) {
  .c-order-detail > dl .items .item {
    grid-gap: 0.5rem;
  }
}
@media (min-width: 568px) {
  .c-order-detail > dl .items .item {
    grid-template-columns: max-content 1fr;
    grid-template-areas: "figure detail" "subtotal subtotal";
    grid-gap: 0.75rem;
    align-items: start;
  }
}
.c-order-detail > dl .items .item figure {
  width: 5rem;
}
@media (min-width: 568px) {
  .c-order-detail > dl .items .item figure {
    grid-area: figure;
  }
}
.c-order-detail > dl .items .item figure img {
  border-radius: 0.25rem;
}
@media (min-width: 568px) {
  .c-order-detail > dl .items .item .detail {
    grid-area: detail;
  }
  .c-order-detail > dl .items .item .subtotal {
    grid-area: subtotal;
  }
}
.c-order-detail .to-payment {
  display: grid;
}
@media (min-width: 568px) {
  .c-order-detail .to-payment {
    justify-content: center;
  }
}
.c-order-detail .cancel {
  display: grid;
  justify-content: center;
}

.c-graybtn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.4em;
  border-radius: 1.2em;
  padding: 0 1em 0 0.75em;
  background: var(--lightgray);
  font-weight: bold;
  font-size: 90%;
  color: var(--darkgray);
}
.c-graybtn::before {
  content: "";
  display: block;
  width: 1.5em;
  aspect-ratio: 1;
  background: no-repeat center center/contain;
}
.c-graybtn--back::before {
  background-image: url(../images/icon_back_gray.svg);
}
.c-graybtn--add::before {
  background-image: url(../images/icon_add_gray.svg);
}
.c-graybtn--delete::before {
  background-image: url(../images/icon_close_gray.svg);
}
.c-graybtn--delete:hover {
  background: var(--orange);
  color: white;
}
.c-graybtn--delete:hover::before {
  background-image: url(../images/icon_close_w.svg);
}

.c-back-to-index {
  display: flex;
  justify-content: center;
}

.c-error {
  display: flex;
  justify-content: center;
  color: var(--orange);
  font-weight: bold;
}
.c-error:empty {
  display: none;
}

.c-otp-input {
  display: grid;
  grid-column-gap: 0.4rem;
  grid-auto-flow: column;
  padding: 1.5rem;
  border-radius: 1rem;
  background: var(--lightgray);
}
.c-otp-input input {
  display: flex;
  height: 2.4em;
  width: 1.8em;
  align-items: center;
  justify-content: center;
  background: white;
  text-align: center;
  font-size: var(--ll);
}

.p-header {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  width: var(--content-width);
  margin: 1rem auto;
}
@media (max-width: 567px) {
  .p-header {
    height: 2rem;
  }
}
@media (min-width: 568px) {
  .p-header {
    height: 2.4rem;
  }
}
@media (max-width: 567px) {
  .p-header .logo a img {
    height: 1.6rem;
  }
}
@media (min-width: 568px) {
  .p-header .logo a img {
    height: 2.4rem;
  }
}
.p-header .mainmenu {
  display: grid;
}
@media (max-width: 567px) {
  .p-header .mainmenu {
    align-content: start;
    justify-items: center;
    position: fixed;
    z-index: 9;
    left: 0;
    top: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding-top: 5rem;
    background: rgba(255, 255, 255, 0.95);
  }
  body:not(.is-menu-open) .p-header .mainmenu {
    visibility: hidden;
    opacity: 0;
  }
  body:is(.is-menu-open) .p-header .mainmenu {
    transition: 150ms;
  }
}
@media (min-width: 568px) {
  .p-header .mainmenu {
    margin-left: auto;
    margin-right: 7rem;
  }
}
.p-header .mainmenu ul {
  display: grid;
}
@media (max-width: 567px) {
  .p-header .mainmenu ul {
    border-bottom: 1px solid var(--gray);
  }
  body:not(.is-menu-open) .p-header .mainmenu ul {
    transform: translateY(-1rem);
    opacity: 0;
  }
  body:is(.is-menu-open) .p-header .mainmenu ul {
    transition: 300ms;
  }
}
@media (max-width: 567px) and (max-width: 567px) {
  .p-header .mainmenu ul .home img {
    width: 2.5em;
  }
}
@media (max-width: 567px) and (min-width: 568px) {
  .p-header .mainmenu ul .home img {
    width: 2em;
  }
}
@media (min-width: 568px) {
  .p-header .mainmenu ul {
    display: flex;
    align-items: center;
  }
}
.p-header .mainmenu ul li {
  color: var(--darkgray);
  font-weight: bold;
}
@media (max-width: 567px) {
  .p-header .mainmenu ul li:nth-of-type(n+2) {
    border-top: 1px solid var(--gray);
  }
  body.page-guide .p-header .mainmenu ul li:nth-of-type(3) {
    color: var(--black);
  }
  body.page-contact .p-header .mainmenu ul li:nth-of-type(4) {
    color: var(--black);
  }
}
@media (min-width: 568px) {
  .p-header .mainmenu ul li:nth-of-type(n+2) {
    margin-left: 2em;
  }
}
.p-header .mainmenu ul li a {
  position: relative;
}
@media (max-width: 567px) {
  .p-header .mainmenu ul li a {
    display: flex;
    justify-content: center;
    padding: 0.75em 1em;
  }
}
@media (min-width: 568px) {
  .p-header .mainmenu ul li a::after {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    transform: translateY(0.25em);
    background: var(--gray);
  }
  body.page-guide .p-header .mainmenu ul li:nth-of-type(3) a::after {
    content: "";
  }
  body.page-contact .p-header .mainmenu ul li:nth-of-type(4) a::after {
    content: "";
  }
}
.p-header .usermenu {
  display: grid;
  grid-auto-flow: column;
  grid-column-gap: 0.4rem;
  position: fixed;
  z-index: 10;
  align-items: center;
  right: 1rem;
  top: 1rem;
}
@media (max-width: 567px) {
  .p-header .usermenu {
    margin-right: 2.2rem;
    grid-auto-columns: 2rem;
  }
}
@media (min-width: 568px) {
  .p-header .usermenu {
    grid-auto-columns: 2.4rem;
    right: calc((100% - var(--content-width)) / 2);
  }
}
.p-header .usermenu > div {
  position: relative;
}
.p-header .usermenu > div > a .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gray);
}
.p-header .usermenu > div > a .label {
  visibility: hidden;
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 0.5em);
  color: var(--darkgray);
  font-weight: bold;
  font-size: var(--ss);
  white-space: nowrap;
}
body:is(.is-menu-open) .p-header .usermenu > div > a .label {
  visibility: visible;
}

.p-header .usermenu > div > a .icon:hover + .label {
  visibility: visible;
}
.p-header .usermenu > div.cart .icon img {
  width: 88%;
}
.p-header .usermenu > div.cart .itemnum {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  bottom: 100%;
  box-sizing: border-box;
  min-width: 1.8em;
  height: 1.8em;
  border-radius: 0.9em;
  padding: 0 0.5em;
  transform: translate(-50%, 0.9em);
  background: var(--yellow);
  color: var(--black);
  font-size: var(--ss);
  font-weight: bold;
}
.p-header .usermenu > div.cart .itemnum:empty {
  display: none;
}
.p-header .usermenu > div.user .icon {
  box-sizing: border-box;
}
.p-header .usermenu > div.user .icon::before {
  content: "";
  width: 100%;
  aspect-ratio: 1;
  background: url(../images/icon_user_off.svg) no-repeat center center/contain;
}
.p-header .usermenu > div.user .icon img {
  position: absolute;
  left: 0;
  top: 0;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  box-sizing: border-box;
}
.p-header .usermenu.logged-in > div.user .label {
  display: none;
}

.p-header .usermenu > div.user .menu {
  position: absolute;
  left: 50%;
  top: 100%;
  padding-top: 0.25rem;
  transform: translate(-50%, 0);
}
.p-header .usermenu.not-logged-in > div.user .menu {
  display: none;
}

.p-header .usermenu > div.user .menu ul {
  display: grid;
  border-radius: 0.75em;
  padding: 0.25em 0.75em;
  background: var(--gray);
  font-size: var(--s);
  line-height: 1;
}
.p-header .usermenu > div.user .menu li {
  color: var(--darkgray);
  font-weight: bold;
  white-space: nowrap;
}
.p-header .usermenu > div.user .menu li:nth-of-type(n+2)::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: var(--darkgray);
  opacity: 0.5;
}
.p-header .usermenu > div.user .menu li a {
  display: flex;
  padding: 0.75em 0;
}
.p-header .usermenu > div.user .menu li a:hover {
  color: var(--black);
}
.p-header .usermenu > div.user .menu::before {
  content: "";
  display: block;
  width: 0.75rem;
  height: 0.5rem;
  margin-inline: auto;
  background: linear-gradient(to right bottom, transparent 50%, var(--gray) 50%) no-repeat left bottom/50% 100%, linear-gradient(to left bottom, transparent 50%, var(--gray) 50%) no-repeat right bottom/50% 100%;
}
.p-header .usermenu > div.user:not(:hover) .menu {
  visibility: hidden;
}
.p-header .usermenu > div.user:hover .menu {
  visibility: visible;
}
@media (max-width: 567px) {
  .p-header .menubtn {
    position: fixed;
    z-index: 10;
    right: 1rem;
    top: 1rem;
  }
  .p-header .menubtn button {
    display: grid;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 2rem;
  }
  body:not(.is-menu-open) .p-header .menubtn button img.close, body:is(.is-menu-open) .p-header .menubtn button img.open {
    visibility: hidden;
    opacity: 0;
    transform: scale(0.5);
  }
  .p-header .menubtn button img {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
  }
  body:is(.is-menu-open) .p-header .menubtn button img.close {
    transition: 400ms 100ms;
  }
}
@media (min-width: 568px) {
  .p-header .menubtn {
    display: none;
  }
}

.p-footer {
  display: grid;
  grid-gap: 2rem;
  justify-items: center;
  margin: 6rem 0 3rem;
}
.p-footer .instagram img {
  width: 4.6rem;
}
.p-footer .infomenu ul {
  display: grid;
  color: var(--darkgray);
}
@media (max-width: 567px) {
  .p-footer .infomenu ul {
    display: grid;
    grid-row-gap: 0.6em;
    justify-items: center;
  }
}
@media (min-width: 568px) {
  .p-footer .infomenu ul {
    grid-auto-flow: column;
    grid-column-gap: 1.5rem;
    justify-content: center;
  }
}
.p-footer .infomenu ul li a:hover {
  text-decoration: underline;
}

.p-top {
  display: grid;
  grid-gap: 2.5rem;
  justify-items: center;
}
.p-top-main {
  display: grid;
}
.p-top-main h1,
.p-top-main figure {
  grid-column: 1;
  grid-row: 1;
}
.p-top-main h1 {
  order: 1;
}
@media (max-width: 567px) {
  .p-top-main h1 {
    padding-left: 1rem;
    padding-top: 1.5rem;
  }
}
@media (min-width: 568px) {
  .p-top-main h1 {
    align-self: center;
    padding-left: 2rem;
  }
}
@media (max-width: 567px) {
  .p-top-main h1 img {
    width: 11.4rem;
  }
}
@media (min-width: 568px) {
  .p-top-main h1 img {
    width: 16.7rem;
  }
}
.p-top-main figure img {
  border-radius: 0.2rem;
}
.p-top-faces {
  display: grid;
  justify-items: center;
  grid-row-gap: 0.75rem;
}
@media (max-width: 567px) {
  .p-top-faces img {
    width: 11.7rem;
  }
}
@media (min-width: 568px) {
  .p-top-faces img {
    width: 15rem;
  }
}
.p-top-faces p {
  font-weight: bold;
  font-size: var(--l);
}
@media (max-width: 567px) {
  .p-top-faces p {
    display: grid;
    justify-items: center;
  }
}
.p-top-items {
  display: grid;
  grid-gap: 2rem;
}
@media (max-width: 567px) {
  .p-top-items {
    width: 12rem;
  }
}
@media (min-width: 568px) {
  .p-top-items {
    grid-template-columns: repeat(3, 1fr);
  }
}
.p-top-items__item {
  display: grid;
  grid-gap: 0.5rem;
  grid-template-rows: auto 1fr auto auto;
  align-items: center;
  text-align: center;
}
.p-top-items__item .image img {
  border-radius: 0.1rem;
}
.p-top-items__item .name {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-size: var(--l);
  font-weight: bold;
  line-height: 1.3;
}
.p-top-items__item .price small {
  font-size: var(--s);
}

.p-item {
  display: grid;
  justify-items: center;
  grid-gap: 3rem;
}
.p-item-detail {
  display: grid;
  grid-row-gap: inherit;
  width: var(--content-width);
}
.p-item-detail__contents {
  display: grid;
  grid-row-gap: 2rem;
}
.p-item-detail__contentsitem {
  display: grid;
}
@media (max-width: 567px) {
  .p-item-detail__contentsitem {
    grid-row-gap: 1rem;
  }
}
@media (min-width: 568px) {
  .p-item-detail__contentsitem {
    grid-template-columns: auto auto;
    grid-template-rows: 1fr repeat(3, max-content) 1fr;
    grid-column-gap: 3rem;
    align-items: center;
  }
  .p-item-detail__contentsitem:nth-of-type(odd) {
    padding-left: 1rem;
  }
  .p-item-detail__contentsitem:nth-of-type(odd) .image {
    grid-column: 2;
  }
  .p-item-detail__contentsitem:nth-of-type(even) {
    padding-right: 1rem;
  }
  .p-item-detail__contentsitem:nth-of-type(even) .image {
    grid-column: 1;
  }
}
.p-item-detail__contentsitem .caption {
  display: grid;
  line-height: 1.2;
  font-family: var(--zen);
  font-weight: var(--zen-b);
}
@media (max-width: 567px) {
  .p-item-detail__contentsitem .caption {
    justify-items: center;
    font-size: 1.1rem;
  }
}
@media (min-width: 568px) {
  .p-item-detail__contentsitem .caption {
    grid-row: 2;
    position: relative;
    padding-left: 1rem;
    font-size: 1.2rem;
  }
}
.p-item-detail__contentsitem .caption strong {
  font-weight: inherit;
  color: #FFAA00;
}
@media (min-width: 568px) {
  .p-item-detail__contentsitem .caption::before {
    content: "";
    width: 0.4rem;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: var(--lightgray);
    border-radius: 0.2rem;
  }
}
@media (max-width: 567px) {
  .p-item-detail__contentsitem .caption::after {
    content: "";
    width: 4.5rem;
    height: 0.3rem;
    margin-top: 0.75rem;
    background: var(--lightgray);
    border-radius: 0.15rem;
  }
}
@media (min-width: 568px) {
  .p-item-detail__contentsitem .text {
    grid-row: 3;
    margin: 1rem 0;
    font-size: 0.8rem;
  }
}
.p-item-detail__contentsitem .notes {
  display: grid;
  grid-gap: 0.25em;
  padding: 0;
  list-style-type: none;
  color: var(--brown);
}
@media (min-width: 568px) {
  .p-item-detail__contentsitem .notes {
    grid-row: 4;
  }
}
.p-item-detail__contentsitem .notes li::before {
  content: "※";
}
.p-item-detail__contentsitem .image {
  display: grid;
  grid-row-gap: 0.5rem;
}
@media (min-width: 568px) {
  .p-item-detail__contentsitem .image {
    grid-row: 1/6;
    width: 21rem;
  }
}
.p-item-detail__main {
  display: grid;
  grid-row-gap: 1rem;
}
@media (min-width: 568px) {
  .p-item-detail__main {
    grid-template-columns: 30rem 1fr;
    grid-template-areas: "image blank1" "image name" "image price" "image description" "image spec" "image toorder" "image contact" "image blank2";
    grid-column-gap: 2rem;
  }
  .p-item-detail__main .image {
    grid-area: image;
  }
  .p-item-detail__main .name {
    grid-area: name;
  }
  .p-item-detail__main .price {
    grid-area: price;
  }
  .p-item-detail__main .description {
    grid-area: description;
  }
  .p-item-detail__main .spec {
    grid-area: spec;
  }
  .p-item-detail__main .toorder {
    grid-area: toorder;
  }
  .p-item-detail__main .contact {
    grid-area: contact;
  }
}
.p-item-detail__main .image img {
  border-radius: 0.1rem;
}
.p-item-detail__main .name {
  display: grid;
  justify-items: center;
  font-family: var(--zen);
  font-weight: var(--zen-b);
  line-height: 1.3;
}
@media (max-width: 567px) {
  .p-item-detail__main .name {
    font-size: 1.3rem;
  }
}
@media (min-width: 568px) {
  .p-item-detail__main .name {
    font-size: 1.4rem;
  }
}
.p-item-detail__main .name::after {
  content: "";
  width: 4.5rem;
  margin-top: 1rem;
  background: var(--lightgray);
}
@media (max-width: 567px) {
  .p-item-detail__main .name::after {
    height: 0.3rem;
    border-radius: 0.15rem;
  }
}
@media (min-width: 568px) {
  .p-item-detail__main .name::after {
    height: 0.4rem;
    border-radius: 0.2rem;
  }
}
.p-item-detail__main .spec {
  display: grid;
  grid-gap: 0.25em;
  list-style-type: none;
  padding: 0;
  color: var(--darkgray);
}
.p-item-detail__main .price {
  text-align: center;
  font-size: 1rem;
}
.p-item-detail__main .price small {
  font-size: 70%;
}
.p-item-detail__main .toorder {
  display: grid;
}
.p-item-detail__main .contact {
  display: grid;
  justify-content: center;
  font-size: 0.75rem;
}
.p-item-order {
  display: grid;
  grid-gap: 1rem;
  border: 1px solid var(--gray);
  border-radius: 1rem;
}
@media (max-width: 567px) {
  .p-item-order {
    box-sizing: border-box;
    padding: 1rem;
    width: var(--content-width);
  }
}
@media (min-width: 568px) {
  .p-item-order {
    justify-items: center;
    padding: 1.5rem;
  }
}
.p-item-order .contact {
  display: grid;
  justify-items: center;
  margin-top: 0.75rem;
  font-size: 0.75rem;
}
.p-item-order__item {
  display: grid;
  grid-row-gap: 0.75rem;
  justify-items: center;
}
@media (min-width: 568px) {
  .p-item-order__item {
    grid-template-columns: repeat(2, 18rem);
    grid-template-areas: "image blank1" "image name" "image price" "image spec" "image blank2";
    grid-column-gap: 1.5rem;
  }
  .p-item-order__item .image {
    grid-area: image;
  }
  .p-item-order__item .name {
    grid-area: name;
  }
  .p-item-order__item .price {
    grid-area: price;
  }
  .p-item-order__item .spec {
    grid-area: spec;
  }
}
.p-item-order__item .image img {
  border-radius: 0.1rem;
}
.p-item-order__item .name {
  display: grid;
  justify-items: center;
  font-family: var(--zen);
  font-weight: var(--zen-b);
  line-height: 1.2;
}
@media (max-width: 567px) {
  .p-item-order__item .name {
    font-size: 1.2rem;
  }
}
@media (min-width: 568px) {
  .p-item-order__item .name {
    font-size: 1.3rem;
  }
}
.p-item-order__item .price {
  font-size: 1rem;
}
.p-item-order__item .price small {
  font-size: 70%;
}
.p-item-order__item .spec {
  display: grid;
  list-style-type: none;
  padding: 0;
  color: var(--darkgray);
  font-size: 0.6rem;
}

.p-cart {
  display: grid;
  grid-gap: 1rem;
}
@media (min-width: 568px) {
  .p-cart {
    justify-content: center;
  }
}
.p-cart .empty {
  color: var(--darkgray);
  font-size: var(--l);
  text-align: center;
}
.p-cart .to-order {
  display: grid;
}
@media (min-width: 568px) {
  .p-cart .to-order {
    margin-left: auto;
  }
}

.p-contact {
  display: grid;
  grid-gap: 3em;
  width: var(--content-width);
}
.p-contact .lead {
  display: grid;
  justiy-content: center;
}
.p-contact .lead p {
  display: grid;
  grid-row-gap: 0.5em;
  justify-content: center;
  text-align: center;
}
.p-contact .lead p strong {
  display: flex;
  text-align: left;
  font-weight: bold;
}
@media (max-width: 567px) {
  .p-contact .lead p strong {
    align-items: flex-start;
  }
}
@media (min-width: 568px) {
  .p-contact .lead p strong {
    align-items: center;
  }
}
.p-contact .lead p strong:nth-last-of-type(1) {
  margin-bottom: 1em;
}
.p-contact .lead p strong::before {
  flex-shrink: 0;
  content: "";
  display: block;
  aspect-ratio: 1;
  width: 1.5em;
  margin-right: 0.25em;
  background: url(../images/icon_star_orange.svg) no-repeat center center/contain;
}
@media (max-width: 567px) {
  .p-contact .lead p strong::before {
    transform: translateY(-0.1em);
  }
}
.p-contact .line {
  display: grid;
  grid-gap: 1.5em;
  border: 1px solid var(--gray);
  padding: 2em;
  border-radius: 1em;
}
@media (min-width: 568px) {
  .p-contact .line {
    margin-inline: auto;
  }
}
.p-contact .line p {
  font-weight: bold;
}
@media (min-width: 568px) {
  .p-contact .line p {
    text-align: center;
  }
}
@media (max-width: 567px) {
  .p-contact .line p br {
    display: none;
  }
}
.p-contact .line p strong {
  color: var(--line-green);
}
@media (min-width: 568px) {
  .p-contact .line button {
    margin-inline: auto;
  }
}
.p-contact .mail {
  display: grid;
  grid-gap: 1.5em;
}
.p-contact .mail h2 {
  text-align: center;
}
@media (min-width: 568px) {
  .p-contact .mail h2 br {
    display: none;
  }
}
.p-contact .mail dl {
  display: grid;
  border-radius: 1em;
  background: var(--lightgray);
}
@media (max-width: 567px) {
  .p-contact .mail dl {
    grid-gap: 0.5em 0;
    padding: 1.5em;
  }
}
@media (min-width: 568px) {
  .p-contact .mail dl {
    grid-template-columns: max-content 1fr;
    margin-inline: auto;
    padding: 1em 1.5em;
  }
}
@media (min-width: 568px) {
  .p-contact .mail dl dt,
  .p-contact .mail dl dd {
    padding: 0.8rem;
  }
}
@media (min-width: 568px) and (min-width: 568px) {
  .p-contact .mail dl dt:nth-last-of-type(n+2),
  .p-contact .mail dl dd:nth-last-of-type(n+2) {
    border-bottom: 1px solid var(--gray);
  }
  .p-contact .mail dl dt:nth-of-type(3),
  .p-contact .mail dl dd:nth-of-type(3) {
    grid-column: span 2;
  }
}
@media (min-width: 568px) {
  .p-contact .mail dl dt {
    display: flex;
    align-items: center;
  }
}
@media (max-width: 567px) {
  .p-contact .mail dl dt:nth-of-type(n+2) {
    margin-top: 1em;
  }
}
@media (min-width: 568px) {
  .p-contact .mail dl dt:nth-of-type(n+3) {
    padding-bottom: 0;
  }
}
.p-contact .mail dl dd input,
.p-contact .mail dl dd textarea {
  box-sizing: border-box;
  max-width: 100%;
  border: none;
  border-radius: 0;
  padding: 0.5em;
  background: white;
}
@media (max-width: 567px) {
  .p-contact .mail dl dd input,
  .p-contact .mail dl dd textarea {
    width: 100%;
    font-size: 16px;
  }
}
@media (min-width: 568px) {
  .p-contact .mail dl dd input[name=name] {
    width: 10em;
  }
  .p-contact .mail dl dd input[name=email] {
    width: 20em;
  }
}
.p-contact .mail dl dd textarea {
  height: 15em;
}
@media (min-width: 568px) {
  .p-contact .mail dl dd textarea {
    width: 36em;
  }
}
@media (min-width: 568px) {
  .p-contact .mail button {
    margin-inline: auto;
  }
}

.p-info {
  display: grid;
  grid-gap: 1em;
}
.p-info dl {
  display: grid;
  border-top: 1px solid var(--gray);
}
.p-info dl dt {
  font-weight: bold;
}
@media (max-width: 567px) {
  .p-info dl dt {
    padding: 0.75em 0 0 0.75em;
  }
  .p-info dl dd {
    border-bottom: 1px solid var(--gray);
    padding: 0.25em 0.75em 0.75em 1.75em;
  }
}
@media (min-width: 568px) {
  .p-info dl {
    grid-template-columns: max-content 1fr;
  }
  .p-info dl dt,
  .p-info dl dd {
    border-bottom: 1px solid var(--gray);
    padding: 1.25em 0.75em;
  }
}
.p-info h2 {
  font-size: var(--l);
}
.p-info ol {
  display: grid;
  grid-gap: 0.75em;
}
.p-info ol li {
  text-indent: -1em;
  margin-left: 1em;
}
.p-info ol li:nth-of-type(1)::before {
  content: "1. ";
}
.p-info ol li:nth-of-type(2)::before {
  content: "2. ";
}
.p-info ol li:nth-of-type(3)::before {
  content: "3. ";
}
.p-info ol li:nth-of-type(4)::before {
  content: "4. ";
}
.p-info ol li:nth-of-type(5)::before {
  content: "5. ";
}
.p-info ol li:nth-of-type(6)::before {
  content: "6. ";
}
.p-info ol li:nth-of-type(7)::before {
  content: "7. ";
}
.p-info ol li:nth-of-type(8)::before {
  content: "8. ";
}
.p-info ol li:nth-of-type(9)::before {
  content: "9. ";
}
.p-info ol ol {
  grid-gap: 0;
  margin-top: 1em;
  list-style-type: none;
}
.p-info ol ol li:nth-of-type(1)::before {
  content: "(1) ";
}
.p-info ol ol li:nth-of-type(2)::before {
  content: "(2) ";
}
.p-info ol ol li:nth-of-type(3)::before {
  content: "(3) ";
}
.p-info ol ol li:nth-of-type(4)::before {
  content: "(4) ";
}
.p-info ol ol li:nth-of-type(5)::before {
  content: "(5) ";
}
.p-info ol ol li:nth-of-type(6)::before {
  content: "(6) ";
}
.p-info ol ol li:nth-of-type(7)::before {
  content: "(7) ";
}
.p-info ol ol li:nth-of-type(8)::before {
  content: "(8) ";
}
.p-info ol ol li:nth-of-type(9)::before {
  content: "(9) ";
}
.p-info ul li {
  display: flex;
  align-items: flex-start;
}
.p-info ul li::before {
  content: "●";
  transform: scale(0.25);
}

.p-login {
  display: grid;
  grid-row-gap: 1.5rem;
  justify-items: center;
}
.p-login .contents {
  display: grid;
  border: 2px solid var(--gray);
  border-radius: 1rem;
  padding: 1.5rem;
}
@media (max-width: 567px) {
  .p-login .contents {
    grid-row-gap: 1.5rem;
  }
}
@media (min-width: 568px) {
  .p-login .contents {
    grid-template-columns: 1fr auto 1fr;
    grid-column-gap: 1.5rem;
  }
}
.p-login .contents::before {
  content: "";
  background: var(--gray);
}
@media (max-width: 567px) {
  .p-login .contents::before {
    grid-row: 2;
    height: 1px;
  }
}
@media (min-width: 568px) {
  .p-login .contents::before {
    grid-column: 2;
    grid-row: 1;
    width: 1px;
  }
}
.p-login .contents .sns {
  display: grid;
  grid-row-gap: 0.6rem;
  justify-content: center;
}
@media (min-width: 568px) {
  .p-login .contents .sns {
    align-content: center;
  }
}
.p-login .contents .sns a {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  box-sizing: border-box;
  width: 12rem;
  overflow: hidden;
  border-radius: 0.4rem;
  text-align: center;
  font-weight: bold;
  font-size: var(--l);
  text-decoration: none;
}
.p-login .contents .sns a::before {
  content: "";
  width: 2.8rem;
  aspect-ratio: 1/1;
  background: no-repeat center center/contain;
}
.p-login .contents .sns a.line {
  background: var(--line-green);
  color: white;
}
.p-login .contents .sns a.line::before {
  background-image: url(../images/login_icon_line.png);
}
.p-login .contents .sns a.google {
  border: 2px solid var(--darkgray);
  color: var(--black);
}
.p-login .contents .sns a.google::before {
  background-image: url(../images/login_icon_google.png);
}
.p-login .contents .email {
  display: grid;
  grid-row-gap: 0.6rem;
}
.p-login .contents .email h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--l);
  font-weight: bold;
}
.p-login .contents .email h2::before {
  content: "";
  width: 2em;
  aspect-ratio: 1/1;
  background: url(../images/icon_mail.svg) no-repeat center center/contain;
}
.p-login .contents .email form {
  display: grid;
  grid-row-gap: 0.4rem;
}
.p-login .contents .email form input {
  background: #eceef0;
  border: none;
  border-radius: 2px;
  padding: 0.6em;
}
.p-login .contents .email form button {
  margin-top: 0.2rem;
}
.p-login .contents .email .link {
  display: grid;
  grid-row-gap: 0.6rem;
  justify-items: center;
  margin-top: 1rem;
  text-align: center;
}
.p-login .contents .email .link a.entry {
  font-size: var(--l);
}
.p-login .contents .email .link a.password {
  font-size: var(--s);
}

.p-order {
  display: grid;
  grid-gap: 2rem;
}
@media (max-width: 567px) {
  .p-order {
    width: var(--content-width);
  }
}
@media (min-width: 568px) {
  .p-order {
    justify-items: center;
  }
}
.p-order > p {
  font-size: var(--l);
  text-align: center;
  font-weight: bold;
}
.p-order > p span {
  display: inline-block;
}
.p-order > p strong {
  color: var(--line-green);
}
.p-order--complete {
  display: grid;
  grid-gap: 1.5rem;
  justify-items: center;
}
@media (min-width: 568px) {
  .p-order--complete > p br:nth-of-type(2) {
    display: none;
  }
}
.p-order--complete > p .line {
  color: var(--line-green);
}
.p-order--complete > p .mail {
  color: var(--orange);
}
.p-order--cancel .message {
  margin-top: 2em;
  display: grid;
  justify-items: center;
  grid-row-gap: 0.5em;
  font-size: var(--l);
  font-weight: bold;
}
.p-order--cancel .message .error {
  color: var(--orange);
}

.p-payment {
  display: grid;
  justify-content: center;
}
@media (max-width: 567px) {
  .p-payment {
    grid-gap: 1rem;
  }
}
@media (min-width: 568px) {
  .p-payment {
    grid-gap: 1.5rem;
  }
}
.p-payment .total {
  display: grid;
  justify-content: center;
}
.p-payment .total dl {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-gap: 1.5em;
  align-items: center;
  border-bottom: 1px solid var(--gray);
  padding: 0.5em;
}
.p-payment .total dt {
  color: var(--darkgray);
}
.p-payment .total dd {
  font-weight: bold;
  font-size: 150%;
}
.p-payment .input-form {
  position: relative;
  display: grid;
  justify-items: center;
}
.p-payment .input-form #submit {
  margin-top: 2rem;
}
.p-payment .input-form #submit:disabled {
  opacity: 0.3;
  cursor: default;
}
.p-payment .back-form {
  display: flex;
  justify-content: center;
}
.p-payment .caption {
  font-size: var(--l);
  font-weight: bold;
  justify-content: center;
  text-align: center;
}
@media (min-width: 568px) {
  .p-payment--bank .caption br:nth-of-type(2) {
    display: none;
  }
}

.p-payment .caption strong {
  color: var(--orange);
}
.p-payment .caption small {
  margin-top: 0.4em;
  display: flex;
  font-weight: normal;
  justify-content: center;
}
@media (min-width: 568px) {
  .p-payment--bank .caption small br {
    display: none;
  }
}

.p-payment .check {
  display: grid;
  grid-gap: 2em;
  justify-items: center;
}
.p-payment .select {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}
.p-payment .select button {
  display: grid;
  grid-row-gap: 1rem;
  justify-items: center;
  border: 2px solid var(--gray);
  border-radius: 1rem;
  font-weight: bold;
}
.p-payment .select button:hover {
  border-color: var(--darkgray);
  transition: 100ms;
}
@media (max-width: 567px) {
  .p-payment .select {
    grid-column-gap: 0.5rem;
  }
  .p-payment .select button {
    padding: 0.75rem;
  }
}
@media (min-width: 568px) {
  .p-payment .select {
    grid-column-gap: 1rem;
  }
  .p-payment .select button {
    flex-direction: column;
    padding: 1rem 2rem;
  }
  .p-payment .select button img {
    width: 13em;
  }
  .p-payment .select button span {
    font-size: 120%;
  }
}
.p-payment--bank {
  display: grid;
  grid-gap: 1.5rem;
  justify-items: center;
}
.p-payment--bank .banking_info {
  display: grid;
  grid-row-gap: 1.5rem;
  border: 2px solid var(--gray);
  border-radius: 1rem;
  padding: 1rem;
  justify-items: center;
}
@media (min-width: 568px) {
  .p-payment--bank .banking_info {
    padding-inline: 1.5rem;
  }
}
.p-payment--bank .banking_info .total dl {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-gap: 1.5em;
  align-items: center;
  border-bottom: 1px solid var(--gray);
  padding: 0.5em;
}
.p-payment--bank .banking_info .total dt {
  color: var(--darkgray);
}
.p-payment--bank .banking_info .total dd {
  font-weight: bold;
  font-size: 150%;
}
.p-payment--bank .banking_info .info {
  display: flex;
  align-items: center;
}
@media (max-width: 567px) {
  .p-payment--bank .banking_info .info {
    column-gap: 1rem;
  }
}
@media (min-width: 568px) {
  .p-payment--bank .banking_info .info {
    column-gap: 1.5rem;
  }
}
.p-payment--bank .banking_info .info img {
  width: 5.5rem;
}
.p-payment--bank .banking_info .notes {
  font-size: smaller;
  font-weight: bold;
}
.p-payment--bank .to-mypage a {
  color: var(--blue);
  font-weight: bold;
}

.p-mypage {
  display: grid;
  grid-gap: 3em;
}
.p-mypage .empty {
  color: var(--darkgray);
  text-align: center;
  font-size: var(--l);
}
@media (max-width: 567px) {
  .p-mypage {
    width: var(--content-width);
  }
}
@media (min-width: 568px) {
  .p-mypage {
    width: 40rem;
    margin-inline: auto;
  }
}
.p-mypage-orders {
  display: grid;
  grid-gap: 3em;
}
.p-mypage-orders .summary dl {
  display: grid;
}
@media (max-width: 567px) {
  .p-mypage-orders .summary dl {
    grid-template-columns: max-content 1fr;
  }
}
@media (min-width: 568px) {
  .p-mypage-orders .summary dl {
    grid-template-columns: max-content 1fr max-content;
  }
}
.p-mypage-orders .summary dl dt,
.p-mypage-orders .summary dl dd {
  border: 1px solid var(--gray);
  margin: 0 -1px -1px 0;
  padding: 0.75em;
}
.p-mypage-orders .summary dl dt {
  background: var(--lightgray);
  font-weight: bold;
}
@media (max-width: 567px) {
  .p-mypage-orders .summary dl dt:nth-of-type(1) {
    border-top-left-radius: 0.5em;
  }
}
@media (min-width: 568px) {
  .p-mypage-orders .summary dl dt:nth-of-type(1) {
    border-top-left-radius: 0.5em;
  }
  .p-mypage-orders .summary dl dt:nth-last-of-type(1) {
    border-bottom-left-radius: 0.5em;
  }
}
@media (max-width: 567px) {
  .p-mypage-orders .summary dl dd:nth-of-type(1) {
    border-top-right-radius: 0.5em;
  }
  .p-mypage-orders .summary dl dd:last-child {
    grid-column: 1/3;
    border-bottom-left-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
  }
}
@media (min-width: 568px) {
  .p-mypage-orders .summary dl dd:last-child {
    display: grid;
    align-items: center;
    border-radius: 0 0.5em 0.5em 0;
    grid-column: 3;
    grid-row: 1/6;
    padding: 0 1.25em;
  }
}
.p-mypage-orders .summary[data-status="1"] dl dd.progress {
  color: var(--orange);
  font-weight: bold;
}

.p-mypage-orders .summary .thumbnails {
  margin-top: 0.5em;
  display: grid;
  grid-gap: 0.5em;
}
@media (max-width: 567px) {
  .p-mypage-orders .summary .thumbnails {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 568px) {
  .p-mypage-orders .summary .thumbnails {
    grid-template-columns: repeat(5, 1fr);
  }
}
.p-mypage-orders .summary .thumbnails img {
  border-radius: 0.25em;
}
.p-mypage-orders .summary .to_detail {
  display: flex;
}
@media (max-width: 567px) {
  .p-mypage-orders .summary .to_detail {
    justify-content: end;
  }
}
.p-mypage-order {
  display: grid;
  grid-gap: 2em;
}
.p-mypage-addresses {
  display: grid;
  grid-gap: 1.5em;
}
@media (min-width: 568px) {
  .p-mypage-addresses {
    justify-content: center;
  }
}
.p-mypage-addresses h2 {
  justify-self: center;
  font-size: var(--l);
  font-weight: bold;
}
.p-mypage-addresses > div {
  display: grid;
  align-items: center;
  border: 1px solid var(--gray);
  border-radius: 1em;
  padding: 1.25em;
}
@media (max-width: 567px) {
  .p-mypage-addresses > div {
    grid-gap: 0.5em;
  }
  .p-mypage-addresses > div .delete {
    justify-self: end;
  }
}
@media (min-width: 568px) {
  .p-mypage-addresses > div {
    grid-template-columns: 1fr max-content;
    grid-gap: 2em;
    width: 24rem;
  }
}
.p-mypage-withdraw {
  display: grid;
  grid-gap: 2.5em;
}
@media (min-width: 568px) {
  .p-mypage-withdraw {
    justify-items: center;
  }
}
.p-mypage-withdraw p {
  text-align: center;
  font-size: var(--l);
}
.p-mypage-withdraw ul {
  display: grid;
  grid-gap: 0.25em;
  padding: 1.5em;
  border-radius: 1em;
  background: var(--lightgray);
  font-size: 110%;
}
.p-mypage-withdraw li {
  display: flex;
  font-weight: bold;
}
.p-mypage-withdraw li::before {
  flex-shrink: 0;
  content: "";
  display: block;
  width: 2em;
  aspect-ratio: 1;
  margin-right: 0.25em;
  background: url(../images/icon_caution.svg) no-repeat center center/contain;
}
@media (max-width: 567px) {
  .p-mypage-withdraw li {
    align-items: flex-start;
  }
  .p-mypage-withdraw li::before {
    transform: translateY(-0.25em);
  }
}
@media (min-width: 568px) {
  .p-mypage-withdraw p br {
    display: none;
  }
  .p-mypage-withdraw li {
    align-items: center;
  }
}

.p-entry {
  display: grid;
  grid-row-gap: 1.5rem;
}
body[data-viewmode=authEmail] .p-entry {
  justify-items: center;
}

body[data-viewmode=complete] .p-entry {
  justify-items: center;
}

.p-entry h2 {
  font-size: var(--l);
  font-weight: bold;
  text-align: center;
}
@media (min-width: 568px) {
  body[data-viewmode=authEmail] .p-entry h2 br:nth-of-type(odd) {
    display: none;
  }
}

.p-entry .input-form {
  display: grid;
  grid-row-gap: inherit;
}
@media (min-width: 568px) {
  .p-entry .input-form {
    justify-items: center;
  }
}
.p-entry .input-form dl {
  display: grid;
  border-radius: 1rem;
  background: var(--lightgray);
}
@media (max-width: 567px) {
  .p-entry .input-form dl {
    grid-row-gap: 0.4rem;
    padding: 1.2rem 1rem;
  }
}
@media (min-width: 568px) {
  .p-entry .input-form dl {
    grid-template-columns: max-content 1fr;
    padding: 0.6rem 0.8rem;
  }
}
.p-entry .input-form dl dt,
.p-entry .input-form dl dd {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
@media (min-width: 568px) {
  .p-entry .input-form dl dt,
  .p-entry .input-form dl dd {
    border-bottom: 1px solid var(--gray);
    padding: 0.8rem 0.6rem;
  }
  .p-entry .input-form dl dt:nth-last-of-type(1),
  .p-entry .input-form dl dd:nth-last-of-type(1) {
    border: none;
  }
}
@media (max-width: 567px) {
  .p-entry .input-form dl dt:nth-of-type(n+2) {
    border-top: 1px solid var(--gray);
    margin-top: 1em;
    padding-top: 1em;
  }
}
.p-entry .input-form dl dt small {
  color: var(--orange);
}
.p-entry .input-form dl dd input {
  background: white;
  padding: 0.5em;
  box-sizing: border-box;
}
@media (max-width: 567px) {
  .p-entry .input-form dl dd input {
    font-size: 16px;
  }
  .p-entry .input-form dl dd input[name=email] {
    width: 100%;
  }
}
@media (min-width: 568px) {
  .p-entry .input-form dl dd input[name=name] {
    width: 10em;
  }
  .p-entry .input-form dl dd input[name=email] {
    width: 20em;
  }
  .p-entry .input-form dl dd input[name=password] {
    width: 10em;
  }
}

.p-resetpass {
  display: grid;
  grid-row-gap: 1.5rem;
}
@media (min-width: 568px) {
  .p-resetpass {
    justify-items: center;
  }
}
@media (max-width: 567px) {
  body[data-viewmode=inputOTP] .p-resetpass {
    justify-items: center;
  }
}
.p-resetpass h2 {
  font-size: var(--l);
  font-weight: bold;
  text-align: center;
}
.p-resetpass form {
  display: grid;
}
.p-resetpass form dl {
  display: grid;
  background: var(--lightgray);
  padding: 1rem;
  border-radius: 1rem;
}
@media (max-width: 567px) {
  .p-resetpass form dl {
    grid-row-gap: 0.5rem;
  }
}
@media (min-width: 568px) {
  .p-resetpass form dl {
    grid-auto-flow: column;
    justify-content: center;
    align-items: center;
  }
}
.p-resetpass form dl dt,
.p-resetpass form dl dd {
  display: flex;
  align-items: center;
  column-gap: 0.5em;
}
@media (min-width: 568px) {
  .p-resetpass form dl dt,
  .p-resetpass form dl dd {
    padding: 0.4rem;
  }
}
@media (max-width: 567px) {
  .p-resetpass form dl dt {
    justify-content: center;
  }
}
.p-resetpass form dl dt small {
  color: var(--orange);
}
.p-resetpass form dl dd input {
  background: white;
  padding: 0.5em;
  border-radius: 1px;
}
@media (max-width: 567px) {
  .p-resetpass form dl dd input {
    box-sizing: border-box;
    width: 100%;
  }
}
@media (min-width: 568px) {
  .p-resetpass form dl dd input[name=password] {
    width: 14em;
  }
  .p-resetpass form dl dd input[name=email] {
    width: 20em;
  }
}

.p-notfound {
  display: grid;
  grid-gap: 0.5em;
  justify-items: center;
  margin-top: 6em;
  color: var(--darkgray);
  font-size: var(--l);
  text-align: center;
}
.p-notfound img {
  width: 5em;
}

.p-sessionerror {
  display: grid;
  grid-gap: 0.5em;
  justify-items: center;
  margin-top: 6em;
  color: var(--darkgray);
  font-size: 120%;
  text-align: center;
}
.p-sessionerror img {
  width: 5em;
}
.p-sessionerror a {
  margin-top: 1em;
  font-size: 90%;
}

.p-systemerror {
  display: grid;
  grid-gap: 0.5em;
  justify-items: center;
  margin-top: 6em;
  color: var(--darkgray);
  font-size: var(--l);
  text-align: center;
}
.p-systemerror img {
  width: 5em;
}