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

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

/*---------------------------------
 　目次
---------------------------------*/
.toc {
	border: 2px solid #f2bf49!important;/*外枠*/
	border-radius: 10px;/*角丸*/
}
/* 数字 */
.toc li{
  	color:#7a9900; /* 数字カラー */
}
/* 目次タイトル */
.toc-title {
	text-align: center; /*目次タイトル中央寄せ*/
	border-radius: 10px;/*角丸*/
	border: 2px solid #f9d957; /*外枠*/
}
/* 文字タイトルホバー時 */
.toc-title:hover {
  	background: #FAEEBE; /*目次タイトル背景カラー*/
}
/*目次タイトルアイコン設定*/
.toc-title::before {
	position: relative;
	margin-right:8px;
}

/* H2 */
.toc ul.toc-list>li>a,
.toc ol.toc-list>li>a {
	font-size: 110%;
	padding: 0px 6px;
	border-bottom: 3px solid #FFC778; /*h2のアンダーラインの太さとカラー*/
}

/* H3～H6 */
.toc ul li a,
.toc ol li a {
     border-bottom: 1px dashed #666; /*h3以下のアンダーラインの太さとカラー*/
}

/*---------------------------------
 　サイドバー追尾目次
---------------------------------*/
.sidebar-scroll{
  top:150px !important;/* 下にさげる */
}
.sidebar .widget_toc{
   box-shadow: 0 2px 10px rgba(0, 0, 0, .08);/* 全体影 */
}
.sidebar .toc-widget-box{
  margin-top: -0.9em;
}
/* 数字 */
.sidebar .toc li{
  	color:#7a9900; /* 数字カラー */
}
/* サイドバー追尾目次 */
.sidebar .toc{
	padding: 0px 0px 0px 0px; /* 指定しないと左右に無駄なスペースができる */
	width:100%;
	border-radius: 5px;
}
/* はみ出た分をスクロール可能にするコード */
.sidebar #toc-2 .toc-content {
	padding: 0px 0px 0px 0.5em; /* 指定しないと左側が詰まって見づらいため少しスペースを */
	overflow-y: scroll; /* 縦スクロールを可能に */
	max-height: 60vh; /* 目次の高さ上限 ウィンドウの縦幅60%*/
	background: #fff;
}
/* 現在位置 */
#toc-2 li.current {
	padding: 6px 6px 6px;
	background-color: #ffdd99; /* ハイライト色 */
	border: 2px solid #f9d957; /*外枠*/
	border-radius: 5px;/*角丸*/
}
/* スクロールバーを常に表示 */
.sidebar .toc-content::-webkit-scrollbar {
	-webkit-appearance: none; /* スタイルの初期化を禁止 */
	width: 8px;/* スクロールできるツマミ部分 */
}
/* スクロールバー */
.sidebar .toc-content::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, .4); /* ツマミの色 */
	border-radius: 5px;
}

/*---------------------------------
 　見出し
---------------------------------*/
/* H3 */
.article h3{
	padding: 0.25em 0.5em;/*上下 左右の余白*/
  	color: #494949;/*文字色*/
  	background: transparent;/*背景透明に*/
  	border-left: solid 10px #FFC778;/*左線*/	
	border-bottom: solid 3px #FFC778;/*下線*/
}

/* H4 */
.article h4{
	padding: 0.25em 0.5em;/*上下 左右の余白*/
  	color: #494949;/*文字色*/
  	background: transparent;/*背景透明に*/
	border-bottom: solid 3px #ffe666;/*下線*/
}

/* H5 */
.article h5{
	padding: 0.25em 0.5em;/*上下 左右の余白*/
  	color: #494949;/*文字色*/
  	background: transparent;/*背景透明に*/
	border-bottom: dashed 2px #ffe666;/*下線*/
}

/*---------------------------------
 　コメント
---------------------------------*/
/*コメントの注釈を非表示に（「メールアドレスが公開されることはありません。」）*/
.comment-form-email,
.comment-form-url,
.comment-notes{
	display:none; 
}

/*コメント送信ボタン*/
.comment-respond #submit {
  display: inline-block;
  background-color: #008000;
  color: #FFFFFF;
  padding: 5px 5px;
  border-radius: 5px;
  font-size: 1.2em;
}

/*コメントの内容の余分なスペースをなくす*/
.comment-content p{
	margin: unset;
}

/*---------------------------------
 　トップ　キャッチフレーズ
---------------------------------*/
.tagline{
	margin-bottom: -15px;
	font-size: 150%;
	font-weight: bold; 
    text-shadow: 2px 2px #fff, 5px 5px rgba(0, 0, 0, 0.4);
}

/*---------------------------------
　固定ページの日付を非表示にする
--------------------------------*/
.post-61 .date-tags,
.post-1978 .date-tags,
.post-414 .date-tags {
  display: none;
}

/*---------------------------------
　トップへ戻るボタン
---------------------------------*/
/*位置*/
.go-to-top {
  right: 10px; /*右から*/
  bottom: 140px; /*下から*/
}

/*ボタン*/
.go-to-top-button {
  border-radius: 50%; /*丸くする*/
  width: 55px;
  height: 55px;
  font-size: 30px; /*アイコンフォントのサイズ*/
  opacity:0.9; /*透明度*/
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .2); /*影*/
}

/*ホバー時*/
.go-to-top-button:hover {
  color: #333; /*アイコンフォントの色*/
  background-color: #f9d957; /*背景色*/
}

/*---------------------------------
　アドセンスラベルの文字のカスタマイズ（スポンサーリンク）
---------------------------------*/
.ad-area .ad-label {
  font-size: 80% !important;
}

/*---------------------------------
 　羊羹屋台固定ページ用CSS
---------------------------------*/
body.page-id-4285 {
  background:
    radial-gradient(circle at top center, #6a3524 0%, #6f3a26 45%, #4d241b 100%) !important;
}

/* テーマ側の白い大枠を透明化 */
body.page-id-4285 .wp-site-blocks,
body.page-id-4285 .site,
body.page-id-4285 .site-content,
body.page-id-4285 .content-area,
body.page-id-4285 main,
body.page-id-4285 article,
body.page-id-4285 .entry,
body.page-id-4285 .post,
body.page-id-4285 .page {
  background: transparent !important;
}

/* 記事本文だけ和紙カードにする */
body.page-id-4285 .entry-content {
  max-width: 1100px;
  margin: 32px auto 56px;
  padding: 40px 46px;
  border-radius: 22px;

  background:
    linear-gradient(180deg, rgba(255, 249, 234, 0.96), rgba(255, 238, 207, 0.96)) !important;

  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.32),
    inset 0 0 0 1px rgba(150, 85, 35, 0.18);
}

/* ヘッダー画像がある場合、少しカード風に */
body.page-id-4285 .entry-content {
  border: 2px solid rgba(126, 62, 27, 0.25);
  background:
    linear-gradient(90deg, rgba(120, 60, 24, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 249, 234, 0.97), rgba(255, 238, 207, 0.97)) !important;
  background-size: 28px 28px, auto;
}

/* 見出し */
body.page-id-4285 .entry-content h2,
body.page-id-4285 .entry-content h3 {
  color: #4a2118;
  border-bottom: 2px dotted #d69a4a;
  padding-bottom: 8px;
}

/* 本文 */
body.page-id-4285 .entry-content p,
body.page-id-4285 .entry-content li {
  color: #2e211c;
  line-height: 1.9;
}

/* 「今すぐ遊ぶ」をボタン風に */
body.page-id-4285 .entry-content a[href*="yokan-stall"] {
  display: block;
  width: fit-content;
  margin: 36px auto 42px;
  background: linear-gradient(180deg, #ffd86f 0%, #d8942f 65%, #b46a22 100%);
  color: #3a160c !important;
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  text-decoration: none !important;
  padding: 18px 46px;
  border-radius: 999px;
  border: 2px solid rgba(90, 38, 12, 0.35);
  box-shadow:
    0 6px 0 #7b3d18,
    0 14px 24px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.45);
}

body.page-id-4285 .entry-content a[href*="yokan-stall"]:hover {
  transform: translateY(2px);
  box-shadow:
    0 4px 0 #7b3d18,
    0 10px 18px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.45);
}

body.page-id-4285 .entry-content ol,
body.page-id-4285 .entry-content ul {
  width: fit-content;
  max-width: 90%;
  margin: 24px auto;
  padding-left: 1.6em;
  text-align: left;
}

body.page-id-4285 .entry-content li {
  margin-bottom: 10px;
}

/* 下部リンク・共有まわりを読みやすく */
/* 下部エリア全体の文字 */
body.page-id-4285 footer,
body.page-id-4285 .sharedaddy,
body.page-id-4285 .sd-sharing,
body.page-id-4285 .sd-title {
  color: #fff0c2 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.55);
}

/* 「シェアする」見出し */
body.page-id-4285 .sd-title,
body.page-id-4285 .sharedaddy h3 {
  color: #fff0c2 !important;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* シェアボタン本体は読みやすく */
body.page-id-4285 .sd-content a,
body.page-id-4285 .sharedaddy a,
body.page-id-4285 .share-button a {
  text-shadow: none !important;
}

/* 白系のシェアボタン内の文字を濃くする */
body.page-id-4285 .sd-content a span,
body.page-id-4285 .sharedaddy a span,
body.page-id-4285 .share-button a span {
  color: #3a160c !important;
  text-shadow: none !important;
}

/*---------------------------------
 　改行
---------------------------------*/
/* 通常はPC用改行を表示 */
.pc-br {
  display: inline;
}
/* 通常はスマホ用改行を非表示 */
.sp-br {
  display: none;
}

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

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

/* スマホ用 */
@media screen and (max-width: 600px) {
  body.page-id-4285 .entry-content {
    padding: 28px 22px;
  }

  body.page-id-4285 .entry-content p,
  body.page-id-4285 .entry-content li {
    font-size: 0.95rem;
    line-height: 1.85;
  }

  body.page-id-4285 .entry-content h2 {
    font-size: 1.45rem;
  }

 /* 通常はPC用改行を非表示 */
　.pc-br {
    display: none;
  }
 /* 通常はスマホ用改行を表示 */
 .sp-br {
    display: inline;
  }
}

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