@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. サイト全体の基本スタイル（カラー＆フォント）
   ============================================================ */
body {
    background-color: #fdfcf9 !important; /* 温かみのあるアイボリー背景 */
    color: #4a4035;                       /* 深みのあるウォームブラウン */
    font-family: "Shippori Mincho", "Noto Serif JP", "Yu Mincho", "游明朝", serif; /* 明朝体 */
}

/* 管理者パネルの非表示 */
.admin-panel {
    display: none !important;
}


/* ============================================================
   2. ヘッダー＆キャッチフレーズ設定
   ============================================================ */
/* ヘッダー全体を背景と同化 */
.header-container,
#header {
    background-color: #fdfcf9 !important;
}

/* キャッチフレーズ（アナウンスバー風デザイン） */
.tagline,
.site-catchphrase {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    background-color: #f8f4eb !important;
    color: #4a4035 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    text-align: center !important;
    padding: 10px 16px !important;
    border-bottom: 2px solid #b39a72 !important;
    line-height: 1.4 !important;
}

/* キャッチフレーズ前後のドット（PC表示時） */
.tagline::before, .tagline::after,
.site-catchphrase::before, .site-catchphrase::after {
    content: "•";
    color: #b39a72;
    margin: 0 10px;
    font-size: 10px;
    line-height: 1;
    display: inline-block;
}

/* PC用グローバルナビ（ホバーで下線が伸びる演出） */
.navi-in a {
    position: relative;
    padding-bottom: 6px !important;
    transition: color 0.4s ease !important;
    color: #4a4035 !important;
}

.navi-in a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 1px;
    background-color: #b39a72;
    transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.navi-in a:hover::after {
    width: 80%;
}

.navi-in a:hover {
    color: #b39a72 !important;
    background-color: transparent !important;
}


/* ============================================================
   3. スマホ用モバイルヘッダー＆ドロワーメニュー
   ============================================================ */
@media screen and (max-width: 834px) {
    /* モバイルヘッダーバーの追従設定 */
    .mobile-header-menu {
        position: sticky;
        top: 0;
        z-index: 9999;
        background-color: #fdfcf9 !important;
        border-bottom: 1px solid rgba(179, 154, 114, 0.2) !important;
        box-shadow: 0 4px 15px rgba(74, 64, 53, 0.04) !important;
        justify-content: flex-end !important; /* MENUボタンを右寄せ */
    }

    /* 不要なボタン（ホーム・検索・サイドバー）を非表示 */
    .mobile-menu-buttons .home-menu-button,
    .mobile-menu-buttons .logo-menu-button,
    .mobile-menu-buttons .search-button,
    .mobile-menu-buttons .search-menu-button,
    .mobile-menu-buttons .sidebar-button {
        display: none !important;
    }

    .mobile-menu-buttons .menu-button {
        margin-left: auto !important;
        color: #4a4035 !important;
    }

    /* アイコン下ラベルテキスト */
    .mobile-menu-buttons .menu-button-in .caption {
        font-size: 10px !important;
        letter-spacing: 0.15em !important;
        font-weight: 500 !important;
        color: #8b8175 !important;
        margin-top: 2px !important;
    }
}

/* 開いた時のスライドメニュー（ドロワー）デザイン */
.navi-menu-content,
#navi-menu-content {
    background-color: #fdfcf9 !important;
    padding: 60px 24px 40px !important;
}

.navi-menu-content ul.menu > li {
    border-bottom: 1px solid rgba(179, 154, 114, 0.15) !important;
}

.navi-menu-content ul.menu > li > a {
    color: #4a4035 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: 0.12em !important;
    padding: 16px 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: all 0.3s ease !important;
}

.navi-menu-content ul.menu > li > a:hover,
.navi-menu-content ul.menu > li > a:active {
    color: #b39a72 !important;
    background-color: rgba(248, 244, 235, 0.5) !important;
    padding-left: 14px !important;
}

.navi-menu-content .menu-close-button {
    color: #8b8175 !important;
    font-size: 20px !important;
    top: 15px !important;
    right: 15px !important;
}

.menu-overlay {
    background-color: rgba(74, 64, 53, 0.4) !important;
    backdrop-filter: blur(2px);
}


/* ============================================================
   4. トップページ スライダー（yogaSwiper）
   ============================================================ */
.yogaSwiper {
    width: 100%;
    padding: 40px 0;
}

.yogaSwiper .swiper-wrapper {
    transition-timing-function: linear !important;
}

.yogaSwiper .swiper-slide {
    width: 420px; /* PCでの1枚の幅 */
}

.yogaSwiper img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}


/* ============================================================
   5. Sattva Yoga お知らせカード
   ============================================================ */
.sattva-news {
    max-width: 960px;
    margin: 90px auto;
    padding: 0 20px;
}

.sattva-news-card {
    background: #f8f4eb;
    padding: 50px 60px;
    border-radius: 8px;
    border-top: 3px solid #b39a72;
    box-shadow: 0 16px 40px rgba(74, 64, 53, 0.06);
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.sattva-news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 48px rgba(74, 64, 53, 0.09) !important;
}

.sattva-news-title {
    font-size: 26px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: #4a4035;
    line-height: 1.6;
    margin-bottom: 16px;
}

.sattva-news-date {
    font-size: 13px;
    letter-spacing: 0.12em;
    color: #8b8175;
    margin-bottom: 32px;
}

.sattva-news-text {
    font-size: 16px;
    line-height: 2.1;
    color: #5a5046;
    margin-bottom: 35px;
}

.sattva-news-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    transition: opacity 0.5s ease, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.sattva-news-card:hover .sattva-news-image img {
    transform: scale(1.02);
}


/* ============================================================
   6. 記事本文内のテキストリンク装飾
   ============================================================ */
.entry-content a:not(.btn-standard):not(.button):not(.wp-block-button__link) {
    color: #4a4035;
    text-decoration: none;
    position: relative;
    display: inline-block;
    transition: color 0.3s ease;
}

.entry-content a:not(.btn-standard):not(.button):not(.wp-block-button__link)::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(179, 154, 114, 0.3);
    transition: background-color 0.3s ease, height 0.3s ease;
}

.entry-content a:not(.btn-standard):not(.button):not(.wp-block-button__link):hover {
    color: #b39a72;
}

.entry-content a:not(.btn-standard):not(.button):not(.wp-block-button__link):hover::after {
    background-color: #b39a72;
}


/* ============================================================
   7. フッターナビゲーション・「参加予約」改行防止【★対応箇所】
   ============================================================ */
/* フッターのメニュー文字が途中で不自然に改行されるのを防ぐ */
.footer-navi,
.footer-navi a,
.footer-menu,
.footer-menu a {
    white-space: nowrap !important; /* テキストの途中で改行させない */
}


/* ============================================================
   8. スマートフォン用レスポンシブ調整 (768px以下)
   ============================================================ */
@media screen and (max-width: 768px) {
    /* キャッチフレーズのフォントサイズ調整とドット非表示 */
    .tagline,
    .site-catchphrase {
        font-size: 11px !important;
        letter-spacing: 0.05em !important;
        padding: 8px 10px !important;
    }
    
    .tagline::before, .tagline::after,
    .site-catchphrase::before, .site-catchphrase::after {
        display: none !important;
    }

    /* お知らせカードのスマホ調整 */
    .sattva-news {
        margin: 40px auto;
        padding: 0 16px;
    }

    .sattva-news-card {
        padding: 30px 22px;
        border-top-width: 2px;
    }

    .sattva-news-title {
        font-size: 18px;
        line-height: 1.5;
        letter-spacing: 0.05em;
    }

    .sattva-news-date {
        font-size: 12px;
        margin-bottom: 20px;
    }

    .sattva-news-text {
        font-size: 14px;
        line-height: 1.9;
    }
}




/* シンプルなテキストリンク（ピンク系・周りの文字サイズに合わせる） */
.insta-simple-link-pink {
  display: inline-flex;
  align-items: center;
  gap: 0.3em; /* アイコンと文字のすき間 */
  
  /* Instagramブランドピンク */
  color: #E1306C !important;
  
  text-decoration: none;
  font-size: 1.4em
}

/* アイコンのサイズ設定 */
.insta-small-icon {
  width: 1em;  /* ← 文字の高さと全く同じ大きさにする */
  height: 1em;
  
  /* 文字色(ピンク)に連動 */
  fill: currentColor;
  flex-shrink: 0;
}

/* ホバー時の装飾（少し暗いピンクへ） */
.insta-simple-link-pink:hover {
  text-decoration: underline;
  color: #C13584 !important;
}


.reserve-btn-outline {
  display: inline-block;
  padding: 14px 30px;
  background-color: #ffffff;
  color: #5B7558 !important;
  font-weight: bold;
  font-size: 18px;
  text-decoration: none;
  border: 2px solid #5B7558;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.reserve-btn-outline:hover {
  background-color: #5B7558;
  color: #ffffff !important;
}