@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);

/* =======================================

	CommonElements

======================================= */
body {
	width: 100%;
	font-size: 100%;
	color: #000;
	background: #fff;
	overflow-x: hidden;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}


a:link {
	text-decoration: none;
	cursor: pointer;
    color: #000;
}
a:visited {
	text-decoration: none;
	color: #000000;
}
a:active { text-decoration:none; }
a:hover {
    text-decoration: underline;
    ;
}



small {
	padding: 30px 0;
	width: 100%;
	font-size: 10px;
	text-align: center;
	display: block;
}

#container {
	text-align: left;
	 width: 100%;
     position: relative;
     height:auto !important; /*IE6対策*/
     height: 100%; /*IE6対策*/
     min-height: 100%;
	
}

/* header
--------------------------- */
#header{
	position: fixed;
	background-color: #FFF;
	width: 100%;
	height: 90px;
	z-index: 1000;
	padding-left: 30px;
	
		}

#header img{
	width: auto;
	padding-top: 20px;
	max-width: 350px;
	}

@media only screen and (max-width: 1024px) {
#header{
	height: 60px;
	width: 97%;
	padding-left: 3%;
	position: fixed;	
		}
#header img{
	width: auto;
	height: 40px;
	padding-top: 12px;
	
	}
}
/* dt_menu
--------------------------- */	
	
.dt_menu{
	font-family: 'Montserrat', sans-serif;
	position: fixed;
	top: 3px;
	right: 0px;
	width: 650px;
	height: 80px;
	cursor: pointer;
	z-index: 1000;
	opacity: 1;
	overflow: hidden;
	font-size: 100%;
}
.dt_menu li a{
	float: left;
	margin-right: 50px;
	margin-top: 25px;
	font-size: 100%;
    color:#000!important;
    text-align: center;

}
.dt_menu li a:hover{
    text-decoration: none;
    opacity: 0.6;

}
.dt_menu span,.menu span{
    font-size: 60%;
    color: #666;

}	
@media only screen and (max-width: 1024px) {
	.dt_menu{
	
	display: none;
	}
	
}

/* modal btn
--------------------------- */	
	
.menu-btn {
	position: fixed;
	top: 0px;
	right: 0px;
	width: 100px;
	height: 80px;
	font-size: 12px;
	text-align: center;
	cursor: pointer;
	z-index: 1001;
	opacity: 1;
	background-image: url(../img/layout/menu.svg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 35px auto;
	display: none;
}

/* 開閉用ボタンがクリックされた時のスタイル */
.open .menu-btn {
	background-image: url(../img/layout/cross.svg);
	background-repeat: no-repeat;
	background-position: center center;
}
@media only screen and (max-width: 1024px) {
.menu-btn{
	position: fixed;
	width: 80px;
	height: 60px;
	display: block;	
	}
}
	

/* modal style
--------------------------- */

.menu {
	position: fixed;
	top: 0;
  right: 0;
  bottom: 0;
  left: 0;
	overflow-y: scroll;
	background: rgba(0,0,0,.9);
	-webkit-transition: all .5s;
	transition: all .5s;
	opacity: 0;
	z-index: 1000;
	visibility: hidden;
}



/* 開閉用ボタンがクリックされた時のスタイル */
.open .menu {

    -webkit-transition: all .5s;
    transition: all .5s;
    visibility: visible;
    opacity: 1;
}





/* Wrapper
--------------------------- */
#wrapper {
	width: 100%;
	text-align: left;
	background: #fff;
	position: relative;
	z-index: 120;
	

}




/* menu panel
--------------------------- */

.menu_panel{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 100px;

	
}

.menu_box{
	font-family: 'Roboto', sans-serif;
	width: 100%;
	font-size: 140%;
	color: #FFFFFF;
}
.menu_box ul {
	
	text-align: center;
}
.menu_box ul li{

	margin-bottom: 40px;
	height: 40px;
}
.menu_box ul li a{
	color: #FFFFFF;
}
.menu_box:first-child {
	margin-left: 0px;
	
	}



/* footer
--------------------------- */
#footer {
	width: 100%;
	color: #000;
	background: #f5f6f6;
	height: 300px;
	clear: both;
}
#footer .section{
    width: 90%;
    padding-top: 60px;
    margin-left: auto;
    margin-right: auto;
	}

#footer h3{
	
	text-align: left;
	margin-right: auto;
	font-size: 100%;
	display: block;
	line-height: 18px;
}

#footer p{
	text-align: left;
	margin-right: auto;
	font-size: 80%;
	display: block;
	padding-top: 10px;
	line-height: 22px;
}
@media only screen and (max-width: 768px) {
	#footer {
		height: 200px;
	font-size: 80%;
	padding-bottom: 30px;
}
#footer .section{
    padding-top: 30px;
	}
	#footer .company{
	float: none;
	width: 94%;
	padding-top: 30px;
	margin-left: 5%;
	
	}
#footer .copy{
	float: none;
	width: 94%;
	padding-top: 30px;
	text-align: left;
	font-size: 80%;
	margin-right: 0%;
	margin-left: 5%;

	}
	
	
	
	}
	.fb-page{
    width: 100% !important;
}
.clear{
	clear: both;
	}
.home a{
    border-radius: 15px;        /* CSS3草案 */
    -webkit-border-radius: 15px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 15px;   /* Firefox用 */
    color: #FFFFFF;
    background-color: #009BE0;
    padding-top: 6px;
    padding-right: 15px;
    padding-bottom: 6px;
    padding-left: 15px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-weight: bold;
    font-size: 70%;
    text-decoration: none;
    z-index: 99999;
	}
	.home a:hover{
	background-color: #005E89;		
	}

@media only screen and (max-width: 768px) {
.home a{
position: fixed;
    bottom: 15px;

	}

}
.video{
    width:100%;          
padding-bottom: 56.25%; 
height:0px;             
position: relative;
    
}
video{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
    
}
.video iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

#category{
    padding-top: 30px;
}