/*全体
--------------------------------------------------------------------------*/
html {
  font-size: 62.5%;
}
@media only screen and (max-width: 1024px) {
html {
  font-size: 50%;
}
}
@media only screen and (max-width: 768px) {
html {
  font-size: 45%;
}
}

body {
	margin: 0;
	padding: 0;
	COLOR: #111;
	font-size: 1.6rem;
/* font-family: "メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック"; */
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	LINE-HEIGHT: 150%;
	text-align: center;
	background: #fff;
}

/*paddingとborderをwidthに含める*/
* {
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }

#con{
    width:100%;
	height:auto;
	margin:0px auto;
	padding:0;
	position:relative;
	text-align: center;
}

/*page-top用*/
.clearfix:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

img{
	border:0;
}

a:link,a:visited{
	outline:0;
	color:#3f8dee;
}

a:hover{
	outline:0;
	color: #1a5585;
}

a:hover img {
  opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: "alpha(opacity=80)";
}

br.sp{
	display:inherit;
}
br.spt{
	display:inherit;
}
br.spm{
	display:inherit;
}
br.sm{
	display:none;
}
br.smt{
	display:none;
}
br.smm{
	display:none;
}
.nsp{
	display:inherit;
}
.nst{
	display:none;
}
.nss{
	display:none;
}
@media only screen and (max-width: 768px) {
br.sp{
	display:none;
}
br.spt{
	display:inherit;
}
br.spm{
	display:none;
}
br.sm{
	display:inherit;
}
br.smt{
	display:inherit;
}
br.smm,.smm{
	display:none;
}
.nsp{
	display:none;
}
.nst{
	display:inherit;
}
.nss{
	display:none;
}
}
@media only screen and (max-width: 479px) {
br.smm{
	display:inherit;
}
}

/*ヘッダ
--------------------------------------------------------------------------*/
header{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
/* background: url(image/header-back.png) no-repeat right top/90%; */
border-top:5px solid #56a8e9;
}
@media only screen and (max-width: 479px) {
header{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
background: url(image/header-back.png) no-repeat right top/65%,#fff;
border-top:5px solid #56a8e9;
border-bottom: 5px solid #1a5585;
}
}
#header-left{
	clear: both;
	float: left;
	width: 50%;
	height: auto;
	margin: 0 0 0 5%;
	/* padding: 50px 0 50px; */
	padding: 20px 0 20px;
	text-align: left;
}
#header-right{
float: right;
width: 40%;
height: auto;
margin: 0 5% 0 0;
padding: 20px 0 0;
text-align: right;
}
@media only screen and (max-width: 768px) {
#header-left{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 10px 0 10px 3%;
text-align: left;
}
#header-left img{
max-width: 60%;
}
#header-right{
clear: both;
float: right;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: center;
position: relative;
}
}
#header-right ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: right;
}
#header-right li{
display: inline;
list-style-type: none;
font-size: 1.5rem;
margin: 0 0 0 2%;
padding: 0 0 0 20px;
background: url(image/header-right-li.png) no-repeat left center;
text-shadow: 0px 0px 3px #fff,0px 0px 3px #fff,0px 0px 3px #fff,0px 0px 3px #fff;
}
#header-right ul a:link,#header-right ul a:visited{
color: #111;
text-decoration: none;
}
#header-right ul a:hover{
text-decoration: underline;
}
@media only screen and (max-width: 768px) {
#header-right ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: right;
border-top:1px solid #56a8e9;
border-left:1px solid #56a8e9;
}
#header-right li{
float: left;
width: 30%;
display: inline;
list-style-type: none;
font-size: 13px;
margin: 0;
padding: 10px 0;
background: none;
text-shadow: none;
border-bottom:1px solid #56a8e9;
border-right:1px solid #56a8e9;
text-align: center;
}
#header-right li.bno{
width: 40%;
}
#header-right ul a:link,#header-right ul a:visited{
color: #111;
text-decoration: none;
}
#header-right ul a:hover{
text-decoration: underline;
}
}

#google-search{
	/* clear: both; */
	float: right;
	width: 30%;
	height: auto;
	margin:5px 20px 0;
	padding: 0;
}
@media only screen and (max-width: 1024px) {
	#google-search{
		/* clear: both; */
		float: right;
		width: 50%;
		height: auto;
		margin:5px 20px 0;
		padding: 0;
	}
}
@media only screen and (max-width: 768px) {
#google-search{
clear: both;
float: left;
width: 70%;
height: auto;
margin:5px 0 0;
padding: 0 1%;
}
}

#google-search * {
    box-sizing: border-box;
}
#google-search .gsc-control-cse {
    background: none;
    border: none;
    padding: 0;
}
#google-search table.gsc-search-box {
    height: 31px;
    margin-bottom: 0;
}
@media only screen and (max-width: 768px) {
#google-search table.gsc-search-box {
    height: 50px;
    margin-bottom: 0;
}
}
#google-search td.gsc-input {
    height: 100%;
    padding-right: 0!important;
}
#google-search .gsc-input-box {
    border: 1px solid #999;
    border-radius: 0;
    height: 100%;
    padding: 0;
}
#google-search table.gsc-input {
    height: 100%;
}
#google-search .gsib_a {
    height: 100%;
    padding: 0 10px;
}
#google-search input.gsc-input {
    display: block;
    font-size: 16px;
    height: 100%!important;
    -webkit-appearance: none;
}
#google-search .gsib_b {
    height: 100%;
}
#google-search .gsst_b {
    height: 100%;
    padding: 0;
}
#google-search .gsst_a {
    display: block;
    height: 100%;
    padding: 0;
    text-decoration: none;
}
#google-search .gscb_a {
    align-items: center;
    color: #1a5585!important;
    display: flex;
    font-size: 24px;
    height: 100%;
    justify-content: center;
    line-height: 1;
    width: 29px;
}
#google-search td.gsc-search-button {
    height: 100%;
}
#google-search .gsc-search-button-v2 {
    align-items: center;
    background: #56a8e9;
    border: none;
    border-radius: 0;
    display: flex;
    height: 100%;
    justify-content: center;
    margin-left: 0;
    padding: 0;
    width: 31px;
}
@media only screen and (max-width: 768px) {
#google-search .gsc-search-button-v2 {
    align-items: center;
    background: #56a8e9;
    border: none;
    border-radius: 0;
    display: flex;
    height: 100%;
    justify-content: center;
    margin-left: 0;
    padding: 0;
    width: 50px;
}
}
#google-search .gsc-search-button-v2:hover {
    background: #1a5585;
	cursor : pointer;
}
#google-search .gsc-search-button-v2:focus{
    background: #1a5585;
    border: none;
    border-radius: 0;
    box-shadow: none;
    outline: none;
}
#google-search .gsc-search-button-v2 svg {
    display: block;
    height: 13px;
    width: 13px;
}

#member,#member2{
clear: both;
float: right;
width: 30%;
height: auto;
margin: 4px 0 0;
padding:0 ;
background: #ffd170;
border: 1px solid #111;
text-align: center;
}
#member2{
float: none;
margin: 5px auto 50px;
}
@media only screen and (max-width: 768px) {
#member,#member2{
display: none;
clear: both;
float: right;
width: 30%;
height: auto;
margin: 5px 0 0;
padding:0 ;
background: #ffd170;
border: 1px solid #111;
text-align: center;
}
#member2{
float: none;
margin: 5px auto 30px;
}
}
#member a:link,#member a:visited,#member2 a:link,#member2 a:visited{
display: block;
padding: 10px 0 7px;
text-decoration: none;
color: #111;
font-size: 1.5rem;
line-height: 100%;
}
#member a:hover,#member2 a:hover{
font-weight: bold;
}
@media only screen and (max-width: 768px) {
#member a:link,#member a:visited,#member2 a:link,#member2 a:visited{
display: block;
padding: 10px 0 7px;
text-decoration: none;
color: #111;
font-size: 13px;
line-height: 100%;
}
}

/*メニュー
--------------------------------------------------------------------------*/
menu{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
background: #f7f5f0;
}
menu ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
menu ul li{
float: left;
/* width: 15.5%; */
width: 13.5%;
font-size: 1.5rem;
text-align: center;
line-height: 100%;
margin: 0;
padding: 0;
list-style-type: none;
background: url(image/menu-back.png) no-repeat right center;
}
menu ul li.mtop{
width: 7%;
}
menu li.bno{
	width:10%;
	background: none;
}
menu li a{
display: block;
padding: 30px 0 25px;

}
menu li a:link,menu li a:visited{
text-decoration: none;
color: #111;
}
menu li a:hover{
text-decoration: underline;
}

/*ドロップダウンメニュー*/
/*2階層目以降は横並びにしない*/
menu ul ul{
  display: block;
  float: none;
}
menu ul ul li{
width: auto;
background: none;
font-size: 1.3rem;
text-align: left;
padding: 0;
}
menu ul li.has-child3 li{
text-align: center;
}
@media only screen and (max-width: 1024px) {
menu ul ul li{
width: auto;
background: none;
font-size: 13px;
text-align: left;
padding: 0;
}
}
@media only screen and (max-width: 768px) {
menu ul ul li{
width: auto;
background: none;
font-size: 1em;
text-align: left;
padding: 0;
}
}
/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
menu ul li{
  position: relative;
}
/*ナビゲーションのリンク設定*/
menu ul li a{
  display: block;
  text-decoration: none;
  color: #999;
  padding:20px 10px;
  transition:all .3s;
}
@media only screen and (max-width: 768px) {
menu ul li a{
  display: block;
  text-decoration: none;
  color: #fff;
  padding:15px 10px;
  transition:all .3s;
}
}
menu ul li li a{
  padding:15px 10px 15px 20px;
  line-height: 120%;
}
@media only screen and (max-width: 768px) {
menu ul li li a{
  padding:15px 10px 15px 35px;
  line-height: 120%;
}
}
/*==矢印の設定*/
/*2階層目を持つliの矢印の設定*/
menu ul li.has-child::before{
  content:'';
  position: absolute;
  left:15px;
  top:23px;
  width:6px;
  height:6px;
  border-top: 2px solid #999;
    border-right:2px solid #999;
    transform: rotate(135deg);
}
@media only screen and (max-width: 1024px) {
menu ul li.has-child::before{
  content:'';
  position: absolute;
  left:15px;
  top:20px;
  width:6px;
  height:6px;
  border-top: 2px solid #999;
    border-right:2px solid #999;
    transform: rotate(135deg);
}
}
@media only screen and (max-width: 768px) {
menu ul li.has-child::before{
  content:'';
  position: absolute;
  left:15px;
  top:17px;
  width:6px;
  height:6px;
  border-top: 2px solid #fff;
    border-right:2px solid #fff;
    transform: rotate(135deg);
}
}
/*3階層目を持つliの矢印の設定*/
menu ul ul li.has-child::before,menu ul ul li.has-child3::before{
  content:'';
  position: absolute;
  left:5px;
  top:17px;
  width:6px;
  height:6px;
    border-top: 2px solid #111;
    border-right:2px solid #111;
    transform: rotate(45deg);
}
menu ul ul li.has-child2::before{
  left:0;
  top:0;
  width:0;
  height:0;
    border-top: none;
    border-right:none;
}
@media only screen and (max-width: 768px) {
menu ul ul li.has-child::before{
  content:'';
  position: absolute;
  left:5px;
  top:18px;
  width:6px;
  height:6px;
    border-top: 2px solid #111;
    border-right:2px solid #111;
    transform: rotate(45deg);
}
}
/*== 2・3階層目の共通設定 */
/*下の階層を持っているulの指定*/
menu li.has-child ul,menu li.has-child2 ul,menu li.has-child3 ul{
    /*絶対配置で位置を指定*/
  position: absolute;
  left:0;
  top:62px;
  z-index: 4;
    /*形状を指定*/
  background:#fff;
  width:100%;
    /*はじめは非表示*/
  visibility: hidden;
  opacity: 0;
    /*アニメーション設定*/
  transition: all .3s;
  border: 1px solid #111;
}
menu li.has-child2 ul{
display: none;
}
menu li.has-child ul li,menu li.has-child3 ul li{
display: block;
width: 100%;
}
menu li.has-child3 ul li{
width: 50%;
}
/*hoverしたら表示*/
menu li.has-child:hover > ul,menu li.has-child3:hover > ul,
menu li.has-child ul li:hover > ul,menu li.has-child3 ul li:hover > ul,
menu li.has-child:active > ul,menu li.has-child3:active > ul,
menu li.has-child ul li:active > ul,menu li.has-child3 ul li:active > ul{
  visibility: visible;
  opacity: 1;
}
/*ナビゲーションaタグの形状*/
menu li.has-child ul li a,menu li.has-child3 ul li a{
  color: #111;
  border-bottom:solid 1px #ccc;
}
menu li.has-child3 ul li a{
  border-right:solid 1px #ccc;
}
menu li.has-child ul li:last-child a,menu li.has-child3 ul li:last-child a{
  border-bottom:none;
}
menu li.has-child ul li a:hover,menu li.has-child3 ul li a:hover,
menu li.has-child ul li a:active,menu li.has-child3 ul li a:active{
  background:#eee;
}
/*==3階層目*/
/*3階層目の位置*/
menu li.has-child ul ul,menu li.has-child3 ul ul{
  top:0;
  left:100%;
  background:#fff;
}
menu li.has-child ul ul li a:hover,menu li.has-child3 ul ul li a:hover,
menu li.has-child ul ul li a:active,menu li.has-child3 ul ul li a:active{
  background:#eee;
}
/*==768px以下の形状*/
@media screen and (max-width:768px){
  menu{
    padding: 0;
  }
  menu ul{
    display: block;
  }
  menu li.has-child ul,
  menu li.has-child ul ul{
    position: relative;
  left:0;
  top:0;
  width:100%;
  visibility:visible;/*JSで制御するため一旦表示*/
  opacity:1;/*JSで制御するため一旦表示*/
  display: none;/*JSのslidetoggleで表示させるため非表示に*/
  transition:none;/*JSで制御するためCSSのアニメーションを切る*/
  border: none;
}
menu ul li a{
  border-bottom:1px solid #ccc;
}
/*矢印の位置と向き*/
menu ul li.has-child::before,menu ul li.has-child3::before{
  left:20px;
}
menu ul li.has-child3::before{
display: none;
}
menu ul ul li.has-child::before,menu ul ul li.has-child3::before{
    transform: rotate(135deg);
  left:20px;
}
menu ul li.has-child.active::before,menu ul li.has-child3.active::before{
    transform: rotate(-45deg);
}
}

@media only screen and (max-width: 768px) {
menu ul li{
float: left;
width: 100%;
font-size: 1.2em;
text-align: center;
line-height: 100%;
margin: 0;
padding: 0;
list-style-type: none;
background: none;
background: #56a8e9;
}
menu ul li.mtop{
width: 100%;
}
menu li.bno{
	width:100%;
	background: #56a8e9;
}
menu li a{
display: block;
padding: 5px 0 5px;

}
menu li a:link,menu li a:visited{
text-decoration: none;
color: #fff;
}
menu li a:hover{
text-decoration: underline;
}
menu ul ul{
  display: block;
  float: left;
  width: 100%;
  background: #eee;
}
menu ul ul li{
background: #eee;
}
menu ul ul ul li{
background: #fff;
}
}

@media only screen and (max-width: 768px) {
/*==================================================
　5-2-4 MENUがCLOSEに
===================================*/

/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn4{
float: right;
  position: inherit;/*ボタン内側の基点となるためrelativeを指定*/
  background:#56a8e9;
  cursor: pointer;
    width: 50px;
    height:50px;
  border-radius: 5px;
  top:5px;
  right:10px;
  z-index: 999;
}

/*ボタン内側*/
.openbtn4 span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 14px;
    height: 2px;
    border-radius: 5px;
  background: #fff;
    width: 45%;
  }

.openbtn4 span:nth-of-type(1) {
  top:13px;
}

.openbtn4 span:nth-of-type(2) {
  top:19px;
}

.openbtn4 span:nth-of-type(3) {
  top:25px;
}

.openbtn4 span:nth-of-type(3)::after {
  content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
  position: absolute;
  top:4px;
  left:-3px;
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
  font-family: "メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
}

/*activeクラスが付与されると線が回転して×になり、Menu⇒Closeに変更*/
.openbtn4.active{
  background:#1a5585;
}

.openbtn4.active span:nth-of-type(1) {
    top: 14px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn4.active span:nth-of-type(2) {
  opacity: 0;
}

.openbtn4.active span:nth-of-type(3){
    top: 26px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}

.openbtn4.active span:nth-of-type(3)::after {
  content:"Close";/*3つ目の要素のafterにClose表示を指定*/
    transform: translateY(0) rotate(-45deg);
  top:4px;
  left:2px;
}
/*.doneクラスがついたヘッダー*/
.dnone {
display: none;
}
/*メニューボタンをクリックした際に付与されるpanelactiveクラスがついたら*/
.dnone.panelactive {
display: inherit;
}
}

/*メイン
--------------------------------------------------------------------------*/
#top-info{
	clear: both;
	float: left;
	width: 100%;
	/* height: auto; */
	/* margin: 0 0 10px; */
	/* padding: 60px 0 60px; */
	border-top:15px solid #1a5585;
	text-align: center;
	/* background: url(image/top-info.png) no-repeat center center/35%,#56a8e9; */
}
@media only screen and (max-width: 1024px) {
	#top-info{
		clear: both;
		float: left;
		width: 100%;
		/* height: auto;
		margin: 0 0 10px;
		padding: 40px 0 40px; */
		border-top:15px solid #1a5585;
		text-align: center;
		/* background: url(image/top-info.png) no-repeat center center/40%,#56a8e9; */
	}
}
@media only screen and (max-width: 768px) {
	#top-info{
		clear: both;
		float: left;
		width: 100%;
		/* height: auto;
		margin: 0 0 10px;
		padding: 40px 0 40px; */
		border-top:15px solid #1a5585;
		text-align: center;
		/* background: url(image/top-info.png) no-repeat center center/50%,#56a8e9; */
	}
}
@media only screen and (max-width: 479px) {
	#top-info{
		clear: both;
		float: left;
		width: 100%;
		/* height: auto;
		margin: 0 0 10px;
		padding: 30px 0 30px; */
		border-top:15px solid #1a5585;
		text-align: center;
		/* background: url(image/top-info.png) no-repeat center center/80%,#56a8e9; */
	}
}
#top-info.sub-cate1{
/* padding: 50px 0 50px;
background: url(image/top-info-cate1.png) no-repeat right top/60%,#56a8e9; */
}
#top-info.sub-cate2{
/* padding: 50px 0 50px;
background: url(image/top-info-cate2.png) no-repeat right top/60%,#56a8e9; */
}
#top-info.sub-cate3{
/* padding: 50px 0 50px;
background: url(image/top-info-cate3.png) no-repeat right top/60%,#56a8e9; */
}
#top-info.sub-cate4{
/* padding: 50px 0 50px;
background: url(image/top-info-cate4.png) no-repeat right top/60%,#56a8e9; */
}
#top-info.sub-cate5{
/* padding: 50px 0 50px;
background: url(image/top-info-cate5.png) no-repeat right top/60%,#56a8e9; */
}
#top-info.sub-cate6{
/* padding: 50px 0 50px;
background: url(image/top-info-cate6.png) no-repeat right top/60%,#56a8e9; */
}
#top-info.sub-cate7{
/* padding: 50px 0 50px;
background: url(image/top-info-cate7.png) no-repeat right top/60%,#56a8e9; */
}
#top-info.sub-cate8{
/* padding: 50px 0 50px;
background: url(image/top-info-cate8.png) no-repeat right top/60%,#56a8e9; */
}
#top-info.sub-cate1 h1,#top-info.sub-cate2 h1,#top-info.sub-cate3 h1,#top-info.sub-cate4 h1,#top-info.sub-cate5 h1,#top-info.sub-cate6 h1,#top-info.sub-cate7 h1,#top-info.sub-cate8 h1{
	clear: both;
	width: 1000px;
	height:auto;
	margin: 0 auto;
	padding: 0;
	text-align: left;
	/* color: #fff; */
	color:#56a8e9;
	font-weight: normal;
	line-height: 100%;
	font-size: 4.5rem;

}
@media only screen and (max-width: 1024px) {
	#top-info.sub-cate1{
		/* padding: 50px 0 50px;
		background: url(image/top-info-cate1.png) no-repeat right top/contain,#56a8e9; */
	}
	#top-info.sub-cate2{
		/* padding: 50px 0 50px;
		background: url(image/top-info-cate2.png) no-repeat right top/contain,#56a8e9; */
	}
	#top-info.sub-cate3{
		/* padding: 50px 0 50px;
		background: url(image/top-info-cate3.png) no-repeat right top/contain,#56a8e9; */
	}
	#top-info.sub-cate4{
		/* padding: 50px 0 50px;
		background: url(image/top-info-cate4.png) no-repeat right top/contain,#56a8e9; */
	}
	#top-info.sub-cate5{
		/* padding: 50px 0 50px;
		background: url(image/top-info-cate5.png) no-repeat right top/contain,#56a8e9; */
	}
	#top-info.sub-cate6{
		/* padding: 50px 0 50px;
		background: url(image/top-info-cate6.png) no-repeat left top/170%,#56a8e9; */
	}
	#top-info.sub-cate7{
		/* padding: 50px 0 50px;
		background: url(image/top-info-cate7.png) no-repeat left top/170%,#56a8e9; */
	}
	#top-info.sub-cate8{
		/* padding: 50px 0 50px;
		background: url(image/top-info-cate8.png) no-repeat left top/170%,#56a8e9; */
	}
	#top-info.sub-cate1 h1,#top-info.sub-cate2 h1,#top-info.sub-cate3 h1,#top-info.sub-cate4 h1,#top-info.sub-cate5 h1,#top-info.sub-cate6 h1{
		clear: both;
		width: 100%;
		height:auto;
		margin: 0 auto;
		padding: 0 0 0 3%;
		text-align: left;
		color: #fff;
		font-weight: normal;
		line-height: 100%;
		font-size: 4.0rem;
	}
}
@media only screen and (max-width: 498px) {
	#top-info.sub-cate1{
		/* padding: 50px 0 50px;
		background: url(image/top-info-cate1.png) no-repeat left top/170%,#56a8e9; */
	}
	#top-info.sub-cate2{
		/* padding: 50px 0 50px;
		background: url(image/top-info-cate2.png) no-repeat left top/170%,#56a8e9; */
	}
	#top-info.sub-cate3{
		/* padding: 50px 0 50px;
		background: url(image/top-info-cate3.png) no-repeat left top/170%,#56a8e9; */
	}
	#top-info.sub-cate4{
		/* padding: 50px 0 50px;
		background: url(image/top-info-cate4.png) no-repeat left top/170%,#56a8e9; */
	}
	#top-info.sub-cate5{
		/* padding: 50px 0 50px;
		background: url(image/top-info-cate5.png) no-repeat left top/170%,#56a8e9; */
	}
	#top-info.sub-cate6{
		/* padding: 50px 0 50px;
		background: url(image/top-info-cate6.png) no-repeat left top/170%,#56a8e9; */
	}
	#top-info.sub-cate7{
		/* padding: 50px 0 50px;
		background: url(image/top-info-cate7.png) no-repeat left top/170%,#56a8e9; */
	}
	#top-info.sub-cate8{
		/* padding: 50px 0 50px;
		background: url(image/top-info-cate8.png) no-repeat left top/170%,#56a8e9; */
	}
}

#sub-page{
clear: both;
width: 1000px;
height: auto;
margin: 0 auto;
padding: 0;
text-align: left;
}
@media only screen and (max-width: 1024px) {
#sub-page{
clear: both;
width: 100%;
height: auto;
margin: 0 auto;
padding: 0 3%;
text-align: left;
}
}
@media only screen and (max-width:479px) {
#sub-page{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 auto;
padding: 0 3%;
text-align: left;
background: rgba(255,255,255,0.5);
}
}

#sub-page img{
margin: 0 0 30px;
}
#sub-page li a img,#sub-page a img,#sub-page p img{
margin: 0 0 0 1%;
vertical-align: middle;
}
@media only screen and (max-width: 1024px) {
	#sub-page img{
		margin: 0 0 30px;
		max-width: 100%;
	}
}

#sub-nav{
	clear: both;
	float: left;
	width: 100%;
	height: auto;
	margin: 0 0 30px;
	padding: 0;
	text-align: left;
	font-size: 1.3rem;
}
@media only screen and (max-width: 1024px) {
#sub-nav{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 15px;
padding: 0 2%;
text-align: left;
font-size: 1em;
}
}
@media only screen and (max-width: 479px) {
#sub-nav{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 15px;
padding: 0;
text-align: left;
font-size: 1em;
}
}
#sub-nav a:link,#sub-nav a:visited{
color: #111;
}
#sub-nav a:hover{
font-weight: bold;
color: #1a5585;
}

#sub-title h1 {
	color:#56a8e9;
	padding-bottom: 1vw;
	border-bottom: 3px solid #56a8e9;
}

#sub-menu{
	clear: both;
	float: left;
	width: 100%;
	height: auto;
	/* margin: 0 0 100px; */
	margin: 0 0 20px;
	padding: 0;
}
@media only screen and (max-width: 1024px) {
	#sub-menu{
		clear: both;
		float: left;
		width: 100%;
		height: auto;
		/* margin: 0 0 50px; */
		margin: 0 0 20px;
		padding: 0 2%;
	}
}
#sub-menu ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
#sub-menu ul ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
#sub-menu li{
display: inline;
list-style-type: none;
color: #ccc;
font-size: 17px;
line-height: 120%;
margin: 0 1% 10px 0;
padding: 0;
font-weight: normal;
}
#sub-menu li ul li{
padding: 5px 1% 3px;
background: #56a8e9;
border-left:5px solid #1a5585;
font-size: 13px;
}
#sub-menu li ul ul li{
border-left:none;
}
@media only screen and (max-width: 768px) {
#sub-menu ul ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 0;
}
#sub-menu li{
display: block;
list-style-type: none;
color: #56a8e9;
font-size: 15px;
line-height: 120%;
margin: 0 1% 10px 0;
padding: 0;
font-weight: normal;
}
#sub-menu li ul li{
padding: 5px 1% 3px;
background: none;
border-left:none;
font-size: 13px;
}
}
#sub-menu li a:link,#sub-menu li a:visited{
font-size: 13px;
color: #fff;
padding: 0;
text-decoration: none;
font-weight: normal;
}
#sub-menu li a:hover{
font-weight: bold;
color: #ffd170;
}
#sub-menu ul ul li a:link,#sub-menu ul ul li a:visited{
background: none;
color: #56a8e9;
border-left:none;
padding: 0;
overflow: visible;
}
@media only screen and (max-width: 768px) {
#sub-menu li a:link,#sub-menu li a:visited{
font-size: 13px;
background: none;
color: #111;
padding: 0 0 0 10px;
text-decoration: underline;
border-left:5px solid #56a8e9;
font-weight: normal;
}
#sub-menu li a:hover{
font-weight: bold;
color: #1a5585;
}
#sub-menu ul ul li a:link,#sub-menu ul ul li a:visited{
background: none;
color: #56a8e9;
border-left:none;
padding: 0;
overflow: visible;
}
}

/*ドロップダウンメニュー*/
/*2階層目以降は横並びにしない*/
#sub-menu ul ul{
  display: block;
  float: none;
}
#sub-menu ul ul li{
width: auto;
background: none;
font-size: 13px;
text-align: left;
padding: 0;
margin: 0;
}
/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
#sub-menu ul li{
  position: relative;
}
/*ナビゲーションのリンク設定*/
#sub-menu ul li a{
  display:inline;
  text-decoration: none;
  color: #999;
  padding:0;
  transition:all .3s;
}
#sub-menu ul li li a{
  padding:0;
  line-height: 120%;
}
/*==矢印の設定*/
/*2階層目を持つliの矢印の設定*/
#sub-menu ul li.drop-sub{
padding: 5px 1% 3px 2.5%;
}
#sub-menu ul li.drop-sub::before{
  content:'';
  position: absolute;
  left:10px;
  top:10px;
  width:6px;
  height:6px;
  border-top: 2px solid #fff;
    border-right:2px solid #fff;
    transform: rotate(135deg);
}
@media only screen and (max-width: 768px) {
#sub-menu ul li.drop-sub::before{
display: none;
  content:'';
  position: absolute;
  left:15px;
  top:5px;
  width:6px;
  height:6px;
  border-top: 2px solid #fff;
    border-right:2px solid #fff;
    transform: rotate(135deg);
}
}
/*== 2・3階層目の共通設定 */
/*下の階層を持っているulの指定*/
#sub-menu li.drop-sub ul{
    /*絶対配置で位置を指定*/
  position: absolute;
  left:0;
  top:10px;
  z-index: 4;
    /*形状を指定*/
  background:#eee;
  width:auto;
      /*はじめは非表示*/
  visibility: hidden;
  opacity: 0;
  min-width: max-content;
    /*アニメーション設定*/
  transition: all .3s;
  padding: 0;
}
@media only screen and (max-width: 768px) {
#sub-menu li.drop-sub ul{
    /*絶対配置で位置を指定*/
  position: inherit;
  left:0;
  top:0;
  z-index: 4;
    /*形状を指定*/
  background:none;
  width:auto;
  visibility: inherit;
  opacity: 1;
  min-width: max-content;
    /*アニメーション設定*/
  transition: all .3s;
  margin: 0 0 20px;
  padding: 0 0 0 1em;
}
}
/*hoverしたら表示*/
#sub-menu li.drop-sub:hover > ul,
#sub-menu li.drop-sub ul li:hover > ul,
#sub-menu li.drop-sub:active > ul,
#sub-menu li.drop-sub ul li:active > ul{
  visibility: visible;
  opacity: 1;
}
/*ナビゲーションaタグの形状*/
#sub-menu ul li.drop-sub ul li {
display: block;
line-height: 250%;
padding: 0 15px;
border-bottom:solid 1px #ccc;
}
#sub-menu li.drop-sub ul li a{
  color: #111;
}
#sub-menu li.drop-sub ul li:last-child a{
  border-bottom:none;
}
#sub-menu li.drop-sub ul li a:hover,
#sub-menu li.drop-sub ul li a:active{
  background:#eee;
}
#sub-menu ul li.drop-sub a{
padding: 5px 0 5px 0;
}
#sub-menu ul li.drop-sub ul li a{
display: block;
padding: 10px 0;
line-height: 100%;
}
@media only screen and (max-width: 768px) {
#sub-menu ul li.drop-sub ul li {
display: block;
line-height: 100%;
padding: 0 0 0 15px;
border-bottom:none;
margin: 15px 0 0;
}
#sub-menu li.drop-sub ul li a{
  color: #111;
  border-bottom:none;
  line-height: 100%;
}
#sub-menu ul li.drop-sub a{
padding:0 0 0 10px;
line-height: 100%;
}
#sub-menu li.drop-sub ul li a:hover,
#sub-menu li.drop-sub ul li a:active{
  background:none;
}
#sub-menu ul li.drop-sub ul li a{
display: block;
padding: 0;
}
}

.title{
display: none;
}

@media only screen and (max-width: 768px) {
/*アコーディオン全体*/
.accordion-area{
clear: both;
float: left;
    list-style: none;
    width: 100%;
    margin:0 auto;
	padding: 0
}
#sub-menu .accordion-area p{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 5px;
padding: 10px 0 10px 35px;
text-align: left;
font-size: 2.0rem;
line-height: 100%;
text-indent: 0;
}
.accordion-area li{
    margin: 10px 0 0;
}
.accordion-area section {
clear: both;
width: 100%;
float: left;
  margin: 0;
  padding: 0;
}

/*アコーディオンタイトル*/
.title {
display: inherit;
    position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size:2rem;
    font-weight: normal;
    padding: 5px 3% 5px 35px;
    transition: all .5s ease;
	background: linear-gradient(#fff,#ccc);
	border: 1px solid #ddd;
	color: #111;
}
/*アイコンの＋と×*/
.title::before,
.title::after{
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: #56a8e9;
    }
.title::before{
    top:48%;
    left: 15px;
    transform: rotate(0deg);
    }
.title::after{
    top:48%;
    left: 15px;
    transform: rotate(90deg);
}

/*　closeというクラスがついたら形状変化　*/
.title.close::before{
  transform: rotate(45deg);
}
.title.close::after{
  transform: rotate(-45deg);
}

/*アコーディオンで現れるエリア*/
.box {
    display: none;/*はじめは非表示*/
	clear: both;
	width: 100%;
	height: auto;
  margin:0;
    padding: 10px 5% 0;
}
}

#photo{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
z-index: 1;
position: relative;
}

main{
	clear: both;
	float: left;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0 0 50px;
	/* background: url(image/main-back.png) repeat-x bottom center; */
}
@media only screen and (max-width: 1080px) {
	main{
		clear: both;
		float: left;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0 0 60px;
		/* background: url(image/main-back.png) repeat-x bottom center/80%; */
	}
}
@media only screen and (max-width: 768px) {
	main{
		clear: both;
		float: left;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0 0 60px;
		/* background: url(image/main-back.png) repeat-x bottom center/100%; */
	}
}
@media only screen and (max-width: 479px) {
	main{
		clear: both;
		float: left;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
		/* background: url(image/main-back.png) repeat-x bottom center/250%; */
	}
}
main p{
	margin:0 0 40px;
	padding:0;
	text-align:justify;
	text-justify:inter-ideograph;
}
strong{
font-size: 1.1em;
}

#top-topics{
	clear: both;
	float: left;
	/* width: 100%; */
	width: 49%;
	height: auto;
	margin: 40px 0 0 1%;
	padding: 0 1%;
}
@media only screen and (max-width: 768px) {
#top-topics{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 50px 0 0;
padding: 0;
}
}
@media only screen and (max-width: 479px) {
#top-topics{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 40px 0 0;
padding: 0;
}
}
#top-topics-box{
	clear: both;
	/* width: 1000px; */
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0;
}
@media only screen and (max-width: 1024px) {
#top-topics-box{
clear: both;
width: 100%;
height: auto;
margin: 0 auto;
padding: 0 5%;
}
}
#top-topics h1{
	clear: both;
	float: left;
	width: 100%;
	height: auto;
	/* margin: 0 0 50px; */
	margin: 0 0 30px;
	padding: 0;
	text-align: center;
	font-weight: normal;
	font-size:4.5rem;
	line-height: 120%;
	/* font-family: 'Kosugi Maru',"メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック"; */
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#top-topics h1 span{
font-size: 2.0rem;
line-height: 120%;
}
@media only screen and (max-width: 479px) {
#top-topics h1{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: center;
font-weight: normal;
font-size: 4.0rem;
line-height: 120%;
font-family: 'Kosugi Maru',"メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
}
#top-topics h1 span{
font-size: 2.0rem;
line-height: 120%;
}
}
#top-topics ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
#top-topics li{
	text-align: left;
	margin: 0 0 30px 0;
	padding: 0 0 0 30px;
	list-style-type: none;
	background: url(image/top-topics-li.png) no-repeat left center;
	line-height: 120%;
	font-size: 1.5rem;
}
@media only screen and (max-width: 1024px) {
#top-topics li{
text-align: left;
margin: 0 0 30px 1%;
padding: 0 0 0 30px;
list-style-type: none;
background: url(image/top-topics-li.png) no-repeat left center/2%;
font-size: 1.6rem;
}
}
@media only screen and (max-width: 479px) {
#top-topics li{
text-align: left;
margin: 0 0 20px 1%;
padding: 0 0 0 30px;
list-style-type: none;
background: url(image/top-topics-li.png) no-repeat left center/3%;
font-size: 1.6rem;
}
}
#top-topics li a:link,#top-topics li a:visited{
color: #111;
}
#top-topics li a:hover{
color: #3b4675;
font-weight: bold;
}
#top-topics-list{
clear: both;
float: left;
width: 30%;
height: auto;
margin: 40px 35% 0;
padding: 0;
font-size: 1.5rem;
}
@media only screen and (max-width: 479px) {
#top-topics-list{
clear: both;
float: left;
width: 50%;
height: auto;
margin: 20px 25% 0;
padding: 0;
}
}
#top-topics-list a{
display: block;
border:1px solid #111;
border-radius: 30px;
line-height: 100%;
}
#top-topics-list a:link,#top-topics-list a:visited{
text-decoration: none;
color: #111;
padding: 10px 0;
}
#top-topics-list a:hover{
background: #f7f5f0;
}

#top-news{
	/* clear: both; */
	float: left;
	/* width: 100%; */
	width: 49%;
	height: auto;
	/* margin: 40px 0 0 1%; */
	margin: 0 0 0 1%;
	padding: 40px 0 60px 1%;
	background: #f7f5f0;
}
@media only screen and (max-width: 768px) {
#top-news{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 50px 0 0;
padding: 50px 0 40px;
background: #f7f5f0;
}
}
@media only screen and (max-width: 479px) {
#top-news{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 40px 0 0;
padding: 40px 0 30px;
background: #f7f5f0;
}
}
#top-news-box{
	clear: both;
	/* width: 1000px; */
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0 1%;
}
@media only screen and (max-width: 1024px) {
#top-news-box{
clear: both;
width: 100%;
height: auto;
margin: 0 auto;
padding: 0 5%;
}
}
#top-news h1{
	clear: both;
	float: left;
	width: 100%;
	height: auto;
	/* margin: 0 0 50px; */
	margin: 0 0 30px;
	padding: 0;
	text-align: center;
	font-weight: normal;
	font-size: 4.5rem;
	line-height: 120%;
	color: #56a8e9;
	/* font-family: 'Kosugi Maru',"メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック"; */
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

}
#top-news h1 span{
font-size: 2.0rem;
line-height: 120%;
}
@media only screen and (max-width: 479px) {
#top-news h1{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: center;
font-weight: normal;
font-size: 4.0rem;
line-height: 120%;
color: #56a8e9;
font-family: 'Kosugi Maru',"メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
}
#top-news h1 span{
font-size: 2.0rem;
line-height: 120%;
}
}
#top-news dl{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
#top-news dt{
	clear: both;
	float: left;
	/* width: 15%; */
	width: 20%;
	height: auto;
	margin: 0 0 20px;
	padding: 0;
	line-height: 120%;
	font-size: 1.5rem;
	text-align: left;
}
#top-news dd{
float: left;
width: 73%;
height: auto;
margin: 0 0 20px 2%;
padding: 0;
text-align: left;
line-height: 120%;
font-size: 1.5rem;
}
@media only screen and (max-width: 479px) {
#top-news dt{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 5px;
padding: 0;
line-height: 120%;
font-size: 1.6rem;
text-align: left;
font-weight: bold;
}
#top-news dd{
float: left;
width: 100%;
height: auto;
margin: 0 0 25px;
padding: 0;
text-align: left;
line-height: 130%;
font-size: 1.6rem;
}
}
#top-news dd a:link,#top-news dd a:visited{
color: #111;
}
#top-news dd a:hover{
color: #3b4675;
font-weight: bold;
}
#top-news-list{
clear: both;
float: left;
width: 30%;
height: auto;
margin: 40px 35% 0;
padding: 0;
font-size: 1.5rem;
}
@media only screen and (max-width: 479px) {
#top-news-list{
clear: both;
float: left;
width: 50%;
height: auto;
margin: 20px 25% 0;
padding: 0;
}
}
#top-news-list a{
display: block;
border:1px solid #56a8e9;
border-radius: 30px;
background: #fff;
line-height: 100%;
}
#top-news-list a:link,#top-news-list a:visited{
text-decoration: none;
color: #111;
padding: 10px 0;
}
#top-news-list a:hover{
background: #f7f5f0;
}

#main-content{
	clear: both;
	width: 1000px;
	height: auto;
	margin: 0 auto;
	padding: 40px 0 0;
}
@media only screen and (max-width: 1024px) {
#main-content{
clear: both;
width: 100%;
height: auto;
margin: 0 auto;
padding: 60px 2% 0;
}
}
@media only screen and (max-width: 479px) {
#main-content{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 auto;
padding: 40px 2% 50px;
}
}
.content-box,.content-box2{
float: left;
width: 31.3%;
height: auto;
margin: 0 0 60px;
padding: 0 0 15px;
border:2px solid #eee;
border-bottom:5px solid #56a8e9;
background:linear-gradient(white, #eee);
}
.content-box2{
margin: 0 3% 30px;
}
#main-content img{
max-width: 100%;
}
@media only screen and (max-width: 768px) {
#main-content img{
max-width: 100%;
max-height: 150px;
}
}
@media only screen and (max-width: 479px) {
.content-box,.content-box2{
float: left;
width: 46%;
height: auto;
margin: 0 2% 40px;
padding: 0 0 5px;
border-bottom:5px solid #56a8e9;
}
.content-box2{
margin: 0 2% 40px;
}
#main-content img{
max-width: 100%;
max-height: 120px;
}
}
#main-content h2,#main-content .content-big h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 20px 0 0;
padding: 0;
text-align: center;
font-weight: normal;
line-height: 100%;
font-size: 2.0rem;
/* font-family: 'Kosugi Maru',"メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック"; */
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

}
#main-content .content-big h2,#main-content .content-big2 h2{
text-align: left;
margin: 20px 0 20px;
padding: 0 0 5px;
line-height: 110%;
border-bottom: 5px solid #ffd170;
}
#main-content h2 a:link,#main-content h2 a:visited{
color: #111;
text-decoration: none;
}
#main-content h2 a:hover{
color: #56a8e9;
}
@media only screen and (max-width: 1024px) {
#main-content h2,#main-content .content-big h2,#main-content .content-big2 h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 20px 0 0;
padding: 0;
text-align: center;
font-weight: normal;
line-height: 100%;
font-size: 2.5rem;
font-family: 'Kosugi Maru',"メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
}
#main-content .content-big h2,#main-content .content-big2 h2{
text-align: center;
margin: 10px 0 10px;
padding: 0 0 5px;
line-height: 110%;
border-bottom: 5px solid #ffd170;
}
}
@media only screen and (max-width: 479px) {
#main-content h2,#main-content .content-big h2,#main-content .content-big2 h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 10px 0 0;
padding: 0;
text-align: center;
font-weight: normal;
line-height: 100%;
font-size: 2.0rem;
font-family: 'Kosugi Maru',"メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
}
#main-content .content-big h2,#main-content .content-big2 h2{
text-align: left;
margin: 10px 0 10px;
padding: 0 0 5px;
line-height: 110%;
border-bottom: 5px solid #ffd170;
}
}

.content-big:hover,.content-big2:hover{
	background-color: #f7f5f0;
}

.content-big,.content-big2{
	float: left;
	width: 29%;
	height: auto;
	/* min-height: 350px; */
	min-height: 250px;
	margin: 0 3% 0 0;
	padding: 20px;
	border: 1px solid #111;
	background: #fff;
}

.content-big2{
	margin: 0 3% 0 3%;
}

@media only screen and (max-width: 1024px) {
	.content-big,.content-big2{
		float: left;
		/* width: 47%; */
		width: 94%;
		height: auto;
		/* min-height: 350px; */
		min-height: 250px;
		margin: 0 3% 3% 3%;
		padding: 20px;
		border: 1px solid #111;
		background: #fff;
	}
}

@media only screen and (max-width: 768px) {
	.content-big,.content-big2{
		float: left;
		width: 47%;
		height: auto;
		min-height: 330px;
		margin: 0 3% 3% 3%;
		padding: 20px;
		border: 1px solid #111;
		background: #fff;
	}
}
@media only screen and (max-width: 479px) {
	.content-big,.content-big2{
		float: left;
		width: 100%;
		height: auto;
		min-height: auto;
		margin: 0 0 3% 0;
		/* margin: 0; */
		padding: 20px;
		border: 1px solid #111;
		background: #fff;
	}
	/* .content-big2{
		display: none;
	} */
}
#main-content p{
text-align: left;
line-height: 180%;
font-size: 1.3rem;
margin: 0;
}
@media only screen and (max-width: 1024px) {
	#main-content p{
		text-align: left;
		line-height: 180%;
		font-size: 1.5rem;
		margin: 0;
	}
}

article{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0 2%;
text-align: center;
}

article img{
max-width: 100%;
}

article h1{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
text-align: center;
font-weight: bold;
font-size: 3.5rem;
line-height: 100%;
}
@media only screen and (max-width: 479px) {
article h1{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: center;
font-weight: bold;
font-size: 3.0rem;
line-height: 100%;
}
}
article h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 20px 0 ;
text-align: left;
line-height: 120%;
font-weight: normal;
font-size: 2.5rem;
border-top:5px solid #111;
border-bottom:1px solid #111;
}
@media only screen and (max-width: 479px) {
article h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 15px 0 ;
text-align: left;
line-height: 120%;
font-weight: normal;
font-size: 2.5rem;
border-top:5px solid #111;
border-bottom:1px solid #111;
}
}
article h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 15px 2% 10px;
text-align: left;
line-height: 120%;
font-weight: bold;
font-size:2.0rem;
background: #f7f5f0;
}
article h3.topspace{
margin: 50px 0 30px;
}
@media only screen and (max-width: 1024px) {
article h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 15px 2% 10px;
text-align: left;
line-height: 120%;
font-weight: bold;
font-size:2.2rem;
background: #f7f5f0;
}
}
article h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 10px 0 7px 10px;
text-align: left;
line-height: 120%;
font-weight: bold;
font-size: 1.8rem;
border-left:5px solid #56a8e9;
}
@media only screen and (max-width: 1024px) {
article h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 10px 0 7px 10px;
text-align: left;
line-height: 120%;
font-weight: bold;
font-size: 2.2rem;
border-left:5px solid #56a8e9;
}
}
article h5{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0 2%;
text-align: left;
line-height: 120%;
font-weight: normal;
font-size: 2.0rem;
border-bottom: 1px solid #333;
}
@media only screen and (max-width: 768px) {
article h5{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0 2%;
text-align: left;
line-height: 120%;
font-weight: normal;
font-size: 2.2rem;
border-bottom: 1px solid #333;
}
}
@media only screen and (max-width: 479px) {
article h5{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0 2%;
text-align: left;
line-height: 120%;
font-weight: normal;
font-size: 2.0rem;
border-bottom: 1px solid #333;
}
}
article h6{
clear: both;
float: left;
width: 95%;
height: auto;
margin: 0 0 15px 5%;
padding: 0;
text-align: left;
line-height: 120%;
font-weight: bold;
font-size: 1.8rem;
color: #56a8e9;
}
@media only screen and (max-width: 1024px) {
article h6{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 15px 0;
padding: 0;
text-align: left;
line-height: 120%;
font-weight: bold;
font-size: 2.0rem;
color: #56a8e9;
}
}
article p{
text-align: left;
line-height: 200%;
margin: 0 7% 50px;
font-size: 1.5rem;
}
article p.pright{
text-align: right;
}
article p.pright2{
text-align: right;
margin: -40px 7% 30px;
}
article p.pcenter{
text-align: center;
}
@media only screen and (max-width: 1024px) {
article p{
text-align: left;
line-height: 180%;
margin: 0 0 50px;
font-size: 1.2em;
}
article p.pright2{
text-align: right;
margin: -40px 0% 30px;
}
}
@media only screen and (max-width: 479px) {
article p{
text-align: justify;
text-justify: inter-ideograph;
line-height:160%;
margin: 0 0 30px;
font-size: 13px;
}
article p.pright2{
text-align: right;
margin: -30px 0% 30px;
}
}

article a:link.a-box,article a:visited.a-box{
background: #cee8fd;
padding: 10px 1em;
border: 1px solid #56A8E9;
color: #1C81D2;
}

main table {
	clear:both;
	width:100%;
	margin:5px 0 50px;
    border:1px solid #333;
    border-collapse:collapse;
    border-spacing:0px;
    empty-cells:show;
    table-layout:auto;
    text-align:left;
	background:#fff;
	font-size: 1.4rem;
}
@media only screen and (max-width: 1024px) {
main table {
	clear:both;
	width:100%;
	margin:5px 0 50px;
    border:1px solid #333;
    border-collapse:collapse;
    border-spacing:0px;
    empty-cells:show;
    table-layout:auto;
    text-align:left;
	background:#fff;
	font-size: 1.6rem;
}
}
@media only screen and (max-width: 768px) {
main table {
	clear:both;
	width:100%;
	margin:5px 0 50px;
    border:1px solid #333;
    border-collapse:collapse;
    border-spacing:0px;
    empty-cells:show;
    table-layout:auto;
    text-align:left;
	background:#fff;
	font-size: 1.6rem;
}
}
@media only screen and (max-width: 479px) {
main table {
	clear:both;
	width:100%;
	margin:5px 0 50px;
    border:1px solid #333;
    border-collapse:collapse;
    border-spacing:0px;
    empty-cells:show;
    table-layout:auto;
    text-align:left;
	background:#fff;
	font-size: 13px;
}
}
main table caption{
font-weight: bold;
text-align: center;
margin: 0;
padding: 15px 0 7px;
background: #eee;
border-radius: 10px 10px 0 0;
}
main #sub-page table img{
vertical-align:middle;
margin: 5px;
padding: 0;
}
main tr.f-bold{
font-weight: bold;
}
main tr.back-black{
background: #666;
color: #fff;
}
main tr.back-blue{
background: #cee8fd;
}
main th{
	width:25%;
	background:#eee;
	text-align:center;
	font-weight: normal;
	border-right:1px solid #333;
	border-bottom:1px solid #333;
	padding: 10px;
	}
main td{
	border-right:1px solid #333;
	border-bottom:1px solid #333;
	padding: 10px;
}
main tr.t-center,main td.t-center{
text-align: center;
}
main td.back-gray{
background: #eee;
}
main td.w50{
width: 50%;
}
main table ol{
margin: 30px 0 0;
}
main table ol li{
margin: 0 0 10px;
padding: 0;
}

#sub-page ol,#sub-page article ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0 5% 0 10%;
text-align: left;
}
#sub-page article ul.backnumber{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0 5% 0 10%;
text-align: left;
}
#sub-page ol ol,#sub-page ul ol,#sub-page ul ul{
margin: 20px 0 10px;
padding: 0 0 0 5%;
list-style-type: upper-roman;
}
#sub-page ol ul{
margin: 20px 0 10px;
padding: 0 0 0 5%;
list-style-type: disc;
}
#sub-page ul ol{
list-style-type: decimal;
}
#sub-page ul ul{
list-style-type: circle;
}
#sub-page ol li,#sub-page article ul li{
margin: 0 0 10px;
padding: 0;
font-size: 1.6rem;
}
#sub-page article ul.backnumber li{
float: left;
width: 20%;
margin: 0 0 10px;
padding: 0;
font-size: 1.5rem;
}
#sub-page ul ol ol li{
list-style-type: none;
}
@media only screen and (max-width: 1024px) {
#sub-page ol li,#sub-page article ul li{
margin: 0 0 10px;
padding: 0;
font-size: 1.8rem;
}
#sub-page article ul.backnumber{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0 2%;
text-align: left;
}
#sub-page article ul.backnumber li{
float: left;
width: 20%;
margin: 0 0 10px;
padding: 0;
font-size: 1.8rem;
}
}
@media only screen and (max-width: 479px) {
#sub-page ol,#sub-page article ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0 5% 0 10%;
}
#sub-page ol li,#sub-page article ul li{
margin: 0 0 10px;
padding: 0;
font-size: 13px;
}
#sub-page article ul.backnumber{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0 0 0 2%;
text-align: left;
}
#sub-page article ul.backnumber li{
float: left;
width: 25%;
margin: 0 0 10px;
padding: 0;
font-size: 1.6rem;
}
}

#study-nav{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
#study-nav p,#study-nav p.pright,#study-nav p.pleft{
float: left;
width: 50%;
margin: 0 0 15px;
text-align: left;
font-size: 13px;
}
#study-nav p.pleft{
clear: both;
}
#study-nav p.pright{
text-align: right;
}

/*FAQアコーディオン全体*/
.accordion-area2{
clear: both;
float: left;
    list-style: none;
    width: 100%;
    margin:0 auto;
	padding: 0
}
ul.accordion-area2{
margin: 0;
padding: 0;
}
@media only screen and (max-width: 768px) {
#sub-page ul.accordion-area2{
margin: 0;
padding: 0;
width: 100%;
}
}

.accordion-area2 p{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 15px;
padding: 0 0 0 2em;
text-align: left;
font-weight: bold;
font-size: 1.8rem;
line-height: 100%;
}
@media only screen and (max-width: 1024px) {
.accordion-area2 p{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 15px;
padding: 0 0 0 2em;
text-align: left;
font-weight: bold;
font-size: 2.0rem;
line-height: 100%;
}
}

.accordion-area2 li{
    margin: 10px 0 0;
}

.accordion-area2 section {
clear: both;
width: 100%;
float: left;
background: #fff;
border: 1px solid #56a8e9;
  margin: 30px 0 0;
  padding: 20px 3% 0;
}
@media only screen and (max-width: 479px) {
.accordion-area2 section {
clear: both;
width: 100%;
float: left;
background: #fff;
border: 1px solid #56a8e9;
  margin: 15px 0 0;
  padding: 20px 3% 0;
}
}

/*アコーディオンタイトル*/
.title2 {
    position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size:1rem;
    font-weight: normal;
    padding: 0 3% 0 20px;
    transition: all .5s ease;
}

/*アイコンの＋と×*/
.title2::before,
.title2::after{
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: #56a8e9;
    }
.title2::before{
    top:38%;
    left: 15px;
    transform: rotate(0deg);
    }
.title2::after{
    top:38%;
    left: 15px;
    transform: rotate(90deg);
}
@media only screen and (max-width: 768px) {
.title2::before{
    top:38%;
    left: 10px;
    transform: rotate(0deg);
    }
.title2::after{
    top:38%;
    left: 10px;
    transform: rotate(90deg);
}
}

/*　closeというクラスがついたら形状変化　*/
.title2.close::before{
  transform: rotate(45deg);
}
.title2.close::after{
  transform: rotate(-45deg);
}

/*アコーディオンで現れるエリア*/
.box2 {
    display: none;/*はじめは非表示*/
	clear: both;
	width: 100%;
	height: auto;
  margin:0;
    padding: 10px 5% 0;
}

.box2 p{
font-size: 1.5rem;
text-align: left;
line-height: 180%;
margin: 0 0 20px;
font-weight: normal;
text-indent: 0;
}
@media only screen and (max-width: 1024px) {
.box2 p{
font-size: 1.8rem;
text-align: left;
line-height: 180%;
margin: 0 0 20px;
font-weight: normal;
text-indent: 0;
}
}
@media only screen and (max-width: 479px) {
.box2 p{
font-size: 13px;
text-align: left;
line-height: 180%;
margin: 0 0 15px;
padding: 0;
font-weight: normal;
text-indent: 0;
}
}

#seminar-title{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 30px 5% 20px;
background: #cee8fd;
border: 1px solid #56a8e9;
}
#sub-page #seminar-title h1{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: left;
font-weight: bold;
font-size: 3.0rem;
line-height: 120%;
}
#sub-page #seminar-title h1 span{
font-weight: normal;
font-size: 1.5rem;
}
#sub-page #seminar-title p{
margin: 0;
text-align: right;
}

article hr{
clear: both;
float: left;
width: 100%;
border-bottom: none;
border-right:none;
border-left:none;
border-top:1px dotted #333;
margin: 30px 0;
}

article blockquote{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 50px 5% 0;
background: #F6F6F6;
}
article blockquote.b-red{
border:2px solid #e03405;
}
#sub-page article blockquote p{
font-size: 1.3rem;
margin: 0 7% 30px;
}
@media only screen and (max-width: 1024px) {
article blockquote{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 50px 5% 0;
background: #F6F6F6;
}
#sub-page article blockquote p{
font-size: 1.5rem;
margin: 0 3% 30px;
}
}
@media only screen and (max-width: 768px) {
article blockquote{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 30px 5% 0;
background: #F6F6F6;
}
#sub-page article blockquote p{
font-size: 1.8rem;
margin: 0 1% 30px;
}
}

#backnumber{
}
#sub-page #backnumber ul{
margin: 0 0 15px;
}
#sub-page #backnumber ul li{
font-size: 12px;
color: #777;
line-height: 150%;
margin: 0;
}
#backnumber ul li a{
font-size: 1.6rem;
color:#2E7BDC;
}
#backnumber ul p{
text-align: right;
font-size: 1.3rem;
margin: 0 5% 15px;
}
@media only screen and (max-width: 1024px) {
#sub-page #backnumber ul{
margin: 0 0 15px;
padding: 0 2% 0 3%;
}
#backnumber ul li a{
font-size: 1.9rem;
color:#2E7BDC;
}
#backnumber ul p{
text-align: right;
font-size: 1.5rem;
margin: 0 5% 15px;
}
}
@media only screen and (max-width: 768px) {
#backnumber ul li a{
font-size: 2.0rem;
color:#2E7BDC;
}
#backnumber ul p{
text-align: right;
font-size: 13px;
margin: 0 2% 15px;
}
}
@media only screen and (max-width: 479px) {
article #backnumber h5{
margin: 0 0 10px;
}
#backnumber ul p{
text-align: right;
font-size: 13px;
margin: 0 0 15px;
}
}

#handbook{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
}
#handbook img{
float: left;
margin: 0 3% 15px 0;
}

.f-red{
color: #e03405;
}

/*フッタ
--------------------------------------------------------------------------*/
#sitemap{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 2px 0 0;
padding: 10px 5% 40px;
background: #f7f5f0;
}
#sitemap-sm{
display: none;
}
@media only screen and (max-width: 1024px) {
#sitemap{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 2px 0 0;
padding: 10px 2% 40px;
background: #f7f5f0;
}
}
@media only screen and (max-width: 479px) {
#sitemap{
display: none;
}
#sitemap-sm{
display: inherit;
clear: both;
float: left;
width: 100%;
height: auto;
margin: 2px 0 0;
padding: 10px 5% 10px;
background: #f7f5f0;
}
}
.sitemap-box,.sitemap-box2{
float: left;
width: 23%;
height: auto;
margin: 0 1%;
padding: 0;
}
@media only screen and (max-width: 768px) {
.sitemap-box,.sitemap-box2{
float: left;
width: 48%;
height: auto;
margin: 0 1%;
padding: 0;
}
.sitemap-box2{
clear: both;
}
}
#sitemap h6{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 50px 0 20px;
padding: 0 0 0 15px;
text-align: left;
font-weight: normal;
line-height: 100%;
font-size:1.8rem;
border-left:5px solid #56a8e9;
}
@media only screen and (max-width: 479px) {
	#sitemap-sm h6{
		clear: both;
		float: left;
		width: 100%;
		height: auto;
		margin: 1.5vw;
		padding: 0 0 0 15px;
		text-align: left;
		font-weight: normal;
		line-height: 100%;
		font-size: 2.0rem;
		border-left:5px solid #56a8e9;
	}
}
#sitemap ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}#sitemap ul ul{
margin: 15px 0 5px;
}
#sitemap li{
text-align: left;
margin: 0 0 15px 2em;
padding: 0;
line-height: 100%;
font-size: 1.3rem;
}
@media only screen and (max-width: 1024px) {
#sitemap li{
text-align: left;
margin: 0 0 15px 2em;
padding: 0;
line-height: 100%;
font-size: 13px;
}
}
#sitemap a:link,#sitemap a:visited,#sitemap-sm a:link,#sitemap-sm a:visited{
color: #111;
text-decoration: none;
}
#sitemap a:hover,#sitemap-sm a:hover{
color: #3b4675;
font-weight: bold;
text-decoration: underline;
}
#sitemap li img{
margin: 0 0 0 1%;
}

footer{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
border-bottom:10px solid #56a8e9;
}
#footer-nav{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 3px 0 0;
padding:20px 0;
border-top:1px solid #56a8e9;
border-bottom:1px solid #56a8e9;
}
#footer-nav ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: center;
}
#footer-nav li{
display: inline;
list-style-type: none;
margin: 0;
padding: 0 1.5% 0;
font-size: 1.3rem;
border-right:1px solid #666;
}
@media only screen and (max-width: 1024px) {
#footer-nav li{
display: inline;
list-style-type: none;
margin: 0;
padding: 0 1.5% 0;
font-size: 13px;
border-right:1px solid #666;
}
}
#footer-nav li.bno{
border-right:none;
}
#footer-nav a:link,#footer-nav a:visited{
text-decoration: none;
color: #111;
}
#footer-nav a:hover{
color: #3b4675;
font-weight: bold;
text-decoration: underline;
}
@media only screen and (max-width: 768px) {
#footer-nav{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 3px 0 0;
padding:0;
border-top:1px solid #56a8e9;
border-bottom:none;
}
#footer-nav ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: center;
border-left:1px solid #56a8e9;
}
#footer-nav li{
float: left;
width: 50%;
display: inline;
list-style-type: none;
margin:0 ;
padding: 0;
font-size: 13px;
border-right:1px solid #56a8e9;
border-bottom:1px solid #56a8e9;
}
#footer-nav li.bno{
border-right:none;
}
#footer-nav a:link,#footer-nav a:visited{
display: block;
padding: 10px 0;
text-decoration: none;
color: #111;
}
#footer-nav a:hover{
color: #3b4675;
font-weight: bold;
text-decoration: underline;
}
}

address{
clear: both;
width: 1000px;
height: auto;
margin: 0 auto;
padding: 20px 0;
}
@media only screen and (max-width: 1024px) {
address{
clear: both;
width: 100%;
height: auto;
margin: 0 auto;
padding: 20px 2%;
}
}
@media only screen and (max-width: 479px) {
address{
clear: both;
width: 100%;
height: auto;
margin: 0 auto;
padding: 10px 2%;
}
}
#ad-text{
float: left;
width: 40%;
}
address p{
text-align: left;
font-size: 13px;
line-height: 180%;
margin: 0 0 15px;
padding: 0;
font-style: normal;
}
#copy{
float: right;
width:60%;
}
address #copy p{
text-align: right;
color: #999;
font-size: 13px;
}
@media only screen and (max-width: 1024px) {
address p{
text-align: left;
font-size: 13px;
line-height: 180%;
margin: 0 0 15px;
padding: 0;
font-style: normal;
}
address #copy p{
text-align: right;
color: #999;
font-size: 13px;
}
}
@media only screen and (max-width: 768px) {
#ad-text{
float: left;
width:100%;
}
address p{
text-align:center;
font-size: 13px;
line-height: 150%;
margin: 0 0 15px;
padding: 0;
font-style: normal;
}
#copy{
float: right;
width:100%;
}
address #copy p{
text-align: center;
color: #999;
font-size: 13px;
}
}

#page-top{
	width:40px;
	height:40px;
	display:none;
	position:fixed;
	right:16px;
	bottom:16px;
	color:#fff;
}
#page-top p{
	margin:0;
	padding:0;
	text-align:center;
	background:#111;
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
	transition:all 0.3s;
	color:#fff;
}
#page-top p:hover{
	background:#8b8b8b;
	color:#fff;
}
#move-page-top{
	color:#fff;
	line-height:40px;
	text-decoration:none;
	display:block;
	cursor:pointer;
}