@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){
  /*必要ならばここにコードを書く*/
}
/*———————————
コンテンツ上部の余白を詰める
——————————–*/
.content { 
margin-top: 0; 
}
.main{
	padding-top:0;
}
.entry-content {
	margin-top:0;
}
/*———————————
固定ページのタイトルを非表示にする -> しない
——————————–*/
h1.entry-title{
	margin: 3rem 0 1rem;
	font-size: 3rem;
}

/*———————————
投稿者の表示を非表示にする -> しない
——————————–*/
article.page .sns-follow {
display: none;	
}
/*———————————
カラムの幅を指定する
——————————–*/
@media screen and (min-width: 1256px) {
.wrap { width: 1256px; }
}
@media screen and (max-width: 1255px) {
	.wrap { width: 100%; }
}
#header-container .wrap {
	width: 100%;
}

/*———————————
サークルリストのスタイル
——————————–*/
div.circlelists {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
	gap:.5rem;
	margin: 3rem 0;
}
/*
@media screen and (max-width: 800px) {
	div.circlelists { 
		display: block;
	}
}
*/
a.circle {
	width: 360px;
	height: 250px;
	border-radius: 26px;
	padding: 30px;
	/* サークル内の文字色 */
	color: #111; /* #000; #fff */;
	display: block;
	margin: 0;
	text-decoration: none;
}
a.circle h3 {
	font-size: 125%;
	font-weight: 700;
	margin: 0 0 .5rem;
	padding: 0;
	border: none;
	text-decoration: underline;
}
a.circle p {
	font-size: 100%;
	font-weight: 400;
}
/* リンクであることをわかりやすくする意図なら、
 * 形が変わるよりは縁取りとかのほうが良いかも。
 * ピクセル指定は小さい画面での確認が面倒だし 北島 */
a.circle:hover {
	border-radius: 10px;
}

@media screen and (max-width:1100px) {
  a.circle {
	font-size: 90%;
	padding: 20px;
	width: 100%;
	height: auto;  
	margin: 0 0 1rem;
  }
}

/* サークル部分の色をロゴに合わせて変更 北島 */
a.circle_first {
	background-color: #EAF6FA; /* #6dc0de; #0093E9; */
	/* gradient をつけると読みづらくなるので一旦戻します 北島*/
	/* background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%); */
	border: solid 2px #6dc0de;
}
a.circle_second {
	background-color: #FCF3E7; /* #efaa4b; #FBAB7E; */
	/* gradient をつけると読みづらくなるので一旦戻します 北島*/
	/* background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%); */
	border: solid 2px #efaa4b;
}
a.circle_third {
	background-color: #F5F9EB; /* #a4cc48;  #FF9A8B;*/
    /* gradient をつけると読みづらくなるので一旦戻します 北島*/
	/* background-image: linear-gradient(90deg, #FF9A8B 0%, #FF6A88 55%, #FF99AC 100%); */
	border: #a4cc48 2px solid ;
}

/* トップページのメタデータ削除 */
#post-87 .article-header, .article-footer {
	display: none;
}

/*———————————
最新の投稿のスタイル追記
——————————–*/
.wp-block-latest-posts__post-author, .wp-block-latest-posts__post-date {
	float: left;
	padding-right: 1rem;
	font-size: 1.1rem;
}
.no-post-date .post-date, .no-post-update .post-update, .no-post-author .author-info {
	display: block;
}

/*———————————
スポンサーに関連するCSS
——————————–*/
h3.sponsor_header, h4.sponsor_header {
	text-align:center;
	border:none;
}
.sponsor_col {
	text-align: center;
	border: none;
}
div.sponsor {
	height: 120px;
	border: solid 1px #ccc;
	background-color: #eee;
	display: inline-block;
	margin: .2rem;
}

div.sponsor:has(>a) {
	border: solid 1px #fff;
	background-color: #fff;
}

div.sponsor:hover {
	box-shadow: 0 .2rem .5rem .1rem #ddd;
}


div.platinum {
	width: 620px;
}

div.gold {
	width: 300px;
}

@media screen and (max-width: 400px){
	div.platinum, div.gold {
		width: 100%;
	}
}

div.silver {
	width: 200px;
}
div.bronze {
	width: 200px;
}
div.sponsor_header {
	text-align: center;
}
/*———————————
TOPページ画像に関連するCSS

#content-in { overflow: hidden; }
.wp-block-image.size-large {
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	background-color: #000;
}
.wp-block-image img {
	opacity: 0.4;
}
——————————–*/

/*———————————
アピールエリアの表示
——————————–*/
.appeal-content {
	background-color: rgba(255, 255, 255, 0.90);
}

/*———————————
cocoonのヘッダーの設定をセンターロゴにした際
ヘッダーを左、ナビゲーションメニューを右にする。
——————————–*/
#header-container-in{
	display:flex;
	align-items: center;
	justify-content: space-between;
}
/*———————————
 ロゴを左、キャッチフレーズ(css上ではtagline)を右にする。
——————————–*/
#header-in{
	display:flex;
	flex-direction: row;
    align-items: center;
}

#header-in > div.logo > a.site-name { padding: 0 0 0 20px;}
/*———————————
フッターのマージン削除
——————————–*/
#footer { margin: 0;}

/*———————————
フッターのマージン削除
——————————–*/
#content { background-color: #fff;}

/*———————————
フッターのサイトマップの色を変更
——————————–*/
footer a{
	color:#6f32a8;
}

/* ヘッダーの指定 */
.tagline{
	font-weight:bold;
	/* 絶対指定をやめる 北島 */
	/* font-size:25px */
	font-size: large;
}
@media screen and (max-width: 480px){
	.tagline{
		font-size: unset;
	}
}

#header-container {
	width:full;
}



/* 記事ヘッダー */
.article h2 {
	background-color: #fff ; /* #f6f6f6; */
	border-bottom: solid 2px #ccc ;
	margin-bottom: 1.5rem;
	padding: .5rem 0 ;
	font-weight: 700;
}

.article h3 {
	border: 0;
	padding: 0;
	margin: 1rem 0;
	font-weight: 700;

}
.article h4 {
	border: 0;
	padding: 0;
}

.article h3.entry-title a {
	color: #1967d2;
	text-decoration: underline;
	font-weight: 700;
}
@media screen and (max-width:800px) {
  .rt-row .entry-title {
	font-size: 60%;
  }
}

/* パラグラフ */
.article p {
	margin-bottom: 1rem;
}

/* ヘッダーメニューの右側が見えるように */
#navi {
	margin-right: 2rem;
}

/* ヘッダーを基準のオレンジ（#efaa4b）から少し暗く */
#header-container, #header-container .navi, #navi .navi-in > .menu-header .sub-menu {
	background-color: #fc990d; /* #E98F1A ; */
}

/* トップの記事一覧サムネイルサイズ調整 */
.rt-img-holder > a, .rt-img-responsive {
	width: auto;
}
/* メンバーリスト */
.um-directory .um-members-wrapper .um-members.um-members-grid .um-member {
	width: 180px !important;
}
/* サイドバーの見出し */
#sidebar h2 {
	background-color: #f6f6f6;
}
/* フッターのリンク */
#footer a {
	color: #1967d2;
}
/* メンバーリスト */
.um-member-metaline { display: none; }
.um-tip-n { background-color: #000; }