@charset "UTF-8";
/* =========================================================================
 *  SmartSide Theme - assets/css/style_min.css
 *  -------------------------------------------------------------------------
 *  親テーマのデフォルトスタイル。
 *  子テーマで完全に上書きされる前提で、控えめなデザインに留めています。
 *  ここでは
 *    - リセット / タイポグラフィ
 *    - WordPress コアブロックの最低限のスタイル
 *    - 共通レイアウト（コンテナ、グリッド、サイドバー）
 *    - 親テーマ標準ヘッダー/フッターの見た目
 *  を定義しています。
 * ========================================================================= */

/* -------------------------------------------------------------------------
 *  0. デザイントークン
 *     子テーマの :root で再定義することで色・サイズを上書きできます。
 * ------------------------------------------------------------------------- */
:root {
    --color-primary:        #0b3d91;
    --color-primary-dark:   #082c69;
    --color-primary-light:  #2a6fdc;
    --color-accent:         #ffb700;

    --color-text:           #222;
    --color-text-light:     #555;
    --color-bg:             #fff;
    --color-bg-soft:        #f4f7fb;
    --color-border:         #d8e1ec;

    --font-base:    "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
    --container:    1100px;
    --radius:       8px;
    --shadow:       0 4px 14px rgba(0,0,0,.08);
}

/* -------------------------------------------------------------------------
 *  1. リセット / タイポ
 * ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-base);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; vertical-align: bottom; }

a { color: var(--color-primary-light); text-decoration: none; transition: opacity .2s; }
a:hover { opacity: .75; }

h1, h2, h3, h4, h5, h6 { line-height: 1.4; margin: 1.5em 0 .75em; color: var(--color-primary-dark); }

p { margin: 0 0 1em; }

blockquote {
    margin: 1.5em 0;
    padding: 1em 1.25em;
    background: var(--color-bg-soft);
    border-left: 4px solid var(--color-primary-light);
    color: var(--color-text-light);
}

code, pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: var(--color-bg-soft);
    border-radius: 4px;
}
code { padding: .15em .4em; font-size: .9em; }
pre  { padding: 1em; overflow-x: auto; }

table { width: 100%; border-collapse: collapse; margin: 1em 0; }
th, td { padding: .65rem 1rem; border: 1px solid var(--color-border); text-align: left; }
th { background: var(--color-bg-soft); }

hr { border: 0; border-top: 1px solid var(--color-border); margin: 2em 0; }

.screen-reader-text {
    position: absolute !important;
    clip: rect(1px,1px,1px,1px);
    width: 1px; height: 1px;
    overflow: hidden;
}
.skip-link:focus {
    position: absolute; top: 8px; left: 8px;
    clip: auto !important;
    background: #fff; color: var(--color-primary);
    padding: .5em 1em;
    width: auto; height: auto;
    z-index: 9999;
}

/* -------------------------------------------------------------------------
 *  2. ヘッダー
 * ------------------------------------------------------------------------- */
.site-header {
    background: #fff;
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
    position: sticky;
    top: 0;
    z-index: 100;
}
.site-header__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.site-title { margin: 0; font-size: 1.125rem; font-weight: 700; }
.site-title a { color: var(--color-primary); }
.site-description { margin: 0; font-size: .8rem; color: var(--color-text-light); }

.site-nav__list {
    list-style: none; margin: 0; padding: 0;
    display: flex; gap: 1.25rem;
}
.site-nav__list a {
    color: var(--color-text);
    font-weight: 500;
    padding: .25rem 0;
    border-bottom: 2px solid transparent;
    transition: border-color .2s;
}
.site-nav__list a:hover { border-bottom-color: var(--color-primary); }

.site-nav__toggle {
    display: none;
    width: 40px; height: 40px;
    background: transparent;
    border: 0;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px 6px;
}
.site-nav__toggle span {
    display: block; width: 100%; height: 2px;
    background: var(--color-primary);
}

@media (max-width: 768px) {
    .site-nav { display: none; }
    .site-nav.is-open {
        display: block;
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: #fff;
        border-top: 1px solid var(--color-border);
        padding: 1rem;
    }
    .site-nav.is-open .site-nav__list { flex-direction: column; gap: .5rem; }
    .site-nav__toggle { display: flex; }
}

/* -------------------------------------------------------------------------
 *  3. メインコンテンツレイアウト
 *     - サイドバーがあれば 2 カラム、なければ 1 カラム
 * ------------------------------------------------------------------------- */
.site-main { padding: 2rem 0; }

.site-content {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 1rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 2rem;
}
.site-content__inner { min-width: 0; }   /* grid 内での overflow 防止 */

.no-sidebar .site-content {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 900px) {
    .site-content { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------------------------------
 *  4. パンくず・記事メタ
 * ------------------------------------------------------------------------- */
.breadcrumb { margin: 0 0 1rem; font-size: .85rem; color: var(--color-text-light); }
.breadcrumb__list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: .5rem;
}
.breadcrumb__list li:not(:last-child)::after {
    content: "›"; margin-left: .5rem; color: var(--color-text-light);
}

.entry-meta {
    color: var(--color-text-light);
    font-size: .85rem;
    margin: 0 0 .5em;
}
.entry-meta a { color: inherit; text-decoration: underline; }
.updated-on { color: var(--color-text-light); font-size: .85rem; }

/* -------------------------------------------------------------------------
 *  5. アーカイブ・記事カード
 * ------------------------------------------------------------------------- */
.archive-header { margin: 0 0 1.5rem; padding-bottom: 1rem; border-bottom: 2px solid var(--color-primary); }
.archive-header__title { margin: 0; color: var(--color-primary); }
.archive-header__description { color: var(--color-text-light); margin-top: .5em; }

.archive-list { display: grid; gap: 1rem; }
.archive-list__item {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    transition: border-color .2s, transform .15s;
}
.archive-list__item:hover { border-color: var(--color-primary-light); transform: translateY(-2px); }
.archive-list__link {
    display: flex; gap: 1rem;
    padding: 1rem;
    color: inherit;
}
.archive-list__link:hover { opacity: 1; }
.archive-list__thumb { flex: 0 0 160px; }
.archive-list__thumb img {
    width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 4px;
}
.archive-list__body { flex: 1; min-width: 0; }
.archive-list__title { color: var(--color-primary); margin: 0 0 .5em; font-size: 1.1rem; }
.archive-list__excerpt { color: var(--color-text-light); font-size: .9rem; margin: 0; }
.archive-list__empty { text-align: center; padding: 3rem 1rem; color: var(--color-text-light); }

@media (max-width: 600px) {
    .archive-list__link { flex-direction: column; }
    .archive-list__thumb { flex: 1; }
}

/* -------------------------------------------------------------------------
 *  6. 個別記事・固定ページ
 * ------------------------------------------------------------------------- */
.single-post,
.page-content {
    background: #fff;
    border-radius: var(--radius);
    padding: 1.5rem;
    border: 1px solid var(--color-border);
}
.single-post__header,
.page-content__header { margin-bottom: 1.5rem; }
.single-post__title,
.page-content__title { margin: 0 0 .5em; color: var(--color-primary); font-size: 1.875rem; }
.single-post__thumb,
.page-content__thumb { margin: 0 -1.5rem 1.5rem; }
.single-post__thumb img,
.page-content__thumb img { width: 100%; aspect-ratio: 16/8; object-fit: cover; }
.single-post__content,
.page-content__body { line-height: 1.85; }

.single-post__content h2,
.page-content__body h2 {
    border-left: 5px solid var(--color-primary);
    padding-left: .75rem;
    margin-top: 2.5rem;
}
.single-post__content h3,
.page-content__body h3 { margin-top: 2rem; }
.single-post__content img,
.page-content__body img { border-radius: 4px; margin: 1em 0; }

.single-post__footer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--color-border); }
.tag-links a {
    display: inline-block;
    margin-right: .5em;
    padding: .15em .75em;
    background: var(--color-bg-soft);
    border-radius: 999px;
    font-size: .85rem;
}

/* -------------------------------------------------------------------------
 *  7. ページネーション
 * ------------------------------------------------------------------------- */
.pagination, .nav-links {
    display: flex; gap: .5rem; flex-wrap: wrap;
    justify-content: center;
    margin: 2rem 0;
}
.page-numbers {
    display: inline-flex;
    align-items: center; justify-content: center;
    min-width: 2.25rem; height: 2.25rem;
    padding: 0 .5rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-text);
}
.page-numbers.current {
    background: var(--color-primary); color: #fff; border-color: var(--color-primary);
}
.page-numbers:hover:not(.current) {
    background: var(--color-bg-soft);
    opacity: 1;
}

/* -------------------------------------------------------------------------
 *  8. サイドバー / ウィジェット
 * ------------------------------------------------------------------------- */
.site-sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
.widget {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem;
}
.widget-title {
    margin: 0 0 1rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--color-primary);
    color: var(--color-primary);
    font-size: 1.05rem;
}
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { padding: .35em 0; border-bottom: 1px dashed var(--color-border); }
.widget li:last-child { border-bottom: 0; }

.search-form {
    display: flex; gap: .5rem;
}
.search-form input[type="search"] {
    flex: 1;
    padding: .5rem .75rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
}
.search-form input[type="submit"] {
    padding: .5rem 1rem;
    background: var(--color-primary);
    color: #fff; border: 0; border-radius: 4px;
    cursor: pointer;
}

/* -------------------------------------------------------------------------
 *  9. 404 / ボタン
 * ------------------------------------------------------------------------- */
.not-found { text-align: center; padding: 2rem 1rem; }
.not-found__title { color: var(--color-primary); }
.not-found__lead { color: var(--color-text-light); margin: 1em 0 1.5em; }
.not-found__action { margin-top: 1.5rem; }

.btn {
    display: inline-block;
    padding: .9em 2em;
    border-radius: 999px;
    font-weight: 700;
    text-align: center;
}
.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-dark); opacity: 1; }

/* -------------------------------------------------------------------------
 *  10. フッター
 * ------------------------------------------------------------------------- */
.site-footer { background: #1a1a1a; color: #ccc; margin-top: 3rem; }

.site-footer__widgets { padding: 2.5rem 1rem; border-bottom: 1px solid #333; }
.site-footer__widgets-inner {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.site-footer__widgets .widget {
    background: transparent;
    border: 0;
    padding: 0;
    color: #ccc;
}
.site-footer__widgets .widget-title { color: #fff; border-bottom-color: var(--color-primary-light); }
.site-footer__widgets a { color: #ccc; }
.site-footer__widgets a:hover { color: #fff; opacity: 1; }

.site-footer__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 1.5rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.site-footer__nav-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
}
.site-footer__nav-list a { color: #ccc; }
.site-footer__nav-list a:hover { color: #fff; opacity: 1; }
.site-footer__copyright { margin: 0; color: #888; font-size: .8rem; }

@media (max-width: 768px) {
    .site-footer__widgets-inner { grid-template-columns: 1fr; }
    .site-footer__inner { flex-direction: column; text-align: center; }
}

/* -------------------------------------------------------------------------
 *  11. WP コアブロック の最低限の補正
 * ------------------------------------------------------------------------- */
.wp-block-image figcaption { color: var(--color-text-light); font-size: .85rem; }
.wp-block-button__link {
    background: var(--color-primary); color: #fff;
    border-radius: 999px; padding: .75em 1.75em;
}
.alignwide  { max-width: 1280px; margin-left: auto; margin-right: auto; }
.alignfull  { max-width: 100%; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignleft  { float: left; margin: 0 1em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1em; }