@charset "utf-8";

/* 按分システムCSS */

body {
    margin: 0;
    text-align: center;  
	font-family: "ヒラギノ角ゴ Pro W3",メイリオ,Osaka,Arial,Verdana,"ＭＳ Ｐゴシック",sans-serif;
	     -o-font-smoothing: antialiased;
	   -moz-font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	    -ms-font-smoothing: antialiased;
	        font-smoothing: antialiased;
			background-color:#fcfcfc ;
			color:#333;

}

div#container {
	max-width: 960px;  
    margin: 0 auto;
    text-align: left;
    border-top: 5px solid #00ADEF;  
	background-color: #fff;
	background-image: url(../img/bg.jpg); 
	background-position: right bottom; 
	background-repeat: no-repeat;
	box-shadow: 0 2px 5px rgba(0,0,0,.25);

}


header{
    width: 100%;
	padding: 0px 0;

}
header img{
	max-width: 100%;
	height: auto;
	width /***/:auto;
	margin:20px 0;
}

.pagetitle{
	margin:20px 0 20px 0px; 
}

/*メニューボタン全体CSS*/
#menu {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	padding: 0;
}
#menu li{
	display: block;
	float: left;
	width: 25%;
	margin: 0;
	padding: 0;
}
#menu li a {
	font-size:120%;
	display: block;
	padding: 10px 0 10px;
	background-color: #fff;
	color: #505050;
	text-align: center;
	border-right:1px solid #fff;
	text-decoration:underline 1px solid;

}
#menu li:last-child a{
	border: none;
}
#menu li a:hover{
	color:#44749D;
	text-decoration:none;
}

#toggle {
	display: none;
}

/* 画面サイズが768px以下の場合に適用 */
@media only screen and (max-width: 768px) {
	#menu li {
		width: 25%;
		border-bottom: 1px solid #fff;
	}
	img {
		max-width: 100%;
		height: auto;
		}
}

/* 画面サイズが480px以下の場合に適用 */
@media only screen and (max-width: 480px) {
	#menu {
		display: none;
	}
	#menu li {
		width: 100%;
	}
	#toggle {
		display: block;
		position: relative;
		width: 100%;
		background: #E2F4F7;
	}
	#toggle a{
		display: block;
		position: relative;
		padding: 20px 0 20px;
		border-bottom: 1px solid #fff;
		color:#44749D;
		text-align: center;
		text-decoration: none;
	}
	#toggle:before {
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 10px;
		width: 30px;
		height: 30px;
		margin-top: -15px;
		background: #E2F4F7;
	}
	#toggle a:before, #toggle a:after {
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 10px;
		width: 30px;
		height: 6px;
		background: #2a83a2;
	}
	#toggle a:before {
		margin-top:-9px;
	}
	#toggle a:after {
		margin-top: 3px;
	}
	img {
		max-width: 100%;
		height: auto;
		}

}

/*メインCSS*/

#main{
	padding-left:60px;
	padding-bottom:60px;

}

#main p{
	letter-spacing: 0.04em;
	line-height: 1.3em;
	}

#main p a{
    color:#44749D;
    background-color:#fff;
	font-weight:bold;
}


#main p a:hover{
    color:#C6D4E1;
    background-color:#fff;
}

h2{
	color:#FF9517;
	font-size:180%;
	letter-spacing:0.1em;
}

h3{
	font-size:180%;
	letter-spacing:0.1em;
	color:#FF9517;
	padding-left: 50px;
	margin-bottom: 0;
	margin-top: 0;
}

h4{
	margin-top: 0;
	font-size:130%;
	font-weight:bold;
}

.red{
	color: #ff0000 ;
}

#main address{
	font-size:larger;
}

#main table {
	margin:0 auto;
}

#main table a{
    color:#FF9517;
    background-color:#fff;
	font-weight:bold;
}


#main table a:hover{
    color:#EBE7E0;
    background-color:#fff;
}


/*メイン内リストCSS*/

#main ul {
	list-style-type:none;
	letter-spacing: 0.04em;
	color:#333;

}
#main ul li{
}


img.nagare{
	margin-left: -60px;
}


/*フッター*/

footer{
	width:80%;
	height:60px;
	margin:auto;
    bottom:0;
}

footer img{
	  float:left;
}
	  
footer address{
	padding-top:30px;/* 目分量大体footer　logo　imageの高さに合わせます。 */
	font-size: smaller;
	color:#666;
}


/*下部TOPボタン*/

#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%;
}
#page-top a {
    background: #666;
    text-decoration: none;
    color: #fff;
    width: 40px;
    padding: 10px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
}
#page-top a:hover {
    text-decoration: none;
    background: #999;
}


/*特徴ページ アコーディオン表示*/
.accordion {
  display:block;
  position: relative;
  width: 800px;
  margin: 10px auto;
  height: auto;
}

.accordion > ul {
  display: block;
  list-style: none;
  padding :0;
  margin: 0;
}

.accordion > ul > li {
  display: block;
  position: relative;
  margin-bottom: -1px;
  overflow: hidden;
  color: #486992;
  background: #fafafa;
  border: 1px solid #D1D1D1;
}

.accordion > ul > li:first-child {
  border-radius: 0.3em 0.3em 0 0;
}

.accordion > ul > li:last-child {
  border-radius: 0 0 0.3em 0.3em;
}

.acc-handle {
  display:block;
  position: relative;
  padding: 1.5em;
  color: #486992;
  background: #f1f1f1;
  text-decoration: none;
  z-index: 3;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
  transition: all .25s ease;
}

.acc-handle:hover {
  color: #2F71C4;
  background: #fafafa;
}

.acc-handle:before, .acc-handle:after {
  content: '';
  position: absolute;
  transition: all .3s ease;
}

.acc-handle:before {
  width: 1em;
  border-top: 0.3em solid;
  top: 50%;
  margin-top: -0.20em; 
  right: 1.45em;
}

.acc-handle:after {

  width: 0.3em;
  border-top: 0.5em solid;
  border-bottom: 0.5em solid;
  right: 1.8em;
  top: 50%;
  margin-top: -0.55em;
}

.acc-panel {  
  padding: 1.5em;
  position: relative;
  float: left;
  width: 100%;
  clear: both;
  margin-top: -100%;
  z-index: 1;
  transition: all 1.2s ease;
}

.acc-handle:focus {
  outline: none;
  background: #e7e7e7;
}

.acc-handle:focus:after{
  height: 0;
  border: 0;
  margin-top: 0;
  opacity: 0;
}

.acc-handle:focus + .acc-panel {
  margin-top: 0;
  border-top: 1px solid #d1d1d1;
  transition: all 0.6s ease-in-out;
}

.acc-panel * { 
  opacity: 0;
  transition: all 1s linear;
}

.acc-handle:focus + .acc-panel * {
  opacity: 1;
}


/* リストのチェックマーク */

.point {
	font-size:150%;
	line-height:none;
	font-weight: bold;
	color:#FF9517;
}

.check {
	position: relative;
}

.check::after {
	display: block;
	content: '';
	position: absolute;
	top: .5em;
	left: -1em;
	width: 8px;
	height: 3px;
	border-left: 2px solid #cc0000;
	border-bottom: 2px solid #cc0000;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}