/* ========================================
   01. カラーパレット
======================================== */

:root{
    --bg:#E6E3DC;
    --paper:#F8F5EA;

    --green:#B3C36A;
    --beige:#BBA576;

    --pink:#FCCCD0;
    --yellow:#F1EEA2;
    --olive:#7D8F16;
    --darkGreen:#434C1F;
    --brown:#6A4C25;
    --blue:#BDDDE8;

    --title:#331700;
    --text:#434C1F;
}


/* ========================================
   02. リセット
======================================== */

*{
    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
    margin:0;
    padding:0;

    overflow:hidden;
}

body{
    min-height:100dvh;

    font-family:
        "Yu Mincho",
        "Hiragino Mincho ProN",
        serif;

    background:var(--bg);
    color:var(--text);

    overscroll-behavior:none;
}

.hidden{
    display:none !important;
}


/* ========================================
   03. アプリ本体
======================================== */

#app{
    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100dvh;

    margin:0;
    padding:0;

    overflow:hidden;
}


/* ========================================
   04. 共通ボタン
======================================== */

button{
    display:block;
    width:100%;

    margin-top:10px;
    padding:16px;

    background:var(--beige);
    color:var(--title);

    border:2px solid var(--brown);
    border-radius:10px;

    cursor:pointer;

    font-family:
        "Yu Mincho",
        "Hiragino Mincho ProN",
        serif;

    font-size:17px;
    font-weight:bold;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

button:hover{
    background:var(--brown);
    color:var(--yellow);
}

button:active{
    transform:scale(.98);
}


/* ========================================
   05. 各画面を固定
======================================== */

#start-screen,
#quiz-screen,
#result-container{
    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100dvh;

    margin:0;
}


/* ========================================
   06. スタート画面
======================================== */

#start-screen{
    position:relative;
    z-index:20;

    width:100%;
    height:100dvh;

    background-image:url("images/start_background.webp");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    overflow:hidden;

    perspective:1600px;
}

#start-page{
    position:relative;
    width:100%;
    height:100%;
    transform-origin:left center;
    transform-style:preserve-3d;
    backface-visibility:hidden;
    will-change:transform;
}

/* ========================================
   本を開いて光へ
======================================== */

/* 本 */

#start-book{
    position:relative;
    z-index:2;
    transform-origin:center center;
    will-change:transform;
}


/* ボタンも一緒に消していく */

#start-screen.book-open #start-btn{
    animation:buttonFade .45s ease-out forwards;
}

#start-screen.book-open #start-book{
    animation:bookTurn 3s ease-in-out forwards;
    z-index:20;
}

@keyframes bookTurn{

    0%{
        transform-origin:center center;
        transform:scale(1) rotateY(0deg);
        opacity:1;
    }

    72%{
    transform-origin:center center;
    transform:scale(2.0) rotateY(0deg);
    opacity:1;
}

100%{
    transform-origin:left center;
    transform:scale(2.0) rotateY(-90deg);
    opacity:0;
}

}

/* 白飛び */

#white-transition{
    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100dvh;

    background:#fff;

    opacity:0;

    pointer-events:none;

    z-index:9999;
}

#white-transition.active{
    animation:whiteTransition 3s ease-in-out forwards;
}

@keyframes whiteTransition{

    0%{
        opacity:0;
    }

    65%{
        opacity:0;
    }

    80%{
        opacity:.15;
    }

    90%{
        opacity:.6;
    }

    100%{
        opacity:1;
    }

}

/* ========================================
   ボタンを消す
======================================== */

@keyframes buttonFade{

    0%{
        opacity:1;
    }

    100%{
        opacity:0;
    }

}




/* 図鑑 */

#start-book img{
    display:block;

    width:450px;
    max-width:90%;

    margin:0 auto;
}


/* ========================================
   スタートボタン
======================================== */

#start-btn{
    position:relative;

    display:flex;
    justify-content:center;
    align-items:center;

    width:100%;
    height:280px;

    margin:-200px auto 0;
    padding:0;

    background:transparent;
    border:none;

    cursor:pointer;

    z-index:5;
}


/* ボタン画像 */

#start-btn img{
    display:block;

    width:280px;
    max-width:70%;

    pointer-events:none;
}


/* ボタン文字 */

#start-btn span{
    position:absolute;

    top:47%;
    left:50%;

    transform:translate(-50%,-50%);

    color:#BBA576;

    font-family:
        "Yu Mincho",
        "Hiragino Mincho ProN",
        serif;

    font-size:20px;
    font-weight:bold;
    letter-spacing:2px;

    white-space:nowrap;

    pointer-events:none;
}


/* ボタンの位置調整 */

#start-book{
    position:relative;
    top:-50px;
}

#start-btn{
    top:-50px;
}


/* ホバー・クリック */

#start-btn:hover{
    transform:scale(1.05);
}

#start-btn:active{
    transform:scale(.96);
}
/* =========================
   質問画面：右下メニュー
========================= */

#quiz-menu{
    position:fixed;
    right:25px;
    bottom:25px;
    z-index:100;
}

/* 3本線ボタン */
#menu-toggle{
    width:60px;
    height:60px;
    padding:0;
    border:none;
    border-radius:50%;
    background:#F8F5EA;
    box-shadow:0 3px 8px rgba(0,0,0,.2);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    cursor:pointer;
}

#menu-toggle span{
    display:block;
    width:27px;
    height:3px;
    background:#434C1F;
    border-radius:3px;
    transition:.2s;
}

/* メニュー本体 */
#menu-panel{
    position:absolute;
    right:0;
    bottom:70px;

    width:180px;
    padding:10px;

    background:#F8F5EA;
    border:2px solid #BBA576;
    border-radius:12px;
    box-shadow:0 4px 12px rgba(0,0,0,.18);

    display:none;
}

/* 開いた状態 */
#quiz-menu.open #menu-panel{
    display:block;
}

#menu-panel a{
    display:block;
    padding:14px 12px;

    color:#331700;
    text-decoration:none;
    text-align:center;
    font-family:inherit;
    font-size:15px;
}

#menu-panel a:hover{
    background:#F1EEA2;
    border-radius:8px;
}


/* ========================================
   08. 質問画面
======================================== */

#quiz-screen{
    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100dvh;

    margin:0;
    padding:40px;

    background-image:url("images/play-bg-pc.webp");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    overflow:hidden;

    overscroll-behavior:none;
}


/* ========================================
   09. フレーム共通
======================================== */

.play-frame{
    position:absolute;

    display:block;

    pointer-events:none;

    z-index:1;
}


/* ========================================
   10. PC 上フレーム
======================================== */

.frame-pc-left{
    top:0;
    left:0;

    width:75vw;
}

.frame-pc-right{
    top:0;
    right:0;

    width:75vw;
}


/* ========================================
   11. PC 下フレーム
======================================== */

.frame-pc-bottom{
    left:0;
    bottom:0;

    width:84vw;
    height:auto;

    z-index:3;
}


/* PCではSP用を非表示 */

.frame-sp-left,
.frame-sp-right,
.frame-sp-bottom{
    display:none;
}


/* ========================================
   12. 問題数
======================================== */

#progress-container{
    width:fit-content;

    margin:0 auto 20px;

    text-align:center;

    position:relative;
    z-index:5;
}

#progress-text{
    display:flex;

    align-items:baseline;
    justify-content:center;

    color:var(--title);

    line-height:1;

    white-space:nowrap;
}

#current-number{
    font-size:100px;
    font-weight:normal;
}

#total-number{
    font-size:45px;
    font-weight:normal;

    margin-left:5px;
}


/* ========================================
   13. 質問
======================================== */

#question-container{
    width:100%;
    max-width:900px;

    margin:20px auto 0;

    text-align:center;

    position:relative;
    z-index:5;
}

#question{
    width:100%;
    max-width:900px;

    margin:35px auto 30px;

    color:var(--darkGreen);

    font-size:26px;

    font-weight:bold;

    line-height:1.7;

    text-align:center;
}

/* ========================================
   14. 選択肢
======================================== */

#choices{
    width:100%;
}

#choices button{
    position:relative;

    width:min(600px,100%);

    min-height:160px;

    margin:0 auto;

    padding:30px 50px;

    background-color:transparent;

    background-repeat:no-repeat;
    background-position:center;
    background-size:100% 100%;

    border:none;

    font-family:inherit;

    font-size:20px;

    color:var(--title);

    cursor:pointer;
}

#choices button.choice-a{
    background-image:url("images/choice-frame-a.webp");
}

#choices button.choice-b{
    background-image:url("images/choice-frame-b.webp");
}

.choice-b{
    transform:none;
}

@media (min-width:601px){

    /* 6問目 B */
    #choices button.small-choice-b{
        font-size:19px !important;
    }

    /* 9問目 B */
    #choices button.smaller-choice-b{
        font-size:17px !important;
    }

}

/* ========================================
   15. 成長する進捗UI
======================================== */

#growth-progress {
    position:relative;
    width:min(600px,100%);
    height:90px;
    margin:30px auto 10px;
    z-index:5;

    transform:translateY(-25px);
}

/* 芽 */
.seeds {
    position:absolute;
    left:0;
    bottom:-3px;

    width:100%;

    display:flex;
    justify-content:center;
    align-items:flex-end;
    gap:4px;

    z-index:2;
}

.seeds .seed {
    display:block;
    width:8%;
    height:auto;
    object-fit:contain;
}


/* 土 */
.soil-bar {
    position:absolute;
    left:0;
    bottom:0;

    width:100%;
    height:12px;

    margin:0;

    background:
        radial-gradient(
            circle at 8% 45%,
            rgba(70,45,20,.45) 0 2px,
            transparent 2.5px
        ),
        radial-gradient(
            circle at 22% 65%,
            rgba(70,45,20,.35) 0 1.5px,
            transparent 2px
        ),
        radial-gradient(
            circle at 38% 35%,
            rgba(70,45,20,.4) 0 2px,
            transparent 2.5px
        ),
        radial-gradient(
            circle at 55% 70%,
            rgba(70,45,20,.35) 0 1.5px,
            transparent 2px
        ),
        radial-gradient(
            circle at 72% 40%,
            rgba(70,45,20,.4) 0 2px,
            transparent 2.5px
        ),
        radial-gradient(
            circle at 88% 65%,
            rgba(70,45,20,.35) 0 1.5px,
            transparent 2px
        ),
        #8A6338;

    border-radius:50% 50% 4px 4px;

    box-shadow:
        0 2px 0 rgba(70,45,20,.25),
        inset 0 2px 2px rgba(255,255,255,.15);

    z-index:1;
}

/* ========================================
   16. 芽の成長アニメーション
======================================== */

.seed.growing{
    animation:seedGrow .7s ease-out;
}

@keyframes seedGrow{

    0%{
        opacity:.3;

        transform:
            scale(.75)
            translateY(5px);
    }

    55%{
        opacity:1;

        transform:
            scale(1.08)
            translateY(-2px);
    }

    100%{
        opacity:1;

        transform:
            scale(1)
            translateY(0);
    }
}

/* ========================================
   17. Backボタン
======================================== */

#back-btn {
    width:360px;
    height:90px;

    border:none;
    outline:none;

    background-image:url("./images/back-button.webp");
    background-color:transparent;
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;

    color:#331700;

    font-family:inherit;
    font-size:22px;
    font-weight:bold;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:10px 0 0;

    /* 少し右寄り */
    margin:-20px 5% 0 auto;

    cursor:pointer;

    position:relative;
    z-index:10;
}

#back-btn:hover{
    transform:scale(1.03);
}

#back-btn:active{
    transform:scale(.98);
}

/* ========================================
   18. 質問切り替えアニメーション
======================================== */

.fade-out{
    animation:fadeOut .3s ease forwards;
}

.fade-in{
    animation:fadeIn .5s ease;
}

@keyframes fadeOut{

    from{
        opacity:1;
    }

    to{
        opacity:0;
    }
}

@keyframes fadeIn{

    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}


/* ========================================
   19. 結果画面
======================================== */

#result-container{
    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100dvh;

    margin:0;

    padding:100px 40px 60px;

    background-image:url("images/play-bg-pc.webp");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    text-align:center;

    /* 結果画面だけスクロール */
    overflow-x:hidden;
    overflow-y:auto;

    overscroll-behavior-y:auto;

    z-index:5;
}


/*
   結果画面のフレーム
*/

#result-container .play-frame{
    position:absolute;

    display:block;

    pointer-events:none;

    z-index:1;
}


/*
   結果コンテンツをフレームより前へ
*/

#result-container > :not(.play-frame){
    position:relative;

    z-index:10;
}


/* ========================================
   20. 結果タイトル
======================================== */

#result-label{
    margin-bottom:10px;

    color:var(--brown);

    letter-spacing:3px;
}

#result-title{
    margin:10px 0;

    color:var(--title);

    font-size:40px;
}

#result-text{
    margin:30px 0;

    color:var(--text);

    font-size:18px;

    line-height:2;
}


/* ========================================
   21. あなたの動物画像
======================================== */

#animal-image{
    display:block;

    width:260px;
    height:260px;

    margin:30px auto;

    object-fit:contain;
}

/* ========================================
   22. キーワード
======================================== */

#result-keywords{
    margin:25px 0;
}

.keyword{
    display:inline-block;

    margin:6px;

    padding:8px 18px;

    background:var(--green);

    color:var(--title);

    border-radius:999px;

    font-size:16px;
}


/* ========================================
   23. 4軸性格バー
======================================== */

#axis-result{
    width:100%;
    max-width:500px;

    margin:45px auto;
}

.axis-item{
    margin:34px 0;
}
.axis-heading{
    margin-bottom:8px;
    color:var(--brown);
    font-size:17px;
    font-weight:bold;
    letter-spacing:2px;
}
.axis-label{
    display:flex;

    justify-content:space-between;
    align-items:center;

    margin-bottom:10px;

    color:var(--darkGreen);

    font-size:15px;
    font-weight:bold;

    letter-spacing:1px;
}

.axis-bar{
    position:relative;
    width:100%;
    height:18px;

    background:transparent;
    border:none;
}

.axis-bar::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:50%;

    height:1px;

    background:var(--beige);
}

.axis-point{
    position:absolute;
    top:50%;
    left:50%;
    width:42px;
    height:30px;
    transform:translate(-50%,-50%) rotate(-8deg);

    background-image:url("images/axis-leaf.webp");
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;

    border:none;
    box-shadow:none;

    transition:left .6s ease;
}
/* ========================================
   24. 相性動物
======================================== */

#compatibility{
    width:100%;
    max-width:500px;

    margin:40px auto 0;
}

#compatibility h3{
    margin-bottom:20px;

    color:var(--darkGreen);

    font-size:22px;
}


/* 相性カード */

.compatibility-card{
    margin-top:15px;

    padding:18px;

    background:var(--paper);

    border:2px solid var(--beige);

    border-radius:12px;
}

.compatibility-card img{
    display:block;

    width:150px;
    height:150px;

    object-fit:contain;

    margin:0 auto 15px;
}

.compatibility-card p{
    margin:8px 0 0;

    color:var(--text);

    font-size:16px;

    line-height:1.8;
}

@media (min-width:601px){

    #compatibility-cards{
        display:flex;
        justify-content:center;
        gap:20px;
    }

    .compatibility-card{
        width:calc(50% - 10px);
        margin-top:15px;
    }

}

#share-section{
    width:100%;
    max-width:500px;
    margin:55px auto 30px;
}

#share-section h3{
    margin-bottom:20px;
    color:var(--darkGreen);
    font-size:22px;
}

#share-card{
    padding:30px 25px;
    background:var(--paper);
    border:2px solid var(--beige);
    border-radius:18px;
    text-align:center;
}

.share-card-label{
    color:var(--brown);
    font-size:14px;
    letter-spacing:2px;
    margin-bottom:15px;
}

#share-animal-image{
    display:block;
    width:180px;
    height:180px;
    margin:0 auto 15px;
    object-fit:contain;
}

.share-card-title{
    color:var(--text);
    font-size:15px;
}

#share-animal-name{
    margin:8px 0 18px;
    color:var(--title);
    font-size:28px;
    font-weight:bold;
}

.share-card-message{
    color:var(--text);
    font-size:14px;
    line-height:1.8;
}

#share-btn{
    display:block;
    width:90%;
    margin:20px auto 0;
    padding:14px;
    background:var(--green);
    color:var(--title);
    border:none;
    border-radius:999px;
    font-family:inherit;
    font-size:16px;
    cursor:pointer;
}

#share-buttons{
    width:90%;
    margin:20px auto 0;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.share-sns-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    width:100%;
    padding:13px 20px;

    background:var(--paper);
    color:var(--title);

    border:2px solid var(--beige);
    border-radius:999px;

    font-family:inherit;
    font-size:16px;
    cursor:pointer;

    transition:
        background-color .2s ease,
        transform .2s ease;
}

.share-sns-btn:hover{
    background-color:var(--yellow);
}

.share-sns-btn:active{
    transform:scale(.98);
}

.share-sns-icon{
    font-family:Arial, sans-serif;
    font-size:20px;
    font-weight:bold;
}

@media (max-width:600px){

    #share-buttons{
        width:90%;
        gap:10px;
    }

    .share-sns-btn{
        padding:12px 18px;
        font-size:15px;
    }

    .share-sns-icon{
        font-size:19px;
    }

}
/* ========================================
   25. やり直す
======================================== */

#restart-btn{
    display:block;

    width:min(400px,100%);

    margin:35px auto 0;

    padding:16px;

    background:var(--beige);

    color:var(--title);

    border:2px solid var(--brown);

    border-radius:10px;

    font-family:inherit;

    font-size:17px;
    font-weight:bold;

    cursor:pointer;
}


/* ========================================
   26. 診断終了
======================================== */

#exit-btn{
    display:block;

    width:fit-content;

    margin:20px auto 40px;

    color:var(--brown);

    font-size:15px;

    text-decoration:underline;

    cursor:pointer;
}


/* ========================================
   27. スマートフォン
======================================== */

@media (max-width:600px){

    body{
        width:100%;
        height:100%;
        overflow:hidden;
    }

    #app{
        position:fixed;
        top:0;
        left:0;

        width:100%;
        height:100dvh;

        overflow:hidden;
    }


    /* -------------------------------
       スタート画面
    ------------------------------- */

    #start-screen{
        width:100%;
        height:100dvh;

        padding:45px 15px;

        overflow:hidden;
    }

    #start-screen h1{
        font-size:32px;
    }

    #start-screen p{
        font-size:16px;
        line-height:1.9;
    }


    /* -------------------------------
       質問画面
    ------------------------------- */

    #quiz-screen{
        position:absolute;

        top:0;
        left:0;

        width:100%;
        height:100dvh;

        min-height:0;

        padding:20px;

        background-image:url("images/play-bg-sp.webp");
        background-size:cover;
        background-position:center;
        background-repeat:no-repeat;

        overflow:hidden;
    }


    /* -------------------------------
       フレーム
    ------------------------------- */

    .frame-pc-left,
    .frame-pc-right{
        display:none;
    }

    .frame-sp-left{
        display:block;

        top:0;
        left:0;

        width:65vw;
    }

    .frame-sp-right{
        display:block;

        top:0;
        right:0;

        width:65vw;
    }

    .frame-pc-bottom{
        display:none;
    }

    .frame-sp-bottom{
        display:block;

        position:absolute;

        left:0;
        bottom:0;

        width:70vw;
        height:auto;

        z-index:3;

        pointer-events:none;
    }


    /* -------------------------------
       問題数
    ------------------------------- */

    #progress-container{
        width:fit-content;

        margin:35px auto 20px;
    }

    #current-number{
        font-size:70px;
    }

    #total-number{
        font-size:32px;
        margin-left:4px;
    }


    /* -------------------------------
       質問
    ------------------------------- */

    #question-container{
        width:100%;
        max-width:500px;

        margin:45px auto 0;
    }

    #question{
        width:85%;
        max-width:85%;

        /*
           1行でも2行でも高さを固定
           → 問題ごとにガクンと動かない
        */
        height:58px;

        margin:25px auto 20px;

        font-size:18px;
        line-height:1.6;

        text-align:center;

        display:flex;
        align-items:center;
        justify-content:center;
    }

   @media (max-width:600px){
    #question.first-question{
        font-size:17px;
    }
}
   @media (max-width:600px){
    #question.question-5{
        width:95%;
        max-width:95%;
        font-size:18px;
    }
}
   @media (max-width:600px){
    #question.question-7{
        font-size:16px;
    }
}

   @media (max-width:600px){
    #question.question-9{
        font-size:16px;
    }
}

    /* -------------------------------
       選択肢
    ------------------------------- */

    #choices{
        width:100%;
        margin:0 auto;
    }

    #choices button{
        width:95%;
        max-width:600px;

        min-height:0;
        height:100px;

        margin:0 auto 12px;

        padding:15px 25px;

        background-size:100% 100%;

        font-size:11px;
    }

    #choices button.choice-b{
        transform:translateY(0);
    }

   @media (max-width:600px){

    /* 1・3・4・5問目 A */
    #choices button.first-question-a{
        font-size:11px;
    }

    /* 1問目 B */
    #choices button.first-question-b{
        font-size:11px;
    }

    /* 2・3・6問目 B */
    #choices button.second-question-b{
        font-size:11px;
    }

    /* 6問目 A */
    #choices button.sixth-question-a{
        font-size:11px;
    }
   
    /* 6問目 B */

    #choices button.sixth-question-b{

        font-size:11px;

    }

   #choices button.seventh-question-b{

        font-size:11px;

    }

      #choices button.ninth-question-a{

        font-size:11px;

    }
     
      #choices button.tenth-question-b{

        font-size:11px;

    }
      #choices button.eleventh-question-b{

        font-size:11px;

    }
}

    /* -------------------------------
       進捗バー
    ------------------------------- */

    #growth-progress{
    position:relative;
    width:68%;
    max-width:400px;
    height:90px;
    margin:20px auto 0;
    transform:translateY(-55px);
}

    .seeds{
        gap:2px;
    }

   .seeds{
    bottom:3px;
}

    .seeds .seed{
        width:8%;
    }

    .soil-bar{
        height:11px;
    }


    /* -------------------------------
       Back
    ------------------------------- */

    #back-btn{
    width:224px;
    height:64px;
    margin:-60px -5% 0 auto;
    padding:8px 0 0;
    background-size:contain;
    background-position:center;
    font-size:14px;
}

   @media (max-width:600px){

    #quiz-menu{
        right:15px;
        bottom:15px;
    }

    #menu-toggle{
        width:52px;
        height:52px;
    }

    #menu-toggle span{
        width:23px;
        height:3px;
    }

    #menu-panel{
        bottom:62px;
        width:165px;
    }
}

    /* -------------------------------
       結果画面
    ------------------------------- */

    #result-container{
        position:absolute;

        top:0;
        left:0;

        width:100%;
        height:100dvh;

        min-height:0;

        margin:0;
        padding:20px;

        background-image:url("images/play-bg-sp.webp");
        background-size:cover;
        background-position:center;
        background-repeat:no-repeat;

        text-align:center;

        /* 結果画面だけスクロール */
        overflow-x:hidden;
        overflow-y:auto;

        -webkit-overflow-scrolling:touch;

        overscroll-behavior-y:auto;

        z-index:5;
    }


    /* -------------------------------
       結果画面の上フレーム
    ------------------------------- */

    #result-container .frame-sp-left{
        display:block;

        position:absolute;

        top:0;
        left:0;

        width:65vw;

        z-index:1;
    }

    #result-container .frame-sp-right{
        display:block;

        position:absolute;

        top:0;
        right:0;

        width:65vw;

        z-index:1;
    }

    #result-container .frame-pc-left,
    #result-container .frame-pc-right{
        display:none;
    }


    /* 結果コンテンツをフレームより前へ */

    #result-container > :not(.play-frame){
        position:relative;
        z-index:10;
    }


    /* -------------------------------
       結果タイトル
    ------------------------------- */

    #result-label{
        margin-top:20px;
    }

    #result-title{
        font-size:32px;
    }

    #result-text{
    width:82%;
    margin:30px auto;

    font-size:17px;
    line-height:1.9;
}


    /* -------------------------------
       動物画像
    ------------------------------- */

    #animal-image{
        width:180px;
        height:180px;

        margin:25px auto;
    }


    /* -------------------------------
       キーワード
    ------------------------------- */

    #result-keywords{
        margin:20px 0;
    }

    .keyword{
        margin:5px;
        padding:7px 14px;

        font-size:14px;
    }


   /* -------------------------------
   4軸
------------------------------- */

#axis-result{
    width:82%;
    max-width:500px;

    margin:35px auto;
}

    .axis-item{
        margin:27px 0;
    }

    .axis-label{
        font-size:16px;
    }

   .axis-heading{
    font-size:15px;
    margin-bottom:7px;
    letter-spacing:1.5px;
}

    /* -------------------------------
       相性
    ------------------------------- */

    #compatibility{
        margin-top:35px;
    }

    #compatibility h3{
        font-size:19px;
    }

    .compatibility-card{
    width:82%;
    margin-left:auto;
    margin-right:auto;
    padding:15px;
}
    .compatibility-card h4{
        font-size:20px;
    }

    .compatibility-card p{
        font-size:12px;
        line-height:1.7;
    }


   @media (max-width:600px){

    #share-section{
        width:82%;
        margin:45px auto 25px;
    }

    #share-section h3{
        font-size:19px;
    }

    #share-card{
        padding:25px 20px;
    }

    #share-animal-image{
        width:150px;
        height:150px;
    }

    #share-animal-name{
        font-size:24px;
    }

}
    /* -------------------------------
       結果ボタン
    ------------------------------- */

    #restart-btn{
        width:90%;
        margin-top:30px;
    }

    #exit-btn{
        margin-bottom:30px;
    }
}


/* ========================================
   28. 小さいスマートフォン
======================================== */

@media (max-width:380px){

    #start-screen h1{
        font-size:28px;
    }

    #question{
        font-size:17px;
    }

    /* ここも100pxのまま */
    #choices button{
        font-size:11px;
        height:100px;
    }

    #current-number{
        font-size:62px;
    }

    #total-number{
        font-size:28px;
    }

    #back-btn{
        width:250px;
        height:75px;

        font-size:17px;
    }

    #result-title{
        font-size:28px;
    }
}


/* ========================================
   29. 結果画面では下フレームを非表示
======================================== */

#result-container .frame-pc-bottom,
#result-container .frame-sp-bottom{
    display:none !important;
}

.share-download-btn{
    display:block;
    width:82%;
    max-width:400px;
    margin:25px auto 8px;
    padding:14px 20px;
    border:none;
    border-radius:999px;
    background:var(--green);
    color:var(--title);
    font-family:inherit;
    font-size:16px;
    font-weight:bold;
    cursor:pointer;
}

.share-download-note{
    margin:0 auto 25px;
    color:var(--brown);
    font-size:13px;
    line-height:1.6;
}