/* #test{
    position: absolute;
    top: 200px;
    left: 500px;
    z-index: 999;
} */
/* -**タブコントロール**- */
/* ▼タブ(共通装飾＋非選択状態の装飾) */
.tabbox input { display: none; }    /* ▼タブ機能を制御するラジオボタン(非表示にする) */
input:checked+.tab {                /* ▼チェックが入っているラジオボタンの隣にあるタブの装飾(＝選択状態のタブ) */
    z-index: 10;
    /* ※2A */
    position: relative;
    /* ※3 */
}
.tab {
    display: inline-block;                  /* インラインブロック化 */
    border-width: 1px 1px 0px 1px;          /* 上側と左右に枠線を引く */
    border-style: solid;                    /* 枠線の種類は「実線」 */
    border-color: black;                  /* 枠線の色は「黒」 */
    border-radius: 0.75em 0.75em 0px 0px;   /* 左上と右上の角だけを丸くする */
    padding: 0.75em 1em;                    /* 内側の余白量 */
    font-weight: bold;                      /* タブの文字を太字にする */
    color: black;                         /* タブの文字色：黒色 */
    background-color: #e0e0e0;            /* タブの(非選択状態の)背景色：灰色 */
}
.tab:hover {                        /* ▼タブにマウスポインタが載った際の装飾 */
    color: green;                         /* タブの文字色：緑色 */
    background-color: #ccffcc;            /* タブの背景色：淡い緑色 */
    cursor: pointer;                        /* マウスポインタの形状を「指(指し示す形)」にする */
}
input:checked+.tab {                /* ▼選択状態のタブ(＝チェックが入っているラジオボタンの隣にあるタブの装飾) */
    color: red;                           /* タブの文字色：赤色 */
    background-color: #ffffff;            /* タブの背景色：淡い黄色 */
}
/* ▼チェックが入っているラジオボタンに対応するタブの中身を表示する */
#tabcheck0:checked~#tabcontent { display: block; }
#tabcheck1:checked~#tabcontent { display: block; }
#tabcheck2:checked~#tabcontent { display: block; }
#tabcheck3:checked~#tabcontent { display: block; }
#tabcheck4:checked~#tabcontent2 { display: block;}
#tabcheck5:checked~#tabcontent3 { display: none;}
#tabcheck5-Label{display: none;}
#tabcheck6:checked~#tabcontent4 { display: block;}
#tabcheck7:checked~#tabcontent5 { display: block;}
#tabcheck8:checked~#tabcontent8 { display: none;}
#tabcheck8-Label{display: none;}

/* -**（単語チェック）タブの中身**- */
.tabcontent {       /* ▼タブの中身(共通装飾＋非選択状態の装飾) */
    display: none;                          /* 標準では非表示にする*/
    border: 1px solid black;              /* 枠線を引く：黒色で1ピクセルの実線 */
    padding: 1em;                           /* 内側の余白量 */
    background-color: #ffffff;            /* 背景色：淡い黄色(※選択中のタブの背景色と合わせます) */
    width:100%;
    height: 700px;
    margin-top: -1px;
    /* ※1 */
    z-index: 0;
    /* ※2B */
    position: relative;
    /* ※3 */
}
/* <!-- 単語check TAB --> */
    .title-pos {            /*タイトル位置*/    
        position: absolute;
        font-size: 30px;
        font-weight: bold;
        text-align: center;
        background-color: rgb(255, 255, 255);
        width: 60%;
        height: 75px;
        left: 20%;
        top: -10px;
    }
    .light-green {      /* 単語用表示タイトル左部 */
        color: rgb(51, 204, 51);
    }
    .light-purple {     /* 単語用表示タイトル右部 */
        color: rgb(204, 102, 255);
    }
    .color-gold {       /* 単語用表示タイトル日本語部 */
    position: relative;
    color: rgb(204, 204, 0);
    font-size: 17px;
    text-align: center;
    width: 80%;
    height: 20px;
    left: 30%;
    top: -20%;
    }
    #PageCounter{       /* ヒントコントロール部 */
        position: absolute;
        top: 150px;
        right: 5%;
    }
    .image-center {     /* 単語用イラスト配置 */
        position: absolute;
        top: 80px;
        width: 100px;
        height: 100px;
        left: 40%;
        /* transform: translate(-60px); */
    }
    .fulBack {          /* 英語罫線総背景 */
        position: absolute;
        margin: 0px auto;
        top: 180px;
        width: 90%;
        height: 110px;
        /* background-image: linear-gradient(0deg,
                rgb(153, 255, 204) 88%,
                rgb(255, 255, 255, 0) 88%, rgb(255, 255, 255, 0) 100%); */
        background-color: rgb(153, 255, 204);
    }
        .boxBack {          /* 英語罫線　背景 */
            position: relative;
            margin: 0px auto;
            top: -80px;
            width: 95%;
            /*51,204,51*/
            background-image: linear-gradient(0deg,
                    rgb(255, 255, 255, 0) 0px,rgb(255, 255, 255, 0)15px,
                    rgb(255, 255, 255) 15px, rgb(255, 255, 255) 95px,
                    rgb(255, 255, 255, 0) 95px,rgb(255, 255, 255, 0)95px);
            /*background-color: #8be4f0;*/
        }
            .boxFront {         /* 英語罫線 */
                position: relative;
                /* top: -10%; */
                font-size: 80px;
                font-family: "Comic Sans MS",
                    "Chalkboard SE",
                    monospace;/*"Futura","Chalkduster","Bradley Hand",*/
                text-align: center;
                width: 100%;
                transform: translateY(-15px);
                /* 方眼紙模様に必須のスタイル */
                background-image: linear-gradient(0deg,rgba(255, 255, 255, 0) 0px,
                    rgb(255, 255, 255, 0) 0px,
                    rgba(0, 0, 255) 0px,
                    rgba(0, 0, 255) 2px,
                    rgba(255, 255, 255, 0) 2px,
                    rgb(255, 255, 255, 0) 22px,
                    rgb(255, 0, 0) 22px,
                    rgb(255, 0, 0) 24px,
                    rgba(255, 255, 255, 0) 24px,
                    rgba(255, 255, 255, 0) 60px,
                    rgb(130, 198, 251) 60px,
                    rgb(130, 198, 251) 62px,
                    rgb(255, 255, 255, 0) 62px,
                    rgb(255, 255, 255, 0) 78px,
                    rgb(0, 0, 255) 78px,
                    rgb(0, 0, 255) 80px,
                    rgb(255, 255, 255, 0) 80px,
                    rgb(255, 255, 255, 0) 80px);
            }
    .mean-pos {         /* 単語訳語位置 */
        position: absolute;
        text-align: center;
        background-color: rgba(255, 0, 221, 0.159);
        width: 70%;
        height: 50px;
        top: 280px;
        left: 15%;
    }
        .rubi{              /* 単語訳語ルビ */
            position: absolute;
            font-size: 13px;
        }
        .mean{              /* 単語訳語 */
            position: relative;
            font-size: 30px;
            top:8pt;
        }
    .button-pos {       /* 単語操作ボタン位置（単語共通）*/
        position: absolute;
        background-color: rgba(242, 255, 0, 0.159);
        width: 70%;
        height:50px;
        top:350px;
        left: 15%;
    }
        .Bt{            /* 単語操作ボタン表示（単語共通）*/
            border-radius: 50%;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 40px;
            background: #6fa1ff;
            border-color: #6fa1ff;
            color: #FFF;
            line-height: 1px;
            letter-spacing: -5px;
            text-align:left;
            font-size: 20px;
            /* cursor: hand; */
            cursor:pointer;
        }
        .Bt:hover{
            box-shadow: none;         /* カーソル時の影消去 */    
            color: #000066;         /* 文字色     */    
            background: #ffffff;    /* 背景色     */  
        }
        .BtSound{
            position: relative;
            border-radius: 20%;
            top: 5px;
            left: 35px;
            /* justify-content: center;
            align-items: center; */
            width: 80px;
            height: 40px;
            background: #6fa1ff;
            border-color: #6fa1ff;
            color: #FFF;
            line-height: 45px;
            letter-spacing: 0px;
            text-align:center;
            font-size: 18px;
            /* cursor: hand; */
            cursor:pointer;
        }
        .BtSound:hover{
            box-shadow: none;     /* カーソル時の影消去 */
            color: #000066;     /* 文字色     */
            background: #ffffff;/* 背景色     */
        }
        #BtTop {    
            position: absolute;
            text-align:center;
            top: 5px;
            left: 12%;
        }
        #BtBackP {
            position: absolute;
            letter-spacing: -10px;
            text-indent: -2pt;
            top: 5px;
            left: 25%;
        }
        #BtBack {
            position: absolute;
            text-align:center;
            text-indent: -3pt;
            top: 5px;
            left: 40%;
        }
        #BtFoward{   
            position: absolute;
            text-align:center;
            text-indent: -2pt;
            top: 5px;
            left: 55%;
        }
        #BtNextP {
            position: absolute;
            text-indent: -2pt;
            letter-spacing: -10px;
            top: 5px;
            left: 70%;
        }
        #BtLast {
            position: absolute;
            text-indent: 1pt;
            top: 5px;
            left: 85%;
        }
        #BtHint{
            position: absolute;
            top: 5px;
            left: 2%;box-shadow: none;
            /* カーソル時の影消去 */
            color: #ff0000;
            /* 背景色     */
            background: #f661ec98;
            border-color: #f661ec98;
            /* 文字色     */
            cursor: hand;
            cursor: pointer;
        }
        #BtHint:hover {
            box-shadow: none;
            /* カーソル時の影消去 */
            color: #000066;
            /* 背景色     */
            background: #ffffff;
            /* 文字色     */
        }
    .sound-pos {/* 単語音声位置 */    
        position: absolute;
        width: 40%;
        top: 420px;
        left: 30%;
    }
/* -**（基本設定）タブの中身**- */
.SetBT{                     /* 設定保存・読込ボタン */
    position: relative;
    width: 120px;
    /* top: -10px; */
    /* left: 700px; */
}
.SetBT:hover{
    box-shadow: none;       /* カーソル時の影消去 */    
    color: #ff0505;       /*  文字色    */    
    background: #eeff02bd;/*  背景色    */
    cursor: pointer;        /* マウスポインタの形状を「指(指し示す形)」にする */
}
#SaveLoadButton{
    position: relative;
}
#BTSave{                    /* 設定保存ボタン */
    position: relative;
    top: -10px;
    left: 350px;
}
#BTGet{                     /* 設定読込ボタン */
    position: absolute;
    top: -10px;
    left: 550px;
}
#Compare{       /* 比較設定<div> */
    position: relative;
    border: 1px solid black;
    padding: 1em;
    /* top: 5px; */
    /* width: 90%; */
    height: 2%;
}
    #Compare input{         /* 比較単語選択番号で入力欄 表示処理 */
        display:inline;
    }
    .BaseTitle{             /* 基本設定ラベル */
        position: absolute;
        top:-10px;
        font: size 20px;
    }    
    .Num1{                  /* 比較単語選択番号の入力欄 */
        /* position: relative; */
        text-align: right;
        /* left: 5pt; */
    }
    #cNo{                   /* 比較単語選択番号の入力欄 */
        position: relative;
        left: 10px;
    }
    #CompareNum{
        position: relative;
        left: 40px;
    }
    #CompSel{               /* 比較単語選択 */
        position:relative;
        left:100px;
    }
    #CompGet{               /* 比較単語決定ボタン */
        position:relative;
        left:150px;
    }
#BaseSet{       /* 単語練習 設定<div> */
    border: 1px solid black;
    /* 枠線を引く：黒色で1ピクセルの実線 */
    padding: 1em;
    /* 内側の余白量 */
    background-color: #ffffff;
    /* 背景色：淡い黄色(※選択中のタブの背景色と合わせます) */
    position:relative;
    top: 5px;
    /* width: 90%; */
    height: 60%;
    /* transform: translate(-50%, -10%) */
}
    #BaseSet input{     /* 単語練習で入力欄 表示処理 */
        display:block;
    }
    #subTitle{
        position: absolute;
        top: -2px;
        left: 190px;
        width: 100px;
    }
    #subTitle2 {
        position: absolute;
        top: -2px;
        left: 320px;
        width: 100px;
    }
    #WDGet{
        left: 350px;
    }
    .box2{              /* 項目の設定(class) */
        position: relative;
        top: 20px;
        left:13%;
    }
        .boxLabel{          /* 項目ラベル(class) */
            position: relative;
            /* top: -5px; */
            left:-10%;
        }
        .Num{               /* 表示数(class) */
            position: absolute;
            top:5px;
            text-align: right;
        }
        .Numst {            /* 表示開始番号(class) */
            position: absolute;
            text-align: right;
            top:5px;
            left:9%;
        }
#NHKText{               /* テキストLesson番号の設定(class) */
    position: relative;
    border: 1px solid black;
    padding: 1em;
    top: 10px;
    /* width: 90%; */
    height: 2%;
}
    #NHKText input{
        display:inline;
    }
    #TLabel{                /* 表示ラベル */
        position: absolute;
        top: 5px;
    }
    #tNo{                   /* NHKテキストのレッスン番号inputBox */
        position: absolute;
        left: 230px;
    }
    #LesnSelSL{
        position: absolute;
        left: 300px;
    }
    #LessonSet{             /* NHKテキストのレッスン番号決定BUtton */
        position: relative;
        top: -10px;
        left: 550px;
    }
#Story{                 /* Story番号の設定(<div>) */
    display: none;
    position: relative;
    border: 1px solid black;
    padding: 1em;
    top: 13px;
    /* width: 90%; */
    height: 6%;
}
    #Story input{
        display:inline;
    }
    #storysel{              /* 表示Story選択 */
        position: absolute;
        left:275px;
    }
    #StorySet{              /* 表示Story番号決定BUtton */
        position: relative;
        top: 20px;
        left: 350px;
    }
/* <!-- (Story) タブの中身 --> */
#tabcontent3{
    position: relative;
}
    #rear_area {
        z-index: 0;
    }
    .speakFront {
        position: absolute;
        font-size: 60px;
        font-family: "Comic Sans MS", "Chalkboard SE", monospace;
        text-align: left;
        top:-50px;
        width: 850px;
    }
    #f_word {               /* 文字読上げのためにStoryを前面と後面に重ねて前面は文字を透過、選択文字の赤化を実現 */
        opacity: 0;/* 透過 */
    }
    .sentence{              /* 表示Storyの選択欄 */
        position:absolute;
        top:500px;
    }
    .Sbutton-pos {          /* Story再生、表示、前進後退 ボタン位置 */
        position: absolute;
        background-color: rgba(255, 136, 0, 0.159);
        width: 50%;
        height: 50px;
        top: 265px;
        left: 25%;
    }
        #GetStory{
            position: absolute;
            top: 6px;
            left: 10px;;
            /* cursor: hand; */
            cursor: pointer;
        }
        #StBack {
            position: absolute;
            text-align: center;
            text-indent: -3pt;
            top: 5px;
            left: 30%;
        }
        #StPlay {
            position: absolute;
            text-align: center;
            text-indent: -2pt;
            top: 5px;
            left: 42%;
        }
        #StFoward {
            position: absolute;
            text-align: center;
            text-indent: -2pt;
            top: 5px;
            left: 55%;
        }
    .StoryMean-pos {        /*訳語位置*/
        position: absolute;
        text-align: left;
        background-color: rgba(255, 0, 221, 0.159);
        width: 70%;
        height: 100px;
        top: 300px;
        left: 15%;
    }
        #StoryMean{
            position: relative;
            font-size: 24px;
            top: 6pt;
            left: 10pt;
        }
/* <!-- (発音比較) タブの中身 --> */
#tabcontent5{
    position: relative;
}
.boxL {
    /*英語罫線総背景*/
    position: absolute;
    margin: 0px auto;
    top: 10px;
    left: 0px;
    width: 50%;
    height: 85%;
    /* background-image: linear-gradient(0deg,
            rgb(153, 255, 204) 88%,
            rgb(255, 255, 255, 0) 88%, rgb(255, 255, 255, 0) 100%); */
    background-color: rgb(153, 255, 204, 0.200);
}
    .back2{
        position: relative;
        margin: 0px auto;
        top: 35%;
        width: 95%;
    }
    .mean-pos2 {
        /*訳語位置*/
        position: absolute;
        text-align: center;
        /* background-color: rgb(244, 154, 252); */
        width: 70%;
        height: 50px;
        top: 300px;
        left: 15%;
    }
    .Pmean{
        position: relative;
        font-size: 30px;
        top:8pt;    
    }
    .Prubi{
        position:absolute;
        font-size: 13px;
        text-align: center;
    }
    .sound-posRL {          /*　(発音比較)音声位置　*/    
        position: absolute;
        width: 40%;
        top: 85%;
        left: 30%;
    }
.boxR {
    position: absolute;
    margin: 0px auto;
    top: 10px;
    left: 50%;
    width: 50%;
    height: 85%;
    background-color: rgb(247, 255, 153, 0.200);
}
.Sbutton-pos2 {
    /*ボタン位置*/
    position: absolute;
    background-color: rgba(255, 136, 0, 0.159);
    width: 50%;
    height: 50px;
    top: 90%;
    left: 25%;
}
.Sbutton-pos2 input{display: inline;}
    .QButton{
        position: relative;
        left: 10px;
        cursor:pointer;
    }
    .QButton:hover{
        box-shadow: none;     /* カーソル時の影消去 */    
        color: #000066;     /* 文字色     */
        background: #ffffff;/* 背景色     */
    }
    .Coment{
        position: absolute;
        top: 5px;
        left: 310px;
    }
    #cNoTB{
        position: relative;
        left:140px;
    }
    #pairTB{
        position:absolute;
        top: 15px;
        left:500px;
    }
    /* #CompSelTB{
        position: relative;
        left: 150px;
    }
    #CompGetTB{
        position: relative;
        left: 300px;
    } */
/* <!-- (NHKテキスト) タブの中身 --> */
#tabcontent4{
    position: relative;
}
.LessonSelectBox{
    position:absolute;
    right: 200px;
}
/* ▼チェックが入っているラジオボタンに対応するタブの中身を表示する */
#tabcheck4-0:checked ~ #tabcontent4-0 { display: block; }
#tabcheck4-1:checked ~ #tabcontent4-1 { display: block; }
#tabcheck4-2:checked ~ #tabcontent4-2 { display: block; }
#tabcheck4-3:checked ~ #tabcontent4-3 { display: block; }
#tabcheck4-4:checked ~ #tabcontent4-4 { display: block; }

.subtabcontent {            /* ▼タブの中身(共通装飾＋非選択状態の装飾) */
   display: none;             /* 標準では非表示にする */
   border: 1px solid black;   /* 枠線を引く：黒色で1ピクセルの実線 */
   padding: 1em;              /* 内側の余白量 */
   background-color: #ffffcc; /* 背景色：淡い黄色(※選択中のタブの背景色と合わせます) */
   margin-top: -1px;    /* ※1 */
   z-index: 0;          /* ※2B */
   position: relative;  /* ※3 */
   height: 530px;
}
.subtab {                   /* ▼タブ(共通装飾＋非選択状態の装飾) */
 display: inline-block;          /* インラインブロック化 */
 border-width: 1px 1px 0px 1px;  /* 上側と左右に枠線を引く */
 border-style: solid;            /* 枠線の種類は「実線」 */
 border-color: black;            /* 枠線の色は「黒」 */
 border-radius: 0.75em 0.75em 0px 0px;  /* 左上と右上の角だけを丸くする */
 padding: 0.75em 1em;            /* 内側の余白量 */
 font-weight: bold;              /* タブの文字を太字にする */
 color: black;                   /* タブの文字色：黒色 */
 background-color: #e0e0e0;      /* タブの(非選択状態の)背景色：灰色 */
}
.subtab:hover {             /* ▼タブにマウスポインタが載った際の装飾 */
   color: green;                /* タブの文字色：緑色 */
   background-color: #ccffcc;   /* タブの背景色：淡い緑色 */
   cursor: pointer;             /* マウスポインタの形状を「指(指し示す形)」にする */
}
input:checked + .subtab {   /* ▼選択状態のタブ(＝チェックが入っているラジオボタンの隣にあるタブの装飾) */
 color: red;                  /* タブの文字色：赤色 */
 background-color: #ffffcc;   /* タブの背景色：淡い黄色 */
 z-index: 10;         /* ※2A */
 position: relative;  /* ※3 */
}
    .TextImage{
        width: 45%;
        height: 100%;
        object-fit: cover;
        object-position: 0 0%;
        /* height: 900px; */
    }
    #NHKimage0{
        width: 40%;
        object-position: 0 90%;
    }
    #NHKimage1{
        width: 47%;
    }
    #NHKimage2{
        width: 57%;
        object-position: 0 100%;
    }
    #NHKimage3{
        width: 47%;
        object-position: 0 17%;
    }
    #NHKimage4{
        width: 34%;
        object-position: 0 48%;
    }
    #NHKimage5{
        position: absolute;
        left: 43%;
        width: 55%;
        height: 70%;
        object-position: 0 93%;
    }
    .NHKsound-pos {         /*NHKテキスト音声位置*/    
        position: absolute;
        width: 30%;
        top: 80%;
        left: 65%;
    }
/* ↑ 20240215 13:20 中間整理*/