@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.2
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.content {
    margin-top: 0px;
}
.navi-in > ul li {
    height: auto;
    line-height: 1.4em;
    padding: 10px 0;
}
.item-label {
    font-size: 14px;
}
div#toc {
    background: #fffcf2;
}
i.fas.fa-chevron-right {
    margin-right: 5px;
}
figcaption {
    text-align: center;
}
.blogcard-type .blogcard-label{
  background-color:#ff8c00;
}
.article h2 {
    padding: 12px;
}
.sidebar h3 {
    padding: 6px 10px;
}

.widgets-navi ul {
    padding-left: 0;
}
.widgets-navi ul li {
    padding: 10px;
    text-align: center;
    border: solid 1px #468200;
    margin: 5px 0;
    list-style: none;
    background: #8bc34a;
    font-size: 14px;
    font-weight: bold;
}
.widgets-navi ul li:hover{
	text-decoration: none;
    color: #fff;
    opacity: 0.9; 
	-webkit-transform: translateY(3px);
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
	background: #a1dd5b;
	

}
.widgets-navi ul li a {
    color: #fff;
    text-decoration: none;
}

/*ボタン*/
.btn-text {
    text-align: center;
    margin-bottom: -25px;
    font-size: 0.9em;
    color: red;
    font-weight: bold;
}
.btn-main {
    display: block;
    position: relative;
    width: 80%;/*ボタンの幅*/
    padding: 10px 0;
    margin: 30px auto;
    background-color: #2bb24c;/*ボタンの色*/
    box-shadow: 0 5px 0 0 #1f8237;/*影の色(rgbaの値を変更)*/
    border-radius: 5px;
    font-weight: bold;
    font-size: 18px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
}
.btn-main:hover {
    text-decoration: none;
    color: #fff;
    opacity: 0.9; 
	-webkit-transform: translateY(3px);
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    box-shadow: 0 1px 0 #1f8237;
}
.btn-main::before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: btn-main 3s ease-in-out infinite;
}
@-webkit-keyframes btn-main {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
.btn-bottom {
    text-align: center;
    margin-top: -20px;
    font-size: 0.85em;
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	.btn-main {
		font-size: 0.9em;
		}
}