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

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

/* CTAエリア調整 */
.cta-box {
	background-color:#eeeef1;	
}

.cta-box .cta-heading {
	font-size: 1em;
	color: #58576f;
}

.cta-box .cta-content {
	font-size: 0.9em;
	color: #58576f;
}

.cta-thumb {
	width: 30%;
}

.cta-message {
	width: 68%;	
}

@media screen and (max-width: 834px){
.cta-left-and-right .cta-content, .cta-right-and-left .cta-content {
    display: flex;
}
}

@media screen and (max-width: 480px) {
.cta-left-and-right .cta-content, .cta-right-and-left .cta-content {
    display: block;
  	width: 100%;
  }
}

.cta-box .cta-message p{
	margin-bottom: 1em;
}

.cta-box .btn {
	background-color:#252525!important;
}


/* ギャラリーブロックの画像サイズをそろえる */
.blocks-gallery-grid .blocks-gallery-item,  .wp-block-gallery .blocks-gallery-item {
    flex-grow: initial!important;
}

/* フロントページの動画エリア */
.top-youtube {
	width:100%;
	padding-bottom:32px;	
}
.top-youtube h2{
	padding: 0.5em 0;
	border: none!important;
	font-size: 1em;
}
.top-youtube article {
	margin:0;
	padding: 1.5%;
}
.top-youtube .top-article{
	border: 1px solid #f0f0f0;
	margin: 0;
	padding: 1em;
}
.top-youtube p{
	font-size: 0.8em;
	line-height: 1.1;
	margin-bottom:0!important;
}
.top-youtube p.first-p{
	padding-bottom: 1em;
}

/* SNSフォローボタンのタイトル調整 */
#footer .widget_sns_follow_buttons,
#footer .sns-follow{
	margin:0;
}
#footer .widget_sns_follow_buttons .footer-title,
#footer .widget_sns_follow_buttons .sns-follow-message {
	display:none;	
}
#footer .widget_sns_follow_buttons .sns-follow-buttons {
    justify-content: right;
}

#footer .sns-buttons a {
	border-radius: 50%;
}

/* フッターウィジェットエリアのレイアウト調整 */
.footer-widgets {
    border: none;
}
.footer-right {
	padding: 0 10px;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
	/* モバイルメニューロゴ調整 */
	.logo-menu-button .site-logo-image {
		filter: invert(100%);
	}
}

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

}

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