@charset "UTF-8";

/**
 * ブロックエディタで設定したスタイルをフロントエンドで表示
 * editor-style.css と対応するフロントエンド用スタイル
 */

/* ========================================
   カラーパレットのクラス
======================================== */

/* テキストカラー */
.has-black-color { color: #000000 !important; }
.has-white-color { color: #ffffff !important; }
.has-dark-gray-color { color: #333333 !important; }
.has-gray-color { color: #666666 !important; }
.has-light-gray-color { color: #999999 !important; }
.has-orange-color { color: #FEAC7D !important; }
.has-red-color { color: #e74c3c !important; }
.has-blue-color { color: #3498db !important; }
.has-green-color { color: #27ae60 !important; }
.has-yellow-color { color: #f1c40f !important; }

/* 背景カラー */
.has-black-background-color { background-color: #000000 !important; }
.has-white-background-color { background-color: #ffffff !important; }
.has-dark-gray-background-color { background-color: #333333 !important; }
.has-gray-background-color { background-color: #666666 !important; }
.has-light-gray-background-color { background-color: #999999 !important; }
.has-orange-background-color { background-color: #FEAC7D !important; }
.has-red-background-color { background-color: #e74c3c !important; }
.has-blue-background-color { background-color: #3498db !important; }
.has-green-background-color { background-color: #27ae60 !important; }
.has-yellow-background-color { background-color: #f1c40f !important; }

/* ========================================
   フォントサイズのクラス
======================================== */
.has-small-font-size { font-size: 13px !important; }
.has-normal-font-size { font-size: 16px !important; }
.has-medium-font-size { font-size: 20px !important; }
.has-large-font-size { font-size: 24px !important; }
.has-huge-font-size,
.has-x-large-font-size { font-size: 32px !important; }

/* ========================================
   配置のクラス
======================================== */
.alignleft {
    float: left;
    margin-right: 1.5em;
    margin-bottom: 1em;
}

.alignright {
    float: right;
    margin-left: 1.5em;
    margin-bottom: 1em;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.alignwide {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.alignfull {
    max-width: none;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
}

/* ========================================
   見出しブロック
======================================== */
.wp-block-heading {
    line-height: 1.4;
    margin-top: 1.5em;
    margin-bottom: 0.75em;
}

h1.wp-block-heading { font-size: 2em; }
h2.wp-block-heading { font-size: 1.75em; }
h3.wp-block-heading { font-size: 1.5em; }
h4.wp-block-heading { font-size: 1.25em; }
h5.wp-block-heading { font-size: 1.1em; }
h6.wp-block-heading { font-size: 1em; }

/* ========================================
   段落ブロック
======================================== */
.wp-block-paragraph {
    line-height: 1.8;
    margin-bottom: 1.5em;
}

/* ドロップキャップ */
.has-drop-cap:not(:focus)::first-letter {
    float: left;
    font-size: 3.5em;
    line-height: 1;
    font-weight: 700;
    margin: 0.05em 0.1em 0 0;
}

/* ========================================
   リストブロック
======================================== */
.wp-block-list {
    line-height: 1.8;
    margin-bottom: 1.5em;
    padding-left: 1.5em;
}

.wp-block-list li {
    margin-bottom: 0.5em;
}

ul.wp-block-list {
    list-style-type: disc;
}

ol.wp-block-list {
    list-style-type: decimal;
}

/* ネストされたリスト */
.wp-block-list ul,
.wp-block-list ol {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/* ========================================
   引用ブロック
======================================== */
.wp-block-quote {
    border-left: 4px solid #000000;
    padding-left: 1em;
    margin: 1.5em 0;
    font-style: italic;
}

.wp-block-quote p {
    margin-bottom: 0.5em;
}

.wp-block-quote cite,
.wp-block-quote footer {
    color: #666666;
    font-size: 0.9em;
    font-style: normal;
    display: block;
    margin-top: 0.5em;
}

/* 大きな引用スタイル */
.wp-block-quote.is-style-large,
.wp-block-quote.is-large {
    border: none;
    padding: 0;
    font-size: 1.5em;
}

.wp-block-quote.is-style-large p,
.wp-block-quote.is-large p {
    font-size: inherit;
    font-style: italic;
}

/* ========================================
   コードブロック
======================================== */
.wp-block-code {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 1em;
    margin-bottom: 1.5em;
    overflow-x: auto;
}

.wp-block-code code {
    font-family: "Courier New", Courier, monospace;
    font-size: 0.9em;
    line-height: 1.6;
    background: none;
    padding: 0;
}

/* ========================================
   プレフォーマットブロック
======================================== */
.wp-block-preformatted {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 1em;
    margin-bottom: 1.5em;
    overflow-x: auto;
    white-space: pre-wrap;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.9em;
    line-height: 1.6;
}

/* ========================================
   テーブルブロック
======================================== */
.wp-block-table {
    margin-bottom: 1.5em;
    width: 100%;
    border-collapse: collapse;
}

.wp-block-table table {
    width: 100%;
}

.wp-block-table td,
.wp-block-table th {
    border: 1px solid #ddd;
    padding: 0.75em 1em;
    text-align: left;
}

.wp-block-table th {
    background-color: #f5f5f5;
    font-weight: 700;
}

/* ストライプスタイル */
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
}

.wp-block-table.is-style-stripes td,
.wp-block-table.is-style-stripes th {
    border-color: transparent;
}

/* 背景色付きテーブル */
.wp-block-table .has-background td,
.wp-block-table .has-background th {
    background-color: inherit;
}

/* ========================================
   画像ブロック
======================================== */
.wp-block-image {
    margin-bottom: 1.5em;
}

.wp-block-image img {
    max-width: 100%;
    height: auto;
    display: block;
}

.wp-block-image figcaption {
    color: #666666;
    font-size: 0.9em;
    text-align: center;
    margin-top: 0.5em;
}

/* 角丸スタイル */
.wp-block-image.is-style-rounded img {
    border-radius: 9999px;
}

/* ========================================
   ギャラリーブロック
======================================== */
.wp-block-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    margin-bottom: 1.5em;
}

.wp-block-gallery .wp-block-image {
    margin-bottom: 0;
    flex-grow: 1;
}

.wp-block-gallery figcaption {
    color: #ffffff;
    font-size: 0.9em;
    background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
    padding: 1em;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

/* カラム数 */
.wp-block-gallery.columns-2 .wp-block-image { width: calc(50% - 0.5em); }
.wp-block-gallery.columns-3 .wp-block-image { width: calc(33.333% - 0.67em); }
.wp-block-gallery.columns-4 .wp-block-image { width: calc(25% - 0.75em); }

/* ========================================
   カバーブロック
======================================== */
.wp-block-cover {
    position: relative;
    background-size: cover;
    background-position: center;
    min-height: 430px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5em;
    padding: 1em;
}

.wp-block-cover .wp-block-cover__inner-container {
    color: #ffffff;
    z-index: 1;
    width: 100%;
    text-align: center;
}

.wp-block-cover .wp-block-cover__inner-container * {
    color: inherit;
}

/* オーバーレイ */
.wp-block-cover.has-background-dim::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: inherit;
    opacity: 0.5;
}

.wp-block-cover.has-background-dim-10::before { opacity: 0.1; }
.wp-block-cover.has-background-dim-20::before { opacity: 0.2; }
.wp-block-cover.has-background-dim-30::before { opacity: 0.3; }
.wp-block-cover.has-background-dim-40::before { opacity: 0.4; }
.wp-block-cover.has-background-dim-50::before { opacity: 0.5; }
.wp-block-cover.has-background-dim-60::before { opacity: 0.6; }
.wp-block-cover.has-background-dim-70::before { opacity: 0.7; }
.wp-block-cover.has-background-dim-80::before { opacity: 0.8; }
.wp-block-cover.has-background-dim-90::before { opacity: 0.9; }
.wp-block-cover.has-background-dim-100::before { opacity: 1; }

/* ========================================
   メディアとテキストブロック
======================================== */
.wp-block-media-text {
    display: grid;
    grid-template-columns: 50% 1fr;
    margin-bottom: 1.5em;
}

.wp-block-media-text .wp-block-media-text__media {
    margin: 0;
}

.wp-block-media-text .wp-block-media-text__media img {
    width: 100%;
    height: auto;
}

.wp-block-media-text .wp-block-media-text__content {
    padding: 0 8%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* メディアを右に */
.wp-block-media-text.has-media-on-the-right {
    grid-template-columns: 1fr 50%;
}

.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
    order: 2;
}

.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
    order: 1;
}

/* モバイル対応 */
@media (max-width: 600px) {
    .wp-block-media-text {
        grid-template-columns: 1fr;
    }

    .wp-block-media-text.has-media-on-the-right {
        grid-template-columns: 1fr;
    }

    .wp-block-media-text .wp-block-media-text__content {
        padding: 1em 0;
    }
}

/* ========================================
   ボタンブロック
======================================== */
.wp-block-button {
    margin-bottom: 1.5em;
}

.wp-block-button__link {
    display: inline-block;
    padding: 0.75em 1.5em;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 700;
    background-color: #000000;
    color: #ffffff;
    transition: opacity 0.2s ease;
}

.wp-block-button__link:hover {
    opacity: 0.8;
    color: #ffffff;
}

/* アウトラインスタイル */
.wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent;
    border: 2px solid currentColor;
}

/* 角丸なしスタイル */
.wp-block-button.is-style-squared .wp-block-button__link {
    border-radius: 0;
}

/* ボタングループ */
.wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin-bottom: 1.5em;
}

/* ========================================
   区切りブロック
======================================== */
.wp-block-separator {
    border: none;
    border-top: 1px solid #ddd;
    margin: 2em auto;
    max-width: 100px;
}

.wp-block-separator.is-style-wide {
    max-width: none;
}

.wp-block-separator.is-style-dots {
    border: none;
    text-align: center;
    max-width: none;
}

.wp-block-separator.is-style-dots::before {
    content: "···";
    font-size: 1.5em;
    letter-spacing: 0.5em;
    color: #ddd;
}

/* ========================================
   スペーサーブロック
======================================== */
.wp-block-spacer {
    clear: both;
}

/* ========================================
   カラムブロック
======================================== */
.wp-block-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
    margin-bottom: 1.5em;
}

.wp-block-column {
    flex: 1;
    min-width: 0;
}

/* モバイル対応 */
@media (max-width: 781px) {
    .wp-block-columns:not(.is-not-stacked-on-mobile) {
        flex-direction: column;
    }

    .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
        flex-basis: 100% !important;
    }
}

/* ========================================
   グループブロック
======================================== */
.wp-block-group {
    margin-bottom: 1.5em;
}

.wp-block-group.has-background {
    padding: 1.5em;
}

/* ========================================
   詳細ブロック（アコーディオン）
======================================== */
.wp-block-details {
    margin-bottom: 1.5em;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.wp-block-details summary {
    padding: 1em;
    cursor: pointer;
    font-weight: 700;
    list-style: none;
}

.wp-block-details summary::-webkit-details-marker {
    display: none;
}

.wp-block-details summary::before {
    content: "▶";
    display: inline-block;
    margin-right: 0.5em;
    transition: transform 0.2s ease;
}

.wp-block-details[open] summary::before {
    transform: rotate(90deg);
}

.wp-block-details > *:not(summary) {
    padding: 0 1em 1em;
}

/* ========================================
   ファイルブロック
======================================== */
.wp-block-file {
    margin-bottom: 1.5em;
    display: flex;
    align-items: center;
    gap: 1em;
}

.wp-block-file a:not(.wp-block-file__button) {
    color: #000000;
    text-decoration: underline;
}

.wp-block-file .wp-block-file__button {
    display: inline-block;
    background-color: #000000;
    color: #ffffff;
    padding: 0.5em 1em;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.9em;
}

/* ========================================
   埋め込みブロック
======================================== */
.wp-block-embed {
    margin-bottom: 1.5em;
}

.wp-block-embed figcaption {
    color: #666666;
    font-size: 0.9em;
    text-align: center;
    margin-top: 0.5em;
}

/* レスポンシブ埋め込み */
.wp-block-embed.is-type-video .wp-block-embed__wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.wp-block-embed.is-type-video .wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ========================================
   プルクオートブロック
======================================== */
.wp-block-pullquote {
    border-top: 4px solid #000000;
    border-bottom: 4px solid #000000;
    padding: 2em 0;
    margin: 2em 0;
    text-align: center;
}

.wp-block-pullquote blockquote {
    border: none;
    padding: 0;
    margin: 0;
}

.wp-block-pullquote p {
    font-size: 1.5em;
    line-height: 1.4;
    margin-bottom: 0.5em;
}

.wp-block-pullquote cite {
    color: #666666;
    font-size: 0.9em;
    font-style: normal;
}

/* ========================================
   詩ブロック
======================================== */
.wp-block-verse {
    font-family: inherit;
    white-space: pre-wrap;
    margin-bottom: 1.5em;
}

/* ========================================
   テキスト装飾
======================================== */

/* ハイライト（マーカー） */
mark.has-inline-color {
    background: none;
}

/* 上付き・下付き */
sup, sub {
    font-size: 0.75em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* ========================================
   スペーシング（余白）クラス
======================================== */

/* パディング */
.has-small-padding { padding: 0.5em !important; }
.has-medium-padding { padding: 1em !important; }
.has-large-padding { padding: 2em !important; }

/* マージン */
.has-small-margin { margin: 0.5em !important; }
.has-medium-margin { margin: 1em !important; }
.has-large-margin { margin: 2em !important; }

/* ========================================
   テキスト配置
======================================== */
.has-text-align-left { text-align: left; }
.has-text-align-center { text-align: center; }
.has-text-align-right { text-align: right; }