﻿@charset "utf-8";

/***********************************

 国立国際医療研究センター top.css

 151111 

************************************/



h1.header .title{margin-bottom:0;}

/*-----------------

  IMAGE MAIN

-----------------*/

.image-main { margin-bottom: 2em}

.image-main .wrap { width: 100%; max-width: 1024px; min-width: inherit; margin: 0 auto; padding-top: 2em;}

.image-main .box-main-image { float: right; }



.image-main .information { float: left; width: 250px; padding: 15px; background: #ffffff; border: 1px solid #cccccc;}

.image-main .information dl { margin-bottom: 0.2em;}

.image-main .information dl dt { padding: 0.1em 0 0 0.8em; font-size: 1.3em; font-weight: bold; position: relative;}

.image-main .information dl dt:before { display: block; content: ""; position: absolute; top: 0px; bottom: 0px; left: 0px; width: 9px; background: url(../images/tex_diagnal.png) center #234A8F;}

.image-main .information dl dd { margin-left: 2em; margin-bottom: 0.7em; padding-top: 0.3em;}

.image-main .information dl dd.tel {font-family:Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","微软雅黑","ヒラギノ角ゴ ProN W3","WenQuanYi Micro Hei",sans-serif;margin-left: 0; margin-bottom: 0; padding: 0.1em 0 0 1.5em; font-size: 1.9em; color: #234A8F; font-weight: bold; background: url(../images/img_top_tel.png) 0.35em center no-repeat;}

.image-main .information dl dd > dl { margin-bottom: 0;}

.image-main .information dl dd > dl dt { padding: 0; border-bottom: 1px dotted #aaaaaa; font-size: 1.1em;}

.image-main .information dl dd > dl dt:before { display: none;}

.image-main .information dl dd > dl dd { margin-left: 1em;}

.image-main .information dl dd > dl dd:last-child { margin-bottom: 0em;}



.image-main .information ul { margin: 0; padding: 0; width: auto; list-style: none;}

.image-main .information ul li { width: 46%; margin: 2%; float: left; overflow: visible;}

.image-main .information ul li:last-child { width: 96%; margin: 2%; clear: both;}

.image-main .information ul li a {

	display: block; padding: 0.85em 0 0.65em 2.3em; background: url(../images/img_top_mark01.png) 0.8em center no-repeat #f6f6f6;

	font-size: 1.1em; font-weight: bold; color: #333333;

	border: 1px solid #e8e8e8; box-shadow: 1px 1px 0 0 #8c8c8c;

}

.image-main .information ul li:last-child a { padding-left: 3.4em; background-image:url(../images/img_top_car.png);}

.image-main .information ul li a:hover { /* background-color: #234A8F; */}



/*-----------------

  CONTENTS

-----------------*/

.contents { background-color: #ffffff;}



/* MAIN IMAGE - BxSlider */

.image-main .box-main-image { width: 722px; /* height: 410px; */ height:304px; 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;}



/* SLIDE BANNER - BxSlider */

.article.topimage { width: 100%; height: auto; /* margin: 35px auto 10px; */ margin:20px auto 5px; padding: 0; position: relative; overflow: visible;}



.article .topimage_inner { padding-bottom: 35px;}

.article .topimage_inner div { padding-bottom: 0; overflow: visible;}

.article .topimage_inner .bx-wrapper { position: relative; width: 98%; margin: 0 1% !important; padding: 0;max-width: none !important; }



.article .topimage_inner .bx-controls-direction a{ display: block; position: absolute; text-indent: -1000em; top: 50%; margin-top: -11.5px; width: 13px; height: 23px;}

.article .topimage_inner .bx-controls-direction a.bx-prev{ left: -4%; background-image: url(../images/arrown.png);}

.article .topimage_inner .bx-controls-direction a.bx-next{ right: -4%; background-image:url(../images/arrows.png);}

.article .topimage_inner .bx-wrapper .bxslider .slide { width: 200px; margin: 0 8px;}

.article .topimage_inner .bx-wrapper .bxslider .slide img { max-width: 100%;}



/* NEWS */

.article .left{ width: 75%; 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(../images/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(../images/top_tab_left.png);}

.box-news .tabmenu ul.menu li:after { right: 0px; background-image: url(../images/top_tab_right.png);}

.box-news .tabmenu ul.menu li.active { margin-top: 1px; background: url(../images/top_tab_active_center.png) left top repeat-x; border: none;}

.box-news .tabmenu ul.menu li.active:before { background-image: url(../images/top_tab_active_left.png);}

.box-news .tabmenu ul.menu li.active:after { background-image: url(../images/top_tab_active_right.png);}

.box-news .tabmenu ul.menu li:hover { opacity: 0.7;} 



.box-news .tabmenu ul.menu li a {

  display: table-cell; height: 45px; padding: 0 0 0 0.5em; position: relative;

  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: 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 #999999; background-color: #ffffff; margin-top: 45px; overflow: visible;}

.box-news .tabmenu .section .division dl {    margin-top: 1em;
    margin-bottom: 1em;}



.box-news .tabmenu .section .division .list_link {overflow:hidden; padding: 0; background: #234A8F; position: absolute; top: -38px; right: 0px; z-index: 100;}

.box-news .tabmenu .section .division .list_link a {width:100%; overflow:hidden; margin: 0; padding: 0.4em 1em 0.3em; color: #ffffff; font-weight: bold; text-decoration: none; }

.box-news .tabmenu .section .division .list_link:hover { opacity: 0.7;}

.box-news .tabmenu .section .division .news_list_link { margin: 1em 1em 1.5em; padding-left: 1.2em; display: block; float: right; background: url(../images/img_link_arrow.png) left center no-repeat;}



.article .left .txtbox{margin:2em 0 0 0;border:none;}



/*-----------------

  NAV

-----------------*/

.article .nav { width: 22.5%; float: right;}

.article .nav ul { overflow: visible;}

.article .nav > ul li,

.article .nav > ul li:last-child { position: relative; display: table; width: 100%; margin-bottom: 0.8em; 

background:#DEEFF8 url(../images/img_side-banner_bg.png) center no-repeat; background-size: cover; border: 2px solid #4892E3; box-shadow: 1px 1px rgba(0,0,0,0.3); box-sizing: border-box;}

.article .nav > ul li:before,

.article .nav > ul li:last-child:before { display: block; content: " "; position: absolute; top: 0px; bottom: 0px; left: 10px; width: 8px; background: url(../images/img_news_arrow.png) center no-repeat; transition-duration: 0.1s;}

/* .article .nav ul li:hover:before { left: 12px;} */

.article .nav ul li a { display: table; width: 100%; padding: 0.55em 0 0.4em 0 ; font-size: 0.9em; background: none;}

.article .nav ul li a{padding:.1em 0 .05em 0;}

.article .nav ul li a:hover { color: #234A8F; background: url(../images/tex_diagnal.png) rgba(255,255,255,0.4);}

.article .nav ul li a span { display: table-cell; height: 3.5em; padding: 0 0.5em 0 20px; vertical-align: middle;}



.article .section .link_right{text-align: right;  margin-right: 1.5em;}

.article .section .link_right:before{content:"→"; margin:0;  padding:0; }

.article .section .link_right a{padding-left:0;}



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

/*-----------------

  IMAGE MAIN

-----------------*/

.image-main  { }

.image-main .wrap { max-width: 768px; position: relative;}



.image-main .information { z-index: 100; background-color: rgba(255,255,255,0.8);}



/* MAIN IMAGE - BxSlider */

.image-main .box-main-image { width: 480px;overflow: hidden;}

.image-main .box-main-image .bx-wrapper .bx-controls .bx-pager { background-image: none;}

.article .topimage_inner .bx-wrapper { width: 92%; margin: 0 4% !important;}

}



@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 { width: 468px; padding-bottom: 1.8em; height:auto; overflow: hidden;}

.image-main .box-main-image .bx-wrapper .bx-controls .bx-pager { background-image: none;}





/*-----------------

  CONTENTS

-----------------*/

.article .left,

.article .nav { width: 100%; float: none;}



.article .box-news { 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(../images/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(../images/top_tab_left.png);}

.box-news .tabmenu .section h2:after { right: 0px; background-image: url(../images/top_tab_right.png);}

.box-news .tabmenu .section h2.active { background-image: url(../images/top_tab_active_center.png); border-bottom: none;}

.box-news .tabmenu .section h2.active:before { background-image: url(../images/top_tab_active_left.png);}

.box-news .tabmenu .section h2.active:after { background-image: url(../images/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 .division{ margin-top: -1px;}

.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 { top: auto; bottom: 1em; left: 2em; right: 2em;}

.box-news .tabmenu .section .division .list_link a { 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) {

.image-main .wrap { max-width: inherit;}

.image-main .information { width: 86%; margin-left: 4%; margin-right: 4%; }



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



/*-----------------

  CONTENTS

-----------------*/

/* NEWS */

.article .box-news, .article .nav { 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;}



}
