﻿@charset "utf-8";
/***********************************
 国立国際医療研究センター top.css
 151111 
************************************/
.header h1.title{margin-bottom: 0;padding-bottom: 5px;}

/*-----------------
  IMAGE MAIN
-----------------*/
.image-main { width: auto; margin-bottom: 0;}
.image-main .wrap { width: 100%; min-width: inherit; margin: 0 auto; }
.image-main .box-main-image { margin: 0 auto;}

.image-main .box-main-image .msg{background:#fff;font-size:18px;margin:0;padding:0;position:absolute;z-index: 99;width: 96%;left:3%;bottom:10px;max-width:640px;}
.image-main .box-main-image .msg p{margin:0;padding :.3em;}
/*-----------------
  CONTENTS
-----------------*/
.contents { padding-top: 3em; background-color: #ffffff;}

/* MAIN IMAGE - BxSlider */
.image-main .box-main-image { width: 100%; max-width: 1224px; max-height:450px; padding-bottom: 0; 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%;}

/*-- RIGHT-CONTENTS --*/
.article .right-contents { width: calc(100% - 236px - 24px); float: right;}

.article .right-contents > .txtbox { border: none; padding-left: 2em;}
.article .right-contents > .txtbox h2:first-child { margin-top: 0;}


/* LIST-SECTION */
.article .right-contents .section.list-section { margin: 0 0 2em; position: relative; border-color: #888888;}
.article .right-contents .section.list-section h2 { padding: 0.8em 0 0.7em; border-bottom: 1px solid #000000; text-indent: -1000em; color: #000000; background: 16px center no-repeat; background-color: #ffffff;}
.article .right-contents .section.list-section h2:before { top: 0px; bottom: 0px; left: 10px; width: 8px; background: url(../img/h2_arrow_01.png) center no-repeat;}
.article .right-contents .section.list-section h2.paper { background-image: url(../img/h2_title_paper.png);}
.article .right-contents .section.list-section h2.news { background-image: url(../img/h2_title_news.png);}

.article .right-contents .section.list-section ul li { border-bottom: 1px dotted #888888;}
.article .right-contents .section.list-section ul li a { margin: 0; padding: 0.5em;}
.article .right-contents .section.list-section dl dt,
.article .right-contents .section.list-section dl dd { padding: 0.5em 0;}
.article .right-contents .section.list-section dl dt { width: 9em; float: left; font-weight: bold;}
.article .right-contents .section.list-section dl dd { margin: 0; padding-left: 10em; border-bottom: 1px dotted #888888;}
.article .right-contents .section.list-section dl dd a { margin: 0; padding: 0;}

.article .right-contents .section.list-section .list_link { position: absolute; top: 6px; right: 6px;}
.article .right-contents .section.list-section .list_link a { display: block; width: 38px; height: 12px; padding: 12px; color: #000000; background:url(../img/btn_news_more.png) center no-repeat #ffffff; text-indent: -1000em;}
.article .right-contents .section.list-section .list_link a:hover { opacity: 0.7;}

/* NEWS */
.article .right-contents .box-news { width: 100%; position: relative; overflow: visible; float: right;}

.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: block; float: left; width: 24.25%; height: 45px; margin-left: 1%; overflow: hidden; position: relative;
  border: 1px solid #666666; border-bottom: none; box-sizing: border-box;
}
.box-news .tabmenu ul.menu li:first-child { margin-left: 0;}
.box-news .tabmenu ul.menu li.active { margin-top: 1px;}
.box-news .tabmenu ul.menu li:hover { margin-top: 1px;} 
.box-news .tabmenu ul.menu li a {
	display: block; height: 45px; padding: 0; position: relative; background-color: #ffffff; background: linear-gradient(to top , #555555 , #888888);
  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.active a { background: linear-gradient(to top , #ffffff , #E6EBEF);}

.box-news .tabmenu ul.menu li a span { display: block; height: 100%; margin: 0 4px; background: center no-repeat; text-indent: -1000em;}
.box-news .tabmenu ul.menu li.tab1 a span { background-image: url(../img/btn_tab_01.png);}
.box-news .tabmenu ul.menu li.tab2 a span { background-image: url(../img/btn_tab_02.png);}
.box-news .tabmenu ul.menu li.tab1.active a span { background-image: url(../img/btn_tab_01_s2.png);}
.box-news .tabmenu ul.menu li.tab2.active a span { background-image: url(../img/btn_tab_02_s2.png);}



.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 #888888; background-color: #ffffff; margin-top: -1px; overflow: visible;}
.box-news .tabmenu .section .division dl { margin-top: 2.5em;}
.box-news .tabmenu .section .division .list_link { position: absolute; top: 4px; right: 4px; width: 62px; height: 36px; z-index: 100; overflow:visible;}
.box-news .tabmenu .section .division .list_link a { display: block; width: 38px; height: 12px; margin: 0; padding: 12px; background: url(../img/btn_news_more.png) center no-repeat; text-indent: -1000em;}
.box-news .tabmenu .section .division .list_link:hover { opacity: 0.7;}


.article.topimage .nav .goal dl dt{
   margin: 0;
   padding: 0.5em 22px 0.3em;
   font-size: 1.4em;
   font-weight: bold;
   display:block;
   width:inherit;
   color: #ffffff;
   background-color: #234A8F;
   display: block;
   border:1px solid #ccc;
   border-bottom:2px solid #234A8F;
}
.article.topimage .nav .goal dl dt:before{
   display:none;
}
.article.topimage .nav .goal dl dd {
   margin: 0;
   border: 1px solid #cccccc;
   border-bottom: none;
}
.article.topimage .nav .goal dl dd:last-child {
   border: 1px solid #cccccc;
}
.article.topimage .nav .goal dl dd a {
   padding: 0.8em 0.4em 0.6em 1.5em;
   font-weight: bold;
   display:block;
   width:inherit;
   color: #333333;
   background: url(../img/btn_subtop_side-nav.png) left bottom repeat-x;
   background-size: contain;
   display: block;
}
.article.topimage .nav .goal dl dd a:hover {
   color: #ffffff;
   background-image: none;
   background-color: #234A8F;
   text-decoration: none;
}




/* before */
.article .nav ul li a,
.article .right-contents .section.list-section h2{ position:relative;}

.article .nav ul li a:before,
.article .right-contents .section.list-section h2:before
{ display: block; content: ""; position: absolute;}

.article.topimage .linkbox{clear:both;}
.article.topimage .linkbox dt {	padding: .5em .75em;
	background: -webkit-linear-gradient(top, #69b4e6 0%, #006FB2 100%);
	background: linear-gradient(to bottom, #69b4e6 0%, #006FB2 100%);
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);}
	.article.topimage .linkbox dd{margin:0;padding:0 0 0 1em;}
.article.topimage .linkbox dd a{width:23%; margin:1em .5%; float:left; display:block;
	position: relative;
	padding: 1em 0 1em 1%;
	background-color: #f6f6f6;
}

.article.topimage .linkbox dd a::after {
	position: absolute;
	top: 0;
	right: 0;
	content: '';
	width: 0;
	border-width: 0 16px 16px 0;
	border-style: solid;
	border-color: #fff #fff #ddd #ddd;
	box-shadow: -1px 1px 2px rgba(0, 0, 0, .1);
}

@media screen and (max-width: 1044px) {

.article .box-news { width: calc(100% - 230px - 24px);}
.article .nav { width: 230px;}


/*-----------------
  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: 768px; */ height:auto; overflow: hidden;}
.image-main .box-main-image .bx-wrapper .bx-controls .bx-pager { background-image: none;}

}

@media screen and (max-width: 787px) {
/*-----------------
  IMAGE MAIN
-----------------*/
.image-main .wrap { /* max-width: 468px; */}

.image-main .information { width: 94%; padding: 3%; position: static; background-color: #ffffff; border: none; box-shadow: 0px 0px 0px 1px #cccccc inset;}

/* MAIN IMAGE - BxSlider */
.image-main .box-main-image { /* max-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 .right-contents,
.article .nav { width: 100%; float: none;}

.article .box-news { margin-bottom: 2em;}

.article .right-contents .section.list-section dl dt { width: autot; float: none;}
.article .right-contents .section.list-section dl dd { padding-top: 0; padding-left: 1em;}

.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: linear-gradient(to top , #555555 , #888888); border: 1px solid #888888;
}
.box-news .tabmenu .section h2:before,
.box-news .tabmenu .section h2.active { background: linear-gradient(to top , #ffffff , #E6EBEF);}
.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: block; color: #000000; position: relative; z-index: 100;}
.box-news .tabmenu .section h2 a span { width: auto; height: 100%; margin: 0; padding: 0; display: block; background: center no-repeat; text-indent: -1000em;}
.box-news .tabmenu .section h2.tab1 a span { background-image: url(../img/btn_tab_01.png);}
.box-news .tabmenu .section h2.tab2 a span { background-image: url(../img/btn_tab_02.png);}
.box-news .tabmenu .section h2.tab3 a span { background-image: url(../img/btn_tab_03.png);}
.box-news .tabmenu .section h2.tab4 a span { background-image: url(../img/btn_tab_04.png);}
.box-news .tabmenu .section h2.tab1.active a span { background-image: url(../img/btn_tab_01_s2.png);}
.box-news .tabmenu .section h2.tab2.active a span { background-image: url(../img/btn_tab_02_s2.png);}
.box-news .tabmenu .section h2.tab3.active a span { background-image: url(../img/btn_tab_03_s2.png);}
.box-news .tabmenu .section h2.tab4.active a span { background-image: url(../img/btn_tab_04_s2.png);}

.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 { width: auto; border: 1px solid #aaaaaa; background-color: #EEEEEE;}

}

@media screen and (max-width: 484px) {
.image-main .wrap { max-width: inherit;}

.image-main .box-main-image { width: 100%;}

/*-----------------
  CONTENTS
-----------------*/
/* NEWS */
.article .right-contents,
.article .nav { width: 90%; padding-left: 5%; padding-right: 5%;}
.article .news_section dl dt {  padding-bottom: 0em; float: none;}
.article .news_section dl dd { padding-left: 2em;}


}