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

.tagline a{ color:inherit; text-decoration:none; font-weight:600; }
.tagline a:hover{ opacity:.85; }


/* Portal ページ (ID=8) の記事ヘッダー非表示 */
.page-id-8 .article-header.entry-header {
  display: none !important;
}


.wpcf7-form label { display:block; margin:.6rem 0 .25rem; font-weight:600; }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea { width:100%; max-width:600px; }
.wpcf7-submit { padding:.6rem 1.2rem; font-weight:700; }


/* ================================
   Portal（ID=8）用 シック配色（Slate）
   ================================ */
.page-id-8{
  /* パレット（色を替えたい時はここだけ差し替え） */
  --portal-bg-1: #1f2937;   /* Slate 700 */
  --portal-bg-2: #0f172a;   /* Slate 900 */
  --portal-accent: #475569;  /* Slate 600 */
  --portal-text: #f8fafc;    /* Slate 50 */
  --portal-ring: rgba(148,163,184,.35); /* Slate 400 */
}

/* バナー：うっすらガラス感→落ち着いた半透明 */
.page-id-8 .portal-banner{
  background: rgba(15,23,42,.06);           /* ほんのり濃い目 */
  border: 1px solid rgba(148,163,184,.18);  /* 淡い枠線 */
  box-shadow: 0 8px 24px rgba(2,6,23,.10);
}

/* バナー内テキストのトーン */
.page-id-8 .portal-banner,
.page-id-8 .portal-banner *{
  color: var(--portal-bg-2);
}

/* 統一色の「ENTRY」などボタン */
.page-id-8 .portal-button{
  background: linear-gradient(135deg,var(--portal-bg-2),var(--portal-bg-1));
  color: var(--portal-text) !important;
  border: 1px solid rgba(148,163,184,.22);
  box-shadow: 0 10px 22px rgba(2,6,23,.18);
}
.page-id-8 .portal-button:hover{
  filter: brightness(1.05);
  box-shadow: 0 12px 28px rgba(2,6,23,.22);
}
.page-id-8 .portal-button:focus{
  outline: 2px solid var(--portal-ring);
  outline-offset: 2px;
}

/* ポータルカード：全タイルを同一トーンに */
.page-id-8 .portal-card{
  background: linear-gradient(135deg,var(--portal-bg-1),var(--portal-bg-2)) !important;
  color: var(--portal-text) !important;
  border: 1px solid rgba(148,163,184,.20);
  box-shadow: 0 12px 30px rgba(2,6,23,.20);
}
.page-id-8 .portal-card span{ text-shadow: 0 1px 0 rgba(0,0,0,.25); }
.page-id-8 .portal-card:hover{ transform: translateY(-1px); opacity:.98; }

/* （任意）タイル角の雰囲気を少し柔らかくしたい場合 */
.page-id-8 .portal-card{ border-radius: 18px; }

/* ================================
   Portal（ID=8）用 かわいいパステル配色
   デフォルト：Sakura Pastel
   ================================ */
.page-id-8{
  /* ▼ パレット（変えたいときはここだけ差し替え） */
  --p-bg-1:   #fff3f8;   /* うす桃 */
  --p-bg-2:   #f8f5ff;   /* うすラベンダー */
  --p-ac1:    #ff8fb3;   /* アクセント1（濃い桃） */
  --p-ac2:    #f6a6d6;   /* アクセント2（ピンク寄り） */
  --p-card1:  #ffe5f2;   /* タイル上部 */
  --p-card2:  #edeaff;   /* タイル下部 */
  --p-text:   #4a3b47;   /* 文字（落ち着いたプラム） */
  --p-ring:   rgba(246,166,214,.55);
  --p-shadow: 0 10px 24px rgba(80,40,80,.10);
}

/* バナー（ふわっと明るく） */
.page-id-8 .portal-banner{
  background: linear-gradient(180deg,var(--p-bg-1),var(--p-bg-2));
  border: 1px solid rgba(80,40,80,.08);
  color: var(--p-text);
  box-shadow: var(--p-shadow);
}

/* ボタン（ころんと丸い、つやっと） */
.page-id-8 .portal-button{
  background: linear-gradient(135deg,var(--p-ac1),var(--p-ac2));
  color:#fff !important;
  border:none;
  border-radius: 999px;
  padding: 12px 20px;
  box-shadow: 0 8px 18px rgba(246,166,214,.35);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.page-id-8 .portal-button:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 12px 26px rgba(246,166,214,.45);
}
.page-id-8 .portal-button:focus{ outline:2px solid var(--p-ring); outline-offset:2px; }

/* タイル（やわらかパステル・角も丸く） */
.page-id-8 .portal-card{
  background: linear-gradient(135deg,var(--p-card1),var(--p-card2)) !important;
  color: var(--p-text) !important;
  border: 1px solid rgba(80,40,80,.08);
  border-radius: 20px;
  box-shadow: var(--p-shadow);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.page-id-8 .portal-card span{ text-shadow: 0 1px 0 rgba(255,255,255,.85); letter-spacing:.02em; }
.page-id-8 .portal-card:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px rgba(80,40,80,.16); opacity:.98; }