@charset "utf-8";

@media screen and (max-width: 1400px) {


}



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



@media screen and (max-width: 960px) {
	.max-960-hide { display: none; }

	/*-----------------------------------------------------
						事業紹介/#products
	-----------------------------------------------------*/
	#products .business-content {
		max-width: 724px;
		padding: 60px 2vw;
		text-align: center;
	}
	#products .business-content img{
		max-width: 600px;
	}
		#products .business-content .flex {
			justify-content: space-between;
			margin-top: 1em;
			text-align: left;
		}
		#products .business-content .flex > div {
			flex: 1;
		}
			#products .business-content .flex > div p ,
			 #products .business-content.min-961-hide > p {
				margin: 0 3px 2px;
				padding: 5px;
				font-size: 14px;
				line-height: 1.4em;
				color: #fff;
				font-weight:500;
				border-radius: 3px;
				font-feature-settings: "palt";
				text-align: justify;
    			letter-spacing: 0.01em;
			}
			#products .business-content .flex > div:nth-of-type(1) p {
				background: #fff;
				border: 1px solid #0082d2;
				color: #0082d2;
			}
			#products .business-content .flex > div:nth-of-type(1) p.point {
				background: #0082d2;
				color: #fff;
			}
			#products .business-content .flex > div:nth-of-type(2) p {
				background: #fff;
				border: 1px solid #00aae1;
				color: #00aae1;				
			}
			#products .business-content .flex > div:nth-of-type(2) p.point {
				background: #00aae1;
				color: #fff;
			}
			#products .business-content .flex > div:nth-of-type(3) p {
				background: #fff;
				border: 1px solid #00d7e1;
				color: #00d7e1;				
			}
			#products .business-content .flex > div:nth-of-type(3) p.point {
				background: #00d7e1;
				color: #fff;
			}
			#products .business-content .flex > div:nth-of-type(4) p {
				background: #fff;
				border: 1px solid #00d2aa;
				color: #00d2aa;				
			}
			#products .business-content .flex > div:nth-of-type(4) p.point {
				background: #00d2aa;
				color: #fff;
			}
		#products .business-content.min-961-hide > p {
			background: #FF9F1C;
			margin: 10px 3px 0;

		} 

	/*-----------------------------------------------------
						会社紹介/#about
	-----------------------------------------------------*/
	#about .desc .bg-opacity {
		padding-right: 50px;
	}
	#about .desc h3 {
		width: 100%;
		font-size: 22px;
    	font-weight: bold;
    	padding: 0 50px;

	}
	#about .desc .bg-opacity div {
		padding: 0 50px;
		background-size: 300px;
		background-position: right bottom;
	}
	#about .desc p {
		width: calc(100% - 290px);
		font-size: 14px;
	}
	#information.flex {
		flex-direction: column;
	}
		#information .inner-r , #information .inner-l {
			padding: 0 50px;
		}
			#information .inner-l h2 {
				text-align: left;
				margin-bottom: 30px;
			}
				#information .inner-l h2 p {
					display: inline-block;
					margin-left: 15px;
					font-size: 16px;
				}
			#information .inner-l > img {
				display: none;
			}
	/*-------------- マップ/#map --------------*/			
	#maps{
		padding: 0 50px;
	}
	.mapContainer {
		padding: 0 50px;
	}


}

@media screen and (max-width: 850px){
	#about .desc .bg-opacity {
		padding-right: 0;
	}
	#about .desc .bg-opacity div {
		background: url(../img/araki_new_sp.png) no-repeat;
		background-size: min(90%, 450px);
		background-position: center bottom;
	}
	#about .desc p {
		width: 100%;
		padding-bottom: min(67vw, 360px);
	}

} 







@media screen and (max-width: 767px) {
	.max-767-hide { display: none; }

	/*-----------------------------------------------------
						共通設定
	-----------------------------------------------------*/
	h3 {
		font-size: 25px;
	}

	/*-----------------------------------------------------
						お知らせ/#news
	-----------------------------------------------------*/
	#news .flex {
		flex-direction: column;
	}
	#news .flex h2 {
		margin-bottom: 16px;
	}
	#news .flex h2 img {
		vertical-align: middle;
	}
	#news .flex h2 p {
		display: inline-block;
		margin-left: 10px;
	}
	#news .flex .news-inner {
		margin-left: 0;
		font-size: 14px;
	}
	#news .flex .news-inner > ul > li > a {
		display: inline;
	}




	/*-----------------------------------------------------
						会社紹介/#about
	-----------------------------------------------------*/
	/*-------------- マップ/#map --------------*/

	#maps{
		width: 100%;
	}

	/*-----------------------------------------------------
						お問い合せ/#contact
	-----------------------------------------------------*/
	#contact .flex {
		align-items: center;
		flex-direction: column-reverse;
	}
	#contact .inner {
		padding: 0;
	}
	#contact-info, #contact-form {
	    width: 100%;
	    max-width: 500px;
	}
	#contact-info {
		padding-top: 40px;

	}
		.submit input[type="submit"] {
			margin-left: auto;
			margin-right: auto;
		}









}


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

@media screen and (max-width: 600px) {
	.max-600-hide { display: none; }

	/*--------- ヘッダー/header ---------*/
	header.roop-bg-01 {
		min-height: 700px;
	    background: url(../img/bg-text-01_Sp.png) repeat-x;
	}
	header .roop-bg-02 {
		min-height: 700px;
		background: url(../img/bg-text-02_Sp.png) repeat-x;
	}
	header .roop-bg-03 {
		min-height: 700px;
		background: url(../img/bg-text-01_Sp.png) repeat-x;
	}
	/*-------------- メインロゴ/#mainlogo --------------*/
	#mainlogo p {
		font-size: 30px;
		margin: 0 -62px;	
	}



	/*-----------------------------------------------------
						事業紹介/#products
	-----------------------------------------------------*/
	#about .desc .bg-opacity div {
		padding: 0;
	}
	#about .desc h3 {
		padding: 0;
	}
	#products .business-content .flex {
		flex-direction: column;
	}
		#products .business-content .flex > div {
			margin-bottom: 8px;
		}
		#products .business-content.min-961-hide > p {
			margin: 0px 3px 0;

		} 

		#achievement .flex .card {
			max-width: 343px;
			width: 100%;
		}



	/*-----------------------------------------------------
						会社紹介/#about
	-----------------------------------------------------*/
	#about .desc .bg-opacity  {
		padding: 0;
	}
	#about .desc p:last-of-type {
		font-size: 14px;
	}

	#information .inner-r , #information .inner-l {
			padding: 0 0;
	}
		#information .inner-l h2 {
			padding: 5px 0 0 20px;
			border-left: 6px solid #f25a1b;
		}
			#information .inner-l h2 img { width: 150px; }
			#information .inner-r table td {
				border: 1px solid #f25a1b;
				padding: 8px 12px;
				font-weight: 500;
				color: #555;
			}
			#information .inner-r table td:first-child {
				font-size: 15px;
				width: 115px;
				font-weight: 600;
			}
			#information .inner-r table td:last-child {
				font-size: 14px;
				font-weight: 600;
			}


	/*-------------- マップ/#map --------------*/
	#maps{
		padding: 0;
		width: calc(100% + 40px);
    	margin: 30px auto 10px -20px;
	}
	.mapContainer {
		padding: 0;
	}
	#locationMap {
		height: 270px;
	}
	#access div.flex {
		flex-direction: column;

	}
		#access div p:last-child {
			text-align: center;
		}

	/*-----------------------------------------------------
						お問い合せ/#contact
	-----------------------------------------------------*/
	#contact-form {
		padding: 30px 20px;
	}
	#contact-form input[type="text"], #contact-form input[type="email"], #contact-form textarea {
		transform: scale(0.875);
	}
	

	#mailform_open + label {
		font-size: 14px;
		padding: 15px 5px 15px 1.8em;
	}
	#mailform_open + label::after {
		right: 0;
	}
	#mailform_open + label::before {
		font-size: 20px;
		left: 0.2em;
	}
	#mailform_open + label:hover {
		opacity: 1;
	}
	.contact-chatw {
		padding: 15px 5px 9px 6px;
	}
	.contact-chatw:hover {
		box-shadow: none;
	}
	.contact-chatw::before {
		right: 0;
	}
	.contact-chatw a img {
		height: 28px;
	}


	/*-----------------------------------------------------
						確認画面/#confirmation
	-----------------------------------------------------*/
	#confirmation h3 {
		font-size: 20px;
	}
	#confirmation .container .inner {
		padding: 10px 20px 25px;
		margin: 50px auto;
	}
	#confirmation .submit input[type="submit"] {
		width: 100%;
	}
	#confirmation .back-btn {
		width: calc(100% - 40px);
	}


}