/* =========================================================
home
========================================================= */
.main-cont {
  border-top: 1px solid #000;
  background: #fff;
  position: relative;
  z-index: 1;
}

.page-ft {
  min-height: 100vh;
}

.page-ft__bottom {
  background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.83) 100%);
  color: #fff;
}

@media (max-width: 768px) {
  .page-ft__bottom {
    padding: 83px clamp(1px, 6.4vw, 24px) 16px;
  }
}
@media (min-width: 769px) {
  .page-ft__bottom {
    padding: 91px clamp(1px, 6.66vw, 91px) 32px;
  }
}
.page-ft__block .logo a {
  background: #fff;
}

.page-ft__block .sns .x a {
  background: #fff;
}

.page-ft__block .sns .ig a {
  background: #fff;
}

/*------------------------------------------
sticky background
------------------------------------------*/
.sticky-bg {
  width: 100%;
  height: 100vh;
  height: 100lvh;
  position: fixed;
  top: 0;
  left: 0;
}

@media (max-width: 768px) {
  .sticky-bg {
    background: url(../images/bg_pat01_sp.png) repeat center 0/676px 731px, url(../images/bg_mv_sp.png) no-repeat center/cover;
    animation: bg-anime-sp 20s linear infinite;
  }
}
@media (min-width: 769px) {
  .sticky-bg {
    background: url(../images/bg_pat01_pc.png) repeat center 0/1433px 848px, url(../images/bg_mv_pc.png) no-repeat center/cover;
    animation: bg-anime-pc 20s linear infinite;
  }
}
@keyframes bg-anime-sp {
  0% {
    background-position-y: 0, 0;
  }
  100% {
    background-position-y: -731px, 0;
  }
}
@keyframes bg-anime-pc {
  0% {
    background-position-y: 0, 0;
  }
  100% {
    background-position-y: -848px, 0;
  }
}
/*------------------------------------------
main visual
------------------------------------------*/
.mv {
  width: 100%;
  height: 100vh;
  height: 100lvh;
  position: sticky;
  top: 0;
  left: 0;
  overflow: hidden;
}

.mv-txt {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}

@media (max-width: 768px) {
  .mv-txt {
    top: 28vh;
  }
}
@media (min-width: 769px) {
  .mv-txt {
    top: 12.6vh;
  }
}
.mv-txt__parts01 {
  aspect-ratio: 266/539;
  height: 100%;
  -webkit-mask: url(../images/mv_txt01.svg) no-repeat center/contain;
          mask: url(../images/mv_txt01.svg) no-repeat center/contain;
}

@media (max-width: 768px) {
  .mv-txt__parts01 {
    height: clamp(10px, 41.3vh, 276px);
  }
}
@media (min-width: 769px) {
  .mv-txt__parts01 {
    height: clamp(10px, 70.1vh, 539px);
  }
}
.mv-txt__parts01 svg {
  width: 100%;
  height: 100%;
}

.mv-txt__parts01 [class*=cls-] {
  fill: none;
  stroke: #000;
  stroke-linecap: square;
  stroke-linejoin: round;
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
}

.mv-txt__parts01 .cls-1 {
  stroke-width: 30;
  transform: translateY(0.8%) rotate(-1deg);
}

.mv-txt__parts01 .cls-2 {
  stroke-width: 113;
}

.mv-txt__parts02 {
  width: 123.3%;
  position: absolute;
  top: 47.6%;
  left: 54.8%;
}

.mv-txt__parts03 {
  width: 52.2%;
  position: absolute;
  bottom: 0;
  left: 73.3%;
}

/*------------------------------------------
about
------------------------------------------*/
@media (max-width: 768px) {
  .sec-about {
    padding-top: 100px;
    padding-bottom: 40px;
  }
}
@media (min-width: 769px) {
  .sec-about {
    padding-top: 162px;
    padding-bottom: 50px;
  }
}
@media (max-width: 768px) {
  .sec-about .c-cont01__in {
    padding: 0 6.4vw;
  }
}
.sec-about__detail {
  max-width: 962px;
  margin: 0 auto;
}

.sec-about__date {
  font-family: "Cardo", serif;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.05em;
}

.sec-about__ttl {
  margin: 10px auto 0;
  font-weight: 500;
  line-height: 1.45;
}

@media (max-width: 768px) {
  .sec-about__ttl {
    font-size: 22px;
  }
}
@media (min-width: 769px) {
  .sec-about__ttl {
    font-size: 20px;
  }
}
.sec-about__txt01 {
  font-size: 14px;
  line-height: 2.14;
}

@media (max-width: 768px) {
  .sec-about__txt01 {
    margin: 19px auto 0;
  }
}
@media (min-width: 769px) {
  .sec-about__txt01 {
    margin: 28px auto 0;
  }
}
/*------------------------------------------
lineup
------------------------------------------*/
.sec-lineup {
  position: relative;
}

@media (max-width: 768px) {
  .sec-lineup {
    padding: 180px 0 0;
  }
}
@media (min-width: 769px) {
  .sec-lineup {
    padding: 245px 0 0;
  }
}
.sec-lineup .decoration {
  position: absolute;
}

@media (max-width: 768px) {
  .sec-lineup .decoration {
    top: -34px;
    left: -8.8vw;
  }
}
@media (min-width: 769px) {
  .sec-lineup .decoration {
    top: -58px;
    left: 3.66vw;
  }
}
@media (max-width: 768px) {
  .sec-lineup .decoration .lottie01 {
    width: 207px;
  }
}
@media (min-width: 769px) {
  .sec-lineup .decoration .lottie01 {
    width: 412px;
  }
}
.sec-lineup__ttl {
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
}

@media (max-width: 768px) {
  .sec-lineup__ttl {
    font-size: 38px;
  }
}
@media (min-width: 769px) {
  .sec-lineup__ttl {
    font-size: 40px;
  }
}
.sec-lineup__search {
  max-width: 855px;
  padding: 0 40px;
}

@media (max-width: 768px) {
  .sec-lineup__search {
    margin: 24px auto 0;
  }
}
@media (min-width: 769px) {
  .sec-lineup__search {
    margin: 40px auto 0;
  }
}
.sec-lineup__search .list {
  display: grid;
}

@media (max-width: 768px) {
  .sec-lineup__search .list {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 6px 8px;
  }
}
@media (min-width: 769px) {
  .sec-lineup__search .list {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
  }
}
.sec-lineup__search .btn button {
  width: 100%;
  height: 100%;
  border: 1px solid #000;
  border-radius: 50px;
  line-height: 1.16;
  font-weight: 500;
  text-align: center;
  position: relative;
  white-space: pre-wrap;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {
  .sec-lineup__search .btn button {
    padding: 12px 40px 12px 25px;
    font-size: 12px;
  }
}
@media (min-width: 769px) {
  .sec-lineup__search .btn button {
    padding: 12px 6px;
    font-size: 13px;
  }
}
.sec-lineup__search .btn .ico {
  display: inline-block;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: #000;
}

@media (max-width: 768px) {
  .sec-lineup__search .btn .ico {
    width: 24px;
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
  }
}
@media (min-width: 769px) {
  .sec-lineup__search .btn .ico {
    width: 14px;
    margin-left: 6px;
    position: relative;
    vertical-align: bottom;
  }
}
.sec-lineup__search .btn .ico::before, .sec-lineup__search .btn .ico::after {
  content: "";
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.sec-lineup__search .btn .ico::before {
  height: 1px;
}

@media (max-width: 768px) {
  .sec-lineup__search .btn .ico::before {
    width: 8px;
  }
}
@media (min-width: 769px) {
  .sec-lineup__search .btn .ico::before {
    width: 5px;
  }
}
.sec-lineup__search .btn .ico::after {
  width: 1px;
}

@media (max-width: 768px) {
  .sec-lineup__search .btn .ico::after {
    height: 8px;
  }
}
@media (min-width: 769px) {
  .sec-lineup__search .btn .ico::after {
    height: 5px;
  }
}
@media (hover: hover) {
  .sec-lineup__search .btn button {
    transition: background 0.2s ease, color 0.2s ease;
  }

  .sec-lineup__search .btn button .ico {
    transition: background 0.2s ease;
  }

  .sec-lineup__search .btn button .ico::before, .sec-lineup__search .btn button .ico::after {
    transition: color 0.2s ease;
  }

  .sec-lineup__search .btn button:hover {
    background: #000;
    color: #fff;
  }

  .sec-lineup__search .btn button:hover .ico {
    background: #fff;
  }

  .sec-lineup__search .btn button:hover .ico::before, .sec-lineup__search .btn button:hover .ico::after {
    background: #000;
  }
}
.sec-lineup__result {
  width: clamp(10px, calc(100% - 12.8vw), 444px);
  border-bottom: 1px solid #000;
  position: relative;
  display: none;
}

@media (max-width: 768px) {
  .sec-lineup__result {
    margin: 37px auto 0;
    padding: 0 34px 8px 16px;
  }
}
@media (min-width: 769px) {
  .sec-lineup__result {
    margin: 53px auto 0;
    padding: 0 26px 8px 16px;
  }
}
.sec-lineup__result .txt {
  font-size: 16px;
  line-height: 1.3;
  font-weight: 500;
}

.sec-lineup__result .reset {
  position: absolute;
}

@media (max-width: 768px) {
  .sec-lineup__result .reset {
    top: 3px;
    right: 5px;
  }
}
@media (min-width: 769px) {
  .sec-lineup__result .reset {
    top: 6px;
    right: 8px;
  }
}
.sec-lineup__result .reset button {
  display: block;
  aspect-ratio: 1/1;
  position: relative;
}

@media (max-width: 768px) {
  .sec-lineup__result .reset button {
    width: 16px;
  }
}
@media (min-width: 769px) {
  .sec-lineup__result .reset button {
    width: 10px;
  }
}
.sec-lineup__result .reset button::before, .sec-lineup__result .reset button::after {
  content: "";
  background: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.sec-lineup__result .reset button::before {
  width: 141%;
  height: 1px;
}

.sec-lineup__result .reset button::after {
  width: 1px;
  height: 141%;
}

@media (max-width: 768px) {
  .sec-lineup__block {
    margin: 48px auto 0;
  }
}
@media (min-width: 769px) {
  .sec-lineup__block {
    margin: 56px auto 0;
  }
}
.sec-lineup__block .no-item {
  font-weight: 500;
  font-size: clamp(1px, 4.26vw, 16px);
  text-align: center;
}

.sec-lineup__block .no-item + .sec-lineup__list {
  border: none;
}

.sec-lineup__block .no-item + .sec-lineup__list::before {
  content: none;
}

.sec-lineup__list {
  border-top: 1px solid #000;
  border-left: 1px solid #000;
  display: grid;
  position: relative;
}

@media (max-width: 768px) {
  .sec-lineup__list {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}
@media (min-width: 769px) {
  .sec-lineup__list {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  }
}
.sec-lineup__list::after {
  content: "";
  width: 100%;
  height: 1px;
  background: #000;
  position: absolute;
  bottom: 0;
  left: 0;
}

.sec-lineup__item {
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}

.sec-lineup__item a {
  aspect-ratio: 1/1;
  display: block;
}

@media (max-width: 768px) {
  .sec-lineup__item a {
    padding: clamp(1px, 6.4vw, 24px) clamp(1px, 7.73vw, 29px);
  }
}
@media (min-width: 769px) {
  .sec-lineup__item a {
    padding: 40px 40px 0;
  }
}
.sec-lineup__item .txt {
  width: 100%;
  line-height: 1.5;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 768px) {
  .sec-lineup__item .txt {
    margin: 10px auto 0;
  }
}
@media (min-width: 769px) {
  .sec-lineup__item .txt {
    margin: 12px auto 0;
  }
}
@media (hover: hover) {
  .sec-lineup__item a {
    transition: background 0.2s ease;
  }

  .sec-lineup__item a .txt {
    transition: color 0.2s ease;
  }

  .sec-lineup__item a:hover {
    background: #000;
  }

  .sec-lineup__item a:hover .txt {
    color: #fff;
  }
}
.sec-lineup__more button {
  width: 100%;
  height: 80px;
  background: #000;
  border-bottom: 1px solid #000;
  font-family: "Cardo", serif;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.sec-lineup__more button .ico {
  width: 19px;
  height: 19px;
  padding: 0 0 1px 6px;
  border-radius: 50%;
  background: #fff;
  transform: rotate(45deg);
  display: flex;
  align-items: center;
}

.sec-lineup__more button .ico::before {
  content: "";
  width: 5px;
  height: 5px;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}

@media (hover: hover) {
  .sec-lineup__more button {
    transition: background 0.2s ease, color 0.2s ease;
  }

  .sec-lineup__more button .ico {
    transition: background 0.2s ease;
  }

  .sec-lineup__more button .ico::before {
    transition: border-color 0.2s ease;
  }

  .sec-lineup__more button:hover {
    background: #fff;
    color: #000;
  }

  .sec-lineup__more button:hover .ico {
    background: #000;
  }

  .sec-lineup__more button:hover .ico::before {
    border-color: #fff;
  }
}
.modal-block {
  width: 100vw;
  height: 100vh;
  height: 100lvh;
  background: #fff;
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  display: none;
}

@media (max-width: 768px) {
  .modal-block {
    padding: 0 6.4vw;
  }
}
@media (min-width: 769px) {
  .modal-block {
    padding: 0 clamp(1px, 12.07vw, 165px);
  }
}
.modal-block__close {
  position: absolute;
  right: 0;
}

@media (max-width: 768px) {
  .modal-block__close {
    top: 20px;
  }
}
@media (min-width: 769px) {
  .modal-block__close {
    top: 32px;
  }
}
.modal-block__close button {
  display: block;
  aspect-ratio: 1/1;
}

@media (max-width: 768px) {
  .modal-block__close button {
    width: 34px;
    top: 20px;
    right: 20px;
  }
}
@media (min-width: 769px) {
  .modal-block__close button {
    width: 40px;
  }
}
.modal-block__close button::before, .modal-block__close button::after {
  content: "";
  width: 141%;
  height: 1px;
  background: #000;
  position: absolute;
  top: 50%;
  left: 50%;
}

.modal-block__close button::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal-block__close button::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.modal-block__cont {
  margin: 0 auto;
  position: relative;
}

@media (max-width: 768px) {
  .modal-block__cont {
    padding: 60px 0 100px;
  }
}
@media (min-width: 769px) {
  .modal-block__cont {
    width: -moz-fit-content;
    width: fit-content;
    padding: 72px 0;
  }
}
.search-block {
  width: clamp(10px, 100%, 593px);
}

.search-block__head {
  line-height: 1.2;
  font-weight: 500;
}

@media (max-width: 768px) {
  .search-block__head {
    font-size: 20px;
  }
}
@media (min-width: 769px) {
  .search-block__head {
    font-size: 16px;
  }
}
@media (min-width: 1025px) {
  .search-block__head {
    grid-area: head;
  }
}
.search-block__head + * {
  margin: 20px 0 0;
}

.search-block__anchor {
  display: grid;
}

@media (min-width: 1025px) {
  .search-block__anchor {
    grid-area: anchor;
  }
}
.search-block__anchor + * {
  margin: 35px auto 0;
}

@media (min-width: 1025px) {
  .search-block__anchor + * {
    margin: 0;
  }
}
.search-block__anchor .list {
  border-top: 1px solid #000;
  border-left: 1px solid #000;
  display: grid;
}

@media (min-width: 1025px) {
  .search-block__anchor .list {
    height: -moz-fit-content;
    height: fit-content;
  }
}
.search-block__anchor .item {
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}

.search-block__anchor .item a,
.search-block__anchor .item span {
  aspect-ratio: 1/1;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (hover: hover) {
  .search-block__anchor .item a {
    transition: background 0.2s ease, color 0.2s ease;
  }

  .search-block__anchor .item a:hover {
    background: #000;
    color: #fff;
  }
}
.search-block__anchor .item span {
  background: #8E8E8E;
}

.search-block__anchor.alphabet {
  max-width: 361px;
}

@media (min-width: 1025px) {
  .search-block__anchor.alphabet {
    width: 26.42vw;
  }
}
.search-block__anchor.alphabet .list {
  grid-template-columns: repeat(8, 1fr);
}

.search-block__anchor.alphabet .item a {
  font-family: "Cardo", serif;
}

@media (max-width: 768px) {
  .search-block__anchor.alphabet .item a {
    font-size: 16px;
  }
}
@media (min-width: 769px) {
  .search-block__anchor.alphabet .item a {
    font-size: 18px;
  }
}
.search-block__anchor.alphabet .item:last-child {
  grid-column: span 2;
}

.search-block__anchor.alphabet .item:last-child a,
.search-block__anchor.alphabet .item:last-child span {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
}

@media (max-width: 768px) {
  .search-block__anchor.kana {
    max-width: 206px;
  }
}
@media (min-width: 769px) {
  .search-block__anchor.kana {
    max-width: 226px;
  }
}
.search-block__anchor.kana .list {
  grid-template-columns: repeat(5, 1fr);
}

.search-block__anchor.kana .item a {
  font-size: 16px;
}

.search-block__list {
  display: grid;
}

@media (max-width: 768px) {
  .search-block__list {
    gap: 20px;
  }
}
@media (min-width: 769px) {
  .search-block__list {
    gap: 16px;
  }
}
@media (min-width: 1025px) {
  .search-block__list {
    grid-area: list;
  }
}
.search-block__box .head {
  line-height: 1.2;
}

@media (max-width: 768px) {
  .search-block__box .head {
    font-size: 20px;
  }
}
@media (min-width: 769px) {
  .search-block__box .head {
    font-size: 16px;
  }
}
.search-block__box .head.en {
  font-family: "Cardo", serif;
  letter-spacing: 0.05em;
}

@media (max-width: 768px) {
  .search-block__box .head.en {
    font-size: 20px;
  }
}
@media (min-width: 769px) {
  .search-block__box .head.en {
    font-size: 18px;
  }
}
.search-block__box .head + * {
  margin: 8px auto 0;
}

.search-block__box .list {
  display: grid;
  gap: 5px;
}

.search-block__box .item button {
  width: 100%;
  display: block;
  border: 1px solid #000;
  line-height: 1.3;
  font-size: 13px;
  font-size: 500;
}

@media (max-width: 768px) {
  .search-block__box .item button {
    padding: 15px;
  }
}
@media (min-width: 769px) {
  .search-block__box .item button {
    padding: 18px;
  }
}
@media (min-width: 1025px) {
  .search-block.col {
    width: clamp(10px, 100%, 1036px);
    display: grid;
    grid-template-columns: 42.6% 1fr;
    grid-template-rows: max-content 1fr;
    grid-template-areas: "head list" "anchor list";
  }
}
@media (min-width: 1025px) {
  .search-block.col .search-block__head {
    grid-area: head;
  }
}
@media (min-width: 1025px) {
  .search-block.col .search-block__anchor {
    grid-area: anchor;
  }
}
@media (min-width: 1025px) {
  .search-block.col .search-block__list {
    grid-area: list;
  }
}
/*------------------------------------------
site
------------------------------------------*/
@media (max-width: 768px) {
  .sec-site {
    padding-top: 107px;
    padding-bottom: 120px;
  }
}
@media (min-width: 769px) {
  .sec-site {
    padding-top: 180px;
    padding-bottom: 215px;
  }
}
.sec-site__ttl {
  line-height: 1.45;
  text-align: center;
}

@media (max-width: 768px) {
  .sec-site__ttl {
    font-size: 22px;
  }
}
@media (min-width: 769px) {
  .sec-site__ttl {
    font-size: 20px;
  }
}
.sec-site__bnr {
  max-width: 740px;
}

@media (max-width: 768px) {
  .sec-site__bnr {
    margin: 30px auto 0;
  }
}
@media (min-width: 769px) {
  .sec-site__bnr {
    margin: 36px auto 0;
  }
}
.sec-site__bnr a {
  display: block;
}

/* =========================================================
splash
========================================================= */
body.is-splash {
  width: 100%;
  height: 100vh;
  height: 100lvh;
  position: fixed;
  top: 0;
  overflow: hidden;
}

.sticky-bg {
  opacity: 0;
  transition: opacity 1.5s ease 3s;
}

.page-hd {
  opacity: 0;
  transition: opacity 1.5s ease 3s, transform 1.5s ease 3s;
}

@media (max-width: 768px) {
  .page-hd {
    transform: translateY(-100px);
  }
}
@media (min-width: 769px) {
  .page-hd {
    transform: translateX(-32px);
  }
}
.page-nav {
  opacity: 0;
}

@media (max-width: 768px) {
  .page-nav {
    transition: opacity 1.5s ease 3s;
  }
}
@media (min-width: 769px) {
  .page-nav {
    right: 0;
    transition: opacity 1.5s ease 3s, right 1.5s ease 3s;
  }
}
.mv-txt__wrap {
  transition: transform 1s ease 1.5s;
}

.mv-txt__parts01 [class*=cls-] {
  transition: stroke-dashoffset 1s linear;
}

.mv-txt__parts01 .cls-2 {
  transition-delay: 0.3s;
}

.mv-txt__parts02,
.mv-txt__parts03 {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.7s ease 2.5s, transform 0.7s ease 2.5s;
}

body.is-active .sticky-bg {
  opacity: 1;
}

body.is-active .page-hd {
  opacity: 1;
}

@media (max-width: 768px) {
  body.is-active .page-hd {
    transform: translateY(0);
  }
}
@media (min-width: 769px) {
  body.is-active .page-hd {
    transform: translateX(0);
  }
}
body.is-active .page-nav {
  opacity: 1;
}

@media (min-width: 769px) {
  body.is-active .page-nav {
    right: 110px;
  }
}
@media (max-width: 768px) {
  body.is-active .mv-txt__wrap {
    transform: translateX(-15vw);
  }
}
@media (min-width: 769px) {
  body.is-active .mv-txt__wrap {
    transform: translateX(-80px);
  }
}
body.is-active .mv-txt__parts01 [class*=cls-] {
  stroke-dashoffset: 0;
}

body.is-active .mv-txt__parts02,
body.is-active .mv-txt__parts03 {
  opacity: 1;
  transform: translateX(0);
}