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

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


/*表のストライプをなくす*/


/*変数*/

:root {
 --k_color: #ff55a7; /*h3の下の模様,検索欄の色 デフォルト:#ff55a7*/
 --k_color1: #FFF0F5; /*h3の背景色に使用 デフォルト:#FFF0F5*/
 --k_color2: #ffa3c2; /*上へ戻るボタンホバー時の色 デフォルト:#ffa3c2*/
 --k_color3: #73C3FB; /*コメントボタン 文字色 デフォルト:#73C3FB*/
 --k_color4: #f4c1d6; /*コメントの枠の色 デフォルト:#f4c1d6*/
 --k_color5: #f1f9fe; /*コメントのホバーしたときの背景の色 デフォルト:#f1f9fe*/
 --k_color5-1: #67afe1; /*コメントホバーしたときのテキスト色 デフォルト:#67afe1*/	
 --k_color6: #fff9fb; /*コメントの背景色 デフォルト:#fff9fb*/	
 --k_color7: #f1f9fe; /*検索窓の背景色 デフォルト:#f1f9fe*/	
 --k_color8: #ee87b4; /*スマホのヘッダーの背景色 デフォルト:#ee87b4*/	
}

/*スマホのヘッダー*/
div#sp_header {
 background-color: var(--k_color8) !important;
}


/* コメント箇所 */
.comment-reply-link {
  color: var(--k_color3);
  border-color: var(--k_color4);
  border-radius: 0.5em;
}

.comment-reply-link:hover {
  color: var(--k_color5-1);
  background-color: var(--k_color5);
}

/* コメント送信ボタン */

input[type='submit'] {
    padding: 10px;
    background: var(--k_color6);
    color: var(--k_color3);
    font-size: 14px;
    border: 1px solid var(--k_color4);
    border-radius: 0.5em;
}


.pagination-next-link,
.comment-btn {
    padding: 10px;
    background: var(--k_color6); 
    color: var(--k_color3);
    font-size: 14px;
    border: 1px solid var(--k_color4);
    border-radius: 0.5em;
}

.pagination-next-link:hover,
.comment-btn:hover {
    color: var(--k_color5-1);
    background-color: var(--k_color5);
}


/* h3 */
.article h3 {
  padding: 15px 20px 11px;
  background-color: var(--k_color1); 
  border-color: var(--k_color);
  border-top: none;
  border-right: none;
  border-bottom: 4px solid var(--k_color);
  border-left: none;
}


/* スクロールトップボタン */
.go-to-top {
  bottom: 35px;
}

.go-to-top-button {
  width: 45px;
  height: 45px;
  color: #fff;
  background-color: var(--k_color);
  border-radius: 50%;
  transition: all 0.3s;
}

.go-to-top-button:hover {
  color: #fff;
  background-color: var(--k_color2);
}

/*サイト内検索 */
.search-edit,
input[type=text],
input[type=password],
input[type=date],
input[type=datetime],
input[type=email],
input[type=number],
input[type=search],
input[type=tel],
input[type=time],
input[type=url],
textarea,
select {
  font-size: 16px;
  border: 2px solid var(--k_color);
  border-radius: 0.5em;
 background-color: var(--k_color7);
}

.search-edit:focus,
input[type=text]:focus,
input[type=password]:focus,
input[type=date]:focus,
input[type=datetime]:focus,
input[type=email]:focus,
input[type=number]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=time]:focus,
input[type=url]:focus,
textarea:focus,
select:focus {
  border-color: var(--k_color);
  outline: none; /* デフォルトの青い枠を消す */

}


button.wp-block-search__button.wp-element-button {
  background-color: var(--k_color); !important;
}

#header 
{
  background-size: contain;
}

body 
{
  margin-top: 0px !important;
}

#pc_header {
  display: block;
}

#sp_header {
  display: none;
}



/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

header .site-name-text {
  display: none;
}

/*1023px以下*/
@media screen and (max-width: 1023px){
  body 
  {
    margin-top: 50px !important;
  }
}

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

/*480px以下*/
@media screen and (max-width: 480px){
  .header {
    background-image: initial !important;
    padding-top: initial !important;
    min-height: initial !important;
  }

  .header .header-in {
    min-height: initial !important;
  }

  header span.site-name-text 
  {
    display: inline-block !important;
  }

  body {
    margin-top:50px !important;
  }

  #pc_header {
    display: none;
  }

  #sp_header {
    display: block;
  }
}

/* toc====================== */
ol.toc-list {
    max-height: 500px;
    overflow-y: auto;
    width: 260px;
}

/* h1 */
.toc-list li a.current {
    background-color: #E3F3FE !important;
}

/* h2 */
.toc-list ol > li:has(a.current)  {
    background-color: #E3F3FE !important;
}

.toc-list li a:not(.current) {
    color: #666666
}


.toc-list li a:hover {
    background-color: #E3F3FE;
    color: #208848;
}

.toc-center {
    margin: 1em 0px;
    width: 100%;
}

.toc-center ol.toc-list{
	 width : 100%;
}

.toc .toc-list {
    padding-left: 2em;
}

.home #main h1:before, .home #main h1:after {
    background: initial !important;
}

.home #main .widget-entry-cards figure img{
	 object-fit: contain !important;
}

.column-wrap
{
	width:100%;
}

.scroll-area{
  height:250px;
  max-height:250px;
}
.scroll-area {
  height: 250px;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scroll-area::-webkit-scrollbar {
  display: none;
}
.simplebar-track {
    background: #E5E5E5;
    border-radius: 10px;
}

.simplebar-track .simplebar-scrollbar.simplebar-visible::before{
  opacity:1; /* デフォルトだと薄くなっています。*/
}

.simplebar-track .simplebar-scrollbar::before{
  background: #F7C934;
}

.simplebar-vertical {
    visibility: visible !important;
}

.size_300_250 img
{
	width:300px !important;
	height:250px !important;
}

header h1 span.site-name-text 
{
  display: none;
}

.header {
  padding-top: initial !important;
}

/*————————————
リンカーフリーリンクボタンカラー変更
————————————*/
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink1 a{
background: #2dab0e;
border: 2px solid #2dab0e;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink2 a{
background: #e63225;
border: 2px solid #e63225;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink3 a{
background: #2b3878;
border: 2px solid #2b3878;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink4 a{
background: #F5989D;
border: 2px solid #F5989D;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink3 a {
    background: #ff5800;
    border: 2px solid #ff5800;
}
img {
pointer-events: none;
}

header h1 span.site-name-text 
{
  display: none;
}

header span.site-name-text {
  display: none;
}