@charset "UTF-8";
/**********************************************
	Drops PUBLIC HP
**********************************************/

/**********************************************
	Primary style
**********************************************/
html * {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

*, *:after, *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/**********************************************
　Body
**********************************************/
body {
	font-size: 100%;
	font-family:"メイリオ","Meiryo","verdana","ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
  	color: #000;
	background-color: #fff;
}

body, html {
	/* important */
	height: 100%;
}

/**********************************************
　Access Analisis
**********************************************/
#access{
	float:right;
}

/**********************************************
　Link
**********************************************/
a {
	color: #0e264c;
   text-decoration:underline;
	font-weight:400;
}

a:visited {

}

a:hover {
	color: #852e19;
}

a:active {

}

/**********************************************
　Grobal
**********************************************/
img {
   border:0;
   vertical-align:bottom;
}

hr{
	clear:both;
	height: 1px;
	border:0px;
	background-color: #aac4b0;
   margin:0 0 20px 0 ;
	padding:0;
	z-index: 2;
}

/**********************************************
　Container
**********************************************/
.container {
	/* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
	width: 96%;
	max-width: 900px;
	overflow : hidden;
	margin: 0 auto;
   border:0px solid brown;
}

/********　1列用（70%）　********/
.container_70 {
	width: 70%;
	margin:0 auto;
}

/********　2列用（50%/50%）　********/
.container_50 {
	float:left;
	width: 50%;
	margin:0;
	padding:0;
   border:0px solid brown;
}

.container_50r {
	float:right;
	width: 50%;
	margin:0;
	padding:0;
   border:0px solid brown;
}

/********　3列用　********/
.container_33 {
	float:left;
	width: 33.3%;
	min-width:275px;
	margin:0;
}

/********　4列用　********/
.container_25 {
	float:left;
	width: 25%;
	padding:5px;
	min-width:225px;
	margin:0;
}

/********　Padding　********/
.pad_side {
	padding:0 2%;
}
.pad_url {
	padding:20px 2% 0 2%;
}
/**********************************************
　Main
**********************************************/
#main {
	/* you need to assign a min-height to the main content so that the children can inherit it*/
	height: 100%;
	position: relative;
	z-index: 1;
}

/**********************************************
　Fixed Background
**********************************************/
.fixed-bg {
	position: relative;
	min-height: 60%;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
	padding: 0;
	z-index: 1;
   border:0px solid brown;
}

.iphone .fixed-bg {
	background-attachment: local;
}

.ipad .fixed-bg {
	background-attachment: local;
}

.fixed-bg.bg-1 {
	background-image: url("../images/01.jpg");	/***　***/
}
.fixed-bg.bg-2 {
	background-image: url("../images/02.jpg");	/***　***/
}
.fixed-bg.bg-3 {
	background-image: url("../images/03.jpg");	/***　***/
}
.fixed-bg.bg-4 {
	background-image: url("../images/04.jpg");	/***　***/
}
.fixed-bg.bg-5 {
	background-image: url("../images/05.jpg");	/***　***/
}
.fixed-bg.bg-6 {
	background-image: url("../images/06.jpg");	/***　***/
}
.fixed-bg.bg-7 {
	background-image: url("../images/07.jpg");	/***　***/
}

/**********************************************
　Scrolling Background
**********************************************/
.scrolling-bg {
	position: relative;
	overflow : hidden;
	padding: 0;
	margin:0 0 20px 0;
	z-index: 2;
   border:0px solid green;
}

.scrolling-bg.color-top {
	padding: 0;
	background-color: #fff;
}
.scrolling-bg.color-footer {
	background-color: #cfe2cf;
}
.scrolling-bg.color-white {
	background-color: #fff;
}
.scrolling-bg p{
	font-size: 16px;
   font-weight:400;
	line-height:1.6;
   margin:0 0 15px 0;
	padding: 0;
	z-index: 2;
}
/*************************/
.scrolling-bg .title {
	float:left;
	width:50%;
	padding:0;
   border:0px solid red;
}
.scrolling-bg .title p {
	text-align: left;
	font-size: 14px;
	font-weight: 600;
	margin:0 5% 0 5%;
	padding:0 0 10px 0;
   border:0px solid red;
}
.scrolling-bg .title strong {
	font-size: 36px;
	color: red;
}

/*************************/
.scrolling-bg .info {
	float:left;
	width:50%;
	padding:20px 0;
	background-color: #fff;
   border:0px solid red;
}
.scrolling-bg .info p {
	text-align: left;
	font-size: 16px;
	font-weight: 600;
	padding:0 0 10px 0;
}

.scrolling-bg .info strong {
	font-size: 30px;
	color: red;
}

/*************************/
.scrolling-bg h1 {
	text-align: left;
	font-size: 40px;
	font-weight: 600;
	padding:20px 0 20px 0;
	line-height:1.5;
}

.scrolling-bg h2 {
	text-align: left;
   font-size:22px;
   font-weight:600;
 	padding: 3px 0 0 15px;
	margin:20px 0 20px 0;
	z-index: 2;
   border:0px solid brown;
   border-left:5px solid #006400;

}
.scrolling-bg .guitar{
 	background-image: url("../images/icon/guitar.jpg");
}

.scrolling-bg h3{
   font-size:20px;
   font-weight:600;
	height:40px;
 	padding: 10px 0 0 0;
	background-size: contain;
 	background-repeat: no-repeat;
 	background-position: 0;
	margin:0 0 10px 0;
	z-index: 2;
   border:0px solid brown;
}
.scrolling-bg .ha_1{
 	background-image: url("../images/icon/ha_1.jpg");
 	padding-left: 50px;
}
.scrolling-bg .ha_2{
 	background-image: url("../images/icon/ha_2.jpg");
 	padding-left: 50px;
}
.scrolling-bg .ha_3{
 	background-image: url("../images/icon/ha_3.jpg");
 	padding-left: 50px;
}
.scrolling-bg .ha_4{
 	background-image: url("../images/icon/ha_4.jpg");
 	padding-left: 50px;
}
.scrolling-bg .twitter{
 	background-image: url("../images/icon/twitter.jpg");
 	padding-left: 60px;
}
.scrolling-bg .insta{
 	background-image: url("../images/icon/insta.jpg");
 	padding-left: 60px;
}
.scrolling-bg .gakuwari{
 	background-image: url("../images/icon/gakuwari.jpg");
 	padding-left: 75px;
 	padding-top: 15px;
}
.scrolling-bg .happa3{
 	background-image: url("../images/icon/happa3.jpg");
 	padding-left: 40px;
}

.scrolling-bg h4{
	font-size: 18px;
	font-weight: 600;
	padding:0;
	margin:0 0 15px 0;
	z-index: 2;
}

.scrolling-bg h5{
	font-size: 16px;
	font-weight: 400;
	padding:2px 2px 2px 10px;
	margin:0 0 5px 0;
   border-left:5px solid #deb887;
	z-index: 2;
}

.scrolling-bg p.center {
	text-align:center;
	font-size: 18px;
   margin:0 0 30px 0;
}
.scrolling-bg p.small{
	font-size: 14px;
	padding: 0;
	z-index: 2;
}
.scrolling-bg p.bold{
	font-weight:600;
}

.ques {
	color: #1e50a2;
	font-weight: 600;
}
.ans {
	color: #F37061;
	font-weight: 600;
}

.bold{
	font-weight:600;
}

.scrolling-bg .logo_back{
	background-size: 100%;
 	background-repeat: repeat-y;
 	background-position: 0;
 	background-image: url("../images/logo_back.jpg");
}

/***************************
　Scrolling BG Footer
***************************/
.scrolling-bg p.logo_footer{
	font-size: 18px;
	font-weight:600;
	line-height:1.0;
	padding:20px 0 0 0;
	margin:0 0 5px 0;
	z-index: 2;
}

.scrolling-bg p.address_footer{
	font-size: 18px;
	line-height:1.3;
	padding:0;
	margin:0 0 5px 0;
	z-index: 2;
}

.scrolling-bg p.copyright{
	font-size: 12px;
	line-height:1.5;
	padding: 0;
	z-index: 2;
}

.scrolling-bg .copyright a{
   text-decoration:none;
}

.scrolling-bg p.copyright a:hover{

}

/***************************
　Scrolling BG Image
***************************/
.scrolling-bg img{
	width:100%;
	margin-bottom:2px;
}

.l_box{
	float:left;
	min-width:120px;
	margin:0 3% 20px 0;
	padding:0;
	font-size:14px;
	line-height:1.7;
}

.r_box{
	float:right;
	min-width:120px;
	margin:0 0 20px 3%;
	padding:0;
	font-size:14px;
	line-height:1.7;
}

.c_box{
	min-width:120px;
	margin:0 auto;
	padding:0;
	font-size:14px;
	line-height:1.7;
}


.w_30{
	width:30%;
}
.w_40{
	width:40%;
}
.w_50{
	width:50%;
}
.w_60{
	width:60%;
}
.w_90{
	width:90%;
}
.w_100{
	width:100%;
}

.w_220px{
	width:220px;
}

.w_222px{
	width:222px;
}

.w_50px{
	width:50px;
}

img.line{
	width:232px;
}


/***************************
　Scrolling BG Table
***************************/
.scrolling-bg table{
	width:96%;
	min-width:300px;
	margin:0 auto 20px;
   text-align:left;
	line-height:1.4;
   border-collapse:collapse;
}
.scrolling-bg table th {
	vertical-align:middle;
	font-size:15px;
   padding:4px 2%;
   border:1px solid #333;
   background:#F0F9EE;
}
.scrolling-bg table td {
	vertical-align:middle;
   font-size:15px;
   padding:4px 2%;
   border:1px solid #333;
}

/***************************
　Scrolling BG List
***************************/
.scrolling-bg ul {
	list-style-type: decimal;
	margin:0 0 10px 20px;
}
.scrolling-bg ul.mark {
	list-style-type: square;
	margin:0 0 10px 20px;
}

.scrolling-bg ul li{
	position:relative;
	padding: 0;
	margin:0;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.8;
}

/**********************************************
　Menu
**********************************************/
#menu_outer {
	width: 100%;
	min-width:500px;
	margin:0 auto 10px;
	overflow : hidden;
   border:0px solid brown;
}

#menu {
	width:100%;
	padding:0;
	margin:0 auto;
	z-index:10;
	overflow:hidden;
   border:0px solid #888888;
}

#menu ul {
	width:100%;
   border:0px solid red;
}

#menu li {
	position: relative;
   float:left;
	width:20%;
   text-align:center;
   list-style-type:none;
}

#menu li a {
   display:block;
	padding:5px;
	margin:0;
   font-size:18px;
	font-weight:400;
	line-height:1;
   text-decoration:none;
}

#menu li a:hover, #menu li.active a {
	font-weight:600;
	background-color: #f0f5f1;
   border-bottom:3px solid #aac4b0;
}

#menu li a span {
	font-size:12px;
}

#toggle {
	display: none;
}

@media only screen and (max-width: 640px) {
	#menu {
		display: none;
	}
    
	#toggle {
		display: block;
		line-height: 35px;
		text-align: left;
		
	}
    
	#toggle a {
		display: block;
		color: #fff;
		font-size: 18px;
		text-decoration: none;
		background: #1e50a2;
	}
    
	#toggle a::before {

	}
    
	#menu li {
		width: 100%;
		line-height: 1.2;
		text-align: left;
		border-bottom: 1px solid #1e50a2;
		border-left: 1px solid #1e50a2;
		border-right: 1px solid #1e50a2;
	}
    
	#menu li a {
		color: #444;
		padding-left: 20px;
	}

	#menu li a:hover, #menu li.active a {
		border-bottom: 0;
	}
}

/**********************************************
　Return
**********************************************/
div.return{
   clear:both;
   padding:20px 10px 40px 0;
   text-align:right;
}

div.return a{
	text-decoration:none;
	font-weight:400;
   padding-left:12px;
   font-size:15px;
   background:url("../images/bg_top.gif") 0 6px no-repeat;
}

/**********************************************
　Clear both
**********************************************/
div.clear{
   clear:both;
}

/**********************************************
　Others
**********************************************/
.scrolling-bg p.submit {
   font-size:15px;
	line-height:160%;
   margin:10px 4% 30px 5%;
   padding:0;
}