@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){
  /*必要ならばここにコードを書く*/
}

/* -------------------------------------------
 * ボックスデザイン：左上タイトル（ベージュ）
 * ------------------------------------------- */
.blank-box.bb-tab.bb-pickup.bb-yellow {
  --box-color: #CCA99D; /* 基本色 */
  margin: 2em auto; /* 外側余白 */
  position: relative; /* タイトル基準 */
  border: 1px solid var(--box-color); /* 枠線 */
  border-radius: 3px; /* 角丸 */
  max-width: 800px; /* 最大幅 */
}

.blank-box.bb-tab.bb-pickup.bb-yellow .bb-label {
  background: var(--box-color); /* 背景 */
  color: #fff; /* 文字色 */
  padding: 0.2em 1em; /* 内側余白 */
  position: absolute; /* 左上固定 */
  top: -0.7em;
  left: 0.7em; /* 位置 */
  display: inline-block; /* 内容幅 */
  font-size: 0.9em; /* サイズ */
  font-weight:bold; /* 太字 */
  border-radius: 3px; /* 角丸 */
  max-width: calc(100% - 2em); /* 幅調整 */
  white-space: nowrap; /* 折返しなし */
  overflow: hidden; text-overflow: ellipsis; /* 省略 */
}

.blank-box.bb-tab.bb-pickup.bb-yellow .box-content {
  padding: 2.5em 0em 2em; /* タイトル分の余白 */
}

/* 段落の余白なし */
.blank-box.bb-tab.bb-pickup.bb-yellow p { margin: 0; }
	
/* 囲み枠ベージュ */
.blank-box.bb-tab.my-pickup-box {
  --box-color: #CCA99D;
  position: relative;
  margin: 2em auto;
  border: 1px solid var(--box-color);
  border-radius: 3px;
  padding: 2.5em 2em 2em;
}

/* 1行目をタイトルとして使う */
.blank-box.bb-tab.my-pickup-box > p:first-child {
  position: absolute;
  top: -0.7em;
  left: 0.7em;
  margin: 0;
  background: var(--box-color);
  color: #fff;
  padding: 0.2em 1em;
  font-size: 0.9em;
  font-weight: bold;
  border-radius: 3px;
  white-space: nowrap;
  max-width: calc(100% - 2em);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 本文側 */
.blank-box.bb-tab.my-pickup-box > p:not(:first-child) {
  margin: 0 0 1em;
}

.blank-box.bb-tab.my-pickup-box > p:last-child {
  margin-bottom: 0;
}


/* -------------------------------------------
 * ボックスデザイン：チェック（check）
 * ------------------------------------------- */
.cstm-box-check {
  margin: 2em auto;
  padding: 1.2em 1.5em;
  background-color: #f7ebe6; /* ボックスの背景色 */
  border-radius: 7px;
  max-width: 800px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* タイトル部分 */
.cstm-box-check .box-title {
  display: flex;
  align-items: center;
  color: #bd7b68; /* アイコン・タイトルの色 */
  font-size: 1.1em;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 0.5em;
}

/* アイコン（疑似要素） */
.cstm-box-check .box-title::before {
font-family: "Font Awesome 5 Free";
  content: "\f00c"; /* チェックマーク */
  font-weight: 900;
  margin-right: 8px;
  display: flex; /* 垂直中央配置 */
  align-items: center;
  justify-content: center;
}
/* ボックス内の本文 */
.cstm-box-check p { margin: 0; }

/* -------------------------------------------
 * ボックスデザイン：点線（ドット）枠
 * ------------------------------------------- */
.cstm-box-dotted {
  margin: 2em auto; /* 外側余白 */
  padding: 2em; /* 内側余白 */
  border: 2px dotted #CCA99D; /* 点線 */
  max-width: 800px; /* 最大幅 */
}

/* ボックス内の段落 */
.cstm-box-dotted p {
  margin: 0;
}

/* -------------------------------------------
 * リストの「・」
 * ------------------------------------------- */
li::marker {
  color: #DAA390;
  font-weight:bold;
}

/* -------------------------------------------
 * ul ol liの上下幅間隔
 * ------------------------------------------- */
.article ul,
.article ol {
  margin-top: 0.8em;
  margin-bottom: 1.0em;
}

.article ul li,
.article ol li {
  margin-bottom: 1.0em;
  line-height: 1.5;
}


/* =========================
   やわらかい雑誌風トップページ
========================= */

body {
  background:
    radial-gradient(circle at 12% 10%, rgba(214, 196, 244, 0.18) 0, transparent 26%),
    radial-gradient(circle at 88% 18%, rgba(255, 224, 236, 0.16) 0, transparent 24%),
    linear-gradient(180deg, #fdfafe 0%, #fbf7fc 48%, #fffdfd 100%);
  color: #5b5566;
}

.home .entry-content,
.page .entry-content {
  overflow-wrap: break-word;
}

/* =========================
   セクション共通
========================= */
.top-section {
  position: relative;
  max-width: 1120px;
  margin: 0 auto 48px;
  padding: 42px 34px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(228, 220, 238, 0.9);
  box-shadow:
    0 16px 40px rgba(125, 107, 154, 0.07),
    inset 0 1px 0 rgba(255,255,255,0.9);
  backdrop-filter: blur(5px);
  overflow: hidden;
}

.top-section::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -70px;
  top: -90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226, 212, 247, 0.42) 0%, rgba(226, 212, 247, 0) 72%);
  pointer-events: none;
}

.top-section::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  left: -60px;
  bottom: -70px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 229, 238, 0.34) 0%, rgba(255, 229, 238, 0) 70%);
  pointer-events: none;
}

.top-section > * {
  position: relative;
  z-index: 1;
}

.top-section h1,
.top-section h2,
.top-section h3,
.top-section .wp-block-heading {
  margin-top: 0;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.top-section h2,
.top-section .wp-block-heading {
  font-size: 31px;
  line-height: 1.45;
  margin-bottom: 18px;
  color: #56426f;
}

.top-section p {
  line-height: 1.95;
  color: #5f596d;
}

.top-section p:last-child,
.top-section ul:last-child {
  margin-bottom: 0;
}

/* =========================
   ファーストビュー
========================= */
.top-fv {
  padding: 78px 34px;
  text-align: center;
  border-radius: 38px;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,0.4) 0, transparent 25%),
    radial-gradient(circle at 80% 28%, rgba(255,234,242,0.34) 0, transparent 22%),
    linear-gradient(135deg, #8d74bf 0%, #b69adb 48%, #f3dce8 100%);
  box-shadow:
    0 26px 60px rgba(140, 113, 181, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.28);
  color: #fff;
}

.top-fv::before,
.top-fv::after {
  display: none;
}

.top-fv h1 {
  font-size: 44px;
  line-height: 1.34;
  margin-bottom: 18px;
  color: #fff;
}

.top-fv p {
  font-size: 18px;
  line-height: 2;
  color: rgba(255,255,255,0.96);
}

.top-note {
  margin-top: 18px !important;
  font-size: 14px !important;
  opacity: 0.92;
  color: rgba(255,255,255,0.92) !important;
}

/* =========================
   ボタン
========================= */
.top-btn-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.top-btn-left {
  justify-content: flex-start;
}

.wp-block-button__link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 50px;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  border: 1px solid rgba(173, 152, 205, 0.34);
  background: linear-gradient(180deg, #ffffff 0%, #fbf7ff 100%);
  color: #6c56a0 !important;
  box-shadow:
    0 10px 22px rgba(137, 117, 165, 0.09),
    inset 0 1px 0 rgba(255,255,255,0.9);
  transition: transform 0.24s ease, box-shadow 0.24s ease, opacity 0.24s ease;
}

.wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 26px rgba(137, 117, 165, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.9);
  opacity: 0.98;
}

.top-fv .wp-block-button__link {
  background: rgba(255,255,255,0.95);
  color: #7258ab !important;
  border: 1px solid rgba(255,255,255,0.7);
}

.wp-block-button__link.is-outline {
  background: rgba(255,255,255,0.12);
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.38);
  box-shadow: none;
}

.top-section:not(.top-fv) .wp-block-button__link.is-outline {
  background: transparent;
  color: #7a62b3 !important;
  border: 1px solid #d9cceb;
  box-shadow: none;
}

/* =========================
   グリッド
========================= */
.top-grid {
  display: grid;
  gap: 22px;
}

.top-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.top-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* =========================
   小ラベル
========================= */
.mini-label {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 6px 11px;
  border-radius: 999px;
  background: #f4eefb;
  color: #846ab8;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* =========================
   カード
========================= */
.situation-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 28px 22px 22px;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(252,248,255,0.96) 100%);
  border: 1px solid rgba(234, 226, 243, 1);
  box-shadow:
    0 10px 28px rgba(128, 111, 153, 0.07),
    inset 0 1px 0 rgba(255,255,255,0.95);
  overflow: hidden;
}

.situation-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #b39ad9 0%, #f0cfdd 100%);
}

.situation-card h3 {
  font-size: 22px;
  line-height: 1.5;
  margin-bottom: 12px;
  color: #56426f;
}

.situation-card p {
  font-size: 15px;
  line-height: 1.9;
  margin-bottom: 0;
  color: #625c71;
  flex-grow: 1;
}

.card-btn {
  margin-top: 22px;
}

.card-btn .wp-block-button__link {
  width: 100%;
}

/* =========================
   雑誌風の帯
========================= */
.band-title {
  display: inline-block;
  margin-bottom: 18px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #f2ebfa;
  color: #7b64ac;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* =========================
   補助ブロック
========================= */
.risk-box {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,248,251,0.94) 100%);
  border: 1px solid rgba(243, 221, 231, 0.95);
}

.risk-box ul {
  margin: 18px 0 24px 1.2em;
}

.risk-box li {
  margin-bottom: 10px;
  line-height: 1.9;
  color: #625d70;
}

.experience-box {
  background:
    radial-gradient(circle at 86% 18%, rgba(255, 231, 239, 0.38) 0, transparent 18%),
    linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(249,244,255,0.96) 100%);
}

.bottom-cta {
  text-align: center;
  background:
    radial-gradient(circle at 18% 22%, rgba(226, 212, 247, 0.28) 0, transparent 20%),
    radial-gradient(circle at 80% 70%, rgba(255, 229, 238, 0.24) 0, transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(246,240,253,0.96) 100%);
}

.top-footer-links {
  text-align: center;
  background: rgba(255,255,255,0.72);
}

.top-footer-links p {
  margin-bottom: 12px;
  font-weight: 700;
  color: #5b4777;
}

.footer-link-wrap {
  display: flex;
  justify-content: center;
  gap: 14px 18px;
  flex-wrap: wrap;
}

.footer-link-wrap a {
  text-decoration: none;
  color: #7b64ac;
}

/* =========================
   タブレット
========================= */
@media (max-width: 1024px) {
  .top-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .top-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .top-fv h1 {
    font-size: 36px;
  }

  .top-section h2,
  .top-section .wp-block-heading {
    font-size: 28px;
  }
}

/* =========================
   スマホ
========================= */
@media (max-width: 767px) {
  body {
    background:
      radial-gradient(circle at 15% 8%, rgba(214, 196, 244, 0.18) 0, transparent 26%),
      linear-gradient(180deg, #fdfafe 0%, #fffdfd 100%);
  }

  .top-section {
    padding: 26px 18px;
    margin-bottom: 28px;
    border-radius: 24px;
  }

  .top-section::before {
    width: 140px;
    height: 140px;
    right: -44px;
    top: -50px;
  }

  .top-section::after {
    width: 110px;
    height: 110px;
    left: -36px;
    bottom: -42px;
  }

  .top-fv {
    padding: 48px 18px;
    border-radius: 28px;
  }

  .top-fv h1 {
    font-size: 30px;
    line-height: 1.45;
  }

  .top-fv p {
    font-size: 16px;
    line-height: 1.9;
  }

  .top-section h2,
  .top-section .wp-block-heading {
    font-size: 24px;
    line-height: 1.45;
  }

  .band-title {
    font-size: 12px;
    padding: 7px 11px;
    margin-bottom: 14px;
  }

  .situation-card {
    padding: 22px 16px 18px;
    border-radius: 22px;
  }

  .situation-card h3 {
    font-size: 19px;
    line-height: 1.5;
  }

  .situation-card p {
    font-size: 14px;
    line-height: 1.85;
  }

  .top-grid-4,
  .top-grid-3 {
    grid-template-columns: 1fr;
  }

  .top-btn-wrap,
  .top-btn-left {
    justify-content: stretch;
  }

  .top-btn-wrap .wp-block-button__link {
    width: 100%;
  }

  .footer-link-wrap {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
}

/*トップページ投稿日非表示*/
/* トップページの投稿日エリアを箱ごと消す */
.home.page .date-tags {
  display: none;
}