@charset "UTF-8";
/* CSS Document */
/* ポップアップウインドウの設定：最前面・縦スクロール可能 */
.pu {
  display: none;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 10000 !important;
  background-color: rgba(0, 0, 0, 0.85);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  transform: none !important;
  filter: none !important;
  opacity: 1;
  visibility: visible;
  box-sizing: border-box !important;
}
/* チェックされたらポップアップウインドウを開く */
#pu-model01:checked + .pu,
#pu-item01:checked + .pu,
#pu-item03:checked + .pu,
#pu-item04:checked + .pu,
#pu-item05:checked + .pu,
#pu-item06:checked + .pu,
#pu-item07:checked + .pu,
#pu-item02:checked + .pu,
#pu-hero:checked + .pu,
#pu-model03:checked + .pu,
#pu-arr:checked + .pu,
#pu-concept:checked + .pu {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  opacity: 1 !important;
  visibility: visible !important;
}
/* チェックボックスの初期設定 */
#pu-model01, #pu-item01, #pu-item03, #pu-item04, #pu-item05, #pu-item06, #pu-item07, #pu-item02, #pu-hero, #pu-model03, #pu-arr, #pu-concept {
  display: none;
}
/* 閉じるアイコン（画面右下・スクロールしても固定）／余白タップでも閉じる */
.icon-close {
  color: #fff;
  position: fixed;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
  line-height: 100%;
  width: 100%;
  height: 100%;
  text-align: right;
  overflow: hidden;
  z-index: 10001;
  cursor: pointer;
}
.icon-close p {
  position: absolute;
  right: 3%;
  top: auto;
  bottom: max(4%, env(safe-area-inset-bottom, 0px));
  text-align: right;
  font-family: "Cormorant Infant", serif;
  font-weight: 100;
  font-size: 1.7em;
  color: #fff;
  cursor: pointer;
}
.close-mark {
  position: relative;
  width: 1.3em;
  height: 1.3em;
  display: block;
  transform: rotate(45deg);
}

.close-mark::before,
.close-mark::after {
  content: "";
  position: absolute;
  background: #fff;
}
/* 横線 */
.close-mark::before {
  width: 1.3em;
  height: 1px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 縦線 */
.close-mark::after {
  width: 1px;
  height: 1.3em;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* 開くボタン */
.btn-open {
  cursor: pointer;
  width: 100%;
  box-sizing: content-box;
}
.btn-open p {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-sizing: content-box;
}

.btn-open p {
  position: absolute;
  bottom:0.3em;
  right: 2%;
  z-index: 99 !important;
  color: #fff !important;
  text-align: center;
  font-weight: 100;
  text-shadow: 1px 1px 10px #fff;
  background-color: rgba(0, 0, 0, 0.3);
  line-height: 100%;
  padding: 2% 2.5%;
}

.plus-mark {
  position: relative;
  width: 1.5em;
  height: 1.55em;
  display: block;
  box-sizing: content-box;
}

.plus-mark::before,
.plus-mark::after {
  content: "";
  position: absolute;
  background: #fff;
  box-sizing: content-box;
}
/* 横線 */
.plus-mark::before {
  width: 1.5em;
  height: 1px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 縦線 */
.plus-mark::after {
  width: 1px;
  height: 1.6em;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* ポップアップの内容：短いときは中央、長いときは上からスクロール */
.pu-content {
  width: 80%;
  max-width: 600px;
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  margin: auto;
  text-align: center;
  padding: 3em 0 5em;
  font-size: 15px;
  color: #fff !important;
  z-index: 10002;
  box-sizing: border-box;
  flex: 0 0 auto;
}
.pu-content p {
  margin: 0.7em 0;
  vertical-align: middle !important;
  font-size: 1em;
  font-family: "Shippori Mincho B1", serif;
  font-family: "Cormorant Infant", serif;
  font-weight: 400;
  font-style: normal;
  line-height: 130%;
  color: #fff !important;
}
@media screen and (min-width:1500px) {
  .pu-content p {
    font-size: 18px;
  }
  .btn-open p {
    font-size: 18px;
  }
}
@media screen and (min-width:850px) {
  .pu-content {
    font-size: 17px;
  }
  .btn-open p {
    font-size: 17px;
  }
}
@media screen and (max-width:350px) {
  .pu-content {
    font-size: 14px;
  }
}
.pu-content a {
  text-decoration: none;
  color: inherit;
  transition: all 0.5s ease !important;
  line-height: 100%;
}
.pu-content a:hover, .pu-content a:active {
  color: #B3A475;
  transition: 0.5s;
  opacity: 1 !important;
}
/* POPUP値段右のバッグアイコン（細線・ホバーはPOPUP文字色 #B3A475 に一致） */
.pu-content a .pu-bag-icon {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  margin-left: 0.28em;
  vertical-align: -0.14em;
  background-color: transparent;
  background-image: url("../img/icon/shopping_bag_icon_pu.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: background-image 0.5s ease;
}
.pu-content a:hover .pu-bag-icon,
.pu-content a:active .pu-bag-icon {
  background-image: url("../img/icon/shopping_bag_icon_pu_hover.svg");
}
.pu-content img {
  width: 55%;
  max-width: 200px;
}
.pu-content span {
  font-size: 0.85em;
  display: inline;
  vertical-align: baseline;
  margin: 0 0.3em;
  letter-spacing: 0em;
}
.itemname {
  font-size: 0.85em;
  color: #B3A475;
  line-height: 100%;
}
.itemtitle {
  font-size: 0.9em !important;
  line-height: 200% !important;
  color: #B3A475;
}
.itemtitle2 {
  font-size: 0.80em !important;
  line-height: 200% !important;
  color: #B3A475;
}
.item04 span {
  line-height: 150% !important;
}
.itemlist {
  font-size: 0.72em;
  letter-spacing: -0.05em;
  max-width: 380px;
}
@media screen and (max-width:350px) {
  .pu-content {
    font-size: 12px !important;
  }
}
@media screen and (min-width:1500px) {
  .textlist {
    max-width: 350px;
  }
}
.popimg {
  display: flex;
  justify-content: center;
  width: 90% !important;
  margin: 0 auto;
  text-align: center;
}
.popimg img {
  padding: 0 1%;
}
.line {
  margin-bottom: -0.5em !important;
}
.menuline {
  width: 60px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.40);
  display: inline-block !important;
  vertical-align: middle;
  margin-bottom: 0.3em !important;
}
.fromleft {
  font-size: 0.7em !important;
  line-height: 160% !important;
  margin-bottom: -1em !important;
	margin-top: 1.6em!important;
  display: block !important;
  opacity: 0.8;
}
.pu-box {
  position: relative;
}

.pu-content .item {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 110%;
  max-width: none;
  margin: 0 auto 0 -5%;
  gap: 4px 0;
}
/* 枚数に関係なく4枚時と同じ1枚サイズ（25%） */
.pu-content .item img {
  width: 25% !important;
  max-width: none !important;
  flex: 0 0 25% !important;
  padding: 0 1% !important;
  box-sizing: border-box;
}
/* 5枚: 上3下2（同じサイズのまま折り返し） */
.pu-content .item.item-count-5::before,
.pu-content .item:has(> img:nth-child(5):last-child)::before {
  content: "";
  width: 100%;
  order: 1;
}
.pu-content .item.item-count-5 > img:nth-child(-n+3),
.pu-content .item:has(> img:nth-child(5):last-child) > img:nth-child(-n+3) {
  order: 0;
}
.pu-content .item.item-count-5 > img:nth-child(n+4),
.pu-content .item:has(> img:nth-child(5):last-child) > img:nth-child(n+4) {
  order: 2;
}
/* 6枚: 上3下3 */
.pu-content .item.item-count-6::before,
.pu-content .item:has(> img:nth-child(6):last-child)::before {
  content: "";
  width: 100%;
  order: 1;
}
.pu-content .item.item-count-6 > img:nth-child(-n+3),
.pu-content .item:has(> img:nth-child(6):last-child) > img:nth-child(-n+3) {
  order: 0;
}
.pu-content .item.item-count-6 > img:nth-child(n+4),
.pu-content .item:has(> img:nth-child(6):last-child) > img:nth-child(n+4) {
  order: 2;
}
/* 7枚: 上4下3 / 8枚: 上4下4 → 25%のまま自然折り返し */

/* タブレット縦：POPUP全体を読みやすく大きく */
@media screen and (min-width: 744px) and (max-width: 1070px) and (orientation: portrait) {
  .pu-content {
    width: 88%;
    max-width: 760px;
    font-size: 21px;
    padding-top: 2.5em;
  }
  .pu-content p {
    margin: 0.85em 0;
    line-height: 140%;
  }
  .pu-content img {
    width: 62%;
    max-width: 260px;
  }
  .pu-content .item {
    width: 110%;
    margin-left: -5%;
  }
  .pu-content .item img {
    width: 25% !important;
    max-width: none !important;
    flex: 0 0 25% !important;
    padding: 0 1% !important;
  }
  .itemtitle,
  .itemtitle2 {
    font-size: 1em !important;
  }
  .itemname {
    font-size: 0.95em;
  }
  .itemlist {
    font-size: 0.8em;
    max-width: 480px;
  }
  .textlist {
    font-size: 1em;
	  line-height: 180%;
  }
  .fromleft {
    font-size: 0.78em !important;
  }
  .menuline {
    width: 72px;
    margin: 0 0.35em 0.35em;
  }
  .icon-close p {
    font-size: 2em;
    right: 4%;
    top: auto;
    bottom: max(4%, env(safe-area-inset-bottom, 0px));
  }
  .close-mark {
    width: 1.5em;
    height: 1.5em;
  }
  .close-mark::before {
    width: 1.5em;
  }
  .close-mark::after {
    height: 1.5em;
  }
}

/* タブレット横：POPUP文字を小さめに */
@media screen and (min-width: 744px) and (max-width: 1070px) and (orientation: landscape) {
  .pu-content {
    width: 78%;
    max-width: 520px;
    font-size: 13px;
    padding-top: 1.8em;
    padding-bottom: 3.5em;
  }
  .pu-content p {
    margin: 0.55em 0;
    line-height: 130%;
  }
  .pu-content img {
    width: 48%;
    max-width: 160px;
  }
  .itemtitle,
  .itemtitle2 {
    font-size: 0.85em !important;
  }
  .itemname {
    font-size: 0.8em;
  }
  .itemlist {
    font-size: 0.68em;
    max-width: 360px;
  }
  .textlist {
    font-size: 0.85em;
    line-height: 160%;
  }
  .fromleft {
    font-size: 0.68em !important;
  }
  .menuline {
    width: 48px;
    margin: 0 0.25em 0.25em;
  }
  .icon-close p {
    font-size: 1.5em;
    right: 3%;
    bottom: max(3%, env(safe-area-inset-bottom, 0px));
  }
}