/*---追加---*/
h3.read{
	font-size: 1.5em;
}

.mb-30{
	margin-bottom: 30px;
}

.mt-50{
	margin-top: 50px;
}

.p-intro {
  background-image: var(--bg-primary);
  background-size: cover;
}

.p-menu {
  padding: 80px 0;
}
.p-menu__header {
  margin-bottom: 3em;
}
.p-menu__list {
  --column-count: 4;
}
@media (max-width: 1024px) {
  .p-menu__list {
    --column-count: 3;
  }
}
@media (max-width: 768px) {
  .p-menu__list {
    --column-count: 2;
  }
}
@media (max-width: 525px) {
  .p-menu__list {
    font-size: var(--font-size-xs);
  }
}
.p-menu__item__link {
  column-gap: 1.2em;
  justify-content: flex-start;
  min-width: unset;
  padding-left: 1.35em;
}
@media (max-width: 525px) {
  .p-menu__item__link {
    --dash-width: 0px;
    padding-right: 1em;
  }
}
.p-menu__item__icon {
  font-size: 2em;
}
@media (max-width: 525px) {
  .p-menu__item__icon {
    font-size: 1.5em;
  }
}
.p-menu__item__text {
  line-height: 1.3;
}

.p-main {
  padding: 120px 0;
}
@media (max-width: 525px) {
  .p-main {
    padding: 90px 0;
  }
}
.p-main__inner {
  display: grid;
  row-gap: 120px;
}
@media (max-width: 525px) {
  .p-main__inner {
    row-gap: 80px;
  }
}

.p-subject__header {
  margin-bottom: 1.75em;
}
@media (max-width: 525px) {
  .p-subject__header {
    font-size: 2.2rem;
  }
}
.p-subject__header__inner {
  display: flex;
  row-gap: 0.25em;
  column-gap: 2em;
  align-items: center;
}
@media (max-width: 768px) {
  .p-subject__header__inner {
    column-gap: 0.2em;
    justify-content: space-between;
  }
}
.p-subject__heading {
  display: flex;
  column-gap: 0.5em;
  align-items: center;
}
.p-subject__heading__icon {
  display: block;
  font-size: 1.2em;
}
.p-subject__heading__text {
  line-height: 1.35;
  word-break: keep-all;
}
.p-subject__labels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1.5em;
  justify-content: flex-end;
  height: fit-content;
  margin-top: 0.3em;
  font-size: var(--font-size-md);
  font-weight: normal;
}
@media (max-width: 768px) {
  .p-subject__labels {
    gap: 0.5em 1em;
    font-size: var(--font-size-sm);
  }
}
@media (max-width: 525px) {
  .p-subject__labels {
    font-size: var(--font-size-xs);
  }
}
.p-subject__labels__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5em 2em 0.6em;
  line-height: 1.3;
  color: var(--color-text-contrast);
  text-align: center;
  word-break: keep-all;
  background-color: var(--color-primary);
}
.p-subject__labels__item:where(body[data-theme-color=gold] *) {
  background-color: rgba(var(--color-primary-rgb), 0.78);
}
.p-subject__labels__item:where(body[data-theme-color=blue] *) {
  background-color: rgba(var(--color-primary-rgb), 0.78);
}
@media (max-width: 525px) {
  .p-subject__labels__item {
    padding: 0.5em 1em 0.6em;
  }
}
.p-subject__overview {
  display: grid;
  gap: 0.2em;
  padding: 0.75em 1em;
  margin-bottom: 1em;
  font-size: var(--font-size-xl);
  color: var(--color-text-contrast);
  background-color: rgba(var(--color-primary-rgb), 60%);
}
.p-subject__overview__item {
  display: flex;
  column-gap: 0.8em;
  align-items: baseline;
}
.p-subject__overview__icon {
  flex-shrink: 0;
}
.p-subject__image {
  aspect-ratio: 1/0.73;
  object-fit: cover;
}
.p-subject__note-list {
  margin-top: 2em;
  font-size: calc(var(--font-size-md) - 1px);
}
.p-subject__buttons {
  display: flex;
  flex-direction: column;
  gap: 1em;
  align-items: flex-end;
  margin-top: 2em;
}
@media (max-width: 525px) {
  .p-subject__buttons {
    /*align-items: center;*/
  }
}
.p-subject__column-list {
  display: grid;
  row-gap: 3.5em;
  padding: 3em var(--container-padding);
  margin-top: 80px;
  background-color: rgba(var(--color-bg-secondary-rgb), 55%);
}
@media (max-width: 525px) {
  .p-subject__column-list {
    padding: 2em var(--container-padding);
    margin-top: 50px;
  }
}

.p-column__heading {
  color: var(--color-heading-primary);
}
@media (min-width: 769px) {
  .p-column__heading {
    margin-top: 1em;
  }
}
.p-column__image {
  aspect-ratio: 1/0.77;
  object-fit: cover;
}

.p-collab {
  padding: 120px 0 180px;
  background-image: var(--bg-primary);
  background-position: center center;
  background-size: cover;
}
@media (max-width: 525px) {
  .p-collab {
    padding-top: 80px;
  }
}
.p-collab__heading {
  margin-bottom: 1.5em;
}
.p-collab__body {
  margin-top: 2.5em;
}
.p-collab__list {
  --column-count: 3;
  --column-gap: 1em;
  --row-gap: 1em;
}
@media (max-width: 768px) {
  .p-collab__list {
    --column-count: 2;
  }
}
@media (max-width: 525px) {
  .p-collab__list {
    --column-count: 1;
  }
}
.p-collab__banner {
  display: block;
}
.p-collab__banner:link {
  transition: opacity 0.2s;
}
.p-collab__banner:link:hover {
  opacity: 0.7;
}


/*--- pattern用css ---*/
.p-wrapper {
  --section-gap-xl: 180px;
  --section-gap-lg: 120px;
  --section-gap-md: 90px;
  --section-gap: var(--section-gap-lg);
  padding-bottom: 180px;
}
@media (max-width: 525px) {
  .p-wrapper {
    --section-gap: var(--section-gap-md);
  }
}

.p-intro {
  padding-bottom: var(--section-gap);
  background-image: var(--bg-primary);
  background-size: cover;
}

.p-pattern01 {
  margin-top: var(--section-gap);
}
.p-pattern01__list {
  --column-count: 4;
  --column-gap: 1.25em;
  --row-gap: 1.25em;
}
@media (max-width: 1024px) {
  .p-pattern01__list {
    --column-count: 3;
  }
}
@media (max-width: 768px) {
  .p-pattern01__list {
    --column-count: 2;
  }
}
.p-pattern01__list a {
  min-width: unset;
}

.p-pattern02 {
  margin-top: var(--section-gap-md);
}
.p-pattern02__header {
  margin-bottom: 5em;
}
@media (max-width: 525px) {
  .p-pattern02__header {
    margin-bottom: 3.5em;
  }
}
.p-pattern02__column {
  padding: 3em var(--container-padding);
  margin-top: 3em;
  background-image: var(--bg-primary);
  background-size: cover;
}
@media (max-width: 525px) {
  .p-pattern02__column {
    padding: 2em var(--container-padding);
    margin-top: 2em;
  }
}

.p-pattern03 {
  margin-top: var(--section-gap);
}
.p-pattern03__header {
  margin-bottom: 5em;
}
@media (max-width: 525px) {
  .p-pattern03__header {
    margin-bottom: 3.5em;
  }
}

.p-pattern04 {
  margin-top: var(--section-gap);
}
.p-pattern04__header {
  margin-bottom: 5em;
}
@media (max-width: 525px) {
  .p-pattern04__header {
    margin-bottom: 3.5em;
  }
}

.p-pattern05 {
  margin-top: var(--section-gap);
}
.p-pattern05__header {
  margin-bottom: 4em;
}
@media (max-width: 525px) {
  .p-pattern05__header {
    margin-bottom: 2.5em;
  }
}

.p-pattern05__list {
  display: grid;
  gap: 2.5em;
	margin: 30px 10px 40px;
	padding: 50px 60px;
	border: 1px solid #B3B2B2;
}
@media (max-width: 525px) {
	.p-pattern05__list {
		padding: 20px !important;
	}
}

.p-pattern05__list {
  display: grid;
  gap: 2.5em;
	margin: 30px 10px 40px;
	padding: 50px 60px;
	border: 1px solid #B3B2B2;
}

.p-pattern06 {
  margin-top: var(--section-gap);
}
.p-pattern06__header {
  margin-bottom: 5em;
}
@media (max-width: 525px) {
  .p-pattern06__header {
    margin-bottom: 3.5em;
  }
}
.p-pattern06__table {
  padding-bottom: 1em;
}

.p-pattern07 {
  margin-top: var(--section-gap);
}
.p-pattern07__header {
  margin-bottom: 5em;
}
@media (max-width: 525px) {
  .p-pattern07__header {
    margin-bottom: 3.5em;
  }
}
.p-pattern07__list {
  display: grid;
  gap: 5em;
}

.p-pattern08 {
  margin-top: var(--section-gap);
}
.p-pattern08__header {
  margin-bottom: 5em;
}
@media (max-width: 525px) {
  .p-pattern08__header {
    margin-bottom: 3.5em;
  }
}
.p-pattern08__body {
  container-type: inline-size;
}
.p-pattern08__list {
  --column-count: 3;
  --column-gap: min(2.5em, calc(4 * var(--vw)));
  --row-gap: 3em;
}
@container (width <= 850px) {
  .p-pattern08__list {
    --column-count: 2;
  }
}
@container (width <= 550px) {
  .p-pattern08__list {
    --column-count: 1;
  }
}

.p-bg-part {
  padding-top: var(--section-gap);
  padding-bottom: var(--section-gap);
  margin-top: var(--section-gap);
  background-image: var(--bg-primary);
  background-size: cover;
}

.p-pattern09__header {
  margin-bottom: 5em;
}
@media (max-width: 525px) {
  .p-pattern09__header {
    margin-bottom: 3.5em;
  }
}

.p-pattern10 {
  margin-top: var(--section-gap-md);
}

.p-pattern11 {
  margin-top: var(--section-gap);
}
.p-pattern11__header {
  margin-bottom: 5em;
}
@media (max-width: 525px) {
  .p-pattern11__header {
    margin-bottom: 3.5em;
  }
}
.p-pattern11__intro {
  max-width: 880px;
  margin-inline: auto;
  margin-bottom: 3em;
}
.p-pattern11__list {
  --row-gap: 1em;
  max-width: 440px;
  margin-inline: auto;
  font-size: var(--font-size-xl);
  font-weight: bold;
}

.p-pattern12 {
  margin-top: var(--section-gap);
}

.p-pattern13 {
  margin-top: var(--section-gap);
}