@charset 'utf-8';
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Zen+Maru+Gothic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&family=Noto+Serif+JP:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@600&text=0123456789&display=swap');
/*==============
    common
===============*/
:root {
  /* color */
  --font-black: #232323;
  --color1: #185453;
  --color2: #b8a94c;
  /* font */
  --en: 'Montserrat', sans-serif;
  --ja: 'Noto Serif JP', sans-serif;
  --number: "Roboto", sans-serif;
}
::selection {
  background: #206e6c;
  color: var(--color2);
}
::-moz-selection {
  background: #206e6c;
  color: var(--color2);
}
html {
  font-size: 10px;
  scroll-behavior: smooth;
}
img {
  user-drag: none;
  -webkit-user-drag: none;
  -moz-user-select: none;
  image-rendering: -webkit-optimize-contrast;
  width: 100%;
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
body {
  font-size: 1.6rem;
  font-family: var(--ja);
  font-weight: 500;
  color: var(--font-black);
  animation: fadeIn 3s forwards;
  margin: 0;
  padding: 0;
  background-color: var(--color1);
}
a {
  text-decoration: none;
  color: initial;
  color: #b8a94c;
  transition: 0.4s all;
}
a:hover {
  opacity: 0.6;
}
.wrap {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}
h2 {
  color: var(--color1);
  font-family: "Baskerville Old Face", "Georgia", serif;
  position: relative;
  padding: clamp(24px, calc(24px + 76 * ((100vw - 320px) / 1120)), 100px) 0 14px 0;
  font-size: clamp(28px, calc(28px + 52 * ((100vw - 320px) / 1120)), 80px);
  text-align: center;
  letter-spacing: 0.03em;
  margin-bottom: clamp(24px, calc(24px + 46 * ((100vw - 320px) / 1120)), 70px);
}
h2::before {
  content: "";
  background: url(../../img/special-page/20th-anniversary/flower_mini_a.png) no-repeat center / cover;
  width: clamp(27px, calc(27px + 72 * ((100vw - 320px) / 1120)), 99px);
  height: clamp(16px, calc(16px + 44 * ((100vw - 320px) / 1120)), 60px);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
h2::after {
  content: "";
  position: absolute;
  width: 47.22vw;
  max-width: 679px;
  height: 1px;
  background-color: var(--color1);
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  bottom: 0;
}
.and-more {
  text-align: center;
  margin-top: clamp(24px, calc(24px + 46 * ((100vw - 320px) / 1120)), 70px);
}
.and-more a {
  background: var(--color1);
  color: var(--color2);
  font-size: 1.8rem;
  padding: 8px 30px 12px;
  border-radius: 5px;
}
@media (max-width: 1200px) {
  .wrap {
    width: 89.6%;
  }
}
@media (max-width: 768px) {
  .and-more a {
    width: calc(100% - 60px);
    display: block;
    text-align: center;
  }
}
/* animation */
.anime {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(50px);
    transition: opacity 0.6s ease, filter 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform, filter;
}
.anime-on {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}
/* ======================
   header
====================== */
header {
  position: fixed;
  top: clamp(32px, calc(32px + 8 * ((100vw - 320px) / 1120)), 40px);
  left: 3.47vw;
  z-index: 1000;
  transform: none;
}
.logo img {
  width: clamp(62px, calc(62px + 108 * ((100vw - 320px) / 1120)), 170px);
  height: auto;
  display: block;
}
/* ======================
   main-visual
====================== */
#main-visual {
  margin-top: clamp(80px, calc(80px + 60 * ((100vw - 320px) / 1120)), 140px);
  position: relative;
}
#main-visual::before {
  content: "";
  position: absolute;
  background: url(../../img/special-page/20th-anniversary/flower_block_A.png) no-repeat;
  background-size: contain;
  width: 21.04vw;
  height: 53.54vw;
  top: 29.72vw;
  left: 0;
  z-index: 5;
}
#main-visual::after {
  content: "";
  position: absolute;
  background: url(../../img/special-page/20th-anniversary/flower_block_B.png) no-repeat;
  background-size: contain;
  width: 26.04vw;
  height: 87.08vw;
  top: 7.78vw;
  right: 0;
  z-index: 5;
}
/* ======================
   anniversarylogo
====================== */
#anniversarylogo {
  padding: clamp(32px, calc(32px + 88 * ((100vw - 320px) / 1120)), 120px) 0 clamp(56px, calc(56px + 144 * ((100vw - 320px) / 1120)), 200px);
  background: var(--color1);
  position: relative;
  text-align: center;
}
#anniversarylogo img {
  width: clamp(156px, calc(156px + 459 * ((100vw - 320px) / 1120)), 615px);
}
#anniversarylogo::before {
  content: "";
  position: absolute;
  background: url(../../img/special-page/20th-anniversary/ivy_left.png) no-repeat;
  background-size: contain;
  width: 20.56vw;
  height: 61.6vw;
  top: 4.65vw;
  left: 0;
}
#anniversarylogo::after {
  content: "";
  position: absolute;
  background: url(../../img/special-page/20th-anniversary/ivy_right.png) no-repeat;
  background-size: contain;
  width: 20.97vw;
  height: 60.14vw;
  top: 7.43vw;
  right: 0;
}
/* ======================
   PERFORMANCES
====================== */
#performances {
  background: var(--color2);
  padding: clamp(40px, calc(40px + 40 * ((100vw - 320px) / 1120)), 80px) 0;
  border-top-left-radius: clamp(80px, calc(80px + 270 * ((100vw - 320px) / 1120)), 350px);
  border-top-right-radius: clamp(80px, calc(80px + 270 * ((100vw - 320px) / 1120)), 350px);
  position: relative;
  z-index: 2;
}
#performances::before {
  content: "";
  background: url(../../img/special-page/20th-anniversary/performances-bg.png) no-repeat;
  width: clamp(342px, calc(320px + 975 * ((100vw - 320px) / 1120)), 1317px);
  height: clamp(293px, calc(293px + 921 * ((100vw - 320px) / 1120)), 1214px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-size: contain;
  z-index: -1;
}
#performances::after {
  content: "";
  position: absolute;
  background: url(../../img/special-page/20th-anniversary/flower_block_C.png) no-repeat;
  width: clamp(68px, calc(68px + 113 * ((100vw - 320px) / 1120)), 181px);
  height: clamp(87px, calc(87px + 142 * ((100vw - 320px) / 1120)), 229px);  
  bottom: -9.72vw;
  right: 4.17vw;
  background-size: cover;
}
#performances .performancesList li {
  display: flex;
  background: var(--color1);
  border-radius: 30px;
  margin-bottom: clamp(30px, calc(30px + 10 * ((100vw - 320px) / 1120)), 40px);
}
#performances .performancesList li:last-child {
  margin-bottom: 0;
}
#performances .performancesList li figure {
  width: 24.56%;
}
#performances .performancesList li figure img {
  border-radius: 30px 0 0 30px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1 / 1;
}
#performances .performancesList li .detail {
  width: calc(75.44% - 80px);
  padding: 36px 40px 16px;
}
#performances .performancesList li .detail h3 {
  color: var(--color2);
  font-weight: bold;
  font-size: clamp(22px, calc(22px + 2 * ((100vw - 320px) / 1120)), 24px);
  line-height: 1.5;
}
#performances .performancesList li .detail .detail-text {
  color: var(--color2);
  font-size: clamp(14px, calc(14px + 4 * ((100vw - 320px) / 1120)), 18px);
  line-height: 1.5;
  margin-top: 10px;
}
#performances .performancesList li .detail .detail-text2 {
  color: var(--color2);
  font-size: clamp(14px, calc(14px + 4 * ((100vw - 320px) / 1120)), 18px);
  line-height: 1.5;
  margin-top: 10px;
  text-indent: -3em;
  padding-left: 3em;
}
#performances .performancesList li .detail .more {
  text-align: right;
}
#performances .performancesList li .detail .more a {
  background: var(--color2);
  color: var(--color1);
  padding: 10px 16px;
  border-radius: 5px;
  display: inline-block;
  margin-top: 30px;
  font-size: 1.8rem;
}
@media (max-width: 1000px) {
  #performances{
    padding-bottom: 16px;
  }
  #performances::before{
    top: 300px;
  }
  #performances .performancesList li {
    display: block;
    padding: 28px;
  }
  #performances .performancesList li figure img {
    border-radius: 0;
  }
  #performances .performancesList li figure,
  #performances .performancesList li .detail {
    width: 100%;
    padding: 0;
  }
  #performances .performancesList li .detail {
    margin-top: 24px;
  }
  #performances .performancesList li .detail .more a {
    width: calc(100% - 32px);
    text-align: center;
  }
  #performances .and-more{
    margin-top: 10px;
  }
  #performances .and-more a{
    background: var(--color2);
    color: var(--color1);
  }
}
/* ======================
   official-goods
====================== */
#official-goods {
  background: var(--color1);
  padding: clamp(40px, calc(40px + 40 * ((100vw - 320px) / 1120)), 80px) 0;
  position: relative;
  z-index: 1;
}
#official-goods::before {
  content: "";
  background: url(../../img/special-page/20th-anniversary/ivy.png) no-repeat;
  width: 34.44vw;
  height: 37.29vw;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  z-index: -1;
}
#official-goods::after {
  content: "";
  background: url(../../img/special-page/20th-anniversary/ivy-2.png) no-repeat;
  width: 34.44vw;
  height: 37.29vw;
  position: absolute;
  bottom: 0;
  right: 0;
  background-size: cover;
  z-index: -1;
}
#official-goods h2 {
  color: var(--color2);
}
#official-goods h2::before {
  content: "";
  background: url(../../img/special-page/20th-anniversary/flower_mini_b.png) no-repeat;
  background-size: cover;
}
#official-goods h2::after {
  background-color: var(--color2);
}
#official-goods .and-more a {
  background: var(--color2);
  color: var(--color1);
}
/* ======================
   news
====================== */
#news {
  background: var(--color2);
  padding: clamp(40px, calc(40px + 40 * ((100vw - 320px) / 1120)), 80px) 0;
  position: relative;
  z-index: 1;
}
#news::before {
  content: "";
  position: absolute;
  background: url(../../img/special-page/20th-anniversary/flower_block_D.png) no-repeat;
  width: clamp(56px, calc(56px + 89 * ((100vw - 320px) / 1120)), 145px);
  height: clamp(55px, calc(55px + 87 * ((100vw - 320px) / 1120)), 142px);
  top: -4.86vw;
  left: 5.56vw;
  background-size: cover;
}
#news::after {
  content: "";
  background: url(../../img/special-page/20th-anniversary/20th-bg.png) no-repeat;
  width: clamp(299px, calc(299px + 848 * ((100vw - 320px) / 1120)), 1147px);
  height: clamp(297px, calc(297px + 838 * ((100vw - 320px) / 1120)), 1135px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-size: contain;
  z-index: -1;
}
#news .wrap {
  max-width: 900px;
}
#news .news-list li {
  position: relative;
  padding: 24px 60px 32px;
  width: calc(100% - 120px);
}
#news .news-list li::after {
  content: "";
  background-color: var(--color1);
  height: 1px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
#news .news-list li a {
  color: var(--color1);
}
#news .news-list li a .news-date {
  font-size: clamp(16px, calc(16px + 8 * ((100vw - 320px) / 1120)), 24px);
  line-height: 1.5;
  font-family: var(--number);
}
#news .news-list li a .news-title {
  font-size: clamp(16px, calc(16px + 2 * ((100vw - 320px) / 1120)), 18px);
  line-height: 1.5;
  font-weight: 800;
  margin-top: 10px;
}
@media (max-width: 1000px) {
  #news .news-list li {
      padding: 24px 24px 32px;
      width: calc(100% - 48px);
  }
}
/* ======================
   footer
====================== */
footer {
  padding: 15px 0;
  display: flex;
  justify-content: center;
}
footer p {
  margin: 0;
  color: #b8a94c;
  font-size: clamp(10px, calc(10px + 6 * ((100vw - 320px) / 1120)), 16px);
}