@charset "utf-8";

/* -----------------------------------------------
FileName: style.css
----------------------------------------------- */
@media (max-width: 950px) {

	.open {
		overflow-y: hidden;
	}

	header {
		height: 60px;
	}
		header #inner_header {
			padding: 10px 15px 0;
		}
				header #inner_header .h_logo img {
					width: 40px;
				}
			header #inner_header .h_menu,
			header #inner_header .other_logo {
				display: none;
			}
				.other_logo_list {
					margin-top: 40px;
					justify-content: left;
				}
			header #inner_header .navi {
				display: block;
			}

				/* �h�����[ */
				#dr-btn {
					position: fixed;
					padding: 0 5px;
					right: 10px;
					top: 10px;
					width: 40px;
					height: 40px;
					z-index: 300;
					border: none;
					outline: none;
					cursor: pointer;
					background-color: #FFFFFF;
				}
					#dr-btn span {
						display: block;
						background: #000;
						width: 30px;
						height: 3px;
						position: absolute;
						transition: all 0.4s;
						-moz-border-radius: 3px;
						-webkit-border-radius: 3px;
						border-radius: 3px;
					}
					#dr-btn span:first-child {
						top: 4px;
					}
					#dr-btn span:nth-child(2) {
						top: 12px;
					}
					#dr-btn span:nth-child(3) {
						top: 20px;
					}
					#dr-btn p {
						position: absolute;
						top: 24px;
						font-size: 1.2rem;
						color: #000000;
					}
					#dr-btn p.btnclose {
						display: none;
					}
					.open #dr-btn span:first-child {
						-moz-transform: translateY(9px) rotate(45deg);
						-ms-transform: translateY(9px) rotate(45deg);
						-webkit-transform: translateY(9px) rotate(45deg);
						transform: translateY(9px) rotate(45deg);
					}
					.open #dr-btn span:nth-child(2) {
						opacity: 0;
					}
					.open #dr-btn span:nth-child(3) {
						-moz-transform: translateY(-7px) rotate(-45deg);
						-ms-transform: translateY(-7px) rotate(-45deg);
						-webkit-transform: translateY(-7px) rotate(-45deg);
						transform: translateY(-7px) rotate(-45deg);
					}
					.open #dr-btn p.btnmenu {
						display: none;
					}
					.open #dr-btn p.btnclose {
						display: block;
					}
				#dr-menu {
					display: none;
					position: fixed;
					top: 60px;
					right: 0;
					padding: 20px 15px 20px 40px;
					width: 250px;
					height: calc(100% - 60px);
					max-height: 590px;
					overflow: auto;
					z-index: 150;
					background-color: #FFFFFF;
					sbackground-color: rgba(255, 255, 255, 0.9);
					box-sizing: border-box;
				}
					#dr-menu a {
						color: #333;
					}
					#dr-menu span {
						color: #333;
					}
						#dr-menu .menu > li {
							margin: 0;
						}
							#dr-menu .menu > li a,
							#dr-menu .menu > li span {
								position: relative;
								display: block;
								padding: 20px 0;
								font-size: 18px;
								text-decoration: none;
							}
							#dr-menu .menu > li a:hover,
							#dr-menu .menu > li span:hover {
								text-decoration: none;
							}

	#main {
		margin-top: 60px;
	}

	section {
		margin-top: -60px;
		padding-top: 60px;
	}

			.top_images h1 {
				font-size: 4.5rem;
			}
				.top_images h1 span {
					font-size: 2.5rem;
				}

		.aboutus_images {
			height: auto;
			text-align: center;
			background: url('../images/bg_aboutus01.svg') center/cover no-repeat;
		}
			.aboutus_images img {
				height: auto;
				width: 100%;
			}

}

@media (max-width: 768px) {

	#main.privacy {
		padding-bottom: 10px;
	}

	.container {
		padding: 50px 0 60px;
	}
	.container02 {
		padding: 50px 0 0;
	}
	.container03 {
		padding: 25px 0 0;
	}

	.top_images {
		padding-bottom: 20px;
		background: url("../images/bg_top.svg") center/cover no-repeat;
		box-sizing: border-box;
		color: #FFFFFF;
	}
		.top_images_flex {
			display: block;
			height: auto;
		}
			.top_images h1 {
				padding: 30px 0 30px 15px;
				width: auto;
				font-size: 3.2rem;
			}
				.top_images h1 span {
					font-size: 2.0rem;
				}
			.top_images .rightimage {
					width: auto;
				}

	.subttl {
		padding-bottom: 10px;
		font-size: 1.3rem;
	}
	h1.ttlh1 {
		font-size: 3.0rem;
	}
	h2.ttlh2 {
		font-size: 3.0rem;
	}
	.conttxt {
		margin-top: 30px;
		text-align: left;
	}
	.index .conttxt {
		font-size: 1.6rem;
	}
	.index_ourservices_flex .box_index_ourservices p.psubttl {
		font-size: 1.3rem;
	}
	.index_ourservices_flex .box_index_ourservices h3.ttlh3 {
		font-size: 2.0rem;
	}

	.news_flex {
		display: block;
		font-size: 1.5rem;
	}
		.news_flex dt {
			width: auto;
		}
		.news_flex dd {
			width: auto;
		}

		.news_flex {
			padding: 25px 20px;
		}

	.flowofuse_list {
		margin-bottom: 60px;
		border-top: none;
	}
		.flowofuse_flex {
			display: block;
			margin: 20px auto 0;
			max-width: 400px;
			padding: 30px 30px;
			border: 1px solid #000000;
			border-radius: 20px;
			text-align: center;
			box-sizing: border-box;
		}
			.flowofuse_flex li:nth-child(1) {
				margin: auto;
			}
			.flowofuse_flex li:nth-child(2) {
				margin: 30px 0;
				width: auto;
				font-size: 2.2rem;
			}
			.flowofuse_flex li:nth-child(3) {
				width: auto;
				text-align: left;
				font-size: 1.6rem;
			}

	.slick-list {
		width: calc(100% - 40px);
	}

	.ttlh3_aboutus {
		font-size: 1.8rem;
	}

	.ttlh3_aboutus_top {
		font-size: 2.5rem;
	}
	.signature span {
		font-size: 2.5rem;
	}
	.aboutus_top_flex {
		display: block;
	}
		.aboutus_top_flex_l {
			margin: 0 auto;
			width: 240px;
		}
		.aboutus_top_flex_r {
			margin-left: 0;
			margin-top: 40px;
			padding: 0 15px;
			width: auto;
		}

	.company_list .news_flex {
		padding: 5px 15px;
		font-size: 1.5rem;
	}
		.company_list .news_flex dt {
			color: #DC732A;
		}

		.ourservices_flex.type01 {
			display: block;
			margin-top: 35px;
		}
			.ourservices_flex.type01 .ourservices_flex_l {
				padding: 0 15px;
				width: auto;
			}
			.ourservices_flex.type01 .ourservices_flex_r {
				margin-top: 25px;
				padding-left: 0;
				width: auto;
			}
		.ourservices_flex.type02 {
			display: block;
			margin-top: 55px;
		}
			.ourservices_flex.type02 .ourservices_flex_l {
				padding-right: 0;
				width: auto;
			}
			.ourservices_flex.type02 .ourservices_flex_r {
				margin-top: 25px;
				padding: 0 15px;
				width: auto;
			}
				.ttlh3_ourservices {
					margin-bottom: 25px;
					text-align: center;
					font-size: 2.0rem;
				}
		.ourservices_sp {
			margin-top: 25px;
			display: block;
		}

	h2.ttlh2_aboutus {
		font-size: 2.0rem;
	}
	.access_flex {
		display: block;
		margin-top: 35px;
	}
		.access_img {
			margin-top: 50px;
			width: auto;
		}
		.access_flex .access_flex_l {
			padding: 0 15px;
			width: auto;
		}
		.access_flex .access_flex_r {
			margin: 0 auto;
			width: auto;
			max-width: 560px;
		}

	.ttlh3_access {
		text-align: center;
	}

	.privacymark_sp {
		display: block;
	}
		.privacymark_flex_l {
			width: auto;
		}
		.privacymark_flex_r {
			display: none;
		}
		.privacymark_sp {
			margin: 10px auto;
			width: 155px;
			text-align: center;
		}

			input[type="checkbox"]#privacy_check {
				margin-left: 0;
			}

	.btn_area {
		margin-top: 60px;
	}
	.ourservices .btn_area,
	.access .btn_area {
		margin: 25px 0 55px;
	}
	.btn_area.ttlbtn {
		margin-top: 40px;
	}
		.ourservices .btn_more,
		.access .btn_more {
			margin: 0 auto;
			width: 275px;
		}
			.btn_more a {
				display: grid;
				place-items: center;
			}
				.btn_download a {
					height: 60px;
					font-size: 1.6rem;
					background: url("../images/btn_download.svg") center right 20px/30px #FFFFFF no-repeat;
				}
				.btn_download a:hover {
					background: url("../images/btn_download_over.svg") center right 20px/30px #DC732A no-repeat;
				}

	.bnn_contact {
		padding-top: 30px;
		height: 175px;
	}
		.bnn_contact_flex {
			display: block;
			padding: 0 15px;
		}
			.bnn_contact_flex li:nth-child(1) {
				padding-right: 0;
			}
				.bnn_contact_flex li:nth-child(1) .ttlarea {
					margin-bottom: 10px;
				}
				.bnn_contact_flex li:nth-child(1) .subttl {
					padding-bottom: 0;
				}
			.bnn_contact_flex li:nth-child(2) {
				padding-top: 0;
				font-size: 1.2rem;
			}

	footer {
	}
		.footer_flex {
			padding-left: 20px;
			display: block;
		}
			.footer_flex li:nth-child(1) {
				margin-bottom: 20px;
			}
			.footer_flex li:nth-child(2) {
				margin-bottom: 40px;
				padding-right: 0;
				width: auto;
			}
			.footer_flex li:nth-child(3) {
				width: auto;
			}

	.show_pc {
		display: none;
	}
	.show_sp {
		display: block;
	}

}