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

/************************************
** 1. レイアウト修正（中央揃え・階段状防止）
************************************/
.wrap {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 1255px;
}

/* 記事カードが階段状になるのを防ぐ */
.content-in {
    flex-wrap: wrap !important;
}

/************************************
** 2. ヘッダー修正（ロゴ・メニュー設定）
************************************/
/* ヘッダー全体を白にする */
.header-in, .navi-in {
    background-color: #fff !important;
}

/* ロゴ周りの青い箱を完全に消す */
.site-name-text {
    background-color: transparent !important;
    background: none !important;
    box-shadow: none !important;
}

/* ロゴとメニューのフォント設定（太字に統一） */
.header .site-name-text, 
.navi-in a, 
.top_title,
#menu-item-131, #menu-item-132, #menu-item-133, 
#menu-item-134, #menu-item-135, #menu-item-246 {
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: 0.1rem;
    color: #0769bf !important;
    font-weight: 900 !important; /* 最も太い設定に変更 */
}

.header .site-name-text {
    font-size: 32px;
}

/* 不要なタイトル非表示 */
.page .entry-title, .article-header h1, .entry-header h1 {
    display: none;
}

/************************************
** 3. メイン画像（スライダー）の復活
************************************/
/************************************
** CSSスライダー設定（2枚交互フェード）
************************************/
/* スライダー全体の枠 */
.slider-container {
    width: 100% !important;
    height: 60vh; /* PCでの表示高さ */
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}

/* スライドされる各要素の基本設定 */
.slider-item {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    animation: sliderAnime 10s infinite; /* 10秒かけて1周 */
}

/* 1枚目の画像設定 */
.img01 {
    background-image: url("http://seibiclean-company.jp/wp-content/uploads/2023/10/seibi03.jpg");
}

/* 2枚目の画像設定（5秒遅らせて開始） */
.img02 {
    background-image: url("http://seibiclean-company.jp/wp-content/uploads/2023/10/seibi05.jpg");
    animation-delay: 5s;
}

/* フェード切り替えのアニメーション */
@keyframes sliderAnime {
    0% { opacity: 0; }
    10% { opacity: 1; } /* 最初の1秒でふわっと表示 */
    40% { opacity: 1; } /* 4秒間そのまま表示 */
    50% { opacity: 0; } /* 次の1秒でふわっと消える */
    100% { opacity: 0; }
}

/************************************
** スマホ用の高さ調整
************************************/
@media screen and (max-width: 480px) {
    .slider-container {
        height: 250px !important; /* スマホで見やすい高さ */
    }
}

/************************************
** 4. コンテンツデザイン
************************************/
.omoi, .shitsumon {
    background: #E9F4FF;
    padding: 60px 40px;
}

.company {
    background-image: url("https://seibiclean-company.jp/wp-content/uploads/2023/10/seibi02.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/************************************
** 「最新の投稿」ブロックの隙間調整
************************************/
/* 各記事（リスト項目）の上下に余白を作る */
.wp-block-latest-posts li {
    margin-bottom: 30px !important; /* 記事ごとの隙間 */
    list-style: none;
    display: block;
    overflow: hidden; /* 回り込み解除 */
}

/* 画像とタイトルの位置関係を整える */
.wp-block-latest-posts__featured-image {
    margin-bottom: 15px !important; /* 画像とタイトルの間の隙間 */
}

/* 最後の項目の余白は不要なので消す */
.wp-block-latest-posts li:last-child {
    margin-bottom: 0 !important;
}

/* スマホでの微調整 */
@media screen and (max-width: 480px) {
    .wp-block-latest-posts li {
        margin-bottom: 30px !important;
    }
}

/************************************
** 5. レスポンシブ（スマホ対応）
************************************/
@media screen and (max-width: 1023px) {
    .header .site-name-text {
        font-size: 24px;
    }
    .navi-in a {
        font-size: 14px;
    }
}

@media screen and (max-width: 480px) {
    .slider {
        height: 250px !important;
    }
    body {
        overflow-x: hidden;
    }
}

/************************************
** 6. アニメーション（干渉防止のため簡略化）
************************************/
.bgappear { opacity: 1 !important; }
.fadeIn { animation: fadeInAnime 1s forwards; opacity: 0; }
@keyframes fadeInAnime { from { opacity: 0; } to { opacity: 1; } }