@charset "UTF-8";

/* ==========================================================
   りろかる おしゃべりステーション LP
   デザインカンプ: 750px幅（1rem = カンプ10px）
   公式サークル館「おしゃべりステーション」LPの構造を踏襲。
   数値はカンプ(260820_ichiran.png / 260820_ichiran_pc.png)の実測値。
   ========================================================== */

:root {
  --yellow: #FFD804;      /* FV/フッターの地色・できたてサークルのアクセント */
  --cream: #FAF1E1;       /* ページ地色（PC版はカラム内の地色） */
  --pc-bg: #FAF6EF;       /* PC版のカラム外の地色 */
  --text: #231815;        /* 本文。FVカウンターと揃えたりろかるの文字色
                             （カンプは本家由来の #132B51 のまま。2026-08-24 に変更決定） */
  --green: #22C997;
  --red: #F25C5D;
  --blue: #5DADEC;
  --brown: #D28101;       /* 話題をえらぼうのカテゴリタブ */
  --gray-text: #999;
}

/* --- 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固定（カンプ1920pxでカラム711〜1210px = 500px） */
@media (min-width: 768px) {
  html {
    /* カラム500px時: 500/75 */
    font-size: 6.6667px;
  }
}

body {
  /* 2026-08-24 フォント変更: M PLUS Rounded 1c(500) → Kosugi Maru。
     Kosugi Maruは400の1ウェイトのみ。本家は「本文500/紹介文・コピーライトのみ400」の
     強弱があるため、500相当は text-stroke でわずかに太らせて再現する
     (細め扱いの箇所では stroke を 0 に戻す)。
     太字箇所(もっとみる・選択中タブ等の700)はブラウザの合成ボールドで太る */
  font-family: "Kosugi Maru", "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 400;
  /* 0.05rem: 本家の500相当より半歩太め(2026-08-24調整。当初0.035rem) */
  -webkit-text-stroke: 0.05rem currentColor;
  color: var(--text);
  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版レイアウト時の背景（吹き出し壁紙・スクロール固定）
   ※おしゃべりステーションと同じ方式。素材は吹き出し1個
     (img-bg_hukidashi_yellow.png)で、散らし方はコーダー側で決めて1枚に焼き込み
     cover 表示する。公式サークル館の配置を流用し、りろかるの色
     (地 #FAF6EF / 吹き出し #FCEA91)に置き換えてある。
     散らし方を変えたいときは bg-pattern-pc.png を差し替えるだけでよい */
@media (min-width: 768px) {
  body {
    position: relative;
    background-color: var(--pc-bg);
    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;
  }
}

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

/* メニューは「カラム右横に収まる幅」があるときだけ表示する。
   必要幅 = 50% + 253px + 266px → 1038px。1040px未満では非表示
   （スクロールで全セクションに到達できるため機能上の欠落はない） */
@media (min-width: 1040px) {
  /* 画像は266x70。吹き出し(250x54)の外周8pxに「PC地色(#FAF6EF)で塗った縁」が
     入っている。これは透過にしない：ウィンドウ幅によって壁紙の吹き出しが
     ピルの裏に来るため、不透過の縁で隠す作りになっている。
     → PC地色(--pc-bg / bg-pattern-pc.png)を変えるときは、この4枚も
       同じ色で書き出し直す必要がある。
     カンプ1920px時: 画像左1213px・1枚目の上端288px・送り72.5px（実測） */
  .pc-nav {
    display: flex;
    flex-direction: column;
    gap: 2.5px;
    position: fixed;
    left: calc(50% + 253px);
    /* 4項目(高さ287.5px)の縦中央寄せ。上限288pxはカンプの初期位置 */
    top: clamp(16px, calc(50vh - 143.75px), 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;
}


/* ==========================================================
   ファーストビュー
   ========================================================== */
.hero {
  position: relative;
  /* カンプの黄色の最下点 y=899 */
  height: 90rem;
}

/* 地色と下端の波は bg-Y-top.png に焼き込まれている（波の下は透過） */
.hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
}

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

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

.hero__title {
  position: absolute;
  top: 9.3rem;
  left: 14.5rem;
  width: 46.2rem;
  z-index: 3;
}

/* カウンター吹き出し（カンプ実測 top=533 left=182・素材の等倍 387x290） */
.hero__counter {
  position: absolute;
  top: 53.3rem;
  left: 18.2rem;
  width: 38.7rem;
  z-index: 2;
}

/* 文字レイヤーはヒーロー全幅。3行とも text-align:center なので、
   総数の桁数が変わっても常にページ中央で揃う */
.hero__counter-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  line-height: 1;
  white-space: nowrap;
  z-index: 3;
}

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

/* Adobe Fonts (kit: zlr8fea)。
   各 top はカンプの字面(ink)位置からフォントのベアリングぶんを引いた値
   （カンプ実測の字面上端: 現在 y594 / 128 y641 / コミュニティ y734） */
.hero__counter-label,
.hero__counter-unit {
  font-family: "dnp-shuei-mgothic-std", "Kosugi Maru", sans-serif;
  /* kitのフェイスは600のみ（＝秀英丸ゴシックB）。PSDではこのBにさらに
     Photoshopの疑似ボールドをかけているため、text-strokeで字を太らせて再現する。
     ※font-weight:700 は不発（フェイスが600登録なのでChromeは合成ボールドしない）。
       太さを変えたいときはこの stroke 値を調整する（0.06rem=カンプ幅で0.6px） */
  font-weight: 600;
  -webkit-text-stroke: 0.08rem currentColor;
  paint-order: stroke fill;
  color: var(--text);
}

/* 文字サイズはカンプの34pxから1px下げ(2026-08-24 指示)。topは字面中心を保つよう+0.05rem */
.hero__counter-label {
  top: 59.35rem;
  font-size: 3.3rem;
}

/* 数字は din-2014。カンプは各桁の字面幅(25/45/49px)が105pxと完全一致し、
   詰まり方はプロポーショナル数字(pnum)の挙動と一致する。
   tabular(既定)だと約12px広くなるため pnum を明示する */
.hero__counter-num {
  top: 62.46rem;
  font-size: 10.5rem;
  font-family: "din-2014", "Kosugi Maru", sans-serif;
  font-weight: 700;
  font-variant-numeric: proportional-nums;
  color: var(--red);
}

.hero__counter-unit {
  top: 73.1rem;
  font-size: 3.3rem;
  /* 長体ではなく字詰め（カンプの字面幅164px相当を維持。サイズ変更に合わせて按分）。
     text-indent は letter-spacing が最後の字の後ろにも入るぶんの中央ずれ補正 */
  letter-spacing: -0.495rem;
  text-indent: -0.2475rem;
}


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

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

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

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

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

/* 6件未満のカードでは main.js / data.js が hidden 属性を付ける。
   .topic-more の display:flex がUAの [hidden]{display:none} に勝ってしまうため明示 */
.topic-more[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, var(--yellow));
  transition: opacity 0.2s;
}

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

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

.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;
  /* 左0.9rem: 区切り線より9px内側からアイコンが始まる（カンプ実測）。
     右1.2rem: テキスト右端の余白を広げる(2026-08-24要望。カンプ・本家はともに0で、
     テキストがカード内側いっぱいまで届く仕様だった) */
  padding: 2.15rem 1.2rem 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 で揃うため、
   縦中央寄せにして下側だけ空くのを防ぐ */
.topic-list__link--detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  padding: 2.15rem 1.2rem 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;
}

/* サークル名が1行の行は、この値でカンプの行高(157px)とぴったり一致する。
   カンプはサークル名が2行になる行だけ4px高い(182px)が、行ごとに紹介文の位置が
   手置きでばらついているためで、規則性が無い。ここでは1行の行に合わせている
   （その結果、名前が2行になる件数ぶんカードが数px低くなる） */
.topic-list__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 1.6rem 0 0 7rem;
  font-size: 2.2rem;
  /* カンプの行送り25px */
  line-height: 2.5rem;
  /* 紹介文だけ本文より細く(本家の500/400の強弱を踏襲。素の400=strokeなし)。
     色も一段やわらげる(#686261。2026-08-24要望: 本文色#231815だとチカチカするため) */
  -webkit-text-stroke: 0;
  color: #686261;
}

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


/* ==========================================================
   各セクション
   ========================================================== */
/* できたてサークル: 見出し top=922（FV下端900の22px下） */
.sec-dekitate {
  margin-top: 2.2rem;
  /* 見出し吹き出しがFVから伸びる線路(hero__rails z2)より手前に来るように */
  z-index: 2;
  --line-color: #FFE29D;
  --accent: #FFD804;
}

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

.bg-break--1 {
  margin: 2.1rem 0 -3rem;
}

.sec-new {
  --line-color: #C8EBC4;
  --accent: #22C997;
}

.sec-new__hito {
  position: absolute;
  top: 8.1rem;
  left: 3.2rem;
  width: 18rem;
  z-index: 1;
}

.sec-boshu {
  margin-top: 7rem;
  --line-color: #FFD6D3;
  /* カンプでは「もっとみる」だけ #EC695E で、見出し・アイコンの赤(#F25C5D)と
     わずかに違う。実測値をそのまま採用している（要ならデザイナーに確認） */
  --accent: #EC695E;
}

.sec-boshu__hito-left {
  position: absolute;
  top: 1.4rem;
  left: 4.3rem;
  width: 12.6rem;
  z-index: 1;
}

.sec-boshu__hito-right {
  position: absolute;
  top: 1.8rem;
  left: 59.5rem;
  width: 8.7rem;
  z-index: 1;
}

/* --- イベント告知バナー（コメント待ってますの下） --- */
.cp-banner {
  /* カードと同じ左右余白=幅660px */
  margin: 6rem 4.5rem 0;
}

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

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

.bg-break--2 {
  margin: 4.1rem 0 -4.8rem;
}

/* --- 話題をえらぼう！（カテゴリ別トピック） --- */
.sec-category {
  --line-color: #BED6E9;
  --accent: #5DADEC;
}

.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(--brown);
  background-color: #fff;
  border: 0.3rem solid var(--brown);
  border-radius: 10rem;
  transition: opacity 0.2s;
}

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

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


/* ==========================================================
   フッター
   ========================================================== */
.footer {
  position: relative;
  height: 51.3rem;
}

/* 地色と上端の波は bg-Y-footer.png に焼き込まれている（波の上は透過） */
.footer__bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

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

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

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

.footer__logo a:hover {
  opacity: 0.8;
}

.footer__copyright {
  position: absolute;
  bottom: 2.9rem;
  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: var(--gray-text);
  /* 細め扱い(本家と同じ)。bodyのstrokeを打ち消す */
  -webkit-text-stroke: 0;
}