@charset utf-8;
/*
Theme Name: unigacha-media
Theme URI: https://www.media.unigacha.jp/
Description: This is my theme.
*/
/* CSS Document */

/*
########################################################################
 common
########################################################################
*/
.inner {width: 1050px; margin-left: auto; margin-right: auto;}
section {margin-bottom: 40px;}
section h3 {font-size: 18px;margin-bottom: 15px;}
#cover dl dt img,.entry dt img,.banner img,blockquote {border-radius: 9px;-webkit-border-radius: 9px;-moz-border-radius: 9px;}

/*
#################################################
 header
#################################################
*/
header {height: 70px;border-bottom: 1px solid #E0E0E0;}
header #header_logo {float: left;margin-top: 8px;}
header #header_logo img {width: 147px; height: auto;} 

/*
###############################
 nav_area
###############################
*/
.nav-area li {
  display: inline-block;
  align-items: center;
  font-size: 13px;
  padding: 10px;
  margin: 0 5px 15px 0;
  font-weight: 700;
  background: #fff;
  border-radius: 9px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

/*
##########################################
  #searchbox
##########################################
*/
#searchbox {float: right; margin-top: 15px;}
.search_container{
  box-sizing: border-box;
  position: relative;
  border: 1px solid #E0E0E0;
  display: block;
  padding: 3px 10px;
  border-radius: 5px;
  height: 40px;
  width: 300px;
  overflow: hidden;
}
.search_container input[type="text"]{border: none;height: 34px;font-size: 14px;width: 75%;}
.search_container input[type="text"]:focus {outline: 0;}
.search_container input[type="submit"]{
  cursor: pointer;
  font-family: FontAwesome;
  border: none;
  background: #e60b11;
  color: #fff;
  position: absolute;
  width: 20%;
  height: 41px;
  right:0px;
  top: -3px;
  outline : none;
}
/*
###############################
  #ranking
###############################
*/
#ranking {counter-reset: wpp-ranking;}
#ranking dl {position: relative;}
#ranking dl dt:before {
    color: #FFF;
    content: counter(wpp-ranking, decimal);
    counter-increment: wpp-ranking;
    text-align: center;
    opacity: 0.999;
    line-height: 20px;
    width: 20px;
    height: 20px;
    background-color: #e60b11;
    font-size: 10px;
    position: absolute;
    left: -6px;
    top: 6px;
    font-weight: bold;
    z-index: 10000;
}

/*
########################################################################
 contents
########################################################################
*/
#contents {padding-top: 0px;padding-bottom: 50px;}
.passnav {font-size: 11px;padding-top: 5px;padding-bottom: 5px;}
.passnav a {color: #0366d6;}

/*
###############################
 category_area
###############################
*/
#category_area {margin-bottom: 40px; padding-top: 40px;padding-bottom: 40px;background-color: #F6F6F6;}
#category_area h2 {font-size: 28px;margin-bottom: 10px;}
#category_area .disc {font-size: 14px;margin-bottom:20px;} 

/*
###############################################
 main
###############################################
*/
#main {width: 725px;float: left;margin-right: 25px;}
/*
#############################
  entry
#############################
*/
.entry dl {padding-top: 15px;padding-bottom: 15px;padding-right: 15px;}
.entry dt {float: left;width: 200px;margin-right: 15px;}
.entry dt img {width:200px; height:auto;}
.entry .category {font-size: 10px;color: #E8452F;;padding-bottom: 5px;}
.entry .title {font-size: 18px; font-weight: bold;padding-bottom: 5px;}
.entry .disc {font-size: 10px;padding-bottom: 5px;color: #686868;}

#sub .entry dl {padding-bottom: 10px;padding-right: 10px;}
#sub .entry dt {width: 120px;margin-right: 10px;}
#sub .entry dt img {width:120px; height:auto;}
#sub .entry .category {font-size: 10px;}
#sub .entry .title {font-size: 12px;}

/*
#############################
  page^sent
#############################
*/
.wp-pagenavi {text-align: center;vertical-align: middle;font-size: 80%;min-height: 36px;margin-top: 20px;margin-bottom: 20px;position: relative;}
.wp-pagenavi .previouspostslink, .wp-pagenavi .nextpostslink {position: absolute;top: 0;padding: 0 16px;}
.wp-pagenavi .previouspostslink {left: 3%;}
.wp-pagenavi .nextpostslink {right: 3%;}
.wp-pagenavi span.pages {position: absolute;width: 20%;left: 40%;top: 7px;font-weight: bold;font-size: 16px;}
.wp-pagenavi .previouspostslink, .wp-pagenavi .nextpostslink {background-color: #e60b11;color: #fff;width: auto;display: block;border: none;line-height:36px;-webkit-border-radius: 5px;font-weight: normal;font-size: 12px;}
/*
###############################################
 sub
###############################################
*/
#sub {width: 300px;float: right;}

/*
###############################
  #ranking
###############################
*/
#ranking {counter-reset: wpp-ranking;}
#ranking dl {position: relative;}
#ranking dl dt:before {
	color:#FFF;
	content: counter(wpp-ranking, decimal);
	counter-increment: wpp-ranking;
	text-align:center;
	opacity:0.999;
	line-height:20px;
	width: 20px;
	height: 20px;
	background-color: #E8452F;
	font-size: 10px;
	position: absolute;
	left: 0px;
	top: 15px;
	font-weight: bold;
	z-index: 10000;	
}
/*
###############################
  .keyword
###############################
*/
.keyword  li {float: left;margin-right: 8px;margin-bottom: 8px;}
.keyword  li a {
	font-weight: bold;
	font-size: 12px;
	display: inline-block;
	border-radius: 9px;
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	border: 1px solid #EFEFEF;
	background-color: #F7F7F7;
	padding-top: 6px;
	padding-right: 12px;
	padding-bottom: 6px;
	padding-left: 12px;	
}
.keyword  li a:hover {text-decoration: none;background-color: #F6F6F6;border: 1px solid #EFEFEF;}
/*
########################################################################
 footer
########################################################################
*/
footer {background-color: #FAFAFA;padding-top: 20px;padding-bottom: 20px;}
footer address {text-align: center;font-size: 10px;}

.toggle {display: none;}
.Label {padding: 0.5em;display: block;font-size: 13px;}
.Label,.content {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
}
.content {margin-bottom:10px;padding:0 10px;}
.content ul li {float: left;margin-right: 15px;margin-bottom: 15px;}
.content ul li a {display: inline-block;font-size: 13px;}
.fixed-banner {
     position: fixed;
     bottom: 10px;
     left: 10px;
     width: 400px;
     text-align: center;
     z-index: 10000;
}
.fixed-banner img {width: 320px;height: auto;}
.fixed-banner button {
     background: none;
     border: none;
     color: #333;
     font-size: 20px;
     cursor: pointer;
	 position: absolute;
	 padding: 4px 5px 4px 4px;
	 background-color: #fff;
}

/*
###############################
 ad
###############################
*/
.ad_list ul {text-align: center;}
.ad_list li {display:inline;}

/*
########################################################################
 only page
########################################################################
*/
/*
###############################
 cover
###############################
*/
#cover {width: 1050px;margin-left: auto;margin-right: auto;margin-top: 20px;margin-bottom: 40px;}
#cover dl {float: left;width: 48%;position: relative;margin-right: 10px;}
#cover dl:hover {filter:alpha(opacity=70);-moz-opacity: 0.7;opacity: 0.7;}
#cover dl dt img {height: auto;width: 100%;}
#cover dl dd {
	position: absolute;
	bottom: 5px;
	color: #FFF;
	padding: 20px;
	font-size: 20px;
	text-shadow:0px 0px 2px #000000;
	font-weight: bold;
}
/*
###############################
  #関連記事
###############################
*/
.introduce {display: none;}
.panel.panel-default ul.list-group{
	border: 1px solid #E7E7E7;
	position:relative;
	margin-bottom: 30px;
	margin-top: 30px;
	text-align: left;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;

}
.panel.panel-default ul.list-group li a {display: inline-block;}
.panel.panel-default ul.list-group li:hover {background-color: #F9F9F9;}
.panel.panel-default ul.list-group p.kanren {display: none;}
.panel.panel-default ul.list-group li p.title {
	font-size: 90%;
	font-weight: 500;
	line-height: 160%;
	width: 550px;
	display: inline-block;
	margin-top: 20px;
	color: #000;
}
.panel.panel-default ul.list-group li p.extracts {
    font-size: 12px;
    display: inline-block;
    line-height: 20px;
	color: #999;
	width: 550px;
}
.panel.panel-default ul.list-group img {
	float: left !important;
	height: 90px !important;
	width: 90px !important;
	margin-right: 15px;
	-webkit-border-top-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	margin-bottom:0px!important;
}
/*
###############################
  #Youtube
###############################
*/
#youtube .yrc-thumb img {-webkit-border-radius: 9px;}
#youtube .yrc-item, .yrc-item a {font-size: 16px;font-weight: bold;}

/*
#########################################################################################################
 mobile
#########################################################################################################
*/
@media screen and (max-width:979px) {	
.pc_only{display: none;}
.entry .disc{display: none;}
#searchbox {display: none;}
.inner {width: 92%; margin-left: auto; margin-right: auto;}
section {margin-bottom: 40px;}
header {height: 50px;border-bottom: 1px solid #ddd;}
header #header_logo {float: none;text-align: center;}
header #header_logo img {width: 150px; height: auto;} 

.nav-header {overflow-x: auto;white-space: nowrap;-webkit-overflow-scrolling: touch;}
.nav-header ul {float:none;}
.nav-header ul li {
	display: inline-block;
	margin-right: 15px;
	margin-left: 0px;
	margin-top:0px;
	font-size: 14px;
	font-weight: 600;
}
#cover {width: 92%;margin-top: 10px;margin-bottom: 20px;}
#cover dl {float: none;width: 100%;margin-bottom: 10px;}	
#contents {padding-bottom: 10px;}	
#main {float:none;width: 100%;}	
#sub {float:none;width: 100%;}	
.passnav {overflow-x: auto;white-space: nowrap;-webkit-overflow-scrolling: touch;}		
#ranking dl dt:before {top: 10px;}
	
/*
#############################
  entry
#############################
*/
.entry dl {padding-top: 10px;padding-bottom: 10px;padding-right: 10px;}
.entry dt {float: left;width: 120px;margin-right: 10px;}
.entry dt img {width:120px; height:auto;}
.entry .category {font-size: 10px;padding-top: 0px;padding-bottom: 0px;}
.entry .title {font-size: 14px; font-weight: bold;}	
#sub .entry .title {font-size: 14px; font-weight: bold;padding-top:10px;}	

/*
#############################
  footer
#############################
*/
.content {overflow: hidden;	height: 0;}
.Label::before{
	content:"";
	width: 6px;
	height: 6px;
	border-top: 2px solid #000;
	border-right: 2px solid #000;
	-webkit-transform: rotate(45deg);
	position: absolute;
	top:calc( 50% - 3px );
	right: 20px;
	transform: rotate(135deg);
}
.toggle:checked + .Label + .content {height: auto;padding:20px ;transition: all .3s;}
.toggle:checked + .Label::before {transform: rotate(-45deg) !important;}
.fixed-banner {bottom: 0;left: 0;width: 100%;}
	
}