@charset "UTF-8";
/* CSS Document */

html {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:12px;
	color:#666;
}


a {
	color:#666;
}

a:hover {
	color:#0000FF;
	text-decoration:none;
}

a:active {
	color:#0000FF;
}

a:visited {
	color:#666;
}

a:visited:hover {
	color:#0000FF;
	text-decoration:none;
}

body {
	padding:0;
	margin:0;
	}
    @keyframes fade-in {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

    @-moz-keyframes fade-in {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

    @-webkit-keyframes fade-in {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }


p,ol,ul,li,h1,h2,h3 {
	margin:0;
	padding:0;
}

.end {
	clear:both;
}

#header_box {
	width:100%;
	min-width:1024px;
	background-color:#E3CC81;
	padding-top:0px;
	padding-bottom:20px;
	}


#box {
	width:1024px;
	margin:0 auto 0 auto;
	float:none;
	clear:both;
	padding:0 0 200px 0;
}



header {
	width:1024px;
	margin:0 auto 0 auto;
	/*background-color:#CCCCCC;*/
}

header>.header_text {
	width:768px;
	float:left;
	/*background-color:#CCCCCC;*/
}

.header_charabox {
	position:relative;
	clear:both;
	top:20px;
	line-height:1.9em;
	margin:0 0 20px 0;
}



.header_charabox:first-letter{
    font-size: 4em;
    float: left;
    margin: 0 0 0 0;
    padding: .1em 0;
}



#introduction {
	/*width:511px;
	position:absolute;
	float:left;
	height:40px;
*/margin-bottom:10px;}



#sns {
	position:relative;
	/*float:left;
	left:512px;
	width:255px;
*/	height:25px;
	text-align:left;
}



.fb-like{ float:left;margin:0;position:relative;}

.charabox {
	position:relative;
	clear:both;
}



header>.add {
	background-color:#FFF;
	width:240px;
	height:250px;
	float:left;
	clear:right;
	margin:0 0 0 10px;
	padding-top:5px;
	border:#CCC 1px solid;
	border-radius:5px;
}



.EDGE-5057250 {
	margin:0 auto;
}



#contents {
	position:relative;
	clear:both;
	padding:10px 0 0 0;
}

#contents_1 {
	width:255px;
	position:relative;
	float:left;
}
		

#contents_1 h2 {
			text-align:center;
			border-top:#999 2px solid;
			border-bottom:#999 2px solid;
			width:231px;
			margin:0 auto 5px auto;
			padding:10px 0;
		}
		#contents_1>.textbox {
			width:231px;
			border:1px #CCC solid;
			margin:0 auto 2px auto;
		}
		#contents_1>.textbox >.titlebox{
			padding:3px 10px;
			background-color:#999;
			color:#FFF;
		}
			#contents_1>.textbox >.titlebox>h3{
				text-align:center;
			}
			#contents_1>.textbox >.titlebox>p{
				text-align:center;
				font-size:14px;
			}
		
		#contents_1>.textbox >.charabox{
			position:relative;
			float:none;
			clear:both;
			padding:10px;
		}
		#contents_1>.textbox >.charabox> img{
			display: block;
			margin: 0 auto;
  		}
		#contents_1>.textbox >.charabox>a img{
			display: block;
			margin: 10px auto;
  		}
		
		#contents_1>.textbox >.charabox>.caption{
			position:absolute;
			background-color:#EFFFFD;
			border:1px solid #666;
			border-radius:4px;
			padding:5px;
			left:226px;
			top:0px;
			max-width:150px;
			min-width:150px;
			z-index:5;
			opacity: 0;
	
			animation-duration: 0.5s;
			animation-name: fade-in;
			-moz-animation-duration: 0.5s;
			-moz-animation-name: fade-in;
			-webkit-animation-duration: 0.5s;
			-webkit-animation-name: fade-in;
	
	  		filter: alpha(opacity=0);
			
			display:none;

  		}
	
		#contents_1>.textbox >.charabox>.caption h3 {
			margin:10px;
			position:relative;
			clear:both;
		}
		
		#contents_1>.textbox >.charabox>.caption p {
			font-size:11px;
			line-height:1.7em;
			margin:10px;
		}
	
		#contents_1>.textbox >.charabox:hover .caption {
			display:block;
			z-index:10;
			opacity: 1;
			filter: alpha(opacity=100);	
		}
		.charabox ul {
			list-style:none;
			line-height:1.7em;
			text-align:center;
		}
		
		.charabox li {
			list-style:none;
			line-height:1.7em;
			text-align:center;
		}
		
		

#contents_2 {
	width:255px;
	position:absolute;
	left:256px;
	float:left;
}
	#contents_2 h2 {
		text-align:center;
		border-top:#999 2px solid;
		border-bottom:#999 2px solid;
		width:231px;
		margin:0 auto 5px auto;
		padding:10px 0;
	}
	#contents_2>.textbox {
			width:231px;
			border:1px #CCC solid;
			margin:0 auto 2px auto;
		}
		#contents_2>.textbox >.titlebox{
			padding:3px 10px;
			background-color:#999;
			color:#FFF;
		}
			#contents_2>.textbox >.titlebox>h3{
				text-align:center;
			}
			#contents_2>.textbox >.titlebox>p{
				text-align:center;
				font-size:14px;
			}
		
		#contents_2>.textbox >.charabox{
			position:relative;
			clear:both;
			padding:10px;
		}
		#contents_2>.textbox >.charabox>a img{
			display: block;
			margin: 0 auto;
  		}
		

		#contents_2>.textbox >.charabox>.caption{
			position:absolute;
			background-color:#EDFFF2;
			border:1px solid #666;
			border-radius:4px;
			padding:5px;
			left:226px;
			top:0px;
			max-width:150px;
			min-width:150px;
			z-index:5;
			opacity: 0;
	
			animation-duration: 0.5s;
			animation-name: fade-in;
			-moz-animation-duration: 0.5s;
			-moz-animation-name: fade-in;
			-webkit-animation-duration: 0.5s;
			-webkit-animation-name: fade-in;
	
	  		filter: alpha(opacity=0);
			
			display:none;

  		}
	
		#contents_2>.textbox >.charabox>.caption h3 {
			margin:10px;
		}
		
		#contents_2>.textbox >.charabox>.caption p {
			font-size:11px;
			line-height:1.7em;
			margin:10px;
		}
	
		#contents_2>.textbox >.charabox:hover .caption {
			display:block;
			z-index:10;
			opacity: 1;
			filter: alpha(opacity=100);	
		}



#contents_3 {
	width:255px;
	position:relative;
	left:256px;
	float:left;
}
	#contents_3 h2 {
		text-align:center;
		border-top:#999 2px solid;
		border-bottom:#999 2px solid;
		width:231px;
		margin:0 auto 5px auto;
		padding:10px 0;
	}
	#contents_3>.textbox {
			width:231px;
			border:1px #CCC solid;
			margin:0 auto 2px auto;
		}
		#contents_3>.textbox >.titlebox{
			padding:3px 10px;
			background-color:#999;
			color:#FFF;
		}
			#contents_3>.textbox >.titlebox>h3{
				text-align:center;
			}
			#contents_3>.textbox >.titlebox>p{
				text-align:center;
				font-size:14px;
			}
		
		
		#contents_3>.textbox >.charabox{
			position:relative;
			clear:both;
			padding:10px;
			
		}
		#contents_3>.textbox >.charabox>a img{
			display: block;
			margin: 10px auto;
  		}

		#contents_3>.textbox >.charabox>.caption{
			position:absolute;
			background-color:#FFFCEC;
			border:1px solid #666;
			border-radius:4px;
			padding:5px;
			left:226px;
			top:0px;
			max-width:150px;
			min-width:150px;
			z-index:5;
			opacity: 0;
	
			animation-duration: 0.5s;
			animation-name: fade-in;
			-moz-animation-duration: 0.5s;
			-moz-animation-name: fade-in;
			-webkit-animation-duration: 0.5s;
			-webkit-animation-name: fade-in;
	
	  		filter: alpha(opacity=0);
			
			display:none;

  		}
	
		#contents_3>.textbox >.charabox>.caption h3 {
			margin:10px;
		}
		
		#contents_3>.textbox >.charabox>.caption p {
			font-size:11px;
			line-height:1.7em;
			margin:10px;
		}
	
	
			#contents_3>.textbox >.titlebox> h3{
				text-align:center;
			}
			#contents_3>.textbox >.titlebox> p{
				text-align:center;
				font-size:14px;
			}


		#contents_3>.textbox >.charabox:hover .caption {
			display:block;
			z-index:10;
			opacity: 1;
			filter: alpha(opacity=100);	
		}




#contents_4 {
	width:255px;
	position:relative;
	float:left;
	left:256px;
}
	#contents_4 h2 {
		text-align:center;
		border-top:#999 2px solid;
		border-bottom:#999 2px solid;
		width:231px;
		margin:0 auto 5px auto;
		padding:10px 0;
	}

	#contents_4>.textbox {
			width:231px;
			border:1px #CCC solid;
			margin:0 auto 2px auto;
		}
		#contents_4>.textbox >.titlebox{
			padding:3px 10px;
			background-color:#999;
			color:#FFF;
		}
		
		#contents_4>.textbox >.charabox{
			position:relative;
			clear:both;
			padding:10px;
			
		}
		
			#contents_4>.textbox >.titlebox> h3{
				text-align:center;
			}
			#contents_4>.textbox >.titlebox> p{
				text-align:center;
				font-size:14px;
			}


/*アコーディオンメニュー*/
label {
    background: #EEE;
    color: #666;
    padding: 10px;
    display: block;
    margin: 0;
    border: 1px solid #fff;
}

label >h3 {
	font-size:11px;
}

input[type="checkbox"].on-off{
    display: none;
}

.menu > ul {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    margin: 0;
    padding:0 ;
    list-style: none;
	
}

.menu li {
    padding: 10px;
}

.menu {
	width:230px;
	margin:5px auto;
    border: 1px solid #CCC;
	overflow:hidden;
}

input[type="checkbox"].on-off + ul{

    height: 0;
    overflow: hidden;
}

input[type="checkbox"].on-off:checked + ul{
	height: auto;
}


#footer_box {
	width:100%;
	min-width:1024px;
	background-color:#EEE;
	margin-top:10px;
	}

footer {
	position:relative;
	clear:both;
	text-align:center;
	min-width:1024px;
	margin:0 auto 0 auto;
}


.header_navi {
	display:none;
}
.return {
    background: #FFF;
	color:#333;
    position: fixed;
    bottom: 40px;
    right: 20px;
    padding: 10px;
    border-radius: 5px;
    font-size: 18px;
	text-decoration:none;
	border:3px solid #333;
	font-weight:600;
}