@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: #80447c;
  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: #fff;
  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: #fff;
  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: 0px 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: #000;
  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: #000;
  color: #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: #000;
  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: #fff;
}


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

}

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

  color: #fff;
}

#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: #fff;
  background-color: #2A2A29;
  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: 0px;
}

.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: 15px 0 20px 0;
  background: #80447c;
  color: #fff;
}


.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: #fff;
  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: #fff;
  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;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

#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-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: #80447c;

  color: #fff;
}

.table01 th,
.table01 td {
  width: 20%;
  text-align: left;
}

.table01 td {
  width: 80%;
}


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

  input,
  textarea,
  select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ========================================
	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: #fff;
}

.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: #fff;
  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: #fff;
  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: #fff;
  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;
}