@import url(https://fonts.googleapis.com/icon?family=Material+Icons);

body {
  font-family: "dnp-shuei-gothic-gin-std", sans-serif;
  margin: 0;
  padding: 0;
  font-size: 16px;
  color: #241916;
  line-height: 1.5;
}

p {
  margin-top: 1rem;
}

a {
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

small {
  font-size: 0.8rem;
}

img {
  image-rendering: auto;
  /* ブラウザに高品質な補間を任せる */
  image-rendering: smooth;
  /* Chromeでは無視されるが意図は明確 */
  -ms-interpolation-mode: bicubic;
  /* IE用：高品質補間（古い） */
}

/* ---------- */

.moreBtn {
  padding: 16px 24px;
  text-align: left;
  position: relative;
  border: solid 1px #808080;
  border-radius: 9999px;
  display: block;
  text-decoration: none;
  cursor: pointer;
  width: 190px;
  font-size: 0.9rem;
  font-family: "rl-limo", sans-serif;
}

.moreBtn:hover {
  text-decoration: underline;
}

.returnBtn {
  font-size: 1rem;
  text-decoration: underline;
}

.returnBtn:hover {
  text-decoration: none;
}

.secBtn {
  padding: 16px 24px;
  width: 100%;
  border: solid 1px #808080;
  border-radius: 9999px;
  text-decoration: none;
  text-align: center;
  margin-top: 24px;
}

.secBtn:hover {
  background-color: #808080;
  color: #fff;
}

.twocBlock {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: end;
}

.twocBlock>div {
  width: 49%;
}

label {
  display: block;
  margin-top: 1em;
}

.moreBtn::after {
  content: 'arrow_forward';
  font-family: 'Material Icons';
  position: absolute;
  right: 0.5em;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
  pointer-events: none;
  /* 矢印クリック無効 */
}

.req {
  color: tomato;
  font-weight: bold;
}

.container {
  max-width: 860px;
  margin: 1em auto 0;
  padding: 1em;
  background: #fff;
  border-radius: 8px;
}

.errMsg {
  border: 1px solid tomato;
  padding: 10px;
  color: tomato;
  border-radius: 5px;
  background-color: mistyrose;
  margin-top: 1rem;
}

.msg {
  border: 1px solid cadetblue;
  padding: 10px;
  color: cadetblue;
  border-radius: 5px;
  background-color: azure;
  margin-top: 1rem;
}

.c_msg {
  color: tomato;
  font-weight: bold;
}

.nomalBtn1 {
  border: solid 1px #241916;
  color: #241916;
  padding: 8px 46px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  color: #241916;
}

.nomalBtn1:hover {
  background-color: #241916;
  color: #fff;
}

input[type=text],
input[type=tel],
input[type=number],
input[type=email],
input[type=password],
textarea {
  border: solid 2px #ccc;
  border-radius: 3px;
  padding: 10px;
  width: 100%;
  margin-top: 6px;
}

textarea {
  height: 5em;
}

input[type=checkbox] {
  display: none;
  height: 1rem;
  width: 1rem;
}

input[type=checkbox]:not(:checked)+label::before {
  font-family: 'Material Icons';
  content: "check_box_outline_blank";
  font-size: 1.2rem;
  vertical-align: middle;
}

input[type=checkbox]:checked+label::before {
  font-family: 'Material Icons';
  content: "check_box";
  font-size: 1.2rem;
  vertical-align: middle;
}

select {
  border: solid 2px #ccc;
  border-radius: 3px;
  padding: 10px;
  width: 100%;
  margin-top: 6px;
  background-image: url(/assets/img/icon_arrowDown.svg);
  background-repeat: no-repeat;
  background-size: 24px auto;
  background-position: right 12px center;
  cursor: pointer;
}

.pageTitle {
  font-size: 2rem;
}

.pageTitleArea {
  margin-bottom: 80px;
}

.pageTitleArea h1 {
  font-size: 2rem;
}

/* ---------- */

.sectionTitle {
  text-align: center;
  font-size: 2rem;
  font-family: "rl-limo", sans-serif;
}

.sectionTitle span {
  font-size: 1rem;
  display: block;
}

@media (max-width: 860px) {
  .sectionTitle {
    text-align: left;
    width: 90%;
    margin: 0 auto;
  }

  .sectionTitle span {
    font-size: 1rem;
  }
}

.onlyPcBlock {
  display: block !important;
}

.onlyPcInline {
  display: inline !important;
}

.onlyPcInlineBlock {
  display: inline-block !important;
}

.onlyPcFlex {
  display: flex !important;
}

.onlySpBlock {
  display: none !important;
}

.onlySpInline {
  display: none !important;
}

.onlySpInlineBlock {
  display: none !important;
}

.onlySpFlex {
  display: none !important;
}

.pcFlexSpBlock {
  display: flex !important;
  gap: 10px;
}

.pcFlexSpBlock div {
  margin-top: 10px;
}

.pcFlexSpBlock div img {
  width: 100% !important;
}

@media (max-width: 860px) {
  .onlyPcBlock {
    display: none !important;
  }

  .onlyPcInline {
    display: none !important;
  }

  .onlyPcInlineBlock {
    display: none !important;
  }

  .onlyPcFlex {
    display: none !important;
  }

  .onlySpBlock {
    display: block !important;
  }

  .onlySpInline {
    display: inline !important;
  }

  .onlySpInlineBlock {
    display: inline-block !important;
  }

  .onlySpFlex {
    display: flex !important;
  }

  .pcFlexSpBlock {
    display: block !important;
  }
}


/* ---------- */

header {
  background: #fff;
  color: #241916;
  padding: 1rem;
  border-bottom: solid 1px #808080;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
}

.headerInner {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

@media (max-width: 860px) {
  .headerInner {
    width: 100%;
  }
}

.headerNavArea {
  display: flex;
  justify-content: left;
  align-items: center;
}

@media (max-width: 860px) {
  .headerGlobalNavi {
    display: none;
  }
}

.headerGlobalNavi ul {
  overflow: visible;
}

.headerGlobalNavi>ul {
  display: flex;
  justify-content: left;
  margin-left: 40px;
}

.headerGlobalNavi>ul>li {
  margin-left: 32px;
}

.headerGlobalNavi>ul>li:first-child {
  margin-left: 0;
}

.headerGlobalNavi>ul>li a {
  text-decoration: none;
  padding: 20px 0;
}

.headerGlobalNavi>ul>li a:hover {
  text-decoration: underline;
}

.headerSubNavi ul {
  display: flex;
  justify-content: left;
  align-items: center;
}

.headerSubNavi ul>li {
  margin-left: 24px;
}

.headerSubNavi ul>li .material-symbols-outlined {
  font-size: 32px;
}

@media (max-width: 860px) {
  header {
    flex-direction: column;
    text-align: center;
  }
}

.headerLogo img {
  width: 80px;
}

/* サブメニューを隠す */
.headerGlobalNavi .subMenu {
  display: block;
  /* display:blockにしておいて非表示にする */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  /* 下にずらす */
  position: absolute;
  background: white;
  border-radius: 5px;
  padding: 30px 20px;
  z-index: 100;
  list-style: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  box-shadow: #999 0 0 5px;
}

/* 親liを相対配置して、サブメニュー位置を制御 */
.headerGlobalNavi li.hasSubMenu {
  position: relative;
}

/* ホバー時に表示 */
.headerGlobalNavi li.hasSubMenu:hover .subMenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(10px);
}

.headerGlobalNavi .subMenu li {
  white-space: nowrap;
}

.headerGlobalNavi .subMenu a {
  display: block;
  padding: 10px 0;
  color: #333;
  text-decoration: none;
}

.headerGlobalNavi .subMenu a span {
  vertical-align: bottom;
}

.headerGlobalNavi .subMenu a:hover {}

@media (max-width: 860px) {
  .spMenu .subMenu li a {
    padding-left: 20px;
  }
}

.cartCount {
  position: absolute;
  top: -8px;
  right: -8px;
  background: tomato;
  color: white;
  font-size: .8rem;
  padding: 5px;
  border-radius: 50%;
  font-weight: bold;
  width: 1.2rem;
  height: 1.2rem;
  font-size: 0.8rem;
}

.cartCount>span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ---------- */

/* 最初は非表示にする */
.spMenu.hidden {
  display: none;
}

/* 表示状態のスタイル（必要に応じてカスタマイズ） */
.spMenu {
  background: #FBF8EF;
  position: fixed;
  right: 0;
  z-index: 1000;
  width: 60%;
  box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.1);
}

.spMenu a {
  display: block;
  width: 100%;
  padding: 20px 16px;
  border-top: 1px solid #ccc;
  text-decoration: none;
}

.spMenu a:hover {
  color: #fff;
  background-color: #241916;
}

/* ---------- */

main {
  padding-top: 86px;
}

/* ---------- */

footer {
  background-image: url('/assets/img/footer_bg.png');
  background-repeat: repeat;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 30px 30px 0 0;
  padding: 80px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  overflow: hidden;
  margin-top: 10px;
}

@media (max-width: 860px) {
  footer {
    display: block;
    padding: 40px 20px;
  }
}

@media (max-width: 860px) {
  .footerLogoArea {
    text-align: center;
  }
}

footer .moreBtn {
  width: 100%;
  margin-top: 30px;
}

.footerContactArea {
  margin-top: 40px;
}

@media (max-width: 860px) {
  .footerContactArea {
    text-align: center;
  }
}

.footerNavi ul {
  display: flex;
  justify-content: left;
  margin-top: 24px;
}

.footerNavi ul li {
  margin-left: 1rem;
}

.footerNavi ul li:first-child {
  margin-left: 0;
}

.footerNavi ul li a {
  text-decoration: underline;
  position: relative;
  display: block;
}

@media (max-width: 860px) {
  .footerNavi ul li a {
    font-size: 0.8rem;
  }
}

.footerNavi ul li a>.material-symbols-outlined {
  font-size: 12px;
  vertical-align: middle;
}


.footerNavi ul li a:hover {
  text-decoration: none;
}

.footerCompanyNavi ul {
  display: flex;
  justify-content: left;
  margin-top: 40px;
}

@media (max-width: 860px) {
  .footerCompanyNavi ul {
    display: block;
  }
}


.footerCompanyNavi ul li {
  margin-left: 1rem;
}

@media (max-width: 860px) {
  .footerCompanyNavi ul li {
    margin: 5px 0;
  }
}

.footerCompanyNavi ul li:first-child {
  margin-left: 0;
}

.footerCompanyNavi ul li a {
  text-decoration: underline;
}

@media (max-width: 860px) {
  .footerCompanyNavi ul li a {
    font-size: 0.8rem;
  }
}

.footerCompanyNavi ul li a:hover {
  text-decoration: none;
}

.footerLeftBox,
.footerRightBox {
  width: 400px;
}

@media (max-width: 860px) {

  .footerLeftBox,
  .footerRightBox {
    width: 100%;
  }
}

.footerTel {
  font-size: 2.2rem;
}

.footerSnsNavi a {
  display: block;
  width: 32px;
  height: 32px;
}

.footerSnsNavi a img {
  width: 100%;
}

.footerLinks {
  font-size: 0.9rem;
  line-height: 1.5;
}

.footerLinks a {
  color: #fff;
  margin: 0 0.5rem;
  display: inline-block;
}

footer .footer-links a {
  color: #fff;
  margin: 0 0.5rem;
  text-decoration: underline;
}

.footerSnsNavi ul {
  display: flex;
  justify-content: right;
  margin-top: 54px;
}

@media (max-width: 860px) {
  .footerSnsNavi ul {
    justify-content: center;
  }
}

.footerSnsNavi ul li {
  margin-left: 24px;
}

@media (max-width: 860px) {
  .footerSnsNavi ul li {
    margin-left: 12px;
    margin-right: 12px;
  }
}

.footerSnsNavi ul li:hover img {
  filter: invert(50%) hue-rotate(180deg);
}

/* ---------- */


/* .sectionTitle {
  margin-top: 80px;
} */

/* ---------- */

.topInfoArea {
  background-color: #8E8F8D;
  text-align: center;
  color: #fff;
  padding: 3px;
  font-size: 0.8rem;
}

.topInfoArea a {
  display: block;
}

.kvArea {
  background-color: #fff;
  background-image: url('/_uploads/fv-pc.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  height: 600px !important;
  margin: 0 auto;
}

.kvContentsArea {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  white-space: pre-line;
}

@media (max-width: 860px) {
  .kvContentsArea {
    width: 100%;
    display: block;
    padding: 0 5%;
  }
}

.kvContents>h1 {
  font-size: 2rem;
  font-weight: bold;
}

@media (max-width: 860px) {
  .kvContents>h1 {
    font-size: 1.5rem;
  }
}

.kvContents>p {
  white-space: pre-line;
  margin-top: 32px;
  line-height: 2;
}

@media (max-width: 860px) {
  .kvContents>p {
    margin-top: 12px;
  }
}

.kvContents>.moreBtn {
  margin-top: 32px;
}

@media (max-width: 860px) {
  .kvContents>.moreBtn {
    margin-top: 12px;
    padding: 12px 24px;
  }
}


/* ---------- */

.cassetteList {
  width: 100%;
}

@media (max-width: 860px) {
  .cassetteList {
    overflow-x: scroll;
    overflow: auto;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE, Edge */
  }

  .cassetteList::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari */
  }

  .cassetteList.listType {
    overflow-x: auto;
  }
}

.cassetteList ul {
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
  width: 1200px;
  margin: 0 auto;
}

@media (max-width: 860px) {
  .cassetteList ul {
    width: max-content;
    max-width: none;
    padding: 0 5%;

  }

  .cassetteList.listType ul {
    width: 100%;
    justify-content: space-between;
  }
}

.cassetteList ul li {
  margin-top: 40px;
}

@media (max-width: 860px) {
  .cassetteList.listType ul li {
    width: 46%;
  }

  .cassetteList.listType ul li .addToCart {
    padding: 12px 14px;
  }
}

.cassette {
  width: 276px;
  margin-left: 32px;
  display: block;
  text-decoration: none;
  position: relative;
  height: 100%;
}

@media (max-width: 860px) {
  .cassette {
    width: 218px;
  }

  .cassetteList.listType .cassette {
    width: 100%;
    margin-left: 0;
  }
}

.cassetteList ul li:nth-child(4n+1) .cassette {
  margin-left: 0;
}

.cassetteImage {
  width: 100%;
  aspect-ratio: 1 / 1;
  /* 正方形 */
  background-color: #ededed;
  position: relative;
}


.cassette:hover .cassetteImage {
  /* filter: brightness(90%); */
}

.cassette:hover .cassetteImage::after {
  content: '詳細を見る　→';
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 16px 24px;
  border-radius: 100px;
  font-size: 0.9rem;
  filter: brightness(100%);
  width: 80%;
  text-align: center;
  z-index: 100;
}

.cassetteImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cassetteTitle {
  font-weight: bold;
  margin-top: 20px;
}

.cassetteDescription {
  font-size: 0.9rem;
  margin-top: 8px;
  white-space: pre-line;
}

.cassettePrice {
  font-size: 1.1rem;
  color: #888;
  font-weight: bold;
}

.cassettePrice>span {
  font-size: .8rem;
}

/* ---------- */

.purchaseBtn {
  padding: 16px 24px;
  text-align: left;
  position: relative;
  border: solid 1px #241916;
  border-radius: 9999px;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
  font-size: 0.9rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #241916;
  font-size: 0.9rem;
  margin-top: 20px;
  bottom: 0;
  background-color: #FBF8EF;
}

.purchaseBtn:hover {
  background-color: #241916;
  color: #fff;
}

.addToCart {
  padding: 16px 24px;
  text-align: left;
  position: relative;
  border: solid 1px #241916;
  border-radius: 9999px;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
  font-size: 0.9rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #241916;
  font-size: 0.9rem;
  margin-top: 20px;
  bottom: 0;
  background-color: #FBF8EF;
}

.addToCart:hover {
  background-color: #241916;
  color: #fff;
}

.addToCart.noStock,
.addToCart.noStock:hover {
  background: #8E8F8D;
  color: #fff;
  cursor: default;
}

.addToCart>.material-symbols-outlined {
  font-size: 14px;
  margin-right: 5px;
}

.cassette:has(.addToCart:hover) .cassetteImage::after {
  content: none;
}

/* ---------- */

.pickupArea {
  background: #FBF8EF;
  padding: 80px 0;
}

@media (max-width: 860px) {
  .pickupArea {
    padding: 48px 0;
  }
}

/* ---------- */

.prArea1 {
  background-color: #fff;
  overflow: hidden;
}

.prArea1 .inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 0;
}

@media (max-width: 860px) {
  .prArea1 .inner {
    display: block;
    width: 100%;
    padding: 0;
  }
}

.prArea2 {
  background-color: #FBF8EF;
  overflow: hidden;
}

.prArea2 .inner {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  align-items: center;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 0;
}

@media (max-width: 860px) {
  .prArea2 .inner {
    display: block;
    width: 100%;
    padding: 0;
  }
}

.prContentsArea {
  width: 48%;
}

@media (max-width: 860px) {
  .prContentsArea {
    width: 100%;
    padding: 48px 16px;
  }
}

.prDescription img {
  width: 100%;
}

.prImageArea {
  width: 48%;
  height: 460px;
}

@media (max-width: 860px) {
  .prImageArea {
    width: 100%;
    height: 250px;
  }
}

.prImageArea img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prTitle {
  font-size: 2rem;
  font-weight: bold;
}

@media (max-width: 860px) {
  .prTitle {
    font-size: 1.5rem;
    font-weight: bold;
  }
}

/* ---------- */

.boxLinkArea {
  padding: 80px 0;
  background-color: #fff;
}

@media (max-width: 860px) {
  .boxLinkArea {
    padding: 48px 0;
  }
}

.boxLinkArea .inner {
  width: 90%;
  max-width: 1200px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
}

@media (max-width: 860px) {
  .boxLinkArea .inner {
    display: block;
  }
}

.boxLink {
  width: 580px;
  padding: 16px;
  background-color: #FBF8EF;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  border: solid 1px #241916;
}

@media (max-width: 860px) {
  .boxLink {
    width: 100%;
    margin-top: 24px;
  }

  .boxLink:first-child {
    margin-top: 0;
  }
}

.boxLinkImage {
  height: 140px;
  width: 140px;
}

@media (max-width: 860px) {
  .boxLinkImage {
    width: 30%;
    overflow: hidden;
  }
}

.boxLinkContent {
  width: 388px;
}

@media (max-width: 860px) {
  .boxLinkContent {
    width: 65%;
  }
}

.boxLinkContent h3 {
  font-weight: bold;
}

.boxLinkContent p {
  font-size: 0.8rem;
}

.rightText {
  text-align: right;
}

/* ---------- */

.instaArea {
  background-color: #FBF8EF;
  padding: 80px 0;
}

@media (max-width: 860px) {
  .instaArea {
    padding: 48px 0;
  }
}

.instaArea .inner {
  width: 90%;
  margin: 0 auto;
}

.instaContet {
  width: 90%;
  max-width: 880px;
  margin: 0 auto;
  margin-top: 40px;
}

@media (max-width: 860px) {
  .instaArea .inner {
    width: 100%;
    margin: 0 auto;
  }

  .instaContet {
    margin-top: 40px;
  }
}

.instaArea ul {
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
}

.instaArea ul li {
  width: 278px;
  height: 278px;
  margin-left: 32px;
  margin-top: 32px;
}

.instaArea ul li:nth-child(3n+1) {
  margin-left: 0;
}

.instaArea ul li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- */

.infoArea {
  background-color: #fff;
  padding: 80px 0;
}

@media (max-width: 860px) {
  .infoArea {
    padding: 48px 0;
  }
}

.infoThumb {
  width: 200px;
  height: 200px;
  border: solid 1px #ccc;
  display: block;
  margin: 40px auto;
}

.infoThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.infoDate {
  text-align: right;
}

.infoMode.artWrapper {
  padding-top: 40px;
}

.infoMode .pageTitleArea {
  margin-bottom: 40px;
}

/* ---------- */

.detailHeadArea {
  background-color: #FBF8EF;
  text-align: center;
  position: relative;
}

.detailHeadAreaInner {
  max-width: 1200px;
  width: 90%;
  margin: 0 auto;
  position: relative;
}

.detailHeadArea h1 {
  font-size: 2rem;
  padding: 65px;
  font-family: "rl-limo", sans-serif;
}

.detailHeadArea h1 span {
  font-size: 1rem;
  margin-top: 1rem;
  display: block;
}

.detailSection1 {
  background: #fff;
}

.detailSection2 {
  background: #FBF8EF;
}

.detailBc {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 0;
}

@media (max-width: 860px) {
  .detailBc {
    padding: 20px 0;
  }
}

/* ---------- */
.sTagArea {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 20px;
}

.sTagTopArea {
  display: flex;
  justify-content: space-between;
}

.sTagContent {
  margin-top: 10px;
}

.sTagContent ul {
  display: flex;
  gap: 10px;
  justify-content: left;
  flex-wrap: wrap;
}

/* ---------- */

.mypageHeadArea {}

.mypageHeadArea .detailHeadAreaInner h1 {
  text-align: left;
  padding-left: 0;
}

.mypageLogoutBtn {
  background-color: #241916;
  color: #fff;
  padding: 12px 38.5px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
}

.mypageLogoutBtn:hover {
  background-color: #42312d;
}

.mypageSection1 {}

.mypagePersonalDataArea,
.mypagePurchaseHistory {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.mypagePersonalDataHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 50px;
}

.mypagePersonalDataHead h2 {
  color: #8E8F8D;
  font-weight: bold;
}

.mypagePersonalDataContent {
  border-bottom: solid #B4B4B4 1px;
  padding-bottom: 50px;
}

.mypagePersonalDataContent dt {
  margin-top: 20px;
  font-size: 0.8rem;
  font-weight: normal;
}

.mypagePersonalDataContent dd {
  margin-top: 4px;
  font-weight: bold;
  font-size: 1rem;
}

.mypagePurchaseHistory {
  margin-top: 80px;
}

.mypagePurchaseHistoryHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mypagePurchaseHistory h2 {
  border-left: 8px solid #EBE6D1;
  padding-left: 0.5rem;
  font-weight: bold;
  font-size: 1.5rem;
}

.mypageGoBackArea {
  margin-top: 20px;
  text-align: center;
}

#pageMypageEdit .artWrapper {
  margin-top: 0;
  padding-top: 80px;
}

.purchaseContent {
  border: solid 1px #B4B4B4;
  padding: 24px 34px;
  margin-top: 40px;
}

.purchaseContent .metaData {
  display: flex;
  justify-content: left;
  position: relative;
  margin-top: 10px;
}

.purchaseContent .metaData dt {
  font-weight: normal;
}

.purchaseContent .metaData dd {
  margin-left: 0;
  position: absolute;
  left: 10rem;
  font-weight: bold;
}

.historyContent a {
  display: flex;
  justify-content: left;
  padding: 16px 0 0;
  border-top: 1px solid #B4B4B4;
  margin-top: 16px;
  text-decoration: none;
}

.historyContentInfoArea {
  width: 100%;
  padding-left: 16px;
}

.historyContentTitle {
  font-weight: bold;
  font-size: 1.2rem;
}

.historyContent a:hover .historyContentTitle {
  text-decoration: underline;
}

.historyContentImage {
  width: 100px;
  height: 100px;
  border: solid 1px #B3B3B3;
  background-color: #ededed;
}

.historyContentImage>img {
  width: 100%;
  height: 100%;
}

.historyContentQty {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
}

.historyContentQty dt {
  font-weight: normal;
}

.historyContentQty dd {
  font-weight: bold;
}



.purchaseContentTotalArea {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.purchaseContentTotalArea.theTotal {
  border: #B4B4B4 solid 1px;
  padding: 6px 10px;
}

.purchaseContentTotalArea dt {
  font-weight: normal;
}

.purchaseContentTotalArea dd {
  font-weight: bold;
}

.purchaseContentTotalArea.theTotal dd {
  font-size: 1.5rem;
}

.purchaseContentTotalWrap {
  border-top: solid 1px #B3B3B3;
  margin-top: 16px;
}

/* ---------- */

.productsHead {
  border-bottom: 1px solid #241916;
  padding: 8px 0;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 54px;
  font-size: 1.5rem;
}

.procutyFilterArea {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 20px;
  font-size: 0.9rem;
}

.procutyFilterArea ul {
  display: flex;
  justify-content: right;
  align-items: center;
}

.procutyFilterArea ul li {
  margin-left: 1rem;
}

.procutyFilterArea ul li button>span {
  vertical-align: middle;
}

.productDetailArea {
  display: flex;
  justify-content: space-between;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 0;
}

@media (max-width: 860px) {
  .productDetailArea {
    display: block;
  }
}

.productDetailArea .swiper {
  margin: 0;
}

.productDetailArea .main-swiper {
  width: 400px !important;
  height: 400px !important;
  margin-left: 12.5px;
}

@media (max-width: 860px) {
  .productDetailArea .main-swiper {
    width: 100% !important;
    height: 100% !important;
    margin-left: 0;
  }

}

.productDetailImageAreaWrap {
  margin-right: 10px;
}

@media (max-width: 860px) {
  .productDetailImageAreaWrap {
    margin-right: 0;
  }
}

.productDetailImageArea {
  display: flex;
  justify-content: left;
  width: 480px;
}

@media (max-width: 860px) {
  .productDetailImageArea {
    display: block;
    width: 100%;
  }
}

.productDetailArea .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EDEDED;
  font-size: 24px;
}

.productDetailArea .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.productDetailArea .thumb-swiper .swiper-slide {
  width: 70px !important;
  height: 70px !important;
}

.productDetailArea .swiper-pagination-bullet {
  background: #EDEDED;
  opacity: 0.5;
}

.productDetailArea .swiper-pagination-bullet-active {
  background: black;
  opacity: 1;
}


.productDetailContentArea {
  position: relative;
  width: calc(100% - 550px);
}

@media (max-width: 860px) {
  .productDetailContentArea {
    width: 100%;
    margin-top: 32px;
  }
}

.productDetailContentArea h1 {
  font-size: 1.4rem;
  font-weight: bold;
}

.productDetailContentArea .addToCart {
  position: relative;
  width: 400px;
}

@media (max-width: 860px) {
  .productDetailContentArea .addToCart {
    width: 100%;
  }
}

.productDetailPrice {
  font-size: 1.4rem;
  font-weight: bold;
  padding: 16px 0;
  border-bottom: 1px solid #241916;
}

.productDetailDescriptionSub {
  margin-top: 24px;
  font-weight: bold;
}

.productDetailDescription {
  margin-top: 24px;
  white-space: pre-line;
}

.productDetailDescription strong {
  display: inline;
}

.productDetailQuantity {
  margin-top: 24px;
  font-size: 0.8rem;
}

.productDetailQtyTitle {}

.productDetailQtyBox {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  border: solid 1px #241916;
  width: 160px;
  align-items: center;
}

.productDetailQtyBox button {
  padding: 16px;
}

.productDetailQtyBox button span {
  font-size: 16px;
}


.productDetailPrice>span {
  font-weight: normal;
  font-size: 0.8rem;
}

.productDetailarticle {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 0;
}

/* ---------- */

.productDetailinfoArea {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.productDetailinfoArea .tabs {
  display: flex;
}

.productDetailinfoArea .tabs>* {
  width: 50%;
}

.productDetailinfoArea .tab {
  padding: 10px 20px;
  cursor: pointer;
  text-align: center;
  border-bottom: 1px solid #B3B3B3;
}

.productDetailinfoArea .tab.active {
  font-weight: bold;
  border-bottom: 2px solid #241916;
}

.productDetailinfoArea .tabContent {
  display: none;
  padding: 20px 0 80px;
  /* white-space: pre-line; */
}

.productDetailinfoArea .tabContent.active {
  display: block;

}

.productOrganicImageArea {
  display: flex;
  margin-top: 20px;
  column-gap: 10px;
  padding-left: 80px;
}

@media (max-width: 860px) {
  .productOrganicImageArea {
    padding-left: 0;
  }
}

.productOrganicImageArea img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

@media (max-width: 860px) {
  .productOrganicImageArea img {
    width: 50px;
    height: 50px;
    object-fit: contain;
  }
}


/* ---------- */

.cartContainer {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.cartContainer .pageTitle {
  padding: 80px 0;
}

@media (max-width: 860px) {
  .cartContainer .pageTitle {
    padding: 40px 0;
  }
}

.cartContainer table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.cartContainer th,
.cartContainer td {
  padding: 1rem;
  border-bottom: 1px solid #ddd;
}

.cartItems {
  border-top: 1px solid #ddd;
}

.cartItemTitle {
  font-weight: bold;
}

@media (max-width: 860px) {
  .cartItemTitle {
    width: calc(100% - 110px);
  }
}

.cartItem {
  padding: 1rem 0;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 860px) {
  .cartItem {
    display: block;
  }
}

.cartItemContentArea {
  width: 45%;
  display: flex;
  align-items: center;
  justify-content: left;
}

@media (max-width: 860px) {
  .cartItemContentArea {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}

.cartItemSubtotalArea {
  width: 45%;
}

@media (max-width: 860px) {
  .cartItemSubtotalArea {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
  }
}

.cartItemRemoveArea {
  text-align: right;
}

.cartItemRemoveArea button {
  text-decoration: underline;
}

.cartItemRemoveArea button:hover {
  text-decoration: none;
}

.cartItemPrice {
  text-align: right;
}

.cartItemSubtotal {
  text-align: right;
  font-weight: bold;
  font-size: 1.5rem;
}

/* ---------- */

/* アーティクル関係 */
.artWrapper {
  width: 90%;
  max-width: 860px;
  margin: 0 auto;
  padding-top: 80px;
  padding-bottom: 80px;
}


article * {
  font-family: "dnp-shuei-gothic-gin-std", sans-serif !important;
  font-size: 16px !important;
}

article .material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
}


article {
  line-height: 1.5;
}

article hr {
  margin-top: 1rem;
}

article iframe {
  display: block;
}

@media (max-width: 860px) {
  article iframe {
    width: 100%;
  }
}


article li {
  margin-top: 0.5rem;
  text-indent: -1rem;
  padding-left: 1rem;
}

article li::before {
  content: "・";
}

article p {
  margin-top: 1rem;
}

article table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  border-top: 1px solid #ddd;
  margin-top: 1rem;
}

article th,
article td {
  padding: 1rem;
  border-bottom: 1px solid #ddd;
}

article th img,
article td img {
  width: 100% !important;
  height: auto !important;
}

article h2,
article h3,
article h4,
article h5,
article h6 {
  margin-top: 2rem;
  font-weight: bold;
}

article h1 {
  font-size: 32px !important;
  margin-bottom: 80px;
}

article h2 {
  border-left: 8px solid #EBE6D1;
  padding-left: 0.5rem;
  font-size: 25px !important;
}

article h3 {
  font-size: 22px !important;
}

article h4 {
  font-size: 19px !important;
}

article h5 {
  font-size: 17px !important;
}

article h6 {
  font-size: 16px !important;
}


article h1+*,
article h2+*,
article h3+*,
article h4+*,
article h5+*,
article h6+* {
  margin-top: 1rem;
}

article button {
  padding: 16px 24px;
  text-align: center;
  position: relative;
  border: solid 1px #808080;
  border-radius: 9999px;
  display: block;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
  font-size: 0.9rem !important;
  margin-top: 1rem;
}

article button:hover {
  color: #fff;
  background: #241916;
}

/* article img {
  width: auto !important;
  height: auto !important;
  max-width: 860px;
  max-height: 860px;
  display: inline-block;
  vertical-align: middle;
}
 */

@media (max-width: 860px) {
  article img {
    width: 100%;
    height: auto;
  }
}

/* ---------- */

.cartBtnWrapper {
  padding: 80px 0;
}

@media (max-width: 860px) {
  .cartBtnWrapper {
    padding: 40px 0;
  }
}

.cartBtnWrapper2 {
  padding: 80px 0;
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
}

.cartBtnWrapper2>a:nth-child(2) {
  width: 25%;
}

.cartBtnWrapper2>a:nth-child(1) {
  width: 74%;
}

@media (max-width: 860px) {
  .cartBtnWrapper2 {
    display: block;
    padding: 40px 0;
  }

  .cartBtnWrapper2>a:nth-child(1) {
    width: 100%;
  }

  .cartBtnWrapper2>a:nth-child(2) {
    width: 100%;
  }
}


.cartProductImage {
  width: 100px;
  height: 100px;
  overflow: hidden;
  background: #eee;
  margin-right: 10px;
  border: solid 1px #ccc;
}

.cartProductImage img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.cartContainer .total {
  text-align: right;
  font-weight: bold;
  margin-top: 1rem;
  font-size: 1.5rem;
}


/* ---------- */

.checkoutWrapper {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  width: 90%;
  margin: 0 auto;
}

.sameAddress:checked~.shippingAdressBox {
  display: none;
}

@media (max-width: 860px) {
  .checkoutWrapper {
    display: block;
  }
}

.checkoutWrapper .purchaseSettings {
  width: 70%;
}

@media (max-width: 860px) {
  .checkoutWrapper .purchaseSettings {
    width: 100%;
  }
}

.checkoutSection {
  padding-top: 40px;
  margin-top: 40px;
  border-top: solid 1px #ccc;
}

.checkoutWrapper .purchaseSettings h3 {
  font-size: 1.5rem;
  font-weight: bold;
}

.checkoutWrapper .purchaseSettings select {
  margin-top: 0.5rem;
}

/* ---------- */

.checkoutWrapper .cartView {
  width: 27%;
}

.checkoutWrapper .cartView h2 {
  font-size: 1.5rem;
}

@media (max-width: 860px) {
  .checkoutWrapper .cartView {
    width: 100%;
    margin-top: 40px;
  }
}

.checkoutWrapper .deliveryDateArea {
  display: flex;
  justify-content: left;
  gap: 5px;
  align-items: center;
  margin-top: 0.5rem;
}

.checkoutWrapper .deliveryDateArea select,
.checkoutWrapper .deliveryDateArea input {
  margin: 0;
}

.checkoutWrapper .cartView .settingsCartItemImage {
  display: flex;
  justify-content: space-between;
}

.checkoutWrapper .cartView .cartProductTitle {
  width: 180px;
}

.checkoutWrapper .cartView .settingsCartList {
  margin-top: 10px;
  padding: 10px 0;
}

.checkoutWrapper .cartView .settingsCartList li {
  border-top: 1px solid #ccc;
  padding: 10px;
}

.checkoutWrapper .addToCart {}

.checkoutWrapper .paymentSection .addToCart {
  font-size: 1rem;
}

.checkoutWrapper .totalLeft {
  text-align: left;
  font-weight: bold;
  margin-top: 1rem;
  font-size: 1.5rem;
}

.checkoutWrapper .totalRight {
  text-align: right;
  font-weight: bold;
  margin-top: 1rem;
  font-size: 1.5rem;
}

.checkoutWrapper #cardFormMessage {
  color: tomato;
  text-align: center;
  font-weight: bold;
  margin-top: 0.5rem;
}

/* ---------- */

.pagination {
  display: flex;
  margin: 1rem auto 0;
  justify-content: center;
  flex-wrap: wrap;
}

.pagination li {
  align-items: center;
}

.pagination a {
  margin: 5px;
  border-radius: 100px;
  display: block;
  background: cadetblue;
  color: #fff;
  width: 2rem;
  height: 2rem;
  text-align: center;
  padding: 0.25rem;
}

.pagination .active a {
  background-color: darkolivegreen;
}


.pagination .disabled {
  display: none;
}

/* ---------- */

.filterModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.filterModal .filterModalContent {
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  width: 90%;
  max-width: 800px;
  height: 416px;
  position: relative;
}

.filterModal .modalCloseBtn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
}

.filterModal .tabHeader {
  display: flex;
  border-bottom: 1px solid #ccc;
  margin-bottom: 1rem;
  text-align: center;
}

.filterModal .tab {
  flex: 1;
  background: none;
  border: none;
  padding: 1rem;
  font-weight: bold;
  cursor: pointer;
}

.filterModal .tab.active {
  border-bottom: 2px solid #000;
}

.filterModal .tabContent {
  height: 210px;
  overflow-y: scroll;
  /* box-shadow: #ccc 0 0 5px; */
  padding: 0 10px;
}

.filterModal .tabContent>label {
  border-bottom: solid 1px #ccc;
  padding-bottom: 1rem;
}

.filterModal .modalButtons {
  position: absolute;
  bottom: 10px;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  width: 90%;
  transform: translate(-50%, 0);
  left: 50%;
}

.filterModal .resetBtn,
.filterModal .submitBtn {
  flex: 1;
  padding: 1rem;
  border-radius: 30px;
  font-weight: bold;
  border: 1px solid #000;
  cursor: pointer;
  text-align: center;
}

.filterModal .submitBtn {
  background: #1a0d07;
  color: #fff;
}

/* ---------- */

.dellogout {
  background-color: tomato;
  color: #fff;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.dellogout:hover {
  filter: brightness(1.2);
}

.nowCreditBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #eee;
  border-radius: 10px;
  padding: 20px;
  margin-top: 20px;
}

.nowCreditBox .cardData label {
  margin: 0;
}


















































/* 

.menuIcons {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
  align-items: center;
}

@media (max-width: 860px) {
  .menuIcons {
    margin-top: 1rem;
  }
}

.searchBox {
  text-align: center;
}

.searchIcons {
  display: flex;
  align-items: center;
}

@media (max-width: 860px) {
  .searchIcons {
    margin-top: 1rem;
  }
}

.searchInput {
  margin: 0;
  border-radius: 1000px 0 0 1000px;
  background-color: #f9f9f9;
  color: #333;
  font-size: 1rem;
  padding: 10px;
  border: none;
}

.searchBtn {
  background: cadetblue;
  padding: 10px 20px 10px 15px;
  display: block;
}

.searchBtn>span {
  margin: 0;
  padding: 0;
  line-height: 0;
  font-size: 1rem;
  display: contents;
}

.searchClearBtn {
  background: darksalmon;
  border-radius: 0 1000px 1000px 0;
  padding: 10px 20px 10px 15px;
  display: block;
  text-decoration: none;
}

.searchClearBtn>span {
  margin: 0;
  padding: 0;
  line-height: 0;
  font-size: 1rem;
  display: contents;
}

.searchBtn:hover,
.searchClearBtn:hover {
  filter: brightness(1.2);
}

.searchTitle {
  width: 860px;
  text-align: center;
  font-size: 1.2rem;
  padding: 1rem;
  margin: 0 auto;
}

.mainVisual {
  width: 100%;
  max-width: 860px;
  margin: 20px auto 0;
}

.mainVisual img {
  width: 100%;
  height: auto;
}

.productList {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  width: 100%;
  max-width: 860px;
}

@media (max-width: 860px) {
  .productList {
    align-items: center;
  }
}

.productCassette {
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  padding: 1rem;
  width: 200px;
  margin-top: 20px;
  margin-left: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  text-align: center;
  text-decoration: none;
}

.productCassette:nth-child(4n +1) {
  margin-left: 0;
}

.productCassette:hover {
  border-color: brown;
}

@media (max-width: 860px) {
  .productCassette {
    width: 46%;
    margin: 2% !important;
  }
}




.productCassette img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.product-name {
  font-weight: bold;
  margin: 0.5rem 0;
}

.menu-icons {
  display: flex;
  gap: 1rem;
}

.productImage {
  padding: 10px;
  width: 49%;
}

.productInfo {
  width: 49%;
}

@media (max-width: 860px) {
  .productImage {
    padding: 10px;
    width: 100%;
  }

  .productInfo {
    width: 100%;
  }
}

.price {
  color: #e74c3c;
  font-size: 1.5rem;
  margin: 1rem 0 0;
}

.menu-icons {
  display: flex;
  gap: 1rem;
}

.checkoutBtn {
  background: #27ae60;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  margin-top: 1rem;
  text-align: center;
}

@media (max-width: 860px) {
  .checkoutBtn {
    width: 100%;
  }
}

.menu-icons {
  display: flex;
  gap: 1em;
}



.order-item {
  border-bottom: 1px solid #ccc;
  padding: 1em 0;
  display: flex;
  justify-content: space-between;
}

.order-info p {
  margin: 0.25em 0;
}


.cartZone {
  position: relative;
  display: inline-block;

}

.mini {
  font-size: 0.8rem;
}

.ordersBox {
  border: lightgray solid 1px;
  border-radius: 8px;
  padding: 10px;
  margin-top: 1rem;
}

.orderInfo {
  display: flex;
  justify-content: space-between;
  padding-bottom: 5px;
}

.orderItemInfo {
  display: flex;
  justify-content: space-between;
  border-top: lightgray 1px solid;
  padding: 5px 0;
}

.orderIdArea {
  margin-right: 1rem;
}

.orderTotalInfo {
  display: flex;
  border-top: lightgray 1px solid;
  padding: 5px 0;
  justify-content: space-between;
}

.mypageBox {
  margin-top: 1rem;
}

.mypageBox h2 {
  font-size: 1.2rem;
  font-weight: bold;
}

.mypageBox p {
  margin-top: 0.5rem;
}

.mypageBox h2>div>*,
.mypageBox h2>* {
  display: inline-block;
  vertical-align: middle;
}

.editBtn {
  background-color: lightgray;
  border: solid lightgrey 1px;
  border-radius: 1000px;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0.3rem;
  margin-left: 1rem;
  text-align: center;
}

.editBtn span {
  font-size: 1rem;
}

.editBtn:hover {
  border-color: gray;
}

.mypageHeadArea {
  display: flex;
  justify-content: space-between;
}

.mypageWrap {
  display: flex;
  justify-content: space-between;
}

.mypageWrap>* {
  border: solid 1px lightgray;
  padding: 10px;
  border-radius: 10px;
  width: 48%;
}

.editableHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bleadClumb {
  max-width: 860px;
  margin: 1em auto;
  padding: 1em;
}

.cardNum {
  font-size: 1.2rem;
  font-weight: bold;
}

.tableWrap {
  width: 100%;
  overflow-x: scroll;
}

.termTable p:first-child {
  margin: 0;
}

@media (max-width: 860px) {
  .termTable td {
    display: block;
    border: none;
    padding: 0;
  }

  .termTable tr {
    display: block;
    margin-top: 2rem;
  }

  .termTable td:first-child {
    font-weight: bold;
  }
}

.creditEditTitleWrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.creditEditTitleWrap label {
  margin-top: 0;
}

.cardArea {
  margin-top: 1rem;
  border: lightgray solid 2px;
  padding: 20px;
  border-radius: 20px;
}

.myMenu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
}

#card-container {
  margin-top: 20px;
  border: 1px solid #ccc;
  padding: 12px;
  border-radius: 4px;
}

#card-button {
  margin-top: 10px;
  padding: 10px 16px;
}

.soldout {
  font-weight: bold;
} */