/* C 案：Y2K ギャル。ショッキングピンク × 黒、太い線とずらした影でステッカーっぽく。いちばん元気 */
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500;800;900&display=swap");
:root {
  --bg: #FFF5FA;
  --page-bg: #FFF5FA;
  --surface: #FFE1EF;
  --card: #FFFFFF;
  --ink: #141014;
  --muted: #5E5060;
  --line: #141014;
  --edge: #141014;
  --accent: #FF2E8A;
  --accent-dark: #D10F68;
  --accent-soft: #FFD6EA;
  --lav: #E6DCFF; --lav-ink: #3A1E9E;
  --mint: #C9F7E3; --mint-ink: #0B5A43;
  --peach: #FFF0A8; --peach-ink: #5A4500;
  --grad: #FF2E8A;
  --logo-fill: linear-gradient(90deg, #FF2E8A, #FF2E8A);
  --bar: #141014;
  --bw: 2px;
  --btn-shadow: 3px 3px 0 #141014;
  --shadow: 4px 4px 0 #141014;
  --shadow-lift: 6px 6px 0 #141014;
  --r-card: 16px;
  --r-photo: 14px;
  --r-btn: 999px;
  --r-field: 12px;
  --hero-bg:
    radial-gradient(#FFB3D6 1.4px, transparent 1.6px) 0 0 / 18px 18px,
    #FFE9F4;
  --display: "M PLUS Rounded 1c", "Zen Maru Gothic", sans-serif;
  --body: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
  --head-w: 900;
  --price: #FF2E8A;
}
.btn.primary, .btn.send { border: 2px solid #141014; }
.btn.primary:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #141014; }
.top { box-shadow: 0 2px 0 #141014; }
.logo { -webkit-text-stroke: 0; text-shadow: none; font-style: italic; }

/* ロゴ画像（素材/ギャルフリログ_haikeinasi.png を縮小した img/logo.png）。ヘッダーの左 */
.top .logo { display: flex; align-items: center; background: none; -webkit-background-clip: border-box; background-clip: border-box; padding: 4px 0; }
.top .logo img { display: block; width: auto; height: 46px; filter: drop-shadow(0 1px 0 rgba(20, 16, 20, .25)); }
@media (min-width: 1024px) { .top .logo img { height: 58px; } }

/* プロフィールの背景画像：帯いっぱいに敷き、文字は白い板の上に */
.profile-top.has-cover { background-size: cover; background-position: center; background-repeat: no-repeat; }
.profile-top.has-cover .wrap { padding-top: 120px; }
.profile-top.has-cover .info { padding: 14px 18px; border: 2px solid #141014; border-radius: var(--r-card); background: rgba(255, 255, 255, .92); box-shadow: var(--shadow); }
.profile-top.has-cover .avatar.big { box-shadow: var(--shadow); }
@media (min-width: 1024px) { .profile-top.has-cover .wrap { padding-top: 160px; align-items: flex-end; } }
/* プロフィールの写真（3枚まで）：正方形で横に3つ */
.prof-gallery { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.prof-gallery li { position: relative; aspect-ratio: 1; }
.prof-gallery a, .prof-gallery .ph { display: block; width: 100%; height: 100%; border: 2px solid #141014; border-radius: var(--r-photo); background: var(--accent-soft) center / cover no-repeat; }
@media (min-width: 1024px) { .prof-gallery:not(.edit) { max-width: 720px; margin-left: auto; margin-right: auto; gap: 16px; } }
.gal-del { position: absolute; top: 6px; right: 6px; min-width: 30px; height: 30px; padding: 0 8px; border: 2px solid #141014; border-radius: 999px; background: #fff; font-weight: 900; cursor: pointer; }
.gal-del.sure { background: var(--accent); color: #fff; }
.gal-add { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; text-align: center; border: 2px dashed var(--accent); border-radius: var(--r-photo); background: #fff; color: var(--accent-dark); font-weight: 900; font-size: 13px; line-height: 1.6; cursor: pointer; }
.prof-media { margin-top: 20px; }
.prof-media .sub-head small { font-weight: 500; font-size: 12px; }
.cover-preview { margin: 8px 0 10px; aspect-ratio: 3 / 1; border: 2px solid #141014; border-radius: var(--r-card); background: var(--hero-bg); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; }
.cover-preview[style] { background-size: cover; }

/* ロゴと同じ系統の飾り：つやのある赤〜ピンク、白いふち、ピンクのにじみ、黄色いきらきらとハート */
:root {
  --gloss: linear-gradient(180deg, #FF7AA8 0%, #FF2E78 48%, #E8124F 52%, #FF3D86 100%);
  --sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0C11 7 13 9 20 10 13 11 11 13 10 20 9 13 7 11 0 10 7 9 9 7 10 0z' fill='%23FFD93B' stroke='%23FFF6C2' stroke-width='.8'/%3E%3C/svg%3E");
  --heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'%3E%3Cpath d='M10 17C4 12 0 9 0 5 0 2 2.5 0 5 0c2 0 3.5 1 5 3 1.5-2 3-3 5-3 2.5 0 5 2 5 5 0 4-4 7-10 12z' fill='%23FF2E78' stroke='%23FFFFFF' stroke-width='1.6'/%3E%3Cellipse cx='5.5' cy='4.5' rx='2' ry='1.3' fill='%23FFFFFF' opacity='.7'/%3E%3C/svg%3E");
}
/* ボタン：つやのあるピンク（上半分に光） */
.btn.primary, .btn.send, .tabbar .sell { background: var(--gloss); text-shadow: 0 1px 0 rgba(150, 0, 40, .45); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), var(--btn-shadow); }
.btn.primary:hover { background: var(--gloss); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), 4px 4px 0 #141014; }
/* 見出しの頭の黄色い丸をハートに */
.sec-head h2::before { width: 18px; height: 16px; border: 0; border-radius: 0; background: var(--heart) center / contain no-repeat; transform: translateY(-1px); }
/* 見出しの文字：ロゴのように白いふちとピンクのにじみ */
.sec-head h2, .page-head h1 { color: #E8124F; text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 0 0 10px rgba(255, 92, 160, .55); }
/* 雲の「完全無料！」：ロゴの赤い文字と同じ、白いふち＋ピンクのにじみ */
.cloud-head h1 em { color: #F0103E; -webkit-text-stroke: 0; text-shadow: 3px 0 0 #fff, -3px 0 0 #fff, 0 3px 0 #fff, 0 -3px 0 #fff, 2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 0 0 6px #FF5FA8, 0 0 14px rgba(255, 95, 168, .7); }
/* 安心して使うためにの番号：つやのあるピンクの丸に白い数字 */
.trust-item::before { background: var(--gloss); color: #fff; text-shadow: 0 1px 0 rgba(150, 0, 40, .45); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55); }
/* 雲のまわりにきらきらとハート（ログイン前のトップ） */
.cloud-head::before, .cloud-head::after { content: ""; position: absolute; z-index: 4; pointer-events: none; background-repeat: no-repeat; }
/* ハートは 素材/ha-to.png から切り出した img/heart-*.png（ふちまで欠けずに出る） */
.cloud-head::before { left: -4%; top: 0; width: 26%; height: 40%;
  background-image: var(--sparkle), var(--sparkle), url("img/heart-pink.png"), url("img/heart-red.png");
  background-size: 34% auto, 18% auto, 40% auto, 24% auto; background-position: 4% 6%, 70% 34%, 20% 92%, 88% 6%; }
.cloud-head::after { right: -9%; top: 2%; width: 30%; height: 50%;
  background-image: url("img/heart-big.png"), url("img/heart-violet.png"), var(--sparkle), var(--sparkle);
  background-size: 40% auto, 26% auto, 28% auto, 15% auto; background-position: 70% 6%, 96% 62%, 18% 14%, 60% 96%; }
/* スマホでは右のハートが画面の外に出ないよう、雲の内側寄りに */
@media (max-width: 1023px) { .cloud-head::after { right: 0; width: 26%; background-position: 62% 4%, 88% 64%, 10% 14%, 50% 96%; } .cloud-head::before { left: 0; } }
.item a:hover .photo { transform: translate(-2px, -2px); }
.chip[aria-pressed=true] { border-color: #141014; box-shadow: 2px 2px 0 #141014; }
.tag.deliv.hand, .tag.deliv.free, .tag.deliv.paid { border: 1.5px solid #141014; }
.trust-item::before { border: 2px solid #141014; }
.tabbar .sell { border: 2px solid #141014; }
footer { border-top: 2px solid #141014; }

/* トップの見出し：雲の吹き出し */
.hero .wrap > div { min-width: 0; }
.cloud-head { position: relative; z-index: 3; width: 100%; max-width: 480px; aspect-ratio: 512 / 397; }
.cloud-head .cloud { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 文字は雲の白いところの重心（画像の横 51.4%、縦 46%）を真ん中にして置く。行末の字間で左に寄らないよう字間は 0 */
.cloud-head h1 { position: absolute; left: 10%; right: 7.2%; top: 14.4%; bottom: 22.9%; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 10.6cqw; line-height: 1.15; letter-spacing: 0; }
/* 雲の文字は雲の幅に合わせて伸び縮みさせ、雲いっぱいに出す */
.cloud-head { container-type: inline-size; }
.cloud-head h1 em { font-style: normal; font-size: 1.25em; }
/* こみこみの札：大きく強調。雲のいちばん下（しっぽのあたり）の後ろに重ねる（雲が手前）。雲の文字にはかからない位置まで */
.komikomi { position: relative; z-index: 2; display: inline-block; margin: -36px 0 0 !important; padding: 10px 22px; border: 3px solid #141014; border-radius: 999px; background: #FFF0A8; box-shadow: 5px 5px 0 #141014; color: var(--ink) !important; font-family: var(--display); font-weight: 900; font-size: clamp(16px, 4.6vw, 24px) !important; line-height: 1.3 !important; white-space: nowrap; transform: rotate(-2deg); }
.komikomi strong { color: var(--accent); font-size: 1.35em; -webkit-text-stroke: 1px #141014; }
@media (min-width: 1024px) {
  .cloud-head { max-width: 580px; }
  .komikomi { font-size: 28px !important; padding: 12px 28px; margin-top: -50px !important; }
}

/* ログイン前のトップ：ドット柄をページ全体の下地にし、画面の幅に合わせて粒と間隔を伸び縮みさせる */
body.welcome {
  background:
    radial-gradient(circle, #FFB3D6 0 9%, transparent 11%) 0 0 / clamp(16px, 1.6vw, 30px) clamp(16px, 1.6vw, 30px),
    #FFE9F4;
}
body.welcome .hero { background: transparent; }
/* スマホ：箱はなく、中身だけが 雲と説明 → 出品点数 → ボタン → 安心して使うために の順に並ぶ */
.hero-panel { display: contents; }
.hero-panel > div { min-width: 0; }
.hero-main { order: 1; margin-top: -14px; }
.hero .wrap > .live-count { order: 2; text-align: center; margin: 0 !important; max-width: none !important; }
.hero .wrap > .ctas { order: 3; display: flex; justify-content: center; margin: 0; }
.hero-panel > .trust { order: 4; }
/* こみこみの札と説明文のあいだを空ける */
.hero-main .komikomi + p { margin-top: 24px !important; }
/* 安心して使うために：文字と番号を大きく */
.hero-panel .trust h2 { font-size: 19px; }
.hero-panel .trust-item strong { font-size: 16px; }
.hero-panel .trust-item span { font-size: 14px; }
.hero-panel .trust-item::before { width: 34px; height: 34px; font-size: 16px; }
/* ①②③の間隔をそろえる：説明が1行でも2行でも、項目の高さを同じにする */
.hero-panel .trust-item { min-height: 72px; }
@media (min-width: 1024px) {
  .hero .wrap { row-gap: 28px; }
  /* パソコン：「安心して使うために」の白い箱を左へのばして、こみこみ・説明の下地にする。
     中身の位置は動かさない。雲の上のほうは箱からはみ出す */
  /* 雲の段と「安心して使うために」を寄せて、ふたつまとめてページの真ん中に。白い箱は中身の左右に少しだけ余白 */
  .hero-panel { position: relative; isolation: isolate; display: grid; grid-row: 1; grid-column: 1 / -1; justify-self: center; grid-template-columns: minmax(0, 580px) minmax(0, 380px); gap: 40px; align-items: center; }
  /* 白い箱の右側だけは、どの幅でも画面の右端の外までのばす（右の線と角は見えない） */
  body.welcome .hero { overflow-x: clip; }
  .hero-panel::before { content: ""; position: absolute; z-index: -1; left: -28px; right: calc((100% - 100vw) / 2 - 40px); top: 24%; bottom: -28px;
    background: #FFFFFF; border: 2px solid #141014; border-radius: var(--r-card); box-shadow: var(--shadow); }
  .hero-panel > .trust { background: transparent; border: 0; box-shadow: none; padding-top: 130px; gap: 20px; }
  .hero-panel .trust h2 { font-size: 24px; }
  .hero-panel .trust-item { gap: 16px; min-height: 86px; }
  .hero-panel .trust-item strong { font-size: 19px; }
  .hero-panel .trust-item span { font-size: 15.5px; }
  .hero-panel .trust-item::before { width: 42px; height: 42px; font-size: 20px; }
  .hero-main .komikomi + p { margin-top: 32px !important; }
  /* 雲・こみこみ・説明を少しだけ上へ（白い箱と右の列は動かさない） */
  .hero-main { transform: translateY(-32px); }
  /* 右の列は下でそろえる：「ブロックしたりできます。」を「チームのメンバー募集もできます。」と同じ高さに */
  .hero-panel > .trust { align-self: end; transform: translateY(-6px); }
  .hero .wrap > .live-count { grid-row: 2; grid-column: 1 / -1; margin-top: 48px !important; }
  .hero .wrap > .ctas { grid-row: 3; grid-column: 1 / -1; gap: 16px; }
  .hero .wrap > .ctas .btn { min-width: 220px; padding-top: 16px; padding-bottom: 16px; font-size: 18px; }
}

/* ログイン前トップの人気の商品：どの幅でも横3つ×2段 */
.popular { padding: 8px 0 32px; }
.items.pop3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (min-width: 1024px) { .popular { max-width: 780px; margin: 0 auto; } }

/* 現在の出品点数 */
.live-count { margin: 14px 0 0 !important; font-family: var(--display); font-weight: 900; font-size: clamp(18px, 5vw, 24px) !important; color: var(--ink) !important; }
.live-count strong { display: inline-block; margin: 0 2px; padding: 0 10px; border: 2px solid #141014; border-radius: 10px; background: #FFFFFF; box-shadow: 3px 3px 0 #141014; color: var(--accent); font-size: 1.4em; }

/* マイページの折りたたみ（振込先・お届け先） */
.fold { margin-top: 16px; border: 2px solid #141014; border-radius: var(--r-card); background: var(--card); box-shadow: 3px 3px 0 #141014; }
.fold summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; list-style: none; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary::after { content: "＋"; margin-left: auto; font-weight: 900; color: var(--accent); }
.fold[open] summary::after { content: "－"; }
.fold summary .sub-head { margin: 0; }
.fold-state { font-size: 12px; padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-dark); font-weight: 700; }
.fold > :not(summary) { margin-left: 16px; margin-right: 16px; }
.fold > form { padding-bottom: 16px; }

/* 管理：会員一覧は 1人1行の表。狭い画面では表だけ横にずらして見る */
.mem-table-wrap { margin-top: 16px; overflow-x: auto; border: 2px solid #141014; border-radius: var(--r-card); background: #fff; box-shadow: var(--shadow); }
.mem-table { width: 100%; min-width: 900px; border-collapse: collapse; font-size: 13px; }
.mem-table th, .mem-table td { padding: 9px 10px; text-align: left; vertical-align: middle; border-bottom: 1px solid #F6CFE0; white-space: nowrap; }
.mem-table thead th { position: sticky; top: 0; background: var(--accent-soft); font-weight: 700; font-size: 12px; color: #141014; }
.mem-table tbody tr:last-child td { border-bottom: 0; }
.mem-table tbody tr:hover { background: #FFF6FA; }
.mem-table .num { text-align: right; }
.mem-table td.hot { color: var(--accent); font-weight: 700; }
.mem-table .mem-name a { color: var(--ink); margin-right: 6px; }
.mem-table .mem-name .pill, .mem-table td .pill { margin-left: 4px; }
.mem-table .mem-act { display: flex; gap: 6px; }
.mem-table .mem-act .btn { white-space: nowrap; min-height: 32px; padding: 4px 12px; font-size: 12px; }
/* 横にずらしても、名前の列は左に残す */
.mem-table .mem-name { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 1px 0 0 #F6CFE0; }
.mem-table thead th:first-child { position: sticky; left: 0; z-index: 2; }
.mem-table tbody tr:hover .mem-name { background: #FFF6FA; }
/* Q＆A：スマホはヘッダー右に小さなボタン、パソコンはメニューの中に出す */
.top-faq { margin-left: auto; display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 2px solid #141014; border-radius: var(--r-btn); background: #fff; color: #141014; font-size: 13px; font-weight: 700; text-decoration: none; box-shadow: 2px 2px 0 #141014; }
@media (min-width: 1024px) { .top-faq { display: none; } }
body.admin-mode .top-faq { display: none; }
.faq-list { margin: 20px 0 0; display: grid; gap: 14px; }
.faq-item { padding: 16px 18px; border: 2px solid #141014; border-radius: var(--r-card); background: #fff; box-shadow: var(--shadow); }
.faq-item dt, .faq-item dd { display: flex; gap: 12px; align-items: flex-start; margin: 0; }
.faq-item dt { font-weight: 700; font-size: 15.5px; }
.faq-item dd { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #F6CFE0; }
.faq-mark { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--gloss); color: #fff; font-weight: 800; font-size: 14px; line-height: 1; border: 2px solid #141014; }
.faq-mark.a { background: #FFF1A8; color: #141014; }
.faq-item dt > span:last-child, .faq-item dd > span:last-child { padding-top: 2px; }
/* トップ説明文の強調（性別に関係なく使える） */
.hero-note { display: block; margin-top: 6px; color: #141014; font-weight: 800; }