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

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





/*------------------------------------------------------------------------------ 全体デザイン*/


.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > table,
.entry-content > h4,
.entry-content > h5,
.entry-content > h6,
.entry-content > figure,
.entry-content > .is-layout-flex,
.entry-content > .wp-block-cocoon-blocks-tab-box-1,
.entry-content > .wp-block-cocoon-blocks-tab-caption-box-1,
.entry-content > .wp-block-cocoon-blocks-sticky-box,
.entry-content > .wp-block-cocoon-blocks-info-box,
.entry-content > .wp-block-cocoon-blocks-icon-box,
.entry-content > .typesquare_option > figure,
.entry-content > .wp-block-cocoon-blocks-caption-box-1,
.entry-content > .wp-block-quote,
.entry-content > .wp-block-cocoon-blocks-balloon-ex-box-1,
.entry-content > .wp-block-cocoon-blocks-blank-box-1,
.entry-content > figure.wp-block-table,
.entry-content > .wp-block-comments,
.entry-content > .wp-block-code, 
.entry-content > .wp-block-cocoon-blocks-toggle-box-1,
.entry-content > .wp-block-separator,
.entry-content > .label-box {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}


/* リストの設定 */
.article .entry-content .wp-block-cocoon-blocks-iconlist-box {
	margin: 1.4em 0;
	border: none;
	padding: 0;
}

.entry-content .wp-block-list  {
	width: 90%;
	padding: 0	40px;
	margin: 1.4em auto;
}

.entry-content .wp-block-list li {
	border-bottom: 1px dashed #ccc;
	padding: 10px 0;
}

.entry-content .wp-block-list li:last-child {
	border-bottom: none;
}

/* .entry-content li.typesquare_option::before {
	margin-left: -1.4em;
} */

#toc li.typesquare_option::before {
	margin-left: 0;
}



.wp-block-cocoon-blocks-timeline-item .wp-block-cocoon-blocks-tab-box-1,
.wp-block-cocoon-blocks-info-box .typesquare_option > figure {
	width: 100%;
}

.is-layout-flex .wp-block-cocoon-blocks-tab-box-1 {
	width: 100%;
}

.entry-content > p {
	margin-bottom: 15px;
}

.date-tags {
	margin-bottom: 50px;
}



.pr-left {
	position: absolute;
	top: 3px;
	left: 10px;
}



li {
	list-style: none;
}

/* li.typesquare_option::before {
	top: 0.5rem;
	left: -2rem;
} */










/*------------------------------------------------------------------------------ 見出しデザイン*/

.article h2 {
	background: #555555;
	color: #fff;
	border-radius: 5px;
	margin-top: 10em;
	text-align: center;
	position: relative;
}

.article h2:after {
	position: absolute;
  content: '';
  top: 100%;
  left: 50%;
  border: 15px solid transparent;
	border-top: 10px solid #555;
	width: 0;
	height: 0;
	transform: translateX(-50%);	
}


.article h3 {
	border: 0;
	font-size: 2em;
	padding: 0;
	margin-top: 6em;
	text-align: center;
	position: relative;
	margin-bottom: 3em;
}

.article h3:before {
	content: '';
	position: absolute;
	bottom: -25px;
	display: inline-block;
	width: 60px;
	height: 5px;
	left: 50%;	
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	background-color: #555;
	border-radius: 2px;
}

.article h2+ h3 {
	margin-top: 2em;
}

.article h2+ p + h3 {
	margin-top: 2em;
}

.article h3 span {
	background: linear-gradient(transparent 70%, #ff0 70%);
}

.wp-block-columns .wp-block-column h3:first-child {
	margin-top: 1em;
}

.article h4 {
/* 	background: #F4F5F7; */
	background: #999;
	margin-top: 5em;
	text-align: center;
	color: #fff;
}

.article .wp-block-cocoon-blocks-tab-box-1 h4 {
	color: #333;
}


.article h3+ h4 {
	margin-top: 3em;
}

.article h4 {
	margin-top: 3em;
	margin-bottom: 1rem;
}



/*
.article h5 {
  position: relative;
  display: inline-block;
  padding: 0 1.5em;
  text-align: center;
	border: 0;
}

.article h5:before,
.article h5:after {
  font-family: 'Font Awesome 5 Free';
  line-height: 1;
  position: absolute;
  top: calc(50% - .5em);
	font-size: 1.2em;
}

.article h5:before {
  left: 0;
  content: '\f053';
}

.article h5:after {
  right: 0;
  content: '\f054';
}

.article h5 span:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 12px;
  content: '';
  background-color: #ff0;
background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #F9F9F9), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #F9F9F9),color-stop(.75, #F9F9F9), color-stop(.75, transparent),to(transparent));
-webkit-background-size: 14px 14px;
	z-index: -200;
}

*/


.article h5 {
  position: relative;
  padding: 0.5rem 1.5rem;
  border-bottom: 2px solid ccc;
/* 	display: inline-block; */
}

.article h5:before {
  position: absolute;
  bottom: -14px;
  left: 1.5em;
  width: 0;
  height: 0;
  content: '';
  border-width: 14px 12px 0 12px;
  border-style: solid;
  border-color: #ccc transparent transparent transparent;
}

.article .wp-block-cocoon-blocks-blank-box-1 h5:before {
  border-style: none;
}


.article h5:after {
  position: absolute;
  bottom: -11px;
  left: 1.5em;
  width: 0;
  height: 0;
  content: '';
  border-width: 14px 12px 0 12px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}



.article h4+ h5 {
	margin-top: 1em;
}


/* Photoshop固定ページ */

.article h2.photoshop {
	background: #001E36;
	color: #31A7FF;
}

.article h2.photoshop:after {
	border-top: 10px solid #001E36;
}

.article h3.photoshop {
	background: #31A7FF;
	color: #ffffff;
	width: 90%;
	margin: 80px auto 15px;
	padding: 15px 0;
	font-size: 1.3em;
}

.article h3.photoshop:before {
	display: none;
}
.article h3.photoshop span {
	background: none;
}


.article h4.photoshop {
	background: #31A7FF;
	color: #ffffff;
	border: none;
}


/* Illustratorページ */

.article h2.illustrator {
	background: #320000;
	color: #FF9B00;
}


.article h2.illustrator:after {
	border-top: 10px solid #320000;
}

.article h4.illustrator {
	background: #FF9B00;
	color: #ffffff;
	border: none;
}



/* Fireflyページ */

.article h2.firefly {
	background: #4b1000;
	color: #f8aaa4;
}


.article h2.firefly:after {
	border-top: 10px solid #4b1000;
}

.article h4.firefly {
	background: #f8aaa4;
	color: #ffffff;
	border: none;
}



/* Figmaページ */

.article h2.figma {
	background: #9747ff;
}


.article h2.figma:after {
	border-top: 10px solid #9747ff;
}

.article h4.figma {
	background: #f0e3ff;
	color: #555;
	border: none;
}


/* Noteページ */

.article h2.note {
	background: #ffd700;
	color:#555
}


.article h2.note:after {
	border-top: 10px solid #ffd700;
}

.article h4.note {
	background: #fffacd;
	color: #555;
	border: none;
}





/* ラベルボックスの見出し白縁設定 */

.label-box-label .label-box-label-text {
	text-shadow: #fff 1px 0px 0px,#fff 2px 0px 0px,#fff 3px 0px 0px,#fff 4px 0px 0px,#fff 5px 0px 0px,#fff 6px 0px 0px,#fff 7px 0px 0px,#fff 8px 0px 0px,#fff -1px 0px 0px,#fff -2px 0px 0px,#fff -3px 0px 0px,#fff -4px 0px 0px,#fff -5px 0px 0px,#fff -6px 0px 0px,#fff -7px 0px 0px,#fff -8px 0px 0px;
}

/* .label-box-content {
	padding: 3em;
}
 */

.label-box-content .wp-block-list  {
	width: 100%;
	margin: 0;
	padding-bottom: 10px;
}










/* ブログカードの設定 */

.body .blogcard-type {
	margin-top: 2.2em;
}





/*------------------------------------------------------------------------------ メニュー*/

#menu-item-8558 a .caption-wrap .item-label {
	color: #31A7FF;
}

/*------------------------------------------------------------------------------ 段落デザイン*/


p {
	text-align: justify;
}




/*------------------------------------------------------------------------------ トップページの設定 */


/* インデックスカード 　見出し文字色 */
.entry-card-content h2 {
	color: #555555;
}

/* インデックスカード 　ボディコピー文字色 */
.entry-card-snippet {
	color: #555555;
	line-height: 1.7;
}


/*------------------------------------------------------------------------------  サイドバー */

/* カテゴリー */
/*
#sidebar #categories-3 ul li a {
	line-height: 1;
}

#sidebar #categories-3 .cat-item-10,
#sidebar #categories-3 .cat-item-9 {
	color: #555;
	border-top: dashed 1px #ccc;
}
*/

/*--------------------------------
親カテゴリーのカスタマイズ
--------------------------------*/
.widget_categories ul li a{
	line-height: 1.3; /*行間を狭くする*/
  border-bottom: 1px dashed #CCCCCC; /*下線の種類*/
}
.widget_categories ul li a::before{
 font-family: "Font Awesome 5 Free"; /*バージョン指定*/
  content: "\f304"; /*FontAwesomeのユニコード*/
  color: #000; /*色*/
  padding-right: 6px; /*右側空間*/
	font-weight: 900; /*太さ*/
}

.widget_categories > ul > li > a:first-child{ 
  border-top: none; /*最初の親カテゴリは上部ボーダーを消す*/
}

/*--------------------------------
子カテゴリーのカスタマイズ
--------------------------------*/
.widget_categories ul li a{
	line-height: 1.3; /*行間を狭くする*/
  border-bottom: 1px dashed #CCCCCC; /*下線の種類*/
}
.widget_categories ul li ul li a::before{ /*子カテゴリーのアイコン*/
  font-family: "Font Awesome 5 Free"; /*バージョン指定*/
  content: "\f105"; /*FontAwesomeのユニコード*/
  color: #000; /*色*/
  padding-right: 6px; /*右側空間*/
  font-weight: 900; /*太さ*/
}



/* 見出し */

#sidebar h3 {
	text-align: center;
	border-bottom: 4px double #555;
	background: none;
}

/* カードタイトル */
.card-title {
	font-size: 0.9rem;
}


/* 管理人 */
#sidebar  #author_box-2 .author-description p {
	color: #555555;
	font-size: 0.9rem;
	line-height: 1.6;
}

.author-box {
	border: none;
}

.author-name a {
	color: #555;
}


/* 目次 */
ol.toc-list.open {
	padding: 0;
	font-size: 0.8rem;
}


.toc.tnt-number.toc-center.tnt-number.border-element {
	padding: 5px;
}






/* バッジ処理 */
.badge,
.badge-red,
.badge-pink,
.badge-purple,
.badge-blue,
.badge-green,
.badge-yellow,
.badge-brown,
.badge-grey {
	padding: 6px 10px;
}


.badge-purple {
	background: none;
	color: #000;
	text-align: center;
	border-bottom: 4px double #555;
	font-size: 1.4rem;
	padding: 0 20px 10px;
	letter-spacing: 0.3rem;
}

.badge-brown {
	background: none;
	color: #000;
	border: 4px double #555;
	font-size: 1rem;
	font-weight: bold;
	text-align: center;
	letter-spacing: 0.3rem;
	display: inline-block;
	width: auto;
	margin: 60px auto 0;
	position: relative;
	left: 50%;
	transform: translateX(-50%);	
}


/* タイムライン */

.timeline-title {
	margin-bottom: 50px;
}



/* タイムライン
-------------------------------------------------- */
.timeline-item::before {
  top: 21px;
  left: 102px;
  width: 12px;
  height: 12px;
  background: #f8c678; /* 任意の色に */
	border: solid 3px #fff;
}

.timeline-item-content {
  border-left: 3px rgb(25 25 25 / 12%) solid;
	padding-bottom: 50px;
}



.timeline li:last-child .timeline-item-content{
	padding-bottom: 0;
}

.timeline {
  padding-top: 300px;
}

.timeline-box {
  border: initial;
}

.timeline-item-label {
  color: rgb(25 25 25 / 70%);
	padding-top: 16px;
}
@media screen and (max-width: 480px) {
  .timeline-item-content {
    border-left: initial;
  }

  .timeline > li.timeline-item {
    border-left: 3px rgb(25 25 25 / 12%) solid;
  }

  .timeline-item::before {
    left: -10px;
  }
}

/* 以下はアニメーションをつけたい場合 */
.timeline li::before {
  animation: timeline-circle 1.5s infinite;
}
@keyframes timeline-circle {
  100% {
    transform: scale(1.5, 1.5);
  }
}














/*1カラムのセンター処理*/
.wp-block-column {
	margin: 0 auto !important;
}


/*カラム内の画像比較の矢印の位置修正*/
div.jx-arrow,
div.jx-controller {
  margin-bottom:auto!important;
}





/*白枠BOX内の見出し処理*/

.wp-block-cocoon-blocks-blank-box-1 h3,
.wp-block-cocoon-blocks-blank-box-1 h4,
.wp-block-cocoon-blocks-blank-box-1 h5,
.wp-block-cocoon-blocks-blank-box-1 h6 {
	margin-top: 1em;
	position: relative;
  display: inline-block;
  padding: 0 1.5em;
  text-align: center;
	border: 0;
	color: #FFC107;
}

.article .wp-block-cocoon-blocks-blank-box-1 h3,
.article .wp-block-cocoon-blocks-blank-box-1 h4,
.article .wp-block-cocoon-blocks-blank-box-1 h5,
.article .wp-block-cocoon-blocks-blank-box-1 h6 {
	background: none;
}


.wp-block-cocoon-blocks-blank-box-1 h3:before,
.wp-block-cocoon-blocks-blank-box-1 h4:before,
.wp-block-cocoon-blocks-blank-box-1 h5:before,
.wp-block-cocoon-blocks-blank-box-1 h6:before  {
	font-family: 'Font Awesome 5 Free';
  line-height: 1;
  position: absolute;
  top: calc(50% - .5em);
	font-size: 1.2em;
  left: 0;
  content: '\f14a';
	font-weight: 400;
}
.wp-block-cocoon-blocks-blank-box-1 h3:after,
.wp-block-cocoon-blocks-blank-box-1 h4:after,
.wp-block-cocoon-blocks-blank-box-1 h5:after,
.wp-block-cocoon-blocks-blank-box-1 h6:after  {
  content: '';
}




/*タブBOX内の見出し処理*/

.wp-block-cocoon-blocks-tab-box-1 h3,
.wp-block-cocoon-blocks-tab-box-1 h4,
.wp-block-cocoon-blocks-tab-box-1 h5,
.wp-block-cocoon-blocks-tab-box-1 h6 {
	margin-top: 1em;
	position: relative;
  display: inline-block;
  padding: 0 1.5em;
  text-align: center;
	border: 0;
	background-color: #fff;
}

.wp-block-cocoon-blocks-tab-box-1 h3:before,
.wp-block-cocoon-blocks-tab-box-1 h4:before,
.wp-block-cocoon-blocks-tab-box-1 h5:before,
.wp-block-cocoon-blocks-tab-box-1 h6:before  {
	font-family: 'Font Awesome 5 Free';
  line-height: 1;
  position: absolute;
  top: calc(50% - .5em);
	font-size: 1.2em;
  left: 0;
  content: '\f14a';
	font-weight: 400;
}

.wp-block-cocoon-blocks-tab-box-1 h3:after,
.wp-block-cocoon-blocks-tab-box-1 h4:after,
.wp-block-cocoon-blocks-tab-box-1 h5:after,
.wp-block-cocoon-blocks-tab-box-1 h6:after  {
  content: '';
}




/*目次デザイン*/

#toc,
#toc .toc-content,
#toc .toc-content .toc-list {
	padding: 0;
	border: 0;
}

.toc-title {
	position: relative;
	text-align: left;
	padding-left: 42px;
}

.toc-title:before {
	font-family: "Font Awesome 5 Free";
  content: "\f0c9";/*アイコンの種類*/
  position: absolute;
  left : 0.85em;/*左端からのアイコンまでの距離*/
  color: 000;/*アイコン色*/
	font-weight: 900; /*アイコンの太さ*/
}


.toc-content ol {
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important;/*数字を一旦消す*/
}



.toc-list > li  {
	background: #eee;
	display: block;
	position: relative;
  padding: 1.5em 2em;
  line-height: 1.5em;
  background: #F4F5F7;
  border-left : solid 35px #555;
  margin-bottom: 5px;
}

.toc-list > li > ol {
	padding-top: 10px;
}

.toc-widget-box .toc-list > li > ol {
	padding-top: 0;
}

.toc-widget-box .toc-list > li a {
	padding-left: 5px;
}

.toc-widget-box .toc-content .toc-list ol > li:first-child {
	padding-top: 10px;
}



.toc-list > li:before {
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*数字のデザイン変える*/
  display:inline-block;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  left: -35px;
  width: 35px;
  height: 1em;
  line-height: 1;
  text-align: center;
}

.toc-list > li > a {
	font-size: 1.2em;
	background: linear-gradient(transparent 70%, #ff0 70%);
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif;
	font-weight: bold;
	display: inline;
}

.toc-list > li > ol > li:before {
	font-family: "Font Awesome 5 Free";
  content: "\f152";/*アイコンの種類*/
  position: absolute;
  left : 2.2em;/*左端からのアイコンまでの距離*/
  color: 000;/*アイコン色*/
	font-weight: 900; /*アイコンの太さ*/
}

.toc-list > li li li {
	list-style: square;
	padding-left: 0;
}

.toc-list > li li li li {
	list-style: circle;
}

.toc-list > li li li li a {
	list-style: circle;
	color: #888;
}

.toc-list a:hover {
	text-decoration: none;
	opacity: 0.5;
}


.toc .toc-content li a {
	color: #555;
}



.cat-label {
	border: none;
	top:0.6em;
	left:0.6em;
}
*/

/*.blogcard{
	background: #FFFF00;
}
*/

.blogcard-thumbnail {
	width: 50%;
}

/*ブロックエディター　ギャラリー調整*/

.wp-block-columns .wp-block-gallery .blocks-gallery-grid .blocks-gallery-item,
.wp-block-gallery {
	margin-bottom:15px;
}

/*吹き出しアイコンの画像サイズ*/
div.speech-person {
  width: 20%;
  min-width: 20%;
}



/*タブ見出しBOX内の設定*/

.tab-caption-box p {
	margin-bottom: 0;
}

.tab-caption-box .wp-block-separator {
	margin: 15px 0;
	border-style: dashed;
}



/*タブBOX内の設定*/

.blank-box p {
	margin-bottom: 0;
}

.blank-box .wp-block-separator {
	margin: 15px 0;
	border-width:1px;
	border-style: dashed;
}




/*ソースコードの種類表記*/

 .hljs {padding: 40px 12px 12px;position: relative;}
 .hljs::after {font-size: 0.8em;color: #fff;content: "";font-family: "Noto Sans JP", sans-serif;font-weight: 700;left: 0;padding: 2px 8px;position: absolute;top: 0;}
 .hljs.html::after {content: "HTML";background-color: #666;}
 .hljs.css::after {content: "CSS";background-color: #666;}
 .hljs.javascript::after {content: "JavaScript";background-color: #666;}
 .hljs.php::after {content: "PHP";background-color: #666;}
 .hljs.python::after {content: "Python";background-color: #666;}
 .hljs.cpp::after {content: "C++";background-color: #666;}



/*テーブルの設定*/


figure.wp-block-table table {
	width: 100%;
}

.wp-block-table table thead tr th {
	background-color: #e1e4ea;
}

.wp-block-table table tbody tr td {
	color: #777;
}

.wp-block-table table tbody tr td strong {
	color: #000;
}

/* .wp-block-table table tr td:first-child {
	white-space: nowrap;
} */





.wp-block-code code {
	font-size: 0.85rem;
}












/* 明度と輝度の計算式 */

.bright p, .luminance p {
	text-align: center;
	margin-bottom: 10px;
	width: 100%;
}

.bright input, .luminance input {
	width: 100%;
	padding: 5px 0;
	text-align: center;
}

.bright {
	margin-bottom: 50px;
}

.result {
	font-weight: bold;
}

.result input {
	background: #ffcccc;
	padding: 10px 0;
}

.calculation {
	margin-top: 30px;
}

.calculation input {
	width: auto;
	padding: 5px 15px;
}






/************************************
カテゴリーページ設定
************************************/

/* .category-question .entry-card-thumb img {
	aspect-ratio: 1/1;
	object-fit:contain;
} */

/* 特定カテゴリーページのロゴの非表示にする */
.category-question .logo > a img,
.category-sukedachi-ai .logo > a img,
.category-sukedachi-ps .logo > a img,
.category-sukedachi-tips .logo > a img {
visibility: hidden;
}

/* .category-question .logo > a .site-name-text {
display: inline-block;
background: url("https://note.himenoke.com/wp-content/uploads/2023/07/sukedachi-logo.png") no-repeat;
background-size: cover;
background-position: center;
} */

/* 特定カテゴリーページのヘッダー背景画像を変更する */
.category-question .logo,
.category-sukedachi-ai .logo,
.category-sukedachi-ps .logo,
.category-sukedachi-tips .logo {
background: url("https://note.himenoke.com/wp-content/uploads/2023/07/sukedachi-logo.png") no-repeat;
background-size: contain;
background-position: center;
}












/************************************
投稿本文下プロフィール設定
************************************/

.author-name {
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 10px;
}

.author-box .author-name a {
    text-decoration: none;
    color: #333;
}

.author-box p {
    margin-top: 0.3em;
    line-height: 1.6;
}

.author-box p a {
    text-decoration: none;
    color: #008cee;
}

.author-box p a:hover {
    text-decoration: underline;
    color: #008cee;
}

/* .author-box .sns-follow-buttons a.follow-button {
    font-size: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    margin-bottom: 4px;
    margin-right: 8px;
    background: none;
    color: #fff;
}

.author-box a.follow-button span {
    line-height: 40px;
}

.author-box a.follow-button span::before {
    font-size: 22px;
}

.author-box .icon-twitter-logo::before {
    font-family: FontAwesome;
    content: "\f099"
}

.author-box .icon-facebook-logo::before {
    font-family: FontAwesome;
    content: "\f09a";
}

.author-box .icon-instagram-new::before {
    font-family: FontAwesome;
    content: "\f16d";
}

.author-box .icon-hatebu-logo::before {
    font-family: Verdana;
    content: 'B!';
    font-weight: bold;
}

.author-box .icon-google-plus-logo::before {
    font-family: FontAwesome;
    content: "\f0d5";
}

.author-box .icon-youtube-logo::before {
    font-family: FontAwesome;
    content: "\f167";
}

.author-box .icon-pinterest-logo::before {
    font-family: FontAwesome;
    content: "\f231";
}

.author-box .icon-amazon-logo::before {
    font-family: FontAwesome;
    content: "\f270";
}

.author-box .icon-github-logo::before {
    font-family: FontAwesome;
    content: "\f09b";
}

.author-box .website-button {
    background-color: #47555c !important;
}

.author-box .twitter-button {
    background-color: #1da1f2 !important;
}

.author-box .facebook-button {
    background-color: #3b5998 !important;
}

.author-box .hatebu-button {
    background-color: #2c6ebd !important;
}

.author-box .google-plus-button {
    background-color: #dd4b39 !important;
}

.author-box .instagram-button {
    background: #e1306c !important;
}

.author-box .youtube-button {
    background-color: #ef1515 !important;
}

.author-box .flickr-button {
    background-color: #0063dc !important;
}

.author-box .pinterest-button {
    background-color: #bd081c !important;
}

.author-box .line-button {
    background-color: #00c300 !important;
}

.author-box .amazon-button {
    background-color: #ff9900 !important;
}

.author-box .rakuten-room-button {
    background-color: #c42e7f !important;
}

.author-box .github-button {
    background-color: #333 !important;
}

.author-box .feedly-button {
    background-color: #2bb24c !important;
}

.author-box .rss-button {
    background-color: #f26522 !important;
}

.author-box .soundcloud-button {
    background-color: #ff7700 !important;
} */

#main .author-box {
    border: none;
    border-radius: 3px;
    margin: 1em 0;
    line-height: 1.4;
    position: relative;
    padding: 1.4% 2% 1.8% 0;
    box-shadow: 0 5px 20px -5px rgba(105, 115, 131, .35);
}

#main .author-widget-name {
    display: inline-block;
    position: relative;
    margin: 10px 0 0 -170px;
    padding: 6px 12px;
    border-radius: 20px;
    background: #eaedf2;
    color: #555;
    font-size: 14px;
    font-weight: 700;
    z-index: 1;
}

#main .author-widget-name::before {
    position: absolute;
    content: '';
    z-index: -1;
    bottom: -30px;
    left: 60px;
    border: 15px solid transparent;
    border-top: solid 30px #eaedf2;
    transform: rotate(-40deg);
}

#main .author-thumb {
    float: left;
    margin: 0;
    padding-top: 70px;
    width: 200px;
    text-align: center;
}

#main .author-thumb img {
    border: solid 5px #dfe2e8;
    width: 100px;
}

#main .author-content {
    margin: -30px 0 0 200px;
    padding-left: 30px;
    border-left: 2px #eaedf2 dashed;
}

#main .author-box .author-name {
    line-height: 1;
}

#main .author-box p {
    font-size: .95em;
}

@media screen and (max-width: 480px) {
    #main .author-box {
        margin: 1em 10px;
        padding: 16px;
        text-align: center;
    }

    #main .author-widget-name {
        margin: 0;
    }

    #main .author-widget-name::before {
        left: 50px;
    }

    #main .author-thumb {
        float: none;
        margin: 0;
        padding-top: 20px;
        width: 100%;
    }

    #main .author-box .author-name {
        font-size: 14px;
    }

    #main .author-content {
        margin: 10px 0 0 0;
        padding-left: 0;
        border: none;
    }

    #main .author-box p {
        font-size: 14px;
        text-align: left;
    }

    #main .author-box .sns-follow-buttons {
        justify-content: center;
    }
}

.widget-single-content-bottom-title {
	margin-top: 150px;
}



/************************************
YouTuve設定
************************************/


.video-container {
	margin: 0 auto;
}

.video {
	text-align:center;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
}
.video::before {
	position: absolute;
	background: url(https://note.himenoke.com/wp-content/uploads/2023/08/yt_icon-on.png);
	content: "";
	background-size: 100%;
	width: 70px;
	height: 47px;
	top: 50%;
	left: 50%;
	transform : translate(-50%,-50%);
	opacity: .90;
	transition:.5s;
}
.video:hover::before {
	cursor: pointer;
	background-image:url(https://note.himenoke.com/wp-content/uploads/2023/08/yt_icon-off.png);
}
















/************************************
モバイル表示　ヘッダーメニュー
************************************/
/*戻るボタン
span.fa.fa-close::before {
    font-family: FontAwesome;
    content: “\f060”;
}

*/

.menu-content .menu-drawer {
    padding: 0 1em;
    margin: 0;
}

ul.menu-drawer:before {
    font-size: 1.2em;
    display: block;
    font-weight: normal;
    background: white;
    color: #7b7b7b;
    padding: .5em;
    margin-bottom: 1em;
    font-family: sans-serif;
    text-align: center;
    border-bottom: 3px dotted #90C31F;
}

ul.menu-drawer:after {
    background: white;
}

.menu-drawer li {
    background-color: #fff;
    padding: 0;
    border-radius: 20px;
}

/*ドロワーメニュー全体の設定*/
.menu-drawer .menu-item a {
    font-size: 0.9em;
    background-color: #444;
    color: #fff;
    margin: 6px 0;
    padding: 4px 1em;
    border-radius: 5px;
}


/*サブメニューの設定*/
.menu-drawer .menu-item .sub-menu a {
   background-color: #aaa;
}

/*サブメニュー内コンテンツの設定*/
.menu-drawer .menu-item .sub-menu .menu-item-object-page a {
   background-color: #fff;
	color: #666;
	border-left: solid 4px #aaa;
	border-radius: 0;
	font-size: 0.8em;
}



.menu-drawer a:hover {
    background-color: #ffd700 !important;
    color: #fffff4 !important;
    transition: 0.2s;
}

.menu-drawer .sub-menu {
    padding-left: 30px;
    margin-top: 0;
}

@media (max-width:834px) {
    .sub-menu {
        box-shadow: none !important;
    }
}




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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	
	.article h3 {
	font-size: 1.2em;
	}
	
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > table,
.entry-content > h4,
.entry-content > h5,
.entry-content > h6,
.entry-content > figure,
.entry-content > .is-layout-flex,
.entry-content > .wp-block-cocoon-blocks-tab-box-1,
.entry-content > .wp-block-cocoon-blocks-tab-caption-box-1,
.entry-content > .wp-block-cocoon-blocks-sticky-box,
.entry-content > .wp-block-cocoon-blocks-info-box,
.entry-content > .wp-block-cocoon-blocks-icon-box,
.entry-content > .typesquare_option > figure,
.entry-content > .wp-block-cocoon-blocks-caption-box-1,
.entry-content > .wp-block-quote,
.entry-content > .wp-block-cocoon-blocks-balloon-ex-box-1,
.entry-content > .wp-block-cocoon-blocks-blank-box-1,
.entry-content > figure.wp-block-table,
.entry-content > .wp-block-comments,
.entry-content > .label-box {
	width: 100%;
}
	
	
	.entry-content .wp-block-list  {
	width: 100%;
	padding: 0 0 0 20px;
}
	
	
	.label-box-content {
	padding: 1em;
}


	
/* Photoshop固定ページ */

.article h3.photoshop {
	width: 100%;
	font-size: 1em;
}
	
}