@charset "utf-8";

/* ****************************************************************************************************
   * トピックス／新着情報
**************************************************************************************************** */

div#visual div.list {
	max-height: 370px;
  position: relative;
  overflow: hidden;
}

div#visual div.list div.item {
  text-align: center;
}

div#visual div.list div.item a {
  height: 100%;
  margin-bottom: 2.396%;
  margin-bottom: calc( 50px / 100% * 100 );
  vertical-align: top;
  display: inline-block;
  position: relative;
}

div#visual div.list div.item a:after {
  content: '';
  width: 100%;
  padding-bottom: 4.717%;
  vertical-align: top;
  display: inline-block;
	background: url(../../images/common/bg_1.png) center bottom no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: 100%;
  left: 0;
}

div#visual div.list div.item img {
  vertical-align: top;
  display: inline-block;
}

/* ****************************************************************************************************
   * トピックス／新着情報
**************************************************************************************************** */

div#top-contents {
  margin-left: -40px;
  letter-spacing: -0.4em;
}

div#top-contents > * {
  letter-spacing: normal;
}

div#top-contents div.item {
  width: 460px;
  margin-left: 40px;
  margin-bottom: 40px;
  vertical-align: top;
  display: inline-block;
}

/* * ブレイクポイント ･････････････････ */

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

  div#top-contents {
    margin-left: 0;
    text-align: center;
  }
  
  div#top-contents div.item {
    margin-left: 0;
    margin-bottom: 20px;
    text-align: left;
  }

}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   * 共用
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

/* ----------------------------------------------------------------------------------------------------
   * タイトル
/* ------------------------------------------------------------------------------------------------- */

div#top-contents div.item .title {
  margin-bottom: 20px;
}

/* * ブレイクポイント ･････････････････ */

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

  div#top-contents div.item .title {
    margin-bottom: 10px;
  }

}

/* ----------------------------------------------------------------------------------------------------
   * フレーム
/* ------------------------------------------------------------------------------------------------- */

div#top-contents div.item div.frame_2 {
  height: 412px;
  padding: 20px;
  overflow-y: auto;
}

/* * ブレイクポイント ･････････････････ */

@media screen and (max-width:736px) {
  
  div#top-contents div.item div.frame_2 {
    padding: 10px;
  }
  
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   * トピックス
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

/* ----------------------------------------------------------------------------------------------------
   * タグクラウド
/* ------------------------------------------------------------------------------------------------- */

div#topics ul.tag_list {
	margin: 0;
	padding: 0;
	list-style: none;
}

div#topics ul.tag_list li {
	margin: 0;
	padding: 0;
	padding: 0 0.25em;
	display: inline;
	color: #176a96;
	font-weight: bold;
	line-height: 1.8;
}

div#topics ul.tag_list li a {
	color: #176a96;
}

div#topics ul.tag_list li a:hover {
	color: #f60;
}

div#topics div.contact {
	padding: 1em 0 0;
	text-align: right;
}

div#topics div.contact a {
	color: #176a96;
}

div#topics div.contact a:hover {
	color: #f60;
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   * 新着情報
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

div#news dl,
div#news dt,
div#news dd {
  padding: 0;
  margin: 0;
}

div#news dl {
  padding-bottom: 0.5em;
  letter-spacing: -0.4em;
}

div#news dl > * {
  letter-spacing: normal;
}

div#news dl ~ dl {
  border-top: 1px dotted #aaa;
  padding-top: 0.5em;
}

div#news dt {
  width: 20%;
  vertical-align: top;
  display: inline-block;
}

div#news dd {
  width: 80%;
  vertical-align: top;
  display: inline-block;
}

div#news .btn {
  text-align: right;
}

/* * ブレイクポイント ･････････････････ */

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

  div#news dt {
    width: 100%;
  }

  div#news dd {
    width: 100%;
  }

}

/* ****************************************************************************************************
   * ホームページ作成例／WEBシステム作成例
**************************************************************************************************** */

div#index_works_1 div.frame_2 {
	padding: 1px;
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   * 一覧
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

div#index_works_1 ul.works_list,
div#index_works_1 ul.works_list li {
  margin: 0;
  padding: 0;
  list-style: none;
}

div#index_works_1 ul.works_list {
  letter-spacing: -0.4em;
}

div#index_works_1 ul.works_list li {
	width: 25%;
  padding: 10px 5px;
  letter-spacing: normal;
  vertical-align: top;
  display: inline-block;
	text-align: center;
  box-sizing: border-box;
}

div#index_works_1 a {
  transition: all 0.3s ease-in-out 0.0s;
}

div#index_works_1 a:hover {
	opacity: 0.6;
}

/* * ブレイクポイント ･････････････････ */

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

  div#index_works_1 ul.works_list {
    text-align: center;
  }

  div#index_works_1 ul.works_list li {
    min-width: 145px;
  }

}

/* ****************************************************************************************************
   * 省庁・行政主催、後援のウェブサイト作成例／WEBシステム作成例
**************************************************************************************************** */

div#index_works_2 div.frame_2 {
	padding: 1px;
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   * 一覧
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

div#index_works_2 ul.works_list,
div#index_works_2 ul.works_list li {
  margin: 0;
  padding: 0;
  list-style: none;
}

div#index_works_2 ul.works_list {
  letter-spacing: -0.4em;
}

div#index_works_2 ul.works_list li {
	width: 25%;
  padding: 10px 5px;
  letter-spacing: normal;
  vertical-align: top;
  display: inline-block;
	text-align: center;
  box-sizing: border-box;
}

div#index_works_2 a {
  transition: all 0.3s ease-in-out 0.0s;
}

div#index_works_2 a:hover {
	opacity: 0.6;
}

/* * ブレイクポイント ･････････････････ */

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

  div#index_works_2 ul.works_list {
    text-align: center;
  }

  div#index_works_2 ul.works_list li {
    min-width: 145px;
  }

}

/* ****************************************************************************************************
   * お知らせ・ブログ
**************************************************************************************************** */

div#index_news div.container {
	margin: -10px;
}

div#index_news div.frame_1 {
	width: 320px;
	margin: 10px;
	vertical-align: top;
	display: inline-block;
}

/* * ブレイクポイント ･････････････････ */

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

  div#index_news div.container {
    margin: 0;
  }

  div#index_news div.frame_1 {
    width: auto;
    margin: 0;
    display: block;
  }

  div#index_news div.frame_1 ~ div.frame_1 {
    margin-top: 10px;
  }

}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   * 一覧
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

div#index_news div.article {
	padding: 5px 10px;
}

div#index_news div.article div.item ~ div.item {
	border-top: 1px dotted #aaa;
}

div#index_news div.article div.item a {
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 5px;
  text-decoration: none;
  letter-spacing: -0.4em;
  display: block;
  transition: all 0.3s ease-in-out 0.0s;
}

div#index_news div.article div.item a:hover {
  background-color: #f8f8f8;
}

div#index_news div.article div.item a > * {
  letter-spacing: normal;
}

/* ----------------------------------------------------------------------------------------------------
   * 画像
/* ------------------------------------------------------------------------------------------------- */

div#index_news div.article div.item div.image {
  width: 74px;
  vertical-align: top;
  display: inline-block;
  background-color: #fff;
}

div#index_news div.article div.item div.image img {
  width: auto;
  max-width: 100%;
  height: auto;
	padding: 1px;
	border: solid 1px #ddd;
}

/* ----------------------------------------------------------------------------------------------------
   * 内容
/* ------------------------------------------------------------------------------------------------- */

div#index_news div.article div.item div.content {
  width: 100%;
  margin-left: -74px;
  padding-left: 90px;
  vertical-align: top;
  display: inline-block;
  box-sizing: border-box;
}

div#index_news div.article div.item div.content .date {
  margin-bottom: 0.5em;
  padding: 0;
  color: #555;
}





/*
div#index_news dl,
div#index_news dl dt,
div#index_news dl dd {
	margin: 0;
	padding: 0;
}

div#index_news dl {
	height: 72px;
	padding: 15px 0;
	overflow: hidden;
}

div#index_news dl ~ dl {
	border-top: dotted 1px #aaa;
}

div#index_news dl dt {
	margin-left: 70px;
	margin-bottom: -1.5em;
	padding-left: 19px;
	position: relative;
	z-index: 10;
} .ie7 div#index_news dl dt { margin-bottom:-2em; }

div#index_news dl dd {
	margin-top: 0.5em;
	vertical-align: top;
	display: table-cell;
} .ie7 div#index_news dl dd { display:inline; zoom:1; }

div#index_news dl dd ~ dd {
	width: 100%;
	padding: 2em 1em 0 15px;
} .ie7 div#index_news dl dd ~ dd { width:65%; }

div#index_news dl dd.img {
	width: 74px;
}

div#index_news dl dd.img img {
	width: 70px;
	height: auto;
	padding: 1px;
	border: solid 1px #ddd;
	vertical-align: bottom;
}

div#index_news p.none-post {
	line-height: 150px;
	text-align: center;
}
*/

/* ****************************************************************************************************
   * PR
**************************************************************************************************** */

div#index_pr div.frame_2 {
	padding: 10px;
}