@charset "UTF-8";
/*================================
 o/w
=================================*/

#topnav {
background-color: rgba(6,2,1,0.99)!important;
}

/* -------------------------
 breadcrumb only on single
---------------------------- */

.breadcrumb {
margin-left:10px;
margin-bottom:10px;
}

.bloglist .breadcrumb {
margin-left:20px;
margin-bottom:0;
}


.breadcrumb li{
display: inline-block;
font-size:14px;
color:#777;
}

.breadcrumb li a{
color:#777;
}

.breadcrumb li a:hover{
text-decoration: underline;
}


/*================================
SYSTEM
=================================*/

.wrapper#system{
padding-top:0;
margin-bottom: 20px;
background-color:#F5F2EB;
}


/* for blog single and list
   #rowcats(bottom block)
-------------------------------- */

#rowcats.rows{
overflow: hidden;
}

#rowcats .row_inner{
width:1200px;
padding:50px 0 50px;
margin:0 auto 50px;
background-color:#fff;
border: 2px solid #C9BC9C;
text-align: center;
}

#rowcats .row_inner h2{
background:url(../img/system/rowcats_title.png) no-repeat center center;
display: block;
width:400px;
height:100px;
margin: 0 auto 30px;
}

#rowcats .onebox{
display: inline-block;
vertical-align: top;
width:400px;
min-height:120px;
margin:0;
}

#rowcats .onebox{
position: relative;
padding:0;
text-align: left;
}

#rowcats .onebox ul{
display:block;
}

#rowcats .onebox ul li{
padding:0 10px;
}

#rowcats .onebox ul li a{
display: block;
overflow: hidden;
color:#333;
font-size: 24px;
font-weight: bold;
line-height:1.5em;
text-indent:10px;
text-align: center;
letter-spacing: 0.03em;
padding:10px 0;
border-bottom:1px solid #fafafa;
}

#rowcats .onebox ul li a:hover{
background-color:#fafafa;
transition:0.2s;
}

/* for blog list
----------------- */


/* for blog single
----------------- */

.blogsingle{
position:relative;
width:1200px;
margin:20px auto 0;
}

.blogsingle #posts{
width:1200px;
}

.blogsingle #posts .post{
background-color:#fff;
padding:40px 100px;
margin-bottom:50px;
border:2px solid #CFC4A7;
box-shadow: 10px 10px 0 rgba(1,1,1,1);
}

.blogsingle .post .post_header{
position: relative;
display: block;
min-height:120px;
margin-bottom:0;
text-align: center;
}

.blogsingle .post .post_header h2{
display: block;
overflow: hidden;
font-size:28px;
font-weight: bold;
line-height:1.5em;
color:#000000;
padding:40px 0;
margin:0;
}

.blogsingle .post .post_header .desc{
display:block;
line-height:1.5;
text-align: left;
font-size:15px;
line-height:1.8;
margin-bottom: 30px;
}

.blogsingle .post .post_header .desc span.date{
display: inline-block;
font-size:15px;
color:#111;
letter-spacing: 0.1em;
margin-right:10px;
}

.blogsingle .post .post_header .desc span.tit{
display: inline-block;
font-size:11px;
color:#777;
}

.blogsingle .post .post_header .desc ul.terms{
position: relative;
display:inline-block;
}
.blogsingle .post .post_header .desc ul.terms li{
position: relative;
display:inline-block;
margin-right:20px;
}
.blogsingle .post .post_header .desc ul.terms li::after{
display:block;
position: absolute;
content:" | ";
top:0;
right:-13px;
}
.blogsingle .post .post_header .desc ul.terms li:last-child::after{
content:"";
}


/* ===========================
with visual editor stylesheet
============================ */

.blogsingle .post .post_content {
padding:0;
line-height:1.8em!important;
margin:20px 0 60px;
}

/* overwrite on initial style */
.blogsingle .post .post_content strong{
font-weight: bold;
}

.blogsingle .post .post_content em{
font-style: italic;
}

.blogsingle .post .post_content a{
text-decoration: underline;
}

.blogsingle .post .post_content p{
line-height: 1.8em;
}

/* require for using classic-editor */
.blogsingle .post .post_content img{
max-width: 100%;
height:auto;
}
img.alignright{
display: block;
margin: 0 0 0 auto;
}
img.alignleft{
display: block;
margin: 0 auto 0 0;
}
img.aligncenter{
display: block;
margin: 0 auto;
}

/* with extra visual editor stylesheet */
.blogsingle .post .post_content h1 {
font-size: 32px;
line-height: 1.8em;
}

/* with extra visual editor stylesheet */
.blogsingle .post .post_content h2 {
display: block;
font-size: 24px;
font-weight: normal;
line-height: 1.8em;
color:#C6B999;
background-color:#060201;
padding:0.7em 0.5em;
margin:1em 0;
}

/* with extra visual editor stylesheet */
.blogsingle .post .post_content h3 {
display: block;
font-weight: normal;
font-size: 24px;
line-height: 1.8em;
padding:0.2em 0.5em;
margin:1em 0;
border-bottom:5px solid #C6B999;
}

/* with extra visual editor stylesheet */
.blogsingle .post .post_content h4 {
font-size: 20px;
line-height: 1.8em;
}
.blogsingle .post .post_content h5 {
font-size: 18px;
line-height: 1.8em;
}
.blogsingle .post .post_content h6 {
font-size: 16px;
line-height: 1.8em;
}

/* SOC
-------------------------------- */

.blogsingle .soc{
display:block;
padding:10px 20px;
margin:20px 0;
line-height:30px;
/*
background-color: #FAF5EF;
*/
}

.blogsingle .soc span{
font-size:1em;
font-weight: 900;
line-height:30px;
color:#CABD9B;
margin-right:10px;
}

.blogsingle .soc .socbtns{
display:inline-block;
padding:0;
margin:0;
}

.blogsingle .soc .socbtns a.socbtn{
display:inline-block;
vertical-align:middle;
margin-right:5px;
transition: 0.2s;
}

.blogsingle .soc .socbtns a.socbtn:hover{
opacity:0.7;
}

.blogsingle .soc .socbtns a.socbtn.btn_fb{
background:url(./../img/element/btn_blog_fb_gold.png) no-repeat center center #eee;
background-size:99px 33px;
width:99px;
height:33px;
}

.blogsingle .soc .socbtns a.socbtn.btn_tw{
background:url(./../img/element/btn_blog_tw_gold.png) no-repeat center center #eee;
background-size:99px 33px;
width:99px;
height:33px;
}

.blogsingle .soc .socbtns a.socbtn.btn_fb_ico{
background:url(./../img/element/btn_blog_fb_gold_ico.png) no-repeat center center #eee;
background-size:25px 25px;
width:25px;
height:25px;
}

.blogsingle .soc .socbtns a.socbtn.btn_tw_ico{
background:url(./../img/element/btn_blog_tw_gold_ico.png) no-repeat center center #eee;
background-size:25px 25px;
width:25px;
height:25px;
}

.blogsingle .soc .socbtns .date{
font-size:14px;
color:#111;
margin-left:4px;
}

.blogsingle .soc ul.soc_terms{
position: relative;
display:inline-block;
}
.blogsingle .soc ul.soc_terms li{
position: relative;
display:inline-block;
margin-right:20px;
}
.blogsingle .soc ul.soc_terms li::after{
display:block;
position: absolute;
content:" | ";
top:0;
right:-13px;
}
.blogsingle .soc ul.soc_terms li:last-child::after{
content:"";
}


/* PageNavi
-------------------------------- */

.navigation{
width:100%;
display:block;
overflow:hidden;
padding:60px 10px 80px;
text-align:center;
font-size:1.4em;
}

.wp-pagenavi{
display:block;
overflow:hidden;
width:900px;
margin:0 auto;
}

.wp-pagenavi a{
display:inline-block;
line-height:1;
font-size:0.76em;
color:#111;
padding:8px 12px!important;
margin:4px;
background-color:#fff;
}

.wp-pagenavi a:hover{
color:#fff;
background-color:#121212;
text-decoration: none;
}

.wp-pagenavi span.current{
display:inline-block;
line-height:1;
font-size:0.76em;
color:#fff;
padding:8px 12px;
background-color:#121212;
margin:4px;
}

/*
.wp-pagenavi a:hover,
.wp-pagenavi span.current {
border-color: #ddd!important;
}
*/

.single_navigation{
position:relative;
width:auto;
height:50px;
display:block;
padding:0;
text-align:center;
margin:30px auto 0;
}

.single_navigation ul{
display:block;
position:relative;
}

.single_navigation ul li{
display:block;
width:240px;
height:50px;
position: absolute;
top:0;
}

.single_navigation ul li a{
overflow: hidden;
display:block;
padding:0 20px;
font-size:15px;
font-weight:bold;
color:#fff;
background-color:#121212;
text-align: center;
line-height:50px;
}

.single_navigation ul li a:hover{
text-decoration: none;
color:#fff;
background-color:#262626;
transition:0.2s;
}

.single_navigation ul li.prev  { left:0; }
.single_navigation ul li.back  { left:250px; }
.single_navigation ul li.next  { left:500px; }
.single_navigation ul li.front { left:750px; width:252px;}
.single_navigation ul li.prev a  { text-align: left; }
.single_navigation ul li.back a  { text-align: center; }
.single_navigation ul li.next a  { text-align: right; }
.single_navigation ul li.front a { text-align: center; width:252px; color:#C9BC9C;}

/*
.single_navigation ul li.prev a::before{
display: block;
background:url(../img/element/arrow_prev_black.png) no-repeat center center;
content:"";
width:20px;
height:20px;
position:absolute;
left:0;
top:0;
}

.single_navigation ul li.next a::after{
display: block;
background:url(../img/element/arrow_next_black.png) no-repeat center center;
content:"";
width:20px;
height:20px;
position:absolute;
right:0;
top:0;
}
*/

/* subnav
-------------------------------- */

.subnav{
display: block;
position: relative;
background-color:#fff;
}

.subnav ul{
display: block;
position: relative;
padding:0;
margin: 0 auto;
width:1280px;
height:120px;
}

.subnav ul li {
position: relative;
display:block;
float:left;
vertical-align: baseline;
color:#111;
padding:0;
margin:0!important;
text-align: center;
}

.subnav ul li::before {
position: absolute;
left:0;
top:20px;
content:"";
display:block;
height:80px;
width:2px;
background-color:#eee;
z-index:9;
}

.subnav ul li:last-child::after {
position: absolute;
right:0;
top:20px;
content:"";
display:block;
height:80px;
width:2px;
background-color:#eee;
}

.subnav ul li a{
position: relative;
display:block;
width:320px;
height:120px;
padding:20px 0;
color:#111;
cursor:pointer;
opacity:0.96;
transition: 0.2s;
}

.subnav ul li a span{
display:block;
font-weight: bold;
font-size:22px;
letter-spacing: 0.15em;
line-height:40px;
padding-top:10px;
}

.subnav ul li a em{
display:block;
line-height:20px;
font-size:11px;
letter-spacing: 0.25em;
color:#121212;
}


.subnav ul li a.current::after {
display: block;
background:url(../img/element/icon_sankaku_bottom.png) no-repeat center center;
content:"";
width:39px;
height:24px;
position:absolute;
left:0;
right:0;
bottom:-23px;
margin:auto;
}

.subnav ul li a::before {
background-color: #121212;
position: absolute;
bottom: 20px;
content: '';
display: block;
height: 3px;
width: 0;
transition: 0.1s all;
}

/*
.subnav ul li a.current::before,
*/
.subnav ul li a::before {
left: 40%;
border-radius:0 2px 2px 0 / 0 2px 2px 0;
}

/*
.subnav ul li a.current::before,
*/
.subnav ul li a:hover::before {
width: 20%;
}