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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*TOPへ戻るボタン位置（reCAPTCHAと被るので）*/
.grecaptcha-badge {
    bottom: 70px !important;
}
/*全体のシャドウを無効*/
* {
    box-shadow: none !important;
    -webkit-box-shadow: none !important; /* Safari, Chrome 用 */
    -moz-box-shadow: none !important;    /* Firefox 用 */
}
/*サイドバーのレイヤー順位を下げる*/
#main {
  z-index: 1;
}
#sidebar {
  z-index: 0;
}

/*ロゴ左寄せ*/
.logo {
	text-align: left; 
}
.logo-image {
    padding: 0px;
    font-size: inherit;
}

/*ロゴ列右SNSボタン*/
.top-sns{
    position: absolute;
	 margin-top: 0;
    right: 10px;
    width: 100px;
}

/*ロゴ列右SNSボタン右寄せ*/

.top-sns-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    align-content: center;
    justify-content: right;
    row-gap: 10px;
    column-gap: 10px;
}
.top-sns-follow-buttons a {
    width: 40px;
    height: 40px;
    font-size: 30px;
    display: flex;
    align-items: center;
}

.top-sns-buttons a {
    align-content: center;
    align-items: center;
    background-color: var(--cocoon-white-color);
    border-radius: var(--cocoon-basic-border-radius);
    display: inline-flex;
    font-size: 30px;
    justify-content: center;
  /*    height: 45px;*/
    position: relative;
    text-align: center;
  /*    width: 32%; */
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    margin: 0 !important;
    color: var(--cocoon-sns-color);
    text-decoration: none;
	  border-radius: 50%;
}

.comment-form-email {
  display: none;
}

/*記事プロフィール下のSNSフォローボタンの横幅調整（）*/
.tagline {
    text-align: left;
    font-size: 14px;
    margin: .6em 1em;
}

/*記事プロフィール下のSNSフォローボタンの横幅調整（）*/
.sns-follow-buttons a {
    margin-right: 0;
    width: 49.5%;
}

/*記事プロフィール下のSNSフォローボタンの横幅調整（）*/
.sns-follow-buttons a {
    margin-right: 0;
    width: 49.5%;
}

/*記事プロフィール下のFEEDとRSSのボタンを非表示*/
a.follow-button.feedly-button.feedly-follow-button-sq{
display:none;
}
a.follow-button.rss-button.rss-follow-button-sq{
display:none;
}
/*記事プロフィール 管理人のリンクを無効*/
.author-name a {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: inherit;
}

/*  ○○事件をざっくりと */
.zakkuritotitle {
position: relative;
    padding: 0.2rem 1rem 0.2rem 1rem;
    border: 3px solid #38b6ff;
    background: #38b6ff;
	 color:#fff;
    font-weight: bold;
    contain-intrinsic-block-size: auto 10px;
	 margin-bottom: 20px;
	 display: inline-block;
	left: 0.5rem;
}


.zakkuritotitle:before,
.zakkuritotitle:after {
    position: absolute;
    top: 100%;
    left: 30px;
    height: 0;
    width: 0;
    border: solid transparent;
    content: "";
}

.zakkuritotitle:before {
    margin-left: -12px;
    border-color: transparent;
    border-top-color: #38b6ff;
    border-width: 12px;
}

.zakkuritotitle:after {
    margin-left: -8px;
    border-color: transparent;
    border-top-color: #38b6ff;
    border-width: 8px;
}


/*要約用 チェックマークに変更　*/
.digest ul {
  list-style: none;
}

.digest ul li {
  position: relative;
  line-height: 1.8;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.digest ul li:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f00c";
  position: absolute;
  left: -1.4em;
  top: 0.1em;
}

.digest ul li:nth-child(4n + 1):before {
  color: #ffde59; /* 1st, 5th, 9th, etc. */
}

.digest ul li:nth-child(4n + 2):before {
  color: #ff5757; /* 2nd, 6th, 10th, etc. */
}

.digest ul li:nth-child(4n + 3):before {
  color: #7ed957; /* 3rd, 7th, 11th, etc. */
}

.digest ul li:nth-child(4n + 4):before {
  color: #38b6ff; /* 4th, 8th, 12th, etc. */
}
/*タイムラインのラベル　*/
.timeline-item-label {
    width: 110px;
    float: left;
    padding-top: 18px;
    text-align: center!important;
    padding-right: 1em;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: bold;
	border-bottom: 3px solid #e5e4e6;/*下線　*/

}
/*FAQのカラー　*/
.faq-wrap {
    --cocoon-custom-question-color: #ff5757;/*Q*/
    --cocoon-custom-answer-color: #ffde59!important;/*A*/
    --cocoon-custom-border-color: transparent;
    --cocoon-custom-background-color: transparent;
    --cocoon-custom-text-color: var(--cocoon-text-color);
    border-color: var(--cocoon-custom-border-color);
    background-color: var(--cocoon-custom-background-color);
    color: var(--cocoon-custom-text-color);
}
.faq-wrap.is-style-square.not-nested-style>.faq>*>.faq-question-label {
    background-color:#ff5757!important;
}

/*コメント送信ボタンー　*/
.form-submit #submit {
    width: 80%;
    margin: 0 auto;
    display: block;
    background-color: #ff5757;
    color: #fff;
    border-radius: 5px;
    animation: sway 1s infinite alternate;
}

/* ○に✓チェックマークに変更　*/
.marucheck ul {
  list-style: none;
}

.marucheck ul li {
  position: relative;
  line-height: 1.8;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.marucheck ul li:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f058";
  position: absolute;
  left: -1.4em;
  top: 0.1em;
}

/* Color cycling for .marucheck */
.marucheck ul li:nth-child(4n + 1):before {
  color: #ffde59;
}

.marucheck ul li:nth-child(4n + 2):before {
  color: #ff5757;
}

.marucheck ul li:nth-child(4n + 3):before {
  color: #7ed957;
}

.marucheck ul li:nth-child(4n + 4):before {
  color: #38b6ff;
}


/* ol li 番号装飾 */
.number-list-dec ol {
  counter-reset: li;
  padding-left: -25px;
}

.number-list-dec ol > li {
  list-style: none;
  position: relative;
  padding-left: 0.7em;
}

.number-list-dec ol > li:before {
  border-radius: 50%;
  box-sizing: content-box;
  color: #fff; /* Text color for the number itself */
  content: counter(li);
  counter-increment: li;
  display: block;
  height: 1.2em;
  left: 1px;
  line-height: 1.2;
  padding: 0;
  position: absolute;
  text-align: center;
  top: 0.2em;
  -webkit-transform: scale(.75);
  transform: scale(.75);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  width: 1.2em;
  left: -1.2em;
}

/* Color cycling for number-list-dec */
.number-list-dec ol > li:nth-child(4n + 1):before {
  background-color: #ffde59;
  box-shadow: 0 0 0 1px #ffde59;
}

.number-list-dec ol > li:nth-child(4n + 2):before {
  background-color: #ff5757;
  box-shadow: 0 0 0 1px #ff5757;
}

.number-list-dec ol > li:nth-child(4n + 3):before {
  background-color: #7ed957;
  box-shadow: 0 0 0 1px #7ed957;
}

.number-list-dec ol > li:nth-child(4n + 4):before {
  background-color: #38b6ff;
  box-shadow: 0 0 0 1px #38b6ff;
}


/*プロフィールの肩書*/
.author-widget-name{ 
	display: block;
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
	font-weight: 900;
}

/*Q&A*/
.qa-list dl {
    position: relative;
    margin: 0;
    padding: 28px 80px 28px 30px;
    cursor: pointer;
    border-bottom: 1px solid #A5A5A5;
}
.qa-list dl:first-child {
    border-top: 1px solid #A5A5A5;
}
.qa-list dl::before {
    position: absolute;
    top: 35px;
    right: 35px;
    display: block;
    width: 7px;
    height: 7px;
    margin: auto;
    content: '';
    transform: rotate(135deg);
    border-top: 2px solid #A5A5A5;
    border-right: 2px solid #A5A5A5;
}
.qa-list .open::before {
    transform: rotate(-45deg);
}
.qa-list dl dt {
    position: relative;
    margin: 0;
    padding: 0 0 0 30px;
    font-weight: bold;
}
.qa-list dl dt::before {
    line-height: 1;
    position: absolute;
    top: 3px;
    left: 0;
    display: block;
    content: 'Q.';
    color: #333;
}
.qa-list dl dd::before {
    line-height: 1;
    position: absolute;
    top: 3px;
    left: 2px;
    display: block;
    content: 'A.';
    font-weight: bold;
    color: #333;
}
.qa-list dl dd {
    position: relative;
    display: none;
    height: auto;
    margin: 20px 0 0;
    padding: 0 0 0 30px;
}
.qa-list dl dd p {
    margin: 30px 0 0;
}
.qa-list dl dd p:first-child{
    margin-top: 0;
}

@media screen and (max-width: 767px) {
.qa-list dl {
    position: relative;
    padding: 15px 40px 15px 10px;
}
.qa-list dl::before {
    top: 20px;
    right: 20px;
    width: 7px;
    height: 7px;
}
.qa-list dl dt {
    padding: 0 0 0 30px;
}
.qa-list dl dt::before {
    top: 3px;
    left: 5px;
    content: 'Q.';
}
.qa-list dl dd::before {
    top: 5px;
    left: 5px;
    content: 'A.';
}
.qa-list dl dd {
    margin: 10px 0 0;
    padding: 0 0 0 30px;
    font-size: 14px;
}
.qa-list dl dd p {
    margin: 30px 0 0;
}
.qa-list dl dd p:first-child{
    margin-top: 0;
}
}
/*コメント送信ボタンを動かす*/
#submit {
    width: 80%;
    margin: 0 auto;
    display: block;
	background-color: #38b6ff;
    color: #fff;
	border-radius: 5px;
    animation: sway 1s infinite alternate;
  }
  @keyframes sway {
    0%, 100% { transform: translateX(0); }
    25%, 75% { transform: translateX(-5px); }
    50% { transform: translateY(0); }
  }

/*コメント誘導文言を動かす*/
.comment-reply-title {
  animation: jelly 2.5s infinite;
  opacity: 1;
}
@keyframes jelly {
  0%, 40% {
    transform: skew(0deg, 0deg);
  }
  5% {
    transform: skew(5deg, 5deg);
  }
  10% {
    transform: skew(-4deg, -4deg);
  }
  15% {
    transform: skew(3deg, 3deg);
  }
  20% {
    transform: skew(-2deg, -2deg);
  }
  25% {
    transform: skew(1deg, 1deg);
  }
  30% {
    transform: skew(-0.6deg, -0.6deg);
  }
  35% {
    transform: skew(0.3deg, 0.3deg);
  }
  40% {
    transform: skew(0.6deg, 0.9deg);
  }
  50% {
    transform: skew(0.9deg, 0.9deg);
  }
}

/*H3の装飾*/
.article h3 {
    border: 0;
    font-size: 16px　!important;
    padding-top: 12px;
    padding-right: 20px;
    padding-bottom: 12px;
    padding-left: 5px;
    margin-bottom: -3px;
    margin-top: 10px;
}

/*H4の装飾*/
.article h4 {
    border: 0;
    border-left: solid 5px #FFF;
    font-size: 16px　!important;
    padding-top: 0px;
    padding-right: 20px;
    padding-bottom: 12px;
    padding-left: 5px;
    margin-bottom: -15px;
    margin-top: 10px;
}

/* サイドバー(フッター)* 　カテゴリー　　アイコン変更*/
.widget_categories ul li a::before {
    font-family: "Font Awesome 5 Free";
    content: '\f105';
    color: #FFFFFF!important;
    padding-right: 6px;
    font-weight: 900;
}
/************************************
** 目次の装飾
************************************/
/* 目次全体デザイン */
#main .entry-content .toc {
    background: #fdeff2
    border: none;
    display: block;
    border-top: 5px solid #d3381c;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    padding: 20px 25px;
}

/* 目次の文字指定 */
#main .entry-content .toc .toc-title {
    text-align: left;
    margin: 0 20px 20px -10px;
    padding-left: -20px;
    font-size: 23px;
    font-weight: 700;
    color: #d3381c;
}

/* 目次のアイコン設定（タイトル用） */
#main .entry-content .toc .toc-title:before {
    top: 0;
    left: -45px;
    width: 50px;
    height: 50px;
    font-family: "Font Awesome 5 Free";
    content: "\f03a";
    font-size: 20px;
    margin-right: 5px;
    color: #FFF;
    background-color: #d3381c;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    padding: 14px;
}

/* 目次リストのデザインカスタマイズ */
#main .entry-content .toc .toc-content ol {
    counter-reset: toc-item; /* 目次項目のカウンターをリセット */
    padding: 0 0.5em;
    position: relative;
}

/* 目次リストアイテムのスタイル */
#main .entry-content .toc .toc-content ol li {
    line-height: 1.5;
    padding: 0.7em 0 0.5em 1.4em;
    border-bottom: dashed 1px #d3381c;
    list-style-type: none !important;
}

/* 目次リストアイテムの番号表示 */
#main .entry-content .toc .toc-content ol li:before {
    counter-increment: toc-item; /* カウンターを1増やす */
    content: counter(toc-item) ". "; /* 番号を表示 */
    position: absolute;
    left: 0.5em;
    color: #d3381c;
    font-weight: inherit;
}

/* 最後の目次リストアイテムのスタイル */
#main .entry-content .toc .toc-content ol li:last-of-type {
    border-bottom: none;
}

/* h2の目次項目のスタイル */
#main .entry-content .toc .toc-content .toc-list li {
    font-weight: 700;
}

/* h3以降の目次項目のスタイル */
#main .entry-content .toc .toc-content .toc-list li li {
    font-weight: normal;
}

/************************************
** タイムラインのカスタマイズ
************************************/
@media screen and (min-width: 481px){
.timeline-item:before {
/* 丸アイコン色 */
background: #d3381c;
}
.timeline-item-content{
/* タイムライン線 */
border-left: 3px #e5e4e6 solid;
}
.timeline-box {
/* 外枠を消す*/
border: none;
}
}

@media screen and (max-width: 480px){
.timeline-item-content {
	/* テキスト位置調整*/
    width: auto;
    padding-top: 5px;
    padding-right: 15px;
    padding-bottom: 5px;
    padding-left: 15px;
    float: none;
    float: none;
    border: none;
}
.timeline-item:before {
/* 丸アイコン色 サイズ 位置*/
background: #d3381c;
width: 12px;
height: 12px;
/* 丸アイコン位置 */
    left: -8px;
    top: 34px;
}
.timeline-box {
/* 外枠を消す*/
border: none;
}
.timeline>li.timeline-item {
/* タイムライン線 */
    overflow: visible;
    border-left: 3px #e5e4e6 solid;
}
}

/**********50音順リスト**********/
#kana-container {
  width: 100%;
  display: flex;
  flex-wrap: nowrap; /* Prevent wrapping */
}

#kana-container .kana-column {
  flex: 1;
  list-style-type: none !important; /* Remove list markers */
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

#kana-container .kana-column .kana-item {
  flex: 1;
  position: relative;
  text-align: center;
  border: 1px solid #ccc;
  list-style-type: none !important; /* Remove list markers */
}

#kana-container .kana-column .kana-item::before {
  content: "";
  display: block;
  padding-top: 100%; /* 1:1 aspect ratio */
}

#kana-container .kana-column .kana-item::after {
  content: attr(data-text);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Override existing styles */
#kana-container .kana-column li:before {
  content: none !important;
}

/* For empty items in the special column */
#kana-container .special-column .empty {
  background-color: #f0f0f0; /* Change the color as you like */
}

/* Responsive design */
@media (max-width: 640px) {
  #kana-container {
    flex-direction: column;
  }
  #kana-container .kana-column {
    flex-direction: row;
  }
}

/* For empty items in the special column */
#kana-container .kana-column .empty {
  background-color: #f0f0f0; /* Change the color as you like */
}

/* For empty items under わ */
#kana-container .kana-column .empty-wa {
  border: none; /* No border */
  background-color: transparent; /* No background color */
}

/*詐欺用語辞典用 文字ページの2列に設定変更　*/
.self-defense-container {
  display: flex;
}

.self-defense {
  width: 50%; /* 2つの要素が横並びになるように50%の幅を指定 */
  float: left; /* 左に浮かせる */
  flex: 1; /* 各要素が均等な幅になるように */
}

/* クリアフィックス（floatを解除するため） */
.self-defense::after {
  content: "";
  display: table;
  clear: both;
}



/*詐欺用語辞典用 左矢印に変更　*/
.self-defense ul li {
  position: relative;
  line-height:1.8;
  padding-left: 0.5em;
  padding-right: 0.5em;
  list-style: none;
}

.self-defense ul li:before {
  font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f105";
  position: absolute;
  left: -1.4em;
  top: 0.1em;
  color: #393f4c;
}

/*ヘッダーメニュー*/
.navi-in>ul {
    padding: 0;
    margin: 0;
    margin-left: 3px;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}

/* Base styles for all list items */
#header-container .navi-in > ul li {
    height: auto;
    line-height: 1.3;
    padding: 1px 10px;
    border-radius: 5px;
    display: inline-block;
    font-weight: lighter;
    margin: 6px 3px 6px 0px;
    color: #737373; /* Keep text color consistent if needed */
}

/* First item background color with 50% opacity */
#header-container .navi-in > ul li:nth-child(4n + 1) {
    background-color: rgba(56, 182, 255, 0.5); /* #38b6ff with 50% opacity */
}

/* Second item background color with 50% opacity */
#header-container .navi-in > ul li:nth-child(4n + 2) {
    background-color: rgba(255, 222, 89, 0.5); /* #ffde59 with 50% opacity */
}

/* Third item background color with 50% opacity */
#header-container .navi-in > ul li:nth-child(4n + 3) {
    background-color: rgba(255, 87, 87, 0.5); /* #ff5757 with 50% opacity */
}

/* Fourth item background color with 50% opacity */
#header-container .navi-in > ul li:nth-child(4n + 4) {
    background-color: rgba(126, 217, 87, 0.5); /* #7ed957 with 50% opacity */
}

/* Text color for all links within the header menu */
.navi-in > ul li a {
    color: #FFF; /* Assuming you want white text for better contrast */
}

/* H2のバックグランドカラー */
/* 基本のスタイルを定義 */
.article h2 {
    color: #FFFFFF;
	border-left: 0;
    padding: 10px;
}

/* 1番目のh2の背景色 */
.article h2:nth-of-type(4n+1) {
    background-color:#ffde59; /*rgba(255, 222, 89, 0.5);  #ffde59 with 50% opacity */
}

/* 2番目のh2の背景色 */
.article h2:nth-of-type(4n+2) {
    background-color: #ff5757; /*rgba(255, 87, 87, 0.5);  #ff5757 with 50% opacity */
}

/* 3番目のh2の背景色 */
.article h2:nth-of-type(4n+3) {
    background-color:#7ed957; /*rgba(126, 217, 87, 0.5);*/

}

/* 4番目のh2の背景色 */
.article h2:nth-of-type(4n+4) {
    background-color: #38b6ff;/*rgba(56, 182, 255, 0.5)  #38b6ff with 50% opacity */	
}

/* スクロールバー非表示 */
#header-container::-webkit-scrollbar{
  display: none;
}

#header-container{
scrollbar-width: none;
-ms-overflow-style: none;
}

/* 背景色
#header-container #navi{
   background:#9ea1a3; 
}  */
/* 文字色
#header-container #navi a{
   color:#FFF; 
}*/

/* マウスホバー時の文字色
#header-container #navi a:hover{
  color:#fff; 
} */
/* サブメニュー背景色
#header-container .navi-in > ul .sub-menu{
   background:#89c997;  */
}
#header-container .navi-in > ul > .menu-item-has-children > a::after {
   top: 0.8em;
   font-size: 1.2em;
   font-weight: lighter;
}
#header-container .sub-menu .caption-wrap{
   padding-left:2em;
}
.navi-in > ul .menu-item-has-description > a > .caption-wrap{
   height:auto;
}

.navi-in > .menu-header{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	overflow-x: scroll;
	white-space: nowrap;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
   }
   #header-container #navi a{
	font-size:0.8em;
	padding: 1em 1.2em; /* 余白 */
   }
   #header-container .navi-in > ul > .menu-item-has-children > a::after{
	display:none;
   }



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

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

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