@charset "UTF-8";

/*-------------------------------------------
CSS
-------------------------------------------*/

			.max_width_960 {
				max-width: 960px;
				margin-right: auto;
				margin-left: auto;
				padding-right: 20px;
				padding-left: 20px;
			}


			.background-blue {
				background-color: #3949AB;
				padding: 30px 0;
			}

			.software_title {
				font-size: 2.0em;
				font-family: 'Noto Sans JP';
				font-weight: bold;
				color: #fff;
			}

			.software_image_container_half img {
				display: inline-block;
				vertical-align: middle;
				width: 400px;
				height: 280px;
				object-fit: contain;

			}

			.software_content_title {
				font-size: 1.5em;
				font-weight: bold;
				text-align: center;
				font-family: 'Noto Sans JP';
				margin: 10px 0px 10px 10px;
				border-left: solid 0px;
				border-bottom: solid 1px #888888;
				padding: 10px 10px;
				color: #000;
				white-space: pre-line;
			}

			.software_text_container {
				white-space: pre-line;
			}

			@media screen and (max-width: 960px) {
				.software_image_container_half img {
					width: 400px;
					height: 300px;
				}

				.software_title {
					font-size: 1.8em;
				}

				.software_content_title {
					font-size: 1.5em;
				}
			}

			@media screen and (max-width: 520px) {
				.software_image_container_half img {
					width: 400px;
					height: 250px;
				}

				.software_title {
					font-size: 1.5em;
				}

				.software_content_title {
					font-size: 1.3em;
				}
			}

			.software_subtitle_jp {
				position: relative;
				display: inline-block;
				width: 100%;
				text-align: center;
				/* padding-bottom: 70px; */
				color: #0082FE;
			}

			.btn {
				text-align: center;
				display: inline-block;
				width: auto;
				min-width: 180px;
				max-width: 300px;
				padding: 10px 20px;
				background-color: white;
				color: #3949AB;
				border: 2px solid #3949AB;
				position: relative;
			}

			.btn::after {
				content: ;
				position: absolute;
				top: 50%;
				right: 15px;
				transform: translateY(-50%);
			}

			a:hover .btn {
				color: white;
				background-color: #3949AB;
			}

			.middle {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			/*------------フローティングバナー------------*/

			.float_info_area {
				position: fixed;
				bottom: 20px;
				right: 20px;
				width: 350px;
				height: auto;
				background-color: rgba(0, 0, 0, 0);
				z-index: 99999;
			}

			/*@media only screen and (max-width: 640px) {*/
			@media only screen and (max-width: 1024px) {
				.float_info_area {
					display: none;
				}
			}

			.float_info_text {
				padding-top: 3px;
				background-color: #AAFFFF;
				text-align: center;
				font-weight: bold;
				border: 0.1px solid #EEE;
				border-bottom: none;
			}

			.float_info_item {
				background-color: rgba(0, 0, 0, 0);
				border: 0.1px solid #EEE;
			}

			.float_info_close {
				background: #CCCCCC;
				width: 50px;
				height: 27px;
				/*float_info_textのパディング + ボタン押した後のfloat_info_areaの高さ*/
				position: absolute;
				right: 0px;
				top: 0;
				transform: translate(0%, -100%);
				-webkit-transform: translate(0%, -100%);
				-ms-transform: translate(0%, -100%);
				z-index: 100000;
				cursor: pointer;
			}

			.float_info_area img:hover {
				cursor: pointer;
				opacity: 0.8;
			}

			/*------------フローティングバナー(SP)------------*/

			.float_info_area_sp {
				position: fixed;
				bottom: 0;
				right: 0;
				width: 520px;
				height: 170px;
				background-color: rgba(0, 0, 0, 0);
				z-index: 99999;
			}

			/*@media only screen and (max-width: 640px) {*/
			@media only screen and (max-width: 1024px) {
				.float_info_area_sp {
					display: none;
				}
			}

			@media screen and (min-width: 521px) {
				.float_info_area_sp {
					display: none;
				}
			}

			@media screen and (max-width: 520px) {
				.float_info_area_sp {
					display: block;
					width: 100vw;
				}
			}

			.float_info_text_sp {
				padding-top: 3px;
				background-color: #AAFFFF;
				text-align: center;
				font-weight: bold;
				border: 0.1px solid #EEE;
				border-bottom: none;
			}

			.float_info_item_sp {
				background-color: rgba(0, 0, 0, 0);
				border: 0.1px solid #EEE;
			}

			.float_info_close_sp {
				background: #CCCCCC;
				width: 50px;
				height: 27px;
				/*float_info_textのパディング + ボタン押した後のfloat_info_areaの高さ*/
				position: absolute;
				right: 0px;
				top: 0;
				transform: translate(0%, -100%);
				-webkit-transform: translate(0%, -100%);
				-ms-transform: translate(0%, -100%);
				z-index: 100000;
				cursor: pointer;
			}

			.float_info_area_sp img:hover {
				cursor: pointer;
				opacity: 0.8;
			}