@charset "UTF-8";

:root {
  --color-chara-bg: #e8f3f4;
  --color-chara-cloud: #ffffff;
  --color-chara-body: #231815;
}

.chara-mv {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  background-color: #fff;
}

.chara-mv__video-wrap {
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 750px) {
  .chara-mv__video-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.chara-mv__video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

@media screen and (max-width: 750px) {
  .chara-mv__video {
    height: 50svh;
  }
}

.chara-mv__title {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1197px, 79.8%);
}
@media only screen and (max-width: 750px) {
  .chara-mv__title {
    width: 86.67%;
    bottom: -2px;
  }
}

/* ==== chara-about ==== */
.chara-about {
  width: 100%;
  background-color: var(--color-chara-bg);
  position: relative;
  overflow: hidden;
}
.chara-about::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 511px;
  background-image: url('../images/character/chara-about-bg.png');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 100%;
  z-index: 0;
}
/* SP カンプの about 背景は単色矩形のみで雲のあしらいが無いため非表示 */
@media only screen and (max-width: 750px) {
  .chara-about::before {
    display: none;
  }
}

.chara-about__inner {
  width: 100%;
  max-width: 1500px;
  margin-inline: auto;
  position: relative;
  min-height: 1080px;
  padding-block: 103px 209px;
  padding-inline: 4vw;
}
@media only screen and (max-width: 750px) {
  .chara-about__inner {
    min-height: auto;
    padding-block: 60px 118px;
    padding-inline: 5vw;
  }
}

.chara-about__contents-wrapper {
  width: 100%;
  max-width: 660px;
  margin-inline: auto;
  text-align: center;
  position: relative;
  z-index: 2;
}
@media only screen and (max-width: 750px) {
  .chara-about__contents-wrapper {
    max-width: 100%;
  }
}

.chara-about__lead {
  font-family: var(--f-noto);
  font-size: 35px;
  font-weight: 700;
  color: var(--color-chara-body);
  line-height: calc(60 / 35);
  letter-spacing: 0.15em;
  text-align: center;
}
@media only screen and (max-width: 750px) {
  .chara-about__lead {
    font-size: 20px;
    line-height: calc(38 / 20);
  }
}

.chara-about__desc {
  margin-block-start: 45px;
  font-family: var(--f-noto);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-chara-body);
  line-height: calc(35 / 15);
  letter-spacing: 0.15em;
  text-align: center;
}
@media only screen and (max-width: 750px) {
  .chara-about__desc {
    margin-block-start: 25px;
    font-size: 13px;
    line-height: calc(26 / 13);
  }
}

.chara-about__sub-charas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.chara-about__sub-chara {
  position: absolute;
  animation: chara-float 2s ease-in-out infinite alternate;
}

.chara-about__sub-chara img {
  width: 100%;
  height: auto;
  display: block;
}

/* JSON 座標 (about y=715.35 起点で相対、幅 1500px 基準) を % で表現 → viewport 追従 */
/* 左上 sub-01 (帽子絵描き) : JSON x=207 y=864 (about相対 y=149) w=178 */
.chara-about__sub-chara--01 {
  top: 13.7%;
  left: 13.8%;
  width: 11.87%;
  animation-delay: 0s;
}
/* SP は 4 体のみ表示（03 くま / 06 緑はカンプでも非表示）。位置は SP カンプ 375×750 基準の % */
@media only screen and (max-width: 750px) {
  .chara-about__sub-chara--01 {
    top: 84%;
    left: 7.73%;
    width: 17.33%;
  }
}

/* 左中 sub-02 (青紫) : JSON x=159 y=1092 (about相対 y=377) w=129 */
.chara-about__sub-chara--02 {
  top: 34.9%;
  left: 10.6%;
  width: 8.6%;
  animation-delay: -1.33s;
}
@media only screen and (max-width: 750px) {
  .chara-about__sub-chara--02 {
    top: 61.07%;
    left: 9.6%;
    width: 13.33%;
  }
}

/* 左下 sub-03 (くま) : JSON x=321 y=1261 (about相対 y=545) w=125 */
.chara-about__sub-chara--03 {
  top: 50.4%;
  left: 21.4%;
  width: 8.34%;
  animation-delay: -2.67s;
}
@media only screen and (max-width: 750px) {
  .chara-about__sub-chara--03 {
    display: none;
  }
}

/* 右上 sub-04 (芽新芽) : JSON x=1146 y=844 (about相対 y=129) w=136, right = (1500-1146-136)/1500 = 14.53% */
.chara-about__sub-chara--04 {
  top: 11.9%;
  right: 14.53%;
  width: 9.1%;
  animation-delay: -0.67s;
}
@media only screen and (max-width: 750px) {
  .chara-about__sub-chara--04 {
    top: 65.2%;
    right: 9.07%;
    width: 13.07%;
  }
}

/* 右中 sub-05 (ピンク) : JSON x=1213 y=1094 (about相対 y=378) w=126, right = (1500-1213-126)/1500 = 10.73% */
.chara-about__sub-chara--05 {
  top: 34.99%;
  right: 10.73%;
  width: 8.44%;
  animation-delay: -2s;
}
@media only screen and (max-width: 750px) {
  .chara-about__sub-chara--05 {
    top: 87.73%;
    right: 8.8%;
    width: 15.2%;
  }
}

/* 右下 sub-06 (緑) : JSON x=1067 y=1261 (about相対 y=545) w=111, right = (1500-1067-111)/1500 = 21.47% */
.chara-about__sub-chara--06 {
  top: 50.4%;
  right: 21.47%;
  width: 7.42%;
  animation-delay: -3.33s;
}
@media only screen and (max-width: 750px) {
  .chara-about__sub-chara--06 {
    display: none;
  }
}

.chara-about__main-chara-wrapper {
  position: relative;
  width: 100%;
  max-width: 329px;
  margin-inline: auto;
  margin-block-start: 62px;
  z-index: 3;
}
@media only screen and (max-width: 750px) {
  .chara-about__main-chara-wrapper {
    margin-block-start: 40px;
    max-width: 161px;
  }
}

.chara-about__shadow {
  position: absolute;
  left: 50%;
  bottom: -16px;
  transform: translateX(-50%);
  width: 338px;
  height: 56px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 70%);
  z-index: 1;
  pointer-events: none;
}
@media only screen and (max-width: 750px) {
  .chara-about__shadow {
    bottom: -8px;
    width: 166px;
    height: 27px;
  }
}

.chara-about__main-chara {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  z-index: 2;
}

@keyframes chara-float {
  0% {
    transform: translateY(-6px) scale(0.98);
  }
  100% {
    transform: translateY(6px) scale(1.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chara-about__sub-chara {
    animation: none;
  }
}

/* ==== chara-member ==== */
.chara-member {
  width: 100%;
  background-color: #ffffff;
  overflow: hidden;
}

.chara-member__inner {
  width: 100%;
  padding-block: 6px 100px;
}
@media only screen and (max-width: 750px) {
  .chara-member__inner {
    padding-block: 30px 53px;
  }
}

.chara-member__title {
  font-family: var(--f-noto);
  font-size: 35px;
  font-weight: 700;
  color: var(--color-chara-body);
  line-height: calc(60 / 35);
  letter-spacing: 0.15em;
  text-align: center;
}
@media only screen and (max-width: 750px) {
  .chara-member__title {
    font-size: 20px;
    line-height: calc(38 / 20);
  }
}

.chara-member__slider-outer {
  position: relative;
  width: 100%;
  margin-block-start: 78px;
}
@media only screen and (max-width: 750px) {
  .chara-member__slider-outer {
    margin-block-start: 33px;
  }
}

.chara-member__slider {
  width: 100%;
  padding-block-start: 114px;
}
@media only screen and (max-width: 750px) {
  .chara-member__slider {
    padding-block-start: 0;
  }
}

.chara-member__nav-prev,
.chara-member__nav-next {
  position: absolute;
  top: 206.5px;
  width: 19px;
  height: 38px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 10;
  opacity: 1;
  transform: translateY(-50%);
}
.chara-member__nav-prev.swiper-button-disabled,
.chara-member__nav-next.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}
@media only screen and (max-width: 750px) {
  .chara-member__nav-prev,
  .chara-member__nav-next {
    top: 109px;
  }
}

.chara-member__nav-prev::after,
.chara-member__nav-next::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: no-repeat center / contain;
}

.chara-member__nav-prev::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 30' fill='none' stroke='%23231815' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='14,3 4,15 14,27'/%3E%3C/svg%3E");
}

.chara-member__nav-next::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 30' fill='none' stroke='%23231815' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,3 16,15 6,27'/%3E%3C/svg%3E");
}

.chara-member__nav-prev {
  left: 36.5%;
}
@media only screen and (max-width: 750px) {
  .chara-member__nav-prev {
    left: 58px;
  }
}

.chara-member__nav-next {
  right: 36.5%;
}
@media only screen and (max-width: 750px) {
  .chara-member__nav-next {
    right: 58px;
  }
}

/* ==== chara-card (chara-member 内スライドカード) ==== */
.chara-card {
  width: 100%;
  padding-inline: 12px;
  text-align: center;
}
@media only screen and (max-width: 750px) {
  .chara-card {
    padding-inline: 0;
  }
}

.chara-card__img {
  width: 100%;
  max-width: 252px;
  height: auto;
  display: block;
  margin-inline: auto;
  aspect-ratio: 252 / 245;
  transition: transform 0.4s ease;
  transform-origin: center bottom;
}

.swiper-slide-active .chara-card__img {
  transform: scale(1.464);
}
@media only screen and (max-width: 750px) {
  .chara-card__img {
    max-width: 190px;
  }

  .swiper-slide-active .chara-card__img {
    transform: scale(1);
  }
}

.chara-card__name,
.chara-card__industry,
.chara-card__catch,
.chara-card__desc {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.swiper-slide-active .chara-card__name,
.swiper-slide-active .chara-card__industry,
.swiper-slide-active .chara-card__catch,
.swiper-slide-active .chara-card__desc {
  opacity: 1;
  visibility: visible;
}

.chara-card__name {
  margin-block-start: 42px;
  font-family: var(--f-noto);
  font-size: 30px;
  font-weight: 700;
  color: var(--color-chara-body);
  line-height: 1;
  letter-spacing: 0.15em;
  text-align: center;
}
@media only screen and (max-width: 750px) {
  .chara-card__name {
    width: 293px;
    margin-block-start: 30px;
    margin-inline: calc((100% - 293px) / 2);
    font-size: 24px;
  }
}

.chara-card__industry {
  margin-block-start: 13px;
  font-family: var(--f-noto);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-chara-body);
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
}
@media only screen and (max-width: 750px) {
  .chara-card__industry {
    width: 293px;
    margin-block-start: 11px;
    margin-inline: calc((100% - 293px) / 2);
    font-size: 14px;
  }
}

.chara-card__catch {
  margin-block-start: 29px;
  font-family: var(--f-noto);
  font-size: 20px;
  font-weight: 700;
  color: #ffa000;
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
}
@media only screen and (max-width: 750px) {
  .chara-card__catch {
    width: 293px;
    margin-block-start: 24px;
    margin-inline: calc((100% - 293px) / 2);
    font-size: 16px;
  }
}

.chara-card__desc {
  width: 225px;
  margin-block-start: 19px;
  margin-inline: auto;
  font-family: var(--f-noto);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-chara-body);
  line-height: calc(30 / 15);
  letter-spacing: 0.05em;
  text-align: left;
}
@media only screen and (max-width: 750px) {
  .chara-card__desc {
    width: 293px;
    margin-block-start: 15px;
    margin-inline: calc((100% - 293px) / 2);
    font-size: 13px;
    line-height: calc(26 / 13);
    letter-spacing: 0.15em;
  }
}

/* ==== chara-member__cta ==== */
.chara-member__cta {
  width: 100%;
  background-color: #ececed;
}

.chara-member__cta-inner {
  position: relative;
  width: 100%;
  max-width: 1500px;
  margin-inline: auto;
  padding-block: 68px 58px;
  padding-inline: 4vw;
}
@media only screen and (max-width: 750px) {
  .chara-member__cta-inner {
    position: relative;
    display: block;
    padding-block: 37px 31px;
    padding-inline: 0;
    max-width: 500px;
  }
}

.chara-member__cta-img {
  position: absolute;
  top: -41px;
  left: 9.13%;
  z-index: 1;
  width: 31.73%;
  max-width: 476px;
  height: auto;
  display: block;
  aspect-ratio: 476 / 428;
}
@media only screen and (max-width: 750px) {
  .chara-member__cta-img {
    position: absolute;
    top: -17px;
    left: 26px;
    z-index: 1;
    width: 149px;
    max-width: none;
  }
}

.chara-member__cta-text {
  position: relative;
  z-index: 2;
  width: 41.6%;
  max-width: 574px;
  margin-inline: auto 6.38%;
  text-align: center;
}
@media only screen and (max-width: 750px) {
  .chara-member__cta-text {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }
}

/* nowrap でテキスト幅が親（cta-text）を超えるため text-align では中央にならない。左 50% + translate で中央に揃える */
.chara-member__cta-title {
  position: relative;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  width: max-content;
  font-family: var(--f-noto);
  font-size: min(35px, 2.33vw);
  font-weight: 700;
  color: var(--color-chara-body);
  line-height: calc(60 / 35);
  letter-spacing: 0.15em;
  text-align: center;
  white-space: nowrap;
}
@media only screen and (max-width: 750px) {
  .chara-member__cta-title {
    left: 0;
    transform: none;
    width: max-content;
    margin-inline-start: auto;
    margin-inline-end: 13px;
    font-size: min(18px, 4.8vw);
    line-height: calc(36 / 18);
    text-align: left;
    white-space: normal;
  }
}

.chara-member__cta-desc {
  margin-block-start: 14px;
  font-family: var(--f-noto);
  font-size: clamp(12px, 1.2vw, 18px);
  font-weight: 700;
  color: var(--color-chara-body);
  line-height: calc(40 / 18);
  letter-spacing: 0.2em;
  text-align: right;
}
@media only screen and (max-width: 750px) {
  .chara-member__cta-desc {
    position: relative;
    z-index: 2;
    margin-block-start: 9px;
    padding-inline: 41px 34px;
    font-size: min(13px, 3.47vw);
    font-weight: 500;
    line-height: calc(26 / 13);
    letter-spacing: 0.075em;
    text-align: left;
  }
}

body.original-character .footer {
  background: #ffc832;
}