@charset "utf-8";

/**************************************************
		PC
**************************************************/
body {
	min-width:initial;
	min-width:auto;
}


/* ===== Header ===== */
#headerArea {
	background-color:transparent;
}

#headerArea.clone {
	display:none;
}

#headerArea:before {
	width:540px;
	height:780px;
	background-image:url("../img/top/bg_header.png?20200420");
}

#headerArea .logo01 {
	top:130px;
	left:40px;
}

#headerArea .logo01 a {
	width:200px;
	height:116px;
}

#headerArea .logo02 {
	top:30px;
	left:30px;
	right:auto;
}

#headerArea .logo02 a {
	width:220px;
	background-image:url("../img/common/logo_konan-wu_white.png?20200420");
}

#headerMenu {
	position:absolute;
	top:280px;
	left:40px;
	padding:0;
	z-index:20;
}

#headerMenu li {
	float:right;
	padding:0 10px;
}

#headerMenu li a {
	display:block;
	width:20px;
	height:200px;
	background:transparent none 50% 0 no-repeat;
	background-size:contain;
	text-indent:-99999px;
	overflow:hidden;
}

#headerMenu li a:hover { opacity:0.7; }

#headerMenu li.btNisshi a { background-image:url("../img/top/bt_nisshi.png"); }
#headerMenu li.btAdmission a { background-image:url("../img/top/bt_admission.png"); }
#headerMenu li.btInternational a { background-image:url("../img/top/bt_international.png?20210205"); }
#headerMenu li.btCareer a { background-image:url("../img/top/bt_career.png?20210205"); }


/* ===== Footer ===== */
#footerArea {
	margin-top:-70px;
	border-bottom:0;
	height:240px;
	background-color:transparent;
	background-image:url("../img/top/bg_footer.png");
}

#footerMenu {
	display:none;
}

#footerArea .logo {
	display:none;
}


/* ===== Main ===== */
#mainArea {
	padding:85px 0 0 0;
	width:960px;
}

@media screen and (max-width:1530px){
#mainArea { margin:0 300px; }
}

@media screen and (max-width:1280px){
#mainArea { width:720px; }
}

@media screen and (max-width:1030px){
#mainArea { width:480px; }
}

#mainArea .logo {
	display:block;
	position:absolute;
	visibility:hidden;
}

#mainArea .listBlog {
	font-weight:bold;
}

#mainArea .listBlog li {
	float:left;
	padding:15px;
	width:240px;
	line-height:1.4;
}

#mainArea .listBlog .gridItemSize {
	display:block !important;
	position:absolute !important;
	padding:0 !important;
	width:240px;
	opacity:0 !important;
	z-index:-1;
}

#mainArea .listBlog li.admission { clear:both; }

#mainArea .listBlog li a {
	display:block;
	border-radius:15px;
	background:#fff;
	color:#333;
	text-align:center;
	text-decoration:none;
	box-shadow:0 0 35px rgba(0,0,0,0.2);
	overflow:hidden;
}

#mainArea .listBlog li .text {
	display:table-cell;
	width:210px;
	height:90px;
	vertical-align:middle;
}

#mainArea .listBlog li .faculty {
	display:block;
	margin-bottom:5px;
	font-size:13px;
	font-size:0.82rem;
	color:#999;
}

#mainArea .listBlog li .department {
	display:block;
	font-size:18px;
	font-size:1.13rem;
	color:#932536;
}

#mainArea .listBlog li.japanese .department { color:#924994; }
#mainArea .listBlog li.english .department { color:#e46022; }
#mainArea .listBlog li.multiculture .department { font-size:16px; font-size:1rem; color:#008ccf; }
#mainArea .listBlog li.media .department { color:#e13831; }
#mainArea .listBlog li.psychology .department { color:#80ba41; }
#mainArea .listBlog li.childhood .department { color:#e77722; }
#mainArea .listBlog li.sociology .department { color:#df593c; }
#mainArea .listBlog li.environments .department { color:#e05f76; }
#mainArea .listBlog li.nursing .department { color:#df6b8e; }
#mainArea .listBlog li.pt .department { color:#00a78d; }
#mainArea .listBlog li.cnad .department { color:#00aecc; }

#mainArea .listBlog li .image {
	display:block;
	position:relative;
}

#mainArea .listBlog li .more {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(150,45,61,0.6);
	font-size:13px;
	font-size:0.82rem;
	font-weight:normal;
	color:#fff;
	letter-spacing:0.1em;
	text-align:center;
	opacity:0;
}

#mainArea .listBlog li .more span {
	display:inline-block;
	margin-top:45px;
	padding:3px 10px;
	border:1px solid #fff;
}

#mainArea .listBlog li a:hover .more { opacity:1; }


/**************************************************
		SP
**************************************************/
@media screen and (max-width:767px){

/* ===== Header ===== */
#headerArea {
	top:-50px;
	opacity:0;
	visibility:hidden;
	transition:top 0.3s, opacity 0.3s, visibility 0.3s;
}

#headerArea:before {
	display:none;
}

#headerArea.visible { top:0; opacity:1; visibility:visible; }

#headerArea .logo01 {
	top:9px;
	left:15px;
}

#headerArea .logo01 a {
	width:100%;
	height:auto;
}

#headerArea.clone {
	display:block;
	position:absolute;
	top:0;
	height:170px;
	background-image:url("../img/top/bg_header_sp.png");
	opacity:1;
	visibility:visible;
	transition:none;
}

#headerArea.clone .logo01 {
	top:20px;
	left:15px;
	width:130px;
}

#headerArea.clone .logo01 a {
	display:block;
	width:130px;
	height:75px;
	background:transparent url("../img/common/logo_blog_01.png") 50% 50% no-repeat;
	background-size:contain;
	text-indent:-99999px;
	overflow:hidden;
}

#headerArea.clone .logo02 {
	display:block;
	position:absolute;
	top:13px;
	left:auto;
	right:15px;
	width:140px;
}

#headerArea.clone .logo02 a {
	width:auto;
	background-image:none;
}

#headerArea.clone #menuOpen {
	top:50px;
	right:30px;
}


/* ===== Footer ===== */
#footerArea {
	margin-top:0;
	height:90px;
	background-image:url("../img/common/bg_footer_sp.png");
}

#footerArea .logo {
	display:block;
}


/* ===== Main ===== */
#mainArea {
	margin:0;
	padding:170px 0 60px 0;
	width:auto;
}

#mainArea .listBlog {
	margin:0 8px;
}

#mainArea .listBlog li {
	padding:7px;
	width:50%;
}

#mainArea .listBlog .gridItemSize { width:50%; }

#mainArea .listBlog li a {
	border-radius:7px;
	box-shadow:0 0 17px rgba(0,0,0,0.2);
}

#mainArea .listBlog li .text {
	width:300px;
	height:70px;
}

#mainArea .listBlog li .faculty {
	margin-bottom:3px;
	font-size:10px;
	font-size:0.63rem;
}

#mainArea .listBlog li .department {
	font-size:14px;
	font-size:0.88rem;
}

#mainArea .listBlog li.multiculture .department { font-size:13px; font-size:0.75rem; }

#mainArea .listBlog li a:hover .more { opacity:0; }

}