/*
* block-styles.css
* フロントエンドで使用するブロックスタイル
*/

/* デフォルト見出しブロックの基本スタイル - theme.json変数を活用 */
.wp-block-heading,
h1,
h2,
h3,
h4,
h5,
h6 {
    position: relative;
    width: 100%;
    color: var(--wp--custom--color--neutral--800, #262626);
    font-family: var(--wp--preset--font-family--noto-sans-jp, "Noto Sans JP", sans-serif);
    font-style: normal;
    font-weight: 700;
    margin: 0;
    box-sizing: border-box;
}

/* h1スタイル - theme.jsonのフォントサイズを活用 */
.wp-block-heading h1,
h1.wp-block-heading {
    font-size: var(--wp--preset--font-size--xl, 24px);
    line-height: 1.33;
    padding: var(--wp--custom--spacing--xs, 8px) 0;
    word-break: break-all;
}

/* タブレット版 h1 */
@media screen and (min-width: 768px) {

    .wp-block-heading h1,
    h1.wp-block-heading {
        padding: var(--wp--custom--spacing--s, 12px) 0;
    }
}

/* デスクトップ版 h1 */
@media screen and (min-width: 1280px) {

    .wp-block-heading h1,
    h1.wp-block-heading {
        font-size: var(--wp--preset--font-size--xxl, 32px);
        line-height: 1.5;
        padding: var(--wp--custom--spacing--m, 16px) 0;
    }
}

/* h2スタイル + グラデーション下線 */
.wp-block-heading h2,
h2.wp-block-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--wp--custom--spacing--xs, 8px) var(--wp--custom--spacing--xs, 8px) var(--wp--custom--spacing--s, 12px);
    font-size: var(--wp--preset--font-size--m, 14px);
    line-height: 1.5;
    word-break: break-all;
}

.wp-block-heading h2::after,
h2.wp-block-heading::after {
    content: '';
    position: relative;
    left: calc(-1 * var(--wp--custom--spacing--xs, 8px));
    display: block;
    width: calc(100% + 2 * var(--wp--custom--spacing--xs, 16px));
    height: 4px;
    background: var(--wp--custom--color--gradation--blue, linear-gradient(135deg, #4BC0E8 0%, #0A72DB 100%));
    border-radius: 9999px;
    margin-top: var(--wp--custom--spacing--xs, 8px);
}

/* タブレット版 h2 */
@media screen and (min-width: 768px) {

    .wp-block-heading h2,
    h2.wp-block-heading {
        font-size: var(--wp--preset--font-size--l, 16px);
        padding: var(--wp--custom--spacing--s, 12px) var(--wp--custom--spacing--s, 12px) var(--wp--custom--spacing--m, 16px);
    }

    .wp-block-heading h2::after,
    h2.wp-block-heading::after {
        left: calc(-1 * var(--wp--custom--spacing--s, 12px));
        width: calc(100% + 2 * var(--wp--custom--spacing--s, 12px));
        height: 5px;
    }
}

/* デスクトップ版 h2 */
@media screen and (min-width: 1280px) {

    .wp-block-heading h2,
    h2.wp-block-heading {
        font-size: var(--wp--preset--font-size--l, 24px);
        line-height: 1.33;
        padding: var(--wp--custom--spacing--s, 12px) var(--wp--custom--spacing--m, 16px) var(--wp--custom--spacing--l, 24px);
    }

    .wp-block-heading h2::after,
    h2.wp-block-heading::after {
        left: calc(-1 * var(--wp--custom--spacing--m, 16px));
        width: calc(100% + 2 * var(--wp--custom--spacing--m, 16px));
        height: 6px;
    }
}

/* h3スタイル + 左線 */
.wp-block-heading h3,
h3.wp-block-heading {
    padding: var(--wp--custom--spacing--xxs, 4px) var(--wp--custom--spacing--l, 20px) var(--wp--custom--spacing--xxs, 4px) calc(var(--wp--custom--spacing--l, 24px) + var(--wp--custom--spacing--xxs, 4px));
    font-size: var(--wp--preset--font-size--s, 12px);
    line-height: 1.5;
    word-break: break-all;
}

.wp-block-heading h3::before,
h3.wp-block-heading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: var(--wp--custom--spacing--l, 20px);
    height: 4px;
    background: var(--wp--custom--color--gradation--blue, linear-gradient(135deg, #4BC0E8 0%, #0A72DB 100%));
    border-radius: 9999px;
}

/* タブレット版 h3 */
@media screen and (min-width: 768px) {

    .wp-block-heading h3,
    h3.wp-block-heading {
        font-size: var(--wp--preset--font-size--m, 14px);
        padding: var(--wp--custom--spacing--xs, 6px) var(--wp--custom--spacing--xl, 28px) var(--wp--custom--spacing--xs, 6px) calc(var(--wp--custom--spacing--xl, 32px) + var(--wp--custom--spacing--xxs, 4px));
    }

    .wp-block-heading h3::before,
    h3.wp-block-heading::before {
        width: calc(var(--wp--custom--spacing--l, 24px) + var(--wp--custom--spacing--xxs, 4px));
        height: 5px;
    }
}

/* デスクトップ版 h3 */
@media screen and (min-width: 1280px) {

    .wp-block-heading h3,
    h3.wp-block-heading {
        font-size: var(--wp--preset--font-size--l, 20px);
        line-height: 1.4;
        padding: var(--wp--custom--spacing--xs, 8px) var(--wp--custom--spacing--lg, 24px) var(--wp--custom--spacing--xs, 8px) calc(var(--wp--custom--spacing--lg, 24px) + var(--wp--custom--spacing--x, 8px));
    }

    .wp-block-heading h3::before,
    h3.wp-block-heading::before {
        width: var(--wp--custom--spacing--lg, 24px);
        height: 6px;
    }
}

/* h4スタイル */
.wp-block-heading h4,
h4.wp-block-heading {
    padding: var(--wp--custom--spacing--xxs, 2px) 0;
    font-size: var(--wp--preset--font-size--s, 12px);
    line-height: 1.67;
    word-break: break-all;
}

/* タブレット版 h4 */
@media screen and (min-width: 768px) {

    .wp-block-heading h4,
    h4.wp-block-heading {
        font-size: var(--wp--preset--font-size--m, 14px);
        padding: var(--wp--custom--spacing--xxs, 3px) 0;
    }
}

/* デスクトップ版 h4 */
@media screen and (min-width: 1280px) {

    .wp-block-heading h4,
    h4.wp-block-heading {
        padding: var(--wp--custom--spacing--xxs, 4px) 0;
        font-size: var(--wp--preset--font-size--m, 16px);
        line-height: 1.5;
    }
}

/* h5スタイル */
.wp-block-heading h5,
h5.wp-block-heading {
    padding: var(--wp--custom--spacing--xxs, 2px) 0;
    font-size: var(--wp--preset--font-size--xs, 10px);
    line-height: 1.6;
    word-break: break-all;
}

/* タブレット版・デスクトップ版 h5 */
@media screen and (min-width: 768px) {

    .wp-block-heading h5,
    h5.wp-block-heading {
        font-size: var(--wp--preset--font-size--s, 12px);
        padding: var(--wp--custom--spacing--xxs, 4px) 0;
        line-height: 1.67;
    }
}

/* h6スタイル */
.wp-block-heading h6,
h6.wp-block-heading {
    padding: var(--wp--custom--spacing--xxs, 2px) 0;
    font-size: var(--wp--preset--font-size--xs, 10px);
    line-height: 1.6;
    word-break: break-all;
}

/* タブレット版・デスクトップ版 h6 */
@media screen and (min-width: 768px) {

    .wp-block-heading h6,
    h6.wp-block-heading {
        font-size: var(--wp--preset--font-size--s, 12px);
        padding: var(--wp--custom--spacing--xxs, 4px) 0;
        line-height: 1.67;
    }
}

/* 段落ブロックのスタイル - レスポンシブ対応 */
.wp-block-paragraph,
p,
.post-item>p {
    font-family: var(--wp--preset--font-family--noto-sans-jp, "Noto Sans JP", sans-serif);
    font-size: var(--wp--preset--font-size--s, 12px);
    line-height: 2;
    margin: 0;
    padding: var(--wp--custom--spacing--xxs, 2px) 0;
    font-weight: 500;
    min-height: 1em;
    word-break: break-all;
}

/* 空の段落要素に対する明示的なスタイル */
.wp-block-paragraph:empty,
p:empty,
.post-item>p:empty {
    min-height: 20px;
    display: block;
}

/* タブレット版 段落 */
@media screen and (min-width: 768px) {

    .wp-block-paragraph,
    p,
    .post-item>p {
        font-size: var(--wp--preset--font-size--m, 14px);
        line-height: 2;
        padding: var(--wp--custom--spacing--xxs, 4px) 0;
    }
}

/* デスクトップ版 段落 */
@media screen and (min-width: 1280px) {

    .wp-block-paragraph,
    p,
    .post-item>p {
        padding: 0;
        line-height: 2;
    }
}

/* コンテナの最大幅設定（theme.jsonのlayoutと連携） */
.wp-block-group,
.wp-block-columns {
    max-width: var(--wp--style--global--content-size, 1280px);
    margin-left: auto;
    margin-right: auto;
}

.wp-block-group.alignwide,
.wp-block-columns.alignwide {
    max-width: var(--wp--style--global--wide-size, 1400px);
}

/* quote */
.wp-block-quote,
blockquote {
    margin: 24px 0;
    background: var(--wp--custom--color--gray--100, #F3F4F6);
    padding: 12px;
    box-sizing: border-box;
    border-radius: 4px;
}

.wp-block-quote p,
blockquote p {
    font-size: 14px;
    color: var(--wp--custom--color--gray--700, #374151);
    line-height: 1.5;
}

.wp-block-quote cite,
blockquote cite {
    font-size: 14px;
    margin-top: 16px;
}

/* pullquote */
.wp-block-pullquote {
    position: relative;
    margin: 24px 0;
    padding: 6px;
    text-align: center;
    border-radius: 12px !important;
    box-sizing: border-box;
    overflow: hidden;
    background: var(--wp--custom--color--gradation--blue, linear-gradient(135deg, #4BC0E8 0%, #0A72DB 100%));
}

.wp-block-pullquote::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--wp--custom--color--gradation--blue, linear-gradient(135deg, #4BC0E8 0%, #0A72DB 100%));
    border-radius: 12px;
    z-index: -1;
}

.wp-block-pullquote>blockquote {
    margin: 0;
    padding: 16px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    position: relative;
    z-index: 1;
}

.wp-block-pullquote p {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--wp--custom--color--neutral--800, #262626);
    margin: 0;
}

.wp-block-pullquote cite {
    display: block;
    margin-top: 16px;
    font-size: 12px;
    color: var(--wp--custom--color--gray--400, #9CA3AF);
}

@media screen and (min-width: 1280px) {

    /* quote */
    .wp-block-quote,
    blockquote {
        padding: 20px 24px;
        border-radius: 8px;
        margin-top: 16px;
    }

    .wp-block-quote p,
    blockquote p,
    .wp-block-quote cite,
    blockquote cite {
        font-size: 14px;
    }

    /* pullquote */
    .wp-block-pullquote {
        padding: 8px;
        border-radius: 16px;
    }

    .wp-block-pullquote p {
        font-size: 14px;
    }
}

/* ui & li */
.wp-block-list {
    list-style: disc;
    padding-left: 20px;
    width: 100%;
    box-sizing: border-box;
}

.wp-block-list li {
    font-family: var(--wp--preset--font-family--noto-sans-jp);
    font-size: var(--wp--preset--font-size--s, 12px);
    line-height: 1.8;
}

@media screen and (min-width: 1280px) {
    .wp-block-list {
        padding-left: 24px;
    }

    .wp-block-list li {
        font-size: var(--wp--preset--font-size--m, 16px);
    }
}

/* code */
.wp-block-code {
    background: var(--wp--custom--color--gray--800);
    padding: 16px 12px;
    border-radius: 4px;
    box-sizing: border-box;
    font-weight: 400;
    letter-spacing: 1px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--wp--custom--color--gray--50);
}

@media screen and (min-width: 1280px) {
    .wp-block-code {
        padding: 28px 24px;
        border-radius: 8px;
        font-size: 14px;
    }
}

/* ...既存のコード... */

/* table */
/* table - 改良版 */
.wp-block-table {
    margin: 24px 0;
}

.wp-block-table table {
    width: fit-content;
    line-height: 1.25;
    table-layout: fixed;
    border-spacing: 0;
    border-collapse: separate;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--wp--custom--color--gray--200, #E5E7EB);
}

/* header */
.wp-block-table table thead th {
    height: 56px;
    color: var(--wp--custom--color--neutral--900, #111827);
    font-weight: 700;
    font-size: var(--wp--preset--font-size--s, 12px);
    padding: 16px 12px;
    box-sizing: border-box;
    border-top: none;
    border-bottom: 2px solid var(--wp--custom--color--blue--500, #2563EB);
    border-left: 1px solid var(--wp--custom--color--gray--200, #E5E7EB);
    border-right: 1px solid var(--wp--custom--color--gray--200, #E5E7EB);
}

.wp-block-table table thead th:first-child {
    border-left: none;
}

.wp-block-table table thead th:last-child {
    border-right: none;
}

/* body */
.wp-block-table table tbody td {
    height: 48px;
    background: white;
    color: var(--wp--custom--color--neutral--800, #262626);
    font-size: var(--wp--preset--font-size--s, 12px);
    padding: 12px;
    box-sizing: border-box;
    border: 1px solid var(--wp--custom--color--gray--200, #E5E7EB);
    border-top: none;
}

/* footer */
.wp-block-table table tfoot td {
    height: 56px;
    color: var(--wp--custom--color--neutral--900, #111827);
    font-weight: 700;
    font-size: var(--wp--preset--font-size--s, 12px);
    padding: 16px 12px;
    box-sizing: border-box;
    border-top: 2px solid var(--wp--custom--color--blue--500, #2563EB);
    border-bottom: none;
    border-left: 1px solid var(--wp--custom--color--gray--200, #E5E7EB);
    border-right: 1px solid var(--wp--custom--color--gray--200, #E5E7EB);
}

.wp-block-table table tfoot td:first-child {
    border-left: none;
}

.wp-block-table table tfoot td:last-child {
    border-right: none;
}

.wp-block-table table tfoot {
    border-top: 2px solid var(--wp--custom--color--blue--500, #2563EB);
}

.wp-block-table table tfoot td:first-child {
    border-left: none;
}

.wp-block-table table tfoot td:last-child {
    border-right: none;
}

/* 左端のボーダーを削除 */
.wp-block-table table tbody tr td:first-child {
    border-left: none;
}

/* 右端のボーダーを削除 */
.wp-block-table table tbody tr td:last-child {
    border-right: none;
}

/* 最下段のボーダーを削除 */
.wp-block-table table tbody tr:last-child td {
    border-bottom: none;
}

/* ストライプ効果（偶数行） */
.wp-block-table table tbody tr:nth-child(even) td {
    background: var(--wp--custom--color--gray--50, #F9FAFB);
}

/* ホバー効果 */
.wp-block-table table tbody tr:hover td {
    background: var(--wp--custom--color--sky--50, #F0F9FF);
    transition: background-color 0.2s ease;
}

/* 角丸の調整 - ヘッダー */
.wp-block-table table thead tr:first-child th:first-child {
    border-top-left-radius: 12px;
}

.wp-block-table table thead tr:first-child th:last-child {
    border-top-right-radius: 12px;
}

/* 角丸の調整 - 最下行（theadがある場合） */
.wp-block-table table:has(thead) tbody tr:last-child td:first-child {
    border-bottom-left-radius: 12px;
}

.wp-block-table table:has(thead) tbody tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}

/* 角丸の調整 - theadがない場合の最上行 */
.wp-block-table table:not(:has(thead)) tbody tr:first-child td:first-child {
    border-top-left-radius: 12px;
}

.wp-block-table table:not(:has(thead)) tbody tr:first-child td:last-child {
    border-top-right-radius: 12px;
}

/* 角丸の調整 - theadがない場合の最下行 */
.wp-block-table table:not(:has(thead)) tbody tr:last-child td:first-child {
    border-bottom-left-radius: 12px;
}

.wp-block-table table:not(:has(thead)) tbody tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}

/* 特別なテーブルスタイル - 価格表風 */
.wp-block-table.is-style-pricing table {
    border-radius: 16px;
    overflow: hidden;
}

.wp-block-table.is-style-pricing table thead th {
    background: var(--wp--custom--color--teal--400, #2DD4BF);
    font-size: var(--wp--preset--font-size--m, 14px);
    font-weight: 600;
    height: 64px;
    padding: 18px 16px;
}

.wp-block-table.is-style-pricing table tbody td {
    height: 56px;
    font-size: var(--wp--preset--font-size--m, 14px);
    padding: 16px;
    font-weight: 500;
}

.wp-block-table.is-style-pricing table tbody tr:first-child td {
    font-weight: 700;
    color: var(--wp--custom--color--teal--600, #0D9488);
}

/* figcaptionのスタイル */
.wp-block-table .wp-element-caption,
.wp-block-table figcaption {
    padding: 8px 0;
    font-size: var(--wp--preset--font-size--xs, 12px);
    color: var(--wp--custom--color--gray--500, #6B7280);
    line-height: 1.5;
}