@charset "UTF-8";
/*
Theme Name:KJ online Theme 2018
Author: Koshi Journal
Version: 1.0
*/

body{
	font-size:15px;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#222;
}

img.wp-post-image { width: 100%; height: auto; }

/*　ログイン中のテスト表示　*/
span.test-yellow{
display:inline-block;
font-size:12px;
color:#666;
background:#FFFFBF;
}

/*----------------------------------------------------------------
  scroll-to-top
----------------------------------------------------------------*/
a#scroll-to-top{
	bottom:66px;
}
/*----------------------------------------------------------------
  Header
----------------------------------------------------------------*/
#header {
  background-color: #fff;
  height: 135px;
  margin-bottom:16px;
}
#header .header_top {
	width:1015px;
	margin-left:auto;
	margin-right:auto;
}
#header .header_top {
	width:90%;
	min-width: 1015px;
	margin-left:auto;
	margin-right:auto;
}
#header .header_top #logo {
	float:left;
	margin-bottom: 8px;
}
#header .header_top #logo img {
	width:400px;
	height:60px;
	margin-top:20px;
}
#header .header_top  #login{
	background:#000;
	width:245px;
	height:70px;
	float:right;
	font-weight:bold;
	font-size:15px;
	border-radius:0px 0px 6px 6px;
	padding-top:8px;
}
#header .header_top  #login p{
	color:#FFF;
	text-align:center;
	margin-bottom:8px;
}
#header .header_top #login ul {
margin-left:15px;
}
#header .header_top #login ul li{
	display:block;
	float:left;
}
#header .header_top #login ul li a {
	display:block;
	background:#fff;
	width:104px;
	text-align:center;
	padding-top:9px;
	padding-bottom:9px;
	margin-right:8px;
	border-radius:4px;
	text-decoration:none;
}
#header .header_top #login ul li.reg a{ color:#da6c00;}
#header .header_top #login ul li.in a{ color:#0082b2;}
#header .header_top #login ul li.out a{ color:#666;}
#header .header_top #login ul li.out svg{ color:#f00;} #header .header_top #login ul li.out i{ color:#f00;}
#header .header_top #login ul li a:hover{ position: relative; top:1px; left: 1px;}
#header .header_top  #time-sns{
	width:245px;
	float:right;
	margin-right:16px;
}
#time-sns .uptime {
	font-size:14px;
	padding-top:15px;
	padding-bottom:10px;
}
#time-sns .uptime {
	font-size:14px;
	text-align:right;
}
#time-sns ul,
#foot-info ul {
	float:right;
}
#time-sns ul li ,
#foot-info ul li {
	display:inline-block;
	margin-left:8px;
}
#time-sns ul li a,
#foot-info ul li a {text-decoration:none;}
#time-sns ul li a:hover,
#foot-info ul li a:hover {position: relative; top:1px; left: 1px;}
#time-sns ul li.help a { font-size:15px; font-weight:bold; color:#444; display:block; margin-top:20px;}
#time-sns ul li.rss a, #time-sns ul li.twitter a, #time-sns ul li.facebook a,
#foot-info ul li.rss a, #foot-info ul li.twitter a, #foot-info ul li.facebook a{ font-size:14px;}
#time-sns ul li.rss a,
#foot-info ul li.rss a{ color:#FF9326}
#time-sns ul li.twitter a,
#foot-info ul li.twitter a{ color:#54AAF1;}
#time-sns ul li.facebook a,
#foot-info ul li.facebook a{ color:#3A589C;}

#header #fixheader {
  z-index:99;
  background-color: #008c00;
  width: 100%;
  float:left;
  position:relative;
}
#header #fixheader.myfixedHeader{
	 position:fixed;
}
/*------------------------------------------------
  Global navi
------------------------------------------------*/

#header #fixheader ul {
	font-size:14px;
	font-weight:bold;
	border-top: 1px solid #008C00;
	border-bottom: 1px solid #008C00;
}
#header #fixheader a {
  text-decoration: none;
  color: #FFF;
}
#gnav {
	width:1015px;
	margin-left:auto;
	margin-right:auto;
}
#gnav > ul {
  display: table;
  width:1015px;
}
#gnav > ul > li {
  display: table-cell;
  margin-right: 2em;
}
#gnav > ul > li:hover {
  color: #fff;
  background-color: #FFF;
}
#fixheader #gnav > ul > li:hover > a {
  color: #026900;
}
#gnav > ul > li:hover .menu {
  transition: max-height 1s ease-in;
  max-height: 9999px;
}
#gnav > ul > li > a {
  display: block;
  text-align:center;
  padding: 12px 0px 12px;
  transition: all .1s ease-in;
}
#gnav > ul > li > a.w1{ width:87px;}
#gnav > ul > li > a.w2{ width:87px}
#gnav > ul > li > a.w3{ width:116px;}
#gnav > ul > li > a.w4{ width:140px;}
#gnav > ul > li > a.w5{ width:121px;}
#gnav > ul > li > a.w6{ width:163px;}
#gnav > ul > li > a {
	position: relative;
}
#gnav > ul > li > a.disable{
	cursor: default;
}

#gnav > ul .menu {
  transition: max-height .2s ease-out;
  max-height: 0;
  overflow: hidden;
  text-align: center;
  position: absolute; top:40px;
  background-color: rgba( 9,75,4, 0.8);
}
#header #fixheader ul.menu_inner{
	  border-top: none;
	border-bottom: none;
	margin:0 auto;
    padding: 1em 0;
}
#header #fixheader ul.menu_inner.type1 li{
	width:140px;
}
#header #fixheader ul li.type2{
	position:relative;
}
#header #fixheader ul li.type2 .menu {
	right:0;
	top:39px;
	width:auto;
}
#header #fixheader ul.menu_inner.type3 li{
	width:121px;
}
#gnav > ul .menu .menu_inner li {
  display:block;
  min-width:116px;
  white-space: nowrap;
}
#gnav > ul .menu a {
  color: #fff;
  display:block;
  padding:0.5em 0.8em;
}
#header #fixheader #gnav > ul .menu a:hover{
	position: relative; top:1px; left: 1px;
	text-decoration:underline;
}

/*------------------------------------------------
  Layout
------------------------------------------------*/

#wapper{
	clear:both;
	width:1015px;
	margin:0 auto;
}

#MainContents {
	width:690px;
	float:left;
}
#MainContents.wide {
	width:100%;
	float:none;
	overflow:auto;
}
#SideMenu {
	width:300px;
	float:right;
	margin-bottom:32px;
}
#footer {
	clear:both;
	width:100%;
	background-color:#EBEBEB;
	padding:24px 0px 0px;
	font-size:13px;
}
#footer-inner{
	width:960px;
	margin:0 auto;
}

/*------------------------------------------------
  Top Layout 2020
------------------------------------------------*/

#wapper.toppage{
	clear:both;
	width:90%;
	min-width:1015px;
	margin:0 auto;
}

#wapper.toppage #MainContents {
	width:calc(100% - 324px);
	min-width:690px;
	float:left;
}

/*遅延対策*/
#wapper.toppage #top-slider .slider{display: none;}
#wapper.toppage #top-slider .slider.slick-initialized{
  display: block; /*slick-initializedが付与されたら表示*/
}

#wapper.toppage #top-slider{
	background: #F0F0E2;
	padding: 40px 40px 16px 40px;
	overflow: visible;
	margin-bottom: 24px;
	margin-top: 30px;
	position: relative;
}
#wapper.toppage #top-slider #slider-ttl{
	position: absolute;
	top:-19px;
	left: 16px;
	font-size: 18px;
	font-weight: bold;
	line-height: 38px;
	letter-spacing: 0.1em;
	color: #fff;
	background: #008C1B;
	display: block;
	width: 242px;
	text-align: center;
}
.slick-prev:before, .slick-next:before{
	color: #B2B2B2 !important;
	opacity: 1 !important;
}
#wapper.toppage #top-slider h2#top-news{
	font-size: 24px;
	font-weight: bold;
	line-height: 1.2em;
	margin-bottom: 16px;
}

#wapper.toppage #top-slider h2#top-news .bagde-free{
	display: inline-block;
	width: 43px;
	text-align: center;
	color: #fff;
	font-size: 11px;
	background: #EE8100;
	line-height: 1.5;
	margin-left: 4px;
	top: -5px;
	position: relative;
}

#wapper.toppage #top-slider .meta-info{
	background: none;
	margin-bottom: 8px;
}
#wapper.toppage #top-slider .meta-info .latest{
	margin-right: 0px;
}
#wapper.toppage #top-slider .meta-info .numberstyle{
	display: inline-block;
	float: none;
	height: 26px;
	font-size: 16px;
	background: #000;
}

#wapper.toppage #top-slider a{
	text-decoration: none;
	color: #000;
}

#wapper.toppage #top-slider a:hover h2,
#wapper.toppage #top-slider a:hover p{
	text-decoration: underline;
	color: #008C1B;
}
#wapper.toppage #top-slider a:visited h2,
#wapper.toppage #top-slider a:visited p{
	color: #909090;
}

#wapper.toppage #top-slider .top-slider-single {
	margin-bottom: 8px;
}

#wapper.toppage #top-slider .f-img.big{
	position: relative;
	width:250px;
	margin-left: 2px;
}
#wapper.toppage #top-slider .f-img.big::before {
    content: "";
    display: block;
    padding-top: 190px;
}
#wapper.toppage #top-slider .f-img.big img{
	top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    position: absolute;
}
#cat-wrapper{
	width: 100%;
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
	overflow: auto;
	margin-bottom: 30px;
}
#cat-wrapper .cat-box{
	width:calc(50% - 16px);
	margin-bottom: 16px;
}

#cat-wrapper .cat-box-single a{
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
	overflow: auto;
	text-decoration: none;
	color: #222;
	padding: 12px 0px;
}
#cat-wrapper .cat-box-single a:hover{
	background: #FEFFE8;
}

#cat-wrapper .cat-box-single a .cat-box-info{
	width: calc(100% - 108px);
}

#cat-wrapper .cat-box-single a .cat-box-info.noimg{
	width: 100%;
}

#cat-wrapper .cat-box-single a .cat-box-img{
	width: 100px;
}

#cat-wrapper h2{
	padding: 8px 0px;
	margin: 0 0 8px 0px;
	border-top: 2px solid #008C1B;
	border-bottom: 1px solid #C4C4C4;
	color: #008C1B;
	font-weight: 900;
	font-size: 20px;
	line-height: 28px;
}
#cat-wrapper h2 a{
	text-decoration: none;
	color: #008C1B;
}
#cat-wrapper h2 a:hover{
	position: relative;
	top: 1px; left:1px;
	color: #FF0000;
}
#cat-wrapper h2 .icon-box{
	display: inline-block;
	width: 30px;
	height: 30px;
	background: #008C00;
	border-radius: 4px;
	color: #fff;
	font-size: 16px;
	line-height: 30px;
	text-align: center;
}
#cat-wrapper h2 a:hover .icon-box{
	background: #FF0000;
}
#cat-wrapper h3{
	font-weight: 900;
	font-size: 16px;
	line-height: 1.5em;
}
#cat-wrapper a:hover h3{
	text-decoration: underline;
	color:  #008C00;
}

#cat-wrapper a .mata-date{
	color: #555;
	font-size: 13px;
}
#cat-wrapper a .mata-date .bagde-new{
	display: inline-block;
	width: 43px;
	text-align: center;
	color: #fff;
	font-size: 11px;
	background: #D90707;
	line-height: 1.5;
	margin-left: 4px;
}
#cat-wrapper a .mata-date .bagde-free{
	display: inline-block;
	width: 43px;
	text-align: center;
	color: #fff;
	font-size: 11px;
	background: #EE8100;
	line-height: 1.5;
	margin-left: 4px;
}

#cat-wrapper .cat-box-single a:visited,#cat-wrapper .cat-box-single a:visited h3{
	color: #909090;
}

.toppage a.btn_newest_arrivals{
	background-color: #008C1B;
    color: #fff;
    display: block;
		width: 60%;
    max-width: 600px;
    margin:0 auto;
    text-align: center;
		text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    line-height: 60px;
    border: none;
    margin-bottom: 30px;
}

.toppage a.btn_newest_arrivals:hover{
	position: relative;top:1px;left: 1px;
}
/*------------------------------------------------
  footer
------------------------------------------------*/

#footer .link-group {
	display:block;
	float:left;
	line-height:1.9em;
	margin-right:32px;
	color:#222;
}

#footer .link-group a{
	color:#222;
	text-decoration:none;
	display:block;
	width:100%;
}
#footer .link-group a:hover{
	position: relative; top:1px; left: 1px;
	text-decoration:underline;
	color:#000;
}
#footer .link-group ul{
	margin-bottom:1em;
}
#language-link{
	float:right;
}
#language-link a{
	color:#555;
	text-decoration:none;
}
#language-link li{
	display:block;
	float:left;
	margin-left:8px;
}
#language-link li:first-child {
	border-right: 1px solid #555;
	padding-right:8px;
}
#language-link a:hover{
	position: relative; top:1px; left: 1px;
	text-decoration:underline;
	color:#000;
}
#footer footer {
	clear:both;
	line-height:1.4em;
	text-align:center;
	color:#ddd;
	background:#555555;
	padding:16px 0px;
}
#foot-info {
	clear:both;
	float:right;
	width:200px;
	padding-bottom:16px;
}
#foot-info ul{
	margin-bottom:16px;
}
#foot-info p {
	display:block;
	float:right;
}
#foot-info img{
	width:200px;
	height:39px;
}

/*------------------------------------------------
  KJ information Short info
------------------------------------------------*/
#short-info {
	border-left:4px solid #ccc;
	padding-left:16px;
	font-size:13px;
	margin-bottom:16px;
}
#short-info h2{
	font-size:15px;
	font-weight:normal;
	color:#666;
}
#short-info ul {
		padding:8px 0px 0px 0px ;
		margin-left:8px;
}
#short-info ul li{
	line-height:1.6em;
	padding-left: 0.2em;
    text-indent: -0.2em;
}
#short-info a{
	text-decoration:none;
	color:#222;
}
#short-info a:hover{
	position: relative; top:1px; left: 1px;
	text-decoration:underline;
	color:#000;
}

/*------------------------------------------------
 Top page TAB contents
------------------------------------------------*/

.tab_wrap{width:690px; margin:0;}
.tab_wrap input[type="radio"]{display:none;}
.tab_area{font-size:0; margin:0px; z-index:2; position:relative;}
.tab_area label{width:205px; margin:0 8px; display:inline-block; padding:12px 0px 10px 0px ; color:#545454; background:#fff; text-align:center; font-size:18px; font-weight:bold; cursor:pointer; transition:ease 0.2s opacity; border:#bababa solid 3px; }
.tab_area label:hover{color:#008c00}
.panel_area{background:#fff; border-top:#bababa solid 3px; z-index:1; position:relative;top:-3px;}
.tab_panel{width:100%; padding:24px 0px 16px; display:none; }

#tab1:checked ~ .tab_area .tab1_label{background:#fff; padding:13px 0px; color:#008c00;border-top:#008c00 solid 5px; border-bottom: none;}
#tab1:checked ~ .panel_area #panel1{display:block;}
#tab2:checked ~ .tab_area .tab2_label{background:#fff; padding:13px 0px; color:#008c00;border-top:#008c00 solid 5px;border-bottom:none;}
#tab2:checked ~ .panel_area #panel2{display:block;}
#tab3:checked ~ .tab_area .tab3_label{background:#fff; padding:13px 0px; color:#008c00;border-top:#008c00 solid 5px;border-bottom:none;}
#tab3:checked ~ .panel_area #panel3{display:block;}


/*------------------------------------------------
 Subscription page TAB contents
------------------------------------------------*/

#kotei.subscription .tab_wrap{width:100%; margin:0; clear:both;}
#kotei.subscription .tab_area label{width:315px; margin:0 8px; display:inline-block; padding:12px 0px 10px 0px ; color:#545454; background:#fff; text-align:center; font-size:18px; font-weight:bold; cursor:pointer; transition:ease 0.2s opacity; border:#bababa solid 3px; }
#kotei.subscription .tab_area label svg, #kotei.subscription .tab_area label i{  font-size:28px; padding-right:4px; margin-bottom:-4px;}

/*------------------------------------------------
 Meta Info for each post
------------------------------------------------*/

.meta-info {
	background:#eaeaea;
	width:100%;
	font-size:13px;
	color:#000;
	height:26px;
	line-height:26px;
}
.meta-info span.latest {
	display: inline-block;
	background:#b32c00;
	color:#fff;
	height:26px;
	font-size:16px;
	padding:0px 32px;
	margin-right:8px;
}
.meta-info span.newsflash {
	display: inline-block;
	background:#008d00;
	color:#fff;
	height:26px;
	font-size:16px;
	padding:0px 24px;
	margin-right:8px;
}
.meta-info span.mata-date{
	padding:0 8px;
}
.meta-info span.numberstyle{
	width:90px;
	display:block;
	float:right;
	text-align:center;
	background:#444444;
	color:#fff;
}
.meta-info svg,.meta-info i{
	color:#999;
}
.meta-info a{
	text-decoration:none;
	color:#000;
}
.meta-info a:hover{
	position: relative; top:1px; left: 1px;
	text-decoration:underline;
	color:#000;
}



/*------------------------------------------------
 loop link to single post
------------------------------------------------*/
.link-cover {
	line-height:1.6em;
	margin-bottom:16px;
}
.link-cover a{
	display:block;
	padding:16px 0px;
	text-decoration:none;
	color:#222222;
	overflow: auto;
}
.link-cover a:hover{
	background:#FEFFE8;
}
.link-cover a:hover h2,.link-cover a:hover h3{
	text-decoration:underline;
	color:#008c00;
}
.link-cover h3{
	font-size:21px;
	line-height:1.2em;
	padding-bottom:8px;
}

.link-cover a:visited h2,.link-cover a:visited h3, .link-cover a:visited p{
	color:#909090;
}


/*------------------------------------------------
Top latest news
------------------------------------------------*/

h2#top-news {
	font-size:26px;
	font-weight:bold;
	line-height:1.2em;
	margin-bottom:16px;
}
.key-icon .svg-inline--fa, .key-icon i{
	margin-left:0.3em;
	font-size:16px;
	color:#666;
}
#SideMenu .key-icon .svg-inline--fa,#SideMenu .key-icon i{
font-size:12px;
}

p.f-img{
	display:block;
	float:left;
	margin-right:16px;
}
p.f-img img{
	width:150px;
	height:150px;
	background-color: #FFF;
}
p.f-img.big img{
	width:250px;
	height:auto;
}

/*------------------------------------------------
Top News flash/ info
------------------------------------------------*/
#panel2 h2{
	 color:#008c00;
	 margin-bottom:0.5em;
	 font-size:1.1em;
}
#panel2 ul{
	margin-bottom:16px;
	margin-left:16px;
}
#panel2 ul li{
	line-height:1.2em;
	padding-bottom:8px;
	padding-left: 1em;text-indent: -1em;
}
#panel2 ul li .svg-inline--fa,
#panel2 ul li i{
	font-size:16px;
	color:#008c00;
	padding-right:8px;
}
#panel2 ul li .date{
	color:#999;
}
#panel2 ul li a{
	text-decoration:none;
	color:#222;
}
#panel2 ul li a:hover{
	position: relative; top:1px; left: 1px;
	text-decoration:underline;
	color:#FF0000;
}
#panel2 ul li a:hover .date{
color:#FF0000;
}
/*------------------------------------------------
Top Rnking
------------------------------------------------*/
#panel3 h2{
	 color:#008c00;
	 margin-bottom:0.5em;
	 font-size:1.1em;
}
#weekly-box-top ul{
	line-height:1.2em;
	margin-bottom:24px;
	margin-left:16px;
}
#weekly-box-top ul li{
	padding:4px 0;
}
#weekly-box-top ul li a{
	text-decoration:none;
	color:#222;
}
#weekly-box-top ul li a:hover{
	position: relative; top:1px; left: 1px;
	text-decoration:underline;
	color:#FF0000;
}
#weekly-box-top .date{
	display:block; font-size:0.9em;
	color:#999;
}
#weekly-box-top ul li a:hover .date{
	color:#FF0000;
}
#weekly-box-top ul.wpp-list li:nth-child(1){
	background:url(img/img_ranking_01.png) no-repeat;
	padding-left:22px;
	background-position: 0 center;
}
#weekly-box-top ul.wpp-list li:nth-child(2){
	background:url(img/img_ranking_02.png) no-repeat;
	padding-left:24px;
	background-position: 0 center;
}
#weekly-box-top ul.wpp-list li:nth-child(3){
	background:url(img/img_ranking_03.png) no-repeat;
	padding-left:24px;
	background-position: 0 center;
}
#weekly-box-top ul.wpp-list li:nth-child(4){
	background:url(img/img_ranking_04.png) no-repeat;
	padding-left:24px;
	background-position: 0 center;
}
#weekly-box-top ul.wpp-list li:nth-child(5){
	background:url(img/img_ranking_05.png) no-repeat;
	padding-left:24px;
	background-position: 0 center;
}
/*------------------------------------------------
Top arrival-article
------------------------------------------------*/
#arrival-article {
	clear:both;
	border-bottom: 3px solid #bababa;
	position:relative; z-index:1;
	margin-bottom:32px;
}
#arrival-article h2{
width:205px;
margin:0 8px;
display:inline-block;
padding:12px 0px 10px 0px ;
color:#008c00;
 background:#fff; text-align:center; font-size:18px;
 font-weight:bold;
 border-top:#bababa solid 3px;
 border-left:#bababa solid 3px;
 border-right:#bababa solid 3px;
 position:relative;bottom:-3px;
 z-index:2;
}
#arrival-article span a{
	display:block;
	float:right;
	line-height:40px;
	color:#008c00;
	font-weight:bold;
	text-decoration:none;
	padding-right:8px;
}
#arrival-article span a:hover{
	position: relative; top:1px; left: 1px;
	text-decoration:underline;
}

/*------------------------------------------------
Pagenavi
------------------------------------------------*/

div.pagenationstyle {
    clear: both;
    margin-top: 24px;
    margin-bottom: 30px;
    text-align: center;
}
div.pagenationstyle a{
	color:#008c00;
}
.wp-pagenavi {
	clear: both;
}

.wp-pagenavi a, .wp-pagenavi span {
	text-decoration: none;
	border: 1px solid #BFBFBF;
	padding: 3px 5px;
	margin: 2px;
}

.wp-pagenavi a:hover, .wp-pagenavi span.current {
	border-color: #000;
}

.wp-pagenavi span.current {
	font-weight: bold;
}

/*------------------------------------------------
 Welcome
------------------------------------------------*/
#welcome{
	clear:both;
	background:#F0F0E1;
	padding:8px 0 0 0;
	margin-bottom:32px;
}

#welcome a{
	text-decoration:none;
}
#welcome h3{
	display:inline-block;
}
#kotei #welcome h3{
	margin-bottom:0px;
}
#welcome h3 img{
	width:200px;
	height:auto;
	padding:16px 0px 8px 24px;
}
#welcome p{
	padding-left:24px;
	padding-bottom:8px;
	width:400px;
	display:block;
	float:left;
}
#welcome a p{
	color:#222;
	line-height:1.2em;
	font-size:15px;
	margin-bottom:0px;
}
#welcome a p.green{
	color:#008c00;
}
#welcome #services{
	display:block;
	float:right;
	width:220px;
	height:auto;
	margin-right:24px;
}
#welcome .bk {
	clear:both;
	background:#000;
	color:#fff;
	line-height:90px;
	text-align:center;
	font-weight:bold;
	font-size:30px;
}
#welcome:hover {
	transform: scale(1.02);
	-webkit-transform: scale(1.02);
	-moz-transform: scale(1.02);
	-o-transform: scale(1.02);
	-ms-transform: scale(1.02);
	transition: all 0.1s linear;
	-webkit-transition: all 0.1s linear;
	-moz-transition: all 0.1s linear;
	-o-transition: all 0.1s linear;
	-ms-transition: all 0.1s linear;
}
#welcome:hover .bk{
	background:#ff7f00;
}
#welcome.contract{
		padding:0px 0 0 0;
		margin-top:-8px;
}
#welcome.contract:hover .bk{
	background:#0082b2;
}
.fluffy {
  animation: fluffy1 3s ease infinite;
}
#welcome.toppage p{
	width: calc(100% - 280px);
}

#welcome.toppage .top-inner{
	width: 100%;
	max-width: 880px;
	margin: 0 auto;
}

@media screen and (min-width: 1400px) {
	#welcome.toppage .top-inner{
		width: 100%;
		max-width: 1180px;
		margin: 0 auto;
	}
	#welcome.toppage .top-inner p{
		font-size: 1.1em;
		line-height: 1.4em;
	}
}

@keyframes fluffy1 {
  0% { transform:translateY(0) }
  5% { transform:translateY(0) }
  10% { transform:translateY(0) }
  20% { transform:translateY(-15px) }
  25% { transform:translateY(0) }
  30% { transform:translateY(-15px) }
  50% { transform:translateY(0) }
  100% { transform:translateY(0) }
}


/*------------------------------------------------
Side
------------------------------------------------*/


/*---------- Search -------------*/
#search-box{
	background:#EEE;
	color:#fff;
	margin-bottom:2px;
	padding:16px 0;
}

#search-box form{
	margin:0px 0px 16px 16px;
	overflow:auto;
}
#search-box form input[type="text"]{
	border:1px solid #555;
	width:212px;
	height:28px;
	margin:0;
	padding:0;
}
#search-box form input[type="submit"]{
	border:1px solid #555;
	color:#fff;
	background:#555;
	width:55px;
	height:30px;
	margin:0;
	padding:0;
}
#search-box a.more-s{
	display:block;
	width:230px;
	line-height:35px;
	background:#444;
	color:#fff;
	font-size:14px;
	text-align:center;
	margin:0 auto;
	text-decoration:none;
}
#search-box a.more-s:hover{
	background:#000;
	position: relative; top:1px; left: 1px;
}

#search-box img {
    width: 259px;
    display: block;
    margin: 10px auto 0;
}


/*---------- Backnumber PDF btn-------------*/
#go-pdfdl{
	background:#EEE;
    margin-top: 8px;
    margin-bottom: 8px;
}
#go-pdfdl a{
	display: block;
    width: 300px;
    padding: 14px 0;
    position: relative;
	text-decoration: none;
}
#go-pdfdl a span {
    display: block;
    margin: 0 auto;
    width: 262px;
    height: 41px;
    background: url(img/side-pdf-link.png) no-repeat;
    background-size: cover;
    white-space: nowrap;
    text-indent: 100%;
    overflow: hidden;
}
#go-pdfdl a:hover{
	position: relative; top:1px; left: 1px;
}

#go-pdfdl.paid-user a span {
    background: url(img/side-pdf-link-paid.png) no-repeat;
	background-size: cover;
}

#go-pdfdl.paid-user a:hover span {
	background-position: 0 -41px;
}

/*---------- KJ Database btn-------------*/
#go-kjdb{
	background:#EEE;
    margin-top: 8px;
    margin-bottom: 8px;
}
#go-kjdb a{
	display: block;
    width: 300px;
    padding: 14px 0;
    position: relative;
	text-decoration: none;
}
#go-kjdb a span {
    display: block;
    margin: 0 auto;
    width: 262px;
    height: 39px;
    background: url(img/side-kjdb-link.png) no-repeat;
    background-size: cover;
    white-space: nowrap;
    text-indent: 100%;
    overflow: hidden;
}
#go-kjdb a:hover{
	position: relative; top:1px; left: 1px;
}

#go-kjdb.paid-user a span {
    background: url(img/side-kjdb-link-paid.png) no-repeat;
	background-size: cover;
}

#go-kjdb.paid-user a:hover span {
	background-position: 0 -39px;
}



/*---------- AD Space-------------*/
#side-ad-space,#side-ad-space-upper {
    margin-top: 8px;
    margin-bottom: 8px;
}
#side-ad-space img,#side-ad-space-upper img{
	margin-bottom:8px;
	max-width:300px;
	height:auto;
}
#side-ad-space p,#side-ad-space-upper p {
    text-align: right;
    font-size: 13px;
    color: #999;
	margin-top:-0.5em;
	margin-bottom:16px;
}
#side-ad-space p a,#side-ad-space-upper p a {
    text-decoration: none;
    color: #999;
}
#side-ad-space p a:hover,#side-ad-space-upper p a:hover {
    text-decoration: underline;
    color: #FF0000;
	position: relative; top:1px; left: 1px;
}

/*---------- Side H3-------------*/
#SideMenu h3{
	border-top:2px solid #008c00;
	border-bottom:1px solid #008c00;
	line-height:40px;
	padding:0 8px;
	margin-bottom:8px;
	color:#555;
}
#SideMenu h3 span{
	display:inline-block;
	background:#008c00;
	color:#fff;
	font-size:12px;
	font-weight:bold;
	line-height:16px;
	padding:0 16px;
	margin-top:12px;
}
#SideMenu h3 a{
	color:#555;
	text-decoration:none;
}
#SideMenu h3 a:hover{
	color:#008c00;
	position: relative; top:1px; left: 1px;
}

/*---------- Yard Map Banner-------------*/
#yardbtn img{
	max-width:300px;
	height:auto;
	margin-bottom:32px;
}
#yardbtn a:hover img{
	position: relative; top:1px; left: 1px;
	background:#FEFFE8;
}

/*---------- News Flash/Ranking/Opinion-------------*/

#news-info-box, #weekly-box, #opinion-box{
	font-size:14px; line-height:1.2em;
}
#news-info-box ul, #weekly-box ul, #opinion-box ul{
	padding:8px 12px 16px 12px;
}
#news-info-box li, #weekly-box li{
	padding-bottom:8px;
}

#news-info-box a, #weekly-box a, #opinion-box a{
	text-decoration:none;
	color:#555;
}
#news-info-box a:hover .txt, #weekly-box a:hover .txt, #opinion-box a:hover .txt{
	text-decoration: underline;
	color:#FF0000;
}
#news-info-box a:hover, #weekly-box a:hover, #opinion-box a:hover{
	position: relative; top:1px; left: 1px;
}
#news-info-box a span.date, #weekly-box a span.date, #opinion-box a span.date{
	display:block; font-size:11px; color:#999;
}
#news-info-box a:hover p span.date, #weekly-box a:hover span.date, #opinion-box a:hover span.date{
	text-decoration:none;
}
#weekly-box ul{
padding:8px 12px 16px 10px;
}
#weekly-box ul.wpp-list li:nth-child(1){
	background:url(img/img_ranking_01.png) no-repeat;
	padding-left:22px;
	background-position: 0 center;
}
#weekly-box ul.wpp-list li:nth-child(2){
	background:url(img/img_ranking_02.png) no-repeat;
	padding-left:24px;
	background-position: 0 center;
}
#weekly-box ul.wpp-list li:nth-child(3){
	background:url(img/img_ranking_03.png) no-repeat;
	padding-left:24px;
	background-position: 0 center;
}
#weekly-box ul.wpp-list li:nth-child(4){
	background:url(img/img_ranking_04.png) no-repeat;
	padding-left:24px;
	background-position: 0 center;
}
#weekly-box ul.wpp-list li:nth-child(5){
	background:url(img/img_ranking_05.png) no-repeat;
	padding-left:24px;
	background-position: 0 center;
}


#opinion-box li{
	margin-bottom:13px;
}
#opinion-box a span.date{
	display:inline-block;
	width:146px;
}
#opinion-box a span.opinion-cat{
	display:inline-block;
	width:120px;
	line-height:18px;
	font-size:12px;
	background:#008c00;
	color:#fff;
	border-radius: 2px;
	text-align:center;
}

/*------------------------------------------------
 Breadcrumbs
------------------------------------------------*/
#breadcrumbs{
	margin-bottom:18px;
	font-size:13px;
	line-height:2em;
	overflow: auto;
	color:#999;
}
#breadcrumbs ul li{
	display:inline-block;
	margin-right:4px;
}
#breadcrumbs ul li::after{
  content: " >";
}
#breadcrumbs ul li:last-child::after{
	  content: "";
}
#breadcrumbs a{
	color:#999;
	text-decoration:none;
}
#breadcrumbs a:hover{
	color:#f00;
	text-decoration:underline;
}

/*------------------------------------------------
 Single
------------------------------------------------*/

.single-news-flash #post-contents{
	margin-bottom:32px;
}

.single #MainContents h1#title{
	font-size: 26px;
    font-weight: bold;
    line-height: 1.45em;
    margin-bottom: 16px;
}
.single #post-contents h2,
.single #post-contents h3{
	font-size: 16px;
    font-weight: bold;
    line-height: 1.2em;
	margin-top:32px;
    margin-bottom: 16px;
}
.single #post-contents h2::before,
.single #post-contents h3::before{
    margin:-3px 6px 0 0;
    content:" ";
    display:inline-block;
    width:16px;
    height:18px;
    background:url(img/square.svg);
    background-size:contain;
    vertical-align:middle;
}
.single #post-contents .custom-field-link h3::before{
	background:none;
    margin:0;
    width:0;
    height:0;
}
.single #post-contents h2 .svg-inline--fa,
.single #post-contents h3 .svg-inline--fa,
.single #post-contents h2 i.fas,
.single #post-contents h3 i.fas{
	color:#008c00;
	margin-right:4px;
}
.single #post-contents a{ color:#008c00; border-bottom:1px dotted #008c00; text-decoration:none;}
.single #post-contents a:hover{ color:#F00;border-bottom:1px dotted #F00;}


/*------------------------------------------------
 SNS Links
------------------------------------------------*/
#sns-links{
	font-size:12px;
}
#sns-links ul{
	width:690px;
	margin-top:8px;
	margin-bottom:8px;
	overflow: hidden;
	height:35px;
}
#sns-links ul li{
	display:block; float:left;
	margin-right:5px;
}
#sns-links ul li a{
	display:block;
	width:134px;
	line-height:30px;
	text-align:center;
	color:#fff;
	text-decoration:none;
	border-radius:3px;
}
#sns-links ul li a:hover{
	position: relative; top:1px;
}
#sns-links ul li:last-child{
	margin-right:0px;
}
#sns-links ul li.bookma a img{
	width:auto; height:14px;
	vertical-align: middle;
	margin-top:-3px;
	margin-right:3px;
}

#sns-links ul li.facebook a{	background:#315096;}
#sns-links ul li.twitter a{	background:#53AAF2;}
#sns-links ul li.google a{	background:#DC4E41;}
#sns-links ul li.bookma a{	background:#00A3D9;}
#sns-links ul li.pocket a{	background:#EF3E56;}
#sns-links ul li.print a{	background:#888;}
#sns-links ul li svg{ width:auto; height:18px; position:relative;top:3px;}
#sns-links ul li i{ font-size:18px; vertical-align: middle;}

/*------------------------------------------------
 White Cover
------------------------------------------------*/
#w-cover {
		width: 690px;
        height: auto;
        position: relative;
		overflow:auto;
		}
#w-cover::after{
	position: absolute;
        bottom: 0;
        left: 0;
        z-index: 2;
        content: '';
        width: 100%;
        height: 60%;
        background: linear-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .7) 30%, rgba(255, 255, 255, 1) 70%);
}

/*------------------------------------------------
Attention Login
------------------------------------------------*/

#attn{
	border:1px solid #ccc;
	padding:16px;
	line-height:1.64em;
	font-size:15px;
	text-align:center;
	margin-bottom:16px;
}
#attn p{
	text-align:center;
	padding-bottom:10px;
}
#attn p a{
	color:#da6c00;
}
#attn p a:hover{
	color:#f00;
	position: relative; top:1px; left:1px;
}
#attn #form-box{
	width:100%;
	background:#000;
	padding:8px 0px;
}
#attn h3,#form-box p{
	color:#fff;
}
#attn #form-box p span{
	display: inline-block; width:115px;
	text-align:left;
}
#attn #form-box input[type="text"],
#attn #form-box input[type="password"]{
	width: 260px;
    border-radius: 0px;
    padding: 2px;
    line-height: 24px;
    border: none;
}
#attn #form-box {
	text-align:left;
}
#attn #form-box h3{
	text-align:center;
	margin-bottom:8px;
}
#attn #form-box p{
	text-align:left;
	display:inline-block;
	padding-left:80px;
}
#attn #form-box p.submit{
	padding-left:5px;
}
#attn #form-box input[type="submit"]{
	background:#0082b2;
	color:#fff;
	border:none;
	height:30px;
	width:100px;
	cursor: pointer
}



/*------------------------------------------------
post-contents
------------------------------------------------*/
#post-contents p{
	line-height:1.6em;
	margin-bottom:1em;
}
#post-contents p.f-img{
	width:250px;
	margin-right:16px;
	line-height:1.2em;
}
p.f-img span.post-thumbnail-caption{
	 font-size:13px;
	 color:#999;
 }

.single #post-contents img{
	max-width:682px;
	height:auto;
}

/*------------------------------------------------
Bottom Category Links
------------------------------------------------*/
#categories-link{
	clear:both;
	width:100%;
	overflow:auto;
}
#categories-link a{
	display:block; float:left;
	margin-bottom:8px;
	margin-right:4px;
}
#categories-link a{
	display:inline-block;
	padding:8px 16px;
	border:1px solid #a9a9a9;
	text-decoration:none;
	color:#555;
	font-size:14px;
	border-radius:8px;
}
#categories-link a:hover{
	background:#999;
	color:#fff;
}

/*------------------------------------------------
 PRE <-->NEXT Link
------------------------------------------------*/
ul#pre-next{
	border-bottom: 1px dotted #A9A9A9;
	border-top: 1px dotted #A9A9A9;
	padding:4px 0px;
	margin-bottom:24px;
	}
ul#pre-next li{
	display:block;
	text-align:left;
	width:100%;
}
ul#pre-next li:nth-child(2){
	text-align:right;
}
ul#pre-next li a{
	display:block;
	width:100%;
	line-height:60px;
	font-size:16px;
	color:#444;
	text-decoration:none;
}
ul#pre-next li a svg, ul#pre-next li a i{
	color:#DDD;
	vertical-align:middle;
}
ul#pre-next li a:hover{
	position: relative; top:1px; left:1px;
	text-decoration:underline;
	color:#f00;
}

div#custom-pre-next{
	border-bottom: 1px dotted #A9A9A9;
	border-top: 1px dotted #A9A9A9;
	padding:4px 0px;
	margin-bottom:24px;
	width:100%;
	height:60px;
}
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}
div#custom-pre-next a{
	display:inline-block;
	line-height:60px;
	font-size:16px;
	color:#444;
	text-decoration:none;
}
div.nav-links{
	width:100%;
}
div.nav-previous,
div.nav-next{
		width:39%;
}
div#custom-pre-next .nav-next{
	text-align:right;
}
div#custom-pre-next .nav-previous{
	float:left;
}
div#custom-pre-next .nav-next{
	float:right;
}
div#custom-pre-next a svg,
div#custom-pre-next a i{
	color:#DDD;
	vertical-align:middle;
}
div#custom-pre-next a:hover{
	position: relative; top:1px; left:1px;
	text-decoration:underline;
	color:#f00;
}
div#custom-pre-next .go-to-list{
	float:left;
	width:20%;
	text-align:center;
	margin-top:10px;
	border-left:1px dotted #666;
	border-right:1px dotted #666;
}
div#custom-pre-next .go-to-list a{
	display:inline-block;
		line-height:38px;
}

/*------------------------------------------------
 手動設定：下の特集とも関連しています custom field link
------------------------------------------------*/

div.set_related_post{
	float: left;
	margin-bottom:1em;
}
div.set_related_post .set_relatedthumb {
    margin: 0px 0px 0px 0px;
    padding: 5px 8px 5px 8px;
    font-size:13px;
    line-height:15px;
}
div.set_related_post .set_relatedthumb:hover{
	background:#fcfcf4 !important; -webkit-transition: background 0.2s linear; -moz-transition: background 0.2s linear; -o-transition: background 0.2s linear; transition: background 0.2s linear !important;}
div#main-wrapper div.single-honbun div.set_related_post a{
	text-decoration:none;
}
div#main-wrapper div.single-honbun div.set_related_post a:hover{
	text-decoration:underline;
}
div.set_related_post:after{
	clear:both;
	margin-bottom:1em;
}

.single #post-contents div.set_related_post a{ color:#008c00; text-decoration:underline; border:none;}
.single #post-contents div.set_related_post a:hover{ color:#f00; text-decoration: underline; -webkit-transition: 0.2s linear; -moz-transition: 0.2s linear; -o-transition: 0.2s linear; transition:  0.2s linear !important;}

/*------------------------------------------------
こんな記事も読まれています kjol_related
------------------------------------------------*/
.kjol_related { overflow:auto; margin-bottom:24px;}
.kjol_related h3{ margin-bottom:16px;}
.kjol_related a{ color:#008c00; text-decoration:none;}
.kjol_related .relatedthumb {
    padding: 5px 11px 5px 11px !important;
    line-height:15px;
}
.kjol_related .relatedthumb:hover {
	background:#fcfcf4 !important; -webkit-transition: background 0.2s linear; -moz-transition: background 0.2s linear; -o-transition: background 0.2s linear; transition: background 0.2s linear !important;}
.kjol_related a:hover{ color:#f00; text-decoration: underline; -webkit-transition: 0.2s linear; -moz-transition: 0.2s linear; -o-transition: 0.2s linear; transition:  0.2s linear !important;}

/*------------------------------------------------
こんな記事も読まれています yuzo_related_post
------------------------------------------------*/
.yuzo_related_post { overflow:auto; margin-bottom:24px;}
.yuzo_related_post h3{ margin-bottom:16px;}
.yuzo_related_post a{ color:#008c00; text-decoration:none;}
.yuzo_related_post a:hover{ color:#f00; text-decoration: underline;}
.yuzo_related_post .relatedthumb {
    padding: 5px 11px 5px 11px !important;
}

/*-----------------------------
Youtube 対応
------------------------------*/

.kj-video {
position: relative;
height: 0;
padding: 30px 0 56.25%;
overflow: hidden;
margin-bottom:2.5em;
}

.kj-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/*-----------------------------
ギャラリー
------------------------------*/
.gallery { /** ギャラリーを囲むボックス **/
	width: 100%;
	margin-bottom: 20px !important;
    overflow: hidden;
    clear:both;
    padding-top:1em;
}

/**.gallery br {display: none;} /** 自動で挿入される clearfix の余白解除 **/

.gallery-item { /** 画像共通のスタイル **/
    float: left;
	margin-bottom: 0 !important;
	text-align: center;
}
.gallery-icon { /** 画像を囲む dt のスタイル **/
    text-align: center;
}

.gallery-icon img {
	width: 150px;
	height: auto;
	margin-bottom: 10px !important;
	    border: 4px solid #DFDFDF;
}

.gallery-caption { /** キャプション **/
    color: #999;
    font-size: 13px;
    margin: -5px 0 18px;
    text-align: center;
}

.gallery-columns-1 .gallery-item { /** カラムなし **/
    width: 100%;
    margin-right: 0;
}
.gallery-columns-2 .gallery-item { /** 2カラム **/
	width: 48%;
	margin: 0 1%;
}
.gallery-columns-3 .gallery-item { /** 3カラム **/
    width: 31.33333%;
	margin: 0 1%;
}
.gallery-columns-4 .gallery-item { /** 4カラム **/
    width: 23%;
    margin: 0 1%;
}
.gallery-columns-5 .gallery-item { /** 5カラム **/
    width: 18%;
    margin: 0 1%;
}

.single #post-contents .gallery a{ color:#008c00; border-bottom:none; text-decoration:none;}
.single #post-contents .gallery a:hover{ color:#F00;border-bottom:none;}

/*------------------------------------------------
　Archive page アーカイブページ
------------------------------------------------*/
.archive h1{
	font-size:27px;
	margin-bottom:16px;
}
.archive ul.submenu{
	width:100%;
	background:#EBEBEB;
	text-align:center;
	padding:8px 0;
}
.archive ul.submenu li{
	display:inline-block;
	font-size:14px;
	padding:0px 8px 0px 4px;
	border-right:1px solid #888;
}
.archive ul.submenu li:last-child{
	border-right:none;
}
.archive ul.submenu li a{
	display:inline-block;
	text-decoration:none;
	color:#008c00;
}
.archive ul.submenu li a:hover{
	color:#f00;
	text-decoration:underline;
	position: relative; top:1px; left:1px;
}
.archive ul.submenu li.current a{
	text-decoration:none;
	color:#222;
}
.archive p.notyet{
	text-align:center;
	padding:40px 0px 80px 0px;
}

/*------------------------------------------------
　Search page 検索結果アーカイブページ
------------------------------------------------*/
.search h1{
	font-size:27px;
	margin-bottom:16px;
}
.search .annai p{
	line-height:1.8em;
}
.search .annai {
	margin-bottom:2em;
}
#search-box .b-box{
color: #fff;
background: #555;
width: 55px;
line-height: 30px;
margin: 0;
padding: 0;
display: block;
float: left;
text-align: center;
font-size:11px;
}
#search-box .s-box{
	float:left;
}
/*-----------------------------
投稿記事　テーブル 表組み
------------------------------*/

table {
	width:100%;
	margin-bottom:10px;
	font-size:14px;
	line-height:1.6em;
	color: #444;
}

th{
	font-weight:bold;
	border: 1px solid #DFDFD0;
	letter-spacing: 2px;
	padding: 6px 6px 6px 12px;
	background: #F6F9EB;
	vertical-align:middle;
}

td {
	border: 1px solid #DFDFD0;
	background: #fff;
	padding: 6px 6px 6px 12px;
}

table tr td table {
	width:98%;
	border:#EEE;
	margin:0;
	margin-bottom:4px;
}

table tr td table { font-size:0.95em;}
table tr td table th {
	width:26%;
}
.single #post-contents table h2{margin-top:12px; margin-bottom:4px;}
.single #post-contents table h2::before{background: url(img/arrow-alt-circle-right.svg);height: 16px;}

/*-----------------------------
投稿記事　リスト
------------------------------*/
.single #post-contents ul {
	margin: 0 0 1em 1em;
	line-height:1.6em;
}
.single #post-contents ul li svg,.single #post-contents ul li i.fas{
	color:#008c00;
	padding-right:4px;
}
.single #post-contents ul li::before{
  font-size:12px;
  display: none;
  font-family: "Font Awesome 5 Solid";
  content: "\f35a";
}
.single #post-contents ul li ul{
		margin-bottom:0.8em;
}
.single #post-contents ul li ul li{
		margin-bottom:0.1em;
		margin-left:1em;
}
.single #post-contents ul li ul li::before{
	  content: "\f35a";
}
.single #post-contents ul li ul li svg,.single #post-contents ul li ul li i.fas{
	color:#679E65;
}


/*-----------------------------
投稿記事　テーブル 表組み (中央寄せ)
------------------------------*/
table.center{ text-align:center;}
table.center td.right{ text-align:right;}

/*-----------------------------
投稿記事　画像周りのネイティブCSS
------------------------------*/

.aligncenter {
    display: block;
    margin: 0 auto;
}
.alignright { float: right; margin-left:1em; }
.alignleft { float: left; }

.single #post-contents a.image img{
	border:solid 4px #dfdfdf;
}
.single #post-contents a.image{
	border-bottom:none;
}
.single #post-contents p.wp-caption-text{
	text-align: center;
    font-size: 13px;
    color: #999;
}

/*--------------------------------------------------------------------------
   スマートフォンサイトで見るリンク
---------------------------------------------------------------------------*/
.link_sp {
	clear:both;
	width:100%;
	background-color:#ccc;
}

.link_sp a{
	display:block;
	width:100%;
	text-align:center;
	padding: 1.5em 0px;
	font-size:3em;
	color:#444;
}

/* --------------------------------------------------
◎PCでは表示しない
---------------------------------------------------- */
.pc-non{
	display:none;
	}