@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){
  /*必要ならばここにコードを書く*/
}
@charset "UTF-8";

/* Theme Name: Cocoon Child
Description: 保育のおうち - プロフェッショナル・ブランディング・スタイル
*/

/* =========================================
   1. タイポグラフィと基本設計
   ========================================= */
body {
    line-height: 2.0;
    letter-spacing: 0.08em;
    font-feature-settings: "palt"; /* 文字詰め */
}

/* =========================================
   2. ヘッダー・ナビゲーションの洗練
   ========================================= */
#header {
    border-bottom: 1px solid #F9F3F1; /* 薄い境界線 */
}

.navi-in a {
    font-weight: 500;
    color: #453E3C;
    text-decoration: none;
}

/* =========================================
   3. コンテンツ要素の論理的な角丸と余白
   ========================================= */
/* 画像に一貫した表情を与える */
.entry-content img,
.wp-block-image img,
.slick-slide img {
    border-radius: 12px !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.03); /* 非常に薄い影 */
}

/* 見出し：過度な装飾を排した「信頼」のデザイン */
/* =========================================
   見出し(h2)の論理的再定義：可読性の確保
   ========================================= */
/* =========================================
   h2：プレミアム・ミニマルデザイン
   ========================================= */
.article h2 {
    text-align: center !important;
    color: #453E3C !important;
    font-family: "BIZ UDPMincho", serif;
    font-size: 1.6rem !important;
    margin: 4rem 0 2.5rem !important;
    padding: 0 !important;
    border: none !important; /* 全方位の枠線を消去 */
    background: transparent !important;
    position: relative;
    line-height: 1.4;
}

/* 中央の短い飾り線 */
.article h2::after {
    content: '';
    display: block;
    width: 30px; /* 短くすることで洗練された印象に */
    height: 1px; /* 1pxにすることで「繊細さ」を出す */
    background: #E8A79B; /* コーポレートカラー */
    margin: 1.5rem auto 0;
}

/* Cocoon独自の装飾（上下線など）を強制解除 */
.entry-content > h2,
.article > h2 {
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    box-shadow: none !important;
}


/* =========================================
   4. モバイル表示：横スクロール・ギャラリー
   ========================================= */
@media screen and (max-width: 767px) {
    /* Instagramと標準ギャラリーを横スクロールに集約 */
    #sb_instagram #sbi_images,
    .wp-block-gallery {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        gap: 12px !important;
        padding: 0 15px 20px !important;
    }

    #sb_instagram #sbi_images .sbi_item,
    .wp-block-gallery .wp-block-image {
        flex: 0 0 75% !important;
        width: 75% !important;
        margin: 0 !important;
    }
}

/* =========================================
   5. PDF資料ダウンロードボタンのバナー化
   ========================================= */
/* 資料ダウンロードボタンに「公的な重み」を持たせる */
.pdf-download-link {
    display: block;
    max-width: 400px;
    margin: 2rem auto;
    padding: 20px;
    background: #F9F3F1;
    border: 1px solid #E8A79B;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    color: #453E3C;
    font-weight: bold;
    transition: 0.3s;
}

.pdf-download-link:hover {
    background: #E8A79B;
    color: #fff;
}
/*
 *  Instagramの写真のモバイルでのカルーセル表示
 * /

/* =========================================
   モバイル：スナップ式カルーセル実装
   ========================================= */
@media screen and (max-width: 767px) {
    /* Smash Balloon (Instagram) & WP標準ギャラリー 共通設定 */
    #sb_instagram #sbi_images,
    .wp-block-gallery.has-nested-images {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        /* スナップ機能：スクロールを画像の位置でピタッと止める */
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch; /* iOSでの滑らかなスクロール */
        gap: 12px !important;
        padding: 0 20px 20px !important; /* 左右に余白を作り「はみ出し」を演出 */
        scrollbar-width: none; /* Firefox用：スクロールバー非表示 */
    }

    /* スクロールバーを隠してスタイリッシュに（Chrome, Safari） */
    #sb_instagram #sbi_images::-webkit-scrollbar,
    .wp-block-gallery::-webkit-scrollbar {
        display: none;
    }

    /* 各アイテム（画像1枚）の設定 */
    #sb_instagram #sbi_images .sbi_item,
    .wp-block-gallery .wp-block-image {
        flex: 0 0 80% !important; /* 画面幅の80%に設定（右端に次の画像が少し見える状態） */
        width: 80% !important;
        margin: 0 !important;
        scroll-snap-align: center; /* 中央で止まるように設定 */
    }

    /* 画像の質感を整える（15枚の「保育の様子」に適用） */
    .wp-block-gallery .wp-block-image img {
        aspect-ratio: 4 / 3; /* 比率を統一してリズムを作る */
        object-fit: cover;
        width: 100%;
        height: auto;
    }
}

/*
 * 資料ダウンロード関係
 * /
/* =========================================
   資料ダウンロード：スマート・スタック構造
   ========================================= */
.ho-download-card {
    display: block;
    background: #FFFFFF;
    border: 1px solid #F0E6E4;
    border-radius: 16px;
    text-decoration: none !important;
    overflow: hidden;
    transition: 0.3s;
}

/* PCレイアウト */
.ho-download-content {
    display: flex;
    align-items: center;
    padding: 30px;
    gap: 30px;
}

.ho-download-preview {
    flex: 0 0 120px; /* PCでは適度な大きさ */
}

/* モバイルレイアウト：縦積みを強化 */
@media screen and (max-width: 767px) {
    .ho-download-content {
        flex-direction: column; /* 確実に縦に並べる */
        padding: 30px 20px;
        gap: 20px;
    }

    .ho-download-preview {
        flex: 0 0 auto;
        width: 120px; /* 画像が大きくなりすぎないよう固定 */
        margin: 0 auto; /* 中央寄せ */
    }

    .ho-download-text {
        text-align: center; /* モバイルでは中央揃えが美しい */
    }

    .ho-card-title {
        font-size: 1.15rem !important;
        margin-bottom: 12px !important;
    }

    .ho-download-action {
        width: 100%;
        justify-content: center;
        border-top: 1px dashed #F0E6E4; /* 軽い区切り線 */
        padding-top: 20px;
        margin-top: 10px;
    }
}

/*
 * 2つの事業の紹介導入部分
 * /

/* =========================================
   事業紹介ブロック（ho-service-block）完全版
   ========================================= */

/* =========================================
   事業紹介ブロック（ho-service-block）完全版
   ========================================= */

/* 1. カラム全体の配置：中央寄せと余白 */
.ho-service-block {
    margin: 4rem 0 !important;
    justify-content: center !important;
    gap: 30px !important; /* カード間の距離 */
}

/* 2. カード本体：垂直センター軸の確立 */
.ho-service-block .wp-block-column {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* 全要素を水平中央へ */
    text-align: center !important;
    padding: 30px 25px !important;
    background: #FFFFFF;
    border: 1px solid #F0E6E4;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(232, 167, 155, 0.05);
    transition: all 0.4s ease;
}

.ho-service-block .wp-block-column:hover {
    transform: translateY(-5px);
    border-color: #E8A79B;
    box-shadow: 0 15px 40px rgba(232, 167, 155, 0.12);
}

/* 3. アーチウィンドウ：情緒的な窓のデザイン */
.ho-service-block .wp-block-image {
    width: 100% !important;
    max-width: 240px !important;
    height: 300px !important;
    margin: 0 auto 25px auto !important;
    /* アーチ形状：上部を半円に、下部は少しだけ丸める */
    border-radius: 120px 120px 15px 15px !important;
    border: 4px solid #FFFFFF;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    overflow: hidden;
    display: block !important;
}

.ho-service-block .wp-block-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.6s ease;
}

/* 4. H3タイトル：構造を明確にする独自デザイン */
.ho-service-block h3 {
    border: none !important;
    background: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    font-family: "BIZ UDPMincho", serif;
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    color: #453E3C !important;
    margin: 0 0 15px 0 !important;
    position: relative;
    display: inline-block;
}

/* タイトル下のアクセントライン */
.ho-service-block h3::after {
    content: '';
    display: block;
    width: 30px;
    height: 1px;
    background: #E8A79B;
    margin: 12px auto 0;
}

/* 5. 説明文：読みやすさと余白 */
.ho-service-block p {
    font-size: 0.95rem !important;
    color: #666 !important;
    line-height: 1.8 !important;
    margin-bottom: 25px !important;
    flex-grow: 1; /* ボタンの位置を揃える */
}

/* 6. ボタン：ブランドカラー（ロゼピンク）の適用 */
.ho-service-block .wp-block-button__link {
    background-color: #E8A79B !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 12px 35px !important;
    font-size: 0.9rem !important;
    font-weight: bold;
    transition: 0.3s;
}

.ho-service-block .wp-block-button__link:hover {
    background-color: #D48E7E !important;
    transform: scale(1.05);
}

/* モバイル対応：縦積みとサイズの最適化 */
@media screen and (max-width: 767px) {
    .ho-service-block .wp-block-image {
        max-width: 200px !important;
        height: 260px !important;
    }
}

/*
 * 誕生ストーリー部
 * /

/* =========================================
   コンセプトセクション：情緒的タイポグラフィ
   ========================================= */
.ho-concept-section {
    padding: 60px 40px !important;
    margin: 4rem 0 !important;
    border-radius: 20px;
    background-color: #F9F3F1 !important; /* 薄いベージュ背景 */
    position: relative;
    overflow: hidden;
}

/* 巨大な装飾用引用符（背景として配置） */
.ho-concept-section::before {
    content: '“';
    position: absolute;
    top: -20px;
    left: 20px;
    font-size: 160px;
    color: #E8A79B;
    opacity: 0.15;
    font-family: serif;
}

/* 本文のテキストスタイル */
.ho-concept-section p {
    font-family: "BIZ UDPMincho", "Yu Mincho", serif;
    font-size: 1.05rem !important;
    line-height: 2.2 !important; /* 行間を広くとり、ゆったりさせる */
    color: #453E3C;
    max-width: 700px;
    margin: 0 auto 1.5rem auto !important;
    text-align: justify; /* 両端揃えで美しく */
}

/* 強調したい部分（エディタで太字にした部分）へのマーカー */
.ho-concept-section strong {
    font-weight: 600;
    background: linear-gradient(transparent 70%, #E8A79B 70%); /* キーカラーのマーカー */
}

/* 施設長名の署名スタイル */
.ho-concept-section p.has-text-align-right {
    font-size: 0.9rem !important;
    margin-top: 3rem !important;
    letter-spacing: 0.2em;
}

/* モバイル対応：余白の調整 */
@media screen and (max-width: 767px) {
    .ho-concept-section {
        padding: 40px 20px !important;
    }
    
    .ho-concept-section p {
        font-size: 1rem !important;
        line-height: 2.0 !important;
    }
}

/*
 *  15枚の写真ギャラリー
 * /

/* =========================================
   ギャラリー・リードエリア：知的な視点の提示
   ========================================= */
.ho-gallery-lead-area {
    text-align: center;
    margin: 6rem auto 3.5rem !important; /* 上下にゆとりを持たせる */
    max-width: 750px;
    padding: 0 20px;
}

/* リード文のタイポグラフィ */
.ho-gallery-lead-area p {
    font-family: "BIZ UDPMincho", serif;
    font-size: 1.05rem !important;
    line-height: 2.2 !important;
    color: #544A47; /* テキストカラーより一段階柔らかい茶色 */
    letter-spacing: 0.05em;
}

/* 文章の後に続くギャラリーへの導線（小さな縦線） */
.ho-gallery-lead-area::after {
    content: '';
    display: block;
    width: 1px;
    height: 40px;
    background-color: #E8A79B; /* コーポレートカラー */
    margin: 30px auto 0;
    opacity: 0.6;
}

/*
 *  営業日カレンダー
 * /

/* =========================================
   営業カレンダー：メディア＆テキスト統合スタイル
   ========================================= */

/* 1. 外枠（ボード全体）のデザイン */
.ho-calendar-board {
    background-color: #FFFFFF;
    border: 1px solid #F0E6E4;
    border-radius: 20px;
    padding: 40px !important;
    margin: 4rem auto !important;
    max-width: 900px;
    box-shadow: 0 12px 40px rgba(232, 167, 155, 0.08);
}

/* 2. 見出し（H3）のリセットと装飾 */
.ho-calendar-board h3 {
    text-align: center;
    border: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 0 30px 0 !important;
    font-family: "BIZ UDPMincho", serif;
    font-size: 1.5rem !important;
    color: #453E3C !important;
}

.ho-calendar-board h3::after {
    content: '';
    display: block;
    width: 30px;
    height: 1px;
    background: #E8A79B;
    margin: 15px auto 0;
}

/* 3. メディアとテキストのレイアウト調整 */
.ho-calendar-board .wp-block-media-text {
    gap: 40px; /* 画像とテキストの間隔 */
    align-items: flex-start; /* 上揃え */
}

/* 画像部分：カレンダーを額縁に入れる */
.ho-calendar-board .wp-block-media-text__media {
    margin: 0 !important;
}

.ho-calendar-board .wp-block-media-text__media img {
    border-radius: 12px;
    border: 1px solid #F9F3F1;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

/* テキスト部分：可読性の向上 */
.ho-calendar-board .wp-block-media-text__content {
    padding: 0 !important;
}

.ho-calendar-board .wp-block-media-text__content p {
    font-size: 0.95rem !important;
    line-height: 2.0 !important;
    color: #544A47;
    margin-bottom: 1.5rem !important;
    text-align: justify;
}

/* モバイル対応：縦積みの最適化 */
@media screen and (max-width: 767px) {
    .ho-calendar-board {
        padding: 30px 20px !important;
    }

    .ho-calendar-board .wp-block-media-text {
        gap: 20px;
    }

    /* モバイルではカレンダー画像を少し小さくして収まりを良くする */
    .ho-calendar-board .wp-block-media-text__media {
        max-width: 80% !important;
        margin: 0 auto !important;
    }
}