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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/*************************************************
* WrorPressの不具合と思われる対応（暫定的）
* 投稿者権限でインライン文字の色を設定すると背景色が黄色になる不具合
**************************************************/

/*************************
* インライン文字色	 	 *
**************************/
mark{
	background-color: initial;
}

/**************************************************/
/*********   ここまで    **************************/
/**************************************************/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

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


 	/* モバイル時のメニューボタン、アイコン、キャプション */
	.mobile-menu-buttons .menu-button{
		height: 70px;
	}
	/*  通知エリアも下げる */
	.notice-area{
		margin-top: 20px!important;
	}
	/* コピーライト襟の下マージンを増やす */	
	.source-org.copyright{
		margin-bottom: 40px;
	}	

 	/* モバイル時のメニューアイコン*/
	.mobile-menu-buttons .menu-icon{
		font-size: 24px;
		color: #333333;
	}
 	/* モバイル時のメニュー文字、キャプション*/
	.mobile-menu-buttons .menu-button .menu-caption{
		font-size: 14px;
		color: #333333;
	}
	
	/* モバイルボタン内のロゴを少し大きく */
	.logo-menu-button img{
		max-height: 40px;
	}

	/* ヘッダロゴを消す */
	.logo-image{
		display: none;
	}
	
	/* ヘッダーロゴ上のタグを消す */
	.tagline{
		display: none;
	}
	
	/* モバイル時のメニュー文字の大きさ、下線 */
	.menu-drawer li{
		font-size: 0.9rem;
		padding: 0.3em 0.1em 0.3em 0.1em;
		border-bottom: solid 1px #a0a0a0;
	}
	.menu-drawer .sub-menu li{
		border-top: solid 1px #a0a0a0;
		border-bottom: none;
	}
	
	/* モバイル時のヘッダー、フッターメニューボタン位置背景色 */
	.mobile-header-menu-buttons,
	.mobile-footer-menu-buttons{
		background-color:#f0f0f0!important;
	}
	
	/* アイキャッチ画像の高さをちいさく 290px->180px */
	.eye-catch img{
		height: 180px!important;
	}
	/* h1タイトルの位置を上げる */	
	.article-header h1{
		top:80px;		/* 90px->80px */
	}
}

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

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

/************************************************************/

body.category,
body.single,
body.archive {
//	background-color:#f8f8f8!important;
}

/*************
 * 固定ページの場合　投稿日等、サイドバーを表示しない
**************/
body.page{
	.post-date,
	.post-update,
	.post-author,
	.amp-back{
		display: none;
	}
}


/*************
 * 見出し2の下マージン少し小さく
**************/
.article h2{
	margin-bottom: 0.5em;
}
/*************
 * 見出し3no左ボーダー細く
**************/
.article h3{
	border-left: none;
}
/*************
* ヘッダーロゴの上下マージンを空ける
**************/
.logo-image{
	margin-top: 1rem;
	margin-bottom: 2rem;
}
/*************
 * グローバルメニュー全体の幅を少し小さく
*************/
.navi-in > ul{
	margin: 0 7em 0 7em;
}
/*************
 * サブメニューの背景
*************/
.navi-in > ul .sub-menu{
	background-color: #e8e8e8;
}
.navi-in > ul .sub-menu li{
	border-bottom: solid 1px #ffffff;
}
.navi-in > ul .sub-menu li a{
	font-size: 0.9em;
	color: #666666!important;
}

/*************
* ヘッダーロゴ上のタグ文字サイズ（浜松市の皮ふ科）
************/
.tagline{
	margin-top: 30px;
	font-size: 0.9em;
	color:#ffffff;
}

/*************
* 投稿リストのタイトル名
************/
a.wp-block-latest-posts__post-title{
//	 color:#333333;
	font-weight: bold;
}
a.wp-block-latest-posts__post-title:hover{
//	color:#fea3a4;
}
/*************
* 投稿リストの間隔を少しあける
************/
.wp-block-latest-posts.wp-block-latest-posts__list li{
	padding-bottom: 1.5em;
}
/*************
* フッターエリアを左右の2つにする
************/
.footer-left,
.footer-right{
	width: 50%;
}
.footer-center{
	display:none;
}


/*************
* アイコンボックスをモバイル時も同じ表示方法にする
************/
.information-box::before, .information::before { border-right: 1px solid #bde4fc; } 
.question-box::before, .question::before { border-right: 1px solid #ffe766; } 
.alert-box::before, .alert::before { border-right: 1px solid #f6b9b9; } 
.memo-box::before { border-right: 1px solid #8dd7c1; } 
.comment-box::before { border-right: 1px solid #ccd; }
.ok-box::before { border-right: 1px solid #3cb2cc; }
.ng-box::before { border-right: 1px solid #dd5454; }
.good-box::before { border-right: 1px solid #98e093; }
.bad-box::before { border-right: 1px solid #eb6980; }
.profile-box::before { border-right: 1px solid #ccd; }
.information-box::before, .question-box::before, .alert-box::before, .information::before, .question::before, .alert::before, .memo-box::before, .comment-box::before, .common-icon-box::before, .ok-box::before, .ng-box::before, .good-box::before, .bad-box::before, .profile-box::before{ font-size: 30px; }
@media screen and (max-width: 480px){ .information-box, .common-icon-box { padding: 1em 1em 1em 4.25em; line-height: 1.6; }
.information-box::before, .question-box::before, .alert-box::before, .information::before, .question::before, .alert::before, .memo-box::before, .comment-box::before, .common-icon-box::before, .ok-box::before, .ng-box::before, .good-box::before, .bad-box::before, .profile-box::before { font-family: "FontAwesome"; position: absolute; line-height: 1em; top: 50%; left: 1em; padding-right: .45em; display: inline-block; font-size: 30px; } }

/**********************
フローティングバナー
(画面右端)
**********************/
.floating-banner {
    position: fixed;
    z-index: 99999;
    top: 150px;
    right: 0;
}
.banner-right {
	width: 60px;/* バナーの横幅 */
	margin-bottom: 50px;
	padding: 10px 5px;
	background-color: #fafafa;	/* バナーの背景色 */
    color: #ac8b6a;/* バナー内の文字色 */
    font-weight: normal;
    text-align: center;
	border: solid 2px #ac8b6a;
//	border-right: none;
	border-radius: 10px 0 0 10px;
	opacity: 0.9;
}
.banner-right:hover{
	background-color: #ffb6c177;	/* バナーの背景色 */
}
.floating-banner a {
    text-decoration: none;/* リンクに下線が入らないように */
}
.copy {
	writing-mode: vertical-rl;
	text-orientation: upright;
	font-size: 1em;
    margin:10px auto 10px;
    line-height: 1.2;
}

@media screen and (max-width: 1023px) {
    .floating-banner {
        display: none;
    }
}
/**********************
本文上ウィジットエリアにインスタアイコンを右端に
**********************/
.widget-page-content-top{
	height: 50px;
	margin-bottom: 0!important;
}
.widget-page-content-top img{
	float: right;
	margin-bottom: 0;
}

/**********************
 リストアイコン いろいろ
**********************/

/* ひし形 */ 
ul.list-diamond{
	padding: 0 0 0 1em;
	list-style-type: "◆"; 
}

/* ※印 **/
ul.list-comme{
	padding: 0 0 0 1em;
	list-style-type: "※";
}
/* ★マーク**/
ul.list-star{
	padding: 0 0 0 1em;
	list-style-type: "★";
}