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

/* ============================================================
 * エクササイズマップ サイト共通スタイル
 *
 * 設置先: wp-content/themes/cocoon-child-master/style.css の末尾に追記
 *         （冒頭のテーマ情報コメントは必ず残すこと）
 *
 * 方針:
 *   配置・表示は Cocoon のヘッダーレイアウト（hlt-top-menu）に任せ、
 *   このCSSでは「色」と「余白」だけを調整する。
 *   display / visibility / float / justify-content などレイアウトに関わる
 *   指定は書かない。前回それらを指定したことでグローバルメニューが
 *   表示されなくなったため。
 * ============================================================ */

/* ------------------------------------------------------------
 * 配色
 * 青を主色にし、オレンジは「押してほしい場所」だけに使う。
 * ------------------------------------------------------------ */
:root {
	--em-blue-dark: #1e5a9e;
	--em-blue:      #2a6ebb;
	--em-blue-pale: #eef4fb;
	--em-orange:    #e8622a;
	--em-text:      #333;
	--em-muted:     #777;
}

/* ------------------------------------------------------------
 * ヘッダー
 * 背景と文字色だけを変える。配置には触らない。
 * ------------------------------------------------------------ */
#header-container,
.header-container {
	background: var(--em-blue-dark);
}

#header,
.header {
	background: transparent;
}

/* サイト名 */
#header .site-name-text,
#header .logo-header a,
#header .site-name a {
	color: #fff !important;
	font-size: 1.15em !important;
	font-weight: 700;
	letter-spacing: .02em;
	text-decoration: none;
	line-height: 1.3;
}

/* サイト名の下に英字を小さく添える */
#header .site-name-text-link::after {
	content: "EXERCISE MAP";
	display: block;
	font-size: .58em;
	font-weight: 400;
	letter-spacing: .18em;
	color: rgba(255, 255, 255, .72);
	margin-top: .15em;
}

/* キャッチフレーズはヘッダーでは出さない（本文で説明しているため） */
.tagline,
.site-description {
	display: none;
}

/* ------------------------------------------------------------
 * グローバルメニュー
 * 文字色と背景色のみ。並び方は Cocoon の設定に従う。
 * ------------------------------------------------------------ */
#navi,
.navi {
	background-color: transparent;
}

#navi-in a,
.navi-in a {
	color: rgba(255, 255, 255, .92);
}

#navi-in a:hover,
.navi-in a:hover {
	background-color: rgba(255, 255, 255, .12);
	color: #fff;
}

/* ------------------------------------------------------------
 * 本文まわり
 * ------------------------------------------------------------ */
body {
	color: var(--em-text);
}

a {
	color: var(--em-blue);
}

a:hover {
	color: var(--em-blue-dark);
}

.breadcrumb {
	font-size: .8em;
	color: var(--em-muted);
}

/* ------------------------------------------------------------
 * フッター
 * ------------------------------------------------------------ */
.footer {
	background: #f6f8fa;
	border-top: 3px solid var(--em-blue-dark);
	color: var(--em-text);
}

.footer a {
	color: var(--em-blue);
}

.navi-footer-in a {
	color: var(--em-text);
	font-size: .88em;
}

.copyright {
	color: var(--em-muted);
	font-size: .8em;
}