/* ==========================================================
   WordPress Block Style
   for Custom PHP Site
   ========================================================== */

/* ------------------------------
   共通
------------------------------ */

.wp-block-image,
.wp-block-gallery,
.wp-block-columns,
.wp-block-table,
.wp-block-quote,
.wp-block-buttons{
    margin:2rem 0;
}

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

/* ------------------------------
   Emoji
------------------------------ */

img.emoji,
img.wp-smiley,
img[src*="s.w.org/images/core/emoji/"]{
    display:inline-block !important;
    width:1em !important;
    height:1em !important;
    max-width:1em !important;
    max-height:1em !important;
    margin:0 .07em !important;
    padding:0 !important;
    border:0 !important;
    box-shadow:none !important;
    vertical-align:-0.1em !important;
    background:none !important;
    object-fit:contain !important;
}

/* ------------------------------
   Image
------------------------------ */

.wp-block-image{
    text-align:center;
}

.wp-block-image figcaption{
    font-size:.9rem;
    color:#666;
    margin-top:.6rem;
}

/* ------------------------------
   Gallery
------------------------------ */

.wp-block-gallery{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
}

.wp-block-gallery figure{
    margin:0;
}

/* ------------------------------
   Columns
------------------------------ */

.wp-block-columns{
    display:flex;
    gap:30px;
    align-items:flex-start;
}

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

@media(max-width:768px){

    .wp-block-columns{
        display:block;
    }

    .wp-block-column{
        margin-bottom:20px;
    }

}

/* ------------------------------
   Table
------------------------------ */

.wp-block-table{
    overflow-x:auto;
}

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

.wp-block-table th,
.wp-block-table td{
    border:1px solid #ddd;
    padding:10px;
}

.wp-block-table th{
    background:#f5f5f5;
}

/* ------------------------------
   Quote
------------------------------ */

.wp-block-quote{
    border-left:5px solid #8cc63f;
    padding-left:20px;
    color:#555;
    font-style:italic;
}

.wp-block-quote cite{
    display:block;
    margin-top:10px;
    font-style:normal;
    color:#999;
}

/* ------------------------------
   Buttons
------------------------------ */

.wp-block-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
}

.wp-block-button__link{
    display:inline-block;
    background:#29abe2;
    color:#fff !important;
    padding:.8rem 1.6rem;
    border-radius:999px;
    text-decoration:none;
    transition:.3s;
}

.wp-block-button__link:hover{
    opacity:.85;
}

/* ------------------------------
   Separator
------------------------------ */

.wp-block-separator{
    border:none;
    border-top:1px solid #ddd;
    margin:3rem 0;
}

/* ------------------------------
   Cover
------------------------------ */

.wp-block-cover{
    overflow:hidden;
    border-radius:15px;
}

.wp-block-cover img{
    width:100%;
}

/* ------------------------------
   Embed (YouTube等)
------------------------------ */

.wp-block-embed iframe{
    width:100%;
    aspect-ratio:16/9;
    height:auto;
}

/* ------------------------------
   File
------------------------------ */

.wp-block-file a{
    font-weight:bold;
}

.wp-block-file__button{
    display:inline-block;
    margin-left:10px;
    padding:.5rem 1rem;
    background:#29abe2;
    color:#fff !important;
    border-radius:6px;
    text-decoration:none;
}

/* ------------------------------
   Code
------------------------------ */

.wp-block-code{
    background:#272822;
    color:#fff;
    padding:20px;
    border-radius:10px;
    overflow:auto;
}

/* ------------------------------
   Preformatted
------------------------------ */

.wp-block-preformatted{
    background:#f8f8f8;
    padding:20px;
    overflow:auto;
}

/* ------------------------------
   List
------------------------------ */

.wp-block-list{
    padding-left:1.5rem;
}

.wp-block-list li{
    margin:.4rem 0;
}

/* ------------------------------
   Pullquote
------------------------------ */

.wp-block-pullquote{
    text-align:center;
    border-top:3px solid #ddd;
    border-bottom:3px solid #ddd;
    padding:2rem;
}

/* ------------------------------
   Audio / Video
------------------------------ */

.wp-block-audio audio,
.wp-block-video video{
    width:100%;
}