@charset "utf-8";

/* ============================================
   px to rem conversion utility
   Base font-size is 12px
   so 1rem = 12px, --px = 1rem / 12 = 1px equivalent

   Liquid layout:
   min(1rem / 12, 100vw / 1280) ensures that
   - at 1280px+  : --px = 1px (fixed)
   - at 768~1280px: --px scales proportionally
   Usage: calc(24 * var(--px)) = 24px at 1280, ~14.4px at 768
   ============================================ */

:root {
  --px: min(calc(1rem / 12), calc(100vw / 1280));
  --color-accent: #6caecc;
  --color-text: #333333;
  --color-white: #ffffff;
  --color-grey-bg: #f1f0ea;
  --font-ja: "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
  --font-en: "Roboto", sans-serif;
}

/* ============================================
   PC / SP display helpers
   ============================================ */
.sp-only {
  display: none;
}

.pc-only {
  display: block;
}

/* ============================================
   Base Styles
   ============================================ */
.creator {
  width: 100%;
  margin: 0 auto;
  font-family: var(--font-ja);
  color: var(--color-text);
  line-height: 1.8;
  overflow: hidden;
  margin-top: calc(50 * var(--px));
}

.creator *,
.creator *::before,
.creator *::after {
  box-sizing: border-box;
}

.creator img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* ============================================
   Inner Container
   ============================================ */
.creator__inner {
  max-width: calc(1180 * var(--px));
  width: 100%;
  padding-inline: calc(25 * var(--px));
  margin-inline: auto;
}

/* ============================================
   Hero Section
   ============================================ */
.creator-hero {
  background: var(--color-grey-bg);
  padding-top: calc(84 * var(--px));
  padding-bottom: calc(89 * var(--px));
}

.creator-hero__inner {
  max-width: calc(600 * var(--px));
  width: 100%;
  margin-inline: auto;
  padding-inline: calc(25 * var(--px));
}

.creator-hero__title {
  font-family: var(--font-ja);
  font-size: calc(36 * var(--px));
  font-weight: 400;
  /* line-height: calc( 36 / 28); */
  text-align: center;
  margin: 0;
  color:var(--color-accent);
}

.creator-hero__title span {
  font-family: var(--font-en);
}

.creator-hero__desc {
  font-size: calc(16 * var(--px));
  line-height: 2;
  margin-top: calc(59 * var(--px));
  max-width: calc(700 * var(--px));
  margin-left: auto;
  margin-right: auto;
  color: #333333;
}

/* ============================================
   Card Section
   ============================================ */
.creator-card {
  padding-top: calc(98 * var(--px));
  padding-bottom: calc(82 * var(--px));
}

.creator-card--grey {
  background: var(--color-grey-bg);
}

.creator-card--white {
  background: var(--color-white);
}

.creator-card__body {
  display: flex;
  align-items: flex-start;
  gap: calc(45 * var(--px));
  padding-left: calc(75 * var(--px));
}

.creator-card__body--reverse {
  padding-left: 0;
  padding-right: calc(75 * var(--px));
}

.creator-card--reverse {
  margin-left: calc(60* var(--px));
}

.creator-card--reverse .creator-card__body {
  flex-direction: row-reverse;
}

/* ============================================
   Card Content (Text Side)
   ============================================ */
.creator-card__content {
  flex: 1;
  min-width: 0;
  max-width: calc(352 * var(--px));
  width: 100%;
}

.creator-card__label {
  font-family: var(--font-en);
  font-size: calc(16 * var(--px));
  line-height: 1;
  letter-spacing: 0.1em;
  margin: 0;
  color: var(--color-accent);
}

.creator-card__role {
  font-size: calc(16 * var(--px));
  font-weight: 400;
  margin-top: calc(20 * var(--px));
  line-height: 1;
  margin-bottom: 0;
}

.creator-card__name {
  font-size: calc(30* var(--px));
  font-weight: 500;
  line-height: calc( 42/ 30);
  margin-top: calc(5 * var(--px));
  border-bottom: 1px solid #333333;
  padding-bottom: calc(12 * var(--px));
  font-family: var(--font-ja);
}

.creator-card__name span {
  font-size: calc(20 * var(--px));
  line-height: calc( 46 / 20);
  font-weight: bold;
  margin-left: calc(8 * var(--px));
}

.creator-card__desc {
  font-size: calc(15 * var(--px));
  line-height: calc( 28 / 15);
  font-weight: 400;
  margin-top: calc(24 * var(--px));
}

.creator-card__btn-wrapper{
  width: 100%;
  text-align: center;
}

.creator-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(160 * var(--px));
  height: calc(40 * var(--px));
  margin-top: calc(10 * var(--px));
  border: 1px solid var(--color-text);
  color: var(--color-text);
  font-size: calc(14 * var(--px));
  line-height: 2;
  font-family: var(--font-ja);
  font-weight: 400;
  text-decoration: none;
  letter-spacing: 0.05em;
  position: relative;
  transition: opacity 0.3s;
  border-radius: calc(20 * var(--px));
}

.creator-card__btn::after {
  content: "";
  display: inline-block;
  width: calc(6 * var(--px));
  height: calc(6 * var(--px));
  border-top: 1px solid var(--color-text);
  border-right: 1px solid var(--color-text);
  transform: rotate(45deg);
  margin-left: calc(8 * var(--px));
  transition: transform 0.3s;
}

.creator-card__btn:hover::after {
  transform: rotate(45deg) translateX(calc(4 * var(--px)));
}

/* ============================================
   Card Media (Video Side)
   ============================================ */
.creator-card__media {
  max-width: calc(660 * var(--px));
  width: 100%;
  flex-shrink: 0;
}

.creator-card__thumbnail {
  display: block;
  position: relative;
  width: 100%;
  cursor: pointer;
}

.creator-card__thumbnail img {
  width: 100%;
  aspect-ratio: 528 / 297;
  object-fit: cover;
}

.creator-card__thumbnail-note {
  font-size: calc(11 * var(--px));
  color: #999999;
  margin-top: calc(8 * var(--px));
  line-height: 1.6;
}

/* ============================================
   SP Styles (max-width: 767px)
   ============================================ */
@media screen and (max-width: 767px) {

  :root,
  .creator {
    --px: calc(100vw / 640);
    margin-top: calc( 42 * var(--px));
  }

  .sp-only {
    display: block;
  }

  .pc-only {
    display: none;
  }

  .creator__inner {
  max-width: calc(610 * var(--px));
  width: 100%;
  padding-inline: calc(25 * var(--px));
  margin-inline: auto;
}


  .creator-hero__inner {
  max-width: calc(610 * var(--px));
  width: 100%;
  margin-inline: auto;
  padding-inline: calc(25 * var(--px));
}

  .creator-hero {
    padding-top: calc(140 * var(--px));
    padding-bottom: calc(60 * var(--px));
  }

  .creator-hero__title {
    font-size: calc(42 * var(--px));
    font-weight: 400;
    line-height: calc( 52 / 42);
  }

  .creator-hero__desc {
    font-size: calc(26 * var(--px));
    line-height: calc(48 / 26);
    margin-top: calc(67 * var(--px));
    text-align: left;
    max-width: 100%;
  }

  .creator-card {
    padding-top: calc(100 * var(--px));
    padding-bottom: calc(60 * var(--px));
  }

  .creator-card__body {
    flex-direction: column;
    gap: 0;
    padding-left: 0;
  }

  .creator-card__body--reverse {
    padding-right: 0;
  }

  .creator-card--reverse {
    margin-left: 0;
  }

  .creator-card--reverse .creator-card__body {
    flex-direction: column;
  }

  .creator-card__content {
    display: contents;
  }

  .creator-card__label {
    order: 1;
    font-size: calc(24 * var(--px));
    line-height: 1;
    font-weight: 400;
    text-align: center;
    letter-spacing: 0.01em;
    margin-inline: auto;
  }

  .creator-card__role {
    order: 2;
    font-size: calc(24 * var(--px));
    margin-top: calc(30 * var(--px));
    line-height: 1;
    font-weight: 400;
    text-align: center;
    margin-inline: auto;
  }

  .creator-card__name {
    order: 3;
    font-size: calc(38 * var(--px));
    margin-top: calc(10 * var(--px));
    text-align: center;
    line-height: calc(52.5 / 38);
    border-bottom: none;
    padding-bottom: 0;
    font-weight: 400;
    margin-inline: auto;
    margin-bottom: 0;
  }

  .creator-card__name span {
    font-size: calc(26 * var(--px));
    line-height: calc(52.5 / 26);
    margin-left: calc(10 * var(--px));
    font-weight: 500;
  }

  .creator-card__desc {
    order: 5;
    font-size: calc(24 * var(--px));
    line-height: 1.8;
    margin-top: calc(24 * var(--px));
  }

  .creator-card__btn-wrapper {
    order: 6;
  }

  .creator-card__media {
    order: 4;
    max-width: calc(600 * var(--px));
    width: 100%;
    margin-top: calc(40 * var(--px));
  }

  .creator-card__thumbnail {
    width: 100%;
  }

  .creator-card__thumbnail img {
    width: 100%;
    aspect-ratio: 528 / 297;
    object-fit: cover;
  }

  .creator-card__thumbnail-note {
    font-size: calc(20 * var(--px));
    margin-top: calc(10 * var(--px));
  }

  .creator-card__btn {
    width: calc(325 * var(--px));
    height: calc(73 * var(--px));
    font-size: calc(24 * var(--px));
    margin-top: calc(30 * var(--px));
    border-radius: calc(36.5 * var(--px));
  }

  .creator-card__btn::after {
    width: calc(10 * var(--px));
    height: calc(10 * var(--px));
    margin-left: calc(12 * var(--px));
  }
}


.sp-only{
  display: none;
  @media screen and (max-width: 767px) {
    display: block;
  }
}