.youtube {
position:relative;
width:100%;
padding-top:56.25%
}

.youtube iframe {
position:absolute;
top:0;
right:0;
width:100%!important;
height:100%!important
}

h1 {
border-bottom:none;
}
.index-intro {
font-size:1.2rem
}

.list-index {
display:flex;
flex-flow:row wrap;
justify-content:flex-start
}

.list-index a:link,.list-index a:visited,.list-index a:hover,.list-index a:active {
text-decoration:none
}

.blog-label {
margin:.5rem 0;
font-size:1.2rem
}

.blog-label>span,.page-label>span {
line-height:1;
display:inline-block;
margin:.2rem;
padding:.5rem .25rem;
border-radius:2px;
font-size:1rem;
color:#666;
background-color:#eee
}

.index-image {
display:block;
box-sizing:content-box;
background:url(/photo/blog/images/img_noimage.png) no-repeat center center;
background-size:contain
}

.meta p {
margin-left:0;
margin-right:0
}

.list-index>a:hover .index-image {
opacity:.7
}

.index-title {
line-height:1.4;
font-weight:700
}

.index-text {
color:#999;
font-size:1.2rem
}

.list-index [class^=index] {
margin:.5rem 0;
font-size:1.4rem;
color:#333
}

.list-index>a:hover p {
color:#777
}

.list-index .index-dete {
line-height:1.1;
margin:.5rem 0;
font-size:1rem;
color:#666
}

.list-index .index-description {
line-height:1.3;
margin:.5rem 0;
font-size:1.1rem;
color:#666
}

.yt-div {
position:relative;
padding-top:56.25%;
margin:3rem 0
}

.yt-div iframe {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
width:100%;
height:100%
}

.page-title {
margin:0 0 .25rem
}

.page-meta {
list-style:none;
display:flex;
flex-flow:row wrap;
justify-content:flex-start;
align-items:center;
margin:.25rem 0 2.5rem;
padding:1rem 0;
border-bottom:2px solid #eee
}

.page-meta li {
margin:0;
padding:0;
font-size:1.1rem
}

.page-meta li:not(:last-child)::after {
content:'/';
display:inline-block;
margin-left:.25rem;
margin-right:.25rem
}

.page-name img {
display:inline-block;
width:16px;
height:auto;
vertical-align:middle;
margin-right:.25rem
}

.paging {
display:flex;
flex-flow:row wrap;
justify-content:center;
margin:1rem 0
}

.paging>a {
display:block;
margin:.5rem
}

.paging a:link,.paging a:hover,.paging a:visited,.paging a:active {
color:#666;
text-decoration:none
}

.paging a:hover p {
text-decoration:underline;
background-color:#fafafa
}

.paging p {
line-height:30px;
margin:0;
padding:0;
border:1px solid #ccc;
width:30px;
height:30px;
text-align:center
}

.paging .current {
border:none;
background:#fff
}

.paging p:not(.current) {
box-shadow:0 1px 0 #f0f0f0
}

.paging :hover p:not(.current) {
box-shadow:none
}

.pager {
margin:4rem 0 3rem
}

.pager ul {
box-sizing:border-box;
display:flex;
flex-flow:row nowrap;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd
}

.pager li {
position:relative;
flex:0 0 50%;
min-width:0;
padding:0
}

.pager li:not(:only-child)::after {
content:'';
display:block;
position:absolute;
top:50%;
right:0;
transform:translateY(-50%);
width:1px;
height:60%;
background-color:#ccc
}

.pager li:last-of-type::after {
content:none
}

.pager i {
display:block;
width:16px;
height:16px;
margin:1rem auto
}

.pager i::after {
content:'';
display:block;
width:16px;
height:16px;
border-top:1px solid #666;
border-right:1px solid #666;
transform:rotate(-135deg)
}

.pager .next i::after {
transform:rotate(45deg)
}

.pager .asist {
position:absolute;
left:0;
top:0;
margin:.25rem 0;
padding:0;
color:#999;
font-size:1.1rem
}

.pager li:last-of-type .asist {
left:auto;
right:0
}

.pager .title-art {
margin:0;
font-size:1.1rem;
text-align:center;
white-space:nowrap;
text-overflow:ellipsis;
text-overflow:…;
overflow:hidden
}

.pager a {
display:block;
padding:2rem 1rem
}

.pager a:link,.pager a:visited,.pager a:hover,.pager a:active {
text-decoration:none;
color:#666
}

.pager a:hover {
color:#999;
background-color:#fafafa
}

.pager a:hover i {
border-color:#999
}

.pager .blog-label {
margin:.5rem 0;
font-size:1.2rem
}

.pager .blog-label>span,.pager .page-label>span {
line-height:1;
display:inline-block;
margin:.2rem;
padding:.5rem .25rem;
border-radius:2px;
font-size:1rem;
color:#666;
background-color:#eee
}

.pager .index-image {
display:block;
box-sizing:content-box;
background:url(/photo/blog/images/img_noimage.png) no-repeat center center;
background-size:contain
}

.title-related {
margin:2rem;
padding:0;
background:none;
color:#3d3333
}

.related-post {
margin:1rem 0
}

.related-post>a {
display:block;
box-sizing:border-box
}

.related-post .blog-label {
margin:.5rem;
font-size:1.1rem
}

.related-post .index-title {
line-height:1.3;
margin:.5rem;
font-size:1.3rem
}

.related-post .index-dete {
margin:.5rem;
font-size:1.1rem
}

.related-post .blog-label>span {
padding:.1rem
}

.related-post a:link,.related-post a:visited,.related-post a:hover,.related-post a:active {
color:#3d3333;
text-decoration:none
}

.related-post a:hover {
color:#999
}

.related-post a:hover .index-image {
opacity:.7
}

.related-post .index-image {
border:none
}

@media screen and (max-width: 767px) {
#wPrimary>.page-title,#wPrimary>.page-meta {
margin-left:.5rem;
margin-right:.5rem
}

.list-index>a {
display:block;
width:100%;
padding:.5rem .25rem;
border-bottom:1px solid #eee
}

.card {
display:flex;
flex-flow:row nowrap;
align-items:center
}

.card .index-image {
flex:0 0 33%;
padding-top:33%
}

.card .meta {
flex:0 0 67%;
padding:0 0 0 .725rem
}

.related-post>a {
margin:0 0 1rem
}

.related-post>a article {
display:flex;
flex-flow:row nowrap
}

.related-post>a .index-image {
flex:0 0 33%;
padding-top:0
}

.related-post>a .meta {
flex:0 0 67%
}

#wSideBar aside dl {
display: none;
}
}

@media screen and (min-width: 768px) {
.list-index>a {
flex:0 0 100%;
margin:0
}

.card {
display:flex;
flex-flow:row nowrap;
align-items:center;
box-sizing:border-box;
margin:1rem 0
}

.card .index-image {
flex:0 0 25%;
padding-top:180px
}

.card .meta {
flex:1 1 70%;
padding-left:2.5rem
}

.card .index-title {
font-size:2rem;
color:#666
}

.card .index-dete {
font-size:1.1rem
}

.card .index-description {
font-size:1.2rem
}

#blg {
font-size:1.5rem
}

#blg p {
line-height:2.4
}

.pager {
margin-top:7rem
}

.pager a {
padding:2rem 7rem 1rem
}

.pager i {
margin-bottom:2rem
}

.index-image {
padding-top:52.35%;
background-size:contain
}

.paging p {
padding:1rem
}

.related-post {
display:flex;
flex-flow:row wrap;
margin:1rem 0
}

.related-post>a {
box-sizing:border-box;
flex:0 0 25%
}

}