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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*ヘッダーロゴとテキスト*/
/*
.logo {
  text-align: left;
}
*/
.logo-header .site-name::after {
  content: 'ハーポルホード高橋 公式サイト';
  font-size: 24px;
	font-weight: bold;
  color: #ffffff;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  margin-left: 20px;
	margin-bottom: 20px;
}
.tagline {
  display: none;
	content: none;
}

/*グローバルメニューにマウスオーバーすると色が変わる*/
.navi .menu-item:hover {
	background-color: #688280;
	transition: 0.3s;
}

/*グローバルナビメニューの仕切線*/
#navi ul li:first-child {
  border-left: 1px solid #ccc;
}
#navi ul li {
  border-right: 1px solid #ccc;
}

/*フッターの縦幅はパディングで制御*/
#footer {
  padding-top: 1px;
}

/*フッターロゴの画像サイズ*/
.footer-bottom-logo img {
	height: 100px;
	width: auto;
}

/*画像ウィジェットの画像をサイドバーと同じ幅に自動調節する*/
#sidebar .widget_media_image img {
  width: 100%;
  height: auto;
}

/*h1見出しの文字サイズを大きくする*/
.article h1 {
	font-size: 32px;
}

/*記事ヘッダーの子要素の順序指定*/
.article-header {
	display: flex;
	flex-direction: column;
}
.entry-tile {
	order: 1;
}
.date-tags {
	order: 2;
}
.eye-catch-wrap {
	order: 3;
}
.sns-share {
	order: 4;
}

/*TOC+ 目次ブロックを中央寄せにして上下の余白を設定*/
#toc_container {
  margin: 1.5em auto 2.0em;
}

/* 画像ボタンのマウスオーバー時 */
.img-button a:hover img{
  opacity: 0.6;
  transition: all 0.5s ease;
}

/* MathJaxのディスプレイ数式の上下余白を狭くする */
mjx-container[jax="CHTML"][display="true"] {
  margin-top: 0.5em !important;
  margin-bottom: 0.5em !important;
}

/* MathJaxの長いディスプレイ数式を左右にスクロールする */
mjx-container[jax="CHTML"][display="true"] {
  display: block !important;  /* ブロック要素として扱う */
  position: relative !important;  /* 絶対配置の子要素(mjx-labels)を枠内に留める */
  max-width: 100% !important;  /* 親要素の横幅を超えない */
  overflow-x: auto !important;  /* 横スクロール有効 */
  overflow-y: hidden !important;  /* 縦スクロール非表示 */
  min-width: auto !important;  /* MathJax が算出する余計なmin-widthを打ち消す */
  padding: 8px 0 !important;  /* 上下のhiddenで数式が切れるのを防止 */
}
/* 式番号をcontainer内に絶対配置する */
mjx-container[jax="CHTML"][display="true"] mjx-labels {
  position: absolute !important; /* 枠の中に固定 */
  right: 0.0em !important;       /* 数値が小さいほど式番号の位置が右に動く */
  width: auto !important;
}

/* 追加CSSクラス toggle-button-only ：ボタンだけで枠線がないアコーディオン */
/* アコーディオンに関する外枠を完全に消す */
.toggle-button-only.toggle-wrap {
  border: none !important;
  background: none !important;
  padding: 0 !important;
}
/* 展開されるブロックの外枠を消す */
.toggle-button-only .toggle-content {
  border: none !important;
  background: none !important;
  padding: 0 !important;
}
/* ボタンの＋－記号を消す */
.toggle-button-only .toggle-button::before {
  display: none !important;
}
/* 展開前のボタンテキスト */
.toggle-button-only .toggle-checkbox:not(:checked) + .toggle-button::after {
  content: "▼ 続きを展開する ▼";
}
/* 展開後のボタンテキスト */
.toggle-button-only .toggle-checkbox:checked + .toggle-button::after {
  content: "▲ 閉じる ▲";
}

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

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

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