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

/* 最終更新: 2025-11-17 17:12:12 */

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

/************************************
** ヘッダーロゴの左寄せ設定
************************************/
/* トップページと商品一覧ページのヘッダーロゴを左寄せ */
.logo,
.logo-header,
.logo-image {
    margin-left: 0 !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/************************************
** 投稿日時の非表示設定
************************************/
/* ご利用ガイドページなど固定ページの投稿日時を非表示 */
.page .post-date,
.page .entry-date,
.page time.entry-date {
    display: none !important;
}

.site-name,
.site-name-text-link {
    margin-left: 0 !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
}

.site-name-text {
    margin-left: 0 !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.site-logo-image,
.header-site-logo-image,
.site-fixed-logo-image {
    margin-left: 0 !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/************************************
** 商品一覧ページのタイトル修正CSS
************************************/
/* 商品一覧ページのタイトルを強制的に変更 */
.post-type-archive-products #archive-title,
.post-type-archive-products .archive-title,
.post-type-archive-products h1.archive-title {
    position: relative;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* 新しいタイトルを表示 */
.post-type-archive-products #archive-title::before,
.post-type-archive-products .archive-title::before,
.post-type-archive-products h1.archive-title::before {
    content: "商品一覧";
    position: absolute;
    top: 0;
    left: 0;
    color: #333 !important;
    font-size: 2em !important;
    font-weight: bold !important;
    line-height: 1.2 !important;
    z-index: 999 !important;
    background: white;
    padding: 0.2em 0;
    display: block !important;
}

/* h2のアーカイブも隠す */
.post-type-archive-products h2.wp-block-heading {
    display: none !important;
}

/* ページタイトルも修正 */
.post-type-archive-products .page-title,
.post-type-archive-products h1.page-title {
    position: relative;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

.post-type-archive-products .page-title::before,
.post-type-archive-products h1.page-title::before {
    content: "商品一覧";
    position: absolute;
    top: 0;
    left: 0;
    color: #333 !important;
    font-size: 2em !important;
    font-weight: bold !important;
    line-height: 1.2 !important;
    z-index: 999 !important;
    background: white;
    padding: 0.2em 0;
    display: block !important;
}

/* アーカイブページのメインタイトル */
.archive #archive-title,
.archive .archive-title,
.archive h1.archive-title {
    position: relative;
}

.archive #archive-title::before,
.archive .archive-title::before,
.archive h1.archive-title::before {
    content: "商品一覧";
    position: absolute;
    top: 0;
    left: 0;
    color: #333 !important;
    font-size: 2em !important;
    font-weight: bold !important;
    line-height: 1.2 !important;
    z-index: 999 !important;
    background: white;
    padding: 0.2em 0;
    display: block !important;
}

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /* 商品一覧タイトルのレスポンシブ対応 */
  .post-type-archive-products #archive-title::before,
  .post-type-archive-products .archive-title::before,
  .post-type-archive-products h1.archive-title::before,
  .post-type-archive-products .page-title::before,
  .post-type-archive-products h1.page-title::before,
  .archive #archive-title::before,
  .archive .archive-title::before,
  .archive h1.archive-title::before {
      font-size: 1.5em !important;
  }
}