/* //////////////////////////////////////////////////

Title : single.scss
For   : aoyama-flowermarcket/

Created       : 2025-02-20
Last Modified : 2025-02-20

==========================================

Content

////////////////////////////////////////////////// */
/**
 * common layout
 */
.l-single-article__container {
  max-width: var(--container-middle);
  width: 95%;
  margin-inline: auto;
}

/**
 * single header
 */
.p-single__header {
  display: grid;
  grid-template-columns: 100%;
  row-gap: var(--gap-y-header);
}

/* --- post date / categories --- */
.c-single__post-date::before {
  content: "";
  width: calc(var(--text-base) / var(--text-sm) * 1em);
  height: calc(var(--text-base) / var(--text-sm) * 1em);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOCA0LjY2NjY3VjhIMTEuMzMzM004IDE0QzQuNjg2MjkgMTQgMiAxMS4zMTM3IDIgOEMyIDQuNjg2MjkgNC42ODYyOSAyIDggMkMxMS4zMTM3IDIgMTQgNC42ODYyOSAxNCA4QzE0IDExLjMxMzcgMTEuMzEzNyAxNCA4IDE0WiIgc3Ryb2tlPSIjNEM2NjU1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=");
  background-size: 100%;
  background-repeat: no-repeat;
}

/* --- for small viewport --- */
@media (max-width: 767px) {
  .p-single__header {
    --gap-y-header: 12px;
  }
}
/* --- for large viewport --- */
@media (min-width: 768px) {
  .p-single__header {
    --gap-y-header: 24px;
  }
}
/**
 * eyecatch
 */
.p-single__eyecatch {
  -webkit-margin-before: var(--mt-eyecatch);
          margin-block-start: var(--mt-eyecatch);
}

/* --- for small viewport --- */
/* --- for large viewport --- */
@media (min-width: 768px) {
  .p-single__eyecatch {
    --mt-eyecatch: 40px;
  }
}
/**
 * contents
 */
.p-single-article__contents {
  -webkit-margin-before: 3em;
          margin-block-start: 3em;
  line-height: var(--leading-loose);
}
.p-single-article__contents > *:first-child {
  -webkit-margin-after: 7.5em;
          margin-block-end: 7.5em;
}
.p-single-article__contents :where(.wp-block-group, .wp-block-columns) {
  -webkit-margin-after: 0;
          margin-block-end: 0;
}
.p-single-article__contents :where(.wp-block-group, .wp-block-columns):not(:first-of-type) {
  -webkit-margin-before: 5em;
          margin-block-start: 5em;
}
.p-single-article__contents :where(.wp-block-group, .wp-block-columns).is-vertical {
  max-width: 576px;
  width: 100%;
  margin-inline: auto;
}
.p-single-article__contents :where(.wp-block-group, .wp-block-columns).is-layout-flex {
  -moz-column-gap: 3em;
       column-gap: 3em;
}
.p-single-article__contents :where(.wp-block-column) > * + * {
  -webkit-margin-before: 3em;
          margin-block-start: 3em;
}
.p-single-article__contents :where(h1, h2, h3, h4, h5, h6) {
  -webkit-margin-after: calc(48px / var(--fs-heading) * 1em);
          margin-block-end: calc(48px / var(--fs-heading) * 1em);
  font-family: var(--font-ja-serif);
  font-weight: 400;
  font-size: var(--fs-heading);
  color: var(--color-primary);
  letter-spacing: 0.06em;
}
.p-single-article__contents :where(h1) {
  --fs-heading: 32px;
  -webkit-margin-before: calc(120px / var(--fs-heading) * 1em);
          margin-block-start: calc(120px / var(--fs-heading) * 1em);
}
.p-single-article__contents :where(h2) {
  -webkit-padding-start: 1em;
          padding-inline-start: 1em;
  border-left: calc(6px / var(--text-2xl) * 1em) solid var(--color-primary);
}
.p-single-article__contents :where(h2, h3) {
  --fs-heading: var(--text-2xl);
}
.p-single-article__contents :where(h4, h5, h6) {
  --fs-heading: var(--text-xl);
}
.p-single-article__contents :where(p):not(:first-child) {
  -webkit-margin-before: 2.5em;
          margin-block-start: 2.5em;
}
.p-single-article__contents :where(ol, ul) {
  list-style-position: inside;
}
.p-single-article__contents :where(ol, ul):not(:first-child) {
  -webkit-margin-before: 2.5em;
          margin-block-start: 2.5em;
}
.p-single-article__contents :where(ol) {
  list-style-type: decimal;
}
.p-single-article__contents :where(ul) {
  list-style-type: disc;
}
.p-single-article__contents :where(.has-inline-color) {
  display: inline-block;
  padding-inline: 0.375em;
}
.p-single-article__contents .wp-block-buttons {
  -webkit-margin-before: 5em;
          margin-block-start: 5em;
}
.p-single-article__contents .c-post-button__link {
  --bg-size-button-default: 0%;
  --size-button-icon: calc(24 / 14 * 1em);
  --transform-button-icon-default: calc(8 / 14);
  position: relative;
  display: var(--button-display, grid);
  grid-template-columns: 1fr var(--size-button-icon);
  align-items: center;
  -moz-column-gap: 0.5714285714em;
       column-gap: 0.5714285714em;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  color: var(--color-button-state, var(--color-primary));
  text-align: var(--button-text-align, left);
  letter-spacing: 0.04em;
  transition: all var(--transition-default);
  line-height: var(--button-line-height, 1);
  font-size: var(--text-sm);
  font-family: var(--font-ja-sans-serif);
  font-weight: 500;
}
.p-single-article__contents .c-post-button__link:hover, .p-single-article__contents .c-post-button__link:active {
  --bg-size-button-active: calc(10 / 14 * 1em);
  --transform-button-icon-active: 1;
}
.l-main.is-inverted .p-single-article__contents .c-post-button__link {
  --color-button-state: var(--color-white);
  --bg-color-button-icon-state: var(--color-white);
  --bg-image-button-icon-state: var(--icon-arrow-dark-path);
}
.p-single-article__contents .c-post-button__link::after {
  content: "";
  width: var(--size-button-icon);
  height: var(--size-button-icon);
  border-radius: 100vh;
  background-color: var(--bg-color-button-icon-state, var(--color-primary));
  background-image: var(--bg-image-button-icon-state, var(--icon-arrow-white-path));
  background-size: var(--bg-size-button-active, var(--bg-size-button-default));
  background-repeat: no-repeat;
  background-position: center center;
  transform: scale(var(--transform-button-icon-active, var(--transform-button-icon-default)));
  transition: all var(--transition-default);
}

/**
 * pager
 */
.c-single-nav {
  -webkit-margin-before: var(--mt-nav);
          margin-block-start: var(--mt-nav);
  font-size: var(--text-base);
  color: var(--color-primary);
}
.c-single-nav__inner {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: space-between;
  gap: 2.5em;
}
.c-single-nav__item {
  display: flex;
  align-items: center;
  gap: 1em;
}
.c-single-nav__item[data-role=prev] {
  grid-column: 1;
}
.c-single-nav__item[data-role=prev]::before {
  --size-button-rounded: calc(40 / 14 * 1em);
  --bg-button-rounded: var(--color-primary) var(--icon-arrow-white-path)
    50% no-repeat;
  content: "";
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--size-button-rounded);
  height: var(--size-button-rounded);
  aspect-ratio: var(--aspect-square);
  border-radius: var(--rounded-full);
  background: var(--bg-button-rounded-status, var(--bg-button-rounded));
  color: var(--color-button-rounded-status, var(--color-primary));
  transition: all var(--transition-default);
  flex-shrink: 0;
  transform: rotate(180deg);
}
.c-single-nav__item[data-role=next] {
  grid-column: 2;
}
.c-single-nav__item[data-role=next]::after {
  --size-button-rounded: calc(40 / 14 * 1em);
  --bg-button-rounded: var(--color-primary) var(--icon-arrow-white-path)
    50% no-repeat;
  content: "";
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--size-button-rounded);
  height: var(--size-button-rounded);
  aspect-ratio: var(--aspect-square);
  border-radius: var(--rounded-full);
  background: var(--bg-button-rounded-status, var(--bg-button-rounded));
  color: var(--color-button-rounded-status, var(--color-primary));
  transition: all var(--transition-default);
  flex-shrink: 0;
}
.c-single-nav__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: var(--line-clamp-title);
  max-height: calc(var(--leading-relaxed) * var(--line-clamp-title) * 1em);
  line-height: var(--leading-relaxed);
}

/* --- for small viewport --- */
@media (max-width: 767px) {
  .c-single-nav {
    --mt-nav: 100px;
  }
  .c-single-nav__title {
    --line-clamp-title: 2;
  }
}
/* --- for large viewport --- */
@media (min-width: 768px) {
  .c-single-nav {
    --mt-nav: 200px;
  }
  .c-single-nav__title {
    --line-clamp-title: 1;
  }
}
/*# sourceMappingURL=single.css.map */