@charset "UTF-8";
/* CSS Document */

@supports (-webkit-touch-callout: none) {
body {
    height: 100vh;
    height: -webkit-fill-available;
    width: 100%;
    box-sizing: border-box;
}
}

@font-face {
    /*   適用させるフォント名 → 間違っていると反映されないので注意  */
    font-family: "キルゴU";
    /*   .otf, .ttfの拡張子がついているファイルがフォントファイルである。   */
    /*   フォントファイルが何処場所にあるのか : パスを書いてあげる   */
    src: url(font/GN-KillGothic-U-KanaO.ttf);
}
@font-face {
    /*   適用させるフォント名 → 間違っていると反映されないので注意  */
    font-family: "チェックポイント";
    /*   .otf, .ttfの拡張子がついているファイルがフォントファイルである。   */
    /*   フォントファイルが何処場所にあるのか : パスを書いてあげる   */
    src: url(font/CP_Revenge.ttf);
}

/* 全体のコンテナ */
.wrapper {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 50px;
	line-height: 1.5;
    overflow-x: hidden;
}

li{
    list-style:none;
}


/* ----------- 共通ヘッダー部分 -------------------------*/

.common_header {
    height: 8%;
    width: 100%;
    position: absolute;
    top: 0px;
    display: flex;
    background-color: #FFFFFF;
    line-height: 8vh;
	-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
    box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	z-index: 2;
    
}

.common_header p {
    padding-left: 5vw;
}
.mypage_btn_back {
    width: 25vw;
    background-color: #4B89FF;
    color: #FFFFFF;
    text-align: center;
    text-decoration: none;
}




/* -------------- 共通トーク部分 -------------------------*/

.common_top {
    background: linear-gradient(to bottom, #00BF06 0%, #007404 100%);
	flex: 3;
	overflow-y: scroll;
	padding-left: 5vw;
	padding-right: 5vw;
    padding-top: 10vh;
}


/* 下部共通背景とキャラクターイメージ部分 */
.common_bottom {
	flex: 2;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

.character_position_myhome img{
    position:absolute;
    bottom:-10%;
    left:0%;
    width: 35%;
}

.character_position_left img{
    position:absolute;
    bottom:-10%;
    left:0%;
}

.character_position_right img{
    position:absolute;
    bottom:-10%;
    right:0%;
    width: 35%;
}


/* .character_position img{
    width: 100%;

} */



/* -------------- index--------------------------------- */

.contact_close{
    position:absolute;
    border:3px solid rgb(61, 60, 60);
    width: 5%;
    height: 5%;
    padding:3%;
    margin-right:2%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
    top: 2%;
    right: 2%;
    font-size: 100px;
  }


.contact{
    position:absolute;
    display: inline-block;
    text-decoration: none;
    background-color: white;
    width: 150px;
    height: 150px;
    line-height: 150px;
    border-radius: 50%;
    border: solid 2px rgb(58, 171, 210);
    text-align: center;
    overflow: hidden;
    font-weight: bold;
    transition: .4s;
    bottom: 4%;
    right: 7%;
}
.contact img{
    width:60%;
    padding-top:20%;
}

.contact_text{
    position:absolute;
    width:100%;
    height: 40vh;
    background-color: white;
    bottom:2%;
    text-align: center;
    padding-top:1%;
    padding-bottom:1%;
}
.contact_text h5{
    font-size: 80px;
    margin-top:4%;
    margin-bottom:4%;
}
.contact_text p{
    font-size: 40px;
}
.contact_text table{
    width:80%;
    margin-right:0%;
    margin-left:10%;
    border:none;
}
.contact_text img{
    width:60%;
}

.contact_text table tr .right{
    text-align: left;
    vertical-align:top;
}
.contact_text table tr .left{
    width:30%;
    vertical-align:top;
}
.contact_text a{
    font-size: 50px;
    text-decoration: none;
    color:black;
}

.contact_text .fbm a{
    color: white;
    text-align: center;
    background-color: rgba(52, 100, 233, 0.842);
    padding:2% 10% 2% 10%;
    border-radius: 5%;

}

.button_title{
    margin-top:25%;
	display: block;
    text-align: center;
    padding-bottom: 8px;
    text-shadow: 1px 1px 0px black, 1px -1px 0px black, -1px 1px 0px black, -1px -1px 0px black;

}

.button_title h1{
    font-size: 140px;
    color :#000000;
    text-decoration: none;
}

.button_title h2{
    font-size: 80px;
    color:white;
    text-decoration: none;
}




/* -- ログインボタン --*/
.button_login{
    margin-right:30%;
    margin-left:30%;
    margin-top:10%;
	display: block;
    text-align: center;
    padding-bottom: 20px;
    padding-top: 20px;
    background-color: #4B89FF;

}

.button_login a{
    font-size: 50px;
    color :#000000;
    text-decoration: none;
}


.modal2{
    display: none;
    height: 50%;
    width: 70%;
    position: fixed;
    top: 20%;
    left:15%;

}


.modal_content2{
    background: #fff;
    left: 50%;
    padding: 40px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    line-height: 2;
}

.modal_content2 p{
    padding-top: 30px;
    padding-bottom: 30px;
}



/* -- first playボタン --*/

.modal{
    display: none;
    height: 90%;
    width: 70%;
    position: fixed;
    top: 5%;
    left:15%;

}

.modal_content{
    background: #fff;
    left: 50%;
    padding: 40px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    line-height: 1.3;

}

.modal_content p{
    padding-top: 30px;
    padding-bottom: 30px;

}


.button_firstplay{
    margin-right:30%;
    margin-left:30%;
    margin-top:15%;
	display: block;
    text-align: center;
    padding-bottom: 20px;
    padding-top: 20px;
    background-color: #cfff4b;

}

.button_firstplay p{
    font-size: 40px;
    color: #000000;
    text-decoration: none;
    border-bottom: 1px solid #07070785;
}


.button_firstplay a{
    font-size: 50px;
    color: #000000;
    text-decoration: none;

}

/* -- work ボタン --*/

.btn_work{
    margin-right:30%;
    margin-left:30%;
    margin-top:5%;
	display: block;
    text-align: center;
    padding-bottom: 20px;
    padding-top: 20px;
    background-color: #f77aea;
}
.btn_work a{
    color: #000000;
    text-decoration: none;
}

/* -- logout --*/

.logout{
    margin-top:40%;
    margin-bottom:2%;
}

.logout_text{
    margin-left:28%;
}


.button_topback {
    margin-top:10%;
    margin-bottom:20%;
    margin-left:23%;
    text-align: center;
    width:50%;
    padding:20px;
    border-radius:6px;
    border:0;
    background:#f26964;
    text-decoration: none;
    color:#fff;
    text-shadow:1px 1px 0px rgba(0,0,0,.1);
    box-shadow:0px 3px 0px #c1524e;
  }

  .button_topback a {
   color:#FFFFFF;
    text-decoration: none;
   
  }


/* -------------- タウン--------------------------------- */

#town_center_bg {
	background-image: url(img/town_center.webp);
	background-position: center;
	background-size: cover;
}

#town_left_bg {
	background-image: url(img/town_left.webp);
	background-position: center;
	background-size: cover;
}

#town_right_bg {
	background-image: url(img/town_right.webp);
	background-position: center;
	background-size: cover;
}


/* タウン ヘッダー全体 */

.townheader {
	color: #ffffff;
    text-shadow: 1px 1px 0px black, 1px -1px 0px black, -1px 1px 0px black, -1px -1px 0px black;
	width: 100%;
    padding-top: 2%;
	display: flex;
    position: absolute;
    top: 0%;
}



.date {
	flex: 30%;
    line-height: 70px;
    padding-left: 3%;
    font-size: 45px;
}


.temp {
	text-align: center;
	flex: 18%;
    display: flex;
    flex-direction: column;
    line-height: 70px;
    border-left: solid 2px #ffffff;
}

.temp dt{
    font-size: 40px;
}

.temp dd{
    font-size: 40px;
}

.temparature{
    font-size: 60px;
    
}

.weather {
	text-align: center;
	flex: 18%;
	position: relative;
    border-left: solid 2px #ffffff;
    display: flex;
    flex-direction: column;
    line-height: 70px;
}

.weather dt{
    font-size: 40px;
}

.weathermark {
	flex: 16%;
}

.weathermark img{
    position:absolute;
	width: 15%;
    padding-top: 11px;
}

.jlpt{
    flex: 18%;
	display: block;
    text-shadow: none;

}
.jlpt p{
    font-size: 50px;
    border-radius: 0.5em;
    color: white;
	text-align: center;
    background-color: DeepSkyBlue;
    margin-top: 7%;
    margin-right: 0%;
    margin-left: 15%;
    padding-top:7%;
    padding-bottom:7%;
}
.jlpt .jlpt_no{
    font-size: 70px;
    color: white;
	text-align: center;
}

/* タウン ボディ全体 */


  /* ハンバーガーメニューの線 */
  .humberger {
    display: inline-block;
    box-sizing: border-box;
    width:15%;
    height: 7vh;
	display: block;
    text-align: center;
    padding-bottom: 20px;
    padding-top: 20px;
    padding-right:75px;
    margin-right: 1%;
    position: absolute;
    top: 14%;
    right: 1%;
    background-color: white;
    opacity: 0.6;
  }
  .humberger div {
    position: absolute;
    height: 4px;
    width: 50%;
    background-color: #444;
    border-radius: 2px;
    display: inline-block;
    box-sizing: border-box;
  }
  .humberger div:nth-of-type(1) {
    bottom: 75px;
  }
  .humberger div:nth-of-type(2) {
    bottom: 50px;
  }
  .humberger div:nth-of-type(3) {
    bottom: 25px;
  }


  /* メニュー */
  .menu{
    position:absolute;
    width: 70%;
    height:77vh;
    background-color: white;
    z-index: 999;
    right:0%;
    margin-top: 2%;
    overflow: scroll;
    border: 1px solid gray;
  }

  .menu_close{
    font-size: 60px;
    text-align: right;
    line-height: 70%;
    padding-top: 0%;
    margin-top: 0%;
    margin-bottom: 5%;
    color: black;
  }
  
  .menu_items{
    line-height: 150px;
    padding-left: 3%;
    padding-right: 3%;
  }

  .menu li{
    border-top: 1px solid black;
  }

  .menu a{
    text-decoration: none;
    color: black;
  }


  /* メニューのフェードインその場で */
  .menu{
    animation-name:fadeInAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    opacity:0;
  }
  
  @keyframes fadeInAnime{
    from {
      opacity: 0;
      transform: translateY(-100px);
    }
  
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  

/* キャラクター位置 */
.character{
	display: block;
    position: absolute;
    bottom: 15%;
    left: 2%;
}

.character img{
    width:80%;
    height:auto;
}




/* 左ページ遷移ボタン */

.move_left{
	display: block;
	padding-top: 1vw;
    padding-right: 2vw;
    padding-left: 2vw;
    padding-bottom: 1vw;
    border-radius: 50%;
    background-color: #FFFFFF;
    position: absolute;
    top: 40%;
    left: 5%;
}

.move_left a{
    font-size: 60px;
    color: #000000;
	text-align: center;
    text-decoration: none;
}


/* 右ページ遷移ボタン */

.move_right{
	display: block;
	padding-top: 1vw;
    padding-right: 2vw;
    padding-left: 2vw;
    padding-bottom: 1vw;
    border-radius: 50%;
    background-color: #FFFFFF;
    position: absolute;
    top: 40%;
    right: 5%;
}

.move_right a{
    font-size: 60px;
    color: #000000;
	text-align: center;
    text-decoration: none;
}


/* town_center ボタン */

/* 学校ボタン */

.button_school{
	display: block;
	padding-top: 1vw;
    padding-right: 4vw;
    padding-left: 4vw;
    padding-bottom: 1vw;
    border-radius: 5em;
    background-color: #FFFFFF;
    position: absolute;
    top: 35%;
    left: 40%;
}


.button_school a{
    font-size: 50px;
    color: #000000;
	text-align: center;
    text-decoration: none;
}


/* 試験場ボタン */

.button_test_center{
	display: block;
	padding-top: 1vw;
    padding-right: 4vw;
    padding-left: 4vw;
    padding-bottom: 1vw;
    border-radius: 5em;
    background-color: #FFFFFF;
    position: absolute;
    top: 54%;
    left: 20%;
}


.button_test_center a{
    font-size: 50px;
    color: #000000;
	text-align: center;
    text-decoration: none;
}


/* 自宅ボタン */

.button_home{
	display: block;    
    position: absolute;
    top: 67%;
    left: 67%;
}


.button_home a{
    font-size: 50px;
    background-color: #FFFFFF;
    color: #000000;
	text-align: center;
    text-decoration: none;
	padding-top: 1vw;
    padding-right: 4vw;
    padding-left: 4vw;
    padding-bottom: 1vw;
    border-radius: 5em;
}
.button_home p{
    font-size: 45px;
    font-weight: bold;
    text-shadow:
    2px 2px 2px white, -2px -2px 2px white,
   -2px 2px 2px white,  2px -2px 2px white,
    2px 0px 2px white, -2px -0px 2px white,
    0px 2px 2px white,  0px -2px 2px white;
    color: red;
    animation: dokidoki 1.5s infinite;
}
@keyframes dokidoki {
    0% {
        transform: scale(1.25)
    }
    5% {
        transform: scale(1)
    }
    95% {
        transform: scale(1)
    }
    100% {
        -webkit-transform: scale(1.25)
    }
}

/* town_left ボタン */

/* ショッピングセンターボタン */

.button_shopping{
	display: block;
	padding-top: 1vw;
    padding-right: 4vw;
    padding-left: 4vw;
    padding-bottom: 1vw;
    border-radius: 5em;
    background-color: #FFFFFF;
    position: absolute;
    top: 15%;
    left: 20%;
}


.button_shopping a{
    font-size: 50px;
    color: #000000;
	text-align: center;
    text-decoration: none;
}


/* 駅ボタン */

.button_station{
	display: block;
	padding-top: 1vw;
    padding-right: 4vw;
    padding-left: 4vw;
    padding-bottom: 1vw;
    border-radius: 5em;
    background-color: #FFFFFF;
    position: absolute;
    top: 52%;
    left: 10%;
}


.button_station a{
    font-size: 50px;
    color: #000000;
	text-align: center;
    text-decoration: none;
}


/* 銀行ボタン */

.button_bank{
	display: block;
	padding-top: 1vw;
    padding-right: 4vw;
    padding-left: 4vw;
    padding-bottom: 1vw;
    border-radius: 5em;
    background-color: #FFFFFF;
    position: absolute;
    top: 63%;
    left: 65%;
}


.button_bank a{
    font-size: 50px;
    color: #000000;
	text-align: center;
    text-decoration: none;
}


/* town_right ボタン */

/* 工場ボタン */

.button_factory{
	display: block;
	padding-top: 1vw;
    padding-right: 4vw;
    padding-left: 4vw;
    padding-bottom: 1vw;
    border-radius: 5em;
    background-color: #FFFFFF;
    position: absolute;
    top: 20%;
    left: 45%;
}


.button_factory a{
    font-size: 50px;
    color: #000000;
	text-align: center;
    text-decoration: none;
}


/* 実家ボタン */

.button_hometown{
	display: block;
	padding-top: 1vw;
    padding-right: 4vw;
    padding-left: 4vw;
    padding-bottom: 1vw;
    border-radius: 5em;
    background-color: #FFFFFF;
    position: absolute;
    top: 45%;
    left: 38%;
}


.button_hometown a{
    font-size: 50px;
    color: #000000;
	text-align: center;
    text-decoration: none;
}


/* 自宅ボタン */

.button_hospital{
	display: block;
	padding-top: 1vw;
    padding-right: 4vw;
    padding-left: 4vw;
    padding-bottom: 1vw;
    border-radius: 5em;
    background-color: #FFFFFF;
    position: absolute;
    top: 72%;
    left: 68%;
}


.button_hospital a{
    font-size: 50px;
    color: #000000;
	text-align: center;
    text-decoration: none;
}



/* タウン フッター全体 */
.townfooter {
	color: #ffffff;
	width: 100%;
	padding-top: 2%;
    padding-bottom: 2%;
	background-color: #000000;
    background-color: rgba(23, 23, 23, 0.7);
	position: absolute;
	bottom: 0%;
	display: flex;
}

/* タウン フッター左（ユーザー名） */
.townfooter_left {
	flex: 45%;
    position:relative;
}

.townfooter_left h6{
	font-size: 35px;
    padding-left:10px;
    text-align: center;
}

.townfooter_left p{
	font-size: 40px;
    padding-left:10px;
    text-align: center;
}

.total_num{
    font-size: 30px;
}


/* タウン フッター中央（ミッション） */
.townfooter_center {
	flex: 35%;
    border-left: solid 2px #ffffff;
}

.townfooter_center h6{
	font-size: 45px;
    padding-left:30px;
    color: yellow;
}

.townfooter_center h5{
	font-size: 60px;
    padding-left:5px;
    color: yellow;
}

.townfooter_center p{
	font-size: 35px;
    padding-left:30px;
}

/* ゲスト用 タウン フッター中央（ミッション） */
.townfooter_center_guest {
	flex: 35%;
    border-left: solid 2px #ffffff;
}
.townfooter_center_guest p{
	font-size: 45px;
}

.btn_login{
    background-color: #4B89FF;
    color:white;
    padding-top:5%;
    padding-bottom:5%;
    width:80%;
    margin-left:10%;
    margin-top:1%;
    text-align: center;

  }
  .login_close{
    font-size: 60px;
    text-align: right;
    line-height: 70%;
    padding-top: 0%;
    margin-top: 0%;
    margin-bottom: -5%;
    color: black;
  }

  .login_form{
    position:absolute;
    width: 80%;
    height:65vh;
    background: #fff;
    z-index: 998;
    margin-top: 20%;
    margin-left:11%;
    border: 4px solid #4B89FF;
  }

  .login_form form{
    border: 4px solid #7ec1cb;
    margin-left:3%;
    margin-top:0%;
    margin-bottom:5%;
    margin-right:3%;
  }

  .menu_close{
    font-size: 80px;
    text-align: right;
    line-height: 70%;
    padding-top: 0%;
    margin-top: 5%;
    margin-right: 5%;
    color: black;

  }

.login_form h4{
  text-align: center;
  margin-bottom: 4%;
  margin-top: -5%;
}

  input {
    font-size:55px;
    width:85%;
    background:#f5f5f5;
    border:0;
    padding:10px;
    border-radius:6px;
    margin-top:8%;
    margin-left:5%;
    border:1px solid #eee;
   
  }

  .login_form .login_btn {
    margin-top:8%;
    margin-bottom:5%;
    margin-left:20%;
    width:60%;
    padding:10px;
    border-radius:6px;
    border:0;
    background:#4B89FF;
    font-size:60px;
    color:#fff;
    text-shadow:1px 1px 0px rgba(0,0,0,.1);
    box-shadow:0px 3px 0px #345fb0; 
  }

  .make_account{
    margin-top:5%;
    margin-left:16%;
    width:80%;
    padding-left: 15%;
    padding-right: 15%;
    padding-top: 2%;
    padding-bottom: 2%;
    border-radius:6px;
    border:0;
    border: 3px solid skyblue;
    background:white;
    font-size:50px;
    color:skyblue;
    text-shadow:1px 1px 0px rgba(0,0,0,.1);
    box-shadow:0px 3px 0px skyblue;
    text-decoration: none;
}


/* タウン フッター右（アイコン） */
.townfooter_right {
	flex: 20%;
    border-left: solid 2px #ffffff;
}

/* タウン フッター左 画像設定 */
.town_mypage img{
    position: absolute;
    width: 6%;
    padding-left: 6%;
}


/* -------------- 吹き出し----------------------- */

.jlpt_select{
    position:absolute;
    width: 63%;
    margin-left:18%;
    margin-top:20%;
    background-color: white;
    border-radius: 1em;
    z-index: 1;
}

.jlpt_select ul{
    padding:10%;
    line-height: 4em;
    text-align: center;
}

.jlpt_select .no_link{
    pointer-events: none;
}


.jlpt_select a{
    color:white;
    text-decoration: none;
    background-color:rgba(245, 196, 62, 0.966);
    padding:5%;
    padding-left:25%;
    padding-right:25%;
    border-radius: 0.5em;

}

.coming_soon{
    position: absolute;
    padding:2%;
    top:21%;
    left:3%;
    border-radius: 10%;
    color:red;
    font-size:40px;
    text-align: center;
}



.fukidashi{
    position:absolute;
    width: 63%;
    margin-left:27%;
    margin-top:18%;
}

.arrow_text{
    position: absolute;
    margin-left:1%;
    margin-right:1%;
}


.fukidashi_close{
    position:absolute;
    width: 50%;
    margin-left:25%;
    margin-top:105%;
}

.howto_jp{
    left: 0%;
}
.howto_jp img{
    width: 90%;
    height: auto;
    border: 8px solid green;
}



/* -------------- 新規アカウントボタン & CLOSEボタン----------------------- */
.account{
    position:absolute;
    border-radius: 4px;
    width: 80%;
    height: 40px;
    padding: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FF69B4;
    color: #fff;
    left: 5%;
    bottom: 8%;
    border: 2px solid black;
}

.account2{
    border-radius: 4px;
    width: 80%;
    height: 40px;
    padding: 4%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FF69B4;
    color: #fff;
    margin-left: 5%;
    margin-top: 5%;
    border: 2px solid black;
}

.close{
    border-radius: 4px;
    width: 50%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: red;
    margin-left: 23%;
    margin-top: 5%;
}


/* -------------- アカウントの吹き出し----------------------- */

.fukidashi_account{
    position:absolute;
    width: 85%;
    margin-top:5%;
    margin-left:8%;
    z-index: 1;
    overflow: scroll;
}

.arrow_box_account{
    position:relative;
    width:90%;
    height:80vh;
    background:#FFEE9C;
    padding:20px;
    text-align:left;
    border:8px solid #2B8A0A;
    color:#333333;
    border-radius:30px;
    overflow: scroll;
}

.arrow_box_account h4{
    text-align:center;
}

.account_name {
    margin-top: 2%;
    margin-bottom: 1%;
}

.account_name label.itemname {
    font-size: 0.85em;
    padding-left:15px;
    border-left:12px solid #333;
}
.account_name input{
    margin-top:10px;
    font-size: 40px;
    width: 90%;
    padding:24px;
    border:1px solid #CCC;
    background:#FFF;
}

.account_name select{
    margin-top:10px;
    font-size: 40px;
    width: 90%;
    margin-bottom: 3%;
    padding:12px;
}

.account_name .birth{
    font-size: 40px;
    width: 30%;
    margin-bottom: 5%;
}
.account-birthday-wrapp {
    display: flex;
}
.account-birthday-wrapp .account-birthday-item {
    width: 33%;
}
.account-birthday-wrapp .account-birthday-item label {
    display: block;
    font-size: 0.8em;
}
.account-birthday-wrapp .account-birthday-item select {
    width: 94%;
}
.birth_text{
    font-size: 50px;
}


.account_btn_next{
  position:absolute;
  border-radius: 4px;
  width: 30%;
  height: 40px;
  padding:3%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0fbfae;
  color: #fff;
  bottom: 5%;
  right: 5%;
}

.btn_line{
    display: flex;
    justify-content: center;
    margin-top:6%;
}

.account_btn_back{
  border-radius: 4px;
  width: 30%;
  padding:2%;
  text-align: center;
  background: #0fbfae;
  color: #fff;
  margin-right: 8%;
  margin-left:2%;

}

.account_btn_confirm{
  border-radius: 4px;
  width: 50%;
  padding:3%;
  align-items: center;
  background: #f26964;
  color: #fff;
  margin-right: 5%;
  font-size: 120%;
}


.account_btn_already{
  position:absolute;
  border-radius: 4px;
  width: 50%;
  padding:3%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f26964;
  color: #fff;
  bottom: 5%;
  right: 22%;
  font-size: 120%;
  text-decoration: none;

}

.arrow_box_confirm_error{
    z-index: 1;
    position:absolute;
    background-color: rgb(255, 253, 253);
    top: 30%;
    left: 15%;
    padding-top:10%;
    padding-bottom:5%;
    width:70%;
    border:1px solid rgb(116, 112, 112);
}

.arrow_box_confirm_error p{
    color:red;
    padding-left:5%;
    padding-right:5%;
}


.sample{
    color: red;
    font-size: 40px;
}

.confirm{
    position:absolute;
    width: 80%;
    margin-top:20%;
    margin-left:8%;
    z-index: 1;
}


.account_btn_confirm2{
  position:absolute;
  border-radius: 4px;
  width: 40%;
  padding:3%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f26964;
  color: #fff;
  bottom: 4%;
  right: 5%;
  font-size: 120%;
  text-decoration: none;
}

.account_btn_back2{
  position:absolute;
  border-radius: 4px;
  width: 30%;
  height: 40px;
  padding:3%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0fbfae;
  color: #fff;
  bottom: 4%;
  left: 5%;
}



.arrow_box_confirm{
    position:relative;
    width:100%;
    height:65vh;
    background:#FFEE9C;
    padding:20px;
    text-align:left;
    border:8px solid #2B8A0A;
    color:#333333;
    border-radius:30px;
}

.arrow_box_confirm h4{
    text-align:center;
    margin-bottom: 5%;
}

.arrow_box_already{
    position:relative;
    width:100%;
    height:58vh;
    background:#FFEE9C;
    padding:20px;
    text-align:left;
    border:8px solid #2B8A0A;
    color:#333333;
    border-radius:30px;
}

.arrow_box_already h4{
    text-align:left;
    margin-bottom: 3%;
}

.arrow_box_already p{
    text-align:left;
    margin-bottom: 3%;
}

.already_username{
    font-size:100px;
    color:red;
}

table{
    margin-top:10%;
}

table, td {
    table-layout: fixed;
    width: 100%;
    border: 1px solid black;
    padding: 5%;
}
    
td{
    font-size: 40px;
    text-align: center;
}

td.width35 {
    width: 35%;
}

td.width65 {
    width: 65%;
}


/* -------------- 最初の吹き出し----------------------- */
.arrow_box_menu{
    position:relative;
    width:100%;
    height:62vh;
    background:#FFEE9C;
    padding:20px;
    text-align:left;
    border:8px solid #2B8A0A;
    color:#333333;
    font-size:45px;
    border-radius:30px;
    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    
}


.arrow_box_menu:after,.arrow_box_menu:before{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    right:100%;
    top:76%;
}
.arrow_box_menu:after{
    border-color: rgba(255, 238, 156, 0);
    border-top-width:20px;
    border-bottom-width:20px;
    border-left-width:31px;
    border-right-width:31px;
    margin-top: -20px;
    border-right-color:#FFEE9C;
}
.arrow_box_menu:before{
    border-color: rgba(43, 138, 10, 0);
    border-top-width:22px;
    border-bottom-width:22px;
    border-left-width:34px;
    border-right-width:34px;
    margin-top: -22px;
    margin-right: 2px;
    border-right-color:#2B8A0A;
}

.arrow_box_menu h5{
    text-align: center;
}


.arrow_box_menu .btn_menu{
    position:absolute;
    border-radius: 4px;
    width: 80%;
    height: 40px;
    padding:5%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0fbfae;
    color: #fff;
    left: 5%;
    bottom: 24%;
    border: 2px solid black;
}

.arrow_box_menu .arrow_text{
    top: 15%;
}


/* -------------- Navi Menu----------------------- */
.arrow_box_menu1{
    position:relative;
    width:100%;
    height:72vh;
    background:#FFEE9C;
    padding:20px;
    text-align:left;
    border:8px solid #2B8A0A;
    color:#333333;
    font-size:45px;
    border-radius:30px;
    -webkit-border-radius:30px;
    -moz-border-radius:30px;

}

.arrow_box_menu1:after,.arrow_box_menu1:before{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    right:100%;
    top:76%;
}
.arrow_box_menu1:after{
    border-color: rgba(255, 238, 156, 0);
    border-top-width:20px;
    border-bottom-width:20px;
    border-left-width:31px;
    border-right-width:31px;
    margin-top: -20px;
    border-right-color:#FFEE9C;
}
.arrow_box_menu1:before{
    border-color: rgba(43, 138, 10, 0);
    border-top-width:22px;
    border-bottom-width:22px;
    border-left-width:34px;
    border-right-width:34px;
    margin-top: -22px;
    margin-right: 2px;
    border-right-color:#2B8A0A;
}

.arrow_box_menu1 h5{
    text-align: center;
    margin-bottom: 5%;
    color:#007404;
}

.arrow_box_menu1 .arrow_text{
    left: 10%;
    top: 22%;
    line-height: 90px;
}

.arrow_text ul li p{
    decoration: underline;
    border-bottom:  1px solid black;
}


/* -------------- TESTについての説明----------------------- */
.arrow_box_test{
    position:relative;
    width:100%;
    height:58vh;
    background:#FFEE9C;
    padding:20px;
    text-align:left;
    border:8px solid #2B8A0A;
    color:#333333;
    font-size:45px;
    border-radius:30px;
    -webkit-border-radius:30px;
    -moz-border-radius:30px;

}

.arrow_box_test:after,.arrow_box_test:before{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    right:100%;
    top:80%;
}
.arrow_box_test:after{
    border-color: rgba(255, 238, 156, 0);
    border-top-width:20px;
    border-bottom-width:20px;
    border-left-width:31px;
    border-right-width:31px;
    margin-top: -20px;
    border-right-color:#FFEE9C;
}
.arrow_box_test:before{
    border-color: rgba(43, 138, 10, 0);
    border-top-width:22px;
    border-bottom-width:22px;
    border-left-width:34px;
    border-right-width:34px;
    margin-top: -22px;
    margin-right: 2px;
    border-right-color:#2B8A0A;
}

.arrow_box_test h5{
    text-align: center;
}

.arrow_box_test .arrow_text{
    top: 18%;
}

.arrow_text_test{
    width: 100%;
    height: 33vh;
}

.arrow_text_test2{
    width: 100%;
    height: 33vh;
}

.arrow_text_test3{
    width: 100%;
    height: 33vh;
}

.arrow_text_test4{
    width: 100%;
    height: 33vh;
}

/* -------------- Missionについての説明----------------------- */
.arrow_box_mission{
    position:relative;
    width:100%;
    height:58vh;
    background:#FFEE9C;
    padding:20px;
    text-align:left;
    border:8px solid #2B8A0A;
    color:#333333;
    font-size:45px;
    border-radius:30px;
    -webkit-border-radius:30px;
    -moz-border-radius:30px;

}

.arrow_box_mission:after,.arrow_box_mission:before{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    right:100%;
    top:80%;
}
.arrow_box_mission:after{
    border-color: rgba(255, 238, 156, 0);
    border-top-width:20px;
    border-bottom-width:20px;
    border-left-width:31px;
    border-right-width:31px;
    margin-top: -20px;
    border-right-color:#FFEE9C;
}
.arrow_box_mission:before{
    border-color: rgba(43, 138, 10, 0);
    border-top-width:22px;
    border-bottom-width:22px;
    border-left-width:34px;
    border-right-width:34px;
    margin-top: -22px;
    margin-right: 2px;
    border-right-color:#2B8A0A;
}

.arrow_box_mission h5{
    text-align: center;
}

.arrow_box_mission .arrow_text{
    top: 18%;
}

.arrow_text_mission{
    width: 100%;
    height: 33vh;
}

.arrow_text_mission2{
    width: 100%;
    height: 33vh;
}

.arrow_text_mission3{
    width: 100%;
    height: 33vh;
}

.arrow_text_mission4{
    width: 100%;
    height: 33vh;
}


/* -------------- HOMEについての説明----------------------- */
.arrow_box_home{
    position:relative;
    width:100%;
    height:58vh;
    background:#FFEE9C;
    padding:20px;
    text-align:left;
    border:8px solid #2B8A0A;
    color:#333333;
    font-size:45px;
    border-radius:30px;
    -webkit-border-radius:30px;
    -moz-border-radius:30px;

}

.arrow_box_home:after,.arrow_box_home:before{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    right:100%;
    top:80%;
}
.arrow_box_home:after{
    border-color: rgba(255, 238, 156, 0);
    border-top-width:20px;
    border-bottom-width:20px;
    border-left-width:31px;
    border-right-width:31px;
    margin-top: -20px;
    border-right-color:#FFEE9C;
}
.arrow_box_home:before{
    border-color: rgba(43, 138, 10, 0);
    border-top-width:22px;
    border-bottom-width:22px;
    border-left-width:34px;
    border-right-width:34px;
    margin-top: -22px;
    margin-right: 2px;
    border-right-color:#2B8A0A;
}

.arrow_box_home h5{
    text-align: center;
}

.arrow_box_home .arrow_text{
    top: 18%;
}


.arrow_text_home{
    width: 100%;
    height: 33vh;
}

.arrow_text_home2{
    width: 100%;
    height: 33vh;
}

.arrow_text_home3{
    width: 100%;
    height: 33vh;
}

.arrow_text_home4{
    width: 100%;
    height: 33vh;
}


/* -------------- MYPAGEについての説明----------------------- */
.arrow_box_mypage{
    position:relative;
    width:100%;
    height:58vh;
    background:#FFEE9C;
    padding:20px;
    text-align:left;
    border:8px solid #2B8A0A;
    color:#333333;
    font-size:45px;
    border-radius:30px;
    -webkit-border-radius:30px;
    -moz-border-radius:30px;

}

.arrow_box_mypage:after,.arrow_box_mypage:before{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    right:100%;
    top:80%;
}
.arrow_box_mypage:after{
    border-color: rgba(255, 238, 156, 0);
    border-top-width:20px;
    border-bottom-width:20px;
    border-left-width:31px;
    border-right-width:31px;
    margin-top: -20px;
    border-right-color:#FFEE9C;
}
.arrow_box_test:before{
    border-color: rgba(43, 138, 10, 0);
    border-top-width:22px;
    border-bottom-width:22px;
    border-left-width:34px;
    border-right-width:34px;
    margin-top: -22px;
    margin-right: 2px;
    border-right-color:#2B8A0A;
}

.arrow_box_mypage h5{
    text-align: center;
}

.arrow_box_mypage .arrow_text{
    top: 18%;
}

.arrow_text_mypage{
    width: 100%;
    height: 33vh;
}

.arrow_text_mypage2{
    width: 100%;
    height: 33vh;
}

.arrow_text_mypage3{
    width: 100%;
    height: 33vh;
}

.arrow_text_mypage4{
    width: 100%;
    height: 33vh;
}



.menu_btn{
  position:absolute;
  border-radius: 4px;
  width: 30%;
  height: 40px;
  padding:3%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0fbfae;
  color: #fff;
  bottom: -30%;
  right: 5%;
}

.menu_btn_back{
  position:absolute;
  border-radius: 4px;
  width: 30%;
  height: 40px;
  padding:3%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0fbfae;
  color: #fff;
  bottom: -30%;
  left: 5%;
}

/* -------------- 吹き出しテキスト----------------------- */
.arrow_box_close, .arrow_box_close_logedin{
    position:relative;
    width:60%;
    height:5vh;
    background:#FFEE9C;
    padding:20px;
    text-align:left;
    border:8px solid #2B8A0A;
    color:#333333;
    font-size:45px;
    border-radius:30px;
    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    
}


.arrow_box_close:after,.arrow_box_close:before, .arrow_box_close_logedin:after,.arrow_box_close_logedin:before{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    right:100%;
    top:56%;
}
.arrow_box_close:after, .arrow_box_close_logedin:after{
    border-color: rgba(255, 238, 156, 0);
    border-top-width:20px;
    border-bottom-width:20px;
    border-left-width:31px;
    border-right-width:31px;
    margin-top: -20px;
    border-right-color:#FFEE9C;
}
.arrow_box_close:before, .arrow_box_close_logedin:before{
    border-color: rgba(43, 138, 10, 0);
    border-top-width:22px;
    border-bottom-width:22px;
    border-left-width:34px;
    border-right-width:34px;
    margin-top: -22px;
    margin-right: 2px;
    border-right-color:#2B8A0A;
}


.arrow_box_close p, .arrow_box_close_logedin p{
    text-align: center;
}

/* -------------- 吹き出し_index----------------------- */

.fukidashi_index{
    position:absolute;
    left:28%;
    bottom:22%;
}


.arrow_box_error{
    position:relative;
    width:80%;
    height:18vh;
    background:#FFFFFF;
    padding:20px;
    text-align:left;
    border:8px solid red;
    color:red;
    font-size:45px;
    border-radius:30px;
    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    
}
.arrow_box_error:after,.arrow_box_error:before{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    right:100%;
    top:86%;
}
.arrow_box_error:after{
    border-color: rgba(255, 238, 156, 0);
    border-top-width:20px;
    border-bottom-width:20px;
    border-left-width:31px;
    border-right-width:31px;
    margin-top: -20px;
    border-right-color:#FFFFFF;
}
.arrow_box_error:before{
    border-color: rgba(43, 138, 10, 0);
    border-top-width:22px;
    border-bottom-width:22px;
    border-left-width:34px;
    border-right-width:34px;
    margin-top: -22px;
    margin-right: 2px;
    border-right-color:red;
}


.btn_error_notice{
  position:absolute;
  border-radius: 4px;
  width: 40%;
  height: 70px;
  padding:3%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0fbfae;
  color: #fff;
  bottom: 10%;
  right: 27%;
}

/* ---------------- 読解タブ問題 ---------------------------*/


/* dokkai_bottom */
.dokkai_bottom {
    flex: 26%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow-y: scroll;
}

.tab_item {
    flex-wrap: wrap;
}
.tab_item .tab_item1 {
    width: 100%;
    padding:10px;
    border-bottom: 1px solid #000000;
}
.tab_item1 div {
    display: flex;
}
.tab_item1 div .item-img {
    vertical-align: middle;
    width: 45%;
    text-align: center;
}
.tab_item1 div .item-img img {
    width: 80%;
    height: auto;
}
.tab_item1 div .item-info {
    width: 55%;
    text-align: left;
    display: flex;
    align-items: center;
}

.tab_item1 div .item-info span {
    display: block;
    font-size: 1.3em;
    height: auto;
}

.n5_minna img{
    width: 100%;
    height: 35vh;
}

.next_button_tab{
    color:yellow;
    font-size: 40px;
	display: block;
	padding-top: 3vw;
    padding-right: 10%;
    padding-left: 10%;
    padding-bottom: 3vw;
    border-radius: 30px;
    background-color:#4B89FF;
    margin-top: 1vw;
    margin-bottom: 1vw;
    margin-right: 20vw;
    margin-left: 20vw;
    text-decoration: none;
    text-align: center;
}


.space{
    margin-top:20%;
}

/* ---------------- マイページ ---------------------------*/

/* マイページtop */
.mypage_top {
    position: relative;
	flex: 50%;
	padding-left: 5vw;
	padding-right: 5vw;
    padding-top: 8vh;
    background: linear-gradient(to bottom, #00BF06 0%, #007404 100%);
}


/* マイページbottom */
.mypage_bottom {
	flex: 50%;
    overflow-y: scroll;
}


/* Logoutボタン */

.btn_logout{
    position:absolute;
    right:0%;
    width:20%;
    padding-left:2%;
    padding-right:2%;
    padding-top:1%;
    padding-bottom:1%;
    margin-top:1.8%;
    margin-right:2%;
    background-color: white;
    color: green;
    font-size: 40px;
    border: 2px solid green;
	text-align: center;
    text-decoration: none;
    z-index: 3;
}

/* マイページのcommon_top */
.mypage_top .mypage {
    display: flex;
    flex-direction: row;
    margin-top: 5%;
    color: #f3f2f8;
    font-size: 39px;
}

/* 左のキャラクターの配置割合 */
.mypage_pic{
    flex: 35%
}

/* 左のキャラクター画像 */
.mypage_pic img{
    width: 100%;
    
}

/* 右のプロフィールの配置割合 */
.mypage_profile{
    flex: 65%
}

/* 右のプロフィールの詳細配置 */
.mypage_profile{
    display: flex;
    flex-flow: column;
}

/* 右のプロフィールのユーザー名の配置割合 */
.profile_name{
    flex: 30%
}

/* 右のプロフィールのユーザー名のフォント */
.profile_name{
    font-size: 65px;

}


/* 右のプロフィールの水平線 */
hr{
    margin-top: 10px;
    margin-bottom: 15px;
}

/* 右のプロフィールのステータス配置割合 */
.profile_status{
    flex: 70%
}

/* 右のプロフィールのステータス配置 */
.profile_status{
    display: flex;
    justify-content:space-between;
}

/* 右のプロフィールのステータス配置割合 */
.status_text{
    flex: 68%
}
.status_value{
    flex: 32%
}

/* 右のプロフィールのステータスの値を右寄せ */
.status_value{
    text-align: right;
}

/* マイページのcommon_bottom */

.tab-area {
    display: flex;
    justify-content: space-around;
    position: absolute;
    top: 53%;
    width: 100%;
    z-index: 1;

}
    .tab {
      color: rgb(2, 2, 2);
      background: rgb(218, 215, 215);
      border-radius: 20px 20px 0 0;
      font-size: 30px;
      text-align: center;
      flex:1;
      padding-top: 2%;
      padding-bottom: 2%;
    }
    .tab.active {
      color: DeepSkyBlue;
      background: white;
      border-radius: 20px 20px 0 0;
      border: none;
      padding-top: 2%;
      padding-bottom: 2%;
    }
  
  .content-area {
    font-size: 30px;
    text-align: center;
    background-color: white;
    padding-bottom: 10%;

  }
    .content {
      display: none;
      position:relative;
    }
    .content.show {
      margin-top: 50px;
      display: block;
      
    }

    /* アイテムタブと仲間タブをflexboxにする */
.tab_item{
    display: flex; 
    justify-content: space-around;
    flex-wrap: wrap;
}


/* アイテムタブと仲間タブのflex配置 */
.tab_item1{
    flex: column; 
}


/*           mypage tab_item2(profile) 全体             */


.tab_item2{
    margin-top:10%;
}

.tab_item2 h5{
    font-size: 70px;
    margin-bottom:5%;
}
.tab_item2 table{
    border-collapse:collapse;
    width: 90%;
    table-layout: fixed;
    margin-left:5%;
    margin-right:5%;
    margin-top:0%;
}

.tab_item2 td{
    border: solid 1px; 
}


.tab_item2 .table_left{
    width: 30%;
    table-layout: fixed;
    font-size: 30px;
    text-align: center;
}

.tab_item2 .table_right{
    table-layout: fixed;
    font-size: 35px;
    text-align: left;
}

.pro_mail_2{
    width: 85%;
}
.pro_mail_2 p{
    font-size: 30px;
    color: red;
    text-align: left;
}
.table_right input{
    width:95%;
    height:5vh;
    font-size: 45px;
    position: left;
    border: 5px solid red;
}
.table_right select{
    width:100%;
    height:7vh;
    font-size: 45px;
    position: left;
    border: 5px solid red;
}


/*           mypage tab_item2(profile) 編集画面             */


.pro_edit_btn{
    border-radius: 4px;
    background: orange;
    width: 35%;
    padding: 10px;
    border: 2px solid black;
    margin-left:58%;
    margin-top:0%;
    margin-bottom:3%;
}
.pro_edit_btn p{
    font-size: 50px;
    color: white;

}


.pro_edit{
    position: relative;
    top:10%;
}

.pro_edit_content{
    z-index: 2;
    position:absolute;
    background-color: rgb(255, 253, 253);
    padding-top:10%;
    padding-bottom:10%;
    padding-left:3%;
    border:1px solid rgb(116, 112, 112);
}


.pro_edit h5{
    font-size: 70px;
}
.pro_edit table{
    border-collapse:collapse;
    width: 98%;
    table-layout: fixed;
    margin-right:5%;
    margin-top:5%;
}

.pro_edit td{
    border: solid 1px; 
}


.pro_edit .table_left{
    width: 30%;
    table-layout: fixed;
    font-size: 27px;
    margin-left: -5%;
}

.pro_edit .table_right{
    table-layout: fixed;
    font-size: 35px;
}
.pro_edit .table_right input{
    margin-left: -3%;
    width: 100%;
}

.pro_edit_already{
    z-index: 3;
    position:absolute;
    background-color: rgb(255, 253, 253);
    padding-top:10%;
    padding-bottom:10%;
    padding-left:5%;
    width:90%;
    height:auto;
    border:1px solid rgb(116, 112, 112);
    left:3%;
  }

  .pro_edit_already h5{
    text-align: center;
    margin-bottom:5%;
  }

  .pro_edit_btn_top {
    margin-top:3%;
    margin-left:26%;
    width:40%;
    background-color: #4B89FF;
    color: white;
    text-decoration: none;
    border:1px solid rgb(116, 112, 112);
    border-radius:50px;
    padding: 20px;
}

.pro_edit_btn_top a{
    background-color: #4B89FF;
    color: white;
    text-align: center;
    text-decoration: none;
}



.pro_edit_content button{
    font-size: 50px;
    margin-top:6%;
    padding-top: 3vw;
    padding-right: 3vw;
    padding-left: 3vw;
    padding-bottom: 3vw;
    border-radius: 12px;
    background-color: #f26964;
    color: white;
    border:1px solid rgb(116, 112, 112);
    margin-left:37%;
}




.pro_edit_close{
    position:absolute;
    border-radius: 4px;
    width: 10%;
    height: 20px;
    padding:3%;
    margin-right:2%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #333;
    color: #fff;
    top: 2%;
    right: 0%;
  }


/*           mypage tab_item3(info) 全体             */

.tab_item3{
    display: flex;
    justify-content:space-between;
    font-size: 40px;
    line-height: 2;
    margin-top:6%;
}

.mypage_info{
    flex: 1;
    width: 100%;
    height: 27vh;
    margin-left:3%;
}

.mypage_info h5{
    color: rgb(255, 238, 0);
    text-shadow: 1px 2px 0px #0c0c0c; 
    font-size: 50px;
    background-color: red

}

.tab_item3 div .school_img {
    border:1px solid #DDD;
    width: 100%;
    height:90%;
}

.tab_item3 div .school_name {
    width: 100%;
    text-align: center;
    margin-top: 0%;
}

.tab_item3 div .school_name span {
    display: block;
    font-size: 1em;
    height: auto;
}


.button_jp_school{
    margin-right:10%;
    margin-left:10%;
    margin-top:15%;
	display: block;
    text-align: center;
    padding-bottom: 20px;
    padding-top: 20px;
    background-color: #4b8affb0;

}

.button_jp_school a{
    font-size: 40px;
    color :white;
    text-decoration: none;
}

.button_senmon_school{
    margin-right:10%;
    margin-left:10%;
    margin-top:10%;
	display: block;
    text-align: center;
    padding-bottom: 20px;
    padding-top: 20px;
    background-color: #ff4b78b7;

}

.button_senmon_school a{
    font-size: 40px;
    color :white;
    text-decoration: none;
}



/*           mypage_info 学校インフォメーション             */


.mypage_info_all{
    display: flex;
    flex-flow: column;
}
.mypage_info_all a{
    text-decoration: none;
}

/* 右のプロフィールのユーザー名の配置割合 */
.mypage_info_tab{
    display: flex;
    justify-content:space-around;
    margin-top: 10%;
    margin-bottom: 5%;
}

.button_info_school {
    width: 30%;
    text-align: center;
    border: 10px solid #10d3e0f3;
    border-radius: 40px;
    background-color: white;
    padding-bottom: 20px;
    padding-top: 20px;
    padding-left: 5%;
    padding-right: 5%;
    color:black;
    text-decoration: none;
}

.button_info_school_active {
    width: 30%;
    text-align: center;
    border: 10px solid white;
    border-radius: 40px;
    background-color: #10d3e0f3;
    padding-bottom: 20px;
    padding-top: 20px;
    padding-left: 5%;
    padding-right: 5%;
    color:white;
    text-decoration: none;
}


/* 右のプロフィールのステータス配置割合 */
.mypage_info_status{
    flex: 70%
}

/* 右のプロフィールのステータス配置 */
.mypage_info_status{
    display: flex;
    justify-content:space-between;
    color: black;
    background-color: rgb(253, 253, 253);
    font-size: 30px;
    padding-top:5%;
    padding-bottom:5%;
    margin-top:1%;
    margin-bottom:1%;
}



/* 右のプロフィールのステータス配置割合 */
.mypage_info_pic{
    flex: 45%;
    vertical-align: middle;
    width: 100%;
    height: auto;
    text-align: center;
}

.mypage_info_pic .school_img {
    border:1px solid #DDD;
    width: 90%;
    height:100%;
    margin-left:4%;
}

.mypage_info_discrip{
    flex: 55%;
}

.mypage_info_discrip{
    display: flex;
	flex-direction: column;
}

.mypage_info_discrip .upper{
    flex: 30%;
}

.mypage_info_discrip hr{
    background-color:black;
    margin-right:4%;
}


.mypage_info_discrip .bottom{
    flex: 70%;
}

.mypage_info_discrip .bottom{
    display: flex;
    justify-content:space-between;
}

.mypage_info_text{
    flex:50%
}
.mypage_info_value{
    flex: 50%
}

/* 右のプロフィールのステータスの値を右寄せ */
.mypage_info_value{
    text-align: right;
    padding-right:5%;
}

.info_school_name{
    font-size: 40px;
}



/*           mypage_rank ランキング            */


.tab_item4{
    width: 80%;
    margin-left:10%;
    margin-top:10%;
}

.rank_status{
    display: flex;
    justify-content:space-between;
    line-height: 300%;
}

.rank_text{
    flex: 65%
}
.rank_text p{
    font-size: 40px;
    text-align:left;
    padding-left:5%;
}

.rank_category{
    font-size: 30px;
    color:white;
    background-color: rgb(82, 80, 80) ;
    text-align: center;
}


.rank_value{
    flex: 15%
}
.rank_value p{
    font-size: 40px;
    text-align:center;
}

.rank_go{
    flex: 20%
}
.rank_go p{
    font-size: 40px;
    text-align: center;

}
.rank_go a{
    font-size: 40px;
    text-align: center;
    text-decoration: none;
    color:#007404;

}
.rank_go_p{
    color: transparent;;
}


/*           mypage_rank ランキング 詳細ページ ６ページ共通          */

.mypage_rank_tab_list{
    margin-top: 5%;
    margin-bottom: 3%;
    font-size: 40px;
}

.mypage_rank_tab_list p{
    border-bottom: 1px solid white;
    margin-bottom: 2%;
    color:white;
    font-size: 50px;
}



.mypage_rank_tab{
    display: flex;
    justify-content:space-around;
    margin-bottom: 4%;

}


.button_rank {
    width: 18%;
    text-align: center;
    border: 10px solid #10d3e0f3;
    border-radius: 40px;
    background-color: white;
    padding-bottom: 10px;
    padding-top: 10px;
    padding-left: 2%;
    padding-right: 2%;
    color:black;
    text-decoration: none;
}

.button_rank_active {
    width: 18%;
    text-align: center;
    border: 10px solid white;
    border-radius: 40px;
    background-color: #10d3e0f3;
    padding-bottom: 10px;
    padding-top: 10px;
    padding-left: 2%;
    padding-right: 2%;
    color:white;
    text-decoration: none;
}

.mypage_rank{
    display: flex;
    justify-content:space-between;
    color: white;
    font-size: 30px;
    margin-top:1%;
    margin-bottom:1%;
    text-align: center;
}

.rank_title{
    font-size: 40px;
    color:black;
    background-color: white ;
}

.mypage_rank_id{
    flex: 1%;
}
.mypage_rank_rank{
    flex:9%;
}
.mypage_rank_name{
    flex: 30%;
}
.mypage_rank_score{
    flex: 10%;
}
.mypage_rank_nation{
    flex:15%;
}
.mypage_rank_school{
    flex: 35%;
}

.mypage_info_value{
    text-align: right;
    padding-right:5%;
}


/* -------------- finish_test -------------------------*/


.finish_wrapper {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 50px;
	line-height: 1.5;
    background: linear-gradient(to bottom, #00BF06 0%, #007404 100%);
}


.finish_top {
	flex: 45%;
    width: 100%;
}


.finish_top h5{
    color:white;
    padding-top:1%;
    text-align: center;
}


.finish_border {
    height: 39%;
    width: 90%;
    position: absolute;
    left:5%;
    top: 54%;
    border: 5px solid white;
    border-radius: 15px;
}

.finish_header {
    height: 6%;
    width: 80%;
    position: absolute;
    left:10%;
    top: 51%;
    border: 5px solid white;
    background-color: white;
    border-radius: 25px;
}

.finish_header p{
    padding-top:15px;
    text-align: center;
    color: rgb(70, 69, 69);
    font-size: 40px;
}

.finish_bottom {
	flex: 55%;
    position: relative;
}

.finish_bottom_inside{
    display: flex;
    justify-content: space-between;
    padding-top:17%;
}

.finish_bottom_inside h5{
    position:  absolute;
    width: 60%;
    top: 25%;
    left: 30%;
    color: white;
    border-bottom: 5px solid white;
    font-size: 40px;
    padding-bottom: 1%;
}

.finish_bottom_inside p{
    position:  absolute;
    width: 65%;
    top: 51%;
    left: 27%;
    color: white;
    font-size: 40px;
    border-top: 5px solid white;
    padding-top: 2%;
}

.inside_center_title{
    position:  absolute;
    top: 30%;
    left: 23%;
    width: 37%;
}

.inside_center_title .correct_rate{
    margin-top:23%;
}
.inside_center_title .moneyget{
    margin-top:26%;
}

.inside_center_value{
    position:absolute;
    top:  24%;
    right: 17%;

}

.inside_center_title{
    display: flex;
	flex-direction: column;
}

.inside_center_value{
    display: flex;
	flex-direction: column;
}
.inside_center_value .big{
    font-size:120px;
    margin-right:20px;
    margin-left:20px;
}

.correct_test h5{
    color:snow;
    font-size: 40px;
    text-align: center;
    margin-top: 20%;
    margin-bottom: 5%;
}

.correct_test p{
    font-size: 50px;
    color:yellow;
    margin-top: 10%;
}


.correct_rate h5{
    color:snow;
    font-size: 40px;
    text-align: center;
}

.correct_rate p{
    font-size: 50px;
    color:yellow;
}


.moneyget h5{
    color:snow;
    font-size: 40px;
    text-align: center;
}

.moneyget p{
    font-size: 50px;
    color:yellow;
    text-align: center;
}

.btn_go_top,.btn_register{
    position: absolute;
    width: 50%;
    bottom:  5%;
    right: 7%;
    border-radius: 40px;
	-webkit-box-shadow: 0px 10px 10px rgba(0,0,0,0.2);
    box-shadow: 0px 10px 10px rgba(109, 110, 108, 0.2);
	z-index: 2;
    background-color:#4B89FF;
    text-align: center;
    padding-top:2%;
    padding-bottom:2%;
}
.btn_go_top a,.btn_register p{
    text-decoration: none;
    color:white;
}

.button_studyback a{
    color:yellow;
    font-size: 50px;
    text-decoration: none;
}




/* ----------------- 自宅 ----------------------------- */

/* 勉強するボタン */

.button_study{
	display: block;
    padding-right: 3vw;
    padding-left: 3vw;
    padding-bottom: 2vw;
    border-radius: 5em;
    background-color: #FFFFFF;
    position: absolute;
    top: 17%;
    left: 47%;
  
}

.button_study a{
    font-size: 30px;
    color: #000000;
	text-align: center;
    text-decoration: none;
}



/* --------------  本棚 book_shelf ---------------*/

.bookshelf{
    flex-direction: row;
    margin-top:8%;
}

.book{
    flex: 1;
   display: flex;
}

.book img{
    width: 100%;
    height: 100%;
    background-position: center;
    vertical-align: top;
    overflow:hidden;
}


.book a{
    width: 100%;
    text-decoration: none;
    color:#000000;
}

.book div{
    position:relative;
}

.book div h5{
    font-size:55px;
}
.book div p{
    font-size:45px;
}


.book .seiseki h5{
    position:absolute;
    top:34%;
    left:32%;
}



.book .seiseki p{
    position:absolute;
    top:50%;
    left:39%;
}

.book .hiragana h5{
    position:absolute;
    top:34%;
    left:25%;
}

.book .hiragana h4{
    position:absolute;
    bottom:22%;
    left:38%;
    color:white;
    border: solid 5px white;
    padding-right: 3%;
    padding-left: 3%;
    padding-bottom: 2%;
    border-radius: 50%;
}

.book .hiragana p{
    position:absolute;
    top:50%;
    left:30%;
}

.book .katakana h5{
    position:absolute;
    top:34%;
    left:32%;
}

.book .katakana h4{
    position:absolute;
    bottom:22%;
    left:47%;
    color:white;
    border: solid 5px white;
    padding-right: 3%;
    padding-left: 3%;
    padding-bottom: 2%;
    border-radius: 50%;
}


.book .katakana p{
    position:absolute;
    top:50%;
    left:35%;
}

.book .suuji h5{
    position:absolute;
    top:34%;
    left:32%;
}

.book .suuji h4{
    position:absolute;
    bottom:22%;
    left:39%;
    color:white;
    border: solid 5px white;
    padding-right: 3%;
    padding-left: 3%;
    padding-bottom: 2%;
    border-radius: 50%;
}


.book .suuji p{
    position:absolute;
    top:50%;
    left:31%;
}

.book .kanji h5{
    position:absolute;
    top:34%;
    left:38%;
}

.book .kanji h4{
    position:absolute;
    bottom:22%;
    left:47%;
    color:white;
    border: solid 5px white;
    padding-right: 3%;
    padding-left: 3%;
    padding-bottom: 2%;
    border-radius: 50%;
}


.book .kanji p{
    position:absolute;
    top:50%;
    left:45%;
}

.book .kotoba h5{
    position:absolute;
    top:34%;
    left:32%;
}

.book .kotoba h4{
    position:absolute;
    bottom:22%;
    left:38%;
    color:white;
    border: solid 5px white;
    padding-right: 3%;
    padding-left: 3%;
    padding-bottom: 2%;
    border-radius: 50%;
}

.book .kotoba p{
    position:absolute;
    top:50%;
    left:39%;
}

.book .bunpou h5{
    position:absolute;
    top:35%;
    left:32%;
    font-size:45px;
}


.book .bunpou h4{
    position:absolute;
    bottom:22%;
    left:46%;
    color:white;
    border: solid 5px white;
    padding-right: 3%;
    padding-left: 3%;
    padding-bottom: 2%;
    border-radius: 50%;
}


.book .bunpou p{
    position:absolute;
    top:50%;
    left:35%;
}


.book .bunpou h5{
    position:absolute;
    top:35%;
    left:36%;
    font-size:45px;
}


.book .chokai h4{
    position:absolute;
    bottom:22%;
    left:40%;
    color:white;
    border: solid 5px white;
    padding-right: 3%;
    padding-left: 3%;
    padding-bottom: 2%;
    border-radius: 50%;
}


.book .chokai p{
    position:absolute;
    top:50%;
    left:33%;
}


.book .chokai h5{
    position:absolute;
    top:35%;
    left:25%;
    font-size:45px;
}


.book .verb2 h5{
    position:absolute;
    top:35%;
    left:29%;
    font-size:50px;
}

.book .verb2 h4{
    position:absolute;
    bottom:22%;
    left:37%;
    color:white;
    border: solid 5px white;
    padding-right: 3%;
    padding-left: 3%;
    padding-bottom: 2%;
    border-radius: 50%;
}

.book .verb2 p{
    position:absolute;
    top:50%;
    left:29%;
}

.book .verb1 h5{
    position:absolute;
    top:34%;
    left:28%;
}

.book .verb1 h4{
    position:absolute;
    bottom:22%;
    left:47%;
    color:white;
    border: solid 5px white;
    padding-right: 3%;
    padding-left: 3%;
    padding-bottom: 2%;
    border-radius: 50%;
}

.book .verb1 p{
    position:absolute;
    top:50%;
    left:36%;
}


.book .minna h5{
    position:absolute;
    top:34%;
    left:31%;
}

.book .minna h4{
    position:absolute;
    bottom:22%;
    left:40%;
    color:white;
    border: solid 5px white;
    padding-right: 3%;
    padding-left: 3%;
    padding-bottom: 2%;
    border-radius: 50%;
}

.book .minna p{
    position:absolute;
    top:50%;
    left:36%;
}



.book .dokkai h5{
    position:absolute;
    top:35%;
    left:32%;
    font-size:45px;
}


.book .dokkai h4{
    position:absolute;
    bottom:22%;
    left:43%;
    color:white;
    border: solid 5px white;
    padding-right: 3%;
    padding-left: 3%;
    padding-bottom: 2%;
    border-radius: 50%;
}


.book .dokkai p{
    position:absolute;
    top:50%;
    left:40%;
}


.book .dokkai h5{
    position:absolute;
    top:35%;
    left:32%;
    font-size:45px;
}



.book .chokai_n5 h4{
    position:absolute;
    bottom:22%;
    left:40%;
    color:white;
    border: solid 5px white;
    padding-right: 3%;
    padding-left: 3%;
    padding-bottom: 2%;
    border-radius: 50%;
}


.book .chokai_n5 p{
    position:absolute;
    top:50%;
    left:40%;
}


.book .chokai_n5 h5{
    position:absolute;
    top:35%;
    left: 32%;
    font-size:45px;
}


.book .adj h5{
    position:absolute;
    top:34%;
    left:28%;
}

.book .adj h4{
    position:absolute;
    bottom:22%;
    left:47%;
    color:white;
    border: solid 5px white;
    padding-right: 3%;
    padding-left: 3%;
    padding-bottom: 2%;
    border-radius: 50%;
}

.book .adj p{
    position:absolute;
    top:50%;
    left:36%;
}

/*--------------   本の目次 book_index --------------*/

.bookindex{
    width: 100%;
    height: 100vh;
    background-image: url("img/bg_bookindex.webp");
    background-repeat: no-repeat;
    background-position: 0% 46%;
    background-size: cover;
    position: relative;
}

.index_title{
    position: absolute;
    top:12%;
    left:16%;
}

.index_title_minna{
    position: absolute;
    top:13%;
    left:16%;
}

.index_title h1{
    font-size: 180%;
}
.index_title_minna{
    font-size: 100%;
}


.index_list{
    width:15%;
    height:0%;
    position: absolute;
    top:16%;
    right: 22%;
    border-radius: 80px;
}
.index_list a{
    background-color: #379e3a;
    color:white;
    padding:10% 40%;
    text-decoration: none;
    border-bottom: solid 20px rgb(87, 86, 86);
    border-right: solid 10px darkgray;
    border-radius: 20px;
}

/* slickタグ全体 */
.carousel{
    position: absolute;
    top: 10%;
    margin-right:5%;
    margin-left:5%;
    margin-top:8%;
}

.carousel_seiseki{
    position: absolute;
    top: 15%;
    margin-right:5%;
    margin-left:5%;
    margin-top:8%;

}

.carousel_kotoba{
    position: absolute;
    top:15%;
}


/* slick内の要素eleタグ */
.carousel .ele{
    width: 100%;
    height: 70vh;
    color:rgb(7, 7, 7);
    text-align: center;
    position: relative;
}

.carousel_seiseki .ele{
    width: 100%;
    height: 70vh;
    color:rgb(7, 7, 7);
    text-align: center;
    position: relative;
    line-height: 70px;

}

.carousel_kotoba .ele{
    width: 100%;
    height: 70vh;
    color:rgb(7, 7, 7);
    text-align: center;
    position: relative;
}


/* Book Index flickityの前・次ボタンを無理やり大きくする */
.bookindex .flickity-prev-next-button {
    width: 84px !important;
    height: 84px !important;
}

.ele ul{
    margin-top:17%;
}

.carousel_seiseki .ele ul{
    margin-top:17%;
}

.carousel_kotoba .ele ul{
    margin-top:20%;
}


.ele .hiragana_list{
    width: 60%;
    margin-top: 15%;
    margin-left:21%;
}
.ele .hiragana_list img{
    width: 90%;
    border: 3px solid #17a2b8;
}
.ele .hiragana_list p{
    font-size: 60px;
    color: #17a2b8;
}

.ele .katakana_list{
    width: 60%;
    margin-top: 15%;
    margin-left:21%;
}
.ele .katakana_list img{
    width: 90%;
    border: 3px solid #17a2b8;
}
.ele .katakana_list p{
    font-size: 60px;
    color: #17a2b8;
}

.ele .text_left{
    margin-left:7%;
}

.ele .text_right{
    margin-right:5%;
}

.ele .text_minna{
    margin-left:10%;
    margin-right:10%;
}

/* 左テキストの装飾 */
.ele .text_left li{
	display: block;
    padding-top: 2vw;
    padding-right: 3vw;
    padding-left: 3vw;
    padding-bottom: 2vw;
    border-radius: 5em;
    background-color: #FFFFFF;
    border: 1px solid #000000;
    margin-bottom:15%;
    text-align: center;
}


.ele .text_minna li{
	display: block;
    padding-top: 2vw;
    padding-right: 1vw;
    padding-left: 2vw;
    padding-bottom: 2vw;
    border-radius: 5em;
    background-color: #FFFFFF;
    border: 1px solid #000000;
    margin-bottom:5%;
    text-align: center;
}

.ele .text_minna .fukushu {
	display: block;
    padding-top: 2vw;
    padding-right: 2vw;
    padding-left: 2vw;
    padding-bottom: 2vw;
    border-radius: 5em;
    background-color: #f8e9a7;
    border: 1px solid #000000;
    margin-top:8%;
    text-align: center;
}

.okurigana{
    font-size: 40px;
}

.ele a{
    font-size: 50px;
    color:black;
    text-decoration: none;
}


.ele p{
    font-size: 40px;
    color:black;
    text-decoration: none;
}

.ele .alphabet1{
    position: absolute;
    font-size: 60px;
    color:rgb(58, 171, 210);
    bottom:17%;
    left:10%;
}

.alphabet1 li{
    margin-bottom:70px;
    transform: rotate(-8deg);
}



.ele .alphabet2{
    position: absolute;
    font-size: 60px;
    color:rgb(58, 171, 210);
    bottom:17%;
    left:53%;
}

.alphabet2 li{
    margin-bottom:70px;
    transform: rotate(-8deg);
}


.ele .alphabet3{
    position: absolute;
    font-size: 50px;
    color:rgb(58, 171, 210);
    bottom:25%;
    left:8%;
}

.alphabet3 li{
    margin-bottom:70px;
    transform: rotate(-8deg);
}


.ele .alphabet4{
    position: absolute;
    font-size: 50px;
    color:rgb(58, 171, 210);
    bottom:12%;
    left:49%;
}

.alphabet4 li{
    margin-bottom:70px;
    transform: rotate(-8deg);
}


.ele .pass{
    position: absolute;
    width: 100%;
    font-size: 40px;
    top:12%;
    left:0%;
    z-index:2;
    display:flex;
    justify-content:space-between;
}


.ele .pass .left{
    flex:1;
}
.ele .pass .right{
    flex:1;
}

.ele .pass .left p{
    width: 40%;
    background-color: red;
    margin-left: 60%;
    transform: skew(10deg, -10deg);
    color:white;
}
.ele .pass .right p{
    width: 40%;
    background-color: red;
    margin-left: 48%;
    transform: skew(10deg, -10deg);
    color:white;
}


.ele .pass .left .h_72{
    margin-top: 10%;

}
.ele .pass .left .h_73{
    margin-top: 10%;
    background-color: green;
}
.ele .pass .left .h_74{
    margin-top: 10%;

}
.ele .pass .left .h_75{
    margin-top: 10%;
    background-color: blue;
}

.ele .pass .h_77{
    margin-top: 10%;
}
.ele .pass .h_78{
    margin-top: 10%;
}
.ele .pass .h_79{
    margin-top: 10%;
}
.ele .pass .h_80{
    margin-top: 10%;
}


.ele .pass2{
    position: absolute;
    width: 100%;
    font-size: 40px;
    top:12%;
    left:0%;
    z-index:2;
}

.ele .pass2 .left p{
    width: 20%;
    background-color: red;
    margin-left: 30%;
    transform: skew(10deg, -10deg);
    color:white;
}

.ele .pass2 .h_82{
    margin-top: 4%;
}
.ele .pass2 .h_83{
    margin-top: 4%;
}
.ele .pass2 .h_84{
    margin-top: 5%;
}
.ele .pass2 .h_85{
    margin-top: 5%;
}
/* 右テキストの装飾 */
.ele .text_right li{
	display: block;
    padding-top: 2vw;
    padding-right: 3vw;
    padding-left: 3vw;
    padding-bottom: 2vw;
    border-radius: 5em;
    background-color: #FFFFFF;
    border: 1px solid #000000;
    margin-bottom:15%;
    text-align: center;
}

.ele .text_right a{
    color:rgb(0, 0, 0);
    text-decoration: none;

}


/* slick内の要素 */
.ele .text_right{
    top:1%;
    right:5%;
    position: absolute;
}

.ele .text_left{
    position: absolute;
    top:1%;
    left: 5%;
}


/*slickの矢印*/

/* .slide-arrow {
    bottom: 0;
    margin: auto;
    position: absolute;
    top: 50%;
    width: 50%;
    height: 50vh;
  }
  .prev-arrow {
    left: 50px;
  }
  .next-arrow {
    right: 50px;
  } */



/* ----------------- ひらがなリスト ----------------------------- */

.list_table{
    margin-top:20%;
    margin-left:10%;
    width: 90%;


}



.row {
    list-style: none;
    display: flex;
    margin-bottom:1%;

  }


.row li {
  width: 120px;
  text-align: center;
  border:6px solid #17a2b8;
  padding-top:20px;
  padding-bottom:20px;
  height: 50px;
  line-height: 50px;
  margin-right: 20px;
}

.row li a {
    text-decoration: none;
    color: #17a2b8;
    padding: 20px;
  }

/* アルファベット読み */
.row_yomi {
    list-style: none;
    display: flex;
    margin-bottom:5%;

}

.row_yomi li {
    width: 150px;
    text-align: center;
    margin-right: 2px;
  }
  
  .row_yomi li p {
      color: #919d9e;
      font-size:40px;
      padding: 20px;
    }


/* きゃきゅきょ系 */
.row2 {
    list-style: none;
    display: flex;
    margin-bottom:1%;

  }

.row2 li {
    width: 150px;
    text-align: center;
    border:6px solid #17a2b8;
    padding-top:20px;
    padding-bottom:20px;
    height: 50px;
    line-height: 50px;
    margin-right: 20px;
  }


.row2 li a {
  text-decoration: none;
  color: #17a2b8;
  padding: 20px;
}


/* きゃきゅきょ系アルファベット読み */
.row2_yomi {
    list-style: none;
    display: flex;
    margin-bottom:5%;

}

.row2_yomi li {
    width: 180px;
    text-align: center;
    margin-right: 2px;
  }
  
  .row2_yomi li p {
      color: #919d9e;
      font-size:40px;
      padding: 20px;
    }



/* ----------------- ひらがなテスト ----------------------------- */

.test_header {
    height: 8%;
    width: 100%;
    position: absolute;
    top: 0px;
    display: flex;
    background-color: #FFFFFF;
    line-height: 8vh;
    padding-left:2%;
	z-index: 2;
    display:flex;
    justify-content:space-between;
}

.header_title{
    flex:50%;
    font-size: 45px;
    margin-left:-3%;
}
.correct_record{
    flex:50%;
    color:#F08080;
	z-index: 2;
    text-align: right;
}


.correct_record p{
    font-size: 75px;
}

.correct_record span{
    font-size: 40px;
    color:rgb(86, 87, 88);
}

.correct_record{
    display:flex;
    justify-content:space-around;
}

.correct_record p .test{
    font-size: 20px;
    color:rgb(86, 87, 88);
}


.test_header .subject_icon{
    padding-right:3%;
    padding-left:3%;
    margin-left: 3%;
    margin-top: 1%;
    margin-right:3%;
    color:white;
    width:30%;
    height: 7vh;
    text-align: center;
    font-size: 65px;
    border-radius: 50%;
}

.sound a{
    position: absolute;
    background-color: #17a2b8;
    border-radius: 20px;
    top:52%;
    right:27%;
    padding-left:6%;
    padding-right:6%;
    padding-top:3%;
    padding-bottom:3%;
}

.sound p{
    color:#FFFFFF;
}

.sound_pic a{
    position: absolute;
    background-color: #17a2b8;
    border-radius: 20px;
    bottom:0%;
    right:-15%;
    padding-left:6%;
    padding-right:6%;
    padding-top:2%;
    padding-bottom:2%;
}

.sound_pic p{
    color:#FFFFFF;
}


.dialogue_chokai_listen{
    position: relative;
}


.sound_chokai a{
    position: absolute;
    background-color: #17a2b8;
    border-radius: 20px;
    top:2%;
    left:18%;
    padding-left:15%;
    padding-right:15%;
    padding-top:3%;
    padding-bottom:3%;
}

.sound_chokai p{
    color:#FFFFFF;
}

.sound_chokai_listen a{
    position: absolute;
    background-color: #17a2b8;
    border-radius: 20px;
    bottom:3%;
    left:18%;
    padding-left:15%;
    padding-right:15%;
    padding-top:3%;
    padding-bottom:3%;
}

.sound_chokai_listen p{
    color:#FFFFFF;
}

.sound_chokai_listen_a a{
    position: absolute;
    background-color: #17a2b8;
    border-radius: 20px;
    top:14%;
    left:18%;
    padding-left:15%;
    padding-right:15%;
    padding-top:3%;
    padding-bottom:3%;
}

.sound_chokai_listen_a p{
    color:#FFFFFF;
}

.sound_chokai_listen_1 a{
    position: absolute;
    background-color: #fae465;
    border: 10px solid #f7fa65;
    border-radius: 20px;
    top:37%;
    left:13%;
    padding-left:23%;
    padding-right:23%;
    padding-top:3%;
    padding-bottom:3%;
    margin-bottom:5px;
}

.sound_chokai_listen_1 p{
    color:#000000;
}

.sound_chokai_listen_1b a{
    position: absolute;
    background-color: #fae465;
    border: 10px solid #f7fa65;
    border-radius: 20px;
    top:24%;
    left:13%;
    padding-left:23%;
    padding-right:23%;
    padding-top:3%;
    padding-bottom:3%;
}

.sound_chokai_listen_1b p{
    color:#000000;
}

.sound_chokai_listen_1a a{
    position: absolute;
    background-color: #17a2b8;
    border-radius: 20px;
    left:18%;
    padding-left:15%;
    padding-right:15%;
    padding-top:3%;
    padding-bottom:3%;
}

.sound_chokai_listen_1a p{
    color:#FFFFFF;
}

.sound_suuji a{
    position: absolute;
    background-color: #17a2b8;
    border-radius: 20px;
    top:40%;
    right:40%;
    padding-left:6%;
    padding-right:6%;
    padding-top:3%;
    padding-bottom:3%;
}
.sound_suuji p{
    color:#FFFFFF;
}

.mondai_text{
    font-size: 40px;
    margin-left:5%;
}


.dialogue_hiragana h5{
    margin-bottom:10%;
    color: #FFFFFF;
}

.common_top .dialogue_left .hiragana_renshu {
	display: block;
	padding-top: 3vw;
    padding-right: 3vw;
    padding-left: 3vw;
    padding-bottom: 3vw;
    border-radius: 12px;
    background-color: #FFFFFF;
    margin-bottom: 5vw;
    font-size: 220px;
    text-align: center;
}


.common_top .hiragana_list {
	display: block;
	padding-top: 3vw;
    padding-bottom: 1vw;
    padding-right: 3vw;
    padding-left: 8vw;
    border-radius: 12px;
    background-color: #FFFFFF;
    margin-bottom: 5vw;
    line-height: 0.1;
}




/* ----------------- 学校 ----------------------------- */

.common_top .dialogue {
margin-top:0%;
position: relative;
}

.common_top .dialogue_2 {
margin-top:0%;
position: relative;
}

.common_top .dialogue_left {
    background-repeat: no-repeat;
    background-size: 15%;
    
}
.common_top .dialogue_left p {
	display: block;
	padding-top: 3vw;
    padding-right: 3vw;
    padding-left: 3vw;
    padding-bottom: 3vw;
    border-radius: 12px;
    background-color: #ffffd3;
    margin-bottom: 5vw;
	margin-left: 15%;

}


.common_top .dialogue_left_2 {
    background-repeat: no-repeat;
    background-size: 15%;
    
}
.common_top .dialogue_left_2 p {
	display: block;
	padding-top: 3vw;
    padding-right: 3vw;
    padding-left: 3vw;
    padding-bottom: 3vw;
    border-radius: 12px;
    background-color: #ffffff;
    margin-bottom: 5vw;
	margin-left: 15%;

}

.common_top .dialogue_right {
    background-repeat: no-repeat;
    background-size: 15%;
    background-position: right;
}
.common_top .dialogue_right p {
	display: block;
	padding-top: 3vw;
    padding-right: 3vw;
    padding-left: 3vw;
    padding-bottom: 3vw;
    border-radius: 12px;
    background-color: #ffffd3;
    margin-bottom: 5vw;
	margin-right: 15%;
    text-align: left;
}

.common_top .dialogue_right_pic {
    background-repeat: no-repeat;
    background-size: 15%;
    background-position: right;
}
.common_top .dialogue_right_pic p {
	display: block;
	padding-top: 3vw;
    padding-right: 3vw;
    padding-left: 3vw;
    padding-bottom: 3vw;
    border-radius: 12px;
    background-color: #ffffd3;
    margin-bottom: 4vw;
	margin-right: 15%;
}

.common_top .dialogue_right_2 {
    background-repeat: no-repeat;
    background-size: 15%;
    background-position: right;
}
.common_top .dialogue_right_2 p {
	display: block;
	padding-top: 3vw;
    padding-right: 3vw;
    padding-left: 3vw;
    padding-bottom: 3vw;
    border-radius: 12px;
    background-color: #ffffd3;
    margin-bottom: 5vw;
	margin-right: 15%;
}

/* ----------------- 聴解 ----------------------------- */

.dialogue_chokai_pic .dialogue_right {
    background-repeat: no-repeat;
    background-size: 15%;
    background-position: right;
}
.dialogue_chokai_pic .dialogue_right p {
	display: block;
	padding-top: 8vw;
    padding-right: 2vw;
    padding-left: 3vw;
    padding-bottom: 8vw;
    margin-bottom: 2vw;
	margin-right: 15%;
    margin-left: 10%;
}


.dialogue_chokai_listen .dialogue_right {
    background-repeat: no-repeat;
    background-size: 15%;
    background-position: right;
}
.dialogue_chokai_listen .dialogue_right p {
	display: block;
	padding-top: 8vw;
    padding-right: 3vw;
    padding-left: 3vw;
    padding-bottom: 8vw;
    margin-bottom: 2vw;
	margin-right: 15%;
    margin-left: 10%;
}

.dialogue_chokai_listen_1 .dialogue_right {
    background-repeat: no-repeat;
    background-size: 15%;
    background-position: right;
}
.dialogue_chokai_listen_1 .dialogue_right p {
	display: block;
	padding-top: 9vw;
    padding-right: 3vw;
    padding-left: 3vw;
    padding-bottom: 8vw;
    margin-top: 25vw;
    margin-bottom: 2vw;
	margin-right: 15%;
    margin-left: 10%;
}

.dialogue_chokai_listen_1b .dialogue_right p {
	display: block;
	padding-top: 9vw;
    padding-right: 3vw;
    padding-left: 3vw;
    padding-bottom: 8vw;
    margin-top: 10vw;
    margin-bottom: 2vw;
	margin-right: 15%;
    margin-left: 10%;
}

.dialogue h5{
    margin-top:2%;
    margin-bottom:2%;
    color: #FFFFFF;
    font-size: 40px;
}

.dialogue .n5_minna{
    font-size: 44px;
}

.dialogue h6{
    font-size: 30px;
    margin-bottom:2%;
    color: #FFFFFF;
}


.common_top .button_test_home {
	display: block;
	padding-top: 5vw;
    padding-right: 4vw;
    padding-left: 4vw;
    padding-bottom: 5vw;
    margin-top: 10vw;
    margin-bottom: 8vw;
    margin-right: 18vw;
    margin-left: 18vw;
    text-align: center;
    text-decoration: none;
    background: white;/*ボタン色*/
    color: green;
    border-bottom: solid 30px gray;
    border-right: solid 20px darkgray;
    border-radius: 80px;
}

.common_top .button_test_home p {
    font-size: 60px;
}

.common_top .button_test {
	display: block;
	padding-top: 6vw;
    padding-right: 3vw;
    padding-left: 3vw;
    padding-bottom: 6vw;
    margin-top: 10vw;
    margin-bottom: 5vw;
    margin-right: 20vw;
    margin-left: 20vw;
    text-align: center;
    text-decoration: none;
    background: #4B89FF;/*ボタン色*/
    color: white;
    border-bottom: solid 30px gray;
    border-right: solid 20px darkgray;
    border-radius: 80px;
}

.common_top .button_test p {
    font-size: 80px;
}

.common_top .mission_ready {
    display: block;
	padding-top: 3vw;
    padding-right: 1.5vw;
    padding-left: 1.5vw;
    padding-bottom: 3vw;
    margin-top: 7vw;
    margin-bottom: 7vw;
    margin-right: 10vw;
    margin-left: 10vw;
    text-align: center;
    text-decoration: none;
    background: yellow;/*ボタン色*/
    color:#4B89FF;
    border-bottom: solid 30px rgb(185, 185, 3);
    border-right: solid 20px rgb(223, 223, 2);
    border-radius: 80px;
}

.common_top .mission_ready p {
    font-size: 60px;
}

.common_top .button_mission {
    display: block;
	padding-top: 3vw;
    padding-right: 3vw;
    padding-left: 3vw;
    padding-bottom: 3vw;
    margin-top: 5vw;
    margin-bottom: 2vw;
    margin-right: 10vw;
    margin-left: 10vw;
    text-align: center;
    text-decoration: none;
    background: yellow;/*ボタン色*/
    color:#3b78e7;
    border-bottom: solid 30px rgb(185, 185, 3);
    border-right: solid 20px rgb(223, 223, 2);
    border-radius: 80px;
}

.common_top .button_mission p {
    font-size: 70px;
    font-weight:bold;
}


/* ひらがなマスターテスト*/
.mission_contents{
    z-index: 1;
    position:absolute;
    background-color: rgb(255, 253, 253);
    top: 13%;
    left: 5%;
    padding-top:10%;
    padding-bottom:5%;
    width:85%;
    border:20px solid rgb(249, 253, 20);
    border-radius: 40px;
}

.mission_contents h5{
   margin-bottom:3%;
   text-align: center;
   font-size: 70px;
}





 .mission_contents table,th,td{
    margin:1%;
    border: none;
}

.mission_contents table tr{
    height: 30px;
}

.mission_contents .table_left{
    text-align:right;

}

.mission_contents .table_right{
    text-align:left;

}

.mission_close{
    position:absolute;
    border-radius: 4px;
    width: 10%;
    height: 20px;
    padding:3%;
    margin-right:2%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #333;
    color: #fff;
    top: 2%;
    right: 2%;
  }


.common_top .button_next {
    display: block;
	padding-top: 6vw;
    padding-right: 3vw;
    padding-left: 3vw;
    padding-bottom: 6vw;
    margin-top: 10vw;
    margin-bottom: 5vw;
    margin-right: 20vw;
    margin-left: 20vw;
    text-align: center;
    text-decoration: none;
    background: orange;/*ボタン色*/
    color:white;
    border-bottom: solid 30px gray;
    border-right: solid 20px darkgray;
    border-radius: 80px;
}

.common_top .button_next p {
    font-size: 80px;
}

/* ------------ 問題ページ -------------------------- */

/* 四択ボタン部分 */
.question_options {
	height: 100%;
    display: flex;
	flex-direction: column;
	overflow: hidden;
}
.question_options li {
	flex: 1;
    list-style: none;
    text-align: left;
    padding-top: 3vw;
    padding-left: 3%;
	line-height: 5;
    background-color: #FFFFFF;
    border-bottom: 1px solid #07070785;
}

.question_options_dokkai {
	height: 100%;
    display: flex;
	flex-direction: column;
	overflow: hidden;
}
.question_options_dokkai li {
	flex: 1;
    list-style: none;
    text-align: left;
    padding-top: 3vw;
    padding-left: 3%;
	line-height: 1;
    background-color: #FFFFFF;
    border-bottom: 1px solid #07070785;
}

/* 4択部分のアニメーション */
.btn_animation_01 {
    animation: slidein_from_bottom 0.8s ease-in-out 0s forwards;
}
.btn_animation_02 {
    animation: slidein_from_bottom 1s ease-in-out 0s forwards;
}
.btn_animation_03 {
    animation: slidein_from_bottom 1.2s ease-in-out 0s forwards;
}
.btn_animation_04 {
    animation: slidein_from_bottom 1.4s ease-in-out 0s forwards;
}
@keyframes slidein_from_bottom {
	0% {transform: translateY(40vh);}
	0% {opacity: 0}

	100% {transform: translateY(0vh);}
	100% {opacity: 100}
}


input[type=radio] {
    display: none; 
}

/*
===========================================
2021.04.28三島さん
*/

.question_options {
    padding:0;
    margin:0;
}
.question_options li {
    
    flex: 1;
    list-style: none;
    text-align: left;
    line-height: 1;
    background-color: #FFFFFF;
    border-bottom: 1px solid #07070785;
    padding-left:2%;
    padding-bottom:2%;
    padding-top:0.9em;
    transition: padding 0.2s linear;
}
.question_options li.btn_go_animation {
  color:#FFF;
  padding-left:13%;
  transition: padding 0.3s linear;
}
.question_options li::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  content: '';
  background: #333;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .2s;
}
.question_options li.btn_go_animation::before {
  transform-origin: left top;
  transform: scale(1, 1);
}


.question_options li::after {
  position: absolute;
  z-index: -1;
  display: inline-block;
  padding-top:0.9em;
  content: '';
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .1s linear .1s;
  transition: all .1s linear .1s;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
}
.question_options li.btn_go_animation::after {
  width: 11%;
  padding-top:0.9em;
  content:'GO';
  text-align: center;
  color:#FFF;
  background-color: #4B89FF;
}

/*=読解の４択フォントサイズを小さくする=*/


.question_options_dokkai {
    padding:0;
    margin:0;
}
.question_options_dokkai li {
    font-size: 40px;
    flex: 1;
    list-style: none;
    text-align: left;
    line-height: 1;
    background-color: #FFFFFF;
    border-bottom: 1px solid #07070785;
    padding-left:2%;
    padding-bottom:2%;
    padding-top:0.9em;
    transition: padding 0.2s linear;
}
.question_options_dokkai li.btn_go_animation {
  color:#FFF;
  padding-left:13%;
  transition: padding 0.3s linear;
}
.question_options_dokkai li::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  content: '';
  background: #333;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .2s;
}
.question_options_dokkai li.btn_go_animation::before {
  transform-origin: left top;
  transform: scale(1, 1);
}


.question_options_dokkai li::after {
  position: absolute;
  z-index: -1;
  display: inline-block;
  padding-top:0.9em;
  content: '';
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .1s linear .1s;
  transition: all .1s linear .1s;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
}
.question_options_dokkai li.btn_go_animation::after {
  width: 11%;
  padding-top:0.9em;
  content:'GO';
  text-align: center;
  color:#FFF;
  background-color: #4B89FF;
}

/*
===========================================
*/


/* 回答後、次の問題ボタン */

@keyframes result_text {
    from{
        font-size: 1em;
        margin-left: 35%;
    }
}

.result_text{
    position:absolute;
    margin-top: 2%;
    margin-left: 18%;
    font-size: 3em;
    text-align:center;
    line-height:0.95em;
    font-weight:bold;
    color: transparent;
    background: repeating-linear-gradient(0deg, #B67B03 0.1em, #DAAF08 0.2em, #FEE9A0 0.3em, #DAAF08 0.4em, #B67B03 0.5em); 
    -webkit-background-clip: text;
    animation: result_text 0.5s;

}




.result_text2{
    position:absolute;
    margin-top: 3%;
    margin-left: 18%;
    font-size: 3em;
    text-align:center;
    line-height:0.95em;
    font-weight:bold;
    color: transparent;
    background: repeating-linear-gradient(0deg, #B67B03 0.1em, #DAAF08 0.2em, #FEE9A0 0.3em, #DAAF08 0.4em, #B67B03 0.5em); 
    -webkit-background-clip: text;
    animation-name: result_text;
    animation-duration: 0.3s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-direction: normal;
}

@keyframes result_text2 {
	0% {font-size: 0em;}
	100% {font-size: 3em;}
}

.next_button{
    z-index: 1;
    position:absolute;
    display: inline-block;
    text-decoration: none;
    color: white;
    background-color: rgb(58, 171, 210);
    width: 300px;
    height: 300px;
    line-height: 300px;
    border-radius: 50%;
    border: solid 2px white;
    text-align: center;
    overflow: hidden;
    font-weight: bold;
    transition: .4s;
    margin-top: 20%;
    margin-left: 35%;
}


.finish_button{
    z-index: 1;
    position:absolute;
    display: inline-block;
    text-decoration: none;
    color: white;
    background-color:red;
    width: 300px;
    height: 300px;
    line-height: 300px;
    border-radius: 50%;
    border: solid 2px white;
    text-align: center;
    overflow: hidden;
    font-weight: bold;
    transition: .4s;
    margin-top: 20%;
    margin-left: 35%;
}


.seikai{
    color:#f10707;
    font-size: 45px;
}

.seikai_before{
    color:#000000;
    font-size: 45px;
}


.seikai2{
    margin-right:10px;
    color:#f10707;
    font-size: 40px;
    border:2px solid #666666; /*下線の太さと色*/
    padding-right: 2%;
    padding-left: 2%;
}

.seikai2_sub{
    margin-right:15px;
    margin-left:15px;
    color:#000000;
    font-size: 40px;
    border:2px solid #666666; /*下線の太さと色*/
    padding-right: 2%;
    padding-left: 2%;

}

.sort_mondai{
    margin-right:10px;
    margin-left:10px;
    color:#000000;
    font-size: 40px;
    border:2px solid #666666; /*下線の太さと色*/
    padding-right: 9%;
    padding-left: 9%;

}


.sort_mondai_sub{
    margin-right:10px;
    margin-left:10px;
    color:#ffffd3;
    font-size: 40px;
    border:2px solid #666666; /*下線の太さと色*/
    padding-right: 9%;
    padding-left: 9%;

}



.furigana{
    font-size: 30px;
}



.common_top .dialogue_left_review{
background-repeat: no-repeat;
background-size: 15%;

}

.common_top .dialogue_right_review {
background-repeat: no-repeat;
background-size: 15%;
background-position: right;
}


.dialogue_left_review p{
    display: block;
    padding-top: 3vw;
    padding-right: 3vw;
    padding-left: 3vw;
    padding-bottom: 3vw;
    border-radius: 12px;
    border:10px solid rgb(255, 92, 42);
    background-color: #ffffd3;
    margin-bottom: 5vw;
    margin-left: 15%;
    
}

.dialogue_right_review p{

    display: block;
    padding-top: 2vw;
    padding-right: 3vw;
    padding-left: 3vw;
    padding-bottom: 2vw;
    border-radius: 12px;
    border:10px solid rgb(255, 92, 42);
    background-color: #ffffd3;
    margin-bottom: 2vw;
    margin-right: 15%;
    
}

.dialogue_sorting p{

    display: block;
    padding-top: 3vw;
    padding-right: 2vw;
    padding-left: 2vw;
    padding-bottom: 3vw;
    border-radius: 12px;
    border:10px solid rgb(255, 92, 42);
    background-color: #fff12b;
    margin-bottom: 5vw;
    
}

.dialogue_answer p{

    display: block;
    text-align: left;
    padding-top: 3vw;
    padding-right: 2vw;
    padding-left: 2vw;
    padding-bottom: 3vw;
    border-radius: 12px;
    border:10px solid rgb(255, 92, 42);
    background-color: #FFFFFF;
    margin-bottom: 5vw;
    
}

.dialogue_answer_sort p{

    display: block;
    text-align: left;
    padding-top: 3vw;
    padding-right: 2vw;
    padding-left: 2vw;
    padding-bottom: 3vw;
    border-radius: 12px;
    border:10px solid rgb(255, 92, 42);
    background-color: #FFFFFF;
    margin-bottom: 5vw;
    
}


.dialogue_answer_dokkai p{

    display: block;
    text-align: left;
    padding-top: 3vw;
    padding-right: 2vw;
    padding-left: 2vw;
    padding-bottom: 3vw;
    border-radius: 12px;
    border:10px solid rgb(255, 92, 42);
    background-color: #FFFFFF;
    margin-bottom: 5vw;
    
}


.dialogue_answer_dokkai_tab p{

    display: block;
    text-align: center;
    border-radius: 12px;
    border:10px solid rgb(255, 92, 42);
    background-color: #FFFFFF;
    margin-bottom: 5vw;
    
}


.dialogue_kotoba_pic{
    width:80%;
    position: relative;
    margin-left: 8%;
    border-radius: 5%;
    margin-bottom: 2vh;
}

.dialogue_kotoba_pic img{
    width:100%;
    height: 30vh;
    border-radius: 5%;
    border:10px solid whitesmoke;
    display: block;
    text-align: center;
    object-fit: contain;
}

.dialogue_dokkai p{

    display: block;
    text-align: left;
    padding-top: 3vw;
    padding-right: 2vw;
    padding-left: 2vw;
    padding-bottom: 3vw;
    border-radius: 12px;
    border:10px solid #fff12b;
    background-color: #FFFFFF;
    margin-bottom: 5vw;
    
}


.dialogue_dokkai_pic p{

    display: block;
    text-align: left;
    padding-top: 3vw;
    padding-right: 2vw;
    padding-left: 2vw;
    padding-bottom: 3vw;
    border-radius: 12px;
    border:10px solid #fff12b;
    background-color: #FFFFFF;
    margin-bottom: 5vw;
    
}

.dialogue_dokkai_pic p img{
width: 100%;
height: 60vh;
}


.dialogue_n3dokkai_pic{
    width:80%;
    position: relative;
    margin-left: 5%;
    border-radius: 5%;
    margin-bottom: 2vh;
}

.dialogue_n3dokkai_pic img{
    width:110%;
    height: 100vh;
    border-radius: 5%;
    border:10px solid whitesmoke;
    display: block;
    text-align: center;
    object-fit: fill;
}


.dialogue_chokai_pic{
    width:99%;
    position: relative;

}

.dialogue_chokai_pic iframe{
    width:100%;
    height:42vh;
    border-radius: 5%;
    border:10px solid whitesmoke;

}


.inline_block p{
    display: inline-block;      /* インラインブロック要素にする */   /* 背景色指定 */
    border-radius: 5%;
    border:4px solid white;
    margin-top:7%;
    margin-left:150px;
    padding:20px;
    font-size: 50px;
}


.tab-wrap {
    display: flex;
    flex-wrap: wrap;
    margin:20px 0;
  }
  .tab-label {
    color: White;
    font-size: 40px;
    top:300px;
    margin-left:10%;
    margin-right:10%;
    padding-top:20px;
    padding-bottom:20px;
    background: LightGray;
    font-weight: bold;
    text-shadow: 0 -1px 0 rgba(0,0,0,.2);
    white-space: nowrap;
    text-align: center;
    order: -1;
    position: relative;
    z-index: 1;
    cursor: pointer;
    border-radius: 20px;
    flex: 1;
  }
  .tab-label:not(:last-of-type) {
    margin-right: 20px;
  }
  .tab-content {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    opacity: 0;
  }
  /* アクティブなタブ */
  .tab-switch:checked+.tab-label {
    background: DeepSkyBlue;
  }
  .tab-switch:checked+.tab-label+.tab-content {
    height: auto;
    opacity: 1;
    transition: .5s opacity;
  }
  /* ラジオボタン非表示 */
  .tab-switch {
    display: none;
  }



  /*           ショッピングセンター（通常）          */

.shopping_top {
    background: linear-gradient(to bottom, #00BF06 0%, #007404 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
	flex: 30%;
	padding-left: 5vw;
	padding-right: 5vw;
    padding-top: 10vh;
}



.shopping_bottom {
	flex: 57%;
    position: relative;
    overflow-y: scroll;
}


.shopping_footer {
	flex: 13%;
    border-top:3px solid rgb(104, 102, 102);
}


.shopping_top .dialogue {
    margin-top:0%;
    position: relative;
    }
    
    
.shopping_top .dialogue_left {
    background-image: url("img/face_man.png");
    background-repeat: no-repeat;
    background-size: 15%;
    
}
.shopping_top .dialogue_left p {
    display: block;
    padding-top: 3vw;
    padding-right: 3vw;
    padding-left: 3vw;
    padding-bottom: 3vw;
    border-radius: 12px;
    background-color: #ffffff;
    margin-bottom: 5vw;
    margin-left: 15%;

}
    
    
.shopping_top .dialogue_right {
    background-image: url("img/face_shopStaff.png");
    background-repeat: no-repeat;
    background-size: 15%;
    background-position: right;
}
.shopping_top .dialogue_right p {
    display: block;
    padding-top: 3vw;
    padding-right: 3vw;
    padding-left: 3vw;
    padding-bottom: 3vw;
    border-radius: 12px;
    background-color: #ffffd3;
    margin-bottom: 5vw;
    margin-right: 15%;
}

.shopping_item{
    display: flex;
}

.item{
    position: relative;
    height: 25vh;
    border:1px solid rgb(116, 112, 112);
    
}

.item img{
    margin-bottom: 10%;
    margin-top: -15%;
}

.item p{
    position: absolute;
    bottom:5%;
    font-size: 45px;
    text-align: center;
    left:15%;

}


.shopping_item_wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.shopping_item_wrapper .item-data {
    width: 33%;
    border-right: 2px solid #777;
    border-bottom:2px solid #777;
    padding:10px 7px;
    box-sizing: border-box;
}
.shopping_item_wrapper .item-data:nth-child(3) {
    width: 34%;
}
.shopping_item_wrapper .item-data img{
    width: 90%;
    margin-left:auto;
    margin-right:auto;
    margin-bottom: 10%;
}
.shopping_item_wrapper .item-data p{
    width: 100%;
    position: relative;
    bottom:5%;
    font-size: 45px;
    text-align: center;
}
.shopping_item_wrapper .btn-buy {
    display: inline-block;
    margin-top:40px;
    padding:6px 4px;
    width: 60%;
    height: 66px;
    font-size: 34px;
    cursor:pointer;
}


.shopping_footer h3{
    position: absolute;
    left: 5%;
    padding-top: 2%;
    font-size: 70px;
}


.dialogue_4 h3{
    text-align: center;
    font-size: 100px;
    margin-top:15%;
    margin-bottom:5%;
    color:#fff;
}



/* テストセンター マスターテスト*/

.dialogue_4 .master_item{
    display: flex;
}


.master_item .item{
    position: relative;
    width: 100%;
    height: 10vh;
    border:1px solid rgb(116, 112, 112);
    background-color:   #fff;
    text-align: center;
    padding-top:10%;
    line-height: 70px;
}

.master_item .item p{
    width: 70%;
    position: center;
    color:  #17a2b8;
    font-size: 70px;
    padding-bottom:8%;
}

.master_item .item .hiragana{
    padding-bottom:20%;
}
.master_item .item .katakana{
    padding-bottom:20%;
}
.master_item .item .kanji{
    padding-bottom:20%;
}
.master_item .item .n5_master{
    padding-bottom:17%;
}

.master_item .item .small{
    font-size: 50px;
 }

#master_all{
    width: 100%;
    position: center;
    color:  #17a2b8;
    font-size: 70px;
    padding-bottom:14%;
}

.master_test{
    position: relative;
}

.master_close{
    position:absolute;
    border-radius: 4px;
    width: 10%;
    height: 20px;
    padding:3%;
    margin-right:2%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #333;
    color: #fff;
    top: 2%;
    right: 2%;
  }

  .go_test {
      margin-top:8%;
      text-align: center;
      padding-top: 3vw;
      padding-right: 3vw;
      padding-left: 3vw;
      padding-bottom: 3vw;
      border-radius: 12px;
      background-color: yellow;
      color: #4B89FF;
      text-decoration: none;
      border:1px solid rgb(116, 112, 112);
      font-family: "OdorMeanChey" ;

  }

  .btn_ranking {
    margin-left: 12%;
    padding-top: 3vw;
    padding-right: 12vw;
    padding-left: 12vw;
    padding-bottom: 3vw;
    border-radius: 12px;
    color: green;
    text-decoration: none;
    text-align:center;
    border:1px solid rgb(116, 112, 112);
    font-family: "MS Pゴシック" ;

    }

/* ひらがなマスターテスト*/
.master_start_hiragana{
    z-index: 1;
    position:absolute;
    background-color: rgb(255, 253, 253);
    top: 0%;
    left: 10%;
    padding-top:10%;
    padding-bottom:10%;
    width:80%;
    border:1px solid rgb(116, 112, 112);
}

.master_start_hiragana h5{
   margin-bottom:3%;
   text-align: center;
   font-size: 70px;
}

 .master_start_hiragana table,tr,td{
    margin:1%;
    border: none;
}

.master_start_hiragana .table_left{
    text-align:right;
    font-size: 45px;
    width: 60%;
}

.master_start_hiragana .table_right{
    text-align:left;
    font-size: 45px;
    width: 40%;
}

/* カタカナマスターテスト*/
.master_start_katakana{
    z-index: 1;
    position:absolute;
    background-color: rgb(255, 253, 253);
    top: 0%;
    left: 10%;
    padding-top:10%;
    padding-bottom:10%;
    width:80%;
    border:1px solid rgb(116, 112, 112);
}

.master_start_katakana h5{
   margin-bottom:3%;
   text-align: center;
   font-size: 70px;
}

 .master_start_katakana table,tr,td{
    margin:1%;
    border: none;
}

.master_start_katakana .table_left{
    text-align:right;
    font-size: 45px;
    width: 60%;
}

.master_start_katakana .table_right{
    text-align:left;
    font-size: 45px;
    width: 40%;
}


/* 数字マスターテスト*/
.master_start_suuji{
    z-index: 1;
    position:absolute;
    background-color: rgb(255, 253, 253);
    top: 18%;
    left: 10%;
    padding-top:10%;
    padding-bottom:10%;
    width:80%;
    border:1px solid rgb(116, 112, 112);
}

.master_start_suuji h5{
   margin-bottom:3%;
   text-align: center;
   font-size: 70px;
}

.master_start_suuji .small{
    font-size: 60px;
 }

 .master_start_suuji table,tr,td{
    margin:1%;
    border: none;
}

.master_start_suuji .table_left{
    text-align:right;
    font-size: 45px;
    width: 60%;
}

.master_start_suuji .table_right{
    text-align:left;
    font-size: 45px;
    width: 40%;
}


/* 漢字マスターテスト*/
.master_start_kanji{
    z-index: 1;
    position:absolute;
    background-color: rgb(255, 253, 253);
    top: 18%;
    left: 10%;
    padding-top:10%;
    padding-bottom:10%;
    width:80%;
    border:1px solid rgb(116, 112, 112);
}

.master_start_kanji h5{
   margin-bottom:3%;
   text-align: center;
   font-size: 70px;
}

 .master_start_kanji table,tr,td{
    margin:1%;
    border: none;
}

.master_start_kanji .table_left{
    text-align:right;
    font-size: 45px;
    width: 60%;
}

.master_start_kanji .table_right{
    text-align:left;
    font-size: 45px;
    width: 40%;
}


/* ことばマスターテスト*/
.master_start_kotoba{
    z-index: 1;
    position:absolute;
    background-color: rgb(255, 253, 253);
    top: 30%;
    left: 10%;
    padding-top:10%;
    padding-bottom:10%;
    width:80%;
    border:1px solid rgb(116, 112, 112);
}

.master_start_kotoba h5{
   margin-bottom:3%;
   text-align: center;
   font-size: 70px;
}

.master_start_kotoba .small{
    font-size: 60px;
 }

 .master_start_kotoba table,tr,td{
    margin:1%;
    border: none;
}

.master_start_kotoba .table_left{
    text-align:right;
    font-size: 45px;
    width: 60%;
}

.master_start_kotoba .table_right{
    text-align:left;
    font-size: 45px;
    width: 40%;
}


/* 文法マスターテスト*/
.master_start_bunpou{
    z-index: 1;
    position:absolute;
    background-color: rgb(255, 253, 253);
    top: 30%;
    left: 10%;
    padding-top:10%;
    padding-bottom:10%;
    width:80%;
    border:1px solid rgb(116, 112, 112);
}

.master_start_bunpou h5{
   margin-bottom:3%;
   text-align: center;
   font-size: 70px;
}

.master_start_bunpou .small{
    font-size: 60px;
 }

 .master_start_bunpou table,tr,td{
    margin:1%;
    border: none;
}

.master_start_bunpou .table_left{
    text-align:right;
    font-size: 45px;
    width: 60%;
}

.master_start_bunpou .table_right{
    text-align:left;
    font-size: 45px;
    width: 40%;
}


/* 聴解マスターテスト*/
.master_start_chokai{
    z-index: 1;
    position:absolute;
    background-color: rgb(255, 253, 253);
    top: 48%;
    left: 10%;
    padding-top:10%;
    padding-bottom:10%;
    width:80%;
    border:1px solid rgb(116, 112, 112);
}

.master_start_chokai h5{
   margin-bottom:3%;
   text-align: center;
   font-size: 70px;
}

.master_start_chokai .small{
    font-size: 60px;
 }

 .master_start_chokai table,tr,td{
    margin:1%;
    border: none;
}

.master_start_chokai .table_left{
    text-align:right;
    font-size: 45px;
    width: 60%;
}

.master_start_chokai .table_right{
    text-align:left;
    font-size: 45px;
    width: 40%;
}


/* 読解マスターテスト*/
.master_start_dokkai{
    z-index: 1;
    position:absolute;
    background-color: rgb(255, 253, 253);
    top: 48%;
    left: 10%;
    padding-top:10%;
    padding-bottom:10%;
    width:80%;
    border:1px solid rgb(116, 112, 112);
}

.master_start_dokkai h5{
   margin-bottom:3%;
   text-align: center;
   font-size: 70px;
}

.master_start_dokkai .small{
    font-size: 60px;
 }

 .master_start_dokkai table,tr,td{
    margin:1%;
    border: none;
}

.master_start_dokkai .table_left{
    text-align:right;
    font-size: 45px;
    width: 60%;
}

.master_start_dokkai .table_right{
    text-align:left;
    font-size: 45px;
    width: 40%;
}


/* 総合マスターテスト*/
.master_start_all{
    z-index: 1;
    position:absolute;
    background-color: rgb(255, 253, 253);
    top: 66%;
    left: 10%;
    padding-top:10%;
    padding-bottom:10%;
    width:80%;
    border:1px solid rgb(116, 112, 112);
}

.master_start_all h5{
   margin-bottom:3%;
   text-align: center;
   font-size: 70px;
}

 .master_start_all table,tr,td{
    margin:1%;
    border: none;
}

.master_start_all .table_left{
    text-align:right;
    font-size: 45px;
    width: 60%;
}

.master_start_all .table_right{
    text-align:left;
    font-size: 45px;
    width: 40%;
}

.getting_wrapper {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 50px;
	line-height: 1.5;
    overflow-x: hidden;
    background-color: #000000;
}

.getting_prize{
    width: 100%;
    height: auto;
    background-color: #000000;
    position:relative;
}

.getting_prize video{
    width: 100%;
    margin-top:8%;
}


.getting_prize_button {
    position:absolute;
    bottom:-3%;
	display: block;
	padding-top: 3vw;
    padding-right: 13vw;
    padding-left: 13vw;
    padding-bottom: 3vw;
    text-align: center;
    text-decoration: none;
    background: #4B89FF;/*ボタン色*/
    color: white;
    border-bottom: solid 30px gray;
    border-right: solid 20px darkgray;
    border-radius: 80px;
    margin-left:30%;
    animation: slidein_from_bottom 10s ease-in-out 0s forwards;
}


@keyframes slidein_from_bottom {
	0% {transform: translateY(30vh);}
	0% {opacity: 0}

	100% {transform: translateY(0vh);}
	100% {opacity: 100}
}


.wrapper_final_3 {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 50px;
	line-height: 1.5;
    overflow-x: hidden;
    background: linear-gradient(to bottom, #00BF06 0%, #007404 100%);
}

.button_final_3 {
    position:absolute;
    bottom:3%;
	display: block;
	padding-top: 3vw;
    padding-right: 13vw;
    padding-left: 13vw;
    padding-bottom: 3vw;
    text-align: center;
    text-decoration: none;
    background: #4B89FF;/*ボタン色*/
    color: white;
    border-bottom: solid 30px gray;
    border-right: solid 20px darkgray;
    border-radius: 80px;
    margin-left:50%;
}

@keyframes final_3_result_text {
    from{
        font-size: 1em;
        margin-left: 35%;
    }
}

.final_3_text{
    position:absolute;
    margin-top: 20%;
    margin-left: 8%;
    font-size: 2.2em;
    text-align:center;
    line-height:0.95em;
    font-weight:bold;
    color: yellow;
    line-height: 1.5;
    animation: final_3_result_text 2s;

}

.character_position_final_3 img{
    position:absolute;
    bottom:0%;
    left:0%;
    width: 50%;
}


@keyframes master_text {
    from{
        font-size: 0.7em;
        margin-left: 35%;
    }
}

.master_text{
    position:absolute;
    margin-top: 5%;
    margin-left: 10%;
    font-size: 2em;
    text-align:center;
    font-weight:bold;
    color: yellow;
    line-height: 1.5;
    animation: master_text 2s;

}

.master_text2{
    position:absolute;
    margin-top: 51%;
    margin-left: 22%;
    margin-right: 20%;
    font-size: 1em;
    text-align:center;
    color: black;
    background-color: white;
    z-index: 1;
}

.master_text2 h5{
    margin-top:2%;
    margin-left:1%;
    font-size: 1.5em;
    line-height: 1.1;
    font-weight:bold;
    color: transparent;
    background: repeating-linear-gradient(0deg, #B67B03 0.1em, #DAAF08 0.2em, #FEE9A0 0.3em, #DAAF08 0.4em, #B67B03 0.5em); 
    -webkit-background-clip: text;
}

.master_text2 .user_name{
    margin:3%;
    padding-top:1%;
    padding-bottom:1%;
    font-size: 1em;
    border:2px solid rgb(117, 116, 116);
}


.master_text2 .lang_text{
    margin-top:5%;
    margin-left:7%;
    margin-right:4%;
    font-size: 0.7em;
    text-align: left;
}

.back_white{
    position:absolute;
    width:56%;
    height: 15vh;
    top:55%;
    left:23%;
    background-color: white;
}

.character_position_final_3 img{
    position:absolute;
    bottom:0%;
    left:0%;
    width: 40%;
    z-index: 1;
}

.certificate{
    width: 80%;
    margin-top:26%;
    margin-left:14%;
}

.certificate img{
    width: 92%;
}

.tiger_icon{
    width: 43%;
    margin-top:-18%;
    margin-left:44%;
    z-index: 2;
}

.tiger_icon img{
    width: 25%;
    z-index: 2;
}


.click_open_hiragana{
    position:relative;
}
.click_open_katakana{
    position:relative;
}
.click_open_suuji{
    position:relative;
}
.click_open_kanji{
    position:relative;
}
.click_open_kotoba{
    position:relative;
}
.click_open_bunpou{
    position:relative;
}
.click_open_chokai{
    position:relative;
}
.click_open_dokkai{
    position:relative;
}
.click_open_all{
    position:relative;
}

.certificate_seiseki{
    position:absolute;
    background-color: black;
    width: 100%;
    height: 50vh;
    top:0%;
    left:0%;
    z-index:1;
}


.certificate_seiseki img{
    margin-top:5%;
    width: 80%;
    z-index: 1;
}

.tiger_icon_seiseki{
    position:absolute;
    width: 20%;
    margin-top:93%;
    left:39%;
    z-index: 1;
}
.tiger_icon_seiseki img{
    width: 60%;
}

.back_white_seiseki{
    position:absolute;
    width:56%;
    height: 15vh;
    top:55%;
    left:23%;
    background-color: white;
}

.click_open_text2{
    position:absolute;
    width:64%;
    height: 26vh;
    margin-top: 32%;
    margin-left: 18%;
    margin-right: 15%;
    font-size: 1em;
    text-align:center;
    color: black;
    background-color: white;
    z-index: 1;
}

.click_open_text2 h5{
    text-align: center;
    font-size: 1.5em;
    line-height: 1.1;
    font-weight:bold;
    color: transparent;
    background: repeating-linear-gradient(0deg, #B67B03 0.1em, #DAAF08 0.2em, #FEE9A0 0.3em, #DAAF08 0.4em, #B67B03 0.5em); 
    -webkit-background-clip: text;
    border:0px ;
}


.click_open_text2 .user_name{
    margin:3%;
    font-size: 1em;
    border:1px solid rgb(117, 116, 116);
}


.click_open_text2 .lang_text{
    margin-left:7%;
    margin-right:4%;
    font-size: 0.7em;
    text-align: left;
}


.click_open_close{
    position:absolute;
    width: 10%;
    height: 20px;
    padding:3%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    top: 0%;
    right: -3%;
    z-index:1;
}