@charset "utf-8";

/* =========================================================
   トップページ

   カンプ準拠。地色と構図をセクションごとに変えて、
   スクロールで景色が変わる構成にしている。
   色・余白は tokens.css の変数を参照する。
   ========================================================= */

/* ---------------------------------------------------------
   共通パーツ（矢印・ボタン・セクションの器）
   --------------------------------------------------------- */

.ej-arrow {
  display: inline-block;
  position: relative;
  width: 38px;
  height: 1px;
  background-color: currentColor;
  flex: 0 0 auto;
  transition: transform .3s ease;
}

.ej-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

a:hover .ej-arrow {
  transform: translateX(6px);
}

.ej-arrow--circle {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(184, 149, 69, .55);
  border-radius: 50%;
  background: none;
  transition: background-color .3s ease, border-color .3s ease, transform .3s ease;
}

.ej-arrow--circle::after {
  top: 50%;
  right: 16px;
  transform: translateY(-50%) rotate(45deg);
}

a:hover .ej-arrow--circle {
  background-color: var(--c-gold);
  border-color: var(--c-gold);
  transform: translateX(4px);
}

a:hover .ej-arrow--circle::after {
  border-color: var(--c-ink);
}

.ej-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-md);
  min-height: 56px;
  padding: 0 var(--sp-md);
  text-decoration: none;
  font-size: var(--fs-sm);
  letter-spacing: .08em;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

.ej-btn--solid {
  background-color: var(--c-ink);
  color: var(--c-text-light);
  border: 1px solid var(--c-ink);
}

.ej-btn--solid:hover {
  background-color: var(--c-gold);
  border-color: var(--c-gold);
  color: var(--c-ink);
}

/* セクションの器 */
.sec {
  padding: clamp(72px, 9vw, 132px) 5%;
}

.sec--light {
  background-color: var(--c-bg);
  color: var(--c-ink-soft);
}

.sec--dark {
  background-color: var(--c-surface-dark);
  color: var(--c-text-light);
}

.sec__inner {
  max-width: 1280px;
  margin: 0 auto;
}

.sec__inner--narrow {
  max-width: 820px;
  text-align: center;
}

.sec__inner--text {
  max-width: 900px;
}

.sec__inner--news {
  max-width: 1000px;
}

.sec__eyebrow {
  font-family: var(--ff-base);
  font-size: var(--fs-xs);
  letter-spacing: .34em;
  color: var(--c-gold-deep);
  text-align: center;
  margin-bottom: var(--sp-sm);
}

.sec__title {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 2.6vw, 2.35rem);
  letter-spacing: .1em;
  line-height: 1.5;
  color: var(--c-ink);
  text-align: center;
  margin-bottom: var(--sp-md);
}

.sec__title--light {
  color: var(--c-text-light);
}

.sec__lead {
  max-width: 760px;
  margin: 0 auto var(--sp-lg);
  text-align: center;
  font-size: var(--fs-sm);
  line-height: 2.1;
  color: var(--c-muted);
}

.sec__lead--light {
  color: rgba(245, 245, 245, .72);
}

.sec__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-lg);
}

/* ---------------------------------------------------------
   HERO

   左に文字、右に写真を額装する。写真を画面いっぱいに敷かず、
   黒地の余白と組み合わせることで展示会の「格」を出す。
   --------------------------------------------------------- */

.hero {
  position: relative;
  background-color: var(--c-ink);
  padding: clamp(120px, 14vh, 190px) 5% clamp(40px, 5vw, 64px);
  overflow: hidden;
}

/* 薄い金のライン装飾。主張させない */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 12% 18%, rgba(184, 149, 69, .10) 0%, rgba(184, 149, 69, 0) 60%),
    radial-gradient(50% 40% at 92% 8%, rgba(184, 149, 69, .08) 0%, rgba(184, 149, 69, 0) 65%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 54%);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  min-height: 56vh;
}

.hero__eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: .38em;
  color: var(--c-gold-deep);
  margin-bottom: var(--sp-md);
}

.hero__title {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 5vw, 5.5rem);
  line-height: 1.32;
  letter-spacing: .05em;
  color: var(--c-text-light);
  margin-bottom: var(--sp-md);
}

.hero__lead {
  font-size: clamp(.95rem, 1.15vw, 1.15rem);
  letter-spacing: .1em;
  color: rgba(245, 245, 245, .82);
  margin-bottom: var(--sp-lg);
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-lg);
  min-width: min(420px, 100%);
  min-height: 60px;
  padding: 0 var(--sp-md);
  border: 1px solid rgba(184, 149, 69, .55);
  color: var(--c-text-light);
  text-decoration: none;
  font-size: var(--fs-sm);
  letter-spacing: .12em;
  transition: background-color .3s ease, color .3s ease;
}

.hero__cta:hover {
  background-color: var(--c-gold);
  color: var(--c-ink);
}

.hero__visual {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid rgba(184, 149, 69, .22);
}

.hero__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}

.hero:hover .hero__visual img {
  transform: scale(1.03);
}

/* HERO下部の3カード */
.hero__cards {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: clamp(32px, 4vw, 56px) auto 0;
  display: grid;
  grid-template-columns: 40% 1fr 1fr;
  gap: 14px;
}

.hero-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: clamp(20px, 2vw, 30px) clamp(20px, 2.2vw, 34px);
  min-height: 132px;
  background-color: rgba(10, 10, 10, .75);
  border: 1px solid rgba(184, 149, 69, .4);
  color: var(--c-text-light);
  text-decoration: none;
  transition: border-color .3s ease, background-color .3s ease;
}

a.hero-card:hover {
  border-color: rgba(184, 149, 69, .9);
  background-color: rgba(20, 18, 14, .88);
  color: var(--c-text-light);
}

.hero-card__label {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.35vw, 1.35rem);
  letter-spacing: .08em;
}

.hero-card__lead {
  font-size: var(--fs-xs);
  color: rgba(245, 245, 245, .66);
}

.hero-card--route .ej-arrow--circle {
  position: absolute;
  right: clamp(18px, 2vw, 28px);
  bottom: clamp(18px, 2vw, 28px);
}

.hero-card__meta {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-size: var(--fs-xs);
  color: rgba(245, 245, 245, .72);
}

.hero-card__meta li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.hero-card__ico {
  width: 15px;
  height: 15px;
  color: var(--c-gold-deep);
  flex: 0 0 auto;
}

/* カウントダウン */
.hero-card--countdown .countdown {
  position: static;
  transform: none;
  width: auto;
  max-width: none;
  text-align: left;
}

.hero-card--countdown .kaisai {
  font-size: var(--fs-xs);
  letter-spacing: .3em;
  color: rgba(245, 245, 245, .75);
  margin-bottom: 6px;
}

.hero-card--countdown .timer {
  display: flex;
  align-items: baseline;
  margin: 0;
}

.timer__unit {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 0 clamp(10px, 1.1vw, 18px);
  border-left: 1px solid rgba(245, 245, 245, .18);
  white-space: nowrap;
}

.timer__unit:first-child {
  padding-left: 0;
  border-left: 0;
}

.timer__unit span[data-cd] {
  font-family: var(--ff-numeral);
  font-weight: 500;
  font-size: clamp(2rem, 2.8vw, 3rem);
  line-height: 1;
  color: var(--c-gold-deep);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

.timer__unit i {
  font-style: normal;
  font-size: var(--fs-xs);
  color: rgba(245, 245, 245, .7);
}

/* ---------------------------------------------------------
   INTRO
   --------------------------------------------------------- */

.intro__title {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(1.35rem, 2.3vw, 2.05rem);
  letter-spacing: .09em;
  line-height: 1.6;
  color: var(--c-ink);
  margin-bottom: var(--sp-md);
}

.intro__text {
  font-size: var(--fs-sm);
  line-height: 2.15;
  color: var(--c-ink-soft);
}

/* ---------------------------------------------------------
   ギャラリー
   --------------------------------------------------------- */

.gallery__viewport {
  position: relative;
  margin-top: var(--sp-lg);
}

.gallery__track {
  list-style: none;
  margin: 0;
  padding: 0 5%;
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.gallery__track::-webkit-scrollbar {
  display: none;
}

.gallery__item {
  flex: 0 0 clamp(240px, 26vw, 380px);
  aspect-ratio: 4 / 3;
  scroll-snap-align: center;
  overflow: hidden;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

.gallery__item:hover img {
  transform: scale(1.03);
}

.gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 1px solid rgba(184, 149, 69, .5);
  border-radius: 50%;
  background-color: rgba(10, 10, 10, .6);
  cursor: pointer;
  z-index: 2;
  transition: background-color .3s ease;
}

.gallery__nav:hover {
  background-color: var(--c-gold);
}

.gallery__nav::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-top: 1px solid var(--c-text-light);
  border-right: 1px solid var(--c-text-light);
}

.gallery__nav--prev {
  left: 2%;
}

.gallery__nav--prev::after {
  transform: translate(-30%, -50%) rotate(-135deg);
}

.gallery__nav--next {
  right: 2%;
}

.gallery__nav--next::after {
  transform: translate(-70%, -50%) rotate(45deg);
}

.gallery__foot {
  margin-top: var(--sp-lg);
}

/* ---------------------------------------------------------
   開催概要（左タイトル／右 label-value）
   --------------------------------------------------------- */

.outline__grid {
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: clamp(24px, 4vw, 72px);
  align-items: start;
}

.outline__head .sec__title {
  text-align: left;
  margin-bottom: var(--sp-sm);
  padding-bottom: var(--sp-sm);
}

.outline__head .sec__title::after {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  background-color: var(--c-gold);
  margin-top: var(--sp-sm);
}

.outline__body .info-table {
  padding: 0;
}

.outline__body .info-table table {
  max-width: none;
  background: none;
}

.outline__body .info-table th,
.outline__body .info-table td {
  background: none;
  border-right: 0;
  border-bottom: 1px solid rgba(24, 24, 24, .12);
  padding: var(--sp-sm) 0;
  font-size: var(--fs-sm);
  line-height: 1.9;
}

.outline__body .info-table th {
  width: 160px;
  color: var(--c-muted);
  font-weight: 500;
  letter-spacing: .08em;
}

/* ---------------------------------------------------------
   実績（数字を主役に）
   --------------------------------------------------------- */

.results__grid {
  list-style: none;
  margin: var(--sp-lg) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(28px, 6vw, 96px);
}

.results__item {
  text-align: center;
  position: relative;
  padding: 0 clamp(12px, 3vw, 48px);
}

.results__item + .results__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 1px;
  background-color: rgba(184, 149, 69, .3);
}

.results__label {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: .16em;
  color: rgba(245, 245, 245, .65);
  margin-bottom: var(--sp-xs);
}

.results__value {
  display: block;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(3.4rem, 6vw, 5.6rem);
  line-height: 1.05;
  color: var(--c-gold-deep);
  letter-spacing: .02em;
}

.results__unit {
  font-size: clamp(.9rem, 1.2vw, 1.15rem);
  letter-spacing: .1em;
  margin-left: 8px;
  color: rgba(245, 245, 245, .8);
}

.results__note {
  margin-top: var(--sp-lg);
  text-align: center;
  font-size: var(--fs-xs);
  color: rgba(245, 245, 245, .45);
}

/* ---------------------------------------------------------
   理念
   --------------------------------------------------------- */

.philosophy {
  background-color: #0D0D0D;
}

.philosophy__body {
  max-width: 880px;
  margin: 0 auto;
  color: #E8E8E8;
}

.philosophy__body p {
  font-size: var(--fs-sm);
  line-height: 2.05;
  margin-bottom: var(--sp-md);
  text-align: center;
}

.philosophy__body p:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------
   来場者導線の3カード
   --------------------------------------------------------- */

.route-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-sm);
}

.route-cards a {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  min-height: 96px;
  padding: var(--sp-sm) var(--sp-md);
  border: 1px solid rgba(184, 149, 69, .35);
  color: var(--c-text-light);
  text-decoration: none;
  transition: border-color .3s ease, background-color .3s ease;
}

.route-cards a:hover {
  border-color: var(--c-gold);
  background-color: rgba(184, 149, 69, .07);
  color: var(--c-text-light);
}

.route-cards__svg {
  width: 34px;
  height: 34px;
  color: var(--c-gold-deep);
  flex: 0 0 auto;
}

.route-cards__label {
  display: block;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  letter-spacing: .08em;
}

.route-cards__lead {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-xs);
  color: rgba(245, 245, 245, .6);
}

/* ---------------------------------------------------------
   私達の使命（写真＋左黒グラデ）
   --------------------------------------------------------- */

.mission {
  position: relative;
  min-height: clamp(380px, 46vw, 560px);
  display: flex;
  align-items: center;
  background-color: var(--c-ink);
  overflow: hidden;
}

.mission__media {
  position: absolute;
  inset: 0;
}

.mission__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mission__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11, 11, 11, .96) 0%, rgba(11, 11, 11, .82) 34%, rgba(11, 11, 11, .18) 68%, rgba(11, 11, 11, .05) 100%);
}

.mission__copy {
  position: relative;
  z-index: 1;
  width: min(560px, 90%);
  margin-left: max(5%, calc((100% - 1280px) / 2));
  padding: var(--sp-lg) 0;
}

.mission__copy .sec__eyebrow,
.mission__copy .sec__title {
  text-align: left;
}

.mission__text {
  font-size: var(--fs-sm);
  line-height: 2.1;
  color: rgba(245, 245, 245, .85);
}

/* ---------------------------------------------------------
   NEWS（横罫線型）
   --------------------------------------------------------- */

.news__list {
  list-style: none;
  margin: var(--sp-lg) 0 0;
  padding: 0;
  border-top: 1px solid rgba(24, 24, 24, .12);
}

.news__item {
  border-bottom: 1px solid rgba(24, 24, 24, .12);
}

.news__item a {
  display: grid;
  grid-template-columns: 110px 110px 1fr 46px;
  gap: var(--sp-sm);
  align-items: center;
  padding: var(--sp-sm) var(--sp-xs);
  text-decoration: none;
  transition: background-color .3s ease;
}

.news__item a:hover {
  background-color: rgba(184, 149, 69, .07);
}

.news__date {
  font-family: var(--ff-numeral);
  font-size: var(--fs-sm);
  letter-spacing: .06em;
  color: var(--c-gold-deep);
  font-variant-numeric: lining-nums tabular-nums;
}

.news__cat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(24, 24, 24, .2);
  font-size: var(--fs-xs);
  color: var(--c-muted);
  white-space: nowrap;
}

.news__title {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-ink-soft);
}

.news__item .ej-arrow {
  width: 30px;
  color: var(--c-muted);
}

/* ---------------------------------------------------------
   レスポンシブ
   --------------------------------------------------------- */

@media screen and (max-width: 1200px) {
  .hero__inner {
    grid-template-columns: minmax(0, 50%) minmax(0, 50%);
  }

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

  .hero-card--countdown {
    grid-column: 1 / -1;
  }
}

@media screen and (max-width: 992px) {
  .hero__inner {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .hero__visual {
    aspect-ratio: 16 / 9;
  }

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

  .route-cards {
    grid-template-columns: 1fr;
  }

  .mission__copy {
    width: 90%;
    margin: 0 auto;
  }

  .mission__media::after {
    background: linear-gradient(180deg, rgba(11, 11, 11, .92) 0%, rgba(11, 11, 11, .8) 60%, rgba(11, 11, 11, .6) 100%);
  }
}

@media screen and (max-width: 768px) {
  .hero {
    padding-top: clamp(96px, 16vh, 140px);
  }

  .hero__title {
    font-size: clamp(2rem, 9vw, 3rem);
  }

  .hero__cta {
    width: 100%;
    min-width: 0;
    gap: var(--sp-sm);
  }

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

  .news__item a {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "date cat"
      "title title";
    row-gap: 6px;
  }

  .news__date {
    grid-area: date;
  }

  .news__cat {
    grid-area: cat;
    justify-self: start;
  }

  .news__title {
    grid-area: title;
  }

  .news__item .ej-arrow {
    display: none;
  }

  .results__item + .results__item::before {
    display: none;
  }
}

@media screen and (max-width: 480px) {
  .sec {
    padding-left: 6%;
    padding-right: 6%;
  }

  .timer__unit span[data-cd] {
    font-size: 1.75rem;
  }

  .ej-btn {
    width: 100%;
    justify-content: space-between;
  }
}

/* H1が3行に折り返さない字送りに調整（左カラム幅に対して8文字が収まる大きさ） */
.hero__title {
  font-size: clamp(2.2rem, 4.3vw, 4.4rem);
  letter-spacing: .03em;
  white-space: nowrap;
}

@media screen and (max-width: 992px) {
  .hero__title {
    white-space: normal;
    font-size: clamp(2.2rem, 7vw, 3.6rem);
  }
}

/* ---------------------------------------------------------
   開催概要の罫線調整

   components.css の旧テーブル指定（外枠・縦罫・背景）が
   後から勝つため、詳細度を上げてカンプの label/value 形式にする。
   横罫線のみ、背景なし。
   --------------------------------------------------------- */

.outline .info-table,
.outline .info-table table {
  background: none;
  padding: 0;
  border: 0;
}

.outline .info-table table {
  width: 100%;
  max-width: none;
  border-collapse: collapse;
}

.outline .info-table th,
.outline .info-table td {
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(24, 24, 24, .13);
  padding: 18px 0;
  font-size: var(--fs-sm);
  line-height: 1.9;
  vertical-align: top;
  text-align: left;
}

.outline .info-table th {
  width: 150px;
  white-space: nowrap;
  color: var(--c-muted);
  font-weight: 500;
  letter-spacing: .1em;
}

.outline .info-table__note {
  text-align: left;
  margin-top: var(--sp-sm);
  font-size: var(--fs-xs);
}

/* タイトルと本文が離れすぎないよう左カラムを絞る */
.outline__grid {
  grid-template-columns: minmax(160px, 230px) 1fr;
  gap: clamp(20px, 3vw, 48px);
}

/* ---------------------------------------------------------
   ギャラリー下の動画
   --------------------------------------------------------- */

.gallery__movie-lead {
  text-align: center;
  font-size: var(--fs-sm);
  color: rgba(245, 245, 245, .68);
  margin-bottom: var(--sp-md);
}

.gallery__movie {
  max-width: 900px;
  margin: 0 auto;
}

/* ギャラリーの右端が中途半端に切れないよう、
   最後の1枚のあとに余白を作る */
.gallery__track::after {
  content: "";
  flex: 0 0 5%;
}

/* =========================================================
   完成イメージとの差分修正
   ========================================================= */

/* --- HERO：写真の存在感を上げ、左の黒領域を詰める --- */
.hero__inner {
  grid-template-columns: minmax(0, 42%) minmax(0, 58%);
}

.hero__visual {
  aspect-ratio: 16 / 9;
  border-color: rgba(184, 149, 69, .3);
}

/* 写真を暗くしすぎない */
.hero__visual img {
  filter: brightness(1.08) saturate(1.04);
}

/* CTAを大きく */
.hero__cta {
  min-width: min(340px, 100%);
  min-height: 62px;
  gap: var(--sp-md);
  font-size: 1rem;
}

/* --- HERO下部3カード：高さと数字を大きく --- */
.hero-card {
  min-height: 128px;
  padding: clamp(22px, 2.2vw, 32px) clamp(22px, 2.4vw, 36px);
}

.hero-card--countdown .timer__unit span[data-cd] {
  font-size: clamp(2.6rem, 3.9vw, 4.1rem);
}

.hero-card__label {
  font-size: clamp(1.15rem, 1.5vw, 1.5rem);
}

.hero-card--route .ej-arrow--circle {
  width: 52px;
  height: 52px;
}

.hero-card--route .ej-arrow--circle::after {
  right: 19px;
}

/* --- INTRO：縦余白を圧縮しアイボリー地に --- */
.intro {
  position: relative;
  background-color: var(--c-bg);
  padding-top: clamp(64px, 6vw, 88px);
  padding-bottom: clamp(64px, 6vw, 88px);
  overflow: hidden;
}

/* 左右から薄いゴールドの曲線。文章より目立たせない */
.intro::before,
.intro::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 46vw;
  height: 150%;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 1px solid rgba(184, 149, 69, .16);
  pointer-events: none;
}

.intro::before {
  left: -26vw;
}

.intro::after {
  right: -26vw;
}

.intro .sec__inner {
  position: relative;
  z-index: 1;
}

/* --- 前回開催の様子：全幅の黒地＋横ギャラリー --- */
.gallery {
  background-color: #0B0C0D;
  padding-left: 0;
  padding-right: 0;
}

.gallery .sec__inner {
  padding: 0 5%;
}

.gallery__viewport {
  max-width: 1300px;
  width: 90%;
  margin: var(--sp-lg) auto 0;
}

.gallery__track {
  padding: 0;
}

.gallery__item {
  flex: 0 0 clamp(260px, 30%, 400px);
}

.gallery__nav--prev {
  left: -22px;
}

.gallery__nav--next {
  right: -22px;
}

.gallery__movie {
  max-width: 1000px;
}

/* --- 開催概要：アイボリー地、表を地と一体化 --- */
.outline {
  background-color: var(--c-bg);
}

.outline__grid {
  grid-template-columns: 220px 1fr;
  max-width: 1200px;
}

.outline__head .sec__title {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
}

/* --- 実績：全幅の黒地、高さを抑える --- */
.results {
  background-color: #0B0C0D;
  padding-top: clamp(56px, 5vw, 76px);
  padding-bottom: clamp(56px, 5vw, 76px);
  position: relative;
  overflow: hidden;
}

/* 細いゴールドの曲線を左右に流す */
.results::before,
.results::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 60vw;
  height: 200%;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 1px solid rgba(184, 149, 69, .12);
  pointer-events: none;
}

.results::before {
  left: -34vw;
}

.results::after {
  right: -34vw;
}

.results .sec__inner {
  position: relative;
  z-index: 1;
}

.results__grid {
  margin-top: var(--sp-md);
  gap: clamp(24px, 5vw, 80px);
}

.results__value {
  font-size: clamp(3.6rem, 5.4vw, 5rem);
  color: #B99548;
}

.results__note {
  margin-top: var(--sp-md);
}

/* --- 理念：文字を大きく、幅を絞る --- */
.philosophy .sec__title {
  font-size: clamp(1.9rem, 3vw, 2.8rem);
}

.philosophy__body {
  max-width: 760px;
}

.philosophy__body p {
  font-size: 1.0625rem;
  line-height: 2.05;
}

.philosophy {
  position: relative;
  overflow: hidden;
}

.philosophy::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -60%;
  width: 120vw;
  height: 120%;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid rgba(184, 149, 69, .1);
  pointer-events: none;
}

.philosophy .sec__inner {
  position: relative;
  z-index: 1;
}

/* --- 私達の使命：左45%文章／右55%写真 --- */
.mission {
  min-height: clamp(320px, 30vw, 400px);
}

.mission__media::after {
  background: linear-gradient(to right, #0b0b0b 0%, #0b0b0b 35%, transparent 65%);
}

.mission__copy {
  width: min(620px, 45%);
}

/* --- NEWS：白い内側カードを廃してアイボリー地に直置き --- */
.news {
  background-color: var(--c-bg);
}

.news .sec__inner--news {
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  max-width: 1000px;
}

.news__list,
.news__item,
.news__item a {
  background: none;
  border-radius: 0;
  box-shadow: none;
}

/* --- 出展社募集：幅を広げカードを大きく --- */
.exhibit .sec__inner {
  max-width: 1200px;
}

.exhibit .exhibit-categories {
  max-width: none;
}

.exhibit .exhibit-grid {
  gap: 20px;
}

.exhibit .exhibit-card {
  min-height: 132px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-color: rgba(184, 149, 69, .38);
}

.exhibit .exhibit-card__svg {
  width: 44px;
  height: 44px;
}

@media screen and (max-width: 992px) {
  .mission__copy {
    width: 90%;
  }

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

  .gallery__nav--prev {
    left: 4px;
  }

  .gallery__nav--next {
    right: 4px;
  }
}

/* ギャラリーのページャー */
.gallery__pager {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: var(--sp-md);
}

.gallery__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: rgba(245, 245, 245, .28);
  transition: background-color .3s ease;
}

.gallery__dot.is-active {
  background-color: var(--c-gold-deep);
}

/* =========================================================
   HERO全面スライダー ＋ 金の輝き
   ========================================================= */

/* スライダーをHERO全面に敷く */
.hero__visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  z-index: 0;
  overflow: hidden;
}

.hero__slider,
.hero__slider .slick-list,
.hero__slider .slick-track,
.hero__slider .slick-slide,
.hero__slider .slick-slide > div {
  height: 100%;
}

.hero__slider .slick-slide img,
.hero__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(1.02) saturate(1.02);
}

/* 左から黒へ落として文字を読ませる。右は写真を見せる */
.hero__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(8, 8, 8, .97) 0%, rgba(8, 8, 8, .88) 30%, rgba(8, 8, 8, .45) 62%, rgba(8, 8, 8, .30) 100%),
    linear-gradient(to bottom, rgba(8, 8, 8, .55) 0%, rgba(8, 8, 8, .10) 42%, rgba(8, 8, 8, .82) 100%);
  pointer-events: none;
}

/* 文字とカードは写真より前面 */
.hero__inner,
.hero__cards {
  position: relative;
  z-index: 2;
}

.hero__inner {
  grid-template-columns: minmax(0, 52%) minmax(0, 48%);
}

/* ---------------------------------------------------------
   金の輝き（グラデーション文字）

   カウントダウンと実績の数字に、箔が光って見える
   ゴールドのグラデーションをかける。
   --------------------------------------------------------- */

.timer__unit span[data-cd],
.results__value {
  background-image: linear-gradient(160deg,
      #6E5518 0%,
      #B99548 18%,
      #F2E2A8 38%,
      #FFF7DC 48%,
      #E7CE85 58%,
      #B99548 74%,
      #7A5F1C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45));
}

/* 実績の数字はさらに大きく光らせる */
.results__value {
  background-image: linear-gradient(165deg,
      #7A5F1C 0%,
      #B99548 15%,
      #F5E7B4 34%,
      #FFFBEA 46%,
      #EBD595 58%,
      #B99548 76%,
      #6E5518 100%);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5));
}

/* 単位は金の単色のまま（グラデを効かせすぎない） */
.results__unit,
.timer__unit i {
  -webkit-text-fill-color: currentColor;
}

/* 背景が透けないよう、グラデ文字を持つ要素の下地を確保する */
.timer__unit,
.results__item {
  isolation: isolate;
}

@media screen and (max-width: 992px) {
  .hero__inner {
    grid-template-columns: 1fr;
  }

  .hero__visual::after {
    background:
      linear-gradient(to bottom, rgba(8, 8, 8, .88) 0%, rgba(8, 8, 8, .72) 45%, rgba(8, 8, 8, .92) 100%);
  }
}

/* =========================================================
   スマートフォン調整
   ========================================================= */

@media screen and (max-width: 768px) {

  /* HEROはアドレスバーで跳ねない svh を使う */
  .hero {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 96px 6% 32px;
  }

  .hero__inner {
    min-height: 0;
    gap: 0;
  }

  .hero__eyebrow {
    font-size: .75rem;
    letter-spacing: .3em;
    margin-bottom: var(--sp-sm);
  }

  .hero__title {
    font-size: clamp(2.25rem, 10vw, 3rem);
    line-height: 1.4;
    margin-bottom: var(--sp-sm);
  }

  .hero__lead {
    font-size: .95rem;
    margin-bottom: var(--sp-md);
  }

  /* タップしやすい高さを確保 */
  .hero__cta,
  .ej-btn,
  .route-cards a,
  .visitor-btn {
    min-height: 52px;
  }

  .hero__cards {
    gap: 10px;
    margin-top: var(--sp-md);
  }

  .hero-card {
    min-height: 0;
    padding: 18px 20px;
  }

  .hero-card--countdown .timer {
    justify-content: space-between;
  }

  .timer__unit {
    padding: 0 8px;
  }

  .timer__unit span[data-cd] {
    font-size: 1.9rem;
  }

  .hero-card__meta {
    flex-direction: column;
    gap: 4px;
  }

  .hero-card--route {
    padding-right: 72px;
  }

  .hero-card--route .ej-arrow--circle {
    width: 42px;
    height: 42px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }

  .hero-card--route .ej-arrow--circle::after {
    right: 15px;
  }

  /* セクション余白をPCの約6割に */
  .sec {
    padding-top: clamp(52px, 11vw, 72px);
    padding-bottom: clamp(52px, 11vw, 72px);
  }

  .sec__title {
    font-size: clamp(1.35rem, 5.6vw, 1.75rem);
  }

  .intro__title {
    font-size: clamp(1.2rem, 5.4vw, 1.6rem);
  }

  .intro__text,
  .philosophy__body p,
  .mission__text {
    font-size: .95rem;
    line-height: 1.95;
  }

  /* 縦積みでも読める幅に */
  .intro__text br,
  .mission__text br {
    display: none;
  }

  /* ギャラリーは1.2枚見せてスワイプを促す */
  .gallery__item {
    flex: 0 0 78%;
  }

  .gallery__viewport {
    width: 100%;
  }

  .gallery__track {
    padding: 0 6%;
    gap: 10px;
  }

  .gallery__nav {
    display: none;
  }

  /* 開催概要は縦積みのラベル／値に */
  .outline__grid {
    gap: var(--sp-md);
  }

  .outline__head .sec__title {
    text-align: left;
  }

  .outline .info-table th,
  .outline .info-table td {
    display: block;
    width: auto;
    padding: 0;
  }

  .outline .info-table th {
    border-bottom: 0;
    padding-top: 16px;
    font-size: .8rem;
  }

  .outline .info-table td {
    padding-bottom: 16px;
  }

  /* 実績は2段組みに */
  .results__grid {
    gap: var(--sp-md);
  }

  .results__item {
    flex: 0 0 45%;
    padding: 0;
  }

  .results__value {
    font-size: clamp(2.8rem, 13vw, 3.6rem);
  }

  /* 使命は写真の上に文字を重ねる */
  .mission {
    min-height: 0;
    padding: clamp(56px, 12vw, 80px) 0;
  }

  .mission__copy {
    width: 88%;
    padding: 0;
  }

  /* カテゴリは2列 */
  .exhibit .exhibit-card {
    min-height: 112px;
    padding: 18px 12px;
  }

  .exhibit .exhibit-card__svg {
    width: 34px;
    height: 34px;
  }

  .exhibit .exhibit-grid {
    gap: 10px;
  }
}

@media screen and (max-width: 480px) {
  .hero__title {
    font-size: clamp(2rem, 9.5vw, 2.6rem);
  }

  .timer__unit span[data-cd] {
    font-size: 1.6rem;
  }

  .timer__unit i {
    font-size: .7rem;
  }

  .exhibit .exhibit-card__name {
    font-size: .8rem;
  }
}

/* 候補によって字数が変わるため、長い案（日本最大級のウェルネス国際展示会）でも
   2行に収まるサイズにする。短い案は余裕をもって大きく見える。 */
.hero__title {
  font-size: clamp(2rem, 3.9vw, 4rem);
}

@media screen and (max-width: 992px) {
  .hero__title {
    font-size: clamp(1.9rem, 6.4vw, 3.2rem);
  }
}

/* 展示会名は埋もれていたので、サイズ・太さ・下線で存在感を持たせる。
   ゴールドの罫は文字幅ぶんだけ引き、装飾になりすぎないようにする。 */
.hero__eyebrow {
  display: inline-block;
  font-family: var(--ff-base);
  font-size: clamp(1rem, 1.35vw, 1.4rem);
  font-weight: 700;
  letter-spacing: .26em;
  color: var(--c-gold-deep);
  padding-bottom: 10px;
  margin-bottom: var(--sp-md);
  border-bottom: 1px solid rgba(184, 149, 69, .65);
}

@media screen and (max-width: 768px) {
  .hero__eyebrow {
    font-size: clamp(.9rem, 3.6vw, 1.15rem);
    letter-spacing: .2em;
    padding-bottom: 8px;
    margin-bottom: var(--sp-sm);
  }
}

/* 理念の本文幅を広げる。行数が減って読みやすくなり、
   黒地の面としての収まりも良くなる。 */
.philosophy .sec__inner--text {
  max-width: 1100px;
}

.philosophy__body {
  max-width: 1040px;
}

@media screen and (max-width: 992px) {
  .philosophy .sec__inner--text,
  .philosophy__body {
    max-width: 100%;
  }
}

/* 句読点で区切った文節。行末に入らない塊だけが次行へ送られるため、
   文の途中で不自然に切れることがなくなる。 */
.ej-phrase {
  display: inline-block;
}

/* 文節が長すぎて1行に収まらない場合の保険 */
@media screen and (max-width: 480px) {
  .ej-phrase {
    display: inline;
  }
}

/* =========================================================
   スマホの崩れ直し（2026-08-15 追記）

   このファイルはメディアクエリの後ろに素の指定が何度も足されており、
   後ろの素の指定がスマホ用の値を打ち消していた。打ち消される側に
   なりようがないよう、まとめてファイル末尾に置く。
   ========================================================= */

@media screen and (max-width: 768px) {

  /* HERO CTA
     1026行の .hero__cta { min-width: min(340px,100%) } が
     860行の min-width:0 より後ろにあるため復活し、さらに
     box-sizing が content-box なので左右padding 64px が外側に付く。
     実測396px で画面(375px)からはみ出していた。 */
  .hero__cta {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  /* HERO下部カード
     1カラムでもトラック幅が min-content(カウントダウン315px+padding)まで
     広がり、右へはみ出していた。トラックの下限を0にして器に収める。 */
  .hero__cards {
    grid-template-columns: minmax(0, 1fr);
    max-width: 100%;
  }

  .hero-card {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
  }

  .hero-card--countdown .countdown,
  .hero-card--countdown .timer {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
  }

  /* 開催概要
     縦積みになると、旧テーマの section.section が持つ margin-top:80px が
     そのまま効いて、見出しと表の間に128pxの空白ができていた。

     幅も戻す。components.css で下層ページ向けに .section{width:88%} を
     入れているが、ここの .section は grid の中に入れ子になっているので、
     88%だと表だけ左右19px内側に寄って見出しと縦のラインが揃わなくなる。 */
  .outline__body > .section,
  .outline__body .info-table {
    margin-top: 0;
    width: 100%;
    padding: 0;
  }
}

@media screen and (max-width: 480px) {

  /* カウントダウンを1行に収める。文字サイズは変えず、
     ユニットの左右paddingだけ詰める（4ユニット×8px＝32px 短くなる）。 */
  .timer__unit {
    padding: 0 4px;
  }
}

/* =========================================================
   HEROのキャッチコピー（2026-08-15 追記）

   和文の下に英文を添える。英文は会場サインの金文字
   「WHERE DESIRE MEETS INNOVATION」と同じ見え方に寄せて、
   小さめ・大きな字間・ゴールドで置く。和文の主張を邪魔しない。
   ========================================================= */

.hero__lead-en {
  margin-top: 6px;
  font-family: var(--ff-display);
  font-size: clamp(.72rem, 1.4vw, .9rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-gold-deep);
  white-space: nowrap;
}

@media screen and (max-width: 768px) {

  .hero__lead-en {
    font-size: clamp(.66rem, 3vw, .8rem);
    letter-spacing: .14em;
    white-space: normal;
  }
}

/* =========================================================
   HERO見出しの3行化に伴うサイズ調整（2026-08-15 追記）

   見出しが「日本最大級の／セクシャルウェルネス・／フェムテック国際展示会」の
   3行になった。最長行は11文字なので、器の幅を文字数で割った値を上限にする。
   ・スマホ: .hero の左右padding 6% を引いて 330px → 330/11 = 30px 未満
   ・タブレット: 1カラムになるので画面幅基準で足りる
   nowrap は保険で外す。文言が伸びたときに画面外へ出るより折り返すほうが安全。
   ========================================================= */

.hero__title {
  white-space: normal;
}

@media screen and (max-width: 992px) {

  .hero__title {
    font-size: clamp(1.5rem, 5.4vw, 2.6rem);
  }
}

@media screen and (max-width: 768px) {

  .hero__title {
    font-size: clamp(1.45rem, 7.2vw, 2rem);
    line-height: 1.38;
  }
}

@media screen and (max-width: 480px) {

  .hero__title {
    font-size: clamp(1.35rem, 7.2vw, 1.75rem);
  }
}

/* PC幅の見出し。左カラムは46%（1440px上限なので実測595〜662px）しかないため、
   3.9vw だと最長行(11文字)が入りきらず5行に折れていた。
   11文字 × 上限51.2px = 563px で収まる値にする。 */
@media screen and (min-width: 993px) {

  .hero__title {
    font-size: clamp(1.9rem, 3.4vw, 3.2rem);
  }
}

/* =========================================================
   ギャラリーのスライダー化（2026-08-15 追記）

   もともとは横スクロールできるだけの並び（overflow-x:auto ＋
   scroll-snap）で、左右ボタンとページャーは動かない飾りだった。
   js/gallery.js で slick を当てたので、素の指定を打ち消す。
   ========================================================= */

.gallery__track.slick-initialized {
  display: block;
  overflow-x: visible;
  scroll-snap-type: none;
  padding: 0;
  gap: 0;
}

/* 末尾の余白用の擬似要素はスライドとして数えられてしまう */
.gallery__track.slick-initialized::after {
  content: none;
}

.gallery__track .slick-list {
  overflow: hidden;
}

/* slick が横幅をインラインで指定するので、flex-basis は解除する */
.gallery__track.slick-initialized .gallery__item {
  flex: none;
  height: auto;
  margin: 0 7px;
  scroll-snap-align: none;
}

.gallery__track .slick-track {
  display: flex;
  align-items: stretch;
}

/* 高さを揃える。slick は li に float を当てるので打ち消す */
.gallery__track .slick-slide {
  float: none;
  height: auto;
}

/* 拡大ボタン。見た目は画像のままにする */
.gallery__item-btn {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  overflow: hidden;
}

.gallery__item-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

.gallery__item-btn:hover img,
.gallery__item-btn:focus-visible img {
  transform: scale(1.04);
}

.gallery__item-btn:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 2px;
}

/* ボタンは押せるので、常に見える位置に置く */
.gallery__nav {
  display: block;
}

.gallery__nav.slick-disabled {
  opacity: 1;
}

/* ページャーの点。現在位置がひと目で分かるようにする */
.gallery__pager {
  gap: 10px;
}

.gallery__dot {
  cursor: pointer;
  transition: background-color .3s ease, transform .3s ease;
}

.gallery__dot.is-active {
  transform: scale(1.3);
}

@media screen and (max-width: 768px) {

  .gallery__track.slick-initialized .gallery__item {
    margin: 0 5px;
  }

  /* 1枚表示になるので、ボタンは写真に少し重ねる */
  .gallery__nav--prev {
    left: 4px;
  }

  .gallery__nav--next {
    right: 4px;
  }
}

/* =========================================================
   HERO見出しの登場（2026-08-15 追記）

   3行を伏せた位置から1行ずつせり上げる。行ごとに器で切り抜くので
   「下から現れる」ように見える。眉・キャッチ・ボタンも少しずつ遅らせて、
   上から順に組み上がる流れにする。
   ゴールドの英文だけは字間を詰めながら決まるようにして、
   会場サインの金文字らしい落ち着き方にした。
   ========================================================= */

.hero__title-line {
  display: block;
  overflow: hidden;
  /* 切り抜きで下端が欠けないよう、はみ出しぶんを確保して相殺する */
  padding-bottom: .1em;
  margin-bottom: -.1em;
}

.hero__title-line>span {
  display: inline-block;
  transform: translateY(115%);
  opacity: 0;
  animation: ej-hero-line 1.05s cubic-bezier(.16, .84, .44, 1) forwards;
  animation-delay: calc(var(--ej-line, 0) * .13s + .18s);
}

@keyframes ej-hero-line {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 眉・キャッチ・ボタンは、見出しが出そろってから静かに追いつく */
.hero__eyebrow,
.hero__lead,
.hero__lead-en,
.hero__cta {
  opacity: 0;
  animation: ej-hero-rise .9s cubic-bezier(.16, .84, .44, 1) forwards;
}

.hero__eyebrow {
  animation-delay: .05s;
}

.hero__lead {
  animation-delay: .72s;
}

.hero__cta {
  animation-delay: 1.02s;
}

@keyframes ej-hero-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 英文は字間が開いた状態から締まる */
.hero__lead-en {
  animation-name: ej-hero-track;
  animation-duration: 1.4s;
  animation-delay: .86s;
}

@keyframes ej-hero-track {
  from {
    opacity: 0;
    letter-spacing: .6em;
  }

  to {
    opacity: 1;
    letter-spacing: .22em;
  }
}

@media screen and (max-width: 768px) {

  /* スマホは字間が広いと折り返すので、詰め切る値を小さくする */
  @keyframes ej-hero-track {
    from {
      opacity: 0;
      letter-spacing: .4em;
    }

    to {
      opacity: 1;
      letter-spacing: .14em;
    }
  }
}

/* 動きを減らす設定では最初から出しておく */
@media (prefers-reduced-motion: reduce) {

  .hero__title-line>span,
  .hero__eyebrow,
  .hero__lead,
  .hero__lead-en,
  .hero__cta {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   実績の数字のカウントアップ（2026-08-15 追記）

   桁が増えるあいだ数字の幅が動くと、右にある単位まで揺れる。
   JS側で開始時に min-width を固定しているので、ここでは
   数字の並びが等幅になるようにして揺れ幅そのものを抑える。
   ========================================================= */

.results__num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* =========================================================
   実績セクションの金粉（2026-08-16 追記）

   黒地に流れるゴールドの曲線に沿って、金粉の粒をゆっくり走らせる。
   曲線も粒も同じSVGの座標系に置いてあるので、粒が線から外れない。
   走らせるのは CSS の offset-path。粒は弧の始点から終点まで一定速度で
   進み、両端では消えているので、出入りが唐突に見えない。

   もともと CSS の擬似要素で描いていた弧はSVG側に統合したので止める。
   ========================================================= */

.results::before,
.results::after {
  content: none;
}

.results__dust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.results__arc {
  fill: none;
  stroke: rgba(184, 149, 69, .16);
  stroke-width: 1;
}

.results__mote {
  /* fill は SVG 側の属性で渡す。ページ内に複数置くため
     グラデーションのIDが呼び出しごとに変わるので、CSSでは指定しない */
  offset-rotate: 0deg;
  animation:
    ej-mote-run var(--ej-dur, 15s) linear infinite,
    ej-mote-fade var(--ej-dur, 15s) ease-in-out infinite;
  animation-delay: var(--ej-delay, 0s);
}

/* 弧ごとに通り道を変える。パスは achievements.php の path と同じ */
.results__mote--up {
  offset-path: path("M -220 300 C 220 -70, 1220 -70, 1660 300");
}

.results__mote--dn {
  offset-path: path("M -220 300 C 220 670, 1220 670, 1660 300");
}

@keyframes ej-mote-run {
  from {
    offset-distance: 0%;
  }

  to {
    offset-distance: 100%;
  }
}

/* 端で消えているので、現れ方と消え方が唐突にならない */
@keyframes ej-mote-fade {

  0%,
  100% {
    opacity: 0;
  }

  14%,
  86% {
    opacity: .95;
  }
}

/* offset-path が使えない環境では粒を出さない（線だけ残る） */
@supports not (offset-path: path("M 0 0 L 1 1")) {

  .results__mote {
    display: none;
  }
}

/* 動きを減らす設定では止めて、粒も消す */
@media (prefers-reduced-motion: reduce) {

  .results__mote {
    animation: none;
    opacity: 0;
  }
}

/* 金粉は理念セクションでも使う。器が position:relative でないと
   inset:0 が効かないので、こちらにも同じ土台を用意する。 */
.philosophy {
  position: relative;
  overflow: hidden;
}

.philosophy .sec__inner {
  position: relative;
  z-index: 1;
}

/* 逆向きに流れる粒（2026-08-16 追記）
   一方向だけだと流れが単調なので、同じ弧を右から左へ辿る粒を混ぜる。
   animation-direction を反転させるだけなので、通る道は同じまま。 */
.results__mote--rev {
  animation-direction: reverse;
}

/* 明るい地（イントロ）の金粉（2026-08-16 追記）
   黒地と同じ線と粒を、アイボリーの上でも見えるように色だけ変える。
   地が明るいぶん線は少し濃く、粒は小さめにして主張させない。
   もともとイントロが持っていた擬似要素の弧は、粒の通り道と
   合わなくなるのでこちらへ統合する。 */
.intro::before,
.intro::after {
  content: none;
}

.results__dust--light .results__arc {
  stroke: rgba(184, 149, 69, .3);
}

.results__dust--light .results__mote {
  /* 白い芯が無いぶん、粒がにじんで見えないよう少し締める */
  opacity: 0;
}

.results__dust--light .results__mote {
  animation-name: ej-mote-run, ej-mote-fade-light;
}

@keyframes ej-mote-fade-light {

  0%,
  100% {
    opacity: 0;
  }

  14%,
  86% {
    opacity: .8;
  }
}

/* =========================================================
   使命セクションの暗幕（2026-08-17 追記）

   front-page.css:846（@media max-width:992px）の縦グラデは
   一度も効いていなかった。同じセレクタ・同じ詳細度(0,1,1)の
   素の指定が front-page.css:1235 にあり、メディアクエリは詳細度を
   一切上げないので、後ろに書いた 1235 行が全幅で後勝ちする。

   実測（375px・ブラウザで確認）:
     .mission__media x=0〜360 / 横グラデの透明開始(65%) x=234
     .mission__copy  x=22〜338
     → 本文の右 104px が素の写真の上。文字は白
       （.mission__text の rgba(245,245,245,.85)）なので明るい所で消える。

   下端の濃さは :846 の案（rgba .6）から上げてある。スマホでは
   .mission の min-height が実質効かず本文がセクション全体に広がるため、
   最終行がグラデの100%側に乗る。.6 だと明るい写真の上で
   白文字が約2.8:1 にしかならないので .78 まで敷く。

   打ち消しは必ずこのファイルの末尾に置くこと。
   1235行より前に書くと同じ理由でまた負ける。
   ========================================================= */

@media screen and (max-width: 992px) {

  .mission__media::after {
    background: linear-gradient(180deg,
        rgba(11, 11, 11, .92) 0%,
        rgba(11, 11, 11, .86) 55%,
        rgba(11, 11, 11, .78) 100%);
  }
}

/* =========================================================
   HEROカウントダウンの文字サイズ（2026-08-17 追記）

   縮小を狙った指定が3つあるが、どれも効いていなかった。
     front-page.css:906  @480 → 1.75rem
     front-page.css:1506 @768 → 1.9rem
     front-page.css:1648 @480 → 1.6rem
   いずれもセレクタが .timer__unit span[data-cd] で詳細度 (0,2,1)。
   対して front-page.css:1039 の
     .hero-card--countdown .timer__unit span[data-cd]
   は (0,3,1) の素の指定なので、メディアクエリの有無に関係なく常に強い。

   その結果 clamp(2.6rem, 3.9vw, 4.1rem) の下限 2.6rem＝41.6px が
   1067px 未満の全幅で固定されていた。375px では .hero-card の内寸が
   288px しかなく、4ユニットで約274px＝ほぼ余白ゼロ。

   打ち消すには同じだけ詳細度を上げる必要があるので、
   .hero-card--countdown を付けたまま書き直す。
   ========================================================= */

@media screen and (max-width: 768px) {

  .hero-card--countdown .timer__unit span[data-cd] {
    font-size: 1.9rem;
  }
}

@media screen and (max-width: 480px) {

  .hero-card--countdown .timer__unit span[data-cd] {
    font-size: 1.6rem;
  }
}


/* =========================================================
   2026-08-18 クライアント支給資料（HP修正.xlsx）による文言・構成変更

   ・HERO: 英文タグラインを展示会名の直下へ移動
   ・HERO: 見出しの最長行が11文字→18文字になったのでサイズを見直す
   ・INTRO: 挨拶文4段落 → リード＋会期・会場＋2文
   ・実績: 5項目＋注記リスト
   ・理念: 標語「性を、より健やかに。／産業を、より前へ。」を追加
   ========================================================= */

/* --- HERO: 展示会名 → 英文 → 見出し の並びにする ---------------- */
html body .hero__eyebrow {
  margin-bottom: 10px;
}

html body .hero__lead-en {
  margin-top: 0;
  margin-bottom: var(--sp-md);
}

/* --- HERO見出し（18文字化への対応） ------------------------------
   「セクシュアルウェルネス・フェムテック」は18文字。従来の上限
   （3.2rem＝51.2px）だと18×51.2×1.05 ≒ 968px で左カラム596pxを大きく超える。
   PC幅は左カラムを60%へ広げたうえで上限を2.5rem（40px）に下げ、
   狭い幅では縮めきらずに「・」で折り返させる（front-page.php で
   中黒ごとに inline-block へ分けている）。 */
.hero__title {
  letter-spacing: .03em;
}

@media screen and (min-width: 993px) {

  .hero__inner {
    grid-template-columns: minmax(0, 60%) minmax(0, 40%);
  }

  /* 実測: 左カラムの内寸は 1440px幅で712px / 1280px幅で632px / 1024px幅で504px。
     18文字 × フォントサイズ × 1.03（字間 .03em）がこれを超えると4行に折れる。
     2.7vw では 1440px で 721px となり、わずかに足りずに折れていた。 */
  .hero__title {
    font-size: clamp(1.5rem, 2.55vw, 2.4rem);
  }
}

@media screen and (max-width: 992px) {

  .hero__title {
    font-size: clamp(1.6rem, 4.6vw, 2.3rem);
  }
}

@media screen and (max-width: 768px) {

  .hero__title {
    font-size: clamp(1.4rem, 5.6vw, 1.9rem);
  }
}

@media screen and (max-width: 480px) {

  .hero__title {
    font-size: clamp(1.3rem, 5.6vw, 1.6rem);
  }
}

/* 見出しの行を「・」で分けた塊。折り返しは塊の境目だけで起きる */
.hero__title-chunk {
  display: inline-block;
}

/* --- INTRO ------------------------------------------------------- */
.intro__lead {
  font-size: clamp(.95rem, 1.35vw, 1.15rem);
  letter-spacing: .08em;
  line-height: 1.9;
  color: var(--c-ink-soft);
  margin-bottom: var(--sp-md);
}

.intro__facts {
  list-style: none;
  margin: 0 0 var(--sp-lg);
  padding: var(--sp-sm) 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px clamp(20px, 3vw, 40px);
  border-top: 1px solid rgba(184, 149, 69, .35);
  border-bottom: 1px solid rgba(184, 149, 69, .35);
}

.intro__facts li {
  font-family: var(--ff-display);
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  letter-spacing: .06em;
  color: var(--c-ink);
}

.intro__text--closing {
  margin-top: var(--sp-sm);
  font-family: var(--ff-display);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  letter-spacing: .06em;
  color: var(--c-ink);
}

/* --- 実績（5項目＋注記） ------------------------------------------
   項目が4→5になり、必ず折り返すようになった。折り返すと
   「隣り合う項目の間に縦罫」という前提が崩れ、2段目の先頭にも
   罫が出てしまうので、縦罫はやめて余白で区切る。 */
html body .results__item + .results__item::before {
  display: none;
}

html body .results__grid {
  gap: clamp(24px, 3.5vw, 56px);
}

html body .results__item {
  flex: 0 0 auto;
  min-width: min(240px, 100%);
}

html body .results__value {
  font-size: clamp(2.6rem, 4.4vw, 4.2rem);
}

.results__notes {
  list-style: none;
  margin: var(--sp-lg) auto 0;
  padding: 0;
  max-width: 900px;
  text-align: left;
}

.results__notes .results__note {
  margin-top: 6px;
  padding-left: 1.4em;
  text-indent: -1.4em;
  line-height: 1.9;
}

@media screen and (max-width: 768px) {

  html body .results__item {
    min-width: min(140px, 45%);
  }

  .results__notes {
    max-width: none;
  }
}

/* --- 理念の標語 ---------------------------------------------------
   .philosophy__body p (0,1,1) が既にサイズを持っているので、
   クラス1つ（0,1,0）では負ける。要素まで含めて詳細度を上げる。 */
html body .philosophy__body p.philosophy__pull {
  margin: var(--sp-lg) 0;
  font-family: var(--ff-display);
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  line-height: 1.7;
  letter-spacing: .1em;
  color: var(--c-gold-deep);
  text-align: center;
}

@media screen and (max-width: 480px) {

  html body .philosophy__body p.philosophy__pull {
    font-size: clamp(1.2rem, 6vw, 1.6rem);
  }
}


/* =========================================================
   理念セクションを白地にする（2026-08-19 クライアント指示）

   黒(実績) → 黒(理念) → 黒(来場) と黒面が3つ続いて重かった。
   .philosophy には黒地前提の指定が3か所（621行の背景色、
   625行の本文色、1212行の飾りの弧）あるので、まとめて上書きする。
   詳細度: 元の指定はどれもクラス1つなので、後ろに置けば勝つが、
   header.css / front-page.css の読み込み順に巻き込まれないよう
   html body を付けて明示的に上げておく。
   ========================================================= */

html body .philosophy {
  background-color: var(--c-bg);
}

html body .philosophy .sec__title {
  color: var(--c-ink);
}

html body .philosophy__body {
  color: var(--c-ink-soft);
}

/* 飾りの弧。黒地では白っぽい金でよかったが、明るい地では見えないので濃くする */
html body .philosophy::before {
  border-color: rgba(184, 149, 69, .35);
}

/* 標語のゴールド。--c-gold-deep は明るい地で 2.23 しかないため、
   明るい地用に用意してある --c-gold-on-light（#8A6B1E）を使う */
html body .philosophy__body p.philosophy__pull {
  color: var(--c-gold-on-light, #8A6B1E);
}


/* =========================================================
   私たちの使命：中央寄せに組み替える（2026-08-19 クライアント指摘）

   指摘は3点。
     ・文字が小さい            → 見出し・本文とも一段大きく
     ・写真の存在感のわりに意味が伝わらない
                               → 横グラデ（左だけ黒）をやめ、全面に薄い黒を敷く。
                                 写真は装飾として残しつつ、文字を主役にする
     ・左側だけに情報が詰まりすぎ → 左45%固定をやめ、中央に置く

   .mission__copy は 726行で width:min(560px,90%) と margin-left を持つので、
   同じ指定を打ち消す必要がある（html body で詳細度を上げる）。
   ========================================================= */

html body .mission--center {
  min-height: clamp(420px, 42vw, 560px);
  text-align: center;
}

/* 左だけ黒い横グラデ → 全面に均一な暗幕。中央に文字を置くため */
html body .mission--center .mission__media::after {
  background: linear-gradient(180deg,
      rgba(11, 11, 11, .84) 0%,
      rgba(11, 11, 11, .76) 50%,
      rgba(11, 11, 11, .86) 100%);
}

html body .mission--center .mission__copy {
  width: min(920px, 90%);
  margin-left: auto;
  margin-right: auto;
  padding: clamp(32px, 5vw, 64px) 0;
}

html body .mission--center .mission__copy .sec__eyebrow,
html body .mission--center .mission__copy .sec__title {
  text-align: center;
}

html body .mission--center .sec__title {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
}

.mission__lead {
  margin-top: var(--sp-sm);
  font-family: var(--ff-display);
  font-size: clamp(1.15rem, 2.1vw, 1.75rem);
  line-height: 1.8;
  letter-spacing: .08em;
  color: var(--c-gold-deep);
}

html body .mission--center .mission__text {
  margin-top: var(--sp-md);
  font-size: clamp(.95rem, 1.25vw, 1.125rem);
  line-height: 2.15;
  color: rgba(245, 245, 245, .92);
}

@media screen and (max-width: 768px) {

  html body .mission--center .mission__copy {
    width: 88%;
  }

  html body .mission--center .sec__title {
    font-size: clamp(1.5rem, 6.4vw, 2rem);
  }

  .mission__lead {
    font-size: clamp(1.05rem, 4.6vw, 1.4rem);
  }

  html body .mission--center .mission__text {
    font-size: .95rem;
    line-height: 2;
  }
}


/* =========================================================
   理念セクションを白地にしたときの取りこぼし（2026-08-20 修正）

   components.css:3158 に
     html body .philosophy .sec__eyebrow { color: var(--c-gold-deep) }
   という「理念は黒地」という前提の指定があり、白地へ変えたあとも
   そのまま効いて「PHILOSOPHY」が #C4A35A のまま残っていた（実測 2.28:1）。
   明るい地用のゴールドへ寄せる。front-page.css は components.css より
   後に読まれるので、同じ詳細度で上書きできる。

   来場登録ボタンの白抜き文字（VIP 3.41）は、文字を大きくするのではなく
   地色を #A9863C → #8F6F26 に一段暗くして 4.7 で解決した（components.css）。
   サイドバーの固定バーにある同じボタンは 14px なので、
   文字サイズでは「大きい文字」の基準に届かないため。
   ========================================================= */

html body .philosophy--light .sec__eyebrow {
  color: var(--c-gold-on-light, #8A6B1E);
}


/* =========================================================
   2026-08-22 クライアント支給資料（HP修正0822.xlsx）の反映
   ---------------------------------------------------------
   ① HEROの暗幕を「均一の黒」から左→右のグラデーションへ
      「現在は暗くしているので文字は読みやすい反面、せっかくの展示会写真が
        ほぼ見えなくなっている。左75〜80%黒 → 中央55〜60%黒 → 右30〜40%黒
        という左から右へのグラデーションが良いかもしれません」
      文字は左にあるので左は十分暗いまま、右の人物・会場は見せる。
      指示の数値そのままだと左が .97 → .80 に薄まるので、
      見出しの可読性を落とさないよう .hero__copy 側に control の影を足す。
   ② 実績の数字をさらに大きく（「今よりも数字を大きくしてほしい」）
   ③ 「2027開催概要」直後に置いた2つのCTA（.route-cta）の意匠

   ※このファイルは components.css より後に読まれる。同じ詳細度で勝てる。
     追記は必ずファイル末尾に置くこと（途中に足すとメディアクエリが負ける）。
   ========================================================= */

/* ---- ① HEROの暗幕 ---- */
.hero__visual::after {
	background:
		linear-gradient(to right,
			rgba(8, 8, 8, .80) 0%,
			rgba(8, 8, 8, .76) 22%,
			rgba(8, 8, 8, .57) 55%,
			rgba(8, 8, 8, .35) 100%),
		linear-gradient(to bottom,
			rgba(8, 8, 8, .50) 0%,
			rgba(8, 8, 8, .12) 42%,
			rgba(8, 8, 8, .80) 100%);
}

/* 暗幕を薄くしたぶん、白文字側で読みやすさを担保する */
.hero__copy {
	text-shadow: 0 1px 12px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .45);
}

/* 992px以下は縦積みで写真の上に文字が重なるため、従来どおり均一に落とす */
@media screen and (max-width: 992px) {
	.hero__visual::after {
		background:
			linear-gradient(to bottom, rgba(8, 8, 8, .88) 0%, rgba(8, 8, 8, .72) 45%, rgba(8, 8, 8, .92) 100%);
	}
}

/* ---- ② 実績の数字 ---- */
html body .results__value {
	font-size: clamp(3.2rem, 5.8vw, 5.6rem);
	line-height: 1.05;
}

html body .results__item {
	min-width: min(260px, 100%);
}

/* ---- ③ 出展／来場の2CTA ---- */
.route-cta {
	padding-top: 0;
}

.route-cta__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: clamp(16px, 2vw, 28px);
}

.route-cta__item {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 8px 16px;
	min-height: 112px;
	padding: clamp(20px, 2.4vw, 30px) clamp(22px, 2.6vw, 34px);
	border: 1px solid rgba(140, 110, 40, .34);
	background: #fff;
	color: var(--c-ink);
	text-decoration: none;
	transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.route-cta__item:hover,
.route-cta__item:focus-visible {
	border-color: var(--c-gold, #C4A35A);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .10);
	transform: translateY(-2px);
}

.route-cta__label {
	grid-column: 1;
	font-family: var(--ff-display);
	font-weight: 900;
	font-size: clamp(1.15rem, 1.9vw, 1.5rem);
	letter-spacing: .06em;
}

.route-cta__lead {
	grid-column: 1;
	font-size: clamp(.85rem, 1.2vw, .95rem);
	color: var(--c-muted, #736C62);
}

.route-cta__item .ej-arrow {
	grid-column: 2;
	grid-row: 1 / span 2;
}


/* =========================================================
   2026-08-23｜明るいセクションの地色を1つに揃えた
   ---------------------------------------------------------
   トップページの明るい面に2色が混ざっていた（実測）。
     #FAF9F6 … body / .route-cta / .exhibit / .philosophy--light
     #F8F6F1 … .intro / .outline / .news（「アイボリー地」として直書きされていた）
   差は輝度で2ほどしかないが、セクションが隣り合う境目で色の段差として見える。
   8/22の指示でセクションの並びを変えたことで、#F8F6F1 と #FAF9F6 が
   隣接する箇所（開催概要 → 出展／来場の2CTA）ができてしまい目立っていた。

   3か所の直書きを外し、**すべて `--c-bg`（#FAF9F6）**に寄せた。
   以後、明るい地は `var(--c-bg)` だけを使うこと。白いカードは `--c-surface`（#FFFFFF）。
   ========================================================= */

html body .sec--light,
html body .intro,
html body .outline,
html body .news,
html body .route-cta,
html body .exhibit,
html body .philosophy--light {
  background-color: var(--c-bg);
}

/* 2026-08-24: ギャラリーの先頭に置いた動画のコマ。
   写真と同じ大きさのまま、再生マークと MOVIE の札で動画だと分かるようにする。 */
.gallery__item--movie .gallery__item-btn {
	position: relative;
}

.gallery__item--movie .gallery__item-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(10, 9, 8, .34);
	pointer-events: none;
	transition: background .3s ease;
}

.gallery__item--movie .gallery__item-btn:hover::after {
	background: rgba(10, 9, 8, .18);
}

.gallery__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: clamp(52px, 6vw, 74px);
	height: clamp(52px, 6vw, 74px);
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	pointer-events: none;
	z-index: 2;
}

.gallery__play::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: .55em 0 .55em .95em;
	border-color: transparent transparent transparent #14110F;
	font-size: clamp(15px, 1.7vw, 21px);
}

.gallery__movie-label {
	position: absolute;
	left: 12px;
	top: 12px;
	z-index: 2;
	padding: 3px 10px;
	background: var(--c-gold, #B99548);
	color: #14110F;
	font-family: var(--ff-display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	pointer-events: none;
}

/* モーダルで動画を再生するとき */
.ej-modal__video,
.ej-modal__frame {
	display: block;
	width: 100%;
	max-height: 78vh;
	aspect-ratio: 16 / 9;
	background: #000;
	border: 0;
}


/* =========================================================
   前回開催の様子 — 動画と写真を2行に分ける（2026-08-27 追記）

   クライアント指示「動画と写真を2行で分けていただけますか？」。
   動画は1行目に単独で置き、写真のスライダーは2行目のまま。
   ※ このファイルは末尾に追記する決まり（途中に足すと
     メディアクエリの後ろの素の指定に打ち消される）。
   ========================================================= */

.gallery__movie-row {
	display: flex;
	justify-content: center;
	margin: 0 auto 34px;
	padding: 0 5%;
}

.gallery__movie-row .gallery__item {
	flex: none;
	width: min(560px, 100%);
	margin: 0;
}

/* スライダー化されていない素の .gallery__item は flex-basis を持つので打ち消す */
.gallery__movie-row .gallery__item--movie .gallery__item-btn {
	aspect-ratio: 4 / 3;
	cursor: pointer;
}

@media screen and (max-width: 768px) {

	.gallery__movie-row {
		margin-bottom: 24px;
		padding: 0 6%;
	}
}


/* 2026-08-27: 動画の表紙を支給の「OFFICIAL AFTER MOVIE」画像に差し替えたところ、
   絵の中の同じ文言と MOVIE の札が左上で重なった。札は右上へ逃がす。 */
.gallery__movie-row .gallery__movie-label {
	left: auto;
	right: 12px;
}


/* =========================================================
   携帯でのHEROの並び替え（2026-08-27 追記）

   クライアント指示（LINE 14:15〜14:17）:
     「携帯でみた際に、下記のような調整をしてほしいです」
     「来場検討と出展検討を最初の画面に持っていきたいです。
       今トップに4つのボタンの順位を
       1、来場検討 2、出展検討 3、開催まで 4、展示会概要を見る」

   カードが1列になる 992px 以下で、order を使って順番を入れ替える。
   「展示会概要を見る」だけは HERO のコピーの中にあり order では動かせないので、
   front-page.php でカードの後ろにもう1つ置き、ここで出し分けている。
   ※ このファイルは末尾に追記する決まり（途中に足すとメディアクエリの後ろの
     素の指定に打ち消される）。
   ========================================================= */

/* 携帯用の「展示会概要を見る」は、既定では出さない */
.hero__cta--sp {
	display: none;
}

@media screen and (max-width: 992px) {

	.hero__cards .hero-card--visit {
		order: 1;
	}

	.hero__cards .hero-card--exhibit {
		order: 2;
	}

	.hero__cards .hero-card--countdown {
		order: 3;
	}

	/* HEROのコピーの中のボタンは隠し、カードの後ろのものを出す */
	.hero__copy .hero__cta {
		display: none;
	}

	.hero__cta--sp {
		display: inline-flex;
		position: relative;
		z-index: 2;
		margin: var(--sp-sm) auto 0;
	}
}

/* =========================================================
   実績の数字の「＋」を小さく（2026-08-27 追記）

   クライアント指示（LINE 14:20）:
     「「100+」の「＋」を少し小さくしてほしいです」

   数字と同じ大きさで出ていたので、6割ほどに落として少し上に付ける。
   金のグラデーションは親（.results__value）に掛かっているので、
   別のspanに分けても色は数字と揃ったまま。
   ========================================================= */

.results__affix {
	letter-spacing: 0;
}

.results__affix--suf {
	font-size: .62em;
	vertical-align: .30em;
	margin-left: .02em;
}

.results__affix--pre {
	font-size: .62em;
	vertical-align: .10em;
	margin-right: .04em;
}

/* 狭い画面でのボタンの余白（2026-08-29）

   .ej-btn は padding: 0 32px（--sp-md）＋ gap: 32px。
   スマホでは width:100% になるが、幅320pxの端末では
   器288px から 96px を余白と間隔が持っていき、文字に146pxしか残らない。
   そのため「出展資料請求はこ／ちら（無料）」と途中で切れていた。

   文字に必要なのは「出展資料請求はこちら」の約173px。
   余白と間隔を詰めて230px前後を確保し、折り返しは「（」の手前だけに寄せる。 */
@media screen and (max-width: 600px) {

  .ej-btn {
    gap: 12px;
    padding: 0 16px;
  }
}