@charset "UTF-8";
.p-openclose__anchors {
  margin-block-end: var(--layout-section-padding-inner-large);
}
.p-openclose__anchors > ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-12);
  row-gap: var(--component-anchor-gap-vertical);
  padding: var(--space-0);
  margin: var(--space-0);
  list-style: none;
}
.p-openclose__anchors li {
  min-inline-size: var(--space-0);
}

.p-openclose__lead {
  padding-block-end: var(--space-80);
}
.p-openclose__lead p {
  margin: var(--space-0);
}

.p-openclose__section-title {
  padding-block-start: var(--space-24);
  padding-block-end: var(--layout-section-padding-inner-large);
  box-shadow: inset var(--space-0) var(--space-1) var(--space-0) var(--semantic-border-primary);
  /* 見出しだけのTitle Groupではh2既定下余白をInner Largeへ相殺する */
}
.p-openclose__section-title > h2:only-child {
  margin-block-end: var(--space-0);
}
.p-openclose__section-title > p {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-default);
  line-height: var(--line-height-default);
}
.p-openclose__section-title > :last-child {
  margin-block-end: var(--space-0);
}

.p-openclose__empty {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-default);
  line-height: var(--line-height-default);
  min-block-size: var(--space-24);
  margin: var(--space-0);
  color: var(--semantic-text-primary);
  text-align: center;
}

.p-openclose__section:has(.p-openclose-card) > .p-openclose__empty,
.p-openclose__entry:not(:has(.p-openclose-card)),
.p-openclose__entries:not(:has(.p-openclose-card)) {
  display: none;
}

.p-openclose__entries {
  display: grid;
  gap: var(--space-0);
}

.p-openclose__entry {
  display: grid;
  gap: var(--layout-section-padding-inner-small);
}

.p-openclose__entries--close {
  gap: var(--layout-section-padding-heading-3);
}

.p-openclose__entry-heading,
.p-openclose__entry > .c-heading {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  padding-block-end: var(--component-heading-3-margin-block-end);
  box-shadow: inset var(--space-0) calc(var(--space-1) * -1) var(--space-0) var(--semantic-border-tertiary);
}

.p-openclose__entry-heading > .c-heading {
  flex: 1;
  margin-block-end: var(--space-0);
}

.p-openclose__entry > .c-heading {
  margin-block-end: var(--space-0);
}

.p-openclose__tag {
  font-size: var(--font-size-11);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-default);
  line-height: var(--line-height-caption);
  flex: none;
  min-inline-size: calc(var(--space-40) + var(--space-1));
  padding: var(--space-4) var(--space-8);
  color: var(--semantic-text-link);
  text-align: center;
  border: var(--space-1) solid var(--semantic-border-accent);
}

.p-openclose-card {
  display: grid;
  gap: var(--layout-section-padding-inner-small);
}

.p-openclose-card__header {
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.p-openclose-card__header::after {
  position: absolute;
  content: "";
  inset: var(--space-0);
  border: var(--space-0) solid transparent;
  border-radius: var(--layout-focus-radius);
  background: transparent;
  pointer-events: none;
}
@media (max-width: 767px) {
  .p-openclose-card__header:is(:active, [data-state=pressed])::after {
    background: var(--semantic-tap-highlight);
  }
  .p-openclose-card > .c-media-link:is(:active, [data-state=pressed]) > .p-openclose-card__header::after {
    background: var(--semantic-tap-highlight);
  }
}
.p-openclose-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  inline-size: var(--ratio-full);
  border-radius: var(--layout-focus-radius);
}
.p-openclose-card__header > .c-image-frame {
  position: relative;
  background: var(--semantic-background-base);
}
.p-openclose-card__header > .c-image-frame > picture {
  display: contents;
}
.p-openclose-card__header > .c-image-frame > img,
.p-openclose-card__header > .c-image-frame > picture > img {
  display: block;
  max-inline-size: var(--ratio-full);
  max-block-size: var(--ratio-full);
  object-fit: contain;
  object-position: center;
  background: var(--semantic-background-base);
  position: absolute;
  inset: var(--space-0);
  inline-size: var(--ratio-full);
  block-size: var(--ratio-full);
}
.p-openclose-card__header > .c-image-frame {
  flex: none;
  inline-size: var(--space-48);
  block-size: var(--space-48);
}
.p-openclose-card__header > .c-image-frame img {
  inline-size: var(--ratio-full);
  block-size: var(--ratio-full);
}
.p-openclose-card__header :is(h3, h4) {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-default);
  line-height: var(--line-height-default);
  margin: var(--space-0);
}

.p-openclose-card__visual {
  position: relative;
  background: var(--semantic-background-base);
}
.p-openclose-card__visual > picture {
  display: contents;
}
.p-openclose-card__visual > img,
.p-openclose-card__visual > picture > img {
  display: block;
  max-inline-size: var(--ratio-full);
  max-block-size: var(--ratio-full);
  object-fit: contain;
  object-position: center;
  background: var(--semantic-background-base);
  position: absolute;
  inset: var(--space-0);
  inline-size: var(--ratio-full);
  block-size: var(--ratio-full);
}
.p-openclose-card__visual::before {
  position: absolute;
  content: "";
  inset: var(--space-0);
  z-index: var(--layout-image-overlay-layer);
  box-shadow: inset var(--space-0) var(--space-0) var(--space-0) var(--layout-image-border-width) var(--semantic-border-tertiary);
  mix-blend-mode: darken;
  pointer-events: none;
}
@media (forced-colors: active) {
  .p-openclose-card__visual::before {
    border: var(--layout-image-border-width) solid CanvasText;
    box-shadow: none;
    mix-blend-mode: normal;
  }
}
.p-openclose-card__visual {
  isolation: isolate;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.p-openclose-card__visual::after {
  position: absolute;
  content: "";
  inset: var(--space-0);
  border: var(--space-0) solid transparent;
  border-radius: var(--layout-focus-radius);
  background: transparent;
  pointer-events: none;
}
@media (max-width: 767px) {
  .p-openclose-card__visual:is(:active, [data-state=pressed])::after {
    background: var(--semantic-tap-highlight);
  }
  .p-openclose-card > .c-media-link:is(:active, [data-state=pressed]) > .p-openclose-card__visual::after {
    background: var(--semantic-tap-highlight);
  }
}
.p-openclose-card__visual {
  display: grid;
  place-items: center;
  margin: var(--space-0);
  border-radius: var(--space-0);
  aspect-ratio: 3/2;
  overflow: hidden;
}
.p-openclose-card__visual img {
  inline-size: var(--ratio-full);
  block-size: var(--ratio-full);
}

.p-openclose-card > .c-media-link {
  display: grid;
  gap: var(--space-12);
}
.p-openclose-card > .c-media-link::after {
  display: none;
}
.p-openclose-card > .c-media-link:is(:focus-visible, [data-state=focus]) {
  outline: none;
}

.p-openclose-card--no-main {
  gap: var(--space-12);
}

.p-openclose-card__header > :is(h3, h4) {
  color: var(--semantic-text-primary);
}

.p-openclose-card > .c-media-link:is([data-state=hover], :focus-visible, [data-state=focus]) > .p-openclose-card__header > :is(h3, h4),
.p-openclose-card--compact > .p-openclose-card__header:is([data-state=hover], [data-state=focus]) > :is(h3, h4) {
  color: var(--semantic-text-primary-hover);
}

@media (hover: hover) {
  .p-openclose-card > .c-media-link:hover > .p-openclose-card__header > :is(h3, h4),
  .p-openclose-card--compact > .p-openclose-card__header:hover > :is(h3, h4) {
    color: var(--semantic-text-primary-hover);
  }
}
.p-openclose-card > .c-media-link:is(:active, [data-state=pressed]) > .p-openclose-card__header > :is(h3, h4),
.p-openclose-card--compact > .p-openclose-card__header:is(:active, [data-state=pressed]) > :is(h3, h4) {
  color: var(--semantic-text-primary-pressed);
}

.p-openclose-card > .c-media-link:is(:focus-visible, [data-state=focus]) > .p-openclose-card__header,
.p-openclose-card--compact > .p-openclose-card__header[data-state=focus] {
  outline: var(--layout-focus-width) solid var(--semantic-border-focus);
  outline-offset: var(--space-0);
}
@media (forced-colors: active) {
  .p-openclose-card > .c-media-link:is(:focus-visible, [data-state=focus]) > .p-openclose-card__header,
  .p-openclose-card--compact > .p-openclose-card__header[data-state=focus] {
    outline-color: Highlight;
  }
}

.p-openclose-card__details {
  border-block-end: var(--space-1) solid var(--semantic-border-secondary);
}
@media (prefers-reduced-motion: no-preference) {
  .p-openclose-card__details {
    transition: row-gap var(--motion-duration) var(--motion-easing);
  }
}
.p-openclose-card__details summary {
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.p-openclose-card__details summary::before {
  position: absolute;
  content: "";
  inset: var(--space-0);
  border: var(--space-0) solid transparent;
  border-radius: var(--layout-focus-radius);
  background: transparent;
  pointer-events: none;
}
@media (max-width: 767px) {
  .p-openclose-card__details summary:is(:active, [data-state=pressed])::before {
    background: var(--semantic-tap-highlight);
  }
}
.p-openclose-card__details summary:is(:focus-visible, [data-state=focus]) {
  outline: none;
}
.p-openclose-card__details summary:is(:focus-visible, [data-state=focus])::before {
  inset: calc(var(--layout-focus-outer-size) * -1);
  border: var(--layout-focus-width) solid var(--semantic-border-focus);
  background: transparent;
}
@media (forced-colors: active) {
  .p-openclose-card__details summary:is(:focus-visible, [data-state=focus])::before {
    border-color: Highlight;
  }
}
.p-openclose-card__details summary {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-8);
  padding-block: var(--space-16);
  min-block-size: calc(var(--space-56) + var(--space-1));
  cursor: pointer;
  list-style: none;
}
.p-openclose-card__details summary::-webkit-details-marker {
  display: none;
}
.p-openclose-card__details[open] summary {
  font-weight: var(--font-weight-bold);
  min-block-size: var(--space-56);
}
.p-openclose-card__details[open] {
  row-gap: var(--space-12);
}

.p-openclose-card__icon {
  display: block;
  inline-size: var(--space-24);
  block-size: var(--space-24);
  object-fit: contain;
}

.p-openclose-card__icon--minus,
.p-openclose-card__details[open] .p-openclose-card__icon--plus {
  display: none;
}

.p-openclose-card__details[open] .p-openclose-card__icon--minus {
  display: block;
}

.p-openclose-card__body {
  display: grid;
  gap: var(--space-0);
  padding-block-end: var(--space-48);
}
.p-openclose-card__body p {
  margin: var(--space-0);
}
.p-openclose-card__body > dl + :is(p, .p-openclose-card__notice),
.p-openclose-card__body > :is(p, .p-openclose-card__notice) + .p-openclose-card__notice {
  margin-block-start: var(--layout-section-padding-inner-small);
}
.p-openclose-card__body > p + p {
  margin-block-start: var(--layout-section-padding-inner-small);
}

.p-openclose-card__notice {
  padding: var(--space-24);
  border: var(--space-1) solid var(--semantic-border-tertiary);
}

.p-openclose-card--compact {
  gap: var(--component-title-title-gap);
  padding-block-end: var(--layout-section-padding-inner-large);
  border-block-end: var(--space-1) solid var(--semantic-border-tertiary);
}
.p-openclose-card--compact .p-openclose-card__details {
  display: block;
  border-block-end: var(--space-0);
}
.p-openclose-card--compact .p-openclose-card__body {
  padding-block-end: var(--space-0);
}
.p-openclose-card--compact .p-openclose-card__body > p + p {
  margin-block-start: var(--space-8);
}

@media (min-width: 768px) {
  .p-openclose__anchors > ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--layout-grid-gutter);
    row-gap: var(--component-anchor-gap-vertical);
  }
  .p-openclose__entry-heading {
    align-items: center;
  }
  .p-openclose__section-title {
    padding-block-start: var(--space-32);
  }
  .p-openclose__section-title > p {
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-default);
    line-height: var(--line-height-default);
  }
  .p-openclose__tag {
    font-size: var(--font-size-12);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-default);
    line-height: var(--line-height-narrow);
    min-inline-size: calc(var(--space-40) + var(--space-2) + var(--space-1));
  }
  .p-openclose-card__header > .c-image-frame {
    inline-size: var(--space-64);
    block-size: var(--space-64);
  }
  .p-openclose-card__header :is(h3, h4) {
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-default);
    line-height: var(--line-height-default);
  }
  .p-openclose-card > .c-media-link,
  .p-openclose-card--no-main {
    gap: var(--space-16);
  }
  .p-openclose-card:not(.p-openclose-card--compact, .p-openclose-card--no-main) {
    grid-template-columns: var(--layout-desktop-column-width) 1fr;
    column-gap: var(--layout-grid-gutter);
  }
  .p-openclose-card:not(.p-openclose-card--compact, .p-openclose-card--no-main) > .c-media-link {
    grid-column: 1/-1;
    grid-row: 1;
    grid-template-columns: subgrid;
    column-gap: var(--layout-grid-gutter);
    align-self: start;
  }
  .p-openclose-card:not(.p-openclose-card--compact, .p-openclose-card--no-main) .p-openclose-card__header,
  .p-openclose-card:not(.p-openclose-card--compact, .p-openclose-card--no-main) .p-openclose-card__details {
    grid-column: 2;
  }
  .p-openclose-card:not(.p-openclose-card--compact, .p-openclose-card--no-main) .p-openclose-card__header {
    grid-row: 1;
    align-self: start;
  }
  .p-openclose-card:not(.p-openclose-card--compact, .p-openclose-card--no-main) > .c-media-link > .p-openclose-card__visual {
    grid-column: 1;
    grid-row: 1;
  }
  .p-openclose-card:not(.p-openclose-card--compact, .p-openclose-card--no-main) .p-openclose-card__details {
    position: relative;
    z-index: 1;
    grid-row: 1;
    align-self: start;
    margin-block-start: calc(var(--space-64) + var(--space-16));
  }
  .p-openclose-card__details {
    display: block;
    border-block-end: var(--space-0);
  }
  .p-openclose-card__details::details-content {
    overflow: visible;
    block-size: auto;
    content-visibility: visible;
  }
  .p-openclose-card__details summary {
    display: none;
  }
  .p-openclose-card__body {
    padding-block-end: var(--space-0);
  }
  .p-openclose-card__body > p + p {
    margin-block-start: var(--space-12);
  }
  .p-openclose-card__body--continuous > p + p {
    margin-block-start: var(--space-0);
  }
  .p-openclose-card--compact {
    align-content: start;
  }
  .p-openclose-card--compact .p-openclose-card__body > p + p {
    margin-block-start: var(--space-12);
  }
  .p-openclose__entries--close {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--layout-grid-gutter);
  }
}
