@charset "UTF-8";
/* ****************************************************************** 

	--responsive.css--

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

/*==================================================================
	Style setting
===================================================================*/

@media only screen and (max-width:480px) {
	
	/* ------------------------------------------------------------------
		Responsive Reset styles
	-------------------------------------------------------------------*/
	
	.touchHover,
	.noTapColor,
	.button { -webkit-tap-highlight-color:rgba(0,0,0,0); }

	img { width: 100%; height: auto;}
	
	#primaryInner,
	#headerInner,
	#navi ol,
	#contents,
	#footerNavi ul,
	#footerInner,
	#main,
	.breadcrumbs ol {
		float: none !important;
		width: auto !important;
		height: auto;
	}
	
	#wrapper { min-width: 320px;}
	
	#contents { margin-bottom: 0;}
	#main { padding: 0 10px;}
		
	.pager li,
	.pager strong,
	.pager a { display: inline-block;}
	
	.pager .blk,
	.pager .cur { display: none;}
	
	table h4 { font-weight: bold; font-size: 108%;}
	
	/* ------------------------------------------------------------------
		table styles
	-------------------------------------------------------------------*/
	.sheet input[type="text"],
	.sheet input[type="password"],
	.sheet textarea {
		-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.2);
		box-shadow:inset 0 1px 2px rgba(0,0,0,.2);
		padding:3px;
		width:98%;
		border:1px solid #BCBBBB;
		background:#F7F7F7;
		font-size:14px;
		font-weight:normal;
		outline:none;
	}
	.sheet input[type="text"],
	.sheet input[type="password"] { padding:8px; width:95% !important;}
	.sheet textarea { margin:0; }
	.sheet input[type="text"]:focus,
	.sheet input[type="password"]:focus,
	textarea:focus { background-color:#FFF; }
	
	.sheet p { line-height: 1.4; font-size: 96%;}
	.sheet .f1 { margin-bottom: 8px;}
	
	.sheet span.red { display: block;}
	
	/* ------------------------------------------------------------------
		button styles
	-------------------------------------------------------------------*/
	
	.button {
		display:block;
		-webkit-transition:background-color 0.15s ease-in-out;
		-moz-transition:background-color 0.15s ease-in-out;
		-o-transition:background-color 0.15s ease-in-out;
		transition:background-color 0.15s ease-in-out;
		width:100%;
		height:44px;
		margin-bottom:20px;
		border-radius:8px !important;
		font-weight:bold;
		line-height:1;
		text-align:center;
		text-decoration:none;
		outline:none;
		cursor:pointer;
		behavior:url(/htc/PIE.php);
	}
	.button.black {
		border:1px solid #222;
		border-radius:8px !important;
		background:#333;
		background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #555), color-stop(1, #333));/* Safari 4-5, Chrome 1-9, Android 1.6-3.0 */
		background-image:-webkit-linear-gradient(top, #555, #333);/* Safari 5.1+, iOS Safari 5.1+, Chrome 10+ */
		background-image:-moz-linear-gradient(top, #555, #333);/* Firefox 3.6+ */
		background-image:-o-linear-gradient(top, #555, #333);/* Opera 11.10+ */
		-pie-background:linear-gradient(top, #555, #333);/* IE 6-9 */
		background-image:-ms-linear-gradient(top, #555, #333);/* IE 10+ */
		color:#FFF;
		text-shadow:0 -1px 1px #000;
		behavior:url(/htc/PIE.php);
	}
	.pcStyle .button.black:hover,
	.button.black.active {
		background:#555;
		border-radius:8px !important;
	}
		
	/* ------------------------------------------------------------------
		Header styles
	-------------------------------------------------------------------*/
	
	#catch { display: none;}
	
	#headerInner {
		position: relative;
		padding: 15px 0 9px;
	}
	
	#logo {
		position: static;
		top: auto;
		left: auto;
		margin: 0 10px;
		width: 175px;
	}
	
	#smartNaviBtn,
	#smartRss {
		position: absolute;
		top: 19px;
		display: block;
		width: 30px;
		height: 30px;
	}
	#smartNaviBtn { right: 10px;}
	#smartRss { right: 50px;}
	
	#headerSocial,
	#fontChange,
	#primaryNavi #language { display: none;}
	
	#primaryNavi { display: none;}
	
	.breadcrumbs ol { padding: 0 10px;}
	
	
	/* ------------------------------------------------------------------
		Navi styles
	-------------------------------------------------------------------*/
	
	#navi { display: none;}
	
	.smartNavi { cursor:pointer; }
	#smartNavi {
		display:none;
		background:#2B2B2B;
		background-image:-webkit-gradient(linear, left top, right bottom, from(#454545), to(#2B2B2B));
		background-image:-moz-linear-gradient(bottom, #454545, #2B2B2B);
		background-image:-o-linear-gradient(bottom, #454545, #2B2B2B);
	}
	#naviClose {
		display:block;
		overflow:hidden;
		position:absolute;
		top:12px;
		width:21px;
		height:21px;
		background:url(/img/smart/common/btn_slideclose.png) no-repeat;
		-webkit-background-size:21px 42px;
		-moz-background-size:21px 42px;
		background-size:21px 42px;
		text-indent:-9999px;
	}
	.active #naviClose { background-position:0 100%; }
	#naviImage {
		width:25px;
		height:25px;
		margin:-1px 8px 0 0;
		vertical-align:middle;
	}
	#smartNavi dt {
		-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, .08);
		box-shadow:inset 0 1px 0 rgba(255, 255, 255, .08);
		height:21px;
		padding:3px 0 0 10px;
		border-bottom:1px solid #202020;
		background:#2B2B2B;
		color:#999;
		font-size:11px;
		font-weight:bold;
		line-height:19px;
		text-shadow:0 1px 0 #111;
	}
	#smartNavi dd:last-child { border-bottom:1px solid rgba(255,255,255,.08); }
	#smartNavi li a {
		display:block;
		-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, .08);
		box-shadow:inset 0 1px 0 rgba(255, 255, 255, .08);
		height:40px;
		border-bottom:1px solid #202020;
		padding:0 10px;
		color:#E2E1E0;
		font-size: 108%;
		font-weight:bold;
		line-height:41px;
		text-decoration:none;
		text-shadow:0 1px 0 #000;
	}
	#smartNavi li .active { background:#666; }
	
	
	/* ------------------------------------------------------------------
		footer styles
	-------------------------------------------------------------------*/
	
	#footerNavi,
	#copyright img { display: none;}
	#footerInner { padding: 15px 10px;}
	
	#smartCopyright {
		display: block;
		color: #FFF;
		font-size: 77%;
		text-align: center;
	}
	
	#footerLogo {
		float: none;
		margin: 0 auto 8px;
		width: 100px;
	}
	
	#footer address {
		display: block;
		padding-top: 20px;
		border-top: 1px solid #222;
	}
	
	#footerSocial {
		float: left;
		padding-top: 20px;
	}
	
	#pageTop {
		display: block;
		position: static;
		bottom: auto;
		right: auto;
		margin: 20px 0 10px;
	}
	#pageTop a {
		display: block;
		margin: 0 auto;
		width: 60px;
	}
		
	/* ------------------------------------------------------------------
		headline styles
	-------------------------------------------------------------------*/
	
	.headline, .topicContent h1 {
		padding-left: 20px;
		padding-bottom: 10px;
		height: auto;
		line-height: 1.5;
		border-bottom: 3px solid #C9C9C9;
		background: url(/img/smart/common/bg_headline.png) no-repeat 0 15px;
		background-size: 13px auto;
	}
	
	#main>h1 {
		overflow: hidden;
		width: 100%;
		height: 72px;
		text-indent: -9999px;
		background-repeat: no-repeat;
		background-size: 100%;
		margin-bottom: 13px;
	}
	
	/* ------------------------------------------------------------------
		side styles
	-------------------------------------------------------------------*/
	
	#side {
		box-sizing: border-box;
		padding: 20px 10px 0;
		float: none !important;
		width: 100% !important;
	}
	#side h1,
	#side #bnrArea,
	#side p.center,
	#archive,
	#pageHome #side { display: none;}
	
	
	/* ------------------------------------------------------------------
		home styles
	-------------------------------------------------------------------*/
	
	#pageHome #contents {
		border-top: 3px solid #1D1F86;
		padding-top: 25px;
	}
	
	#pageHome #mainTopic,
	#pageHome #subTopics {
		box-sizing: border-box;
		float: none;
		width: 100%;
	}
	
	#pickup h1 { line-height: 1.3;}
	#subTopics h1 { line-height: 1.4;}
	
	#subTopics .sub figure {
		width: 30%;
		height: auto;
		margin-bottom: 5px;
	}
	#subTopics .sub .haveImg {
		box-sizing: border-box;
		padding-left: 10px;
		width: 70%;
		height: auto;
	}
	
	#subTopics .sub header { margin-bottom: 0;}
	
	#pickup article { padding: 15px 12px;}
	#pickup time {
		display: block;
		margin-bottom: 10px;
		text-align: center;
	}
	#subTopics .sub h1 { font-size: 100%;}
	#subTopics .sub p { display: none;}
	
	#pickup header a {
		display: block;
		padding-right: 20px;
		background: url(/img/smart/common/icon_arrow.png) no-repeat 97% 50%;
		background-size: 10px auto;
		text-decoration: none;
	}
	#mainTopic header a { padding-right: 25px;}
	
	#listTopics .listInner a,
	.topicList a {
		display: block;
		padding-left: 0;
		padding-right: 25px;
		background: url(/img/smart/common/icon_arrow.png) no-repeat 97% 50% !important;
		background-size: 10px auto !important;
		text-decoration: none !important;
	}
	
	#pickup header a:hover,
	#listTopics .listInner a:hover,
	.topicList a:hover { text-decoration: none;}
	
	#pickup header a:active,
	#pickup header a.active,
	#listTopics .listInner a:active,
	#listTopics .listInner a.active,
	.topicList a:active,
	.topicList a.active { background-color: #F3F4F9 !important;}
	
	#listTopics .listInner { padding: 15px 12px;}
		
	#pageHome #socialLine,
	#pageHome #rss { display: none;}
	
	#pageHome #listTopics {
		float: none;
		width: auto;
	}
	
	#pageHome #bnrArea {
		margin-right: auto;
		width: auto;
	}
	#pageHome #bnrArea li {
		box-sizing: border-box;
		margin: 0;
		padding: 0 3px;
		width: 50%;
		margin-bottom: 5px;
	}
	#pageHome #movieBox { width:100%;
	height:100%;
	}
	
	
	
	/* ------------------------------------------------------------------
		pageSecond styles
	-------------------------------------------------------------------*/
	
	.pageSecond #contents { padding-top: 15px;}
	
	.pageSecond #documentBox { padding: 14px 15px;}
	
	.pageSecond #documentBox .leftBox,
	.pageSecond #documentBox .rightBox {
		float: none;
		padding-left: 0;
		width: 100%;
		background: none;
	}
	
	.pageSecond #documentBox .leftBox { margin-bottom: 30px;}
	
	#documentBox h3 img { width: auto; height: 13px;}
	#documentBox .text { font-size: 86%; background-size: auto 55px !important; padding-left: 55px;}
	
	/* ------------------------------------------------------------------
		topics styles
	-------------------------------------------------------------------*/
	
	#detailSocial { float: left;}
	
	#pageTopicDetail #main #inner { padding: 15px 12px;}
	
	#pageTopicDetail #inner h1 { margin-bottom:15px;}
	#pageTopicDetail .topicContent iframe { width: 100% !important; height: auto !important;}
	
	#pageTopicDetail #main header { margin-bottom: 20px;}
	#pageTopicDetail #main header .mb30 { margin-bottom: 20px !important;}
	
	#pageTopicDetail #main .categoryName,
	#pageTopicDetail #main time { display: block;}
	
	#pageTopicDetail #main .categoryName { margin-bottom: 13px;}
	#pageTopicDetail #main time {
		background-color: #FFF;
		margin-left: 0 !important;
		padding: 0;
		text-align: right;
	}
	
	#pageTopicDetail .breadcrumbs em { display: none;}
	#pageTopicDetail .breadcrumbs li:nth-child(2) a { background: none;}
	
	#pageTopicDetail .topicContent td span a {
		display: block;
		width: 200px;
		overflow: hidden;
		white-space:nowrap;
		text-overflow: ellipsis;
		-webkit-text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
	}
	
	#pageTopicDetail .topicContent a img { width: auto;}
	
	#pageTopicDetail .speakerName span {
		display: inline-block;
	}
	
	#pageTopicDetail .speakerName td>span:nth-child(even){
		box-sizing: border-box;
		padding-left: 10px;
		width: 78%;
		vertical-align: top;
	}
	#pageTopicDetail .speakerName td>span:nth-child(odd){ width: 20%;}
	
	.session2013 .speakerList .leftBox,
	.session2013 .staffBox .leftBox { float: none; margin: 0 auto; text-align: center;}
	
	.session2013 .speakerList .rightBox,
	.session2013 .staffBox .rightBox { float: none; width: auto;}
	
	/* ------------------------------------------------------------------
		Donation styles
	-------------------------------------------------------------------*/
	
	#pageAbout .center .inlineBlock.mr10,
	#pageAbout .center .inlineBlock.ml10 { margin: 0 !important; width: 45%;}
	
	#pageAbout .houjinMail { display: block;}
	
	#pageGuideline #main p.center a { display: none;}
	
	
	/* ------------------------------------------------------------------
		Admission styles
	-------------------------------------------------------------------*/
	
	#admissionFlow th {
		padding: 10px;
		background: #DBE3F2;
		border: 1px solid #92AAD9;
	}
	
	#admissionFlow td { padding: 10px 0 15px;}
	
	/* ------------------------------------------------------------------
		Member styles
	-------------------------------------------------------------------*/
	
	#pageMember .list.leftBox,
	#pageMember .list.rightBox {
		float: none;
		width: 100%;
		font-size: 123.1%;
	}
	
	/* ------------------------------------------------------------------
		Event styles
	-------------------------------------------------------------------*/
	
	#pageEvent .sheet img,
	#pageEventDetail .sheet img { width: 60px;}
	
	#pageEvent .sheet td>span:nth-child(2) { display: block;}
	#pageEvent .sheet td>span:last-child { display: none;}
	
	
	/* ------------------------------------------------------------------
		Medicine styles
	-------------------------------------------------------------------*/
	
	#pageMedicine .f11 { background-color: transparent;}
	#pageMedicine .f11 td { border: none;}
	#pageMedicine .f11 h4 { margin: 15px 0 10px;}
	
	#pageMedicine .f11 td>span:nth-child(4) { display: none;}
	#pageMedicine .f11 td>span:last-child { display: block;}
	
	#pageMedicine .f11 span a {
		display: block;
		width: 235px;
		overflow: hidden;
		white-space:nowrap;
		text-overflow: ellipsis;
		-webkit-text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
	}
}

@media only screen and (max-width:480px) {
	
	/* ------------------------------------------------------------------
		headline styles
	-------------------------------------------------------------------*/
	
	#main>h1 { height: 55px;}
}

@media only screen and (max-width:320px) {
	
	/* ------------------------------------------------------------------
		headline styles
	-------------------------------------------------------------------*/
	
	#main>h1 { height: 48px;}
}