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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.cstm-blk-fullwide {
  width: 100vw;
  margin: 0 calc(50% - 50vw);
}
/* ========== circle & wave cover-blk-ver start ==========　*/
/* v1.0.3 add */
:where(.cstm-cover-path-lower-cir, .cstm-cover-path-upper-cir, .cstm-cover-path-lower-wave, .cstm-cover-path-upper-wave) {
  padding: 0 !important;
  min-height: unset !important;
}

:where(.svg-upper-cir, .svg-upper-wave) {
  transform: translateY(1px);
}

:where(.svg-lower-cir, .svg-lower-wave) {
  transform: translateY(-1px);
}

:where(.cstm-cover-path-lower-cir, .cstm-cover-path-upper-cir) svg {
  display: block;
  fill: currentColor;
  width: 100%;
  height: 6vmin;
}

:where(.cstm-cover-path-lower-wave, .cstm-cover-path-upper-wave) svg {
  display: block;
  fill: currentColor;
  width: 100%;
  height: 7vmin;
}

.cstm-cover-path-upper-cir,
.cstm-cover-path-upper-wave {
  margin-bottom: 0 !important;
}

/* .cstm-cover-path-upper-wave,.cstm-cover-path-lower-wave,
.cstm-cover-path-upper-cir, .cstm-cover-path-lower-cirの次のカバーブロック内の上の余白を半分に */
.cstm-cover-path-upper-wave+.wp-block-cover>.wp-block-cover__inner-container,
.cstm-cover-path-lower-wave+.wp-block-cover>.wp-block-cover__inner-container,
.cstm-cover-path-upper-cir+.wp-block-cover>.wp-block-cover__inner-container,
.cstm-cover-path-lower-cir+.wp-block-cover>.wp-block-cover__inner-container {
  padding-top: 3rem;
}

/* リボン*/
/*ナビカード（大きなカード）を横並びにする*/
.navi-entry-cards.large-thumb{
	display: grid;/* グリッドレイアウトを適用 */
	grid-template-columns: repeat(4, 1fr);/* 4列でレイアウトを構成、各列が同じ幅で1frずつ分配 */
}

/*ナビカード　リボン色変更*/
.ribbon-color-1 span {
	background-color: #ea7e7e;/*①おすすめ*/
}

.ribbon-color-2 span {
	background-color: #7e95ea;/*②新着*/
}


.ribbon-color-3 span {
	background-color: #f7c114;/*③注目*/
}

.ribbon-color-4 span {
	background-color: #dc669b;/*④必見*/
}

.ribbon-color-5 span {
	background-color: #e9546b;/*⑤お得*/
}

 /* 768px以下の画面幅のとき */
@media (max-width: 768px) {
	.navi-entry-cards.large-thumb{
		grid-template-columns: repeat(2, 1fr);
	}
}
	
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
	
/* モバイル時に表示したい画像のURLを設定する */
 .skin-grayish.front-top-page .container .header-container .header {
 	background-image: url(https://fukushimasite.com/wp-content/uploads/2025/06/TOP_SP.jpeg);
	background-position: center center;
 }	

/*———————————
トップページ（スマホ用画像）
——————————–*/
@media screen and (max-width: 769px) {
}

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

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