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

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

/*記事一覧アイキャッチ画像の角丸め*/
figure > img{
  border-radius: 10px;
}

/* 画像の角丸 */

.image img{ 
border-radius: 10px; 
-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
}

/* 固定ページの日付消去 */

.post-15 .date-tags,
.post-22 .date-tags {
display: none;
}

/* 固定ページのSNSボタン消去 */

.page .sns-share,
.page .sns-follow {
    display: none;
}

/* フッター */
/* ①フッター */
.footer {
	padding-top: 0px;
}

/* ②フッターメニュー */
.navi-footer-in a {
  position: relative;
  display: inline-block;
  text-decoration: none !important;
}

/* ③フッターメニュー(hover) */
@media screen and (min-width: 980px) {
	.navi-footer-in a:hover {
	  background: none!important; 
	}
}

/* ④フッターメニューの下線 */
.navi-footer-in a::after {
  position: absolute;
  bottom: -3px;
  content: '';
  left: 6%;
  width: 88%;
  height: 0.5px;
  background: #f7f7f5;
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform .5s;
}

/* ⑤フッターメニューの下線(hover) */
@media screen and (min-width: 980px) {
	.navi-footer-in a:hover::after {
	  transform: scale(1, 1);
	}
}


/* 見出しのデザインリセット */
/*H2 */
.entry-content h2{
border:none;
background:none;
padding: 0;
}

/* H3 */
.entry-content h3{
border:none;
background:none;
padding: 0;
}

/* H4 */
.entry-content h4{
border:none;
background:none;
padding: 0;
}

/* H5 */
.entry-content h5{
border:none;
background:none;
padding: 0;
}

/* H6 */
.entry-content h6{
border:none;
background:none;
padding: 0;
}

.article h2 {
margin: 3em 0 1.5em;/*上、左右、下方向*/
}


.article h3,
.article h4,
.article h5,
.article h6 {
margin: 2.4em 0 1em;/*上、左右、下方向*/
}

.article h2 {
  position: relative;
  color: #424f56;
  font-size: 22px;
  letter-spacing: .1rem;
  text-shadow: 0 0 2px white;
}

.article h2:before {
  content: "";
  position: absolute;
  background: #f4f3db;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  top: 50%;
  /* border: dashed 1px white; */
  left: -15px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: -1;
}

.article h3 {
  position: relative;
  color: #424f56;
  padding-left: 1.1em;/*アイコン分のスペース*/
  line-height: 1.4;
}

.article h3:before {
  font-family: "Font Awesome 5 Free";
  content: "\f621";/*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
  font-size: 1em;/*サイズ*/
  left: 0;/*アイコンの位置*/
  top: 0;/*アイコンの位置*/
  color: #94a1a9; /*アイコン色*/
  font-weight: 900;
}

/* フォーム */

input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=search]:focus,
input[type=url]:focus,
textarea:focus {
	color: #94a1a9;
	background-color: white;
}

/* サイドバー */

.sidebar h3 {
    background: none;
	color: #94a1a9;
    font-size: 16px;
    letter-spacing: 2px;
    display: inline-block;
    position: relative;
    width: 100%;
    padding: 0;
    text-align: center;
}
.sidebar h3::before, .sidebar h3::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 28%; /*ラインの長さ*/
    border-top: 3px solid #f4f2db; /*ラインの色*/
}
.sidebar h3::before {
    left: 0;
}
.sidebar h3::after {
    right: 0;
}

/* 検索ボックス */

.search-edit{
 border: 0;
 border-radius: 0;
 background-color: #f4f2db;
 font-size: 14px;
}
.search-submit {
 color: #94a1a9;
 font-size: 16px;
 border: #f4f2db;
}

/* プロフィール */

.nwa .author-box {
	border: none;
	padding: 0 20px;
}

/* 下側 */
.nwa .author-box .author-content {
	padding: 0.3em 0;
}

/* 名前 */
.author-box .author-name {
	margin-bottom: 0.7em;
}
.author-box .author-content .author-name a{
	font-size: 1.2em;
	font-weight: normal; /* 太字にしない */
	text-decoration: none; /* 下線をなくす */
	letter-spacing: 0.1em; /* 字間を広く */
}

/* プロフィール文 */
.author-description{
	margin-bottom: 16px;
}
.author-description p{
	margin: 0 0 0.5em 0;
	text-align: left;
	line-height: 1.8;
}


/************************************
** 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: 40px; /*横幅*/
	height: 40px; /*高さ*/
	margin-right: 4px; /*右側の余白*/
	margin-left: 4px; /*左側の余白*/
	border: none; /*線*/
}

/*フォローボタン（プロフィール）のリンク*/
.sns-follow.sf-profile .sns-buttons a {
	border: none; /*線*/
}

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

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

/*シェアボタンのキャプション*/
.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: 0; /*右側からの距離*/
	bottom: -10px; /*下側からの距離*/
	left: 0; /*左側からの距離*/
	font-size: 10px; /*文字の大きさ*/
	color: #333; /*文字の色*/
}

/*シェア・フォローボタンの各アイコンをまとめて指定*/
[class*="sns-share"][class*="ss-"] [class*="-button"],
[class*="sns-follow"][class*="sf-"] [class*="-button"] {
	background-color: inherit; /*背景の色*/
}

/*ボタンカラーがモノクロ時のアイコンをまとめて指定*/
[class*="sns-"][class*="bc-monochrome"] [class*="icon-"]:before {
	color: #94a1a9; /*アイコンの色*/
}


/* シェアボタンの各アイコン
-----------------------------------*/

/*Twitterアイコン*/
.icon-twitter:before {
	color: #94a1a9; /*アイコンの色*/
}

/*Facebookアイコン*/
.icon-facebook:before {
	color: #94a1a9; /*アイコンの色*/
}

/*はてブアイコン*/
.icon-hatena:before {
	color: #94a1a9; /*アイコンの色*/
}

/*Pocketアイコン*/
.icon-pocket:before {
	color: #94a1a9; /*アイコンの色*/
}

/*LINEアイコン*/
.icon-line:before {
	color: #94a1a9; /*アイコンの色*/
}

/*Pinterestアイコン*/
.icon-pinterest:before {
	color: #94a1a9; /*アイコンの色*/
}

/*LinkedInアイコン*/
.icon-linkedin:before {
	color: #94a1a9; /*アイコンの色*/
}

/*コピーアイコン*/
.icon-copy:before {
	color: #94a1a9; /*アイコンの色*/
}

/*コメントアイコン*/
.icon-comment:before {
	color: #333; /*アイコンの色*/
}


/* フォローボタンの各アイコン
-----------------------------------*/

/*ウェブサイトアイコン*/
.sns-follow.sf-bottom .icon-home-logo:before,
.sns-follow.sf-widget .icon-home-logo:before {
	color: #002561;/*アイコンの色*/
}

/*Twitterアイコン*/
.sns-follow.sf-bottom .icon-twitter-logo:before,
.sns-follow.sf-widget .icon-twitter-logo:before {
	color: #94a1a9 /*アイコンの色*/
}

/*Facebookアイコン*/
.sns-follow.sf-bottom .icon-facebook-logo:before,
.sns-follow.sf-widget .icon-facebook-logo:before {
	color: #94a1a9; /*アイコンの色*/
}

/*はてブアイコン*/
.sns-follow.sf-bottom .icon-hatebu-logo:before,
.sns-follow.sf-widget .icon-hatebu-logo:before {
	color: #94a1a9; /*アイコンの色*/
}

/*Instagramアイコン*/
.sns-follow.sf-bottom .icon-instagram-logo:before,
.sns-follow.sf-widget .icon-instagram-logo:before {
	color: #94a1a9; /*アイコンの色*/
}

/*YouTubeアイコン*/
.sns-follow.sf-bottom .icon-youtube-logo:before,
.sns-follow.sf-widget .icon-youtube-logo:before {
	color: #cd201f; /*アイコンの色*/
}

/*LinkedInアイコン*/
.sns-follow.sf-bottom .icon-linkedin-logo:before,
.sns-follow.sf-widget .icon-linkedin-logo:before {
	color: #0077b5; /*アイコンの色*/
}

/*noteアイコン*/
.sns-follow.sf-bottom .icon-note-logo:before,
.sns-follow.sf-widget .icon-note-logo:before {
	color: #41c9b4; /*アイコンの色*/
}

/*SoundCloudアイコン*/
.sns-follow.sf-bottom .icon-soundcloud-logo:before,
.sns-follow.sf-widget .icon-soundcloud-logo:before {
	color: #ff8800; /*アイコンの色*/
}

/*Flickrアイコン*/
.sns-follow.sf-bottom .icon-flickr-logo:before,
.sns-follow.sf-widget .icon-flickr-logo:before {
	color: #111; /*アイコンの色*/
}

/*Pinterestアイコン*/
.sns-follow.sf-bottom .icon-pinterest-logo:before,
.sns-follow.sf-widget .icon-pinterest-logo:before {
	color: #bd081c; /*アイコンの色*/
}

/*LINEアイコン*/
.sns-follow.sf-bottom .icon-line-logo:before,
.sns-follow.sf-widget .icon-line-logo:before {
	color: #00c300; /*アイコンの色*/
}

/*Amazonアイコン*/
.sns-follow.sf-bottom .icon-amazon-logo:before,
.sns-follow.sf-widget .icon-amazon-logo:before {
	color: #ff9900; /*アイコンの色*/
}

/*ROOMアイコン*/
.sns-follow.sf-bottom .icon-rakuten-room-logo:before,
.sns-follow.sf-widget .icon-rakuten-room-logo:before {
	color: #c61e79; /*アイコンの色*/
}

/*Slackアイコン*/
.sns-follow.sf-bottom .icon-slack-logo:before,
.sns-follow.sf-widget .icon-slack-logo:before {
	color: #e01563; /*アイコンの色*/
}

/*GitHubアイコン*/
.sns-follow.sf-bottom .icon-github-logo:before,
.sns-follow.sf-widget .icon-github-logo:before {
	color: #4078c0; /*アイコンの色*/
}

/*CodePenアイコン*/
.sns-follow.sf-bottom .icon-codepen-logo:before,
.sns-follow.sf-widget .icon-codepen-logo:before {
	color: #333; /*アイコンの色*/
}

/*Feedlyアイコン*/
.sns-follow.sf-bottom .icon-feedly-logo:before,
.sns-follow.sf-widget .icon-feedly-logo:before {
	color: #94a1a9; /*アイコンの色*/
}

/*RSSアイコン*/
.sns-follow.sf-bottom .icon-rss-logo:before,
.sns-follow.sf-widget .icon-rss-logo:before {
	color: #94a1a9; /*アイコンの色*/
}

/*目次*/

.toc-title {
    font-weight: bold;
	color: #444444;
}
 
.toc {
	background: white;
	margin-bottom: 10em;
	border: 1px solid #94a1a9!important;
}

/* メニューリンク */
/************************************
**　　グローバルナビメニュー 
************************************/

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

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

/*スマホメニューを横スクロール*/
#header-container .navi-in > ul li {
   height: auto;
   font-weight: 300;
   line-height:1.3;
}
#header-container #navi a{
   color:#666666; /* 文字色 */
   padding:0.8em 1em;
}
#header-container #navi a:hover{
   color:#94a1a9; /* マウスホバー時の文字色 */
}
#header-container .navi-in > ul > .menu-item-has-children > a::after {
   top: 0.8em;
   font-size: 1.5em;
   font-weight: 300;
}
#header-container .sub-menu .caption-wrap{
   padding-left:1em;
}
.navi-in > ul .menu-item-has-description > a > .caption-wrap{
   height:auto;
}
@media screen and (max-width: 1030px){
  #header-container .menu-mobile{
    display:none;
  }
  .navi-in > .menu-mobile{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    overflow-x: scroll;
    white-space: nowrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  #header-container #navi a{
    font-size:0.8em;
    padding: 1em 1.2em;
  }
  #header-container .navi-in > ul > .menu-item-has-children > a::after{
    display:none;
  }
  #navi .navi-in > .menu-mobile li {
    height: auto;
    line-height: 1.8;
  }
  .mblt-header-mobile-buttons {
    margin-top: 53px;
  }
}


/* 本文の日付位置 */

.article-header{
display:flex;
flex-flow: column;
}

.entry-title{order:2;}
.eye-catch-wrap{order:3;}
.pr-label-l{order:4;}
.date-tags{order:1;}


/* === 景品表示法対応 === */
/* Cocoon設定本文上のPR表記 */
.pr-label-l {
    border-top: 0px dotted #94a1a9; /* 上の点線 */
    border-bottom: 0px dotted #94a1a9; /* テキスト下の点線 */
    border-left: none;
    border-right: none;
    border-radius: 0;
    font-size: 13px; /* 文字サイズ */
    color: #424f56; /* 文字の色 */
    text-align: center; /* テキスト中央揃え */
    background: #f4f2db;
    padding: 3px 0;
    margin-bottom: 2em;
}

/* リスト */




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

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

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