@charset "utf-8";
/*
 * Little Net / FeelingCouple - Unified Stylesheet
 * Updated: 2026-08-31
 */

/* ==========================================================================
   1. 共通設定（カラー定義 / リセット / 汎用コンポーネント）
   ========================================================================== */

/* ----- カラー変数：デフォルト（ライトモード） ----- */
:root {
	--max-width: 800px;

	--site-title-color: #6b81c0;
	--primary-color: #ff6b81;
	--primary-hover: #ff4757;
	--bg-color: #f8f9fa;
	--card-bg: #ffffff;
	--input-bg: #ffffff;
	--text-main: #333333;
	--text-sub: #666666;
	--border-color: #e9ecef;
	--input-text-border-color: #cccccc;
	--badge-active-bg: #20c997;
	--badge-prep-bg: #adb5bd;
	
	/* ボタン補助 */
	--btn-sec-bg: #e9ecef;
	--btn-sec-hover: #dee2e6;
	--btn-sec-text: #333333;

	/* アラート・エラー・危険系要素 */
	--alert-bg: #fff5f5;
	--alert-border: #ffc9c9;
	--alert-text: #e03131;
	--btn-danger-bg: #fff1f0;
	--btn-danger-border: #ffa39e;
	--btn-danger-text: #e03131;
	--btn-danger-hover: #ff4d4f;

	/* ホーム画面背景画像（ライトモード用：ハート幾何学パターン） */
	--bg-home-image: url('./img/home-bg.jpg');
}

/* ----- カラー変数：ダークモード（OS設定連動） ----- */
@media (prefers-color-scheme: dark) {
  :root {
	--site-title-color: #8da4e3;
	--primary-color: #ff6b81;
	--primary-hover: #ff8597;
	--bg-color: #121212;
	--card-bg: #1e1e1e;
	--input-bg: #2a2a2a;
	--text-main: #e0e0e0;
	--text-sub: #a0a0a0;
	--border-color: #333333;
	--input-text-border-color: #333333;
	--badge-active-bg: #208967;
	--badge-prep-bg: #adb5bd;
		
	--btn-sec-bg: #333333;
	--btn-sec-hover: #444444;
	--btn-sec-text: #e0e0e0;

	--alert-bg: #2c1517;
	--alert-border: #5c2327;
	--alert-text: #ff6b81;
	--btn-danger-bg: #321215;
	--btn-danger-border: #5c2327;
	--btn-danger-text: #ff6b81;
	--btn-danger-hover: #ff4757;

	/* ホーム画面背景画像（ダークモード用：落ち着いたハート幾何学パターン） */
	--bg-home-image: url('./img/home-bg.jpg');
  }
}

/* ----- 基本リセット & 全体要素 ----- */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--text-main);
	background-color: var(--bg-color);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	transition: background-color 0.3s, color 0.3s;
}

/* ----- ページタイトル・カード枠 ----- */
.page-title {
	font-size: 1.1rem;
	text-align: center;
	margin-bottom: 1.5rem;
	color: var(--text-main);
}

.card {
	background: var(--card-bg);
	border-radius: 12px;
	padding: clamp(1.2rem, 3vw, 2rem) clamp(0.4rem, 3vw, 2rem);
	margin: 0 auto 1.5rem;
	max-width: 800px; /* ログイン画面・フォームカード共通の最大横幅 */
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	border: 1px solid var(--border-color);
	transition: background-color 0.3s, border-color 0.3s;
}

.section-title {
	font-size: clamp(1.1rem, 3vw, 1.1rem);
	border-left: 4px solid var(--primary-color);
	padding-left: 0.75rem;
	margin-bottom: 1.2rem;
	color: var(--text-main);
	display: flex;
	align-items: center;
}

/* ----- バッジ ----- */
.badge {
	font-size: 0.75rem;
	font-weight: bold;
	padding: 0.2rem 0.6rem;
	border-radius: 20px;
	color: #fff;
	white-space: nowrap;
}

.badge-active { background-color: var(--badge-active-bg); }
.badge-prep { background-color: var(--badge-prep-bg); }

/* ----- 汎用ボタン ----- */
.button-group {
	display: flex;
	gap: 1rem;
	margin-top: 2rem;
	justify-content: center;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 2rem;
	font-size: 1rem;
	font-weight: bold;
	border-radius: 8px;
	border: none;
	cursor: pointer;
	transition: background-color 0.2s, opacity 0.2s, color 0.2s, border-color 0.2s;
	text-decoration: none;
	min-width: 120px;
}

.btn-sm {
	padding: 0.4rem 0.8rem;
	font-size: 0.85rem;
	min-width: auto;
}

.btn-primary {
	background-color: var(--primary-color);
	color: #ffffff;
}

.btn-primary:hover {
	background-color: var(--primary-hover);
}

.btn-secondary {
	background-color: var(--btn-sec-bg);
	color: var(--btn-sec-text);
}

.btn-secondary:hover {
	background-color: var(--btn-sec-hover);
}

/* 危険・解除用ボタン */
.btn-danger {
	background-color: var(--btn-danger-bg);
	border: 1px solid var(--btn-danger-border);
	color: var(--btn-danger-text);
}

.btn-danger:hover {
	background-color: var(--btn-danger-hover);
	color: #ffffff;
	border-color: var(--btn-danger-hover);
}

/* ----- アラート（エラー表示） ----- */
.alert-error {
	background-color: var(--alert-bg);
	border: 1px solid var(--alert-border);
	color: var(--alert-text);
	padding: 0.5rem 0.5rem;
	border-radius: 8px;
	font-size: 0.9rem;
	font-weight: bold;
	margin-top: 0.3rem;
	margin-bottom: 0;
	display: flex;
	align-items: center;
	gap: 0.2rem;
}

.alert-error svg {
	flex-shrink: 0;
}


/* ==========================================================================
   2. レイアウト基本構成（ヘッダー / メイン / フッター）
   ========================================================================== */

/* ----- ヘッダー（レスポンシブ・段分け対応） ----- */
header {
	background-color: var(--card-bg);
	border-bottom: 1px solid var(--border-color);
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.nav-container {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0.2rem 0.6rem;
	display: flex;
	flex-direction: column; /* 上下に段を分ける */
	gap: 0.2rem;
}

/* 1行目：タイトルとユーザー名 */
.nav-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	line-height: 1.1;
	padding-top: 0.3rem;
}

.site-title {
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--site-title-color);
	text-decoration: none;
}

.user-name {
	font-size: 0.8rem;
	color: var(--text-sub);
	font-weight: 500;
}

/* 2行目：ナビメニュー（横並び・右寄せ） */
.nav-menu {
	display: flex;
	list-style: none;
	justify-content: flex-end; /* 右寄せ */
	gap: 0.5rem;
	width: 100%;
	padding-top: 0;
}

.nav-menu a {
	text-decoration: none;
	color: var(--text-sub);
	font-size: 0.8rem;
	font-weight: 600;
	padding-top:    0;
	padding-bottom: 0.2rem;
	padding-left:   0.4rem;
	padding-right:  0.1rem;
	transition: color 0.2s;
	white-space: nowrap; /* スマホで勝手に改行するのを防止 */
}

.nav-menu a:hover,
.nav-menu a.active {
	color: var(--primary-color);
	border-bottom: 2px solid var(--primary-color);
}

/* ----- メインレイアウト ----- */
main {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 1.5rem 0.4rem 3rem;
}

/* ----- フッター ----- */
footer {
	text-align: center;
	padding: 1.5rem;
	background-color: var(--card-bg);
	border-top: 1px solid var(--border-color);
	color: var(--text-sub);
	font-size: 0.85rem;
}


/* ==========================================================================
   3. 各ページ固有スタイル
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. ホームページ（index.html）固有スタイル
   -------------------------------------------------------------------------- */
main.home-main {
	min-height: calc(100vh - 140px);
	background-color: var(--bg-color);
	border-radius: 12px;
	position: relative;		/* 擬似要素の位置基準にするため指定 */
	overflow: hidden;		/* 角丸（border-radius）からはみ出る背景をカット */
	z-index: 0;
}

/* 背景画像のみを透過させる設定 */
main.home-main::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1; /* 文字やカードの下に配置 */

	/* 背景画像の設定 */
	background-image: var(--bg-home-image);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;

	/* 透明度を調整（0.1〜1.0の間で設定） */
	opacity: 0.2; 
}

.home-menu-grid {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	max-width: 600px;
	margin: 0 auto;
}

.home-card-link {
	display: block;
	background: var(--card-bg);
	border: 2px solid var(--border-color);
	border-radius: 12px;
	padding: 1.5rem;
	text-decoration: none;
	color: var(--text-main);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s, background-color 0.3s;
}

.home-card-link:hover {
	transform: translateY(-3px);
	border-color: var(--primary-color);
	box-shadow: 0 6px 16px rgba(255, 107, 129, 0.2);
}

.home-card-link.disabled {
	opacity: 0.5;
	pointer-events: none;
	background-color: var(--bg-color);
}

.home-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5rem;
}

.home-card-title {
	font-size: 1.25rem;
	font-weight: bold;
	color: var(--text-main);
}

.home-card-link:hover .home-card-title {
	color: var(--primary-color);
}

.home-card-desc {
	font-size: 0.9rem;
	color: var(--text-sub);
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   B. ガイドページ（guide.html）固有スタイル
   -------------------------------------------------------------------------- */
.game-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.game-item {
	border: 1px solid var(--border-color);
	border-radius: 8px;
	padding: 1.2rem;
	background-color: var(--card-bg);
}

.game-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5rem;
}

.game-name {
	font-size: 1.1rem;
	font-weight: bold;
}

.game-desc {
	font-size: 0.9rem;
	color: var(--text-sub);
}

.step-list {
	list-style: none;
}

.step-item {
	position: relative;
	padding-left: 3rem;
	margin-bottom: 1.5rem;
}

.step-item:last-child {
	margin-bottom: 0;
}

.step-number {
	position: absolute;
	left: 0;
	top: 0;
	width: 2.2rem;
	height: 2.2rem;
	background-color: var(--primary-color);
	color: #ffffff;
	font-weight: bold;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.95rem;
}

.step-title {
	font-weight: bold;
	font-size: 1rem;
	margin-bottom: 0.2rem;
}

.step-desc {
	font-size: 0.9rem;
	color: var(--text-sub);
}

/* --------------------------------------------------------------------------
   C. フォーム画面 固有スタイル
   -------------------------------------------------------------------------- */
.form-description {
	font-size: 0.95rem;
	color: var(--text-sub);
	margin-bottom: 1.5rem;
	text-align: left;
}

.form-description-alert {
	font-size: 0.95rem;
	color: var(--alert-text);
	margin-bottom: 1.5rem;
	text-align: left;
}

.form-message-ok {
	font-size: 1.0rem;
	color: var(--text-sub);
	margin-bottom: 2.5rem;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	max-width: 500px;
}

.form-message-ng {
	font-size: 1.0rem;
	color: var(--alert-text);
	margin-bottom: 2.5rem;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	max-width: 500px;
}

.form-message-sub {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	padding-left: 2.0rem;
	font-size: 0.95rem;
}

.form-group {
	margin-bottom: 1.5rem;
}

.form-label {
	display: block;
	font-weight: bold;
	font-size: 0.95rem;
	margin-bottom: 0.2rem;
	color: var(--text-main);
}

.form-sub-label {
	font-size: 0.82rem;
	color: var(--text-sub);
	margin-bottom: 0.4rem;
}

.hissu {
	color: var(--primary-color);
	font-size: 0.8rem;
	margin-left: 0.3rem;
}

/* 入力ボックス統一スタイル */
.input-text {
	width: 100%;
	padding: 0.75rem 0.9rem;
	font-size: 1rem;
	/*border: 1px solid var(--border-color);*/
	border: 1px solid var(--input-text-border-color);
	border-radius: 8px;
	background-color: var(--input-bg);
	color: var(--text-main);
	outline: none;
	transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

/* パスワード入力フィールド（目のアイコン用スペース確保） */
.pwd-field-wrap .input-text {
	padding-right: 2.8rem;
}

.input-text:focus {
	border-color: var(--site-title-color);
	box-shadow: 0 0 0 3px rgba(107, 129, 192, 0.25);
}

.input-text.input_error {
	border-color: var(--primary-color);
	background-color: var(--alert-bg);
}

/* キャプチャ（認証番号）周辺スタイル */
.captcha-area {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin-bottom: 0.5rem;
}

.captcha-img {
	height: 2rem;
	width: auto;
	border-radius: 4px;
	border: 1px solid var(--border-color);
}

.captcha-input {
	max-width: 180px;
}

/* ブラウザの自動補完（オートコンプリート）時の背景色上書き設定 */
.input-text:-webkit-autofill,
.input-text:-webkit-autofill:hover, 
.input-text:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--text-main);
	-webkit-box-shadow: 0 0 0px 1000px var(--input-bg) inset !important;
	transition: background-color 5000s ease-in-out 0s;
}

.pwd-field-wrap {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}

.pwd-toggle-btn {
	position: absolute;
	right: 0.6rem;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.3rem;
	color: var(--text-sub);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
}

.pwd-toggle-btn:hover {
	color: var(--text-main);
}

.form-footer-links {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px dashed var(--border-color);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.8rem;
	font-size: 0.9rem;
}

.form-footer-links a,
.btn-link {
	color: var(--site-title-color);
	text-decoration: none;
	background: none;
	border: none;
	font-size: 1.0rem;
	cursor: pointer;
	padding: 0;
	transition: color 0.2s, text-decoration 0.2s;
}

.form-footer-links a:hover,
.btn-link:hover {
	color: var(--primary-color);
	text-decoration: underline;
}

/* ----- リマインダー（ログイン情報を忘れた場合）固有スタイル ----- */
.reminder-instructions {
	background-color: var(--bg-color);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	padding: 1rem 1.2rem;
	margin-bottom: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}

.instruction-box {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.instruction-title {
	font-size: 0.9rem;
	color: var(--text-main);
}

.instruction-steps {
	padding-left: 1.4rem;
	font-size: 0.85rem;
	color: var(--text-sub);
	line-height: 1.6;
}

/* ----- 利用規約・プライバシーポリシー表示用スタイル ----- */
.terms-container {
	max-height: 360px;
	overflow-y: auto;
	background-color: var(--bg-color);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	padding: 1.2rem;
	margin-bottom: 1.5rem;
	font-size: 0.88rem;
	line-height: 1.7;
	color: var(--text-main);
}

.terms-section {
	margin-bottom: 2rem;
}

.terms-section:last-child {
	margin-bottom: 0;
}

.terms-heading {
	font-size: 1rem;
	font-weight: bold;
	color: var(--site-title-color);
	margin-bottom: 0.8rem;
	padding-bottom: 0.3rem;
	border-bottom: 1px solid var(--border-color);
}

.terms-article {
	margin-top: 1rem;
}

.terms-article h3 {
	font-size: 0.9rem;
	font-weight: bold;
	color: var(--text-main);
	margin-bottom: 0.4rem;
}

.terms-list {
	padding-left: 1.4rem;
	margin-top: 0.4rem;
	margin-bottom: 0.8rem;
}

.terms-list li {
	margin-bottom: 0.3rem;
}

.terms-effective-date {
	margin-top: 1rem;
	font-size: 0.85rem;
	color: var(--text-sub);
	text-align: right;
}

/* --------------------------------------------------------------------------
   D. マイページ（mypage.html）固有スタイル
   -------------------------------------------------------------------------- */
.mypage-card {
	max-width: 500px;
}

.mypage-menu-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.mypage-menu-item form {
	display: block;
	width: 100%;
}

.mypage-btn {
	width: 100%;
	padding: 0.9rem 1rem;
	font-size: 0.95rem;
}

.mypage-menu-item.danger-item {
	margin-top: 0.5rem;
	padding-top: 1rem;
	border-top: 1px dashed var(--border-color);
}