@charset "UTF-8";


/*=========================
article_style
==========================*/
#wrap hr {
    border: none;
    border-top: 4px dotted #FFE33F;
}


#wrap {
    font-size: 13px;
    line-height: 1.5em;

    /*    width: 100%;*/
    max-width: 970px;
    margin: 0 auto;

    color: #000;
}

#wrap .attention {
    color: #c40014;
}

.leftArea {
    float: left;
}

.rightArea {
    float: right;
}

/*-- clearfix --*/

#wrap .cf:before,
#wrap .cf:after {
    display: table;

    content: '';
}

#wrap .cf:after {
    clear: both;
}

#wrap .cf {
    zoom: 1;
}

.pc-none {
    display: none;
}

strong {
    font-weight: bold !important;
    font-size: 110%;
}

@media only screen and (max-width: 750px) {
    .pc-none {
        display: block;
    }

    .sp-none {
        display: none;
    }
}


button.moreBtn {
    display: block;
    margin: 30px auto 0px;
    padding: 10px 30px;
    border: 1px solid #bababa;
    border-radius: 50px;
    background-color: #fff;
    color: #585757;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}





/*-----------------------

   #entryAreaWrap

-----------------------*/

#entryAreaWrap {
    width: 100%;
    padding: 0;
    margin-top: 10px;
}

#entryArea {
    box-sizing: border-box;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 0 30px;

    background-color: #fff;
    border: 1px solid #FFE33F;

    margin-bottom: 50px;
}

#entryArea h1,
#entryArea h2,
#entryArea h3,
#entryArea h4 {
    font-weight: bold;
}



#entryArea .title {
    font-family: 'Avenir', 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Sans', 'ヒラギノ角ゴシック', YuGothic, 'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic';

    margin: 0;
    padding: 20px;

    color: #000;
    background-color: #FFE33F;
}

#entryArea .title h2 {
    font-size: 1.5rem;
    line-height: 2.12rem;
    padding: 0px 0 10px;
    border-bottom: 1px solid #4d4d4d;
}

#entryArea .title .sponsored {
    line-height: 1rem;
    margin-bottom: 10px;
    color: #966737;
}

#entryArea .title .sponsored span {
    margin-right: 5px;
    font-weight: bold;
}

#entryArea .title .group {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 10px 10px 5px 10px;
}

@media screen and (max-width: 751px) {
    #entryArea .title .group {
        padding: 10px 0px 0px 0px;
    }
}

#entryArea .title .group a {
    padding: 5px;
    margin: 2px;
    font-size: 0.7rem;
    line-height: 1rem;
    color: #fff;
}

#entryArea .title a.cate {
    background: #000;
    color: #fff !important;
}

#entryArea .title a.tag {
    display: inline-block;
    border-radius: 20px;
    background: #fff;
    color: #000;
}

#entryArea .title .article_date {
    display: inline-block;
    line-height: 1rem;
    padding: 5px 0px;
}

#entryArea .title .article_date .author {
    margin-left: 5px;
    margin-right: 5px;
    padding-left: 17px;
    background: url('../images/author_icon02.png') no-repeat center left;
    background-size: 12px;
}

#entryArea .title .article_date .author a {
    color: #000;
}


#entryArea .title .article_date .date {
    margin-left: 5px;
    margin-right: 5px;
    padding-left: 17px;
    background: url('../images/date_icon02.png') no-repeat center left;
    background-size: 12px;
    font-size: 0.7rem;
}

.list_base .article_date {
    display: block;
    background: rgba(51, 51, 51, 0.5);
    font-size: 0.6rem;
    padding: 5px;
    color: #fff;
}

.list_base .article_date .date {
    margin-left: 5px;
    padding-left: 17px;
    background: url('../images/date_icon.png') no-repeat center left;
    background-size: 12px;
    font-size: 0.6rem;
}

.list_base .article_date .author {
    margin-left: 5px;
    margin-right: 5px;
    padding-left: 17px;
    background: url('../images/author_icon01.png') no-repeat center left;
    background-size: 12px;
    font-size: 0.6rem;
}

#entryArea .breadcrumb {
    padding: 2px 10px;
    font-size: 0.6rem;
    background-color: #F5F4F0;
    color: #797979;
    margin-bottom: 40px;
}

#entryArea .breadcrumb a {
    text-decoration: underline;
    padding: 0px 10px;
    color: #797979;
}


#entryArea .entryBodty {
    padding: 0 60px;
}

#entryArea .entryBodty h2 {
    font-family: 'Avenir', 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Sans', 'ヒラギノ角ゴシック', YuGothic, 'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic';
    font-size: 1.2rem;

    margin: 30px 0;
    padding: 13px 10px;

    color: #000;
    border-left: 11px solid #FFE33F;
    background-color: rgba(255, 227, 63, 0.5);
}

#entryArea .entryBodty h3 {
    margin: 10px 0;
    padding: 10px;
    border-left: 11px solid #FFE33F;
    font-size: 1.2rem;
}

#entryArea .entryBodty h4::before {
    content: "●";
    padding-right: 5px;
    color: #ffe33f;
}


#entryArea .entryBodty p {

    font-size: 1rem;
    line-height: 1.65rem;

    padding: 0 0 20px 0;
}

/*リスト*/
#entryArea .entryBodty ul {
    padding: 1rem;
}

#entryArea .entryBodty ul li {
    font-size: 0.95rem;
    padding-left: 1em;
    text-indent: -.7em;
}

#entryArea .entryBodty ul li:before {
    content: "• ";
    color: #adadad;
    padding-right: 0.5rem;
}

@media screen and (max-width: 751px) {
    #entryArea .entryBodty ul li {
        font-size: 0.85rem;
    }
}


/*キャプション*/

#entryArea .entryBodty .caption {
    color: #adadad;
    font-size: 0.7rem !important;
}

/*エントリー内リンク*/
#entryArea .entryBodty p a:link,
#entryArea .entryBodty p a:visited,
#entryArea .entryBodty .caption a {
    color: #4a87ff;
	text-decoration: underline;
}

/*引用*/

#entryArea .entryBodty .quote {
    box-sizing: border-box;
    font-style: oblique;
    padding: 20px;
    margin: 20px;
    margin: 20px;
    background: #f8f8f8;
    border: 1px solid #e8e8e8;
}


#entryArea .entryBodty blockquote {
    box-sizing: border-box;
    font-style: oblique;
    padding: 20px;
    margin: 20px;
    margin: 20px;
    background: #f8f8f8;
    border: 1px solid #e8e8e8;
}

#entryArea .entryBodty blockquote p:last-of-type {
	padding:0px
}


/*ピックアップ*/

#entryArea .entryBodty .pickup {
    box-sizing: border-box;
    padding: 20px;
    margin: 20px;
    margin: 20px;
    background: #fffedd;
    border-left: 5px solid #FFE33F;
    border-right: 5px solid #FFE33F;
}

#entryArea .entryBodty .pickup a {
    color: #c0a837;
}

#entryArea .entryBodty .pickup_link {
    display: flex;
    flex-wrap: nowrap;
    box-sizing: border-box;
    padding: 20px;
    margin: 20px;
    background: #fffedd;
    border-left: 5px solid #FFE33F;
    border-right: 5px solid #FFE33F;
}

#entryArea .entryBodty .pickup_link p {
    padding-bottom: 0px;
}


#entryArea .entryBodty .pickup_link a:hover {
    opacity: 0.5;
}

#entryArea .entryBodty .pickup_link h3 {
    font-size: 1.2rem;
    line-height: 1.5rem;
    color: #c0a837;
    border: none;
    padding: 0px;
}

#entryArea .entryBodty .pickup_img {
    box-sizing: border-box;
    padding-right: 20px;
    width: 250px;
    flex-shrink: 0;
}

#entryArea .entryBodty .pickup_img img {
    width: 100%;
    height: auto;
}

@media screen and (max-width: 751px) {
    #entryArea .entryBodty .pickup_link {
        flex-wrap: wrap;
        padding: 10px;
        margin: 10px;
    }

    #entryArea .entryBodty .pickup_link h3 {
        font-size: 1rem;
        line-height: 1.2rem;
    }

    #entryArea .entryBodty .pickup_img {
        width: 100%;
        padding-right: 0px;
        padding-bottom: 20px;
    }

    #entryArea .entryBodty .pickup_img img {
        max-width: 600px;
    }
}

/*ピンクリボン*/

#entryArea .entryBodty .pickup_link_pink {
    box-sizing: border-box;
    padding: 20px;
    margin: 20px;
    background: #ffeaf3;
    border-left: 5px solid #ef93bb;
    border-right: 5px solid #ef93bb;
}

#entryArea .entryBodty .pickup_link_pink p {
    padding-bottom: 0px;
}


#entryArea .entryBodty .pickup_link_pink a:hover {
    opacity: 0.5;
}

#entryArea .entryBodty .pickup_link_pink h3 {
    font-size: 1.2rem;
    line-height: 1.5rem;
    color: #ef93bb;
    border: none;
    padding: 0px;
}

#entryArea .entryBodty .pickup_link_pink img {
    display: block;
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
    border: 5px solid #ef93bb;
}

@media screen and (max-width: 751px) {
    #entryArea .entryBodty .pickup_link_pink {
        padding: 10px;
        margin: 10px;
    }

    #entryArea .entryBodty .pickup_link_pink h3 {
        font-size: 1rem;
        line-height: 1.2rem;
    }
}





/*エントリー内　並べる画像用*/
#entryArea .entryBodty .img {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    text-align: center;
}

/*Youtube*/
#wrap #entryArea .youtube {
    max-width: 640px;
    margin: 50px auto;
}

#wrap #entryArea .youtube .size {
    width: 100%;
    padding-bottom: 56.25%;
    height: 0px;
    position: relative;
    margin: 0px auto;
}

#wrap #entryArea .youtube .size iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media only screen and (max-width: 1095px) {
    #entryAreaWrap {
        max-width: 1240px;
        padding: 0px 0px 40px 0px;
    }

    #entryArea {
        width: auto;
    }
}

@media only screen and (max-width: 750px) {
    #entryAreaWrap {
        width: 100%;
        padding: 0px;
    }

    #entryArea {
        width: 100%;
    }

    #entryArea .title {
        margin: 0;
        padding: 10px;
        line-height: 2.5rem;
    }

    #entryArea .title h2 {
        font-size: 1.2rem;
        line-height: 1.4rem;
        padding: 10px 0 15px;
    }

    #entryArea .title .sponsord {
        margin-bottom: 0px;
    }

    #entryArea .title .article_date {
        display: block;
        width: 100%;
    }

    #entryArea .entryBodty {
        padding: 0 15px;
    }

    #entryArea .entryBodty h2 {
        font-size: 1rem;

        margin: 20px 0;
        padding: 10px 10px;
    }

    #entryArea .entryBodty h3 {
        font-size: 1rem;
    }

    #entryArea .entryBodty p {
        font-size: .85rem;
        line-height: 1.6;

        padding: 0 0 20px 0;
    }


    #wrap #entryArea .nextPage {
        margin: 0 15px;
        padding: 15px 40px 15px 20px;
    }
}



/*-----------------------

   #cateList

-----------------------*/

#cateAreaWrap {
    background: url(../images/back.png) repeat center top;
}

#cateArea {
    float: none;

    max-width: 1240px;
    margin: 0 auto;
    padding: 40px 0;
}

#cateArea ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1240px;
}

#cateArea .title {
    margin-bottom: 20px;
    padding: 10px;
    text-align: center;
    background-color: #FFE33F;
}

#cateArea .title h1 {
    font-size: 2rem;
    padding: 0 0 10px;
}


#cateArea #pager {
    clear: both;

    width: 100%;
    margin: 0 auto 20px;
    padding: 20px 0 0 0;

    text-align: center;
}



#cateArea .photo {
    min-height: 250px;
    max-height: 250px;
    overflow: hidden;
    position: relative;
    background-color: #fff;
    border-bottom: 2px solid #FFE33F;
}

#cateArea .photo img {
    width: auto;
    max-height: 250px;

    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    -ms-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
}

#cateArea .List {
    box-sizing: border-box;

    width: 300px;
    background: #fff;

    border: 1px solid #FFE33F;

    margin: 5px;

    color: #fff;
}

#cateArea .List h2 {
    font-family: 'Avenir', 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Sans', 'ヒラギノ角ゴシック', YuGothic, 'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic';
    line-height: 1.5rem;

    font-size: 1rem;

    padding: 5px;

    min-height: 3rem;
}


#cateArea .List .cate_date .cate {
    font-size: .7rem;

    float: left;

    padding: 1px 10px;

    margin-left: 5px;

    text-align: center;

    color: #000;
    background-color: #FFE33F;
    border: 1px solid #FFE33F;
}

#cateArea .List .cate_date .subcate {
    box-sizing: border-box;

    font-size: .7rem;

    float: left;

    margin-left: 5px;

    padding: 1px 10px;

    text-align: center;

    color: #000;
    border: 1px solid #FFE33F;
}

#cateArea .List .cate_date .date {
    float: right;

    margin-left: 5px;
    padding-left: 17px;

    color: #000;
    background: url('../images/date_icon.png') no-repeat center left;
    background-size: 12px;
    font-size: 0.7rem;

}

#cateArea .List .cate_date .author {
    float: right;

    margin-left: 5px;
    margin-right: 5px;
    padding-left: 17px;

    color: #000;
    background: url('../images/author_icon01.png') no-repeat center left;
    background-size: 12px;

    font-size: 0.7rem;
}

#cateArea #pager span.current_page,
#cateArea #pager span.current_page {
    font-size: 12px;

    margin: 1px;
    padding: 3px 8px;

    color: #000;
    border: 1px solid #000;
    background: #FFE33F;
}

#cateArea #pager a.link_before {
    margin-right: 9px;
}

#cateArea #pager a.link_next {
    margin-left: 9px;
}

#cateArea #pager a {
    font-size: 12px;

    margin: 1px;
    padding: 3px 8px;

    color: #000;
    border: 1px solid #000;
    background: #ffffff;
}

#cateArea #pager a,
#cateArea #pager a:visited {
    text-decoration: none;
}

#cateArea #pager a:hover {
    text-decoration: none;

    color: #ccc;
    border: 1px solid #ebd985;
    background: #fff;
    background-color: #f2f1ba;
}



@media only screen and (max-width: 750px) {
    #cateAreaWrap {
        width: 100%;
    }

    #cateArea {
        width: 100%;
        margin: 0 auto;
        padding: 50px 0;
    }

    /*
    #cateArea h1 {
        font-family: 'Kosugi Maru', sans-serif;
        font-size: 1.5rem;
        font-weight: normal;


        padding: 0 0 50px 0;

        text-align: center;

        color: #fff;
    }
*/

    #cateArea #topList {
        display: flex;
        /*        flex-direction: column;*/
        justify-content: space-between;
    }

    #cateArea .List {
        margin: 0 auto 40px;

        color: #fff;
    }

    #cateArea .List p {
        margin: 0;
    }

    #cateArea .List h2 {
        font-size: 1.2rem;
    }

    #cateArea .List .cate_date {
        padding-top: 10px;
    }

    /*
    #cateArea .photo {
        min-height: 200px;
        max-height: 200px;
    }


    #cateArea .photo img {
        max-height: 200px;
    }
*/
}

/*-----------------------

   table

-----------------------*/
#wrap table {
    width: calc(100% - 40px);
    margin: 0px auto;
}


#wrap table tr {
    border-bottom: 2px solid #fff;
}

#wrap table th {
    width: 20%;
    background-color: rgba(255, 227, 63, 0.3);
}

#wrap table td {
    background-color: #fafaf4;
    padding: 10px;
}


@media screen and (max-width: 751px) {
    #wrap table {
        width: calc(100% - 20px);
    }
}

/*-----------------------

   next_list

-----------------------*/
#wrap .next_list {
    margin-bottom: 30px;
}


#wrap .next_list ul {
    padding: 0px;
}

#wrap .next_list ul li {
    list-style: none;
}

#wrap .next_list ul li {
    padding-left: 0;
    text-indent: 0;
}

#wrap .next_list ul li:before {
    content: none;
}

#wrap .next_list li a {
    display: block;
    padding: 10px;
    margin: 5px;
    font-weight: bold;
    font-size: 1rem;
    color: #000 !important;
    border-bottom: 2px dotted #ffe33f;
}

@media screen and (max-width: 751px) {
    #wrap .next_list li a {
        font-size: 0.8rem;
        line-height: 1rem;
    }
}


#wrap .next_list a.btn_more_list {
    background: #ffe33f;
    padding: 10px;
    font-weight: bold;
    border: solid 2px #ffe33f;
    cursor: pointer;
    border-radius: 10px;
    width: 100px;
    display: block;
    text-align: center;
    margin: 0px 0px auto auto;
    color: #000;
}


/*-----------------------

   next_list2

-----------------------*/


#wrap .next_list2 ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0px;
}

#wrap .next_list2 li {
    width: calc(100% / 5);
}

@media screen and (max-width: 751px) {
    #wrap .next_list2 li {
        width: calc(100% / 3);
    }
}

#wrap .next_list2 li a {
    display: block;
    border-radius: 10px;
    background-color: #ffe33f;
    text-align: center;
    padding: 20px 0px;
    margin: 5px;
    font-weight: bold;
    font-size: 1rem;
    color: #000 !important;
}

@media screen and (max-width: 751px) {
    #wrap .next_list2 li a {
        font-size: 0.8rem;
        line-height: 1rem;
    }
}




/*-----------------------

  .relationAreaWrap

-----------------------*/

.relationAreaWrap {
    margin-bottom: 30px;
}

.relationAreaWrap h1,
#latestAreaWrap h1 {
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: 10px;
    padding: 0 0 40px 0;
    text-align: center;
    color: #000;
}

.relationAreaWrap h1:after,
#latestAreaWrap h1:after {
    display: block;
    width: 180px;
    margin: 0 auto;
    padding: 10px 0;
    content: '';
    border-bottom: 5px solid #FFE33F;
}


/*-----------------------

  #latestAreaWrap

-----------------------*/

#latestAreaWrap {
    background-image: url(../images/bg_triangle.png);

    padding: 40px 0px;
    margin-top: 40px;
}

#latestAreaWrap h1:after {
    border-color: #fff;
}


/*-----------------------

  #articlepager

-----------------------*/

#wrap #entryArea #articlepager {
    text-align: center;
    margin: 40px 0px;
    line-height: 2rem;
}

#wrap #entryArea #articlepager span.current_page {
    font-size: 12px;

    margin: 1px;
    padding: 3px 8px;

    color: #000;
    border: 1px solid #000;
    background: #FFE33F;
}

#wrap #entryArea #articlepager a.link_before {
    margin-right: 9px;
}

#wrap #entryArea #articlepager a.link_next {
    margin-left: 9px;
}

#wrap #entryArea #articlepager a {
    font-size: 12px;

    margin: 1px;
    padding: 3px 8px;

    color: #000;
    border: 1px solid #000;
    background: #ffffff;
}

#wrap #entryArea #articlepager a,
#wrap #entryArea #articlepager a:visited {
    text-decoration: none;
}

#wrap #entryArea #articlepager a:hover {
    text-decoration: none;

    color: #ccc;
    border: 1px solid #ebd985;
    background: #fff;
    background-color: #f2f1ba;
}


/*-----------------------

  shere_t

-----------------------*/

.shere_t ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    margin-top: 20px;
}

.shere_t li {
    height: 20px;
    margin: 0px 5px;
    line-height: 1rem;
}



/*-----------------------

 .swiper3
-----------------------*/

#entryArea .entryBodty .swiper3 ul li::before {
    content: none;
}


#entryArea .entryBodty .swiper3 ul li {
    padding: 10px !important;
}

/*-----------------------

  shopify

-----------------------*/

#shopify {
    border: 2px solid #208C1C;
    margin: 20px 0px;
    padding: 10px;
}

#shopify h2 {
    margin: 10px 0px 0px !important;
    background: #208c1c !important;
    border: none !important;
    color: #fff !important;
}

#shopify .txt {
    background-color: rgba(32, 140, 28, 0.1);
    padding: 10px;
    margin-bottom: 20px;
}

#shopify .txt p {
    padding-bottom: 5px;
    color: #208c1c;
}

#shopify .attention {
    margin-top: 20px;
    text-align: center;
}

.shopify-buy-frame--product {
    display: block;
    margin: 0px auto;
}

/*-----------------------

 author_latestlist

-----------------------*/
#wrap #author_latestlist h1 {
    margin: 90px 0px 20px;
    background-color: #FFE33F;
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem;
    padding: 20px;
}


#wrap #author_latestlist li {
    border: 2px solid #ffe33f;
    padding: 10px;
    box-shadow: 5px 5px 0px rgba(255, 227, 63, 0.2);
    margin: 0px 10px;
}


#wrap #author_latestlist .photo_area img {
    display: block;
    width: 100px;
    height: auto;
    border-radius: 50px;
    margin: 10px auto;
    border: 3px solid #ffe33f;
}


#wrap #author_latestlist .text_area h2 {
    display: block;
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 10px;
    padding: 5px;
    border-bottom: 2px dotted #ffe33f;
}

#wrap #author_latestlist .text_area p {
    min-height: 2.5rem;
    padding: 5px;
}


#wrap #author_latestlist .text_area .btn {
    display: block;
    width: 150px;
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 10px;
    margin: 10px auto 0px;
    border-radius: 20px;
}


@media screen and (max-width: 680px) {
    #wrap #author_latestlist li {
        min-height: 320px;
    }

}

/*-----------------------

 series_latestlist

-----------------------*/
#wrap #series_latestlist h1 {
    margin: 90px 0px 20px;
    background-color: #FFE33F;
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem;
    padding: 20px;
}

#wrap #series_latestlist li {
    margin: 0px 10px;
}


#wrap #series_latestlist li .series_block {
    background: #c0a837;
    position: relative;
    border-radius: 10px;
    text-align: center;
}


#wrap #series_latestlist li .series_block .series_title {
    background-color: rgba(0, 0, 0, 0.3);
    display: block;
    width: 100%;
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1rem;
    font-weight: bold;
    opacity: 1;
    z-index: 10;
    color: #fff;
    /*    text-shadow: 1px 1px 1px #000;*/
    padding: 10px;
    text-align: center;
    /* border-top: 2px solid #fff;
    border-bottom: 2px solid #fff; */
}


#wrap #series_latestlist li .series_block img {
    opacity: 0.8;
    border-radius: 10px;
    height: 160px;
    object-fit: contain;
    width: 100%;
}

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

    #wrap #series_latestlist li .series_block .series_title {
        font-size: 0.8rem;
    }
}

/*-----------------------

feature_latestlist

-----------------------*/
#wrap #feature_latestlist h1 {
    margin: 90px 0px 20px;
    background-color: #FFE33F;
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem;
    padding: 20px;
}

#wrap #feature_latestlist ul li {
    margin: 0px 10px;
}

#wrap #feature_latestlist ul li .photo_area {
    background: #fffde5;
    max-width: 100%;
    height: autp;
    position: relative;
    height: auto;
}


#wrap #feature_latestlist ul li .photo_area:after {
    content: "";
    display: block;
    padding-top: 56.25%;
}


#wrap #feature_latestlist ul li .photo_area .inner {
    position: absolute;

    width: 100%;
    height: 100%;
}

#wrap #feature_latestlist ul li .photo_area img {
    position: absolute;

    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;

    margin: auto;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);

}


#wrap #feature_latestlist h2 {
    background: #ffe33f;
    background-image: url(../images/bg_triangle.png);
    display: block;
    padding: 20px 10px;
    font-weight: bold;
    min-height: 2rem;
}


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


    #wrap #feature_latestlist {
        padding: 0px 0px 30px 0px;
        margin-bottom: 10px;
    }

    #wrap #feature_latestlist h2 {
        min-height: 47px;
        padding: 10px;
        font-size: 0.8rem;
    }
}