/* ********************************** トピックスページ（トクちゃん占い）の設定 ********************************** */

.tokucyan_uranai .inner_wrapper{
    background: url(../../images/systems/topics/tokucyan_uranai/img/uranai_bg.svg) repeat;
    background-position: 0 0;
    animation: tokucyan_uranaiBackground 150s linear infinite;
}

/* アニメーション定義 */
@keyframes tokucyan_uranaiBackground {
    0% {
        background-position: 0 0; /* 開始位置 */
    }
    100% {
        background-position: 10000px 10000px; /* 斜め下に移動 */
    }
}

.tokucyan_uranai .uranai_wrapper{
    display: grid;                
    grid-template-columns: repeat(2, 1fr); /* 2カラム設定 */
    justify-items: center;       /* 各アイテムを水平にセンター揃え */
    align-items: baseline;         /* 各アイテムを垂直にベースラインに揃え */
    max-width: 1600px;
    margin: 0 auto;
}

.tokucyan_uranai .uranai_wrapper li{
    width: 100%;
    flex-direction: column; /* 要素を縦方向に並べる */
    align-items: center;     /* 垂直方向の中央揃え */
    text-align: center;
}

.tokucyan_uranai .day_title_wrapper{
    text-align: center;
    margin-top: 0em;
}

.tokucyan_uranai .date,
.tokucyan_uranai .comment,
.tokucyan_uranai .day_title{
    font-weight: 900;
}

.tokucyan_uranai .date{
    margin-bottom: 0.5em;
}

.tokucyan_uranai .date::before,
.tokucyan_uranai .date::after{
    content: "";
    background: url(../../images/systems/topics/tokucyan_uranai/img/slash_black.svg) no-repeat;
    background-size: contain;
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -3px;
}

.tokucyan_uranai .date::after{
    transform: scale(-1, 1);
}

.tokucyan_uranai .comment{
    font-size: 1.7em;
    line-height: 1.6em;
}

.tokucyan_uranai .day_title{
    margin-bottom: 1em;
    font-size: 3em;
}


.tokucyan_uranai .day_title .comment{
    background: linear-gradient(transparent 60%, #FFF9B3 60%)
}

.tokucyan_uranai .day_title .comment::before{
    content: "「";
}

.tokucyan_uranai .day_title .comment::after{
    content: "」";
}

.tokucyan_uranai .Illust_wrapper{
    max-width: 600px;
    margin: 0 auto;
}

.Illust_wrapper img {
    animation: tokucyan_uranaiShake 4s ease-in-out infinite;
    animation-iteration-count: infinite; /* 無限に繰り返し */
    animation-timing-function: ease-in-out;
}

/* ブルブル振動のアニメーション */
@keyframes tokucyan_uranaiShake {
    0% {
    transform: translateX(5px); }
    5% {
    transform: translateX(-5px); }
    10% {
    transform: translateX(5px); }
    20% {
    transform: translateX(0); }
    25% {
    transform: translateX(0); }
    30% {
    transform: translateX(0); }
    50% {
    transform: translateX(0); }
    100% {
    transform: translateX(0); }
}










.tokucyan_uranai .scratch_sub_ttl{
    font-size: 2em;
    margin: 0 0 1.5em 0;
}

.tokucyan_uranai.scratch_box {
    position: relative;
}

.tokucyan_uranai .scratch_content {
    position: relative;
    width: 90%;
    height: 90%;
    max-width: 530px;
    height: 530px;
    margin: 0 auto;
    overflow: hidden; /* 子要素がはみ出ないように */
    border-radius: 5em;
    border: solid 8px #A8A8A8;
    cursor: url(../../images/systems/topics/tokucyan_uranai/img/finger.png), auto; /* カスタムカーソル */
}

.tokucyan_uranai .scratch_image {    
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    clip-path: inset(0); /* 初期状態では全体が表示 */
    transition: clip-path 0.1s; /* アニメーション効果 */
    z-index: 1; /* scratch_imageを最上層に */
}

/* 運勢タイトルのスタイル */
.tokucyan_uranai .fortune_title {
    position: absolute; /* 絶対位置を指定 */
    top: 20%; /* 親要素の中央に配置 */
    left: 50%; /* 親要素の中央に配置 */
    transform: translate(-50%, -50%); /* 中心点を調整 */
    font-size: 6em; /* フォントサイズ */
    font-weight: bold; /* フォントを太字に */
    z-index: 2; /* fortune_titleをscratch_imageの上に */
    writing-mode: horizontal-tb; /* 横書きに設定 */
    width: 100%;
}



/* キラキラシルバーオーバーレイ */
.tokucyan_uranai .scratch_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: clip-path 0.1s; /* clip-pathのアニメーション効果 */
    pointer-events: auto; /* マウスイベントを有効に */
    z-index: 3; /* scratch_overlayを最上層に */
    clip-path: inset(0); /* 初期状態では全体が表示 */
}


.tokucyan_uranai .scratch_overlay canvas{
    width: 100%;
    height: 100%;
}


/* 「スクラッチしてみよう！」コメント */
.tokucyan_uranai .message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 4;
    transition: opacity 0.3s; /* フェード効果 */
    color: grey;
    line-height: 1.5em;
    font-weight: 600;
    font-size: 3em;
}

/* ホバー時にmessageを透明にする */
.tokucyan_uranai .scratch_content:hover .message {
    opacity: 0;
}















.tokucyan_uranai .memo_box{
    background-color: aliceblue;
    padding: 1.5em;
    margin-top: 2em;
    font-size: 0.5em;
    line-height: 2em;
}



.tokucyan_uranai .sns_wrapper{
    margin-top: 1.4em;
    line-height: 1.4em;
}

.tokucyan_uranai .sns_wrapper .sns_list{
    display: inline-flex;
    align-items: center;
    margin-top: 1.5em;
}

.tokucyan_uranai .sns_wrapper .sns_list li{
    width: fit-content;
    display: inline-block;
}

.tokucyan_uranai .sns_wrapper .sns_list a{
    width: 2em;
    height: 2em;
    background-color: black;
    margin-left: 0.5em;
    border-radius: 1em;
    display: block;
    position: relative;
    transition: transform 0.3s; /* スムーズなトランジション */
}

.tokucyan_uranai .sns_wrapper .sns_list li img{
    position: absolute; /* 絶対位置を指定 */
    top: 50%; /* 親要素の中央に配置 */
    left: 50%; /* 親要素の中央に配置 */
    transform: translate(-50%, -50%); /* 中心点を調整 */
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(300deg) brightness(105%) contrast(102%);
    width: 60%;                 /* 画像の幅を指定 */
}

.tokucyan_uranai .sns_wrapper .sns_list li a:hover{
    background-color: var(--maincolor);
    transform: scale(0.9); /* 90%に縮小 */
}





.tokucyan_uranai #page-top {
    z-index: 3;
}