/*
 Theme Name: astra-c
 Theme URI: https://example.com/astra-child/
 Description: Astra用の子テーマです。
 Author: Your Name
 Author URI: https://example.com
 Template: astra
 Version: 1.0.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: astra-child
*/
.iframeSize {width: 100%; height: 100%; min-height: 600px; max-width: 900px; border: none;}
body {background-color: #aaaaaa !important;}
article {background-color: #aaaaaa !important;}
/* h2 {margin-bottom: 8px; background-color: #dddddd;} */
/* body, h1, h2, h3, h4, h5, h6, p {color: #000000;} */
/* .site-main {background-color: #222222 !important;} */

.thumbnail-tile-grid {display: grid; grid-gap: 10px;}
/* 400px未満：1列 */
@media (max-width: 600px) {.thumbnail-tile-grid {grid-template-columns: 1fr;}}
/* 401px～600px：2列 */
@media (min-width: 601px) and (max-width: 900px) {.thumbnail-tile-grid {grid-template-columns: 1fr 1fr;}}
/* 601px以上：3列 */
@media (min-width: 901px) {.thumbnail-tile-grid {grid-template-columns: 1fr 1fr 1fr;}}
/* タイル内の画像を均等に表示 */
.thumbnail-tile img {width: 100%; height: auto; display: block; }
.page-id-52 .entry-title {display: none;}

.thumbnail-tile-content {width: 100%; box-sizing: border-box;}
.tile-title {
    display: block; 
    width: 100%; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    max-width: 275px;
    margin-bottom: 2px;
}
.tile-tags {
    display: block; 
    width: 100%; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    max-width: 275px;
    margin: 0px 0px 12px 0px;
}
.fullscreenButton {background-color: #008800; margin-bottom: 4px;}
.thumbnail-tile {position: relative; overflow: hidden;}
.tile-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* 半透明の暗転 */
    color: white;
    display: flex;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; /* オーバーレイがクリックイベントを妨げないようにする */
}
.thumbnail-tile:hover .tile-overlay {opacity: 1;}
.overlay-text {padding: 8px; text-align: center; font-size: 20px;}