@charset "utf-8";
/****************************************
 肝炎情報センター top.css
*****************************************/
.header h1.title{margin-bottom: 0;padding-bottom: 5px;}

/*-----------------
  IMAGE MAIN
-----------------*/
.image-main { margin-bottom: 2em}
.image-main .wrap { width: 100%; max-width: 1024px; min-width: inherit; margin: 0 auto; padding-top: 1.5em;}
.image-main .box-main-image { float: right;}

/*-----------------
  CONTENTS
-----------------*/
.contents { background-color: #ffffff;}
.contents .article .article-left { width: 740px; float: left;}

/* Emergency */
.article .emabox{margin:1em auto .5em;padding: 1em;border:1.5px solid #f00;}

/* MAIN IMAGE - BxSlider */
.image-main { margin-bottom: 1.5em; padding-bottom: 0; position: relative;}
.image-main .bx-wrapper { position: relative; padding-bottom: 0;}
.image-main .bx-wrapper div { padding-bottom: 0;}
.image-main .bx-wrapper .slide { position: relative; margin: 0px; overflow: hidden; z-index: 100;}
.image-main .bx-wrapper .slide img{width:100%;height:auto;}
.image-main .topimage:after,
.image-main .bx-wrapper .bx-controls .bx-pager { background: url(../img/mask_subtop.png) top left repeat-y; background-size: contain; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; /* box-shadow: 0px 0px 0px 1px #CCCCCC inset; */ z-index: 99;}
.image-main .bx-wrapper .bx-controls .bx-pager > div { display: none;}
.image-main .bx-wrapper .bx-controls .bx-controls-direction { width:100%; overflow: visible;}
.image-main .bx-controls-direction a{ display: block; position: absolute; top: 15%; bottom: 15%; width: 38px; background: no-repeat center; text-indent:-1000em; z-index:100; transition: 0.15s;}
.image-main .bx-controls-direction a.bx-prev{ left: 0px; background-image: url(../img/bx-prev.png); background-position: -38px center; opacity: 0;}
.image-main .bx-controls-direction a.bx-next{ right: 0px; background-image: url(../img/bx-next.png); background-position: 38px center; opacity: 0;}
.image-main:hover .bx-wrapper .bx-controls-direction a.bx-prev { background-position: center center; opacity:1;}
.image-main:hover .bx-wrapper .bx-controls-direction a.bx-next { background-position: center center; opacity:1;}
.image-main .bx-controls-direction a.bx-prev:hover { background-image: url(../img/bx-prev_active.png);}
.image-main .bx-controls-direction a.bx-next:hover { background-image: url(../img/bx-next_active.png);}
.image-main .bx-viewport{z-index:1;}

.image-main .box-main-image { width:100%; height:auto; overflow: hidden;}
.image-main .box-main-image .bx-wrapper .bx-controls .bx-pager { background-image: none;}
.image-main .box-main-image .bx-wrapper .bx-viewport .bxslider { overflow: visible;}
.image-main .bx-wrapper .bx-controls .bx-pager { height: 0%;}

/* TOP SECTION */
.wrap:after{clear:both;content:"";display:block;}
.wrap.menu .section{border-radius:8px;margin:0 0 2em;padding:0 0 1em;width:48%;clear:none;}
.wrap.menu .section.user{float:left;margin-right:1.5%;background:#005FB6;}
.wrap.menu .section.category{float:right;margin-left:1.5%;background:#4693D0;}

.wrap.menu .section h2{background: none no-repeat center center;width:92%;height: 45px;margin:1em auto 0em;padding:0;text-indent: -100em;}
.wrap.menu .section.user h2{background-image: url(../img/nav_user.png);background-color: #4592CF;}
.wrap.menu .section.category h2{background-image: url(../img/nav_category.png);background-color: #005EB5;}

.wrap.menu .section.user ul li:nt-child(2n),
.wrap.menu .section.category ul li:nth-child(2n+1){clear: left;}
.wrap.menu .section.user ul li:first-child{width:92%;}

.wrap.menu .section ul { overflow: visible;}
.wrap.menu .section ul li{float:left;/*display: table*/;width: 42%;margin:1em 4% 0;padding:0; background:#fff;box-sizing: border-box;}

.wrap.menu .section ul li span { display: table; width: 100%; padding: 0.55em 0 0.4em 0 ;}
.wrap.menu .section ul li span a{ display: table-cell; height: 3.5em; padding: 0 .5em; vertical-align: middle;text-align:center;font-weight:bold;}

/* NEWS */
.article .box-news { width: 70%; float: left; position: relative; overflow: visible;}
.box-news .tabmenu { overflow: visible;}
.box-news .tabmenu #tab2 , .box-news .tabmenu #tab3 , .box-news .tabmenu #tab4 { display: none;}
.box-news .tabmenu ul.menu { width: 100%; margin: 0; padding: 0; list-style: none; position: absolute; top: 0px; left: 0px; z-index: 100;}
.box-news .tabmenu ul.menu li {
	display: table; float: left; width: 28%; height: 45px; margin-right: 1%; overflow: hidden; position: relative;
	background: url(../img/top_tab_center.png) left top repeat-x;
}
.box-news .tabmenu ul.menu li:before,
.box-news .tabmenu ul.menu li:after { display: block; content: ""; position: absolute; top: 0px; bottom: 0px; width: 18px;}
.box-news .tabmenu ul.menu li:before { left: 0px; background-image: url(../img/top_tab_left.png);}
.box-news .tabmenu ul.menu li:after { right: 0px; background-image: url(../img/top_tab_right.png);}
.box-news .tabmenu ul.menu li.active { margin-top: 1px; background: url(../img/top_tab_active_center.png) left top repeat-x; border: none;}
.box-news .tabmenu ul.menu li.active:before { background-image: url(../img/top_tab_active_left.png);}
.box-news .tabmenu ul.menu li.active:after { background-image: url(../img/top_tab_active_right.png);}
.box-news .tabmenu ul.menu li:hover { margin-top: 1px;} 
.box-news .tabmenu ul.menu li a {
	display: table-cell; height: 45px; padding: 0 0 0 0.5em; position: relative;
  font-size:1.1em; font-weight: bold; color: #000000; line-height: 1.2em; vertical-align: middle; text-decoration: none; 
}
.box-news .tabmenu ul.menu li a span { display: block; padding-top: 0.2em; padding-left: 0.6em;}
.box-news .tabmenu .section { margin: 46px 0 0 0; padding: 0; border: none; border-radius: 0; overflow: visible;}
.box-news .tabmenu .section h2 { margin: 0; display: none;}
.box-news .tabmenu .section .division { position: relative; border: 1px solid #7C91D4; background-color: #ffffff; margin-top: -1px; overflow: visible;}
.box-news .tabmenu .section .division dl { margin-top: 2em;}
.box-news .tabmenu .section .division .list_link { display: table; position: absolute; top: -40px; right: -1px; margin: 0; width: 5em; height: 32px; padding: 0; z-index: 100;}
.box-news .tabmenu .section .division .list_link a { display: table-cell; width: 100%; height: 100%; margin: 0; padding: 0.2em 0 0 0; background-color: #234a8f; color: #ffffff; font-weight: bold; text-align: center; vertical-align: middle; text-decoration: none; text-indent: 0.5em; letter-spacing: 0.5em;}
.box-news .tabmenu .section .division .list_link:hover { opacity: 0.7;}

.box-news .tabmenu .section h2.active a { color: #ffffff;}

/*-----------------
  NAV
-----------------*/
.article .nav { width:30%; float: right;margin:0;padding:0;}
.article .nav ul { list-style: none; padding: 0}
.article .nav ul li { margin-bottom: 0.5em; text-align: center;}
.article .nav ul li img{max-width:100%;height:auto;}
.article .nav ul li span.text{display: table;margin: 0px auto;}
.article .nav ul li span.text a {display: table-cell;width: 210px;border: 5px solid #E4ECF1;padding: 10px 9px;height: 3.5em;color: #333;text-decoration: none;vertical-align: middle;}
.article .nav ul li span.text a:hover{opacity:0.6;}

.article .wrap.bottom .nav ul{display:block;}

.article .update p{padding: 0;margin: 0;text-align: center;font-size: .9em;}


/*******************************************
 レスポンシブ
*******************************************/
@media screen and (max-width: 1044px) {
.contents .article .article-left ,.article .box-news{ width: calc(100% - 2.5% - 250px);}

/*-----------------
  IMAGE MAIN
-----------------*/
.image-main  {}
.image-main .wrap { max-width: 768px; position: relative;}
.image-main .information { position: absolute; top: 32px; left: 40px; z-index: 100; background-color: rgba(255,255,255,0.8);}
/* MAIN IMAGE - BxSlider */
.image-main .box-main-image { width: 100%; height:auto; overflow: hidden;}
.image-main .box-main-image .bx-wrapper .bx-controls .bx-pager { background-image: none;}

}
@media screen and (max-width: 787px) {
.article .nav { width: 92%; margin-left: 4%; margin-right: 4%; float: none; clear: both;}
.wrap.menu .section{width:auto;float:none;}


/* MAIN IMAGE - BxSlider */
.image-main .box-main-image { width: 468px; padding-bottom: 0em; height:auto; overflow: hidden;}
.image-main .box-main-image .bx-wrapper .bx-controls .bx-pager { background-image: none;}

/*-----------------
  CONTENTS
-----------------*/
.article .box-news {width:auto; margin-bottom: 2em;}

.box-news .tabmenu { }
.box-news .tabmenu ul.menu { display: none;}
.box-news .tabmenu .section { margin: 0 auto;}
.box-news .tabmenu .section h2 {
	height: 45px; padding: 0; display: block; position: relative; overflow: visible;
	background: url(../img/top_tab_center.png) left top repeat-x; border-bottom: 1px solid #cccccc;
}
.box-news .tabmenu .section h2:before,
.box-news .tabmenu .section h2:after { display: block; content: ""; position: absolute; height: 100%; top: 0px; bottom: 0px; width: 18px;}
.box-news .tabmenu .section h2:before { left: 0px; background-image: url(../img/top_tab_left.png);}
.box-news .tabmenu .section h2:after { right: 0px; background-image: url(../img/top_tab_right.png);}
.box-news .tabmenu .section h2.active { background-image: url(../img/top_tab_active_center.png); border-bottom: none;}
.box-news .tabmenu .section h2.active:before { background-image: url(../img/top_tab_active_left.png);}
.box-news .tabmenu .section h2.active:after { background-image: url(../img/top_tab_active_right.png);}
.box-news .tabmenu .section h2.active + div.division { border-top: none;}
.box-news .tabmenu .section h2 a { height: 45px; width: 100%; margin: 0; padding: 0; display: table; color: #000000; text-decoration: none; position: relative; z-index: 100;}
.box-news .tabmenu .section h2 a span { margin: 0; padding: 0.2em 1em 0 2.3em; display: table-cell; vertical-align: middle;}
.box-news .tabmenu .section h2.active a { color: #333;}
.box-news .tabmenu .section .division dl { margin-top: 0em; margin-bottom: 4.5em; padding-top: 1em; padding-bottom: 0.5em;}
.box-news .tabmenu .section .division .list_link { display: block; top: auto; bottom: 1em; left: 5%; width: 90%; height: auto;}
.box-news .tabmenu .section .division .list_link a { display: block; padding-top: 0.7em; padding-bottom: 0.6em; text-align: center; letter-spacing: 1.5em; text-indent: 0.75em;}
}

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



.header{overflow: hidden;}
.image-main .box-main-image { width: 100%;}

/*-----------------
  CONTENTS
-----------------*/
/* NEWS */
.article .box-news { width: 94%; padding-left: 3%; padding-right: 3%;}
.article .news_section dl dt { padding-bottom: 0em; float: none;}
.article .news_section dl dd { padding-left: 2em;}
}