/*
Theme Name: Tea Lens
Author: Aze
Description: A sophisticated theme for photography and tea lovers.
Version: 1.1
*/

/* =========================================
   0. CSS Variables (定義)
   ※ これがないと var() が動きません
   ========================================= */
:root {
    --color-bg: #3E1515;
    --color-bg-light: #4A1C1C;
    --color-accent: #D4AF37;
    --color-text: #F2F2F2;
    --color-text-sub: #C0C0C0;
    --font-serif: "Cormorant Garamond", "Noto Serif JP", serif;
    --font-sans: "Lato", "Noto Sans JP", sans-serif;
    
    /* ▼ ここで余白のサイズを定義しています */
    --spacing-section: 120px;
    --spacing-content: 60px;
}

/* =========================================
   1. Reset & Base
   ========================================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    line-height: 1.8;
    letter-spacing: 0.05em;
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
}

a:hover {
    color: var(--color-accent);
    opacity: 0.8;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul {
    list-style: none;
}

/* =========================================
   2. Typography & Utilities
   ========================================= */
h1,
h2,
h3,
h4 {
    font-family: var(--font-serif);
    font-weight: 400;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    color: var(--color-accent);
    margin-bottom: var(--spacing-content);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.section-title span {
    display: block;
    font-size: 1rem;
    font-family: var(--font-sans);
    color: var(--color-text-sub);
    margin-top: 10px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.btn-gold {
    display: inline-block;
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
    padding: 12px 30px;
    border-radius: 50px;
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.btn-gold:hover {
    background: var(--color-accent);
    color: var(--color-bg);
}

/* =========================================
   3. Header & Footer
   ========================================= */
.l-header {
    /* 固定表示の設定 */
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;

    /* デザイン設定（初期状態：大きめ） */
    padding: 30px 50px;
    /* 余白を広げて太めに */
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: transparent;
    /*最初は透明 */
    transition: all 0.4s ease;
    /* 滑らかに変化 */
}

/* スクロールした時のヘッダー（背景色ON） */
.l-header.is-scrolled {
    background-color: rgba(62, 21, 21, 0.95);
    /* 背景色（少し透過） */
    padding: 20px 50px;
    /* スクロール時は少しだけ高さを抑えて邪魔にならないように */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}


.l-header__nav ul {
    display: flex;
    gap: 40px;
    /* メニュー間隔も少し広めに */
}

.l-header__nav a {
    font-size: 1rem;
    /* 文字サイズアップ */
    letter-spacing: 0.1em;
    font-weight: bold;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .l-header {
        flex-direction: column;
        padding: 20px;
        background-color: rgba(62, 21, 21, 0.95);
        /* スマホは常時背景ありで見やすく */
    }

    .l-header.is-scrolled {
        padding: 15px 20px;
    }
}

/* =========================================
   Logo (SVG) Settings
   ========================================= */
.l-header__logo a {
    display: block;
    width: 70px; /* ★ここでロゴの幅を調整 */
    height: auto;
    transition: 0.3s;
}

.l-header__logo svg {
    width: 100%;
    height: auto;
    display: block;
    vertical-align: middle;
}

.l-header__logo a:hover {
    opacity: 0.8;
}

/* スマホでは少し小さくする */
@media (max-width: 768px) {
    .l-header__logo a {
        width: 50px; /* スマホ時の幅 */
    }
}

.l-footer {
    padding: 40px 0;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.9rem;
}

/* =========================================
   4. Top Page Sections
   ========================================= */
/* Hero */
.p-hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: radial-gradient(circle at center, rgba(62, 21, 21, 0.6), var(--color-bg)), url('images/hero-bg.jpeg');
    background-size: cover;
    background-position: center;
    text-align: center;
}

.p-hero__content h2 {
    font-size: 4rem;
    color: var(--color-accent);
    margin-bottom: 20px;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.p-hero__content p {
    font-size: 1.2rem;
}

/* About (Home) */

.p-home-about {
    padding: var(--spacing-section) 15px !important;
}

/* =========================================
   スマホ用 強制余白調整
   ========================================= */
@media (max-width: 768px) {
    /* Aboutセクションの余白確保 */
    .p-home-about {
        /* 上下に60px、左右に20pxを強制適用 */
        padding: 60px 20px !important;
    }

    /* ついでに他のセクションも狭すぎないか確認用 */
    .p-home-works,
    .p-instagram {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }
    
    /* コンテナの横幅余白も確保 */
    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

.p-home-about__inner {
    display: flex;
    align-items: center;
    gap: 60px;
}

.p-home-about__img {
    flex: 1;
    border: 1px solid var(--color-accent);
    padding: 10px;
}

.p-home-about__text {
    flex: 1;
}

.p-home-about__text h3 {
    font-size: 2rem;
    margin-bottom: 20px;
}

/* Works (Home & Shared Card) */
.p-home-works {
    padding: var(--spacing-section) 0;
    background-color: var(--color-bg-light);
}

.c-work-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.c-work-card {
    border: 1px solid rgba(212, 175, 55, 0.3);
    transition: 0.3s;
}

.c-work-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-accent);
}

.c-work-card__thumb {
    height: 200px;
    overflow: hidden;
}

.c-work-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* カード内サムネイルはContain */
    background-color: #2a0e0e;
    /* 余白が出た場合の背景色 */
}

.c-work-card__body {
    padding: 20px;
}

.c-work-card__title {
    font-size: 1.2rem;
    color: var(--color-accent);
    margin-bottom: 10px;
}

.c-work-card__cats {
    font-size: 0.8rem;
    color: var(--color-text-sub);
}

/* Instagram */
.p-instagram {
    padding: var(--spacing-section) 0;
    text-align: center;
}

#sb_instagram {
    width: 100% !important;
    padding: 0 !important;
}

/* =========================================
   5. Works Archive (List Page)
   ========================================= */
.l-work-archive {
    padding-top: 150px;
    padding-bottom: 100px;
    display: flex;
    gap: 60px;
}

.l-work-sidebar {
    width: 250px;
    flex-shrink: 0;
}

.l-work-main {
    flex: 1;
}

/* Filter Box */
.p-filter-box {
    margin-bottom: 40px;
}

.p-filter-box__title {
    font-size: 1.2rem;
    border-bottom: 1px solid var(--color-accent);
    padding-bottom: 10px;
    margin-bottom: 20px;
    color: var(--color-accent);
    font-family: var(--font-serif);
}

.p-filter-list li {
    margin-bottom: 10px;
}

.p-filter-list a {
    display: flex;
    justify-content: space-between;
    color: var(--color-text-sub);
    transition: 0.3s;
}

.p-filter-list a:hover,
.p-filter-list a.is-active {
    color: var(--color-accent);
    padding-left: 5px;
}

.p-filter-list .count {
    font-size: 0.8em;
    opacity: 0.7;
}

/* Tag Cloud */
.p-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tag-chip {
    font-size: 0.85rem;
    border: 1px solid var(--color-text-sub);
    padding: 5px 15px;
    border-radius: 20px;
    color: var(--color-text-sub);
}

.tag-chip:hover,
.tag-chip.is-active {
    background: var(--color-accent);
    color: var(--color-bg);
    border-color: var(--color-accent);
}

.c-work-grid--2col {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}


/* =========================================
   6. Work Single (Detail Page)
   ========================================= */
.p-work-single__header {
    text-align: center;
    padding: 60px 0;
    /* スマホで余白が大きすぎないよう調整 */
    padding: clamp(40px, 8vw, 60px) 0; 
}

.p-work-single__title {
    /* ★変更: スマホ(1.8rem)～PC(3rem)の間で滑らかに変化 */
    font-size: clamp(1.8rem, 6vw, 3rem);
    color: var(--color-accent);
    line-height: 1.4;
    
    /* ★変更: 1文字改行を防ぐ最新のCSS */
    text-wrap: balance; 
    word-break: auto-phrase; /* Chromeなど対応ブラウザで文節改行 */
    padding: 0 10px; /* スマホで端がくっつかないように */
}

/* Visual (Thumbnail Area) */
.p-work-visual {
    margin-bottom: 60px;
    display: flex;
    justify-content: center;
}

.p-work-visual__inner {
    border: 1px solid var(--color-accent);
    padding: 10px;
    max-width: 800px;
    width: 100%;
}

.p-work-visual__inner img {
    width: 100%;
    height: auto;
    display: block;
}

/* Meta Data Table */
.p-work-single__meta {
    background: var(--color-bg-light);
    padding: 30px;
    margin: 40px 0;
    border-left: 3px solid var(--color-accent);
}

.p-work-single__meta dl {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.p-work-single__meta dt {
    font-weight: bold;
    color: var(--color-accent);
    width: 100%;
    max-width: 150px;
    /* ★変更: 改行禁則処理 */
    line-height: 1.6;
}

.p-work-single__meta dd {
    width: calc(100% - 170px);
    margin-bottom: 10px;
    /* ★変更: URLなどがはみ出さないように折り返す */
    word-break: break-word; 
    overflow-wrap: break-word;
}

/* ★追加: スマホ時のメタ情報レイアウト調整 */
@media (max-width: 768px) {
    .p-work-single__meta {
        padding: 20px;
    }
    
    .p-work-single__meta dl {
        display: block; /* 縦積みに変更 */
    }

    .p-work-single__meta dt {
        max-width: 100%;
        margin-bottom: 5px;
        font-size: 0.9rem;
        opacity: 0.8;
    }

    .p-work-single__meta dd {
        width: 100%; /* 横幅いっぱいに使う */
        margin-bottom: 20px;
        padding-left: 0;
        font-size: 1rem;
    }
}

/* Gallery Slider */
.p-work-gallery {
    padding: 20px 0;
    border-top: 1px solid rgba(212, 175, 55, 0.2);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.gallerySwiper {
    width: 100%;
    padding-bottom: 40px !important;
}

.c-gallery-slide {
    height: 250px;
    border: 1px solid var(--color-accent);
    background-color: rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.c-gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.5s ease;
}

.c-gallery-slide:hover img {
    transform: scale(1.05);
}

/* Swiper Overrides */
.swiper-button-next,
.swiper-button-prev {
    color: var(--color-accent) !important;
    transform: scale(0.7);
}

.swiper-pagination-bullet {
    background: var(--color-text-sub) !important;
    opacity: 0.5;
}

.swiper-pagination-bullet-active {
    background: var(--color-accent) !important;
    opacity: 1;
}

/* =========================================
   Work Single Content (本文エリアの装飾)
   ========================================= */

/* 1. 本文全体のレイアウト */
.entry-content {
    max-width: 800px;
    margin: 0 auto 80px;
    font-size: 1.05rem;
    line-height: 2;
    /* ★変更: 日本語の禁則処理を厳密にする */
    line-break: strict;
    word-wrap: break-word;
}

/* 2. 見出し (H2) */
.entry-content h2 {
    /* ★変更: 可変サイズ化 */
    font-size: clamp(1.5rem, 5vw, 1.8rem);
    color: var(--color-accent);
    border-bottom: 1px solid var(--color-accent);
    padding-bottom: 10px;
    margin-top: 60px;
    margin-bottom: 30px;
    letter-spacing: 0.1em;
    line-height: 1.4;
    
    /* ★変更: 見出しのバランス調整 */
    text-wrap: balance;
}

/* 3. 見出し (H3) */
.entry-content h3 {
    /* ★変更: 可変サイズ化 */
    font-size: clamp(1.2rem, 4vw, 1.4rem);
    margin-top: 40px;
    margin-bottom: 20px;
    border-left: 4px solid var(--color-accent);
    padding-left: 15px;
    color: var(--color-text);
    line-height: 1.5;
    
    /* ★変更: 見出しのバランス調整 */
    text-wrap: balance;
}

/* 4. 見出し (H4) */
.entry-content h4 {
    font-size: 1.2rem;
    margin-top: 30px;
    margin-bottom: 15px;
    font-weight: bold;
    text-wrap: balance;
}

/* 5. 段落 (p) */
.entry-content p {
    margin-bottom: 30px;
    text-align: justify;
    /* ★変更: 段落内の読みやすさ調整（Chrome等の最新ブラウザ用） */
    text-wrap: pretty; 
}

/* 6. リスト (ul/ol) */
.entry-content ul,
.entry-content ol {
    margin-bottom: 30px;
    padding-left: 0;
    list-style: none;
}

.entry-content li {
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 10px;
}

.entry-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 6px;
    height: 6px;
    background-color: var(--color-accent);
    border-radius: 50%;
}

.entry-content ol {
    counter-reset: item;
}
.entry-content ol li {
    padding-left: 2em;
}
.entry-content ol li::before {
    content: counter(item) ".";
    counter-increment: item;
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-weight: bold;
    font-family: var(--font-serif);
}

/* 7. 太字 (strong/b) */
.entry-content strong,
.entry-content b {
    color: var(--color-accent);
    font-weight: 700;
    background: rgba(212, 175, 55, 0.1);
    padding: 0 4px;
    /* ★変更: 太字部分で改行がおかしくならないように */
    display: inline-block; 
}

/* 8. 引用 (blockquote) */
.entry-content blockquote {
    border: 1px solid var(--color-accent);
    padding: 20px;
    margin: 40px 0;
    font-style: italic;
    color: var(--color-text-sub);
    position: relative;
}

/* 9. 本文内の画像 */
.entry-content img {
    margin: 40px auto;
    border: 1px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* 10. スマホ対応 */
@media (max-width: 768px) {
    /* 記事エリア全体の左右余白を確保 */
    .entry-content {
        font-size: 1rem;
        padding: 0 10px; 
    }
    
    /* 画像のサイズ調整 */
    .entry-content img {
        margin: 30px auto;
        max-width: 100%;
        height: auto;
    }
}

/* =========================================
   Journal List (Grid Layout)
   ========================================= */
.c-journal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 40px;
    margin-bottom: 60px;
}

.c-journal-card {
    background-color: transparent;
    transition: transform 0.3s ease;
}

.c-journal-card:hover {
    transform: translateY(-5px);
}

.c-journal-card__link {
    display: block;
    height: 100%;
}

/* サムネイル周り */
.c-journal-card__thumb {
    position: relative;
    height: 220px;
    overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.c-journal-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.c-journal-card:hover .c-journal-card__thumb img {
    transform: scale(1.1);
}

.c-journal-card__noimg {
    width: 100%;
    height: 100%;
    background: var(--color-bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-sub);
}

/* カテゴリーラベル */
.c-journal-card__cat {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--color-bg);
    color: var(--color-accent);
    font-size: 0.75rem;
    padding: 4px 12px;
    border: 1px solid var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* テキスト周り */
.c-journal-card__body {
    padding: 0 5px;
}

.c-journal-card__date {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-sub);
    font-family: var(--font-serif);
    margin-bottom: 5px;
}

.c-journal-card__title {
    font-size: 1.4rem;
    margin-bottom: 10px;
    line-height: 1.4;
    color: var(--color-text);
    font-family: var(--font-serif);
}

.c-journal-card__excerpt {
    font-size: 0.95rem;
    color: #ccc;
    line-height: 1.6;
    margin-bottom: 15px;
    /* 3行で省略する設定 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.c-journal-card__more {
    font-size: 0.9rem;
    color: var(--color-accent);
    font-weight: bold;
    border-bottom: 1px solid transparent;
    transition: 0.3s;
}

.c-journal-card:hover .c-journal-card__more {
    border-bottom-color: var(--color-accent);
}


/* =========================================
   7. Journal Single (Detail)
   ========================================= */
.p-journal-single {
    max-width: 840px;
    margin: 0 auto;
}

.p-journal-single__header {
    text-align: center;
    margin-bottom: 50px;
}

.p-journal-single__meta {
    font-family: var(--font-serif);
    color: var(--color-text-sub);
    margin-bottom: 15px;
    font-size: 1rem;
    display: flex;
    justify-content: center;
    gap: 20px;
    align-items: center;
}

.p-journal-single__cat a {
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.p-journal-single__title {
    font-size: 2.5rem;
    line-height: 1.3;
}

.p-journal-single__thumb {
    margin-bottom: 60px;
    border: 1px solid var(--color-accent);
    padding: 10px;
}

/* 本文スタイル */
.p-journal-single__body {
    font-size: 1.1rem;
    line-height: 2;
}

.p-journal-single__body h2 {
    font-size: 1.8rem;
    color: var(--color-accent);
    margin: 60px 0 30px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
}

.p-journal-single__body h3 {
    font-size: 1.4rem;
    margin: 40px 0 20px;
    padding-left: 15px;
    border-left: 3px solid var(--color-accent);
}

.p-journal-single__body p {
    margin-bottom: 30px;
}

.p-journal-single__body img {
    margin: 40px auto;
}

/* フッターエリア */
.p-journal-single__footer {
    margin-top: 80px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.p-journal-single__tags a {
    display: inline-block;
    font-size: 0.85rem;
    color: var(--color-text-sub);
    border: 1px solid var(--color-text-sub);
    padding: 4px 12px;
    border-radius: 20px;
    margin-right: 5px;
    margin-bottom: 5px;
}

.p-journal-single__tags a:hover {
    color: var(--color-bg);
    background: var(--color-accent);
    border-color: var(--color-accent);
}

/* 前後の記事リンク */
.p-post-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    gap: 20px;
}

.p-post-nav a {
    flex: 1;
    border: 1px solid rgba(212, 175, 55, 0.3);
    padding: 20px;
    font-size: 0.9rem;
    color: var(--color-text-sub);
}

.p-post-nav a:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.p-post-nav__prev {
    text-align: left;
}

.p-post-nav__next {
    text-align: right;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .p-journal-single__title {
        font-size: 1.8rem;
    }

    .p-post-nav {
        flex-direction: column;
    }

    .c-journal-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   8. About Page (Timeline)
   ========================================= */
.p-about-history {
    max-width: 800px;
    margin: 80px auto;
    position: relative;
}

.p-about-history__title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 40px;
    color: var(--color-accent);
    font-family: var(--font-serif);
}

.p-about-history__list {
    position: relative;
    padding-left: 30px;
    border-left: 2px solid rgba(212, 175, 55, 0.3);
}

.p-about-history__item {
    margin-bottom: 40px;
    position: relative;
}

.p-about-history__item::before {
    content: '';
    position: absolute;
    left: -36px;
    top: 5px;
    width: 10px;
    height: 10px;
    background: var(--color-accent);
    border-radius: 50%;
    box-shadow: 0 0 0 5px var(--color-bg);
}

.p-about-history__year {
    font-weight: bold;
    color: var(--color-accent);
    font-size: 1.1rem;
    margin-bottom: 5px;
    font-family: var(--font-serif);
}

.p-about-history__content {
    line-height: 1.8;
    color: var(--color-text);
}

/* =========================================
   About Page - Skill Grid
   ========================================= */

/* グリッドレイアウト（PCは2列、スマホは1列） */
.p-skill-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列 */
    gap: 30px; /* カード間の余白 */
    max-width: 900px;
    margin: 0 auto;
}

/* カードのデザイン */
.p-skill-card {
    border: 1px solid rgba(212, 175, 55, 0.3); /* 薄いゴールド枠 */
    padding: 25px;
    background: rgba(255, 255, 255, 0.02); /* うっすら背景色 */
    transition: transform 0.3s ease;
}

/* ツール名 */
.p-skill-card__name {
    color: var(--color-accent);
    font-size: 1.2rem;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* 下線 */
    font-family: var(--font-serif); /* テーマの明朝体を使用 */
    display: flex;
    align-items: center;
}

/* ツール名の前のアイコン装飾（菱形◆） */
.p-skill-card__name::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: var(--color-accent);
    transform: rotate(45deg); /* 菱形にする */
    margin-right: 10px;
}

/* 詳細テキスト */
.p-skill-card__desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text-sub);
}

/* リンク付きカードのスタイル */
a.p-skill-card {
    text-decoration: none; /* 下線を消す */
    color: inherit; /* 文字色を継承 */
    display: block; /* ブロック要素にする */
    cursor: pointer;
}

/* ホバー時の挙動強化 */
a.p-skill-card:hover {
    transform: translateY(-5px); /* 少し浮き上がる */
    background: rgba(212, 175, 55, 0.1); /* 背景色を少し濃く */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* 影をつける */
}

/* スマホ対応 */
@media (max-width: 768px) {
    .p-skill-grid {
        grid-template-columns: 1fr; /* スマホは1列 */
        gap: 20px;
    }
    
    .p-skill-card {
        padding: 20px;
    }
}

/* =========================================
   9. Plugins (Contact Form 7)
   ========================================= */
.wpcf7-form input,
.wpcf7-form textarea {
    width: 100%;
    background: transparent;
    border: 1px solid var(--color-accent);
    color: var(--color-text);
    padding: 10px;
    margin-bottom: 20px;
}

.wpcf7-submit {
    background: var(--color-accent);
    color: var(--color-bg);
    border: none;
    cursor: pointer;
    padding: 15px 40px;
}

/* =========================================
   10. Responsive Global
   ========================================= */
@media (max-width: 900px) {
    .l-work-archive {
        flex-direction: column;
    }

    .l-work-sidebar {
        width: 100%;
        display: flex;
        gap: 40px;
    }

    .p-filter-box {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .l-header {
        flex-direction: column;
        gap: 20px;
        position: relative;
    }

    .p-home-about__inner {
        flex-direction: column;
    }

    .p-hero__content h2 {
        font-size: 2.5rem;
    }

    .p-work-single__meta dl {
        display: block;
    }

    .p-work-single__meta dd {
        width: 100%;
        margin-bottom: 20px;
    }

    .c-blog-item {
        flex-direction: column;
        gap: 20px;
    }

    .c-blog-item__thumb {
        flex: auto;
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
    }
}

@media (max-width: 600px) {
    .l-work-sidebar {
        display: block;
    }
}

/* =========================================
   Page Top Button
   ========================================= */
.c-page-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--color-accent);
    color: var(--color-bg);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 900;
    opacity: 0;
    /* 最初は隠す */
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.c-page-top:hover {
    background: #fff;
    color: var(--color-accent);
}

/* 表示用のクラス */
.c-page-top.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 矢印アイコンのスタイル（CSSで描画） */
.c-page-top::after {
    content: '';
    width: 10px;
    height: 10px;
    border-top: 2px solid currentColor;
    border-left: 2px solid currentColor;
    transform: rotate(45deg);
    margin-top: 4px;
    /* 位置微調整 */
}

/* =========================================
   Standard Page (page.php) & Contact Form
   ========================================= */
.p-page-body {
    max-width: 800px;
    /* フォームが広がりすぎないように制限 */
    margin: 0 auto;
    /* 中央寄せ */
    font-size: 1rem;
}

/* Contact Form 7 の調整 */
.wpcf7 {
    background: #D4AF3722;
    /* フォーム部分だけ少し背景色を濃く */
    padding: 40px;
    border: 1px solid var(--color-accent);
}

/* エラーメッセージ等の調整 */
.wpcf7-not-valid-tip {
    color: #ff6b6b;
    font-size: 0.9em;
}

.wpcf7-response-output {
    border-color: var(--color-accent) !important;
    color: var(--color-text);
}

/* スマホ対応 */
@media (max-width: 768px) {
    .wpcf7 {
        padding: 20px;
    }
}

/* =========================================
   スマホはみ出し・余白不足の解消
   ========================================= */

/* 1. 全体のはみ出しを強制リセット */
html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

/* 2. ヘッダーの修正（ここが最大の原因です） */
@media (max-width: 768px) {
    .l-header {
        /* 横幅を100%に保ちつつ、パディングを適切な％に変更 */
        width: 100%;
        padding: 15px 5% !important; /* 固定pxをやめて％に */
        box-sizing: border-box; /* これではみ出しを防止 */
        position: fixed; /* column（縦並び）で崩れるならfixedを維持 */
        flex-direction: row; /* スマホでもロゴとメニューを横に並べるならこれ */
        flex-wrap: wrap; /* 入り切らない時に自動で折り返す */
    }
    
    .l-header__logo a {
        font-size: 1.4rem; /* スマホではロゴを少し小さく */
    }

    .l-header__nav {
        width: 100%; /* メニューをロゴの下に持ってくる場合 */
        margin-top: 10px;
    }

    .l-header__nav ul {
        gap: 15px; /* メニュー同士の間隔を詰める */
        justify-content: center;
        flex-wrap: wrap; /* メニューが入り切らなくても横に突き抜けない */
    }
}

/* 3. コンテンツエリア（About/Journal/Work）の調整 */
@media (max-width: 768px) {
    /* 共通コンテナの余白 */
    .container {
        padding: 0 15px;
    }

    /* 自己紹介セクション */
    .p-home-about__inner {
        gap: 30px;
    }

    /* 制作実績カードのグリッド */
    .c-work-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 20px;
    }

    /* ヒーローエリアの文字サイズ */
    .p-hero__content h2 {
        font-size: 2.2rem !important;
        padding: 0 10px;
    }
}

/* 4. Instagramプラグイン等の強制収穫 */
#sb_instagram, .wpcf7 {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* =========================================
   Hamburger Menu (Mobile Only)
   ========================================= */

/* 1. ハンバーガーボタンのスタイル */
.c-hamburger {
    display: none; /* PCでは非表示 */
    position: relative;
    z-index: 2000; /* 最前面に配置 */
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.c-hamburger span {
    display: block;
    width: 30px;
    height: 2px;
    background-color: var(--color-text); /* 線の色 */
    margin: 6px auto;
    transition: all 0.3s ease-in-out;
    border-radius: 2px;
}

/* 2. スマホ表示時の設定 (768px以下) */
@media (max-width: 768px) {
    
    /* ボタンを表示 */
    .c-hamburger {
        display: block;
    }

    /* ナビゲーションを全画面メニュー化 */
    .l-header__nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: var(--color-bg); /* 背景色 */
        z-index: 1500;
        
        /* 中身を中央揃えに */
        display: flex;
        align-items: center;
        justify-content: center;
        
        /* 初期状態は隠す */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.4s ease, visibility 0.4s ease;
    }

    /* ナビゲーションのリスト調整 */
    .l-header__nav ul {
        flex-direction: column; /* 縦並び */
        gap: 30px;
        text-align: center;
    }

    .l-header__nav a {
        font-size: 1.2rem !important; /* 文字を大きく */
        color: var(--color-accent);
        font-family: var(--font-serif);
    }

    /* --- メニューが開いた時のスタイル (is-active) --- */
    
    /* メニューを表示 */
    .l-header__nav.is-active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* ハンバーガーボタンのアニメーション（×印になる） */
    .c-hamburger.is-active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
        background-color: var(--color-accent);
    }
    .c-hamburger.is-active span:nth-child(2) {
        opacity: 0;
    }
    .c-hamburger.is-active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
        background-color: var(--color-accent);
    }
}

/* =========================================
   404 Page (Not Found)
   ========================================= */
.p-not-found {
    text-align: center;
    padding: 180px 0 120px; /* ヘッダー分を考慮して上を広く */
    min-height: 60vh; /* コンテンツが少なくても画面中央に来るように */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* アイコン装飾 */
.p-not-found__icon .dashicons {
    font-size: 60px;
    width: 60px;
    height: 60px;
    color: var(--color-accent);
    opacity: 0.5;
    margin-bottom: 20px;
}

/* 404の巨大文字 */
.p-not-found__title {
    font-size: 6rem;
    line-height: 1;
    color: var(--color-accent);
    font-family: var(--font-serif);
    letter-spacing: 0.05em;
    margin-bottom: 10px;
    text-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* サブタイトル (Page Not Found) */
.p-not-found__sub {
    font-size: 1.5rem;
    font-family: var(--font-serif);
    color: var(--color-text);
    margin-bottom: 40px;
    letter-spacing: 0.1em;
}

/* 説明文 */
.p-not-found__text {
    font-size: 1rem;
    color: var(--color-text-sub);
    margin-bottom: 60px;
    line-height: 2;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .p-not-found__title {
        font-size: 4rem;
    }
    .p-not-found__sub {
        font-size: 1.2rem;
    }
}

/* =========================================
   Logo Fix (ロゴ表示の強制修正)
   ========================================= */
.l-header__logo a,
.l-header__logo a:link,
.l-header__logo a:visited,
.l-header__logo a:hover,
.l-header__logo a:active,
.l-header__logo a:focus {
    color: var(--color-text) !important; /* 強制的に白文字にする */
    opacity: 1 !important;               /* 透明化を防ぐ */
    visibility: visible !important;      /* 非表示を防ぐ */
    display: inline-block;               /* 表示崩れを防ぐ */
}

/* =========================================
   改行制御用の設定
   ========================================= */

/* 1. 管理画面で使う「改行禁止タグ」の設定 */
.u-ib {
    display: inline-block; /* 塊として扱う */
    white-space: nowrap;   /* 塊の中では絶対に改行させない */
}

/* 2. PCでの不自然な改行を直す（前回の修正の取り消しと最適化） */
.entry-content p {
    text-wrap: pretty;       /* balanceはやめて、きれいな改行(pretty)にする */
    word-break: normal;      /* 単語の途中で切れるのを防ぐ */
    overflow-wrap: break-word; /* 長いURLなどは折り返す */
    text-align: justify;     /* 両端揃え */
}

/* 見出しはバランス調整のままでOK */
.entry-content h2,
.entry-content h3 {
    text-wrap: balance; 
}

/* =========================================
   Opening Animation (Draw & Fill)
   ========================================= */
.c-opening {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--color-bg); /* ワインレッド背景 */
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.8s ease, visibility 0.8s ease;
	/* ▼▼▼ 追加：JSが死んでも5秒後には強制的に消える保険 ▼▼▼ */
    animation: forceHide 0s linear 5s forwards;
    /* ▲▲▲ 追加終わり ▲▲▲ */
}

.c-opening__inner {
    text-align: center;
    width: 100%;
    padding: 0 20px;
}

/* ロゴのサイズ設定 */
.c-opening__logo {
    width: 240px; /* ★大きくしました (元120px) */
    height: auto;
    margin: 0 auto 20px;
    display: block;
    overflow: visible; /* 線がはみ出ても切れないように */
}

/* SVGアニメーション設定 */
.c-opening__logo path {
    stroke: #D4AF37; /* 線の色（ゴールド） */
    stroke-width: 1px; /* 線の太さ */
    stroke-dasharray: 3000; /* 線の間隔（パスの長さより大きく設定） */
    stroke-dashoffset: 3000; /* 開始位置をずらして隠す */
    fill: url(#gold-gradient); /* 塗り（グラデーション） */
    fill-opacity: 0; /* 最初は塗りを透明に */
    
    /* アニメーション実行 */
    animation: 
        drawStroke 2.5s ease-out forwards, /* 線を描く */
        fillFadeIn 1s ease-out 2.0s forwards; /* 2秒後に塗りを表示 */
}

.c-opening p {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: var(--color-accent);
    letter-spacing: 0.1em;
    opacity: 0;
    animation: textFadeIn 1s ease-out 2.5s forwards; /* ロゴの後に出現 */
}

/* --- キーフレーム定義 --- */

/* 線を描く動き */
@keyframes drawStroke {
    to {
        stroke-dashoffset: 0;
    }
}

/* 中身を塗る動き */
@keyframes fillFadeIn {
    to {
        fill-opacity: 1;
        stroke-width: 0; /* 塗り終わったら線は消す */
    }
}

/* テキスト出現 */
@keyframes textFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 隠すときのクラス */
.c-opening.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@keyframes forceHide {
    to {
        opacity: 0;
        visibility: hidden;
        pointer-events: none; /* クリック等を裏に通す */
    }
}

/* スマホ対応（少し小さく） */
@media (max-width: 768px) {
    .c-opening__logo {
        width: 160px;
    }
}