@charset "utf-8";

/************************************************************************************
bigger than 960 PC
*************************************************************************************/
@media screen and (min-width: 960px) {
	/* sub contnent */
	div.index #contentsArea #subContentsBlock .gakujutsu-box .cover-box {
		width: 42.4%;
		max-width: 160px;
	}
}

/************************************************************************************
smaller than 959 TB
*************************************************************************************/
@media screen and (max-width: 959px) {
	.index #contentsArea {
		margin: 0px;
	}
	.index #top-contents {
		margin: 0px !important;
	}
	.index .mvBlock {
		width: auto;
	}
	.index .sliderBlock {
		float: none;
		width: auto;
	}
	.index .sliderInner .sliderMessage {
		width: auto;
		float: none;
		margin-left: 220px;
	}
	.index .sliderInner .sliderPhoto {
		width: 200px;
		height: auto;
	}
	.bx-wrapper .bx-pager {
		width: auto !important;
		left: 220px;
	}
	
	/*------------------------------
	topicsBlock 
	------------------------------*/
	.index .topicsBlock {
		position: relative;
		width: auto;
		height: auto;
		padding: 0px;
		margin: 0;
	}
	.index .topicsBlock ul, .index .topicsBlock li {
		margin: 0;
		padding: 0;
		list-style-type: none;
	}
	.index .topicsBlock ul {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 100%;
		margin: 0px auto;
		padding: 0 0;
	}
	.index .topicsBlock ul li {
		display: block;
		vertical-align: middle;
		position: relative;
		width: calc(50% - 36px);
		height: 67px;
		margin-left: 30px !important;
		margin-right: 12px;
		background-color: #ffffff;
		border-radius: 4px;
	}
	.index .topicsBlock ul li:nth-child(even) {
		position: relative;
		width: calc(50% - 36px);
		height: 67px;
		margin-right: 30px;
		margin-left: 0px !important;
		background-color: #ffffff;
		border-radius: 4px;
	}
	.index .topicsBlock li span {

	}
	.index .topicsBlock li .topic-img {
		position: relative;
		max-height: 4em;
	}
	/*------------------------------
	mainConts-col2
	------------------------------*/
	.index #mainConts-col2 {
		width: auto;
		padding: 0px;
		margin: 28px 15px 20px;
		overflow: hidden;
	}
	
	/*------------------------------
	newsblock 
	------------------------------*/
	.index .top_newsblock .top-newslist {
		position: relative;
		width: 100%;
		list-style: none;
	}
	.index .top_newsblock .top-newslist li {
		position: relative;
		width: 100%;
		margin: 10px 0 0 !important;
		list-style: none;
		border-bottom: 1px dotted #c8c8c8;
	}
	
	/*------------------------------
	subContentsBlock
	------------------------------*/
	.index #contentsArea #subContentsBlock {
		overflow: hidden;
		zoom: 1;
	}
	.index #contentsArea #subContentsBlock .side-nav {
		display: flex;
		flex-wrap: wrap;
	}
	.index #contentsArea #subContentsBlock .sideSection {
		width: calc(50% - 15px);
	}
	.index #contentsArea #subContentsBlock .sideSection:nth-child(odd) {
		clear: both;
		margin-right: 15px;
	}
	.index #contentsArea #subContentsBlock .sideSection:nth-child(even) {
		margin-left: 15px;
	}
	.index #contentsArea #subContentsBlock .sideSection .siteBlock {
		padding: 0 !important;
		margin: 0 !important;
	}
	.index #contentsArea #subContentsBlock .sideSection .siteBlock .siteList {
		display: block;
		margin: 0 !important;
	}
	
	/*------------------------------
	bannerList 
	------------------------------*/
	.index #contentsArea #subContentsBlock .sideSection ul.bannerList {
		text-align: center;
		width: auto;
		padding-top: 0;
		padding-bottom: 0;
		overflow: hidden;
		zoom: 1;
	}
	.index #contentsArea #subContentsBlock .sideSection ul.bannerList li {
		list-style-type: none;
		padding-top: 0;
		padding-bottom: 15px;
		float: left;
		width: 50%;
	}
	
	/*----------------------------------------------------
	#subContentsBlock > .siteBlock
	----------------------------------------------------*/
	.index #contentsFoot {
		width: auto;
		clear: both;
		padding: 0 15px;
		margin: 0 auto 20px;
	}
	.index #contentsFoot h2 {
		margin-bottom: inherit;
	}

	.index .siteBlock {
		position: relative;
		width: 100%;
		margin: 10px auto 20px;
	}
	
}

/************************************************************************************
between 640 - 959
*************************************************************************************/
@media screen and (min-width: 640px) and (max-width: 959px) {
	div.index .topicsBlock li .txt {
		font-size: 1.4em;
	}
}

/************************************************************************************
smaller than 640 SP
*************************************************************************************/
@media screen and (max-width: 640px) {
	.index h1 {
		position: static;
		font-size: 1em;
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
		border-left: none;
	}
	.index h1:before {
		content: none !important;
	}
	.index h1:after {
		content: none !important;
	}
	
	/*-----------------------------------------------------
	dl
	-------------------------------------------------------*/
	/* topicsList */

	.topicsList dt {
		float: none;
		padding-bottom: 5px;
		padding-top: 10px;
	}
	.topicsList dd {
		padding-top: 0;
		padding-left: 0;
		padding-bottom: 15px;
	}
	.index .sliderInner .sliderMessage {
		width: 100%;
		float: none;
		margin-left: 0;
	}
	.index .sliderInner .sliderPhoto {
		width: auto;
		float: none;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 15px;
	}
	
	/*------------------------------
	menuBlock
	------------------------------*/	
	.index .menuBlock {
		position: relative;
		width: 100%;
		height: 385px;
		background-color: #EDEDED;
	}
	.index .menuBlock ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: auto;
		height: 345px;
		margin: 0px auto!important;
		padding: 20px 15px;
	}
	.index .menuBlock li {
		position: relative;
		width: 100%;
		height: 61px;
		display: block;
		background : #FFFFFF;
		background : rgba(255, 255, 255, 1);
		border-radius : 4px;
		-moz-border-radius : 4px;
		-webkit-border-radius : 4px;
		box-shadow : 1px 1px 2px rgba(51, 51, 51, 0.45);
		margin-left: 0px !important;
		margin-bottom: 10px;
	}
	.index .menuBlock a {
		position: absolute;
		display: block;
		height: 100%;
		width: 100%;
		vertical-align: middle;
		color: #333333;
		text-decoration: none;
	}
	.index .menuBlock a .txt .rs-br {
		display: none;
	}
	.index .menuBlock .txt::before {
		content: '';
		position: absolute;
		min-width: 20%;
		height: 77%;
		bottom: 0;
		top: 0;
		right: 0;
		left: -23%;
		margin: 4px 10px;
		z-index: 0;
	}
	.index .menuBlock a .txt {
		display: flex;
		justify-content: center;
		flex-direction: column;
		position: relative;
		top: 0;
		bottom: 0px;
		right: auto;
		left: 18%;
		width: 77.3%;
		height: 100%;
		margin: 0 !important;
		padding: 0;
		font-size: 1rem;
		font-weight: bold;
		text-align: center;
	}
	.index .menuBlock span.txt-note {
		font-size: .8125rem;
		font-weight: normal;
	}
	.index .menuBlock ul li a img {
		position: relative;
		display: block;
		margin: 10px auto 6px;
		width: 32px;
		height: 32px;
		text-align: center;
	}
	.index .menuBlock li:after {
		content: '';
		position: absolute;
		width: calc(100% - 20px);
		height: auto;
		bottom: 5%;
		border-bottom: 2px solid #006385;
		margin: 0 10px;
	}
	.index .menuBlock a:hover::after {
		content: '';
		position: absolute;
		width: calc(100% - 20px);
		height: auto;
		bottom: 5%;
		border-bottom: 2px solid #ffffff;
		margin: 0 10px;
		z-index: 99;
	}
	.index .menuBlock a:focus::after {
		content: '';
		position: absolute;
		width: calc(100% - 20px);
		height: auto;
		bottom: 5%;
		border-bottom: 2px solid #ffffff;
		margin: 0 10px;
		z-index: 99;
	}
	
	/*------------------------------
	topicsBlock 
	------------------------------*/
	.index .topicsBlock {
		position: relative;
		width: auto;
		height: auto;
		padding: 0px;
		margin: 0 0px 0;
	}
	.index .topicsBlock h2 {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #004697;
		height: 40px;
		color: #ffffff;
		border: none;
		letter-spacing: 3.2px;
	}
	.index .topicsBlock ul, .index .topicsBlock li {
		margin: 0;
		padding: 0;
		list-style-type: none;
	}
	.index .topicsBlock ul {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 100%;
		margin: 0px auto !important;
	}
	.index .topicsBlock ul li {
		display: block;
		vertical-align: middle;
		position: relative;
		width: calc(100% - 30px);
		height: 67px;
		margin: 0px 15px 10px !important;
		background-color: #ffffff;
		border-radius: 4px;
		box-shadow : 0px 0px 4px rgba(51, 51, 51, 0.5);
	}
	.index .topicsBlock ul li:nth-child(even) {
		position: relative;
		width: calc(100% - 30px);
		height: 67px;
		margin: 0px 15px 10px !important;
		background-color: #ffffff;
		border-radius: 4px;
	}
	.index .topicsBlock li div {
		width: 50%;
	}
	.index .topicsBlock li .txt {
		font-size: 1.2em;
	}
	.index .topicsBlock li span {

	}
	.index .topicsBlock li .topic-img {
		position: relative;
	}
	.index .topicsBlock li a {
		position: absolute;
		display: flex;
		display: -ms-flexbox; /* IE10 */
		display: -webkit-box; /* Android4.3以下、Safari3.1～6.0 */
		display: -webkit-flex; /* Safari6.1以降 */
		align-items: center;
		height: 100%;
		width: 100%;
		vertical-align: middle;
	}

	.index #mainConts-col2 {
		width: auto;
		padding: 0px;
		margin: 28px 15px 39px;
		overflow: hidden;
	}
	
	/*------------------------------
	top_newsblock
	------------------------------*/	
	.index .h2Block {
	}
	.index .top-newslist li div {
		display: block;
		width: 100%;
	}
	.index .top-newslist li .news-txt {
		margin-left: 0;
		width: auto;
	}
	.index #contentsArea #subContentsBlock {
		overflow: hidden;
		zoom: 1;
	}
	.index #contentsArea #subContentsBlock .sideSection {
		width: 100%;
		margin: 0 !important;
	}
	.index #contentsArea #subContentsBlock .sideSection:nth-child(odd) {
		float: none;
	}
	.index #contentsArea #subContentsBlock .sideSection:nth-child(even) {
		float: none;
	}
	
	.index #contentsArea #subContentsBlock .sideSection .snslink br {
		display: none;
	}
	.index #contentsArea #subContentsBlock .sideSection .snslink .top-sns {
		margin-left: 8px;
	}
	/*-----------------------------------------------------
	h2Block
	-------------------------------------------------------*/
	.index #contentsFoot {
		width: auto;
		clear: both;
		padding: 0 15px;
		margin: 0 auto 20px;
	}
	.index .siteBlock {
	}
	.index .siteBlock .siteList {
	}
	.index .siteBlock .siteList li {
		position: relative;
		width: calc(50% - 7px);
		margin: 2px 6px 7px 0 !important;
		padding: 0px;
	}
	.index .siteBlock .siteList li:nth-child(even) {
		position: relative;
		width: calc(50% - 7px);
		margin: 2px 0px 7px 0 !important;
		padding: 0px;
	}
}

/************************************************************************************
smaller than 520 TB
*************************************************************************************/
@media screen and (max-width: 520px) {
	/*------------------------------
	bannerList 
	------------------------------*/

	.index #contentsArea #subContentsBlock .sideSection ul.bannerList {
		text-align: center;
		width: auto;
		padding-top: 0;
		padding-bottom: 0;
		overflow: hidden;
		zoom: 1;
	}
	.index #contentsArea #subContentsBlock .sideSection ul.bannerList li {
		list-style-type: none;
		padding-top: 0;
		padding-bottom: 15px;
		float: none;
		width: auto;
		display: block;
	}
}

/************************************************************************************
smaller than 480 SP
*************************************************************************************/
@media screen and (max-width: 480px) {
	/*------------------------------
	bannerList 
	------------------------------*/
	.index #contentsArea #subContentsBlock .sideSection ul.bannerList li img {
		width: auto;
		height: auto;
	}
}

/************************************************************************************
smaller than 426 SP
*************************************************************************************/
@media screen and (max-width: 426px) {
	.index .siteBlock, .index #subContentsBlock .siteBlock {
		width: 100%;
	}
	.index .siteList, .index #subContentsBlock .siteList {
		width: 100%;
		margin-left: -1% !important;
		margin-right: -1% !important;
	}
}

/************************************************************************************
smaller than 414 SP
*************************************************************************************/
@media screen and (max-width: 414px) {
	div.index .siteBlock .siteList li {
		width: 100%;
		margin: 0 0 16px !important;
	}
	div.index .siteBlock .siteList li:nth-child(even) {
		width: 100%;
		margin: 0 0 16px !important;
	}
}

/************************************************************************************
smaller than 360 SP
*************************************************************************************/
@media screen and (max-width: 360px) {
	/*------------------------------
	bannerList 
	------------------------------*/
	.index #contentsArea #subContentsBlock .sideSection ul.bannerList li img {
		width: 100%;
		height: auto;
	}
}