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

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

/************************************
** メインビジュアル
************************************/
<style>
.hero-section{
  --hero-bg-image: url("https://www.goodheartlinks.org/wp-content/uploads/2025/08/soft-pastel-blue-background-with-glowing-light-blue-background-image-light-blue-texture-wallpaper_1020697-721492.jpg");

  position: relative;
  min-height: clamp(60vh, 72vw, 82vh);
  display: grid;
  place-items: center;
  padding: clamp(56px, 6vw, 96px) 16px;

  /* 上:放射 → 中:青グラデ → 下:実画像（順序に注意） */
  background-image:
    radial-gradient(1200px 600px at 80% 10%, rgba(255,255,255,.85), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #e9f4ff 0%, #edf7ff 28%, #f4faff 55%, #f9fcff 100%),
    var(--hero-bg-image) !important;
  background-size: auto, auto, cover !important;
  background-position: center, center, center !important;
  background-repeat: no-repeat !important;

  overflow: hidden;
}

/* ベール（読みやすさ） */
.hero-section::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.10));
  pointer-events:none;
  z-index: 0;
}

/* 中央ボックスは必ず上に */
.hero-content{
  position: relative;
  z-index: 1;
  max-width: min(960px, 92vw);
  text-align: center;
  background: rgba(255,255,255,.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 18px;
  padding: clamp(16px, 3.2vw, 32px) clamp(18px, 4vw, 40px);
  box-shadow: 0 10px 30px rgba(115,161,219,.18);
}

/* タイトル */
.hero-title{
  margin: 0;
  font-size: clamp(22px, 4.6vw, 44px);
  line-height: 1.35;
  color: #2a5078;
  letter-spacing: .03em;
  font-weight: 700;
  text-wrap: balance;
}

/* 下のセクション余白 */
.site-section:first-of-type{ margin-top: clamp(24px, 3vw, 40px); }

/* トーン統一（任意） */
.bg-light-green{ background:#f4fbff; }
.bg-light-pink { background:#f7fbff; }

.button{
  background:#2a79c5; color:#fff; border-radius:10px;
  padding:10px 18px; display:inline-block;
}
.button:hover{ filter:brightness(1.05); }

.activity-swiper .swiper-button-prev,
.activity-swiper .swiper-button-next{
  color:#2a79c5;
  filter: drop-shadow(0 2px 4px rgba(42,121,197,.2));
}
</style>



/************************************
** メインビジュアル終わり
************************************/
a:hover,{
  color: #1a73e8 !important;
  text-decoration: none !important;
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}
a:focus,
a:active {
  outline: none;
  box-shadow: none;
  color: #1a73e8; /* フォーカス時もホバーと同じ色 */
  background-color: transparent;
}

.activity-card:focus,
.activity-card:active {
  outline: none;
  box-shadow: none;
  background-color: transparent;
}


.activity-card:focus,
.activity-card:active {
  outline: none;
  box-shadow: none;
  color: inherit;
}


.swiper-slide {
  width: auto;
  display: flex;
  justify-content: center;
}


.activity-section {
  padding: 60px 20px;
  text-align: center;
}
.section-title {
  font-size: 2rem;
  margin-bottom: 10px;
}
.section-subtitle {
  margin-bottom: 30px;
  font-size: 1rem;
  color: #555;
}
.activity-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}
.activity-icon {
  width: 60px;
  height: 60px;
  margin-bottom: 15px;
}
.activity-swiper-section {
  padding: 2em 0;
  text-align: center;
}
.activity-swiper img {
  width: 90%;
  height: auto;
  border-radius: 12px;
  margin-bottom: 0.5em;
}
.activity-swiper .swiper-slide {
  text-align: center;
  font-size: 1em;
  padding: 1em;
}
.activity-swiper .swiper-button-next,
.activity-swiper .swiper-button-prev {
  color: #333;
}

	/* Pocketボタンを非表示 */
.pocket-button {
  display: none !important;
}

/* はてなブックマークボタンを非表示 */
.hatebu-button {
  display: none !important;
}

.copy-button{display: none !important;
    
}
/* ヒーローセクション：画面幅いっぱいに広げる */
.hero-section {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: linear-gradient(to bottom, #f8fbff, #ffffff); /* お好みで背景変更 */
  padding: 120px 20px 80px;
  text-align: center;
  box-sizing: border-box;
  color: #000;
}

/* ヒーロータイトルの文字サイズ */
.hero-title {
  font-size: 2.8rem;
  font-weight: bold;
  line-height: 1.4;
}
.site-section {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: 80px 20px;
  box-sizing: border-box;
  background-color: #fff; /* 必要に応じて変更 */
}

@media screen and (max-width: 768px) {
  .hero-title {
    font-size: 2.2rem;
  }
}
@media screen and (max-width: 768px) {
  .section-body {
    padding: 16px;
  }

  .your-target-class {
    padding: 20px;
  }
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
/* モバイル・タブレットでの本文パディング調整 */
@media screen and (max-width: 1023px) {
  .entry-content,
  .article,
  .content,
  .main,
  .main-content {
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
  }
}


/* タブレット以下の幅（768px以下） */
@media screen and (max-width: 768px) {
  /* ヘッダー構成変更 */
.menu-header.menu-pc {
    display: none !important;
  }
  #header-in {
    flex-direction: column;
    align-items: flex-start;
  }

  .logo-header {
    justify-content: center;
    width: 100%;
    height: auto;
    padding: 10px 10px;
  }

  .tagline {
    margin-left: 0;
    text-align: center;
    width: 100%;
    margin-bottom: 10px;
  }

  /* ナビメニュー縦並びに変更 */
  #navi-in {
    justify-content: center;
    width: 100%;
    min-height: auto;
    padding: 10px 10px;
  }

  .menu-header {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
  }

  .menu-header li a {
    justify-content: center;
    padding: 10px;
    font-size: 1rem;
  }

  .menu-header .contact-button a {
    width: 80%;
    font-size: 1rem;
    height: auto;
    padding: 10px 10px;
  }
}

/* スマホ表示用（480px以下） */
@media screen and (max-width: 480px) {
  .logo-header {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 10px;
    margin-top: 0px; /* ← ここで上部の余白を追加 */
  }

  .logo-header img,
  .header-site-logo-image {
    max-width: 15%;
    height: auto !important;
  }

  #header-in {
    padding: 30px;
  }
}

/* ▼ つながりテンプレート用 */
.tsunagari-page {
    background-color: #fdfaf6;
    padding: 3em 1em;
}

.tsunagari-page .section-title {
    text-align: center;
    font-size: 2.2rem;
    color: #004d00;
    margin-bottom: 1em;
    border-bottom: 2px solid #e0d8ce;
    display: inline-block;
    padding-bottom: 0.5em;
}

.tsunagari-page .section-lead {
    text-align: center;
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 2.5em;
    line-height: 1.7;
}

.tsunagari-page .philosophy-content,
.tsunagari-page .greeting-content {
    max-width: 1800px;
    margin: 0 auto;
    text-align: left;
    color: #4a4a4a;
    line-height: 1.8;
}

.tsunagari-page .section-divider {
    border: 0;
    border-top: 1px solid #e0d8ce;
    margin: 4em 0;
}

.tsunagari-page h3,
.tsunagari-page h4 {
    color: #5d4037;
    margin-top: 2.5em;
}


/* ===== 仲間の声：カードレイアウト ===== */

/* 全体グリッド（カード並べ） */
.friends-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  align-items: stretch;
}

/* 1枚のカード */
.friend-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 18px 18px 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.friend-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}

/* カード内のヘッダ（任意） */
.friend-card .friend-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.friend-card .friend-head .avatar {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
}
.friend-card .friend-head .name {
  font-weight: 700; color: #333; font-size: 1rem;
}

/* Feedzyの見た目をカード内向けに調整（Feedzyの出力に合わせて汎用で当てる） */
.friend-card .friend-feed .feedzy-rss,
.friend-card .friend-feed .feedzy-rss ul {
  list-style: none; margin: 0; padding: 0;
}
.friend-card .friend-feed .rss_item,
.friend-card .friend-feed li {
  border: 0; margin: 0; padding: 0;
}
.friend-card .friend-feed .rss_item + .rss_item,
.friend-card .friend-feed li + li {
  margin-top: 10px; /* max=1件なら実質無視 */
}

/* タイトルリンク（Feedzy側） */
.friend-card .friend-feed a {
  text-decoration: none;
  color: #1f2937;
  font-weight: 700;
  line-height: 1.4;
}
.friend-card .friend-feed a:hover { text-decoration: underline; }

/* サムネイルが出る設定のときの整形（あれば） */
.friend-card .friend-feed img {
  width: 100%; height: auto; border-radius: 10px; margin: 8px 0 4px;
}

/* メタ（日時など） */
.friend-card .friend-feed .meta,
.friend-card .friend-feed .fz_date,
.friend-card .friend-feed .feedzy-date {
  color: #6b7280; font-size: .86rem; margin-top: 4px;
}

/* 記事リンク側（あなたの手書きaタグ） */
.friend-card .friend-article {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed #e5e7eb;
}
.friend-card .friend-article a.featured-article-simple {
  display: block;
  text-decoration: none;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 12px 14px;
  background: #fafafa;
  transition: background .15s ease, border-color .15s ease;
}
.friend-card .friend-article a.featured-article-simple:hover {
  background: #f5f5f5;
  border-color: #e5e7eb;
}
.friend-card .friend-article .featured-article-simple-title {
  display: block;
  font-weight: 700; color: #374151; line-height: 1.5;
}

/* ボタン風にしたいとき（任意で .as-button をリンクに付ける） */
.friend-card .friend-article a.as-button {
  text-align: center; background: #111827; color: #fff; border-color: transparent;
}
.friend-card .friend-article a.as-button:hover {
  background: #0b1220;
}

/* 微調整：小さめ画面 */
@media (max-width: 480px){
  .friend-card { padding: 16px; border-radius: 14px; }
}


.friend-card .friend-feed .toc,
.friend-card .friend-feed .toc-container,
.friend-card .friend-feed .toc_container,
.friend-card .friend-feed .ez-toc-container,
.friend-card .friend-feed .table-of-contents,
.friend-card .friend-feed .mokuji { display:none !important; }

.section-divider {
  border: 0;
  height: 1px;
  background: #ddd;   /* グレー線 */
  margin: 2rem auto;  /* 上下余白 */
  width: 80%;         /* 横幅を少し短く */
}


.policy {
  max-width: 1000px;
  margin: 0 auto; /* 中央寄せ */
  padding: 2rem;
  line-height: 1.8;
  font-size: 16px;
  color: #333;
}

.policy h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
  text-align: center;
}

.policy h2 {
  font-size: 1.4rem;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  border-left: 4px solid #e57373; /* アクセント */
  padding-left: 0.5rem;
}

.policy p,
.policy ul {
  margin-bottom: 1rem;
}

.policy ul {
  padding-left: 1.5rem;
}

.policy a {
  color: #e57373;
  text-decoration: underline;
}


/* フォーム全体の枠 */
.ghl-request-form {
  max-width: 640px;
  margin: 2em auto;
  padding: 1.5em 2em;
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 8px;
}

/* 各行の余白 */
.ghl-request-form .form-row {
  margin-bottom: 1.2em;
}

/* ラベル */
.ghl-request-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4em;
  color: #333;
}

/* テキストボックスとテキストエリア */
.ghl-request-form input[type="text"],
.ghl-request-form input[type="email"],
.ghl-request-form input[type="url"],
.ghl-request-form textarea {
  width: 100%;
  padding: 0.6em 0.8em;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  line-height: 1.4;
  box-sizing: border-box;
}

.ghl-request-form input:focus,
.ghl-request-form textarea:focus {
  border-color: #0073aa;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0,115,170,0.2);
}

/* チェックボックス行 */
.ghl-request-form .form-row--agree {
  display: flex;
  align-items: center;
  font-size: 0.95rem;
}

.ghl-request-form .form-row--agree input[type="checkbox"] {
  margin-right: 0.5em;
  transform: scale(1.2);
}

/* 送信ボタン */
.ghl-request-form .wpcf7-submit.button {
  display: inline-block;
  padding: 0.6em 1.5em;
  background: #0073aa;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s;
}

.ghl-request-form .wpcf7-submit.button:hover {
  background: #005f87;
}

/* エラーメッセージ */
.wpcf7-not-valid-tip {
  color: #c00;
  font-size: 0.85rem;
  margin-top: 0.3em;
  display: block;
}

.wpcf7-response-output {
  margin-top: 1em;
  padding: 0.8em 1em;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.9rem;
}

.wpcf7-response-output[aria-hidden="false"] {
  background: #fff3f3;
  border-color: #e0a0a0;
  color: #a00;
}


/* 活動紹介ページ全体の余白 */
.page-activities {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* セクションごとに区切る */
.activity-section {
  margin: 60px 0;
  padding-bottom: 40px;
  border-bottom: 1px solid #e0e0e0;
}

.activity-section:last-child {
  border-bottom: none; /* 最後は区切り線を消す */
}

/* セクション見出し */
.activity-section h2 {
  font-size: 1.8em;
  font-weight: 600;
  margin-bottom: 20px;
  color: #333;
  display: flex;
  align-items: center;
}

/* アイコン付き見出し */
.activity-section h2 .activity-icon {
  width: 40px;
  height: auto;
  margin-right: 12px;
}

/* 段落スタイル */
.activity-section p {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 1em;
  color: #444;
}

/* ページ冒頭のナビゲーション */
.activity-nav {
  text-align: center;
  margin-bottom: 40px;
}

.activity-nav a {
  margin: 0 12px;
  font-weight: 500;
  text-decoration: none;
  color: #0073aa;
  transition: color 0.2s;
}

.activity-nav a:hover {
  color: #005177;
  text-decoration: underline;
}
0