@charset "UTF-8";

#eyecatch {
	position: relative;
	background: url(../img/webmagazine/webmagazine_h1_bg.jpg) no-repeat right 0 #3C8ECC;
}

#eyecatch h1 {
	position: absolute;
	top: 25px;
	left: 20px;
	padding-left: 40px;
	background: url(../img/common/icon_spread.jpg) no-repeat left center;
}




/*=======================================================
一覧ページ
=======================================================*/

#main-area h2.backnumber {
	font-family: 'Fjalla One', sans-serif;
	color: #29435E;
	font-size: 210%;
	margin: 0 0 .5em 0;
}

#main-area ul.tab-nav {
	margin-bottom: 30px;
	border-top: solid 2px #DEDEDE;
	background: url(../img/webmagazine/tab_bg.gif) repeat-x 0 bottom #F8F8F8;
}

#main-area ul.tab-nav li {
	position: relative;
	float: left;
	text-align: center;
}

#main-area ul.tab-nav li a {
	display: block;
	width: 40px;
	padding: 0.3em 0;
	border-right: dotted 1px #DEDEDE;
	border-bottom: solid 1px #DEDEDE;
	font-style: 125%;
	font-weight: bold;
	font-size: 85%;
	font-family: 'Fjalla One', sans-serif;
}

#main-area ul.tab-nav li.select a {
	border-bottom: solid 1px #FFF;
	background: #FFF;
	color: #000;
}

#main-area article.item {
	position: relative;
	float: left;
	width: 180px;
	padding: 0 0 0 170px;
	margin: 0 15px 0 0;
}

#main-area article.item p {
	margin: 0.7em 0;
	font-size: 91%;
}

#main-area article.item p.venue {
	font-size: 91%;
}

#main-area article.item h3 {
	border-bottom: dotted 1px #CCC;
	line-height: 1.3;
	font-size: 116%;
	font-weight: bold;
}

#main-area article.item h3 a {
	text-decoration: none;
}

#main-area article.item p.catchcopy {
	margin: 0.7em 0;
	font-size: 91%;
}

#main-area article.item p {
}

#main-area article.item a.thumbnail {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	border: solid 1px #CCC;
}

/*=======================================================
レイアウト
=======================================================*/

#article-column {
	width: 460px;
	padding-right: 18px;
	border-right: solid 1px #E0E0E0;
}

#secondary-column {
	width: 231px;
}


/*=======================================================
コンテンツヘッダ
=======================================================*/

#main-area header {
	position: relative;
	min-height: 230px;
	margin-bottom: 10px;
	padding: 20px 20px 20px 365px;
	background: #FCFAF3;
	border: solid 1px #CCC;
}

#main-area header p.venue {
	font-size: 91%;
	line-height: 1;
	vertical-align: middle;
}

#main-area header h2 {
	margin-bottom: 0.5em;
	color: #333;
	font-size: 150%;
	font-weight: bold;
}

#main-area header p.catchcopy {
	font-size: 91%;
	margin-bottom: 0.5em;
	font-weight: bold;
	line-height: 1.4;
}

#main-area header dl.credit {
	margin: 1em 0;
	line-height: 1.5;
	font-size: 91%;
}

#main-area header dl.credit dt {
	width: 11em;
	padding: 0.5em 0;
	float: left;
	clear: left;
}

#main-area header dl.credit dt:after {
	content: "：";
}

#main-area header dl.credit dd {
	padding: .5em 0 .5em 11em;
	border-top: dotted 1px #CCC;
}

#main-area header a.pdf-dl {
	position: relative;
	left: -7px;
	display: block;
}

#main-area header a.pdf-dl:hover {
	background: url(../img/webmagazine/pdf_dl_btn_on.jpg) no-repeat 0 0;
}


#main-area header a.pdf-dl.close {
	background: url(../img/webmagazine/pdf_dl_btn_close.jpg) no-repeat 0 0;
}

#main-area header .post-thumb {
	position: absolute;
	top: 20px;
	left: 20px;
}

#main-area header .post-thumb img {
	max-width: 325px;
	height: auto;
	border: solid 1px #CCC;
	box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
	-ms-box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
}

/* #main-area header .getshare {
	width: 46%;
} */

#main-area header .getshare .getshare-button {
	padding: 1em 5px;
}


/*=======================================================
本文
=======================================================*/

#entry .entry-body {
	line-height: 1.8;
}

#entry .entry-body > h3 {
	color: #333;
	line-height: 1.5;
}

#entry .entry-body > h3:first-child {
	margin-top: 0;
}



/*=======================================================
右カラム
=======================================================*/

#main-area #secondary-column h2 {
	margin: 1.5em 0 0.5em 0;
	padding: 0;
	border: none;
	color: #3C8ECC;
	font-size: 15px;
}

#secondary-column .photo-gallery li {
	float: left;
	margin: 0 7px 7px 0;
}

#secondary-column .wm-aside {
	width: 224px;
	margin-bottom: 1em;
	padding-bottom: 1em;
	border-bottom: dotted 1px #CCC;
}

#secondary-column .wm-aside dl {
	margin: 0.7em 0;
}

#secondary-column .wm-aside dt {
	color: #333;
	border-bottom: dotted 1px #CCC;
	font-size: 108%;
	font-weight: bold;
}

#secondary-column .wm-aside .url {
	border-bottom: dotted 1px #CCC;
	font-size: 91%;
	word-wrap: break-word;
}



/*=======================================================
ページ特別企画用
=======================================================*/

#binoyakata-formlead {
	padding-right: 280px;
	min-height: 275px;
	background: url(../img/webmagazine/sp/binoyakata/beauty-img.jpg) no-repeat right bottom;
}

#binoyakata-form {
	width: 460px;
	overflow: hidden;
	font-size: 93%;
}

#binoyakata-form h3 {
	margin: 1em 0 .5em;
	color: #2F4A01;
}

#binoyakata-form .wpcf7-list-item {
	margin-bottom: .5em;
	padding-bottom: .5em;
	display: block;
	border-bottom: dotted 1px #E0D3B9;
}

#binoyakata-form th, #binoyakata-form td {
	border: solid 1px #FFFFFF;
	padding: .7em;
}

#binoyakata-form th {
	width: 8em;
	vertical-align: middle;
	background: #E0D3B9;
	color: #4E422F;
	font-weight: bold;
}

#binoyakata-form td {
	background: #F3EADA;
}

#btn-send {
	text-align: center;
}


@media screen and (max-width: 1024px) {
}

@media screen and (max-width: 720px) {
}

@media screen and (max-width: 640px) {
	#mags {
		width: 100%;
	}

	#article-column {
		width: 100%;
		padding-right: 0;
	}

	#secondary-column {
		width: 100%;
	}

	#secondary-column .wm-aside {
		width: 100%;
	}

	#main-area article.item a.thumbnail {
		position: inherit;
		border: none;
	}

	#main-area article.item {
		position: relative;
		float: none;
		width: 100%;
		padding: 0;
		margin: 0;
	}

	#main-area header {
		padding-left: 0;
		padding-right: 0;
		border: none;
		background: none;
	}

	#main-area header .post-thumb {
		position: inherit;
		top: 0;
		left: 0;
		margin-top: 2em;
		text-align: center;
	}

	#main-area header .post-thumb img {
		width: 100%;
		height: auto;
	}

	#main-area header a.pdf-dl {
		position: static;
		top: 0;
		left: 0;
		text-align: center;
	}

	#main-area header a.pdf-dl img {
		width: 100%;
		height: auto;
	}

	#main-area header a.pdf-dl:hover {
		background-position: center center;
	}
}