/*
Theme Name: UUUU Theme
Author: AI Assistant
Description: 左メニューのコンタクト色変更＆ロゴクリック範囲修正
Version: 12.98
*/

/* =========================================
   1. リセット & 基本設定
   ========================================= */
* { box-sizing: border-box; }

body {
    font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
    color: #333;
    background: #fff;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 0;
}

a { text-decoration: none; color: inherit; transition: opacity 0.3s; }
ul { list-style: none; padding: 0; margin: 0; }
img, video { max-width: 100%; height: auto; vertical-align: bottom; display: block; }

/* アイコン反転設定 */
.work-info-box .icon-svg, .action-btn img, .hover-tag-icon { 
    filter: brightness(0) invert(1); 
}

/* =========================================
   2. 文字詰め設定
   ========================================= */
.sidebar-description,
.info-title, .info-desc, .news-single-title, .news-content, .news-title,
.news-card-title, .news-excerpt, .page-title, .page-content h1,
.page-content h2, .page-content h3, .page-content p, .page-content li {
    font-feature-settings: "palt"; 
    letter-spacing: 0.05em;        
    text-align: justify;
    text-justify: inter-character;
}

/* =========================================
   3. レイアウト構造
   ========================================= */
.container-full { width: 100%; margin: 0; padding: 0; }
.site-main { width: 100%; padding: 0; overflow-x: hidden; }

/* PC・タブレット用レイアウト（768px以上から適用） */
@media screen and (min-width: 768px) {
    .site-header { 
        position: fixed; top: 0; left: 0; width: 280px; height: 100vh; 
        overflow-y: auto; background: #fff; 
        padding: 30px 40px 30px; 
        z-index: 1000; border-bottom: none;
        display: flex; flex-direction: column;
    }
    .header-inner { display: flex; flex-direction: column; flex-grow: 1; }
    .site-main { margin-left: 280px; width: calc(100% - 280px); min-height: 100vh; }
}

/* =========================================
   4. 左サイドバー要素
   ========================================= */
.site-logo { margin-bottom: 30px; }

/* ロゴのリンク範囲を画像サイズぴったりにする */
.site-logo a {
    display: inline-block; 
    transition: opacity 0.3s;
}
.site-logo a:hover {
    opacity: 0.7; /* ホバー時の反応 */
}
.site-logo img { width: 80px; height: auto; }


.sidebar-description { font-size: 13px; color: #000; font-weight: 500; line-height: 1.8; margin-bottom: 0; }
.sidebar-description p { margin-top: 0; margin-bottom: 20px; }

/* お問い合わせリンク：通常は黒、ホバーで黄色 */
.contact-link { 
    display: flex; align-items: center; gap: 8px; 
    font-weight: 700; font-size: 13px; 
    color: #000; /* 説明文と同じ色に変更 */
    margin-bottom: 40px; 
    transition: all 0.3s; 
}
.contact-link:hover { 
    color: #d4a347; /* ホバーで黄色 */
    opacity: 1; 
}

.contact-icon { 
    display: block; width: 14px; height: 14px; 
    background-color: #000; /* 通常は黒 */
    opacity: 0.4;
    -webkit-mask-image: url('images/mail.svg'); mask-image: url('images/mail.svg');
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center;
    transition: background-color 0.3s, opacity 0.3s;
}
.contact-link:hover .contact-icon {
    background-color: #d4a347; /* ホバーで黄色 */
    opacity: 1;
}

/* --- メインメニュー --- */
.main-navigation ul { margin-top: 0; margin-bottom: 40px; }
.main-navigation li { position: relative; padding-left: 24px; margin-bottom: 8px; } 
.main-navigation li:last-child { margin-bottom: 0; } 

.main-navigation a { font-size: 13px; color: #333; letter-spacing: 0.5px; font-weight: 500; display: block; padding: 0; transition: color 0.3s; }
.main-navigation a:hover { color: #d4a347; } 

.main-navigation .current-menu-item > a, 
.main-navigation .current_page_item > a { color: #d4a347; font-weight: 700; }

.main-navigation a::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 14px; height: 14px; background-color: #d4a347;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center;
    opacity: 0; transition: opacity 0.3s;
}

.main-navigation .current-menu-item > a::before, 
.main-navigation .current_page_item > a::before,
.main-navigation a:hover::before { opacity: 1; }

body.single-post .main-navigation li:nth-child(2) > a { color: #d4a347; font-weight: 700; }
body.single-post .main-navigation li:nth-child(2) > a::before { opacity: 1; }

.main-navigation li:nth-child(1) > a::before { -webkit-mask-image: url('images/home.svg'); mask-image: url('images/home.svg'); }
.main-navigation li:nth-child(2) > a::before { -webkit-mask-image: url('images/news.svg'); mask-image: url('images/news.svg'); }
.main-navigation li:nth-child(3) > a::before { -webkit-mask-image: url('images/profile.svg'); mask-image: url('images/profile.svg'); }
.main-navigation li:nth-child(4) > a::before { -webkit-mask-image: url('images/mail.svg'); mask-image: url('images/mail.svg'); }
.main-navigation li:nth-child(5) > a::before { -webkit-mask-image: url('images/shop.svg'); mask-image: url('images/shop.svg'); }

.main-navigation li:nth-child(5) > a { display: inline-flex !important; align-items: center; }
.main-navigation li:nth-child(5) > a::after {
    content: ""; display: inline-block; width: 11px; height: 11px; margin-left: 6px;
    background-color: #333; 
    -webkit-mask-image: url('images/link.svg'); mask-image: url('images/link.svg');
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center;
    transition: background-color 0.3s;
}
.main-navigation li:nth-child(5) > a:hover::after { background-color: #d4a347; }


/* --- タグリスト --- */
.sidebar-tags { margin-top: 0; }
.tags-list li { position: relative; padding-left: 24px; margin-bottom: 8px; }
.tags-list a { font-size: 13px; color: #333; letter-spacing: 0.5px; font-weight: 500; display: block; transition: color 0.3s; }
.tags-list a:hover { color: #d4a347; } 
.tags-list li.is-checked a { color: #d4a347; font-weight: 700; }

.tags-list a::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 14px; height: 14px; background-color: #d4a347;
    -webkit-mask-image: url('images/tag.svg'); mask-image: url('images/tag.svg');
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center;
    opacity: 0; transition: opacity 0.3s;
}
.tags-list li.is-checked a::before,
.tags-list a:hover::before { opacity: 1; }


/* --- SNSウィジェット --- */
.sidebar-sns { margin-top: auto; padding-top: 40px; display: flex; flex-wrap: wrap; gap: 15px; align-items: center; }
.sns-icon {
    display: block; width: 16px; height: 16px; background-color: #333;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-position: center; mask-position: center;
    transition: background-color 0.3s ease;
}
.sns-icon:hover { background-color: #d4a347; } 
.sns-apple     { -webkit-mask-image: url('images/apple.svg'); mask-image: url('images/apple.svg'); }
.sns-amazon    { -webkit-mask-image: url('images/amazon.svg'); mask-image: url('images/amazon.svg'); }
.sns-facebook  { -webkit-mask-image: url('images/facebook.svg'); mask-image: url('images/facebook.svg'); }
.sns-instagram { -webkit-mask-image: url('images/instagram.svg'); mask-image: url('images/instagram.svg'); }
.sns-x         { -webkit-mask-image: url('images/x.svg'); mask-image: url('images/x.svg'); }


/* =========================================
   5. Masonryグリッド一覧 & アニメーション
   ========================================= */
.works-grid, .news-grid { width: 100%; position: relative; }

/* WORKS一覧 */
.tile-item { display: block; float: left; padding: 0; margin: 0; overflow: hidden; width: 50%; }
@media screen and (min-width: 1025px) { .tile-item { width: 33.333%; } }
@media screen and (min-width: 1200px) { .tile-item { width: 25%; } }
@media screen and (min-width: 1600px) { .tile-item { width: 20%; } }

/* NEWS一覧 */
.news-item { display: block; float: left; padding: 0; margin: 0; overflow: hidden; width: 50%; }
@media screen and (min-width: 1200px) { .news-item { width: 33.333%; } }
@media screen and (min-width: 1600px) { .news-item { width: 25%; } }

.tile-link, .news-link { display: block; width: 100%; height: 100%; }

.tile-thumb, .news-thumb {
    position: relative; width: 100%; padding-top: 75%; background-color: #f9f9f9; overflow: hidden;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.news-thumb { padding-top: 0; aspect-ratio: 4 / 3; }

.tile-item:hover .tile-thumb, .news-link:hover .news-thumb { transform: scale(1.03); }

.tile-img-bg, .news-thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; object-fit: cover; }
.no-image-box { width: 100%; height: 100%; background-color: #999; }

.work-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8); opacity: 0; transition: opacity 0.3s;
    display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 20px; color: #fff; z-index: 2; 
}
.tile-item:hover .work-overlay { opacity: 1; }

.grid-hover-title { font-size: 16px; font-weight: 700; margin-bottom: 15px; line-height: 1.4; letter-spacing: 1px; }

.grid-hover-cat { 
    font-size: 11px; color: #ccc; text-transform: uppercase; letter-spacing: 1px; 
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; align-items: center; 
}
.hover-tag-line { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; white-space: nowrap; }
.hover-tag-icon { width: 12px !important; height: 12px !important; object-fit: contain; margin: 0 !important; display: inline-block !important; vertical-align: middle; }

/* ページネーション */
.posts-pagination { clear: both; padding: 80px 0 60px; text-align: center; width: 100%; }
.posts-pagination .nav-links { display: flex; justify-content: center; align-items: center; gap: 12px; }
.posts-pagination .screen-reader-text { display: none; }
.posts-pagination .page-numbers { 
    display: inline-flex; justify-content: center; align-items: center;
    width: 28px; height: 28px; font-size: 11px; color: #ccc; font-weight: 700; 
    letter-spacing: 0; line-height: 1; padding-top: 1px; 
    text-decoration: none; transition: all 0.3s; border: none; background: transparent;
}
.posts-pagination .current { background-color: #000; color: #fff; border-radius: 50%; }
.posts-pagination a.page-numbers:hover { color: #d4a347; }
.posts-pagination .nav-arrow {
    display: block; width: 14px; height: 14px; background-color: #ccc;
    -webkit-mask-image: url('images/arrow.svg'); mask-image: url('images/arrow.svg');
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center;
    transition: background-color 0.3s;
}
.posts-pagination .nav-arrow.arrow-left { transform: scaleX(-1); }
.posts-pagination a.page-numbers:hover .nav-arrow { background-color: #d4a347; }

/* ニュース一覧デザイン */
.news-body { height: 250px; padding: 20px 25px; display: flex; flex-direction: column; justify-content: flex-start; }
.news-item:nth-child(odd) .news-body { background-color: #F2F2F2; }
.news-item:nth-child(even) .news-body { background-color: #fff; }

.news-title { 
    font-size: 21px; font-weight: 700; margin-bottom: 10px; line-height: 1.4; 
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex-shrink: 0; 
}
.news-excerpt { 
    font-size: 15px; color: #333; line-height: 1.6; margin-bottom: 10px; 
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; 
}
.news-meta { 
    display: flex; align-items: center; gap: 15px; font-size: 12px; color: #aaa; font-weight: 700; 
    margin-top: auto; flex-shrink: 0; 
}
.meta-icon { width: 12px; height: auto; display: inline-block; vertical-align: middle; margin-right: 4px; opacity: 0.4; filter: none; }


/* =========================================
   6. 実績 詳細ページ
   ========================================= */
.single-work-wrapper { position: relative; width: 100%; min-height: 100vh; background: #fff; }

.work-info-box { 
    position: absolute; top: 0; left: 0; width: 640px; 
    background-color: rgba(50, 50, 50, 0.9); color: #fff; padding: 50px; z-index: 50; 
    clip-path: inset(0 0 0 0); opacity: 1; 
    transition: clip-path 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s ease 0.2s; 
}
.work-info-box.closed { clip-path: inset(0 100% 100% 0); opacity: 0; pointer-events: none; transition: clip-path 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s ease; }

.info-title { font-size: 25px; font-weight: 700; margin-bottom: 15px; line-height: 1.6; }
.info-cats { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #ccc; margin-bottom: 30px; text-transform: uppercase; font-weight: 700; }
.info-cats .icon-svg { height: 1em; width: auto; }

.info-desc { font-size: 16px; line-height: 1.6; margin-bottom: 30px; color: #eee; }

.info-link a { 
    display: inline-flex; align-items: center; gap: 8px; color: #fff; 
    font-weight: 700; font-size: 13px; border-bottom: none; transition: opacity 0.3s ease;
}
.info-link a:hover { opacity: 0.7; }
.info-link .icon-svg { display: block; width: 14px; height: auto; filter: brightness(0) invert(1); }

.action-btn { width: 60px; height: 60px; background: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: opacity 0.3s; }
.action-btn img { width: 30px; height: auto; transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); }

.open-btn { 
    position: fixed; top: 0; left: 280px; z-index: 40; 
    background-color: rgba(50, 50, 50, 0.9); width: 60px; height: 60px; 
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.open-btn.visible { opacity: 1; pointer-events: auto; }
.open-btn img { transform: rotate(180deg); }
.open-btn:hover { background-color: #000; }

.close-btn { position: absolute; bottom: 15px; right: 15px; }
.close-btn:hover { opacity: 0.7; }

.work-media-content { width: 100%; }
.work-media-content figure, .work-media-content img, .work-media-content video { width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; display: block; object-fit: cover; }
.work-media-content video { background: #000; }


/* =========================================
   7. お知らせ詳細 (Single News)
   ========================================= */
body.single-post .site-main { background-color: #f9f9f9; }

.news-container { max-width: 1000px; margin: 0; padding: 110px 120px 100px 40px; }

.news-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 50px; position: relative; }
.news-header-left { flex: 1; max-width: 100%; }
.news-single-title { font-size: 25px; font-weight: 700; line-height: 1.6; color: #000; }

@media screen and (min-width: 1025px) {
    .news-header-right { position: fixed; top: 280px; right: 30px; z-index: 9999; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 20px; }
}

.news-meta-info { display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: #999; font-weight: 500; }
.news-single-date { display: block; }
.news-single-cat { text-transform: uppercase; }

.news-share { display: flex; justify-content: flex-end; gap: 15px; }
.share-icon { 
    display: block; width: 16px; height: 16px; background-color: #999; cursor: pointer;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; transition: background-color 0.3s; 
}
.share-icon:hover { background-color: #d4a347; } 
.share-facebook { -webkit-mask-image: url('images/facebook.svg'); mask-image: url('images/facebook.svg'); }
.share-x        { -webkit-mask-image: url('images/x.svg'); mask-image: url('images/x.svg'); }

.news-content { margin-bottom: 60px; }
.news-content img { max-width: 100%; width: 100%; height: auto; margin: 20px 0; }

.page-content { font-size: 16px; line-height: 1.8; color: #000; }
.page-content a { color: #d4a347; text-decoration: none; font-weight: 700; transition: opacity 0.3s; }
.page-content a:hover { opacity: 0.7; }
.page-content .u-fz-m { font-size: 20px; }
.page-content .u-fz-l { font-size: 24px; }
.page-content .u-fz-xl { font-size: 32px; }

.news-footer-nav { margin-top: 80px; padding-top: 40px; border-top: 1px solid #eee; }
.post-nav-container { display: flex; justify-content: center; align-items: center; gap: 1em; }
.nav-home-link { font-size: 11px; color: #ccc; font-weight: 700; letter-spacing: 1px; text-decoration: none; transition: color 0.3s; }
.nav-home-link:hover { color: #d4a347; }
.nav-arrow { display: block; width: 16px; height: 16px; background-color: #ccc; -webkit-mask-image: url('images/arrow.svg'); mask-image: url('images/arrow.svg'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; transition: background-color 0.3s; }
.arrow-left { transform: scaleX(-1); }
.nav-arrow:hover { background-color: #d4a347; }
.arrow-placeholder { visibility: hidden; pointer-events: none; }


/* =========================================
   8. 固定ページ 
   ========================================= */
.page-wrapper { background-color: #f9f9f9; width: 100%; min-height: 100vh; }
.page-container { max-width: 1000px; margin: 0; padding: 110px 40px 100px; }
.page-title { font-size: 25px; font-weight: 700; margin-bottom: 50px; letter-spacing: 0; text-transform: uppercase; line-height: 1.6; color: #000; }
.page-content h2, .page-content h3, .page-content h4, .page-content strong { font-size: 16px; font-weight: 700; margin-top: 40px; margin-bottom: 15px; }
.page-content h2, .page-content h3, .page-content h4 { display: block; }
.page-content p { margin-bottom: 20px; }
.page-content ul { list-style: none; margin-bottom: 20px; }
.page-content li { position: relative; padding-left: 1em; margin-bottom: 5px; }
.page-content li::before { content: "*"; position: absolute; left: 0; }


/* =========================================
   9. フッター・コピーライト
   ========================================= */
.fixed-copyright { 
    position: static;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    padding: 30px 20px;
    width: 100%;
    box-sizing: border-box;
    font-size: 11px; 
    font-weight: 500; 
    clear: both;
    background: transparent;
}
.fixed-copyright span, .fixed-copyright a { pointer-events: auto; }
.copy-text { color: #000; letter-spacing: 0.5px; }
.policy-pill { 
    color: #000; 
    background-color: transparent;
    text-decoration: none; 
    transition: color 0.3s ease; 
    font-size: 11px; 
    font-weight: 500; 
    padding: 0;
}
.policy-pill:hover { color: #d4a347; }


/* =========================================
   10. タブレット＆スマホ共通（タッチ操作・iPadレイアウト対応）
   ========================================= */
@media screen and (max-width: 1024px) {
    /* ホバー無効化 */
    .tile-item:hover .tile-thumb, .news-link:hover .news-thumb { transform: none !important; }
    .work-overlay { display: none !important; }

    /* ★ここを変更：クリックアイコンのサイズを2/3に縮小 */
    .tile-thumb::after {
        content: "" !important; position: absolute !important; bottom: 0 !important; right: 0 !important;
        width: 32px !important; height: 32px !important; background-color: #fff !important; /* 48px * (2/3) = 32px */
        -webkit-mask-image: url('images/click.svg') !important; mask-image: url('images/click.svg') !important;
        -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important;
        -webkit-mask-size: 21px !important; mask-size: 21px !important; /* 32px * (2/3) = 21.33px */
        -webkit-mask-position: center !important; mask-position: center !important;
        z-index: 11 !important; pointer-events: none !important; filter: none !important; 
    }

    /* iPadのWORKS詳細画面を縦積みに */
    .work-info-box { 
        position: relative !important; width: 100% !important; max-width: 1000px !important; margin: 0 !important;
        background-color: transparent !important; color: #000 !important; padding: 110px 40px 60px !important; 
        clip-path: none !important; opacity: 1 !important; visibility: visible !important; 
    }
    .work-info-box .info-title, .work-info-box .info-desc { color: #000 !important; }
    .work-info-box .info-cats { color: #999 !important; }
    .work-info-box .info-link a { color: #d4a347 !important; }
    .work-info-box .info-link .icon-svg { filter: none !important; opacity: 0.5 !important; }
    .close-btn, .open-btn { display: none !important; }

    /* NEWS一覧を1列に */
    .news-item { width: 100% !important; float: none !important; }

    /* お知らせ詳細の余白とヘッダー */
    .news-container { padding: 110px 40px 100px !important; }
    .news-header { display: block !important; margin-bottom: 30px !important; }
    .news-header-left { max-width: 100% !important; margin-bottom: 15px !important; }
    .news-header-right { position: static !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 15px !important; text-align: left !important; }
    .news-meta-info { flex-direction: row !important; gap: 15px !important; align-items: center !important; }
    .news-share { justify-content: flex-start !important; }
}


/* =========================================
   11. コピーライトの特殊配置 (PC / iPad一覧画面)
   ========================================= */
/* iPadの横書きページで、左メニューと被らないように余白をあける */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    body.single .fixed-copyright,
    body.page:not(.home):not(.blog):not(.archive) .fixed-copyright {
        margin-left: 280px; 
        width: auto; /* width: 100% を解除してはみ出しを防ぐ */
        padding: 40px;
    }
}

/* iPad(一覧ページ) は 縦書き・右下固定に上書き */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    body.home .fixed-copyright,
    body.blog .fixed-copyright,
    body.archive .fixed-copyright {
        position: fixed; bottom: 30px; right: 30px; width: auto; padding: 0; margin-left: 0;
        writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; text-orientation: sideways; 
        z-index: 9000; pointer-events: none; gap: 12px; display: flex; flex-direction: row;
    }
    body.home .policy-pill,
    body.blog .policy-pill,
    body.archive .policy-pill {
        display: inline-block; padding: 8px 3px; 
        background-color: rgba(0, 0, 0, 0.1); color: #fff; 
        border-radius: 20px; font-size: 10px; font-weight: 700; letter-spacing: 1px;
    }
    body.home .policy-pill:hover,
    body.blog .policy-pill:hover,
    body.archive .policy-pill:hover { background-color: #ffd900; color: #fff; }
}

/* PC版 (1025px以上) は 全ページ 縦書き・右下固定に上書き */
@media screen and (min-width: 1025px) {
    .fixed-copyright { 
        position: fixed; bottom: 30px; right: 30px; width: auto; padding: 0; margin-left: 0;
        writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; text-orientation: sideways; 
        z-index: 9000; pointer-events: none; gap: 12px; display: flex; flex-direction: row;
    }
    .policy-pill { 
        display: inline-block; padding: 8px 3px; 
        background-color: rgba(0, 0, 0, 0.1); color: #fff; 
        border-radius: 20px; font-size: 10px; font-weight: 700; letter-spacing: 1px;
    }
    .policy-pill:hover { background-color: #ffd900; color: #fff; }
}


/* =========================================
   12. スマホ専用（767px以下）
   ========================================= */
@media screen and (max-width: 767px) {
    /* レイアウトとヘッダー */
    .site-header { position: relative !important; width: 100% !important; height: auto !important; padding: 40px 20px 20px !important; }
    .site-main { margin-left: 0 !important; width: 100% !important; }
    
    .site-logo { margin: 0 0 20px 0 !important; display: flex; justify-content: flex-start !important; }
    .sidebar-description { text-align: left; margin-bottom: 30px !important; }

    /* 非表示にする項目 */
    .contact-link, .sidebar-tags, .sidebar-sns, .main-navigation li:nth-child(5) { display: none !important; }

    /* メニュー */
    .main-navigation ul { display: flex !important; flex-wrap: wrap !important; justify-content: flex-start !important; gap: 10px 20px !important; margin-bottom: 20px !important; }
    .main-navigation li { padding-left: 0 !important; margin-bottom: 0 !important; }
    .main-navigation a { display: flex !important; align-items: center !important; font-size: 13px !important; font-weight: 700 !important; }
    .main-navigation a::before { position: static !important; transform: none !important; margin-right: 5px !important; display: none !important; }
    .main-navigation .current-menu-item > a::before, .main-navigation .current_page_item > a::before { display: block !important; }
    body.single-post .main-navigation li:nth-child(2) > a::before { display: block !important; }

    /* 一覧・詳細余白 */
    .tile-item { width: 100% !important; float: none !important; }
    .work-info-box { padding: 40px 20px 40px !important; }
    .news-body { height: auto !important; min-height: 200px !important; padding: 8px 20px 32px !important; }
    .news-container, .page-container { padding: 20px 20px 60px !important; }
}


/* =========================================
   13. ダークモード対応 (OS設定自動追従)
   ========================================= */
@media (prefers-color-scheme: dark) {
    body { background-color: #121212; color: #e0e0e0; }
    
    /* 左サイドバー */
    .site-header { background-color: #1a1a1a; }
    .sidebar-description { color: #e0e0e0; }
    
    /* コンタクトリンク：ダークモード対応 */
    .contact-link { color: #e0e0e0; }
    .contact-link:hover { color: #d4a347; }
    .contact-icon { background-color: #e0e0e0; opacity: 1; }
    .contact-link:hover .contact-icon { background-color: #d4a347; opacity: 1; }

    .main-navigation a, .tags-list a { color: #e0e0e0; }
    .main-navigation li:nth-child(5) > a::after { background-color: #e0e0e0; }
    .main-navigation li:nth-child(5) > a:hover::after { background-color: #d4a347; }
    .sns-icon { background-color: #e0e0e0; }
    .sns-icon:hover { background-color: #d4a347; }
    
    /* グリッド */
    .tile-thumb, .news-thumb { background-color: #222; }
    .news-item:nth-child(odd) .news-body { background-color: #222; }
    .news-item:nth-child(even) .news-body { background-color: #1a1a1a; }
    .news-title { color: #fff; }
    .news-excerpt { color: #ccc; }
    
    /* ページネーション */
    .posts-pagination .page-numbers { color: #666; }
    .posts-pagination .current { background-color: #e0e0e0; color: #121212; }
    .posts-pagination a.page-numbers:hover { color: #d4a347; }
    .posts-pagination .nav-arrow { background-color: #666; }
    .posts-pagination a.page-numbers:hover .nav-arrow { background-color: #d4a347; }
    
    /* リンク・アイコン */
    .info-link a { color: #d4a347; } 
    .info-link .icon-svg { filter: brightness(0) invert(1); }
    
    /* 背景色 */
    body.single-post .site-main, .page-wrapper, .single-work-wrapper { background-color: #121212; }
    .news-single-title, .page-title { color: #fff; }
    .page-content { color: #e0e0e0; }
    .news-footer-nav { border-top-color: #333; }
    
    /* フォーム */
    .wpcf7 label, .wpcf7-form-control-label, label { color: #fff; }
    
    /* コピーライト (ダークモード) */
    .copy-text { color: #e0e0e0; }
    .policy-pill { color: #e0e0e0; background: transparent; }
    .policy-pill:hover { color: #d4a347; background: transparent; }

    /* 縦書き配置時 (PC・iPad一覧) の色オーバーライド */
    @media screen and (min-width: 1025px) {
        .policy-pill { background-color: rgba(255, 255, 255, 0.1); color: #fff; }
        .policy-pill:hover { background-color: #ffd900; color: #121212; }
    }
    @media screen and (min-width: 768px) and (max-width: 1024px) {
        body.home .policy-pill, body.blog .policy-pill, body.archive .policy-pill { 
            background-color: rgba(255, 255, 255, 0.1); color: #fff; 
        }
        body.home .policy-pill:hover, body.blog .policy-pill:hover, body.archive .policy-pill:hover { 
            background-color: #ffd900; color: #121212; 
        }
    }
    
    /* スマホ・iPad時 (ダークモード) の背景色 */
    @media screen and (max-width: 1024px) {
        .work-info-box { background-color: transparent !important; color: #e0e0e0 !important; }
        .work-info-box .info-title, .work-info-box .info-desc { color: #e0e0e0 !important; }
        .work-info-box .info-cats { color: #ccc !important; }
        .work-info-box .info-link .icon-svg { filter: brightness(0) invert(1) !important; opacity: 1 !important; }
    }
}