/*
Theme Name: type-TN22
**POST**
Author: TN
Version: 2.1, 2022.01
*/

@charset "UTF-8";

/*------------------------------------------------------------
	POSTS
------------------------------------------------------------ */
.postlist { display: flex; align-items: flex-start; justify-content: space-between; margin-top: 3%;}
.staffblog .postlist article,
.archive article,
.news article,
.posthead article { width: calc(100% - 290px);}
.staffblog .postlist .sidebar-container,
.archive .sidebar-container,
.news .sidebar-container,
.posthead .sidebar-container,
.single .sidebar-container  { width: 240px; padding: 1.2em 1.2em 0; background: #fff;}

/* PAGING */
.paging { width: 100%; display: flex; align-items: center; justify-content: center; margin-top: 5%;}
.paging a, .paging span, .paging i { display: block; font-size: 16px; line-height: 1; margin: 0 .5em; border: 1px solid var(--main); color: var(--main); border-radius: 6px;}
.paging a, .paging span { padding: 10px 15px 12px; background: #fff;}
.paging a:hover { background: var(--sub);}
.paging span { background: var(--main); color: #fff;}
.paging span.page-numbers.dots { background: none; color: var(--main); padding: 0; border: 0;}
.paging i { border: 0;}

/*side bar*/
.sidebar-container h3 { font-size:15px; padding:.2em 0 .3em 1.2em; margin:0; font-weight: 600; color: var(--main);}
.sidebar-container ul { margin-bottom:2em; }
.sidebar-container li { position: relative; padding:1em .2em; margin:0; border:0; width:100% !important; border-bottom:1px solid #ccc; }
.sidebar-container li a { font-size: 14px; position: relative; padding:0 1.2em 0 0; display:block; }
.sidebar-container li a:hover { color: var(--main); background:none; }
.sidebar-container li a::after {
content:"\f105";
font-family: FontAwesome;
position: absolute;
top: 50%;
right: 0;
transform: translate(0%,-50%);
transition: all .2s ease-in-out;
color: #ccc;
display: block;
font-size: 18px;
}

@media(max-width:767px) {
    .postlist { flex-wrap: wrap;}
    .staffblog .postlist article,
    .news article,
    .archive article { width: 100%;}
    .staffblog .postlist .sidebar-container,
    .news .sidebar-container,
    .archive .sidebar-container { width: 100%; margin-top: 10%;}
}


/*------------------------------------------------------------
	SINGLE
------------------------------------------------------------ */
.single .uds .izumi-wrapinBx, .list .izumi-wrapinBx { display:flex; justify-content: space-between; align-items: flex-start; }
.single .uds .izumi-wrapinBx.posthead { display: block; padding-top: 0;}
.single .uds .izumi-wrapinBx .detail, .list .izumi-wrapinBx .detail { width: calc(100% - 290px);}
.single .uds .izumi-wrapinBx .detail .date { margin-bottom: 3em; padding: .8em .6em 1em; line-height: 1; border-top: 1px solid var(--sub); color: var(--sub);border-bottom: 1px solid var(--sub); color: var(--sub);}
.single .uds .izumi-wrapinBx .detail h1 { position: relative; margin-bottom: 1em; padding-left: 1em;}
.single .uds .izumi-wrapinBx .detail h1::after, .single .uds .izumi-wrapinBx .detail h1::before { position: absolute; content: ""; left: 0; width: 8px; height: 50%;}
.single .uds .izumi-wrapinBx .detail h1::before { top: 0; background: var(--main);}
.single .uds .izumi-wrapinBx .detail h1::after { bottom: 0; background: var(--sub);}

.single .uds .izumi-wrapinBx .detail p { font-size:16px; line-height:2;}
.single .uds .izumi-wrapinBx .sidebar-container, .list .izumi-wrapinBx .sidebar-container, #eo_event_list_widget-2 { width:20%;}

.single .detail div.prenex { border-top:1px solid var(--sub); background: none; padding:0 0 0; margin:10% 0 0; background:none !important }
.single .detail div.prenex dl { display:flex; align-items: stretch; justify-content: space-between; margin:6% 0 0; padding: 0;}
.single .detail div.prenex dt,
.single .detail div.prenex dd { position: relative; display: block; width: 47%;}
.single .detail div.prenex dd { text-align:right; }
.single .detail div.prenex dt a,
.single .detail div.prenex dd a { position:relative; text-decoration:none !important; padding:1em 1.8em 1.2em; border:1px solid var(--main); color: var(--main); width:100%; height: 100%; border-radius:6px; font-weight:400; display: flex; align-items: center;}
.single .detail div.prenex dt a { padding-left: 1.8em;}
.single .detail div.prenex dd a { padding-right:1.8em;}
.single .detail div.prenex dt a::after,
.single .detail div.prenex dd a::after {
content:"\f104";
font-family: FontAwesome;
position: absolute;
top: 50%;
left: 18px;
transform: translate(-50%,-50%);
transition: all .2s ease-in-out;
color: var(--main);
display: block;
font-size: 20px;
}
.single .detail div.prenex a:hover { color: var(--sub); border-color: var(--sub); background: #fff;}
.single .detail div.prenex dd a::after { content:"\f105"; left: inherit; right: 10px; }
.single .detail div.prenex dt a:hover::after { left: 12px; color: var(--sub);}
.single .detail div.prenex dd a:hover::after { right: 4px; color: var(--sub);}

.single .detail h2 { font-size:20px; padding:.4em 1em .5em; margin-bottom:1em; background:var(--main); color: #fff; border-left: 8px solid var(--sub);}
.single .detail h3 { font-size:20px; padding:.6em .3em .7em; margin-bottom:1em; border-top:2px solid var(--main); border-bottom:2px solid var(--main); color: var(--main);}
.single .detail h3::before, .single .detail h3::after { display: none;}
.single .detail h4 { font-size:18px; padding:0 0 .5em .2em; margin-bottom:1em; border-bottom:1px solid var(--main); }
.single .detail h5 { font-size:18px; padding:0 0 0 .6em; border-left:5px solid var(--main); margin-bottom:.4em; }
.single .detail h6 { font-size:17px; margin-bottom:.4em; color: var(--main);}
.single .detail p { margin-bottom:1.85em; }
.single .detail img { height:auto; }
.single .detail .wp-post-image { margin:0 0 5%; }
.single .detail hr { margin:5% 0; }
.single .detail pre { border:1px solid #eee; background:#f9f9f9; border-radius:5px; margin:5% 0; padding:4% 5%; font-weight: 260; white-space: normal; line-height:1.8;}
.single .detail strong { position: relative; font-size:1em; color: #292f35; margin:0 .2em; padding:0 .3em .1em; z-index: 0; background: rgba(255,238,17,.6); }
.single .detail strong.blue { background: rgba(60,162,224,.6); }
.single .detail strong.green { background: rgba(50,210,124,.6); }
.single .detail strong.gray { background: rgba(204,204,204,.6); }
.single .detail ul, .detail ol { margin:4% 0; }
.single .detail li {
list-style-position: inside;
padding-left: 1.2em;
text-indent: -1.1em;
margin:0 0 .5em;
line-height:1.6;
}
.single .detail ul li { list-style-type: disc; }
.single .detail blockquote { border-left:5px solid #ccc; margin:5% 0 5% 5%; padding:1% 0 1% 2%; }
.single .detail blockquote p { color:#777; font-size:calc(1em - 2px) !important; line-height:1.5 !important; margin:0 !important; }
.single .detail p a { position:relative; text-align:center; margin:2em 0 0; padding: .7em 2.4em 1em; line-height: 1; display:inline-block; border-radius: 50px; background: none; color: #FF3D5E; border: 1px solid #FF3D5E; font-size: calc(1em + 2px); text-decoration: none;}
.single .detail p a:hover { background: #fff0f2; color: #FF3D5E;}


@media(max-width:767px) {
    .single .uds .izumi-wrapinBx, .list .izumi-wrapinBx { flex-wrap:wrap; }
    .single .uds .izumi-wrapinBx .detail .date { margin-bottom: 2em;}
    .single .uds .izumi-wrapinBx .detail, .list .izumi-wrapinBx .detail { width:100%; }
    .single .uds .izumi-wrapinBx .detail h1 { font-size:2rem; }
    .single .uds .izumi-wrapinBx .detail p { font-size:1.5rem; }
    .single .uds .izumi-wrapinBx .sidebar-container, .list .izumi-wrapinBx .sidebar-container, #eo_event_list_widget-2 { width:100%; margin:10% auto 0; padding:10% 10% 0; border-top:2px solid #f6f6f6; }
    .single .detail h2 { font-size:1.8rem; }
    .single .detail h3 { font-size:1.7rem; }
    .single .detail h4 { font-size:1.7rem; }
    .single .detail h5 { font-size:1.6rem; }
    .single .detail h6 { font-size:1.6rem; }
    .single .detail hr { margin:7% 0; }
    .single .detail pre {margin:5% 0; padding:4% 6%; font-weight: 260; }
    .single .detail strong::after { height: 10px; }
    .single .detail ul, .detail ol { margin:5% 0; }

    .single .prenex { margin:0; border:0; background: none; padding:10px 0; }
    .single .prenex dl { flex-wrap: wrap; margin-top:5%; }
    .single .prenex dt { width:100%; }
    .single .prenex dd { width:100%;}
    .single .detail div.prenex dl { flex-wrap: wrap; margin:6% 0 0; padding: 0;}
    .single .detail div.prenex dt,
    .single .detail div.prenex dd { width: 100%;}
    .single .detail div.prenex dd { margin-top: 1em;}
    .single .detail div.prenex a, a.pageback { position:relative; font-weight:normal; text-decoration:none !important; padding:1em 1.8em 1.2em; border:1px solid #ccc; display:inline-block; width:100%; border-radius:6px; font-weight:300; }
    a.pageback { text-align:center; }
    .single .prenex a:hover, a.pageback:hover { background:#f0f0f0; }

}

@media(max-width:320px) {
}