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

/************************************
** 全体ベース
************************************/
body {
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.03em;
  color: #222;
  background-color: #f5f5f5; /* グレー背景 */
}


/************************************
** メインコンテンツ
************************************/
#content,
.main {
  background-color: #f5f5f5;
}

/************************************
** 記事本文
************************************/
.entry-content {
  max-width: 720px;
  margin: 0 auto;
}

.entry-content p {
  margin-bottom: 1.6em;
}

/************************************
** 記事タイトル（h1）
************************************/
.entry-title,
.archive-title {
  font-size: 1.9em;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  margin-bottom: 0.8em;
  position: relative;
}

/* タイトル下ライン */
.entry-title::after,
.archive-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  background-color: #c62828; /* 赤アクセント */
  margin-top: 12px;
  border-radius: 2px;
}

/************************************
** 見出し
************************************/
.entry-content h2 {
  margin: 2.5em 0 1em;
  padding-left: 0.8em;
  border-left: 5px solid #c62828;
  font-size: 1.4em;
}

.entry-content h3 {
  margin: 2em 0 0.8em;
  font-size: 1.2em;
  font-weight: 700;
}

/************************************
** リンク
************************************/
.entry-content a {
  color: #b71c1c;
  text-decoration: underline;
}

.entry-content a:hover {
  opacity: 0.8;
}

/************************************
** リスト
************************************/
.entry-content ul,
.entry-content ol {
  margin: 1.2em 0 1.6em 1.5em;
}

.entry-content li {
  margin-bottom: 0.6em;
}

/************************************
** コード表示
************************************/
.entry-content code {
  background-color: #f4f6f8;
  padding: 0.2em 0.4em;
  border-radius: 4px;
  font-size: 0.95em;
}

.entry-content pre {
  margin: 1.8em 0;
  padding: 1em;
  font-size: 14px;
  line-height: 1.6;
  border-radius: 6px;
}

/************************************
** カード型記事（トップ）
************************************/
.a-wrap {
  border-radius: 10px;
  transition: 0.2s;
}

.a-wrap:hover {
  transform: translateY(-3px);
}

/************************************
** サイドバー
************************************/
.sidebar {
  font-size: 14px;
  line-height: 1.6;
}

/************************************
** 強調（控えめ）
************************************/
.entry-content strong {
  background: linear-gradient(transparent 70%, #ffcdd2 70%);
}

/************************************
** 本文内ボタン：共通デザイン
************************************/
.entry-content .wp-block-button__link {
  display: inline-block;
  padding: 16px 36px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* 🎾 テニス（グリーン） */
.entry-content .btn-tennis .wp-block-button__link {
  color: #000;
  border: 2px solid #2e7d32;
  background-color: #2e7d32;
}

.entry-content .btn-tennis .wp-block-button__link:hover {
  background-color: #2e7d32;
  color: #fff;
}

/* 💻 IT（ブルー） */
.entry-content .btn-it .wp-block-button__link {
  color: #000;
  border: 2px solid #1565c0;
  background-color: #1565c0;
}

.entry-content .btn-it .wp-block-button__link:hover {
  background-color: #1565c0;
  color: #fff;
}



/************************************
** レスポンシブ
************************************/
/* タブレット */
@media screen and (max-width: 1023px){
  .entry-content {
    max-width: 90%;
  }
}

/* スマホ */
@media screen and (max-width: 480px){
  body {
    font-size: 17px;
  }

  .entry-title,
  .archive-title {
    font-size: 1.6em;
  }

  .entry-title::after,
  .archive-title::after {
    width: 48px;
  }

  .entry-content {
    max-width: 100%;
  }
}
.entry-content a {
  color: #0066cc;
}