@charset "utf-8";
/* CSS Document */

@import url("news.css");

/*====================================================================================
 clearfix
=====================================================================================*/
.clearfix:after,
ul#navBox li ul li:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix,
ul#navBox li ul li {
  min-height: 1px;
	position: relative;
}

* html .clearfix,
* html ul#navBox li ul li{
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}


/*====================================================================================
 default tagu
=====================================================================================*/
html {
  height: 100%;
}
body {
  font-size: 16px;
  line-height: 1.5;
  color: #444444;
  margin: 0px;
  padding: 0px;
  background-color: #FFFFFF;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  height: 100%;
  letter-spacing: 0.05em;
}
a:link {
	text-decoration: underline;
	color: #333333;
  -webkit-transition: all .3s;
  transition: all .3s;
}
a:visited {
	text-decoration: underline;
	color: #333333;
} 
a:hover {
  text-decoration: underline;
  color: #DD7C1B;
}
form,dl,dl dt,dl dd {
	margin: 0px;
	padding: 0px;
}

ul,
ul li {
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

h1,h2,h3,h4,h5,h6 {
  padding: 0px;
  margin: 0px;
}

img {
  border-style: none;
}

table {
  border-collapse: collapse;
  clear: both;
}
table th {
  width: 1%;
  white-space: nowrap;
  background-color: #F3F3F3;
  border: 1px solid #DDDDDD;
  padding-top: 6px;
  padding-right: 10px;
  padding-bottom: 6px;
  padding-left: 10px;
  font-weight: normal;
}
table td {
  border: 1px solid #DDDDDD;
  padding-top: 6px;
  padding-right: 10px;
  padding-bottom: 6px;
  padding-left: 10px;
  word-break: break-all;
}

br.pcHidden {
  display: none;
}

/*===================================================================================
 template
====================================================================================*/

/*----------------------------------- container ------------------------------------*/
#container {
  width: 100%;
  min-width: 1000px;
  height: 100%;
  position: relative;
}

/*------------------------------------- header -------------------------------------*/
header {
  width: 100%;
  height: 300px;
  background-color: #EAF0F3;
}
header h1 a {
  width: 700px;
  height: 80px;
  display: block;
  position: absolute;
  top: 50px;
  left: 50px;
  background-image: url(../images/tmp/logo.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  text-indent: -9999px;
  overflow: hidden;
}

/*------------------------------------- footer -------------------------------------*/
footer {
  width: 100%;
  min-width: 1000px;
  position: fixed;
  bottom: 0px;
  z-index: 990;
}

#gMenuBtn {
  display: none;
}

#copyright {
  font-size: 62.5%;
  float: left;
  margin-left: 20px;
  margin-top: 5px;
}
footer nav {
  width: 100%;
  background-image: url(../images/tmp/nav_bg.jpg);
  background-repeat: repeat;
  color: #FFFFFF;
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
}
footer nav ul {
  margin-right: 5px;
  margin-left: 50px;
  margin-bottom: 0px;
  float: right;
}
footer nav ul li {
  margin-right: 20px;
  display: inline-block;
  line-height: 100%;
  letter-spacing: 0.03em;
}
footer nav ul li a {
  display: block;
  position: relative;
  overflow: visible;
}

footer nav ul a:link {
	text-decoration: none;
	color: #FFFFFF;
}
footer nav ul a:visited {
	text-decoration: none;
	color: #FFFFFF;
} 
footer nav ul a:hover {
	text-decoration: none;
	opacity: 0.6;
	filter: alpha(opacity=60); /* ie lt 8 */
	-ms-filter: "alpha(opacity=60)"; /* ie 8 */
	-moz-opacity: 0.6; /* FF lt 1.5, Netscape */
	-khtml-opacity: 0.6; /* Safari 1.x */
	zoom: 1;
}

footer nav ul a.active {
	text-decoration:none;
	opacity: 0.5;
	filter: alpha(opacity=50); /* ie lt 8 */
	-ms-filter: "alpha(opacity=50)"; /* ie 8 */
	-moz-opacity: 0.5; /* FF lt 1.5, Netscape */
	-khtml-opacity: 0.5; /* Safari 1.x */
	zoom: 1;
}

footer nav ul a .navBoxActive {
  width: 100%;
  height: 5px;
  display: block;
  background-image: url(../images/tmp/nav_arrow.png);
  background-position: center top;
  background-repeat: no-repeat;
  position: absolute;
  top: -8px;
}

/* navi box -------------------------------------*/
ul#navBox {
  width: 100%;
  min-width: 1000px;
}

li.navBox01,
li.navBox02 {
  display: none;
  text-align: center;
}

ul#navBox li ul {
  width: 100%;
  background-color: #E1D6BC;
  background-image: url(../images/common/bg_noise.png);
  background-repeat: repeat;
  box-sizing: border-box;
  color: #444444;
  padding-top: 40px;
  padding-right: 30px;
  padding-left: 30px;
  padding-bottom: 35px;
  box-sizing: border-box;
}
ul#navBox li ul li {
  margin-right: 25px;
  margin-left: 25px;
  display: inline-block;
}

ul#navBox li ul li a img {
  width: 100px;
  height: auto;
  margin-top: 12px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

ul#navBox li ul li a:link {
  text-decoration: none;
  color: #89764D;
}
ul#navBox li ul li a:visited {
	text-decoration: none;
  color: #89764D;
}
ul#navBox li ul li a:hover {
	text-decoration: none;
	opacity: 0.6;
	filter: alpha(opacity=60); /* ie lt 8 */
	-ms-filter: "alpha(opacity=60)"; /* ie 8 */
	-moz-opacity: 0.6; /* FF lt 1.5, Netscape */
	-khtml-opacity: 0.6; /* Safari 1.x */
	zoom: 1;
}

ul#navBox li h2 {
  font-weight: normal;
}

/* footer news -------------------------------------*/
#ftrNewsWrap {
  width: 100%;
  background-color: #E1D6BC;
  background-image: url(../images/common/bg_noise.png);
  background-repeat: repeat;
  box-sizing: border-box;
  color: #444444;
  padding-top: 40px;
  padding-right: 100px;
  padding-left: 100px;
  padding-bottom: 35px;
  box-sizing: border-box;
}
#ftrNewsInner {
  width: 800px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
#ftrNews {
  width: 100%;
  text-align: left;
}
#ftrNews dl#dlLst01 {
  margin-top: 10px;
  margin-bottom: 30px;
}
#ftrNews dl#dlLst01 dd {
  border-bottom: 1px dashed #B1A280;
}

#ftrNewsBkLnk {
  text-align: right;
}
#ftrNewsBkLnk a {
  display: inline-block;
  background-image: url(../images/common/list_arrow_01.png);
  background-position: left 0.4em;
  background-repeat: no-repeat;
  background-size: 6px auto;
  padding-left: 12px;
}

/* page top button -------------------------------------*/
#pageTop {
  width: 50px;
  height: 50px;
  position: fixed;
  right: 20px;
  bottom: 64px; /* JSで位置を計算して指定しているけど一応記載 */
}

#pageTop a {
  width: 50px;
  height: 50px;
  display: block;
  background-image: url(../images/tmp/b_pagetop.png);
  background-repeat: no-repeat;
  background-position: 0px 0px;
  background-size: cover;
  text-indent: -9999px;
  overflow: hidden;
	text-decoration: none;
	opacity: 0.4;
	filter: alpha(opacity=40); /* ie lt 8 */
	-ms-filter: "alpha(opacity=40)"; /* ie 8 */
	-moz-opacity: 0.4; /* FF lt 1.5, Netscape */
	-khtml-opacity: 0.4; /* Safari 1.x */
	zoom: 1;
}
#pageTop a:hover {
	text-decoration: none;
	opacity: 0.8;
	filter: alpha(opacity=80); /* ie lt 8 */
	-ms-filter: "alpha(opacity=80)"; /* ie 8 */
	-moz-opacity: 0.8; /* FF lt 1.5, Netscape */
	-khtml-opacity: 0.8; /* Safari 1.x */
	zoom: 1;
}

/* scroll icon -------------------------------------*/
#scrollIcon {
  width: 50px;
  height: 50px;
  position: fixed;
  left: 50%; /* JSで位置を計算して指定しているけど一応記載 */
  bottom: 64px; /* JSで位置を計算して指定しているけど一応記載 */
  z-index: 989;
  background-image: url(../images/tmp/b_scroll.png);
  background-repeat: no-repeat;
  background-position: 0px 0px;
  background-size: cover;
  text-indent: -9999px;
  overflow: hidden;
  text-decoration: none;
  margin-left: auto;
  margin-right: auto;
  display: none;
}

/*----------------------------------- contents ------------------------------------*/
#contentsWrap {
  width: 980px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 80px;
  padding-bottom: 120px;
}

#contentsWrap h1 {
  font-weight: normal;
  line-height: 1.3;
  text-align: center;
  font-size: 225%;
  margin-bottom: 50px;
}
#contentsWrap h1 br {
  display: none;
}

#contentsWrap h2 {
  font-weight: normal;
  line-height: 1.3;
  font-size: 162.5%;
  margin-top: 60px;
  margin-bottom: 20px;
  padding-bottom: 5px;
  border-bottom: 1px solid #DEDEDE;
  background-image: url(../images/common/ttl_icon_h2.png);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 10px auto;
  padding-left: 25px;
  padding-top: 10px;
  margin-left: -10px;
  margin-right: -10px;
}
#contentsWrap .box01Wrap h2,
#contentsWrap .box02Wrap h2{
  margin-top: 0px;
}

#contentsWrap h3 {
  font-weight: normal;
  font-size: 137.5%;
  margin-top: 40px;
  margin-bottom: 0px;
  padding-left: 1.3em;
  background-image: url(../images/common/ttl_icon_h3.png);
  background-repeat: no-repeat;
  background-position: left 0.2em;
  background-size: 22px auto;
}

.box01L > h3 {
  margin-top: 0px !important;
}

#contentsWrap h1 + p {
  margin-top: 0px;
}


/*====================================================================================
 common parts
=====================================================================================*/
/*---------------------------------- dl list style ----------------------------------*/
dl#dlLst01 {
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 40px;
  margin-top: 40px;
}
dl#dlLst01 dt {
  float: left;
  width: 6em;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 0px;
  padding-left: 0px;
  margin: 0px;
  clear: both;
  box-sizing: border-box;
}
dl#dlLst01 dd {
  padding-left: 7em;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 0px;
  margin: 0px;
  border-bottom: 1px dashed #CCCCCC;
  box-sizing: border-box;
}

/*----------------------------------- list style -----------------------------------*/
ul.ulLst01 li {
  background-image: url(../images/common/list_arrow_01.png);
  background-position: left 0.4em;
  background-repeat: no-repeat;
  background-size: 6px auto;
  padding-left: 12px;
}

ul.emphasisLst {
  font-size: 125%;
  margin-left: 30px;
  margin-right: 30px;
  margin-top: 30px;
  margin-bottom: 30px;
}
ul.emphasisLst li {
  background-image: url(../images/common/list_arrow_02.png);
  background-position: left 0.4em;
  background-repeat: no-repeat;
  background-size: 8px auto;
  padding-left: 18px;
  margin-bottom: 10px;
}

/*--------------------------------------- box --------------------------------------*/
.box01Wrap {
  width: 100%;
  margin-top: 60px;
}
.box02Wrap {
  width: 100%;
  margin-top: 40px;
}
.box01L {
  width: 630px;
  float: left;
}
.box01R {
  width: 300px;
  float: right;
}

.box01Wrap p:last-child {
  margin-bottom: 0px;
}

/*----------------------------------- contact box -----------------------------------*/
.contactBox {
  padding: 30px;
  width: 100%;
  border: 2px solid #9cc3d6;
  box-sizing: border-box;
  border-radius: 10px;
  margin-top: 50px;
  overflow: hidden;
}
.contactBoxL {
  width: 600px;
  float: left;
}
.tell {
  font-size: 350%;
  font-family: Arial, Helvetica, "sans-serif";
  color: #80B0C7;
  background-image: url(../images/common/icon_phone.png);
  background-position: left 0.15em;
  background-size: 30px auto;
  background-repeat: no-repeat;
  padding-left: 40px;
  line-height: 100%;
}

a.tell:link {
	text-decoration: none;
  color: #80B0C7;
}
a.tell:visited {
	text-decoration: none;
  color: #80B0C7;
} 
a.tell:hover {
  text-decoration: none;
  color: #80B0C7;
}
.contactBoxR {
  width: 260px;
  float: right;
}
.contactBox p {
  margin-top: 0px;
  margin-bottom: 20px;
}

.worksList + .contactBox {
  margin-top: 10px;
}

/*----------------------------------- button -----------------------------------*/
#btnArea {
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

/* link button -----------------------------------*/
.button {
  display: block;
  width: 260px;
  height: 52px;
  text-align: center;
  line-height: 52px;
  background-color: #80B0C7;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
  background-image: url(../images/common/bg_button.png);
  background-repeat: repeat;
  font-size: 112.5%;
  border-radius: 5px;
}
a.button:link {
	text-decoration: none;
	color: #FFFFFF;
}
a.button:visited {
	text-decoration: none;
	color: #FFFFFF;
} 
a.button:hover {
  text-decoration: none;
  color: #80B0C7;
  background-color: #FFFFFF;
  border: 2px solid #80B0C7;
  box-sizing: border-box;
}
#btnArea .button {
  margin-left: auto;
  margin-right: auto;
}

/* back button -----------------------------------*/
a.backBtn {
  display: inline-block;
  text-align: center;
  line-height: 100%;
  background-color: #c7ba9c;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 100%;
  padding-top: 5px;
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 5px;
  margin-top: 30px;  /*border-radius: 5px;*/
}
a.backBtn:link {
	text-decoration: none;
	color: #FFFFFF;
}
a.backBtn:visited {
	text-decoration: none;
	color: #FFFFFF;
} 
a.backBtn:hover {
	text-decoration: none;
	opacity: 0.6;
	filter: alpha(opacity=60); /* ie lt 8 */
	-ms-filter: "alpha(opacity=60)"; /* ie 8 */
	-moz-opacity: 0.6; /* FF lt 1.5, Netscape */
	-khtml-opacity: 0.6; /* Safari 1.x */
	zoom: 1;
}

/*-------------------------------------- margin -------------------------------------*/
.mgnTop40 {
  margin-top: 40px;
}

/*----------------------------------- image align -----------------------------------*/
.imgLeft {
  float: left;
  margin-right: 20px;
  margin-bottom: 0.5em;
}
.imgCenter {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 30px;
}
.imgRight {
  float: right;
  margin-left: 40px;
  margin-bottom: 0.5em;
}

/*-------------------------------- font size --------------------------------*/
.txtXSmall {
  font-size: 62.5%; /* 10px相当 */
}
.txtSmall {
  font-size: 75%; /* 12px相当 */
}
.txtLarge {
  font-size: 125%; /* 20px相当 */
}
.txtXLarge {
  font-size: 150%; /* 24px相当 */
}
.txtLarge {
  font-size: 175%; /* 28x相当 */
}


/*====================================================================================
 works
=====================================================================================*/

/*-------------------------------------- list --------------------------------------*/
ul.worksList {
  margin-left: -10px;
  margin-right: -10px;
}
ul.worksList li {
  width: 420px;
  float: left;
  margin-bottom: 50px;
  margin-right: 40px;
  margin-left: 40px;
}

ul.worksList li img.workNoLink {
  margin-bottom: 20px;
}

ul.worksList li ul li {
  width: auto;
  float: none;
  margin-bottom: 0px;
  margin-right: 0px;
  margin-left: 0px;
  background-image: url(../images/common/list_arrow_01.png);
  background-position: left 0.4em;
  background-repeat: no-repeat;
  background-size: 6px auto;
  padding-left: 12px;
}
ul.worksList li > a {
  display: block;
  margin-bottom: 20px;
}
ul.worksList li > a:hover {
	text-decoration: none;
	opacity: 0.6;
	filter: alpha(opacity=60); /* ie lt 8 */
	-ms-filter: "alpha(opacity=60)"; /* ie 8 */
	-moz-opacity: 0.6; /* FF lt 1.5, Netscape */
	-khtml-opacity: 0.6; /* Safari 1.x */
	zoom: 1;
}
#contentsWrap ul.worksList li h2 {
  font-size: 100%;
  margin-bottom: 10px;
  margin-right: 0px;
  margin-left: 0px;
  margin-top: 0px;
  padding: 0px;
  border-style: none;
  background: none;
}


/*====================================================================================
 toppage
=====================================================================================*/
/*------------------------------------ container ------------------------------------*/
#topContainer {
  width: 100%;
  min-width: 1000px;
  height: 100%;
  position: relative;
}

#topContainer header {
  width: 100%;
  background-image: none;
  background: none;
}


/*====================================================================================
 form
=====================================================================================*/
/*------------------------------------ form list ------------------------------------*/
dl#formLst {
  width: 100%;
  margin-top: 40px;
  padding-left: 30px;
  padding-right: 30px;
  margin-bottom: 40px;
  box-sizing: border-box;
}
dl#formLst dt {
  float: left;
  width: 13em;
  padding-top: 15px;
  padding-bottom: 14px;
  padding-right: 0px;
  padding-left: 0px;
  margin: 0px;
  clear: both;
  box-sizing: border-box;
}

dl#formLst dd {
  padding-left: 14em;
  padding-top: 15px;
  padding-bottom: 14px;
  padding-right: 0px;
  margin: 0px;
  border-bottom: 1px dashed #CCCCCC;
  box-sizing: border-box;
}

#formLst .formMust,
#formLst .formNoMust {
  color: #FFFFFF;
  font-size: 68.8%;
  padding-top: 0.4em;
  padding-right: 0.3em;
  padding-left: 0.3em;
  padding-bottom: 0.3em;
  line-height: 100%;
  margin-top: 0px;
  margin-right: 0.7em;
  margin-bottom: 0.2em;
  margin-left: 0px;
  -moz-border-radius: 2px; /* Firefox v1.0+ */
  -webkit-border-radius: 2px; /* Safari v3.0+ and by Chrome v0.2+ */
  border-radius: 2px;
  vertical-align: middle;
  display: inline-block;
}
#formLst .formMust {
  background-color: #F09840;
}
#formLst .formNoMust {
  background-color: #80B0C7;
}

#formLst .formBoxMgn {
  margin-bottom: 5px;
}

#formLst input,
#formLst select,
#formLst textarea,
#memberForm input,
#memberForm select,
#memberForm textarea {
	border-color: #BBBBBB;
	border-width: 1px;
	border-style: solid;
	padding: 4px;
  font-size: 100%;
  box-sizing: border-box;
}
#formLst select {
  color: #444444 !important;
  margin-right: 5px;
}

/* form size ----------------------*/
#formLst .formTxt {
	width: 450px;
  margin-right: 10px;
}

#formLst .formTelBox {
  width: 5em;
}

.formCaution {
  color: #C82123;
  display: inline-block;
  margin-top: 5px;
  font-size: 75%;
 }

/*----------------------------------- form button -----------------------------------*/
#formBtnArea {
  width: 100%;
  text-align: center;
}

input.formBtn  {
  display: block;
  width: 260px;
  height: 52px;
  text-align: center;
  line-height: 52px;
  background-color: #80B0C7;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
  background-image: url(../images/common/bg_button.png);
  background-repeat: repeat;
  font-size: 112.5%;
  border-radius: 5px;
  border-style: none;
  color: #FFFFFF;
  margin-left: auto;
  margin-right: auto;
  vertical-align: middle;
  overflow:visible;
  cursor: pointer;
  font-family : inherit;
}

input.formBtn:hover {
	text-decoration: none;
	opacity: 0.6;
	filter: alpha(opacity=60); /* ie lt 8 */
	-ms-filter: "alpha(opacity=60)"; /* ie 8 */
	-moz-opacity: 0.6; /* FF lt 1.5, Netscape */
	-khtml-opacity: 0.6; /* Safari 1.x */
	zoom: 1;
}


/*====================================================================================
 about ecoru
=====================================================================================*/
/*---------------------------------- profile box -----------------------------------*/
#profBoxWrap {
  margin-top: 60px;
}

#profBox {
  width: 740px;
  display: inline-block;
  border-top: 1px dashed #CCCCCC;
}


/*====================================================================================
 faq
=====================================================================================*/
/*---------------------------------- faq list -----------------------------------*/
dl.faqList {}
dl.faqList dt,
dl.faqList dd {
	padding-left: 40px;
  padding-right: 5px;
	padding-bottom: 15px;
	background-size: 25px auto;
	background-repeat: no-repeat;
  border-bottom: 1px dashed #CCCCCC;
}
dl.faqList dt {
	background-image: url(../web_creation/faq/images/icon_q.png);
  background-position: 5px 0.8em;
  padding-top: 15px;
  cursor: pointer;
}
dl.faqList dd {
	background-image: url(../web_creation/faq/images/icon_a.png);
  background-position: 5px 0em;
	display: none;
	margin-top: -1px;
	background-color: #FFFFFF;
  padding-top: 3px;
}

dl.faqList dd ul {
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 1em;
}





/*/////////////////////////////////////////////////////////////////// mobile ///////////////////////////////////////////////////////////////////*/

@media screen and (max-width:1020px) {
/*@media screen and (max-width:834px) {*/
  
/*====================================================================================
 default tagu
=====================================================================================*/
/*----------------------------------- android対策 -----------------------------------*/
/* android用 グローバルナビ表示時にナビの下の要素のハイライト削除 */
body.removeHighlight{
 -webkit-tap-highlight-color: rgba(0,0,0,0);
}

html {
  height: 100%;
}

img {
  width: 100%;
  height: auto;
}
img.imgSizeClr {
  width: auto;
  height: auto;
}

br.pcHidden {
  display: block;
}


/*===================================================================================
 template
====================================================================================*/

/*----------------------------------- container ------------------------------------*/
#container {
  width: 100%;
  min-width: 300px;
}

/*------------------------------------- header -------------------------------------*/
header {
  height: 120px;
}
header h1 a {
  width: 80%;
  height: 0;
  padding-top: 9.12%;
  top: 30px;
  left: 10%;
}

/*------------------------------------- footer -------------------------------------*/
/* groval menu button -------------------------------------*/
footer {
  min-width: 100%;
  z-index: 990;
}
footer nav {
  background-position: 0px bottom;
  padding-top: 0px;
  padding-bottom: 0px;
  z-index: 991;
}
#copyright {
  width: 100%;
  float: none;
  margin-left: 0px;
  margin-top: 0px;
  padding: 3px;
  background-color: #000000;
  position: absolute;
  left: 0px;
  bottom: 0px;
  box-sizing: border-box;
  text-align: center;
}

#gMenuBtn {
  z-index: 1000;
  display: inline-block;
  margin-left: 10px;
}
#gMenuBtn a {
  background-image: url(../images/tmp/menu_btn.png);
  background-position: 0px 0px;
  background-repeat: no-repeat;
  text-indent: -9999px;
  overflow: hidden;
  display: block;
  width: 50px;
  height: 50px;
  background-size: 50px auto;
}

footer nav ul {
  width: 100%;
  margin-right: 0px;
  margin-left: 0px;
  padding: 10px;
  float: none;
  display: none;
  box-sizing: border-box;
  background-image: url(../images/common/bg_noise.png);
  font-size: 125%;
}
footer nav ul li {
  width: 100%;
  box-sizing: border-box;
  margin-right: 0px;
  line-height: 100%;
  letter-spacing: 0.03em;
}
footer nav ul li a {
  padding: 10px;
}

footer nav ul a:hover {
	text-decoration: none;
	opacity: 1.0;
	filter: alpha(opacity=100); /* ie lt 8 */
	-ms-filter: "alpha(opacity=100)"; /* ie 8 */
	-moz-opacity: 1.0; /* FF lt 1.5, Netscape */
	-khtml-opacity: 1.0; /* Safari 1.x */
	zoom: 1;
}

footer nav ul a.active {
	text-decoration: none;
	opacity: 1.0;
	filter: alpha(opacity=100); /* ie lt 8 */
	-ms-filter: "alpha(opacity=100)"; /* ie 8 */
	-moz-opacity: 1.0; /* FF lt 1.5, Netscape */
	-khtml-opacity: 1.0; /* Safari 1.x */
	zoom: 1;
}

footer nav ul a .navBoxActive {
  background-image: none;
}

/* navi box -------------------------------------*/
ul#navBox {
  width: 100%;
  min-width: 100%;
  z-index: 992;
  height: 100%;
}
li.navBox01,
li.navBox02 {
  overflow-y: auto;
  text-align: left;
  position: relative;
}

ul#navBox li ul {
  background-color: #E1D6BC;
  text-align: left;
  padding-top: 30px;
  padding-right: 30px;
  padding-left: 30px;
  padding-bottom: 20px;
  box-sizing: border-box;
}
ul#navBox li ul li {
  margin-right: 0px;
  margin-left: 0px;
  margin-bottom: 20px;
  margin-top: 0px;
  display: block;
}

ul#navBox li ul li a img {
  width: auto;
  height: 3em;
  float: left;
  margin-left: 0px;
  margin-right: 20px;
  margin-top: 0px;
}

ul#navBox li ul li a:hover {
	text-decoration: none;
	opacity: 1.0;
	filter: alpha(opacity=100); /* ie lt 8 */
	-ms-filter: "alpha(opacity=100)"; /* ie 8 */
	-moz-opacity: 1.0; /* FF lt 1.5, Netscape */
	-khtml-opacity: 1.0; /* Safari 1.x */
	zoom: 1;
}

ul#navBox li h2 {
  font-size: 125%;
}

/* footer news -------------------------------------*/
#ftrNewsWrap {
  width: 100%;
  padding-top: 30px;
  padding-right: 30px;
  padding-left: 30px;
  padding-bottom: 30px;
}
#ftrNewsInner {
  width: 100%;
}
#ftrNewsWrap dl#dlLst01 {
  margin-top: 10px;
}
  
/* page top button -------------------------------------*/
#pageTop {
  width: 40px;
  height: 40px;
  right: 5px;
  bottom: 19px;
  z-index: 1999;
}

#pageTop a {
  background-image: url(../images/tmp/b_pagetop_mb.png);
  background-position: center center;
  background-size: 30px auto;
  width: 40px;
  height: 40px;
	opacity: 1.0;
	filter: alpha(opacity=1000);*/ /* ie lt 8 */
	-ms-filter: "alpha(opacity=100)"; /* ie 8 */
	-moz-opacity: 1.0 /* FF lt 1.5, Netscape */
	-khtml-opacity: 1.0; /* Safari 1.x */
	zoom: 1;
}
#pageTop a:hover {
	text-decoration: none;
	opacity: 1.0;
	filter: alpha(opacity=100); /* ie lt 8 */
	-ms-filter: "alpha(opacity=100)"; /* ie 8 */
	-moz-opacity: 1.0; /* FF lt 1.5, Netscape */
	-khtml-opacity: 1.0; /* Safari 1.x */
	zoom: 1;
}

/* scroll icon -------------------------------------*/
#scrollIcon {
  bottom: 74px; /* JSで位置を計算して指定しているけど一応記載 */
  background-image: url(../images/tmp/b_scroll_mb.png);
}

/*----------------------------------- contents ------------------------------------*/
#contentsWrap {
  width: 90%;
  padding-top: 30px;
  padding-bottom: 100px;
  margin-left: 5%;
  margin-right: 5%;
}

#contentsWrap h1 {
  font-weight: normal;
  line-height: 1.3;
  text-align: center;
  font-size: 175%;
  margin-bottom: 30px;
}
#contentsWrap h1 br {
  display: inline-block;
}
#contentsWrap h1 + .box01Wrap {
  margin-top: 30px;
}
  
#contentsWrap h2 {
  font-size: 137.5%;
  margin-top: 40px;
}

#contentsWrap h3 {
  font-size: 112.5%;
}

/*====================================================================================
 common parts
=====================================================================================*/
/*---------------------------------- dl list style ----------------------------------*/
dl#dlLst01 {
  padding-left: 0px;
  padding-right: 0px;
  margin-bottom: 40px;
  margin-top: 30px;
}
dl#dlLst01 dt {
  float: none;
  width: auto;
  padding-bottom: 5px;
}
dl#dlLst01 dt::before {
  content: '[';
}
dl#dlLst01 dt::after {
  content: ']';
}
dl#dlLst01 dd {
  padding-left: 0em;
  padding-top: 0px;
}

/*--------------------------------------- box --------------------------------------*/
.box01Wrap {
  margin-top: 40px;
}
.box02Wrap {
  margin-top: 30px;
}
.box01L {
  width: 100%;
  float: none;
  margin-bottom: 30px;
}
.box01R {
  width: 100%;
  float: none;
}

.box01Wrap p:last-child {
  margin-bottom: 0px;
}

/*----------------------------------- contact box -----------------------------------*/
.contactBox {
  width: 100%;
	margin-top: 30px;
  padding: 20px;
}
.contactBoxL {
  width: 100%;
  float: none;
  margin-bottom: 20px;
}
.tell {
  font-size: 200%;
  background-size: 17px auto;
  padding-left: 23px;
}

.contactBoxR {
  width: 100%;
  float: none;
}

#profBoxWrap + .contactBox {
  margin-top: 20px;
}

/*----------------------------------- button -----------------------------------*/
/* link button -----------------------------------*/
.button {
  width: 100%;
  height: auto;
  line-height: 46px;
}

/* back button -----------------------------------*/
a.backBtn:hover {
	text-decoration: none;
	opacity: 1.0;
	filter: alpha(opacity=100); /* ie lt 8 */
	-ms-filter: "alpha(opacity=100)"; /* ie 8 */
	-moz-opacity: 1.0; /* FF lt 1.5, Netscape */
	-khtml-opacity: 1.0; /* Safari 1.x */
	zoom: 1;
}

/*----------------------------------- image align -----------------------------------*/
.imgLeft {
  margin-right: 20px;
}

.imgRight {
  margin-left: 20px;
}


/*====================================================================================
 toppage
=====================================================================================*/
/*------------------------------------ container ------------------------------------*/
#topContainer {
  min-width: 300px;
}


/*====================================================================================
 works
=====================================================================================*/

/*-------------------------------------- list --------------------------------------*/
ul.worksList {
  margin-left: 0px;
  margin-right: -5%;
}
ul.worksList li {
  width: 45%;
  float: left;
  margin-bottom: 30px;
  margin-right: 5%;
  margin-left: 0px;
}

ul.worksList li > a:hover {
	text-decoration: none;
	opacity: 1.0;
	filter: alpha(opacity=100); /* ie lt 8 */
	-ms-filter: "alpha(opacity=100)"; /* ie 8 */
	-moz-opacity: 1.0; /* FF lt 1.5, Netscape */
	-khtml-opacity: 1.0; /* Safari 1.x */
	zoom: 1;
}


/*====================================================================================
 form
=====================================================================================*/
/*------------------------------------ form list ------------------------------------*/
dl#formLst {
  margin-top: 20px;
  padding-left: 0px;
  padding-right: 0px;
  margin-bottom: 30px;
}
dl#formLst dt {
  float: none;
  width: auto;
  padding-top: 15px;
  padding-bottom: 0px;
}

dl#formLst dd {
  padding-left: 0em;
  padding-top: 10px;
  padding-bottom: 10px;
}


#formLst .formMust {
  background-color: #F09840;
}
#formLst .formNoMust {
  background-color: #80B0C7;
}

#formLst .formBoxMgn {
  margin-bottom: 5px;
}

#formLst input,
#formLst select,
#formLst textarea,
#memberForm input,
#memberForm select,
#memberForm textarea {
  margin-bottom: 5px;
}
#formLst select {
  margin-right: 0px;
}

/* form size ----------------------*/
#formLst .formTxt {
	width: 100%;
  margin-right: 10px;
}

#formLst .formTelBox {
  width: 4em;
}

.formCaution {
  margin-top: 0px;
 }

/*----------------------------------- form button -----------------------------------*/
input.formBtn  {
  width: 80%;
  height: 52px;
}

input.formBtn:hover {
	text-decoration: none;
	opacity: 1.0;
	filter: alpha(opacity=100); /* ie lt 8 */
	-ms-filter: "alpha(opacity=100)"; /* ie 8 */
	-moz-opacity: 1.0; /* FF lt 1.5, Netscape */
	-khtml-opacity: 1.0; /* Safari 1.x */
	zoom: 1;
}


/*====================================================================================
 about ecoru
=====================================================================================*/
/*---------------------------------- profile box -----------------------------------*/
#profBoxWrap {
  margin-top: 40px;
}
#profBoxWrap img {
  width: 40%;
  height: auto;
}

#profBox {
  width: 100%;
}


/*====================================================================================
 faq
=====================================================================================*/
/*---------------------------------- faq list -----------------------------------*/
dl.faqList dt,
dl.faqList dd {
	padding-left: 30px;
  padding-right: 0px;
	padding-bottom: 10px;
	background-size: 20px auto;
}
dl.faqList dt {
  background-position: 0px 0.7em;
  padding-top: 10px;
}
dl.faqList dd {
  background-position: 0px 0em;
  padding-top: 0px;
}


















}