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

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

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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

/************************************
** BLOG(/blog/)一覧: PC4列グリッド
** ※カスタマイザーの追加CSS(.page-id-9 #main ul { display:flex })を上書き
************************************/
body.page-id-9 #main > ul{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0 16px;
  padding-left:0;
}
body.page-id-9 #main > ul::before,
body.page-id-9 #main > ul::after{display:none}
body.page-id-9 #main > ul > li{min-width:0;flex:none}
body.page-id-9 #main > ul > li > a > img{width:100%;height:auto;display:block}

/*1023px以下: 2列*/
@media screen and (max-width: 1023px){
  body.page-id-9 #main > ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/*692px以下: 1列*/
@media screen and (max-width: 692px){
  body.page-id-9 #main > ul{grid-template-columns:1fr}
}

/************************************
** 商品一覧: カラースウォッチ(Variation Swatches)
** 追加CSSのpadding(3px 6px)がカラーにも効いて色部分が潰れていたため、カラーのみ上書き
************************************/
.cfvsw-shop-variations .cfvsw-swatches-container > .cfvsw-swatches-option:not(.cfvsw-label-option):not(.cfvsw-image-option){
  min-width:28px !important;
  min-height:28px !important;
  width:28px;
  height:28px;
  padding:2px !important;
}
@media screen and (max-width: 480px){
  .cfvsw-shop-variations .cfvsw-swatches-container > .cfvsw-swatches-option:not(.cfvsw-label-option):not(.cfvsw-image-option){
    min-width:24px !important;
    min-height:24px !important;
    width:24px;
    height:24px;
  }
}

/* ツールチップ: カード端で切れないようJS(javascript.js)で横位置を補正 */
.cfvsw-tooltip{
  z-index:10;
  transform:translateX(calc(-50% + var(--gl-tip-shift, 0px))) translateY(-50%);
}
.cfvsw-tooltip::before{
  left:calc(50% - 4px - var(--gl-tip-shift, 0px));
}