@charset "utf-8";

/*----------------------------------------------------
 共通
----------------------------------------------------*/
    .app-contents h2 {
        padding: 1.0em 0;
        margin-bottom: 1.0em;
        text-align: center;
        font-weight: bold;
        display: block;
        width: 100%;
        border-bottom: 3px solid #666666;
    }
    .app-contents h2 img {
        height: 1.5em;
        margin: 0 0.75em;
        vertical-align: middle;
    }
    .app-contents h3 {
        padding: 0px;
        margin-bottom: 0.5em;
        text-align: left;
        font-weight: bold;
        display: block;
        width: 100%;
        border: 0px;
    }
    
    .app-exp h3 {
        padding: 0.3em 0.5em;
        margin-bottom: 1.0em;
        text-align: left;
        font-weight: bold;
        display: block;
        width: 100%;
        border-left: 10px solid #666666;
        border-bottom: 3px solid #666666; 
    }
    
    .app-exp h4 {
        margin: 0.5em 0 0;
        text-align: left;
        font-weight: bold;
        display: block;
        width: 100%;
    }

    .app-exp p {
        font-size: 1.5em;
        padding: 0.5em;
    }

    .app-exp a {
        cursor: pointer;
    }

    .app-exp ul {
        font-size: 1.5em;
        padding: 0.5em 2.0em;
    }

    .app-exp li {
        padding: 0.0.5em;
    }

    .app-exp img {
        border: 1px solid #999999;
        max-width: 400px;
        width: 100%;
    }
    
    .app-exp .exp-background {
        background-color: #fff8e0;
        border-radius: 5px;
        padding: 1.0em 1.0em 2.0em;
        margin-bottom: 0.5em;
    }

/*----------------------------------------------------
 トップページ
----------------------------------------------------*/
    .app-top {
        text-align: center;
        margin-top: 3.0em;
    }
    .app-top img {
        width: 100%;
        max-width: 650px;
    }
    .app-top-exp {
        margin-top: 0.5em;
        padding-top: 1.0em;
        border-radius: 5px;
        background-color: #f9f9f9;
    }
    
/*----------------------------------------------------
 ボタン系
----------------------------------------------------*/
    .app-btn {
        padding: 1.0em;
        text-align: center;
    }
    .app-btn button {
        width: 100%;
        max-width: 800px;
        padding: 1.0em 0;
        font-size: 1.5em;
        color: #ffffff;
        font-weight: bold;
        text-decoration: none;
    }
    
    .app-btn a {
        color: #ffffff;
    }
    
    .app-btn button.btn-link {
        color: #666666;
        width: 100%;
        max-width: 300px;
        font-weight: normal;
        font-size: 1.0em;
        color: #0d6efd;
    }

    .app-btn button.btn-link:hover {
        opacity: 0.5;
    }

@media screen and (max-width: 768px) {

    .app-btn button {
        font-size: 1.0em;
    }

}
    
/*----------------------------------------------------
 札表示系
----------------------------------------------------*/
    .today-one {
        text-align: center;
        padding: 0 1.0em;
    }
    .today-one img {
        vertical-align: top;
        width: 100%;
        max-width: 250px;
    }
    .today-one p {
        background-color: #f0fff0;
        border-radius: 5px;
        font-size: 2.0em;
        line-height: 1.35em;
        display: block;
        padding: 0.5em 0.5em 0.2em;
    }
    .today-one span {
        font-size: 0.75em;
    }
    .today-two {
        text-align: center;
        padding: 0 1.0em;
    }
    .today-two img {
        vertical-align: top;
        width: 100%;
        max-width: 100px;
    }
    .today-two button {
        padding: 0.5em 1.25em;
        font-size: 2.0em;
        margin-top: 1.0em;
        border-radius: 10%;
    }

    
    .kaminoku {
        font-size: 2.0em;
        font-weight: bold;
        font-family: monospace; /* 等幅フォントにするとタイプライター感が出ます */
        line-height: 1.5em; /* 表示前のがたつき防止 */
        margin-bottom: 1.0em;            
    }
    .fuda {
        width: 100%; /* お好みのサイズに調整してください */
        cursor: pointer;
        /* 動きを滑らかにする（0.8秒かけて変化） */
        transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.8s;
        user-select: none; /* テキスト選択を防ぐ */
        margin-bottom: 1.0em;
    }
    .kaminoku-answer {
        color: #ffffff;
        font-size: 2.0em;
        font-weight: bold;
        font-family: monospace; /* 等幅フォントにするとタイプライター感が出ます */
        line-height: 1.5em; /* 表示前のがたつき防止 */
        margin-bottom: 1.0em;            
    }
    .fuda-answer {
        width: 100%; /* お好みのサイズに調整してください */
        /* 動きを滑らかにする（0.8秒かけて変化） */
        transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.8s;
        user-select: none; /* テキスト選択を防ぐ */
        margin-bottom: 1.0em;
        max-width: 250px;
    }

/*----------------------------------------------------
 モーダルビュー
----------------------------------------------------*/
    .modal-view {
        position: fixed;
        z-index: 10;
        top:0;
        left:0;
        width: 100%;
        height: 100%;
        text-align: center;
        padding-top: 2.0em;
        color: #ffffff;
    }
    
    .modal-view .modal-background {
        background-color: rgba(0,0,0,0.85);
        position: absolute;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
        z-index: -1;
    }
    
    .modal-view .container {
        overflow-y: scroll;
        max-height: 90%;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    .modal-view .container::-webkit-scrollbar {
        display: none;
    }
    
    .modal-view row {
        overflow-y: auto; /* ここが重要！ */
        -webkit-overflow-scrolling: touch; /* iPhoneでのスクロールを滑らかにする */        
    }
    
    /* モーダル全体のコンテナ */
    .full-screen-view {
        display: flex;
        flex-direction: column; /* 縦に並べる */
        height: 100vh;         /* 画面いっぱいの高さ */
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        padding: 2.0em;        /* 全体の余白 */
        box-sizing: border-box;
        text-align: center;
    }

    /* メッセージエリア：余ったスペースをすべて使い、中身を上下中央にする */
    .message-container {
        flex-grow: 1;          /* 可能な限りの高さを確保 */
        display: flex;
        flex-direction: column;
        align-items: center;    /* 垂直方向の中央揃え */
        justify-content: center; /* 水平方向の中央揃え */
    }

    /* ボタンエリア：常に下側に居座る */
    .button-container {
        padding-bottom: 2.0em; /* 画面下端との隙間 */
        width: 100%;
        max-width: 800px;      /* 他の要素と幅を合わせる場合 */
        margin: 0 auto;
        flex-shrink: 0;
    }
    
    /* 例：コンテンツエリア内だけで完結させる場合 */
    .main-content-section {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 66px);
        position: relative;
    }
    
@media screen and (max-width: 768px) {

    .main-content-section {
        height: calc(100vh - 120px);
    }

}


/*----------------------------------------------------
 今日の一首
----------------------------------------------------*/
    .page-ctrls {
        margin-top: 2.5em;
        border-top: 3px solid #666666;
        text-align: center;
        display: flex;
        align-items: center;
        text-align: center;
    }
    .page-ctrls .pager {
        font-size: 2.0em;
        vertical-align: middle;
        height: 100%;
    }
    .page-ctrls .ctrl-btn {
        padding: 1.0em;
        text-align: center;
    }
    .page-ctrls .ctrl-btn button {
        width: 100%;
        padding: 1.0em 0;
        font-size: 1.5em;
        color: #ffffff;
        font-weight: bold;
        text-decoration: none;
    }
 
@media screen and (max-width: 768px) {

    .page-ctrls .ctrl-btn button {
        font-size: 1.0em;
    }

}
    
/*----------------------------------------------------
 練習モード
----------------------------------------------------*/
    .sub-title {
        width: 100%;
        font-weight: bold;
        color: red;
        margin: 0;
        font-size: 1.25em;
    }

    #start-area {
        text-align: center;
    }
    #play-area {
        width: 100%;
        text-align: center;
        max-width: 800px;
        margin: 1.5em auto 0;
    }

    #result-area {
        text-align: center;
        margin-top: 1.5em;
    }
    .result-title {
        font-size: 1.8em;
        font-weight: bold;
    }
    .result-table {
        font-size: 1.0em;
        width: 100%;
        max-width: 800px;
        background-color: #ffffff;
        margin: 1.5em auto 0.5em;
    }
    .result-table th {
        width: 30%;
        font-size: 1.3em;
        text-align: left;
        border: 1px solid #aaa;
        padding: 0.5em;
        background-color: #eeeeee;
    }        
    .result-table td {
        text-align: left;
        font-size: 1.3em;
        border: 1px solid #aaa;
        padding: 0.5em;
    }
    
    .exp-area {
        text-align: center;
        background-color: #ffffff;
        padding: 1.0em;
        border-radius: 5px;
    }
    .exp-area img {
        border: 3px solid #999;
        max-height: 300px;
        margin-bottom: 1.0em;
    }
    .exp-area p {
        text-align: left;
        display: inline-block;
        margin: 0 0.5em 1.0em;
    }
    .quiz-select {
        font-size: 1.5em;
        font-weight: bold;
        padding: 0.5em;
        width: 100%;
        max-width: 800px;
    }
    
/*----------------------------------------------------
 設定画面
----------------------------------------------------*/
    .setting-view {
        max-width: 800px;
        width: 100%;
        text-align: center;
        margin: auto;
        padding: 1.0em 0;
    }
    
    .setting-view h2 {
        margin-bottom: 1.0em;
    }
    .setting-view h3 {
        border: 0;
        font-size: 1.5em;
    }
    
    .setting-line {
        padding-top: 1.0em;
        padding-bottom: 1.0em;
        margin: 1.0em 0;
        text-align: left;
    }
    
    .setting-separate {
        padding-bottom: 2.0em;
        border-bottom: 1px dashed #999999;
        margin-bottom: 2.0em;
    }
    
    .setting-text {
        font-size: 1.5em;
        padding: 0.3em;
    }
    
/*----------------------------------------------------
 チェックボックス系
----------------------------------------------------*/  
    .toggle-button {
        display: inline-block;
        position: relative;
        width: 88px;
        height: 44px;
        border-radius: 44px;
        background-color: #dddddd;
        cursor: pointer;
        transition: background-color .4s;
    }

    .toggle-button:has(:checked) {
        background-color: #4bd865;
    }

    .toggle-button::after {
        position: absolute;
        top: 0;
        left: 0;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        box-shadow: 0 0 5px rgb(0 0 0 / 20%);
        background-color: #fff;
        content: '';
        transition: left .4s;
    }

    .toggle-button:has(:checked)::after {
        left: 44px;
    }

    .toggle-button input {
        display: none;
    }
        
/*----------------------------------------------------
 集めた札
----------------------------------------------------*/        

    .fuda-wrap {
        position: relative;
        padding: 0.5em;
    }
    .fuda-wrap img {
        width: 100%;
        transition: transform 0.3s ease;
        border-radius: 5px;
    }
    .fuda-wrap img.collect:hover {
        transform: scale(1.1);
        cursor: pointer;
    }
    .fuda-wrap span {
        position: absolute;
        text-align: center;
        color: #D9D9D9;
        font-size: 2.0em;
        font-weight: bold;
        vertical-align: middle;
        width: 100%;
        z-index: 1;
        top: calc(50% - 1.0em);
        left: 0;
    }
    
    #detail-view {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 20;        
        width: 100%;
        height: 100%;
    }    
    .screen-black {
        background-color: rgba(0,0,0,0.8);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }
    
    .badge-container {
      display: inline-block;
      position: relative;
    }

    /* ターゲットになった時だけ赤丸を表示 */
    .badge-container:before {
      content: "New";
      position: absolute;
      top: 10px;    /* 上からの位置（調整可） */
      left: 10px;  /* 右からの位置（調整可） */
      width: 3.0em;   /* 赤丸の幅 */
      line-height: 1.0em;  /* 赤丸の高さ */
      background-color: #ff0000; /* 赤色 */
      border-radius: 3.0em;        /* 真ん丸にする */
      border: 2px solid white;   /* 白い縁取り（画像の上で目立たせるため） */
      z-index: 10;               /* 画像より上に表示 */
      box-shadow: 0 2px 4px rgba(0,0,0,0.3); /* 軽い影で浮かせる */
      text-align: center;
      color: #ffffff;
      padding: 0.25em 0;
    }
    
    .setting-area {
        border-radius: 10px;
        padding: 1.0em 1.0em 0.8em;
        background-color: #eeeeee;
        text-align: right;
        margin: 0 1.0em 1.0em;
    }

    .setting-area span {
        font-size: 1.5em;
        display: inline-block;
        line-height: 44px;
        vertical-align: top;
        margin-right: 0.5em;
    }
    
@media screen and (max-width: 768px) {

    .setting-area {
        text-align: center;
    }
    .setting-area span {
        font-size: 1.0em;
    }

}
    
/*==============================================================================*/
    
/*----------------------------------------------------
 ローディング
----------------------------------------------------*/
    /* ローディング画面の背景 */
    #loader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: #fff; /* 背景色 */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 9999; /* 一番手前に表示 */
        transition: opacity 0.8s ease; /* 消える時のアニメーション */
    }
    
    .loader {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        z-index: 9999; /* 一番手前に表示 */
    }

    /* くるくる回るアニメーション（スピナー） */
    .spinner {
        width: 50px;
        height: 50px;
        border: 5px solid #ddd;
        border-top-color: #0fb958;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-bottom: 10px;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }

    /* 読み込み完了後に消すためのクラス */
    .loaded {
        opacity: 0;
        pointer-events: none;
    }

/*----------------------------------------------------
 プログレスバー
----------------------------------------------------*/

    /* バーの外枠 */
    .progress-wrap {
      width: 300px;
      height: 20px;
      background-color: #eee;
      border-radius: 10px;
      overflow: hidden; /* 中のバーがはみ出さないように */
      margin-top: 20px;
      border: 1px solid #ccc;
    }

    /* 中の進捗バー */
    .progress-bar {
      width: 0%; /* 初期は0 */
      height: 100%;
      background-color: #28a745; /* インストールっぽい緑色 */
      /* 5秒かけて変化させる設定 */
      transition: width 5s linear;
    }

    /* 完了時の色（任意） */
    .progress-bar.complete {
      background-color: #007bff;
    }
    
/*----------------------------------------------------
 アニメーション系
----------------------------------------------------*/

    /* ゲットアニメーション */
    @keyframes rollInLeft {
        0% {
            /* 開始時：左に大きくズレて、透明で、逆回転している状態 */
            transform: translateX(-150%) rotate(-720deg);
            opacity: 0;
        }
        100% {
            /* 終了時：元の位置に戻り、不透明で、回転も0度になる */
            transform: translateX(0) rotate(0deg);
            opacity: 1;
        }
    }

    .roll-in {
        display: block !important; /* show()の代わり */
        animation: rollInLeft 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
    }
    
    
    /* ゆれアニメーション */
    .shake {
        animation: shake-animation 0.1s infinite; /* 0.1秒で高速ループ */
    }

    @keyframes shake-animation {
        0% { transform: translateX(0); }
        25% { transform: translateX(-5px) rotate(-2deg); }
        50% { transform: translateX(5px) rotate(2deg); }
        75% { transform: translateX(-5px) rotate(-2deg); }
        100% { transform: translateX(0); }
    }