@charset "UTF-8";
/* QRコード生成ツール 2024.12.08 */
		.container {
			max-width: 800px;
			margin: 0 aout;
			padding: 20px;
			border: 2px solid brown;
			border-radius: 4px;
			background-color: #f9f9f9;
		}

		.form-group {
			font-size: 15px;
			margin-bottom: 15px;
		}

		label {
			display: block;
			margin-bottom: 5px;
			font-weight: bold!important;
			background-color: #FEFBD5;
		}
		
		textarea[type="text"] {
			width: 100%;
			padding: 10px;
			margin-top: 5px;
			font-size: 16px;
			border: 1px solid brown;
			border-radius: 5px;
			overflow: hidden;
			background-color: #f0f8ff!important;
		}
		
		select {
			width: 300px;
			padding: 10px;
			margin: 3px 0 0 15px;
			font-size: 16px;
			border: 1px solid #ccc;
			border-radius: 5px;
		}
		
		#color{
			margin-left: 15px;
		}
		
		.radio-group {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			margin: 5px 0 0 15px;
		}

		.radio-group label {
			font-weight: normal;
		}

        button {
            display: inline-block;
            width: 200px;
            padding: 5px 7px;
            font-size: 16px;
            color: #fff;
            background-color: #007bff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px 1%;
        }
        button:hover {
            background-color: #0056b3;
        }
        button.reset {
			margin-top: 10px;
			background-color: #FF793F;
        }
        button.reset:hover {
            background-color: #FF5400;
        }
		.button-area{
			text-align: center;
		}

		.notes{
			font-size: 1em;
			color: #333;
			margin: 10px 0 0 0;
			background-color: white;
		}

		.notes02{
			font-size: 0.85em;
			color: #333;
			margin-left: 5px;
		}

		/* 小さい画面向けの調整 */
		@media (max-width: 600px) {
			body {
				margin: 0px;
			}

			.container {
				padding: 15px;
			}

			.radio-group {
				flex-direction: column;
				gap: 5px;
			}

			button {
				width: 100%;
			}
		}
		
		.encoded-text {
			  word-wrap: break-word;
			  word-break: break-all;
			  overflow-wrap: break-word;
			  white-space: normal;
			  max-width: 100%;
			  overflow: hidden;
			}

			ol{
			line-height: 180%!important;
			padding-right: 10px!important;
			}

			li{
			margin-bottom: 3px!important;
			}
			
	/* 新旧ボタン切り替え */
		.version-switch {
		  text-align: left;
		  margin: 0 0 20px;
		  background-color: white;
		}

		@media print {
		  .version-switch {
			display: none;
		  }
		}

		.version-btn {
		  display: inline-block;
		  padding: 5px 20px;
		  border: 2px solid #007BFF;
		  background-color: ;
		  color: #007BFF;
		  font-size: 17px;
		  border-radius: 6px;
		  cursor: pointer;
		  text-decoration: none; /* aタグの下線を消す */
		  transition: all 0.3s ease;
		}

		.version-btn:hover {
		  background-color: #007BFF;
		  color: white;
		}

		.version-btn.active {
		  background-color: #007BFF;
		  color: white;
		  padding: 5px 10px;
		}