/*
 * systre-auth-page / ログイン前 /my-account/ 専用スタイル
 * すべて .systre-auth-page または body.systre-auth-screen 配下にスコープする。
 *
 * 構造は 3 層。
 *   1. .systre-auth-background   ベース背景（画像 + グラデーション）
 *   2. .systre-auth-decorations  装飾レイヤー（浮遊カード・アイコン・光）
 *   3. .systre-auth-container    実コンテンツ
 */

/* ---------------------------------------------------------
 * ページ側の既存装飾をこの画面だけ抑える
 * ------------------------------------------------------- */
body.systre-auth-screen {
	overflow-x: hidden;
}

/* Astra の「My Account」見出し */
body.systre-auth-screen .entry-header,
body.systre-auth-screen .ast-single-post .entry-header {
	display: none;
}

/* Elementor のスペーサー（ログイン前だけ不要） */
body.systre-auth-screen .entry-content .elementor-widget-spacer {
	display: none;
}

body.systre-auth-screen .entry-content {
	margin-top: 0;
}

/* ショートコードラッパ / Elementor カラムの縦余白（ヘッダー直下に詰める） */
body.systre-auth-screen .entry-content .woocommerce {
	padding-top: 0;
	padding-bottom: 0;
}

body.systre-auth-screen .entry-content .elementor-widget-wrap {
	padding-top: 0;
	padding-bottom: 0;
}

body.systre-auth-screen .woocommerce-notices-wrapper:empty {
	display: none;
}

/* ---------------------------------------------------------
 * トークンと全幅ラッパ
 * ------------------------------------------------------- */
.systre-auth-page {
	--sa-orange: #ff7a3d;
	--sa-orange-strong: #ff5100;
	--sa-orange-soft: #fff1e7;
	--sa-ink: #1e1810;
	--sa-body: #575250;
	--sa-muted: #857f7c;
	--sa-line: #ece5e1;
	--sa-field-line: #ddd6d2;
	--sa-white: #fff;
	--sa-max: 1240px;

	box-sizing: border-box;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	color: var(--sa-body);
	font-feature-settings: "palt" 1;
}

.systre-auth-page *,
.systre-auth-page *::before,
.systre-auth-page *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------
 * 1. ヒーロー / ベース背景
 * ------------------------------------------------------- */
.systre-auth-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(36px, 4.4vw, 68px) 24px clamp(88px, 9vw, 150px);
	isolation: isolate;
}

.systre-auth-background {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-color: #fffaf6;
	background-image:
		linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 252, 249, 0.34) 42%, rgba(255, 246, 238, 0.5) 100%),
		url("auth-background.webp");
	background-size: auto, cover;
	background-position: center, center bottom;
	background-repeat: no-repeat, no-repeat;
}

/* ---------------------------------------------------------
 * 2. 装飾レイヤー
 * コンテンツ幅に揃えて中央寄せし、内部は % 配置。
 * 左半分（0〜48%）に収めることで認証カードの裏に被らない。
 * ------------------------------------------------------- */
/* 上端をテキストの下端より下に置くことで、実体のある装飾が本文に重ならない */
.systre-auth-decorations {
	position: absolute;
	top: clamp(286px, 31vw, 448px);
	bottom: 0;
	left: 50%;
	z-index: 1;
	width: min(100%, var(--sa-max));
	transform: translateX(-50%);
	pointer-events: none;
}

.sa-deco {
	position: absolute;
	pointer-events: none;
}

/* 光 */
.sa-glow {
	border-radius: 50%;
	filter: blur(2px);
}

.sa-glow--warm {
	left: 2%;
	bottom: 2%;
	width: clamp(220px, 34%, 460px);
	aspect-ratio: 1;
	background: radial-gradient(circle, rgba(255, 168, 105, 0.30) 0%, rgba(255, 168, 105, 0) 68%);
}

.sa-glow--soft {
	left: 24%;
	top: 0%;
	width: clamp(140px, 22%, 300px);
	aspect-ratio: 1;
	background: radial-gradient(circle, rgba(255, 205, 168, 0.26) 0%, rgba(255, 205, 168, 0) 70%);
}

/* 点線パターン */
.sa-dots {
	background-image: radial-gradient(rgba(255, 132, 68, 0.5) 1.5px, transparent 1.6px);
	background-size: 12px 12px;
}

.sa-dots--left {
	left: 1%;
	bottom: 50%;
	width: clamp(96px, 13%, 168px);
	height: clamp(84px, 11%, 144px);
	-webkit-mask-image: linear-gradient(120deg, #000 32%, transparent 96%);
	mask-image: linear-gradient(120deg, #000 32%, transparent 96%);
}

/* 円弧 */
.sa-arc {
	left: -10%;
	bottom: -2%;
	width: clamp(320px, 46%, 590px);
	aspect-ratio: 1;
}

.sa-arc svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* 星形の光 */
.sa-spark {
	width: 18px;
	height: 18px;
	background:
		linear-gradient(to bottom, transparent 44%, rgba(255, 255, 255, 0.98) 50%, transparent 56%),
		linear-gradient(to right, transparent 44%, rgba(255, 255, 255, 0.98) 50%, transparent 56%);
	filter: drop-shadow(0 0 3px rgba(255, 122, 61, 0.9)) drop-shadow(0 0 8px rgba(255, 154, 99, 0.7));
	border-radius: 50%;
}

.sa-spark--1 {
	left: 33%;
	bottom: 90%;
}

.sa-spark--2 {
	left: 11%;
	bottom: 50%;
	width: 13px;
	height: 13px;
}

.sa-spark--3 {
	left: 51%;
	bottom: 24%;
	width: 15px;
	height: 15px;
}

/* 光の粒 */
.sa-mote {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 138, 74, 0.62);
}

.sa-mote--1 {
	left: 20%;
	bottom: 92%;
}

.sa-mote--2 {
	left: 52%;
	bottom: 52%;
	width: 5px;
	height: 5px;
}

.sa-mote--3 {
	left: 6%;
	bottom: 78%;
	width: 6px;
	height: 6px;
}

/* 浮遊カード共通 */
.sa-card {
	border: 1px solid rgba(255, 170, 118, 0.46);
	border-radius: 18px;
	background: linear-gradient(150deg, rgba(255, 255, 255, 0.985) 0%, rgba(255, 251, 247, 0.95) 100%);
	box-shadow: 0 22px 46px rgba(168, 92, 42, 0.17), 0 3px 10px rgba(168, 92, 42, 0.09);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

/* 奥に重ねる薄い書類カード（束に奥行きを出す） */
.sa-card--back {
	left: 14%;
	bottom: 38%;
	width: clamp(76px, 8.6%, 112px);
	padding: clamp(11px, 1.1vw, 15px) clamp(10px, 1vw, 14px);
	transform: rotate(-13deg);
	opacity: 0.9;
}

.sa-card--back .sa-line {
	margin-bottom: clamp(7px, 0.8vw, 10px);
}

/* アカウントカード（縦長） */
.sa-card--account {
	left: 20%;
	bottom: 17%;
	width: clamp(150px, 17.6%, 226px);
	padding: clamp(14px, 1.5vw, 21px) clamp(13px, 1.3vw, 18px);
	transform: rotate(-7deg);
}

.sa-card-head {
	display: flex;
	align-items: center;
	gap: clamp(8px, 0.8vw, 11px);
	margin-bottom: clamp(15px, 1.6vw, 22px);
}

.sa-avatar {
	flex: 0 0 auto;
	width: clamp(28px, 2.9vw, 38px);
	height: clamp(28px, 2.9vw, 38px);
	border-radius: 50%;
	background: linear-gradient(140deg, #ffd8bf 0%, #ffae7d 100%);
}

.sa-lines {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}

.sa-line {
	display: block;
	height: 6px;
	margin-bottom: 6px;
	border-radius: 4px;
	background: rgba(214, 200, 192, 0.72);
}

/* 名前を表す横線だけ太く濃くする */
.sa-card-head .sa-line:first-child {
	height: 9px;
	margin-bottom: 7px;
	background: rgba(176, 160, 151, 0.82);
}

/* 情報を表す短い横線 */
.sa-card-head .sa-line:last-child {
	height: 5px;
	background: rgba(224, 210, 202, 0.66);
}

/* 項目行の線は細く */
.sa-card-rows .sa-line {
	height: 5px;
}

.sa-line:last-child {
	margin-bottom: 0;
}

.sa-line--w85 {
	width: 85%;
}

.sa-line--w80 {
	width: 80%;
}

.sa-line--w75 {
	width: 75%;
}

.sa-line--w70 {
	width: 70%;
}

.sa-line--w60 {
	width: 60%;
}

.sa-line--w55 {
	width: 55%;
}

.sa-line--w50 {
	width: 50%;
}

.sa-line--w45 {
	width: 45%;
}

.sa-card-rows {
	display: block;
}

.sa-row {
	display: flex;
	align-items: center;
	gap: clamp(8px, 0.8vw, 11px);
	margin-bottom: clamp(12px, 1.3vw, 18px);
}

.sa-row:last-child {
	margin-bottom: 0;
}

/* 項目行の小さな丸アイコン（人型のシルエット） */
.sa-chip {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: clamp(17px, 1.75vw, 23px);
	height: clamp(17px, 1.75vw, 23px);
	border-radius: 50%;
	background: rgba(255, 226, 209, 0.98);
	color: rgba(233, 143, 92, 0.95);
}

.sa-chip svg {
	display: block;
	width: 66%;
	height: 66%;
}

/* flex-grow させると幅指定が無効になり全行が同じ長さに見えるので伸ばさない */
.sa-row .sa-line {
	flex: 0 1 auto;
	margin-bottom: 0;
}

/* 成績グラフカード（縦長・面グラフ主体） */
.sa-card--chart {
	left: 34%;
	bottom: 12%;
	width: clamp(132px, 15.4%, 198px);
	padding: clamp(12px, 1.2vw, 17px);
	transform: rotate(4.5deg);
}

.sa-line--head {
	margin-bottom: clamp(10px, 1vw, 14px);
}

.sa-chart-svg {
	display: block;
	width: 100%;
	height: clamp(62px, 6.4vw, 92px);
}

.sa-bars {
	display: flex;
	align-items: flex-end;
	gap: clamp(5px, 0.5vw, 7px);
	margin-top: clamp(11px, 1.1vw, 15px);
}

.sa-bar {
	flex: 0 0 auto;
	width: clamp(10px, 1.1vw, 15px);
	border-radius: 3px;
	background: rgba(255, 154, 99, 0.42);
}

.sa-bar--s {
	height: clamp(9px, 0.9vw, 12px);
}

.sa-bar--m {
	height: clamp(13px, 1.3vw, 18px);
}

.sa-bar--l {
	height: clamp(18px, 1.8vw, 25px);
	background: rgba(255, 122, 61, 0.55);
}

.sa-bar-line {
	flex: 1 1 auto;
	height: 4px;
	margin-bottom: 2px;
	border-radius: 3px;
	background: rgba(224, 210, 202, 0.62);
}

/* 浮遊アイコン */
.sa-float {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 178, 130, 0.32);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 10px 22px rgba(180, 110, 60, 0.10);
	color: var(--sa-orange);
}

.sa-float svg {
	display: block;
	width: 52%;
	height: 52%;
}

.sa-float--download {
	left: 40%;
	bottom: 74%;
	width: clamp(44px, 4.6vw, 60px);
	aspect-ratio: 1;
	transform: rotate(4deg);
}

.sa-float--star {
	left: 26%;
	bottom: 80%;
	width: clamp(40px, 4.2vw, 54px);
	aspect-ratio: 1;
	transform: rotate(-8deg);
	color: var(--sa-orange-strong);
}

.sa-float--history {
	left: 12%;
	bottom: 14%;
	width: clamp(34px, 3.5vw, 45px);
	aspect-ratio: 1;
	transform: rotate(6deg);
}

.sa-float--cart {
	left: 4%;
	bottom: 30%;
	width: clamp(36px, 3.8vw, 49px);
	aspect-ratio: 1;
	transform: rotate(-4deg);
}

.sa-float--doc {
	left: 8%;
	bottom: 64%;
	width: clamp(32px, 3.3vw, 43px);
	aspect-ratio: 1;
	transform: rotate(9deg);
}

/* ---------------------------------------------------------
 * PC（1200px 以上）の装飾配置
 * H1 を 44px に抑えたことでテキスト右に余白ができるため、
 * 装飾レイヤーの起点を本文の高さまで引き上げ、
 * 「テキストの右横から下へ」流れる配置に組み替える。
 * すべて top 基準で置き、テキストの実描画幅とカード左端の内側に収める。
 * ------------------------------------------------------- */
@media (min-width: 1200px) {
	.systre-auth-decorations {
		top: clamp(180px, 15vw, 240px);
	}

	.sa-card--back {
		left: 22%;
		top: 40%;
		bottom: auto;
	}

	.sa-card--account {
		left: 25.5%;
		top: 32%;
		bottom: auto;
	}

	.sa-card--chart {
		left: 38%;
		top: 2%;
		bottom: auto;
		width: clamp(132px, 14.6%, 180px);
	}

	.sa-float--star {
		left: 30%;
		top: 0%;
		bottom: auto;
	}

	.sa-float--download {
		left: 52%;
		top: 34%;
		bottom: auto;
	}

	.sa-float--doc {
		left: 19%;
		top: 50%;
		bottom: auto;
	}

	.sa-float--cart {
		left: 7%;
		top: 60%;
		bottom: auto;
	}

	.sa-float--history {
		left: 11%;
		top: 74%;
		bottom: auto;
	}

	.sa-glow--warm {
		left: 6%;
		top: 34%;
		bottom: auto;
	}

	.sa-glow--soft {
		left: 32%;
		top: -4%;
	}

	.sa-dots--left {
		left: 3%;
		top: 44%;
		bottom: auto;
	}

	.sa-arc {
		left: -8%;
		top: 6%;
		bottom: auto;
	}

	.sa-spark--1 {
		left: 46%;
		top: 1%;
		bottom: auto;
	}

	.sa-spark--2 {
		left: 13%;
		top: 56%;
		bottom: auto;
	}

	.sa-spark--3 {
		left: 44%;
		top: 78%;
		bottom: auto;
	}

	.sa-mote--1 {
		left: 29%;
		top: 4%;
		bottom: auto;
	}

	.sa-mote--2 {
		left: 56%;
		top: 44%;
		bottom: auto;
	}

	.sa-mote--3 {
		left: 5%;
		top: 28%;
		bottom: auto;
	}
}

/* ---------------------------------------------------------
 * 3. コンテンツ
 * ------------------------------------------------------- */
.systre-auth-container {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 52fr 48fr;
	gap: clamp(28px, 4vw, 64px);
	align-items: start;
	max-width: var(--sa-max);
	margin: 0 auto;
}

.systre-auth-intro {
	min-width: 0;
	padding-top: clamp(8px, 3vw, 48px);
}

.systre-auth-page .systre-auth-title {
	margin: 0 0 18px;
	color: var(--sa-ink);
	font-size: clamp(28px, 3.3vw, 44px);
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: -0.01em;
	word-break: keep-all;
	overflow-wrap: normal;
}

.systre-auth-title-accent {
	color: var(--sa-orange-strong);
}

.systre-auth-page .systre-auth-lead {
	margin: 0 0 30px;
	color: var(--sa-body);
	font-size: clamp(15px, 1.2vw, 17px);
	line-height: 1.9;
}

.systre-auth-page .systre-auth-benefits {
	margin: 0;
	padding: 0;
	list-style: none;
}

.systre-auth-page .systre-auth-benefit {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 16px;
	padding: 0;
	color: var(--sa-ink);
	font-size: clamp(15px, 1.25vw, 18px);
	font-weight: 700;
	line-height: 1.6;
}

.systre-auth-benefit::before {
	content: none;
}

.systre-auth-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--sa-orange) 0%, var(--sa-orange-strong) 100%);
	color: #fff;
	box-shadow: 0 4px 10px rgba(255, 122, 61, 0.28);
}

.systre-auth-check svg {
	width: 18px;
	height: 18px;
	display: block;
}

/* ---------------------------------------------------------
 * 認証カード
 * ------------------------------------------------------- */
.systre-auth-card-wrap {
	display: flex;
	justify-content: flex-end;
	min-width: 0;
}

.systre-auth-card {
	width: 100%;
	max-width: 520px;
	padding: 8px 32px 32px;
	border: 1px solid var(--sa-line);
	border-radius: 20px;
	background: var(--sa-white);
	box-shadow: 0 18px 48px rgba(64, 44, 32, 0.09), 0 2px 6px rgba(64, 44, 32, 0.04);
}

/* タブ */
.systre-auth-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 0 -32px 22px;
	padding: 0 32px;
	border-bottom: 1px solid var(--sa-line);
}

.systre-auth-page .systre-auth-tab {
	position: relative;
	margin: 0;
	padding: 18px 8px 15px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--sa-muted);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	cursor: pointer;
	transition: color 0.18s ease;
}

.systre-auth-page .systre-auth-tab:hover {
	background: transparent;
	color: var(--sa-ink);
}

.systre-auth-page .systre-auth-tab.is-active {
	background: transparent;
	color: var(--sa-orange-strong);
}

.systre-auth-page .systre-auth-tab::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 3px;
	border-radius: 3px 3px 0 0;
	background: var(--sa-orange-strong);
	opacity: 0;
	transition: opacity 0.18s ease;
}

.systre-auth-page .systre-auth-tab.is-active::after {
	opacity: 1;
}

.systre-auth-page .systre-auth-tab:focus-visible {
	outline: 2px solid var(--sa-orange-strong);
	outline-offset: -4px;
}

/* パネル */
.systre-auth-panel[hidden] {
	display: none;
}

.systre-auth-panel.is-active {
	animation: systre-auth-fade 0.18s ease-out both;
}

@keyframes systre-auth-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.systre-auth-panel.is-active {
		animation: none;
	}
}

/* 通知 */
.systre-auth-notices:empty {
	display: none;
}

.systre-auth-notices .woocommerce-error,
.systre-auth-notices .woocommerce-message,
.systre-auth-notices .woocommerce-info {
	margin: 0 0 20px;
	padding: 14px 16px;
	border: 1px solid;
	border-radius: 12px;
	background: #fff;
	color: var(--sa-ink);
	font-size: 14px;
	line-height: 1.75;
	list-style: none;
}

.systre-auth-notices .woocommerce-error {
	border-color: #f4c6bd;
	background: #fdf3f1;
	color: #a5321c;
}

.systre-auth-notices .woocommerce-message {
	border-color: #bfe3c8;
	background: #f2faf4;
	color: #1f6b38;
}

.systre-auth-notices .woocommerce-info {
	border-color: #ffd7bd;
	background: var(--sa-orange-soft);
	color: #8a4416;
}

.systre-auth-notices .woocommerce-error::before,
.systre-auth-notices .woocommerce-message::before,
.systre-auth-notices .woocommerce-info::before {
	content: none;
}

.systre-auth-notices li {
	margin: 0 0 6px;
	padding: 0;
	list-style: none;
}

.systre-auth-notices li:last-child {
	margin-bottom: 0;
}

.systre-auth-notices a {
	color: inherit;
	text-decoration: underline;
}

/* フォーム共通
 * Astra が `body .woocommerce form.login / form.register` に枠線と padding を当てるため、
 * body スコープを足して詳細度で上回る。 */
body.systre-auth-screen .woocommerce .systre-auth-form,
body.systre-auth-screen .woocommerce form.systre-auth-form {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

/* WooCommerce の JS が password 欄へ自動挿入するボタン（自前の目アイコンと重複するため隠す） */
.systre-auth-page .show-password-input,
.systre-auth-page .woocommerce-password-strength,
.systre-auth-page .woocommerce-password-hint {
	display: none;
}

.systre-auth-page .systre-auth-row {
	margin: 0 0 16px;
	padding: 0;
	display: block;
}

.systre-auth-page .systre-auth-row label {
	display: block;
	margin: 0 0 8px;
	color: var(--sa-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
}

.systre-auth-field {
	position: relative;
	display: block;
}

.systre-auth-field-icon {
	position: absolute;
	top: 50%;
	left: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translateY(-50%);
	color: #b7afab;
	pointer-events: none;
}

.systre-auth-field-icon svg {
	width: 20px;
	height: 20px;
	display: block;
}

.systre-auth-page .systre-auth-input {
	display: block;
	width: 100%;
	min-height: 54px;
	margin: 0;
	padding: 14px 16px 14px 44px;
	border: 1px solid var(--sa-field-line);
	border-radius: 11px;
	background: #fff;
	color: var(--sa-ink);
	font-size: 16px;
	line-height: 1.5;
	box-shadow: none;
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
	-webkit-appearance: none;
	appearance: none;
}

.systre-auth-page .systre-auth-input--plain {
	padding-left: 16px;
}

.systre-auth-page .systre-auth-input--password {
	padding-right: 50px;
}

.systre-auth-page .systre-auth-input::placeholder {
	color: #b0a9a5;
}

.systre-auth-page .systre-auth-input:focus,
.systre-auth-page .systre-auth-input:focus-visible {
	border-color: var(--sa-orange);
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 122, 61, 0.18);
}

.systre-auth-page .systre-auth-reveal {
	position: absolute;
	top: 50%;
	right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: #9d9591;
	cursor: pointer;
}

.systre-auth-page .systre-auth-reveal:hover {
	background: #f7f3f1;
	color: var(--sa-ink);
}

.systre-auth-page .systre-auth-reveal:focus-visible {
	outline: 2px solid var(--sa-orange-strong);
	outline-offset: 1px;
}

.systre-auth-reveal svg {
	width: 21px;
	height: 21px;
	display: block;
}

.systre-auth-reveal .systre-auth-reveal-off {
	display: none;
}

.systre-auth-reveal[aria-pressed="true"] .systre-auth-reveal-on {
	display: none;
}

.systre-auth-reveal[aria-pressed="true"] .systre-auth-reveal-off {
	display: block;
}

/* チェックボックス */
.systre-auth-page .systre-auth-row--remember {
	margin-bottom: 20px;
}

.systre-auth-page .systre-auth-checkbox {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--sa-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	cursor: pointer;
}

.systre-auth-page .systre-auth-checkbox input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 0;
	flex: 0 0 auto;
	accent-color: var(--sa-orange-strong);
	cursor: pointer;
}

.systre-auth-page .systre-auth-checkbox input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--sa-orange-strong);
	outline-offset: 2px;
}

/* 送信ボタン
 * テーマ側が `.woocommerce button.button` に背景・角丸・padding を当て、
 * さらに 640px 以下で !important の min-height / display を当てるため、
 * body スコープ + !important で確実に上回る。 */
.systre-auth-page .systre-auth-row--submit {
	margin-bottom: 14px;
}

body.systre-auth-screen .systre-auth-page .systre-auth-submit {
	display: block !important;
	width: 100%;
	min-height: 54px !important;
	padding: 15px 20px !important;
	border: 0;
	border-radius: 11px !important;
	background-color: var(--sa-orange-strong) !important;
	background-image: linear-gradient(180deg, var(--sa-orange) 0%, var(--sa-orange-strong) 100%) !important;
	color: #fff;
	font-size: 17px !important;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.02em;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(255, 92, 20, 0.24);
	transition: filter 0.16s ease, box-shadow 0.16s ease;
}

body.systre-auth-screen .systre-auth-page .systre-auth-submit:hover {
	background-color: var(--sa-orange-strong) !important;
	background-image: linear-gradient(180deg, var(--sa-orange) 0%, var(--sa-orange-strong) 100%) !important;
	color: #fff;
	filter: brightness(1.04);
}

body.systre-auth-screen .systre-auth-page .systre-auth-submit:focus-visible {
	outline: 2px solid var(--sa-ink);
	outline-offset: 2px;
}

/* リンク類 */
.systre-auth-page .systre-auth-lost {
	margin: 0;
	padding: 0 0 18px;
	border-bottom: 1px solid var(--sa-line);
	text-align: center;
}

.systre-auth-page .systre-auth-lost a {
	color: var(--sa-orange-strong);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.systre-auth-page .systre-auth-lost a:hover {
	text-decoration: underline;
}

.systre-auth-page .systre-auth-switch {
	margin: 16px 0 0;
	color: var(--sa-body);
	font-size: 14px;
	line-height: 1.8;
	text-align: center;
}

.systre-auth-page .systre-auth-switch-link {
	margin: 0 2px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--sa-orange-strong);
	font-size: inherit;
	font-weight: 700;
	line-height: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.systre-auth-page .systre-auth-switch-link:hover {
	background: none;
	color: var(--sa-orange-strong);
}

.systre-auth-page .systre-auth-switch-link:focus-visible {
	outline: 2px solid var(--sa-orange-strong);
	outline-offset: 2px;
}

.systre-auth-page .systre-auth-terms {
	margin: 0;
	color: var(--sa-muted);
	font-size: 13px;
	line-height: 1.85;
	text-align: center;
}

.systre-auth-page .systre-auth-terms a {
	color: var(--sa-orange-strong);
	text-decoration: underline;
}

.systre-auth-page .systre-auth-note {
	margin: 0 0 16px;
	color: var(--sa-body);
	font-size: 14px;
	line-height: 1.8;
}

/* 区切り線 */
.systre-auth-divider {
	position: relative;
	margin: 18px 0;
	text-align: center;
}

.systre-auth-divider::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--sa-line);
}

.systre-auth-divider span {
	position: relative;
	padding: 0 14px;
	background: #fff;
	color: var(--sa-muted);
	font-size: 13px;
	line-height: 1.4;
}

/* ---------------------------------------------------------
 * Google ボタン（Nextend Social Login の出力を整形するだけ）
 * ------------------------------------------------------- */
.systre-auth-social {
	margin: 4px 0 0;
}

.systre-auth-social div.nsl-container {
	margin: 0;
	padding: 0;
	text-align: left;
}

/* NSL は .nsl-container-block へ inline-grid を当てるため body スコープで上回る */
body.systre-auth-screen .systre-auth-social div.nsl-container .nsl-container-buttons {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}

body.systre-auth-screen .systre-auth-social div.nsl-container .nsl-container-buttons a {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	box-shadow: none;
}

.systre-auth-social div.nsl-container .nsl-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	min-height: 54px;
	padding: 0 18px;
	border: 1px solid var(--sa-field-line);
	border-radius: 11px;
	background-color: #fff;
	box-shadow: none;
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.systre-auth-social div.nsl-container .nsl-button:hover {
	border-color: #c9c1bd;
	box-shadow: 0 2px 8px rgba(64, 44, 32, 0.07);
}

.systre-auth-social div.nsl-container .nsl-container-buttons a:focus-visible .nsl-button {
	border-color: var(--sa-orange);
	box-shadow: 0 0 0 3px rgba(255, 122, 61, 0.18);
}

.systre-auth-social div.nsl-container .nsl-button-svg-container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	min-width: 22px;
	margin: 0;
	padding: 0;
}

.systre-auth-social div.nsl-container .nsl-button-svg-container svg {
	width: 22px;
	height: 22px;
}

.systre-auth-social div.nsl-container .nsl-button-default div.nsl-button-label-container {
	margin: 0;
	padding: 0;
	color: var(--sa-ink);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
}

/* ---------------------------------------------------------
 * 下部：アカウント作成のメリットセクション
 * ------------------------------------------------------- */
.systre-account-benefits {
	position: relative;
	z-index: 3;
	margin-top: -40px;
	padding: 0 24px clamp(52px, 6vw, 88px);
	background: linear-gradient(180deg, rgba(255, 243, 234, 0.85) 0%, rgba(255, 250, 246, 0.9) 46%, #fff 100%);
}

.systre-benefits-panel {
	max-width: var(--sa-max);
	margin: 0 auto;
	padding: clamp(30px, 3.4vw, 52px) clamp(20px, 2.6vw, 44px) clamp(32px, 3.6vw, 54px);
	border: 1px solid #f3e7e0;
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 18px 46px rgba(64, 44, 32, 0.07);
}

.systre-auth-page .systre-benefits-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(10px, 1.4vw, 20px);
	margin: 0;
	padding: 0;
	color: var(--sa-ink);
	font-size: clamp(19px, 2.1vw, 30px);
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}

.systre-benefits-title-mark {
	position: relative;
	flex: 0 0 auto;
	width: clamp(20px, 2vw, 30px);
	height: clamp(18px, 1.8vw, 26px);
}

.systre-benefits-title-mark::before,
.systre-benefits-title-mark::after {
	content: "";
	position: absolute;
	top: 0;
	width: 3px;
	height: 100%;
	border-radius: 3px;
	background: var(--sa-orange);
	transform: rotate(22deg);
}

.systre-benefits-title-mark::before {
	left: 18%;
}

.systre-benefits-title-mark::after {
	left: 62%;
	height: 74%;
	top: 22%;
	opacity: 0.72;
}

.systre-benefits-title-mark--right::before,
.systre-benefits-title-mark--right::after {
	transform: rotate(-22deg);
}

.systre-auth-page .systre-benefits-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(14px, 1.5vw, 22px);
	margin: clamp(24px, 2.6vw, 40px) 0 0;
	padding: 0;
	list-style: none;
}

.systre-auth-page .systre-benefits-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	padding: clamp(22px, 2vw, 30px) clamp(16px, 1.4vw, 22px);
	border: 1px solid #f6ded1;
	border-radius: 16px;
	background: #fffdfb;
	text-align: center;
	transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.systre-auth-page .systre-benefits-card::before {
	content: none;
}

.systre-auth-page .systre-benefits-card:hover {
	transform: translateY(-4px);
	border-color: #ffc39c;
	box-shadow: 0 12px 26px rgba(180, 110, 60, 0.10);
}

.systre-benefits-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(48px, 4.4vw, 60px);
	height: clamp(48px, 4.4vw, 60px);
	margin-bottom: 16px;
	border-radius: 50%;
	background: linear-gradient(140deg, var(--sa-orange) 0%, var(--sa-orange-strong) 100%);
	color: #fff;
	box-shadow: 0 8px 18px rgba(255, 122, 61, 0.26);
}

.systre-benefits-icon svg {
	display: block;
	width: 52%;
	height: 52%;
}

.systre-auth-page .systre-benefits-card-title {
	margin: 0 0 8px;
	padding: 0;
	color: var(--sa-ink);
	font-size: clamp(15px, 1.2vw, 17px);
	font-weight: 700;
	line-height: 1.6;
}

.systre-auth-page .systre-benefits-card-text {
	margin: 0;
	color: var(--sa-muted);
	font-size: clamp(13px, 1vw, 14px);
	line-height: 1.8;
}

@media (prefers-reduced-motion: reduce) {
	.systre-auth-page .systre-benefits-card {
		transition: none;
	}

	.systre-auth-page .systre-benefits-card:hover {
		transform: none;
	}
}

/* ---------------------------------------------------------
 * レスポンシブ
 * ------------------------------------------------------- */

/* タブレット上位：2 カラムのまま装飾だけ控えめに（浮遊アイコンを 3 個へ） */
@media (max-width: 1199px) {
	.sa-float--doc,
	.sa-float--cart {
		display: none;
	}

	.sa-mote--3 {
		display: none;
	}

	.systre-auth-decorations {
		opacity: 0.9;
	}
}

/* タブレット：1 カラム。装飾はテキスト背面に薄く敷き、フォームには重ねない */
@media (max-width: 1023px) {
	.systre-auth-container {
		grid-template-columns: 1fr;
		gap: 30px;
		max-width: 620px;
	}

	.systre-auth-intro {
		padding-top: 0;
	}

	.systre-auth-card-wrap {
		justify-content: center;
	}

	.systre-auth-card {
		max-width: 100%;
	}

	.systre-auth-page .systre-auth-title,
	.systre-auth-page .systre-auth-lead {
		text-align: center;
	}

	.systre-auth-page .systre-auth-benefits {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px 22px;
	}

	.systre-auth-page .systre-auth-benefit {
		margin: 0;
	}

	/* 1 カラムでは装飾をヒーロー下部の帯に集約する。
	 * 認証カードの下に置くので、テキストにもフォームにも重ならない。 */
	.systre-auth-hero {
		padding-bottom: clamp(196px, 27vw, 270px);
	}

	.systre-auth-decorations {
		top: auto;
		bottom: 0;
		height: clamp(196px, 27vw, 270px);
		width: 100%;
		opacity: 0.85;
	}

	.sa-card--back {
		left: 4%;
		bottom: 40%;
		width: clamp(56px, 8vw, 78px);
		padding: 9px 8px;
	}

	.sa-card--back .sa-line {
		margin-bottom: 6px;
	}

	.sa-card--account {
		left: 12%;
		bottom: 20%;
		width: clamp(120px, 17vw, 160px);
		padding: 12px 11px;
	}

	.sa-card--account .sa-avatar {
		width: 24px;
		height: 24px;
	}

	.sa-card--account .sa-card-head {
		margin-bottom: 12px;
	}

	.sa-card--account .sa-row {
		margin-bottom: 10px;
	}

	.sa-card--account .sa-chip {
		width: 15px;
		height: 15px;
	}

	.sa-card--chart {
		left: 34%;
		bottom: 14%;
		width: clamp(108px, 15vw, 142px);
		padding: 10px;
	}

	.sa-card--chart .sa-chart-svg {
		height: clamp(44px, 6vw, 58px);
	}

	.sa-float--download {
		left: 61%;
		bottom: 62%;
		width: clamp(40px, 6vw, 54px);
	}

	.sa-float--star {
		left: 76%;
		bottom: 34%;
		width: clamp(36px, 5.4vw, 48px);
	}

	.sa-float--history {
		display: none;
	}

	.sa-glow--warm {
		left: -14%;
		bottom: -34%;
		width: clamp(200px, 44vw, 330px);
	}

	.sa-glow--soft {
		left: 56%;
		top: -18%;
		width: clamp(130px, 28vw, 220px);
	}

	.sa-arc {
		left: -20%;
		bottom: -70%;
		width: clamp(280px, 58vw, 440px);
	}

	.sa-dots--left {
		left: 46%;
		bottom: 80%;
		width: clamp(72px, 11vw, 110px);
		height: clamp(58px, 9vw, 90px);
	}

	.sa-spark--1 {
		left: 52%;
		bottom: 92%;
	}

	.sa-spark--2 {
		left: 92%;
		bottom: 72%;
	}

	.sa-spark--3 {
		display: none;
	}

	.sa-mote--1 {
		left: 28%;
		bottom: 95%;
	}

	.sa-mote--2 {
		left: 88%;
		bottom: 94%;
	}

	.systre-auth-page .systre-benefits-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.systre-account-benefits {
		margin-top: -20px;
	}
}

/* スマホ：装飾は光・円弧・点線とアイコン 2 個のみ */
@media (max-width: 767px) {
	.systre-auth-hero {
		padding: 24px 16px clamp(130px, 34vw, 180px);
	}

	.systre-auth-container {
		gap: 24px;
	}

	.systre-auth-page .systre-auth-title {
		font-size: 27px;
		line-height: 1.4;
	}

	.systre-auth-page .systre-auth-lead {
		margin-bottom: 20px;
		font-size: 15px;
	}

	.systre-auth-br-pc {
		display: none;
	}

	.systre-auth-page .systre-auth-benefit {
		font-size: 14px;
		gap: 8px;
	}

	.systre-auth-check {
		width: 24px;
		height: 24px;
	}

	.systre-auth-check svg {
		width: 15px;
		height: 15px;
	}

	/* スマホは大きなカードを出さず、光・円弧・点線とアイコン 2 個で雰囲気だけ残す */
	.systre-auth-decorations {
		height: clamp(130px, 34vw, 180px);
		opacity: 0.8;
	}

	.sa-card--back,
	.sa-card--account,
	.sa-card--chart,
	.sa-mote--1,
	.sa-mote--2,
	.sa-spark--2 {
		display: none;
	}

	.sa-float--download {
		left: 8%;
		bottom: 24%;
		width: 44px;
	}

	.sa-float--star {
		left: 34%;
		bottom: 46%;
		width: 36px;
	}

	.sa-arc {
		left: -34%;
		bottom: -84%;
		width: clamp(280px, 96vw, 400px);
	}

	.sa-glow--warm {
		left: -22%;
		bottom: -46%;
		width: clamp(190px, 62vw, 300px);
	}

	.sa-glow--soft {
		left: 58%;
		top: -24%;
		width: clamp(120px, 36vw, 180px);
	}

	.sa-spark--1 {
		left: 62%;
		bottom: 62%;
	}

	.sa-dots--left {
		left: 68%;
		bottom: 10%;
		width: 76px;
		height: 62px;
	}

	.systre-auth-card {
		padding: 4px 18px 24px;
		border-radius: 18px;
	}

	.systre-auth-tabs {
		margin: 0 -18px 20px;
		padding: 0 18px;
	}

	.systre-auth-page .systre-auth-tab {
		padding: 16px 4px 13px;
		font-size: 15px;
	}

	body.systre-auth-screen .systre-auth-page .systre-auth-input,
	body.systre-auth-screen .systre-auth-page .systre-auth-submit,
	body.systre-auth-screen .systre-auth-social div.nsl-container .nsl-button {
		min-height: 52px !important;
	}

	.systre-account-benefits {
		margin-top: -16px;
		padding: 0 16px 44px;
	}

	.systre-benefits-panel {
		padding: 26px 18px 30px;
		border-radius: 18px;
	}

	.systre-auth-page .systre-benefits-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.systre-auth-page .systre-benefits-card {
		padding: 20px 18px;
	}
}

@media (max-width: 400px) {
	.systre-auth-page .systre-auth-title {
		font-size: 24px;
	}
}