@charset "UTF-8";

/* ==========================================
   活動紹介（works）
   XD: 01_TOP_SP の works（375px・背景 y=1341 h=689）、01_TOP_PC の works（1366px・背景 x=0 y=1569 1163×730）
   y は背景の上端からの値。画像（スライダー）は Splide（js/main.js。padding・gap はそこで決める）
   ========================================== */
.activity {
  margin: 0 0 80px;
  padding: 0;
  overflow: hidden;
}

.activity__bg-box {
  /* XD SP: 背景 375×689・影 1 1 5。見出しの行の上端は 50.65、タブは 116、画像の下端は 639（下 50） */
  box-sizing: border-box;
  width: 100%;
  padding: 50.65px 0 50px;
  background-color: var(--color-white);
  box-shadow: var(--shadow-btn);
}

.activity__inner {
  box-sizing: border-box;
  width: 100%;
  padding: 0 15px; /* XD SP: 本文 x=15、タブ x=14 */
}

.activity__title {
  /* XD SP: 見出し YuGo-Bold 30px・字間 3px・#555・中央、行の上端 y=1391.15（x=13.5 w=129）。最後の字の後の字間 3px を中央揃えから外す */
  position: relative;
  display: inline-block;
  width: auto;
  height: 30px;
  margin: 0 auto 35.35px;
  font-family: var(--font-ja);
  font-size: 30px;
  font-weight: 700;
  line-height: 1; /* 30px ÷ 30px */
  letter-spacing: 0.1em; /* 3px ÷ 30px */
  color: var(--color-text);
  text-align: center;
  text-indent: -1.5px;
  isolation: isolate; /* 波線（::after の z-index -1）が白い背景 .activity__bg-box の下に隠れないようにする */
}

.activity__title::after {
  /* XD SP: 波線（パス 128）x=14.28 y=1416.14 127.08×9.87 → 見出しの上端から 25 */
  content: "";
  position: absolute;
  bottom: -4.86px;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 9.87px;
  background-image: url("../../img/wavyline.svg");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 100%;
}

.activity__tabs {
  /* XD SP: タブ x=14・132・249 y=1457 110×50 角丸 10 影 0 3 3。本文 1 行目のベースライン y=1561 */
  display: flex;
  gap: 7.5px;
  justify-content: center;
  width: 100%;
  margin: 0 0 36.5px -1px;
}

.activity__tab-btn {
  /* XD SP: 文字 YuGo-Bold 16px（オンライン販売は 14px）、ベースライン y=1488（タブの上端から 31） */
  display: block;
  flex: 0 0 110px;
  box-sizing: border-box;
  width: 110px;
  min-width: 0;
  height: 50px;
  padding: 0;
  border: none;
  border-radius: 10px;
  font-family: var(--font-ja);
  font-size: 16px;
  font-weight: 700;
  line-height: 3.1875; /* 51px ÷ 16px */
  color: var(--color-accent);
  white-space: nowrap;
  background-color: var(--color-white);
  box-shadow: var(--shadow-card);
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
  cursor: pointer;
}

.activity__tab-btn--active {
  color: var(--color-white);
  background-color: var(--color-main);
}

@media (any-hover: hover) {
  .activity__tab-btn:hover {
    color: var(--color-white);
    background-color: var(--color-main);
  }
}

.activity__tab-btn[data-tab="online"] {
  font-size: 14px;
  line-height: 3.6429; /* 51px ÷ 14px（切り上げて 51px ちょうどにする） */
}

.activity__desc {
  /* XD SP: 本文 YuGo-Medium 16px・行の高さ 24px・#555・左揃えの 8 行（x=15）。XD は括弧を詰めない（Chrome の既定は詰めて 1 行に 21.5 字入る） */
  margin: 0 0 35.5px;
  font-family: var(--font-ja);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5; /* 24px ÷ 16px */
  color: var(--color-text);
  text-align: left;
  text-spacing-trim: space-all;
}

.activity__desc-line {
  display: block;
}

.activity__gallery {
  /* XD SP: 画像 250×209 角丸 20、y=1771。1 枚目の x=63（中央）、間隔 24 */
  width: 100%;
  overflow: hidden;
}

.activity__img {
  display: block;
  width: 250px;
  height: 209px;
  border-radius: 20px;
  object-fit: cover;
}

@media (width >= 768px) {
  .activity {
    margin: 0;
    padding: 0 0 121px;
  }

  .activity__bg-box {
    /* XD PC: 背景 x=0 w=1163（右が丸い）h=730。見出しの上端は 80、画像の下端は 650（下 80）。1366px より広いときは右端を中身の右端（中心 + 480）にそろえる */
    width: min(100%, 50vw + 480px);
    min-height: 730px;
    padding: 80px 0;
    border-radius: 0 100px 100px 0;
  }

  .activity__inner {
    /* XD PC: 見出し・タブ・本文は x=203（960px の中身の左端）。1366px 未満は左 16px 以上 */
    max-width: 960px;
    margin-left: max(16px, 50vw - 480px);
    padding: 0;
  }

  .activity__title {
    /* XD PC: 見出し YuGo-Bold 40px・字間 4px・左揃え（x=203 w=172）、ベースライン y=1684（行の上端 1649）、タブの上端 y=1721 */
    display: inline-block;
    height: auto;
    margin: 0 0 29.6px;
    font-size: 40px;
    line-height: 42.4px; /* 比率（1.06）にすると 1/64px ずれて位置が 1px 動くので px のまま（AUDIT CSS-1 の要確認） */
    letter-spacing: 0.1em;
    text-align: left;
    text-indent: 0;
  }

  .activity__title::after {
    /* XD PC: 波線 x=203.38 y=1680.89 171.43×13.32 → 見出しの上端から 31.89 */
    bottom: -2.8px;
    height: 13.32px;
  }

  .activity__tabs {
    /* XD PC: タブ x=203・412・621 y=1721 190×65 角丸 20（間隔 19）。本文 1 行目のベースライン y=1850（行の上端 1832.5） */
    display: flex;
    gap: 19px;
    justify-content: flex-start;
    width: auto;
    margin: 0 0 46.5px;
  }

  .activity__tab-btn {
    /* XD PC: 文字 YuGo-Bold 20px・ベースライン y=1762（タブの上端から 41） */
    flex: 0 0 190px;
    width: 190px;
    height: 65px;
    border-radius: 20px;
    font-size: 20px;
    line-height: 3.4; /* 68px ÷ 20px */
  }

  .activity__tab-btn[data-tab="online"] {
    font-size: 20px;
    line-height: 3.4; /* 68px ÷ 20px */
  }

  .activity__desc {
    /* XD PC: 本文 x=203 w=687.36 の 3 行（ベースライン 1850・1874・1898）。画像の上端 y=1969（本文の下端 1904.5 から 64.5） */
    height: 136.5px; /* 本文の上端 263.5 から画像の上端 400 まで。タブで行数が変わっても、画像の位置は動かさない */
    margin-bottom: 0;
  }

  .activity__desc[data-tab="ranch"],
  .activity__desc[data-tab="online"] {
    /* XD PC: 牧場・オンライン販売の本文は行の高さ 27px。文字の枠の幅は牧場 約 733（2 文目が 2 行）、オンライン販売 約 448（4 行）。js/main.js が data-tab を付け替える */
    height: 138px;
    margin-top: -1.5px; /* 行の高さが 3px 増えるぶん、1 行目のベースラインを動かさない */
    line-height: 1.6875; /* 27px ÷ 16px */
  }

  .activity__desc[data-tab="ranch"] {
    max-width: 736px;
  }

  .activity__desc[data-tab="online"] {
    max-width: 448px;
  }

  .activity__img {
    /* XD PC: 画像 300×250 角丸 20、y=1969。x=165・489・813（間隔 24） */
    width: 300px;
    height: 250px;
  }
}