@charset "UTF-8";
/*
    Template: hello-elementor
    Theme Name: HELLO CHILD ELEMENTOR - アベノドライ
    Theme URI: https://creamt.jp/
    Description: hello_child_elementor 1.0.0 から派生した、アベノドライ（abenodc.jp）の子テーマ。旧テーマ appointment の見た目を、テーマに頼らない自前の CSS で再現する。サイト固有の記述は assets/abenodc.css と functions.php の「サイト固有」節にある。
    Version: 1.0.0.1
    Author: creamt

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

/* =============================================================
   0. 変数
   派生テーマ側で :root を上書きすれば、色と余白をまとめて変えられる
   ============================================================= */
:root {
    --hce-text: #1a1a1a;
    --hce-muted: #6b7280;
    --hce-line: #e5e7eb;
    --hce-bg-soft: #f7f8fa;
    --hce-link: #1f3a8a;
    --hce-radius: 4px;
    --hce-gap: 24px;
    --hce-content-width: 720px;
    --hce-wide-width: 1120px;
}

/* =============================================================
   1. レイアウト（本文とサイドバーの2カラム）
   1カラムのときは .hce-layout--full が付き、サイドバーを出さない
   ============================================================= */
.hce-layout {
    max-width: var(--hce-wide-width);
    margin: 0 auto;
    padding: 40px 20px 64px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 48px;
    align-items: start;
}

.hce-layout--full {
    grid-template-columns: minmax(0, 1fr);
    max-width: calc(var(--hce-content-width) + 40px);
}

.hce-layout--full .hce-main {
    max-width: 100%;
}

@media (max-width: 900px) {
    .hce-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
        padding: 28px 16px 48px;
    }
}

/* =============================================================
   2. 記事本文のスタイル
   客が投稿本文に何を書くか予測できないため、ここは最初に固める。
   後から足すと、共通ベース更新 → 派生テーマ全部への追従になる
   ============================================================= */
.hce-content {
    color: var(--hce-text);
    line-height: 1.9;
    word-wrap: break-word;
}

.hce-content > * + * { margin-top: 1.4em; }

.hce-content h2 {
    margin: 2.2em 0 .9em;
    padding: .5em .7em;
    background: var(--hce-bg-soft);
    border-left: 4px solid var(--hce-link);
    font-size: 1.35em;
    line-height: 1.5;
}

.hce-content h3 {
    margin: 2em 0 .8em;
    padding-bottom: .35em;
    border-bottom: 1px solid var(--hce-line);
    font-size: 1.18em;
    line-height: 1.5;
}

.hce-content h4 {
    margin: 1.8em 0 .7em;
    font-size: 1.06em;
    line-height: 1.6;
}

.hce-content p { margin: 1.2em 0; }

.hce-content a {
    color: var(--hce-link);
    text-decoration: underline;
    text-underline-offset: .18em;
}
.hce-content a:hover { text-decoration: none; }

.hce-content ul,
.hce-content ol { margin: 1.2em 0; padding-left: 1.6em; }
.hce-content ul { list-style: disc; }
.hce-content ol { list-style: decimal; }
.hce-content li { margin: .45em 0; }
.hce-content li > ul,
.hce-content li > ol { margin: .45em 0; }

.hce-content blockquote {
    margin: 1.6em 0;
    padding: 1em 1.2em;
    background: var(--hce-bg-soft);
    border-left: 3px solid var(--hce-line);
    color: #374151;
}
.hce-content blockquote > :first-child { margin-top: 0; }
.hce-content blockquote > :last-child { margin-bottom: 0; }

.hce-content img { max-width: 100%; height: auto; }

.hce-content figure { margin: 1.8em 0; }
.hce-content figcaption {
    margin-top: .6em;
    color: var(--hce-muted);
    font-size: .88em;
    line-height: 1.7;
    text-align: center;
}

/* 表：狭い画面では潰さず横スクロールさせる
   width:100% だけだと、列が潰れて1文字ずつ折り返す（実機で確認）。
   min-width を持たせて、収まらないときはラッパー側でスクロールさせる */
.hce-content .wp-block-table,
.hce-content figure.wp-block-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.hce-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95em;
}
@media (max-width: 700px) {
    .hce-content table { min-width: 560px; }
}
/* figure で囲まれていない表（クラシックエディタで書かれた表）への保険 */
.hce-content > table {
    display: block;
    overflow-x: auto;
}
.hce-content th,
.hce-content td {
    padding: .7em .9em;
    border: 1px solid var(--hce-line);
    text-align: left;
    vertical-align: top;
}
.hce-content th { background: var(--hce-bg-soft); font-weight: 600; }

.hce-content hr {
    margin: 2.4em 0;
    border: 0;
    border-top: 1px solid var(--hce-line);
}

.hce-content code {
    padding: .15em .4em;
    background: var(--hce-bg-soft);
    border-radius: var(--hce-radius);
    font-size: .92em;
}
.hce-content pre {
    margin: 1.6em 0;
    padding: 1em 1.2em;
    background: var(--hce-bg-soft);
    border-radius: var(--hce-radius);
    overflow-x: auto;
}
.hce-content pre code { padding: 0; background: none; }

/* =============================================================
   3. 記事の見出し部（タイトル・日付・カテゴリ）
   ============================================================= */
.hce-entry-header { margin-bottom: 28px; }

.hce-entry-title {
    margin: 0 0 .5em;
    font-size: 1.75em;
    line-height: 1.45;
}

.hce-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    color: var(--hce-muted);
    font-size: .9em;
}

.hce-meta__cat a {
    display: inline-block;
    padding: .15em .7em;
    background: var(--hce-bg-soft);
    border: 1px solid var(--hce-line);
    border-radius: 999px;
    color: var(--hce-text);
    font-size: .95em;
    text-decoration: none;
}

.hce-thumb { margin: 0 0 28px; }
.hce-thumb img {
    width: 100%;
    height: auto;
    border-radius: var(--hce-radius);
}

/* =============================================================
   4. 一覧（アーカイブ・ショートコード共通）
   ============================================================= */
.hce-archive-header { margin-bottom: 32px; }
.hce-archive-title { margin: 0 0 .3em; font-size: 1.5em; }
.hce-archive-desc { color: var(--hce-muted); font-size: .95em; }

.hce-list { margin: 0; padding: 0; list-style: none; }

/* simple：日付＋タイトルの1行 */
.hce-list--simple .hce-item {
    padding: 16px 0;
    border-bottom: 1px solid var(--hce-line);
}
.hce-list--simple .hce-item:first-child { border-top: 1px solid var(--hce-line); }
.hce-list--simple .hce-item__link {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    align-items: baseline;
    color: var(--hce-text);
    text-decoration: none;
}
.hce-list--simple .hce-item__link:hover .hce-item__title { text-decoration: underline; }
.hce-list--simple .hce-item__date { color: var(--hce-muted); font-size: .9em; }
.hce-list--simple .hce-item__title { flex: 1 1 320px; line-height: 1.7; }

/* card：アイキャッチつきのカード */
.hce-list--card {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--hce-gap);
}
.hce-list--card .hce-item {
    border: 1px solid var(--hce-line);
    border-radius: var(--hce-radius);
    overflow: hidden;
    background: #fff;
}
.hce-list--card .hce-item__link { display: block; color: var(--hce-text); text-decoration: none; }
.hce-list--card .hce-item__thumb {
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--hce-bg-soft);
    overflow: hidden;
}
.hce-list--card .hce-item__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
/* アイキャッチが無いときの代替（レイアウトを崩さない） */
.hce-list--card .hce-item__thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hce-line);
    font-size: 2em;
}
.hce-list--card .hce-item__body { display: block; padding: 16px 18px 20px; }
.hce-list--card .hce-item__date {
    display: block;
    color: var(--hce-muted);
    font-size: .85em;
}
.hce-list--card .hce-item__title {
    display: block;
    margin: .4em 0 0;
    font-size: 1.02em;
    line-height: 1.6;
}
.hce-list--card .hce-item__link:hover .hce-item__title { text-decoration: underline; }

/* 記事が0件のとき */
.hce-empty {
    padding: 40px 20px;
    border: 1px dashed var(--hce-line);
    border-radius: var(--hce-radius);
    color: var(--hce-muted);
    text-align: center;
}

/* 「一覧へ」リンク */
.hce-more { margin-top: 24px; text-align: right; }
.hce-more a {
    color: var(--hce-link);
    font-size: .95em;
    text-decoration: none;
}
.hce-more a:hover { text-decoration: underline; }

/* =============================================================
   5. ページネーション
   ============================================================= */
.hce-pagination { margin-top: 40px; }
.hce-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.hce-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--hce-line);
    border-radius: var(--hce-radius);
    color: var(--hce-text);
    text-decoration: none;
}
.hce-pagination .page-numbers.current {
    background: var(--hce-link);
    border-color: var(--hce-link);
    color: #fff;
}
.hce-pagination .page-numbers.dots { border-color: transparent; }

/* 前後の記事 */
.hce-post-nav { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--hce-line); }
.hce-post-nav .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
}
.hce-post-nav a { color: var(--hce-link); text-decoration: none; }
.hce-post-nav a:hover { text-decoration: underline; }

/* =============================================================
   6. サイドバー
   ============================================================= */
.hce-sidebar .widget + .widget { margin-top: 32px; }
.hce-sidebar .widget-title {
    margin: 0 0 12px;
    padding-bottom: .4em;
    border-bottom: 2px solid var(--hce-line);
    font-size: 1.02em;
}
.hce-sidebar ul { margin: 0; padding: 0; list-style: none; }
.hce-sidebar li {
    padding: 8px 0;
    border-bottom: 1px solid var(--hce-line);
    line-height: 1.7;
}
.hce-sidebar a { color: var(--hce-text); text-decoration: none; }
.hce-sidebar a:hover { text-decoration: underline; }

/* =============================================================
   7. Elementor の「全幅」「キャンバス」では余白を持たせない
   ラッパーの左右padding が二重にかからないようにする
   ============================================================= */
.elementor-template-full-width .hce-layout,
.elementor-template-canvas .hce-layout {
    max-width: 100%;
    padding: 0;
    gap: 0;
}