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

/* 公式SNSリンク（フッター） */
.official-sns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
}

.official-sns a {
  display: inline-flex;
  width: 44px;
  height: 44px;
}

.official-sns img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


.official-btn.ig{ background:#C13584; }   /* 仮色 */
.official-btn.line{ background:#06C755; } /* LINEグリーン */

/* モバイルではヘッダーを非表示したい */
@media (max-width: 1024px) {
  .site-header,
  .header-container,
  .header {
    display: none;
  }
}


:root{
  --c-base: #FAFAF8;   /* ベース（背景） */
  --c-pink: #F1C6CF;   /* アクセント：くすみピンク */
  --c-matcha:#9DB3A2;  /* アクセント2：抹茶 */
  --c-brown:#4A3A2A;   /* アクセント3：ブラウン（文字など） */

  --c-border: rgba(74,58,42,.18); /* 枠線の派生 */
  --c-shadow: rgba(74,58,42,.10); /* 影の派生 */
}

body{
  background: var(--c-base);
  color: var(--c-brown);
}
main#main {
  background: var(--c-base);
}