@charset "UTF-8";

/*
Theme Name: Hamanadeshiko Theme
Author: きさらぎこうし
Description: 自作テーマ
Version: 1.0
*/

/****************************************************
/* 全ての要素でサイズ計算を正確にする */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ブラウザ固有の余白をリセットし、フォントサイズを固定する */
html, body {
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: 100%; /* iOS等での勝手な文字拡大を防止 */
    font-size: 16px; /* 標準16px */
}

/* 画像の基本設定 */
img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}
/****************************************************
/* --- Normalize Essentials (フォント・表示の安定化) --- */

/* 1. フォーム要素に body のフォントを強制的に継承させる */
button,
input,
optgroup,
select,
textarea {
    font-family: inherit; /* 親（body）のフォントを引き継ぐ */
    font-size: 100%;     /* ブラウザ独自のサイズ設定をリセット */
    line-height: 1.15;   /* 行間のバラつきを修正 */
    margin: 0;           /* 余計な余白を排除 */
}

/* 2. 太字の解釈をブラウザ間で統一する */
b,
strong {
    font-weight: bolder;
}

/* 3. 等幅フォント（ソースコード等）のサイズが小さくなるバグを修正 */
code,
kbd,
samp,
pre {
    font-family: monospace, monospace;
    font-size: 1em;
}

/* 4. ボタンや入力欄の見た目をモダンブラウザで揃える */
button,
input {
    overflow: visible;
}

button,
select {
    text-transform: none;
}

/* 5. iOS Safari でのボタンのデフォルトスタイルを解除 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}
/****************************************************
/* 念のため、content-wrapper の横幅も指定します */
.content-wrapper {
    display: flex;
    flex-wrap: nowrap !important;    /* 改行させない */
    justify-content: space-between;  /* 両端に寄せる */
    align-items: flex-start;
    width: 100%;
    max-width: 1100px;              /* 全体の幅を固定 */
    margin: 0 auto;                 /* 中央寄せ */
}

:root {
    --primary-color: #2c3e50;       /* メインの色（濃紺系） */
    --accent-color: #e74c3c;        /* アクセント（撫子色・紅系） */
    --text-color: #333333;          /* 基本文字色 */
    --bg-color: #ffffff;            /* 背景色 */
    --footer-bg: #1a1a1a;           /* フッター背景 */
}
/****************************************************
/* メインコンテンツ：横幅850px */
.main-content {
    width: 71%;       /* 781px / 1100px ≒ 71% */
    flex-shrink: 1;   /* 画面が狭い時は縮むことを許可する */
}
.widget-area {
    width: 25%;       /* 275px / 1100px = 25% */
    max-width: 300px;
    flex-shrink: 1;   /* 画面が狭い時は縮むことを許可する */
}

/* レスポンシブ対応：画面幅が狭い時は縦に並べる */
@media (max-width: 1000px) {
    .content-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .main-content, .widget-area {
        width: 100%;
        max-width: 800px; /* モバイル時はメインの幅に合わせる */
        padding: 0 20px;
    }
}
/****************************************************
/* フォント（種類、色、行間 */
/* Webフォントの定義（セルフホスティング） --- */

/* 500 (Medium) を標準として定義 */
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/noto-sans-500.woff2') format('woff2');
}

/*700 (Bold) を太字として定義 */
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/noto-sans-700.woff2') format('woff2');
}

body {
    font-family: 'Noto Sans JP', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-weight: 500; /* 500をサイト全体の標準にする */
    color: var(--text-color);
    background-color: var(--bg-color);
    line-height: 1.6;       /* ブラウザ毎の行間誤差を安定させる(計算誤差が目立ちにくくなる) */
    letter-spacing: 0.02em; /* ブラウザ毎の行間誤差を安定させる(ほんの少しだけ文字間を広げて描画エンジンの差を減らす) */
    -webkit-font-smoothing: antialiased;  /* Chrome, Safari, Edge用 */
    -moz-osx-font-smoothing: grayscale;   /* Firefox用 */
    text-rendering: optimizeLegibility;   /* 文字の読みやすさを優先 */
}

/* 見出しなどは 700 を使用 */
h1, h2, h3, b, strong {
    font-weight: 700;
}
/****************************************************
/* Sticky Footerの実装(コンテンツが少なくてもフッターを下に固定) */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

#content {
    flex: 1; /* ここが伸びることでフッターを押し下げる */
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}
/****************************************************
/* ヘッダー装飾 */
.site-branding h1 a {
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    font-weight: 300;
    letter-spacing: 0.1em;
}

/* ヘッダー周りのリセット（上部の隙間を0にする） */
body {
    margin: 0 20px;
    padding: 0;
}

.site-header {
    margin: 0;
    padding: 0;
    line-height: 0;           /* 画像の下に出る数ピクセルの隙間を防止 */
}

/* ヘッダー画像のレスポンシブ対応 */
.header-image {
    display: block;
    width: 100%;             /* 横幅いっぱいに広げる */
    max-width: 1100px;       /* 最大幅を1100pxに制限  */
    height: auto;            /* 横幅に合わせて高さを自動調整 */
    margin: 0 auto;          /* 中央寄せ */
}
/****************************************************
/* フッター装飾 */
.site-footer {
    background: var(--footer-bg);
    color: #999;
    min-height: auto;
    padding: 15px 0;
    display: flex;
    flex-direction: column;   /* 縦に並べる */
    align-items: center;      /* 左右中央 */
    justify-content: center;  /* 上下中央 */
    text-align: center;       /* 子要素のテキストをすべて中央揃えにする */
}

/* フッター配置 */
.footer-links {
    display: flex;
    justify-content: center;
    gap: 30px;
    list-style: none;
    padding: 0;
    margin: 0 0 5px 0;
}

.footer-links a {
    color: #ccc;
    font-size: 0.9rem;
}

.footer-links a:hover {
    color: var(--accent-color);
}

.copyright {
    font-size: 14px;
    margin: 0;            /* ブラウザ標準の上下マージンを0にして隙間を消す */
    line-height: 1;       /* 行間の影響を最小限にする */
}
/****************************************************
/* ライトボックス装飾 */
#custom-lightbox {
    background: rgba(0,0,0,0.9);
}
#custom-lightbox img {
    border: 3px solid #fff;
    box-shadow: 0 0 25px rgba(0,0,0,0.5);
}

/* ライトボックス固定配置 */
#custom-lightbox {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    display: none; justify-content: center; align-items: center;
    z-index: 10000; cursor: zoom-out;
}
#custom-lightbox img { max-width: 90%; max-height: 90%; }
/****************************************************
/* イラスト一覧のグリッド（レスポンシブ対応） */
.illustration-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);  /* 横4列に並べる。画面が狭くなったら自動で調整 */
    gap: 15px;                              /* 上下左右15px of gap */
    margin-top: 0;
}

.art-item {
    display: flex;
    flex-direction: column;
    align-items: center; /* 画像と文字を中央に寄せる */
}

.art-item a {
    display: block;
    width: 100%;
    max-width: 200px; 
    aspect-ratio: 1 / 1.1; /* 正方形を維持 */
    margin-bottom: 2px;
    border: 2px solid #f0f0f0;
    background: #fdfdfd;
    overflow: hidden;
}

.art-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;  /* 縦横比を維持したまま 200x200 の枠に収める */
}

.art-title {
    font-size: 1rem;
    font-weight: bold;
    height: 2.8em;
    line-height: 1.4;
    text-align: center; /* 題名を中央揃えにする */
    margin: 0;
}

/* --- レスポンシブ設定 --- */

/* 1. 1000px以下（サイドバーが下に移動するタイミング）：3列 */
@media (max-width: 1000px) {
    .illustration-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 2. 768px以下（タブレットなど）：2列 */
@media (max-width: 768px) {
    .illustration-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .art-item a {
        max-width: 160px; /* 少し小さくして余白を確保 */
    }
}

/* 3. 480px以下（スマホ）：1列 */
@media (max-width: 480px) {
    .illustration-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .art-item a {
        max-width: 200px; /* 1列なので元のサイズに戻す */
    }
}
/****************************************************
/* イラストページのメイン画像 */
.single-illust img {
    max-width: 100%; /* 親要素（1100px）を超えない */
    height: auto;    /* 比率を維持して表示 */
    display: block;
    margin: 0 auto;  /* 中央寄せ */
}
/****************************************************
/* 右下に「上のページへ」ボタンを付ける */
.back-to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    background: #333;
    color: #fff;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 5px;
    z-index: 100; /* イラストの上に重なるように */
    opacity: 0.8;
}

.back-to-top:hover {
    opacity: 1;
}
/****************************************************
/* サイドバー：最近のイラスト 5件 */
.widget_recent_illusts {
    padding: 0px;
}

.widget_recent_illusts .side-item {
    display: flex;
    flex-direction: column;   /* 設計図通り、画像と題名を縦に並べる */
    align-items: center;      /* 中央寄せ */
    padding: 15px;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s;

    /* --- 霞グラデーションの実装 --- */
    border-bottom: 1px solid;
    border-image: linear-gradient(to right, transparent, #ccc 20%, #ccc 80%, transparent) 1;
}

.widget_recent_illusts .side-item:last-child {
    border-bottom: none;
}

.widget_recent_illusts .side-item:hover {
    opacity: 0.7;
}

.widget_recent_illusts .side-thumb {
    width: 120px;
    height: 120px; /* 正方形の枠を固定 */
    flex-shrink: 0;
    margin: 0px;
    border: 1px solid #eee;
    background: #fdfdfd;
    overflow: hidden;
}

.widget_recent_illusts .side-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;      /* メイン一覧と同じく、枠内に比率を維持して収める */
}

.widget_recent_illusts .side-title {
    font-size: 0.9rem;
    font-weight: bold;
    line-height: 1.4;
    text-align: center;
    width: 100%;
}

/* ウィジェットの箱 */
.widget {
    background: #fff;
    margin-bottom: 15px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    border: 1px solid #ddd;
    overflow: hidden;
}

/* ウィジェットの見出し(水色の見出しと赤い棒) */
.widget-title {
    background-color: #3a87a1; 
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: bold;
    margin: 0;
    padding: 10px 15px;
    border-left: 6px solid var(--accent-color);
    display: block;
}

/* Contents (サイドバーメニュー：ボタン形式) */
.widget_links ul.menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget_links ul.menu li {
    margin-bottom: 1px; /* 項目間の微細な分割線代わりの隙間 */
}

.widget_links ul.menu li a {
    display: block;
    background-color: #333333; /* 通常時の濃いグレー背景 */
    color: #cccccc;
    padding: 10px 15px;
    border-left: 5px solid #ffaa88; /* 左側のアクセント棒 */
    text-decoration: none;
    font-weight: bold;
    transition: all 0.1s;
}

.widget_links ul.menu li a:hover {
    background-color: #ffaa88; /* ホバー時の明るいオレンジ背景 */
    color: #000000;           /* ホバー時のテキスト色 */
    text-decoration: none;
}

/* 検索フォームの調整 */
.search-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding: 15px;
}

.search-field {
    flex-grow: 1;
    min-width: 0;
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
}
.search-submit {
    flex-shrink: 0;       /* ボタンが潰れないようにする */
    padding: 5px 15px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    cursor: pointer;
    white-space: nowrap; /* ボタン内の文字が改行されるのを防を防ぐ */
    align-self: flex-start;
}
/****************************************************
/* アーカイブページ（一覧）のタイトル装飾 */

.archive-title {
    background-color: #444444;
    color: #ffffff;
    padding: 10px 20px !important;
    line-height: 1.2 !important;
    font-size: 1.4rem !important;
    margin-top: 0;
    margin-bottom: 20px;
    border-left: 9px solid var(--accent-color); /* サイドバーと揃えて「赤い棒」を追加（黒背景に赤だと膨張色で太く見えるため調整) */
}

/* 説明文の装飾 */
.archive-description {
    font-size: 1rem;
    line-height: 1.8;
    color: #555;
    padding-left: 5px;       /* 少し右に寄せて読みやすく */
    margin-top: 0;
    margin-bottom: 10px;
}
/****************************************************
/* 記事題名 <br> タグ制御 */

/* 1. 改行を有効にする箇所（一覧のグリッド、サイドバー、前後の作品ナビ） */
.art-title br,
.side-title br,
.nav-post-title br {
    display: block !important;  /* 確実に改行させる */
    content: "";                 /* 余計な文字を出さない */
    margin-top: 2px;             /* 行間の微調整 */
}

/* 2. 改行を無効にする箇所（パンくずリスト、個別ページのメイン題名、Last Update） */
.breadcrumb-list br,
.art-main-title br,
.update-title br {
    display: none !important;   /* タグを消して、前後の文字を繋げる */
}

/* 念のためWordPress標準の entry-title にも対応 */
.single-color .entry-title br,
.single-mono .entry-title br {
    display: none !important;
}
/****************************************************
/* 記事題名 <br> タグ制御 */

.pagination {
     margin-top: 0;
     margin-bottom: 30px;
     text-align: center;
}

.nav-links {
     display: flex;
     justify-content: center;
     gap: 8px;
     margin-top: 0;
     margin-bottom: 15px;
     flex-wrap: wrap;
}

.page-numbers {
     display: inline-block;
     padding: 6px 12px;
     border: 1px solid #3a87a1;
     color: #3a87a1;
     text-decoration: none;
     font-size: 0.9rem; transition: 0.2s;
}

.current {
     background-color: #3a87a1;
     color: #fff;
     border-color: #3a87a1;
}

.page-numbers:hover {
     background-color: #f0f8fa;
     text-decoration: none;
}
/****************************************************
/* パンくずリスト */

.breadcrumbs {
    padding: 20px 0 0 0;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* リスト全体の横並び設定 */
.breadcrumb-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap; /* 長いタイトル時に改行を許可 */
    gap: 0; /* 余白は疑似要素側で調整 */
}

/* 各項目の設定 */
.breadcrumb-list li {
    display: flex;
    align-items: center;
    color: #666; /* 現在地の文字色 */
}

/* リンクの設定 */
.breadcrumb-list li a {
    text-decoration: none;
    color: #3a87a1; /* サイト全体のプライマリカラー（青系） */
    transition: color 0.2s ease;
}

.breadcrumb-list li a:hover {
    color: #a25271; /* ホバー時は濱撫子のピンク系に */
    text-decoration: underline;
}

/* 区切り文字「＞」の自動挿入 */
.breadcrumb-list li:not(:last-child)::after {
    content: ">";
    margin: 0 10px; /* 左右に約1文字分のスペース */
    color: #666;
    font-size: 0.8rem;
    font-weight: bold;
    font-family: serif; /* 矢印を少し上品な印象に */
}

/* 現在地（最後の項目）の強調設定 */
.breadcrumb-list li:last-child {
    font-weight: bold;
    color: #444;
}

/****************************************************
/* イラスト個別ページ (single-color) */

.art-detail-container {
    background: #fff;
    padding: 0;
    border-radius: 4px;
    margin-bottom: 40px;
}

.art-date {
    display: block;
    font-size: 1rem;
    color: #888;
    text-align: right;
    margin: 0;
}

/* 3. 作品題名 */
.art-main-title {
    background-color: #a25271;
    color: #fff;
    padding: 10px 20px !important;
    line-height: 1.2 !important;
    font-size: 1.4rem !important;
    margin-top: 0;
    margin-bottom: 25px;
    border-left: 10px solid #7d3c56;
}

/* メインイラスト */
.art-main-visual {
    text-align: center;
    margin-bottom: 0px;
}

.art-main-visual img {
    max-width: 100%;
    height: auto;
    border: 1px solid #ddd;
    pointer-events: none; /* クリック不可を念押し */
}

.art-description {
    line-height: 1.8;
    color: #333;
    margin-bottom: 10px;
}

.art-description p {
    margin: 0;
}

.art-divider {
    border: none;
    border-top: 1px solid #ddd;
    margin-top: 0;
    margin-bottom: 40px;
}

/* 6. 前後の作品ナビゲーション */
.art-navigation .nav-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: 0 auto;
    margin-bottom: 30px;
    max-width: 75%;
}

.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.nav-item.next { align-items: flex-end; text-align: right; }

.nav-label {
    font-size: 0.85rem;
    font-weight: bold;
    color: #a25271;
    margin-bottom: 10px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #3a87a1;
}

.nav-item.next .nav-link { flex-direction: row-reverse; }

.nav-thumb {
    width: 100px; /* sidebar.php と同じサイズ */
    height: 100px;
    border: 1px solid #a25271;
    flex-shrink: 0;
    overflow: hidden;
    background: #f9f9f9;
}

.nav-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.nav-post-title {
    font-size: 0.9rem;
    font-weight: bold;
    line-height: 1.4;
}

/* 7. ページ最上部へ戻るボタン：ボタン形式 */
.page-top-container {
    text-align: right;
    margin-top: 0;
    margin-bottom: 50px;
}

.btn-scroll-top {
    display: inline-block;
    padding: 10px 25px;
    background-color: #3a87a1; /* サイト全体の統一感に合わせた青系 */
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.85rem;
    border-radius: 50px; /* 丸みのあるボタン形式 */
    transition: all 0.3s ease;
    box-shadow: 0 4px 0 #2a6173; /* 立体的なボタン */
}

.btn-scroll-top:hover {
    background-color: #4da4c2;
    transform: translateY(2px);
    box-shadow: 0 2px 0 #2a6173;
}

/****************************************************
/* 検索結果ページ (search.php) のスタイル */

/* 検索結果のリスト全体 */
.search-results-list {
    margin-top: 0;
    margin-bottom: 20px;
}

/* 各記事のブロック */
.search-item {
    margin-bottom: 30px; /* 記事同士の間隔 */
    background: none;    /* 背景色なし */
    border: none;        /* 枠線なし */
    padding: 0;          /* 余白なし */
}

/* 記事タイトル */
.search-item-title {
    font-size: 1.2rem;   /* 画像に合わせて少し調整 */
    margin: 0 0 5px 0;
    border: none;        /* 左側の棒を削除（画像に無いため） */
    padding: 0;
    line-height: 1.4;
}

.search-item-title a {
    text-decoration: none;
    color: #4b3b8c; /* 画像のような紫系（またはテーマのリンク色） */
    font-weight: bold;
    transition: color 0.3s;
}

.search-item-title a:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

/* タイトル内の改行タグを念のためCSSでも無効化 */
.search-item-title br {
    display: none !important;
}

/* 抜粋文＋日付 */
.search-item-excerpt {
    font-size: 0.95rem;
    color: #333;
    line-height: 1.6;
    margin-bottom: 5px;
}

/* 日付部分のスタイル */
.search-date {
    color: #666; /* 本文より少し薄い色 */
    font-size: 0.9rem;
    margin-left: 5px;
}

/* 続きを読むボタン（テキストリンク風） */
.btn-readmore {
    display: inline-block;
    color: #4b3b8c; /* タイトルと同じ色味に */
    font-size: 0.85rem;
    text-decoration: none;
    font-weight: bold;
    margin-top: 0px;
}

.btn-readmore:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

/* 記事ごとの区切り線 */
.search-divider {
    border: none;
    border-top: 1px dashed #bbb;
    margin-top: 0;
    margin-bottom: 10px;
}

/* 検索結果ゼロの時の表示 */
.no-results-container {
    padding: 40px 20px;
    text-align: center;
    background: #f9f9f9; /* ここはメッセージを目立たせるため背景ありのまま */
    border: 1px solid #eee;
    margin-top: 0;
    margin-bottom: 20px;
}

.no-results-container p {
    font-weight: bold;
    color: #555;
    margin-bottom: 20px;
}

.retry-search-form {
    max-width: 400px;
    margin: 0 auto;
}

/****************************************************
/* お問い合わせ (page-contact.php) のスタイル */
/* ハニーポット（スパム対策）用の隠しフィールド */
/* フォーム全体のコンテナ */
.contact-form {
    margin-top: 0;
    margin-bottom: 30px;
}

/* 各入力項目のまとまり */
.form-item {
    margin-bottom: 25px;
    display: flex;
    flex-direction: column; /* ラベルと入力欄を上下に並べる */
    align-items: flex-start; /* 左寄せ */
}

/* ラベルのデザイン */
.form-item label {
    font-weight: 700; /* Noto Sans JP の太字を適用 */
    margin-bottom: 8px;
    color: var(--primary-color); /* テーマのメインカラーを使用 */
}

/* 入力ボックス（お名前・メール）およびテキストエリア */
.form-item input[type="text"],
.form-item input[type="email"],
.form-item textarea {
    width: 100%;       /* 親要素の幅いっぱいに広げる */
    max-width: 600px;  /* 広がりすぎないよう制限（お好みで調整） */
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fdfdfd;
    font-size: 1rem;
    line-height: 1.5;
}

/* テキストエリアの高さ固定 */
.form-item textarea {
    min-height: 200px;
    resize: vertical; /* 縦方向のみサイズ変更可能に */
}

/* ボタン（確認画面へ・送信・戻る） */
.contact-form .btn,
.contact-form .btn-back {
    display: inline-block;
    padding: 12px 40px;
    font-weight: 700;
    border: none;
    border-radius: 50px; /* サイト最上部へ戻るボタンと統一 */
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
}

/* 「確認画面へ」「送信する」ボタン */
.contact-form .btn {
    background-color: #3a87a1; /* サイト共通の青 */
    color: #fff;
    box-shadow: 0 4px 0 #2a6173;
}

/* 「修正する（戻る）」ボタン */
.contact-form .btn-back {
    background-color: #999;
    color: #fff;
    box-shadow: 0 4px 0 #777;
    margin-right: 15px;
}

.contact-form .btn:hover,
.contact-form .btn-back:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 rgba(0,0,0,0.2);
}

/* ハニーポット（スパム対策）用の隠しフィールド */
.form-item-fax {
    position: absolute;
    left: -9999px;
    opacity: 0;
    width: 0;
    height: 0;
    overflow: hidden;
}

/****************************************************
/* カラーイラスト・モノクロイラスト用タグ表示css */

.pixiv-style-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px; /* タグがくっつかないように隙間を開ける */
    margin: 0;
    margin-bottom: 30px;
}

.pixiv-style-tags a {
    display: inline-block;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    color: #3a87a1; /* サイト共通のメインカラーに変更 */
    border: 1px solid #3a87a1;
    padding: 4px 12px;
    border-radius: 4px;
    transition: all 0.3s ease;
    background-color: #fff;
}

/* PHPから消した '#' を、CSSの擬似要素で追加します */
.pixiv-style-tags a::before {
    content: "#";
    margin-right: 3px;
    font-weight: bold;
    opacity: 0.6;
}

/* ホバー時のデザイン */
.pixiv-style-tags a:hover {
    background-color: #3a87a1;
    color: #fff;
    transform: translateY(-1px);
}

/****************************************************
/* index,php用 */
.carousel-container {
    width: 100%;
    max-width: 78%;
    margin: 0 auto;
    margin-bottom: 30px;
    aspect-ratio: 3 / 2;
    background-color: #2b2b2b;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.slide {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    height: 90%; 
    aspect-ratio: 10 / 12;
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    opacity: 0;
    z-index: 1;
}

.slide.active { transform: translate(-50%, -50%) scale(1); z-index: 10; opacity: 1; }
.slide.prev { left: 15%; transform: translate(-50%, -50%) scale(0.8); z-index: 5; opacity: 1; filter: blur(2px) brightness(0.6); }
.slide.next { left: 85%; transform: translate(-50%, -50%) scale(0.8); z-index: 5; opacity: 1; filter: blur(2px) brightness(0.6); }
.slide.hidden { opacity: 0; pointer-events: none; }

.slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block;
}

.slide-info {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: #fff; text-align: center;
}

/* 中央（アクティブ）画像以外はリンクをポインターにしない */
.slide:not(.active) a {
    cursor: pointer;
}

.nav-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,0.5); color: white; border: none; padding: 15px;
    cursor: pointer; z-index: 20;
}
.btn-left { left: 10px; }
.btn-right { right: 10px; }
.dots-container {
    position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 10px; z-index: 20;
}
.dot { width: 12px; height: 12px; background: rgba(255,255,255,0.4); border-radius: 50%; cursor: pointer; }
.dot.active { background: #fff; }

/* --- 共通デザイン --- */
.top-welcome-section { text-align: center; padding: 20px 0; }
.top-welcome-title { font-size: 2.2rem; margin: 10px 0 -10px; }
.top-welcome-text { font-size: 1.1rem; line-height: 1.8; }

.top-section-header, .top-section-header-simple {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 2px solid #3a87a1;
}

.top-section-title { font-size: 1.5rem; color: #3a87a1; margin: 0; padding-bottom: 5px; border: none; }
.view-gallery { font-size: 0.9rem; text-decoration: none; color: #666; padding-bottom: 5px; }

.top-artwork-grid { display: flex; gap: 15px; justify-content: flex-start; margin-bottom: 40px; }
.top-art-thumb { width: 120px; height: 120px; border: 1px solid #ddd; background: #fff; overflow: hidden; display: block; }
.top-art-thumb img { width: 100%; height: 100%; object-fit: contain; }

.top-update-list { list-style: none; padding: 0; margin-bottom: 50px; }
.top-update-list li { padding: 10px 0; border-bottom: 1px dashed #ccc; display: flex; align-items: center; gap: 15px; }
.update-date { color: #888; font-size: 0.9rem; min-width: 95px; }
.update-label { padding: 2px 10px; font-size: 0.75rem; color: #fff; border-radius: 3px; width: 80px; text-align: center; display: inline-block; }
.label-illust { background: #3a87a1; }
.label-blog { background: #e67e22; }
.update-title { text-decoration: none; color: #333; font-weight: bold; flex: 1; }

.author-card { display: flex; align-items: center; gap: 30px; background: #eff2f3; padding: 30px; border-radius: 15px; }
.author-icon { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; background: #ddd; flex-shrink: 0; }
.author-icon img { width: 100%; height: 100%; object-fit: cover; }
.author-name { font-size: 1.4rem; margin: 0 0 10px 0; border:none; color: #333; }

@media (max-width: 768px) {
    .top-artwork-grid { flex-wrap: wrap; justify-content: center; }
    .author-card { flex-direction: column; text-align: center; }
}