@charset "utf-8";

/*

  ミリブロ(PC版)ポータル - 共用スタイルシート

*/

/* /////////////////////////////////////////////////////////////

	ベーススタイル

///////////////////////////////////////////////////////////// */

/* ----------------------------------------------------------
	0. リセット & 追加要素の設定
------------------------------------------------------------- */
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p, blockquote, pre, code, form, fieldset, legend, table, th, td, caption, a, article, aside, nav, section, figure, figcaption, footer, header, main, audio, canvas, video, menu, details {
	margin: 0;
	padding: 0;
	background: transparent;
	font-size: 100%;
	vertical-align: baseline;
}
fieldset, legend, img { border: 0; }
article, aside, nav, section, figure, figcaption, footer, header, main, menu, details { display: block; }
video, audio, canvas {
	display: inline-block;
	*display: inline;
	*zoom: 1;
}
audio:not([controls]) { display: none; }
[hidden] { display: none; }


/* ----------------------------------------------------------
	1. ベース
------------------------------------------------------------- */
html {
	overflow-y: scroll;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
body {
	background: #DAC5AA;
	color: #333;
	font: 87.5%/1.4 Helvetica , "游ゴシック" , "Yu Gothic", 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, 'メイリオ', 'Meiryo', 'MS UI Gothic', sans-serif;
	word-wrap: break-word;
}


/* ----------------------------------------------------------
	2. ブロック要素
------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { font-weight: bold; }
ul { list-style: none; }
ol { list-style: decimal inside; }
hr {
	display: block;
	height: 1px;
	margin: 1em 0;
	padding: 0;
	border: 0;
	border-top: 1px solid #ccc;
}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
pre {
	font-family: monospace, serif;
	white-space: pre-wrap;
	word-wrap: break-word;
}


/* ----------------------------------------------------------
	3. インライン要素
------------------------------------------------------------- */
a { color: #287FB8; }
a:link { text-decoration: none; }
a:visited { color: #8E44AD; text-decoration: none; }
a:focus { outline: thin dotted; }
a:hover, a:active { text-decoration: underline; }
img { vertical-align: middle; }


/* ----------------------------------------------------------
	4. テキスト
------------------------------------------------------------- */
address, cite, em, dfn, i, var { font-style: normal; }
strong, b { font-weight: bold; }
code, samp, kbd { font-family: monospace, sans-serif; }
abbr {
	border: 0;
	font-variant: normal;
}
abbr[title], dfn[title] {
	border-bottom: 1px dotted;
	cursor: help;
}
sup { vertical-align: text-top; }
sub { vertical-align: text-bottom; }
del { text-decoration: line-through; }
mark {
	background-color: #ff0;
	color: #333;
	font-style: italic;
	font-weight: bold;
}
br { *letter-spacing: 0; }


/* ----------------------------------------------------------
	5. テーブル
------------------------------------------------------------- */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th, td {
	font-weight: normal;
	text-align: left;
}


/* ----------------------------------------------------------
	6. フォーム部品
------------------------------------------------------------- */
input, textarea, select {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	*font-size: 100%;
}
input, button {
	line-height: normal;
	vertical-align: middle;
}
textarea {
	overflow: auto;
	vertical-align: top;
}
select {
	background-color: inherit;
	line-height: normal;
}
label { cursor: pointer; }
legend {
	color: #333;
	*margin-left: -7px;
}


/* ----------------------------------------------------------
	7. 汎用セレクタ
------------------------------------------------------------- */
.w100 { width: 100px !important; }
.w120 { width: 120px !important; }
.w200 { width: 200px !important; }
.w300 { width: 300px !important; }
.w400 { width: 400px !important; }
.m0 { margin: 0 !important; }
.mt5 { margin-top: 5px !important; }
.mt10 { margin-top: 10px !important; }
.mt15 { margin-top: 15px !important; }
.mt20 { margin-top: 20px !important; }
.mt25 { margin-top: 25px !important; }
.mt30 { margin-top: 30px !important; }
.mb5 { margin-bottom: 5px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb15 { margin-bottom: 15px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb25 { margin-bottom: 25px !important; }
.mb30 { margin-bottom: 30px !important; }
.mr10 { margin-right: 10px !important; }
.p0 { padding: 0 !important; }
.b0 { border: 0 !important; }
.tal { text-align: left !important; }
.tac { text-align: center !important; }
.tar { text-align: right !important; }
.fl {
	float: left !important;
	width: auto;
}
.fr {
	float: right !important;
	width: auto;
}
.clear { clear: both; }
.clearfix:before, .clearfix:after {
	content: " ";
	display: table;
}
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
.cf::before, .cf::after {
    content: "";
    display: table;
}
.cf::after {
    clear: both;
}
.cf::before, .cf::after {
    content: "";
    display: table;
}
.cf {
}

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}
.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}
.clickable {
	-webkit-transition: opacity .1s ease-out;
	-o-transition: opacity .1s ease-out;
	transition: opacity .1s ease-out;
}
.clickable:hover {
	opacity: .8;
	filter: alpha(opacity=80);
	-ms-filter: "alpha(opacity=80)";
	-khtml-opacity: .8;
	-moz-opacity: .8;
}


/* ----------------------------------------------------------
	8. アイコン
------------------------------------------------------------- */
@font-face {
	font-family: 'milibloSymbols';
	src:url('fonts/milibloSymbols.eot?-njvb4e');
	src:url('fonts/milibloSymbols.eot?#iefix-njvb4e') format('embedded-opentype'),
		url('fonts/milibloSymbols.woff?-njvb4e') format('woff'),
		url('fonts/milibloSymbols.ttf?-njvb4e') format('truetype'),
		url('fonts/milibloSymbols.svg?-njvb4e#milibloSymbols') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'milibloSymbols';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-theme:before { content: "\e600"; }
.icon-official:before { content: "\e601"; }
.icon-menu:before { content: "\e602"; }
.icon-help:before { content: "\e603"; }
.icon-login:before { content: "\e604"; }
.icon-signup:before { content: "\e605"; }
.icon-arrowright:before { content: "\e606"; }
.icon-list:before { content: "\e607"; }
.icon-megaphone:before { content: "\e608"; }
.icon-star:before { content: "\e609"; }
.icon-camera:before { content: "\e60a"; }
.icon-arrowleft:before { content: "\e60b"; }
.icon-arrowup:before { content: "\e60c"; }
.icon-arrowdown:before { content: "\e60d"; }
.icon-newwindow:before { content: "\e60e"; }
.icon-chevronleft:before { content: "\e60f"; }
.icon-chevronright:before { content: "\e610"; }
.icon-chevronup:before { content: "\e611"; }
.icon-chevrondown:before { content: "\e612"; }
.icon-plus:before { content: "\e613"; }
.icon-minus:before { content: "\e614"; }
.icon-photo:before { content: "\e615"; }

.ie7 .icon-theme { *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ''); }
.ie7 .icon-official { *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ''); }
.ie7 .icon-menu { *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ''); }
.ie7 .icon-help { *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ''); }
.ie7 .icon-login { *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ''); }
.ie7 .icon-signup { *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ''); }
.ie7 .icon-arrowright { *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ''); }
.ie7 .icon-list { *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ''); }
.ie7 .icon-megaphone { *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ''); }
.ie7 .icon-star { *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ''); }
.ie7 .icon-camera { *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ''); }
.ie7 .icon-arrowleft { *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ''); }
.ie7 .icon-arrowup { *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ''); }
.ie7 .icon-arrowdown { *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ''); }
.ie7 .icon-newwindow { *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ''); }
.ie7 .icon-chevronleft { *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ''); }
.ie7 .icon-chevronright { *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ''); }
.ie7 .icon-chevronup { *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ''); }
.ie7 .icon-chevrondown { *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ''); }
.ie7 .icon-plus { *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ''); }
.ie7 .icon-minus { *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ''); }
.ie7 .icon-photo { *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ''); }


/* ----------------------------------------------------------
	9. ボタン / アイコン付リンク
------------------------------------------------------------- */
.btn { display: inline-block; }
a.btn {
	-webkit-transition: background .1s ease-out;
	-o-transition: background .1s ease-out;
	transition: background .1s ease-out;
}
a.btn:hover { background: #f3be65; }
.btn {
	padding: 6px 8px;
	background: #f1a82e;
	color: #fff;
	font-size: 85.7%;
}
a.btn { color: #fff; }
.btn:hover,
.btn:active { text-decoration: none; }
.btn .icon {
	padding: 0 5px 0 0;
	font-size: 80%;
}
.btn-s {
	padding: 5px 6px;
	font-size: 71.4%;
}
.btn-m {
	padding: 10px 12px;
	font-size: 100%;
}
.btn-l {
	padding: 10px 12px;
	font-size: 114.2%;
}

.jump {}
.jump .icon {
	padding: 0 5px 0 0;
	color: #333;
	font-size: 80%;
}


/* ----------------------------------------------------------
	10. ボックス / タイトル
------------------------------------------------------------- */
.box { margin: 0 0 25px; }
.box-head {}
.box-body {}
.box-foot {}

.title-l {
	margin: 0 0 20px;
	padding: 5px 0 12px;
	border-bottom: 2px solid #333;
	font-size: 142.8%;
	line-height: 30px;
}

.title-m { line-height: 100%; }

.title-s {
	margin: 0 0 15px;
	line-height: 100%;
}
.title-s .icon {
	padding: 0 5px 0 0;
	color: #C93734;
}

.crosshead {
	margin: 0 0 15px;
	font-size: 114.2%;
	color: #C93734;
}

.subtitle {}


/* ----------------------------------------------------------
	11. メッセージ / アラート
------------------------------------------------------------- */
.message {
	margin: 20px 0;
	padding: 5px 5px 5px 32px;
	background: #eee;
	font-size: 85.7%;
	text-align: left;
}
.message-loading { background: #F5F4F1 url(/img/common/ico_spinner.gif) 10px 50% no-repeat; }
.message-error {
	background: #F5F4F1 url(/img/common/ico_error.png) 10px 50% no-repeat;
	color: #C93734;
}


/* /////////////////////////////////////////////////////////////

	レイアウト用スタイル

///////////////////////////////////////////////////////////// */

/* ----------------------------------------------------------
	共通
------------------------------------------------------------- */

/*	ページ上部に戻るボタン
------------------------------------------------------------- */
#pagetop {
	display: none;
	position: fixed;
	bottom: 0;
	right: 0;
}

/* ----------------------------------------------------------
	ヘッダー
------------------------------------------------------------- */
#header {
	border-top: 3px solid #F2B03F;
	background-color: #1C171B;
}
#header .holder {
	width: 1080px;
	margin: 0 auto;
}
#header .fl { width: 266px; }
#header .fr { }

#siteid { position: relative; }
#siteid:before {
	position: absolute;
	top: 53px;
	left: 73px;
	content: url('/img/common_new/bg-arrow-bottom-brown.png');
	display: block;
	line-height: 0;
}
#siteid a {  }
#siteid a:hover { }

/*	ナビゲーション
------------------------------------------------------------- */
#gnav {
	float: left;
	width: 500px;
	font-size: 85.714%;
}

#gnav li {}
#gnav a:link,
#gnav a:visited,
#gnav a:hover,
#gnav a:active { text-decoration: none; }

#gnav-theme.is-hover .gnav-label { color: #E74C3C; }
#gnav-official.is-hover .gnav-label { color: #F39C12; }
#gnav-menu.is-hover .gnav-label { color: #1ABC9C; }
#gnav-help.is-hover .gnav-label { color: #3498DB; }

.gnav-item {
	position: relative;
	float: left;
}

.gnav-label {
	display: block;
	cursor: pointer;
}
.is-hover .gnav-label {
	height: 53px;
}

.subnav {
	display: none;
	position: absolute;
	top: 53px;
	left: 0;
	background: #fff;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-o-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-ms-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	z-index: 99999;
}
#gnav-theme .subnav a { color: #E74C3C; }
#gnav-official .subnav a { color: #F39C12; }
#gnav-menu .subnav a { color: #1ABC9C; }
#gnav-help .subnav a { color: #3498DB; }
.subnav .icon {
	padding: 0 5px 0 0;
	color: #CCC;
}

.subnav-links {}
.subnav-links li {
	clear: both;
	border-bottom: #ddd 1px solid;
}
.subnav-links li a {
	display: block;
	padding: 10px 15px;
}
.subnav-links li a:hover { background: #F7F5F0; }
.subnav-links .icon {
	float: left;
	display: block;
	width: 20px;
	height: 20px;
	padding: 0;
	line-height: 20px;
}
.subnav-links .subnav-label {
	float: right;
	display: block;
	width: 270px;
}
.subnav-links .subnav-label-name {
	display: block;
	font-size: 116.666%;
	font-weight: bold;
}
.subnav-links .subnav-label-desc {
	display: block;
	color: #333;
}

#subnav-theme { width: 320px; }
#subnav-official { width: 320px; }

#subnav-help { width: 300px; }
#subnav-help .subnav-links li a { padding: 15px; }
#subnav-help .subnav-links .subnav-label { width: 250px; }

#subnav-menu {
	width: 422px;
	padding: 15px;
}
#subnav-menu .menu-links {
	float: left;
	width: 257px;
}
#subnav-menu .menu-links .fl { width: 120px; }
#subnav-menu .menu-links .fr { width: 120px; }
#subnav-menu .menu-links dt {
	margin: 0 0 5px;
	padding: 0 0 10px;
	font-size: 116.666%;
	font-weight: bold;
	border-bottom: #ddd 1px solid;
}
#subnav-menu .menu-links a {
	display: block;
	padding: 3px 5px;
}
#subnav-menu .menu-links a:hover { background: #F7F5F0; }

#subnav-menu .menu-member {
	float: right;
	width: 150px;
	padding: 32px 0 0;
}
#subnav-menu .menu-member a {
	display: block;
	margin: 0 0 10px;
}
#subnav-menu .menu-member a:hover { background: #F7F5F0; }
#subnav-menu .menu-member .subnav-btn {
	display: block;
	padding: 15px;
	background: #FCFCF8;
	border: #ddd 1px solid;
	font-size: 116.666%;
	font-weight: bold;
	text-align: center;
	color: #333;
}
#subnav-menu .menu-member .subnav-btn .icon { color: #C93734; }

/*	検索ボックス
------------------------------------------------------------- */
#search {
	position: relative;
	float: left;
	width: 176px;
	height: 27px;
	margin: 11px 0 0;
	background: #fff;
	border: #ddd 1px solid;
}

#cse-search-box {}

#isearch {
	width: 142px;
	height: 27px;
	margin: 0 0 0 5px;
	padding: 0;
	background: none;
	border: none;
	color: #aaa;
	font-size: 12px;
}
#isearch.is-focus { color: #333; }

#ibutton {
	position: absolute;
	top: 0;
	right: 0;
	width: 27px;
	height: 27px;
	background: url(/img/common/btn_search.png) 0 0 no-repeat;
	border :none;
	cursor: pointer;
}

/*	ソーシャルメディア
------------------------------------------------------------- */
#sns {
	float: right;
	width: 110px;
	margin: 11px 0 0;
}
	#sns li {
		float: left;
		margin-left: 8px;
	}

/* ----------------------------------------------------------
	フッター
------------------------------------------------------------- */
#footer {
	width: 100%;
	background: #222222;
}
#footer .holder { padding: 25px 10px; }
#footer .ad {
	display: none;
	float: left;
	width: 468px;
	height: 60px;
}
#footer .links {
	text-align: left;
	margin: 0 auto;
	width: 1080px;
}
	#footer .nav {
		float: right;
	}
		#footer .nav ul {
			border-left: 1px solid #fff;
		}
		#footer .nav li {
			float: left;
			border-right: 1px solid #fff;
		}
		#footer .nav a {
			display: block;
			padding: 0 5px;
			color: #fff;
			font-size: .7rem;
			line-height: 1;
		}
	#footer .publisher {
		float: left;
		width: 560px;
	}
	#footer .publisher > .pub-header > .cLeft {
		display: block;
		float: left;
		width: 165px;
	}
	#footer .publisher > .pub-header > .copy {
		display: block;
		float: right;
		width: 385px;
		color: #fff;
		font-size: .6rem;
		line-height: 1.3;
	}
	#footer .publisher a {
		color: #fff;
		font-size: .7rem;
	}

#copyright {
	width: 100%;
	padding: 10px 0;
	background: #000;
	border-top: 2px solid #F2B03F;
	color: #fff;
	text-align: center;
	font-size: .6rem;
}


/* ----------------------------------------------------------
	コンテンツ全体枠
------------------------------------------------------------- */
#container {
	width: 100%;
	padding: 0 0 70px;
	/*background: #fff;*/
}


/*	コンテンツ
------------------------------------------------------------- */
#contents {
	width: 930px;
	margin: 0 auto;
}
#contents .holder {	padding: 0 10px; }


/*	レイアウト変更
------------------------------------------------------------- */
#layouter {
	padding: 12px 10px 8px;
	border: #333 1px solid;
	background: url(/img/common/bg_layouter.gif) 0 0 repeat;
	text-align: center;
}
#layouter .fl {
	padding: 0 15px 0 0;
	border-right: #ccc 1px solid;
}
.layouter-btns {
	width: 310px;
	margin: 0 auto;
}
.layouter-btn {
	float: left;
	display: block;
	width: 50px;
	height: 38px;
	margin: 0 3px 0;
	background: url(/img/common/bg_layouterbtn.gif) 0 0 repeat;
	cursor: pointer;
}
#layouter-btn-kahen { background-position: 0 0; }
#layouter-btn-kahen.is-current { background-position: 0 -38px; cursor: auto; }
#layouter-btn-kotei { background-position: -50px 0; }
#layouter-btn-kotei.is-current { background-position: -50px -38px; cursor: auto; }
#layouter-btn-a { background-position: -100px 0; }
#layouter-btn-a.is-current { background-position: -100px -38px; cursor: auto; }
#layouter-btn-b { background-position: -150px 0; }
#layouter-btn-b.is-current { background-position: -150px -38px; cursor: auto; }
#layouter-btn-c { background-position: -200px 0; }
#layouter-btn-c.is-current { background-position: -200px -38px; cursor: auto; }


/*	記事ボックス レイアウトC
------------------------------------------------------------- */
.layout-c .item {
	float: left;
	display: block;
	width: 30%;
	margin: 1.5%;
	-webkit-transition: -webkit-transform .1s ease-out;
	-o-transition: -o-transform .1s ease-out;
	transition: transform .1s ease-out;
}
.layout-c .item:hover {
	text-decoration: none;
	-webkit-transform: scale(1.02,1.02);
	-ms-transform: scale(1.02,1.02);
	transform: scale(1.02,1.02);
}
.state-930 .layout-c .item,
.state-1100 .layout-c .item { width: 30%; margin: 1.5%; }
.state-1300 .layout-c .item { width: 31%; margin: 1%; }
.state-1600 .layout-c .item { width: 19%; margin: .5%; }
.state-gt1600 .layout-c .item { width: 16%; margin: .3%; }
.layout-c .item-holder { border: 1px solid #ddd; }
.layout-c .item-photo {
	overflow: hidden;
	width: 100%;
	max-height: 300px;
}
.layout-c .item-photo img {
	display: block;
	width: 100%;
}
.layout-c .item-title {
	margin: 7px 0 0;
	padding: 0 8px;
	font-weight: bold;
}
.layout-c .item-date {
	padding: 0 8px;
	color: #999;
	font-size: 85.7%;
}
.layout-c .item-author {
	margin: 7px 0 0;
	padding: 10px;
	background: #F7F5F0;
}
.layout-c .item-blog {
	float: left;
	width: 124px;
}
.layout-c .item-cat { display: block; }
.layout-c .item-cat img { display: block; }
.layout-c .item-name {
	display: block;
	margin: 3px 0 0;
	color: #333;
	font-size: 85.7%;
}
.layout-c .item-profile {
	overflow: hidden;
	float: right;
	width: 30px;
	height: 30px;
}
.layout-c .item-profile img {
	display: block;
	width: 30px !important;
	height: 30px !important;
}