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

/************************************
** 子テーマ用のスタイルを書く
************************************/

/*グローバルナビ　*/
.navi {
background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
  }
.navi .item-label, .navi .item-description {
    color: #484848;
}


/*目次の下の空白*/
#toc {
   margin-bottom: 5em;
}

/*見出し*/

.article h2 {
  padding: 1rem;
  border-left: 5px solid #a9a895;
  background: #f4f4f4;
}

.article h3 {
  padding: 0;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
}

.article h3 {
  border-bottom: 3px solid #dbdbdb;
  font-size: 20px;
  padding: 5px;
}

.article h4 {
  padding: 0;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
}

.article h4 {
border-left: 5px solid #dbdbdb;
 ?font-size: 20px;
  padding: 5px;
}

/*サイドバーの見出し*/
.sidebar h3{
  padding: 0.25em 0.7em;/*上下 左右の余白*/
  color: #494949;/*文字色*/
  background: #f4f5f7;/*背景透明に*/
  border-left: solid 5px #a9a895;/*左線*/
}

/*スペース*/
.spacer{
	padding:15px 0;
}

/*枠付きリストブルー*/
.list2 {
  position: relative;
  border: solid 2px #bdced9;
  margin: 3em 0 1em 0;
}
.list2-title {
  font-size: 1.15em;
  background: #bdced9;
  padding: 4px;
  text-align: center;
  color: #464646
  font-weight: bold;
  letter-spacing: 0.05em;
}
.list2 ul,.list1 ol {
  margin: 0;
  padding: 0 0.5em 0 0.5em;
  color: #464646;
  border: none;
  list-style-type: none;
}
 .list2 ol{
  counter-reset: number;
}
.list2 ul li,.list2 ol li {
  line-height: 1.5;
  padding: 0.5em 0 0.5em 1.4em;
  border-bottom: dashed 1px #bdced9;
}
.list2 ul li:before {
  position: absolute;
  font-family: FontAwesome;
  content: "\f14a";
  left : 0.5em;
  color: #bdced9;
}
.list2 ol li:before {
  display: inline-block;
  position: absolute;
  font-family: "Quicksand", sans-serif;
  content: counter(number);
  counter-increment: number;
  left: 0.5em;
  width: 22px;
  height: 22px;
  border-radius: 20%;
  background: #bdced9;
  color: white;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  line-height: 22px;
}
.list2 ul li:last-of-type,.list2 ol li:last-of-type{
  border-bottom: none;
}

/*シェブロンマークリスト*/
.list3 ul {
  border: solid 2px skyblue;
  border-radius: 5px;
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;
}

.list3 ul li {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;
}

.list3 ul li:before {
  
  font-family: FontAwesome;
  content: "\f138";/*アイコンの種類*/
  position: absolute;
  left : 1em;/*左端からのアイコンまでの距離*/
  color: skyblue;/*アイコン色*/
}


/*グレーボックス*/
.grey-box{
 font-weight: bold;
 background-color: #f6f6f6;
 padding:20px;
 margin-bottom:1em;
}

/*黄色い下線*/
.kasen{
 background: linear-gradient(transparent 50%, #dbd5c7 80%);
}

/*リンクボタン*/
a.btn {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 90%;
	padding: 1rem 2rem;
	margin: auto;
	font-size: 16px;
	font-weight: bold;
	background: linear-gradient(to top, rgb(54, 173, 215), #62c6e7);
	color: #fff;
	box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
	-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
	transition: 0.5s;
}
a.btn:hover {
	color: #fff;
	opacity: 0.5;
}


/*タブ見出しボックスピンク*/
.box-title-tab {
 position: relative;
 margin: 3em auto;
 padding: 1.2em 1em 1em;
 background-color: #fff; /*BOX背景色 */
 border: 2px solid #d5a599; /* 枠線の太さ・色 */
 box-shadow: 2px 2px 2px #ccc; /* 影の色 */
}
.title-tab {
 position: absolute;
 display: inline-block;
 top: -28px; /*タブ調整 */
 left: -2px; /*タブ調整 */
 padding: 1px 10px;
 height: 26px;
 font-weight: bold;
 color: #fff; /* タイトル色 */
 background-color: #d59787; /* タイトル背景色 */
 border-radius: 8px 8px 0 0;
}


/*ボックス*/
.box_point_01 {
    position: relative;
    padding: .5rem 1.1rem 1.2rem;
    background: #fffcf3;
    margin: 2rem 0;
    border: solid 3px #a9a895;
    border-radius: .5rem;
}

.box_point_01:after {
    position: absolute;
    content: "";
    right: -3px;
    top: -3px;
    border-width: 0 30px 30px 0;
    border-style: solid;
    border-color: #f7931e #fff #a9a895;
    box-shadow: -1px 1px 1px rgba(0,0,0,.15);
}

.box_point_01 .box-title {
    color: #818070;
    font-size: 1.25rem;
    font-weight: bold;
    border-bottom: dotted 3px #a9a895;
    margin-bottom: .9rem;
    padding: 0 1rem .5rem 2rem;
    text-indent: -.9rem;
    line-height: 1.4;
}

.box_point_01 .box-title:before {
    font-size: 1.4rem;
    margin-right: .4rem;
    display: inline-block;
    color: #a9a895;
    font-weight: normal;
    font-weight: 900;
    text-align: center;
    font-family: FontAwesome;
    content: "\f058";
}

.box_point_01 .li-check li:before {
    color: #f7931e;
}

.box_point_01 .ol-circle li:before {
    background: #f7931e;
}

.box_point_01 .ol-circle ol {
    padding: 1rem 0;
}

.box_point_01 .keiko_green {
    background: #ede9da;
}


/*投稿下プロフィール*/

.profile {
  background-color: #fff; /* 背景色 */
  padding: 20px;
  display: flex;
  border: solid 3px #eaedf2; /* 枠線の種類、太さ、色 */
}
.profile_image {
  text-align: center;
  padding-right: 14px;
}
.profile_image img {
  max-width: 80px;
  border-radius: 100%;
}
.profile_text_name {
  font-weight: bold;
  margin: 6px 0;
}
.profile_text_description {
  font-size: .8em;
  margin: 0;
}
@media screen and (max-width:480px) {
  .profile {
    display: block;
  }
  .profile_image {
    padding-right: 0;
  }
  .profile_image img {
    max-width: 120px;
  }
  .profile_text_name {
    text-align: center;
    margin-top: 6px;
  }
}


/*テーブル1*/
.table1 {
 width: 100%;
 text-align: center;
 border-collapse: collapse;
 border-spacing: 0;
 border: solid 3px #778ca3;
}
.table1 th {
 padding: 10px;
 border: solid 1px #778ca3;
 background: #778ca3;
 color: #ffffff;
}
.table1 td {
 padding: 10px;
 border: solid 1px #778ca3;
 background: #e9faf9;
}


/* カテゴリーラベル非表示 */
.entry-card .cat-label{
display: none;
}

/* 記事下カテゴリーラベル */
.cat-link {
 background-color: #f6f6f6;
 color: #222;
}


/* プライバシー保護消す */

.grecaptcha-badge { visibility: hidden; }


/************************************
****　目次
************************************/
/**目次**/
.toc {
  display: block;
  padding: 0px;
  max-width: 550px;
  border: 1.2px #ccc6ac solid !important;
  font-family: 'Noto Sans JP', sans-serif;
}
.toc-title {
  position: relative;
  padding: 10px 0;
  background: #ccc6ac;
  color: #fff;
  font-weight: bold;
}
.toc .toc-content {
  padding: 15px 20px;
  background-color: #fbfbfb;
}
.toc-list > li li a {
  font-weight: normal;
  font-size: 95%;
  color: #708090;
  margin-left: -10px;
}
.toc-list > li li ::before {
  content: '';
  width: 5px;
  height: 5px;
  display: inline-block;
  left: -15px;
  border-radius: 100%;
  background: #cdcdcd;
  position: relative;
  margin-bottom: 2px;
}
.toc .toc-list ul, .toc .toc-list ol {
    padding-left: 3em;
    margin: 0;
}

.article .toc-list > li li {
  list-style: none;
}

@media screen and (max-width: 750px){
/*目次スマホ用*/
.toc {
  margin: 10px 5px;
}
.toc-list > li a {
  font-size:13px;
}
.toc-list > li li a {
  margin-left: -3px;
}
.toc-list > li li ::before {
  margin-left:-5px;
}
}

/************************************
****　モバイル表示　ヘッダーメニュー・検索アイコン
************************************/
.mobile-menu-buttons{
height:50px;
box-shadow: none;
}
.mobile-menu-buttons > li {
padding-top:0;
}
.menu-button{
margin: auto;
}
.mobile-menu-buttons .menu-button:hover{
background-color:white;
}
span.fas.fa-search::before{
color:#6ec4db;/*検索マーク色変更はこちら*/
margin-left:1em;
}
span.fas.fa-bars::before{
color:#6ec4db;/*ハンバーガーメニュー色変更はこちら*/
margin-right:1em;
}
.navi-menu-caption.menu-caption,.home-menu-caption.menu-caption,.search-menu-caption.menu-caption,.top-menu-caption.menu-caption,.sidebar-menu-caption.menu-caption{
display:none;
}

/************************************
**モバイルスライドインメニュー
************************************/
span.fas.fa-times::before{
font-family: "Font Awesome 5 Free";
content: "\f060";
color:#6ec4db;/*矢印色変更はこちら*/
}
ul.menu-drawer:before{
font-size:1.2em;
background: white;
color:#333;
margin-bottom:1em;
border-bottom:3px dotted #6ec4db; /*点線の色変更はこちら*/
content: "メニュー";
}
ul.menu-drawer:after {
background: white;
}
.menu-drawer li {
padding:0;
}
.menu-drawer li{
font-weight: bold;
}
.menu-drawer a{
font-size:1.3em;
background-color:#ffffff;
color:#545454;
margin: .5em 0;
}
.menu-drawer a:hover{
background-color:#f7f7f7;
}
.menu-drawer .sub-menu {
padding:0;
}
.menu-drawer .sub-menu li{
font-size: .9em;
}
.menu-drawer .sub-menu li a::before {
font-family: "Font Awesome 5 Free";
content : "\f105";
color:#7b7b7b;
margin:0 .5em 0 1em;
}


/************************************
** スマホ用のヘッダーロゴを表示させる
************************************/
/*1023px以下でロゴを消す*/
@media screen and (max-width: 1023px){
	img.site-logo-image{
		visibility: hidden;
	}
}

/*1023px以下でモバイル用のロゴ表示*/
@media screen and (max-width: 1023px){
	.logo-menu-button.menu-button{
		background-image: url(http://otokohuku-life.com/wp-content/uploads/2024/06/124.png);
		background-size: auto 40px;
		background-position: center;
		background-repeat: no-repeat;
}
}

/************************************
** スマホヘッダーロゴ
************************************/
/*480以下でロゴの大きさ変更*/
@media screen and (max-width: 480px){
.logo-menu-button img {
	width: 350px;
    　　max-height: none;
	margin: 2px auto 0;
}
}
/*ヘッダーモバイルボタン高さ変更*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button{

	padding-top: 8px;
}

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

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

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


/************************************
** 固定トップページCSS
************************************/