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

/*以下、細川が追加*/
/*固定ページの投稿日、更新日、投稿者名を非表示にする*/
.page .date-tags,
.page .author-info {
    display: none;
}

/* =========================================
   全体トーン（信頼 × 清潔感 × 女性医師の柔らかさ）
   ========================================= */
body {
  background-color: #f7f9fc;
  font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
  line-height: 1.8;
  letter-spacing: 0.03em;
  color: #333;
}

/* 見出しカラー */
h1, h2, h3, h4 {
  color: #5c63a8;
}

/* リンク */
a {
  color: #3e5f9c;
  text-decoration: none;
}
a:hover {
  color: #5c63a8;
  text-decoration: underline;
}

/* =========================================
   見出しデザイン（企業向けの信頼感）
   ========================================= */
.article h2 {
  border-bottom: 3px solid #5c63a8;
  padding-bottom: 0.3em;
  font-weight: 600;
}

.article h3 {
  background: #eef0ff;
  padding: 0.4em 0.6em;
  border-radius: 6px;
  font-weight: 500;
}

/* =========================================
   ボックスデザイン（安心感・メンタル専門性）
   ========================================= */
.box {
  border-radius: 8px;
  padding: 1.2em;
  background: #f3f4ff;
  border-left: 6px solid #5c63a8;
}

/* 吹き出し（柔らかい印象） */
.speech-balloon {
  border-radius: 12px !important;
}

/* =========================================
   プロフィール（女性医師の上品さ）
   ========================================= */
.profile-box {
  background: #ffffff;
  border-radius: 12px;
  padding: 1.5em;
  border: 1px solid #e5e7f0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.profile-box img {
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* =========================================
   メンタルヘルス専用セクション
   ========================================= */
.mental-section {
  background: #f9f7ff;
  border-left: 6px solid #a89bd8;
  padding: 1.5em;
  border-radius: 10px;
}

/* =========================================
   CTAボタン（企業向けの信頼感）
   ========================================= */
.cta-button {
  background: #5c63a8;
  color: #fff;
  padding: 0.8em 1.4em;
  border-radius: 6px;
  display: inline-block;
  text-align: center;
  font-weight: bold;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}
.cta-button:hover {
  background: #4a5294;
}

/* =========================================
   スマホ最適化（企業担当者の閲覧に配慮）
   ========================================= */
@media screen and (max-width: 480px) {
  body {
    font-size: 17px;
  }
  h2 {
    font-size: 22px;
  }
  .profile-box {
    padding: 1.2em;
  }
}