/* line-clamp .p-lc
styleの場合
<p class="p-lc" style="--lc:2;">text</p> pcとspが同じ
<p class="p-lc" style="--lc-pc:2;--lc-sp:3;">text</p>  pcとspが別
----------------------------------------------------------------------------- */
[class*="-lc"] {
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  overflow:hidden;
  -webkit-line-clamp: var(--lc);
  line-clamp: var(--lc);
}
.-lc_1 {
  --lc:1;
}
.-lc_2 {
  --lc:2;
}
.-lc_3 {
  --lc:3;
}
.-lc_4 {
  --lc:4;
}
.-lc_5 {
  --lc:5;
}
.-lc_6 {
  --lc:6;
}
@media (width > 767px) {
  .-lc_pc_1 {
    --lc:1;
  }
  .-lc_pc_2 {
    --lc:2;
  }
  .-lc_pc_3 {
    --lc:3;
  }
  .-lc_pc_4 {
    --lc:4;
  }
  .-lc_pc_5 {
    --lc:5;
  }
  .-lc_pc_6 {
    --lc:6;
  }
}
@media (width <= 767px) {
  .-lc_sp_1 {
    --lc:1;
  }
  .-lc_sp_2 {
    --lc:2;
  }
  .-lc_sp_3 {
    --lc:3;
  }
  .-lc_sp_4 {
    --lc:4;
  }
  .-lc_sp_5 {
    --lc:5;
  }
  .-lc_sp_6 {
    --lc:6;
  }
}

/* ローディング共通
----------------------------------------------------------------------------- */
.cms_common-loading {
	width: 60px;
	aspect-ratio: 2;
	--_g: no-repeat radial-gradient(circle closest-side,var(--bc_black) 90%,#0000);
	background:
		var(--_g) 0%   50%,
		var(--_g) 50%  50%,
		var(--_g) 100% 50%;
	background-size: calc(100%/3) 50%;
	animation: l3 1s infinite linear;
  pointer-events: none;
}
@keyframes l3 {
	20%{background-position:0%   0%, 50%  50%,100%  50%}
	40%{background-position:0% 100%, 50%   0%,100%  50%}
	60%{background-position:0%  50%, 50% 100%,100%   0%}
	80%{background-position:0%  50%, 50%  50%,100% 100%}
}

/* パララックスの動き
----------------------------------------------------------------------------- */
.cms_js-list_item-ios {
  transition-property: opacity;
  transition-duration: 1s;
  &:not(.is-active) {
    opacity:0;
    pointer-events: none;
  }
}

/* ドレスリスト
----------------------------------------------------------------------------- */
.cms_common-dress_list {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-flow:dense;
  gap:8.0rem 2.0rem;
  padding-inline:2.0rem;
  padding-bottom:8.0rem;

  @media (width <= 767px) {/* SP */
    grid-template-columns:repeat(2,1fr);
    gap:.8rem 1.0rem;
    padding-inline:1.0rem;
    padding-bottom:.8rem;
  }


  .item {
    .content_wrap:not(.-mylist) &.is-em {
      grid-row:span 2;
      grid-column:span 2;
      .item-link {
        .-of {
          @media (width > 767px) {/* PC */
            aspect-ratio:770 / 1028;
          }
          @media (width <= 767px) {/* SP */
            aspect-ratio:370/494;
          }
        }
      }
    }
  }
  .item-link {
      display:block;
      position:relative;

      @media (width > 767px) {/* PC */
        @media (hover:hover) {
          &:hover {
            .-of > img {
              &.f {
                opacity:0;
              }
              &.b {
                opacity:1;
              }
            }
          }
        }
      }

    .-of {
      width:100%;
      height:auto;
      aspect-ratio:375/474;
      position:relative;
      @media (width <= 767px) {/* SP */
        aspect-ratio:180/227;
      }

      > img {
        position:absolute;
        top:0;
        transition-property: opacity;
        transition-duration:.5s;
        pointer-events: none;
        &.f {

        }
        &.b {
          opacity:0;
        }
      }
    }
    .text {
      padding-top:1.0rem;
      color:var(--bc_blue_gray);
      font-family:var(--ff_en);
      font-weight:400;
      line-height: 1.3;
      @media (width > 767px) {/* PC */
        position:absolute;
        top:100%;
      }
      @media (width <= 767px) {/* SP */
        padding-top:.8rem;
      }
      .name {
        margin-bottom:.04rem;
        font-size:1.4rem;
        font-weight: inherit;
        @media (width <= 767px) {/* SP */
          font-size:1.3rem;
        }
      }
      .id {
        font-size:1.0rem;
      }
    }
  }
}

/* ジャーナル
----------------------------------------------------------------------------- */
.cms_common-journal_list {
  display:grid;
  @media (width > 767px) {/* PC */
    grid-template-columns: repeat(3,1fr);
    gap:12.0rem 8.0rem;
  }
  @media (width <= 767px) {/* SP */
    gap:4.0rem;
  }

  .item {
    .link {
      display:flex;
      flex-direction: column;
      @media (hover:hover) {
        &:hover {
          .thumb > img {
            transform: scale(1.05);
          }
        }
      }
    }
    .thumb {
      margin-bottom:1.2rem;
      position:relative;
      overflow: hidden;
      @media (width <= 767px) {/* SP */
        margin-bottom:2.0rem;
      }
      > img {
        display:block;
        width:100%;
        height:auto;
        object-fit:cover;
        aspect-ratio:400 / 267;
        position:relative;
        z-index: 0;
        transition-property: transform;
        transition-duration:.5s;
      }
      .category {
        display:flex;
        justify-content: center;
        padding:.6rem .8rem .5rem;
        font-size:1.2rem;
        min-width:15.0rem;
        line-height:1;
        letter-spacing: .05em;
        color:#fff;
        background-color:rgb(from #2A303D r g b / .5);
        position:absolute;
        bottom:0;
        left:0;
      }
    }
    .text {
      font-family:var(--ff_min);
      .title {
        margin-bottom:.8rem;
        font-weight:500;
        font-size:1.6rem;
        line-height:1.6;
        letter-spacing: .05em;
        @media (width > 767px) {/* PC */
          min-height:2lh;
        }
        @media (width <= 767px) {/* SP */
          font-size:1.4rem;
        }
      }
      .desc {
        font-size:1.3rem;
        line-height:1.8;
        letter-spacing: .05em;
        color:var(--bc_black_text);
        @media (width > 767px) {/* PC */
          min-height:2lh;
        }
        @media (width <= 767px) {/* SP */
          font-size:1.3rem;
        }
      }
    }
    .date {
      margin-top:1.2rem;
      border-top:1px solid var(--bc_line);
      padding-top:1.2rem;
      font-family:var(--ff_en);
      font-size:1.5rem;
      font-weight:400;
      line-height:1.7;
      letter-spacing: .05em;
      @media (width <= 767px) {/* SP */
        font-size:1.2rem;
        line-height:1;
      }
    }
  }

}


/* ニュース
----------------------------------------------------------------------------- */
.cms_common-news_list {
  border-top:1px solid var(--bc_line);
  @media (width > 767px) {/* PC */
  }

  .item {
    border-bottom:1px solid var(--bc_line);
    font-family:var(--ff_min);
    .link {
      display:grid;
      grid-template-rows:auto auto 1fr;
      grid-template-columns: 1fr 20.0rem;
      align-items: flex-start;
      gap:1.6rem 4.0rem;
      padding-block:4.0rem;
      transition-property: opacity;
      transition-duration: .5s;
      &:not(:has(.thumb)) {
        grid-template-columns: 1fr;
      }
      @media (hover:hover) {
        &:hover {
          opacity: .8;
          .thumb > img {
            transform: scale(1.2);
          }
        }
      }
      @media (width <= 767px) {/* SP */
        grid-template-columns: 1fr 10.0rem;
        gap:.8rem 1.6rem;
        padding-block:2.4rem;
      }
    }
    .thumb {
      grid-row:1/-1;
      grid-column:2/3;
      overflow:hidden;
      @media (width <= 767px) {/* SP */
        grid-row:1/-2;
      }
      > img {
        display:block;
        width:100%;
        height:auto;
        object-fit:cover;
        aspect-ratio:200 / 134;
        position:relative;
        z-index: 0;
        transition-property: transform;
        transition-duration:.5s;
      }
      .category {
      }
    }
    .category {
      grid-column:1/2;
      border:1px solid;
      border-radius:3px;
      padding-inline:.6rem;
      width:fit-content;
      font-size:1.4rem;
      line-height:1.5;
      letter-spacing: 0;
      @media (width <= 767px) {/* SP */
        font-size:1.2rem;
      }
    }
    .title {
      grid-column:1/2;
      font-weight:500;
      font-size:1.6rem;
      line-height:1.8;
      letter-spacing: .05em;
      @media (width > 767px) {/* PC */
      }
      @media (width <= 767px) {/* SP */
        font-size:1.5rem;
        letter-spacing:0;
      }
    }
    .date_tag {
      grid-column:1/2;
      display:flex;
      align-items: flex-start;
      font-size:1.4rem;
      line-height:1.5;
      @media (width <= 767px) {/* SP */
        grid-row:-2/-1;
        grid-column:1/-1;
        font-size:1.2rem;
      }

      .date {
        flex-shrink: 0;
      }
      .tags {
        --my-cgap:1.6rem;
        display:flex;
        flex-wrap:wrap;
        gap:.8rem var(--my-cgap);
        margin-left:var(--my-cgap);
        padding-left:calc(var(--my-cgap) + 1px);
        position:relative;
        @media (width <= 767px) {/* SP */
          --my-cgap:1.2rem;
        }
        &::before {
          content:"";
          border-right:1px solid var(--bc_line);
          height:1em;
          position:absolute;
          top:calc(.5lh - .5em);
          left:0;
        }
        > li {
          &::before {
            content:"#";
          }
        }
      }
    }
  }

}



/* Archive Pager */
.cms_common-archive_pager {
	margin-top:8.0rem;
	display:flex;
	justify-content: center;

	@media (width <= 767px) {
		margin-top:5.6rem;
	}

	& > .wp-pagenavi {
		display:flex;
		justify-content: center;
		align-items: center;
		gap:2.4rem;
    font-family:var(--ff_en);
		font-size:1.8rem;
		line-height:1;
		letter-spacing: 0;
		color:currentColor;
		position:relative;
    &:not(.previouspostslink) {
      margin-left:calc(2.4rem + 1em);
    }
    &:not(.nextpostslink) {
      margin-right:calc(2.4rem + 1em);
    }
	}

	a,.wp-pagenavi > span {
		display:flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		text-align:center;
		text-decoration: none;

		&:not(.extend) {
			box-sizing: border-box;
			height:auto;
      padding-block:.2rem;
			aspect-ratio: 1/1;

			@media (hover) {
				transition-property: color, background;
				transition-duration: .5s;
				&:is(a:not(.previouspostslink):not(.nextpostslink)):hover {
					color:currentColor;
				}
				&:is(.previouspostslink,.nextpostslink):hover {
					&::after {
						background-color:currentColor;
					}
				}
			}

			@media (width <= 767px) {
				width:.20rem;
			}
		}
		&:not(.extend,.previouspostslink,.nextpostslink) {
		}
		&:is(.pages) {
			display: none;
		}
		&:is(.current) {
			text-decoration: underline;
			text-underline-offset: 4px;
			@media (width <= 767px) {
				text-underline-offset: 2px;
			}
		}
		&:is(.extend) {
			width:12px;
			background-image:radial-gradient(circle at center, currentColor 0%, currentColor 50%, transparent 50%, transparent 100%);
			background-size: 4px 4px;
			background-position: center;
			background-repeat: repeat-x;
		}
		&:is(.previouspostslink,.nextpostslink) {
			display:flex;
			justify-content: center;
			align-items: center;
      width:1em;
      height:1em;

			&::after {
				content:"";
				display:block;
				width:.7rem;
        height:auto;
				aspect-ratio:7/12;
				background-color:currentColor;
				mask-image: url(/antonio-riva/assets/img/common/ico_paging_arrow.svg);
				mask-position:center;
				mask-size: contain;
				mask-repeat: no-repeat;
				transition-property: background-color;
				transition-duration: .5s;

				@media (width <= 767px) {
				}
			}
		}
		&:is(.previouspostslink) {
      order:-1;
			transform:scaleX(-1);
		}
		&:is(.nextpostslink) {
      order:100;
		}
	}
}




.cms_common-single_pager {
	position: relative;
	display: grid;
  grid-template-columns:repeat(3, 13.0rem);
  margin-inline:auto;
  margin-top:11.2rem;
  width:fit-content;
	gap: 4.0rem;
  @media (width <= 767px) {
    grid-template-columns:8.0rem 12.0rem 8.0rem;
    gap:3.5rem;
    margin-top:7.2rem;
  }

  > a {
    display:flex;
    align-items: center;
    font-family:var(--ff_en);
    font-size:1.5rem;
    line-height:1;
    color:var(--bc_black);
    border-bottom:1px solid;
    padding-block:.8rem;

    transition-property: opacity;
    transition-duration:.5s;
    @media (hover:hover) {
      &:hover {
        opacity:.8;
      }
    }
  }


  .archive {
    grid-column:2/3;

    &::after {
      margin-left:auto;
      content: "";
      width: 1.1rem;
      height: auto;
      aspect-ratio: 1 / 1;
      mask-image: url(/antonio-riva/assets/img/common/ico_column.svg);
      mask-size: contain;
      mask-repeat: no-repeat;
      background-color: currentColor;
    }
  }
  :is(.prev, .next) {
    justify-content: center;
    position:relative;
    @media (width > 767px) {
      > span {
        margin-inline:auto;
      }
    }
    @media (width <= 767px) {
      justify-content: space-between;
    }

    &::after {
      flex-shrink: 0;
      content: "";
      width: 1.6rem;
      height: auto;
      aspect-ratio: 12 / 7;
      mask-image: url(/antonio-riva/assets/img/common/ico_paging_arrow.svg);
      mask-size: contain;
      mask-repeat: no-repeat;
      background-color: currentColor;
      @media (width <= 767px) {/* SP */
      }
    }
  }
	.prev {
    flex-direction: row-reverse;
    grid-column:1/2;
    &::after {
      transform:scaleX(-1);
    }
	}
	.next {
    grid-column:3/4;
    &::after {
    }
	}
}

.cms_common_js-side-sticky {
  --my-h:0;
  @media (width > 767px) {
    position:sticky;
    &.is-top {
      top:12.0rem;
    }
    &:not(.is-top) {
      top:calc(100dvh - var(--my-h) - 4.0rem);
    }
  }
}


.cms_common-share {
  .post-contents + & {
    margin-top:8.0rem;
    @media (width <= 767px) {
      margin-top:5.6rem;
    }
  }
  display:flex;
  align-items: center;
  margin-inline:auto;
  width:fit-content;
  color:var(--bc_blue_gray);
  font-family:var(--ff_en);
  font-size:1.6rem;
  line-height:1;
  letter-spacing: .02em;
  gap:1.6rem;
  @media (width <= 767px) {
    gap:2.4rem;
  }

  .list {
    display:flex;
    gap:1.6rem;
    @media (width <= 767px) {
      gap:2.4rem;
    }

    img {
      width:2.1rem;
      height:auto;
    }
  }
}