/*
Theme Name: THEME2
Author: Your Name
Description: A minimal theme based on the provided design.
Version: 1.0
*/
@charset "UTF-8";

/* page-another-index */
/* ==============================================
 * カード基本レイアウト
 * ============================================== */
.cards-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
}

.flip-card {
    flex: 1 1 calc(33.333% - 2rem);
    /* 最大3列 */
    max-width: calc(33.333% - 2rem);
}

/* 中の配置を左右または上下に分ける */
.flip-card-inner {
    display: flex;
    flex-direction: row;
}

/* 質問側と回答側を均等に分割 */
.flip-card-fronts {
    flex: 1;
}

.flip-card-back {
    flex: 1;
}

.flip-card-front {
    flex-direction: column;
}

/* タイトルとテキスト */
.flip-card-front h2 {
    color: #f08200;
}

.flip-card-front h2,
.flip-card-front p,
.flip-card-back p {
    margin: 0 0 1rem;
    line-height: 1.6;
    font-size: 1rem;
    font-weight: bold;
}

.flip-card-front p {
    position: relative;
    max-height: 310px;

}

.scroll-text {
    overflow-y: auto;
}

/* シェアボタン */
.share-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.share-buttons a {
    font-size: 1.2rem;
    color: #333;
    transition: color 0.3s;
}

.share-buttons a:hover {
    color: #0073aa;
}

.flip-card-inner {
    min-height: 400px;
}

/* タブレットは2列 */
@media (max-width: 1024px) {
    .flip-card {
        flex: 1 1 calc(50% - 2rem);
        max-width: calc(50% - 2rem);
    }
}

/* スマホは1列 */
@media (max-width: 767px) {
    .flip-card {
        flex: 1 1 100%;
        max-width: 100%;
    }
}