@charset "utf-8";
@import url("css/fonts/style.css");

/*
Theme Name: FJC Theme 2016
Author: kdone
Author URI: http://muyentime1.xsrv.jp
Description: 自作テーマ1
Version: 0.1
License: GPL
*/

/* base
*{-webkit-font-smoothing: antialiased;}
--------------------------------------------------------- */
body { 
	color: #777;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	font-size: 87.5%; font-weight: 100;
	line-height: 1.6; 
	-webkit-text-size-adjust: 100%; 
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
	font-weight: 100;
}
a {
	overflow: hidden; color: #777; text-decoration: none; 
}

a:link { color: #777; font-weight: 600;}
a:visited { color: #777; font-weight: 600; }/*082654*/
a:hover { color: #c00; text-decoration: underline; }
a:active { color: #c00; }

.center { text-align: center;}
.right { text-align: right;}
.margin_t10 {margin-top: 10px;}
.margin_t20 {margin-top: 20px;}
.margin_t30 {margin-top: 30px;}
.margin_t50 {margin-top: 50px;}
.margin_b10 {margin-bottom: 10px;}

/* layout
--------------------------------------------------------- */
.container {
	max-width: 2000px;
	margin: 0 auto;
}
.content, header {
	max-width: 1100px;
	margin: 0 auto;
}

/* header nav
--------------------------------------------------------- */
/* slicknav */
.slicknav_menu, #gMenuHide {display: none;}


header {padding: 20px 0;}
header ul {
	display: table; 
	margin-bottom: 0px;
	width: 100%; box-sizing: border-box;
}
header ul li {
	display: table-cell; 
	vertical-align: middle;
}
header ul li.left {width: 30.9%;}
header ul li.left div a img {width: 100%; height: auto;}
header ul li.mid { width: 19.1%; }
header ul li.right { 
	text-align: right; width: 50%;
	padding-top: 15px;
}
/*#gMenu div ul.menu {
	width: 100%; box-sizing: border-box;
	font-size: 0; 
}
#gMenu div ul.menu li {
	display: inline-block; box-sizing: border-box;
	vertical-align: middle; text-align: left;
	width: 25%;
}
#gMenu div ul.menu li a {
	font-size: 16px; 
}*/
#gMenu div ul.menu {
	display: flex;
	justify-content: space-between;
	width: 100%; box-sizing: border-box;
}
#gMenu div ul.menu li {
	display: block;
	vertical-align: middle; text-align: left;
}
#gMenu div ul.menu li a {
	font-size: 18px; 
}



/* パンくずリスト（Breadcrumb）
--------------------------------------------------------- */
#breadcrumb{
	margin: 20px 0 0;
	color:#777;
	font-size:13px;
}
div#breadcrumb ul li {
	display: inline;
}
div#breadcrumb ul li.gt{
	margin:0 10px;
}
 
div#breadcrumb ul li  a{
	text-decoration:none;
	color:#777;
}

.content .main h1 {
	font-size: 30px; 
	color: #777; letter-spacing: 4px;
	padding-left: 15px; line-height: 30px;
	border-left: 5px solid #ea6fa5;
	margin: 0 0 30px;
}
body#fjc .content .main h1, 
body#entry .content .main h1 {border-left: 5px solid #af8dbd;}
body#study .content .main h1 {border-left: 5px solid #d0d90a;}
body#action .content .main h1 {border-left: 5px solid #fabb00;}

/* 404
--------------------------------------------------------- */
body#n404 .error404 {
	margin: 20px 0 80px;
}
body#n404 .error404 p {
	font-size: 26px; margin: 0px 0 20px;
	color: #ff0000; letter-spacing: 4px;
}
body#n404 .error404 form#searchform label {
	background: #e6e6e6; padding: 2px; width: 400px; 
}
body#n404 .error404 input.search-field {
	outline: none;
	/*border: 1px solid #777;*/
	-webkit-transition: all .3s;
	transition: all .3s;
	line-height: 2em; font-size: 14px; 
	height: 1;
}
body#n404 .error404 button.search-submit {
	background: #ea6fa5; border: 0;
	color: white; border-style: none;
	letter-spacing: 0.046875em; padding: 1px 5px;
	line-height: 2em; /*text-transform: uppercase;*/
	
}
.icon-search {font-size: 14px;}

/* search
--------------------------------------------------------- */
body#search h2 {
	font-size: 130%; margin: 0px 0 20px;
}
body#search h2 a:before {
	content: "＞";
	padding-right: 3px;
	font-size: 12px;
}


/* common
--------------------------------------------------------- */
p.marg_b60 {margin: 0px 0 60px;}



/* footer nav
--------------------------------------------------------- */
footer {
	margin: 10px 10px;
	background: #e6e6e6;
}
footer div.inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 20px 0;
}
footer ul {
	display: table; 
	margin-bottom: 0px;
	width: 100%; box-sizing: border-box;
}
footer ul li {
	display: table-cell; 
	vertical-align: top;
}
footer ul li.left {width: 12.81%;}
footer ul li.left div a img {max-width: 141px; width: 100%; height: auto;}
footer ul li.mid { width: 5.36%; }
footer ul li.right { 
	width: 81.83%;
}
footer ul li.right  li {text-align: left;}
#sMenu > div {
	max-width: initial;
	margin: 0;
	padding: 0;
	position: relative;
}
#sMenu div > ul.menu {
	display: flex;
	justify-content: space-between;
	width: 100%; box-sizing: border-box;
}
#sMenu > div:before {
	border-top: 1px solid #666; 
	content: ""; 
	position: absolute; 
	top: 2.7em; left: 0; 
	width: 100%;
}
#sMenu div > ul.menu li {
	display: block;
	vertical-align: top;
}
#sMenu div > ul.menu li a {
	font-size: 14px; 
	line-height: 3em;
}
#sMenu div ul.menu li ul li {
	display: block;
}
#sMenu div ul.menu li ul li a {line-height: 2em;}
#sMenu div ul.menu li ul li a:before {
	content: "＞";
	padding-right: 3px;
	font-size: 12px;
}
#sMenu { border-bottom: 1px solid #666;}

#sMenu2 { width: 49%;padding: 10px 0;}
#sMenu2 div ul.menu li a:before {
	content: "＞";
	padding-right: 3px;
	font-size: 12px;
}

p.copyright {
	text-align: center; padding: 0px 0 30px;
}

/* pagetop
--------------------------------------------------------- */
#pagetop {
	position: fixed;
	right: 20px;
	border: 1px solid #c9caca;
	background: #fff;
}
#pagetop a {
	display: block;
	width: 60px; height: 60px;
	background: url(./img/arrow_up.png) no-repeat center center;
}

@media screen and (max-width: 1100px){
	.container {padding: 0 10px;}
	/* header nav */
	header ul li.mid { width: 50px; }
	header ul li.right { width: calc(69.1% - 50px); }
	#gMenu div ul.menu li a {font-size: 14px; }
	
	footer {margin: 10px 0px; padding: 0 10px;}
}
@media screen and (max-width: 970px){
	
}

@media screen and (max-width: 900px){
	/* header nav */
	header { display: none; }
	/* slicknav */
	.slicknav_menu {display: block;}
	
	/* footer nav */
	footer ul {display: block; }
	footer ul li {display: block; text-align: left;}
	footer ul li.left, footer ul li.right {width: auto;}
	footer ul li.mid {display: none; }
	footer ul li.left {margin-bottom: 10px;}
	
	.content .main h1 {
	font-size: 28px; line-height: 28px;  letter-spacing: 4px;
	margin: 20px 0 30px;
	}
}
@media screen and (max-width: 770px){
	.content .main h1 {
	font-size: 24px; line-height: 24px; letter-spacing: 2px;
	padding-left: 10px;margin: 10px 0 20px;
	}
	
	#sMenu2 { width: auto;}
	#sMenu div > ul.menu {display: block;}
	#sMenu div > ul.menu > li {
	border-top: 1px solid #777;
	background: url(./img/arrow_r_s777.png) no-repeat right  top 6px;
	}
	#sMenu div > ul.menu li a, #sMenu2 div > ul.menu li a 
	{font-size: 13px; line-height: 2.5em;}
	
	#sMenu > div:before {border-top: none; content: none; }
	#sMenu div ul.menu li ul li a {margin-left: 1em;}
	#sMenu div ul.menu li ul li {background: url(./img/arrow_r_s777.png) no-repeat right center;}
}

@media screen and (max-width: 640px){
	.content .main h1 {
		font-size: 20px; letter-spacing: 1px; line-height: 20px;
	}
}