@charset "UTF-8";
/* @import url("//hello.myfonts.net/count/368005"); */
/*
Theme Name: FJWP
Description:FictionJunction.com offcial website
Theme URI: http://fictionjunction.com
Author: FictionJunction
Author URI: http://fictionjunction.com
Version: 1.0
License: ライセンス
License URI: ライセンスの URL
*/

/****************************************
          General Setting
*****************************************/

html, body {
	height: 100%; /* ブラウザ画面の高さをめいっぱいに */
	margin: 0 auto;
	padding: 0;
}

img{
	-webkit-backface-visibility: hidden;
}

body {
	background-color: #ffffff;
	color: #333;
	font-size: 14px;
	font-family:
		Verdana, Arial,
		"游ゴシック体",
		"ヒラギノ角ゴ Pro W3",
		"メイリオ",
		 sans-serif;
	line-height: 140%;
  -webkit-text-size-adjust: 100%;
}
/*--- 画像をレスポンシブに ---*/
img {
  	height: auto;
    max-width: 100%;
}

/*--- youtubeをレスポンシブに ---*/
@media screen and (max-width:559px){
   .youtube {
		 margin: 0.5em 0 1em;
		 padding-top: 56.25%;
     position: relative;
     width: 100%;
   }
   .youtube iframe {
		 display: block;
		 height: 100% !important;
		 left: 0;
     position: absolute;
     top: 0;
     width: 100% !important;
   }
}

/****************************************
          Typography
*****************************************/

/*--- h2：ページタイトル ---
 <h2><p class="pagetitle">タイトル</p></h1>で指定
*/
h2	 {
  	font-size: 200%;
	  font-family: 'Copperplate';
		margin-bottom: 10px;
		position: relative;
		text-align:center;
		width:100%;
}
h2.pagetitle:first-letter {
	color: #9f0c27;
	font-size: 2em;
	line-height: 0.5;
		margin-right: 5px;
		margin-bottom: 5px;
}

/*--- 罫線 ---*/
.bar1 {
  height: 1px;
  background: #bbb;
  background-image: -webkit-linear-gradient(left, #eee, #777, #eee);
  background-image: -moz-linear-gradient(left, #eee, #777, #eee);
  background-image: -ms-linear-gradient(left, #eee, #777, #eee);
  background-image: -o-linear-gradient(left, #eee, #777, #eee);
}

.bar2 {
  border-top: 1px solid #bbb;
}


/*--- h3：ページ内大見出し ---
---------------------------*/
h3 {
	margin-bottom: 10px;
	text-align:center;
	font-size: 120%;
	padding:2px 5px;
	border-top: solid 1px #c0c0c0;/*上線*/
	border-bottom: solid 1px #c0c0c0;/*下線*/
	font-family: 'Times New Roman';
	color: #9f0c27;
}

.copper{
	font-family: 'Copperplate';
}

/*--- h4：記事タイトルとターム名 ---*/
h4 {
	margin-top: -0.1em;
	font-size: 110%;
	padding-bottom:1px;
  border-bottom: 1px solid #ccc;
	position: relative;
	color: #696969;
}
.infolabel {
		font-size:90%;
		margin-right: 0.1em;
    /* 上1px、右0px、下1px、左2px */
    padding: 1px 2px 1px 4px;
    /* 背景色をえんじ色に指定 */
    background-color: #9f0c27;
    /* 文字色を白色に指定 */
    color: #fff;
    /* ボーダーをなくす */
    border-style: none;
		border-radius: 3px;/*角の丸み*/
}
.disklabel {
		font-size:90%;
		margin-right: 0.1em;
		/* 上1px、右0px、下1px、左2px */
		padding: 1px 3px 1px 4px;
    /* 背景色を白に指定 */
    background-color: #EBB7C0;
    /* 文字色を黒色に指定 */
    color: black;
    /* ボーダーをなくす */
		border: solid 1px #cccccc;
    /* ボタンの影の指定
     * 影の横幅を2px
     * 縦長を2px
     * ぼかしを3px
     * 広がりを1px
     * 色を#666（グレー）に指定 */
		border-radius: 3px;/*角の丸み*/
}

.dateformat {
		font-size:80%;
}

/*--- h5：記事内見出し ---*/
h5 {
	margin-bottom: 10px;
	font-size: 120%;
}

/*--- h6：ブログタイトル ---*/
h6 {
	font-size: 120%;
	padding: 0.1em;
	border-top: solid 1px #c0c0c0;/*上線*/
	border-bottom: solid 1px #c0c0c0;/*下線*/
	position: relative;
	color: #9f0c27;
}



/****************************************
          List
*****************************************/
ul,ol {
	margin: 0;
	list-style: none;
}

ol.list{
	margin-top: -0.5em;
	margin-bottom: 0;
  counter-reset:list;
  list-style-type:circle;
	list-style-position: outside;
  padding:0em 1em 0em 1em;
	line-height:1.5em;
}
li span{
  color: black;
}


ul.atten {
    list-style: squere;
    padding:0;
    margin:0;
}
li.atten {
    padding-left: 1em;
    text-indent: -.7em;
}
li.atten:before {
    color: grey;
}


ul.year li {
  display: inline-block;
  text-align: center;
}

ul.year li a {
  display: block;
}

.unit li{
    display: inline;
 }

/****************************************
          Link
*****************************************/
a {
		color:#9f0c27;
		text-decoration:none
}

a:hover{
		color:#9f0c27;
		text-decoration: underline;
}

.current,
.current_menu_item,
.current_page_item
{
	font-weight:bold;
}

/** Search & Filter 開始 **/
.searchandfilter
{
    margin-top:0px;
    margin-bottom:0px;
    font-size:12px;
    width: 100%;
}
.searchandfilter ul {
    padding-inline-start: 0px;
}
.searchandfilter label {
    display: block;
		padding-left: 0px;
}

/** Search & Filter 終了 **/


/****************************************
          Blog (Comment & Paging)
*****************************************/
.comment-form-url {
    display: nome; /*ウェブサイト欄を表示させない*/
}

/* コメント欄の開閉ボタン */
#comments-toggle {
    display: block;
    margin-top: 5px;
    padding: 2px 0px;
    border-radius: 3px;
		border: 1px solid #9f0c27;
    font-size: 14px;
    text-align: center;
}
#comments-toggle:hover {
    cursor: pointer;
    opacity: 0.8;
}
/* ブログページの前後ページ */
.paging {
    overflow: hidden;
    padding: 12px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}
.next a {
    position: relative;
    float: left;
    width: 50%;
}
.prev a {
    position: relative;
    float: right;
    width: 50%;
    text-align: right;
	}

.bannerarea{
	width: 100%;
	margin:0 auto;
	}
.bannerbox{
	width:100%;
	text-align: center;
	}
@media only screen and (min-width: 900px) {
		.bannerarea{
			width: 100%;
			display:flex;
		}
		.bannerbox{
			width:33%;
			margin:0 auto;
			text-align: center;
		}
	}





/****************************************
          Layout
*****************************************/
/********** ↓PC **********/
@media only screen and (min-width:960px) {
	/* ヘッダーの固定 */
	div#header-fixed{
			position: fixed;
			top: 0px;
			width: 100%;
			height: 140px;
			background-color: rgba(255,255,255,0.9);
			padding: 20px 0px 5px 0px;
			margin: 0 auto;
			z-index:9999;
			text-align:center;
	}

	div#header {
		height: 100%;
		width: 800px;
		margin: 10px auto;
		text-align: center;
	}
	#header .alignleft,
	#header .alignright{
		margin-bottom: 3px;
		width: 1000px;
		text-align:center;
		margin: 0 auto;
	}

	.logo {
		padding: 15px;
	}

	#header h2 {
		margin-bottom: 3px;
		font-family: 'Copperplate';
	}

	.navi {
		text-align:center;
	}

/* メインページ */
	#container {
		max-width: 960px;
  	position: relative;
  	min-height: 100%;
		height: auto;
		height: 100%;
		padding: 160px 0px 5px 0px;
		margin: 0 auto;
	}

	#toplive {
		padding: 5px 5px 5px 5px;
		width: 100%;
		text-align: left;
	}

	.topbox {
	    padding: 0 5px;
	    margin: 0.3em 0;
	    border: solid 1px #cccccc;/*線*/
	    border-radius: 10px;/*角の丸み*/
	}
	.topboxlive {
	    padding: 10px 5px;
	    margin: 0.5em 0;
	    border: solid 1.5px #9f0c27;/*線*/
	    border-radius: 10px;/*角の丸み*/
	}

/***** 1カラムメイン *****/
	#main {
		max-width: 800px;
  	min-height: 100%;
		margin: 0 auto;
		padding: 1em;
	}

/***** 2カラムメイン ****/
	#content{
		margin-left:1em;
		margin-bottom: 2em;
		padding-left: 1em;
		border-left: 1px solid #808080;
	}
	#mainbox {
			width: 380px;
			margin: 10px;
			overflow: hidden;
			float: left;
			display: inline;
	}
	#boxleft {
		float: left;
		width: 160px;
		padding:3px;
	}
	#boxright {
		float: left;
		width: 500px;
		padding:3px ;
	}
	#blogleft {
		float: left;
		line-height: 1.5em;
		width: 600px;
		padding:3px ;
	}
	#blogright {
		float: left;
		padding: 1em 0.5em;
	}

	#clr-block{
			clear : both;
	}
}
/********** ↑PC **********/


/***** ↓TABLET (768-959px) *****/
@media only screen and (min-width: 768px) and (max-width: 959px) {
/* ヘッダーの固定 */
	div#header-fixed{
			position: fixed;
			top: 0px;
			width: 100%;
			height: 140px;
			background-color: rgba(255,255,255,0.9);
			padding: 20px 0px 5px 0px;
			margin: 0 auto;
			z-index:9999;
			text-align:center;
	}

	div#header {
		height: 100%;
		width: 748px;
		margin: 10px auto;
		text-align: center;
	}
	#header .alignleft,
	#header .alignright{
		margin-bottom: 3px;
		width: 100%;
		text-align:center;
		margin: 0 auto;
	}

	.logo {
		padding: 20px;
	}

	#header h2 {
		margin-bottom: 3px;
		font-family: 'Copperplate';
	}

/* メインページ */
	#container {
		max-width: 748px;
  	position: relative;
  	min-height: 100%;
		height: auto;
		height: 100%;
		padding: 160px 0px 5px 0px;
		margin: 0 auto;
	}

	#toplive {
		padding: 5px 5px 5px 5px;
		width: 100%;
		text-align: left;
	}
	.topbox {
	    padding: 0 5px;
	    margin: 0.3em 0;
	    border: solid 1px #cccccc;/*線*/
	    border-radius: 10px;/*角の丸み*/
	}
	.topboxlive {
	    padding: 10px 5px;
	    margin: 0.5em 0;
	    border: solid 1.5px #9f0c27;/*線*/
	    border-radius: 10px;/*角の丸み*/
	}


/***** 1カラムメイン *****/
	#main {
		max-width: 748px;
  	min-height: 100%;
		margin: 0 auto;
		padding: 1em;
	}

/***** 2カラムメイン ****/
	#content{
		margin-left: 1em;
		margin-bottom: 2em;
		padding: 1em;
		border-left: 1px solid #808080;
	}
	#mainbox {
			width: 320px;
			margin: 10px;
			overflow: hidden;
			float: left;
			display: inline;
	}
	#boxleft {
		float: left;
		width: 160px;
		padding:3px;
	}
	#boxright {
		float: left;
		width: 460px;
		padding:3px ;
	}
	#blogleft {
		float: left;
		line-height: 1.5em;
		width: 600px;
		padding: 2em 0.5em;
	}
	#blogright {
		float: left;
		width: 160px;
		padding:2px;
	}

	#clr-block{
			clear : both;
	}

}
/********** ↑TABLET **********/



/********** ↓SmartPhone ( =< 767px ) **********/
@media only screen and (min-width: 1px) and (max-width:767px) {
/* メインページ */
	#container {
		box-sizing: border-box;
		width: 100% auto;
		position: relative;
		padding: 5px;
		margin: 0 auto;
	}

	#toplive {
		padding: 5px 5px 5px 5px;
		width: auto;
		text-align: left;
	}
	.topbox {
			padding: 0 5px;
			margin: 0.3em 0;
			border: solid 1px #cccccc;/*線*/
			border-radius: 10px;/*角の丸み*/
	}
	.topboxlive {
			padding: 10px 5px;
			margin: 0.5em 0;
			border: solid 1.5px #9f0c27;/*線*/
			border-radius: 10px;/*角の丸み*/
	}


/***** 1カラムメイン *****/
	#main {
		box-sizing: border-box;
		width: 100% auto;
		margin: 0 auto;
		padding: 5px;
		display: block;
	}
/***** 2カラムメイン ****/
	#content{
		margin-left: 0.5em;
		margin-bottom: 2em;
		padding-left: 1em;
		border-left: 1px solid #808080;
	}
	#mainbox {
			width: 300px auto;
			fonto-size: 14px;
			margin: 0 auto;
			overflow: hidden;
			float: left;
			padding: 5px;
	}
	#boxleft {
		float: left;
		width: 160px auto;
		padding:5px;
	}
	#boxright {
		float: left;
		width: 0 auto;
		padding:5px ;
	}
	#blogleft {
		float: left;
		width: 100% auto;
		line-height: 1.5em;
		padding: 2em 0.5em;
	}
	#blogright {
		float: left;
		width: 100% auto;
		padding:5px;
	}

	#clr-block{
			clear : both;
	}
}
/********** ↑SmartPhone  **********/


/* アコーディオン*/
.accbox {
    margin: 2em 1;
    padding: 1;
}

/*アコーディオンラベル*/
.accbox label {
    display: block;
    margin: 1.5px 1;
    padding : 10px;
    color: #9f0c27;
    font-weight: bold;
    background: #ededed;
    cursor :pointer;
    transition: all 0.5s;
}

/*アコーディオンアイコン*/
.accbox label:before {
    content: '\f054';
    font-family: 'FontAwesome';
    padding-right: 8px;
}

/*ラベルホバー*/
.accbox label:hover {
    background :#f8aebd;
}
.accbox input {
    display: none;
}

/*中身を非表示*/
.accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*中身表示*/
.cssacc:checked + label + .accshow {
    height: auto;
    padding: 10px;
    background: #fcdde4;
    opacity: 1;
}

.accbox .accshow p {
    margin: 15px 10px}

/*アイコンを入れ替える*/
.cssacc:checked + label:before {
    content: '\f078';
}
/**** アコーディオンここまで ***/


#footer {
	clear: both;
	width: 100%;
	bottom: 0px;
	background-color: rgba(255,255,255,0.8);
	height:15px;
	text-align: center;
	margin: 0 auto;
	z-index:9999;
}


.topcenter {
		text-align: center;
}




/****************************************
          header
*****************************************/

*:first-child+html #header > div{ /* IE7 */
	clear: both;
	zoom:1;
}

#logo{
	border-bottom: 1px dashed #fe56aa;
}

#logo a{
	border: none;
}

#description {
	margin-top: 0;
	color: #777;
}

#searchform{
	position: relative;
}
	#s{
		padding: 6px 20% 6px 5%;
		width: 75%;
		-webkit-border-radius: 25px;
		-moz-border-radius: 25px;
		border-radius: 25px;
		font-size: 10px;
	}
	#searchsubmit{
		position: absolute;
		top: 0;
		right: 0;
		width: 30px;
		height: 26px;
		border: none;
		background: url(images/search.png) no-repeat 50% 50%;
	}
/****************************************
          Navigation
*****************************************/

#header .menu{
	position: relative;
	bottom: -1px;
	clear: both;
	font-family: 'Copperplate';
	font-size: 16px;
	text-align: center;
	margin: 0 auto;
	vertical-align: middle;
	}

	#header div.menu > ul > li,
	#header ul.menu > li{
		float: left;
	}

	#header .menu li{
		position: relative;
	}
	#header .menu li a{
		display: block;
		border-bottom: none;
	}

	#header ul.sub-menu,
	#header ul.children{
		position: absolute;
		display: none;
		padding: 0;
		margin-left: 0;
		width: auto;
		text-align: left;
		background: #eee;
		white-space: nowrap;
	}
	#header .sub-menu li,
	#header .children li{
		position: relative;
	}
	#header .menu li a{
		display: block;
		padding: 0.5em 0.5em;
		border-bottom: none;
		}
		#header ul.sub-menu ul,
		#header ul.children ul {
			top:-1px;
	}
	#header .menu li:hover > ul{
		display: block;
	}

/****************************************
          Breadcrumb
*****************************************/

#breadcrumb{
	margin-bottom: 20px;
}
#breadcrumb li{
	float: left;
	margin-right: .5em;
}


/****************************************
          Main
*****************************************/


.sticky{
	/* 先頭固定ポストのスタイル */
}

.post-meta{
	margin-bottom: 1.5em;
}
	.post-meta .post-date,
	.post-meta .category{
		padding-right: 1em;
	}

.more-link{
	float: right;
}

.navigation{
	overflow: hidden;
	margin-bottom: 40px;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	background: url(images/gray.gif) repeat-y 50% 0;
}
	.navigation > div{
		width: 50%;
	}

	.navigation .alignright{
		text-align: right;
	}

	.navigation a{
		display: block;
		padding: 1em;
		border: none;
	}
		.navigation a:hover{
			background: #ffeff7;
			color: #000;
		}
			.navigation .alignright a:hover{
				border-left: 1px solid #ddd;
			}

.footer-post-meta{
	margin-top: 10px;
	text-align: right;
}
	.post-author{ padding-left: 1em; }

.page-link{
	margin: 3em 0;
}

	.page-link span a{
		display: inline-block;
		margin-right: 3px;
		padding: 5px 8px;
		border: 1px solid #ddd;
		background: #ddd;
	}
		.page-link a span{
			background: #fff;
		}

	.page-link a{
		border-bottom: none;
		color: #000;
	}

	.page-link a span:hover{
		background: #ffeff7;
		color: #000;
	}


	.workList{
		border: 1px solid #fff;
		padding: 1em;
		margin-bottom: 2em;
		min-height: 200px;
}


/****************************************
          index.php Main
*****************************************/

.content-box{
	float: right;
	margin-top: -0.25em;
	width: 420px;
}
	.content-box .more-link{
		margin: 0;
	}

.thumbnail-box{
	float: left;
	width: 160px;
}
	.thumbnail-box img{
		width: 160px;
		height: 160px;
	}


/****************************************
          Sidebar
*****************************************/
.widget{
	margin-bottom: 60px;
	list-style: none !important;
}

#sidebar .widget ul{
	padding-left: 0.5em;
	list-style: none !important;
}

#sidebar-recent-posts li,
#sidebar-popular-posts li{
	margin:5px 0;
	list-style: none !important;
}

.sidebar-thumbnail-box{
	float: left;
	width: 75px;
}

.sidebar-recent-posts-title{
	float: right;
	width: 165px;
}
	#sidebar-recent-posts h3,
	#sidebar-recent-posts p,
	#sidebar-popular-posts h3,
	#sidebar-popular-posts p{
		margin: 0;
	}

.tagcloud a{
	white-space: nowrap;
}

#sidebar ul, ol {
  padding: 0.5em;
	list-style: none !important;
}
}
#sidebar ul li, ol li {
  padding: 0.5em 0;
	list-style: none !important;
}
#sidebar li {
  padding: 0.5em 0;
	list-style: none !important;
}

/****************************************
          Footer
*****************************************/

#copyright{
  width: 100%;
  height: 50px;
	font-size: 80%;
	line-height: 100%;
}

/****************************************
          Pagenation
*****************************************/
.pagenation {
    margin: 1em 0;
}
.pagenation:after, .pagenation ul:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.pagenation ul {
    margin: 0;
}
.pagenation li {
    float: left;
    list-style: none outside none;
    margin-left: 3px;
}
.pagenation li:first-child {
    margin-left: 0;
}
.pagenation li.active {
    background-color: #999999;
    border-radius: 3px;
    color: #FFFFFF;
    cursor: not-allowed;
    padding: 10px 20px;
}
.pagenation li a {
    background: none repeat scroll 0 0 #CCCCCC;
    border-radius: 3px;
    color: #FFFFFF;
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}
.pagenation li a:hover {
    background-color: #444444;
    color: #FFFFFF;
    opacity: 0.8;
    transition-duration: 500ms;
    transition-property: all;
    transition-timing-function: ease;
}


/****************************************
          WordPress Misc
*****************************************/

.aligncenter {
	display: block;
	margin-right: auto;
	margin-left: auto;
}

.alignleft {
	float: left;
}

.alignright {
	float: right;
}

.wp-caption {
	margin: 10px;
	padding-top: 4px;
	border: 1px solid #ddd;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background-color: #f3f3f3;
	text-align: center;
}

.wp-caption-text,
.gallery-caption{
	font-size: 80%;
}

.wp-caption img {
	margin: 0;
	padding: 0;
	border: 0 none;
}

.wp-caption-dd {
	margin: 0;
	padding: 0 4px 5px;
	font-size: 11px;
	line-height: 17px;
}

img.alignright {
    display: inline-block;
    margin: 0 0 1em 1.5em;
}

img.alignleft {
    display: inline-block;
    margin: 0 1.5em 1em 0;
}
/****************************************
/* Contact Form 7カスタマイズ */
/****************************************/
/***** コンタクトフォーム *****/
.table-contactform7{
  overflow: hidden;
	table-layout: fixed;
	width: 100%;
	border-radius: 4px;
	border: 1px solid #ddd;
}
.table-contactform7 tr:nth-child(2n+1) {
    background: #eee;
}


.table-contactform7 th{
	text-align: left;
	font-weight: normal;
}

.table-contactform7 input,
.table-contactform7 textarea{
  max-width: 90% !important;
  margin: 5px 10px 10px 5px;
}

.address-100 input{
  max-width: 90% !important;
  margin: 5px 10px 10px 5px;
}

.message-100 textarea{
  width: 100%;
  margin: 5px 10px 10px 5px;
}

@media screen and (min-width: 900px){
  .table-contactform7 th{
    width:28%;
  }
    }

@media screen and (max-width: 900px){
.table-contactform7{
  display:block;
}

  .table-contactform7 tbody,
  .table-contactform7 tr{
    display: block;
    width: 100%;
  }
  .table-contactform7 th{
  width:100%;
  display:block;
  margin: 0 auto;
  border:none;
}
.table-contactform7 td{
  display: list-item;
  list-style-type:none;
  margin:0;
  padding:0;
  width: 100%;
  border-top: none !important;
}
}
.asterisk {
 margin: 0 0 0 0.2em;
 color: #f5637a;
}
/* 送信ボタンのデザイン変更 */
.soushinbtn{
	padding:10px!important;
	width:30%;
	background: #d8bfd8!important;
	color: #fff;
	border-radius: 2px!important;}
.soushinbtn:hover{
	background:#fff!important;
	color:#ff870f;
	border:1px solid #ffa042;
}
/****************************************
          Clearfix
*****************************************/

#container:after,
#header .menu > ul:after,
#header ul.menu:after,
.clearfix:after {
	display: block;
	visibility: hidden;
	clear: both;
	height: 0;
	content: " ";
	font-size: 0;
}

/* clearfix for ie7 */
#container,
#header .menu > ul,
#header ul.menu,
.clearfix {
	display: inline-block;
}

#container,
#header .menu > ul,
#header ul.menu,
.clearfix {
	display: block;
}

#header ul.menu,
.clearfix {
	display: block;
}
container,
#header .menu > ul,
#header ul.menu,
.clearfix {
	display: block;
}
ntainer,
#header .menu > ul,
#header ul.menu,
.clearfix {
	display: block;
}

.clearfix {
	display: block;
}

 block;
}

}

 block;
}

}