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

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


/* ******************* */
.other-container>.wp-block-group__inner-container{
	   display:flex;
	justify-content:center;
}
.other-circle{
	background-color:#e5e5e5;
display:inline-block;
	border-radius:50%;
	width:300px;
	height:300px;
	text-align:center;
	margin:30px;
	position:relative;
 line-height:400px;
}
.other-circle a::before{
	font-size:7.0rem;
	width:100%;
	position:absolute;
	top:-100px;
	left:0%;
		transition:all 0.3s;
			font-family:"Font Awesome 5 free";
}
.other-circle:hover a{
color:darkcyan;
}
.other-circle a{
color:#333;
	text-decoration:none;
	font-size:1.6rem;
}
.other-circle:nth-of-type(1) a::before{
		content:'\f007';
}
.other-circle:nth-of-type(2) a::before{
		content:'\f0e0';
}
.other-circle:nth-of-type(3) a::before{
		content:'\f2b5';
}



/* label-BOX */
.wp-block-cocoon-blocks-label-box-1{
    background-color: rgba(0, 138, 138,0.5);
	border-radius:5px;
	padding:10px;
	color:#222;
}
.label-box-label {
	text-shadow:none;
	border-bottom:3px dashed darkcyan; 
		padding:8px;
}
.label-box-content{
	border:0;
	padding-top:30px;
}

/* Question&Answer toggleカラーチェンジ */
.page-id-1478 .toggle-button{
	background-color:#bba343;
}

.page-id-1478 .toggle-button::before {
	color:#333;
}
.page-id-1478 .toggle-button strong::before{
	content:'Q';
position:absolute;
	top:-5px;
	left:20px;
	font-size:1.7rem;
	color:#555;
}
.page-id-1478 .toggle-button {
padding-left:50px;
}


.page-id-1478 .toggle-content{
	padding-left:50px!important;
}
.page-id-1478 .toggle-content::before{
	content:'A';
	font-size:1.7rem;
	color:#555;
	position:absolute;
		top:46px;
	left:23px;
	color: rgb(160, 44, 44);
	font-weight:bold;
}

/*アイキャッチセンター  */
.eye-catch-wrap{
	justify-content:center;
}


/*  サウンドハウスリンカーボタン色チェンジ*/
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink1{
	background-color:#795284!important;
}


/*  付箋風BOXカラーチェンジ*/
.wp-block-cocoon-blocks-sticky-box.blank-box.sticky.block-box{
border-color:darkcyan !important;	
}



#menu-item-1660{
	position:relative;
}
#menu-item-1660 .item-label::after{
	content:'楽器初心者のための';
  position:absolute;
	top: -70px;
	left:-0px;
	background-color: #bba343;;
	padding:5px;
	border-radius:3px;
	width:150px;
	color:#555;
}
#menu-item-1660 .item-label::before{
		content:'';
   position:absolute;
 	top: -25px;
	left:65px;
  border-top:20px solid #bba343;;
	border-left:transparent 20px solid;
	border-right:transparent 20px solid; 
}

/*  メニューアイテム注目吹き出し作成*/

/*  記事内のアンカー要素の色チェンジ*/
article a {
	color:#337ab7
}
article a:hover{
	color:#23527c
}

/*  記事内の見出し要素の色チェンジ*/
.article h2{
  margin-left:-39px;
	margin-right:-29px;
	border-left:solid 10px darkcyan;
	position:relative;
}


.article h3{
	border-left:10px solid #333;
   border-bottom:3px solid darkcyan;
	border-top:0;
}
.article h4{
     border:0;
    	background-color:#fff;
	   border-bottom:3px dotted darkcyan;
}

/*  記事内の目次要素の色チェンジ*/
.toc-title {
	border-left:5px solid  darkcyan;
	border-right:5px solid darkcyan;
}
.toc-content{
　　　　border:0;
}

/*  サイドバー内の見出し要素の色チェンジ*/
.sidebar h3{
	position:relative;
	border-left:5px solid darkcyan;
}
/*  ピックアップオブジェクト形成*/
.sidebar h3::after{
	content:'・・・・・・';
	padding-top:8px;
	background-color:#ddd;
	position:absolute;
	top:-14px;
	transform:rotate(45deg);
	border-radius:23px;
	width:15px;
	height:50px;
	line-height:0.5;
	color:#77776E;
	border:0;
}

.header-in {
	display:block !important;
}
.logo{
	text-align:left;
}

#navi{
	position:relative;
}
#navi::before{
		content:'音楽好きのための楽器知識学習サイト';
	   display:inline-block;
	   color:#fff;
		bottom:-196px;
		left:5%;
	   position:absolute;
	   height:40px;
      line-height:40px;
	   z-index:1;
}
#navi::after{
	   content:'';
	   display:block;
		background-color:#333;
		width:100%;
	   text-align:left !important;
	   color:#fff;
		bottom:-196px;
		position:absolute;
	   height:40px;
      line-height:40px;
		border-bottom:3px solid darkcyan;
}

#navi-in{
	position:absolute;
	bottom:-196px;
	right:0px;
}
.navi-in > ul{
	justify-content:flex-end!important;
}

.menu-item .caption-wrap::before,
.menu-item .item-label::before{
		font-family:'Font Awesome 5 Free';
	position:absolute;
	top:0px;
	left:20px;
	font-size:1.5rem;
}

.menu-item:nth-of-type(1) .item-label::before{
	content:'\f015';
}
.menu-item:nth-of-type(2) .item-label::before{
	content:'\f022';
}

.menu-item:nth-of-type(3) .item-label::before{
	content:'\f7a6';
}

.menu-item:nth-of-type(4) .caption-wrap::before{
	    content:'\f0eb';
}

.site-name-text{
		font-size:50px !important;
	letter-spacing:1px;
}
.sidebar h3::before{
	display:none;
}
.author-box{
		transition:all 0.3s;
}

.author-box  a{
	color:#333;
	text-decoration:none;
}
.author-box:hover a{
	color:#fff;
	text-decoration:none;
}
.author-widget-name{
	border-bottom:1px solid #333;
}
.author-box:hover .author-widget-name{
		border-bottom:1px solid #fff;
}
.author-box:hover  .author-thumb img {
	border:3px solid #fff;
}


/************************************
** カレントインデックス用CSS
************************************/

.index-block {
    overflow: hidden;
    width: 100%;
    margin: 30px auto;
   	padding-bottom:30px;
    top: 30px;
	  display:none;
	 font-weight:bold;
	border-radius:4px;
		color:#333;
}

.index-block-title {
    text-align: center;
    margin: 5px 0;
    font-size: 1.5rem;
	border-bottom:4px dashed #555;
}

.index-block ol{
	   list-style:none;
}
.index-block ol a{
	color:#333;
	text-decoration:none;
}

.index-block .side-h2 {
    font-size: 0.8rem;
    margin-left: 0px;
    padding-left: 3px;
}

.index-block .side-h3 {
    font-size: 0.7rem;
    margin-left: 10px;
   	padding-left: 3px;
}

.index-block .side-h4 {
     font-size: 0.7rem;
    margin-left: 20px;
    padding-left: 3px;
}

.index-block .side-h5 {
    font-size: 0.7rem;
    margin-left: 30px;
    padding-left: 3px;
}

.index-block .side-h6 {
    font-size: 0.7rem;
    margin-left: 40px;
    padding-left: 3px;
}

.index-block li a:hover{
	  color: darkcyan !important;
	  transition: all 0.2s;
}
.author-box:hover{
	background-color:darkcyan !important;
	color:#fff !important;
	transition:all 0.3s;
}

.index-block .current-index {
    color: darkcyan !important;
    transition: all 0.2s;
    border-left: 5px solid darkcyan;
	 text-decoration:underline;
}
.index-block span{
    opacity:0;
	position:absolute;
	top:50px;
	left:10px;
	font-size:0.7rem;
	color:red;
}

.index-block:hover span{
		opacity:1;
	  transition:all 0.3s;
}

/************************************
** フロントページ用css
************************************/
.page-id-410 main,
.page-id-410 #content{
background-color:#333;
margin:0;
}
.page-id-410 #content{
margin-top:-21px;
}

.page-id-410 .entry-title,
.page-id-410 .date-tags,
.page-id-410 .eye-catch,
.page-id-410 .footer-meta,
.page-id-410 #breadcrumb{
display:none;
}

.page-id-410 .top-image{
   font-size:0;
   display:inline-block;
   position:relative;
   z-index:3;
   vertical-align:bottom;
}
.page-id-410 .category a::after{
     content:'view';
     position:absolute;
     width:70px;
     height:30px;
     line-height:30px;
     top:65%;
     left:150%;
      margin-left:-43px;
      font-size:1.0rem;
     z-index:5;
    border:3px solid #fff;
    padding:2px;
    text-align:center;
    transition:all 0.3s;
	   border-radius:0px 10px ;
}

.page-id-410 .category a:hover::after{
      left:50%;
      transition:all 0.3s;
}

.page-id-410 .category a:hover{
    transition:all 0.3s;
    background-color:rgba(255,255,255,0.2);
}

.page-id-410 .category a{
    width:100%;
    height:100%;
    line-height:240px;
    position:absolute;
    top:0;
    text-align:center;
    z-index:5;
    color:#fff;
    font-size:2.0rem;
    text-decoration:none;
    transition:all 0.3s;
    background-color:rgba(0,0,0,0.3);
    overflow:hidden;
}
.page-id-410 .category-box {
   width:100%;
   margin-bottom:0 !important;
   position:relative;
}

.page-id-410 .category-box .wp-block-group__inner-container{
    display:inline-block !important;
    margin:0;
}

.page-id-410  .top-box>.wp-block-group__inner-container{
    width:100%;
    display:flex;
    margin:0;
}

.page-id-410  .top-article{
     width:50%;
     display:inline-block;
}
.page-id-410  .top-article:first-child{
     border-right:1px solid darkcyan;
}

.page-id-410 .top-article-outer>.wp-block-group__inner-container{
     width:100%;
     display:flex;
     margin:0;
}

#post-410 h2{
    margin-top:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
    position: relative;
    border:0!important;
    text-align:center!important;
}

.page-id-410 h2:after{
    content:"";
    position: absolute;
    margin: 0 auto;
    top:60px;
    left: 50%;
    margin-left: -56px;
    width: 0%;
    border-top: 18px solid #333;
    border-right: 56px solid transparent;
    border-left: 56px solid transparent;
}

/*  固定ページのヘッダー部分非表示*/
.page-id-1337 .article-header.entry-header,
.page-id-1478 .article-header.entry-header,
.page-id-170 .article-header.entry-header,
.page-id-1342 .article-header.entry-header,
.page-id-1342 #toc{
display:none;
}

/************************************
** フロントページ用css　introduction部分
************************************/


.page-id-410 .content-in.wrap{
	width:100%!important;
}
.page-id-410 #main{
	padding:0;
}

.page-id-410 .box1,
.page-id-410 .box2,
.page-id-410 .top-article-outer{
	max-width:1200px;
	margin: 0 auto!important;
}
.page-id-410 .intro-flex>.wp-block-group__inner-container{
display:flex;
}
.page-id-410 .introduction-block{
width:100%;
z-index:1;
color:#eee;
font-weight:bold;
}


.page-id-410 .intro-image>img{
position:absolute;
top:0px;
width:100%;
}

.page-id-410 .intro-container{
position:relative;
overflow:hidden;
margin-top:50px;
padding:20px 0;
}

.page-id-410 .intro-container h3{
letter-spacing:2px;
color:#ddd;
	border:0;
text-align:center;
font-size:3.0rem;
}

.page-id-410 .intro-flex .wp-block-buttons{
	justify-content:center!important;
	margin-bottom:50px;
}
.intro-btn a{
	background-color:darkcyan;
	width:200px;
	border-radius:10px;
	letter-spacing:1.5px;
}
.intro-btn a:hover{
background-color:#333;
	transition: all 0.3s;
}

.page-id-410 .wp-block-group.top-article-outer.has-ex-a-background-color.has-background {
margin-top:-30px!important;
}

.page-id-410 .intro-flex{
	margin:0 auto;
	max-width:1300px;
}


/*1135px以下*/
@media screen and (max-width: 1135px){
.page-id-410 .introduction-block h3{
	font-size:1.3rem!important;
	letter-spacing:1px!important;
}
.page-id-410 .intro-image{
display:none;
}
.other-container>.wp-block-group__inner-container{
	   display:block;
}
.other-circle{
	width:200px;
	height:200px;
		margin:20px auto;
		line-height:300px;
	display:block;
}
.other-circle a::before{
	font-size:5.0rem;
	top:-70px;
}
.other-circle a{
		font-size:1.0rem;
}
}


/*1023px以下*/
@media screen and (max-width: 1023px){
.page-id-410 .category a{
    line-height:180px;
}
}

/*834px以下*/
@media screen and (max-width: 834px){
.page-id-410 .category a{
    line-height:150px;
}
}
/*480px以下*/
@media screen and (max-width: 480px){
	#navi::before{
		display:none;
	}
.page-id-410  .top-box>.wp-block-group__inner-container,
.page-id-410 .top-article-outer>.wp-block-group__inner-container{
    display:block;
}
.page-id-410  .top-article{
     width:100%;
     display:block;
}
.page-id-410 h2:after{
top:48px;
}
.page-id-410 .category a{
    line-height:240px;
}
.page-id-410 #content{
margin-top:30px !important;
}

}

/************************************
** フロントページ用css
************************************/


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
/* Question&Answerページレイアウト */
.page-id-1478 .qa-outer>.wp-block-group__inner-container{
	display:block;
}
.page-id-1478 .qa-box{
			width:100%;
}
}

/*834px以下*/
@media screen and (max-width: 834px){
}

/*480px以下*/
@media screen and (max-width: 480px){
	#navi::before{
　　　　display:none;
	}
.article h2{
margin-left:0!important;
margin-right:0!important;
}　		
}