@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.1.0
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/

/*---------------------------------
ヘッダー
--------------------------------*/
/* ロゴ */
.site-logo-image {
	max-width: 80%; /* 縮小してモバイルでもさのぴよを表示させる */
}

/* グローバルナビメニュー */
#navi {
	text-shadow: 0 2px 4px rgba(255,255,255,0.7); /* 文字に影をつける */
	box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.2); /* メニュー全体に影をつける */
}
.navi-in a:before { /* 項目ごとにマウスオーバーで下線をつける */
	position: absolute;
	left: 0;
	bottom: 2px;
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	background: #1fab89; /* マウスON時の下線色 */
	transform: scale(0, 1);
	transition: 0.2s;
}
.navi-in a:hover:before {
	transform: scale(1);
}

/* 通知エリア */
.notice-area-wrap {
	box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.2); /* 通知エリア全体に影をつける */
}

/* アピールエリア(ヘッダー下のトップ画像) */
.appeal-content {
	display:none; /* 半透明の枠を消す */
}
#appeal, .appeal .appeal-in {
	min-height: 32vw; /* どの端末サイズでも画像を横幅いっぱいで表示させる */
}

/*---------------------------------
フッター
--------------------------------*/
.footer {
	box-shadow: 0px -3px 10px rgba(0,0,0,.2); /* メニュー全体に影(上)をつける */
}
.widget-footer-center, .widget-footer-mobile {
	color: #1fab89; /* 文字色 */
}

/*---------------------------------
見出し
--------------------------------*/
.article h1 {
	position: relative;
	margin-bottom: 1em;
	text-align: center;
	font-size: 40px;
	font-weight: 200;
}
.article h1:before {
	content: '';
	position: absolute;
	bottom: -0.5em;
	display: inline-block;
	width: 80px;
	height: 8px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	background-color: #1fab89;
	border-radius: 4px;
}
.article h2 {
	border: none;
	background-color: #9df3c4; /* 背景色 */
	border-radius: 5px;
	padding: 1em 1em 1em 2.5em; /* 上・右・下・左の余白 */
	position: relative;
	box-shadow: 0px 1px 5px rgba(0, 0, 0, .2);
}
.article h2::before {
	content: '＊*'; /*花に見せかけるためのアスタリスク*/
	color: #fff; /* アスタリスクの色 */
	display: inline-block;
	font-size: 30px; /* アスタリスクの大きさ */
	font-weight: bold;
	margin-right: 10px;
	position: absolute;
	top: 0px;
	left: 0px;
	transform: rotate(20deg);
	-moz-transform: rotate(20deg);
	-webkit-transform: rotate(20deg);
	-o-transform: rotate(20deg);
	text-shadow: 0px 0px 3px #fff, 0px 0px 2px #fff, 0 0 0.5px #fff; /* アスタリスク周りの影 */
}
.article h3 {
    border-left: none;
    border-bottom: 1px solid #62d2a2;
    border-right: none;
    border-top: none;
    font-size: 22px;
    padding: 12px 20px;
}
.article h4 {
	border: none;
	padding: 5px 5px 5px 30px; /* 上・右・下・左の余白 */
	position: relative;
}
.article h4:before {
	background-color: #1fab89; /* 左側の線の色 */
	border-radius: 2px;
	content: '';
	position: absolute;
	top: 0;
	left: 3px; /* 左端からの位置 */
	width: 5px; /* 左側の線の幅 */
	height: 100%;
}
.article h4:after {
	background-color: #62d2a2; /* 右側の線の色 */
	border-radius: 2px;
	content: '';
	position: absolute;
	top: 0;
	left: 12px; /* 左端からの位置 */
	width: 5px; /* 右側の線の幅 */
	height: 100%;
}

/* ウィジェットの見出し */
h3.widget-title {
	background-color: #9df3c4;
	box-shadow: 0px 1px 5px rgba(0,0,0,.2);
}

/*---------------------------------
目次
--------------------------------*/
.toc {
	background-color: #edf6ff;
}
.toc a {
	color: #1967d2;
}

/*---------------------------------
テーブル
--------------------------------*/
.article table {
	border-collapse: collapse;
	padding: 0;
	width: auto;
}
.article table tr {
	padding: .35em;
	border-bottom: 2px solid #fff;
}
.article table th, table td {
	border: none;
 	border-right: 2px solid #fff;
}
.article table th {
	font-size: .85em;
}
.article table thead th {
	background-color: #1fab89;
	color:#fff;
}
.article table tbody th {
	background: #62d2a2;
	color: #fff;
}
.article table td {
	background-color: #d7fbe8;
}

/*---------------------------------
固定ページの全体設定
--------------------------------*/
/* 投稿日付を非表示 */
.page .date-tags {
	display: none;
}
/* SNSシェアを非表示 */
.page .sns-share {
	display: none;
}
/*---------------------------------
固定ページの個別設定
--------------------------------*/
/* トップページ */
.front-top-page .entry-title {
	display: none; /* タイトルを非表示 */
}
.front-top-page .whatsnew h2 {
	margin-top: 0px; /* 更新情報を先頭した時にできる空白を削除する */
}
.front-top-page #toc { display: none; } /* 目次を非表示 */

/* 団員紹介 */
#post-24 #toc { display: none; } /* 目次を非表示 */
#post-24 .fg-image { height: 160px; } /* 団員画像の高さを統一 */

/* 第13回定期演奏会 */
#post-26577 .entry-title { display: none; } /* デフォルトのh1を非表示にする */
#post-26577 canvas {
	width: 100% !important;
	height: auto !important;
}

/*---------------------------------
投稿ページの全体設定
--------------------------------*/
/* 投稿日付を非表示 */
.post .post-date {
	display: none;
}
/*---------------------------------
投稿ページ一覧の設定
--------------------------------*/
/* カードの角を丸くする */
.ecb-entry-border .entry-card-wrap {
    border-radius: 5px;
}
/* 画像の角を丸くする */
.ect-vertical-card .entry-card-wrap .entry-card-thumb img {
    border-radius: 5px;
}

/*---------------------------------
投稿ページの個別設定
--------------------------------*/
/* よくある質問集 */
.category-faq-post .sns-share {
	display: none; /* SNSシェアを非表示 */
}

/*---------------------------------
入力フォームの全体設定
--------------------------------*/
/* ボタンにCSS設定が当たっていないため個別に追加 */
button, input[type="button"], input[type="submit"] {
    padding: 7px;
    border: 1px solid #ccc;
    border-radius: 4px;
	color: #333;
    font-size: 18px;
	cursor: pointer;
	cursor: hand;
}
/* モバイルで入力可能フォームが灰色背景となるため、個別に修正 */
input[type="button"]:enabled, select:enabled, input[type="date"]:enabled {
	background: #fff;
}
select:disabled, input[type="date"]:disabled {
	background: #eaeaea;
}

/*---------------------------------
入力フォームの個別設定
--------------------------------*/
/* マイページ */
#post-18118 button:enabled {
	background: #fff;
}
/* 団費帳 */
#post-22682 button:enabled {
	background: #fff;
}
/* 団費入力(実績版) */
#post-18629 .input-table input[type="date"], #post-18629 .input-table select, #post-18629 .input-table input[type="button"] {
	padding: 0px;
	font-size: 1em;
}

/*---------------------------------
掲示板に関する設定
--------------------------------*/
/* 掲示板用パンくずリストを非表示 */
.bbp-breadcrumb {
	display: none;
}
/* 購読リンクを非表示 */
#subscription-toggle {
	display: none;
}
/* SNSシェアを非表示 */
.bbpress .sns-share {
	display: none;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
  /*必要ならばここにコードを書く*/
}

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

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

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