/* scenario modal */

.isScenarioDetailModalOpen{
  overflow: hidden;
}
.scenarioModalCommon{
  --scenario-modal-width: min(72vw, 62rem);
  --scenario-modal-height: 86vh;
  --scenario-modal-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  --scenario-modal-gap: 1vw;
  --scenario-modal-padding: 4vw 3vw 4vw 2.2vw;
  --scenario-modal-radius: 0.7vw;
  --scenario-modal-shadow: 0 1.4vw 3vw rgba(37, 29, 23, 0.28);
}
.scenarioDetailModal{
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 3vw;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.scenarioDetailModal.isOpen{
  pointer-events: auto;
  opacity: 1;
}
.scenarioDetailModalOverlay{
  position: absolute;
  inset: 0;
  background: rgba(37, 29, 23, 0.68);
}
.scenarioDetailModalDialog{
  width: var(--scenario-modal-width);
}
.scenarioDetailModalDialog,
.scenarioModalInner{
  position: relative;
  display: grid;
  grid-template-columns: var(--scenario-modal-columns);
  gap: var(--scenario-modal-gap);
  max-height: var(--scenario-modal-height);
  padding: var(--scenario-modal-padding);
  overflow: auto;
  color: var(--color-ink);
  background: #fff;
  border-radius: var(--scenario-modal-radius);
  box-shadow: var(--scenario-modal-shadow);
}
:is(.scenarioDetailModalClose, .scenarioModalClose){
  position: absolute;
  top: 1.2vw;
  right: 1.2vw;
  width: 2.4vw;
  height: 2.4vw;
  padding: 0;
  color: var(--color-button-dark);
  cursor: pointer;
  font-size: 0;
  line-height: 1;
  background: transparent;
  border: 0;
}
:is(.scenarioDetailModalClose, .scenarioModalClose):focus,
:is(.scenarioDetailModalClose, .scenarioModalClose):focus-visible{
  outline: 0;
}
:is(.scenarioDetailModalClose, .scenarioModalClose)::before,
:is(.scenarioDetailModalClose, .scenarioModalClose)::after{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.6vw;
  height: 0.12vw;
  content: "";
  background: currentColor;
}
:is(.scenarioDetailModalClose, .scenarioModalClose)::before{
  transform: translate(-50%, -50%) rotate(45deg);
}
:is(.scenarioDetailModalClose, .scenarioModalClose)::after{
  transform: translate(-50%, -50%) rotate(-45deg);
}
:is(.scenarioDetailModalVisual, .scenarioModalVisual){
  align-self: center;
  justify-self: center;
  max-width: 24vw;
  min-height: 0;
  line-height: 0;
  background: transparent;
}
:is(.scenarioDetailModalVisual, .scenarioModalVisual) img{
  width: auto;
  max-width: 100%;
  max-height: 48vh;
  padding: 0;
  object-fit: contain;
  box-shadow: 0 0.72vw 1.4vw rgba(47, 35, 22, 0.18);
}
:is(.scenarioDetailModalBody, .scenarioModalBody){
  align-self: center;
  padding-right: 1.6vw;
}
:is(.scenarioDetailModalBody, .scenarioModalBody) h3{
  clear: none;
  margin: 0 0 1.4vw;
  font-family: var(--font-display);
  font-size: 2.1vw;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.08em;
}
:is(.scenarioDetailModalBody, .scenarioModalBody) h3 small{
  display: block;
  margin-top: 0.2em;
  font-size: 0.72em;
  line-height: 1.45;
}
:is(.scenarioDetailModalStory, .scenarioStory){
  margin-top: 0;
  padding-top: 0;
  color: var(--color-muted);
  font-size: 1.08vw;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.05em;
  overflow-wrap: anywhere;
  word-break: normal;
  border-top: 0;
}
:is(.scenarioDetailModalStoryNote, .scenarioModalStoryNote){
  display: block;
  margin-top: 0.8vw;
  color: var(--color-muted);
  font-size: 0.9vw;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
:is(.scenarioDetailModalInfo, .scenarioModalInfo){
  display: flex;
  flex-wrap: wrap;
  gap: 0.55vw;
  margin-top: 2.4vw;
}
:is(.scenarioDetailModalInfo, .scenarioModalInfo) div{
  display: inline-flex;
  align-items: center;
}
:is(.scenarioDetailModalInfo, .scenarioModalInfo) dt{
  display: none;
}
:is(.scenarioDetailModalInfo, .scenarioModalInfo) dd{
  color: var(--color-muted);
  font-size: 1.05vw;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
}
:is(.scenarioDetailModalInfo, .scenarioModalInfo) div + div::before{
  display: inline-block;
  width: 0.08vw;
  height: 1.15em;
  margin-right: 0.55vw;
  content: "";
  background: rgba(105, 93, 80, 0.42);
}
:is(.scenarioDetailModalActions, .scenarioModalActions){
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1vw;
  margin-top: 3vw;
}
:is(.scenarioDetailModalActions, .scenarioModalActions).hasSingleAction{
  grid-template-columns: minmax(0, 220px);
  justify-content: center;
}
:is(.scenarioDetailModalActions, .scenarioModalActions) a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  color: var(--color-button-dark);
  font-size: 0.95vw;
  font-weight: 700;
  line-height: 1;
  overflow: hidden;
  background: transparent;
  background-clip: padding-box;
  border: 0.07vw solid currentColor;
  border-radius: 0.7vw;
}
:is(.scenarioDetailModalActions, .scenarioModalActions) a:not(.isDisabled)::after{
  position: absolute;
  right: 1.4vw;
  width: 0.56vw;
  height: 0.56vw;
  content: "";
  border-top: 0.1vw solid currentColor;
  border-right: 0.1vw solid currentColor;
  transform: rotate(45deg);
}
.scenarioDetailModalActions a[hidden]{
  display: none;
}
:is(.scenarioDetailModalActions, .scenarioModalActions) a:last-child{
  color: var(--color-white);
  background: var(--color-button-dark);
  border-color: var(--color-button-dark);
}
.scenarioDetailModalActions a.isDisabled{
  color: rgba(105, 93, 80, 0.6);
  pointer-events: none;
  background: transparent;
}
:is(.scenarioDetailModalTags, .scenarioModalTags.scenarioCardTags){
  display: flex;
  flex-wrap: wrap;
  gap: 0.8vw 1.35vw;
  min-height: 0;
  margin-top: 1.4vw;
  line-height: 1;
}
:is(.scenarioDetailModalTags, .scenarioModalTags.scenarioCardTags) .scenarioTagPill{
  position: relative;
  padding: 0.42vw 1.1vw 0.5vw 1.25vw;
  color: #5b4325;
  font-size: 0.86vw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  background: rgba(217, 149, 47, 0.13);
  border: 0;
  border-radius: 0.21vw;
}
:is(.scenarioDetailModalTags, .scenarioModalTags.scenarioCardTags) .scenarioTagPill::before{
  position: absolute;
  top: 50%;
  left: -0.9vw;
  width: 1.3vw;
  height: 0.58vw;
  content: "";
  background: url("../img/bookmarkRibbon.webp") no-repeat center center / contain;
  transform: translateY(-54%);
  transform-origin: right center;
}
:is(.scenarioDetailModalTags, .scenarioModalTags.scenarioCardTags) .scenarioTagPill::after{
  position: absolute;
  top: 50%;
  left: 0.34vw;
  width: 0.28vw;
  height: 0.28vw;
  content: "";
  background: #fff;
  border-radius: 50%;
  transform: translateY(-50%);
}
:is(.scenarioDetailModalTags, .scenarioModalTags.scenarioCardTags) .scenarioTagPill.isMadamise{
  color: var(--color-white);
  background: rgba(185, 84, 53, 0.94);
}
:is(.scenarioDetailModalTags, .scenarioModalTags.scenarioCardTags) .scenarioTagPill.isLimited{
  color: var(--color-white);
  background: #8f3f64;
}
:is(.scenarioDetailModalTags, .scenarioModalTags.scenarioCardTags) .scenarioTagPill.isNew{
  color: #251d17;
  background: rgba(243, 200, 111, 0.96);
}
:is(.scenarioDetailModalTags, .scenarioModalTags.scenarioCardTags) .scenarioTagPill.isTheater{
  color: var(--color-white);
  background: rgba(24, 45, 78, 0.96);
}
:is(.scenarioDetailModalTags, .scenarioModalTags.scenarioCardTags) .scenarioTagPill.isOnline,
:is(.scenarioDetailModalTags, .scenarioModalTags.scenarioCardTags) .scenarioTagPill.isOnlineOnly{
  color: var(--color-white);
  background: #2e7d72;
}
:is(.scenarioDetailModalTags, .scenarioModalTags.scenarioCardTags) .scenarioTagPill.isCafe{
  color: #251d17;
  background: rgba(232, 180, 124, 0.96);
}
:is(.scenarioDetailModalTags, .scenarioModalTags.scenarioCardTags) .scenarioTagPill.isHidden{
  color: var(--color-white);
  background: rgba(105, 93, 80, 0.9);
}
:is(.scenarioDetailModalTags, .scenarioModalTags.scenarioCardTags) .scenarioTagPill.isAuthor{
  color: #344216;
  background: rgba(114, 139, 55, 0.16);
}
:is(.scenarioDetailModalTags, .scenarioModalTags.scenarioCardTags) .scenarioTagPill.isAuthor{
  border: 0;
}
.scenarioModal{
  width: var(--scenario-modal-width);
  max-height: var(--scenario-modal-height);
  margin: auto;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--scenario-modal-radius);
  box-shadow: none;
}
.scenarioModal .scenarioModalActions[hidden]{
  display: none;
}
.scenarioModal::backdrop{
  background: rgba(37, 29, 23, 0.68);
}
.scenarioStory a{
  color: var(--color-rust-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.scenarioModal .scenarioModalActions a.isDisabled{
  color: var(--color-white);
  pointer-events: none;
  background: var(--color-button-dark);
  border-color: var(--color-button-dark);
}
.scenarioModal .scenarioModalActions a:first-child:not(:last-child){
  color: var(--color-button-dark);
  background: transparent;
  border-color: currentColor;
}
.scenarioModal .scenarioModalActions.hasSingleAction a{
  color: var(--color-button-dark);
  background: transparent;
  border-color: currentColor;
}
@media screen and (min-width: 1480px){
  .scenarioModalCommon{
    --scenario-modal-gap: 0.925rem;
    --scenario-modal-padding: 3.7rem 2.775rem 3.7rem 2.035rem;
    --scenario-modal-radius: 0.6475rem;
    --scenario-modal-shadow: 0 1.295rem 2.775rem rgba(37, 29, 23, 0.28);
  }
  .scenarioDetailModal{
    padding: 2.775rem;
  }
  :is(.scenarioDetailModalClose, .scenarioModalClose){
    top: 1.11rem;
    right: 1.11rem;
    width: 2.22rem;
    height: 2.22rem;
  }
  :is(.scenarioDetailModalClose, .scenarioModalClose)::before,
  :is(.scenarioDetailModalClose, .scenarioModalClose)::after{
    width: 1.48rem;
    height: 0.111rem;
  }
  :is(.scenarioDetailModalVisual, .scenarioModalVisual){
    max-width: 22.2rem;
  }
  :is(.scenarioDetailModalVisual, .scenarioModalVisual) img{
    box-shadow: 0 0.666rem 1.295rem rgba(47, 35, 22, 0.18);
  }
  :is(.scenarioDetailModalBody, .scenarioModalBody){
    padding-right: 1.48rem;
  }
  :is(.scenarioDetailModalBody, .scenarioModalBody) h3{
    margin-bottom: 1.295rem;
    font-size: 1.9425rem;
  }
  :is(.scenarioDetailModalStory, .scenarioStory){
    font-size: 0.999rem;
  }
  :is(.scenarioDetailModalStoryNote, .scenarioModalStoryNote){
    margin-top: 0.74rem;
    font-size: 0.833rem;
  }
  :is(.scenarioDetailModalInfo, .scenarioModalInfo){
    gap: 0.5088rem;
    margin-top: 2.22rem;
  }
  :is(.scenarioDetailModalInfo, .scenarioModalInfo) dd{
    font-size: 0.9713rem;
  }
  :is(.scenarioDetailModalInfo, .scenarioModalInfo) div + div::before{
    width: 0.074rem;
    margin-right: 0.5088rem;
  }
  :is(.scenarioDetailModalActions, .scenarioModalActions){
    gap: 0.925rem;
    margin-top: 2.775rem;
  }
  :is(.scenarioDetailModalActions, .scenarioModalActions).hasSingleAction{
    grid-template-columns: minmax(0, 13.75rem);
  }
  :is(.scenarioDetailModalActions, .scenarioModalActions) a{
    min-height: 3.125rem;
    font-size: 0.8788rem;
    border-width: 0.0648rem;
    border-radius: 0.6475rem;
  }
  :is(.scenarioDetailModalActions, .scenarioModalActions) a:not(.isDisabled)::after{
    right: 1.295rem;
    width: 0.518rem;
    height: 0.518rem;
    border-top-width: 0.0925rem;
    border-right-width: 0.0925rem;
  }
  :is(.scenarioDetailModalTags, .scenarioModalTags.scenarioCardTags){
    gap: 0.74rem 1.2488rem;
    margin-top: 1.295rem;
  }
  :is(.scenarioDetailModalTags, .scenarioModalTags.scenarioCardTags) .scenarioTagPill{
    padding: 0.3885rem 1.0175rem 0.4625rem 1.1563rem;
    font-size: 0.7955rem;
    border-radius: 0.1943rem;
  }
  :is(.scenarioDetailModalTags, .scenarioModalTags.scenarioCardTags) .scenarioTagPill::before{
    left: -0.8325rem;
    width: 1.2025rem;
    height: 0.5365rem;
  }
  :is(.scenarioDetailModalTags, .scenarioModalTags.scenarioCardTags) .scenarioTagPill::after{
    left: 0.3145rem;
    width: 0.259rem;
    height: 0.259rem;
  }
  .scenarioStory a{
    text-underline-offset: 0.1875rem;
  }
}
@media screen and (max-width: 768px){
  .scenarioModalCommon{
    --scenario-modal-width: 90vw;
    --scenario-modal-height: 90dvh;
    --scenario-modal-columns: 1fr;
    --scenario-modal-gap: 6vw;
    --scenario-modal-padding: 12vw 5vw 7vw;
    --scenario-modal-radius: 3vw;
    --scenario-modal-shadow: 0 4vw 8vw rgba(37, 29, 23, 0.28);
  }
  .scenarioDetailModal{
    padding: 5vw;
  }
  :is(.scenarioDetailModalClose, .scenarioModalClose){
    top: 2.8vw;
    right: 2.8vw;
    z-index: 2;
    width: 7vw;
    height: 7vw;
    color: #fff;
    background: rgba(37, 29, 23, 0.36);
    border-radius: 50%;
  }
  :is(.scenarioDetailModalClose, .scenarioModalClose)::before,
  :is(.scenarioDetailModalClose, .scenarioModalClose)::after{
    width: 4.5vw;
    height: 0.36vw;
  }
  :is(.scenarioDetailModalVisual, .scenarioModalVisual){
    position: relative;
    display: block;
    overflow: hidden;
    justify-self: center;
    width: calc(100% + 10.2vw);
    height: min(58vw, 290px);
    max-width: none;
    min-height: 0;
    margin: -12vw -5.1vw 0;
    box-shadow: none;
  }
  :is(.scenarioDetailModalVisual, .scenarioModalVisual) img{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    box-shadow: none;
    transform: translate(-50%, -50%);
  }
  :is(.scenarioDetailModal, .scenarioModal).isPortraitKeyVisual :is(.scenarioDetailModalVisual, .scenarioModalVisual) img{
    top: 16%;
    transform: translate(-50%, -16%);
  }
  :is(.scenarioDetailModalBody, .scenarioModalBody){
    padding-right: 0;
  }
  :is(.scenarioDetailModalBody, .scenarioModalBody) h3{
    margin: 0 0 2.4vw;
    font-size: 5vw;
  }
  :is(.scenarioDetailModalStory, .scenarioStory){
    font-size: 3vw;
  }
  :is(.scenarioDetailModalStoryNote, .scenarioModalStoryNote){
    margin-top: 2.4vw;
    font-size: 2.5vw;
  }
  :is(.scenarioDetailModalInfo, .scenarioModalInfo){
    gap: var(--space-label);
    margin-top: 5vw;
  }
  :is(.scenarioDetailModalInfo, .scenarioModalInfo) dd{
    font-size: 3vw;
  }
  :is(.scenarioDetailModalInfo, .scenarioModalInfo) div + div::before{
    width: 0.18vw;
    margin-right: var(--space-label);
  }
  :is(.scenarioDetailModalTags, .scenarioModalTags.scenarioCardTags){
    gap: 2.2vw 3.5vw;
    margin-top: 4vw;
  }
  :is(.scenarioDetailModalTags, .scenarioModalTags.scenarioCardTags) .scenarioTagPill{
    min-height: 0;
    padding: 1.2vw var(--space-text) 1.25vw 3.75vw;
    font-size: var(--type-small-size);
  }
  :is(.scenarioDetailModalTags, .scenarioModalTags.scenarioCardTags) .scenarioTagPill::before{
    left: -2.1vw;
    width: 3vw;
    height: 1.35vw;
    transform: translateY(-50%);
  }
  :is(.scenarioDetailModalTags, .scenarioModalTags.scenarioCardTags) .scenarioTagPill::after{
    left: 1vw;
    width: 3px;
    height: 3px;
  }
  :is(.scenarioDetailModalActions, .scenarioModalActions) a{
    min-height: 50px;
    font-size: 2.9vw;
    border-radius: 2vw;
  }
  :is(.scenarioDetailModalActions, .scenarioModalActions) a:not(.isDisabled)::after{
    right: 3.5vw;
    width: 1.67vw;
    height: 1.67vw;
    border-top-width: 0.34vw;
    border-right-width: 0.34vw;
  }
  :is(.scenarioDetailModalActions, .scenarioModalActions){
    gap: var(--space-label);
    margin-top: 7vw;
  }
  :is(.scenarioDetailModalActions, .scenarioModalActions).hasSingleAction{
    grid-template-columns: minmax(0, 42vw);
  }
  :is(.scenarioDetailModalActions, .scenarioModalActions) a:first-child{
    border-width: 0.32vw;
  }
}