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

/************************************
** 子テーマ用のスタイルを書く
************************************/

/* ==============================================
   海リゾート配色カスタマイズ（tabiyome.com）
   2026-08-08 導入
   ============================================== */

:root {
  --twy-bg-base: #FDFBF7;        /* ベース背景（生成り） */
  --twy-bg-panel: #FFFFFF;       /* パネル背景（白） */
  --twy-ink: #33474C;            /* 見出し・本文の基本文字色 */
  --twy-ink-soft: #5C6D71;       /* メタ情報など控えめな文字色 */
  --twy-turquoise: #2CA6A4;      /* メインアクセント */
  --twy-turquoise-deep: #1F7A78; /* hover・active時の濃いターコイズ */
  --twy-turquoise-tint: #E3F4F2; /* 薄いハイライト背景 */
  --twy-coral: #E8876B;          /* 差し色（珊瑚） */
  --twy-sand: #F6EFE3;           /* サンドベージュ */
  --twy-divider: #DCEAE8;        /* 区切り線・罫線 */
}

/* サイト全体のベース背景 */
body {
  background-color: var(--twy-bg-base);
}

/* 本文・ヘッダー・ナビの基本文字色
   （Cocoon管理画面側の設定がbody.public-pageに直接色を指定しているため、
   !importantで確実に上書きする） */
body.public-page {
  --cocoon-text-color: var(--twy-ink) !important;
}
:root {
  --cocoon-header-text-color: var(--twy-ink) !important;
  --cocoon-navi-text-color: var(--twy-ink) !important;
}

/* ヘッダー */
.header-container {
  background-color: var(--twy-bg-panel) !important;
  border-bottom: 3px solid var(--twy-turquoise);
}
.header,
.header .site-name-text,
.header .site-name-text-link,
.tagline {
  color: var(--twy-ink) !important;
}

/* グローバルナビ */
#navi .navi-in a {
  color: var(--twy-ink) !important;
}
#navi .navi-in a:hover {
  background-color: var(--twy-turquoise-tint) !important;
  color: var(--twy-turquoise-deep) !important;
}

/* 本文中のリンク */
a {
  color: var(--twy-turquoise);
}
a:hover {
  color: var(--twy-turquoise-deep);
}

/* ボタン（記事内ボタン・アピールエリアのボタン） */
.btn,
.btn-wrap > a,
.ranking-item-link-buttons a,
.wp-block-freeform .btn-wrap > a {
  background-color: var(--twy-turquoise) !important;
  border-color: var(--twy-turquoise) !important;
  color: #fff !important;
}
.btn:hover,
.btn-wrap > a:hover,
.ranking-item-link-buttons a:hover {
  background-color: var(--twy-turquoise-deep) !important;
  border-color: var(--twy-turquoise-deep) !important;
}
.appeal-content .appeal-button {
  background-color: var(--twy-turquoise) !important;
  color: #fff !important;
}

/* 見出し（記事内・サイドバー） */
.article h2,
.sidebar h2,
.sidebar h3 {
  color: var(--twy-ink) !important;
  background-color: var(--twy-bg-panel) !important;
  border-bottom: 2px solid var(--twy-turquoise) !important;
}
.article h3,
.article h4,
.article h5,
.article h6 {
  color: var(--twy-ink);
  border-color: var(--twy-turquoise) !important;
}

/* 区切り線・罫線 */
hr {
  border-color: var(--twy-divider);
  color: var(--twy-divider);
}
.article .toc,
.a-wrap .blogcard,
.author-box,
.comment-reply-link,
table:not(.has-border-color) th,
table:not(.has-border-color) td,
.pagination .current,
.page-numbers {
  border-color: var(--twy-divider) !important;
}

/* カテゴリ・タグラベル */
.cat-link,
.cat-label {
  background-color: var(--twy-turquoise) !important;
  color: #fff !important;
  border-color: var(--twy-turquoise) !important;
}
.tag-link {
  border-color: var(--twy-divider) !important;
  color: var(--twy-coral);
}

/* フッター */
#footer {
  background-color: var(--twy-sand) !important;
  color: var(--twy-ink-soft) !important;
}
#footer a:not(.sns-button) {
  color: var(--twy-ink-soft) !important;
}

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

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

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