@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/


/* --- 1. 全体のフォントと背景の設定 --- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500&family=Noto+Serif+JP:wght@300;400;500;600&display=swap');

body {
    background-color: #FAFAFA; /* */
    color: #44403c; /* stone-800相当 */
    font-family: "Noto Sans JP", sans-serif; /* */
}

/* --- 2. 見出しのデザイン（セリフ体・下線） --- */
h1, h2, h3, .p-postList__title, .c-widget__title, .font-serif {
    font-family: "Noto Serif JP", serif !important; /* */
    letter-spacing: 0.1em;
}

/* 記事内h2やサイドバートップの見出し */
.p-article h2, .c-widget__title {
    border-bottom: 1px solid #e7e5e4 !important; /* stone-200 */
    padding-bottom: 0.7em;
    font-size: 1.5rem;
    position: relative;
}

/* --- 3. 投稿一覧（アーカイブ）のカード装飾 --- */
.p-postList__item {
    transition: opacity 0.3s ease;
}

.p-postList__thumb {
    border-radius: 2px;
    overflow: hidden;
}

.p-postList__thumb img {
    transition: transform 0.7s ease !important; /* */
}

.p-postList__item:hover .p-postList__thumb img {
    transform: scale(1.05); /* */
}

.p-postList__cat {
    background: transparent !important;
    color: #78716c !important; /* stone-500 */
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    border: none;
    padding: 0;
}

/* --- 4. SWELLブログカードのカスタマイズ --- */
.c-blogCard {
    border: 1px solid #e7e5e4 !important; /* */
    padding: 24px !important;
    background: #ffffff;
    border-radius: 2px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
    transition: shadow 0.3s ease;
}

.c-blogCard:hover {
    box-shadow: 0 4px 6px rgba(0,0,0,0.07) !important;
}

/* --- 5. サイドバー・ウィジェットの装飾 --- */
/* タグクラウドを丸いピル型に */
.tagcloud a {
    background: transparent !important;
    border: 1px solid #e7e5e4 !important;
    border-radius: 9999px !important;
    color: #78716c !important;
    padding: 6px 14px !important;
    font-size: 0.75rem !important;
    transition: all 0.3s ease;
}

.tagcloud a:hover {
    border-color: #44403c !important;
    color: #1c1917 !important;
}

/* プロフィールの画像 */
.p-profileWidget__thumb img {
    border-radius: 50%;
    width: 128px;
    height: 128px;
    object-fit: cover;
}

/* --- 1. 記事内見出し（H2・H3・H4） --- */

/* H2: 凛とした空気感の下線と横棒 */
.post_content h2 {
    font-family: "Noto Serif JP", serif !important;
    font-weight: 500;
    color: #1c1917; /* stone-900 */
    padding: 0.5em 0;
    margin-top: 2.5em;
    margin-bottom: 1.5em;
    border-bottom: 1px solid #e7e5e4 !important; /* */
    display: flex;
    align-items: center;
}

/* H3: 左側の繊細な縦線 */
.post_content h3 {
    font-family: "Noto Serif JP", serif !important;
    font-weight: 500;
    color: #44403c;
    padding: 0.2em 0 0.2em 1em;
    margin-top: 2em;
    border-left: 2px solid #d6d3d1 !important; /* stone-300 */
    border-bottom: none !important;
    background: transparent !important;
}

/* H4: 控えめなドット */
.post_content h4 {
    font-family: "Noto Serif JP", serif !important;
    font-weight: 600;
    color: #57534e;
    margin-top: 1.8em;
    display: flex;
    align-items: center;
}
.post_content h4::before {
    content: "・";
    margin-right: 0.5em;
    color: #a8a29e;
}

/* --- 2. リスト（箇条書き）のデザイン --- */

/* 箇条書きを少し上品に */
.post_content ul li {
    list-style-type: none;
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 0.8em;
}

.post_content ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 6px;
    height: 6px;
    border: 1px solid #78716c; /* */
    transform: rotate(45deg);
}

/* --- 3. 引用 (Blockquote) --- */
.post_content blockquote {
    background-color: #f5f5f4 !important; /* stone-100 */
    border: none !important;
    border-left: 1px solid #d6d3d1 !important;
    padding: 1.5em 2em !important;
    position: relative;
    font-style: italic;
    color: #78716c;
}

/* --- 4. SWELL標準パーツの微調整 --- */

/* 重要なテキスト（太字） */
.post_content strong {
    font-weight: 600;
    color: #1c1917;
    background: linear-gradient(transparent 70%, #f5f5f4 70%); /* さりげないマーカー */
}

/* SWELLのキャプション付きボックス */
.cap_box {
    border: 1px solid #e7e5e4 !important;
    border-radius: 2px !important;
}
.cap_box_ttl {
    background-color: #78716c !important; /* stone-500 */
    font-family: "Noto Serif JP", serif;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
}

/* SWELLのマーカー（黄色などを石の色に上書き） */
.is-style-marker_yellow {
    background: linear-gradient(transparent 60%, #e7e5e4 60%) !important;
}

/* --- H2見出し：余計な装飾を消して「細線+明朝」へ強制変更 --- */
.post_content h2,
.post_content .p-article h2 {
    font-family: "Noto Serif JP", serif !important;
    font-size: 1.6rem !important;
    font-weight: 600 !important;
    color: #1c1917 !important; /* */
    
    /* SWELLの標準装飾をリセット */
    background: none !important;
    border: none !important;
    padding: 0 0 12px 0 !important;
    margin: 3em 0 1.5em 0 !important;
    border-bottom: 1px solid #e7e5e4 !important; /* */
    border-radius: 0 !important;
    
    display: block !important;
    line-height: 1.4 !important;
    text-align: left !important;
}

/* H2の左側にアイコン等が出てしまう場合の消去 */
.post_content h2::before,
.post_content h2::after {
    content: none !important;
    display: none !important;
}

/* --- H3見出し：左側の細い縦線 --- */
.post_content h3,
.post_content .p-article h3 {
    font-family: "Noto Serif JP", serif !important;
    font-size: 1.3rem !important;
    font-weight: 500 !important;
    color: #44403c !important; /* */

    background: none !important;
    border: none !important;
    padding: 0 0 0 15px !important;
    margin: 2.5em 0 1.2em 0 !important;
    border-left: 2px solid #d6d3d1 !important; /* */
    
    line-height: 1.4 !important;
}

/* --- H4見出し：控えめなドット形式 --- */
.post_content h4,
.post_content .p-article h4 {
    font-family: "Noto Serif JP", serif !important;
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    color: #57534e !important;
    
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 2em 0 1em 0 !important;
    
    display: flex !important;
    align-items: center !important;
}

.post_content h4::before {
    content: "・" !important;
    margin-right: 0.3em !important;
    color: #a8a29e !important;
    display: inline-block !important;
}

/* --- Pure Life Hero Section --- */
.pl-hero-section {
    background-color: #FAFAFA; /* 背景 */
    text-align: center;
}

@media (min-width: 768px) {
    .pl-hero-section {
    }
}

.pl-hero-container {
    max-width: 1152px; /* max-w-6xl相当 */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px; /* space-y-6相当 */
}

.pl-hero-title {
    font-family: "Noto Serif JP", serif !important; /* */
    font-size: clamp(2rem, 5vw, 3.5rem) !important; /* レスポンシブな文字サイズ */
    color: #1c1917 !important; /* stone-900 */
    line-height: 1.2 !important;
    letter-spacing: 0.05em !important;
    font-weight: 500 !important;
    margin: 0 !important;
}

.pl-hero-title-italic {
    font-style: italic;
    color: #78716c; /* stone-500 */
    font-weight: 300;
}

.pl-hero-description {
    color: #78716c !important; /* stone-500 */
    font-size: 1rem;
    line-height: 1.8 !important;
    letter-spacing: 0.1em;
    margin: 0 auto !important;
}

/* スマホでの改行制御 */
@media (min-width: 768px) {
    .u-mobile-only {
        display: none;
    }
}

/* --- 1. ヘッダー周りの強制上書き --- */


/* ヘッダー全体の背景と境界線 */
.l-header, 
.l-header__inner {
    background-color: #ffffff !important; /* 清潔な白 */
    border-bottom: 1px solid #e7e5e4 !important; /* stone-200 */
    box-shadow: none !important;
    color: unset !important;
}

/* サイトタイトル（ロゴ）を美しい明朝体に */
.c-headLogo__title, 
.c-headLogo__link {
    font-family: "Noto Serif JP", serif !important;
    font-weight: 500 !important;
    letter-spacing: 0.25em !important; /* 文字間隔を広くして高級感を出す */
    color: #1c1917 !important; /* stone-900 */
    text-transform: uppercase;
}

/* PCナビゲーションメニュー */
.p-gnav > .menu-item > a {
    font-family: "Noto Sans JP", sans-serif !important;
    color: #44403c !important; /* stone-800 */
    font-size: 0.85rem !important;
    letter-spacing: 0.15em !important;
    transition: opacity 0.3s ease !important;
}

.p-gnav > .menu-item > a:hover {
    opacity: 0.6 !important;
    background: none !important;
}

/* --- 2. フッター周りの強制上書き（Stone-900の世界観） --- */

/* フッター全体の背景 */
.l-footer {
    background-color: #1c1917 !important; /* stone-900 */
    color: #a8a29e !important; /* stone-400 */
    padding-top: 60px !important;
    padding-bottom: 20px !important;
}

/* フッター内のウィジェット見出し */
.c-footWidget__title {
    font-family: "Noto Serif JP", serif !important;
    color: #f5f5f4 !important; /* stone-100 */
    font-size: 0.9rem !important;
    letter-spacing: 0.2em !important;
    border: none !important;
    text-align: center !important;
    margin-bottom: 2em !important;
}

/* フッターメニューのリンク */
.f-menu__link {
    color: #d6d3d1 !important; /* stone-300 */
    font-size: 0.8rem !important;
    letter-spacing: 0.1em !important;
    transition: color 0.3s ease !important;
}

.f-menu__link:hover {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* コピーライト部分 */
.c-copyright {
    background-color: #1c1917 !important;
    color: #78716c !important; /* stone-500 */
    font-size: 0.7rem !important;
    letter-spacing: 0.2em !important;
    padding-top: 40px !important;
}

/* --- 3. モバイルメニュー（スマホ用）の調整 --- */
.p-spMenu {
    background-color: #fafafa !important;
}
.p-spMenu__inner a {
    font-family: "Noto Serif JP", serif !important;
    color: #1c1917 !important;
}
/* SWELLのコンテナ制限を解除して全幅にする */
.pl-hero-section {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 24px !important;
    background-color: #FAFAFA !important; /* */
}

/* 文字サイズをさらに強調（SWELLのフォント設定に負けないように） */
.pl-hero-title {
    font-family: "Noto Serif JP", serif !important;
    font-size: clamp(1.8rem, 6vw, 3.5rem) !important;
    line-height: 1.3 !important;
    color: #1c1917 !important;
}
/*H3 H4*/
.post_content h3, .post_content .p-article h3 {
border-left: 3px solid #292526 !important;
border-bottom: none !important;
line-height: 1.8 !important;
font-weight: 600 !important;
}
.post_content h3:before {
display:none;
}
.post_content h4 {
position:relative;
font-family: "Noto Sans JP", serif !important;
font-size: 1.215rem !important;
font-weight: 500 !important;
}
.post_content h4::before {
width:8px;
height:8px;
border-radius:50%;
background:#d7d3d4 !important;
content: "" !important;
margin-right: 0.6em !important;
}

.post_content p {
font-size: 1rem !important;
font-weight: 400 ;
line-height: 1.6;
}

/* ヘッダーの高さ分、コンテンツを下に押し下げる設定 */
@media (min-width: 960px) {
    /* PC表示時：サイドバーやメインコンテンツの重なりを防ぐ */
    .l-mainContent {
        margin: 40px 0;  ヘッダーの高さに合わせて調整してください */
    }
}

@media (max-width: 959px) {
    /* スマホ表示時 */
    .l-mainContent {
      /*  margin-top: 60px;  スマホ用ヘッダーの高さ */
    }
}