/* CSS Document */
body {
  background: #000;
  color:#FFF;
  padding:0;
  margin:0;
  font-family: 'palatino linotype', serif;
  word-break: break-word;
}

ul,ol {list-style:none; padding:0;}

#back {width:100%; height:100%;}
#back video {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  min-height:700px;
  min-width:100%;
}
p.copy {display:inline-block}
p.insta {display:inline-block; margin-left:20px; vertical-align:top;}

@media (max-width: 1024px) {
#back {display:none;}
body {background:url(../images/key_2.jpg) ; background-size: 100% 100%; background-position:center center;}
}

#content {z-index:3; position:relative; margin:0 auto;}



header {position:relative;}
h1 {color:#FFF; margin-bottom:0px; font-size: 35px;}

.h3{

	}

header p {
  color: #fff;
  font-size:15px;
  margin:0;
}
header div{position:absolute; bottom:25%; right:10%; text-align:center;}
header#sub div {position:absolute; bottom:120px; right:10%;}
@media (min-width: 768px) {
header {height:700px; width:100%; max-width:700px; margin:0 auto;}

}
@media (max-width: 767px) {
header {height:300px; width:100%; margin:0 auto;}
}

header#sub {height:300px;}


footer {
	width:100%;
	margin:0 auto;
	padding:0;
	background:url(../images/3e00de_0285997bf4f14160b3febd4e45dc73bb-mv2_d_4928_3280_s_4_2.jpg) no-repeat;
	background-size:cover;
	background-position:center center;
}

@media (min-width: 768px) {

footer p {margin:0;}
footer div {width:96%; max-width:1000px; margin:0 auto; padding:30px 0 10px;}


}
footer ol li {float:left;}
footer ol li a{padding:5px 0px; background-color: rgba(255,255,255,0.3); color:#000; text-align:center;}
footer ol li a:hover {background-color: rgba(255,255,255,0.5);}
footer ol li a {color:#000; text-decoration:none; font-weight:bold; display:block;}

p.copy {text-align:center; color:#000; font-weight:bold;}
@media (min-width: 768px) {
footer p {margin:0;}
footer div {width:96%; margin:0 auto; padding:30px 0 10px; text-align:center;}

p.flogo { float:left;}

footer ol {margin:0 0 0 15%; padding-top:112px;}
footer ol li {width:16%; font-size:16px; font-size:20px;}

footer p.face {float:right;}
p.copy {font-size:20px;}
}

@media (max-width: 767px) {
footer p {margin:0;}
footer div {width:96%; margin:0 auto; padding:30px 0 10px; text-align:center;}

p.flogo a img{display:block; margin:0 auto;}
footer ol li {width:25%; font-size:14px;}

}

@media (max-width: 410px) {
 p.insta {display:block; margin-left:0; margin-top:20px;}
}


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


.fc:after{
  content: "."; 
  display: block; 
  height: 0; 
  font-size:0;	
  clear: both; 
  visibility:hidden;
}
	
.fc{display: inline-block;} 

/* Hides from IE Mac \*/
* html .fc {height: 1%;}
.fc{display:block;}
/* End Hack */ 

#ham-menu {
    background-color: #fff; /*メニュー背景色*/
    box-sizing: border-box;
    height: 100%;
    position: fixed;
    right: -300px; /*メニュー横幅 width と合わせる*/
    top: 0;
    transition: transform 0.3s linear 0s; /*0.3s はアニメーションにかかる時間*/
    width: 300px; /*メニュー横幅*/
    z-index: 1000;
}

#menu-background {
    background-color: #333; /*黒背景*/
    display: block;
    height: 100%;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: all 0.3s linear 0s; /*0.3s はアニメーションにかかる時間*/
    width: 100%;
    z-index: -1;
}

#menu-icon {
    background-color: #fff; /*アイコン部分背景色*/
    border-radius: 0 0 0 10px; /*左下角丸*/
    color: #333; /*アイコン（フォント）色*/
    cursor: pointer;
    display: block;
    font-size: 50px; /*アイコン（フォント）サイズ*/
    height: 50px; /*アイコン縦高さ*/
    line-height: 50px; /*縦位置中央化*/
    position: fixed;
    right: 0;
    text-align: center;
    top: 0;
    width: 50px; /*アイコン横幅*/
    transition: all 0.3s linear 0s; /*0.3s はアニメーションにかかる時間*/
    z-index: 1000;
}

#menu-cb {
    display: none; /*チェックボックス本体は消しておく*/
}

#menu-cb:checked ~ #ham-menu,
#menu-cb:checked ~ #menu-icon {
    transform: translate(-300px); /*メニュー本体横幅 width と合わせる*/
}

#menu-cb:checked ~ #menu-background {
    opacity: 0.5;
    z-index: 999;
}
#ham-menu li {
    border-bottom: 1px dashed #ccc;
}
#ham-menu li a {
    padding: 10px 30px;
    display: block;
    text-decoration: none;
}
#ham-menu li:hover {
    background: #F5F5F5;
}