@charset "UTF-8";
/* Scss Document */
body {
  color: #3A3A3A;
  position: relative;
  font-family: "ＭＳ Ｐゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka,;
}
a {
  color: #3A3A3A;
}
a:link {
  color: #3A3A3A;
  text-decoration: none;
}
a:hover {
  color: #3A3A3A;
  text-decoration: none;
}
 a:visted {
 color: #3A3A3A;
 text-decoration: none;
}
/*sass 変数
-----------------------------------------*/
/*header
-----------------------------------------*/
#head-box {
  position: relative;
  width: 960px;
  margin: 0 auto;
  height: 102px;
}
#header-h1 {
  float: left;
  text-align: left;
  padding: 6px 0 0 0;
  font-weight: normal;
  color: #484848;
  font-size: 85%;
}
.header-logo {
  position: absolute;
  top: 39px;
  left: 0px;
}
#head-navi {
  background: url(../img/common/head_navi_bg.gif) no-repeat;
  width: 256px;
  height: 12px;
  position: absolute;
  top: 15px;
  right: 0;
}
#head-navi li {
  float: left;
  padding: 0 1px 0 0;
}
#head-navi li:last-child {
  padding: 0;
}
#head-contact {
  position: absolute;
  top: 63px;
  right: 315px;
}
#head-contact li {
  float: left;
}
#head-contact li:first-child {
  padding: 0 6px 0 0;
}
#head-tel {
  position: absolute;
  right: 120px;
  bottom: 15px;
}
.header-logo2 {
  position: absolute;
  right: 0;
  bottom: 8px;
}
/* グローバルナビ
-----------------------------------------*/
#navi {
  background: url(../img/common/navi_bg.jpg) repeat-x;
  width: 100%;
  height: 35px;
  padding: 4px 0 0 0;
}
#navi ul {
  width: 960px;
  background: url(../img/common/navi_bg.gif) no-repeat center 2px;
  height: 29px;
  margin: 0 auto;
  padding: 2px 0 0 0;
}
#navi li {
  float: left;
  padding: 0 0 0 1px;
}
/* サイドメニュー
-----------------------------------------*/
#side {
  overflow: hidden;
  width: 225px;
  overflow: hidden;
  float: left;
}
#side ul {
  margin: 0 0 25px 0;
}
#side ul li {
  margin: 0 0 12px 0;
}
#side ul li:nth-child(1) {
  position: relative;
}
.document-text {
  position: absolute;
  bottom: 18px;
  left: 10px;
  padding: 0 10px 0 0;
  line-height: 1.2;
}
/*layout
-----------------------------------------*/
#main {
  width: 960px;
  margin: 0 auto 35px auto;
  overflow: hidden;
  clear: both;
}
#contents {
  width: 712px;
  float: right;
  overflow: hidden;
}
/*footer
-----------------------------------------*/
#footer-outer {
  width: 100%;
  overflow: hidden;
  /*height: 646px;*/
  margin: 0 auto;
  background: url(../img/common/footer_bg.jpg) repeat-x #f9faf9;
  position: relative;
  z-index: 1;
}
#footer {
  width: 960px;
  overflow: hidden;
  height: auto;
  margin: 0 auto;
}
.footer-link01 {
  width: 960px;
  overflow: hidden;
}
.footer-link01 ul {
  overflow: hidden;
  padding: 0 0 0 10px;
}
.footer-link01 li {
  float: left;
  width: 168px;
  background: url(../img/common/footer_icon.gif) 0 6px no-repeat;
  padding: 0 10px 8px 12px;
  font-size: 93%;
  line-height: 1.5;
}
.footer-link02 {
  width: 960px;
  overflow: hidden;
}
.footer-link02 ul {
  width: 180px;
  overflow: hidden;
  float: left;
  padding: 0 0 0 10px;
}
.footer-link02 li {
  width: 168px;
  background: url(../img/common/footer_icon.gif) 0 6px no-repeat;
  padding: 0 0 8px 12px;
  font-size: 93%;
  line-height: 1.5;
}
.footer-link01 ul li a, .footer-link02 ul li a {
  color: #3A3A3A;
  text-decoration: none;
}
.footer-link01 ul li a:hover, .footer-link02 ul li a:hover {
  color: #009f42;
  text-decoration: none;
  -webkit-transition: 0.8s;
  -moz-transition: 0.8s;
  -o-transition: 0.8s;
  -ms-transition: 0.8s;
  transition: 0.8s;
}
.footer-bottom {
  overflow: hidden;
  height: auto;
  border-top: 1px solid #E7E7E7;
  width: 960px;
  margin: 25px auto 0 auto;
}
.footer-contact {
  float: right;
  padding: 14px 12px 0 0;
  background: url(../img/common/footer_contact_box.gif) no-repeat;
  width: 586px;
  height: 71px;
  margin: 30px 0 0 0;
}
.footer-contact li {
  float: left;
}
.footer-contact li:nth-child(1) {
  padding: 20px 27px 0 8px;
}
.footer-contact li:nth-child(2) {
  padding: 5px 18px 0 0;
}
.footer-contact li:nth-child(3) {
  padding: 5px 0 0 0;
}
.footer-text {
  float: left;
  width: 328px;
}
.footer-text p {
  text-align: left;
  line-height: 2;
  font-size: 93%;
  padding: 40px 0 0 11px;
}
.footer-address {
  overflow: hidden;
  margin: 20px 0 0 0;
}
.footer-address li {
  float: left;
  font-size: 93%;
  line-height: 1.5;
}
.footer-address li:nth-child(1) {
  padding: 0 0 0 40px;
}
.footer-address li:nth-child(2) {
  padding: 8px 35px 0 35px;
}
.footer-address li:nth-child(3) {
  padding: 8px 0 0 0;
}
.footer-copyright {
  margin: 15px auto 10px auto;
  width: 100%;
  text-align: center;
  color: #3A3A3A;
}
.footer_iso {
  margin-top: 13px;
  padding-left: 41px;
}
/*scrollup
-----------------------------------------*/
#scrollUp {
  bottom: 20px;
  right: 30px;
  height: 63px;
  /* Height of image */
  width: 72px;
  background-image: url(../img/top.png);
  background-repeat: no-repeat;
}
#scrollUp:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha( opacity=70 )";
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
}
/*breadcrumb
-----------------------------------------*/
#breadcrumb {
  margin: 5px 0 0 0;
  text-align: left;
  font-size: 85%;
}
#breadcrumb a {
  color: #414141;
  text-decoration: none;
}
#breadcrumb a:link {
  color: #414141;
}
#breadcrumb a:hover {
  color: #067ABB;
  text-decoration: none;
  -webkit-transition: 0.8s;
  -moz-transition: 0.8s;
  -o-transition: 0.8s;
  -ms-transition: 0.8s;
  transition: 0.8s;
}
/*subpage title
-----------------------------------------*/
#sub-main-outer {
  width: 100%;
  margin: 0 auto 65px auto;
}
#sub-main {
  width: 960px;
  margin: 0 auto 35px auto;
  overflow: hidden;
}
#title-box {
  width: 100%;
  margin: 0 auto;
  border-bottom: 1px solid #0c9344;
  height: 63px;
}

@media screen and (max-width:767px) {
.p_results #title-box, .p_r_detail #title-box, .product_suggestion #title-box, .partners #title-box, .structural_material #title-box, .specification #title-box, .system #title-box, .town_research #title-box,.planning_map #title-box,.taishin #title-box,.event_list #title-box,.event_detail #title-box,.results #title-box,.voice #title-box,.voice_detail #title-box {
  margin: 80px auto 0;
  height: auto;
}
}
.title-box-inner {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}
.page-title {
  background: url(../img/common/title_icon.png) no-repeat;
  text-align: left;
  padding: 0 0 0 25px;
  font-size: 139%;
  height: 25px;
  margin: 27px 0 0 0;
  float: left;
}
.page-title img {
  margin: -2px 0 0 0;
}
/*  page nation  */
.page-nation {
  width: 960px;
  margin: 0 auto;
}
.page-nation ul {
  float: right;
}
.page-nation li {
  border: 1px solid #26ad5e;
  font-size: 93%;
  color: #26ad5e;
  float: left;
  margin: 0 0 0 3px;
  padding: 6px 8px;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  outline: none;
  position: relative;
  z-index: 2;
  background-color: #fff;
  overflow: hidden;
}
.page-nation li.active {
  border: 1px solid #26ad5e;
  color: #FFF;
  background: #26ad5e;
}
.page-nation li.active:hover {
  cursor: default;
}
.page-nation li::before, .page-nation li::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.page-nation li, .page-nation li::before, .page-nation li::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.page-nation li:hover {
  color: #fff;
  cursor: pointer;
}
.page-nation li::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
}
.page-nation li:hover::after {
  background: #26ad5e;
  -webkit-transform: scale(1);
  transform: scale(1);
}
.inquiry-img {
  display: inline-block;
  cursor: pointer;
  width: 175px;
  height: 43px;
  text-align: center;
  position: relative;
  background: #FFFFFF;
  z-index: 1;
}
.nav-inquiry01:after, .nav-inquiry02:after, .nav-inquiry03:after, .nav-inquiry04:after {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  content: '';
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  top: 0px;
  left: 0px;
  padding: 0px;
  z-index: -1;
  -webkit-transition: -webkit-transform 0.2s, opacity 0.3s;
  -moz-transition: -moz-transform 0.2s, opacity 0.3s;
  transition: transform 0.2s, opacity 0.3s;
}
.nav-inquiry01:after {
  background: url(../img/common/inquiry-btn01_.png) no-repeat center top;
}
.nav-inquiry02:after {
  background: url(../img/common/inquiry-btn02_.png) no-repeat center top;
}
.nav-inquiry03:after {
  background: url(../img/common/inquiry-btn03_.png) no-repeat center top;
}
.nav-inquiry04:after {
  background: url(../img/common/inquiry-btn04_.png) no-repeat center top;
}
.nav-inquiry01:before, .nav-inquiry02:before, .nav-inquiry03:before, .nav-inquiry04:before {
  display: block;
  -webkit-font-smoothing: antialiased;
}
.nav-inquiry01:hover img, .nav-inquiry02:hover img, .nav-inquiry03:hover img, .nav-inquiry04:hover img {
  -webkit-transition: 0.3s;
  -mos-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
  opacity: 0;
}
/* Effect 3b */
.nav-inquiry01:after, .nav-inquiry02:after, .nav-inquiry03:after, .nav-inquiry04:after {
  -webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);
  -ms-transform: scale(1.3);
  transform: scale(1.3);
  opacity: 0;
}
.nav-inquiry01:hover:after, .nav-inquiry02:hover:after, .nav-inquiry03:hover:after, .nav-inquiry04:hover:after {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}
.bottom-navi-box {
  width: 835px;
  margin: 0 auto;
  padding: 0 0 0 125px;
}
.bottom-navi-box01 {
  width: 712px;
  margin: 0 auto;
  padding: 0 0 0 248px;
}
.bottom-navi {
  width: 712px;
  height: 60px;
  position: absolute;
  border: 1px solid #B3B3B3;
  z-index: 9999;
  background: rgba(255,255,255,0.5);
  margin: 0 0 10px 0;
}
.bottom-navi ul {
  margin: 0 0 0 0;
}
.bottom-navi li {
  float: left;
  display: block;
  padding: 8px 0 0 45px;
}
.middle_link_box {
  width: 100%;
  padding: 30px 30px 0;
  display: inline-block;
}
.middle_link_box * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.middle_link_box .link_button {
  float: left;
  width: 30%;
  margin: 30px 1%;
  text-align: center;
  border: 1px solid #8a8787;
}
.middle_link_box .link_button p {
  line-height: 3;
}
.middle_link_box .link_button :hover {
  background-color: #53B232;
  color: #fff;
}

@media screen and (max-width: 767px) {
.middle_link_box .link_button {
  width: 95%;
  margin: 5px 15px;
}
}
/*==========================================
flex共通
===========================================*/
.flex01 {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: stretch;
  align-items: stretch;
}
.flex02 {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: stretch;
  align-items: stretch;
}
/*==========================================
中ページ　新見出し
===========================================*/
.header_ttl_area {
  width: 100%;
  background: #0ca583;
  border-top: 1px solid #0ca583;
  border-bottom: 1px solid #0ca583;
}
.header_ttl_inner {
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: 100%;
}
.header_ttl_inner:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -100;
  max-width: 960px;
  display: inline-block;
  margin: 0 auto;
  right: -420px;
}

@media screen and (max-width:767px) {
.header_ttl_inner:before {
  right: -60%;
}
}
/*==================
見出し画像切り替え
===================*/
.p_results .header_ttl_inner:before {
  background: url(../img/planning_results02/p_r_detail_img01.jpg) no-repeat top center;
}
.partners .header_ttl_inner:before {
  background: url(../img/partners/partners_img01.jpg) no-repeat top center;
}
.product_suggestion .header_ttl_inner:before {
  background: url(../img/product_suggestion/product_suggestion01.jpg) no-repeat top center;
}
.structural_material .header_ttl_inner:before {
  background: url(../img/structural_material/structural_material01.jpg) no-repeat top center;
}
.results .header_ttl_inner:before {
  background: url(../img/results/results_img01.jpg) no-repeat top center;
}
.planning_map .header_ttl_inner:before {
  background: url(../img/planning_map/planning_img01.jpg) no-repeat top center;
}
.event_list .header_ttl_inner:before {
  background: url(../img/event/event_img01.jpg) no-repeat top center;
}
.system .header_ttl_inner:before {
  background: url(../img/system/system01.jpg) no-repeat top center;
}
.voice .header_ttl_inner:before {
  background: url(../img/voice/voice_img01.jpg) no-repeat top center;
}
.taishin .header_ttl_inner:before {
  background: url(../img/taishin/taishin_img01.jpg) no-repeat top center;
}
.specification .header_ttl_inner:before {
  background: url(../img/specification/specification.jpg) no-repeat top center;
}
.town_research .header_ttl_inner:before {
  background: url(../img/research/research01.jpg) no-repeat top center;
}
/*ここまで*/
.header_ttl {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  height: 300px;
}

@media screen and (max-width:640px) {
.header_ttl {
  height: 200px;
}
}
.ttl_wrap {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  background: rgba(12,165,131,0.4);
  max-width: 350px;
  margin: 0 2%;
  font-size: 32px;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  color: #fff;
  letter-spacing: 21px;
  line-height: 1.8;
  display: block;
  padding: 16px 2%;
  width: 100%;
}
.ttl_blc01 {
  display: block;
}
.ttl_blc02 {
  font-size: 24px;
  vertical-align: bottom;
}
.ttl_blc03 {
  display: block;
  text-align: right;
}
/*==========================================
中ページ　コンテンツナビゲーション
===========================================*/
.content_nav_area {
  background: url(../img/common/content_nav_bg01.jpg) top center;
  margin-bottom: 50px;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
}

@media screen and (max-width:480px) {
.content_nav_area {
  margin-bottom: 20px;
}
}
.content_nav_inner {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  padding: 12px 0;
}
.content_nav_ttl {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 12px;
  letter-spacing: 3px;
}
.content_nav_ul {
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

@media screen and (max-width:960px) {
.content_nav_ul {
  padding: 0 1%;
}
}
.content_nav_li {
  -webkit-flex-basis: 15.6666%;
  flex-basis: 15.6666%;
  margin: 0 0.5% 8px;
}

@media screen and (max-width:960px) {
.content_nav_li {
  -webkit-flex-basis: 24%;
  flex-basis: 24%;
}
}

@media screen and (max-width:767px) {
.content_nav_li {
  -webkit-flex-basis: 32.3333%;
  flex-basis: 32.3333%;
}
}

@media screen and (max-width:480px) {
.content_nav_li {
  -webkit-flex-basis: 49%;
  flex-basis: 49%;
}
}
.content_nav_li a {
  font-size: 13px;
  letter-spacing: -0.2px;
  background: #fff;
  display: inline-block;
  width: 100%;
  padding: 12px 2%;
  border: 1px solid #fff;
}
.content_nav_li a:hover {
  background: #0ca583;
  color: #fff;
  border: 1px solid #0ca583;
}
.content_nav_li.current a {
  background: #0ca583;
  color: #fff;
  border: 1px solid #0ca583;
}
.content_nav_li i {
  color: #0b9243;
}
.content_nav_li.current i {
  color: #fff;
}
.content_nav_li a:hover i {
  color: #fff;
}
/*ボタンエフェクト*/
.button {
  position: relative;
  display: inline-block;
  text-decoration: none;
  outline: none;
  transition: all .2s;
}
.button::before, .button::after {
  position: absolute;
  z-index: 2;
/*
  content: '';
*/
  width: 0;
  height: 0;
  border: 2px solid transparent;
}
.button::before {
  top: -2px;
  left: -2px;
}
.button::after {
  bottom: -2px;
  right: -2px;
}
.button:hover {
  color: #fff;
}
.button:hover::before, .button:hover::after {
  width: 100%;
  height: 100%;
}
.button:hover::before {
  border-bottom-color: #fff;
  border-left-color: #fff;
  transition: height .3s, width .3s .3s;
}
.button:hover::after {
  border-top-color: #fff;
  border-right-color: #fff;
  transition: height .3s, width .3s .3s;
}

/*ボタンエフェクト↑*/
/* page navigation↓ */
@media screen and (max-width:480px) {
.nav_label {
  background: rgba(12,165,131,0.8);
  color: #fff;
  padding: 10px;
  display: block;
  margin: 0;
  border: 1px solid #fff;
}
.nav_label {
  max-width: 70%;
  margin: 0 auto 1em;
  text-align: center;
}
.nav_label i {
  background: #fff;
  color: rgba(12,165,131,0.8);
  border-radius: 6px 0px;
  padding: 2px;
  margin-left: 1em;
}
.nav_input[type="checkbox"].on-off {
  display: none;
}
.nav_input[type="checkbox"].on-off:checked {
  transform: rotate(180deg);
}
.content_nav_ul {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav_input[type="checkbox"].on-off + ul {
  height: 0;
  overflow: hidden;
}
.nav_input[type="checkbox"].on-off:checked + ul {
  height: 280px;
}
}
/* page navigation↑*/
/*======================
動的ページ　もっと見る
===================*/
.page_nation {
  margin-bottom: 160px;
  text-align: center;
}
.page_nation a {
  display: inline-block;
  font-size: 18px;
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  color: #59a997;
  padding: 0 2%;
}

@media screen and (max-width:480px) {
.page_nation a {
  font-size: 16px;
}
}
.page_nation a:hover {
  color: #fff;
}
.page_nation a:hover .page_nation_inner {
  background: #59a997;
}
.page_nation_inner {
  display: inline-block;
  width: 100%;
  border: 2px solid #59a997;
  padding: 10px 2%;
  font-weight: bold;
  letter-spacing: 0.2em;
}
.page_nation_inner i {
  vertical-align: text-top;
  display: inline-block;
  margin-right: 0.5em;
}