/* Centered modal-like popover with fade/scale animation */
.popover{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -45%) scale(0.98);
  min-width: 260px;
  max-width: 70vw;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  /*background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 12px 36px rgba(0,0,0,0.18);
  border-radius: 10px;
  padding: 1rem 1.1rem;*/
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms cubic-bezier(.2,.8,.2,1), transform 220ms cubic-bezier(.2,.8,.2,1);
}
.popover.open{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}
.popover:focus{outline:none}
.popover-content .img img{
  display: block;
  max-width: 70vw;
  max-height: calc(100dvh - 220px);
  width: auto;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}
.popover-content h3{margin: 2.0rem 0 0.5rem 0; font-size: 23px; color: #FFF; display: flex; justify-content: center; align-items: center; gap: 10px; font-weight: 400;}
.popover-content h3 span{ background: url("../images/com/icon_star.svg") center center no-repeat; background-size: cover; width: 50px !important; height: 50px !important; display: inline-block; text-align: center; align-content: center; color: var(--color02_10); font-family: "Noto Serif JP", serif; font-size: 20px; font-weight: 700;}
.popover-content p{ margin: 0; font-size: 19px; text-align: center; color: #FFF;}
.popover-close{
  position:relative;
  left:auto;
  right:auto;
  bottom:auto;
  border:0;
  background:transparent;
  /*font-size:1rem;
  cursor:pointer;*/
  display: table;
  margin: 18px auto 0;
  width: auto;
  color: #FFF;
  text-align: center;
}

.popover-close button { position: relative; padding: 0 0 0 40px; margin: auto; display: inline-block; border: 0; background: transparent; color: inherit; font: inherit; font-size: 16px; cursor: pointer;}
.popover-close button span:nth-of-type(1) { width: 30px; height: 2px; background: #FFF; position: absolute; top: 50%; left: 0; transform: rotate(30deg);}
.popover-close button span:nth-of-type(2) { width: 30px; height: 2px; background: #FFF; position: absolute; top: 50%; left: 0; transform: rotate(-30deg);}

@media (max-width:480px){
  .popover{min-width:88vw;padding:0.8rem}
}

/* Overlay to block background interaction when popover is open */
.overlay{
  position:fixed;
  inset:0;
  background: rgba(25,30,59,0.8);
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms cubic-bezier(.2,.8,.2,1);
}
.overlay.visible{
  opacity: 1;
  pointer-events: auto;
}



/*PC*/
@media screen and (min-width: 768px) {

.popover-content h3{ font-size: 23px;}
.popover-content h3 span{ font-size: 20px;}
.popover-content p{ font-size: 19px;}
.popover-close button { font-size: 16px;}

}


/*sp*/
@media only screen and (max-width: 767px) {

.popover-content h3{ font-size: 3.1250vw;}
.popover-content h3 span{ font-size: 3.1250vw;}
.popover-content p{ font-size: 2.9688vw;}
.popover-close button { font-size: 2.5000vw;}

.popover-close button { position: relative; padding: 0 0 0 6.2500vw; margin: auto; display: inline-block; border: 0; background: transparent; color: inherit; font: inherit; font-size: 2.5000vw; cursor: pointer;}
.popover-close button span:nth-of-type(1) { width: 4.6875vw; height: 0.3125vw; background: #FFF; position: absolute; top: 50%; left: 0; transform: rotate(30deg);}
.popover-close button span:nth-of-type(2) { width: 4.6875vw; height: 0.3125vw; background: #FFF; position: absolute; top: 50%; left: 0; transform: rotate(-30deg);}



}


@media screen and (width: 640px) {

.popover-content h3{ font-size: 20px;}
.popover-content h3 span{ font-size: 20px;}
.popover-content p{ font-size: 19px;}
.popover-close button { font-size: 16px;}

.popover-close button { position: relative; padding: 0 0 0 40px; margin: auto; display: inline-block; border: 0; background: transparent; color: inherit; font: inherit; font-size: 16px; cursor: pointer;}
.popover-close button span:nth-of-type(1) { width: 30px; height: 2px; background: #FFF; position: absolute; top: 50%; left: 0; transform: rotate(30deg);}
.popover-close button span:nth-of-type(2) { width: 30px; height: 2px; background: #FFF; position: absolute; top: 50%; left: 0; transform: rotate(-30deg);}



}