@charset "UTF-8";
/*
index
-----------------------------------------------------*/
/*
i-setting
-----------------------------------------------------*/
/*最後に削除する！--*/
/*--最後に削除する！*/
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Noto+Sans+JP:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
/*
i-functions
-----------------------------------------------------*/
/*
i-mixin
-----------------------------------------------------*/
/* ------------------------- 使い方 ----------------------------------------------------------

    @include sizing(width, wide, 365px, sp, 276px);
    ==> width: clamp(276px, 7.46vw + 248px, 365px);
    （ビューポートがwide(1568px)のとき365px, sp(375px)のとき276pxになる自動補完値を上限下限をつけて設定）

    @include sizing(width, wide, 365px, sp, 276px, noClamp);
    ==> width: calc(7.46vw + 248px);
    （ビューポートがwide(1568px)のとき365px, sp(375px)のとき276pxになる自動補完値を設定）

    @include sizingRem(font-size, wide, 14px, sp, 12px);
    ==> font-size: clamp(0.75rem, 0.17vw + 0.70625rem, 0.875rem;
    （ビューポートがwide(1568px)のとき14px, sp(375px)のとき12pxになる自動補完値をremに変換して設定）
　　
    ※使いたいsassファイル上で@useしてください。
    ※scssファイル上での読みやすさ重視のため、mixinの引数に単位[px]が必要な仕様にしてあります。

// ---------------------------------------------------------------------------------------- */
/*
instagram
-----------------------------------------------------*/
.c-instagram {
  padding-bottom: clamp(84px, 15.85vw + 33.3px, 155px);
}
.c-instagram h2 img {
  width: auto;
  height: 60px !important;
}
.c-instagram .c-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}
.c-instagram .c-list li {
  width: 32%;
  margin: 0.5% !important;
  box-sizing: border-box;
}
.c-instagram .c-list li:nth-child(n+7) {
  display: none;
}
@media screen and (min-width: 768px) {
  .c-instagram .c-list li {
    width: 19%;
  }
  .c-instagram .c-list li:nth-child(n+7) {
    display: block;
  }
}
.c-instagram .c-list li img {
  border-radius: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  vertical-align: bottom;
  aspect-ratio: 1/1;
}
.c-instagram .c-list li > div {
  height: 100%;
}
.c-instagram .c-list li > div a {
  height: 100%;
}
.c-instagram .c-list li .maskCap {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  background: hsla(0, 0%, 0%, 0.4);
  width: 100%;
  height: 100%;
  vertical-align: bottom;
  pointer-events: none;
  transition: 0.3s;
  text-align: center;
}
.c-instagram .c-list li .maskCap p {
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.c-instagram .c-list li .maskCap p a {
  color: #fff;
}
.c-instagram .c-list li .maskCap p i {
  vertical-align: baseline;
  font-size: 1em;
  margin-right: 0.1em;
}
.c-instagram .c-list li:hover .maskCap {
  opacity: 1;
}

/*
home
-----------------------------------------------------*/
.p-home {
  /*メインヴィジュアル*/
  /*イベント*/
  /*ラインナップ*/
  /*コンセプト*/
  /*お知らせ*/
}
.p-home h2 {
  font-size: clamp(27px, 5.13vw + 10.6px, 50px);
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 1em;
}
.p-home h2 span {
  display: block;
  color: #d0a74d;
  text-indent: 0.25rem;
  font-size: clamp(16px, 0.45vw + 14.5px, 18px);
  line-height: 1.3;
}
.p-home h2 .-wide-letters {
  letter-spacing: 0.5rem;
}
.p-home .-mainvisual {
  position: relative;
  width: 100vw;
  height: calc(100vh - 80px);
  margin-top: 80px;
}
.p-home .-mainvisual .-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  overflow: hidden; /* 画像がはみ出ないようにする */
}
.p-home .-mainvisual .-img::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 0;
}
.p-home .-mainvisual .-img img {
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.p-home .-mainvisual .-lead h2 {
  position: absolute;
  text-shadow: 1px 3px 3px rgba(0, 0, 0, 0.1);
  margin: 0;
}
.p-home .-mainvisual .-lead .-eng {
  position: relative;
  width: 90%;
  font-family: "Roboto", sans-serif;
  font-size: clamp(23px, 2.01vw + 16.6px, 32px);
  line-height: 1.86;
  font-weight: 900;
  letter-spacing: 0.2em;
  color: #fff;
  left: 5%;
  top: 10vw;
  padding-left: 0.8em;
}
@media screen and (min-width: 768px) {
  .p-home .-mainvisual .-lead .-eng {
    left: 73px;
    top: 73px;
  }
}
.p-home .-mainvisual .-lead .-eng:before {
  content: "";
  position: absolute;
  display: block;
  height: 100%;
  width: 4px;
  left: 0;
  top: 0;
  background: #fff;
  box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.1);
}
@media screen and (min-width: 768px) {
  .p-home .-mainvisual .-lead .-eng:before {
    width: 6px;
  }
}
.p-home .-mainvisual .-lead .-jpn {
  font-family: "Roboto", sans-serif;
  font-size: clamp(29px, 1.12vw + 25.4px, 34px);
  line-height: 1.38;
  font-weight: 500;
  color: #fff;
  left: 5%;
  bottom: 5%;
}
@media screen and (min-width: 768px) {
  .p-home .-mainvisual .-lead .-jpn {
    left: auto;
    right: 5%;
  }
}
.p-home .-events {
  width: 100%;
  padding-top: clamp(55px, 0vw + 55px, 55px);
  padding-bottom: clamp(50px, 11.16vw + 14.3px, 100px);
  overflow-x: hidden;
}
.p-home .-events h2 {
  font-size: clamp(17px, 0vw + 17px, 17px);
  font-weight: 500;
}
.p-home .-events h2 span {
  display: inline-block;
  font-size: clamp(39px, 0vw + 39px, 39px);
  font-weight: 900;
  color: #333333;
  margin-right: 0.5em;
}
.p-home .-events .swiper {
  margin: 0 calc(50% - 50vw);
}
@media screen and (min-width: 768px) {
  .p-home .-events .swiper {
    margin: 0 auto;
  }
}
.p-home .-events .swiper .swiper-wrapper {
  height: auto;
}
.p-home .-events .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 8px;
}
@media screen and (min-width: 768px) {
  .p-home .-events .swiper-slide {
    margin: 0 auto;
  }
}
.p-home .-events .swiper-slide a figure figcaption {
  font-size: clamp(15px, 0vw + 15px, 15px);
  margin-top: 2em;
  font-weight: bold;
}
.p-home .-events .swiper-slide img {
  display: block;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid #ddd;
}
.p-home .-lineup {
  padding-top: clamp(50px, 11.16vw + 14.3px, 100px);
  padding-bottom: clamp(50px, 11.16vw + 14.3px, 100px);
  overflow-x: hidden;
}
@media screen and (min-width: 768px) {
  .p-home .-lineup {
    margin: 0 calc(50% - 50vw) 100px;
    background: #fafafa;
  }
}
.p-home .-lineup h2 {
  max-width: 1004px;
  margin: 0 auto 1em;
}
.p-home .-lineup ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5%;
}
@media screen and (min-width: 768px) {
  .p-home .-lineup ul {
    flex-direction: row;
    gap: 3%;
    margin: 0 auto;
    justify-content: center;
    align-items: stretch;
  }
}
.p-home .-lineup ul li {
  position: relative;
  width: 47.5%;
}
@media screen and (min-width: 768px) {
  .p-home .-lineup ul li {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1 1 30.333%;
    margin: 0 0 5% 0;
  }
}
.p-home .-lineup ul li > a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
}
@media screen and (min-width: 768px) {
  .p-home .-lineup ul li > a {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .p-home .-lineup ul li figure {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: stretch;
  }
}
.p-home .-lineup ul li figure > span {
  display: block;
}
@media screen and (min-width: 768px) {
  .p-home .-lineup ul li figure > span {
    height: auto;
    margin-bottom: 2em;
  }
}
@media screen and (min-width: 768px) {
  .p-home .-lineup ul li figure figcaption {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100%;
    flex: 1;
    padding: 1rem 2rem;
  }
}
.p-home .-lineup ul li figure figcaption h3 {
  height: 50px;
  margin-bottom: 3rem;
}
.p-home .-lineup ul li figure figcaption h3 img {
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .p-home .-lineup ul li figure figcaption h3 img {
    margin: 0;
    width: auto;
    height: 100%;
    overflow: hidden;
    -o-object-fit: contain;
       object-fit: contain;
  }
}
.p-home .-lineup ul li figure figcaption p {
  display: none;
}
@media screen and (min-width: 768px) {
  .p-home .-lineup ul li figure figcaption p {
    display: block;
    font-size: clamp(16px, 0vw + 16px, 16px);
    flex-grow: 1;
  }
}
.p-home .-lineup ul li figure figcaption a {
  display: none;
}
@media screen and (min-width: 768px) {
  .p-home .-lineup ul li figure figcaption a {
    display: inline-block;
  }
}
.p-home .-lineup ul li figure figcaption .c-btn {
  margin-top: auto;
}
.p-home .-lineup ul li:nth-of-type(1) figure figcaption h3 img {
  width: 112px;
  margin-top: 21px;
}
@media screen and (min-width: 768px) {
  .p-home .-lineup ul li:nth-of-type(1) figure figcaption h3 img {
    width: 242px;
    margin: 0 0 51px;
  }
}
.p-home .-lineup ul li:nth-of-type(2) figure figcaption h3 img {
  width: 147.39px;
  margin-top: 29px;
}
@media screen and (min-width: 768px) {
  .p-home .-lineup ul li:nth-of-type(2) figure figcaption h3 img {
    width: 250px;
    margin: auto;
  }
}
.p-home .-lineup ul li:nth-of-type(3) figure figcaption h3 img {
  width: 114px;
  margin-top: 16px;
}
@media screen and (min-width: 768px) {
  .p-home .-lineup ul li:nth-of-type(3) figure figcaption h3 img {
    width: 294px;
    margin: 0 0 58px;
  }
}
.p-home .-lineup ul li:nth-of-type(4) figure figcaption h3 img {
  width: 107px;
  margin-top: 21px;
}
@media screen and (min-width: 768px) {
  .p-home .-lineup ul li:nth-of-type(4) figure figcaption h3 img {
    width: 268px;
    margin: 0 0 44px;
  }
}
.p-home .-lineup ul li:nth-of-type(5) figure figcaption h3 img {
  width: 106px;
  margin-top: 15px;
}
@media screen and (min-width: 768px) {
  .p-home .-lineup ul li:nth-of-type(5) figure figcaption h3 img {
    width: 182px;
    margin: 0 0 40px;
  }
}
.p-home .-lineup ul li:nth-of-type(6) figure figcaption h3 img {
  width: 120.24px;
  margin-top: 29px;
}
@media screen and (min-width: 768px) {
  .p-home .-lineup ul li:nth-of-type(6) figure figcaption h3 img {
    width: 130px;
    margin: auto;
  }
}
.p-home .-concept {
  padding-top: clamp(50px, 11.16vw + 14.3px, 100px);
  padding-bottom: clamp(50px, 11.16vw + 14.3px, 100px);
}
.p-home .-concept figure {
  margin: 0 calc(50% - 50vw);
}
@media screen and (min-width: 768px) {
  .p-home .-concept figure {
    display: flex;
    justify-content: space-between;
  }
}
@media screen and (min-width: 768px) {
  .p-home .-concept figure > img {
    width: 62%;
  }
}
.p-home .-concept figure figcaption {
  margin: 5%;
}
@media screen and (min-width: 768px) {
  .p-home .-concept figure figcaption {
    margin: 0;
    width: 28%;
    display: flex;
    flex-direction: column;
  }
}
.p-home .-concept figure figcaption h3 {
  font-size: clamp(28px, 2.68vw + 19.4px, 40px);
  line-height: 1.4;
  font-weight: 600;
  margin-bottom: 0.5em;
}
.p-home .-concept figure figcaption h4 {
  font-size: clamp(28px, 0.45vw + 26.5px, 30px);
  line-height: 1.5;
  font-weight: 500;
  margin-bottom: 0.5em;
}
.p-home .-concept figure figcaption p {
  font-size: clamp(16px, 0.22vw + 15.3px, 17px);
}
@media screen and (min-width: 768px) {
  .p-home .-concept figure figcaption p {
    flex-grow: 1;
  }
}
.p-home .-concept figure:first-of-type {
  margin-bottom: clamp(50px, 7.59vw + 25.7px, 84px);
}
@media screen and (min-width: 768px) {
  .p-home .-concept figure:first-of-type {
    margin-left: 0;
  }
  .p-home .-concept figure:first-of-type > img {
    order: 1;
  }
}
@media screen and (min-width: 768px) {
  .p-home .-concept figure:last-of-type {
    margin-right: 0;
  }
}
.p-home .-concept .c-btn a {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .p-home .-concept .c-btn a {
    width: auto;
  }
}
.p-home .-news {
  padding-bottom: clamp(84px, 15.85vw + 33.3px, 155px);
}
.p-home .-news .-wrap {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 768px) {
  .p-home .-news .-wrap {
    flex-direction: row;
    justify-content: space-between;
    margin-left: 0;
  }
}
@media screen and (min-width: 768px) {
  .p-home .-news .-wrap h2 {
    width: 270px;
    margin-left: 0;
  }
}
.p-home .-news .-wrap dl {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .p-home .-news .-wrap dl {
    width: 72%;
  }
}
.p-home .-news .-wrap dl div {
  border-top: 1px solid #ededed;
  border-bottom: 1px solid #ededed;
  margin-top: -1px;
}
.p-home .-news .-wrap dl a {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 1em;
}
@media screen and (min-width: 768px) {
  .p-home .-news .-wrap dl a {
    flex-direction: row;
    justify-content: space-between;
    padding: 1em 0;
  }
}
.p-home .-news .-wrap dl a dt {
  font-size: 12px;
  line-height: 30px;
  color: #909090;
}
@media screen and (min-width: 768px) {
  .p-home .-news .-wrap dl a dt {
    width: 11em;
  }
}
.p-home .-news .-wrap dl a dd {
  font-size: 17px;
  line-height: 30px;
}
@media screen and (min-width: 768px) {
  .p-home .-news .-wrap dl a dd {
    width: calc(100% - 11em);
  }
}/*# sourceMappingURL=home.css.map */