@charset "UTF-8";


/*
* “こころ明朝体” licensed under the IPA Font License Agreement v1.0
* http://typingart.net/（”こころ明朝体”配布元のURL）
* http://ipafont.ipa.go.jp/（IPAフォントのURL）
* http://ipafont.ipa.go.jp/ipa_font_license_v1.html（IPAフォントライセンスv1.0のURL）
*/
@font-face {
  font-family: 'Kokoro';
  src: url("../fonts/Kokoro.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/Kokoro.eot?#iefix") format("embedded-opentype"), url("../fonts/Kokoro.woff") format("woff"), url("../fonts/Kokoro.ttf") format("truetype"), url("../fonts/Kokoro.svg#5c7c12f7b48e02a97914f98091878673") format("svg");
  /* Legacy iOS */
  font-style: normal;
  font-weight: 400;
}
h2,h1{
  font-family: "Kokoro",serif;
  -webkit-text-size-adjust: 100%;
  letter-spacing: 0.1em;
  font-size: 18px;
  font-size: 1.8rem;
  color: #000;
  line-height: 1.0;
}


a:hover img {
  opacity: 0.5;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}

.t_text{
font-family: 'Droid Sans', sans-serif;

}
#top_pick a {
  color: #000;
  text-decoration: none;
  font-size: 14px;
}

/* ========================================
	google font
======================================== */
.wf-sawarabimincho { font-family: "Sawarabi Mincho"; }
.wf-kokoro { font-family: "Kokoro"; }

/* ========================================
	Common
======================================== */
.cf:before,
.cf:after {
	content: " ";
	display: table; }

.cf:after {
	clear: both; }

.cf {
	*zoom: 1; }

img {
	vertical-align: bottom;
	max-width: 100%;
	height:inherit!important;
}

strong {
	font-weight: bold; }

.for_pc {
	display: block; }

.for_sp {
	display: none; }

.block_topics h2 {
    margin-bottom: 20px;
}
.main_pc{
  display: block;
}
.main_sp{
  display: none;
}
a.over h2:hover,p.bt a:hover{
 opacity: 0.6;
    filter: alpha(opacity=60);
    -moz-opacity: 0.6;
}

.f_topics li:hover{
    opacity: 0.6;
    filter: alpha(opacity=60);
    -moz-opacity: 0.6;
}
 #top_menu a:hover, #title01:hover, #title02:hover,#title03:hover{
       opacity: 0.6;
    filter: alpha(opacity=60);
    -moz-opacity: 0.6;
}

ul.ar li:hover .description{
    opacity: 1;
    filter: alpha(opacity=1);
    -moz-opacity: 1;
}

.sp_banner{
	display: none;
}
.pc_banner{
	display: block;
}

.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
    padding-top: -100px;

}


#com,#map{
    padding-top: 30px;
}
#pagetop {
    position: fixed;
    bottom: 150px;
    right: 10px;
    z-index: 100;
}
.contact_s{
  position: fixed;
  right: 0;
  top:300px;
  z-index: 100;
}

#global .gnavi_sub {
	display: none;
	position: absolute;
	top: 15px;
	left: 0px;
	width: 190px;
	z-index: 30000;
}
.gnavi_sub li {
  position: relative;
}
.gnavi_sub li ul {
	top: -10px;
	left: 100%;
    position: absolute;
}

#global .gnavi_sub li a {
	width: 140px !important;
	line-height:  20px !important;
		display: block;
		text-align: left;
		padding: 5px 15px 5px 35px;
		text-decoration: none;
		border-bottom: dotted 1px #ccc;
		color: #000;
		background-color: rgba(255, 255, 255, 0.9);
		background-image: url(../images/gnavi_sub_arrow.png);
		background-repeat: no-repeat;
		background-position: 15px center;
}

#global .gnavi_sub li:last-child a {
		border: none;
}


/* ========================================
	f_banner
======================================== */
#f_banner ul{
  overflow: hidden;
}
#f_banner ul li{
  display: inline-block;
  vertical-align: top;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 1%;
}


/* ========================================
	pan
======================================== */
#pagetop {
    position: fixed;
    bottom: 150px;
    right: 10px;
    z-index: 100;
    text-indent: -9999px;
}
#pagetop a {
  display: block;
    width: 25px;
    height: 25px;
    text-indent: -9999px;
    background: url(../../common/images/pagetop_button.png) no-repeat;
}
/* ========================================
	mw_wp_form_input
======================================== */
.mw_wp_form_input .kakunin{
		display: none;
}

.mw_wp_form_preview .kakunin{
	display: block;
}
/* ========================================
	pan
======================================== */

#pan{
max-width: 1090px;
      margin: 20px auto;
      text-align: left;
}
#pan ul {
    overflow: hidden;
}
#pan ul li{
    float: left;
    margin-left: 10px;
}
#pan ul li a{
    text-decoration: none;
}


/* ========================================
	Layout
======================================== */
body {
	position: relative;
	text-align: center;
	-webkit-text-size-adjust: 100%;
	font-size: 15px;
	line-height: 1.8;
	color: #2c1f19;
	font-family: 'ＭＳ Ｐゴシック',Roboto,sans-serif; }

/* ========================================
	Header
======================================== */

/* ==========header============ */
header{

  background: #fff;

    z-index: 10;
    width: 100%;
		z-index: 20000;

margin: auto;


}
header .fixheader {

  width: 100%;
  top: 0px;
}
header.fixedw .fixheader {
  position: fixed;
  top: 50px;
}
header h1{
  margin: 0px auto 0px auto;
  position: fixed;
  top: 0;
  font-size: 12px;
  font-size: 1.2rem;
  background: #fff;
  z-index: 1000;
  display: block;
  text-align: center;
  width: 100%;
  padding: 10px 0 10px 0;
}
header h1 br{
  display: none;
}
header h1 img{
  padding-bottom: 7px;
  padding-right: 5px;
  /* margin-top: 5px; */
  vertical-align: middle;
  /* line-height: 120px; */
}

#hwrap{
  margin: auto;
  width: 100%;
  height: 70px;
  background: #fff;
  z-index: 5;
  border-bottom: 1px solid #ccc;
}
header #hwrap ul {
  position: relative;
  margin: auto;
  max-width: 1150px;
  height: 70px;
  /* text-align: center; */
  display: inline-block;
}

header li{
    float: right;
}
header li:first-child{
    float: left;
}
header > ul {
    max-width: 1150px;
    margin: auto;

}
header #h_logo{}
header #h_tel{
    margin-right: 5px;
}

/* ==========global============ */
header ul{

}
#h_logo {
	font-size: 21px;
	font-weight: bold;
	width: 35%;
	float: left;
	text-align: left;
  position: absolute;
  top:15px;
  left: 25px;

}
#h_logo h1 a{
  	font-size: 21px;
}
#menunav{


      margin-right: 0;
}
#menunav ul{

  height: 55px;
  line-height: 65px;
}
#menunav ul li{
		float: left;
position: relative;
}

#menunav ul li:before {
      content: "｜" ;
}
#menunav ul li:first-child:before{
        content: "" ;
}

#menunav ul li a{
  color: #000;
}


#global #menu > ul > li {
	position: relative;

}

#global #menu li a:hover, #global #menu li a.active {

    color: #ccc;
}

#menunav .sub-menu {
	display: none;
	position: absolute;
	top: 55px;
	left: 0px;
	width: 220px;
	z-index: 30000;
}
.sub-menu li {
  position: relative;
}
.sub-menu li ul {
	top: -10px;
	left: 100%;
    position: absolute;
}

#menunav .sub-menu li:before {
    content: "";
}

#menunav .sub-menu li a {
	width: 140px !important;
	line-height:  20px !important;
		display: block;
		text-align: left;
		padding: 5px 15px 5px 35px;
		text-decoration: none;
		border-bottom: dotted 1px #ccc;
		color: #000;
		background-color: rgba(255, 255, 255, 0.9);
		background-image: url(../images/gnavi_sub_arrow.png);
		background-repeat: no-repeat;
		background-position: 15px center;
}

#menunav .sub-menu li:last-child a {
		border: none;
}



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

}

#sns ul{
  padding-left: 1.5882%;
  padding-right: 1.5882%;
  margin: 50px auto 0 auto;
  overflow: hidden;
  }
#sns ul li{
  float: left;
  width: 47.8095%;
  text-align: center;
  margin-right: 1.7094%;
    }



/* ========================================
	top_pick
======================================== */
#top_pick{

  max-width: 1150px;
    margin:50px auto 0px auto;
}
#top_pick h2{
  font-size: 40px;

  margin-bottom: 20px;
}
#top_pick h3{
  font-size: 30px;

      line-height: 25px;
      margin-top: 50px;
}
#top_pick h4{


}
#top_pick p{
  margin-top: 10px;
  line-height: 25px;
}
#top_pick ul{
margin-top: 120px;
}
#top_pick li{
  position: relative;
display: inline-block;
 width: 30%;
 border: 1px solid #f39800;
 border-radius: 5px;

 padding-bottom: 20px;
}
#top_pick li.bottom{
   margin-top: 130px;
}
#top_pick .s_icon{
  position: absolute;
  top:-80px;
  left: 25%;
  right: 20%;
}

/* ========================================
	project_list
======================================== */
#index_contact {
  width: 900px;
  margin: auto;
  margin-top: 50px;
}
#index_contact h2{
  margin-bottom: 20px;
}
/* ========================================
	facebook
======================================== */
#facebook{
  width: 1020px;
  margin: auto;
  margin-top: 30px;
}
#facebook ul {
  overflow: hidden;
}
#facebook ul li{
  float: left;
  width: 50%;
}
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]{
    width: 100% !important;
}

/* ========================================
	baner
======================================== */
#baner li{
  margin-top: 20px;
}


/* ========================================
	custm_fild
======================================== */
.small_lr {
  margin-top: 50px;
}
.small_lr h1{
  font-size: 30px;

}

.small_lr header h1 {
    margin: 0px auto 0px auto;
    position: relative;
    z-index: 0;
    display: block;
    text-align: center;
    width: 100%;
    padding: 0px 0 0px 0;
}
.small_lr .center_b{
    max-width: 1190px;
    margin: 50px auto 0 auto;
    padding-left: 5.5882%;
    padding-right: 5.5882%;
}
.small_lr .center_b figure {
margin-bottom: 20px;
}
.small_lr .left_b ,.small_lr .right_b {
  max-width: 1190px;
  margin-top: 50px;
  padding-left: 5.5882%;
  padding-right: 5.5882%;
  margin: 50px auto 0 auto;
  overflow: hidden;
}
.left_b figure{
  float: left;
  width: 43.8095%;
  text-align: center;
  margin-right: 2.7094%;
}
.right_b figure{
  float: right;
  width: 43.8095%;
  text-align: center;
  margin-left: 2.7094%;
}
.spot_info{
    text-align: left;
}
.spot_info h2{
  font-size: 24px;
   margin-bottom: 15px;
  }



/* ========================================
	clum
======================================== */

#clum-2{
    max-width: 1150px;

    margin:50px auto;
    overflow: hidden;
}
#clum-2 h2{
    margin-bottom: 50px;
}
#main {
	max-width: 850px;
	margin: 0 auto;
    float: right;
    width: 80%;
    text-align: left;

}

#main h2 {
    font-size: 30px;
    color: #00698f;
    margin-bottom: 20px;
}

#side{
    width: 22.5%;
   margin-right: 10px;
    float: left;

}
#side li{
    width: 100%;


}


#side li a,#side li a.active{
  border-radius: 0.6em;
  border: solid #000 1px;
    display: block;
    color: #000;
    text-decoration: none;
    padding: 10px 20px 10px 20px;
    margin-bottom:20px;
    font-family: "ＭＳ ゴシック",sans-serif;
    text-align: left;
}
#side li a:hover,#side li a.active,#side li.current a{
    background-color: #000;
  color: #fff;
}
/* ========================================
	o_news_list
======================================== */
#o_news_list{
  width: 1000px;
  margin: auto;
}
#o_news_list h2{
font-size: 30px;
color: #00698f;
margin-bottom: 20px;
margin-top: 50px;
}
#o_news_d{
  text-align: left;
  width: 960px;
  margin: 20px auto 20px auto;
  border: solid 1px #ccc;
  padding: 20px;
}
#o_news_d h3{
  font-size: 20px;
  color: #00698f;
  border-bottom: dotted 1px #ccc;
  padding-bottom: 5px;
  margin-bottom: 10px;
}
#o_news_d .deta{
  font-size: 12px;
    margin-bottom: 10px;
}

/* ========================================
	g_map
======================================== */
#g_map{
  width: 100%;
    margin: auto;
    margin-top: 50px;
}
/* ========================================
	g_map
======================================== */
#baner{
  max-width: 1150px;
  margin: auto;
  margin-top: 50px;
}
/* ========================================
top_com
======================================== */

#top_com{

  max-width: 800px;
  margin: 50px auto 0 auto;
}
#top_com h2{
  font-size: 40px;

  margin-bottom: 0px;
  line-height: 30px;
}
#top_com dl {
  margin-top: 30px;
  margin-bottom: 0;
}
#top_com dl dt{
  display: inline-block;
      float: left;
      width: 15%;
      text-align: left;
        margin-bottom: 10px;
}
#top_com dl dd{
  width: 85%;
  text-align: left;
  display: inline-block;
  margin-bottom: 10px;
}

#one_clum{
  max-width: 1150px;

  margin: 50px auto 0 auto;
  overflow: hidden;

}
#one_clum h2{
  font-size: 40px;

  margin-bottom: 50px;

}
#one_clum .wrap{
  width: 70%;
  margin: auto;
  text-align: left;
}
#one_clum .wrap .tit{
  font-size: 25px;
  text-align: left;
  border-bottom: solid 1px #ccc;

}
#one_clum .wrap2{
  width: 70%;
  margin: auto;
  text-align: center;
}

.listback{
  text-align: right;
  margin-top: 10px;
  margin-bottom: 10px;
}
.listback a{
  font-size: 15px;
}
.day{
  text-align: right!important;
  margin-bottom: 30px;
}

/* ========================================
top_mess
======================================== */

#top_mess {
  max-width: 1800px;

  margin: 50px auto 0 auto;
  overflow: hidden;
}

#top_mess h2{
  font-size: 40px;

  margin-bottom: 0px;
  line-height: 40px;
}
#top_mess .subtit{
  font-size: 30px;

}
#top_mess h3{
    font-size: 30px;
}
#top_mess h4{
  margin-bottom: 20px;
  font-size: 20px;
}
.text_wrap{
  max-width: 1120px;
  width: 90%;
  margin: 20px auto 0 auto;

}
.text_wrap p{
    text-align: left;
    line-height: 25px;
  }
  .text_wrap .name{
    text-align: right;
  }
  #g_map h2 {
    font-size: 40px;

    margin-bottom: 20px;
    line-height: 30px;
}
#index_contact h2 {
  font-size: 40px;

  margin-bottom: 20px;
  line-height: 30px;
}
/* ========================================
	project_list
======================================== */
#main_img{
  max-width: 1800px;
position: relative;
	
}
.main_pc img{
  width: 100%;
}
#main_title{
      line-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}

#index_project {
  margin-top: 50px;
  width: 100%;
  margin: 50px auto 0 auto;
}
#project_list {

  margin: auto;
  overflow: hidden;
}
#index_project h2{
  font-size: 40px;
  margin-bottom: 20px;
}

#index_project .subtext{
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 30px;
}

/* プロジェクトリスト */
#project_list li { float:left; width:20.5%;  overflow:hidden; position:relative; overflow: hidden;
margin-left:3.5%;
margin-bottom: 40px;
border: solid 1px #ccc;
}
#project_list li:first-child{

}
#project_list .image { display:block; height:100%; }
#project_list img {
  display: block;
      -webkit-transition: all 0.35s ease-in-out;
      -moz-transition: all 0.35s ease-in-out;
      /* transition: all 0.35s ease-in-out; */
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      /* width: 400px; */
      width: 100%;

      min-width: 100%;
      /* height: 300px; */
      /* left: -50%; */
      /* position: absolute; */
      top: 0%;
      left: 0%;
      width: 100%;
      max-width: none;
      height: initial!important;
      /* -webkit-transform: translate(-50%,-50%); */
      -ms-transform: translate(-50%,-50%);
      /* transform: translate(-50%,-50%); */
      overflow: hidden;
}
#project_list li:hover img {
  top: 0%;
  left: 0%;


-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
 -ms-transform: scale(1.2);
 -o-transform: scale(1.2);
 transform: scale(1.2);
}
#project_list .image:before {
  width: 100%;
  height: initial;
  display:block;
  content:'';
  background:rgba(0,0,0,0.5);
   position:absolute;
   z-index:2;
  opacity:0; -webkit-transition: opacity 0.6s;
  transition: opacity 0.6s;
}
#project_list li:hover .image:before { opacity:1; }
#project_list .title {
  display:block; padding:15px 20px 10px; color:#333; background:#fff; width:100%;  line-height:180%; font-size:13px; text-decoration:none; position:absolute; z-index:3;
  -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;
  -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0);
  -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s;
}
#project_list li:hover .title {
  -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0);
}
#project_list .title span { display:block; font-size:12px; }
#project_list .title span.project_title { margin:0 0 5px 0; color:#333; font-size:14px; }



/* ========================================
	table
======================================== */


.table01    { width: 100%; }
.table01  th, .table01 td  {     padding: 10px 10px 10px 10px; border: 1px solid #ddd; vertical-align: top;}
.table01  th  {    background: #e5e5e1;}
.table01  th, .table01 td  { width: 20%; text-align: left; }
.table01 td{width: 80%;}




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

#contents {margin: 0 auto; }


/* ========================================
	pagenavi
======================================== */


.wp-pagenavi {
    margin: 1.5em 30px;
    color: #555;
    font-size: 85%;
    text-align: center;
}

.wp-pagenavi a, .wp-pagenavi span {
    padding: 0.5em 1em;
    margin: 0.25em;
    text-decoration: none;
    border: 1px solid #b52d22;
    color: #b52d22;
}

.wp-pagenavi a:hover, .wp-pagenavi span.current {
	border-color: #000;
}

.wp-pagenavi span.current {
	font-weight: bold;
background: #000;
border: 1px solid #000;
color: #fff;
border-radius: 0.5em;
}



div.wp-pagenavi {
    margin: 1.5em 0px;
    color: #555;
    font-size: 85%;
    text-align: center;
}
.wp-pagenavi a, .wp-pagenavi a:link {
    padding: 0.5em 1em;
    margin: 0.25em;
    text-decoration: none;
    border: 1px solid #000;
		border-radius: 0.5em;
    color: #000;
	    font-size: 12px;
    line-height: 20px;
}
.wp-pagenavi a:visited {
    border: 1px solid #8f9da6;
    color: #8f9da6;
}
.wp-pagenavi a:hover {
    text-decoration: underline;
    border: 1px solid #000;

		color: #fff;
		background: #000;
}
.wp-pagenavi a:active {
    border: 1px solid #000;
    color: #fff;
		background: #000;
}
.wp-pagenavi span.pages, .wp-pagenavi span.current, .wp-pagenavi span.extend {
    padding: 0.5em 1em;
    margin: 0.25em;

}
.wp-pagenavi span.current {
    font-weight: bold;
}
/* ========================================
	footer
======================================== */
footer {
  width: 100%;
  border-top: solid #ccc 1px;
  margin-top: 30px;
  /* background: #000; */
  color: #fff;
  background: #f39800;
}

#f_navigation {
  width: 100%;
  margin: auto;
  padding-top: 30px;
  padding-bottom: 30px;

}



#ftop{
  width: 100%;
      background: #f39800;
}

#f_logo{
text-align: center;
}
#f_logo h3{
    padding-bottom: 20px;
        padding-top: 20px;
}

#f_nav{
    width: 100%;

}
#f_nav li{
  display: inline-block;
}


#f_nav a{
  	color: #fff;
    text-decoration: none;
}

#f_nav li:before {
    content: "|";
    color: #fff;
    margin-left: 10px;
    margin-right: 10px;
}
#f_nav li:first-child:before  {
    content: "";
}

#f_nav ul{
    overflow: hidden;
}
#f_nav ul li{
	color: #fff;

}
#fbottom{
  padding-bottom: 20px;
  padding-top: 50px;
}

#fbottom ul{
  max-width: 1150px;
  margin: 0 auto 30px auto;
}
#fbottom ul li{
  text-align: left;
  display: inline-block;
  vertical-align: top;
  margin-left: 20px;
  padding-left: 50px;
}
#fbottom ul li.stay{
    background: url(../../common/images/i01.png) no-repeat;
}
#fbottom ul li.tel{
    background: url(../../common/images/i02.png) no-repeat;
}

#fbottom ul li.mail{
    background: url(../../common/images/i03.png) no-repeat;
}
#fbottom ul li h4{
  font-weight: bold;
  margin-bottom: 5px;
}
#fbottom ul li p{
  line-height: 18px;
}



.copy{
    text-align: center;

margin-top: 20px;
    font-size: 10px;
}

.list{

	list-style-type: none;

}
.list li{

	transition: .8s;
}

.list-mv02{
	opacity: 0;
}
.mv02{
	opacity: 1.0;
}


select {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    text-indent: 1em;
    background:#fff url(http://office-ryo.com/cms/wp-content/themes/awajishima_tmp/arw_select_down.png) no-repeat;
    background-size:20px 10px;
    background-position: right center;
	width:300px;
    height: 40px;
    line-height: 40px;
    font-size: 15px;
    vertical-align: middle;
    border:1px solid #CCC;
    margin-bottom:50px;


}
/* ========================================
pick01
======================================== */

.pick01{
  font-size: 220%;
  color: #004986;

}
.pick02{
  font-size: 160%;
  margin-bottom: 10px;
  display: block;
}
.pick03{
  font-size: 160%;
  margin-bottom: 20px;
  text-align: right;
}

.items .pick01,.staffs .pick01 ,.staff_top .pick01{
  margin-top: 20px;
}
.items .pick02 {
  margin-bottom: 40px;
  margin-top: 20px;
}
.items .subtext{
    margin-top: 20px;
}
.staff_top .pick01{
    margin-bottom: 20px;
}
.staff_top .pick02{
  margin-bottom: 20px;
}

/* ========================================
col
======================================== */
.col01{

}
/* ========================================
	other list
======================================== */
#othe {
  margin-top: 50px;
  max-width: 1150px;
  width: 100%;
  margin: 50px auto 0 auto;
}
#othe h2{
font-size: 40px;
color: #f39800;
margin-bottom: 20px;
line-height: 40px;
}
#item_list{
  overflow: hidden;
      text-align: left;
}
#item_list li {
  text-align: center;
      margin-bottom: 20px;
      font-variant: inherit;
      vertical-align: top;
      display: inline-block;
      width: 28%;
      margin-left: 3.8%;
}
#item_list li a{
  font-size: 120%;
  color: #000;
  display: block;
  margin-bottom: 20px;
}
#item_list li img{
  width: 100%;
  margin: auto;
}

/* ========================================
	staff list
======================================== */
#staf01_list{
overflow: hidden;

}

#staf01_1_list{
  overflow: hidden;
  margin-top: 50px;
}
#staf01_1_list p ,#staf01_list p{
  font-size: 100%;
  margin-bottom: 5px;
  text-align: left;
}
#staf01_list li {
  float: left;
  width: 26%;
  margin-bottom: 20px;
  margin-left: 5%;
}
#staf01_1_list li {
  float: left;
  width: 19%;
  margin-bottom: 20px;
  margin-left: 4.7%;
}
#staf01_1_list li a,#staf01_list li a{
  font-size: 120%;
  color: #000;
  display: block;
  margin-bottom: 20px;
}
#staf01_1_list li img,#staf01_list li img{

  margin: auto;
}
.staff_top{
  max-width: 830px;
  margin: auto;
}
#staf01_1_list .name,#staf01_list .name{
  text-align: center !important;

}
#staf01_1_list .name h3,#staf01_list .name h3{
  font-size: 120%;
  font-weight: 600;
  }
#staf01_1_list .name p,#staf01_list .name p{
    text-align: center !important;
}

/* ========================================
	item d
======================================== */
.item_dwrap{
  overflow: hidden;
  width: 90%;
  margin: auto;
  text-align: left;
}
.left_d{
  float: left;
  width: 30%;
}
.right_d{
  float: left;
  width: 70%;
}
.left_d dl {
  margin-bottom: 10px;
}
.left_d dl dt{
  display: inline-block;
  margin-right: 5px;
}
.left_d dl dd{
  display: inline-block;
}

/* ========================================
page
======================================== */
#othe_page  {
  margin-top: 50px;
  max-width: 1140px;
  width: 95%;
  margin: 50px auto 0 auto;
}
#othe_page  h2{
font-size: 40px;
color: #f39800;
margin-bottom: 20px;
line-height: 40px;
}

/* ========================================
vision_p
======================================== */

.vision_p{
  overflow: hidden;
  margin-bottom: 40px;
}
.v_topleft{
  float: left;
      width: 65%;
      text-align: left;
      margin-right: 4%;
}

.v_topright{
  float: right;
  width: 31%;
  text-align: right;
}
.vision_p h3{
  font-size: 23px;
  margin-bottom: 20px;
}
.v_topleft div:first-child{
    margin-bottom: 60px;
}
.v_topleft_1 div:first-child{
    margin-bottom: 60px;
}
.vision_p p{
  line-height: 30px;
}

.v_topleft_1{
  float: right;
  width: 40%;
  text-align: right;
}

.v_topright_1{
  float: left;
  width: 56%;
  text-align: left;
    margin-right: 4%;
}
/* ========================================
sug_p
======================================== */
.sug_p{
  margin-bottom: 40px;
}
.sug_con01{
  position: relative;
  overflow: hidden;
}
.sug_con01 p{
  line-height: 30px;
}
.sug_wrap{
  margin-top: 100px;
}
.sug_con01 h3{
  position: absolute;
  left:0;
  top:0;
}

.sug_topleft{
  float: left;
      width: 45%;
      text-align: left;
      margin-right: 4%;
}

.sug_topright{
  float: right;
  width: 51%;
  text-align: right;
}


.sug_con02{

  position: relative;
  overflow: hidden;
}

.sug_con02 h3{
  position: absolute;
  left:0;
  top:0;
}

.sug_con02 h4{
  font-size: 35px;
  color: #004986;
  margin-bottom: 10px;
}
.sug_con02 h4 span{
  color: #e60012;
}
.sug_con02 h5{
  font-size: 22px;

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

.sug_con02 ul{
  text-align: left;
  margin-top: 40px;
  overflow: hidden;
}

.sug_con02 li{
  float: left;
      width: 28%;
      margin-left: 8%;

}
.sug_con02 li:first-child{
    margin-left: 0;
}
.sug_con02 li p{
  margin-top: 25px;
    line-height: 30px;
}


.sug_con03{

  position: relative;
  overflow: hidden;
}
.sug_con03 h3{
  position: absolute;
  left:0;
  top:0;
}

.sug_con03 h4{
  text-align: center;
}
.sug_con03 h5{
  font-size: 22px;
}
.sug_con03 p{
  margin-top: 25px;
    line-height: 30px;
}

.sug_con03 ul{
  text-align: left;
  margin-top: 40px;
  overflow: hidden;
}

.sug_con03 li{
  float: left;
  width: 48%;
  margin-left: 4%;

}
.sug_con03 li:first-child{
    margin-left: 0;
}