/* フォーム内の単位表示用スタイル */

/* 万円を表示するコンテナ */
.input-with-unit {
	position: relative;
	/*display: inline-block;*/
	display: flex;
	width: 100%;
}

/* 単位を右側に表示 */
.input-unit {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: #767676;
	pointer-events: none;
	font-size: 14px;
	line-height: 1;
}

/* 単位が表示される入力フィールドの右パディング調整 */
.input-with-unit .input-control {
	padding-right: 50px !important;
}

/* 総額ラベル付きの入力フィールド用 */
.login-wrap__plan-total .input-with-unit {
	/*width: calc(100% - 60px);*/
	/*display: inline-block;*/
	display: flex;
	vertical-align: middle;
}

/* 金融資産内訳のラベル幅統一（内訳項目のみ対象） */
.login-wrap__plan-item--02 .login-wrap__plan-total {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

/* MQLセクション: 金融資産内訳の左padding解除 */
.mql-section .login-wrap__plan-item--02 .login-wrap__plan-total {
	padding-left: 0;
}

.login-wrap__plan-item--02 .login-wrap__plan-total-ttl {
	flex: 0 0 140px; /* デフォルト幅 */
	margin-right: 15px;
	text-align: left;
}

/* 金融資産総額のreadonly属性フィールドを白背景に（対象4フォームのみ） */
.financial-total-readonly[readonly] {
	background-color: #ffffff !important;
	color: #333333 !important;
}

.login-wrap__plan-item--02 .input-with-unit {
	flex: 1;
}

/* 中サイズPC画面用のラベル幅調整 (1025px～1700px) */
@media (min-width: 1025px) and (max-width: 1700px) {
	.login-wrap__plan-item--02 .login-wrap__plan-total-ttl {
		flex: 0 0 150px; /* 中サイズPC画面では150px */
	}
}

/* 大サイズPC画面用のラベル幅調整 (1701px以上) */
@media (min-width: 1701px) {
	.login-wrap__plan-item--02 .login-wrap__plan-total-ttl {
		flex: 0 0 170px; /* 大サイズPC画面では170px */
	}
}

/* 総額ラベル付きでない単独フィールド用 */
.login-wrap__plan-total--02 .input-with-unit {
	width: 100%;
}

.login-wrap__plan-total input{
	margin-right: 0;
	margin-left: clamp(10px, 0.6944vw, 13px);
}

.login-wrap__plan-total input[type="checkbox"]{
	margin-right: clamp(10px, 0.6944vw, 13px);
	margin-left: clamp(10px, 0.6944vw, 13px);
}

.login-wrap__plan-total--02 input{
	margin-right: 0 !important;
	margin-left: 0 !important;
}

/* プロフィール登録ページ用のスタイル */
.login-wrap__form-box .input-with-unit {
	position: relative;
	display: flex;
	width: 100%;
}

.login-wrap__form-box .input-with-unit .input-control {
	padding-right: 50px !important;
}

.login-wrap__form-box .input-unit {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: #767676;
	pointer-events: none;
	font-size: 14px;
	line-height: 1;
}

/* 「総額」ラベル付きの場合の調整 */
.login-wrap__form-box .txt:first-child {
	flex-shrink: 0;
	margin-right: 10px;
}

.login-wrap__form-box .input-with-unit {
	flex: 1;
}

/* MemberMql用の投資目的の文字表示アップデート用 */
.ci_investment_purpose_font_size_update {
	font-size: clamp(1.2rem, 0.86vw, 1.5rem);
	line-height: 2.5;
}

/* フロント用の投資目的の文字表示アップデート */
.ci_investment_purpose_font_size_update_interview_adviser {
	font-size: clamp(1.2rem, 0.86vw, 2.0rem);
	line-height: 2.5;
}

/* 個人情報の取り扱いセクション用のレスポンシブスタイル */
.privacy-policy-section {
	margin: 0 auto;
	padding: 30px 40px 50px 40px;
	max-width: 750px;
	background-color: #ffffff;
	text-align: left;
}

/* TOKITA-838: MQL画面の重要事項セクション */
.mql-form-container ~ .privacy-policy-section {
	max-width: 825px;
	padding: 0px 40px 50px 40px;
}

.privacy-policy-section h3 {
	font-size: 26px;
	font-weight: bold;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
}

.privacy-policy-section .icon {
	margin-right: 8px;
}

.privacy-policy-content {
	font-size: 18px;
	line-height: 1.8;
	color: #333;
	text-align: left;
}

.privacy-policy-content p {
	margin-bottom: 15px;
}

.privacy-policy-content a {
	color: #0066cc;
	text-decoration: none;
}

.privacy-policy-content a:hover {
	text-decoration: underline;
}

.privacy-policy-checkbox {
	margin-top: 20px;
}

.privacy-policy-checkbox span {
	font-size: 18px;
}

.privacy-policy-checkbox .required {
	color: #e74c3c;
	font-weight: bold;
	margin-left: 5px;
}

/* モバイル対応 */
@media (max-width: 767px) {
	.privacy-policy-section {
		padding: 20px 15px 30px 15px;
		max-width: 100%;
	}
	
	.privacy-policy-section h3 {
		font-size: 20px;
		margin-bottom: 15px;
	}
	
	.privacy-policy-content {
		font-size: 14px;
		line-height: 1.6;
	}
	
	.privacy-policy-content p {
		margin-bottom: 12px;
	}
	
	.privacy-policy-checkbox span {
		font-size: 12px;
		padding-top: 4px;
	}
	
	.privacy-policy-checkbox .required {
		margin-left: 3px;
	}
}

/* タブレット対応 */
@media (min-width: 768px) and (max-width: 1024px) {
	.privacy-policy-section {
		padding: 25px 30px 40px 30px;
	}
	
	.privacy-policy-section h3 {
		font-size: 22px;
	}
	
	.privacy-policy-content {
		font-size: 16px;
	}
	
	.privacy-policy-checkbox span {
		font-size: 16px;
	}
}

/* ===== TOKITA-838: MQLフォーム デザイン変更 ===== */

/* MQL画面のみ .inner の max-width を調整（中央寄せ＋横幅指定で余白を作る） */
/* セレクタ: .mql-redesign クラス配下に限定し他画面に影響させない */
.mql-redesign .sec-document .inner {
	max-width: clamp(800px, 43.333vw, 1200px);
	margin: 0 auto;
}

.mql-redesign .sec-login .inner--1000 {
	max-width: clamp(800px, 53.444vw, 1200px);
	padding-top: clamp(2vw, 3vw, 4vw);
}

/* MQL画面のページタイトル（h1）のフォントサイズ調整 */
.mql-redesign .c-ttl__03 {
	font-size: clamp(2.7rem, 1.9056vw, 3.6rem);
}

/* MQLセクション入力欄のプレースホルダー色 */
.mql-section input.input-control::placeholder {
	color: #A6A6A6;
}
.mql-section input.input-control::-webkit-input-placeholder {
	color: #A6A6A6;
}

/* MQL冒頭部分のセクション見出し（［セッション概要］等） */
.mql-intro-heading {
	font-size: clamp(1.7rem, 1.1056vw, 2.2rem);
}

/* login-wrapの横幅を26分割ベースで中央寄せ（paddingではなくmax-widthで余白を作る） */
.login-wrap.mql-form-container {
	max-width: calc(11 / 26 * 100%);
	margin: 0 auto;
	padding-bottom: 0;
	padding-top: clamp(60px, 3.208vw, 100px);
}

/* セッション予約の日程選択をフォーム内の入力欄と同じ横幅にする */
.mql-session-booking {
	max-width: calc(10 / 26 * 100%);
	margin: 10px 0 0 0;
	text-align: left;
}

@media screen and (max-width: 834px) {
	.login-wrap.mql-form-container {
		max-width: calc(24 / 26 * 100%);
	}
	.mql-session-booking {
		max-width: calc(24 / 26 * 100%);
	}
}

/* セクション区切り線（線はコンテンツ横幅いっぱい） */
.mql-section {
	border-bottom: 1px solid #BFBFBF;
	/* padding-bottom: 25px; */
	margin-bottom: 25px;
}
.mql-section:last-child {
	border-bottom: none;
}

/* セクション内の項目（ラベル・入力欄等）に左右余白を追加 */
/* 区切り線はmql-sectionのborder-bottomで全幅、中身だけインデント */
.mql-section > h3,
.mql-section > h4,
.mql-section > .login-wrap__plan-item,
.mql-section > .login-wrap__plan-item--02 {
	padding-left: clamp(8px, 0.75vw, 13px);
	padding-right: clamp(8px, 0.75vw, 13px);
}

/* セクション見出し */
.mql-section-title {
	font-weight: bold;
	font-size: clamp(1.4rem, 1.1vw, 1.9rem);
	color: #000000;
	margin-bottom: 20px;
	padding-top: 5px;
}

/* セクション見出し（h3）をラベルより少し大きく */
.mql-section > h3 {
	font-size: clamp(1.6rem, 1.1vw, 2.1rem);
}

/* 確認画面: セクションタイトルを太字・大きめに */
#page-consultation_application_form_confirm .mql-section > h3 {
	font-size: clamp(1.8rem, 1.3vw, 2.4rem);
	font-weight: bold;
	color: #000000;
}

/* 確認画面: セクション区切り線を非表示 */
#page-consultation_application_form_confirm .mql-section {
	border-bottom: none;
}

/* MQL画面：チェックボックスのチェック時の色を変更 */
.mql-redesign .pure-input input[type=checkbox]:checked + span:before {
	background: #0075ff;
}

/* MQL画面：項目ラベル・選択肢・内訳ラベルの文字色を黒に（必須マークは赤のまま） */
.mql-section .login-wrap__plan-label,
.mql-section .login-wrap__plan-total-ttl,
.mql-section .pure-input span,
.mql-section .ci_investment_purpose_font_size_update_interview_adviser,
.mql-section .decision-maker-list label,
.mql-section .investment-timing-list label,
.mql-section .input-unit {
	color: #000000;
}

/* サブセクション見出し */
.mql-subsection-title {
	font-weight: bold;
	font-size: clamp(1.2rem, 0.9vw, 1.6rem);
	color: #333333;
	margin-bottom: 15px;
	margin-top: 15px;
}

/* h2スタイル（h1とh3の中間） */
.sec-document h2,
.mql-h2 {
	font-size: clamp(1.6rem, 1.2vw, 2.2rem);
	font-weight: bold;
	margin-bottom: 15px;
	margin-top: 30px;
}

/* 冒頭部分の日程選択スタイル（灰色背景対応） */
.sec-document input[name="ci_interview_first"],
.sec-document select[name="ci_interview_first_hour"] {
	background-color: #FFFFFF;
	color: #7F7F7F;
	border-radius: clamp(7px, 0.486vw, 9px);
}

/* 冒頭部分のリンクを通常のリンク色にする */
.sec-document .document-box a {
	color: #0066cc;
	text-decoration: underline;
}

/* 冒頭部分のselectの外枠にも丸みを適用 */
.mql-session-booking .login-wrap__plan-select {
	border-radius: clamp(7px, 0.486vw, 9px);
	background: #FFFFFF;
}

/* 条件確認チェックのスタイル */
.condition-check-label {
	display: flex;
	align-items: center;
	cursor: pointer;
	font-weight: bold;
	margin-top: 15px;
}

.condition-check-label input[type="checkbox"] {
	appearance: auto;
	-webkit-appearance: checkbox;
	-moz-appearance: checkbox;
	width: 18px;
	height: 18px;
	margin-right: 10px;
}

/* TOKITA-838: フォーム無効化は送信前チェックのみで制御（readonly制御は行わない） */

/* 赤色テキスト */
.text-red {
	color: red;
}

/* 重要事項セクション */
.important-notice-section {
	margin: 0 auto;
	padding: 30px 40px 50px 40px;
	max-width: 750px;
	text-align: left;
}

.important-notice-section h3 {
	font-size: 22px;
	font-weight: bold;
	margin-bottom: 20px;
}

.important-notice-section ul {
	list-style: disc;
	padding-left: 20px;
	margin-bottom: 20px;
}

.important-notice-section ul li {
	font-size: 14px;
	line-height: 1.8;
	color: #333;
	margin-bottom: 5px;
}

.important-notice-section .detail-links {
	margin-top: 15px;
	margin-bottom: 20px;
}

.important-notice-section .detail-links ul {
	list-style: none;
	padding-left: 0;
}

.important-notice-section .detail-links ul li {
	margin-bottom: 8px;
}

.important-notice-section .detail-links a {
	color: #0066cc;
	text-decoration: none;
}

.important-notice-section .detail-links a:hover {
	text-decoration: underline;
}

.important-notice-checkbox {
	margin-top: 20px;
}

.important-notice-checkbox label {
	display: flex;
	align-items: center;
	cursor: pointer;
	font-weight: bold;
}

.important-notice-checkbox input[type="checkbox"] {
	appearance: auto;
	-webkit-appearance: checkbox;
	-moz-appearance: checkbox;
	width: 18px;
	height: 18px;
	margin-right: 10px;
}

/* [i] インフォメーションマーク（FontAwesome非依存・純CSS実装） */
/* HTML側は <span class="info-icon ...">i</span> のように「i」文字を直接記述する */
/* BluePrint系 .p2-info-icon と同一のスタイル仕様（円形描画のみ border で補完） */
.info-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	top: 2px;
	width: 1.4em;
	height: 1.4em;
	box-sizing: border-box;
	text-align: center;
	cursor: pointer;
	font-style: normal;
	font-size: 14px;
	color: #A6A6A6;
	line-height: 1;
	white-space: nowrap;
	overflow: visible;
	border: 1px solid currentColor;
	border-radius: 50%;
}

/* [i]アイコンを項目名の左に配置（項目名の位置は変えない） */
.mql-info-label {
	position: relative;
}

.mql-info-label > .mql-info-trigger {
	position: absolute;
	left: -2em;
	top: 50%;
	transform: translateY(-50%);
	margin-left: 5px;
	vertical-align: middle;
}

/* h3見出し配下のインフォメーションは太字と間隔が異なるため個別調整 */
h3.mql-info-label > .mql-info-trigger {
	left: -1.1em;
	font-weight: normal;
}

/* 投資判断主体チェックボックスリスト */
.decision-maker-list {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 0;
	gap: 15px;
}

.decision-maker-list li label {
	display: flex;
	align-items: center;
	cursor: pointer;
}

.decision-maker-list li input[type="checkbox"] {
	appearance: auto;
	-webkit-appearance: checkbox;
	-moz-appearance: checkbox;
	margin-right: 5px;
}

/* 投資開始時期ラジオボタンリスト */
.investment-timing-list {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 0;
	gap: 15px;
}

.investment-timing-list li label {
	display: flex;
	align-items: center;
	cursor: pointer;
}

.investment-timing-list li input[type="radio"] {
	appearance: auto;
	-webkit-appearance: radio;
	-moz-appearance: radio;
	margin-right: 5px;
}

/* モバイル対応 - 重要事項セクション */
@media (max-width: 834px) {
	.important-notice-section {
		padding: 20px 15px 30px 15px;
		max-width: 100%;
	}

	.important-notice-section h3 {
		font-size: 18px;
	}

	.important-notice-section ul li {
		font-size: 12px;
	}

	.decision-maker-list,
	.investment-timing-list {
		gap: 10px;
	}
}

/* ===== MQLインフォメーションモーダル ===== */
.mql-info-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10000;
}

.mql-info-modal.show {
	display: block;
}

.mql-info-modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.3);
}

.mql-info-modal-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #FFFFFF;
	border-radius: 12px;
	padding: 30px;
	max-width: 600px;
	width: 90%;
	max-height: 80vh;
	overflow-y: auto;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.mql-info-modal-close {
	display: none;
}

.mql-info-modal-headline {
	background-color: #EAEAEA;
	color: #7F7F7F;
	font-size: 18px;
	font-weight: bold;
	padding: 10px 12px;
	margin-top: 5px;
	margin-bottom: 15px;
	border-radius: 4px;
}

.mql-info-modal-body {
	font-size: 15px;
	line-height: 1.8;
	color: #000000;
	padding: 0 4px;
}

.mql-info-modal-body p {
	margin: 0 0 12px;
}

.mql-info-modal-body p:last-child {
	margin-bottom: 0;
}

@media screen and (max-width: 834px) {
	.mql-info-modal-content {
		padding: 20px;
		max-width: 95%;
		border-radius: 8px;
	}

	.mql-info-modal-headline {
		font-size: 16px;
	}

	.mql-info-modal-body {
		font-size: 14px;
	}
}