@import url("http://sakura-tourist.co.jp/css/content.css");
.cf { zoom: 1; /* for ie */ }
.cf:after { content: ""; display: table; clear: both; }

.blog-top { background: url(../img/page-title.jpg) center no-repeat; text-align: center; border-bottom: 1px solid #333; }
.blog-top a { color: #fff; padding: 60px 0; }
@media screen and (max-width: 480px) { .blog-top a { padding: 30px 0; } }
.blog-top h1 { font-size: 2em; font-weight: 700; }

.blog-navi { background: #666; }
.blog-navi ul { width: 1160px; margin: 0 auto; }
@media screen and (max-width: 480px) { .blog-navi ul { width: 100% !important; } }
.blog-navi ul:after { content: ""; display: block; clear: both; }
.blog-navi ul li { width: 20%; float: left; }
.blog-navi ul li a { text-align: center; padding: 15px 0px; color: #fff; border-left: 1px solid #444; }
@media screen and (max-width: 480px) { .blog-navi ul li a { padding: 10px 0; font-size: 0.8em; } }
.blog-navi ul li:last-child a { border-right: 1px solid #444; }

.main .list-blog > li a { box-shadow: 0 2px 5px #ccc; -webkit-box-shadow: 0 2px 5px #ccc; -moz-box-shadow: 0 2px 5px #ccc; }

.list-blog { display: flex; flex-wrap: wrap; }
.list-blog:after { content: ""; display: block; clear: both; }
.list-blog > li { float: left; width: 49%; margin-bottom: 30px; }
@media screen and (max-width: 480px) { .list-blog > li { width: 49%; margin-right: 0; margin-bottom: 10px; } }
.list-blog > li:nth-child(odd) { clear: both; margin-right: 2%; }
.list-blog > li a { -webkit-taransition: all 0.2s; -moz-taransition: all 0.2s; -ms-taransition: all 0.2s; -o-taransition: all 0.2s; taransition: all 0.2s; display: block; position: relative; }
.list-blog > li a:hover { -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px); -ms-transform: translateY(-5px); -o-transform: translateY(-5px); transform: translateY(-5px); }
.list-blog > li a .new { position: absolute; top: 15px; left: 15px; }
.list-blog > li a .pic { height: 220px; overflow: hidden; }
@media screen and (max-width: 480px) { .list-blog > li a .pic { height: auto; } }
.list-blog > li a .pic img { width: 100%; height: auto; }
.list-blog > li a .text { padding: 15px; background: #fff; }
@media screen and (max-width: 480px) { .list-blog > li a .text { padding: 10px; } }
.list-blog > li a .text .title { font-weight: bold; font-size: 1.2em; margin-bottom: 10px; line-height: 1.5; }
@media screen and (max-width: 480px) { .list-blog > li a .text .title { font-size: 1em; } }
.list-blog > li a .text .content { font-size: 0.8em; margin-bottom: 10px; }
.list-blog > li a .text .meta .cate { background: #ff0066; color: #fff; padding: 0 5px; font-size: 0.8em; }

.meta:after { content: ""; display: block; clear: both; }
.meta li { display: inline-block; margin-right: 10px; }
.meta li.date { color: #666; }
.meta li.date i { margin-right: 5px; }

.blog-wrapper { padding: 30px 0; background: #f5f5f5; }
.blog-wrapper:after { content: ""; display: block; clear: both; }
@media screen and (max-width: 480px) { .blog-wrapper { padding: 15px 0; } }
.blog-wrapper .main { float: left; width: 860px; margin-right: 20px; }
@media screen and (max-width: 480px) { .blog-wrapper .main { float: none; width: auto; margin-right: 0; } }
.blog-wrapper .sidebar { float: left; width: 280px; }
@media screen and (max-width: 480px) { .blog-wrapper .sidebar { float: none; width: auto; } }
.blog-wrapper .sidebar .section { background: #fff; }
.blog-wrapper .sidebar h2 { font-size: 1.2em; background: #ff5c93; color: #fff; text-align: center; padding: 10px 0; }
.blog-wrapper .sidebar .categories { border-top: 1px solid #ddd; }
.blog-wrapper .sidebar .categories li a { padding: 10px 15px; border-bottom: 1px solid #ddd; position: relative; }
@media screen and (max-width: 480px) { .blog-wrapper .sidebar .categories li a { font-size: 1.2em; } }
.blog-wrapper .sidebar .categories li a:before { position: absolute; right: 15px; content: '\f105'; font-family: "Font Awesome 6 Pro"; color: #333; }
.blog-wrapper .sidebar .categories .children { border-top: none; }
.blog-wrapper .sidebar .categories .children li a { padding-left: 25px; }
.blog-wrapper .sidebar .list-blog, .blog-wrapper .sidebar .wpp-list { padding: 15px; }
.blog-wrapper .sidebar .list-blog > li, .blog-wrapper .sidebar .wpp-list > li { width: auto; float: none; }
.blog-wrapper .sidebar .list-blog > li a:after, .blog-wrapper .sidebar .wpp-list > li a:after { content: ""; display: block; clear: both; }
.blog-wrapper .sidebar .list-blog > li .meta, .blog-wrapper .sidebar .wpp-list > li .meta { clear: both; }
@media screen and (max-width: 480px) { .blog-wrapper .sidebar .list-blog > li .meta, .blog-wrapper .sidebar .wpp-list > li .meta { clear: none; } }
.blog-wrapper .sidebar .list-blog > li .meta .cate, .blog-wrapper .sidebar .wpp-list > li .meta .cate { background: #ff0066; color: #fff; padding: 0 3px; font-size: 0.8em; }
.blog-wrapper .sidebar .list-blog > li .pic, .blog-wrapper .sidebar .list-blog > li .text, .blog-wrapper .sidebar .wpp-list > li .pic, .blog-wrapper .sidebar .wpp-list > li .text { float: left; }
.blog-wrapper .sidebar .list-blog > li .pic, .blog-wrapper .sidebar .wpp-list > li .pic { width: 31%; height: auto; margin-right: 3%; }
.blog-wrapper .sidebar .list-blog > li .pic img, .blog-wrapper .sidebar .wpp-list > li .pic img { width: auto; height: auto; }
@media screen and (max-width: 480px) { .blog-wrapper .sidebar .list-blog > li .pic img, .blog-wrapper .sidebar .wpp-list > li .pic img { width: 100%; } }
.blog-wrapper .sidebar .list-blog > li .text, .blog-wrapper .sidebar .wpp-list > li .text { width: 66%; }
.blog-wrapper .sidebar .list-blog > li .text .title, .blog-wrapper .sidebar .wpp-list > li .text .title { line-height: 1.5; }
.blog-wrapper .sidebar .wpp-list { counter-reset: ranking; list-style-type: none; }
.blog-wrapper .sidebar .wpp-list li { overflow: visible; position: relative; margin-bottom: 10px; }
.blog-wrapper .sidebar .wpp-list li:after { content: ""; display: block; clear: both; }
.blog-wrapper .sidebar .wpp-list li:before { counter-increment: ranking; content: counter(ranking); position: absolute; top: -7px; left: -7px; z-index: 99; background: #ff0066; color: #fff; text-align: center; width: 30px; height: 30px; line-height: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; border-radius: 30px; font-size: 14px; }
.blog-wrapper .sidebar .wpp-list li .view { font-size: 0.8em; color: #999; }
.blog-wrapper .sidebar .list-tag { padding: 15px; }
.blog-wrapper .sidebar .list-tag:after { content: ""; display: block; clear: both; }
.blog-wrapper .sidebar .list-tag li { display: inline-block; margin-right: 5px; margin-bottom: 5px; }
.blog-wrapper .sidebar .list-tag li a { font-size: 0.8em !important; padding: 5px; background: #f5f5f5; }

.list-cate { border-top: 1px solid #ddd; }
.list-cate li a { padding: 10px 15px; border-bottom: 1px solid #ddd; position: relative; }
@media screen and (max-width: 480px) { .list-cate li a { font-size: 1.2em; } }
.list-cate li a:before { position: absolute; right: 15px; content: '\f105'; font-family: "Font Awesome 6 Pro"; color: #333; }

.list-children { margin-bottom: 30px; }
.list-children:after { content: ""; display: block; clear: both; }
@media screen and (max-width: 480px) { .list-children { margin: 0 10px 10px; } }
.list-children li { float: left; margin-right: 10px; }
@media screen and (max-width: 480px) { .list-children li { margin-bottom: 5px; } }
.list-children li a { padding: 5px 10px; border: 1px solid #ddd; background: #fff; }

.article { margin-bottom: 30px; }
@media screen and (max-width: 480px) { .article { margin-bottom: 15px; } }
.article .header { padding: 30px; background: #ff0066; color: #fff; }
@media screen and (max-width: 480px) { .article .header { padding: 15px; } }
.article .header h1 { font-size: 32px; font-weight: bold; }
@media screen and (max-width: 480px) { .article .header h1 { font-size: 18px; } }
.article .header h1 span, .article .header h1 span:after, .article .header h1 span:before { border-bottom: none !important; }
.article .header .meta { margin-bottom: 10px; }
.article .header .meta .cate ul li { margin-right: 10px; }
.article .header .meta .cate ul li a { padding: 0 10px; background: #fff; color: #ff0066; font-size: 12px; }
.article .header .meta .date, .article .header .meta .update { float: right; font-size: 0.8em; }
.article .header .meta .date { color: #fff; }
.article .header .meta .date:before { padding-right: 5px; font-family: FontAwesome; content: "\f133"; }
.article .header .meta .update:before { padding-right: 5px; font-family: FontAwesome; content: "\f021"; }
.article .article-body { padding: 30px; background: #fff; }
@media screen and (max-width: 480px) { .article .article-body { margin: 0 0 15px; padding: 10px; } }
.article .article-body p, .article .article-body img, .article .article-body div, .article .article-body ul, .article .article-body ol { margin-bottom: 1em; }
.article .article-body img { height: auto; }
.article .article-body a { display: inline-block; color: #ff0066; text-decoration: underline; }
.article .article-body .btn a { display: block !important; color: #fff; margin: 0 0; }
.article .article-body h2, .article .article-body h3, .article .article-body h4, .article .article-body h5 { margin-bottom: 2rem; }
.article .article-body h2 { margin-top: 4rem; font-size: 24px; border-top: 3px solid #ff0066; padding: 1rem 2rem; background: #f5f5f5; }
@media screen and (max-width: 640px) { .article .article-body h2 { font-size: 18px; padding: 1rem 1rem; } }
.article .article-body h3 { margin-top: 3rem; font-size: 18px; padding: 1rem 2rem; border-left: 3px solid #ff0066; background: #f5f5f5; }
@media screen and (max-width: 640px) { .article .article-body h3 { font-size: 16px; padding: 1rem 1rem; } }
.article .article-body h4 { margin-top: 2rem; background: #f5f5f5; border-left: 3px solid #ddd; padding: .5rem 2rem; }
@media screen and (max-width: 640px) { .article .article-body h4 { padding: 1rem 1rem; } }
.article .article-body strong { color: #ff0066; font-weight: bold; }
.article .article-body em { background-image: linear-gradient(transparent 60%, #ffff99 60%); }

#toc_container { margin: 0 auto; }

.author-block { margin-top: 30px; border: 1px solid #ddd; position: relative; }
.author-block .author-title { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); padding: 0 10px; text-align: center; display: block; z-index: 11; background: #fff; white-space: nowrap; }
.author-block .author-body { padding: 30px 15px 15px; text-align: center; }
@media screen and (max-width: 640px) { .author-block .author-body { padding: 30px 10px 10px; } }
.author-block .author-body .author-pic { display: block; border-radius: 60px; width: 100px; height: 100px; overflow: hidden; background: #eee; margin: 0 auto 10px; }
.author-block .author-body .author-name { margin-bottom: 10px; }
.author-block .author-body .author-name a { font-size: 14px; text-decoration: none; }
.author-block .author-body .author-profile { font-size: 12px; margin-bottom: 0; }
.author-block .author-body .author-article { margin-bottom: 0; }
.author-block .author-body .author-article a { font-size: 12px; text-decoration: none; }

.prevnext:after { content: ""; display: block; clear: both; }
@media screen and (max-width: 480px) { .prevnext { margin: 0 10px 15px; } }
.prevnext a { padding-top: 10px; }
.prevnext .prev, .prevnext .next { float: left; width: 48%; }
.prevnext .prev { margin-bottom: 10px; margin-right: 4%; }
.prevnext .next { text-align: right; }

/*# sourceMappingURL=blog.css.map */