@charset "UTF-8";

/* RESET etc
================================================== */
html, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td, figure {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: normal;
  font-size: 100%;
  vertical-align:baseline;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
article, header, footer, aside, figure, figcaption, nav, section { 
  display:block;
}
ol, ul {
  list-style: none;
  list-style-type: none;
}
a {
	color: #000;
	background: transparent;
	text-decoration: none;
}
a:focus{outline:none;}
a:hover {
  text-decoration: none; 
}
img { -ms-interpolation-mode: bicubic; }

ul:after,
ol:after,
article:after,
.wrapper:after,
.clearfix:after{
	content:"";
	display:block;
	clear:both;
}
h1{	font-size:2em;}
h2{	font-size:1.5em;}
h3{	font-size:1.2em;}

html{ 
	height: 100%;
	width:100%;
	position: relative;
	overflow-y: scroll;
  overflow-x: hidden;
}
body { 
	font-family: 'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',Arial,Helvetica,sans-serif;;
	line-height: 1;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	width: 100%;
	height: 100%;
	background-color: #FFF;
/*  overflow-x: hidden;*/
}
main{
  min-height: calc( 100vh - 106px );
/*  overflow-x: hidden;*/
}
@media screen and (max-width: 750px) {
  h1{ font-size: 1.7em;}
  h2{ font-size: 1.3em;}
  dt{ font-size: 0.9em;}
  p{ font-size: 0.8em;}
}
/* header
================================================== */

#header_wrapper{
	height:50px;
	position: relative;
	background-color: #FFF;
	border-bottom: 3px solid #0068B7;	
}

#mainnav {
 	width: 100%;
 	position: fixed;
	z-index: 500;
	color:#FFF;
	background: rgba( 255, 255, 255, 0.8);
	border-bottom: 3px solid #0068B7;	
}
.mainnav_inner{
	max-width:1020px;
	height:50px;
	margin:0 auto;
	display:-webkit-box;
  display:-ms-flexbox;
  display:-webkit-flex;
  display:flex;
  -webkit-box-pack:justify;
  -ms-flex-pack:justify;
  -webkit-justify-content:space-between;
  justify-content:space-between;
  -webkit-align-items: center; 	
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
  padding: 0 20px;
}

.logo img{
	height:35px;
	margin-top:5px;
}

/* メインナビ
======================================================*/

.ul_main {
 	width: 100%;
	height: 50px;
	margin: 0 10px;
	border-left:solid 1px #999;
}
.ul_main li {
  position: relative;
	float:left;
	border-right:solid 1px #999;
	text-align: center;
  
  width: calc( 100% / 8);
}
.ul_main li a{
	padding: 19px 0 17px;
	font-size:14px;
  height: 50px; 
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.5;
}
.ul_main li:hover > a,
.menu_current a{
  background: #8fc31f;
  color: #FFF;
}
.ul_main .menu_tr{
  font-size: 11px;
}
.ul_main .mn_tr a{
  font-size: 11px;
}


/* メインナビ-サブカテゴリ --------------------------*/

.ul_main li ul{
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 0;
  z-index:999;
}
.ul_main li:last-child ul{
  left: -100%;
  width: 100%
}
.ul_main li ul li{
  overflow: hidden;
  height: 0;
  color: #fff;
  transition: .2s;
	border:0;
  width: calc( 300% + 2px);
}
.ul_main li ul li a{
  padding: 13px 15px;
  background: #8fc31f;
  text-align: left;
  font-size: 12px;
  color: #EEE;
  justify-content: flex-start;
  height : 38px;
}
.ul_main li:hover ul li{
  overflow: visible;
  height: 38px;
  border-top: 1px solid #9ad221;
  border-bottom: 1px solid #9ad221;
}

.ul_main li:hover ul li:last-child{
  border-bottom: 0;
}

.ul_main li:hover ul li:last-child a{
  border-radius: 0 0 3px 3px;
}

.bd_01 .mn_01 a,
.bd_02 .mn_02 a,
.bd_03 .mn_03 a,
.bd_04 .mn_04 a,
.bd_05 .mn_05 a,
.bd_06 .mn_06 a,
.bd_07 .mn_07 a,
.bd_08 .mn_08 a,
.bd_09 .mn_09 a{
  background: #8fc31f;
  color: #FFF;
}
.bd_09 .mn_09 a{
  border: solid 1px #8fc31f;
}
.bd_10 .mn_10 i,
.bd_11 .mn_11 i,
.bd_12 .mn_12 i{
  color: #8fc31f;
}



/* メインナビモバイル ------------------------------- */

/* Toggle Button */
#nav-toggle {
    display: none;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 34px;
    height: 36px;
    cursor: pointer;
    z-index: 101;
}
#nav-toggle div {
    position: relative;
}
#nav-toggle span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: #333;
    left: 0;
    -webkit-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
    top: 0;
}
#nav-toggle span:nth-child(2) {
    top: 11px;
}
#nav-toggle span:nth-child(3) {
    top: 22px;
}

@media screen and (max-width: 979px) {
  .mainnav_inner{
    padding-right: 50px;
  }
  .ul_main {
    position: absolute;
    top: -500px;
    width: 100%;
    text-align: center;
    padding: 10px 0;
    -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    margin:0;
    right: 0;
    bottom: 0;
    font-size: 14px;
    border-left: 0;
  }
  .ul_main li {
    float: none;
    background: #111;
    width: 100%;
  }
  .ul_main li a{
    color: #fff;
    padding: 18px 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }	
  .ul_main li ul{
    width: 100%;
    display:none;
  }
  .ul_main .mn_tr a{
    font-size: inherit;
  }
  .mn_tr br{ 
    display: none;
  }
  
  
/* #nav-toggle */
		
  #nav-toggle {
    display: block;
  }
  .open #nav-toggle span:nth-child(1) {
      top: 11px;
      -webkit-transform: rotate(315deg);
      transform: rotate(315deg);
  }
  .open #nav-toggle span:nth-child(2) {
      width: 0;
      left: 50%;
  }
  .open #nav-toggle span:nth-child(3) {
      top: 11px;
      -webkit-transform: rotate(-315deg);
      transform: rotate(-315deg);
  }
  .open .ul_main {
      -webkit-transform: translateY(542px);
      transform: translateY(542px);
  }
}
	
/* サイトマップ コンタクト 検索
-----------------------------------------------------*/

.subnavi_inner {
	max-width: 380px;
	height: 35px;
 	display:-webkit-box;
    display:-ms-flexbox;
    display: -webkit-flex;
    display:flex;
}
.ul_sub {
	display:-webkit-box;
    display:-ms-flexbox;
    display: -webkit-flex;
    display:flex;
}
.ul_sub li {
	margin-left: 15px;
	font-size: 11px;
}
.fa-sitemap, .fa-envelope-o, .fa-search {
	color: #0068B7;
	margin-right: 4px;
}
.div_search {
	font-size: 11px;
	margin-right:10px;
}

.subicons {
	min-width: 180px;
}
.subicons li {
	margin: 0 5px;
	color: #0068B7;
	text-align:center;
	line-height:40px;
	float:left;
}
.subicons i:hover,
.subicons .sicurrent{
	color:#8fc31f;
}

.m_catalog a{
	width:80px;
	height:40px;
	margin: 5px auto;
	font-size: 11px;
	line-height: 1;
	display: table-cell; 
	vertical-align: middle;
	border:solid 1px #333333;
	border-radius: 18px;
}

.monc > a,
.m_catalog > a:hover{
    border: solid 1px #8fc31f;
	background:#8fc31f;
	color:white;
}
@media screen and (max-width: 400px){
  .mainnav_inner{
    padding-left: 10px;
    padding-right: 20px;
  }
	.m_catalog a{
		width:55px;
		margin: 5px auto;
		font-size: 10px;
		border-radius: 15px;
	}
}

/* 検索フォーム --------------------------------------*/

#opensrch{
	width:100%;
}
.srch_inner{
	max-width:1020px;
	margin:0 auto;
}
.srch_inner2{
	width:320px;
	margin-left:auto;
}
#srchBox{ 
width:320px;
color:#000;
background:rgba(17,17,17,0.80);
position: fixed;
z-index: 9999;
}
#srchBox input{
	margin-bottom:0;
}
td.gsc-clear-button {
    display: none;
}
form.gsc-search-box {
    width:inherit;
}
input.gsc-search-button {
	margin-right:13px;	/**/
}
article.srch{
	padding-top:10px;
	padding-bottom:10px;
}
#___gcse_1{
	padding-left:1em;
	padding-right: 1em;
}

/* footer
================================================== */
.footer{
	min-height: 40px;
	background-color: #FFF;
	border-top: 1px solid #CCC;
	padding: 5px;
}
.ul_footer{
	max-width: 1020px;
	text-align: right;
	margin: 0 auto;
}

.footer2{
	width: 100%;
	font-size: 12px;
	color:#FFF;
	background-color: #1b1b1b;
	border-top: 3px solid #0068B7;
	line-height:50px;
}
.footer3{
	max-width:1020px;
	margin:0 auto ;
	padding-right:10px;
	text-align:right;
}

/* トップページ
======================================================*/

/* メインビジュアル --------------------------*/

.visual { 
	width: 100%; 
	height: 94%;
  	position: relative;
	background-image: url(../img/pattern5.png); 
	background-repeat: repeat;
	background-attachment: scroll; 	
}
.pattern {
	top: 0;
	left: 0;									
	width: 100%;
	height: 100%;
	position: absolute;
    display:-webkit-box;
    display:-webkit-flex;
	display:-ms-flexbox;
    display:flex;
	-webkit-justify-content: center;  
	-ms-justify-content    : center; 
	justify-content: center;
	-webkit-align-items: center; 
	-ms-align-items    : center;    
 	align-items: center;
}
.visual_box{
  padding: 20px;
}
.visual_box_p{
	display:flex;
  justify-content: center;
}
.p_1,.p_2{
	color: #FFF;
	text-align:center;
	text-shadow: 3px 3px 10px #000000;
	font-size: 3.3em;
	animation-name: fadeIn;
	animation-duration: 5s;
	border-bottom:solid 1px orange;
}
.p_3{
	color: #FFF;
	text-align:center;
	font-size: 100%;
	line-height: 1.8;
	margin-top:1.5em;
	animation-name: fadeIn;
	animation-duration: 10s;
  text-shadow: 1px 1px 10px #000000;
}
.sp_strong{
	color:yellow;
}
.p_strong{
	font-weight:800;
	font-size:1.3em;
}
.p_1 .br_sp{
  display: none;
}

@media screen and (max-width: 930px) {
	.visual_box_p{
	display: table;
	margin:0 auto;
	}
	.p_1{
	  margin-bottom:0.3em;
	}
  .p_3{
    font-size: 0.95em;
  }
}
@media screen and (max-width: 600px) {
	.p_1{
		line-height: 1.4;
    font-size: 2.3em;
	}
  .p_3{
    font-size: 0.8em;
  }
}
@keyframes fadeIn {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
#video-background {
  position: fixed;
  right: 0; 
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
  width: auto; 
  height: auto;
  z-index: -100;
  background-attachment: fixed;
  background-position: center center; 
}



/* Products --------------------------*/

.products {
	background: rgba( 255, 255, 255, 0.8);
	padding: 50px 2.5% 40px;
	border-top: 3px solid #0068B7;  
}

.inner_pro2 {
	max-width: 1020px;
	margin: 0 auto;
	text-align: center;
}
.h1_pro{
	font-weight:bold;
	letter-spacing: 0.2em;
	margin-bottom:8px;
  display: block;
}
span.h1_pro_e{
  display: block;
	font-size:10px;
	color:orangered;
	margin-bottom:30px;
  overflow: hidden;
  text-align: center;
}
span.h1_pro_e span {
	font-weight: bold;
	letter-spacing: 0.2em;
  position: relative;
  display: inline-block;
  margin: 0 2.5em;
  padding: 0 1em;
  text-align: left;
}
span.h1_pro_e span:before,
span.h1_pro_e span:after {
  position: absolute;
  top: 50%;
  content: '';
  width: 50%;
  height: 1px;
  background-color: orangered;
}
span.h1_pro_e span:before {
  right: 100%;
}
span.h1_pro_e span:after {
  left: 100%;
}

.ul_pro{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.ul_pro li{
	width:31.5%;
	margin:10px 0.75%;
}

@media screen and (max-width: 700px){
  .ul_pro{ justify-content: flex-start;}
  .ul_pro li{ width: 49%; margin: 10px 0.5%;}
}
@media screen and (max-width: 380px){
  .ul_pro li{ width: 98%;}
}

.pro_item {
	width: 100%;
}

.pro_item p {
	font-size:13.8px;
	line-height:1.4;
	text-align:left;
}

.img_item{
	width: 100%;
}
.pro_base {
	position: relative;
}
.pro2 p{
	margin:1em 0;
  letter-spacing: .05em;
}
.pro2 img{
	border:solid 1px #FFF;
	
}
.caption h2{
	font-size:1.2em;
	font-weight:bold;
	background-color: rgba(0,0,0,0.80);
	color:#FFF;
	padding:10px 8px 6px;
	text-align: left;
	position:relative;
}
.caption h2:after{
	content:"\f138";
	font-family: FontAwesome;
	color:#FFF;
	position:absolute;
	right:8px;
	font-size:0.9em;
}
.caption h2:hover{
	background-color: rgba(70,70,70,70.80);
}


/* 新着情報ページ --------------------------*/
.tnews{
	margin-top:20px;
}
.ul_news li {
	max-width: 800px; 
	padding: 15px;
	font-size:14px;
	margin: 0 auto;
	border-bottom: solid 1px #ccc;
}
.ul_news li div {
	margin: 0 auto;
  display: flex;
  align-items: flex-start;
  line-height: 1.5;
}

.ul_news li:first-child {
	border-top: solid 1px #ccc;
}
.ul_news li:nth-child(odd) {
	background:#eaeaea;
}
.ul_news li:nth-child(even){
	background:#f4f4f4;
}
.ul_news li img {
	vertical-align:-0.25em;
}
.ul_news a:hover{
	color:#999;
}
.p_news, .p_prod {
	font-size: 0.8em;
	font-family: メイリオ, monospace;
	color: #FFF;
	padding: 4px 15px 2px;
	margin-right: 10px;
	background-color: #0068B7;
  min-width: 7em;  
}
.p_prod{
	background-color: #7aa61a;
}
.p_date {
	margin-right:10px;
}


/* News --------------------------*/


.news h1{
	text-align: center;
}
span.h1_news{ 
	color:#EEE;
}
span.h1_news_e span:before,
span.h1_news_e span:after{  
	width: 100%;	
}
.news_page {
	max-width: 600px;
	margin: 10px auto;
	text-align: right;
}
.news_page a{
	font-size:0.8em;
	font-family: メイリオ, monospace;
	color: #eee;
}

.news_page a:before{
	content:"\f138";
	margin-right:0.3rem;
	font-family: FontAwesome;
	color:#eee;
} 

.ul_news3 li {
	max-width: 600px; 
	font-size:14px;
	padding: 1em 0;
	margin: 0 auto;
	color:#eee;
	border-bottom:solid 1px #999;
	line-height: 1.5;
}
.ul_news3 li div {
	max-width: 600px; 
	margin: 0 auto;
  display: flex;
  align-items: flex-start;
}
.p_date3{
	margin-bottom:10px;
}
.ul_news3 a{
	color:inherit;
}
.ul_news3 a:hover{
	color:#999;
}
.ul_news3 li:first-child .p_data::after{
  content:"New!";
  display: inline-block;
  color: red;
  font-weight: bold;
  margin-left: 1em;
  font-size: .9em;
}

/* セクション3 Youtube----------------------------------*/

.sec3{
  width:100%;
	background:rgba(0,45,100,0.80);
	background-image: url(../img/pattern.png); 
  padding: 50px 2.5%;
  display: flex;
  justify-content: center;
}
.videot, .news{
  box-sizing: border-box;   
}
.news{
  /*width: 590px;*/
  max-width: 590px;
  padding: 50px 0; 
  flex: 1;
}
.videot{
  color: #FFF;
  text-align: center;
  padding: 30px 0 50px 4%; 
  max-width: 560px;
  flex: 1;
}
.videot h1{
  font-size: 14px;
  padding: .6em ;
  background: #4090d6;
  border-radius: 10px;
  display: inline-block;
  line-height: 1.3;
}
.videot h2{
  font-size: 13px;
  margin-top: 20px;
}
.videot iframe{
  margin-top: 25px;
  aspect-ratio:16/9;
 /* width: 508px;*/
  width: 100%;
}

@media screen and (max-width: 1023px){
  .products, .news, .videot{ padding: 30px 2.5%;}
  .sec3{ display: block;}
  .news, .videot{ margin: 0 auto;}
  .news{ width: auto;}
  .ul_news3{ margin: 0;}
  .videot iframe{ width: 100%; max-width: 600px;}
}
@media screen and (max-width: 750px){
  .ul_news3 li div, .ul_news li div{ flex-wrap: wrap;}
  .news{ width:100%;  max-width: 450px; }
  .p_data { margin-top: 10px; width:100%;}
  .videot{ max-width: 450px;}
  .videot iframe{ width: 100%; max-width: 430px;}
}

/* グループ ----------------------------------*/

.grp_bg{
	background:#FFF;
	border-top: 1px solid #CCC;
	width:100%;
}
.grp{
	padding:20px 0;
	margin:0 auto;
	max-width:820px;
}
.grp img{
	height:50px;
	margin-top:-10px;
}
.p_grp{
  display: block;
	font-size:16px;
	font-weight:bold;
	padding-right:5px;
	padding-left:15px;
  margin: 10px auto;
  line-height: 1.3;
	font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',Arial,Helvetica,sans-serif;
}
.grp a{
	position: relative;
    display: block;
    padding: 0.5em;
    text-decoration: none;
    color: #FFF;
    background:#2F92D8;
    border: solid 1px #2480c1;
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
    text-shadow: 0 1px 0 rgba(0,0,0,0.2);
    text-align: center;
    width:200px;
    margin:5px;
    font-size:0.8em;
}
.grp a:hover{
    border: solid 1px #0161a4;
    box-shadow: none;
    text-shadow: none;
}
@media screen and (min-width: 650px){
	.grp{
    display:-webkit-box;
    display:-ms-flexbox;
    display: -webkit-flex;
    display:flex;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    -webkit-justify-content:space-between;
    justify-content:space-between;
    -webkit-align-items: center; 	
    -ms-flex-align: center;
    -webkit-box-align: center;
    align-items: center;
	} 
}


/* サブページ
=================================================== */

.wrapper{
	max-width: 1020px;
	margin: 0 auto;
	padding: 30px 20px 40px;
}
.wrapper.minh{
  min-height: calc(100vh - 212px);
}
.wrapper.minh2{
  min-height: calc(100vh - 212px);
}
@media screen and (max-width: 600px){
	.wrapper{
		padding:30px 20px;
	}
}
@media screen and (max-width: 400px){
	.wrapper{
		padding:20px;
	}
}

/* パンくずリスト */

.breadcrumb_box {
	width:100%;
	padding: 10px 20px;
}
nav.breadcrumb {
	max-width:980px;
	margin: 0 auto;
}
.breadcrumb li{
	display: inline;
	font-size:12px;
}
.breadcrumb li::after{
  display: inline-block;
  margin-left: .6em;
  color: #959fa5;
  font-family: FontAwesome;
  content: '\f105';
  font-weight: bold;
}

.breadcrumb li:last-child:after{
  content: '';
}
.breadcrumb li:first-child:before{
  font-family: FontAwesome;
  content: '\f015';
  font-weight: normal;
  font-size: 1.1em;
margin-right:0.3rem;
}
.breadcrumb a:hover{
	color:#0068B7;
}

/* タイトル等 --------------------------*/

.ttl_img2 {
	width:100%;
	height:150px;
	overflow: hidden;
	position: relative;
}
.ttl_img2 img{
width:100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.ttl_bg{
	width:100%;
	height:50px;
	background:#1b1b1b;
}

.th1{
	width:100%;
	text-align:center;
	position: relative;
}
.th1 h1 {
	font-size:2.5em;
	color: #333333;
	margin:20px 0 5px;
	font-weight: bold;
	padding-bottom:5px;
	display:inline-block;
	position: relative;
}
.th1 p{	
	font-size:10px;
	color:#8fc31f;
	font-weight: bold;
}

.t2h1{
	width:100%;
	height:70px;
	background:#1b1b1b;
	border-bottom:1px solid #ccc;
}
.t2h1 h1{
	color:white;
	font-size:1.5em;
	line-height: 70px;
}
.t2h1 span{
	margin:0.5em;	
	font-size:0.4em;
	color:#CCC;
}

.box90{
	width:95%;
	margin:0 auto;
}

.box980{
	max-width:1020px;
	margin:0 auto;
  padding: 0 20px;
}
.p_recruit{ 
	margin-top:50px;
}

/* 製品紹介 
======================================================*/

.box_center{
	text-align: center;
}
.h3_prod{
	display:inline-block;
	font-size:1.5em;
	margin-bottom:1.5em;
	padding-bottom:0.3em;
	color:#0068B7;
	border-bottom:solid 1px #0068B7;
}

.box21 li{
	margin:2%;
	width: 46% ;
	float:left;
}
.box21 div{
	position: relative;
}
.box21 h2{
	text-align:center;
	color:white;
	font-size:1.3em;
	font-weight:bold;
	background:#1b1b1b;;
	padding:10px;
	margin-top:-2px;
	margin-bottom:10px;
}
.box21 img{
	width:100%;
	height:auto;
	-webkit-filter: blur(0);
	filter: blur(0);
}
.box21 img:hover{
	-webkit-filter: blur(2px);
 	filter: blur(2px);
 	-webkit-transition: .2s ease-in-out;
 	transition: .2s ease-in-out;
}
.box21 p{
	text-align: left;
	border-left:solid 5px #0068B7;
	padding-left:0.5em;
	line-height: 1.3em;
	min-height:2.4em;
}
a.prd_video{
	display:block;
	padding:0.6em;
	width:6em;
	background:#0068B7;
	color:#eee;
	font-size:0.8em;
	margin:10px 0 10px auto;
	-webkit-transition: .2s ease-in-out;
 	transition: .2s ease-in-out;
}
a.prd_video:hover{
	background:#0773C5;
}
a.prd_video:before {
	content:"\f144";
	font-size:0.9em;
	margin-right:0.1em;
	font-family: FontAwesome;
}

@media screen and (max-width: 750px){
	.box21 li{
		width: 100% ;
		margin: 20px auto;
    float: none;
	}
  .box21 h2{
    font-size: 1em;
  }
}
/*　実績紹介 
======================================================*/

.works123{
	max-width: 900px;
	margin: 0 auto;
	padding: 20px;
}

.works_ttl{
	float:left;
	padding:20px 0;
	width:100%;
	text-align: center;
	margin-right:-280px;
	padding-right:280px;
}
.works_ttl h1 {
	font-size:2.5em;
	color: #333333;
	margin-bottom:5px;
	font-weight: bold;
	padding-bottom:5px;
	display:inline-block;
}
.works_ttl p{	
	font-size:10px;
	color:#8fc31f;
	font-weight: bold;
}
.works_top{
	margin:20px auto 50px;
	max-width:940px;
	position:relative;
}
.works_btn{
	float:right;
	margin-top:1em;
}

p.works_topp{
	float:left;
	line-height:1.5;
	font-size:1.2em;
	font-weight: bold;
	color:#0068B7;
}

.works_box2{
	padding: 20px;
	border:solid 1px #CCC;
/*	width:80%;*/
	margin:0 auto 40px;
	position: relative;
}
.works_img{ 
  display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
 -webkit-box-pack: space-between;
	-ms-flex-pack: space-between;
	justify-content: space-between;
}
.works_img img{
  width: calc( 50% - 5px);
}
.works_img img:first-child{
  margin-right: 10px;
}
.works_img.wi_01 img:first-child,
.works_img.wi_02 img:last-child{
  width: 42.5%;
}
.works_img.wi_01 img:last-child,
.works_img.wi_02 img:first-child{
  width: 56.5%;
}
.works_img.wi_03 img{
  width: 100%;
  margin:0;
}
.works_box2 h2{
	display:inline-block;
	font-size:1.5em;
	padding:0.3em;
	margin-bottom:10px;
	border-left:solid 6px #0068B7;
	font-weight:bold;
	line-height: 1.2;	
}
.works_text{
	padding-bottom:20px;
	line-height: 1.2;
}
#works_all{
	display:-webkit-box;
  display:-ms-flexbox;
  display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
}

.works_prod{
	text-align: right; 
}
.works_prod p,
.works_prod ul,
.works_prod li{
	display: inline-block;
	margin-left: 10px;
  margin-top: 10px;
	font-size:0.9em;
}
.works_prod li{
  margin-left: 0.2em;
}
.works_prod p:after{
	content:"\f101";
	margin-left:0.3rem;
	font-family: FontAwesome;
}
.works_prod a{
	padding:0.1em 0.8em;
	border:solid 1px #0068B7;
	color:#0068B7;
}
.works_prod a:hover{
	padding:0.1em 0.8em;
	border:solid 1px #0068B7;
	background: #0068B7;
	color:white;
}

/*実績紹介 用途別対応表
--------------------------------------------------*/

#box_sp{
	width:790px;
	font-size:0.8em;
}

@media screen and (max-width: 850px){
	#box_sp{
	width:80%;
	font-size:0.8em;
	}
}
#box_sp h1 {
	position: relative;
	padding-left: 40px;
	font-size:2em;
	font-weight: bold;
	color: #333;
	margin-bottom: 10px;
	display:inline-block;
}
#box_sp h1:before,
#box_sp h1:after{
	content: "■";
	position: absolute;
}
#box_sp h1:before{
	left:0;
	top:-3px;
}
#box_sp h1:after{
	left: 5px;
	top: 3px;
	color: #f39700;
}
.table_works{
	width:98%;
	max-width:770px;
	margin:0 auto;
}
.table_works h2{
	display: inline-block;
	font-size:1.2em;
	font-weight: bold;
	background:#333;
	color:#fff;
	padding:8px;
}
.table_works table{
	border-spacing: 0;
	border-collapse:collapse;
	margin-top:10px;
	border:solid 1px #111;	
}
.table_works th,
.table_works td{
	width:50px;
	border:solid 1px #111;	
	vertical-align: middle;
}
.table_works td{
	padding-left:5px;
}
.th_colored th {
	padding: 5px; 
	background: #f39700;
	color:#fff;
	font-weight: 600;
}
.table_works a{
	display: block;
	padding: 5px 20px;
	margin-left: -5px;
	text-align: right;
	color:#0068B7;
	font-weight: 600;
	font-size:1.3em;
	font-family: "Yu Gothic UI","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック", "MS PGothic", "sans-serif", "メイリオ", Meiryo, Osaka ;
}
.table_works a:hover{
	background:#EEE;
}

.table_works a.modal-close{
	padding:0;
}

th.th_category{
	width:100px;
}
th.thtd_big{
	width:450px;
}

#table_nm{
	width:530px;
	font-size:0.8em;
}

#box_sp li{
	float:left;
	width:49%;
}
#box_sp li:first-child{
	margin-right:2%;
}
#box_sp img{
	width:100%;
}
#box_sp p{
	margin-top:10px;
	line-height: 1.2;
}
li.p_sp{
	position:relative;
}
.p_sp p{
	position: absolute;
	right:5px;
	bottom:5px;
	font-size:12px;
}
#tbl_sp p{
	margin:0;
}
#box_sp .modal-close img{
	height:25px;
	width:25px;
	float:right;
}
div#sppp{
	text-align: right;
	width:100%;
	margin:0 auto;
}
#sppp p{
	margin-top:5px;
	margin-bottom:15px;
}
#sppp span{
	color:#0068B7;
	font-weight: bold;
	font-family: "Yu Gothic UI","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック", "MS PGothic", "sans-serif", "メイリオ", Meiryo, Osaka ;
}

/* モーダルウィンドウ*/

.modal-content {
    position:fixed;
    display:none;
    z-index:2;
    margin:0;
    padding:20px;
    border:2px solid #666;
    background:#fff;
}
.modal-overlay {
    z-index:1;
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:120%;
    background-color:rgba(0,0,0,0.75);
}
.modal-open:hover,
.modal-close:hover {
    cursor:pointer;
}


/*　保守対応　 
======================================================*/

.video{
	max-width:680px;
	margin: 0 auto;
}
.video video{
	width:100%;
}

.hoshu_video{
  margin-top: 20px;
}
.p_hoshu{
	margin:40px auto 0;
	max-width:700px;
}
.p_hoshu p{
	line-height: 1.5;
	margin:0.5em;
}
.hoshu_chart{
	text-align: center;
	margin:30px auto;
}
.hoshu_chart img{
	width:100%;
	max-width:652px;
}
.sec_hoshu{
	margin-bottom:30px;
	padding:2%;
	background:#F1F1F1;
	position: relative;
}
.sec_hoshu i.fa-wrench{
	margin-right:0.2em;
}
.sec_hoshu h2{
	font-size:1.3em;
	display:inline-block;
	left:-20px;
	position:  absolute;
	padding: 0.6em 0.6em 0.5em;
	background: #0068B7;
	color: white;	
	font-weight: bold;
	line-height: 1.2;
}

.sec_hoshu h2:before {
	position: absolute;
	content: '';
	top: 100%;
	left: 0;
	border: none;
	border-bottom: solid 15px transparent;
	border-right: solid 20px rgb(149, 158, 155);
}

.p_hoshu10{
	margin:60px 0 30px;
	font-size:1.2em;
	font-weight:bold;
	border-bottom:3px solid orange;
	display:inline-block;
	line-height: 1.5;
}
.p_hoshu11{
	margin-top:30px;
}
.sec_hoshu h3{
	margin-top:20px;
	font-size:1.2em;
	padding: 0.25em 0.5em;
	background: transparent;
	font-weight:bold;
	border-left: solid 5px #8fc31f;
  margin: 70px auto 0;
  width: 90%;
  line-height: 1.5;
}

.p_sechoshu{
	font-size:0.9em;
	margin-top:70px;
}
.hoshuex,
.hoshuex2{
	display:-webkit-box;
    display:-ms-flexbox;
    display: -webkit-flex;
	display:flex;
}

.hoshuex li,
.hoshuex2 li{
	display: table-cell;
	vertical-align: middle;
	padding:5px;
	position:relative;
}

.hoshuex2 p{
  margin-top: 8px;
}
.hoshuex li:nth-child(odd){
	margin:10px 1%;
	width:28%;
}
.hoshuex li:nth-child(even){
	width:2%;
	margin:auto auto;
	color:#8fc31f;
	font-size:1.5em;
}
.hoshuex2{
	width:90%;
	margin:0 auto 20px;
	
}
.hoshuex2 li:nth-child(odd){
	margin:10px 0;
}
.hoshuex2 li:nth-child(even){
	text-align: center;
	margin:auto auto; 
	color:#8fc31f;
	font-size:2.2em;
  padding-bottom: 20px;
}
.sec_hoshu img{
	width:100%;
	height:auto;
}
.hoshu_mg70,
h3.hoshu_mg70{
	margin-top:70px;	
}

@media screen and (max-width: 750px){
  .hoshuex2 li:nth-child(even){	font-size: 2em;}
  .p_hoshu10{ font-size:1em;}
}
@media screen and (max-width: 499px){
  .hoshuex2 li:nth-child(even){	font-size: 1em;}
}
/*　企業情報　 
======================================================*/

.box321 li{
	margin:20px 1%;
	width:23%;
	float:left;
}
@media screen and (max-width: 849px){
.box321 li{	width:31%;}
}
@media screen and (max-width: 699px){
.box321 li{	width:48%;}
}
@media screen and (max-width: 499px){
.box321 li{	width:100%;}
}

.tcompany li{
	border-top: solid 3px #0068B7;
}

.tcompany p{
	margin:10px 0;
}
.tcompany p:before{
	content:"\f18e";
	margin-right:0.3rem;
	font-family: FontAwesome;
	color:#0068B7;
} 

.tcompany img{
	width:100%;
	object-fit: cover;
}

/*　カタログダウンロード
======================================================*/

.ctlg{
	max-width: 1020px;
	margin: 0 auto;
	padding: 40px 0;
}
.box_ctlg3{
	width:960px;
	margin:0 auto;
	padding:20px;
	color:#333;
	border:solid 1px #ccc;
	background:#F7F7F7;
}
.ctlg_ul{
  display: flex;
}
.ctlg_box2{
  display: flex;
}
.ctlg_bousai,
.ctlg_hoshu{
  width: 20%;
}
.ctlg_bousai_ul::after,
.ctlg_hoshu_ul::after{
  display: none;
}
.box_ctlg3 li{
	/*float:left;*/
	margin:10px 0;
	/*width:225px;*/
	padding:0 20px;
	border-right:dotted 1px #ccc;
  width: 20%;
  min-width: 183px;
}
li.ctlg_nobdr{
	border:none;
}

@media screen and (max-width: 800px){
	.box_ctlg3{
		width: 90%;
	}
  .ctlg_bousai,
  .ctlg_hoshu{
    width: 50%;
  }
	.box_ctlg3 li{
		width: 50%;
		border:none;
		padding: 3%;
    min-width: 0;
  }
  .ctlg_bousai li,
  .ctlg_hoshu li{
    width: 100%;
    padding: 6%;
  }
  .ctlg_ul{
    flex-wrap: wrap;
  }
  .ctlg_pdf p{
    font-size: 13px;
  }
}
@media screen and (max-width: 400px){
	.box_ctlg3{
		width:100%;
    border: none;
	}
  .ctlg_box2{
    display: block;
  }
  .ctlg_bousai,
  .ctlg_hoshu{
		width:100%;
	}
	.box_ctlg3 li{
		width:100%;
		border:none;
		padding:0;
		margin-bottom:30px;
  }
}

.box_ctlg3 li{
	text-align: center;
}
.box_ctlg3 img,
a.ctlg_page,
a.ctlg_pdf {	
  margin-bottom:5px;	
}
.box_ctlg3 h3{
	display:inline-block;
	margin:15px 0;
	font-weight:bold;
	padding-left:1.5em;
	position: relative;
}
.box_ctlg3 h3:before,
.box_ctlg3 h3:after{
	content: "□";
	position: absolute;
	width:4px;
	height: 4px;
	color:#8fc31f;
}
.box_ctlg3 h3:before {
  left:0;
  top:-3px;
}
.box_ctlg3 h3:after {
  left: 5.5px;
  top: 3.5px;
		content: "■";
}
.box_ctlg3 h4{
	width:100%;
	padding:0.5em;
	background:#333;
	color:white;
	margin-bottom:10px;	
  font-size: 14px;
}
.box_ctlg3 img{
	width:100%;
	
}
a.ctlg_page,
a.ctlg_pdf {
	display: flex;
  justify-content: center;
  align-items: center;
	width:100%;
	padding:10px 2px;
	background:#FFF;
	font-size: 13px;
	border:solid 1px #ccc;
}
a.ctlg_page:hover,
a.ctlg_pdf:hover{
	border:solid 1px orangered;
  transition: 0.3s linear;
}

.ctlg_pdf{
	position: relative;
	width:100%;
	height:50px;
	text-align: left;
}
.ctlg_pdf img{
  width:35px;
  margin-bottom: 2px;
}
.ctlg_pdf p{
	line-height:1.2em;
  margin-left: 5px;
}

.float_l{
	float:left;
}

.ctlg_txt{
	padding:20px 0;
	margin:10px 20px;
}

/*　サイトマップ
======================================================*/

.sitemap h2,.sitemap h3,.sitemap ul{
	margin-top:15px;
	line-height: 1.2;
}
.sitemap h2{
	font-size:18px;
}
.sitemap h3{
	font-size:15px;
	margin-left:2em;
}
.sitemap a:before{
	content:"\f105";
	margin-right:5px;
	font-family: FontAwesome;
	color:#f39700;
}
.sitemap a:hover{
	color:#FF8E00;
}
.sitemap{
  border: none;
}
.box_sitemap2,.box_sitemap3,.box_sitemap4 {
	padding:20px;
}

@media screen and (min-width: 750px){
	.box_sitemap2,.box_sitemap3,.box_sitemap4{
	  width: 33% ;
	}
	.box_sitemap2, .box_sitemap3{
	  border-right:dotted 1px #CCC;
	}
	.sitemap{
    display:-webkit-box;
    display:-ms-flexbox;
    display: -webkit-flex;
    display:flex;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    -webkit-justify-content:space-between;
    justify-content:space-between;
    
    border-left:dotted 1px #CCC;
    border-right:dotted 1px #CCC;
	}
}
.ul_smsp li{
	margin-top:0.5em;
}

/*　第二階層　
================================================== */

.h1_s{
	margin-bottom:20px;
}
.h2_map h2,
.h1_s h1{
	font-size:2rem;
	padding-bottom:0.5rem;
	margin-bottom:10px;
	border-bottom: solid 3px #0068B7;
	position: relative;
	font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
}

.h2_map h2:after,
.h1_s h1:after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 3px  #8fc31f;
	bottom: -3px;
	width: 30%;
}

.col_main:after{
    content: "";
    display: block;
    clear: both;
	}	


/*　企業情報下
================================================== */

.col_main{
	width:90%;
	max-width:960px;
	margin:0 auto;
}

/*サイドバー*/

.col_side{
	margin:40px 0;
}
.ul_prfl li{
	position: relative;
}
#cm_index a {
	padding-left:10px;
	background:#ececec;
	border-top:solid 1px #ddd;
	font-size:1.1em;
}
#cm_index a:hover {
	color:#000;
}
#cm_index a:before{
	content: "";
}
.ul_prfl li a{
	font-size:0.9em;
	display:block;
	padding:15px;
	border-bottom:solid 1px #ddd;
	border-right:solid 1px #ddd;
	border-left:solid 1px #ddd;
}
.ul_prfl li a:before {
 	content: "\025b6";
	margin-right:0.3rem;
	color:#666;
	font-size:0.6em;
	position:relative;
	top:-0.1em;
}
.ul_prfl li a:hover,
li.cm_current a{
	background:#1D5A9B;
	color:white;
}
.ul_prfl li a:hover:before,
li.cm_current a:before {
 	content: "\025b6";
	margin-right:0.3rem;
	color:white;
}
li.cm_current a:hover{
	background:#1D5A9B;
	color:white;
}

@media screen and (min-width: 650px){
	.col_main{
		width:100%;
		margin-left: -220px; 
		padding-left: 220px; 
		float:right; 
  }
	.col_side{
		margin-top:0px;
		width:180px;		
		float:left; 
	}
}

/*企業情報-会社概要メイン------------------------*/

.dl_prfl { 
	font-size:0.9rem;
    padding: 0;
    background: #efefef;
    border: 1px solid #ddd; 
}

dl.dl_prfl dt, 
dl.dl_prfl dd {
	padding: 10px;
    margin: 0;
    box-sizing: border-box;
	line-height:normal;
}

dl.dl_prfl dt {
    background: inherit;
    border-top: 0;
    border-right: 0;
    border-bottom: 1px solid #ececec;
    border-left: 0;
}

dl.dl_prfl dd {
    border-bottom: 1px solid #ececec;
    background: #fff;
}
 
dl.dl_prfl dd:last-of-type {
    border-bottom: 0;
}

/**  企業情報769px以上  **/
@media screen and (min-width: 769px){

   dl.dl_prfl dt {
        float: left;
        width: 20%;
        font-weight: bold;
        border-top: 1px solid #cdcdcd;
        border-bottom: 0;
    }

    dl.dl_prfl dd {
        margin-left: 20%;
        border-top: 1px solid #cdcdcd;
        border-bottom: 0;
        border-left: 1px solid #cdcdcd; 
        background: #fff;
    }

    dl.dl_prfl dt:first-of-type, 
    dl.dl_prfl dd:first-of-type {
        border-top: 0;
    }
}
.icon_prfl span{
	font-size:0.3em;
	color:#0068B7;
	margin-right:0.5em;
}

.rcrt_contact{
	margin-top:30px;
}
.rcrt_contact dt{
	color:#0068B7;
	font-size:1.4em;
	font-weight: bold;
}
.rcrt_contact dd{
	margin-top:10px;
	line-height:1.5em;
}
p.rcrt_none{
	display:inline-block;
	margin:50px 0 20px;	
	border-bottom: solid 2px #0068B7;
  padding-bottom: 0.2em;
	font-size:1.5em;
}

/*主要取引先 --------------------------*/

.keishou{
	text-align:right;
	margin:-10px 0px 10px;
}
.box_cus{
	background:#FFF;
	border:solid 1px #CCC;
}
.box_cus:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.cus4{
	background:#FFF;
	padding:1em;
}
.cus4 li{
	margin:0.3em;
	padding:0.5em;
	font-size:0.8em;
	border-bottom:dashed 1px #CCC;
	line-height:1.3em;
}

@media screen and (min-width: 568px){
	.cus4,
	.box_cus2 {
	width: 49% ;
	float:left;
	}
}


/*沿革 --------------------------------*/ 

.hstry{
	font-size:0.9rem;
}
.hstry th, 
.hstry td {
	padding:1rem 0;
	border-top:dotted 1px #999; 
	line-height: 1.2;
}
.tr_hstry1 th, 
.tr_hstry1 td{
	border:none; 
}
.hstry th{
	width:160px;
	text-align:left;
	font-weight:bold;
}
.td_month{
	width:50px;
}
.hstry span {
	font-weight: bold;
}
@media screen and (max-width: 500px){
	.hstry th{
	width:7em;		
	}
.hstry span {
	display: inline-block;
	}		
}

/* 所在地一覧  --------------------------*/

table.location{
	margin:20px 0 60px;
	font-size:0.8rem;
	width:100%;
	border-collapse: collapse;
}

.location th,
.location td{
	padding: 1em 0.5em;
	border-bottom:solid 1px #ccc;
}

.location th{
	text-align:left;
	font-weight:bold;
}
.location td{
	line-height:1.4em;
}
.location a{
	color:blue;
}
.location a:hover{
	color:white;
	background:#0072c8;
}
.loc_p{
	text-align: right;
	font-size:0.7em;
	margin-top:-15px;
}
.loc_mapp{
	margin:80px 0;
}

/* 所在地一覧-MAP */

div.map{
	margin-top:100px;
}
.h2_map h2{
	font-size:1.5em;
	letter-spacing: 0.2em;
}
.map h3{
	font-size:1.5em;
	padding-bottom:0.3em;
	border-bottom:solid 3px #0068B7;
	margin-bottom:20px;
} 

table.mapl{
	margin:10px 0;
	font-size:0.8rem;
	width:100%;
	border-collapse: collapse;
	line-height:1.4em;
}
.mapl th,
.mapl td{
	font-size:1em;
	padding: 1em 0.5em;
/*	border-right:solid 1px #ccc;*/
	border-bottom:solid 1px #ccc;
	border-top:solid 1px #ccc; 
}
.mapl th{
	font-weight: bold;
	text-align: left;
}

.gmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
border:solid 5px #CCC;
overflow: hidden;
}

.gmap iframe,
.gmap object,
.gmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* 品質・環境方針  --------------------------*/

.img_pol img{
	margin-bottom:10px;
	width:100%;
}
.p_pol{
	margin:20px 0 30px;
	line-height:1.5em;

}
.box_pol{
	margin:2%;
	padding:20px 5%;
	border:solid 1px #CCC; 
	font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
}

.box_pol li{
	font-size:1.1em;
	line-height:1.5em;
	margin:30px 0;
}

p.num{
	margin-right:10px;
	color:orange;
	font-weight:bold;
	float:left;
	display: inline;
}
.box_pol span{
overflow: hidden;
display: block;
}


/*プロモーション映像 --------------------------*/

.promo{
	display: table;
	margin:50px auto;
}

.promo video{
	width:100%;
	max-width:550px;
}
.promo h2 {
	position: relative;
	color: #333333;
	text-shadow: 0 0 2px white;
	font-size:1.2em;
	margin:5px -1px;
}
.promo h2:before {
	content: "";
	position: absolute;
	background: #9de5ff;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	top: 50%;
	left: -35px;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: -1;
}

/*製品紹介サブ
==================================================*/

.box_sg h1{
	text-align: center;
	font-weight:bold;
	margin-bottom:0.3em;
}
.box_sg h3{
	text-align: center;
	font-size:13px;
	color:#111;
  line-height: 1.5;
}

.prod_point{
	margin:30px 0;
	width:100%;
}

.box_prod{
	margin:50px 0;
	position: relative;
}

@media screen and (min-width: 750px){
	section.sg_viewimage{
    width:48%;
    float:left;
	}
	section.prod_point{
    margin-top:10px;
    margin-left:4%;
    width:46%;
    float:left;
	}
	.box_prod:after{
    content:"";
    display:block;
    clear:both;
	}
}

ul.ul_sg{
	margin:20px auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
  justify-content: center;
  -webkit-flex-wrap:wrap;
  -moz-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
}
ul.ul_sg li{
  margin: 5px;
  
}
.ul_sg a{
	font-size:0.9em;
	display:block;
	padding:8px 30px;
	color:#333;
	border:solid 1px #333;
  min-width: 120px;
  text-align: center;
}
.sg_current a{
	background:#aaa;
	color:white;
	border:solid 1px red;
}
.ul_sg a:hover{
	background:#aaa;
	color:white;	
	border:solid 1px red;
}
.ul_sg2 a{
	font-size: 1em;
}
.ul_sg3 a{
	font-weight:normal;
	width:14em;
	text-align: center;
}

.ul_sg4 a{
	font-weight:normal;
	padding:5px 20px;
}

.ul_sg5 a{
	font-weight:normal;
	padding:5px 20px;
}


/*画像ビュー*/

div#mainImage{
	display: inline-block;
	position: relative;
}
div#mainImage:after {
	position: absolute;
	display: block;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
	transform: rotate(3deg); /* 回転 */
	background: #fff;
	z-index: -1;
}
div#mainImage img{
	width:100%;
	border:solid 8px #f7f7f7;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

div#imageList ul {
	margin-top:25px;
  display:-webkit-box;
  display:-ms-flexbox;
  display: -webkit-flex;
  display:flex;
  -webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center; 
}
div#imageList ul.image_lit{
  -webkit-box-lines:multiple;
  -moz-box-lines:multiple;
  -webkit-flex-wrap:wrap;
  -moz-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
}

div#imageList li {
    list-style-type: none;
    margin-right: 1%;
}
div#imageList li:last-child {
    list-style-type: none;
    margin-right: 0;
}
div#imageList li img {
	width:100%;
	border:solid 1px #eee;
}
div#imageList .image_lit li img {
	height:74px;
	width:inherit;
	border:solid 1px #eee;
	
}
div#imageList li img:hover{
	border:solid 1px red;
}
#imageList p{
	margin-top:10px;
	font-size:0.8em;
	line-height:1.3;
	letter-spacing: -0.02em;
}

.prod_point{
	line-height:1.5em;
}
.prod_point h2{
	font-weight:bold;
	padding-bottom:3px;
}

.prod_point span{
	font-size:1.5em;
	color:#8fc31f;
	font-weight:bold; 
	font-family: Verdana, Geneva, "sans-serif";
}
.sg_alst2 span{
	font-size:1.3em;
}
ul.sg_tokucho{
	margin:15px 0;
	padding:25px;
	background: #F1F1F1;
	border:solid 1px #666; 
}
.sg_tokucho li{
	font-size:1.2em;
	margin:10px 0;
	position: relative;
	padding-left: 1.2em;
  padding-bottom: 0.2em;
	line-height: 1.5;
	border-bottom:dashed 1px #666;
}

.sg_tokucho li:before{ 
	font-family: FontAwesome;
	content: "\f00c";
	position: absolute;
	font-size: 1em;
	left: 0;
	top: 0;
	color: #5ab9ff; 
}
.sg_tokucho a{
	font-weight:bold;
	display:block;
	text-align: right;
}
.sg_tokucho2 li{
	font-size: 0.95em;
}

.box_youto{
  display:-webkit-box;
  display:-ms-flexbox;
  display: -webkit-flex;
  display:flex;
}
p.sp_youto{
	padding-top:2px;
	font-weight:bold;
	min-width:4em;
}
.sp_youto i{
	margin-left:0.5em;
}

.sg_youto li{
	float:left;
	font-size:0.8em;
	background:#8fc31f;
	color:#FFF;
	padding:5px;
	margin:0px 5px 5px 0px;
	border-radius: 5px;
}

.prod_point a{
	background-color:#8fc31f;
	color:white;
	display: table;
	padding:0.5em 2em;
	margin-left:auto;
	font-size:0.9em;
}

.prod_point a:hover{
	background: #84b41d;
}
span.prod_link{
	font-size:0.8em;
	color:white;
	font-weight:normal;
}

.prod_point .gfa_a,
.prod_point .gfa_b,
.prod_point .gfa_c{
  font-size: 1em; 
  cursor: default;
}
.image_lit_2 img{
  display: none;
}

/* 製品サブナビ */

.box_prdnav{
	border-top:solid 1px #ccc;
	width:100%;
}
.box_prdnav2{
	max-width:1020px;
	margin:0 auto;
	padding:20px;
}
.box_prdnav p{
	color:#0068B7;
	margin-top:10px;
	font-weight:bold;
	font-size:1.2em;
}
li.prdnav{
	width: 32%;
	height: 12em;
	font-size: 1em;
	float: left;
	border-right: dotted 1px #999;
	margin: 1em 0;
	padding: 1em;
	line-height: 1.4;
}
li.prdnav:last-child{
	border-right:none;
}
@media screen and (max-width: 650px) {
	li.prdnav{
		width:50%;
	}
	li.prdnav:nth-child(even){
		border:none;
	}
}
.prdnav ul li{
	margin: 0.5em 0;
}
.prdnav ul li:before{
	content:"\f0da";
	margin:0 0.4em;
	font-family: FontAwesome;
	color:#8fc31f;
}
.prdnav ul li a:hover{
	color:#8fc31f;
}


/*動画*/

.prod_video{
	margin-top:30px;
}
.prod_video video{
	width:100%;
}
.prod_video p{
	text-align: center;
	margin-top:5px;
	font-size:0.9em;
	font-weight: bold;
}


/* お問い合わせ・カタログダウンロード 
======================================================*/

.box_contact{
	width:650px;
	text-align: center;
}
.box_contact h1{
	line-height:1.5;
}

.contact_table{
    background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0;
	margin-bottom:30px;
	margin:0 auto;
}
.contact_table th,
.contact_table td{
    padding: 8px;
    line-height: 20px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #ddd;
	font-size:0.9em;
}
.contact_table th{
	width:200px;
}
.contact_table td{
	width:450px;
}
.table-striped tbody>tr:nth-child(odd)>td, 
.table-striped tbody>tr:nth-child(odd)>th {
    background-color: #f9f9f9;
}
select, input, textarea, .uneditable-input {
    margin-left: 0;
	background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border linear .2s,box-shadow linear .2s;
    transition: border linear .2s,box-shadow linear .2s;
	display: inline-block;
    padding: 4px 6px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 20px;
    color: #555;
    vertical-align: middle;
    border-radius: 4px;
}
.contact_table input{
	height:20px;
}
::-webkit-input-placeholder { /* Chrome, Opera */
    color: #b1b1b1;
}
:-moz-placeholder { /* Firefox 19+ */
    color: #b1b1b1;
}
:-ms-input-placeholder { /* IE 10+ */
    color: #b1b1b1;
}
.con_address{
	width:300px;
}
.alert {
    padding: 8px 35px 8px 14px;
    margin-bottom: 20px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    background-color: #fcf8e3;
    border: 1px solid #fbeed5;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.alert, .alert h4 {
    color: #c09853;
}
.alert-danger, .alert-error {
    color: #b94a48;
    background-color: #f2dede;
    border-color: #eed3d7;
}
.label, .badge {
    display: inline-block;
    padding: 2px 4px;
    font-size: 11.844px;
    font-weight: bold;
    line-height: 14px;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
    white-space: nowrap;
    vertical-align: baseline;
    background-color: #999;
}
.label {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.label-important, .badge-important {
    background-color: #b94a48;
}
.input-xxlarge {
    width: 480px;
	min-height:180px;
}

.input-append, .input-prepend {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 0;
    white-space: nowrap;
    vertical-align: middle;
}
.input-append .add-on, .input-prepend .add-on {
    display: inline-block;
    width: auto;
    min-width: 16px;
    padding: 4px 5px;
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
    text-align: center;
    text-shadow: 0 1px 0 #fff;
    background-color: #eee;
    border: 1px solid #ccc;
}
.input-append .add-on, .input-prepend .add-on, .input-append .btn, .input-prepend .btn, .input-append .btn-group>.dropdown-toggle, .input-prepend .btn-group>.dropdown-toggle {
    vertical-align: top;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.input-prepend .add-on:first-child, .input-prepend .btn:first-child {
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
}
.input-prepend input{
	-webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
}

.input-prepend .add-on, .input-prepend .btn {
    margin-right: -1px;
}

div.btn_submit{
	text-align: center;
	margin: 0 auto 30px;
}
input[type="submit"]{
	width: 200px;
	height:50px;
	background:#8fc31f;
	color:#fff;
	font-weight:bold;
	letter-spacing: 0.2em;
	border:none;
}
input[type="submit"]:hover{
	background:#9ad221;
}

.contact_tel{
	width:100%;
}
.contact_tel dl{
	width:500px;	
	margin:0 auto;
		border:dashed 1px #ccc;
	padding:5px;
}
.contact_tel dl:after{
	content:"";
	display:block;
	clear:both;
}
.contact_tel dt, .contact_tel dd{
	padding:5px 10px;
	float:left;
	line-height: 1.5em;
	text-align: left;
}
.contact_tel dt{
	font-size:1.2em;
	font-weight:bold;
}
.contact_tel i{
	color:#0068B7;
	margin-right:0.1em;
}

.box_contact hr{
  border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
}
.send_contact h1{
	border-bottom: dotted 1px #ccc;
}
.send_contact p{
	font-size:0.8em;
	line-height: 1.3;
	margin-bottom:1em;
}
#p_name{
	color:#0068B7;
	font-size:1.2em;
}
.fin_contact{
	margin:30px 0;
	text-align: left;
}

.pp_ctlg{
	margin-bottom:20px;
	line-height: 1.2em;
	text-align: left;
}
table.ctlg_table{
	margin:0 auto;
	border:solid 1px #ddd;
	margin-bottom:20px;
}
.ctlg_table input{
	width:300px;
}
input.input-small{
	width:200px;
}
#powerd_by_me {
	font-size:0.8em;
}

/* 実績紹介ボタン */

.btn-orange{
	padding:10px 20px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 1px rgba(255,255,255,.15),0 7px 0 #bf7004,0 8px 3px rgba(0,0,0,.3);
	border: 1px solid #bf7004;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZhOTMwNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U3ODcwNSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==) #F18D05;
  background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#FBAE44),color-stop(100%,#e78705)) #F18D05;
  background: -webkit-linear-gradient(top,#FBAE44,#e78705) #F18D05;
	background: linear-gradient(to bottom,#FBAE44,#e78705) #F18D05;
	font-weight: bold;
	transition-property: none;
}
.btn-orange:focus, .btn-orange:hover {
  background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#FAEB24),color-stop(100%,#ECB105)) #fba42e;
  background: -webkit-linear-gradient(top,#FAEB24,#ECB105) #fba42e;
  background: linear-gradient(to bottom,#FAEB24,#ECB105) #fba42e;
	color:#FFF;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 1px rgba(255,255,255,.15),0 7px 0 #BA8B03,0 8px 3px rgba(0,0,0,.3);
	border: 1px solid #BA8B03; 
}

/* PAGETOP */
#page-top {
    position: fixed;
    bottom: 35px;
    right: 30px;
}
@media screen and (max-width: 500px){
	#page-top img{
		width:50px;
		height:50px;
	}
	#page-top {
    position: fixed;
    bottom: 10px;
    right: 10px;
	}
}

iframe.contact{
	width:100%;
	height:1100px;
	border:0;
}

/* 設備一覧 */

table.tb_eq{
	border-collapse: collapse;
	width:100%;
}
.tb_eq th,.tb_eq td{
	border:1px solid #ccc;
	padding:8px;
	font-size:13px;
	line-height:1.2;
	text-align: center;
	vertical-align: middle;
}
.tb_eq th{
    background: #efefef;
}
.eq_colored th{
	background:#b5d2f1;
	border:1px solid #bbb;
	padding:12px;
}


/* よくある質問 
======================================================*/
.qna{
  padding-bottom: 70px;
}

.qna_first h3, .qna_s h2{ 
  padding-bottom: 0.2em;
  border-bottom: solid 3px #0068B7;
  letter-spacing: 0.05em;
  line-height: 1.5;
}
.qna_first h3{
  margin-top: 30px;
  font-size: 1.5em;
  position: relative;
  font-weight: bold;
}
.qna_first h3::before{
  content:"";
  display: block;
  width: 30%;
  height: 3px;
  background:#8fc31f;
  position: absolute;
  left:0;
  bottom:-3px;
}
.qna_first p{
  padding: 20px 20px 20px 0;
  line-height: 1.5;
}
.qna_s{
  margin-top: 70px;
}
.qna_s h2{    
  font-size: 1.3em;
  letter-spacing: 0.1em;
}
.qna_s dl{
  margin-top: 20px;
  width: 100%;
  position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
  -webkit-flex-wrap:wrap;
  -moz-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;  
}
.qna_s dt, .qna_s dd{
  padding: 20px 50px 20px 70px;
  border: 2px solid #0068B7;
  position: relative; 
  width: 100%;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
.qna_s dt{  
  background: #0068B7;
  color: #FFF;
  border-bottom: none;
}
.qna_s dd{ font-size: 0.9em; }
.qna_s dt::before, .qna_s dd::before{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-weight: bold;
  position: absolute;
  top: 8px;
  left: 8px;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  font-size: 22px; 
}
.qna_s dt::before {
  content: "Q";
  background: #FFF;
  color: #0068B7;
}
.qna_s dd::before {
  content: "A";
  background: #0068B7;
  color: #FFF;
}
.qna_s dl::after {
  position: absolute;
  top: 28px;
  right: 28px;
  display: block;
  width: 7px;
  height: 7px;
  margin: auto;
  content: '';
  transform: rotate(135deg);
  border-top: 2px solid #FFF;
  border-right: 2px solid #FFF;
}
.qna_s .open::after {
  transform: rotate(-45deg);
}


/* トラブル対応事例 トップ
======================================================*/

.bd_03 main{
  overflow-x: hidden;
}
.proposal img{
  max-width: 100%;
}
.proposal a{
  transition: .3s;
}
.proposal a:hover{
  color:#8fc31f;
}
.proposal p{
  line-height: 1.5;
}
.prp_first h3, .prp_video h2, .prp_point h2, .prp_list h2{ 
  padding-bottom: 0.2em;
  border-bottom: solid 3px #0068B7;
  letter-spacing: 0.05em;
  line-height: 1.5;
  font-weight: bold;
}
.prp_video h2 .point, .prp_point h2 .point{
  color:#0068B7;
  font-weight: bold;
  font-size: 1.5em;
}
.prp_first h3{
  margin-top: 30px;
  font-size: 1.5em;
  position: relative;
}
.prp_first h3::before{
  content: "";
  display: block;
  width: 30%;
  height: 3px;
  background: #8fc31f;
  position: absolute;
  left: 0;
  bottom: -3px;
}
.prp_first p{
  padding: 20px 20px 20px 0;
}
.prp_first_qna{
  margin: 30px auto 20px;
  border: 2px dotted yellowgreen;
  padding: 1.5em;
  position: relative;
  border-radius: 5px;
  display: table;
}
.prp_first_check{
  position: absolute;
  top: -1.3em;
  left: -2px;
  background: yellowgreen;
  color: #FFF;
  padding: .2em .5em;
  letter-spacing: .2em;
  font-size: .8em;
}
.prp_first_qna dt{
  font-weight: bold;
  color: green;
}
.prp_first_qna dd{
  margin-top: 10px;
  line-height: 1.5;
  color: green;
}


.prp_shimei{  
  margin: 80px 0;
  padding: 60px 0;
  position: relative;
}
.prp_shimei::before{
  content:"";
  display: block;
  position: absolute;
  top: 0;
  left: -100%;
  height: 100%;
  width: 200vw;
  background: #0068B7; 
}
.prp_shimei_txt{
  font-size: 18px;
  text-align: center;
  color: #FFF;
  position: relative;
  z-index:1;
}
.prp_shimei_txt .big{
  font-size: 28px; 
  font-weight: bold;
  display: inline-block;
  margin-top: 10px;
  border-bottom: 1px solid;
  padding-bottom: 4px;
}
.prp_video{
  margin-top: 120px;
  text-align: center;
}
.prp_video ul{
  display: flex;
}
.prp_video li{
  width: 33.3333333%;
  margin: 10px;
}
.prp_video li p{
  margin-top: 10px;
}
.prp_video_box{
  margin-top: 20px;
}

.prp_point{
  margin-top: 120px;
  text-align: center;  
}
.prp_point ol{
  display: flex;
  flex-wrap: wrap;  
  justify-content: center;
  margin-top: 40px;
}
.prp_point li{
  width: calc( 25% - 20px);
  margin: 40px 10px;
  position: relative;
}
.prp_point p{
  margin-top: 10px;
}
.prp_point_num{
  position: absolute;
  top:-0.5em;
  left: 0;
  font-style: italic;
  font-size: 42px;
  font-weight: bold;
  color:#0068B7;
}
.prp_point_fuki{
  font-size: .8em;    
  position: absolute;
  right: -60%;
  top: 20%;
  display: block;
  background: #0068B7;
  color: #FFF;
  padding: 10px;
  border-radius: 10px;
}
.prp_point_fuki:before{
  content: "";
  position: absolute;
  top: 50%;
  left: -25px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-right: 15px solid #0068B7;
  z-index: 0;
}
.prp_sec{
  position: relative;
  padding: 20px 0;
}
.prp_sec::before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -50%;
  height: 100%;
  width: 150vw;
  background: #F6F6F6; 
  z-index: -1;
}

.prp_sec h3{
  font-size: 26px;
  display: flex;
  align-items: center;
  color: #444;
  font-weight: bold;
}
.prp_sec h3 .point{
  color: #0068B7;
  font-weight: bold;
}
.prp_sec_num{
  margin-right: 10px;
  font-style: italic;
  font-size: 24px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0068B7;
  color: #FFF;
  width: 1.6em;
  height: 1.6em;
  border-radius: 100px;
  padding-top: 0.15em;
}
.prp_sec_item{
  margin: 60px 0;
  background: #FFF;
  padding: 40px;
}
.prp_sec_txt{
  margin-top: 30px;
  max-width: 52em;
}
.prp_sec_box{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.prp_sec_box .prp_sec_txt{
  width: 55%;
  margin-right: 50px;
}
.prp_sec_box img{
  margin-top: 30px;  
  width: calc( 45% - 50px);
}
.prp_sec_img_box{
  display: flex;
  gap: 10px;
  margin-top: 30px;
}

.prp_sec_1_box{
  display: grid;
  margin: 40px auto;
}

.prp_sec_1_item_1 { grid-area: 1 / 1 / 2 / 2; }
.prp_sec_1_yaji_1 { grid-area: 1 / 2 / 2 / 3; }
.prp_sec_1_item_2 { grid-area: 1 / 3 / 2 / 4; }
.prp_sec_1_yaji_2 { grid-area: 1 / 4 / 2 / 5; }
.prp_sec_1_item_3 { grid-area: 1 / 5 / 2 / 6; }
.prp_sec_1_yaji_3 { grid-area: 2 / 5 / 3 / 6; }
.prp_sec_1_item_4 { grid-area: 3 / 5 / 4 / 6; }
.prp_sec_1_yaji_4 { grid-area: 3 / 4 / 4 / 5; }
.prp_sec_1_item_5 { grid-area: 3 / 3 / 4 / 4; }
.prp_sec_1_yaji_5 { grid-area: 3 / 2 / 4 / 3; }
.prp_sec_1_item_6 { grid-area: 3 / 1 / 4 / 2; }
.prp_sec_1_yaji_6 { grid-area: 4 / 1 / 5 / 2; }
.prp_sec_1_item_7 { grid-area: 5 / 1 / 6 / 2; }
.prp_sec_1_yaji_7 { grid-area: 5 / 2 / 6 / 3; }
.prp_sec_1_item_8 { grid-area: 5 / 3 / 6 / 4; }
.prp_sec_1_yaji_8 { grid-area: 5 / 4 / 6 / 5; }
.prp_sec_1_item_9 { grid-area: 5 / 5 / 6 / 6; }

.prp_sec_1_yaji{
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 2em;
}
.prp_sec_1_yaji_3,
.prp_sec_1_yaji_6{
  padding: 10px 5px ;
}
.prp_sec_1_yaji img{
  width: 50px;
  padding: 5px;
}
.prp_sec_1_yaji_3 img,
.prp_sec_1_yaji_6 img{
  transform: rotate(90deg);
}
.prp_sec_1_yaji_4 img,
.prp_sec_1_yaji_5 img{
  transform: rotate(180deg);
}
.prp_sec_1_item p{
  font-size: .9em;
  margin-top: 3px;
}
.prp_sec_4 .prp_sec_img_box img{
  max-width: 33%;
  margin-top: 20px;
}
.prp_sec_6 .prp_sec_img_box{
  justify-content: center;
}
.prp_sec_6 figure{
  width: 75%;
}
.prp_sec_7 h4{
  margin-top: 40px;
  font-size: 22px;
  font-weight: bold;
  color: #0068B7;
}
.prp_sec_7 h4::before{
  display: inline-block;
  content:"■";
}
.proposal img.prp_sec_7_hikaku{
  max-width: 500px;
  margin: 40px auto;
  display: block;
}
.prp_sec_7_sekou{
  margin-top: 20px;
}
.prp_sec_7_sekou_1,
.prp_sec_7_sekou_3{
  display: flex; 
}
.prp_sec_7_sekou img{
  width: 45%;
  margin: 10px auto;
}

.prp_sec_7_yaji_1,
.prp_sec_7_yaji_2,
.prp_sec_7_yaji_3{
  width: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.prp_sec_7_yaji_2{
  transform: rotate(135deg);
  margin: 0 auto;
}

.prp_banner{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
  position: relative;
  margin-top: 40px;
}
.prp_banner::before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -50%;
  height: 100%;
  width: 150vw;
  background: #F6F6F6;
  z-index: -1;
}
.prp_banner a{
  position: relative;
}
.prp_banner a span{
  display: block;
  background: orange;
  color: #FFF;
  padding: 1.2em 5em;
  border-radius: 30px;
  position: relative;
  z-index: 1;
  transition: .3s;
  font-weight: bold;
}
.prp_banner a span::before{
  font: normal normal normal 1.2em FontAwesome;
  content: "\f105";
  margin-right: 0.5em;
}
.prp_banner a:hover span{
  background: darkorange;
}
.prp_banner a::after{
  position: absolute;
  display: block;
  content:"";
  width: 100%;
  height: 100%;
  border-radius: 30px;
  top:2px;
  left:1px;
  background: #db8e02;
  z-index: 0;
}

/* 対応事例 メイン一覧
======================================================*/

.prp_area .prp_list{
  margin-top: 80px;
}
.prp_list{
  text-align: center; 
  padding: 40px 0;
}
.prp_list h2 .small{
  font-size: 15px;
  font-weight: bold;
}
.prp_list h2 .big{
  font-weight: bold;
  font-size: 29.5px;
  letter-spacing: .1em;
  line-height: 1.2;
}
.prp_list_sec{
  margin-top: 40px;
  text-align: left;
}
.prp_list_sec h3{
 font-weight: bold;
}
.prp_list_sec h3::before{
  content:"■";
}
.prp_list_sec ul{
  margin-top: 20px;
  display: flex;
}
.prp_list_sec ul::after{
  display: none;
}
.prp_list_sec_img ul{
  justify-content: space-between;
}

.prp_list_sec_img li{
  width: calc( 25% - 20px);
  text-align: center;
}
.prp_list_sec_txt li{
  margin-right: 40px;
  display: inline-block;
}
.prp_list_sec_txt p::before{
  font: normal normal normal 14px/1 FontAwesome;
  content:"\f0da";
  margin-right: .3em;
  color: #0068B7;
}
.prp_list_sec p{
  margin-top: 10px;
}

/*対応事例 一覧*/

.prp_list_2 h3{
  background: #111;
  padding: 16px;
  color: #FFF;
}
.prp_list_2 h3 span{
  font-size: .6em;
}
ul.prp_list_list{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
ul.prp_list_list::after{
  display: none;
}
.prp_list_list li{
  width: calc( 33.3333333% - 20px);
  margin-top: 40px;
}
.prp_list_list li >a{
  display: block;
  padding-bottom: 66.666%;
  height: 0;
  overflow: hidden;
  border: 1px solid #DDD;
  text-align: center;
  position: relative;
}
.prp_list_list li >a:hover{
  opacity: .8;
}
.prp_list_list img{
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.prp_list_list p{
  margin-top: 10px;
}

.prp_list_list dt, 
.prp_list_list dd{
  margin-top: 10px;
  display: inline-block;
  font-size: .9em;
}
.prp_list_list dt{
  margin-right: 1em;
  font-weight: bold;
  color: #0068B7;
}
.prp_list_list li:last-child p::after,
._new::after{
  content: "New!";
  display: inline-block;
  color: #FFF;
  margin-left: 0.5em;
  font-weight: bold;
  font-size: 12px;
  line-height: 1;
  background: red;
  border-radius: 20px;
  padding: 3px 7px 2px;
}


.prp_list_pager{
  margin-top: 80px;
  text-align: center;
  display: flex;
  justify-content: center;
}
.prp_list_pager li{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 5px;
}
.prp_list_pager a{
  min-width: 32px;
  min-height: 32px;
  line-height: 32px; 
  border: 1px solid;
  font-size: .8em;
}
.prp_list_pager li.current a{
  background: #333;
  color: #FFF;
}



/* 対応事例個別ページ 
======================================================*/

.t2h1_prp h1{
  font-size: 20px;
}
.prp_page_main h3{
  border-left: 4px solid #111;
  padding-left: 0.5em;
  line-height: 1.5;
  position: relative;
  font-size: 28px;
}
.prp_page_main h3::before{
  content:"";
  display: block;
  width: 4px;
  background: #02A1B7;
  height: 50%;
  bottom:0;
  left:-4px;
  position: absolute;
}
.prp_page_cate dt,
.prp_page_cate dd{
  display: inline-block;
  margin-top: 40px;
}
.prp_page_cate dt{
  background: #02A1B7;
  color: #FFF;
  font-size: .9em;
  padding: 10px 16px ;  
  margin-right: 10px;
}
.prp_page_cate dd{
  margin-right: 20px;  
}
.prp_kadai_q,.prp_kadai_a,.prp_kadai_p{
  margin-top: 30px;
  border: 1px solid #CCC;
  padding: 30px; 
} 
.prp_kadai_q_ttl,.prp_kadai_a_ttl, .prp_kadai_p_ttl{
  font-weight: bold;
  color:#02A1B7;
}
.prp_kadai_q_ttl, .prp_kadai_a_ttl {
  line-height: 1.5;
  font-size: 20px;
}
.prp_kadai_q_ttl span{
  font-size: 16px;
  font-weight: normal;
}
.prp_kadai_q p,.prp_kadai_a p, .prp_kadai_p p{
  line-height: 1.5;
  margin-top: 20px;
}

/* 課題・悩み */
.prp_kadai_q_inner{
  display: flex;
}
.prp_kadai_q_img{
  margin-top: 20px;
  width: calc( 45% - 25px);
}
.prp_kadai_q_txt{
  margin-right: 25px;  
  width: 55%;
}

/* 課題・悩み  - 画像無し */
.no_img .prp_kadai_q_img {
  display: none;
}
.no_img .prp_kadai_q_txt{
  width: auto;
}

/* ご提案 */
.prp_kadai_a{
  position: relative;
  margin-top: 40px;
}
.prp_kadai_a_img{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-top: 20px;
}

.prp_kadai_a_link{ 
  margin-top: 2em;
}
.prp_kadai_a_link a{
  display: block;
  color: darkorange;
}
.prp_kadai_a_link a::before{
  font: normal normal normal 1em FontAwesome;
  content: "\f105";
  margin-right: 0.2em;
}
.prp_kadai_a_link a::after{
  content:"";
  margin-left: 0.2em;
  display: inline-block;
  width: 1em; height: 1em;
  background:url("../catalog/img/pdf.png");
  background-size: cover;  
}
.prp_flex{
  display: flex;
  flex-direction: row-reverse;
  gap: 0 25px;
}
.prp_flex .prp_kadai_a_txt{
  width: 55%;
}
.prp_flex .prp_kadai_a_img{
  width: calc(45% - 25px);
}

/* ポイント */
.prp_kadai_p{
  background: #D3E5E7;
  border: none;
}
.prp_kadai_p_ttl{
  padding-left: 1.3em;
  position: relative;
}
.prp_kadai_p_ttl::before{
  content: "!";
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top:-1px;
  left:0;
  font-size: .8em;
  color: #FFF;
  background: #02A1B7;
  border-radius: 10px;
  width: 1.2em;
  height: 1.2em;
}
.prp_kadai_p_data{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
}
.prp_kadai_p_data dt,
.prp_kadai_p_data dd{
  line-height: 1.5;
  margin-top: 5px;
}
.prp_kadai_p_data dt{
  width: 1.5em;
}
.prp_kadai_p_data dd{
  width: calc( 100% - 2em); 
}
.prp_kadai_memo{
  margin-top: 10px;
  font-size: .9em;
}

/* リンク */
.prp_link{
  margin-top: 60px;
  text-align: center;
}
.prp_link a{
  font-size: 18px;
  color:  darkorange;  
}
.prp_link a::before{
  font: normal normal normal 1em FontAwesome;
  content: "\f105";
  margin-right: 0.3em;
}

/*　コンタクト */
.prp_contact{
  margin-top: 60px;
  background: #02A1B7 url("../proposal/img/bg_01.jpg") no-repeat;
  background-size:cover;
  padding: 60px;
  margin-left: calc( 50% - 50vw);
  margin-right: calc( 50% - 50vw);
  margin-bottom: -40px;
}
.prp_contact h5{
  color: #FFF;
  font-size: 26px;
  line-height: 1.2;
  text-align: center;
  margin:0;
}
.prp_contact_box{
  margin: 20px auto 0;
  display: table;
}
.prp_contact_inner{
  display: flex;
  justify-content: center; 
  align-items: center;
}
.prp_tel_box{
  margin-right:40px;
}
.prp_tel{
  display: block;
  font-size: 1.8em;
  margin-bottom: 10px;
}
.prp_tel::before{
  color:#02A1B7;
  font: normal normal normal 1em FontAwesome;
  content: "\f095";
  margin-right: 0.3em;
}
.prp_time{
  padding-left: 30px;
  font-size: .9em;
}
.prp_contact a{
  position: relative;
}
.prp_contact a span{
  display: block;
  background: orange;
  color: #FFF;
  padding: 1.5em 6em;
  border-radius: 30px;
  position: relative;
  z-index: 1;
  transition: .3s;
  font-weight: bold;
}
.prp_contact a:hover span{
  background: darkorange;
}
.prp_contact a span::before{
  font: normal normal normal 1em FontAwesome;
  content: "\f003";
  margin-right: 0.5em; 
  font-weight: bold;  
}
.prp_contact a::after{
  position: absolute;
  display: block;
  content:"";
  width: 100%;
  height: 100%;
  border-radius: 30px;
  top:2px;
  left:1px;
  background: #db8e02;
  z-index: 0;
}

/* 個別 */
.prp_page_03_img_2 img,.prp_page_03_img_2 img{ max-width: none; width:100%;}
.prp_page_03_img_2{width: 62.5%;}  
.prp_page_03_img_3{width: 37.5%;}  
.t2h1_prp h1.small{font-size: 16px;}

.prp_kadai_a_04 table{
  table-layout: fixed;
  margin-top: 20px;
}
.prp_kadai_a_04 .th_2,
.prp_kadai_a_04 .th_3{
  width: 5em;
  vertical-align: middle;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
.prp_kadai_a_04 th,
.prp_kadai_a_04 td{ 
  text-align: center;
}
.prp_kadai_a_04 th{
  font-size: 22px;
  font-weight: bold;
  font-family: YuGothic, "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
  padding: 1em 2em;
}
.prp_kadai_a_04 td{ 
  padding: 1em 3em;
}
.prp_kadai_a_04 img{ margin-bottom: 10px;}
.prp_kadai_a_04 .th_0{ background: #5b9bd5;}
.prp_kadai_a_04 .th_1{ background: #35b4c5; color: #FFF; width: 50%; padding: 1em;}
.prp_kadai_a_04 .th_2{ background: #d2deef; }
.prp_kadai_a_04 .td_2{ background: #8ad6d2; }
.prp_kadai_a_04 .th_3{ background: #eaeff7; }
.prp_kadai_a_04 .td_3{ background: #d4f7ef; }
.prp_kadai_a_04 .notice{ color: red; font-weight: bold; font-size: .8em;}

/* 共通 */
.br_sp{display: none;}
.br_sptb{display: none;}
.nowrap_pc{ white-space: nowrap;}
.small{font-size: .8em;}

@media screen and (max-width: 1023px){
  
  .t2h1 { display: flex; align-items: center;}
  .t2h1 .box980{ margin: 0;}
  .t2h1 h1{line-height: 1.2; font-size: 20px;}
  
  .nowrap_pc{ white-space: normal;}
  .br_pc{display: none;}
  .br_pctb{display: block;}
  .br_sptb{display: block;}
  .visual_box_p{ line-height: 1.3;}
  .proposal p{ font-size: 15px;}
  .prp_shimei_txt .big{ font-size: 22px;}
  .prp_point p{ font-size: 14px;}
  .prp_point li{width: calc( 33% - 20px);}
  
  .prp_list_list li{width: calc( 50% - 15px); margin-top: 30px;}
  .prp_page_main h3{ font-size: 22px;}
}
@media screen and (max-width: 750px){
  
  .t2h1 h1{ font-size: 16px;}
  .proposal p, .qna_first p{ font-size: .8em;}
  .prp_shimei{ margin: 20px 0; padding: 20px 0;}
  .prp_shimei_txt .big{ font-size: 20px;}
  .prp_first h3,.prp_point h2,.prp_sec h3,.prp_sec_num,
  .prp_sec_7 h4,.prp_list h2 .big,.prp_list_sec h3,.qna_first h3{ 
    font-size: 20px;
  }
  .prp_first_qna{ font-size: 14px; margin:20px auto 0;}
  .prp_first p{ padding: 10px;}
  .prp_video li{ width: 100%;}
  .prp_video_box img{ width: 80%; margin: 10px auto;}
  .prp_video ul{display: block;}
  .prp_point{ margin-top: 80px; }
  .prp_point ol{ position: relative;}
  .prp_point ol::after{display: block; content:""; width: calc( 50% - 20px);}
  .prp_point li{ width: calc( 50% - 20px); margin: 20px 10px;}
  .prp_point_fuki{ right: -120px;}
  .prp_point_num{ font-size: 32px;}
  .prp_sec{ padding: 5px 0;}
  .prp_sec_item{ margin: 40px 0; padding: 20px;}
  .prp_sec_num{ margin-bottom: 5px;}
  .prp_sec_box{ flex-direction: column;}
  .prp_sec_box .prp_sec_txt,.prp_sec_box img{ width:100%; margin:20px auto;}
  .prp_sec_1_yaji img{ width: 35px;}
  .proposal img.prp_sec_7_hikaku{ max-width: 100%;}
  .prp_sec_5 img{ width:80%;}
  .prp_banner a span{padding: 1em 3em;}
  
  .prp_list_list li{width: calc( 50% - 10px); margin-top: 20px;}
  
  .prp_page_main h3{font-size:16px;}
  .prp_page_cate { font-size: 14px;}
  .prp_page_cate dt, .prp_page_cate dd{ margin-top: 10px;}
  .prp_page_cate dt{ width: 7em; padding: 5px; }
  .prp_page_cate dd{ width: calc(100% - 8em); margin-right:0; }
  .prp_kadai_q_ttl, .prp_kadai_a_ttl{ font-size: 18px;}
  .prp_kadai_q, .prp_kadai_a, .prp_kadai_p{ padding: 15px;}
  .prp_kadai_q_inner{ display: block;}
  .prp_kadai_q_txt,.prp_kadai_q_img{ width:100%; }
  .prp_kadai_q_img{ text-align: center;}
  .prp_kadai_a{ display: block;}
  .prp_kadai_a_txt,.prp_kadai_a img{ width:100%; }
  .prp_kadai_a_img{ display: block;}
  .prp_kadai_a img{ margin: 0 0 10px;}
  .prp_kadai_p{ font-size: 14px; }
  .prp_list h2 .small{ font-size: 12px;}
  .prp_list_sec ul{flex-wrap: wrap;}
  .prp_list_sec_img li{width: calc( 50% - 5px);} 
  .prp_contact{ margin-top: 40px; padding: 40px 20px;}
  .prp_contact h5{ font-size: 14px;}
  .prp_contact a span{ padding: 1em 3em;}
  
  .prp_page_03_img_2,.prp_page_03_img_3{ width: 100%;}  
  .prp_flex{ flex-direction: column-reverse;}
  .prp_flex .prp_kadai_a_txt, .prp_flex .prp_kadai_a_img{ width: 100%;}
  .prp_kadai_a_04 th, .prp_kadai_a_04 td{ padding: 1em;}
  .prp_kadai_a_04 th{ font-size: 18px;}  
}
@media screen and (max-width: 576px){
  .br_pctb{display: none;}
  .br_sp{display: block;}
  .prp_sec h3{ display: block; line-height: 1.5;}
  
  .prp_sec_1_item_1 { grid-area: 1 / 1 / 2 / 2; }
  .prp_sec_1_yaji_1 { grid-area: 1 / 2 / 2 / 3; }
  .prp_sec_1_item_2 { grid-area: 1 / 3 / 2 / 4; }
  .prp_sec_1_yaji_2 { grid-area: 2 / 3 / 3 / 4; }
  .prp_sec_1_item_3 { grid-area: 3 / 3 / 4 / 4; }
  .prp_sec_1_yaji_3 { grid-area: 3 / 2 / 4 / 3; }
  .prp_sec_1_item_4 { grid-area: 3 / 1 / 4 / 2; }
  .prp_sec_1_yaji_4 { grid-area: 4 / 1 / 5 / 2; }
  .prp_sec_1_item_5 { grid-area: 5 / 1 / 6 / 2; }
  .prp_sec_1_yaji_5 { grid-area: 5 / 2 / 6 / 3; }
  .prp_sec_1_item_6 { grid-area: 5 / 3 / 6 / 4; }
  .prp_sec_1_yaji_6 { grid-area: 6 / 3 / 7 / 4; }
  .prp_sec_1_item_7 { grid-area: 7 / 3 / 8 / 4; }
  .prp_sec_1_yaji_7 { grid-area: 7 / 2 / 8 / 3; }
  .prp_sec_1_item_8 { grid-area: 7 / 1 / 8 / 2; }
  .prp_sec_1_yaji_8 { grid-area: 8 / 1 / 9 / 2; }
  .prp_sec_1_item_9 { grid-area: 9 / 1 / 10 / 2; }
  
  .prp_sec_1_yaji{
    padding-bottom: 2em;
  }
  .prp_sec_1_yaji_2,
  .prp_sec_1_yaji_4,
  .prp_sec_1_yaji_6,
  .prp_sec_1_yaji_8{
    padding: 10px 0;
  }
  .prp_sec_1_yaji img{
    transform: none;
  }
  .prp_sec_1_yaji_2 img,
  .prp_sec_1_yaji_4 img,
  .prp_sec_1_yaji_6 img,
  .prp_sec_1_yaji_8 img{
    transform:rotate(90deg);
  }
  .prp_sec_1_yaji_3 img,
  .prp_sec_1_yaji_7 img{
    transform:rotate(180deg);
  }
  .prp_kadai_a_04 th, .prp_kadai_a_04 td{ padding: 10px;}
  .prp_kadai_a_04 th{ font-size: 15px;}
  .prp_kadai_a_04 td{ font-size: 12px; line-height: 1.3;}
}



/* 準備中
======================================================*/

.temp_p{
  width: 100%;
  height: calc( 100vh - 282px);
  display: flex; 
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.temp_p p{
  margin-top: -2em;
  font-size: 1.5em;
}
.temp_p a{
  margin-top: 40px ;
  font-size: .9em; 
  background: orange;
  color: #FFF;
  padding: 1em 2em;
  border-radius: 3em;
}
.temp_p a:hover{
  background: yellowgreen;
  color: #FFF;
}
.temp_p a::before{
  font: normal normal normal 1.2em FontAwesome;
  content: "\f105";
  margin-right: 0.5em;
}

/* 終了
======================================================*/

.page_ended{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.page_ended_link{
  display: inline-block;
  margin-top: 2em;
  font-size: .8em;
}
.page_ended_link:hover{
   color: #8fc31f;
}
.page_ended_link::before{
  content: "\f0da";
  margin: 0 0.2em;
  font-family: FontAwesome;
  color: #8fc31f;
}