/**
 * Studio-Navi 会員(B-1)用スタイル
 *  - 会員登録 / ログイン / マイページの各フォームと、お気に入り♡ボタンの最小限の見た目。
 *  - 既存 sn.css のトーン(白基調・角丸・細い線)に寄せた最小実装(磨きは後日の見た目パス)。
 *  - 会員ページ(register/login/mypage)と、♡を出すスタジオ詳細・一覧・トップで読み込む。
 */

/* ===== デザイントークン(会員ページ用) =====
 *  sn.css はスタジオ詳細/一覧/トップだけで読み込まれ、会員ページ(register/login/mypage)では
 *  読み込まれない。登録LP等でアクセント色を使うため、sn.css と同値のトークンをここでも定義する
 *  (値は sn.css の :root と必ず一致させること)。 */
:root {
	--sn-accent: #2563eb;       /* 差し色(青) */
	--sn-accent-dark: #1d4ed8;  /* 青ボタンのホバー */
	--sn-accent-soft: #eff4ff;  /* 青の淡い背景 */
}

/* ===== 会員フォームの箱 ===== */
.sn-auth {
	max-width: 460px;
	margin: 40px auto 64px;
	padding: 0 16px;
}
.sn-auth__title {
	font-size: 1.4rem;
	font-weight: 700;
	text-align: center;
	margin: 0 0 8px;
}
.sn-auth__lead {
	text-align: center;
	color: #5f6368;
	font-size: 0.9rem;
	margin: 0 0 24px;
}
.sn-auth__card {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 14px;
	padding: 24px 22px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.sn-auth__field {
	margin-bottom: 16px;
}
.sn-auth__label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 6px;
	color: #333;
}
.sn-auth__input {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid #d5d5d5;
	border-radius: 8px;
	font-size: 1rem;
	background: #fff;
	box-sizing: border-box;
}
.sn-auth__input:focus {
	outline: none;
	border-color: #111;
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}
.sn-auth__hint {
	font-size: 0.78rem;
	color: #888;
	margin-top: 5px;
}
/* 利用規約の同意行(チェック+文言) */
.sn-auth__agree {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 0.85rem;
	color: #444;
	line-height: 1.6;
}
.sn-auth__agree input {
	margin-top: 3px;
	flex: 0 0 auto;
}
.sn-auth__agree a {
	text-decoration: underline;
}
/* honeypot(人には見せない隠し欄) */
.sn-auth__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
/* 送信ボタン */
.sn-auth__btn {
	display: block;
	width: 100%;
	padding: 13px 16px;
	border: none;
	border-radius: 999px;
	background: #111;
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	margin-top: 6px;
}
.sn-auth__btn:hover {
	background: #333;
}
.sn-auth__links {
	margin-top: 18px;
	text-align: center;
	font-size: 0.85rem;
}
.sn-auth__links a {
	text-decoration: underline;
}
.sn-auth__links span {
	color: #bbb;
	margin: 0 8px;
}
/* 画面メッセージ(成功=緑 / エラー=赤) */
.sn-auth__msg {
	border-radius: 8px;
	padding: 11px 14px;
	font-size: 0.88rem;
	margin: 0 0 20px;
	line-height: 1.6;
}
.sn-auth__msg--ok {
	background: #e6f4ea;
	color: #137333;
	border: 1px solid #b7e1c3;
}
.sn-auth__msg--err {
	background: #fce8e6;
	color: #b32d2e;
	border: 1px solid #f3c1bd;
}
/* 折りたたみ(認証メール再送) */
.sn-auth__resend {
	margin-top: 18px;
	border-top: 1px solid #eee;
	padding-top: 16px;
}
.sn-auth__resend summary {
	cursor: pointer;
	font-size: 0.85rem;
	color: #5f6368;
}

/* ===== マイページ ===== */
.sn-mypage {
	max-width: 1040px;
	margin: 32px auto 72px;
	padding: 0 16px;
}
.sn-mypage__title {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 6px;
}
.sn-mypage__hello {
	color: #5f6368;
	font-size: 0.9rem;
	margin: 0 0 28px;
}
.sn-mypage__sec {
	margin-bottom: 40px;
}
.sn-mypage__sechead {
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0 0 14px;
	padding-bottom: 8px;
	border-bottom: 2px solid #111;
	display: inline-block;
}
.sn-mypage__account {
	display: flex;
	gap: 10px;
	align-items: flex-end;
	flex-wrap: wrap;
	max-width: 520px;
}
.sn-mypage__account .sn-auth__field {
	flex: 1 1 240px;
	margin-bottom: 0;
}
.sn-mypage__savebtn {
	padding: 11px 20px;
	border: 1px solid #111;
	border-radius: 999px;
	background: #fff;
	color: #111;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
}
.sn-mypage__savebtn:hover {
	background: #f2f2f2;
}
.sn-mypage__empty {
	color: #777;
	font-size: 0.92rem;
	background: #fafafa;
	border: 1px dashed #ddd;
	border-radius: 10px;
	padding: 28px 20px;
	text-align: center;
}
.sn-mypage__empty a {
	text-decoration: underline;
	font-weight: 600;
}
/* お気に入りグリッド(既存 .sn-card を流用) */
.sn-mypage__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 20px;
}
.sn-mypage__logout {
	margin-top: 8px;
}
.sn-mypage__logoutbtn {
	display: inline-block;
	padding: 10px 22px;
	border: 1px solid #d5d5d5;
	border-radius: 999px;
	color: #5f6368;
	font-size: 0.9rem;
	text-decoration: none;
}
.sn-mypage__logoutbtn:hover {
	background: #f7f7f7;
}

/* ===== お気に入り♡ボタン ===== */
/* カード用:サムネ右上に重ねる小さな丸ボタン */
.sn-fav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	cursor: pointer;
	border: none;
	background: transparent;
	color: #b32d2e;
	line-height: 1;
	padding: 0;
}
.sn-fav svg {
	fill: none;
	stroke: currentColor;
	transition: fill 0.15s ease, transform 0.1s ease;
}
.sn-fav.is-on svg {
	fill: currentColor; /* ♥ = 塗りつぶし */
}
.sn-fav:active svg {
	transform: scale(0.85);
}
.sn-fav[aria-disabled="true"] {
	opacity: 0.5;
	pointer-events: none;
}

/* カード上の丸ボタン(サムネ右上に絶対配置) */
.sn-card {
	position: relative; /* ♡の絶対配置の基準(既存カードに影響しないよう最小) */
}
.sn-fav--card {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
	color: #444;
}
.sn-fav--card.is-on {
	color: #b32d2e;
}
.sn-fav--card:hover {
	background: #fff;
}

/* 詳細ページ(CTA内)のラベル付きボタン */
.sn-fav--cta {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid #d5d5d5;
	border-radius: 999px;
	background: #fff;
	color: #333;
	font-size: 0.95rem;
	font-weight: 700;
	margin-bottom: 10px;
}
.sn-fav--cta.is-on {
	color: #b32d2e;
	border-color: #f3c1bd;
	background: #fff7f6;
}
.sn-fav--cta:hover {
	background: #f7f7f7;
}

/* =============================================================
 *  レビュー投稿フォーム(B-3 / §6-1(3))= 崩れない最小限(作り込みは後追い)
 * ============================================================= */
.sn-reviewform__note {
	background: #fff7ea; border: 1px solid #f0e0c0; border-radius: 8px;
	padding: 10px 14px; color: #7a5a20; font-size: 13px; margin: 0 0 16px;
}
.sn-req {
	font-size: 11px; color: #b32d2e; background: #fdecec; border-radius: 4px;
	padding: 1px 6px; margin-left: 6px; vertical-align: middle; font-weight: 700;
}
.sn-reviewform__inline { display: flex; gap: 10px; }
.sn-reviewform__inline select { flex: 1; }
/* 詳細評価8軸=1列(オーナー実機FB 2026-07-13)。1項目1行(ラベル左・選択右)。 */
.sn-reviewform__axes {
	display: flex; flex-direction: column; gap: 8px; margin-top: 8px;
}
.sn-reviewform__axis {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	padding: 6px 0; border-bottom: 1px solid #f0f0f0;
}
.sn-reviewform__axislabel { font-size: 14px; color: #444; }
.sn-reviewform__axis select { width: 88px; flex: none; }

/* 総合評価の星ウィジェット(スペースマーケット風・左半分0.5/右半分満点)。 */
.sn-stars-input__row { display: flex; align-items: center; gap: 4px; }
.sn-star {
	position: relative; width: 40px; height: 40px; display: inline-block;
	font-size: 38px; line-height: 40px; flex: none;
}
.sn-star__base { position: absolute; inset: 0; color: #dcdcdc; }
.sn-star__fill {
	position: absolute; inset: 0; width: 0; overflow: hidden; white-space: nowrap; color: #f5a623;
}
.sn-star__hit {
	position: absolute; top: 0; height: 100%; width: 50%; z-index: 2;
	background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer;
}
.sn-star__hit--l { left: 0; }
.sn-star__hit--r { right: 0; }
.sn-star__hit--full { left: 0; width: 100%; }
.sn-stars-input__label {
	margin-left: 12px; color: #b26a00; font-weight: 700; font-size: 15px; white-space: nowrap;
}
/* 8軸用の小さめ星(1行に収める)。 */
.sn-stars-input--sm .sn-star { width: 26px; height: 26px; font-size: 24px; line-height: 26px; }
/* ラベルを固定幅にして、値(「★5」)と未選択(「—」)で星の位置がずれないようにする。 */
.sn-stars-input--sm .sn-stars-input__label {
	margin-left: 8px; font-size: 13px; display: inline-block; width: 2.4em; text-align: left; flex: none;
}
.sn-reviewform__axis .sn-stars-input__row { flex-wrap: nowrap; }


/* ===== 会員登録LP(sn-reglp)= B-3拡張パス・2026-07-13 Fable設計(リッチ版) =====
 * オーナーLP(sn-owners.css)と同じ設計言語:濃紺グラデの全幅ヒーロー・角丸16px・
 * ヘアライン+ソフト2層影・.2sの上品なホバー。ただしこのページは sn-members.css だけで
 * 自己完結させる(sn.css / sn-owners.css は読み込まれない)。 */

/* LP付きのときだけ外枠を広げる(フォームカードは従来幅のまま中央寄せ) */
.sn-auth--reglp {
	max-width: 960px;
	margin-top: 0; /* ヒーローをヘッダー直下から始める */
}
.sn-auth--reglp .sn-auth__card,
.sn-auth--reglp .sn-auth__msg {
	max-width: 460px;
	margin-left: auto;
	margin-right: auto;
}

/* SWELL の #content 上余白を登録LPだけゼロに(ヒーロー上の白帯を消す)。
 * :has 未対応の古いブラウザでは余白が残るだけで壊れない(グレースフルデグラデーション)。 */
html:has(.sn-auth--reglp) #content.l-content {
	padding-top: 0;
}

/* ---------- ① ヒーロー(全幅・濃紺グラデ=オーナーLPと同系の面) ---------- */
.sn-reglp__hero {
	/* SWELL の中央枠を突き抜けて全幅に(/owners・トップの帯と同じ確立済みの手法) */
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background:
		radial-gradient(ellipse 80% 60% at 85% 10%, rgba(56, 182, 224, .22), transparent 60%),
		linear-gradient(160deg, #101f3d 0%, #1c3564 55%, #2a4f92 100%);
	color: #fff;
	text-align: center;
	padding: clamp(52px, 9vw, 92px) 24px clamp(44px, 7vw, 76px);
}
.sn-reglp__hero-inner {
	max-width: 640px;
	margin: 0 auto;
}
.sn-reglp__badge {
	display: inline-block;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	color: #cfeaff;
	border: 1px solid rgba(130, 200, 240, .45);
	background: rgba(56, 182, 224, .16);
	border-radius: 999px;
	padding: 5px 16px;
	margin: 0 0 18px;
}
.sn-reglp__title {
	font-size: clamp(1.55rem, 4.6vw, 2.4rem);
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: .01em;
	color: #fff;
	margin: 0 0 14px;
}
.sn-reglp__lead {
	font-size: clamp(.92rem, 2.4vw, 1.02rem);
	line-height: 1.9;
	color: #dfe7f7;
	margin: 0 0 26px;
}
/* PCだけリード文を改行(スマホでは自然折返し) */
.sn-reglp__br-pc { display: none; }

/* 主要CTA(下のフォームへスクロール)。min-height 48px=タップ目標確保 */
.sn-reglp__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 14px 46px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--sn-accent) 0%, #38b6e0 100%);
	color: #fff;
	font-size: 1.05rem;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 10px 24px rgba(28, 78, 190, .34);
	transition: transform .15s ease, box-shadow .15s ease;
}
.sn-reglp__cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(28, 78, 190, .42);
	color: #fff;
}
/* 信頼チップ3つ(登録無料/約1分で完了/クレジットカード不要) */
.sn-reglp__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
}
.sn-reglp__chips li {
	font-size: .82rem;
	font-weight: 600;
	color: #eaf1ff;
	border: 1px solid rgba(255, 255, 255, .35);
	background: rgba(255, 255, 255, .08);
	border-radius: 999px;
	padding: 5px 14px;
}
/* 既会員の逃げ道(ヒーロー内・控えめな下線リンク) */
.sn-reglp__login-wrap { margin: 18px 0 0; }
.sn-reglp__login {
	color: #cfe0fb;
	font-size: .88rem;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
}
.sn-reglp__login:hover { color: #fff; }

/* ---------- ② メリット4点(2×2カード) ---------- */
.sn-reglp__sec {
	padding: clamp(36px, 6vw, 60px) 0 0;
}
.sn-reglp__eyebrow {
	font-size: .74rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--sn-accent);
	font-weight: 700;
	text-align: center;
	margin: 0 0 8px;
}
.sn-reglp__heading {
	font-size: clamp(1.25rem, 3.4vw, 1.5rem);
	font-weight: 800;
	text-align: center;
	color: #1a2233;
	margin: 0 0 26px;
}
.sn-reglp__benefits {
	list-style: none;
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin: 0;
	padding: 0;
}
/* カード:角丸16px+ヘアライン+ソフト2層影+ホバーで浮く(オーナーLPの共通トークン) */
.sn-reglp__benefit {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	background: #fff;
	border: 1px solid rgba(15, 23, 42, .06);
	border-radius: 16px;
	padding: 22px 20px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
	transition: transform .2s ease, box-shadow .2s ease;
}
.sn-reglp__benefit:hover {
	transform: translateY(-3px);
	box-shadow: 0 2px 4px rgba(15, 23, 42, .05), 0 14px 32px rgba(15, 23, 42, .10);
}
.sn-reglp__icon {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--sn-accent-soft) 0%, #dce9ff 100%);
	color: var(--sn-accent);
	border: 1px solid rgba(37, 99, 235, .12);
	border-radius: 14px;
	font-size: 1.3rem;
}
.sn-reglp__benefit-title {
	font-size: 1rem;
	font-weight: 700;
	color: #1a2233;
	margin: 0 0 5px;
}
.sn-reglp__benefit-text {
	font-size: .86rem;
	color: #55617a;
	line-height: 1.75;
	margin: 0;
}

/* ---------- ③ かんたん3ステップ(全幅の淡い帯) ---------- */
.sn-reglp__steps-band {
	margin: clamp(36px, 6vw, 60px) calc(50% - 50vw) 0;
	background: #f6f8fc;
	padding: clamp(32px, 5vw, 52px) 24px;
}
.sn-reglp__steps {
	list-style: none;
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
	max-width: 860px;
	margin: 0 auto;
	padding: 0;
}
.sn-reglp__step {
	position: relative;
	text-align: center;
}
.sn-reglp__step-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin: 0 auto 12px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--sn-accent) 0%, #38b6e0 100%);
	color: #fff;
	font-weight: 700;
	font-size: 1.05rem;
	box-shadow: 0 6px 14px rgba(28, 78, 190, .25);
}
.sn-reglp__step-title {
	font-size: .98rem;
	font-weight: 700;
	color: #1a2233;
	margin: 0 0 4px;
}
.sn-reglp__step-text {
	font-size: .84rem;
	color: #55617a;
	line-height: 1.7;
	margin: 0;
}

/* ---------- ④ 信頼の一文(淡い青の帯に格上げ・事実の記述のみ) ---------- */
.sn-reglp__trust {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	max-width: 620px;
	margin: clamp(30px, 5vw, 44px) auto clamp(36px, 6vw, 52px);
	padding: 13px 20px;
	background: var(--sn-accent-soft);
	border: 1px solid rgba(37, 99, 235, .14);
	border-radius: 12px;
	font-size: .85rem;
	color: #3b4963;
	text-align: center;
}
.sn-reglp__trust-icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--sn-accent);
}
.sn-reglp__trust-icon svg { display: block; }

/* ---------- フォーム見出しまわり ---------- */
/* アンカー着地位置(固定ヘッダー分の余白) */
.sn-reglp__form-title {
	scroll-margin-top: 90px;
}
.sn-reglp__form-hint {
	text-align: center;
	color: #5f6368;
	font-size: .86rem;
	margin: 0 0 20px;
}
html:has(.sn-reglp) {
	scroll-behavior: smooth;
}

/* ---------- レスポンシブ ---------- */
@media (min-width: 600px) {
	.sn-reglp__br-pc { display: inline; }
}
@media (min-width: 640px) {
	.sn-reglp__benefits { grid-template-columns: 1fr 1fr; gap: 18px; }
	.sn-reglp__steps { grid-template-columns: repeat(3, 1fr); gap: 20px; }
	/* ステップ間の点線コネクタ(円と円を結ぶ・PCのみ) */
	.sn-reglp__step + .sn-reglp__step::before {
		content: "";
		position: absolute;
		top: 20px;
		left: calc(-50% + 6px);
		right: calc(50% + 27px);
		height: 2px;
		border-radius: 2px;
		background: #d8e2f5;
	}
}

/* 動きを控える設定のユーザーには浮き上がりを無効化(オーナーLPと同じ配慮) */
@media (prefers-reduced-motion: reduce) {
	.sn-reglp__cta,
	.sn-reglp__benefit {
		transition: none;
	}
	.sn-reglp__cta:hover,
	.sn-reglp__benefit:hover {
		transform: none;
	}
	html:has(.sn-reglp) {
		scroll-behavior: auto;
	}
}