@charset "utf-8";

/* Event(Blue Back)
----------------------------------- */
#main_event_area {
	height:336px;
	background:#1C4FA1;
}
#main_event_area .contents {
	height:336px;
	padding:18px 0;
	overflow:hidden;
}

/* Kikaku */
#main_event_area .kikakuten {
	width:655px;
	height:300px;
	float:left;
	position:relative;
	background:#FFF;
}
.kikakuten figure {
	width:220px;
	height:300px;
	position:absolute;
	top:0;
	left:0;
}
.kikakuten figure img {
	max-width:220px;
	max-height:300px;
	width:auto;
	height:auto;
}
#kikaku_naiyou {
	padding-left:230px;
}
#kikaku_naiyou a {
	color:#333;
}
#kikaku_naiyou .mds {
	padding:20px 0 5px 0;
	border-bottom:1px solid #1C4FA1;
}
#kikaku_naiyou .title {
	margin:20px 0;
	padding-right:10px;
	font-size:24px;
	font-size:1.84rem;
	font-weight:bold;
}
#kikaku_naiyou .title .title_s {
	font-size:18px;
	font-size:1.38rem;
	font-weight:bold;
}
#kikaku_naiyou .date,
#kikaku_naiyou .dtl {
	margin:20px 0;
	font-size:16px;
	font-size:1.23rem;
}
#kikaku_naiyou .dtl:before {
	color:#1C4FA1;
	font-family: Flaticon;
	font-size: 12px;
	font-style: normal;
	margin:0 2px 0 0;
	content: "\e007";
}
/*  ---- ※企画展の追記 --- */
.kikaku-special {
	padding-left:230px;
/*	font-size:20px !important;*/
}

/* Jousetsu */
#main_event_area .jousetsu_nav {
	width:280px;
	float:right;
}
#main_event_area .jousetsu_nav a {
	width:280px;
	height:140px;
	background:#FFF;
	position:relative;
}
#main_event_area .jousetsu_nav a:after {
	display:block;
	position:absolute;
	top:4px;
	left:4px;
	width:272px;
	height:132px;
	content:"";
	transition:0.3s ease-in;
	border:2px solid #FFF;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	opacity:0;
}
#main_event_area .jousetsu_nav a:hover:after {
	opacity:1;
}
#main_event_area .jousetsu_nav .iseki {
	margin-top:19px;
}

/* Caution
------------------------------------------ */
#caution {
	margin:20px auto;
}
#caution p {
	margin:0;
	padding:15px 10px;
	color:#000;
	background:#FFFF00;
	font-size:14px;
	font-size:1.07rem;
}

/* Illust Menu
------------------------------------------- */
#illust_menu .menu_ttl {
	margin:20px 0 0 0;
	font-size:22px;
	font-size:1.69rem;
	font-weight:bold;
	position:relative;
}
#illust_menu .menu_ttl > span {
	font-size:18px;
	font-size:-webkit-calc(1em - 4px);
	font-size:calc(1em - 4px);
}
.menu_ttl:before {
	font-family: Flaticon;
	font-size: 20px;
	font-style: normal;
	margin-right: 10px;
	content: "\e004";
}
.menu_ttl.koudou:before {color:#1C4FA1;}
.menu_ttl.taisyou:before {color:#A12B1B;}

/* News Area
------------------------------------------- */
#news_area {
	margin:20px auto 40px auto;
	overflow:hidden;
	position:relative;
	z-index:1;
}
#news_area .mds {
	margin:0;
	padding-bottom:5px;
	color:#000;
	font-size:18px;
	font-size:1.38rem;
	border-bottom:2px solid #9197A1;
	position:relative;
}

/* banner */
#bnr_area {
	width:245px;
	float:left;
	margin-right:20px;
	list-style:none;
}
#bnr_area li {
	margin:0 0 15px 0;
}

/* Twitter */
#twitter {
	width:285px;
	float:right;
}
#news_area .mds .flaticon-twitter {
	position:absolute;
	right:10px;
	color:#0046BD;
	transition:.8s;
transform-origin:70% 50%;
}
#news_area .mds .flaticon-twitter:hover {
	color:#005CF7;
	text-decoration:none;
	transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
}



/* For SmartPhone
--------------------------------------------- */
@media screen and (max-width:640px){

	#main_event_area {
		width:100%;
		height:auto;
	}
	#main_event_area .contents {
		width:98%;
		height:auto;
		margin:0 auto;
		padding:1rem 0;
	}

	/* Kikaku */
	#main_event_area .kikakuten {
		display:flex;
		flex-wrap:wrap;
		width:98%;
		height:auto;
		float:none;
		margin:0 auto;
	}
	.kikakuten figure {
		width:37%;
		height:100%;
		position:relative;
	}
	.kikakuten figure img {
		max-width:10rem;
		max-height:20rem;
	}
	#kikaku_naiyou {
		width:63%;
		height:auto;
		padding:0 0 0 .5rem;
		vertical-align:top;
		position:relative;
	}
	#kikaku_naiyou .mds {
		padding:.5rem 0 .2rem 0;
	}
	#kikaku_naiyou .mds img {
		width:30%;
		height:auto;
	}
	#kikaku_naiyou .title {
		margin:1rem 0;
		padding-right:.8rem;
		font-size:1.3rem;
		font-weight:bold;
	}
	#kikaku_naiyou .title .title_s {
		font-size:1.2rem;
		font-weight:bold;
	}
	#kikaku_naiyou .date,
	#kikaku_naiyou .dtl {
		margin:1rem 0;
	}

	/*  ---- ※企画展の追記 --- */
	.kikaku-special {
/*		display:block;*/
		width:100%;
		margin:0;
		padding:0;
		font-size:10px !important;
		line-height:1.1 !important;
		background:#EEE;
	}


	/* Jousetsu */
	#main_event_area .jousetsu_nav {
		float:none;
		width:98%;
		margin:1rem auto .5rem auto;
		display:table;
	}
	#main_event_area .jousetsu_nav a {
		width:49%;
		height:auto;
		display:table-cell;
		margin:.5rem;
		background:transparent;
	}
	#main_event_area .jousetsu_nav a:nth-child(1) {
		text-align:left;
	}
	#main_event_area .jousetsu_nav a:nth-child(2) {
		text-align:right;
	}
	#main_event_area .jousetsu_nav a img {
		width:98%;
		height:auto;
	}

	/* Caution */
	#caution {
		width:98%;
		height:auto;
		margin:1rem auto;
		padding:0 .5rem;
		word-wrap: break-word;
		white-space: normal;
	}
	#caution p {
		word-wrap: break-word !important;
		white-space: normal;
	}

	/* illust Menu */
	#illust_menu {
		width:98%;
		margin:0 auto;
	}
	#illust_menu .menu_ttl {
		margin:1rem 0 0 0;
		font-size:1.5rem;
	}
	#illust_menu .menu_ttl > span {
		font-size:1.3rem;
	}

	/* Sub Menu */
	.ill_menu_bg .sub {
		width:auto;
		padding-top:1rem;
		top:6rem;
	}
	.ill_menu_bg .main > li:nth-child(3) .sub,
	.ill_menu_bg .main > li:last-child .sub {
		right:0;
	}

	.ill_menu_bg .main .sub > li a {
		padding:1rem .5rem;
	}
	.ill_menu_bg .main .sub > li a:before {
		margin-right:.3rem;
	}

	/* z-index */
	#illust_menu .menu_ttl {z-index:1;}

	.koudou_btn .main > li:nth-child(1) > a,
	.koudou_btn .main > li:nth-child(2) > a,
	.koudou_btn .main > li:nth-child(3) > a {
		z-index:20;
	}
	.koudou_btn .main > li:nth-child(1) .sub,
	.koudou_btn .main > li:nth-child(2) .sub,
	.koudou_btn .main > li:nth-child(3) .sub {
		z-index:19;
	}
	.koudou_btn .main > li:nth-child(4) > a,
	.koudou_btn .main > li:nth-child(5) > a,
	.koudou_btn .main > li:nth-child(6) > a {
		z-index:18;
	}
	.koudou_btn .main > li:nth-child(4) .sub,
	.koudou_btn .main > li:nth-child(5) .sub,
	.koudou_btn .main > li:nth-child(6) .sub {
		z-index:17;
	}

	.taisyou_btn {
		margin-bottom:7rem; /* 下層メニューの高さ以上を入れる */
	}
	.taisyou_btn .main > li:nth-child(1) > a,
	.taisyou_btn .main > li:nth-child(2) > a,
	.taisyou_btn .main > li:nth-child(3) > a {
		z-index:10;
	}
	.taisyou_btn .main > li:nth-child(1) .sub,
	.taisyou_btn .main > li:nth-child(2) .sub,
	.taisyou_btn .main > li:nth-child(3) .sub {
		z-index:9;
	}
	.taisyou_btn .main > li:nth-child(4) > a,
	.taisyou_btn .main > li:nth-child(5) > a,
	.taisyou_btn .main > li:nth-child(6) > a {
		z-index:8;
	}
	.taisyou_btn .main > li:nth-child(4) .sub,
	.taisyou_btn .main > li:nth-child(5) .sub,
	.taisyou_btn .main > li:nth-child(6) .sub {
		z-index:7;
	}

	/* News */
	#news_area {
		width:98%;
		margin:2rem auto;
	}
	#news_area .mds {
		padding-bottom:.3rem;
		font-size:1.39rem;
	}
	#bnr_area, #oshirase, #twitter {
		width:96%;
		height:auto;
		float:none;
		margin:1rem auto;
	}

	/* banner */
	#bnr_area {
		height:auto;
		overflow:hidden;
		border:1px solid #9197A1;
	}
	#bnr_area li {
		width:50%;
		height: 3.5rem;
		margin:0;
		padding:.5rem .5rem 0 .5rem;
		float:left;
	}
	#bnr_area li img {
		width:auto;
		max-height:2.5rem;
		height:auto;
	}

	/* News */
	#oshirase ul {
		height:15rem;
		border:1px solid #9197A1;
	}
	#oshirase ul li {
		padding:.5rem 1rem;
	}
	#oshirase ul li a {
		margin-top:.5rem;
	}
	#news_area .endline {
		padding-top:1rem;
	}

	/* Twitter */
	#twitter {
		width: 92%;
		margin: 0 auto;
	}
	.twitter-timeline {
		height:15rem;
	}
}