@charset "utf-8";
/*  リセット　*/

html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure,footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
color:#333;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block;
}
li{
list-style-type:none;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
*,*:before,*:after {
box-sizing: border-box;
}


/*  共通CSS　*/

body {
line-height:1;
font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, Osaka, "MS PGothic", arial, helvetica, sans-serif;
position:relative;
}
a{color:#444; text-decoration:none;}
a:hover{opacity:0.6;cursor:pointer}
.none{display:none!important;}


#top-newkuchi h2,
#top-ranking h2,
#top-category-all h2,
#top-qlist h2,
#top-influencer-list h2{
text-align:center;
font-size:32px;
position: relative;
margin:auto;
padding: 25px;
width: 300px;
background-color:#FFF;
box-sizing: border-box;
font-weight: bold;
}
#top-qlist h2{
width: 500px;
}
#top-influencer-list h2{
width: 350px;
}
#top-newkuchi h2::before,
#top-newkuchi h2::after,
#top-ranking h2::before,
#top-ranking h2::after,
#top-category-all h2::before,
#top-category-all h2::after,
#top-qlist h2::before,
#top-qlist h2::after,
#top-influencer-list h2::before,
#top-influencer-list h2::after{
position: absolute;
content: '';
width: 15px;
height: 15px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#top-newkuchi h2::before,
#top-ranking h2::before,
#top-category-all h2::before,
#top-qlist h2::before,
#top-influencer-list h2::before {
top: 0;
left: 0;
border-top: 3px solid #fa0;
border-left: 3px solid #fa0;
}
#top-newkuchi h2::after,
#top-ranking h2::after,
#top-category-all h2::after,
#top-qlist h2::after,
#top-influencer-list h2::after {
bottom: 0;
left: 0;
border-bottom: 3px solid #fa0;
border-left: 3px solid #fa0;
}
.kakko::before,
.kakko::after {
position: absolute;
content: '';
width: 15px;
height: 15px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.kakko::before {
top: 0;
right: 0;
border-top: 3px solid #fa0;
border-right: 3px solid #fa0;
}
.kakko::after {
bottom: 0;
right: 0;
border-bottom: 3px solid #fa0;
border-right: 3px solid #fa0;
}

/* header */

header#top-header{
height: 100vh;
background: #ccc;
background-image: url(https://koesiru.jp/img/common/design/000.jpg);
background-size: cover;
position: relative;
overflow: hidden;
}
header#top-header .h1-wrap {
width: 1000px;
padding: 30px 0px;
text-align: left;
margin: 0 auto;
}
header#top-header .h1-wrap a{
background: url(https://koesiru.jp/img/common/design/logo-hed.png)no-repeat;
background-size:100%;
width:150px;
height:31px;
display:block;
line-height:6;
overflow:hidden;
}
header#top-header .h1-wrap span{
display:block;
font-size:13px;
margin-top:6px;
color:#d4d4d4;
}
header#top-header .hed-main-box{
position:absolute;
top:34vh;
left:0;
right:0;
bottom:0;
margin:auto;
text-align:center;
}
header#top-header .hed-main-box h1 {
text-align: center;
margin: auto;
display: block;
font-size:40px;
line-height: 1.4;
color: #FFF;
margin-bottom: 30px;
font-weight:bold;
}
header#top-header .hed-main-box .firstViewTxt {
text-align: center;
margin: auto;
display: block;
font-size:40px;
line-height: 1.4;
color: #FFF;
margin-bottom: 30px;
font-weight:bold;
}
@media (max-width: 680px) {
header#top-header .hed-main-box h1 {
font-size:5vw;
}
header#top-header .hed-main-box .firstViewTxt {
font-size:5vw;
padding-left:15px;
}
}

/*  topform　*/

.hed-main-box form{
width:50%;
margin:auto;
display:block;
position: relative;
}
.hed-main-box form input:focus {
background: #ffffff!important;
}
.hed-main-box form #search-form-box {
border:1px solid #FFF;
padding: 10px 100px 10px 10px;
background: none;
width:100%;
line-height: 26px;
background: #ccc;
border-radius: 10px;
outline: none;
}
.hed-main-box form .css-button {
border: none;
background: #2d2d2d;
display: inline-block;
padding: 0 36px;
line-height: 30px;
color: #fff;
border-radius: 30px;
font-size: 14px;
cursor: pointer;
position:absolute;
right:-35px;
top:50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%)translateX(-50%);
margin: auto;
}


/* top-main */

main#top-main{
width:100%;
position:relative;
top:-100px;
margin:0;
}


/* top-category */

#top-category{
width: 1000px;
display:block;
margin:auto;
position: relative;
z-index:1;
background:#FFF;
border-radius:20px;
}

#top-category h2{
text-align:center;
padding:20px 0;
font-size:24px;
color:#FFF;
background:#b2b2b2;
border-radius:20px 20px 0 0;
}
#top-category h2 span:nth-of-type(1){
padding:0 15px;
margin:0 10px;
background:#FFF;
color:#FF3171;
border-radius:5px;
font-weight:bold;
}
#top-category h2 span:nth-of-type(2){
color:#FFF;
font-size:16px;
margin:0 10px 0
}
#top-category ul{
display: -webkit-flex;
display: flex;
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
justify-content: center;
align-items: center;
padding:20px;
box-sizing:border-box;
}
#top-category li{
width:22%;
margin:10px;
}
#top-category li img{
width:25px;
margin:10px;
}
#top-category li a{
text-align:center;
display: -webkit-flex;
display: flex;
align-items: center;
}
.scroll-more-bt{
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
}
.scroll-more-bt a:before{
content:"";
width:11px;
height:85px;
display:block;
background:url(https://koesiru.jp/img/common/design/more-shita.png) no-repeat center;
background-size:100%;
top:3px;
right:10px;
position:absolute;
}
.scroll-more-bt a{
padding:15px 50px;
border:2px solid #000;
box-sizing:border-box;
font-size:18px;
font-weight:bold;
width:40%;
text-align:center;
position:relative;
}


/* new */

#top-newkuchi{
margin-top:80px;
}
.new-wrapper{
width:1000px;
/*background:#ccc;*/
display:block;
margin:30px auto;
padding:10px;
border-radius:10px;
border: #ccc solid 5px;
}
.new-in{
background:#FFF;
display:block;
margin:auto;
padding:20px;
border-radius:10px;
}
.hyouka-top{
border-bottom:1px solid #ccc;
padding:0 0 20px; 0;
margin-bottom:20px;
}

.hyouka-top dl{
display: -webkit-flex;
display: flex;
}
.hyouka-top dl dt{
margin-right:20px;
}
.hyouka-top dl dt img{
width:100px;
}

.hyouka-top dl dd{
display: -webkit-flex;
display: flex;
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
}
.hyouka-top dl dd a.hyouka-cateIcon{
width:100%;
font-size:16px;
}
.hyouka-top dl dd a.hyouka-cateIcon img{
width:20px;
display: inline-block!important;
vertical-align:middle;
}
.hyouka-top dl dd a.hyouka-cateIcon span{
vertical-align:middle;
margin:0 0 0 5px;;
}
.hyouka-top dl dd h3{
width:100%;
font-size:24px;
padding:0;
font-weight: bold;
}
.hyouka-top dl dd ul{
display: -webkit-flex;
display: flex;
justify-content: center;
align-items:flex-end;
}
.hyouka-top dl dd ul li:nth-of-type(1){
font-size:34px;
font-weight:bold;
min-width: max-content;
}
.hyouka-top dl dd ul li img{
width:150px;
margin-right:10px;
display: inline-block!important;
}
.hyouka-top dl dd ul li:nth-of-type(2){
margin:0 5px 0 5px;
color:#999;
font-size:14px;
position:relative;
top:-3px;
min-width: max-content;
}
.hyouka-top dl dd ul li:nth-of-type(2) img{
width:90px;
margin:0 5px;
}
.hyouka-top dl dd ul li:nth-of-type(3){
margin:0 5px;
position:relative;
top:3px;
padding-bottom:5px;
border-bottom:1px solid #1a78a5;
color:#1a78a5;
width:auto;
font-size:14px;
font-weight:bold;
}
.hyouka-top dl dd ul li:nth-of-type(3) a{
color:#1a78a5;
}
.hyouka-top dl dd ul li:nth-of-type(3):first-letter{
font-size:10px;
vertical-align:middle;
margin-right:5px;
}
.hyouka-top dl dd ul li:nth-of-type(4){
margin:0 5px;
font-size:14px;
min-width: max-content;
}
.hyouka-top dl dd ul li:nth-of-type(4) a{
padding:1px 15px;
margin:0 5px;
line-height:normal;
background:#222;
border-radius:50px;
color:#FFF;
font-weight: bold;
}
.hyouka-main{
display: -webkit-flex;
display: flex;
align-items:center;
}
.hyouka-main img.radarChart{
width:450px;
height:auto;
margin-right:20px;
}
.hyouka-box{
width:100%;
    margin-left: 10px;
}
.hyouka-box-in {
width:100%;
box-shadow: 0 0 0 2px #dde4e6;
border-radius:10px;
padding:10px;
margin:10px 0;
box-sizing:border-box;
}
.hyouka-box-in:nth-of-type(1) {
margin:0 0 20px;
}
.hyouka-box .hyouka-box-name{
width:100%;
display: -webkit-flex;
display: flex;
align-items:center;
margin-bottom:10px;
}
.hyouka-box .hyouka-box-name dt{
margin-right:10px;
}
.hyouka-box .hyouka-box-name dt img{
width:35px;
}
.hyouka-box .hyouka-box-name dd p{
font-size:12px;
color:#555;
}
.hyouka-box .hyouka-box-name dd p span{
font-size:12px;
color:#888;
}
.hyouka-box .hyouka-box-name dd .hyouka-hoshi{
margin-top:5px;
font-size:18px;
font-weight:bold;
}
.hyouka-box .hyouka-box-name dd .hyouka-hoshi img{
display: inline-block!important;
width:80px;
margin-right:10px;
}
.hyouka-good{
margin:15px 0 0;
}
.hyouka-good dt{
font-size:16px;
font-weight:bold;
margin-bottom:10px;
background:url(https://koesiru.jp/img/common/icon/icon-maru.png) no-repeat;
background-position:0 center;
background-size:14px;
padding-left:20px;
color:#555;
}
.hyouka-good dt span{
font-size:16px;
font-weight:bold;
margin-bottom:5px;
color:#ff92be;
}
.hyouka-good dt span:last-of-type{
font-size:16px;
font-weight:bold;
margin-bottom:5px;
color:#555;
}
.hyouka-good dd{
font-size:14px;
line-height:1.4;
color:#555;
}
.hyouka-bad{
margin:15px 0 0;
}
.hyouka-bad dt{
font-size:16px;
font-weight:bold;
margin-bottom:10px;
background:url(https://koesiru.jp/img/common/icon/icon-batu.png) no-repeat;
background-position:0 center;
background-size:14px;
padding-left:20px;
color:#555;
}
.hyouka-bad dt span{
font-size:16px;
font-weight:bold;
margin-bottom:5px;
color:#4e6275;
}
.hyouka-bad dt span:last-of-type{
font-size:16px;
font-weight:bold;
margin-bottom:5px;
color:#555;
}
.hyouka-bad dd{
font-size:14px;
line-height:1.4;
color:#555;
}
.new-wrapper .slick-prev,.new-wrapper .slick-next{
width:45px;
height:45px;
}
.new-wrapper .slick-prev{
left:-55px;
}
.new-wrapper .slick-next{
right:-55px;
}
.new-wrapper .slick-prev:before,.new-wrapper .slick-next:before{
content:'';
display:block;
width:45px;
height:45px;
background:url(https://koesiru.jp/img/common/icon/icon-yajiyoko-sp.png) no-repeat center / contain;
opacity: 1;
}
.new-wrapper .slick-prev:before{
transform: scale(-1, 1);
}

.new-wrapper .slick-dots{
bottom: -40px;
}
.new-wrapper .slick-dots li{
width: 22px;
height: 22px;
margin: 0 10px;
}
.new-wrapper .slick-dots li button{
width:22px;
height:22px;
}
.new-wrapper .slick-dots li button:before{
opacity: 1;
color:#bfbfbf;
font-size: 22px;
}
.new-wrapper .slick-dots li.slick-active button:before{
opacity: 1;
color:#2b1900;
}


/* ranking */
#top-ranking{
width:1000px;
margin:80px auto;
}

.top-ranking-in{
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top:50px;
}
.top-ranking-in article a{
position:relative;
}
.top-ranking-in article a:after{
content:'';
display:block;
width:28px;
height:28px;
line-height:26px;
border-radius:50%;
position:absolute;
top:-8px;
left:-8px;
color:#fff;
font-weight:bold;
text-align:center;
}
.top-ranking-in article:nth-of-type(1) a:after{
content:'1';
background:#ffbc00;
}
.top-ranking-in article:nth-of-type(2) a:after{
content:'2';
background:#3c9abf;
}
.top-ranking-in article:nth-of-type(3) a:after{
content:'3';
background:#994100;
}
.top-ranking-in article:nth-of-type(4) a:after{
content:'4';
background:#c1c1c1;
}
.top-ranking-in article:nth-of-type(5) a:after{
content:'5';
background:#c1c1c1;
}
.top-ranking-in article p a:after{
display:none;
}

.yokumi-in{
margin-right:10px;
width:50%;
}
.yokumi-in h3{
text-align:center;
background:#222;
color:#FFF;
height:50px;
line-height:50px;
font-size:18px;
}
.yokumi-in article{
margin:20px 0;
padding:0 0 20px;
border-bottom:1px solid #ccc;
}
.yokumi-in article a{
display: -webkit-flex;
display: flex;
align-items:flex-start;
}
.yokumi-in article img{
width: 120px;
height:80px;
object-fit: contain;
}
.yokumi-in article dl{
padding-left:10px;
}
.yokumi-in article dl dt{
font-size:16px;
font-weight:bold;
margin-bottom:10px;
}
.yokumi-in article dl dd{
font-size:12px;
line-height:1.3;
color:#555;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.toukou-in{
margin-left:10px;
width:50%;
}
.toukou-in h3{
text-align:center;
background:#222;
color:#FFF;
height:50px;
line-height:50px;
font-size:18px;
}
.toukou-in article{
margin:20px 0;
padding:0 0 20px;
border-bottom:1px solid #ccc;
}
.toukou-in article a{
display: -webkit-flex;
display: flex;
align-items:flex-start;
}
.toukou-in article img{
width:120px;
object-fit: contain;
height:80px;
}
.toukou-in article dl{
padding-left:10px;
}
.toukou-in article dl dt{
font-size:16px;
font-weight:bold;
margin-bottom:10px;
}
.toukou-in article dl dd{
font-size:12px;
line-height:1.3;
color:#555;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}



/* influencer */
#top-influencer-list{
width:1000px;
margin:80px auto;
display:block;
}
.influencer-list-in{
margin:50px 0;
}
.influencer-list-in p{
margin:0 0 50px;
text-align:center;
}
.influencer-list-in ul{
display: -webkit-flex;
display: flex;
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
align-items: center;
width:100%;
background:#cccccc;
padding:10px;
border-radius:3px;
}
.influencer-list-in ul li{
width:18.95%;
height:160px;
padding:15px 10px 10px;
margin:5px;
border-radius:3px;
box-shadow:0 0 0 1px #ebf1f2;
background:#FFF;
box-sizing:border-box;
}
.influencer-list-in ul li a{
display: -webkit-flex;
display: flex;
justify-content: center;
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
box-sizing:border-box;
}
.influencer-list-in ul li img{
width:60px;
height:60px;
object-fit:cover;
border-radius:10px;
box-shadow:0 0 0 1px #ebf1f2;
display:block;
text-align:center;
margin-bottom:3px;
}
.influencer-list-in ul li .influencer-list-title{
display:block;
width:100%;
text-align:center;
font-size:12px;
line-height:normal;
padding:5px;
color:#888;
}

.influencer-list-in ul li .influencer-list-name{
display:block;
width:100%;
text-align:center;
font-size:14px;
line-height:normal;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}




/* top-category-all */

#top-category-all{
width:1000px;
margin:80px auto;
}

.category-all-in{
margin-top:50px;
}

.category-all-in ul{
display: -webkit-flex;
display: flex;
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
justify-content: center;
align-items: center;
}

.category-all-in ul li{
width:22%;
text-align:center;
margin:5px;
}
.category-all-in ul li a{
display: -webkit-flex;
display: flex;
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
justify-content: center;
align-items: center;
padding:10px;
border:2px solid #ccc;
box-sizing:border-box;
height:145px;
border-radius:3px;
}
.category-all-in ul li img{
width:auto;
height:50px;
display:block;
margin:0 auto 5px;
}
.category-all-in ul li span{
display:block;
width:100%;
margin:0;
font-weight:bold;
font-size:14px;
}
.category-all-in ul li span:last-of-type{
display:block;
font-size:11px;
color:#888;
font-weight:normal;
line-height:1.4;
margin-top:8px;
text-align:left;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}
.category-all-in ul li span:last-of-type:after{
content:"　等";
}


/* top-qlist */

#top-qlist{
width:1000px;
margin:80px auto;
}
.qlist-in{
margin:50px 0;
}
.qlist-in li{
display:block;
margin:10px 0;
position:relative;
}
.qlist-in li:before{
content:"";
width:20px;
height:100%;
display:block;
background:url(https://koesiru.jp/img/common/icon/icon-q.png) no-repeat center;
background-size:100%;
top:0;
left:20px;
position:absolute;
}
.qlist-in li a{
display:block;
background:#f2f2f2;
padding:25px 70px 25px 60px;
font-size:16px;
font-weight:bold;
border-radius:6px;
line-height:1.2;
color: #444;
}
.qlist-in li a br{
display: none;
}
.qlist-in li .sandou{
position: absolute;
display: block;
top: 50%;
right: -25px;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%)translateX(-50%);
margin: auto;
text-align: center;
background: #ff3171;
color: #FFF;
padding: 5px 5px;
line-height: 1.25;
border-radius: 5px;
height: 50px;
width: 65px;
font-size: 16px;
}
.qlist-in li .sandou span{
display:block;
color:#FFF;
}
.qlist-in li .bosyuchu{
position:absolute;
display:block;
top:50%;
right:-25px;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%)translateX(-50%);
margin: auto;
text-align:center;
background:#fa0;
color:#FFF;
padding:5px 5px;
line-height:1.4;
border-radius:5px;
height:50px;
width:65px;
font-size:14px; 
}
.qlist-in li .bosyuchu span{
display:block;
color:#FFF;
}

.top-more-bt{
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
}
.top-more-bt a:before{
content:"";
width:90px;
height:100%;
display:block;
background:url(https://koesiru.jp/img/common/design/more-yoko.png) no-repeat center;
background-size:100%;
bottom:-10px;
right:-45px;
position:absolute;
}
.top-more-bt a{
padding:20px 50px;
border:2px solid #000;
box-sizing:border-box;
font-size:18px;
font-weight:bold;
width:40%;
text-align:center;
position:relative;
}

/* footer */

footer{
width:100%;
background:#222;
position:relative;
}
.sns-wrapper{
width:1000px;
background-image: linear-gradient( 168deg, #2e007c 20%, #ab2c63 100%);
margin:auto;
display:block;
text-align:center;
padding:30px 0;
border-radius:15px;
position:absolute;
top:-40px;
left:50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%)translateX(-50%);
margin: auto;
}
.sns-wrapper h3{
font-size:24px;
color:#FFF;
display:block;
}
.sns-wrapper ul{
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
margin-top:30px;
}
.sns-wrapper ul li{
margin:10px;
background:#FFF;
border-radius:50px;
width:25%;
position:relative;
}
.sns-wrapper ul li a{
display:block;
width:100%;
height:100%;
padding:10px;
position:relative;
font-weight: bold;
}
.sns-wrapper ul li.follow-t:before{
content:"";
width:50px;
height:50px;
display:block;
background:url(https://koesiru.jp/img/common/icon/sns-t.png) no-repeat center;
background-size:100%;
top:50%;
left:20px;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%)translateX(-50%);
margin: auto;
position:absolute;
}
.sns-wrapper ul li.follow-f:before{
content:"";
width:50px;
height:50px;
display:block;
background:url(https://koesiru.jp/img/common/icon/sns-f.png) no-repeat center;
background-size:100%;
top:50%;
left:20px;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%)translateX(-50%);
margin: auto;
position:absolute;
}
.sns-wrapper ul li.follow-l:before{
content:"";
width:50px;
height:50px;
display:block;
background:url(https://koesiru.jp/img/common/icon/sns-line.png) no-repeat center;
background-size:100%;
top:50%;
left:20px;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%)translateX(-50%);
margin: auto;
position:absolute;
}
.footer-category-list{
display:block;
width:1000px;
padding:70px 0 0;
margin:auto;
}
.footer-category-list img{
width:200px;
text-align:center;
margin:auto;
display:block;
}
.footer-category-list .foot-logo{
text-align:center;
display:block;
margin-top:15px;
color:#FFF;
font-size:18px;
}
ul.footer-category{
display: -webkit-flex;
display: flex;
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
padding:0 50px 20px;
margin:0 auto 50px;
border-bottom:1px solid #FFF;
}
ul.footer-category li{
width:25%;
margin:0 0 5px;
box-sizing:border-box;
}
ul.footer-category li a{
padding:10px;
display:block;
color:#ccc;
font-size:12px;
}
ul.footer-category li a:before{
content:"";
width:6px;
height:6px;
background:#FFF;
display:inline-block;
margin-right:8px;
border-radius:50px;
vertical-align:middle;
}

ul.footer-link{
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
padding-top:20px;
margin-top:20px;
}
ul.footer-link li{
margin:0 0 5px;
text-align:center;
}
ul.footer-link li a{
padding:10px 20px;
display:block;
color:#ccc;
font-size:14px;
}

.copyright-txt{
background:#FFF;
text-align:center;
font-size:11px;
padding:10px;
color:#888;
margin-top:20px;
}

/*  ↓sp　*/

@media only screen and (orientation:landscape) and (max-width : 813px),(orientation:portrait) and (max-width : 753px){

/*  共通CSS　*/

#top-newkuchi h2,
#top-ranking h2,
#top-category-all h2,
#top-qlist h2,
#top-influencer-list h2{
text-align:center;
font-size:24px;
position: relative;
margin:auto;
padding: 15px;
width: 90%;
background-color:#fdfdfd;
box-sizing: border-box;
font-weight: bold;
}
#top-qlist h2{
width: 90%;
}

/* header */
header#top-header .h1-wrap {
width:auto;
padding: 20px 10px;
text-align: left;
margin: 0 auto;
}
header#top-header .h1-wrap a{
width:120px;
}
header#top-header .h1-wrap span{
display:block;
font-size:11px;
margin-top:6px;
color:#d4d4d4;
}
header#top-header .hed-main-box{
position:absolute;
top:24vh;
left:0;
right:0;
bottom:0;
margin:auto;
text-align:center;
}

header#top-header{
height:75vh;
background: url(https://koesiru.jp/img/common/design/000.jpg)no-repeat;
background-size: cover;
background-position:60%;
position: relative;
overflow: hidden;
}


/*  topform　*/

.hed-main-box form{
width:90%;
}
.hed-main-box form input:focus {
background: #ffffff!important;
}
.hed-main-box form #search-form-box {
border:1px solid #FFF;
padding: 10px 85px 10px 10px;
background: none;
width:100%;
line-height: 26px;
background: #ccc;
border-radius: 6px;
outline: none;
}
.hed-main-box form .css-button {
border: none;
background: #2d2d2d;
display: inline-block;
padding: 0 20px;
line-height: 35px;
color: #fff;
font-size: 12px;
cursor: pointer;
position:absolute;
right:-15px;
top:50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%)translateX(-50%);
margin: auto;
}

/* top-main */

#top-main{
width:100%;
position:relative;
margin-top:-200px;
padding:0 10px;
box-sizing:border-box;
}

/* influencer */
#top-influencer-list{
width:100%;
margin:80px auto;
display:block;
}
.influencer-list-in{
margin:40px 0;
}
.influencer-list-in p{
margin:0 0 20px;
text-align:left;
line-height:normal
}
.influencer-list-in ul li{
width:46.8%;
}

/* top-category */

#top-category{
width: 100%;
}
#top-category h2{
padding:15px 0;
font-size:16px;
border-radius:20px 20px 0 0;
}
#top-category h2 span:nth-of-type(1){
padding:0 5px 2px;
margin:0 5px;
}
#top-category h2 span:nth-of-type(2){
font-size:11px;
margin:12px 5px 0;
}
#top-category ul{
padding:10px;
}
#top-category li{
width:33%;
margin:5px 0;
text-align:center;
}
#top-category li img{
width:25px;
margin:10px auto;
display:block;
}
#top-category li a span{
display:block;
width:100%;
font-size:12px;
}
#top-category li a{
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
padding:10px 0;
}
.scroll-more-bt{
margin-top:30px;
}
.scroll-more-bt a:before{
width:9px;
height:70px;
}
.scroll-more-bt a{
padding:10px;
font-size:16px;
width:90%;
color: #444;
}

/* new */

#top-newkuchi{
margin-top:80px;
}
.new-wrapper{
width:100%;
/*background:#ccc;*/
display:block;
margin:30px auto;
padding:5px;
border-radius:10px;
border: #ccc solid 5px;
}
.new-in{
background:#FFF;
display:block;
margin:auto;
padding:10px;
border-radius:10px;
}
.hyouka-top{
border-bottom:1px solid #ccc;
padding:0 0 10px; 0;
margin-bottom:20px;
}
.hyouka-top dl{
display: -webkit-flex;
display: flex;
}
.hyouka-top dl dt{
margin-right:10px;
}
.hyouka-top dl dt img{
width:50px;
}
.hyouka-top dl dd{
display: -webkit-flex;
display: flex;
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
width:100%;
position:relative;
padding-bottom:54px;
}
.hyouka-top dl dd a.hyouka-cateIcon{
width:100%;
font-size:11px;
}
.hyouka-top dl dd a.hyouka-cateIcon img{
width:16px;
vertical-align:middle;
}
.hyouka-top dl dd a.hyouka-cateIcon span{
vertical-align:middle;
margin:0 0 0 2px;;
}
.hyouka-top dl dd h3{
width:100%;
font-size:18px;
padding:5px 0;
font-weight: bold;
display:block;
margin-bottom:25px;
}
.hyouka-top dl dd ul{
display: -webkit-flex;
display: flex;
justify-content:flex-start;
align-items:flex-end;
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
position:absolute;
width:auto;
bottom:0;
left:-50px;
}


.hyouka-top dl dd ul li:nth-of-type(1){
width:40%;
font-size:20px;
font-weight:bold;
box-sizing:border-box;
min-width: auto;
}
.hyouka-top dl dd ul li img{
width:80px;
margin-right:5px;
}
.hyouka-top dl dd ul li:nth-of-type(2){
width:55%;
margin:0 5px 0 5px;
color:#999;
font-size:13px;
box-sizing:border-box;
min-width: auto;
}
.hyouka-top dl dd ul li:nth-of-type(2) img{
width:70px;
margin:0 5px;
}
.hyouka-top dl dd ul li:nth-of-type(3){
width:auto;
margin:8px 5px 5px 0;
padding-bottom:2px;
border-bottom:1px solid #1a78a5;
color:#1a78a5;
font-size:12px;
}
.hyouka-top dl dd ul li:nth-of-type(3) a{
color:#1a78a5;
}
.hyouka-top dl dd ul li:nth-of-type(3):first-letter{
font-size:10px;
vertical-align:middle;
margin-right:5px;
}
.hyouka-top dl dd ul li:nth-of-type(4){
margin:0 0 0 2px;
font-size:12px;
width:40%;
min-width: auto;
}
.hyouka-top dl dd ul li:nth-of-type(4) a{
padding:1px 10px;
margin:0 5px;
background:#222;
border-radius:50px;
color:#FFF;
}


.hyouka-main{
display: -webkit-flex;
display: flex;
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
align-items:center;
}
.hyouka-main img.radarChart{
width:90%;
height:auto;
display:block;
margin:0px auto 20px;
}
.hyouka-box{
width:100%;
}
.hyouka-box-in {
width:100%;
box-shadow: 0 0 0 2px #dde4e6;
border-radius:10px;
padding:10px;
margin:10px 0;
box-sizing:border-box;
}
.hyouka-box-in:first-of-type {
margin:0 0 20px;
}
.hyouka-box-in:last-of-type {
margin:10px 0 0;
}
.hyouka-box .hyouka-box-name{
width:100%;
display: -webkit-flex;
display: flex;
align-items:center;
margin-bottom:10px;
}
.hyouka-box .hyouka-box-name dt{
margin-right:10px;
}
.hyouka-box .hyouka-box-name dt img{
width:30px;
vertical-align:middle;
}
.hyouka-box .hyouka-box-name dd p{
font-size:11px;
color:#555;
line-height: 1.3;
}
.hyouka-box .hyouka-box-name dd p span{
font-size:11px;
color:#888;
}
.hyouka-box .hyouka-box-name dd .hyouka-hoshi{
margin-top:5px;
font-size:18px;
font-weight:bold;
}
.hyouka-box .hyouka-box-name dd .hyouka-hoshi img{
width:80px;
margin-right:10px;
}
.hyouka-good{
margin:15px 0 0;
}
.hyouka-good dt{
font-size:14px;
font-weight:bold;
margin-bottom:10px;
background:url(https://koesiru.jp/img/common/icon/icon-maru.png) no-repeat;
background-position:0 center;
background-size:14px;
padding-left:20px;
color:#555;
}
.hyouka-good dt span{
font-size:14px;
font-weight:bold;
margin-bottom:5px;
color:#ff92be;
}
.hyouka-good dd{
font-size:12px;
line-height:1.4;
color:#555;
}
.hyouka-good dt span:first-of-type,.hyouka-bad dt span:first-of-type {
width:15%;
}
.hyouka-good dt span:last-of-type,.hyouka-bad dt span:last-of-type {
font-size: 14px;
font-weight: bold;
margin-bottom: 5px;
color: #555;
width:80%;
}
.hyouka-good dt,.hyouka-bad dt{
display: -webkit-flex;
display: flex;
}
.hyouka-bad{
margin:15px 0 0;
}
.hyouka-bad dt{
font-size:14px;
font-weight:bold;
margin-bottom:10px;
background:url(https://koesiru.jp/img/common/icon/icon-batu.png) no-repeat;
background-position:0 center;
background-size:14px;
padding-left:20px;
color:#555;
}
.hyouka-bad dt span{
font-size:14px;
font-weight:bold;
margin-bottom:5px;
color:#4e6275;
}
.hyouka-bad dd{
font-size:12px;
line-height:1.4;
color:#555;
}
.new-wrapper .slick-prev,.new-wrapper .slick-next{
width:45px;
height:45px;
top: 43%;
}
.new-wrapper .slick-prev{
left:-10px;
}
.new-wrapper .slick-next{
right:-10px;
}
.new-wrapper .slick-prev:before,.new-wrapper .slick-next:before{
width:45px;
height:45px;
background:#bfbfbf url(https://koesiru.jp/img/common/icon/icon-yajiyoko-sp-w.png) no-repeat center / 13px;
border-radius: 50%;
}
.new-wrapper .slick-dots{
bottom: -30px;
}
.new-wrapper .slick-dots li{
width: 18px;
height: 18px;
margin: 0 10px;
}
.new-wrapper .slick-dots li button{
width:18px;
height:18px;
}
.new-wrapper .slick-dots li button:before{
font-size: 18px;
}


/* ranking */
#top-ranking{
width:100%;
margin:80px auto;
}
.top-ranking-in.tab-container .tab{
width: 100%;
box-sizing: border-box;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
}
.top-ranking-in.tab-container .tab span{
display: inline-block;
cursor:pointer;
width: 50%;
color: #fff;
text-align: center;
background: #b7b7b7;
line-height: 36px;
}
.top-ranking-in.tab-container .tab .active{background: #2d2d2d;}
.top-ranking-in.tab-container .tab-contents{
border-top: 3px solid #2d2d2d;
}
.top-ranking-in{
display: -webkit-flex;
display: flex;
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
margin-top:50px;
}
.top-ranking-in article a:after{
width: 24px;
height: 24px;
line-height: 22px;
font-size: 14px;
top: 5px;
left: -6px;
}

.yokumi-in{
margin-right:0px;
width:100%;
}
.yokumi-in h3{
text-align:center;
background:#222;
color:#FFF;
height:50px;
line-height:50px;
font-size:18px;
}
.yokumi-in article{
margin:5px 0;
padding: 0 0 5px;
border-bottom:1px solid #ccc;
}
.yokumi-in article a{
display: -webkit-flex;
display: flex;
position:relative;
padding: 10px 0;
}
.yokumi-in article a:before{
content:"";
width:7px;
height:30px;
display:block;
background:url(https://koesiru.jp/img/common/icon/icon-yajiyoko-sp.png) no-repeat center;
background-size:100%;
top:50%;
right:0px;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%)translateX(-50%);
margin: auto;
position:absolute;
}
.yokumi-in article p a:before{
display: none;
}
.yokumi-in article img{
width: 120px;
height:80px;
object-fit: contain;
}
.yokumi-in article dl{
padding:0 20px 0 10px;
width:66%;
}
.yokumi-in article dl dt{
font-size:14px;
font-weight:bold;
margin-bottom:5px;
line-height: 1.2;
}
.yokumi-in article dl dd{
font-size:12px;
line-height:1.2;
color:#555;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}

.toukou-in{
margin-left:0px;
width:100%;
}
.toukou-in h3{
text-align:center;
background:#222;
color:#FFF;
height:50px;
line-height:50px;
font-size:18px;
}
.toukou-in article{
margin:5px 0;
padding: 0 0 5px;
border-bottom:1px solid #ccc;
}
.toukou-in article a{
display: -webkit-flex;
display: flex;
position:relative;
padding: 10px 0;
}
.toukou-in article a:before{
content:"";
width:7px;
height:30px;
display:block;
background:url(https://koesiru.jp/img/common/icon/icon-yajiyoko-sp.png) no-repeat center;
background-size:100%;
top:50%;
right:0px;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%)translateX(-50%);
margin: auto;
position:absolute;
}
.toukou-in article p a:before{
display: none;
}
.toukou-in article img{
width:120px;
object-fit: contain;
height:80px;
}
.toukou-in article dl{
padding:0 20px 0 10px;
}
.toukou-in article dl dt{
font-size:14px;
font-weight:bold;
margin-bottom:5px;
line-height: 1.2;
}
.toukou-in article dl dd{
font-size:12px;
line-height:1.2;
color:#555;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
/* top-category-all */
#top-category-all{
width:100%;
margin:80px auto;
}
.category-all-in{
margin-top:50px;
}
.category-all-in ul{
display: -webkit-flex;
display: flex;
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
justify-content: center;
align-items: center;
}
.category-all-in ul li{
width:100%;
text-align:center;
margin:0px;
position:relative;
}
.category-all-in ul li a{
display:block;
padding:25px 10px 25px 70px;
border:0;
border-top:2px solid #ccc;
box-sizing:border-box;
position:relative;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
justify-content:flex-start;
align-items:center;
height:auto;
}
.category-all-in ul li:last-of-type a{
border-bottom:2px solid #ccc;
}
.category-all-in ul li a:before{
content:"";
width:7px;
height:30px;
display:block;
background:url(https://koesiru.jp/img/common/icon/icon-yajiyoko-sp.png) no-repeat center;
background-size:100%;
top:50%;
right:0px;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%)translateX(-50%);
margin: auto;
position:absolute;
}
.category-all-in ul li a br{
display: none;
}
.category-all-in ul li img{
width:auto;
height:50px;
display:block;
margin:auto;
position:absolute;
top:50%;
left:30px;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%)translateX(-50%);
}
.category-all-in ul li span{
margin:0 0 10px;
font-weight:bold;
text-align:left;
}
.category-all-in ul li span:last-of-type{
margin:0;
display:block;
font-size:12px;
color:#888;
font-weight:normal;
line-height:1.6;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp:2;
padding-right:15px;
}


/* top-qlist */

#top-qlist{
width:100%;
margin:80px auto 0;
}
.qlist-in{
margin:30px 0;
}

.qlist-in li{
display:block;
margin:10px 0;
position:relative;
}
.qlist-in li:before{
content:"";
width:20px;
height:100%;
display:block;
background:url(https://koesiru.jp/img/common/icon/icon-q.png) no-repeat center;
background-size:100%;
top:0;
left:20px;
position:absolute;
}
.qlist-in li a{
display:block;
background:#f2f2f2;
padding:10px 70px 10px 60px;
font-size:16px;
font-weight:bold;
border-radius:6px;
line-height:1.2;
color: #444;
}
.qlist-in li .sandou{
position:absolute;
display:block;
top:50%;
right:-20px;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%)translateX(-50%);
margin: auto;
text-align:center;
background:#ff3171;
color:#FFF;
padding:5px;
line-height:1.1;
border-radius:5px;
height:40px;
width:50px;
font-size:14px;
}
.qlist-in li .sandou span{
display:block;
color:#FFF;
}
.qlist-in li .bosyuchu{
position:absolute;
display:block;
top:50%;
right:-20px;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%)translateX(-50%);
margin: auto;
text-align:center;
background:#fa0;
color:#FFF;
padding:5px;
line-height:1.3;
border-radius:5px;
height:40px;
width:50px;
font-size:12px;
}
.qlist-in li .bosyuchu span{
display:block;
color:#FFF;
}

.top-more-bt{
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
}
.top-more-bt a:before{
content:"";
width:70px;
height:100%;
display:block;
background:url(https://koesiru.jp/img/common/design/more-yoko.png) no-repeat center;
background-size:100%;
bottom:-5px;
right:-20px;
position:absolute;
}
.top-more-bt a{
border:2px solid #000;
box-sizing:border-box;
font-weight:bold;
text-align:center;
position:relative;
padding:10px;
font-size:16px;
width:90%;
color: #444;
}

/* footer */

footer{
width:100%;
background:#222;
position:relative;
}
.sns-wrapper{
width:95%;
background-image: linear-gradient( 168deg, #2e007c 20%, #ab2c63 100%);
margin:auto;
display:block;
text-align:center;
padding:20px 0;
border-radius:15px;
position:absolute;
top:-30px;
left:50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%)translateX(-50%);
margin: auto;
}
.sns-wrapper h3{
font-size:24px;
color:#FFF;
display:block;
}
.sns-wrapper ul{
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
margin-top:20px;
padding:0 10px;
}
.sns-wrapper ul li{
margin:5px;
background:#FFF;
border-radius:50px;
width:30%;
position:relative;
font-size:12px;

}
.sns-wrapper ul li a{
display:block;
width:100%;
height:100%;
padding:8px 3px 8px 17px;
position:relative;
color: #444;
}
.sns-wrapper ul li.follow-t:before{
content:"";
width:36px;
height:36px;
display:block;
background:url(https://koesiru.jp/img/common/icon/sns-t.png) no-repeat center;
background-size:100%;
top:50%;
left:10px;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%)translateX(-50%);
margin: auto;
position:absolute;
}
.sns-wrapper ul li.follow-f:before{
content:"";
width:36px;
height:36px;
display:block;
background:url(https://koesiru.jp/img/common/icon/sns-f.png) no-repeat center;
background-size:100%;
top:50%;
left:10px;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%)translateX(-50%);
margin: auto;
position:absolute;
}
.sns-wrapper ul li.follow-l:before{
content:"";
width:36px;
height:36px;
display:block;
background:url(https://koesiru.jp/img/common/icon/sns-line.png) no-repeat center;
background-size:100%;
top:50%;
left:10px;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%)translateX(-50%);
margin: auto;
position:absolute;
}
.footer-category-list{
display:block;
width:100%;
padding:50px 0 0;
margin:auto;
margin-top:60px;
}
.footer-category-list img{
width:150px;
text-align:center;
margin:auto;
display:block;
}
.footer-category-list .foot-logo{
text-align:center;
display:block;
margin-top:15px;
color:#FFF;
font-size:18px;
}
ul.footer-category{
display: -webkit-flex;
display: flex;
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding:0 10px 20px;
margin:0 auto 40px;
border-bottom:1px solid #FFF;
}
ul.footer-category li{
width:50%;
margin:0 0 5px;
box-sizing:border-box;
}
ul.footer-category li a{
padding:6px 0;
margin:2px 5px;
display:block;
color:#ccc;
font-size:11px;
text-align:center;
border:1px solid #444;
border-radius:3px;
}
ul.footer-category li a:before{
display:none;
}
ul.footer-link{
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
padding-top:20px;
margin-top:20px;
}
ul.footer-link li{
margin:0 0 5px;
text-align:center;
width:50%;
}
ul.footer-link li a{
padding:10px 20px;
display:block;
color:#ccc;
font-size:14px;
}

.copyright-txt{
background:#FFF;
text-align:center;
font-size:11px;
padding:10px;
color:#888;
margin-top:20px;
}
}

/*------------
共通
--------------*/

#top-main .sns-copytxt{
display:none;
}


.cv-btn-wrap {
    margin-top: 20px;
    text-align: center;
}
.cv-btn-wrap .bannar-wrap {
    margin-bottom: 10px;
}
.cv-btn-wrap .cv-btn {
    background: #ee6464;
    color: #fff;
    display: inline-block;
    min-width: 300px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.4;
    padding: 10px;
    text-align: center;
    margin: 0 auto;
    box-shadow: -2px 2px 0 1px #d45d5d;
    border-radius: 8px;
}
@media only screen and (orientation: landscape) and (max-width: 813px), (orientation: portrait) and (max-width: 753px)
.cv-btn-wrap .cv-btn {
    font-size: 16px;
    min-width: 78%;
}

/*------------------------------------------------------------
フッター SNSボタン調整
-------------------------------------------------------------*/
@media screen and (max-width : 376px){
.sns-wrapper ul li{
font-size: 11px;
}
.sns-wrapper ul li.follow-t:before,.sns-wrapper ul li.follow-f:before,.sns-wrapper ul li.follow-l:before{
width: 34px;
height: 34px;
}
}

@media screen and (max-width : 361px){
.sns-wrapper ul li.follow-f a{
padding-right: 0;
}
}