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

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

/* 基本色の変更　*/
:root {
  --cocoon-black-color: #ffffff;/*333333*/
  --cocoon-white-color: rgb(0 0 0 ,0%);/*#ffffff*/
  --cocoon-box-border-color: #ffffff;/*#47585c*/
  --cocoon-thin-color: rgb(0 0 0 ,0%);/*#ddd*/
  --cocoon-x-thin-color: rgb(0 0 0 ,0%);/*#eee*/
  --cocoon-xx-thin-color: rgb(0 0 0 ,0%);/*#f5f6f7*/
  --cocoon-xxx-thin-color: rgb(0 0 0 ,0%);/*#fafbfc*/
  --cocoon-middle-thickness-color: #ffffff;
	--cocoon-website-color: #ffcc00;
}
/*ヘッダー背景透明化*/
#header-container {
background-color: transparent;
}
#footer {
background-color: transparent;
}
/*ナビゲーションメニュー背景透明化
#header-container .navi {
background-color: transparent;
}*/

/*白い背景をなくす*/
.header-container,
/*.main,
.navi,
.breadcrumb.pbp-footer-before,*/
.footer{
  background-color: rgb(0 0 0 / 0%);
}

.html .body .tab-caption-box.has-white-background-color .box-content {
  background-color: #333;
}

.menu-content{
	background: rgb(0 0 0 / 50%);
}
.box-menu{
	background: rgb(0 0 0 / 100%);
}

/*背景の表示を綺麗にしたい
.appeal, .header, body {
  background-attachment: fixed;
  overflow-y: scroll;
}
.ba-fixed.appeal, .ba-fixed.header, body.ba-fixed {
  background-attachment: fixed;
	overflow-y: scroll; 
}*/


/* 見出しデザイン　*/
.article h2 {
	border-left: 7px solid var(--cocoon-black-color);
    display: inline-block;
    position: relative;
	background: rgb(0 0 0 / 0%);
	color: var(--cocoon-text-color);
}

.article h3 {
  border-left: 3px solid var(--cocoon-middle-thickness-color);/*7px*/
  border-right: 1px solid var(--cocoon-thin-color);
  border-top: 1px solid var(--cocoon-thin-color);
  border-bottom: 1px solid var(--cocoon-thin-color);
  font-size: 22px;
  padding: 12px 20px;
}

/*引用*/

blockquote {
  background-color: var(--cocoon-xxx-thin-color);
  border: 1px solid var(--cocoon-black-color);/*--cocoon-thin-color*/
  padding: 1.4em 1.8em;
  position: relative;
}
blockquote::before, blockquote::after {
  color: var(--cocoon-white-color);/*#C8C8C8*/
  font-family: serif;
  position: absolute;
  font-size: 300%;
}
blockquote::before {
  content: "“";
  line-height: 1.1;
  left: 10px;
  top: 0;
}
blockquote::after {
  content: "”";
  line-height: 0;
  right: 10px;
  bottom: 0px;
}
blockquote cite {
  font-size: 0.7em;
}

/*いいね*/
.icon-home-logo:before {
    content: "\e9da";
	font-size: 0.75em;
	margin-bottom: 5px;
	line-height: 1.75em;
}

/* B-World用 */
.speech-balloon p{
	color:#000;
}
/*考える吹き出し*/
div.sbs-think{
	color:#000;
	border-style:none;
	--cocoon-custom-background-color: #f1f1f1;
	--cocoon-custom-border-color: #f1f1f1;
}
/*
.categoryid-9 :root {
  --cocoon-black-color: #000000;
  --cocoon-white-color: rgb(128 128 128 ,50%);
}

.categoryid-9 body {
	color:#000;
}

.categoryid-9 .header-container,
.footer{
  background-color: rgb(128 128 128 / 50%);
}
*/

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	body::before {
	content: "";
	display: block;
	position: fixed;
	bottom: 0;/*スワイプで下の画像が見えない様に*/
	right: 0;
	z-index: -1;
	width: 100%;
	height: 100vh;
	background: url(https://bworld.sakura.ne.jp/web/blog/wp-content/uploads/2024/04/bg.jpg) center no-repeat;
	background-size: auto;
	background-size: cover;
} 
}