@charset "UTF-8";


/*★　全体の設定*/

:root { 
　/*--main-color: #e2010f;*/
　--main-color: #b8000b;
  --sub-color: #FBD7D9;
  --font-color: #4d4a4a;
  --back-color: #F3F3F3;
  --body-color: #fff;
  --inner-width: 1200px;
}
@media(max-width: 1200px){
  :root {
    --inner-width: 90%;
  }
}

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	color: var(--font-color);
	line-height: 1;
}

h1,h2,h3,p,th,a,address,i{
	color: var(--font-color);
	font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Meiryo UI", Meiryo, "メイリオ", Osaka, "MS PGothic", arial, helvetica, "sans-serif";
	font-style: normal;
	font-weight: 100;
	text-decoration: none;
}

h2{
	font-size: 2em;
}

h3{
	font-size: 1.4em;
}
address{
  font-size:16px;
}

body{
	max-width: 100%;
	margin: 0 auto;
	background-color: var(--body-color,white);
	font-size: 18px; /*全体のpxのベース*/
}

@media(min-width: 1920px){
  body {
    max-width: 1920px;
  }
}

img{
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}


/*ヘッダー*/

header{
	/*width: 90%;*/
	width: var(--inner-width);
	margin: 0 auto;
}

@media(max-width: 1200px){
	header{
		width: 90%;
	}
}


main{
	width: 100%;
	margin: 0 auto;
}

div.head{
	display: flex;
	justify-content: space-between;
	margin-top: 1%;
}

div.link{
	margin: auto 0;
	margin-left: auto;
	display: flex;
	width: 35%;
	font-size: 1em;
}

div.link a{
	width: 100%;
	display: inline-block;
	text-align: center;
	box-sizing: border-box;
	padding: 3% 0;
}

div.link a:last-of-type{
	background-color: var(--main-color,#b8000b);;
	color: var(--body-color,white);
	border: solid 1px var(--main-color,#b8000b);;
}

div.link a:last-of-type:hover{
	opacity: 0.5;
}

div.link a:first-of-type{
	background-color: white;
	border: solid 1px var(--main-color,#b8000b);;
}

div.link a:first-of-type:hover{
	opacity: 0.5;
}

/*logo*/
header div.head img,footer div.logo img,.globalMenuSp img{
	width: auto;
	height: 80px;
}

nav ul{
	display: flex;
	width: 50%;
	margin: 0.5% auto 2%;
	margin-right: 0;
	justify-content: space-between;
	align-items: center;
}

nav ul li{
	font-size: 1em;
	position: relative;
}

/*nav aのアニメーション*/
nav ul li a{
	position: relative;
}

nav > ul > li> a:hover{
	opacity: 0.5;
}

nav a::after {
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--main-color,#b8000b);;
  transition: all 0.3s ease 0s;
}

nav > ul > li >a:hover::after {
  width: 100%;
}


/*sub nav*/

ul li ul{
    position: absolute;
    top: 1.2em;
    width: 160%;
    left: 0%;
    transform: translateX(
    	-50%); /*会社概要の下に　中央配置*/
}
ul li ul li{
    display: block;
    margin: 0 auto;
    width: 160%;
}
ul li ul li a{
    background-color: #efefef;
    color: var(--font-color);
    display: block;
    text-align: center;
    padding: 1.5em 0.5em;
}

ul li ul li a:hover{
    background-color: #ddd;
}

ul li ul{
    display: none;
}

ul li:hover ul,ul li ul:hover ul{
    display: block; /*hoverで見えるように*/
    z-index: 100;

}


/*★　TOPの設定　スライドショー*/
div.box ul.slider li img{
	width: 100vw;
}


/*4つのmenu*/

div.menu{
	width: var(--inner-width);
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	margin-top: 8%;/*●との距離*/
}

div.menu-btn{
	width: 20%;
	height: auto;
	position: relative;
}

div.menu-btn h2{
	position: absolute;
	top: 50%;
	/*transform: translateY(-50%);*/
	width: 100%;
	text-align: center;
	font-weight: bold;
	font-size: 2.0em;
  color: #000;
  text-shadow: 0 0 1em rgba(255,255,255,1);
}

div.menu-btn img{
	position: relative;
	opacity: 0.2;
}

@media(max-width: 600px){
	div.menu{
		flex-wrap: wrap;
		margin-top: 14%;
    width: 90%;
	}

	div.menu-btn{
		width: 48.5%;
	}

	div.menu-btn:nth-of-type(-n+2){
		margin-bottom: 3%;
	}

}


/*ホバーアニメーション*/

div.menu-btn a:hover h2{
	animation: hoveranime 0.3s linear reverse forwards;
}

div.menu-btn a:hover img{
	animation: hoveranime 0.7s linear forwards;
}

@keyframes hoveranime{
	0%{
		opacity: 0.2;
	}

	100%{
		opacity: 1;
	}
}


/*news*/
section.news{
	/*ピンクの背景*/
	/*width: 90%;*/
	width: 1200px;
	margin: 0 auto;
	background-color: var(--sub-color);
	padding: 2% 4% 3%;
	margin-top: 6%;
}

@media(max-width: 1200px){
	section.news{
		width: 90%;
	}
}
	
section.news h2,section.news h3{
	text-align: center;
}
section.news h2{
	/*padding: 1% 0 0.5%;*/
	font-size: 2em;
}
section.news h3{
	padding: 0% 0 1%;
	color:#666;
	color:#c52c2c;
}

div.news-list{
	/*白い背景*/
	width: 90%;
	margin: 0	auto;
	padding: 2% 0 1%;
	background-color: var(--body-color);
}

div.news{
	/*ニュースのテキストを丸ごと囲む*/
	display: flex;
	flex-direction: column;
	width: 90%;
	margin: 0 auto;
	margin-bottom: 2%;

}
div.news p{
	font-weight: bold;
}

div.news:last-of-type{
	margin-bottom: 0;
}

div.news-text{
	/*→とテキストだけ*/
	display: flex;
	margin: 2% 0;
	border-bottom: dotted 1.5px;
	padding-bottom: 1%;
}

div.news-text p{
	font-weight: normal;
	margin-left: 2%;
}

div.news-text i{
	text-align: center;
	border: solid 1px;
	padding: 0 0.2em 0 0.3em;
	/*↑「＞」が目の錯覚で左右の余白がアンバランスに見えるため調整*/
	border-radius: 100px;
}

@media(max-width: 600px){
	div.news-text i{
		padding: 0.1em 0.2em 0 0.3em;
	}
}

/*こだわり文のページ*/
div.about{
	width: 100%;
	height: auto;
	margin-top: 6%;
	position: relative;
}

div.about img{
	filter: opacity(35%);
  width:100vw;
}


div.about-box{
	width: auto;
	height: auto;
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
}

div.about p{
	font-size: 1.5em;
	line-height: 2;
	font-weight: bold;
	text-shadow: 0px 0px 5px lightyellow;
	text-shadow: 0px 0px 5px #fff;
	width: 80%;
	margin: 0 auto;
  color:#000;
}
.text {
    display: inline-block;
}

@media(max-width: 950px){
	div.about-box{
		margin: 0 auto;
    margin-top:5px;
    margin-bottom: 5px;
	}
	div.about p{
		font-size: 1.3em;
		line-height: 1.5;
		width: 95%;
		margin: 0 auto;
		margin-left: 1.3em;
	}
}
@media(max-width: 600px){

	div.about p{
		font-size: 1.2em;
		line-height: 1.3;
	}
}

@media(max-width: 400px){
	div.about p{
		font-size: 0.9em;
		line-height: 1.15;
	}
}


/*フッター*/

footer{
	/*display: flex;
	justify-content: space-between;*/
	margin-top: 8%;
	padding-top: 4%;
	padding-bottom: 4%;
	background-color: var(--back-color);
}

footer div.logo{
	width: 30%;
	margin: 0 auto;
	margin-left: 5%;
	text-align: center;
}


footer div.logo a:hover{
	filter: opacity(0.5);
}

footer div.logo address{
	text-align: left;
	margin-left: 1em;
	margin-top: 4%;

}

footer div.guide{
	width: 100%;
	margin-right: 5%;
}

#footer-inner {
  margin:0 auto;
  display: flex;
	justify-content: space-between;
  width: var(--inner-width);
}

@media(max-width: 800px){
  #footer-inner {
    display: block;
  }
}

/*フッターsnsアイコン*/
div.sns{
	text-align: right;
}
div.sns a:hover{
	opacity: 0.5;
}

div.sns a{
	width: 3.5em;
	padding: 1em 0;
	border-radius: 10px;
	height: auto;
	text-align: center;
	display: inline-block;
	margin: 1% 0 0.5%;
}

div.sns a:nth-of-type(1){/*twitter*/
	background-color: #1DA1F2;
}

div.sns a:nth-of-type(2){/*facebook*/
	background-color: #3b5998;
}
div.sns a:nth-of-type(3){/*insta*/
	background: #d6249f;
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
}

div.sns a i{
	color: var(--body-color,white);
	font-size: 1.3em;
}

footer nav ul{
	justify-content: space-between;
	margin-right: 0;
	margin-left: auto	;
	width: 	90%;
}

footer nav ul li a{
	display: flex;
	width: 120%;
}

footer nav ul li i{
	border: solid 0.5px gray;
	text-align: center;
	margin-right: 0.2em;
	padding: 0 0.2em 0 0.3em;
}

footer nav > ul > li >a:hover::after {
  width: 85%;
}


/*snsまでのスマホ対応 nav以下は一番下*/
@media(max-width: 800px){
	footer{
		display: block;
	}

	footer div.logo{
		width: 90%;
		margin: 0 auto;
	}

	footer div.logo address{
		width: 90%;
		text-align: center;
	}

	footer div.logo address p:first-of-type{
		margin-bottom: 1%;
	}

	footer div.link{
		width: 85%;
		margin: 4% auto 2%;
	}

	footer div.link a{
		padding: 2.5% 0;
	}

	div.sns{
		text-align: center;
		width: 90%;
		margin: 0 auto;
		margin-bottom: 4%;
	}

	div.sns a{
		margin: 1% auto 0.5%;
	}
}

/*to_topの設定*/
div.to_top{
	filter: ;
	bottom: 5%;
	right: 2.5%;
	position: fixed;
	background-color: var(--main-color,#b8000b);;
	width: 70px;
	height: 70px;
	border-radius: 100px;
	text-align: center;
	filter: opacity(0.7);
	z-index: 50;
}

@media(max-width: 600px){
	div.to_top{
		right: 2%;
		bottom: 2%;
		width: 60px;
		height: 60px;
	}
}

div.to_top:hover{
	filter: opacity(1);
}

div.to_top i,div.to_top p{
	color: var(--body-color,white);
}
div.to_top a{
	margin:  auto;
	position: relative;
	top: 45%;
	transform: translateY(-50%);
	display: block;
}


/*★　surviceページの設定*/

main.service{
	width: 100%;
	text-align: center;
	margin: 0 auto;
}

main.service h2{
	font-size: 2.5em;
	margin: 2% 0;
}

section.lead{
	width: 90%;
	margin: 0 auto;
	border-top: solid 1.5px var(--main-color,#b8000b);;
}

/*赤ピンクボックスの設定*/



section.main h3,section.container h3{
	font-size: 1.5em;
	margin: 8% 0 4%;
}

div.body{
	position: relative;
	margin-bottom: 4%;
	width: 100%;
	height: 550px;
}

@media(max-width:750px){
	div.body{
		height: auto;
		background-color: var(--main-color,#b8000b);;
		margin-bottom: 10%;
		padding: 8% 0 4%;
		margin-top: 8%;
	}

	div.body:nth-of-type(2){
		background-color: var(--sub-corol,#FBD7D9);
	}
}

div.body-r,div.body-l{
	position: absolute;
	top: 0;
	width: 50%;
	height: 100%;
	z-index: 5;
}

@media(max-width:750px){
	div.body-r,div.body-l{
		position: static;
		width: 100%;
		height:100%;
	}
}


div.body-r{
	background-color: var(--main-color,#b8000b);;
	right: 0;
	z-index: 2;
}

div.body-l{
	background-color: var(--sub-color,#FBD7D9);
	left: 0;
	z-index: 2;
}

div.body img{
	width:50%;
	z-index: 15;
	top: 8%;
}
div.body img.left{
	position: absolute;
	left: 5%;
}

div.body img.right{
	position: absolute;
	right: 5%;
}

div.left p,div.right p{
	position: absolute;
	background-color: var(--body-color,white);
	z-index: 40;
	bottom: 40px;
	text-align: left;
	width: 40%;
	line-height: 1.7;
	padding: 4% 1%;
	font-size: 1.2em;
}

div.right p{
	right: 10%;
}

div.left p{
	left: 10%;
}

@media(max-width:750px){

	div.left p,div.right p{
		bottom: 0px;
		z-index: 17;
		padding-right: 1em;
		padding-left: 1em;
	}

	div.right p{
		right: 0%;
		position: relative;
		left: 0%;
		margin: 0 auto;
		width: 90%;
		margin-top: 4%;
	}

	div.left p{
		position: relative;
		margin: 0 auto;
		margin-top: 4%;
		right: 0%;
		left: 0%;
		bottom: 0%;
		width: 90%;
	}

	div.body img{
		width: 90%;
	}

	div.body img.left{
		position: static;
		margin: 0 auto;
	}

	div.body img.right{
		position: static;
		margin: 0 auto;
	}
}



/*jqアニメーション*/
.effect-fade {
  opacity: 0.9;
  transform: translate(100px, 0px); 
  transition: all 1700ms; 
}
.effect-fade2 {
  opacity: 0.9;
  transform: translate(-100px, 0px);
  transition: all 2500ms; 
}
.effect-scroll {
  opacity: 1;
  transform: translate(0, 0);
}

@media(max-width: 750px){
	.effect-fade,.effect-fade2,.effect-scroll{
		transition: none;
	}
}

/*金子式へのリンク*/
div.left a{
	display: block;
	color: var(--body-color,white);
	background-color: red;
	text-align: center;
	box-shadow: 0 4px 0 #ca1c30;
	z-index: 20;
	width: 	10em;
	margin: 0 auto;
	padding: 2%;
	margin-top: 2%;
}

div.left a:hover{
	box-shadow: none;
	transform: translateY(4px);
	filter: opacity(70%);
}


/*number*/
div.body p.number-l,div.body p.number-r{
	position: absolute;
	top: -7%;
	font-size: 2.5em;
	font-weight: normal;
	font-style: italic;
	padding: 2% 1.8%;
	border-radius: 100px;
	background-color: var(--body--color,white);
	font-family: 'Roboto';
	z-index: 20;
}

div.body p.number-r{
	right: 5%;
}

div.body p.number-l{
	left: 5%;
}

@media(max-width:750px){
	div.body p.number-l,div.body p.number-r{
		top: -5%;

	}
}


/*バナー*/

div.bnr{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 	35%;
	margin: 10% auto 0;
}

@media(max-width: 750px){
		div.bnr{
		width: 	65%;
	}
}

div.bnr a{
	border: solid antiquewhite 1px;
}

div.bnr a:nth-of-type(even){
	margin-top: 2%;
}

div.bnr a:hover{
	filter: opacity(50%);
}


/*★　会社概要、atherのページ*/

section.lead img{
	width: 100%;
	margin: 0 auto;
	margin-top: 2%;
}

section.lead h2{
	text-align: center;
	margin: 4% 0 4%;
	font-size: 2.5em;
}

div.recruit{
	/*width: 90%;*/
  width: 1200px;
  margin: 0 auto;
}


/*table*/
.recruit table{
	text-align: left;
	width: 100%;
	margin-bottom: 4%;
}

table a:hover{
	filter: opacity(50%);
}


.recruit.table{/*採用情報のテーブル*/
	width: 90%;
	margin: 0 auto;
}

.recruit tr{
	position: relative;
	border-top: solid 0.5px gainsboro;
	border-bottom: solid 0.5px gainsboro;
}

.recruit th,.recruit td{
	width: 70%;
	padding: 1em 0 1em 5em;
	font-size: 1.2em;
}

.recruit tr{
	border-bottom: solid var(--body-color,white) 1.5px;
}

.recruit tr:last-of-type{
	border-bottom: solid 1px gainsboro;
}

/*左列*/
.recruit th:nth-of-type(1),.recruit td:nth-of-type(1){
	background-color: var(--back-color,#F3F3F3);
	width: 30%;
}

/*行間調整*/
.recruit td,.recruit address{
	line-height: 1.5;
}


/*table スマホ対応*/
@media(max-width: 600px){
  div.recruit {
    width:90%;
  }
	.recruit th:nth-of-type(1),.recruit td:nth-of-type(1){
		text-align: left;
		padding-left: 1.5em;
	}	
}



/*google map*/
iframe{
	max-width: 90%;
	display: block;
	margin: 0 auto;
}

/*★　採用情報コンテンツ*/

p.recruit-none{　/*採用なしバージョンのテキスト*/
	width: 90%;
	text-align: left;
	margin: 0 auto;
}

div.recruit-body{
	background-color: var(--sub-color,#FBD7D9);
	display: flex;
}

div.recruit-body section.topic{
	width: 40%;
	margin: 0 auto;
	padding: 2%;
	text-align: left;
}

div.recruit-body section.topic h3{
	font-size: 1.7em;
	margin-bottom: 4%;
}

div.works{
	width: 40%;
	margin: 0 auto;
	padding: 2%;
}


/*recruit スマホ対応*/
@media(max-width: 600px){

	div.recruit-body{
		display: block;
		margin-bottom: 4%;
	}
	div.recruit-body section.topic{
		width: 90%;
	}

	div.recruit-body section.topic h3{
		font-size: 1.4em;
	}
	div.recruit-body section.topic h3 br{
		display: none;
	}

	div.works{
		width: 90%;
		padding-bottom: 4%;
	}

}


/*★　OEMの図*/

div.wrap-body{
	background-color: var(--sub-color,#FBD7D9);
	width: 100%;
	padding: 2% 0;
}

section.container h3{
	margin-bottom: 2%;
}

div.wrap{
	width: 90%;
	margin: 0 auto;
	padding: 2% 0;
	display: flex;
	text-align: left;
}



div.container-box{
	width: 25%;
	background-color: var(--body-color,white);
}


/*ふきだし*/
p.balloon{
	text-align: center;
	background-color: var(--main-color,#b8000b);;
	padding: 1em 0;
	color: var(--body-color,white);
	position: relative;
}

p.balloon:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 12px solid transparent;
  border-top: 12px solid var(--main-color,#b8000b);;
  z-index: 2;
}

/*p*/
p.text{
	margin-top: 1.5em;
	padding: 1em 1em 2em;
	line-height: 1.5;
}

div.wrap i{
	color: var(--main-color,#b8000b);;
	width: 5%;
	position: relative;
	top: 50%;
	transform: translateY(50%);
	text-align: center;
	margin: 0 auto;
	font-size: 1.3em;
}

@media(max-width:600px){
	div.wrap{
		flex-direction: column;
	}

	div.container-box{
		width: 90%;
		margin: 0 auto;
	}

	div.wrap i{
		width: 90%;
		margin: 2% auto;
		transform: rotate(90deg);
	}
}




.hamburger,.globalMenuSp{
	display: none;
}



/*☆☆スマホ対応*/
@media(max-width: 750px){

	body{
		font-size: 11.5px;

	}
}

@media(max-width: 800px){

/*★ヘッダーの表示設定*/

	div.head div.link,header nav{
		display: none;
	}

	.globalMenuSp div.link{
		width: 85%;
		margin: 4% auto 2%;
	}

	.globalMenuSp div.link a{
		padding: 2.5% 0;
	}

	.globalMenuSp div.link a:first-of-type:hover{
		color: var(--font-type);
	}

	.globalMenuSp div.sns{
		display: flex;
		width: 50%;
		margin: 5% auto 0;
		text-align: center;
		justify-content: space-around;
		padding-bottom: 4%;
	}

	.globalMenuSp ul > div > li{
		border-bottom: dotted 1px silver;
	}

/*ロゴ設定*/
	div.head a {
		margin: 0 auto;
		margin-bottom: 2%;
	}
	.globalMenuSp img{
		margin-top: 2%;
	}
	header div.head img,footer div.logo img,.globalMenuSp img{
		height: 40px;
	}


/*　ハンバーガーボタン */
		
		.hamburger,.globalMenuSp{
			display: block;
		}

		.globalMenuSp > ul > div li > a{
			display: flex;
			justify-content: space-between;
		}

		.hamburger {
		  position: fixed;
		  z-index : 65;
		  left : 5%;
		  top   : 1%;
		  width : 30px;
		  height: 30px;
		  cursor: pointer;
		  text-align: center;
		  
		}
		.hamburger span {
		  display : block;
		  position: absolute;
		  width   : 28px;
		  height  : 1.5px ;
		  left    : 6px;
		  background : var(--font-color);
		  mix-blend-mode: color-dodge;		  
		  -webkit-transition: 0.5s all;
		  -moz-transition   : 0.5s all;
		  transition        : 0.5s all;
		}
		.hamburger span:nth-child(1) {
		  top: 10px;
		}
		.hamburger span:nth-child(2) {
		  top: 20px;
		}
		.hamburger span:nth-child(3) {
		  top: 30px;
		}

		/* ナビ開いてる時のボタン */

		.hamburger.active span:nth-child(1) {
		  top : 16px;
		  left: 6px;
		  -webkit-transform: rotate(-45deg);
		  -moz-transform   : rotate(-45deg);
		  transform        : rotate(-45deg);
		}
		.hamburger.active span:nth-child(2) {
		  left: 60%;
		  opacity: 0;
		  -webkit-animation: active-btn17-bar02 .8s forwards;
		  animation: active-hamburger-bar02 .8s forwards;
		}
  
		@-webkit-keyframes active-hamburger-bar02 {
		  100% {
		    height: 0;
		  }
		}
		@keyframes active-hamburger-bar02 {
		  100% {
		    height: 0;
		  }
		}
		.hamburger.active span:nth-child(3) {
		  top: 16px;
		  -webkit-transform: rotate(45deg);
		  -moz-transform   : rotate(45deg);
		  transform        : rotate(45deg);
		}

		.globalMenuSp {
		  position: fixed;
		  z-index : 60;
		  top  : 0;
		  left : 0;
		  color: #000;
		  background: #fff;
		  text-align: center;
		  transform: translateX(100%);
		  transition: all 0.6s;
		  width: 100%;
		}

		.globalMenuSp ul {
		  background: var(--back-color);
		  margin: 0 auto;
		  padding: 0;
		  width: 100%;
		  height: 100vh;
		}

		.globalMenuSp ul{
			list-style-type: none;
		}
		.globalMenuSp ul div li{
		  list-style-type: none;
		  padding: 0;
		  width: 85%;
		  margin: 0 auto;
		}

		div.sublink{
			width: 96%;
			margin-left: 3.6%;
			font-size: 0.95em;
			margin-top: -0.6em;
		}

		.globalMenuSp ul li:last-child {
		  padding-bottom: 0;
		}
		.globalMenuSp ul li a:hover{
		  color:#fff;
		}

		.globalMenuSp ul li > a{
		  display: block;
		  color: #000;
		  padding: 1.6em 0 0.8em;
		  text-decoration :none;
		}

		/* このクラスを、jQueryで付与・削除する */
		.globalMenuSp.active {
		  transform: translateX(0%);
		}

	/*footer*/
	
	footer nav ul{
		width: 90%;
		margin: 2% auto;
		flex-direction: column;
	}

	footer nav ul li{
		font-size: 1.2em;
		width: 90%;
		margin-bottom: 6%;
		padding-bottom: 1em;
		border-bottom: dotted 1px silver;
	}

	footer nav ul li a{
		display: flex;
		width: 100%;
		justify-content: space-between;
	}

	footer nav ul li a div{
		order: 1;
	}

	footer nav ul li i{
		order: 2;
		border: none;
	}

	footer nav > ul > li >a:hover::after{
		width: 0;
	}

}



/*** お問い合わせフォーム用 ***/
#formWrap {
	width:700px;
	margin:0 auto;
	color:#555;
	line-height:120%;
	font-size:90%;
}
table.formTable{
	width:100%;
	margin:0 auto;
	border-collapse:collapse;
}
table.formTable td,table.formTable th{
	border:1px solid #ccc;
	padding:10px;
}
table.formTable th{
	width:30%;
	font-weight:normal;
	background:#efefef;
	text-align:left;
  vertical-align: middle;
}


/*　簡易版レスポンシブ用CSS（必要最低限のみとしています。ブレークポイントも含め自由に設定下さい）　*/
@media screen and (max-width:572px) {
#formWrap {
	width:95%;
	margin:0 auto;
}
table.formTable th, table.formTable td {
	width:auto;
	display:block;
}
table.formTable th {
	margin-top:5px;
	border-bottom:0;
}
form input[type="text"], form textarea {
	width:80%;
	padding:5px;
	font-size:110%;
	display:block;
}
form input[type="submit"], form input[type="reset"], form input[type="button"] {
	display:block;
	width:100%;
	height:40px;
}
}