@charset "UTF-8";

@media screen and (max-width: 960px) {
  .sub-menu  {
margin-left: 15px;
  }
  /* ========================================
  	Common
  ======================================== */
  .for_pc {
		display: none; }

  .for_sp {
		display: block; }
    /* ========================================
    hwrap
    ======================================== */
    #hwrap {
        position: relative;
        margin: auto;
        width: 100%;

    }
    /* ========================================
    main_pick
    ======================================== */
    #pan {
        max-width: 1150px;
        width: 90%;
        margin: 20px auto;
        text-align: left;
    }



    /* ========================================
    	2-clum
    ======================================== */
#clum-2{
  width: 95%;
}




#main {

	margin: 0 auto;
    float: none;
    width: 95%;

}

#side{
    margin-top: 20px;
max-width: 100%;
width: 100%;
    float: none;
    background: #fff;

}

    #side li {
            background: url(../../common/images/icon02.png) right no-repeat;
      border-bottom: 1px solid #ccc;
      margin-bottom: 5px;
    }
       #side li:first-child{

           border-top: 1px solid #ccc;
    }
#side li a, #side li a.active{
    margin: 0;
     background: #fff;
    color: #000;
      background:#fff url(../../common/images/icon02.png) right no-repeat;

    }


.otherBlock{

    padding: 0px 10px 10px 10px;

}
/* ========================================
	project_list
======================================== */
header h1 {
  position: relative;
    width: 100%;
    margin: 12px auto 10px auto;
}
header h1 br{
  display: inline;
}
header h1 img{
  padding-bottom: 20px;
  padding-right: 0px;

}
#main_img{
  max-width: 100%;
    min-width: 100%;
}
#top_pick {
    width: 100%;
    margin: 50px auto 0px auto;
}
#top_mess {
  max-width: 95%;

  margin: 50px auto 0 auto;
  overflow: hidden;
}
.text_wrap {
    max-width:  90%;
    margin: 20px auto 0 auto;
}
#top_com {
    max-width:  90%;
    margin: 50px auto 0 auto;
}
/* ========================================
	g_map
======================================== */
#baner{
  width: 100%;

}
    /* ========================================
    project_list
    ======================================== */

    #project_list{
      width: 100%;

    }
    #project_list li:first-child {
    margin-left: 4%;
}
    #project_list li{
      width: 44%;
      margin-left: 4%;
      /* height: 300px; */
      margin-bottom: 4%;
      height: initial;
    }
    /* ========================================
    index_contact
    ======================================== */
    #index_contact {
      width: 100%;
    margin: auto;
    margin-top: 50px;
}

#facebook {
  width: 100%;
margin: auto;
margin-top: 50px;
}

#fbottom ul {
display: none;
}

/* ========================================
h_logo
======================================== */
#h_logo {
    font-size: 20px;
    font-weight: bold;
    width: 70%;
    float: none;
    text-align: center;
    position:relative;
    top: 0;
    left: 0;
        margin: 10px auto;
}



#h_logo a{
  font-size: 18px;
}



/* ========================================
	2-clum
======================================== */

#side{
    margin-top: 20px;
max-width: 100%;
width: 100%;
    float: none;
    background: #fff;

}

    #side li {
            background: url(../../common/images/icon02.png) right no-repeat;
      border-bottom: 1px solid #ccc;
    }
       #side li:first-child{

           border-top: 1px solid #ccc;
    }
#side li a, #side li a.active{
    margin: 0;
     background: #fff;
    color: #000;
      background:#fff url(../../common/images/icon02.png) right no-repeat;

    }


.otherBlock{

    padding: 0px 10px 10px 10px;

}

  /* ========================================
  	Header
  ======================================== */
  header {
		position: relative;
		font-size: 15px; }

/* ==========header============ */
header #hwrap li{
    float: none;
    text-align: center;
}
header #hwrap li:first-child{
    float: none;
}
header ul{
    width: 95%;
    margin: auto;
    overflow: hidden;
}
header #h_logo{
    margin-bottom: 20px;
    }
header #h_tel{
    margin-right: 0px;
}

#hwrap {

    height: 0px;

}
    #sp_menu{
        width: 100%;
        background: #000;
        display: block;
        height: 40px;

    }

     #sp_menu_button {


			z-index: 1000;
			text-align: left;
			width: 100px;
			height: 40px;
         margin-bottom: 10px;
			color: #fff;
			font-weight: bold;
			line-height: 40px;
			background:transparent url(../images/menu.png) no-repeat 15px center;
			-webkit-background-size: 20px 14px;
			-moz-background-size: 20px 14px;
			-o-background-size: 20px 14px;
			-ms-background-size: 20px 14px;
			background-size: 20px 14px; }
       #sp_menu_button span {
				padding-left: 40px; }


#g_map {

    width: 95%;
}


/* ========================================
	footer
======================================== */


    #f_nav{
   display: none;
    float: none;
}
#f_tel{
    width: inherit;
    float: none;

    display: inline-block;
}
/* ========================================
o_news_list
======================================== */
#o_news_list{
  width: 90%;
  margin: auto;
}
#o_news_d{
  text-align: left;
  width: 85%;
  margin: 20px auto 20px auto;
  border: solid 1px #ccc;
  padding: 20px;
}


#othe {

    width: 95%;

}
#staf01_list li {
    float: left;
    width: 30.3%;
    margin-bottom: 20px;
    margin-left: 2%;
}
#one_clum .wrap,#one_clum .wrap2{
  width: 90%;

}

}


@media screen and (max-width: 770px) {
  .small_lr {
      margin-top: 30px;
  }
  /* ========================================
  	f_banner
  ======================================== */
  #f_banner ul{
    overflow: hidden;
  }
  #f_banner ul li{
    display: block;
    vertical-align: top;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 0%;
  }
  #main_title{
display: none;
  }

  .main_pc{
    display: none;
  }
  .main_sp{
    display: block;
  }

  .spot_info h2 {
      font-size: 12px;
      font-size: 1.2rem;
      margin-bottom: 15px;
      text-align: center!important;

    line-height: 22px;
  }

  /* ========================================
  	sns
  ======================================== */
  #sns{
    max-width: 100%;
    margin: 50px auto 0 auto;

  }

  #sns ul{
    padding-left: 1.5882%;
    padding-right: 1.5882%;
    margin: 20px auto 0 auto;
    overflow: hidden;
    }
  #sns ul li{
    float: none;
    width: 100%;
    text-align: center;
    margin-right: 0%;
    margin-bottom: 20px;
      }

  #f_logo {
    text-align: center;
    width: 50%;
    margin: auto;
}
header #h_logo {
    margin-bottom: 20px;
    width: 60%;
    margin: 20px auto 20px auto;
}
/* ========================================
	banner
======================================== */
#top_pick h2 {
    font-size: 20px;
    margin-top: 20px;
    line-height: 30px;

}
#top_pick h3 {
    font-size: 20px;
    margin-top: 48px;
    line-height: 30px;
}

#top_pick p {
    line-height: 20px;
}

#top_mess h2{
  font-size: 20px;
  margin-top: 20px;
  line-height: 30px;
}

#top_mess .subtit {
    font-size: 18px;
    color: #399252;
}
#top_mess h3{
  font-size: 20px;

}
#top_com h2{
  font-size: 20px;
  margin-top: 20px;
  line-height: 30px;
}


#othe h2 {
  font-size: 20px;
  margin-top: 20px;
  line-height: 30px;
}

.pick01 {
    font-size: 18px;

}
.pick02 {
    font-size: 18px;
}
.pick03 {
    font-size: 18px;
}
#item_list li a span,#item_list li a {
  font-size: 13px;
}


#item_list li {

  width: 44.3%;

}


#item_list li img {
    width: 90%;
    margin: auto;
}
#one_clum h2 {
    font-size: 20px;

}
#one_clum .wrap .tit {
    font-size: 18px;

}

/* ========================================
	top_pick
======================================== */

#top_pick li {
    position: relative;
    display: block;
    width: 90%;
    border: 1px solid #399252;
    margin: 100px auto;
    border-radius: 5px;
    padding-bottom: 20px;
}
#top_pick .s_icon {
    position: absolute;
    top: -70px;
    left: 20%;
    right: 20%;
}
/* ========================================
	table
======================================== */

   .table01 { margin: auto; width: 100%; }
    .table01 tr {
        display:block;
        margin-bottom: 10px;
        width: 100%;
    }
    .table01 th {
        display:block;

     padding: 10px 0px 10px 10px;

    }
    .table01 td {
             padding: 10px 10px 10px 10px;
        width: 90%;
        margin-left: 15%;
        border:none;
    }
  .table01 textarea{
    width: 100%;
  }
  .table01 th, .table01 td {
      width: auto;;
      text-align: left;
  }

  /* ========================================
  	Contents
  ======================================== */




  #contents {
		max-width: none; }

    #contents .contents_lead {
			width: auto;
			margin: 0 20px;
			padding: 25px 0 30px; }

      /* ========================================
      	item
      ======================================== */
      .left_d {
    float: none;
    width: 100%;
    margin-bottom: 20px;
}
.right_d {
    float: none;
    width: 100%;
}

/* ========================================
	vision_p
======================================== */
.vision_p h3{
  font-size: 18px;
  margin-bottom: 20px;
}

.v_topleft{
  float: none;
  width: 90%;
  text-align: left;
  margin-right: 0;
  margin: auto;
}

.v_topright{
  float: none;
  width: 90%;
  text-align: left;
    margin: 30px auto 0 auto;
}

.v_topleft_1{
  float: none;
  width: 90%;
  text-align: left;
  margin: auto;
}

.v_topright_1{
  float: none;
    width: 90%;
  text-align: left;
    margin: 30px auto 0 auto;
}

.sug_wrap {
  margin-top: 100px;
      width: 90%;
    margin: 100px auto 0 auto;
}
.sug_topleft {
    float: none;
    width: 100%;
    text-align: left;
    margin-right: 0%;
    margin: auto;
}
.sug_topright {
    float: none;
    width: 100%;
    text-align: right;
    margin: auto;
}

.sug_con02 h4 {
    font-size: 20px;

}
.sug_con02 .pick {
    font-size: 20px;
}

.sug_con02 h5 {
    font-size: 18px;
}
.sug_con03 h5 {
    font-size: 18px;
}

.sug_con02 img{
  width: 100%;
}

.sug_con02 li {
    float: none;
    width: 100%;
    margin: auto;
}
.sug_con02 li:first-child {
    margin: auto;
}
.sug_con03 li {
    float: none;
    width: 100%;
    margin-left: auto;
}

}


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



  .right_b figure,.left_b figure {
      float: none;
      width: 100%;
      text-align: center;
      margin-left: 0;
      margin-bottom: 10px;
  }


    #staf01_1_list  {
      width: 90%;
      margin: 50px auto;
    }
    #staf01_list li {
        float: left;
        width: 30.3%;
        margin-bottom: 20px;
        margin-left: 2%;
    }
#staf01_1_list  li {
    float: left;
  width: 50%;
  margin-bottom: 0;
  margin-left: 5%;
  margin: auto;
  }
#staf01_1_list  li p{
      margin: 0;
    }
  #facebook ul li {
    float: none;
    width: 90%;
    margin: auto;
}
#top_com dl dt{
  display: inline-block;
      float: none;
      width:100%;
      text-align: left;
}
#top_com dl dd{
    width:100%;
  text-align: left;
  display: inline-block;
}



}

/*# sourceMappingURL=sp_common.css.map */