@charset "UTF-8";
/* CSS Document */
//ブレイクポイントを指定------ここから
$xl: 1399px;
$lg: 1199px;
$md: 991px;
$sm: 767px;
$xs: 575px;

@mixin xl {
  @media screen and (max-width: ($xl)) {
    @content;
  }
}
@mixin lg {
  @media screen and (max-width: ($lg)) {
    @content;
  }
}
@mixin md {
  @media screen and (max-width: ($md)) {
    @content;
  }
}
@mixin sm {
  @media screen and (max-width: ($sm)) {
    @content;
  }
}
@mixin xs {
  @media screen and (max-width: ($xs)) {
    @content;
  }
}
//ブレイクポイントを指定------ここまで

$main-color: #1D8F59;
$sub-color: #F9F9F9;

//共通
section {
	.inner {
		width: 83%;
		margin: 0 auto;
		@include md {
			width: 100%;
		}
	}
	.title span {
		font-size: 110px;
		font-size: 11rem;
		color: rgba(255, 255, 255, 0);
		font-weight: 500;
		text-align: center;
		letter-spacing: 0.1em;
		display: block;
		margin-bottom: 5rem;
		-webkit-text-stroke: 1.5px $main-color;
		font-style: italic;
//		font-family: "Noto Sans", sans-serif;
		font-family: "NotoSansCJKjp", sans-serif;
		transform: scale(0.94, 1);
		@include md {
			font-size: 90px;
			font-size: 9rem;
		}	
		@include sm {
			font-size: 80px;
			font-size: 8rem;
		}	
		@include xs {
			font-size: 60px;
			font-size: 6rem;
			margin-bottom: 3rem;
		}	
	}
}

.d-close {
	display: none;
}

//#top 
#top { 
	padding-top: 120px;
    margin-top: -120px;
	@include sm {
		padding-top: 250px;
		margin-top: -250px;
	}
	.top-img {
		margin:13rem 0 7rem;
		@include sm {
			margin:7rem 0 4rem;
		}
		@include xs {
			margin:3rem 0;
		}
		img{
			width: 100%;
			@include sm {
				width: 90%;
			}
			@include xs {
				width: 95%;
			}
		}
	}
	p {
		font-family: "Noto Serif JP", serif;
		font-size: 28px;
		font-size: 2.8rem;
		font-weight: 400;
		line-height: 1.9;
		text-align: center;
		margin-bottom: 10rem;
		@include sm {
			font-size: 26px;
			font-size: 2.6rem;
			margin-bottom: 8rem;
		}
		@include xs {
			font-size: 20px;
			font-size: 2rem;
		}
	}
}

//#introduction　溶接ノウハウ・溶接レスキュー説明
#introduction {
	overflow: hidden;
	padding-top: 4rem;
	margin-bottom: 16rem;
	@include sm {
		padding-top: 0;
		margin-bottom: 10rem;
	}
	@include xs {
		margin-bottom: 6rem;
	}
	.container {
		max-width: 1280px;
		@include xl {
			max-width: 1140px;
		}
		@include lg {
			max-width: 960px;
		}
		@include md {
			max-width: 720px;
		}
		@include sm {
			max-width: 540px;
		}
	}
	.row {
		.box {
			padding: 5rem;
			@include lg {
				padding: 4rem;
			}
			@include md {
				padding: 3rem;
			}
			@include sm {
				padding: 2rem 3rem;
			}
			h3 {
				line-height: 1.6;
				margin-bottom: 2rem;
				letter-spacing: 0.1em;
				@include lg {
					font-size: 25px;
					font-size: 2.5rem;
				}
				@include md {
					font-size: 24px;
					font-size: 2.4rem;
					letter-spacing: 0.05em;
				}
				@include sm {
					margin-bottom: 1rem;
					letter-spacing: 0.1em;
				}
				@include xs {
					font-size: 21px;
					font-size: 2.1rem;
				}
			}
			p {
				line-height: 2;
				text-align: justify;
				letter-spacing: 0.1em;
				@include md {
					line-height: 1.6;
				}
			}
		}
		.fluid-box {
			height: 410px;
			overflow: hidden;
			margin-top: -4rem;
			margin-bottom: 4rem;
			@include xl {
				height: 360px;
			}
			@include lg {
				height: 300px;
			}
			@include md {
				height: 230px;
			}
			@include sm {
				margin-top: 0;
				margin-bottom: 0;
				width: 100%;
				height: auto;
			}
			img {
				width: 100%;
				height: 100%;
				object-fit: contain;
			}
		}
	}
	.introduction-1 {
		margin-bottom: 10rem;
		background: linear-gradient(90deg, #f9f9f9 0%, #f9f9f9 55%, #fff 55%, #fff 100%);
		@include sm {
			margin-bottom: 2rem;
			background: none;
		}
		.fluid-box {
			margin-right: calc(50% - 50vw);
			@include sm {
				margin-right: inherit;
			}
			img {
				object-position: left center;
			}
		}
	}
	.introduction-2 {
		background: linear-gradient(90deg, #fff 0%, #fff 45%, #f9f9f9 45%, #f9f9f9 100%);
		@include sm {
			background: none;
		}
		.fluid-box {
			margin-left: calc(50% - 50vw);
			@include sm {
				margin-left: inherit;
			}
			img {
				object-position: right center;
			}
		}
	}
}

//#service　事業内容
#service {
	padding-top: 120px;
    margin-top: -120px;
	@include sm {
		padding-top: 250px;
    	margin-top: -250px;
	}	
	h3{
	font-size: 23px;
	font-size: 2.3rem;
			@include sm {
				text-indent: -1.3em;
				padding-left: 1.3em;
			}
	@include xs {
		font-size: 20px;
		font-size: 2rem;
	}
	}
	a::after {
		font-family: "Font Awesome 5 Free";
		content: "\f054";
		padding-left: 5rem;
		font-weight: 900;
		position: absolute;
		right: 5%;
	}
	.service-strength-bg {
	background-image: linear-gradient(90deg, rgba(235, 235, 235, 0.3) 27%, rgba(255, 255, 255, 0) 27%);
		padding-top: 10rem;
		margin-top: -10rem;
		padding-bottom: 18rem;
		
		.service-box {
//			padding: 0rem 15rem 0rem 15rem;
//			@include lg {
//				padding: 0rem 5rem 0rem 5rem;
//			}
//			@include xs {
//				padding: 0rem 1rem 0rem 1rem;
//			}
			
			p {
				padding-left: 3.5rem;
			}
			.production-box {
				padding: 5rem 5rem 5rem 20rem;
				background: #fff;
				border: 1px solid #9A9A9A;
				margin-top: 5rem;
				@include lg {
					padding: 5rem 5rem 5rem 11rem;
				}
				@include md {
					padding: 5rem 5rem 4rem;
				}
				@include xs {
					padding: 3rem;
				}
			}
			.qualification-box {
				padding: 2rem;
				background: #fff;
				border: 1px solid #1D8F59;
				margin-top: 2rem;
				background-color: #E8F4EE;
				width: 100%;
				box-sizing:border-box;	
				
				dt{
					color: #1D8F59;
					font-size: 20px;
					font-size: 2rem;
					font-weight: 400;
					text-align: center;
					margin-bottom: 1rem;
				}
				dd{
					font-size: 16px;
					font-size: 1.6rem;
					font-weight: 400;
					text-align: center;
				}
			}
		}
		//ボタン関係↓
		.btn-size {
			text-align: center;
			margin: 4rem 0rem 10rem;
			
			.btn--orange,
			a.btn--orange {
				color: #fff;
				background-color: #1D8F59;
				border:solid 1px #1D8F59;
				font-size: 1.9rem;
				padding: 1rem 0;
				width: 350px;
				margin: auto;
				position: relative;
				@include md {
					width: 280px;
				}
			}
			.btn--orange:hover,
			a.btn--orange:hover {
				color: #1D8F59;
				background-color: #fff;
				border:solid 1px #1D8F59;
			}

			a.btn--radius {
			   border-radius: 10rem;
			}
		}
		.check:before {
			font-family: "Font Awesome 5 Free";
			content: "\f14a";
			color: #FFC800;
			padding-right: 1rem;
			font-weight: 900;
		}
		//#strength　みのはま鋼業の強み
		#strength{
		padding-top: 120px;
   		margin-top: -120px;
		@include sm {
			padding-top: 250px;
			margin-top: -250px;	
		}	
			h3{
			margin-bottom: 2rem;
			}
			h4{
			margin: 1rem 0rem 1rem;
			}
			h4:last-child{
			border-bottom: solid 1px;
			padding-bottom: 1.5rem;
			}
			dl{
			background-color: #FFF9E5;
			padding: 1.5rem 1.5rem;
			}
			dd{
			padding-left: 1.5rem;
				@include xs {
					font-size: 1.5rem;
				}
			}
			.rescue-bg {
				background-image: linear-gradient(90deg, rgba(255, 255, 255, 1) 90%, rgba(255, 255, 255, 0) 21%);
				padding: 5rem;
				border-image: linear-gradient(to right, #1d8f59 90%, rgba(255, 255, 255, 0) 52%) 1;
				border-top: solid 2px;
				filter: drop-shadow(2px 6px 6px rgba(0, 0, 0, 0.15));
				@include xl {
				background-image: linear-gradient(90deg, rgba(255, 255, 255, 1) 97%, rgba(255, 255, 255, 0) 21%);
				border-image: linear-gradient(to right, #1d8f59 97%, rgba(255, 255, 255, 0) 52%) 1;
				}
				@include sm {
					padding: 3rem;
				}
				.rescue-title{
					display: flex;
					@include sm {
						flex-wrap: wrap;
						justify-content: center;
					}
				}
				.rescue-color {
					width: 55%;
					border-right: solid 1px;
					@include lg {
						width: 60%;
					}
					@include md {
						width: 85%;
					}
					@include sm {
						width: 100%;
						border-right: none;
						text-align: center;
					}	

					span {
						color:  #1D8F59;
						font-size: 25px;
						font-size: 2.5rem;
					}
					span:nth-child(2){
						color: #4D4D4D;
					}
					p {
						color: #4D4D4D;
						font-size: 36px;
						font-size: 3.6rem;
						margin-top: 1rem;
						@include sm {
							display: inline-block;
							margin-bottom: 2rem;
						}	
					}
					& + div{
						padding-left: 7rem;
						@include xl {
							padding-left: 5rem;
						}
						@include md {
							padding-left: 4rem;
						}
						@include sm {
							padding-left: 0rem;
						}
						p{
							text-align: justify;
						}
					}
				}
			}
			.strength-box {
				margin: 10rem 0rem 8rem 0rem;
				@include md {
					margin: 10rem 0rem;
				}	
				@include sm {
					margin: 10rem 0rem 0rem 0rem;
				}	
				@include xs {
					margin: 0rem;
				}	
				
				.strength-mb {
					margin-bottom: 10rem;
						@include xs {
							margin: 3%;
						}	
					
					.strength-img1 {
						background-image: url("../img/strength-1.png");
						background-repeat: no-repeat;
						background-size: contain;
						background-position: center;
						@include sm {
							padding-top: 50rem;
						}	
						@include xs {
							padding-top: 45rem;
						}	
					}
				}
				.order-sm {
						@include sm {
							flex-direction: column;
						}	
						@include xs {
							margin: 3%;
						}	
					.order-sm-strength{
						@include sm {
							order: 2;
						}	
					}
					.strength-img2 {
						background-image: url("../img/strength-2.png");
						background-repeat: no-repeat;
						background-size: contain;
						background-position: center;
						@include sm {
							order: 1;
							padding-top: 50rem;
							margin-bottom: 4rem;						
						}	
						@include xs {
							padding-top: 45rem;
							margin-bottom: 0rem;
						}	
					}
				}
			}
			.strength-gallery {
				background-image: url("../img/service-img.png");
				background-repeat: no-repeat;
				background-size: contain;
				background-position: center;
				margin: 0 calc(50% - 50vw);
				width: 100vw;
				padding-top: 30rem;
			}
			.strength-gallery-2 {
				background-image: url("../img/service-img-sm.png");
				background-repeat: no-repeat;
				background-size: cover;
				background-position: center;
				margin: 0 calc(50% - 50vw);
				width: 100vw;
				padding-top: 54rem;	
				@include sm {
					padding-top: 45rem;
					margin-top: 5rem;
				}	
				@include xs {
				padding-top: 37rem;
				}	
			}
		}
	}
}

//#works　実績紹介
#works {
	margin-bottom: 15rem;
	padding-top: 140px;
    margin-top: -140px;
	@include sm {
		padding-top: 250px;
   		margin-top: -250px;
	}	
	p{
		text-align: justify;
		margin: 2rem auto 5rem;
		@include md {
			margin: 1.5rem 4rem 4rem;
		}	
		@include sm {
			margin: 1rem 3rem 3rem;
		}	
	}
	dl{
		text-align: center;
		margin-top: 3rem;
	}
	dt{
		margin-bottom: 1.5rem;
		text-align: center;
	}
	.bg-color {
//		background-image: linear-gradient(0deg, rgba(29, 143, 89, 0.15) 100%, white 65%);
		background-color: #e8f4ee;
		padding-bottom: 12rem;
		.title {
			position: relative;
			top: -2rem;
		}
		.works-bgcolor {
			background-color: #fff;
			padding: 3rem 7rem 3rem 7rem;
			@include md {
				padding: 3rem;
			}
			@include sm {
				padding: 3rem 7rem 3rem 7rem;
			}
			@include xs {
				padding: 3rem;
			}
			span {
				font-weight: 900;
				font-size: 20px;
				font-size: 2rem;
				letter-spacing: 0.2rem;
				color: #1D8F59;
			}
			.color-change {
				color: #FFC800 !important;
			}	
			.works-links {
				display: block;
				position:relative;
				img {
					display: block;
					width: 100%;
				}
			}
			.works-links:before{
				content:"";
				display:flex;
				width:100%;
				height:100%;
				position:absolute;
				z-index:2;
				background:black;/*好みの色に変えてください。*/
				opacity:0;
				align-items: center;
			}
			.works-links:hover:before{
			  opacity:0.4;
				font-family: "Font Awesome 5 Free";
				content: "\f00e";
				font-weight: 900;
				font-size: 8rem;
				justify-content: center;
				padding-top: 2rem;
				color :#fff;
			}
			.works-arrow {
				background-image: url("../img/arrow-icon.svg");
				background-repeat: no-repeat;
				background-position: center center;
				padding: 4rem 0rem 4rem 0rem;
				width: 25%;
				height: 25%;
				margin: auto;
				@include lg {
					padding: 3rem 0rem 3rem 0rem;
				}	
				@include sm {
				transform: rotate(90deg);
    			padding: 4rem;
			    margin-top: 6rem;
    			margin-bottom: 3rem;
				}	
				@include xs {
    			padding: 3rem;
			    margin-top: 4rem;
    			margin-bottom: 1rem;
				}	
			}	
		}
		.works-bgcolor-2 {
			background-color: #fff;
			margin-top: 3rem;
			padding: 2rem 2rem 1rem 2rem;
			
			.works-links {
				display: block;
				position:relative;
				img {
					display: block;
					width: 100%;
				}
			}
			.works-links:before{
				content:"";
				display:flex;
				width:100%;
				height:100%;
				position:absolute;
				z-index:2;
				background:black;/*好みの色に変えてください。*/
				opacity:0;
				align-items: center;
			}
			.works-links:hover:before{
				opacity:0.4;
				font-family: "Font Awesome 5 Free";
				content: "\f00e";
				font-weight: 900;
				font-size: 8rem;
				justify-content: center;
				padding-top: 2rem;
				color :#fff;
			}
		}
	}
}

//#company　会社概要
#company{
	margin-bottom: 18rem;
	padding-top: 120px;
    margin-top: -120px;
	@include md {
		margin-bottom: 20rem;
	}	
	@include sm {
		margin-bottom: 15rem;
		padding-top: 250px;
  		margin-top: -250px;

	}	
	p {
		text-align: center;
		margin-bottom: 5rem;
		@include xs {
			text-align: justify;
			padding: 2rem;
			margin-bottom: 2rem;
		}	
		span {
			color: #1D8F59;
		}
	}
	.company-bg {
		background-image:url("../img/company-bg.png");
		background-repeat: no-repeat;
		background-position: center 2rem;
		background-size: 100%;
		@include xs {
			background-size: 120%;
		}
	}
	.container {
		position: relative;
		.title {
			margin-bottom: 7rem;
			@include md {
				margin-bottom: 5rem;
			}
			@include xs {
				margin-bottom: 4rem;
			}
		}
		.company-imgbox {
			position: absolute;
			top: 6rem;
			left: 5rem;
			width: 110px;
			@include md {
				top: 4rem;
				left: 2rem;
				width: 90px;
			}
			@include sm {
				top: 5rem;
				left: 2rem;
				width: 75px;
			}
			@include xs {
				width: 55px;
			}
		}
		.company-imgbox2 {
			position: absolute;
			top: 6rem;
			right: 7rem;
			width: 100px;
			@include md {
				top: 4rem;
				right: 3rem;
				width: 80px;
			}
			@include sm {
				top: 5rem;
				right: 3rem;
				width: 65px;
			}
			@include xs {
				width: 50px;
			}
		}
		.company-bgcolor {
			background-color:rgba(255, 255, 255, 0.9);
			padding-top: 7rem;
			@include sm {
				padding-top: 5rem;
			}
			@include xs {
				padding-top: 3rem;
			}
			table {
				width: 100%;
				@include md {
					width: 90%;
					margin: 0 auto;
				}
				@include xs {
					width: 95%;
				}
				th {
					border-bottom: solid 1px #1D8F59;
					width: 18%;
					font-weight: 400;
					padding: 2rem 3rem;
					@include sm {
						padding: 2rem 1rem;
					}
					@include xs {
						width: 25%;
						padding: 1rem;
					}
					&:first-of-type {
						border-top: solid 1px #1D8F59;
					}
				}
				td {
					border-bottom: solid 1px rgba(146,146,146,0.5);
					width: 82%;
					font-weight: 400;
					padding: 2rem;
					margin-bottom: 0;
					@include sm {
						padding: 2rem 1rem;
					}
					@include xs {
						width: 75%;
						padding: 1rem;
					}
					&:first-of-type {
						border-top: solid 1px rgba(146,146,146,0.5);
					}
				}
			}
		}
	}
}

//#contact　お問い合わせ
#contact {
	padding-top: 120px;
    margin-top: -120px;	
	@include sm {
		padding-top: 250px;
		margin-top: -250px;	
	}	
	.contact-bg {
		background-image:url("../img/contact-bg.png");
		background-repeat: no-repeat;
		background-position: center 2rem;
		background-size: 100%;
		@include xs {
			background-size: 120%;
		}
		.container {
			.title {
				margin-bottom: 7rem;
				@include md {
					margin-bottom: 5rem;
				}
				@include xs {
					margin-bottom: 4rem;
				}
			}
			.contact-bgcolor {
				background-color:rgba(255, 255, 255, 0.9);
				padding-top: 7rem;
				@include sm {
					padding-top: 5rem;
				}
				@include xs {
					padding-top: 3rem;
				}
				.contact-p-box p {
					text-align: center !important;
				}
				h2{
					font-size: 2.6rem;
					font-size: 26px;
					@include xs {
						font-size: 20px;
						font-size: 2rem;
					}
				} 
				article {
					@include sm {
						width: 90%;
						margin: 0 auto;
					}
					@include xs {
						width: 95%;
					}
					h2 {
					margin-top: 5rem;
					position: relative;
					z-index: 5;
					}
					#privacypolicy {
					  border: solid 0.7px #000;
					  padding: 2rem;
					  width: 80%;
					  margin-top: 3rem;
					  overflow: scroll;
					  height: 170px; 
						p {
							font-size: 14px;
							font-size: 1.4rem;
						}
						span {
							font-weight: bold; 
						}
					}
				}
			}
		}
		
	}
}

.thanks-box {
	margin: 25rem auto 20rem;
	@include sm {
		margin: 12rem auto 14rem;
	}
	h3 {
		margin-bottom: 2rem;
		font-weight: 600;
		font-size: 40px;
		font-size: 4rem;
		margin-bottom: 4rem;
		@include xs {
			font-size: 30px;
			font-size: 3rem;
		}
	}
	a {
		font-weight: bold;
		padding: 1.4rem 6rem;
		vertical-align: middle;
		line-height: 1;
		border: 1px solid #1D8F59;
		background-color: #1D8F59;
		border-radius: 3rem;
		color: #fff;
		-webkit-appearance: none;
		transition: 0.3s;
		&:hover {
			color: #1D8F59;
			background-color: #fff;
		}
	}
}

/* ---------------------- for JavaScript ここから ---------------------- */
form#mail_form dl dt span.required {
  display: inline-block;
  color: #1A1A1A;
  line-height: 1;
  margin-right: 0.5rem;
  padding: 0.4rem 0.5rem;
  background-color: #FFC800;
  font-size: 90%;
  border-radius: 3px;
  font-weight: normal; }

form#mail_form dl dt span.any {
  display: inline-block;
  color: #004f9c;
  line-height: 1;
  margin-right: 0.5rem;
  padding: 0.4rem 0.5rem;
  background-color: #ffffff;
  font-size: 90%;
  border: 1px solid #004f9c;
  border-radius: 3px;
  font-weight: normal; }

form#mail_form dl dt span.optional {
  display: none; }

form#mail_form dl dd span.error_blank,
form#mail_form dl dd span.error_format,
form#mail_form dl dd span.error_match {
  display: block;
  color: #ff0000;
  margin-top: 3px; }

span.loading {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border-top: 5px solid rgba(255, 255, 255, 0.2);
  border-right: 5px solid rgba(255, 255, 255, 0.2);
  border-bottom: 5px solid rgba(255, 255, 255, 0.2);
  border-left: 5px solid #ffffff;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load-circle 1.0s linear infinite;
  animation: load-circle 1.0s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -25px;
  margin-left: -25px; }

@-webkit-keyframes load-circle {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
@keyframes load-circle {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
/* ---------------------- for JavaScript ここから ---------------------- */
form#mail_form dt {
    border-top: 1.5px solid #c3c3c3;
    margin-top: 1rem;
    padding-top: 2rem;
	font-weight: 400;}

form#mail_form dt:first-child {
  border-top: none; }

form#mail_form dd:last-child {
  padding-bottom: 2rem;
  border-bottom: 1px solid #c3c3c3; }

form#mail_form input[type="text"],
form#mail_form input[type="email"],
form#mail_form input[type="tel"],
form#mail_form textarea {
  width: 100%;
  padding: 0.5rem 1rem;
  border: 1px solid #cccccc;
  border-radius: 3px;
  background: #efefef;
  -webkit-appearance: none;
  font-size: 18px;
  margin-top: 5px; }

form#mail_form input[type="text"]:focus,
form#mail_form input[type="email"]:focus,
form#mail_form input[type="tel"]:focus,
form#mail_form textarea:focus {
  border: 1px solid #b2b2b2;
  background-color: #f1f1f1;
  outline: none; }

form#mail_form ul li input[type="radio"],
form#mail_form ul li input[type="checkbox"] {
  margin-right: 10px;
  margin-top: 7px; }

form#mail_form ul li:first-child input[type="radio"],
form#mail_form ul li:first-child input[type="checkbox"] {
  margin-top: 0px; }

form#mail_form select {
  font-size: 100%;
  margin-top: 5px; }

form#mail_form textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 200px;
  padding: 1rem;
  resize: vertical;
  border: 1px solid #cccccc;
  border-radius: 3px;
  background: #efefef;
  -webkit-appearance: none;
  font-size: 100%;
  font-family: inherit; }

form#mail_form ul {
  list-style-type: none; }

form#mail_form ul li label:hover {
  cursor: pointer; }

form#mail_form input#postal {
  width: 30%;
	@include xs {
		width: 48%;
	}
}

form#mail_form input#postal + a {
  display: inline-block;
  padding: 5px 15px;
  background: #1D8F59;
  border: 1px solid #1D8F59;
  border-radius: 3px;
  color: #fff;
  font-family: inherit;
  text-decoration: none; }

form#mail_form input#postal + a:hover {
  cursor: pointer;
  background: #fff;
  color: #1D8F59;
  border: 1px solid #1D8F59; }

form#mail_form ul.kind-list li {
  display: inline-block;
  min-width: 40%; }

form#mail_form p#form_submit {
  width: 90%;
  margin: 0 auto;
  padding: 30px 0 60px 0; }

form#mail_form input[type="button"] {
  font-weight: bold;
  padding: 1.4rem 6rem;
  vertical-align: middle;
  line-height: 1;
  border: 1px solid #fff;
  background: #1D8F59;
  border-radius: 2.2rem;
  color: #ffffff;
  -webkit-appearance: none;
  transition: 0.3s; }

form#mail_form input[type="button"]:hover {
  cursor: pointer;
  background: #fff;
  color: #1D8F59;
  border: 1px solid #1D8F59; }

form#mail_form input[type="text"], form#mail_form input[type="email"], form#mail_form input[type="tel"], form#mail_form textarea {
  background-color: #E9E9E9; }