@charset "UTF-8";
/* ------------------------------------------------------------------
@media
-------------------------------------------------------------------*/
@media (max-width:767px) {

p {
  font-size: 15px;
}

.br-sp { display:block; }
.br-pc { display:none; }

/* ------------------------------------------------------------------
pagetop btn
-------------------------------------------------------------------*/

.page-top_on{
  bottom: 30px;
  right: 20px;
}

.page-top_on_bottom{  /*ブラウザ固定解除後　配置位置*/
  bottom: -125px;
  right: 20px;
}

/* ------------------------------------------------------------------
header
-------------------------------------------------------------------*/
#header{
  width:100%;
  margin: 50px 0 0 0;
  padding: 0 0 40px 0;
  background-size:150% auto;
}

.header-inner{
  width:100%;
  position:relative; overflow:hidden; width:100%; height:30; /* 野菜画像 コンテンツ幅より大きな画像をセンター配置 */
}

.header_yasai{
  position:absolute; left:50%; width:711px; height:30px; margin-left:-355px; /* 野菜画像 コンテンツ幅より大きな画像をセンター配置 */
}

h1 img{
  padding: 50px 0 0 0;
  width:70%;
  max-width: 320px;
  height: auto;
}

.read img{
  padding: 20PX 0 0 0;
  width:100%;
  max-width: 450px;
  height: auto;
}

.logo_electrodream img{
  padding: 20px 0 0 0;
  width: 40%;
  max-width: 150px;
  height: auto;
}

/* ------------------------------------------------------------------
kotei_nav_block
-------------------------------------------------------------------*/

.kotei_nav_block{
  padding: 30px 0 0 0;
}

.kotei_nav_block .gnav-btn_box{
  padding: 5px 0 0 0;
}

.footer_navi ul{
  display:-webkit-box;
  display:flex;
  flex-direction: column;
  padding: 20px 0 0 20px;
}

.footer_navi li{
    font-size: 15px;
  text-align: center;
  padding: 0 0 30px 0;
}


/* ------------------------------------------------------------------
intro1
-------------------------------------------------------------------*/

h2{
  text-align: left;
}

.text_brown{
  text-align: left;
}

#intro1{
  background-image: url(../images/intro_bg.png); background-repeat: repeat-x; background-position: bottom; background-size:600px auto; /* 背景波画像 */
}

/* ------------------------------------------------------------------
intro2
-------------------------------------------------------------------*/

#intro2{
  padding: 10px 0 80px 0;
  background-image: url(../images/navi_bg_top.png); background-repeat: repeat-x; background-position: bottom; background-size:1000px auto; /* 背景波画像 */
}

.intro2-inner{
  padding: 40px 10px 0px 10px;
}


/* ------------------------------------------------------------------
intro2
-------------------------------------------------------------------*/

.intro2-inner{
  margin: 0 auto;
  padding: 40px 10px 30px 10px;
  max-width: 767px;
  overflow: hidden;
  clear: both;
}

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

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

.intro2_text_box{
  padding: 20px 0 0 0;
  width: 100%;
  float: none;
}

.reverse_photo{
 float: none;
}

.reverse_text{
 float: none;
}

/* ------------------------------------------------------------------
gnav
-------------------------------------------------------------------*/
#gnav{
  padding: 0 10px 20px 10px;
  background-image: url(../images/gnav_bg_bottom.png); background-repeat: repeat-x; background-position: bottom; background-size:800px auto; /* 背景波画像 */
}

.gnav-title{
  font-size: 16px;
  padding: 4px;
  width: 70%;
}

.gnav-inner{
  padding: 5px 0 0 0;
}

.gnav-btn_box{
  padding: 5px 0 0 0;
  width: 100%;
}

/* flexbox 最後のカラムを左寄せ（横4列の場合）*/
.gnav-btn_box::before{ content:""; display: block; width: 100%; order:1; }
.gnav-btn_box::after{ content:""; display: block; width: 100%; }

.gnav-btn{
  padding: 0 0 0 0;
  text-align: left;
  -webkit-justify-content: flex-start; 
  justify-content: flex-start;  /*テキスト左寄せ*//* IE 11も */
  margin: 5px 0 0 0;
  width: 100%;
  background-image: url(../images/gnav_arrow.png); background-repeat: no-repeat; background-size: 18px 18px; background-position: center right 15px; /* 背景波画像 */
}

.gnav-btn a{
  padding: 12px 50px 12px 10px;
  font-size: 15px;
  line-height: 140%;
  font-weight: bold;
  /*color: #813f00;*/
}

/* ------------------------------------------------------------------
works
-------------------------------------------------------------------*/
#works_title_area{
  padding: 15px 0 40px 0; 
}

#works_title_area h2{ /* 制作事例 */
  padding: 20px 0 3px 0;
  font-size: 20px;
  display:inline-block; border-bottom: solid 3px #b2d740; /* タイトル下線 */
}

.case_title_area {
  margin: 0 0 -15px 0;
  background-image: url(../images/work_title_bg_top_white.png); background-repeat: repeat-x; background-position: top; background-size:1000px auto; /* 背景波画像 */
}

.case_title-inner {
  width: 100%;
}

.tit_nougyou{ width: 206px; }
.tit_shizen-tane{ width: 162px; }
.tit_eco-no-sato{ width: 188px; }

.circle{
  position: relative; 
  margin: 0 auto;
  top: -45px; 
  left: 0px;
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #b57639;
}

.circle span{
  font-size: 12px;
  line-height: 150%;
  font-weight: bold;
  color: #FFF;
  text-align:center;
  position: absolute;
  display: inline-block;
  left: 0;
  top: 53%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width :80px;
}



.case_title_area h3{
  margin: -30px 0 0 0;
  padding: 0 0 0 0;
  color: #FFF;
  font-size: 38px;
}

.case_read{
  position: relative;
  top: 20px;
  /*color: #813f00;*/
  font-weight: bold;
  font-size: 17px;
  width: auto;
  margin: 0 auto;

  padding: 8px 30px;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  background-color: #FFF;

  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
}

/* ------------------------------------------------------------------
case_main
-------------------------------------------------------------------*/

.case_main{
  padding: 0 10px 30px 10px;
}

.thumb_area{
  width: 100%;
}

.thumb{
  box-shadow: 0px 5px 10px 3px rgba(0, 0, 0, 0.15);  
  /*水平、垂直、距離、広がり*/
}

.thumb_pc { width: 100%; }
.thumb_pc img{ width: 100%; }
.thumb_sp { display: none; }

.btn_pc a{
  font-weight: bold;
}

/* ------------------------------------------------------------------
feature summary
-------------------------------------------------------------------*/

.feature_summary{
  width: 100%;
  padding: 15px 15px 15px 20px;
}

.feature_summary ul {
  width: 100%;
}

.feature_summary li {
  float: none;
  width: 100%;
  padding: 8px 0px 5px 25px;
  background-image: url(../images/marker_feature.png); background-repeat: no-repeat; background-size: 15px 12px; background-position: center left;
}

/* ------------------------------------------------------------------
feature
-------------------------------------------------------------------*/

.point{
  width: 100%;  /* flexbox ワンカラム化 */
}

/* ------------------------------------------------------------------
orner comment
-------------------------------------------------------------------*/

.orner_area{
  width: 100%;
  /*display: block;*/
  display:block!important;
}

.orner_img{
  width: 100%;
  text-align: center;
}

.orner_comment{
  margin: 20px 0 0 0;
  width: 100%;
  /*position: static;
  display: block;*/
}

/* アイコンを左に表示 */
.orner_comment:before {
  content: "";
  position: absolute;
  top: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-bottom: 12px solid #FFF;
  z-index: 2;
}

.orner_comment::after{
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-bottom: 14px solid #e8cf9d;
  z-index: 1;
}

.orner_comment p {
  margin: 0;
  padding: 0;
}

.orner_comment span{
  line-height: 140%;
  padding: 10px 0 0 0;
}

/* ------------------------------------------------------------------
contact_middle
-------------------------------------------------------------------*/
.contact_middle{
  padding: 40px 0;
}

.contact_btn_box{
  width: 100%;　             /* SP */
  margin: 0 auto;
  flex-direction: column;
}

.faq_btn{
  margin: 0 0 15px 0;
}

.faq_btn a{  font-weight: bold; }
.contact_btn a{ font-weight: bold; }

/* ------------------------------------------------------------------
project_support
-------------------------------------------------------------------*/

.support_container{
  margin: 0 0 100px 0;
}

#project_support_title_area{
  padding: 60px 0 100px 0;
}

#project_support_title_area h2{ /*プロジェクトサポート*/
  font-size: 20px;
  padding: 20px 0 3px 0;
}

.support_title_area{
  height: auto;
  background-color: #68c11a;

　/* アイコン + テキストボックス flexbox */
  display: -webkit-flex;
  display: flex;
  flex-direction: column;　/* 縦並び（ラベル + 見出し）*/
}


.circle_support{
  top:0px; 		/* リセット*/
  margin: -70px auto 0 auto;	/* 10pxだけ重ねる */
}

.circle_support span{
  left: 0;
  top: 50%;
}

.support_title_area h3{   /* 案件タイトル */
  font-size: 18px;
  line-height: 140%;
  margin: -10px 0 0 0;	/* ラベルを10px重ねた分を相殺 */
  padding: 17px 0 13px 0;

  /*text-align: center;*/

  /* テキスト上下左右中央配置 */
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  -webkit-justify-content: center; 
  align-items: center;      /*上下中央*/
  justify-content: center;  /*左右中央*/

  -webkit-flex: auto;   /* flex: 1; 可変リセット */
  flex: auto;           /* flex: 1; 可変リセット */

  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.support_title_area h3 span{
  font-size: 16px;
}

.project_support_main{
  width: 100%;
  padding: 0 10px 70px 10px;
  box-sizing: border-box;
}


.project_support-inner{
  padding: 20px 10px 20px 10px;
　/* 写真 + 右側コンテンツ flexbox */
  
  display: -webkit-flex;
  display: flex;

  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}


.support_photo{
  margin: 0 auto;
  padding: 0 0 20px 0;
}

.support_photo img{
  width: 190px;
  height: 190px;
}

.support_right_area{
  padding: 0;
  margin: 0;

  -webkit-flex: auto;   /* flex: 1; 可変リセット */
  flex: auto;           /* flex: 1; 可変リセット */
}

.support_column_group {
  flex-direction: column;
}

.support_column {
  -webkit-flex: auto;   /* flex: 1; 可変リセット */
  flex: auto;           /* flex: 1; 可変リセット */
}
.support_column p{
  font-size: 14px;
}

.support_btn_box{
  width: 100%;
}

.support_btn_box .btn_pc {
  margin: 0 auto;
}

.qr_code{
  display: none;
}


/* ------------------------------------------------------------------
contact_bottom
-------------------------------------------------------------------*/

#contact_title_area h2{
  display:inline-block; border-bottom: solid 3px #b2d740; /* タイトル下線 */
  padding: 0 0 3px 0;
  font-size: 20px;
}

.footer_box{
  width:100%;
}

.contact_bottom-inner{
  box-sizing: border-box;
  padding: 0 10px 0 10px;
  width: 100%;
}

.contact_bottom-inner p{
  text-align: left;
}

.qr_code_fooer{
  display: none;
}

.electrodream_box{
  padding: 40px 0 0 0;
  flex-direction: column;　/* 縦並び（ラベル + 見出し）*/
}

.footer_navi{
  background-color: #FFF;
  width: 100%;
}


.footer_navi ul{
  display:-webkit-box;
  display:flex;
  flex-direction: column;
  padding: 10px 0 10px 0;              
} 

.footer_navi li{
  font-size: 15px;
  text-align: center;
  padding: 0 0 30px 0;
}

.logo_electrodream_kotei img{
  padding: 0 0 0 0;
}

.bottom_box {

  background-color: #f1f1f1;
  /* 左右均等分布 */
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  flex-direction: column;
}


/* ------------------------------------------------------------------
g copylight
-------------------------------------------------------------------*/

.sns_box{
  padding: 30px 0 0 0;
  margin: 0 auto;
}

.sns_head{  /* 上部SNSボタン */
  display: none;
}

.sns_foot{
  padding: 0 0 0 0; /*リセット*/
  text-align: center;
}

.copylight{
   padding: 0 0 30px 0; 
  text-align: center;
}

.copylight span{
  font-size: 12px;
  color: #999;
}

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

.kotei_footer {
  width:100%;
}






}