/* card-fortune-telling.css (修正版 v1.3.8 - レイアウト強化・完全版) */
@charset 'UTF-8';

/* --- 基本的なタロット選択UIのスタイル --- */
.tarot2 {
    width: 100%;
    margin-bottom: 2em; /* 占い部分の下に余白 */
}
#tarotdisp {
    position: relative;
}

/* 選択肢コンテナ */
.tarot2__inner {
    width: 100%;
    max-width: 700px; /* 最大幅を少し広げる */
    margin: 0 auto;
    padding: 0 10px;  /* 左右の最小パディング */
    box-sizing: border-box;
}

/* --- カード選択UIオーバーレイのスタイル --- */
.tarot2__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* ★背景色をしっかり黒くする (透明度はお好みで調整) */
    background-color: rgba(0, 0, 0, 0.75); /* 例: 75%の黒 */
    /* ★z-index を高く設定して、確実にカードリンクより前面に */
    z-index: 20; /* カードリンクより高い値に */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    /* ★pointer-events: auto; を確実に設定し、クリックイベントをここで止める */
    pointer-events: none; /* 初期状態は操作不可 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* (任意) メッセージ */
    /* color: white; font-size: 1.1em; text-align: center; padding: 15px; background-color: rgba(0,0,0,0.5); border-radius: 5px; */
}

/* (任意) オーバーレイ内メッセージ */
#tarotdisp.has-overlay .tarot2__overlay::before {
	 display: block;
    content: "占い済みです\A もう一度占う場合は\A ページを更新してください"; /* 表示したいテキスト。改行は \A */
    color: white;       /* 文字色 */
    font-size: 1.2em;  /* 文字サイズ */
    font-weight: bold; /* 太字 */
    padding: 15px 20px; /* 内側余白 */
    background-color: rgba(0, 0, 0, 0.3); /* テキスト背景を少し濃く (任意) */
    border-radius: 8px; /* 角丸 (任意) */
    white-space: pre-wrap; /* \A での改行を有効にする */
    line-height: 1.5;    /* 行間 */
    /* 必要であれば、他のスタイル (text-shadow など) も追加 */
}

/* #tarotdisp に .has-overlay クラスが付いたらオーバーレイを表示 */
#tarotdisp.has-overlay .tarot2__overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* ★表示中はクリックイベントを受け取る（下の要素には行かない） */
}

/* オーバーレイ表示中はカードリンクの見た目を少し変える (任意) */
#tarotdisp.has-overlay .tarot2__link {
    opacity: 0.5; /* 例: 薄くする */
    filter: grayscale(100%); */ 
    cursor: default; /* カーソルを通常に */
    pointer-events: none !important; /* ★念のためクリックも無効化 */
}

/* --- アニメーションカードのスタイルリセット --- */
#tarot2_animate_modal {
    /* 背景色などのスタイルは維持 */
    background-color: rgba(0, 0, 0, 0.9); /* 必要なら調整 */
    /* 他のスタイル... */
}
#tarot2_animate_modal .tarot2-animate-modal-content {
    /* アニメーションなどのスタイルは維持 */
}
#tarot2_animate_modal img.tarot2__img {
    /* ★フィルター、透明度、表示状態を強制的にリセット */
    filter: none !important;
    opacity: 1 !important;
    display: block !important; /* または inline-block など適切な値 */
    visibility: visible !important;
    /* ★画像の src が空でないか確認（これはCSSではできない） */
    /* width, height, border-radius などは元のスタイルを維持 */
    width: 120px; /* 元のサイズ */
    height: 160px; /* 元のサイズ */
    border-radius: 5px;
}

/* --- カード選択UIの親要素に relative を設定 (オーバーレイがなくても役立つ場合がある) --- */
.tarot2__inner {
    position: relative;
    /* 他のスタイルはそのまま */
}

/* --- #tarotdisp の非表示スタイル (CLS対策 - 再度有効化) --- */
#tarotdisp.is-hidden {
    opacity: 0;
    visibility: hidden;
    height: 0; /* 高さを0にする */
    overflow: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s, height 0.3s ease; /* アニメーション */
    pointer-events: none;
    margin-bottom: 0; /* 余白も消す */
    padding-top: 0;
    padding-bottom: 0;
    border: none; /* 枠線も消す */
}

/* カードラッパー */
.tarot2__wrp {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* カードを中央揃えに */
    gap: 12px;        /* カード間の隙間 (PC) */
    box-sizing: border-box;
}

/* カードリンク */
.tarot2__link {
    display: block;
    /* PC: 4列表示を基本とする (gap 12px を考慮) */
    width: calc( (100% - (12px * 3)) / 4 );
    max-width: 130px; /* カードの最大幅を設定 */
    margin-bottom: 12px; /* 下方向の隙間 */
    padding: 0;
    background-color: #e0d8c0; /* 少し落ち着いた裏面背景色 */
    border-radius: 6px; /* 角丸 */
    cursor: pointer;
    box-sizing: border-box; /* ★必須 */
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; /* opacity削除 */
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}
.tarot2__link:hover {
    transform: translateY(-4px) scale(1.02); /* 少し浮き上がって拡大 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18);
}

/* カード画像 */
.tarot2__img {
    width: 100%;
    height: auto; /* アスペクト比維持 */
    display: block;
    border-radius: 5px; /* リンクより少し小さい角丸 */
    border: none;
    /* 画像が読み込まれるまでの領域確保（任意）*/
    aspect-ratio: 120 / 160; /* 幅120, 高さ160 の比率に近づける */
    background-color: #f0f0f0; /* 画像読み込み中の背景色 */
}

/* スマホ表示 (max-width: 750px) - 3列 */
@media print, screen and (max-width: 750px) {
    .tarot2__inner {
        padding: 0 8px; /* スマホ時の padding */
    }
    .tarot2__wrp {
        gap: 10px;      /* スマホ用 gap */
    }
    .tarot2__link {
        width: calc( (100% - (10px * 2)) / 3 ); /* スマホ: 3列 */
        margin-bottom: 10px;
    }
    /* 7枚目以降非表示は維持 */
    .tarot2__link:nth-child(n+7) {
         display: none;
    }
}

/* より小さい画面 (max-width: 480px) - 2列 */
@media print, screen and (max-width: 480px) {
    .tarot2__wrp {
        gap: 10px; /* 2列用 gap */
        justify-content: space-around; /* 2列の場合、均等配置も良い */
    }
    .tarot2__link {
        /* 左右padding(8px*2=16px)とgap(10px)を考慮 */
        width: calc( (100% - 10px) / 2 );
        margin-bottom: 10px;
        max-width: 150px; /* 2列の時の最大幅 */
    }
     /* スマホ(2列)では表示枚数を変更する場合 */
     .tarot2__link:nth-child(n+5) { /* 例: 4枚まで表示 */
        display: none;
     }
     .tarot2__link:nth-child(n+7) { /* 7枚目以降の非表示指定を上書き */
         /* display: block; */ /* ← もし4枚以上表示させたい場合はこちらを有効化 */
     }
}


/* --- アニメーションモーダル --- */
#tarot2_animate_modal {
    display: none; position: fixed; z-index: 1000; left: 0; top: 0;
    height: 100%; width: 100%; overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
    animation-name: bg-change; animation-duration: 3s;
    animation-timing-function: linear; animation-iteration-count: infinite;
}
.tarot2-animate-modal-content {
    display: flex; justify-content: center; align-items: center;
    width: 12%; height: 100%; margin: 0 auto;
    animation-name: rotate-anime; animation-duration: 1s;
    animation-timing-function: linear; animation-iteration-count: infinite;
}
@media print, screen and (max-width: 750px) {
    .tarot2-animate-modal-content { width: 30%; }
}
@keyframes rotate-anime {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}
@keyframes bg-change {
    0% { background-color: rgba(0, 0, 0, 0.9); }
    50% { background-color: rgba(70, 70, 110, 0.85); }
    100% { background-color: rgba(255, 255, 255, 0.9); }
}

/* --- 結果ブロック内のカード画像スタイル (はみ出し対策強化) --- */
/* #main .entry-content を追加して詳細度を上げる */
#main .entry-content .wp-block-group[class*=" tarot-"]:not(.no-tarot):not(.tarot-owarini):not(.teacher-recommendation-block-v7) img.tarot-card {
    display: block !important; /* Importantで強制 */
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 1.8em !important;
    margin-bottom: 1.8em !important;
    width: 130px !important; /* 基本幅をImportantで指定 */
    max-width: 100% !important; /* はみ出し防止 */
    height: auto !important;
    box-sizing: border-box !important; /* 計算方法を強制 */
    border-radius: 8px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.12) !important;
    border: none !important;
    transform-origin: center center !important;
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
    transform: rotate(0deg); /* 正位置デフォルト (Important不要かも) */
}
#main .entry-content .wp-block-group[class*=" tarot-"]:not(.no-tarot):not(.tarot-owarini):not(.teacher-recommendation-block-v7) img.tarot-card.reversed {
    transform: rotate(180deg) !important; /* 逆位置を強制 */
}
/* ホバーエフェクト */
#main .entry-content .wp-block-group[class*=" tarot-"]:not(.no-tarot):not(.tarot-owarini):not(.teacher-recommendation-block-v7) img.tarot-card:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,0.18) !important;
}
#main .entry-content .wp-block-group[class*=" tarot-"]:not(.no-tarot):not(.tarot-owarini):not(.teacher-recommendation-block-v7) img.tarot-card:not(.reversed):hover {
    transform: translateY(-6px) rotate(0deg) !important;
}
#main .entry-content .wp-block-group[class*=" tarot-"]:not(.no-tarot):not(.tarot-owarini):not(.teacher-recommendation-block-v7) img.tarot-card.reversed:hover {
    transform: translateY(-6px) rotate(180deg) !important;
}

/* スマホでのカードサイズ調整 */
@media print, screen and (max-width: 750px) {
    #main .entry-content .wp-block-group[class*=" tarot-"]:not(.no-tarot):not(.tarot-owarini):not(.teacher-recommendation-block-v7) img.tarot-card {
        width: 100px !important; /* スマホでは少し小さく */
        margin-top: 1.5em !important;
        margin-bottom: 1.5em !important;
    }
}

/* --- 結果ブロックのスタイル (全体調整・はみ出し対策) --- */
#main .entry-content .wp-block-group[class*=" tarot-"]:not(.no-tarot):not(.tarot-owarini):not(.teacher-recommendation-block-v7) {
    font-family: 'Noto Serif JP', serif, "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
    position: relative;
    /* overflow: hidden; */ /* 必要に応じてコメント解除 */
    width: 100%;
    max-width: 100%; /* 親要素からはみ出さない */
    box-sizing: border-box; /* padding, border を幅に含める */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2.5rem;
}

/* --- 結果ブロック内の要素のスタイル (はみ出し対策) --- */
#main .entry-content .wp-block-group[class*=" tarot-"]:not(.no-tarot):not(.tarot-owarini):not(.teacher-recommendation-block-v7) > * {
    max-width: 100%; /* 直下の子要素もはみ出さないように */
    box-sizing: border-box; /* 子要素のpadding/borderも考慮 */
    word-wrap: break-word; /* 強制折り返し */
    overflow-wrap: break-word;
}

/* P タグ */
#main .entry-content .wp-block-group[class*=" tarot-"]:not(.no-tarot):not(.tarot-owarini):not(.teacher-recommendation-block-v7) > p {
    line-height: 1.9;
    margin-bottom: 1.3rem;
    font-size: 1rem;
    letter-spacing: 0.02em;
    text-align: left !important;
    color: #4a4a4a;
}
#main .entry-content .wp-block-group[class*=" tarot-"]:not(.no-tarot):not(.tarot-owarini):not(.teacher-recommendation-block-v7) > p > img.tarot-card {
    margin-bottom: 1.2em;
}

/* H2 見出し */
#main .entry-content .wp-block-group[class*=" tarot-"]:not(.no-tarot):not(.tarot-owarini):not(.teacher-recommendation-block-v7) > h2.wp-block-heading {
    text-align: center;
    font-size: 1.7rem;
    margin-bottom: 1.8rem;
    letter-spacing: 0.5px;
    padding-bottom: 0.8rem;
    position: relative;
    margin-top: 0;
    color: #336699;
    font-weight: 700;
    border-bottom: 1px dashed #add8e6;
}
#main .entry-content .wp-block-group[class*=" tarot-"]:not(.no-tarot):not(.tarot-owarini):not(.teacher-recommendation-block-v7) > h2.wp-block-heading::before,
#main .entry-content .wp-block-group[class*=" tarot-"]:not(.no-tarot):not(.tarot-owarini):not(.teacher-recommendation-block-v7) > h2.wp-block-heading::after {
    content: '＊'; color: #63a4ff; font-size: 0.8em; margin: 0 0.5em; vertical-align: middle;
}

/* H3 見出し */
#main .entry-content .wp-block-group[class*=" tarot-"]:not(.no-tarot):not(.tarot-owarini):not(.teacher-recommendation-block-v7) > h3.wp-block-heading {
    color: #008080;
    font-size: 1.25rem;
    margin-top: 2.2rem;
    margin-bottom: 1rem;
    letter-spacing: 0.3px;
    font-weight: 700;
    text-shadow: none;
    padding: 0.5em 0.9em; /* padding調整 */
    text-align: left;
    border-left: 5px solid #4682b4;
    background-color: #f0f8ff;
    border-radius: 4px;
}

/* スマホでの結果ブロック調整 */
@media print, screen and (max-width: 750px) {
    #main .entry-content .wp-block-group[class*=" tarot-"]:not(.no-tarot):not(.tarot-owarini):not(.teacher-recommendation-block-v7) {
        padding: 1.8rem 1rem; /* スマホ用padding */
        margin-bottom: 2rem;
    }
    #main .entry-content .wp-block-group[class*=" tarot-"]:not(.no-tarot):not(.tarot-owarini):not(.teacher-recommendation-block-v7) > h2.wp-block-heading {
        font-size: 1.4rem; margin-bottom: 1.5rem;
    }
    #main .entry-content .wp-block-group[class*=" tarot-"]:not(.no-tarot):not(.tarot-owarini):not(.teacher-recommendation-block-v7) > h3.wp-block-heading {
        font-size: 1.15rem; margin-top: 1.8rem; padding: 0.4em 0.7em;
    }
    #main .entry-content .wp-block-group[class*=" tarot-"]:not(.no-tarot):not(.tarot-owarini):not(.teacher-recommendation-block-v7) > p {
        font-size: 0.95rem;
    }
}

/* --- 先生紹介ブロック (.teacher-recommendation-block-v7) デザイン --- */
.teacher-recommendation-block-v7 { background: linear-gradient(to bottom, #ffffff 95%, #f0f8ff); border: 1px solid #d0eaff; border-radius: 16px; box-shadow: 0 8px 30px rgba(99, 164, 255, 0.15); margin-top: 3rem; margin-bottom: 3rem; padding: 2.5rem 2rem; position: relative; overflow: hidden; }
.teacher-recommendation-block-v7::before { content: ""; position: absolute; top: -60px; right: -60px; width: 180px; height: 180px; background: radial-gradient(circle, rgba(131, 234, 241, 0.15) 0%, rgba(131, 234, 241, 0) 70%); border-radius: 50%; opacity: 0.9; pointer-events: none; }
.teacher-recommendation-block-v7::after { content: ""; position: absolute; bottom: -40px; left: -40px; width: 120px; height: 120px; background: radial-gradient(circle, rgba(99, 164, 255, 0.1) 0%, rgba(99, 164, 255, 0) 65%); border-radius: 50%; opacity: 0.9; pointer-events: none; }
.teacher-recommendation-block-v7 h4.wp-block-heading { font-size: 1.5em; font-weight: 700; margin-bottom: 1.5rem; line-height: 1.4; text-align: center !important; color: #0056b3; position: relative; padding-bottom: 0.8rem; }
.teacher-recommendation-block-v7 h4.wp-block-heading::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 70px; height: 3px; background: linear-gradient(90deg, rgba(99, 164, 255, 0), #63a4ff, rgba(131, 234, 241, 0.7), #83eaf1, rgba(131, 234, 241, 0)); border-radius: 1.5px; }
.teacher-recommendation-block-v7 h4.has-vivid-purple-color { color: var(--wp--preset--color--vivid-purple, #0056b3) !important; }
.teacher-recommendation-block-v7 p { line-height: 1.7; margin-bottom: 1.2rem; color: #334; text-align: left; }
.teacher-recommendation-block-v7 p.has-text-align-center { text-align: center !important; }
.teacher-recommendation-block-v7 p.has-dark-gray-color { color: #4a5568; }
.teacher-recommendation-block-v7 p.has-small-font-size { font-size: 0.9em; }
.teacher-recommendation-block-v7 p.has-background { border-radius: 8px; padding: 1.2rem 1.5rem !important; margin-bottom: 2rem !important; text-align: left; }
.teacher-recommendation-block-v7 p.has-pale-pink-background-color { background-color: #f0f9ff !important; color: #2c5282 !important; border-left: 4px solid #63a4ff; }
.teacher-recommendation-block-v7 h4.wp-block-heading + p { margin-bottom: 2rem; color: #4a5568; text-align: center; }
.teacher-recommendation-block-v7 figure.wp-block-image + p.has-text-align-center { margin-top: 1.5rem; margin-bottom: 0.5rem; font-size: 1.1em; font-weight: 700; color: #1a202c; }
.teacher-recommendation-block-v7 p.teacher-rec-catchphrase { font-size: 1.3em; font-weight: 700; line-height: 1.4; margin-bottom: 1.5rem; text-align: center !important; color: #0066cc; }
.teacher-recommendation-block-v7 p.teacher-rec-catchphrase strong { display: block; }
.teacher-recommendation-block-v7 p:not([class*="has-"]):not(.teacher-rec-catchphrase) { margin-bottom: 1.5rem; color: #334; }
.teacher-recommendation-block-v7 p strong { font-weight: bold; color: #0056b3; }
.teacher-recommendation-block-v7 p.has-background strong { color: #0066cc; }
.teacher-recommendation-block-v7 p:last-child { text-align: center !important; color: #718096 !important; font-size: 0.9em !important; line-height: 1.6; margin-bottom: 0; }
.teacher-recommendation-block-v7 p:last-child span { color: #a0aec0; font-size: 0.9em; display: inline-block; margin-top: 0.2em;}
.teacher-recommendation-block-v7 figure.wp-block-image { margin-top: 1.5rem; margin-bottom: 1rem; border-radius: 50%; width: 150px; height: 150px; margin-left: auto; margin-right: auto; overflow: hidden; border: 3px solid #ffffff; box-shadow: 0 5px 20px rgba(99, 164, 255, 0.25); }
.teacher-recommendation-block-v7 figure.wp-block-image img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; border: none; }
.teacher-recommendation-block-v7 .wp-block-cocoon-blocks-button-wrap-1 { margin-top: 2rem; margin-bottom: 1.5rem; text-align: center; }
.teacher-recommendation-block-v7 .c-button__cv__wrapper { position: relative; display: inline-block; }
.teacher-recommendation-block-v7 .c-button__cv__text { font-size: 1.5rem; color: #4a5568; margin-bottom: 0.5em; font-weight: 500; display: block; text-align: center;}
.teacher-recommendation-block-v7 .c-button__cv__gradation { display: inline-block; padding: 0.9em 2em; border-radius: 50px; background: linear-gradient(161deg, #63a4ff 0%, #83eaf1 74%); color: white; text-decoration: none; font-weight: bold; font-size: 1.1em; letter-spacing: 0.5px; box-shadow: 0 4px 15px rgba(99, 164, 255, 0.35); transition: transform 0.2s ease, box-shadow 0.2s ease; position: relative; overflow: hidden; }
.teacher-recommendation-block-v7 .c-button__cv__gradation::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 60%); transform: rotate(30deg); opacity: 0; transition: opacity 0.4s ease; pointer-events: none;}
.teacher-recommendation-block-v7 .c-button__cv__gradation:hover::before { opacity: 1; }
.teacher-recommendation-block-v7 .c-button__cv__gradation:hover { transform: translateY(-3px); box-shadow: 0 7px 20px rgba(99, 164, 255, 0.45); }
.teacher-recommendation-block-v7 .c-button__cv__gradation__text--emphasis { font-weight: bold; }
.teacher-recommendation-block-v7 .pr { font-size: 0.8em; color: #a0aec0; margin-top: 0.8em; }
.teacher-recommendation-block-v7 hr.wp-block-separator { margin-top: 2.5rem !important; margin-bottom: 1.5rem !important; border: none; height: 1px; background: linear-gradient(90deg, rgba(131, 234, 241, 0), rgba(99, 164, 255, 0.6), rgba(131, 234, 241, 0)); width: 70%; margin-left: auto; margin-right: auto; }
.teacher-recommendation-block-v7 hr.is-style-dots { background: none !important; border-top: 1px dotted #bce0ff !important; }
@media (max-width: 750px) {
    .teacher-recommendation-block-v7 { padding: 1.8rem 1rem; margin-top: 2rem; margin-bottom: 1.5rem; }
    .teacher-recommendation-block-v7 h4.wp-block-heading { font-size: 1.3em !important; margin-bottom: 1.2rem !important; padding-bottom: 0.6rem; }
    .teacher-recommendation-block-v7 h4.wp-block-heading::after { width: 60px; }
    .teacher-recommendation-block-v7 p { font-size: 0.95rem; margin-bottom: 1rem; }
    .teacher-recommendation-block-v7 figure.wp-block-image { width: 130px; height: 130px; margin-bottom: 0.8rem; }
    .teacher-recommendation-block-v7 figure.wp-block-image + p.has-text-align-center { font-size: 1em; margin-top: 1rem; margin-bottom: 0.4rem; }
    .teacher-recommendation-block-v7 p.teacher-rec-catchphrase { font-size: 1.15em; margin-bottom: 1.2rem; }
    .teacher-recommendation-block-v7 p.has-background { padding: 1rem 1.2rem !important; margin-bottom: 1.5rem !important; font-size: 0.85em; }
    .teacher-recommendation-block-v7 .c-button__cv__gradation { font-size: 1em; padding: 0.8em 1.5em; }
    .teacher-recommendation-block-v7 hr.wp-block-separator { margin-top: 2rem !important; margin-bottom: 1rem !important; }
    .teacher-recommendation-block-v7 p:last-child { font-size: 0.85em !important; }
}


/* --- lazyblock用？ モーダルスタイル (微調整) --- */
.tarot2_modal_w.tarot2_modal_wgo { position: relative; transition: none; background: transparent; }
.tarot2_modal_w.tarot2_modal_wgo .tarot2-modal-content { width: 100%; margin: 0; padding: 0; background: transparent; }
.tarot2_modal_w.tarot2_modal_wgo .tarot2-return, .tarot2_modal_w.tarot2_modal_wgo .tarot2-close { display: none; }
.tarot2-close_w { margin-top: 15px; text-align: center; }
.tarot2-close { font-size: 1rem; font-weight: 700; line-height: 1.5; display: inline-block; padding: 0.7rem 2.5rem; cursor: pointer; user-select: none; transition: background-color 0.3s, color 0.3s; text-align: center; vertical-align: middle; text-decoration: none; letter-spacing: .05em; border-radius: .5rem; color: #fff; background-color: #6c757d; border: none; }
.tarot2-close:hover { background-color: #5a6268; }
.tarot2_modal { display: none; position: fixed; z-index: 999; left: 0; top: 0; height: 100%; width: 100%; max-width: 100% !important; overflow: auto; background-color: rgba(0, 0, 0, 0.8); transition: opacity 0.3s ease-out; }
.tarot2-modal-body { text-align: center; padding: 20px 0; }
.tarot2-modal-content { background-color: #ffffff; width: 90%; max-width: 550px; margin: 8% auto; padding: 2rem 1.5rem; box-sizing: border-box; border-radius: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.2); }
.tarot2-content { text-align: left; font-size: 1rem; padding-top: 1.5rem; line-height: 1.7; color: #333; }
.tarot2-thumbnail { width: 100px; max-width: 30%; margin: 0 auto 1rem auto; display: block; border-radius: 6px; }
.tarot2-ttl { text-align: center; margin-top: 0; font-size: 1.5rem; margin-bottom: 1.2rem; font-weight: 600; color: #333; }
.tarot2-return { font-size: 1rem; font-weight: 700; line-height: 1.5; display: inline-block; padding: 0.7rem 2.5rem; cursor: pointer; user-select: none; transition: background-color 0.3s, color 0.3s; text-align: center; vertical-align: middle; text-decoration: none; letter-spacing: .05em; border-radius: .5rem; color: #fff; background-color: #ff7f50; border: none; margin-top: 1.5rem; }
.tarot2-return:hover { background-color: #ff6347; }
@media print, screen and (max-width: 750px) {
    .tarot2-thumbnail { width: 80px; }
    .tarot2-ttl { font-size: 1.3rem; margin-bottom: 1rem; }
    .tarot2-content { font-size: 0.95rem; }
    .tarot2-return, .tarot2-close { font-size: 0.9rem; padding: 0.6rem 2rem; }
    .tarot2-modal-content { width: 92%; padding: 1.5rem 1rem; margin-top: 12%; }
}

/* --- ケルト十字レイアウト用スタイル --- */
.tarot-celtic-cross-display {
    background-color: #f8f8f8; /* 背景色など任意で設定 */
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 1.5em 1em; /* 内側余白 */
    margin-bottom: 2.5em;
    box-sizing: border-box;
}

.tarot-celtic-cross-display h4 {
    margin-top: 0;
    margin-bottom: 1.5em;
    font-size: 1.1em;
    color: #555;
}

.celtic-cross-grid {
    display: grid;
    /* ケルト十字のレイアウトを定義 (5列 x 4行 を想定) */
    grid-template-columns: repeat(5, 1fr); /* 列 */
    grid-template-rows: repeat(4, auto);    /* 行 */
    gap: 10px 5px; /* 行間・列間 */
    max-width: 600px; /* スプレッド全体の最大幅 */
    margin: 0 auto;
    position: relative; /* 線の描画などに使うかも */
    align-items: center; /* カードを垂直中央揃え */
    justify-items: center; /* カードを水平中央揃え */
}

.card-pos {
    position: relative;
    text-align: center;
    width: 100%; /* グリッドアイテムの幅 */
    max-width: 100px; /* カードの最大幅 */
}

/* 各カードの位置をグリッドエリアで指定 */
.card-pos-1 { grid-area: 2 / 2 / 3 / 3; z-index: 10; } /* 中央下 */
.card-pos-2 { grid-area: 2 / 2 / 3 / 3; transform: rotate(90deg); z-index: 11; margin-left: 15px; /* 少し重ねる調整 */ } /* 中央上（横向き） */
.card-pos-3 { grid-area: 1 / 2 / 2 / 3; } /* 上 */
.card-pos-4 { grid-area: 3 / 2 / 4 / 3; } /* 下 */
.card-pos-5 { grid-area: 2 / 3 / 3 / 4; } /* 右 */
.card-pos-6 { grid-area: 2 / 1 / 3 / 2; } /* 左 */
.card-pos-7 { grid-area: 4 / 5 / 5 / 6; } /* 右下 */
.card-pos-8 { grid-area: 3 / 5 / 4 / 6; } /* 右中下 */
.card-pos-9 { grid-area: 2 / 5 / 3 / 6; } /* 右中上 */
.card-pos-10 { grid-area: 1 / 5 / 2 / 6;} /* 右上 */

/* 位置ラベルのスタイル */
.pos-label {
    display: block;
    font-size: 0.75em;
    color: #777;
    margin-bottom: 0.4em;
    line-height: 1.2;
    font-weight: bold;
}

/* カードタグ（置換後の画像）を含むPタグの調整 */
.card-pos p {
    margin: 0; /* Pタグのデフォルトマージンをリセット */
    line-height: 0; /* 画像下の余分なスペースをなくす */
}

/* カード画像自体のスタイル (既存の .tarot-card が適用されるはずだが念のため) */
.card-pos img.tarot-card {
    display: inline-block !important; /* Grid内での表示 */
    width: 80px !important; /* ケルト十字内でのカードサイズ */
    height: auto !important;
    margin: 0 !important; /* マージンリセット */
    box-shadow: 0 3px 8px rgba(0,0,0,0.1) !important;
    /* ポジション2の横向きカードの回転はCSSで直接指定 */
}
 /* ポジション2の画像回転 */
 .card-pos-2 img.tarot-card {
    transform: rotate(90deg) !important;
    /* 逆位置の場合はさらに180度回転が必要 → JSで対応 */
 }
 .card-pos-2 img.tarot-card.reversed {
    /* 90度 + 180度 = 270度 or -90度 */
    transform: rotate(270deg) !important;
 }


/* レスポンシブ対応 (スマホなど) */
@media (max-width: 600px) {
    .celtic-cross-grid {
        grid-template-columns: repeat(3, 1fr); /* スマホでは3列にするなど調整 */
        grid-template-rows: repeat(6, auto); /* 行数を調整 */
        max-width: 95%;
        gap: 8px 4px;
    }
    /* スマホ用に grid-area を再定義 (これはレイアウト次第) */
    .card-pos-1 { grid-area: 2 / 2 / 3 / 3; }
    .card-pos-2 { grid-area: 2 / 2 / 3 / 3; transform: rotate(90deg); margin-left: 10px; }
    .card-pos-3 { grid-area: 1 / 2 / 2 / 3; }
    .card-pos-4 { grid-area: 3 / 2 / 4 / 3; }
    .card-pos-5 { grid-area: 2 / 3 / 3 / 4; }
    .card-pos-6 { grid-area: 2 / 1 / 3 / 2; }
    .card-pos-7 { grid-area: 6 / 1 / 7 / 2; } /* 配置例 */
    .card-pos-8 { grid-area: 5 / 1 / 6 / 2; } /* 配置例 */
    .card-pos-9 { grid-area: 4 / 1 / 5 / 2; } /* 配置例 */
    .card-pos-10 { grid-area: 4 / 3 / 5 / 4; }/* 配置例 */

    .card-pos img.tarot-card {
         width: 65px !important; /* スマホでのカードサイズ */
    }
    .pos-label {
        font-size: 0.7em;
    }
}