@charset "utf-8";



/* 基本設定
-----------------------------------------------------------------------------------------*/
body {
	margin: 0;
	padding: 0;

	color:#333333;
	font-family:"メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", HiraKakuPro-W3, "ヒラギノ角ゴ Pro W3", "MS P ゴシック", verdana, sans-serif;

	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-o-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
@media print{
	body {
		font-size:10px;
	}
}
img {
	border:0;
	vertical-align: bottom;
}
a {
	color:#1DB8EE;
	text-decoration:none;
}
a:hover {
	color:#888888;
}

/* Material iconsを利用する */
.material-icons {
	display:inline-block;
	padding:4px;
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	color:#000000;
	line-height: 1;
	text-transform: none;
	/* WebKitブラウザサポート */
	-webkit-font-smoothing: antialiased;
	/* Chrome、Safariサポート */
	text-rendering: optimizeLegibility;
	/* Firefoxサポート */
	-moz-osx-font-smoothing: grayscale;
	/* IEサポート */
	font-feature-settings: 'liga';
}
a.material-icons:hover {
	border-radius: 20px;
	background:#f0f0f0;
	color:#000000;
	text-decoration:none;
}

/*スクロールバー*/
::-webkit-scrollbar {
	width: 8px;
}
::-webkit-scrollbar-track {
	box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
}
::-webkit-scrollbar-thumb {
	background-color: rgba(204, 204, 204, 100);
	box-shadow:0 0 0 1px rgba(255, 255, 255, .3);
}

.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
}



/* header
-----------------------------------------------------------------------------------------*/
#header {
	display:block;

	position:fixed;
	z-index:30;
	left:0;
	top:0;

	border-bottom:1px solid #eeeeee;
	background: rgba(248, 248, 248, 0.9);

	margin: 0;
	padding: 0;

	width:100%;
	height:80px;
}
#header div {
	position:relative;
	margin: 0 auto;
	width:100%;
	max-width:1260px;
}
#header div h1 {
	position:absolute;
	z-index:100;
	left:10px;
	top:10px;

	margin: 0;
	padding: 0;

	width:180px;
	height:60px;
}
#header div h1 img {
	display:block;
	height:100%;
}
#header div p {
	display:none;

	position:fixed;
	z-index:100;
	right:10px;
	top:10px;

	margin: 0;
	padding: 0;
}
#header div p a {
	font-size:2em;
	line-height: 100%;
}
@media screen and (max-width: 800px){
	#header {
		height:60px;
	}
	#header div h1 {
		height:40px;
	}
	#header div p {
		display:block;
	}
}



/* footer
-----------------------------------------------------------------------------------------*/
#footer {
	display:block;

	background: #eeeeee;

	margin: 160px 0 0 0;
	padding: 30px 0 10px 0;

	width:100%;
}
#footer ul {
	margin: 0;
	padding: 0;
	font-size:0.8em;
	color:#666666;
	line-height: 160%;
	text-align : center;
	list-style:none;
}
#footer ul li {
	display:inline-block;
	margin: 0 10px 10px 10px;
	padding: 0;
}
#footer ul li a {
	color:#000000;
}
#footer ul li a:hover {
	text-decoration:underline;
}
#footer p {
	margin: 20px 0 0 0;
	padding: 0;
	font-size:0.8em;
	color:#666666;
	line-height: 120%;
	text-align : center;
}
@media screen and (max-width: 600px){
	#footer {
		margin: 100px 0 0 0;
		padding: 20px 0 10px 0;
		font-size:0.8em;
	}
	#footer p {
		margin: 0;
	}
}



/* navigation
-----------------------------------------------------------------------------------------*/
nav#breadcrumb {
	display:block;
	position:relative;
	z-index:10;
	top:80px;
}
nav#breadcrumb div {
	margin: 0 auto;
	padding: 20px 0;

	width:calc(100% - 20px);
	max-width:1240px;
	height:20px;

	font-size:0.8em;
	color:#000000;
	line-height: 100%;
	text-align : left;
}
nav#breadcrumb div:after {
	content : "";
	display : block;
	height : 0;
	clear : both;
}
nav#breadcrumb div ol {
	margin: 0;
	padding: 0;

	width:calc(100% - 120px);

	font-size:0.9em;
	color:#444444;
	line-height: 160%;
	text-align : left;

	list-style:none;

	float:left;
}
nav#breadcrumb div ol li {
	display:inline-block;

	margin: 0;
	padding: 0 0 0 20px;
}
nav#breadcrumb div ol li:before {
	content:">";
}
nav#breadcrumb div ol li:first-child {
	padding: 0;
}
nav#breadcrumb div ol li:first-child:before {
	content:"";
}
nav#breadcrumb div ol li a {
	color:#444444;
	text-decoration:none;
}
nav#breadcrumb div ol li a:hover {
	text-decoration:underline;
}
nav#breadcrumb div p {
	margin: 0;
	padding: 0;

	width:100px;

	float:right;
}
nav#breadcrumb div p a {
	display:block;
	border-radius:10px;
	background: #0168B7;
	margin: 0;
	padding: 4px 20px;
	color:#ffffff;
	text-align:center;
}
nav#breadcrumb div p a:hover {
	background:#1DB8EE;
}

nav#navigation {
	display:block;
}
nav#navigation > div > form {
	position:fixed;
	z-index:100;
	right:calc((100% - 1240px) / 2);
	top:20px;

	margin: 0;
	padding: 0;

	font-size:0.8em;
	color:#666666;
	line-height: 100%;
	text-align : right;
}
nav#navigation > div > form p {
	margin: 0;
	padding: 0;
}
nav#navigation > div > form p input[type=text], nav#navigation > div > form select {
	border:1px solid #aaaaaa;
	border-radius:0;

	background:#ffffff;

	margin: 0;
	padding: 6px 4px;

	font-size:14px;
	font-family:"メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", HiraKakuPro-W3, "ヒラギノ角ゴ Pro W3", "MS P ゴシック", verdana, sans-serif;

	vertical-align:middle;
}
nav#navigation > div > form p input[type=text] {
	width:400px;
}
nav#navigation > div > form p select {
	padding: 5px 4px;
}
nav#navigation > div > form p input[type=submit] {
	-webkit-appearance: none;
	-moz-appearance: none;
	border:0;
	background:none;

	margin: 0;
	padding: 0;

	font-size:24px;

	vertical-align:middle;
}
nav#navigation > div > div {
	position:absolute;
	z-index:20;
	right:calc((100% - 1240px) / 2);
	top:150px;

	margin: 0;
	padding: 0;

	width:100%;
	max-width:300px;

	font-size:0.8em;
	color:#000000;
	line-height: 100%;
	text-align : left;
}
nav#navigation > div > div dl {
	margin: 0 0 20px 0;
	padding: 0;
}
nav#navigation > div > div > dl {
	margin: 0 0 30px 0;
}
nav#navigation > div > div > dl > dt {
	background:#f3f3f3;
	border-radius:6px;
	margin: 0 10px 10px 10px;
	padding: 8px 0;
	font-size:1.2em;
	font-weight:bold;
	cursor:pointer;
}
nav#navigation > div > div > dl > dt:before {
	content:"keyboard_arrow_right";
	font-family: "Material Icons";
	color:#999999;
	font-weight:bold;
	vertical-align:middle;
}
nav#navigation > div > div > dl > dt.current:before {
	content:"keyboard_arrow_down";
	font-family: "Material Icons";
}
nav#navigation > div > div dl dd dl dt {
	margin: 0 0 8px 22px;
	padding: 0 0 0 4px;
	font-weight:bold;
}
nav#navigation > div > div dl dd {
	margin: 0;
	padding: 0;
}
nav#navigation > div > div dl dd ul {
	margin: 0 0 0 22px;
	padding: 0;
	list-style:none;
}
nav#navigation > div > div dl dd ul li {
	margin: 4px 0 0 0;
	padding: 0;
}
nav#navigation > div > div dl dd ul li a {
	display:inline-block;
	margin: 0;
	padding: 4px;
	color:#333333;
}
nav#navigation > div > div dl dd ul li a:hover {
	text-decoration:underline;
}
nav#navigation > div > div dl dd ul li.level,
nav#navigation > div > div dl dd ul li.category,
nav#navigation > div > div dl dd ul li.translation {
	display : inline-block;
	border-radius:4px;
	background: #1DB8EE;
	margin: 0 0 4px 0;
	padding: 4px;
	font-size:0.8em;
	color:#ffffff;
	line-height: 100%;
	font-style:normal;
}
nav#navigation > div > div dl dd ul li.level {
	background:#E9787D;
}
nav#navigation > div > div dl dd ul li.category {
	background:#129AFE;
}
nav#navigation > div > div dl dd ul li.translation {
	background:#7BCE82;
}
nav#navigation > div > div dl dd ul li.level a,
nav#navigation > div > div dl dd ul li.category a,
nav#navigation > div > div dl dd ul li.translation a {
	margin: 0;
	padding: 0;
	color:#ffffff;
}
nav#navigation > div > div dl dd ul li.level a:hover,
nav#navigation > div > div dl dd ul li.category a:hover,
nav#navigation > div > div dl dd ul li.translation a:hover {
	opacity:0.7;
	text-decoration:none;
}
@media screen and (max-width: 1260px){
	nav#navigation > div > form,
	nav#navigation > div > div {
		right:10px;
	}
}
@media screen and (max-width: 800px){
	nav#breadcrumb {
		top:60px;
	}
	nav#navigation {
		display:none;
		z-index:1000;
		position:fixed;
		top:60px;
		right:0;
		width:300px;
		height:calc(100% - 60px);
		overflow:hidden;
	}
	nav#navigation > div {
		position:absolute;
		left:auto;
		right:-300px;
		top:0;
		background:#fafafa;
		border:0;
		width:calc(100% - 20px);
		height:100%;
		overflow:auto;
	}
	nav#navigation > div > form {
		position:static;
		margin: 0;
		padding: 10px 10px 20px 10px;
	}
	nav#navigation > div > form p {
		background:#ffffff;
		margin: 0;
		padding: 10px 0;
		text-align:center;
	}
	nav#navigation > div > form p input[type=text], nav#navigation > div > form select {
		border:1px solid #aaaaaa;
		border-radius:0;

		margin: 0;
		padding: 6px 4px;

		font-size:10px;
	}
	nav#navigation > div > form p input[type=text] {
		width:100px;
	}
	nav#navigation > div > div {
		position:static;
	}
}



/* section
-----------------------------------------------------------------------------------------*/
#main {
	display:block;

	position:relative;
	z-index:10;
	top:80px;

	margin: 0 auto;
	padding: 0;

	width: 100%;
	max-width:1260px;

	font-size:0.9em;
	line-height: 160%;
}
#main > header,
#main > article {
	display:block;

	margin: 0 10px 40px 10px;
	padding: 0;

	width:calc(100% - 340px);
	max-width:900px;

	vertical-align:top;
}
#main > article {
	min-height:600px;
}

#main > article #slider {
	margin: 0 0 80px 0;
	padding: 0;
	list-style:none;
}
#main > article #slider li {
	margin: 0;
	padding: 0;
}
#main > article #slider li img {
	width:100%;
}

#main header h2 {
	border-top:3px solid #0168B7;
	border-bottom:1px solid #0168B7;
	margin: 0;
	padding: 16px 10px 12px 10px;
	font-size:1.3em;
	color:#000000;
	line-height: 100%;
	text-align : left;
}
#main article h3 {
	border-left:4px solid #0168B7;
	margin: 40px 0 0 0;
	padding: 2px 10px 2px 6px;
	font-size:1.2em;
	color:#000000;
	line-height: 100%;
	text-align : left;
}
#main article h4 {
	border-bottom:1px solid #0168B7;
	margin: 30px 0 0 0;
	padding: 0 10px 8px 10px;
	font-size:1.2em;
	color:#000000;
	line-height: 100%;
	text-align : left;
}
#main article p {
	margin: 20px 0 0 0;
	padding: 0 10px;
}
@media screen and (max-width: 1024px){
	#main {
		font-size:0.8em;
	}
}
@media screen and (max-width: 800px){
	#main {
		top:60px;
	}
	#main > header,
	#main > article {
		width:calc(100% - 20px);
	}
}
@media screen and (max-width: 600px){
	#main > article #slider {
		margin: 0;
	}
}
@media screen and (max-width: 480px){
	#main {
		font-size:0.7em;
	}
}



/* book_list
-----------------------------------------------------------------------------------------*/
#main > article ul.book_list {
	letter-spacing: -0.5em;

	margin: 20px 0 0 0;
	padding: 0;

	list-style:none;
}
#main > article ul.book_list * {
	letter-spacing: normal;
}
#main > article ul.book_list li {
	display : inline-block;

	margin: 0 0 20px 0;
	padding: 0;

	width:calc((100% - 20px) / 2);
	vertical-align:top;
}
#main > article ul.book_list li:nth-child(even){
	margin-left:20px;
}
#main > article ul.book_list li a {
	display : block;

	margin: 0;
	padding: 10px;

	color:#333333;
	text-decoration:none;
}
#main > article ul.book_list li a:hover {
	background:#f3f3f3;
}
#main > article ul.book_list li a:after {
	content : "";
	display : block;
	height : 0;
	clear : both;
}
#main > article ul.book_list li a img {
	border:1px solid #cccccc;

	margin: 0 10px 0 0;
	padding: 0;

	width:140px;

	float:left;
}
#main > article ul.book_list li a p {
	margin: 0;
	padding: 4px 0 4px 0;

	width:calc(100% - 152px);

	float:left;
}
#main > article ul.book_list li a em {
	display : inline-block;
	margin: 0 0 4px 0;
	padding: 4px;
	font-size:1.1em;
	color:#015A9D;
	line-height: 100%;
	font-style:normal;
	font-weight:bold;
	vertical-align:top;
}
#main > article ul.book_list li a em.level,
#main > article ul.book_list li a em.category,
#main > article ul.book_list li a em.translation {
	display : inline-block;
	border-radius:4px;
	font-size:0.8em;
	color:#ffffff;
	font-weight:normal;
}
#main > article ul.book_list li a em.level {
	background:#E9787D;
}
#main > article ul.book_list li a em.category {
	background:#129AFE;
}
#main > article ul.book_list li a em.translation {
	background:#7BCE82;
}
#main > article ul.book_list li a span {
	display : block;
	padding: 0 0 8px 0;
}
#main > article ul.book_list li a strong {
	display : block;
	padding: 0 0 8px 0;
	font-size:1.2em;
	color:#1DB8EE;
}
@media screen and (max-width: 1024px){
	#main > article ul.book_list li {
		width:100%;
	}
	#main > article ul.book_list li:nth-child(even){
		margin-left:0;
	}
}
@media screen and (max-width: 600px){
	#main > article ul.book_list li a img {
		width:80px;
	}
	#main > article ul.book_list li a p {
		width:calc(100% - 92px);
	}
}



/* detail
-----------------------------------------------------------------------------------------*/
#main > article div.book_view {
	margin: 0 auto;
	padding: 0;

	width:calc(100% - 20px);
}
#main > article div.book_view:after {
	content : "";
	display : block;
	height : 0;
	clear : both;
}
#main > article div.book_view header h1 {
	background:none;
}
#main > article div.book_view .image {
	margin: 0;
	padding: 0;

	width:300px;

	text-align:center;

	float:left;
}
#main > article div.book_view .image img {
	border:1px solid #cccccc;
	margin-bottom: 8px;
	width:calc(100% - 2px);
}
#main > article div.book_view .image a {
	display:block;
	border-radius:10px;
	background: #1DB8EE;
	margin: 0 0 8px 0;
	padding: 4px 20px;
	font-size:0.8em;
	line-height:100%;
	color:#ffffff;
}
#main > article div.book_view .image a:hover {
	opacity:0.7;
}

#main > article div.book_view header {
	display:block;

	margin: 0;
	padding: 0;

	width:calc(100% - 320px);

	float:right;
}
#main > article div.book_view header h3 {
	border:0;

	margin: 0;
	padding: 0 0 8px 0;

	font-size:1.8em;
	font-weight:normal;
	line-height:140%;
}
#main > article div.book_view header h3 span {
	display:inline;
	margin: 0;
	padding: 0;
	font-size:0.7em;
	line-height:140%;
}
#main > article div.book_view header h4 {
	margin: 0;
	padding: 0;
	font-size:1.4em;
	font-weight:normal;
	line-height:140%;
}
#main > article div.book_view header h5 {
	margin: 0;
	padding: 12px 0 12px 0;
	font-size:1.1em;
	font-weight:normal;
}
#main > article div.book_view header ul {
	margin: 0;
	padding: 0 0 16px 0;
	font-size:0.9em;
	color:#ffffff;
	line-height:100%;
	list-style:none;
}
#main > article div.book_view header ul li {
	display:inline-block;
	border-radius:4px;
	margin: 0 0 4px 0;
	padding: 4px 6px;
}
#main > article div.book_view header ul li.level {
	background:#E9787D;
}
#main > article div.book_view header ul li.category {
	background:#129AFE;
}
#main > article div.book_view header ul li.translation {
	background:#7BCE82;
}
#main > article div.book_view header p {
	margin: 0;
	padding: 0 0 10px 0;
	font-size:1.1em;
	line-height:120%;
}
#main > article div.book_view header dl {
	margin: 0;
	padding: 0;
}
#main > article div.book_view header dl:after {
	content : "";
	display : block;
	height : 0;
	clear : both;
}
#main > article div.book_view header dl dt {
	margin: 0;
	padding: 0;

	width:130px;

	float:left;
}
#main > article div.book_view header dl dd {
	margin: 0;
	padding: 0;

	width:calc(100% - 130px);

	float:left;
}
#main > article div.book_view .comment {
	clear : both;

	margin: 0;
	padding: 30px 0 0 0;
}
#main > article div.book_view .comment span {
	display:none;
}
#main > article div.book_view .tab {
	clear : both;

	position:relative;

	margin: 0;
	padding: 30px 0 0 0;

	width:100%;
	height:600px;
}
#main > article div.book_view .tab dl {
	position:absolute;

	margin: 0;
	padding: 0;

	width:100%;
}
#main > article div.book_view .tab dl dt {
	border-top:1px solid #ffffff;
	border-bottom:1px solid #cccccc;
	background:#bbbbbb;

	position:absolute;
	z-index:10;

	margin: 0;
	padding: 12px 1px 0 1px;

	width:80px;
	height:26px;

	color: #ffffff;
	line-height: 100%;
	text-align : center;

	cursor:pointer;
}
#main > article div.book_view .tab p {
	border-top:1px solid #eeeeee;
	border-bottom:1px solid #cccccc;
	background:#eeeeee;

	position:absolute;
	z-index:10;

	margin: 0;
	padding: 12px 1px 0 1px;

	width:80px;
	height:26px;

	color: #ffffff;
	line-height: 100%;
	text-align : center;
}
#main > article div.book_view .tab dl dt.current {
	background:#ffffff;
	border-top:1px solid #cccccc;
	border-left:1px solid #cccccc;
	border-bottom:1px solid #ffffff;
	border-right:1px solid #cccccc;

	padding: 12px 0 0 0;

	color: #333333;
}
#main > article div.book_view .tab dl:nth-child(1) dt,
#main > article div.book_view .tab p:nth-child(1) {
	left:0;
}
#main > article div.book_view .tab dl:nth-child(2) dt,
#main > article div.book_view .tab p:nth-child(2) {
	left:100px;
}
#main > article div.book_view .tab dl:nth-child(3) dt,
#main > article div.book_view .tab p:nth-child(3) {
	left:200px;
}
#main > article div.book_view .tab dl dd {
	display:none;

	border:1px solid #cccccc;

	position:absolute;
	z-index:9;
	top:39px;

	margin: 0;
	padding: 10px;

	width:calc(100% - 22px);
	height:540px;

	overflow:auto;
}
@media screen and (max-width: 1260px){
	#main > article div.book_view .image {
		width:200px;
	}
	#main > article div.book_view header {
		width:calc(100% - 220px);
	}
}
@media screen and (max-width: 1024px){
	#main > article div.book_view .image {
		width:100px;
	}
	#main > article div.book_view header {
		width:calc(100% - 120px);
	}
}
@media screen and (max-width: 800px){
	#main > article div.book_view {
		font-size:0.9em;
	}
	#main > article div.book_view .image {
		margin: 30px auto;
		padding: 0;

		width:100%;
		max-width:200px;

		float:none;
	}
	#main > article div.book_view header {
		width:100%;
		float:none;
	}
	#main > article div.book_view .tab {
		height:300px;
	}
	#main > article div.book_view .tab dl dd {
		height:240px;
	}
}


#social_button {
	position:relative;

	margin: 40px auto 0 auto;
	padding: 0;

	width:calc(100% - 20px);
}
#social_button ul{
	margin: 0;
	padding: 0;
	width:100%;
	height:auto;
	text-align:right;
	list-style:none;
}
#social_button li{
	display:inline-block;
	margin: 0 0 0 10px;
	padding: 0;
	font-size:14px;
	text-align:center;
	width:84px;
	margin-bottom:8px;
	border-radius:3px;
}
#social_button li.share-twitter{
	background:#1DB8EE;
	box-shadow:0 2px #2795e9;
}
#social_button li.share-twitter:hover{
	opacity:0.8;
}
#social_button li.share-facebook{
	background:#0168B7;
	box-shadow:0 2px #2d4373;
}
#social_button li.share-facebook:hover{
	opacity:0.8;
}
#social_button a{
	display:block;
	height:27px;
	padding-top:6px;
	color:#ffffff;
	text-decoration:none;
}
#social_button a:hover{
	text-decoration:none;
	color:#ffffff;
}



.relation {
	clear : both;
	padding: 60px 0 0 0;
}
.relation h6 {
	margin: 0;
	padding: 0;

	font-size:1.3em;
	color:#333333;
	line-height: 180%;
	text-align : left;
}
.relation ul {
	margin: 0;
	padding: 20px 0 0 0;

	width:100%;

	text-align:left;

	list-style:none;
}
.relation ul li {
	display:inline-block;

	margin: 0;
	padding: 10px;



	vertical-align:top;
}
.relation ul li a {
	display : block;

	margin: 0;
	padding: 0;

	font-size:0.9em;
	color:#999999;
	text-align:left;
	text-decoration:none;
}
.relation ul li:hover {
	background:#f3f3f3;
}
.relation ul li a img {
	display:block;
	border:1px solid #cccccc;

	margin: 0 auto;
	padding: 0;

	height:160px;
}
.relation ul li a strong {
	display:block;
	margin: 0;
	padding: 8px 0 0 0;
	font-size:0.9em;
	color:#1DB8EE;
}
.relation ul li a span {
	display:block;
	margin: 0;
	padding: 8px 0;
	font-size:0.9em;
	color:#333333;
}
.relation .go_list a {
	display:block;
	background:#eeeeee;
	margin: 36px 0 0 0;
	padding:12px 0;
	text-align:center;
}
@media screen and (max-width: 800px){
	.relation ul li {
		width:120px;
	}
}