/*
Theme Name: beakyosai
Theme URI: 
Author: 
Author URI: 
Description: 
Requires at least: 6.0
Tested up to: 6.2.1
Requires PHP: 5.7
Version: 0.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: beakyosai
Tags: 
*/

/* Styles for dialog window */
[id^="small-dialog-"] {
    background: white;
    padding: 20px 30px;
    text-align: left;
    max-width: 400px;
    margin: 40px auto;
    position: relative;
    border-radius: 10px;
    padding: 30px 20px 20px 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 650px;
    margin: auto;
}

/* タイトルのスタイル設定 */
[id^="small-dialog-"] p {
    color: #0c53fb;
    /* キーカラー1で文字色を設定 */
    font-size: 1.5em;
    /* 文字の大きさを大きく */
    font-weight: bold;
    /* 太字にする */
}

/* 詳細テキストのスタイル設定 */
[id^="small-dialog-"] div {
    color: #333;
    /* 読みやすい濃い灰色に設定 */
    font-size: 1em;
    /* 標準の文字サイズ */
    line-height: 1.6;
    /* 行間を広めに設定 */
    margin-top: 10px;
    /* タイトルとの間隔 */
}

/* ポップアップ内のリンクのスタイル */
[id^="small-dialog-"] a {
    color: #88a6f7;
    /* キーカラー2でリンク色を設定 */
    text-decoration: none;
    /* 下線を無しに設定 */
}

[id^="small-dialog-"] a:hover {
    text-decoration: underline;
    /* ホバー時は下線を表示 */
}

/**
 * Fade-move animation for second dialog
 */

/* at start */
.my-mfp-slide-bottom .zoom-anim-dialog {
    opacity: 0;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;

    -webkit-transform: translateY(-20px) perspective(600px) rotateX(10deg);
    -moz-transform: translateY(-20px) perspective(600px) rotateX(10deg);
    -ms-transform: translateY(-20px) perspective(600px) rotateX(10deg);
    -o-transform: translateY(-20px) perspective(600px) rotateX(10deg);
    transform: translateY(-20px) perspective(600px) rotateX(10deg);

}

/* animate in */
.my-mfp-slide-bottom.mfp-ready .zoom-anim-dialog {
    opacity: 1;
    -webkit-transform: translateY(0) perspective(600px) rotateX(0);
    -moz-transform: translateY(0) perspective(600px) rotateX(0);
    -ms-transform: translateY(0) perspective(600px) rotateX(0);
    -o-transform: translateY(0) perspective(600px) rotateX(0);
    transform: translateY(0) perspective(600px) rotateX(0);
}

/* animate out */
.my-mfp-slide-bottom .mfp-removing .zoom-anim-dialog {
    opacity: 0;

    -webkit-transform: translateY(-10px) perspective(600px) rotateX(10deg);
    -moz-transform: translateY(-10px) perspective(600px) rotateX(10deg);
    -ms-transform: translateY(-10px) perspective(600px) rotateX(10deg);
    -o-transform: translateY(-10px) perspective(600px) rotateX(10deg);
    transform: translateY(-10px) perspective(600px) rotateX(10deg);
}

/* Dark overlay, start state */
.my-mfp-slide-bottom.mfp-bg {
    opacity: 0;

    -webkit-transition: opacity 0.3s ease-out;
    -moz-transition: opacity 0.3s ease-out;
    -o-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-out;
}

/* animate in */
.my-mfp-slide-bottom.mfp-ready.mfp-bg {
    opacity: 0.8;
}

/* animate out */
.my-mfp-slide-bottom.mfp-removing.mfp-bg {
    opacity: 0;
}

.heading-primary {
    margin-bottom: 50px;
}