@charset "utf-8";

/* =========================================================
   MY BELIEFS / MY VISION / PROFILE / SHARE
   旧 10TH CONTENTS・SUSTAINABILITY・街イラスト・写真セクションを
   置き換えた、個人サイト用のセクション群。
   ========================================================= */

/* 横スクロールの保険。
   装飾テキストや背景円は各所で意図的にはみ出しており、
   スクロール演出の途中で横方向のスクロールが発生することがある。
   overflow-x: clip なら（hidden と違い）スクロールコンテナを作らないので、
   内部の position: sticky や lenis のスクロールを壊さずに刈り取れる */
.l-glink-container {
  overflow-x: clip;
}

/* ---------------------------------------------------------
   FV のキャッチコピー

   イラストの上、青いドーム（top: 20vh）より上の明るい面に置く。
   1 文字ずつ span に分けてあり、ローディング解除後に順に立ち上がる。
   --------------------------------------------------------- */
.c-mv-copy {
  position: relative;
  z-index: 2;
  margin-bottom: min(2%, 1.4vh);
  text-align: center;
}

.c-mv-copy-main {
  /* 文字がせり上がる分をここで刈り取る（マスク代わり）。
     上下に余白を足して同じ分だけ相殺し、行間は変えない */
  overflow: hidden;
  padding: 0.14em 0;
  margin: -0.14em 0;
  font-size: clamp(3.2rem, 5vw, 6.8rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.04em;
  color: var(--color-text-black);
}

/* JS が動かない環境でもそのまま読める初期値にしておき、
   演出の開始位置は GSAP 側の fromTo で与える */
.c-mv-copy-main span {
  display: inline-block;
  opacity: 1;
}

.c-mv-copy-main .is-accent {
  color: var(--color-blue);
}

.c-mv-copy-sub {
  margin-top: 1.3rem;
  font-size: 1.4rem;
  letter-spacing: 0.14em;
  color: var(--color-text-black);
  opacity: 0.72;
}

.c-mv-copy-sub i {
  margin: 0 0.2em;
  font-style: normal;
  opacity: 0.5;
}

@media screen and (max-width: 767px) {
  .c-mv-copy {
    margin-bottom: 2.2vh;
  }

  .c-mv-copy-main {
    font-size: clamp(2.8rem, 9vw, 4.4rem);
    letter-spacing: 0.02em;
  }

  .c-mv-copy-sub {
    margin-top: 1.2rem;
    font-size: 1.15rem;
    letter-spacing: 0.1em;
  }
}

/* ---------------------------------------------------------
   「このサイトをつくった理由」の人物写真

   背景を抜いた切り抜き画像なので、ピル型の枠いっぱいに
   cover で敷かず、下端を合わせて contain で置く。
   枠には淡い白のグラデーションを入れて、面として成立させる。
   --------------------------------------------------------- */
.section-message[data-sticky-name='01'] .p-greeting-wrap .c-image-inner {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.06) 100%);
}

.section-message[data-sticky-name='01'] .p-greeting-wrap .c-image-inner img {
  left: 50%;
  top: auto;
  bottom: 0;
  width: 86%;
  height: auto;
  max-height: 90%;
  transform: translateX(-50%);
  object-fit: contain;
  object-position: 50% 100%;
}

/* ---------------------------------------------------------
   セクション見出し

   既存 CSS の .c-section-title は .section-history / .section-10thcontents /
   .section-sustainability など「旧セクション名にスコープされた指定」しか
   持っておらず、置き換えた新セクションでは素の h2 のまま出ていた。
   ここで共通の実体を与える（旧スコープ指定のほうが詳細度が高いので、
   MY WORDS・SHARE など既存側の見た目は変わらない）。
   --------------------------------------------------------- */
.c-section-title {
  text-align: center;
  font-size: clamp(4.4rem, 9vw, 10rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
}

.c-section-title .title-ja {
  display: block;
  margin: 1.6rem auto 0;
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.06em;
}

/* SHARE の見出しは旧レイアウト用に position: sticky が入っているので戻す */
.p-share h2.c-section-title {
  position: static;
  margin-bottom: 0;
}

/* 明るい面に置く見出し（section-vision 用） */
.c-section-title.is-light,
.c-section-title.is-light span {
  color: var(--color-text-white);
}

/* ---------------------------------------------------------
   MY BELIEFS
   --------------------------------------------------------- */
.section-beliefs {
  padding: 12rem 0 13rem;
}

.p-beliefs {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--section-margin);
}

.p-beliefs-lead {
  margin: 5rem auto 6rem;
  font-size: 1.8rem;
  line-height: 2.2;
  text-align: center;
}

.p-beliefs-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.4rem;
  list-style: none;
}

.c-belief {
  position: relative;
  display: flex;
  gap: 2rem;
  padding: 3.4rem 3rem;
  border-radius: 20px 70px 70px 20px;
  background: #fff;
  box-shadow: 0 18px 40px -30px rgba(17, 53, 68, 0.55);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.c-belief:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 50px -30px rgba(17, 53, 68, 0.6);
}

.c-belief-no {
  flex-shrink: 0;
  width: 3.4rem;
  color: var(--color-blue);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}

.c-belief-no::after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 1.2rem;
  background: var(--color-blue);
  opacity: 0.35;
}

.c-belief-tag {
  display: inline-block;
  margin-bottom: 1.2rem;
  padding: 0.35em 1.1em;
  border: 1px solid var(--color-blue);
  border-radius: 999px;
  color: var(--color-blue);
  font-size: 1.2rem;
  letter-spacing: 0.06em;
}

.c-belief-title {
  margin-bottom: 1.4rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.65;
}

.c-belief-text {
  font-size: 1.45rem;
  line-height: 2.05;
}

@media screen and (max-width: 1024px) {
  .section-beliefs {
    padding: 8rem 0 9rem;
  }

  .p-beliefs-list {
    grid-template-columns: 1fr;
  }

  .p-beliefs-lead {
    margin: 3.5rem auto 4rem;
    font-size: 1.6rem;
    line-height: 2;
  }
}

@media screen and (max-width: 767px) {
  .p-beliefs {
    padding: 0 var(--section-spMargin);
  }

  .c-belief {
    flex-direction: column;
    gap: 1.6rem;
    padding: 2.6rem 2.2rem;
    border-radius: 16px 40px 40px 16px;
  }

  .c-belief-no {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    width: auto;
    font-size: 2.2rem;
  }

  .c-belief-no::after {
    width: 40px;
    margin-top: 0;
  }

  .c-belief-title {
    font-size: 1.8rem;
  }

  .c-belief-text {
    font-size: 1.4rem;
    line-height: 1.95;
  }
}

/* ---------------------------------------------------------
   MY VISION
   --------------------------------------------------------- */
.section-vision {
  padding: 0 var(--section-margin);
}

.p-vision {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 10rem clamp(2.4rem, 6vw, 8rem) 11rem;
  border-radius: 60px;
  background: linear-gradient(160deg, var(--color-lblue) 0%, var(--color-blue) 62%, #0079ac 100%);
  color: var(--color-text-white);
  overflow: hidden;
}

/* 右上に沈む大きな円 */
.p-vision::after {
  content: '';
  position: absolute;
  right: -12%;
  top: -28%;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  pointer-events: none;
}

.p-vision > * {
  position: relative;
  z-index: 1;
}

.c-vision-quote {
  margin: 5rem 0 6rem;
  padding-left: clamp(2rem, 4vw, 4rem);
  border-left: 3px solid var(--color-red);
}

.c-vision-quote p {
  font-size: clamp(2.2rem, 3vw, 3.4rem);
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.02em;
}

/* PC は見出しと引用を横に並べ、導入部の縦の消費を圧縮する */
@media screen and (min-width: 768px) {
  .p-vision {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: clamp(3rem, 5vw, 6rem);
    align-items: center;
    padding-top: 7rem;
    padding-bottom: 8rem;
  }

  .p-vision > .c-section-title {
    grid-column: 1;
    text-align: left;
    font-size: clamp(4.4rem, 6.4vw, 7.2rem);
  }

  .p-vision > .c-section-title .title-ja {
    margin: 1.4rem 0 0;
  }

  .p-vision > .c-vision-quote {
    grid-column: 2;
    margin: 0;
  }

  .p-vision > .c-vision-quote p {
    font-size: clamp(2rem, 2.4vw, 2.7rem);
    line-height: 1.9;
  }

  .p-vision > .c-vision-figures,
  .p-vision > .c-vision-text,
  .p-vision > .c-more {
    grid-column: 1 / -1;
  }

  .p-vision > .c-vision-figures {
    margin-top: 5rem;
    margin-bottom: 5rem;
  }
}

/* 数字は青地に白の半透明パネルだと沈むので、FV のクリーム地に
   濃紺の数字を置いてコントラストを取る。目標チップはコーラル */
.c-vision-figures {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2rem, 5vw, 6rem);
  margin-bottom: 6rem;
  padding: 3.4rem clamp(2rem, 4vw, 4rem);
  border-radius: 12px 48px 48px 12px;
  background: #fdf8ee;
  color: var(--color-text-black);
}

.c-figure {
  flex: 1 1 200px;
}

/* 2 つの数字の間に手書き風の区切り */
.c-figure + .c-figure {
  border-left: 1px dashed rgba(17, 53, 68, 0.22);
  padding-left: clamp(2rem, 4vw, 4.5rem);
}

.c-figure-label {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.3em 1.1em;
  border-radius: 999px;
  background: var(--color-red);
  color: #fff;
  font-size: 1.1rem;
  letter-spacing: 0.14em;
}

.c-figure-num {
  font-size: clamp(4rem, 6vw, 6.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--color-text-black);
}

.c-figure-num span {
  margin-left: 0.2em;
  font-size: 0.32em;
  font-weight: 700;
  color: var(--color-blue);
}

.c-figure-note {
  margin-top: 0.8rem;
  font-size: 1.35rem;
  letter-spacing: 0.08em;
  color: rgba(17, 53, 68, 0.62);
}

.c-vision-text p {
  margin-bottom: 2.2rem;
  font-size: 1.6rem;
  line-height: 2.15;
}

.c-vision-text p:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 767px) {
  .section-vision {
    padding: 0 var(--section-spMargin);
  }

  .p-vision {
    padding: 6rem 2.2rem 6.5rem;
    border-radius: 32px;
  }

  .c-vision-quote {
    margin: 2.6rem 0 3.2rem;
  }

  .c-vision-quote p {
    font-size: 1.9rem;
    line-height: 1.85;
  }

  .c-vision-figures {
    gap: 1.6rem;
    margin-bottom: 4rem;
    padding: 2.2rem 1.8rem;
  }

  /* 目標の数字 2 つは SP でも横に並べる（縦積みだと間延びする） */
  .c-figure {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
  }

  .c-figure + .c-figure {
    padding-left: 1.6rem;
  }

  .c-figure-label {
    margin-bottom: 0.7rem;
    font-size: 1.1rem;
  }

  .c-figure-num {
    font-size: clamp(2.9rem, 8.6vw, 4rem);
  }

  .c-figure-note {
    margin-top: 0.5rem;
  }

  .c-vision-text p {
    font-size: 1.5rem;
    line-height: 2;
    margin-bottom: 1.8rem;
  }
}

/* ---------------------------------------------------------
   PROFILE
   --------------------------------------------------------- */
.section-profile {
  padding: 13rem 0 12rem;
}

.p-profile {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.4rem;
  max-width: 1120px;
  margin: 6rem auto 0;
  padding: 0 var(--section-margin);
}

.p-profile-card {
  padding: 4rem clamp(2.4rem, 3vw, 3.6rem);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 40px -32px rgba(17, 53, 68, 0.5);
}

.c-card-title {
  margin-bottom: 2.6rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--color-pblue);
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.c-def-row {
  display: flex;
  gap: 1.6rem;
  padding: 1.4rem 0;
  border-bottom: 1px dashed rgba(17, 53, 68, 0.16);
}

.c-def-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.c-def-row dt {
  flex-shrink: 0;
  width: 7.5em;
  color: var(--color-blue);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: 0.06em;
}

.c-def-row dd {
  font-size: 1.45rem;
  line-height: 1.9;
}

.c-profile-sign {
  width: 150px;
  margin: 3.4rem 0 0 auto;
}

.c-profile-sign img {
  width: 100%;
  height: auto;
}

/* ネット上の情報について */
.p-facts {
  max-width: 1120px;
  margin: 2.4rem auto 0;
  padding: 0 var(--section-margin);
}

.p-facts-inner {
  padding: 4.4rem clamp(2.4rem, 4vw, 5rem);
  border-radius: 24px;
  border: 1px solid var(--color-pblue);
  background: rgba(255, 255, 255, 0.6);
}

.c-facts-label {
  display: inline-block;
  margin-bottom: 1.4rem;
  padding: 0.4em 1.2em;
  border-radius: 999px;
  background: var(--color-blue);
  color: var(--color-text-white);
  font-size: 1.2rem;
  letter-spacing: 0.1em;
}

.c-facts-title {
  margin-bottom: 2rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
}

.c-facts-text,
.c-facts-note {
  font-size: 1.45rem;
  line-height: 2.05;
}

.c-facts-list {
  margin: 2.4rem 0;
  padding: 2.4rem 2.6rem;
  border-radius: 16px;
  background: var(--color-10th-bg);
  list-style: none;
}

.c-facts-list li {
  position: relative;
  padding-left: 2.8rem;
  font-size: 1.45rem;
  line-height: 1.9;
}

.c-facts-list li + li {
  margin-top: 1.2rem;
}

/* チェックマーク */
.c-facts-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.55em;
  width: 12px;
  height: 6px;
  border-left: 2px solid var(--color-blue);
  border-bottom: 2px solid var(--color-blue);
  transform: rotate(-45deg);
}

.c-facts-note {
  margin-top: 2.4rem;
  opacity: 0.85;
}

.c-facts-link {
  margin-top: 2.4rem;
}

.c-facts-link a {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--color-blue);
  font-size: 1.4rem;
  letter-spacing: 0.06em;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.c-facts-link a::after {
  content: '';
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

@media screen and (max-width: 1024px) {
  .section-profile {
    padding: 9rem 0 8rem;
  }

  .p-profile {
    grid-template-columns: 1fr;
    margin-top: 4rem;
  }
}

@media screen and (max-width: 767px) {
  .p-profile,
  .p-facts {
    padding: 0 var(--section-spMargin);
  }

  .p-profile-card {
    padding: 3rem 2.2rem;
  }

  .c-card-title {
    font-size: 2rem;
  }

  /* 縦積みにすると 10 項目で画面何枚ぶんにも伸びるので、
     SP でもラベルと値を横並びのまま詰める */
  .c-def-row {
    gap: 1.2rem;
    padding: 1.1rem 0;
  }

  .c-def-row dt {
    width: 5.5em;
    line-height: 1.85;
  }

  .c-def-row dd {
    flex: 1;
    min-width: 0;
  }

  .p-facts-inner {
    padding: 3.2rem 2.2rem;
  }

  .c-facts-list {
    padding: 2rem 1.8rem;
  }
}

/* ---------------------------------------------------------
   SHARE
   --------------------------------------------------------- */
.section-share {
  padding: 0 0 10rem;
}

.p-share {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--section-margin);
  text-align: center;
}

.p-share-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-top: 5rem;
  list-style: none;
}

.c-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1.6rem 3rem;
  border: 1px solid var(--color-blue);
  border-radius: 999px;
  background: transparent;
  color: var(--color-blue);
  font-size: 1.45rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.c-share-btn i {
  display: block;
  width: 18px;
  line-height: 0;
}

.c-share-btn i img {
  width: 100%;
  height: auto;
  transition: filter 0.3s ease;
}

.c-share-btn p {
  margin: 0;
}

.c-share-btn:hover,
.c-share-btn.is-active {
  background: var(--color-blue);
  color: var(--color-text-white);
}

.c-share-btn:hover i img,
.c-share-btn.is-active i img {
  filter: brightness(0) invert(1);
}

@media screen and (max-width: 767px) {
  .section-share {
    padding-bottom: 6rem;
  }

  .p-share {
    padding: 0 var(--section-spMargin);
  }

  .p-share-list {
    flex-direction: column;
    margin-top: 3.5rem;
  }

  .c-share-btn {
    justify-content: center;
    width: 100%;
  }
}

/* ---------------------------------------------------------
   ナビ 6 項目目（SP のメニュー背景）
   --------------------------------------------------------- */
@media screen and (max-width: 767px) {
  header ul {
    justify-content: flex-start;
    padding-top: 12vh;
    padding-bottom: 6vh;
    overflow-y: auto;
  }

  header ul .c-menu-item {
    padding: 3.6vh 26px 3.6vh 16px;
  }
}

/* =========================================================
   モバイル調整
   ========================================================= */
@media screen and (max-width: 767px) {
  /* --- WHO I AM の下端：署名のあと 25vh(=211px) が空くので詰める --- */
  .section-message[data-sticky-name='01'] {
    padding-bottom: 9vh;
  }

  /* --- FV：イラストを画面幅いっぱいまで使う --- */
  .l-mainVisual-inner {
    width: 100%;
    max-width: none;
  }

  /* --- WHO I AM：UUUM 由来の装飾イラストが本文と重なるので出さない --- */
  .section-message[data-sticky-name='01'] .p-sticky-illust01,
  .section-message[data-sticky-name='01'] .p-sticky-illust02 {
    display: none;
  }

  /* --- セクション間の余白を詰める --- */
  .section-beliefs {
    padding: 7rem 0 7.5rem;
  }

  .section-profile {
    padding: 7.5rem 0 7rem;
  }

  .section-share {
    padding-bottom: 7rem;
  }

  .p-beliefs-lead {
    margin: 3rem auto 3.4rem;
    text-align: left;
  }

  .p-profile {
    margin-top: 3.4rem;
  }

  .p-share-list {
    margin-top: 3rem;
  }
}

/* =========================================================
   ロゴ（テキスト組み）

   画像ロゴ（UUUM のもの）をやめて、サイトの書体で組んだ
   ワードマークに置き換えた。h1 が実テキストになるので
   読み上げと検索の両面でも素直になる。
   ========================================================= */
.c-logo {
  width: auto;
  line-height: 1;
}

.c-logo a,
a.c-logo {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.c-logo a:hover,
a.c-logo:hover {
  opacity: 0.7;
}

.c-logo-main {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.07em;
  color: var(--color-text-black);
  white-space: nowrap;
}

.c-logo-sub {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.2em;
  color: var(--color-blue);
  white-space: nowrap;
}

/* style-10th.css の `header h1 { width: 64px }` と
   SP の `width: 50px` を打ち消す */
header h1.c-logo {
  width: auto;
}

@media screen and (max-width: 767px) {
  header h1.c-logo {
    width: auto;
    position: relative;
    z-index: 1;
  }

  .c-logo-main {
    font-size: 1.9rem;
    letter-spacing: 0.05em;
  }

  .c-logo-sub {
    font-size: 0.9rem;
    letter-spacing: 0.16em;
  }
}

/* メニューを開いている間はロゴを白背景の上に置くため色を保つ */
.l-blog-page .c-logo-main {
  color: var(--color-text-black);
}

/* ヘッダーナビの見た目（全幅ハンバーガーのオーバーレイ）は
   style-10th.css に一元化した */

/* =========================================================
   個別ページへの導線（トップの各セクション末尾）
   ========================================================= */
.c-more {
  margin-top: 5rem;
  text-align: center;
}

.c-more-link {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  min-height: 56px;
  padding: 0 3.2rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--color-blue);
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.c-more-link i {
  width: 8px;
  height: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

.c-more-link:hover {
  background: var(--color-blue);
  color: var(--color-text-white);
}

.c-more-link:hover i {
  transform: rotate(45deg) translate(2px, -2px);
}

/* 次セクションのドーム背景（.c-sectionMessage-bg はパララックスで
   最大 1000px せり上がる・z-index:0）が「もっと読む」に覆い被さって
   ボタンが埋もれるため、前面のレイヤーに出す（bg-after の z:1 より上） */
.section-message .c-more {
  position: relative;
  z-index: 2;
}

/* 青地のセクション（MY VISION / WHO I AM）では白抜きに */
.section-message .c-more-link,
.p-vision .c-more-link {
  color: var(--color-text-white);
}

.section-message .c-more-link:hover,
.p-vision .c-more-link:hover {
  background: var(--color-text-white);
  color: var(--color-blue);
}

/* ナビが span から a になったので、リンクの既定スタイルを打ち消す */
a.c-menu-item {
  color: inherit;
  text-decoration: none;
}

@media screen and (max-width: 767px) {
  .c-more {
    margin-top: 3.2rem;
  }

  .c-more-link {
    min-height: 52px;
    padding: 0 2.4rem;
    font-size: 1.4rem;
  }
}

/* FV のコピーが h1 になったので、内側の span をブロックに戻す */
.c-mv-copy-title {
  display: block;
  font-weight: inherit;
}

.c-mv-copy-title .c-mv-copy-main,
.c-mv-copy-title .c-mv-copy-sub {
  display: block;
}

/* =========================================================
   文字の太さ

   Zen Kaku Gothic New は 400 / 500 / 700 の 3 ウェイトしか無い。
   長い本文を 700 にすると読みづらくなるので 500 のままにして、
   細く見えやすい「小さい文字」と「見出し・ラベル系」を 700 に上げる。
   ========================================================= */

/* リード文・導入文 */
.c-page-lead,
.c-article-lead,
.p-beliefs-lead,
.c-vision-quote p,
.c-page-quote p {
  font-weight: 700;
}

/* 小さい文字（11〜13px 帯）はここが一番細く見える */
.c-blog-meta,
.c-blog-cat,
.c-blog-more,
.c-breadcrumb,
.c-mv-copy-sub,
.c-figure-label,
.c-figure-note,
.c-roots-hint,
.c-roots-chapter,
.c-belief-tag,
.c-facts-label,
.c-mini-meta,
.c-related-en,
.c-logo-sub,
.c-loading-sub,
.c-subnav a i,
.c-blog-pager-item span,
.c-iphone-appname,
.c-iphone-status {
  font-weight: 700;
}

/* 見出しの日本語サブタイトル・ナビ・ボタン類 */
.c-section-title .title-ja,
.c-subnav a span,
.c-menu-item span,
.c-more-link,
.c-share-btn,
.c-blog-viewall .c-button,
.c-blog-back .c-button,
.c-roots-rail-item,
.c-roots-counter,
.c-article-sign,
.c-profile-sign,
.p-latest .c-mini-title,
.c-page-link a,
.c-facts-link a {
  font-weight: 700;
}

/* 英字の大見出しは Readex Pro（ローカルは 400 まで）なので 400 で止める */
.c-section-title,
.c-mv-copy-main,
.section-message[data-sticky-name='01'] .p-message-text h2 {
  font-weight: 400;
}

/* FV を <picture> でくるんだので、高さの受け渡しを繋ぐ */
.c-mv-base picture {
  display: block;
}

@media screen and (min-width: 768px) {
  .l-mainVisual > .l-mainVisual-inner .c-mv-base picture {
    height: 100%;
  }
}

/* フッターのサイト内リンク（クロールと回遊の下支え） */
footer {
  flex-direction: column;
  gap: 2rem;
  height: auto;
  padding-top: 6rem;
  padding-bottom: 4rem;
}

.c-footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2.4rem;
  max-width: 900px;
  padding: 0 var(--section-margin);
}

.c-footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--color-blue);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.c-footer-nav a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media screen and (max-width: 767px) {
  footer {
    padding-top: 4rem;
    padding-bottom: 3rem;
  }

  .c-footer-nav {
    gap: 0.4rem 1.8rem;
    padding: 0 var(--sp-gutter, 20px);
  }
}

/* =========================================================
   WHO I AM 両脇のスポットイラスト
   （UUUM 10th の構図に合わせて左右に配置。テキストと重なる幅では出さない）
   ========================================================= */
.section-message[data-sticky-name='01'] .c-side-illust {
  position: absolute;
  width: 21vw;
  max-width: 420px;
  pointer-events: none;
  animation: wobbling_y 0.9s ease-in-out infinite alternate;
}

.section-message[data-sticky-name='01'] .c-side-illust img {
  width: 100%;
  height: auto;
}

.section-message[data-sticky-name='01'] .c-side-illust-left {
  left: 2%;
  top: 41%;
  transform: translateY(-50%);
}

.section-message[data-sticky-name='01'] .c-side-illust-right {
  right: 2%;
  top: 21%;
  transform: translateY(-50%);
}

@media screen and (max-width: 1280px) {
  .section-message[data-sticky-name='01'] .c-side-illust {
    display: none;
  }
}

/* =========================================================
   下部セクションのスポットイラスト（WHO I AM と同じ生成画風）
   ========================================================= */

/* MY VISION：カード右下、「再生」を表す水やり。
   overflow: hidden のカード角にわずかに沈めて収める */
.p-vision .c-vision-illust {
  position: absolute;
  right: clamp(2rem, 4vw, 6rem);
  bottom: 6.5rem;
  width: min(23%, 270px);
  z-index: 0;
  pointer-events: none;
  animation: wobbling_y 1s ease-in-out infinite alternate;
}

.p-vision .c-vision-illust img {
  width: 100%;
  height: auto;
}

/* 本文がイラストの下に潜らないよう、表示中は右に逃がす */
@media screen and (min-width: 1025px) {
  .c-vision-text p {
    padding-right: 27%;
  }
}

@media screen and (max-width: 1024px) {
  .p-vision .c-vision-illust {
    display: none;
  }
}

/* SHARE：メガホンがボタン列を向くよう左側に置く */
.section-share {
  position: relative;
}

.section-share .c-share-illust {
  position: absolute;
  left: 4%;
  bottom: 4rem;
  width: min(16vw, 240px);
  pointer-events: none;
  animation: wobbling_y 0.9s ease-in-out infinite alternate;
}

.section-share .c-share-illust img {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 1280px) {
  .section-share .c-share-illust {
    display: none;
  }
}