:root{
            --bg-body:#ffffff;
            --bg-main:#f2f2f2;
            --bg-bu-color:#ffffff00;
            --bg-header:#ffffffae;

            --bu-error-color:#D7003A;
            --bu-answer-color:#91ca08;
            --bu-home-color:#F8B500;
            --bu-first_time:var(--bg-answer-correct);

            --text-color-main:#007bbb;
            --text-color-next:#ffffff;
            --text-color:#000000;
            --text-color-first_time:#464646;

            --nav-color:#707070;

            --info-text-color:#5e5e5e;

            --load-bar-color:#a7a7a7;

            --bu-border-radius:5px;
            --bu-border-thick:5px;

            --input-border-radius:5px;
            --input-border-thick:2px;
            --input-border-color:#000000;

            --bu-invalid-color:#7d7d7db0;
            --bg-answer-correct:#dddddd;

            --shadow-size:5px;
            --shadow-color:#000000b0;

            --history--border-color:#737373;

            --max-width:1024px;
            --load-bar-fill-color:#42424250;

            --input-color:#ffffff;
        }

        /* ダークモード切り替え */
        body.mode--dark {
            --bg-body: #606060;
            --bg-main: #323232;
            --bg-bu-color: #ffffff00;
            --bg-header: #3f3f3fae;
            --text-color-main: #009cee;
            --history--border-color: #cfcfcf;
            --bg-answer-correct: #434343;
            --input-color:#3c3b3b;
            --bu-answer-color: #aaed0e;
            --info-text-color: #e0e0e0;
            --bu-end-color:#e21818;
            --text-color:#e2e2e2;
            --bu-first_time:var(--bg-answer-correct);
            --text-color-first_time:var(--text-color);
            --load-bar-color:#646464;
            --load-bar-fill-color:#0000004b;
            --input-border-color:#919191;
            --nav-color: #dddddd;

        }

        /* ベース */

        *{
            box-sizing: border-box;
        }
        html{
            scroll-behavior: smooth;
        }
        a{
            text-decoration:inherit;
        }
        body{
            padding: 0;
            margin: 0;
            width: 100%;
            min-height: 100dvh;
            text-align: center;
            font-size:clamp( 12px, 1.3vw, 22px);
            color: var(--text-color);
            background-color: var(--bg-main);

            /* フォントの設定 */
            font-family: "M PLUS 1p", sans-serif;
            font-weight: 700;
            font-style: normal;
        }
        button,a{
            background-color: var(--bg-bu-color);
            font-size: 1.2em;
            padding: 5px 15px;
            cursor:pointer;
            filter: grayscale(0%);
            box-shadow: 0px 0px 0px var(--shadow-color);
            transition: filter 0.2s ease, box-shadow 0.2s ease;
        }
        button:hover{
            box-shadow: 0px 0px var(--shadow-size) var(--shadow-color);
            filter: grayscale(90%);
        }
        /* ベースここまで */

        /* ヘッダーは別ファイルから読み込む */

        /* ここからメインコンテンツ */
        main{
            width: auto;
            height: auto;
            padding: 100px 50px;
            background-color: var(--bg-main);
            box-sizing: border-box;
        }
        /* 問題の設定をする場所 */
        .setting{
            width: 100%;
            height: auto;
            margin: auto;
            padding: 20px 20px;
            border-radius: 10px;
            box-shadow: 0px 0px var(--shadow-size) var(--shadow-color);
            background-color: var(--bg-body);
            max-width: var(--max-width);
        }
        .setting--box{
            display: flex;
            justify-content: space-around;
            margin-bottom: 50px;
        }
        /* inputの部分 */
        .setting--input{
            display: flex;
            gap: 10px;
            font-size: 2em;
            text-align: left;
            margin-bottom: 10px;
            
        }
        .setting--input label,
        .setting--input span{
            margin: 10px 0px;
        }
        .setting--input label {
            /* 文字の幅を共通にしたいので、3em */
            width: 3em; 
        }
        .setting--input input{
            text-align: center;
            font-size: 0.5em;
            border: var(--input-border-color) var(--input-border-thick) solid;
            border-radius: var(--input-border-radius);
            background-color: var(--input-color);
            color: var(--text-color);
        }
        .setting--input input::placeholder{
            color: var(--input-pl-color,#898989);
        }

        /* はじめるボタン */
        .setting__start button{
            border: var(--bu-answer-color) var(--bu-border-thick) solid;
            border-radius: var(--bu-border-radius);
            text-align: center;
            color: var(--bu-answer-color);
            font-size: 3em;
            letter-spacing: 0.5em;
            padding-left: calc(2em + 0.5em);
            padding-right: 2em;
        }
        /* 問題の設定をする場所ここまで */

        /* ここから履歴 */
        .history{
            width: 100%;
            height: auto;
            margin: auto;
            margin-top: 100px;
            box-shadow: 0px 0px var(--shadow-size) var(--shadow-color);
            border-radius: 10px;
            background-color: var(--bg-body);
            max-width: var(--max-width);
        }

        /* 履歴のヘッター部分 */
        .history--title{
            padding: 5px 1em;            
            border-bottom: var(--history--border-color) 2px solid;
            display: flex;
            justify-content: space-between;
            color: var(--info-text-color);
        }
        .history--title h2{
            margin: auto 0;
        }
        .history__title--box{
            display: flex;
            gap: 1em;
            padding: 5px 0;
        }
        /* リロードボタン */
        .history__title--box button{
            width: 40px;
            height: 40px;
            margin: auto 0;
            border-radius: 50%;
            border: var(--history--border-color) 2px solid;
            background-image: url(../img/relod.svg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 80%;
            transform: rotate(0deg);
            transition: transform 0s;
        }

        /* ボタン押下時に回転アニメーションを適用中
        将来的にはJSと連動してリロード中だけ回転させる予定 */
        .history__title--box button:active{
            transform: rotate(360deg);
            transition: transform 0.5s;
        }
        .history__title--box p{
            margin: auto;
            font-size: 1.5em;
        }

        /* ここから履歴表示部分 */
        /* ここから、【通常のデータ表示】 */
        .history--body{
            width: 100%;
        }
        .history--box{
            padding: 10px;
            border-top: var(--history--border-color) 1px solid;
        }
        .history--box:nth-child(1){
            border-top: 0px;
        }
        .history--date{
            width: 100%;
            height: auto;
        }
        .history--date p{
            color: var(--info-text-color);
            margin: 0.2em 0;
            font-size: 1em;
        }
        /* 正答率のバー表示部分 */
        .ratio{
            background-color: var(--bg-answer-correct);
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0px 0px var(--shadow-size) var(--shadow-color);
        }
        .ratio--box{
            width: 100%;
            height: 100%;
        }
        .ratio__ratios{
            width: 100%;
            height: 40px;
            display: flex;
            align-items: center;
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 1px 1px var(--shadow-size) var(--shadow-color);
            transition: box-shadow 0.5s ease;
        }
        .ratio__ratios:hover{
            box-shadow: 4px 4px var(--shadow-size) var(--shadow-color);
        }
        .ratio__ratios span{
            position: relative;
            width: 100%;
            height: 100%;
            left: 0;
            display: block;
            /* JSで変更されるが、一様 */
            background: linear-gradient(to right, var(--bu-answer-color) 45%, var(--bu-error-color) 65%);
        
        }
        .ratio__info{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content:space-around;
            font-size: 2.5em;
        }
        .ratio__info p{
            margin: 5px 0px;
        }
        .ratio__info p:nth-child(1){
            color: var(--bu-answer-color);
        }
        .ratio__info p:nth-child(2){
            color: var(--bu-error-color);
        }
        .history__title{
            width: 100%;
            height: 10em;
            position: relative;
            
        }
        .history__title--bu{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 0;
            border: #000000 1px solid;
            padding: 5px;
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 5px;
            z-index: 99;
                }
        .history__title--bu button{
            display: block;
            width: 100%;
        }
        .history__title--bu button:nth-child(1){
            border: var(--bu-answer-color) var(--bu-border-thick) solid;
            border-radius: var(--bu-border-radius);
            text-align: center;
            color: var(--bu-answer-color);
        }
        .history__title--bu button:nth-child(2){
            border: var(--text-color-main) var(--bu-border-thick) solid;
            border-radius: var(--bu-border-radius);
            text-align: center;
            color: var(--text-color-main);
        }
        .history__title h3{
            position: relative;
            top: 50%;
            text-align: center;
            transform: translateY(-50%);
            font-size: 4em;
            color: var(--text-color-main);
            margin: 0;
        }
        /* ここまで、【通常のデータ表示】 */
        /* ここから【初めてですか？】 */
        .first_time{
            width: auto;
            height: auto;
            color: var(--text-color-first_time);
        }
        .first_time__info{
            border-radius: 5px;
            font-size: 5.5em;
            padding: 10px;
            background-color: var(--bg-answer-correct);
            box-shadow: 0px 0px var(--shadow-size) var(--shadow-color);
        }
        .first_time__info p{
            margin: 0;
        }
        .first_time__info p:nth-child(2){
            margin-top: 20px;
            font-size: 0.5em;
        }
        .first_time__button {
            height: auto;
            display: flex;
            justify-content: space-around;
            padding: 10px 5px;
            
        }
        .first_time__button button,
        .first_time__button a{
            display: block;
            width:7em;
            height: 2em;
            border-radius: 10px;
            font-size: 2em;
            color: var(--text-color-first_time);
            box-shadow: 0px 1px 3px var(--shadow-color);
        }
        #first_time{
            background-color: var(--bg-answer-correct);        
            border:  0px;
            filter: blur(0px);
        }
        #first_time:hover{
            filter: blur(2px);
        }
        #skip{
            border: var(--bg-answer-correct) 3px solid;
            transition: background-color 0.5s ease;
        }
        #skip:hover{
            background-color: var(--bg-answer-correct);        
        }
        /* ここまで【初めてですか？】 */
        /* ここから【ロード画面】 */
        
        .road span{
            background:linear-gradient(to right,var(--load-bar-color) 40%,#c6c6c6 50%,var(--load-bar-color) 60%);
            background-position: 0% 0px;
            background-size: 500% 500%;
            animation: con 2s linear infinite;
            box-shadow: 1px 1px var(--shadow-size) var(--shadow-color);
            display: block;
            border-radius: 20px; 
        }
        .road .history--date span{
            width: 10em;
            height: 2em;
            margin: auto;
        }
        .road .history__title--bu{

            width: calc((1.2em * 6) + 10px);
            height: calc(1.2em + 30px);
            background:linear-gradient(to right,var(--load-bar-color) 40%,#c6c6c6 50%,var(--load-bar-color) 60%);
            background-position: 0% 0px;
            background-size: 500% 500%;
            animation: con 2s linear infinite;
            box-shadow: 1px 1px var(--shadow-size) var(--shadow-color);
            display: block;
            border-radius: 10px;
            border: 0px;
        }
        .road .history--h3{
            width: calc(4em * 6);
            height: calc(4em * 1);
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            border-radius: 10px;
        }
        .road .ratio__info span{
            width: 5em;
            height: 1em;
            border-radius: 10px;
            margin-top: 15px;
        }
        .road.history--box:nth-child(1) {
            border-top: var(--history--border-color) 1px solid;
        }
        .road.history--box{
            position: relative;
        }
        #road--title{
            position: absolute;
            width: calc(100% - (10px * 2));
            height: calc(100% - (10px * 2));
            z-index: 100;
            border-radius: 5px;
            background: var(--load-bar-fill-color);
            backdrop-filter:blur(2px);
        }
        #road--title::after{
            position: absolute;
            top: 50%;
            left: 50%;
            content: "ロード中";
            transform: translate(-50%,-50%);
            color: var(--text-color-first_time);
            font-size: 5em;
            width: 100%;
        }

        @keyframes con {
            0%{
                background-position: 0% 0px;
            }
            100%{
                background-position: 100% 0px;

            }
        }
        /* ここまで【ロード画面】 */
        /* 履歴表示部分 */

        /* ここから履歴のフッダー */
        .history--footer{
            height: 2em;
            color: var(--info-text-color);
            border-top: var(--history--border-color) 2px solid;
        }
        .history--footer p{
            margin: 0;
        }
        /* ここまで履歴のフッダー */

        /* ここからページ上に戻るボタン */
        :root{
            --top-link:50px
        }
        #top-link a{
            display: block;
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: var(--top-link);
            height: var(--top-link);
            border: var(--nav-color) 2px solid;
            border-radius: 30px;
        }
        #top-link a::after{
            content: "";
            position: absolute;
            top: 60%;
            left: 50%;
            width: calc(var(--top-link) / 2);
            height: calc(var(--top-link) / 2);
            border: var(--nav-color) 3px solid;
            
            border-bottom: 0px;
            border-right: 0px;
            transform: translate(-50%,-50%) rotate(45deg);
            
        }
        /* ここまでページ上に戻るボタン */


        /* ここからレスポンシブ */
        @media screen and (max-width:705px) { 
            /*　画面サイズが480pxからはここを読み込む　*/
            .setting--box{
                display: block;
                margin-bottom: 50px;
            }
            .setting--input{
                display: flex;
                justify-content: center;
            }
            .setting__start button {
                font-size: 3em;
                letter-spacing: 0.4em;
                padding-left: 0.5em;
                padding-right: 0;
            }
            .ratio__info {
                font-size: 2em;
            }
            .history__title--bu {
                position: relative;
                border: #000000 0px solid;
                padding: 0px;
                border-radius: 0px;
                display: flex;
                flex-direction:row;
                justify-content: center;
                align-items:start;
                gap: 5px;
                top:0;
                transform: translateY(0%);
            }
            .history__title {
                width: 100%;
                height: 12em;
                position: relative;
                margin-top: 1em;
            }
            .history__title h3 {
                bottom: 0;
                top: 0;
                transform: translateY(0%);
                margin: 0.2em 0;

            }

            .road .history--h3 {
                top: 25%;
            }
            .road .history__title--bu {
                width: calc((1.2em * 15) + 10px);
                margin: auto;
            }
            .first_time__info {
                font-size: 2.5em;
            }
        #road--title::after{
            font-size: 3em;
        }
        }   
        @media screen and (max-width:425px) {
            .history__title h3 {
                font-size: 3em;
            }
            .history__title {
                height: 10em;
            }
            .setting--input {
                display: flex;
                justify-content: center;
                flex-direction: column;
                gap:0;
                margin-bottom: 1.5em;
            }
            .setting--input label,
            .setting--input span{
                margin: 0px;
            }
            .setting--input input {
            height: 4em;
            }
            main {
                overflow: hidden;
                background-color: var(--bg-main);
                padding: 80px 15px;
                box-sizing: border-box;
            }

            .first_time__button {
                padding: 15px 5px;
            }
            .first_time__button button,
            .first_time__button a {
                width: 6em;
                height: 2em;
                font-size: 2em;
                padding: auto 0px;
            }
            .road .history--h3 {
                width: calc(4em * 5);
            }
            .road .ratio__info span {
                width: 4em;
            }
}