@charset "UTF-8";

/*!
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
*/

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

.entry-content img {
	width: 100%;
}
.eye-catch img {
	width: 100%;
}
.eye-catch {
	width: 100%;
}
.archive-title {
	text-align: center;
	padding: 20px 0 30px 0;
}
.page .date-tags,
.page .author-info {
display: none;
}
.navi-footer-in .menu-footer li {
	border-left: none;
	border-right: none;
}
.navi-footer-in .menu-footer li:last-child {
	border-right: none;
}
.navi-footer-in a:hover {
	background-color: #000;
	transition: all 0.3s ease-in-out;
  }
.copyright {
	margin-top: 30px;
}
#sidebar .card-title {
	overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}
.article h2, .sidebar h2 {
	background-color: initial;
	border-top: 1px solid #f2857c;
	border-bottom: 1px solid #f2857c;
	border-right: 1px solid #f2857c;
	border-left: 7px solid #f2857c;
}
.article h3, .sidebar h3 {
	background-color: initial;
	border: 0;
	border-top: 1px solid #69b0ec;
	border-bottom: 1px solid #69b0ec;
	border-left: 1px solid #69b0ec;
}
.article h4, .sidebar h4 {
	background-color: initial;
	border: 0;
	border-top: 1px solid #78a31c;
	border-bottom: 1px solid #78a31c;
}
.article h5, .sidebar h5 {
	background-color: initial;
	border: 0;
	border-bottom: 1px solid;
}
.tagcloud a .tag-caption, .entry-tags a {
   color: #78a31c;
	border-color: #eee;
}
strong {
	background: linear-gradient(transparent 55%, #fff5ac 55%);
   padding-bottom: 3px;
}
.blogcard-date {
	display: none;
}
.official-btn{
background-color: #f2857c;
    border-radius: 3px;
    padding: 15px 20px;
    color: #fff;
    white-space: nowrap;
	text-decoration: none;
}
table tr:nth-of-type(2n+1) {
	background-color: initial;
}
.scrollable-table th {
	background-color: #fef3f2;
}
.article .ranking h2 {
    border-left: none;
    border-top: none;
    border-right: none;
    padding: 0;
}
.article .ranking .no1 h2:before {
    content: url(https://belle-grayhair.info/wp-content/themes/cocoon-child-master/images/no1.png);
    vertical-align: middle;
    padding-right: 20px;
    display: inline-block;
    transform: scale(0.5);
}
.article .ranking .no2 h2:before {
    content: url(https://belle-grayhair.info/wp-content/themes/cocoon-child-master/images/no2.png);
    vertical-align: middle;
    padding-right: 20px;
    display: inline-block;
    transform: scale(0.5);
}
.article .ranking .no3 h2:before {
    content: url(https://belle-grayhair.info/wp-content/themes/cocoon-child-master/images/no3.png);
    vertical-align: middle;
    padding-right: 20px;
    display: inline-block;
    transform: scale(0.5);
}
.article .ranking .no4 h2:before {
    content: url(https://belle-grayhair.info/wp-content/themes/cocoon-child-master/images/no4.png);
    vertical-align: middle;
    padding-right: 20px;
    display: inline-block;
    transform: scale(0.5);
}
.article .ranking .no5 h2:before {
    content: url(https://belle-grayhair.info/wp-content/themes/cocoon-child-master/images/no5.png);
    vertical-align: middle;
    padding-right: 20px;
    display: inline-block;
    transform: scale(0.5);
}
.article .ranking .no6 h2:before {
    content: url(https://belle-grayhair.info/wp-content/themes/cocoon-child-master/images/no6.png);
    vertical-align: middle;
    padding-right: 20px;
    display: inline-block;
    transform: scale(0.5);
}
.article .ranking .no7 h2:before {
    content: url(https://belle-grayhair.info/wp-content/themes/cocoon-child-master/images/no7.png);
    vertical-align: middle;
    padding-right: 20px;
    display: inline-block;
    transform: scale(0.5);
}
.article .ranking .no8 h2:before {
    content: url(https://belle-grayhair.info/wp-content/themes/cocoon-child-master/images/no8.png);
    vertical-align: middle;
    padding-right: 20px;
    display: inline-block;
    transform: scale(0.5);
}
.article .ranking .no9 h2:before {
    content: url(https://belle-grayhair.info/wp-content/themes/cocoon-child-master/images/no9.png);
    vertical-align: middle;
    padding-right: 20px;
    display: inline-block;
    transform: scale(0.5);
}
.article .ranking .no10 h2:before {
    content: url(https://belle-grayhair.info/wp-content/themes/cocoon-child-master/images/no10.png);
    vertical-align: middle;
    padding-right: 20px;
    display: inline-block;
    transform: scale(0.5);
}

.item-no1 h3:before {
content: url(https://belle-grayhair.info/wp-content/themes/cocoon-child-master/images/no1.png);
    vertical-align: middle;
    padding-right: 20px;
    display: inline-block;
    transform: scale(0.5);
}
.item-no2 h3:before {
content: url(https://belle-grayhair.info/wp-content/themes/cocoon-child-master/images/no2.png);
    vertical-align: middle;
    padding-right: 20px;
    display: inline-block;
    transform: scale(0.5);
}
.item-no3 h3:before {
content: url(https://belle-grayhair.info/wp-content/themes/cocoon-child-master/images/no3.png);
    vertical-align: middle;
    padding-right: 20px;
    display: inline-block;
    transform: scale(0.5);
}
.item-no4 h3:before {
content: url(https://belle-grayhair.info/wp-content/themes/cocoon-child-master/images/no4.png);
    vertical-align: middle;
    padding-right: 20px;
    display: inline-block;
    transform: scale(0.5);
}
.item-no5 h3:before {
content: url(https://belle-grayhair.info/wp-content/themes/cocoon-child-master/images/no5.png);
    vertical-align: middle;
    padding-right: 20px;
    display: inline-block;
    transform: scale(0.5);
}
.item-no6 h3:before {
content: url(https://belle-grayhair.info/wp-content/themes/cocoon-child-master/images/no6.png);
    vertical-align: middle;
    padding-right: 20px;
    display: inline-block;
    transform: scale(0.5);
}
.item-no7 h3:before {
content: url(https://belle-grayhair.info/wp-content/themes/cocoon-child-master/images/no7.png);
    vertical-align: middle;
    padding-right: 20px;
    display: inline-block;
    transform: scale(0.5);
}
.item-no8 h3:before {
content: url(https://belle-grayhair.info/wp-content/themes/cocoon-child-master/images/no8.png);
    vertical-align: middle;
    padding-right: 20px;
    display: inline-block;
    transform: scale(0.5);
}
.item-no9 h3:before {
content: url(https://belle-grayhair.info/wp-content/themes/cocoon-child-master/images/no9.png);
    vertical-align: middle;
    padding-right: 20px;
    display: inline-block;
    transform: scale(0.5);
}
.item-no10 h3:before {
content: url(https://belle-grayhair.info/wp-content/themes/cocoon-child-master/images/no10.png);
    vertical-align: middle;
    padding-right: 20px;
    display: inline-block;
    transform: scale(0.5);
}
.marker {
font-weight: bold;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
.mobile-menu-buttons{
background-color: #c7b299;
height:50px;
box-shadow: none;
}
.logo-menu-button img {
scale: 1.5;		
}
.navi-menu-content{
	left: auto;
	right: 0;
	transform: translateX(101%);
	background-color: rgba(255, 255, 255, 0.9);
}
.menu-drawer a{
	padding: 15px;
	border-bottom: 1px solid #ccc;
}
.menu-close-button {
	color: #333;
}
	.entry-content .cf .sec-wrap .rankin .no1 h2:before {
    content: url(https://belle-grayhair.info/wp-content/themes/cocoon-child-master/images/no1.png);
    vertical-align: middle;
    padding-right: 20px;
    display: inline-block;
    transform: scale(0.5);
}
}

/*834px以上*/
@media screen and (min-width: 834px){
    .mtb20 {
        margin: 50px 0 70px 0 !important;
        }    
.anchor-ad {
display: none;
}
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
    .mtb20 {
        margin: 50px 0 80px 0 !important;
        } 
	  	.navi-footer-in .menu-footer {
	flex-flow: column;
	align-items: center;
	}
	.official-btn {
		display: block;
		width: 100%;
	}
.anchor-ad {
display: block;
width: 100%;
    position: fixed;
    bottom: -10px;
    left: 0;
    z-index: 2;
background-color: #fff;
text-align: center;
}
.anchor-ad:before {
    content: "PR";
    font-size: 12px;
    padding: 0 5px;
height: 25px;
    position: absolute;
    top: -25px;
    left: 0;
    border: 1px solid #ccc;
    background-color: #fff;
display: flex;
align-items: center;
z-index: -2;
}
.footer {
padding-bottom: 100px;
}
.go-to-top {
bottom: 170px;
}
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
.go-to-top {
bottom: 150px;
}
}