@charset "UTF-8";

/* ============================================================
   Design Tokens（Figmaデザインより抽出）
   ============================================================ */
:root {
  --green: #1f4d3a; /* メインカラー */
  --green-grad-end: #40623d; /* ヘッダーグラデ終点 */
  --green-dark: #16392c; /* フッター背景 */
  --green-name: #123a2b; /* Hero氏名 */
  --pink: #d94368; /* リボングラデ始点 */
  --pink-end: #f5cf8b; /* リボングラデ終点 */
  --ink: #333333; /* 見出し濃グレー */
  --line: #c9dbd4; /* 区切り線（薄緑） */
  --line-strong: #91b1a0; /* Message縦線 */
  --cream: #faf8f2; /* カード背景（生成り） */
  --paper: #f6f3ea; /* メッセージ〜政策セクション背景 */
  --activity-bg: #f4f6f1; /* 活動報告セクション背景 */
  --white: #ffffff;

  --font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;

  --content: 1200px; /* PCコンテンツ幅 */
}

/* ============================================================
   Base
   ============================================================ */
body {
  font-family: var(--font-base);
  color: var(--ink);
  background: var(--white);
  font-weight: 500;
}

img {
  display: block;
}

.l-container {
  width: 100%;
  max-width: var(--content);
  margin-inline: auto;
  padding-inline: 20px;
}

/* 共通：セクション見出し */
.sec-title {
  font-weight: 700;
  color: var(--ink);
  font-size: 44px;
  line-height: 1.68;
  letter-spacing: 0.04em;
  text-align: center;
}
.sec-title--green {
  color: var(--green);
}
.sec-lead {
  font-weight: 700;
  color: var(--ink);
  font-size: 21px;
  line-height: 1.68;
  letter-spacing: 0.04em;
  text-align: center;
}
.sec-lead--green {
  color: var(--green);
  line-height: 1.5;
}

/* 共通：リボン（ピンクグラデの見出しラベル） */
.ribbon {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 1200px;
  height: 60px;
  border-radius: 4px;
  background-image: linear-gradient(174.75deg, var(--pink) 15.7%, var(--pink-end) 131.8%);
  color: var(--white);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: 0.04em;
  line-height: 1.68;
}

/* 共通：ボタン */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding-inline: 40px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 16px;
  text-align: center;
  white-space: nowrap; /* ボタン文字を折り返さない */
  transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn--fill {
  background: var(--green);
  color: var(--white);
}
.btn--fill:hover {
  opacity: 0.88;
}
.btn--outline {
  background: var(--paper);
  color: var(--green);
  border: 2px solid var(--green);
}
.btn--outline:hover {
  background: var(--green);
  color: var(--white);
}

/* 共通：SNSアイコン群 */
.sns {
  display: flex;
  align-items: center;
  gap: 20px;
}
.sns li {
  flex-shrink: 0;
}
.sns img {
  width: 52px;
  height: 52px;
  max-width: none; /* reset.cssのmax-width:100%による圧縮を無効化 */
  flex-shrink: 0;
}
.sns a {
  display: block;
  transition: opacity 0.2s ease;
}
.sns a:hover {
  opacity: 0.7;
}

/* ============================================================
   グローバルヘッダー
   ============================================================ */
.gnav {
  position: fixed; /* スクロールしても常に表示／Heroに重ねる（場所を取らない） */
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  /* フォールバック：backdrop-filter非対応時は不透明寄りの白 */
  background-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
  padding-top: env(safe-area-inset-top); /* ノッチ/ステータスバー対応 */
}
/* すりガラス効果（半透明＋背景ぼかし） */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gnav {
    background-color: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
  }
}
.gnav__inner {
  max-width: 1440px;
  min-height: 72px;
  margin-inline: auto;
  padding-block: 0;
  padding-left: max(40px, env(safe-area-inset-left));
  padding-right: max(40px, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.gnav__id {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.gnav__name {
  display: block;
  color: var(--green);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  white-space: nowrap;
}
/* 白背景に合わせ、ヘッダーのSNSアイコンはグリーンへ色変え（maskで塗り替え） */
.gnav .sns img {
  display: none;
}
.gnav .sns a {
  display: block;
  width: 52px;
  height: 52px;
  background-color: var(--green);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.gnav .sns li:nth-child(1) a {
  -webkit-mask-image: url("../img/icon-youtube.svg");
  mask-image: url("../img/icon-youtube.svg");
}
.gnav .sns li:nth-child(2) a {
  -webkit-mask-image: url("../img/icon-line.svg");
  mask-image: url("../img/icon-line.svg");
}
.gnav .sns li:nth-child(3) a {
  -webkit-mask-image: url("../img/icon-instagram.svg");
  mask-image: url("../img/icon-instagram.svg");
}
/* fixedヘッダー分のアンカーオフセット */
#policy,
#profile,
#support {
  scroll-margin-top: 88px;
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  background: var(--white);
}
.hero__stage {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  aspect-ratio: 1440 / 900; /* Figmaフル寸法 */
  container-type: inline-size;
  overflow: hidden;
}
/* 背景ブラシ: x-21 y70 w1482 h833 */
.hero__bg {
  position: absolute;
  left: -1.46%;
  top: 7.78%;
  width: 102.9%;
  height: 92.6%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}
/* 人物: x-50 y124 w866 h839（下端はみ出しクリップ） */
.hero__chara {
  position: absolute;
  left: -3.47%;
  top: 13.78%;
  width: 60.1%;
  height: auto;
  object-fit: contain;
  object-position: bottom;
  pointer-events: none;
}
/* ポスター group: x624 y223 w889 */
.hero__poster {
  position: absolute;
  left: 43.3%;
  top: 24.8%;
  width: 61.7%;
  aspect-ratio: 889.089 / 332.414;
}
.hero__poster-img {
  width: 100%;
  height: 100%;
}
.hero__name {
  position: absolute;
  left: 50.9%; /* 733/1440 */
  top: 64.9%; /* 584/900 */
  display: flex;
  align-items: flex-end;
  justify-content: flex-end; /* 氏名・ふりがなを右寄せし、kana右端をボックス右端(81.2%)に揃える */
  gap: 2cqw;
  padding-bottom: 1cqw;
  width: 30.3%; /* 437/1440 */
}
/* 氏名下のライン。右端は氏名ブロック右端に合わせ、左は人物写真の背面まで伸ばす
   （hero__chara より前面に描画されるよう DOM上で写真の手前に配置） */
.hero__nameline {
  position: absolute;
  right: 18.8%; /* 100% - (50.9% + 30.3%) = 氏名ブロック右端 */
  left: 30%; /* 人物写真の背面まで延長（写真が前面で重なり部分を覆う） */
  top: 73%;
  height: 2px;
  background: var(--green);
  pointer-events: none;
}
.hero__name-main {
  color: var(--green-name);
  font-weight: 500;
  font-size: 2.78cqw; /* 40/1440 */
  letter-spacing: 0.28em;
  white-space: nowrap;
}
.hero__name-kana {
  color: var(--green-name);
  font-weight: 500;
  font-size: 1.4cqw; /* 20/1440 */
  letter-spacing: 0.08em;
  white-space: nowrap;
  padding-bottom: 0.3cqw;
}
.hero__actions {
  position: absolute;
  right: 18.8%; /* 右端を nameline・kana と揃える（81.2%） */
  top: 80%; /* 720/900 */
  display: flex;
  flex-direction: column;
  gap: 1.74cqw; /* 25/1440。stage幅に比例 */
}
/* ボタンは stage 幅基準(cqw)で拡縮。1440時に現状サイズ（260×56・16px・余白40）になり、
   画面が小さくなると比例縮小して message セクションへ食い込まない */
.hero__actions .btn {
  width: 18.06cqw; /* 260/1440 */
  height: 3.89cqw; /* 56/1440 */
  padding-inline: 2.78cqw; /* 40/1440 */
  font-size: 1.11cqw; /* 16/1440 */
}

/* ============================================================
   Message
   ============================================================ */
.message {
  padding: 80px 20px;
  background: var(--paper);
}
.message__inner {
  max-width: var(--content);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  /* 1行目=タイトル、2行目=本文。3本柱を2行目に置き本文の上下に揃える */
  grid-template-rows: auto 1fr;
  column-gap: 80px;
  row-gap: 0;
  align-items: start;
}
/* ラッパは display:contents でタイトル/本文を直接グリッドアイテム化 */
.message__lead {
  display: contents;
}
.message__title {
  grid-column: 1;
  grid-row: 1;
}
.message__text {
  grid-column: 1;
  grid-row: 2;
}
.message__title {
  font-weight: 700;
  font-size: 44px;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 20px;
}
.message__text {
  position: relative;
  padding-left: 50px;
  font-weight: 500;
  font-size: 21px;
  line-height: 1.8;
  color: var(--ink);
}
.message__text::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 6px;
  bottom: 6px;
  width: 6px;
  background: var(--line-strong);
}
.pillars {
  width: 450px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* 本文（2行目）と同じ行に置き、本文の高さいっぱいに上下均等配置 */
  grid-column: 2;
  grid-row: 2;
  align-self: stretch;
  justify-content: space-between;
}
.pillars__head {
  font-weight: 700;
  font-size: 36px;
  color: var(--ink);
  text-align: center;
}
.pillars__card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  height: 152px;
  background: var(--white);
  border-radius: 8px;
}
.pillars__num {
  width: 60px;
  text-align: center;
  font-weight: 700;
  font-size: 36px;
  color: var(--green);
  border-right: 2px solid rgba(31, 77, 58, 0.2);
  padding-right: 22px;
}
.pillars__label {
  width: 200px;
  text-align: center;
  font-weight: 700;
  font-size: 36px;
  color: var(--green);
  letter-spacing: 0.1em;
}

/* ============================================================
   政策（Policy）
   ============================================================ */
.policy {
  padding: 70px 20px 110px;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.policy__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: var(--content);
}
.policy__intro {
  font-weight: 500;
  font-size: 21px;
  line-height: 1.68;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-align: center;
}
.policy-card {
  width: 100%;
  max-width: var(--content);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.policy-card__bar {
  height: 50px;
  background: var(--green);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 500;
}
.policy-card__bar strong {
  font-weight: 700;
  font-size: 20px;
  margin-left: 8px;
}
.policy-card__body {
  display: flex;
  gap: 20px;
  align-items: center;
  background: var(--white);
  padding: 60px 20px 20px 48px;
}
.policy-card__visual {
  position: relative;
  flex-shrink: 0;
  width: 420px;
  height: 420px;
  border-radius: 6px;
  overflow: hidden;
}
.policy-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.policy-card__visual::after {
  /* 写真下部の白フェード */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 34%,
    rgba(255, 255, 255, 0.2) 64%,
    rgba(255, 255, 255, 0.92) 86%
  );
  pointer-events: none;
}
.policy-card__visual-text {
  position: absolute;
  left: 34px;
  bottom: 20px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}
.policy-card__letter {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
}
.policy-card__cat {
  font-weight: 700;
  font-size: 44px;
  color: var(--green);
  letter-spacing: 0.12em;
  -webkit-text-stroke: 5px #fff;
  paint-order: stroke fill; /* アウトラインを塗りの背面に */
}
.policy-card__catlead {
  font-weight: 500;
  font-size: 22px;
  color: var(--green);
  line-height: 1.3;
  margin-top: 4px;
  -webkit-text-stroke: 5px #fff;
  paint-order: stroke fill;
}
.policy-card__text {
  flex: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: center;
  column-gap: 20px;
  row-gap: 22px;
  padding: 0 13px 10px;
}
.policy-card__lead-icon {
  width: 38px;
  height: 38px;
  align-self: center;
}
.policy-card__rule {
  align-self: center;
  height: 3px;
  background: var(--line);
}
.policy-card__lead {
  grid-column: 2;
  font-weight: 500;
  font-size: 21px;
  color: var(--green);
  letter-spacing: 0.04em;
  line-height: 1.9;
}
.policy-block__title {
  display: flex;
  align-items: center;
  gap: 16px;
  font-weight: 700;
  font-size: 24px;
  color: var(--green);
  margin-bottom: 4px;
}
.policy-block__title img {
  width: 38px;
  height: 38px;
}
.policy-block__list {
  font-weight: 500;
  font-size: 21px;
  color: var(--green);
  letter-spacing: 0.04em;
  line-height: 1.68;
}
.policy-block__list--measure {
  font-size: 22px;
  line-height: 2;
  letter-spacing: 0.04em;
}
.policy-block__rule {
  display: block;
  width: 581px;
  max-width: 100%;
  height: 3px;
  background: var(--line);
  margin: 6px 0;
}

/* ============================================================
   プロフィール
   ============================================================ */
.profile {
  background: var(--white);
  padding: 60px 20px;
}
.profile__inner {
  max-width: var(--content);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.profile__head {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.profile__lead {
  font-weight: 500;
  font-size: 24px;
  color: var(--green);
  line-height: 1.68;
  letter-spacing: 0.04em;
}
/* 1440px基準の広い画面でだけ2行目を1行に固定。
   行の必要幅(約1300px)に満たない幅では通常折り返しにして横スクロールを防ぐ */
@media (min-width: 1320px) {
  .profile__lead-nowrap {
    white-space: nowrap;
  }
}
.profile__row {
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: 40px;
  align-items: center;
}
.profile__row--reverse {
  grid-template-columns: 1fr 426px;
}
.profile__row--reverse .profile__photo {
  order: 2;
}
.profile__photo {
  border-radius: 40px;
  overflow: hidden;
}
.profile__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.profile__photo--1 {
  height: 433px;
}
.profile__photo--2 {
  height: 542px;
}
.profile__panel {
  background: var(--cream);
  border-radius: 8px;
  padding: 40px 50px;
}
.profile__title {
  display: flex;
  align-items: center;
  gap: 16px;
  font-weight: 700;
  font-size: 24px;
  color: var(--green);
}
.profile__title--right {
  justify-content: flex-end;
}
.profile__title img {
  width: 38px;
  height: 38px;
}
.profile__rule {
  display: block;
  width: 100%;
  height: 3px;
  background: var(--line);
  margin: 12px 0;
}
.profile__body {
  font-weight: 500;
  font-size: 24px;
  color: var(--green);
  line-height: 2;
  letter-spacing: 0.04em;
  padding-left: 32px;
}
.profile__body--right {
  text-align: right;
  padding-left: 0;
  line-height: 1.8;
  margin-bottom: 8px;
}
.hobby {
  text-align: right;
}
.hobby dt {
  font-weight: 500;
  font-size: 24px;
  color: var(--green);
  line-height: 1.8;
  margin-top: 16px;
}
.hobby dd {
  font-weight: 500;
  font-size: 20px;
  color: var(--green);
  line-height: 1.8;
  letter-spacing: 0.04em;
}

/* ============================================================
   活動報告
   ============================================================ */
.activity {
  background: var(--paper);
  padding: 53px 20px 80px;
  overflow: hidden;
}
.activity__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  max-width: var(--content);
  margin: 0 auto 40px;
}
.activity__head .sec-title {
  font-size: 37px;
  letter-spacing: 0.01em;
  margin-top: 12px;
}
.activity__head .sec-lead {
  line-height: 1.5;
}
.feed {
  max-width: 1240px;
  margin-inline: auto;
}
.feed + .feed {
  margin-top: 48px;
}
.feed__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  font-size: 24px;
  color: var(--ink);
  margin-bottom: 20px;
}
.feed__label img {
  width: 34px;
  height: 34px;
}
.feed__label--note {
  font-size: 28px;
  letter-spacing: 0.02em;
}
/* note はロゴ画像。横長ワードマークなので高さ基準でサイズ指定 */
.feed__label--note img {
  width: auto;
  height: 30px;
}
.feed__dots {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 24px;
}
.feed__dots button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #c4c4c4;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease;
}
.feed__dots button[aria-current="true"] {
  background: var(--green);
}
.activity__cards {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* トラックを画面幅いっぱい(100vw)に広げ、両隣カードを画面端まで見せる（.feedの1240枠で切らない）
     .activityのoverflow:hiddenで画面端クリップ＝横スクロールは出ない */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* 左右に「(画面幅-カード幅)/2」の余白を取り、選択カードを画面中央に（カード480の半分=240）
     ※paddingの%は包含ブロック基準になるため画面基準の 50vw を使う */
  padding: 8px calc(50vw - 240px) 32px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab; /* PCでドラッグ移動できることを示す */
}
/* ドラッグ中はスナップを解除してスムーズに動かし、離すと最寄りカードへ吸着 */
.activity__cards.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}
.activity__cards::-webkit-scrollbar {
  display: none;
}
.act-card {
  position: relative;
  flex: 0 0 480px;
  scroll-snap-align: center;
  background: var(--white);
  border-radius: 12px;
  padding: 27px 30px;
  box-shadow: 0 12px 16px rgba(0, 0, 0, 0.12);
}
.act-card__title {
  font-weight: 700;
  font-size: 26px;
  color: var(--green);
  line-height: 1.8;
  margin-bottom: 6px;
}
/* note カードのタイトルは2行で打ち切り、超過分は末尾を「…」に */
[data-note-feed] .act-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.act-card__thumb {
  position: relative;
  display: block;
  height: 230px;
  background: #eee center / cover no-repeat;
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
}
.act-card__date {
  position: absolute;
  right: 12px;
  bottom: 10px;
  padding: 2px 10px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.85);
  font-weight: 700;
  font-size: 22px;
  color: var(--green);
}
.act-card__text {
  font-weight: 500;
  font-size: 16px;
  color: var(--green);
  line-height: 1.6;
  letter-spacing: -0.03em;
}
.act-card__sns {
  position: absolute;
  right: 30px;
  top: 42px;
  width: 60px;
  height: 60px;
}

/* ============================================================
   ご支援のお願い
   ============================================================ */
.support {
  position: relative;
  background: var(--white);
  overflow: hidden;
}
.support::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/support-bg.png") center top / cover no-repeat;
  opacity: 0.9;
}
.support::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.72) 33%,
    rgba(255, 255, 255, 0) 47%
  );
}
.support__inner {
  position: relative;
  z-index: 1;
  max-width: var(--content);
  margin-inline: auto;
  padding: 45px 20px 60px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.support__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.support__head .sec-title {
  font-size: 43px;
  margin-top: 12px;
}
.support__cards {
  display: flex;
  gap: 7px;
  justify-content: center;
  flex-wrap: wrap;
}
.sup-card {
  /* 3枚を1段に収める（コンテンツ幅1200px内・gap7px×2を差し引いて3等分） */
  width: calc((100% - 14px) / 3);
  max-width: 412px;
  min-height: 304px;
  background: var(--cream);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
  box-shadow: 0 12px 16px rgba(0, 0, 0, 0.12);
}
.sup-card__title {
  font-weight: 700;
  font-size: 36px;
  color: var(--green);
  line-height: 1.8;
  width: 100%;
  max-width: 350px;
  text-align: left;
}
.sup-card__text {
  width: 100%;
  max-width: 350px;
  font-weight: 500;
  font-size: 21px;
  color: var(--green);
  line-height: 1.5;
}
.sup-card .btn--fill {
  /* 300pxを上限に、カードが狭まるとテキストと同じ左右マージン（=padding分）で縮む */
  width: 100%;
  max-width: 300px;
  height: 68px;
  font-size: 20px;
}
.sup-card__sns {
  max-width: 364px;
}
.sns--btn {
  gap: 20px;
}
.sns--btn img {
  width: 36px;
  height: 36px;
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
  position: relative;
  background: var(--green-dark);
  overflow: hidden;
  padding: 35px 0 40px;
}
.footer__wave {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 1539px;
  max-width: none;
  height: auto;
  opacity: 0.5;
  pointer-events: none;
}
.footer__inner {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin-inline: auto;
  /* セーフエリア（左右60pxガター＝内容1200px）に合わせ、ribbon/policy-cardと左右を揃える */
  padding-inline: 60px;
  color: var(--white);
}
.footer__name {
  font-weight: 700;
  font-size: 36px;
  line-height: 1.8;
  display: flex;
  align-items: baseline;
  gap: 24px;
}
.footer__name span {
  font-weight: 500;
  font-size: 26px;
}
.footer__catch {
  font-weight: 500;
  font-size: 21px;
  line-height: 1.48;
  margin-top: 4px;
}
/* メールアドレス削除後も、SNSとコピーライトが重ならないよう元の高さ分を空けておくスペーサー */
.footer__contact {
  margin-top: 28px;
  /* 元のラベル＋メール2行分の高さを確保（中身は空） */
  height: 50px;
}
/* SNSは右側に右詰め（セーフエリア右端）。下端を footer__catch の下端に揃える
   （name 高さ＋catch 高さ ≒ 100px、SNS 高さ ≒ 52px → top:48px で下端100に一致）
   footer__innerのpadding-inline:60に合わせ right:60 */
.footer .sns {
  position: absolute;
  top: 48px;
  right: 60px;
  margin-top: 0;
}
/* 著作権表記は右下（セーフエリア右端） */
.footer__copy {
  position: absolute;
  right: 60px;
  bottom: 0;
  font-weight: 400;
  font-size: 15px;
}

/* ============================================================
   レスポンシブ（SP : 〜768px）
   ============================================================ */
@media screen and (max-width: 768px) {
  .l-container {
    padding-inline: 16px;
  }

  /* ---- 見出し共通 ---- */
  .sec-title {
    font-size: 22px;
  }
  .sec-lead {
    font-size: 13px;
  }
  .ribbon {
    height: 28px;
    font-size: 18px;
    /* 画面幅より広げ、角丸を画面外に追い出す（各セクションの overflow:hidden で左右をクリップ） */
    width: 106vw;
    max-width: none;
  }

  /* ---- ヘッダー（SP：サイズ調整／ノッチ対応。白背景・緑文字・緑アイコンは基底で指定）---- */
  .gnav__inner {
    min-height: 50px;
    padding-block: 8px;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .gnav__name {
    font-size: 15px;
  }
  .sns {
    gap: 10px;
  }
  .sns img {
    width: 30px;
    height: 30px;
  }
  .gnav .sns a {
    width: 28px;
    height: 28px;
  }

  /* ---- Hero（SP：高さを内容に合わせ480比率にして下部余白を除去）---- */
  .hero__stage {
    aspect-ratio: 375 / 480;
  }
  /* 背景ブラシ（緑→紫の対角が頭部背後に収まるよう配置）
     reset.css の img{max-width:100%} を解除しないと width が100%で頭打ちになる */
  .hero__bg {
    left: -4%;
    top: 7%;
    transform: none;
    width: 145%;
    max-width: none;
    height: auto;
  }
  /* 人物（頭がヘッダー直下に来るよう引き上げ） */
  .hero__chara {
    left: -13.3%;
    top: 12.1%;
    bottom: auto;
    width: 96.8%;
    height: auto;
  }
  /* ポスター（下端が stage 下端付近に来るよう配置／右にはみ出しクリップ） */
  .hero__poster {
    left: 13.6%;
    top: 65%;
    width: 110%;
  }
  /* 氏名 */
  .hero__name {
    left: 58.7%;
    top: 46%;
    width: auto;
    gap: 0;
    padding-bottom: 0;
    flex-direction: column;
    align-items: flex-start;
    border: none;
  }
  .hero__nameline {
    display: none; /* SPは氏名下のラインなし（既存仕様どおり） */
  }
  .hero__name-main {
    font-size: 5.3cqw; /* ≒20px / 375 */
    letter-spacing: 0.04em;
  }
  .hero__name-kana {
    font-size: 2.1cqw; /* デザインのふりがなは極小 */
    letter-spacing: 0.04em;
    padding-bottom: 0;
  }
  .hero__actions {
    display: none; /* SPデザインにはHeroボタンなし */
  }

  /* ---- Message ---- */
  .message {
    padding: 34px 37.5px; /* SPセーフエリア37.5 */
  }
  .message__inner {
    grid-template-columns: 1fr;
    grid-template-rows: none; /* PCの2行グリッドを解除 */
    gap: 30px;
  }
  .message__lead {
    display: block; /* SPはタイトル＋本文を1ブロックに戻して縦積み */
  }
  .message__title {
    font-size: 22px;
    margin-bottom: 12px;
  }
  .message__text {
    font-size: 15px;
    padding-left: 28px;
  }
  .message__text::before {
    left: 0; /* 縦棒の左端をセーフエリア(37.5)に合わせる */
    height: 100%;
    width: 6px;
  }
  .message__text br {
    display: none;
  }
  .pillars {
    width: 100%;
    grid-column: auto; /* PCの配置指定を解除 */
    grid-row: auto;
    align-self: auto;
    justify-content: flex-start;
  }
  .pillars__head {
    font-size: 20px;
  }
  .pillars__card {
    height: 88px;
    gap: 26px;
    justify-content: flex-start;
    padding-left: 6px;
  }
  .pillars__num {
    width: 60px;
    font-size: 30px;
  }
  .pillars__label {
    width: auto;
    font-size: 28px;
    text-align: left;
    letter-spacing: 0;
  }

  /* ---- 政策 ---- */
  .policy {
    /* カード枠は左右11.5pxガター（375時カード幅352px）。テキストは内側で37.5に揃える */
    padding: 20px 11.5px 40px;
    gap: 20px;
    overflow: hidden; /* 画面幅より広いribbonの左右はみ出しをクリップ */
  }
  .policy__intro {
    text-align: left;
    width: 100%; /* 中央寄せの親(align-items:center)内で左端に揃える */
    padding-inline: 26px; /* 11.5+26=37.5 でセーフエリアに揃える */
    font-size: 15px;
  }
  .policy-card__bar {
    display: none; /* SPでは三本柱ラベルのバーを非表示 */
  }
  .policy-card__body {
    flex-direction: column;
    align-items: stretch;
    padding: 10px 0; /* 画像は枠いっぱい。左右テキストの内側余白は text 側で確保 */
    gap: 10px;
  }
  .policy-card__visual {
    /* 写真クロップ幅はカード幅−18px（左右9pxマージン）。375時=352−18=334px。他幅でもマージン維持 */
    width: calc(100% - 18px);
    aspect-ratio: 334 / 496;
    height: auto;
    margin-inline: auto;
  }
  .policy-card__visual-text {
    flex-direction: column;
    align-items: center;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    width: 230px;
    gap: 8px;
  }
  .policy-card__letter {
    width: 80px;
    height: 80px;
  }
  .policy-card__cat {
    font-size: 32px;
    text-align: center;
  }
  .policy-card__catlead {
    font-size: 16px;
    text-align: center;
  }
  .policy-card__text {
    column-gap: 0; /* アイコン非表示のためリードを左端に詰める */
    row-gap: 14px;
    /* 枠左端11.5＋26=37.5 / 右も同様にリード文をセーフエリアに揃える */
    padding: 4px 26px 10px;
  }
  .policy-card__lead-icon {
    display: none; /* SPではリード先頭アイコンを非表示 */
  }
  .policy-card__lead {
    font-size: 14px;
    line-height: 1.9;
  }

  /* ---- プロフィール ---- */
  .profile {
    /* パネル枠は左右20.5pxガター（375時パネル幅334px）。テキストは内側で37.5に揃える */
    padding: 40px 20.5px;
  }
  .profile__inner {
    gap: 40px;
  }
  .profile__lead {
    font-size: 15px;
    text-align: left;
    padding-inline: 17px; /* 20.5+17=37.5 でセーフエリアに揃える */
  }
  .profile__row,
  .profile__row--reverse {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .profile__row--reverse .profile__photo {
    order: 0;
  }
  .profile__photo {
    border-radius: 20px;
    margin-inline: auto;
    margin-bottom: -40px;
    width: 195px;
    z-index: 2;
    position: relative;
  }
  .profile__photo--1 {
    height: 228px;
  }
  .profile__photo--2 {
    width: 221px;
    height: 280px;
  }
  .profile__panel {
    padding: 60px 17px 26px; /* 枠左端20.5＋17=37.5 でパネル内テキストをセーフエリアに揃える */
  }
  .profile__title,
  .profile__title--right {
    justify-content: center;
    font-size: 22px;
  }
  .profile__body {
    font-size: 16px;
    padding-left: 0; /* パネル内テキストを枠左端(=37.5)に揃える */
    line-height: 1.7;
  }
  .profile__body--right {
    text-align: left;
    font-size: 15px;
  }
  .hobby {
    text-align: left;
  }
  .hobby dt {
    font-size: 16px;
  }
  .hobby dd {
    font-size: 13px;
  }

  /* ---- 活動報告（横スクロール） ---- */
  .activity {
    padding: 20px 0 30px;
  }
  .activity__head {
    padding-inline: 37.5px; /* SPセーフエリア37.5 */
    margin-bottom: 20px;
  }
  .activity__head .sec-title {
    font-size: 22px;
    text-align: left;
    width: 100%; /* 中央寄せの親(align-items:center)内で左端に揃える */
  }
  .activity__cards {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    /* カード幅300の半分=150ぶんの左右余白で、選択中カードを中央に寄せる（375時に左右37.5） */
    padding: 8px calc(50% - 150px) 28px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .act-card {
    flex: 0 0 300px; /* カード幅300固定（375時に左右37.5マージンで中央に来る） */
    scroll-snap-align: center;
    padding: 16px 18px;
  }
  .act-card__title {
    font-size: 17px;
  }
  .act-card__thumb {
    height: 138px;
  }
  .act-card__date {
    font-size: 16px;
  }
  .act-card__text {
    font-size: 13px;
  }
  .act-card__sns {
    width: 36px;
    height: 36px;
    right: 18px;
    top: 24px;
  }

  /* ---- ご支援 ---- */
  .support__inner {
    padding: 20px 37.5px 40px; /* SPセーフエリア37.5 */
    gap: 24px;
  }
  .support__head .sec-title {
    font-size: 22px;
    text-align: left;
    width: 100%; /* 中央寄せの親(align-items:center)内で左端に揃える */
  }
  .support__head .sec-lead {
    text-align: left;
    width: 100%;
  }
  .support__cards {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .sup-card {
    width: 100%;
    max-width: 340px;
    min-height: 224px;
    gap: 20px;
  }
  .sup-card__title {
    width: 100%;
    font-size: 22px;
    text-align: left;
  }
  .sup-card__text {
    width: 100%;
    font-size: 15px;
    text-align: left;
  }
  .sup-card .btn--fill {
    width: 222px;
    height: 50px;
    padding-inline: 12px; /* 「お問い合わせはこちら」が収まるよう余白を詰める */
    font-size: 15px;
  }
  .sup-card__sns {
    width: 280px;
  }

  /* ---- フッター ---- */
  .footer {
    padding: 24px 0 30px;
  }
  .footer__inner {
    padding-inline: 37.5px; /* SPセーフエリア37.5 */
  }
  .footer__name {
    font-size: 26px;
    gap: 14px;
  }
  .footer__name span {
    font-size: 16px;
  }
  .footer__catch {
    font-size: 14px;
  }
  .footer__contact {
    display: none; /* SPはSNS非表示・コピーがフロー配置のためスペーサー不要 */
  }
  .footer .sns {
    display: none;
  }
  .footer__copy {
    position: static; /* SPはフロー配置に戻す（PCの絶対配置を解除） */
    text-align: right;
    font-size: 11px;
    margin-top: 8px;
  }
}