@charset "utf-8";
/* CSS Document */

body {
	font-family: "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "Hiragino Kaku Gothic Pro";
	background: #f0f9fd;
	line-height: 1.8;
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
	font-size: 16px;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

/*ローディング*/

#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #fff;
  z-index: 1;
}
#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  text-align: center;
  color: #222;
  z-index: 2;
}

/**/

.header-top{
	margin: 0 auto;
	width: 1000px;
	height: 64px;
	vertical-align:middle;
}
.header-top img{
	vertical-align: bottom;
}
.header-top h1{
	float: left;
	width: 600px;
}
.header-top ul{
	padding: 20px 0 0 0;
	float: right;
	width: 230px;
}
.header-top ul li{
	margin:0 15px 0 0;
	float: left;
}
.sitemap a{
	margin-top: 12px;
	color: #222;
	font-family: "Yu Gothic","YuGothic","メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro";
	font-size:15px;
	font-weight: bold;
	text-decoration: none;
	transition: .2s;
}
.sitemap a:hover{
	color: #0080cc;
	text-decoration: underline;
}

.search img{
	vertical-align: bottom;
}

#search-box{
	padding: 10px;
	background:#0080cc;
	display: none;
	right:20px;
	width:100%;
	height:40px;
	z-index:1;
	transition:0.2s;
	
}
/* Googleカスタム検索 */
#search{
	width:300px;
	margin-right:10px;
}
.cse .gsc-control-cse, .gsc-control-cse {
  background-color: transparent !important;
  border-color: transparent !important;
  padding: 0 !important;
}

#gsc .gsc-control-cse,
#gsc .gsc-control-cse-ja,
#gsc .gsib_a{
	margin:0 !important;
	padding:0 !important;
}

form.gsc-search-box{
	margin:0 !important;
}
table.gsc-search-box {
	margin:0 !important;
}

.gsc-input-box{
	height:auto !important;
}
#gsc table.gsc-search-box td,
#gsc table.gsc-search-box input
{
	vertical-align: top !important;
}

.gs-title{
	color: #0000CC !important;
	text-align:left !important;
	margin-left:0 !important;
	font-size:15px !important;
}




/* --------------------------------------------------------- 
	nav
---------------------------------------------------------- */


.fixed {
    position: fixed;
    top: 0;
    width: 100%;
	transition: ease-in-out;
    z-index: 10000;
}


/* --------------------------------------------------------- 
	topic-path
---------------------------------------------------------- */
.topic-path{
	padding-top: 20px;
	margin: 0 auto;
	font-size: 14px;
	text-align:right;
	width: 1000px;
	
}
.topic-path ul{
	float: right;
}
.topic-path ul li{
	margin-right:5px;
	float: left;
}


/* --------------------------------------------------------- 
	h1
---------------------------------------------------------- */

.h1-area{
	margin: 0 auto;
	font-family: "Yu Gothic","YuGothic","メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro";
	height: 330px;
	width: 100%;
	position: relative;
	text-align: center;
}


.h1-area-solo{
	margin: 0 auto;
	font-family: "Yu Gothic","YuGothic","メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro";
	height: 200px;
	width: 100%;
	position: relative;
	text-align: center;
}


.h1-results{
	background: url(../img/h1_results.jpg) center center no-repeat;
	background-size: cover;
	background-attachment: fixed;	
}

.h1-area p{
	color: #fff;
	font-size: 15px;
	font-weight: bold;
	letter-spacing:1.1px;
	position: absolute;
	top: 20%;
	left: 0;
	width: 100%;
}
.h1-area span{
	border-bottom: 1px solid #fff;
	display: inline-block;
	padding: 0 10px 10px 10px;
}

.h1-area h1{
	color: #fff;
	font-size: 35px;
	font-weight: bold;
	position: absolute;
	top: 45%;
	left: 0;
	width: 100%;
}

 .h1-area-solo h1{
	color: #fff;
	font-size: 35px;
	font-weight: bold;
	position: absolute;
	top: 35%;
	left: 0;
	width: 100%;
}
/* --------------------------------------------------------- 
	sub menu
---------------------------------------------------------- */
.nav-sub-area{
	font-family: "Yu Gothic","YuGothic","メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro";
	width: 100%;
}

.nav-sub{
	margin: 0 auto;
	width: 1000px;
}

.nav-sub li{
	float: left;
	text-align: center;
}

.nav-sub li a{
	padding: 14px 0 12px 0;
	color: #000;
	font-size:15px;
	font-weight:bold;
	display: block;
	text-decoration: none;
	transition: 0.4s;
}

.item6 li{
	width: 16.6666%;
}
.item4 li{
	width: 25%;
}

.nav-sub li a:hover{
	background: #0080cc;
	color: #fff;
}

.nav-sub li.nav-sub-active a{
	background: #0080cc;
	color: #fff;
}

/* --------------------------------------------------------- 
	main-content
---------------------------------------------------------- */
.main-content{
	padding: 0;
	clear: both;
	background: #fff; 
}
.section{
	margin: 0 auto;
	clear: both;
	width: 1000px;
}


.h1-solo, .h2-std{
	padding: 30px 0 0 10px;
	font-family: "Yu Gothic","YuGothic","メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro";
	font-size: 30px;
	font-weight: bold;
	
}
@media only screen and (max-width: 768px) {
  .h1-solo {
    font-size: 18px;
  }
}

.h3-std{
	padding: 3px 0 3px 10px;
	margin: 30px 10px;
	border-left: 10px solid #0080cc;
	font-family: "Yu Gothic","YuGothic","メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro";
	font-size: 24px;
	font-weight: bold;
	
}


.h4-std{
	border-bottom:dashed 1px #0080CC;
	margin:30px 0 0 30px;
}


.p-std{
	margin: 20px 10px 0 15px;
	line-height: 2;
	font-size: 16px;
}

.ul-std {
	padding: 10px;
	margin: 20px;
	list-style-position:inside;
	list-style-type: disc;
	text-indent:-1.5em;
}
.ul-std li{
	margin-bottom: 10px;
}

.ul-std-tbl-inner {
	margin-left:1.5em;
	list-style-position:inside;
	list-style-type: disc;
	text-indent:-1em;
}

.ol-std {
	list-style-type:decimal;
	margin-left:30px;
}
.ol-std li{
}

.ol-deco {
	padding: 10px;
	margin: 20px;
	counter-reset:cnt;
}
.ol-deco li{
	margin-bottom: 10px;
}

.ol-deco li:before {
  counter-increment:cnt; 
  content: counter(cnt); 
  float: left;
  background: #002e73;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: 1.5;
  position:absolute;
  left:115px;
 }



.note-box{
	padding: 20px;
	background: #f4f4f4;
	border: 1px solid #d9d9d9;
}


/* ---ボタン--- */

.btn-blue{
	padding: 15px 50px;
	background: #007ABE;
	border: 1px solid #025685;
	border-radius: 5px;
	color: #fff;
	display: inline-block;
	font-size: 17px;
	transition: 0.2s;
}
.btn-blue:hover{
	background:rgba(255,255,255,0.6);
	border:1px solid #025685;
	border-radius:5px;
	color:#000;
}


/*---page-top---*/

p.gotop{
    position: fixed;
    right: 0;
    bottom:0;
	z-index:100;
}
p.gotop a{
    width:62px;
    height:62px;
    display: block;
	background:url(../img/pagetop.png) no-repeat;
	text-decoration: none;
}



/* --------------------------------------------------------- 
	footer
---------------------------------------------------------- */
.footer{
	background: #0080cc;
}


.contact{
	margin: 30px auto 0 auto;
	height:100px;
	width: 1000px;
}
.contact p{
	margin-top: 50px;
	text-align: center;
}
.contact-btn{
	padding: 10px 50px 10px 70px;
	background: url(../img/icon_contact.png) no-repeat left 25px center #fff;
	border: 1px solid #002e73;
	border-radius: 50px;
	color: #002e73;
	display: inline-block;
	font-size: 17px;
	transition: 0.2s;
	text-decoration: none;
}
.contact-btn:hover{
	background: url(../img/icon_contact_on.png) no-repeat left 25px center #002e73;
	border: 1px solid #002e73;
	color:#fff;
}

.link a{
	color: #fff;
	text-decoration: none;
}

.link{
	padding: 50px 0;
	margin: 0 auto;
	clear: both;
	width: 980px;
}
.link li{
	margin: 0 5px 10px 5px;
	color: #fff;
	float: left;
	font-size:14px;	
}
.copyright{
	padding: 20px;
	margin: 0 auto;
	background: #002e73;
	color: #fff;
	text-align: center;
}
.sns{
	padding: 50px 0;
	margin: 0 auto;
	width: 372px;
}
.sns li{
	margin: 0 30px;
	float: left;
}








/* --------------------------------------------------------- 
	custom
---------------------------------------------------------- */

/*---内部リンク---*/
.link-area {
	margin: 0 auto 10px auto;
	width: 1000px;
	position: relative; 
    overflow: hidden;
}
.link-area ul{
	text-align: center;
	position: relative;
	left: 50%; /* リスト全体であるul要素を右に50%移動。つまり先頭を中央に持ってくる感じです。 */
	float: left;
}
.link-area ul li{
	float: left;
	position: relative;
	left: -50%; /* 各リスト項目になるli要素を左に50%移動。 */
}
.link-area ul li a{
	padding: 5px 10px;
	margin: 0 10px;
	background: #e4e4e4;
	border: 1px solid #ddd;
	border-radius: 2px 2px 0 0;
	color: #222;
	display: inline-block;
	font-size: 14px;
	text-decoration: none;
	-webkit-transition: .1s linear;
	-moz-transition: .1s linear;
	-o-transition: .1s linear;
}
.link-area ul li a:hover {
	background-color: #f4f4f4;
}
.link-area ul li a.active {
	background-color: #f4f4f4;
	cursor: default;
}

/*---テーブル---*/

.tbl-std{
	width: 100%;
}
.tbl-std th, .tbl-std td{
	padding: 15px;
	border: 1px solid #ddd;
	background: #fff;
}
.tbl-std th{
	background: #f4f4f4;
}

.tbl-std th{
	width: 20%;
	text-align: left;
}

.bdr-bottom-none {
	border-bottom: none !important;
}

.bdr-right-none {
	border-right: none !important;
}

.bdr-left-none {
	border-left: none !important;
}

@media only screen and (max-width:480px){
	.tbl-std{
		margin: 0 -10px ;
		width:100% ;
	}
    .tbl-std th,
    .tbl-std td{
		padding: 5px 15px;
		width: 100% ;
        display: block;
		border-top: none;
    }
	.tbl-std tr:first-child th{
		border-top: 1px solid #ddd;
	}
}

.v-align-top{
	vertical-align:top;
}

/* ---テキスト--- */
.col-white{
	color: white;
}

.col-red{
	color: #F00;
}

.col-normal {
	color:#000 !important;
}

.font75 {
	font-size:75%;
}

.font80 {
	font-size:80%;
}

.font90 {
	font-size:90%;
}

.second-indent-1em {
	padding-left:1em;
	text-indent:-1em;
}

.second-indent {
	padding-left:1.5em;
	text-indent:-1.5em;
}

.txt-center {
	text-align:center !important;
	
}

.txt-left {
	text-align:left !important;
}

.suptext {
	font-size: 80%;
	vertical-align: top;
	position: relative;
	top: -0.1em;
}

.subtext {
	font-size: 80%;
	vertical-align: bottom;
	position: relative;
	top: 0.1em;
}

/* ---背景--- */

.bg-blue{
	background: #f0f9fd;
}

.bg-gray{
	background: #edeff1;
}
.bg-white{
	background: #fff;
}

/* ---width--- */
.width-1000{
	width: 1000px;
}
.width-900{
	width: 900px;
}
.width-700{
	width: 700px;
}
.width-200{
	width: 200px;
}


/* ---マージン設定--- */
.mgn0-auto{
	margin: 0 auto;
}
.mgn0 {
	margin: 0 !important;
}
.mgn-top-0 {
	margin-top: 0 !important;
}
.mgn-top-5 {
	margin-top: 5px !important;
}
.mgn-top-10 {
	margin-top: 10px !important;
}
.mgn-top-20 {
	margin-top: 20px !important;
}
.mgn-top-30 {
	margin-top: 30px !important;
}
.mgn-top-40 {
	margin-top: 40px !important;
}
.mgn-top-45 {
	margin-top: 45px !important;
}
.mgn-right-0 {
	margin-right: 0 !important;
}
.mgn-right-10 {
	margin-right: 10px !important;
}
.mgn-right-20 {
	margin-right: 20px !important;
}
.mgn-right-30 {
	margin-right: 30px !important;
}
.mgn-right-40 {
	margin-right: 40px !important;
}
.mgn-right-50 {
	margin-right: 50px !important;
}
.mgn-right-60 {
	margin-right: 60px !important;
}
.mgn-right-70 {
	margin-right: 70px !important;
}
.mgn-right-80 {
	margin-right: 80px !important;
}
.mgn-right-100 {
	margin-right: 100px !important;
}
.mgn-bottom-0 {
	margin-bottom: 0 !important;
}
.mgn-bottom-5 {
	margin-bottom: 5px !important;
}
.mgn-bottom-10 {
	margin-bottom: 10px !important;
}
.mgn-bottom-15 {
	margin-bottom: 15px !important;
}
.mgn-bottom-20 {
	margin-bottom: 20px !important;
}
.mgn-bottom-30 {
	margin-bottom: 30px !important;
}
.mgn-bottom-40 {
	margin-bottom: 40px !important;
}
.mgn-bottom-50 {
	margin-bottom: 50px !important;
}
.mgn-bottom-60 {
	margin-bottom: 60px !important;
}
.mgn-bottom-70 {
	margin-bottom: 70px !important;
}
.mgn-bottom-80 {
	margin-bottom: 80px !important;
}
.mgn-bottom-90 {
	margin-bottom: 90px !important;
}
.mgn-left-0 {
	margin-left: 0 !important;
}
.mgn-left-5 {
	margin-left: 5px !important;
}
.mgn-left-10 {
	margin-left: 10px !important;
}
.mgn-left-15 {
	margin-left: 15px !important;
}
.mgn-left-20 {
	margin-left: 20px !important;
}
.mgn-left-30 {
	margin-left: 30px !important;
}
.mgn-left-40 {
	margin-left: 40px !important;
}
.mgn-left-50 {
	margin-left: 50px !important;
}
.mgn-left-60 {
	margin-left: 60px !important;
}
.mgn-left-70 {
	margin-left: 70px !important;
}
.mgn-left-80 {
	margin-left: 80px !important;
}

.mgn-0-auto {
	margin:0 auto !important;
}

/*---padding設定---*/
.pdg-top-0 {
	padding-top: 0 !important;
}
.pdg-top-5 {
	padding-top: 5px !important;
}
.pdg-top-30 {
	padding-top: 30px !important;
}
.pdg-top-50 {
	padding-top: 50px !important;
}
.pdg-top-60 {
	padding-top: 60px !important;
}
.pdg-top-70 {
	padding-top: 70px !important;
}
.pdg-top-80 {
	padding-top: 80px !important;
}
.pdg-top-90 {
	padding-top: 90px !important;
}
.pdg-top-100 {
	padding-top: 100px !important;
}
.pdg-top-110 {
	padding-top: 110px !important;
}
.pdg-top-120 {
	padding-top: 120px !important;
}
.pdg-bottom-0 {
	padding-bottom: 0 !important;
}
.pdg-bottom-50 {
	padding-bottom: 50 !important;
}
.pdg-left-0 {
	padding-left: 0 !important;
}
.pdg-right-0{
	padding-right:0 !important;
}
.pdg-right-15{
	padding-right:15px !important;
}
.pdg-right-40 {
	padding-right:40px !important;
}

.pdg-0{
	padding:0 !important;
}

.pdg-5{
	padding:5px !important;
}

.pdg-10{
	padding:10px !important;
}


/*SP*/

@media (max-width: 600px) {
	.main-img{
		display: none;
	}
	section{
		width: 100% !important;
	}
	*[class*="mgn-"] {
		margin-top: 0 !important;
		margin-right: 0 !important;
		margin-bottom: 0 !important;
		margin-left: 0 !important;
	}
	.header-top{
		width: 100%;
		height:46px;
	}
	.header-top h1 img{
		width: 80%;
		position: absolute;
		top: 0;
		left: 0;
	}
	.header-top-h1 img{
		width: 80%;
		position: absolute;
		top: 0;
		left: 0;
	}
	.header-top ul{
		display: none;
	}
	body{
		font-size: 14px;
		line-height:1.5em;
	}
	.h1-area{
	    margin:0 auto;	
		height: 90px;
	}
	.h1-area p{
		font-size: 10px;
		top: 15%;
	}
	.h1-area p span{
		padding: 0 10px 0 10px;
	}
	.h1-area h1{
		font-size: 20px;
	}
	.h2-std{
		padding: 15px 10px 10px 10px;
		font-size: 16px;
		line-height: 1.5em;	
	}
	.h3-std{
		font-size: 17px;
		border-left: 8px solid #0080cc;
	}
	.nav-sub-area{
		display: none;
	}
	.topic-path{
		padding-top: 10px;
		font-size: 12px;
		width: 100%;
	}
	.link-area{
		margin-top: 8% !important;
		margin-left: 5% !important;
		margin-right: 0% !important;
		margin-bottom: 8% !important;
		width: 90%;
	}
	.link-area ul li a{
		padding: 3px 5px;
		font-size: 12px;
		margin: 0 7px 7px 0;
	}
	.p-std{
		margin: 2% 5% 8% 5%; 
		margin-left: 5% !important;
		margin-right: 5% !important;
		margin-bottom: 8% !important;
		font-size: 14px;
		line-height: 1.5em;	
	}
	.contact{
		margin: 0 5%;
		height: 80px;
		width: 90%;
	}
	.contact-btn{
		padding: 7px 20px 7px 50px;
		background-size: 20px;
		background-position: left 18px center;
		font-size:14px;
	}
	.contact-btn:hover{
		background-position: left 18px center;
		background-size: 20px;
}
	/*footer*/
	.sns{
		padding: 20px 0 0 0; 
		margin: 0 15%;
		width: 70%;
	}
	.sns li{
		margin: 0 4%;
		width: 25%;
	}
	.sns li img{
		width: 90%;
	}
	.link{
		padding: 2% 5%;
		margin-bottom: 20px;
		width: 90%;
		height: 50px;
	}
	.link li{
		margin: 0 5px 5px 5px;
		font-size: 75%;
	}
	.copyright{
		text-align: left;
		font-size: 80%;
	}
	p.gotop a{
    width:31px;
    height:31px;
	background-size:31px;
	text-decoration: none;
}
}

@media only screen
 and (min-device-width: 320px)
 and (min-height:400px)
 and (max-height: 560px)
 and (max-device-width: 568px)
 {
	.main-img{
		display: none;
	}
	section{
		width: 100% !important;
	}
	*[class*="mgn-"] {
		margin-top: 0 !important;
		margin-right: 0 !important;
		margin-bottom: 0 !important;
		margin-left: 0 !important;
	}
	.header-top{
		width: 100%;
		height:46px;
	}
	.header-top-h1 img{
		width: 80%;
		position: absolute;
		top: 0;
		left: 0;
	}
	.header-top ul{
		display: none;
	}
	body{
		font-size: 14px;
		line-height:1.5em;
	}
	.h1-area{
	    margin:0 auto;	
		height: 90px;
	}
	.h1-area p{
		font-size: 10px;
		top: 15%;
	}
	.h1-area p span{
		padding: 0 10px 0 10px;
	}
	.h1-area h1{
		font-size: 20px;
	}
	.h2-std{
		padding: 15px 10px 10px 10px;
		font-size: 16px;
		line-height: 1.5em;	
	}
	.h3-std{
		font-size: 17px;
		border-left: 8px solid #0080cc;
	}
	.nav-sub-area{
		display: none;
	}
	.topic-path{
		padding-top: 10px;
		font-size: 12px;
		width: 100%;
	}
	.link-area{
		margin-top: 8% !important;
		margin-left: 5% !important;
		margin-right: 0% !important;
		margin-bottom: 8% !important;
		width: 90%;
	}
	.link-area ul li a{
		padding: 3px 5px;
		font-size: 12px;
		margin: 0 7px 7px 0;
	}
	.p-std{
		margin: 2% 5% 8% 5%; 
		margin-left: 5% !important;
		margin-right: 5% !important;
		margin-bottom: 8% !important;
		font-size: 14px;
		line-height: 1.5em;	
	}
	.contact{
		margin: 0 5%;
		height: 80px;
		width: 90%;
	}
	.contact-btn{
		padding: 7px 20px 7px 50px;
		background-size: 20px;
		background-position: left 18px center;
		font-size:14px;
	}
	.contact-btn:hover{
		background-position: left 18px center;
		background-size: 20px;
}
	/*footer*/
	.sns{
		padding: 20px 0 0 0; 
		margin: 0 15%;
		width: 70%;
	}
	.sns li{
		margin: 0 4%;
		width: 25%;
	}
	.sns li img{
		width: 90%;
	}
	.link{
		padding: 2% 5%;
		margin-bottom: 20px;
		width: 90%;
		height: 50px;
	}
	.link li{
		margin: 0 5px 5px 5px;
		font-size: 75%;
	}
	.copyright{
		text-align: left;
		font-size: 80%;
	}
	p.gotop a{
    width:31px;
    height:31px;
	background-size:31px;
	text-decoration: none;
}
 }
 