/*
Theme Name: grammy-custom
Author: Grammy Club Osaka (deebers-ITLab.)
Description: This is a simple one-column theme.「推し活倶楽部」専用テーマです。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
@charset "UTF-8";
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 Normalize /css/normalize.css 読込
2.0 BasicSetting （基本設定）

3.0 Single-columun layout
	3.1 headerとGnav
		Global Nabigation
	3.2 ContentsArea
	3.2.1 adBox
	3.3 FooterArea

ブログ投稿CSS //////////////////////////////////////////////////////

4.0 media Queries タブサイズ縦サイズ（750-939px)で適応したいCSS
4.0.1 common(min750px max939px)
	4.1 headerとGnav（min750px max939px）iPad縦<header>
	4.2 ContentsArea(min750px max939px)
		4.2.1 ContentsArea adBox設定
	4.3 FooterArea(min750px max939px)

5.0 media Queries PCサイズ（940px）
5.0.1 common（940px）
	5.1 headerとGnav
	5.2 ContentsArea
		5.2.1 adBox
	5.3 FooterArea
--------------------------------------------------------------*/



/*--------------------------------------------------------------
2.0 BasicSetting （基本設定）
--------------------------------------------------------------*/
* { /* color設定しない */
	margin: 0;
	padding: 0;
}
html {
	height: 100%;
}
body {
	height: 100%;
	font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
	color: #333; /* サイト全体の基本フォント色 */
	min-width: 320px;
	word-wrap: break-word;
	background-color: #FFF; /* default */
}

/* リンクの基本色 */
a {
	color: #b19154; /* ゴールド */
}
/* リンクにマウスオーバーした時の色 */
a:hover {
	color: #b22222;
	cursor: pointer;
}
/* 画像ホバー */
a:hover img {
	opacity: 0.8;
}

/* clearfix */
.clearfix {
	zoom: 1;
}
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}
/*--------------------------------------------------------------
3.0 Single-columun layout
--------------------------------------------------------------*/

/* font size
-----------------------------------------------*/
html {
	font-size: 62.5%; /* 10px rem指定のため*/
}
body { /* 基準のフォントサイズ */
	background: #fff; /* 基本白背景 */
	font-size: 1.5rem; /* 15px */
}
/* フォント設定(ゴシック)----------------------------------- */
.font-gothic {
	font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}
/* フォント設定(明朝プロポーショナル)見出し等-------------------------- */
h1,h2,h3,h4, .font-serif, .midashi { /* 見出しタグは明朝体太字指定 クラス.font-serif*/
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-weight: normal;
	font-feature-settings: "palt" 1; /* プロポーショナル */
}
h1,h2 {
	font-size: 1.8rem; /* 18px */
}
h3,h4 {
	font-size: 1.8rem; /* 18px */
}
h5,h6 {
	font-size: 1.6rem; /* 16px */
	font-weight: normal;
	line-height: 1.6;
}
/* ページトップボタン js連動 */
#page-top {
	position: fixed;
	z-index: 9995;
	bottom: 10px; /* spフローティングメニューの高さjsであげる */
	right: 10px;
	font-size: 20px;
}
#page-top a {
	text-decoration: none;
	background: #999;
	border-radius: 3px;
	color: #fff;
	width: 50px;
	line-height: 50px;
	text-align: center;
	display: block;
	opacity: 0.6;
}
#page-top a:hover {
	text-decoration: none;
	color: #fff;
}

/* 共通クラス */
.flexCont {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	flex-flow: row wrap;
}

/*--------------------------------------------------------------
3.1 headerとGnav
--------------------------------------------------------------*/
header#site-header {
	position: fixed; /* headerを上部固定 57px */
	width: 100%;
	z-index: 9997; /* #wrap 0 */
	background: #1a1a1a;
	border-bottom: solid 1px #584928; /* pc border:none; */
	box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}
header#site-header + #Wrap { /* sp表示のみheaderの高さをwrapのpadding-topで確保 */
	padding-top: 57px;
}
#headWrap {
	position: relative; /*positionの基点にする*/
	padding: 0 10px; /* pc 30px 10px 62px */
	min-height: 56px; /* navBackの高さ スマホトップに固定するため*/
	margin: 0 auto; /* pc 0 auto */
	text-align: left;
	max-width: 1500px;
}
#headWrap .siteName {
	display:inline-block;
	position:relative;
	z-index: 9999;
}
#headWrap .siteName a { /* logo 画像サイズ297x62px*/
	display: inline-block;
	width: 230px;
	height: 48px;
	margin: 4px 0;
}
/* Global Nabigation (アコーディオンメニュー)
-----------------------------------------------------------*/
/* 開閉ボタン ----------------------*/
#navBack { /* position基点header #headWrap*/
	position: absolute;
	top: 0; /* pc bottom:0; */
	left: 0;
	right: 0;
	height: 56px; /* スマホ画面を圧迫しない高さ */
	padding: 3px 10px; /* 高さ56pxに抑える */
	z-index: 9998; /* #page-top（9995）より上 */
}
#navBox { /* naviボタン */
	text-align: center;
	height: 50px; /* 32px */
	width: 50px; /* pc100% */
	float: right; /* pc無し */
	border-radius: 3px;
	cursor: pointer;
}
/* menuアイコン */
	#navBox .changeIco { /* p.changeIco (button_icon) */
		font-weight: normal;
		width: 100%; /*#navBox50px*/
		font-size: 38px;
		height: 36px;
		text-align: center;
		color: #FFF;
		/* grammy用 追記*/
		background: url(/wp-content/themes/custom/custom/mens/images/menu/menu_btn.svg) center bottom 4px/30px auto no-repeat;
	}
		#navBox .changeIco.close-btn { /* grammy用クローズボタン */
			background: url(/wp-content/themes/custom/custom/mens/images/menu/menu_btn_close.svg) center bottom 4px/24px auto no-repeat;
		}
	#navBox:after { /* button_text */
		content: attr(data-name);
		font-size: 11px;
		line-height: 11px;
		display:block;
		padding-bottom: 3px;
		color: #FFF;
	}
/* アコーディオンエリア */
.mainNavi { /* アコーディオン部分 */
	display: none; /* 初期設定 pc block */
	position: absolute; /* pc static */
	top: 57px; /* headerHeight56px+10px */
	left: 0;
	right: 0;
	height: -webkit-calc(100vh - 57px); /* 念のため */
	height: calc(100vh - 57px);
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch; /*-- SPスクロール用 --*/
	overflow-scrolling: touch; /*-- SPスクロール用 --*/
	padding: 20px 10px 0; /* pc none */
	background: rgba(11, 11, 11, 0.9); /* pc none */
}
	.mainNavi:after { /* アコーディオン下部閉じるボタン */
		white-space: pre-wrap;
		content:"\f057   メニューを閉じる";
		display: block;
		font-size: 16px;
		line-height: 50px;
		padding-bottom: 70px; /* spのブラウザナビの高さ分 */
		margin: 10px 0;
		color: #FFF;
		font-family: FontAwesome;
		cursor: pointer;
		border-radius: 3px;
	}


/* メニュー部分（管理画面制御） */
/* spメニューのタイトルp.nav-title */
.mainNavi .nav-title a {
	display: block;
	line-height: 40px;
	font-size: 15px;
	color: #fff;
	text-decoration: none;
	border: solid 1px #fff;
	margin-top: 10px;
}
.mainNavi .nav-title.mens-color a { /* メンズ色 */
	border: solid 1px #b19154;
}
.mainNavi .nav-title.ladies-color a { /* レディース色 */
	border: solid 1px #fbdfdb;
}

/* gnavi親要素ul.menu 子要素ul.sub-menu */
	#navBox .menu li { /* Gnavi */
		text-align: left; /* pc center */
	}
	#navBox .menu li > a {
		position: relative; /* afterのアイコンの基点 */
		display: block;
		font-size: 15px;
		line-height: 40px;
		color: #FFF;
		text-decoration: none;
		padding: 0 5px; /* pc 0 */
		border-bottom:solid 1px #b5b5b5; /* pc none */
	}
	#navBox .menu li > a:after { /* spナビリスト（右向き矢印） */
		/* default font */
		/*content: "\f0da";*/
		/*font-family: FontAwesome;*/

		display: block;
		width: 20px;
		position: absolute;
		right: 0;
		top: 0;
		font-size: 20px;
		line-height: 40px;
		color: #b19154; /* メンズゴールド */
		/* grammy用画像指定 */
		content: "";
		height: 40px;
		background: url(/wp-content/themes/custom/custom/mens/images/menu/menu_arrow.svg) left center/8px auto no-repeat;
	}
/* サブメニュー */
		.menu .sub-menu {
			padding-left: 15px;
		}
		.menu .sub-menu li a {
		position: relative; /* afterのアイコンの基点 */
		display: block;
		font-size: 14px;
		line-height: 35px;
		color: #FFF;
		text-decoration: none;
		padding: 0 5px; /* pc 0 */
		border-bottom:dotted 1px #b5b5b5; /* pc none */
		}


/*メニュー下 */
.mainNavi .center-img { /* 電話番号 */
	padding: 10px 0;
}
	.mainNavi .center-img a {
		display: inline-block;
		width: 100%;
	}


/* PC用ナビゲーション 非表示-------------------- */
/* pc-utility-navigation */
div#util-naviArea {
	display: none;
}
/* pc G-navi非表示 */
div#navBack-pc {
	display: none;
}


/* header投稿トップページのみイメージを出力---------------------------------- */
/* 画像背景のあるページのh2タイトル 共通 */
#sp-margin {
	padding-top:57px;
}
#art-head-blog .page-entry-title { /* ブログトップ画像の中の英字タイトル */
	font-feature-settings: normal;
}
.art-title-box {
	position: relative; /* .page-entry-titleの基点 */
	width: 100%;
}
.art-title-box:before {
	content:"";
	display: block;
	padding-top: 25.978090766823161189358372456964%; /* エンター以外共通の高さ sp用 */
}
/* ページ共通（背景の中のh2） */
	.page-entry-title { /* h2 */
		position: absolute;
		top:0;
		bottom:0;
		left:0;
		right:0;
		margin: auto;
		height: 30px; /* default 1行テキストの高さ */
		font-size: 3.0rem; /* pc 3.8rem38px */
		line-height: 1.3;
		text-align: center;
		color: #333;
		text-shadow: 1px 1px 3px #fff;
	}
/* 背景無しのdefaultpageタイトル */
	.df-page-entry-title {
		font-size: 3.0rem; /* pc 3.8rem38px */
		line-height: 1.3;
		text-align: center;
		margin-bottom: 1.0rem;
		color: #333;
	}
/* GRAMMY 固別ページ 設定 Start*/
/* 共通 クラス*/

	/* class="title-style" でサイトと同じスタイルを適用*/
	.mainBox h2.title-style, /* 固定ページではコンテンツ内見出しはh3から */
	.mainBox h3.title-style {
		font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
		line-height: 1.5;
		text-align: center;
		font-size: 2.2rem; /* pcサイズあり */
	}

/* 男性ページ 女性ページへのナビボタン ------------------------------------------------ */
/* ページ内nav(ul)  backjs-btn menstop-btn ladiestop-btn */
/* ul */
.mainbox-nav {
	width: 100%;
	height: 89px; /* goldボタンに合わせる */
	max-width: 640px;
	margin:0 auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	flex-flow:row nowrap; /* flex-direction flex-wrap指定 (row nowrap)初期値 */
}
	/* li */
	.mainbox-nav .menstop-btn { /* 男性ボタン */
		flex-grow: 1; /* 男性ボタン、女性ボタンはサイズ可変 */
		padding: 10px 5px 10px 0;
	}
	.mainbox-nav .ladiestop-btn { /* 女性ボタン */
		flex-grow: 1; /* 男性ボタン、女性ボタンはサイズ可変 */
		padding: 10px 0 10px 5px;
	}

	.mainbox-nav .backjs-btn { /* 戻るボタン */
		display: none;
		width: 128px; /* 20% 128px */
		padding: 10px 10px 10px 0;
	}
		.mainbox-nav .backjs-btn input[type="button"] {
			display: block;
			width: 100%;
			height: 100%;
			-webkit-box-sizing: content-box; /* safari対応 */
			-webkit-appearance: button; /* safari対応 */
			appearance: button;
			box-sizing: border-box;
			background: #eee;
			border: solid 1px #ccc;
			border-radius: 2px;
			color: #333;
			font-size: 12px;
			cursor: pointer;
		}

	.mainbox-nav li a { /* ボタンリンク共通 */
		position: relative; /* a:afterの基点 */
		display: block;
		width: 100%;
		height: 100%;
		padding: 15px 0;
		text-align: center;
		text-decoration: none;
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
		font-size: 1.6rem;
		line-height: 1.3;
		color: #fff;
		background: rgba(0,0,0,0.8);
		box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.4); /* x方向 y方向 ぼかし 広がり */
		border-radius: 2px;
	}
			.mainbox-nav li a:before { /* 内枠線 */
				content: "";
				position: absolute;
				left:3px;
				right: 3px;
				top: 3px;
				bottom: 3px;
				display: block;
				border: solid 1px rgba(255,255,255,0.2);
			}
			.mainbox-nav li a:hover {
				background: rgba(0,0,0,0.7);
			}
			.mainbox-nav li a > span { /* 英語フォント */
				font-size: 1.4rem;
				letter-spacing: 1px;
			}

/* 男性ページ 女性ページへのナビボタン End------------------------------------------------ */

/* GRAMMY 共通 クラス End*/

/* ブログトップページ -----------------------------------------------------------*/
#art-head-blog {
	background: url(/wp-content/themes/custom/custom/blog/images/page_img_sp.jpg) center/cover no-repeat;
}
/* プライバシーページ -----------------------------------------------------------*/

/* サイトマップページ -----------------------------------------------------------*/
#site-map li h4 {
	margin-bottom: 10px;
}
#site-map li a {
	display: block;
	text-decoration: none;
}
#site-map li h5 { /* h4と合わせる */
	position: relative;
	padding: 0 0 0 16px;
	margin-bottom: 10px;
	font-size: 1.8rem;
	line-height: 1.3;
	font-weight: normal;
	font-feature-settings: "palt" 1;
}
	#site-map li h5:before { /* 共通はgold */
		content: "";
		display: block;
		position: absolute;
		top: 2px;
		left: 0;
		background: #b19154;
		width: 6px;
		height: 80%;
	}

#site-map li p { /* ページ説明 */
	font-size:1.3rem;
	padding:0 0 0 16px ;
	margin-bottom: 10px;
}
#site-map .list-title { /* リスト見出し p */
	font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 2.0rem;
	line-height: 1.3;
	font-weight: normal;
	font-feature-settings: "palt" 1;
	padding: 0;
	margin: 20px 0 5px 0;
	text-align: center;
}
	#site-map ul#for-mens {
		border-top: solid 1px #ccc;
		padding-top: 20px;
	}
		#site-map ul#for-ladies {
		border-top: solid 1px #f9d3ca;
		padding-top: 20px;
	}
	#site-map ul.list-util {
		border-top: solid 1px #ccc;
		padding-top: 20px;
	}

/* GRAMMY 固別ページ 設定 End */

/*--------------------------------------------------------------
3.2 ContentsArea
--------------------------------------------------------------*/
#Wrap { /* メインとサイドをdiv#wrap */
	position: relative;
	max-width: 1080px;
	margin: auto;
	z-index: 0; /* header 1 */
}
/* メインエリア */
#ContentArea { /* div#ContentArea widthは740pxがマックスで縮小 */
	margin: 0 10px 20px; /*pc margin-right: 20px;*/
	padding: 20px 10px; /* pc 20px 50px 30px */
	background: rgba(255,255,255,1.0); /* default */
}

/* #ContentArea内main ------------------------------------*/
.sp-none { /* spのみ非表示  */
	display: none;
}
.sp-ipad-none { /* spとipad非表示 */
	display: none;
}

	.forRobot {
		display: none; /* トップページのパンくず非表示 */
	}
	/* sectionパンくずリスト */
		#breadcrumb { /* section#breadcrumb パンくずボックス */
			width: 100%;
			font-size: 12px; /* px固定 */
			line-height: 1.5;
			margin-bottom: 10px;
			font-feature-settings: "pkna" 1; /* プロポーショナル */
		}
			#breadcrumb li {
				float: left;
			}
				#breadcrumb li a {
					text-decoration: none;
				}
			#breadcrumb li:after {
				content: "\f105";
				font-weight: normal;
				color: #888;
				padding: 0 3px;
				font-family: FontAwesome;
			}
			#breadcrumb li:last-child:after { /* 最後の( > )無し */
				display: none;
			}

			#breadcrumb li:last-child,
			#breadcrumb li:last-child a {
				color: #888;
				text-decoration: none;
			}


/* メインコンテント内 投稿に関係する部分
 ------------------------------------------------ */
/* post内 STYLE 別スタイルシートに移動----------- */
/* .article-header シングルページではheader内にdiv.blogInfo div.catGroup h1.entry-title p.vcard authorを内包 */
/* .article-header 個別ページではh1.entry-titleのみ内包 */
.article-header {
	position: relative;
	border-bottom: solid 1px #ccc;
	padding: 10px 0;
	margin-bottom: 40px;
}
		/* div.blogInfo内（更新日） */
	.blogInfo {
		margin-bottom: 14px;
	}
	.dateBox { /* ul */
		text-align: right;
	}
		.dateBox li {
			display: inline-block;
			padding-right: 5px;
			color: #888;
			font-size: 14px; /* px固定 */
			background: #FFF;
		}

	.author a { /* 投稿者 */
		text-decoration: none;
		color: #888;
	}

		/* div.catGroup内 li a のspan カテゴリーボタン */
		.catGroup {
			margin-bottom: 14px;
		}
		.catGroup li {
			display: inline-block;
			margin-bottom: 6px;
		}
		.catGroup a { /* .catname 全体をリンク */
			display: inline-block;
		}
		.catname { /* li a > span */
			position: relative; /* before 基点 */
			font-size: 13px; /* px固定 */
			line-height: 1.4;
			color: #fff;
			display: inline-block;
			padding: 6px 8px;
			text-decoration: none;
			background: #63acb7;
			border-radius: 2px;
		}
		.catname:before {
			position: absolute;
			content: "";
			top: -4px;
			left: 0;
			display: block;
			width: 15px;
			height: 7px;
			border-radius: 2px;
			background: #63acb7;
		}

			.catname:hover {
				opacity: 0.8;
			}


/* home.php */
.entry-desc {
	color: #888;
	margin-top: 20px;
	line-height: 1.4;
	font-size: 1.4rem;
}
/* 共通 */
.entry-title { /* h1 h2 */
	font-size: 2.2rem; /* 22px */
	line-height: 1.3;
	margin-bottom: 0;
}
/* プロフィールページのCSS ------------------------------------- */
div.profile-box h2 {
	position: relative; /* beforeの基点 */
	padding: 0 0 0 12px;
	/*font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;*/
	font-size: 2.0rem;
	margin-top: 4.0rem;
	margin-bottom: 4.0rem;
}
	div.profile-box h2:before {
		content: "";
		display: block;
		position: absolute;
		top: 2px;
		bottom: 2px;
		left: 0;
		background: #63acb7;
		width: 6px;
		height: auto;
	}

div.profile-box h3 {
	font-size: 2.0rem;
	padding-bottom: 5px;
	border-bottom: solid 1px pink;
}

/* プロフィールのtableの装飾 */
.profile-box table {
	font-size: 1.3rem;
	padding: 5px;
	border-collapse: separate;  /* 表の線と線の間を空ける */
	border-spacing: 5px;       /* 表の線と線の間の幅 */
	border: solid 2px #DFF2F6;
	border-radius: 3px;
	margin-bottom: 30px;
}
	.profile-box th {
		width: 20%;
		vertical-align: middle;
		padding: 5px;
		line-height: 1.2;
		background: #DFF2F6;
	}
	.profile-box td {
		width: 80%;
		vertical-align: middle;
		padding: 5px;
		line-height: 1.2;
		border-bottom: dotted 1px #DFF2F6;
	}

/* プロフィールページのCSS END---------------------------------- */



/* 投稿(single)ページ div.post内 */
.title-img { /* post タイトルに続くアイキャッチ p.title-img */
	margin-bottom: 14px;
}
/* postの本文タイトル */
.post .article-header {
	margin-bottom: 40px;
	border-bottom: solid 1px #eee;
}
	.post .article-header .entry-title {
		margin-bottom: 20px;
	}
.post .article-header .blogInfo { /* 投稿ヘッダーのブログインフォ */
	margin-bottom: 0;
}

/* .article-header ここまで */

/* .article-footer */
.pageInfo {
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	justify-content: flex-end;
	font-size: 13px;
	align-items: baseline;
	color: #888;
	padding: 0 0 10px;
	margin: 0 0 10px;
	border-bottom: solid 1px #eee;
}
	.pageInfo .pageDate {
		flex: 0 0 auto;
		text-align: right;
		padding:0 3px 0 10px;
	}
	.pageInfo .vcard.author {
		flex: 1;
		text-align: right;
	}

/* 共通クラス指定 styleからコピー ////////////////////////////////////////////-*/
/* テキストカラー ゴールド ピンク */
.mainBox .gold,
.sideBox .gold { /* 本文内hタグのspan.gold 英語表記 */
	font-weight: normal;
	color: #b19154;
}
.mainBox .pink,
.sideBox .pink {
	font-weight: normal;
	color: #f9d3ca; /* 女性用ピンク文字 */
}

/* リスト olリスト ulリスト-------------------------------------------- */
/* 番号付きリスト 丸囲み数字 CSSで対応 */
ol.circle-num {
	margin-bottom: 3.0rem;
	counter-reset: ol-counter;
}
	ol.circle-num li {
		padding-left: 35px;
		position: relative;
		margin-bottom: 10px;
	}
	ol.circle-num li:before {
		content: counter(ol-counter);
		counter-increment: ol-counter;
		display: block;
		position: absolute;
		left: 0;
		top: 3px;
		line-height: 18px;
		text-align: center;
		vertical-align: middle;
		height: 18px;
		width: 18px;
		font-size: 12px;
		border-radius: 50%;
		border: solid 1px ;
	}
/* 普通の数字番号付きリスト */
ol.numdot {
	margin-bottom: 3.0rem;
	counter-reset: ol-counter;
}
	ol.numdot li {
		margin-bottom: 10px;
	}
	ol.numdot li:before {
		content: counter(ol-counter)".";
		counter-increment: ol-counter;
		margin-right: 6px;
	}

/* 行頭付きリスト ulリスト */
ul.disc-style {
	list-style: disc; /* 普通の行頭リスト */
	margin-bottom: 3.0rem;
}
ul.block-style {
	list-style: square; /* ブロックタイプの行頭リスト */
	margin-bottom: 3.0rem;
}
	ul.disc-style li,
	ul.block-style li {
		display:list-item;
		margin-left: 20px; /* 1文字分16px+気持ち */
	}
/* リスト olリスト ulリスト End-------------------------------------------- */

/* 共通クラス指定 ここまで ////////////////////////////////////////////-*/


/* ブログ投稿CSS ////////////////////////////////////////////////////// */
/* 投稿本文部分
----------------------------------------------- */
/* single投稿のみの設定--------------------- */
.mainBox.post-main { /* article内post本文エリア */
	font-size: 1.5rem; /* 個別設定漏れのため */
	color: #444;
}
.mainBox.post-main > *:first-child {
	margin-top: 0;
}
	.mainBox.post-main p { /* single投稿の文字サイズ */
		font-size: 1.5rem;
		color: #444;
	}
	.mainBox.post-main section {
		margin-bottom: 4.0rem;
	}


	/* single.php 見出し設定 基本 共通設定 //////////////////////////////*/
	/* 基本ゴシック体 */
	.mainBox.post-main h2 { /* コンテンツ内大見出し */
		position: relative; /* beforeの基点 */
		padding: 0 0 0 12px;
		font-size: 2.0rem;
		margin-top: 4.0rem;
		margin-bottom: 4.0rem;
	}

	/* 見出しの装飾 */
	.mainBox.post-main h2::before {
		content: "";
		display: block;
		position: absolute;
		top: 2px;
		bottom: 2px;
		left: 0;
		background: #63acb7;
		width: 6px;
		height: auto;
	}

	/* 見出しh3 装飾下線 */
	.mainBox.post-main h3 {
		padding: 0 0 5px 3px;
		margin-top: 3.5rem;
		margin-bottom: 3.5rem;
		border-bottom: dotted 2px #F0CF85;
	}


	/* single.php 見出し設定 基本 共通設定 ここまで //////////////////////////////*/

/* その他本文テキストの装飾 ///////////////////////////////////////// */

	/* 見出しクラス指定 特殊指定 //// */
		/* 明朝体 */
		.mainBox.post-main h2.font-serif,
		.mainBox.post-main h3.font-serif {
			font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
		}

		/* h3 先頭ブロック付き */
		.mainBox.post-main h3.pre-blok {
		position: relative; /* beforeの基点 */
		padding: 0 0 0 12px;
		margin-top: 3.0rem;
		margin-bottom: 3.0rem;
		border: none;
		}
		.mainBox.post-main h3.pre-blok::before { /* 見出しの装飾 */
			content: "";
			display: block;
			position: absolute;
			top: 2px;
			bottom: 2px;
			left: 0;
			background: #bbb;
			width: 6px;
			height: auto;
		}
		.mainBox.post-main h3.margin-non + p { /* h3に段落が続く場合のマージン狭くする */
			margin-top: -2.0rem;
		}
	/* 見出しクラス指定 特殊指定 ここまで //////// */

	/* インライン要素のテキスト装飾クラス /////////// */
	/* テキスト強調（下線） */
	.underline-yellow {
		background: linear-gradient(transparent 60%, #FFF4AA 40%);
	}
	.underline-red {
		background: linear-gradient(transparent 60%, #ffe2e2 40%);
	}
	.underline-blue {
		background: linear-gradient(transparent 60%, #d6ebff 40%);
	}

	/* 会話用吹き出しデザイン ------------------------------ */

/* 左右共通CSS */
.b-voice { /* 会話(吹き出し1つ)を囲むdiv */
	margin-bottom: 40px;
}
.b-voice:after,
.b-voice:before {
	clear: both;
	content: "";
	display: block;
}
/* アイコン */
		.b-voice figure img { /* 画像を丸く */
			width: 100%;
			height: 100%;
			border: 1px solid #eee;
			border-radius: 50%;
			margin: 0;
		}
		.b-voice figcaption {
			font-size: 12px;
			text-align: center;
			color: #888;
		}
/* 吹き出し内テキスト */
		.mainBox .b-voice .voice-text-r > p,
		.mainBox .b-voice .voice-text-l > p { /* 吹き出し内段落余白 */
			margin-bottom: 1.5rem; /* 1文字分 */
		}
		.mainBox .b-voice .voice-text-r > p:last-child,
		.mainBox .b-voice .voice-text-l > p:last-child { /* 吹き出し内の最下余白なし */
			margin-bottom: 0;
		}

/* 左右共通CSS ここまで */

/* 左アイコン右吹き出し ----------------------- */
	.b-voice .voice-img-l { /* 左figure */
		margin-top: -1px;
		float: left;
		width: 40px; /* ブラウザで変更 */
		height: 40px; /* ブラウザで変更 */
	}

	.b-voice .voice-text-r { /* 右吹き出し */
		position: relative;
		margin-left: 60px; /* ブラウザで変更 */
		margin-right: 20px; /* ブラウザで変更 */
		padding: 1.2em;
		border: 2px solid #eee;
		background-color: #fff;
		border-radius: 5px;
	}
		/* 吹き出しのしっぽ（右） */
		.b-voice .voice-text-r:before {
			position: absolute;
			content: '';
			border: 10px solid transparent;
			border-right: 10px solid #eee;
			top: 21px;
			left: -22px;
		}
		.b-voice .voice-text-r:after {
			position: absolute;
			content: '';
			border: 10px solid transparent;
			border-right: 10px solid #fff;
			top: 21px;
			left: -20px;
		}

/* 右アイコン左吹き出し ----------------------- */
	.b-voice .voice-img-r { /* 右figure */
		margin-top: -1px;
		float: right;
		width: 40px; /* ブラウザで変更 */
		height: 40px; /* ブラウザで変更 */
	}

	.b-voice .voice-text-l { /* 左吹き出し */
		position: relative;
		margin-left: 20px; /* ブラウザで変更 */
		margin-right: 60px; /* ブラウザで変更 */
		padding: 1.2em;
		border: 2px solid #eee;
		background-color: #fff;
		border-radius: 5px;
	}
		/* 吹き出しのしっぽ（左） */
		.b-voice .voice-text-l:before {
			position: absolute;
			content: '';
			border: 10px solid transparent;
			border-left: 10px solid #eee;
			top: 21px;
			right: -22px;
		}
		.b-voice .voice-text-l:after {
			position: absolute;
			content: '';
			border: 10px solid transparent;
			border-left: 10px solid #fff;
			top: 21px;
			right: -20px;
		}



	/* 会話用吹き出しデザイン ここまで ------------------------ */

	/* 外部リンクEmbedlyを使用してサイトを表示 */
	.mainBox blockquote.embedly-box {
		background-image: none; /* ダブルクォートなし */
		padding: 10px 20px 0;
		margin: 30px 0;
	}

	/* 罫線（hr）の装飾 ブログ本文内*/
	.type-post .mainBox hr {
		margin: 3.0rem 0;
		border: 0;
		border-bottom: solid 1px #ddd;
	}
	.type-post .mainBox hr.bluedot { /* 青色ドット */
		border-bottom: dotted 2px #98e7f2;
	}

	/* ポイントボックス ------------------- */
	.type-post .mainBox .point-area {
		background-color: rgba(50, 172, 166, 0.08);
		padding: 20px 20px 1px;
		margin: 3.0rem 0;
		border-radius: 3px;
	}

	/* ボックス四角囲み ----------------- */
	.type-post .mainBox .square-box {
		border: solid 1px #ccc;
		padding: 10px;
		margin: 3.0rem 0;
	}
	.type-post .mainBox .square-box p:last-child { /* 罫線内ｐの下マージンなし */
		margin-bottom: 0;
	}
	/* 背景色 */
	.type-post .mainBox .bgcolor-fed {
		background-color: #fed;
		padding: 5px;
	}
		/* .square-boxの中用 */
		.type-post .mainBox .square-box .bgcolor-fed {
			margin: -5px; /* 余白狭く */
		}

/* その他本文テキストの装飾 ここまで///////////////////////////////////////// */

/* single投稿のみの設定 End--------------------- */

/* ブログ投稿CSS end ////////////////////////////////////////////////////// */

.mainBox { /* article内post本文エリア */
	margin-bottom: 20px;
	line-height: 1.7;
	font-size: 1.5rem; /* 個別設定漏れのため */
}
	.mainBox p {
		line-height: 1.7;
		font-size: 1.6rem; /* 16px */
		margin-bottom: 3.0rem; /* 1文字分 */
	}

	.mainBox .bold { /* 太字 */
		font-weight: bold;
	}
	.mainBox .underline {
		background: linear-gradient(transparent 80%, #fff6ba 0%);
	}
	.mainBox ol.numBox {
		list-style: decimal inside;
		background: #ecf6fd; /* rgba(207, 233, 249, 0.4) */
		padding: 1.5rem;
		margin:0 0 3.0rem; /* 1文字分 */
	}
	.numBox li{
		display: list-item;
	}
/* sectionマージン */
	.mainBox section {
		margin-bottom: 4.0rem; /* サイト共通 */
	}
/* post内の見出しタグ 2カラムblogスタイル本文タイトルは基本gothicに */

	.mainBox h2,
	.mainBox h3,
	.mainBox h4 {
		font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;
		line-height: 1.3;
		margin-bottom: 3.0rem; /* 1文字分 */
	}
	.mainBox h4 {
		position: relative;
		padding: 0 0 0 16px;
	}
	.mainBox h4:before{
		content: "";
		display: block;
		position: absolute;
		top: 2px;
		left: 0;
		background: #b19154;
		width: 6px;
		height: 80%;
	}
	/* ソースコード表示 */
	.mainBox .mark {
		font-family: Consolas, Menlo, 'Liberation Mono', Courier, monospace;
		background: #f3f3f3;
		padding: 2px 3px 4px;
		margin: 0 3px;
	}
/* 引用文 */
	.mainBox blockquote {
		background-color: #f8f8f8;
		background-image: url(../images/quote.png);
		background-repeat: no-repeat;
		background-position: left top;
		padding: 50px 20px 20px;
		margin: 20px 0 20px;
	}
	.mainBox blockquote p {
		font-size: 13px;
		line-height: 1.5;
		color: #666;
}
/* post内 STYLE 別スタイルシートに移動 ここまで----- */

/* 固定コンタクトページ----------------------------- */
.asterisk {
	color: #f00;
}


/* 固定コンタクトページ ここまで ----------------------------- */

/* SNSシェアボタン aside.sns*/
.sns {
	margin: 20px 0;
	padding: 10px 0;
}
.sns ul {
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	justify-content: space-between;
	text-align: center;
}
.sns li {
	width: 100%;
	padding: 2px;

}
.sns li a {
	display: block;
	padding: 6px 0;
	border-radius: 3px;
	background: #eee;
	color: #fff;
	text-decoration: none;
}
.sns .fa, /* snsアイコン */
.fa-hatena { /* はてブ */
	display: block;
	font-size: 18px;
	line-height: 18px;
}
.snstext {
	display:block;
	font-size: 10px;
	line-height: 11px;
}


/* snsボタン背景 */
/* ツイッター */
.sns .twitter a {
	background:#55acee;
}
.sns .twitter a:hover {
	background:#4892cb;
}

/* Facebook */
.sns .facebook a {
	background:#3b5998;
}
.sns .facebook a:hover {
	background:#324c81;
}

/* Pocket */
.sns .pocket a {
	background:#f03e51;
}
.sns .pocket a:hover {
	background:#c0392b;
}

/* はてぶ */
.sns .hatebu a {
	background:#00a5de;
}
.sns .hatebu a:hover {
	background:#008cbd;
}

/* LINE */
.sns .line a {
	background:#25af00;
}
.sns .line a:hover {
	background:#219900;
}
/* snsボタン背景 ここまで */

/* div.tagBox 記事の所属catとtagSet */
.tagBox {
	padding: 10px 0;
	margin: 20px 0;
	border-bottom: solid 1px #ccc; /* 投稿エンドライン */
}
.tagBox dl {
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	color: #888;
	line-height: 1.3;
}
	.tagBox dt { /* icon */
		padding: 2px 2px 2px 0;
	}
	.tagBox dd { /* タグ */
		width: 100%;
	}
	.tagBox dd a {
		display: inline-block;
		font-size: 12px;
		color: #63acb7;
		text-decoration: none;
		line-height: 14px;
		padding: 2px;
		font-feature-settings: "pkna" 1; /* プロポーショナル */
	}
	.tagSet a:before {
		content: "#";
	}

/* リンクカード表示(recent-post.php/list-view-posts.php/relatedPosts.php/shortcode_card_link)
----------------------------------------------------------------------------- */
/* 関連記事一覧 */
/* 関連section.relatedPosts アーカイブは.archiveSect*/
.archiveSect {
	margin: 40px 0;
	border-bottom: solid 1px #ccc;
}
.relatedPosts { /* 関連のみボーダートップ */
	margin: 40px 0;
	border-top: solid 1px #63acb7;
	border-bottom: solid 1px #63acb7;
}
.siteTop { /* topページのみ */
	border-top: solid 1px #ccc;
	padding-top: 20px;
}
.archiveSect.siteTop h2 {
	display: block;
	color: #555;
	/*font-family: 'Crimson Text', serif;*/
	/*font-weight: normal;*/
}
.archiveSect.siteTop h2 + p {
	display: none;
}

/* アーカイブページのみ */
.archiveSect h2 { /* アーカイブタイトル */
	display: none;
}
.archiveSect .list-view-box { /* h2非表示分margin border */
	margin-top: 20px;
}
.archiveSect .list-view:first-child {
	border-top: solid 1px #eee;
}
/* 投稿関連記事のみ */
.relatedPosts h2 { /* 関連記事 */
	display: inline-block;
	padding: 5px 15px;
	font-size: 15px;
	color: #fff;
	background: #63acb7;
	border-radius: 0 0 3px 3px / 0 0 3px 3px;
	margin-bottom: 10px;
}
.relatedPosts h2:before {
	content: "\f0f6";
	font-weight: normal;
	padding-right: 6px;
	font-family: FontAwesome;
}

/* 関連記事及び一覧表示 */
.list-view-box { /* ul */
	margin-bottom:20px;
}
#SideArea .list-view, /* サイド新着用 */
.list-view { /* li */
	padding: 10px 0;
	border-bottom: solid 1px #eee;
	}

.list-view dl.link-card { /* flexbox */
	position: relative; /* blog_infoの基点 */
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	cursor: pointer;
}
	.list-view dt { /* image */
		width: 80px;
		margin-right: 5px;
	}
	.list-view dd {
		flex:1;
	}

	/* 見出しタグ.card-title デフォルトはh3*/
	.list-view dd .card-title { /* 記事タイトル */
		position: static;
		padding: 0;
		margin-top: 0;
		font-size: 15px;
		line-height: 1.3;
		margin-bottom: 2px;
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
		font-weight: normal;
		font-feature-settings: "palt" 1;
		border: none;
	}
	.list-view dd .card-title::before {
		content: none;
	}
	.list-view dd .card-title a {
		color: #555;
		text-decoration: none;
	}
	.list-view dd .card-title a:hover {
		color: #b22222;
	}

	.list-view dd > div p { /* p.blog_info/p.excerpt/ */
		color: #888 !important;
		font-size: 12px !important;
		line-height: 1.3 !important;
	}
	.list-view dd .excerpt { /* 記事抜粋 p */
		display: none;
	}
	.list-view dd .blog_info {
		text-align: right;
		position: absolute;
		bottom: 0;
		right: 0;
		left: 85px; /* sp */
	}
	.blog_info .date {
		margin: 0 5px 0 0;
	}
	.date:before {
		content: "\f017";
		font-family: FontAwesome;
		margin-right: 2px;
		color: #aaa;
	}
	.blog_info .post_cat {
		display: none; /* 関連でカテゴリーは不要 */
	}
	.blog_info .post_tags {
		display:none; /* sp非表示 */
	}
	/* catIcon */
	.catIcon {
		position: absolute;
		top: -6px;
		left: -6px;
		line-height: 20px;
		width: 20px;
		text-align: center;
		color: #fff;
		font-size: 12px;
		box-sizing: content-box;
		border-radius: 50%;
		border: solid 2px #fff;
	}
	.catIcon.cat-11 { /* wordpress */
		background: #00a0e9;
	}
	.catIcon.cat-12 { /* music */
		background: #ffb22d;
	}
	.catIcon.cat-13 { /* interest */
		background: #25af00;
	}
	.catIcon.cat-14 { /* note */
		background: #ffb22d;
	}

/* エントリー記事内リンクカード */
.mainBox .list-view {
	padding: 10px 10px 24px;
	margin-bottom: 10px;
	border: solid 1px #e5e5e5;
	/*box-shadow: 1px 1px 1px #f6f4f3;*/
}
.entry_link {
	padding: 0;
}
 .list-view dd .entry_link .blog_info {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin: 0;
	position: absolute;
	bottom: -20px;
	right: 0;
	left: 0;
}
.entry_link .blog_info p {
	margin-bottom: 0;
}
.entry_link .blog_info .domainName {
	flex: 1;
	text-align: left;
}
.entry_link .blog_info .date {
	flex: 0 0 90px;
	margin: 0;
	text-align: right;
}

/* リンクカード表示 ここまで
----------------------------------------------------------------------------- */


/* アーカイブページページネーション div.paginateBox */
.paginateBox {
	padding: 15px 0 20px;
}
.paginateBox .pagenateInfo {
	text-align: center;
	font-size: 13px;
	color: #888;
	margin: 0 0 18px;
}
.paginateBox .nonePaginate { /* ページ送り無し 表示無しの場合*/
	display: none;
}
.paginateBox ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin: 0 auto;
}
.paginateBox li {
	text-align: center;
	flex: 1;
	padding: 2px;
}
.paginateBox .prev,
.paginateBox .next {
	flex: 2;
}
.paginateBox li a {
	background: rgba(238,238,238,1.0); /*#eee*/
	display: block;
	line-height: 50px;
	border-radius: 3px;
}
.paginateBox li a:hover {
	background: rgba(238,238,238,0.8);
}
.paginateBox li .btn_desc { /* ボタン下のテキスト */
	font-size: 11px;
	color: #aaa;
	padding-top: 6px;
}
.paginateBox .current {
	flex: 0 0 30px;
	line-height: 50px;
	color: #888;
	display: none;
}

/* single.php下部 ページナビ */
/* div.p-navi */
.p-navi { /* flexbox */
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	min-height: 80px;
	margin:40px 0 20px;
}
.p-navi dl a {
	position: relative; /* 日付スパンの基点 */
	display: block;
	height: 100%;
	padding: 5px 5px 20px 5px;
	text-decoration: none;
	background: #fff;
	box-shadow: 1px 1px 1px #f6f4f3;
	border: solid 1px #CCC;
	border-radius: 3px;
}
.p-navi dl a:hover {
	opacity: 0.8;
}
.p-navi dl.NewPost { /* 新しい記事 */
	width: 50%;
	margin: 0;
	padding-right: 2px;
}
.p-navi dl.BackPost { /* 古い記事 */
	width: 50%;
	margin: 0;
	padding-left: 2px;
	text-align: right;
}

.p-navi dl dt { /* ナビテキストnext previous */
	font-family: "Helvetica Neue", YuGothic, "Yu Gothic", Verdana, Meiryo, sans-serif;
	font-weight: bold;
	font-size: 14px;
	line-height: 1.3;
	float: none;
	width: auto;
	color: #63acb7;
	border-bottom: solid 1px #ccc;
	padding-bottom: 2px;
	margin-bottom: 5px;
}
.p-navi dl dd { /* p-navi 記事タイトル */
	font-size: 12px;
	line-height: 1.3;
	color: #555;
	padding: 0;
	text-align: left;
}
.p-navi dl dd span { /* 更新日 */
	position: absolute; /* dlのaを基点 */
	right: 5px;
	bottom: 5px;
	display: block;
	font-size: 10px;
}
/* single.phpページナビゲーション ここまで */




/* single.php コメント欄 */

/*--------------------------------
コメント
---------------------------------*/
#comments { /* div */
	font-size: 1.4rem; /* 14px */
	color: #555;
	margin: 20px 0;
}
#comments h2 { /* コメントがある時のタイトル */
	color: #888;
	margin-bottom: 1.0rem;
}
#comments h2:before {
	content: "\f0e5";
	font-weight: normal;
	padding-right: 5px;
	font-family: FontAwesome;
}

/* コメント リスト ol*/
.comments-list {
	padding: 10px 10px 10px 20px;
	border-top: solid 1px #eee;
	list-style: decimal outside;
}
.comments-list > li { /* コメントdepth-1 */
	display: list-item;
	margin-bottom: 20px;
	border-bottom: solid 1px #eee;
}
.comment-body { /* コメント */
	padding: 10px 10px 10px 0;
}
.comments-list .byuser > div > div .fn:after {
	content: "(管理人)";
	color: #888;
}

/* 返信コメントの装飾 ul*/
.comments-list .children .comment-body{
	padding-left: 10px;
}
.comments-list .children .comment-body:before {
	content: "Re:";
	color: orange;
	font-size: 12px;
}

.fn { /* cite */
	font-size: 13px;
	font-style: normal; /* default ltalic */
}
.vcard .fn {
	line-height: 18px;
}
.vcard .fn a {
	text-decoration: none;
}
.says { /* よりの部分 */
	display: none;
}

.comment-author.vcard .avatar { /* アバター */
	float: left;
	margin-right: 10px;
}

.comment-meta.commentmetadata { /* コメント日時 div */
	display: inline;
	font-size: 12px;
	line-height: 18px;
}
.comment-meta.commentmetadata a {
	text-decoration: none;
	color: #888;
}
.comment-meta.commentmetadata .comment-edit-link { /* 編集ボタン */
	position: static;
	text-decoration: none;
	color: #63acb7;
}
#comments p { /* コメント本文 */
	font-size: 14px;
	line-height: 1.5;
	color: #555;
	padding: 15px 0;
	clear: both;
}
#comments p a {
	color: #555;
}

.reply { /* 返信エリア */
	padding: 5px;
	text-align: right;
}
	.comment-reply-link { /* 返信リンク */
		text-decoration: none;
	}
	.comment-reply-link:before {
		content: "\f112";
		padding: 0 3px;
		font-family: FontAwesome;
	}

/* 開閉式ボタン js制御で続くdivを開閉する*/
.openBtn {
	border: solid 2px #ccc; /* blue #cfe9f9 gold #b19154*/
	border-radius: 3px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	text-align: center;
	padding: 15px 5px;
	margin: 0 20px 10px;
	cursor: pointer;
}
#comments .openBtn .btnText { /* ボタンテキスト */
	font-size: 16px;
	width: 100%;
	padding: 0;
}
#comments .openBtn .changeIco { /* ボタン開閉アイコン */
	width: 50px;
	border-left: solid 2px #ccc;
	color: #ccc;
	padding: 0;
}

/* -----コメントフォーム------ */
#comments label {
	display: block;
}
.metadata dd a {
	color: #555;
}

#comments #respond { /* コメントフォーム div */
	position:relative; /* キャンセルボタン基点 */
	margin-bottom: 10px;
	padding: 20px;
	color: #666;
	background: rgba(205,198,180,0.2); /* #CDC6B4(205,198,180) blue #f5fbfe */
	border-radius: 3px;
}
#comments #respond:before {
	content: "Message";
	color: #888;
	font-weight: bold;
	font-size: 18px;
	font-family: "Helvetica Neue", YuGothic, "Yu Gothic", Verdana, Meiryo, sans-serif;
}
	#respond .comment-reply-title a { /* コメントタイトル */
		text-decoration: none;
	}
	#respond a#cancel-comment-reply-link { /* 返信キャンセルボタン */
		position:absolute; /* コメントフォーム右上に表示 */
		right: 20px;
		top: 16px;
		display: block;
		background: #eee;
		padding: 5px 10px;
		border-radius: 3px;
	}
	#respond .required { /* フォーム必須項目※ */
		color: #CC2929; /* 赤 */
	}

#comments #commentlist img {
	padding: 10px;
}
textarea,
input[type="text"] {
	font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
	color:#555;
	background: #fff;
}
/* コメント記入欄 */
#comments textarea {
	line-height: 1.5;
	box-sizing:border-box;
	padding: 10px;
	margin-bottom: 10px;
	width: 100%;
	border: 1px #f2f2f2 solid;
}
/* 名前 メール サイト */
#comments input[type="text"] {
	box-sizing: border-box;
	padding: 10px;
	width: 100%;
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border: 1px #f2f2f2 solid;
}

/* コメントボタン */
	#comments input[type="submit"] {
	color: #fff;
	font-size: 16px;
	background: #ccc3ac; /* brown #ceb26c blue#00a0e9 */
	padding: 10px;
	width: 100%;
	-webkit-appearance: none;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border: 2px #fff solid;
	cursor: pointer;
}

/* single.php コメント欄 ここまで */




/* サイドエリア sideber Widget Area
 --------------------------------------- */
#SideArea { /* pc div#SideAreaはwidth:300px固定 */
	margin: 0 10px;
}
/* サイドエリア内ボックス divとasideで重要度区別*/
#SideArea .sideBox {
	padding: 10px; /* sideのinnerを300pxに揃える */
	margin-bottom: 20px;
	background: #FFF;
}

/* sideAreaのタイトル h2設定 */
#SideArea h2 {
	padding: 6px 0;
	margin-bottom: 10px;
	color: #555;
	border-bottom: solid 1px #ccc;
}
/* sideAreaのリスト section毎に設定 */
#categories-2 li, /* widgetカテゴリ */
#archives-2 li { /* widgetアーカイブ */
	padding: 5px 0;
	border-bottom: solid 1px #eee;
}
#categories-2 li a,
#archives-2 li a { /* side listのリンクはfont-size+paddingで高さ40px確保 */
	display: block;
	font-size: 16px;
	text-decoration: none;
	color: #555; /* hover #b22222 */
	padding: 12px 6px;
}
#categories-2 li a:hover,
#archives-2 li a:hover {
	color: #b22222;
}
#categories-2 li a .count,
#archives-2 li .count { /* 投稿数 */
	float: right;
	color: #999;
}
#categories-2 li li { /* 子供 */
	border: none;
	text-indent: 21px;
}
/* カテゴリにアイコン */
/*.cat-item > a:before { 共通設定
	font-family: FontAwesome;
	display: inline-block;
	width: 21px;
	color: #555;
}*/

/* recent-posts.php(最近の投稿カスタム)一覧表示なのでlist-viewで調整
----------------------------------------------------- */
.card-view {
	position: relative; /* div.blog_infoの基点 */
	padding: 10px 0;
	border-bottom: solid 1px #eee;
}
	.card-view a {
		text-decoration: none;
		display: block;
		height: 80px;
		color: #555;
	}
	.card-view a:hover {
		color: #b22222;
	}
.card-view dt {
	width: 80px;
	height:auto;
	margin-right: 5px;
	float: left;
}
/* カードビュー内テキスト設定 */
.card-view a h3 {
	font-size: 15px; /* 絶対指定 */
	line-height: 1.3;
}
.card-view .blog_info {
	position: absolute;
	bottom: 10px;
	right: 0;
}
.card-view a p {
	font-size: 12px; /* 絶対指定 */
	font-feature-settings: "pkna" 1; /* プロポーショナル */
	color: #888;
	text-align: right;
}
.card-view a .cat_tag {
	display: none;
}
.card-view a .cat-depth-0 {
	display: inline;
}
/* catIcon */
.card-view .catIcon {
	top: 4px;
	left: -6px;
}

/* cst-tag-cloud(タグクラウドカスタム)ul.cst-tag-cloud
----------------------------------------------------- */
.cst-tag-cloud {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap:wrap; /* 折り返し */
	width: 100%;
}
#SideArea .cst-tag-cloud li{
	width:50%;
	padding: 5px;
	border-bottom: none;
}
#SideArea .cst-tag-cloud li a {
	position: relative;
	padding: 0;
	color: #63acb7;
	font-size: 12px;
	font-feature-settings: "pkna" 1; /* プロポーショナル */
	line-height: 40px;
	display: block;
	width: 100%;
	height: 40px;
	border:solid 1px #eee;
	text-align: center;
	text-decoration: none;
}
#SideArea .cst-tag-cloud li a:hover {
	color: #b22222;
}
#SideArea .cst-tag-cloud li a:before {
	content: "#";
}
#SideArea .cst-tag-cloud li a:after {
	content: "";
	position: absolute;
	top:-1px;
	right:-1px;
	display: block;
	width:0;
	height:0;
	border: solid  5px #fff;
	border-left: 5px solid #eee;
	border-bottom: solid 5px #eee;
}

/* サイドバー検索フォーム
 ----------------------------------------------------- */
#searchform {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

#s { /* input[type="search"] */
	height: 40px;
	font-size: 14px;
	border:solid 1px #ccc;
	-webkit-appearance: none;
	border-radius: 0;
	padding: 0 10px;
	flex: 1;
	box-sizing: border-box;
}
#searchsubmit { /* 検索ボタンinput[type="submit"] */
	text-align: center;
	color:#fff;
	font-family: FontAwesome;
	font-size: 16px;
	background: #b19154; /* mens-gold#b19154 blue#00a0e9*/
	border: none;
	-webkit-appearance: none; /* スマホのグラデーション除去 */
	border-radius: 0;
	width: 50px;
	height: 40px;
	margin-left: 3px;
	cursor: pointer;
}
#searchsubmit:hover {
	opacity: 0.8;
}

/* sideber Widget Area カレンダー*/
#SideArea #calendar-2 {
	background: #fff;
}
#wp-calendar {
	width: 261px;
	margin: 0 auto;
}
#wp-calendar thead tr th {
	font-size: 14px;
	vertical-align: middle;
	width: 35px;
	height: 35px;
	text-align: center;
}

#wp-calendar td {
	text-align: center;
	vertical-align: middle;
	width: 35px;
	height: 35px;
}
#wp-calendar td a {
	display: block;
	color: #fff;
	text-decoration: none;
	line-height: 25px;
	height: 25px;
	width: 25px;
	margin: 0 auto;
	border-radius:50%;
	background: #00a0e9;
}

#wp-calendar caption {
	padding-top: 10px;
	padding-bottom: 5px;
	font-size: 14px;
}

#wp-calendar tbody tr #today {
	position: relative;
}
#wp-calendar tbody tr #today:after {
	content: "";
	position: absolute;
	bottom: 7px;
	left: 11px;
	width: 13px;
	height: 3px;
	border-bottom:solid 2px #00a0e9;
}
#wp-calendar #prev {
	text-align: left;
	padding-left: 10px;
	width: auto;
	border-radius:0;
}
#wp-calendar #next {
	text-align: right;
	padding-right: 10px;
	width: auto;
	border-radius:0;
}
#wp-calendar #prev a,
#wp-calendar #next a {
	width: auto;
	border-radius:0;
	color: #555;
	background: none;
}

/* サイドエリアメニュー grammy用*/
	.sideBox .menu li > a {
		position: relative; /* afterのアイコンの基点 */
		display: block;
		font-size: 15px;
		line-height: 40px;
		color: #555;
		text-decoration: none;
		padding: 0 5px;
		border-bottom:solid 1px #ccc;
	}
	.sideBox .menu li > a:after { /* （右向き矢印） */
		/* default font */
		content: "\f105";
		font-family: FontAwesome;
		display: block;
		width: 20px;
		position: absolute;
		right: 0;
		top: 0;
		font-size: 20px;
		line-height: 40px;
		color: #b19154; /* メンズゴールド */
	}

/* 各ページ下部のコンタクトエリア div class="contact-btn-box flexCont" */
.contact-box { /* コンタクトイメージとline/mail/telボタンを囲む */
	/* ショートコードで使える為、念のためmax-widthを指定 */
	position: relative; /* blog専用 */
	max-width: 1000px;
	margin: 75px auto 30px;
	padding: 10px 0;
	border-top: solid 1px #eee;
	border-bottom: solid 1px #eee;
}
	.contact-box:before { /* 記事内でわかり易いようタイトルを挿入 */
		content: "推し活倶楽部へのお問合せ";
		text-align: center;
		font-size: 13px;
		line-height: 40px;
		display: block;
		border-radius: 5px 5px 0 0 / 5px 5px 0 0; /* 水平方向の 左上、右上、右下、左下 / 垂直方向の 左上、右上、右下、左下 */
		position: absolute;
		top: -45px;
		left: 0;
		right: 0;
		height: 40px;
		color: #666;
		background: #f7f7f7;
	}
	/* mens-color */
		.contact-box.mens-box:before { /* 男性用 */
			content: "推し活倶楽部へのお問合せ(男性)";
		}
	/* ladies-color */
		.contact-box.ladies-box:before { /* 女性用 */
			content: "推し活倶楽部へのお問合せ(女性)";
			background: #f7f4e8;
		}

.contact-btn-box {
	padding: 0;
	margin: 20px 0;
}
	.contact-btn-box span {
		display: inline-block; /* spのみ改行 */
		width: 100%;
	}
	.contact-btn-box span.font-gothic { /* LINEのspanだけ */
		display: inline;
	}
	.contact-btn-box > div { /* spでは3分割 */
		position: relative;
		width: 33.333333333333333333333333333333%;
		padding-right: 5px;
	}
	.contact-btn-box > div:last-child {
		padding-right: 0;
	}
/* リンクボタンの共通設定 */
	.contact-btn-box a {
		display: block;
		padding: 6px 5px 5px 30px;
		height: 50px;
		text-align: center;
		border: solid 2px #ccc;
		border-radius: 4px;
		font-size: 14px; /* sp絶対指定px */
		line-height: 1.2;
		font-weight: normal;
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
		text-decoration: none;
	}
	.contact-btn-box a:before {
		position: absolute;
		top: 0;
		left: 0;
		content: '';
		display: block;
		width: 28px;
		height: 50px;
		vertical-align: middle;
		padding-right: 5px;
	}
	/* 各ボタンの設定 */
	/* sp */
	/* LINEボタン */
	.btn-line a {
		background: #106747;
		box-shadow: inset 0 0 2px 0 rgba(255,255,255,0.7); /* 光彩 */
		color: #fff;
	}
	.btn-line a:before {
		background: url(/wp-content/themes/custom/custom/mens/images/icon_line100x100.png) no-repeat;
		background-size: 28px 28px;
		background-position: right center;
		opacity: 0.7;
	}
	/* メールボタン */
	.btn-mail a {
		background: #958468;
		color: #fff;
		box-shadow: inset 0 0 2px 0 rgba(255,255,255,0.7); /* 光彩 */
	}
	.btn-mail a:before {
		background: url(/wp-content/themes/custom/custom/mens/images/icon_mail100x100.png) no-repeat;
		background-size: 26px 26px;
		background-position: right center;
		opacity: 0.7;
	}
	/* 電話ボタン */
	.btn-tel a {
		background: #f1ecd9;
		color: #333;
		box-shadow: inset 0 0 2px 0 rgba(255,255,255,0.7); /* 光彩 */
	}
	.btn-tel a:before {
		background: url(/wp-content/themes/custom/custom/mens/images/icon_tel100x100.png) no-repeat;
		background-size: 26px 26px;
		margin-left: 3px;
		background-position: right center;
		opacity: 0.7;
		padding: 0;
	}
	/* 女性用ボタンカラー */
	.ladies-line-color a{
		background: #2aa17c;
	}

	/* pc用ホバー設定 */
	.btn-line a:hover,
	.btn-mail a:hover,
	.btn-tel a:hover {
		/*opacity: 0.9;*/
	}
/* 各ページ下部のコンタクトエリア div class="contact-btn-box flexCont" End*/

/*--------------------------------------------------------------*/

/*--------------------------------------------------------------
3.3 FooterArea
--------------------------------------------------------------*/
footer#site-footer {
	background: #1a1a1a;
	border-top: solid 2px #584928;
}
#footerIn {
	font-size: 14px;
	padding: 20px 10px 0;
	text-align: center;
}
	#footerIn .footerCont { /* フッターのコンテナ */
		padding: 10px;
		margin-bottom: 15px;
	}

/* サイトロゴ */
	#footerIn #foot_logo { /* SP非表示 */
		display: none;
		margin-bottom: 0;
	}

/* snsボタン */
	#footerIn #footer_sns ul { /* snsボタン */
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		max-width: 210px;
		margin:0 auto;
	}
		#footerIn #footer_sns ul li {
			width: 50px;
			height: auto;
			margin-right: 30px;
		}
		#footerIn #footer_sns ul li:last-child {
			margin-right: 0;
		}
			#footerIn #footer_sns ul li a {
				display: block;
			}




/* フッターユーティリティナビ */
#footerIn #footer_util {
	padding: 10px 0 20px;
}
	#footerIn #footer_util ul {
		padding: 0;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		flex-wrap:wrap;
		justify-content: center; /* 子要素を左右中央 */
		max-width: 720px;
		margin: 0 auto;
	}
		#footerIn #footer_util ul li {
			width: 33.333333333333333333333333333333%; /* 3分割 */
			height: 50px;
			padding-right: 5px;
		}

		#footerIn #footer_util ul li:last-child {
			padding-right: 0;
		}
			#footerIn #footer_util ul li a{
				display: block;
				border: solid 1px #fff;
				border-radius: 3px;
				line-height: 50px;
				font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
				font-size: 12px;
				font-weight: normal;
				color: #fff;
				text-decoration: none;
			}
			#footerIn #footer_util ul li a:hover {
				background: #333;
			}
			/* 女性はコチラボタン */
			#footerIn #footer_util ul li.ladies_btn a {
				background: #d1807f; /* ピンクボタン */
			}
			#footerIn #footer_util ul li.ladies_btn a:hover {
				background: #e59595;
			}
				/* 男性はコチラボタン */
			#footerIn #footer_util ul li.mens_btn a {
				background: #465580; /* ブルーボタン */
			}
			#footerIn #footer_util ul li.mens_btn a:hover {
				background: #465fa9;
			}


/* フッタナビゲーション */
/* sp */
#footerIn #footerNavi {
	display: none;
	max-width: 1000px;
	margin: 0 auto;
}
	#footerIn #footerNavi li {
		display: inline-block;
		padding: 0 10px 0 0;
		margin-bottom: 10px;
		border-right:solid 1px #fff;
	}
	#footerIn #footerNavi li:last-child {
		border: none;
	}
		#footerIn #footerNavi li a {
			text-decoration: none;
			color: #fff;
		}
		#footerIn #footerNavi li a:hover {
			text-decoration: underline;
		}
/* 共通 common-foot-menu*/
#footerIn #common-foot-menu { /* div */
	padding: 0;
	max-width: 1000px;
	margin: 0 auto;
}
	#footerIn #common-foot-menu li {
		display: inline-block;
		padding: 0 10px 0 5px;
		margin-bottom: 10px;
		border-right: solid 1px #fff;
	}
	#footerIn #common-foot-menu li:last-child {
		border-right: none;
	}
		#footerIn #common-foot-menu li a {
			display: inline-block;
			color: #fff;
			text-decoration: none;
		}
		#footerIn #common-foot-menu li a:hover {
			text-decoration: underline;
		}

/* カレントページ */
#footerIn #footerNavi li.current-menu-item a,
#footerIn #common-foot-menu li.current-menu-item a {
	text-decoration: underline;
	color: #ccc;
}

#footerOut { /* copyの背景色を変える場合に使用 */
}
	#footer-copyArea p { /* copyrightの指定 */
		font-size: 10px;
		color: #ccc;
		text-align: center;
		padding: 20px 0;
	}


/*--------------------------------------------------------------
4.0 media Queries タブサイズ縦サイズ（750-939px)で適応したいCSS
--------------------------------------------------------------*/
@media print, screen and (min-width: 750px) and (max-width: 939px) {
/* iPad ボックスレイアウト min750px max939px */

/*--------------------------------------------------------------
4.0.1 common iPad縦 min750px max939px
--------------------------------------------------------------*/


/*--------------------------------------------------------------
4.1 headerとGnav（min750px max939px）iPad縦<header>
--------------------------------------------------------------*/
/* 画像背景のあるページのh2タイトル 共通 */
/* header投稿トップページのみイメージを出力---------------------------------- */
.art-title-box:before {
	padding-top: 11.066666666666666666666666666667%; /* エンター以外共通の高さ spと変わる部分 */
}
/* ページ共通（背景の中のh2） */
	.page-entry-title { /* h2 */
		height: 38px; /* default 1行テキストの高さ */
		font-size: 3.8rem; /* sp 3.0rem30px */
		line-height: 1.3;
	}
	/* 背景無しのdefaultpageタイトル */
	.df-page-entry-title {
		font-size: 3.8rem; /* pc 3.8rem38px */
	}

/* GRAMMY 固別ページ 設定 Start*/
/* ipadサイズ */

/* 共通 クラス*/
	/* class="title-style" でサイトと同じスタイルを適用*/
	.mainBox h2.title-style, /* 固定ページではコンテンツ内見出しはh3から */
	.mainBox h3.title-style {
		font-size: 3.0rem;
		margin: 0 auto 30px;
	}

/* 男性ページ 女性ページへのナビボタン ------------------------------------------------ */
/* ipadサイズ */
.mainbox-nav li a { /* ボタンリンク共通 */
		font-size: 1.8rem;
		line-height: 1.2;
		/*background: rgba(0,0,0,0.8);*/
	}
			.mainbox-nav li a > span { /* 英語フォント */
				font-size: 1.5rem;
			}

/* ページ内nav(ul)  backjs-btn menstop-btn ladiestop-btn */
.mainbox-nav .backjs-btn { /* 戻るボタン */
		display: block;
	}
/* 男性ページ 女性ページへのナビボタン End------------------------------------------------ */

/* GRAMMY 共通 クラス End*/

/* ブログトップページ -----------------------------------------------------------*/
#art-head-blog {
	background: url(/wp-content/themes/custom/custom/blog/images/page_img_pc.jpg) center/cover no-repeat;
}

/* プライバシーページ -----------------------------------------------------------*/

/* 固別ページ 設定 End*/

/* Global Nabigation
-----------------------------------------------------------*/


/*--------------------------------------------------------------
4.2 ContentsArea(min750px max939px)
--------------------------------------------------------------*/

/* #ContentArea内main ------------------------------------*/
/* ipadサイズ */
.sp-none { /* spのみ非表示  */
	display: block;
}
.sp-ipad-none { /* spとipad非表示 */
	display: none;
}

	/* 記事抜粋 p */
	.list-view dd .excerpt {
		display: block;
		margin: 10px 0 0;
	}

/* 各ページ下部のコンタクトエリア div class="contact-btn-box flexCont" */
/* ipadサイズ */
.contact-box:before { /* 記事内でわかり易いようタイトルを挿入 */
	font-size: 15px;
}
	.contact-btn-box span {
		display: inline; /* spサイズのみ改行 */
		width: auto;
	}

	.contact-btn-box > div { /* spでは3分割 */
		position: static;
		width: 50%;
		padding-right: 20px;
	}
	.contact-btn-box > div.btn-mail {
		padding-right: 0;
	}

/* リンクボタンの共通設定 */
	.contact-btn-box a {
		padding: 10px;
		text-align: center;
		height: auto;
		font-size: 1.8rem;
	}
	.contact-btn-box a:before {
		position: static;
		display: inline-block;
		width: 50px;
		height: 50px;
		vertical-align: middle;
		padding-right: 10px;
	}
	/* 各ボタンの設定 */
	/* ipad */
	/* LINEボタン */
	.btn-line a {
	}
	.btn-line a:before {
		background-size: 50px 50px;
		background-position: center;
	}
	/* メールボタン */
	.btn-mail a {
	}
	.btn-mail a:before {
		background-size: 40px 40px;
		background-position: center;
	}
	/* 電話ボタン */
	.btn-tel {
		display: none;
	}
/* 各ページ下部のコンタクトエリア div class="contact-btn-box flexCont" End*/

/* ブログ投稿CSS ////////////////////////////////////////////////////// */
/* iPadサイズ */
	/* 会話用吹き出しデザイン ------------------------------ */
/* 左アイコン右吹き出し ----------------------- */
	.b-voice .voice-img-l { /* 左figure */
		width: 60px; /* ブラウザで変更 */
		height: 60px; /* ブラウザで変更 */
	}
	.b-voice .voice-text-r { /* 右吹き出し */
		margin-left: 80px; /* ブラウザで変更 */
		margin-right: 40px; /* ブラウザで変更 */
	}

/* 右アイコン左吹き出し ----------------------- */
	.b-voice .voice-img-r { /* 右figure */
		width: 60px; /* ブラウザで変更 */
		height: 60px; /* ブラウザで変更 */
	}
	.b-voice .voice-text-l { /* 左吹き出し */
		margin-left: 40px; /* ブラウザで変更 */
		margin-right: 80px; /* ブラウザで変更 */
	}
/* ブログ投稿CSS end ////////////////////////////////////////////////////// */

/*--------------------------------------------------------------
4.3 FooterArea(min750px max939px)
--------------------------------------------------------------*/
/* フッターユーティリティナビ */
#footerIn {
	padding: 20px 0 0;
}

	#footerIn #footer_util ul {
		padding: 10px;
	}
		#footerIn #footer_util ul li {
			padding-right: 15px;
		}
		#footerIn #footer_util ul li:last-child {
			padding-right: 0;
		}
			#footerIn #footer_util ul li a{
				font-size: 15px;
			}
			#footerIn #footer_util ul li a:hover {
			}
			/* 女性はコチラボタン */
			#footerIn #footer_util ul li.ladies_btn a {
			}
			#footerIn #footer_util ul li.ladies_btn a:hover {
			}

/* フッタナビゲーション */
/* ipad */
#footerIn #footerNavi {
	display: block; /* sp非表示 */
}

#footerOut { /* copyの背景色を変える場合に使用 */
}
/* フッターコピー */
	#footer-copyArea p { /* copyrightの指定 */
		font-size: 14px;
	}

}/* 4.0 media Queries タブサイズ（750-939px)ここまで */


/*--------------------------------------------------------------
5.0 media Queries PCサイズ（940px）以上で適応したいCSS - PCとiPad横
PC画面幅（2018主流1920x1080）1880px半分スクロールバー考慮の上960から940に変更
--------------------------------------------------------------*/
@media print, screen and (min-width: 940px) {
/* pc ボックスレイアウト max1080px min940px */

/*--------------------------------------------------------------
5.0.1 common（940px）以上 PCとiPad横
--------------------------------------------------------------*/
/*body { 基準のフォントサイズ
	font-size: 15px;
}*/
/* ページトップボタン js連動 */
#page-top {
	bottom: 20px;
	right: 20px;
}


/*--------------------------------------------------------------
5.1 headerとGnav（940px）以上 PCとiPad横<header>
--------------------------------------------------------------*/
/* ノーマルヘッダー */
header#site-header {
	position: static; /* spはfixd */
	border: none;
	box-shadow: none;
}

header#site-header + #Wrap { /* pcではfixdしないのでpadding-top無し */
	padding-top: 0;
}

#headWrap {
	height: 190px; /* ユーティリティエリア100＋ナビの高さ60px マージン30px */
}
/* spナビゲーション非表示 */
#navBack {
	display: none;
}
#headWrap .siteName { /* h1ボックス */
	padding: 10px 0 20px;
}
#headWrap .siteName a { /* logo */
	display: inline-block;
	width: 297px;
	height: 62px;
}
/* pc-utility-navigation */
div#util-naviArea {
	display: block; /* sp none */
	position: absolute;
	top: 0;
	right: 10px;
	width: 592px;
	height: 100px;
	padding: 14px 0 10px ;
}

	div#util-naviArea li {
		float: left;
		height: 76px;
		margin-right: 10px;
	}
	div#util-naviArea li:last-child {
		margin-right: 0;
	}

/*utility各ボタン設定*/
		#util-naviArea li#util-tel { /* 電話番号エリア */
			width: 225px;
		}
		#util-naviArea li a { /* リストボタン共通 */
			display: block;
		}
		#util-naviArea li#util-line { /* lineボタン */
			width: 125px;
		}
		#util-naviArea li#util-mail { /* mailボタン */
			width: 125px;
		}
		#util-naviArea li#util-login { /* ログインボタン */
			width: 87px;
		}
/* Global Nabigation
-----------------------------------------------------------*/
div#navBack-pc { /* pc用 */
	display: block; /* sp none */
	position: absolute;
	top: auto; /* basic top:0; */
	bottom: 0;
	left: 0;
	right: 0;
	height: 60px;
	padding: 0 0 0 5px;
	z-index: 1; /* basic -1 */
}
#navBox-pc {
	position: static;
	float: right; /* basic right */
	margin: 0 auto;
	max-width: 1296px;
	height: 60px;
	width: 100%;
}

.mainNavi-pc { /* bacic */
	display: block;
	background: none;
	box-shadow: none;
	padding: 0;
}
/* color-pc グローバルナビ色 -----------------------*/

/* 基本は男性色 */
/* gnavi親要素ul.menu 子要素ul.sub-menu */
/* デフォルトで #navBox-pcナビをフレックスレイアウト*/
#navBox-pc ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap:wrap;
}

	#navBox-pc .menu li { /* Gnavi blogは6個*/
		width: 16.666666666666666666666666666667%; /* 216pxで6個 1296pxで162px幅 8コ 均等なら12.5% */
		height: 40px;
		text-align: center;
		border-right: solid 1px #FFF;
		padding: 0 5px;
	}
	#navBox-pc .menu li:last-child {
		border: none;
		padding:0 10px 0 5px;
	}
	#navBox-pc .menu li > a {
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
		font-size: 14px;
		font-weight: normal;
		display: block;
		height: 100%;
		overflow: hidden;
		line-height: 40px; /* 1行テキスト縦中央※brで2行にする際はspanで囲む */
		color: #FFF;
		text-decoration: none;
		border: none;
		border-radius: 4px;
	}
		#navBox-pc .menu li > a > span { /* 2行テキストlineheight */
			line-height: 1.5;
		}

		#navBox-pc .menu li > a:hover {
			background: #333;
		}
/* カレントページのボタン色 */
		#navBox-pc .menu li.current-menu-item > a {
		}
/*naviのサブメニュー対応 */
/* サブメニューbox(ul) なし*/
/*naviのサブメニュー対応 */
/* サブメニューbox(ul) */
#navBox .sub-menu {
	display: none; /* jQueryで開閉(db1base.js) */
	box-shadow: 1px 1px 1px rgba(77, 77, 77,0.5);
}
#navBox .sub-menu a {
	display: block;
	font-size: 12px;
	overflow: hidden;
	line-height: 40px;
	color: #FFF;
	text-decoration: none;
	background: #4d4d4d;
	border-top:solid 1px #444;
	border-bottom:none;
	margin-left: 0;
	text-indent: 5px;
	text-align: left;
}
	#navBox .sub-menu a:hover {
		background: #444;
	}

/* 画像背景のあるページのh2タイトル 共通 */
/* header投稿トップページのみイメージを出力---------------------------------- */
#sp-margin {
	padding-top: 0;
}
.art-title-box:before {
	padding-top: 11.066666666666666666666666666667%; /* エンター以外共通の高さ spと変わる部分 */
}
/* ページ共通（背景の中のh2） */
	.page-entry-title { /* h2 */
		height: 38px; /* default 1行テキストの高さ */
		font-size: 3.8rem; /* sp 3.0rem30px */
		line-height: 1.3;
	}
	/* 背景無しのdefaultpageタイトル */
	.df-page-entry-title {
		font-size: 3.8rem; /* pc 3.8rem38px */
	}

/* GRAMMY 固別ページ 設定 Start*/
/* pcサイズ */

/* 共通 クラス*/
	/* class="title-style" でサイトと同じスタイルを適用*/
	.mainBox h2.title-style, /* 固定ページではコンテンツ内見出しはh3から */
	.mainBox h3.title-style {
		font-size: 3.0rem;
		margin: 0 auto 60px;
	}

/* 男性ページ 女性ページへのナビボタン ------------------------------------------------ */
/* pcサイズ */
.mainbox-nav li a { /* ボタンリンク共通 */
		font-size: 1.8rem;
		line-height: 1.2;
	}
			.mainbox-nav li a:hover {
				/*background: rgba(0,0,0,0.8);*/
			}
			.mainbox-nav li a > span { /* 英語フォント */
				font-size: 1.5rem;
			}

/* ページ内nav(ul)  backjs-btn menstop-btn ladiestop-btn */
.mainbox-nav .backjs-btn { /* 戻るボタン */
		display: block;
	}

/* 男性ページ 女性ページへのナビボタン End------------------------------------------------ */

/* GRAMMY 共通 クラス End*/

/* ブログトップページ -----------------------------------------------------------*/
#art-head-blog {
	background: url(/wp-content/themes/custom/custom/blog/images/page_img_pc.jpg) center/cover no-repeat;
}

/* プライバシーページ -----------------------------------------------------------*/

/* 固別ページ 設定 End*/

/*--------------------------------------------------------------
5.2 ContentsArea（940px）以上 PCとiPad横
--------------------------------------------------------------*/
#Wrap { /* メインとサイドをdiv#wrap */
	position: relative;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex; /* 2カラムflex layout */
	margin: 20px auto;
	z-index: 0; /* header 1 */
}
#breadcrumb {
	font-size: 15px; /* sp12px */
}

/* メインエリア */
#ContentArea { /* div#ContentArea widthは740pxがマックスで縮小 */
	margin: 0 20px 0 0;
	-webkit-box-flex:1;
	-ms-flex:1;
	flex:1;
	padding: 20px 50px 30px;
	max-width: 740px;
}

/* #ContentArea内main ------------------------------------*/
/* pcサイズ */
.sp-none { /* spのみ非表示  */
	display: block;
}
.sp-ipad-none { /* spとipad非表示 */
	display: block;
}
		.mainBox { /* article内post本文エリア */
			line-height: 1.8;
		}
	/* div.p-navi */
		.p-navi {
			margin-bottom: 20px;
		}

/* 関連記事及び一覧表示 pc用 ---------------------- */

/* 関連section.relatedPosts アーカイブは.archiveSect */

.list-view { /* li */
	padding: 18px 0 ;
	}
	.list-view dt { /* image */
		width: 150px;
		-webkit-box-flex:0 0 150px;
		-ms-flex:0 0 150px;
		flex: 0 0 150px;
	}
		.list-view dt a img {
			width: 100%;
		}

	/* 見出しタグ.card-title */
	/* pc表示でタイトルを目立たせるため大きな文字を使う */
	.list-view dd .card-title {
		font-size: 18px; /* カード内はレイアウト維持のためpx固定 */
		margin-bottom: 18px;
	}
		/* side新着5記事カードのタイトル文字制御 */
		#SideArea .list-view dd .card-title {
			font-size: 15px; /* カード内はレイアウト維持のためpx固定 */
			margin-bottom: 8px;
		}

	/* div.blog_info */
	.list-view dd .blog_info {
		text-align: left;
		position: static;
		height: 15px;
		overflow: hidden;
		margin-bottom: 8px;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
	}
	.list-view dd .blog_info p {
		color: #aaa;
		display: inline;
		margin-right: 0;
	}
	/* 日付ボックス */
	.blog_info .date {
		flex:0 0 90px;
	}
	/* カテゴリタグボックス */
	.blog_info .post_cat {
		flex:0 0 auto;
		padding-right: 5px;
	}
		.blog_info .post_cat span {
			display: none;
		}
		.blog_info .post_cat span:last-child { /* 子カテゴリ */
			display: inline;
		}


	.blog_info .post_cat:before {
		content: "\f07c";
		font-family: FontAwesome;
		color: #aaa;
	}

	/* タグボックス */
	.blog_info .post_tags {
		flex: 1 1 0;
		min-width: 0;
	}
	.blog_info .post_tags .post_tag {
		display: inline-block;
		margin-right: 5px;
	}


	.blog_info .post_tags:before {
		content: "\f02c";
		font-family: FontAwesome;
		color: #aaa;
	}
	.blog_info .date:before,
	.blog_info .post_cat:before,
	.blog_info .post_tags:before {
		flex: 0;
	}

	/* 記事抜粋 p */
	.list-view dd .excerpt {
		display: block;
		margin: 0;
	}

/* 関連記事及び一覧表示 pc用 ここまで----------------- */

/* SNSシェアボタン div.sns*/
.sns {
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
}
.sns ul {
	width: 100%;
}


/* サイドエリア */
#SideArea { /* div#SideAreaはwidth:300px固定 */
	margin: 0;
	width: 320px;
	height:100%;
	-webkit-box-flex:0 0 320px;
	-ms-flex:0 0 320px;
	flex: 0 0 320px;
}
/* サイドエリア内ボックス div asideで重要度区別*/
#SideArea .sideBox {
	padding: 10px; /* sideのinnerを300pxに揃える */
	margin-bottom: 20px;
	background: #FFF;
}

/* pc サイドrecent postsの設定 */
.sideBox .list-view dt {
	width: 80px;
	-webkit-box-flex: 0 0 80px;
	-ms-flex: 0 0 80px;
	flex: 0 0 80px;
}
.sideBox .list-view .blog_info {
	text-align: right;
	position: absolute;
	bottom: 0;
	left: 85px;
	right: 0;
	margin: 0;
}
.sideBox .list-view .blog_info .post_cat {
	flex: 0 0 125px;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.sideBox .list-view .blog_info .post_cat:before {
	display: none;
}

/* 各ページ下部のコンタクトエリア div class="contact-btn-box flexCont" */
/* pcサイズ */
.contact-box:before { /* 記事内でわかり易いようタイトルを挿入 */
	font-size: 15px;
}
	.contact-btn-box span {
		display: inline; /* spサイズのみ改行 */
		width: auto;
	}

	.contact-btn-box > div { /* spでは3分割 */
		position: static;
		width: 50%;
		padding-right: 20px;
	}
	.contact-btn-box > div.btn-mail {
		padding-right: 0;
	}

/* リンクボタンの共通設定 */
	.contact-btn-box a {
		padding: 10px;
		height: auto;
		text-align: center;
		font-size: 1.8rem;
	}
	.contact-btn-box a:before {
		position: static;
		display: inline-block;
		width: 50px;
		height: 50px;
		vertical-align: middle;
		padding-right: 10px;
	}
	/* 各ボタンの設定 */
	/* pc */
	/* LINEボタン */
	.btn-line a {
	}
	.btn-line a:before {
		background-size: 50px 50px;
		background-position: center;
	}
	/* メールボタン */
	.btn-mail a {
	}
	.btn-mail a:before {
		background-size: 40px 40px;
		background-position: center;
	}
	/* 電話ボタン */
	.btn-tel {
		display: none;
	}
/* 各ページ下部のコンタクトエリア div class="contact-btn-box flexCont" End*/

/* ブログ投稿CSS ////////////////////////////////////////////////////// */
/* PCサイズ */
	/* 会話用吹き出しデザイン ------------------------------ */
/* 左アイコン右吹き出し ----------------------- */
	.b-voice .voice-img-l { /* 左figure */
		width: 60px; /* ブラウザで変更 */
		height: 60px; /* ブラウザで変更 */
	}
	.b-voice .voice-text-r { /* 右吹き出し */
		margin-left: 80px; /* ブラウザで変更 */
		margin-right: 40px; /* ブラウザで変更 */
	}

/* 右アイコン左吹き出し ----------------------- */
	.b-voice .voice-img-r { /* 右figure */
		width: 60px; /* ブラウザで変更 */
		height: 60px; /* ブラウザで変更 */
	}
	.b-voice .voice-text-l { /* 左吹き出し */
		margin-left: 40px; /* ブラウザで変更 */
		margin-right: 80px; /* ブラウザで変更 */
	}

/* ブログ投稿CSS end ////////////////////////////////////////////////////// */

/*--------------------------------------------------------------
5.3 FooterArea（940px）以上 PCとiPad横
--------------------------------------------------------------*/
#footerIn,
#footer-copyArea {
	max-width: 1500px;
	margin: 0 auto;
}
#footerIn {
	padding: 20px 0 0;
}



#footerIn #foot_logo { /* sp非表示 */
	display: block;
}


	#footerIn #foot_logo a {
		display: inline-block;
	}
/* フッターユーティリティナビ */
	#footerIn #footer_util ul {
		padding: 10px;
	}
		#footerIn #footer_util ul li {
			padding-right: 15px;
		}
		#footerIn #footer_util ul li:last-child {
			padding-right: 0;
		}
			#footerIn #footer_util ul li a{
				font-size: 15px;
			}
			#footerIn #footer_util ul li a:hover {
			}
			/* 女性はコチラボタン */
			#footerIn #footer_util ul li.ladies_btn a {
			}
			#footerIn #footer_util ul li.ladies_btn a:hover {
			}

/* フッタナビゲーション */
/* pc */
#footerIn #footerNavi {
	display: block; /* sp非表示 */
}

#footerOut { /* copyの背景色を変える場合に使用 */
}
/* フッターコピー */
	#footer-copyArea p { /* copyrightの指定 */
		font-size: 14px;
	}


}/* 5.0 media Queries PCサイズ（940px)ここまで */