/* 固定ページ用カスタムスタイル - Tailwindビルドなしで使用可能 */

/* 右寄せ補助 */
.abcom-text-right {
	text-align: right;
}
/* 字下げ（1行目2文字、2行目以降1文字） */
.abcom-indent-1 {
	text-indent: 1em;
}

/* 字下げ（1行目2文字、2行目以降1文字） */
.abcom-indent-2-1 {
	padding-left: 1em;
	text-indent: 1em;
}
/* 字下げ（1行目1文字、2行目以降3文字） */
.abcom-indent-1-2 {
	padding-left: 3em;
	text-indent: -1em;
}

/* 箇条書き（(1)形式・3文字下げ・折り返し対応） */
.abcom-indent-list-3 {
	list-style: none;
	padding-left: 3.5em;
	text-indent: -1.5em;
}
/* 箇条書き（①形式・4文字下げ・折り返し対応） */
.abcom-indent-list-4 {
	list-style: none;
	padding-left: 1.5em;
	text-indent: -1.5em;
}
/* 箇条書き（①形式・4文字下げ・折り返し対応） */
.abcom-indent-list-4-1 {
	padding-left: 0em;
	text-indent: 0em;
}

/* ボックス全体のスタイル */
.abcom-fixed-page-box {
    background-color: #f9f9f9 !important; /* BOX内容の背景色 */
    border: 1px solid #d1d5db !important; /* BOXの枠線色 */
    color: #000 !important; /* テキストの色 */
    border-radius: 1rem; /* rounded-2xl */
    padding: 2rem; /* p-8 */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
}
/* 確認画面のカラー無彩色統一（サポート/見積もり/お問い合わせ confirm・2026-08-07：青みグレー禁止→無彩色、赤→ブランドレッド） */
.abcom-fixed-page-box .text-gray-500 { color: #707070 !important; } /* 確認項目の見出し #6A7282→#707070 */
.abcom-fixed-page-box .text-gray-900 { color: #000000 !important; } /* 確認項目の内容 #101828→#000000 */
.abcom-fixed-page-box .text-red-600 { color: #e60028 !important; }   /* プライバシーリンク #E7000B→#e60028 */
.abcom-fixed-page-box .btn-cta--green { color: #ffffff !important; } /* 送信ボタン文字 #FFFEF9→#ffffff（背景の緑はそのまま） */
.abcom-fixed-page-box label {
    color: #000000 !important;  /* ラベルの色（サポート窓口と統一・青みグレー#1f2937→無彩色 2026-08-07） */
}
/* 入力フィールドのボーダー */
.abcom-fixed-page-box input[type="text"],
.abcom-fixed-page-box input[type="email"],
.abcom-fixed-page-box input[type="tel"],
.abcom-fixed-page-box input[type="file"],
.abcom-fixed-page-box select,
.abcom-fixed-page-box textarea {
    border: 1px solid #d1d5db !important;
}

/* CTAボタン（a/button共通） */
.btn-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border-radius: 9999px;
	padding: 0.75rem 2rem;
	font-size: 1rem;
	font-weight: bold;
	color: #ffffff !important;
	text-decoration: none;
	border: none;
	cursor: pointer;
	appearance: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* 赤ボタン */
.btn-cta--red {
	background-color: #dc2626;
	/* シャドウ使用時： box-shadow: 0 10px 15px -3px rgba(220, 38, 38, 0.3), 0 4px 6px -4px rgba(220, 38, 38, 0.3); */
}
/* 赤ボタン：ホバー時 */
.btn-cta--red:hover {
	background-color: #ef4444;
}
/* 緑ボタン */
.btn-cta--green {
	background-color: #16a34a;
	/* シャドウ使用時： box-shadow: 0 10px 15px -3px rgba(22, 163, 74, 0.3), 0 4px 6px -4px rgba(22, 163, 74, 0.3); */
}
/* 緑ボタン：ホバー時 */
.btn-cta--green:hover {
	background-color: #22c55e;
}
/* 青ボタン */
.btn-cta--blue {
	background-color: #3b82f6;
	/* シャドウ使用時： box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.3), 0 4px 6px -4px rgba(59, 130, 246, 0.3); */
}
/* 青ボタン：ホバー時 */
.btn-cta--blue:hover {
	background-color: #60a5fa;
}
/* グレーボタン（中抜きスタイル） */
.btn-cta--gray {
    background-color: #ffffff !important;   /* No.67 背景(通常)：中抜き 白 */
    color: #707070 !important;              /* No.68 文字(通常)：#707070 */
    border: 1px solid #707070 !important;   /* No.68 フチ(通常)：#707070 */
}
/* グレーボタン：ホバー時（戻る系 No.69/70） */
.btn-cta--gray:hover {
    background-color: #e5e5e5 !important;    /* No.69 背景(ホバー)：#e5e5e5 */
    border-color: #707070 !important;        /* No.70 フチ(ホバー)：#707070 */
    color: #707070 !important;               /* No.70 文字(ホバー)：#707070 */
}
/* 進む系ボタン（No.64-66）：塗り #707070 →(hover)#000000・文字 #fff（例: 解決しない場合は入力フォームへ進む） */
.btn-cta--fwd {
    background-color: #707070 !important;    /* No.64 背景(通常)：#707070 */
    color: #ffffff !important;               /* No.66 文字：#ffffff */
    border: 1px solid #ffffff !important;    /* No.72 フチ(通常)：#ffffff（文字と同じ） */
}
.btn-cta--fwd:hover {
    background-color: #000000 !important;    /* No.65 背景(ホバー)：#000000 */
    color: #ffffff !important;               /* No.66 文字：#ffffff */
    border-color: #ffffff !important;        /* No.74 フチ(ホバー)：#ffffff */
}

/* CTAボタンの無効状態 */
.btn-cta:disabled,
.btn-cta[aria-disabled="true"],
.btn-cta.is-disabled {
	cursor: not-allowed;
	opacity: 0.6;
	box-shadow: none;
}
/* 赤ボタン：disabled時 */
.btn-cta--red:disabled,
.btn-cta--red[aria-disabled="true"],
.btn-cta--red.is-disabled {
	background-color: #9ca3af;
}
/* 緑ボタン：disabled時 */
.btn-cta--green:disabled,
.btn-cta--green[aria-disabled="true"],
.btn-cta--green.is-disabled {
	background-color: #9ca3af;
}
/* 青ボタン：disabled時 */
.btn-cta--blue:disabled,
.btn-cta--blue[aria-disabled="true"],
.btn-cta--blue.is-disabled {
	background-color: #9ca3af;
}

/* 小さめボタン（下付き） */
.btn-cta--compact {
	padding: 0.4rem 1.25rem !important;
	font-size: 0.875rem;
	line-height: 1.2;
	align-self: flex-end;
}

/* 控えめリンク（矢印つき） */
.link-cta {
	display: inline-flex;
	align-items: center;
	color: #64748b;
	font-size: 0.875rem;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 0.125rem;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.link-cta::after {
	content: "\2192";
	display: inline-block;
	margin-left: 0.25rem;
}
.link-cta:hover {
	color: #334155;
	border-bottom-color: currentColor;
}

/* チェックマーク付きリストスタイル */
.space-y-1 li {
    list-style: none;
    position: relative;
    padding-left: 1.5em;
}

.space-y-1 li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #22c55e;
    font-weight: bold;
    font-size: 1.1em;
}

/* ローディングダイアログ */
.abcom-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.abcom-loading.is-visible {
    opacity: 1;
    pointer-events: all;
}

.abcom-loading__box {
    background-color: #ffffff;
    border-radius: 1rem;
    padding: 2.5rem 3rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    min-width: 280px;
    max-width: 90%;
}

.abcom-loading__spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: abcom-spin 0.8s linear infinite;
}

.abcom-loading__text {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
    text-align: center;
    line-height: 1.6;
}

@keyframes abcom-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}