@charset "UTF-8";

/* custom properties */
:root {
  /* width */
  --width-page-max: 90rem;
  --width-full: min(100%, var(--width-page-max));

  /* margin */
  --section-margin: 5rem;

  /* color */
  --primary-color: #D53A59;
  --secondary-color: #333;
  --primary-light-color: #FFEFF3;
  --background-color: #F8F5F5;

  /* font-size */
  --font-size-0: .625rem;
  --font-size-1: .75rem;
  --font-size-2: .875rem;
  --font-size-3: 1rem;
  --font-size-4: 1.125rem;
  --font-size-5: 1.25rem;
  --font-size-6: 1.375rem;
  --font-size-7: 1.5rem;

  --font-size-base: var(--font-size-3);
  --font-size-head: var(--font-size-7);
}
@media (max-width: 767px) {
  :root {
    --section-margin: 2.5rem;
  }
}

/* maintenance alert */
.maintenance-alert {
  display: flex;
  justify-content: center;
  padding: 1rem 0;
  background: var(--primary-color);
}
.maintenance-icon {
  width: 1em;
  height: 1em;
  line-height: 1;
}
.maintenance-text {
  margin-left: .5rem;
  color: #FFF;
  font-size: var(--font-size-2);
}

/* base */
html {
  color: var(--secondary-color);
  word-wrap: break-word;
  font-feature-settings: "palt";
  font-size: 100%;
}
body {
  width: 100%;
  height: 100%;
  font-family: "Jost", "Noto Sans JP", sans-serif;
  color: var(--secondary-color);
  line-height: 1.6;
  letter-spacing: .1em;
  -webkit-text-size-adjust: 100%;
}
.ec-role {
  padding: 0;
  color: var(--secondary-color);
}
.ec-role.narrow-contents {
  width: 55rem;
}
.ec-layoutRole {
  background-color: var(--background-color);
}
.mypage .mypage-navi {
  padding: 0;
}
.ec-navlistRole .ec-navlistRole__navlist {
  justify-content: center;
  gap: 0 2.5rem;
  margin: 0;
  margin-top: 4rem;
  color: var(--secondary-color);
  font-size: var(--font-size-2);
  border: none;
}
.ec-navlistRole .ec-navlistRole__item {
  width: auto;
  font-weight: 500;
  border: none;
}
.ec-navlistRole .ec-navlistRole__item a {
  padding: 0;
}
.ec-navlistRole .active a {
  color: var(--primary-color);
}
.ec-cartRole__progress .ec-progress {
  margin-top: 3rem;
}
.mypage .mypage-content,
.cart_page .order-content {
  width: 100%;
  max-width: 70rem;
  margin: 2.5rem 0;
  padding: 4rem 2.5rem;
  color: var(--secondary-color);
  background-color: #FFF;
  border-radius: 2.5rem;
}
.product_page .ec-layoutRole {
  background-color: #FFF;
}
.ec-layoutRole .ec-layoutRole__left {
  width: 15.375rem;
}
.ec-layoutRole .ec-layoutRole__mainWithColumn {
  width: 51.5rem;
}
.ec-layoutRole .ec-layoutRole__contents {
  gap: 3.125rem;
  width: 70rem;
  max-width: unset;
  margin-top: var(--section-margin);
}
.ec-layoutRole__mainBottom {
  width: 100%;
  max-width: 70rem;
  margin-top: var(--section-margin);
  padding: 4rem 2.5rem;
  color: var(--secondary-color);
  background-color: #FFF;
  border-radius: 2.5rem;
}
@media (max-width: 767px) {
  .ec-layoutRole .ec-layoutRole__contents {
    width: 100%;
    margin: 0;
  }
  .ec-layoutRole__mainBottom {
    width: calc(100% - 2rem);
    margin: 2rem auto;
    padding: 2rem;
    border-radius: 1.5rem;
  }
}
#page_product_detail .ec-layoutRole__mainBottom {
  border-top: 2px solid var(--background-color);
}
.ec-searchnavRole {
  padding: 0;
}
.block-insert {
  margin-top: 2.5rem;
  text-align: center;
}
.block-insert a {
  text-decoration: underline;
}


.ec-shelfRole {
  padding: 0;
}
.ec-productRole {
  margin-top: 4rem;
  padding: 0 2.5rem;
  color: var(--secondary-color);
  font-size: var(--font-size-3);
  line-height: 1.6;
}
.ec-productRole__actions {
  margin-top: 1rem;
}
.ec-productRole__actions .ec-formUnit {
  font-size: var(  --font-size-1);
}
.ec-productRole__actions .ec-select,
.ec-productRole__actions .ec-numberInput {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.ec-productRole__actions .ec-select select,
.ec-productRole__actions .ec-numberInput input[type=number] {
  display: initial;
  width: unset;
  max-width: 8.5rem;
  height: unset;
  margin: 0;
  padding: .5rem 1rem;
  color: var(--secondary-color);
  font-size: var(--font-size-3);
  line-height: 1.6;
  background-color: var(--background-color);
  border: none;
}
.content-inner {
  margin-top: 4rem;
  padding: 4rem 2.5rem;
  background-color: #FFF;
  border-radius: 2.5rem;
}
.content-help p {
  font-size: var(--font-size-2);
  line-height: 1.8;
  text-align: justify;
}
.content-help .description {
  font-size: var(--font-size-3);
}

/* component / left navi */
.sidenavi {
  width: 15.375rem;
}
.sidenavi-genre {
  padding: 4rem 0;
  background: var(--background-color);
  border-radius: 2.5rem;
  overflow: hidden;
}
.sidenavi-head {
  margin: 0;
  padding: 0 2.5rem;
  font-size: var(--font-size-3);
  font-weight: 700;
  line-height: 1;
}
.sidenavi-genre__list {
  margin-top: 1rem;
  list-style: none;
}
.sidenavi-genre__list a {
  display: block;
  padding: 0 2.5rem;
  color: var(--secondary-color);
  font-size: var(--font-size-2);
  font-weight: 400;
  line-height: 2.5rem;
}

/* component / heading */
.block-head {
  margin: 0;
  font-size: calc(var(--font-size-1) * 2);
  font-weight: 700;
}
.ec-pageHeader h1,
.ec-pageHeader .h1 {
  margin: 0;
  padding: 0;
  color: var(--secondary-color);
  font-size: calc(var(--font-size-3) * 2);
  font-weight: 400;
  text-align: center;
  border: none;
}
.ec-mypageRole .ec-pageHeader h1,
.ec-mypageRole .ec-pageHeader .h1 {
  margin: 0;
  padding: 0;
  color: var(--secondary-color);
  font-size: calc(var(--font-size-3) * 2);
  font-weight: 400;
  text-align: center;
  border: none;
}

/* component / button */
.button-circle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 50%;
}
.button-square {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  padding: .5rem;
  border: none;
  border-radius: .5rem;
}
.button-rectangle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 2rem;
  line-height: 1;
  border: none;
  border-radius: .5rem;
}
.btn-destructive {
  padding: .5rem;
  background: var(--secondary-color);
}
.btn-edit {
  align-self: stretch;
  background: var(--background-color);
}
.btn-action {
  font-size: var(--font-size-2);
  background: var(--background-color);
}
.btn-disabled {
  opacity: .2;
}


.ec-blockBtn--action,
.ec-inlineBtn--action,
.ec-blockBtn--cancel,
.ec-cartNavi--cancel,
.ec-inlineBtn--cancel {
  height: unset;
  padding: 1rem 0;
  font-size: var(--font-size-2);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .1em;
  border: none;
  border-radius: 1.5rem;
  transition: .2s;
}
.ec-blockBtn--action,
.ec-inlineBtn--action {
  background-color: var(--primary-color);
}
.ec-inlineBtn--action,
.ec-inlineBtn--cancel {
  width: 14rem;
}
.ec-blockBtn--action:hover,
.ec-inlineBtn--action:hover {
  background-color: var(--primary-color);
  border-color: unset;
  opacity: .8;
}
.ec-blockBtn--cancel,
.ec-cartNavi--cancel,
.ec-inlineBtn--cancel {
  color: #FFF;
  background-color: var(--secondary-color);
}
.ec-blockBtn--cancel:hover,
.ec-cartNavi--cancel:hover,
.ec-inlineBtn--cancel:hover {
  color: #FFF;
  background-color: var(--secondary-color);
  opacity: .8;
}
.ec-blockTopBtn {
  width: 3rem;
  height: 3rem;
  background: #FFF;
  border: 1px solid #333;
  border-radius: 50%;
}

/* component / breadcrumb */
.breadcrumb {
  flex-direction: column;
  color: var(--secondary-color);
  font-size: var(--font-size-0);
}
.breadcrumb-list {
  display: flex;
  align-items: center;
  list-style: none;
}
.breadcrumb-list li:not(:first-child)::before {
  content: "";
  display: inline-block;
  width: .375rem;
  height: .375rem;
  margin: 0 .5rem;
  border-top: 1px solid var(--secondary-color);
  border-right: 1px solid var(--secondary-color);
  transform: rotate(45deg);

}
.breadcrumb-list a {
  color: inherit;
}

/* component / modal */
.ec-modal .ec-modal-wrap {
  padding: 4rem 2.5rem;
  border: none;
  border-radius: 2.5rem;
}
.ec-modal .ec-modal-close {
  right: 2rem;
  top: 2rem;
}
.ec-modal .ec-role {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  padding: 0;
  color: var(--secondary-color);
}

/* component / pager */
.ec-pager {
  margin: 5rem 0 4rem;
  padding: 0;
}
.ec-pager .ec-pager__item--active {
  color: var(--primary-color);
  background-color: var(--background-color);
}

/* block / header */
.header {
  background-color: #FFF;
}
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: var(--width-full);
  margin: auto;
  padding: 1.375rem 2.5rem;
  border-bottom: 1px solid var(--background-color);
}
.header-inner h1 {
  margin: 0;
  font-size: 0;
  line-height: 0;
}
.header-navi {
  display: flex;
  align-items: center;
  margin-left: 1rem;
}

@media (max-width: 767px) {
  .header-inner {
    padding: 1rem;
  }
}

/* block / footer */
.footer {
  margin-top: var(--section-margin);
  background-color: #FFF;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: var(--width-full);
  margin: auto;
  padding: 5rem 2.5rem;
}
.footer-navi {
  display: flex;
  flex-direction: column;
  align-items: end;
}
.footer-navi .footer-navi__list {
  display: flex;
  justify-content: end;
  gap: 0 1.5rem;
  margin: 0;
  padding: 0;
  font-size: var(--font-size-0);
  list-style: none;
}
.footer-navi a {
  color: var(--secondary-color);
}
.footer .copyright {
  margin-top: .75rem;
  font-size: .625rem;
}
@media (max-width: 767px) {
  .footer-inner {
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
  }
  .footer-navi {
    align-items: center;
    width: 100%;
    margin-top: 2rem;
  }
  .footer-navi .footer-navi__list {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .footer-navi .footer-navi__list li {
    width: 100%;
  }
  .footer-navi .footer-navi__list a {
    display: block;
    font-size: var(--font-size-1);
    line-height: 2.5rem;
    text-align: center;
  }
}

/* block / feature banner */
.feature-block {
  padding: 0 2.5rem;
}
.feature-block ul {
  display: flex;
  gap: 2.5rem;
  list-style: none;
}
@media (max-width: 767px) {
  .feature-block {
    margin-top: 2rem;
  }
  .feature-block ul {
    flex-direction: column;
  }
}


/* block / category */
.genre-inner {
  margin-top: 2.5rem;
}
.genre-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
}
.genre-list li {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10rem;
  height: 10rem;
}
.genre-list .genre-name {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(var(  --font-size-1) * 2 * 1.4);
  margin-top: .5rem;
  color: var(--secondary-color);
  font-size: var(  --font-size-1);
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  transition: .2s;
}
.genre-list a:hover > .genre-name {
  color: var(--primary-color);
  opacity: .8;
}
@media (max-width: 767px) {
  .genre-inner {
    margin-top: 1rem;
  }
  .genre-list {
    gap: .5rem;
  }
  .genre-list li {
    width: calc((100% - .5rem) / 2);
    height: 100%;
    aspect-ratio: 1 / 1;
  }
}

/* block / search */
.header-search {
  margin-right: 1rem;
  border-bottom: 1px solid var(--secondary-color);
}
.header-search__input {
  display: flex;
  align-items: center;
}
.header-search__input input {
  width: 100%;
  margin: 0;
  padding: .5rem;
  color: var(--secondary-color);
  font-size: var(--font-size-2);
  line-height: 1;
  border: none;
}
.header-search__input input:focus {
  outline: none;
}
.header-search__input .search-button {
  flex: 1 0 auto;
  padding: 0 .5rem;
  width: 2rem;
  background: none;
  border: none;
}

/* block / cart */
.cart-menu {
  margin-right: 1rem;
}
.ec-cartNavi {
  align-items: center;
  gap: 0 1rem;
  width: unset;
  min-width: unset;
  height: unset;
  padding: 0;
  background: none;
  border-radius: unset;
}
.cart-menu__item.menu-price {
  display: flex;
  align-items: center;
  padding: .5rem;
  color: #FFF;
  font-size: var(--font-size-1);
  line-height: 1;
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: 1rem;
}
.cart-menu__item.menu-price .menu-item__number {
  display: flex;
}
.cart-menu__item.menu-price .menu-itemicon::before {
  content: "";
  width: 1rem;
  height: .75rem;
  margin-right: .25rem;
  background: url(../img/common/icon_basket.svg) no-repeat center;
}
.cart-menu__item.menu-price .menu-item__number::after {
  content: "｜";
  font-size: var(--font-size-1);
}
@media (max-width: 767px) {
  .cart-menu__item.menu-basket {
    display: flex;
    width: 2.5rem;
    height: 2.5rem;
    aspect-ratio: 1 / 1;
    position: relative;
    font-size: 0;
    background-color: var(--background-color);
    border-radius: .5rem;
  }
  .cart-menu__item.menu-basket a {
    display: block;
    width: 100%;
    padding: .5rem;
  }
  .cart-menu__item.menu-basket img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .cart-menu__item.menu-basket .menu-item__number {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.25rem;
    height: 1rem;
    position: absolute;
    top: -.25rem;
    right: -.25rem;
    color: #FFF;
    font-size: var(--font-size-0);
    line-height: 1;
    letter-spacing: 0;
    background-color: var(--primary-color);
    border-radius: .5rem;
  }
}
.ec-cartNaviNull,
.ec-cartNaviIsset {
  right: 50%;
  transform: translateX(50%);
  padding: 1rem;
  background-color: var(--background-color);
}
.ec-cartNaviNull .ec-cartNaviNull__message {
  padding: unset;
  color: var(--primary-color);
  font-size: var(--font-size-2);
  font-weight: 500;
  border: none;
  background-color: unset;
}
.ec-cartNaviIsset .ec-cartNaviIsset__cart {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}
.ec-cartNaviIsset .ec-cartNaviIsset__cartContent {
  float: none;
  width: auto;
  padding: 0;
}
.ec-cartNaviIsset .ec-cartNaviIsset__cartContentTitle {
  font-size: var(--font-size-2);
  font-weight: 500;
  line-height: 1;
}
.ec-cartNaviIsset .ec-cartNaviIsset__cartContentDetail {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  line-height: 1;
}
.ec-cartNaviIsset .ec-cartNaviIsset__cartContentPrice {
  color: var(--primary-color);
  font-size: var(--font-size-3);
  font-weight: 500;
}
.ec-cartNaviIsset .ec-cartNaviIsset__cartContentNumber {
  font-size: var(--font-size-1);
}

/* block / member */
.ec-memberNavi {
  display: flex;
  align-items: center;
  gap: 0 1rem;
}
.member-menu__item.menu-login {
  margin-left: .5rem;
}
.member-menu__itemlink {
  display: flex;
  align-items: center;
  color: var(--secondary-color);
  font-size: var(--font-size-1);
  font-weight: 500;
  line-height: 1;
}
.member-menu__item.menu-mypage a {
  display: block;
  padding: .5rem;
  line-height: 1;
  border: 1px solid var(--secondary-color);
  border-radius: 1rem;
}
.member-menu__item .menu-itemicon::before {
  content: "";
  width: 1rem;
  height: .75rem;
  margin-right: .25rem;
  background-repeat: no-repeat;
  background-position: center;
}
.member-menu__item.menu-login .member-menu__itemlink {
  color: var(--primary-color);
}
.member-menu__item.menu-favorite .menu-itemicon::before {
  background-image: url(../img/common/icon_bookmark.svg);
}
.member-menu__item.menu-mypage .menu-itemicon::before {
  background-image: url(../img/common/icon_user.svg);
}
@media (max-width: 767px) {
  .ec-memberNavi {
    gap: 0 .5rem;
  }
  .member-menu__item {
    display: flex;
    width: 2.5rem;
    height: 2.5rem;
    aspect-ratio: 1 / 1;
    position: relative;
    font-size: 0;
    background-color: var(--background-color);
    border-radius: .5rem;
  }
  .member-menu__item a {
    display: block;
    width: 100%;
    padding: .6rem;
  }
  .member-menu__item.menu-favorite a {
    padding: .6rem;
  }
  .member-menu__item.menu-mypage a {
    border: none;
    border-radius: unset;
  }
  .member-menu__item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}


/* main / front page */
.top-mainvisual {
  display: flex;
  justify-content: end;
  align-items: center;
  width: 100vw;
  margin-left: calc(((100vw - 70rem) / 2) * -1);
  background-color: #FFF;
  border-radius: 0 0 2.5rem 0;
  overflow: hidden;
}
.top-mainvisual a {
  margin-top: 1.5rem;
  width: 14rem;
}
.top-mv__head {
  color: var(--secondary-color);
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .16em;
}
.top-mv__description {
  margin-top: 1rem;
  color: var(--secondary-color);
  font-size: var(--font-size-2);
}
.top-mv__image {
  width: 48rem;
  margin-left: 2rem;
}
@media (max-width: 767px) {
  .top-mv {
    flex-direction: column-reverse;
    margin: 0;
    padding: 0;
    background: none;
  }
  .top-mv a {
    width: 100%;
  }
  .top-mv__image {
    width: 100%;
  }
}

/* contents / help */
.content-help__list {
  list-style: none;
}
.content-help__list li {
  font-size: var(--font-size-2);
  line-height: 1.8;
  text-align: justify;
}
.content-help__list li:not(:first-child) {
  margin-top: 2rem;
}
.content-help__list dt {
  font-weight: 500;
}
.content-help__list dd {
  margin-top: 1rem;
}
.np_banner {
  margin-top: 1rem;
}
.np_banner img {
  width: 468px;
  height: auto;
}
.np_banner_text {
  margin-top: 1rem;
}
.content-help__guide {
  list-style: none;
  margin-top: 2rem;
}
.content-help__guide li {
  display: flex;
  gap: 0 2.5rem;
}
.content-help__guide li:not(:first-child) {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 2px solid var(--background-color);
}
.content-help__guide dl {
  flex: 1;
}
.content-help__guide dt {
  font-size: calc(var(--font-size-1) * 2);
  font-weight: 700;
  letter-spacing: .1em;
}
.content-help__guide dt:not(:first-of-type) {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 2px solid var(--background-color);
}
.content-help__guide dd {
  margin-top: 1rem;
  font-size: var(--font-size-2);
  line-height: 1.8;
  text-align: justify;
}
.content-help__guide .notes {
  display: block;
  margin-top: .5rem;
  font-size: var(--font-size-1);
}
.content-help__guide .figure {
  width: 20rem;
  padding: 2px;
}
.content-help__guide .figure-child:not(:first-child) {
  margin-top: 1rem;
}
.content-help__guide .figure-child .caption {
  padding-bottom: .5rem;
  font-size: var(--font-size-2);
  line-height: 1.4;
}

/* contents / products */
.ec-topicpath {
  padding: 0;
  letter-spacing: unset;
}
.ec-topicpath .ec-topicpath__item,
.ec-topicpath .ec-topicpath__divider,
.ec-topicpath .ec-topicpath__item--active {
  color: var(--secondary-color);
  font-size: calc(var(--font-size-1) * 2);
  font-weight: 700;
  letter-spacing: .1em;
}
.ec-searchnavRole .ec-searchnavRole__infos {
  align-items: center;
  margin: 0;
  margin-top: 1rem;
  padding: 0;
  border: none;
}
.ec-searchnavRole .ec-select {
  display: flex;
  gap: 1rem;
  margin: 0;
}
.ec-searchnavRole .ec-select select {
  padding: .5rem 1rem;
  color: var(--secondary-color);
  font-size: var(--font-size-3);
  background-color: var(--background-color);
  border: none;
}
.ec-shelfGrid {
  gap: 4rem 2.5rem;
  margin: 0;
  margin-top: 2.5rem;
}
.ec-shelfGrid .ec-shelfGrid__item {
  justify-content: space-between;
  width: calc((100% - 7.5rem) / 4);
  margin: 0;
  padding: 0;
  color: var(--secondary-color);
}
.ec-shelfGrid .ec-shelfGrid__item:nth-child(odd),
.ec-shelfGrid .ec-shelfGrid__item:nth-child(even) {
  padding: 0;
}
.ec-shelfGrid .ec-shelfGrid__item-image {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 15.5625rem;
  margin: 0;
  overflow: hidden;
}
.ec-shelfGrid__item-detail {
  margin-top: 1rem;
  line-height: 1.6;
}
.ec-shelfGrid__item-detail dt {
  min-height: 3.2rem;
  font-size: var(--font-size-3);
  font-weight: 700;
}
.ec-shelfGrid__item-detail dd {
  margin: 0;
  font-size: var(--font-size-1);
}
.ec-shelfGrid__item-detail dd:first-of-type {
  margin-top: .5rem;
}
.ec-shelfGrid .price02-default {
  margin-top: .5rem;
  font-size: var(--font-size-4);
  font-weight: 500;
}
.ec-shelfGrid .price02-default .class-name,
.ec-shelfGrid .price02-default .price-tax {
  display: block;
  font-size: var(--font-size-0);
  font-weight: 400;
}
.ec-shelfGrid .ec-shelfGrid__item .ec-productRole__btn {
  margin: 0;
  margin-top: 1rem;
}

/* contents / detail */
.ec-productRole .product-image {
  width: 22.5rem;
}
.ec-productRole .product-profile {
  width: 38.5rem;
}
.ec-productRole .ec-productRole__profile {
  margin: 0;
}
.ec-productRole .ec-productRole__title .ec-headingTitle {
  margin: 0;
  color: var(--secondary-color);
  font-size: calc(var(--font-size-3) * 2);
  font-weight: 700;
}
.ec-productRole .ec-productRole__description {
  margin: 0;
  margin-top: 1.5rem;
  font-size: var(--font-size-3);
  line-height: 1.6;
  text-align: justify;
}
.ec-productRole .ec-productRole__data {
  margin-top: 1.5rem;
  list-style: none;
}
.ec-productRole .ec-productRole__data li:not(:first-child) {
  margin-top: .5rem;
}
.ec-productRole .ec-productRole__data dt {
  display: inline-block;
  margin: 0;
  font-weight: 500;
}
.ec-productRole .ec-productRole__data dd {
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  margin-left: 1em;
}
.ec-productRole .ec-productRole__data a {
  display: inline-block;
  padding: .25rem 1rem;
  color: #FFF;
  font-size: var(--font-size-1);
  line-height: 1;
  background: var(--primary-color);
  border-radius: 1rem;
}
.ec-productRole .ec-productRole__price {
  margin-top: 1.5rem;
  padding: 0;
  border: none;
}
.ec-price {
  color: var(--primary-color);
}
.ec-price .class-name {
  margin-right: .5rem;
  color: var(--secondary-color);
  font-size: var(--font-size-1);
}
.ec-price .ec-price__price {
  padding: 0;
  font-size: calc(var(--font-size-3) * 2);
}
.ec-price .ec-price__tax {
  font-size: var(--font-size-1);
}
.ec-productRole .ec-productRole__actions {
  margin-top: 2.5rem;
  padding: 0;
}
.ec-productRole__actions .ec-select,
.ec-productRole__actions .ec-numberInput {
  gap: 0 .5rem;
  justify-content: flex-start;
}
.ec-productRole .ec-productRole__btn {
  width: 20rem;
  min-width: unset;
  margin: 0;
  margin-top: 1rem;
}

.ec-grid2 {
  gap: 4rem;
}
.ec-sliderItemRole,
.ec-productRole__btn {
  margin: 0;
  padding: 0;
}

/* mypage */
.mypage-content .item-count {
  font-size: var(--font-size-2);
  line-height: 1;
}
.mypage-content .content-detail {
  margin-top: 2.5rem;
}
.mypage-content__actions {
  margin-top: 2rem;
}
/* mypage / favorite */
.mypage-content .detail-favorite__list {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem 2.5rem;
  padding: 0;
  list-style: none;
}
.mypage-content .detail-favorite__item {
  width: calc((100% - 10rem) / 5);
  position: relative;
}
.mypage-content a {
  color: inherit;
}
.mypage-content .detail-favorite__item .btn-destructive {
  position: absolute;
  top: .5rem;
  right: .5rem;
  z-index: 1;
}
/* mypage / delivery */
.mypage-content .detail-delivery__list {
  list-style: none;
}
.mypage-content .detail-delivery__item {
  display: flex;
  gap: 0 2rem;
  align-items: center;
  padding: 1rem;
  border-top: 2px solid var(--background-color);
}
.mypage-content .detail-delivery__address {
  flex: 1 0 0;
  font-size: var(--font-size-2);
  line-height: 1.6;
}
.mypage-content .detail-delivery__address dt {
  font-weight: 400;
}
/* mypage / history */
.mypage-content .detail-history__contents {
  display: flex;
  gap: 0 2rem;
  padding: 2rem 1rem;
  border-top: 2px solid var(--background-color);
}
.mypage-content .detail-history__header {
  flex: 2 0 0;
}
.mypage-content .detail-history__header .order-date {
  font-size: var(--font-size-3);
  font-weight: 500;
  line-height: 1;
}
.mypage-content .detail-history__header .order-detail {
  font-size: var(--font-size-2);
  line-height: 1;
}
.mypage-content .detail-history__header .order-detail:not(:first-child) {
  margin-top: 1rem;
}
.mypage-content .detail-history__header .order-detail dt,
.mypage-content .detail-history__header .order-detail dd {
  display: inline-block;
}
.mypage-content .detail-history__itemlist {
  flex: 3 0 0;
  list-style: none;
}
.mypage-content .detail-history__itemlist .order-item:not(:first-child) {
  margin-top: .5rem;
}
.mypage-content .detail-history__itemlist .item-detail {
  display: flex;
  justify-content: space-between;
}
.mypage-content .detail-history__header .order-payment {
  margin-top: 2rem;
  padding: 2rem;
  position: sticky;
  top: 2rem;
  background: var(--background-color);
  border-radius: .5rem;
}
.mypage-content .detail-history__header .payment-detail {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-3);
  line-height: 1;
}
.mypage-content .detail-history__header .payment-detail:not(:first-child) {
  margin-top: 1rem;
}
.mypage-content .detail-history__header .payment-detail dt {
  font-weight: 400;
}
.mypage-content .detail-history__header .payment-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: 700;
  line-height: 1;
}
.mypage-content .detail-history__header .payment-total dt {
  font-size: var(--font-size-2);
}
.mypage-content .detail-history__header .payment-total dd {
  color: var(--primary-color);
  font-size: var(--font-size-7);
}
.mypage-content .detail-history__header .tax-label {
  font-size: var(--font-size-1);
}
.mypage-content .order-notes {
  margin-top: 1rem;
  color: var(--primary-color);
  font-size: var(--font-size-1);
  font-weight: 400;
  line-height: 1.6;
}
.mypage-content .detail-history__information {
  flex: 3 0 0;
}
.mypage-content .detail-history__information .info-container:not(:first-child) {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px solid var(--background-color);
}
.mypage-content .detail-history__information .info-heading {
  margin: 0;
  font-size: var(--font-size-2);
  line-height: 1;
}
.mypage-content .detail-history__information .info-text {
  margin-top: .5rem;
  font-size: var(--font-size-2);
}
.mypage-content .detail-history__information .info-itemlist {
  margin-top: 1rem;
  list-style: none;
}
.mypage-content .detail-history__information .info-item__detail {
  display: flex;
  padding: .5rem 1rem;
  font-size: var(--font-size-2);
  line-height: 1.6;
}
.mypage-content .detail-history__information .info-item__detail dt {
  flex: 1 0 0;
}
.mypage-content .detail-history__information .info-item__detail dd {
  flex: 4 0 0;
}
.mypage-content .detail-history__information .order-item {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1rem;
}
.mypage-content .detail-history__information .order-item:not(:first-child) {
  border-top: 2px dashed var(--background-color);
}
.mypage-content .detail-history__information .order-item__image {
  width: 5rem;
}
.mypage-content .detail-history__information .order-mail {
  margin-top: .5rem;
}
.mypage-content .detail-history__information .mail-senttime {
  font-size: var(--font-size-2);
}
.mypage-content .detail-history__information .mail-link {
  color: var(--primary-color);
  font-size: var(--font-size-2);
  text-decoration: underline;
  cursor: pointer;
}
.mypage-content .detail-history__information .mail-body {
  display: none;
  margin-top: 2rem;
  font-size: var(--font-size-2);
  line-height: 1.6;
}
.mypage-content .detail-history__information .mail-close {
  margin-top: 2rem;
  color: var(--primary-color);
  font-size: var(--font-size-2);
  text-decoration: underline;
  cursor: pointer;
}
.mypage-content .withdraw-heading {
  margin-top: 1rem;
  color: var(--primary-color);
  font-size: var(--font-size-4);
  font-weight: 500;
  text-align: center;
}
.mypage-content .withdraw-text {
  margin-top: 1rem;
  font-size: var(--font-size-2);
  line-height: 1.6;
  text-align: center;
}

/* cart */
.cart_page .content-order {
  width: 100%;
}
.cart_page .content-order .total-price {
  font-size: var(--font-size-3);
  line-height: 1;
  text-align: center;
}
.cart_page .content-order .price-number {
  color: var(--primary-color);
  font-size: var(--font-size-5);
  font-weight: 500;
}
.cart_page .content-order .cart-error {
  margin-top: 1rem;
  color: var(--primary-color);
  font-size: var(--font-size-2);
  text-align: center;
}
.cart_page .content-order .cart-error__block {
  margin-top: 2rem;
  padding: .5rem 1rem;
  color: #FFF;
  font-size: var(--font-size-2);
  line-height: 1;
  text-align: center;
  background: var(--primary-color);
}
.cart_page .content-order .cart-error__block::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: .5rem;
  background: url(../icon/exclamation-white.svg) no-repeat;
  vertical-align: top;
}
.cart_page .content-order .content-detail {
  margin-top: 2.5rem;
}
.cart_page .content-order .detail-order__list {
  list-style: none;
}
.cart_page .content-order .detail-order__item {
  display: flex;
  gap: 0 2rem;
  align-items: center;
  padding: 1rem;
  border-top: 2px solid var(--background-color);
}
.cart_page .content-order .order-item__item {
  display: flex;
  align-items: center;
  flex: 1 0 0;
  gap: 2rem;
}
.cart_page .content-order .order-item__img {
  width: 5rem;
}
.cart_page .content-order .order-item__quantity,
.cart_page .content-order .order-item__subtotal {
  display: flex;
  align-items: center;
  align-self: end;
}
.cart_page .content-order .order-item__quantity dt,
.cart_page .content-order .order-item__subtotal dt {
  font-size: var(--font-size-1);
  font-weight: 500;
  line-height: 1;
}
.cart_page .content-order .order-item__quantity dd,
.cart_page .content-order .order-item__subtotal dd {
  margin-left: 1rem;
}
.cart_page .content-order .order-item__quantity dd {
  display: flex;
  align-items: center;
  line-height: 1;
  border: 1px solid #ddd;
  border-radius: .5rem;
}
.cart_page .content-order .order-item__subtotal dd {
  min-width: 6rem;
  font-size: var(--font-size-4);
  line-height: 2.25rem;
  text-align: right;
}
.cart_page .content-order .order-item__quantity .change-quantity {
  padding: .5rem;
  font-size: var(--font-size-4);
  font-weight: 500;
}
.cart_page .content-order .order-item__quantity .current-quantity {
  align-self: stretch;
  align-content: center;
  width: 5rem;
  text-align: center;
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
}
.cart_page .content-order .total-amount {
  display: flex;
  justify-content: center;
  align-items: baseline;
  padding: 1.5rem;
  position: sticky;
  bottom: 0;
  font-weight: 700;
  line-height: 1;
  background: rgb(255 255 255 / 80%);
  border-top: 2px solid var(--background-color);
}
.cart_page .content-order .total-amount dt {
  font-size: var(--font-size-3);
}
.cart_page .content-order .total-amount dd {
  margin-left: 2rem;
  color: var(--primary-color);
  font-size: var(--font-size-7);
}
.cart_page .content-order .total-amount .tax-label {
  font-size: var(--font-size-1);
}

/* shopping */
.order-content .order-detail__information {
  padding: 2rem 1rem;
  border-top: 2px solid var(--background-color);
}
.order-content .order-detail__information .info-container:not(:first-child) {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px solid var(--background-color);
}
.order-content .order-detail__information .info-heading {
  margin: 0;
  font-size: var(--font-size-2);
  line-height: 1;
}
.order-content .order-detail__information .info-user {
  display: flex;
  gap: 0 2rem;
  align-items: center;
  padding: 1rem;
}
.order-content .order-detail__information .info-user__detail {
  flex: 1 0 0;
  font-size: var(--font-size-2);
  line-height: 1.6;
}
.order-content .order-detail__information .info-user__detail dt {
  font-weight: 400;
}
.order-content .order-detail__information .info-itemlist {
  margin-top: 1rem;
  list-style: none;
}
.order-content .order-detail__information .order-item {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1rem;
}
.order-content .order-detail__information .order-item:not(:first-child) {
  border-top: 2px dashed var(--background-color);
}
.order-content .order-detail__information .order-item__image {
  width: 5rem;
}
.order-content .order-detail__information .info-item__detail {
  padding: 1rem;
  font-size: var(--font-size-2);
}
.order-content .order-detail__information .info-item__detail dt {
  flex: 1 0 0;
}
.order-content .order-detail__information .info-item__detail dd {
  flex: 4 0 0;
}
.order-content .order-detail__information .info-item__detail .detail-edit {
  display: flex;
  gap: 0 2rem;
  align-items: center;
  padding: 1rem;
  line-height: 1.6;
}
.order-content .order-detail__information .info-item__detail .detail-inner {
  flex: 1 0 0;
}
.order-content .order-detail__information .info-item__detail .delivery-select {
  width: 20%;
  padding: 1rem;
}
.order-content__actions {
  margin-top: 2rem;
}
.order-content .order-detail__information .info-payment {
  padding: 1rem;
}
.order-content .order-detail__information .info-payment label {
  font-size: var(--font-size-2);
}
.order-content .order-detail__information .form-check:not(:first-child) {
  margin-top: 1rem;
}

/* zeusクレジット */
#zeus_payment_input {
  margin-top: 2rem;
}

/* favorite */
.mypage-content .ec-favoriteRole__item-image {
  display: flex;
  align-items: center;
  width: 100%;
  height: 15.5625rem;
  margin: 0;
  overflow: hidden;
}
.mypage-content .ec-favoriteRole__item-detail {
  margin-top: 1rem;
  line-height: 1.6;
}
.mypage-content .ec-favoriteRole__item-detail dt {
  font-size: var(--font-size-3);
  font-weight: 700;
}
.mypage-content .ec-favoriteRole__item-detail dd {
  margin: 0;
  font-size: var(--font-size-1);
}
.mypage-content .ec-favoriteRole__item-detail dd:first-of-type {
  margin-top: .5rem;
}
.mypage-content .ec-favoriteRole__itemPrice {
  margin-top: .5rem;
  font-size: var(--font-size-4);
  font-weight: 500;
}
.mypage-content .ec-favoriteRole__itemPrice .price-tax {
  display: block;
  font-size: var(--font-size-0);
  font-weight: 400;
}

/* cart */
.ec-cartRole {
  margin-top: 4rem;
  padding: 0;
  color: var(--secondary-color);
}
.ec-progress {
  margin: 0 auto;
}
.ec-progress .ec-progress__number {
  background-color: var(--secondary-color);
}
.ec-progress .ec-progress__item:after {
  background-color: var(--secondary-color);
}
.ec-progress .is-complete .ec-progress__number {
  background-color: var(--primary-color);
}
.ec-progress .is-complete .ec-progress__label {
  color: var(--primary-color);
}
.ec-cartRole .ec-cartRole__totalText {
  margin: 0;
  margin-top: 4rem;
}
.ec-cartRole .ec-cartRole__totalAmount {
  color: var(--primary-color);
}

/* entry */
.form-container dl {
  display: flex;
  align-items: baseline;
}
.form-container dl:not(:first-child) {
  margin-top: 2.5rem;
}
.form-container dt {
  flex: 1 0 0;
  font-size: var(--font-size-1);
  font-weight: 500;
}
.form-container .required-field dt::after {
  content: '必須';
  display: inline-block;
  margin-left: .5rem;
  padding: 0 .5rem;
  color: #FFF;
  font-size: var(--font-size-0);
  font-weight: 400;
  line-height: 1rem;
  background-color: var(--primary-color);
  border-radius: .5rem;
  vertical-align: top;
}
.form-container dd {
  flex: 2.33 0 0;
}
.form-container .separate-form {
  display: flex;
  gap: 1.5rem;
}
.form-container .separate-form:not(:first-of-type) {
  margin-top: 2.5rem;
}
.form-container .half-field {
  flex: 0 1 50%;
}
.form-container .postal-field {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.form-container .postal-field a {
  color: var(--secondary-color);
}
.form-container .error {
  display: inline-block;
  margin-top: .5rem;
  color: var(--primary-color);
  font-size: var(--font-size-1);
  line-height: 1.6;
}
.form-container .field-notes {
  display: inline-block;
  margin-top: .5rem;
  color: var(--secondary-color);
  font-size: var(--font-size-1);
  line-height: 1.6;
}
.form-container .confirm-text {
  font-size: var(--font-size-2);
  line-height: 1.6;
  text-align: center;
}
.form-container .complete-head {
  margin: 0;
  font-size: var(--font-size-head);
  font-weight: 500;
  text-align: center;
}
.form-container .complete-text {
  margin-top: 2rem;
  font-size: var(--font-size-2);
  line-height: 1.6;
}

/* login */
.content-login {
  display: flex;
  gap: 5rem;
}
.content-login.only-login {
  width: calc(60% - 3rem);
  margin: auto;
}
.block-login {
  flex: 3 0 0;
}
.block-guest {
  flex: 2 0 0;
  position: relative;
}
.block-guest::before {
  content: '';
  position: absolute;
  top: 0;
  left: -2.5rem;
  width: 1px;
  height: 100%;
  background-color: #CCC;
}
.ec-login,
.ec-guest {
  display: block;
  margin: 0;
  padding: 0;
  background: initial;
}

/* form parts */
.form-unit__head {
  font-size: var(--font-size-3);
  text-align: center;
}
.form-unit__input .placeholder {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  color: #999;
  font-size: var(--font-size-2);
  line-height: 1;
  transition: all .2s;
  cursor: text;
}
.form-unit__input {
  position: relative;
}
.form-unit__input:not(:first-of-type) {
  margin-top: 2.5rem;
}
.form-unit__input input:focus + .placeholder,
.form-unit__input .placeholder.entered {
  top: -1rem;
  left: 0;
  color: var(--secondary-color);
  font-size: var(--font-size-0);
  font-weight: 500;
}
.form-unit__choice {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}
.form-unit__actions {
  width: min(100%, 18rem);
  margin: 2.5rem auto 0;
}
.form-unit__actions button:not(:first-child) {
  margin-top: 1rem;
}
.form-unit__actions a {
  margin-top: 1rem;
}
.form-unit__actions .text {
  display: block;
  margin-top: 1rem;
  font-size: var(--font-size-1);
  line-height: 1.6;
  text-align: center;
}
.agreement_link,
.forgot-login__link {
  display: block;
  margin-top: 2rem;
  color: var(--primary-color);
  font-size: var(--font-size-1);
  text-align: center;
  text-decoration: underline;
}


.form-error {
  display: block;
  margin-top: 2rem;
  color: var(--primary-color);
  font-size: var(--font-size-1);
  line-height: 1.6;
  text-align: center;
}
input[type=text],
input[type=email],
input[type=tel],
input[type=number],
input[type=password],
select.form-select,
textarea.form-control {
  width: 100%;
  margin: 0;
  padding: .5rem 1rem;
  color: var(--secondary-color);
  font-size: var(--font-size-3);
  line-height: 1.6;
  background-color: var(--background-color);
  border: 1px solid var(--background-color);
}
textarea.form-control {
  resize: vertical;
  field-sizing: content;
  min-height: calc(5lh + 1rem);
  max-height: calc(15lh + 1rem);
}
.form-control {
  display: block;
  width: 100%;
  background-color: var(--background-color);
}
.form-control:focus {
  background-color: #FFF;
  outline: 0;
  box-shadow: none;
  border-color: var(--primary-color);
  transition: unset;
}
input[type=checkbox],
input[type=radio] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
input[type=checkbox] + label,
input[type=radio] + label {
  display: block;
  position: relative;
  padding-left: 2rem;
  color: var(--secondary-color);
  font-size: var(--font-size-1);
  cursor: pointer;
}
input[type="checkbox"] + label:before {
  content: '';
  display: block;
  width: 1rem;
  height: 1rem;
  border: 1px solid #999;
  position: absolute;
  left: 0;
  top: 0;
  transition: all .12s, border-color .08s;
}
input[type="checkbox"]:checked + label:before {
  width: .625rem;
  top: -.25rem;
  left: .25rem;
  border-radius: 0;
  border-color: var(--primary-color);
  border-top-color: transparent;
  border-left-color: transparent;
  transform: rotate(45deg);
}
input[type="radio"] + label:before {
  content: '';
  display: block;
  width: 1rem;
  height: 1rem;
  border: 1px solid #999;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 0;
  transition: all .12s, border-color .08s;
}
input[type="radio"]:checked + label:before {
  border-width: .25rem;
  border-color: var(--primary-color);
}

/* reset */
a {
  color: var(--primary-color);
  transition: .2s;
}
a:hover {
  color: var(--primary-color);
  opacity: .8;
}
button:hover {
  color: var(--primary-color);
  opacity: .8;
}
ol, ul, dl, dt, dd {
  margin: 0;
  padding: 0;
}
.btn-check:checked + .ec-blockBtn--action:focus,
.btn-check:active + .ec-blockBtn--action:focus,
.ec-blockBtn--action:active:focus,
.ec-blockBtn--action.active:focus,
.show > .ec-blockBtn--action.dropdown-toggle:focus {
  box-shadow: unset;
}
.btn-check:checked + .ec-blockBtn--cancel:focus,
.btn-check:active + .ec-blockBtn--cancel:focus,
.ec-blockBtn--cancel:active:focus,
.ec-blockBtn--cancel.active:focus,
.show > .ec-blockBtn--cancel.dropdown-toggle:focus {
  box-shadow: unset;
}
.btn-check:checked + .ec-inlineBtn--action:focus,
.btn-check:active + .ec-inlineBtn--action:focus,
.ec-inlineBtn--action:active:focus,
.ec-inlineBtn--action.active:focus,
.show > .ec-inlineBtn--action.dropdown-toggle:focus {
  box-shadow: unset;
}
.ec-blockBtn--action:focus,
.ec-blockBtn--action.focus,
.ec-blockBtn--action:active:focus,
.ec-blockBtn--action:active.focus,
.ec-blockBtn--action.active:focus,
.ec-blockBtn--action.active.focus {
  outline: none;
}
.ec-blockBtn--cancel:focus,
.ec-blockBtn--cancel.focus,
.ec-blockBtn--cancel:active:focus,
.ec-blockBtn--cancel:active.focus,
.ec-blockBtn--cancel.active:focus,
.ec-blockBtn--cancel.active.focus {
  outline: none;
}
.btn-check:focus + .ec-blockBtn--action,
.ec-blockBtn--action:focus {
  background-color: var(--primary-color);
  border-color: unset;
  box-shadow: none;
}
.btn-check:focus + .ec-blockBtn--cancel,
.ec-blockBtn--cancel:focus {
  background-color: var(--secondary-color);
  border-color: unset;
  box-shadow: none;
}
.ec-blockBtn--cancel:disabled,
.ec-blockBtn--cancel.disabled {
  color: var(--secondary-color);
  background-color: #D9D9D9;
  border-color: #D9D9D9;
}

/* common parts */
.external-link {
  color: var(--secondary-color);
  font-size: var(--font-size-1);
  text-align: center;
}
.external-link::after {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: url(../icon/external-link.svg) no-repeat;
}

/* utility */
[data-visible="false"] {
  display: none;
}
[data-device="pc"],
[data-device="mobile"] {
  display: none;
}
@media (min-width: 768px) {
  [data-device="pc"].device-only {
    display: block;
  }
}
@media (max-width: 767px) {
  [data-device="mobile"].device-only {
    display: block;
  }
}

.primary-text {
  color: var(--primary-color);
}
.text-underline {
  text-decoration: underline;
}