/* --------------------------------------------------
Contents
-------------------------------------------------- */
.news { display: flex; flex-direction: column; row-gap: 5rem; }
.newsSection { width: 100%; padding: 7rem 0 0; }
.newsSection__title { margin: 0 0 3rem; }
.newsSection__titleEn { font-size: 1.4rem; letter-spacing: 0.1em; margin: 0 0 0.7rem; }
.newsSection__titleJp { font-size: 1.8rem; }
.newsSection__visual { margin: 0 auto 3rem; }
.newsSection__visualImage { overflow: hidden; }
.newsSection__visualImage img { display: block; transition: transform 1.2s var(--ease) 0s; }
.newsSection__visualImage.isShow img { transform: scale(1.075); }
.newsSection--artist .newsSection__visualImage img { aspect-ratio: 400 / 400; }
.newsSection--giftkit .newsSection__visualImage img, .newsSection--shoppingbag .newsSection__visualImage img, .newsSection--campaign .newsSection__visualImage img, .newsSection--holidaygift .newsSection__visualImage img { aspect-ratio: 750 / 438; }
.newsSection__visualCaption { font-size: 1rem; margin: 1.2rem 0 0; }
.newsSection:not(.newsSection--artist) .newsSection__visual { width: 84%; }
.newsSection--artist .newsSection__visual--foot { width: 62.93%; margin: 0 auto; }
.newsSection--artist .newsSection__visual--foot img { aspect-ratio: 400 / 578; }
.newsSection__content { width: 88%; margin: 0 auto; }
.newsSection__contentName { font-size: 2.2rem; margin: 7rem 0 2rem; }
.newsSection__contentDesc { font-size: 1.2rem; line-height: 2; display: flex; flex-direction: column; row-gap: 1.2rem; }
.newsSection__contentDescText { width: 100%; }
.newsSection__contentInstagram { font-size: 1.6rem; margin: 2.6rem 0; }
.newsSection__contentInstagramLink { display: inline-flex; align-items: center; column-gap: 0.5rem; }
.newsSection__contentInstagramLink img { width: 2.1rem; aspect-ratio: 1; filter: grayscale(1) brightness(0); }
.newsSection__contentBtn { width: 21.6rem; height: 3rem; font-size: 1.4rem; color: var(--white-color); margin: 6rem auto 12rem; }
.newsSection__contentBtnLink { height: 100%; display: flex; justify-content: center; align-items: center; background: var(--primary-color); }
.newsSection__contentLinkText { display: inline-block; font-size: 1.2rem; margin: 2.4rem 0 0; padding: 0 0 0.5rem; position: relative; overflow: hidden; }
.newsSection__contentLinkTextLink::after { display: block; content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-bottom: 0.1rem solid; }

@keyframes hoverline { 0% { transform: translate(0, 0); opacity: 1; }
  49.9% { transform: translate(100%, 0); opacity: 1; }
  50% { transform: translate(100%, 0); opacity: 0; }
  50.1% { transform: translate(-100%, 0); opacity: 0; }
  50.2% { transform: translate(-100%, 0); opacity: 1; }
  100% { transform: translate(0, 0); opacity: 1; } }
@media screen and (min-width: 768px) { .news { row-gap: 10rem; }
  .newsSection { padding: 10rem 0 0; }
  .newsSection__title { margin: 0 0 5.5rem; }
  .newsSection__titleEn { font-size: 2.4rem; margin: 0 0 1.3rem; }
  .newsSection__titleJp { font-size: 3rem; }
  .newsSection__visual { margin: 0 auto 5rem; }
  .newsSection__visualImage:not(.newsSection__visualImage--noAnim):hover img { transform: scale(1.05); }
  .newsSection__visualCaption { font-weight: 500; font-size: 1.6rem; margin: 2.8rem 0 0; }
  .newsSection:not(.newsSection--artist) .newsSection__visual { width: 75rem; max-width: 90%; }
  .newsSection--artist .newsSection__visual { width: 40rem; }
  .newsSection--artist .newsSection__visual--foot { width: 40rem; }
  .newsSection__content { width: 90%; }
  .newsSection__contentName { font-size: 3.3rem; margin: 8.4rem 0 4rem; }
  .newsSection__contentDesc { font-weight: 500; font-size: 1.6rem; line-height: 1.94; row-gap: 2.3rem; }
  .newsSection__contentInstagram { font-size: 2.3rem; margin: 2.6rem 0 4.5rem; }
  .newsSection__contentInstagramLink { column-gap: 0.7rem; }
  .newsSection__contentInstagramLink img { width: 3rem; }
  .newsSection__contentBtn { width: 28.4rem; height: 3.6rem; font-size: 1.8rem; margin: 9rem auto 18rem; }
  .newsSection__contentBtnLink { transition: background 0.4s var(--easeout) 0s; }
  .newsSection__contentBtnLink:hover { background: var(--acc-color); }
  .newsSection__contentLinkText { font-size: 1.6rem; margin: 3.8rem 0 0; }
  .newsSection__contentLinkTextLink:hover::after { animation: hoverline 0.8s var(--ease) 0s forwards; } }
