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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*目次https://pote-chil.com/cocoon_toc/*/
.toc {
  background: #fcfcfc!important;
  border: 0!important;
  display: block!important;
  border-top: 5px solid!important;
  border-top-color: #83bfdc!important;/*お好みの色に*/
  box-shadow: 0 2px 2px rgba(0,0,0,.2)!important;
  padding: 20px 32px 7px 32px!important;
  margin-bottom: 5%!important;
  width:95%;
  border-radius:10px;
}
/*トップタイトルを消す*/
/*.entry-title {
display: none;
}*/
/*new arrivalの配列*/
.wp-block-columns .wp-block-column .new-entry-cards{
	 display: flex;
	justify-content: space-between;
}
/*new arrivalの背景色*/
.widget-entry-cards.card-large-image .a-wrap {
    max-width: 30%;
	height: 260px;
	background-image: repeating-linear-gradient( 135deg, #f7fafd 0%, #f7fafd 80%, #fdebf2 );
}
/*トップページのボタン色*/
html .body .has-cyan-background-color {
    background-color:#83bfdc;
}
/*投稿ページの背景色*/
.header-container, .main, .sidebar, .footer {
    background-color: #fafafa;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
	/*topのもっと見るボタンの色設定*/
	.mobile-menu-buttons > li {
    background-color: #83bfdc;
	color: #fff;
}
	.mobile-menu-buttons .menu-button > a {
    color: #fff;   
}
	/*サイドバーの文字色変更*/
	 #slide-in-text-3{
  color: #333;
}
/*アピールエリアの高さを調整*/
#appeal {
    height: calc(100vw * 0.55);
}
/*new arrivalの配列*/
	.wp-block-columns .wp-block-column .new-entry-cards{
	 display:block;
}
	.widget-entry-cards.card-large-image .a-wrap {
    max-width:100%;
		height:auto;
}
/*おススメの文字配列*/
	.has-text-align-left {
    text-align: center!important;
}
}

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

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