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


/* 本文の読みやすさ調整（行間・段落の余白） */
.entry-content p,
.article p {
	line-height: 1.9;
	margin-bottom: 1.5em;
}

/* モバイルの本文を少し大きく・行間を広めに */
@media screen and (max-width: 480px){
	.entry-content p,
	.article p {
		font-size: 17px;
		line-height: 1.95;
	}
}


/* アピールエリア：イラスト全体（3匹）が切れないように縦横比を固定 */
#appeal {
  aspect-ratio: 1928 / 815;
  height: auto !important;
  min-height: 300px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
#appeal .appeal-in {
  width: 100%;
}
/* 文字はイラスト中央の余白に収める */
#appeal .appeal-content {
  max-width: 52%;
  margin: 0 auto;
  text-align: center;
}
@media screen and (max-width: 833px){
  #appeal .appeal-content { max-width: 92%; }
}


/* フロントページ：ヘッダー（サイト名エリア）を非表示にし、アピールエリアにサイト名を表示 */
.home #header {
  display: none;
}
.home #appeal .appeal-content::before {
  content: "甲羅と鱗";
  display: block;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #2f6b3c;
  margin-bottom: 12px;
  line-height: 1.2;
}
@media screen and (max-width: 833px){
  .home #appeal .appeal-content::before {
    font-size: 30px;
  }
}


/* 記事ページヘッダー：サイト名をイラスト中央の余白に配置 */
#header-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#header .site-name-text {
  color: #2f6b3c !important;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-shadow: none;
}
@media screen and (max-width: 833px){
  #header .site-name-text { font-size: 28px; }
}


/* 記事ページヘッダー：トップと同様の半透明白カード＋サブタイトル */
#header .logo-header {
  background: rgba(255,255,255,0.85);
  border-radius: 8px;
  padding: 26px 48px 22px;
  margin: 0;
}
#header .logo-header::after {
  content: "実体験ベースの爬虫類飼育ガイド";
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #333;
  letter-spacing: 0.05em;
  margin-top: 10px;
  line-height: 1.4;
}
#header .tagline {
  display: none;
}
@media screen and (max-width: 833px){
  #header .logo-header { padding: 16px 20px 14px; }
  #header .logo-header::after { font-size: 13px; }
}


/* 記事ページヘッダー微調整：中央揃え・影の除去・キャッチフレーズ帯非表示 */
#header .logo-header {
  text-align: center !important;
}
#header .site-name-text {
  text-shadow: none !important;
}
#header .tagline {
  display: none !important;
}