/* ============================================================
   sections.css — Section-specific Styles
   ============================================================ */

/* ============================================================
   #hero — ファーストビュー
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: transparent;
}

/* Herringbone texture */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: transparent;
  background-image:
    repeating-linear-gradient(
      135deg,
      transparent 0px, transparent 28px,
      rgba(201,169,97,0.035) 28px, rgba(201,169,97,0.035) 29px
    ),
    repeating-linear-gradient(
      45deg,
      transparent 0px, transparent 28px,
      rgba(201,169,97,0.035) 28px, rgba(201,169,97,0.035) 29px
    );
  /* 下端に向けてテクスチャとビネットを消し、背景演出が見えている次セクションとの境目をなじませる */
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

/* Radial vignette */
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 30%,
    rgba(0,0,0,0.6) 100%
  );
}

/* Hero Logo */
.hero__logo {
  position: absolute;
  top: 80px;
  left: 80px;
  z-index: 2;
  opacity: 0; /* GSAP で制御 */
}

.hero__logo img {
  height: 180px;
  width: auto;
  display: block;
}

.hero__content {
  position: relative;
  z-index: 2;
  margin-left: auto;
  padding: 0 100px 0 0;
  text-align: right;
  max-width: 700px;
}

.hero__copy {
  font-family: var(--font-ja);
  font-size: clamp(1.6rem, 3vw, 2.8rem);
  font-weight: 300;
  letter-spacing: 0.2em;
  color: var(--color-text-light);
  line-height: 1.8;
  opacity: 0;  /* GSAP animates to 1 */
}

.hero__copy--accent {
  color: var(--color-accent-gold);
  font-style: italic;
  letter-spacing: 0.25em;
}

/* Gold decoration line at bottom */
.hero__gold-line {
  position: absolute;
  bottom: 100px;
  left: 0;
  width: 45%;
  height: 1px;
  background: linear-gradient(
    to right,
    var(--color-accent-gold),
    var(--color-accent-gold-light),
    transparent
  );
  z-index: 2;
  transform-origin: left center;
  transform: scaleX(0);  /* GSAP animates to 1 */
}

/* Scroll indicator */
.hero__scroll-indicator {
  position: absolute;
  bottom: 40px;
  right: 60px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.hero__scroll-indicator span {
  font-family: var(--font-en);
  font-size: 0.65rem;
  letter-spacing: 0.4em;
  color: var(--color-accent-gold);
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.hero__scroll-line {
  width: 1px;
  height: 60px;
  background: linear-gradient(
    to bottom,
    var(--color-accent-gold),
    transparent
  );
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
  50%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; }
}


/* ============================================================
   #lead — リード文セクション
   ============================================================ */
.lead-section {
  background-color: transparent;
  padding: 120px 24px;
  display: flex;
  justify-content: center;
}

.lead-section__inner {
  max-width: 720px;
  width: 100%;
  position: relative;
  z-index: 2;
}

.lead-section__heading {
  text-align: center;
  margin-bottom: 72px;
}

.lead-section__heading-en {
  font-family: var(--font-en);
  color: var(--color-accent-gold);
  font-size: 40px;
  font-weight: 500;
  letter-spacing: 0.25em;
  line-height: 1.2;
  margin: 0;
}

.lead-section__heading-ja {
  font-family: var(--font-ja);
  color: var(--color-text-light);
  font-size: 14px;
  letter-spacing: 0.3em;
  margin: 18px 0 0;
  line-height: 1.2;
}

.lead-section__divider {
  display: block;
  width: 72px;
  height: 1px;
  background: var(--color-accent-gold);
  margin: 0 auto;
  transform-origin: center;
  transform: scaleX(0); /* GSAP animates */
}

.lead-section__divider--top {
  margin-bottom: 64px;
}

.lead-section__divider--bottom {
  margin-top: 64px;
}

.lead-section__content {
  text-align: left;
}

.lead-section__paragraph {
  font-family: var(--font-ja);
  color: var(--color-text-light);
  font-size: 18px;
  line-height: 2.0;
  letter-spacing: 0.08em;
  margin-bottom: 1.8em;
  opacity: 0; /* GSAP animates */
}

.lead-section__paragraph:last-of-type {
  margin-bottom: 0;
}

.lead-section__paragraph--highlight {
  font-size: 27px;
  color: var(--color-accent-gold);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-align: center;
  margin: 1.8em 0;
  line-height: 1.7;
}

@media (max-width: 768px) {
  .lead-section {
    padding: 80px 24px;
  }
  .lead-section__heading {
    margin-bottom: 56px;
  }
  .lead-section__heading-en {
    font-size: 28px;
  }
  .lead-section__heading-ja {
    font-size: 12px;
    margin-top: 14px;
  }
  .lead-section__paragraph {
    font-size: 15px;
    line-height: 1.95;
  }
  .lead-section__paragraph--highlight {
    font-size: 20px;
  }
  .lead-section__paragraph br {
    display: none; /* スマホでは自然な折り返しに */
  }
}


/* ============================================================
   ABOUT・VISION・MEMBERS 共通 — テキスト装飾
   ============================================================ */
/* 背景のゴースト英字（テキストの背後に敷く装飾） */
.ghost-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-en);
  font-size: 110px;
  font-weight: 500;
  color: rgba(201, 169, 97, 0.09);
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  margin: 0;
  line-height: 1;
}

/* タイトル内の「18」 */
.num-accent {
  color: var(--color-accent-gold);
}

/* 本文中の強調キーワード */
.keyword {
  color: var(--color-accent-gold-light);
  font-size: 1.3em;
  letter-spacing: 0.1em;
}

/* italic の本文内で、強調部分のみ italic を解除 */
.keyword--normal {
  font-style: normal;
}

/* タブレット：カラム幅が狭くなるため、文字全体が収まるよう画面幅に比例して縮小 */
@media (max-width: 1024px) {
  .ghost-text {
    font-size: 8vw;
  }
}

@media (max-width: 768px) {
  .ghost-text {
    display: none;
  }
}


/* ============================================================
   #about — 名古屋18支部について（ワイプ切り替え）
   ============================================================ */
.about {
  display: flex;
  height: calc(100vh - var(--pin-offset));   /* ピン留めで画面外に出る分を引く（--pin-offset は style.css） */
  overflow: hidden;
  background-color: transparent;
}

.about__left {
  flex: 0 0 50%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 80px 80px 80px 100px;
  position: relative;
  z-index: 3;
  overflow: hidden;
}

.about__left::after {
  content: '';
  position: absolute;
  top: 20%;
  right: 0;
  width: 1px;
  height: 60%;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(201,169,97,0.3) 30%,
    rgba(201,169,97,0.3) 70%,
    transparent
  );
}

.about__left .ghost-text {
  left: 40px; /* カラム左端＝画面左端のため、「A」が切れないよう内側に寄せる */
}

.about__left-inner {
  max-width: 400px;
  position: relative;
  z-index: 1;
}

.about__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--color-text-light);
  line-height: 1.2;
  margin-bottom: 20px;
}

.about__gold-line {
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent-gold-light), var(--color-accent-gold));
  margin-bottom: 22px;
}

.about__text {
  font-size: 0.9rem;
  line-height: 2.2;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.08em;
}

.about__right {
  flex: 0 0 50%;
  height: 100%;
  position: relative;
  overflow: hidden;
  z-index: 2;
  isolation: isolate;
}

.about__images {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.about__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.about__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 2;
}

.about__image,
.vision__slide {
  will-change: transform;
}

.about__image--1 { z-index: 51; }
.about__image--2 { z-index: 52; clip-path: inset(0 100% 0 0); }
.about__image--3 { z-index: 53; clip-path: inset(0 100% 0 0); }
.about__image--4 { z-index: 54; clip-path: inset(0 100% 0 0); }
.about__image--5 { z-index: 55; clip-path: inset(0 100% 0 0); }
.about__image--6 { z-index: 56; clip-path: inset(0 100% 0 0); }
.about__image--7 { z-index: 57; clip-path: inset(0 100% 0 0); }
.about__image--8 { z-index: 58; clip-path: inset(0 100% 0 0); }

/* ABOUT：写真ごとに残す位置
   枠の形は画面サイズで変わる（PC：画面の右半分 × 画面の高さ－60px ／ スマホ：縦長）。
   写真は切り抜かずに元の縦横比のまま置き、顔が切れない位置をここで指定する。
   ※ 写真を入れ替えたら、その番号の行も見直すこと（位置は写真ではなく「何枚目か」に付いている） */
.about__image--2 img { object-position: 50% 0%; }    /* 縦長の写真：横長の枠では上端を基準にして、頭を切らない */
.about__image--4 img { object-position: 50% 20%; }   /* 縦長の写真 */
.about__image--6 img { object-position: 100% 50%; }  /* スマホで2人の顔が収まるよう右寄せ（PCでは影響なし） */
.about__image--7 img { object-position: 50% 35%; }   /* 縦長の写真 */
.about__image--8 img { object-position: 44% 50%; }   /* スマホで左右の男性の顔が切れにくい位置 */


/* ============================================================
   #vision — 目的・ビジョン（ワイプ切り替え）
   ============================================================ */
.vision {
  display: flex;
  height: calc(100vh - var(--pin-offset));   /* ピン留めで画面外に出る分を引く（--pin-offset は style.css） */
  overflow: hidden;
  background-color: transparent;
}

.vision__left {
  flex: 0 0 50%;
  height: 100%;
  position: relative;
  overflow: hidden;
  z-index: 2;
  isolation: isolate;
}

.vision__slides {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.vision__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.vision__slide--1 { z-index: 51; }
.vision__slide--2 { z-index: 52; clip-path: inset(0 0 0 100%); }
.vision__slide--3 { z-index: 53; clip-path: inset(0 0 0 100%); }

.vision__slide-inner {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.vision__slide-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 2;
}

.vision__slide-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 60px 60px 50px;
  z-index: 2;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.70) 50%,
    rgba(0,0,0,0.25) 100%
  );
}

.vision__slide-content h3 {
  font-family: var(--font-ja);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-accent-gold);
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}

.vision__slide-content p {
  font-size: 0.85rem;
  line-height: 1.9;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.08em;
}

.vision__right {
  flex: 0 0 50%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 80px 100px 80px 80px;
  position: relative;
  z-index: 3;
}

.vision__right::before {
  content: '';
  position: absolute;
  top: 20%;
  left: 0;
  width: 1px;
  height: 60%;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(201,169,97,0.3) 30%,
    rgba(201,169,97,0.3) 70%,
    transparent
  );
}

.vision__right .ghost-text {
  left: 0;
}

.vision__right-inner {
  max-width: 400px;
  position: relative;
  z-index: 1;
}

.vision__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--color-text-light);
  line-height: 1.2;
  margin-bottom: 20px;
}

.vision__gold-line {
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent-gold-light), var(--color-accent-gold));
  margin-bottom: 22px;
}

.vision__text {
  font-size: 0.9rem;
  line-height: 2.2;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.1em;
  font-style: italic;
}


/* ============================================================
   #members — メンバー紹介
   ============================================================ */
.members {
  display: flex;
  min-height: 100vh;
  background-color: transparent;
  position: relative;
}

.members__left {
  flex: 0 0 50%;
  height: 100vh;
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  padding: 80px 80px 80px 100px;
  overflow: hidden;
}

/* Gold curved decoration */
.members__left::before {
  content: '';
  position: absolute;
  bottom: -100px;
  left: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  border: 1px solid rgba(201,169,97,0.12);
  pointer-events: none;
}

.members__left::after {
  content: '';
  position: absolute;
  bottom: -60px;
  left: -60px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 1px solid rgba(201,169,97,0.08);
  pointer-events: none;
}

.members__left-inner {
  position: relative;
  z-index: 2;
}

.members__left .ghost-text {
  left: 0;
  top: 50%;
}

.members__title {
  font-size: clamp(1.8rem, 3.5vw, 2.75rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--color-text-light);
  line-height: 1.2;
  white-space: nowrap; /* 「メンバー紹介」は1行固定 */
  margin-bottom: 20px;
}

.members__gold-line {
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent-gold-light), var(--color-accent-gold));
  margin-bottom: 22px;
}

.members__text {
  font-size: 0.9rem;
  line-height: 2.2;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.08em;
}

.members__right {
  flex: 0 0 50%;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  justify-content: center;          /* space-between から変更 */
}

/* カードの高さ＝写真の幅。写真枠を正方形に固定し、PC・スマホで同じ見え方にする */
.members__right .member-card {
  flex: 0 0 auto;
  height: 200px;
}

.members__right .member-card__inner {
  height: 100%;
}

/* Member Card */
.member-card {
  opacity: 0; /* GSAP animates to 1 */
  transform: translateY(40px); /* GSAP resets */
  position: relative;
  z-index: 2;
}

.member-card__inner {
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(201,169,97,0.2);
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.member-card__inner:hover {
  border-color: rgba(201,169,97,0.5);
  box-shadow: 0 8px 40px rgba(0,0,0,0.4);
}

.member-card__image {
  position: relative;
  width: 200px;
  flex: 0 0 200px;
  overflow: hidden;
  z-index: 2;
}

.member-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;   /* 素材を正方形に正規化したため、全体がそのまま出る */
  display: block;
}

.member-card__badge {
  display: inline-block;
  width: fit-content;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  font-family: var(--font-en);
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  color: #0a0a0a;
  background: linear-gradient(135deg, #c9a961 0%, #e8d48a 50%, #c9a961 100%);
  padding: 8px 18px;
  font-weight: 700;
  margin-bottom: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

/* 情報欄：1行目＝役職、2行目＝氏名
   （バッジ・業界名は廃止。HTMLに要素が無いので効かないが、将来戻せるようルールは残している） */
.member-card__info {
  flex: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-content: center;
  row-gap: 14px;
  column-gap: 16px;
  padding: 28px 36px;
  background: linear-gradient(135deg, #111 0%, #0d0d0d 100%);
  position: relative;   /* ゴーストロゴの基準 */
  overflow: hidden;     /* ゴーストロゴのはみ出しを切る */
}

.member-card__role {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  font-family: var(--font-en);
  font-size: 1.18rem;
  letter-spacing: 0.18em;
  color: var(--color-accent-gold);
  text-transform: uppercase;
  margin-bottom: 0;
  line-height: 1.2;
}

.member-card__name {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: 2.3rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  line-height: 1.25;
  color: var(--color-text-light);
  margin-bottom: 0;
}

.member-card__industry {
  grid-column: 1 / -1;
  grid-row: 3;
  font-size: 0.95rem;
  color: var(--color-muted);
  letter-spacing: 0.1em;
  margin-bottom: 0;
}

/* ---- 変更7：カード右側のゴーストロゴ ----
   logo.png は 1920×1080 のキャンバスの中に絵柄が 962×588（横50.1%）で収まっているため、
   background-size 519px（= 260 ÷ 0.501）で絵柄部分がちょうど 260px 幅になる */
.member-card__info::after {
  content: '';
  position: absolute;
  right: -90px;              /* 右へずらして約2/3を見せる */
  top: 50%;
  transform: translateY(-50%);
  width: 260px;
  height: 160px;
  background: url('../assets/images/logo.png') no-repeat center / 519px auto;
  opacity: 0.11;
  pointer-events: none;
  z-index: 0;
}

/* 文字をロゴより前面に */
.member-card__badge,
.member-card__role,
.member-card__name,
.member-card__industry {
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------------
   運営担当（写真なしの3名）
   写真の有無を「用意できなかった」ではなく「役割が違う」と
   読ませるため、役員カードとは別の見せ方にしている
   ------------------------------------------------------------ */
.members__staff {
  flex: 0 0 auto;
  opacity: 0;                      /* GSAPが1にする */
  transform: translateY(40px);     /* GSAPが0にする */
  position: relative;
  z-index: 2;
}

.members__staff-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.members__staff-head span {
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: var(--color-accent-gold);
  white-space: nowrap;
}

.members__staff-head i {
  flex: 1;
  height: 1px;
  background: rgba(201, 169, 97, 0.25);
}

.members__staff-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.staff-card {
  border: 1px solid rgba(201, 169, 97, 0.2);
  background: linear-gradient(135deg, #111 0%, #0d0d0d 100%);
  padding: 22px 10px;
  text-align: center;
}

.staff-card__role {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--color-accent-gold);
  margin-bottom: 10px;
}

.staff-card__name {
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--color-text-light);
  margin-bottom: 0;
}


/* ============================================================
   #message — 支部長メッセージ
   ============================================================ */
.message {
  background-color: transparent;
  padding: 64px 0 var(--space-xl);   /* 上：メンバーカード下端〜金のラインと対称にする */
  position: relative;
  overflow: hidden;
}

/* Gold ribbon decoration */
.message::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent,
    var(--color-accent-gold) 30%,
    var(--color-accent-gold) 70%,
    transparent
  );
}

.message__inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 2;
}

.message__header {
  text-align: center;
  margin-bottom: 60px;
  position: relative;
  z-index: 2;
}

.message__title {
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 300;
  letter-spacing: 0.2em;
  color: var(--color-text-light);
  margin-bottom: 16px;
}

.message__gold-underline {
  width: 60px;
  height: 1px;
  background: var(--color-accent-gold);
  margin: 0 auto;
}

.message__video-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid rgba(201,169,97,0.2);
  overflow: hidden;
  z-index: 2;
}

.message__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 2;
}

.message__video-controls {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 3;
}

.message__mute-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(201,169,97,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease;
  font-size: 1rem;
}

.message__mute-btn:hover {
  background: rgba(201,169,97,0.2);
}


/* ============================================================
   #sns — SNS（LINE強調）
   ============================================================ */
.sns {
  background-color: transparent;
  padding: var(--space-xl) 0;
  position: relative;
  overflow: hidden;
}

/* Gold particle decoration */
.sns::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 100%;
  background:
    radial-gradient(circle at 20% 30%, rgba(201,169,97,0.04) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(201,169,97,0.04) 0%, transparent 40%);
  pointer-events: none;
}

.sns__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 60px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.sns__title {
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 300;
  letter-spacing: 0.2em;
  color: var(--color-text-light);
  margin-bottom: 16px;
}

.sns__gold-underline {
  width: 60px;
  height: 1px;
  background: var(--color-accent-gold);
  margin: 0 auto 60px;
}

.sns__cards {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 24px;
  align-items: stretch;
}

.sns__note {
  margin-top: 32px;
  font-size: 12px;
  color: var(--color-muted);
  text-align: center;
  letter-spacing: 0.05em;
  line-height: 1.6;
}

/* SNS Card base */
.sns-card {
  border: 1px solid rgba(201,169,97,0.2);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 2;
  background: rgba(255,255,255,0.02);
  transition: transform 0.3s var(--ease-smooth),
              box-shadow 0.3s var(--ease-smooth),
              border-color 0.3s ease;
  opacity: 0;
  transform: translateY(30px);
}

.sns-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 60px rgba(0,0,0,0.4);
  border-color: rgba(201,169,97,0.4);
}

.sns-card__icon {
  width: 56px;
  height: 56px;
}

.sns-card__icon svg {
  width: 100%;
  height: 100%;
}

.sns-card__platform {
  font-family: var(--font-en);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.sns-card__count {
  font-family: var(--font-en);
  font-size: 2.2rem;
  color: var(--color-text-light);
  line-height: 1;
}

.sns-card__label {
  font-size: 0.75rem;
  color: var(--color-muted);
  letter-spacing: 0.1em;
}

.sns-card__btn {
  display: inline-block;
  padding: 8px 20px;
  border: 1px solid rgba(255,255,255,0.2);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.7);
  transition: border-color 0.3s ease, color 0.3s ease;
  margin-top: auto;
  white-space: nowrap;
}

.sns-card__btn:hover {
  border-color: var(--color-accent-gold);
  color: var(--color-accent-gold);
}

/* LINE card (main, larger) */
.sns-card--line {
  border-color: rgba(201,169,97,0.35);
  background: rgba(201,169,97,0.03);
  position: relative;
}

.sns-card--main .sns-card__badge {
  font-family: var(--font-en);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-line-green);
  border: 1px solid var(--color-line-green);
  padding: 4px 12px;
  display: inline-block;
}

.sns-card--main .sns-card__icon {
  width: 72px;
  height: 72px;
}

.sns-card--main .sns-card__count {
  font-size: 2.8rem;
}

.sns-card__desc {
  font-size: 0.8rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.06em;
  text-align: center;
}

/* PC: QR visible, mobile button hidden */
.line-card__qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.line-card__qr img {
  border: 2px solid rgba(201,169,97,0.3);
  padding: 4px;
}

.line-card__mobile-btn {
  display: none;
}

@media (max-width: 768px) {
  .line-card__qr      { display: none; }
  .line-card__mobile-btn { display: inline-flex; }
}


/* ============================================================
   #event — 支部定例会
   ============================================================ */
.event {
  background-color: transparent;
  overflow: hidden;
}

.event__image-wrap {
  width: calc(100% + 120px);
  margin-left: -60px;
  height: 50vh;
  min-height: 300px;
  overflow: hidden;
  position: relative;
  margin-bottom: 48px;
  z-index: 2;
}

.event__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 2;
}

@media (max-width: 768px) {
  .event__image-wrap {
    width: calc(100% + 48px);
    margin-left: -24px;
  }
}

.event__content {
  padding: var(--space-xl) 0;
  position: relative;
  z-index: 2;
}

.event__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 60px;
  position: relative;
  z-index: 2;
}

.event__title {
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 300;
  letter-spacing: 0.15em;
  color: var(--color-text-light);
  margin-bottom: 16px;
}

.event__gold-underline {
  width: 60px;
  height: 1px;
  background: var(--color-accent-gold);
  margin-bottom: 36px;
}

.event__text {
  font-size: 0.95rem;
  line-height: 2.2;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.08em;
  margin-bottom: 60px;
}

/* Event LINE CTA box */
.event__line-cta {
  border: 1px solid rgba(201,169,97,0.3);
  padding: 56px 64px;
  text-align: center;
  position: relative;
  background: rgba(201,169,97,0.02);
}

.event__line-cta::before,
.event__line-cta::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: var(--color-accent-gold);
  border-style: solid;
}

.event__line-cta::before {
  top: -1px;
  left: -1px;
  border-width: 2px 0 0 2px;
}

.event__line-cta::after {
  bottom: -1px;
  right: -1px;
  border-width: 0 2px 2px 0;
}

.event__line-cta-title {
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  color: var(--color-text-light);
  margin-bottom: 20px;
}

.event__line-cta-desc {
  font-size: 0.88rem;
  line-height: 2;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.06em;
  margin-bottom: 36px;
}

.event__line-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
}

.event__qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.event__qr img {
  border: 1px solid rgba(201,169,97,0.3);
  padding: 4px;
}

.event__qr p {
  font-size: 0.7rem;
  color: var(--color-muted);
  letter-spacing: 0.1em;
}

/* ============================================================
   #event — フォームリンク追加分
   ============================================================ */
.event__form-link {
  display: block;
  text-align: center;
  margin-top: 24px;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5);
  transition: color 0.3s ease;
}

.event__form-link:hover {
  color: var(--color-accent-gold);
}


/* ============================================================
   #news — お知らせセクション
   ============================================================ */
.news-section {
  background: var(--color-bg-light);
  padding: 100px 0;
}

.news-section__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 60px;
}

/* タイトル（ライト背景用） */
.news-section .section-label {
  color: var(--color-accent-gold);
}

.news-section__title {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--color-text-dark);
  margin-bottom: 16px;
}

.news-section__gold-underline {
  width: 60px;
  height: 1px;
  background: var(--color-accent-gold);
  margin-bottom: 56px;
}

/* ニュースリスト */
.news-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(0,0,0,0.1);
}

/* ニュースアイテム（1件分 = WordPressループ単位） */
.news-item {
  border-bottom: 1px solid rgba(0,0,0,0.1);
  opacity: 0;
  transform: translateY(20px);
}

.news-item__link {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 28px 0;
  transition: background 0.2s ease;
  color: var(--color-text-dark);
}

.news-item__link:hover .news-item__title {
  color: var(--color-accent-gold);
}

.news-item__link:hover .news-item__thumb img {
  transform: scale(1.04);
}

.news-item__thumb {
  position: relative;
  flex-shrink: 0;
  width: 200px;
  height: 125px;
  overflow: hidden;
}

.news-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  display: block;
}

.news-item__category {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: #fff;
  background: var(--color-text-dark);
  padding: 3px 10px;
}

.news-item__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.news-item__title {
  font-family: var(--font-ja);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--color-text-dark);
  transition: color 0.3s ease;
}

.news-item__date {
  font-family: var(--font-en);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  color: var(--color-muted);
}

.news-item__readmore {
  font-family: var(--font-en);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--color-accent-gold);
  margin-top: 4px;
}

/* もっと見るボタン */
.news-section__more {
  text-align: center;
  margin-top: 48px;
}

.news-section__more-btn {
  display: inline-block;
  padding: 12px 40px;
  border: 1px solid var(--color-text-dark);
  font-family: var(--font-ja);
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  color: var(--color-text-dark);
  transition: background 0.3s ease, color 0.3s ease;
}

.news-section__more-btn:hover {
  background: var(--color-text-dark);
  color: #fff;
}


/* ============================================================
   #contact — お問い合わせセクション
   ============================================================ */
.contact-section {
  position: relative;
  z-index: 1;
  background-color: var(--color-bg-light);
  padding: 100px 0 380px;   /* 下は写真帯の場所（下帯マスクの 10% / 80% とセットで顔の位置を決めている） */
  overflow: hidden;
}

/* 写真パネル背景（上下共通） */
.contact-bg {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
  pointer-events: none;
}

/* 上の帯：下へ向かって黒に溶ける */
.contact-bg--top {
  top: 0;
  height: 480px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0,0,0,0) 100%);
}

/* 下の帯：表示窓を上へずらし、顔が見える位置にする（padding-bottom: 380px とセット） */
.contact-bg--bottom {
  bottom: 0;
  height: 440px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 10%, #000 80%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 10%, #000 80%, rgba(0,0,0,0) 100%);
}

.contact-bg__svg {
  width: 100%;
  height: 100%;
  display: block;
}

.contact-bg__svg--sp {
  display: none;
}

/* 写真に重ねる白いベール（色は上帯・下帯ごとに指定） */
.contact-bg__overlay {
  position: absolute;
  inset: 0;
}

/* 上の帯のベール：左側は見出しの可読性のため濃いめ */
.contact-bg--top .contact-bg__overlay {
  background:
    linear-gradient(100deg,
      rgba(245,243,238,0.94)  0%,
      rgba(245,243,238,0.74) 36%,
      rgba(245,243,238,0.10) 64%),
    linear-gradient(to bottom,
      rgba(245,243,238,0.16)  0%,
      rgba(245,243,238,0.36) 55%,
      rgba(245,243,238,0.86) 100%);
}

/* 下の帯のベール */
.contact-bg--bottom .contact-bg__overlay {
  background: linear-gradient(to bottom,
    rgba(245,243,238,0.72)   0%,
    rgba(245,243,238,0.34)  30%,
    rgba(245,243,238,0.28)  70%,
    rgba(245,243,238,0.60) 100%);
}

.contact-section__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 60px;
}

/* 明るい背景用に濃いゴールド */
.contact-section .section-label {
  color: #a08234;
}

.contact-section__title {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--color-text-dark);
  margin-bottom: 16px;
}

.contact-section__gold-underline {
  width: 60px;
  height: 1px;
  background: #a08234;
  margin-bottom: 24px;
}

.contact-section__lead {
  font-size: 0.95rem;
  line-height: 1.9;
  letter-spacing: 0.08em;
  color: rgba(0,0,0,0.72);
  margin-bottom: 56px;
}

/* 最終CTA（黒）との境目：写真を奥へ沈めるように黒へ溶かす */
.contact-section::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 240px;
  background: linear-gradient(to bottom,
    rgba(10,10,10,0)    0%,
    rgba(10,10,10,0.20) 34%,
    rgba(10,10,10,0.62) 68%,
    rgba(10,10,10,0.97) 100%);
  pointer-events: none;
  z-index: 0;
}

/* LINEブロック → フォームの順に縦に積む */
.contact-section__grid {
  display: block;
}

/* カード共通 */
.contact-card {
  padding: 48px 44px;
  position: relative;
}

/* LINE側ブロック（横型：左に文言・右にQR） */
.contact-card--line {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 56px;
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 48px;
  background: #f1e8d6;
  border: 2px solid var(--color-accent-gold);
}

.contact-card__badge {
  display: inline-block;
  font-family: var(--font-ja);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  color: var(--color-bg-dark);
  background: var(--color-accent-gold);
  padding: 5px 14px;
  margin-bottom: 20px;
}

.contact-card--line .contact-card__title {
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--color-text-dark);
  margin-bottom: 14px;
}

.contact-card--line .contact-card__list {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-card--line .contact-card__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  color: rgba(0,0,0,0.72);
}

.contact-card--line .contact-card__list li::before {
  content: '✓';
  color: #a08234;
  font-size: 0.75rem;
  width: 18px;
  height: 18px;
  border: 1px solid #a08234;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-card__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.contact-card--line .contact-card__action {
  margin: 0;
}

.contact-card__qr {
  display: block;
  border: 1px solid rgba(201,169,97,0.3);
  padding: 6px;
  background: #fff;
}

.contact-card--line .contact-card__qr {
  width: 150px;
  height: 150px;
  border-color: rgba(160,130,52,0.45);
}

.contact-card__btn--line {
  display: none; /* PC: hidden / SP: visible */
}

/* フォーム側カード（中央寄せ） */
.contact-card--form {
  max-width: 900px;
  margin: 36px auto 0;
  padding: 44px 56px;
  border: 1px solid #e0e0e0;
  background: #ffffff;
}

.contact-card__title--dark {
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--color-text-dark);
  margin-bottom: 20px;
}

.contact-card__list--dark {
  margin-bottom: 32px;
}

.contact-card__list--dark li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: #555;
  letter-spacing: 0.06em;
}

.contact-card__list--dark li::before {
  content: '✓';
  color: #999;
  font-size: 0.8rem;
  flex-shrink: 0;
}

/* フォーム */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-form__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-form__label {
  font-family: var(--font-ja);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--color-text-dark);
  display: flex;
  align-items: center;
  gap: 8px;
}

.contact-form__required {
  font-size: 0.65rem;
  color: #fff;
  background: #c0392b;
  padding: 2px 6px;
  letter-spacing: 0.05em;
}

.contact-form__input,
.contact-form__textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #d0d0d0;
  font-family: var(--font-ja);
  font-size: 0.88rem;
  color: var(--color-text-dark);
  background: #fafafa;
  outline: none;
  transition: border-color 0.2s ease;
  appearance: none;
  border-radius: 0;
}

.contact-form__input:focus,
.contact-form__textarea:focus {
  border-color: var(--color-accent-gold);
  background: #fff;
}

.contact-form__textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form__submit {
  padding: 14px 24px;
  background: var(--color-accent-gold);
  color: var(--color-text-dark);
  font-family: var(--font-ja);
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  cursor: pointer;
  border: 1px solid #b08f45;
  transition: background 0.3s ease, opacity 0.3s ease;
}

.contact-form__submit:hover {
  background: #b89a52;
}

/* サンクスメッセージ */
.contact-form__thanks {
  text-align: center;
  padding: 48px 24px;
  color: var(--color-text-dark);
}

.contact-form__thanks p {
  font-size: 1rem;
  line-height: 1.8;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}

.contact-form__thanks small {
  font-size: 0.75rem;
  color: #999;
}


/* ============================================================
   Responsive — sections
   ============================================================ */

/* Tablet */
@media (max-width: 1024px) {
  .about__left,
  .vision__right,
  .members__left {
    padding-left: 60px;
    padding-right: 60px;
  }
  .sns__inner {
    padding: 0 40px;
  }
  .hero__logo {
    top: 60px;
    left: 40px;
  }
  .hero__logo img {
    height: 140px;
  }

  /* Member card：まだ2カラムのため、文字と写真を縮める */
  .member-card__image { width: 150px; flex: 0 0 150px; }
  .members__right .member-card { height: 150px; }   /* 写真を正方形に保つ */
  .member-card__info  { padding: 20px 24px; column-gap: 12px; row-gap: 10px; }
  .member-card__badge { font-size: 0.85rem; padding: 6px 12px; }
  .member-card__role  { font-size: 0.95rem; }
  .member-card__name  { font-size: 1.6rem; letter-spacing: 0.12em; }
  .member-card__industry { font-size: 0.85rem; }
  .member-card__info::after { width: 180px; height: 110px; right: -60px; background-size: 359px auto; }
}

/* Mobile */
@media (max-width: 768px) {

  /* News */
  .news-section {
    padding: 60px 0;
  }
  .news-section__inner {
    padding: 0 24px;
  }
  .news-item__thumb {
    width: 110px;
    height: 70px;
  }
  .news-item__link {
    gap: 16px;
    padding: 20px 0;
  }
  .news-item__title {
    font-size: 0.88rem;
  }

  /* Contact */
  .contact-section {
    padding: 80px 0 280px;
  }
  /* 写真パネル：上下の帯ともスマホ用SVGに切り替え */
  .contact-bg__svg--pc {
    display: none;
  }
  .contact-bg__svg--sp {
    display: block;
  }
  .contact-bg--top {
    height: 340px;
  }
  .contact-bg--bottom {
    height: 300px;
  }
  /* スマホは見出しが幅いっぱいに来るので、横方向ではなく上からのベールにする */
  .contact-bg--top .contact-bg__overlay {
    background: linear-gradient(to bottom,
      rgba(245,243,238,0.88)  0%,
      rgba(245,243,238,0.70) 45%,
      rgba(245,243,238,0.55) 100%);
  }
  .contact-section__inner {
    padding: 0 24px;
  }
  .contact-card {
    padding: 32px 24px;
  }
  /* スマホ: LINEブロックは縦積みに戻す */
  .contact-card--line {
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: none;
    padding: 32px 24px;
  }
  .contact-card--form {
    max-width: none;
    padding: 32px 24px;
  }
  /* スマホ: QR→ボタン切り替え */
  .contact-card__qr {
    display: none;
  }
  .contact-card__btn--line {
    display: inline-flex;
  }

  /* Hero */
  .hero__logo {
    top: 40px;
    left: 24px;
  }
  .hero__logo img {
    height: 100px;
  }
  .hero__content {
    padding: 0 24px;
    margin: 0;
    text-align: center;
  }
  .hero__copy {
    font-size: 1.4rem;
  }
  .hero__scroll-indicator {
    right: 24px;
    bottom: 24px;
  }
  .hero__gold-line {
    width: 60%;
    bottom: 80px;
  }
}

/* ============================================================
   ABOUT・VISION：縦に積む表示（文章 → 写真のワイプ）
   スマホに加えて、縦向きのタブレット（幅769px以上の iPad・iPad Air・iPad Pro など）もこの表示にする。
   ※ 縦向きのタブレットで左右2カラムにすると、写真の枠が「画面の半分の幅 × 画面の高さ」の
     極端な縦長（iPad Air で 410×1120）になり、横長の写真の左右が大きく切れていた（2026/9/27）。
   ※ 切り替えの条件は scroll-effects.js（3・4・4-b）と必ずそろえること。
   ============================================================ */
@media (max-width: 768px), (orientation: portrait) {

  /* About */
  .about {
    flex-direction: column;
    height: auto;
    overflow: visible;
  }
  .about__left {
    flex: none;
    width: 100%;
    height: auto;
    padding: 60px 24px;
  }
  .about__left::after { display: none; }
  .about__left-inner { max-width: 100%; }
  .about__title { font-size: 1.8rem; }
  .about__right {
    flex: none;
    width: 100%;
    height: auto;
    position: static;
    overflow: visible;   /* これが無いと sticky が効かない */
  }

  /* --- スクロール連動のワイプ（枠） ---
     height = 写真 + ドット + 仕切り線までの余白 + 1枚あたりのスクロール量 × (枚数-1)
     この height が、そのままスクロールの「走行距離」になる。 */
  .about__images {
    --sp-h:    clamp(300px, 62vh, 540px);  /* 写真の高さ */
    --sp-dots: 21px;                       /* ドット行の高さ（margin 16 + 粒 5） */
    --sp-gap:  56px;                       /* ドットの下・仕切り線までの余白 */
    --sp-step: 320px;                      /* 写真1枚あたりのスクロール量 */
    --sp-head: 0px;                        /* 一緒に止める見出しの高さ（タブレットのみ。JSが入れる） */
    /* 写真が止まる位置（画面の上から）：写真とドットを画面の上下中央に置く */
    --sp-top:  calc((100vh - var(--sp-h) - var(--sp-dots)) / 2);
    /* 写真の上に空ける余白：写真が止まった時点で、上の文章がヘッダーの下に隠れ終わるようにする。
       （これが無いと、写真が止まってワイプが始まっても、上の文章がまだ動いて見える）
       124px ＝ スクロール後のヘッダー 64px ＋ 文章ブロックの下の余白 60px */
    --sp-lead: max(0px, calc(var(--sp-top) - 124px));

    position: relative;
    display: block;
    padding: var(--sp-lead) 24px var(--sp-gap);
    height: calc(var(--sp-lead) + var(--sp-head) + var(--sp-h) + var(--sp-dots) + var(--sp-gap) + var(--sp-step) * 7);
  }

  .about__sp-sticky {
    position: sticky;
    top: var(--sp-top);
  }

  .about__sp-stage {
    position: relative;
    height: var(--sp-h);
    overflow: hidden;
  }

  .about__sp-stage .about__image {
    position: absolute;
    inset: 0;
    height: 100%;
    margin: 0;
    opacity: 0;          /* 表示はJSが制御 */
  }

  .about__sp-stage .about__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .about__image--2,
  .about__image--3,
  .about__image--4,
  .about__image--5,
  .about__image--6,
  .about__image--7,
  .about__image--8 {
    clip-path: none;     /* PCのワイプ用の指定を解除 */
  }

  .about__sp-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 16px;
    height: 5px;
  }
  .about__sp-dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(201, 169, 97, 0.28);
    transition: background 0.25s, transform 0.25s;
  }
  .about__sp-dots i.is-on {
    background: rgba(201, 169, 97, 0.95);
    transform: scale(1.35);
  }

  /* Vision */
  .vision {
    flex-direction: column-reverse;
    height: auto;
    overflow: visible;
  }
  .vision__left {
    flex: none;
    width: 100%;
    height: auto;
    position: static;
    overflow: visible;   /* これが無いと sticky が効かない */
  }

  .vision__slides {
    --sp-img:  clamp(200px, 36vh, 310px);      /* 写真の高さ */
    --sp-h:    calc(var(--sp-img) + 160px);    /* 写真 + 文言エリア */
    --sp-dots: 21px;
    --sp-gap:  56px;
    --sp-step: 480px;                          /* 1枚あたりのスクロール量 */
    --sp-head: 0px;                            /* ABOUT と同じ */
    --sp-top:  calc((100vh - var(--sp-h) - var(--sp-dots)) / 2);   /* ABOUT と同じ */
    --sp-lead: max(0px, calc(var(--sp-top) - 124px));             /* ABOUT と同じ */

    position: relative;
    display: block;
    padding: var(--sp-lead) 24px var(--sp-gap);
    height: calc(var(--sp-lead) + var(--sp-head) + var(--sp-h) + var(--sp-dots) + var(--sp-gap) + var(--sp-step) * 2);
  }

  .vision__sp-sticky {
    position: sticky;
    top: var(--sp-top);
  }

  .vision__sp-stage {
    position: relative;
    height: var(--sp-h);
  }

  .vision__sp-stage .vision__slide {
    position: absolute;
    inset: 0;
    height: auto;
    opacity: 1;          /* 写真はJSが clip-path（ワイプ）で、文字は opacity で個別に切り替える */
  }

  .vision__slide--2,
  .vision__slide--3 {
    clip-path: none;     /* PCのワイプ用の指定を解除 */
  }

  /* 写真の高さは img 側で持つ。
     ※ height を持たせると下の文言が切り取られて消えるので、height は auto のまま。 */
  .vision__sp-stage .vision__slide-inner {
    height: auto;
    overflow: visible;
  }
  /* 写真の見え方はJSが clip-path（ワイプ）で制御する。
     ここで opacity: 0 を付けると、JSは写真の opacity を書かないため写真が出なくなる。 */
  .vision__sp-stage .vision__slide-inner img {
    width: 100%;
    height: var(--sp-img);
    object-fit: cover;
    display: block;
  }

  /* 文言を写真の上に重ねるのをやめ、写真の下に流す */
  .vision__sp-stage .vision__slide-content {
    position: static;
    inset: auto;
    background: none;
    padding: 18px 2px 0;
    height: auto;
    opacity: 0;
  }
  .vision__sp-stage .vision__slide-content h3 {
    margin-bottom: 8px;
  }

  .vision__sp-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 16px;
    height: 5px;
  }
  .vision__sp-dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(201, 169, 97, 0.28);
    transition: background 0.25s, transform 0.25s;
  }
  .vision__sp-dots i.is-on {
    background: rgba(201, 169, 97, 0.95);
    transform: scale(1.35);
  }
  .vision__right {
    flex: none;
    width: 100%;
    height: auto;
    padding: 60px 24px;
  }
  .vision__right::before { display: none; }
  .vision__right-inner { max-width: 100%; }
  .vision__title { font-size: 1.8rem; }

  /* 画面の高さに余裕があるとき（タブレット）：見出し・文章も写真と一緒に止める。
     JS（scroll-effects.js の 4-b）が、見出しのブロックを写真の上へ移して .has-head を付け、高さを --sp-head に入れる。
     見出し＋写真＋ドットを、ヘッダーの下の範囲の上下中央に置く（32px ＝ ヘッダー 64px の半分）。
     ※ 万一収まらないときも、見出しがヘッダーの下に潜らないよう、上端は 80px（ヘッダー 64px ＋ 16px）より上にしない。 */
  .about__images.has-head,
  .vision__slides.has-head {
    --sp-top:  max(80px, calc(32px + (100vh - var(--sp-head) - var(--sp-h) - var(--sp-dots)) / 2));
    --sp-lead: max(0px, calc(var(--sp-top) - 64px));   /* 止まった時点で、セクションの上端がヘッダーの下に来る */
  }
  .about__sp-sticky > .about__left,
  .vision__sp-sticky > .vision__right {
    padding: 0 0 40px;   /* 左右の余白は外側（写真の枠）と同じ 24px が既にあるので 0 */
  }
}

/* 縦向きのタブレット（幅769px以上）：写真の枠を、iPad mini（幅768px）と同じ形のまま、画面の幅に合わせて大きくする。
   ABOUT：横4：縦3（iPad mini では 720×540）／VISION：iPad mini の 720×310 と同じ比率。
   高さの上限（画面の高さの62％・36％）はスマホと同じ。
   ※ これが無いと、幅1024pxの iPad Pro では ABOUT の写真が横長の帯（976×540）になり、縦長の写真の半分以上が切れる。 */
@media (min-width: 769px) and (orientation: portrait) {
  .about__images {
    --sp-h: min(62vh, calc((100vw - 48px) * 0.75));
  }
  .vision__slides {
    --sp-img: min(36vh, calc((100vw - 48px) * 0.43));
  }
}

@media (max-width: 768px) {

  /* Members */
  .members {
    flex-direction: column;
  }
  .members__left {
    flex: none;
    width: 100%;
    height: auto;
    position: static;
    padding: 60px 24px 40px;
  }
  .members__title { font-size: 1.6rem; }
  .members__right {
    flex: none;
    width: 100%;
    padding: 0 24px 60px;
    justify-content: flex-start;
  }
  /* 写真枠を正方形に保つ（PCと同じ見え方にする） */
  .members__right .member-card {
    flex: 0 0 auto;
    height: 140px;
    min-height: 0;
    max-height: none;
  }

  /* Member card */
  .member-card__image {
    width: 140px;
    flex: 0 0 140px;   /* タブレット側の flex-basis 150px を上書き（width だけでは効かない） */
  }
  .member-card__info {
    padding: 18px 16px;
    column-gap: 10px;
    row-gap: 8px;
  }
  .member-card__badge { font-size: 0.7rem; padding: 4px 10px; }
  .member-card__role  { font-size: 0.8rem; letter-spacing: 0.1em; }
  .member-card__name {
    font-size: 1.25rem;
    letter-spacing: 0.1em;
  }
  .member-card__industry { font-size: 0.75rem; }
  /* スマホではカードが狭く空きがないため、ゴーストロゴは出さない */
  .member-card__info::after { display: none; }

  /* 運営担当：横3列だと1人あたり100px程度になり氏名が折り返すため、縦積みの1行表示にする */
  .members__staff-list {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .staff-card {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    padding: 16px 18px;
  }
  .staff-card__role {
    margin-bottom: 0;
    flex: 0 0 96px;
  }

  /* Message */
  .message__inner {
    padding: 0 24px;
  }

  /* SNS */
  .sns__inner {
    padding: 0 24px;
  }
  .sns__cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .sns-card--line {
    order: -1; /* LINE first on mobile */
  }
  .sns__note {
    font-size: 11px;
    margin-top: 24px;
    padding: 0 16px;
  }

  /* Event */
  .event__inner {
    padding: 0 24px;
  }
  .event__line-cta {
    padding: 40px 24px;
  }
  .event__line-cta-actions {
    flex-direction: column;
    gap: 24px;
  }
  .event__qr {
    display: none;
  }
}

/* ============================================================
   スマホ表示：本文系 <br> を無効化（自然な折り返しに）
   見出し・タイトル系（.about__title, .vision__title, .hero__copy 等）は対象外
   ============================================================ */
@media (max-width: 768px) {
  .lead-section__paragraph br,
  .about__text br,
  .vision__text br,
  .vision__slide-content p br,
  .event__text br,
  .event__line-cta-desc br,
  .contact-section__lead br {
    display: none;
  }
}

/* ============================================================
   スマホ表示：見出し・箇条書きの改行位置を整える
   ※ word-break: keep-all は「区切り文字以外で改行しない」指定。
     長い本文に当てると行が収まらなくなるため、
     短い見出し・強調文・リスト項目に限定して使う。
   ============================================================ */
@media (max-width: 768px) {
  .lead-section__paragraph--highlight,
  .vision__slide-content h3,
  .event__line-cta-title,
  .line-final-cta__list li,
  .contact-card__list li {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
}

/* ============================================================
   スマホ専用の改行
   ※ word-break: keep-all では改行位置を保証できない。
     - かっこ・記号のところの改行は止まらない
     - Safari（iPhone）では日本語に効いていない
     意図した位置で必ず切りたい箇所は、HTML側に <br class="br-sp"> を置き、
     ここでスマホのときだけ有効にする。
   ※ 本文の <br> をスマホで消す指定（.lead-section__paragraph br 等）と詳細度が同じため、
     必ずファイルの末尾に置くこと（後に書いたほうが勝つ）。
   ============================================================ */
br.br-sp { display: none; }

@media (max-width: 768px) {
  br.br-sp { display: inline; }
}

/* PC・スマホ共通で改行したい箇所。
   .lead-section__paragraph br { display: none } でスマホの <br> を消す指定と
   詳細度が同じため、必ずこのファイルの末尾に置くこと（後に書いたほうが勝つ）。 */
br.br-both { display: inline; }

/* iPhone SE（第1世代）や「表示拡大」設定では画面幅が320pxになる。
   強調文の最長行「「どんな環境に身を置き」」が264pxで、
   使える幅272pxに対して余裕が8pxしかないため、ここだけ文字を小さくする。
   18pxなら最長行238pxとなり34pxの余裕ができる。 */
@media (max-width: 360px) {
  .lead-section__paragraph--highlight { font-size: 18px; }
}

/* 改行の単位。まとまりの途中では改行させない（inline-block）。
   .clause … 「、」までのまとまり。1行に入らないときは「、」の後ろで改行される。
   .phrase … 語のまとまり（文節）。.clause の中に入れておくと、
             .clause 自体が1行に入らないときだけ、.phrase の区切りで改行される。
   word-break: keep-all は Safari（iPhone）の日本語に効かないため、inline-block で確実に止める。
   ※ span と span の間にスペース・改行を入れないこと（空白として表示される） */
.clause,
.phrase { display: inline-block; }

/* ============================================================
   幅の狭いスマホ：EVENT・CONTACT の LINEボタンを枠の中に収める
   ※ .btn--line は inline-flex ＋ white-space: nowrap のため、親の幅に合わせて縮まない。
     -lg の左右の余白（40px）のままだと、幅375px以下で枠に収まらなかった（2026/9/27）。
     幅320〜375pxは、iPhone の「表示拡大」設定（機種による）や、Android の一部の機種で使われる。
   ※ モバイルメニューの -lg ボタンは、幅320pxでも画面に収まるため対象外。
   ============================================================ */
@media (max-width: 375px) {
  .event__line-cta .btn--line-lg,
  .contact-card__btn--line {
    padding-left: 16px;
    padding-right: 16px;
  }
}
/* 幅320px前後：ボタンの余白を詰めても「LINE友だち追加する」が入りきらないため、
   EVENT の申込ボックスの左右の余白（24px）も詰める */
@media (max-width: 340px) {
  .event__line-cta {
    padding-left: 16px;
    padding-right: 16px;
  }
}