/* ==========================================================================
   MAUM 美容メディア事業サイト テーマ上書き
   - ベースは fal-co.jp と同一の css/style.css。このファイルを後ろに読み込んで
     色・質感・追加コンポーネントだけを差し替える(レイアウトは触らない)。
   - ドミナントカラー: ローズピンク #D9648A
   - 差し色(装飾のブロブ・ドットのみ): #F6D8C6 シャンパンピーチ / #D9B8E8 ラベンダー
   - 質感: 白の半透明ガラス + 淡いピンクの光。「透明感」を出すため
     カード類は背景を透けさせ、影は濃くせず広く薄く落とす。
   - 見出し: Shippori Mincho(明朝)、本文: Noto Sans JP
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. カラートークンの差し替え
   ベース側の変数名(--c-mint 系)はそのまま使い、値だけをピンクに置き換える。
   これでベースCSSの全記述が追従する。
   -------------------------------------------------------------------------- */
:root {
  --c-mint: #D9648A;        /* ローズピンク: ボタン地・アイコン・見出し装飾 */
  --c-mint-deep: #B84A6D;   /* 濃ローズ: リンク・hover・本文中のアクセント */
  --c-mint-tint: #FDF1F5;   /* ブランド淡色地(カード・帯) */
  --c-mint-pale: #F7D9E4;   /* 装飾用・淡ピンク(ドット・ブロブ) */
  --c-yellow: #F6D8C6;      /* 装飾用・シャンパンピーチ */
  --c-coral: #D9B8E8;       /* 装飾用・ラベンダー */
  --c-text: #3A3236;        /* わずかに赤みを含む墨 */
  --c-text-sub: #8A757D;
  --c-line: #F0E2E7;
  --c-bg-soft: #FEF7FA;
  --shadow-soft: 0 14px 40px rgba(190, 120, 145, 0.13);

  /* 追加: ガラス質感 */
  --glass-bg: rgba(255, 255, 255, 0.68);
  --glass-border: rgba(255, 255, 255, 0.9);
  --glass-blur: blur(16px) saturate(1.12);
}

/* --------------------------------------------------------------------------
   2. 全体の地: 淡いピンクの光を敷いて「透き通った」印象をつくる
   -------------------------------------------------------------------------- */
body {
  background: #FFFFFF;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60vw 50vh at 12% 0%, rgba(247, 217, 228, 0.55) 0, transparent 62%),
    radial-gradient(52vw 44vh at 92% 14%, rgba(217, 184, 232, 0.32) 0, transparent 60%),
    radial-gradient(58vw 48vh at 78% 92%, rgba(246, 216, 198, 0.34) 0, transparent 62%),
    linear-gradient(180deg, #FFFCFD 0%, #FFFFFF 45%, #FFF9FB 100%);
}

/* --------------------------------------------------------------------------
   3. ベースCSSにハードコードされていた色の差し替え
   (変数化されていない box-shadow / ウォーターマーク)
   -------------------------------------------------------------------------- */
.btn-solid {
  box-shadow: 0 8px 22px rgba(217, 100, 138, 0.26);
}

.site-header.is-scrolled {
  box-shadow: 0 2px 20px rgba(190, 120, 145, 0.12);
}

.nav-cta .btn-solid {
  box-shadow: 0 6px 16px rgba(217, 100, 138, 0.26);
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  box-shadow: 0 0 0 4px rgba(217, 100, 138, 0.14);
}

.article-photo {
  box-shadow: 0 12px 32px rgba(190, 120, 145, 0.14);
}

/* 背景の大きな英字ウォーターマーク: FALCO → MAUM、色も淡ピンクへ */
.hero-watermark {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 200'%3E%3Ctext x='0' y='166' font-family='Verdana, Arial, sans-serif' font-weight='bold' font-size='168' letter-spacing='14' fill='%23F7D9E4' opacity='0.55'%3EMAUM%3C/text%3E%3C/svg%3E");
}

.mid-watermark {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 940 200'%3E%3Ctext x='0' y='166' font-family='Verdana, Arial, sans-serif' font-weight='bold' font-size='168' letter-spacing='14' fill='%23F7D9E4' opacity='0.5'%3EMAUM%3C/text%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   4. 書体: 大きな見出しだけ明朝にして、やわらかさと余白感を出す
   -------------------------------------------------------------------------- */
:root {
  --font-display: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
}

.hero-title,
.section-title,
.page-title,
.stat-value,
.inf-name {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* 2行とも white-space: nowrap のため、最長行が入りきる vw 係数を上限にしている。
   見出しの文字数を変えたら、狭い幅(320px前後)で溢れないか必ず確認すること。 */
.hero-title {
  font-size: clamp(1.1rem, 6.2vw, 2.85rem);
  line-height: 1.62;
}

.section-title {
  font-size: clamp(1.45rem, 2.9vw, 2rem);
  line-height: 1.55;
}

/* 見出し左の雫を、より小さく淡く */
.section-title::before {
  width: 0.44em;
  height: 0.44em;
  background: linear-gradient(135deg, var(--c-mint) 0%, #E9A0B8 100%);
}

.section-eyebrow {
  letter-spacing: 0.28em;
  font-weight: 700;
}

/* ベースは <p> の中のリンクに下線を引くが、ボタンには不要 */
main p a.btn {
  text-decoration: none;
}

/* ベースはヒーロー下端にお知らせボックスが重なる前提の余白。
   このサイトにはお知らせがないぶん詰める。 */
.hero-copy {
  padding-bottom: clamp(16px, 2.5vw, 40px);
}

/* --------------------------------------------------------------------------
   5. ガラス質感: カード類の背景を透けさせる
   -------------------------------------------------------------------------- */
.site-header {
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.card,
.fact-tile,
.stat-tile,
.inf-card,
.flow-step,
.work-item,
.menu-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-soft);
}

.card:hover,
.fact-tile:hover,
.stat-tile:hover,
.inf-card:hover,
.menu-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 48px rgba(190, 120, 145, 0.18);
}

.about-band {
  background: linear-gradient(120deg, rgba(253, 241, 245, 0.9) 0%, rgba(249, 240, 250, 0.75) 100%);
}

.cta-band {
  background: linear-gradient(140deg, rgba(253, 241, 245, 0.95) 0%, rgba(247, 233, 245, 0.9) 55%, rgba(255, 246, 240, 0.95) 100%);
}

/* お問い合わせフォーム(cta-band は中央揃えなので、フォームだけ左揃えに戻す) */
.cta-band .contact-form,
.cta-band .form-notes {
  text-align: left;
  margin-inline: auto;
}

.cta-band .contact-form {
  margin-top: 36px;
}

.cta-band .form-notes {
  max-width: 680px;
}

/* ベースCSSは text / email しか対象にしていないので、tel を同じ見た目に揃える */
.form-field input[type="tel"] {
  width: 100%;
  font: inherit;
  color: var(--c-text);
  border: 2px solid var(--c-line);
  border-radius: 14px;
  padding: 12px 16px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #C6B0B8;
}

.form-submit {
  text-align: center;
}

.section--soft {
  background: rgba(254, 247, 250, 0.72);
}

/* 装飾ブロブをより大きくぼかして「透き通った」空気にする */
.blob {
  filter: blur(2px);
}

.hero-visual .blob-back {
  opacity: 0.55;
  filter: blur(6px);
}

/* --------------------------------------------------------------------------
   5-2. ヒーローのスマホモックアップ(2枚・立体)
   奥行き(perspective)をつけて斜めに重ね、画面に投稿動画をループ再生する。
   端末サイズは --phone-w だけで決まるので、大きさを変えたいときはここを触る。
   -------------------------------------------------------------------------- */
.phones {
  --phone-w: clamp(112px, 15vw, 200px);
  position: relative;
  z-index: 1;
  /* 幅を指定しないと、絶対配置の子だけになった箱が潰れて中央がずれる */
  width: 100%;
  perspective: 1500px;
  height: calc(var(--phone-w) * 2.75);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 配置と浮遊は .phone-slot、傾き(3D)は .phone が担当する。
   ひとつの要素に両方を書くと、アニメーションの transform が
   傾きの transform を上書きしてしまうため分けている。 */
.phone-slot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-style: preserve-3d;
  /* 配置は transform ではなく translate プロパティで行う。
     transform は浮遊アニメーションが使うため、ここでは触らない。 */
  translate: -50% -50%;
}

.phone {
  width: var(--phone-w);
  aspect-ratio: 9 / 19.5;
  border-radius: calc(var(--phone-w) * 0.16);
  padding: calc(var(--phone-w) * 0.028);
  transform-style: preserve-3d;
  /* 金属フレームの映り込み */
  background: linear-gradient(
    142deg,
    #6E6E74 0%,
    #2C2C30 18%,
    #4A4A50 38%,
    #232327 62%,
    #5A5A61 82%,
    #26262A 100%
  );
  box-shadow:
    0 34px 70px rgba(120, 70, 90, 0.34),
    0 8px 20px rgba(120, 70, 90, 0.18);
}

/* 側面のボタン(右側 電源 / 左側 音量) */
.phone::after {
  content: "";
  position: absolute;
  top: 24%;
  right: calc(var(--phone-w) * -0.014);
  width: calc(var(--phone-w) * 0.016);
  height: 11%;
  border-radius: 2px;
  background: linear-gradient(180deg, #5A5A61, #2C2C30);
}

/* 手前の端末を左上に、奥の端末を右下にずらして扇状に重ねる。
   --gap-x / --gap-y で扇の開き具合を調整する。 */
.phones {
  --gap-x: calc(var(--phone-w) * 0.36);
  --gap-y: calc(var(--phone-w) * 0.2);
}

.phone-slot--front {
  translate: calc(-50% - var(--gap-x)) calc(-50% - var(--gap-y));
  z-index: 2;
  animation: hero-float 5.6s ease-in-out infinite;
}

.phone-slot--front .phone {
  transform: translateZ(70px) rotateY(15deg) rotateX(4deg) rotateZ(-8deg);
}

.phone-slot--back {
  margin: calc(var(--phone-w) * 0.3) 0 0 calc(var(--phone-w) * 0.68);
  z-index: 1;
  animation: hero-float 6.8s ease-in-out infinite reverse;
}

.phone-slot--back .phone {
  transform: rotateY(15deg) rotateX(4deg) rotateZ(-8deg);
}

.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--phone-w) * 0.135);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 26% 18%, rgba(246, 216, 198, 0.5) 0, transparent 42%),
    radial-gradient(circle at 78% 82%, rgba(217, 184, 232, 0.4) 0, transparent 46%),
    linear-gradient(150deg, #FEF6F9 0%, var(--c-mint-pale) 60%, #FDF1F5 100%);
}

/* ダイナミックアイランド */
.phone-screen::before {
  content: "";
  position: absolute;
  top: calc(var(--phone-w) * 0.05);
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--phone-w) * 0.3);
  height: calc(var(--phone-w) * 0.085);
  border-radius: 999px;
  background: #17171A;
  z-index: 2;
}

.phone-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.phone-note {
  position: relative;
  z-index: 1;
  max-width: 84%;
  white-space: normal;
  text-align: center;
  line-height: 1.7;
  font-size: 0.62rem;
}

/* --------------------------------------------------------------------------
   6. 追加コンポーネント(1): 数字で見るMAUM
   -------------------------------------------------------------------------- */
.stats-section {
  position: relative;
  overflow: hidden;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
  margin-top: 8px;
}

.stat-tile {
  border-radius: var(--radius-card);
  padding: clamp(26px, 3.4vw, 40px) 20px clamp(24px, 3vw, 34px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.stat-label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  color: var(--c-text-sub);
  line-height: 1.6;
}

.stat-value {
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  line-height: 1.1;
  color: var(--c-mint-deep);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.08em;
}

.stat-unit {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.36em;
  letter-spacing: 0.06em;
  color: var(--c-text);
}

.stat-note {
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--c-text-sub);
}

/* --------------------------------------------------------------------------
   7. 追加コンポーネント(2): 所属インフルエンサー
   -------------------------------------------------------------------------- */
.influencers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 26px);
}

.inf-card {
  border-radius: var(--radius-card);
  padding: 22px 18px 26px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.inf-card .ph-photo {
  width: min(160px, 72%);
  margin-bottom: 14px;
  box-shadow: 0 10px 26px rgba(190, 120, 145, 0.16);
}

.inf-name {
  font-size: 1.24rem;
  line-height: 1.4;
  color: var(--c-text);
}

.inf-handle {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--c-mint-deep);
  word-break: break-all;
}

/* Instagramのアカウント表示名(そのまま表記) */
.inf-account {
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--c-text-sub);
  word-break: break-word;
}

.inf-genre {
  font-size: 0.84rem;
  line-height: 1.75;
  color: var(--c-text-sub);
}

.inf-followers {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--c-text);
  background: rgba(247, 217, 228, 0.6);
  border-radius: 999px;
  padding: 0.25em 1.1em;
  margin-top: 4px;
}

.inf-link {
  margin-top: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.82rem;
}

.inf-link a {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

/* --------------------------------------------------------------------------
   7-2. 追加コンポーネント: リーチの内訳(ドーナツ図)
   割合は各 figure の --pct(0〜100)で指定する。数字テキストと必ず揃えること。
   -------------------------------------------------------------------------- */
.reach {
  display: grid;
  grid-template-columns: 1fr 1.02fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin: 4px 0 clamp(36px, 5vw, 60px);
}

.reach-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  line-height: 1.6;
  letter-spacing: 0.05em;
  margin-bottom: 0.7em;
}

.reach-text {
  font-size: 0.95rem;
  line-height: 1.95;
}

.reach-source {
  margin-top: 1em;
  font-size: 0.76rem;
  line-height: 1.7;
  color: var(--c-text-sub);
}

.reach-charts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.8vw, 22px);
}

.donut {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.donut-ring {
  --size: clamp(92px, 10.5vw, 128px);
  position: relative;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(
    var(--c-mint) calc(var(--pct, 0) * 1%),
    rgba(247, 217, 228, 0.55) 0
  );
  box-shadow: 0 10px 26px rgba(190, 120, 145, 0.16);
}

/* 割合を持たない図(年齢層)は淡いリングのまま */
.donut-ring--plain {
  background: conic-gradient(rgba(217, 184, 232, 0.55) 100%, transparent 0);
}

.donut-ring::before {
  content: "";
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.donut-num {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.45rem, 2.5vw, 1.85rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--c-mint-deep);
  display: flex;
  align-items: baseline;
  gap: 0.05em;
}

.donut-num--sm {
  font-size: clamp(1rem, 1.8vw, 1.28rem);
}

.donut-unit {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.5em;
  color: var(--c-text);
}

.donut-cap {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--c-text-sub);
  text-align: center;
}

/* --------------------------------------------------------------------------
   7-3. 追加コンポーネント: メニュー
   -------------------------------------------------------------------------- */
.menus {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
}

.menu-card {
  position: relative;
  border-radius: var(--radius-card);
  padding: clamp(24px, 2.8vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.menu-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--c-mint);
  opacity: 0.55;
}

.menu-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.65;
}

.menu-text {
  font-size: 0.9rem;
  line-height: 1.9;
  color: var(--c-text-sub);
}

/* --------------------------------------------------------------------------
   8. 追加コンポーネント(3): 実績・ご依頼の流れ
   -------------------------------------------------------------------------- */
.works {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
}

.work-item {
  border-radius: var(--radius-card);
  padding: 24px 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.work-label {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  color: var(--c-mint);
}

.work-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.7;
}

.work-text {
  font-size: 0.9rem;
  line-height: 1.85;
  color: var(--c-text-sub);
}

/* 6ステップなので3列×2段。ステップ数を変えたらここも合わせること。 */
.flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 20px);
  counter-reset: flow;
}

.flow-note {
  margin-top: 20px;
  font-size: 0.86rem;
  line-height: 1.9;
  color: var(--c-text-sub);
}

.flow-step {
  border-radius: 18px;
  padding: 22px 16px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.flow-step::before {
  counter-increment: flow;
  content: "0" counter(flow);
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--c-mint) 0%, #E9A0B8 100%);
  border-radius: 999px;
  width: 2.6em;
  height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flow-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.94rem;
  line-height: 1.6;
}

.flow-text {
  font-size: 0.8rem;
  line-height: 1.8;
  color: var(--c-text-sub);
}

/* --------------------------------------------------------------------------
   9. レスポンシブ
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .influencers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .works {
    grid-template-columns: 1fr;
  }

  .reach {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  /* ベースは「リード文(左)＋写真(右)」の2カラムだが、端末2枚には右カラムが狭すぎる。
     スマホでは端末を全幅の1段に独立させる。 */
  .hero-grid {
    grid-template-areas:
      "title title"
      "lead  lead"
      "photo photo"
      "btns  btns";
  }

  .phones {
    --phone-w: clamp(112px, 35vw, 165px);
    --gap-x: calc(var(--phone-w) * 0.34);
  }

  .stats {
    grid-template-columns: 1fr;
  }

  .flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .menus {
    grid-template-columns: 1fr;
  }

  .stat-value {
    font-size: clamp(2.2rem, 12vw, 3rem);
  }

  .donut-ring {
    --size: clamp(84px, 26vw, 110px);
  }
}

@media (max-width: 420px) {
  .influencers {
    grid-template-columns: 1fr;
  }

  .flow {
    grid-template-columns: 1fr;
  }
}

/* 出現アニメーション対象に追加分を合わせる(ベースの .rv と同じ挙動) */
@media (prefers-reduced-motion: no-preference) {
  .stat-tile.rv,
  .inf-card.rv,
  .work-item.rv,
  .flow-step.rv,
  .menu-card.rv,
  .donut.rv,
  .reach-lead.rv {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

  .stat-tile.rv.is-in,
  .inf-card.rv.is-in,
  .work-item.rv.is-in,
  .flow-step.rv.is-in,
  .menu-card.rv.is-in,
  .donut.rv.is-in,
  .reach-lead.rv.is-in {
    opacity: 1;
    transform: none;
  }
}