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

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


/* 隱藏所有固定頁面的側邊欄 */
.page .sidebar {
  display: none;
}

/* 將固定頁面主要內容區域寬度調整為與文章頁面相同 */
.page .main {
  width: 100%; /* 確保內容區域佔滿可用寬度 */
  max-width: var(--main-width); /* 設定最大寬度，與預設文章頁面相同 */
  margin-left: auto;
  margin-right: auto; /* 將內容區域置中 */
}

/* 隱藏固定頁面的麵包屑導航 */
.page .breadcrumb {
  display: none;
}

/* 嘗試移除固定頁面上方的空隙 (你可能需要根據實際情況修改) */
.page {
  margin-top: 0;
  padding-top: 0;
}

.page .main {
  margin-top: 0;
  padding-top: 0;
}

/* パンくずリストと記事タイトルの間のスペースを縮小 */
.article-header {
  margin-top: -20px; /* パンくずとタイトルの間。必要に応じて値を調整 */
}

.entry-title {
    margin-top: 10px !important;
}

.breadcrumb {
    margin-bottom: 0px;
}

.skin-grayish .breadcrumb {
  padding-top: 0px !important;
}

/* 隱藏固定頁面的發布/更新日期 */
.page .date-tags {
  display: none;
}

/* 移除固定頁面底部的藍線 */
.page .entry-content {
  border-bottom: none !important;
}

 /* 移除底部追蹤區塊 */
.page .article-footer .sns-follow {
  display: none !important;
}

/***  Wordpress 無限循環跑馬燈 CSS ***/

.marquee-container {
  width: 100%; /* 調整跑馬燈容器寬度，通常是 100% */
  overflow: hidden; /* 隱藏超出範圍的內容 */
  white-space: nowrap; /* 防止文字換行 */
  background-color: #f0f0f0; /* 可選：設定背景顏色 */
  padding: 10px 0; /* 可選：設定上下內距 */
}

.marquee-text {
  display: inline-block; /* 讓文字可以水平排列 */
  padding-left: 100%;  /*  初始位置設置在容器右側之外 */
  animation: marquee 20s linear infinite; /* 設定動畫 */
}

/* 定義 marquee 動畫 */
@keyframes marquee {
  0%   { transform: translateX(0); }  /*  初始位置 (容器右側之外) */
  100% { transform: translateX(-100%); } /*  結束位置 (完全移動到容器左側之外) */
}

/* 讓文字之間有一些間距 */
.marquee-text span {
  padding-right: 30px;
}


/* 使用範例 (在你的 HTML 中)  */
/*
<div class="marquee-container">
  <div class="marquee-text">
    <span>– \New/ Project Virduct by SGO studio •</span>
    <span>\Thanks/ SGO Leo YouTube Channel 5th Anniversary –</span>
  </div>
</div>
*/

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

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

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