@charset "UTF-8";

/* --------------------------------
 * smart phone
 * -------------------------------- */
@media (max-width: 1024px) {
  body {
    background-image: none;
  }
}
@media (max-width: 768px) {

html {
  font-size: 62.5%;
}
body {
  color: #333;
  font-size: 1.2rem;
  font-family: "Hiragino Kaku Gothic ProN",  Meiryo,  sans-serif;
}
*, *::before, *::after {
  box-sizing: border-box;
}
a:link, a:visited, a:hover, a:active {
  color: #d03c56;
  text-decoration: none;
}


/* --------------------------------
 * parts
 * -------------------------------- */
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
.heading {
  font-size: 1.6rem;
}
.hidden {
  display: none;
}


/* --------------------------------
 * header
 * -------------------------------- */
.header {
  width: 100%;
}
.header .description {
	position: absolute;
	top: 15px;
	font-size: 0.9em;
	font-weight: normal;
	color: #333;
	left: 260px;
	white-space: normal;
	overflow: hidden;
	width: 280px;
	line-height: 1.6em;
}
.logo {
	width: 250px;
	height: 100%;
	margin: 0 auto;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	position: absolute;
	background-image: url(../images/logo_enracnet1.png);
	background-repeat: no-repeat;
	background-size:contain;
	left: 0px;
	top: 0px;
}
.logo a {
  display: block;
  width: 100%;
  height: 100%;
}
.global-nav {
	text-align: left;
	position: absolute;
	white-space: normal;
	overflow: hidden;
	top: 120px;
	left: 0px;
}
.global-nav .nav-item {
	display: inline-block;
	margin-top: 0;
	margin-right: 5px;
	margin-bottom: 7px;
	margin-left: 5px;
}
.global-nav .nav-item a {
	display: inline-block;
	width: 90px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	border-radius: 6px;
	color: #666;
	font-size: 1.3rem;
	letter-spacing: 1px;
	transition: 0.15s;
	background-color: rgba(255,255,255,0.8);
}
.global-nav .nav-item.active a,
.global-nav .nav-item a:hover {
  background-color: #d03c56;
  color: #fff;
}

/*メインメニュー
---------------------------------------------------------------------------*/
/*大きな端末用(画面幅769px以上)メニューを非表示にする*/
#nav {
	display: none;
}
/*メニューブロックの設定*/
#nav-s {
	display: block;
	z-index: 10;
	position: absolute;
	left: 0px;
	top: 95px;	
	width: 99%;	/*幅。#nav-s liでmargin-leftを1%とっているのでそれを引いた数字を設定。*/
}
/*メニュー１個あたりの設定*/
#nav-s li {
	float: left;	/*左に回り込み*/
	width: 49%;		/*幅*/
	margin-left: 1%;	/*メニュー間のスペース*/
	margin-bottom: 1%;
}
#nav-s li a {
	text-decoration: none;
	display: block;
	position: relative;
	font-family: "游明朝","Yu Mincho","游明朝体","YuMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo, Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;	/*フォント指定*/
	color: #000;	/*文字色*/
	font-size: 1.6rem;	/*文字サイズ*/
	text-shadow: 0px 1px 1px #fff;	/*テキストの影。右へ、下へ、広げる幅、色。*/
	background: #fff;	/*背景色（古いブラウザ用）*/
	background: rgba(255,255,255,0.8);	/*背景色。255,255,255は白の事で、最後の0.8は透明度80%の事。*/
	padding: 10px 2% 10px 15%;	/*上、右、下、左へのメニュー内の余白*/
	border: 1px solid #fff;		/*枠線の幅、線種、色*/
	-webkit-box-shadow: 0px 10px 10px rgba(0,0,0,0.15);	/*影の設定。右・下・ぼかし幅・色(rgba)の設定。rgba値は左３つが色指定(この場合は黒)で最後の0.15は透明度15%の事。*/
	box-shadow: 0px 10px 10px rgba(0,0,0,0.15);			/*同上*/
}
/*「→」マーク*/
#nav-s li a::before {
	display: block;
	text-shadow: none;
	text-align: center;
	position: absolute;
	left: 4%;
	top: 10px;
	content: "→";	/*このテキストを表示させる。変更してもOKですが機種依存文字は使わないように。*/
	background: #1f2e4c;	/*背景色*/
	color: #fff;	/*文字色*/
	font-size: 10px;	/*文字サイズ*/
	font-family: "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", "Osaka-mono", "monospace";	/*フォント指定*/
	width: 16px;	/*幅*/
	line-height: 16px;	/*高さ*/
	border-radius: 50%;	/*角丸のサイズ*/
}
/*３本バーアイコン設定
---------------------------------------------------------------------------*/
/*３本バーブロック*/
#menubar_hdr {
	display: block;
	z-index: 20;
	position: absolute;
	border-radius: 12px;
	top: 10px;	/*上から25pxの場所に配置*/
	right: 3%;	/*右から3%の場所に配置*/
	width: 50px;	/*幅*/
	border: 2px solid #000;	/*枠線の幅、線種、色*/
	padding: 12px 10px 5px;	/*上、左右、下へのボックス内余白*/
	background: #1f2e4c;	/*背景色*/
}
/*３本のバー（1本あたり）*/
#menubar_hdr span {
	display: block;
	border-top: 3px solid #fff;	/*枠線の幅、線種、色*/
	margin-bottom: 7px;	/*バー同士の余白*/
}


/* --------------------------------
 * wrapper
 * -------------------------------- */
.wrapper {
	width: 100%;
	margin: 30px auto 40px;
}



/* --------------------------------
 * main
 * -------------------------------- */
.main {
	display: block;
	float: none;
	width: 100%;
}
.hot-topic {
  display: block;
  height: 300px;
  margin-bottom: 30px;
  box-shadow: 0 6px 4px -4px rgba(0, 0, 0, 0.15);
  transition: opacity 0.15s;
}
.hot-topic:hover {
  opacity: 0.85;
}
.hot-topic .image {
  float: left;
  width: 50%;
  height: 100%;
}
.hot-topic .content {
  position: relative;
  float: left;
  width: 50%;
  height: 100%;
  padding: 105px 25px 0;
  background-color: #2d3d54;
  line-height: 1.6;
}
.hot-topic .title {
  margin-bottom: 15px;
  color: #fff;
  font-weight: normal;
  font-size: 2.0rem;
}
.hot-topic .desc {
  color: #ddc;
}
.hot-topic .date {
  position: absolute;
  top: 60px;
  left: 0;
  width: 140px;
  padding: 4px;
  background-color: #fff;
  color: #2d3d54;
  text-align: center;
  letter-spacing: 1px;
  font-weight: bold;
  font-size: 1.1rem;
  line-height: 1;
}
.scroll-list {
  max-height: 220px;
  overflow-y: auto;
  margin-bottom: 30px;
  list-style-type: none;
}
.scroll-list .scroll-item {
  display: block;
  padding: 10px 15px;
  color: #333;
  font-size: 0;
  transition: background-color 0.1s;
}
.scroll-list .scroll-item:nth-of-type(even) {
	background-color: #FFF8E8;
	background-image: url(../images/slash01.gif);
}
.scroll-list .date {
  display: inline-block;
  width: 18%;
  min-width:90px;
  letter-spacing: 1px;
  font-weight: bold;
  font-size: 1.0rem;
  overflow: hidden;
  white-space: nowrap;
}
.scroll-list .scroll-item:hover {
  background-color: #fafaf8;
}
.scroll-list .category {
  display: inline-block;
  width: 8%;
  border-radius: 5px;
  background-color: #d03c56;
  color: #fff;
  text-align: center;
  letter-spacing: 1px;
  font-size: 1.0rem;
  line-height: 16px;
}
.scroll-list .category.news {
  background-color: #2c3c53;
}
.scroll-list .category.enrac {
	background-color: #093;
}
.scroll-list .category.blog {
	background-color: #F93;
}
.scroll-list .category.hari {
	background-color: #F6C;
}
.scroll-list .title {
  display: inline-block;
  width: 67%;
  padding-left: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.2rem;
}
.scroll-list .title a {
	padding-right: 2em;
}
.article .heading02  {
	font-size: 1.5em;
}
.article .heading03 {
	font-size: 1.5em;
}
.article .heading04 {
	font-size: 1.1em;
}
.article .heading_enrac {
	font-size: 1.5em;
}
.article .small_head  {
	font-size: 0.5em;
}
.article .catch_enrac {
}
.article .area_catch {
}
.article .text_enrac_catch {
	font-size: 1.1em;
}


/* --------------------------------
 * sidemenu
 * -------------------------------- */
.sidemenu {
	float: none;
	width: 100%;
}
.info-topic {
}
.infoh-topic:hover {
}
.info-topic .image {
}
.info-topic .content {
	display: none;
}
.info-topic .date {
}
.documents {
  margin: 10px 10px 30px;
}
.documents,
.documents ul {
  list-style-type: none;
}
.documents > li .title {
  margin: 15px 0;
  padding-left: 8px;
  border-left: 5px solid #d03c56;
  font-size: 1.4rem;
  line-height: 1.2;
}
.documents > li + li {
  margin-top: 25px;
}
.documents .smartblock {
	width: 300px;
	display: inline-block;
  }
.documents > li ul {
  margin: 15px;
}
.documents > li ul > li {
  margin-bottom: 15px;
  padding-left: 10px;
  background: url('../images/arrow.gif') no-repeat left center;
}
.documents a:hover {
  text-decoration: underline;
}
.news_area {
	position: relative;
	width: 96%;
	height: auto;
	background-color: #FDF9EE;
	border-radius: 8px;
	line-height: 1.6;
	border: 1px solid #F00;
	padding-top: 10px;
	padding-right: 5%;
	padding-bottom: 30px;
	padding-left: 5%;
	margin-top: 5px;
	margin-bottom: 10px;
	margin-left: 2%;
}
.news_area .news{
	padding-bottom: 10px;
}
.news_area .date{
	color: #FFF;
	background-color: #00C;
	width: 100%;
	display: block;
	padding-top: 1px;
	padding-bottom: 1px;
	padding-left: 10px;
	font-weight: bold;
	margin-bottom: 5px;
}
.news_area .link{
	padding-left: 10px;
	display: block;
}
.news_area .btn_list{
	background-color: #693;
	display: inline-block;
	border-radius: 5px;
	position: absolute;
	right: 5%;
	padding-top: 3px;
	padding-right: 5px;
	padding-bottom: 3px;
	padding-left: 5px;
}
.news_area .btn_list a{
}
.search-box {
	padding: 15px;
	background-color: #ccc;
	font-size: 0;
	clear: left;
}
.search-box > * {
  font-size: 1.2rem;
}
.search-box .search-input {
  width: 205px;
  height: 26px;
  padding: 0 10px;
  border: none;
}
.search-box .search-button {
  width: 40px;
  height: 26px;
  border: none;
  background-color: #d03c56;
  color: #fff;
  cursor: pointer;
}
.search-box .text {
  margin-top: 12px;
}
.bnr_area{
	padding-left: 5px;
}
.bnr_area .bnr{
	width: 32%;
	display: inline-block;
}
.bnr_area .bnr_link{
}


/* --------------------------------
 * footer
 * -------------------------------- */
.footer {
	width: 100%;
	padding: 20px 0 30px;
	background: #2d3d54 url('../images/bg-footer4.gif');
	color: #fff;
}
.horizontal-list {
	width: auto;
	text-align: left;
	font-size: 0;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
.horizontal-list .horizontal-item {
  display: inline-block;
  padding: 0 15px;
  letter-spacing: 1px;
}
.horizontal-list .horizontal-item + .horizontal-item {
  border-left: 1px solid #bbb;
	margin-top: 10px;
}
.horizontal-list .horizontal-item a {
	border-bottom: 1px dashed #777;
	color: #FFF;
	font-size: 1.1rem;
	transition: color 0.15s;
}
.horizontal-list .horizontal-item a:hover {
  color: #ddd;
}
.copyright {
  margin-top: 30px;
  text-align: center;
  letter-spacing: 1px;
}
.copyright a {
	color: #FFC;
}

.area_info1{
	background-image: url(../images/back_info2.png);
}

}
@media (max-width: 620px) {
.header .description {
	width: 45%;
	padding-right: 50px;
}
.article .text_catch {
	font-size: 1.8em;
	color: #FFF;
	letter-spacing: 0.1em;
}
}
@media (max-width: 520px) {
.header .description {
	width: 35%;
	padding-right: 50px;
	max-height:100px;
	line-height: 1.3em;
	font-size: 0.8em;
}
.article .text_catch {
	font-size: 1.5em;
	color: #FFF;
	letter-spacing: 0.1em;
}
.article .text_heading {
	font-size: 2em;
}
}

@media (max-width: 410px) {
.heading {
  font-size: 1.4rem;
}
.header .description {
	display: none;
}
.info-topic .image {
	float: left;
	width: 100%;
	height: auto;
}
.scroll-list .date {
	display: inline-block;
	width: 33%;
	letter-spacing: 1px;
	font-weight: bold;
	font-size: 0.9rem;
	overflow: hidden;
    white-space: nowrap;
}
.scroll-list .scroll-item:hover {
  background-color: #fafaf8;
}
.scroll-list .category {
   display: none;
}
.scroll-list .title {
  display: inline-block;
  width: 65%;
  padding-left: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.0rem;
}
.scroll-list .title a {
	padding-right: 1em;
}
.area_info1{
	background-image: url(../images/back_info2.png);
	padding-top: 20px;
	width: 92%;
	margin-right: 4%;
	margin-left: 4%;
}
.area_info2{
	width: 100%;
	min-height:100%;
	position: relative;
}
.area_info1 .image_info1{
	display: none;
	width: 96%;
	padding-right: 2%;
	padding-left: 2%;
}
.area_info1 .image_info2{
	display: inline-block;
	width: 86%;
	padding-right: 0%;
	padding-left: 0%;
	margin-left: 7%;
}
.area_info1 .image_info3{
	display: inline-block;
	width: 70%;
	padding-right: 0%;
	padding-left: 0%;
	padding-bottom: 3%;
	margin-left: 15%;
}
.area_info1 .image_info4{
	display: block;
	width: 100%;
	padding-right: 10%;
	padding-left: 10%;
}
.bnr_area .bnr{
	width: 48%;
	display: inline-block;
}
.article .text_catch {
	font-size: 1.4em;
	color: #FFF;
	letter-spacing: 0.1em;
}
.article .text_heading {
	font-size: 1.7em;
}
}