@import url("./platform-ui-tokens.css");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap");

/* =========================================================
   platform-ui.css 共通設定
   Font / Typography
   ========================================================= */


/* ---------------------------------------------------------
   Base font
   --------------------------------------------------------- */
.cms-index-page,
.cms-page-index,
.cms-page-index-title,
.cms-page-index-notes,
.cms-content-index-hero,
.cms-content-index-lead,
.cms-content-index-main,
.cms-content-media-list {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}

/* ---------------------------------------------------------
   Font weight
   --------------------------------------------------------- */
.cms-page-index-title h1 {
  font-weight: 700;
}

.cms-page-index-title__meta,
.cn-platform-content .cms-page-index-title__meta,
.cms-page-index-title__credit,
.cms-page-index-notes,
.cms-content-index-lead,
.cn-platform-content .cms-content-index-lead,
.cms-content-media-list__summary {
  font-weight: 400;
}

.cms-content-media-list__title {
  font-weight: 700;
}

/* =========================================================
   CMS Content Common
   ========================================================= */

.cn-platform-content {
  width: 100%;
  color: var(--cms-content-color-text);
  font-family: var(--cms-content-font-family);
  letter-spacing: 0;
}

.cn-platform-content,
.cn-platform-content * {
  box-sizing: border-box;
}

.cn-platform-content a {
  color: inherit;
  font: inherit;
}

.cn-platform-content h2,
.cn-platform-content p,
.cn-platform-content ol {
  margin: 0;
}

.cms-content__banner {
  display: grid;
  width: 100%;
  height: var(--cms-content-banner-height);
  margin-top: var(--cms-content-space-2xl);
  place-items: center;
  background: var(--cms-content-banner-color-bg);
}

.cms-content__banner span {
  font-size: var(--cms-content-font-size-body);
  font-weight: var(--cms-content-font-weight-regular);
  line-height: var(--cms-content-line-height-body);
}

.cms-content__lead {
  width: 100%;
  margin-top: var(--cms-content-space-2xl);
  font-size: var(--cms-content-font-size-body);
  font-weight: var(--cms-content-font-weight-regular);
  line-height: var(--cms-content-line-height-body);
}

.cms-content-credit-list {
  display: grid;
  gap: var(--cms-content-space-sm);
  width: 100%;
  margin-top: var(--cms-content-space-2xl);
}

.cms-content-credit {
  display: grid;
  grid-template-columns: var(--cms-content-credit-icon-size) minmax(0, 1fr);
  column-gap: var(--cms-content-space-sm);
  align-items: start;
  min-height: var(--cms-content-credit-min-height);
  padding: var(--cms-content-space-lg) var(--cms-content-space-2xl) var(--cms-content-space-lg) var(--cms-content-space-lg);
  background: var(--cms-content-credit-color-bg);
}

.cms-content-credit--large {
  min-height: var(--cms-content-credit-large-min-height);
}

.cms-content-credit__text {
  font-size: var(--cms-content-font-size-body);
  font-weight: var(--cms-content-font-weight-regular);
  line-height: var(--cms-content-line-height-heading);
}

.cms-content-credit__icon {
  display: block;
  width: var(--cms-content-credit-icon-size);
  height: var(--cms-content-credit-icon-size);
  object-fit: contain;
}

.cms-content-section {
  width: 100%;
  margin-top: var(--cms-content-space-2xl);
}

.cms-content-heading {
  position: relative;
  min-height: var(--cms-content-heading-min-height);
}

.cms-content-heading::before {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--cms-content-heading-icon-size);
  height: var(--cms-content-heading-icon-size);
  background: url("/share/common/images/ui-ux/cms-content/TitleIcon.svg") center / contain no-repeat;
  content: "";
}

.cms-content-heading__title {
  position: relative;
  top: var(--cms-content-heading-title-offset-y);
  left: var(--cms-content-heading-title-offset-x);
  width: calc(100% - var(--cms-content-heading-title-offset-x));
  color: var(--cms-content-color-heading);
  font-size: var(--cms-content-font-size-heading-md);
  font-weight: var(--cms-content-font-weight-bold);
  line-height: var(--cms-content-line-height-body);
}

.cms-content-list {
  position: relative;
  width: calc(100% - var(--cms-content-list-width-offset));
  margin: var(--cms-content-space-lg) auto 0;
}

.cms-content-list__state {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.cms-content-list__items {
  width: 100%;
  padding: 0;
  list-style: none;
}

.cms-content-list__item {
  display: list-item;
}

.cms-content-list__link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--cms-content-list-row-min-height);
  padding: var(--cms-content-space-sm) var(--cms-content-space-lg) var(--cms-content-space-sm) 0;
  border-bottom: var(--cms-content-border-width) var(--cms-content-border-style) var(--cms-content-list-color-border);
  text-decoration: none;
  background: var(--cms-content-color-bg);
}

.cms-content-list__item--tall .cms-content-list__link {
  min-height: var(--cms-content-list-row-tall-min-height);
}

.cms-content-list__text {
  display: block;
  min-width: 0;
  font-size: var(--cms-content-font-size-body);
  font-weight: var(--cms-content-font-weight-regular);
  line-height: var(--cms-content-line-height-body);
  overflow-wrap: anywhere;
}

.cms-content-list__icon {
  position: absolute;
  top: 50%;
  right: 0;
  display: block;
  width: var(--cms-content-list-icon-width);
  height: var(--cms-content-list-icon-height);
  object-fit: contain;
  transform: translateY(-50%);
}

.cms-content-list__panel {
  position: relative;
  width: 100%;
  height: var(--cms-content-list-panel-height);
  margin-top: calc(var(--cms-content-list-panel-height) * -1);
  border-bottom: var(--cms-content-border-width) var(--cms-content-border-style) var(--cms-content-list-color-border);
  background: linear-gradient(to top, var(--cms-content-color-bg) 50%, rgba(255, 255, 255, 0.5) 100%);
}

.cms-content-list__button {
  display: none;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: var(--cms-content-space-sm);
  padding-top: 43px;
  color: var(--cms-content-color-text);
  font-size: var(--cms-content-font-size-body);
  font-weight: var(--cms-content-font-weight-bold);
  line-height: var(--cms-content-line-height-body);
  cursor: pointer;
}

.cms-content-list__button-icon {
  display: block;
  width: var(--cms-content-list-button-icon-width);
  height: var(--cms-content-list-button-icon-height);
  object-fit: contain;
}

.cms-content-list__button--close .cms-content-list__button-icon {
  transform: rotate(180deg);
}

.cms-content-list:not(:has(.cms-content-list__items li:nth-child(11))) .cms-content-list__panel {
  display: none;
}

.cms-content-list__state:focus-visible ~ .cms-content-list__panel .cms-content-list__button {
  outline: var(--cms-content-border-width-strong) var(--cms-content-border-style) var(--cms-content-color-text);
  outline-offset: -2px;
}

.cms-content-list__state--10:checked ~ .cms-content-list__items li:nth-child(n + 11),
.cms-content-list__state--20:checked ~ .cms-content-list__items li:nth-child(n + 21),
.cms-content-list__state--30:checked ~ .cms-content-list__items li:nth-child(n + 31),
.cms-content-list__state--40:checked ~ .cms-content-list__items li:nth-child(n + 41),
.cms-content-list__state--50:checked ~ .cms-content-list__items li:nth-child(n + 51),
.cms-content-list__state--60:checked ~ .cms-content-list__items li:nth-child(n + 61),
.cms-content-list__state--70:checked ~ .cms-content-list__items li:nth-child(n + 71),
.cms-content-list__state--80:checked ~ .cms-content-list__items li:nth-child(n + 81),
.cms-content-list__state--90:checked ~ .cms-content-list__items li:nth-child(n + 91),
.cms-content-list__state--100:checked ~ .cms-content-list__items li:nth-child(n + 101),
.cms-content-list__state--110:checked ~ .cms-content-list__items li:nth-child(n + 111),
.cms-content-list__state--120:checked ~ .cms-content-list__items li:nth-child(n + 121),
.cms-content-list__state--130:checked ~ .cms-content-list__items li:nth-child(n + 131),
.cms-content-list__state--140:checked ~ .cms-content-list__items li:nth-child(n + 141),
.cms-content-list__state--150:checked ~ .cms-content-list__items li:nth-child(n + 151),
.cms-content-list__state--160:checked ~ .cms-content-list__items li:nth-child(n + 161),
.cms-content-list__state--170:checked ~ .cms-content-list__items li:nth-child(n + 171),
.cms-content-list__state--180:checked ~ .cms-content-list__items li:nth-child(n + 181),
.cms-content-list__state--190:checked ~ .cms-content-list__items li:nth-child(n + 191) {
  display: none;
}

.cms-content-list--step:has(.cms-content-list__state--20:checked):not(:has(.cms-content-list__items li:nth-child(21))) .cms-content-list__panel,
.cms-content-list--step:has(.cms-content-list__state--30:checked):not(:has(.cms-content-list__items li:nth-child(31))) .cms-content-list__panel,
.cms-content-list--step:has(.cms-content-list__state--40:checked):not(:has(.cms-content-list__items li:nth-child(41))) .cms-content-list__panel,
.cms-content-list--step:has(.cms-content-list__state--50:checked):not(:has(.cms-content-list__items li:nth-child(51))) .cms-content-list__panel,
.cms-content-list--step:has(.cms-content-list__state--60:checked):not(:has(.cms-content-list__items li:nth-child(61))) .cms-content-list__panel,
.cms-content-list--step:has(.cms-content-list__state--70:checked):not(:has(.cms-content-list__items li:nth-child(71))) .cms-content-list__panel,
.cms-content-list--step:has(.cms-content-list__state--80:checked):not(:has(.cms-content-list__items li:nth-child(81))) .cms-content-list__panel,
.cms-content-list--step:has(.cms-content-list__state--90:checked):not(:has(.cms-content-list__items li:nth-child(91))) .cms-content-list__panel,
.cms-content-list--step:has(.cms-content-list__state--100:checked):not(:has(.cms-content-list__items li:nth-child(101))) .cms-content-list__panel,
.cms-content-list--step:has(.cms-content-list__state--110:checked):not(:has(.cms-content-list__items li:nth-child(111))) .cms-content-list__panel,
.cms-content-list--step:has(.cms-content-list__state--120:checked):not(:has(.cms-content-list__items li:nth-child(121))) .cms-content-list__panel,
.cms-content-list--step:has(.cms-content-list__state--130:checked):not(:has(.cms-content-list__items li:nth-child(131))) .cms-content-list__panel,
.cms-content-list--step:has(.cms-content-list__state--140:checked):not(:has(.cms-content-list__items li:nth-child(141))) .cms-content-list__panel,
.cms-content-list--step:has(.cms-content-list__state--150:checked):not(:has(.cms-content-list__items li:nth-child(151))) .cms-content-list__panel,
.cms-content-list--step:has(.cms-content-list__state--160:checked):not(:has(.cms-content-list__items li:nth-child(161))) .cms-content-list__panel,
.cms-content-list--step:has(.cms-content-list__state--170:checked):not(:has(.cms-content-list__items li:nth-child(171))) .cms-content-list__panel,
.cms-content-list--step:has(.cms-content-list__state--180:checked):not(:has(.cms-content-list__items li:nth-child(181))) .cms-content-list__panel,
.cms-content-list--step:has(.cms-content-list__state--190:checked):not(:has(.cms-content-list__items li:nth-child(191))) .cms-content-list__panel,
.cms-content-list__state--200:checked ~ .cms-content-list__panel {
  margin-top: 0;
  background: var(--cms-content-color-bg);
}

.cms-content-list--step:has(.cms-content-list__state--10:checked):has(.cms-content-list__items li:nth-child(11)) .cms-content-list__button--20,
.cms-content-list--step:has(.cms-content-list__state--20:checked):has(.cms-content-list__items li:nth-child(21)) .cms-content-list__button--30,
.cms-content-list--step:has(.cms-content-list__state--30:checked):has(.cms-content-list__items li:nth-child(31)) .cms-content-list__button--40,
.cms-content-list--step:has(.cms-content-list__state--40:checked):has(.cms-content-list__items li:nth-child(41)) .cms-content-list__button--50,
.cms-content-list--step:has(.cms-content-list__state--50:checked):has(.cms-content-list__items li:nth-child(51)) .cms-content-list__button--60,
.cms-content-list--step:has(.cms-content-list__state--60:checked):has(.cms-content-list__items li:nth-child(61)) .cms-content-list__button--70,
.cms-content-list--step:has(.cms-content-list__state--70:checked):has(.cms-content-list__items li:nth-child(71)) .cms-content-list__button--80,
.cms-content-list--step:has(.cms-content-list__state--80:checked):has(.cms-content-list__items li:nth-child(81)) .cms-content-list__button--90,
.cms-content-list--step:has(.cms-content-list__state--90:checked):has(.cms-content-list__items li:nth-child(91)) .cms-content-list__button--100,
.cms-content-list--step:has(.cms-content-list__state--100:checked):has(.cms-content-list__items li:nth-child(101)) .cms-content-list__button--110,
.cms-content-list--step:has(.cms-content-list__state--110:checked):has(.cms-content-list__items li:nth-child(111)) .cms-content-list__button--120,
.cms-content-list--step:has(.cms-content-list__state--120:checked):has(.cms-content-list__items li:nth-child(121)) .cms-content-list__button--130,
.cms-content-list--step:has(.cms-content-list__state--130:checked):has(.cms-content-list__items li:nth-child(131)) .cms-content-list__button--140,
.cms-content-list--step:has(.cms-content-list__state--140:checked):has(.cms-content-list__items li:nth-child(141)) .cms-content-list__button--150,
.cms-content-list--step:has(.cms-content-list__state--150:checked):has(.cms-content-list__items li:nth-child(151)) .cms-content-list__button--160,
.cms-content-list--step:has(.cms-content-list__state--160:checked):has(.cms-content-list__items li:nth-child(161)) .cms-content-list__button--170,
.cms-content-list--step:has(.cms-content-list__state--170:checked):has(.cms-content-list__items li:nth-child(171)) .cms-content-list__button--180,
.cms-content-list--step:has(.cms-content-list__state--180:checked):has(.cms-content-list__items li:nth-child(181)) .cms-content-list__button--190,
.cms-content-list--step:has(.cms-content-list__state--190:checked):has(.cms-content-list__items li:nth-child(191)) .cms-content-list__button--200,
.cms-content-list--step:has(.cms-content-list__state--20:checked):not(:has(.cms-content-list__items li:nth-child(21))) .cms-content-list__button--close,
.cms-content-list--step:has(.cms-content-list__state--30:checked):not(:has(.cms-content-list__items li:nth-child(31))) .cms-content-list__button--close,
.cms-content-list--step:has(.cms-content-list__state--40:checked):not(:has(.cms-content-list__items li:nth-child(41))) .cms-content-list__button--close,
.cms-content-list--step:has(.cms-content-list__state--50:checked):not(:has(.cms-content-list__items li:nth-child(51))) .cms-content-list__button--close,
.cms-content-list--step:has(.cms-content-list__state--60:checked):not(:has(.cms-content-list__items li:nth-child(61))) .cms-content-list__button--close,
.cms-content-list--step:has(.cms-content-list__state--70:checked):not(:has(.cms-content-list__items li:nth-child(71))) .cms-content-list__button--close,
.cms-content-list--step:has(.cms-content-list__state--80:checked):not(:has(.cms-content-list__items li:nth-child(81))) .cms-content-list__button--close,
.cms-content-list--step:has(.cms-content-list__state--90:checked):not(:has(.cms-content-list__items li:nth-child(91))) .cms-content-list__button--close,
.cms-content-list--step:has(.cms-content-list__state--100:checked):not(:has(.cms-content-list__items li:nth-child(101))) .cms-content-list__button--close,
.cms-content-list--step:has(.cms-content-list__state--110:checked):not(:has(.cms-content-list__items li:nth-child(111))) .cms-content-list__button--close,
.cms-content-list--step:has(.cms-content-list__state--120:checked):not(:has(.cms-content-list__items li:nth-child(121))) .cms-content-list__button--close,
.cms-content-list--step:has(.cms-content-list__state--130:checked):not(:has(.cms-content-list__items li:nth-child(131))) .cms-content-list__button--close,
.cms-content-list--step:has(.cms-content-list__state--140:checked):not(:has(.cms-content-list__items li:nth-child(141))) .cms-content-list__button--close,
.cms-content-list--step:has(.cms-content-list__state--150:checked):not(:has(.cms-content-list__items li:nth-child(151))) .cms-content-list__button--close,
.cms-content-list--step:has(.cms-content-list__state--160:checked):not(:has(.cms-content-list__items li:nth-child(161))) .cms-content-list__button--close,
.cms-content-list--step:has(.cms-content-list__state--170:checked):not(:has(.cms-content-list__items li:nth-child(171))) .cms-content-list__button--close,
.cms-content-list--step:has(.cms-content-list__state--180:checked):not(:has(.cms-content-list__items li:nth-child(181))) .cms-content-list__button--close,
.cms-content-list--step:has(.cms-content-list__state--190:checked):not(:has(.cms-content-list__items li:nth-child(191))) .cms-content-list__button--close,
.cms-content-list__state--200:checked ~ .cms-content-list__panel .cms-content-list__button--close {
  display: flex;
}

.cms-content-list--all .cms-content-list__items li:nth-child(n + 11) {
  display: none;
}

.cms-content-list--all .cms-content-list__state--all:checked ~ .cms-content-list__items li {
  display: list-item;
}

.cms-content-list--all .cms-content-list__button--more-all {
  display: flex;
}

.cms-content-list--all .cms-content-list__button--close {
  display: none;
}

.cms-content-list--all .cms-content-list__state--all:checked ~ .cms-content-list__panel {
  margin-top: 0;
  background: var(--cms-content-color-bg);
}

.cms-content-list--all .cms-content-list__state--all:checked ~ .cms-content-list__panel .cms-content-list__button--more-all {
  display: none;
}

.cms-content-list--all .cms-content-list__state--all:checked ~ .cms-content-list__panel .cms-content-list__button--close {
  display: flex;
}

.cms-content-related-article {
  display: flex;
  width: 100%;
  padding: var(--cms-content-space-md);
  align-items: center;
  gap: var(--cms-content-space-xs);
  background: var(--cms-content-color-bg-subtle);
}

.cms-content-related-article__image-frame {
  display: flex;
  flex: 0 0 var(--cms-content-related-article-image-frame-size);
  width: var(--cms-content-related-article-image-frame-size);
  height: var(--cms-content-related-article-image-frame-size);
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cms-content-related-article__image {
  display: block;
}

.cms-content-related-article__text {
  min-width: 0;
  flex: 1 1 auto;
  color: var(--cms-content-related-article-color-link);
  font-weight: var(--cms-content-font-weight-bold);
  word-break: break-word;
}

.cms-content-related-article__label {
  width: 100%;
  color: var(--cms-content-related-article-color-label);
  font-size: var(--cms-content-font-size-sm);
  line-height: var(--cms-content-line-height-body);
}

.cms-content-related-article__link,
.cn-platform-content .cms-content-related-article__link {
  display: block;
  width: 100%;
  color: inherit;
  font-size: var(--cms-content-font-size-body);
  line-height: var(--cms-content-line-height-body);
  text-decoration: underline;
  text-decoration-skip-ink: auto;
  text-underline-position: from-font;
}

.cms-content-related-article__link:focus-visible {
  outline: var(--cms-content-border-width-strong) var(--cms-content-border-style) currentColor;
  outline-offset: var(--cms-content-space-2);
}

.cms-content-related-article__arrow-frame {
  position: relative;
  flex: 0 0 var(--cms-content-related-article-arrow-frame-width);
  width: var(--cms-content-related-article-arrow-frame-width);
  height: var(--cms-content-related-article-arrow-frame-height);
}

.cms-content-related-article__arrow {
  position: absolute;
  top: -0.707107px;
  left: -0.707107px;
  display: block;
}

.cms-content-audio-link,
.cn-platform-content .cms-content-audio-link,
.cn-platform-content .cms-content-audio-link:visited {
  display: inline-flex;
  align-items: center;
  gap: var(--cms-content-space-5);
  color: var(--cms-content-audio-link-color);
  font-size: var(--cms-content-font-size-body);
  font-weight: var(--cms-content-font-weight-regular);
  line-height: var(--cms-content-line-height-body);
  text-decoration: none;
  vertical-align: baseline;
}

.cms-content-audio-link__icon {
  display: block;
  flex: 0 0 auto;
}

.cms-content-audio-link__text {
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
}

.cms-content-audio-link:focus-visible {
  outline: var(--cms-content-border-width-strong) var(--cms-content-border-style) currentColor;
  outline-offset: var(--cms-content-space-2);
}

@media (max-width: 655px) {
  .cms-content-list {
    width: calc(100% - var(--cms-content-list-width-offset-sp));
  }
}

@media (max-width: 520px) {
  .cms-content-credit {
    grid-template-columns: var(--cms-content-credit-icon-size) minmax(0, 1fr);
    padding-right: var(--cms-content-space-lg);
  }
}