@charset "utf-8";

/* ---------------------------------------- 
 - #contents
---------------------------------------- */
#contents #contentsCol {
	overflow:hidden;
}
#contents #contentsCol > .ttl {
	position:relative;
	width:196px;
	margin:30px auto;
}
#contents #contentsCol > .ttl .illust_01 {
	width:80px;
	position:absolute;
	top:-15px;
	left:-100px;
}
#contents #contentsCol > .ttl .illust_02 {
	width:44px;
	position:absolute;
	top:-10px;
	right:-50px;
}
@media screen and (max-width: 767px) {
#contents #contentsCol > .ttl {
	width:40%;
	max-width:196px;
	margin:1.5em auto 0;
}
#contents #contentsCol > .ttl .illust_01 {
	width:35%;
	max-width:80px;
	position:absolute;
	top:-10px;
	left:-40%;
}
#contents #contentsCol > .ttl .illust_02 {
	width:25%;
	max-width:44px;
	position:absolute;
	top:-15px;
	right:-28%;
}
}

/* ---------------------------------------- 
 - #main
---------------------------------------- */
#contents #main {
	width:800px;
	margin:40px auto 0;
	overflow:hidden;
	float:right;
	background:#fff;
}
@media screen and (max-width: 767px) {
#contents #main {
	width:100%;
	float:none;
	margin:2.5em auto 0;
}
}

/* dateBox */
#contents #main #dateBox {
	overflow:hidden;
	text-align:right;
	border-bottom:solid 2px #f4563c;
	padding:10px;
}
#contents #main #dateBox .date {
	font-size:13px;
	display:inline-block;
	padding:0 10px;
	vertical-align: middle;
}
#contents #main #dateBox .ico {
	font-size:12px;
	display:inline-block;
	background:#f4563c;
	color:#fff;
	padding:2px 10px;
	border-radius: 20px;
	vertical-align: middle;
}
#contents #main #dateBox .ico.news {
	background:#f4563c;
}
#contents #main #dateBox .ico.magazine {
	background:#9061a1;
}
@media screen and (max-width: 767px) {
#contents #main #dateBox {
	padding:0.5em 3%;
}
#contents #main #dateBox .date {
	font-size:12px;
	padding:0 3%;
}
#contents #main #dateBox .ico {
	font-size:11px;
}
}

/* mainBox */
#contents #main #mainBox {
	padding:35px 50px;
}
#contents #main #mainBox > .ttl {
	text-align:center;
	font-size:18px;
	font-weight:bold;
	padding:0 0 35px;
}
#contents #main #mainBox .mainImg {
	width:45%;
	padding:0 0 25px;
	margin:0 auto;
}
#contents #main #mainBox .kiji .txt {
	padding:0 0 25px;
}
#contents #main #mainBox .kiji ul.list {
	text-indent: -1.0em;
	margin-left: 1.0em;	
	padding:0 0 1.5em;
}
#contents #main #mainBox .kiji ul.list li {
	padding:0 0 0.3em;	
}
#contents #main #mainBox .kiji dl.chart {
	display: -webkit-box;
    display: flex;
}
#contents #main #mainBox .kiji dl.chart dt {
	font-weight: bold;
	padding-bottom: 0.5em;
	white-space: nowrap;
}
#contents #main #mainBox .kiji dl.chart dd {
	padding-bottom: 0.5em;
}
#contents #main #mainBox .kiji .phtBox {
	padding:0 0 25px;
	margin:0 auto;
	text-align:center;
}
#contents #main #mainBox .kiji .phtBox .pht .caption {
	margin-top: 0.5em;
	font-size: 13px;
	display: block;
}
#contents #main #mainBox .kiji .phtBox.flex {
	justify-content: center;
}
#contents #main #mainBox .kiji .phtBox.flex p {
	margin-left:28px;
	width:80%;
	max-width: 300px;
}
#contents #main #mainBox .kiji .phtBox.flex p:nth-child(1) {
	margin-left:0;
}
@media screen and (max-width: 767px) {
	#contents #main #mainBox {
		padding:1.5em 2%;
	}
	#contents #main #mainBox > .ttl {
		font-size:14px;
		padding:0 0 1.5em;
	}
	#contents #main #mainBox .mainImg {
		width:45%;
		padding:0 0 1.5em;
	}
	#contents #main #mainBox .kiji .txt {
		padding:0 0 1.5em;
	}
	#contents #main #mainBox .kiji dl.chart {
		display: block;
	}
	#contents #main #mainBox .kiji dl.chart dt {
		padding-bottom: 0.3em;
	}
	#contents #main #mainBox .kiji dl.chart dd {
		padding-bottom: 1.0em;
	}
	#contents #main #mainBox .kiji .phtBox {
		padding:0 0 1.5em;
		display:block;
		width:70%;
	}
	#contents #main #mainBox .kiji .phtBox p {
		padding:1.5em 0 0 0;
		width:100%;
		max-width:100%;
		margin:0 auto;
	}
	#contents #main #mainBox .kiji .phtBox p:nth-child(1) {
		padding:0;
	}
	#contents #main #mainBox .kiji .phtBox.flex p {
		margin-left:auto;
		width:100%;
	}
	#contents #main #mainBox .kiji .phtBox.flex p:nth-child(1) {
		margin-left:auto;
	}
}
@media screen and (max-width: 480px) {
#contents #main #mainBox .mainImg {
	width:60%;
}
#contents #main #mainBox .kiji .phtBox {
	width:80%;
}
}

/* magazine */
#contents #main #mainBox .magazine .phtBox {
	/*max-width:460px;*/
}
#contents #main #mainBox .magazine .phtBox p.pht {
	width:216px;
	margin-left: 26px;
}
#contents #main #mainBox .magazine .phtBox p:nth-child(1) {
	margin-left:0;
}
@media screen and (max-width: 767px) {
#contents #main #mainBox .magazine .phtBox {
	width:70%;
}
#contents #main #mainBox .magazine .phtBox p.pht {
	width:100%;
	max-width:100%;
	margin:0 auto;
}
#contents #main #mainBox .magazine .phtBox p:nth-child(1) {
	padding:0 0 0 0;
}
}
@media screen and (max-width: 480px) {
#contents #main #mainBox .magazine .phtBox {
	width:80%;
}
}

/* ---------------------------------------- 
 - #side
---------------------------------------- */
#contents #side {
	width:250px;
	margin:40px auto 0;
	overflow:hidden;
	float:left;
}
#contents #side .sideMenu h3 {
	font-size:16px;
	color:#fd4f33;
	font-weight:bold;
	border-bottom:solid 1px #fd4f33;
	padding:0 0 5px;
}
#contents #side .sideMenu ul li {
	border-bottom:solid 1px #cfcfcf;
	padding:10px 0;
}
#contents #side .sideMenu ul li a {
	text-decoration:none;
}
#contents #side .sideMenu ul li .datebox {
	overflow:hidden;
}
#contents #side .sideMenu ul li .datebox .date {
	display:inline-block;
	font-size:12px;
	color:#000;
	text-decoration:none;
}
#contents #side .sideMenu ul li .datebox .ico {
	font-size:10px;
	display:inline-block;
	background:#f4563c;
	color:#fff;
	padding:2px 10px;
	border-radius: 20px;
	float:right;
	margin:3px auto 0;
	text-decoration:none;
}
#contents #side .sideMenu ul li .datebox .ico.news {
	background:#f4563c;
}
#contents #side .sideMenu ul li .datebox .ico.experience {
	background:#9061a1;
}
#contents #side .sideMenu ul li .txt {
	font-size:13px;
	color:#000;
	text-decoration:none;
}
#contents #side .sideMenu ul li a:hover .txt {
	text-decoration:underline;
}
@media screen and (max-width: 767px) {
#contents #side {
	width:96%;
	float:none;
	margin:2.5em auto;
}
#contents #side .sideMenu h3 {
	font-size:14px;
	padding:0 0 0.25em;
}
#contents #side .sideMenu ul li {
	padding:0.5em 0;
}
#contents #side .sideMenu ul li .datebox {
	padding:0 0 0.25em;
}
#contents #side .sideMenu ul li .datebox .date {
	font-size:11px;
}
#contents #side .sideMenu ul li .txt {
	font-size:12px;
}
}