[class*="am-bloglist-"] .title,
[class*="am-bloglist-"] .link { font-family: inherit; }

.am-bloglist-01 { position: relative; }
    .am-bloglist-01::after { display: block; clear: both; content: ""; }
    .am-bloglist-01 .bloglist-item { float: left; width: 50%; }
        .am-bloglist-01 .bloglist-item:nth-child(odd) { padding-right: 15px; }
        .am-bloglist-01 .bloglist-item:nth-child(even) { padding-left: 15px; transform: translateY(60px); }
            .am-bloglist-01 .bloglist-item:nth-child(even):last-child { padding-bottom: 60px; }
        .am-bloglist-01 .bloglist-item .pic img { max-width: 100%; }
        .am-bloglist-01 .bloglist-item .content { padding: 30px 0 30px 30px; transform: translate(30px,-30px); background: #ffffff; width: calc( 100% - 30px); }
        .am-bloglist-01 .bloglist-item .title { margin: 0 0 12px; font-size: 20px; line-height: 32px; color: #424242; }
        .am-bloglist-01 .bloglist-item .link { font-size: 14px; font-weight: 600; line-height: 32px; color: #fd4ea5; text-decoration: underline; }
            .am-bloglist-01 .bloglist-item .link:hover { text-decoration: none; }

@media only screen and (max-width: 991px) {
    .am-bloglist-01 .bloglist-item .pic img { width: 100%; }
    .am-bloglist-01 .bloglist-item .content { padding-top: 21px; padding-bottom: 1px; }
    .am-bloglist-01 .bloglist-item .title { margin-bottom: 16px; }
    .am-bloglist-01 .bloglist-item:nth-child(even) { transform: translateY(0); }
        .am-bloglist-01 .bloglist-item:nth-child(even):last-child { padding-bottom: 40px; }
}

@media only screen and (max-width: 767px) {
    .am-bloglist-01 .bloglist-item:nth-child(odd) { padding-right: 0px; }
    .am-bloglist-01 .bloglist-item { width: 100%; }

        .am-bloglist-01 .bloglist-item .pic img { width: 100%; }
        .am-bloglist-01 .bloglist-item .title { margin-bottom: 16px; }

        .am-bloglist-01 .bloglist-item:nth-child(even) { padding-left: 0px; }
}




/**
blog list 02	
*/

.am-bloglist-02:after { content: ""; display: block; clear: both; }
.am-bloglist-02 .bloglist-item { position: relative; float: left; clear: both; margin-bottom: 50px; }
    .am-bloglist-02 .bloglist-item:last-of-type { margin-bottom: 0px; }
    .am-bloglist-02 .bloglist-item:nth-child(odd) { margin-left: 115px; }

    .am-bloglist-02 .bloglist-item .pic img { max-width: 100%; }
    .am-bloglist-02 .bloglist-item .content { padding-left: 60px; padding-top: 52px; background: #ffffff; position: absolute; top: 40px; bottom: 0px; left: 100%; width: 100%; margin-left: -30px; }
    .am-bloglist-02 .bloglist-item .title { margin: 0 0 12px; font-size: 20px; line-height: 30px; color: #424242; }
    .am-bloglist-02 .bloglist-item .link { font-size: 14px; font-weight: 600; line-height: 32px; color: #fd4ea5; }
        .am-bloglist-02 .bloglist-item .link:before { content: ""; display: inline-block; vertical-align: middle; border-top: 1px solid #fd4ea5; width: 30px; margin-right: 10px; margin-bottom: 1px; }
    .am-bloglist-02 .bloglist-item .blog-date { position: absolute; top: 50%; left: 0; font-size: 14px; color: #424242; transform-origin: center center; transform: translate3d(-50%,-50%,0) rotate(90deg); margin-left: 24px; }

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

    .am-bloglist-02 .bloglist-item:nth-child(odd) { margin-left: 60px; }
}

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

    .am-bloglist-02 .bloglist-item:nth-child(odd) { margin-left: 0; }
}

@media only screen and (max-width: 991px) {
    .am-bloglist-02 .bloglist-item:nth-child(odd) { margin-left: 115px; }
}

@media only screen and (max-width: 767px) {
    .am-bloglist-02 .bloglist-item:nth-child(odd) { margin-left: 0; }
    .am-bloglist-02 .bloglist-item { margin-bottom: 30px; float: none; }
        .am-bloglist-02 .bloglist-item .pic img { width: 100%; }

        .am-bloglist-02 .bloglist-item .content { position: relative; top: auto; bottom: auto; left: auto; margin-left: 30px; margin-top: -30px; width: auto; padding-top: 50px; }

        .am-bloglist-02 .bloglist-item .blog-date { margin: 0; top: 20px; left: 16px; -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: 10px 10px; transform-origin: 10px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; }
}



/**
	blog list 03	
 */
.am-bloglist-03 { position: relative; }
    .am-bloglist-03 .bloglist-item { position: relative; display: flex; justify-content: flex-start; align-items: center; padding: 68px 20px 68px 0; }
        .am-bloglist-03 .bloglist-item .bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; opacity: 0; z-index: 0; }
        .am-bloglist-03 .bloglist-item .date { position: relative; text-align: center; margin-right: 12px; }
            .am-bloglist-03 .bloglist-item .date .month,
            .am-bloglist-03 .bloglist-item .date .year { font-size: 16px; line-height: 26px; font-weight: 600; color: #333333; }
            .am-bloglist-03 .bloglist-item .date .day { width: 2em; font-size: 80px; line-height: 88px; font-weight: 700; color: #2c5cda; }
        .am-bloglist-03 .bloglist-item .content { position: relative; max-width: 660px; overflow: hidden; }
            .am-bloglist-03 .bloglist-item .content .title { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; color: #666666; }
            .am-bloglist-03 .bloglist-item .content .info { font-size: 14px; line-height: 26px; font-weight: 400; color: #666666; }
                .am-bloglist-03 .bloglist-item .content .info:last-child { margin-bottom: 0; }
            .am-bloglist-03 .bloglist-item .content .title + .info { margin-top: 27px; }


            .am-bloglist-03 .bloglist-item .bg,
            .am-bloglist-03 .bloglist-item .date .month,
            .am-bloglist-03 .bloglist-item .date .day,
            .am-bloglist-03 .bloglist-item .date .year,
            .am-bloglist-03 .bloglist-item .content .title,
            .am-bloglist-03 .bloglist-item .content .info { -webkit-transition: all .3s cubic-bezier(0.420, 0.000, 1.000, 1.000) 0s; transition: all .3s cubic-bezier(0.420, 0.000, 1.000, 1.000) 0s; }

        .am-bloglist-03 .bloglist-item:hover .bg { opacity: 1; }
        .am-bloglist-03 .bloglist-item:hover .date .month,
        .am-bloglist-03 .bloglist-item:hover .date .year,
        .am-bloglist-03 .bloglist-item:hover .content .title { color: #ffffff; }
        .am-bloglist-03 .bloglist-item:hover .date .day { color: #fd4ea5; }
        .am-bloglist-03 .bloglist-item:hover .content .info { color: #dddddd; }

@media (max-width: 767px) {
    .am-bloglist-03 .bloglist-item { padding: 40px 20px 40px 0; }
        .am-bloglist-03 .bloglist-item .date .day { font-size: 50px; }
}


/**
	blog list 04	
 */


.am-bloglist-04::after { display: block; clear: both; content: ""; }
.am-bloglist-04 .bloglist-item { position: relative; }
    .am-bloglist-04 .bloglist-item .pic img { max-width: 100%; }
    .am-bloglist-04 .bloglist-item .content { padding: 30px 0 0 30px; transform: translate(30px,-30px); background: #ffffff; width: calc( 100% - 30px); }
    .am-bloglist-04 .bloglist-item .title { margin: 0 0 12px; font-size: 20px; line-height: 32px; color: #424242; }
    .am-bloglist-04 .bloglist-item .link { font-size: 14px; font-weight: 600; line-height: 32px; color: #fd4ea5; text-decoration: underline; }
        .am-bloglist-04 .bloglist-item .link:hover { text-decoration: none; }
    .am-bloglist-04 .bloglist-item .blog-sort { position: absolute; font-size: 14px; color: #fff; top: 40px; left: 37px; -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: 10px 10px; transform-origin: 10px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
        .am-bloglist-04 .bloglist-item .blog-sort:before { content: ""; display: inline-block; width: 30px; border-top: 1px solid #fff; vertical-align: middle; margin-bottom: 3px; margin-right: 8px; }


@media only screen and (max-width: 991px) {
    .am-bloglist-04 .bloglist-item .pic img { width: 100%; }
}




.am-bloglist-05 .bloglist-item { position: relative; display: flex; justify-content: flex-start; align-items: center; padding: 39px 40px 39px 76px; background-color: #fff3f3; margin-bottom: 50px; border-top-right-radius: 60px; margin-left: 48px; }
    .am-bloglist-05 .bloglist-item .bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; opacity: 0; z-index: 0; border-top-right-radius: 60px; }
        .am-bloglist-05 .bloglist-item .bg:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,.5); border-top-right-radius: 60px; }
    .am-bloglist-05 .bloglist-item .date { width: 96px; height: 96px; border-radius: 50%; background-color: #2c5cda; position: absolute; text-align: center; color: #fff; left: -48px; }
        .am-bloglist-05 .bloglist-item .date .month { font-size: 16px; line-height: 30px; }
        .am-bloglist-05 .bloglist-item .date .day { font-size: 36px; line-height: 30px; font-weight: 600; margin-top: 20px; }
    .am-bloglist-05 .bloglist-item .content { position: relative; max-width: 726px; overflow: hidden; }
        .am-bloglist-05 .bloglist-item .content .title { margin: 0; font-size: 20px; line-height: 30px; color: #424242; }
        .am-bloglist-05 .bloglist-item .content .info:last-child { margin-bottom: 0; }
        .am-bloglist-05 .bloglist-item .content .title + .info { margin-top: 20px; }


        .am-bloglist-05 .bloglist-item .bg,
        .am-bloglist-05 .bloglist-item .date,
        .am-bloglist-05 .bloglist-item .content .title,
        .am-bloglist-05 .bloglist-item .content .info { -webkit-transition: all .3s cubic-bezier(0.420, 0.000, 1.000, 1.000) 0s; transition: all .3s cubic-bezier(0.420, 0.000, 1.000, 1.000) 0s; }

    .am-bloglist-05 .bloglist-item:hover .bg { opacity: 1; }
    .am-bloglist-05 .bloglist-item:hover .date { background-color: #fd4ea5; }
    .am-bloglist-05 .bloglist-item:hover .content .title,
    .am-bloglist-05 .bloglist-item:hover .content .info { color: #ffffff; }


@media (max-width: 767px) {
    .am-bloglist-05 .bloglist-item { padding: 39px 20px 39px 76px; }
}