/* Layout Buttons Editor - Frontend Styles */

/* 3カラムレイアウト */
.layout-3-column {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 2rem auto;
    /* フロントエンドでは枠線とラベルを非表示 */
    border: none !important;
    background: none !important;
    padding: 0 !important;
    position: static !important;
}

/* 2カラムレイアウト（1:1） */
.layout-2-column-equal {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin: 2rem auto;
    /* フロントエンドでは枠線とラベルを非表示 */
    border: none !important;
    background: none !important;
    padding: 0 !important;
    position: static !important;
}

/* 2カラムレイアウト（1:2） */
.layout-2-column-ratio {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
    margin: 2rem auto;
    /* フロントエンドでは枠線とラベルを非表示 */
    border: none !important;
    background: none !important;
    padding: 0 !important;
    position: static !important;
}

/* フロントエンドでラベルを非表示 */
.layout-3-column > div:first-child[style*="position: absolute"],
.layout-2-column-equal > div:first-child[style*="position: absolute"],
.layout-2-column-ratio > div:first-child[style*="position: absolute"] {
    display: none !important;
}

/* レスポンシブ対応 - スマホで1カラム表示 */
@media (max-width: 768px) {
    .layout-3-column,
    .layout-2-column-equal,
    .layout-2-column-ratio {
        display: block !important;
        grid-template-columns: none !important;
        gap: 1rem !important;
    }
    
    .layout-3-column > div,
    .layout-2-column-equal > div,
    .layout-2-column-ratio > div {
        margin-bottom: 1rem !important;
    }
    
    .layout-3-column > div:last-child,
    .layout-2-column-equal > div:last-child,
    .layout-2-column-ratio > div:last-child {
        margin-bottom: 0 !important;
    }
}

/* より小さな画面（480px以下）向けの追加調整 */
@media (max-width: 480px) {
    .layout-3-column,
    .layout-2-column-equal,
    .layout-2-column-ratio {
        margin: 1rem 0 !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

/* カラム内の基本スタイル（フロントエンドでは境界線なし） */
.layout-3-column > div,
.layout-2-column-equal > div,
.layout-2-column-ratio > div {
    padding: 0 !important;
    border: none !important;
    background: none !important;
    min-height: auto !important;
}

/* レイアウト前後の空白段落を最小化 */
.layout-3-column + p:empty,
.layout-2-column-equal + p:empty,
.layout-2-column-ratio + p:empty,
p:empty + .layout-3-column,
p:empty + .layout-2-column-equal,
p:empty + .layout-2-column-ratio {
    margin: 0 !important;
    line-height: 0.1 !important;
    font-size: 1px !important;
}

/* フロントエンドでも枠線を表示したい場合はコメントアウトを外す */
/*
.layout-3-column > div,
.layout-2-column-equal > div,
.layout-2-column-ratio > div {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: #fafafa;
    padding: 1rem;
}
*/

/* 新しいボックス要素のスタイル - より強力な優先度指定 */
body .box01,
html body .box01,
div.box01[style] {
    border: 1px solid rgba(63,101,31,1) !important;
    padding: 1rem 1.5rem !important;
    margin: 1rem auto !important;
    position: static !important;
    background: transparent !important;
    background-color: transparent !important;
}

body .box02,
html body .box02,
div.box02[style] {
    border: 1px solid rgba(63,101,31,1) !important;
    margin: 1rem auto !important;
    position: static !important;
    background: transparent !important;
    background-color: transparent !important;
}

body .box02 .box-title,
html body .box02 .box-title,
p.box-title[style] {
    background: rgba(63,101,31,1) !important;
    background-color: rgba(63,101,31,1) !important;
    color: white !important;
    padding: 1rem !important;
    margin: 0 !important;
    font-weight: bold !important;
}

body .box02 .box-contents,
html body .box02 .box-contents,
div.box-contents[style] {
    padding: 1.5rem !important;
}

.css-heading {
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2rem !important;
    padding: 0.8rem 4rem !important;
    font-weight: bold !important;
    position: static !important;
}

.css-heading::before,
.css-heading::after {
    content: "" !important;
    width: 5rem !important;
    height: 2px !important;
    background: rgba(63,101,31,1) !important;
}

/* エディタ用のラベルをフロントエンドで非表示 */
.box01 > div[style*="position: absolute"],
.box02 > div[style*="position: absolute"],
div[style*="position: relative"] > div[style*="position: absolute"] {
    display: none !important;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .css-heading {
        flex-direction: column !important;
        gap: 1rem !important;
        padding: 1rem 2rem !important;
    }
    
    .css-heading span {
        width: 3rem !important;
    }
    
    .box01,
    .box02 {
        margin: 0.5rem auto !important;
    }
    
    .box01 {
        padding: 0.8rem 1rem !important;
    }
    
    .box02 .box-contents {
        padding: 1rem !important;
    }
}

/* フロントエンドでエディタ用装飾を完全非表示 */

/* CSS見出しの親要素（エディタ用装飾コンテナ）のスタイルをリセット */
div[style*="border: 2px dashed rgba(63,101,31,1)"] {
    border: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: static !important;
}

/* より具体的にCSS見出しの装飾コンテナをターゲット */
div[style*="border: 2px dashed rgba(63,101,31,1)"][style*="background-color: rgba(63,101,31,0.05)"] {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    position: static !important;
}

/* エディタ用ラベルの完全非表示 */
div[style*="border: 2px dashed rgba(63,101,31,1)"] > div[style*="position: absolute"],
div[style*="background-color: rgba(63,101,31,0.05)"] > div[style*="position: absolute"] {
    display: none !important;
}

/* エディタで挿入される装飾コンテナを無効化 */
div[style*="position: relative"][style*="margin: 2rem auto"][style*="padding: 1rem"][style*="border: 2px dashed"] {
    border: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 1rem 0 !important;
    position: static !important;
}

/* 最強のリセット - エディタから挿入されるすべての装飾を削除 */
div[style*="border: 2px dashed rgba(63,101,31,1)"],
div[style*="background-color: rgba(63,101,31,0.05)"] {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 1rem 0 !important;
    position: static !important;
}

/* インライン属性よりも強力な指定 */
body div[style*="border: 2px dashed"],
body div[style*="background-color: rgba(63,101,31,0.05)"] {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 1rem 0 !important;
}

/* CSS見出しのみを正常表示 */
.css-heading {
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2rem !important;
    padding: 0.8rem 4rem !important;
    font-weight: bold !important;
    position: static !important;
    background: none !important;
    border: none !important;
    margin: 1rem 0 !important;
}

.css-heading::before,
.css-heading::after {
    content: "" !important;
    width: 5rem !important;
    height: 2px !important;
    background: rgba(63,101,31,1) !important;
}

/* エディタ専用装飾クラスを完全非表示 */
.editor-decoration-container {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 1rem 0 !important;
    position: static !important;
}

.editor-label {
    display: none !important;
}

/* 念のため、より強力な指定 */
body .editor-decoration-container,
html .editor-decoration-container {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 1rem 0 !important;
    position: static !important;
}

/* 最強の優先度指定 - インラインスタイルを上書き */

/* Box01の完全な上書き */
[class*="box01"],
div[class*="box01"],
body div[class*="box01"],
html body div[class*="box01"],
div[class="box01"][style],
body div[class="box01"][style],
html body div[class="box01"][style] {
    border: 1px solid rgba(63,101,31,1) !important;
    border-color: rgba(63,101,31,1) !important;
    padding: 1rem 1.5rem !important;
    margin: 1rem auto !important;
    position: static !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Box02の完全な上書き */
[class*="box02"],
div[class*="box02"],
body div[class*="box02"],
html body div[class*="box02"],
div[class="box02"][style],
body div[class="box02"][style],
html body div[class="box02"][style] {
    border: 1px solid rgba(63,101,31,1) !important;
    border-color: rgba(63,101,31,1) !important;
    margin: 1rem auto !important;
    position: static !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Box02のタイトル部分 */
[class*="box-title"],
p[class*="box-title"],
.box02 p[class*="box-title"],
body .box02 p[class*="box-title"],
html body .box02 p[class*="box-title"],
p[class="box-title"][style],
body p[class="box-title"][style],
html body p[class="box-title"][style] {
    background: rgba(63,101,31,1) !important;
    background-color: rgba(63,101,31,1) !important;
    color: white !important;
    padding: 1rem !important;
    margin: 0 !important;
    font-weight: bold !important;
}

/* Box02のコンテンツ部分 */
[class*="box-contents"],
div[class*="box-contents"],
.box02 div[class*="box-contents"],
body .box02 div[class*="box-contents"],
html body .box02 div[class*="box-contents"],
div[class="box-contents"][style],
body div[class="box-contents"][style],
html body div[class="box-contents"][style] {
    padding: 1.5rem !important;
}