@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.1.1
*/
@charset "UTF-8";
/*
Theme Name: Cocoon
Description: SEO・高速化・モバイルファースト最適化済みの無料テーマ。新型コロナ対策のため、こまめに手洗いをしよう！
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Text Domain: cocoon
Version: 2.1.5.1
Requires at least: 5.3.0
Requires PHP: 5.6.0
Tags: two-columns, left-sidebar, right-sidebar
License: GNU General Public License
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/


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

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



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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/* 吹き出し名前のフォント */
	.speech-name {
		font-size: 12px;
	}

/* タイトル自由変更枠　説明用 */
dl.List {
	overflow: hidden;
	zoom: 1;
}

dl.List dt {
	font-weight: bold;
	font-size:12px;
}

dl.List dd {
	margin:5px 0 2em 0;
	font-size:12px;
}

/* 複数の固定ページの日付を非表示にするコード */
.post-103351 .date-tags,
.post-102298　.date-tags,
.post-3121 .date-tags,
.post-36 .date-tags {
display: none;
}

/* タイトル付き 囲み枠（青）を追加するためのコード */
.box-blue {
	position: relative;	/* 配置に関するもの(ここを基準に) */
	max-width:600px; /* ボックスの横幅 */
	margin: 2em auto;	/* ボックスの外側余白(上下:2em　左右:auto) */
	padding: 1.7em 2em;	/* ボックスの内側余白(上下:1.7em　左右:2em) */
	border: 2px solid #0095D9;	/* ボックスの線 (太さ　線の種類　線の色)*/
	border-radius: 4px;	/* ボックスの角丸 */
}
.box-blue .box-title {
	position: absolute; /* 配置に関するもの(ここを動かす) */
	top: -10px; /* 上から（-10px）移動*/
	left: 30px; /* 左から(30px)移動 */
	background: #fff; /* タイトル背景色 */
	color: #0095D9; /* タイトル文字色 */
	padding: 0 10px;/* タイトルの余白 */
	line-height: 1;/* タイトルの行の高さ */
	font-size: 20px;/* タイトル文字の大きさ */
	font-weight: bold;/* タイトル文字の太さ */
}
.box-blue p {
	margin: 0; /* 文字の外側余白リセット*/
	padding: 0; /* 文字の内側余白リセット*/
}

/* サイドバーの見出しを変更するコード */
.sidebar h3 {
  border-bottom:3px solid #2f4f4f;/*下線の太さ、種類、色*/
  background:transparent;/*背景を透明に*/
  padding:10px 0 5px 3px;
}

/* サイドバーの検索ボックスを変更するコード */
.search-box .search-edit {
font-size: 14px;
padding: 5px 20px;
border-color: #000;
border-radius: 30px;
height: 50px;
}
.search-box .search-submit {
top: 0;
right: 0px;
height: 100%;
width: 60px;
color: #ccc;
}

/* 旧目次を中央寄せにするコード */
#toc_container {
        margin: auto;
}


/**新目次のデザイン**/
.toc {
  display: block;
  padding: 0px;	/* ボックスの内側余白 */
  max-width: 600px; /* ボックスの横幅 */
  border: 1px #ff9999 solid !important;	/* ボックスの線 (太さ　線の種類　線の色)*/
  font-family: 'Noto Sans JP', sans-serif;
}
.toc-title {
  position: relative;
  padding: 10px 0;/* タイトルの内側余白 */
  background: #FF7F7F; /* タイトル背景色 */
  color: #fff; /* タイトル文字色 */
  font-weight: bold;/* タイトル文字の太さ */
　　　border-radius:4px;/* タイトルの角丸 */
}
.toc .toc-content {
  padding: 15px 20px;
  background-color: #FFE8E8; /* ボックス背景色 */
}
.toc-list > li li a {
  font-weight: normal;
  font-size: 90%;
  color: #333;
  margin-left: 0px;
}
.article .toc-list > li li {
  list-style: none;
}


/* リード文とまとめの箇条書き枠 */
.box6-red {
	position:relative;/* 配置に関するもの(ここを基準に) */
	padding: 2em 2em 1.7em;	/* ボックスの内側余白(上:2em　左右:2em 下：1.7em) */
	margin: 3em auto;/*ボックス外側余白*/ 
	background-color: #FFE8E8; /*ボックス背景色*/ 
	box-shadow: 0px 1px 5px rgba(0,0,0,0.1);/*ボックス影*/ 
	border-radius:4px;/* ボックス角丸 */
	max-width:600px;/*ボックス横幅*/ 
}
.box6-red .box-title {
	position: absolute;/* 配置に関するもの(ここを動かす) */
	top: -22px;/* 上から（-22px）移動*/
	left: 30px;/* 左から（30px）移動*/
	padding: 0.2em 2em;/* テープ内側余白*/
	color: #ff7f7f; /* テープ文字色 */
	font-weight: bold;/* テープ文字太さ*/
	font-size:14px;/* テープ文字大きさ*/
	background-color: rgba(255,255,255,.1);/* テープ背景色と透過*/
	border-left: 2px dotted rgba(0,0,0,.1);/* テープのギザギザ左*/
	border-right: 2px dotted rgba(0,0,0,.1);/* テープのギザギザ→*/
	box-shadow: 0 0 5px rgba(0,0,0,0.2); /* テープ影*/
	transform: rotate(-3deg);/* テープの傾き*/
}
.box6-red p{
	margin: 0; /* 文字の外側余白リセット*/
	padding: 0; /* 文字の内側余白リセット*/
	font-size:14px;/* 文字大きさ*/
}

/* 薄い赤系のh2タグ */
h2.red2 {
background: transparent;
border-bottom: solid 3px #ff9393;
padding: 0.2em 0.5em;
color: #454545;
}

/* 薄い赤系のh3タグ */
h3.red2 {
background: transparent;
border: transparent;
border-left: solid 5px #ff9393;
padding: 0.2em 0.5em; color: #454545;
}

/* デフォルトの赤枠から薄い赤系に変更 */
.blank-box.bb-red {
  border-color: #FFE8E8;
}
.blank-box.bb-red {
border-color: #ec8484;
  background-color: #FFE8E8;
}
.blank-box.bb-tab.bb-red .bb-label {
  background-color: #ec8484;
}

/* トグルボックスを薄い赤系に変更 */
.toggle-button {
	background-color: #ff7f7f; /* 見出しの背景色 */
	color: #fff; /* 見出しの文字色 */
        font-weight: bold;  /* 見出しの文字太字 */
        text-align: left;/*左寄せ */
	border: none;; /* 見出しのボーダーを消す */
        font-size:14px;
}
.toggle-button::before {
	color: #fff; /* 「＋」記号の色 */
}
.toggle-checkbox:checked ~ .toggle-content {
	border: none; /* ボックスのボーダーを消す */
  background: #FFEFEF; /* ボックスの背景色 */
}

/* タブ　タイトル枠 タイトル太字 */
.kakomi-tab {
 position: relative;
 margin: 3em auto; /* ボックスの外側余白 */
 padding: 2em 2em 1.7em; /* ボックスの内側余白 */
 max-width:600px; /* ボックスの横幅 */
 background-color: #FFE8E8; /*ボックス背景色 */
 border: 1px solid #ff9999; /* 枠線の太さ・色 */
 border-radius: 0 4px 4px 4px; /* 角の丸み */
 font-size: 14px;
}
.title-tab {
 position: absolute;
 display: inline-block;
 top: -18px; /*タブ調整 */
 left: -15px; /*タブ調整 */
 padding: 0.6em 1em; /* タイトルの内側余白 */
 line-height: 1; /* タイトルの行の高さ */
 font-weight: bold;
 color: #fff; /* タイトル色 */
 background-color: #ff7f7f; /* タイトル背景色 */
 border-radius: 4px;
 font-size: 14px;
}
.title-tab:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 20%;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top: 10px solid #ff7f7f;
}

/* タイトル自由変更枠 */
.box5-red1 {
 position: relative;
 margin: 3em auto; /* ボックスの外側余白 */
 padding: 2em 2em 1.7em; /* ボックスの内側余白 */
 max-width:600px; /* ボックスの横幅 */
 background-color: #FFE8E8; /*ボックス背景色 */
 border: 1px solid #ff9999; /* 枠線の太さ・色 */
 background: #FFE8E8; /* ボックス背景色 */
 border-radius: 0 4px 4px 4px; /* 角の丸み */
 font-size: 14px;
}
.box-title1 {
 position: absolute; /* 配置に関するもの(ここを動かす) */
 display: inline-block;
 top: -18px; /*タブ調整 */
 left: -15px; /*タブ調整 */
 padding: 0.6em 1em; /* タイトルの内側余白 */
 line-height: 1; /* タイトルの行の高さ */
 font-weight: bold;
 color: #fff; /* タイトル色 */
 background-color: #ff7f7f; /* タイトル背景色 */
 border-radius: 4px;
 font-size: 14px;
}

.box5-red1 p {
 padding:0;
 margin:0;
 font-size:14px;/* 文字大きさ*/
}

/* タイトル自由変更枠 アイコン付き */
.box-title2 {
 position: absolute; /* 配置に関するもの(ここを動かす) */
 display: inline-block;
 top: -18px; /*タブ調整 */
 left: -15px; /*タブ調整 */
 padding: 0.6em 2em; /* タイトルの内側余白 */
 line-height: 1; /* タイトルの行の高さ */
 font-weight: bold;
 color: #fff; /* タイトル色 */
 background-color: #ff7f7f; /* タイトル背景色 */
 border-radius: 4px;
 font-size: 14px;
}
.box-title2:before {
   font-family: FontAwesome;
   content: "\f058"; /*アイコン*/
   color:  #fff; /* 色 */
   position: absolute;
   left: 10px;
}

/* タイトル自由変更枠 レシピ用アイコン付き */
.box-title3 {
 position: absolute; /* 配置に関するもの(ここを動かす) */
 display: inline-block;
 top: -18px; /*タブ調整 */
 left: -15px; /*タブ調整 */
 padding: 0.6em 2em; /* タイトルの内側余白 */
 line-height: 1; /* タイトルの行の高さ */
 font-weight: bold;
 color: #fff; /* タイトル色 */
 background-color: #ff7f7f; /* タイトル背景色 */
 border-radius: 4px;
 font-size: 14px;
}
.box-title3:before {
   font-family: FontAwesome;
   content: "\f0f5"; /*アイコン*/
   color:  #fff; /* 色 */
   position: absolute;
   left: 10px;
}

/* リストアイコン チェックマーク*/
.list-3{
   list-style: none;
   padding:0;
   margin:0;
}
.list-3 li { 
   position: relative;
   margin:0.5em 0 !important;
   padding-left: 25px;
 font-size: 14px;
}
.list-3 li:before {
   font-family: FontAwesome;
   content: "\f058"; /*アイコン*/
   color:  #ff9999; /* 色 */
   position: absolute;
 left:0;
}

/* リストアイコン ＞ */
.list-4{
   list-style: none;
   padding:0;
   margin:0;
}
.list-4 li { 
   position: relative;
 margin:0.5em 0 !important;
 padding-left: 25px;
 font-size: 14px;
}
.list-4 li:before {
   font-family: FontAwesome;
   content: "\f138"; /*アイコン*/
   color:  #ff9999; /* 色 */
   position: absolute;
 left:0;
}

/* リストアイコン リード・まとめ用 */
.list-5{
   list-style: none;
   padding:0;
   margin:0;
}
.list-5 li { 
   position: relative;
   margin:0.5em 0 !important;
   padding-left: 25px;
}
.list-5 li:before {
   font-family: FontAwesome;
   content: "\f058"; /*アイコン*/
   color:  #ff9999; /* 色 */
   position: absolute;
 left:0px;
}

/* スマホ */
@media screen and (max-width: 834px) {
.article .list-3{
		padding-left: 0px ;
	}
.article .list-4{
		padding-left: 0px ;
	}
.article .list-5{
		padding-left: 0px ;
	}
}

/* モバイルヘッダーメニューを調整するコード */
.mobile-header-menu-buttons{
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 42px !important;
}

.mobile-header-menu-buttons .logo-menu-button
{
 overflow: initial;
}

.mobile-header-menu-buttons .logo-menu-button img {
    max-height: 24px;
    width: auto;
}
.mobile-header-menu-buttons > li{
	height: 24px;
	line-height: 1;
	padding: 0 !important;
}

#navi-menu-content{
	line-height: 1.5;
}

.js-opacity{
	background: rgba(255,255,255,.8);
}

/* タイトル自由変更枠　応急処置用 */
.box5-red {
	position: relative;	/* 配置に関するもの(ここを基準に) */
	max-width:600px; /* ボックスの横幅 */
	margin: 3em auto;	/* ボックスの外側余白 */
	padding: 2em 2em 1.7em;	/* ボックスの内側余白 */
	border: 1px solid #ff9999;	/* ボックスの線 (太さ　線の種類　線の色)*/
	border-radius: 4px;	/* ボックスの角丸 */
	background: #FFE8E8; /* ボックス背景色 */
}
.box5-red .box-title {
	position: absolute; /* 配置に関するもの(ここを動かす) */
	top: -18px; /* 上から（-18px）移動*/
	left: 27px; /* 左から(27px)移動 */
	background: #ff7f7f; /* タイトル背景色 */
	color: #fff; /* タイトル文字色 */
	padding: 0.6em 1em;/* タイトルの内側余白 */
	line-height: 1;/* タイトルの行の高さ */
	font-size: 14px;/* タイトル文字の大きさ */
	font-weight: bold;/* タイトル文字の太さ */
	border-radius:4px;/* タイトルの角丸 */
}
.box5-red p {
	margin: 0; /* 文字の外側余白リセット*/
	padding: 0; /* 文字の内側余白リセット*/
	font-size:14px;/* 文字大きさ*/
}

ul.box5li {
	margin: 0; /* 文字の外側余白リセット*/
	padding: 0; /* 文字の内側余白リセット*/
}

ul.box5li li {

font-size:14px;
}

/* 数字リスト */
 .list-7{
    counter-reset:number; 
    list-style-type: none; 
    padding:0;
    margin:0;
 }
 .list-7 li { 
    position: relative;
    margin:0.5em 0 !important;
    padding-left: 30px;
    font-size: 14px;
 }
 .list-7 li:before {
    counter-increment: number;
    content: counter(number);
    background-color: #ff9999;/* 文字背景色 */
    color: #fff;/*文字色*/
    position: absolute;
    top: 2px;
    left: 0;
    font-weight:bold;
    border-radius: 50%;
    line-height:20px;
    width: 20px;
    height: 20px;
    text-align: center;
    font-size: 12px;
 } 

@media screen and (max-width: 768px){
 .article ul, .article ol {
     padding-left: 0px; /* スマホ閲覧時の余白リセット(cocoon) */
}
}

/* レシピ用枠 */

.box7 {
 position: relative;
 margin: 3em auto; /* ボックスの外側余白 */
 padding: 2em 2em 1.7em; /* ボックスの内側余白 */
 max-width:600px; /* ボックスの横幅 */
 border: 1px solid #ff9999; /* 枠線の太さ・色 */
 border-radius: 0 4px 4px 4px; /* 角の丸み */
 font-size: 14px;
}


/* 新トグルボックス用 */

div.reference p {
  font-size: 10px;
  color: #999999;
  line-height: 3.5;
}

div.reference a {
  color: #999999;
}

div.letterbody p {
  font-size: 14px;
}

summary {
  position: relative;
  display: block; /* 矢印を消す */
  padding: 5px 5px 5px 30px; /* アイコンの余白を開ける */
  cursor: pointer; /* カーソルをポインターに */
  font-weight: bold;
  font-size: 14px;
  background-color: #FF7F7F;
  transition: 0.2s;
  border-radius: 5px;
  color: #FFF;
}
summary:hover {
  background-color: #FFA6A6;
}
summary::-webkit-details-marker {
  display: none;/* 矢印を消す */
}

/* 疑似要素でアイコンを表示 */
summary:before,
summary:after {
  content: "";
  margin: auto 0 auto 10px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}
summary:before {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background-color: #FF7F7F;
}
summary:after {
  left: 6px;
  width: 5px;
  height: 5px;
  border: 4px solid transparent;
  border-left: 5px solid #fff;
  box-sizing: border-box;
  transition: .1s;
}

/* オープン時のスタイル */
details[open] summary {
  background-color: #FF7F7F;
}
details[open] summary:after {
  transform: rotate(90deg); /* アイコンを回転 */
  left: 4px; /* 位置を調整 */
  top: 5px; /* 位置を調整 */
}
details > p {
  border-radius: 0 0 5px 5px;
  background-color: #FFEFEF;
  padding: 10px 20px;
  margin: 0;
}

/* アニメーション */
details[open] .details-content {
  animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.reference p {
    font-size: 10px;
    color: #999999;
}
  summary {
  position: relative;
  display: block; /* 矢印を消す */
  padding: 5px 5px 5px 30px; /* アイコンの余白を開ける */
  cursor: pointer; /* カーソルをポインターに */
  font-weight: bold;
  font-size: 14px;
  background-color: #FF7F7F;
  transition: 0.2s;
  border-radius: 5px;
  color: #FFF;
}
summary:hover {
  background-color: #FFA6A6;
}
summary::-webkit-details-marker {
  display: none;　/* 矢印を消す */
}

/* 疑似要素でアイコンを表示 */
summary:before,
summary:after {
  content: "";
  margin: auto 0 auto 10px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}
summary:before {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background-color: #FF7F7F;
}
summary:after {
  left: 6px;
  width: 5px;
  height: 5px;
  border: 4px solid transparent;
  border-left: 5px solid #fff;
  box-sizing: border-box;
  transition: .1s;
}

/* オープン時のスタイル */
details[open] summary {
  background-color: #FF7F7F;
}
details[open] summary:after {
  transform: rotate(90deg); /* アイコンを回転 */
  left: 4px; /* 位置を調整 */
  top: 5px; /* 位置を調整 */
}
details > p {
  border-radius: 0 0 5px 5px;
  background-color: #FFEFEF;
  padding: 10px 20px;
  margin: 0;
}

/* アニメーション */
details[open] .details-content {
  animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
	
/* 画像に枠線を入れる */	
.wakuwaku {border: solid 1px #c3c3c3;}


/*.cat-link {*/
/*color: #127997;*/
/*border:none;*/
/*background-color: transparent;*/
/*}*/

.btn-l{
margin: 1em;
}
.article h2,
.article h3,
.article h4,
.article h5,
.article h6
{
    margin: 2.4em 0 1em;
}

.speech-wrap {
    margin-top: 1em;
    margin-bottom: 1em;

}
p,
.paragraph {
    margin: 1.2em 0;
}
table tr:nth-of-type(2n+1) {
    background-color: #fafbfc;
}

@media screen and (min-width: 1024px) {
    .mobile-header-menu-buttons{
        display: none;
    }

}

table{
    border: solid 1px #cfcece !important;

}
th,td{
    border: solid 1px #cfcece !important;
}
.article ul li, .article ol li{

}

@media screen and (max-width: 768px) {
    .article ul, .article ol {
        padding-left: 1.5rem;
    }
}

/* サイドバーの z-index を1に設定 */