/*
Theme Name: BNature Theme
Description: A minimal WordPress theme for BNature website
Version: 1.0.0
Author: yashibous
*/
@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=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

/* CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: none !important;
}

:root {
  --ys-color-text: #033752;
  --ys-color-text-light: #bdccd4;
  --ys-color-base: #f8f9fd;
  --ys-color-accent: #abac6c;
  --ys-color-cta: #bfe3e3;
  --ys-color-gray: #bec6cf;
  --ys-font-family-ja: "MFW-KoburinaGoStd-W6", sans-serif;
  --ys-font-family-ja-sub: "MFW-KoburinaGoStd-W3", sans-serif;
  --ys-font-family-en: "Libre Baskerville", serif;
  --ys-font-family-en-sub: "Lato", sans-serif;
  --ys-content-max-width: 1080px;
  --ys-blog-item-category-color-staff: #abac6c;
  --ys-blog-item-category-color-wedding: #a67490;
  --ys-blog-item-category-color-hawaii: #6f9ba5;
}

body {
    font-family: var(--ys-font-family-ja);
    line-height: 1.5;
    color: var(--ys-color-text);
    background-color: #fff;
    overflow-x: hidden;
}
img {
  width: 100%;
  height: auto;
  vertical-align: middle;
}

/*
* layout
*/ 
.l-main {
  position: relative;
  z-index: 1;
  padding-block: 90px;
}
@media screen and (max-width: 1023px) {
  .l-main {
    padding-block: 90px 40px;
  }
}
body.home .l-main {
  padding-block: 0;
}
.l-main.single-case {
  padding-block: 0;
}
/* section */
.l-section {
  container-type: inline-size;
}

.l-section__inner {
  max-width: var(--ys-content-max-width);
  margin-inline: auto;
}

.l-section__content {

}

.l-section__title-area {
  margin-bottom: 60px;
}
@media screen and (max-width: 1023px) {
  .l-section__title-area {
    margin-bottom: 20px;
  }
}

.l-section__title {
  font-size: 36px;
  color: var(--l-section__title-color, var(--ys-color-text));
  line-height: 1.2;
}
.home .l-section__title {
  font-size: 24px;
}
@media screen and (max-width: 1023px) {
  .l-section__title {
    font-size: 24px;
  }
  .home .l-section__title {
    font-size: 18px;
  }
}
.l-section__title-sub {
  font-size: 9px;
  font-family: var(--ys-font-family-en-sub);
  color: var(--ys-color-text-light);
  line-height: 1.8;
  letter-spacing: 0.22em;
}
.l-section__view-all   {
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--ys-color-text);
  line-height: 1.2;

  &::before {
    display: inline-block;
    content: "";
    background-image: url(./assets/image/l-section__view-all-icon.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    vertical-align: baseline;
  }
}
@media screen and (max-width: 1023px) {
  .l-section__view-all   {
    font-size: 12px;


    &[data-view-all="circle"] {
      width: 75px;
      height: 75px;
      border: 1px solid var(--ys-color-gray);
      border-radius: 50%;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 4px;
      &::before {
        display: block;
        margin-right: 0;
      }
    }
  }
}

/* header */
.l-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding-inline: 30px;
  padding-block-start: 30px;
  z-index: 2;
}

.l-header__right {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
  justify-content: flex-start;
}

.l-header__logo {
  width: 38px;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  opacity: 1;
  visibility: visible;
}
body.home .l-header__logo {
  opacity: 0;
  visibility: hidden;
}

.l-header__hamburger {

}

.l-header__link {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.16em;
  font-weight: 500;
  position: relative;
  z-index: 1001;
}
@media screen and (max-width: 1023px) {
  .l-header__link {
    display: none;
  }
}

/* footer */
.l-footer {
  display: grid;
  grid-template-columns: 120px 1fr 120px;
  grid-template-rows: repeat(3, auto);
  gap: 20px;
  align-items: center;
  padding-inline: 24px;
  padding-block: 70px 60px;
  background-color: #fff;
}
@media screen and (max-width: 1023px) {
  .l-footer {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, auto);
    padding-block: 30px 20px;
  }
}

.l-footer__logo {
  grid-column: 1;
  grid-row: 1;
  width: 90px;
  img {
    vertical-align: initial;
  }
}
@media screen and (max-width: 1023px) {
  .l-footer__logo {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    margin-bottom: 20px;
  }
}

.l-footer__menu {
  grid-column: 2;
  grid-row: 1;

  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.1em;
  font-weight: 500;

  ul {
    display: flex;
    gap: 24px;
    justify-content: flex-start;
  }
}
@media screen and (max-width: 1023px) {
  .l-footer__menu {
    grid-column: 1;
    grid-row: 2;
    margin-bottom: 20px;
  }
}

.l-footer__to-top {
  grid-column: 3;
  grid-row: 1;
  justify-self: flex-end;
}
@media screen and (max-width: 1023px) {
  .l-footer__to-top {
    display: none;
  }
}

.l-footer__links {
  grid-column: 2;
  grid-row: 2;

  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.1em;
  font-weight: 500;
  color: var(--ys-color-text-light);

  ul {
    display: flex;
    gap: 24px;
    justify-content: flex-start;
  }

}
@media screen and (max-width: 1023px) {
  .l-footer__links {
    grid-column: 1;
    grid-row: 3;
    ul {
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
    }
  }
}

.l-footer__icons {
  grid-column: 1;
  grid-row: 3;

  ul {
    display: flex;
    gap: 12px;
    justify-content: flex-start;
    align-items: center;
  }
}
@media screen and (max-width: 1023px) {
  .l-footer__icons {
    grid-column: 1;
    grid-row: 4;
    ul {
      justify-content: center;
    }

  }
}

.l-footer__icons li {
    width: 16px;
}

.l-footer__copyright {
  grid-column: 3;
  grid-row: 3;


  font-size: 9px;
  letter-spacing: 0.12em;
  font-weight: 500;
  text-align: right;
  color: var(--ys-color-text-light);
}
@media screen and (max-width: 1023px) {
  .l-footer__copyright {
    grid-column: 1;
    grid-row: 5;
    text-align: center;
  }
}

.p-banner-about {
  padding-block: 0 90px;
}
@media screen and (max-width: 1023px) {
  .p-banner-about {
    padding-block: 0 30px;
  }
}

.p-banner-about__content {
  width: 80%;
  max-width: 830px;
  margin-inline: auto;
}
@media screen and (max-width: 1023px) {
  .p-banner-about__content {
    width: 100%;
    padding-inline: 20px;
  }
}

.p-banner-about__link {
  background-image: url(./assets/image/p-banner-about.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100%;
  display: block;
  aspect-ratio: 828/307;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
}
@media screen and (max-width: 1023px) {
  .p-banner-about__link {
    width: 100%;
    aspect-ratio: 326 / 152;
    gap: 10px;
  }
}

.p-banner-about__title {
  font-size: 36px;
  letter-spacing: 0.06em;
  color: #fff;
}
@media screen and (max-width: 1023px) {
  .p-banner-about__title {
    font-size: 26px;
  }
}

.p-banner-about__text {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: #fff;
}
@media screen and (max-width: 1023px) {
  .p-banner-about__text {
    font-size: 11px;
  }
}


/*
* component
*/
/* hamburger */
.c-hamburger {
  display: block;
  width: 25px;
  padding: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 1001;
}

.c-hamburger__box {
  display: grid;
  grid-template-rows: 1fr;
  gap: 8px;
  width: 100%;
}

.c-hamburger__line {
  height: 1px;
  background-color: var(--ys-color-text); 
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ハンバーガーボタンが開いている時 */
.c-hamburger.is-open {
  width: 25px;

}
.c-hamburger.is-open .c-hamburger__line:first-child {
  transform: translateY(4.5px) rotate(30deg);
}

.c-hamburger.is-open .c-hamburger__line:last-child {
  transform: translateY(-4.5px) rotate(-30deg);
}

/* グローバルナビゲーション */
.c-gnav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  background: var(--ys-color-base);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px 30px 0;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 64%;
    width: 30%;
    height: 100%;
    background-image: url(./assets/image/c-gnav__image.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  &::after {
    content: '';
    position: absolute;
    bottom: -10px;
    right: 0;
    width: 947px;
    height: 84px;
    background-image: url(./assets/image/c-gnav__message.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.8;
  }
}
@media screen and (max-width: 1023px) {
  .c-gnav {
    align-items: flex-start;
  }
}

.c-gnav.is-open {
  opacity: 1;
  visibility: visible;
}

.c-gnav__logo {
  position: absolute;
  top: 30px;
  left: 30px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.c-gnav__logo img:first-child {
  width: 213px;
  filter: drop-shadow(15px 15px 0 rgba(186, 200, 208, 0.4));
}
@media screen and (max-width: 1023px) {
  .c-gnav__logo {
    width: 160px;
  }
}

.c-gnav__logo img:last-child {
  width: 93px;
  position: absolute;
  top: 130px;
  left: 120px;
}
@media screen and (max-width: 1023px) {
  .c-gnav__logo img:last-child {
    width: 60px;
    top: 100px;
    left: 96px;
  }
}

.c-nav__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  text-align: center;
  width: 40%;
  position: relative;
  z-index: 1;
}

.c-gnav__menu ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.c-gnav__menu a {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ys-color-text);
  text-decoration: none;
  transition: color 0.3s ease;
}

.c-gnav__menu a:hover {
  color: var(--ys-color-accent);
}

.c-gnav__links ul {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
}

.c-gnav__links a {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ys-color-text-light);
  text-decoration: none;
  transition: color 0.3s ease;
}
@media screen and (max-width: 1023px) {
  .c-gnav__links a {
    text-align: left;
  }
}

.c-gnav__links a:hover {
  color: var(--ys-color-text);
}

.c-gnav__icons {
  --icon-main-color: var(--ys-color-text);
  --icon-bg-color: white;
}

.c-gnav__icons ul {
  display: flex;
  gap: 16px;
  justify-content: flex-start;
}

.c-gnav__icons img {
  width: 20px;
  height: 20px;
  transition: opacity 0.3s ease;
}

.c-gnav__icons a:hover img {
  opacity: 0.7;
}

/* スクロール無効化 */
body.is-nav-open {
  overflow: hidden;
}

/* to-top */
.c-to-top {
  position: relative;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;

  &::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    border-left: 2px solid var(--ys-color-text-light);
    border-bottom: 2px solid var(--ys-color-text-light);
    transform: translate(-50%, -30%) rotate(135deg);
  }

}

/* cta */
.c-cta {
  color: var(--ys-color-base);
  position: relative;
  z-index: 1;
  padding-inline: 30px;

  a {
    display: block;
    background-color: var(--ys-color-cta);
  }
}
@media screen and (max-width: 1023px) {
  .c-cta {
    padding-inline: 10px;
  }
}

.c-cta__content {
  padding-block: 120px 110px;
  
}
@media screen and (max-width: 1023px) {
  .c-cta__content {
    padding-block: 60px 60px;
  }
}

.c-cta__title-en {
  font-size: 44px;
  line-height: 1.2;
  letter-spacing: 0;
  font-weight: 500;
  text-align: center;
  margin-block-end: 30px;
}
@media screen and (max-width: 1023px) {
  .c-cta__title-en {
    font-size: 32px;
    margin-block-end: 0;
  }
}

.c-cta__title-ja {
  font-size: 12px;
  font-family: var(--ys-font-family-ja);
  letter-spacing: 0.1em;
  font-weight: 700;
  text-align: center;
}

/* information */
.c-information {
}

.c-information__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

@media screen and (max-width: 1023px) {
  .c-information__list {
    flex-direction: column;
    padding-block: 20px;
  }
}

.c-information__item {
  border-bottom: 1px solid color-mix(in srgb, var(--ys-color-gray) 40%, transparent 60%);

  a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    > * {
      padding-block: 30px;
      padding-inline: 10px;
    }

    &:hover {
      .c-information__item-category {
        color: var(--ys-color-text);
      }
    }
  }
}

@media screen and (max-width: 1023px) {
  .c-information__item {
    flex: 1 1 100%;
    padding-block: 20px;
    a {
      flex-wrap: wrap;
      > * {
        padding-block: 0;
      }
    }
  }
}

.c-information__item-date {
  font-size: 10px;
  font-family: var(--ys-font-family-en-sub);
  line-height: 1.6;
  letter-spacing: 0.1em;
  font-weight: 900;
  color: var(--ys-color-text);
  flex: 0 0 100px;
  text-transform: uppercase;
}
@media screen and (max-width: 1023px) {
  .c-information__item-date {
    flex: 0 0 90px;
    font-size: 8px;
  }
}

.c-information__item-category {
  font-size: 10px;
  font-family: var(--ys-font-family-en-sub);
  line-height: 1.6;
  letter-spacing: 0.12em;
  font-weight: 500;
  color: var(--ys-color-text-light);
  flex: 0 0 100px;
  transition: color 0.5s ease;
}
@media screen and (max-width: 1023px) {
  .c-information__item-category {
    flex: 1 0 90px;
    font-size: 8px;
  }
}

.c-information__item-title {
  font-size: 14px;
  font-family: var(--ys-font-family-ja);
  line-height: 1.5;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--ys-color-text);
  flex: 0 1 500px;
}
@media screen and (max-width: 1023px) {
  .c-information__item-title {
    font-size: 12px;
  }
}

/* blog */
.c-blog {

}

.c-blog__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 64px;
}
@media screen and (max-width: 1023px) {
  .c-blog__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding-block: 20px;
  }
}

.c-blog__item {
  a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    position: relative;



    &:hover {
      .c-blog__item-img::before {
        border-width: 0;
      }
    }
  }
}
@media screen and (max-width: 1023px) {
  .c-blog__item {
    padding-inline: 15px;
    a {
      gap: 8px;
    }
  }
}

.c-blog__item-img {
  position: relative;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 10px solid #fff;
    transition: border-width 0.5s ease;
  }
  img {
    aspect-ratio: 376 / 210;
    object-fit: cover;
  }
}
@media screen and (max-width: 1023px) {
  .c-blog__item-img {
    &::before {
      content: none;
    }
  }
}

.c-blog__item-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: var(--ys-color-text);
  text-align: center;
  width: 80%;
  text-wrap: wrap;
  /* 適切な改行設定 */
  word-break: keep-all;
  overflow-wrap: break-word;
  hyphens: auto;
}
@media screen and (max-width: 1023px) {
  .c-blog__item-title {
    font-size: 12px;
  }
}

.c-blog__item-date {
  font-size: 10px;
  font-family: var(--ys-font-family-en-sub);
  line-height: 1.6;
  letter-spacing: 0.12em;
  font-weight: 900;
  color: var(--ys-color-text-light);
  text-transform: uppercase;
}
@media screen and (max-width: 1023px) {
  .c-blog__item-date {
    font-size: 8px;
  }
}

.c-blog__item-category {
  position: absolute;
  top: 10px;
  right: -20px;
  font-size: 10px;
  font-family: var(--ys-font-family-en-sub);
  line-height: 1.6;
  letter-spacing: 0.1em;
  font-weight: 500;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: var(--ys-blog-item-category-color);
  &::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 16px;
    background-color: var(--ys-blog-item-category-color);
    margin-inline-end: 10px;
    vertical-align: baseline;
  }

  &[data-category="staff"] {
    --ys-blog-item-category-color: var(--ys-blog-item-category-color-staff);
  }
  &[data-category="wedding"] {
    --ys-blog-item-category-color: var(--ys-blog-item-category-color-wedding);
  }
  &[data-category="hawaii"] {
    --ys-blog-item-category-color: var(--ys-blog-item-category-color-hawaii);
  }
}
@media screen and (max-width: 1023px) {
  .c-blog__item-category {
    font-size: 8px;
  }
}

/* case */
.c-case {

}

.c-case__list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0;
  padding-inline: 40px;
  container-type: inline-size;
}
@media screen and (max-width: 1023px) {
  .c-case__list {
    padding-inline: 0;
    flex-direction: column;
    gap: 60px;
  }
}

.c-case__item {
  flex: 0 1 calc(50% - 30px);
  height: 470px;
  a {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
  }

  &:nth-child(2n) {
    margin-block-start: 120px;
  }
}
@media screen and (max-width: 1023px) {
  .c-case__item {
    flex: 1 1 100%;
    height: auto;
    position: relative;
    &:nth-child(2n) {
      margin-block-start: 0;
    }
    &::after {
      content: "";
      background-image: url(./assets/image/c-case__item-after.webp);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      position: absolute;
      width: 20px;
      height: 10px;
      bottom: 6px;
      right: 10px;
    }
  }
}

.c-case__item-img {
  width: 80%;
  aspect-ratio: 280 / 340;
  overflow: hidden;
  transition: width 0.5s ease;
  margin-inline: auto 0;
  margin-bottom: -60px;
  z-index: 0;
  position: relative;
  img {
    width: 120%;
    height: 120%;
    object-fit: cover;
    object-position: center;
  }

  &::before {
    content: '';
    z-index: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-right: 10px solid #fff;
    border-bottom: 10px solid #fff;
    border-left: 10px solid #fff;
    transition: border-width 0.5s ease;
  }
}
@media screen and (max-width: 1023px) {
  .c-case__item-img {
    width: 80cqw;
    height: calc(80cqw * 340 / 280);
    margin-inline: 20cqw 0;
    margin-bottom: -30px;
    &::before {
      content: none;
    }
  }
}

.c-case__item a:hover .c-case__item-img {
  &::before {
    border-width: 0;
  }
}

.c-case__textarea {
  position: relative;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
@media screen and (max-width: 1023px) {
  .c-case__textarea {
    gap: 10px;
  }
}
.c-case__item-title {
  font-size: 33px;
  font-family: var(--ys-font-family-en);
  line-height: 1.2;
  letter-spacing: 0.06em;
  width: 80%;
  text-wrap: wrap;
  word-break: keep-all;
  overflow-wrap: break-word;
  hyphens: auto;
  text-shadow:
  0 2px 8px rgba(255,255,255,0.8),
  0 0 4px #fff,
  0 0 4px #fff;
}
@media screen and (max-width: 1023px) {
  .c-case__item-title {
    font-size: 24px;
  }
}
.c-case__item-text {
  font-size: 14px;
  font-family: var(--ys-font-family-ja);
  line-height: 1.5;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-shadow:
  0 2px 8px rgba(255,255,255,0.8),
  0 0 4px #fff,
  0 0 4px #fff;
}
@media screen and (max-width: 1023px) {
  .c-case__item-text {
    font-size: 10px;
  }
}

/*
* utility
*/
.ys-font-family-en {
  font-family: var(--ys-font-family-en);
  font-style: italic;
  font-weight: 400;
}

.is-external-link {
  display: inline-block;
  vertical-align: middle;

  &::after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background-image: url(./assets/image/icon-extlink.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 10px;
  }
}

/*
* Custom Cursor - 参考サイトベース
*/
.c-cursor {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1px;
    height: 1px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 120;
    pointer-events: none;
    transition: transform 0s linear;
    mix-blend-mode: luminosity;
}

.c-cursor.-countdown,
.c-cursor.-default {
    mix-blend-mode: normal;
}

.c-cursor.-hover {
    mix-blend-mode: exclusion;
}

.c-cursor__default {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    position: relative;
    background: #d1ebf4;
    border-radius: 50%;
    pointer-events: none;
    transform: scale(.25);
    transition: transform 0.3s ease-out, background-color 0.3s ease-out;
}

.c-cursor.-banner .c-cursor__default {
    background-color: rgba(255, 255, 255, 0.8);
}

.c-cursor.-hover .c-cursor__default {
    background-color: rgba(2, 55, 82, 0.7);
}

.c-cursor.-arrow-down .c-cursor__default,
.c-cursor.-arrow-right .c-cursor__default,
.c-cursor.-countdown .c-cursor__default,
.c-cursor.-plus .c-cursor__default {
    background-color: rgba(255, 255, 255, 0.8);
}

.c-cursor.-none .c-cursor__default {
    background-color: rgba(255, 255, 255, 0);
}

@supports (mix-blend-mode: luminosity) {
    .c-cursor.-hover .c-cursor__default {
        background-color: #ffd3bd;
    }
}

.c-cursor__icon {
    display: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

.c-cursor.-arrow-down .c-cursor__icon.-arrowDown,
.c-cursor.-arrow-right .c-cursor__icon.-arrowRight,
.c-cursor.-plus .c-cursor__icon.-plus,
.c-cursor.-countdown .c-cursor__icon.-countdown {
    display: flex;
}

.c-cursor__icon.-arrowDown {
    width: 16px;
    height: 8px;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSI4Ij48ZGVmcz48ZmlsdGVyIGlkPSJhIiB4PSIxNDMiIHk9IjM0OSIgd2lkdGg9IjE0IiBoZWlnaHQ9IjgiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PGZlRmxvb2QgcmVzdWx0PSJmbG9vZCIgZmxvb2QtY29sb3I9IiMwMjM3NTIiLz48ZmVDb21wb3NpdGUgcmVzdWx0PSJjb21wb3NpdGUiIG9wZXJhdG9yPSJpbiIgaW4yPSJTb3VyY2VHcmFwaGljIi8+PGZlQmxlbmQgcmVzdWx0PSJibGVuZCIgaW4yPSJTb3VyY2VHcmFwaGljIi8+PC9maWx0ZXI+PC9kZWZzPjxwYXRoIGQ9Ik0xNTYuMjk0IDM0OWwuNy43MjctNi45OTQgNy4yNjYtLjctLjcyN3ptLTUuNTk1IDcuMjdsLS43LjcyNy02Ljk5My03LjI3LjctLjcyN3oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNDMgLTM0OSkiIGZpbGw9IiMwMjM3NTIiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZmlsdGVyPSJ1cmwoI2EpIi8+PC9zdmc+') 0 0/cover no-repeat;
}

.c-cursor__icon.-arrowRight {
    width: 24px;
    height: 11px;
    background: url('data:image/svg+xml;base64,PHN2ZyBpZD0icG9pbnRlcl9tb3JlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIxMSI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiMwMjM3NTI7ZmlsbC1ydWxlOmV2ZW5vZGR9PC9zdHlsZT48L2RlZnM+PHBhdGggaWQ9ImJvcmRlciIgY2xhc3M9ImNscy0xIiBkPSJNODU4IDYyNS41NTVsLjYzNy0uNTQ5IDYuMzYxIDUuNDk0LS42MzYuNTQ5em02LjM2MiA0LjRsLjYzNi41NDktNi4zNjEgNS40OTQtLjYzNy0uNTUzeiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTg0MSAtNjI1KSIvPjxwYXRoIGlkPSJib3JkZXItMiIgZGF0YS1uYW1lPSJib3JkZXIiIGNsYXNzPSJjbHMtMSIgZD0iTTg1OCA2MjUuNTU1bC42MzctLjU0OSA2LjM2MSA1LjQ5NC0uNjM2LjU0OXptNi4zNjIgNC40bC42MzYuNTQ5LTYuMzYxIDUuNDk0LS42MzctLjU1M3oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC04NDEgLTYyNSkiLz48cGF0aCBpZD0iYm9yZGVyLTMiIGRhdGEtbmFtZT0iYm9yZGVyIiBjbGFzcz0iY2xzLTEiIGQ9Ik04NTcgNjMwdjFoLTE2di0xaDE2eiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTg0MSAtNjI1KSIvPjwvc3ZnPg==') 0 0/cover no-repeat;
}

.c-cursor__icon.-plus {
    width: 15px;
    height: 15px;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSI+PGRlZnM+PGZpbHRlciBpZD0iYSIgeD0iODQzIiB5PSIzNDYiIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48ZmVGbG9vZCByZXN1bHQ9ImZsb29kIiBmbG9vZC1jb2xvcj0iIzAyMzc1MiIvPjxmZUNvbXBvc2l0ZSByZXN1bHQ9ImNvbXBvc2l0ZSIgb3BlcmF0b3I9ImluIiBpbjI9IlNvdXJjZUdyYXBoaWMiLz48ZmVCbGVuZCByZXN1bHQ9ImJsZW5kIiBpbjI9IlNvdXJjZUdyYXBoaWMiLz48L2ZpbHRlcj48L2RlZnM+PHBhdGggZGF0YS1uYW1lPSIrIiBkPSJNODQzIDM1NHYtMWgxNXYxaC0xNXptOC04djE1aC0xdi0xNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTg0MyAtMzQ2KSIgZmlsbD0iIzAyMzc1MiIgZmlsbC1ydWxlPSJldmVub2RkIiBmaWx0ZXI9InVybCgjYSkiLz48L3N2Zz4=') 0 0/cover no-repeat;
}

.c-cursor__icon.-countdown {
    width: 24px;
    height: 11px;
}

/* カーソルサイズの変更 */
.c-cursor.-hover .c-cursor__default,
.c-cursor.-arrow-down .c-cursor__default,
.c-cursor.-arrow-right .c-cursor__default,
.c-cursor.-plus .c-cursor__default,
.c-cursor.-banner .c-cursor__default {
    transform: scale(1);
}

/* 隠す */
.c-cursor.is-hidden {
    opacity: 0;
}

@media screen and (max-width: 1023px) {
    .c-cursor {
        visibility: hidden;
    }
}

.pc-only {
}
@media screen and (max-width: 1023px) {
  .pc-only {
    display: none;
  }
}
@media screen and (min-width: 1024px) {
  .sp-only {
    display: none;
  }
}

/*
* アニメーション用汎用クラス
*/

/* フェードインアニメーション */
.fade-in-element {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.fade-in-element.fade-in-up {
  opacity: 1;
  transform: translateY(0);
}

/* スライドインアニメーション */
.slide-in-element {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.slide-in-element.slide-in-left {
  opacity: 1;
  transform: translateX(0);
}

/* 複合アニメーション */
.complex-animation-element {
  opacity: 0;
  transform: translateX(30px);
  overflow: hidden;
  -webkit-mask-size: 100% 200%;
  mask-size: 100% 200%;
  -webkit-mask-position: 0 200%;
  mask-position: 0 200%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #fff 80%, hsla(0,0%,100%,0));
  mask-image: linear-gradient(180deg, #fff 80%, hsla(0,0%,100%,0));
  transition: opacity 2s ease-out, transform 2s ease-out, -webkit-mask-position 2s cubic-bezier(.39,.575,.565,1), mask-position 2s cubic-bezier(.39,.575,.565,1);
}

.complex-animation-element.animate {
  opacity: 1;
  transform: translateX(0);
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}

.complex-animation-element img {
  transform: translate(10px, -10px);
  filter: brightness(180%);
  transition: transform 0.2s ease-out, filter 2s ease-out;
}

.complex-animation-element.animate img {
  transform: translate(0, 0);
  filter: brightness(100%);
}

/* パララックス専用のtransition（複合アニメーション完了後） */
.complex-animation-element[data-animation-completed="true"] img {
  transition: transform 0.1s ease-out;
}

/* パララックス用コンテナ */
.parallax-container {
  overflow: hidden;
}

.parallax-container img {
  transition: transform 0.1s ease-out;
  will-change: transform;
}

/* フェードイン用 */
.fade-in-image {
  opacity: 0;
  transition: opacity 1.5s ease;
}

.fade-in-image.visible {
  opacity: 1;
}

/* タイトルアニメーション用 */
.title-animation-ready .title-char {
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.title-animation-ready .title-char.animate {
  opacity: 1;
  transform: translateX(0);
}

/* ケースアイテムアニメーション用 */
.case-item-animation .c-case__item-img {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.case-item-animation .c-case__item-img.animate {
  opacity: 1;
  transform: translateY(0);
}

.case-item-animation .c-case__item-title {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s ease 0.3s, transform 1.2s ease 0.3s;
}

.case-item-animation .c-case__item-title.animate {
  opacity: 1;
  transform: translateY(0);
}

.case-item-animation .c-case__item-text {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s ease 0.6s, transform 1.2s ease 0.6s;
}

.case-item-animation .c-case__item-text.animate {
  opacity: 1;
  transform: translateY(0);
}