@charset "UTF-8";

a:hover{opacity:.75;}

.logo {max-width: 300px;margin: 0 auto;}

.gnav_menu{
  /* font-weight:bold; */
  text-align: center;
  /* background:#2d2d2d; */
  margin-top: 20px;
  /* border: 1px solid gray; */
}

#topNav .sp {
  display: none;
}

#topNav .nav-item a{
  width: 100%;

}
.dropdown{
  position: relative;
}
.dropdown-content{
  display: none;
}

.dropdown-content a {
  color: #FFFFFF;
  text-decoration: none;
  padding: 0.4em 0;
  display:block;
  white-space:nowrap;
}

.dropdown-content a + a {
    border-top: 1px solid #2b2b2b;
}

.dropdown-content {
  background: #48484d;
  padding: 0 0.4em;
  position: absolute;
  top: 100%;
  right:0;
  min-width: 100%;
  z-index:1;
}

#topNav.flex {
  display: flex;
  gap: 0;
  justify-content: center;
}

.gnav_menu.fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  margin: 0 auto;
}





.article dd{margin-left:unset;}
aside#related-entries h3 {background: none;text-align: unset;color: unset}
.article h3 {border-left:none !important}
body.site #container h3{color:rgba(255,255,255,.9);font-weight:700;font-size:22px;padding:.5em 0;display:block;text-align:center;border-radius:0}
body.site h3 span{background:0 0!important;border:none!important}
#container #sitemap a,#container p a{color:rgba(255,90,16,1);background:rgba(255,90,16,.16);text-decoration:none;font-weight:700;font-size:1.0em;padding:.4em .7em;margin:0 2px;text-shadow:none}




#container dt h4{font-size:1em!important;margin-bottom:0}
#container dd{border:3px solid rgba(106,156,0,.9);padding: 10px 1em;background:rgba(106,156,0,.3);border-radius:5px;box-shadow:0 1px 5px rgba(0,0,0,.2);width: 100%;}
#container dd .linklist a{display:inline}


.strong{color:rgba(246,20,104,.9);background:rgba(246,20,104,.2);padding:0 .5em;margin:0 3px;font-size:1.3em}
.big .srong{font-size:inherit}
.strong2,.strong3{font-size:1.3em;margin:0 3px;text-shadow:none}
.weak{color:#09C;margin:0 3px;text-shadow:none}
.strong3{color:rgba(106,156,0,1);background:rgba(106,156,0,.2)}
.strong4{color:#000;padding:0 5px;margin:0 3px;text-shadow:none}


#container p.textlink a span{padding:.2em 3em}
#container .buttonArea p.textlink{display:inline-block;float:left;width:50%}
#container .buttonArea p.textlink:nth-of-type(2){width:50%}
#container .buttonArea p.textlink a{padding:.5em 1em;font-size:2em;width:80%}
#container .buttonArea p.textlink:nth-of-type(2) a{padding:.5em;border:6px solid rgba(230,112,20,.9);color:#e67014;background:rgba(250,250,250,.9)}
#container .buttonArea p.textlink:nth-of-type(2) a:hover{color:#fff}
#container .buttonArea p.textlink:nth-of-type(2) a:hover::after{background:rgba(230,122,20,1)}
#container .infobox{min-width:85%;padding:0 1em;display:inline-block;margin-bottom:15px;margin-top:5px;border:3px solid rgba(230,122,20,.8);background:rgba(230,122,20,.1);border-radius:5px;box-shadow:0 1px 5px rgba(0,0,0,.2)}
#container .infobox p{font-size:14px;color:rgba(230,122,20,1)}
#container dl p.check{margin:5px 0}
#container dl p.check a:hover,#container p.check a{color:#F90}
#container dl.orange dt{background:rgba(255,90,16,.9)}
#container dl.orange dd{border-color:rgba(255,90,16,.9)}
#container dl.feature dt{background:rgba(246,20,104,.9);font-size:20px}




#container dl{margin:0 auto 10px;width:100%;min-width:85%;display:block;text-align:left}
#container dl dd::after{content:'';clear:both;height:0;display:block;visibility:hidden}
#container dt{position:relative;top: 1em;display:inline-block;/* left: 5%; */background:rgba(106,156,0,.9);padding: .5em 1.3em;font-size: 18px;color:#fff;margin-bottom:.9em;border-radius:5px 5px 0 0}
#container dl.feature dd{border-color:rgba(246,20,104,.9);background:rgba(246,20,104,.2)}
#container dl.feature dd .strong{background:inherit;padding:0}
#container dl.feature dd .svgicon{margin:0}
#container dl.pink dt{background:rgba(255,57,131,.9)}
#container dl.pink dd{border-color:rgba(255,57,131,.9)}
#container dl.gray dt{background:rgba(102,102,102,.9);font-size:1.6em}
#container p{font-size:15px;margin:10px 0}
#container p.voice{color:rgba(255,255,255,1)!important;background:rgba(106,156,0,1);padding:1em 2em;display:inline-block;margin:5px 20px 5px 0;position:relative;border-radius:5px}
#container p.voice::after{content:'';width:30px;height:30px;background:rgba(106,156,0,1);position:absolute;top:10px;right:-6px;transform:rotate(45deg)}



#container .textlink a,#container .sitebtn{background:linear-gradient(-30deg, #310415, #832246);box-shadow:2px 2px 8px black inset;text-shadow:2px 2px 8px black;color:#ffe8f0;text-align:center;border-radius:1em;border:4px solid #f01365;transition:.2s;display:block;height:unset;line-height:1.4;padding:1em;position:relative;max-width:720px;margin:3em auto;text-decoration: none;}
#container .textlink a:before,#container .sitebtn:before{content:"▼";position:absolute;left:2%;top:50%;transform:translateY(-50%) rotate(-90deg)}
#container .sitebtn>br{display:none}
#container .sitebtn .text{font-size:clamp(20px,3.9vw,30px)}
#container .sitebtn .text>br:first-child,#container .sitebtn .text>br:last-child{display:none}
#container .sitebtn img{display:none}


#container section.box h2{background:rgba(106,156,0,.4);color:rgba(51,204,0,1);font-size:2em;text-align:center;position:relative;display:block;letter-spacing:0;margin:0em 0em 1.5em;padding:.6em;font-weight:700}
section.box h2::after,section.box h2::before,section.box h3::before{content:"";position:absolute;top:95.5%;height:0;width:0;border:10px solid transparent;border-top:10px solid rgba(51,204,0,.2)}

section.box h2::before,section.box h3::before{visibility:hidden;display:none;right:-8px;border-left:10px solid rgba(51,204,0,.2)}
section.box h2::after{left:-5px;border-right:10px solid rgba(51,204,0,.2)}
#container h3 span.rank span{font-size:2em;margin-right:10px;}
#container h3.voiceh3{color:#6bc8f4}
#container h3{font-weight: 700;font-size: 1.4em;border: none;padding: 10px 0;color: #8dff66;border-bottom: 4px solid;line-height: 1.4;}
#container h3 span{}
#container section.box h3.rank{margin-top:50px}

#container section.box h3.blu,#container section.box h3.red,#container section.box h3.yel{margin-top:70px}
#container section.box h3.red{background:rgba(242,31,31,.2);color:rgba(242,31,31,.9)}
#container section.box h3.yel{background:rgba(234,215,9,.2);color:rgba(234,215,9,.9)}
#container section.box h3.blu{background:rgba(0,174,201,.2);color:rgba(0,174,201,.9)}
section.box h3.red::after{left:-5px;border-top:10px solid rgba(242,31,3,.2);border-right:10px solid rgba(242,31,31,.2)}
section.box h3.yel::after{left:-5px;border-top:10px solid rgba(234,215,9,.2);border-right:10px solid rgba(234,215,9,.2)}
section.box h3.blu::after{left:-5px;border-top:10px solid rgba(0,174,201,.2);border-right:10px solid rgba(0,174,201,.2)}


/* author */
#container .author{margin:2em auto 0;border:1px solid #545454;padding:1em;display:flex;align-items:flex-start;gap:1em;max-width:540px;background:#000}
#container .author-img{width:64px;flex-shrink:0;position:relative;display:table-column-group}
#container .author-img p{font-size:11px;text-align:center;background:orange;color:#000;width:100%;margin:4px 0 0}
#container .author-text{font-size:15px}
#container .author-text>a{color:#fff;font-weight:bold}
#container .author-text-detail{font-size:13px;margin:0.5em 0 0;padding:0;overflow:hidden;position:relative}
#container .author-text-detail>input[type="checkbox"]{display:none}
#container .author-text-detail>label{position:absolute;bottom:0;right:0;background:#000;line-height:1;padding:8px 0 0 8px;color:gray;cursor:pointer}
#container .author-text-detail>p{font-size:13px;margin:0;height:56px}
#container .author-text-detail>p>a{font-size:inherit;background:unset;padding:0;margin:0;line-height:unset;color:unset;font-weight:normal;text-decoration:underline}
#container .author-text-detail>input[type="checkbox"]:checked + label{display:none}
#container .author-text-detail>input[type="checkbox"]:checked ~ p{height:auto}

.fv_flex{display:flex;margin:80px auto}
.fv_flex p,.fv_flex table{padding:0;width:50%;}
.fv_flex p a{padding:0!important}
body.fv_flex p a img{width:100%}
.fv_flex table{border:solid 1px gray;color:white;}
.fv_flex table tr{border:solid 1px lightgray}
.fv_flex table th{background: white;color:black;font-size: unset;padding: 0 1em;width: 33%;}

.fv_flex table a{color:blue}


.voices .flex{margin: 10px auto;align-items:center;display: flex;}
.voice_flame{position: relative;background: orange;color:black;border-radius: 10px;padding: 10px;margin-left:10px}
.voices img{width:50px;height:50px}
.voice_flame:after {
content: "";
position: absolute;
top: 50%;
left: -28px;
margin-top: -14px;
border: 14px solid transparent;
border-right: 14px solid orange;
z-index: 1;
}

#main , #sidebar,#header, #footer{background:#0a0a0a;color: white;}
#sidebar a {color:#fff; border-bottom:1px solid #fff;}
#container .sidebar__ranking {text-align:center;}
#container .sidebar__ranking a {text-decoration: none;}
#container .sidebar__ranking a img {vertical-align: bottom;}
#container .sidebar__ranking a p {margin:0;font-size:14px;text-align:center;}
#container .sidebar h3{font-size: 1.2em;padding: 0.2em 0;margin: 0 0 0.4em;background: unset;border-radius: unset;}
.widget h2{text-align: center;background: none;}
.related-entry-card-content{color:#fff;}
.pager-post-navi a.prev-post{color:#fff;}
.pager-post-navi a.next-post{color:#fff;}
table:not(.has-border-color) :where(th, td){
  background-color: #0a0a0a;
}
div#toc li a {
  color: #fff !important;
}

div#list a{color: #fff;}
.page-numbers{color:#fff}
.a-wrap:hover{background:#313232}
.widget_recent_entries ul li a:hover, .widget_categories ul li a:hover, .widget_archive ul li a:hover, .widget_pages ul li a:hover, .widget_meta ul li a:hover, .widget_rss ul li a:hover, .widget_nav_menu ul li a:hover, .widget_block ul li a:hover{background:#313232}

/* section.headertext{margin-bottom:20px} */
section.headertext .inner{/*width:95%;*/padding:2em 0;margin:0 auto}
section.headertext .inner h2{font-size:2em}
.article h2{background: none;}

p.link {text-align: right;font-size: 1.3em!important;}
#header img{width:100%;max-width:1200px;margin:0 auto;display:block}
img {max-width: 100%;height: auto;width: auto;vertical-align: bottom;}
.ranking_buttonSP{display: none;}
.related-entry-card-thumb{width: 150px;}

.flex{display: flex;gap: 14px;}
.footer_link{
  color:#fff;
}

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/


  /* floating-banner */
  .sp-floating-banner {display:none}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*768px以下*/
@media screen and (max-width: 768px){
  /*必要ならばここにコードを書く*/
  .strong,.strong2,.strong3,.weak{font-size:15px}
  #container section.box h2{font-size:1.6em;letter-spacing:0;padding:10px 0}
  section.box h2::after,section.box h2::before,section.box h3::before{border:7px solid transparent;border-top:7px solid rgba(51,204,0,.2)}
  #container .featuretext{font-size:1em}
  #container .big{font-size:1.4em}
  section.box h2::before,section.box h3::before{visibility:hidden;display:none;right:-4px;border-left:7px solid rgba(51,204,0,.2)}
  section.box h2::after{left:-4px;border-right:7px solid rgba(51,204,0,.2)}
  #container section.box h2 span.feature,#container section.box h3 span.feature{padding:.1em;font-size:1.2em}
  #container h3{font-size:14px;padding:10px}
  #container h3.owl_head{font-size:1.2em;margin:10px 0 0 10px;opacity:1;padding:0}
  #container h3.owl_head::after{content:'';clear:both;height:0;display:block;visibility:hidden}
  #container h3 span.rightside{margin-top:10px;margin-right:10px}
  .fv_flex{display:block;margin:80px auto}
  .fv_flex p,.fv_flex table{width:90%;}
  .ranking_buttonSP{display: block;}
  #container dt{font-size: 16px;}
  .gnav_menu.flex {gap:0;}
  .gnav_menu a{width: 23%;/*border: solid 1px gray!important;font-size: 12px;letter-spacing: -.5px;*/}
  #topNav .sp {
    display: block;
  }
  #topNav .pc {
    display: none;
  }
  /* floating-banner */
  .sp-floating-banner {display: block;position: sticky;bottom: 0;background: #2f2f2fa8;padding-right: 48px;}
  .sp-floating-banner a {display: block;margin: 0 auto;width: 100%;}
  
  /* go-to-top botton */
  .go-to-top {right: 8px;bottom: 8px;}
  .go-to-top-button {width: 32px;height: 32px;}
}



.sub_ranking .sub_ranking_box{display: flex; flex-wrap: wrap; justify-content: space-between; }
.sub_ranking .sub_ranking_box .box{width: 49%; background: #133709; border: 3px solid #8dff66; margin: 0 0 20px 0; border-radius: 5px;}
.sub_ranking .title_box{position: relative;}
.sub_ranking .title_box .nm{position: absolute; background: linear-gradient(-30deg, #598103, #8dff66) !important; margin: 0 !important; font-size: 25px !important; padding: 10px 20px; font-weight: bold; border-radius: 0 0 10px 0;}
.sub_ranking .title_box .title{background: #f9eedc; font-size: 20px !important; margin: 0 !important; color: #000; text-align: center; font-weight: bold; padding: 10px 0 5px 0;}
.sub_ranking .cta_box {text-align: center;}
.sub_ranking .cta_box .cta{display: flex; align-items: center; justify-content: center; width: 70%; margin: 10px auto 12px !important; text-align: center; border-radius: 5px; font-weight: bold !important; padding: 10px 0 5px 0 !important; letter-spacing: 1px; box-shadow: 2px 3px 3px 0px rgb(0 0 0 / 30%); color: #ffffff !important; text-decoration: unset !important; transition: all 0.5s ease-in-out;}
.sub_ranking .cta_box .review{background: linear-gradient(-30deg, #224589, #386acc) !important; text-shadow: 2px 2px 0 #274c95, -2px -2px 0 #274c95,-2px 2px 0 #274c95, 2px -2px 0 #274c95,0px 2px 0 #274c95, 0-2px 0 #274c95,-2px 0 0 #274c95, 2px 0 0 #274c95 !important; border: 2px solid #224589;}
.sub_ranking .cta_box .site{background: linear-gradient(-30deg, #c57a04, #fb9900); text-shadow: 2px 2px 0 #b36e01, -2px -2px 0 #b36e01,-2px 2px 0 #b36e01, 2px -2px 0 #b36e01,0px 2px 0 #b36e01, 0-2px 0 #b36e01,-2px 0 0 #b36e01, 2px 0 0 #b36e01 !important; border: 2px solid #b36e01;}
.sub_ranking .cta_box .cta i{transform: translate(20px, -1px);}
.sub_ranking .cta_box .cta:hover{opacity: unset !important; transform: translate(2px, 2px);}

.textlink_box{display: flex; justify-content: center;}
.textlink_box .textlink{margin: 10px 5px !important; width: 95%;}
.textlink_box .textlink a:before{left: 5%;}
.textlink_box .outerlink a{background: linear-gradient(-30deg, #598103, #6a9c00) !important ; border: 4px solid #8dff66 !important ;}

.add_contents ul{background: linear-gradient(-30deg, #310415, #832246); box-shadow: 2px 2px 8px black inset; text-shadow: 2px 2px 8px black; border-radius: 1em; border: 4px solid #f01365; padding: 1em 1em 1em 2em; margin: 1em auto; text-decoration: none; font-size: 16px;}
@media screen and (max-width: 835px){
.sub_ranking .sub_ranking_box{justify-content: center;}
.sub_ranking .sub_ranking_box .box{width: 95%;}
}

@media screen and (max-width: 768px){
.textlink_box{flex-direction: column;}
.textlink_box .textlink a{margin: 0 !important;}
.textlink_box .outerlink a{margin: 10px 0 0 0 !important;}
.add_contents ul{font-size: 14px;}
}

.eye-catch{width: 100%;}
.eye-catch img{width: 100%;}