/* basic-layout.css
style.cssを読み込む前に読込
ここで基本レイアウトをレスポンシブデザインで作成。
function.phpのfunction db_enqueue_stylesで定義読込
 */
@charset "UTF-8";
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------

1.0 BasicSetting （共通設定）
	>> COMMON JUMP
	>> HEADER/NAVI JUMP
	>> WRAP/#ContentArea/#SideArea JUMP
	>> FOOTER JUMP

2.0 media Queries タブサイズ縦サイズ（750-939px)
	>> COMMON JUMP iPad
	>> HEADER/NAVI JUMP iPad
	>> WRAP/#ContentArea/#SideArea JUMP iPad
	>> FOOTER JUMP iPad

3.0 media Queries PCサイズ（940px-）
	>> COMMON JUMP PC
	>> HEADER/NAVI JUMP PC
	>> WRAP/#ContentArea/#SideArea JUMP PC
	>> FOOTER JUMP PC
--------------------------------------------------------------*/


/*--------------------------------------------------------------
1.0 BasicSetting （共通設定）
--------------------------------------------------------------*/

/* >> COMMON JUMP
---------------------------------------------------------*/

* { /* color設定しない */
	margin: 0;
	padding: 0;
}
html {
	height: 100%;
}
body {
	height: 100%;
	font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
	color: #555; /* defaultサイト全体の基本フォント色 */
	min-width: 320px;
	word-wrap: break-word;
	background-color: #FFF; /* default */
}

/* リンクの基本色 ------------------------------*/
a {
	color: #4682b4; /* 青色 */
}
/* リンクにマウスオーバーした時の色 */
a:hover {
	color: #b22222; /* 赤茶色 */
	cursor: pointer;
}
/* 画像ホバー */
a:hover img {
	opacity: 0.8;
}

/* 共通クラス --------------------------------- */
/* clearfix */
.clearfix {
	zoom: 1;
}
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}
/* ロボット用のテキストを非表示 */
.forRobot {
	display: none; /* トップページのパンくず非表示 */
}


/* font size
-----------------------------------------------*/
html {
	font-size: 62.5%; /* 10px rem指定のため*/
}
body { /* 基準のフォントサイズ */
	font-size: 1.5rem; /* 15px */
}
h1,h2,h3,h4,h5,h6 {
	font-family:  "Helvetica Neue", YuGothic, "Yu Gothic", Verdana, Meiryo, sans-serif ;
	font-weight: bold;
	font-feature-settings: "palt" 1; /* プロポーショナル */
}
h1,h2 {
	font-size: 1.8rem; /* 18px */
}
h3,h4 {
	font-size: 1.6rem; /* 16px */
}
h5,h6 {
	font-size: 1.5rem; /* 15px */
	font-weight: bold;
	line-height: 1.6;
}

/* ページトップボタン js連動 pcのみ余白調整 */
#page-top {
	position: fixed;
	z-index: 9990; /* ヘッダーnaviより下にレイヤー */
	bottom: 10px;
	right: 10px; /* pc 20px */
	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;
}

/* >> HEADER/NAVI JUMP
---------------------------------------------------------*/
/* ヘッダーは最上部に固定表示-------------------------- */

/* 固定ヘッダー */
#fixed-header {
	position: fixed; /* headerを上部固定 57px */
	top: 0;
	width: 100%;
	z-index: 9995; /* #wrap 0 */

}

#headWrap {
	position: relative; /*positionの基点にする*/
	padding: 0 10px; /* 左右10px */
	min-height: 56px; /* navBackの高さ トップに固定するため*/
	margin: 0 auto; /* pc用 0 auto */
	text-align: left;
	max-width: 1200px; /* pc用 */
}
/* SITE Logo ------------------------------------*/
#headWrap .siteName {
	display:inline-block;
	position: absolute; /* #headWrap */
	top: 0;
	left: 10px;
	z-index: 9999;
}
#headWrap .siteName a { /* logo 画像defaultサイズ230x48px*/
	display: inline-block;
	width: 192px;
	height: 40px;
	line-height: 40px;
	margin: 8px 0;
	/* image画像設定なしの場合のfont設定 */
	text-decoration: none;
	color: #555;
	font-family:  "Helvetica Neue", YuGothic, "Yu Gothic", Verdana, Meiryo, sans-serif ;
	font-feature-settings: "palt" 1; /* プロポーショナル */
	font-size: 1.6rem; /*13文字以上はカラム落ち注意*/
	font-weight: bold;
}
/* header-add-area ------------------------------ */
#header-add-area { /* fixedheaderの高さ確保のためhtmlキープ */
	margin: 0 auto;
	padding-top: 57px;
	max-width: 1200px;
	min-height:1px;
}
	#header-site-image {
		padding:12px 0 0;
	}
	#header-description {
		padding: 12px;
		color: #757575;
		font-size: 1.3rem;
		line-height: 1.3;
		border-bottom: solid 1px #eee;
	}

	/* パンくずリスト */
		#breadcrumb { /* div#breadcrumb パンくずボックス */
			width: 100%;
			font-size: 12px; /* px固定 */
			line-height: 1.5;
			margin: 20px 0 10px;
			padding: 0 10px;
			font-feature-settings: "pkna" 1; /* プロポーショナル */
		}
			#breadcrumb li {
				float: left;
				padding: 2px 3px 2px 0;
			}
				#breadcrumb li a {
					text-decoration: none;
					padding: 3px;
				}
			#breadcrumb li::after {
				content: "\f105"; /* > */
				color: #aaa;
				padding: 0 3px;
				font-family: "FontAwesome";
			}
			/* liの最初 homeのアイコン */
			#breadcrumb li:first-child::before {
				content: "\f015"; /* homeIcon */
				font-family: "FontAwesome";
				padding-right: 1px;
				color: #999;
			}
			/* liの最後 */
			#breadcrumb li:last-child::after { /* 最後の( > )無し */
				display: none;
			}
			#breadcrumb li:last-child,
			#breadcrumb li:last-child a {
				color: #999;
			}
			#breadcrumb li:last-child a {
				padding: 3px;
			}
/* header-add-area End------------------------------ */

/* PC Utility Navigation -------------------------*/
#utilnavBox { /* pc width616 - 818 */
	display: none;
}


/* Global Nabigation (アコーディオンメニュー)
-----------------------------------------------------------*/
/* 開閉ボタン ----------------------*/
#navBack { /* position基点header #headWrap*/
	position: absolute; /* #headWrap */
	top: 0;
	left: 0;
	right: 0;
	height: 56px; /* スマホ画面を圧迫しない高さ */
	padding: 3px 10px 3px 240px; /* 高さ56pxに抑える 左ロゴサイズ230+10pxマージン */
	z-index: 9996; /* #fixed-header(9995)#page-top(9990)より上 */
}
#navBox { /* naviボタン */
	text-align: center;
	height: 50px;
	width: 50px;
	float: right; /* メニュー幅確保のためfloatで対応 */
	border-radius: 3px;
	cursor: pointer;
}
	#navBox .changeIco { /* p.changeIco (button_icon) */
		color: #757575;
		transition: .5s ;
		font-size: 32px;
		height: 32px;
		text-align: center;
		margin-top: 6px; /* icon sizeに合わせて調整 */
	}
	#navBox .changeIco:hover {
		color: #63acb7;
	}
	#navBox::after { /* button_text */
		content: attr(data-name);
		font-size: 11px;
		line-height: 11px;
		display:block;
		padding-bottom: 3px;
	}
/* アコーディオン */
#navBox .mainNavi { /* アコーディオン部分 */
	display: none; /* 初期設定 */
	position: absolute; /* pc static */
	top: 57px; /* headerHeight57px */
	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 20px 0;
	background: rgba(77, 77, 77, 0.9);
	box-shadow: 1px 1px 1px rgba(77, 77, 77,0.5);
}
	#navBox .mainNavi::after { /* アコーディオン下部閉じるボタン */
		white-space: pre-wrap;
		content:"\f057   close";
		display: block;
		font-size: 16px;
		line-height: 50px;
		padding-bottom: 20px;
		margin: 10px 0;
		color: #FFF;
		font-family: "FontAwesome";
		cursor: pointer;
		border-radius: 3px;
	}
	#navBox .nav-title {
		font-size: 15px;
		line-height: 40px;
		color: #FFF;
		text-align: left;
		background: #ccc;
		cursor: default;
	}

/* gnavi親要素ul.menu 子要素ul.sub-menu */
	#navBox nav ul li { /* Gnavi */
		text-align: left; /* pc center */
	}
	#navBox nav ul li a {
		position: relative; /* ::after base */
		display: block;
		font-size: 15px;
		overflow: hidden;
		line-height: 40px;
		color: #FFF;
		text-decoration: none;
		padding: 0 5px;
		border-bottom:solid 1px #474747;
	}
	#navBox nav ul li a::after {
		position: absolute;
		right: 10px;
		content: "\f105";
		font-family: FontAwesome;
	}
/*naviのサブメニュー対応 */
/* サブメニューbox(ul) */
#navBox ul.sub-menu a {
	margin-left: 15px;
}

/* >> WRAP/#ContentArea/#SideArea JUMP
---------------------------------------------------------*/
/* Common Wrap メインエリア#ContentArea と サイドエリア#SideAreaを内包 */
#Wrap { /* メインとサイドをdiv#wrap */
	position: relative;
	max-width: 1240px;
	margin: auto;
	z-index: 0; /* header 1 */
}
	/* メインエリア */
	#ContentArea { /* div#ContentArea widthは740pxがマックスで縮小 */
		margin: 0 10px 20px; /*pc margin-right: 20px;*/
	}
	#ContentArea > main,
	#ContentArea > div,
	#ContentArea > aside {
		padding: 20px 10px; /* pc 20px 50px 30px */
	}

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

/* author-card.php 著作者カード ----------- */
	.author-card { /*div*/
		background: #fcfcfc;
		border: solid 1px rgba(0,0,0,0.1);
		border-radius: 2px;
		padding: 20px;
		margin-top: 4.0rem;
	}
	/* アイコン */
	.author-card figure { /* avatar */
		width: 130px;
		margin: 0 auto;
		text-align: center;
	}
	.author-card figure img {
		border-radius: 100%;
		border: solid 4px #fff;
	}
	/* テキストエリア */
	/* text wrap .author-card > div*/
		.author-card div p {
			font-size: 15px;
			line-height: 1.3;
			margin: 15px 0;
		}
		/* 著者名 */
		.author-card div .author-name {
			font-weight: bold;
			text-align: center;
		}
		/* プロフィール概要 */
		.author-card div .author-desc {
			font-size: 14px;
			color: #757575;
		}
		/* 著者SNSリンクボタン */
		.author-card div .author-link {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			margin-bottom: 8px;
			line-height: 15px;
		}
		.author-card div .author-link::before {
			content:"\f0c1"; /* リンクマーク */
			font-family: FontAwesome;
			transform: scale(-1, 1); /* 左右反転 */
			padding-top:4px;
			margin-right:5px;
			color: #999;
		}
			.author-card div .author-link li,
			.author-card div .author-link-web .web-link {
				margin:0 10px 0 0;
				list-style: none;
				display: block;
			}
			.author-card div .author-link li:last-child {
				margin-right: 0;
			}
			/* リンクボタン 共通*/
			.author-card div .author-link a {
				display: inline-block;
				font-size: 13px;
				line-height: 13px;
				border-radius: 3px;
				padding: 5px 10px 5px 5px;
				text-decoration: none;
			}
			.author-card div .author-link a::before{
				padding-right: 3px;
			}
			/* twitterリンク */
			.author-card div .author-link .twitter a {
				color: #fff;
				background:#55acee;
			}
			.author-card div .author-link .twitter a::before{
				content:"\f099"; /* twitterマーク */
				font-family: FontAwesome;
			}
			/* Instagramリンク */
			.author-card div .author-link .instagram a {
				color: #fff;
				background:#ed3673;
			}
			.author-card div .author-link .instagram a::before{
				content:"\f16d"; /* instagramマーク */
				font-family: FontAwesome;
			}
			/* Web site リンク */
			.author-card div .author-link-web {
				margin: 0;
				font-size: 15px;
				line-height: 1.0;
			}
			.author-card div .author-link-web .web-link::before {
				content:"\f0ac"; /* fa-globeマーク */
				font-family: FontAwesome;
				padding-top:4px;
				margin-right:5px;
				color: #999;
			}
			.author-card div .author-link-web .web-link a {
				text-decoration: none;
			}
			/* link button */
			.author-card div .card-link-btn {
				margin:30px 0 0;
				text-align: center;
			}
			.author-card div .card-link-btn a {
				display: block;
				text-decoration: none;
				color: #63acb7;
				border: solid 1px #63acb7;
				border-radius: 3px;
				padding: 10px;
			}
			.author-card div .card-link-btn a:hover {
				color: #4682b4;
				border-color: #4682b4;
			}
			.author-card div .card-link-btn a:active {
				background: #63acb7;
				color:#fff;
			}

/* author-card.php 著作者カード End----------- */

/* >> FOOTER JUMP
---------------------------------------------------------*/

#footerIn {
	font-size: 14px;
	padding: 20px 10px;
}
	#footerIn .footerCont { /* フッター３つのコンテナ */
		padding: 10px;
	}
		#footerIn .footerCont .list-title { /* フッターコンテナ内タイトル */
			font-family: "Helvetica Neue", YuGothic, "Yu Gothic", Verdana, Meiryo, sans-serif;
			font-feature-settings: "pkna" 1;
			color: #757575;
			font-size: 16px;
			font-weight: normal;
			margin-bottom: 16px;
		}
		#footerIn .footerCont li.menu-item li > a { /* footer内ナビlist子階層 */
			text-indent: 6px;
		}
		#footerIn .footerCont li.menu-item a { /* footer内ナビlist共通クラスlink */
			display: block;
			padding: 12px 6px;
			font-size: 15px;
			margin-bottom: 4px;
			text-decoration: none;
		}
		#footerIn #footer-desc {
			padding: 0 10px;
		}
		/* LOGO */
			#footerIn #footer-desc p.SiteInfo-title {
				text-align: center;
				font-weight: bold;
				margin-bottom: 20px;
			}
			#footerIn #footer-desc p.SiteInfo-title a {
					text-decoration: none;
					color: #757575;
				}
				#footerIn #footer-desc p.SiteInfo-title span {
					display: block;
					font-size: 12px;
					padding-left: 12px;
				}

			#footerIn #footer-desc p { /* フッターコンテンツ内のテキスト */
				color: #757575;
				line-height: 1.6;
				max-width: 500px;
				margin: 0 auto 10px;
			}
	#footer-copyArea p { /* copyrightの指定 */
		font-size: 14px;
		color: #757575;
		text-align: center;
		line-height: 50px;
	}


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

/* >> COMMON JUMP iPad
---------------------------------------------------------*/

/* >> HEADER/NAVI JUMP iPad
---------------------------------------------------------*/

/* >> WRAP/#ContentArea/#SideArea JUMP iPad
---------------------------------------------------------*/


	/* author-card.php 著作者カード ----------- */
	.author-card { /*div*/
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		margin-top: 4.0rem;
	}
	/* アイコン */
	.author-card figure { /* avatar */
		width: 130px;
		-webkit-box-flex: 0 0 130px;
		-ms-flex: 0 0 130px;
		flex: 0 0 130px;
		margin-right: 5px;
	}
	.author-card figure img {
		margin: 15px 0;
	}
	/* テキストエリア */
	.author-card > div { /* text wrap */
		flex: 1;
	}
			/* 著者名 */
		.author-card div .author-name {
			text-align: left;
		}
		/* link button */
		.author-card div .card-link-btn {
			margin: 15px 0 0;
			text-align: right;
		}
		.author-card div .card-link-btn a {
			display: inline-block;

		}

/* >> FOOTER JUMP iPad
---------------------------------------------------------*/
#footerIn,
#footer-copyArea {
	max-width: 1200px;
	margin: 0 auto;
}
#footerIn {
	padding: 20px 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
#footerIn .footerCont {
	width: 33.33333333333333%; /* box3個並べる */
	border-right:solid 1px #bbb;
	padding: 0 30px;
}
#footerIn .footerCont li.menu-item a { /* footer内ナビlist共通クラスlink */
	padding: 10px 0;
	font-size: 14px;
}
	#footerIn .footerCont:last-child {
		border: none;
	}

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




/*--------------------------------------------------------------
3.0 media Queries PCサイズ（940px-）
--------------------------------------------------------------*/
@media print, screen and (min-width: 940px) { /* pc ボックスレイアウト max1080px min940px ///////////////////////*/

/* >> COMMON JUMP PC
---------------------------------------------------------*/

/* ページトップボタン js連動 pcのみ余白調整 */
#page-top {
	bottom: 20px;
	right: 20px;
}

/* >> HEADER/NAVI JUMP PC
---------------------------------------------------------*/
#headWrap .siteName a { /* logo 画像defaultサイズ230x48px*/
	width: 230px; /* sp 192x40px */
	height: 48px;
	line-height: 48px; /* sp 40px */
	margin: 4px 0; /* sp 8px 0 */
}
/* header-add-area ------------------------------ */
/* パンくずリスト */

/* header-add-area End--------------------------- */
/* Global Nabigation PC
-----------------------------------------------------------*/
/* PC Utility Navigation -------------------------*/
#utilnavBox { /* pc width616 - 818 */
	display: block;
	position: absolute;
	top: 0;
	left: 240px; /* logo width + 10px */
	right: 60px; /* menuボタン width */
	height: 56px;
	padding: 3px 5px;
	z-index: 9997;
}
	#utilnavBox ul { /* flex */
		display: flex;
		flex-flow: row;
		justify-content: flex-end; /* 右寄せ */
		height: 50px;
		align-items: center; /* 子要素縦中央 */
	}
	#utilnavBox a { /* ボタン */
		position: relative; /* hover基点 */
		font-size: 1.3rem;
		color: #757575;
		text-align: center;
		font-feature-settings: "pkna" 1;
		text-decoration: none;
		display: block;
		padding: 12px 10px;
	}
	#utilnavBox a::after {
		content: '';
		height: 3px;
		content: '';
		position: absolute;
		right: 10px;
		bottom: 0;
		left: 10px;
		background-color: #63acb7;
		transform: scale(0, 1);
		transform-origin: center top;
		transition: transform .3s;
	}
	#utilnavBox a:hover::after {
		transform: scale(1, 1);
	}

/* Global Nabigation (アコーディオンメニュー)
-----------------------------------------------------------*/
#navBox .mainNavi { /* アコーディオン部分 */
	left: auto;
	right: 10px;
	width: 330px; /* pcのみサイドエリアに合わせる */
	height: auto; /* pcのみ画面いっぱいにしない */
	overflow-x: auto; /* スクロールバー解除 */
}

/* >> WRAP/#ContentArea/#SideArea JUMP PC
---------------------------------------------------------*/
/* Common Wrap メインエリア#ContentArea と サイドエリア#SideAreaを内包 */
#Wrap { /* メインとサイドをdiv#wrap */
	position: relative;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex; /* 2カラムflex layout */
	justify-content: space-between; /* 二つの要素を両端ぞろえ */
	margin: 20px auto;
	padding: 0 20px;
	z-index: 0; /* header 1 */
}

	/* メインエリア */
	#ContentArea { /* div#ContentArea widthは740pxがマックスで縮小 */
		margin: 0 20px 0 0; /* カラム間最大で40px 最小20px */
		-webkit-box-flex:1;
		-ms-flex:1;
		flex:1;
		max-width: 840px;
	}
		#ContentArea > main,
		#ContentArea > div,
		#ContentArea > aside {
			padding: 20px;
		}


	/* サイドエリア */
	#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;
	}


	/* author-card.php 著作者カード ----------- */
	.author-card { /*div*/
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		margin-top: 4.0rem;
	}
	/* アイコン */
	.author-card figure { /* avatar */
		width: 130px;
		-webkit-box-flex: 0 0 130px;
		-ms-flex: 0 0 130px;
		flex: 0 0 130px;
		margin-right: 5px;
	}
	.author-card figure img {
		margin: 15px 0;
	}
	/* テキストエリア */
	.author-card > div { /* text wrap */
		flex: 1;
	}
			/* 著者名 */
		.author-card div .author-name {
			text-align: left;
		}
		/* link button */
		.author-card div .card-link-btn {
			margin: 15px 0 0;
			text-align: right;
		}
		.author-card div .card-link-btn a {
			display: inline-block;

		}

/* >> FOOTER JUMP PC
---------------------------------------------------------*/

#footerIn,
#footer-copyArea {
	max-width: 1200px;
	margin: 0 auto;
}
#footerIn {
	padding: 20px 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
#footerIn .footerCont {
	width: 33.33333333333333%; /* box3個並べる */
	border-right:solid 1px #bbb;
	padding: 0 30px;
}
#footerIn .footerCont li.menu-item a { /* footer内ナビlist共通クラスlink */
	padding: 6px 10px;
}
	#footerIn .footerCont:last-child {
		border: none;
	}

/* #footerOut { copyの背景色を変える場合に使用 } */

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