.contents{ width:960px; margin:0 auto; }
.m_font{ font-family: 'Noto Sans', sans-serif; font-family: 'Noto Serif', serif; transform: rotate(0.05deg); font-weight: bold; }
/*
 *NotoSans-Regular.ttf: Copyright 2012 Google Inc. All Rights Reserved.
 *NotoSans-Italic.ttf: Copyright 2012 Google Inc. All Rights Reserved.
 *NotoSans-Bold.ttf: Copyright 2012 Google Inc. All Rights Reserved.
 *NotoSans-BoldItalic.ttf: Copyright 2012 Google Inc. All Rights Reserved.
*/
/*
 *NotoSerif-Regular.ttf: Copyright 2012 Google Inc. All Rights Reserved.
 *NotoSerif-Italic.ttf: Copyright 2012 Google Inc. All Rights Reserved.
 *NotoSerif-Bold.ttf: Copyright 2012 Google Inc. All Rights Reserved.
 *NotoSerif-BoldItalic.ttf: Copyright 2012 Google Inc. All Rights Reserved.
*/

/*　rank
-----------------------------*/
article#ranking p.contents_more a{color: #67163b;font-size: 75%;background: #fff;padding: 3px 3px 3px 10px;border-radius: 15px;vertical-align: top;margin-right: 2px;}
article#ranking { clear: both; overflow: hidden;margin-bottom: 30px; }
article#ranking ul.carousel { overflow: hidden; margin: 0 auto; text-align: justify; text-justify: distribute-all-lines; width:97%; padding: 15px 1.5% 10px;white-space:nowrap;}

article#ranking ul.carousel li { display: inline-block;  width: 150px;padding: 0 15px; vertical-align: top; }
article#ranking ul.carousel li p.rank_ttl { width: 80%; height: auto; padding-bottom: 4px; margin: 0 auto; }
article#ranking ul.carousel li p.rank_txt a{white-space: normal!important; color: #1d170e;}
article#ranking ul.carousel li p.rank_txt{padding: 0 1px;min-height: 36px;}
.free_desc span {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;font-size: 12px!important;}

article#ranking ul.carousel li p.rank img,article#ranking ul.carousel li p.img img { width: 100%; height: auto;}
article#ranking ul.carousel li p.rank { text-align: center; padding-bottom: 3px;}
article#ranking ul.carousel li p.link { white-space: normal!important; line-height: 1.2; padding-top: 3px;}


/*　osusume
-----------------------------*/
article#osusume div.box6 {
    display: flex;
    padding: 10px;
    width: calc(100% - 20px);
}
article#osusume div.box6 dl {
    max-width: 140px;
    margin: 2px;
    border: 1px solid #ccc;
    padding: 5px;
}
article#osusume div.box6 dl dt img {
    width: 100%;
    height: auto;
}
article#osusume div.box6 dl dd {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    padding-top: 3px;
    min-height: 54px;
}


/*　new_columnArea
-----------------------------*/
#n_columnArea>h4.summer:before {content: "\025cf";font-size: 38px;top: 5px;left: -15px;position: absolute;color: #cfdbfd;z-index: -1;}
#n_columnArea>h4.summer {font-weight: bold;color: #333333;font-size: 15px;position: relative;margin-left: 15px;border-bottom: 2px solid #cfdbfd;display: inline-block;padding: 3px 2px 1px!important;margin-top: 10px;background: rgba(255, 255, 255, 0);border-top: none;border-left: none;border-right: none;z-index: 1;}

#n_columnArea .columnArea {margin: 10px 0 20px;}
#n_columnArea .c_box {display: flex; width: 25%; float: left;min-height: 86px;}
#n_columnArea .c_box p {padding: 5px 8px 5px 5px;}
#n_columnArea .c_box p img {width: 65px;height: auto;}
#n_columnArea .c_box dt span {font-weight: bold;background: linear-gradient(transparent 40%, #ffccdf 0%);color: #333333;font-size: 13.5px;padding: 0 2px;}
#n_columnArea .c_box dd {font-size: 11px;color: #565656;padding-top: 5px;line-height: 1.4;display: -webkit-box;
    -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}
#n_columnArea .columnArea dl {padding: 0 5px 0 0;width: 157px;}
#n_columnArea a:hover {text-decoration: none!important;opacity: 0.8;color: #707070;}
#n_columnArea .c_box dt {line-height: 1.4;}
p.n_column_btn:hover {background: #af5071;}
p.n_column_btn a {color: #fff!important;}
p.n_column_btn { background: #761238;padding: 13px;margin: 50px auto 35px;width: 60%;text-align: center;font-weight: bold;font-size: 140%;border-radius: 3px;}
.contents div.pagetop { clear:both; color:#CA417D; font-size:85%; margin:15px 2px 20px 0; text-align:right; }
.sort_area_ { padding: 3px 0!important;}
.clearfix::after{content: "";display: block;clear: both;}
#n_columnArea h3 {background: #fff;color: #e74f83;border-bottom: 3px double #e74f83;border-top: 3px double #e74f83;padding: 8px 0!important;text-align: center;font-size: 16px!important;font-weight: bold!important;margin: 30px auto 20px!important;line-height: 1.2;border-left: none;border-right: none;border-radius: 0;}


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

/*　rank
-----------------------------*/

article#ranking ul.carousel {
    display: flex;
    margin: 0 auto;
    text-align: justify;
    text-justify: distribute-all-lines;
    width: 100%;
    padding: 0;
    white-space: nowrap;
}
article#ranking ul.carousel li {
    display: inline-block;
    width: 18%;
    padding: 0 1%;
    vertical-align: top;
}

/*　osusume
-----------------------------*/
article#osusume div.box6 dl dd {  min-height: 0;}


/*　new_columnArea
-----------------------------*/
#n_columnArea h3 { margin: 30px auto 20px!important;}
#n_columnArea>h4.summer{ margin-left: 20px!important;}
#n_columnArea .c_box {display: flex;width: 31%;padding: 1%;min-height: 82px;}
#n_columnArea .columnArea {margin: 5px 1.5%;width: 97%;display: block;}
#n_columnArea .c_box p {padding: 2%;width: 30%;}
#n_columnArea .c_box p img {width: 100%;height: auto;}
#n_columnArea .columnArea dl {padding: 1%;width: 64%;}
#n_columnArea .c_box dt {line-height: 1.2;}
#n_columnArea .c_box dt span {font-weight: bold;background: linear-gradient(transparent 40%, #ffccdf 0%);color: #333333;font-size: 12.5px;}
#n_columnArea .c_box dd {font-size: 12px;color: #565656;padding-top: 3px;line-height: 1.2;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}

}

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


/*　rank
-----------------------------*/
.carousel::-webkit-scrollbar {height: 5px;}
.carousel::-webkit-scrollbar-track {border-radius: 5px;background: #eee;}
.carousel::-webkit-scrollbar-thumb {border-radius: 5px;background: #929292;}
article#ranking ul.carousel li {
    display: inline-block;
    width: 130px;
    padding: 0 10px;
    vertical-align: top;
}
article#ranking ul.carousel { overflow: hidden; margin: 0 auto; text-align: justify; text-justify: distribute-all-lines; width:97%; padding: 15px 1.5% 10px;overflow-x:scroll;-webkit-overflow-scrolling:touch;overflow-scrolling:touch;white-space:nowrap; }

article#ranking ul.carousel li p.link {
    white-space: normal!important;
    line-height: 1.2;
    padding-top: 3px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-bottom: 10px;
}



/*　osusume
-----------------------------*/
article#osusume div.box6 {
    display: block;
    width: 98%;
    overflow: hidden;
    padding: 0 1%;
}
article#osusume div.box6 dl {
    margin: 5px 1%;
    max-width: calc(44% - 2px);
    float: left;
    padding: 2%;
    min-height: 185px;
    
}
article#osusume div.box6 dl dd { min-height: 34px;}


/*　new_columnArea
-----------------------------*/
#n_columnArea h3 { margin: 30px auto 20px!important;}
#n_columnArea>h4.summer{ margin-left: 20px!important;}
#n_columnArea .columnArea {margin: 5px 0;width: 100%;display: block;}
#n_columnArea .c_box {display: flex;width: 48%;padding: 1%;float: left;min-height: 72px;}
#n_columnArea .c_box p {padding: 2%;width: 30%;}
#n_columnArea .c_box p img {width: 100%;height: auto;}
#n_columnArea .columnArea dl {padding: 1%;width: 64%;}
#n_columnArea .c_box dt {line-height: 1.2;}
#n_columnArea .c_box dt span {font-weight: bold;background: linear-gradient(transparent 40%, #ffccdf 0%);color: #333333;font-size: 12px;}
#n_columnArea .c_box dd {font-size: 11px;color: #565656;padding-top: 3px;line-height: 1.1;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}
p.n_column_btn {font-size: 110%; width: 70%;margin: 15px auto;
}
}