@charset "UTF-8";

/* ==== color ========================== */
:root {
  --color-default: #433C2C;
  --color-inverse: #ffffff;
  --color-sub: #8B8475;

  --color-gold: #927A43;
  --color-boarder: #EED9C2;

  --color-g-border: #D9D9D9;
  --color-bg: #F7F4F0;

  --serif: "Noto Serif JP", serif;
  --ja: "Zen Kaku Gothic New", sans-serif;
  --en: "Montserrat", sans-serif;
}

/*================================================
* kv
================================================*/
#mask_bg-01,
#mask_bg-02 {
  /* overflow: hidden; */
  overflow: clip;
  position: relative;
}

.mask_bg-area01 {
  position: absolute;
  z-index: 1;
  top: 16.4rem;
  right: -7.08vw;
  pointer-events: none;
}

.mask_bg-area01 svg {
  width: 100vw;
  height: 159.722vw;
}

/* #mask_bg-02 {
  margin-top: -16rem;
} */

.mask_bg-area02 {
  position: absolute;
  z-index: 0;
  bottom: -4.166vw;
  left: -18vw;
}

.mask_bg-area02 svg {
  width: 100vw;
  height: 159.722vw;
  max-width: 1440px;
  max-height: 2300px;
}

@media screen and (max-width:1023px) {
  .mask_bg-area01 {

    top: 30.76vw;
    right: -84.8vw;
  }

  .mask_bg-area01 svg {
    width: 183.33vw;
    height: 291.7vw;
  }

  .mask_bg-area02 {
    bottom: -64.2vw;
    left: -81vw;
  }

  .mask_bg-area02 svg {
    width: 183.33vw;
    height: 291.7vw;
  }

}


@media screen and (max-width:600px) {
  .mask_bg-area02 {
    bottom: 85.8vw;
  }
}

/*================================================
* kv
================================================*/

#kv {
  /* padding: 0 20px; */
  padding: 0 2rem;
  position: relative;
}

.kv_bg {
  border-radius: 1.5rem;
  /* border-radius: 15px; */
  /* min-height: 530px; */
}

.kv_bg img {
  /* border-radius: 15px; */
  border-radius: 1.5rem;
  /* min-height: 530px; */
  overflow: hidden;
  object-fit: cover;
  object-position: center bottom;
}

.kv_catch {
  position: absolute;
  top: 16.66vw;
  left: 50%;
  transform: translateX(-50%);
}

.kv_catch-top {
  /* height: 93px; */
  /* height: clamp(64px, 8.33vw, 93px); */
  /* height: 9.3rem; */
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* gap: 55px; */
  gap: 5.5rem;
}

.kv_catch-top div {
  height: 100%;
}

.kv_catch-top img {
  width: auto;
  max-width: unset;
  height: 100%;
}

.kv_under {
  /* width: 460px; */
  width: 46rem;
  /* margin: 54px auto 0; */
  margin: 5.4rem auto 0;
}

.kv_left,
.kv_right {
  color: var(--color-inverse);
  font-family: var(--en);
  letter-spacing: 0.03em;
  position: absolute;
}

.kv_left span,
.kv_right span {
  text-transform: uppercase;
  letter-spacing: 0.03em;

}

.kv_left {
  /* left: 44px; */
  left: 4.4rem;
  top: 16.66vw;
}

.kv_left span,
.kv_right span {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  /* font-size: 13px; */
  font-size: 1.3rem;
}

.kv_right {
  /* right: 44px; */
  right: 4.4rem;
  top: 21.45vw;
}

.kv_right .scroll {
  position: relative;
  padding-bottom: 10px;
}

.kv_right .scroll::before {
  position: absolute;
  content: "";
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 4px;
  height: 4px;
  animation: scroll 2s infinite;
  background: var(--color-inverse);
  border-radius: 100px;
}


@keyframes scroll {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }

  40% {
    opacity: 1;
  }

  80% {
    opacity: 0;
    transform: translate(0, 30px);
  }

  100% {
    opacity: 0;
  }
}


/* ani */
.ani-slideUp_wrap {
  overflow: hidden;
}

.ani-slideUp {
  transition-duration: 1s;
  transition-property: transform;
  transition-timing-function: cubic-bezier(.26, .27, .1, 1);
  transform: translateY(100%);
  display: block;
}

.on .ani-slideUp {
  transform: translateY(0%);
}

.delay_180 {
  transition-delay: 180ms;
}

.delay_360 {
  transition-delay: 360ms;
}

.delay_540 {
  transition-delay: 540ms;
}

.kv_btn .c_btn-box {
  width: fit-content;
  margin: 4.8rem auto 0;
}

.kv_btn .c_btn {
  padding: 1.7rem 1.5rem;
  font-family: var(--serif);
  border: 1px solid var(--color-inverse);
  border-radius: 0.7rem;
}

.kv_btn .c_btn .en {
  font-family: var(--serif);
  font-size: 1.6rem;
}

@media screen and (max-width:1023px) {
  #kv {
    padding: 0 10px;
    position: relative;
  }

  .kv_bg {
    border-radius: 10px;
  }

  .kv_catch {
    width: 100%;
    /* top: 41vw; */
    top: 32vw;
    max-width: 600px;
  }

  .kv_catch-top {
    height: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
  }

  .kv_catch-top div:nth-of-type(1) {
    width: 62.66%;
    margin: 0 auto;
  }

  .kv_catch-top div:nth-of-type(2) {
    width: 46%;
    margin: 0 auto;
  }

  .kv_catch-top img {
    max-width: 100%;
    height: auto;
    width: 100%;
  }

  .kv_under {
    width: 59.8%;
    margin: 7.2% auto 0;
  }

  .kv_left {
    display: none;
  }

  .kv_right {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    top: auto;
    bottom: 51vw;
  }

  .kv_right span {
    -webkit-writing-mode: unset;
    -ms-writing-mode: unset;
    writing-mode: unset;
    font-size: 10px;
  }

  @keyframes scroll {
    0% {
      opacity: 0;
      transform: translate(0, 0);
    }

    40% {
      opacity: 1;
    }

    80% {
      opacity: 0;
      transform: translate(0, 20px);
    }

    100% {
      opacity: 0;
    }
  }


  .kv_btn .c_btn-box {
    margin: 5vw auto 0;
  }

  .kv_btn .c_btn {
    padding: 12px 15px;
    border-radius: 7px;
  }

  .kv_btn .c_btn .en {
    /* font-size: 16px; */


    font-size: clamp(10px, 4.2vw, 18px);
  }
}

/*================================================
 *  topAbout
 ================================================*/

#topAbout {
  padding-top: 17.9rem;
}

#topAbout::before {
  position: absolute;
  content: "";
  width: 100%;
  height: calc(100% + 19.8rem);
  background: #F6EDE3;
  top: -19.8rem;
  left: 0;
  z-index: -1;
}

.topAbout_inner {
  margin: 0 auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
  z-index: 2;
}

.topAbout_inner::before {
  position: absolute;
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  display: inline-block;
  background-image: url(../images/about_kakko.svg);
  width: 4.4rem;
  height: 3.8rem;
  top: -5.2rem;
  left: -8.8rem;
}

.topAbout_ttl {
  font-family: var(--serif);
  /* font-size: 26px; */
  /* font-size: clamp(22px, 2.15vw, 26px); */

  font-size: 2.6rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding-top: 8px;
}

.topAbout_ttl span {
  display: block;
  /* font-size: 40px; */

  /* font-size: clamp(32px, 3.128vw, 40px); */


  font-size: 4rem;
  color: var(--color-gold);
  letter-spacing: 0.06em;
  margin-top: 3.8rem;
}

.topAbout_name {
  display: flex;
  align-items: center;
  justify-content: start;
  flex-wrap: wrap;
  gap: 10px 0;
}

.topAbout_name {
  color: var(--color-sub);
  /* font-size: 14px; */
  font-size: 1.4rem;
  margin: 62px 0 109px;
}

.topAbout_name div:first-of-type {
  padding-right: 1.8rem;
  margin-right: 1.8rem;
  border-right: 1px solid var(--color-g-border);
}

.topAbout_name span {
  font-family: var(--serif);
  color: var(--color-default);
  /* font-size: 16px; */
  font-size: 1.6rem;
  margin-left: 14px;
}

.topAbout_txt p {
  line-height: 2.4;
  /* font-size: 18px; */
  /* font-size: clamp(16px, 1.56vw, 18px); */

  font-size: 1.8rem;
  letter-spacing: 0.05em;
  /* margin-top: 64px; */
  margin-top: 6.4rem;
  font-family: var(--serif);
}

.topAbout_bg {
  overflow: hidden;
  position: relative;
  /* padding: 0 0 460px; */
  padding-top: 5.2rem;
  padding-bottom: 46rem;
  z-index: 1;
}

.topAbout_img {
  position: absolute;
  border-radius: 5px;
  overflow: hidden;
  z-index: -1;
}

.topAbout_img img {
  border-radius: 5px;
}

.topAbout_img.img01 {
  /* width: 255px; */
  /* width: clamp(1px, 17.6vw, 255px); */

  width: 25.5rem;
  /* right: -26.6vw; */
  /* right: 5.7vw; */
  right: 5.7rem;
  top: 0;
}

.topAbout_img.img02 {
  /* width: 255px; */
  width: clamp(1px, 26.39vw, 380px);
  /* width: clamp(1px, 15.38vw, 380px); */
  /* top: 288px; */

  /* width: 38rem; */
  /* top: 324px; */
  top: 32.4rem;
  /* left: -33.6vw; */
  left: -1.1vw;
}

.topAbout_img.img03 {
  /* width: 340px; */
  /* width: clamp(1px, 28.34vw, 340px); */
  width: 34rem;
  /* top: 1139px; */
  top: 113.9rem;
  /* right: 4.44vw; */
  right: 4.44rem;
}

@media screen and (max-width:1023px) {
  #topAbout {
    padding-top: 81px;
  }

  .topAbout_inner {
    /* width: 84%; */
    /* padding-left: 30px;
    padding-right: 30px; */
  }

  .topAbout_inner::before {
    width: 34px;
    height: 29px;
    top: -61px;
    left: -15px;
  }

  .topAbout_ttl {
    font-size: 20px;
    padding-left: 10px;
  }

  .topAbout_ttl span {
    font-size: 36px;
    line-height: 1.3;
    margin-top: 32px;
  }

  .topAbout_txt {
    padding-left: 10px;
  }

  .topAbout_txt p {
    font-size: 14px;
    margin-top: 48px;
  }

  .topAbout_name {
    font-size: 12px;
    margin: 42px 0;
    padding-left: 10px;
  }

  .topAbout_name div:first-of-type {
    padding-right: 18px;
    margin-right: 18px;
  }

  .topAbout_name span {
    font-size: 14px;
  }

  .topAbout_bg {
    padding-top: 61px;
    padding-bottom: calc(386px + 25px);
  }

  .topAbout_img.img01 {
    position: static;
    width: 100%;
    max-width: 315px;
    margin: 0 auto;
  }

  .topAbout_img.img02 {
    width: 196px;
    top: auto;
    bottom: 175px;
    left: -17px;
  }

  .topAbout_img.img03 {
    width: 201px;
    right: 21px;
    top: auto;
    bottom: 81px;
  }
}

/*================================================
* topFeatures
================================================*/
#topFeatures {
  background: var(--color-bg);
  border-radius: 5rem 5rem 0 0;
  margin-top: -5rem;
  padding-top: 10rem;
}

/* fix */
.topFeatures_fix {
  position: sticky;
  top: 0;
}

.topFeatures_fix-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* .topFeatures_en {
  padding-top: 10rem;
} */

.topFeatures_en img {
  display: block;
  width: 98.26%;
  margin: 0 auto;
}

.topFeatures_menu {
  width: 82.63%;
  min-width: 950px;
  margin: 0 auto;
  /* padding-top: 18.2rem; */
  /* padding-top: 22.4vh; */
  padding-top: clamp(1rem, 22.4vh, 18.2rem);
}

.topFeatures_menu-wrap {
  width: 275px;
}

.topFeatures_menu h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 2rem;
}

.topFeatures_menu h2 span {
  display: block;
  font-size: 2.8rem;
  margin-top: 4rem;
  line-height: 1.6;
}

.topFeatures_menulist {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, 1fr);
  max-width: 228px;
  margin-top: 6rem;
}

.topFeatures_menulist-wrap.tab {
  display: none;
}

.topFeatures_menulist li {
  font-family: var(--en);
  font-size: 1.5rem;
  color: var(--color-sub);
  border: 1px solid var(--color-inverse);
  border-radius: 100px;
  padding: 12px 0;
  text-align: center;
  transition: .4s;
}

.topFeatures_menulist .is-active {
  background: var(--color-inverse);
  font-weight: 500;
  color: var(--color-default);
}

/* topFeatures_inner */
.topFeatures_inner {
  width: 82.63%;
  margin: 0 auto;
  padding-top: 226px;
  min-width: 1020px;
}


.topFeatures_cnt-wrap {
  width: 64.28%;
  margin-left: auto;
  position: relative;
  padding-bottom: 300px;
  /* min-width: 670px; */
}

.topFeatures_cnt-box {
  margin-bottom: 300px;
  background: var(--color-inverse);
  border-radius: 1rem;
}

.topFeatures_cnt-inner {
  padding-left: 56px;
  position: relative;
  min-height: 65rem;
  padding-bottom: 5rem;
}

.topFeatures_num {
  position: absolute;
  top: 30px;
  left: 20px;
  font-family: var(--en);
  color: #AF8F43;
  font-size: 1.4rem;
}

.topFeatures_num span {
  display: block;
}

.topFeatures_num .en {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-transform: uppercase;
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid var(--color-g-border);
}

.topFeatures_img {
  border-radius: 1rem;
  overflow: hidden;
}

.topFeatures_img img {
  object-position: center bottom;
  overflow: hidden;
  object-fit: cover;
  width: 100%;
  /* height: 34vh; */

  height: clamp(1rem, 34vh, 28rem);
}

.topFeatures_txt {
  padding: 3.5rem 7rem 0 5rem;
}

.topFeatures_txt h3 {
  color: var(--color-gold);
  font-family: var(--serif);
  font-size: 3.2rem;
  font-weight: 500;
  line-height: 1.6;
}

.topFeatures_txt p {
  line-height: 2;
  font-size: 16px;
  margin-top: 2.6rem;
}

@media (min-width: 1440px) and (min-height: 900px) {
  .topFeatures_cnt-inner {
    min-height: 65vh;
  }
}

@media screen and (max-width:1023px) {
  #topFeatures {
    /* overflow: hidden; */
    border-radius: 2.5rem 2.5rem 0 0;
    margin-top: -2.5rem;
    padding-top: 50px;
  }

  .topFeatures_fix,
  .topFeatures_fix-wrap {
    position: relative;
  }

  /* .topFeatures_fix-wrap {
    height: 100vh;
    position: relative;
  } */

  .topFeatures_menu {
    width: 82.63%;
    margin: 0 auto 37px;
    padding-top: 0;
  }

  .topFeatures_menu-wrap {
    width: auto;
  }

  .topFeatures_menu h2 {
    font-size: 16px;
    text-align: center;
  }

  .topFeatures_menu h2 span {
    font-size: 21px;
    margin-top: 28px;
  }

  .topFeatures_menulist.pc {
    display: none;
  }

  .topFeatures_menulist-wrap.tab {
    display: block;
    position: sticky;
    /* top: 650px; */
  }

  .topFeatures_menulist {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: unset;
    gap: 8px;
    grid-template-columns: repeat(6, 1fr);
    margin: 0 auto;
    /* margin-top: 480px; */
    width: 87.4%;
    min-width: 295px;
  }

  .topFeatures_menulist li {
    font-size: 13px;
    padding: 9.5px 0;
  }

  .topFeatures_en {
    overflow: hidden;
  }

  .topFeatures_en img {
    width: 188.5vw;
    max-width: unset;
    position: relative;
    left: -6.133vw;
  }

  .topFeatures_menu,
  .topFeatures_inner,
  .topFeatures_cnt-wrap {
    min-width: unset;
  }

  .topFeatures_inner {
    width: 92%;
    /* padding-top: 237px; */
    /* padding-top: clamp(237px, 36.06vw, 307px); */
    /* padding-top: 37px; */
    padding-top: 0;
  }

  .topFeatures_cnt-wrap {
    width: 100%;
  }


  .topFeatures_cnt-inner {
    /* padding: 19px 0 100px; */
    padding: 19px 0 0;
    min-height: unset;
    min-height: 600px;
    padding-bottom: 20px;
  }

  .topFeatures_num {
    position: static;
    display: flex;
    align-items: center;
    padding-left: 20px;
    padding-bottom: 16px;
  }

  .topFeatures_num span {
    font-size: 12px;
  }

  .topFeatures_num .en {
    -webkit-writing-mode: unset;
    -ms-writing-mode: unset;
    writing-mode: unset;
    padding: 0 0 0 18px;
    border: none;
    border-left: 1px solid var(--color-g-border);
    margin: 0 0 0 18px;
    padding-left: 20px;
  }

  .topFeatures_img {
    border-radius: 8px;
  }

  .topFeatures_img img {
    height: auto;
  }

  .topFeatures_txt {
    padding: 32px 20px 0;
  }

  .topFeatures_txt h3 {
    font-size: 22px;
  }

  .topFeatures_txt p {
    margin-top: 28px;
    /* font-size: 14px; */
    font-size: clamp(10px, 3.733vw, 14px);
  }
}

/*================================================
* topRecruit
================================================*/
#topRecruit {
  background: url(../images/recruit_bg.webp) no-repeat center bottom/cover;
  border-radius: 5rem 5rem 0 0;
  padding: 24.2rem 0 55rem;
}

#topRecruit .loop_swiper {
  position: absolute;
  width: 100%;
  top: 8.8rem;
}

#topRecruit .loop_swiper .swiper-wrapper {
  transition-timing-function: linear;
}

#topRecruit .loop_swiper .swiper-slide {
  margin-right: 8rem;
  width: 139.3rem;
}


.topRecruit_inner {
  display: flex;
  align-items: start;
  justify-content: space-between;
}

.topRecruit_txt {
  width: 43.33%;
  min-width: 467px;
}

.topRecruit_txt p {
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  line-height: 2;
  margin-bottom: 2em;
  color: var(--color-inverse);
}

@media screen and (max-width:1023px) {
  #topRecruit {
    padding: 100px 0 266px;
    border-radius: 25px 25px 0 0;
    background: url(../images/recruit_bg_sp.webp) no-repeat center bottom/cover;
    min-height: 992px;
  }

  #topRecruit .loop_swiper {
    top: 50px;
  }

  #topRecruit .loop_swiper .swiper-slide {
    margin-right: 40px;
    width: 704px;
  }

  .topRecruit_ttl {
    width: 100%;
  }

  .topRecruit_ttl .hd .ja {
    margin-top: 56px;
  }


  .topRecruit_inner {
    flex-wrap: wrap;
  }

  .topRecruit_txt {
    width: 100%;
    min-width: unset;
    margin-bottom: 26px;
  }

  .topRecruit_txt p {
    font-size: 14px;
  }
}

/*================================================
* topNews
================================================*/
#topNews {
  background: var(--color-bg);
  padding-top: 16rem;
  padding-bottom: 16rem;
  /* top: -16rem; */
  margin-top: -16rem;
  border-radius: 5rem 5rem 0 0;
}

.topNews_inner {
  display: flex;
  align-items: start;
  justify-content: space-between;
  padding-bottom: 14rem;
}

.topNews_cnt {
  width: 71.42%;
}


.topInsta {
  padding: 7.2rem 0;
  position: relative;
  z-index: 1;
}

.topInsta::before {
  position: absolute;
  content: "";
  background: rgb(255 255 255 / 80%);
  border-radius: 5rem;
  top: 0;
  left: 0;
  filter: blur(8px);
  backdrop-filter: blur(10px);
  width: 100%;
  height: 100%;
  z-index: -1;
}

.topInsta_inner {
  width: 85.71%;
  margin: 0 auto;
}

.topInsta_inner h3 {
  font-family: var(--en);
  color: var(--color-gold);
  letter-spacing: 0.03em;
  font-size: 2.6rem;
  margin-bottom: 4rem;
}

.topInsta_inner h3 i {
  width: 4rem;
  height: 4rem;
  margin-right: 10px;
}


.instaAccount_box {
  display: flex;
  justify-content: space-between;
}

.instaAccount_box:not(:first-of-type) {
  border-top: 1px solid #EED9C2;
  padding-top: 48px;
  margin-top: 48px;
}

.instaAccount_box-meta {
  max-width: 280px;
}

.instaAccount_box-meta h4 {
  font-size: 1.4rem;
  color: var(--color-gold);
  font-family: var(--en);
  background: #F7F4F0;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 7px 10px;
  border-radius: 100px;
}

.instaAccount_box-meta p {
  margin: 3.3rem 0;
  line-height: 1.7;
}


.instaAccount_box-img {
  width: 61.7%;
  padding: 1rem;
  /* background: #cecece; */
}

.instaAccount_box-img .insta-list {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(3, 1fr);
}


.instaAccount_box-img .insta-list li img {
  object-fit: cover;
  object-position: center;
  height: auto;
  aspect-ratio: 1/1;
  overflow: hidden;
}

@media screen and (max-width:1023px) {
  #topNews {
    padding-top: 100px;
    padding-bottom: 80px;
    /* top: -48px; */
    margin-top: -48px;
    border-radius: 25px 25px 0 0;
  }

  .topNews_inner {
    flex-wrap: wrap;
    padding-bottom: 80px;
  }

  .topNews_cnt {
    width: 100%;
    padding-bottom: 48px;
  }


  .topInsta {
    padding: 57px 0;
  }

  .topInsta::before {
    border-radius: 30px;
  }

  .topInsta_inner h3 {
    font-size: 20px;
    margin-bottom: 40px;
  }

  .topInsta_inner h3 i {
    width: 30px;
    height: 30px;
  }

  .instaAccount_box {
    flex-wrap: wrap;
  }

  .instaAccount_box-meta {
    width: 100%;
    max-width: unset;
  }

  .instaAccount_box-meta h4 {
    font-size: 12px;
    margin-bottom: 16px;
  }

  .instaAccount_box-meta p {
    margin: 24px 0;
    font-size: 16px;
  }

  .instaAccount_box-img {
    width: 100%;
    padding: 0;
  }

  .instaAccount_box-img .insta-list {
    gap: 5px;
  }
}

/*================================================
* price
================================================*/

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

/*================================================
* access
================================================*/


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

/*================================================
* price
================================================*/

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

/*================================================
* access
================================================*/


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

/*================================================
* price
================================================*/

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

/*================================================
* access
================================================*/


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

/*================================================
* price
================================================*/

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

/*================================================
* access
================================================*/


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

/*================================================
* price
================================================*/

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

/*================================================
* access
================================================*/


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