@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.2bla
*/
@font-face {
  src: url("fonts/MPLUS1p-Regular.woff") format("woff");
  font-family: "M PLUS 1p";
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  src: url("fonts/MPLUS1p-Bold.woff") format("woff");
  font-family: "M PLUS 1p";
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "M PLUS 1p", sans-serif;
}

h1 span::before {
  opacity: 0.6;
  vertical-align: middle;
}

h1.entry-title,
h1.archive-title {
  position: relative;
  padding: 0 0 10px 0;
  margin: 1.5em 0;
}

h1.entry-title::after,
h1.archive-title::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -10px;
  height: 4px;
  width: 100%;
  background: linear-gradient(to right, #fee140 0%, #fa709a 100%);
}

.fixed_headline {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  padding-left: 10px;
  background-color: #999;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  z-index: 50;
}

#footer {
  padding: 0;
  box-shadow: 0px -3px 10px rgba(0, 0, 0, 0.2);
}

#footer .footer-in {
  padding: 10px 0 0;
}

#footer .footer-in h3.footer-title {
  margin: 30px 0 10px;
  padding: 0.3em 1em;
  box-shadow: 0px 0.5px 3.5px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.3);
  border-left: 10px solid rgba(0, 0, 0, 0.1);
}

#footer .footer-in .a-wrap {
  border-bottom: 2px dotted #fff;
}

#footer .footer-in .a-wrap:first-of-type {
  border-top: 2px dotted #fff;
}

#footer .footer-in .footer-bottom-logo .logo-image {
  max-width: 100%;
}

#footer .footer-in .navi-footer {
  margin: 25px 0 35px;
}

@media screen and (max-width: 480px) {
  .navi-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }

  .navi-footer .navi-footer-in>.menu-footer li.menu-item {
    width: 100%;
    margin: 0;
  }

  .navi-footer .navi-footer-in>.menu-footer li.menu-item a {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    padding: 1em 2em 1em 1em;
    text-align: left;
    position: relative;
    background: rgba(255, 255, 255, 0.2);
  }

  .navi-footer .navi-footer-in>.menu-footer li.menu-item a::after {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    content: "\f105";
    font-size: 1.5em;
    opacity: 0.5;
  }
}

.date-tags {
  margin: 1.2em 0;
  color: #afafaf;
  font-weight: 700;
}

.post-date {
  font-size: 1em;
}

.post-date::before {
  display: inline-block;
  font-weight: 900;
  background: #ffce80;
  width: 25px;
  height: 25px;
  line-height: 25px;
  font-size: 0.9em;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  font-family: "Font Awesome 5 Free";
  content: "\f5ad";
}

.post-date .fa-clock {
  display: none;
}

.post-update {
  font-size: 1em;
}

.post-update::before {
  display: inline-block;
  font-weight: 900;
  background: #ffce80;
  width: 25px;
  height: 25px;
  line-height: 25px;
  font-size: 0.9em;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  font-family: "Font Awesome 5 Free";
  content: "\f2f1";
}

.post-update .fa-history {
  display: none;
}

#loading {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #ffc771;
  z-index: 2147483647;
}

#loading_circle {
  will-change: border-width, margin-left, magrin-top, opacity;
  border-radius: 50%;
  opacity: 0.6;
  border: 1px solid #aaa;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-animation: loading_circle 1s infinite;
  -ms-animation: loading_circle 1s infinite;
  -moz-animation: loading_circle 1s infinite;
  animation: loading_circle 1s infinite;
}

@keyframes loading_circle {
  0% {
    border-width: 0px;
  }

  100% {
    border-width: 150px;
    margin-left: -150px;
    margin-top: -150px;
    opacity: 0;
  }
}

article .blogcard-wrap {
  transition: all 0.3s;
  max-width: 500px;
  margin: 2em auto;
  border: none;
}

article .blogcard-wrap:hover {
  background: none;
  transform: translateY(-3px);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
}

article .blogcard-wrap:first-of-type {
  border: none;
}

.blogcard-thumbnail img {
  border: 4px solid #eee;
}

.blogcard-snippet {
  display: none;
}

.blogcard-footer {
  display: none;
}

.blogcard {
  border: 1px solid #eaeaea;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  padding: 20px;
}

.blogcard-title {
  color: #555;
  letter-spacing: 0.5px;
  font-size: 15px;
  margin: 10px 0 0 0;
  height: auto;
  overflow: hidden;
}

.blogcard-content {
  margin-left: 185px;
  padding-right: 6px;
}

.blogcard-content:after {
  content: "クリックして読む";
  background: #ffbb4e;
  /* 背景色 */
  display: block;
  text-align: center;
  color: #fff;
  font-weight: 600;
  letter-spacing: 1px;
  width: 180px;
  border-radius: 20px;
  font-size: 13px;
  padding: 1px 0;
  margin-top: 6px;
}

.blogcard-label {
  top: -15px;
  left: 9px;
  padding: 5px 10px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1px;
}

@media screen and (max-width: 834px) {
  .blogcard-content {
    margin-left: 130px;
  }

  .blogcard-title {
    font-size: 12px;
    line-height: 1.5;
    height: auto;
  }

  .blogcard-content:after {
    content: "タップして読む";
  }

  .blogcard-thumbnail {
    width: 120px;
  }
}

@media screen and (max-width: 560px) {
  .blogcard-content:after {
    width: 120px;
    font-size: 12px;
  }
}

@media screen and (max-width: 320px) {
  .blogcard-thumbnail {
    width: 100px;
  }

  .blogcard-content {
    margin-left: 110px;
  }

  .blogcard-content:after {
    width: 90px;
    font-size: 10px;
  }

  .blogcard-title {
    height: 35px;
  }
}

.sns-share-buttons {
  justify-content: space-evenly;
}

.sns-share-buttons a {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 1.25em;
}

.sns-share-buttons a {
  opacity: 0.9;
}

.sns-share-buttons a .button-caption {
  display: none;
}

.sns-follow-buttons {
  justify-content: space-evenly;
}

.sns-follow-buttons a {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 1.7em;
}

.sns-share-message,
.sns-follow-message {
  color: #969696;
  margin-bottom: 30px;
  position: relative;
}

@media screen and (max-width: 834px) {
  .ss-bottom .sns-share-buttons a {
    font-size: 1.3em;
  }

  .ss-bottom .sns-follow-buttons a {
    font-size: 1.3em;
  }
}

@media screen and (min-width: 481px) {

  .article-header .sns-share,
  .article-footer .sns-share,
  .article-footer .sns-follow {
    width: 70%;
    margin-right: auto;
    margin-left: auto;
  }
}

.MathJax {
  font-size: 1.2em !important;
  overflow-x: scroll;
}

.math-scroll {
  overflow-x: scroll;
}

.menu-drawer a {
  background-color: #fff2cc;
  color: #afafb0;
  margin: 6px 0;
  padding: 4px 1em;
  border-radius: 20px;
}

.menu-drawer a:hover {
  background-color: #ffce80;
  color: #fffff4;
  transition: 0.2s;
}

.slideshow {
  position: relative;
  overflow: hidden;
  width: 600px;
  height: 600px;
  margin: auto;
  border: 2px solid #ececec;
}

.slideshow img {
  position: absolute;
  opacity: 0;
  animation: slideAnime 30s ease-in-out infinite;
}

.slideshow img:nth-of-type(1) {
  animation-delay: 0s;
}

.slideshow img:nth-of-type(2) {
  animation-delay: 5s;
}

.slideshow img:nth-of-type(3) {
  animation-delay: 10s;
}

.slideshow img:nth-of-type(4) {
  animation-delay: 15s;
}

.slideshow img:nth-of-type(5) {
  animation-delay: 20s;
}

.slideshow img:nth-of-type(6) {
  animation-delay: 25s;
}

.slideshow img:nth-of-type(1) {
  animation-delay: 0s;
}

@keyframes slideAnime {
  0% {
    opacity: 0;
  }

  1% {
    opacity: 1;
  }

  15% {
    opacity: 1;
  }

  16% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@media screen and (max-width: 640px) {
  .slideshow {
    width: 480px;
    height: 480px;
  }
}

@media screen and (max-width: 480px) {
  .slideshow {
    width: 350px;
    height: 350px;
  }
}

h2.related-entry-heading {
  border-bottom: solid 3px #f0ebeb;
  margin: 25px 0 0;
  padding: 1em 1em 0.5em 1em;
}

h2.related-entry-heading::before {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  content: "\f15c";
  color: #fff;
  background-color: #ffce80;
  display: inline-block;
  text-align: center;
}

h2.related-entry-heading span {
  color: #999;
}

.related-entry-card-wrap {
  padding: 20px;
}

.related-entry-card-wrap .related-entry-card .related-entry-card-thumb:hover img {
  box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.15), 0 0 5px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

.related-entry-card-wrap .related-entry-card .related-entry-card-thumb img {
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
  transition: 0.3s;
}

.related-entry-card-wrap .related-entry-card .related-entry-card-thumb .cat-label {
  display: none;
}

.related-entry-card-wrap .related-entry-card .related-entry-card-title {
  color: #555;
}

.related-entry-card-wrap .related-entry-card .related-entry-card-snippet {
  display: none;
}

#pager-post-navi a.next-post .next-post-title,
#pager-post-navi a.prev-post .prev-post-title {
  display: table-cell;
  vertical-align: middle;
  width: 300px;
  padding: 0 1em;
  border: #e5e5e5 solid 2px;
  transition: all ease-in-out 0.3s;
  background: white;
  font-weight: bold;
  font-size: 0.9em;
  line-height: 1.4em;
}

#pager-post-navi a.next-post:hover .next-post-title,
#pager-post-navi a.prev-post:hover .prev-post-title {
  background: #f0ebeb;
  text-decoration: none;
}

#pager-post-navi {
  padding: 5px 0;
  background: #f3f5f6;
  text-align: center;
}

#pager-post-navi .fa-chevron-left,
#pager-post-navi .fa-chevron-right {
  display: none;
  content: none;
}

#pager-post-navi a.prev-post::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 700;
  white-space: pre-wrap;
  color: gray;
  content: "\f048  前の記事";
}

#pager-post-navi a.next-post::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 700;
  white-space: pre-wrap;
  color: gray;
  content: "\f051  次の記事";
}

#pager-post-navi a.a-wrap {
  padding: 15px 10px;
  border: none;
  margin: auto;
  display: block;
  font-size: 1em;
}

#pager-post-navi a.a-wrap figure {
  width: 200px;
  margin: 1em 0;
  display: table-cell;
  min-width: none;
  max-width: none;
}

#pager-post-navi a.a-wrap figure img {
  max-width: none;
  border: #e5e5e5 solid 2px;
  border-right: none;
  vertical-align: middle;
}

ol.flow {
  padding: 2em;
  background: rgba(243, 152, 0, 0.1882352941);
  padding-left: 2.2em;
}

ol.flow li {
  opacity: 0.5;
  margin: 0 0 0.5em 4em;
}

ol.flow .now {
  opacity: 1;
  font-weight: bold;
  position: relative;
}

ol.flow .now:before {
  content: "今回";
  position: absolute;
  left: -6em;
  top: 0.2em;
  padding: 0 7px;
  background: #f6a068;
  color: #fff;
  font-size: 0.8em;
  border-radius: 5px;
}

ol.flow img {
  margin: 0.5em 0;
  vertical-align: top;
}

.step-wrap {
  counter-reset: count;
  margin: 2em 0;
  position: relative;
}

.step-wrap .step-content {
  padding: 1em 0 1.3em 2.5em;
  margin: 0;
  position: relative;
}

.step-wrap .step-content::before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background: #ffb107;
  border-radius: 50%;
  position: absolute;
  left: 0;
}

.step-wrap .step-content::after {
  content: "";
  display: block;
  height: calc(100% - 50px);
  border-left: solid 2px #ddd;
  position: absolute;
  top: 57px;
  left: 10px;
}

.step-wrap .step-content .step-label {
  color: #fff;
  font-weight: bold;
  font-size: 15px;
  position: absolute;
  left: 10px;
}

.step-wrap .step-content .step-label::after {
  counter-increment: count;
  content: counter(count);
  position: absolute;
}

.step-wrap .step-content .step-title {
  border: solid 2px #ffb107;
  padding: 0.4em 1em;
  background-color: rgb(255, 247, 204);
  color: #333;
}

.step-wrap .step-content .step-body {
  margin-top: 1em;
  padding: 0 0 1em;
  border-bottom: dotted 2px #ddd;
}

ol.orange,
ol.list-math {
  counter-reset: number;
  list-style-type: none;
  padding: 0.3em 0.8em;
  color: #333;
}

ol.orange li,
ol.orange ol.orange li,
ol.list-math li {
  position: relative;
  padding: 0.5em 0.5em 0.5em 30px;
  line-height: 1.5em;
}

ol.orange li.none::before,
ol.orange li.o2::before,
ol.orange li.o1::before,
ol.orange li.o::before,
ol.orange li.c::before,
ol.orange li.v::before,
ol.orange li.s::before {
  background: #ff7777;
  border-radius: 0;
}

ol.list-math li::before {
  position: absolute;
  counter-increment: number;
  content: counter(number);
  display: flex;
  background: #2ca9e1;
  color: white;
  font-weight: bold;
  font-size: 15px;
  border-radius: 50%;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  justify-content: center;
  box-sizing: border-box;
}

ol.orange {
  border: solid 2px #ffb107;
  background-color: rgb(255, 247, 204);
}

ol.orange.no-border {
  border: none;
}

ol.orange li::before {
  position: absolute;
  counter-increment: number;
  content: counter(number);
  display: flex;
  background: #ffb107;
  color: white;
  font-weight: bold;
  font-size: 15px;
  border-radius: 50%;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  justify-content: center;
  box-sizing: border-box;
}

ol.orange li.s::before {
  content: "S";
}

ol.orange li.v::before {
  content: "V";
}

ol.orange li.c::before {
  content: "C";
}

ol.orange li.o::before {
  content: "O";
}

ol.orange li.o1::before {
  content: "O1";
}

ol.orange li.o2::before {
  content: "O2";
}

ol.orange li.none::before {
  content: " ";
}

#en_fade_in {
  animation: fadein1 5s infinite;
}

#dautres_fade_in {
  animation: fadein2 5s infinite;
}

#termes_fade_in {
  animation: fadein3 5s infinite;
}

svg .upper-arrow {
  stroke-dasharray: 500;
  animation: upper-arrow 5s infinite;
}

svg .lower-arrow {
  stroke-dasharray: 500;
  animation: lower-arrow 5s infinite;
}

@keyframes fadein1 {
  0% {
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadein2 {
  0% {
    opacity: 0;
  }

  15% {
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadein3 {
  0% {
    opacity: 0;
  }

  30% {
    opacity: 0;
  }

  45% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

@keyframes upper-arrow {
  0% {
    stroke-dashoffset: 500;
  }

  50% {
    stroke-dashoffset: 500;
  }

  65% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes lower-arrow {
  0% {
    stroke-dashoffset: 500;
  }

  65% {
    stroke-dashoffset: 500;
  }

  80% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

.evolution {
  stroke-dasharray: 1200;
  animation: evolution 7s infinite;
}

.evolution:nth-of-type(3) {
  animation-delay: 500ms;
}

.evolution:nth-of-type(4) {
  animation-delay: 1000ms;
}

.evolution:nth-of-type(5) {
  animation-delay: 1500ms;
}

@keyframes evolution {
  0% {
    stroke-dashoffset: 1200;
    fill: transparent;
  }

  30% {
    stroke-dashoffset: 0;
    fill: transparent;
  }

  35% {
    stroke-dashoffset: 0;
    fill: #473636;
  }

  100% {
    stroke-dashoffset: 0;
    fill: #473636;
  }
}

svg .circle path {
  stroke-dasharray: 2000;
  animation: circle_round 5s ease-in forwards infinite;
}

@keyframes circle_round {
  0% {
    stroke-dashoffset: 2000;
    fill: transparent;
  }

  50% {
    stroke-dashoffset: 0;
    fill: white;
  }

  100% {
    stroke-dashoffset: 0;
    fill: white;
  }
}

svg.summary path.check {
  stroke-dasharray: 2000;
  animation: path_check 3s ease-in forwards infinite;
}

svg.summary path.check:nth-of-type(2) {
  animation-delay: 500ms;
}

svg.summary path.check:last-of-type {
  animation-delay: 1000ms;
}

@keyframes path_check {
  0% {
    stroke-dashoffset: 2000;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

svg .lupe {
  animation: opacity_change 3s infinite;
}

@keyframes opacity_change {
  0% {
    opacity: 0;
  }

  80% {
    opacity: 1;
  }
}

mask path {
  stroke-dasharray: 1000px;
  animation: h-written 5s infinite;
}

@keyframes h-written {
  0% {
    stroke-dashoffset: 1000;
  }

  10% {
    stroke-dashoffset: 1000;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

/************************************************************************************************************************************************
** オリジナルスキン
************************************************************************************************************************************************/
.ranking-item,
.timeline-box {
  border: 3px;
}

.widget-entry-card img,
.blogcard-thumbnail img {
  box-shadow: 0.5px 0.5px 4px rgba(0, 0, 0, 0.3);
  border-radius: 3px;
}

.eye-catch {
  margin-bottom: 15px;
}

.widget-entry-card-content,
.related-entry-card-content {
  font-size: 0.9em;
}

.header-container {
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
}

#header-container .navi {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.3) 100%);
}

.article h2,
h3.widget-title {
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
}

.header-container-in,
.footer {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.1) 100%);
}

.header-container:after,
.footer:before {
  content: "";
  display: block;
  height: 5px;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3) 4px, rgba(0, 0, 0, 0.3) 5px, rgba(0, 0, 0, 0.3) 9px);
}

pre,
table th {
  border: 3px solid #eee;
}

.cat-link a:hover {
  color: #000;
}

.widget ul li a:before {
  margin: 0 5px 0 0;
}

#header-container,
#header-container .navi,
#navi .navi-in>.menu-header .sub-menu,
.article h2,
.cat-link,
.cat-label,
.demo .cat-label,
.blogcard-type .blogcard-label,
#footer,
.go-to-top-button {
  background-color: #ffce80;
  color: #333;
}

.article h3,
.article h4,
.article h5,
.article h6,
.cat-link,
.tag-link {
  border-color: #ffce80;
}

blockquote,
.key-btn {
  background-color: #ffeccd;
  border-color: #ffce80;
}

.font-awesome-5 .widget ul li a::before,
.font-awesome-5 h2.related-entry-heading::before,
.font-awesome-5 .navi-footer-in>.menu-footer li.menu-item a::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

/************************************************************************************************************************************************/
/* 子テーマ用のスタイルを書く */
@media screen and (max-width: 834px) {
  #navi .navi-in>.menu-mobile li {
    width: 100%;
  }
}

.entry-card-title {
  color: #555;
}

.eye-catch .cat-label {
  display: none;
}

.widget-entry-cards .a-wrap {
  width: 100%;
}

.home.page .author-box .sns-follow {
  display: block;
}

/* *************************/
.img-border,
figure.gray-border img,
div.gray-border figure img,
figure.gray-border video {
  border: 2px solid #ececec;
}

/* 画像キャプション　中央寄せ */
.wp-block-image figcaption {
  text-align: center;
}

/* トグルのボタンを白に  */
.white .toggle-button:before {
  color: #fff;
}

/* トグルのボタンを太字に  */
.white .toggle-button {
  font-weight: bold;
}

/* コードコピペ用 */
.code-box {
  position: relative;
  padding: 25px 0 0;
  border: solid 4px #ffce80;
  background: #272822;
}

.code-box .box-title {
  position: absolute;
  display: inline-block;
  top: -2px;
  left: -2px;
  padding: 0 9px;
  height: 25px;
  line-height: 25px;
  background: #ffce80;
  font-weight: bold;
}

.code-style code {
  padding: 0.2em 0.3em;
  margin: 0 0.2em;
  border-radius: 5px;
  background: #f1f2f3;
  color: #404040;
  font-size: 0.9em;
}

.code-style pre code {
  padding: 0;
  margin: 0;
  border: none;
  background: inherit;
  color: inherit;
  font-size: inherit;
}

pre.code-style code {
  padding: 0;
  margin: 0;
  border: none;
  background: inherit;
  color: inherit;
  font-size: inherit;
}

/* コメント欄 注釈非表示 */
.comment-notes {
  display: none;
}


/************************************
** アイコンリスト（2行目）
************************************/
.iconlist-box.example li li::before {
  content: "\f0a4";
}

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

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

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

/* 	画面が小さい時だけ改行 */
@media screen and (min-width: 480px) {
  .br-sp {
    display: none;
  }
}

/*# sourceMappingURL=style.css.map */