@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-top: 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;}
	 

   
    

/* ~~リンク ~~ */
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;
}


/* トップのロゴエリア*/

#logo{
width: 940px;
margin-right: auto;
margin-left: auto;
}

#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;
position:relative;
}

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

.login a{color:#FFFFFF;}

.login:hover {opacity:0.8;}

#top_img img {height:auto;width:100%;}


/* メインボックス*/
#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;
}



/* ~~ 文章~~ */

.read{ text-align:justify;}


/* ~~ 余白~~ */

.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;}


/*横並びリスト
----------------------------------------------------------- */

#wrap{width:100%;display:flex;justify-content: center;padding:0;list-style: none;}

.box1{width:calc(100% / 3);margin:6px; background:#e2e5e6;}

.box2{width:calc(100% / 2);margin:6px;  background:#e2e5e6;}

.box3{width:calc(100% / 1);margin:6px;  background:#e2e5e6;}


.box1:hover, .box2:hover, .box3:hover{opacity:0.7;}

#wrap p{float:left; text-align:left; font-weight:bold; padding-left:0.5em; }

#wrap a{color:#1B5092;display: block;overflow: hidden;}

.Line1{line-height:6em; font-size:120%;}

.Line2{ margin-top:25px; font-size:120%; }

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


/* ~~2ブロック用~~ */

#wrap67{width:67%;display:flex;justify-content: center;padding:0;list-style: none;}

#wrap67 p{float:left; text-align:left; font-weight:bold; padding-left:0.5em; }

#wrap67 a{color:#1B5092; display: block;overflow: hidden;}

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

/* ~~1ブロック用~~ */

#wrap33{width:33%;display:flex;justify-content: center;padding:0;list-style: none;}

#wrap33 p{float:left; text-align:left; font-weight:bold; padding-left:0.5em; }

#wrap33 a{color:#1B5092; display: block;overflow: hidden;}

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


/* ~~各テーマ見出し　color:#036eb8;~~ */

#titleArea{border-left:#CD0A2C 5px solid;
           border-bottom:#999999 1px solid;
           background:#f6faf6;
           width:99.5%;
		   height:60px;
		   margin:50px 0px 15px 0px;}

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


.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;}



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

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


#square_btn a{color:#FFFFFF;}

#square_btn:hover {opacity:0.8;}


/* ~~Ｑ＆Ａ~~ */


#boxQ{ width:100%;
       background:#DEEEFC;
	   background-image:url(../img/Q.png); background-repeat:no-repeat;
	   padding:20px 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:20px 0px;}
	  

#boxA p{ text-align:justify;
         font-size:110%;
		  color:#f87023; }

/* ~~サイドバーのデザイン~~ */


.sideMenu a { text-decoration:none; }  

.sideMenu li { list-style:none ;
      font-size:90%;
    line-height:35px;
}  

.sideMenu li a {  
    display:block;  
    padding:5px;
	color:#FFFF80;
    line-height:35px;  
    border-bottom:solid 1px #F3F3F3;
	background:#316493;
}  

.sideMenu li a:hover { color:#17407c; 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffc80a', endColorstr = '#ffa352');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffc80a', endColorstr = '#ffa352')";
background-image: -moz-linear-gradient(top, #ffc80a, #ffa352);
background-image: -ms-linear-gradient(top, #ffc80a, #ffa352);
background-image: -o-linear-gradient(top, #ffc80a, #ffa352);
background-image: -webkit-gradient(linear, center top, center bottom, from(#ffc80a), to(#ffa352));
background-image: -webkit-linear-gradient(top, #ffc80a, #ffa352);
background-image: linear-gradient(top, #ffc80a, #ffa352);

}

@media all and (min-width: 0) and (max-width: 767px) {
	#logo {
		width: auto;
	}
	
	#logo 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;
	}
	
	#container {
		margin: 0 15px;
		width: auto;
	}
	
	body {
		font: 80%/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	}
	
	.ti {
		font-size: 130%;
		line-height: 1.2;
	}
	
	#titleArea {
		padding-top: 12px;
		height: 40px;
		box-sizing: border-box;
	}
	
	.box1,
	.box2,
	.box3 {
		margin: 0 0 15px;
		width: auto;
	}
	
	#wrap,
	#wrap67,
	#wrap33 {
		width: auto;
		display: block;
	}
	
	#wrap a,
	#wrap67 a,
	#wrap33 a {
		width: 100%;
		height: 100%;
		display: table;
	}
	
	#wrap p,
	#wrap span,
	#wrap67 p,
	#wrap67 span,
	#wrap33 p,
	#wrap33 span {
		display: table-cell;
		vertical-align: middle;
	}
	
	#wrap p,
	#wrap67 p,
	#wrap33 p {
		float: none;
	}
	
	#footer {
		width: auto;
	}
	
	#footerbg {
		min-width: 0;
	}
	
	.box1:hover,
	.box2:hover,
	.box3:hover {
		opacity: 1;
	}
	
	.login {
		left: auto;
		right: 0;
	}
	
	.login:hover {
		opacity: 1;
	}
	
}