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

/*==================================
ブロックレベル要素の調整（リスト）
==================================*/

/* リスト */

.article ul,
.article ol {
  padding: 0px;
  padding-left: 25px;
}

.article ul li:last-of-type {
  margin-bottom: 0 !important;
}

.article ul ul {
  margin-bottom: 0;
  list-style-type: square;
}

/* 定義リスト */

.article dl {
  padding-left: 6px;
}

.article dt {
  font-weight: bold;
}

.article dd {
  margin-top: 4px;
  margin-bottom: 16px;
  margin-left: 40px;
}

.article dl dd:last-of-type {
  margin-bottom: 0;
}

/* 定義リスト（エディタ用） */

.body dt.wp-block {
  margin-bottom: 0;
}

.body dd.wp-block {
  margin-top: 4px;
  margin-bottom: 16px;
  margin-left: 40px;
}

/*==================================
ブロックレベル要素の調整（テーブル）
==================================*/

/* テーブル 幅*/

figure.wp-block-table table {
  width: 100%;
  margin: 0 auto;
}

/* テーブル 線 */

.article thead {
  border: none;
}

/* テーブル 背景色・文字色 */

.article table thead th {
  background-color: #63BCDB;
  color: #fff;
}

.article table tbody tr:nth-of-type(2n+1) th {
  background-color: #E2F4F9;
}

.article table tbody tr:nth-of-type(2n) th {
  background-color: #EBF7FB;
}

.article table tbody tr:nth-of-type(2n+1) td {
  background-color: #F5FBFD;
}

.article table tbody tr:nth-of-type(2n) td {
  background-color: #fff;
}

/* テーブル テキスト位置*/

.article th,
.article td {
  text-align: center;
  vertical-align: middle;
}

/* テーブル キャプション */
figcaption {
  text-align: center;
  font-size: small;
  margin-top: 10px;
}

/*==================================
ブロックレベル要素の調整（見出し）
==================================*/

/* 見出し 見た目 */

.article h3 {
  border-top: none;
  border-right: none;
}

.article h4 {
  border-top: none;
}

/*==================================
画像
==================================*/

/* 画像 */

.wp-block-image img {
  margin-left: auto;
  margin-right: auto;
  box-shadow: 5px 5px 15px #eee;
}

.wp-block-image figcaption {
  margin: 20px;
}

/* アイキャッチ画像 */

.eye-catch {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.8em;
}

.eye-catch-image {
  box-shadow: 5px 5px 15px #eee;
}

.category-page-content p img {
  box-shadow: 5px 5px 15px #eee;
}

/*==================================
インライン要素の調整
==================================*/

/* 強調 */

.marker {
  font-weight: bold;
}

/* リンク */

a.amazon-item-title-link,
a.amazon-item-review-link,
a.rakuten-item-title-link,
.article p a,
.article li a,
.article table a,
.article figcaption a,
.article dl a,
.author-name a,
.author-info a,
.sidebar p a,
.toggle-wrap a {
  font-weight: bold;
  text-decoration: none;
}

/* 画像 */

.wp-block-image img {
  margin-left: auto;
  margin-right: auto;
  box-shadow: 5px 5px 15px #eee;
}

.wp-block-image figcaption {
  margin: 20px;
}

/*==================================
PRラベル対応
==================================*/

/* PRラベル表示 */

.article-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
}

.entry-title {
  order: 1;
  width: 100%;
}

.date-tags {
  order: 2;
}

.article .post-date,
.article .post-update {
  font-size: 17px;
}

#pr-label {
  order: 3;
  border: none;
  font-size: 17px;
  line-height: 1.2;
  padding: 0 3px 0 3px;
  margin-bottom: 1em;
  margin-left: -6px;
}

.eye-catch-wrap {
  order: 4;
  width: 100%;
}

/*==================================
追従ボックス・ダブル追従ボックス
==================================*/

/* 追従ボックス */

.fixed-box {
  position: fixed;
  bottom: 20px;
  left: 10px;
  right: 10px;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 0;
  padding-top: 10px;
  padding-bottom: 12px;
  max-width: 500px;
  min-height: 70px;
  background: linear-gradient(to right, #0077dd, #0033bb, #770011);
  box-shadow: 0 7px 10px -5px rgb(0 0 0 / 50%);
  text-decoration: none;
  text-align: center;
  font-weight: bold;
  line-height: 1.8em;
  color: white;
  transition: all .3s ease-in-out;
}

.fixed-box:hover {
  transform: scale(1.04, 1.04);
  color: white;
}

.fixed-box::after {
  content: "\f105";
  position: absolute;
  right: 1em;
  font-size: 20px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: white;
  transition: all .2s ease;
}

.fixed-box:hover::after {
  right: 0.8em;
}

@media screen and (max-width: 1023px) {
  .fixed-box {
    bottom: 60px;
  }
}

@media screen and (max-width: 834px) {
  .fixed-box {
    font-size: 14px;
    line-height: 1.6em;
    min-height: auto;
  }

  .fixed-box::after {
    font-size: 14px;
  }
}

@media screen and (max-width: 480px) {
  .fixed-box {
    font-size: 12px;
  }

  .fixed-box::after {
    font-size: 12px;
  }
}

@media screen and (max-width: 310px) {
  .fixed-box {
    display: none;
  }
}


/* ダブル追従ボックス */

.fixed-box-double {
  min-height: auto;
  padding-top: 5px;
  padding-bottom: 6px;
}

.fixed-box-double-upper {
  bottom: 72px;
}

.fixed-box-double-lower {
  bottom: 20px;
}

@media screen and (max-width: 1023px) {
  .fixed-box-double-upper {
    bottom: 112px;
  }

  .fixed-box-double-lower {
    bottom: 60px;
  }
}

@media screen and (max-width: 834px) {
  .fixed-box-double-upper {
    bottom: 100px;
  }

  .fixed-box-double-lower {
    bottom: 60px;
  }
}


/* 追従ボックス サイドバー要素の透過防止 */

.main {
  z-index: 1;
}


/* 追従ボックスを光らせる https://give-shot.jp/tokyocss/button-shine/  */

.fixed-box {
  position: fixed;
  overflow: hidden;
}

.fixed-box:before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 10%;
  height: 150%;
  background: #fff;
  transform: rotate(45deg);
  animation: reflect 3s linear 1;
}

@keyframes reflect {

  0%,
  75% {
    transform: rotate(45deg) scale(0);
    opacity: 1;
  }

  100% {
    transform: rotate(45deg) scale(100);
    opacity: 0;
  }
}

/*==================================
テーマ独自視覚要素の調整
==================================*/

/* ヘッダー */

.site-name-text-link {
  font-weight: bold;
}

/* バッジ */

p:has(span.badge) {
  display: flex;
  align-items: baseline;
}

span.badge {
  margin-right: 10px;
  white-space: nowrap;
}

/* 白抜きボックス */

.blank-box {
  border: none;
  padding: 2em 2em 2em;
  margin: 0 0 2em;
  background: #fffaee;
}

.article p.blank-box-label {
  font-weight: bold;
  margin-bottom: 1.0em;
}

.editor-styles-wrapper .blank-box ul,
.editor-styles-wrapper .blank-box ol {
  margin-bottom: 1.8em;
}

/* ラベルボックス  */

.label-box-label {
  display: inline-block;
  position: relative;
  top: 4px;
  left: 10px;
  background: #002266;
  color: #fff !important;
  padding: 0.4em 0.7em;
  line-height: 1;
  font-weight: bold;
  font-size: 1.0em;
  border-radius: 20px;
  text-shadow: none;
}

.label-box-content {
  padding: 2.4em 1.8em 1.8em;
  border: 2px solid #002266 !important;
  border-radius: 4px;
}

/* タイムラインボックス */

.timeline-box {
  padding: 0;
  border: none;
}

.timeline-item-title {
  margin-bottom: 10px;
}

.timeline {
  counter-reset: number;
}

.timeline li.timeline-item {
  margin: 5px 0 20px 0 !important;
  border: 1px dashed #3AABD2;
  padding: 20px 10px 20px 40px;
  background-color: #3aabd20f;
}

.timeline li.timeline-item:last-of-type {
  margin-bottom: 0 !important;
}

.timeline li.timeline-item:before {
  counter-increment: number;
  content: counter(number);
  font-weight: bold;
  position: absolute;
  width: 26px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  top: 0;
  left: 0;
  margin-right: 10px;
  z-index: 1;
  color: #fff;
  background-color: #3AABD2;
  border-radius: 0%;
}

.timeline-item-label {
  display: none;
}

.timeline-item-content {
  float: none;
  width: 100%;
  border-left: none;
  padding: 0;
}



/*480px以下*/

@media screen and (max-width: 480px) {

  /*必要ならばここにコードを書く*/
  .blank-box {
    padding-left: 1em;
    padding-right: 1em;
  }

  .label-box-content {
    padding-left: 1em;
    padding-right: 1em;
  }
}

/*==================================
その他の微調整
==================================*/

/* 埋め込み動画 */

.video-container {
  margin-left: auto;
  margin-right: auto;
}

.wp-block-embed figcaption {
  margin-top: -1.4em;
}

.editor-styles-wrapper .wp-block-embed figcaption {
  margin-top: 10px;
}

/* フォント小さくする */
.small {
  font-size: small;
}

/* 編集画面のブロックリストアペンダ直前の余白調整 */
.editor-styles-wrapper *:has(+ .block-list-appender) {
  margin-bottom: 0 !important;
}

/* 吹き出し */

.speech-icon img {
  border: none;
  border-radius: 0;
}


/* 絞り込み検索フォーム */
.rf_form {
  margin-top: 0;
}

/* アマゾン */

.amazon-item-box {
  background-color: #fff;
  margin-left: auto;
  margin-right: auto;
}


/* 楽天 */

.rakuten-item-box {
  background-color: #fff;
  margin-left: auto;
  margin-right: auto;
}

.rakuten-item-box img.rakuten-item-thumb-image {
  border: 0;
  box-shadow: none;
}

/* ツイッター埋め込み */

.twitter-tweet {
  margin-left: auto;
  margin-right: auto;
}


/* インスタグラム埋め込み*/

.instagram-media {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* テーブル 比較表のための調整 */

.comparison td,
.comparison th {
  padding-top: 1.0em;
  padding-bottom: 1.0em;
}

.grade-a {
  line-height: 1.5;
  font-weight: bold;
  font-size: xx-large;
  color: #ff7485;
}

.grade-b {
  line-height: 1.5;
  font-weight: bold;
  font-size: xx-large;
  color: #59b0ff;
}

.grade-c {
  line-height: 1.5;
  font-weight: bold;
  font-size: xx-large;
  color: #2ec4c4;
}

.grade-d {
  line-height: 1.5;
  font-weight: bold;
  font-size: xx-large;
  color: #555555;
}

/* ボタン */

.btn {
  box-shadow: 0 7px 10px -5px rgba(0, 0, 0, 0.5);
  min-width: 120px;
}

.btn-l {
  max-width: 500px;
  margin: 30px auto;
  margin-bottom: 2.4em;
  box-shadow: 0 7px 10px -5px rgba(0, 0, 0, 0.5);
}


/* ボタン上のマイクロコピー */

.copy-above-botton {
  text-align: center;
  font-weight: bold;
  font-size: 0.9em;
  margin-bottom: -1.8em;
}


/* ボタンを光らせる https://give-shot.jp/tokyocss/button-shine/  */

.btn {
  position: relative;
  overflow: hidden;
}

.btn:before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 10%;
  height: 150%;
  background: #fff;
  transform: rotate(45deg);
  animation: reflect 3s linear infinite;
}

/* トップページのカードアローを非表示 */
.card-arrow .a-wrap::after {
  display: none;
}

/* 記事内のブログカードの有無で記事下の余白が変わってしまうChromeのバグを吸収する */
.entry-content {
    margin-bottom: 0;
    padding-bottom: 20px;
}