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

/************************************
** 子テーマ用のスタイルを書く
*/


/*保護マーク非表示*/
.grecaptcha-badge { visibility: hidden; 
}

/* 固定ページの不要情報を非表示 */

.page .date-tags, /*投稿日・更新日*/
.page .author-info{ /*投稿者情報*/
display: none;
}

/* カテゴリーごとの不要情報を非表示 */
.categoryid-3 .date-tags,
.categoryid-3 .author-info{
display: none;
}

/* カテゴリータイトル非表示 */
.entry-title, .archive-title {
    display: none;
}


#main {
  border: 4px solid #000;
  border-radius: 30px;
}




#footer {
	border-top: 4px  solid #000;
	border-bottom: 4px  solid #000;
}

.footer-bottom{
	font-size: 20px;
	margin-bottom: 20px;
}

.article h2 {
  position: relative;
  padding: 1rem 2rem calc(1rem + 10px);
  background: #fff100;
  border: 0px;
}

.article h2:before {
  position: absolute;
  top: -12px;
  left: -12px;
  width: 100%;
  height: 100%;
  content: '';
  border: 4px solid #000;
}

.article h4 {
  position: relative;
  padding: 1rem 2rem calc(1rem + 10px);
  background: #fff100;
  border: 0px;
}

.article h4:before {
  position: absolute;
  top: -12px;
  left: -12px;
  width: 100%;
  height: 100%;
  content: '';
  border: 4px solid #000;
}


/* タイトルを非表示 */
.page .entry-title{
  display: none;
}

/*グローバルメニューのフォントサイズ等変更*/
.navi-in .menu-header .item-label{
font-size: 19px;
color: #000;
}

/*マウスオーバーでアンダーライン*/
#navi .navi-in a:after{
position: absolute;/*線の位置を絶対配置に*/
content: "";/*文字はなし*/
left: 10px;/*線の位置*/
bottom: 7px;/*線の位置*/
height: 5px;/*線の高さ*/
width: 84%;/*線の幅*/
background:yellow;/*線の色*/
transform: scale(0,1);/*マウスオーバーの前は線を消す*/
transition: 0s;/*線が0→100%になるまでの秒数*/
transform-origin: left;
}

#navi .navi-in a:hover:after{
transform: scale(1);/*マウスオーバー後、線を100%出す*/
}

/*区切り線*/
hr {
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.wp-block-separator　{
  border: 4px solid #000;
}

.article h5 {
    border-bottom: 4px solid #000;
}

/*記事一覧*/
.ecb-entry-border .entry-card-wrap {
 border: 2px solid #000;
}

.entry-card-title, .related-entry-card-title {
	font-size : 20px;
	margin-bottom: 20px;
}

.entry-title, .archive-title {
	font-size: 40px;
}

/*記事一覧のカテゴリーの表示をカスタマイズ*/

.cat-label {
    top: 0.5em; /*上からの距離*/
    left: 0.5em; /*左からの距離*/
    border: none; /*ボーダーを消す*/
    font-size: 12px; /*文字サイズ*/
    color: #fff; /*文字色*/
    background-color: #000; /*背景色*/
    padding: 1px 10px; /*余白*/
    border-radius: 14px; /*角を丸く*/
}




/*タイトルのデザインを修正*/

.entry-card-title {
    margin-top: 10px; /*上に余白を付ける*/
    line-height: 1.5; /*行間を広く*/
}
}
@media screen and (max-width: 768px){
    .entry-card-title {
        font-size: 14px; /*スマホでの文字の大きさ*/
        line-height: 1.4; /*スマホでの行間*/
    }
}

/*モバイルメニュー*/
.menu-drawer a {
    font-weight: 800;
    padding: 15px;

}

.slicknav_menu {
    background-color: #ebebeb;
    background-image:
    repeating-linear-gradient(-45deg,#fff, #fff 7px,transparent 0, transparent 14px);
}

.slicknav_nav a {
	color: #000;align-content
}

.navi-menu-content {
    background-color: #ebebeb;
    background-image:
    repeating-linear-gradient(-45deg,#fff, #fff 7px,transparent 0, transparent 14px);
}

************************************/
/*必要ならばここにコードを書く*/



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

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

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