/* ====================================
   Root Science Style Replica for Cocoon
   Theme: Modern Purist (Science & Nature)
   ==================================== */

/* 1. フォントの読み込み（Google Fonts） */
/* 見出し用: Montserrat (モダンなゴシック), 本文用: Noto Serif JP (上品な明朝) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&family=Noto+Serif+JP:wght@300;400&display=swap');

/* 2. 基本設定：科学的でクリーンな白ベース */
body {
    font-family: 'Noto Serif JP', serif; /* 本文は明朝体で「自然」を表現 */
    color: #1a1a1a; /* 真っ黒よりわずかに優しい黒 */
    background-color: #fff;
    line-height: 2.0; /* 行間を広く取って「余白」を作る */
    font-weight: 300;
}

/* 3. 見出し：英語フォントで「科学・モダン」を演出 */
h1, h2, h3, h4, h5, h6, 
.entry-title, 
.widget-title {
    font-family: 'Montserrat', sans-serif !important;
    text-transform: uppercase; /* 強制的に大文字にする（Root Scienceの特徴） */
    letter-spacing: 0.2em; /* 文字間隔をかなり広げる */
    font-weight: 400;
}

/* 4. ヘッダー：極限までシンプルに */
.header-container {
    border-bottom: 1px solid #e5e5e5;
    box-shadow: none !important;
    padding: 20px 0;
}
/* ロゴを中央寄せ */
.site-name-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    letter-spacing: 0.3em;
    font-size: 24px;
}

/* 5. ナビゲーション：小さく、控えめに */
#navi .navi-in > ul > li > a {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px; /* かなり小さくするのがトレンド */
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 600;
}

/* 6. ボタン：Root Science流「完全な四角」 */
.woocommerce button.button.alt, 
.woocommerce a.button.alt,
.woocommerce button.button,
.skin-btn,
.submit {
    background-color: #000 !important;
    color: #fff !important;
    border-radius: 0px !important; /* 角丸を完全になくす */
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    padding: 18px 40px !important;
    font-size: 12px !important;
    border: 1px solid #000 !important;
    transition: all 0.3s ease;
}

/* ホバー時に白反転させる（Root Scienceの挙動） */
.woocommerce button.button.alt:hover, 
.woocommerce a.button.alt:hover {
    background-color: #fff !important;
    color: #000 !important;
}

/* 7. 商品カード・記事カード */
.entry-card-wrap {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}
/* 画像を少し暗くして文字を読ませる演出をオフ */
.entry-card-thumb img {
    opacity: 1;
    transition: opacity 0.3s;
}
.entry-card-wrap:hover .entry-card-thumb img {
    opacity: 0.7;
}

/* 8. 余白の調整（重要） */
.content {
    max-width: 1200px; /* 横幅を制限して間延びさせない */
    margin-top: 80px;
}