.red {
  color: #FF0000;
}

.contents {
  color: #333;
}

.contents a:hover img {
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
}

.contents #fit01, .contents #fit02, .contents #fit03, .contents #fit04, .contents #fit05, .contents #fit06 {
  margin: 0 0 5% 0;
}

.contents h2 {
  margin: 0 0 3% 0;
}

.contents h2 img {
  box-sizing: border-box;
  display: block;
  margin: 0 auto 2%;
  max-width: 800px;
  width: 100%;
}

.contents h3 {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00897e+3,00ada9+49,00a39d+49,00ada9+100 */
background: rgb(0,137,126); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(0,137,126,1) 3%, rgba(0,173,169,1) 49%, rgba(0,163,157,1) 49%, rgba(0,173,169,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,137,126,1) 3%,rgba(0,173,169,1) 49%,rgba(0,163,157,1) 49%,rgba(0,173,169,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,137,126,1) 3%,rgba(0,173,169,1) 49%,rgba(0,163,157,1) 49%,rgba(0,173,169,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00897e', endColorstr='#00ada9',GradientType=0 ); /* IE6-9 */
  margin: 0 0 3%;
  line-height: 1.3;
  font-weight: 800;
  padding-bottom: 1%;
  color: #FFF;
  text-align: center;
  font-size: 3rem;
  padding: 1%;
}

h4 {
  font-size: 150%;
  /*color: #828181;*/
  margin: 0 0 4% 0;
  text-align: center;
  letter-spacing: 2px;
}

.contents p {
  line-height: 1.6em;
  color: #333;
}

.contents p.note {
  text-align: right;
}

.mb3p {
  margin: 0 0 3% 0;
}

.contents .relation {
  width: 96%;
  margin: 0 auto 3%;
  overflow: hidden;
}

#contents .relation li {
  width: 23%;
  float: left;
  margin: 0 2% 2% 0;
  color: #01B3CD;
  font-size: 76%;
  text-align: center;
  line-height: 1.2;
}

#contents .relation li a {
  display: block;
}

#contents .relation li img {
  width: 100%;
  display: block;
  margin: 0 0 1% 0;
}

#contents .relation li.two {
  width: 48%;
  float: left;
}

#contents ol li.building a {
  line-height: 1.4;
}

.pr2p {
  padding: 0 2% 0 0;
}

.mr2p {
  margin: 0 2% 0 0;
}

.mb2p {
  margin: 0 0 2% 0;
}

.no_margin {
  margin-right: 0!important;
}

.gotop {
  background: #069 none repeat scroll 0 0;
  color: #fff;
  right: 20px !important;
  display: block;
  position: fixed;
  bottom: 3%;
}

.gotop a {
  color: #fff;
  display: block;
  padding: 10px 8px;
}

.gotop span {
  display: block;
  float: none;
  overflow: hidden;
  text-align: center;
}

img.illustration {
  margin: 0 0 2%;
}

img.fit_lc {
  width: 10%;
  margin-right: 1%;
  vertical-align: middle;
}

h3 img.fit_lc {
  width: 15%;
  margin-right: 1%;
}

/*-section　p-*/
section p {
  margin-bottom: 1em;
}

section .products li p {
  margin-bottom: 0;
}

section .products {
  margin-bottom: 3em;
  overflow: hidden;
}

/*-リンクボタンmargin-*/
.dl_button a {
  margin: 5px auto;
}

.dl_button a i {
  font-size: 150%;
}

.dl_button .small {
  font-size: 85%;
  margin-right: 2%;
}

.menu .dl_button a {
  text-align: left;
  padding: 10px 5%;
}

/*20160408追加*/
/*-----------content-----------*/

h2 {
  /*    color: #333;*/
  font-size: 18px;
  font-weight: 200;
  text-align: left;
}

section .menu {
  display: flex;
  flex-flow: row wrap;
  justify-content:space-between;
}

section .menu p {
  flex-basis: 32.2%;
  flex-grow: 1;
  margin: 0 1% 0 0;
}


section .menu p:nth-child(3),
section .menu p:nth-child(5) {
  margin-right:0;
}

.liconex-items {
  display:flex;
  flex-flow: row nowrap;
}

.liconex-items figure {
  padding:5px;
}

.liconex-items img {
  width:100%;
}


#fit01 {
 /* margin-top:5% !important;*/
}
/*-------------------------------------
お問い合わせ
--------------------------------------*/

.content-box .toiawase-title {
	background: #fff;
	color: #333;
    font-size: 1.6rem;
    font-family: Noto Sans Japanese-l;
    position: relative;
    display: block;
    text-align: center;
    margin: 0 auto 1em;
}

.content-box .toiawase-title:before {
  content: '';
  position: absolute;
  bottom: -15px;
  display: inline-block;
  width: 60px;
  height: 2px;
  left: 50%;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #069;
}


.toiawase {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  padding: 0 5px;
}

.toiawase p {
  text-align: center;
  width: 45%;
  font-family: Noto Sans Japanese-r;
  font-size: 1.4rem;
  flex-basis: 49%;
}

.toiawase .contact {
  background: #feffff;
  background: -moz-linear-gradient(top, #feffff 0, #85cae2 100%);
  background: -webkit-linear-gradient(top, #feffff 0, #85cae2 100%);
  background: linear-gradient(to bottom, #feffff 0, #85cae2 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#feffff', endColorstr='#85cae2', GradientType=0);
  border-radius: 8px;
  border: solid 3px #85cae2;
}

.toiawase .address, .toiawase .contact {
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
}

.toiawase .address {
  background: #feffff;
  background: -moz-linear-gradient(top, #feffff 0, #85e593 100%);
  background: -webkit-linear-gradient(top, #feffff 0, #85e593 100%);
  background: linear-gradient(to bottom, #feffff 0, #85e593 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#feffff', endColorstr='#85e593', GradientType=0);
  border-radius: 8px;
  border: solid 3px #85e593;
}

.toiawase p a {
  display: flex;
  padding: 5% 8%;
  align-items: center;
  justify-content: center;
}

.toiawase .fa {
  font-size: 2.2rem;
  margin-right: .2em;
}



/*===============================================
  画面の横幅が767px以下
===============================================*/
@media screen and (max-width: 767px) {

.contents #fit01{
  display:none;
}

.contents #fit02{
  display:inline;
}

#contents .relation li {
  margin: 0 2% 2% 0;
  width: 48%;
}

.contents p.note {
  text-align: left;
}

.dl_button a {
  padding: 5%;
}

.dl_button a i {
  float: left;
  line-height: 2em;
}

.menu .dl_button a {
 padding: 10px 5%;
    min-height: 79px;
    align-items: center;
    display: flex;
}

img.fit_lc {
  width: 20% !important;
}

.contents h3 {
  font-size: 20px;
  text-align: left;
  padding: 2% 5%;
}

.clm2-dl-btn a {
    flex-basis: 45.5%;
}

	.toiawase {
    display: block;
	}
	.toiawase p {
		width: auto;
	}
}

/*===============================================
  画面の横幅が768px以上
===============================================*/
@media screen and (min-width: 768px) {

/*-----------content-----------*/
.contents #fit01{
  display:inline;
}

.contents #fit02{
  display:none;
}

.contents h2 {
  border-bottom: 2px solid #000;
  font-size: 30px;
  font-weight: 500;
}

h3 {
  font-size: 20px;
}

section .products li {
  float: left;
  padding: 0 2.9%;
  width: 44%;
}

section .products li span {
  text-align: right;
  width: 100%;
  display: block;
}
}

/*===============================================
 iPad Portrait(縦)
===============================================*/

@media only screen and (min-device-width:768px) and (max-device-width:1024px) {

#contents .relation li {
  min-height: 150px;
}
}