@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

  /* ///// modal01 ///////////////////////////////// */
  :root {
   --font-base: "Noto Sans JP", sans-serif;
   --c-text-base: #000000;

   --modal01-bg: #0000008e;
   --modal01-shadow: #0000008e;
   --modal01-detail-shadow: #b5b5b58e;
   --modal01-content-bg: #ffffff;
   --modal01-img-nav: #333333;
   --modal01-scrollbar: #1d1b1b;
  }

  * {
   box-sizing: border-box;
   color: var(--c-text-base);
   font-family: var(--font-base);
  }

  html,
  body {
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%;
  }

  p,
  h4 {
   margin: 0;
  }

  body {
   transition: padding-right 0s;
  }

  /* ///// モーダルレイアウト ///// */
  .b-modal01 {
   display: flex;
   justify-content: center;
   align-items: center;
   visibility: hidden;
   opacity: 0;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 1001;
   width: 100%;
   backdrop-filter: blur(14px);
   transition: opacity 0.3s, visibility 0.5s;
   height: 100vh;
   /* フォールバック */
   height: 100dvh;
   /* モダンブラウザ */
  }

  .b-modal01.is-open {
   visibility: visible;
   opacity: 1;
  }

  .e-modal01__closeArea {
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1;
   width: 100%;
   height: 100%;
   background-color: var(--modal01-bg);
   transition: 0.3s;
   cursor: pointer;
   opacity: 0;
  }

  .b-modal01.is-open .e-modal01__closeArea {
   opacity: 1;
  }

  .e-modal01__closeArea:hover {
   opacity: 1;
   transform: none;
  }

  /* ///// モーダル内コンテンツ ///// */
  .l-modal01__content-wrapper {
   position: relative;
   z-index: 1;
   width: 95%;
   border-radius: 8px;
   box-shadow: 0 0 15px var(--modal01-shadow);
   background-color: var(--modal01-content-bg);
   padding-block: 2.5rem 1rem;
   padding-inline: 1rem;
   opacity: 0;
   transform: scale(0.95);
   transition: opacity 0.4s ease-out 0.1s, transform 0.4s ease-out 0.1s;
  }

  .b-modal01.is-open .l-modal01__content-wrapper {
   opacity: 1;
   transform: scale(1);
  }

  @media (min-width: 1279px) {
   .l-modal01__content-wrapper {
    width: min(70%, 1000px);
    padding-inline: 2rem;
   }
  }

  .e-modal01__content {
   display: grid;
   grid-template: "pic" "." 1rem "tmb" "." 1rem "text" "." 1rem "buy";
  }

  @media (min-width:769px) {
   .e-modal01__content {
    grid-template: "pic" "." 1rem "tmb" "." 2rem "text" "." 1rem "buy";
   }
  }

  /* モーダル内の画像コンテナ */
  .e-modal01__imgContainer {
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   width: 100%;
   height: auto;
   overflow: hidden;
   grid-area: pic;
   filter: drop-shadow(0px 0px 4px var(--modal01-detail-shadow));
  }

  /* モーダル内の画像 */
  .e-modal01__img {
   display: none;
   width: auto;
   height: auto;
  }

  .e-modal01__img.is-active {
   display: block;
   animation-name: modal01-fade-in;
   animation-duration: 0.5s;
  }

  .e-modal01__img img {
   width: auto;
   max-width: 100%;
   max-height: 300px;
  }

  @media (min-width: 1279px) {
   .e-modal01__img img {
    height: 50dvh;
   }

   .e-modal01__img img {
    max-height: 500px;
   }
  }

  @media (769px <=width <=1279px) {
   .e-modal01__img img {
    max-height: 300px;
   }
  }

  @keyframes modal01-fade-in {
   0% {
    opacity: 0;
   }

   1% {
    opacity: 0;
   }

   100% {
    opacity: 1;
   }
  }

  /* 閉じるボタン */
  .e-modal01__closeBtn {
   position: absolute;
   top: 0.5rem;
   right: 0.7rem;
   z-index: 106;
   color: #333333;
   font-weight: bold;
   font-weight: 900;
   font-size: 2rem;
   line-height: 1;
   text-decoration: none;
   transition: 0.3s;
   cursor: pointer;
  }

  .e-modal01__closeBtn:hover {
   opacity: 0.5;
  }

  /* サムネイル */
  .e-modal01__thumbnailList {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   grid-area: tmb;
   gap: 1rem;
  }

  @media (max-width:769px) {
   .e-modal01__thumbnailList:has(.e-modal01__thumbnail:nth-child(5)) {
    gap: .5rem;
   }
  }

  .e-modal01__thumbnail {
   cursor: pointer;
   transition: 0.3s;
   filter: drop-shadow(0px 0px 2px var(--modal01-detail-shadow));
  }

    .e-modal01__thumbnail.is-active {
     opacity: .5
  }

  .e-modal01__thumbnail:hover {
   opacity: 0.5;
  }

  .e-modal01__thumbnail img {
   width: auto;
   max-height: 50px;
  }

  @media (max-width:769px) {
   .e-modal01__thumbnailList:has(.e-modal01__thumbnail:nth-child(5)) .e-modal01__thumbnail img {
    max-height: 35px;
   }
  }

  .e-modal01__detailTextContainer {
   display: grid;
   flex-shrink: 0;
   max-height: 20dvh;
   padding-bottom: 0.2rem;
   overflow-y: scroll;
   grid-area: text;
   grid-template: 
   "head"
   "detail" 
   "." 0.5rem 
   "text" 
   "." 1.5rem 
   "price";
   padding-inline: 0.5rem;
  }

  @media (min-width: 1279px) {
   .e-modal01__detailTextContainer {
    overflow-y: auto;
    max-height: 27dvh;
   }
  }

  .e-modal01__detailTextContainer::-webkit-scrollbar {
   width: 3px;
   height: 3px;
   background-color: transparent;
  }

  .e-modal01__detailTextContainer::-webkit-scrollbar-track {
   background-color: transparent;
  }

  .e-modal01__detailTextContainer::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background-color: #858585;
  }

  .e-modal01__detailHead {
   font-weight: 700;
   font-size: 1.25rem;
   line-height: 1.2;

   grid-area: head;
   word-break: break-all;
  }

  .e-modal01__detailSubHead {
   display: flex;
   flex-direction: column;
   margin-top: 0.5rem;
   grid-area: detail;
   gap: 0.2rem;
   flex-wrap: wrap;
  }

  .e-modal01__detailSubHead__subDetail :where(p,a){
    word-break: break-all;
  }

  @media (min-width: 1279px) {
   .e-modal01__detailSubHead {
    flex-direction: row;
    gap: 0.3rem 1rem;
   }
  }

  .e-modal01__detailSubHead__text {
   font-size: 0.88rem;
   line-height: 1;
  }

  .e-modal01__detailSubHead__text:empty {
   display: none;
  }

  .l-modal01__detailText-wrapper {
   display: flex;
   flex-direction: column;
   padding-top: 0.5rem;
   border-top: solid 1px;
   grid-area: text;
   gap: 1rem;
  }

  @media (min-width: 1279px) {
   .l-modal01__detailText-wrapper {
    flex-direction: row;
   }
  }

  .e-modal01__detailText {
   font-size: 1rem;
   line-height: 1.2;
    word-break: break-all;
  }

  .e-modal01__detailPrice-wrapper {
   grid-area: price;
   display: flex;    align-items: center;
   gap: .5rem;
  }

  .e-modal01__detailPrice {
   font-weight: 500;
   font-size: 1.25rem;
    display: flex;
    align-items: center;
   text-align: right;
  }

  .e-modal01__detailPrice::before,
  .e-modal01__detailPrice::after {
   font-size: 0.8em;
  }

  .e-modal01__detailPrice::before {
   content: "￥";
  }

  .e-modal01__detailPrice::after {
   content: "(tax in)";
  }

  .l-modal01__detailText-wrapper:has(.e-modal01__detailText:empty),
  .e-modal01__detailPrice:empty {
   display: none;
  }

  .e-modal01__detailBuy-wrapper{
   display: flex;
   justify-content: flex-end;
   gap: 1rem;
       flex-direction: row-reverse;
    justify-content: space-between;
    width: 100%;
  }

.e-modal01__detailBuy-list{
grid-area: buy;
display: flex;
justify-content: flex-end;
gap: 1rem;
}
@media (max-width:769px) {
.e-modal01__detailBuy-list{
 flex-direction: column;
     gap: .5rem;
}}

.e-modal01__detailBuy-btn{
 background-color: #000000;
 padding-block: .7rem;
 border-radius: 5px;
 padding-inline: 1.5rem;
 width: fit-content;
 filter: drop-shadow(0px 3px 0px #00000046);
}

.e-modal01__detailBuy-btn::after{
content: "購入する";
color: #fff;
line-height: 1;
font-size: 1rem;
letter-spacing: .2rem;
}

.e-modal01__detailBuy-btn:hover{
transition: .3s;
opacity: .5;
}

.e-modal01__detailBuy-btn--stand-by{
pointer-events: none;
    filter: contrast(0.5);
    opacity: .5;
}

  /* ナビゲーションボタン */
  .e-modal01__navBtn {
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   top: 50%;
   z-index: 10;
   transform: translateY(-50%);
   width: 35%;
   height: 100%;
   background-color: initial;
   font-size: 1rem;
   text-decoration: none;
   transition: 0.3s;
   cursor: pointer;
  }

  .e-modal01__navBtn::before {
   display: block;
   clip-path: polygon(17% 0, 100% 50%, 20% 100%, 0 100%, 77% 50%, 0 0);
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 0.7rem;
   background-color: var(--modal01-img-nav);
   content: "";
   aspect-ratio: 1/3;
  }

  .e-modal01__navBtn:hover {
   opacity: 0.5;
  }

  .e-modal01__navBtn--prev {
   left: 0%;
  }

  .e-modal01__navBtn--prev::before {
   left: 0;
   transform: scale(-1) translateY(50%);
  }

  @media (min-width: 1279px) {
   .e-modal01__navBtn--prev::before {
    left: 1rem;
   }
  }

  .e-modal01__navBtn--next {
   right: 0%;
  }

  .e-modal01__navBtn--next::before {
   right: 0;
  }

  @media (min-width: 1279px) {
   .e-modal01__navBtn--next::before {
    right: 1rem;
   }
  }

  /* サムネイルリスト非表示（画像1枚の場合） */
  .e-modal01__thumbnailList:empty {
   display: none;
  }

  /* ///// responsive ///////////////////////////////// */
  .sp {
   display: none;
  }

  .pc {
   display: block;
  }

  .br_pc {
   display: block;
  }

  @media (max-width: 1024px) {
   .sp {
    display: block;
   }

   .pc {
    display: none;
   }

   .br {
    display: block;
   }

   .br_pc {
    display: none;
   }
  }