@charset "utf-8";
/* CSS Document */
/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
 ＠TOP
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,
kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,
form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,
output,ruby,section,summary,time,mark,audio,video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline
}
html {
    line-height: 1
}
ol,ul {
    list-style: none
}
ul,li{
	padding: 0;
	margin: 0;
}

a{text-decoration: none;display: inline-block;}
a:hover{opacity: 0.8;}
p{margin: 0px auto; text-align: center;line-height: 1.6;}

body{
	background: none;
	font-size: 14px;
	color: #000;
	line-height: 1;
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
	width: 100%;
	background: #fff;
  /*  font-family: 'M PLUS Rounded 1c', sans-serif;*/
	font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;

}

@media(max-width:768px){
	.is-PC{
		display: none!important;
	}
	.is-SP{
		display: inherit;
	}
}
@media(min-width:769px){
	.is-PC{
		display: inherit;
	}
	.is-SP{
		display: none!important;
	}
}
img{max-width: 100%;width: 100%;}
header{
	background: url(../img/main.jpg)no-repeat 0 0;
	padding-bottom: calc(100%*700/1400);
	background-size: 100% auto;
	position: relative;
	height: 0;
}
header2{
/*	background: url(../img/main.jpg)no-repeat 0 0;*/
	padding-bottom: calc(100%*700/1400);
	background-size: 100% auto;
	position: relative;
	height: 0;
}
header2 .logo{
	max-width: 147px;
	position: absolute;
	top: 10px;
  padding:0 10px;
}
header .logo{
	max-width: 147px;
	position: absolute;
	top: 14px;
	padding: 0 10px;
	left: 12px;
}
header .txt_box{
	max-width: 960px;
	margin: 10em auto;
}
header .txt_box h1{
	color: #dd5256;
	font-size: 7.5em;
	font-weight: bold;
}
header .txt_box p{
	font-size: 1.8em;font-weight: bold;
	color: #fff;text-align: left;line-height: 1.5;
	padding: 20px 0 0 0;
	/*text-shadow:1px 0px 5px #454545;*/
}
@media(max-width:768px){
.mainArea{position: relative;}
  header{background: none;position: initial;	padding-bottom:0;
  	height: auto;}
  	header .txt_box{position: absolute;top:-60px;left:10px;}
	header .txt_box h1{
		font-size: 8vw;padding: 0;
	}
  header .txt_box p{
    font-size:3vw;padding: 4px 0;
  }
  header .logo{
  	position: relative;
  }

}
/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
  nav
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */
.gnav_wrap{
	max-width: 960px;
	margin:auto;
	padding-top: 10px;
}
@media(max-width:768px){
  .gnav_wrap{padding-top: 0;margin-bottom: 20px;}
}
nav{
	background: rgba(255, 255, 255, 0.5);
	padding: 20px 0;
}
nav ul{
	display: flex;
  justify-content: flex-end;
	text-align: center;margin-right: 30px;
}
@media(max-width:768px){
  nav ul{margin-right: 0px;
  }
}
nav li{
		text-align: center;
}
nav li a{
	font-size: 18px;
	font-weight: bold;
	margin:0 5px;
	color: #ff8d90;
	text-decoration: none;
}
nav li a::after{
	border-bottom: solid 2px #ff8d90;
  bottom: 0;
  content: "";
  display: block;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  width: 0;
}
nav li a:hover::after{
	width: 100%;
}
.nav-unshown {
  display:none;
}
/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}

#nav-open,
#nav-open span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
#nav-open {
  position: relative;
  width: 30px;
  height: 28px;
	position: absolute;
	top: 20px;
	right: 20px;
}
#nav-open span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 6px;
  background-color: #666;
  border-radius: 4px;
}
#nav-open span:nth-of-type(1) {
  top: 0;
}
#nav-open span:nth-of-type(2) {
  top: 10px;
}
#nav-open span:nth-of-type(3) {
  bottom: 0;
}
#nav-open.active span:nth-of-type(1) {
  -webkit-transform: translateY(0px) rotate(-45deg);
  transform: translateY(0px) rotate(-45deg);
}
#nav-open.active span:nth-of-type(2) {
  opacity: 0;
}
#nav-open.active span:nth-of-type(3) {
  -webkit-transform: translateY(-20px) rotate(45deg);
  transform: translateY(-21px) rotate(45deg);
}


/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}
/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;/*最前面に*/
  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 330px;/*最大幅（調整してください）*/
  height: 100%;
  background: #fff;/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
}
/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}
#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

@media (max-width: 769px){
label {font-weight: bold;color: #fff;text-align: center;line-height: 20px;display: block;margin: 0;
padding: 2%;position: relative;}
nav ul{display: block;}
nav li{ width:100%;border-bottom:1px solid #ff8d90;}
nav li a {padding: 10px 0;font-size: 16px;width: 100%;color: #ff8d90;font-weight: bold;}
}


/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
main
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

section{
	margin: 0;
	text-align: center;
}

section h1{
	color: #dd5256;
	font-size: 35px;
	width: 100%;
	font-weight: bold;
	border-bottom:solid 6px #dd5256;
	padding: 50px 0 10px;
}
section h2{
	color: #dd5256;
	font-size: 6em;	font-weight: bold;
	line-height: 1.2;
  font-family: 'Oswald', sans-serif;
}

section h3{
	font-size: 32px;
	font-weight: bold;
	margin: 10px 0;
	line-height: 1.2;
}
section h4{
	font-size: 21px;
	margin: 2px 0;
	font-weight: bold;
	line-height: 1.2;
}
section p{
	 font-size: 16px;
}
section .txt_area{
  color: #333;
	max-width: 960px;
	margin: auto;
}

@media (max-width: 769px){
  section{margin: 0;}
  section h1{font-size: 4vw;padding: 0;}
  section h2{font-size: 4vw;}
  section h3{font-size: 6vw;}
  section h4{font-size: 3vw;}
  section p{font-size: 3vw;}
  section .txt_area{width: 90%;}
  .patent{padding: 0;}
}



/*  service */
.service{
	background: url(../img/bg1.jpg)no-repeat 0 100%;
	padding-bottom: calc(12%*470/1400);
	background-size: cover;
	position: relative;
}
@media (max-width: 769px){
  .service{	height: auto;	background-size: auto;}
}


/*  patent */
.patent{
	background: #f8efde;

}
.patent .txt_area{
	display: flex;
}
.patent_box{
	border:solid 1px #dd5256;
	background: #fff;
	padding: 10px;
	width: 460px;
	margin: 10px;
	text-align: left;
}
.patent_box .day{
	text-align: right;
}
.patent_box h3{
	font-weight: bold;
	font-size: 21px;
	background: #dd5256;
	color: #fff;
	padding: 4px;
	display: inline-block;
	text-align: left;
}
.patent_box .no{
	font-weight: bold;
	background: #727171;
	color: #fff;
	padding: 4px;
	display: inline-block;
}
.patent_box p{
	text-align: left;
	padding: 0 0 10px 0;
}
.patent_box img{
	text-align: center;display: block;
}
.lps{max-width: 193px;  margin: 30px auto 0;}
.fgf{max-width: 288px;  margin:0 auto 20px;}
@media (max-width: 769px){
  .patent_box{margin: 2px;}
.patent_box h3{font-size:3vw;margin:0 0 10px;}
  .patent_box p{font-size: 2.8vw;line-height: 1.2;}
}


.patent_box2{
	border:solid 1px #dd5256;
	background: #fff;
	padding: 10px;
	max-width: 460px;
	margin: 10px auto;
	text-align: center;
}
.patent_box2 .day{
	text-align: right;
}
.patent_box2 h3{
	font-weight: bold;
	font-size: 21px;
	background: #dd5256;
	color: #fff;
	padding: 4px;
	display: inline-block;
	text-align:  center;
}
.patent_box2 .no{
	font-weight: bold;
	background: #727171;
	color: #fff;
	padding: 4px;
	display: inline-block;
}
.patent_box2 p{
	text-align:  center;
	padding: 0 0 10px 0;
}
.patent_box2 img{
	text-align: center;display: block;
}
.lps{max-width: 193px;  margin: 30px auto 0;}
.fgf{max-width: 288px;  margin:0 auto 20px;}
@media (max-width: 769px){
  .patent_box2{margin: 2px;}
.patent_box2 h3{font-size:3vw;margin:0 0 10px;}
  .patent_box p{font-size: 2.8vw;line-height: 1.2;}
}


/*  Development */
.develo{
	background: #f2e2e2;
	padding-bottom: 60px;
}
.develo h1{
	color: #ad6060;	border-bottom:solid 6px #ad6060;
}
.develo h2{
	color: #ad6060;
}
.develo_box{
	background: #fff;
}
.develo_box h3{
	font-size: 24px;
	padding: 10px 0;
	margin: 0;
	color: #fff;
	font-weight: bold;
}
.develo_box h4{
	font-size: 4.5em;
	text-align: left;
	border-bottom: dotted 2px #dd5256;
}
.develo_box p{
	text-align: left;line-height: 2;font-weight: bold;
}
.devbox1{
	border: 1px solid #ad6060;
}
.devbox1 h3{
	background: #ad6060;
}
.devbox2{
	border: 1px solid #52a4dd;
}
.devbox2 h3{
	background: #52a4dd;
}
.lpsgazo{
	display: inline-block;width: 355px;
}
.pori_gazo{
	display: inline-block;width: 355px;
}
.devbox3gazo{
	display: inline-block;width: 100%;
}
.develo_box h4.txt_s{font-size: 3em;}
.develo_box h4.txt_s span{font-size: 0.5em;}
.boxl{
	display: inline-block;
	width: 56.68%;padding: 2em;
	vertical-align: top;
}
.boxr{
	display: inline-block;
	vertical-align: bottom;
}
.devbox3,.devbox4{width: 460px;display: inline-block;}
.devbox3 h4{color:#dd5256;font-size: 2.2em;border:none;margin-top: 20px;}
.devbox3 p,.devbox4 p{line-height: 1.4;margin-bottom: 10px;}
.devbox4 h4{color:#52a4dd;font-size: 2.2em;border:none;margin-top: 20px;}
.devbox3_in{padding: 0px 30px 20px;}
.dev_wrap{display: flex;justify-content: space-between;}
.develo_box h3.yottu{background: #dd5256;margin-bottom: 30px;}
.yottu_li li{background: #e5e5e5;padding: 10px;font-size: 16px;text-align: left;}
.yottu_li li span{font-weight: bold;}
.yottu_li li:nth-child(even){background:#f1e5e5;}
.devbox5{border:#e89799 1px solid;background: url(../img/txt_bg.gif)repeat 0 0;}
.devbox5 h3{color:#3c3d3d;background-color: #c8c8c8;font-size: 2em;border:none;}
.devbox5 p{padding: 20px 40px;}
.seibun_li{margin-bottom: 30px;}
.seibun_li li{
	display: inline-block;line-height: 1.6;font-size: 1.6em;border-radius:6px;font-weight: bold;
	background: #dd5256;border: 2px solid #dd5256;color: #fff;width: 20%;margin: 0 4px;
}
.seibun_li li.seibun_ao{background: #dbf0ff;border: 2px solid #52a4dd;color: #52a4dd;}
@media (max-width: 769px){
  .develo{padding-bottom: 4vw;}
.develo_box h3{font-size: 4vw;padding: 6px 0;}
.develo_box h4{font-size: 6vw;}
.develo_box h4.txt_s{font-size: 6vw;}
.boxl{width: inherit;padding: 5vw;}
.develo_box p{font-size:2.8vw;line-height: 1.5;}
.devbox3, .devbox4{margin: 2px;}
.devbox3_in{padding: 2vw;}
.devbox3 h4,.devbox4 h4{font-size: 4vw;}
.yottu_li li{font-size:3vw;line-height: 1.4;}
.seibun_li li{font-size: 2vw;margin:0;}
.devbox5 p{padding: 4vw;}
}





/*  report */
.report{
	background: url(../img/txt_bg2.gif)repeat 0 0;
	padding-bottom: 60px;
}
.report h3{color: #685d54;margin-top: 50px;}
.report p{color: #685d54;font-weight: bold;margin-bottom: 10px;}
.btn_box a{border:2px solid #dd5256;font-size: 1.8em;font-weight: bold;padding: 10px 20px;width: 30%;color: #dd5256;background: #fff;margin: 30px 0;}
@media (max-width: 769px){
.report{padding-bottom: 2vw;}
.report h3{margin-top: 2vw;}
.btn_box a{font-size: 3vw;margin: 0;}
}




/*  ayumi */
.ayumi{
	background: url(../img/txt_bg.gif)repeat 0 0;
	padding-bottom: 60px;
}
.ayumi h1{
	background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(221,82,86,1) 6%, rgba(221,82,86,1) 94%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(221,82,86,1) 6%,rgba(221,82,86,1) 94%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(221,82,86,1) 6%,rgba(221,82,86,1) 94%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
	color: #fff;padding: 0;line-height: 2;border:none;max-width: 960px;margin:0 auto 30px ;
}
.ayumibox_area{max-width: 960px;margin: auto;}
.ayumibox_area ul{display: flex;flex-wrap: wrap;}
.ayumibox_area li{width:248px;margin: 15px;border:solid 1px #dd5256; text-align: left;padding:20px 20px 40px;background: #fff;}
.ayumibox_area li p.basyotxt{display: table-cell;background: #dd5256;color: #fff;font-size: 18px;padding: 4px;font-weight: bold;}
.ayumibox_area li p.daytxt{font-size: 14px;font-weight: bold;padding: 0 0 10px;color: #84807f;}
.ayumibox_area li h2{font-size: 21px;background: #727171;color: #fff;display: inline-block;padding: 4px;margin: 4px 0;}
.ayumibox_area li h3{font-size: 24px;}
.ayumibox_area li h4{}
.ayumibox_area li p{text-align: left;font-size: 21px;line-height: 1;}

@media (max-width: 769px){
.ayumi{margin-top: 2vw;padding-bottom:6vw;}
.ayumi h1{font-size: 4.5vw;margin-bottom: 3vw;}
.ayumibox_area li{margin: 2px;padding: 4vw;    width: 40%;}
.ayumibox_area li p.daytxt{font-size: 2.8vw;}
.ayumibox_area li p.basyotxt{font-size: 3vw;}
.ayumibox_area li h2{margin: 2vw 0;font-size: 3.8vw;}
.ayumibox_area li h3{font-size: 4vw;margin: 0;}
.ayumibox_area li p{font-size: 3vw;}
}



/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
footer
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */
footer{
	background: url(../img/footer_bg.png)no-repeat 0 100%;
	padding-bottom: calc(110%*540/1400);
	background-size: 100% auto;
	position: relative;
	height: 0;
	color: #595757;
	margin-top: 2em
}
#footer_area{
	max-width: 960px;
	margin: auto;
	display: flex;
	justify-content: space-between;
}
.foottxt p{
	text-align: left;
	margin:10px 0 0 0;
}

.foottxt img{max-width:200px;}
.company{font-size: 2em;font-weight: bold;padding-top: 20px;}
#footer_area .logo {
	max-width: 300px;
}
@media (max-width: 769px){
  footer{margin-top: 10vw;padding-bottom: calc(110%*800/1400);}
  .footlogo{margin: 3vw;}
  #footer_area .logo{max-width: 100px;}
  .foottxt{margin: 4vw;}
  .foottxt p{font-size:2vw;}
  .foottxt p.company{font-size:4vw;padding-top: 2vw;}
  .foottxt img{max-width:120px;}
}