/* ------------------------------
   CssTemplate: default.css 
   ------------------------------
   Fortune Page Style
------------------------------ */

/*==================================================================
   Fortune Page Style
==================================================================*/
/*==== 占いTOP画面 ====*/
/*-- 音声注意テキスト --*/
#fortuneTop .txt_sound_attn{display:flex;align-items:center;justify-content:center;gap:1rem;color:#231815;font-size:3.6rem;text-align:center;font-weight:bold;padding:1.5rem;margin-bottom:3rem;background:#ffc953;border-radius:2rem;}
#fortuneTop .txt_sound_attn > img.icon{height:1.1em;}

/*-- 動画エリア --*/
#fortuneTop .area_video {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #000;z-index: 9999;display: flex;align-items: center;justify-content: center;}
#fortuneTop .area_video video {width: 100%;height: 100%;object-fit: cover;}

/*==== 占い結果画面 ====*/
/*-- 結果画面のメインコンテンツは初期非表示 --*/
#fortuneResult{transition: opacity 0.3s ease, visibility 0.3s ease;}
#fortuneResult.hidden {
    opacity: 0;
    visibility: hidden;
}
/*-- アドバイスエリア --*/
#fortuneResult .area_advice{margin-block:6rem;}
#fortuneResult .area_advice > p{position:relative;font-weight:bold;padding:2rem 3rem;margin:3rem 0 0;border-radius:2rem;background:var(--site-bg-color);}
#fortuneResult .area_advice > p::after{position: absolute;content: "";top:calc(-3.5rem + 1px);left: 5rem;
 border: 1.5rem solid transparent;
 border-bottom: 2rem solid var(--site-bg-color);}