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

/*----------------------------------------------------------
   共通
-----------------------------------------------------------*/

html { 
	width:100%;
} 
body { 
	overflow-x: hidden;
	width:100%;
	margin:0px;
	background: black;
	color: white;
} 

	.red{
		color: #cc0005 !important;
	}


#wrapper{
	width: 98%;
	max-width: 1000px;
	margin: 0 auto;
	background: white;
	color: #111111;
}
h1,h2,h3,h4,h5{
	color: #111111;
	clear: both;
}


h2 {
	position: relative;
	padding-bottom: .5em;
	margin-top: 50px;
}

.contents h2:first-child{
margin-top: 25px;
}

h2 {
  position: relative;
  padding: .75em 1em .75em 1.5em;
  border: 1px solid #ccc;
}
h2::after {
  position: absolute;
  top: .5em;
  left: .5em;
  content: '';
  width: 6px;
  height: -webkit-calc(100% - 1em);
  height: calc(100% - 1em);
  background-color: black;
  border-radius: 4px;
}

h3 {
	margin-top: 30px;
}

/* レスポンシブ用指定 */
img{
     max-width: 100%;
     height: auto;
     width /***/:auto;　
}

.bold{
font-weight: bold;
}

.ta_c{
	text-align: center;
}

#header{
width: 100%;
margin: 0 auto;
position: relative;
    overflow: hidden;
}


#logo{
	margin: 10px 2% 5px;
	width: 40%;
	max-width: 320px;

}
h1{
	font-size: 14px;
	width: 56%;
	margin-right: 2%;
	text-align: right;
	float: right;
	line-height: 22px;
    margin-bottom: 5px;
}
.contents{
	max-width: 1120px;
	width: 92%;
	margin-left: auto;
	margin-right: auto;
	background: white;
	padding: 0px 4% 20px;
}


.contents p{
    padding: 0 2%;
}

a { outline: none; }
a:focus, *:focus { outline:none; }
img{ border: none; }

ul li{
list-style: none;
}
table, table td, table th{
border: 0;
}

.ta_c{
	text-align: center !important;
}
.ta_r{
	text-align: right !important;
}
.ta_l{
	text-align: left !important;
}

p{
  padding: 0;
  margin: 0;
}

.pre{
white-space: pre;
}

.block{
display: block;
}

.ofh{
overflow: hidden;
}

input, textarea{
font-size: 12px;
}

table#tbl01 {
    width: 100%;
    border: 1px #e0e0e0 solid;
    border-collapse: collapse;
    border-spacing: 0;
}
table#tbl01 th {
    padding: 5px;
    border: #e0e0e0 solid;
    border-width: 0 0 1px 1px;
    background: #F5F5F5;
    text-align: center;
    font-size: 75%;
    line-height: 150%;
    font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "ＭＳ Ｐゴシック", "MS P Gothic", Verdana, Arial, Helvetica, sans-serif;
    white-space: nowrap;
}
table#tbl01 td {
    text-align: left;
    font-size: 75%;
    line-height: 150%;
    font-family: メイリオ, Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", Verdana, Arial, Helvetica, sans-serif;
    padding: 5px;
    border-style: solid;
    border-color: rgb(224, 224, 224);
    border-image: initial;
    border-width: 0px 0px 1px 1px;
}

table.common {
    width: 100%;
    border: 1px #e0e0e0 solid;
    border-collapse: collapse;
    border-spacing: 0;
}
table.common th {
    padding: 5px;
    border: #e0e0e0 solid;
    border-width: 0 0 1px 1px;
    background: #F5F5F5;
    text-align: center;
    font-size: 75%;
    line-height: 150%;
    font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "ＭＳ Ｐゴシック", "MS P Gothic", Verdana, Arial, Helvetica, sans-serif;
    white-space: nowrap;
}
table.common td {
    text-align: left;
    font-size: 75%;
    line-height: 150%;
    font-family: メイリオ, Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", Verdana, Arial, Helvetica, sans-serif;
    padding: 5px;
    border-style: solid;
    border-color: rgb(224, 224, 224);
    border-image: initial;
    border-width: 0px 0px 1px 1px;
}

/* Link Color
--------------------------------*/
a:link {/*未訪問のリンク*/
text-decoration: none;
}
a:visited {/*訪問後のリンク*/
text-decoration: none;
}
a:hover {/*マウスをのせたとき*/
text-decoration: underline;
}
a:active {/*クリック中*/
text-decoration: none;
}


dl{
margin-bottom: 5px;
}
dt{
}
dd{
margin: 0 0 10px 0;
}

.ti{
margin: 30px auto 30px;
}
.pdficon {
    margin: 0px 5px 0px 0px;
    float: left;
}
.pdftxt{
    font-size: 14px;
    padding: 5px;
}


#footer{
color: white;
background: black;
text-align: center;
width: 100%;
height: 130px;
padding-top: 30px;
font-size: 20px;
}


button.common {
  display: inline-block;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  outline: none;
  border: none;
}
button.common::before,
button.common::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
button.common,
button.common::before,
button.common::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
button.common {
  background-color: #000;
  color: #fff;
  margin: 10px auto;
}
button.common:hover {
  background-color: #049CE7;
}


/* table
-----------------*/
td,th{
border: 0 white;
}

/* width
-----------------*/

.w50px{
width: 50px;
}
.w100px{
width: 100px;
}
.w170px{
width: 170px;
}
.w200px{
width: 200px;
}
.w225px{
width: 225px;
}
.w230px{
width: 230px;
}
.w270px{
width: 270px;
}
.w300px{
width: 300px;
}
.w330px{
width: 330px;
}
.w380px{
width: 380px;
}
.w400px{
width: 400px;
}
.w500px{
width: 500px;
}
.w600px{
width: 600px;
}

.w10per{
width: 10%;
}
.w20per{
width: 20%;
}
.w25per{
width: 25%;
}
.w30per{
width: 30%;
}
.w33per{
width: 33%;
}
.w40per{
width: 40%;
}
.w50per{
width: 50%;
}
.w75per{
width: 75%;
}
.w100per{
width: 100%;
}


.center{
text-align: center;
margin: 0 auto;
}


.no_border{
border: 0 white;
}


.textalign_center{
text-align: center;
}
.textalign_right{
text-align: right;
}
.textalign_left{
text-align: left;
}



.clear{
clear: both;
}

strong{
font-weight: normal;
}

.small{
font-size: 10px;
}
.big{
font-size: 14px;
}
.fs_14{
font-size: 14px;
}
.fs_16{
font-size: 16px;
}
.fs_18{
font-size: 18px;
}
.fs_20{
font-size: 20px;
}
.fs_22{
font-size: 22px;
}
.fs_24{
font-size: 24px;
}

.border{
border: 1px solid #dddddd;
}

.float_left{
float: left;
}
.float_right{
float: right;
}



.notice{
	color: #B9944A;
	font-size: 250%;
}

.top_10{
position: relative; top: 10px;
}

.mb_5{
margin-bottom: 5px;
}
.mb_10{
margin-bottom: 10px;
}
.mb_20{
margin-bottom: 20px;
}
.mb_30{
margin-bottom: 30px;
}
.mb_50{
margin-bottom: 50px;
}
.ml_5{
margin-left: 5px;
}
.ml_10{
margin-left: 10px;
}
.ml_20{
margin-left: 20px;
}
.ml_30{
margin-left: 30px;
}
.mr_5{
margin-right: 5px;
}
.mr_10{
margin-right: 10px;
}
.mr_20{
margin-right: 20px;
}
.mr_30{
margin-right: 30px;
}
.mb_10{
margin-bottom: 10px;
}
.mt_5{
margin-top: 5px;
}
.mt_10{
margin-top: 10px;
}
.mt_15{
margin-top: 15px;
}
.mt_20{
margin-top: 20px;
}
.mt_30{
margin-top: 30px;
}
.mt_50{
margin-top: 50px;
}

.ps_10{
padding: 0 10px;
}
.ps_15{
padding: 0 15px;
}
.ps_20{
padding: 0 20px;
}
.ps_30{
padding: 0 30px;
}
.pl_10{
padding-left: 10px;
}
.pl_15{
padding-left: 15px;
}
.pl_20{
padding-left: 20px;
}
.pl_30{
padding-left: 30px;
}
.pr_10{
padding-right: 10px;
}
.pr_15{
padding-right: 15px;
}
.pr_20{
padding-right: 20px;
}
.pr_30{
padding-right: 30px;
}
.lh_30{
line-height: 30px;
}


#footer_logo{	
max-width: 96px;
margin-bottom: 20px;
}

.circle {
    width: 320px;
    height: 320px;
    margin: 10px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    position: relative;
    -moz-transition: All 1.5s -webkit-transition:All 1.5s;
    -o-transition-ms-transition: All 1.5s;
    transition: All 1.5s;
    background-color: #111111;
        float: left;
        color: white;
            font-size: 24px;
    text-align: center;
    line-height: 30px;
    margin-bottom: 50px;
}

.cc2{
    background-color: #0051AA !important;
}
.cc3{
    background-color: #00318A !important;
}


/*----------------------------------------------------------
   ＰＣ用　レスポンシブ指定　ここから
-----------------------------------------------------------*/

@media screen and (min-width: 1001px) {

	body{
	font-size: 14px;
	line-height: 20px;
	}
	
	a:hover img{
	opacity:0.7;
	filter: alpha(opacity=70);
	}

	.mr_0_pc{
	margin-right: 0 !important;
	}

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

	
	h2.common{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
    margin-top: 0;
	text-align: center;
    font-weight: bold;
    font-size: 48px;
    line-height: 48px;
    border-bottom: 4px solid black;
    padding-bottom: 15px;
    padding-top: 40px;
	}
	
	h3.common{
	width: 100%;
    font-weight: bold;
    font-size: 24px;
    line-height: 24px;
    border-bottom: 1px solid black;
    padding-bottom: 10px;
    padding-bottom: 5px;
    margin-bottom: 5px;
	}
	h3.common a{
	color: black;
	}
	h3.common a:hover{
	text-decoration: none;
	}
	
	.more:hover, .close:hover{
	opacity:0.7;
	filter: alpha(opacity=70);
	}
	.more {
    margin: -14px auto 0;
	cursor: pointer;
	}
	.close {
    margin: -14px auto 0;
	cursor: pointer;
	}

	
	/* footer
	------------------------------------*/
	#footer{
    margin: 50px auto 0;
	font-size: 10px;
	letter-spacing: -1px;
	word-spacing:-1px;
	}
	#footer a{
	color: #bae7f7;	
	text-decoration:none;
	line-height: 13px;
	}
	#footer br{
	height: 5px;
	line-height: 5px;
	margin: 0; padding: 0;
	}
	
	#footer a:hover{
	color: #000;
	}
	#footer_logo{
	margin: 5px;
	}

	#copyright{
	}
	

	.pc_only{
		display: block;
	}
	
	.sp_only{
		display: none;
	}

	.pc_only_inline{
		display: inline;
	}
	
	.sp_only_inline{
		display: none;
	}


}

/*----------------------------------------------------------
   ＰＣ用　レスポンシブ指定　ここまで
-----------------------------------------------------------*/




/*----------------------------------------------------------
   スマホ用　レスポンシブ指定　ここから
-----------------------------------------------------------*/

@media screen and (max-width: 1000px) {

	body{
	font-size: 13px;
	line-height: 20px;
	}

	/* header
	------------------------------------*/
	#header{
	max-width: 600px;
	margin: 0 auto -1px;
	position: relative;
	height: 100%;
	text-align: center;
	}

	.w25per{
	width: 25%;
	}
	.w75per{
	width: 75%;
	}
	
	#logo{
	margin: 5px auto;
	width: 100%;
	max-width: 255px;
	clear: both;
	}
	h1{
		font-size: 10px;
		width: 90%;
		clear: both;
		line-height: 14px;
	    margin: 0 auto 5px;
	    float: none;
	    text-align: center;
	}

	.pc_three_column{
		text-align: center;
	}
	

	/* contents
	------------------------------------*/
	
	.contents{
	max-width: 570px;
	width: 90%;
	margin: 0 auto;
	padding: 0px 5% 20px;
	background: white;
	}
	
	.contents_footer{
	display: none;
	height: 11px;
	max-width: 570px;
	width: 94%;
	margin: 0 auto;
	clear: both;
	}

	h2.common{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
    font-weight: bold;
    font-size: 30px;
    line-height: 30px;
    border-bottom: 4px solid black;
    padding-bottom: 10px;
    padding-top: 20px;
    margin-bottom: 20px;
    margin-top: 0;
	}
	
	h3.common{
    width: 100%;
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    padding-bottom: 10px;
    padding-bottom: 5px;
    margin-bottom: -25px;
    margin-top: 5px;
	}
	h3.common a{
	color: black;
	}
	h3.common a:hover{
	text-decoration: none;
	}
	

	
	/* footer
	------------------------------------*/
	#footer{
	max-width: 600px;
	min-height: 130px;
	margin: 0 auto;
	font-size: 10px;
	letter-spacing: -1px;
	word-spacing:-1px;
	}
	#footer a{
	color: #bae7f7;	
	text-decoration:none;
	line-height: 13px;
	}
	#footer br{
	height: 5px;
	line-height: 5px;
	margin: 0; padding: 0;
	}
	
	#footer a:hover{
	color: #000;
	}
	#footer_logo{
	margin: 5px;
	}
	#copyright{
	}

	.more{
		position: relative;
		right: 20px;
		cursor: pointer;
	}
	.close{
		position: relative;
		right: 20px;
		cursor: pointer;
	}

	.pc_only{
		display: none;
	}
	
	.sp_only{
		display: block;
	}

	.pc_only_inline{
		display: none;
	}
	
	.sp_only_inline{
		display: inline;
	}

}


/*----------------------------------------------------------
   スマホ用　レスポンシブ指定　ここまで
-----------------------------------------------------------*/