@charset "UTF-8";

/*----------------------------------------------------
  JENNI Muse 紹介LP (260825_JENNImuse)

  - SP特化型デザイン。SP アートボード 375 のレイアウトを PC でも使い、
    PC は 450px (= 375 x 1.2) をセンター配置して左右に追従要素を置く。
  - 単位は `--u` に集約する:
      SP  : --u = calc(100vw / 375)  → 規約の calc(● * (100vw / ▲))
      PC  : --u = 0.12rem            → 1rem = 10px 前提の rem (= SP x 1.2)
    全てのデザイン値は calc(N * var(--u)) で書く。
  - PC 専用の左右追従要素は Figma で PC px (1x) 指定なので、その中だけ --u = 0.1rem に
    差し替えて同じ calc() 式を使い回す。
  - フォント: 本文は M PLUS 1p (Google Fonts / ユーザー指示によりヒラギノ丸ゴから置換)、
    名前は Oshigo (推しゴ / セルフホスト fonts/oshigo.otf)。
----------------------------------------------------*/

@media only screen and (min-width: 768px) {
  .breadcrumb__list {
    padding-bottom: 1.6rem;
  }
}

/* ▽ セルフホストフォント (推しゴ) ▽ */
@font-face {
  font-family: "Oshigo";
  src: url("../fonts/oshigo.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


@media screen and (min-width: 768px){
  .sp-only{
    display: none !important;
  }
}
@media screen and (max-width: 767px){
  .pc-only{
    display:none !important;
  }
}

/*----------------------------------------------------
  共通変数・必須スタイル
----------------------------------------------------*/
.p-feature {
  --u: calc(100vw / 375);

  --c-text: #e4007f;
  --c-g: #473e41;
  --c-blue: #5f6096;
  --c-brown: #611515;
  --c-cta: #ee558e;
  --c-pink02: #f1b6ca;
  --c-sns-bg: #ffdfe9;

  --ff-base: "M PLUS 1p", sans-serif;
  --ff-name: "Oshigo", "M PLUS 1p", sans-serif;

  font-family: var(--ff-base);
  font-weight: 500;
}

.p-feature :where(img, svg) {
  width: 100%;
  height: auto;
}

/* ▽ スクロール連動フェード (JS が落ちた場合に消えないよう .js 配下に限定) ▽ */
.js .p-feature .fade-up {
  opacity: 0;
  transform: translateY(calc(20 * var(--u)));
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.js .p-feature .fade-up.is-active {
  opacity: 1;
  transform: none;
}

/*----------------------------------------------------
  全体レイアウト
----------------------------------------------------*/
.project-muse__stage {
  background-image: url("../img/background.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
}
@media screen and (min-width: 768px){
.project-muse__stage {
  background-image: url("../img/background_pc2.jpg");
}
}


/*----------------------------------------------------
  ファーストビュー
----------------------------------------------------*/
.project-muse__fv {
  width: calc(334.468 * var(--u));
  margin-inline: auto;
}
@media screen and (min-width: 768px){
  .project-muse__fv {
  margin-bottom: calc(30 * var(--u));
}}

.project-muse__title {
  width: 100%;
}

.project-muse__lead {
  width: calc(265 * var(--u));
  margin: calc(30 * var(--u)) auto 0;
  color: var(--c-blue);
  font-size: calc(16 * var(--u));
  line-height: 1.4;
  letter-spacing: 0.03em;
  text-align: center;
  font-weight: 400;
}

.project-muse__lead p + p {
  margin-top: calc(10 * var(--u));
}

/*----------------------------------------------------
  Muse メンバーナビ (FV の名前タグ / PC 1280px 以上は右に追従)
----------------------------------------------------*/
.project-muse__nav {
  margin-top: calc(30 * var(--u));
}

.project-muse__nav-list {
  position: relative;
  width: calc(334.468 * var(--u));
  height: calc(506 * var(--u));
  margin-inline: auto;
}

.project-muse__nav-item {
  position: absolute;
  width: calc(112.468 * var(--u));
}

/* タグ画像は透明部分を含む矩形なので、隣のタグの透明な角が上に重なると
   見えているタグをクリックできなくなる (例: --04 の左上が --02 の「ふ」を覆う)。
   上にあるタグ (top が小さいもの) を必ず前面にして当たり判定を優先させる。 */
.project-muse__nav-item--01 { left: calc(20 * var(--u));  top: 0;                    z-index: 7; }
.project-muse__nav-item--02 { left: calc(202 * var(--u)); top: calc(14 * var(--u));  z-index: 6; }
.project-muse__nav-item--04 { left: calc(106 * var(--u)); top: calc(137 * var(--u)); z-index: 5; }
.project-muse__nav-item--05 { left: 0;                    top: calc(220 * var(--u)); z-index: 4; }
.project-muse__nav-item--03 { left: calc(222 * var(--u)); top: calc(234 * var(--u)); z-index: 3; }
.project-muse__nav-item--06 { left: calc(40 * var(--u));  top: calc(375 * var(--u)); z-index: 2; }
.project-muse__nav-item--07 { left: calc(183 * var(--u)); top: calc(376 * var(--u)); z-index: 1; }

.project-muse__nav-item a {
  display: block;
}

/*----------------------------------------------------
  メンバー紹介
----------------------------------------------------*/
.project-muse__member {
  width: calc(358 * var(--u));
  margin-inline: auto;
}

.project-muse__nav + .project-muse__member {
  margin-top: calc(60 * var(--u));
}

.project-muse__member + .project-muse__member {
  margin-top: calc(45 * var(--u));
}

/* ▽ 写真スタック (Swiper effect: cards) + 矢印 + ドット + Instagram ▽ */
.project-muse__media {
  position: relative;
  box-sizing: border-box;
  height: calc(358 * var(--u));
  /* 回転したカードの分 (上下 15px) だけ下げてスタック全体を 330px の枠に収める。
     margin ではなく padding にして、子の margin が相殺で外に抜けるのを防ぐ */
  padding-top: calc(17 * var(--u));
}

.project-muse__slider {
  position: static;
}

.project-muse__swiper {
  width: calc(200 * var(--u));
  height: calc(300 * var(--u));
  margin-inline: auto;
}

.project-muse__swiper .swiper-slide {
  background-color: #fff;
  border-radius: calc(10 * var(--u));
  overflow: hidden;
  box-shadow: 0 calc(2 * var(--u)) calc(1 * var(--u)) rgba(0, 0, 0, 0.15);
}

.project-muse__arrow {
  position: absolute;
  top: calc(175 * var(--u));
  z-index: 2;
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  padding: 0;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: calc(22 * var(--u)) calc(42 * var(--u));
  transform: translateY(-50%);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.project-muse__arrow--prev {
  left: 0;
  background-image: url("../img/slider_arrow_prev.svg");
}

.project-muse__arrow--next {
  right: 0;
  background-image: url("../img/slider_arrow_next.svg");
}

/* Swiper 側の .swiper-pagination-bullets.swiper-pagination-horizontal (詳細度 0,2,0) に
   負けないよう、詳細度を合わせて後から上書きする */
.project-muse__slider .project-muse__dots {
  --swiper-pagination-bullet-size: calc(12 * var(--u));
  --swiper-pagination-bullet-width: calc(12 * var(--u));
  --swiper-pagination-bullet-height: calc(12 * var(--u));
  --swiper-pagination-bullet-horizontal-gap: 0px;
  --swiper-pagination-bullet-inactive-color: transparent;
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-color: var(--c-text);
  position: absolute;
  top: calc(343 * var(--u));
  bottom: auto;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: calc(8 * var(--u));
  width: auto;
}

.project-muse__dots .swiper-pagination-bullet {
  box-sizing: border-box;
  border: 1px solid var(--c-text);
}

.project-muse__insta {
  position: absolute;
  top: calc(306 * var(--u));
  right: calc(11 * var(--u));
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(6 * var(--u));
  width: calc(97 * var(--u));
  text-decoration: none;
}

.project-muse__insta-icon {
  display: block;
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  border-radius: 50%;
  background-color: #fff;
  background-image: url("../img/icon_insta.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: calc(25 * var(--u)) auto;
}

.project-muse__insta-id {
  color: var(--c-g);
  font-size: calc(10 * var(--u));
  line-height: 1.4;
  letter-spacing: 0;
  text-align: center;
  /* 枠 (97px) に収まらない長い ID は折り返す。折り返し位置は HTML 側の <wbr> で
     デザイン (Figma) と同じ位置に固定する */
  overflow-wrap: break-word;
}

/* ▽ プロフィール (星バッジ + 名前 + コメントカード) ▽ */
.project-muse__profile {
  position: relative;
  width: calc(334 * var(--u));
  /* デザインではメディア枠の下端 (358) より 8px 上から始まる */
  margin: calc(-8 * var(--u)) auto 0;
  /* 星バッジ+名前ブロック (72.33) にコメントカードを 24px 重ねた分の余白。
     コメント側の margin-top にすると相殺で外に抜けるため padding で確保する */
  padding-top: calc(48.33 * var(--u));
}

.project-muse__hitokoto {
  position: absolute;
  top: calc(8 * var(--u));
  left: calc(4 * var(--u));
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(60 * var(--u));
  height: calc(62 * var(--u));
  background-image: url("../img/icon_star.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: rotate(-1deg);
}

.project-muse__hitokoto span {
  display: block;
  color: var(--c-g);
  font-size: calc(11 * var(--u));
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-align: center;
  left: calc(2 * var(--u));
  top: calc(2 * var(--u));
    transform: rotate(-14deg);
}

.project-muse__name {
  position: absolute;
  top: calc(25.16 * var(--u));
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(42 * var(--u));
  color: var(--c-text);
  line-height: 1.4;
  white-space: nowrap;
}

.project-muse__name-main {
  font-family: var(--ff-name);
  font-weight: 400;
  font-size: calc(26 * var(--u));
  letter-spacing: 0.03em;
}

.project-muse__name-grade {
  font-size: calc(16 * var(--u));
  letter-spacing: 0.03em;
}

.project-muse__comment {
  position: relative;
  z-index: 0;
  /* 左右はデザイン値 31 だと「もも」の1行目 (272.5px) が枠 272px を 0.5px 超えて
     「を」1文字だけの行ができるため 30 にする (Figma の描画は 5 行) */
  padding: calc(20 * var(--u)) calc(30 * var(--u));
  border-radius: calc(10 * var(--u));
  background-color: #fff;
  box-shadow: calc(3 * var(--u)) calc(3 * var(--u)) 0 var(--c-pink02);
}

/* 白地に薄く格子パターンを重ねる。支給素材 (background_pattern.png) は線が
   #e4007f と濃いので、::before に載せて不透明度を落とす
   (デザイン実測: 10px 角のマス・線色 #fcedf6 相当)。
   background-size 620px = 素材の 15.2px ピッチを 10px に縮小した幅。 */
.project-muse__comment::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: url("../img/background_pattern.png");
  background-repeat: repeat;
  background-position: center top;
  background-size: calc(620 * var(--u)) auto;
  opacity: 0.07;
}

.project-muse__comment p {
  color: var(--c-g);
  font-size: calc(14 * var(--u));
  line-height: 1.4;
  letter-spacing: 0.03em;
  text-align: center;
  /* 改行位置は <br> で Figma と同じ文節位置に固定してある。
     万一フォント差で折り返しが起きた場合の保険として、文節単位で折り返す
     (auto-phrase 未対応ブラウザでは通常の折り返しにフォールバック)。 */
  word-break: auto-phrase;
  line-break: strict;
}

/*----------------------------------------------------
  集合カット・クロージング
----------------------------------------------------*/
.project-muse__closing {
  width: calc(335 * var(--u));
  margin: calc(60 * var(--u)) auto 0;
}

.project-muse__closing-photos {
  position: relative;
  height: calc(595 * var(--u));
}

.project-muse__closing-photo {
  position: absolute;
}

.project-muse__closing-photo--01 { left: 0;                    top: 0;                     width: calc(180 * var(--u)); }
.project-muse__closing-photo--02 { left: calc(195 * var(--u)); top: calc(100 * var(--u));  width: calc(140 * var(--u)); }
.project-muse__closing-photo--03 { left: calc(1 * var(--u));   top: calc(310 * var(--u));  width: calc(150 * var(--u)); }
.project-muse__closing-photo--04 { left: calc(165 * var(--u)); top: calc(340 * var(--u));  width: calc(170 * var(--u)); }

.project-muse__closing-text {
  margin-top: calc(40 * var(--u));
  color: var(--c-g);
  font-size: calc(16 * var(--u));
  line-height: 1.4;
  letter-spacing: 0.03em;
  text-align: center;
  /* デザイン (Figma) の改行位置をそのまま保つ */
  white-space: nowrap;
}

/* デザインの空行 1 行分 (16px x 1.4) を段落間に取る */
.project-muse__closing-text + .project-muse__closing-text {
  margin-top: calc(22.4 * var(--u));
}

/*----------------------------------------------------
  Follow Us
----------------------------------------------------*/
.project-muse__follow {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* クロージングとの間はグラデ背景を 55px 見せる */
  margin-top: calc(55 * var(--u));
  padding: calc(40 * var(--u)) 0 calc(100 * var(--u));
  background-color: #fff;
}

.project-muse__follow-head {
  /* デザインのテキストボックスは 225px だが、リード文の実測が 225.6px でわずかに
     はみ出すため内容幅にする (中央寄せなので見た目は同じ) */
  color: var(--c-brown);
  text-align: center;
}

.project-muse__follow-title {
  font-weight: 700;
  font-size: calc(24 * var(--u));
  line-height: 1;
  letter-spacing: 0.03em;
}

.project-muse__follow-lead {
  margin-top: calc(10 * var(--u));
  font-size: calc(12 * var(--u));
  line-height: 1.5;
  letter-spacing: 0.1em;
  /* デザインのテキストボックス幅 (225) に対して余裕が 1px 未満のため改行位置を固定する */
  white-space: nowrap;
}

.project-muse__sns-list {
  display: flex;
  justify-content: center;
  gap: calc(20 * var(--u));
  padding: calc(30 * var(--u)) 0;
}

.project-muse__sns {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(145 * var(--u));
  padding: calc(20 * var(--u)) 0;
  border-radius: calc(4 * var(--u));
  background-color: var(--c-sns-bg);
  text-decoration: none;
}

.project-muse__sns-icon {
  display: block;
  width: calc(60 * var(--u));
  height: calc(60 * var(--u));
  border-radius: 50%;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: calc(37 * var(--u)) auto;
}

.project-muse__sns-icon--insta {
  background-image: url("../img/icon_insta.svg");
}

.project-muse__sns-icon--line {
  background-image: url("../img/icon_line.svg");
}

.project-muse__sns-label {
  margin-top: calc(10 * var(--u));
  color: var(--c-cta);
  font-size: calc(10 * var(--u));
  line-height: 1.5;
  letter-spacing: 0.03em;
}

.project-muse__sns-name {
  margin-top: calc(1 * var(--u));
  color: var(--c-brown);
  font-weight: 700;
  font-size: calc(12 * var(--u));
  line-height: 1.5;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.project-muse__cta-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(310 * var(--u));
  height: calc(48 * var(--u));
  border: 1px solid var(--c-cta);
  border-radius: calc(4 * var(--u));
  background-color: #fff;
  color: var(--c-cta);
  font-size: calc(12 * var(--u));
  line-height: 1.5;
  letter-spacing: 0.03em;
  text-decoration: none;
}

/*----------------------------------------------------
  PC (768px 以上) : SP レイアウトを 450px でセンター配置
----------------------------------------------------*/
@media only screen and (min-width: 768px) {
  .p-feature {
    /* 1rem = 10px。SP デザイン値 x 1.2 */
    --u: 0.12rem;
  }

  .project-muse {
    background-image: url("../img/background_pc.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    /* 左右の余白に出るグラデーションはビューポートに固定する (SP特化型) */
    background-attachment: fixed;
    display: grid;
    grid-template-columns: 1fr calc(375 * var(--u)) 1fr;
  }

  /* SP レイアウトを 450px (= 375 x 1.2) でセンター配置 */
  .project-muse__stage {
    width: calc(375 * var(--u));
    grid-area: 1 / 2;
  }
}

/*----------------------------------------------------
  PC (1280px 以上・かつ高さ 560px 以上) : 左右に追従要素を出す
  ※ 幅の下限: センターカラム 450px + ロゴ(347+64) / ナビ(75+334.468) が収まる約 1272px。
     これ未満では出さず、名前タグは SP と同じく FV の続き (flow) に置く。
  ※ 高さの条件: ナビは 180 + 506 = 686px を要求する。fixed なので画面が低いと
     「めい」「かえ」がスクロールしても永久に出てこなくなるため、
     560px 未満では追従させず flow に戻し、560px 以上では top を clamp で持ち上げる。
  ※ 追従は position: fixed。sticky だと静止位置が FV より下になり、
     読み込み直後にデザインの位置 (ビューポート上端から 340 / 180) に出ないため。

----------------------------------------------------*/

@media screen and (min-width: 768px){
   .project-muse__logo {
    grid-area: 1 / 1;
    margin-top: 0;
    display: grid;
    place-items: center;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
  }
    .project-muse__logo-inner {
    width: calc(347 * var(--u));
  }
  .project-muse__nav {
    --u: 0.1rem;
    margin-top: 0;
    grid-area: 1 / 3;
    display: grid;
    place-items: center;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
  }

  /* ナビが flow から抜けるため、FV とメンバー 1 人目の間隔を PC デザイン値
     (43px = SP 36 x 1.2) に合わせる。--u は .p-feature の 0.12rem を継承する */
  .project-muse__nav + .project-muse__member {
    margin-top: calc(36 * var(--u));
  }

}
@media screen and (min-width: 768px) and (max-width: 1300px) {
    .project-muse__logo-inner {
    width: calc(270 * var(--u));
  }
}
/* @media only screen and (min-width: 1280px) and (min-height: 560px) {
  .project-muse__logo {
    grid-area: 1 / 1;
    margin-top: 0;
    display: grid;
    place-items: center;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
  }
  .project-muse__logo-inner {
    width: calc(347 * var(--u));
  }

  .project-muse__nav {
    --u: 0.1rem;
    margin-top: 0;
    grid-area: 1 / 3;
    display: grid;
    place-items: center;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
  }

  .project-muse__nav + .project-muse__member {
    margin-top: calc(36 * var(--u));
  }
} */

.project-muse__profile span{
  position: relative;
}
.project-muse__profile span::before {
  content: attr(data-text);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  -webkit-text-stroke: calc(6 * var(--u)) #fff;
}