@charset "UTF-8";
/* ==========================================================
   About ページ（body.aboutPage）
   SRnet_共通ルール_260905 / アクションモジュール_260905 準拠
   ========================================================== */

/* ---------- 変数 ---------- */
.aboutPage {
  --font-ja: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-en: "Jost", var(--font-ja);
  --c-text: #414141;
  --c-heading-en: #3e5a6a;
  /* ページ専用カラー */
  --c-accent: #8c6c4e;   /* 茶系アクセント（欧文ラベル・年表） */
  --c-beige: #bdb0a2;    /* PHILOSOPHY 背景 */
  --c-cream: #f2efea;    /* MATERIAL 背景 */
  --c-paper: #f9f9f8;    /* 循環図 背景 */
  --c-sand: #e5e1db;     /* CRAFT / COMMUNITY 背景 */
  --c-stone: #bebdb9;    /* HISTORY 背景 */
  --c-button: #9aa4ad;
  --section-top: 200px;
  --section-first: 100px;
  --section-bottom: 150px;
}

/* ---------- 骨格 ---------- */
.aboutPage, .aboutPage * { margin: 0; padding: 0; box-sizing: border-box; }
main.aboutPage {
  background: #fff;
  color: var(--c-text);
  font-family: var(--font-ja);
  font-size: 15px;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;   /* hidden だと内側の sticky が効かなくなるため clip */
}
.aboutPage img { border: 0; max-width: 100%; height: auto; vertical-align: top; }
.aboutPage ul, .aboutPage ol { list-style: none; }
.aboutPage p { text-wrap: pretty; }

.aboutPage a { color: var(--c-text); text-decoration: none; transition: opacity .3s; }
.aboutPage a:hover { opacity: .6; }

.aboutPage .inner { width: 1100px; margin: 0 auto; }
.aboutPage .br-sp { display: none; }

/* ---------- 欧文ユーティリティ ---------- */
.aboutPage .u-en,
.aboutPage .heading__en {
  font-family: var(--font-en);
  font-weight: 300;
  letter-spacing: .03em;
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums;
}

/* ---------- .u-hover-spacing（アクションモジュール 4章） ---------- */
.aboutPage .u-hover-spacing {
  display: inline-block;
  transition: letter-spacing .3s ease, opacity .3s;
}
.aboutPage a:hover .u-hover-spacing,
.aboutPage .u-hover-spacing:hover { letter-spacing: .15em; }

/* ---------- 見出しコンポーネント ---------- */
.aboutPage .heading { display: flex; flex-direction: column; font-weight: 500; }
.aboutPage .heading__en { font-size: var(--en-size); line-height: 1; }
.aboutPage .heading__ja { font-size: var(--ja-size); letter-spacing: .08em; }
.aboutPage .heading--center { align-items: center; text-align: center; }

/* About 用 modifier：小さい欧文ラベル + 大きい和文 */
.aboutPage .heading--label {
  --en-size: 15px;
  --ja-size: 42px;
  gap: 22px;
}
.aboutPage .heading--label .heading__en { color: var(--c-accent); font-weight: 400; letter-spacing: .03em; }
.aboutPage .heading--label .heading__ja { font-weight: 700; line-height: 1.55; }

/* 小見出し（MATERIAL 内の各行・CRAFT 等） */
.aboutPage .heading--sub {
  --en-size: 15px;
  --ja-size: 30px;
  gap: 14px;
}
.aboutPage .heading--sub .heading__ja { font-weight: 500; line-height: 1.5; }

/* MV */
.aboutPage .heading--mv {
  --en-size: 26px;
  --ja-size: 52px;
  gap: 40px;
  color: #fff;
  text-align: left;   /* B-cart側のCSSで中央寄せになるのを防ぐ */
}
.aboutPage .heading--mv .heading__en { color: #fff; }
.aboutPage .heading--mv .heading__ja { line-height: 1.6; }

/* 見出しの文字送りアニメーション（共通ルール 13章） */
.aboutPage .heading__en span {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
}
.aboutPage .heading__en.is-visible span {
  animation: aboutPage-heading-char-in .5s ease forwards;
}
@keyframes aboutPage-heading-char-in {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- スクロールで1文字ずつ読み進める（.js-scroll-read + scroll-read.js） ---------- */
.aboutPage .js-scroll-read.is-ready .scroll-read__char {
  opacity: .25;
  transition: opacity .5s ease;
}
.aboutPage .js-scroll-read.is-ready .scroll-read__char.is-read { opacity: 1; }

/* ==========================================================
   MV
   ========================================================== */
.aboutPage .mv {
  position: relative;
  height: 100vh;
  height: 100svh;   /* モバイルのアドレスバー分を除いた高さ */
  background: #000;
  overflow: hidden;
}
.aboutPage .mv__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: right center;
}
.aboutPage .mv::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 40%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000);
}
.aboutPage .mv__inner {
  position: relative;
  z-index: 1;
  padding-top: var(--section-first);
}
.aboutPage .mv__inner .heading { padding-top: 40px; }

/* ==========================================================
   INTRO
   ========================================================== */
.aboutPage .intro { background: #000; color: #fff; }
.aboutPage .intro__inner {
  display: flex;
  flex-direction: column;
  gap: 42px;
  padding-top: 40px;
  padding-bottom: 120px;
  text-align: center;
  font-size: 17px;
  font-weight: 400;
  line-height: 2.6;
  letter-spacing: .06em;
}

/* ==========================================================
   OUR PHILOSOPHY
   ========================================================== */
.aboutPage .philosophy {
  background: var(--c-beige);
  color: #fff;
  padding-bottom: var(--section-bottom);
}
.aboutPage .philosophy__photo { position: relative; }
.aboutPage .philosophy__photo img { display: block; width: 100%; aspect-ratio: 940 / 760; object-fit: cover; }
.aboutPage .philosophy__photo::before,
.aboutPage .philosophy__photo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
}
.aboutPage .philosophy__photo::before { top: 0; height: 25%; background: linear-gradient(#000, rgba(0, 0, 0, 0)); }
.aboutPage .philosophy__photo::after { bottom: 0; height: 30%; background: linear-gradient(rgba(189, 176, 162, 0), var(--c-beige)); }
.aboutPage .philosophy__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: 40px;
  margin-top: -40px;
}
.aboutPage .philosophy__heading .heading__en { color: #fff; }
.aboutPage .philosophy__text {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: 45px;
  font-size: 17px;
  font-weight: 400;
  line-height: 2.3;
  letter-spacing: .08em;
}

/* ==========================================================
   MATERIAL
   ========================================================== */
.aboutPage .material {
  background: var(--c-cream);
  padding-top: var(--section-top);
  padding-bottom: var(--section-bottom);
}
.aboutPage .material__lead {
  display: flex;
  flex-direction: column;
  gap: 36px;
  margin-top: 50px;
  text-align: center;
  font-size: 17px;
  font-weight: 400;
  line-height: 2.3;
  letter-spacing: .06em;
}
.aboutPage .media-list {
  display: flex;
  flex-direction: column;
  gap: 36px;
  margin-top: 80px;
}
.aboutPage .material__closing {
  margin-top: 80px;
  text-align: center;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: .08em;
}

/* ---------- 写真 + テキストの横並び行（全幅） ---------- */
.aboutPage .media {
  display: grid;
  grid-template-columns: minmax(0, 57fr) minmax(0, 43fr);
  align-items: center;
  overflow: hidden;
}
.aboutPage .media__photo { position: relative; height: 100%; }
.aboutPage .media__photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 330px;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to right, #000 70%, transparent);
          mask-image: linear-gradient(to right, #000 70%, transparent);
}
.aboutPage .media__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 40px max(24px, calc(50vw - 550px)) 40px 0;
}
.aboutPage .media__text {
  font-size: 16px;
  font-weight: 400;
  line-height: 2.1;
  letter-spacing: .08em;
}
.aboutPage .media--reverse { grid-template-columns: minmax(0, 43fr) minmax(0, 57fr); }
.aboutPage .media--reverse .media__photo { order: 2; }
.aboutPage .media--reverse .media__photo img {
  -webkit-mask-image: linear-gradient(to left, #000 70%, transparent);
          mask-image: linear-gradient(to left, #000 70%, transparent);
}
.aboutPage .media--reverse .media__body {
  position: relative;
  z-index: 1;
  padding: 40px 0 40px max(24px, calc(50vw - 550px));
  margin-right: -80px;
}
.aboutPage .media--sand { background: var(--c-sand); }

/* ==========================================================
   SUSTAINABILITY
   ========================================================== */
.aboutPage .sustainability {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding-top: var(--section-top);
  padding-bottom: var(--section-bottom);
}
.aboutPage .sustainability__photo {
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 45%);
          mask-image: linear-gradient(to right, transparent, #000 45%);
}
.aboutPage .sustainability__inner { position: relative; }
.aboutPage .sustainability__heading .heading__en { color: var(--c-text); }
.aboutPage .sustainability__text {
  display: flex;
  flex-direction: column;
  gap: 36px;
  max-width: 600px;
  margin-top: 60px;
  font-size: 16px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .06em;
}

/* ==========================================================
   CYCLE（私たちの考えるサスティナビリティ）
   ========================================================== */
.aboutPage .cycle {
  background: var(--c-paper);
  padding-top: var(--section-top);
  padding-bottom: var(--section-bottom);
}
.aboutPage .cycle__heading { --ja-size: 34px; }
.aboutPage .cycle__heading .heading__ja { font-weight: 500; }
.aboutPage .cycle__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: 60px;
  align-items: center;
  margin-top: 70px;
}
.aboutPage .cycle__text {
  display: flex;
  flex-direction: column;
  gap: 34px;
  font-size: 16px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .06em;
}
.aboutPage .cycle__diagram {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 420 / 400;
  margin: 0 auto;
}
.aboutPage .cycle__arrows { position: absolute; inset: 0; width: 100%; height: 100%; }
.aboutPage .cycle__item {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 44%;
  text-align: center;
  transform: translateX(-50%);
}
.aboutPage .cycle__item--material  { left: 47%; top: 0; }
.aboutPage .cycle__item--craft     { left: 77%; top: 44%; }
.aboutPage .cycle__item--community { left: 18%; top: 44%; }
.aboutPage .cycle__icon { width: 38%; min-width: 100px; margin-bottom: 6px; }
.aboutPage .cycle__name {
  color: var(--c-accent);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .3em;
  text-indent: .3em;
}
.aboutPage .cycle__desc {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .08em;
}

/* ==========================================================
   CRAFT / COMMUNITY
   ========================================================== */
.aboutPage .people { display: flex; flex-direction: column; gap: 8px; padding-bottom: 5px; background: #fff; }

/* ==========================================================
   HISTORY
   ========================================================== */
.aboutPage .history {
  background: var(--c-stone);
  padding-top: var(--section-top);
  padding-bottom: var(--section-bottom);
}
.aboutPage .history__lead {
  display: flex;
  flex-direction: column;
  gap: 36px;
  max-width: 740px;
  margin: 70px auto 0;
  font-size: 17px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .06em;
}
.aboutPage .history__list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 56px;
  max-width: 900px;
  margin: 100px auto 0;
}
.aboutPage .history__list::before,
.aboutPage .history__list::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: calc(var(--section-bottom) * -1);
  left: 35px;
  width: 3px;
  background: var(--c-accent);
}
.aboutPage .history__item {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.aboutPage .history__year {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--c-accent);
  color: #fff;
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: .03em;
  text-align: center;
}
.aboutPage .history__body { padding-top: 14px; }
.aboutPage .history__item--photo .history__body {
  display: grid;
  grid-template-columns: minmax(0, 385px) minmax(0, 1fr);
  gap: 16px;
  padding-top: 0;
}
.aboutPage .history__photo { display: block; width: 100%; aspect-ratio: 330 / 238; object-fit: cover; }
.aboutPage .history__content { display: flex; flex-direction: column; gap: 10px; }
.aboutPage .history__title {
  color: var(--c-accent);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .06em;
}
.aboutPage .history__text {
  font-size: 15px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .06em;
}

/* ==========================================================
   MESSAGE
   ========================================================== */
.aboutPage .message {
  background: #fff;
  padding-top: 60px;
  padding-bottom: var(--section-bottom);
}
.aboutPage .message__photo { display: block; width: 890px; max-width: 100%; margin: 0 auto; aspect-ratio: 760 / 534; object-fit: cover; }
.aboutPage .message__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 60px;
  max-width: 890px;
  margin: 100px auto 0;
}
.aboutPage .message__heading {
  --en-size: 17px;
  --ja-size: 46px;
  order: 2;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  writing-mode: vertical-rl;
  height: auto;
  white-space: nowrap;
}
.aboutPage .message__heading .heading__en { color: var(--c-text); font-weight: 400; }
.aboutPage .message__heading .heading__ja { line-height: 1.4; }
.aboutPage .message__text {
  display: flex;
  flex-direction: column;
  gap: 32px;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: .06em;
}
.aboutPage .message__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 550px;
  max-width: 100%;
  height: 52px;
  margin: 130px auto 0;
  border-radius: 4px;
  background: var(--c-button);
  color: #fff;
  font-size: 18px;
  font-weight: 400;
}

/* ==========================================================
   1279px 以下：固定幅を解除
   ========================================================== */
@media screen and (max-width: 1279px) {
  .aboutPage .inner { width: auto; padding-left: 24px; padding-right: 24px; }
  .aboutPage .heading--mv { --en-size: 24px; --ja-size: 46px; }
}

/* ==========================================================
   920px 以下：横並びを縦積みに
   ========================================================== */
@media screen and (max-width: 920px) {
  .aboutPage { --section-top: 150px; --section-bottom: 120px; }
  .aboutPage .philosophy__inner { grid-template-columns: minmax(0, 1fr); gap: 30px; margin-top: -20px; text-align: center; }
  .aboutPage .philosophy__heading { align-items: center; }
  .aboutPage .philosophy__heading .br-pc { display: none; }
  .aboutPage .philosophy__text { padding-top: 0; }
  .aboutPage .cycle__body { grid-template-columns: minmax(0, 1fr); gap: 60px; }
  .aboutPage .cycle__diagram { order: -1; }
  .aboutPage .history__item--photo .history__body { grid-template-columns: minmax(0, 1fr); padding-top: 0; }
  .aboutPage .history__item--photo .br-pc { display: none; }
  .aboutPage .message__body { grid-template-columns: minmax(0, 1fr); gap: 50px; text-align: center; }
  .aboutPage .message__heading { order: 0; flex-direction: column; align-items: center; writing-mode: horizontal-tb; white-space: normal; }
}

/* ==========================================================
   768px 以下：小型タブレット
   ========================================================== */
@media screen and (max-width: 768px) {
  .aboutPage .inner { padding-left: 40px; padding-right: 40px; }
  .aboutPage .heading--label { --en-size: 13px; --ja-size: 34px; gap: 18px; }
  .aboutPage .heading--sub { --en-size: 13px; --ja-size: 23px; gap: 12px; }
  .aboutPage .heading--mv { --en-size: 20px; --ja-size: 36px; gap: 30px; }
  .aboutPage .cycle__heading { --ja-size: 24px; }
  .aboutPage .message__heading { --en-size: 15px; --ja-size: 38px; }
  .aboutPage .intro__inner,
  .aboutPage .philosophy__text,
  .aboutPage .material__lead,
  .aboutPage .history__lead,
  .aboutPage .message__text { font-size: 15px; }
  .aboutPage .media__text,
  .aboutPage .sustainability__text,
  .aboutPage .cycle__text { font-size: 14px; line-height: 1.9; }
  .aboutPage .media__photo img { min-height: 260px; }
  .aboutPage .media__body { padding: 30px 24px 30px 0; gap: 14px; }
  .aboutPage .media--reverse .media__body { padding: 30px 0 30px 24px; margin-right: -60px; }
  .aboutPage .material__closing { font-size: 16px; }
  .aboutPage .history__list { gap: 44px; }
  .aboutPage .history__list::before,
  .aboutPage .history__list::after { left: 29px; }
  .aboutPage .history__item { grid-template-columns: 60px minmax(0, 1fr); gap: 14px; }
  .aboutPage .history__year { width: 60px; height: 60px; font-size: 14px; }
  .aboutPage .history__body { padding-top: 8px; }
  .aboutPage .history__title { font-size: 21px; }
  .aboutPage .history__text { font-size: 14px; line-height: 1.85; }
  .aboutPage .cycle__name { font-size: 17px; }
  .aboutPage .cycle__desc { font-size: 13px; }
  .aboutPage .message__button { margin-top: 80px; font-size: 16px; }
}

/* ==========================================================
   425px 以下：モバイル
   ========================================================== */
@media screen and (max-width: 425px) {
  .aboutPage { --section-top: 100px; --section-first: 50px; --section-bottom: 80px; }
  .aboutPage .inner { padding-left: 10px; padding-right: 10px; }
  .aboutPage .br-sp { display: inline; }
  .aboutPage .heading--label { --en-size: 11px; --ja-size: 24px; gap: 14px; }
  .aboutPage .heading--sub { --en-size: 11px; --ja-size: 19px; gap: 10px; }
  .aboutPage .heading--mv { --en-size: 16px; --ja-size: 27px; gap: 22px; }
  .aboutPage .cycle__heading { --ja-size: 17px; }
  .aboutPage .message__heading { --en-size: 12px; --ja-size: 28px; }
  .aboutPage .mv__photo { object-position: 70% center; }
  .aboutPage .intro__inner { gap: 30px; padding-bottom: 80px; font-size: 13px; line-height: 2.3; letter-spacing: .04em; }
  .aboutPage .philosophy__text,
  .aboutPage .material__lead,
  .aboutPage .history__lead,
  .aboutPage .message__text { gap: 26px; font-size: 14.5px; line-height: 2; }
  .aboutPage .material__lead { margin-top: 30px; }
  .aboutPage .media-list { margin-top: 50px; gap: 24px; }
  .aboutPage .media,
  .aboutPage .media--reverse { grid-template-columns: minmax(0, 1fr); }
  .aboutPage .media__photo img,
  .aboutPage .media--reverse .media__photo img {
    min-height: 0;
    aspect-ratio: 16 / 9;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
            mask-image: linear-gradient(to bottom, #000 70%, transparent);
  }
  .aboutPage .media--reverse .media__photo { order: 0; }
  .aboutPage .media__body,
  .aboutPage .media--reverse .media__body { margin-right: 0; padding: 4px 10px 30px; }
  .aboutPage .media__text,
  .aboutPage .sustainability__text,
  .aboutPage .cycle__text { gap: 24px; font-size: 13px; }
  .aboutPage .material__closing { margin-top: 50px; font-size: 14px; }
  .aboutPage .sustainability__photo { width: 65%; }
  .aboutPage .sustainability__text { margin-top: 36px; }
  .aboutPage .cycle__body { margin-top: 40px; gap: 40px; }
  .aboutPage .cycle__name { font-size: 14px; }
  .aboutPage .cycle__desc { font-size: 11px; }
  .aboutPage .cycle__icon { min-width: 0; }
  .aboutPage .history__lead { margin-top: 40px; }
  .aboutPage .history__list { margin-top: 60px; gap: 36px; }
  .aboutPage .history__list::before,
  .aboutPage .history__list::after { left: 22px; width: 2px; }
  .aboutPage .history__item { grid-template-columns: 46px minmax(0, 1fr); gap: 10px; }
  .aboutPage .history__year { width: 46px; height: 46px; font-size: 11px; }
  .aboutPage .history__body { padding-top: 6px; }
  .aboutPage .history__title { font-size: 16px; }
  .aboutPage .history__text { font-size: 12px; }
  .aboutPage .message { padding-top: 40px; }
  .aboutPage .message__body { margin-top: 50px; gap: 34px; }
  .aboutPage .message__button { margin-top: 50px; height: 46px; font-size: 14px; }
}

/* ==========================================================
   ページ演出（page-motion.js が body に .is-motion を付与した時のみ）
   ========================================================== */
.aboutPage .history__list::after { display: none; }
.aboutPage .philosophy__photo,
.aboutPage .media__photo { overflow: hidden; }
.aboutPage .philosophy__photo::before,
.aboutPage .philosophy__photo::after { z-index: 1; }


/* MV・PHILOSOPHY：ゆっくりズームアウト
   （transition は .is-visible 側だけに持たせ、初期値 1.2 へは瞬時に切り替える） */
.aboutPage.is-motion .mv__photo { scale: 1.2; }
.aboutPage.is-motion .mv.is-visible .mv__photo {
  scale: 1.08;
  transition: scale 6s cubic-bezier(.2, .6, .3, 1);
}
/* 導入文：一定量スクロールするまで画面に固定（下の PHILOSOPHY 写真を見せない） */
.aboutPage.is-motion .intro {
  --intro-scroll: 180vh;   /* 固定しておくスクロール量（読み進め 120vh ＋ 読了後の余白 60vh） */
  height: calc(100vh + var(--intro-scroll));
  height: calc(100svh + var(--intro-scroll));
}
.aboutPage.is-motion .intro__inner {
  position: sticky;
  top: 0;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: 0;
  padding-bottom: 0;
}
.aboutPage.is-motion .philosophy__photo { background: #000; }
.aboutPage.is-motion .philosophy__photo img { scale: 1.2; opacity: 0; }
.aboutPage.is-motion .philosophy__photo.is-visible img {
  scale: 1.08;
  opacity: 1;
  transition: scale 4s cubic-bezier(.2, .6, .3, 1), opacity 1.2s ease;
}

/* 写真と文章の横並び行：写真がマスクで開く */
.aboutPage.is-motion .media__photo {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s cubic-bezier(.77, 0, .18, 1);
}
.aboutPage.is-motion .media--reverse .media__photo { clip-path: inset(0 0 0 100%); }
.aboutPage.is-motion .media.is-visible .media__photo { clip-path: inset(0); }

/* 循環図：素材 → 矢印 → ものづくり → 矢印 → コミュニティ → 矢印 */
.aboutPage.is-motion .cycle__item {
  opacity: 0;
  translate: 0 16px;
  transition: opacity .6s ease, translate .6s ease;
}
.aboutPage.is-motion .cycle__diagram.is-visible .cycle__item { opacity: 1; translate: 0 0; }
.aboutPage.is-motion .cycle__diagram.is-visible .cycle__item--craft { transition-delay: 1.1s; }
.aboutPage.is-motion .cycle__diagram.is-visible .cycle__item--community { transition-delay: 2.1s; }
.aboutPage.is-motion .cycle__arrow-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .6s ease;
}
.aboutPage.is-motion .cycle__arrow-head {
  opacity: 0;
  transition: opacity .3s ease;
}
.aboutPage.is-motion .cycle__diagram.is-visible .cycle__arrow-line { stroke-dashoffset: 0; }
.aboutPage.is-motion .cycle__diagram.is-visible .cycle__arrow-head { opacity: 1; }
.aboutPage.is-motion .cycle__diagram.is-visible .cycle__arrow--1 .cycle__arrow-line { transition-delay: .5s; }
.aboutPage.is-motion .cycle__diagram.is-visible .cycle__arrow--1 .cycle__arrow-head { transition-delay: 1s; }
.aboutPage.is-motion .cycle__diagram.is-visible .cycle__arrow--2 .cycle__arrow-line { transition-delay: 1.5s; }
.aboutPage.is-motion .cycle__diagram.is-visible .cycle__arrow--2 .cycle__arrow-head { transition-delay: 2s; }
.aboutPage.is-motion .cycle__diagram.is-visible .cycle__arrow--3 .cycle__arrow-line { transition-delay: 2.5s; }
.aboutPage.is-motion .cycle__diagram.is-visible .cycle__arrow--3 .cycle__arrow-head { transition-delay: 3s; }

/* HISTORY：縦線が伸び、年の丸が順に色付く */
.aboutPage.is-motion .history__list::before { opacity: .3; }
.aboutPage.is-motion .history__list::after {
  display: block;
  transform: scaleY(var(--history-progress, 0));
  transform-origin: top;
}
.aboutPage.is-motion .history__year {
  position: relative;
  z-index: 1;
  background: var(--c-stone);
  box-shadow: inset 0 0 0 2px var(--c-accent);
  color: var(--c-accent);
  transition: background-color .4s ease, color .4s ease;
}
.aboutPage.is-motion .history__year.is-active {
  background: var(--c-accent);
  color: #fff;
}

/* ==========================================================
   PHILOSOPHY：写真を 100vh で固定し、その上を文章がスクロール
   ========================================================== */
.aboutPage .philosophy { padding-bottom: 0; }
.aboutPage .philosophy__photo {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;   /* svh だとスマホでバーが縮んだ時に下に隙間ができるため lvh */
  overflow: hidden;
}
.aboutPage .philosophy__photo img { height: 100%; aspect-ratio: auto; }
.aboutPage .philosophy__photo::after {   /* 文字を読みやすくする暗幕 */
  top: 0;
  height: auto;
  background: rgba(0, 0, 0, var(--photo-dim, 0));   /* 固定後のスクロールで 0 → .6（＝写真の不透明度 1 → .4）。page-motion.js が更新 */
}
.aboutPage .philosophy__inner {
  z-index: 2;
  margin-top: 70vh;    /* 写真が固定 → 少しスクロール → 暗くなりきってから文字が入る */
  margin-top: 70svh;
  padding-bottom: 100vh;    /* 文字が画面から消えた時点で写真の固定が外れる */
  padding-bottom: 100svh;
}
.aboutPage .philosophy__text { padding-top: 140px; }   /* 見出し「長く使える家具づくり」の下の余白 */
@media screen and (max-width: 920px) {
  .aboutPage .philosophy__inner { gap: 80px; }
  .aboutPage .philosophy__text { padding-top: 0; }
}
@media screen and (max-width: 425px) {
  .aboutPage .philosophy__inner { gap: 56px; }
}
/* SUSTAINABILITY・循環図の本文：読む前の不透明度を低めに */
.aboutPage .sustainability__text.js-scroll-read.is-ready .scroll-read__char:not(.is-read),
.aboutPage .cycle__text.js-scroll-read.is-ready .scroll-read__char:not(.is-read) { opacity: .12; }


/* PHILOSOPHY（PC）：見出しが先に上がり、上から 15% で固定 → 右の本文が下から入ってスクロール */
@media screen and (min-width: 921px) {
  .aboutPage .philosophy__inner { align-items: start; }
  .aboutPage .philosophy__heading {
    position: sticky;
    top: 15vh;
    top: 15svh;
  }
  .aboutPage .philosophy__text {
    padding-top: 85vh;   /* 見出しが固定された時点で、本文の先頭が画面下端に来る */
    padding-top: 85svh;
  }
  /* 文字が見出しの固定位置で消えるのと同時に写真の固定を外す */
  .aboutPage .philosophy__inner { padding-bottom: 85vh; padding-bottom: 85svh; }
  /* --fade-line：見出しの固定位置（各要素の上端からの距離。page-motion.js が更新） */
  /* 本文：固定位置の 120px 下から薄くなり、固定位置で完全に消える */
  .aboutPage.is-motion .philosophy__text {
    -webkit-mask-image: linear-gradient(to bottom, transparent var(--fade-line, -200px), #000 calc(var(--fade-line, -200px) + 120px));
            mask-image: linear-gradient(to bottom, transparent var(--fade-line, -200px), #000 calc(var(--fade-line, -200px) + 120px));
  }
  /* 見出し：固定が外れて上へ流れるときに 60px かけて消える */
  .aboutPage.is-motion .philosophy__heading {
    -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--fade-line, -100px) - 60px), #000 var(--fade-line, -100px));
            mask-image: linear-gradient(to bottom, transparent calc(var(--fade-line, -100px) - 60px), #000 var(--fade-line, -100px));
  }
}
/* MV直下の導入文：読む前の不透明度をさらに低く */
.aboutPage .intro__inner.js-scroll-read.is-ready .scroll-read__char:not(.is-read),
.aboutPage .material__lead.js-scroll-read.is-ready .scroll-read__char:not(.is-read),
.aboutPage .history__lead.js-scroll-read.is-ready .scroll-read__char:not(.is-read) { opacity: .12; }
/* MV：見せたい部分（ハンマーとノミを持つ手）が幅に関わらず画面に残るよう、基準位置を指定 */
/* 上端を基準に配置（下は切れてよい）。PC：mv.webp（1243×2103）／Mobile：mv_sp.webp（800×1630） */
.aboutPage .mv picture { display: contents; }
.aboutPage .mv__photo { object-position: center top; transform-origin: center top; }
/* PHILOSOPHY：固定されたら、上下をぼかした画像からボケなし画像（philosophy-sharp.jpg）へ切り替え */
.aboutPage .philosophy__photo::before { z-index: 1; }
.aboutPage .philosophy__photo .philosophy__sharp {
  position: absolute;
  inset: 0;
  width: 100%;
  object-fit: cover;
}
.aboutPage.is-motion .philosophy__photo.is-visible .philosophy__sharp {
  opacity: 0;
  transition: scale 4s cubic-bezier(.2, .6, .3, 1), opacity .8s ease;
}
/* ボケなし画像への切り替えは停止中（戻す場合はこの行を有効に） */
/* .aboutPage.is-motion .philosophy__photo.is-visible.is-pinned .philosophy__sharp { opacity: 1; } */
.aboutPage:not(.is-motion) .philosophy__sharp { display: none; }
.aboutPage .philosophy__photo picture { display: contents; }
/* PC 用画像（1243×1138）：上部のボケを残しつつ、椅子の座面まで見える位置 */
.aboutPage .philosophy__photo img { object-position: center 35%; }
@media screen and (max-width: 768px) {
  /* Mobile 用画像（800×1717）：上端基準。上部の透過は黒背景に溶ける */
  .aboutPage .philosophy__photo img { object-position: center top; }
}

/* PHILOSOPHY：上端の黒グラデーションがボケなし画像の上部を隠していたため、固定されたら消す */
.aboutPage.is-motion .philosophy__photo::before { transition: opacity .8s ease; }
/* .aboutPage.is-motion .philosophy__photo.is-visible.is-pinned::before { opacity: 0; } */
/* MATERIAL・CRAFT・COMMUNITY（Mobile）：PC と同じく写真と文章を横並びに */
@media screen and (max-width: 768px) {
  .aboutPage :is(.material, .people) .media { grid-template-columns: minmax(0, 50fr) minmax(0, 50fr); }
  .aboutPage :is(.material, .people) .media--reverse .media__photo { order: 2; }
  .aboutPage :is(.material, .people) .media__photo img,
  .aboutPage :is(.material, .people) .media--reverse .media__photo img {
    min-height: 190px;
    aspect-ratio: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .aboutPage :is(.material, .people) .media__body { gap: 8px; padding: 16px 10px 16px 0; }
  .aboutPage :is(.material, .people) .media--reverse .media__body { margin-right: -26px; padding: 16px 0 16px 10px; }
  .aboutPage :is(.material, .people) .heading--sub { --en-size: 10px; --ja-size: 18px; gap: 6px; }
  .aboutPage :is(.material, .people) .media__text { font-size: 13px; line-height: 1.8; letter-spacing: .04em; }
  .aboutPage :is(.material, .people) .media__text br { display: none; }
}
/* MATERIAL・CRAFT・COMMUNITY（Mobile）：文章側の端をぼかす／TEAK は椅子を中心に */
@media screen and (max-width: 768px) {
  .aboutPage :is(.material, .people) .media__photo img {
    -webkit-mask-image: linear-gradient(to right, #000 60%, transparent);
            mask-image: linear-gradient(to right, #000 60%, transparent);
  }
  .aboutPage :is(.material, .people) .media--reverse .media__photo img {
    -webkit-mask-image: linear-gradient(to left, #000 60%, transparent);
            mask-image: linear-gradient(to left, #000 60%, transparent);
  }
  .aboutPage :is(.material, .people) .media--teak .media__photo img { object-position: 64% center; }
}
/* MATERIAL・CRAFT・COMMUNITY（Mobile）：写真の幅を 60% に */
@media screen and (max-width: 768px) {
  .aboutPage :is(.material, .people) .media { grid-template-columns: minmax(0, 60fr) minmax(0, 40fr); }
  .aboutPage :is(.material, .people) .media--reverse { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); }
}
/* MATERIAL・CRAFT・COMMUNITY（Mobile）：写真 60% を敷き、文章を写真のぼかし部分に重ねる */
@media screen and (max-width: 768px) {
  .aboutPage :is(.material, .people) .media,
  .aboutPage :is(.material, .people) .media--reverse { grid-template-columns: minmax(0, 1fr); align-items: center; }
  .aboutPage :is(.material, .people) .media__photo,
  .aboutPage :is(.material, .people) .media__body { grid-area: 1 / 1; }
  .aboutPage :is(.material, .people) .media__photo { width: 60%; justify-self: start; }
  .aboutPage :is(.material, .people) .media--reverse .media__photo { justify-self: end; }
  .aboutPage :is(.material, .people) .media__body,
  .aboutPage :is(.material, .people) .media--reverse .media__body {
    position: relative;
    z-index: 1;
    width: 54%;
    margin: 0;
    padding: 16px 0;
    justify-self: end;
  }
  .aboutPage :is(.material, .people) .media--reverse .media__body { justify-self: start; }
}
/* MATERIAL・CRAFT・COMMUNITY（Mobile）：文章の外側に余白 */
@media screen and (max-width: 768px) {
  .aboutPage :is(.material, .people) .media__body { padding: 16px 20px 16px 0; }
  .aboutPage :is(.material, .people) .media--reverse .media__body { padding: 16px 0 16px 20px; }
}
/* MATERIAL（〜425px）：TEAK の写真は右側をより見せる */
@media screen and (max-width: 425px) {
  .aboutPage .material .media--teak .media__photo img { object-position: 85% center; }
  /* 文章の幅を 60% に、写真の文章側のぼかしを広めに */
  .aboutPage :is(.material, .people) .media__body,
  .aboutPage :is(.material, .people) .media--reverse .media__body { width: 60%; }
  .aboutPage :is(.material, .people) .media__photo img {
    -webkit-mask-image: linear-gradient(to right, #000 40%, transparent);
            mask-image: linear-gradient(to right, #000 40%, transparent);
  }
  .aboutPage :is(.material, .people) .media--reverse .media__photo img {
    -webkit-mask-image: linear-gradient(to left, #000 40%, transparent);
            mask-image: linear-gradient(to left, #000 40%, transparent);
  }
}
/* HISTORY：年の丸が色付くと同時に、タイトルが下からふわっと表示 */
.aboutPage.is-motion .history__title {
  opacity: 0;
  translate: 0 20px;
  transition: opacity .8s ease, translate .8s cubic-bezier(.22, 1, .36, 1);
}
.aboutPage.is-motion .history__year.is-active ~ .history__body .history__title { opacity: 1; translate: 0 0; }
/* MESSAGE：写真が下からふわっと表示 */
.aboutPage.is-motion .message__photo {
  opacity: 0;
  translate: 0 30px;
  transition: opacity 1.2s ease, translate 1.2s cubic-bezier(.22, 1, .36, 1);
}
.aboutPage.is-motion .message__photo.is-visible { opacity: 1; translate: 0 0; }
/* PHILOSOPHY：本文に黒の光彩（外側のぼかし）をつけて読みやすく */
.aboutPage .philosophy__text { text-shadow: 0 0 10px rgba(0, 0, 0, .6), 0 0 2px rgba(0, 0, 0, .4); }
/* MATERIAL：セクションが画面いっぱいになると同時に見出しが固定位置に到着
   → 少しスクロールしてからリード文が下から入る → 画面下 1/3 から明るくなる
   → 見出しの下（--fade-line）で消える。見出しはリード文が消えきるまで固定 */
.aboutPage.is-motion .material { padding-top: 0; }
.aboutPage.is-motion .material__pin > .material__stage {   /* 背景の上端が画面上端に着いた時、見出しは固定位置の 100px 下にある → 100px スクロールして固定 */
  padding-top: calc(18vh + 20px);
  padding-top: calc(18svh + 20px);
}
.aboutPage.is-motion .material__head > .heading {
  position: sticky;
  top: calc(18vh - 80px);
  top: calc(18svh - 80px);
  z-index: 1;
}
.aboutPage.is-motion .material__lead {
  padding-top: 85vh;   /* 見出しが固定されてから、この分スクロールするとリード文が画面下端から入る */
  padding-top: 85svh;
  -webkit-mask-image: linear-gradient(to bottom, transparent var(--fade-line, -200px), #000 calc(var(--fade-line, -200px) + 120px));
          mask-image: linear-gradient(to bottom, transparent var(--fade-line, -200px), #000 calc(var(--fade-line, -200px) + 120px));
}
/* MATERIAL：最後の行「長く使える家具へと形にしています。」が消えかけたら見出しの固定を解除 */
.aboutPage.is-motion .material__lead { margin-bottom: 30vh; margin-bottom: 30svh; }   /* リード文の後、RATTAN が入るまでの間 */
/* MATERIAL・PHILOSOPHY：リード文の行間を広く */
.aboutPage .material__lead,
.aboutPage .philosophy__text,
.aboutPage .sustainability__text,
.aboutPage .cycle__text { line-height: 3.5; }
/* SUSTAINABILITY：MATERIAL と同じ動き。セクションが画面いっぱいになると見出しが固定
   → リード文が下から入り、画面の 90% の位置で明るくなる → 見出しの下で消える → 見出しの固定解除 */
.aboutPage.is-motion .sustainability { padding-top: 0; padding-bottom: 0; overflow: clip; }   /* hidden だと sticky が効かないため clip */
.aboutPage.is-motion .sustainability__inner { padding-top: 50vh; padding-top: 50svh; padding-bottom: calc(30vh + 40px); padding-bottom: calc(30svh + 40px); }
.aboutPage.is-motion .sustainability__heading {
  position: sticky;
  top: calc(18vh - 80px);
  top: calc(18svh - 80px);
  z-index: 1;
}
.aboutPage.is-motion .sustainability__text {
  margin-top: 0;
  margin-bottom: 80px;   /* 最後の行「これからも持続可能なものづくりを続けていきます。」が消えきってから固定解除 */
  padding-top: 85vh;
  padding-top: 85svh;
  -webkit-mask-image: linear-gradient(to bottom, transparent var(--fade-line, -200px), #000 calc(var(--fade-line, -200px) + 120px));
          mask-image: linear-gradient(to bottom, transparent var(--fade-line, -200px), #000 calc(var(--fade-line, -200px) + 120px));
}
/* 写真は右側に画面いっぱい（100vh）で固定し、その上を文字が流れる（全画面幅） */
.aboutPage.is-motion .sustainability__photo {
  position: sticky;
  display: block;
  margin-left: auto;
  height: 100vh;
  height: 100lvh;   /* svh だとスマホでバーが縮んだ時に下に隙間ができるため lvh */
  margin-bottom: -100vh;
  margin-bottom: -100lvh;
}
/* CYCLE（私たちの考えるサスティナビリティ）：SUSTAINABILITY と同じ動き */
.aboutPage.is-motion .cycle { padding-top: 0; padding-bottom: 0; }
.aboutPage.is-motion .cycle__inner { padding-top: 50vh; padding-top: 50svh; padding-bottom: calc(30vh - 80px); padding-bottom: calc(30svh - 80px); }
.aboutPage.is-motion .cycle__heading {
  position: sticky;
  top: calc(18vh - 80px);
  top: calc(18svh - 80px);
  z-index: 1;
}
.aboutPage.is-motion .cycle__body {
  margin-top: 0;
  margin-bottom: 80px;   /* 最後の行「それが、私たちの考えるサスティナビリティです。」が消えきってから見出しの固定を解除 */
  padding-top: 85vh;
  padding-top: 85svh;
}
/* 本文は見出しの下でぼかして消し、循環図はぼかさずに同じ線で消す（--fade-line は page-motion.js が各要素に渡す） */
.aboutPage.is-motion .cycle__text {
  -webkit-mask-image: linear-gradient(to bottom, transparent var(--fade-line, -200px), #000 calc(var(--fade-line, -200px) + 120px));
          mask-image: linear-gradient(to bottom, transparent var(--fade-line, -200px), #000 calc(var(--fade-line, -200px) + 120px));
}
.aboutPage.is-motion .cycle__diagram {
  -webkit-mask-image: linear-gradient(to bottom, transparent var(--fade-line, -200px), #000 calc(var(--fade-line, -200px) + 1px));
          mask-image: linear-gradient(to bottom, transparent var(--fade-line, -200px), #000 calc(var(--fade-line, -200px) + 1px));
}
/* PC：循環図は文章を読んでいる間、右側に止めておく */
@media screen and (min-width: 921px) {
  .aboutPage.is-motion .cycle__diagram { position: sticky; top: 36vh; top: 36svh; align-self: start; }
  /* 循環図は本文を待たず、見出しのすぐ後に入る（見出しより 60px 遅れて到着） */
  /* 循環図は見出しのすぐ後に入り、止まってからのスクロールでアイコン・矢印が順に表示。
     矢印が出きってから本文が画面下から入る（本文の手前の余白を 145vh に延長） */
  .aboutPage.is-motion .cycle__body { padding-top: 145vh; padding-top: 145svh; }
  .aboutPage.is-motion .cycle__diagram { margin-top: calc(-145vh + 60px); margin-top: calc(-145svh + 60px); }
  .aboutPage.is-motion .cycle__diagram.is-scrub .cycle__item,
  .aboutPage.is-motion .cycle__diagram.is-scrub .cycle__arrow-line,
  .aboutPage.is-motion .cycle__diagram.is-scrub .cycle__arrow-head { transition-delay: 0s !important; }
  .aboutPage.is-motion .cycle__diagram.is-scrub.is-visible .cycle__item:not(.is-on) { opacity: 0; translate: 0 16px; }
  .aboutPage.is-motion .cycle__diagram.is-scrub.is-visible .cycle__arrow-line:not(.is-on) { stroke-dashoffset: 1; }
  .aboutPage.is-motion .cycle__diagram.is-scrub.is-visible .cycle__arrow-head:not(.is-on) { opacity: 0; }
  /* 固定の長さと下の余白は page-motion.js で計算。循環図は本文と同じ高さで消える */
  .aboutPage.is-motion .cycle__diagram {   /* 消える線でぼかさずに消す（止まっている間に上端がぼけないように） */
    -webkit-mask-image: linear-gradient(to bottom, transparent var(--fade-line, -200px), #000 calc(var(--fade-line, -200px) + 1px));
            mask-image: linear-gradient(to bottom, transparent var(--fade-line, -200px), #000 calc(var(--fade-line, -200px) + 1px));
  }
  /* PC は本文だけを見出しの下で消す（循環図は本文が消えてから page-motion.js で徐々に消す） */
  .aboutPage.is-motion .cycle__body { -webkit-mask-image: none; mask-image: none; }
  .aboutPage.is-motion .cycle__text {
    -webkit-mask-image: linear-gradient(to bottom, transparent var(--fade-line, -200px), #000 calc(var(--fade-line, -200px) + 120px));
            mask-image: linear-gradient(to bottom, transparent var(--fade-line, -200px), #000 calc(var(--fade-line, -200px) + 120px));
  }
}
/* MATERIAL・SUSTAINABILITY・CYCLE：背景が画面いっぱいになった時点で見出しは画面の真ん中。そこから上がってきて固定位置に着く
   （各 inner の padding-top: 50vh。20px を増やすと見出しが入ってくるのが遅くなる） */
/* 行間を広く取っているリード文：段落の間（改行の高さ）を 1.5 倍に */
.aboutPage .philosophy__text { gap: 60px; }
.aboutPage .material__lead { gap: 54px; }
.aboutPage .sustainability__text { gap: 54px; }
.aboutPage .cycle__text { gap: 51px; }
@media screen and (max-width: 425px) {
  .aboutPage .sustainability__text,
  .aboutPage .cycle__text { gap: 36px; }
}
/* CRAFT・COMMUNITY：「私たちの考えるサスティナビリティ」の見出しの下を流れ、見出しの下で消える */
/* 見出しの固定は本文・循環図の後まで。CRAFT が見出しの下（PC 60px／768px 以下 30px）に当たったら一緒に上へ流れる */
.aboutPage.is-motion .cycle__head { display: flow-root; }
.aboutPage.is-motion .cycle .people { margin-top: 60px; }
@media screen and (max-width: 768px) {
  .aboutPage.is-motion .cycle .people { margin-top: 30px; }
}
.aboutPage .cycle__heading { position: relative; z-index: 1; }
/* MATERIAL：RATTAN〜締めの一文まで見出しを固定。見出しの下でぼかさず消し、締めの一文が抜けたら固定解除、すぐ SUSTAINABILITY */
.aboutPage.is-motion .material { padding-bottom: 200px; }   /* 締めの一文の下の余白 */
/* 見出しの固定はリード文の後まで。RATTAN が見出しの下（PC 60px／768px 以下 30px）に当たったら一緒に上へ流れる */
.aboutPage.is-motion .material__head { display: flow-root; }
.aboutPage.is-motion .material .media-list { margin-top: 60px; }
@media screen and (max-width: 768px) {
  .aboutPage.is-motion .material .media-list { margin-top: 30px; }
}
.aboutPage.is-motion .material__closing { margin-bottom: 0; padding-bottom: 0; }
/* 768px 以下だけで改行 */
.aboutPage .br-tab { display: none; }
@media screen and (max-width: 768px) { .aboutPage .br-tab { display: inline; } }
/* PHILOSOPHY（920px 以下）：PC と同じ仕様。見出しを画面上部で固定し、本文が下から入って見出しの下で消える
   → 本文が消えきったら見出しと写真の固定を解除（下の余白は page-motion.js で計算） */
@media screen and (max-width: 920px) {
  .aboutPage.is-motion .philosophy__inner { align-items: start; }
  .aboutPage.is-motion .philosophy__heading {
    position: sticky;
    top: 8vh;
    top: 8svh;
    z-index: 1;
  }
  .aboutPage.is-motion .philosophy__text {
    padding-top: 60vh;   /* 見出しが固定されてから、この分スクロールすると本文が画面下端から入る */
    padding-top: 60svh;
    -webkit-mask-image: linear-gradient(to bottom, transparent var(--fade-line, -200px), #000 calc(var(--fade-line, -200px) + 120px));
            mask-image: linear-gradient(to bottom, transparent var(--fade-line, -200px), #000 calc(var(--fade-line, -200px) + 120px));
  }
}
/* MATERIAL（768px 以下）：リード文の下、RATTAN までの余白 */
@media screen and (max-width: 768px) {
  .aboutPage.is-motion .material__lead { margin-bottom: 50px; }
}
/* 768px 以下：余白と SUSTAINABILITY の固定 */
@media screen and (max-width: 768px) {
  .aboutPage.is-motion .material { padding-bottom: 100px; }                  /* 締めの一文の下 */
  .aboutPage.is-motion .cycle__inner { padding-top: 50px; }                  /* 見出しの上 */
  .aboutPage.is-motion .material__pin > .material__stage { padding-top: 50px; }   /* CYCLE と同じ */
}
/* 導入文（768px 以下）：MV の下 100px から始める（画面の上下中央ではなく上寄せ） */
@media screen and (max-width: 768px) {
  .aboutPage.is-motion .intro__inner { justify-content: flex-start; padding-top: 100px; }
  .aboutPage .intro__inner { padding-top: 100px; }
}


/* 920px 以下 */
@media screen and (max-width: 920px) {
  .aboutPage .inner {
    padding-top: 0px;
  }
}
/* 425px 以下 */
@media screen and (max-width: 425px) {
  .aboutPage .inner {
    padding-left: 20px;
  }
  .aboutPage.is-motion .material__head > .heading {
    top: calc(18svh - 100px);
  }
  .aboutPage.is-motion .material__pin > .material__stage {
    padding-top: 30px;   /* CYCLE（私たちの考えるサスティナビリティ）と同じ */
  }
  .aboutPage.is-motion .material__closing {
    padding-bottom: 50px;
  }
}
@media screen and (max-width: 425px) {
  .aboutPage.is-motion .cycle__inner {
    padding-top: 30px;
  }
}
/* 425px 以下：リード文・本文を 15px に */
@media screen and (max-width: 425px) {
  .aboutPage .intro__inner,
  .aboutPage .philosophy__text,
  .aboutPage .material__lead,
  .aboutPage .history__lead,
  .aboutPage .message__text,
  .aboutPage .sustainability__text,
  .aboutPage .cycle__text { font-size: 15px; }
  .aboutPage .cycle__heading { --ja-size: 22px; }
}