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


/* 額縁共通 */
html,
body {
  overflow-x: hidden;
}

body {
	font: 100%/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	margin: 0;
	padding: 0;
	color: #000;
}

/* ~~ リセット ~~ */
ul, ol, dl, p{ /* ブラウザー間の相違により、リストの余白とマージンをゼロにすることをお勧めします。一貫性を保つために、量をここで指定するか、リストに含まれるリスト項目 (LI、DT、DD) で指定できます。より詳細なセレクターを記述しない限り、ここで指定する内容が .nav リストにも適用されることに注意してください。 */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding:0;
}


h1{ font-size:240%;
padding-top:20px;
	color: #FF0;}

h2{ font-size:130%;
    color: #FFF;
	padding-bottom:20px;}

h3{border-left:#CD0A2C 5px solid;
     text-indent:0.5em;}
	 
h4{ color:#FFFFFF; font-size:100%; background:#036eb8; padding:7px 20px; border-radius:5px; width:40%; margin:20px 0px;}
	 
	 
h5{ color: #FF8040; font-size:100%; }	 

   
h6{ color: #1d2088; font-size:110%;}	    


/* ~~リンク ~~ */
a img {
	border: none;
}

a{ text-decoration:none;}

a.alpha:hover img {filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;}

a:link { color: #000000; }    /* 未訪問のリンク */
a:visited { color: #000080; } /* 訪問済みのリンク */
a:hover { color: #ff6600; }   /* ポイント時のリンク */


/* ~~  float/clear  ~~ */
.fltrt {  /* このクラスを使用すると、ページ内でエレメントを右にフローティングさせることができます。フローティングさせるエレメントは、ページ内で横に並べて表示するエレメントの前に指定する必要があります。 */
	float: right;
}
.fltlft { /* このクラスを使用すると、ページ内でエレメントを左にフローティングさせることができます。フローティングさせるエレメントは、ページ内で横に並べて表示するエレメントの前に指定する必要があります。 */
	float: left;
}
.clearfloat { /* このクラスは、#footer が #container から削除されているか取り出されている場合に、<br /> または空の div で、フローティングさせる最後の div に続く最後のエレメントとして (#container 内に) 配置できます。 */
	clear:both;
	height:0;
}


/* トップのロゴエリア*/
#Area{
width: 940px;
margin-right: auto;
margin-left: auto;
}
/* ヘッダーを幅いっぱいにする為のボックス*/
#headerbg {
background:#036eb8;
width:100%;
min-width:1000px;
}
/* ヘッダー*/
#header       {
width: 940px;
margin-right: auto;
margin-left: auto;
}
/* メインボックス*/
#container {
width: 940px;
margin-right: auto;
margin-left: auto;
margin-bottom:20px;
}
/* フッターを幅いっぱいにする為のボックス*/
#footerbg {
background:#036eb8;
width:100%;
min-width:1000px;
}
/* フッター*/
#footer        {
width: 940px;
color:#FFFFFF;
font-size:70%;
line-height:2em;
text-align:center;
margin-right: auto;
margin-left: auto;
}


/* ~~ナビ~~ */

#nav{width:100%;display:flex;justify-content: center;padding:0;list-style: none;font-size:90%;}


.navi7{width:calc(100% / 7);margin:0.5px ; }


.navi7:hover{background:#036eb8;}


.navi6{width:calc(100% / 6);margin:0.5px ; }


.navi6:hover{background:#036eb8;}


.navi5{width:calc(100% / 5);margin:0.5px ; }

.navi5:hover{background:#036eb8;}


.navi4{width:calc(100% / 4);margin:0.5px ; }

.navi4:hover{background:#036eb8;}


.navi3{width:calc(100% / 3);margin:0.5px ; }

.navi3:hover{background:#036eb8;}


#nav .line01{ text-align:center; color:#FFFFFF;font-weight:bold; line-height:4em;}

#nav .line02{ text-align:center; color:#FFFFFF;font-weight:bold; line-height:1.5em; padding:0.5em 0; }

#nav span{ font-size:80%; line-height:0.2em; }

#nav a{ color:#FFFFFF;}

.on{background-color:#036eb8;}


.off{background-color:#2f2e2d;}


/* ~~ 文章~~ */

.read{ text-align:justify; line-height:1.8em;}


/* ~~ 余白~~ */

.mgTB10{margin:10px 0px;}

.mgTB20{margin:20px 0px;}

.mgT20{margin-top:20px;}

.mgT30{margin-top:30px;}

.mgB10{margin-bottom:10px;}

.mgB20{margin-bottom:20px;}

.pL5{padding-left:5px;}


/* ~~ カラー~~ */  

.or{color:#FF8000;}




/* ~~下層ページの見出し~~ */

#titleArea{border-left:#CD0A2C 5px solid;
           background:#e2e5e6;
           width:99.5%;
		   height:100px;
		   margin-bottom:20px;}

.ti{ font-size:150%;
     line-height:4em;
     text-indent:0.5em;
	font-weight:bold;
     color:#036eb8;}


.re{text-indent:0.7em;
             color:#000000;}

#titleArea span{ float:right; margin:0px;}



/* ~~下層ページのタブボックス~~ */

#box{ width:95.5%;
      border-bottom:#036eb8 2px solid;
	  border-left:#036eb8 2px solid;
	  border-right:#036eb8 2px solid;
	  padding:0px 20px 20px 20px;
	 
}


#box ul li { list-style: none;
              line-height:3em;
               border-bottom:#2f2e2d 1px dotted;
			   color:#2f2e2d;}



/* ~~トップページへ戻るボタン~~ */


#Area_btn { position:relative; margin:40px auto; width:300px; height:60px;}

#square_btn {
	position:absolute;
	display: inline-block;
	font-weight: bold;
	padding: 0.5em 1em;
	text-decoration: none;
	background: #f6ac19;
	transition: .4s;
	border:#999999 1px solid;
	left: 97px;
	top: 0px;
  }


#square_btn a{color:#3c609b;}

#square_btn:hover {opacity:0.5;}


/* ~~次ページへ戻るボタン~~ */

#ff_btn {
	position:absolute;
	display: inline-block;
	font-weight: bold;
	padding: 0.5em 1em;
	text-decoration: none;
	background: #e8f3f7;
	transition: .4s;
	border:#999999 1px solid;
	left: 0px;
	top: 0px;
	width: 50px;
  }


#ff_btn:hover {color:#FFFFFF; opacity:0.8; background: #3c609b;}

#Rew_btn {
	position:absolute;
	display: inline-block;
	font-weight: bold;
	padding: 0.5em 1em;
	text-decoration: none;
	background: #e8f3f7;
	transition: .4s;
	border:#999999 1px solid;
	left: 287px;
	top:0px;
	width: 50px;
  }


#Rew_btn:hover {color:#FFFFFF; opacity:0.8; background: #3c609b;}






/* ~~Ｑ＆Ａ~~ */


#boxQ{ width:100%;
       background:#DEEEFC;
	   background-image:url(../img/Q.png); background-repeat:no-repeat;
	   padding:30px 0px;}
	  

#boxQ p{ text-align:justify;
         font-size:120%; 
		  font-weight:bold;
		  color:#036eb8; }

.textArea{ width:85%; margin-left:100px;}


#boxA{ width:100%;
       background:#fdeee5;
	   background-image:url(../img/A.png); background-repeat:no-repeat;
	   padding:30px 0px;}
	  

#boxA p{ text-align:justify;
	     min-height: 1.6em;
         font-size:110%;
		 font-weight:bold;
		  color:#f87023; }
		  
		  
.kakomi{background: #ffffea; padding: 15px 30px; border: 4px inset #328adc; border-radius: 10px; word-break: break-all; margin:20px 0px;}

.mida01{color:#ff6600; font-weight:bold; font-size:110%; margin:20px 0px;}

.mida02{color:#0763a9; font-weight:bold; margin:20px 0px;}

ul li{list-style:none;}
mt20{margin-top:20px;}


/* ~~分数表示用~~ */

.td-btm {  border: 1px solid black; 
    border-top-style:none; 
    border-left-style:none;
	border-right-style:none; 
}

.sp {
	display: none !important;
}

@media all and (min-width: 0) and (max-width: 767px) {
	.sp {
		display: block !important;
	}
	
	.pc {
		display: none !important;
	}
	
	#Area {
		width: auto;
	}
	
	#Area img {
		width: 220px;
		height: auto;
	}
	
	#headerbg {
		padding: 0 15px;
		min-width: 0;
		box-sizing: border-box;
	}
	
	h1 {
		font-size: 170%;
	}
	
	h2 {
		font-size: 85%;
	}
	
	#header {
		width: auto;
	}
		
	#box {
		padding: 10px;
		width: auto;
	}
	
	#box ul li {
		margin-bottom: 10px;
		padding: 0 0 8px 2.3em;
		text-indent: -2.3em;
		line-height: 1.3;
		letter-spacing: -0.5px;
	}
	
	#footer {
		width: auto;
	}
	
	#footerbg {
		min-width: 0;
	}
	
	#container {
		width: auto;
	}
	
	#nav span {
		font-size: 63%;
		line-height: 1.5;
	}
	
	body {
		font: 80%/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	}
	
	#Area_btn {
		margin: 20px 0 0 0;
		width: auto;
		height: auto;
		position: static;
		top: auto;
		left: auto;
	}
	
	.mgTB20 {
		margin: 0;
	}
	
	#square_btn,
	#Rew_btn,
	#ff_btn {
		margin: 0 auto;
		width: 150px;
		text-align: center;
		display: block;
		position: static;
		top: auto;
		left: auto;
	}
	
	#ff_btn {
		margin-bottom: 10px;
	}
	
	#Rew_btn {
		margin-top: 10px;
	}
	
	a:hover,
	a:visited {
		color: #000000;
	}
	
	#square_btn:hover {
		opacity: 1;
	}
	
	.navi7:hover,
	.navi6:hover,
	.navi5:hover,
	.navi4:hover,
	.navi3:hover {
		background-color: #2f2e2d;
	}
	
	.on:hover {
		background-color: #036eb8;
	}
	
	#nav a {
		padding: 10px 0;
		line-height: 1.3;
		display: block;
	}
	
	#nav {
		font-size: 66%;
	}
	
	#boxQ,
	#boxA {
		padding: 20px 15px 20px 66px;
		background-size: 50px auto;
		background-position: left top 5px;
		box-sizing: border-box;
	}
	
	#boxQ .textArea,
	#boxA .textArea {
		margin: 0;
		width: auto;
	}
	
	.textArea {
		margin: 0 15px;
		width: auto;
	}
	
	h4 {
		width: 240px;
		text-align: center;
		box-sizing: border-box;
	}

	#titleArea span {
		display: none;
	}
	
	#Rew_btn:hover,
	#ff_btn:hover {
		position: 1;
		background: #e8f3f7;
	}
	
	#Rew_btn a:hover,
	#ff_btn a:hover {
		color: #000000;
	}
	
	img {
		max-width: 100%;
		height: auto;
	}
}