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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
body {background:transparent;}
.main{background-color:transparent;}
a{color: #01285e;}
.home.page .content {margin-top: 0px;}
.home.page .main {padding: 0px 29px 36px 29px;}
/*フロント固定ページのロゴ、アイキャッチ、メニューを非表示*/
.home.page #header-in, .home.page .eye-catch-wrap, .home.page .navi{display:none;}
/*フロント固定ページのタイトルを非表示*/
.home.page .entry-title{display: none;}
/*フロント固定ページの投稿日を非表示*/
/*フロント固定ページの更新日を非表示*/
.page-id-2 .article-header .date-tags {display: none;}
/*投稿者名を非表示*/
.author-info{display: none;}
/* 固定ページ日付消去 */
.date-tags {display: none;}
/* ナビ */
.navi-in > ul li {width: 140px;}
.navi-in a:hover {
background-color: #f0e7f1;
transition: all 0.3s ease-in-out;
color: #642b64;
font-weight:700;
border-radius:70% 30%;
}
..header-in{background:transparent;}
.header-container, .navi, .footer {background:transparent;}
/* トップボックス */
.box-menu {width: 16.5%;background-color:transparent;box-shadow:none;}
.box-menu-icon {color: #888;}
.box-menu-icon:hover{color: #555;}
.box-menu:hover {box-shadow: inset 1px 1px 0 0 #aaa, 1px 1px 0 0 #aaa, 1px 0 0 0 #aaa, 0 1px 0 0 #aaa;color:#555;background-color:#eee;transition: all 0.5s ease-in-out;border-radius:15px}
/* parallax */
.parallax {height:400px;width: 100vw;margin-left: calc(-50vw + 50%);max-width: none;background-image: url('https://y-bien.com/wp-content/uploads/2024/07/px01.jpg');background-size: cover;background-attachment: fixed;background-position: center;}
.parallax2 {height:400px;width: 100vw;margin-left: calc(-50vw + 50%);max-width: none;background-image: url('https://y-bien.com/wp-content/uploads/2024/09/px021024.png');background-size: cover;background-attachment: fixed;background-position: center;}
hr {border: 0;height: 1px;background-image: linear-gradient(to right, rgba(100, 100, 100, 0), rgba(100, 100, 100, 0.75), rgba(100, 100, 100, 0));}
/* h1 */
.article h1:before {
content: "Yakuzencha Bien";
position: absolute;
top: 5px;
left: -8px;
color: rgba(150, 150, 150, 0.25);
font-size: 30px;
z-index: -1;
}
.article h1.entry-title {
position: relative;
padding-top: 25px;
border-bottom: 3px double rgba(5, 62, 98, 1);
font-size:32px;
}
/* h2 */
.article h2 {
padding:0;
position: relative;
padding: 10px 0px 10px 45px;
background-color:transparent;
border-bottom:2px dotted #888;
text-shadow: 1px 1px 2px gray;
font-size:28px;
}
.article h2:before {
position: absolute;
font-family: "Font Awesome 5 Free";
content: "\f5a7";
background: #796a81;
color: white;
font-weight: 900;
font-size: 15px;
border-radius: 50%;
left: 0;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.article h2:after {
/*吹き出しのちょこんと出た部分*/
content: '';
display: block;
position: absolute;
left: 25px;
height: 0;
width: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left: 12px solid #796a81;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
/* h3 */
.article h3 {
border:0px;
position: relative;
padding: 0 .5em .5em 1.5em;
border-bottom: 1px solid #7e7b7c;
}
.article h3::before,
.article h3::after {
	position: absolute;
	content: '';
	border-radius: 100%
}
.article h3::before {
	top: .2em;
	left: .2em;
	width: 18px;
	height: 18px;
	background-color: rgba(131,131,131,.6);
	z-index: 2;
}
.article h3::after {
	top: .7em;
	left: .7em;
	width: 13px;
	height: 13px;
	background-color: rgba(31,31,31,.2);
}
/* h4 */
/* h5 */
/**/
/* sidebar */
.sidebar{background-color:transparent;}
.nwa .author-box{background-color:transparent;border-radius:15px;}
.author-description p {text-align:center;}
/* sidebar h2*/
.sidebar h2, .sidebar h3 {
background: transparent;
padding: 8px 0px;
border-bottom: 2px #999 dotted;
letter-spacing: 0.2em;
color: #666;
}
.sidebar h2:before, .sidebar h3:before {
font-family: "Font Awesome 5 Free";
content: "\f5a7 ";
font-weight: 900;
}

/*******************************
* 新着記事を横並びに
********************************/
.new-entry-cards.large-thumb, .new-entry-cards.large-thumb-on {
display: flex;
flex-wrap: wrap;
}
.new-entry-cards.large-thumb a, .new-entry-cards.large-thumb-on a {
width: 33.333%;
}
.home #main .large-thumb {
justify-content: center;}
.new-entry-card-title, .new-entry-card-snippet{text-align:left;}

/**/
.author-name a {pointer-events: none;text-decoration:none;color:#333;}

/************************************
** SNS ボタンをまとめて丸くする
************************************/

/*シェア・フォローボタンの枠組み*/
.sns-share.ss-top .sns-share-buttons,
.sns-share.ss-bottom .sns-share-buttons,
.sns-follow.sf-bottom .sns-follow-buttons,
.sns-follow.sf-widget .sns-follow-buttons {
	justify-content: center; /*中央に寄せる*/
	flex-wrap: wrap; /*折り返す*/
}

/*シェア・フォローボタンのリンク*/
.sns-share.ss-top .sns-buttons a,
.sns-share.ss-bottom .sns-buttons a,
.sns-follow.sf-bottom .sns-buttons a,
.sns-follow.sf-widget .sns-buttons a {
	width: 40px; /*横幅*/
	height: 40px; /*高さ*/
	margin-right: 4px; /*右側の余白*/
	margin-left: 4px; /*左側の余白*/
	border-radius: 50%; /*丸み*/
}

/*プロフィールウィジェットのリンク*/
.sns-follow.sf-profile .sns-buttons a {
	border-radius: 50%; /*丸み*/
}

/*シェアボタンのアイコン*/
.sns-share.ss-top .sns-buttons a .social-icon,
.sns-share.ss-bottom .sns-buttons a .social-icon {
	font-size: 18px; /*アイコンの大きさ*/
}

/*フォローボタンのアイコン*/
.sns-follow.sf-bottom .sns-follow-buttons .follow-button,
.sns-follow.sf-widget .sns-follow-buttons .follow-button {
	font-size: 24px; /*アイコンの大きさ*/
}

/*シェアボタンのキャプション*/
.sns-share.ss-top .sns-buttons a .button-caption,
.sns-share.ss-bottom .sns-buttons a .button-caption {
	display: none; /*非表示*/
}

/*シェア・フォローボタンのシェア数*/
.sns-share.ss-top .sns-buttons a .share-count,
.sns-share.ss-bottom .sns-buttons a .share-count,
.sns-follow.sf-bottom .sns-buttons a .follow-count,
.sns-follow.sf-widget .sns-buttons a .follow-count {
	right: -2px; /*右側からの距離*/
	bottom: -2px; /*下側からの距離*/
	padding: 2px; /*内側の余白*/
	font-size: 10px; /*文字の大きさ*/
	border: solid 1px; /*線*/
	border-radius: 3px; /*丸み*/
	background-color: inherit; /*背景色*/
}

/*シェア数の表示が必要ないシェア・フォローボタン*/
.sns-share.ss-top .sns-buttons a .share-count:empty,
.sns-share.ss-bottom .sns-buttons a .share-count:empty,
.sns-follow.sf-bottom .sns-buttons a .follow-count:empty,
.sns-follow.sf-widget .sns-buttons a .follow-count:empty {
padding: 0; /*内側の余白*/
border: 0; /*線*/
}
.sns-buttons a {background-color:#999;}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
.parallax {background-image: url('https://y-bien.com/wp-content/uploads/2024/07/px1024.jpg');height:400px;}
.parallax2 {background-image: url('https://y-bien.com/wp-content/uploads/2024/09/px021024.png');height:400px;background-size:1024px;background-repeat:no-repeat;}
}

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
.parallax {background-image: url('https://y-bien.com/wp-content/uploads/2024/07/px512.jpg');height:400px;}
.parallax2 {background-image: url('https://y-bien.com/wp-content/uploads/2024/09/px02512.png');height:400px;background-size:480px;background-repeat:no-repeat;}
.entry-title, .article h2 {font-size: 24px;}
}