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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
body {background:transparent;}
.main{background-color:transparent;}
a{color: #01285e;}
.home.page .content {margin-top: 0px;}
.home.page .main {padding: 0px 29px 36px 29px;}
/*フロント固定ページのロゴ、アイキャッチ、メニューを非表示*/
.home.page #header-in, .home.page .eye-catch-wrap, .home.page .navi{display:none;}
/*フロント固定ページのタイトルを非表示*/
.home.page .entry-title{display: none;}
/*フロント固定ページの投稿日を非表示*/
/*フロント固定ページの更新日を非表示*/
.page-id-26 .article-header .date-tags {display: none;}
/*投稿者名を非表示*/
.author-info{display: none;}
/* 固定ページ日付消去 */
.date-tags {display: none;}
/* */
.box-nin {
margin: 20px auto 50px 20px;
padding: 20px;
border: 2px solid #434343;
border-radius:5px;
}
.box-nin-ttl {
position: relative;
left: -40px;
background-color: #efe8e2;
color: #413933;
padding: 0.5em;
margin: 0;
width: 100%;
font-size: 20px;
font-weight: bold;
border-radius:10px;
box-shadow: 5px 4px 4px #d9cfcc;
margin-bottom:10px;
}
/* */
/* h1 */
.article h1.h1t {
position: relative;
padding: 1.5rem .5rem;
text-align: center;
border: 2px solid #000;
background: #efe8e2;
}

.article h1.h1t:before,
.article h1.h1t:after {
position: absolute;
content: '';
}

.article h1.h1t:before {
top: -40px;
left: calc(50% - 43px);
width: 80px;
height: 80px;
border: 2px solid #000;
border-radius: 50%;
background: #efe8e2;
}

.article h1.h1t:after {
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #efe8e2;
}

.article h1.h1t i {
font-size: 30px;
font-size: 3rem;
line-height: 60px;
position: absolute;
z-index: 1;
top: -40px;
left: calc(50% - 40px);
width: 80px;
height: 60px;
text-align: center;
}

.article h1.h1t span {
position: relative;
z-index: 1;
}

/* h2 */
.article h2{font-size: 22px;padding-left:5px;position:relative;}
.article h2:before {font-family: "Font Awesome 5 Free";content: "\f5a7 ";font-size: 1.0em;font-weight: 900;margin-right:8px;}
.article h2::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 8px;
background-image: repeating-linear-gradient(45deg, #bbb 0px, #555 1px, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%);
background-size: 8px 8px;
}
/* h3 */
.article h3:before {font-family: "Font Awesome 5 Free";content: "\f06c ";font-size: 1.0em;font-weight: 900;margin-right:8px;}
.article h3 {font-size: 20px;border:none;background:transparent;border-bottom: solid 3px #ccc;position: relative;padding: 12px 0px;}
.article h3:after {position: absolute;content: " ";display: block;border-bottom: solid 3px #555;bottom: -2px;width: 20%;}
/* */
.hosoku1 {
margin-left: 10px;
padding-left: 10px;
margin-bottom: 15px;
font-size: 0.85em;
border-left: #81b1a7 2px solid;
line-height: 1.2em;
display: block;
}
/* */
/* */
/* */
/* */
/* */
/* */
/* */
/* */
/* */
/* */
/* */
/* */
/************************************
** SNS ボタンをまとめて丸くする
************************************/

/*シェア・フォローボタンの枠組み*/
.sns-share.ss-top .sns-share-buttons,
.sns-share.ss-bottom .sns-share-buttons,
.sns-follow.sf-bottom .sns-follow-buttons,
.sns-follow.sf-widget .sns-follow-buttons {
justify-content: center; /*中央に寄せる*/
flex-wrap: wrap; /*折り返す*/
}

/*シェア・フォローボタンのリンク*/
.sns-share.ss-top .sns-buttons a,
.sns-share.ss-bottom .sns-buttons a,
.sns-follow.sf-bottom .sns-buttons a,
.sns-follow.sf-widget .sns-buttons a {
width: 35px; /*横幅*/
height: 35px; /*高さ*/
margin-right: 4px; /*右側の余白*/
margin-left: 4px; /*左側の余白*/
border-radius: 50%; /*丸み*/
}

/*プロフィールウィジェットのリンク*/
.sns-follow.sf-profile .sns-buttons a {
border-radius: 50%; /*丸み*/
}

/*シェアボタンのアイコン*/
.sns-share.ss-top .sns-buttons a .social-icon,
.sns-share.ss-bottom .sns-buttons a .social-icon {
font-size: 18px; /*アイコンの大きさ*/
}

/*フォローボタンのアイコン*/
.sns-follow.sf-bottom .sns-follow-buttons .follow-button,
.sns-follow.sf-widget .sns-follow-buttons .follow-button {
font-size: 18px; /*アイコンの大きさ*/
}

/*シェアボタンのキャプション*/
.sns-share.ss-top .sns-buttons a .button-caption,
.sns-share.ss-bottom .sns-buttons a .button-caption {
display: none; /*非表示*/
}

/*シェア・フォローボタンのシェア数*/
.sns-share.ss-top .sns-buttons a .share-count,
.sns-share.ss-bottom .sns-buttons a .share-count,
.sns-follow.sf-bottom .sns-buttons a .follow-count,
.sns-follow.sf-widget .sns-buttons a .follow-count {
right: -2px; /*右側からの距離*/
bottom: -2px; /*下側からの距離*/
padding: 2px; /*内側の余白*/
font-size: 10px; /*文字の大きさ*/
border: solid 1px; /*線*/
border-radius: 3px; /*丸み*/
background-color: inherit; /*背景色*/
}

/*シェア数の表示が必要ないシェア・フォローボタン*/
.sns-share.ss-top .sns-buttons a .share-count:empty,
.sns-share.ss-bottom .sns-buttons a .share-count:empty,
.sns-follow.sf-bottom .sns-buttons a .follow-count:empty,
.sns-follow.sf-widget .sns-buttons a .follow-count:empty {
padding: 0; /*内側の余白*/
border: 0; /*線*/
}
.sns-buttons a {background-color:#aaa;}
.sns-follow-message, .sns-share-message {
color:#888;
font-size:.8em;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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