@charset "UTF-8";
/*============================================================================================================
	module css
============================================================================================================*/
/*------------------------------------------
	枠内にfitするimg
------------------------------------------*/
.imgFitBox {
  overflow: hidden;
}

.imgFitBox img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  font-family: 'object-fit: cover; object-position: center;';
}

.imgFitBox.contain {
  /* fit = contain */
}

.imgFitBox.contain img {
  -o-object-fit: contain;
  object-fit: contain;
  font-family: 'object-fit: contain; object-position: center;';
}

@media print{

.imgFitBox img  {
vertical-align:top;
}
.imgFitBox.contain  {
vertical-align:top;
}
.imgFitBox.contain img {
height:auto;
vertical-align:top;
}
}


/*------------------------------------------
	hoverで拡大するimg
------------------------------------------*/
.imgLinkBox {
  display: block;
}

@media screen and (min-width: 701px) {
  .imgLinkBox img {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  .imgLinkBox:hover {
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
  }
  .imgLinkBox:hover img {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
  }
}

/*------------------------------------------
	スクロールされたらフェードイン
------------------------------------------*/
.fade-in {
  opacity: 0.1;
  -webkit-transform: translate(0, 40px);
  -ms-transform: translate(0, 40px);
  transform: translate(0, 40px);
  -webkit-transition: all 700ms;
  -moz-transition: all 700ms;
  -o-transition: all 700ms;
  transition: all 700ms;
}

.fade-in.fade-in.scrollin {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}

.fade-in2 {
  opacity: 0;
  -webkit-transition: all 1200ms 500ms;
  -moz-transition: all 1200ms 500ms;
  -o-transition: all 1200ms 500ms;
  transition: all 1200ms 500ms;
}

.fade-in2.scrollin2 {
  opacity: 1;
}

@media screen and (max-width: 700px) {
  .fade-in {
    -webkit-transform: translate(0, 80px);
    -ms-transform: translate(0, 80px);
    transform: translate(0, 80px);
  }
  .fade-in2 {
    -webkit-transform: translate(0, 80px);
    -ms-transform: translate(0, 80px);
    transform: translate(0, 80px);
  }
}



@media print{

  .fade-in {
    opacity: 1;
      transition:none;
    -webkit-transform:none;
    -ms-transform: none;
    transform: none;
  }
  .fade-in2 {
    opacity: 1;
      transition:none;
    -webkit-transform:none;
    -ms-transform: none;
    transform: none;
  }

	
}




/*------------------------------------------
	flex set
------------------------------------------*/
.flex00 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

/* 両端配置 / 高さ100%揃え */
.flex01 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

/* 両端配置 / 水平中央配置 / 高さ要素次第 */
.flex02 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

/* 両端配置 / 上寄せ / 高さ要素次第 */
.flex03 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

/* 左寄せ / 上寄せ / 高さ100%揃え */
.flex04 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

/* 左寄せ / 上寄せ / 高さ要素次第 */
.flex05 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

/* 左寄せ / 水平中央配置 / 高さ要素次第 */
.flex06 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

/* 中央配置 / 高さ100%揃え */
.flex07 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/* 余白均等配置 / 高さ100%揃え */
.flex08 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

/* 中央配置 / 水平中央配置 / 高さ要素次第 */
.flex0 {
  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;
}

small {
	font-size:10px;
}

/*------------------------------------------
	pageTopBox
------------------------------------------*/




/*============================================================================================================
	index
============================================================================================================*/
/*------------------------------------------
	loading
------------------------------------------*/
#progress-bar {
  width: 0;
  height: 5px;
  background: #905ca2;
  position: fixed;
  left: 0;
  top: 0;
  -webkit-transition: 1.5s ease;
  -o-transition: 1.5s ease;
  transition: 1.5s ease;
  z-index: 100;
}

#loader-bg {
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 9999;
  /*background: url( ../img/bg_sec.gif) repeat-x top left #fff;*/
	background-color:#fff;
	background-size: 9px 742px;
}

#loader-bg #loader {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  z-index: 2;
}

#loader-bg #loader img {
  position: absolute;
  top: 0;
  bottom: 0px;
  left: 0;
  right: 0;
  margin: auto;
	width:165px;
	height:123px;
}

@media screen and (max-width: 700px) {
  #loader-bg #loader img {
		width:100%;
		padding: 40px;
		box-sizing: border-box;
  }
	#loader-bg #loader img {
		max-width: 236px;
		    height: auto;
	}
}

@keyframes flash {
  0% {
    opacity: .4;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: .4;
  }
}

@-webkit-keyframes flash {
  0% {
    opacity: .4;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: .4;
  }
}


/*------------------------------------------
	header
------------------------------------------*/



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

	
}



/*------------------------------------------
	toppage
------------------------------------------*/

/*------------------------------------------
	mainvisual
------------------------------------------*/
#mainVisual {
	background-color: #eaeaea;
	padding:10px 0;
}

#mainVisual .sp-slide.slbgCGreen {
	background-color: #63ba64;
}
#mainVisual .slBox {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
}
#mainVisual figure {
	float: left;
	width:50%;
	padding: 80px;
	height: 100%;
	box-sizing:border-box;
}
#mainVisual .txtbox {
	float:right;
	width:50%;
	color:#fff;
	box-sizing: border-box;
	padding: 80px 80px 80px 0px;
}
#mainVisual .txtbox.txtBlack {
	color:#000;
	padding: 80px 80px 80px 40px;
  background-color: rgba(255,255,255,0.7);
}
#mainVisual h2 {}
#mainVisual h2 .ttlEng {
	margin-bottom: 20px;
	font-size: 1.5vw;
}
#mainVisual h2 .ttlMain {
	margin-bottom: 20px;
	font-weight: normal;
	font-size: 2.8vw;
}
#mainVisual .txtbox p {
	margin-bottom: 30px;
	font-size: 1.2vw;
}

#mainVisual .btn {}
#mainVisual .btn a {}

#mainVisual .sp-buttons {
	position: absolute;
}
.slider img{ 
	zoom:1;
}

#mainVisual .sp-buttons {
  margin: 20px auto 0;
  padding: 0 0 0 0px;
  z-index: 2;
}
#mainVisual .sp-buttons .sp-button {
  width: 10px;
  height: 10px;
  border: none;
  margin: 0 10px;
  background: #E0E0E0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#mainVisual .sp-buttons .sp-button.sp-selected-button {
  transform: scale(1.3);
  background: #bfbfbf;
}


.bgMov {
	  width: 100%;
	height: 100%;
	position: relative;
	overflow:hidden;

}
/*
.bgMovinner {
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
  left: 0;
  min-height: 100%;
  min-height: 100vh;
  min-width: 100%;
  min-width: 100vw;
  position: absolute;
  top: 0;
}
*/
 

/*
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0px; 
	height: 0; 
	overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
*/


.ytBg {
        width: 100%;
        min-height: 480px;
        overflow: hidden;
        position: relative;
}
 
.ytBg iframe {
        width: auto;
        height: auto;
        min-height: 150%;
        min-width: 150%;
        position: absolute;
}



@media screen and (min-width: 1201px) {
#mainVisual h2 .ttlEng {
	margin-bottom: 20px;
	font-size: 18px;
}
#mainVisual h2 .ttlMain {
	margin-bottom: 20px;
	font-weight: normal;
	font-size: 36px;
}
#mainVisual .txtbox p {
	margin-bottom: 30px;
	font-size: 14px;
}


}
@media screen and (max-width: 900px) {
#mainVisual .txtbox p {
display:none;
	}

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

#mainVisual figure {
	float: none;
	width:auto;
	max-width: 200px;
	height: 50%;
	padding: 20px;
	box-sizing:border-box;
	    margin: 0 auto;
}
#mainVisual .txtbox {
	float:none;
	width:100%;
	padding: 0px 20px 20px;
	position: absolute;
	bottom:0px;
	left:0px;
}
#mainVisual .txtbox.txtBlack {
	color:#000;
	padding: 20px 20px;
  background-color: rgba(255,255,255,0.7);
}
	
	#mainVisual h2 .ttlEng {
	margin-bottom: 10px;
	font-size: 18px;
}
#mainVisual h2 .ttlMain {
	margin-bottom: 20px;
	font-weight: normal;
	font-size: 18px;
}

#mainVisual .sp-slide {
    text-align: center;
}	
	
	
	#mainVisual .btnType1 a	{
		font-size:13px;
	}
	#mainVisual .sp-buttons {
    margin: 10px auto 0;
}
	
}







/*------------------------------------------
	sec News
------------------------------------------*/
.secNews {}
.secNews .inner {
	padding: 100px 20px 40px;
	background: url(../img/img_wood.png) no-repeat bottom left;
	background-size: 96px 100px;
}
.secNews h2 {
	float:left;
	width:30%;
}
.secNews h2 .ttlMain {
	display: block;
	font-weight: normal;
}
.secNews h2 .ttlEng {
	display: block;
	color:#ff8f47;
}

.secNews ul {
	float:right;
	width:70%;
	margin-bottom: 30px;
	border-bottom:#e5e5e5 1px solid;
}
.secNews li {
	border-top:#e5e5e5 1px solid;
}
.secNews dl {
	display: table;
	width: 100%;
}
.secNews dt {
	font-size: 12px;
	display: table-cell;
	width:200px;
}
.secNews dt span {
	    background-color: #ff8f47;
    color: #fff;
    padding: 0px 10px;
    margin-left: 20px;
    width: 100px;
    display: inline-block;
    text-align: center;
}

.secNews .newsEvent dt span {background-color: #905ca2;}
.secNews .newsNews dt span {background-color: #ff8f47;}
.secNews .newsExamples dt span {background-color: #4db8fa;}
.secNews .newsStaff dt span {background-color: #63ba64;}

.secNews dd {
		display:  table-cell;
}
.secNews dd a {
	font-size: 14px;
	display: block;
	padding:20px 40px;
	position: relative;
	
}
.secNews dd a:after {
  font-family: "Font Awesome 5 Free";
  content: '\f30b';
  font-weight: 900;
	font-size:10px;
	position: absolute;
	top:50%;
	right:0px;
	margin-top: -8px;
	color: #ff8f47;
}
.secNews .newsEvent dd a:after { color: #ff8f47;}
.secNews .newsNews dd a:after { color: #905ca2;}
.secNews .newsExamples dd a:after { color: #4db8fa;}
.secNews .newsStaff dd a:after { color: #63ba64;}

.secNews .btnType1 {
	float:left;
	margin-top: 50px;
}
.secNews .bCOrange {}

@media screen and (min-width: 1201px) {
	.secNews .inner {
	padding: 100px 0px 40px;
}
}

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

	.secNews .inner {
    padding: 60px 0px 40px;
}
	.secNews h2 {
    float: none;
    width: auto;
		margin-bottom: 20px;
}
	.secNews ul {
    float: none;
    width: auto;
    margin-bottom: 30px;
    border-bottom: #e5e5e5 1px solid;
}
	.secNews .btnType1 {
    float: none;
    margin-top: 20px;
}
	.secNews dl {
    display:block;
		padding: 10px 20px;
}
	.secNews dt {
    display: block;
}
	.secNews dd {
    display: block;
}	
	.secNews dd a {
    padding: 0px;
}
	.secNews dt span {
    margin-left: 10px;
    width: 100px;
    font-size: 10px;
		    padding: 0px 0px;
}

}

/*------------------------------------------
	sec feature
------------------------------------------*/
.secFeature {
		display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
	color: #fff;
}
.featureAbout {
	width: 50%;
	background: url(../img/bg_about.jpg) no-repeat top left;
	background-size: cover;
}
.featureAbout .featureBox {
	float: right;
	width: 100%;
	max-width: 600px;
	padding: 50px 20px;
	position: relative;
}
.featureAbout .txtbox {
	width: 100%;
}

.featureNetwork {
		width: 50%;
	background: url(../img/bg_network.png) no-repeat top left;
	background-size: cover;
}

.featureNetwork .featureBox {
	float: left;
	width: 100%;
	max-width: 600px;
	padding: 50px 20px;
	position: relative;
}
.featureNetwork .txtbox {
		width: 100%;
}

.secFeature h2 .ttlMain {
	display: block;
	margin-bottom: 10px;
}
.secFeature h2 .ttlEng {
	display: block;
	margin-bottom: 20px;
}
.secFeature .txtbox p {
	margin-bottom:30px;
}
.featureAbout .bCWhite a {
	color: #63ba64;
}
.featureNetwork .bCWhite a {
	color: #4db8fa;
}



@media screen and (min-width: 701px) {
.featureAbout .bCWhite a:hover {
	color: #fff;
}
.featureNetwork .bCWhite a:hover {
	color: #fff
}

}
@media screen and (min-width: 1201px) {
.featureAbout {
	position: relative;
}
	.featureAbout figure {
		position: absolute;
		bottom: 50px;
		right:0px;
	}
	.featureAbout figure .img2x {
	zoom:normal;
	width:276px;
	height:auto;
	}

	.featureAbout .txtbox p {
		width:330px;
	}
.featureNetwork .featureBox {
	position: relative;
}	
.featureNetwork	figure {
		position: absolute;
		top: 60px;
		right:0px;
	}
	.featureNetwork	figure .img2x {
	zoom:normal;
	width:357px;
	height:auto;
	}
.featureAbout .txtbox {
	max-width: 350px;
}
.featureNetwork .txtbox {
	max-width: 350px;
}
.featureAbout .featureBox {
	padding: 50px 0px 50px 0px;
}
.featureNetwork .featureBox {
	padding: 50px 0px 50px 50px;
}
	
}
@media screen and (max-width: 1200px) {
	

	.featureAbout	figure {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 30%;
	}
.featureNetwork	figure {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 30%;
	}
}
@media screen and (max-width: 700px) {
.featureAbout {
    width: 100%;
}	
	.featureAbout .featureBox {
    float: none;
    max-width:none;
}
	.featureNetwork {
    width: 100%;
}
	.featureNetwork .featureBox {
    float:none;
    max-width: none;
}
	.secFeature h2 .ttlMain {
	text-align: left;
		margin-bottom: 30px;
		    margin-right: 32%;
}
.secFeature h2 .ttlEng {
	text-align: left;
}
}




/*------------------------------------------
	sec Example
------------------------------------------*/
.secExample {
	background-color:#eaeaea;
}
.secExample .inner {
	padding:130px 20px;
}
.secExample .ttlBox {
	text-align: center;
	margin-bottom: 40px;
}
.secExample .ttlMain {
	font-weight:normal;
}
.secExample .ttlEng {
	color:#4db8fa;
}
.secExample h2{
	margin-bottom:40px;
}
.secExample .ttlBox p {
	color:#7d7d7d;
	font-size:18px;
}

.exampleBox {
			display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
	margin-bottom:40px;
}
.exampleBox article {
	width:49%;
	background-color:#fff;
	margin-bottom:2vw;
	border-bottom:#e1e1e1 2px solid;
}
.exampleBox article a,
.exampleBox article > span
{
	display:block;
  position:relative;
}

.exampleBox article a:before,
.exampleBox article > span:before{
  content:'';
  display:block;
  width:100%;
  height:0;
  padding-bottom:50%;
}

.exampleBox article a figure,
.exampleBox article > span figure
{
  position:absolute;
  width:50%;
	height: 100%;
	top:0px;
	left:0px;
    overflow: hidden;
}

.exampleBox article a figure img,
.exampleBox article > span figure img{
    -moz-transition: -moz-transform 0.3s ease-out;
    -webkit-transition: -webkit-transform 0.3s ease-out;
    -o-transition: -o-transform 0.3s ease-out;
    -ms-transition: -ms-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
}

.exampleBox article a .txtbox,
.exampleBox article > span .txtbox
{
	  position:absolute;
  width:50%;
	height: 100%;
	top:0px;
	right:0px;
	padding: 20px 10px;
}

.exampleBox article a .txtbox h3,
.exampleBox article > span .txtbox h3
{
	margin-bottom: 10px;
	font-size:1vw;
}
.exampleBox article a .txtbox h3:after,
.exampleBox article > span .txtbox h3:after
{
	content:"";
	display: block;
	width:100%;
	height:2px;
	background-color:#4db8fa;
	margin-left:-50px;
}
.exampleBox article a .txtbox dt,
.exampleBox article > span .txtbox dt{
	color: #4db8fa;
	font-size:2vw;
	line-height: 1.4em;
}
.exampleBox article a .txtbox dd,
.exampleBox article > span .txtbox dd{
	position: absolute;
	bottom:20px;
	left:10px;
	font-size:1vw;
}

.exampleBox article a .txtbox:after {
  font-family: "Font Awesome 5 Free";
  content: '\f30b';
  font-weight: 900;
	font-size:10px;
	position: absolute;
	bottom:0px;
	right:10px;
	color: #4db8fa;
}
.secExample .btnType1 {
	text-align: center;
}


@media screen and (min-width: 1201px) {
.secExample .inner {
	padding:130px 0px;
}
	.exampleBox article {
	margin-bottom:25px;
}
.exampleBox article a .txtbox,
	.exampleBox article > span .txtbox{
	padding: 30px;
}
	.exampleBox article a .txtbox h3,
		.exampleBox article >span .txtbox h3
	{
	font-size:12px;
	margin-bottom: 20px;
}
.exampleBox article a .txtbox dt,
	.exampleBox article > span .txtbox dt{
	font-size:24px;
}
.exampleBox article a .txtbox dd,
	.exampleBox article > span .txtbox dd{
	font-size:12px;
	bottom:30px;
	left:30px;
}

}
@media screen and (min-width: 701px) {
	.exampleBox article a:hover figure img {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}
}
@media screen and (max-width: 700px) {

.secExample .inner {
	padding:60px 10px;
}
	.secExample h2 {
    margin-bottom: 20px;
}
	.secExample .ttlBox {
    margin-bottom: 50px;
}
.secExample .ttlBox p {
    font-size: 14px;
}
	.exampleBox {
    margin-bottom: 0px;
}
	.exampleBox article {
    width: 100%;
		margin-bottom:40px;
}
	.exampleBox article a figure,
	.exampleBox article > span figure{
    position:relative;
    width: 100px;
    height: 100px;
    margin-top: -30px;
		float: left;
}
	.exampleBox article a .txtbox,
	.exampleBox article > span .txtbox{
    position: relative;
    width: 100%;
    height: 100%;
    top: 0px;
    right: 0px;
    padding: 40px 20px 20px;
}
.exampleBox article a:before,
	.exampleBox article > span:before{
    display:none;
}

	
	.exampleBox article a .txtbox h3,
	.exampleBox article > span .txtbox h3{
    margin-bottom: 25px;
    font-size: 12px;
    margin-left: 100px;
}
	.exampleBox article a .txtbox h3:after
	.exampleBox article > span .txtbox h3:after{
    width: auto;
    margin-left: -30px;
}
	.exampleBox article a .txtbox dt,
	.exampleBox article > span .txtbox dt{
    font-size: 16px;
		margin-bottom: 10px;
}
	.exampleBox article a .txtbox dd,
	.exampleBox article > span .txtbox dd{
    position: relative;
    bottom: 0px;
    left: 0px;
    font-size: 12px;
}

	
	
	
	
	
}


/*------------------------------------------
	sec products
------------------------------------------*/
.secProducts {
}
.secProducts .inner {
	padding:130px 20px;
}
.secProducts .ttlMain {
	font-weight:normal;
}
.secProducts .ttlEng {
	color:#4db8fa;
}
.secProducts h2{
	margin-bottom:40px;
	text-align: center;
}


.productsBox {
			display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
	margin-bottom:40px;
}

.productsBox .box {
		width:32%;
	background-color:#4db8fa;
 background-image: radial-gradient(#3da1de 5%, transparent 10%), radial-gradient(#3da1de 5%, transparent 10%);
 background-size: 7px 7px;
 background-position: 0 0, 10px 10px;
	border:#4db8fa 1px solid;
	margin-bottom:2vw;
}
.productsBox .box a {
	display:block;
  position:relative;
}
.productsBox .box a:before{
  content:'';
  display:block;
  width:100%;
  height:0;
  padding-bottom:40%;
}
.productsBox .box figure {
  position:absolute;
  width:40%;
	height: 100%;
	top:0px;
	left:0px;
    overflow: hidden;
	background-color: #fff;
}
.productsBox .box img {
    -moz-transition: -moz-transform 0.3s ease-out;
    -webkit-transition: -webkit-transform 0.3s ease-out;
    -o-transition: -o-transform 0.3s ease-out;
    -ms-transition: -ms-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
}
.productsBox .box .txtbox {
	  position:absolute;
  width:60%;
	height: 100%;
	top:0px;
	right:0px;
	padding: 20px 10px;
	color:#fff;
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center; 
 align-items: center;
 -webkit-justify-content: center; 
 justify-content: center; 
}
.productsBox .box .txtbox h3 {
	font-size:1.2vw;
	position: relative;
}
.productsBox .box .txtbox h3:after {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
	background: url(../img/line_dot.png) repeat-x top left;
	background-size: 7px 3px;
    /*background-color: #4db8fa;
    background-image: radial-gradient(#fff 10%, transparent 20%), radial-gradient(#fff 10%, transparent 20%);
    background-size: 8px 8px;
    background-position: 0 0, 7px 7px;*/
    position: absolute;
    bottom: -5px;
}

.secProducts .btnType1 {
	text-align: center;
}

@media screen and (min-width: 1201px) {
	.productsBox .box .txtbox h3 {
	font-size:15px;
	position: relative;
}
	.secProducts .inner {
    padding: 130px 0px;
}
}

@media screen and (min-width: 701px) {
	.productsBox .box a:hover figure img {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}
}
@media screen and (max-width: 700px) {
	.secProducts .inner {
    padding: 60px 10px;
}
	.productsBox {
    -webkit-box-pack: center;
    -ms-flex-pack: initial;
    justify-content: space-around;
}
	.productsBox .box {
    width: 100%;
		max-width:350px;
}
	.productsBox .box figure {
    width: 50%;
}
	.productsBox .box .txtbox {
    width: 50%;
}
	.productsBox .box a:before {
    padding-bottom: 50%;
}
	.productsBox .box .txtbox {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: normal;
    justify-content: normal;
}
	.productsBox .box .txtbox h3 {
    font-size: 14px;
}
}

/*------------------------------------------
	movie
------------------------------------------*/

.secMovie {
	background: url(../img/bg_cloud.png) repeat-x bottom -70px left #fdf4f7;
	background-size:242px 153px;
	padding:130px 0px;
}
.secMovie .ttlBox {
	text-align: center;
	position: relative;
	margin-bottom: 40px;
}
.secMovie .ttlBox h2 {
	position: relative;
}
.secMovie .ttlBox h2:before {
	position: absolute;
	bottom:20px;
	left:0px;
	content:"";
	/*width:48%;*/
	width:40%;
	height: 1px;
	background-color: #905ca2;
}
.secMovie .ttlBox h2:after {
	position: absolute;
	bottom:20px;
	right:0px;
	content:"";
	/*width:49%;*/
	width:40%;
	height: 1px;
	background-color: #905ca2;
}
.secMovie .ttlMain {
    font-weight: normal;
}
.secMovie .ttlEng {
    color:#905ca2;
}

.secMovie .ttlBox .ytlink {
	position: absolute;
	bottom:20px;
	right:0px;
}
.secMovie .ttlBox .ytlink a {
	color: #905ca2;
	font-size:12px;
}
.secMovie .ttlBox .ytlink a i {
	font-size:18px;
	padding-right:5px;
	    display: inline-block;
    vertical-align: -2px;
}
.movieBox {
			display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
margin-bottom: 20px;
}
.movieBox::before{
  content:"";
  display: block;
  width:24%;
  order:1;
}
.movieBox::after{
  content:"";
  display: block;
  width:24%;
}

.movieBox .box {
	max-width:260px;
	width:24%;
}


.movieBox figure {
	display:block;
}
.movieBox figure div {
	display:block;
	width: 100%;
	height:100%;
	position: relative;
}
.movieBox figure div:before {
	content:"";
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
	background: url(../img/play.png) no-repeat center center rgba(0,0,0,0.3);
	background-size: 51px 51px;
}

.movieBox figcaption {
	color: #905ca2;
	font-size: 14px;
	text-align: center;
	margin-top:10px;
	line-height: 1.8em;
}


.bannerBox {
	text-align: center;
}
.bannerBox ul {
				display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
	padding: 30px 0px;
}
.bannerBox li {
	max-width:210px;
	width:19%;
}
.bannerBox li img {
	zoom:1;
}

@media screen and (min-width: 1201px) {

}

@media screen and (min-width: 701px) {

}

@media screen and (max-width: 700px) {
	.secMovie {
    padding: 60px 0px;
}
	.secMovie .inner {
		padding:0;
	}
	.secMovie .ttlBox .ytlink {
    position: relative; 
    bottom:auto; 
    right:auto; 
}
	.secMovie .ttlBox {
    margin-bottom: 20px;
}
	.secMovie .ttlBox h2 img {
    width:300px;
		height:auto;
}
	.secMovie .ttlBox h2:before {
    bottom: 10px;
    /*width: 45%;*/
    width: 30%;
}
		.secMovie .ttlBox h2:after {
    bottom: 10px;
    /*width: 47%;*/
    width: 30%;
}
	
	.movieBox {
    justify-content: space-evenly;
}
	.movieBox .box {
    width: 100%;
		margin-bottom: 30px;
}


.movieBox::before{
  display: none;
}
.movieBox::after{
  display: none;
}




	.bannerBox ul {
    justify-content: center;
		padding: 30px 0px 0px;
}
	.bannerBox li {
	max-width:210px;
	width:100%;
		margin-bottom: 15px;
		padding:0 10px;
}
	.bannerBox ul::after{
  content:"";
  display: block;
  width:210px;
}
	
	
}

/*------------------------------------------
	会社案内　代表挨拶
------------------------------------------*/
.conpanyMessage {
	max-width: 800px;
		margin:0 auto;
}
.conpanyMessage h3 {
	margin-bottom: 60px;
}
.conpanyMessage h3 .ttlEng {
	font-size: 70px;
	line-height: 1.3em;
	letter-spacing: 6px
}
.conpanyMessage h3 .ttlMain {
	font-size:16px;
	font-weight:normal;
}
.conpanyMessage h4 {
	font-size:36px;
	margin-bottom: 60px
}
.conpanyMessage p {
	line-height:2.0em;
	margin-bottom:60px;
}
.conpanyMessage dl{
	text-align:left;
	vertical-align: middle;
	margin-bottom: 40px;
}
.conpanyMessage dt {
	display:block;
	line-height: 30px;
	vertical-align: middle;

}
.conpanyMessage dd {
	display:inline-block;
	line-height: 30px;
		vertical-align: middle;
	margin-left: 0px;
}


@media screen and (min-width: 701px) {
 .conpanyMessage dd .img2x { width: 187px; height:auto; zoom:normal;}
}
@media screen and (max-width: 700px) {
	.conpanyMessage h3 {
	margin-bottom: 30px;
}
	.conpanyMessage h3 .ttlEng {
	font-size: 12vw;
}
.conpanyMessage h4 {
	font-size:28px;
	margin-bottom: 30px
}
	
}


/*------------------------------------------
	会社案内　会社概要
------------------------------------------*/


/*------------------------------------------
	会社案内　沿革
------------------------------------------*/

.conpanyHistory {}
.conpanyHistory h3 {
	text-align: center;
	font-size: 36px;
	margin-bottom: 30px
}
.historyWrap {}
.historyWrap h4 {
	font-size: 24px;
	font-style: italic;
	color:#905ca2;
}
.historyWrap h4:after {
content: "";
    display: inline-block;
    width: 30%;
    height: 1px;
    background-color: #905ca2;
    margin: 8px 8px 8px 20px;
}
.historyWrap dl {
	padding: 20px 20px 20px 75px;
}
.historyWrap dt {
	color: #905ca2;
	display: inline-block;
	margin-right: 100px;
}
.historyWrap dd {
	display: inline-block;
	font-size:18px;
}

@media screen and (max-width: 700px) {
.conpanyHistory h3 {
    font-size: 24px;
}
	.historyWrap h4 {
	font-size: 20px;
}
.historyWrap h4:after {
    width: 70%;
}
	.historyWrap dl {
    padding: 0px 0px 20px 20px;
}
	.historyWrap dt {
    display: block;
    margin-right: 0px;
}
	.historyWrap dd {
    display: block;
    font-size: 14px;
}
}

/*------------------------------------------
	会社案内　アクセス
------------------------------------------*/
.conpanyAccess h3 {
	background: url(../img/bg_acces.jpg) no-repeat center center;
	background-size: cover;
	text-align: center;
	color:#fff;
	padding: 100px 0px;
	margin-bottom: 60px;
}
.conpanyAccess h3 .ttlEng {
	font-size: 70px;
	line-height: 1.3em;
	letter-spacing: 6px
}
.conpanyAccess h3 .ttlMain {
	font-size:16px;
	font-weight:normal;
}




.mapBox1 { 
	margin-bottom: 60px;
}
.mapBox1 .innerBox {
	margin-bottom: 30px;
}
.mapBox1 h4 {
	width:100%;
	max-width: 400px;
	display: inline-block;
	vertical-align: top;
	margin-bottom: 30px;
}
.mapBox1 dl {}
.mapBox1 dt {
	font-size: 24px;
}
.mapBox1 dd {
	font-size: 18px;
}
.mapBox1 p {
		width:100%;
	max-width: 465px;
	display: inline-block;
}

.mapBox2 {}
.mapBox2 .innerBox {
	max-width: 400px;
}
.mapBox2 h4 {
	font-size: 18px;
	margin-bottom: 20px;
}
.mapBox2 p {}







#map1{
	width:100%;
	height:520px;
}

#map1 iframe {
  width: 100%;
  height: 520px;
  display: block;
}

#map1 img {
  width: 50px;
  height: 50px;
	zoom:1;
}

#map2{
	width:100%;
	max-width: 465px;
	height:362px;
}

#map2 iframe {
  width: 100%;
  height: 362px;
  display: block;
}

#map2 img {
  width: 50px;
  height: 50px;
	zoom:1;
}

@media screen and (max-width: 700px) {
.conpanyAccess h3 {
	padding: 30px 0px;
	margin-bottom: 30px;
}
		.conpanyAccess h3 .ttlEng {
	font-size: 12vw;
}
#map1{
	height:362px;
}

#map1 iframe {
  height: 362px;
}
	
	
	.conpanyAccess .flex02{
		display:block;
	}
	.mapBox2 p {
		margin-bottom: 30px;
	}
}

/*------------------------------------------
	LPガスのお客様　点検申し込みフォーム
------------------------------------------*/


.costomer .noticeBox {
	margin-bottom: 40px;
}

.costomer .btnType2 {
	text-align:center;
	margin: 0 auto;
}



/*------------------------------------------
	LPガスのお客様　入居
------------------------------------------*/

.tatemonoWrapper {}

.tatemonoWrapper .box1 { display: block; }
.tatemonoWrapper .box1:first-child { margin-bottom:15px;}
.tatemonoWrapper .box1 label {     
	padding-bottom: 5px;
   display: block;
}
.tatemonoWrapper .box1 input {}

.box2 {}
.tatemonoName1  { width: 50%;    display: inline-block;}
.tatemonoName1 input {}
.tatemonoName2 { width: 20%;    display: inline-block;}
.tatemonoName2 input {}
.tatemonoName3 { width: 20%;    display: inline-block;}
.tatemonoName3 input {}

.dateWrapper dd span span {margin:0px; padding:0px 10px 0 0;}
.dateWrapper dd .dateBox input[type="text"] {
    width: 250px;
}

.tatiaiWrapper {}
.tatiaiWrapper p { margin-bottom: 10px;}
.radioBox {margin-bottom: 10px; display: block;}
label {}

.tatiaiBox {}
.tatiaiIp1 {display: block; }
.tatiaiInner {
	display: inline-block;    
	width: 48%;
    vertical-align: top;
}
.tatiaiIp2 {}
.tatiaiInner .inputNotice {}

.dateWrapper.w260 dt {
    width: 260px;
}

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

.tatemonoName1  { width: 100%;  }
.tatemonoName2 { width: 100%; }
.tatemonoName3 { width: 100%; }
.tatiaiInner {
	width: 98%;
	box-sizing: border-box;
}
}



/*------------------------------------------
	会社案内　代表挨拶
------------------------------------------*/
.privacy {
	max-width: 800px;
		margin:0 auto;
}
.privacy h3 {
	margin-bottom:60px;
}

.privacy h4 {
	font-size:18px;
	color:#905ca2;
	padding-bottom:20px;
	margin-bottom: 20px;
	border-bottom: #905ca2 1px solid;
}
.privacy p {
	line-height:2.0em;
	margin-bottom:60px;
}
.privacy dl{
	text-align:right;
	vertical-align: middle;
}
.privacy dt {
	display:inline-block;
	line-height: 30px;
	vertical-align: middle;

}
.privacy dd {
	display:inline-block;
	line-height: 30px;
		vertical-align: middle;
	margin-left: 20px;
}

/*------------------------------------------
	緊急時
------------------------------------------*/

.noticeBox2 {
	background-color: #fff0f0;
	text-align: center;
	padding: 40px;
	margin-bottom: 60px;
}
.noticeBox2 dl dt {
	margin-bottom: 10px;
}
.noticeTxt {
	font-size:18px;
}
.redTxt {
	color: #b70000;
	font-size: 24px;
	font-weight: bold;
}
.blkTxtRe.redTxt { color:#000000;}
.redTxt i {}
.redTxt span {
	font-size: 15px;
}
.boldTxt {
	font-size: 24px;
	font-weight: bold;
}
#kinkyuWrapper {
	margin-bottom:100px;
}
#kinkyuWrapper h4 {
	text-align: center;
	font-size:24px;
	margin-bottom: 30px;
}
#kinkyuWrapper h4 i {
  position: relative;
  /* 値は調整してください */
  top: -8px;
  left: 0px;
	padding-right: 15px;
}

.kinkyuList {}
.kinkyuList ul {
	border-top: #eeeeee 1px solid;
}
.kinkyuList li {
	font-size: 20px;
	border-bottom: #eeeeee 1px solid;
	padding: 20px 40px;
}
.kinkyuList li strong {
background: linear-gradient(transparent 60%, #fff0f0 60%);
}
.kinkyuTxt {
	font-size: 15px;
}
.kinkyuTxt span {
	color: #b70000;
}


#saigaiWrapper {
}
#saigaiWrapper .box {
	border:#e5e5e5 1px solid;
	margin-bottom: 20px;
}
#saigaiWrapper .box h4 {
	background-color: #f7f5f0;
	font-size: 24px;
	min-height: 220px;
	padding: 20px;
	min-width: 290px;
}
#saigaiWrapper .box h4 span {
	display:block;
	width: 100%;
	height: 100%;
}
#saigaiWrapper .box .txtBox {
	width: 100%;
}
#saigaiWrapper .box p {
	padding: 20px;
	font-size: 18px;
}
#saigaiWrapper .box .txtBox p {
	    width: 300px;
    float: left;
	padding-right: 30px;
}
#saigaiWrapper .box .txtBox figure {
    padding: 25px 20px 0 20px;
}

#saigaiWrapper .kasaiBox {}
.kasaiBox h4 span {
	background: url(../img/img_emergency_1_1.png) no-repeat top 20px center;
	background-size: 147px 159px;

}



#saigaiWrapper .taifuBox {}
.taifuBox h4 span {
		background: url(../img/img_emergency_2_1.png) no-repeat top 50px center;
	background-size: 246px 132px;
}

#saigaiWrapper .jishinBox {}
.jishinBox .boxInner {}
.jishinBox h4 span {
		background: url(../img/img_emergency_3.png) no-repeat top 30px center;
	background-size: 209px 117px;
}
.boxInner2 { padding: 30px;}
.boxInner2 h5 {
		font-size: 24px;
color:#905ca2;
	margin-bottom: 20px;
}
.boxInner2 ul {}
.boxInner2 ul li {
	font-size: 14px;
	letter-spacing: 0px;
	display: inline-block;
	width: 100%;
	max-width:420px;
	vertical-align: top;
}

@media screen and (min-width: 701px) {
.img2x.img_emargency_1 { width: 61px; height:auto; zoom:normal;}
.img2x.img_emargency_2 { width: 280px; height:auto; zoom:normal;}
.img2x.img_emargency_3 { width: 300px; height:auto; zoom:normal;}
}


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

.noticeBox2 {
    padding: 20px;
    margin-bottom: 40px;
}
	#kinkyuWrapper {
    margin-bottom: 60px;
}
#kinkyuWrapper h4 {
    font-size: 20px;
	margin-bottom: 20px;
}
.kinkyuList li {
    padding: 20px 0px;
}
	
	#saigaiWrapper .box {
    display:block;
}
#saigaiWrapper .box h4 span {
    display: block;
    width: 100%;
    height: 100%;
	padding-bottom:120px;
}	
#saigaiWrapper .box .txtBox p {
    width: 100%;
    float: none;
}
	.jishinBox .boxInner {
		display: block;
}
	.boxInner2 {
    padding: 20px;
}
	
}



/*------------------------------------------
　LPガスのお客様　ガスが出ない場合
------------------------------------------*/

.captionBox {
	text-align: center;
	font-size: 18px;
	margin-bottom: 30px;
}
.nogasList {
	text-align: center;
	background-color:#fff0f0;
}
.nogasList li {
			font-size: 18px;
padding:20px;
	border-bottom: #fff 1px solid;
	position: relative;
}
.nogasList li:before {
	position: absolute;
	top:0px;
	left:0px;
	content:"1";
	display: block;
	float: left;
	background-color: #fce0e0;
padding:20px 30px;
	font-weight: bold;
}
.nogasList li:nth-child(2):before {content:"2";}
.nogasList li:nth-child(3):before {content:"3";}
.nogasList li:nth-child(4):before {content:"4";}
.nogasList li:nth-child(5):before {content:"5";}

.graphBox {
	background: url(../img/bg_nogas.jpg) repeat top left;
	background-size: 19px 19px;
	text-align: center;
	padding:80px 60px;
}

.costomerNogas .wrapper {
	margin-bottom:100px;
}
.fukkiBox {
	margin-bottom:60px;
}
.fukkiBox p {
	font-size: 18px;
}
.fukkiBox figure {
	float: right;
		margin-left: 20px;
}
.jishinGasstop {
}
.jishinGasstop h5{
	font-size:18px;
	text-align: center;
}


.jishinGasstop {
	margin-bottom:60px;
}
.jishinGasstop h5 {
	margin-bottom: 30px;
}
.jishinGasstop ol {border-bottom: #e5e5e5 1px solid;}
.jishinGasstop ol > li {
	border: #e5e5e5 1px solid;
	border-bottom: none;
	position:relative;
}
.jishinGasstop ol > li:before {
	content:"❶";
	display: block;
	position: absolute;
	top:10px;
	left:15px;
	font-size: 24px;
}
.jishinGasstop ol > li:nth-child(2):before {content:"❷";}
.jishinGasstop ol > li:nth-child(3):before {content:"❸";}
.jishinGasstop ol > li:nth-child(4):before {content:"❹";}
.jishinGasstop ol li dl {}
.jishinGasstop ol li dl dt {
	background-color: #f7f5f0;
	width:30%;
    /* height: 220px; */
    text-align: center;
    padding: 40px;
}
.jishinGasstop ol li dl dd {    
	padding: 40px;
	width:70%;
}
.jishinGasstop ol li dl dd figure { margin-right: 20px;}
.jishinGasstop ol li dl dd ul {    display: inline-block;}
.jishinGasstop ol li dl dd ul li { font-size: 16px;}

table.pcTable3 {
	border:#000 1px solid;
}
.pcTable3 td {
	border-right:#000 1px solid;
	border-bottom:#000 1px dashed;
	padding: 10px;
	vertical-align: middle;
	font-size: 16px;
}
.pcTable3 .tHeader .td1 {}
.pcTable3 .tHeader td {
	border-bottom:#000 1px solid;
background-color: #808080;
	color:#fff;
	text-align: center;
	width: 40px;
}
.pcTable3 .td1 {
	background-color: #f6eef9;
	    text-align: center;
}
.pcTable3 .td2 {
	width: 100px;
}
.pcTable3 .td3 {
	background-color: #f2f2f2;
}
.pcTable3 .td4 {}

@media screen and (min-width: 701px) {
.img2x.img_costomerNogas_1 { width: 306px; height:auto; zoom:normal;}
.img2x.img_costomerNogas_2 { width: 200px; height:auto; zoom:normal;}
.img2x.img_costomerNogas_3 { width: 200px; height:auto; zoom:normal;}
.img2x.img_costomerNogas_4 { width: 140px; height:auto; zoom:normal;}
.img2x.img_costomerNogas_5 { width: 140px; height:auto; zoom:normal;}
.img2x.img_costomerNogas_6 { width: 130px; height:auto; zoom:normal;}
.img2x.img_costomerNogas_7 { width: 130px; height:auto; zoom:normal;}
}

@media screen and (max-width: 700px) {
	.captionBox {
    font-size: 14px;
}
.nogasList li:before {
    padding: 0px 10px;
}
.nogasList li {
    padding: 20px 30px;
	font-size: 14px;
}
	.graphBox {
    background:none;
    padding: 10px 0px;
}
	
	
	.costomerNogas .wrapper .noticeBox2 dl dt {
    font-size: 16px;
}
	.costomerNogas .wrapper .noticeBox2 dl dd {
    font-size: 14px;
}
	
	.costomerNogas .wrapper {
    margin-bottom: 40px;
}
	.fukkiBox figure {
    margin-left: 0px;
    float: none;
    text-align: center;
		margin-bottom: 20px;
	}
	.fukkiBox p {
    font-size: 14px;
}
	
.jishinGasstop ol li dl {
	display: block;
}
	
	.jishinGasstop ol li dl dt {
    width: 100%;
}
	
	.jishinGasstop ol li dl dd {
    width: 100%;
		    padding:20px 10px;
		display: block;
}
	
.jishinGasstop ol li dl dd figure {
    margin-right: 0px;
    text-align: center;
	margin-bottom: 10px;
}
	
	.pcTable3 td {
    font-size: 12px;
		letter-spacing: 0px;
		    padding: 5px;
}
	.pcTable3 .td2 {
    width: 60px;
    padding: 0px;
}
	.pcTable3 .tHeader td {
    width: auto; 
}
	
}




/*------------------------------------------
	NEWS 一覧
------------------------------------------*/

.newsList {}
.newsListBox {
	    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 40px;
}
.newsListBox .box {
	width: 32%;
	border: #e5e5e5 1px solid;
	position: relative;
  margin-bottom: 20px;
}
.newsListBox:after{
  content:"";
  display: block;
  width:32%;
}
.newsListBox .box figure { height: 200px;}
.newsListBox .box figure a { display: block;height: 100%;}
.newsListBox .box figure img {}
.newsListBox .boxInner { padding: 15px 20px 40px; }
.newsListBox .boxInner h3 {}
.newsListBox .boxInner h3 a { font-size: 16px; font-weight: normal;}
.newsListBox .boxInner dl { position: absolute; bottom:0px; left:0px; width:100%;}
.newsListBox .boxInner dt { float: left; font-size: 12px; padding:0px 10px; color: #777777; }
.newsListBox .boxInner dd { float: right; font-size: 12px;}
.newsListBox .boxInner dd a { display: block; padding:0px 10px; color:#fff;}
.cat_newstopics { background-color: #ff8f47;}
.cat_event { background-color: #905ca2;}
.cat_examples { background-color: #4db8fa;}
.cat_staff { background-color: #63ba64;}

.newsListBox .box figure a img {
    -moz-transition: -moz-transform 0.3s ease-out;
    -webkit-transition: -webkit-transform 0.3s ease-out;
    -o-transition: -o-transform 0.3s ease-out;
    -ms-transition: -ms-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
}

.newsDirectionBox { 
	text-align: center; clear: both; margin-bottom: 60px; margin-top: 60px; font-size: 16px; 
	clear: both;}
.newsDirection { display: inline-block; width:100%;}
.page-numbers { padding-left: 10px; padding-right: 10px; display: inline-block;}
.page-numbers a{font-size: 11px;}
.page-numbers.current { text-decoration: underline;}
.nav-links a{display: inline-block;}
a.prev.page-numbers,
span.prev.page-numbers{ 
	padding-left: 10px; padding-right: 10px; margin-left: 0; margin-right: 10px; padding: 0px 15px; border: 1px solid #000;
}
a.next.page-numbers,
span.next.page-numbers { 
	padding-left: 10px; padding-right: 10px; margin-left: 10px; margin-right: 0; padding: 0px 15px; border: 1px solid #000;
}
a.next.page-numbers:after,
span.next.page-numbers:after {
	  font-family: "Font Awesome 5 Free";
  content: '\f30b';
  font-weight: 900;
	font-size:10px;
vertical-align: 3px;
    margin-left: 10px;
}
a.prev.page-numbers:before,
span.prev.page-numbers:before {
	  font-family: "Font Awesome 5 Free";
  content: '\f30a';
  font-weight: 900;
	font-size:10px;
vertical-align: 3px;
    margin-right: 10px;
}

.nav-links {
	    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
}


.newsTtl { margin-bottom: 30px;}
.newsTtl h3 { font-size: 30px; font-weight: normal;}
.newsTtl dl {}
.newsTtl dt { display: inline-block;font-size: 12px; color: #777777;}
.newsTtl dd { display: inline-block;font-size: 12px; }
.newsTtl dd a { display: inline-block; padding:0px 10px; color:#fff;}

.newContents { background: url(../img/line_dot2.png) repeat-x bottom left; background-size: 7px 3px; padding-bottom: 30px;}
.newContents p { margin-bottom:40px;}
.newContents a {
	color:#905ca2;
	text-decoration: underline;
}

@media screen and (min-width: 701px) {
.newsListBox .box figure a:hover img {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}
}

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

.newsListBox .box {
	width: 100%;
}
	
	.newsDirectionBox {
    margin-bottom: 30px;
    margin-top: 30px;
}
.newsDirection {
    position: relative;
	padding-top: 80px;
	width:100%;
}
	
a.prev.page-numbers,
span.prev.page-numbers{ 
	position: absolute;
	top:0px;
	left:0px;
}
a.next.page-numbers,
span.next.page-numbers { 
	position: absolute;
	top:0px;
	right:0px;
}
	
.newsTtl h3 { font-size: 24px;}
	
	
}

/*------------------------------------------
	フジガスの取り組み　発電
------------------------------------------*/

.bigTtl {
	background: url(../img/bg_lpgas.jpg) no-repeat center top -135px;
	background-size: cover;
}
.bigTtl h3 {
	background-color: rgba(0,0,0,0.50);
	color:#fff;
	text-align: center;
	padding: 90px 0px;
}
.bigTtl .ttlEng {
	font-size: 18px;
}
.bigTtl .ttlMain {
	font-size: 60px;
}


.feature .contents_inner {
	margin-top: -80px;
}

.page.feature #main {
    margin-top: 135px;
}

.featureLpgas {}
.featureLpgas .box {
	background: url(../img/line_dot2.png) repeat-x bottom left; 
	background-size: 7px 3px; 
	padding-bottom: 60px;
	margin-bottom: 40px;
}
.featureLpgas figure {}
.featureLpgas .box1 figure {
	background-color: #63ba64;
	border-radius: 4px;
	float:left;
	padding: 50px 30px;
	margin-right: 30px;
}
.featureLpgas .box2 figure {
	float:right;
	padding: 30px;
	margin-left: 30px;
}
.featureLpgas .boxInner {
		padding:0px 30px;
}
.featureLpgas .box2 .boxInner {
	padding-top: 60px
}
.featureLpgas .boxInner h4 {
	font-size: 36px;
	color: #777777;
	font-weight: normal;
	margin-bottom: 30px
}
.featureLpgas .boxInner strong {
	font-weight: bold;
	color: #905ca2;
	font-size: 50px;
}
.featureLpgas .boxInner p {
	font-size: 14px;
}


.featureLpgas .box3 { margin-top: 60px}
.featureLpgas .box3 .boxInner2 {
		    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
		padding: 0px;
}
.featureLpgas .box3 { background-image: none;}
.featureLpgas .box3 .boxInner2 {
	margin-bottom:30px;
}
.featureLpgas .box3 .boxInner2 figure { padding: 30px; border-radius: 4px;}
.featureLpgas .box3 p { 
	border: #63ba64 4px solid; color:#63ba64; padding: 50px;
text-align: center;
	font-size: 20px;
	border-radius: 10px;
}
.featureLpgas .box3 strong {}
.featureLpgas .box3 .boxInner2 figure.boxImg1 { background-color: #eeeeee; width:37%;}
.featureLpgas .box3 .boxInner2 figure.boxImg2 { background-color: #ebf6ec; width:62%;}

.featureLpgas .box4 .boxInner h4 {text-align:center;}
.featureLpgas .box1.box4 figure {
	background-color: #eee;
}
.featureLpgas  .box.box4 { background:none;}

@media screen and (min-width: 701px) {
.img2x.img_featureLpgas_1 { width:312px; height:auto; zoom:normal;}
.img2x.img_featureLpgas_2 { width: 369px; height:auto; zoom:normal;}
.img2x.img_featureLpgas_3 { width: 200px; height:auto; zoom:normal;}

}

@media screen and (max-width: 700px) {
	.bigTtl {
	background: url(../img/bg_lpgas.jpg) no-repeat center top -85.5px;
			background-size: cover;
}
.bigTtl h3 {
    padding: 20px 10px;
}
.bigTtl .ttlEng {
    font-size: 14px;
}
	.bigTtl .ttlMain {
    font-size: 9vw;
}
	
.feature .contents_inner {
    margin-top: 0px;
}	
	.page.feature #main {
    margin-top:30px;
}
	
	
.featureLpgas .box {
    padding-bottom: 30px;
    margin-bottom: 30px;
}	
	
	.featureLpgas .box1 figure {
    float: none;
    padding: 10px 10px;
    margin-right: 0px;
		margin-bottom: 20px;
    text-align: center;
}
	
	.featureLpgas .boxInner {
    padding: 0px;
}
.featureLpgas .boxInner h4 {
	font-size: 24px;
	margin-bottom: 10px
}
.featureLpgas .boxInner strong {
	font-size: 36px;
}	
	
	.featureLpgas .box2 figure {
    float: none;
    padding: 0px;
    margin-left: 0px;
    text-align: center;
}
	.featureLpgas .box2 .boxInner {
    padding-top: 20px;
}
	
.featureLpgas .box3 .boxInner2 figure.boxImg1 {
    width: 100%;
	height: 250px;
	    padding: 10px;
}	
	
	.featureLpgas .box3 .boxInner2 figure.boxImg2 {
    width: 100%;
	height: 250px;
		    padding: 20px;
}
	.featureLpgas .box3 p {
    padding: 20px;
    text-align: left;
    font-size: 16px;
}
	
	
}





@media print{

.featureLpgas .box3 .boxInner2 {
    display: block;
    -webkit-box-pack: normal;
    -ms-flex-pack: normal;
    justify-content: normal;
}
.featureLpgas .box3 .boxInner2 figure.boxImg1 { float:left;}
.featureLpgas .box3 .boxInner2 figure.boxImg2 { float:right;}

}


/*------------------------------------------
	フジガスの取り組み　ネットワーク
------------------------------------------*/


.networkTtl.bigTtl {
    background: url(../img/img_network_mv.jpg) no-repeat center top -135px;
    background-size: cover;
}
.networkTtl.bigTtl h3 {
    background-color: rgba(255,255,255,0.50);
    color: #000;
    padding: 50px 0px;
}
.networkTtl.bigTtl .ttlEng {
	margin-bottom: 20px
}
.networkTtl.bigTtl .ttlMain {
	line-height: 1.3em;
}

.featureNetworkBox {}
.fMainTxt {
	text-align: center;
	font-size: 18px;
	padding: 0 60px;
	margin-bottom:100px
}

.fBox {
	position: relative;
	margin-bottom: 100px;
}
.fBox:nth-child(3) {
	margin-bottom: 150px;
}



.fBoxImg {
}
.fBoxImg figure {
	position: absolute;
	z-index: 3;
	top:100px;
	left:0px;
}
.fBox:nth-child(odd) .fBoxImg figure {
	position: absolute;
	z-index: 3;
	top:100px;
	left:auto;
	right:0px;
}
.fboxIcon1 {
	position: absolute;
	z-index: 2;
	-moz-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	top:20px;
	left:0px;
}
.fBox:nth-child(odd) .fboxIcon1 {
	left:auto;
	right:90px;
		top:150px;
}



.fboxIcon2 {
	position: absolute;
	z-index: 1;
	top:0px;
	left:200px;
}
.fBox:nth-child(odd) .fboxIcon2 {
	left:auto;
	right:130px;
		top:0px;
}

.fBoxTxt {
	position: relative;
	z-index: 5;
	margin-left: 400px;
}
.fBox:nth-child(odd) .fBoxTxt {
	margin-left: 0px;
}
.fBox:nth-child(odd) .fBoxTxt p {
	margin-right: 400px;
}
.fBox:nth-child(4) .fBoxTxt {
	margin-left: 0px;
}

.fBox:nth-child(4) .fBoxTxt p {
	margin-left: 400px;
}
.fBoxTxt h4 {
	color: #777;
	font-weight: normal;
	font-size: 36px;
	line-height: 1.4em;
	margin-bottom: 60px;
}
.fBoxTxt h4 strong {
	color: #905ca2;
	font-size: 50px;
	line-height: 1.2em;
}
.fBoxTxt p {}

.fBox:nth-child(4) .fBoxTxt h4 {
	text-align: right
}

@media screen and (min-width: 701px) {
	.fboxIcon1.scrollin2 {
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	top:20px;
	left:120px;

}

	.fboxIcon2.scrollin2  {
	top:-60px;
	left:200px;
}

	.fBox:nth-child(odd) .fboxIcon2.scrollin2 {
	left:auto;
	right:130px;
		top:-40px;
}
.img2x.img_featureNetworkBox_1 { width: 320px; height:auto; zoom:normal;}
.img2x.img_featureNetworkBox_2 { width: 280px; height:auto; zoom:normal;}
.img2x.img_featureNetworkBox_3 { width: 320px; height:auto; zoom:normal;}
.img2x.img_grad { width: 321px; height:auto; zoom:normal;}
.img2x.img_jmap { width: 362px; height:auto; zoom:normal;}
	
}

@media screen and (max-width: 700px) {
	.networkTtl.bigTtl {
    background: url(../img/img_network_mv.jpg) no-repeat center top -85.5px;
    background-size: cover;
}
	
.networkTtl.bigTtl h3 {
    background-color: rgba(255,255,255,0.50);
    color: #000;
    padding: 20px 20px;
}	

.networkTtl.bigTtl .ttlEng {
    margin-bottom: 0px;
}
.networkTtl.bigTtl .ttlMain {
        font-size: 6vw;
	text-align: left;
}	
	.fNetworkContents	.inner {
		overflow:hidden;
	}
.fBox {
	margin-bottom: 40px;
}
	.fBox:nth-child(3) {
	margin-bottom: 40px;
}
.fMainTxt {
    text-align: left;
    font-size: 14px;
    padding: 0 0px;
    margin-bottom: 40px;
}
	.fBoxImg {
		margin-bottom:20px;
	}
	
	.fBoxImg figure {
	position:relative;
	z-index: 3;
	top:0px;
	left:0px;
}
	.fBox:nth-child(odd) .fBoxImg figure {
	position:relative;
	z-index: 3;
	top:0px;
	left:auto;
	right:0px;
}

.fBoxTxt {
    position: relative;
    z-index: 5;
    margin-left: 0px;
}	
	
	
.fBox:nth-child(odd) .fBoxTxt p {
	margin-right: 0px;
}
.fBox:nth-child(4) .fBoxTxt p {
	margin-left: 0px;
}
	
	.fboxIcon1 {
    position: absolute;
    z-index: 2;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 0px;
    left: 0px;
}
.fBox:nth-child(odd) .fboxIcon1 {
    top: 0px;
    left: 0px;
	right:auto;
}
.fboxIcon2 {
    top: 190px;
    left: 0;
}
.fBox:nth-child(odd) .fboxIcon2 {
	left:0;
	right:auto;
		top:190px;
}	
.fBoxTxt h4 {
	color: #777;
	font-weight: normal;
	font-size: 20px;
	line-height: 1.4em;
	margin-bottom: 10px;
}
.fBoxTxt h4 strong {
	color: #905ca2;
	font-size: 20px;
	line-height: 1.2em;
}	
	
	.fBox:nth-child(4) .fBoxTxt h4 {
    text-align: left;
}
	
}




/*------------------------------------------
	フジガスの取り組み　給湯器
------------------------------------------*/


.waterheaterTtl.bigTtl {
    background: url(../img/bg_wh.jpg) no-repeat center bottom;
    background-size: cover;
}
.waterheaterTtl.bigTtl h3 {
    background-color: rgba(0,0,0,0.20);
}
.fwaterheaterContents .fMainTxt {
    margin-bottom: 60px;
}
.featureLpgas .box.whbox {
    margin-bottom: 0px;
	    padding-bottom: 100px;
}
.whP { margin-bottom:40px;}
.whTokucho {
	background-color: #f9f9f3;
	border-radius: 10px;
	 margin-bottom:40px;
}

.whTokucho h5 { background-color: #eae9e1; text-align: center; border-radius: 10px 10px 0px 0px; font-size:18px; font-weight: bold; padding:10px 20px;}
.whTokucho ol { padding: 30px 40px 0px;}
.whTokucho li { padding-bottom: 30px;}
.whTokucho dl {}
.whTokucho dt { font-size: 18px; font-weight:bold;}
.whTokucho dd { font-size: 15px; padding-left: 2em;}

.featureLpgas .box2.whbox2 .boxInner {
    padding-top: 120px;
}
.featureLpgas .box2.whbox2 p {
font-size:15px;}

@media screen and (max-width: 700px) {
	.waterheaterTtl.bigTtl {
    background: url(../img/bg_wh.jpg) no-repeat center bottom;
    background-size: auto 200%;
}
	.featureLpgas .box.whbox {
	    padding-bottom: 60px;
}
	.whTokucho ol { padding: 30px 20px 0px;}
	.whTokucho dt { }
.whTokucho dd {padding-left: 0em;}
.featureLpgas .box2.whbox2 .boxInner {
    padding-top: 80px;
}
}

/*------------------------------------------
	フジガスの取り組み　イベント対応
------------------------------------------*/


.elgTtl.bigTtl {
    background: url(../img/bg_elg.jpg) no-repeat center bottom;
    background-size: cover;
}
.elgTtl.bigTtl h3 {
    background-color: rgba(0,0,0,0.20);
}
.felgContents .fMainTxt {
    margin-bottom: 0px;
}

.felgContents .featureLpgas .box1 figure {
	background-color: transparent;
    padding: 0px;
}
.felgContents .featureLpgas .boxInner h4 {
    font-size: 30px;
	letter-spacing: -1px;
}
.felgContents .featureLpgas .boxInner strong {
    font-size: 40px;
}

.felgContents .featureLpgas .box.box1 {
	padding-top:40px;
}
.felgContents .featureLpgas .box2 .boxInner {
    padding-top: 30px;
}
.elgbox1 {
	padding:60px 0px;
}
.elgbox1 h4 {
	text-align:center;
	font-size: 30px;
	color:#777777;
}
.elgbox1 ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 30px 0px;
}
.elgbox1 li {
    max-width: 230px;
    width: 24.5%;
	background-color: #fffeed;
	border: #bfbfbf 1px solid;
	border-radius: 3px;
	padding: 20px;
	text-align: center;
	line-height: 50px;
	font-size: 1.5vw;
    word-break: keep-all;
}
.elgbox1 li i {
	margin-right:15px;
}
.elgbox1 li i img {
	vertical-align: middle;
}

.elgbox2 {
	margin-bottom: 150px;
}
.elgbox2 h4 {
	text-align:center;
	font-size: 30px;
	color:#777777;
	margin-bottom: 30px
}
.elgbox2 ol {}
.elgbox2 li { background-color:#eeeeee; padding: 22px 40px; margin-bottom: 2px;}
.elgbox2 span { display: inline-block; font-size:14px; color:#63ba64; padding-right:20px;}
.elgbox2 span span { font-size:18px; font-weight:bold; padding-left: 10px;}
.elgbox2 dl { display: inline-block;}
.elgbox2 dt { display: inline-block;font-size:18px; font-weight:bold; color:#777777; width:170px;}
.elgbox2 dd { display: inline-block;font-size:15px; color:#777777;}

.elgbox2 li:nth-child(4) { background-color: #f1f8f1;}
.elgbox2 li:nth-child(5) { background-color: #e6f7e6;}
.elgbox2 li:nth-child(6) { background-color: #d5f1d5;}
.elgbox2 li:nth-child(7) { background-color: #c1ebc1;}

.elgbox3 {
	position:relative;
}
.elgbox3 h4 {
	font-size: 24px;
	color:#ffffff;
	margin-bottom: 140px;
		background-color:#434343;
	padding: 20px 30px;
}
.imgMap {
	position:absolute;
	top:-70px;
	right:50px;
}

.elgbox3 ul {
	    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 40px;
}
.elgbox3 li {
	    width: 32%;
    position: relative;
    margin-bottom: 20px;
}
.elgbox3 ul:after{
  content:"";
  display: block;
  width:32%;
}
.elgbox3 figure span{ height:200px; display:block;}
.elgbox3 figure img {}
.elgbox3 figcaption { color:#fff; text-align: right; padding: 0 10px; font-size:12px;}
.elgbox3 > span { font-size:18px; font-weight: bold; padding: 0px 10px 0px;}

.elgbox4 {}
.elgbox4 h4 { font-size:24px; color:#434343; text-align: center; border-bottom:2px #434343 solid; padding-bottom: 5px; margin-bottom: 40px;}
.elgbox4 ul {
	    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
}
.elgbox4 li {
	    width: 48%;
}
.elgbox4 dl {}
.elgbox4 dt {float:left;}
.elgbox4 dd { float:right; color:#fff; 	text-align: center; font-size:12px; line-height: 1.3em; border-radius:3px; margin-top: 6px; width: 50px;}

.place_hokkai { background-color: #23ac38;}
.place_tohoku { background-color: #28a7e1;}
.place_kanto { background-color: #0ba29a;}
.place_chubu { background-color: #90c31f;}
.place_kansai { background-color: #f8b62b;}
.place_chugoku { background-color: #ea5413;}
.place_shikoku { background-color: #f2a2b6;}
.place_kyusyu { background-color: #df803a;}


@media screen and (min-width: 1000px) {
.elgbox1 li {
	font-size: 18px;
}
}

@media screen and (min-width: 701px) {
.img2x.img_featureEveLpgas_1 { width: 391px; height:auto; zoom:normal;}
.img2x.img_featureEveLpgas_2 { width: 391px; height:auto; zoom:normal;}
.img2x.img_featureEveLpgas_3 { width: 369px; height:auto; zoom:normal;}
.elgbox1 li:nth-child(1) i img.img2x { width: 50px; height:auto; zoom:normal;}
.elgbox1 li:nth-child(2) i img.img2x { width: 50px; height:auto; zoom:normal;}
.elgbox1 li:nth-child(3) i img.img2x { width: 48px; height:auto; zoom:normal;}
.elgbox1 li:nth-child(4) i img.img2x { width: 51px; height:auto; zoom:normal;}


}


@media screen and (max-width: 700px) {
	.elgTtl.bigTtl {
    background: url(../img/bg_elg.jpg) no-repeat center bottom;
    background-size: auto 200%;
}
.felgContents .featureLpgas .boxInner h4 {
    font-size: 26px;
}	
	.felgContents .featureLpgas .boxInner strong {
    font-size: 30px;
}
	.elgbox1 li {
    max-width: none;
    width: 49%;
    padding: 20px 20px 0px;
		text-align: center;
    line-height: 50px;
    font-size: 14px;
    word-break: keep-all;
		margin-bottom:10px;
}
	.elgbox1 li i{
		display:block;
		margin: 0px;
			padding:0px;
	}
	.elgbox1 h4,.elgbox2 h4 {
    font-size: 20px;
}
	.elgbox2 {
    margin-bottom: 60px;
}
	.imgMap {
    position: relative;
    top: 0px;
    right: 0px;
		margin-bottom:20px;
}
	.elgbox3 h4 {
    font-size: 20px;
    color: #ffffff;
    margin-bottom: 20px;
    background-color: #434343;
    padding: 20px 10px;
		text-align: center;
}
	

.elgbox3 li {
    width: 100%;
}
	.elgbox3 figure img {
		width: 100%;
}
	.elgbox4 li {
    width: 100%;
}
	
	
}








/*------------------------------------------
	製品サービス　リスト
------------------------------------------*/
.products .secProducts .inner {
    padding: 0px 0px;
}

.products .productsBox .box {
    width: 49%;
	margin-bottom: 1.5vw;
}

.products .productsBox .box .txtbox {
    display: block;
	padding: 20px 20px;
}

.products .productsBox .box .txtbox h3 {
    display: inline-block;
	margin-bottom: 20px;
	vertical-align: top;
}
.products .productsBox .box .txtbox p {
font-size:1.1vw;
}
.products .productsBox .box figure {
    width: 35%;
}
.products .productsBox .box a:before {
    padding-bottom: 35%;
}
.products .productsBox .box .txtbox {
    width: 65%;
}


@media screen and (min-width: 1201px) {
.products .secProducts .inner {
    padding:0px 0px;
}
.products .productsBox .box .txtbox h3 {
    display: inline-block;
}
.products .productsBox .box .txtbox p {
font-size:14px;
}

}



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

.products .productsBox {
    display: block;
}
.products .productsBox .box {
    width: 100%;
	    max-width: none;
}
.products .box a {
    width: 100%;
}
	.products .productsBox .box .txtbox {
    padding: 10px;
}
	.products .productsBox .box .txtbox h3 {
        font-size: 3vw;
		    margin-bottom: 10px;
}
	.products .productsBox .box .txtbox p {
        font-size: 3vw;
}
}

/*------------------------------------------
	製品サービス　詳細
------------------------------------------*/
.secProductsPost {}
.secProductsPost h3 {
	color: #4db8fa;
	font-size: 36px;
	text-align: center;
	margin-bottom: 30px;
}

.productsItemBox {
	margin-bottom: 100px;
}

.itemImageBox {
	margin-bottom: 50px;
}
.itemImage {
	background: url(../img/bg_products_texture.jpg) repeat top left #fff;
	background-size: 118px 83px;
	height:480px;
	padding: 40px;
	position: relative;
	z-index: 1;
}
.itemImage img {}
.itemImage:after {
	content: "";
	display: block;
	width:50%;
	height:50%;
	border-top:#4db8fa 2px solid;
	border-left:#4db8fa 2px solid;
	position: absolute;
	top:0px;
	left: 0px;
z-index: 1;
}
.itemImage:before {
	content: "";
	display: block;
	width:50%;
	height:50%;
	border-bottom:#4db8fa 2px solid;
	border-right:#4db8fa 2px solid;
	position: absolute;
	bottom:0px;
	right: 0px;
z-index: 1;
}
.itemImage:before {}
.itemImageBox > p {
	text-align: right;
	padding: 0 0px 0px!important; 
}

.productsItemBox h4 {
	font-size: 30px;
	text-align: center;
	margin-bottom: 40px;
}
.productsItemBox p {
	padding: 0 60px 40px; 
}
.itemSpec {
	text-align: center;
}
.itemSpec dl {
	padding: 0 60px 40px; 
}
.itemSpec dt {
	color: #4db8fa;
	font-weight: bold;
}
.itemSpec dd {}

.btnProducts {
	text-align: center;
	margin-bottom: 60px;
}

.btnProducts.btnType1 a {
	max-width:480px;
	width:100%;
	padding: 15px 20px;
}


.tableblue {
	margin-bottom: 60px;
}
.tableblue dt {
	color: #4db8fa;
}

@media screen and (max-width: 700px) {
.secProductsPost h3 {
	font-size: 30px;
	line-height: 1.4em;
}
	.itemImageBox {
	margin-bottom: 20px;
}
.itemImage {
	height:auto;
	padding: 20px;
}
.productsItemBox h4 {
	font-size: 20px;
	text-align: left;
	margin-bottom: 20px;
}
.productsItemBox p {
	padding: 0 0px 20px; 
}
	
.itemSpec {
	text-align: left;
	margin-bottom: 20px;
}
.itemSpec dl {
	padding: 0 0px 10px; 
}
.itemSpec dt {
	color: #4db8fa;
	font-weight: bold;
}
	
.btnProducts {
	text-align: center;
	margin-bottom: 30px;
}

.btnProducts.btnType1 a {
font-size: 18px;
	}


.tableblue {
	margin-bottom: 30px;
}
	
	
}



/*------------------------------------------
	製品サービス　設置事例
------------------------------------------*/

.products .secExample {
    background-color: transparent;
}
.products .secExample .inner {
    padding: 0px 0px;
}
.products .exampleBox article a {
border:#e1e1e1 1px solid;
}
.products .exampleBox article a .txtbox dt {
    font-size: 1.5vw;
}
.products .exampleBox article a .txtbox {
    padding: 10px 10px;
}
.exampleBox article a .txtbox dd {
    font-size:0.8vw;
    bottom: 10px;
    left: 10px;
}


@media screen and (min-width: 1201px) {
	.products .exampleBox article a .txtbox dt {
    font-size: 18px;
}
	.products .exampleBox article a .txtbox {
    padding: 10px 10px;
}
.exampleBox article a .txtbox dd {
    font-size: 12px;
    bottom: 10px;
    left: 10px;
}

}

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

.products .exampleBox article a .txtbox {
    padding: 40px 20px 20px;
}
	.products .exampleBox article a .txtbox dt {
    font-size: 16px;
}
	.exampleBox article a .txtbox dd {
    font-size: 12px;
    position: relative;
    bottom: 0px;
    left: 0px;
	}
	
}




/*------------------------------------------
	製品サービス　設置事例 詳細
------------------------------------------*/

.secExamplePost {}



.examplePost {}
.examplePost .ttlBox { 
	display:table; 
	width: 100%;
	border-bottom:#eeeeee 3px solid;
	position: relative;
	margin-bottom: 30px
}

.examplePost .ttlBox:after {
	content: "";
	position: absolute;
	display: block;
	bottom:-3px;
	left:0px;
	width:110px;
	height:3px;
	background-color: #4db8fa;
}
.examplePost .ttlBox dl { 
	display: table-cell; 
	vertical-align: middle;
	width:150px;
}
.examplePost .ttlBox dt { 
	font-size: 18px; 
	line-height: 1.2em;
}
.examplePost .ttlBox dd { 
	font-size: 18px; 
	line-height: 1.2em; 
	color: #4db8fa;
}
.examplePost .ttlBox h3 { 
	font-size: 36px; 
	display: table-cell; 
	vertical-align: middle; 
	color: #4db8fa;
}



.examplePostBox {
	border: #c3c3c3 1px solid;
	position: relative;
	margin-bottom: 100px;
}
.exaTag {
	background-color:#2f8ac2;
	color: #4db8fa;
	display: block;
	position: absolute;
  top: 20px;
  right: -20px;
	font-size: 12px;
	padding: 0px 10px 0px 30px;
	line-height: 1.8em;
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}
.exaTtl {
	font-size: 24px;
	text-align: center;
	padding: 30px 20px;
}

.exaImgBox {
	margin-bottom: 50px;
}
.exaImgBox .exaImg {
	background: url(../img/bg_products_texture.jpg) repeat top left #fff;
	background-size: 118px 83px;
	max-height: 400px;
	padding: 40px;

}
.exaImgBox.exaImg img {}

.exaSpec {
	padding: 40px;
	min-width: 300px;
}
.exaSpec h5 {
	font-size: 12px;
	margin-bottom: 5px;
}
.exaSpec p {
	font-size: 12px;
	margin-bottom:20px;
}


.exaTxtBox {
	margin-bottom: 40px;
	padding:0px 40px
}
.exaTxtBox h5 {
		color: #4db8fa;
	font-size: 30px;
	font-weight: normal;
	margin-bottom: 20px;
	text-align: center;
}
.exaTxtBox p {}

.exaTxtBox .itemSpec dl {
    padding: 40px 0px 20px;
}
.exaTxtBox .itemSpec dl dt{
margin-bottom:20px;
padding-bottom:10px;
border-bottom:#4db8fa 1px dashed;
}

.exaTxtBox .itemSpec dl dd li {
margin-bottom:10px;
}


.exaVoiceBox {
	margin-bottom: 40px;
	padding:0px 40px
}
.exaVoiceBox h5 {
	background: url(../img/icon_voice.png) no-repeat center top;
	background-size: 70px 70px;
	float:left;
	padding: 80px 0px 0px 0px;
}
.exaVoiceBox p {
	margin-left: 140px;
	background-color: #e5f5ff;
	padding: 40px;
	border-radius: 10px;
	position: relative;
}
.exaVoiceBox p:after{
  content: "";
  position: absolute;
  top: 0;
  left: -40px;
  bottom: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: transparent #e5f5ff transparent transparent;
  border-width: 10px 20px 10px;
}

.exaSubImg {
				display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
	padding: 0 40px;
	margin-bottom: 30px;
	
}
.exaSubImg li {
	    width: 48%;
    max-height: 400px;
	background-color: #f4f4f4;
	margin-bottom: 30px;
}
.exaSubImg li img {}

.exaBtn1 {}
.exaBtn2 {
	position: absolute;
	bottom:-40px;
	right:0px;
}



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

.contents_inner .secExamplePost .inner {
    padding: 0 0px;
}
	
	
.examplePost .ttlBox { 
	display: block; 
}

.examplePost .ttlBox:after {
	width:80px;
}
.examplePost .ttlBox dl { 
	display: block; 
	width:auto;
}
.examplePost .ttlBox dt { 
	display:inline-block;
	font-size: 14px; 
}
.examplePost .ttlBox dd { 
	display:inline-block;
	font-size: 14px; 
}
.examplePost .ttlBox h3 { 
	font-size: 24px; 
	display: block; 
}
	
	
	
	

.examplePostBox {
	border: #c3c3c3 1px solid;
	position: relative;
	margin-bottom: 100px;
}
.exaTag {
  top: 20px;
  right: -40px;
}
.exaTtl {
	font-size: 20px;
	text-align: left;
	padding: 20px 10px;
}	
	
	
	.exaImgBox {
		display: block;
		margin-bottom: 20px;
}
	
.exaImgBox .exaImg {
    background: url(../img/bg_products_texture.jpg) repeat top left #fff;
    background-size: 118px 83px;
    max-height: 400px;
    padding: 10px;
}	
.exaSpec {
    padding: 10px;
    min-width: none;
}	
.exaTxtBox {
    margin-bottom: 40px;
    padding: 0px 10px;
}
	
.exaTxtBox h5 {
    font-size: 20px;
    margin-bottom: 10px;
    text-align: left;
}
	
.exaVoiceBox {
    margin-bottom: 40px;
    padding: 0px 10px;
}	
	.exaVoiceBox h5 {
    float: none;
	text-align: center;
		margin-bottom: 10px;
}
	.exaVoiceBox p {
    margin-left: 0px;
    padding: 10px;
}
	.exaVoiceBox p:after{
display:none;
	}
	
.exaSubImg {
    padding: 0 10px;
    margin-bottom: 0px;
}	
	
	.exaBtn1 {
		margin: 0 10px;
}
	
	
}

/*------------------------------------------
	footer
------------------------------------------*/


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


	
}