/* ====================================
   1. 変数定義 (:root)
   ==================================== */
:root {
    /* 色設定 */
    --color-primary: #333;
    --color-accent: #fccf00;	/* ヤマト運輸系イエロー */
    --color-bg: #f0f0f0;		/* 全体の背景色 */
    --color-white: #fff;
    --color-text: #333;
    --color-text-light: #777;
    --color-border: #ccc;
    --color-error: #d90000;

    /* サイズ・形状 */
    --radius-card: 2.5rem;									/* 40px */
    --radius-btn: 0.5rem;									/* 8px */
    --shadow-card: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.08);	/* 変更: 0 8px 20px -> 0 0.5rem 1.25rem */
}

/* ====================================
   2. 基本リセット & ベーススタイル
   ==================================== */
* {
    box-sizing: border-box; /* paddingを含めて幅計算 */
    margin: 0;
    padding: 0;
}

body {
    /* 画面の高さを最低でも100vh(画面一杯)確保する */
    min-height: 100vh;
    min-width: 20rem;			/* 変更: 320px -> 20rem */
    overflow-wrap: break-word;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Hiragino Sans", "Yu Gothic Medium", "YuGothicM", "Yu Gothic",
        "YuGothic", Meiryo, sans-serif;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);

    /* スティッキーフッター実装（親） */
    display: flex;
    flex-direction: column;
}

/* リンクの基本設定 */
a {
    text-decoration: none;
    color: var(--color-text);
    transition: opacity 0.2s;
}

a:hover {
    opacity: 0.8;
}

/* 画像の基本設定 */
img {
    max-width: 100%;       /* はみ出し防止 */
    vertical-align: bottom; /* 下の隙間除去 */
}

/* リストの基本設定 */
ul {
    list-style: none;
}

/* フォーム要素のフォント継承 */
input, button, select, textarea {
    font-family: inherit;
}

/* プレースホルダーの色 */
::placeholder {
    color: #bbb;
    opacity: 1;
}

/* ====================================
   3. レイアウト共通 (Header / Main / Footer)
   ==================================== */

/* スティッキーフッター実装（子）：余った領域を埋める */
main {
    flex: 1;
}

/* 中央寄せレイアウト用クラス
   (ログイン画面やエラー画面など、画面中央に配置したい場合に使用) */
.layout-centered {
    display: flex;
    justify-content: center;	/* 左右中央 */
    align-items: center;		/* 上下中央 */
    padding: 2.5rem 1.25rem;	/* 変更: 40px 20px -> 2.5rem 1.25rem スマホ等での余白確保 */
    flex-direction: column;		/* ！バグらないか注意！ */
}

/* ====================================
   4. 共通コンポーネント
   ==================================== */

/* --- 白いカード (コンテンツボックス) --- */
.card-container {
    background-color: var(--color-white);
    padding: 2.5rem 3.125rem;			/* 変更: 40px 50px -> 2.5rem 3.125rem */
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    width: 100%;
    text-align: center;
    margin: 0 auto;						/* block要素として使う場合の中央寄せ */
}

/* --- フォーム行 (Label + Inputエリア) --- */
.form-group {
    display: flex;
    align-items: flex-start;	/* ラベルと入力欄を上端で揃える */
    margin-bottom: 1.25rem;		/* 変更: 20px -> 1.25rem */
    text-align: left;
}

/* --- ラベル（共通設定） --- */
.form-group label {
    width: 9em;
    font-weight: bold;
    font-size: 0.875rem;		/* 変更: 14px -> 0.875rem */
    flex-shrink: 0;
    margin-top: 0.75rem;		/* 変更: 12px -> 0.75rem */
    padding-right: 0.625rem;	/* 変更: 10px -> 0.625rem */
}

/* --- 入力欄とエラーの縦積みラッパー --- */
.input-wrapper {
    flex-grow: 1; /* 残りの幅をすべて使う */
    display: flex;
    flex-direction: column;
}

/* --- 入力フィールドの基本デザイン --- */
.form-input-base {
    width: 100%;
    padding: 0.625rem 0.75rem;				/* 変更: 10px 12px -> 0.625rem 0.75rem */
    font-size: 1rem;						/* 変更: 16px -> 1rem */
    border: 1px solid var(--color-border);
    background-color: #f5f5f5;
    border-radius: 0.375rem;				/* 変更: 6px -> 0.375rem */
    color: var(--color-text);
    font-family: inherit;
    transition: all 0.2s;					/* 色の変化を滑らかに */
    border: 2px solid transparent;			/* 枠線のスペースを確保してガタツキ防止 */
}

/* 入力中(フォーカス時): 黒枠線 */
.form-input-base:focus {
    border-color: var(--color-text); /* #333 */
}

/* --- プルダウン (共通設定) --- */
.form-select-base {
    padding: 0.625rem 0.75rem;				/* 変更: 10px 12px -> 0.625rem 0.75rem 内側の余白 (入力欄と合わせる) */
    font-size: 1rem;						/* 変更: 16px -> 1rem 文字サイズ */
    color: var(--color-text);
    background-color: #fff;					/* 背景色は白 */
    border: 1px solid var(--color-border);	/* 薄いグレーの枠線 */
    border-radius: 0.375rem;				/* 変更: 6px -> 0.375rem 角丸 */
    cursor: pointer;						/* カーソルを指マークにする */
    /* ブラウザ標準のスタイルを維持しつつ調整 */
    appearance: auto;
    line-height: 1.5;
}

/* フォーカス時（クリックして開いている時） */
.form-select-base:focus {
    outline: none;
    border-color: var(--color-primary); /* 枠線を濃くする（黒/ダークグレー） */
}

/* --- 本文メッセージ --- */
.info-text {
	text-align: center;
	font-size: 0.875rem;		/* 変更: 14px -> 0.875rem */
	line-height: 1.7;
	color: var(--color-text);
	margin-bottom: 1.875rem;	/* 変更: 30px -> 1.875rem */
	font-weight: 500;
}

/* --- エラーメッセージ --- */
.error-text {
    color: var(--color-error);
    font-size: 0.8125rem;	/* 変更: 13px -> 0.8125rem */
    font-weight: bold;
    margin-top: 0.3125rem;	/* 変更: 5px -> 0.3125rem */
    line-height: 1.4;
    text-align: left;
}

/* --- ボタンエリア（共通） --- */
.button-area {
    margin-top: 1.875rem;		/* 変更: 30px -> 1.875rem */
    display: flex;
    justify-content: center;
    gap: 2.5rem;				/* 変更: 40px -> 2.5rem */
    margin-top: auto;
}

/* --- ボタン（共通設定） --- */
.btn-primary,
.btn-secondary {
    font-size: clamp(0.875rem, 4vw, 1rem);			/* 変更: 14px -> 0.875rem, 16px -> 1rem */
    padding: 0.75rem clamp(0.9375rem, 5vw, 2.5rem);	/* 変更: px -> rem */
    font-weight: bold;
    border-radius: var(--radius-btn);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;	/* 色の変化も滑らかに */
    display: inline-block;
    min-width: min(15rem, 100%);					/* 変更: 240px -> 15rem */
    text-decoration: none;
    text-align: center;								/* 文字数が少ない時に中央寄せ */
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
    border: 1px solid var(--color-primary);
}

.btn-secondary {
    background-color: var(--color-white);
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

.btn-primary:hover {
    background-color: #555;
}

/* ====================================
   5. ヘッダー・フッター専用パーツ
   ==================================== */
/* --- ヘッダー --- */
header {
	background-color: #fff;
	padding: 0.625rem 1.875rem;								/* 変更: 10px 30px -> 0.625rem 1.875rem */
	width: 100%;
	box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.08);	/* 変更: 3px 6px -> 0.1875rem 0.375rem 下に落ちる影 */
	flex-shrink: 0;											/* 画面が狭くてもヘッダーが潰れないようにする */
	position: relative;										/* 影をコンテンツより手前に表示するため */
	z-index: 1;												/* 影をコンテンツより手前に表示するため */
	/* 中身の配置（ロゴとログアウトボタン等を左右端に分ける） */
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* ヘッダーロゴ */
.header-logo img {
    height: 3.75rem;		/* 変更: 60px -> 3.75rem */
    width: auto;			/* 幅はなりゆき（比率維持） */
    vertical-align: middle;
}

/* --- ヘッダーナビゲーション (右側エリア) --- */
.header-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;			/* 変更: 24px -> 1.5rem アイテム同士の間隔 */
}

/* ナビゲーションアイテム（リンク） */
.nav-item {
    display: flex;
    flex-direction: column;		/* アイコン(上)と文字(下)を縦並びにする */
    align-items: center;		/* 左右中央揃え */
    gap: 0.3125rem;				/* 変更: 5px -> 0.3125rem アイコンと文字の間隔 */
    font-size: 0.75rem;			/* 変更: 12px -> 0.75rem */
    font-weight: bold;
    color: var(--color-text);	/* 変数を使用 (#333) */
}

/* ナビゲーションアイコン画像 */
.nav-icon {
    height: 1.5rem;	/* 変更: 24px -> 1.5rem */
    width: auto;
}

/* --- フッター --- */
footer {
	background-color: #fff;
	padding: 1.875rem 2.5rem;								/* 変更: 30px 40px -> 1.875rem 2.5rem */
	width: 100%;
	margin-top: auto;										/* スティッキーフッター（念の為） */
	box-shadow: 0 -0.1875rem 0.375rem rgba(0, 0, 0, 0.08);	/* 変更: -3px 6px -> -0.1875rem 0.375rem 上に伸びる影 */
	flex-shrink: 0;											/* 画面が狭くてもフッターが潰れないようにする */
}

/* フッターリンク集 (2列レイアウト用) */
.footer-links {
    display: flex;
    flex-wrap: wrap;	/* 折り返し有効 */
    gap: 1.25rem;		/* 変更: 20px -> 1.25rem */
    max-width: 37.5rem;	/* 変更: 600px -> 37.5rem */
}

/* フッターリンク個別の箱 */
.footer-link-box {
    /* (100% / 2) - (隙間20px(1.25rem) / 2) */
    width: calc(50% - 0.625rem);	/* 変更: 10px -> 0.625rem */
    padding: 0.625rem 0.9375rem;	/* 変更: 10px 15px -> 0.625rem 0.9375rem */
    font-size: 0.875rem;			/* 変更: 14px -> 0.875rem */
    font-weight: bold;
    text-align: left;
    border-radius: 0.25rem;			/* 変更: 4px -> 0.25rem */
    transition: color 0.2s;
	color: var(--color-text);		/* 念の為色指定 */
}

.footer-link-box:hover {
    color: var(--color-text-light); /* ホバー時にうっすらグレー */
}

/* コピーライト */
.copyright {
    text-align: right;
    font-size: 0.75rem;		/* 変更: 12px -> 0.75rem */
    color: #777;
    margin-top: 1.25rem;	/* 変更: 20px -> 1.25rem */
}

/* 黄色下線のページタイトル */
.page-title {
	font-size: 1.5rem;									/* 変更: 24px -> 1.5rem */
	font-weight: bold;
	color: var(--color-text);							/* #333 */
	padding-bottom: 0.625rem;							/* 変更: 10px -> 0.625rem */
	border-bottom: 0.1875rem solid var(--color-accent);	/* 変更: 3px -> 0.1875rem #fccf00 */
	margin-bottom: 1.25rem;								/* 変更: 20px -> 1.25rem */
	text-align: left;
	width: 95%;											/* 画面端に少し隙間を作る */
}

/* 以下、各画面固有のCSS */

/* ====================================
   パスワード設定画面（PC00201）
   ==================================== */
/* 注釈メッセージのスタイル */
.input-note {
	font-size: 0.75rem;	/* 変更: 12px -> 0.75rem */
	color: #333;		/* 文字色 (必要に応じて赤色 #d90000 等に変更可) */
	margin-top: 0.5rem;	/* 変更: 8px -> 0.5rem */
	line-height: 1.5;
}

/* ====================================
   ログイン画面（LG00101）
   ==================================== */
/* パスワードリセットURL */
.forgot-password {
	text-align: center;
	margin-top: 0.75rem;	/* 変更: 12px -> 0.75rem */
}

.forgot-password a {
	font-size: 0.875rem;		/* 変更: 14px -> 0.875rem */
	color: var(--color-text);	/* 変更: black -> var(--color-text) */
	font-weight: bold;
	text-decoration: underline;
}

/* ====================================
   ダッシュボード画面（LG00103）
   ==================================== */
/* カードを囲む外枠 */
.menu-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;			/* カードが増えた時に折り返す設定 */
    gap: 2.5rem;				/* 変更: 40px -> 2.5rem */
    width: 100%;
    max-width: 56.25rem;		/* 変更: 900px -> 56.25rem */
    padding: 0 1.25rem;			/* 変更: 20px -> 1.25rem */
}

/* 個別のメニューカード */
.menu-card {
    display: block;
    flex-basis: 25rem;			/* 変更: 400px -> 25rem カードの基本幅 */
    background-color: #fff;
    padding: 3.75rem 2.5rem;	/* 変更: 60px 40px -> 3.75rem 2.5rem */
    /* 共通変数を適用 */
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    color: var(--color-text);
    text-decoration: none;
    position: relative;
    transition: background-color 0.2s, transform 0.2s;
}

/* マウスが乗った時の動き */
.menu-card:hover {
    background-color: #f9f9f9;
    transform: translateY(-0.125rem);	/* 変更: -2px -> -0.125rem ホバー時に少しだけ浮き上がらせる */
}

/* カード内のタイトル */
.menu-card h2 {
    font-size: 1.25rem;			/* 変更: 20px -> 1.25rem */
    margin-bottom: 0.75rem;		/* 変更: 12px -> 0.75rem */
    color: var(--color-text);
}

/* カード内の説明文 */
.menu-card p {
    font-size: 0.875rem;		/* 変更: 14px -> 0.875rem */
    color: var(--color-text);	/* または --color-text-light */
    line-height: 1.6;
    padding-right: 2.5rem;		/* 変更: 40px -> 2.5rem 矢印と被らないように少し広めに */
}

/* CSSで作る矢印アイコン (最適化版) */
.menu-card .arrow-icon {
    position: absolute;
	right: 2.5rem;						/* 変更: 40px -> 2.5rem */
    top: 50%;
    /* 箱のサイズを指定 */
	width: 1.25rem;						/* 変更: 20px -> 1.25rem */
    height: 20px;
    /* 右と下の枠線だけで矢印を作る */
	border-right: 0.375rem solid #555;	/* 変更: 6px -> 0.375rem */
    border-bottom: 0.375rem solid #555;	/* 変更: 6px -> 0.375rem */
    /* 45度回転させて「＞」の形にし、Y軸(垂直)のズレを補正 */
    transform: translateY(-50%) rotate(-45deg);
}

/* ヘッダーのログアウトボタン */
.logout-button {
    background-color: #fccf00;
    color: #333;
    font-weight: bold;
    font-size: clamp(0.75rem, 4vw, 1rem);				/* 変更: px -> rem */
    text-decoration: none;
    padding: 0.625rem clamp(0.625rem, 6vw, 1.875rem);	/* 変更: px -> rem */
    border-radius: 0.5rem;								/* 変更: 8px -> 0.5rem 角丸 */
    display: inline-block;
    transition: opacity 0.2s;
    line-height: 1;
    /* iOS対策 (安全です) */
    -webkit-appearance: none;
    appearance: none;
    background-image: none;
    border: none;
}

.logout-button:hover {
    opacity: 0.8; /* ホバー時に少し薄くする */
}

/* ====================================
   登録一覧出力画面（RL00101）
   ==================================== */
.form-rl {
    flex-direction: column;
	gap: 0.625rem;			/* 変更: 10px -> 0.625rem */
	margin-left: 7.5rem;	/* 変更: 120px -> 7.5rem */
}

.error_message_area {
	font-size: 0.9375rem;	/* 変更: 15px -> 0.9375rem */
	padding-left: 0;
	text-align: left;
	margin-left: 7.5rem;	/* 変更: 120px -> 7.5rem */
}

/* 外側の箱：高さの確保とFlexbox化 */
.card-container#reserve-list-container {
    width: 95%;
    min-height: 25rem;		/* 変更: 400px -> 25rem 箱の最低高さを確保 */
    display: flex;			/* 中身を操作できるようにする */
    flex-direction: column;	/* 縦並びにする */
}

/* 中のフォーム：実際に伸び縮みする主役 */
#downloadForm {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex-grow: 1;
}

.form-select-base#reserveDate {
	width: 15rem;		/* 変更: 240px -> 15rem */
    max-width: 100%;
}

/* ====================================
   発送情報登録画面（SR00101）
   ==================================== */
header .header-sr  {
	height: 3.75rem;			/* 変更: 60px -> 3.75rem */
	width: 100%;
	display: flex;
    justify-content: center;
    align-items: center;
}

header .header-company-name {
	font-size: 1.25rem;				/* 変更: 20px -> 1.25rem */
	font-weight: bold;
	color: var(--color-primary);
}

/* --- フォーム箇所 --- */
.form-section {
	margin-top: 0.9375rem;	/* 変更: 15px -> 0.9375rem */
}

.form-section-title {
    font-size: 1.25rem;									/* 変更: 20px -> 1.25rem */
    font-weight: bold;
    color: var(--color-primary);
    border-bottom: 0.125rem solid var(--color-primary);	/* 変更: 2px -> 0.125rem */
    padding: 0 0.3125rem 0.5rem;						/* 変更: 5px 8px -> 0.3125rem 0.5rem */
    margin: 0 -0.625rem 1.5625rem;						/* 変更: -10px 25px -> -0.625rem 1.5625rem */
}

.form-row-complex label {
    display: block;
    font-weight: bold;
    font-size: 1rem;			/* 変更: 16px -> 1rem */
    margin-block: 0.375rem;		/* 変更: 6px -> 0.375rem */
    color: var(--color-text);
}

.form-inputs-group {
    display: flex;
    align-items: center;
    width: 100%;
    flex-grow: 1;
    gap: 0.625rem;			/* 変更: 10px -> 0.625rem */
}

.form-section .form-input-base {
	background-color: #fff !important;
	border: 1px solid #ccc !important;
}

.form-row-short {
    /* 通常時の幅制限 */
    width: 100%;			/* 基本は親に合わせるが */
    max-width: 18.75rem;	/* 変更: 300px -> 18.75rem 300px以上にはならない */
    /* 横並び（Flexbox内）に入ったときの挙動 */
    flex: 0 1 18.75rem;		/* 変更: 300px -> 18.75rem */
}

.radio-option-card {
    /* ボックスモデルと配置 */
    display: block;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 1.25rem;						/* 変更: 20px -> 1.25rem */
    padding: 1.5625rem 1.25rem 1.25rem 1.25rem;	/* 変更: 25px 20px -> 1.5625rem 1.25rem */
    background-color: var(--color-white);
    border: 1px solid var(--color-text);		/* #333 */
    border-radius: 0.5rem;						/* 変更: 8px -> 0.5rem var(--radius-btn) と同じ値 */
}

.radio-option-content {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 0.3125rem 0.9375rem 0.9375rem 2rem;	/* 変更: 5px 15px 15px 32px -> 0.3125rem 0.9375rem 0.9375rem 2rem */
	font-size: 0.875rem;							/* 変更: 14px -> 0.875rem */
	color: #333;
	line-height: 1.6;
}

.form-row-container {
    display: flex;			/* 横並びにする */
    width: 100%;			/* 横幅を親要素いっぱいにする */
    gap: 1.25rem;			/* 変更: 20px -> 1.25rem 「集荷希望日」と「希望時間帯」の間の隙間 */
    align-items: flex-end;	/* (任意) ラベルの高さが違う場合に下揃えにする */
    margin-top: 1.125rem;	/* 変更: 18px -> 1.125rem */
    margin-bottom: 1.25rem;	/* 変更: 20px -> 1.25rem */
}

.form-row-container .form-row-complex {
    flex: 1;                /* 余ったスペースを均等に分け合う（重要） */
    width: 100%;            /* 幅を確保 */
}

/* 必須バッジ */
.form-row-complex .badge-required {
    /* display: inline-block; */
    margin-left: 0.5rem;			/* 変更: 8px -> 0.5rem */
    vertical-align: middle;
	background-color: #fccf00;		/* 黄色 */
	color: #333;
	font-size: 0.75rem;				/* 変更: 12px -> 0.75rem */
	font-weight: bold;
	padding: 0.1875rem 0.875rem;	/* 変更: 3px 14px -> 0.1875rem 0.875rem */
	border-radius: 0.6875rem;		/* 変更: 11px -> 0.6875rem */
}

/* 各社ロゴ画像 */
.form-section .logos  {
	display: flex;			/* 横並びに整列 */
	flex-wrap: wrap;		/* 画面が狭いと折り返す */
	gap: 0.9375rem;			/* 変更: 15px -> 0.9375rem */
	margin-top: 1.125rem;	/* 変更: 18px -> 1.125rem 上の文章との隙間 */
	width: 100%;
}

/* 各社ロゴ画像 */
.form-section .radio-label-title img,
.form-section .logos img {
    height: 3.125rem;		/* 変更: 50px -> 3.125rem */
    width: auto;			/* 横幅は自動（比率維持） */
    object-fit: contain;	/* 画像が歪まないようにする */
    margin: 0;				/* 余計な隙間をリセット */
}

/* デフォルトのラジオボタンは非表示 */
.radio-option-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* ラベルタイトル (クリック領域) */
.radio-label-title {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    font-size: 1rem;			/* 変更: 16px -> 1rem */
    font-weight: bold;
    line-height: 1.5;
    color: var(--color-text);
    cursor: pointer;
}

/* カスタムラジオボタン (二重丸の外側) */
.radio-label-title::before {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 1.125rem;						/* 変更: 18px -> 1.125rem */
    height: 1.125rem;						/* 変更: 18px -> 1.125rem */
    margin-right: 0.625rem;					/* 変更: 10px -> 0.625rem */
    background-color: var(--color-white);
    border: 2px solid #aaa;					/* または var(--color-border) */
    border-radius: 50%;
    box-sizing: border-box;
}

/* 選択時のデザイン (二重丸の内側) */
.radio-option-card input[type="radio"]:checked + .radio-label-title::before {
    background-color: var(--color-text);
    border-color: var(--color-text);
    box-shadow: inset 0 0 0 0.1875rem var(--color-white);	/* 変更: 3px -> 0.1875rem */
}

.button-warning-text {
	text-align: center;
	color: #FF0000; /* 赤色 */
	font-weight: bold;
	margin-top: 0.9375rem;	/* 変更: 15px -> 0.9375rem */
	font-size: 0.875rem;	/* 変更: 14px -> 0.875rem */
}

.margin-sr {
	height: 1.25rem;	/* 変更: 20px -> 1.25rem */
}

.link-default-underline {
	text-decoration: underline; /* 下線を表示 */
}

/* --- 以下、エラーポップアップ --- */
.popup-overlay {
    /* --- 配置とサイズ --- */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;

    /* --- 背景スタイル --- */
    background-color: rgba(0, 0, 0, 0.4);

    /* --- 表示切り替えとアニメーション --- */
    /* 初期状態は非表示 */
    display: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* 表示時に .is-visible クラスを付与 */
.popup-overlay.is-visible {
    /* 表示時のみ Flexbox を有効にして中央揃え */
    display: flex;
    justify-content: center;
    align-items: center;

    opacity: 1;
}

/* ポップアップ本体 */
.popup-content {
    background-color: var(--color-white);
    border-radius: var(--radius-card);					/* 40px */
    color: var(--color-text);
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.15);	/* 変更: 8px 20px -> 0.5rem 1.25rem */
    width: 100%;
    max-width: 28.75rem;								/* 変更: 460px -> 28.75rem */
    padding: 2.1875rem 3.125rem 2.5rem;					/* 変更: 35px 50px 40px -> 2.1875rem 3.125rem 2.5rem */
    text-align: center;
    transform: scale(0.9);
    transition: transform 0.2s ease;
    /* スクロール対応 */
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* 表示時の拡大アニメーション */
.popup-overlay.is-visible .popup-content {
    transform: scale(1);
}

/* 1. アイコン (赤丸にバツ) */
.popup-icon {
    width: 5rem;							/* 変更: 80px -> 5rem */
    height: 5rem;							/* 変更: 80px -> 5rem */
    background-color: var(--color-error);	/* #d90000 */
    border-radius: 50%;
    margin: 0 auto 1.5625rem;				/* 変更: 25px -> 1.5625rem */
    display: flex;
    justify-content: center;
    align-items: center;
}

.popup-icon img.popup-error-icon {
    width: 2rem;	/* 変更: 32px -> 2rem */
    height: 2rem;	/* 変更: 32px -> 2rem */
}

/* 2. タイトル */
.popup-title {
    font-size: 1.25rem;			/* 変更: 20px -> 1.25rem */
    font-weight: bold;
    color: var(--color-text);	/* #333 */
    margin-bottom: 1.25rem;		/* 変更: 20px -> 1.25rem */
}

/* 3. エラーメッセージ */
.popup-message {
    font-size: 1rem;			/* 変更: 16px -> 1rem */
    font-weight: bold;
    margin-bottom: 1.875rem;	/* 変更: 30px -> 1.875rem */
}

/* 4. ボタン */
.popup-button {
    /* ベーススタイルは btn-primary 等が適用される前提 */
    display: inline-block;
    width: auto;				/* 幅固定を解除 */
    min-width: auto;			/* 必要に応じて共通CSSの min-width も解除 */
    padding-left: 3.125rem;		/* 変更: 50px -> 3.125rem */
    padding-right: 3.125rem;	/* 変更: 50px -> 3.125rem */
}

/* ====================================
   発送情報登録完了画面（SR00102）
   ==================================== */
.completion-icon {
	width: 5rem;							/* 変更: 80px -> 5rem */
	height: 5rem;							/* 変更: 80px -> 5rem */
	background-color: #333;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0.625rem auto 1.5625rem auto;	/* 変更: 10px 25px -> 0.625rem 1.5625rem */
	text-align:center;
	margin-bottom: 1.25rem;					/* 変更: 20px -> 1.25rem */
}
/* チェック画像 */
.completion-check {
	height: 3.5rem;			/* 変更: 56px -> 3.5rem 高さを固定 */
    width: auto;			/* 横幅は自動（比率維持） */
    object-fit: contain;	/* 画像が歪まないようにする */
    margin: 0;				/* 余計な隙間をリセット */
}

.completion-title {
	font-size: 1.5rem;				/* 変更: 24px -> 1.5rem */
	font-weight: bold;
	text-align: center;
	color: #333;
	margin-bottom: 25px;
    width: 100%;
    margin: 0 auto 1.25rem auto;	/* 変更: 20px -> 1.25rem */
}

.completion-text {
	font-size: 0.875rem;			/* 変更: 14px -> 0.875rem */
	line-height: 1.7;
	color: #333;
	margin-bottom: 30px;
	font-weight: 500;
	text-align: left;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto 1.875rem auto;	/* 変更: 30px -> 1.875rem */
	padding-left: 0px;
}

.completion-text a {
	color: #0056b3;
	text-decoration: underline;
}

/* グレーの情報ボックス */
.info-box-gray {
	background-color: #f0f0f0;
	border-radius: 0.75rem;			/* 変更: 12px -> 0.75rem */
	padding: 1.5625rem 1.875rem;	/* 変更: 25px 30px -> 1.5625rem 1.875rem */
	max-width: 46.875rem;			/* 変更: 750px -> 46.875rem */
	margin: 0 auto;
}

.info-box-title {
	font-size: 1rem;			/* 変更: 16px -> 1rem */
	font-weight: bold;
	color: #333;
	margin-bottom: 0.9375rem; 	/* 変更: 15px -> 0.9375rem */
	text-align: center;
}

.info-list {
	padding-left: 1.25rem;		/* 変更: 20px -> 1.25rem 番号(1, 2, 3) のためのスペース */
	font-size: 0.8125rem;		/* 変更: 13px -> 0.8125rem */
	color: #555;
	line-height: 1.8;
    overflow-wrap: anywhere;
    word-break: break-word;		/* 念のための互換性用 */
    margin-bottom: 0px;
    text-align: left;
}

/* ===============
   エラー画面共通
   =============== */
/* タイトル (赤文字) */
.error-title {
	color: #ff0000;
	font-size: 1.375rem;	/* 変更: 22px -> 1.375rem */
	font-weight: bold;
	margin-bottom: 2.5rem;	/* 変更: 40px -> 2.5rem */
}

/* エラー説明文 */
.error-info-text {
	display: inline-block;
	text-align: left;
	max-width: 100%;
	box-sizing: border-box;
	overflow-wrap: break-word;
	font-size: 0.875rem;		/* 変更: 14px -> 0.875rem */
	line-height: 1.7;
	color: var(--color-text);
	margin-bottom: 1.875rem;	/* 変更: 30px -> 1.875rem */
	font-weight: 500;
}

/* サブタイトル (赤文字) */
.error-title-sub {
	color: #ff0000;			/* 赤色 */
	font-size: 1rem;		/* 変更: 16px -> 1rem */
	font-weight: bold;
	margin-bottom: 1.25rem;	/* 変更: 20px -> 1.25rem */
}

/* グレーの箱の調整 */
.error-details-box {
	text-align: left;			/* 箱の中身は左揃え */
	margin-bottom: 1.875rem;	/* 変更: 30px -> 1.875rem */
	line-height: 1.8;
	border-radius: 0;
	max-width: 36.25rem;		/* 変更: 580px -> 36.25rem */
	margin-left: auto;
	margin-right: auto;
}

.error-details-box ul {
	margin: 0.625rem 0 1.25rem 1.25rem;	/* 変更: 10px 20px -> 0.625rem 1.25rem リストのインデント調整 */
	font-size: 0.875rem;				/* 変更: 14px -> 0.875rem */
	list-style-type: disc;
}

.error-details-box li {
	margin-bottom: 0.3125rem;	/* 変更: 5px -> 0.3125rem */
}

.error-text a {
	color: #0056b3;
	text-decoration: underline;
}

/* ====================================
   ★ スマホ対応 (レスポンシブ)
   ==================================== */
@media screen and (max-width: 48rem) { /* 変更: 768px -> 48rem */

    /* フォームの行を縦積みに変更 */
    .form-group {
        flex-direction: column; /* 横並び解除 */
        align-items: stretch;   /* 子要素を横幅一杯に広げる */
    }

    /* ラベルの調整 */
    .form-group label {
        width: 100%;			/* 横幅いっぱいに広げる */
        margin-top: 0;			/* PC用の高さ調整をリセット */
        margin-bottom: 0.5rem;	/* 変更: 8px -> 0.5rem 入力欄との間に隙間を作る */
        padding-right: 0;		/* 右の余白は不要になるので削除 */
    }

    /* コンテナの余白も少し詰める */
    .card-container {
        padding: 3.125rem 1.875rem;	/* 変更: 50px 30px -> 3.125rem 1.875rem */
    }

    /* ヘッダー・フッターの余白もスマホ用に調整 */
    header, footer {
        padding-left: 1.25rem;	/* 変更: 20px -> 1.25rem */
        padding-right: 1.25rem;	/* 変更: 20px -> 1.25rem */
    }

    .form-rl {
    	margin-left: 0 !important;   /* PC用の左余白を強制削除 */
    }

    .error_message_area {
    	margin-left: 0 !important;	/* PC用の左余白を強制削除 */
    	margin-bottom: 1.25rem;		/* 変更: 20px -> 1.25rem */
    }

    .button-area {
    	flex-direction: column-reverse;
    	gap: 1.25rem;						/* 変更: 20px -> 1.25rem */
    	margin-top: 1.875rem !important;	/* 変更: 30px -> 1.875rem */
    }

    .form-row-container {
        display: block !important;
        width: auto !important;
    }

	.radio-option-content {
		padding: 0.3125rem 0.9375rem 0.9375rem 1.75rem;	/* 変更: 5px 15px 15px 28px -> 0.3125rem 0.9375rem 0.9375rem 1.75rem */
	}

    .margin-sr {
		height: 0;
	}

	.popup-content {
        width: 90%;
        max-width: none;			/* pc用の制限を解除 */
        padding: 1.875rem 1.25rem;	/* 変更: 30px 20px -> 1.875rem 1.25rem */
        /* 中身が溢れたらスクロールさせる */
        overflow-y: auto;
        border-radius: 1.25rem;		/* 変更: 20px -> 1.25rem */
    }

    .popup-icon {
        /* アイコンも少し小さくしてスペース節約 */
        width: 3.75rem;			/* 変更: 60px -> 3.75rem */
        height: 3.75rem;		/* 変更: 60px -> 3.75rem */
        margin-bottom: 1.25rem;	/* 変更: 20px -> 1.25rem */
    }

    .popup-icon img.popup-error-icon {
        width: 1.5rem;	/* 変更: 24px -> 1.5rem */
        height: 1.5rem;	/* 変更: 24px -> 1.5rem */
    }

	.form-section .radio-label-title img,
	.form-section .logos img {
	    height: 2.1875rem;	/* 変更: 35px -> 2.1875rem */
	}

	.form-section .logos  {
		gap: 0.9375rem;	/* 変更: 15px -> 0.9375rem ロゴ同士の間隔 */
	}

	.radio-option-card {
		padding: 1.25rem !important;	/* 変更: 20px -> 1.25rem */
	}

	.form-row-container {
		margin-bottom: 0px;
	}

	.layout-centered {
		padding: 1.25rem;	/* 変更: 20px -> 1.25rem */
	}

}