/* ============================================================
   Store Guide — 共通スタイル v2
   1440px基準 / エディトリアル・メディアデザイン
   ============================================================ */

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

:root {
  /* カラー（ブルーグレー基調） */
  --color-bg:           #F2F5F7;
  --color-surface:      #FFFFFF;
  --color-border:       #E3E8EC;
  --color-border-light: #EBEFF2;
  --color-text:         #111110;
  --color-text-sub:     #5C5B54;
  --color-text-light:   #9B9A93;
  --color-navy:         #2E4A66;
  --color-orange:       #E8620A;

  /* FVグラデーション／認証ページ共通背景（ネイビー・オレンジのブランドカラーを淡く使用） */
  --grad-fv:
    radial-gradient(ellipse 55% 70% at 8% 40%, rgba(46,74,102,.10) 0%, transparent 58%),
    radial-gradient(ellipse 45% 55% at 92% 15%, rgba(255,122,26,.08) 0%, transparent 52%),
    #F2F5F7;

  /* カテゴリカラー */
  --cat-store:     #C14B24;
  --cat-service:   #14875E;
  --cat-data:      #2373C5;
  --cat-event:     #3FAE8E;
  --cat-interview: #333333;

  /* タイポ — 最小14px */
  --font-base: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  --text-xs:   .875rem;   /* 14px */
  --text-sm:   .9375rem;  /* 15px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.0625rem; /* 17px */
  --text-lg:   1.1875rem; /* 19px */
  --text-xl:   1.5rem;    /* 24px */
  --text-2xl:  2rem;      /* 32px */
  --text-3xl:  2.875rem;  /* 46px */

  /* ラディウス — 最小限 */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-pill: 999px;
}

html { font-size: 16px; }

body {
  font-family: var(--font-base);
  font-weight: 400;          /* ベース：400 */
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }

/* ---------- コンテナ ----------
   1440px時 → max-width 1140px → 左右 auto = 150px each
   1200px以下 → padding で余白確保
   390px時   → padding 20px → コンテンツ幅 350px
   -------------------------------- */
.container {
  max-width: 1200px;
  margin-inline: auto;
  width: 100%;
}
@media (max-width: 1200px) { .container { padding-inline: 40px; } }
@media (max-width: 480px)  { .container { padding-inline: 20px; } }

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 28px;
  border-radius: 4px;
  font-family: var(--font-base);
  font-size: 15px;
  font-weight: 700;          /* CTAボタン：700 */
  cursor: pointer;
  border: none;
  transition: opacity .15s, transform .12s;
  line-height: 1;
  white-space: nowrap;
}
.btn:hover { opacity: .78; transform: translateY(-1px); }

.btn-primary {
  background: var(--color-text);
  color: #fff;
}
.btn-orange {
  background: #FF7A1A;
  color: #fff;
}
.btn-outline {
  background: transparent;
  color: var(--color-text);
  border: 1.5px solid var(--color-text);
}
.btn-outline:hover { background: var(--color-text); color: #fff; opacity: 1; }

.btn-sm  { padding: 9px 18px; font-size: 14px; }
.btn-lg  { padding: 16px 36px; font-size: 16px; }

/* ---------- タグ ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: var(--text-xs);  /* 14px */
  font-weight: 400;            /* タグ：400 */
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
}
.tag-store     { background: rgba(193,75,36,.1);  color: var(--cat-store);     }
.tag-service   { background: rgba(20,135,94,.1);  color: var(--cat-service);   }
.tag-data      { background: rgba(35,115,197,.1); color: var(--cat-data);      }
.tag-event     { background: rgba(63,174,142,.1); color: var(--cat-event);     }
.tag-interview { background: rgba(51,51,51,.08);  color: var(--cat-interview); }

.tag .dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.tag-store .dot     { background: var(--cat-store);     }
.tag-service .dot   { background: var(--cat-service);   }
.tag-data .dot      { background: var(--cat-data);      }
.tag-event .dot     { background: var(--cat-event);     }
.tag-interview .dot { background: var(--cat-interview); }

/* ---------- カテゴリドット（セクション見出し用）---------- */
.cat-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cat-dot.store   { background: var(--cat-store);   }
.cat-dot.service { background: var(--cat-service); }
.cat-dot.data    { background: var(--cat-data);    }
.cat-dot.event   { background: var(--cat-event);   }

/* ============================================================
   ヘッダー
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #FFFFFF;
  border-bottom: 1px solid var(--color-border);
}
.site-header .header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 64px;
}
@media (min-width: 769px) {
  .site-header .header-inner { height: 80px; }
}
.site-logo {
  font-size: 1.05rem;
  font-weight: 500;          /* ロゴ：500 */
  letter-spacing: -.03em;
  color: var(--color-text);
  flex-shrink: 0;
  white-space: nowrap;
}
.site-logo span { color: var(--cat-data); }

/* ============================================================
   正式ロゴ画像（signup / login / signup-complete / article で使用）
   TOPページの .site-logo（インラインSVG）とは独立したクラスにし、
   TOP側の表示には一切影響させない。
   色・文字間・太さはSVG側の値をそのまま使用し、CSSでは変更しない。
   ============================================================ */
.brand-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.brand-logo img {
  display: block;
  width: auto;
}

/* ヘッダー：PC 46px / SP 38px */
.brand-logo--header img { height: 46px; }
@media (max-width: 768px) {
  .brand-logo--header img { height: 38px; }
}

/* ヘッダーの上下paddingをロゴサイズに合わせて調整（対象ページ） */
.site-header--brand .header-inner {
  height: auto;
  padding-block: 14px;
}
@media (max-width: 768px) {
  .site-header--brand .header-inner { padding-block: 10px; }
}
@media (min-width: 769px) {
  .site-header--brand .header-inner { height: 80px; padding-block: 0; }
}

/* 認証ページ中央ロゴ：34〜38px */
.brand-logo--auth img { height: 56px; }

/* フッター：28px */
.brand-logo--footer img { height: 28px; }

.header-nav { display: flex; align-items: center; gap: 0; flex: 1; }
.header-nav a {
  padding: 7px 16px;
  font-size: var(--text-md);
  font-weight: 400;          /* ナビ：400 */
  color: var(--color-text-sub);
  transition: color .13s;
  border-radius: 4px;
}
.header-nav a:hover { color: var(--color-text); }
.header-nav a.active { color: var(--color-text); font-weight: 500; } /* active だけ500 */

.header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
@media (min-width: 769px) {
  /* header-actions 自身をヘッダーいっぱいに引き伸ばし、中の縦長ボタンが
     ヘッダー高さ(80px)を正しく継承できるようにする。 */
  .header-actions { align-self: stretch; align-items: stretch; height: 100%; }
}
.icon-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-sub);
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background .13s;
}
.icon-btn:hover { background: var(--color-border-light); }

/* ============================================================
   ヘッダー機能ボタン（検索／ログイン／新規会員登録）
   情報設計（独立した縦長ボタンを横並びにする構成）のみを参考にし、
   配色・アイコン・書体・角丸の有無はStore Guide独自のものを使用する。
   ============================================================ */
.header-func-nav {
  display: flex;
  flex-shrink: 0;
}
@media (min-width: 769px) {
  .header-func-nav { align-items: stretch; align-self: stretch; height: 100%; }
}
.func-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0;
  border: none;
  border-radius: 0; /* シャープな矩形。角丸は付けない */
  font-family: var(--font-base);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.3;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: filter .15s, background-color .15s;
}
.func-btn i { font-size: 20px; }
.func-btn:focus-visible { outline: 2px solid var(--color-text); outline-offset: -2px; }

/* 機能ボタン用アイコン（統一SVG・CSS mask方式）
   currentColorで色を自動継承するため、ボタンごとに個別の色指定SVGを用意する必要がない。
   アイコンフォントのCDN読み込みに依存しないため、確実に表示される。 */
.func-btn-icon {
  display: block;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.func-btn-icon--search {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='6'/%3E%3Cline x1='20' y1='20' x2='14.5' y2='14.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='6'/%3E%3Cline x1='20' y1='20' x2='14.5' y2='14.5'/%3E%3C/svg%3E");
}
.func-btn-icon--login {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-3'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-3'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E");
}
.func-btn-icon--signup {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='8.5' cy='7' r='4'/%3E%3Cline x1='20' y1='8' x2='20' y2='14'/%3E%3Cline x1='23' y1='11' x2='17' y2='11'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='8.5' cy='7' r='4'/%3E%3Cline x1='20' y1='8' x2='20' y2='14'/%3E%3Cline x1='23' y1='11' x2='17' y2='11'/%3E%3C/svg%3E");
}
.func-btn-icon--mypage {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
}
.func-btn-icon--logout {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3'/%3E%3Cpolyline points='15 17 20 12 15 7'/%3E%3Cline x1='20' y1='12' x2='8' y2='12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3'/%3E%3Cpolyline points='15 17 20 12 15 7'/%3E%3Cline x1='20' y1='12' x2='8' y2='12'/%3E%3C/svg%3E");
}
.func-btn--block .func-btn-icon { width: 22px; height: 22px; }

/* PC：ヘッダーいっぱいの高さ・80〜90px幅の縦長ボタン、隙間なしで並べる */
@media (min-width: 769px) {
  .func-btn {
    width: 84px;
    height: 100%;
  }
}

.func-btn--search {
  background: #FFFFFF;
  color: #2E4A66;
  border: none;
}
.func-btn--search:hover { background: #F5F7F8; }

.func-btn--login {
  background: #1D85EE;
  color: #FFFFFF;
  border: none;
}
.func-btn--login:hover { background: #1675D8; }

.func-btn--signup {
  background: #E8620A;
  color: #FFFFFF;
  border: none;
}
.func-btn--signup:hover { background: #D55609; }

/* ---- ログイン後想定ページ（マイページ／ログアウト）用バリアント ---- */
.func-btn--mypage {
  background: #2E4A66;
  color: #FFFFFF;
  border: none;
}
.func-btn--mypage:hover { background: #253D55; }

.func-btn--logout {
  background: #FFFFFF;
  color: #2E4A66;
  border: none;
}
.func-btn--logout:hover { background: #F5F7F8; }

@media (max-width: 768px) {
  .header-func-nav .func-btn--mypage,
  .header-func-nav .func-btn--logout { display: none; }
}

/* ---- ハンバーガーメニュー（スマホのみ表示） ---- */
.mobile-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--color-text);
  font-size: 22px;
  cursor: pointer;
  flex-shrink: 0;
}
.mobile-menu-toggle:focus-visible { outline: 2px solid var(--color-text); outline-offset: -2px; }

.mobile-menu { border-top: 1px solid var(--color-border); background: var(--color-surface); }
.mobile-menu[hidden] { display: none; }
.mobile-menu-nav { display: flex; flex-direction: column; padding: 4px 0; }
.mobile-menu-nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 20px;
  font-size: var(--text-md);
  color: var(--color-text-sub);
  border-bottom: 1px solid var(--color-border-light);
}
.mobile-menu-actions { display: flex; flex-direction: column; }
.func-btn--block { flex-direction: row; width: 100%; height: 52px; gap: 8px; font-size: 14px; }

@media (max-width: 768px) {
  .header-func-nav .func-btn--login,
  .header-func-nav .func-btn--signup { display: none; }
  .func-btn--search {
    border: none;
    padding: 0;
    width: 40px;
    height: 40px; /* アイコンフォントの読み込み有無に関わらず高さを固定する */
  }
  .func-btn--search .func-btn-label { display: none; }
  .mobile-menu-toggle { display: flex; }
}
@media (min-width: 1101px) {
  /* フルナビを出す幅でのみモバイルメニューを封じる
     （1100px以下はタブレット用メニューとして使用するため） */
  .mobile-menu { display: none !important; }
}

/* ============================================================
   フッター
   ============================================================ */
.site-footer {
  margin-top: 80px;
  border-top: 2px solid var(--color-text);
  background: var(--color-surface);
  padding: 48px 0 32px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 56px;
}
.footer-brand .site-logo { font-size: var(--text-base); margin-bottom: 10px; }
.footer-brand p { font-size: var(--text-sm); color: var(--color-text-sub); line-height: 1.75; }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.footer-col h4 {
  font-size: var(--text-xs);   /* 14px */
  font-weight: 500;             /* フッター見出し：500 */
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 14px;
  color: var(--color-text);
}
.footer-col a {
  display: block;
  font-size: var(--text-sm);   /* 15px */
  color: var(--color-text-sub);
  padding: 4px 0;
  transition: color .13s;
}
.footer-col a:hover { color: var(--color-text); }
.footer-bottom {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);   /* 14px */
  color: var(--color-text-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---- ニュースレター・SNS（フッター） ---- */
.footer-social {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-social-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-sub);
}
.footer-social-icons {
  display: flex;
  align-items: center;
  gap: 14px;
}
.footer-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  transition: filter .15s;
}
.footer-social-icon svg { width: 100%; height: 100%; display: block; }
.footer-social-icon--mail     { color: #FF7A1A; }
.footer-social-icon--facebook { color: #1877F2; }
.footer-social-icon--x        { color: #111111; }
.footer-social-icon:hover { filter: brightness(.8); }
.footer-social-icon:focus-visible { outline: 2px solid var(--color-text); outline-offset: 3px; }

/* ============================================================
   セクション共通
   ============================================================ */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 11px;
  border-bottom: 2px solid var(--color-text);
  margin-bottom: 22px;
}
.section-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--text-md);
  font-weight: 400;            /* セクションタイトル：400 */
  letter-spacing: -.01em;
}
.section-more {
  margin-top: 0;
  padding-top: 14px;
  border-top: 1px solid var(--color-border-light);
  text-align: center;
}

/* ============================================================
   TOPページ セクションブロック（見出し・カードグリッド・ランキング）
   BizHintのようにセクションごとの棲み分けが一目で分かる見出し設計。
   ============================================================ */
.tp-section { margin-top: 68px; }
.tp-section:first-child { margin-top: 0; }

.tp-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
}
.tp-section-title {
  font-size: 27px;
  font-weight: 800;
  color: #1F2933;
  letter-spacing: -.01em;
  line-height: 1.3;
  padding-left: 14px;
  border-left: 5px solid var(--color-navy);
}
.tp-section-title.accent-store     { border-left-color: var(--cat-store);     }
.tp-section-title.accent-service   { border-left-color: var(--cat-service);   }
.tp-section-title.accent-data      { border-left-color: var(--cat-data);      }
.tp-section-title.accent-event     { border-left-color: var(--cat-event);     }
.tp-section-title.accent-interview { border-left-color: var(--cat-interview); }
.tp-section-title.accent-orange    { border-left-color: var(--color-orange); }
.tp-section-title a { color: inherit; text-decoration: none; }
.tp-section-title a:hover { text-decoration: underline; text-underline-offset: 4px; }

.tp-section-more {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-navy);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: opacity .13s;
}
.tp-section-more:hover { opacity: .7; }

/* ---- カードグリッド（PC3カラム） ---- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.grid-card {
  display: block;
  background: #FFFFFF;
  border: 1px solid #E3E8EC;
  border-radius: 6px;
  overflow: hidden;
  color: var(--color-text);
  transition: box-shadow .15s, transform .15s;
}
.grid-card:hover {
  box-shadow: 0 6px 18px rgba(17,17,16,.08);
  transform: translateY(-2px);
}
.grid-card:hover .grid-card-title { text-decoration: underline; text-underline-offset: 3px; }
.grid-card-thumb {
  aspect-ratio: 16/9;
  max-height: 200px;
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.grid-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.grid-card-thumb.store-bg     { background: rgba(193,75,36,.1);  }
.grid-card-thumb.service-bg   { background: rgba(20,135,94,.1);  }
.grid-card-thumb.data-bg      { background: rgba(35,115,197,.1); }
.grid-card-thumb.event-bg     { background: rgba(63,174,142,.1); }
.grid-card-thumb.interview-bg { background: rgba(51,51,51,.08);  }
.grid-card-thumb-icon { font-size: 40px; opacity: .18; }
.grid-card-body {
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.grid-card-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -.01em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.grid-card-date { font-size: 12.5px; color: #6B7280; }

/* ---- 人気記事ランキング（画像なし・番号付きリスト） ---- */
.rank-list { display: flex; flex-direction: column; }
.rank-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid #E3E8EC;
}
.rank-item:first-child { padding-top: 0; }
.rank-item:last-child { border-bottom: none; }
.rank-num {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-navy);
  width: 30px;
  flex-shrink: 0;
  text-align: center;
}
.rank-link { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; color: var(--color-text); }
.rank-link:hover .rank-title { text-decoration: underline; text-underline-offset: 3px; }
.rank-title { font-size: 17px; font-weight: 700; line-height: 1.5; }

/* ---- 下層一覧ページ共通（パンくず＋大見出し＋代表特集＋記事一覧） ---- */
.listing-hero { padding: 40px 0 8px; }
.listing-title {
  font-size: 32px;
  font-weight: 800;
  color: var(--color-navy);
  letter-spacing: -.01em;
  line-height: 1.3;
  margin-bottom: 10px;
}
.listing-desc { font-size: var(--text-sm); color: var(--color-text-sub); line-height: 1.7; max-width: 640px; }
.listing-list { display: flex; flex-direction: column; }

@media (max-width: 1024px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .tp-section { margin-top: 48px; }
  .tp-section-title { font-size: 22px; }
  .card-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   記事カード — 3種
   ============================================================ */

/* --- フィーチャーカード（大、左カラム用）--- */
.card-feature {
  display: block;
  color: var(--color-text);
}
.card-feature:hover { opacity: .8; }
.card-feature:hover .cf-title { text-decoration: underline; text-underline-offset: 3px; }

.cf-thumb {
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: var(--radius-md);
  margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
}
.cf-thumb.store-bg   { background: rgba(193,75,36,.1);  }
.cf-thumb.service-bg { background: rgba(20,135,94,.1);  }
.cf-thumb.data-bg    { background: rgba(35,115,197,.1); }
.cf-thumb.event-bg   { background: rgba(63,174,142,.1); }

.cf-thumb-icon { font-size: 52px; opacity: .18; }
.cf-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cf-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.cf-date { font-size: var(--text-xs); color: var(--color-text-light); }
.cf-title {
  font-size: 1.75rem;
  font-weight: 500;            /* フィーチャー見出し：500 */
  line-height: 1.4;
  letter-spacing: -.02em;
}

/* --- サブカード（横並び、右スタック用）--- */
.card-sub {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 16px 0;
  border-top: 1px solid var(--color-border-light);
  color: var(--color-text);
  transition: opacity .13s;
}
.card-sub:first-child { border-top: none; padding-top: 0; }
.card-sub:hover { opacity: .72; }
.card-sub:hover .cs-title { text-decoration: underline; text-underline-offset: 3px; }

.cs-thumb {
  width: 88px;
  aspect-ratio: 3/2;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.cs-thumb.store-bg   { background: rgba(193,75,36,.1);  }
.cs-thumb.service-bg { background: rgba(20,135,94,.1);  }
.cs-thumb.data-bg    { background: rgba(35,115,197,.1); }
.cs-thumb.event-bg   { background: rgba(63,174,142,.1); }
.cs-thumb-icon { font-size: 28px; opacity: .2; }
.cs-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cs-body { flex: 1; min-width: 0; }
.cs-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.cs-date { font-size: var(--text-xs); color: var(--color-text-light); }
.cs-title {
  font-size: var(--text-base);
  font-weight: 400;            /* カードタイトル：400 */
  line-height: 1.55;
}

/* --- リストアイテム（テキストのみ、サムネなし）--- */
.list-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid var(--color-border-light);
  color: var(--color-text);
  transition: opacity .13s;
}
.list-item:hover { opacity: .68; }
.list-item:hover .li-title { text-decoration: underline; text-underline-offset: 3px; }

.li-title {
  flex: 1;
  font-size: var(--text-base);
  font-weight: 600;            /* リストタイトル：600 */
  line-height: 1.55;
}
.li-meta  { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.li-date  { font-size: var(--text-xs); color: var(--color-text-light); }

/* ============================================================
   エディトリアルグリッド（フィーチャー + スタック）
   ============================================================ */
.editorial-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 32px;
  margin-bottom: 0;
}
.editorial-stack { display: flex; flex-direction: column; }

/* ============================================================
   メインレイアウト（コンテンツ + サイドバー）
   ============================================================ */
.page-layout {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 48px;
  align-items: start;
  padding: 48px 0 72px;
}
.main-col { min-width: 0; }
.main-sections { display: flex; flex-direction: column; gap: 52px; }

/* ============================================================
   サイドバー
   ============================================================ */
.sidebar { display: flex; flex-direction: column; gap: 32px; }

.sidebar-widget h3 {
  font-size: var(--text-sm);   /* 15px */
  font-weight: 700;             /* サイドバー見出し：700 */
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-text);
  letter-spacing: .01em;
}
.cat-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 0;
  font-size: var(--text-sm);   /* 15px */
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text-sub);
  transition: color .13s;
}
.cat-list a:last-child { border-bottom: none; }
.cat-list a:hover { color: var(--color-text); }
.cat-list .cat-info { display: flex; align-items: center; gap: 8px; }
.cat-count { font-size: var(--text-xs); color: var(--color-text-light); } /* 14px */

.search-form { display: flex; gap: 8px; }
.search-input {
  flex: 1;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  font-family: var(--font-base);
  font-size: var(--text-sm);   /* 15px */
  font-weight: 400;
  background: var(--color-surface);
  color: var(--color-text);
  outline: none;
  transition: border-color .13s;
}
.search-input:focus { border-color: var(--color-text); }
.search-input::placeholder { font-weight: 400; color: var(--color-text-light); }

.tag-cloud { display: flex; flex-wrap: wrap; gap: 5px; }
.tag-cloud a {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: var(--text-xs);   /* 14px */
  font-weight: 400;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  color: var(--color-text-sub);
  transition: background .13s, color .13s, border-color .13s;
}
.tag-cloud a:hover { background: var(--color-text); color: #fff; border-color: var(--color-text); }


/* ============================================================
   フォーム共通
   ============================================================ */
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label {
  font-size: var(--text-sm);   /* 15px */
  font-weight: 400;             /* ラベル：400 */
  color: var(--color-text);
}
.form-input {
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  font-family: var(--font-base);
  font-size: var(--text-base); /* 16px */
  font-weight: 400;
  color: var(--color-text);
  background: var(--color-surface);
  outline: none;
  transition: border-color .13s;
  line-height: 1;
  width: 100%;
}
.form-input:focus { border-color: var(--color-text); }
.form-input::placeholder { color: var(--color-text-light); font-weight: 400; }
.form-hint { font-size: var(--text-xs); color: var(--color-text-light); } /* 14px */

.checkbox-row { display: flex; align-items: flex-start; gap: 10px; }
.checkbox-row input[type="checkbox"] {
  width: 17px; height: 17px;
  flex-shrink: 0;
  accent-color: var(--color-text);
  margin-top: 2px;
  cursor: pointer;
}
.checkbox-row label {
  font-size: var(--text-sm);  /* 15px */
  color: var(--color-text-sub);
  cursor: pointer;
  line-height: 1.65;
}
.checkbox-row label a { color: var(--color-text); text-decoration: underline; text-underline-offset: 2px; }

.divider-or {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-text-light);
  font-size: var(--text-sm);  /* 15px */
}
.divider-or::before, .divider-or::after {
  content: ""; flex: 1; height: 1px; background: var(--color-border);
}

/* ---------- ページネーション ---------- */
.pagination { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 40px; }
.page-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
  font-size: var(--text-sm);   /* 15px */
  font-weight: 400;             /* ページボタン：400 */
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-sub);
  cursor: pointer;
  transition: background .13s, color .13s, border-color .13s;
}
.page-btn:hover, .page-btn.active {
  background: var(--color-text); color: #fff; border-color: var(--color-text);
}

/* ============================================================
   レスポンシブ — 1024px / 390px
   ============================================================ */
@media (max-width: 1024px) {
  .editorial-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .page-layout { grid-template-columns: 1fr 210px; gap: 36px; }
}

@media (max-width: 768px) {
  .header-nav { display: none; }
  .site-header .header-inner { gap: 12px; }
  .editorial-grid { grid-template-columns: 1fr; }
  .page-layout { grid-template-columns: 1fr; padding: 32px 0 56px; }
  .sidebar { display: none; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .footer-links { grid-template-columns: repeat(2, 1fr); }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 6px; }
  .cf-title { font-size: var(--text-lg); }
}

@media (max-width: 480px) {
  .footer-links { grid-template-columns: 1fr; }
  .main-sections { gap: 40px; }
}

/* ============================================================
   スクリーンリーダー専用テキスト
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   FVカルーセル（注目コンテンツ・カテゴリー混在）
   PC: 1画面3件表示 / スマホ: 1画面1件表示
   ============================================================ */
.fv-slider {
  position: relative;
  /* FV専用の背景。認証ページ側で共有している --grad-fv とは独立させ、
     Store Guideのブランドカラーに合わせた白〜薄いブルーグレー基調にする。
     背景画像は使用せず、カード画像より目立たないごく淡いグラデーションに留める。 */
  background:
    radial-gradient(circle at 15% 35%, rgba(46, 74, 102, 0.10), transparent 34%),
    radial-gradient(circle at 85% 20%, rgba(255, 122, 26, 0.08), transparent 30%),
    #F2F5F7;
  border-bottom: 1px solid var(--color-border);
  padding: 40px 0 0;
}

.fv-slider-container { position: relative; }

.fv-slider-viewport { overflow: hidden; }

.fv-slider-track {
  display: flex;
  gap: 20px;
  will-change: transform;
  transition: transform .45s cubic-bezier(.4,0,.2,1);
}
.fv-slider-track.is-dragging { transition: none !important; }

/* ---- カード（スマホ：1画面1件が基準） ---- */
.fv-card {
  flex: 0 0 100%;
  min-width: 0;
}

.fv-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform .3s ease;
  transform-origin: center center;
}
.fv-card-link:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 3px;
  border-radius: var(--radius-md);
}

.fv-card-media {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fv-card-media.store-bg   { background: rgba(193,75,36,.14);  }
.fv-card-media.service-bg { background: rgba(20,135,94,.14);  }
.fv-card-media.data-bg    { background: rgba(35,115,197,.14); }
.fv-card-media.event-bg   { background: rgba(63,174,142,.14); }

.fv-card-icon {
  position: absolute;
  font-size: 64px;
  opacity: .22;
  z-index: 0;
}

/* 現行Store Guideの記事画像。縦横比を保ちつつ枠内をcoverで満たす。 */
.fv-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.fv-card-link:hover .fv-card-media { opacity: .92; }
.fv-card-link:hover .fv-card-title { text-decoration: underline; text-underline-offset: 2px; }

/* ---- 種別ラベル／会員限定バッジ（カード左上） ---- */
.fv-card-badges {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.fv-card-type {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
  color: #fff;
  line-height: 1.4;
}
.fv-card-type.type-article { background: var(--cat-store);   }
.fv-card-type.type-video   { background: var(--cat-data);    }
.fv-card-type.type-doc     { background: var(--cat-service); }
.fv-card-type.type-event   { background: var(--cat-event);   }

.fv-lock-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
  color: #fff;
  line-height: 1.4;
}
.fv-lock-tag i { font-size: 12px; }
/* 無料会員向け: 鍵アイコンなし・グレー系（鍵アイコンは有料会員限定のみに使用） */
.fv-lock-tag.free { background: #5C5B54; }
.fv-lock-tag.paid { background: #B8862E; }

/* ---- 画像上に重ねるタイトル（下部：黒→透明グラデーション） ---- */
.fv-card-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: 32px 14px 14px;
  background: linear-gradient(to top, rgba(0,0,0,.86) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,0) 100%);
}

.fv-card-title {
  font-size: 16px;
  font-weight: 700;          /* FVメイン見出し：700 */
  line-height: 1.5;
  color: #fff;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fv-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 400;
  color: #fff;
  opacity: .92;
}

/* ---- PC：1画面3件表示 ---- */
@media (min-width: 769px) {
  .fv-card { flex: 0 0 calc((100% - 40px) / 3); }

  /* Dock風ホバー用の余白（拡大時に親要素の overflow:hidden で切れないようにする）。
     viewport に余白を足し、track を同量だけ引き戻すことで見た目の位置・幅は変えない。 */
  .fv-slider-viewport { padding: 14px 16px; }
  .fv-slider-track { margin: -14px -16px; }

  /* ホバーしたカードを拡大、隣接カードはわずかに縮小（Macの Dock 風）。
     transform のみを使用しレイアウト（flexの幅）自体は変化させない。 */
  .fv-card:hover .fv-card-link {
    transform: scale(1.08);
    position: relative;
    z-index: 3;
  }
  .fv-card:has(+ .fv-card:hover) .fv-card-link {
    transform: scale(.96);
  }
  .fv-card:hover + .fv-card .fv-card-link {
    transform: scale(.96);
  }

  /* カードを選択したとき（クリック／タップ／キーボードフォーカス）も
     ホバーと同じ拡大を適用する。隣接カードもホバー時と同様にわずかに縮小する。 */
  .fv-card-link:active,
  .fv-card-link:focus-visible {
    transform: scale(1.08);
    position: relative;
    z-index: 3;
  }
  .fv-card:has(+ .fv-card .fv-card-link:active) .fv-card-link,
  .fv-card:has(+ .fv-card .fv-card-link:focus-visible) .fv-card-link {
    transform: scale(.96);
  }
  .fv-card:has(.fv-card-link:active) + .fv-card .fv-card-link,
  .fv-card:has(.fv-card-link:focus-visible) + .fv-card .fv-card-link {
    transform: scale(.96);
  }
}

/* ---- 矢印（PCのみ表示） ---- */
.fv-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: rgba(255,255,255,.9);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: background .13s, border-color .13s;
  z-index: 3;
}
.fv-slider-arrow:hover { background: var(--color-surface); border-color: var(--color-text); }
.fv-slider-arrow:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }
.fv-slider-arrow-prev { left: 8px; }
.fv-slider-arrow-next { right: 8px; }

/* ---- 再生／一時停止 + ドット（PC／スマホ共通） ---- */
.fv-slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px 0 22px;
}

.fv-slider-playpause {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: rgba(255,255,255,.6);
  color: var(--color-text-sub);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  transition: background .13s, color .13s;
  flex-shrink: 0;
}
.fv-slider-playpause:hover { background: var(--color-surface); color: var(--color-text); }
.fv-slider-playpause:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }

.fv-slider-dots { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.fv-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(0,0,0,.18);
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.fv-dot:hover { background: rgba(0,0,0,.32); }
.fv-dot:focus-visible { outline: 2px solid var(--color-text); outline-offset: 3px; }
.fv-dot[aria-selected="true"] { background: var(--color-text); transform: scale(1.2); }

/* ---- スマホ：矢印非表示・1画面1件 ---- */
@media (max-width: 768px) {
  .fv-slider { padding: 28px 0 0; }
  .fv-slider-arrow { display: none; }
  .fv-card-media { aspect-ratio: 4/3; }
  .fv-card-icon { font-size: 52px; }
  .fv-card-title { font-size: 15px; }
  .fv-slider-controls { padding: 16px 0 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .fv-slider-track { transition: none; }
  .fv-card-link { transition: none; }
}


/* ============================================================
   ▼▼ 全ページ共通デザイン基準（TOPページ 2026-07-21 版を移設）▼▼
   これ以降は index.html のインライン <style> にあったものを
   style.css へ集約したもの。全ページで同一の
   ヘッダー／フッター／カテゴリカラー／カード／サイドバーを担保する。
   ============================================================ */
/* ============================================================
   Figma TOP画面（2026-07-21 書き出し）反映 — TOPページ専用
   style.css は全16ページ共有のため、TOP以外へ波及させないよう
   新デザインはこのブロックに閉じて記述する。
   全ページ展開が決まった時点で style.css へ移設する想定。
   ============================================================ */

/* ---------- カラートークン（Figma実測値） ---------- */
:root {
  --color-bg:          #FFFFFF;
  --color-blue:        #1D85EE;   /* ログインボタン */

  --cat-store:         #FF7A1A;
  --cat-service:       #2F9E7A;
  --cat-data:          #2373C5;
  --cat-event:         #43B8A5;
  --cat-interview:     #2E4A66;
  --cat-doc:           #004BB4;   /* 動画：ブルー */
  --cat-doc-green:     #007A21;   /* 資料：深いグリーン */
  --cat-doc-bg:        #E5F2E9;
  --cat-video-bg:      #E6EEF9;

  --cat-store-bg:      #FFF2E8;
  --cat-service-bg:    #EAF5F2;
  --cat-data-bg:       #E9F1F9;
  --cat-event-bg:      #ECF8F6;
  --cat-interview-bg:  #EAEDF0;

  --color-placeholder: #E6E6E6;   /* 画像未支給枠 */

  /* ヘッダーナビ選択中の帯（カード内タグ帯より少し濃く＝選択状態を明確に） */
  --nav-interview-bg:  #DEE2E7;
  --nav-store-bg:      #FFEADA;
  --nav-service-bg:    #DEEFEA;
  --nav-data-bg:       #DCE9F6;
  --nav-event-bg:      #E1F4F1;
}

body { background: var(--color-bg); }

/* ============================================================
   ヘッダー
   ============================================================ */
.site-logo img { height: 40px; width: auto; }
@media (max-width: 768px) { .site-logo img { height: 32px; } }

/* ナビ：通常時はすべてネイビー */
.header-nav { gap: 2px; }

/* ---- ナビをヘッダー中央に固定（1024px以上） ----
   ロゴ幅・右側アクション幅に引っ張られないよう、ナビだけを絶対配置し
   ヘッダー中心に置く。ロゴは左端、アクションは右端に残す。 */
@media (min-width: 1024px) {
  .header-inner { position: relative; justify-content: space-between; }
  .header-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    flex: 0 0 auto;
    white-space: nowrap;   /* 折り返さない */
  }
}
.header-nav a {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-navy);
  padding: 8px 14px;
  border-radius: 6px;
  transition: background-color .18s ease, color .18s ease;
}
.header-nav a .nav-dot { display: none; }

/* ---- ホバー：文字色もカテゴリカラーへ。帯は選択中より弱く ---- */
.header-nav a:hover { background: rgba(46,74,102,.05); }
.header-nav a[data-cat="store"]:hover     { color: var(--cat-store);     background: rgba(255,122,26,.08); }
.header-nav a[data-cat="service"]:hover   { color: var(--cat-service);   background: rgba(47,158,122,.08); }
.header-nav a[data-cat="data"]:hover      { color: var(--cat-data);      background: rgba(35,115,197,.08); }
.header-nav a[data-cat="event"]:hover     { color: var(--cat-event);     background: rgba(67,184,165,.08); }
.header-nav a[data-cat="interview"]:hover { color: var(--cat-interview); background: rgba(46,74,102,.08); }

/* ---- 選択中：文字＝カテゴリカラー／背景＝同系の薄い帯（ホバーより濃い） ----
   判定は class="active" と aria-current="page" の両方に対応する。
   a タグ自身に color を指定し、詳細度は (0,3,1) で
   style.css の .header-nav a.active (0,2,1) を確実に上回る。 */
.header-nav a[data-cat="interview"].active,
.header-nav a[data-cat="interview"][aria-current="page"] { color: var(--cat-interview); background: var(--nav-interview-bg); }
.header-nav a[data-cat="store"].active,
.header-nav a[data-cat="store"][aria-current="page"]     { color: var(--cat-store);     background: var(--nav-store-bg);     }
.header-nav a[data-cat="service"].active,
.header-nav a[data-cat="service"][aria-current="page"]   { color: var(--cat-service);   background: var(--nav-service-bg);   }
.header-nav a[data-cat="data"].active,
.header-nav a[data-cat="data"][aria-current="page"]      { color: var(--cat-data);      background: var(--nav-data-bg);      }
.header-nav a[data-cat="event"].active,
.header-nav a[data-cat="event"][aria-current="page"]     { color: var(--cat-event);     background: var(--nav-event-bg);     }

/* 機能ボタン（最小14px。文字が収まるよう幅を広げる／フォントは下げない） */
.func-btn { font-size: 14px; }
@media (min-width: 769px) {
  .func-btn { width: 96px; padding-inline: 6px; }
}
.func-btn--login { background: var(--color-blue); color: #fff; }
.func-btn--signup { background: var(--color-orange); color: #fff; }

/* モバイルメニューも同じルール（通常＝ネイビー／選択中・ホバー＝カテゴリカラー） */
.mobile-menu-nav a { color: var(--color-navy); font-weight: 700; font-size: 16px; }
.mobile-menu-nav a .nav-dot { display: none; }

.mobile-menu-nav a[data-cat="interview"]:hover { color: var(--cat-interview); background: rgba(46,74,102,.08); }
.mobile-menu-nav a[data-cat="store"]:hover     { color: var(--cat-store);     background: rgba(255,122,26,.08); }
.mobile-menu-nav a[data-cat="service"]:hover   { color: var(--cat-service);   background: rgba(47,158,122,.08); }
.mobile-menu-nav a[data-cat="data"]:hover      { color: var(--cat-data);      background: rgba(35,115,197,.08); }
.mobile-menu-nav a[data-cat="event"]:hover     { color: var(--cat-event);     background: rgba(67,184,165,.08); }

.mobile-menu-nav a[data-cat="interview"].active,
.mobile-menu-nav a[data-cat="interview"][aria-current="page"] { color: var(--cat-interview); background: var(--nav-interview-bg); }
.mobile-menu-nav a[data-cat="store"].active,
.mobile-menu-nav a[data-cat="store"][aria-current="page"]     { color: var(--cat-store);     background: var(--nav-store-bg);     }
.mobile-menu-nav a[data-cat="service"].active,
.mobile-menu-nav a[data-cat="service"][aria-current="page"]   { color: var(--cat-service);   background: var(--nav-service-bg);   }
.mobile-menu-nav a[data-cat="data"].active,
.mobile-menu-nav a[data-cat="data"][aria-current="page"]      { color: var(--cat-data);      background: var(--nav-data-bg);      }
.mobile-menu-nav a[data-cat="event"].active,
.mobile-menu-nav a[data-cat="event"][aria-current="page"]     { color: var(--cat-event);     background: var(--nav-event-bg);     }

/* ============================================================
   FV カルーセル
   ============================================================ */
.fv-card-type { font-size: 13px; font-weight: 700; }
.fv-card-type.type-article { background: var(--cat-store);   color: #fff; }
.fv-card-type.type-video   { background: var(--color-blue);  color: #fff; }
.fv-card-type.type-doc     { background: var(--cat-service); color: #fff; }
.fv-card-type.type-event   { background: var(--cat-event);   color: #fff; }
.fv-lock-tag.free { background: rgba(17,17,16,.72); color: #fff; font-size: 13px; font-weight: 700; }

.fv-card-title { font-size: 19px; font-weight: 700; line-height: 1.55; }
.fv-card-cta   { font-size: 14px; font-weight: 500; }
.fv-card-cta i { display: none; }

/* 写真未設定カード：FV背景を透過させない。
   半透明(rgba)をやめ、不透明なグレー面にする。
   opacity / backdrop-filter は使用しない。
   写真ありカードは .fv-card-img が全面を覆うため影響なし。 */
.fv-card-media.store-bg,
.fv-card-media.service-bg,
.fv-card-media.data-bg,
.fv-card-media.event-bg,
.fv-card-media.interview-bg { background-color: #DEDEDE; }
/* ホバーで透けないよう、opacity による演出を打ち消す */
.fv-card-link:hover .fv-card-media { opacity: 1; }
.fv-card-icon { color: #B4B4B4; opacity: 1; }

/* ============================================================
   会員登録CTA（Figma：白い角丸カード＋2項目＋オレンジボタン）
   ============================================================ */
/* ============================================================
   FV 背景（写真＋白オーバーレイ）
   ============================================================ */
.fv-slider {
  position: relative;
  background-image: url("/wp-content/uploads/2026/07/fv_bg-scaled.jpg");
  background-size: cover;
  background-position: center 70%;
  background-repeat: no-repeat;
  padding-bottom: 124px;   /* CTAカードを半分重ねるための余白 */
}
/* 白オーバーレイ：暗くならないよう白を48%重ねて明るく柔らかく */
.fv-slider::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.48);
  pointer-events: none;
  z-index: 0;
}
/* スライダー本体・コントロールはオーバーレイより前面へ */
.fv-slider-container,
.fv-slider-controls { position: relative; z-index: 1; }
.join-cta {
  position: relative;
  z-index: 2;
  margin-top: -135px;
}
.join-card {
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(17,17,16,.06);
  padding: 34px 40px 40px;
}
.join-benefits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
/* ---- クリック可能なカード（動画一覧／資料一覧へ遷移） ----
   通常時のレイアウト・余白・文字サイズは従来どおり。
   ホバー／押下は transform と色だけで表現し、周囲のレイアウトは動かさない。 */
.join-benefit {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 4px 24px;            /* 従来値を維持 */
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: 12px;
  transition: transform .22s ease-out,
              box-shadow .22s ease-out,
              background-color .22s ease-out;
}
.join-benefit:first-child { padding-left: 0; }
.join-benefit:last-child  { padding-right: 0; }

/* 区切り線は親に持たせる。カードが浮いても線が一緒に動かない */
.join-benefits { position: relative; }
.join-benefits::before {
  content: "";
  position: absolute;
  left: 50%; top: 4px; bottom: 4px;
  width: 1px;
  background: var(--color-border);
  pointer-events: none;
}

.join-benefit .join-benefit-icon  { transition: transform .22s ease-out; }
.join-benefit .join-benefit-title { transition: color .22s ease-out; }

/* キーボードフォーカスの可視化 */
.join-benefit:focus-visible {
  outline: 3px solid var(--color-navy);
  outline-offset: 3px;
}

/* ホバー（マウス環境のみ） */
@media (hover: hover) and (pointer: fine) {
  .join-benefit:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(46,74,102,.10);
  }
  .join-benefit:nth-child(1):hover { background-color: #F1F5FE; }
  .join-benefit:nth-child(2):hover { background-color: #EDF8F1; }
  .join-benefit:hover .join-benefit-icon { transform: scale(1.03); }
  /* 見出しを少し濃く */
  .join-benefit:nth-child(1):hover .join-benefit-title { color: #1E48BE; }
  .join-benefit:nth-child(2):hover .join-benefit-title { color: #157F47; }
}

/* 押下（PC・スマホ共通）：軽く押し込む */
.join-benefit:active {
  transform: scale(.98);
  transition-duration: .1s;
}

@media (prefers-reduced-motion: reduce) {
  .join-benefit,
  .join-benefit .join-benefit-icon,
  .join-benefit .join-benefit-title { transition: none; }
  .join-benefit:hover,
  .join-benefit:active { transform: none; }
}

.join-benefit-icon {
  width: 54px; height: 54px;
  flex-shrink: 0;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 27px;
}
.join-benefit-icon--video { background: #EDF2FE; color: #2B5BD7; }
.join-benefit-icon--doc   { background: #E9F6EE; color: #1E9E5A; }

.join-benefit-title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 4px;
}
.join-benefit:nth-child(1) .join-benefit-title { color: #2B5BD7; }
.join-benefit:nth-child(2) .join-benefit-title { color: #1E9E5A; }
.join-benefit-desc {
  font-size: 14px;
  line-height: 1.75;
  color: var(--color-text-sub);
}
.join-benefit-desc strong { font-weight: 700; color: var(--color-text); }

/* ---- 無料登録ボタン＋吹き出し（一体で拡大） ---- */
/* 吹き出しの逃げを確保（CTA上部の余白） */
/* 吹き出しがボタン上端より約66px上に出るため、上側の余白を確保して切らない */
.join-card   { overflow: visible; }
.join-action {
  position: relative;
  overflow: visible;
  margin-top: 96px;
  display: flex;
  justify-content: center;
}
.join-btn {
  position: relative;
  overflow: visible;          /* 吹き出しを切らない */
  box-shadow: 0 3px 8px rgba(46,74,102,.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 384px;
  min-height: 56px;
  padding: 14px 28px;
  background: var(--color-orange);
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  transform-origin: center center;
  /* 周囲のレイアウトを動かさないよう transform のみで拡大する */
  transition: transform .25s ease-out;
  will-change: transform;
}
.join-btn-label {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.2;
}
/* 吹き出し：実要素の「完全な円」。ボタンの子要素なので一体でスケールする。
   円弧としっぽが同一パスなので、根元に段差・隙間・線の途切れが出ない。
   viewBox100基準：円 中心(46,46) r=42／しっぽ 根元45°〜78°・先端は右下。
   外径(線込み)が --bubble-d と一致するよう 0.9286 倍で配置する。 */
.join-bubble {
  position: absolute;
  /* ボタン中央を基準に「無料」の左上へ寄せる。
     ボタン幅が変わっても文字との位置関係がずれない。 */
  left: 50%;
  /* ボタン中央基準。しっぽ先端が「無」の左横に来る位置へ寄せる */
  transform: translateX(calc(-50% - 100px));
  bottom: calc(100% - 8px);    /* 円の下端をボタン上端に8px重ねる */
  z-index: 4;                  /* ボタン・しっぽより前面 */
  /* 直径は1変数で管理し、min/maxで固定して中身に押し広げられないようにする */
  --bubble-d: 80px;            /* 指定72〜80px */
  width: var(--bubble-d);
  height: var(--bubble-d);
  min-width: var(--bubble-d);
  max-width: var(--bubble-d);
  aspect-ratio: 1 / 1;         /* 楕円化させない */
  flex-shrink: 0;
  /* 円としっぽは ::before の単一SVGパスで描く（下記）。
     枠線を継ぎ足さないので、外周線が境界で途切れない。 */
  color: var(--color-orange);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.15;
  pointer-events: none;
}
/* 円＋しっぽを1本のSVGパスで描画。
   円弧としっぽが同一パスなので、根元に段差・隙間・線の途切れが出ない。
   viewBox100基準：円 中心(46,46) r=42／しっぽ 根元45°〜78°・先端は右下。
   外径(線込み)が --bubble-d と一致するよう 0.9286 倍で配置する。 */
.join-bubble::before {
  content: "";
  position: absolute;
  left: -2.7px;
  top: -2.7px;
  width: 97.5px;
  height: 97.5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 105 105'%3E%3Cpath d='M74.1 77.2A42 42 0 1 0 57.6 86.4L75.5 96.9Z' fill='%23ffffff' stroke='%23FF7A1A' stroke-width='2.15' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  z-index: -1;                 /* 文字より背面・ボタンより前面 */
  pointer-events: none;
}
.join-bubble em {
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: baseline;
  gap: 0;
  letter-spacing: -.02em;   /* 文字サイズは変えずに幅だけ詰める */
  white-space: nowrap;
}
.join-bubble em b { font-size: 23px; font-weight: 800; line-height: 1; }
.join-bubble > span { font-size: 13px; font-weight: 700; }

/* ホバー：CTA全体を一体で1.04倍。スマホ（タッチ）では無効 */
@media (hover: hover) and (pointer: fine) {
  .join-btn:hover { transform: scale(1.04); }
}
.join-btn:focus-visible { outline: 3px solid var(--color-navy); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .join-btn { transition: none; }
  .join-btn:hover { transform: none; }
}

/* ============================================================
   セクション見出し
   ============================================================ */
.tp-section-title {
  color: var(--color-navy);
  border-left-width: 5px;
  padding-left: 16px;
}
.tp-section-title.accent-doc { border-left-color: var(--cat-doc); }
.tp-section-more {
  font-size: 14px;
  font-weight: 500;
  color: #47617D;
}
.tp-section-more i { display: none; }

/* ============================================================
   記事カード（タグをカード幅いっぱいの帯に）
   ============================================================ */
.grid-card { border-radius: 8px; }
.grid-card-thumb.store-bg,
.grid-card-thumb.service-bg,
.grid-card-thumb.data-bg,
.grid-card-thumb.event-bg,
.grid-card-thumb.interview-bg { background: var(--color-placeholder); }
/* 画像未支給枠はFigmaに合わせフラットなグレー面のみ（アイコンは出さない） */
.grid-card-thumb-icon { display: none; }

.grid-card-body { padding: 14px 16px 18px; gap: 12px; }
.grid-card-title {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0;
}
.grid-card-date { font-size: 13px; color: #6B7280; }

/* タグ帯（カード内・ランキング内のみ全幅。サイドバーのタグはピルのまま） */
.grid-card-body .tag,
.rank-link .tag {
  display: flex;
  width: 100%;
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}
.tag-store     { background: var(--cat-store-bg);     color: var(--cat-store);     }
.tag-service   { background: var(--cat-service-bg);   color: var(--cat-service);   }
.tag-data      { background: var(--cat-data-bg);      color: var(--cat-data);      }
.tag-event     { background: var(--cat-event-bg);     color: var(--cat-event);     }
.tag-interview { background: var(--cat-interview-bg); color: var(--cat-interview); }
/* 資料＝深いグリーン / 動画＝ブルー */
.tag-doc       { background: var(--cat-doc-bg);       color: var(--cat-doc-green); }
.tag-video     { background: var(--cat-video-bg);     color: var(--cat-doc);       }
.tag-doc   .dot { background: var(--cat-doc-green); }
.tag-video .dot { background: var(--cat-doc);       }

/* ============================================================
   人気記事ランキング
   ============================================================ */
.rank-item { align-items: center; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--color-border-light); }
.rank-num  { font-size: 26px; font-weight: 800; color: var(--color-navy); width: 34px; }
.rank-link { gap: 8px; }
.rank-title { font-size: 16px; font-weight: 500; line-height: 1.6; }

/* ============================================================
   サイドバー
   ============================================================ */
.sidebar-widget h3 {
  font-size: 16px;
  font-weight: 700;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-text);
}
.cat-list a { border-bottom: none; padding: 6px 0; }
.cat-list .cat-count { font-size: 14px; color: #9AA3AE; }
.search-input { font-size: 15px; }
.search-form .btn-primary { background: var(--color-text); }
/* 入力欄が縮まずボタンが枠外へ押し出される（幅の狭いサイドバーで横スクロール発生）のを防ぐ */
.search-form { min-width: 0; }
.search-form .search-input { min-width: 0; flex: 1 1 auto; }
.search-form .btn { flex-shrink: 0; }
.tag-cloud a { font-size: 14px; border-width: 1px; }

/* インフォメーション枠 */
.info-box {
  background: #F2F5F7;
  border-radius: 8px;
  padding: 16px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--color-text-sub);
}
.info-box .info-date { color: var(--color-text-light); font-size: 12px; margin-bottom: 4px; }

/* PRバナー枠 */
.pr-stack { display: flex; flex-direction: column; gap: 10px; }
.pr-banner {
  width: 100%; height: 82px;
  border: 1px dashed #D6DBE0;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  color: #C3C9D0; font-size: 13px;
}

/* ============================================================
   フッター
   ============================================================ */
.footer-brand .brand-logo img { height: 34px; }
.footer-brand p { margin-top: 10px; }
.footer-social { justify-content: center; flex-direction: column; gap: 12px; }
.footer-social-label { font-size: 14px; }

/* ============================================================
   タブレット（769〜1024px）
   ナビが2行に折り返していたのを、フォントを下げずに
   余白・字間・改行制御で1行に収める。
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
  /* 768px（iPad縦）もタブレット扱いにし、ナビを1行で表示する */
  .header-nav { display: flex; gap: 0; flex: 1 1 auto; min-width: 0; }
  .header-func-nav .func-btn--login,
  .header-func-nav .func-btn--signup { display: flex; }
  .mobile-menu-toggle { display: none; }
  .func-btn--search { width: auto; height: auto; padding: 0; }
  .func-btn--search .func-btn-label { display: block; }

  .header-inner { gap: 10px; }
  .site-logo img { height: 32px; }
  .header-nav a {
    white-space: nowrap;      /* 「インタビュー」等を折り返さない */
    padding: 8px 9px;
    letter-spacing: -.01em;
  }
  /* 文字が収まるよう幅で調整（フォントは14px以上を維持） */
  .func-btn { width: 88px; }
  .func-btn i, .func-btn-icon { width: 22px; height: 22px; font-size: 18px; }
}

/* 768〜900px：幅が足りないため、フォントは14px以上を保ったまま
   余白・幅・改行で1行に収める（サイズは下げない） */
@media (min-width: 768px) and (max-width: 900px) {
  .container { padding-inline: 24px; }
  .site-logo img { height: 28px; }
  .header-inner { gap: 6px; }
  .header-nav a { font-size: 14px; padding: 8px 6px; }
  .func-btn { width: 74px; }
  /* 「新規会員登録」が 新規会員／登録 で改行されるよう少し狭める */
  .func-btn--signup { width: 66px; }
  .func-btn-label {
    white-space: normal;   /* 「新規会員登録」のみ改行で収める */
    text-align: center;
    line-height: 1.25;
  }
  /* CTA：タブレットでは重なりを浅くし、カード幅を画面に合わせる */
  .fv-slider { padding-bottom: 130px; }
  .join-cta  { margin-top: -100px; }
  .join-card { max-width: 100%; padding: 28px 28px 32px; }
  .join-benefit { padding: 4px 16px; }
}

/* ============================================================
   レスポンシブ（SP：最小フォントサイズを維持したまま調整）
   ============================================================ */
@media (max-width: 768px) {
  .fv-slider { padding-bottom: 92px; }
  .join-cta  { margin-top: -70px; }
  .join-card { border-radius: 18px; padding: 24px 20px 28px; }
  .join-benefits { grid-template-columns: 1fr; gap: 18px; }
  /* 1カラムなので縦の区切り線は消し、横線に切り替える */
  .join-benefits::before { display: none; }
  .join-benefit { padding: 0; }
  .join-benefit:first-child {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 18px;
  }
  .join-btn { max-width: 100%; min-height: 60px; }
  .join-btn-label { font-size: 22px; }
  /* SPは直径78px（指定72〜80px）。重なり・内側位置はPCと同基準 */
  .join-bubble { --bubble-d: 78px; left: 50%; transform: translateX(calc(-50% - 90px)); bottom: calc(100% - 8px); }
  .join-bubble em b { font-size: 21px; }
  .join-bubble::before { left: -2.6px; top: -2.6px; width: 95.1px; height: 95.1px; }

  .grid-card-title { font-size: 16px; }
  .rank-title { font-size: 15px; }
  .tp-section-title { font-size: 21px; }
  /* フォーム入力欄はSPで16px以上（iOSの自動ズーム防止） */
  .search-input { font-size: 16px; }
}

/* 1024〜1200px：ナビ中央固定時に右側アクションと干渉しないよう
   項目の左右余白だけを話める（文字サイズ・色・選択状態は変更しない）。
   他のメディアクエリより後に置き、1024px境界でも確実に適用させる。 */
@media (min-width: 1024px) and (max-width: 1200px) {
  .header-nav a { padding-inline: 7px; }
}

/* ============================================================
   パンくずリスト（全ページ共通）
   横一列・区切りは「>」・現在ページはカテゴリカラー
   ============================================================ */
.breadcrumb {
  padding: 14px 0 0;
  background: transparent;
  border-bottom: none;
}
.breadcrumb ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;          /* 長い場合のみ項目単位で折り返す */
  gap: 4px 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;          /* 12px以上 */
  line-height: 1.6;
  color: var(--color-text-sub);
  word-break: normal;       /* 1文字ずつ縦に折れないようにする */
  overflow-wrap: anywhere;
}
.breadcrumb li a { color: var(--color-navy); text-decoration: none; }
.breadcrumb li a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* 区切り記号 */
.breadcrumb li + li::before {
  content: ">";
  color: #B7BEC6;
  font-size: 12px;
  line-height: 1;
}
/* 現在ページ（リンクなし）＝カテゴリカラー。
   カテゴリ指定が確実に勝つよう、属性2つで詳細度を上げる。 */
.breadcrumb li[aria-current="page"] { color: var(--color-navy); font-weight: 500; }
.breadcrumb li[aria-current="page"][data-cat="interview"] { color: var(--cat-interview); }
.breadcrumb li[aria-current="page"][data-cat="store"]     { color: var(--cat-store);     }
.breadcrumb li[aria-current="page"][data-cat="service"]   { color: var(--cat-service);   }
.breadcrumb li[aria-current="page"][data-cat="data"]      { color: var(--cat-data);      }
.breadcrumb li[aria-current="page"][data-cat="event"]     { color: var(--cat-event);     }
.breadcrumb li[aria-current="page"][data-cat="doc"]       { color: var(--cat-doc-green); }
.breadcrumb li[aria-current="page"][data-cat="video"]     { color: var(--cat-doc);       }

/* ============================================================
   下層ページのタイトル（TOPのセクション見出しルールに合わせる）
   文字＝ネイビー／左の縦帯＝カテゴリカラー
   ============================================================ */
.listing-hero { padding: 20px 0 4px; }
.listing-title {
  font-size: 32px;          /* PC 28〜36px */
  font-weight: 800;
  color: var(--color-navy);
  line-height: 1.3;
  letter-spacing: -.01em;
  margin-bottom: 10px;
  padding-left: 16px;
  border-left: 5px solid var(--color-navy);
}
.listing-title.accent-interview { border-left-color: var(--cat-interview); }
.listing-title.accent-store     { border-left-color: var(--cat-store);     }
.listing-title.accent-service   { border-left-color: var(--cat-service);   }
.listing-title.accent-data      { border-left-color: var(--cat-data);      }
.listing-title.accent-event     { border-left-color: var(--cat-event);     }
.listing-title.accent-doc       { border-left-color: var(--cat-doc-green); }
.listing-title.accent-video     { border-left-color: var(--cat-doc);       }

@media (max-width: 768px) {
  .listing-title { font-size: 25px; }   /* SP 24〜28px */
}

/* ============================================================
   一覧カードのホバー（全ページ共通・スマホでは無効）
   ============================================================ */
.grid-card {
  transition: transform .22s ease-out, box-shadow .22s ease-out;
}
.grid-card:hover { box-shadow: none; transform: none; }   /* 既定を打ち消し、下で再定義 */
@media (hover: hover) and (pointer: fine) {
  .grid-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(17,17,16,.10);
  }
}
@media (prefers-reduced-motion: reduce) {
  .grid-card { transition: none; }
  .grid-card:hover { transform: none; }
}

/* 一覧カードのサムネイル：カード幅いっぱいに広げる。
   aspect-ratio と max-height の併用で幅が縮むのを防ぐ（下層一覧の1〜2カラム時に発生）。 */
.grid-card-thumb { width: 100%; }

/* ============================================================
   会員登録系 主要CTA（オレンジ #FF7A1A に統一）
   黒（.btn-primary）は検索などの補助ボタン用として残す。
   対象：記事内の無料登録CTA／イベント告知「無料会員登録で参加」／
        新規会員登録フォームの送信ボタン／.btn-orange
   ============================================================ */
.btn-orange,
.paywall-cta-primary,
.event-banner .btn-primary,
form[data-mock-redirect="signup-complete.html"] .btn-primary {
  background: var(--color-orange);      /* #FF7A1A */
  color: #fff;
  border: none;
  font-weight: 700;
  transition: background-color .22s ease-out,
              transform .22s ease-out,
              box-shadow .22s ease-out;
}
.btn-orange i,
.paywall-cta-primary i,
.event-banner .btn-primary i,
form[data-mock-redirect="signup-complete.html"] .btn-primary i { color: #fff; }

/* ホバー：少し濃いオレンジ＋2px上へ（レイアウトは動かさない） */
@media (hover: hover) and (pointer: fine) {
  .btn-orange:hover,
  .paywall-cta-primary:hover,
  .event-banner .btn-primary:hover,
  form[data-mock-redirect="signup-complete.html"] .btn-primary:hover {
    background: #E96A00;
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(46,74,102,.16);
  }
}
/* 押下：軽く押し込む */
.btn-orange:active,
.paywall-cta-primary:active,
.event-banner .btn-primary:active,
form[data-mock-redirect="signup-complete.html"] .btn-primary:active {
  transform: scale(.98);
  transition-duration: .1s;
}
@media (prefers-reduced-motion: reduce) {
  .btn-orange, .paywall-cta-primary,
  .event-banner .btn-primary,
  form[data-mock-redirect="signup-complete.html"] .btn-primary { transition: none; }
  .btn-orange:hover, .paywall-cta-primary:hover,
  .event-banner .btn-primary:hover,
  form[data-mock-redirect="signup-complete.html"] .btn-primary:hover,
  .btn-orange:active, .paywall-cta-primary:active,
  .event-banner .btn-primary:active { transform: none; }
}

/* ============================================================
   ヘッダーナビ：項目の余白調整とタブレット切替（最終定義）
   - 1101px以上 … フルナビ（左右padding 16px / gap 6px / 帯の角丸6px）
   - 1100px以下 … 文字を縮小せずタブレット用メニュー（ハンバーガー）へ
   ============================================================ */
@media (min-width: 1101px) {
  .header-nav { gap: 6px; }
  .header-nav a {
    font-size: 16px;
    padding: 8px 16px;      /* 指定14〜18px */
    padding-inline: 16px;   /* 1024〜1200px の話め指定を上書き */
    border-radius: 6px;     /* 帯の角丸4〜6px */
    white-space: nowrap;    /* 改行させない */
  }
}

@media (max-width: 1100px) {
  /* 余白を確保するとフルナビが収まらないため、タブレット用メニューへ切替 */
  .header-nav { display: none; }
  .mobile-menu-toggle { display: flex; }
  .header-inner { justify-content: space-between; }
}

/* 769〜1100px：ログイン／新規会員登録はヘッダーに残す */
@media (min-width: 769px) and (max-width: 1100px) {
  .header-func-nav .func-btn--login,
  .header-func-nav .func-btn--signup { display: flex; }
  .func-btn { width: 96px; }
  .func-btn--search { width: 96px; height: auto; padding: 0; }
  .func-btn--search .func-btn-label { display: block; }
  .func-btn-label { white-space: nowrap; }
}

/* タブレット用メニュー内のナビも余白を揃える */
@media (max-width: 1100px) {
  .mobile-menu-nav a { padding: 14px 20px; }
}

/* ============================================================
   認証ページ（ログイン・新規会員登録・登録完了）レイアウト
   style.css に集約（各ページの inline <style> から移動）
   ============================================================ */
.auth-page {
  min-height: calc(100vh - 56px);
  background: var(--grad-fv);
  padding: 60px 24px 80px;
}

.auth-wrapper {
  max-width: 1000px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 64px;
  align-items: start;
}

/* 左：メリットパネル */
.auth-benefits { padding-top: 4px; }

.benefits-eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-sub);
  margin-bottom: 18px;
}
.benefits-headline {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -.04em;
  margin-bottom: 14px;
}
.benefits-sub {
  font-size: var(--text-sm);
  color: var(--color-text-sub);
  line-height: 1.8;
  margin-bottom: 40px;
}

.benefit-list { display: flex; flex-direction: column; gap: 0; margin-bottom: 40px; }
.benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 30px 0;
  border-bottom: 1px solid var(--color-border-light);
}
.benefit-item:first-child { border-top: 1px solid var(--color-border-light); }

.benefit-num {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-light);
  letter-spacing: .04em;
  flex-shrink: 0;
  width: 34px;
  margin-right: 12px;
  line-height: 1;
  margin-top: 4px;
}
.benefit-icon {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
  margin-right: 14px;
  margin-top: -3px;
}
.benefit-icon i { font-size: 32px; line-height: 1; }

.benefit-list .benefit-item:nth-child(1) .benefit-num,
.benefit-list .benefit-item:nth-child(1) .benefit-icon,
.benefit-list .benefit-item:nth-child(1) .benefit-text h3 { color: var(--cat-event);   }
.benefit-list .benefit-item:nth-child(2) .benefit-num,
.benefit-list .benefit-item:nth-child(2) .benefit-icon,
.benefit-list .benefit-item:nth-child(2) .benefit-text h3 { color: var(--cat-data);    }
.benefit-list .benefit-item:nth-child(3) .benefit-num,
.benefit-list .benefit-item:nth-child(3) .benefit-icon,
.benefit-list .benefit-item:nth-child(3) .benefit-text h3 { color: var(--cat-store);   }

.benefit-text h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: -.01em;
  line-height: 1.4;
}
.benefit-text p {
  font-size: 15px;
  color: var(--color-text-sub);
  line-height: 1.7;
}

/* 右：フォームカード */
.auth-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 36px 32px 32px;
}
.auth-card h1,
.auth-card h2 {
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: 4px;
}
.auth-card-sub {
  font-size: var(--text-sm);
  color: #4A4943;
  margin-bottom: 28px;
}

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form .form-input,
.auth-form select.form-input {
  min-height: 50px;
  padding-block: 0;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.sns-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  padding: 11px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  font-family: var(--font-base);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color .13s, background .13s;
  border-radius: var(--radius-md);
}
.sns-btn:hover { border-color: var(--color-text); background: var(--color-bg); }
.sns-icon {
  width: 20px; height: 20px;
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 800;
  background: #fff; border: 1px solid #DDD;
  flex-shrink: 0;
}

.auth-switch {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-sub);
  margin-top: 18px;
}
.auth-switch a { color: var(--color-text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ログインページ追記誘導 */
.signup-nudge {
  margin-top: 12px;
  padding: 16px 20px;
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-sub);
  text-align: center;
}
.signup-nudge a {
  display: block;
  margin-top: 10px;
}

@media (max-width: 900px) {
  .auth-wrapper { grid-template-columns: 1fr; max-width: 480px; }
  .auth-benefits { display: none; }
}
@media (max-width: 480px) {
  .auth-card { padding: 28px 20px; }
  .form-row { grid-template-columns: 1fr; }
}


/* ============================================================
   Figma 7/17 デザイン反映 — auth / button / form / background
   ============================================================ */
.auth-page {
  background-color: #fafafa;
  background-image:
    radial-gradient(ellipse 60% 55% at 20% 30%, rgba(133,183,235,.28) 0%, transparent 70%),
    radial-gradient(ellipse 50% 45% at 80% 20%, rgba(212,83,126,.22) 0%, transparent 65%),
    radial-gradient(ellipse 55% 50% at 55% 85%, rgba(151,196,89,.25) 0%, transparent 70%);
}

.benefits-eyebrow {
  display: inline-block;
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(255,255,255,.80);
  border-radius: 999px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  padding: 4px 14px;
  margin-bottom: 20px;
  color: #6b6b7a;
}

.benefits-headline { color: #1a1a1e; letter-spacing: -0.72px; }
.benefits-sub { color: #6b6b7a; }
.benefit-num { color: rgba(0,0,0,.25); font-size: 13px; }

.benefit-item {
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(255,255,255,.85) !important;
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.07);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 16px 16px;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}

.benefit-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 22px;
  margin-right: 12px;
  margin-top: 0;
}

.benefit-list .benefit-item:nth-child(1) .benefit-icon { background: rgba(93,202,165,.15); color: rgb(93,202,165); }
.benefit-list .benefit-item:nth-child(2) .benefit-icon { background: rgba(55,138,221,.15); color: rgb(55,138,221); }
.benefit-list .benefit-item:nth-child(3) .benefit-icon { background: rgba(216,90,48,.12); color: rgb(216,90,48); }

.auth-card {
  border: none !important;
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,.10);
}

.auth-form .form-input,
.auth-form select.form-input,
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="tel"] {
  border: 1px solid #e8e8ec;
  border-radius: 12px;
  min-height: 50px;
}

.auth-form .btn-primary,
.auth-form [type="submit"],
.auth-form button[type="submit"] {
  background: #1a1a1e;
  border-color: #1a1a1e;
  border-radius: 999px;
  box-shadow: 0 2px 4px rgba(0,0,0,.18);
  color: #fff;
}
.auth-form .btn-primary:hover,
.auth-form [type="submit"]:hover,
.auth-form button[type="submit"]:hover {
  background: #2e2e38;
  border-color: #2e2e38;
}

.sns-btn { border: 1px solid #e8e8ec !important; border-radius: 12px; height: 45px; }

.signup-nudge { border-radius: 12px; border-color: #e8e8ec; }



/* ============================================================
   Figma 7/17 — FV background, Header clean, CTA floating card
   ============================================================ */

/* FV: gradient background (Figma 7/17) */
.fv-slider {
  background-image: url("/wp-content/uploads/2026/07/fv_bg-scaled.jpg");
  background-size: cover;
  background-position: center 70%;
  background-repeat: no-repeat;
  background-color: transparent;
  border-bottom: none;
}

/* Header: 7/17 — clean, subtle shadow */
.site-header {
  border-bottom: none;
  box-shadow: 0 1px 0 0 rgba(0,0,0,.06);
}

/* ============================================================
   Benefits Bar → Floating CTA Card (Figma: Section 720x261)
   ============================================================ */
.benefits-bar {
  max-width: 760px;
  margin: -132px auto 64px;
  position: relative;
  z-index: 10;
  background: #ffffff;
  border-radius: 30px;
  box-shadow: 0 8px 40px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
  padding: 28px 36px 32px;
}

/* Benefits grid */
.benefits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-bottom: 20px;
}
.benefit-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 0 24px;
  border-right: 1px solid #f0f0f0;
}
.benefit-card:first-child { padding-left: 4px; }
.benefit-card:last-child  { padding-right: 4px; border-right: none; }

/* Benefit icons */
.benefit-card-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  margin-top: 2px;
}
.benefit-card-icon.icon-video  { background: rgba(55,138,221,.15); color: rgb(55,138,221); }
.benefit-card-icon.icon-doc    { background: rgba(93,202,165,.15); color: rgb(93,202,165); }
.benefit-card-icon.icon-event  { background: rgba(216,90,48,.12);  color: rgb(216,90,48); }

/* Benefit card text */
.benefit-card-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
  color: #1a1a1e;
  line-height: 1.4;
}
.benefit-card-desc {
  font-size: 13px;
  color: #6b6b7a;
  line-height: 1.7;
  margin: 0;
}

/* Benefits CTA area */
.benefits-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding-top: 20px;
  border-top: 1px solid #efefef;
  flex-wrap: wrap;
}
.benefits-cta-lead {
  font-size: 13px;
  color: #6b6b7a;
  margin: 0;
  font-weight: 500;
  letter-spacing: .03em;
}
.btn-benefits-cta {
  background: #E8620A;
  color: #fff !important;
  border-radius: 999px;
  padding: 13px 32px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  letter-spacing: .02em;
  transition: background .15s, transform .15s;
  white-space: nowrap;
}
.btn-benefits-cta:hover {
  background: #d55609;
  transform: translateY(-1px);
}

/* ============================================================
   Responsive — FV CTA card
   ============================================================ */
@media (max-width: 768px) {
  .benefits-bar {
    margin: -72px 16px 48px;
    border-radius: 20px;
    padding: 24px 20px 28px;
    max-width: calc(100% - 32px);
  }
  .benefits-grid {
    grid-template-columns: 1fr;
    margin-bottom: 16px;
  }
  .benefit-card {
    padding: 14px 0;
    border-right: none;
    border-bottom: 1px solid #f0f0f0;
  }
  .benefit-card:first-child { padding-top: 0; }
  .benefit-card:last-child  { border-bottom: none; padding-bottom: 0; }
  .benefits-cta {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  .btn-benefits-cta {
    justify-content: center;
    text-align: center;
    padding: 14px 24px;
  }
  .benefits-cta-lead { text-align: center; }
}
@media (min-width: 769px) and (max-width: 1100px) {
  .benefits-bar {
    margin: -100px auto 56px;
    max-width: 680px;
    padding: 24px 28px 28px;
  }
}


/* ===== Figma 7/17 ヘッダーボタン色 強制上書き ===== */
.func-btn--login,
.header-func-nav .func-btn--login {
  background: #1D85EE !important;
  color: #FFFFFF !important;
}
.func-btn--login:hover,
.header-func-nav .func-btn--login:hover {
  background: #1675D8 !important;
}
.func-btn--signup,
.header-func-nav .func-btn--signup {
  background: #E8620A !important;
  color: #FFFFFF !important;
}
.func-btn--signup:hover,
.header-func-nav .func-btn--signup:hover {
  background: #D55609 !important;
}
/* ===== マイページ・ログアウト ボタン色 強制上書き ===== */
.func-btn--mypage,
.header-func-nav .func-btn--mypage {
  background: #1D85EE !important;
  color: #FFFFFF !important;
}
.func-btn--mypage:hover,
.header-func-nav .func-btn--mypage:hover {
  background: #1675D8 !important;
}
.func-btn--logout,
.header-func-nav .func-btn--logout {
  background: #E8620A !important;
  color: #FFFFFF !important;
}
.func-btn--logout:hover,
.header-func-nav .func-btn--logout:hover {
  background: #D55609 !important;
}

/* ===== FV スライド上部余白 調整 ===== */
.fv-slider {
  padding-top: 131px !important;
}

/* ===== ログイン後：無料登録CTA非表示・スライド中央配置 ===== */
body.logged-in .benefits-bar {
  display: none !important;
}
body.logged-in .fv-slider {
  padding-bottom: 80px !important;
}

/* ===== インフォメーション ウィジェット ===== */
.sg-information-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sg-information-item {
  padding: 10px 0;
  border-bottom: 1px solid #E8ECF0;
}
.sg-information-item:last-child {
  border-bottom: none;
}
.sg-information-date {
  display: block;
  font-size: 12px;
  color: #8A99A8;
  margin-bottom: 3px;
}
.sg-information-title {
  display: block;
  font-size: 13px;
  color: #2E4A66;
  text-decoration: none;
  line-height: 1.45;
}
.sg-information-title:hover {
  color: #1D85EE;
  text-decoration: underline;
}
.sg-information-empty {
  font-size: 13px;
  color: #8A99A8;
}


/* Supabase member: hide registration CTA */
html.sg-member .benefits-bar { display: none !important; }

/* Hide FV slider play/pause button (circle below slider) */
.fv-slider-playpause { display: none !important; }