@charset "UTF-8";

#concept,#menu,#info,#about { scroll-margin-top: 100px;}


/* -------------------------------------------
 header
------------------------------------------- */
.header{ width: 100%; height: 186px; position: fixed; z-index: 999; transition: background-color 0.3s ease, color 0.3s ease; /* スムーズな切り替えのためにtransitionを設定 */ background-color: transparent; color: var(--font-white); /* 例：デフォルトは白い文字色 */}
.header__container{ justify-content: space-between; max-width: 1400px; margin: 0 auto; margin-top: 20px; padding: 30px; line-height: 0;}
.header__container a,
.header__container span{ color: var(--font-white); font-size: 14px;}
.header__logo { max-width: 80px;}
/* スクロール後のヘッダー */
.header.scrolled { background-color: #fff; color: var(--font-color);}
.header.scrolled  .header__container a,
.header.scrolled  .header__container span{ color: var(--font-color);}
.header.scrolled .header__container a.nolink { opacity: .5;}
/* ロゴの切り替え */
.header .header__logo .logo-white { display: block; transition: opacity 0.3s ease;}
.header .header__logo .logo-black { display: none; transition: opacity 0.3s ease;}
.header.scrolled .header__logo .logo-white { display: none;}
.header.scrolled .header__logo .logo-black { display: block;}
/* hover */
.header a{padding-bottom: 3px; background-image: linear-gradient(#fff, #fff); background-repeat: no-repeat; background-position: bottom right; background-size: 0 1px;}
.header a:hover{ background-position: bottom left; background-size: 100% 1px;}
.header.scrolled a {padding-bottom: 3px; background-image: linear-gradient(#000, #000); background-repeat: no-repeat; background-position: bottom right; background-size: 0 1px;}
.header.scrolled a:hover{ background-position: bottom left; background-size: 100% 1px;}


.navBtn { position: relative; width: 43px; height: 25px; cursor: pointer; z-index: 1000;}
.navBtn span { display: block; position: absolute; height: 1px; width: 100%; background: #fff; transition: 0.3s;}
.navBtn span:nth-child(1) { top: 0; }
.navBtn span:nth-child(2) {  top: 11px; width: 21px; right: 0;}
.navBtn span:nth-child(3) { top: 22px; }


.header.scrolled .navBtn span { background: var(--font-color);}
.navBtn.is-active span { background: var(--font-color);}
.navBtn.is-active.scrolled span { background: var(--font-color);}
.navBtn.is-active span{ background: var(--font-color);}
.navBtn.is-active span:nth-child(1) { top: 11px; transform: rotate(25deg);}
.navBtn.is-active span:nth-child(2) { opacity: 0;}
.navBtn.is-active span:nth-child(3) { top: 11px; transform: rotate(-25deg);}

/* グローバルナビゲーション */
.gnav__menu { position: fixed; top: 0; right: -100%; width: 100%; height: 100vh; background-color: var(--font-white); transition: right 0.5s ease-in-out; z-index: 999; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--font-color);}
.gnav__menu.is-active { right: 0;}
.gnav__menuLogo img{ width: 80px; display: block; margin: 0 auto 3rem;}
.gnav__menu ul { line-height: 1.5;}
.gnav__menu ul li { margin-bottom: 20px; font-size: clamp(16px, 4.266vw, 20px);}
.gnav__menu ul a { color: var(--font-color); font-size: 24px; text-decoration: none; font-size: clamp(16px, 4.266vw, 20px);}
.gnav__menuSns{ width: 100%; justify-content: center; gap: 20px; margin-top: 3rem;}
.gnav__menuAddress{ margin-top: 3rem;}
body.overflow-hidden { overflow: hidden;}

@media screen and (min-width: 768px) {

    .header__list { display: block; width: 75%;}
    .header__list .flex { align-items: center; justify-content: right; gap: 30px;}
    .navBtn { display: block;}
    .sp__nav { display: none;}
}

@media screen and (max-width: 767px) {

    .header{ height: auto;}

    .header__list { display: none;}
    .header__logo{ width: 15%;}
    .navBtn { display: block; width: 15%; max-width: 50px;}
    .sp__nav { display: block; width: 55%;}
    .sp__nav ul{ justify-content: space-around; align-items: center;}
    .sp-nav__sns img { min-width: 24px; width: 43.75%;}
}



/* -------------------------------------------
  MV
------------------------------------------- */
.mv__container{ margin: 0 auto; max-width: 1440px; max-height: 930px; height: 100vh; padding: 20px; overflow: hidden;}

.video-wrap { position: relative; width: 100%; height: 100%; padding: 20px;}
.video-bg { position: absolute; top: 50%; left: 50%; min-width: 100%; width: 100%; min-height: 100%; height: 100%; transform: translate(-50%, -50%); object-fit: cover; filter: brightness(0.8);}

.mv__tit { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%);}
.mv__txt{ color: var(--font-white); font-size: 18px; flex-direction: column; justify-content: flex-end; max-width: 488px; height: 300px; margin: 0 auto; letter-spacing: 1.8px; line-height: 2.5; position: absolute; top: 60%; left: 50%; transform: translateX(-50%); writing-mode: vertical-rl;}
.mv__txt .name{ display: inline-block; text-align: end;}

@media screen and (max-width: 767px) {
    .mv__tit { top: 32%;}
    .mv__txt { font-size: clamp(14px, 3.733vw, 18px); line-height: 1.8; top: 47%; left: 2rem; transform: translateX(0); height: auto; width: 280px; writing-mode: unset; display: block;}
    .mv__txt .name { text-align: left; margin-top: 1rem;}
}



/* -------------------------------------------
 anchorLink
------------------------------------------- */
.anchorLink{margin: 100px 0;}
.anchorLink___list{ width: 100%; max-width: 682px; margin: 0 auto; gap: 20px;}
.anchorLink___list li{  width: 31.378%; height: 80px;}
.anchorLink___list a { width: 100%; height: 100%; justify-content: center; align-items: center; text-align: center; border: 1px solid var(--font-color); font-size: 2.2rem; position: relative;}
.anchorLink___list a::before{position: absolute; left: 0; width: 0; height: 100%; content: ""; background-color:#000; mix-blend-mode: difference; transition: 0.3s;}
.anchorLink___list a:hover{color: var(--font-white);}
.anchorLink___list a:hover::before{width: 100%; }

@media screen and (max-width: 767px) {
    .anchorLink { margin: 50px 0;}
    .anchorLink___list li{ width: calc((100% - 40px) / 3);}
    .anchorLink___list a { font-size: clamp(15px, 4vw, 22px); line-height: 1.25;}
}

/* -------------------------------------------
 concept
------------------------------------------- */
.concept{ background: url(../img/concept-bg.webp); background-repeat: no-repeat; background-size: cover; padding: 11rem 0; position: relative;}
.concept__tit{ width: 200px; height: 200px; border: 1px solid var(--font-color); font-size: 24px; align-items: center; text-align: center; margin: 0 auto;}
.concept__tit span{ width: 100%; display: block; line-height: 1.5; letter-spacing: .5rem;}
.concept__txt.titTxt  { background: url(../img/svg/logomark-white.svg); background-repeat: no-repeat; background-position: center; margin-top: 6rem; line-height: 1.8; letter-spacing: 1.2rem; padding: 4rem 0; position: relative; text-align: center;}
.concept__txt.titTxt span{font-size: 40px;}
.concept__flexBox{ display: flex; justify-content: space-between; margin-top: 6rem;}
.concept__txt.txt01{ width: 46%;}
.concept__txt .concept__img{ width: 41.4%;}
.concept__txt.txt02{ margin-top: 6rem; text-align: center;}

@media screen and (max-width: 767px) {
    .concept { background: url(../img/concept-bg-sp.webp); background-repeat: no-repeat; background-size: 100%; background-position: top; padding: 9rem 0;}
    .concept__tit { width: 150px; height: 150px;}
    .concept__txt.titTxt  { background: url(../img/svg/logomark-white.svg); background-repeat: no-repeat; background-position: center; background-size: contain; margin-top: 6rem; padding: 4rem 0;}
    .concept__txt.titTxt span { font-size: clamp(24px, 6.4vw, 40px);}
    .concept__flexBox { flex-direction: column; align-items: center; margin-top: 1rem; gap: 9rem;}
    .concept__txt.txt01,
    .concept__txt.txt02{ font-size: clamp(15px, 4vw, 20px);text-align: center;}
    .concept__txt.txt01,
    .concept__txt .concept__img{ width: 100%; display: block;}
}

@media screen and (max-width: 655px) {
    .concept { background-size: 150%;}
    .concept__flexBox { gap: 4rem;}
}


/* -------------------------------------------
 gallery
------------------------------------------- */
.gallery{ padding-top: 8rem;}
.gallery__img { width: 100%;}
.gallery__slide { padding: 0;}
.menu .gallery__slide{ margin-top: 8rem;}
.gallery__img img { object-fit: cover; object-position: center; height: 100%;}

/* PC用 */
@media (min-width: 768px) {
    .gallery{ max-width: 1000px; margin: 0 auto; justify-content: space-between;}
    .gallery__img{ width: 32.1%;}
}

/* SP用 */
@media screen and (max-width: 767px) {
    .slick-track { display: flex; width: max-content !important;}
    .gallery__img{ width: 250px !important; flex-shrink: 0; margin-left: 10px;}
    .gallery__img img{ width: 100%; height: 319px; max-width: 250px; max-height: 319px; object-fit: cover; display: block;}

}


/* -------------------------------------------
 menu
------------------------------------------- */
.menu{ margin-top: 8rem; background-color: var(--menu-bg); padding-bottom: 15rem; position: relative;}
.menu__bg-img{ background: url(../img/menu-bg.webp); background-repeat: no-repeat; background-size: 100%; padding-top: 15rem;}
.menu__titSub{ font-size: 2.4rem; text-align: center; margin-top: 5rem; letter-spacing: 2rem;}
.menu__titSub span { letter-spacing: 1.5rem;}
.menu__titSub span:nth-of-type(1){ margin-right: 1rem;}

.menu__txt{ text-align: center;}
.menu__txt.titTxt{ font-size: clamp(26px, 6.933vw, 40px); letter-spacing: 1rem; margin-top: 10rem;}
.menu__txt.txt{ font-size: clamp(15px, 4vw, 20px); margin-top: 6.5rem;}

.menu__list{ margin-top: 7rem; justify-content: center; gap: 15px;}
.menu__listBox{ width: 49.2%; min-width: 300px; background-color: #fff; padding: 6rem 1rem;}
.menu__listItem{ text-align: center; line-height: 2; letter-spacing: .6rem;}

.menu__picture { width: 59.3%; min-width: 320px; margin: 9rem auto 0; position: relative;}
.menu__pictureBg { max-height: 569px; max-width: 569px; margin: 0 auto;}
.menu__pictureTxt { width: 100%; color: var(--font-white); font-size: clamp(14px, 3.733vw, 20px); text-align: center; padding: 2rem; position: absolute; display: block; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.menu__line{ position: relative;}
.menu__line::after { content: ''; display: block; background-color: #000000; width: 55%; height: 1px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}
.menu__line .menu__list{ padding-bottom: 13rem;}



@media (max-width: 767px) {
    .menu__bg-img{ background: url(../img/menu-bg-sp.webp); background-repeat: no-repeat; background-size: 100%;}
    .menu__pictureTxt{ font-size: 1.4rem;}
}


/* -------------------------------------------
 info
------------------------------------------- */
.info{ background-color: var(--info-bg); padding: 13rem 0;}
.info__tit,.info__txt{color: var(--font-white); text-align: center;}
.info__tit{ width: 56%; border-bottom: 1px solid #ffffff; font-size: clamp(26px, 6.933vw, 32px); letter-spacing: 1rem; margin: 0 auto; padding-bottom: 4rem; text-align: center;}
.info__list{ justify-content: space-around; margin-top: 10rem;}
.info__txt{ font-size: clamp(15px, 4vw, 20px); margin-top: 4rem;}
.info__txt a{ display: block; transition: .3s;}
.info__txt a:hover{ text-decoration: underline;}
.info__item{ margin-bottom: 3rem;}
.info__item figure { max-width: 315px; margin: 0 auto;}
.info__item figure img { object-fit: cover;}

.info__moreBtn { max-width: 300px; margin: 0 auto;}
.info__moreBtn a {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: #fff;
    border: 1px solid var(--font-color);
    font-size: 2.2rem;
    position: relative;
    transition: .5s;
}
.info__moreBtn a:hover{ background-color: var(--info-bg); border:1px solid #fff; color: var(--font-white);}


@media (max-width: 767px) {
   .info { padding: 10rem 0;}
   .info__tit{ width: 80%; letter-spacing: 0.6rem;}
   .info__list { margin-top: 7rem;}
   .info__txt{ line-height: 1.8;}
   .info__item figure { width: 80%;}

   /* slick */
   .slick-prev { left: 0;}
   .slick-next { right: 0;}
   .slick-prev, .slick-next { top: 35%; -webkit-transform: translate(0, -35%); -ms-transform: translate(0, -35%); transform: translate(0, -35%); z-index: 10;}
    .slick-next:before { content: ''; display: block; background: url(../img/slick-next.png); background-repeat: no-repeat; background-size: contain; width: 18px; height: 30px;}
    .slick-prev:before{ content: ''; display: block; background: url(../img/slick-prev.png); background-repeat: no-repeat; background-size: contain; width: 18px; height: 30px;}
}



/* -------------------------------------------
 about
------------------------------------------- */
.about{ padding: 10rem 0; background-color: var(--about-bg);}
.about__titSub{ font-size: 2.4rem; text-align: center; margin-top: 5rem; letter-spacing: 2rem;}
.about__contentsWrap{ background-color: #ffffff; border-top: 1px solid var(--font-color); border-bottom: 1px solid var(--font-color); margin-top: 6.5rem; padding: 3rem 8.5rem 13rem;}
.about__contents{ padding: 7.7rem 0 9.5rem; position: relative;}
.about__contents::after{ content: ''; display: block; background-color: #000000; width: 26%; height: 1px;position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}
.about__item{ width: 50%;}
.about__item p{ font-size: clamp(15px, 4vw, 20px);}
.about__item.gmap{ max-width: 394px; height: 287px;}
.about__instaTxt,.about__contentsTxt{ text-align: center;}
.about__instaTxt{ font-size: 3rem;}
.about__instaAccount{ font-size: 2.5rem; flex-wrap: nowrap; justify-content: center; align-items: center; margin-top: 2rem; margin-bottom: 4rem;}
.about__instaAccount img{ display: inline-block; width: 4.5%; margin-right: 1rem;}
.about__instaImg { display: flex; justify-content: space-between;}
.about__instaImg li{ width: 23.734%;}
.about__instaImg li a { width: 100%; height: 100%; display: block;}
.about__instaImg li a img { object-fit: cover; height: 100%;}

.about__contentsTxt p{ font-size: clamp(15px, 4vw, 20px);}
.about__contentsTxt p:not(:last-of-type){margin-bottom: 8rem; }

@media (max-width: 767px) {
    .about__contentsWrap { padding: 8rem 2rem 12rem;}
    .about__contents:first-of-type { padding: 0 0 9.5rem;}
    .about__box { flex-direction: column; gap: 2rem;}
    .about__item { width: 100%; line-height: 2; text-align: center;}
    .about__box:nth-of-type(2) { flex-direction: column-reverse;}
    .about__item .tel{ display: inline-block; margin-top: 2rem;}
    .about__item.gmap { margin: 0 auto;}
    .about__instaTxt{ font-size: clamp(18px, 4.8vw, 30px);}
    .about__instaAccount { font-size: clamp(15px, 4vw, 25px); margin: 1rem 0 2rem;}
    .about__instaImg { justify-content: center; gap: 15px;}
    .about__instaImg li { width: 43.668%;}

}

/* -------------------------------------------
 footer
------------------------------------------- */
.copyRight{ letter-spacing: .8rem; padding: 6rem 0; text-align: center;}


/* -------------------------------------------
 reserveBtn
------------------------------------------- */
.reserveBtn a {  width: 100%;  background: var(--reserve-btn-color);  color: var(--font-white);  display: block;  font-size: 1.6rem;  max-width: 305px;  padding: 1rem 0; position: fixed;  left: 0;  bottom: 0;  text-align: center;  transition: .3s; z-index: 4; }
.reserveBtn a:hover{ filter: brightness(0.5);}
.reserveBtn.is-bottom { position: absolute; bottom: auto; top: auto; opacity: 0; transform: translateY(100%);}
.reserveBtn.is-hiding { opacity: 0; transform: translateY(100%);}
@media (max-width: 767px) {
    .reserveBtn a { width: 100%; max-width: 100%; height: 46px; font-size: clamp(14px, 3.733vw, 16px); display: flex; justify-content: center; align-items: center; padding: unset;}
}