:root {
  --ink: #332C29;
  --cream: #ffffff;
  --taupe: #A08877;
  --pink: #D11277;
  --teal: #0D9991;
  --orange: #F29418;
  --blue: #319BD0;
  --purple: #86167A;
  --red: #D61518;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.7;
}

a { color: var(--ink); text-decoration: none; }
a:hover { opacity: 0.72; }

h1, h2, h3 {
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  font-weight: 500;
  margin: 0 0 0.6em;
}
h1 { font-size: 28px; }
h2 { font-size: 20px; }
h3 { font-size: 17px; }

.site-header { position: sticky; top: 0; z-index: 200; transition: box-shadow 0.3s ease; }
.site-header.is-scrolled .header-main {
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 16px rgba(51,44,41,0.10);
}
.site-header.is-scrolled .site-nav {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: none;
  opacity: 0;
}
.header-main {
  background: #fff;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 24px;
  border-bottom: 1px solid #E8E3DD;
  flex-wrap: wrap;
}
.header-main .logo img { height: 32px; display: block; }
.header-search { flex: 1; display: flex; align-items: center; gap: 8px; max-width: 480px; min-width: 200px; margin: 0; }
.header-search input {
  flex: 1;
  border: 1px solid #E8E3DD;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  background: var(--cream);
  color: var(--ink);
}
.header-search-btn {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
}
.header-search-btn:hover { background: var(--ink); }
.header-user > a.header-search-icon-btn {
  display: none;
  color: var(--ink);
  font-size: 17px;
  align-items: center;
}
.header-user { font-size: 13px; white-space: nowrap; display: flex; align-items: center; gap: 8px; margin-left: auto; }

.site-nav {
  background: #fff;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  font-size: 13px; padding: 10px 24px; border-bottom: 1px solid #E8E3DD;
  max-height: 60px; overflow: hidden;
  transition: max-height 0.25s ease, padding 0.25s ease, opacity 0.2s ease;
}
.site-nav a { color: var(--ink); text-decoration: none; }
.site-nav .nav-spacer { flex: 1; }
.site-nav .user-greeting { color: var(--taupe); font-size: 12px; }
.site-nav form button {
  background: none; border: none; color: var(--ink); font-family: inherit;
  font-size: 13px; cursor: pointer; padding: 0;
}

main { max-width: 880px; margin: 0 auto; padding: 32px 24px; }
main.wide { max-width: 1140px; }

.card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 6px rgba(51,44,41,0.14);
  padding: 20px 24px;
  margin-bottom: 16px;
  transition: opacity .15s ease;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}
.card-grid > * { min-width: 0; }
/* ユーザーカード一覧(/users/ カテゴリ・検索結果の絞り込み等)は、TOPのスクロール行と
   同じ175px基準のカードサイズになるよう列幅を合わせる。モバイルの2列固定は変更しない */
@media (min-width: 721px) {
  .card-grid:has(.profile-card) { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); }
}
.card-grid .card { margin-bottom: 0; }
.card h2, .card h3 { margin-bottom: 6px; }
.card .meta { color: var(--taupe); font-size: 13px; }

.badge {
  display: inline-block;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
}
.badge-taupe { background: var(--taupe); }
.badge-type-taupe { background: #fff; border: 1px solid rgba(51,44,41,0.35); color: rgba(51,44,41,0.6); border-radius: 5px; padding: 2.5px 10px; }
.badge-outline-taupe {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  border: 1.5px solid var(--taupe);
  color: var(--taupe);
  padding: 1.5px 10px;
}
.badge-outline-taupe i { font-size: 11px; }
/* Rank badges */
.rank-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  color: #fff;
  font-size: 0.5em;
  flex-shrink: 0;
  vertical-align: middle;
  margin-left: 0.5em;
}
.rank-icon-expert { background: var(--teal); }
.rank-icon-experiencer { background: var(--blue); }

.badge-orange { background: var(--orange); }
.tag {
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #EFEAE4;
  color: var(--taupe);
  margin: 2px 4px 2px 0;
}
.tag-category { background: #EFEAE4; color: var(--taupe); border-radius: 4px; }

.hashtag {
  display: inline-block;
  font-size: 12px;
  color: var(--ink);
  text-decoration: none;
  margin: 2px 8px 2px 0;
}
.hashtag::before { content: '#'; }
a.hashtag:hover { color: var(--ink); text-decoration: underline; }

.tag-chip-input-wrapper {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 8px 10px;
  border: 1px solid #E8E3DD;
  border-radius: 8px;
  background: #fff;
}
.tag-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px;
  padding: 4px 6px 4px 10px;
  border-radius: 999px;
  background: #EFEAE4;
  color: var(--ink);
}
.tag-chip-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border: none; border-radius: 50%;
  background: none;
  color: var(--taupe);
  font-size: 14px; line-height: 1;
  cursor: pointer; padding: 0;
}
.tag-chip-remove:hover { background: #E0D9D1; }
.tag-chip-input-field {
  flex: 1; min-width: 120px;
  border: none; outline: none;
  font-size: 14px;
  padding: 4px 2px;
}

.avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #E8E3DD;
}

.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
}
.btn:hover { opacity: 0.85; text-decoration: none; }
.btn-accent { background: linear-gradient(90deg, var(--orange), var(--teal)); color: #fff; }
.btn-outline { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-outline:hover { opacity: 0.7; background: transparent; }
.btn-sm { padding: 7px 16px; font-size: 13px; }

input[type=text], input[type=password], input[type=email], input[type=number], input[type=tel], input[type=url], select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #DDD6CD;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  margin-bottom: 4px;
  background: #fff;
  color: var(--ink);
}
form p { margin-bottom: 14px; }
label { display: block; font-size: 14px; color: var(--ink); font-weight: 500; margin-bottom: 4px; }
.helptext { display: block; font-size: 12px; color: var(--taupe); margin-bottom: 6px; }
.empty { color: var(--taupe); font-style: normal; font-size: 13px; }

/* Home page: hero */
.hero { display: flex; flex-direction: column; gap: 16px; padding: 24px 0; }
.hero-cards { display: flex; flex-direction: row; gap: 16px; }
.hero-card { border-radius: 16px; padding: 18px 20px; color: #fff; flex: 1; }
.hero-card h3 { color: #fff; margin-bottom: 10px; }
.hero-card ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.8; }
.hero-card-ai { background: linear-gradient(135deg, var(--orange), var(--teal)); }
.hero-card-guide { background: linear-gradient(135deg, var(--blue), var(--purple)); }

.hero-banner { width: 100%; overflow: hidden; position: relative; }
.hero-slider { display: flex; gap: 16px; align-items: flex-start; }
.hero-slide { flex-shrink: 0; border-radius: 14px; overflow: hidden; opacity: 0.72; transition: opacity 0.4s; box-shadow: 0 4px 14px rgba(51,44,41,0.15); display: block; }
.hero-slide.active { opacity: 1; }
.hero-slide img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.hero-banner-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.hero-banner-dots .dot { width: 6px; height: 6px; border-radius: 50%; background: #DDD6CD; display: inline-block; cursor: pointer; }
.hero-banner-dots .dot.active { background: var(--ink); }

/* Home page: sidebar + main grid */
.home-layout { display: grid; grid-template-columns: 220px 1fr; gap: 0; padding-bottom: 32px; align-items: start; }
.sidebar-pt-buy {
  display: flex; align-items: center; gap: 7px;
  background: var(--orange); border-radius: 8px; padding: 10px 13px; margin-bottom: 12px;
  text-decoration: none; color: #fff; font-size: 13px; font-weight: 700;
}
.sidebar-pt-buy:hover { background: #d9830f; }
.sidebar-pt-buy-icon { font-size: 18px; }
.sidebar-pt-buy-text { flex: 1; }
.sidebar-pt-buy-arrow { font-size: 16px; font-weight: 400; }
.home-pt-buy-mobile { display: none; }
.home-sidebar { display: flex; flex-direction: column; gap: 18px; }
.sidebar-section h4 {
  font-size: 13px; color: var(--ink); margin-bottom: 0;
  border-bottom: 1px solid #E8E3DD; padding: 8px 0 8px; font-weight: 600;
  cursor: default;
}
.sidebar-section a { display: block; font-size: 12px; color: var(--taupe); padding: 4px 0; }
/* category list section */
.sidebar-cats .sidebar-cats-title {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; font-weight: 600; color: var(--ink);
  padding: 8px 0 10px; border-bottom: 2px solid #E8E3DD;
  text-decoration: none; margin-bottom: 0;
}
.sidebar-cats .sidebar-cats-title span { color: var(--taupe); font-weight: 400; }
.sidebar-cats .sidebar-cat-link {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--ink);
  padding: 8px 0; border-bottom: 1px solid #E8E3DD;
  text-decoration: none;
}
.sidebar-cats .sidebar-cat-link span { color: var(--taupe); font-size: 14px; }
.sidebar-cats .sidebar-cat-link:hover,.sidebar-cats .sidebar-cats-title:hover { opacity: 0.72; }
/* カテゴリ hover flyout */
.sidebar-cat-item { }
.sidebar-cat-dropdown {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.25s ease, opacity 0.2s ease;
}
.sidebar-cat-item:hover .sidebar-cat-dropdown { max-height: 400px; opacity: 1; }
.sidebar-cat-child {
  display: block;
  padding: 5px 8px 5px 4px;
  font-size: 12px;
  color: var(--taupe);
  text-decoration: none;
  border-bottom: 1px solid #F0EBE6;
}
.sidebar-cat-child:last-child { border-bottom: none; }
.sidebar-cat-child:hover { color: var(--ink); }
/* sub-links: hidden until section is hovered */
.sidebar-sub {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.25s ease, opacity 0.2s ease;
}
.sidebar-section:hover .sidebar-sub { max-height: 300px; opacity: 1; }
.sidebar-section { cursor: pointer; }
.sidebar-cats { cursor: default; }

.sidebar-banner { width: 100%; border-radius: 10px; display: block; margin-bottom: 4px; }

.home-group { margin-bottom: 8px; }
.home-group-title { font-size: 18px; font-weight: 700; margin: 0 0 8px; padding: 8px 0 8px; border-bottom: 2px solid var(--brand); color: var(--text); }
.home-section { margin-bottom: 32px; }
.home-section h2 { font-size: 16px; display: flex; align-items: baseline; justify-content: space-between; }
.h2-links { display: inline-flex; align-items: center; gap: 10px; }
.home-section-more { font-size: 12px; font-weight: 400; color: var(--taupe); text-decoration: none; white-space: nowrap; }
.home-section-more:hover { text-decoration: underline; }
.page-help-link { display: inline-block; margin-left: 10px; font-size: 12px; font-weight: 400; color: var(--taupe); text-decoration: none; white-space: nowrap; vertical-align: middle; }
.page-help-link:hover { text-decoration: underline; }
.home-section h3 { font-size: 16px; font-weight: 600; margin: 8px 0 6px; }
.scroll-row { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.scroll-row::-webkit-scrollbar { display: none; }
.scroll-outer { position: relative; overflow: hidden; }
.scroll-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 20;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid #E8E3DD; background: rgba(255,255,255,0.97);
  box-shadow: 0 2px 10px rgba(51,44,41,.15);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--ink); padding: 0; line-height: 1;
  transition: background .15s, color .15s;
}
.scroll-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.scroll-btn-left { left: 4px; }
.scroll-btn-right { right: 4px; }
.scroll-card {
  background: #fff; border-radius: 14px; box-shadow: 0 1px 6px rgba(51,44,41,0.14);
  min-width: 200px; flex: 0 0 200px; overflow: hidden; color: var(--ink); display: flex; flex-direction: column;
  transition: opacity .15s ease;
}
.scroll-card-thumb { background: linear-gradient(135deg, var(--cream), #E8E3DD); width: 100%; aspect-ratio: 2/1; display: block; }
img.scroll-card-thumb { object-fit: cover; }
/* サービスカードの画像未設定時（「No image」表示、正方形は.scroll-card--photoで別途適用済み） */
.scroll-card-thumb.scroll-card-thumb--empty {
  background: #E5E5E5; display: flex; align-items: center; justify-content: center;
  color: #999; font-size: 12px;
}
.scroll-card-body { padding: 12px 14px; }
.scroll-card-title {
  font-size: 13px; font-weight: 500; line-height: 1.5; margin-bottom: 6px;
  height: 4.5em; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.scroll-card-meta { font-size: 11px; color: var(--taupe); height: 24px; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 4px; }
/* Advio公式コラム：タイトルが見切れないよう文字を小さくして行数を増やす */
.scroll-card--yorunote .scroll-card-title {
  font-size: 11px;
  height: 7.2em;
  margin-bottom: 0;
  -webkit-line-clamp: 5;
}
.scroll-card-meta-right { white-space: nowrap; flex-shrink: 0; }
/* おすすめ投稿・フォロー中：タイトルを1行伸ばし、Advio公式コラムと同じ文字サイズに。カード高さは他要素を詰めて維持 */
#rec-posts .scroll-card-title,
#following-posts .scroll-card-title {
  font-size: 11px;
  height: 6em;
  margin-bottom: 2px;
  -webkit-line-clamp: 4;
}
#rec-posts .scroll-card-meta,
#following-posts .scroll-card-meta { height: 20px; }
.scroll-card-inner { display: block; color: inherit; text-decoration: none; flex: 1; }

/* Service price rows */
.scroll-card-price {
  height: 38px; overflow: hidden;
  display: flex; align-items: center;
  padding: 0 14px;
  font-size: 14px; font-weight: 700; color: var(--orange);
  border-top: 1px solid #F0EBE6;
}
/* scroll-cards in a card-grid context */
.card-grid .scroll-card { min-width: 0; flex: none; }
.card-grid .action-card { min-width: 0; flex: none; }
.action-card-answered { font-size: 10px; background: rgba(255,255,255,0.25); border-radius: 4px; padding: 1px 6px; margin-left: 6px; }
.service-card-price {
  margin: 0; padding: 4px 16px 6px;
  font-size: 16px; font-weight: 700; color: var(--ink);
}
.scroll-card-author { display: flex; align-items: center; gap: 6px; padding: 8px 14px 10px; border-top: 1px solid #F0EBE6; color: var(--taupe); text-decoration: none; }
.scroll-card-author:hover { color: var(--ink); }
.author-avatar-sm { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.author-avatar-sm--fallback { background: var(--ink); color: #fff; font-size: 9px; font-weight: 500; display: flex; align-items: center; justify-content: center; }
.author-name-sm { font-size: 11px; }
.scroll-card-empty { background: #fff; border: 1px dashed #DDD6CD; box-shadow: none; min-width: 200px; flex: 0 0 200px; height: 140px; }

.profile-card {
  background: #fff; border-radius: 14px; box-shadow: 0 1px 6px rgba(51,44,41,0.14);
  min-width: 175px; flex: 0 0 175px; padding: 16px 12px; text-align: center; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; overflow: hidden;
  position: relative; transition: opacity .15s ease;
}
/* rank badge: absolute top-right inside profile-card (user ranking) */
.profile-card > .rank-badge { position: absolute; top: 6px; right: 6px; margin-bottom: 0; z-index: 2; }
.profile-card .avatar { width: 64px; height: 64px; margin: 0 auto 8px; }
.profile-card-cat-row { height: 32px; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-top: 6px; margin-bottom: 2px; }
.profile-card-cat-row .tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* おすすめ専門家／おすすめ経験者（TOPページ）ではカテゴリーを複数表示するため折り返しを許可 */
.profile-card-cat-row--multi {
  height: auto; min-height: 24px; width: 100%;
  flex-wrap: wrap; justify-content: flex-start;
  gap: 3px;
}
.profile-card-cat-row--multi .tag-category {
  flex: 0 0 auto;
  background: #EFEAE4;
  color: var(--taupe);
  border: none;
  border-radius: 4px;
  margin: 0;
}
/* 資格行（プロフィールカード） */
.profile-card-qual {
  display: flex; align-items: center; gap: 4px; text-align: left;
  font-size: 10px; color: var(--ink); margin: 1px 0; width: 100%;
}
.profile-card-qual span:last-child {
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qual-pill {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; font-size: 9px; font-weight: 700;
  flex-shrink: 0; line-height: 1;
}
/* 資格行エリア（高さ揃え） */
.profile-card-qual-area { min-height: 40px; display: flex; flex-direction: column; gap: 2px; justify-content: flex-start; width: 100%; }
/* 国家資格・民間資格ともに未記載の場合は空欄を確保せず上に詰める */
.profile-card-qual-area:not(:has(.profile-card-qual)) { min-height: 0; }
.profile-card-cat-row .tag { font-size: 10px; }
.qual-national { border: 1.5px solid #0D9991; color: #0D9991; border-radius: 50%; }
.qual-private  { border: 1.5px solid #5BACD4; color: #5BACD4; border-radius: 50%;
  font-size: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 12' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='8' height='10' rx='1.2' fill='none' stroke='%235BACD4' stroke-width='1.4'/%3E%3Cline x1='2.8' y1='4' x2='7.2' y2='4' stroke='%235BACD4' stroke-width='1.1'/%3E%3Cline x1='2.8' y1='6.5' x2='7.2' y2='6.5' stroke='%235BACD4' stroke-width='1.1'/%3E%3Cline x1='2.8' y1='9' x2='5.5' y2='9' stroke='%235BACD4' stroke-width='1.1'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 9px 11px; }
.profile-card-expertise { font-size: 11px; color: var(--ink); line-height: 1.4; min-height: 77px; width: 100%; text-align: left; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; }
.profile-card-review { font-size: 12px; margin-top: 6px; min-height: 22px; display: flex; align-items: center; justify-content: center; }
.review-stars { color: #F29418; font-weight: 500; }
.review-count { color: var(--taupe); font-size: 11px; margin-left: 6px; }
.avatar-fallback { display: flex; align-items: center; justify-content: center; background: #EFEAE4; color: var(--taupe); font-size: 22px; }
.profile-card-name { font-size: 13px; font-weight: 500; min-height: 38px; display: flex; align-items: center; justify-content: center; width: 100%; }
/* card-hover-opacity — note.com style dimming on hover */
a.card, a.profile-card { text-decoration: none; }
a.card:hover, .scroll-card:hover, a.profile-card:hover { opacity: .72; text-decoration: none; }
.card a:hover, .scroll-card-inner:hover, .scroll-card-author:hover { text-decoration: none; }


/* Profile detail header (cover band + overlapping avatar + tabs) */
.profile-header-band {
  position: relative;
  height: clamp(90px, 15vw, 160px);
  border-radius: 14px 14px 0 0;
  background-color: #D9D3CB;
  background-size: cover;
  background-position: center top;
  margin-bottom: 0;
}
.profile-header-card { text-align: left; padding-top: 64px; border-radius: 0 0 14px 14px; box-shadow: none; }
.profile-header-top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; }
.profile-header-top .meta a { color: var(--ink); }
.profile-header-avatar-slot { position: absolute; left: 24px; bottom: -48px; z-index: 2; width: 96px; height: 96px; }
.profile-header-avatar { width: 96px; height: 96px; font-size: 32px; border: 3px solid #fff; }
.profile-header-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; margin-bottom: 14px; }
.profile-header-actions form { display: flex; align-items: center; }

.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(51,44,41,0.16);
  padding: 8px;
  min-width: 160px;
  z-index: 10;
}
.dropdown-menu.open { display: block; }
.dropdown-menu a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--ink);
  font-size: 14px;
}
.dropdown-menu a:hover { background: var(--cream); text-decoration: none; }
.dropdown-divider { border: none; border-top: 1px solid #F0EBE6; margin: 4px 0; }
.dropdown-sub { font-size: 12px !important; color: var(--taupe) !important; padding-left: 20px !important; }
/* ── post split-button ── */
.post-split-btn {
  position: relative; display: flex; align-items: stretch;
  background: linear-gradient(90deg, var(--teal), var(--orange)); border-radius: 6px; white-space: nowrap;
}
.post-split-main {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 11px; color: #fff; font-size: 13px; font-weight: 500;
  text-decoration: none; border-radius: 6px 0 0 6px;
}
.post-split-main:hover { background: rgba(255,255,255,0.12); color: #fff; }
.post-split-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 26px; background: none; border: none; border-left: 1px solid rgba(255,255,255,0.22);
  cursor: pointer; color: #fff; border-radius: 0 6px 6px 0; font-size: 10px;
}
.post-split-arrow:hover { background: rgba(255,255,255,0.12); }
.post-split-menu {
  display: none; position: absolute; top: calc(100% + 6px); right: 0;
  background: #fff; border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  min-width: 150px; z-index: 200; overflow: hidden;
}
.post-split-menu.open { display: block; }
.post-split-menu a {
  display: block; padding: 10px 14px; font-size: 14px;
  color: var(--ink); text-decoration: none;
}
.post-split-menu a:hover { background: var(--cream); }
.nav-user-btn {
  background: none; border: none; font-family: inherit; font-size: 13px;
  cursor: pointer; color: var(--taupe); padding: 0;
  display: flex; align-items: center; gap: 4px; white-space: nowrap;
}
.nav-user-btn:hover { color: var(--taupe); }
.header-user > a {
  display: flex; align-items: center; height: 30px; padding: 0 2px;
  font-size: 17px; color: var(--ink); text-decoration: none;
}
.header-user > a.btn { font-size: 13px; height: auto; padding: 7px 16px; color: #fff; }
.header-user > a.btn-outline { color: var(--ink); }
.hdr-bell-wrap { position: relative; display: flex; align-items: center; }
.hdr-bell {
  background: none; border: none; cursor: pointer; padding: 0 2px;
  display: flex; align-items: center; height: 30px;
  font-size: 17px; color: var(--ink); position: relative;
}
.hdr-bell:hover { color: var(--taupe); }
.hdr-bell-panel {
  display: none; position: absolute; top: calc(100% + 8px); right: -60px;
  width: 300px; background: #fff; border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.13); z-index: 300; overflow: hidden;
  border: 1px solid #F0EBE6;
}
.hdr-bell-panel.open { display: block; }
.hdr-bell-header {
  padding: 12px 16px; font-size: 13px; font-weight: 600;
  border-bottom: 1px solid #F0EBE6;
}
.hdr-bell-item {
  display: block; padding: 12px 16px;
  border-bottom: 1px solid #F0EBE6;
  color: var(--ink); text-decoration: none;
}
.hdr-bell-item:hover { background: var(--cream); color: var(--ink); }
.hdr-bell-title { font-size: 13px; line-height: 1.5; margin-bottom: 3px; }
.hdr-bell-time { font-size: 11px; color: var(--taupe); }
.hdr-bell-footer {
  display: block; padding: 10px 16px; text-align: center;
  font-size: 13px; color: var(--taupe); text-decoration: none;
}
.hdr-bell-footer:hover { background: var(--cream); }
.hdr-bell-empty {
  padding: 28px 16px; text-align: center;
  font-size: 13px; color: var(--taupe);
}
.badge-bell {
  position: absolute; top: 2px; right: -4px;
  font-size: 9px; min-width: 14px; height: 14px; line-height: 14px;
  padding: 0 3px; border-radius: 999px;
}
.header-user /* Point icon badge (circle P in header) */
.pt-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--orange); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
  flex-shrink: 0;
}
.pt-icon-link {
  display: inline-flex; align-items: center;
  margin-right: 3px; text-decoration: none;
}
.pt-icon-link:hover { opacity: 0.75; }
.header-points-group {
  height: 30px;
}
.header-user-btn {
  background: none; border: none; cursor: pointer; padding: 0;
  display: flex; align-items: center;
}
.header-user-avatar {
  width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
  border: 2px solid #E8E3DD; transition: border-color .15s;
}
.header-user-btn:hover .header-user-avatar { border-color: var(--ink); }
.header-user-dropdown .dropdown-menu { top: calc(100% + 8px); }
.nav-logout-btn {
  display: block; width: 100%; text-align: left;
  background: none; border: none; font-family: inherit; font-size: 14px;
  cursor: pointer; color: var(--ink); padding: 8px 12px; border-radius: 8px;
}
.nav-logout-btn:hover { background: var(--cream); }
.header-link-points .fa-star { color: var(--orange); font-size: 11px; }
.header-link-points .fa-coins { color: var(--orange); font-size: 11px; }
.hdr-sep { color: #CCC; margin: 0 2px; }
.header-points-group { display: flex; align-items: center; gap: 2px; text-align: left; }
.header-points-detail { font-size: 11px; color: var(--taupe); }
.header-points-paren { font-size: 11px; color: var(--taupe); white-space: nowrap; }
.header-points-detail:hover { color: var(--taupe); text-decoration: underline; }

/* Profile edit: live header/avatar preview */
.profile-edit-avatar-wrap .profile-header-avatar { position: absolute; top: 0; left: 0; pointer-events: none; }
.profile-edit-image-btn {
  position: absolute; right: 6px; bottom: 6px;
  display: flex; align-items: center; gap: 4px;
  background: rgba(51,44,41,0.78); color: #fff;
  font-size: 11px; padding: 5px 8px; border-radius: 16px;
  cursor: pointer; line-height: 1;
}
.profile-edit-avatar-btn { right: -2px; bottom: 4px; padding: 6px; border-radius: 50%; }
.profile-edit-name-field { flex: 1; min-width: 200px; padding-top: 8px; }
.profile-edit-name-field label { margin-bottom: 4px; }
.profile-edit-name-field input {
  font-size: 20px; font-weight: 600; color: var(--ink);
  border: none; border-bottom: 1px solid #E8E3DD; padding: 4px 2px; width: 100%;
}
.visually-hidden-input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

.profile-edit-order-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.profile-edit-order-item {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid #E8E3DD; border-radius: 10px;
  padding: 12px 14px; font-size: 14px; cursor: grab;
  touch-action: none; user-select: none;
}
.profile-edit-order-item.sortable-chosen { background: #ffffff; border-color: var(--ink); }
.profile-edit-order-handle { color: var(--taupe); font-size: 16px; }

.profile-edit-section-heading { margin-top: 24px; margin-bottom: 4px; font-size: 16px; }
.profile-edit-link-row { display: flex; gap: 8px; margin-bottom: 8px; }
.profile-edit-link-row input { flex: 1; min-width: 120px; margin-bottom: 0; }

.profile-edit-detail-heading { margin-top: 24px; margin-bottom: 8px; }
.profile-edit-detail-frame { background: #EFEAE4; border-radius: 14px; padding: 20px 24px; margin-bottom: 16px; }

.sns-field-label { display: flex !important; align-items: center; gap: 6px; }
.sns-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; }
.sns-icon-sns_note { background: none; color: inherit; }
.sns-note-char { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; background: #41C9B4; color: #fff; border-radius: 50%; font-weight: 700; font-size: 10px; font-family: Georgia, serif; flex-shrink: 0; }
.sns-note-img { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
.sns-note-svg { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; display: block; }
.sns-tag { display: inline-flex; align-items: center; gap: 5px; }
.sns-tag i { font-size: 14px; }

.profile-tabs { display: flex; gap: 8px; margin: 24px 0 20px; border-bottom: 1px solid #E8E3DD; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.profile-tabs::-webkit-scrollbar { display: none; }
.profile-tabs a {
  padding: 10px 16px; font-size: 14px; color: var(--taupe); border-bottom: 2px solid transparent;
  white-space: nowrap; flex-shrink: 0;
}
.profile-tabs a.active { color: var(--ink); font-weight: 500; border-bottom-color: var(--ink); }

.profile-detail-sections { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
.profile-detail-section { background: #fff; border-radius: 14px; box-shadow: 0 1px 6px rgba(51,44,41,0.14); padding: 20px 24px; }
.profile-detail-section h3 { font-size: 16px; margin-bottom: 10px; }
.related-link-list { display: flex; flex-direction: column; gap: 8px; }
.related-link-item { color: var(--ink); text-decoration: underline; font-size: 14px; word-break: break-all; }
.related-link-item:hover { color: var(--taupe); }

.sns-feed-card { display: block; color: var(--ink); }
.sns-feed-thumb { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; margin-bottom: 8px; }
.sns-feed-card h3 { font-size: 14px; margin-bottom: 4px; }

.dashboard-nav { display: flex; gap: 16px; margin-bottom: 20px; border-bottom: 1px solid #E8E3DD; padding-bottom: 12px; }
/* ── dashboard section spacing ── */
.dash-section { margin-top: 48px; }
.dash-section > h2 { margin-bottom: 16px; }
.dash-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px; margin-bottom: 32px;
}
.dash-menu-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 10px; background: #fff; border-radius: 10px;
  box-shadow: 0 1px 6px rgba(51,44,41,0.14);
  color: var(--ink); text-decoration: none; font-size: 12px; text-align: center;
  transition: box-shadow .15s, color .15s;
}
.dash-menu-card:hover { box-shadow: 0 3px 12px rgba(51,44,41,0.14); color: var(--ink); }
.dash-menu-card i { font-size: 20px; color: var(--ink); }
.dash-menu-divider { grid-column: 1 / -1; border: none; border-top: 1px solid var(--border); margin: 4px 0; }
.table-scroll { overflow-x: auto; }
.dashboard-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 6px rgba(51,44,41,0.14); }
.dashboard-table th, .dashboard-table td { padding: 10px 12px; border-bottom: 1px solid #EFEAE4; text-align: left; font-size: 14px; vertical-align: top; }
.dashboard-table th { background: #FAF7F3; color: var(--taupe); font-weight: 500; }
.service-manage-table th:not(:first-child):not(:nth-child(2)), .service-manage-table td:not(:first-child):not(:nth-child(2)) { white-space: nowrap; }
.service-manage-table th:nth-child(2), .service-manage-table td:nth-child(2) { min-width: 160px; }
.inquiry-message-cell summary { cursor: pointer; }
.inquiry-message-cell p { margin: 6px 0 0; white-space: pre-wrap; }
.dashboard-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.dashboard-actions form { display: inline; }
.dashboard-inline-form { display: flex; gap: 6px; align-items: center; }
.field-categories-row { display: flex; gap: 8px; flex-wrap: wrap; }
.field-categories-row select { flex: 1; min-width: 140px; }

.field-keywords-row { display: flex; gap: 8px; flex-wrap: wrap; }
.field-keywords-row input { flex: 1; min-width: 110px; margin-bottom: 0; }

.muted { color: var(--taupe); font-size: 12px; }
.service-manage-heading { margin-top: 24px; }
.profile-tab-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.profile-tab-heading h2 { margin: 0; }
.service-manage-table .service-manage-handle { cursor: grab; color: var(--taupe); width: 24px; text-align: center; }
.service-manage-table tr.sortable-chosen { background: #ffffff; }
.service-manage-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; }

@media (max-width: 720px) {
  /* ── layout ── */
  .home-layout { grid-template-columns: 1fr; }
  .home-sidebar { display: none; }
  .home-pt-buy-mobile { display: flex; justify-content: center; width: fit-content; margin: -8px auto 16px; padding: 10px 28px; }
  .home-pt-buy-mobile .sidebar-pt-buy-text { flex: none; }
  main.home .home-main { padding-top: 12px; }
  .card-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  /* ── header ── */
  .header-search { display: none; }
  .header-user > a.header-search-icon-btn { display: flex; }
  .header-main { padding: 10px 10px; gap: 8px; flex-wrap: nowrap; }
  .header-main .logo img { height: 26px; }
  .header-user { font-size: 11px; gap: 5px; white-space: nowrap; }

  /* ── nav: single horizontal scrollable row ── */
  .site-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 8px 14px; gap: 14px; font-size: 12px; }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a, .site-nav .nav-user-btn { white-space: nowrap; }
  .site-nav .nav-spacer { display: none; }
  .site-nav .user-greeting { display: none; }

  /* ── header: icon-only links; points is icon-only too (number/内訳 hidden) ── */
  .hdr-label { display: none; }
  .header-link-points, .header-points-paren { display: none; }

  /* ── compact 投稿 split-button so the logged-in header fits 375px ── */
  .post-split-main { padding: 5px 8px; gap: 4px; font-size: 12px; }
  .post-split-arrow { width: 22px; }

  /* ── scroll arrows off on mobile ── */
  .scroll-btn { display: none !important; }

  /* ── wide admin/management tables: scroll horizontally instead of overflowing the page ── */
  .dashboard-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── halve border-radius on mobile ── */
  .hero-slide { border-radius: 7px; }
  .card { border-radius: 7px; }
  .scroll-card { border-radius: 7px; }
  .profile-card { border-radius: 7px; }
  .post-list-eyecatch { border-radius: 5px; }
}

.errorlist { list-style: none; margin: 0 0 6px; padding: 0; color: var(--red); font-size: 12px; }
form > p:has(.errorlist) input, form > p:has(.errorlist) textarea { border-color: var(--red); }

/* Post editor (note.com-style) */
.title-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid #E8E3DD;
  font-size: 26px;
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  font-weight: 500;
  padding: 10px 0;
  margin-bottom: 20px;
  background: transparent;
}
.title-input:focus { outline: none; border-bottom-color: var(--ink); }

.field-eyecatch { margin-bottom: 20px; }
.field-eyecatch label { display: block; margin-bottom: 6px; }
.eyecatch-preview { max-width: 240px; max-height: 180px; object-fit: cover; border-radius: 10px; margin-top: 10px; display: block; }

/* サービス出品/編集フォームのサムネイル画像プレビュー（正方形、未設定時は「No image」表示） */
.service-thumb-preview { width: 160px; height: 160px; object-fit: cover; border-radius: 10px; margin-top: 10px; display: block; }
.service-thumb-preview.service-thumb-preview--empty {
  background: #E5E5E5; display: flex; align-items: center; justify-content: center;
  color: #999; font-size: 13px;
}

.field-photo-media { margin-bottom: 20px; }
.field-photo-mode { margin-bottom: 16px; }
.field-photo-mode > label,
#photo-mode-images > label,
#photo-mode-video > label { display: block; margin-bottom: 8px; }
.media-row { border: 1px solid #E8E3DD; border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.media-row-fields { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.media-row-fields input[type=text], .media-row-fields input[type=url] { flex: 1; min-width: 160px; margin-bottom: 0; }
.media-row-preview { max-width: 100px; max-height: 100px; object-fit: cover; border-radius: 6px; display: block; }
.media-row-delete { font-size: 13px; margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; }
.media-row-remove { margin-top: 8px; }

.editor-layout {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}
#editor-container {
  background: #fff;
  font-size: 15px;
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  min-height: 320px;
  flex: 1;
  min-width: 0;
}
.ql-container.ql-snow { border-color: #E8E3DD; border-radius: 8px; min-height: 280px; }
.editor-toolbar-tpl.ql-toolbar.ql-snow {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  overflow-x: auto;
  background: #fff;
  border: none;
  border-top: 1px solid #E8E3DD;
  border-radius: 0;
  box-shadow: 0 -2px 10px rgba(51,44,41,0.08);
}
.editor-toolbar-tpl .ql-formats { margin-right: 10px; flex-shrink: 0; }
#insert-toc-btn {
  border: none;
  background: none;
  cursor: pointer;
  display: inline-block;
  float: left;
  width: 28px;
  height: 24px;
  padding: 3px 5px;
}
#insert-toc-btn svg { width: 100%; height: 100%; }
#insert-toc-btn:hover .ql-stroke { stroke: var(--ink); }
#post-form { padding-bottom: 56px; }

@media (min-width: 900px) {
  #post-form { padding-bottom: 0; }
  .editor-layout {
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
  }
  .editor-toolbar-tpl.ql-toolbar.ql-snow {
    position: sticky;
    top: 20px;
    left: auto;
    right: auto;
    bottom: auto;
    flex-direction: column;
    align-items: stretch;
    width: 80px;
    flex-shrink: 0;
    overflow-x: visible;
    border: 1px solid #E8E3DD;
    border-top: 1px solid #E8E3DD;
    border-radius: 10px;
    box-shadow: none;
  }
  .editor-toolbar-tpl .ql-formats {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-right: 0;
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid #F0ECE6;
  }
  .editor-toolbar-tpl .ql-formats:last-child { border-bottom: none; margin-bottom: 0; }
  .editor-toolbar-tpl .ql-picker {
    float: none;
    display: block;
    width: 100%;
  }
  .editor-toolbar-tpl .ql-picker.ql-header {
    width: 100%;
    font-size: 12px;
  }
  .editor-toolbar-tpl .ql-picker-label { padding-left: 6px; padding-right: 20px; overflow: hidden; }
  .editor-toolbar-tpl .ql-formats > button {
    float: none;
    margin: 0 auto;
  }
}
.hidden-body-field { display: none; }

.field-tags { margin-bottom: 20px; }
.field-tags label { display: block; margin-bottom: 6px; }

/* Eyecatch gallery */
.eyecatch-gallery-section { margin-top: 14px; }
.eyecatch-gallery-toggle {
  background: none; border: 1px solid var(--ink); border-radius: 6px;
  padding: 5px 12px; color: var(--ink); cursor: pointer; font-size: 0.85rem;
  font-family: inherit; transition: background 0.15s;
}
.eyecatch-gallery-toggle:hover { background: rgba(51,44,41,0.06); }

/* Customize step: cover image preview */
.customize-cover-preview {
  margin-bottom: 12px;
}
.customize-cover-preview img {
  max-width: 200px;
  max-height: 160px;
  width: auto;
  height: auto;
  display: block;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  margin-bottom: 6px;
}

/* Gallery modal */
.gallery-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.gallery-modal {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 640px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,0.22);
}
.gallery-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(51,44,41,0.12);
  flex-shrink: 0;
}
.gallery-modal-title { font-size: 0.95rem; font-weight: 700; margin: 0; color: var(--taupe); }
.gallery-modal-close {
  background: none; border: none; cursor: pointer;
  font-size: 1rem; color: #888; padding: 4px 8px; border-radius: 4px; line-height: 1;
}
.gallery-modal-close:hover { background: rgba(51,44,41,0.08); }
.gallery-modal-body { overflow-y: auto; padding: 20px; flex: 1; }
.gallery-modal-footer {
  padding: 12px 20px;
  border-top: 1px solid rgba(51,44,41,0.12);
  text-align: right;
  flex-shrink: 0;
}
.eyecatch-gallery-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.eyecatch-gallery-item {
  cursor: pointer;
  border: 2px solid #E8E3DD;
  border-radius: 8px;
  overflow: hidden;
  width: 130px;
  text-align: center;
  transition: border-color 0.15s;
}
.eyecatch-gallery-item:has(input:checked) { border-color: var(--ink); }
.eyecatch-gallery-item input[type="radio"] { display: none; }
.eyecatch-gallery-thumb { width: 100%; height: 80px; object-fit: cover; display: block; }
.eyecatch-gallery-name { display: block; font-size: 11px; padding: 4px 6px; color: var(--taupe); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eyecatch-gallery-item--none { background: #FAF8F5; }
.eyecatch-gallery-none-label { display: flex; align-items: center; justify-content: center; height: 80px; color: var(--taupe); font-size: 12px; }

/* Rich post body rendering */
.post-eyecatch { width: 100%; height: auto; display: block; border-radius: 14px; margin-bottom: 16px; }
.post-list-eyecatch { width: 100%; height: 160px; object-fit: cover; border-radius: 10px; margin-bottom: 12px; display: block; }
.post-body { overflow-wrap: anywhere; }
.post-body a { text-decoration: underline; }
.post-body a.embed-card { text-decoration: none; }
.post-body h2, .post-body h3 { margin-top: 2em; font-weight: 600; }
.post-body blockquote { border-left: 3px solid var(--taupe); margin: 1em 0; padding: 0.2em 1em; color: var(--taupe); }
.post-body img { max-width: 100%; height: auto; border-radius: 8px; }
.post-body ul, .post-body ol { padding-left: 1.4em; }
.ql-editor img { max-width: 100%; height: auto; }

.scroll-card-thumb { object-fit: cover; width: 100%; }

/* Template picker */
.field-template { margin-bottom: 24px; }
.field-template > label { display: block; margin-bottom: 8px; }
.template-picker { display: flex; gap: 12px; flex-wrap: wrap; }
.template-option {
  flex: 1;
  min-width: 160px;
  border: 1px solid #E8E3DD;
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  position: relative;
  display: block;
}
.template-option input[type=radio] { position: absolute; top: 12px; right: 12px; margin: 0; }
.template-option:has(input:checked) { border-color: var(--ink); background: #F4F2F0; }
.template-option-label { display: block; font-weight: 500; padding-right: 20px; }
.template-option-desc { display: block; font-size: 11px; color: #999; margin-top: 3px; line-height: 1.4; }

/* Photo template */
.post-detail--photo { padding: 20px 24px; }
.post-photo-main { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.post-photo-caption { }
.post-photo-caption h1 { font-size: 18px; }

/* 相談BOX / アンケート card accent lines */
.card--qbox { border-top: 3px solid #5AADE0; padding-top: 17px; }
.card--survey { border-top: 3px solid #E05A6B; padding-top: 17px; }
/* Action cards (相談BOX / アンケート) */
.action-card { background: #fff; border-radius: 14px; box-shadow: 0 1px 6px rgba(51,44,41,0.14); min-width: 200px; flex: 0 0 200px; display: flex; flex-direction: column; overflow: hidden; color: var(--ink); transition: opacity .15s ease; }
a.action-card { text-decoration: none; }
a.action-card:hover { opacity: .72; text-decoration: none; }
.action-card-inner { display: flex; flex-direction: column; flex: 1; color: var(--ink); }
.action-card-inner:hover { opacity: .72; text-decoration: none; }
.action-card-header { background: #B3A090; color: #fff; font-size: 13px; font-weight: 600; padding: 9px 14px; display: flex; align-items: center; gap: 7px; }
.action-card-body { padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.action-card-meta { font-size: 11px; color: var(--taupe); margin: 0; }
.action-card-title { font-size: 13px; font-weight: 500; line-height: 1.5; margin: 0; flex: 1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.action-card-cta { background: transparent; color: var(--orange); border: 1.5px solid var(--orange); font-size: 12px; font-weight: 600; padding: 7px 10px; border-radius: 8px; text-align: center; }
.action-card-author { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-top: 1px solid #F0EBE6; color: var(--ink); font-size: 12px; text-decoration: none; }
.action-card-author:hover { text-decoration: none; }
.scroll-card--photo .scroll-card-thumb { aspect-ratio: 1 / 1; height: auto; }

/* Photo template: multi-image/video vertical stack (detail page) */
.photo-stack { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.photo-stack img { width: 100%; height: auto; display: block; border-radius: 10px; }
.photo-stack-video { position: relative; width: 100%; padding-top: 56.25%; border-radius: 10px; overflow: hidden; }
.photo-stack-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; display: block; }

/* Photo template: thumbnail overlays (list/card/scroll views) */
.thumb-wrap { position: relative; display: block; }
/* Ranking badge */
.rank-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--taupe); color: #fff;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
  margin-bottom: 4px;
}
.rank-badge.rank-gold   { background: #C9A84C; }
.rank-badge.rank-silver { background: #9B9B9B; }
.rank-badge.rank-bronze { background: #B87333; }
/* service card: rank-badge overlay in thumb-wrap */
.thumb-wrap .rank-badge {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  margin-bottom: 0;
}

.thumb-more-badge {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(51,44,41,0.75);
  color: #fff;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
}
.service-thumb-badge {
  position: absolute; top: 8px; left: 8px; z-index: 1;
  background: #fff; border: 1px solid rgba(51,44,41,0.35); color: rgba(51,44,41,0.6);
  font-size: 11px; font-weight: 600;
  padding: 2.5px 8px; border-radius: 5px;
  line-height: 1.4; pointer-events: none;
}
.thumb-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 28px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  pointer-events: none;
}

/* Essay template */
.post-detail--essay { padding: 20px 24px; }
.post-body--essay { font-size: 17px; line-height: 2.0; }
.post-body--essay p { margin-bottom: 1.4em; }
.card-essay-excerpt { color: var(--taupe); font-size: 13px; line-height: 1.8; margin: 8px 0; }
.scroll-card--essay .scroll-card-body { padding-top: 16px; }

/* Table of contents */
.post-toc {
  background: var(--cream);
  border: 1px solid #E8E3DD;
  border-radius: 10px;
  padding: 14px 18px;
  margin: 16px 0;
}
.post-toc-title { font-weight: 500; font-size: 13px; margin-bottom: 8px; }
.post-toc ul { list-style: none; margin: 0; padding: 0; }
.post-toc-item { font-size: 13px; line-height: 1.9; }
.post-toc-item--h3 { padding-left: 1.2em; }
.post-toc-item a { color: var(--ink); }
.post-toc-item a:hover { color: var(--ink); }

/* Video embed */
.post-body iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border-radius: 8px;
  border: none;
  display: block;
  margin: 1em 0;
}

/* Draft badge */
.badge-draft { background: var(--taupe); }

/* やることリスト: 未対応バッジ */
.badge-pending { background: var(--red); }

/* ヘッダーアイコンの未読を示す小さい丸 */
.badge-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 9px;
  height: 9px;
  min-width: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--red);
}

/* Author actions (edit/unpublish/delete) */
.post-author-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
  flex-wrap: wrap;
}
.post-author-actions .inline-form { display: inline; }
.btn-danger { color: #B3473D; border-color: #B3473D; }
.btn-danger:hover { background: #B3473D; color: #fff; opacity: 1; }

/* Like button */
.post-like-form { display: inline-block; margin: 10px 0; }
.btn-liked { background: var(--pink); color: #fff; border-color: var(--pink); }
.btn-liked:hover { opacity: 0.85; }
.post-like-count { color: var(--taupe); font-size: 13px; margin: 10px 0; }
.card-like-count { white-space: nowrap; }

/* View count */
.post-view-count { color: var(--taupe); font-size: 13px; }
.card-view-count { white-space: nowrap; }

/* Post meta bar (detail page) */
.post-meta-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--taupe);
  margin: 10px 0 8px;
  flex-wrap: wrap;
}
.post-meta-author {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
}
.post-meta-author:hover { text-decoration: underline; }
.author-avatar-xs {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.post-meta-dot { color: #C8BDB6; }
.post-meta-type {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  color: var(--taupe);
  border: 1px solid #C8BDB6;
  border-radius: 4px;
  padding: 2px 7px;
  white-space: nowrap;
  line-height: 1;
}
.post-tag-bar {
  display: flex;
  align-items: center;
  gap: 4px 8px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}

.post-tags { margin-top: 20px; padding-top: 14px; border-top: 1px solid #E8E3DD; }
.post-bottom-actions { display: flex; align-items: center; gap: 10px; margin-top: 28px; padding-top: 20px; border-top: 1px solid #E8E3DD; }
.post-action-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: 20px; border: 1.5px solid var(--taupe); background: none; color: var(--ink); font-size: 14px; cursor: pointer; font-family: inherit; line-height: 1; }
.post-action-btn--liked { border-color: #e0245e; color: #e0245e; }
.post-action-btn--static { cursor: default; }

/* Collection picker (post form) */
.field-collection-picker { margin-bottom: 16px; }
.collection-picker-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.collection-picker-select { flex: 1; padding: 7px 10px; border: 1.5px solid var(--taupe); border-radius: 8px; font-size: 14px; font-family: inherit; background: #fff; }
.collection-picker-remove { background: none; border: none; color: var(--taupe); cursor: pointer; font-size: 18px; padding: 2px 6px; line-height: 1; }
/* Collection create card (profile) */
.collection-create-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 80px; color: var(--taupe); text-decoration: none; font-size: 14px; }
.collection-create-icon { font-size: 28px; line-height: 1; }
/* Collection creation form */
.collection-post-checklist { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; padding: 10px 12px; border: 1.5px solid var(--taupe); border-radius: 8px; margin-top: 6px; }
.collection-post-check-item { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; padding: 2px 0; }

/* Editor extra toolbar (TOC insert) */
.form-actions { display: flex; gap: 10px; margin-top: 16px; }

/* TOC marker placeholder shown while editing */
.ql-editor .toc-marker {
  display: block;
  border: 1px dashed #C9C2B8;
  border-radius: 6px;
  padding: 10px 14px;
  color: #8A8378;
  font-size: 13px;
  background: #FAF8F5;
}

/* Paywall marker placeholder shown while editing */
.ql-editor .paywall-marker {
  display: block;
  border: 1px dashed var(--orange);
  border-radius: 6px;
  padding: 10px 14px;
  color: var(--orange);
  font-size: 13px;
  background: #FDF6EC;
  text-align: center;
}

/* Delete control for custom embeds, editor-only (stripped before save) */
.ql-editor .toc-marker,
.ql-editor .paywall-marker,
.ql-editor a.embed-card,
.ql-editor blockquote.twitter-tweet {
  position: relative;
}
.ql-editor .video-embed-wrapper {
  position: relative;
  display: inline-block;
  max-width: 100%;
}
.embed-delete-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(51, 44, 41, 0.75);
  color: #fff;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
  z-index: 2;
}
.embed-delete-btn:hover { background: var(--ink); }

/* ---- 有料記事（paywall） ---- */
/* 一覧カード・メタバーの価格バッジ */
.post-price-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--orange);
  border: 1px solid var(--orange);
  border-radius: 4px;
  padding: 2px 7px;
  white-space: nowrap;
  line-height: 1;
}
/* 本文表示側: 全文が読める人に見せる区切り線 */
.paywall-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--orange);
  font-size: 12px;
  margin: 26px 0;
  white-space: nowrap;
}
.paywall-divider::before,
.paywall-divider::after {
  content: '';
  flex: 1;
  border-top: 1px dashed var(--orange);
}
/* 本文表示側: 未購入者向けの購入ボックス */
.paywall-box {
  margin: 26px 0 8px;
  padding: 26px 20px;
  border: 1.5px solid #F0D9B8;
  border-radius: 12px;
  background: #FDF9F2;
  text-align: center;
}
.paywall-box-lead { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.paywall-box-price {
  font-size: 30px;
  font-weight: 700;
  color: var(--orange);
  margin-bottom: 12px;
  line-height: 1.2;
}
.paywall-box-price-unit { font-size: 15px; margin-left: 2px; }
.paywall-box-balance { font-size: 12px; color: #888; margin: 0 0 12px; }
.paywall-box-shortage { font-size: 13px; color: var(--red); margin: 0 0 10px; font-weight: 500; }
.paywall-box .btn { min-width: 220px; }
/* 投稿フォームの価格入力 */
.price-input-row { display: flex; align-items: center; gap: 6px; }
.price-input-row input[type=number] { max-width: 160px; }
.price-input-unit { font-size: 14px; }

/* Twitter/X embed fallback sizing before widgets.js enhances it */
.post-body blockquote.twitter-tweet, .ql-editor blockquote.twitter-tweet {
  border-left: 3px solid #1D9BF0;
  padding-left: 14px;
  margin: 1em 0;
  font-size: 14px;
  color: var(--taupe);
}

/* Generic link preview card (embed) */
.post-body a.embed-card, .ql-editor a.embed-card {
  display: flex;
  align-items: stretch;
  border: 1px solid #E8E3DD;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  margin: 1em 0;
  background: #fff;
}
.post-body a.embed-card:hover, .ql-editor a.embed-card:hover { border-color: var(--ink); text-decoration: none; }
.embed-card-image {
  width: 200px;
  flex-shrink: 0;
  object-fit: cover;
}
@media (max-width: 600px) {
  .embed-card-image { width: 84px; }
  .embed-card-body { padding: 8px 10px; gap: 2px; }
  .embed-card-title { font-size: 12px; }
  .embed-card-desc { font-size: 11px; -webkit-line-clamp: 1; }
  .embed-card-url { font-size: 10px; }

  /* ── profile-tabs: tighten so short tab bars fit on one line without scrolling ── */
  .profile-tabs { gap: 2px; }
  .profile-tabs a { padding: 7px 3px; font-size: 12px; }
}
.embed-card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 12px 16px;
  min-width: 0;
  flex: 1;
}
.embed-card-title {
  font-weight: 500;
  font-size: 14px;
  display: block;
}
.embed-card-desc {
  font-size: 12px;
  color: var(--taupe);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.embed-card-url {
  font-size: 11px;
  color: var(--taupe);
  display: block;
}

/* Site-wide messages framework feedback */
.messages { list-style: none; margin: 0 0 16px; padding: 0; }
.message {
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 8px;
  font-size: 13px;
  background: #EFEAE4;
  color: var(--ink);
}
.message-success { background: #E4F4F1; color: var(--teal); }
.message-error { background: #FBEAE9; color: var(--red); }
.message-warning { background: #FDF1E0; color: var(--orange); }

/* 冊子の記事順リスト（並び替え・プレビュー・注文詳細で共用） */
.reorder-list { list-style: none; margin: 0 0 16px; padding: 0; }
.reorder-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #F0ECE6;
}
.reorder-item select { width: auto; margin-bottom: 0; }
.reorder-item-title { flex: 1; }

/* 汎用ステータスバッジ: 進行中=青、完了=インク、キャンセル/失敗=赤 */
.badge-status-pending { background: var(--blue); }
.badge-status-done { background: var(--ink); }
.badge-status-failed { background: var(--red); }

/* qbox（相談BOX）: ステータス・懸賞ポイントバッジ、検索フォーム */
.badge-status-unanswered { background: var(--blue); }
.badge-status-answered { background: var(--blue); }
.badge-status-resolved { background: var(--ink); }
.badge-bounty { background: var(--orange); }

/* セミナー・イベント: 開催ステータスバッジ */
.badge-status-upcoming { background: var(--blue); }
.badge-status-today { background: var(--orange); }
.badge-status-ended { background: var(--ink); }
.badge-status-archive { background: var(--blue); }
.scroll-card-status-badge {
  position: absolute; top: 8px; left: 8px; z-index: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.qbox-filter-form, .filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}
.qbox-filter-form input[type="text"],
.qbox-filter-form select,
.filter-form input[type="text"],
.filter-form select {
  padding: 6px 10px;
  border: 1px solid #E8E3DD;
  border-radius: 8px;
  font-size: 13px;
}
.qbox-wallet-balance { margin: 10px 0 16px; }
.answer-best { border: 2px solid var(--ink); }
.mark-best-form { margin-top: 10px; }

/* qbox（相談BOX）: 回答者のアイコン・ニックネーム表示（Yahoo!知恵袋風） */
.answer-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.answer-header .avatar { width: 40px; height: 40px; flex-shrink: 0; }
.answer-header .avatar-fallback { font-size: 15px; }
.answer-author-meta { display: flex; flex-direction: column; gap: 2px; }
.answer-author-name { color: var(--blue); font-weight: 500; font-size: 14px; }
.answer-author-name:hover { text-decoration: underline; }
.answer-author-meta .meta { margin: 0; }

/* qbox（相談BOX）: 回答を縦1列・横長カードで表示（Yahoo!知恵袋風） */
.answer-list { display: flex; flex-direction: column; gap: 16px; }

/* messaging（メッセージ機能） */
.conversation-list { list-style: none; margin: 0; padding: 0; }
.conversation-list-item { border-bottom: 1px solid #EFEAE4; }
.conversation-list-item:last-child { border-bottom: none; }
.conversation-list-item a {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0; color: var(--ink); text-decoration: none;
}
.conversation-avatar { width: 48px; height: 48px; flex-shrink: 0; font-size: 16px; }
.conversation-list-text { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; flex: 1; min-width: 0; }
.conversation-list-time { flex-shrink: 0; white-space: nowrap; font-size: 12px; }
.conversation-unread a strong { color: var(--pink); }

/* フォロー中・フォロワー一覧（X風の横並びリスト表示） */
.follow-list { list-style: none; margin: 0; padding: 0; }
.follow-list-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid #EFEAE4;
}
.follow-list-item:last-child { border-bottom: none; }
.follow-list-link {
  display: flex; align-items: center; gap: 12px;
  color: var(--ink); text-decoration: none;
  flex: 1; min-width: 0;
}
.follow-list-avatar { width: 48px; height: 48px; flex-shrink: 0; }
.follow-list-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.follow-list-name { display: flex; align-items: center; gap: 4px; font-weight: 600; }
.follow-list-bio {
  font-size: 13px; color: var(--taupe);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.follow-list-btn-form { flex-shrink: 0; }
.conversation-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.conversation-heading h1 { margin: 0; }
.conversation-heading .conversation-avatar { width: 40px; height: 40px; font-size: 14px; }
.message-thread { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; }
.message-row { display: flex; align-items: flex-end; gap: 8px; }
.message-row-self { justify-content: flex-end; }
.conversation-avatar-sm { width: 28px; height: 28px; flex-shrink: 0; font-size: 12px; }
.message-bubble {
  max-width: 70%; padding: 10px 14px; border-radius: 14px;
  background: #fff; border: 1.5px solid #ddd; color: var(--ink);
}
.message-bubble p { margin: 0 0 2px; white-space: pre-wrap; word-break: break-word; }
.message-bubble p a { color: var(--blue); text-decoration: underline; word-break: break-all; }
.message-bubble .meta { display: block; text-align: right; margin-top: 2px; }
.message-bubble-self { background: #EFEAE4; border: none; color: var(--ink); align-self: flex-end; }
.message-bubble-self .meta { color: var(--taupe); }
.message-bubble-self p a { color: var(--blue); }
.message-attachment-image { display: block; max-width: 240px; max-height: 240px; border-radius: 10px; margin-bottom: 4px; }
.message-attachment-file {
  display: inline-flex; align-items: center; gap: 4px; margin-bottom: 4px;
  color: inherit; text-decoration: underline;
}
.message-form { display: flex; gap: 10px; margin-top: 16px; align-items: flex-end; }
.message-form textarea {
  flex: 1; border-radius: 10px; border: 1px solid #DDD5CD; padding: 10px 12px;
  font-family: inherit; resize: vertical;
}
.message-attach-btn { position: relative; overflow: hidden; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.message-attach-input {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0;
}
.icon-clip { width: 18px; height: 18px; vertical-align: middle; }
.message-attachment-file .icon-clip { width: 16px; height: 16px; margin-right: 2px; }

.message-form { flex-wrap: wrap; border-radius: 10px; transition: background 0.15s, outline 0.15s; }
.attach-filename { flex-basis: 100%; order: -1; }
.attach-filename:not(:empty) { color: var(--ink); }
.message-form-dragover {
  background: rgba(51, 44, 41, 0.08);
  outline: 2px dashed var(--ink); outline-offset: 4px;
}

/* サービス詳細 */
.breadcrumb-nav { margin-bottom: 0.5rem; }
.service-detail-title { margin-top: 0.25rem; margin-bottom: 1rem; }
.service-detail-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 700px) {
  .service-detail-layout { grid-template-columns: 1fr; gap: 1rem; }
}
.service-detail-main-img { width: 100%; border-radius: 8px; object-fit: cover; display: block; }
.service-detail-no-img {
  width: 100%; aspect-ratio: 4/3; border-radius: 8px;
  background: #E5E5E5; display: flex; align-items: center; justify-content: center;
  color: #999; font-size: 0.9rem;
}
.service-star-rating { display: flex; align-items: center; gap: 0.4rem; margin: 0.5rem 0; }
.service-star-rating .stars { color: #f5a623; font-size: 1.2rem; letter-spacing: 1px; }
.service-star-rating .rating-avg { font-weight: 700; font-size: 1rem; }
.service-star-rating .rating-count { font-size: 0.85rem; }
.service-price {
  font-size: 2rem; font-weight: 700; color: var(--ink);
  margin: 0.75rem 0 1rem;
}
.service-price-tax { font-size: 0.85rem; font-weight: 400; color: var(--taupe); }
.service-detail-spec { margin: 0 0 1.25rem; padding: 0; border-top: 1px solid var(--border); }
.service-detail-spec-row { display: flex; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px solid var(--border); margin: 0; }
.service-detail-spec-row dt { font-size: 0.85rem; color: var(--taupe); min-width: 72px; flex-shrink: 0; }
.service-detail-spec-row dd { font-size: 0.9rem; margin: 0; }
.btn-lg { padding: 14px 28px; font-size: 1rem; width: 100%; text-align: center; display: block; }
.btn-purchase { background: var(--orange); border-color: var(--orange); color: #fff; }
.btn-purchase:hover { opacity: 0.88; }
.purchase-modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.45); z-index: 1000;
  align-items: center; justify-content: center;
}
.purchase-modal-overlay.open { display: flex; }
.purchase-modal-box {
  background: #fff; border-radius: 14px;
  padding: 2rem 1.75rem; width: min(440px, 92vw);
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
.purchase-modal-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.6rem; }
.purchase-modal-service {
  font-size: 0.95rem; color: var(--taupe);
  margin: 0 0 1.2rem; border-bottom: 1px solid #eee; padding-bottom: 0.8rem;
}
.purchase-modal-table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.purchase-modal-table th {
  text-align: left; font-size: 0.85rem; color: var(--taupe);
  padding: 0.4rem 0; width: 40%; font-weight: 400;
}
.purchase-modal-table td { font-size: 0.95rem; padding: 0.4rem 0; }
.purchase-modal-shortage { color: #c0392b; font-size: 0.88rem; }
.purchase-modal-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.purchase-modal-actions form { flex: 1; }
.purchase-modal-actions .btn { width: 100%; justify-content: center; }

/* Avit AI利用規約 同意モーダル */
.ai-terms-modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.45); z-index: 2000;
  align-items: center; justify-content: center; padding: 20px;
}
.ai-terms-modal-overlay.open { display: flex; }
.ai-terms-modal-box {
  position: relative;
  background: #fff; border-radius: 14px;
  padding: 2rem 1.75rem; width: min(480px, 92vw);
  max-height: 85vh; overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
.ai-terms-modal-title { font-size: 1.15rem; font-weight: 700; margin: 0 0 1rem; color: var(--ink); }
.ai-terms-modal-summary { margin: 0 0 1.5rem; padding-left: 1.2rem; }
.ai-terms-modal-summary li { font-size: 0.9rem; line-height: 1.7; color: var(--ink); margin-bottom: 0.6rem; }
.ai-terms-modal-actions { display: flex; flex-direction: column; gap: 0.6rem; }
.ai-terms-modal-actions .btn { width: 100%; justify-content: center; text-align: center; }
.ai-terms-modal-close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none; font-size: 1.4rem; line-height: 1;
  color: var(--taupe); cursor: pointer; padding: 4px;
}
.ai-terms-modal-close:hover { color: var(--ink); }
.service-seller-card {
  border: 1px solid #DDD5CD; border-radius: 10px;
  padding: 1rem 1.25rem; margin-top: 1.25rem;
}
.service-seller-inner { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.service-seller-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
}
.service-seller-avatar--placeholder { background: var(--taupe); }

/* 販売管理 */
.sales-order-list { display: flex; flex-direction: column; gap: 1rem; }
.sales-order-card {
  border: 1px solid #DDD5CD; border-radius: 10px; padding: 1rem 1.25rem;
}
.sales-order-header {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.4rem;
}
.sales-order-title { font-weight: 700; }
.sales-order-meta { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.sales-order-progress {
  display: flex; align-items: center; gap: 0; margin: 0.5rem 0;
}
.progress-step {
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 72px;
}
.progress-dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #ccc; background: #fff; flex-shrink: 0;
}
.progress-step.done .progress-dot { background: var(--orange); border-color: var(--orange); }
.progress-step.active .progress-dot { background: #fff; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(230,120,30,.2); }
.progress-label { font-size: 0.75rem; color: var(--taupe); white-space: nowrap; }
.progress-step.active .progress-label { color: var(--orange); font-weight: 700; }
.progress-step.done .progress-label { color: var(--ink); }
.progress-line { flex: 1; height: 2px; background: #ccc; min-width: 20px; margin-bottom: 16px; }
.sales-order-action { font-size: 0.9rem; margin: 0.4rem 0 0; color: var(--orange); }
.sales-order-header-left { display: flex; align-items: center; gap: 0.45rem; min-width: 0; flex: 1; }
.order-icon-service {
  width: 1.4em; height: 1.4em; border-radius: 3px;
  object-fit: cover; flex-shrink: 0; vertical-align: middle;
}
.order-icon-service--placeholder {
  width: 1.4em; height: 1.4em; border-radius: 3px;
  background: #DDD5CD; flex-shrink: 0; display: inline-block;
}
.order-icon-user {
  width: 1.4em; height: 1.4em; border-radius: 50%;
  object-fit: cover; flex-shrink: 0; vertical-align: middle;
}
.order-icon-user--placeholder {
  width: 1.4em; height: 1.4em; border-radius: 50%;
  background: #DDD5CD; flex-shrink: 0; display: inline-block;
}
@media (max-width: 640px) {
  .sales-order-header { flex-wrap: wrap; row-gap: 0.4rem; }
  .sales-order-header-left { flex-wrap: wrap; row-gap: 0.3rem; }
  .sales-order-title { flex-basis: 100%; font-size: 0.95rem; }
  .sales-order-header-left .meta { font-size: 12px; }
}
.progress-details { margin-top: 0.4rem; }
.progress-toggle {
  display: flex; align-items: center; gap: 0.3rem;
  font-size: 0.82rem; color: var(--taupe);
  cursor: pointer; user-select: none; list-style: none;
  padding: 0.15rem 0;
}
.progress-toggle::-webkit-details-marker { display: none; }
.progress-arrow { display: inline-block; transition: transform 0.15s; font-style: normal; }
details[open] .progress-arrow { transform: rotate(180deg); }

/* セミナー */
.seminar-thumbnail { width: 100%; height: auto; display: block; border-radius: 14px; margin-bottom: 16px; }
.seminar-card { padding: 0; overflow: hidden; }
.seminar-card-thumb { width: 100%; height: 160px; object-fit: cover; display: block; }
.seminar-card-body { padding: 1rem; }
.badge-free { background: var(--ink); color: #fff; }
.seminar-access-box {
  background: #EFEAE4; border: 1px solid var(--ink);
  border-radius: 8px; padding: 1rem 1.25rem; margin-top: 1.5rem;
}
.seminar-archive-box { background: #fff8e7; border-color: var(--orange); margin-top: 1rem; }

/* ポイントショップ */
.wallet-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 12px;
  background: #F5F1EC;
  border-radius: 10px;
  padding: 8px 14px;
  margin-bottom: 0.75rem;
}
.wallet-summary-total-inline {
  font-size: 0.85rem;
  color: var(--ink);
  white-space: nowrap;
}
.wallet-summary-total-inline strong {
  font-size: 1.05rem;
  font-weight: 700;
}
.wallet-summary-breakdown-inline {
  font-size: 0.78rem;
  color: var(--taupe);
}
.wallet-summary-links {
  margin-top: 0;
  margin-bottom: 0.5rem;
}
.wallet-summary-links a {
  color: var(--orange);
  text-decoration: underline;
}
.wallet-summary-links a:hover {
  opacity: 0.72;
}
.point-packages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  margin-top: 1.5rem;
}
.point-package-card {
  display: block;
  border: 1px solid #DDD5CD;
  border-radius: 12px;
  overflow: hidden;
  text-align: center;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s ease, transform .15s ease;
}
.point-package-card:hover {
  box-shadow: 0 4px 14px rgba(51,44,41,0.12);
  transform: translateY(-2px);
}
.point-package-pts {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  background: var(--orange);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  padding: 1.1rem 1rem;
  line-height: 1.2;
}
.point-package-body {
  padding: 1rem;
}
.point-package-price {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 4px;
}
.point-package-bonus {
  font-size: 0.8rem;
  color: var(--red);
  font-weight: 600;
  margin-bottom: 12px;
  min-height: 1.2em;
}
.point-package-buy {
  border-top: 1px solid #EEE7E0;
  padding-top: 10px;
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
}
.checkout-summary {
  background: var(--cream);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}
.checkout-summary p { margin: 4px 0; }
.btn-block { display: block; width: 100%; text-align: center; margin-top: 8px; }
.checkout-card {
  max-width: 440px;
  margin: 2rem auto;
}
.checkout-card .checkout-summary {
  margin-bottom: 0.75rem;
}

/* 換金申請 */
.cashout-available {
  text-align: center;
  background: #E8DCC6;
  border-radius: 14px;
  padding: 1rem 1.25rem;
  margin: 1rem 0 6px;
}
.cashout-available-label {
  display: block;
  font-size: 0.8rem;
  color: var(--taupe);
  margin-bottom: 4px;
}
.cashout-available-value {
  display: block;
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
}
.cashout-available-rules {
  font-size: 0.8rem;
  color: var(--taupe);
  margin: 8px 0 0;
}
.cashout-coin-note {
  text-align: center;
  margin-bottom: 1rem;
}
.cashout-notes {
  background: #F5F1EC;
  border-radius: 10px;
  padding: 0.75rem 1.1rem;
  margin-bottom: 1rem;
}
.cashout-notes-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--taupe);
  margin: 0 0 6px;
}
.cashout-notes ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.82rem;
  color: var(--taupe);
}
.cashout-notes li {
  margin-bottom: 4px;
}
.cashout-notes li:last-child {
  margin-bottom: 0;
}
.cashout-preview {
  font-size: 0.85rem;
  color: var(--ink);
  margin-bottom: 1rem;
}

/* Full-width home page */
main.home { max-width: none; padding: 0; }
main.home .hero { padding-left: 24px; padding-right: 24px; }
main.home .home-sidebar { padding: 24px 12px 32px 24px; border-right: 1px solid #E8E3DD; position: sticky; top: 0; max-height: 100vh; overflow-y: auto; scrollbar-width: none; }
main.home .home-sidebar::-webkit-scrollbar { display: none; }
main.home .home-main { padding: 24px 24px 32px 24px; min-width: 0; overflow: hidden; }

.hero-prev, .hero-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 10; background: rgba(255,255,255,0.9); border: none;
  border-radius: 50%; width: 44px; height: 44px; font-size: 26px;
  cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  display: flex; align-items: center; justify-content: center; color: var(--ink);
  line-height: 1; padding: 0;
}
.hero-prev { left: 12px; }
.hero-next { right: 12px; }
.hero-prev:hover, .hero-next:hover { background: #fff; }

/* ===== Footer ===== */
.site-footer { background: #EFEAE4; color: var(--taupe); padding: 48px 0 24px; margin-top: 48px; }
.footer-inner { max-width: 1100px; margin: 0 auto; padding: 0 32px; }
.footer-section-label { font-size: 11px; letter-spacing: 2px; color: var(--ink); font-weight: 500; margin-bottom: 8px; }
.footer-contact { text-align: center; padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid rgba(51,44,41,0.15); }
.footer-contact-text { font-size: 15px; color: var(--ink); margin: 0 0 20px; }
.footer-contact-btn { display: inline-block; background: transparent; color: var(--ink); border: 2px solid var(--ink); padding: 10px 32px; border-radius: 24px; font-size: 14px; text-decoration: none; font-weight: 500; }
.footer-contact-btn:hover { opacity: 0.72; }
.footer-nav { display: flex; gap: 48px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; min-width: 160px; }
.footer-col-title { font-size: 11px; letter-spacing: 2px; color: var(--ink); font-weight: 500; margin: 0 0 4px; }
.footer-col a { color: var(--ink); font-size: 13px; text-decoration: none; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom { border-top: 1px solid rgba(51,44,41,0.15); padding-top: 24px; text-align: center; }
.footer-sns { display: flex; gap: 16px; justify-content: center; margin-bottom: 16px; }
.footer-sns-link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(51,44,41,0.08); color: var(--ink); transition: background 0.2s; }
.footer-sns-link:hover { background: var(--ink); }
.footer-sns-link svg { width: 16px; height: 16px; }
.footer-copy { font-size: 11px; color: var(--taupe); margin: 0; }

/* ========== Static pages (law / privacy / notification) ========== */
.static-page {
  background: var(--cream);
  min-height: 60vh;
  padding: 48px 16px 80px;
}
.static-page-inner {
  max-width: 760px;
  margin: 0 auto;
}
.static-page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--taupe);
  margin-bottom: 32px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ink);
}
.static-page-inner h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--taupe);
  margin: 32px 0 12px;
}
.static-page-inner p,
.static-page-inner li {
  font-size: 0.95rem;
  line-height: 1.8;
  color: #555;
}
.static-page-inner ul,
.static-page-inner ol {
  padding-left: 1.4em;
}

/* ヘルプセクション内の表 */
.help-table-wrap {
  overflow-x: auto;
  margin: 4px 0 16px;
}
.help-table {
  width: 100%;
  min-width: 320px;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.help-table th,
.help-table td {
  padding: 10px 16px;
  border-bottom: 1px solid rgba(51,44,41,0.12);
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
}
.help-table th {
  font-weight: 600;
  color: var(--ink);
  background: rgba(51,44,41,0.04);
  white-space: nowrap;
}
.help-table td {
  color: #555;
}
.help-table td[rowspan] {
  vertical-align: middle;
  background: rgba(51,44,41,0.02);
}
.help-table tr.help-table-group-start td {
  border-top: 2px solid rgba(51,44,41,0.22);
}
.help-table-note {
  margin: 10px 0 0;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--taupe);
}

/* 利用規約などの定義リストで、①②のような番号がすでに振られているネストリストは
   ブラウザ標準の入れ子bullet（○）を出さない（番号と二重になるため） */
.terms-doc li ul {
  list-style: none;
  padding-left: 1.2em;
  margin-top: 4px;
}

/* Legal table */
.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.legal-table th,
.legal-table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(51,44,41,0.12);
  vertical-align: top;
  line-height: 1.7;
}
.legal-table th {
  width: 32%;
  white-space: nowrap;
  font-weight: 600;
  color: var(--taupe);
  background: rgba(51,44,41,0.04);
}
.legal-table td {
  color: #555;
}

/* Privacy sections */
.privacy-section {
  margin-bottom: 8px;
}
.privacy-contact {
  background: rgba(51,44,41,0.04);
  border-radius: 8px;
  padding: 20px 24px;
  margin-top: 40px;
}

/* Notification list */
.notification-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.notification-item {
  border-bottom: 1px solid rgba(51,44,41,0.12);
}
.notification-link {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px 4px;
  color: var(--taupe);
  text-decoration: none;
  transition: color 0.2s;
}
.notification-link:hover {
  color: var(--ink);
}
.notification-date {
  flex-shrink: 0;
  font-size: 0.85rem;
  color: #888;
}
.notification-title {
  font-size: 0.95rem;
  line-height: 1.6;
}
.notification-empty {
  color: #888;
  font-size: 0.95rem;
  padding: 24px 0;
}

/* Notification detail */
.notification-detail-date {
  font-size: 0.85rem;
  color: #888;
  margin-bottom: 8px;
}
.notification-body {
  margin-top: 24px;
  font-size: 0.95rem;
  line-height: 1.8;
  color: #444;
}
.notification-back {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid rgba(51,44,41,0.12);
}
.notification-back a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9rem;
}
.notification-back a:hover {
  text-decoration: underline;
}

/* ========== Help center ========== */
.help-lead {
  font-size: 0.95rem;
  line-height: 1.8;
  color: #555;
  margin-bottom: 32px;
}

/* ヘルプセンター内検索 */
.help-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(51,44,41,0.04);
  border: 1px solid rgba(51,44,41,0.08);
  border-radius: 999px;
  padding: 6px 6px 6px 18px;
  margin-bottom: 32px;
}
.help-search-box-icon {
  color: var(--taupe);
  font-size: 13px;
  flex-shrink: 0;
}
.help-search-box input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font-size: 14px;
  color: var(--ink);
  padding: 8px 0;
}
.help-search-box input:focus {
  outline: none;
}
.help-search-box-btn {
  flex-shrink: 0;
  border: none;
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 500;
  background: var(--ink);
  color: #fff;
  cursor: pointer;
}
.help-search-box-btn:hover {
  opacity: 0.85;
}
.help-search-summary {
  font-size: 0.85rem;
  color: var(--taupe);
  margin: -16px 0 24px;
}

/* Featured card (ポイント・コインについて) */
.help-featured-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  margin-bottom: 24px;
  border-radius: 12px;
  text-decoration: none;
  background: rgba(242, 148, 24, 0.08);
  border: 1px solid rgba(242, 148, 24, 0.35);
  transition: border-color 0.2s;
}
.help-featured-card:hover {
  border-color: var(--orange);
}
.help-featured-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(242, 148, 24, 0.18);
  color: var(--orange);
  font-size: 22px;
}
.help-featured-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.help-featured-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
}
.help-featured-desc {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #777;
}
.help-featured-more {
  flex-shrink: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--orange);
  white-space: nowrap;
}
.help-featured-more::after {
  content: ' ›';
}
.help-featured-card--neutral {
  background: rgba(51, 44, 41, 0.04);
  border-color: rgba(51, 44, 41, 0.14);
}
.help-featured-card--neutral:hover {
  border-color: var(--ink);
}
.help-featured-card--neutral .help-featured-icon {
  background: rgba(51, 44, 41, 0.12);
  color: var(--ink);
}
.help-featured-card--neutral .help-featured-more {
  color: var(--ink);
}
@media (max-width: 560px) {
  .help-featured-card {
    flex-wrap: wrap;
    gap: 12px;
  }
  .help-featured-body {
    flex-basis: calc(100% - 70px);
  }
  .help-featured-more {
    flex-basis: 100%;
  }
}

.help-index-heading {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--taupe);
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ink);
}
.help-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.help-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px;
  border-radius: 10px;
  background: rgba(51,44,41,0.04);
  border: 1px solid rgba(51,44,41,0.08);
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}
.help-card:hover {
  border-color: var(--ink);
  background: rgba(51,44,41,0.06);
}
.help-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.help-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(51,44,41,0.12);
  color: var(--ink);
  font-size: 15px;
}
.help-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}
.help-card-desc {
  font-size: 0.85rem;
  line-height: 1.6;
  color: #777;
}
.help-card-more {
  margin-top: auto;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
}
.help-card-more::after {
  content: ' ›';
}
.help-terms-btn {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  background: rgba(51,44,41,0.04);
  border: 1px solid rgba(51,44,41,0.08);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}
.help-terms-btn:hover {
  border-color: var(--ink);
  background: rgba(51,44,41,0.06);
}

.help-contact-banner {
  margin-top: 48px;
  padding: 24px;
  border-radius: 10px;
  background: rgba(51,44,41,0.04);
  text-align: center;
}
.help-contact-text {
  margin: 0 0 14px;
  font-size: 0.92rem;
  color: #555;
}

/* FAQ accordion */
.faq-category {
  margin-bottom: 36px;
}
.faq-category-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--taupe);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ink);
}
.faq-item {
  border-bottom: 1px solid rgba(51,44,41,0.12);
}
.faq-item[open] .faq-question::before {
  transform: rotate(90deg);
}
.faq-question {
  cursor: pointer;
  list-style: none;
  padding: 14px 28px 14px 4px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  position: relative;
}
.faq-question::-webkit-details-marker {
  display: none;
}
.faq-question::before {
  content: '\203A';
  position: absolute;
  right: 4px;
  top: 14px;
  color: var(--ink);
  font-weight: 700;
  transition: transform 0.2s;
}
.faq-answer {
  padding: 0 24px 18px 4px;
  font-size: 0.9rem;
  line-height: 1.8;
  color: #555;
}

/* Guide page sections */
.help-section {
  margin-bottom: 28px;
  scroll-margin-top: 16px;
}
.help-section-heading {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--taupe);
  margin: 0 0 10px;
}
.help-section-body {
  font-size: 0.95rem;
  line-height: 1.8;
  color: #555;
}
.help-section-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.help-section-link {
  display: inline-block;
}
.help-section-app-badges {
  display: flex;
  gap: 8px;
}
.help-section-app-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-size: 18px;
  transition: opacity 0.2s;
}
.help-section-app-badge:hover {
  opacity: 0.8;
}
.help-section--highlight {
  background: rgba(160,136,119,0.08);
  border-radius: 6px;
  padding: 16px 20px;
}
.help-section--highlight .help-section-heading {
  /* .static-page-inner h2 の margin-top:32px がここでは不要（枠内の上下余白を揃えるため） */
  margin-top: 0;
  color: var(--ink);
  font-size: 0.95rem;
}

/* Related pages box */
.help-related {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid rgba(51,44,41,0.12);
}
.help-related-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--taupe);
  margin: 0 0 10px;
}
.help-related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}
.help-related-list a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9rem;
}
.help-related-list a:hover {
  text-decoration: underline;
}

/* Flow diagram (step-by-step process) */
.flow-diagram {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 4px 0 20px;
}
.flow-endpoint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  width: 80px;
  text-align: center;
}
.flow-endpoint-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.flow-endpoint-icon i {
  font-size: 20px;
}
.flow-endpoint-icon--start {
  background: rgba(49, 155, 208, 0.14);
  color: var(--blue);
}
.flow-endpoint-icon--end {
  background: rgba(209, 18, 119, 0.14);
  color: var(--pink);
}
.flow-endpoint-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.flow-steps {
  display: flex;
  flex: 1;
  min-width: 0;
}
.flow-step {
  flex: 1;
  min-width: 0;
  background: var(--taupe);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-align: center;
  padding: 12px 20px;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.3;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
  margin-left: -10px;
}
.flow-step:first-child {
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
  margin-left: 0;
}
.flow-step-num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  color: var(--taupe);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* フロー図の下に表示する、番号付きのステップ説明 */
.flow-notes {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.flow-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.flow-note-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--taupe);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.flow-note-title {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.flow-note-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: #555;
}
.flow-note-caution {
  margin: 2px 0 0;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--taupe);
}

/* 本文・フロー説明・FAQ回答の中の「ページ名」リンク */
.help-section-body a,
.help-lead a,
.flow-note-text a,
.flow-note-caution a,
.faq-answer a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 640px) {
  .flow-diagram {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .flow-endpoint {
    flex-direction: row;
    width: auto;
    justify-content: flex-start;
    gap: 10px;
  }
  .flow-endpoint-icon {
    width: 36px;
    height: 36px;
  }
  .flow-endpoint-icon i {
    font-size: 16px;
  }
  .flow-steps {
    flex-direction: column;
    gap: 10px;
  }
  .flow-step {
    clip-path: none !important;
    margin-left: 0 !important;
    border-radius: 6px;
    position: relative;
    padding: 10px 16px;
  }
  .flow-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -9px;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--taupe);
    z-index: 1;
  }
}

/* ---- Breadcrumb ---- */
.breadcrumb {
  margin-bottom: 12px;
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.82rem;
  color: #888;
}
.breadcrumb li + li::before {
  content: '›';
  margin-right: 4px;
  color: #bbb;
}
.breadcrumb a {
  color: #888;
  text-decoration: none;
}
.breadcrumb a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.breadcrumb [aria-current="page"] {
  color: #555;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 240px;
}

/* ---- Author card ---- */
.author-card {
  display: block;
  margin-top: 32px;
  padding: 20px 24px;
}
.author-card-inner {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.author-card-avatar {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  font-size: 1.4rem;
}
.author-card-body {
  flex: 1;
  min-width: 0;
}
.author-card-name {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  color: var(--taupe);
  text-decoration: none;
  margin-bottom: 4px;
}
.author-card-name:hover {
  color: var(--ink);
}
.author-card-bio {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.6;
  margin: 0;
}
.author-card-follow-form {
  flex-shrink: 0;
  align-self: center;
}

/* ---- Related posts / Author's other posts ---- */
.post-related-section {
  margin-top: 32px;
}
.post-related-heading {
  font-size: 1rem;
  font-weight: 700;
  color: var(--taupe);
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(51,44,41,0.1);
}
.post-related-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--taupe);
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.post-related-card:hover {
  box-shadow: 0 4px 16px rgba(51,44,41,0.14);
}
.post-related-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}
.post-related-thumb--empty {
  background: rgba(51,44,41,0.06);
}
.post-related-body {
  padding: 10px 12px 12px;
  flex: 1;
}
.post-related-title {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Comment section ---- */
.comment-section {
  margin-top: 32px;
  padding: 20px 24px 24px;
}
.comment-section-heading {
  font-size: 1rem;
  font-weight: 700;
  color: var(--taupe);
  margin: 0 0 20px;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(51,44,41,0.1);
}
.comment-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 24px;
}
.comment-item {
  border-bottom: 1px solid rgba(51,44,41,0.08);
  padding-bottom: 20px;
}
.comment-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.comment-item-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.comment-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  font-size: 0.95rem;
}
.comment-author-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--taupe);
  text-decoration: none;
  margin-right: 8px;
}
.comment-author-name:hover {
  color: var(--ink);
}
.comment-body {
  font-size: 0.9rem;
  line-height: 1.7;
  color: #444;
  margin: 0;
  padding-left: 46px;
}
.comment-form {
  margin-top: 8px;
  border-top: 1px solid rgba(51,44,41,0.1);
  padding-top: 20px;
}
.comment-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(51,44,41,0.2);
  border-radius: 8px;
  font-size: 0.9rem;
  font-family: inherit;
  line-height: 1.6;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.comment-form textarea:focus {
  outline: none;
  border-color: var(--ink);
}
.comment-form .form-actions {
  margin-top: 8px;
  text-align: right;
}

/* --- preset avatar grid --- */
.preset-avatar-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.preset-avatar-item { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.preset-avatar-item input[type=radio] { display: none; }
.preset-avatar-item img {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  border: 3px solid transparent; transition: border-color .15s;
}
.preset-avatar-item span { font-size: 10px; color: var(--meta, #888); }
.preset-avatar-item:hover img { border-color: var(--ink); }
.preset-avatar-item.preset-selected img { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }

/* --- preset avatar modal --- */
.preset-open-btn {
  margin-top: 6px; font-size: 12px; padding: 4px 10px;
  background: none; border: 1px solid var(--border, #ddd);
  border-radius: 20px; cursor: pointer; color: var(--ink);
  display: block; width: fit-content;
}
.preset-open-btn:hover { background: var(--bg-alt, #f5f5f5); }
.preset-modal-overlay[hidden] { display: none !important; }
.preset-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: 500; display: flex; align-items: center; justify-content: center;
}
.preset-modal {
  background: var(--bg, #fff); border-radius: 14px;
  padding: 20px; max-width: 420px; width: 92%;
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
}
.preset-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.preset-modal-close {
  background: none; border: none; font-size: 18px;
  cursor: pointer; color: var(--meta, #888); line-height: 1;
}
.preset-modal .preset-avatar-grid { justify-content: center; gap: 12px; }
.preset-modal .preset-avatar-item img { width: 64px; height: 64px; }

/* --- preset icon button (left of camera icon on avatar) --- */
.profile-edit-preset-btn { left: -2px; bottom: 4px; padding: 6px; border-radius: 50%; }
.profile-edit-page { padding-bottom: 72px; }
.profile-edit-sticky-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(255,255,255,0.93);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(160,136,119,0.2);
  padding: 12px 20px;
  display: flex; justify-content: center; align-items: center;
  z-index: 100;
}
.profile-edit-header-clear-btn { position: absolute; right: 6px; bottom: 50px; display: flex; align-items: center; gap: 4px; background: rgba(51,44,41,0.62); color: rgba(255,255,255,0.85); font-size: 11px; padding: 4px 8px; border-radius: 16px; cursor: pointer; border: none; line-height: 1; white-space: nowrap; z-index: 3; }
.profile-edit-avatar-clear-btn { position: absolute; left: 128px; bottom: -68px; display: flex; align-items: center; gap: 4px; background: rgba(51,44,41,0.62); color: rgba(255,255,255,0.85); font-size: 11px; padding: 4px 8px; border-radius: 16px; cursor: pointer; border: none; line-height: 1; white-space: nowrap; z-index: 3; }
.profile-header-card.has-avatar-del { padding-top: 92px; }
.profile-edit-preset-text-btn { position: absolute; left: 128px; bottom: -44px; display: flex; align-items: center; gap: 2px; text-align: left; background: rgba(51,44,41,0.78); color: #fff; font-size: 11px; padding: 5px 10px; border-radius: 16px; cursor: pointer; white-space: nowrap; z-index: 3; border: none; line-height: 1; }

/* --- surveys（アンケート）: 進捗バー・状態バッジ・作成フォーム --- */
.badge-published { background: var(--blue); }
.badge-closed { background: var(--ink); }
.survey-progress {
  background: #F0ECE6;
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
  margin: 6px 0;
}
.survey-progress-bar {
  background: var(--blue);
  height: 100%;
  border-radius: 999px;
}
.survey-question-field { margin-bottom: 16px; }
.survey-optional-label { font-weight: 400; font-size: 12px; color: var(--taupe); }
.survey-question-row {
  border: 1px solid #E8E3DD;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
}
.survey-result-question { margin: 20px 0; }
.survey-result-choice-row { margin-bottom: 10px; }
.survey-creator-link { display: inline-flex; align-items: center; gap: 5px; color: inherit; }
.survey-creator-link:hover { color: var(--ink); }

.survey-question-scale-field { margin-top: 10px; }
.survey-question-scale-field p { margin-bottom: 8px; }

/* --- 質問作成フォーム: 選択肢の1行1入力欄UI（Googleフォーム風） --- */
.survey-question-choices-field .survey-choices-textarea { display: none; }
.survey-choice-rows { margin: 8px 0; }
.survey-choice-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.survey-choice-bullet { flex-shrink: 0; width: 18px; text-align: center; color: var(--taupe); font-size: 14px; }
.survey-choice-input { margin-bottom: 0; }
.survey-choice-remove {
  flex-shrink: 0; background: none; border: none; color: var(--taupe);
  font-size: 16px; line-height: 1; cursor: pointer; padding: 4px;
}
.survey-choice-remove:hover { color: var(--red); }
.survey-choice-add { margin-top: 4px; }

/* --- 質問作成フォーム: 質問カード下部（削除ボタン）を選択肢UIと分離 --- */
.survey-question-row-footer {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #F0ECE6;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.survey-question-required-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
  cursor: pointer;
}
.survey-question-delete-btn,
.survey-question-delete-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--taupe);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 6px;
}
.survey-question-delete-btn:hover,
.survey-question-delete-label:hover { color: var(--red); }

/* --- 質問作成フォーム: 「質問を追加」はカードを丸ごと足す操作なので破線ボックスで区別 --- */
.survey-question-add-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 14px;
  border: 2px dashed #DDD6CD;
  border-radius: 10px;
  background: none;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
}
.survey-question-add-btn:hover { border-color: var(--ink); color: var(--ink); }

/* --- 質問作成フォーム: 説明に添付する画像 --- */
.survey-image-field { margin: 10px 0 16px; }
.survey-image-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid #E8E3DD; border-radius: 10px; padding: 12px 14px; margin-bottom: 10px;
}
.survey-image-row-preview-wrap { flex-shrink: 0; }
.survey-image-row-preview { max-width: 100px; max-height: 100px; object-fit: cover; border-radius: 6px; display: block; }
.survey-image-row input[type=file] { flex: 1; min-width: 160px; margin-bottom: 0; }
.survey-image-delete-label { font-size: 13px; display: inline-flex; align-items: center; gap: 4px; color: var(--taupe); }
.survey-image-delete-label:hover { color: var(--red); }

/* --- アンケート詳細・回答ページ: 説明に添付された画像のギャラリー表示 --- */
.survey-image-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px; margin: 12px 0;
}
.survey-image-gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; display: block; cursor: zoom-in; }

.survey-lightbox-overlay {
  display: none; position: fixed; inset: 0; background: rgba(20,16,14,0.88);
  z-index: 1000; align-items: center; justify-content: center; padding: 32px;
}
.survey-lightbox-overlay.is-open { display: flex; }
.survey-lightbox-img { max-width: 100%; max-height: 100%; border-radius: 6px; display: block; }
.survey-lightbox-close {
  position: absolute; top: 16px; right: 20px; width: 40px; height: 40px;
  background: rgba(255,255,255,0.12); border: none; border-radius: 50%;
  color: #fff; font-size: 24px; line-height: 1; cursor: pointer;
}
.survey-lightbox-close:hover { background: rgba(255,255,255,0.22); }

/* --- 質問作成フォーム: 保存ボタンを画面下に固定（プロフィール編集ページと同じ見た目） --- */
.survey-form-page { padding-bottom: 72px; }
.survey-form-sticky-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(255,255,255,0.93);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(160,136,119,0.2);
  padding: 12px 20px;
  display: flex; justify-content: flex-end; align-items: center;
  z-index: 100;
}
/* ボタンを中央寄せにしたいページ用の修飾クラス（アンケート編集・相談BOX編集） */
.survey-form-sticky-bar.sticky-bar-center { justify-content: center; }

/* --- 投稿フォーム: 保存ボタンを画面下に固定 --- */
.post-form-page { padding-bottom: 72px; }
.post-form-sticky-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(255,255,255,0.93);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(160,136,119,0.2);
  padding: 12px 20px;
  display: flex; justify-content: center; align-items: center;
  gap: 10px;
  z-index: 100;
}

/* --- 質問作成フォーム: 均等目盛の最小値・最大値を横並びに --- */
.survey-scale-range-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
input.survey-scale-range-input { flex: 0 0 70px; width: 70px; margin-bottom: 0; }
.survey-scale-range-tilde { color: var(--taupe); }

.survey-linear-scale-row { display: flex; align-items: center; gap: 10px; }
.survey-linear-scale-row .survey-question-field { display: flex; gap: 8px; margin-bottom: 0; }
.survey-linear-scale-row .survey-linear-scale-input { display: flex; gap: 8px; }
.survey-scale-end-label { font-size: 0.85rem; color: var(--meta, #888); white-space: nowrap; }

.survey-star-rating .survey-star-input { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.survey-star-rating .survey-star-input > div { display: block; }
.survey-star-rating label {
  position: relative;
  display: inline-block;
  cursor: pointer;
  color: #DDD6CD;
  font-size: 0;
  line-height: 1;
}
.survey-star-rating label::before {
  content: "\2605";
  font-size: 28px;
}
.survey-star-rating input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.survey-star-rating .survey-star-input > div:has(input:checked) label,
.survey-star-rating .survey-star-input > div:has(input:checked) ~ div label,
.survey-star-rating .survey-star-input > div:hover label,
.survey-star-rating .survey-star-input > div:hover ~ div label {
  color: var(--orange);
}

/* 会員ダッシュボード */
.dashboard-stats .stat-card { text-align: center; }
.stat-value { font-size: 28px; font-weight: 700; color: var(--ink); margin: 4px 0; }
.stat-value--positive { color: var(--teal); }

.dashboard-rankings .card h3 { margin-bottom: 12px; }
.order-history-list { list-style: none; padding: 0; margin: 0; }
.order-history-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #F0EBE6; flex-wrap: wrap; }
.order-history-item:last-child { border-bottom: none; }
.order-history-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-list { list-style: decimal; padding-left: 20px; margin: 0; }
.ranking-list li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
.ranking-list li a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-count { color: var(--taupe); font-size: 13px; white-space: nowrap; }

.stat-compare { margin-top: 2px; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.stat-delta { font-weight: 600; }
.stat-delta--up { color: var(--teal); }
.stat-delta--down { color: var(--pink); }

.mini-stat-card .meta { text-align: center; margin-bottom: 8px; }
.mini-stat-list { margin: 0; }
.mini-stat-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.mini-stat-row dt { color: var(--taupe); font-size: 13px; }
.mini-stat-row dd { margin: 0; font-weight: 600; }

.pt-positive { color: #1B7F3D; font-weight: 600; }
.pt-negative { color: var(--red); font-weight: 600; }

.template-picker { position: relative; margin-bottom: 8px; }
.template-picker-toggle { font-size: 13px; padding: 4px 10px; }
.template-picker-list { position: absolute; bottom: calc(100% + 4px); left: 0; z-index: 100; list-style: none; margin: 0; padding: 6px 0; background: var(--cream); border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); min-width: 260px; }
.template-item { display: block; width: 100%; text-align: left; background: none; border: none; padding: 8px 16px; font-size: 13px; color: var(--ink); cursor: pointer; }
.template-item:hover { background: #f5f0eb; }

.bank-confirm-warning { background: #fff5f5; border: 1px solid #f5c6c6; border-radius: 8px; padding: 1rem 1.2rem; margin-top: 0.5rem; }
.bank-confirm-warning-text { color: #c0392b; font-size: 14px; line-height: 1.7; margin: 0 0 0.75rem; }
.bank-confirm-warning-text:last-child { margin-bottom: 0; }
.bank-confirm-warning-text a { text-decoration: underline; }

a.tag-link:hover {
  background: #E0D6CC;
  color: var(--ink);
}
a.tag-link.tag-category:hover {
  background: var(--taupe);
  color: #fff;
}

.tag-section-label {
  font-size: 12px;
  color: var(--taupe);
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
}
.profile-header-actions .btn {
  height: 36px;
  padding: 0 18px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}
.profile-header-actions .btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
}

/* qbox list page: header row + search row + status chips + collapsible filters */
.qbox-list-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.qbox-list-header h1 { margin-bottom: 0; }
.qbox-filter-form { flex-direction: column; gap: 0; margin: 12px 0 0; }
.qbox-search-row { display: flex; gap: 8px; align-items: center; }
.qbox-search-row input[type="text"] { flex: 1; margin-bottom: 0; }
.qbox-filter-collapse:not([hidden]) { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px; background: #f8f6f3; border: 1px solid #E8E3DD; border-radius: 8px; margin-top: 8px; }
.qbox-status-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 8px; }
.qbox-status-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 14px; border: 1px solid #D4CCC6; border-radius: 99px; font-size: 13px; color: #888; text-decoration: none; }
.qbox-status-chip:hover { border-color: var(--taupe); }
.qbox-status-chip.active { border-color: var(--ink); color: var(--ink); font-weight: 500; }
.qbox-status-chip--unanswered.active { border-color: var(--taupe); }
.qbox-status-chip--answered.active { border-color: var(--blue); }
.qbox-status-chip--resolved.active { border-color: var(--ink); }

/* qbox 画像添付 */
.qbox-image-gallery { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 8px; }
.qbox-gallery-img { width: 120px; height: 120px; object-fit: cover; border-radius: 8px; border: 1px solid #E8E3DD; cursor: pointer; transition: opacity 0.15s; }
.qbox-gallery-img:hover { opacity: 0.85; }
.qbox-image-input { display: block; margin-top: 6px; }

/* intake form */
.intake-section { margin-bottom: 2rem; }
.intake-section h2 { font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border); }
.intake-section h3 { font-size: 0.9rem; font-weight: 600; color: var(--ink-sub); }
.intake-radio-group, .intake-checkbox-group { display: flex; flex-direction: column; gap: 0.5rem; }
.intake-radio-label, .intake-checkbox-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; cursor: pointer; }
.intake-radio-label input, .intake-checkbox-label input { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--ink); }

/* 希望日時: 日付＋時間帯（開始〜終了）を1行に並べる。狭い画面では折り返す */
.intake-datetime-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 0.6rem; }
.intake-datetime-row input[type="date"] { width: auto; min-width: 150px; margin-bottom: 0; }

/* call-services checkboxes in profile/service forms */
/* CheckboxSelectMultipleは <div id="id_x"><div><label><input>…</label></div>…</div> という構造でdivのみ生成する */
.call-services-checkboxes > div { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.5rem 1rem; }
.call-services-checkboxes > div > div { display: flex; align-items: center; }
.call-services-checkboxes label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; cursor: pointer; }
.call-services-checkboxes input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--ink); flex-shrink: 0; }

/* 曜日チェックボックス（プロフィール編集: 対応可能な曜日）は横並びにする */
/* CheckboxSelectMultipleは <div id="id_x"><div><label><input>…</label></div>…</div> という構造でdivのみ生成する */
.weekday-checkboxes > div { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.5rem 1rem; }
.weekday-checkboxes > div > div { display: flex; align-items: center; }
.weekday-checkboxes label { display: flex; align-items: center; gap: 0.35rem; font-size: 0.95rem; cursor: pointer; }
.weekday-checkboxes input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--ink); flex-shrink: 0; }

.field-block { margin-bottom: 14px; }

/* 時間帯（開始〜終了）の2つのプルダウンを横並びにする */
.time-range-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.time-range-row select { width: auto; min-width: 90px; margin-bottom: 0; }
.time-range-sep { color: var(--taupe); }

/* Avit AI相談タブ */
.nav-avit { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.nav-avit-icon { width: 20px; height: 20px; flex-shrink: 0; vertical-align: middle; }

/* Avit フローティングボタン */
/* z-indexはヘッダー(.site-header: 200)より低く、下部固定バー(各種sticky-bar: 100)より
   高くする。ヘッダーのユーザーメニュー等のポップアップが常にAvitボタンより手前に出るように。 */
.avit-fab {
  position: fixed; bottom: 24px; right: 24px; z-index: 150;
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, #3C88C4, #752F8A); color: #fff;
  font-size: 14px; font-weight: 700;
  padding: 12px 20px 12px 14px; border-radius: 50px;
  box-shadow: 0 4px 20px rgba(51,44,41,0.22);
  text-decoration: none;
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.avit-fab:hover { opacity: 1; transform: translateY(-3px); box-shadow: 0 8px 28px rgba(51,44,41,0.28); color: #fff; }
.avit-fab-icon { width: 32px; height: 32px; flex-shrink: 0; }
/* sticky-bar があるページではAvitボタンを上にずらす */
body:has(.post-form-sticky-bar) .avit-fab,
body:has(.profile-edit-sticky-bar) .avit-fab,
body:has(.survey-form-sticky-bar) .avit-fab { bottom: 80px; }
@media (max-width: 640px) {
  .avit-fab { bottom: 16px; right: 16px; font-size: 13px; padding: 10px 16px 10px 12px; }
  .avit-fab span { display: none; }
  .avit-fab-icon { width: 36px; height: 36px; }
}

/* Avit チャット画面 */
/* 注意: main_classブロックの値は<main>要素自身のclassになるため、子孫セレクタ
   （.avit-chat-page main）ではなく複合セレクタ（main.avit-chat-page）にすること。 */
main.avit-chat-page { max-width: 640px; }
.avit-chat-wrap { display: flex; flex-direction: column; gap: 14px; }

.avit-chat-header { display: flex; align-items: center; gap: 12px; }
.avit-chat-header-icon {
  width: 44px; height: 44px; flex-shrink: 0;
}
.avit-chat-header-title { font-size: 1.1rem; margin: 0; }
.avit-chat-header-sub { margin: 2px 0 0; font-size: 0.82rem; color: var(--taupe); }

.avit-chat-disclaimer {
  font-size: 0.78rem; color: var(--red); line-height: 1.6; margin: 0;
}

.avit-chat-log {
  display: flex; flex-direction: column; gap: 10px;
  min-height: 320px; max-height: 60vh; overflow-y: auto;
  padding: 4px 2px;
}

.avit-bubble { max-width: 82%; border-radius: 16px; padding: 10px 14px; }
.avit-bubble p { margin: 0; font-size: 0.92rem; line-height: 1.65; white-space: pre-wrap; }
.avit-bubble-bot { align-self: flex-start; background: #fff; border: 1.5px solid #ddd; color: var(--ink); border-bottom-left-radius: 4px; }
.avit-bubble-user { align-self: flex-end; background: #EFEAE4; color: var(--ink); border-bottom-right-radius: 4px; }
.avit-bubble-bot a { color: var(--blue); font-weight: 600; text-decoration: underline; word-break: break-all; }
.avit-bubble-user a { color: var(--blue); font-weight: 600; text-decoration: underline; word-break: break-all; }
.avit-bubble-failed { opacity: 0.6; border: 1px solid var(--red); }
.avit-bubble-failed-note { display: block; margin-top: 4px; font-size: 0.72rem; color: var(--red); }

.avit-bubble-typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.avit-bubble-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--taupe);
  display: inline-block; animation: avit-typing-bounce 1.2s infinite ease-in-out;
}
.avit-bubble-typing span:nth-child(2) { animation-delay: 0.15s; }
.avit-bubble-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes avit-typing-bounce {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.avit-chat-error {
  font-size: 0.85rem; color: var(--red);
  background: rgba(214,21,24,0.08); border-radius: 8px;
  padding: 10px 14px;
}
.avit-chat-error-action {
  display: inline-block; margin-top: 6px;
  color: var(--red); font-weight: 600; text-decoration: underline;
}

.avit-chat-confirm {
  font-size: 0.85rem; color: var(--ink);
  background: #F0EBE6; border-radius: 8px;
  padding: 10px 14px;
}
.avit-chat-confirm p { margin: 0 0 8px; }
.avit-chat-confirm-actions { display: flex; gap: 10px; }
.avit-chat-confirm-yes, .avit-chat-confirm-no {
  padding: 6px 16px; font-size: 0.82rem;
}

.avit-chat-remaining {
  font-size: 0.78rem; color: var(--taupe); text-align: right;
  margin: 0; padding: 0 2px;
}

/* エラー表示+入力欄をまとめて画面下に吸着させ、ページを開いた直後から
   スクロールなしで入力欄が見えるようにする。背景はページと同色にして、
   吸着中に後ろのコンテンツが透けないようにする。 */
.avit-chat-bottom {
  position: sticky; bottom: 0;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--cream);
  padding: 10px 0 14px;
}
/* チャットページ内では、同じページへ誘導するだけのFABは出さない
   （吸着した入力欄と位置も重なるため） */
main.avit-chat-page ~ .avit-fab { display: none; }

.avit-chat-form { display: flex; align-items: flex-end; gap: 10px; }
.avit-chat-input {
  flex: 1; resize: none; max-height: 140px;
  border: 1px solid #E8E3DD; border-radius: 14px;
  padding: 11px 14px; font-size: 0.92rem;
  font-family: inherit; line-height: 1.5;
  background: #fff; color: var(--ink);
}
.avit-chat-input:focus { outline: none; border-color: var(--taupe); }
.avit-chat-send-btn:disabled { opacity: 0.5; cursor: default; }

.avit-chat-line-note { font-size: 0.82rem; color: var(--taupe); text-align: center; margin: 4px 0 0; }
.avit-chat-line-note a { color: #06C755; font-weight: 600; text-decoration: underline; }

@media (max-width: 640px) {
  .avit-chat-log { max-height: 55vh; }
  .avit-bubble { max-width: 90%; }
}

.message-compose { position: sticky; bottom: 0; background: var(--cream); padding: 8px 0 12px; z-index: 10; }
@media (prefers-color-scheme: dark) { .message-compose { background: var(--ink); } }

/* ── プロフィール詳細タブ内プレビューセクション ── */
.profile-preview-section {
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* ── オーナーサイドナビ (プロフィールページ・PC) ── */
.owner-sidenav {
  position: fixed;
  left: 0;
  top: 100px;
  bottom: 0;
  width: 56px;
  background: #fff;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 12px 0;
  z-index: 100;
  overflow: hidden;
  transition: width 0.2s ease;
}
.owner-sidenav:hover {
  width: 220px;
  box-shadow: 2px 0 12px rgba(51,44,41,0.10);
}
.owner-sidenav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  text-decoration: none;
  color: var(--ink);
  font-size: 13px;
  white-space: nowrap;
  border-radius: 8px;
  margin: 1px 4px;
  transition: background 0.1s;
}
.owner-sidenav-item:hover { background: var(--cream); color: var(--ink); }
.owner-sidenav-item--active { background: var(--cream); }
.owner-sidenav-item--active i { color: var(--ink); }
.owner-sidenav-item i {
  font-size: 17px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
  color: var(--taupe);
}
.owner-sidenav-item span { opacity: 0; transition: opacity 0.15s 0.05s; }
.owner-sidenav:hover .owner-sidenav-item span { opacity: 1; }
/* 投稿ボタン: 折りたたみ時は inner circle で表示 */
.owner-sidenav-cta { background: transparent !important; padding: 6px 10px !important; margin: 4px !important; width: auto !important; min-width: 0 !important; height: auto !important; align-self: auto !important; justify-content: flex-start !important; }
.owner-sidenav-cta:hover { background: var(--cream) !important; }
.owner-sidenav-cta .cta-circle { width: 36px; height: 36px; border-radius: 50%; background: var(--ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: 1 !important; }
.owner-sidenav-cta .cta-circle i { color: #fff !important; width: auto !important; font-size: 15px; }
.owner-sidenav:hover .owner-sidenav-cta { background: var(--ink) !important; color: #fff !important; border-radius: 999px !important; padding: 10px 20px !important; margin: 6px 4px !important; }
.owner-sidenav:hover .owner-sidenav-cta:hover { background: #555 !important; }
.owner-sidenav:hover .owner-sidenav-cta .cta-circle { background: transparent !important; width: 20px !important; height: auto !important; }
.owner-sidenav:hover .owner-sidenav-cta .cta-circle i { font-size: 14px; }
.owner-sidenav-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 6px 8px;
  flex-shrink: 0;
}
.has-owner-sidenav { padding-left: 56px; }
@media (max-width: 768px) {
  .owner-sidenav { display: none; }
  .has-owner-sidenav { padding-left: 0; }
  .profile-header-actions { flex-wrap: wrap; }
}

/* ── 国家資格バッジ（勲章型） ── */
.avatar-badge-wrap { position: relative; display: inline-block; margin: 0 auto 8px; }
.avatar-badge-wrap .avatar { margin: 0; }
.qual-medal { display: inline-block; }
.avatar-badge-wrap .qual-medal {
  position: absolute;
  top: -7px; right: -9px;
  width: 24px; height: 26px;
  z-index: 3;
  filter: drop-shadow(0 1px 2px rgba(51,44,41,0.25));
}
.qualification-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.qualification-row .qual-medal { width: 26px; height: 28px; flex-shrink: 0; }
.qualification-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.qualification-names { font-size: 13px; color: var(--ink); }
.profile-tags-row { margin: 4px 0; }
.profile-info-table + .profile-tags-row { margin-top: 16px; }
.profile-tags-row .tag-section-label { color: var(--ink); }
/* プロフィール詳細：お話できること〜対応可能時間（グレー表） */
.profile-info-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; border: 1px solid #ddd; }
.profile-info-table th,
.profile-info-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #ddd;
  font-size: 13px;
  color: var(--ink);
  text-align: left;
  vertical-align: top;
}
.profile-info-table th { white-space: nowrap; width: 120px; font-weight: 500; }
/* チェックボックス行スタイル */
.field-block--checkbox { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.field-block--checkbox input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.field-block--checkbox label { font-weight: 500; cursor: pointer; }
.avit-matching-block { background: #EFEAE4; border-radius: 10px; padding: 14px 16px; margin: -4px 0 16px; }
.avit-matching-heading { font-weight: 600; }
.avit-message-tag { display: inline-block; font-size: 11px; font-weight: 600; color: #fff; background: var(--taupe); border-radius: 999px; padding: 1px 8px; margin-left: 4px; vertical-align: middle; }
.avit-matching-field { margin-top: 12px; }
.avit-matching-field label { font-weight: 500; display: block; }
.avit-matching-field textarea { width: 100%; box-sizing: border-box; margin-top: 6px; }

/* ── プロフィールヘッダーのSNSアイコン行 ── */
.profile-header-sns {
  position: absolute;
  left: 136px;
  bottom: -18px;
  display: flex;
  gap: 8px;
  z-index: 2;
}
.profile-header-sns-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(51,44,41,0.12);
  transition: transform 0.1s, box-shadow 0.1s;
}
.profile-header-sns-icon:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(51,44,41,0.18);
  color: var(--ink);
}
.profile-header-sns-icon .sns-note-svg { width: 15px; height: 15px; fill: currentColor; }
@media (max-width: 768px) {
  .profile-header-sns {
    left: 128px; right: 12px; bottom: -15px; gap: 6px;
    max-width: calc(100% - 140px);
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .profile-header-sns::-webkit-scrollbar { display: none; }
  .profile-header-sns-icon { width: 30px; height: 30px; font-size: 14px; flex-shrink: 0; }
  .profile-header-sns-icon .sns-note-svg { width: 12px; height: 12px; }
}

/* ── YouTube最新動画セクション ── */
.yt-thumb-badge i { font-size: 10px; }
.yt-card-date { font-size: 11px; color: var(--taupe); padding: 0 12px 10px; }
.yt-show-checkbox { margin: -4px 0 12px 30px; }
.profile-detail-section--youtube h3 { display: flex; align-items: baseline; justify-content: space-between; }
.profile-edit-order-item--disabled { opacity: 0.45; background: var(--cream); pointer-events: none; }
.profile-edit-order-item--disabled::after { content: "\ff08\8868\793a OFF\ff09"; font-size: 11px; color: var(--taupe); margin-left: 6px; }

/* ユーザー一覧などのページ送り */
.pagination { display: flex; gap: 14px; align-items: center; justify-content: center; margin: 48px 0 8px; }

/* TOPページ・検索結果のカードに出る項目であることを示すバッジ（プロフィール編集画面） */
.top-badge {
  display: inline-block; background: #B45309; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1.7; letter-spacing: .02em;
  padding: 0 9px; border-radius: 10px; margin-left: 8px;
  vertical-align: middle; white-space: nowrap;
}

/* SNSシェアボタン（templates/_share_buttons.html） */
.share-box { margin-top: 20px; margin-bottom: 28px; }
.share-label { font-size: 12px; color: var(--taupe); margin: 0 0 8px; letter-spacing: .04em; }
.share-btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.share-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; border: none; padding: 0;
  font-size: 16px; color: #fff; cursor: pointer; text-decoration: none;
  transition: opacity .15s;
}
.share-btn:hover { opacity: .75; }
.share-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.share-btn-x { background: #000; }
.share-btn-fb { background: #1877F2; }
.share-btn-line { background: #06C755; }
/* Instagramは公式のブランドグラデーション */
.share-btn-ig { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.share-btn-copy { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.share-copied { font-size: 12px; color: var(--teal); line-height: 1.6; flex: 1 1 100%; }
.profile-share-single { margin: 12px 0 4px; }
.profile-share-btn { display: inline-flex; align-items: center; gap: 7px; }
.profile-share-single .share-copied { display: block; margin-top: 6px; }

/* 出品フォームの契約事項確認 */
.pledge-list { margin: 8px 0 12px; padding-left: 22px; }
.pledge-list li { margin: 4px 0; }
.pledge-list a { text-decoration: underline; }
.pledge-warning { color: var(--red); font-size: 13px; line-height: 1.8; }
.pledge-check { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; margin: 12px 0 4px; }
.pledge-check input[type="checkbox"] { width: auto; margin: 0; }

/* ===== ログイン後TOPの「運営からのお知らせ」(2026-08-29 追加) =====
   それまで表示場所が無く、フッターのリンクからしか辿れなかった。 */
.home-notices-list { list-style: none; margin: 0; padding: 0; background: #fff; border-radius: 10px; box-shadow: 0 1px 6px rgba(51,44,41,0.14); overflow: hidden; }
.home-notices-list li + li { border-top: 1px solid #f0ece9; }
.home-notice { display: flex; gap: 14px; align-items: baseline; padding: 11px 16px; text-decoration: none; color: inherit; }
.home-notice:hover { background: #faf8f7; }
.home-notice-date { flex: none; font-size: 11.5px; color: #8b807a; }
.home-notice-title { font-size: 13.5px; font-weight: 700; line-height: 1.6; }
@media (max-width: 640px) { .home-notice { flex-direction: column; gap: 2px; } }

/* ===== 経験者になる：確認テスト前の教材への導線 (2026-08-29 追加) ===== */
.quiz-material { margin: 14px 0 22px; padding: 14px 16px 16px; background: #faf8f7; border-left: 3px solid #d9944a; border-radius: 4px; }
.quiz-material-title { margin: 0 0 10px; font-size: 13px; font-weight: 700; }
.quiz-material-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.7; color: #6b6360; }

/* 動画カード（スマホで文字リンクだと気づかれないため） */
.quiz-video { display: flex; gap: 12px; align-items: center; padding: 10px; background: #fff; border: 1px solid #e7e1dd; border-radius: 8px; text-decoration: none; color: inherit; }
.quiz-video:hover { border-color: #d9944a; }
.quiz-video-thumb { position: relative; flex: 0 0 112px; width: 112px; aspect-ratio: 16 / 9; border-radius: 5px; overflow: hidden; background: #000; }
.quiz-video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.quiz-video-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.quiz-video-play i { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding-left: 3px; border-radius: 50%; background: rgba(0,0,0,.62); color: #fff; font-size: 12px; }
.quiz-video-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.quiz-video-label { font-size: 11.5px; font-weight: 700; color: #c4302b; }
.quiz-video-title { font-size: 13px; font-weight: 700; line-height: 1.5; }

/* 約款PDF */
.quiz-doc { display: flex; gap: 9px; align-items: center; margin-top: 8px; padding: 11px 12px; background: #fff; border: 1px solid #e7e1dd; border-radius: 8px; text-decoration: none; color: inherit; font-size: 13px; font-weight: 700; }
.quiz-doc:hover { border-color: #d9944a; }
.quiz-doc i { color: #c0392b; font-size: 16px; }

/* 狭い画面では縦積みにして、サムネイルを全幅にする。
   横並びだと文字が2〜3文字で折り返して読みにくかったため（2026-08-29） */
@media (max-width: 560px) {
  .quiz-video { flex-direction: column; align-items: stretch; gap: 10px; }
  .quiz-video-thumb { flex: none; width: 100%; }
  .quiz-video-play i { width: 44px; height: 44px; font-size: 16px; }
  .quiz-video-body { gap: 4px; }
  .quiz-video-title { font-size: 13.5px; }
  .quiz-video-title br { display: none; }
}