@charset "UTF-8";

		/*-- 追加css --*/

		/* === はみ出し防止の重要設定 === */
		/* GridやFlexアイテムが中身の長さに引っ張られて親枠を突き破るのを防ぐ */
		.input-section, .output-section, .input-group {
			min-width: 0;
		}

		/* ラジオボタンのカスタムスタイル */
		.orientation-group {
			display: flex;
			gap: 1.5rem;
			background: #fcfcfc;
			padding: 1rem;
			border: 2px solid var(--tab_color);
			border-radius: 8px;
			flex-wrap: wrap; /* 画面が狭い時に折り返す */
		}

		.radio-label {
			display: flex;
			align-items: center;
			gap: 0.5rem;
			cursor: pointer;
			color: var(--font_dark_color);
			font-weight: bold;
		}

		.radio-label input[type="radio"] {
			width: 18px;
			height: 18px;
			accent-color: var(--icon_blue_color);
			cursor: pointer;
		}

		/* セレクトボックスのはみ出し防止 */
		select.text-input {
			width: 100%;
			max-width: 100%;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}

		/* 計算結果エリア */
		.result-group {
			background-color: #fff;
			padding: 2rem;
			border-radius: var(--border-radius);
			text-align: center;
			border: 2px dashed var(--icon_blue_color);
			margin-bottom: 2rem;
			box-shadow: 0 5px 15px rgba(0,0,0,0.05);
			min-width: 0; /* はみ出し防止 */
		}

		.result-value {
			font-size: clamp(1.8rem, 6vw, 3rem); /* レスポンシブに縮小 */
			color: var(--icon_red_color);
			font-weight: bold;
			font-family: monospace;
			letter-spacing: 0.05em;
			margin-top: 0.5rem;
			word-break: break-all;
		}

		.result-value span {
			font-size: 1.5rem;
			color: var(--font_dark_color);
		}

		/* 比率プレビューエリア */
		.ratio-preview-container {
			width: 100%;
			height: 250px;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: rgba(255, 255, 255, 0.1);
			border-radius: 8px;
			overflow: hidden;
			padding: 1rem;
		}

		.ratio-preview-box {
			background-color: var(--icon_blue_color);
			box-shadow: 0 5px 15px rgba(0,0,0,0.2);
			transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-weight: bold;
			font-family: monospace;
			text-shadow: 0 2px 4px rgba(0,0,0,0.3);
			border-radius: 4px;
			overflow: hidden;
		}

		#previewText {
			font-size: clamp(0.7rem, 4vw, 1.2rem); /* 枠に合わせて文字サイズも縮小 */
			text-align: center;
			padding: 0 5px;
			word-break: break-all;
		}

		/* スマホ向けのレイアウト・余白調整（qr.cssの設定を部分的に上書き） */
		@media (max-width: 600px) {
			.main-container {
				padding: 1rem; /* 画面端の余白を減らす */
			}
			.tool-wrapper {
				padding: 1.5rem 1rem;
			}
			.orientation-group {
				flex-direction: column; /* 狭い画面ではラジオボタンを縦並びに */
				gap: 0.8rem;
			}
			.result-group {
				padding: 1.5rem 1rem;
			}
			.ratio-preview-container {
				height: 200px;
			}
		}