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

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

/*タイトルフォント*/
.site-name-text {
font-family: 'Mochiy Pop P One', sans-serif;
font-size:37px;
}

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

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

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

/* プロフィール全体 */
.nwa .author-box {
	border: none;
	padding: 0 20px;
}

/* アイコン */
.nwa .author-box .author-thumb{
	width: 110px;
}
.nwa .author-box .author-thumb img{
	box-shadow: 0 1px 3px rgba(0,0,0,.18)
}

/* 下側 */
.nwa .author-box .author-content {
	padding: 1em 0;
}


/* 名前 */
.author-box .author-name {
	margin-bottom: 1em;
}
.author-box .author-content .author-name a{
	color: #文と同じ色; /* リンク色にしない */
	font-size: 1.2em;
	font-weight: normal; /* 太字にしない */
	text-decoration: none; /* 下線をなくす */
	letter-spacing: 0.2em; /* 字間を広く */
}

/* プロフィール文 */
.author-description{
	margin-bottom: 16px;
}
.author-description p{
	margin: 0 0 0.5em 0;
	text-align: left;
	line-height: 1.5;
}

/* SNSボタン */
.author-follows{
	padding: 12px 0;
	background-color: #f9a72c;
}
.author-follows::before{
	content: 'Follow Me';
	color: #fff;
	font-family: お好きなフォント(設定する場合);
	letter-spacing: 0.2em; /* 字間を広く */
}
.author-box .sns-follow-buttons a.follow-button{
	width: 40px;
	height: 40px;
	margin: 6px 10px 2px 2px;
	border-radius: 20px;
	color: #fff;
	border-color: #fff;
	font-size: 24px;
	line-height: 1.6;
}
.author-box a.follow-button span::before {
	font-size: 22px;
}

/* SNSボタン マウスオーバーしたとき */
.author-box .sns-follow-buttons a.follow-button:hover{
	background-color: transparent;
	opacity: 0.6; /* 薄く */
	transform: scale(1.1); /* 1.1倍の大きさに */
}

/* レビューボックス*/
.reviewBox {
  display: block;
  max-width: 500px;
  background: #fffafb;
  border: 1px solid #E07487;
  margin: 20px auto;
  padding: 0;
  border-radius: 10px;
}

.reviewBox .reviewBox_content {
  padding: 30px;
}

.reviewBox .reviewBox_title1 {
  margin: 0;
  padding: 12px;
  background: #E07487;
  text-align: center;
  font-size: 15px !important;
  font-weight: bold;
  border-radius: 10px 10px 0 0;
  line-height: 1.3em;
  color: #fff !important;
}

.reviewBox .reviewBox_title1:before {
  font-family: "Font Awesome 5 Free";
  content: "\f005";
  font-weight: 600;
  padding-right: 5px;
  font-size: .9em !important
}

.reviewBox p {
  margin: 0;
  padding: 0;
  letter-spacing:0;
}

.reviewBox .reviewBox_title2 {
  margin: 0;
  padding: 0;
  line-height: 1.3em;
  font-size: 16px !important;
  margin-bottom: 10px;
  font-weight: bold;
}

.reviewBox .reviewBox_title2:before {
  content: none !important;
}

.reviewBox .reviewBox_top {
  margin: auto;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}

.reviewBox .reviewBox_top p {
  margin: 0;
  line-height: 1.7em;
  font-size: 15px !important;
}

.reviewBox .reviewBox_top p:before {
  font-family: "Font Awesome 5 Free";
  content: "\f00c";
  font-weight: 600;
  padding-right: 5px;
  font-size: .8em;
}

.reviewBox .reviewBox_top .reviewBox_left,
.reviewBox .reviewBox_top .reviewBox_right {
  width: 50%;
}

.reviewBox .reviewBox_top .reviewBox_right img {
  display: block;
  margin: auto;
  width: 160px;
}

.reviewBox .reviewBox_center {
  margin-top: 10px;
}

.reviewBox .reviewLink {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.reviewBox .reviewLink a {
  font-size: 15px !important;
  padding: .6em 2em;
  margin: 5px;
  width: 40%;
  text-align: center;
  margin-top: 30px;
  text-decoration: none;
  background: #E07487;
  color: #fff !important;
  border: 2px solid #E07487;
}

.reviewBox .reviewLink a:nth-child(2) {
}

.reviewBox .reviewLink a:before {
  font-family: "Font Awesome 5 Free";
  content: "\f138";
  font-weight: 600;
  padding-right: 5px;
}

.reviewBox .reviewBox_center {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  padding: 20px 0;
}

.reviewBox .reviewBox_center .progress-circle {
  width: 25%;
  margin: auto;
}

.reviewBox .progress-circle {
  font-size: 12px !important;
  margin: 20px;
  position: relative;
  /* so that children can be absolutely positioned */
  padding: 0;
  width: 5em !important;
  height: 5em !important;
  background-color: #ffdee5;
  border-radius: 50%;
  line-height: 5em;
}

.reviewBox .reviewBox_score {
  font-size: 13px !important;
  text-align: center;
  line-height: 1em;
  z-index: 4;
  padding-top: 5em;
  display: block;
  font-weight: 600;
}

.reviewBox .reviewBox_score p {
  margin: 0;
  font-size: 12px !important;
}


.reviewBox .progress-circle:after {
  border: none;
  position: absolute;
  top: 0.5em;
  left: 0.5em;
  text-align: center;
  display: block;
  border-radius: 50%;
  width: 4em;
  height: 4em;
  background-color: #fffafb;
  content: " ";
}

.reviewBox .progress-circle .progress-text {
  position: absolute;
  line-height: 2.6em;
  width: 2.6em;
  text-align: center;
  display: block;
  color: #444 !important;
  font-size: 23px !important;
  z-index: 2;
  font-family: -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", HelveticaNeue, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Sogoe UI", Verdana, "メイリオ", Meiryo, sans-serif;
}

.reviewBox .left-half-clipper {
  border-radius: 50%;
  width: 5em;
  height: 5em;
  position: absolute;
  /* needed for clipping */
  clip: rect(0, 5em, 5em, 2.5em);
  /* clips the whole left half*/
}

.reviewBox .progress-circle.over50 .left-half-clipper {
  clip: rect(auto, auto, auto, auto);
}

.reviewBox .value-bar {
  position: absolute;
  /*needed for clipping*/
  clip: rect(0, 2.5em, 5em, 0);
  width: 5em !important;
  height: 5em !important;
  border-radius: 50%;
  border: 0.5em solid #E07487;
  box-sizing: border-box;

}

.reviewBox .progress-circle.over50 .first50-bar {
  position: absolute;
  /*needed for clipping*/
  clip: rect(0, 5em, 5em, 2.5em);
  background-color: #E07487;
  border-radius: 50%;
  width: 5em;
  height: 5em;
}

.reviewBox .progress-circle:not(.over50) .first50-bar {
  display: none;
}


.reviewBox .progress-circle.p0 .value-bar {
  display: none;
}

.reviewBox .progress-circle.p1 .value-bar {
  transform: rotate(4deg);
}

.reviewBox .progress-circle.p10 .value-bar {
  transform: rotate(36deg);
}

.reviewBox .progress-circle.p20 .value-bar {
  transform: rotate(72deg);
}

.reviewBox .progress-circle.p30 .value-bar {
  transform: rotate(108deg);
}

.reviewBox .progress-circle.p40 .value-bar {
  transform: rotate(144deg);
}

.reviewBox .progress-circle.p50 .value-bar {
  transform: rotate(180deg);
}

.reviewBox .progress-circle.p60 .value-bar {
  transform: rotate(216deg);
}

.reviewBox .progress-circle.p70 .value-bar {
  transform: rotate(252deg);
}

.reviewBox .progress-circle.p80 .value-bar {
  transform: rotate(288deg);
}

.reviewBox .progress-circle.p90 .value-bar {
  transform: rotate(324deg);
}

.reviewBox .progress-circle.p100 .value-bar {
  transform: rotate(360deg);
}


@media screen and (max-width:480px) {
  .reviewBox .reviewBox_content {
  padding: 15px;
  }
  
  .reviewBox .reviewBox_top .reviewBox_right img {
  width: 220px;
  }
  
  .reviewBox .reviewBox_top p {
  font-size: 13px !important;
  }
  
  .reviewBox .reviewBox_top p:first-child {
  font-size: 15px !important;
  }

  .reviewBox .reviewBox_center {
  padding: 0;
  margin-top: 20px;
  margin-bottom: 20px;
  }

  .reviewBox .reviewLink a {
  padding: .5em;
  }

  .reviewBox .reviewBox_top {
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  }

  .reviewBox .reviewBox_top .reviewBox_left {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 2;
  -webkit-order: 2;
  order: 2;
  width: 90%;
  margin: auto;
  margin-top: 20px;
  }

  .reviewBox .reviewBox_top .reviewBox_right {
  -webkit-box-ordinal-group: 1;
  -ms-flex-order: 1;
  -webkit-order: 1;
  order: 1;
  width: 100%;
  }

  .reviewBox .reviewLink a {
  font-size: 13px !important;
  }

  .reviewBox .progress-circle .progress-text {
  line-height: 2.2em;
  width: 2.2em;
  font-size: 23px !important;
  }

  .reviewBox .progress-circle {
  font-size: 10px !important;
  }

  .reviewBox .reviewBox_score p {
  font-size: 10px !important;
  }
}

/* 目次
-------------------------------------------------- */
#main .entry-content .toc {
  /* 目次全体デザイン */
  background: #F9F9F9;
  /* 目次全体の背景色を変える場合はここを変更 */
  border: none;
  display: block;
  border-top: 5px solid;
  border-top-color: #ff9f67;
  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: #ff9f67;
  /* 目次の文字色を変える場合はここを変更 */
}

#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: #ff9f67;
  /* アイコンの背景色を変える場合はここを変更 */
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  padding: 14px;
}

#main .entry-content .toc .toc-content ol {
  /* 目次のデザインカスタマイズ */
  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 silver;
  list-style-type: none !important;
}

#main .entry-content .toc .toc-content ol li:before {
  /* 目次の各節の先頭にあるアイコンを設定 */
  font-family: "Font Awesome 5 Free";
  content: "\f138";
  /* アイコンを変える場合はここを変更 */
  position: absolute;
  left: 0.5em;
  color: #ff9f67;
  /* 色を変える場合はここを変更 */
  font-weight: bold;
}

#main .entry-content .toc .toc-content ol li:last-of-type {
  border-bottom: none;
}

#main .entry-content .toc .toc-content .toc-list li {
  font-weight: 700;
  /* h2のみ太文字に */
}

#main .entry-content .toc .toc-content .toc-list li li {
  font-weight: normal;
  /* h3以降の文字サイズを普通に */
}

/* 見出し*/
h2 {
  position: relative;
}

h2:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 7px;
  background: -webkit-repeating-linear-gradient(-45deg, #ff9f67, #ff9f67 2px, #fff 2px, #fff 4px);
  background: repeating-linear-gradient(-45deg, #ff9f67, #ff9f67 2px, #fff 2px, #fff 4px);
}

h3 {
  background: #ff9f67; /*背景色*/
  padding: 0.5em;/*文字周りの余白*/
  color: white;/*文字を白に*/
  border-radius: 0.5em;/*角の丸み*/
}

/*シェアボタン*/
.sns-buttons {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
}
.sns-buttons a.share-button {
	width: 50px;
	height: 50px;
	margin: 0 5px;
	border-radius: 50%;
}
.sns-buttons a.share-button .social-icon {
	font-size: 24px;
}
.sns-buttons a.share-button .button-caption {
	display: none;
}

/*フォローボタン*/
.sns-buttons {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
}
.sns-buttons a.follow-button {
	width: 50px;
	height: 50px;
	margin: 0 5px;
	border-radius: 50%;
}
.sns-buttons a.follow-button .social-icon {
	font-size: 24px;
}
.sns-buttons a.follow-button .button-caption {
	display: none;
}

/*Cocoonのcat-label（カテゴリラベル）のカスタマイズ（全体）*/
.cat-label, .related-entry-card .cat-label {
	padding: 1px 10px;
	top: 4%;
	left: 2.5%;
	border: 0;
	border-radius: 30px;
	line-height: 1.8;
	font-size: 0.67em;
	font-weight: 500;
}

/*検索ラベル*/
input.search-edit{
  border: none;
  border-bottom: solid 1px #efefef;
  box-shadow: 0 4px 4px rgb(0 0 0 / 2%), 0 2px 3px -2px rgb(0 0 0 / 5%);
}
input.search-edit::placeholder {
  color:#ddd;
}
.search-submit{
  border-bottom: solid 1px rgba(0,0,0,.1);
  border-radius: 0 3px 3px 0;
  color: #fff;
  background-color: #f8c678;/*お好みの色に*/
  width: 50px;
  height: 50px;
  top: 0;
  right: 0;
}

/*いんよう*/
blockquote {
    position: relative;
    padding: 10px 15px 10px 50px;
    box-sizing: border-box;
    font-style: italic;
    background: #efefef;
    color: #555;
}

blockquote:before{
    display: inline-block;
    position: absolute;
    top: 10px;
    left: -3px;
    content: "“";
    font-family: sans-serif;
    color: #cfcfcf;
    font-size: 90px;
    line-height: 1;
}

blockquote p {
    padding: 0;
    margin: 10px 0;
    line-height: 1.7;
}

blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}