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

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

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

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

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

/* 記事のH2見出し */
.single-post .entry-content h2 {
  margin-top: 3.2em;
  margin-bottom: 1.2em;
  padding: 0 0 14px;
  background: none;
  border: none;
  border-bottom: 1px solid #e2e5e9;
  font-size: 25px;
  line-height: 1.55;
  font-weight: 700;
}

/* 記事のH3見出し */
.single-post .entry-content h3 {
  margin-top: 2.4em;
  margin-bottom: 1em;
  padding: 0;
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1.55;
  font-weight: 700;
}

/* 記事のH4見出し */
.single-post .entry-content h4 {
  margin-top: 2em;
  margin-bottom: .8em;
  padding: 0;
  background: none;
  border: none;
  font-size: 17px;
  line-height: 1.6;
  font-weight: 700;
}

/* スマホ */
@media screen and (max-width: 768px) {
  .single-post .entry-content h2 {
    margin-top: 2.7em;
    font-size: 22px;
  }

  .single-post .entry-content h3 {
    font-size: 19px;
  }
}
/* =================================
   記事ページの横幅・外枠を整える
   ================================= */

/* 記事本体の大きな白いカード */
.single-post #main {
  max-width: 980px;
  margin: 32px auto 60px;
  padding: 54px 64px;
  border: none;
  border-radius: 12px;
  box-shadow: none;
  background: #fff;
}

/* タイトル・本文・目次などの横幅 */
.single-post .entry-header,
.single-post .entry-content,
.single-post .toc,
.single-post .article-footer {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

/* 本文 */
.single-post .entry-content {
  line-height: 1.74;
}

/* 段落の間隔 */
.single-post .entry-content p {
  margin-top: 0;
  margin-bottom: 1.35em;
}

/* 記事タイトル */
.single-post .entry-title {
  font-size: 34px;
  line-height: 1.45;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}

/* 日付 */
.single-post .post-date,
.single-post .post-update {
  font-size: 13px;
  opacity: .65;
}

/* スマホ */
@media screen and (max-width: 768px) {
  .single-post #main {
    width: auto;
    margin: 0;
    padding: 28px 20px 45px;
    border-radius: 0;
  }

  .single-post .entry-header,
  .single-post .entry-content,
  .single-post .toc,
  .single-post .article-footer {
    max-width: 100%;
  }

  .single-post .entry-title {
    font-size: 26px;
  }
}
/* アフィリエイト広告表記を控えめに */
.single-post .ad-area,
.single-post .pr-label,
.single-post .affiliate-disclosure {
  border: none !important;
  background: #f7f8fa !important;
  border-radius: 8px;
  padding: 13px 18px !important;
  font-size: 13px;
  line-height: 1.6;
  color: #666;
}
/* =================================
   Cocoon感を消す：ボックス・吹き出し・目次
   ================================= */


/* -------------------------
   CHECKなどの囲みボックス
   ------------------------- */

.single-post .blank-box {
  position: relative;
  margin: 34px 0;
  padding: 24px 26px !important;
  border: 1px solid #e2e6ea !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  box-shadow: none !important;
}

/* CHECKなど左上のタブを消す */
.single-post .blank-box::before {
  display: none !important;
}

/* Cocoonのタブ見出しを消す */
.single-post .bb-tab::before,
.single-post .bb-tab::after {
  display: none !important;
}

/* ボックス内の最初の文章 */
.single-post .blank-box p:first-child {
  margin-top: 0;
}

/* ボックス内の最後の要素 */
.single-post .blank-box > *:last-child {
  margin-bottom: 0;
}


/* -------------------------
   赤文字を少し上品に
   ------------------------- */

.single-post .blank-box .bold-red {
  color: #24364b !important;
  font-weight: 700;
}


/* -------------------------
   吹き出しを「編集部コメント」風に
   ------------------------- */

.single-post .speech-wrap {
  margin: 30px 0 36px;
  align-items: flex-start;
}

/* 人物アイコンを少し小さく */
.single-post .speech-person {
  width: 58px;
}

.single-post .speech-icon {
  width: 52px !important;
  height: 52px !important;
  margin: 0 !important;
}

.single-post .speech-icon img {
  width: 52px !important;
  height: 52px !important;
  object-fit: cover;
}

/* 吹き出し本体 */
.single-post .speech-balloon {
  margin-left: 16px !important;
  padding: 17px 20px !important;
  border: none !important;
  border-left: 3px solid #c8b27c !important;
  border-radius: 6px !important;
  background: #f8f9fa !important;
  box-shadow: none !important;
  font-size: 15px;
  line-height: 1.8;
  color: #333;
}

/* 吹き出しの三角を消す */
.single-post .speech-balloon::before,
.single-post .speech-balloon::after {
  display: none !important;
}


/* -------------------------
   目次をミニマルに
   ------------------------- */

.single-post .toc {
  max-width: 780px;
  margin: 38px auto 48px !important;
  padding: 22px 26px !important;
  border: 1px solid #e5e8eb !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: none !important;
}

/* 「目次」タイトル */
.single-post .toc-title {
  padding: 0 0 13px !important;
  margin-bottom: 12px !important;
  border-bottom: 1px solid #e8eaed;
  background: none !important;
  font-size: 15px !important;
  font-weight: 700;
  text-align: left !important;
  color: #27364a;
}

/* 閉じるボタンを目立たなく */
.single-post .toc-title .toc-toggle {
  font-size: 12px;
  font-weight: 400;
  color: #888;
}

/* 目次項目 */
.single-post .toc-list {
  margin: 0 !important;
  padding: 0 !important;
}

.single-post .toc-list > li {
  margin: 8px 0 !important;
}

/* 目次リンク */
.single-post .toc a {
  color: #3d4650 !important;
  text-decoration: none !important;
  font-size: 14px;
}

.single-post .toc a:hover {
  color: #111 !important;
}


/* -------------------------
   スマホ
   ------------------------- */

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

  .single-post .blank-box {
    padding: 20px !important;
  }

  .single-post .speech-person {
    width: 48px;
  }

  .single-post .speech-icon,
  .single-post .speech-icon img {
    width: 44px !important;
    height: 44px !important;
  }

  .single-post .speech-balloon {
    margin-left: 12px !important;
    padding: 15px 17px !important;
  }

  .single-post .toc {
    padding: 18px 20px !important;
  }
}
/* =================================
   比較表をスタイリッシュに
   ================================= */

.single-post .wp-block-table {
  margin: 36px 0 42px;
  overflow-x: auto;
  border: 1px solid #e4e8ec;
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
}

/* 表本体 */
.single-post .wp-block-table table {
  width: 100%;
  margin: 0;
  border: none !important;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15px;
  line-height: 1.65;
}

/* ヘッダー */
.single-post .wp-block-table thead th {
  padding: 15px 16px !important;
  border: none !important;
  border-right: 1px solid rgba(255,255,255,.12) !important;
  background: #24364b !important;
  color: #fff !important;
  font-weight: 700;
  text-align: left;
  vertical-align: middle;
}

/* 最後のヘッダーの右線を消す */
.single-post .wp-block-table thead th:last-child {
  border-right: none !important;
}

/* セル */
.single-post .wp-block-table tbody td {
  padding: 16px !important;
  border: none !important;
  border-bottom: 1px solid #e8ebee !important;
  background: #fff !important;
  vertical-align: top;
}

/* 最後の行 */
.single-post .wp-block-table tbody tr:last-child td {
  border-bottom: none !important;
}

/* 偶数行だけうっすら色 */
.single-post .wp-block-table tbody tr:nth-child(even) td {
  background: #f8fafc !important;
}

/* Cocoon標準の縞模様を上書き */
.single-post .wp-block-table tbody tr:nth-child(odd) td {
  background: #fff !important;
}

/* 1列目を少し強調 */
.single-post .wp-block-table tbody td:first-child {
  font-weight: 700;
  color: #24364b;
}

/* スマホ */
@media screen and (max-width: 768px) {
  .single-post .wp-block-table {
    border-radius: 8px;
  }

  .single-post .wp-block-table table {
    min-width: 680px;
    font-size: 14px;
  }

  .single-post .wp-block-table thead th,
  .single-post .wp-block-table tbody td {
    padding: 13px 14px !important;
  }
}
/* =================================
   CTAボタン
   ================================= */

.single-post .button-block {
  margin: 30px 0 38px;
  text-align: center;
}

.single-post .button-block .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  max-width: 100%;
  padding: 15px 28px !important;

  border: 1px solid #24364b !important;
  border-radius: 7px !important;

  background: #24364b !important;
  color: #fff !important;

  box-shadow: none !important;
  text-decoration: none !important;

  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;

  transition:
    background-color .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

/* ホバー */
.single-post .button-block .btn:hover {
  background: #18283a !important;
  border-color: #18283a !important;
  color: #fff !important;
  opacity: 1 !important;
  transform: translateY(-1px);
}

/* Cocoonの丸ボタン指定を打ち消す */
.single-post .button-block .btn-circle {
  border-radius: 7px !important;
}

/* スマホ */
@media screen and (max-width: 768px) {
  .single-post .button-block .btn {
    width: 100%;
    min-width: 0;
    padding: 15px 18px !important;
  }
}
/* =================================
   WiseだけメインCTA
   ================================= */

/* Wise affiliate */
.single-post .button-block a[href*="wise.prf.hn"] {
  background: #24364b !important;
  border-color: #24364b !important;
  color: #fff !important;
}

/* Wise CTAの上に細いゴールドアクセント */
.single-post .button-block a[href*="wise.prf.hn"] {
  border-top: 3px solid #c8b27c !important;
}


/* =================================
   その他の公式サイトはサブCTA
   ================================= */

.single-post .button-block a[href*="revolut.com"],
.single-post .button-block a[href*="ofx.com"],
.single-post .button-block a[href*="xe.com"],
.single-post .button-block a[href*="remitly.com"] {
  background: #fff !important;
  border: 1px solid #cbd2d9 !important;
  color: #24364b !important;
}

/* サブCTA hover */
.single-post .button-block a[href*="revolut.com"]:hover,
.single-post .button-block a[href*="ofx.com"]:hover,
.single-post .button-block a[href*="xe.com"]:hover,
.single-post .button-block a[href*="remitly.com"]:hover {
  background: #f6f8fa !important;
  border-color: #24364b !important;
  color: #24364b !important;
}
/* =================================
   PR・アフィリエイト表記
   ================================= */

/* 本文上のPR表記 */
.single-post .pr-label,
.single-post .pr-label-l,
.single-post .affiliate-disclosure {
  margin: 18px 0 28px !important;
  padding: 12px 16px !important;

  border: none !important;
  border-radius: 6px !important;

  background: #f6f8fa !important;
  color: #68727d !important;

  font-size: 12.5px !important;
  line-height: 1.7 !important;
  letter-spacing: 0.01em;
  box-shadow: none !important;
}

/* 中の余計な余白を抑える */
.single-post .pr-label p,
.single-post .pr-label-l p,
.single-post .affiliate-disclosure p {
  margin: 0 !important;
}
/* =================================
   箇条書き
   ================================= */

.single-post .entry-content ul:not(.toc-list) {
  padding-left: 1.45em;
}

.single-post .entry-content ul:not(.toc-list) li {
  margin-bottom: .65em;
  padding-left: .15em;
}

/* 黒丸をネイビーに */
.single-post .entry-content ul:not(.toc-list) li::marker {
  color: #24364b;
  font-size: .8em;
}

/* 番号リスト */
.single-post .entry-content ol li::marker {
  color: #b29a64;
  font-weight: 700;
}
/* 結論ボックス内はチェックリスト風 */
.single-post .blank-box ul {
  list-style: none;
  padding-left: 0;
}

.single-post .blank-box ul li {
  position: relative;
  padding-left: 1.7em;
  margin-bottom: .7em;
}

.single-post .blank-box ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #b29a64;
  font-weight: 700;
}

.single-post .blank-box ul li::marker {
  content: "";
}
/* =================================
   関連記事
   ================================= */

.single-post .related-entry-heading {
  margin-top: 60px;
  margin-bottom: 22px;

  padding: 0 0 12px;
  border: none;
  border-bottom: 1px solid #e2e5e9;

  background: none !important;

  font-size: 20px;
  font-weight: 700;
  color: #24364b;
}

/* 関連記事カード */
.single-post .related-entry-card-wrap {
  margin-bottom: 14px;
}

.single-post .related-entry-card {
  padding: 12px !important;

  border: 1px solid #e4e8ec !important;
  border-radius: 8px !important;

  background: #fff !important;
  box-shadow: none !important;

  transition:
    border-color .2s ease,
    transform .2s ease;
}

.single-post .related-entry-card:hover {
  border-color: #b9c2ca !important;
  transform: translateY(-1px);
}

/* サムネイル */
.single-post .related-entry-card-thumb img {
  border-radius: 6px;
}

/* タイトル */
.single-post .related-entry-card-title {
  color: #27364a;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.55;
}

/* 日付などを念のため弱く */
.single-post .related-entry-card .post-date,
.single-post .related-entry-card .post-update {
  display: none;
}
/* =================================
   本文リンク
   ================================= */

.single-post .entry-content p a:not(.btn),
.single-post .entry-content li a:not(.btn) {
  color: #2d4a68;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: #b9c3cc;
}

.single-post .entry-content p a:not(.btn):hover,
.single-post .entry-content li a:not(.btn):hover {
  color: #172c42;
  text-decoration-color: #b29a64;
}