@charset "UTF-8";

/* ==========================================================
   おしゃべりステーション LP
   デザインカンプ: 750px幅（1rem = カンプ10px）
   ========================================================== */

:root {
  --yellow: #FFF258;
  --cream: #FFFADA;
  --navy: #132B51;
  --orange: #EC695E;
  --gold-line: #DFCFA3;
  --gray-bg: #C7C7C7;
  --gray-text: #6E6E6E;
}

/* --- reset --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

ul {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* --- base --- */
html {
  scroll-behavior: smooth;
  /* カンプ750px = 75rem。768px未満はビューポート幅に追従して全幅表示 */
  font-size: calc(100vw / 75);
}

/* PC版レイアウト(768px〜): メイン500px固定 */
@media (min-width: 768px) {
  html {
    /* カラム500px時: 500/75 */
    font-size: 6.6667px;
  }
}

body {
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 500;
  color: var(--navy);
  background-color: var(--cream);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.page {
  position: relative;
  margin: 0 auto;
  background-color: var(--cream);
  overflow: hidden;
}

@media (min-width: 768px) {
  .page {
    max-width: 500px;
  }
}

/* PC版メニュー（カラム右横・追従） */
.pc-nav {
  display: none;
}

/* メニューは「カラム右横に収まる幅」があるときだけ表示する。
   必要幅 = 50% + 253px + 266px → 1038px。1040px未満では非表示
   （スクロールで全セクション到達できるため機能上の欠落はない。2026-08-04決定） */
@media (min-width: 1040px) {
  /* 画像は266x70で、吹き出し(250x54)の周囲8pxが背景同色の縁。
     縁は見た目の余白なので、位置・間隔は吹き出し基準に合わせて縁ぶんを差し引いてある
     （カンプ1920px時: 画像左1213px / 吹き出し左1221px、送り72.5px） */
  .pc-nav {
    display: flex;
    flex-direction: column;
    gap: 2.5px;
    position: fixed;
    left: calc(50% + 253px);
    /* 7項目(高さ約505px)の縦中央寄せ。上限288pxはカンプの初期位置 */
    top: clamp(16px, calc(50vh - 252px), 288px);
    width: 266px;
    z-index: 5;
  }

  .pc-nav a {
    display: block;
    transition: opacity 0.2s, transform 0.2s;
  }

  .pc-nav a:hover {
    opacity: 0.8;
    transform: translateX(4px);
  }
}

/* アンカー移動時に見出しが詰まりすぎないように */
.section {
  scroll-margin-top: 20px;
}

/* PC版レイアウト時の背景（吹き出し壁紙・スクロール固定）
   全配置を1枚(基準1600x1000・@2x書き出し)に焼き込み、cover表示。
   ウィンドウサイズが変わっても比率保持で拡大縮小され、
   吹き出し同士の位置関係は変わらず、入り切らない分は端から切れる */
@media (min-width: 768px) {
  body {
    position: relative;
    background-color: #FFFCF6;
    background-image: url("../img/bg-pattern-pc.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
  }

  .page {
    z-index: 1;
  }
}


/* ==========================================================
   ファーストビュー
   ========================================================== */
.hero {
  position: relative;
  height: 93.4rem;
  background-color: var(--yellow);
}

/* 線路（レール一式）: ヒーロー下端を越えて次セクションまで伸びる */
.hero__rails {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}

/* 人・小物の前景 */
.hero__figures {
  position: absolute;
  top: 4.9rem;
  left: 0;
  width: 100%;
  z-index: 3;
}

.hero__title {
  position: absolute;
  top: 6.9rem;
  left: 14.1rem;
  width: 47.2rem;
  z-index: 3;
}

/* カウンター吹き出しはタイトル直下中央。左右の人物の手が上にかかるため z-index は人物より下 */
.hero__counter {
  position: absolute;
  top: 42.8rem;
  left: 17.6rem;
  width: 40.6rem;
  z-index: 2;
}

/* 文字レイヤーはヒーロー全幅。3行とも text-align:center なので、
   総数の桁数が変わっても常にページ中央で揃う */
.hero__counter-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Adobe Fonts (kit: ogg6qma) */
  font-family: "ads-hikari", "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  z-index: 2;
}

.hero__counter-label,
.hero__counter-num,
.hero__counter-unit {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}

/* 各 top はカンプの字面(ink)位置に合わせた値。フォントのベアリングぶんを引いてある */
.hero__counter-label {
  top: 50.1rem;
  font-size: 3.4rem;
}

.hero__counter-num {
  top: 54rem;
  font-size: 9.8rem;
  color: #DC4B22;
}

.hero__counter-unit {
  top: 63.9rem;
  font-size: 3.4rem;
  /* 長体ではなく字詰め（カンプの各字の字面幅は ads-hikari 34px の素の幅と一致）。
     text-indent は letter-spacing が最後の字の後ろにも入るぶんの中央ずれ補正 */
  letter-spacing: -1rem;
  text-indent: -1rem;
}

.hero__hito03 {
  position: absolute;
  top: 45.7rem;
  left: 0;
  width: 24.1rem;
  z-index: 4;
}

.hero__wave {
  position: absolute;
  bottom: -0.1rem;
  left: 0;
  width: 100%;
  height: 22rem;
  z-index: 1;
}

/* ==========================================================
   セクション共通
   ========================================================== */
.section {
  position: relative;
  z-index: 1;
}

.section__title {
  width: 57.5rem;
  margin: 0 auto 2.6rem;
}

/* @2x書き出しが正確に2倍でない(575x160に対し1146x316)ため、
   高さを明示してカンプ通り160pxに固定する(1x/2xで高さが変わるのも防げる) */
.section__title img {
  width: 100%;
  height: 16rem;
}

/* できたてコミュニティ: 見出しは他セクションと同じ575x160。横の人物は hito07 で別置き */
.section__title--dekitate {
  margin-bottom: 1.6rem;
  position: relative;
  z-index: 1;
}

.section__title--gacha {
  margin-bottom: 2rem;
}

.section__title--stamp {
  margin-bottom: 1.7rem;
}

/* --- トピックカード --- */
/* 重なり順: 見出し → 見出し横の人 → カード */
.topic-card {
  position: relative;
  z-index: 2;
  margin: 0 4.8rem;
  /* 左右2.4rem = カンプの区切り線の始点(カード左端+24px)に合わせる */
  padding: 1.5rem 2.4rem;
  background-color: #fff;
  border-radius: 4rem;
}

/* 初期表示は5件。「もっとみる」で5件ずつ追加表示 */
.topic-list__item.is-hidden {
  display: none;
}

.topic-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  width: 100%;
  /* 上下で振り分けてカード高さを変えずに文字だけ4px下げる（「とじる▲」も同じボタン） */
  padding: 1.8rem 0 1rem;
  border-top: 0.2rem solid var(--line-color, #FFE29D);
  font-size: 2.8rem;
  /* カンプの行送り40px */
  line-height: 4rem;
  font-weight: 700;
  color: var(--accent, #FDD32B);
  transition: opacity 0.2s;
}

.topic-more:hover {
  opacity: 0.7;
}

.topic-more__arrow {
  font-size: 2rem;
  color: var(--accent, #FDD32B);
}

.topic-list__item + .topic-list__item {
  border-top: 0.2rem solid var(--line-color, #FFE29D);
}

.topic-list__link {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  min-height: 12.3rem;
  /* 区切り線より9px内側からアイコンが始まる（カンプ実測） */
  padding: 2.15rem 0 2.15rem 0.9rem;
  transition: opacity 0.2s;
}

.topic-list__link:hover {
  opacity: 0.7;
}

.topic-list__icon {
  flex: none;
  width: 4.7rem;
}

.topic-list__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 2.8rem;
  /* カンプの行送り40px */
  line-height: 4rem;
}

/* できたてコミュニティ: サークル名を立たせ、定型文は薄く。下に紹介文2行 */
/* アイコン+タイトルを1ブロック（アイコンはタイトルの上下中央）、紹介文はタイトルの左端に揃える */
/* 紹介文が無いコミュニティでも行の高さは min-height で揃うため、
   縦中央寄せにして下側だけ空くのを防ぐ。
   align-items と gap は .topic-list__link の横並び用の値を打ち消す */
.topic-list__link--detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  padding: 2.15rem 0 2.15rem 0.9rem;
}

.topic-list__head {
  display: flex;
  align-items: center;
  gap: 2.4rem;
}

.topic-list__ttl {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 2.8rem;
  /* カンプの行送り34px */
  line-height: 3.4rem;
}

.topic-list__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 1.25rem 0 0 7rem;
  font-size: 2.2rem;
  /* カンプの行送り27px */
  line-height: 2.7rem;
  /* 紹介文だけ本文(500)より細く */
  font-weight: 400;
}

/* ==========================================================
   各セクション
   ========================================================== */
.sec-dekitate {
  margin-top: -1.2rem;
  /* 見出し吹き出しがFVから伸びる線路(hero__rails z2)より手前に来るように */
  z-index: 2;
  --line-color: #FFE29D;
  --accent: #FDD32B;
}

/* 見出し右の人物。カンプではカードの下に潜る（z-index はカードより下） */
.sec-dekitate__hito {
  position: absolute;
  top: 8.6rem;
  left: 56.8rem;
  width: 12.3rem;
  z-index: 1;
}

/* --- 装飾（レール・人・木の統合画像） --- */
.bg-break img {
  width: 100%;
}

/* 紹介文を2px詰めた分（5件で10px）カードが縮むので、以降がカンプ位置から動かないよう足す */
.bg-break--1 {
  margin: 4.85rem 0 -3rem;
}

.bg-break--2 {
  margin: 4rem 0 -7.3rem;
}

.sec-new {
  margin-top: 0;
  --line-color: #C8EBC4;
  --accent: #56B877;
}

.sec-new .section__title {
  margin-bottom: 1.6rem;
}

.sec-new__hito {
  position: absolute;
  top: 8.8rem;
  left: 3.8rem;
  width: 10.2rem;
  z-index: 1;
}

.sec-boshu {
  margin-top: 7rem;
  --line-color: #FFD6D3;
  --accent: #EC695E;
}

.sec-boshu .section__title {
  margin-bottom: 1.6rem;
}

.sec-boshu__hito-left {
  position: absolute;
  top: 7.7rem;
  left: 3.6rem;
  width: 9.1rem;
  z-index: 1;
}

.sec-boshu__hito-right {
  position: absolute;
  top: 9.2rem;
  left: 56.8rem;
  width: 16.6rem;
  z-index: 1;
}

/* --- 公式サークルめぐりイベント バナー（コメント待ってますの下） --- */
.cp-banner {
  /* カードと同じ左右余白=幅654px相当 */
  margin: 4rem 4.8rem 0;
}

.cp-banner a {
  display: block;
  transition: opacity 0.2s;
}

.cp-banner a:hover {
  opacity: 0.8;
}

/* --- 回してみる？（ガチャ）--- */
/* ガチャ本体のスタイルは css/gacha.css（beach.jp 公式サークル館の移植） */
.sec-gacha {
  margin-top: 0;
}

.gacha-card {
  margin: 0 4.8rem;
  padding: 2.4rem;
  background-color: #fff;
  border-radius: 4rem;
}

/* --- サークルカテゴリ別 --- */
.sec-category {
  margin-top: 6.6rem;
  --line-color: #FFE29D;
  --accent: #FDD32B;
}

.sec-category .section__title {
  margin-bottom: 2.8rem;
}

.category-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem 1.9rem;
  margin: 0 4rem 2.9rem;
}

.category-tabs__btn {
  display: inline-block;
  padding: 0.8rem 2rem;
  font-size: 2.9rem;
  line-height: 1.3;
  font-weight: 500;
  color: var(--orange);
  background-color: #fff;
  border: 0.3rem solid var(--orange);
  border-radius: 10rem;
  transition: opacity 0.2s;
}

.category-tabs__btn:hover {
  opacity: 0.8;
}

.category-tabs__btn.is-active {
  color: #fff;
  background-color: var(--orange);
  font-weight: 700;
}

/* --- すべてのコミュニティ --- */
.sec-all {
  margin-top: 7rem;
  /* もっとみる等はできたてと同じ黄色系 */
  --line-color: #FFE29D;
  --accent: #FDD32B;
}

.sec-all .section__title {
  margin-bottom: 1.6rem;
}

/* カンプはカード幅660px(他カードより左右3px広い) */
.all-card {
  margin: 0 4.5rem 0.6rem;
  padding: 2.4rem 2.4rem 0.9rem;
}

/* コミュニティ名の2列カードグリッド */
.all-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* .topic-list__item の区切り線はグリッドでは使わない */
.all-grid .topic-list__item + .topic-list__item {
  border-top: none;
}

/* セルの高さは全カード共通で3行ぶん(文字3行10.2rem+上下パディング2.4rem)に固定 */
.all-grid a {
  display: block;
  height: 12.6rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--accent, #FDD32B);
  border-radius: 0.8rem;
  font-size: 2.6rem;
  line-height: 3.4rem;
  transition: background-color 0.2s;
}

/* 万一3行を超える名前が来ても枠内で省略(現データの最長25字=3行ちょうど) */
.all-grid a span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.all-grid a:hover {
  background-color: #FFF6D9;
}

/* このカードだけ「もっとみる」上の横線なし */
.all-card .topic-more {
  margin-top: 1.4rem;
  border-top: none;
}

/* --- スタンプラリー --- */
.sec-stamp {
  margin-top: 7rem;
}

.coming-soon {
  display: grid;
  place-items: center;
  height: 22rem;
  margin: 0 4.8rem;
  background-color: var(--gray-bg);
  border-radius: 3rem;
}

.coming-soon__text {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 4.8rem;
  color: var(--gray-text);
}

/* ==========================================================
   フッター
   ========================================================== */
.footer {
  position: relative;
  height: 54.6rem;
  margin-top: 0;
}

.footer__wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 29rem;
}

.footer__deco {
  position: absolute;
  bottom: 16.1rem;
  left: 0;
  width: 100%;
}

.footer__logo {
  position: absolute;
  bottom: 9rem;
  left: 50%;
  transform: translateX(-50%);
  width: 50rem;
}

.footer__copyright {
  position: absolute;
  bottom: 3rem;
  left: 0;
  width: 100%;
  text-align: center;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
  color: #999;
}

.footer__logo a {
  display: block;
  transition: opacity 0.2s;
}

.footer__logo a:hover {
  opacity: 0.8;
}