@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* H2見出し：左ラインと薄い背景で誠実さを演出 */
.article h2 {
  background: #f8fafc; /* ベースカラー */
  border-left: 8px solid #1e3a8a; /* メインカラー（ネイビー） */
  border-bottom: 1px solid #e2e8f0; /* 薄い境界線 */
  color: #1e293b; /* テキストカラー */
  padding: 15px 20px;
  line-height: 1.4;
  font-weight: bold;
}

/* H3見出し：シンプルかつ強調された下線 */
.article h3 {
  border-bottom: 3px solid #1e3a8a; /* メインカラー（ネイビー） */
  color: #1e293b;
  padding: 10px 0;
  margin-top: 2em;
  font-weight: bold;
}

/* 記事内の強調リンク（アクセントカラーを使用） */
.article a:hover {
  color: #d97706; /* アクセントカラー（アンバー） */
  text-decoration: underline;
}
/* --- ここから追加：サイドバーの装飾 --- */
/* サイドバーの見出し：ネイビーの背景で引き締める */
.sidebar h3 {
  background: #1e3a8a;
  color: #ffffff;
  padding: 10px 15px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 4px;
  margin-bottom: 15px;
}

/* サイドバー内のリスト項目 */
.sidebar ul li {
  border-bottom: 1px dashed #e2e8f0;
  padding: 8px 0;
}

.sidebar ul li a {
  color: #1e293b;
  text-decoration: none;
  font-size: 15px;
  transition: 0.3s;
}

/* ホバー時にアクセントカラーにする */
.sidebar ul li a:hover {
  color: #d97706;
  padding-left: 5px;
}
/* --- ここから追加：サイズアップ版アンバーボタン --- */
.btn-amber {
  display: inline-block;
  background: #d97706; /* アクセントカラー */
  color: #fff !important;
  font-weight: bold;
  text-decoration: none;
  padding: 20px 60px; /* ここを大きくしました */
  border-radius: 50px;
  box-shadow: 0 5px 0 #b45309; /* 影を少し厚く */
  transition: 0.3s;
  font-size: 1.3em; /* 文字を大きくしました */
  text-align: center;
  max-width: 100%; /* スマホではみ出さない設定 */
  box-sizing: border-box;
}

.btn-amber:hover {
  background: #f59e0b;
  transform: translateY(3px); /* 押し込み感を強く */
  box-shadow: 0 2px 0 #b45309;
}
/* --- ここから追加：マイクロコピー ＆ スマホメニュー --- */

/* ボタンの上の補足文字（マイクロコピー） */
.btn-microcopy {
  display: block;
  font-size: 0.9em;
  font-weight: bold;
  color: #1e3a8a; /* サイトのメインカラー（ネイビー） */
  margin-bottom: 8px;
  text-align: center;
}
.btn-microcopy span {
  color: #d97706; /* アクセントカラー（アンバー） */
  margin: 0 5px;
}

/* スマホフッターメニューの背景をネイビーに */
.mobile-footer-menu-buttons {
  background-color: #1e3a8a !important;
}
/* メニューの文字を白に */
.mobile-footer-menu-buttons .menu-button > a {
  color: #ffffff !important;
}
/* 一番右のボタン（口座開設など）をアンバーにして目立たせる */
.mobile-footer-menu-buttons .menu-button:last-child > a {
  background-color: #d97706 !important;
  color: #ffffff !important;
}
/* --- ここまで追加 --- */
/* 引用（blockquote）のカスタマイズ */
blockquote {
  position: relative;
  padding: 20px 25px 20px 40px !important; /* 余白の調整 */
  background: #f8fafc; /* ほんのり薄いグレーの背景 */
  border-left: 5px solid #1e3a8a !important; /* 左線を信頼のネイビーに */
  color: #334155; /* 文字色 */
  border-radius: 4px;
}

/* 引用のアイコン（引用符）を左上に配置 */
blockquote::before {
  content: "\f10d"; /* FontAwesomeの引用アイコン */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  top: 10px;
  left: 10px;
  color: #cbd5e1; /* 薄いグレーでさりげなく */
  font-size: 20px;
}

/* 引用元（cite）の文字をアンバー（琥珀色）に */
blockquote cite {
  display: block;
  text-align: right;
  margin-top: 10px;
  color: #d97706; /* 行動を促すアンバー */
  font-size: 0.9em;
  font-weight: bold;
}
/* --- ここまで追加 --- */
/* --- ここまで追加 --- */
/* --- ここから追加：グローバルナビ（PCヘッダーメニュー）の調整 --- */

/* メニューを中央寄せにする */
#navi .navi-in > ul {
  justify-content: center;
}

/* メニューの文字（白に変更して読みやすく！） */
#navi .navi-in a {
  color: #ffffff !important; 
  font-weight: bold;
  font-size: 16px;
  padding: 1.5em 1.2em;
  transition: 0.3s;
}

/* マウスを置いた時（アンバーに変化） */
#navi .navi-in a:hover {
  color: #ffb800 !important;
  background: rgba(255, 184, 0, 0.1);
}

/* 現在表示しているページのアンダーライン */
.current-menu-item a {
  border-bottom: 3px solid #ffb800;
}

/* 一番右のボタン（お問い合わせ等）を枠線で目立たせる */
#navi .navi-in > ul > li:last-child a {
  color: #ffb800 !important;
  border: 2px solid #ffb800;
  border-radius: 5px;
  margin-left: 10px;
  padding: 0.8em 1.5em;
  align-self: center;
}
/* --- ここまで追加 --- */
#navi .navi-in > ul > li:last-child a {
  color: #d97706 !important;
  border: 2px solid #d97706;
  border-radius: 5px;
  margin-left: 10px;
  padding: 0.8em 1.5em;
  align-self: center;
}
/* --- ここまで追加 --- */
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}