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

/*
<link rel="stylesheet" type="text/css" href="css/bace.css">
*/

/*===================
	基本設定
===================*/
/*html {
    padding-top: constant(safe-area-inset-top);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-left: constant(safe-area-inset-left);
    padding-right: constant(safe-area-inset-right);

    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}
body{
	padding-top: constant(safe-area-inset-top);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-left: constant(safe-area-inset-left);
    padding-right: constant(safe-area-inset-right);

    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}*/

html,body{height:100%;}

html {
    touch-action: manipulation;
}

body{
	background-color:#fff;
	color: #080808;
	/*font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Noto Sans JP", メイリオ, Meiryo, "MS PGothic", "MS UI Gothic", "MS Gothic", Arial, sans-serif;*/
	font-family: Arial, "ヒラギノ角ゴ Pro W3", "Noto Sans JP";
	font-size: 20px;
	/* line-height: 1.8em; */
	-webkit-text-size-adjust: 100%;
	width:100%;
	height:100%;
	margin: 0;
	padding: 0;
}
/*.wf-notosansjapanese { font-family: "Noto Sans JP"; }*/
/*input[type=text] {
    font-size: 18px;
    transform: scale(1.0);
    width: 90%;
}*/

/* iPhone6 縦以上の画面のフォントサイズ */
@media screen and (min-width:375px)  { 
		body{
    	font-size: 16px;
		}
}

#wrap{
	width:100%;
	position: relative;
	height:auto !important;/*IE6対策*/
	height:100%;/*IE6対策*/
}

/*---header---*/
header{
	/*padding-bottom: 6px;*/
	background-color:rgb(4,52,145);
	color: white;
	width: 100%;
	/*height: 64px;*/
	height: 64px;
	position: fixed;
	top: 0;
	z-index: 900;
	display: flex;
	justify-content: space-between;
	align-items: center;
	/*padding-top: 20px;ステータスバー分余白*/
}

header img{
}
header p{
}
header a {
    /*font-size: 50px;
    padding: 30px;
    position: relative;
    right: 50px;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	-moz-tap-highlight-color:rgba(0,0,0,0);
	-o-tap-highlight-color:rgba(0,0,0,0);
	-ms-tap-highlight-color:rgba(0,0,0,0);
	tap-highlight-color:rgba(0,0,0,0);*/
}

/*---headerの横幅---*/
/* iPhone 縦 */
	.header_bg{
		color: #fff;
		width:100%;
		margin:0 auto;
		padding: 0 6.9%;
}

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

/*---contents---*/
#contents{
	width: 100%;
	clear: both;
	margin-top: 64px;
	/* padding-top: 45px; */
	/*margin-top: 10px;*//*スマートフォン版ヘッダーの高さ分調整*/
}

/* @media screen and (max-height: 430px) {
    #contents {
        height: 48px;
    }
} */

.contents_bg{
	/*width:89.3%;*/
	/* width: auto;
	margin:0 10px;
	padding: 0 10px;
	overflow-y: scroll;
	height: calc( 100svh - 80px ); */
}

.contents_bg.wide_menu{
	/*width:89.3%;*/
	width: auto;
	margin:0 0;
	padding: 0 0;
	height:calc( 100svh - 64px );
}

.contents_bg.play_sound_menu{
	/*width:89.3%;*/
	width: auto;
	margin:0 0;
	padding: 0 0;
	height:calc( 100svh - 96px );
}

.contents_bg.play_chobun_menu{
	/*width:89.3%;*/
	width: auto;
	margin:0 0;
	padding: 0 0;
	background-color: #F2F3F5;
	height: calc(100svh - 64px);
    overflow-y: scroll;
}

#wrap_book_choice #contents .contents_bg {
	height:calc( 100svh - 40px );
}

/* #wrap_result #contents .contents_bg {
	height:calc( 100svh - 40px);
} */
/*
#wrap_play_chobun .contents_bg {
	height:100svh;
	min-height: 500px;
	padding: 0;
	margin: 0;
	overflow-y: hidden;
	width: 100%;
}
	*/
/*
#wrap_mondai #contents .contents_bg{
	height:calc( 100svh - 120px );
}
*/
	/*---contentsの横幅---*/


	@media screen and (min-width:480px) { 
    	/*　for iPhone Landscape　(iPhone 横)　*/
		.header_bg{
			/*width:89.3%;*/
			margin:0 0;
			padding: 0 0;
		}
		.contents_bg{
			/*width:89.3%;*/
			/* margin:0 0; */
			/*padding: 0 0;*/
			/* padding-left: 1em; */
		}
	 
	}
	@media screen and (min-width:768px) and (max-width:1200px) {
    	/*　for iPad 　*/
		header{
			/*height: 64px;*/
			/*height: 40px;*/
			padding-top: 0px;/*ステータスバー分余白*/
		}
		.header_bg{
			/*width:92%;*/
			width: 90%;
			margin:0 0;
			/*padding: 0 0;*/
			padding-left: 1em;
		}
		/*---contents---*/
		#contents{
			/* margin-top: 0px;スマートフォン版ヘッダーの高さ分調整を修正 */
		}
    	/*　for iPad 　*/
		/* .contents_bg{
			width: 90%;
			margin:0 0;
			padding-left: 1em;
		} */
	}
	@media screen and (min-width:1200px) {
		/*　for PC　*/
		
		header{
			/*height: 64px;*/
			padding-top: 0px;/*ステータスバー分余白*/
		}
		.header_bg{
			/*width:960px;*/
			/*width:1200px;*/
			margin:0 0;
			/*padding: 0 0;*/
			padding-left: 1em;
		}
		/*---contents---*/
		#contents{
			/* margin-top: 0px;スマートフォン版ヘッダーの高さ分調整を修正 */
		}
		
		/*　for PC　*/
		/* .contents_bg{
			width: 90%;
			margin:0 0;
			padding-left: 1em;
		} */
	}

/*---footer
#footer{
	width:100%;
    height:140px;
	position:absolute;
	bottom:0;
}---*/

	/*---footerの横幅---*/
	/* iPhone 縦
	.footer_bg{
		width:92%;
		margin:0 auto;
		padding: 0 auto;
	} */
	/*　@media screen and (min-width:480px) { 
    	for iPhone Landscape　(iPhone 横)
		.footer_bg{
			width:92%;
			margin:0 auto;
			padding: 0 auto;
		}
	 
	}　*/
	/*@media screen and (min-width:768px) and (max-width:1024px) {
    	　for iPad 
		.footer_bg{
			width:92%;
			margin:0 auto;
			padding: 0 auto;
		}
 
	}　*/
	/*　@media screen and (min-width:1024px) {
		for PC
		.footer_bg{
			width:960px;
			margin:0 auto;
			padding: 0 auto;
		}
	 
	}　*/
	


/*===================
	リンク
====================*/

a{text-decoration: none !important;
	padding-bottom:1px;}
a:hover{text-decoration: none !important;
	/*padding-bottom:1px;*/}
a:active{text-decoration: none !important;
	/*padding-bottom:1px;*/}

/*===================
	揃え方
====================*/

.f_left{float:left;}
.f_right{float:right;}

.clear{clear:both;}

.t_left{text-align:left;}
.t_right{text-align:right;}
.t_center{text-align:center; margin: 0 auto;}

/*===================
	フォント関係
====================*/
/*フォントサイズ*/
.fs_70 {font-size: 70%;}
.fs_75 {font-size: 75%;} 
.fs_80 {font-size: 80%;}
.fs_85 {font-size: 85%;}
.fs_90 {font-size: 90%;}
.fs_95 {font-size: 95%;}
.fs_110 {font-size: 110%;}
.fs_120 {font-size: 120%;}

/*フォント太さ*/
.font_b{font-weight:bold;}

/*フォント色*/
.font_rad{color: #fff;}

/*===================
	位置微調整用
====================*/

.pos_t1{position: relative; top: 1px;}

.pos_1{position: relative; bottom: 1px;}
.pos_2{position: relative; bottom: 2px;}
.pos_3{position: relative; bottom: 3px;}
.pos_4{position: relative; bottom: 4px;}
.pos_5{position: relative; bottom: 5px;}
.pos_6{position: relative; bottom: 6px;}

/*===================
	リスト
====================*/
/*li{list-style: none;}*/

/*===================
	余白スペース
====================*/

.m_top0{margin-top:0px;}
.m_top3{margin-top:3px;}
.m_top5{margin-top:5px;}
.m_top10{margin-top:10px;}
.m_top13{margin-top:13px;}
.m_top15{margin-top:15px;}
.m_top18{margin-top:18px;}
.m_top20{margin-top:20px;}
.m_top25{margin-top:25px;}
.m_top30{margin-top:30px;}
.m_top35{margin-top:35px;}
.m_top40{margin-top:40px;}
.m_top45{margin-top:45px;}
.m_top50{margin-top:50px;}
.m_top55{margin-top:55px;}
.m_top60{margin-top:60px;}
.m_top65{margin-top:65px;}
.m_top70{margin-top:70px;}
.m_top75{margin-top:75px;}
.m_top80{margin-top:80px;}
.m_top85{margin-top:85px;}
.m_top90{margin-top:90px;}
.m_top100{margin-top:100px;}
.m_top110{margin-top:110px;}
.m_top120{margin-top:120px;}
.m_top130{margin-top:130px;}
.m_top140{margin-top:140px;}
.m_top150{margin-top:150px;}
.m_top160{margin-top:160px;}
.m_top170{margin-top:170px;}
.m_top180{margin-top:180px;}
.m_top190{margin-top:190px;}
.m_top200{margin-top:200px;}
.m_top210{margin-top:210px;}
.m_top220{margin-top:220px;}
.m_top230{margin-top:230px;}
.m_top240{margin-top:240px;}
.m_top250{margin-top:250px;}

.m_bottom_min30{margin-bottom:-30px;}
.m_bottom0{margin-bottom:0px;}
.m_bottom3{margin-bottom:3px;}
.m_bottom5{margin-bottom:5px;}
.m_bottom10{margin-bottom:10px;}
.m_bottom13{margin-bottom:13px;}
.m_bottom15{margin-bottom:15px;}
.m_bottom18{margin-bottom:18px;}
.m_bottom20{margin-bottom:20px;}
.m_bottom25{margin-bottom:25px;}
.m_bottom30{margin-bottom:30px;}
.m_bottom35{margin-bottom:35px;}
.m_bottom40{margin-bottom:40px;}
.m_bottom45{margin-bottom:45px;}
.m_bottom50{margin-bottom:50px;}
.m_bottom55{margin-bottom:55px;}
.m_bottom60{margin-bottom:60px;}
.m_bottom65{margin-bottom:65px;}
.m_bottom70{margin-bottom:70px;}
.m_bottom75{margin-bottom:75px;}
.m_bottom80{margin-bottom:80px;}
.m_bottom85{margin-bottom:85px;}
.m_bottom90{margin-bottom:90px;}
.m_bottom100{margin-bottom:100px;}
.m_bottom110{margin-bottom:110px;}
.m_bottom120{margin-bottom:120px;}
.m_bottom130{margin-bottom:130px;}
.m_bottom140{margin-bottom:140px;}
.m_bottom150{margin-bottom:150px;}
.m_bottom160{margin-bottom:160px;}
.m_bottom170{margin-bottom:170px;}
.m_bottom180{margin-bottom:180px;}
.m_bottom190{margin-bottom:190px;}
.m_bottom200{margin-bottom:200px;}
.m_bottom210{margin-bottom:210px;}
.m_bottom220{margin-bottom:220px;}
.m_bottom230{margin-bottom:230px;}
.m_bottom240{margin-bottom:240px;}
.m_bottom250{margin-bottom:250px;}

.m_left0{margin-left:0px;}
.m_left3{margin-left:3px;}
.m_left5{margin-left:5px;}
.m_left10{margin-left:10px;}
.m_left13{margin-left:13px;}
.m_left15{margin-left:15px;}
.m_left18{margin-left:18px;}
.m_left20{margin-left:20px;}
.m_left25{margin-left:25px;}
.m_left30{margin-left:30px;}
.m_left35{margin-left:35px;}
.m_left40{margin-left:40px;}
.m_left45{margin-left:45px;}
.m_left50{margin-left:50px;}
.m_left55{margin-left:55px;}
.m_left60{margin-left:60px;}
.m_left65{margin-left:65px;}
.m_left70{margin-left:70px;}
.m_left75{margin-left:75px;}
.m_left80{margin-left:80px;}
.m_left85{margin-left:85px;}
.m_left90{margin-left:90px;}
.m_left100{margin-left:100px;}
.m_left110{margin-left:110px;}
.m_left120{margin-left:120px;}
.m_left130{margin-left:130px;}
.m_left140{margin-left:140px;}
.m_left150{margin-left:150px;}
.m_left160{margin-left:160px;}
.m_left170{margin-left:170px;}
.m_left180{margin-left:180px;}
.m_left190{margin-left:190px;}
.m_left200{margin-left:200px;}
.m_left210{margin-left:210px;}
.m_left220{margin-left:220px;}
.m_left230{margin-left:230px;}
.m_left240{margin-left:240px;}
.m_left250{margin-left:250px;}

.m_right0{margin-right:0px;}
.m_right3{margin-right:3px;}
.m_right5{margin-right:5px;}
.m_right10{margin-right:10px;}
.m_right13{margin-right:13px;}
.m_right15{margin-right:15px;}
.m_right18{margin-right:18px;}
.m_right20{margin-right:20px;}
.m_right25{margin-right:25px;}
.m_right30{margin-right:30px;}
.m_right35{margin-right:35px;}
.m_right40{margin-right:40px;}
.m_right45{margin-right:45px;}
.m_right50{margin-right:50px;}
.m_right55{margin-right:55px;}
.m_right60{margin-right:60px;}
.m_right65{margin-right:65px;}
.m_right70{margin-right:70px;}
.m_right75{margin-right:75px;}
.m_right80{margin-right:80px;}
.m_right85{margin-right:85px;}
.m_right90{margin-right:90px;}
.m_right100{margin-right:100px;}
.m_right110{margin-right:110px;}
.m_right120{margin-right:120px;}
.m_right130{margin-right:130px;}
.m_right140{margin-right:140px;}
.m_right150{margin-right:150px;}
.m_right160{margin-right:160px;}
.m_right170{margin-right:170px;}
.m_right180{margin-right:180px;}
.m_right190{margin-right:190px;}
.m_right200{margin-right:200px;}
.m_right210{margin-right:210px;}
.m_right220{margin-right:220px;}
.m_right230{margin-right:230px;}
.m_right240{margin-right:240px;}
.m_right250{margin-right:250px;}

.p_top0{padding-top:0px;}
.p_top3{padding-top:3px;}
.p_top5{padding-top:5px;}
.p_top10{padding-top:10px;}
.p_top13{padding-top:13px;}
.p_top15{padding-top:15px;}
.p_top18{padding-top:18px;}
.p_top20{padding-top:20px;}
.p_top25{padding-top:25px;}
.p_top30{padding-top:30px;}
.p_top35{padding-top:35px;}
.p_top40{padding-top:40px;}
.p_top45{padding-top:45px;}
.p_top50{padding-top:50px;}
.p_top55{padding-top:55px;}
.p_top60{padding-top:60px;}
.p_top65{padding-top:65px;}
.p_top70{padding-top:70px;}
.p_top75{padding-top:75px;}
.p_top80{padding-top:80px;}
.p_top85{padding-top:85px;}
.p_top90{padding-top:90px;}
.p_top100{padding-top:100px;}
.p_top110{padding-top:110px;}
.p_top120{padding-top:120px;}
.p_top130{padding-top:130px;}
.p_top140{padding-top:140px;}
.p_top150{padding-top:150px;}
.p_top160{padding-top:160px;}
.p_top170{padding-top:170px;}
.p_top180{padding-top:180px;}
.p_top190{padding-top:190px;}
.p_top200{padding-top:200px;}
.p_top210{padding-top:210px;}
.p_top220{padding-top:220px;}
.p_top230{padding-top:230px;}
.p_top240{padding-top:240px;}
.p_top250{padding-top:250px;}

.p_bottom0{padding-bottom:0px;}
.p_bottom3{padding-bottom:3px;}
.p_bottom5{padding-bottom:5px;}
.p_bottom10{padding-bottom:10px;}
.p_bottom13{padding-bottom:13px;}
.p_bottom15{padding-bottom:15px;}
.p_bottom18{padding-bottom:18px;}
.p_bottom20{padding-bottom:20px;}
.p_bottom25{padding-bottom:25px;}
.p_bottom30{padding-bottom:30px;}
.p_bottom35{padding-bottom:35px;}
.p_bottom40{padding-bottom:40px;}
.p_bottom45{padding-bottom:45px;}
.p_bottom50{padding-bottom:50px;}
.p_bottom55{padding-bottom:55px;}
.p_bottom60{padding-bottom:60px;}
.p_bottom65{padding-bottom:65px;}
.p_bottom70{padding-bottom:70px;}
.p_bottom75{padding-bottom:75px;}
.p_bottom80{padding-bottom:80px;}
.p_bottom85{padding-bottom:85px;}
.p_bottom90{padding-bottom:90px;}
.p_bottom100{padding-bottom:100px;}
.p_bottom110{padding-bottom:110px;}
.p_bottom120{padding-bottom:120px;}
.p_bottom130{padding-bottom:130px;}
.p_bottom140{padding-bottom:140px;}
.p_bottom150{padding-bottom:150px;}
.p_bottom160{padding-bottom:160px;}
.p_bottom170{padding-bottom:170px;}
.p_bottom180{padding-bottom:180px;}
.p_bottom190{padding-bottom:190px;}
.p_bottom200{padding-bottom:200px;}
.p_bottom210{padding-bottom:210px;}
.p_bottom220{padding-bottom:220px;}
.p_bottom230{padding-bottom:230px;}
.p_bottom240{padding-bottom:240px;}
.p_bottom250{padding-bottom:250px;}

.p_left0{padding-left:0px;}
.p_left3{padding-left:3px;}
.p_left5{padding-left:5px;}
.p_left10{padding-left:10px;}
.p_left13{padding-left:13px;}
.p_left15{padding-left:15px;}
.p_left18{padding-left:18px;}
.p_left20{padding-left:20px;}
.p_left25{padding-left:25px;}
.p_left30{padding-left:30px;}
.p_left35{padding-left:35px;}
.p_left40{padding-left:40px;}
.p_left45{padding-left:45px;}
.p_left50{padding-left:50px;}
.p_left55{padding-left:55px;}
.p_left60{padding-left:60px;}
.p_left65{padding-left:65px;}
.p_left70{padding-left:70px;}
.p_left75{padding-left:75px;}
.p_left80{padding-left:80px;}
.p_left85{padding-left:85px;}
.p_left90{padding-left:90px;}
.p_left100{padding-left:100px;}
.p_left110{padding-left:110px;}
.p_left120{padding-left:120px;}
.p_left130{padding-left:130px;}
.p_left140{padding-left:140px;}
.p_left150{padding-left:150px;}
.p_left160{padding-left:160px;}
.p_left170{padding-left:170px;}
.p_left180{padding-left:180px;}
.p_left190{padding-left:190px;}
.p_left200{padding-left:200px;}
.p_left210{padding-left:210px;}
.p_left220{padding-left:220px;}
.p_left230{padding-left:230px;}
.p_left240{padding-left:240px;}
.p_left250{padding-left:250px;}

.p_right0{padding-right:0px;}
.p_right3{padding-right:3px;}
.p_right5{padding-right:5px;}
.p_right10{padding-right:10px;}
.p_right13{padding-right:13px;}
.p_right15{padding-right:15px;}
.p_right18{padding-right:18px;}
.p_right20{padding-right:20px;}
.p_right25{padding-right:25px;}
.p_right30{padding-right:30px;}
.p_right35{padding-right:35px;}
.p_right40{padding-right:40px;}
.p_right45{padding-right:45px;}
.p_right50{padding-right:50px;}
.p_right55{padding-right:55px;}
.p_right60{padding-right:60px;}
.p_right65{padding-right:65px;}
.p_right70{padding-right:70px;}
.p_right75{padding-right:75px;}
.p_right80{padding-right:80px;}
.p_right85{padding-right:85px;}
.p_right90{padding-right:90px;}
.p_right100{padding-right:100px;}
.p_right110{padding-right:110px;}
.p_right120{padding-right:120px;}
.p_right130{padding-right:130px;}
.p_right140{padding-right:140px;}
.p_right150{padding-right:150px;}
.p_right160{padding-right:160px;}
.p_right170{padding-right:170px;}
.p_right180{padding-right:180px;}
.p_right190{padding-right:190px;}
.p_right200{padding-right:200px;}
.p_right210{padding-right:210px;}
.p_right220{padding-right:220px;}
.p_right230{padding-right:230px;}
.p_right240{padding-right:240px;}
.p_right250{padding-right:250px;}