@charset "utf-8";

/*
Theme Name: Travelogue
Theme URI: https://travelogue.jp/
Description: The original theme for <a href="https://travelogue.jp/">Travelogue website</a>
Version: 7.1
Author: Koh Azumi
*/

/* For modern browsers */

.cf:before,
.cf:after {
    content: "";
    display: table;
}

.cf:after {
    clear: both;
}

/* For IE 6/7 (trigger hasLayout) */

.cf {
    zoom: 1;
}



/* tags
---------------------------------------------------- */

html {
    overflow-y: scroll;
}

body {
    text-align: center;
    margin: 0px;
    padding: 0px;
    color: #333;
    font-family: 'Noto Serif JP', serif;
    font-weight: 400;
    font-size: 15px;
    -webkit-text-size-adjust: none;
}

a {
    color: #1766b6;
    text-decoration: underline;
}

a:visited {
    color: #823F8B;
    text-decoration: underline;
}

a:hover {
    color: #e00;
    text-decoration: none;
}

img {
    border-style: none;
    vertical-align: bottom;
}

a:hover img {
    opacity: 0.6;
}

a,
a img {
    transition: all .4s;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
dt,
dd {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

p {
    line-height: 2.2;
}

article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section {
    display: block;
}


/* max, min
---------------------------------------------------- */

.content_body,
#contact #trust-form {
    min-width: 500px;
    max-width: 1200px;
    width: 90%;
}

/* header
---------------------------------------------------- */

#header2 {
    position: absolute;
    top: 80px;
    left: 0px;
    right: 0px;
    margin: 0px auto;
    padding: 0px;
    width: 200px;
    text-align: center;
}

#header_blog {
    text-align: center;
    max-width: 1400px;
    width: 85%;
    margin: 100px auto 120px;
}

#header_blog h1,
#header_blog p,
#header2 h1 {
    font-family: 'Nothing You Could Do', cursive;
    font-size: 50px;
    line-height: 1.3;
    font-weight: normal;
}

#header_blog a,
#header_blog a:hover {
    color: #000;
    text-decoration: none;
}

@media screen and (max-width: 768px) {
    #header2 {
        top: 30px;
    }
    #header_blog {
        margin: 40px auto;
    }
    #header_blog h1,
    #header_blog p,
    #header2 h1 {
        font-size: 46px;
    }
}

@media screen and (max-width: 480px) {
    #header2 {
        top: 10px;
    }
    #header_blog {
        margin: 30px auto;
        text-align: left;
    }
    #header_blog h1,
    #header_blog p,
    #header2 h1 {
        font-size: 36px;
    }
}

/* navi2
---------------------------------------------------- */

#navi2 ul {
    width: 700px;
    margin: 100px auto;
    height: 50px;
    line-height: 50px;
}

#navi2 li {
    display: block;
    float: left;
    text-align: left;
}

#navi2 li.nav_about {
    width: 150px;
}

#navi2 li.nav_works {
    width: 340px;
}

#navi2 li.nav_voice {
    width: auto;
}

#navi2 li.nav_contact {
    width: auto;
    float: right;
}



#navi2.fixed2 {
    width: 100%;
    background: #f5f5f5;
    background: linear-gradient(-125deg, #f5f5f5 78%, #e7e7e7 78%, #e7e7e7);
    position: fixed;
    top: 0px;
    z-index: 9999;
    border-bottom: 1px solid #ddd;
}

#navi2.fixed2 ul {
    margin: 0px auto;
    width: 700px;
}

#navi2.fixed2 li.nav_about,
#navi2.fixed2 li.nav_works,
#navi2.fixed2 li.nav_voice,
#navi2.fixed2 li.nav_contact {
    width: 25%;
    float: left;
    text-align: center;
}

#navi2.fixed2 + section .first,
#works #navi2.fixed2 + .first,
#blog #navi2.fixed2 + #container {
    margin-top: 250px;
}

#navi2 a {
    color: #555;
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
}

#navi2 li a:hover,
#about #navi2 li.nav_about a,
#works_index #navi2 li.nav_works a,
#works #navi2 li.nav_works a,
#voice #navi2 li.nav_voice a,
#contact #navi2 li.nav_contact a {
    text-decoration: underline;
}

@media screen and (max-width: 768px) {
    #navi2 ul {
        width: 100%;
        margin: 160px 0px 0px;
    }
    #navi2.fixed2 ul {
        margin: 0px;
        width: 100%;
    }
    #navi2 li.nav_about,
    #navi2 li.nav_works,
    #navi2 li.nav_voice,
    #navi2 li.nav_contact {
        width: 25%;
        float: left;
        text-align: center;
    }
    #navi2.fixed2 + section .first,
    #works #navi2.fixed2 + .first,
    #blog #navi2.fixed2 + #container {
        margin-top: 270px;
    }
    #navi2 a {
        display: block;
        height: 50px;
        line-height: 50px;
    }
}

@media screen and (max-width: 480px) {
    #navi2 ul {
        margin: 95px 0px 0px;
        height: 40px;
        line-height: 40px;
    }
    #navi2.fixed2 + section .first,
    #works #navi2.fixed2 + .first,
    #blog #navi2.fixed2 + #container {
        margin-top: 165px;
    }
    #navi2 a {
        font-size: 13px;
        height: 40px;
        line-height: 40px;
    }
}

/* st
---------------------------------------------------- */

.st_type_01 {
    margin: 60px 0px 50px;
    padding: 40px 0px 0px;
    border-top: 1px solid #e7e7e7;
    text-align: center;
    min-width: 500px;
    font-size: 30px;
    font-weight: 400;
}

#home .st_type_01 {
    font-size: 28px;
}

.anchor_point .st_type_01 {
    margin: 0px 0px 40px;
}


/* common class
---------------------------------------------------- */

.marker01 {
    background: linear-gradient(transparent 50%, #ffff66 0%);
}

ul.base-ul {
    line-height: 2;
    margin: 0px 0px 30px;
    list-style: disc outside;
}

ul.base-ul li {
    margin: 0px 0px 0px 50px;
}

ul.base-ul ul {
    margin: 5px 0px 8px;
}

ul.base-ul li li {
    margin: 0px 0px 0px 25px;
}

.content_body {
    margin: 0px auto;
    text-align: left;
}

.content_body p {
    margin: 0px 0px 40px;
}

.no_margin {
    margin-bottom: 0px!important;
}



/* footer
---------------------------------------------------- */

footer p,
#about footer p,
#works footer p,
#faq footer p {
    font: 11px Arial, Helvetica, sans-serif;
    margin: 50px 0px 20px;
    text-align: center;
    color: #666;
    width: auto;
    max-width: initial;
    max-width: auto;
    min-width: initial;
    min-width: auto;
}


#pagetop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
}

#pagetop a img {
    opacity: 0.4;
    width: 60px;
    height: auto;
}

#pagetop a:hover img {
    opacity: 1;
}



@media screen and (max-width: 480px) {

    body {
        font-size: 14px;
    }
    /* max, min
---------------------------------------------------- */
    .st_type_01,
    .content_body,
    #contact #trust-form {
        width: auto;
        max-width: initial;
        max-width: auto;
        min-width: initial;
        min-width: auto;
    }


    /* st
---------------------------------------------------- */
    .st_type_01,
    #home .st_type_01 {
        margin: 30px 0px;
        padding: 30px 0px 0px;
        font-size: 22px;
    }
    .st_type_01 img {
        height: 20px;
        width: auto;
    }


    /* common class
---------------------------------------------------- */
    ul.base-ul {
        line-height: 1.8;
        margin: 0px 0px 10px;
    }
    ul.base-ul li {
        margin: 0px 0px 0px 30px;
    }
    .content_body {
        margin: 0px 15px;
    }
    .content_body p {
        margin: 0px 0px 20px;
    }
    #about .about-ul1 a::after,
    #home_about li a::after {
        position: absolute;
        top: 50%;
        right: 10px;
        display: block;
        content: '';
        width: 8px;
        height: 8px;
        margin-top: -6px;
        border-top: 1px solid #999;
        border-right: 1px solid #999;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    /* footer
---------------------------------------------------- */
    footer p {
        margin: 20px 0px 10px;
    }
    #pagetop {
        bottom: 10px;
        right: 10px;
        width: 50px;
        height: 50px;
    }
}



/* container
---------------------------------------------------- */

#container {
    max-width: 1400px;
    width: 85%;
    text-align: left;
    margin: 80px auto 0px;
}

#blog_contents {
    float: left;
    width: 73%;
    margin-bottom: 60px;
}

#single_post p,
#single_post ul,
#single_post ol {
    font-size: 16px;
    line-height: 2.4;
    margin-bottom: 40px;
}

#blog_contents img {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}

.txtbold01 {
    font-weight: bold;
}

#single_post p.cap-p {
    text-align: center;
    font-size: 15px;
    margin-top: -30px;
}

#footer_navi {
    text-align: center;
    padding: 60px 0px 0px;
    clear: both;
}

#footer_navi li {
    display: inline;
    margin-right: 10px;
    font-size: 14px;
}

#footer_navi a {
    text-decoration: none;
    color: #333;
}

#footer_navi a:hover {
    color: #e00;
}


@media screen and (max-width: 896px) {
    #container {
        margin: 40px auto 0px;
        word-wrap: break-word;
    }
    #blog_contents {
        float: none;
        width: auto;
        margin-bottom: 30px;
    }
    #single_post p,
    #single_post ul,
    #single_post ol {
        font-size: 15px;
    }
    #footer_navi {
        display: none;
    }
}

@media screen and (max-width: 480px) {
    #single_post p,
    #single_post ul,
    #single_post ol {
        line-height: 2;
        margin-bottom: 30px;
    }
    #single_post p.cap-p {
        text-align: left;
        font-size: 14px;
        margin-top: -20px;
    }
}

/* index
---------------------------------------------------- */

.index_post {
    margin-bottom: 60px;
}

.index_post h2 {
    font-size: 20px;
    font-weight: 400;
    margin: 0px 0px 20px;
}

.index_post h2 a {
    text-decoration: none;
}

.index_post img {
    float: left;
    width: 200px;
    height: auto;
}

.index_txt {
    margin: 0px 0px 0px 230px;
}

.index_category {
    margin: 30px 0px;
}

.index_category ul {
    float: left;
}

.index_category li a {
    font-size: 13px;
    color: #333;
    line-height: 1;
    text-decoration: none;
    display: block;
    padding: 6px 13px 7px;
    margin: 0px 8px 0px 0px;
    border: 1px solid #333;
    border-radius: 30px;
}

@media screen and (max-width: 768px) {
    .index_post h2 {
        font-size: 18px;
    }
    .index_post img {
        float: right;
        width: 130px;
        height: auto;
        margin: 0px 0px 5px 15px;
    }
    .index_txt {
        margin: 0px;
    }
    .index_category {
        margin: 10px 0px;
    }
}

@media screen and (max-width: 400px) {
    .index_category p time {
        clear: both;
        display: block;
        padding: 8px 0px 0px;
    }
}

/* single titles
---------------------------------------------------- */

#post-title {
    font-size: 30px;
    font-weight: 400;
    margin: 0px 0px 50px;
    line-height: 2;
}

#single_post h2,
#single_post h3 {
    font-size: 24px;
    font-weight: 400;
    margin: 80px 0px 40px;
    padding: 0px 0px 20px;
    border-bottom: 1px solid #ddd;
}

#single_post .st1 {
    font-size: 30px;
    font-weight: 400;
    margin: 100px 0px 80px;
    padding: 0px;
    border: none;
    text-align: center;
    position: relative;
    line-height: 1.4;
}

#single_post .st1::after {
    content: '';
    width: 80px;
    border-bottom: 4px solid #000;
    position: absolute;
    left: 50%;
    margin-left: -40px;
    bottom: -30px;
}

#single_post .st2 {
    font-size: 18px;
    font-weight: 400;
    margin: 50px 0px 20px;
    padding: 0px;
    border: none;
    line-height: 2;
}

@media screen and (max-width: 768px) {
    #post-title {
        font-size: 24px;
        margin: 0px 0px 30px;
    }
    #single_post h2,
    #single_post h3 {
        font-size: 20px;
        margin: 60px 0px 30px;
        padding: 0px 0px 10px;
    }
    
    #single_post .st1 {
        font-size: 24px;
        margin: 80px 0px 60px;
        padding: 0px;
    }
    #single_post .st1::after {
        width: 60px;
        margin-left: -30px;
        bottom: -20px;
    }
    #single_post .st2 {
        margin: 30px 0px 20px;
    }
}

@media screen and (max-width: 480px) {
    #post-title {
        font-size: 20px;
    }
    #single_post h2,
    #single_post h3 {
        font-size: 18px;
        margin: 40px 0px 20px;
    }
    #single_post .st1 {
        font-size: 22px;
        margin: 80px 0px 60px;
    }
    #single_post .st2 {
        font-size: 16px;
    }
}

/* single category_list_box
---------------------------------------------------- */

#category_list_box {
    margin: 0px 0px 30px;
}

#category_list,
#tag_list {
    float: left;
}

#category_list li,
#tag_list li {
    display: block;
    float: left;
}

#category_list li a {
    font-size: 14px;
    color: #333;
    line-height: 1;
    text-decoration: none;
    display: block;
    padding: 6px 13px 7px;
    margin: -3px 8px 0px 0px;
    border: 1px solid #333;
    border-radius: 30px;
}

#tag_list li a {
    color: #333;
    text-decoration: none;
    margin: 0px 8px 0px 0px;
    border-bottom: 1px dotted #999;
    line-height: 1;
}

#tag_list li a:hover {
    color: #e00;
    border: none;
}

#category_list_box p {
    margin: 0px;
    float: right;
    line-height: 1;
}

@media screen and (max-width: 768px) {
    #category_list_box {
        border-top: 1px dotted #ccc;
        border-bottom: 1px dotted #ccc;
        padding: 15px 0px;
    }
    #category_list_box p {
        float: none;
        clear: both;
        padding: 15px 0px 0px 5px;
    }
}


/* image
---------------------------------------------------- */

.aligncenter {
    margin: 30px auto;
    display: block;
}

.alignright,
.box_type3 img + img {
    float: right;
    margin: 0px 0px 10px 20px;
}

.alignleft,
.box_type2 img + img {
    float: left;
    margin: 0px 20px 10px 0px;
}

.imgbox1 {
    float: right;
    width: 400px;
    margin: 0px 0px 10px 20px;
}

.imgbox2 {
    float: left;
    width: 250px;
    margin: 0px 35px 0px 0px;
}

@media screen and (max-width: 1150px) {
    .imgbox1 {
        width: 330px;
    }
    .imgbox2 {
        float: right;
        width: 240px;
        margin: 0px 0px 10px 20px;
    }
}

@media screen and (max-width: 896px) {
    .imgbox1 {
        width: 360px;
    }
}

@media screen and (max-width: 768px) {
    .alignright,
    .box_type3 img + img,
    .alignleft,
    .box_type2 img + img {
        float: none;
        display: block;
        margin: 30px auto;
    }
    .imgbox1 {
        float: none;
        width: auto;
        margin: 30px 0px;
        text-align: center;
    }
    .imgbox2 {
        width: 200px;
    }
}

@media screen and (max-width: 480px) {
    .imgbox2 {
        width: 42%;
    }
}

/* image list
---------------------------------------------------- */

ul.imglist01 {
    margin: 0px 0px 30px;
    list-style: none;
}

ul.imglist01 li {
    display: block;
    float: left;
    margin: 0px 20px 20px 0px;
}

ul.imglist01 li img {
    padding: 5px;
    border: 1px solid #e7e7e7;
}

#single_post ul.imglist01 p {
    margin: 3px 0px 0px;
}


/* list
---------------------------------------------------- */

.blog_ul {
    background-color: #f1f1f1;
    padding: 30px 30px 30px 60px;
    list-style-type: disc;
}

#single_post .blog_ul ul {
    line-height: 2;
    list-style-type: circle;
    padding: 5px 0px 0px 50px;
    margin: 0px;
}

#single_post ol {
    margin: 0px 0px 30px 50px;
    list-style: decimal outside;
}

@media screen and (max-width: 768px) {
    .blog_ul {
        padding: 20px 25px 20px 40px;
    }
    #single_post .blog_ul ul {
        padding: 5px 0px 0px 30px;
    }
    #single_post ol {
        margin: 0px 0px 30px 20px;
    }
}


/* others
---------------------------------------------------- */

.box01 {
    padding: 40px 40px 40px 50px;
    background: #f1f1f1;
    margin-bottom: 40px;
    margin-top: 40px;
}

#single_post .box01 .p1,
#single_post .box01 .base-ul {
    margin-bottom: 0px;
}
#single_post .box01 .base-ul ul {
    margin-bottom: 10px;
    list-style: circle outside;
}

#single_post .box01 .base-ul + .p1 {
    margin-top: 20px;
}
#single_post .box01 .base-ul a {
    color: #333;
    text-decoration: none;
}
#single_post .box01 .base-ul a:hover {
    color: #e00;
}
.gbox01 {
    margin: 0px 0px 30px;
}

#single_post dt {
    font-weight: bold;
    margin: 0px 0px 10px;
}

#single_post dd {
    margin: 0px 0px 30px 30px;
    padding: 0px 0px 0px 20px;
    border-left: 3px solid #e7e7e7;
}

blockquote {
    font-weight: 400;
    font-style: italic;
    margin: 0px 0px 30px 30px;
    padding: 0px 0px 0px 20px;
    border-left: 3px solid #e7e7e7;
}

#single_post blockquote p {
    margin: 0px;
}

cite {
    font-style: italic;
    font-weight: 400;
}

pre {
    font: 200 16px/2 "Courier New", Courier, monospace;
    padding: 30px 30px 30px 40px;
    background: #f1f1f1;
    margin: 0px 0px 30px;
}

pre code {
    font: 200 16px/2 "Courier New", Courier, monospace;
}

.box-type1,
.box-type2 {
    border: 5px solid #333;
    padding: 40px 40px 60px;
    margin: 100px 0px;
}

.box-type2 {
    padding: 40px 40px 20px;
}

#single_post .box-type1 p.p1,
#single_post .box-type2 p.p1 {
    text-align: center;
    font-size: 22px;
    font-weight: 400;
}

#single_post .box-type1 ul,
#single_post .box-type2 ul {
    margin: 0px;
}

.box-type1 li {
    width: 48%;
    float: left;
}

.box-type2 li {
    width: 31%;
    float: left;
    margin: 0px 3.5% 40px 0px;
}

.box-type1 li:nth-child(2) {
    float: right;
}

.box-type2 li:nth-child(3n) {
    margin-right: 0px;
}

.box-type2 li:nth-child(3n+1) {
    clear: both;
}

#single_post .box-type1 li p,
#single_post .box-type2 li p {
    font-weight: 400;
    margin: 8px 0px 0px;
    line-height: 1.6;
}

#single_post .box-type2 li p {
    font-size: 15px;
}

.box_type1 {
    padding: 30px 40px 1px;
    background: #f1f1f1;
}

.box_type1 img + img {
    float: left;
    margin: 7px 20px 5px 0px;
    width: 260px;
    height: auto;
}

#single_post .box_type1 .p1 {
    margin: 0px 0px 25px;
}

@media screen and (max-width: 768px) {
    .box01,
    pre {
        padding: 30px;
        margin-bottom: 30px;
        margin-top: 30px;
    }
    #single_post dt {
        font-size: 14px;
    }
    #single_post dd {
        font-size: 14px;
        margin: 0px 0px 30px 5px;
    }
    blockquote {
        margin: 0px 0px 30px 5px;
    }
    .box-type1 {
        border: 3px solid #333;
        padding: 30px 30px 40px;
        margin: 80px 0px;
    }
    #single_post .box-type1 p.p1 {
        font-size: 20px;
        margin-bottom: 30px;
    }
    #single_post .box-type1 li p {
        font-size: 15px;
    }
    .box-type2 li,
    .box-type2 li:nth-child(3n) {
        width: 48%;
        margin: 0px 4% 40px 0px;
    }
    .box-type2 li:nth-child(2n) {
        margin-right: 0px;
    }
    .box-type2 li:nth-child(3n+1) {
        clear: none;
    }
    .box-type2 li:nth-child(2n+1) {
        clear: both;
    }
    #single_post .box-type2 li p {
        font-size: 14px;
    }
    .box_type1 {
        padding: 30px 30px 1px;
    }

    .box_type1 img + img {
        float: none;
        margin: 0px auto 30px;
        display: block;
    }
    #single_post .box_type1 .p1 {
        margin: 0px 0px 10px;
    }
}

@media screen and (max-width: 600px) {
    .box-type1,
    .box-type2 {
        padding: 30px 30px 10px;
        margin: 60px 0px;
    }
    #single_post .box-type1 p.p1,
    #single_post .box-type2 p.p1 {
        font-size: 15px;
        margin-bottom: 30px;
        position: relative;
        background: #222;
        border-radius: 5px;
        color: #fff;
        padding: 10px 0px;
    }
    #single_post .box-type1 p.p1::after,
    #single_post .box-type2 p.p1::after {
        border-left: solid 6px transparent;
        border-right: solid 6px transparent;
        border-top: solid 9px #222;
        bottom: -9px;
        content: "";
        display: block;
        height: 0;
        left: 50%;
        position: absolute;
        width: 0;
        margin-left: -5px;
    }
    .box-type1 li {
        width: auto;
        float: none;
        margin: 0px 0px 30px;
    }
}

@media screen and (max-width: 480px) {
    .box-type2 li,
    .box-type2 li:nth-child(3n) {
        width: auto;
        float: none;
        margin: 0px 0px 30px;
    }
    .box-type2 li img + img {
        width: 100%;
        height: auto;
    }
}

/* sidebar
---------------------------------------------------- */

#sidebar {
    float: right;
    width: 21%;
    margin-bottom: 60px;
}

#cate {
    border-bottom: 1px solid #e7e7e7;
    margin-bottom: 60px;
}

#cate li {
    display: block;
    border-top: 1px solid #e7e7e7;
}

#cate li a {
    display: block;
    padding: 15px 0px 15px 10px;
    text-decoration: none;
    color: #333;
}

#cate li a:hover,
#cate li.current-cat a {
    color: #333;
    background: #f1f1f1;
}

#sidenew ul {
    border-bottom: 1px solid #e7e7e7;
    margin: 10px 0px 60px;
}

#sidenew ul li {
    display: block;
    border-top: 1px solid #e7e7e7;
    padding: 15px 0px;
}

#sidenew ul li img {
    float: left;
    width: 60px;
    height: auto;
    margin: 3px 0px 0px;
}

#sidenew p {
    margin: 0px;
}

#sidenew li p {
    font-size: 13px;
    line-height: 1.7;
    margin: 0px 0px 0px 70px;
}

#sidenew li p a {
    text-decoration: none;
}

#sidenew li p time {
    font-size: 12px;
}

@media screen and (max-width: 896px) {
    #sidebar {
        float: none;
        width: auto;
    }
    #cate,
    #sidenew {
        display: none;
    }
}

#sidebar dl {
    border: 1px solid #e7e7e7;
    padding: 20px;
    margin: 0px 0px 30px;
}

#sidebar dt {
    font-weight: 400;
}

#sidebar dd img {
    display: block;
    margin: 20px auto;
    max-width: 100%;
    height: auto;
}

#sidebar dd p {
    font-size: 14px;
    line-height: 2;
    margin: 0px;
}

#sidebar dd p a:link,
#sidebar dd p a:visited {
    color: #333;
    text-decoration: underline;
}

#sidebar dd p a:hover,
#sidebar dd p a:active {
    color: #e00;
    text-decoration: none;
}

@media screen and (max-width: 896px) {
    #sidebar dl {
        border: none;
        padding: 0px;
        margin: 0px;
        clear: both;
    }
    #sidebar dt {
        border-top: 1px solid #e7e7e7;
        margin: 30px 0px 15px;
        padding: 20px 0px 0px;
    }
    #sidebar dd img {
        margin: -35px 0px 0px 5px;
        float: right;
        width: 100px;
        height: auto;
    }
}


/* single ads, af
---------------------------------------------------- */

#ads-cnt01,
.ads-cnt02 {
    margin: 30px 0px;
}


/* related
---------------------------------------------------- */

#related {
    margin: 50px 0px 0px;
    border-top: 1px solid #e7e7e7;
    padding: 50px 0px 0px;
}

#related li {
    width: 28%;
    float: left;
    margin-right: 8%;
}

#related li:nth-child(3) {
    margin-right: 0px;
}

#related li img {
    width: 100%;
    height: auto;
}

#related > p {
    font-size: 20px;
    font-weight: 400;
    margin: 0px 0px 30px;
}

#related li p {
    margin: 10px 0px 0px;
    font-size: 15px;
    line-height: 1.6;
}

#related a {
    text-decoration: none;
}

@media screen and (max-width: 768px) {
    #related {
        margin: 30px 0px 0px;
        padding: 30px 0px 0px;
    }
    #related li {
        width: auto;
        float: none;
        margin-bottom: 20px;
    }
    #related li img {
        width: 100px;
        height: auto;
        float: left;
    }
    #related > p {
        font-size: 18px;
        margin: 0px 0px 20px;
    }
    #related li p {
        margin: 0px 0px 0px 120px;
    }
}


/* wp-pagenavi
---------------------------------------------------- */

#blog .wp-pagenavi {
    clear: both;
    margin: 80px 0px 0px;
    text-align: center;
}

#blog .wp-pagenavi span,
#blog .wp-pagenavi a {
    display: inline-block;
    padding: 5px 10px;
    margin: 0px 5px;
    text-decoration: none;
    color: #333;
}

@media screen and (max-width: 768px) {
    #blog .wp-pagenavi {
        font-size: 13px;
        margin: 80px 0px 60px;
        text-align: center;
    }
    #blog .wp-pagenavi span,
    #blog .wp-pagenavi a {
        padding: 5px 8px;
        margin: 0px 2px;
    }
}


/* syntaxhighlighter
---------------------------------------------------- */

body .syntaxhighlighter a,
body .syntaxhighlighter div,
body .syntaxhighlighter code,
body .syntaxhighlighter table,
body .syntaxhighlighter table td,
body .syntaxhighlighter table tr,
body .syntaxhighlighter table tbody,
body .syntaxhighlighter table thead,
body .syntaxhighlighter table caption,
body .syntaxhighlighter textarea {
    font-size: 15px !important;
    line-height: 1.6 !important;
}

body .syntaxhighlighter {
    border: 5px solid #f1f1f1;
    padding: 8px 0px;
    margin: 0px 0px 30px 0px !important;
    width: auto!important;
}

body #slb_viewer_wrap .slb_theme_slb_default .slb_data_title,
body #slb_viewer_wrap .slb_theme_slb_default .slb_group_status {
    font-family: arial, sans-serif;
    font-size: 14px;
    line-height: 2;
}

@media screen and (max-width: 768px) {
    body .syntaxhighlighter a,
    body .syntaxhighlighter div,
    body .syntaxhighlighter code,
    body .syntaxhighlighter table,
    body .syntaxhighlighter table td,
    body .syntaxhighlighter table tr,
    body .syntaxhighlighter table tbody,
    body .syntaxhighlighter table thead,
    body .syntaxhighlighter table caption,
    body .syntaxhighlighter textarea {
        font-size: 14px !important;
    }
    body .syntaxhighlighter {
        border: 3px solid #f1f1f1;
        margin: 0px 0px 20px 0px !important;
    }
}


/* new drawer
---------------------------------------------------- */
#drawer_container {
    display: none;
}

@media screen and (max-width: 768px) {
    #drawer_container {
        display: block;
    }

    .drawer {
        position: fixed;
        right: 20px;
        top: 20px;
        width: 45px;
        z-index: 200;
        cursor: pointer;
    }

    .navbar_toggle_icon {
        position: relative;
        display: block;
        height: 2px;
        width: 45px;
        background: #333;
        transition: ease .5s;
    }

    .navbar_toggle_icon:nth-child(1) {
        top: 0;
    }

    .navbar_toggle_icon:nth-child(2) {
        margin: 8px 0;
    }

    .navbar_toggle_icon:nth-child(3) {
        top: 0;
    }

    .navbar_toggle.open .navbar_toggle_icon:nth-child(1) {
        top: 10px;
        transform: rotate(45deg);
    }

    .navbar_toggle.open .navbar_toggle_icon:nth-child(2) {
        opacity: 0;
    }

    .navbar_toggle.open .navbar_toggle_icon:nth-child(3) {
        top: -10px;
        transform: rotate(-45deg);
    }

    .menu {
        transition: ease .5s;
        z-index: 100;
        background: #fff;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0px;
        left: 0px;
        opacity: 0;
        visibility: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow-y: auto;
    }

    .menu.open {
        opacity: 1;
        visibility: visible;
    }
    .menu li {
        margin: 25% 0;
        font-size: 24px;
        line-height: 1.4;
    }
    .menu li a {
        color: #333;
        text-decoration: none;
    }
}