@charset "UTF-8";
/*
Template: arkhe
Theme Name: yuikatsu
Theme URI: https://arkhe-theme.com/ja/
Description: Arkhe用子テーマ
Version: 1.0.0
Text Domain: arkhe
License: GNU General Public License
License URI: http://www.gnu.org/licenses/gpl.html
*/



/* ============================================
   1. 変数定義 & Arkhe標準変数の上書き
   ============================================ */
:root {
    /* --- 結活カラーパレット --- */
    --yui-text: #464646;
    --yui-main: #6D9886;       /* メイン緑 */
    --yui-main-light: #8AB6A3;
    --yui-primary: #D9CAB3;    /* ベージュ */
    --yui-accent: #E69A8D;     /* ピンクアクセント */
    --yui-bg: #FEFCFA;         /* 背景色 (ご指定の薄いクリーム色) */
    --yui-surface: #F6F3EF;

    /* --- フォント定義 --- */
    --font-sans: "Noto Sans JP", sans-serif;
    --font-rounded: "Zen Maru Gothic", sans-serif;
    --font-serif: "Shippori Mincho", serif;

    /* --- Arkheシステム変数の上書き --- */
    /* これによりサイト全体の配色が一括変更されます */
    --ark-color_main: var(--yui-main);
    --ark-color_accent: var(--yui-accent);
    --ark-color_text: var(--yui-text);
    --ark-body_bg: var(--yui-bg);
    --ark-font_body: var(--font-rounded); /* 基本フォントを丸ゴシックに */
}

/* ============================================
   2. 基本スタイル (Base)
   ============================================ */
body {
    background-color: var(--yui-bg);
    color: var(--yui-text);
    font-family: var(--font-rounded);
    line-height: 1.8;
}

/* 記事本文、メインエリアは読みやすさ重視のサンセリフ */
.entry-content, 
.l-main {
    font-family: var(--font-sans);
}

/* 見出しは丸ゴシックで統一 */
h1, h2, h3, h4, h5, h6,
.c-secTitle, 
.p-entry__title {
    font-family: var(--font-rounded) !important;
    color: var(--yui-text);
    letter-spacing: 0.05em;
    font-weight: 700;
}

/* リンクアニメーション */
a {
    transition: color 0.3s ease, opacity 0.3s ease;
}
a:hover {
    color: var(--yui-main-light);
}

/* ============================================
   3. 背景装飾 (七宝パターン)
   ============================================ */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -10;
    pointer-events: none;
    background-color: var(--yui-bg);
    /* 控えめなドット・七宝風パターン */
    background-image: 
        radial-gradient(circle at 0 0, transparent 0, var(--yui-bg) 16px), 
        radial-gradient(circle at 50px 50px, transparent 0, var(--yui-bg) 16px), 
        radial-gradient(at 50px 0, rgba(217, 202, 179, 0.15) 0, transparent 30px), 
        radial-gradient(at 0 50px, rgba(217, 202, 179, 0.15) 0, transparent 30px);
    background-size: 100px 100px;
    opacity: 0.6;
}

/* ============================================
   4. ヘッダーロゴのスタイル (結活オリジナル)
   ============================================ */
/* ロゴ全体コンテナ */
.c-customLogo {
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1;
}

/* アイコン部分 */
.c-customLogo__icon {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

/* アイコン背景の丸 */
.c-customLogo__iconBg {
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--yui-main);
    border-radius: 50%;
    transition: transform 0.3s ease;
}

/* 親リンク(aタグ)ホバー時に拡大 */
a:hover .c-customLogo__iconBg {
    transform: scale(1.1);
}

/* アイコンSVG */
.c-customLogo__svg {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 24px;
    height: 24px;
    color: #fff;
    z-index: 1;
}

/* テキスト部分 */
.c-customLogo__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.c-customLogo__title {
    font-family: var(--font-rounded);
    font-size: 1.5rem; /* 24px */
    font-weight: 700;
    color: var(--yui-main);
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.c-customLogo__sub {
    font-family: var(--font-sans);
    font-size: 10px;
    color: #9ca3af;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* ============================================
   5. ヘッダーバーの装飾 (ドロワーは変更なし)
   ============================================ */

/* ヘッダー全体のトランジション */
.l-header {
    transition: background-color 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease;
}

/* スクロール時のすりガラス効果 */
.l-header.is-scrolled {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 20px -5px rgba(0,0,0,0.05);
}

/* ハンバーガーボタン(ドロワー)の色をメインカラーに */
.c-drawerBtn__icon span {
    background-color: var(--yui-main) !important;
}

/* ============================================
   6. UIパーツのカスタマイズ
   ============================================ */

/* ボタンを丸く */
.c-btn, 
button[type="submit"], 
input[type="submit"],
.u-btn {
    border-radius: 9999px !important;
    font-family: var(--font-rounded);
    font-weight: 700;
    letter-spacing: 0.05em;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.c-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(109, 152, 134, 0.25);
}

/* 記事カード等のスタイル */
.c-postList__item,
.p-archive__item {
    border-radius: 24px; /* 大きめの角丸 */
    background-color: #fff;
    border: 1px solid rgba(0,0,0,0.03);
    overflow: hidden;
}

/* カテゴリラベル */
.c-postList__cat,
.c-entry__cat {
    background-color: var(--yui-surface) !important;
    color: var(--yui-main) !important;
    border-radius: 99px;
    font-weight: 700;
}

/* ページネーション */
.page-numbers {
    border-radius: 50% !important;
    font-family: var(--font-rounded);
}
.page-numbers.current {
    background-color: var(--yui-main);
    color: #fff;
}

/* フッター背景 */
.l-footer {
    background-color: #fff;
    border-top: 1px solid var(--yui-surface);
}

/* クリック可能なカードのカーソル */
article {
    cursor: pointer;
}

.single h1.c-pageTitle__main{
    color:rgb(109 152 134 / var(--tw-text-opacity, 1));
}
.single figure.p-entry__thumb img,
.single figure.wp-block-image.size-large img {
    border-radius: 2rem;
}

.p-drawer{
    background:rgb(109 152 134 / var(--tw-text-opacity, 1));
}