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

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

#system.single_system main{
background-color: #F7F7F7;
margin-bottom:8px;
}

#system.single_system a.to_viewall{
background:url(../img/system/single_btn_viewall.png) no-repeat center center;
display:block;
width:189px;
height:62px;
position: absolute;
top:20px;
right:40px;
}


/* for blog list #post(main block)
-------------------------------- */

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

.blogsingle{
position: relative;
overflow: hidden;
}


.blogsingle .post{
width:1200px;
padding:40px 40px 50px;
margin:50px auto 50px;
background-color: #fff;
}

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

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

.blogsingle .post .post_header .desc{
display:block;
line-height:1.5;
text-align: center;
font-size:15px;
line-height:1.8;
padding:10px 0;
margin-bottom: 30px;
border-radius: 5px;
}

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

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

.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: 150%;
line-height: 1.8em;
}

/* with extra visual editor stylesheet */
.blogsingle .post .post_content h2 {
/*
font-size: 28px;
line-height: 1.8em;
*/
display: block;
font-size: 150%;
font-weight: normal;
line-height: 1.8em;
color:#fff;
background-color:#312D2A;
padding:0.5em 0.5em;
padding:0.5em 0.5em;
margin-top:2em;
margin-bottom:1em;
}

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

}

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

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

.blogsingle .soc{
display:block;
padding:10px 20px;
margin:0 auto 50px;
line-height:30px;
background-color: #F7F7F7;
}

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

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

.blogsingle .soc .socbtns a.socbtn{
display:inline-block;
vertical-align:middle;
margin-right:10px;
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_r3.jpg) no-repeat center center #eee;
background-size:98px 30px;
width:98px;
height:30px;
}

.blogsingle .soc .socbtns a.socbtn.btn_tw{
background:url(../img/element/btn_blog_tw_r3.jpg) no-repeat center center #eee;
background-size:98px 30px;
width:98px;
height:30px;
}

.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:#111;
text-decoration: none;
}

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

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

.single_navigation ul{
display:block;
height:61px;
margin-bottom:50px;
position:relative;
text-align: justify;
}

.single_navigation ul li{
position: relative;
display:inline-block;
margin:0 auto;
}

.single_navigation ul li a{
overflow: hidden;
display:block;
position: relative;
}
.single_navigation ul li a:hover{
opacity: 0.8;
}

.single_navigation ul li.prev a{
background:url(../img/system/single_nav_btn_back.png) no-repeat center center;
display:block;
width:164px;
height:61px;
}

.single_navigation ul li.next a{
background:url(../img/system/single_nav_btn_back.png) no-repeat center center;
display:block;
width:164px;
height:61px;
}

.single_navigation ul li.tolist a{
background:url(../img/system/single_nav_btn_viewall.png) no-repeat center center;
display:block;
width:315px;
height:61px;
}


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

.subnav{
overflow: hidden;
display: block;
width:630px;
height:80px;
position: absolute;
left:330px;
top:0;
z-index: 99;
}

.subnav ul{
overflow: hidden;
display: block;
height:80px;
padding:20px 0;
}

.subnav ul li.nav_item {
float:left;
position: relative;
display:block;
width:200px;
margin:0;
}

.subnav ul li.nav_item a{
position: relative;
display:inline-block;
height:40px;
font-size:18px;
line-height: 40px;
font-weight: bold;
padding-left:10px;
margin-left:25px;
margin-right:10px;
text-align: left;

color:#111;
letter-spacing: 0.08em;
cursor:pointer;
opacity:0.96;
transition: 0.2s;
}

.subnav ul li.nav_item a::before{
content: "";
background:url(../img/element/logo_small26_black.png) no-repeat center center;
display: block;
width:25px;
height:37px;
position: absolute;
top:0;
left:-25px;
}


.subnav ul li.nav_item a::after {
position: absolute;
bottom: 0;
content: '';
display: block;
height: 2px;
width: 0;
background-color: rgba(1,1,1,1);
transition: 0.1s all;
}

.subnav ul li.nav_item a::after {
left: -25px;
width:0;
border-radius:0 3px 3px 0 / 0 3px 3px 0;
}

.subnav ul li.nav_item a:hover::after,
.subnav ul li.nav_item a.current::after {
width: 125px;
width: calc(100% + 25px);
}